/* ============================================================
   REPUBLIK DIABETIEN — Amtliches Erscheinungsbild
   basis.css — Farben, Typografie, Seitenrahmen und Navigation
   ============================================================ */
:root{
  --behoerdenblau:#0c2340;
  --behoerdenblau-2:#153b64;
  --koenigsblau:#1b5fa8;
  --koenigsblau-dunkel:#124a81;
  --koenigsblau-hell:#e8f0f8;
  --flag-cyan:#00ffff;
  --flag-gelb:#ffc800;
  --flag-rot:#ff0000;

  --tinte:var(--behoerdenblau);
  --tinte-2:#1a3a60;
  --insulin:var(--koenigsblau);
  --insulin-dunkel:var(--koenigsblau-dunkel);
  --insulin-hell:var(--koenigsblau-hell);
  --korridor:#287258;
  --korridor-hell:#e6f0eb;
  --hoch:#a66f16;
  --hoch-hell:#f8efdc;
  --tief:#a33a31;
  --tief-hell:#f8e9e7;
  --papier:#f3f5f7;
  --papier-warm:#f8f7f3;
  --karte:#ffffff;
  --linie:#ced8e5;
  --linie-stark:#748698;
  --silber:#5d6d7c;
  --gold:var(--flag-gelb);
  --meer:#dce8f2;

  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Times New Roman",serif;
  --sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Mono","Roboto Mono",Consolas,"Liberation Mono",monospace;

  --breite:1240px;
  --rand:clamp(18px,4vw,48px);
  --schatten-klein:0 2px 7px rgba(12,35,64,.045);
  --schatten:0 10px 28px rgba(12,35,64,.09);
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth;scroll-padding-top:74px}
body{
  margin:0;
  background:var(--papier);
  color:var(--tinte);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit}
button,a,input,select,textarea{-webkit-tap-highlight-color:rgba(27,95,168,.16)}
main,section,article,aside{min-width:0}
.bundesflagge{width:100%;height:auto}
a{color:var(--insulin);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--tinte)}
:focus-visible{outline:3px solid var(--koenigsblau-dunkel);outline-offset:3px;box-shadow:0 0 0 2px #fff}
.hauptnav :focus-visible,.start-hero :focus-visible,.fussbereich :focus-visible{outline-color:var(--gold);box-shadow:none}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.12;margin:0 0 .55em;text-wrap:balance}
h2{letter-spacing:-.025em}
h3{letter-spacing:-.012em}
p{margin:0 0 1em;overflow-wrap:break-word}
hr{border:0;border-top:1px solid var(--linie);margin:32px 0}
::selection{background:#d7e5f7;color:var(--tinte)}

.sprungmarke{
  position:fixed;left:18px;top:12px;z-index:100;
  transform:translateY(-150%);background:#fff;color:var(--tinte);
  border:2px solid var(--gold);padding:9px 14px;font-weight:700;text-decoration:none;
}
.sprungmarke:focus{transform:none}
.nur-bildschirmleser{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* --- Auszeichnungen --- */
.eyebrow{
  display:block;margin:0 0 11px;color:var(--silber);
  font-family:var(--mono);font-size:.68rem;font-weight:700;letter-spacing:.16em;
  line-height:1.45;text-transform:uppercase;
}
.zahl{font-family:var(--mono);font-variant-numeric:tabular-nums}
.klein{font-size:.86rem;line-height:1.6;color:var(--silber)}

/* --- Signatur: Zielkorridor-Regel --- */
.korridor-regel{
  position:relative;height:24px;margin:42px 0;border-top:1px solid var(--linie);
  border-bottom:1px solid var(--linie);overflow:hidden;
  background:repeating-linear-gradient(90deg,transparent 0 38px,rgba(27,95,168,.08) 38px 39px);
}
.korridor-regel::after{
  content:"";position:absolute;left:-2%;right:-2%;top:50%;height:1px;
  background:var(--insulin);opacity:.5;transform:rotate(-.35deg);
}

/* ============ Staatsleiste ============ */
.staatsleiste{
  background:var(--behoerdenblau);color:#dce6ef;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;
}
.staatsleiste::after{
  content:"";display:block;height:3px;
  background:linear-gradient(90deg,var(--flag-rot) 0 33.333%,var(--flag-cyan) 33.333% 66.666%,var(--flag-gelb) 66.666%);
}
.staatsleiste .innen{
  max-width:var(--breite);margin:0 auto;padding:8px var(--rand);
  display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap;
}
.staatsleiste .amt{display:inline-flex;align-items:center;gap:8px;text-transform:uppercase;opacity:.82}
.staatsleiste .amt:first-child::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--flag-cyan);
  box-shadow:0 0 0 3px rgba(0,255,255,.18);
}

/* ============ Kopf / Wappen ============ */
.kopf{background:rgba(255,255,255,.96);border-bottom:1px solid var(--linie)}
.kopf .innen{
  max-width:var(--breite);margin:0 auto;padding:20px var(--rand);
  display:flex;gap:19px;align-items:center;
}
.markenblock{display:flex;min-width:0;gap:18px;align-items:center;color:var(--tinte);text-decoration:none}
.markenblock:hover{color:var(--tinte)}
.wappen{width:58px;height:auto;flex:0 0 58px;object-fit:contain}
.kopf h1,.kopf .markentitel{font-family:var(--serif);font-size:clamp(1.35rem,3vw,1.9rem);font-weight:600;line-height:1.12;margin:0;letter-spacing:-.015em}
.kopf .unterzeile{
  margin-top:4px;color:var(--silber);font-family:var(--mono);font-size:.66rem;
  font-weight:600;letter-spacing:.17em;text-transform:uppercase;
}
.kopfwerkzeuge{
  display:flex;align-items:center;justify-content:flex-end;gap:22px;
  margin-left:auto;text-align:right;
}
.kopf .motto{
  padding-left:26px;border-left:1px solid var(--linie);
  color:var(--tinte-2);font-family:var(--serif);font-size:1.02rem;font-style:italic;text-align:right;
}
.kopf .motto small{
  display:block;margin-top:5px;color:var(--silber);font-family:var(--mono);
  font-size:.58rem;font-style:normal;letter-spacing:.15em;text-transform:uppercase;
}

/* Dezente Sprachwahl: geschlossen nur Kürzel und Pfeil. */
.sprachwahl{position:relative;flex:0 0 auto;text-align:right}
.sprachwahl details{position:relative}
.sprachwahl summary{
  display:inline-flex;min-width:44px;min-height:44px;align-items:center;justify-content:flex-end;
  padding:8px 0 8px 10px;border:0;background:transparent;color:var(--tinte-2);cursor:pointer;
  font-family:var(--mono);font-size:.72rem;font-weight:750;letter-spacing:.08em;line-height:1;
  list-style:none;user-select:none;
}
.sprachwahl summary::-webkit-details-marker{display:none}
.sprachwahl summary::marker{content:""}
.sprachwahl summary:hover{color:var(--insulin);text-decoration:underline;text-underline-offset:4px}
.sprachwahl__kurz{display:inline-flex;align-items:center}
.sprachwahl__pfeil{
  display:inline-block;width:.42rem;height:.42rem;margin:-.16rem 0 0 .42rem;
  border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:rotate(45deg);
}
.sprachwahl__menue{
  position:absolute;z-index:65;top:calc(100% + 4px);right:0;min-width:max-content;
  margin:0;padding:5px;list-style:none;background:#fff;border:1px solid var(--linie);
  box-shadow:var(--schatten-klein);text-align:right;
}
.sprachwahl__menue li{margin:0;padding:0}
.sprachwahl__menue button{
  display:flex;width:100%;min-height:44px;align-items:center;justify-content:flex-end;
  padding:8px 10px;border:0;background:transparent;color:var(--tinte-2);cursor:pointer;
  font:650 .75rem/1.25 var(--sans);text-align:right;white-space:nowrap;
}
.sprachwahl__menue button:hover{background:var(--insulin-hell);color:var(--insulin-dunkel)}
.sprachwahl__menue button[aria-current="true"]{color:var(--tinte);font-weight:800}

/* ============ Navigation ============ */
.hauptnav{
  position:sticky;top:0;z-index:40;background:rgba(12,35,64,.98);
  border-bottom:3px solid var(--koenigsblau);box-shadow:0 3px 10px rgba(12,35,64,.1);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
}
.hauptnav .innen{
  max-width:var(--breite);margin:0 auto;padding:0 var(--rand);display:flex;
  gap:0;flex-wrap:wrap;
}
.hauptnav a{
  position:relative;display:flex;min-height:48px;align-items:center;flex:0 0 auto;padding:12px 12px;color:#d8e3ed;
  font-size:.8rem;font-weight:650;letter-spacing:.005em;text-decoration:none;
  transition:background .16s,color .16s;
}
.hauptnav a::after{
  content:"";position:absolute;left:14px;right:14px;bottom:0;height:3px;
  background:transparent;transform:scaleX(.35);transition:transform .16s,background .16s;
}
.hauptnav a:hover{background:rgba(255,255,255,.1);color:#fff}
.hauptnav a[aria-current="page"]{color:#fff;background:var(--koenigsblau)}
.hauptnav a[aria-current="page"]::after{background:var(--gold);transform:scaleX(1)}
.nav-schalter{
  display:flex;min-height:48px;align-items:center;justify-content:space-between;gap:16px;
  width:calc(100% - 2 * var(--rand));margin:0 var(--rand);padding:10px 0;
  background:transparent;border:0;color:#fff;cursor:pointer;font-size:.88rem;font-weight:700;text-align:left;
}
.nav-schalter__symbol{font-size:1.35rem;font-weight:400;line-height:1}

/* Einordnung der Fassung steht an derselben Lesekante wie der Inhalt. */
.leicht-hinweis{background:var(--insulin-hell);border-bottom:1px solid #c7d7ea;color:var(--tinte-2);font-size:.88rem;line-height:1.6}
.leicht-hinweis .innen{max-width:var(--breite);margin:0 auto;padding:12px var(--rand)}

/* ============ Grundraster ============ */
main{max-width:var(--breite);margin:0 auto;padding:0 var(--rand) 76px}
.seite{padding-top:30px;animation:auf .34s ease both}
@keyframes auf{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.seitenkopf{
  position:relative;isolation:isolate;overflow:hidden;margin-bottom:32px;padding:clamp(28px,4.2vw,44px);
  color:#fff;background:linear-gradient(125deg,var(--behoerdenblau) 0%,var(--behoerdenblau-2) 68%,var(--koenigsblau) 145%);
  border:1px solid rgba(12,35,64,.3);box-shadow:var(--schatten-klein);
}
.seitenkopf::after{
  content:"";position:absolute;z-index:-1;right:-90px;top:-130px;width:360px;height:360px;
  border:1px solid rgba(255,255,255,.12);border-radius:50%;
  box-shadow:0 0 0 54px rgba(255,255,255,.035),0 0 0 108px rgba(255,255,255,.025);
}
.seitenkopf .eyebrow{color:#d8e3ed}
.seitenkopf h1,.seitenkopf h2{max-width:22ch;margin-bottom:14px;font-size:clamp(2rem,4vw,3.1rem);color:#fff;overflow-wrap:break-word;letter-spacing:-.025em}
.seitenkopf .lead{max-width:70ch;margin:0;color:#d8e3ed;font-size:clamp(1rem,1.7vw,1.14rem);line-height:1.65}

.raster{display:grid;gap:22px}
.raster>*,.split>*,.start-inhalt>*,.start-hero>*{min-width:0}
.r2{grid-template-columns:repeat(2,minmax(0,1fr))}
.r3{grid-template-columns:repeat(3,minmax(0,1fr))}
.r4{grid-template-columns:repeat(4,minmax(0,1fr))}
.split{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(280px,1fr);gap:34px;align-items:start}

/* ============ Startseite ============ */
.startseite{padding-top:24px}
.start-hero{
  position:relative;isolation:isolate;overflow:hidden;display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(300px,1fr);min-height:420px;
  background:linear-gradient(130deg,var(--behoerdenblau) 0%,var(--behoerdenblau-2) 62%,var(--koenigsblau) 125%);
  color:#fff;border:1px solid rgba(12,35,64,.32);box-shadow:var(--schatten);
}
.start-hero::before{
  content:"";position:absolute;z-index:-1;inset:auto -12% -70% 28%;height:110%;
  border:1px solid rgba(255,255,255,.09);border-radius:50%;
  box-shadow:0 0 0 60px rgba(255,255,255,.025),0 0 0 120px rgba(255,255,255,.018);
}
.start-hero__text{display:flex;flex-direction:column;justify-content:center;padding:clamp(32px,4.4vw,56px)}
.start-hero .eyebrow{color:#d8e3ed}
.start-hero h1,.start-hero h2{max-width:16ch;margin-bottom:22px;color:#fff;font-size:clamp(2.65rem,4.4vw,3.8rem);line-height:1.04;letter-spacing:-.035em;overflow-wrap:break-word}
.start-hero .lead{max-width:53ch;margin:0;color:#dce6ef;font-size:clamp(1rem,1.5vw,1.08rem);line-height:1.7}
.aktionsleiste{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.start-hero__zeichen{
  display:flex;flex-direction:column;justify-content:center;gap:24px;margin:28px 28px 28px 0;padding:28px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.15);
}
.start-hero__zeichen .bundesflagge{border:1px solid rgba(255,255,255,.33);box-shadow:0 16px 35px rgba(0,0,0,.2)}
.start-hero__zeichen .eyebrow{margin-bottom:8px;font-size:.62rem;letter-spacing:.12em}
.start-hero__zeichen .losung{margin:0 0 9px;color:#fff;font-family:var(--serif);font-size:clamp(1.45rem,2.1vw,1.85rem);line-height:1.2}
.start-hero__zeichen .zeichenhinweis{margin:0;color:#d8e3ed;font-size:.83rem;line-height:1.55}
.flaggenfigur{margin:0}
.flaggenfigur .bundesflagge{border:1px solid var(--linie-stark)}
.flaggenfigur figcaption{margin-top:10px}
.flaggenaktion{margin:17px 0 0}
.flaggendatei{margin:8px 0 0}
.hero-fakten{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;border:1px solid var(--linie);border-top:0;background:#fff;box-shadow:var(--schatten-klein)}
.hero-fakten div{min-width:0;padding:18px 22px;border-right:1px solid var(--linie)}
.hero-fakten div:last-child{border-right:0}
.hero-fakten dt{margin:0 0 4px;color:var(--silber);font-family:var(--mono);font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.hero-fakten dd{margin:0;color:var(--tinte);font-family:var(--serif);font-size:1.05rem;font-weight:600;overflow-wrap:break-word}
.start-abschnitt{margin-top:52px;scroll-margin-top:80px}
.abschnittskopf{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:22px}
.abschnittskopf h3{margin:0;font-size:clamp(1.65rem,3vw,2.35rem)}
.abschnittskopf p{max-width:54ch;margin:0;color:var(--silber);font-size:.92rem}
.start-inhalt{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(290px,1fr);gap:28px;margin-top:52px;align-items:start}
.start-inhalt__meldungen>h3,.start-inhalt aside>h3{font-size:1.65rem}
.start-inhalt__datenhinweis{margin:15px 0 0}
.start-inhalt__notruf{margin-top:20px}

/* ============ Fuß ============ */
.fussbereich{
  position:relative;overflow:hidden;margin-top:40px;padding:54px var(--rand) 28px;
  background:var(--behoerdenblau);color:#c4d0dd;font-size:.84rem;
}
.fussbereich::after{
  content:"";position:absolute;right:-180px;bottom:-260px;width:520px;height:520px;
  border:1px solid rgba(255,255,255,.05);border-radius:50%;
  box-shadow:0 0 0 70px rgba(255,255,255,.018),0 0 0 140px rgba(255,255,255,.012);
}
.fussbereich .innen{position:relative;z-index:1;max-width:var(--breite);margin:0 auto}
.fussbereich h3{margin-bottom:13px;color:#fff;font-family:var(--mono);font-size:.67rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase}
.fussbereich a{color:#c5d2df;text-decoration:none}
.fussbereich li a{display:inline-block;padding:5px 0;overflow-wrap:break-word}
.fussbereich a:hover{color:#fff;text-decoration:underline}
.fussbereich ul{list-style:none;padding:0;margin:0}
.fussbereich li{padding:4px 0;line-height:1.55}
.fussleiste{
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-top:38px;padding-top:20px;
  border-top:1px solid rgba(255,255,255,.14);color:#a9b8c8;font-family:var(--mono);
  font-size:.64rem;letter-spacing:.09em;
}

/* ============ Anpassungen ============ */
@media(max-width:1020px){
  .start-hero{grid-template-columns:minmax(0,1.2fr) minmax(260px,.8fr);min-height:0}
  .start-hero__text{padding:34px}
  .start-hero__zeichen{margin:22px 22px 22px 0;padding:20px}
  .start-inhalt{grid-template-columns:1fr}
  .r4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
  .hauptnav .innen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;padding-top:6px;padding-bottom:10px}
  .hauptnav a{white-space:normal;overflow-wrap:break-word}
  .hauptnav.nav-bereit.nav-mobil:not(.nav-offen) #hauptnavigation{display:none}
  .hauptnav.nav-offen{max-height:75vh;max-height:75dvh;overflow-y:auto}
  .r3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split{grid-template-columns:1fr}
  .start-hero{grid-template-columns:1fr;min-height:0}
  .start-hero__zeichen{display:grid;grid-template-columns:minmax(180px,.85fr) minmax(0,1fr);gap:26px;align-items:center;margin:0 34px 28px;padding:22px}
  .start-hero__zeichen .bundesflagge{max-width:270px}
}
@media(max-width:700px){
  :root{--rand:18px}
  body{font-size:15.5px}
  .staatsleiste .amt:last-child{display:none}
  .kopf .innen{gap:10px;padding-top:15px;padding-bottom:15px}
  .markenblock{gap:12px}
  .wappen{width:48px;flex-basis:48px}
  .kopf .motto{display:none}
  .kopfwerkzeuge{gap:0}
  .hauptnav .innen{margin:0}
  .hauptnav a{padding:12px 12px}
  main{padding-bottom:52px}
  .seite{padding-top:18px}
  .seitenkopf{margin-left:-18px;margin-right:-18px;padding:30px 18px;border-left:0;border-right:0}
  .seitenkopf h1,.seitenkopf h2{font-size:2.25rem}
  .startseite{padding-top:0}
  .start-hero{margin:0 -18px;border-left:0;border-right:0}
  .start-hero__text{padding:34px 18px 28px}
  .start-hero h1,.start-hero h2{font-size:clamp(2.35rem,9.5vw,3.25rem);max-width:17ch;margin-bottom:18px}
  .start-hero__zeichen{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:18px;margin:0 18px 22px;padding:18px}
  .start-hero__zeichen .losung{font-size:1.35rem}
  .start-hero__zeichen .zeichenhinweis{font-size:.76rem}
  .hero-fakten{grid-template-columns:repeat(2,minmax(0,1fr));margin:0 -18px;border-left:0;border-right:0}
  .hero-fakten div:nth-child(2){border-right:0}
  .hero-fakten div:nth-child(-n+2){border-bottom:1px solid var(--linie)}
  .start-abschnitt,.start-inhalt{margin-top:38px}
  .abschnittskopf{display:block}
  .abschnittskopf p{margin-top:9px}
  .r2,.r3,.r4{grid-template-columns:1fr}
  .fussbereich{margin-top:20px;padding-top:42px}
  .fussbereich li{padding:0}
  .fussbereich li a{min-height:44px;padding:11px 0}
}
@media(max-width:430px){
  .kopf h1,.kopf .markentitel{font-size:1.25rem}
  .kopf .unterzeile{font-size:.58rem;letter-spacing:.06em}
  .wappen{width:40px;flex-basis:40px}
  .hero-fakten div{padding:15px 18px}
  .hero-fakten dd{font-size:.98rem}
  .start-hero__zeichen{padding:15px;gap:14px}
  .start-hero__zeichen .eyebrow{font-size:.56rem;letter-spacing:.06em}
  .start-hero__zeichen .losung{font-size:1.18rem}
  .aktionsleiste{gap:10px;margin-top:24px}
  .aktionsleiste .knopf{flex:1;padding:12px 14px;font-size:.86rem;text-align:center}
}

/* ============ Druck und Bewegung ============ */
@media print{
  .sprungmarke,.staatsleiste,.hauptnav,.fussbereich,.knopf{display:none !important}
  body{background:#fff}
  main{max-width:none;padding:0}
  .seite{animation:none}
  .seitenkopf,.start-hero{color:#000;background:#fff;border:1px solid #777;box-shadow:none}
  .seitenkopf h1,.seitenkopf h2,.start-hero h1,.start-hero h2{color:#000}
  .seitenkopf .lead,.start-hero .lead{color:#222}
  .karte,.modal{border:1px solid #999;box-shadow:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
  html{scroll-behavior:auto}
}