/* Stiftung Autismus (Projektinitiative) – Stilblatt Fassung 4 (23.10.2026)
   Darstellung: Farbe (Grundeinstellung) oder Schwarz-Weiß. Schriftgröße regelt der Browser.
   Aufbau: 1 Farben · 2 Grundlagen · 3 Leiste · 4 Kopf und Menü · 5 Seitenrahmen · 6 Bausteine
           7 Kacheln · 8 Startseite · 9 Fuß · 10 Darstellung „Farbe“ · 11 Schwarz-Weiß · 12 Umbruch · 13 Sonderfälle */

@font-face{font-family:"Atkinson Hyperlegible";font-weight:400;font-style:normal;font-display:swap;src:url("schriften/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible";font-weight:700;font-style:normal;font-display:swap;src:url("schriften/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2")}

/* ---------- 1 Farben: eine Familie – Marineblau, Mittelblau, Stahlblau, Lila ---------- */
:root{
  --dunkelblau:#061b4d;--mittelblau:#24407e;--stahlblau:#2f6f8f;--lila:#5b2c83;--lila-zart:#c7a8ec;
  --seite:#fff;--karte:#fff;--hell:#f3f5fa;--lila-hell:#f4effa;
  --text:#1b2540;--grau:#4a5468;--rand:#d5dae6;--rand-stark:#6b7591;
  --titel:#061b4d;--link:#5b2c83;--akzent:#5b2c83;
  --nav:#061b4d;--nav-text:#fff;--nav-aktiv:#1d3570;--leiste:#03102e;--leiste-text:#fff;
  --knopf:#5b2c83;--knopf-text:#fff;--knopf-rand:#5b2c83;
  --fokus:#ffbf47;--fokus-text:#0b0c0c;
  --entsch-bg:#f4effa;--entsch-rand:#5b2c83;--entsch-text:#1b2540;
  /* Akzente der Statuszeichen und Gesprächslisten – alle aus derselben Familie */
  --petrol:#24407e;--petrol-text:#24407e;--violett:#5b2c83;--violett-text:#5b2c83;
  --orange:#2f6f8f;--orange-text:#2f6f8f;--gruen:#061b4d;--gruen-text:#061b4d;
  --ikon-text:#fff;
  --himmel-oben:#eef1f9;--himmel-unten:#f6f2fb;--wasser:#061b4d;--wasser-linie:#2a4582;--wasser-text:#fff;
  --foto-rahmen:0 solid transparent;--foto-grund:#061b4d;
  --radius:14px;--schatten:0 6px 18px rgba(0,20,60,.14);
  color-scheme:light;
}

/* ---------- 2 Grundlagen ---------- */
*,*::before,*::after{box-sizing:border-box}
html{font-size:100%;-webkit-text-size-adjust:100%;background:var(--seite)}
body{margin:0;overflow-wrap:anywhere;hyphens:auto;background:var(--seite);color:var(--text);font-family:"Atkinson Hyperlegible",Arial,Helvetica,sans-serif;font-size:1.0625rem;line-height:1.6}
html.abstand body{line-height:1.9;letter-spacing:.12em;word-spacing:.16em}
html.abstand .inhalt p,html.abstand .inhalt li,html.abstand .inhalt dd{margin-bottom:2em}
img,svg{max-width:100%}
a{color:var(--link);text-decoration:underline;text-underline-offset:.15em;text-decoration-thickness:.08em}
a:hover{text-decoration-thickness:.16em}
:focus-visible{outline:3px solid var(--fokus);outline-offset:2px;box-shadow:0 0 0 6px var(--fokus-text)}
a:focus-visible{outline:3px solid var(--fokus);outline-offset:0;background:var(--fokus);color:var(--fokus-text);text-decoration:none;box-shadow:0 4px 0 var(--fokus-text)}
[tabindex="-1"]:focus{outline:none;box-shadow:none}
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.nur-js{display:none!important}
html.js .nur-js{display:flex!important}
.sprung{position:absolute;left:16px;top:-200px;z-index:10;background:var(--fokus);color:var(--fokus-text);padding:12px 16px;font-weight:700}
.sprung:focus{top:8px}
.huelle{max-width:1280px;margin:0 auto;padding:0 16px}
.fuss .nobr{white-space:nowrap}

/* ---------- 3 Leiste: Vorlesen, Darstellung, Leseabstand, Leichte Sprache, Suche ---------- */
.leiste{background:var(--leiste);color:var(--leiste-text);border-bottom:1px solid var(--rand-stark)}
.leiste .huelle{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;padding-top:5px;padding-bottom:5px}
.leiste .optionen{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px}
.gruppe{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.knopf{font:inherit;font-size:.85rem;min-height:32px;min-width:44px;padding:2px 10px;border-radius:6px;border:1px solid var(--leiste-text);background:transparent;color:var(--leiste-text);cursor:pointer;display:inline-flex;align-items:center;gap:6px;text-decoration:none}
.knopf[aria-pressed="true"]{background:var(--leiste-text);color:var(--leiste)}
.knopf:disabled{opacity:.6;cursor:not-allowed}
.knopf svg{width:16px;height:16px;flex:none}
.leiste a.knopf{color:var(--leiste-text)}
.leiste a.knopf:focus-visible{color:var(--fokus-text)}
.leiste select{font:inherit;font-size:.85rem;min-height:32px;border-radius:6px;border:1px solid var(--leiste-text);background:var(--leiste);color:var(--leiste-text);padding:0 6px}
.tempo-name{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.umschalter{gap:0}
.umschalter .knopf{border-radius:0}
.umschalter .knopf:first-child{border-radius:6px 0 0 6px}
.umschalter .knopf:last-child{border-radius:0 6px 6px 0;margin-left:-1px}
.leiste-auf{display:none}
.suche{display:flex;gap:4px;min-width:0;margin-left:auto}
.suche input{font:inherit;font-size:.88rem;min-height:32px;min-width:0;width:10em;max-width:100%;padding:2px 10px;border:1px solid var(--leiste-text);border-radius:6px;background:transparent;color:var(--leiste-text)}
.suche input::placeholder{color:var(--leiste-text);opacity:.7}
.suche button{font:inherit;font-size:.85rem;min-height:32px;min-width:44px;padding:2px 12px;border-radius:6px;border:1px solid var(--leiste-text);background:transparent;color:var(--leiste-text);cursor:pointer}
#vorlese-hinweis{flex-basis:100%;margin:0;background:var(--entsch-bg);color:var(--entsch-text);border:2px solid var(--entsch-rand);border-radius:8px;padding:8px 12px}
#vorlese-hinweis:empty{display:none}

/* ---------- 4 Kopf und Menü ---------- */
.kopf{background:var(--seite);border-bottom:1px solid var(--rand)}
.kopf .huelle{padding-top:10px;padding-bottom:10px}
.kopf>.huelle{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px 32px;align-items:center}
.kopf .marke{flex:1 1 30em;min-width:0}
/* Zeichen „Unser Norden“: Schleswig-Holstein als Fläche, Hamburg als Akzent (Umriss: Natural Earth, gemeinfrei) */
.marke{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--titel);--z-land:var(--dunkelblau);--z-stadt:#c30b18}
.marke-zeichen{display:block;flex:none;height:56px;width:auto}
.z-land{fill:var(--z-land)}
.z-stadt{fill:var(--z-stadt)}
.marke-text{min-width:0;display:flex;flex-direction:column;gap:5px;hyphens:manual}
.marke-name{font-weight:700;font-size:1.5rem;line-height:1.05;letter-spacing:-.01em;color:var(--titel)}
.marke-region{font-weight:700;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--grau)}
.marke:focus-visible .marke-name,.marke:focus-visible .marke-region{color:var(--fokus-text)}
.marke:focus-visible{--z-land:var(--fokus-text);--z-stadt:var(--fokus-text)}
.menue{background:var(--nav)}
.menue-knopf{display:none}
.menue ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:stretch}
.menue li{display:flex}
.menue a{display:flex;align-items:center;color:var(--nav-text);text-decoration:none;padding:12px 18px;min-height:52px;font-size:1.05rem;border-bottom:4px solid transparent}
.menue a:hover{text-decoration:underline}
.menue a[aria-current]{background:var(--nav-aktiv);font-weight:700;border-bottom-color:var(--lila-zart)}
.menue a:focus-visible{box-shadow:none}
.menue li.menue-unterstuetzen{margin-left:auto;padding:6px 0}
.menue li.menue-unterstuetzen a{background:var(--knopf);color:var(--knopf-text);border:2px solid #8a63b3;border-radius:8px;font-weight:700;min-height:40px;padding:6px 22px}
.menue li.menue-unterstuetzen a[aria-current]{text-decoration:underline;text-decoration-thickness:.12em}

/* ---------- 5 Seitenrahmen: Brotkrumen, Bereichsnavigation, Inhalt, Seitenkasten ---------- */
main{display:block;padding:24px 0 48px}
main.start{padding:0 0 24px}
.krumen ol{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-wrap:wrap;gap:4px 0;font-size:.95rem}
.krumen li+li::before{content:"›";margin:0 10px;color:var(--grau)}
.krumen a{color:var(--text)}
.rahmen{display:grid;grid-template-columns:260px minmax(0,1fr) 270px;gap:36px;align-items:start}
.rahmen.ohne-nav{grid-template-columns:minmax(0,1fr) 270px}
.unternav{border-top:3px solid var(--titel)}
.unternav summary{display:none}
.unternav summary:focus-visible{outline:3px solid var(--fokus);outline-offset:2px}
.unternav h2{font-size:1rem;margin:0;padding:0;border-bottom:1px solid var(--rand-stark)}
.unternav h2 a{display:block;padding:10px 0;min-height:44px;color:var(--titel);text-decoration:none}
.unternav ul{list-style:none;margin:0;padding:0}
.unternav li{border-bottom:1px solid var(--rand)}
.unternav ul ul{padding-left:18px}
.unternav ul ul li{border-bottom:0}
.unternav a{display:block;padding:8px 0;min-height:44px;color:var(--text);text-decoration:none}
.unternav a:hover{text-decoration:underline}
.unternav a[aria-current="page"]{color:var(--akzent);font-weight:700;text-decoration:underline}
.unternav a[aria-current="true"]{font-weight:700}
.inhalt{min-width:0;container-type:inline-size}
.inhalt h1{color:var(--titel);font-size:2.1rem;line-height:1.2;margin:0 0 16px;font-weight:700}
.inhalt h2{color:var(--titel);font-size:1.4rem;line-height:1.25;margin:32px 0 10px}
.inhalt h3{color:var(--titel);font-size:1.15rem;margin:20px 0 8px}
.inhalt p,.inhalt li,.inhalt dd{max-width:44em}
.einleitung{font-size:1.2rem}
.seitenkopf>.einleitung{margin-top:0}
.seitenbild{margin:4px 0 22px}
.seitenbild img,.bildreihe img{display:block;max-width:100%;height:auto;border-radius:10px;border:var(--foto-rahmen);background:var(--foto-grund)}
@container (min-width:34em){
  .seitenkopf-seite{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,44%);column-gap:28px;align-items:start;margin-bottom:8px}
  .seitenkopf-seite>.seitenbild{margin:6px 0 16px;justify-self:end}
}
.kasten{background:var(--lila-hell);border-top:4px solid var(--lila);border-radius:8px;padding:16px 18px}
.kasten-titel{color:var(--titel);font-size:1.25rem;margin:0 0 8px;line-height:1.2}
.kasten p{margin:0 0 10px}
.kasten p:last-child{margin-bottom:0}

/* ---------- 6 Bausteine im Text ---------- */
.weiter{font-weight:700}
.weiter::before{content:"› ";color:var(--akzent)}
.aufbau{list-style:none;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.aufbau li{min-width:0;background:var(--hell);border-left:6px solid var(--lila);border-radius:6px;padding:12px 16px}
.aufbau h2,.aufbau h3{margin:0 0 4px;font-size:1.2rem}
.aufbau p{margin:0}
.schritte li{margin-bottom:10px}
.verweise{padding-left:1.2em}
.verweise li{margin-bottom:8px}
.liste dt{font-weight:700;margin-top:14px;color:var(--titel)}
.liste dd{margin:4px 0 0 0}
.meta{color:var(--grau)}
.stand{color:var(--grau);font-size:.95rem;border-top:1px solid var(--rand);padding-top:10px;margin-top:32px}
.hinweis{background:var(--hell);border-left:6px solid var(--rand-stark);padding:12px 16px;border-radius:6px}
.hinweis-stark{background:var(--entsch-bg);color:var(--entsch-text);border-left:6px solid var(--entsch-rand);padding:12px 16px;border-radius:6px;font-weight:700;max-width:44em}
.entscheidung{background:var(--entsch-bg);color:var(--entsch-text);border-left:6px solid var(--entsch-rand);padding:10px 14px;margin:10px 0 16px;border-radius:6px;max-width:44em}
.entscheidung a{color:var(--entsch-text)}
.zitat{margin:12px 0 16px;padding:12px 18px;border-left:6px solid var(--lila);background:var(--hell);border-radius:6px;max-width:44em}
.zitat p{margin:0 0 6px}
.zitat footer{font-size:.95rem;color:var(--grau)}
.quellen{font-size:.95rem;color:var(--grau);padding-left:1.2em}
.quellen li{margin-bottom:6px}
.quellen a{color:var(--text)}
.status{display:inline-block;font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:2px 10px;border-radius:999px;border:2px solid currentColor;margin-right:8px;vertical-align:middle}
.status-erledigt{color:var(--gruen-text)}
.status-offen{color:var(--orange-text)}
.status-jetzt{color:var(--violett-text)}
.gespraeche{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.gespraeche li{min-width:0;border:1px solid var(--rand);border-left:6px solid var(--gruen);border-radius:8px;padding:14px 18px;background:var(--karte)}
.gespraeche li.offen{border-left-color:var(--orange)}
.gespraeche h3{margin:6px 0 6px}
.gespraeche p{margin:0}
.ls{font-size:1.2rem;line-height:1.8;hyphens:manual}
.ls h1{font-size:1.9rem}
.ls p{margin:0 0 1em}
.treffer li{margin-bottom:14px}
.treffer p{margin:2px 0 0}
.suche-gross{margin:0 0 16px}
.suche-gross label{display:block;font-weight:700;margin-bottom:4px}
.suche-zeile{display:flex;flex-wrap:wrap;gap:6px}
.suche-gross input{font:inherit;min-height:44px;min-width:0;width:22em;max-width:100%;padding:6px 10px;border:2px solid var(--rand-stark);border-radius:8px;background:var(--karte);color:var(--text)}
.suche-gross button{font:inherit;min-height:44px;min-width:44px;padding:6px 14px;border-radius:8px;border:2px solid var(--dunkelblau);background:var(--dunkelblau);color:#fff;cursor:pointer}
.meldungen{list-style:none;padding:0;margin:0}
.meldungen li{border-left:6px solid var(--rand-stark);padding:4px 0 4px 16px;margin-bottom:22px}
.meldungen h2,.meldungen h3{margin:2px 0 4px}
.meldungen p{margin:0}
.datum{color:var(--grau);margin:0;font-weight:700}
.seitenbaum ul{padding-left:1.4em}
.seitenbaum li{margin:4px 0}
.seitenbaum>ul>li{margin-top:12px}
.seitenbaum>ul>li>a{font-weight:700}
.zwei-spalten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;list-style:none;padding:0;margin:12px 0}
.zwei-spalten>li{background:var(--hell);border-radius:8px;padding:14px 18px;min-width:0}
.zwei-spalten h3{margin:0 0 6px}
.zwei-spalten ul{margin:0;padding-left:1.2em}
.bildreihe{display:flex;flex-wrap:wrap;gap:16px;margin:12px 0 20px}
.bildreihe figure{margin:0;flex:1 1 200px;max-width:260px;min-width:0}
.bildreihe img{width:100%;aspect-ratio:16/9;object-fit:cover}
.bildreihe figcaption{font-weight:700;color:var(--titel);margin-top:6px;font-size:1rem}
.kontakt-block{background:var(--hell);border-radius:8px;padding:16px 20px;max-width:34em}
.kontakt-block p{margin:0 0 10px}
.kontakt-block p:last-child{margin:0}
.kontakt-block svg{color:var(--violett-text)}
.kontakt-zeile{display:flex;gap:12px;align-items:flex-start}
.kontakt-zeile svg{flex:none;width:24px;height:24px;margin-top:3px}
.li{stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* Sprungliste „Auf dieser Seite“ (aus den Zwischenüberschriften erzeugt) */
.sprungliste{background:var(--hell);border-left:6px solid var(--dunkelblau);border-radius:6px;padding:12px 18px 10px;margin:8px 0 12px;max-width:44em}
.sprung-titel{font-weight:700;color:var(--titel);margin:0 0 2px}
.sprungliste ol{margin:0;padding-left:1.5em;columns:2 15em;column-gap:28px}
.sprungliste li{margin:0;break-inside:avoid}
.sprungliste a{display:inline-block;padding:4px 0;min-height:32px}
h2[id]{scroll-margin-top:16px}

/* Zeitleiste (Weg zur Gründung) */
.zeitleiste{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;counter-reset:schritt}
.zeitleiste>li{position:relative;counter-increment:schritt;padding-top:64px;min-width:0}
.zeitleiste>li::before{content:counter(schritt);position:absolute;top:0;left:0;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:1.3rem;background:var(--karte);color:var(--titel);border:3px solid var(--rand-stark);z-index:1}
.zeitleiste>li::after{content:"";position:absolute;top:23px;left:56px;right:-12px;height:3px;background:var(--rand-stark)}
.zeitleiste>li:last-child::after{display:none}
.zeitleiste>li.jetzt::before{background:var(--lila);border-color:var(--lila);color:#fff}
.zeitleiste h3{margin:8px 0 6px;font-size:1.15rem;color:var(--titel)}
.zeitleiste p{margin:0}
.zeitleiste .status{margin:0}
.inhalt .zeitleiste{grid-template-columns:minmax(0,1fr);gap:8px;margin:12px 0 16px}
.inhalt .zeitleiste>li{padding-top:0;padding-left:64px;padding-bottom:14px}
.inhalt .zeitleiste>li::after{top:52px;bottom:-4px;left:23px;right:auto;width:3px;height:auto;display:block}
.inhalt .zeitleiste>li:last-child::after{display:none}
.inhalt .zeitleiste h3{margin-top:6px}

/* ---------- 7 Kacheln (ganze Fläche anklickbar; Name der Kachel = Sprachbefehl) ---------- */
.kachel{position:relative;background:var(--karte);border:1px solid var(--rand);border-radius:12px;padding:22px;display:flex;flex-direction:column;gap:8px;min-width:0;transition:border-color .15s,box-shadow .15s,transform .15s}
.kachel:hover{border-color:var(--rand-stark);box-shadow:0 8px 22px rgba(6,27,77,.12);transform:translateY(-2px)}
.kachel :is(h2,h3){margin:0;font-size:1.2rem;line-height:1.25}
.inhalt .kachel :is(h2,h3){margin:0}
.kachel :is(h2,h3) a{color:var(--titel);text-decoration:none}
.kachel :is(h2,h3) a::after{content:"";position:absolute;inset:0;border-radius:12px}
.kachel:hover :is(h2,h3) a{text-decoration:underline}
.kachel:focus-within{outline:3px solid var(--fokus);outline-offset:3px;box-shadow:0 0 0 7px var(--fokus-text)}
.kachel :is(h2,h3) a:focus-visible{outline:none;box-shadow:none;background:transparent;color:var(--titel);text-decoration:underline;text-decoration-thickness:.16em}
.kachel p{margin:0}
.kachel-weiter{margin-top:auto;padding-top:6px;font-weight:700;color:var(--link)}
.kachel-weiter::after{content:" ›"}
/* Themen */
.themen-kacheln{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.inhalt .themen-kacheln{grid-template-columns:repeat(2,minmax(0,1fr));margin:12px 0 20px}
.thema{flex-direction:row;align-items:flex-start;gap:16px}
.thema-bild{flex:none;display:grid;place-items:center;width:60px;height:60px;border-radius:12px;background:var(--lila-hell);color:var(--violett-text)}
.thema-bild svg{width:36px;height:36px}
.thema-text{min-width:0;display:flex;flex-direction:column;gap:6px;flex:1}
/* Projekte: Foto oben (schmale Kachel) oder links neben dem Text (breite Kachel) */
.projekt-karten{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.inhalt .projekt-karten{margin:12px 0 20px}
.kachel.projekt{padding:0;overflow:hidden;gap:0;display:grid;grid-template-columns:minmax(0,min(40%,380px)) minmax(0,1fr);grid-template-rows:auto 1fr;container-type:inline-size}
.projekt-bild{grid-column:1/-1;grid-row:1;position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:var(--foto-grund);border-bottom:6px solid var(--wasser);line-height:0}
.projekt-bild img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 40%}
.projekt-bild-hh img{object-position:45% 30%}
.projekt-bild-sh img{object-position:50% 22%}
.projekt:hover .projekt-bild img{filter:brightness(1.05) saturate(1.1)}
.projekt-text{grid-column:1/-1;grid-row:2;padding:20px 22px 22px;display:flex;flex-direction:column;gap:10px;min-width:0}
@container (min-width:420px){
  .projekt-bild{grid-column:1;grid-row:1/-1;aspect-ratio:auto;min-height:220px;border-bottom:0;border-right:6px solid var(--wasser)}
  .projekt-bild-hh{max-height:412px}
  .projekt-bild-sh{max-height:596px}
  .projekt-text{grid-column:2;grid-row:1/-1}
}
.projekt-text :is(h2,h3){font-size:1.35rem}
.projekt ul.unterlinks{list-style:none;margin:4px 0 0;padding:0;position:relative;z-index:1}
.projekt ul.unterlinks li{border-top:1px solid var(--rand)}
.projekt ul.unterlinks a{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;padding:8px 0;font-weight:700;text-decoration:none;color:var(--link)}
.projekt ul.unterlinks a::after{content:"›";font-size:1.3em}
.projekt ul.unterlinks a:hover{text-decoration:underline}
.projekt:focus-within{outline:none;box-shadow:none}
.projekt:has(:is(h2,h3) a:focus-visible){outline:3px solid var(--fokus);outline-offset:3px;box-shadow:0 0 0 7px var(--fokus-text)}

/* ---------- 8 Startseite ---------- */
.abschnitt{padding:56px 0 8px}
.abschnitt-kopf{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:8px 24px;margin-bottom:24px}
.abschnitt-kopf h2{color:var(--titel);font-size:clamp(1.6rem,3vw,2.1rem);line-height:1.15;margin:0}
.abschnitt-kopf p{margin:4px 0 0;max-width:44em;color:var(--grau)}
.abschnitt-kopf>div{min-width:0}
/* Kopfbild: links Hamburg, Mitte Name und Leitsatz, rechts die Küste – alle drei auf dem blauen Band */
.kopfbild{background:linear-gradient(180deg,var(--himmel-oben),var(--himmel-unten));border-bottom:1px solid var(--rand);--band:4.25rem}
.kopfbild-raster{max-width:1500px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,34rem) minmax(0,1fr);grid-template-rows:auto auto;column-gap:clamp(16px,3vw,40px);align-items:end;padding-top:40px}
.kopfbild-text{grid-column:2;grid-row:1;text-align:center;padding-bottom:28px;min-width:0;hyphens:manual}
.kt-titel{margin:0;color:var(--titel);font-size:min(3.4rem,11vw);line-height:1.05;font-weight:700;letter-spacing:-.01em}
.kt-titel span{display:block}
.kt-linie{display:block;width:64px;height:3px;background:var(--lila);margin:16px auto 12px;border:0}
.kt-leitsatz{margin:0;font-size:clamp(1rem,1.6vw,1.15rem);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--violett-text)}
.kt-region{display:inline-block;margin:10px 0 0;padding:0;color:var(--titel);font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:.9rem}
.kt-rechtsform{margin:16px auto 0;font-size:.92rem;color:var(--grau);max-width:32em}
.kt-text{margin:14px auto 0;font-size:1.1rem;max-width:32em}
.kt-knoepfe{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:22px 0 0}
.knopf-haupt,.knopf-neben{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:10px 22px;border-radius:8px;font-weight:700;text-decoration:none;border:2px solid var(--knopf-rand)}
.knopf-haupt{background:var(--knopf);color:var(--knopf-text)}
.knopf-neben{background:transparent;color:var(--link);border-color:var(--link)}
.knopf-haupt:hover,.knopf-neben:hover{text-decoration:underline}
.ort{grid-row:1/span 2;display:grid;grid-template-rows:subgrid;text-decoration:none;color:var(--wasser-text);min-width:0;position:relative;z-index:1}
.ort-hh{grid-column:1}
.ort-sh{grid-column:3}
/* Foto füllt die Höhe des Textblocks; nie größer als seine Pixel */
.ort-bild{grid-row:1;align-self:end;position:relative;display:block;height:100%;min-height:12rem;max-height:596px;overflow:hidden;border-radius:var(--radius) var(--radius) 0 0;background:var(--foto-grund);border:var(--foto-rahmen);border-bottom:0}
.ort-bild img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 100%}
.ort-hh .ort-bild img{object-position:35% 100%}
.ort-sh .ort-bild img{object-position:62% 100%}
.ort-name{grid-row:2;display:flex;align-items:center;justify-content:center;gap:8px;min-height:var(--band);padding:8px 10px;font-weight:700;text-align:center;line-height:1.25}
.ort-name::after{content:"›";font-size:1.4em;line-height:1}
.ort:hover .ort-name{text-decoration:underline;text-decoration-thickness:.12em;text-underline-offset:.2em}
.ort:hover .ort-bild img{filter:brightness(1.05) saturate(1.1)}
.ort:focus-visible{background:transparent;color:var(--wasser-text);box-shadow:none;outline:4px solid var(--fokus);outline-offset:-4px}
.ort:focus-visible .ort-name{background:var(--fokus);color:var(--fokus-text)}
.ort:focus-visible .ort-bild::before{content:"";position:absolute;inset:0;z-index:1;border:5px solid var(--fokus);border-bottom:0;box-shadow:inset 0 0 0 3px var(--fokus-text);border-radius:inherit}
.wasser{grid-column:1/-1;grid-row:2;background:var(--wasser);min-height:var(--band);box-shadow:0 0 0 100vmax var(--wasser);clip-path:inset(0 -100vmax);border-top:3px solid var(--wasser-linie)}
@supports not (grid-template-rows:subgrid){.ort{display:flex;flex-direction:column;justify-content:flex-end}.ort-bild{height:auto;aspect-ratio:4/5;max-width:422px;width:100%;margin-inline:auto}}
/* Wegweiser: sechs Kacheln zu den Bereichen (Name der Kachel = Sprachbefehl) */
.wegweiser{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.kachel.weg{flex-direction:row;align-items:center;gap:16px;padding:18px 20px}
.weg-zeichen{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--ton);color:#fff}
.weg-zeichen svg{width:28px;height:28px}
.weg-zeichen .li{stroke-width:1.9}
.weg-text{min-width:0;display:flex;flex-direction:column;gap:4px}
.kachel.weg h3{font-size:1.15rem}
.kachel.weg p{font-size:.95rem;color:var(--grau);line-height:1.4;hyphens:manual}
/* Kacheln auf Bereichsseiten: kleiner Pfeil statt Zeichen, zwei Spalten im Inhaltsbereich */
.weg-zeichen.weg-klein{width:36px;height:36px}
.weg-zeichen.weg-klein svg{width:22px;height:22px}
.weg-zeichen.weg-klein .li{stroke-width:2.6}
.inhalt .wegweiser{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:12px 0 24px}
.inhalt .kachel.weg{padding:14px 16px;gap:14px}
.inhalt .kachel.weg :is(h2,h3){font-size:1.1rem;margin:0}
@container (max-width:34em){.inhalt .wegweiser{grid-template-columns:minmax(0,1fr)}}
.ton-navy{--ton:var(--dunkelblau)}
.ton-mittel{--ton:var(--mittelblau)}
.ton-stahl{--ton:var(--stahlblau)}
.ton-lila{--ton:var(--lila)}
.start-unten{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:40px;align-items:start}
.kontakt-karte{background:var(--dunkelblau);color:#fff;border-radius:12px;padding:24px 26px}
.kontakt-karte h2{color:#fff;font-size:clamp(1.6rem,3vw,2.1rem);margin:0 0 12px}
.kontakt-karte a{color:#fff}
.kontakt-karte a:focus-visible{color:var(--fokus-text)}
.kontakt-karte p{margin:0 0 12px}
.kontakt-karte .weiter::before{color:inherit}

/* ---------- 9 Fuß ---------- */
.fuss{background:var(--nav);color:var(--nav-text);margin-top:40px;font-size:.92rem;line-height:1.55}
.fuss .huelle{padding-top:36px;padding-bottom:20px;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.8fr) minmax(0,1.25fr);gap:20px 56px}
.fuss h2{font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin:2px 0 12px;color:var(--nav-text);opacity:.7}
.fuss ul{list-style:none;margin:0;padding:0}
.fuss li{margin:0}
.fuss a{color:var(--nav-text);display:inline-block;padding:4px 0;min-height:28px;text-decoration:none;opacity:.9;hyphens:manual}
.fuss a:hover{text-decoration:underline;text-underline-offset:3px;opacity:1}
.fuss a:focus-visible{color:var(--fokus-text);text-decoration:underline;opacity:1}
.fuss p{margin:0 0 6px;opacity:.85;hyphens:manual}
.fuss .fuss-marke{font-weight:700;font-size:.95rem;letter-spacing:.1em;text-transform:uppercase;opacity:1;margin-bottom:10px}
.fuss .fuss-stand{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.18);padding-top:14px;margin-top:8px;font-size:.8rem;opacity:.65}
@media (pointer:coarse){.fuss a{padding:9px 0;min-height:40px}}

/* ---------- 10 Darstellung „Farbe“ (Grundeinstellung): blauer Verlauf, weiße Kästen ---------- */
:root:not([data-farbe="sw"]){background:linear-gradient(rgba(0,0,0,.22),rgba(0,0,0,.22)),linear-gradient(135deg,#003366,#5a7fa6,#e6e6e6) fixed #003366}
:root:not([data-farbe="sw"]) body{background:transparent}
:root:not([data-farbe="sw"]) .kopf{background:transparent;border-bottom:0}
:root:not([data-farbe="sw"]) .kopf .marke{--z-land:#fff;--z-stadt:#ff6b78}
:root:not([data-farbe="sw"]) .kopf .marke-name{color:#fff}
:root:not([data-farbe="sw"]) .kopf .marke-region{color:rgba(255,255,255,.85)}
:root:not([data-farbe="sw"]) .menue{background:rgba(6,27,77,.92)}
:root:not([data-farbe="sw"]) main>.huelle{background:rgba(255,255,255,.97);border-radius:var(--radius);padding:22px 34px 40px;margin-top:26px;box-shadow:var(--schatten)}
:root:not([data-farbe="sw"]) .fuss{margin-top:36px}
:root:not([data-farbe="sw"]) .kopfbild{background:transparent;border-bottom:0}
:root:not([data-farbe="sw"]) .kopfbild-text{background:rgba(6,27,77,.80);border-radius:var(--radius) var(--radius) 0 0;margin-bottom:0;padding:34px 28px 32px;display:flex;flex-direction:column;justify-content:center}
:root:not([data-farbe="sw"]) .kt-titel,:root:not([data-farbe="sw"]) .kt-region,:root:not([data-farbe="sw"]) .kt-text{color:#fff}
:root:not([data-farbe="sw"]) .kt-linie{background:var(--lila-zart)}
:root:not([data-farbe="sw"]) .kt-leitsatz{color:#e3d4f5}
:root:not([data-farbe="sw"]) .kt-rechtsform{color:rgba(255,255,255,.86)}
:root:not([data-farbe="sw"]) .kopfbild-text .knopf-haupt{background:#fff;color:var(--dunkelblau);border-color:#fff}
:root:not([data-farbe="sw"]) .kopfbild-text .knopf-neben{background:transparent;color:#fff;border-color:rgba(255,255,255,.85)}
:root:not([data-farbe="sw"]) .kopfbild-text a:focus-visible{color:var(--fokus-text)}
:root:not([data-farbe="sw"]) .abschnitt{padding:26px 0 0}
:root:not([data-farbe="sw"]) .abschnitt>.huelle{background:rgba(255,255,255,.97);border-radius:var(--radius);padding:30px 34px;box-shadow:var(--schatten)}

/* ---------- 11 Darstellung „Schwarz-Weiß“ ---------- */
:root[data-farbe="sw"]{
  --dunkelblau:#000;--mittelblau:#000;--stahlblau:#000;--lila:#000;--lila-zart:#fff;
  --seite:#fff;--karte:#fff;--hell:#f2f2f2;--lila-hell:#f2f2f2;
  --text:#111;--grau:#444;--rand:#c8c8c8;--rand-stark:#555;
  --titel:#000;--link:#000;--akzent:#000;
  --nav:#000;--nav-text:#fff;--nav-aktiv:#333;--leiste:#000;--leiste-text:#fff;
  --knopf:#000;--knopf-text:#fff;--knopf-rand:#000;
  --entsch-bg:#f2f2f2;--entsch-rand:#000;--entsch-text:#111;
  --petrol:#000;--petrol-text:#000;--violett:#000;--violett-text:#000;--orange:#000;--orange-text:#000;--gruen:#000;--gruen-text:#000;
  --himmel-oben:#f2f2f2;--himmel-unten:#f2f2f2;--wasser:#000;--wasser-linie:#555;--wasser-text:#fff;
  --foto-grund:#000}
:root[data-farbe="sw"] img{filter:grayscale(1)}
:root[data-farbe="sw"] .marke{--z-land:#000;--z-stadt:#8a8a8a}
:root[data-farbe="sw"] .menue li.menue-unterstuetzen a{background:#fff;color:#000;border-color:#fff}

/* ---------- 12 Umbruch ---------- */
@media (max-width:1100px){
  .rahmen{grid-template-columns:240px minmax(0,1fr)}
  .rahmen>.kasten{grid-column:2}
  .rahmen.ohne-nav{grid-template-columns:minmax(0,1fr)}
  .rahmen.ohne-nav>.kasten{grid-column:auto}
  .themen-kacheln,.zeitleiste,.wegweiser{grid-template-columns:repeat(2,minmax(0,1fr))}
  .zeitleiste>li:nth-child(2)::after{display:none}
  .start-unten{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:1000px){
  .kopfbild-raster{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto auto auto;padding-top:28px}
  .kopfbild-text{grid-column:1/-1;grid-row:1;padding-bottom:22px}
  .ort{grid-row:2/span 2}
  .ort-hh{grid-column:1}
  .ort-sh{grid-column:2}
  .wasser{grid-row:3}
  .ort-bild{height:auto;max-height:none;aspect-ratio:4/5;width:100%;max-width:422px;margin-inline:auto}
  :root:not([data-farbe="sw"]) .kopfbild-text{border-radius:var(--radius);margin-bottom:16px}
}
@media (max-width:760px){
  html.js .leiste .leiste-auf{display:inline-flex}
  html.js .leiste:not(.offen) .optionen{display:none}
  .leiste .optionen{flex-basis:100%;padding:2px 0 4px}
  .suche{margin-left:0;flex:1 1 100%}
  .suche input{flex:1 1 auto;width:auto}
  .marke-zeichen{height:46px}
  .marke-name{font-size:1.3rem}
  .rahmen{grid-template-columns:minmax(0,1fr)}
  .rahmen>.kasten{grid-column:auto}
  .themen-kacheln,.projekt-karten,.zwei-spalten,.inhalt .themen-kacheln{grid-template-columns:minmax(0,1fr)}
  .fuss .huelle{grid-template-columns:minmax(0,1fr)}
  html.js .menue-knopf{display:flex;width:100%;justify-content:space-between;font:inherit;font-size:1.1rem;font-weight:700;min-height:48px;padding:10px 16px;background:var(--nav);color:var(--nav-text);border:0;cursor:pointer}
  html.js .menue ul{display:none}
  html.js .menue.offen ul{display:flex}
  .menue ul{flex-direction:column}
  .menue li{display:block}
  .menue a{border-bottom:0;border-top:1px solid rgba(255,255,255,.3)}
  .menue a[aria-current]{border-left:6px solid var(--lila-zart);border-bottom:0}
  .menue li.menue-unterstuetzen{margin:8px 0 12px;padding:0}
  .menue li.menue-unterstuetzen a{justify-content:center}
  .inhalt h1{font-size:1.75rem}
  .unternav{border-top:0}
  .unternav summary{display:list-item;min-height:48px;padding:10px 14px;font-weight:700;cursor:pointer;background:var(--hell);color:var(--text);border:2px solid var(--rand-stark);border-radius:6px}
  .unternav details[open] summary{margin-bottom:8px}
  .suche-gross input{flex:1 1 10em;width:auto}
  .abschnitt{padding-top:40px}
  .kachel{padding:18px}
}
@media (max-width:640px){
  :root:not([data-farbe="sw"]) .abschnitt>.huelle,:root:not([data-farbe="sw"]) main>.huelle{padding:20px 16px;margin-left:8px;margin-right:8px}
}
@media (max-width:560px){
  .ort-vor{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .zeitleiste,.wegweiser{grid-template-columns:minmax(0,1fr)}
  .zeitleiste>li{padding-top:0;padding-left:64px;padding-bottom:8px}
  .zeitleiste>li::after{top:52px;bottom:-16px;left:23px;right:auto;width:3px;height:auto;display:block}
  .zeitleiste>li:nth-child(2)::after{display:block}
  .zeitleiste>li:last-child::after{display:none}
  .thema{flex-direction:column}
}

/* ---------- 13 Sonderfälle ---------- */
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}.kachel:hover{transform:none}}
@media (forced-colors:active){.kachel:focus-within{outline:3px solid CanvasText}.ort-name{forced-color-adjust:auto}}
@media print{.leiste,.menue,.suche,.unternav,.kasten,.fuss,.sprung{display:none}.rahmen{display:block}}