/* Gestaltung der Website der Gesellschaft für Ethnoeubiotik e.V.
   Grundlage ist Entwurf B "Feldstation" (Auswahl vom 14.09.2026) auf dem
   Gerüst des Website-Grundgerüsts. Große Flächen, Wechsel von hell und dunkel,
   Ocker als Akzent. Keine Gestaltung im HTML: die Sicherheits-Header
   blockieren style="..." und <style>. */

/* Schriften lokal im Projekt, beide SIL Open Font License 1.1. Pfade relativ,
   weil der Pfad-Vorsatz der Vorschau CSS-url() nicht umschreibt. */
@font-face{font-family:"Playfair Display";src:url("../fonts/playfair-var.woff2") format("woff2-variations");font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("../fonts/inter-var.woff2") format("woff2-variations");font-weight:100 900;font-style:normal;font-display:swap}

:root{
  /* Oliv und Salbei aus dem Vereinslogo, Ocker aus Entwurf B */
  --text:#333322;
  --text-leise:#57574A;
  --grund:#fff;
  --sand:#F7F5EF;
  --dunkel:#333322;
  --auf-dunkel:#F5F3EC;
  --auf-dunkel-leise:#D6D9C9;
  --salbei:#A8B598;
  --linie:#E3E0D6;
  --akzent:#8A5A1E;          /* Kontrast zu Weiß 5,9 zu 1 */
  --akzent-hell:#D9A441;     /* nur auf dunklem Grund */
  --akzent-text:#fff;
  --fehler:#b3261e;
  --abdunkeln:38,38,24;      /* Oliv als Farbwerte für Verläufe über Fotos */
  --breite:77.5rem;
  --breite-schmal:40rem;
  --radius:3px;
  --schrift:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",Arial,sans-serif;
  --schrift-titel:"Playfair Display",Georgia,"Times New Roman",serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--schrift);font-size:1.125rem;line-height:1.7;color:var(--text);background:var(--grund)}
img,svg,picture{max-width:100%;height:auto;display:block}
h1,h2,h3{font-family:var(--schrift-titel);font-weight:600;line-height:1.15;margin:0 0 .5em;overflow-wrap:break-word}
h1{font-size:clamp(2.1rem,3.6vw + 1rem,3.25rem)}
h2{font-size:clamp(1.6rem,1.6vw + 1rem,2.125rem);hyphens:auto}
h3{font-size:1.375rem;hyphens:auto}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
a{color:var(--akzent);text-underline-offset:3px}
a:hover{color:var(--text)}
ul[role="list"]{list-style:none;margin:0;padding:0}
address{font-style:normal}

/* Barrierefreiheit: Sprunglink und sichtbarer Fokus */
.skip-link{position:absolute;left:-999px;top:0;z-index:1000;background:var(--dunkel);color:var(--auf-dunkel);padding:.75rem 1.25rem}
.skip-link:focus{left:0}
:focus-visible{outline:3px solid var(--akzent);outline-offset:3px}

/* Wiederkehrendes Sektions-Gerüst */
.section{padding-block:clamp(3.5rem,7vw,5.25rem)}
.section--sand{background:var(--sand)}
.section--dunkel{background:var(--dunkel);color:var(--auf-dunkel)}
.section--dunkel h2{color:#fff}
.section--dunkel .vorzeile{color:var(--akzent-hell)}
.section--dunkel a{color:var(--akzent-hell)}
.section__inner{max-width:var(--breite);margin-inline:auto;padding-inline:1.75rem}
.section__inner--schmal{max-width:calc(var(--breite-schmal) + 3.5rem)}
/* Rechtsseiten breiter, damit "Datenschutzerklärung der Website" am Rechner
   in eine Zeile passt (gemessen 819 Pixel bei 52 Pixel Schriftgröße) */
.section__inner--rechtstext{max-width:calc(54.5rem + 3.5rem)}
.schmal{max-width:var(--breite-schmal)}
.lead{font-size:1.25rem;color:var(--text-leise);max-width:56ch}
.vorzeile{display:block;font-size:.8125rem;letter-spacing:.12em;text-transform:uppercase;color:var(--akzent);font-weight:600;margin-bottom:.9rem}
.weiter{margin-top:1.75rem}

/* Knöpfe */
.btn{display:inline-block;background:var(--akzent);color:var(--akzent-text);border:1px solid var(--akzent);border-radius:var(--radius);padding:.75rem 1.35rem;font:inherit;font-size:1rem;font-weight:600;text-decoration:none;cursor:pointer}
.btn:hover{background:var(--text);border-color:var(--text);color:#fff}
.btn--zweitrangig{background:transparent;color:var(--akzent)}
.btn--inaktiv{background:transparent;color:var(--text-leise);border:1px dashed var(--text-leise);cursor:default}
.btn--inaktiv:hover{background:transparent;color:var(--text-leise);border-color:var(--text-leise)}
.aktionen{display:flex;flex-wrap:wrap;gap:.75rem}

/* Kopfbereich: eigene weiße Leiste, das Logo bleibt immer auf Weiß */
.site-header{position:relative;background:var(--grund);border-bottom:1px solid var(--linie)}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding-block:1.1rem}
.brand{display:block;flex-shrink:0}
.brand img{width:220px}
.main-nav ul{display:flex;align-items:center;gap:1.6rem}
.main-nav a{color:var(--text);text-decoration:none;font-weight:500;font-size:1rem}
.main-nav a:hover{color:var(--akzent)}
.main-nav a[aria-current="page"]{color:var(--akzent);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.4em}
.main-nav .nav-hervorgehoben{color:var(--akzent);font-weight:650}
.nav-toggle{display:none;width:2.75rem;height:2.75rem;background:none;border:1px solid var(--linie);border-radius:var(--radius);cursor:pointer;align-items:center;justify-content:center}
.nav-toggle__icon,.nav-toggle__icon::before,.nav-toggle__icon::after{content:"";display:block;position:relative;width:1.25rem;height:2px;background:var(--text)}
.nav-toggle__icon::before{position:absolute;top:-6px}
.nav-toggle__icon::after{position:absolute;top:6px}
.mobile-nav{position:fixed;inset:0;z-index:500;background:var(--grund);padding:4.5rem 1.75rem 2rem;overflow-y:auto}
.mobile-nav[hidden]{display:none}
.mobile-nav__close{position:absolute;top:.75rem;right:1rem;width:2.75rem;height:2.75rem;background:none;border:0;font-size:2.25rem;line-height:1;cursor:pointer;color:var(--text)}
.mobile-nav a{display:block;padding:.85rem 0;border-bottom:1px solid var(--linie);color:var(--text);font-family:var(--schrift-titel);font-size:1.4rem;font-weight:600;text-decoration:none}
.mobile-nav a[aria-current="page"]{color:var(--akzent)}

/* Bühne der Startseite und Seitenkopf der Unterseiten: Foto mit olivfarbenem
   Verlauf, damit der weiße Text überall lesbar bleibt */
.buehne,.seitenkopf{position:relative;display:flex;align-items:flex-end;background:var(--dunkel);color:var(--auf-dunkel);overflow:hidden;isolation:isolate}
.buehne{min-height:clamp(28rem,68vh,40rem)}
.seitenkopf{min-height:clamp(17rem,42vh,25rem)}
.buehne picture,.seitenkopf picture,.kachel picture{position:absolute;inset:0;z-index:-2}
/* Die KI-Bilder tragen das EU-Kennzeichen oben rechts eingebrannt. Beim
   Zuschneiden per object-fit bleibt deshalb die obere rechte Ecke stehen. */
.buehne img,.seitenkopf img,.kachel img{width:100%;height:100%;object-fit:cover;object-position:100% 0}
.buehne::after,.seitenkopf::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(var(--abdunkeln),.88) 0%,rgba(var(--abdunkeln),.6) 48%,rgba(var(--abdunkeln),.12) 100%),linear-gradient(0deg,rgba(var(--abdunkeln),.5) 0%,rgba(var(--abdunkeln),0) 55%)}
.buehne__innen{width:100%;padding-block:6rem 4.5rem}
.buehne h1{color:#fff;max-width:17ch}
.buehne p{max-width:54ch;font-size:1.25rem;color:#EDEEE5}
.seitenkopf__innen{width:100%;padding-block:4.5rem 3rem}
.seitenkopf h1{color:#fff;max-width:22ch;margin-bottom:0}
.seitenkopf .vorzeile{color:var(--akzent-hell)}
/* Seitenkopf ohne Foto, zum Beispiel Kontakt */
.seitenkopf--schlicht{min-height:0;background:linear-gradient(160deg,#6E7C5E 0%,#4A553C 52%,#333322 100%)}
.seitenkopf--schlicht::after{content:none}

/* Regionen als große Bildkacheln */
.kacheln{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:2.75rem}
.kachel{position:relative;aspect-ratio:3/4;max-width:100%;overflow:hidden;background:var(--dunkel);isolation:isolate}
.kachel::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(var(--abdunkeln),.78) 0%,rgba(var(--abdunkeln),0) 48%)}
.kachel__titel{position:absolute;left:1.4rem;right:1.4rem;bottom:1.2rem;margin:0;color:#fff}

/* Arbeitsfelder in der dunklen Sektion */
.felder{display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem;margin-top:2.75rem}
.feld h3{color:var(--salbei);font-family:var(--schrift);font-size:1.0625rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.feld p{color:var(--auf-dunkel-leise);font-size:1.0625rem}
.feld__nr{display:block;font-family:var(--schrift-titel);font-size:2.5rem;line-height:1;color:var(--akzent-hell);margin-bottom:.9rem}

/* Bedingungen der Schriftenreihe */
.bedingungen{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:2.5rem;padding:0;list-style:none}
.bedingung{background:var(--grund);border:1px solid var(--linie);padding:1.6rem 1.5rem}
.bedingung__nr{display:block;font-family:var(--schrift-titel);font-size:1.875rem;line-height:1;color:var(--akzent);margin-bottom:.75rem}
.bedingung p{font-size:1.0625rem;color:var(--text-leise)}

/* Spendenband und Kontokasten */
.spendenband{display:grid;grid-template-columns:1.2fr .8fr;gap:3.5rem;align-items:center}
.konto{background:var(--grund);border:1px solid var(--linie);padding:1.9rem 1.75rem}
.konto__titel{font-size:.9375rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-leise);margin-bottom:0}
.konto dl{margin:1.1rem 0 0}
.konto dt{font-size:.8125rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-leise)}
.konto dd{margin:.1rem 0 1rem;font-size:1.1875rem;font-weight:600;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.konto dd:last-child{margin-bottom:0}

/* Zwei Spalten für Kontakt und ähnliche Blöcke */
.zweispaltig{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem}

/* Fließtext der Unterseiten */
.textspalte{max-width:var(--breite-schmal)}
.textspalte h2{margin-top:2.75rem}
.textspalte h2:first-child{margin-top:0}
.textspalte ul{padding-left:1.25rem;margin:0 0 1.1em}
.textspalte li{margin-bottom:.5em}
.anschrift{background:var(--sand);border:1px solid var(--linie);padding:1.4rem 1.5rem;margin:0 0 1.1em}

/* Förderer mit Logo */
.foerderer{display:grid;grid-template-columns:auto 1fr;gap:2rem;align-items:center;margin-top:1.5rem;padding:1.75rem;background:var(--grund);border:1px solid var(--linie)}
.foerderer img{width:13rem}
.foerderer p{margin:0}

/* Fußbereich */
.site-footer{background:var(--dunkel);color:#C8CBB9;padding-block:3.75rem 2.5rem;font-size:1.0625rem}
.site-footer a{color:#E4E6DA}
.site-footer a:hover{color:#fff}
.site-footer__spalten{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2.5rem}
.site-footer__marke{font-family:var(--schrift-titel);font-size:1.375rem;color:#fff;margin-bottom:.6rem}
.site-footer__titel{color:#fff;font-size:.9375rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin-bottom:.6rem}
.site-footer address{margin-bottom:.6rem}
.site-footer__unten{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem 2rem;border-top:1px solid #4A4A35;margin-top:2.75rem;padding-top:1.5rem;font-size:.9375rem}
.site-footer__unten ul{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem}
.site-footer__copy{margin:0}

/* Fehlerseite */
.kennung{display:inline-block;font-size:.85rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--fehler);margin-bottom:.5rem}
.linkliste{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;margin-top:2rem}

/* Rechtstexte: lange Wörter und Adressen umbrechen */
.rechtstext{overflow-wrap:break-word}
.rechtstext h2{font-size:1.375rem;margin-top:2.25rem}
.rechtstext h3{font-family:var(--schrift);font-size:1.0625rem;font-weight:650;margin-top:1.75rem}
.rechtstext ul{padding-left:1.25rem}

/* Tablet */
@media (max-width:980px){
  .kacheln,.felder,.bedingungen{grid-template-columns:1fr}
  .kachel{aspect-ratio:16/10}
  .spendenband,.zweispaltig{grid-template-columns:1fr;gap:2rem}
  .site-footer__spalten{grid-template-columns:1fr;gap:1.75rem}
}

/* Das Hauptmenü passt mit Logo ab etwa 900 Pixeln, darunter das Handy-Menü */
@media (max-width:900px){
  .main-nav{display:none}
  .nav-toggle{display:inline-flex}
}

/* Handy */
@media (max-width:760px){
  body{font-size:1.0625rem}
  .section__inner{padding-inline:1.25rem}
  .brand img{width:170px}
  .buehne{min-height:0}
  .buehne__innen{padding-block:9rem 3.5rem}
  .buehne p{font-size:1.125rem}
  .buehne::after,.seitenkopf::after{background:linear-gradient(0deg,rgba(var(--abdunkeln),.9) 0%,rgba(var(--abdunkeln),.55) 60%,rgba(var(--abdunkeln),.3) 100%)}
  .seitenkopf{min-height:14rem}
  .seitenkopf__innen{padding-block:5rem 2.25rem}
  .foerderer{grid-template-columns:1fr;gap:1.25rem}
}

/* Weniger Bewegung, wenn das System es verlangt */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}