/* Geteiltes Stylesheet fuer alle Seiten - wird ab Task 5 befuellt. */

/*
 * Skip-Link (.mel-skip, Task 2/Ruling K19): unsichtbar, bis er den
 * Tastaturfokus haelt. templates/layout.php rendert diesen Link auf JEDER
 * Seite ("Zum Inhalt springen") - das ist ein geteiltes Layout-Anliegen,
 * keine Seitengestaltung, deshalb gehoert die Regel hierher und bewusst
 * NICHT in ein einzelnes Seiten-Stylesheet.
 *
 * Fund aus Task 3c: In Task 3b wurde diese Regel je Seite lokal angelegt
 * (hub.css/gesundheit.css), weil shared.css zu dem Zeitpunkt noch dieser
 * leere Stub war. Als Task 3c zwei neue Seiten-Stylesheets (kaiser.css,
 * familien.css) komplett neu aus dem Original extrahierte, fehlte die
 * Regel dort schlicht - der Skip-Link war staendig sichtbar und hat jede
 * Seite ein paar Pixel nach unten verschoben (30-56 % Pixel-Differenz im
 * Screenshot-Vergleich, bevor der Fehler gefunden wurde). Seitdem lebt die
 * Regel nur noch hier, einmal, geladen VOR dem seiteneigenen Stylesheet
 * (siehe layout.php) - eine Seite koennte sie bei Bedarf ueberschreiben,
 * aktuell tut das keine.
 */
.mel-skip{
  position:absolute;
  left:-9999px;
  top:0;
  width:1px;
  height:1px;
  overflow:hidden;
  white-space:nowrap;
}
/*
 * Ruling K22 (Task 9): #1B2620 ist NICHT nur die Skip-Link-Fuellung, sondern
 * auf dem Hub auch die SEITEN-Hintergrundfarbe - eine dunkle Box auf
 * dunklem Grund war dort effektiv unsichtbar, obwohl fokussiert. Die fuenf
 * Seiten haben grundverschiedene Hintergruende (dunkles Gruen auf dem Hub,
 * cremefarben auf gesundheit, nahezu Schwarz auf kaiser, dunkles Gruen an
 * der Stelle, an der der Skip-Link auf kleinkirchheim erscheint, cremefarben
 * bis dunkel je nach Breite auf familien - gemessen per Pixel-Sample an
 * genau der Position, an der der fokussierte Link erscheint, nicht geraten).
 * EINE einzelne Farbkombination kann das nicht zuverlaessig ueberdecken,
 * egal welche - ein einzelner Akzentton (z.B. der Gold-Ton #B9933F) liegt je
 * nach Seite zwischen 1,87:1 und 6,61:1, faellt auf zwei der fuenf Seiten
 * klar unter 3:1.
 *
 * Deshalb: zwei GEGENSAETZLICHE Toene (sehr dunkel + sehr hell), als Fuellung
 * UND als Rahmen. Damit blendet sich hoechstens EINER der beiden Toene in
 * eine aehnlich helle/dunkle Seite ein - der jeweils andere bleibt sichtbar.
 * Gemessene Kontraste (Fuellung #1B2620 bzw. Rahmen #F4EFE6 gegen die echte,
 * gerenderte Farbe an Position 16/16px auf jeder Seite):
 *   Hub            Fuellung 1,00:1 (blendet ein) | Rahmen 13,64:1
 *   gesundheit     Fuellung 13,72:1               | Rahmen  1,01:1 (blendet ein)
 *   kaiser         Fuellung 1,22:1 (blendet ein)  | Rahmen 16,59:1
 *   kleinkirchheim Fuellung 1,30:1 (blendet ein)  | Rahmen 10,47:1
 *   familien       Fuellung 13,58:1               | Rahmen  1,00:1 (blendet ein)
 * Auf jeder der fuenf Seiten liegt mindestens einer der beiden Werte weit
 * ueber 10:1 - die Box ist als Objekt erkennbar, unabhaengig davon, welche
 * der fuenf Seiten dahinterliegt. Text-auf-Fuellung (#F4EFE6 auf #1B2620)
 * ist seitenunabhaengig 13,64:1 - immer weit ueber 4,5:1.
 */
.mel-skip:focus{
  position:fixed;
  left:16px;
  top:16px;
  width:auto;
  height:auto;
  z-index:1000;
  padding:10px 16px;
  border-radius:8px;
  background:#1B2620;
  color:#F4EFE6;
  border:3px solid #F4EFE6;
  box-shadow:0 6px 20px rgba(0,0,0,.35);
  outline:none;
  overflow:visible;
  white-space:normal;
}

/*
 * Sichtbarer Fokusrahmen (Task 9). Die Originalseiten definieren nirgends
 * einen - ohne ihn ist Tastaturbedienung reines Raten (welches Element hat
 * gerade den Fokus?). :focus-visible statt :focus, damit Maus-Klicks keinen
 * Ring bekommen, den niemand angefordert hat (Browser-Heuristik: Tastatur ja,
 * Maus in aller Regel nein).
 *
 * Gleiches Kontrastproblem wie beim Skip-Link oben, gleiche Loesung: ein
 * dunkler Outline-Ring UND ein heller Halo-Ring (per box-shadow, folgt
 * automatisch dem border-radius des fokussierten Elements). outline bleibt
 * die FUEHRENDE Technik (nicht nur box-shadow), weil outline auch im
 * Windows-Hochkontrastmodus zuverlaessig gerendert wird, box-shadow dort
 * aber typischerweise verschwindet.
 *
 * Elemente mit einer eigenen, spezifischeren :focus-visible-Regel (z.B.
 * .mel-consent__btn:focus-visible, Task 6) behalten ihren eigenen Ring -
 * hoehere Selektor-Spezifitaet gewinnt unabhaengig von der Regel-Reihenfolge.
 * Diese Regel ist das Sicherheitsnetz fuer alles andere.
 */
:focus-visible{
  outline:3px solid #1B2620;
  outline-offset:2px;
  box-shadow:0 0 0 5px #F4EFE6;
}
/* Der Skip-Link setzt seine Sichtbarkeit selbst um (Rahmen+Fuellung oben) -
   der generische Halo-Ring wuerde nur unnoetig doppeln. */
.mel-skip:focus-visible{
  outline:none;
  box-shadow:0 6px 20px rgba(0,0,0,.35);
}

/*
 * Task 5: Nutzseiten (Impressum, Datenschutz, 404).
 *
 * Diese drei Seiten haben - anders als die vier Landingpages (Ruling K19,
 * eigenes Vollbild-Design je Seite) - kein eigenes Seiten-Stylesheet und
 * brauchen keins: es sind reine Lesetexte. .mel-nutzseite gibt ihnen eine
 * lesbare, auf die Markenfarben abgestimmte Grundtypografie, statt sie
 * unformatiert (Browser-Standardschrift) auszuliefern. Die Farbwerte
 * spiegeln die --pine/--snow/--ink-Variablen, die die Landingpages inline
 * verwenden (siehe z. B. templates/pages/familien.php), damit die Seiten
 * trotz eigenstaendigem, schlichtem Layout erkennbar zur selben Marke
 * gehoeren.
 */
.mel-nutzseite{
  background:#EAE2D2;
  color:#1E2A25;
  font-family:'Hanken Grotesk',-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
  min-height:60vh;
}
.mel-nutzseite__innen{
  max-width:760px;
  margin:0 auto;
  padding:clamp(48px,8vw,96px) 6vw clamp(64px,9vw,110px);
}
.mel-nutzseite h1{
  font-family:'Cormorant Garamond',serif;
  font-weight:500;
  font-size:clamp(32px,4.4vw,48px);
  line-height:1.1;
  color:#2C4A40;
  margin:0 0 34px;
}
.mel-nutzseite h2{
  font-family:'Cormorant Garamond',serif;
  font-weight:600;
  font-size:24px;
  color:#2C4A40;
  margin:44px 0 14px;
}
.mel-nutzseite section:first-of-type h2{
  margin-top:0;
}
.mel-nutzseite p{
  font-size:16px;
  line-height:1.65;
  margin:0 0 14px;
}
.mel-nutzseite .mel-impr-firma{
  font-weight:700;
}
.mel-nutzseite dl{
  margin:0 0 14px;
  display:grid;
  grid-template-columns:max-content 1fr;
  gap:6px 18px;
}
.mel-nutzseite dt{
  font-weight:600;
  color:#7C7666;
}
.mel-nutzseite dd{
  margin:0;
}
.mel-nutzseite ul{
  margin:0 0 14px;
  padding-left:22px;
}
.mel-nutzseite li{
  font-size:16px;
  line-height:1.6;
  margin-bottom:6px;
}
.mel-nutzseite a{
  color:#2C4A40;
}

/*
 * Bestaetigungs-/Fehlt-Vermerke (Task 5, mel_tml_verlinkt-Brief).
 *
 * data-mel-unbestaetigt markiert Angaben, die zwar einen Wert haben, dessen
 * Richtigkeit aber noch mit dem Kunden abzugleichen ist (z. B. Adresse -
 * oeffentliche Quellen widersprechen einander). data-mel-fehlt markiert
 * Felder, die komplett leer sind und nur der Kunde beantworten kann
 * (Medieninhaber, Blattlinie, Reiseveranstalter-Status). Der sichtbare
 * Hinweis erscheint NUR, solange templates/pages/impressum.php bzw.
 * datenschutz.php erkennen, dass staging aktiv ist (data-mel-staging="1"
 * auf <main>) - im Livebetrieb bleiben die data-Attribute im Quelltext
 * stehen (Merkposten fuer eine spaetere Pruefung), aber ohne sichtbaren
 * Effekt. Ohne dieses Gate wuerde der Warnhinweis mit dem Livegang der
 * Website live gehen.
 */
main[data-mel-staging="1"] [data-mel-unbestaetigt]::after,
main[data-mel-staging="1"] [data-mel-fehlt]::after{
  display:inline-block;
  margin-left:8px;
  padding:2px 8px;
  border-radius:999px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.04em;
  vertical-align:middle;
}
main[data-mel-staging="1"] [data-mel-unbestaetigt]::after{
  content:"unbestätigt – vor Livegang mit dem Kunden abgleichen";
  background:#F4D35E;
  color:#3A2E00;
}
main[data-mel-staging="1"] [data-mel-fehlt]::after{
  content:"fehlt – nur der Kunde kann das beantworten";
  background:#E07A5F;
  color:#3A0E00;
}

/*
 * Schlichter Footer der Nutzseiten (templates/teile/footer.php). Bewusst
 * NICHT identisch mit einem Landingpage-Footer (Ruling K19: die brauchen
 * kein gemeinsames Bauteil) - aber erkennbar dieselbe Marke wie
 * .mel-nutzseite oben.
 */
.mel-footer-nutzseite{
  background:#16271F;
  color:rgba(246,243,234,.7);
  padding:32px 6vw;
}
.mel-footer-nutzseite__innen{
  max-width:760px;
  margin:0 auto;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px 20px;
  font-size:13px;
}
.mel-footer-nutzseite__marke{
  color:rgba(246,243,234,.85);
  font-weight:600;
}
.mel-footer-nutzseite__links{
  display:flex;
  flex-wrap:wrap;
  gap:6px 18px;
}
.mel-footer-nutzseite__links a,
.mel-footer-nutzseite__links button{
  color:rgba(246,243,234,.7);
  font:inherit;
  background:none;
  border:none;
  padding:0;
  margin:0;
  cursor:pointer;
  text-decoration:none;
}
.mel-footer-nutzseite__links a:hover,
.mel-footer-nutzseite__links a:focus-visible,
.mel-footer-nutzseite__links button:hover,
.mel-footer-nutzseite__links button:focus-visible{
  text-decoration:underline;
}

/*
 * Task 6: Cookie-Consent-Banner (includes/consent.php, mel_consent_banner()).
 *
 * Die fuenf Seiten haben VIER komplett unterschiedliche Design-Systeme
 * (Manrope/Cormorant, EB Garamond/UnifrakturMaguntia, Work Sans/Newsreader,
 * Hanken Grotesk auf .mel-nutzseite). Das Banner versucht bewusst NICHT,
 * eines davon nachzuahmen - es ist ein Systemelement (wie ein
 * Browser-Dialog), keine Seitengestaltung, und soll auf allen fuenf Seiten
 * gleich und erkennbar "systemeigen" aussehen. Neutrale Systemschrift,
 * ruhige Farben, klare Kontraste - keines der Marken-/Serifenfonts der
 * Landingpages.
 *
 * [hidden] wird zusaetzlich explizit auf display:none gesetzt: .mel-consent
 * traegt weiter unten display:flex, und ohne die explizite Regel koennte
 * die hidden-Attribut-Selektor-Spezifitaet (gleich hoch wie eine Klasse) je
 * nach CSS-Reihenfolge verlieren - das Banner waere dann trotz
 * hidden-Attribut sichtbar. Genau dieses hidden-Attribut ist der Hebel, mit
 * dem sowohl der Fusszeilen-Button (JS entfernt es) als auch die
 * Bildschirmfoto-Unterdrueckung (ein gueltiges mel_consent-Cookie laesst
 * PHP es von Anfang an setzen) arbeiten.
 *
 * Regel 2 aus dem Task-6-Brief (nicht verhandelbar): "Alle ablehnen" ist
 * GENAUSO sichtbar wie "Alle annehmen". Deshalb hier: EINE Klasse
 * (.mel-consent__btn) fuer alle drei Aktions-Buttons, keine
 * "--primary"-Variante, keine Farbe, die eine Option bevorzugt. Der
 * einzige Unterschied zwischen den Buttons ist ihr Text.
 */
.mel-consent{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:2000;
  display:flex;
  justify-content:center;
  padding:16px;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.mel-consent[hidden]{
  display:none;
}
/*
 * Fix Runde 1, Finding 1: das Banner (role="dialog", tabindex="-1") nimmt
 * bei Erstanzeige und beim Wiederoeffnen selbst den Fokus (siehe
 * assets/js/consent.js, fokusInBannerSetzen()) - kein Browser-Default-Ring
 * auf dem unsichtbaren, viewport-breiten Flex-Wrapper selbst (outline:none
 * dort), stattdessen ein sichtbarer Ring auf der eigentlichen Karte
 * (.mel-consent__box). :focus-within trifft laut Spezifikation sowohl auf
 * den Fall "dieses Element selbst hat den Fokus" als auch "ein Nachfahre
 * hat den Fokus" - deckt also sowohl den initialen Fokus auf dem
 * Dialog-Element selbst als auch spaeteres Tabben zu den Buttons/Checkboxen
 * darin ab.
 */
.mel-consent:focus{
  outline:none;
}
.mel-consent:focus-within .mel-consent__box{
  outline:3px solid #2C4A40;
  outline-offset:2px;
}
.mel-consent__box{
  width:100%;
  max-width:640px;
  background:#F6F3EA;
  color:#1E2A25;
  border:1px solid rgba(30,42,37,.18);
  border-radius:12px;
  box-shadow:0 8px 28px rgba(0,0,0,.22);
  padding:20px 22px;
}
.mel-consent__text{
  margin:0 0 14px;
  font-size:14px;
  line-height:1.55;
}
.mel-consent__text a{
  color:inherit;
  text-decoration:underline;
}
.mel-consent__kategorien-toggle{
  display:block;
  margin:0 0 10px;
  padding:0;
  font:inherit;
  font-size:13px;
  font-weight:600;
  color:#2C4A40;
  background:none;
  border:none;
  cursor:pointer;
  text-decoration:underline;
}
.mel-consent__kategorien{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin:0 0 14px;
}
.mel-consent__kategorien[hidden]{
  display:none;
}
.mel-consent__kategorie{
  display:flex;
  align-items:flex-start;
  gap:8px;
  font-size:13px;
  line-height:1.4;
  cursor:pointer;
}
.mel-consent__kategorie input{
  margin-top:2px;
}
.mel-consent__kategorie em{
  font-style:normal;
  color:#7C7666;
}
.mel-consent__aktionen{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.mel-consent__btn{
  flex:1 1 160px;
  font:inherit;
  font-size:14px;
  font-weight:600;
  padding:11px 16px;
  border-radius:8px;
  border:1px solid #1E2A25;
  background:#F6F3EA;
  color:#1E2A25;
  cursor:pointer;
  text-align:center;
}
.mel-consent__btn:hover,
.mel-consent__btn:focus-visible{
  background:#1E2A25;
  color:#F6F3EA;
}
.mel-consent__btn:focus-visible{
  outline:2px solid #2C4A40;
  outline-offset:2px;
}
@media (max-width:480px){
  .mel-consent__aktionen{
    flex-direction:column;
  }
  .mel-consent__btn{
    flex:1 1 auto;
  }
}

/*
 * Task 9: prefers-reduced-motion (Systemeinstellung) und der
 * Widget-Schalter "Bewegung reduzieren" (data-mel-a11y-bewegung="aus",
 * assets/js/a11y.js). gesundheit, kaiser und familien tragen
 * scroll-getriggerte Reveal-Animationen (IntersectionObserver +
 * CSS-Transitions, siehe assets/js/gesundheit.js/familien.js) und
 * @keyframes-Animationen mit festen Delays (Hero-"fadeUp" etc., inline in
 * den jeweiligen templates/pages/*.php) - ohne diese Regel bewegt sich die
 * Seite fuer Nutzer:innen, die genau das ueber ihr Betriebssystem
 * abgeschaltet haben, trotzdem voll durch.
 *
 * animation-duration/transition-duration auf .01ms statt 0s: manche
 * Skripte (z.B. der IntersectionObserver-Handler) warten auf ein
 * "transitionend"-Ereignis, das bei genau 0s Dauer in manchen Browsern gar
 * nicht feuert - .01ms feuert zuverlaessig, ist aber fuer Menschen
 * ununterscheidbar von "keine Animation".
 */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}
html[data-mel-a11y-bewegung="aus"] *,
html[data-mel-a11y-bewegung="aus"] *::before,
html[data-mel-a11y-bewegung="aus"] *::after{
  animation:none !important;
  transition:none !important;
  scroll-behavior:auto !important;
}

/*
 * Task 9: Barrierefreiheits-Widget (includes/a11y.php, assets/js/a11y.js).
 *
 * Bewusst NEUTRALES Systemdesign wie das Consent-Banner oben (Task 6) -
 * dieselbe Begruendung: die vier Landingpages haben vier unterschiedliche
 * Design-Systeme, das Widget ist ein Systemelement (wie ein
 * Browser-Dialog), keine Seitengestaltung.
 *
 * z-index bewusst UNTER dem Consent-Banner (2000) und ueber allem
 * Seiteninhalt (die hoechsten Seiten-eigenen z-index-Werte liegen bei 60,
 * siehe kaiser.php-Header) - der Ausloeser-Knopf steht oben rechts, NICHT
 * unten, damit er nie mit dem am unteren Rand liegenden Consent-Banner
 * kollidiert (das beim Erstbesuch fast die gesamte Bildschirmbreite am
 * unteren Rand belegt).
 */
.mel-a11y{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.mel-a11y__ausloeser{
  position:fixed;
  top:16px;
  right:16px;
  z-index:1500;
  width:46px;
  height:46px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  border:2px solid #F4EFE6;
  background:#1B2620;
  color:#F4EFE6;
  cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.3);
}
.mel-a11y__ausloeser:hover{
  background:#2C4A40;
}
.mel-a11y__panel{
  position:fixed;
  top:68px;
  right:16px;
  z-index:1500;
  width:min(300px,calc(100vw - 32px));
  max-height:calc(100vh - 88px);
  overflow-y:auto;
  background:#F6F3EA;
  color:#1E2A25;
  border:1px solid rgba(30,42,37,.18);
  border-radius:12px;
  box-shadow:0 12px 36px rgba(0,0,0,.3);
  padding:16px;
}
.mel-a11y__panel[hidden]{
  display:none;
}
.mel-a11y__kopf{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:12px;
}
.mel-a11y__titel{
  margin:0;
  font-size:15px;
  font-weight:700;
}
.mel-a11y__schliessen{
  width:30px;
  height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:none;
  background:none;
  color:#1E2A25;
  border-radius:6px;
  cursor:pointer;
}
.mel-a11y__schliessen:hover{
  background:rgba(30,42,37,.08);
}
.mel-a11y__gruppe{
  margin-bottom:12px;
}
.mel-a11y__label{
  display:block;
  font-size:12px;
  font-weight:600;
  letter-spacing:.02em;
  color:#4A554F;
  margin-bottom:6px;
}
.mel-a11y__optionen{
  display:flex;
  gap:6px;
}
.mel-a11y__btn,
.mel-a11y__schalter{
  font:inherit;
  font-size:13.5px;
  font-weight:600;
  padding:9px 12px;
  border-radius:8px;
  border:1px solid rgba(30,42,37,.25);
  background:#FFFFFF;
  color:#1E2A25;
  cursor:pointer;
  text-align:center;
}
.mel-a11y__btn{
  flex:1;
}
.mel-a11y__schalter{
  display:block;
  width:100%;
  text-align:left;
  margin-bottom:8px;
}
.mel-a11y__btn[aria-pressed="true"],
.mel-a11y__schalter[aria-pressed="true"]{
  background:#1B2620;
  color:#F4EFE6;
  border-color:#1B2620;
}
.mel-a11y__zuruecksetzen{
  display:block;
  width:100%;
  margin-top:4px;
  font:inherit;
  font-size:13px;
  font-weight:600;
  color:#1E2A25;
  background:none;
  border:none;
  text-decoration:underline;
  cursor:pointer;
  padding:6px 0 0;
}
@media (max-width:400px){
  .mel-a11y__panel{
    right:8px;
    top:64px;
  }
  .mel-a11y__ausloeser{
    right:8px;
  }
}

/*
 * Schriftgroesse (drei Stufen, Widget-Schalter "Schriftgröße"). zoom statt
 * einer Skalierung der Wurzel-font-size: die vier Landingpages setzen ihre
 * Schriftgroessen fast durchgehend in PX inline (nicht in rem) - eine
 * groessere Wurzel-Schrift haette dort schlicht KEINE Wirkung. zoom
 * vergroessert die gesamte gerenderte Seite (wie der Browser-eigene
 * Zoom-Befehl) unabhaengig von der verwendeten Masseinheit - das einzige
 * Mittel, das auf allen vier voneinander unabhaengigen Design-Systemen
 * gleichermassen wirkt, ohne eine einzige Seitenvorlage anzufassen.
 */
html[data-mel-a11y-schrift="gross"]{
  zoom:1.15;
}
html[data-mel-a11y-schrift="sehr-gross"]{
  zoom:1.3;
}

/*
 * Kontrastverstaerkung (Widget-Schalter "Kontrast verstärken"). filter auf
 * <html> selbst wuerde den Fokusrahmen/Skip-Link/Consent-Banner/Widget
 * ebenfalls verzerren und koennte deren eigene, oben gemessene Kontraste
 * verschieben - der Filter greift deshalb gezielt nur an den
 * Seiteninhalt-Wurzelknoten JEDER Seite (body > * bis auf die eigenen
 * Bauteile). "body > *" trifft unabhaengig davon, ob eine Seite ihren
 * gesamten Inhalt in EINEN wrapper packt (gesundheit, familien,
 * kleinkirchheim) oder in ZWEI Geschwisterknoten aufteilt (kaiser:
 * <header> + <div>) - in jedem Fall bekommt genau der/die tatsaechlichen
 * Seiteninhalt-Container den Filter, nie das Widget/den Skip-Link/das
 * Consent-Banner selbst (deren eigener Kontrast ist bereits geprueft und
 * soll sich nicht noch einmal veraendern).
 */
html[data-mel-a11y-kontrast="an"] body > *:not(.mel-a11y):not(.mel-skip):not(.mel-consent){
  filter:contrast(1.3) saturate(1.05);
}

/*
 * Links unterstreichen (Widget-Schalter). !important ist hier ausnahmsweise
 * gerechtfertigt: fast jeder Link auf den vier Landingpages setzt
 * text-decoration:none per Inline-style (hoechste Spezifitaet ausser
 * !important selbst) - ein Barrierefreiheits-Schalter muss das zuverlaessig
 * uebersteuern koennen, sonst waere er nur eine Attrappe.
 */
html[data-mel-a11y-unterstreichen="an"] a{
  text-decoration:underline !important;
}

/*
 * Lesehilfe (Widget-Schalter): ein fixierter, halbtransparenter Balken, der
 * per JS (assets/js/a11y.js) der Maus in der Hoehe folgt und beim
 * zeilenweisen Lesen hilft. pointer-events:none, damit er nie Klicks
 * abfaengt. Standardmaessig unsichtbar (display:none) - JS bewegt ihn zwar
 * bei jedem mousemove, aber ohne das aktive Attribut auf <html> bleibt er
 * unsichtbar, das ist beabsichtigt (siehe assets/js/a11y.js).
 */
.mel-a11y__lesehilfe{
  position:fixed;
  left:0;
  right:0;
  height:44px;
  transform:translateY(-50%);
  pointer-events:none;
  z-index:1400;
  background:rgba(255,221,86,.22);
  border-top:2px solid rgba(185,147,63,.85);
  border-bottom:2px solid rgba(185,147,63,.85);
  display:none;
}
html[data-mel-a11y-lesehilfe="an"] .mel-a11y__lesehilfe{
  display:block;
}