/* =========================================================================
   Barrierefreiheit: Bedienleiste, Schriftgroessenregler, Kontrastmodus
   Gesundheits- und Pflegenetzwerk Erzhausen

   Diese Datei wird von allen Seiten eingebunden. Sie kommt NACH dem
   seiteneigenen <style>-Block, damit die Kontrastregeln gewinnen.

   Wie die Schriftgroesse funktioniert:
   Die Seiten geben ihre Schriftgroessen in rem an. Ein rem richtet sich nach
   der Schriftgroesse des <html>-Elements. Wird die hier veraendert, waechst
   oder schrumpft die ganze Seite mit, ohne dass Inhalte verloren gehen.
   ========================================================================= */

html{font-size:calc(100% * var(--schrift-skala,1))}
html[data-schrift="0"]{--schrift-skala:.9}
html[data-schrift="1"]{--schrift-skala:1}
html[data-schrift="2"]{--schrift-skala:1.15}
html[data-schrift="3"]{--schrift-skala:1.3}
html[data-schrift="4"]{--schrift-skala:1.5}

/* Nur fuer Screenreader sichtbar. Eigener Name, damit die Klasse nicht mit
   den seiteneigenen Klassen kollidiert. */
.bf-nur-sr{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* Sprungmarke. Steht hier, damit jede Seite eine hat, auch die, die keine
   eigene Definition mitbringt. */
.skip{position:absolute;left:-999px;top:0;background:#fff;color:#600078;
  padding:12px 20px;font-weight:800;z-index:2000;border-radius:0 0 12px 0;
  text-decoration:none}
.skip:focus{left:0;top:0}
main:focus{outline:none}

/* ===== Bedienleiste ganz oben ========================================== */
.hilfsleiste{background:#f4eef7;border-bottom:1px solid rgba(46,31,51,.14);
  font-size:.875rem;line-height:1.5}
.hilfsleiste-innen{display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:6px 18px;padding:5px 22px;
  max-width:1120px;margin:0 auto}
.hilfsleiste-links{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;margin:0}
.hilfsleiste-links a{color:#4a005c;text-decoration:none;font-weight:650;
  padding:9px 8px;border-radius:8px;display:inline-block;min-height:44px;
  display:inline-flex;align-items:center}
.hilfsleiste-links a:hover{text-decoration:underline;background:rgba(96,0,120,.08)}
.hilfsleiste-rechts{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.werkzeug{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-width:44px;min-height:44px;padding:6px 12px;border:1px solid #7b7386;
  border-radius:10px;background:#fff;color:#4a005c;font:inherit;font-weight:750;
  font-size:.875rem;cursor:pointer;line-height:1}
.werkzeug:hover{background:#600078;color:#fff;border-color:#600078}
.werkzeug[aria-pressed="true"]{background:#600078;color:#fff;border-color:#600078}
.werkzeug:focus-visible{outline:3px solid #600078;outline-offset:3px}

/* Ohne JavaScript sind die Schalter wirkungslos. Dann werden sie ausgeblendet,
   damit niemand ins Leere klickt. Die Links bleiben stehen. */
html:not(.bf-js) .hilfsleiste-rechts{display:none}

@media (max-width:640px){
  .hilfsleiste-innen{justify-content:center;padding:4px 14px}
  .hilfsleiste-links{justify-content:center}
  /* Auf dem Telefon wird alles eine Stufe groesser. 14 Pixel sind fuer die
     Zielgruppe dieser Seite zu klein, auch in Leiste und Fussbereich. */
  .hilfsleiste{font-size:1rem}
  .werkzeug{font-size:1rem;padding:8px 14px}
  footer.site,body > footer{font-size:1rem}
  footer.site nav{gap:14px 20px}
  footer.site nav a{display:inline-block;padding:6px 0}
}
/* Sehr schmale Geraete: gleiche Schriftgroesse, nur enger gesetzt. */
@media (max-width:360px){
  .werkzeug{padding:8px 10px;gap:4px}
  .hilfsleiste-innen{gap:4px 10px;padding:4px 8px}
}

@media print{.hilfsleiste{display:none}}

/* ===== Kontrastmodus ====================================================
   Setzt Text auf Schwarz, Flaechen auf Weiss, entfernt Verlaeufe, Schatten
   und Weichzeichner. Die Kennfarben bleiben nur dort, wo sie keinen Text
   tragen. Alle Textpaare erreichen hier mindestens 12:1.
   ====================================================================== */
html[data-kontrast="an"]{
  --lila:#2b0035; --lila-dunkel:#000; --pink-text:#000; --cyan-text:#000;
  --orange-text:#000; --gruen-text:#000; --ink:#000; --muted:#000;
  --line:#000; --bg:#fff;
  --grad:#000;
}
html[data-kontrast="an"] body{background:#fff;color:#000}
html[data-kontrast="an"] a{color:#2b0035;text-decoration:underline}
html[data-kontrast="an"] .ci-bar,
html[data-kontrast="an"] .ci-mini,
html[data-kontrast="an"] .strich,
html[data-kontrast="an"] section h2 .strich{background:#000}
html[data-kontrast="an"] header.site{background:#fff;border-bottom:2px solid #000;
  -webkit-backdrop-filter:none;backdrop-filter:none}
html[data-kontrast="an"] .hilfsleiste{background:#fff;border-bottom:2px solid #000}
html[data-kontrast="an"] .hilfsleiste-links a{color:#000}
html[data-kontrast="an"] .werkzeug{color:#000;border-color:#000;background:#fff}
/* Gedrueckt und beim Ueberfahren umgekehrt. Vorher blieb die lila Flaeche
   stehen, waehrend die Schrift auf Schwarz gesetzt wurde. Das ergab 1,77 zu 1. */
html[data-kontrast="an"] .werkzeug[aria-pressed="true"],
html[data-kontrast="an"] .werkzeug:hover{background:#000;color:#fff;border-color:#000}
html[data-kontrast="an"] .hero::before,
html[data-kontrast="an"] .hero::after,
html[data-kontrast="an"] .nav-scroll::after{display:none}
html[data-kontrast="an"] .hero h1 .bunt{background:none;color:#000;
  -webkit-text-fill-color:#000}
html[data-kontrast="an"] .card,
html[data-kontrast="an"] .award,
html[data-kontrast="an"] .toc,
html[data-kontrast="an"] .logobar a,
html[data-kontrast="an"] .faq details,
html[data-kontrast="an"] .fotos img,
html[data-kontrast="an"] .vote-card{box-shadow:none;border:2px solid #000;background:#fff}
html[data-kontrast="an"] .vote-shell{background:#000}
html[data-kontrast="an"] .vote-card .lbl,
html[data-kontrast="an"] .vote-card .sub,
html[data-kontrast="an"] .vote-card .check,
html[data-kontrast="an"] .team .role,
html[data-kontrast="an"] .award,
html[data-kontrast="an"] .eyebrow,
html[data-kontrast="an"] .faq .a,
html[data-kontrast="an"] figcaption{color:#000}
html[data-kontrast="an"] .vote-card[aria-pressed="true"]{border-width:4px;background:#fff}
html[data-kontrast="an"] .res-track{background:#fff;border:2px solid #000}
html[data-kontrast="an"] .res-fill{background:#000}
html[data-kontrast="an"] ul.clean li::before{background:#000}
html[data-kontrast="an"] .feature{border-top-color:#000}
html[data-kontrast="an"] .btn-primary{background:#000;color:#fff;box-shadow:none;
  border-color:#000}
html[data-kontrast="an"] .btn-primary:hover{background:#2b0035}
html[data-kontrast="an"] .btn-ghost{background:#fff;color:#000;border-color:#000}
html[data-kontrast="an"] nav.main a{color:#000}
html[data-kontrast="an"] nav.main a.vote-link{background:#000;color:#fff}
html[data-kontrast="an"] nav.main a:hover{background:#000;color:#fff}
html[data-kontrast="an"] footer.site,
html[data-kontrast="an"] body > footer{background:#000;color:#fff}
html[data-kontrast="an"] footer.site a,
html[data-kontrast="an"] body > footer a{color:#fff}
html[data-kontrast="an"] th{background:#fff;border-bottom:2px solid #000}
html[data-kontrast="an"] td{border-bottom:1px solid #000}

/* ===== Zurueck nach oben =================================================
   Wird nur per JavaScript eingehaengt. Ohne JavaScript ist er nicht da und
   niemand klickt ins Leere. Mindestgroesse 48 mal 48 Pixel.
   ======================================================================= */
.nachoben{position:fixed;right:14px;bottom:14px;z-index:120;
  width:48px;height:48px;border-radius:50%;border:2px solid #600078;
  background:#fff;color:#600078;font:inherit;font-size:1.25rem;font-weight:900;
  line-height:1;cursor:pointer;display:none;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(70,40,80,.18)}
.nachoben[data-sichtbar="ja"]{display:flex}
.nachoben:hover{background:#600078;color:#fff}
.nachoben:focus-visible{outline:3px solid #600078;outline-offset:3px}
html[data-kontrast="an"] .nachoben{border-color:#000;color:#000;box-shadow:none}
html[data-kontrast="an"] .nachoben:hover{background:#000;color:#fff}
/* Solange die Grossansicht offen ist, hat der Knopf nach oben nichts
   auf dem Schirm zu suchen. Er liegt sonst ueber dem Dialogschatten. */
dialog[open] ~ .nachoben{display:none!important}
@media print{.nachoben{display:none!important}}
