/* ═══════════════════════════════════════════════════════════════════════════
   IBC INTRANET – REFINE LAYER
   Wird als LETZTES globales Stylesheet geladen (nach theme.css, tailwind.css
   und ui-fixes.css), aber VOR den seiteneigenen <style>-Blöcken. Damit hebt
   diese Datei den Boden für alle Seiten an, ohne die gestalterische Absicht
   einzelner Seiten zu überschreiben.

   Grundsätze
   ──────────
   • Additiv, nicht destruktiv: keine Marken-/Akzentfarben überschreiben.
   • !important nur dort, wo es um Barrierefreiheit oder um einen echten
     Mobile-Bug geht (Punkte 1 und 2) – sonst gewinnt die Seite.
   • Alles arbeitet mit den Tokens aus theme.css, damit Light/Dark automatisch
     mitlaufen.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ══ 1. iOS-ZOOM BEIM FOKUS VERHINDERN ─────────────────────────────────────
   Safari auf iOS zoomt die Seite, sobald ein fokussiertes Eingabefeld eine
   Schriftgröße unter 16px hat. Mehrere Seiten setzen 0.95rem (= 15.2px), was
   auf dem iPhone bei jedem Tap in ein Feld einen Zoom-Sprung auslöst.
   Nur unterhalb des Tablet-Breakpoints erzwingen – das Desktop-Design bleibt
   damit exakt wie es ist.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
    select,
    textarea {
        font-size: 16px !important;
    }
}


/* ══ 2. SICHTBARER TASTATURFOKUS (WCAG 2.4.7) ──────────────────────────────
   Sicherheitsnetz: theme.css deckt viele Komponenten ab, aber nicht alle.
   Diese Regel greift nur, wenn die Seite selbst keinen Fokus-Ring definiert –
   sie setzt den Standard, überschreibt aber nichts Spezifischeres.
   ────────────────────────────────────────────────────────────────────────── */
:where(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"]), [role="button"], [role="link"], [role="tab"]):focus-visible {
    outline: 3px solid var(--ibc-accent, #ff6b35);
    outline-offset: 2px;
    border-radius: var(--radius-sm, 8px);
}

/* Maus-/Touch-Klicks sollen keinen Ring zeigen – nur echte Tastaturnavigation */
:where(a, button, [role="button"]):focus:not(:focus-visible) {
    outline: none;
}

/* Skip-Link: für Screenreader/Tastatur erreichbar, sonst unsichtbar */
.skip-to-content {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 10000;
    padding: 0.75rem 1.25rem;
    background: var(--ibc-blue, #0066b3);
    color: #fff;
    font-weight: 700;
    border-radius: 0 0 var(--radius-sm, 8px) 0;
    text-decoration: none;
}
.skip-to-content:focus {
    left: 0;
}


/* ══ 3. LAYOUT NIEMALS HORIZONTAL SPRENGEN ─────────────────────────────────
   Lange E-Mail-Adressen, URLs und Tokens sind die häufigste Ursache für
   seitliches Scrollen auf dem Handy.
   ────────────────────────────────────────────────────────────────────────── */
/* Bewusst KEIN "overflow-x: hidden" auf html/body: das macht den Body zum
   Scroll-Container und bricht "position: sticky" (z. B. thead.sticky-top in
   theme.css). Messungen bei 320px zeigen ohnehin keinen horizontalen Overflow –
   die Ursache wird stattdessen gezielt behandelt (Umbruchregeln unten). */
html, body {
    max-width: 100%;
}

/* Nur Inhalts-Text umbrechen – Layout-Container bleiben unangetastet */
:where(p, li, dd, dt, td, th, figcaption, blockquote, label, small) {
    overflow-wrap: anywhere;
}

/* Verlinkte Adressen und Codes brechen sauber um */
:where(a[href^="mailto:"], a[href^="tel:"], code, kbd, samp, .break-anywhere) {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Medien bleiben im Container */
:where(img, svg, video, canvas, iframe) {
    max-width: 100%;
    height: auto;
}

/* Codeblöcke scrollen in sich statt die Seite zu verbreitern */
:where(pre) {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}


/* ══ 4. TABELLEN AUF KLEINEN SCHIRMEN ──────────────────────────────────────
   Wrapper mit overflow-x bekommen einen dezenten Hinweis, dass es seitlich
   weitergeht, und behalten flüssiges Touch-Scrolling.
   ────────────────────────────────────────────────────────────────────────── */
:where(.table-responsive, .overflow-x-auto, .sb-table-wrap, [class*="table-wrap"]) {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

@media (max-width: 767px) {
    /* Tabellen in Scroll-Containern nicht künstlich stauchen */
    :where(.table-responsive, .overflow-x-auto) > table {
        min-width: max-content;
    }
}


/* ══ 5. TOUCH-BEDIENUNG ────────────────────────────────────────────────────
   Auf Zeigegeräten ohne Feinauflösung (Finger) bekommen Bedienelemente eine
   komfortable Mindesthöhe. Icon-Buttons in dichten Tabellen sind bewusst
   ausgenommen, damit Zeilen nicht auseinanderfallen.
   ────────────────────────────────────────────────────────────────────────── */
@media (pointer: coarse) {
    /* Auch als Buttons gestaltete <a>-Elemente erfassen. Das Projekt nutzt
       dafür Klassen wie sb-btn, imp-btn, awp-btn, evv-cta-button,
       d-quick-action oder adm-action-item – ohne diese Muster blieben sie bei
       36-38px und damit unter der Mindestgröße für Fingerbedienung.
       Ausgenommen bleiben kompakte Icon- und Schließen-Schaltflächen in
       dichten Tabellen sowie reine Textlinks im Fließtext. */
    :where(
        button, [role="button"], input[type="submit"], input[type="button"],
        .btn, .button,
        [class*="btn"], [class*="button"],
        [class*="quick-action"], [class*="action-item"],
        /* Navigationseintraege: Seitenleiste (30 Punkte), mobile Leiste und
           Profil-Dropdown liegen bei 39-43px. Auf Tablets im Querformat wird
           die Seitenleiste per Finger bedient, deshalb gehoeren sie dazu. */
        [class*="nav-item"], [class*="dropdown-item"],
        /* .ibc-btn-like markiert Links, die per Inline-Style als Button
           gestaltet sind und keine eigene Klasse hatten */
        .ibc-btn-like
    ):not(.btn-icon):not([class*="icon-btn"]):not([class*="-icon"]):not([class*="-close"]):not([class*="close-"]) {
        /* !important ist hier noetig: mehrere Schaltflaechen tragen
           min-height:2.5rem (40px) als Inline-Style, und Inline-Styles schlagen
           jedes Stylesheet. Ohne !important bliebe die Mindestgroesse fuer
           Fingerbedienung wirkungslos. Gilt nur unter pointer:coarse. */
        min-height: 44px !important;
    }

    /* Tap-Highlight auf iOS entschärfen (wir haben eigene :active-Zustände) */
    a, button, [role="button"] {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.06);
    }
}


/* ══ 6. FORMULARE – FEINSCHLIFF ────────────────────────────────────────────*/

/* Pflichtfeld-Sternchen einheitlich */
:where(label) .req,
:where(label) .required {
    color: var(--ibc-error, #ef4444);
}

/* Autofill in Chrome überschreibt sonst Hintergrund und Textfarbe */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-text-fill-color: var(--text-main, #111827);
    -webkit-box-shadow: 0 0 0 1000px var(--bg-input, #fff) inset;
    box-shadow: 0 0 0 1000px var(--bg-input, #fff) inset;
    transition: background-color 9999s ease-in-out 0s;
    caret-color: var(--text-main, #111827);
}

.dark-mode input:-webkit-autofill,
[data-theme="dark"] input:-webkit-autofill,
.dark-mode textarea:-webkit-autofill,
[data-theme="dark"] textarea:-webkit-autofill {
    -webkit-text-fill-color: #f9fafb;
    -webkit-box-shadow: 0 0 0 1000px #1f2937 inset;
    box-shadow: 0 0 0 1000px #1f2937 inset;
}

/* Deaktivierte Felder klar als solche erkennbar */
:where(input, select, textarea, button):disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

/* Ungültige Felder erst nach Interaktion markieren, nicht beim Laden */
:where(input, select, textarea):user-invalid {
    border-color: var(--ibc-error, #ef4444);
}


/* ══ 7. TYPOGRAFIE-RHYTHMUS ────────────────────────────────────────────────
   Nur als Fallback über :where() (Spezifität 0) – jede Seite, die eigene
   Größen setzt, gewinnt weiterhin. Fluid via clamp(), damit Überschriften auf
   dem Handy nicht umbrechen und auf grossen Schirmen nicht verloren wirken.
   ────────────────────────────────────────────────────────────────────────── */
:where(h1) { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2rem);   line-height: 1.2;  letter-spacing: -0.02em; }
:where(h2) { font-size: clamp(1.25rem, 1rem + 1.1vw, 1.6rem);  line-height: 1.25; letter-spacing: -0.015em; }
:where(h3) { font-size: clamp(1.06rem, 0.95rem + 0.5vw, 1.25rem); line-height: 1.3; }
:where(h1, h2, h3, h4, h5, h6) { text-wrap: balance; }
:where(p) { text-wrap: pretty; }


/* ══ 8. SCROLLBAR & TEXTAUSWAHL ────────────────────────────────────────────*/
@media (min-width: 768px) {
    :where(.scroll-area, .modal-body, [class*="-scroll"])::-webkit-scrollbar { width: 10px; height: 10px; }
    :where(.scroll-area, .modal-body, [class*="-scroll"])::-webkit-scrollbar-track { background: transparent; }
    :where(.scroll-area, .modal-body, [class*="-scroll"])::-webkit-scrollbar-thumb {
        background: var(--ibc-gray-300, #d1d5db);
        border-radius: 9999px;
    }
    .dark-mode :where(.scroll-area, .modal-body, [class*="-scroll"])::-webkit-scrollbar-thumb,
    [data-theme="dark"] :where(.scroll-area, .modal-body, [class*="-scroll"])::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.18);
    }
}

/* Sanftes Scrollen zu Ankern, ohne unter der fixierten Navbar zu landen */
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}
:where([id]) { scroll-margin-top: 5rem; }


/* ══ 9. BEDIENHILFEN-EINSTELLUNGEN RESPEKTIEREN ────────────────────────────*/

/* Höherer Kontrast, wenn das Betriebssystem danach fragt (fehlte bisher) */
@media (prefers-contrast: more) {
    :where(.card, .dir-card, .sb-card, .modal, input, select, textarea, table, td, th) {
        border-width: 2px;
    }
    :where(a) { text-decoration: underline; }
    :where(.badge, [class*="-badge"], [class*="-chip"]) { border: 1px solid currentColor; }
}

/* Bewegung reduzieren – vollständig, inklusive Scroll und Parallax-Deko */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    /* Dekorative Hintergrundanimationen ganz abschalten */
    .floating-orb, .light-beam, .smooth-particle, .gradient-wave, .animated-grid {
        display: none !important;
    }
}


/* ══ 10. DRUCKAUSGABE ──────────────────────────────────────────────────────
   Bisher nur punktuell vorhanden. Ziel: jede Seite lässt sich als lesbares
   Dokument ausdrucken – ohne Navigation, ohne Farbflächen.
   ────────────────────────────────────────────────────────────────────────── */
@media print {
    /* Navigation, Aktionen und Deko raus */
    #sidebar, .sidebar, #mobile-bottom-nav, .navbar, .topbar,
    .sidebar-overlay, .background-wrapper, .floating-orb, .light-beam,
    .smooth-particle, .animated-grid, .gradient-wave, .gradient-bg,
    button, .btn, [role="button"], .no-print, .dir-contact-icons,
    .modal, .modal-overlay, [class*="-modal-overlay"] {
        display: none !important;
    }

    /* Inhalt volle Breite, schwarz auf weiss */
    html, body {
        background: #fff !important;
        color: #000 !important;
        font-size: 11pt;
    }

    #main-content, main, .content-wrapper {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Karten als flache Blöcke, nicht über Seitenumbrüche zerreissen */
    :where(.card, .dir-card, .sb-card, section, article) {
        box-shadow: none !important;
        border: 1px solid #ccc !important;
        background: #fff !important;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    :where(h1, h2, h3) { break-after: avoid; page-break-after: avoid; }
    :where(table) { break-inside: auto; }
    :where(tr, img) { break-inside: avoid; page-break-inside: avoid; }
    :where(thead) { display: table-header-group; }

    /* Ziel von Links mitdrucken – auf Papier sonst wertlos */
    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 9pt;
        color: #555;
        word-break: break-all;
    }
    a[href^="#"]::after, a[href^="mailto:"]::after { content: ""; }

    @page { margin: 1.5cm; }
}


/* ══ 11. KLEINE KONSISTENZ-KORREKTUREN ─────────────────────────────────────*/

/* Leere Zustände einheitlich ruhig statt zufällig unterschiedlich */
:where(.empty-state, [class*="-empty"]) {
    text-align: center;
    color: var(--text-muted, #4b5563);
}

/* Schaltflaechen-Beschriftungen nie mitten im Wort trennen. Auf schmalen
   Schirmen entstand sonst "Jetzt / einrichte / n". Der Text darf weiterhin
   zwischen Woertern umbrechen - nur eben nicht innerhalb eines Wortes. */
:where(button, [role="button"], .btn, .button, [class*="btn"], [class*="button"], .ibc-btn-like) {
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
}

/* Badges/Chips brechen nicht mitten im Wort um */
:where(.badge, [class*="-badge"], [class*="-chip"]) {
    white-space: nowrap;
}

/* Bilder in Karten nie verzerrt */
:where(.card img, .dir-card img, [class*="-card"] img) {
    object-fit: cover;
}

/* Textauswahl in Markenfarbe */
::selection {
    background: rgba(0, 102, 179, 0.22);
}

/* ── Formularsteuerelemente nie zusammendrücken ─────────────────────────────
   In Flex-Zeilen (Label + Text) schrumpften Checkboxen und Radiobuttons bei
   langem Text auf wenige Pixel (Profil: „Lebenslauf aus Job-Gesuch …"). */
input[type="checkbox"],
input[type="radio"] {
    flex-shrink: 0;
}

/* ── Kleine Textlinks auf Touch-Geräten ─────────────────────────────────────
   Footer-Links, „Alle ansehen", Zurück-Links und Kontaktlinks waren nur
   15–24px hoch. Padding vergrößert die Trefferfläche, der gleich große
   negative Margin hält das Layout unverändert. */
@media (pointer: coarse) {
    :where(footer a, .d-section-link, .memv-back-link, .vc-info-row a,
           a[href^="mailto:"], a[href^="tel:"], a[href^="applications.php"]) {
        padding-block: 0.625rem;
        margin-block: -0.625rem;
    }
}

/* ── Abstand unter der mobilen Kopfleiste ───────────────────────────────────
   Die mobile Kopfleiste liegt im Seitenfluss (nicht fixiert). Ältere Regeln
   (theme.css: padding-top 4.5rem, main_layout: Höhe der Leiste) reservierten
   trotzdem noch einmal ihren Platz – auf jedem Handy entstand dadurch ein
   Leerraum von rund 72px zwischen Leiste und Inhalt. Ab 768px (Desktop-
   Navigation) greift weiterhin das bisherige Layout. */
@media (max-width: 767.98px) {
    html body main#main-content {
        padding-top: 1rem !important;
    }
}

/* ── Silbentrennung für Überschriften und Versal-Beschriftungen ─────────────
   In schmalen Karten brachen lange Wörter bisher an beliebiger Stelle
   („AUSSTEHE|NDE", „Spendenbescheinigunge|n"). Mit lang="de" trennt der
   Browser stattdessen an Silbengrenzen und setzt einen Trennstrich. Fließtext
   bleibt bewusst ausgenommen, damit Absätze ruhig wirken.
   Spezifität (html + Klasse) ist nötig: theme.css und ein Inline-Style im
   Layout setzen für p/span/h1–h3 ausdrücklich „hyphens: manual". */
html :is(h1, h2, h3, h4, .uppercase) {
    -webkit-hyphens: auto;
    hyphens: auto;
    /* nur Wörter ab 10 Zeichen, mind. 4 Zeichen je Teil („Artikel" bleibt ganz) */
    hyphenate-limit-chars: 10 4 4;
}