/* hausamfluss.org — Design-System-Basis
   Quelle: hausamfluss-design-system.md */

/* Saira lokal gehostet (assets/fonts/) statt via fonts.googleapis.com/fonts.gstatic.com —
   keine Verbindung zu Google-Servern beim Seitenaufruf. Beide Dateien sind Variable Fonts;
   Browser interpolieren den wght-Wert aus font-weight automatisch (CSS Fonts Level 4),
   daher genügen zwei Dateien für alle drei genutzten Schnitte (300/400/500). */
@font-face{
  font-family:'Saira';
  font-style:normal;
  font-weight:300 500;
  font-display:swap;
  src:url('https://hausamfluss.org/assets/fonts/saira-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Saira';
  font-style:italic;
  font-weight:300 500;
  font-display:swap;
  src:url('https://hausamfluss.org/assets/fonts/saira-italic.woff2') format('woff2');
}

:root{
  /* Primär / Interaktion */
  --primary:#00baff;
  --primary-hover:#00a6e3;
  --primary-press:#0091c7;
  --accent-orange:#eb901a;
  --error:#aa1966;

  /* Neutrals */
  --canvas:#eae8e4;
  --white:#ffffff;
  --stone-100:#c4c4c4;
  --stone-900:#67645e;
  --text-primary:#262320;
  --text-secondary:#67645e;
  --text-muted:#878278;

  /* Tiles */
  --olive:#828b37;
  --pale-olive:#dbe1b5;
  --indigo:#494697;

  /* Aliase für das OKTAVON-Widget */
  --surface-1:#ffffff;
  --border-strong:#c4c4c4;

  --radius-sm:6px;
  --radius-md:12px;
  --radius-lg:20px;
  --radius-tile:24px;
  --radius-pill:999px;

  --shadow-soft:0 2px 10px rgba(103,100,94,.08);
  --ease:cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Saira',sans-serif;
  font-weight:300;
  font-size:17px;
  line-height:1.47;
  letter-spacing:-0.374px;
  color:var(--text-secondary);
  background:var(--white);
}
img{max-width:100%;display:block}
a{color:inherit}
.container{
  max-width:1120px;
  margin:0 auto;
  padding:0 24px;
}

/* Typografie */
h1,h2,h3{
  font-weight:500;
  color:var(--primary);
  margin:0 0 .5em;
  line-height:1.15;
}
/* Typ-Skala: Hero 56 (nur Hero-h1) / H1 40 (reserviert für Hero-Section) /
   H2 32 (Abschnitts-Headlines) / H3 26 (Reserve) / H4 22 (Zwischenüberschriften im Fließtext) */
h1{font-size:56px;font-style:italic}
h2{font-size:32px;font-style:italic}
h3{font-size:26px;font-style:normal}
p{margin:0 0 1em}
.intro{font-size:21px;font-style:italic;font-weight:300;color:var(--text-secondary)}

section{padding:96px 0}
@media (max-width:720px){
  h1{font-size:36px}
  h2{font-size:28px}
  section{padding:64px 0}
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  padding:14px 28px;
  border-radius:var(--radius-pill);
  font-family:'Saira',sans-serif;
  font-weight:500;
  font-size:16px;
  text-decoration:none;
  border:none;
  cursor:pointer;
  transition:background-color .2s var(--ease), transform .12s var(--ease);
}
.btn-primary{background:var(--primary);color:var(--white)}
.btn-primary:hover{background:var(--primary-hover)}
.btn-primary:active{background:var(--primary-press);transform:scale(.97)}
.btn-ghost{background:transparent;color:var(--primary);border:1px solid var(--stone-100)}
.btn-ghost:hover{background:var(--canvas)}

.segment-tag{
  display:inline-block;
  font-size:12px;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--text-muted);
  margin-bottom:1.2em;
}
.segment-cta{display:flex;gap:16px;flex-wrap:wrap;margin-top:2em}

.segment-grid{
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:56px;
  align-items:center;
}
.segment-grid.image-left{grid-template-columns:1fr 2fr}
.segment-grid.image-left .segment-image{order:-1}
.segment-grid--start{align-items:start}
.segment-image{
  border-radius:var(--radius-lg);
  overflow:hidden;
  aspect-ratio:1/1;
}
.segment-image img{width:100%;height:100%;object-fit:cover}
@media (max-width:800px){
  .segment-grid, .segment-grid.image-left{grid-template-columns:1fr}
  .segment-grid.image-left .segment-image{order:0}
  .segment-image{max-width:320px;margin:0 auto}
}

/* "Über uns": Bild bleibt oben unbeschnitten und läuft unten bewusst aus der
   grünen Fläche heraus, wie ein Band, das weiterläuft (nur am Desktop) */
.ueber-tile{position:relative;overflow:hidden}
#ueber .segment-grid > div:first-child{position:relative;z-index:1}
/* Bild wird aus dem Grid-Fluss genommen und direkt an der Kachel verankert,
   damit es bei jeder Breite unten an der Kante abschließt — unabhängig davon,
   wie hoch der Textblock durch Zeilenumbrüche gerade wird. Rechte Position
   folgt der Container-Kante (max-width:1120px + 24px Padding). */
#ueber .segment-image{
  position:absolute;
  bottom:0;
  right:max(24px, calc((100% - 1120px)/2 + 24px));
  width:320px;
  aspect-ratio:auto;
  overflow:visible;
  border-radius:0;
  z-index:0;
}
#ueber .segment-image img{
  display:block;
  width:100%;
  height:auto;
}
@media (max-width:800px){
  /* Mobil: Bild wieder zurück in den normalen Fluss (unter den Text gestapelt).
     Feste Höhe reserviert genug Raum, damit der Großteil des Bands sichtbar
     bleibt, nur die Spitze läuft an der Kachelkante aus. */
  #ueber .segment-image{
    position:relative;
    right:auto;
    bottom:auto;
    width:100%;
    max-width:320px;
    margin:0 auto;
    height:266px;
    overflow:visible;
  }
  #ueber .segment-image img{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:auto;
  }
  #ueber .segment-grid{gap:0}
}

.link-arrow{
  color:var(--primary);
  text-decoration:none;
  font-weight:500;
  border-bottom:1px solid transparent;
  transition:border-color .2s var(--ease);
}
.link-arrow:hover{border-color:var(--primary)}

/* Nav */
.nav{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--stone-100);
}
.nav .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:72px;
}
.nav-logo img{height:28px}
.nav-links{
  display:flex;
  align-items:center;
  gap:32px;
  list-style:none;
  margin:0;
  padding:0;
  font-size:16px;
  font-weight:500;
}
.nav-links a{text-decoration:none;color:var(--stone-900)}
.nav-links a:hover{color:var(--primary)}
.nav-links .nav-cta{
  color:var(--white);
  padding:10px 22px;
  font-size:15px;
}
.nav-links .nav-cta:hover{color:var(--white);background:var(--primary-hover)}

.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:36px;
  height:36px;
  background:none;
  border:none;
  cursor:pointer;
  padding:0;
}
.nav-toggle span{
  display:block;
  width:100%;
  height:2px;
  background:var(--stone-900);
  border-radius:2px;
  transition:transform .2s var(--ease), opacity .2s var(--ease);
}
.nav.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav.nav-open .nav-toggle span:nth-child(2){opacity:0}
.nav.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width:720px){
  .nav-toggle{display:flex}
  .nav-links{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    background:var(--white);
    border-bottom:1px solid var(--stone-100);
    padding:8px 24px 24px;
  }
  .nav.nav-open .nav-links{display:flex}
  .nav-links li{width:100%;padding:12px 0}
  .nav-links .nav-cta{display:inline-flex;margin-top:8px}
}

/* Hero */
.hero{
  position:relative;
  min-height:88vh; /* Fallback für Browser ohne svh-Unterstützung */
  min-height:88svh; /* "small viewport height" — bleibt stabil, wenn die Adressleiste beim Scrollen einklappt */
  padding:0;
  overflow:hidden;
}
.hero-bg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
}
.hero .container{
  position:relative;
  padding-top:120px;
  padding-bottom:72px;
}
.hero-wordmark{font-size:14px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);margin-bottom:1em}
.hero h1{margin-bottom:.3em}
.hero p:not(.hero-wordmark){color:var(--text-secondary);max-width:46ch;font-size:19px}
.hero-actions{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:1.5em}
.hero-actions .btn-ghost{background:rgba(255,255,255,.65)}

@media (max-width:720px){
  /* Text kompakter nach oben, insgesamt mehr Höhe fürs Motiv darunter reserviert —
     damit Copy/Buttons nicht über den Stein/Lichtkreis im Bild laufen */
  .hero{min-height:96vh;min-height:96svh}
  .hero .container{padding-top:72px}
  /* schmalerer Ausschnitt durch die größere Höhe rückt sonst den Stein aus dem
     Bild — Position nach rechts korrigiert, damit er im Anschnitt sichtbar bleibt.
     background-size über 100% Höhe hinaus schafft Reserve, um den oberen
     Bogen wegzuschneiden, damit er nicht mehr hinter dem Text verläuft. */
  .hero-bg{background-size:auto 140%;background-position:70% 48%;background-repeat:no-repeat}
}

/* Beweis-Streifen */
.proof{
  background:var(--white);
  padding:56px 0;
}
.proof-logos{
  display:flex;
  flex-wrap:wrap;
  gap:48px;
  align-items:center;
  justify-content:center;
}
.proof-logos img{
  height:56px;
  width:auto;
  object-fit:contain;
  filter:grayscale(100%);
}

.prose{max-width:64ch}
.prose p:not(.intro){font-size:17px}

/* Für wen */
.forwhom{background:var(--canvas);border-radius:var(--radius-tile)}
.forwhom .btn-ghost{background:rgba(255,255,255,.65)}

/* Über hausamfluss */
.ueber-tile{background:var(--pale-olive);border-radius:var(--radius-tile)}

/* Sechs Felder */
.fields-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
@media (max-width:900px){.fields-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.fields-grid{grid-template-columns:1fr}}

.field-card{perspective:1500px;cursor:pointer}
.field-flip{
  position:relative;
  height:460px;
  transition:transform .6s var(--ease);
  transform-style:preserve-3d;
  /* stabile Compositor-Ebene — verhindert Karten-Flackern beim Flip in Chrome */
  will-change:transform;
}
.field-card.flipped .field-flip{transform:rotateY(180deg)}
.field-face{
  position:absolute;
  inset:0;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-soft);
}
.field-front{
  background:var(--white);
  border:1px solid var(--stone-100);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  /* expliziter 3D-Transform, damit Chrome die Vorderseite im 3D-Kontext behält */
  transform:rotateY(0deg);
}
.field-card-img{flex:1 1 auto;background-size:cover;background-position:center}
.field-card-body{padding:20px}
.field-card-body h3{color:var(--text-secondary);font-size:16px;margin-bottom:.4em}
.field-card-body p{font-size:15px;margin:0;color:var(--text-secondary)}
.field-card-hint{display:inline-block;margin-top:.7em;font-size:13px;font-weight:500;color:var(--primary)}

.field-back{
  transform:rotateY(180deg);
  display:flex;
  flex-direction:column;
  padding:24px;
}
.field-back h3{color:inherit;font-size:16px;font-style:normal;margin-bottom:.5em}
.field-back-text{font-size:15px;line-height:1.45;margin:0 0 14px;opacity:.95}
.field-back-label{font-size:11px;text-transform:uppercase;letter-spacing:.05em;opacity:.75;margin-bottom:8px}
.field-pills{display:flex;flex-wrap:wrap;gap:6px}
.field-pill{border:1px solid rgba(255,255,255,.55);border-radius:var(--radius-pill);padding:3px 10px;font-size:11px}

/* Karten mit externer Projektseite: weiße Fußzeile mit Partner-Logo + eigener Outline
   in der Akzentfarbe der Kartenrückseite (Farbe kommt inline pro Karte via border-color) */
.field-back.has-project{
  padding:0;
  overflow:hidden;
  border:1.5px solid;
}
/* Pale-Olive-Rückseite hat von Natur aus wenig Kontrast zu Weiß — Rahmen bleibt
   etwas kräftiger, damit er trotzdem sichtbar bleibt */
.field-back.has-project.border-thick{border-width:2px}
.field-back.has-project .field-back-content{padding:24px;flex:1 1 auto}
.field-back-project{
  background:var(--white);
  padding:18px 24px 22px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:14px;
}
.field-back-project-logo{display:block;max-width:130px;width:100%;height:auto}
.field-back-project-btn{align-self:flex-start;font-size:13px;padding:8px 16px}
.field-back-btn{
  margin-top:auto;
  align-self:flex-start;
  padding:8px 16px;
  font-size:13px;
  background:rgba(255,255,255,.15);
  color:inherit;
  border:1px solid rgba(255,255,255,.55);
  text-decoration:none;
}
@media (max-width:900px){.field-flip{height:480px}}
@media (max-width:600px){.field-flip{height:440px}}

/* OKTAVON */
.oktavon-section{background-color:var(--canvas);background-size:cover;background-position:center}
.oktavon-cta{background:#00baff;color:#fff;border-radius:var(--radius-md);padding:16px 20px;font-size:15px}
.oktavon-grid{
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:56px;
  align-items:start;
}
@media (max-width:900px){
  .oktavon-grid{grid-template-columns:1fr}
}
.oktavon-wrap{
  background:var(--white);
  border-radius:var(--radius-tile);
  padding:32px 20px 24px;
  box-shadow:var(--shadow-soft);
  max-width:640px;
  margin:0 auto;
}
@media (max-width:900px){
  .oktavon-wrap{margin-top:32px}
}
.oktv-dot{cursor:pointer;transition:r .15s var(--ease)}
.oktv-half{cursor:pointer}
.oktv-corner{cursor:pointer}
.oktv-label{
  font-size:19px;
  font-weight:500;
  fill:var(--text-primary);
  transition:fill .15s var(--ease), font-size .15s var(--ease);
}
.oktv-corner:hover .oktv-label{fill:var(--primary)}
.oktv-corner.active .oktv-label{fill:var(--primary);font-size:22px}
.oktv-corner:hover .oktv-center-label{fill:#494697}

.oktv-tooltip{
  position:absolute;
  z-index:5;
  pointer-events:none;
  opacity:0;
  transform:translate(-50%,-100%);
  transition:opacity .12s var(--ease);
  background:var(--white);
  border:1px solid var(--stone-100);
  border-radius:var(--radius-pill);
  box-shadow:var(--shadow-soft);
  padding:8px 16px;
  font-size:13px;
  font-weight:500;
  color:var(--text-secondary);
  white-space:nowrap;
}
.oktv-tooltip.visible{opacity:1}
@media (max-width:480px){
  .oktv-tooltip{white-space:normal;text-align:center;border-radius:var(--radius-lg);max-width:200px}
}

/* Über hausamfluss */
.ueber-grid{
  display:grid;
  grid-template-columns:320px 1fr;
  gap:48px;
  align-items:start;
}
@media (max-width:800px){.ueber-grid{grid-template-columns:1fr}}
.ueber-photo{
  aspect-ratio:3/4;
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:var(--canvas);
}
.ueber-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.ueber-caption{
  margin:12px 0 0;
  text-align:center;
  font-size:14px;
  line-height:1.5;
  color:var(--text-muted);
}
.ueber-caption strong{
  font-weight:500;
  color:var(--text-secondary);
  font-size:16px;
}

/* Textspalte ist kürzer als das Hochformat-Foto daneben; Foto bleibt unverändert,
   unteres Section-Padding bewusst reduziert, damit der Block optisch näher an die
   nächste Section rückt (Abstand hier absichtlich kleiner als bei anderen Sektionen) */
#gegruendet{padding-bottom:32px}

/* Mein Weg */
.weg-lang{
  display:none;
  margin-top:1.5em;
  padding-top:1.5em;
  border-top:1px solid var(--stone-100);
}
.weg-lang.open{display:block}
.weg-lang h4{color:var(--primary);font-weight:500;font-size:22px;margin:1.2em 0 .3em;font-style:normal}
.toggle-weg{background:none;border:none;padding:0;cursor:pointer;font:inherit}

.two-col-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
}
@media (max-width:800px){.two-col-grid{grid-template-columns:1fr}}

/* Stimmen */
.stimmen-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:24px;
  margin-top:32px;
}
@media (max-width:700px){.stimmen-grid{grid-template-columns:1fr}}
.stimme-card{
  background:var(--white);
  border:1px solid var(--stone-100);
  border-radius:var(--radius-lg);
  padding:28px;
  box-shadow:var(--shadow-soft);
}
.stimme-card p{font-style:italic;color:var(--text-secondary);font-size:18px}
.stimme-card cite{font-style:normal;font-size:14px;color:var(--text-muted)}

/* Kontakt */
.kontakt-tile{
  position:relative;
  overflow:hidden;
  background:var(--olive);
  color:var(--white);
  border-radius:var(--radius-tile);
  padding:64px 48px;
  text-align:center;
}
.kontakt-tile h2{color:var(--white)}
.kontakt-tile p{color:var(--pale-olive);max-width:44ch;margin-left:auto;margin-right:auto}
.kontakt-tile .btn-primary{background:var(--white);color:var(--olive)}
.kontakt-tile .btn-primary:hover{background:var(--canvas)}
.kontakt-details{margin-top:2em;font-size:15px;color:var(--pale-olive)}

.kontakt-tile h2,
.kontakt-tile > p,
.kontakt-tile .segment-cta,
.kontakt-details{position:relative;z-index:1}

.kontakt-stone{
  display:block;
  width:150px;
  margin:40px auto 0;
  border-radius:var(--radius-md);
}
@media (min-width:701px){
  .kontakt-stone{
    position:absolute;
    left:0;
    bottom:0;
    width:300px;
    margin:0;
    border-radius:0;
  }
}

/* FAQ */
.faq-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 48px;
  margin-top:32px;
}
@media (max-width:700px){.faq-grid{grid-template-columns:1fr}}
.faq-item{
  border-bottom:1px solid var(--stone-100);
  padding:18px 0;
}
.faq-item summary{
  cursor:pointer;
  font-size:17px;
  font-weight:500;
  color:var(--text-secondary);
  list-style:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:'+';font-size:22px;color:var(--primary);flex:none}
.faq-item[open] summary::after{content:'–'}
.faq-item p{margin:10px 0 0;font-size:15px;color:var(--text-secondary)}
.faq-item ul{margin:10px 0 0;padding-left:1.1em;font-size:15px;color:var(--text-secondary)}
.faq-item li{margin:4px 0}

/* Footer */
footer{padding:64px 0 32px;background:var(--stone-900)}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;
  gap:32px;
}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:500px){.footer-grid{grid-template-columns:1fr}}
.footer-col{display:flex;flex-direction:column;gap:10px}
.footer-col img{width:175px;height:auto;margin-bottom:-6px;align-self:flex-start}
.footer-social{display:flex;gap:10px;margin-top:14px}
.footer-social-icon{
  width:32px;
  height:32px;
  border-radius:50%;
  border:1px dashed rgba(255,255,255,.4);
}
.footer-copyright{
  margin-top:auto;
  padding-top:24px;
  font-size:13px;
  color:var(--canvas);
  opacity:.6;
}
.footer-col-title{
  font-size:12px;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--white);
  margin-bottom:4px;
}
.footer-col a{
  text-decoration:none;
  font-size:14px;
  color:var(--canvas);
  opacity:.85;
}
.footer-col a:hover{opacity:1;color:var(--primary)}
/* Cookie-Einstellungen im Footer: <button> aus Semantikgründen, optisch
   identisch zu den übrigen Footer-Links (.footer-col a). */
.footer-cookie-btn{
  appearance:none;
  background:none;
  border:0;
  padding:0;
  margin:0;
  font-family:inherit;
  font-weight:300;
  line-height:inherit;
  text-align:left;
  cursor:pointer;
  text-decoration:none;
  font-size:14px;
  color:var(--canvas);
  opacity:.85;
}
.footer-cookie-btn:hover{opacity:1;color:var(--primary)}

/* Fokus */
:focus-visible{
  outline:3px solid rgba(0,186,255,.4);
  outline-offset:2px;
  border-radius:4px;
}

/* Animation — Fließen: Ambient (Hero), Scroll-Reveals, FAQ */
@keyframes hero-breath{
  from{transform:scale(1)}
  to{transform:scale(1.06)}
}
.hero-bg{animation:hero-breath 22s ease-in-out infinite alternate}

/* .reveal wird per JS gesetzt (Progressive Enhancement) — ohne JS bleibt alles sichtbar */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.revealed{opacity:1;transform:none}

.faq-item[open] p,.faq-item[open] ul{animation:faq-fade .35s var(--ease)}
@keyframes faq-fade{
  from{opacity:0;transform:translateY(-4px)}
  to{opacity:1;transform:none}
}

/* Mikro-Interaktionen — kleine Bewegungen nur auf Berührung */
.btn:hover{transform:translateY(-2px)}
.btn-primary:hover{box-shadow:0 6px 16px rgba(0,186,255,.25)}
.btn-ghost:hover{box-shadow:var(--shadow-soft)}
.link-arrow{display:inline-block;transition:border-color .2s var(--ease),transform .2s var(--ease)}
.link-arrow:hover{transform:translateX(3px)}
.field-card-hint{transition:transform .25s var(--ease)}
.field-card:hover .field-card-hint{transform:translateX(4px)}
/* :not(.reveal) — solange der Scroll-Reveal läuft, gehört transition dem Reveal;
   das JS entfernt .reveal nach Abschluss, danach greift der Hover-Lift */
.field-card:not(.reveal){transition:transform .25s var(--ease)}
.field-card:hover{transform:translateY(-4px)}
.field-card .field-face{transition:box-shadow .25s var(--ease)}
.field-card:hover .field-face{box-shadow:0 10px 24px rgba(103,100,94,.16)}

@media (prefers-reduced-motion: reduce){
  .hero-bg{animation:none}
  .reveal{opacity:1;transform:none;transition:none}
  .faq-item[open] p,.faq-item[open] ul{animation:none}
  .btn:hover,.link-arrow:hover,.field-card:hover{transform:none}
  .field-card:hover .field-card-hint{transform:none}
  .cookie-banner{transition:none}
}

/* Cookie-Banner — eigenes, schlankes 2-Kategorien-Consent (essenziell/statistik) */
.cookie-banner{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:100;
  background:var(--white);
  border-top:1px solid var(--stone-100);
  box-shadow:0 -4px 20px rgba(103,100,94,.12);
  padding:20px 24px;
  transform:translateY(110%);
  transition:transform .4s var(--ease);
}
.cookie-banner.visible{transform:translateY(0)}
.cookie-banner-inner{
  max-width:1120px;
  margin:0 auto;
  display:flex;
  align-items:center;
  gap:24px;
  flex-wrap:wrap;
}
.cookie-banner-text{margin:0;font-size:14px;color:var(--text-secondary);flex:1 1 320px}
.cookie-banner-text a{color:var(--primary);text-decoration:underline}
.cookie-banner-actions{display:flex;gap:12px;flex-wrap:wrap}
.cookie-banner-actions .btn{padding:10px 20px;font-size:14px}

/* Rechtstexte (Impressum/Datenschutz) — schlichte Textseiten ohne Hero */
.legal-page{padding-top:160px}
.legal-page h4{margin-top:2em}
.legal-page ul{padding-left:1.2em;margin:0 0 1em}
.legal-page li{margin:.3em 0}
@media (max-width:720px){
  .legal-page{padding-top:112px}
}