/* ==========================================================================
   VigiAnima. Design-System
   Schriften lokal gehostet (SIL Open Font License), kein Google Fonts,
   keine Tracker, keine CDN-Abhaengigkeit.
   ========================================================================== */

/* ---------- Schriften ---------- */
@font-face{
  font-family:"Fraunces"; font-style:normal; font-display:swap; font-weight:100 900;
  src:url(/assets/fonts/fraunces-latin.woff2) format("woff2-variations");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Fraunces"; font-style:normal; font-display:swap; font-weight:100 900;
  src:url(/assets/fonts/fraunces-latin-ext.woff2) format("woff2-variations");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2020,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Instrument Sans"; font-style:normal; font-display:swap; font-weight:400 700;
  src:url(/assets/fonts/instrument-sans-latin.woff2) format("woff2-variations");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Instrument Sans"; font-style:normal; font-display:swap; font-weight:400 700;
  src:url(/assets/fonts/instrument-sans-latin-ext.woff2) format("woff2-variations");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2020,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  /* Grund */
  --tinte:        #0D2429;
  --tiefe:        #17414A;
  --grund:        #E3E9E5;
  --hell:         #F5F7F5;
  --sand:         #F1EADF;
  --nebel:        #CBD7D1;

  /* Messing */
  --messing:      #8B5A2F;
  --messing-tief: #6E451F;
  --messing-akz:  #A97142;
  --messing-hell: #DDB98E;

  /* Schrift und Linie */
  --tinte-70:     rgba(13,36,41,.70);
  --tinte-50:     rgba(13,36,41,.52);
  --linie:        rgba(13,36,41,.13);
  --linie-fein:   rgba(13,36,41,.07);
  --linie-hell:   rgba(227,233,229,.18);
  --hell-70:      rgba(227,233,229,.72);
  --hell-50:      rgba(227,233,229,.52);

  --frei:  #3C7A5F;
  --knapp: #9A6A22;
  --voll:  #8A4747;

  --serif: "Fraunces","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:  "Instrument Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  --rad:   3px;
  --rad-l: 8px;
  --rad-xl:14px;

  --breite: 1220px;
  --schmal: 720px;
  --gutter: clamp(22px, 5.2vw, 64px);
  --block:  clamp(76px, 10vw, 148px);

  --kopfhoehe: 78px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth; scroll-padding-top:92px;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--hell);
  color:var(--tinte);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.7;
  font-feature-settings:"kern" 1,"liga" 1;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

::selection{ background:var(--messing-hell); color:var(--tinte); }

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

/* ---------- Typografie ---------- */
h1,h2,h3{
  font-family:var(--serif); font-weight:380; line-height:1.06;
  letter-spacing:-.022em; margin:0 0 .48em; text-wrap:balance;
  font-variation-settings:"SOFT" 0,"WONK" 0;
}
h1{ font-size:clamp(2.75rem, 6.6vw, 5rem); font-variation-settings:"opsz" 120,"SOFT" 0,"WONK" 0; }
h2{ font-size:clamp(2.05rem, 4.4vw, 3.35rem); font-variation-settings:"opsz" 72,"SOFT" 0,"WONK" 0; }
h3{ font-size:clamp(1.28rem, 2.1vw, 1.6rem); line-height:1.22; letter-spacing:-.012em;
    font-variation-settings:"opsz" 24,"SOFT" 0,"WONK" 0; }
h4{ font-family:var(--sans); font-size:1.02rem; font-weight:600; letter-spacing:-.005em; margin:0 0 .5em; }
p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }
strong,b{ font-weight:600; }

.kicker{
  font-family:var(--sans); font-size:.7rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--messing);
  margin:0 0 1.25rem; display:flex; align-items:center; gap:.85rem;
}
.kicker::before{ content:""; width:34px; height:1px; background:var(--messing-akz); flex:none; opacity:.7; }

.lead{
  font-size:clamp(1.1rem,1.55vw,1.3rem); line-height:1.62; color:var(--tinte-70);
  letter-spacing:-.006em;
}
.klein{ font-size:.86rem; line-height:1.6; color:var(--tinte-50); }
.zentriert{ text-align:center; }
.zentriert .kicker{ justify-content:center; }
.zentriert .kicker::before{ display:none; }

/* ---------- Layout ---------- */
.wrap{ width:100%; max-width:var(--breite); margin-inline:auto; padding-inline:var(--gutter); }
.wrap-schmal{ max-width:var(--schmal); }
.block{ padding-block:var(--block); }
.block-klein{ padding-block:clamp(52px,6.5vw,84px); }

.grund-hell{ background:var(--hell); }
.grund-salbei{ background:var(--grund); }
.grund-sand{ background:var(--sand); }
.grund-dunkel{ background:var(--tinte); color:var(--grund); }

.grund-dunkel h1,.grund-dunkel h2,.grund-dunkel h3,
.hero h1,.hero h2,.hero h3,.seitenkopf h1,.band h2{ color:var(--hell); }
.grund-dunkel .lead,.grund-dunkel .klein,
.hero .klein,.band .lead,.seitenkopf .lead,.hero .lead{ color:var(--hell-70); }
.grund-dunkel .kicker,.hero .kicker,.seitenkopf .kicker,.band .kicker{ color:var(--messing-hell); }
.grund-dunkel .kicker::before,.hero .kicker::before,
.seitenkopf .kicker::before,.band .kicker::before{ background:var(--messing-hell); }

.raster{ display:grid; gap:clamp(22px,3vw,38px); }
.raster-2{ grid-template-columns:repeat(2,1fr); }
.raster-3{ grid-template-columns:repeat(3,1fr); }
.raster-4{ grid-template-columns:repeat(4,1fr); }
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5.5vw,84px); align-items:center; }
.split-weit{ grid-template-columns:1.12fr .88fr; }
.split-schmal{ grid-template-columns:.88fr 1.12fr; }

@media (max-width:900px){
  .raster-3,.raster-4{ grid-template-columns:repeat(2,1fr); }
  .split,.split-weit,.split-schmal{ grid-template-columns:1fr; }
  .split .bild-zuerst{ order:-1; }
}
@media (max-width:620px){
  .raster-2,.raster-3,.raster-4{ grid-template-columns:1fr; }
  .kicker{ font-size:.64rem; letter-spacing:.16em; align-items:flex-start; gap:.7rem; }
  .kicker::before{ width:22px; margin-top:.62em; }
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--sans); font-size:.92rem; font-weight:600; letter-spacing:-.002em;
  padding:1rem 1.75rem; border-radius:var(--rad); border:1px solid transparent;
  text-decoration:none; cursor:pointer; line-height:1.2; text-align:center;
  transition:background .3s var(--ease), color .3s var(--ease),
             border-color .3s var(--ease), transform .3s var(--ease),
             box-shadow .3s var(--ease);
}
.btn-primaer{ background:var(--messing); color:#fff; box-shadow:0 1px 2px rgba(13,36,41,.10); }
.btn-primaer:hover{ background:var(--messing-tief); transform:translateY(-1px); box-shadow:0 6px 20px rgba(110,69,31,.22); }
.btn-sekundaer{ background:transparent; color:var(--tinte); border-color:var(--linie); }
.btn-sekundaer:hover{ border-color:var(--tinte); background:rgba(13,36,41,.03); }
.grund-dunkel .btn-sekundaer,.hero .btn-sekundaer,.seitenkopf .btn-sekundaer,.band .btn-sekundaer{
  color:var(--grund); border-color:var(--linie-hell);
}
.grund-dunkel .btn-sekundaer:hover,.hero .btn-sekundaer:hover,
.seitenkopf .btn-sekundaer:hover,.band .btn-sekundaer:hover{
  border-color:var(--hell-50); background:rgba(227,233,229,.07);
}
.btn-hell{ background:var(--hell); color:var(--tinte); }
.btn-reihe{ display:flex; flex-wrap:wrap; gap:.8rem; }
.zentriert .btn-reihe{ justify-content:center; }
.btn:focus-visible,a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:2px solid var(--messing-akz); outline-offset:3px; border-radius:2px;
}

.textlink{
  display:inline-flex; align-items:center; gap:.4rem; text-decoration:none;
  font-weight:600; font-size:.93rem; color:var(--messing);
  background-image:linear-gradient(currentColor,currentColor);
  background-size:100% 1px; background-repeat:no-repeat; background-position:0 100%;
  padding-bottom:3px; transition:background-size .35s var(--ease), color .25s var(--ease);
}
.textlink:hover{ background-size:0% 1px; }
.grund-dunkel .textlink,.hero .textlink,.seitenkopf .textlink,.band .textlink{ color:var(--messing-hell); }

/* ---------- Kopf ---------- */
.kopf{
  position:sticky; top:0; z-index:60;
  background:rgba(245,247,245,.82); backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid var(--linie-fein);
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.kopf-dunkel{ background:transparent; border-bottom-color:transparent; color:var(--grund); }
.kopf-dunkel .burger{ background:rgba(13,36,41,.4); }
.kopf[data-gescrollt="true"]{ background:rgba(245,247,245,.95); border-bottom-color:var(--linie); }
.kopf-dunkel[data-gescrollt="true"]{ background:rgba(13,36,41,.92); border-bottom-color:var(--linie-hell); }

.kopf-inner{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; min-height:var(--kopfhoehe); }
.marke{
  font-family:var(--serif); font-size:1.42rem; font-weight:420; letter-spacing:-.015em;
  text-decoration:none; flex:none; line-height:1.1;
  font-variation-settings:"opsz" 20,"SOFT" 0,"WONK" 0;
}
.marke span{
  display:block; font-family:var(--sans); font-size:.58rem; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; opacity:.62; margin-top:3px;
}
.nav{ display:flex; align-items:center; gap:1.7rem; }
.nav a{
  text-decoration:none; font-size:.92rem; font-weight:500; opacity:.78; padding:.35rem 0;
  position:relative; transition:opacity .25s var(--ease);
}
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--messing-akz); transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--ease);
}
.nav a:hover{ opacity:1; }
.nav a:hover::after{ transform:scaleX(1); }
.nav a[aria-current="page"]{ opacity:1; }
.nav a[aria-current="page"]::after{ transform:scaleX(1); }
.kopf .btn{ padding:.72rem 1.25rem; font-size:.86rem; }
.nav > .btn{ display:none; }

.burger{
  display:none; background:none; border:1px solid var(--linie); border-radius:var(--rad);
  padding:.6rem .9rem; font:inherit; font-size:.85rem; font-weight:600; cursor:pointer; color:inherit;
}
.kopf-dunkel .burger{ border-color:var(--linie-hell); }

@media (max-width:980px){
  .burger{ display:block; }
  .nav{
    position:absolute; inset:100% 0 auto; flex-direction:column; align-items:stretch; gap:0;
    background:var(--hell); border-bottom:1px solid var(--linie);
    padding:.4rem var(--gutter) 1.6rem; display:none;
  }
  .kopf-dunkel .nav{ background:var(--tinte); border-bottom-color:var(--linie-hell); }
  .nav[data-offen="true"]{ display:flex; }
  .nav a{ padding:.95rem 0; border-bottom:1px solid var(--linie-fein); font-size:1.02rem; }
  .kopf-dunkel .nav a{ border-bottom-color:var(--linie-hell); }
  .nav a::after{ display:none; }
  .nav > .btn{ display:inline-flex; margin-top:1.2rem; }
  .kopf-cta-desktop{ display:none; }
}

/* ---------- Hero ---------- */
.hero{
  position:relative; background:var(--tinte); color:var(--grund); overflow:hidden;
  margin-top:calc(-1 * var(--kopfhoehe)); padding-top:var(--kopfhoehe);
}
.hero-bild{ position:absolute; inset:0; }
.hero-bild img,.hero-video{ width:100%; height:100%; object-fit:cover; opacity:.34; }
.hero-video{ display:block; background:var(--tinte); }

.video-schalter{
  position:absolute; right:var(--gutter); bottom:1.5rem; z-index:4;
  font:inherit; font-size:.72rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  padding:.5rem .95rem; border-radius:999px; cursor:pointer;
  background:rgba(13,36,41,.5); border:1px solid var(--linie-hell); color:var(--hell-70);
  backdrop-filter:blur(8px);
  transition:color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}
.video-schalter:hover{ color:var(--hell); border-color:var(--hell-50); background:rgba(13,36,41,.72); }
@media (max-width:620px){ .video-schalter{ right:auto; left:var(--gutter); bottom:1rem; font-size:.66rem; } }
.hero-bild::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 78% 42%, rgba(169,113,66,.16) 0%, transparent 62%),
    linear-gradient(102deg, rgba(13,36,41,.96) 0%, rgba(13,36,41,.84) 44%, rgba(13,36,41,.56) 100%);
}
.hero-inner{ position:relative; z-index:2; padding-block:clamp(92px,13.5vw,168px); }
.hero h1{ max-width:14ch; }
.hero .lead{ max-width:46ch; }
.hero-split{ display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(36px,6vw,88px); align-items:center; }
@media (max-width:900px){
  .hero-split{ grid-template-columns:1fr; gap:2.4rem; }
  .hero-inner{ padding-block:clamp(76px,16vw,110px) clamp(48px,10vw,72px); }
  .atem-kreis{ width:min(232px,54vw); }
  .atem{ gap:1.1rem; }
  .atem-phase{ font-size:1.3rem; }
  .hero-fakten{ gap:1.5rem; margin-top:2rem; padding-top:1.5rem; }
  .hero-fakten b{ font-size:1.45rem; }
  .atem > .klein{ display:none; }
}

.hero-fakten{
  display:flex; flex-wrap:wrap; gap:2.2rem; margin-top:2.8rem; padding-top:1.9rem;
  border-top:1px solid var(--linie-hell);
}
.hero-fakten div{ min-width:112px; }
.hero-fakten b{
  display:block; font-family:var(--serif); font-size:1.7rem; font-weight:380;
  color:var(--hell); letter-spacing:-.02em; font-variation-settings:"opsz" 30;
  font-variant-numeric:lining-nums;
}
.hero-fakten span{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--hell-50); }

.seitenkopf{
  background:var(--tinte); color:var(--grund);
  margin-top:calc(-1 * var(--kopfhoehe));
  padding-block:calc(var(--kopfhoehe) + clamp(72px,9.5vw,124px)) clamp(72px,9.5vw,124px);
}
.seitenkopf h1{ max-width:17ch; }
.seitenkopf .lead{ max-width:56ch; }

/* ---------- Atem-Animation ---------- */
.atem{ display:flex; flex-direction:column; align-items:center; gap:1.5rem; }
.atem-kreis{
  position:relative; width:min(310px,66vw); aspect-ratio:1; border-radius:50%;
  display:grid; place-items:center; text-align:center;
  background:radial-gradient(circle at 42% 34%, rgba(221,185,142,.17), rgba(169,113,66,.07) 56%, transparent 72%);
  border:1px solid rgba(221,185,142,.36);
  will-change:transform;
}
.atem-kreis::after{
  content:""; position:absolute; inset:-13%; border-radius:50%;
  border:1px solid rgba(221,185,142,.14);
}
.atem-phase{
  font-family:var(--serif); font-size:1.55rem; font-weight:380; color:var(--hell);
  letter-spacing:-.01em; font-variation-settings:"opsz" 28;
}
.atem-zahl{ font-size:.88rem; color:var(--hell-50); margin-top:.3rem; font-variant-numeric:tabular-nums; }
.atem-schalter{ display:flex; flex-wrap:wrap; gap:.45rem; justify-content:center; }
.atem-schalter button{
  font:inherit; font-size:.79rem; font-weight:500; padding:.48rem 1rem; border-radius:999px; cursor:pointer;
  background:rgba(227,233,229,.06); border:1px solid var(--linie-hell); color:var(--hell-70);
  transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.atem-schalter button:hover{ border-color:var(--hell-50); color:var(--hell); }
.atem-schalter button[aria-pressed="true"]{
  background:var(--messing-akz); border-color:var(--messing-akz); color:#fff;
}

/* ---------- Karten ---------- */
.karte{
  background:#fff; border:1px solid var(--linie-fein); border-radius:var(--rad-l);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.grund-salbei .karte,.grund-sand .karte{ background:var(--hell); }
.karte:hover{
  transform:translateY(-4px); border-color:var(--linie);
  box-shadow:0 2px 6px rgba(13,36,41,.04), 0 22px 48px rgba(13,36,41,.10);
}
.karte-bild{ aspect-ratio:7/5; background:var(--nebel); overflow:hidden; }
.karte-bild img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.karte:hover .karte-bild img{ transform:scale(1.035); }
.karte-inhalt{ padding:clamp(22px,2.5vw,32px); display:flex; flex-direction:column; gap:.85rem; flex:1; }
.karte-inhalt h3{ margin:0; }
.karte-inhalt p{ color:var(--tinte-70); font-size:.96rem; }
.karte-fuss{
  margin-top:auto; padding-top:1.1rem; margin-top:auto; border-top:1px solid var(--linie-fein);
  display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; flex-wrap:wrap;
}
.karte-fuss:first-child{ border-top:0; }
.preis{
  font-family:var(--serif); font-size:1.7rem; font-weight:380; letter-spacing:-.02em;
  line-height:1.1; font-variation-settings:"opsz" 32; font-variant-numeric:lining-nums;
}
.preis small{
  font-family:var(--sans); font-size:.76rem; color:var(--tinte-50); display:block;
  font-weight:500; letter-spacing:0; margin-top:.2rem;
}

/* ---------- Schritte ---------- */
.schritt-nr{
  font-family:var(--serif); font-size:2.9rem; font-weight:340; line-height:1;
  color:var(--messing-akz); opacity:.42; display:block; margin-bottom:.55rem;
  font-variation-settings:"opsz" 60;
}
.schritt-bild{
  aspect-ratio:4/5; border-radius:var(--rad-l); overflow:hidden;
  background:var(--nebel); margin-bottom:1.6rem;
}
.schritt-bild img{ width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease); }
.schritt:hover .schritt-bild img{ transform:scale(1.03); }
.schritt-zeit{
  font-size:.73rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--tinte-50); margin-bottom:.45rem; font-weight:600;
}

/* ---------- Merkmalliste ---------- */
.merkmale{ list-style:none; margin:0; padding:0; display:grid; gap:.85rem; }
.merkmale li{ position:relative; padding-left:1.9rem; font-size:.97rem; }
.merkmale li::before{
  content:""; position:absolute; left:.15rem; top:.72em; width:7px; height:7px;
  border-radius:50%; background:var(--messing-akz);
}
.merkmale-2{ grid-template-columns:repeat(2,1fr); gap:.85rem 2.4rem; }
@media (max-width:620px){ .merkmale-2{ grid-template-columns:1fr; } }

/* ---------- Galerie ---------- */
.galerie{ display:grid; grid-template-columns:repeat(6,1fr); gap:clamp(12px,1.4vw,20px); }
.galerie figure{
  margin:0; border-radius:var(--rad-l); overflow:hidden; background:var(--nebel); position:relative;
}
.galerie img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); }
.galerie figure:hover img{ transform:scale(1.04); }
.g-gross{ grid-column:span 4; aspect-ratio:3/2; }
.g-hoch{ grid-column:span 2; aspect-ratio:4/5; }
.g-quer{ grid-column:span 3; aspect-ratio:7/5; }
.g-quad{ grid-column:span 2; aspect-ratio:1; }
@media (max-width:820px){
  .galerie{ grid-template-columns:repeat(2,1fr); }
  .g-gross,.g-hoch,.g-quer,.g-quad{ grid-column:span 2; aspect-ratio:3/2; }
}

/* ---------- Stimmen ---------- */
.stimme{
  background:#fff; border:1px solid var(--linie-fein); border-radius:var(--rad-l);
  padding:clamp(26px,3vw,38px); display:flex; flex-direction:column; gap:1.3rem;
  position:relative;
}
.grund-salbei .stimme,.grund-sand .stimme{ background:var(--hell); }
.stimme::before{
  content:"\201C"; position:absolute; top:.24em; right:.36em;
  font-family:var(--serif); font-size:4.5rem; line-height:1; color:var(--messing-akz); opacity:.16;
}
.stimme blockquote{
  margin:0; font-family:var(--serif); font-size:1.16rem; font-weight:400; line-height:1.48;
  letter-spacing:-.01em; font-variation-settings:"opsz" 20;
}
.stimme figcaption{ font-size:.84rem; color:var(--tinte-50); margin-top:auto; }
.stimme figcaption b{ color:var(--tinte); font-weight:600; display:block; }

/* ---------- Termine ---------- */
.termin{
  display:grid; grid-template-columns:98px 1fr auto; gap:clamp(16px,2.4vw,32px); align-items:center;
  padding:1.5rem 0; border-bottom:1px solid var(--linie-fein);
  transition:background .3s var(--ease);
}
.termin:first-child{ border-top:1px solid var(--linie-fein); }
.termin-datum{ text-align:center; font-variant-numeric:lining-nums tabular-nums; }
.termin-datum b{
  display:block; font-family:var(--serif); font-size:2.1rem; font-weight:380; line-height:1;
  letter-spacing:-.02em; font-variation-settings:"opsz" 36;
}
.termin-datum span{
  font-size:.7rem; letter-spacing:.17em; text-transform:uppercase; color:var(--tinte-50); font-weight:600;
}
.termin-info h3{ margin:0 0 .22rem; font-size:1.14rem; }
.termin-info p{ margin:0; font-size:.88rem; color:var(--tinte-50); font-variant-numeric:tabular-nums; }
.termin-aktion{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; justify-content:flex-end; }
@media (max-width:760px){
  .termin{ grid-template-columns:72px 1fr; }
  .termin-aktion{ grid-column:1/-1; justify-content:flex-start; padding-top:.5rem; }
}
.status{
  font-size:.72rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  padding:.34rem .78rem; border-radius:999px; white-space:nowrap;
}
.status-frei{ background:rgba(60,122,95,.11); color:var(--frei); }
.status-knapp{ background:rgba(154,106,34,.13); color:var(--knapp); }
.status-voll{ background:rgba(138,71,71,.11); color:var(--voll); }

.filter{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:2.6rem; }
.filter button{
  font:inherit; font-size:.85rem; font-weight:600; padding:.55rem 1.15rem; border-radius:999px;
  cursor:pointer; background:transparent; border:1px solid var(--linie); color:var(--tinte-50);
  transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.filter button:hover{ border-color:var(--tinte); color:var(--tinte); }
.filter button[aria-pressed="true"]{ background:var(--tinte); border-color:var(--tinte); color:var(--hell); }

/* ---------- Akkordeon ---------- */
.akk{ border-top:1px solid var(--linie); }
.akk details{ border-bottom:1px solid var(--linie-fein); }
.akk summary{
  cursor:pointer; list-style:none; padding:1.4rem 3rem 1.4rem 0; position:relative;
  font-weight:600; font-size:1.02rem; letter-spacing:-.005em;
  transition:color .25s var(--ease);
}
.akk summary::-webkit-details-marker{ display:none; }
.akk summary:hover{ color:var(--messing); }
.akk summary::after,.akk summary::before{
  content:""; position:absolute; right:.5rem; top:50%; width:13px; height:1.5px;
  background:var(--messing-akz); transition:transform .35s var(--ease);
}
.akk summary::before{ transform:translateY(-50%) rotate(90deg); }
.akk summary::after{ transform:translateY(-50%); }
.akk details[open] summary::before{ transform:translateY(-50%) rotate(0deg); }
.akk-inhalt{ padding:0 3rem 1.7rem 0; color:var(--tinte-70); font-size:.97rem; max-width:68ch; }
.akk-inhalt ul{ margin:.7rem 0; padding-left:1.2rem; }
.akk-inhalt li{ margin-bottom:.4rem; }

/* ---------- Hinweis ---------- */
.hinweis{
  border-left:2px solid var(--messing-akz); background:var(--sand);
  padding:clamp(24px,2.8vw,34px); border-radius:0 var(--rad-l) var(--rad-l) 0;
}
.hinweis h3{ margin-top:0; font-size:1.2rem; }
.hinweis p:last-child{ margin-bottom:0; }
.grund-sand .hinweis{ background:#fff; }
mark{ background:rgba(221,185,142,.5); color:inherit; padding:.05em .25em; border-radius:2px; }

/* ---------- Formular ---------- */
.formular{ display:grid; gap:1.2rem; }
.feld{ display:grid; gap:.45rem; }
.feld label{ font-size:.84rem; font-weight:600; letter-spacing:.005em; }
.feld input,.feld select,.feld textarea{
  font:inherit; font-size:1rem; padding:.95rem 1.1rem; border-radius:var(--rad);
  border:1px solid var(--linie); background:#fff; color:var(--tinte); width:100%;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.feld textarea{ min-height:140px; resize:vertical; }
.feld input:hover,.feld select:hover,.feld textarea:hover{ border-color:var(--tinte-50); }
.feld input:focus,.feld select:focus,.feld textarea:focus{
  outline:none; border-color:var(--messing-akz); box-shadow:0 0 0 3px rgba(169,113,66,.16);
}
.feld-reihe{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
@media (max-width:620px){ .feld-reihe{ grid-template-columns:1fr; } }
.checkzeile{ display:flex; gap:.75rem; align-items:flex-start; font-size:.87rem; color:var(--tinte-70); }
.checkzeile input{ width:auto; margin-top:.3rem; flex:none; accent-color:var(--messing); }

/* ---------- Einbettung ---------- */
.einbettung{
  border:1px dashed var(--linie); border-radius:var(--rad-l);
  padding:clamp(26px,3vw,42px); background:var(--hell); text-align:center; color:var(--tinte-50);
}
.einbettung code{
  background:var(--grund); padding:.15rem .42rem; border-radius:3px; font-size:.85em;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* ---------- CTA-Band ---------- */
.band{ background:var(--tinte); color:var(--grund); text-align:center; position:relative; overflow:hidden; }
.band::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(70% 130% at 50% 0%, rgba(169,113,66,.17), transparent 62%);
}
.band > *{ position:relative; z-index:1; }
.band h2{ max-width:19ch; margin-inline:auto; }
.band .lead{ max-width:52ch; margin-inline:auto; }

/* ---------- Fuss ---------- */
.fuss{
  background:var(--tinte); color:var(--hell-70);
  padding-block:clamp(62px,7.5vw,96px) 2.2rem; font-size:.92rem;
}
.fuss a{ text-decoration:none; opacity:.82; transition:opacity .25s var(--ease), color .25s var(--ease); }
.fuss a:hover{ opacity:1; color:var(--messing-hell); }
.fuss-raster{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:clamp(28px,3.5vw,48px); }
@media (max-width:880px){ .fuss-raster{ grid-template-columns:1fr 1fr; } }
@media (max-width:540px){ .fuss-raster{ grid-template-columns:1fr; } }
.fuss h4{
  color:var(--hell); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  margin-bottom:1.3rem; opacity:.6; font-weight:600;
}
.fuss ul{ list-style:none; margin:0; padding:0; display:grid; gap:.7rem; }
.fuss .marke{ color:var(--hell); }
.fuss-unten{
  margin-top:clamp(44px,5.5vw,72px); padding-top:1.8rem; border-top:1px solid var(--linie-hell);
  display:flex; flex-wrap:wrap; gap:.6rem 1.8rem; justify-content:space-between; font-size:.82rem;
  color:var(--hell-50);
}

/* ---------- Mobiler CTA ---------- */
.mobil-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:70; display:none;
  background:rgba(13,36,41,.96); backdrop-filter:blur(12px);
  padding:.75rem var(--gutter) calc(.75rem + env(safe-area-inset-bottom));
  border-top:1px solid var(--linie-hell);
}
.mobil-cta .btn{ width:100%; }
@media (max-width:760px){ .mobil-cta{ display:block; } body{ padding-bottom:82px; } }

/* ---------- Tabelle ---------- */
.tabelle{ width:100%; border-collapse:collapse; font-size:.95rem; font-variant-numeric:tabular-nums; }
.tabelle th,.tabelle td{ text-align:left; padding:1rem 1.1rem 1rem 0; border-bottom:1px solid var(--linie-fein); }
.tabelle tr:last-child td{ border-bottom:0; }
.tabelle th{
  font-size:.72rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--tinte-50); font-weight:600;
}
.tabelle td:last-child,.tabelle th:last-child{ text-align:right; white-space:nowrap; padding-right:0; }
.tabelle-wrap{ overflow-x:auto; }

/* ---------- Kleinkram ---------- */
.skip{ position:absolute; left:-9999px; }
.skip:focus{
  left:var(--gutter); top:.7rem; z-index:100; background:var(--messing); color:#fff;
  padding:.8rem 1.2rem; border-radius:var(--rad);
}
.trenner{ border:0; border-top:1px solid var(--linie-fein); margin-block:clamp(42px,5.5vw,68px); }
.marker{ background:linear-gradient(transparent 62%, rgba(221,185,142,.55) 62%); }

/* ---------- Bewegung ---------- */
.reveal{ opacity:0; transform:translateY(22px); }
.reveal-an{
  opacity:1; transform:none;
  transition:opacity .85s var(--ease), transform .85s var(--ease);
}
.reveal-an[data-verzug="1"]{ transition-delay:.09s; }
.reveal-an[data-verzug="2"]{ transition-delay:.18s; }
.reveal-an[data-verzug="3"]{ transition-delay:.27s; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; transition-delay:0ms !important;
  }
  .reveal{ opacity:1; transform:none; }
  .karte:hover,.btn:hover{ transform:none; }
}