/* Gemeinsame Gestaltung für Impressum und Datenschutzerklärung.
   Übernimmt die Farben und die Schrift der Hauptseite, kommt aber ohne
   Hero und ohne Bewegung aus. Rechtstexte werden gelesen, nicht bestaunt. */

:root{
  --navy:#1a2b6d;
  --navy-tief:#0b1330;
  --luft:#f4f6fc;
  --rot:#d41317;
  --rot-tief:#a80f13;
  --grau:#f2f2f2;
  --text:#1e222b;
  --weich:#5a6070;
  --linie:#dee1ea;
  --zart:#ecEEF5;
  --breite:1300px;
  --kopf:84px;
  --e:cubic-bezier(.22,.61,.36,1);
}

/* Schrift lokal, siehe Begründung in index.html */
@font-face{font-family:Spinnaker;font-style:normal;font-weight:400;font-display:swap;
  src:url(schrift/spinnaker-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:Spinnaker;font-style:normal;font-weight:400;font-display:swap;
  src:url(schrift/spinnaker-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}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--kopf) + 20px)}
body{background:#fff;color:var(--text);
  font:400 17px/1.75 "Helvetica Neue",Helvetica,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:Spinnaker,"Helvetica Neue",sans-serif;font-weight:400;color:var(--navy);line-height:1.2}
a{color:inherit}
::selection{background:var(--navy);color:#fff}
:focus-visible{outline:3px solid var(--rot);outline-offset:3px}

.huelle{max-width:var(--breite);margin:0 auto;padding:0 44px}
@media(max-width:720px){.huelle{padding:0 22px}}
.lesebreite{max-width:820px}

/* ══════ Kopfleiste, immer fest ══════ */
header{position:sticky;top:0;z-index:50;height:var(--kopf);display:flex;align-items:center;
  background:var(--navy);box-shadow:0 8px 40px rgba(11,19,48,.09)}
header .huelle{display:flex;align-items:center;justify-content:space-between;width:100%;gap:26px}
.marke{display:flex;align-items:center;gap:14px;text-decoration:none;white-space:nowrap}
.marke .zeichen{width:38px;height:38px;flex:none;display:grid;place-items:center;
  background:var(--rot);color:#fff;font-family:Spinnaker,sans-serif;font-size:19px;
  transition:transform .4s var(--e)}
.marke:hover .zeichen{transform:rotate(-90deg)}
.marke .wort{font-family:Spinnaker,sans-serif;font-size:25px;letter-spacing:.28em;color:#fff}
header nav{display:flex;gap:28px;align-items:center}
header nav a{font-size:14.5px;text-decoration:none;color:rgba(255,255,255,.88);
  position:relative;padding:9px 0;transition:color .3s}
header nav a::after{content:"";position:absolute;left:0;bottom:2px;width:0;height:2px;
  background:var(--rot);transition:width .34s var(--e)}
header nav a:hover::after{width:100%}
@media(max-width:600px){
  .marke .wort{font-size:20px;letter-spacing:.2em}
  .marke .zeichen{width:34px;height:34px;font-size:17px}
  header nav a{font-size:13.5px}
}

/* ══════ Titelblock ══════ */
.titel{background:var(--luft);padding:72px 0 64px;border-bottom:1px solid var(--linie)}
.augenbraue{font-size:12px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--rot);margin-bottom:22px;display:flex;align-items:center;gap:16px}
.augenbraue::before{content:"";width:40px;height:2px;background:var(--rot);flex:none}
.titel h1{font-size:clamp(33px,4.1vw,50px);margin-bottom:16px}
.titel p{color:var(--weich);font-size:17.5px;max-width:64ch}

/* ══════ Fliesstext ══════ */
main{padding:76px 0 96px}
main h2{font-size:26px;margin:52px 0 18px;padding-top:26px;border-top:1px solid var(--linie)}
main h2:first-of-type{margin-top:0;padding-top:0;border-top:none}
main h3{font-size:19px;margin:30px 0 10px;color:var(--text)}
main p{margin-bottom:19px;color:var(--weich)}
main ul{list-style:none;margin:0 0 19px}
main li{padding:9px 0 9px 28px;position:relative;color:var(--weich)}
main li::before{content:"";position:absolute;left:0;top:20px;width:13px;height:2px;background:var(--rot)}
main a[href^="mailto"],main a[href^="http"]{color:var(--navy);text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px}
main strong{color:var(--text);font-weight:600}

/* Angabenblock, für Adresse und Kontakt */
.angaben{background:var(--grau);padding:32px 34px;margin-bottom:26px}
.angaben p{margin-bottom:6px;color:var(--text)}
.angaben p:last-child{margin-bottom:0}

/* ══════ Platzhalter, unübersehbar ══════
   Alles, was vor dem Livegang noch eingesetzt werden muss, trägt diese
   Auszeichnung. Wer die Seite ansieht, kann keinen davon übersehen. */
.platzhalter{background:#fff3c4;color:#7a5a00;border:1.5px dashed #c79a00;
  padding:2px 9px;font-size:14.5px;font-weight:600;
  display:inline;letter-spacing:.02em;box-decoration-break:clone;
  -webkit-box-decoration-break:clone}

/* ══════ Entwurfshinweis ══════ */
.entwurf{background:#fff;border:2px solid var(--rot);padding:28px 32px;margin-bottom:48px}
/* Nur das erste strong ist die Ueberschrift des Kastens. Ohne die Einschraenkung
   werden auch Hervorhebungen im Fliesstext zu roten Bloecken und zerreissen den Satz. */
.entwurf > strong:first-child{display:block;font-family:Spinnaker,sans-serif;font-size:19px;
  color:var(--rot);margin-bottom:10px;font-weight:400}
.entwurf p strong{color:var(--text);font-weight:600}
.entwurf p{margin-bottom:0;font-size:16px;color:var(--text)}

.stand{margin-top:56px;padding-top:26px;border-top:1px solid var(--linie);
  font-size:14.5px;color:var(--weich)}

/* ══════ Fusszeile ══════ */
footer{padding:56px 0;background:#060a1c;color:rgba(255,255,255,.55);font-size:14.5px}
.fuss{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
footer a{text-decoration:none;color:rgba(255,255,255,.55);transition:color .24s}
footer a:hover{color:#fff}

@media(prefers-reduced-motion:reduce){*{transition-duration:.01ms !important}}

/* ══════ Schmale Geräte ══════
   Dieselbe Falle wie auf der Hauptseite: deutsche Komposita wie
   "Datenschutz-Grundverordnung" oder "Auftragsbearbeitungsvertrag" sind als
   ein Stück breiter als ein Handybildschirm. Silbentrennung erlaubt den
   Umbruch, overflow-wrap ist die Notbremse. Die Platzhalter dürfen hier
   umbrechen, sonst schieben gerade sie die Seite auf. */
@media(max-width:720px){
  h1,h2,h3{hyphens:auto;overflow-wrap:break-word}
  main p,main li,.angaben p,.entwurf p{hyphens:auto;overflow-wrap:break-word}
  .titel{padding:52px 0 46px}
  main{padding:56px 0 72px}
}

/* Kopfleiste auf sehr schmalen Geräten. Wortmarke und zwei Navigationslinks
   passen bei 320px sonst nicht nebeneinander und ziehen die Seite auf. */
@media(max-width:600px){
  header nav{gap:18px}
  header nav a{font-size:13px}
}
@media(max-width:400px){
  header .huelle{gap:12px}
  .marke{gap:10px}
  .marke .wort{font-size:17px;letter-spacing:.13em}
  .marke .zeichen{width:30px;height:30px;font-size:15px}
  header nav{gap:13px}
  header nav a{font-size:12px}
}

@media(max-width:430px){
  header nav{display:none}
}