/* =========================================================
   SWISS STYLE – Startseite
   Feuerwehr Krumhermersdorf · hell, minimalistisch, rasterbasiert
   ========================================================= */

/* -------- Design Tokens -------- */
:root{
  --bg:#ffffff;
  --bg-alt:#f4f4f4;
  --surface:#ffffff;
  --text:#111111;
  --text-soft:#555555;
  --line:#111111;
  --line-soft:#dcdcdc;
  --card-border:#d7d7d7;
  --primary:#e2001a;
  --primary-dark:#b30015;
  --accent:#0a6b3a;

  --step--1:clamp(.78rem,.76rem + .08vw,.82rem);
  --step-0:clamp(.95rem,.93rem + .1vw,1rem);
  --step-1:clamp(1.1rem,1rem + .4vw,1.3rem);
  --step-2:clamp(1.4rem,1.15rem + 1vw,1.9rem);
  --step-3:clamp(1.7rem,1.3rem + 1.6vw,2.6rem);
  --step-4:clamp(1.9rem,1.4rem + 2.2vw,3.2rem);

  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem;
  --sp-5:1.5rem; --sp-6:2.5rem; --sp-7:4rem;

  --nav-h:64px;
  --maxw:1280px;

  --mono:ui-monospace,"DejaVu Sans Mono",Menlo,Consolas,monospace;
  --dur:.2s;
  --ease:cubic-bezier(.2,.7,.2,1);
}

/* -------- Reset / Base -------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:var(--step-0);
  line-height:1.55;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
img,svg,video{max-width:100%;height:auto;display:block;}
a{color:var(--text);text-decoration:none;}
h1,h2,h3,h4{margin:0 0 var(--sp-3);line-height:1.1;font-weight:800;letter-spacing:-.01em;}
h1{font-size:var(--step-4);}
h2{font-size:var(--step-3);}
h3{font-size:var(--step-2);}
p{margin:0 0 var(--sp-4);}
ul{margin:0;padding:0;list-style:none;}

.container{
  width:100%;max-width:var(--maxw);
  margin-inline:auto;padding-inline:var(--sp-5);
}
.eyebrow{
  font-family:var(--mono);text-transform:uppercase;
  letter-spacing:.14em;font-size:var(--step--1);
}

/* -------- Header: Brand links, Nav daneben -------- */
.site-header{
  position:sticky;top:0;z-index:1000;
  background:var(--bg);
  border-bottom:2px solid var(--line);
}
.topbar{
  display:flex;align-items:center;
  gap:var(--sp-5);
  min-height:var(--nav-h);
}
.brand{
  display:flex;align-items:center;gap:var(--sp-3);
  text-decoration:none;color:var(--text);
  flex:0 0 auto;
}
.brand-mark{
  display:grid;place-items:center;
  width:44px;height:44px;
  background:var(--primary);color:#fff;
  font-weight:800;font-size:1rem;
}
.brand-text{display:flex;flex-direction:column;line-height:1.1;}
.brand-text strong{font-size:var(--step-0);font-weight:800;}
.brand-text span{
  font-size:var(--step--1);color:var(--text-soft);
  text-transform:uppercase;letter-spacing:.04em;
}

.main-nav{display:block;background:var(--bg);}
.nav-wrap{
  width:100%;max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--sp-5);
  display:flex;align-items:center;gap:var(--sp-4);
}
.nav-wrap a{
  color:var(--text);
  text-transform:uppercase;font-weight:700;
  letter-spacing:.02em;font-size:var(--step--1);
  padding:var(--sp-2) 0;
  border-bottom:2px solid transparent;
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.nav-wrap a:hover{color:var(--primary);}
.nav-wrap a.active,
.nav-wrap a[aria-current="page"]{color:var(--primary);border-bottom-color:var(--primary);}

/* Hamburger nur mobil */
.menu-toggle{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;margin-left:auto;
  border:none;background:transparent;cursor:pointer;
}
.menu-toggle span{
  display:block;width:24px;height:2px;background:var(--text);margin-inline:auto;
  transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease);
}
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.nav-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.4);
  opacity:0;visibility:hidden;transition:opacity var(--dur) var(--ease);
  z-index:998;
}
.nav-overlay.open{opacity:1;visibility:visible;}

/* =========================================================
   HERO – 2-Spalten-Grid (Hauptinhalt + Seitenleiste)
   ========================================================= */
.hero{padding-block:var(--sp-6);}
.hero-grid{
  display:grid;
  grid-template-columns:1.4fr .8fr;   /* links Inhalt, rechts Sidebar */
  gap:var(--sp-6);
  align-items:start;
}
.hero-main .eyebrow{color:var(--primary);font-weight:700;margin-bottom:var(--sp-3);}
.hero-main h1{font-size:var(--step-4);text-transform:uppercase;max-width:16ch;}
.hero-main p{font-size:var(--step-1);color:var(--text-soft);max-width:60ch;}

.hero-actions{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-5);}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;gap:var(--sp-2);
  padding:var(--sp-3) var(--sp-5);
  font-weight:700;text-transform:uppercase;letter-spacing:.03em;
  font-size:var(--step--1);
  border:2px solid var(--line);background:var(--bg);color:var(--text);
  cursor:pointer;transition:background var(--dur) var(--ease),color var(--dur) var(--ease);
}
.btn:hover{background:var(--text);color:#fff;}
.btn--primary{background:var(--primary);border-color:var(--primary);color:#fff;}
.btn--primary:hover{background:var(--primary-dark);border-color:var(--primary-dark);}
.btn-primary{background:var(--primary);border-color:var(--primary);color:#fff;}
.btn-primary:hover{background:var(--primary-dark);border-color:var(--primary-dark);}

/* -------- Stationsfoto (Größe begrenzt, ohne Graustufen) -------- */
.station-photo{
  border:1px solid var(--card-border);
  overflow:hidden;
  margin:0 0 var(--sp-6);
}
.station-photo img{
  width:100%;
  max-height:420px;              /* verhindert Riesenbild */
  object-fit:cover;
  filter:none;
}
.station-photo figcaption{
  padding:var(--sp-3) var(--sp-4);
  font-family:var(--mono);
  font-size:var(--step--1);text-transform:uppercase;letter-spacing:.04em;
  border-top:1px solid var(--line-soft);color:var(--text-soft);
}

/* =========================================================
   SEITENLEISTE (data-include: home-sidebar)
   ========================================================= */
.home-sidebar{display:grid;gap:var(--sp-5);align-content:start;}
.hero-card{
  border:1px solid var(--card-border);
  padding:var(--sp-5);background:var(--surface);
}
.hero-card h3{
  text-transform:uppercase;font-size:var(--step-1);
  border-bottom:1px solid var(--line-soft);padding-bottom:var(--sp-2);margin-bottom:var(--sp-4);
}
.hero-card dl{margin:0;}
.hero-card dt{
  font-family:var(--mono);
  text-transform:uppercase;
  letter-spacing:.04em;
  font-size:var(--step--1);
  color:var(--text-soft);
  margin-bottom:var(--sp-1);
}
.hero-card dd{margin:0 0 var(--sp-3);font-weight:700;}

.home-sidebar > h3{margin-bottom:0;}
.sidebar-events{display:grid;gap:0;}
.event-card{
  padding:var(--sp-4) 0;
  background:transparent;
  border:none;
  border-top:1px solid var(--line-soft);
}
.event-card:first-child{padding-top:0;border-top:none;}
.event-card h3{margin:0 0 var(--sp-2);font-size:var(--step-1);text-transform:none;}
.event-date{
  margin:0 0 var(--sp-2);
  font-family:var(--mono);
  font-size:var(--step--1);
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--primary);
}
.event-card p{margin:0 0 var(--sp-3);font-size:var(--step-0);color:var(--text-soft);}
.event-flyer{display:block;margin:0 0 var(--sp-3);}
.event-flyer img{width:100%;height:auto;border:none;}
.text-link{font-weight:700;text-transform:uppercase;font-size:var(--step--1);letter-spacing:.03em;}

/* Dienstplan / nächste Veranstaltung */
.next-event{display:flex;flex-direction:column;gap:var(--sp-2);}
.next-event .date{font-size:var(--step-2);font-weight:800;line-height:1;}
.next-event .title{font-weight:700;}
.next-event .meta{
  font-family:var(--mono);font-size:var(--step--1);color:var(--text-soft);
  text-transform:uppercase;letter-spacing:.03em;
}

/* =========================================================
   INSTAGRAM (Karussell)
   ========================================================= */
.instagram-section{margin-top:var(--sp-7);}
.instagram-section h2{
  border-bottom:2px solid var(--line);padding-bottom:var(--sp-2);margin-bottom:var(--sp-5);
  text-transform:uppercase;
}
.instagram-post{border:1px solid var(--card-border);padding:var(--sp-4);background:var(--surface);}
.instagram-post .caption{font-size:var(--step-0);color:var(--text-soft);}
.instagram-post.instagram-link{display:inline-block;margin-top:var(--sp-3);color:var(--primary);font-weight:700;}
.instagram-post.instagram-link:hover{text-decoration:underline;}
.instagram-carousel{position:relative;}
.carousel-slide{display:none;}
.carousel-slide.active{display:block;}
.carousel-slide img{width:100%;max-height:480px;object-fit:cover;}
.carousel-slide video{width:100%;height:auto;max-height:480px;object-fit:cover;}
.instagram-carousel > .nav-button{
  position:absolute;top:0;bottom:0;width:48px;
  border:none;background:rgba(0,0,0,.24);color:#fff;
  cursor:pointer;font-size:1.4rem;z-index:5;
}
.instagram-carousel > .nav-button.prev{left:0;}
.instagram-carousel > .nav-button.next{right:0;}
.instagram-carousel > .nav-button:hover{background:rgba(0,0,0,.45);}
.carousel-indicators{display:flex;gap:.5rem;margin-top:var(--sp-3);justify-content:center;}
.carousel-indicator{width:16px;height:4px;background:var(--line-soft);border-radius:2px;}
.carousel-indicator.active{background:var(--primary);}

/* =========================================================
   Seitenlayout-Kompatibilität (Unterseiten)
   ========================================================= */
.skip-link{
  position:absolute;
  left:-9999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}
.skip-link:focus{
  left:var(--sp-4);
  top:var(--sp-4);
  width:auto;
  height:auto;
  padding:var(--sp-2) var(--sp-3);
  background:var(--surface);
  border:2px solid var(--line);
  z-index:1200;
}

.lead{font-size:var(--step-1);color:var(--text-soft);max-width:64ch;}
.page-main{padding-block:var(--sp-6);}
.page-head{margin-bottom:var(--sp-5);}
.page-head .eyebrow{
  color:var(--primary);
  font-weight:700;
  font-size:var(--step-0);
  letter-spacing:.16em;
  margin-bottom:var(--sp-2);
}
.page-section{margin-bottom:var(--sp-6);}
.page-section-title{
  margin:0 0 var(--sp-4);
  font-size:var(--step-1);
  text-transform:uppercase;
  letter-spacing:.05em;
}
.page-note{
  margin:var(--sp-2) 0 0;
  font-family:var(--mono);
  font-size:var(--step--1);
  letter-spacing:.03em;
  color:var(--text-soft);
}

.section{padding-block:var(--sp-5);}
.card-grid{display:grid;gap:var(--sp-4);}
.panel{
  border:1px solid var(--card-border);
  background:var(--surface);
  padding:var(--sp-5);
}

.table-wrap{overflow-x:auto;}
table{width:100%;border-collapse:collapse;min-width:700px;}
th,td{padding:var(--sp-3);text-align:left;border-bottom:1px solid var(--line-soft);vertical-align:top;}
th{font-size:var(--step--1);text-transform:uppercase;letter-spacing:.05em;}

.plan-details{border:1px solid var(--card-border);margin-bottom:var(--sp-4);}
.plan-summary{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:var(--sp-3) var(--sp-4);
  cursor:pointer;
  font-weight:700;
}
.plan-summary::-webkit-details-marker{display:none;}
.plan-summary:hover{background:var(--bg-alt);}
.plan-arrow{font-size:var(--step--1);transition:transform var(--dur) var(--ease);}
.plan-details[open] .plan-arrow{transform:rotate(180deg);}
.plan-details[open] .plan-summary{border-bottom:1px solid var(--line-soft);}

.next-dienste-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4);}
.next-dienst-card{border:1px solid var(--card-border);padding:var(--sp-4);background:var(--surface);min-height:8.5rem;}
.next-plan{
  margin:0 0 var(--sp-2);
  font-family:var(--mono);
  font-size:var(--step-0);
  font-weight:700;
  line-height:1.3;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--text-soft);
}
.next-meta{
  margin:0;
  font-size:var(--step-2);
  font-weight:800;
  line-height:1.2;
  color:var(--text);
}
.next-desc{margin:var(--sp-3) 0 0;font-size:var(--step-0);line-height:1.5;color:var(--text-soft);}

.vehicle-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-5);margin-block:var(--sp-5);}
.vehicle-card-large{border:1px solid var(--card-border);background:var(--surface);min-width:0;}
.vehicle-title{margin:0;padding:var(--sp-4) var(--sp-4) var(--sp-2);text-transform:uppercase;font-size:var(--step-1);}
.vehicle-viewer-wrap{position:relative;background:var(--bg-alt);}
.vehicle-viewer,
.vehicle-image-fallback{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;}
.cloudimage-360{display:block;width:100%;height:100%;}
.vehicle-viewer[hidden],
.vehicle-image-fallback[hidden],
.vehicle-click-hint[hidden]{display:none !important;}
.vehicle-click-hint{
  position:absolute;
  left:50%;
  bottom:var(--sp-3);
  transform:translateX(-50%);
  font-family:var(--mono);
  font-size:var(--step--1);
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#fff;
  background:rgba(0,0,0,.55);
  padding:var(--sp-2) var(--sp-3);
  pointer-events:none;
}
.vehicle-image-large img{width:100%;height:auto;display:block;}
.vehicle-specs{padding:0 var(--sp-4) var(--sp-4);}
.spec-row{display:flex;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-2) 0;border-bottom:1px solid var(--line-soft);}
.spec-row:last-child{border-bottom:none;}
.spec-label{color:var(--text-soft);}
.spec-value{text-align:right;font-weight:700;}

.trailer-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4);margin-block:var(--sp-5);}
.trailer-card{border:1px solid var(--card-border);background:var(--surface);padding:var(--sp-4);}
.trailer-card h2{margin:0 0 var(--sp-3);font-size:var(--step-1);text-transform:uppercase;}
.trailer-specs{display:grid;gap:0;}
.trailer-specs .spec-row{font-size:var(--step-0);}

.history-section{margin-block:var(--sp-6);padding:var(--sp-5);border:1px solid var(--card-border);background:var(--surface);}
.history-section h2{margin-bottom:var(--sp-4);font-size:var(--step-2);}
.history-timeline{font-size:var(--step-0);line-height:1.7;color:var(--text-soft);}
.history-timeline p{margin:0 0 var(--sp-2);}

.content-split{display:grid;grid-template-columns:1fr 280px;gap:var(--sp-6);align-items:start;}
.flyer-sidebar img{width:100%;height:auto;border:1px solid var(--line-soft);}

.features{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4);}
.feature-card{border:1px solid var(--card-border);background:var(--surface);padding:var(--sp-4);}
.feature-card h2{margin:0 0 var(--sp-2);font-size:var(--step-1);}
.feature-card p,
.feature-card li{font-size:var(--step-0);color:var(--text-soft);line-height:1.6;}

.faq-section{margin-top:var(--sp-6);}
.section-title{margin:0 0 var(--sp-4);font-size:var(--step-2);text-transform:uppercase;}
.faq-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-4);}
.faq-item{border:1px solid var(--card-border);background:var(--surface);padding:var(--sp-4);}
.faq-item h3{margin:0 0 var(--sp-2);font-size:var(--step-1);}
.faq-item p{margin:0;color:var(--text-soft);}

.cta-box{
  margin-top:var(--sp-6);
  padding:var(--sp-6);
  background:#faf7f3;
  color:var(--text);
  border:1px solid var(--card-border);
  border-left:4px solid var(--primary);
}
.cta-box h2{margin:0 0 var(--sp-2);color:var(--text);}
.cta-box p{margin:0 0 var(--sp-4);color:var(--text-soft);}
.cta-box a{color:inherit;}
.cta-box .btn-primary,
.cta-box .btn--primary{
  background:var(--surface);
  border-color:var(--line);
  color:var(--text);
}
.cta-box .btn-primary:hover,
.cta-box .btn--primary:hover{
  background:var(--text);
  border-color:var(--text);
  color:#fff;
}

.team-image{margin-block:var(--sp-5);border:1px solid var(--card-border);overflow:hidden;}
.team-image img{width:100%;height:auto;display:block;}
.abteilung-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4);}

.contact-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
.footer-links{display:flex;align-items:center;gap:var(--sp-4);}

.legal .panel{max-width:80ch;}
.muted{color:var(--text-soft);font-size:var(--step-0);}

/* JS setzt .open, daher zusätzlich zur aria-Variante unterstuetzen */
.menu-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.menu-toggle.open span:nth-child(2){opacity:0;}
.menu-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

@media (max-width:900px){
  .vehicle-grid,
  .trailer-grid,
  .content-split,
  .contact-grid{grid-template-columns:1fr;}

  .flyer-sidebar{order:-1;}
  .flyer-sidebar img{max-width:320px;margin-inline:auto;}

  .faq-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* Desktop: Navigation optisch in Header-Zeile neben der Marke */
@media (min-width:1041px){
  .main-nav{
    position:sticky;
    top:0;
    z-index:1100;
    margin-top:calc(-1 * var(--nav-h));
    height:0;
    margin-bottom:var(--nav-h);
    background:transparent;
    pointer-events:none;
    overflow:visible;
  }

  .nav-wrap{
    position:relative;
    z-index:1101;
    min-height:var(--nav-h);
    justify-content:flex-start;
    padding-left:clamp(17rem,34vw,26rem);
    pointer-events:auto;
  }
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{
  border-top:2px solid var(--line);
  padding-block:var(--sp-6);margin-top:var(--sp-7);
  font-size:var(--step--1);color:var(--text-soft);
}
.footer-grid{
  display:flex;flex-wrap:wrap;gap:var(--sp-5);
  align-items:center;justify-content:space-between;
}
.footer-grid p{margin:0;font-family:var(--mono);text-transform:uppercase;letter-spacing:.06em;}
.site-footer a{color:var(--text);}
.site-footer a:hover{color:var(--primary);}
.social-links{
  position:fixed;
  top:50%;
  right:0;
  transform:translateY(-50%);
  display:flex;
  flex-direction:column;
  gap:.5rem;
  z-index:100;
}
.social-links a{
  width:40px;height:40px;display:grid;place-items:center;
  background:var(--primary);
  color:#fff;
  border:none;
  border-radius:8px 0 0 8px;
  transition:transform var(--dur) var(--ease),background var(--dur) var(--ease);
}
.social-links a:hover{
  transform:translateX(-4px);
  background:var(--primary-dark);
  color:#fff;
}

@media (max-width:900px){
  .social-links{
    top:auto;
    bottom:1rem;
    right:1rem;
    transform:none;
    flex-direction:row;
  }

  .social-links a{
    width:36px;
    height:36px;
    border-radius:50%;
  }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
/* Hero-Grid einspaltig ab Tablet */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;}
  .station-photo img{max-height:340px;}
}

/* Mobile Off-Canvas-Nav */
@media (max-width:1040px){
  :root{--nav-h:60px;}
  .menu-toggle{display:flex;}
  .main-nav{
    position:fixed;top:0;right:0;
    height:100dvh;width:min(86vw,360px);
    flex:none;display:block;
    padding:calc(var(--nav-h) + var(--sp-4)) 0 var(--sp-6);
    background:var(--bg);border-left:2px solid var(--line);
    transform:translateX(105%);
    transition:transform var(--dur) var(--ease);
    z-index:999;overflow-y:auto;
  }
  .main-nav.open{transform:translateX(0);}
  .nav-wrap{flex-direction:column;align-items:stretch;gap:0;margin-left:0;}
  .nav-wrap a{
    padding:var(--sp-4) var(--sp-5);font-size:var(--step-0);
    border-bottom:1px solid var(--line-soft);
  }

  .card-grid,
  .abteilung-grid,
  .features,
  .faq-grid,
  .next-dienste-grid{grid-template-columns:1fr;}

  .site-header .menu-toggle{position:relative;top:auto;right:auto;}
}

/* -------- Reduced Motion -------- */
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;scroll-behavior:auto !important;}
}