/* Infobunker — gemeinsame Basis (Phase 0: A11y-Grundgerüst)
   Wird von allen Seiten geladen. Erster Schritt der Design-System-Zentralisierung. */

/* Sichtbarer, konsistenter Fokusring auf allen interaktiven Elementen (WCAG 2.4.7) */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent, #F07C0A);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Skip-Link: versteckt bis Fokus, springt zum Hauptinhalt (WCAG 2.4.1) */
.ib-skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100000;
  padding: 10px 16px;
  background: var(--accent, #F07C0A);
  color: #07090F;
  font-family: var(--font-body, system-ui), sans-serif;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  border-radius: 8px;
  transition: top .15s ease;
}
.ib-skip-link:focus {
  top: 12px;
  outline: 2px solid #07090F;
  outline-offset: 2px;
}

/* Custom-Cursor auf Touch-Geräten und bei reduzierter Bewegung abschalten (A11y) */
@media (hover: none), (pointer: coarse) {
  * { cursor: auto !important; }
  .cursor-dot, .cursor-ring { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .cursor-dot, .cursor-ring { display: none !important; }

  /* Nativen Mauszeiger zurückholen. Die Seiten setzen body{cursor:none}, weil sie einen
     eigenen Cursor zeichnen. Bei reduzierter Bewegung wird der Ersatz-Cursor aber
     ausgeblendet — ohne diese Regel hätte der Besucher dann ÜBERHAUPT KEINEN Zeiger. */
  body, body * { cursor: auto !important; }
  a[href], button, label, summary, select, [role="button"] { cursor: pointer !important; }

  /* Endlos-Animationen wirklich anhalten. Ohne iteration-count behalten sie
     "infinite" und durchlaufen ihren Zyklus mit 0.01ms — also ~100'000× pro Sekunde,
     was flackert statt zu beruhigen. Fehlte auf eltern/schulen/vortraege. */
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto !important; }
}

/* Ohne JavaScript zeichnet niemand den Ersatz-Cursor — dann muss der native bleiben. */
html.ib-nojs body, html.ib-nojs body * { cursor: auto !important; }
html.ib-nojs a[href], html.ib-nojs button, html.ib-nojs label { cursor: pointer !important; }
html.ib-nojs .cursor-dot, html.ib-nojs .cursor-ring { display: none !important; }

/* Senioren-Strecke: ruhige Bedienung — kein Custom-Cursor, nativer Zeiger */
body.ib-senior * { cursor: auto !important; }
body.ib-senior .cursor-dot,
body.ib-senior .cursor-ring { display: none !important; }

/* TL;DR — „Das Wichtigste in 30 Sekunden" */
.ib-tldr-wrap { padding: 36px 24px 4px; }
.ib-tldr { max-width: 820px; margin: 0 auto; padding: 20px 24px; background: rgba(240,124,10,.05); border: 1px solid var(--border-accent, rgba(240,124,10,.3)); border-radius: 12px; }
.ib-tldr-title { font-family: var(--font-mono, ui-monospace, monospace); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent, #F07C0A); margin-bottom: 12px; }
.ib-tldr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.ib-tldr-list li { position: relative; padding-left: 24px; font-size: 14.5px; line-height: 1.55; color: var(--text-secondary, #9A9488); }
.ib-tldr-list li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent, #F07C0A); }
.ib-tldr-list li strong { color: var(--text-primary, #EDE8DF); font-weight: 700; }

/* Footer — EINE Definition für alle 19 Seiten.
   eltern/schulen/vortraege fuhren ein eigenes, abgedriftetes Footer-System (.footer-inner)
   und boten dadurch nur Rechtslinks an — ausgerechnet die Seiten mit dem höchsten
   Auftragswert. Seiten mit eigenem Inline-CSS überschreiben das hier ohnehin (gleiche
   Spezifität, späterer Quelltext gewinnt); dort ändert sich nichts.
   .container ist bewusst auf .footer beschränkt — sonst würde die Regel auf den drei
   Seiten auch andere Elemente mit dieser Klasse erfassen. */
.footer .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.footer-grid { display: grid; grid-template-columns: 1.2fr repeat(4, minmax(0, 145px)); gap: 36px; margin-bottom: 48px; }
@media (max-width: 980px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 560px)  { .footer-grid { grid-template-columns: 1fr; gap: 28px; } }
.footer-brand .nav-logo { display: inline-flex; margin-bottom: 12px; }
.footer-tagline { font-size: 13px; color: var(--text-muted, #8A857A); line-height: 1.6; max-width: 260px; margin-bottom: 20px; }
.footer-badge { font-family: var(--font-mono, monospace); font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-muted, #8A857A); border: 1px solid var(--border-subtle, rgba(237,232,223,.08)); display: inline-block;
  padding: 4px 8px; border-radius: 2px; }
.footer-col-title { font-family: var(--font-mono, monospace); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-muted, #8A857A); margin-bottom: 16px; }
.footer-col ul { display: flex; flex-direction: column; gap: 8px; list-style: none; margin: 0; padding: 0; }
.footer-col a { font-size: 13px; color: var(--text-secondary, #9A9488); text-decoration: none; }
.footer-col a:hover { color: var(--text-primary, #EDE8DF); }
.footer-bottom { padding-top: 24px; border-top: 1px solid var(--border-subtle, rgba(237,232,223,.08));
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.footer-legal { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-legal a { font-family: var(--font-mono, monospace); font-size: 11px; color: var(--text-muted, #8A857A);
  letter-spacing: .04em; text-decoration: none; }
.footer-legal a:hover { color: var(--text-secondary, #9A9488); }

/* Marke — Logo (Nav + Footer) */
.nav-logo, .footer-logo, .footer-brand .nav-logo { display: inline-flex; align-items: center; gap: 9px; }
.ib-mark { width: 26px; height: 29px; flex-shrink: 0; display: block; }
.footer-brand .ib-mark, .footer-logo .ib-mark { width: 24px; height: 27px; }
.nav-logo .ib-word, .footer-logo .ib-word { color: inherit; letter-spacing: .005em; }
.pl-logo { display: inline-flex; flex-direction: column; align-items: center; gap: 14px; }
.pl-logo .ib-mark { width: 46px; height: 51px; }
.pl-logo .ib-word { color: inherit; letter-spacing: .08em; }

/* ────────────────────────────────────────────────────────────────
   Geschlossenes Mobile-Menü aus der Tab-Reihenfolge nehmen.

   Es wurde nur mit opacity:0 + pointer-events:none versteckt. Das blockt die MAUS —
   nicht die Tab-Taste. Wer sich per Tastatur oder Screenreader durch die Seite bewegte,
   lief auf jeder Seite durch 6–7 unsichtbare Links, bevor der Inhalt kam.
   visibility:hidden nimmt sie zusätzlich aus der Fokus-Reihenfolge.

   Das Ausblenden muss dabei sichtbar bleiben: visibility bekommt Dauer 0s und stattdessen
   eine VERZÖGERUNG in Höhe der Blenddauer. Beim Schliessen bleibt das Menü damit während
   des Ausblendens sichtbar und schaltet erst am Ende auf hidden; beim Öffnen greift
   visibility:visible ohne Verzögerung sofort. (Bewusst nicht über die Interpolation von
   visibility gelöst — Dauer 0s + Delay ist das robustere, eindeutig definierte Verhalten.)

   Bewusst LONGHANDS statt der transition-Kurzform: Die Kurzform würde auch
   transition-timing-function überschreiben, und eltern/schulen/vortraege fahren ihr Menü
   ohne Timing-Function (also mit dem Default «ease»). Ihre Kurve bleibt so unangetastet —
   ergänzt wird nur visibility.

   --dur-base steht im :root der meisten Seiten; eltern/schulen/vortraege definieren es
   nicht und nutzen fest .25s — derselbe Wert, den der Fallback liefert.
   ──────────────────────────────────────────────────────────────── */
.mobile-menu {
  visibility: hidden;
  transition-property: opacity, transform, visibility;
  transition-duration: var(--dur-base, .25s), var(--dur-base, .25s), 0s;
  transition-delay: 0s, 0s, var(--dur-base, .25s);
}
.mobile-menu.is-open {
  visibility: visible;
  transition-delay: 0s, 0s, 0s;
}

/* ────────────────────────────────────────────────────────────────
   Ohne JavaScript darf der Preloader die Seite nicht verdecken.

   #preloader liegt mit position:fixed; inset:0; z-index:10000 über allem und wurde
   ausschliesslich per JavaScript entfernt. Ohne JS (oder wenn ein Script scheitert)
   blieb die Startseite vollständig hinter einer leeren Fläche verborgen — auch für
   Crawler, die kein JS ausführen. html.ib-nojs bleibt genau dann stehen, wenn das
   Inline-Script im <head> nie lief.
   ──────────────────────────────────────────────────────────────── */
html.ib-nojs #preloader { display: none !important; }
/* Kein overflow-Reset nötig: Die Scroll-Sperre hängt an html.ib-loading, und die Klasse
   setzt ausschliesslich JavaScript — ohne JS wird sie nie vergeben. Ein pauschales
   «overflow:auto !important» würde hier nur das bewusst gesetzte overflow-x:hidden der
   Seiten aushebeln und horizontales Ruckeln erlauben. */