/* ===================================================================
   brauchtum-fix.css - QA-Korrekturen vom 19.08.2026
   Wird als LETZTES Stylesheet im <head> eingebunden und ueberschreibt
   damit sowohl /assets/brauchtum.css als auch die Inline-<style>-Bloecke.
   Enthaelt: Schrifteinbindung (ersetzt Google Fonts), Reparatur des
   Mobilmenues, Beseitigung des horizontalen Scrollens, Kontrastfix.
   =================================================================== */

/* ---- 1. Schriften lokal einbinden -------------------------------
   Auf dem Server liegen die woff2-Dateien bereits unter /fonts/,
   es fehlte bisher jede @font-face-Deklaration. Ohne diesen Block
   rendern 37 Seiten in Georgia statt in der Hausschrift, und
   59 Seiten holten die Schriften bei Google (DSGVO).            */
@font-face{font-family:'Playfair Display';src:url('/fonts/playfair-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Playfair Display';src:url('/fonts/playfair-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Spectral';src:url('/fonts/spectral-300.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Spectral';src:url('/fonts/spectral-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Spectral';src:url('/fonts/spectral-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Archivo';src:url('/fonts/archivo-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Archivo';src:url('/fonts/archivo-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Archivo';src:url('/fonts/archivo-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Archivo';src:url('/fonts/archivo-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

/* Fraunces (nur fragen.html und glossar.html) wird nicht lokal
   vorgehalten und auf die Hausschrift zurueckgefuehrt.          */
:root{--display:'Playfair Display',Georgia,serif}

/* ---- 2. Mobilmenue ------------------------------------------------
   25 Seiten schalten per JS die Klasse .is-open an der Navigation um.
   Im CSS gab es diese Klasse nicht, das Menue liess sich dort nicht
   oeffnen. Die Navigation war auf Mobilgeraeten unerreichbar.     */
@media(max-width:1100px){
  .masthead .nav.is-open{display:flex}
}

/* ---- 3. Kein horizontaler Scroll zwischen 981 und 1100 px --------
   Die Desktop-Navigation braucht rund 1060 px, wurde aber schon ab
   981 px eingeblendet. Umschaltpunkt auf 1100 px angehoben.       */
@media(max-width:1100px){
  .masthead .nav{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;gap:0;background:var(--paper);
    border-top:1px solid var(--hair);
    box-shadow:0 18px 30px rgba(21,32,58,.12);padding:6px 0;z-index:60
  }
  .masthead .nav a{padding:14px var(--pad);width:100%;font-size:15px}
  .masthead .menu-toggle{display:inline-flex;align-items:center}
}

/* ---- 4. Zwei Pixel Ueberlauf bei 320 px --------------------------
   Karten und lange, nicht umbrechbare Zeichenketten (z. B. die
   ausgeschriebene ODR-URL im Impressum) sprengten den Viewport.  */
html,body{overflow-x:hidden}
.card,.container,main,section{min-width:0}
main a[href^="http"],main p,main dd,main li{overflow-wrap:anywhere}

/* ---- 5. Kontrast (WCAG 2.2 AA) ------------------------------------
   Gold #b58a37 auf Papier ergibt je nach Flaeche nur 2,68 bis 2,28:1,
   gefordert sind 4,5:1. #7a5810 erreicht 5,53 / 5,05 / 4,69:1 auf den
   drei Papiertoenen und bleibt im selben Farbton.
   Die Auszeichnungen liegen in den Seiten teils mit hoeherer
   Spezifitaet (.card .kick), daher hier mit !important.          */
:root{--gold-text:#7a5810}
.eyebrow,.kick,.related-head,.t,.wordmark span,.brand span,
.card .kick,.entry .kick,article .kick,.section-head .eyebrow,
.is-myth .t{color:var(--gold-text) !important}

/* Fusszeile: #7b8499 auf #15203a ergibt 4,31:1, #949eb2 ergibt 6,0:1 */
.legal span,.site-footer .legal,.site-foot .legal{color:#949eb2 !important}

/* Brotkrumen auf dunklem Grund */
.crumbs{color:#e8e3d6}
.crumbs a{color:#f0d089;text-decoration:underline}

/* ---- 6. Sichtbarer Tastaturfokus ---------------------------------- */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{
  outline:3px solid #8a6413;outline-offset:2px;border-radius:2px
}

/* ---- 7. Touch-Ziele auf Mobilgeraeten ---------------------------- */
@media(max-width:768px) and (pointer:coarse){
  .nav a,.crumbs a,footer a,.card a{min-height:44px;display:inline-flex;align-items:center}
  .menu-toggle{min-height:44px;min-width:44px}
}

/* ---- 8. Alternatives Template (fragen.html, glossar.html) --------
   Dort klappt die Navigation erst ab 44rem (704 px) um, braucht aber
   942 px. Zwischen 705 und 960 px lief sie ueber den Rand hinaus. */
@media (max-width:1100px){
  .site-head .nav{
    display:flex;
    position:fixed;inset:4.75rem 0 auto 0;background:var(--navy);
    flex-direction:column;gap:0;padding:1rem 1.5rem 2rem;
    transform:translateY(-150%);transition:transform .3s ease;z-index:49
  }
  .site-head .nav a{color:var(--paper);padding:.9rem 0;border-bottom:1px solid rgba(255,255,255,.08)}
  #nav-toggle{display:none}
  .nav-toggle{
    display:block;background:none;border:1px solid var(--line-strong);
    font-family:var(--sans);font-size:.72rem;letter-spacing:.14em;
    text-transform:uppercase;color:var(--navy);padding:.6rem 1rem;cursor:pointer
  }
  #nav-toggle:checked ~ .nav{transform:translateY(0)}
}

/* ---- 9. Bewegung reduzieren respektieren -------------------------- */
@media(prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;scroll-behavior:auto}
}

/* ---- 10. Goldener Absendeknopf -------------------------------------
   Navy #1e2d4e auf Gold #b58a37 ergibt 4,32:1, knapp unter den
   geforderten 4,5:1. #15203a auf demselben Gold ergibt 5,12:1.     */
.btn--gold{color:#15203a !important}

/* ---- 11. Brotkrumen im zweiten Template ---------------------------
   Der Link hebt sich dort nur ueber die Deckkraft vom umgebenden Text
   ab (1,48:1 statt der geforderten 3:1). Unterstreichung als zweites,
   nicht farbliches Unterscheidungsmerkmal (WCAG 1.4.1).           */
.crumb a{text-decoration:underline;color:#f4f0e7}
