/* ============================================================
   Stile der Platzhalterseite. Liegt seit der englischen Fassung in einer
   eigenen Datei: zwei Sprachfassungen mit je einer eigenen Kopie derselben
   90 Zeilen CSS laufen unweigerlich auseinander.
   ============================================================ */

/* Selbst gehostete Schriften – keine Verbindung zu Google Fonts (DSGVO). */
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-stretch:100%;font-display:swap;src:url(/fonts/archivo-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-stretch:100%;font-display:swap;src:url(/fonts/archivo-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/inter-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/inter-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/inter-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/inter-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --grund:#F1F4F7; --karte:#FFFFFF; --tinte:#0E2A47; --tinte-leise:#566A7E;
  --linie:#DDE4EB; --akzent:#2F7CB8; --akzent-hell:#DCEAF6; --marke:#0E2A47;
}
@media (prefers-color-scheme:dark){
  :root{
    --grund:#0B1B2D; --karte:#12293F; --tinte:#EAF1F8; --tinte-leise:#9FB3C7;
    --linie:#1F3F5C; --akzent:#78B4E5; --akzent-hell:#16324C; --marke:#EAF1F8;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--grund); color:var(--tinte);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column; min-height:100vh;
}
.huelle{width:100%; max-width:900px; margin:0 auto; padding:56px 24px 44px; flex:1}

.marke{display:flex; align-items:center; gap:12px; margin-bottom:56px}
.marke svg{width:38px; height:38px; display:block; border-radius:9px}
.marke b{font-family:'Archivo',sans-serif; font-weight:700; font-size:17px; letter-spacing:-.01em; color:var(--marke)}

.status{
  display:inline-flex; align-items:center; gap:9px; margin-bottom:22px;
  padding:5px 13px 5px 11px; border-radius:999px;
  background:var(--akzent-hell); color:var(--akzent);
  font-size:13.5px; font-weight:500; letter-spacing:.01em;
}
.punkt{width:7px; height:7px; border-radius:50%; background:currentColor; flex:none}

h1{
  font-family:'Archivo',sans-serif; font-weight:700;
  font-size:clamp(31px,6.2vw,50px); line-height:1.14; letter-spacing:-.022em;
  margin:0 0 20px;
}
.lead{font-size:19px; line-height:1.6; color:var(--tinte-leise); margin:0 0 40px; max-width:56ch}

.karte{
  background:var(--karte); border:1px solid var(--linie);
  border-radius:14px; padding:8px 26px; margin:0 0 36px;
}
.karte dl{margin:0}
.karte div{padding:20px 0; border-top:1px solid var(--linie)}
.karte div:first-child{border-top:0}
.karte dt{font-family:'Archivo',sans-serif; font-weight:700; font-size:16px; letter-spacing:-.008em; margin-bottom:3px}
.karte dd{margin:0; font-size:15.5px; line-height:1.55; color:var(--tinte-leise)}

h2{font-family:'Archivo',sans-serif; font-weight:700; font-size:16px; letter-spacing:-.008em; margin:0 0 8px}
.hinweis{font-size:15.5px; color:var(--tinte-leise); margin:0 0 16px; max-width:56ch}
.quellen{display:flex; flex-wrap:wrap; gap:10px; margin:0; padding:0; list-style:none}
.quellen a{
  display:inline-block; padding:9px 15px;
  border:1px solid var(--linie); border-radius:9px; background:var(--karte);
  color:var(--tinte); text-decoration:none; font-size:15px; font-weight:500;
  transition:border-color .15s ease, color .15s ease;
}
.quellen a:hover{border-color:var(--akzent); color:var(--akzent)}
.quellen a:focus-visible{outline:2px solid var(--akzent); outline-offset:2px}
.quellen span{color:var(--tinte-leise); font-weight:400}

/* Rückmeldung. Bewusst ein mailto und kein Formular mit Absendeknopf:
   diese Seite führt kein JavaScript aus und darf nach ihrer eigenen CSP
   nichts nach außen senden (script-src 'none', form-action 'none').
   Die Nachricht geht direkt aus dem Mailprogramm an das Postfach – die
   Seite sieht die Adresse nie, und die Zusage in der Fußzeile bleibt wahr. */
.kontakt{margin-top:40px}
.knopfzeile{display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin:0}
.knopf{
  display:inline-block; padding:11px 20px;
  border-radius:9px; background:var(--tinte); color:var(--grund);
  text-decoration:none; font-family:'Archivo',sans-serif; font-weight:700;
  font-size:15px; letter-spacing:-.005em;
  transition:opacity .15s ease;
}
.knopf:hover{opacity:.86}
.knopf:focus-visible{outline:2px solid var(--akzent); outline-offset:2px}
/* Die Adresse zusätzlich im Klartext: wer kein Mailprogramm eingerichtet
   hat, kommt über den Knopf nicht weiter und kopiert sie stattdessen. */
.adresse{font-size:15px; color:var(--tinte-leise); word-break:break-all}

footer{
  border-top:1px solid var(--linie); margin-top:12px;
  padding:22px 24px 30px; font-size:13.5px; line-height:1.6; color:var(--tinte-leise);
}
footer p{margin:0 auto; max-width:852px}
footer b{font-weight:500; color:var(--tinte)}

@media (max-width:520px){
  .huelle{padding:34px 20px 32px}
  .marke{margin-bottom:40px}
  body{font-size:16px}
  .lead{font-size:17.5px}
}
/* Sprachumschalter. Ein gewöhnlicher Link auf die andere Fassung – diese
   Seite führt kein JavaScript aus (script-src 'none'), eine Umschaltung
   im Browser gäbe es also gar nicht. Zwei echte Adressen sind ohnehin das,
   was Suchmaschinen über hreflang erwarten. */
.sprache{
  margin-left:auto; flex:none;
  padding:5px 11px; border:1px solid var(--linie); border-radius:8px;
  background:var(--karte); color:var(--tinte-leise);
  font-family:'Archivo',sans-serif; font-weight:700; font-size:12.5px;
  letter-spacing:.06em; text-decoration:none;
  transition:border-color .15s ease, color .15s ease;
}
.sprache:hover{border-color:var(--akzent); color:var(--akzent)}
.sprache:focus-visible{outline:2px solid var(--akzent); outline-offset:2px}