/* Gemeinsame Formatvorlage fuer Impressum, Datenschutz, Erstinformation und 404.
   Eine Datei statt vier Mal Inline-CSS, damit die Seiten nicht auseinanderlaufen. */

:root{
  --petrol:#117b99;
  --petrol-tief:#0d6180;
  --petrol-hell:#e7f2f6;
  --dunkel:#1a1d21;
  --sand:#faf8f5;
  --sand-2:#f1ece5;
  --text:#1f2429;
  --text-2:#5d6771;
  --linie:#e2dbd2;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:'Raleway',system-ui,sans-serif;
  background:var(--sand);color:var(--text);
  font-size:16.5px;line-height:1.7;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto}
a{color:var(--petrol)}
.wrap{max-width:820px;margin:0 auto;padding:0 28px}

.kopf{background:var(--dunkel);padding:26px 0}
.kopf img{height:44px;width:auto}
.kopf a{display:inline-block}

main{padding:64px 0 80px}
h1{
  font-family:'Montserrat','Raleway',system-ui,sans-serif;
  font-size:clamp(1.9rem,3.6vw,2.4rem);font-weight:700;letter-spacing:-.02em;margin-bottom:16px;
}
.stand{color:var(--text-2);font-size:14px;margin-bottom:38px}
h2{
  font-family:'Montserrat','Raleway',system-ui,sans-serif;
  font-size:1.2rem;font-weight:700;margin:38px 0 12px;color:var(--petrol);
}
h3{font-size:1.02rem;font-weight:600;margin:22px 0 8px}
p{margin-bottom:14px}
ul{margin:0 0 16px 22px}
li{margin-bottom:7px}
.block{margin-bottom:8px}
.klein{font-size:14px;color:var(--text-2)}
strong{font-weight:600}

/* Hervorgehobener Hinweiskasten, z. B. fuer Gesundheitsdaten */
.merke{
  background:var(--petrol-hell);border-left:3px solid var(--petrol);
  border-radius:0 10px 10px 0;padding:18px 22px;margin:20px 0 24px;
}
.merke p:last-child{margin-bottom:0}

/* Hervorgehobener Widerspruchs-Kasten. Art. 21 Abs. 4 DSGVO verlangt, dass auf das
   Widerspruchsrecht "ausdrücklich" und "getrennt von anderen Informationen"
   hingewiesen wird. Ein Aufzählungspunkt in der Rechteliste reicht dafür nicht,
   deshalb dieser eigene Block. Bewusst kräftiger als .merke: voller Rahmen statt
   nur einer Kante, damit er auch beim Überfliegen auffällt. */
.legal-hinweis{
  background:#fff;border:2px solid var(--petrol);border-radius:12px;
  padding:20px 24px;margin:26px 0 30px;
}
.legal-hinweis p:last-child{margin-bottom:0}
.legal-hinweis a{font-weight:600}
.legal-hinweis .fox-datenschutz-link{
  display:inline-block;padding:10px 20px;margin:2px 0 4px;
  background:var(--petrol);color:#fff;border-radius:11px;
  font-weight:600;text-decoration:none;cursor:pointer;transition:background .18s;
}
.legal-hinweis .fox-datenschutz-link:hover{background:var(--petrol-tief)}

/* Inhaltsverzeichnis der Datenschutzerklaerung */
.inhalt{
  background:#fff;border:1px solid var(--linie);border-radius:12px;
  padding:22px 26px;margin-bottom:34px;
}
.inhalt ol{margin:0 0 0 20px;font-size:15px}
.inhalt li{margin-bottom:5px}
.inhalt a{text-decoration:none}
.inhalt a:hover{text-decoration:underline}

.fuss{background:var(--dunkel);color:rgba(255,255,255,.6);padding:26px 0;font-size:13.5px}
.fuss__zeile{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;align-items:center}
.fuss a{color:rgba(255,255,255,.8);text-decoration:none;margin-right:20px}
.fuss a:hover{color:#fff}
.fuss__fox{color:rgba(255,255,255,.55);font-size:13px}
.fuss__fox a{
  display:inline-flex;align-items:center;gap:6px;vertical-align:middle;
  font-weight:700;color:#7fc4d8;text-decoration:none;margin-left:5px;margin-right:0;
}
.fuss__fox a:hover{color:#9fd6e6}
.fuss__fox img{height:17px;width:auto}

/* ---------- Datenschutz-Hinweis und Einstellung ----------
   Bewusst KEIN Consent-Banner: Diese Seiten setzen keine Cookies für Werbung oder
   Analyse, es gibt also nichts einzuwilligen. Die Leiste erklärt die cookiefreie
   Zählung und bietet den Widerspruch nach Art. 21 DSGVO an.
   Gleiches Aussehen wie auf der Startseite, damit der Hinweis wie ein Teil der Seite
   wirkt und nicht wie ein Fremdkörper. Beide Schaltflächen haben dasselbe Gewicht,
   gleiche Größe, gleicher Kontrast (DSK OH Digitale Dienste Rz. 135). */
#fox-consent-banner{
  position:fixed;left:0;right:0;bottom:0;z-index:9999;
  background:var(--dunkel);color:rgba(255,255,255,.78);
  border-top:3px solid var(--petrol);
  box-shadow:0 -10px 34px rgba(0,0,0,.3);
  font-family:'Raleway',system-ui,sans-serif;
}
#fox-consent-banner .fox-consent-inner{
  max-width:1240px;margin:0 auto;padding:18px 28px;
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:20px;
}
/* Ohne min-width:0 sprengt ein langes Kompositum die Zeile über den Viewport. */
#fox-consent-banner .fox-consent-text{
  flex:1 1 320px;min-width:0;font-size:14.5px;line-height:1.6;
}
#fox-consent-banner .fox-consent-text strong{color:#fff;font-weight:600}
#fox-consent-banner .fox-consent-text a{color:#7fc4d8;text-decoration:underline}
#fox-consent-banner .fox-consent-text a:hover{color:#9fd6e6}
#fox-consent-banner .fox-consent-actions{display:flex;gap:10px;flex-wrap:wrap}
#fox-consent-banner button{
  font-family:inherit;font-size:14px;font-weight:600;line-height:1.3;
  padding:11px 20px;border-radius:11px;cursor:pointer;
  min-width:186px;text-align:center;
  border:1.5px solid rgba(255,255,255,.75);background:transparent;color:#fff;
  transition:background .18s,border-color .18s;
}
#fox-consent-banner button:hover{background:var(--petrol);border-color:var(--petrol)}
#fox-consent-banner button:focus-visible{outline:2px solid #7fc4d8;outline-offset:2px}
/* Kurze Rückmeldung, damit ein Klick nicht ins Leere läuft. */
#fox-consent-status{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%);
  z-index:10000;max-width:min(92vw,520px);
  background:var(--dunkel);color:#fff;
  border:1px solid rgba(127,196,216,.5);border-radius:12px;
  padding:13px 20px;font-size:14.5px;line-height:1.5;
  box-shadow:0 8px 28px rgba(0,0,0,.32);
}
/* Footer-Einstieg. Die Entscheidung muss jederzeit erreichbar bleiben, sonst ist
   sie keine Entscheidung (Art. 21 Abs. 4 DSGVO). */
.fox-datenschutz-link{cursor:pointer}
.fuss .fox-datenschutz-link{color:rgba(255,255,255,.8);text-decoration:none}
.fuss .fox-datenschutz-link:hover{color:#fff}
.fox-datenschutz-zeile{margin-top:12px}

@media(max-width:600px){
  body{font-size:16px}
  main{padding:44px 0 60px}
  #fox-consent-banner .fox-consent-inner{padding:16px 20px;gap:14px}
  #fox-consent-banner .fox-consent-actions{width:100%}
  #fox-consent-banner button{flex:1 1 100%;min-width:0}
}