/* teikei.org – Stylesheet
   Agora-CI: Oswald für Titel, Nunito zum Lesen, bewusst nur hell, keine Fotos.
   Schriften liegen lokal in /fonts/, es werden keine fremden Server angefragt. */

@font-face{
  font-family:"Oswald";
  src:url("../fonts/oswald-latin-wght-normal.woff2") format("woff2");
  font-weight:200 700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Nunito";
  src:url("../fonts/nunito-latin-wght-normal.woff2") format("woff2");
  font-weight:200 1000;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Nunito";
  src:url("../fonts/nunito-latin-wght-italic.woff2") format("woff2");
  font-weight:200 1000;font-style:italic;font-display:swap;
}

:root{
  color-scheme:light;
  --hell:#E3E1DD; --petrol:#002C3B; --gruen:#15882E; --grau:#BDBEBA;
  --limette:#EDFF6C; --mint:#C2F3C5;
  --tinte:#141414; --papier:#fff; --flaeche:#f6f5f2; --leise:#55554f;
  --titel:"Oswald","Arial Narrow",sans-serif;
  --lesen:"Nunito","Helvetica Neue",Arial,sans-serif;
  --breit:980px; --lesebreit:820px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:16px}
body{
  margin:0;background:var(--papier);color:var(--tinte);
  font:16px/1.6 var(--lesen);
  min-height:100vh;display:flex;flex-direction:column;
}
main{flex:1 0 auto}
img{max-width:100%;height:auto}
[hidden]{display:none!important}

h1,h2,h3,h4{font-family:var(--titel);font-weight:600;margin:0;text-transform:uppercase;line-height:1.1;text-wrap:balance}
a{color:var(--tinte)}
a:focus-visible,button:focus-visible,iframe:focus-visible{outline:2px solid var(--tinte);outline-offset:2px}
.fuss a:focus-visible{outline-color:var(--limette)}

.innen{
  max-width:var(--breit);margin:0 auto;
  padding-left:max(16px,env(safe-area-inset-left,0px));
  padding-right:max(16px,env(safe-area-inset-right,0px));
}

/* Sprung zum Inhalt (Tastatur, Screenreader) */
.sprung{position:absolute;left:-9999px;top:0;background:var(--limette);color:var(--tinte);font:600 1rem var(--titel);padding:8px 14px;z-index:10}
.sprung:focus{left:8px;top:8px}

/* ---------- Kopf mit Navigation ---------- */
.kopf{background:var(--papier);border-bottom:1.5px solid var(--tinte);padding-top:env(safe-area-inset-top,0px)}
.kopf .innen{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;padding-top:10px;padding-bottom:10px}
.reiter{display:flex;flex-wrap:wrap;gap:6px}
.reiter a,.sprachwahl a{
  font:600 .9rem var(--titel);text-transform:uppercase;text-decoration:none;
  border:1.5px solid var(--tinte);padding:5px 12px;background:var(--papier);color:var(--tinte);
}
.reiter a:hover,.sprachwahl a:hover{background:var(--limette)}
.reiter a[aria-current="page"]{background:var(--tinte);color:var(--papier)}
.sprachwahl{display:flex;gap:6px}
.sprachwahl a[aria-current="true"]{background:var(--limette)}

/* ---------- Held (Titelbereich mit Landschaft) ---------- */
.held{
  background:#E3E1DD url("../bilder/landschaft.svg") center bottom/cover no-repeat;
  border-bottom:1.5px solid var(--tinte);
  padding:30px 0 150px;
  /* Mindesthöhe, damit der Text immer über den Bäumen der Landschaft bleibt */
  min-height:max(380px,34vw);
}
.held--start{padding-bottom:230px}
.logohaus{display:block;width:fit-content;margin-bottom:26px}
.held .logo{height:30px;width:auto;display:block}
.held h1{font-size:clamp(2rem,6vw,3.2rem);max-width:14ch}
.held .unterzeile{font-style:italic;font-size:1.15rem;max-width:40ch;margin:14px 0 0}
.held--recht{background:var(--hell);padding:28px 0 26px;min-height:0}
.held--recht .logohaus{margin-bottom:22px}
.held--recht h1{max-width:none}

/* ---------- Inhalt ---------- */
.seite{padding-top:8px;padding-bottom:48px}
.seite>*{max-width:var(--lesebreit)}
.seite h2{font-size:1.35rem;margin:30px 0 8px;border-bottom:1.5px solid var(--gruen);padding-bottom:4px}
.seite h2.gross{font-size:1.6rem;margin-top:40px}
.seite p{margin:14px 0 0;font-size:1.06rem;max-width:60ch;text-wrap:pretty}
.seite p.klein,.klein{font-size:.88rem;color:var(--leise)}
.seite ul{margin:8px 0 0;padding-left:1.2rem}
.seite li{margin:3px 0}
.seite a{text-underline-offset:3px}
.seite .leitsatz{max-width:60ch;border-left:6px solid var(--tinte);background:var(--flaeche);padding:12px 16px;font-weight:700;margin-top:26px}

/* Knöpfe */
.knoepfe{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.kn{
  display:inline-block;background:var(--tinte);color:var(--papier);
  font:600 1rem var(--titel);text-decoration:underline;text-underline-offset:3px;
  padding:9px 18px;border:0;cursor:pointer;
}
.kn:hover{background:#333}
.kn.cta{background:var(--limette);color:var(--tinte);text-decoration:none}
.kn.cta:hover{background:#e3f55a}
.seite a.kn{color:var(--papier)}
.seite a.kn.cta{color:var(--tinte)}
.kn.rand{background:var(--papier);color:var(--tinte);border:1.5px solid var(--petrol);text-decoration:none}
.seite a.kn.rand{color:var(--tinte)}
.kn.rand:hover{background:var(--mint)}

/* Newsletter (Brevo) */
.nlbox{margin-top:20px;max-width:560px}
/* Höhe passt zum Brevo-Formular, damit es nicht im Rahmen scrollt */
.nlbox iframe{display:block;width:100%;max-width:100%;height:1040px;border:0;background:transparent}
@media (max-width:480px){.nlbox iframe{height:1240px}}
@media (max-width:340px){.nlbox iframe{height:1460px}}
.nlbox+.hinweis{max-width:560px}
.hinweis{font-size:.85rem;color:var(--leise);margin-top:8px}
.seite .hinweis{font-size:.88rem}

/* Aktuelles */
.newsliste{display:grid;gap:10px;margin-top:12px}
.news{display:grid;grid-template-columns:110px minmax(0,1fr);gap:14px;border:1.5px solid var(--tinte);padding:14px 16px}
.news time{font:600 1rem var(--titel);text-transform:uppercase}
.news h3{font:600 1.15rem var(--titel);text-transform:uppercase;margin:4px 0 2px}
.seite .news p{margin:0;font-size:.97rem}
.news a{font:600 .9rem var(--titel)}
.chip{display:inline-block;font:600 .72rem var(--titel);text-transform:uppercase;border:1.5px solid var(--tinte);padding:0 7px;background:var(--mint)}

/* Stimmen */
.zitate{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:10px;margin-top:12px}
.zitat{margin:0;border-left:6px solid var(--gruen);background:var(--flaeche);padding:14px 16px}
.zitat blockquote{margin:0;font-style:italic;font-size:1.02rem}
.zitat figcaption{margin-top:8px;font:600 .95rem var(--titel);text-transform:uppercase}

/* Phasen */
.phasen{display:grid;gap:0;border:1.5px solid var(--tinte);margin-top:12px}
.ph{padding:12px 14px;border-bottom:1px solid var(--grau)}
.ph b{font:600 1.1rem var(--titel);text-transform:uppercase}
.ph small{margin-left:8px;color:var(--leise)}
.ph em{color:var(--leise)}
.namen{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.name{background:var(--petrol);color:var(--papier);font:500 .9rem var(--titel);padding:3px 10px}
.phasen .klein{padding:10px 14px;margin:0;border-top:1px solid var(--grau)}
.seite .phasen .klein{max-width:none}

/* Personen */
.personen{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:10px;margin-top:12px}
.person{border:1.5px solid var(--tinte);padding:14px 16px;min-width:0}
.pkopf{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center}
.ini{width:42px;height:42px;border-radius:50%;background:var(--gruen);color:var(--papier);display:grid;place-items:center;font:600 1rem var(--titel)}
.pkopf b{font:600 1.1rem var(--titel);text-transform:uppercase;display:block}
.pkopf small{color:var(--leise)}
.phase{font:600 .75rem var(--titel);text-transform:uppercase;border:1.5px solid var(--tinte);padding:1px 7px;white-space:nowrap}
.person dl{margin:10px 0 0}
.person dt{font:600 .8rem var(--titel);text-transform:uppercase;color:var(--leise);margin-top:8px}
.person dd{margin:2px 0 0;font-size:.96rem}

/* „Alle zeigen“ (per JS) */
.mehr{margin-top:14px}

/* Prinzipien */
.prinzipien{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:10px;margin-top:12px}
a.prinzip{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 12px;text-decoration:none;color:inherit;border:1.5px solid var(--tinte);padding:12px 14px;background:var(--papier)}
.pnr{grid-row:span 2;font:600 2rem var(--titel);line-height:1;color:var(--gruen)}
a.prinzip b{font:600 1.02rem var(--titel);text-transform:uppercase;line-height:1.2}
.seite a.prinzip p{margin:0;font-size:.92rem}
a.prinzip:hover{background:var(--flaeche)}
a.prinzip:hover b{text-decoration:underline;text-underline-offset:3px}

/* Rollen */
.rollen{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:0;border-top:1.5px solid var(--tinte);margin-top:16px}
a.rolle{display:block;text-decoration:none;color:inherit;border-bottom:1px solid var(--grau);padding:12px 14px 12px 0;min-width:0}
.rolle b{font:600 1.1rem var(--titel);text-transform:uppercase;display:block}
.seite .rolle p{margin:4px 0 0;font-size:.97rem}
a.rolle:hover b{text-decoration:underline;text-underline-offset:3px}

/* Kacheln und Länderkarten */
.weiter2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:10px;margin-top:22px}
.seite .weiter2{max-width:var(--lesebreit)}
a.kachel{background:var(--petrol);color:var(--papier);text-decoration:none;padding:18px 20px;display:block}
.seite a.kachel{color:var(--papier)}
a.kachel:hover{background:#00404f}
.kachel span{font:500 .85rem var(--titel);text-transform:uppercase;color:var(--grau);display:block}
.kachel b{font:600 1.6rem var(--titel);text-transform:uppercase}
.land{margin-top:30px}
.land h3{font:600 1.3rem var(--titel);text-transform:uppercase;margin:0 0 10px;border-bottom:1.5px solid var(--tinte);padding-bottom:4px}
.karten{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:10px}
a.landkarte{border:1.5px solid var(--tinte);padding:14px 16px;text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:6px;background:var(--papier)}
.landkarte b{font:600 1.1rem var(--titel);text-transform:uppercase;line-height:1.2}
.seite .landkarte p{margin:0;font-size:.95rem}
.landkarte span{margin-top:auto;font:600 .95rem var(--titel);text-decoration:underline}
a.landkarte:hover{background:var(--flaeche)}

/* Rechtstexte */
.recht h2{font-size:1.1rem;margin:30px 0 8px;border-bottom:1.5px solid var(--gruen);padding-bottom:4px}
.recht p{max-width:70ch}

/* Fehlerseite */
.leer{padding-top:40px}

/* ---------- Fuss ---------- */
.fuss{background:var(--petrol);color:#fff;padding:16px 0;padding-bottom:max(16px,env(safe-area-inset-bottom,0px))}
.fuss .innen{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:.88rem;align-items:center}
.fuss a{color:#fff}
.fuss .sprachen{margin-left:auto}
.fuss .sprachen a[aria-current="true"]{font-weight:700;text-decoration:none}

/* ---------- Kleine Bildschirme ---------- */
@media (max-width:560px){
  .news{grid-template-columns:1fr;gap:4px}
  .held{padding-bottom:110px;min-height:400px}
  .held--start{padding-bottom:170px}
  .held--recht{padding-bottom:26px;min-height:0}
  .fuss .sprachen{margin-left:0}
  .pkopf{grid-template-columns:auto minmax(0,1fr)}
  .pkopf .phase{grid-column:1 / -1;justify-self:start}
}

/* ---------- Ruhe und Druck ---------- */
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}
@media print{
  .kopf,.fuss,.knoepfe,.nlbox,.mehr{display:none!important}
  .held{background:none;padding:0 0 12px}
  a{text-decoration:none}
}