/* ==========================================================================
   IBC Polish (Oktober 2026)
   --------------------------------------------------------------------------
   Wird auf jeder Seite als LETZTES Stylesheet geladen und behebt gezielt
   Darstellungsfehler, die durch die vielen übereinanderliegenden älteren
   Stylesheets entstanden sind:

     1. Überschriften mit Farbverlauf (doppelt gemalter Text in Chrome)
     2. Überschriften: Umbruch, Größe, Lesbarkeit auf dem Handy
     3. Navbar auf Handy/Tablet (immer Logo + Menü-Button, kein FAB mehr)
     4. Mobiles Vollbild-Menü (Schließen-Button oben statt über „Kontakt“)
     5. Buttons: Text unter der Glanz-Ebene
     6. „Projekt starten?“-Hinweis
     7. Cookie-Banner (neu)
     8. KI-Chat-Assistent
     9. Allgemeine Responsive-Absicherung
   ========================================================================== */

:root {
    --ibc-p-green: #6D9744;
    --ibc-p-green-dark: #4f7230;
    --ibc-p-navy: #20234A;
    --ibc-p-navy-2: #2b3070;
    --ibc-p-ink: #1b1e3c;
    --ibc-p-muted: #5b6075;
    --ibc-p-surface: #ffffff;
    --ibc-p-surface-2: #f4f6f2;
    --ibc-p-line: rgba(32, 35, 74, 0.12);
    --ibc-p-radius: 20px;
    --ibc-p-shadow: 0 24px 60px -18px rgba(20, 24, 60, 0.35), 0 8px 20px -10px rgba(20, 24, 60, 0.25);
    --ibc-p-ease: cubic-bezier(.22, 1, .36, 1);
    --ibc-p-gutter: 16px;
}

/* ==========================================================================
   1. ÜBERSCHRIFTEN MIT FARBVERLAUF
   Chrome malt den Text eines inline-block-Kindes doppelt, wenn sowohl die
   Überschrift als auch das Kind „background-clip: text“ nutzen
   („Unsere Beratungsfelder“ → „BeraUnsere…“). Lösung: Nur die
   hervorgehobenen Wörter bekommen den Verlauf, die Überschrift selbst
   wird normal eingefärbt.
   ========================================================================== */
:is(h1, h2, h3, h4, .heading-premium-gradient):has(.text-gradient, .highlight-gradient) {
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: currentColor !important;
}

:is(h1, h2, h3, h4, .heading-premium-gradient) :is(.text-gradient, .highlight-gradient) {
    display: inline !important;
    position: static !important;
    transform: none !important;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    padding-bottom: 0.06em; /* Unterlängen (g, p) nicht abschneiden */
}

/* Verschachtelte Variante („Unser Projektablauf“): äußerer Span ohne Verlauf */
.heading-premium-gradient:has(.highlight-gradient, .text-gradient) {
    color: var(--ibc-p-navy) !important;
}

/* ==========================================================================
   2. ÜBERSCHRIFTEN: UMBRUCH & GRÖSSE
   Keine automatischen Silbentrennungen in Überschriften („Medienkonzep-
   tion“), stattdessen ausgewogene Zeilen und Notfall-Umbruch für sehr
   lange deutsche Wörter.
   ========================================================================== */
h1, h2, h3, h4, h5, h6,
.ibc-heading, .section-heading {
    -webkit-hyphens: manual !important;
    hyphens: manual !important;
    overflow-wrap: break-word;
    word-break: normal;
    text-wrap: balance;
}

p, li, .ibc-lead {
    text-wrap: pretty;
}

@media (max-width: 575.98px) {
    h1.ibc-heading, .page-hero-section h1, .hero-section h1 {
        font-size: clamp(1.85rem, 8.4vw, 2.4rem) !important;
        line-height: 1.12 !important;
    }
    h2.ibc-heading, h2.section-heading, section h2 {
        font-size: clamp(1.45rem, 6.6vw, 1.9rem) !important;
        line-height: 1.2 !important;
    }
    main h3 {
        font-size: clamp(1.1rem, 5vw, 1.35rem) !important;
        line-height: 1.28 !important;
    }
    /* Lange Wörter in schmalen Karten dürfen notfalls umbrechen */
    .card h3, [class*="card"] h3, [class*="card"] h4 {
        -webkit-hyphens: auto !important;
        hyphens: auto !important;
        hyphenate-limit-chars: 10 4 4;
    }
}

/* Untertitel unter Abschnittsüberschriften: nicht zu blass */
.section-subtitle, .ibc-lead.text-muted, .timeline-subtitle {
    color: var(--ibc-p-muted) !important;
}

/* ==========================================================================
   3. NAVBAR AUF HANDY & TABLET (< 1200 px)
   Die Pille zeigt immer Logo links und Menü-Button rechts (früher wurde der
   Button beim Scrollen durch einen runden FAB ersetzt → leere Pille).
   ========================================================================== */
@media (max-width: 1199.98px) {
    .navbar .navbar-toggler,
    .navbar.scrolled .navbar-toggler {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    .navbar,
    .navbar.scrolled {
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        width: calc(100% - 2 * 12px) !important;
        max-width: 640px !important;
        top: max(10px, env(safe-area-inset-top)) !important;
        border-radius: 999px !important;
        padding: 6px 8px 6px 18px !important;
        background: rgba(255, 255, 255, 0.92) !important;
        backdrop-filter: blur(16px) saturate(140%) !important;
        -webkit-backdrop-filter: blur(16px) saturate(140%) !important;
        border: 1px solid rgba(255, 255, 255, 0.65) !important;
        box-shadow: 0 10px 30px -12px rgba(20, 24, 60, 0.35) !important;
        min-height: 0 !important;
    }

    .navbar::before,
    .navbar.scrolled::before {
        display: none !important;
    }

    .navbar > .container {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 0 !important;
        max-width: none !important;
        width: 100% !important;
    }

    .navbar .navbar-brand {
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
    }

    .navbar .navbar-logo,
    .navbar.scrolled .navbar-logo {
        height: 30px !important;
        width: auto !important;
    }

    .navbar .navbar-toggler,
    .navbar.scrolled .navbar-toggler {
        width: 44px !important;
        height: 44px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 50% !important;
        background: var(--ibc-p-navy) !important;
        box-shadow: none !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: static !important;
        transform: none !important;
    }

    .navbar .navbar-toggler .toggler-icon {
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
        width: 18px !important;
        height: auto !important;
        background: none !important;
    }

    .navbar .navbar-toggler .toggler-bar {
        display: block !important;
        width: 18px !important;
        height: 2px !important;
        border-radius: 2px !important;
        background: #fff !important;
        margin: 0 !important;
        opacity: 1 !important;
        transform: none !important;
        position: static !important;
        top: auto !important;
        left: auto !important;
    }

    /* Geöffnet: Balken werden zum X */
    .navbar .navbar-toggler[aria-expanded="true"] .toggler-bar:nth-child(1) {
        transform: translateY(6px) rotate(45deg) !important;
    }
    .navbar .navbar-toggler[aria-expanded="true"] .toggler-bar:nth-child(2) {
        opacity: 0 !important;
    }
    .navbar .navbar-toggler[aria-expanded="true"] .toggler-bar:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg) !important;
    }

    .navbar .navbar-toggler:focus-visible {
        outline: 3px solid var(--ibc-p-green) !important;
        outline-offset: 2px !important;
    }

    /* Bootstrap-Collapse auf dem Handy nie anzeigen – das Overlay übernimmt */
    .navbar .navbar-collapse {
        display: none !important;
    }
}

/* ==========================================================================
   4. MOBILES VOLLBILD-MENÜ
   Vorher saß der runde Schließen-Button fest über „Kontakt“.
   Jetzt: Kopfzeile mit Logo links und Schließen-Button rechts oben.
   ========================================================================== */
.mobile-nav-overlay {
    padding: 0 20px calc(env(safe-area-inset-bottom, 0px) + 28px) !important;
    background:
        radial-gradient(120% 60% at 100% 0%, rgba(109, 151, 68, 0.28), transparent 60%),
        linear-gradient(180deg, rgba(20, 24, 56, 0.97), rgba(14, 17, 40, 0.98)) !important;
    justify-content: flex-start !important;
}

.mobile-nav-head {
    position: sticky;
    top: 0;
    z-index: 2;
    width: 100%;
    max-width: 560px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: max(14px, env(safe-area-inset-top)) 0 14px;
    margin-bottom: 8px;
}

.mobile-nav-head a {
    display: inline-flex;
    line-height: 0;
}

.mobile-nav-head .mobile-nav-logo {
    height: 28px !important;
    width: auto !important;
    max-width: 120px !important;
    padding: 8px 14px;
    box-sizing: content-box;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.95);
}

.mobile-nav-overlay .mobile-nav-close-btn {
    position: static !important;
    transform: none !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    background: rgba(255, 255, 255, 0.1) !important;
    font-size: 18px !important;
    flex: 0 0 auto;
}

.mobile-nav-overlay .mobile-nav-close-btn:hover,
.mobile-nav-overlay .mobile-nav-close-btn:focus-visible {
    transform: none !important;
    background: rgba(255, 255, 255, 0.2) !important;
}

.mobile-nav-overlay .mobile-nav-list {
    margin: auto 0 !important; /* vertikal mittig, wenn Platz ist */
    max-width: 560px !important;
    gap: 8px !important;
}

.mobile-nav-overlay .mobile-nav-list .nav-link {
    min-height: 54px !important;
    font-size: 18px !important;
    padding: 0.85rem 1.25rem !important;
    border-radius: 16px !important;
}

.mobile-nav-overlay .mobile-nav-list .lang-dropdown {
    padding-top: 12px !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
}

.mobile-nav-overlay .mobile-nav-list .lang-item {
    padding: 0.5rem 0.75rem !important;
    font-size: 14px !important;
    gap: 6px !important;
    white-space: nowrap;
}

.mobile-nav-overlay .mobile-nav-list .lang-item .flag-img {
    width: 20px !important;
    height: auto !important;
}

/* ==========================================================================
   5. BUTTONS: TEXT LAG UNTER DER GLANZ-EBENE (wirkte grau)
   ========================================================================== */
.ethereal-button {
    isolation: isolate;
}

.ethereal-button::before,
.ethereal-button::after {
    z-index: -1 !important;
}

.hero-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

@media (max-width: 575.98px) {
    .hero-cta-row > .btn {
        width: 100%;
        max-width: 360px;
    }
}

/* ==========================================================================
   6. „PROJEKT STARTEN?“-HINWEIS (nur fuer-unternehmen.html)
   Helle Karte mit Maskottchen, klarer Handlungsaufforderung und „Später“.
   ========================================================================== */
#mobile-sticky-cta {
    position: fixed !important;
    left: 16px !important;
    right: auto !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 16px) !important;
    width: min(360px, calc(100vw - 32px - 72px)) !important; /* rechts Platz für den Chat-Button */
    max-width: none !important;
    padding: 0 !important;
    border-radius: 22px !important;
    border: 1px solid var(--ibc-p-line) !important;
    background: #fff !important;
    color: var(--ibc-p-ink) !important;
    box-shadow: 0 24px 60px -20px rgba(20, 24, 60, 0.45), 0 6px 18px -8px rgba(20, 24, 60, 0.2) !important;
    overflow: hidden !important;
    z-index: 1040 !important;
    opacity: 1 !important;
    transform: none !important;
    transition: opacity 0.35s ease, transform 0.45s var(--ibc-p-ease) !important;
}

#mobile-sticky-cta.is-hidden {
    opacity: 0 !important;
    transform: translateY(24px) scale(0.98) !important;
    pointer-events: none;
}

/* dezenter Farbverlauf-Streifen oben */
#mobile-sticky-cta::before {
    content: "" !important;
    display: block !important;
    height: 4px !important;
    border-radius: 0 !important;
    background: linear-gradient(90deg, var(--ibc-p-green), var(--ibc-p-navy)) !important;
}

#mobile-sticky-cta .mobile-cta-inner {
    padding: 14px 16px 16px !important;
    display: block !important;
}

#mobile-sticky-cta .mobile-cta-header {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 0 10px !important;
}

#mobile-sticky-cta .mobile-cta-avatar {
    width: 44px !important;
    height: 44px !important;
    flex: 0 0 44px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    background: var(--ibc-p-surface-2);
    border: 2px solid rgba(109, 151, 68, 0.35);
}

#mobile-sticky-cta .mobile-cta-label {
    flex: 1 1 auto !important;
    min-width: 0;
    font-size: 0.74rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--ibc-p-green-dark) !important;
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
}

#mobile-sticky-cta .mobile-cta-close {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    flex: 0 0 34px !important;
    border-radius: 50% !important;
    border: 0 !important;
    background: var(--ibc-p-surface-2) !important;
    color: var(--ibc-p-muted) !important;
    font-size: 20px !important;
    line-height: 1 !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    cursor: pointer;
}

#mobile-sticky-cta .mobile-cta-close:hover,
#mobile-sticky-cta .mobile-cta-close:focus-visible {
    background: #e7ebe2 !important;
    color: var(--ibc-p-navy) !important;
}

#mobile-sticky-cta .mobile-cta-tagline {
    margin: 0 0 4px !important;
    font-size: 1.2rem !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    color: var(--ibc-p-navy) !important;
    -webkit-text-fill-color: var(--ibc-p-navy) !important;
}

#mobile-sticky-cta .mobile-cta-sub {
    margin: 0 0 14px !important;
    font-size: 0.9rem !important;
    line-height: 1.45 !important;
    color: var(--ibc-p-muted) !important;
}

#mobile-sticky-cta .mobile-cta-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

#mobile-sticky-cta .mobile-cta-btn {
    flex: 1 1 auto;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-height: 46px !important;
    padding: 0 16px !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, var(--ibc-p-green), #557a33) !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    text-decoration: none !important;
    box-shadow: 0 10px 20px -10px rgba(79, 114, 48, 0.9) !important;
    transition: transform 0.2s var(--ibc-p-ease), box-shadow 0.2s ease !important;
}

#mobile-sticky-cta .mobile-cta-btn:hover,
#mobile-sticky-cta .mobile-cta-btn:focus-visible {
    transform: translateY(-1px) !important;
    box-shadow: 0 14px 24px -10px rgba(79, 114, 48, 0.95) !important;
}

#mobile-sticky-cta .mobile-cta-arrow {
    font-style: normal !important;
    transition: transform 0.2s var(--ibc-p-ease);
}

#mobile-sticky-cta .mobile-cta-btn:hover .mobile-cta-arrow {
    transform: translateX(3px);
}

#mobile-sticky-cta .mobile-cta-later {
    flex: 0 0 auto;
    min-height: 46px;
    padding: 0 12px;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: var(--ibc-p-muted);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}

#mobile-sticky-cta .mobile-cta-later:hover,
#mobile-sticky-cta .mobile-cta-later:focus-visible {
    background: var(--ibc-p-surface-2);
    color: var(--ibc-p-navy);
}

/* Nicht stören, wenn Chat, Menü oder Cookie-Banner offen sind */
html.ibc-chat-open #mobile-sticky-cta,
html.ibc-cc-open #mobile-sticky-cta,
body.mobile-nav-open #mobile-sticky-cta {
    opacity: 0 !important;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    #mobile-sticky-cta {
        transition: opacity 0.2s ease !important;
    }
}

/* ==========================================================================
   7. COOKIE-BANNER (js/cookie-consent.js)
   Handy: Bottom-Sheet · ab Tablet: schwebende Karte unten links
   ========================================================================== */
.ibc-cc {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
    visibility: hidden;
    pointer-events: none;
    font-family: inherit;
}

.ibc-cc--visible {
    visibility: visible;
    pointer-events: auto;
}

.ibc-cc__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(12, 14, 34, 0.45);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity 0.35s ease;
}

.ibc-cc--visible .ibc-cc__backdrop {
    opacity: 1;
}

.ibc-cc__card {
    position: relative;
    width: 100%;
    max-height: min(88vh, 88dvh);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--ibc-p-surface);
    color: var(--ibc-p-ink);
    border-radius: 24px 24px 0 0;
    padding: 22px var(--ibc-p-gutter) calc(env(safe-area-inset-bottom, 0px) + 18px);
    box-shadow: 0 -12px 40px -12px rgba(12, 14, 34, 0.4);
    transform: translateY(24px);
    opacity: 0;
    transition: transform 0.45s var(--ibc-p-ease), opacity 0.3s ease;
}

.ibc-cc--visible .ibc-cc__card {
    transform: none;
    opacity: 1;
}

.ibc-cc__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.ibc-cc__icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: rgba(109, 151, 68, 0.14);
    color: var(--ibc-p-green-dark);
    font-size: 19px;
}

.ibc-cc .ibc-cc__title {
    flex: 1 1 auto;
    margin: 0;
    font-size: 1.15rem !important;
    line-height: 1.25 !important;
    font-weight: 800;
    color: var(--ibc-p-navy) !important;
    -webkit-text-fill-color: var(--ibc-p-navy) !important;
    background: none !important;
    text-align: left;
    padding: 0 !important;
}

.ibc-cc .ibc-cc__title::before,
.ibc-cc .ibc-cc__title::after,
.ibc-cc .ibc-cc__cat-title::before,
.ibc-cc .ibc-cc__cat-title::after,
.ibc-chat-head .ibc-chat-head__title::before,
.ibc-chat-head .ibc-chat-head__title::after {
    content: none !important;
    display: none !important;
}

.ibc-cc__lang {
    flex: 0 0 auto;
    display: inline-flex;
    padding: 3px;
    gap: 2px;
    border-radius: 999px;
    background: var(--ibc-p-surface-2);
    border: 1px solid var(--ibc-p-line);
}

.ibc-cc__lang-btn {
    border: 0;
    background: transparent;
    color: var(--ibc-p-muted);
    font: inherit;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 6px 9px;
    width: auto !important;
    min-width: 34px;
    flex: 0 0 auto;
    white-space: nowrap;
    min-height: 30px;
    border-radius: 999px;
    cursor: pointer;
}

.ibc-cc__lang-btn.active {
    background: var(--ibc-p-navy);
    color: #fff;
}

.ibc-cc .ibc-cc__text {
    margin: 0 0 14px;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--ibc-p-muted) !important;
    -webkit-hyphens: auto;
    hyphens: auto;
}

.ibc-cc__details {
    display: grid;
    gap: 8px;
    margin: 0 0 14px;
}

.ibc-cc__details[hidden] {
    display: none;
}

.ibc-cc__cat {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 14px;
    background: var(--ibc-p-surface-2);
    border: 1px solid var(--ibc-p-line);
}

.ibc-cc__cat-info {
    flex: 1 1 auto;
    min-width: 0;
}

.ibc-cc .ibc-cc__cat-title {
    margin: 0 0 2px;
    font-size: 0.95rem !important;
    line-height: 1.3 !important;
    font-weight: 700;
    color: var(--ibc-p-navy) !important;
    -webkit-text-fill-color: var(--ibc-p-navy) !important;
    background: none !important;
    text-align: left;
}

.ibc-cc .ibc-cc__cat-desc {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--ibc-p-muted) !important;
}

.ibc-cc__switch {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}

.ibc-cc__switch input {
    position: absolute;
    width: 46px;
    height: 26px;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
}

.ibc-cc__switch input:disabled {
    cursor: not-allowed;
}

.ibc-cc__slider {
    position: relative;
    width: 46px;
    height: 26px;
    border-radius: 999px;
    background: #c9cdd8;
    transition: background 0.2s ease;
}

.ibc-cc__slider::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    transition: transform 0.25s var(--ibc-p-ease);
}

.ibc-cc__switch input:checked + .ibc-cc__slider {
    background: var(--ibc-p-green);
}

.ibc-cc__switch input:checked + .ibc-cc__slider::after {
    transform: translateX(20px);
}

.ibc-cc__switch input:disabled + .ibc-cc__slider {
    opacity: 0.55;
}

.ibc-cc__switch input:focus-visible + .ibc-cc__slider {
    outline: 3px solid var(--ibc-p-navy);
    outline-offset: 2px;
}

.ibc-cc__always {
    font-size: 0.66rem;
    font-weight: 600;
    color: var(--ibc-p-muted);
    white-space: nowrap;
}

.ibc-cc__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.ibc-cc__btn {
    font: inherit;
    font-size: 0.93rem;
    font-weight: 700;
    min-height: 48px;
    padding: 10px 14px;
    border-radius: 14px;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
    line-height: 1.2;
}

.ibc-cc__btn[hidden] {
    display: none;
}

.ibc-cc__btn:active {
    transform: scale(0.98);
}

.ibc-cc__btn:focus-visible {
    outline: 3px solid var(--ibc-p-navy);
    outline-offset: 2px;
}

/* „Alle akzeptieren“ und „Nur notwendige“ gleich groß (DSGVO: Ablehnen genauso einfach) */
.ibc-cc__btn--primary {
    background: var(--ibc-p-green);
    color: #fff;
}

.ibc-cc__btn--primary:hover {
    background: var(--ibc-p-green-dark);
}

.ibc-cc__btn--secondary {
    background: var(--ibc-p-navy);
    color: #fff;
}

.ibc-cc__btn--secondary:hover {
    background: var(--ibc-p-navy-2);
}

.ibc-cc__btn--ghost {
    grid-column: 1 / -1;
    background: transparent;
    color: var(--ibc-p-navy);
    border-color: var(--ibc-p-line);
    min-height: 44px;
}

.ibc-cc__btn--ghost:hover {
    background: var(--ibc-p-surface-2);
}

.ibc-cc--expanded .ibc-cc__btn--ghost {
    grid-column: auto;
}

.ibc-cc__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 16px;
    margin-top: 14px;
    font-size: 0.78rem;
}

.ibc-cc__links a {
    color: var(--ibc-p-muted) !important;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.ibc-cc__links a:hover {
    color: var(--ibc-p-navy) !important;
}

@media (min-width: 768px) {
    .ibc-cc {
        justify-content: flex-start;
        padding: 24px;
    }

    .ibc-cc__backdrop {
        background: rgba(12, 14, 34, 0.2);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .ibc-cc__card {
        width: 440px;
        border-radius: 24px;
        padding: 24px;
        max-height: calc(100vh - 48px);
        box-shadow: var(--ibc-p-shadow);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ibc-cc__card,
    .ibc-cc__backdrop {
        transition: none;
    }
}

/* ==========================================================================
   8. KI-CHAT-ASSISTENT (js/ibc-chat.js)
   ========================================================================== */
.ibc-chat-launcher {
    position: fixed;
    right: 16px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
    z-index: 1045;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 56px;
    padding: 0 20px 0 16px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--ibc-p-green) 0%, #557a33 100%);
    color: #fff;
    font: inherit;
    font-weight: 700;
    font-size: 0.95rem;
    box-shadow: 0 14px 30px -10px rgba(79, 114, 48, 0.75), 0 4px 10px -4px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: transform 0.25s var(--ibc-p-ease), box-shadow 0.25s ease, opacity 0.2s ease;
}

.ibc-chat-launcher:hover {
    transform: translateY(-2px);
}

.ibc-chat-launcher:focus-visible {
    outline: 3px solid var(--ibc-p-navy);
    outline-offset: 3px;
}

.ibc-chat-launcher svg {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
}

.ibc-chat-launcher__dot {
    position: absolute;
    top: 8px;
    left: 34px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #b9f08a;
    border: 2px solid #5f8a3b;
}

/* Auf dem Handy nur das runde Symbol */
@media (max-width: 575.98px) {
    .ibc-chat-launcher {
        width: 56px;
        padding: 0;
        justify-content: center;
    }
    .ibc-chat-launcher__label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
    .ibc-chat-launcher__dot {
        left: 34px;
    }
}

html.ibc-chat-open .ibc-chat-launcher,
html.ibc-cc-open .ibc-chat-launcher,
body.mobile-nav-open .ibc-chat-launcher {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.9);
}

.ibc-chat-panel {
    position: fixed;
    right: 16px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
    z-index: 10040;
    width: 400px;
    height: min(640px, calc(100vh - 32px));
    height: min(640px, calc(100dvh - 32px));
    display: flex;
    flex-direction: column;
    border-radius: 22px;
    overflow: hidden;
    background: #fff;
    box-shadow: var(--ibc-p-shadow);
    border: 1px solid var(--ibc-p-line);
    transform-origin: bottom right;
    transform: translateY(16px) scale(0.98);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.35s var(--ibc-p-ease), opacity 0.25s ease, visibility 0s linear 0.35s;
}

html.ibc-chat-open .ibc-chat-panel {
    transform: none;
    opacity: 1;
    visibility: visible;
    transition: transform 0.35s var(--ibc-p-ease), opacity 0.25s ease, visibility 0s;
}

@media (max-width: 575.98px) {
    .ibc-chat-panel {
        inset: 0;
        width: 100%;
        height: 100%;
        border-radius: 0;
        border: 0;
    }
    html.ibc-chat-open,
    html.ibc-chat-open body {
        overflow: hidden !important;
    }
}

.ibc-chat-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 14px 14px 16px;
    padding-top: max(14px, env(safe-area-inset-top));
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(109, 151, 68, 0.45), transparent 60%),
        linear-gradient(135deg, #262a5a, #1a1d42);
    color: #fff;
    flex: 0 0 auto;
}

.ibc-chat-head__avatar {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 50%;
    background: #fff;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.ibc-chat-head__avatar img {
    width: 34px;
    height: 34px;
    object-fit: contain;
}

.ibc-chat-head__text {
    flex: 1 1 auto;
    min-width: 0;
}

.ibc-chat-head .ibc-chat-head__title {
    margin: 0;
    font-size: 1rem !important;
    line-height: 1.2 !important;
    font-weight: 800;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    background: none !important;
    text-align: left;
}

.ibc-chat-head__sub {
    margin: 2px 0 0;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.78);
    display: flex;
    align-items: center;
    gap: 6px;
}

.ibc-chat-head__sub::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #9fe36b;
}

.ibc-chat-icon-btn {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background 0.2s ease;
}

.ibc-chat-icon-btn:hover,
.ibc-chat-icon-btn:focus-visible {
    background: rgba(255, 255, 255, 0.24);
}

.ibc-chat-icon-btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.ibc-chat-icon-btn svg {
    width: 18px;
    height: 18px;
}

.ibc-chat-body {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: #f4f6f9;
}

.ibc-chat-target {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.ibc-chat-loading {
    flex: 1 1 auto;
    display: grid;
    place-items: center;
    color: var(--ibc-p-muted);
    font-size: 0.9rem;
}

.ibc-chat-loading span {
    display: inline-flex;
    gap: 6px;
}

.ibc-chat-loading i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ibc-p-green);
    animation: ibc-chat-bounce 1s infinite ease-in-out;
}

.ibc-chat-loading i:nth-child(2) { animation-delay: 0.15s; }
.ibc-chat-loading i:nth-child(3) { animation-delay: 0.3s; }

@keyframes ibc-chat-bounce {
    0%, 80%, 100% { transform: translateY(0); opacity: 0.5; }
    40% { transform: translateY(-6px); opacity: 1; }
}

.ibc-chat-error {
    padding: 24px;
    text-align: center;
    color: var(--ibc-p-ink);
    font-size: 0.92rem;
    line-height: 1.5;
}

.ibc-chat-error a {
    color: var(--ibc-p-green-dark);
    font-weight: 700;
}

.ibc-chat-note {
    flex: 0 0 auto;
    margin: 0;
    padding: 8px 14px calc(env(safe-area-inset-bottom, 0px) + 8px);
    font-size: 0.7rem;
    line-height: 1.4;
    color: var(--ibc-p-muted);
    background: #fff;
    border-top: 1px solid var(--ibc-p-line);
    text-align: center;
}

.ibc-chat-note a {
    color: inherit;
    text-decoration: underline;
}

/* n8n-Widget an das Panel anpassen */
.ibc-chat-panel {
    --chat--color-primary: var(--ibc-p-green);
    --chat--color-primary-shade-50: var(--ibc-p-green-dark);
    --chat--color-primary-shade-100: #3f5c26;
    --chat--color-secondary: var(--ibc-p-navy);
    --chat--color-secondary-shade-50: #171a3a;
    --chat--color-white: #ffffff;
    --chat--color-light: #f4f6f9;
    --chat--color-light-shade-50: #e6eaf0;
    --chat--color-light-shade-100: #d3d9e2;
    --chat--color-medium: #c4c9d1;
    --chat--color-dark: #1b1e3c;
    --chat--color-disabled: #9a9a9a;
    --chat--color-typing: #646464;
    --chat--font-family: inherit;
    --chat--border-radius: 14px;
    --chat--spacing: 14px;
    --chat--message--font-size: 0.95rem;
    --chat--message--bot--background: #ffffff;
    --chat--message--bot--color: #1b1e3c;
    --chat--message--bot--border: 1px solid #e3e6ea;
    --chat--message--user--background: var(--ibc-p-navy);
    --chat--message--user--color: #ffffff;
    --chat--input--font-size: 16px; /* verhindert Auto-Zoom auf dem iPhone */
}

.ibc-chat-target .chat-layout,
.ibc-chat-target .chat-wrapper {
    height: 100% !important;
    width: 100% !important;
    max-height: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    position: static !important;
}

/* n8n bringt einen eigenen Kopf mit – wir haben einen eigenen */
.ibc-chat-target .chat-header {
    display: none !important;
}

.ibc-chat-target .chat-body {
    flex: 1 1 auto;
    min-height: 0;
}

.ibc-chat-target .chat-message {
    max-width: 85% !important;
    line-height: 1.5 !important;
    word-wrap: break-word;
}

.ibc-chat-target .chat-message p {
    margin: 0 0 0.5em;
}

.ibc-chat-target .chat-message p:last-child {
    margin-bottom: 0;
}

.ibc-chat-target .chat-inputs textarea {
    font-size: 16px !important;
}

.ibc-chat-target .chat-input-send-button {
    color: var(--ibc-p-green) !important;
}

/* Vorschläge */
.ibc-chat-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 14px;
    background: #f4f6f9;
    border-top: 1px solid #e3e6ea;
}

.ibc-chat-suggestions__label {
    width: 100%;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--ibc-p-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.ibc-chat-chip {
    font: inherit;
    font-size: 0.84rem;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1.5px solid var(--ibc-p-green);
    background: #fff;
    color: var(--ibc-p-green-dark);
    cursor: pointer;
    text-align: left;
    line-height: 1.3;
    transition: background 0.15s ease, color 0.15s ease;
}

.ibc-chat-chip:hover,
.ibc-chat-chip:focus-visible {
    background: var(--ibc-p-green);
    color: #fff;
    outline: none;
}

@media (prefers-reduced-motion: reduce) {
    .ibc-chat-panel,
    .ibc-chat-launcher {
        transition: none;
    }
}

/* ==========================================================================
   9. ALLGEMEINE RESPONSIVE-ABSICHERUNG
   ========================================================================== */
html,
body {
    overflow-x: clip;
}

img,
video,
iframe,
svg {
    max-width: 100%;
}

img,
video {
    height: auto;
}

@media (max-width: 575.98px) {
    .container,
    .container-fluid {
        padding-left: var(--ibc-p-gutter) !important;
        padding-right: var(--ibc-p-gutter) !important;
    }

    /* Tabellen (z. B. Cookie-Richtlinie) horizontal scrollbar statt Überlauf */
    main table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Lange Links/E-Mail-Adressen in Rechtstexten umbrechen */
    main p a,
    main li a,
    address {
        overflow-wrap: anywhere;
    }
}

/* Sprungmarken nicht unter der schwebenden Navbar verstecken */
:target,
section[id] {
    scroll-margin-top: 90px;
}

/* Datenschutzerklärung: Überschriften des Chatbot-Abschnitts */
.privacy-content h2,
.privacy-content h3 {
    scroll-margin-top: 90px;
}

/* Mobiles Menü: gleichmäßige, kompakte Abstände */
.mobile-nav-overlay .mobile-nav-list > li {
    margin: 0 !important;
    padding: 0 !important;
}

/* Chat: Untertitel einzeilig, n8n-Hinweis dezent */
.ibc-chat-head__sub {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ibc-chat-target .chat-powered-by {
    font-size: 0.7rem !important;
    padding: 4px 0 6px !important;
    opacity: 0.7;
}

.ibc-chat-target .chat-get-started-footer {
    padding: 0 !important;
}

/* Rechtstexte nie ausblenden – die Einblend-Animation griff bei sehr langen
   Blöcken auf dem Handy nicht, der Text blieb unsichtbar (opacity: 0). */
.privacy-content.fade-in-up,
.cookie-content.fade-in-up,
.impressum-card.fade-in-up {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
}

/* Überschriften in Rechtstexten: Schrift war transparent, der Verlauf lag aber
   als Kasten-Hintergrund dahinter → Text unsichtbar. */
.privacy-content :is(h2, h3, h4),
.cookie-content :is(h2, h3, h4),
.impressum-card :is(h2, h3, h4) {
    color: var(--ibc-p-navy) !important;
    -webkit-text-fill-color: var(--ibc-p-navy) !important;
}

/* ==========================================================================
   10. STARTSEITE: HERO
   ========================================================================== */
/* Hero-Titel: bricht sauber um (früher abgeschnitten, weil eine ältere Regel
   ihn ab 992 px auf eine Zeile zwang). Weiche Trennung über &shy; im HTML,
   als Notfall bricht auch ein langes Wort um – nie abschneiden. */
#hero-section h1 {
    font-size: clamp(1.4rem, 3.6vw + 0.8rem, 4.25rem) !important;
    line-height: 1.12 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    -webkit-hyphens: manual !important;
    hyphens: manual !important;
    text-wrap: balance;
    max-width: 100%;
}

#hero-section .hero-eyebrow-badge {
    white-space: normal;
    -webkit-hyphens: manual !important;
    hyphens: manual !important;
    line-height: 1.5;
    max-width: 100%;
}

@media (max-width: 575.98px) {
    #hero-section .hero-eyebrow-badge {
        font-size: 0.66rem !important;
        letter-spacing: 0.06em !important;
    }
}

/* Video: auf dem Handy war es durch das dunkle Overlay kaum zu erkennen */
#hero-video {
    object-fit: cover;
    object-position: center;
}

@media (max-width: 991.98px) {
    #hero-section .overlay {
        background:
            linear-gradient(180deg, rgba(10, 12, 30, 0.45) 0%, rgba(10, 12, 30, 0.2) 40%, rgba(10, 12, 30, 0.55) 100%) !important;
    }
}

/* ==========================================================================
   11. ERFOLGSGESCHICHTEN (Testimonials)
   Foto füllte die Karte nicht und ragte unter „ALUMNI“
   ========================================================================== */
@media (max-width: 991.98px) {
    .ibc-testimonial-visual {
        height: 300px !important;
        min-height: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        border-radius: inherit;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }
    .ibc-testimonial-visual img {
        width: 100% !important;
        height: 100% !important;
        max-height: none !important;
        object-fit: cover !important;
        object-position: center 20% !important;
        border-radius: 0 !important;
        margin: 0 !important;
        display: block;
    }
}

/* ==========================================================================
   12. (entfällt – Instagram-Abschnitt siehe 18)
   ========================================================================== */

/* ==========================================================================
   13. MOBILES MENÜ: SPRACHAUSWAHL
   Bei schmalen Handys ragte „Français“ aus dem Bild → gleich breite Spalten,
   unter 400 px nur Flagge + Kürzel.
   ========================================================================== */
.mobile-nav-overlay .mobile-nav-list .lang-dropdown {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: 100% !important;
}

.mobile-nav-overlay .mobile-nav-list .lang-item {
    justify-content: center !important;
    min-width: 0 !important;
    width: 100% !important;
    overflow: hidden;
}

@media (max-width: 400px) {
    .mobile-nav-overlay .mobile-nav-list .lang-item > span {
        display: none !important;
    }
    .mobile-nav-overlay .mobile-nav-list .lang-item::after {
        content: attr(data-lang);
        text-transform: uppercase;
        font-weight: 700;
        letter-spacing: 0.04em;
    }
}

/* Kontaktformular ohne reCAPTCHA-Einwilligung: Formular gesperrt, aber der
   Hinweis und der Button „Cookie-Einstellungen öffnen“ müssen bedienbar sein */
#contact-form.form-disabled-no-consent #recaptcha-consent-notice,
#contact-form.form-disabled-no-consent #recaptcha-consent-notice *,
#contact-form.form-disabled-no-consent #recaptcha-consent-notice button {
    opacity: 1 !important;
    pointer-events: auto !important;
    filter: none !important;
}

#open-consent-settings-btn {
    background: var(--ibc-p-navy) !important;
    border-color: var(--ibc-p-navy) !important;
    color: #fff !important;
    min-height: 44px;
    padding: 0.55rem 1.1rem !important;
    border-radius: 999px !important;
    cursor: pointer !important;
}

#open-consent-settings-btn:hover,
#open-consent-settings-btn:focus-visible {
    background: var(--ibc-p-navy-2) !important;
}

/* Tabelle „Übersicht der gespeicherten Informationen“ (Cookie-Richtlinie) */
.ibc-storage-table {
    font-size: 0.85rem;
    margin: 1rem 0 1.5rem;
    min-width: 640px;
}

.ibc-storage-table th {
    white-space: nowrap;
    color: var(--ibc-p-navy);
}

.ibc-storage-table code {
    font-size: 0.82em;
    white-space: nowrap;
    color: var(--ibc-p-green-dark);
}

/* „Projekt starten?“ auf dem Handy: volle Breite über dem Chat-Button */
@media (max-width: 575.98px) {
    #mobile-sticky-cta {
        width: calc(100vw - 32px) !important;
        bottom: calc(env(safe-area-inset-bottom, 0px) + 84px) !important;
    }
}

#mobile-sticky-cta .mobile-cta-btn,
#mobile-sticky-cta .mobile-cta-later {
    white-space: nowrap;
}

.cookie-content table :is(th, td, code),
.privacy-content table :is(th, td, code) {
    -webkit-text-fill-color: currentColor !important;
}

.cookie-content table td,
.privacy-content table td {
    color: var(--ibc-p-ink) !important;
    vertical-align: top;
}

/* Speicher-Tabelle auf dem Handy als Karten */
@media (max-width: 767.98px) {
    .ibc-storage-table {
        min-width: 0 !important;
        display: block !important;
        border: 0 !important;
        background: none !important;
    }
    .ibc-storage-table thead {
        display: none !important;
    }
    .ibc-storage-table tbody,
    .ibc-storage-table tr {
        display: block !important;
    }
    .ibc-storage-table tr {
        margin: 0 0 12px !important;
        padding: 10px 14px !important;
        border: 1px solid var(--ibc-p-line) !important;
        border-radius: 14px !important;
        background: var(--ibc-p-surface-2) !important;
    }
    .ibc-storage-table td {
        display: block !important;
        width: auto !important;
        padding: 5px 0 !important;
        -webkit-hyphens: manual;
        hyphens: manual;
        border: 0 !important;
        background: none !important;
        box-shadow: none !important;
        font-size: 0.85rem;
        line-height: 1.45;
    }
    .ibc-storage-table td::before {
        content: attr(data-label);
        display: block;
        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: var(--ibc-p-muted);
    }
    .ibc-storage-table code {
        white-space: normal;
        word-break: break-all;
    }
}

/* ==========================================================================
   14. KONTAKTFORMULAR (kontakt.html)
   - Zustimmungs-Checkboxen: Text zerfiel in Spalten (Label war Flex-Container),
     Checkbox war absolut positioniert und rutschte unter den Text
   - Platzhalter sahen aus wie bereits ausgefüllte Werte
   - reCAPTCHA (fest 304 px) ragte auf kleinen Handys aus dem Formular
   ========================================================================== */
#contact-form .form-check {
    display: grid !important;
    grid-template-columns: 22px minmax(0, 1fr);
    column-gap: 12px;
    row-gap: 6px;
    align-items: start;
    padding: 14px 16px !important;
    margin-left: 0 !important;
    min-height: 0 !important;
}

#contact-form .form-check .form-check-input {
    position: static !important;
    grid-column: 1;
    grid-row: 1;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    margin: 1px 0 0 !important;
    float: none !important;
    transform: none !important;
}

#contact-form .form-check .form-check-label {
    display: block !important;
    grid-column: 2;
    grid-row: 1;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 0.92rem;
    line-height: 1.5;
    text-align: left !important;
    -webkit-hyphens: auto;
    hyphens: auto;
    overflow-wrap: break-word;
    cursor: pointer;
}

#contact-form .form-check .form-check-label > * {
    display: inline !important;
}

#contact-form .form-check .form-check-label a {
    font-weight: 700;
    white-space: normal;
}

#contact-form .form-check .invalid-feedback,
#contact-form .form-check .form-text {
    grid-column: 2;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0.8rem;
    line-height: 1.5;
}

#contact-form .form-control::placeholder {
    color: #9aa0ae !important;
    opacity: 1 !important;
}

#contact-form select.form-control:invalid {
    color: #9aa0ae !important;
    -webkit-text-fill-color: #9aa0ae !important;
}

#contact-form select.form-control:valid {
    color: var(--ibc-p-ink) !important;
    -webkit-text-fill-color: var(--ibc-p-ink) !important;
}

#contact-form select.form-control option {
    color: var(--ibc-p-ink);
}

#contact-form .form-control {
    font-size: 16px !important; /* verhindert Auto-Zoom beim Antippen auf dem iPhone */
    min-width: 0;
    max-width: 100%;
}

#contact-form .recaptcha-wrapper {
    display: block !important;
    width: 304px;
    max-width: none;
    margin-left: auto !important;
    margin-right: auto !important;
}

#contact-form .recaptcha-wrapper.hidden {
    display: none !important;
}

@media (max-width: 400px) {
    #contact-form .recaptcha-wrapper {
        width: calc(304px * 0.78);
        height: calc(78px * 0.78);
    }
    #contact-form .recaptcha-wrapper .g-recaptcha,
    #contact-form .recaptcha-wrapper .g-recaptcha > div,
    #contact-form .recaptcha-wrapper .g-recaptcha iframe {
        width: 304px !important;
        max-width: none !important;
    }
    #contact-form .recaptcha-wrapper .g-recaptcha {
        transform: scale(0.78);
        transform-origin: 0 0;
    }
}

#contact-form button[type="submit"],
#contact-form button[type="reset"],
#contact-form .btn {
    max-width: 100%;
    white-space: normal;
}

#contact-form #open-modal-btn-desktop.btn-reset-form,
#contact-form .btn-reset-form {
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    white-space: nowrap !important;
}

#contact-form .btn-reset-form i,
#contact-form .btn-reset-form span {
    display: inline !important;
    width: auto !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
}

/* ==========================================================================
   15. UNSER NETZWERK: ALUMNI-ABSCHNITT (dunkler Hintergrund)
   Fließtext war grau auf Dunkelblau → kaum lesbar
   ========================================================================== */
.alumni-netzwerk-section .ibc-lead,
.alumni-netzwerk-section p,
.alumni-netzwerk-section .alumni-feature-item span,
.infoabend-section:not(.infoabend-section--light) .ibc-lead,
.infoabend-section:not(.infoabend-section--light) .ibc-lead * {
    color: rgba(255, 255, 255, 0.9) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.9) !important;
}

/* „Warum das IBC zu Dir passen könnte!“ (Für Studierende) nutzt dieselbe Klasse
   .infoabend-section, hat aber einen HELLEN Hintergrund → dunkle Schrift */
.infoabend-section--light .ibc-lead,
.infoabend-section--light .ibc-lead * {
    color: var(--ibc-p-muted) !important;
    -webkit-text-fill-color: var(--ibc-p-muted) !important;
}

.alumni-netzwerk-section strong,
.alumni-netzwerk-section h3 {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

/* ==========================================================================
   16. TEAMKARTEN (Über uns)
   Rolle war riesig und in Großbuchstaben, E-Mail-Button oval
   ========================================================================== */
.team-card-body h3 {
    margin-bottom: 4px !important;
}

.team-card-body h4 {
    font-size: 0.82rem !important;
    line-height: 1.4 !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: var(--ibc-p-green-dark) !important;
    -webkit-text-fill-color: var(--ibc-p-green-dark) !important;
    margin: 0 0 14px !important;
}

.team-card-social {
    display: flex !important;
    justify-content: center !important;
    gap: 10px !important;
}

.team-card-social a {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    display: inline-grid !important;
    place-items: center !important;
    background: var(--ibc-p-surface-2) !important;
    border: 1px solid var(--ibc-p-line) !important;
    color: var(--ibc-p-navy) !important;
    font-size: 1rem !important;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s var(--ibc-p-ease) !important;
}

.team-card-social a:hover,
.team-card-social a:focus-visible {
    transform: translateY(-2px);
    background: var(--ibc-p-navy) !important;
    color: #fff !important;
}

.team-card-social a[href*="linkedin.com"]:hover,
.team-card-social a[href*="linkedin.com"]:focus-visible {
    background: #0a66c2 !important;
    border-color: #0a66c2 !important;
}

/* ==========================================================================
   17. IBC-ASSISTENT – Feinschliff
   ========================================================================== */
/* Startbutton mit Maskottchen */
.ibc-chat-launcher {
    height: 60px !important;
    padding: 0 20px 0 8px !important;
    gap: 10px !important;
    background: linear-gradient(135deg, #262a5a 0%, #1a1d42 100%) !important;
    box-shadow: 0 16px 34px -12px rgba(20, 24, 60, 0.7), 0 0 0 3px rgba(109, 151, 68, 0.35) !important;
}

.ibc-chat-launcher__avatar {
    position: relative;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 50%;
    background: #fff;
    display: grid;
    place-items: center;
}

.ibc-chat-launcher__avatar img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.ibc-chat-launcher .ibc-chat-launcher__dot {
    top: auto !important;
    left: auto !important;
    right: -1px;
    bottom: 1px;
    width: 12px !important;
    height: 12px !important;
    background: #7ddc4a !important;
    border: 2px solid #1a1d42 !important;
}

.ibc-chat-launcher__icon {
    display: none;
}

@media (max-width: 575.98px) {
    .ibc-chat-launcher {
        width: 60px !important;
        padding: 0 !important;
        justify-content: center !important;
    }
}

/* Begrüßungsblase */
.ibc-chat-teaser {
    position: fixed;
    right: 16px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 88px);
    z-index: 1044;
    display: flex;
    align-items: flex-start;
    gap: 4px;
    max-width: min(280px, calc(100vw - 32px));
    padding: 12px 8px 12px 16px;
    border-radius: 18px 18px 6px 18px;
    background: #fff;
    border: 1px solid var(--ibc-p-line);
    box-shadow: var(--ibc-p-shadow);
    opacity: 0;
    transform: translateY(10px) scale(0.96);
    transform-origin: bottom right;
    transition: opacity 0.3s ease, transform 0.4s var(--ibc-p-ease);
}

.ibc-chat-teaser.is-visible {
    opacity: 1;
    transform: none;
}

.ibc-chat-teaser__text {
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--ibc-p-ink);
    text-align: left;
    cursor: pointer;
}

.ibc-chat-teaser__close {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--ibc-p-muted);
    display: grid;
    place-items: center;
    cursor: pointer;
}

.ibc-chat-teaser__close svg {
    width: 14px;
    height: 14px;
}

.ibc-chat-teaser__close:hover,
.ibc-chat-teaser__close:focus-visible {
    background: var(--ibc-p-surface-2);
}

html.ibc-chat-open .ibc-chat-teaser,
html.ibc-cc-open .ibc-chat-teaser,
body.mobile-nav-open .ibc-chat-teaser {
    display: none;
}

/* Kopf */
.ibc-chat-head {
    padding: 16px 14px 16px 16px !important;
    padding-top: max(16px, env(safe-area-inset-top)) !important;
    background:
        radial-gradient(140% 160% at 100% 0%, rgba(109, 151, 68, 0.55), transparent 55%),
        radial-gradient(80% 120% at 0% 100%, rgba(80, 90, 200, 0.35), transparent 60%),
        linear-gradient(135deg, #262a5a, #171a3a) !important;
}

.ibc-chat-head__avatar {
    width: 46px !important;
    height: 46px !important;
    flex: 0 0 46px !important;
    position: relative;
    overflow: visible !important;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.18);
}

.ibc-chat-head__avatar img {
    width: 42px !important;
    height: 42px !important;
    border-radius: 50%;
    object-fit: cover;
}

.ibc-chat-head__avatar::after {
    content: "";
    position: absolute;
    right: -1px;
    bottom: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #7ddc4a;
    border: 2px solid #1f2350;
}

.ibc-chat-head .ibc-chat-head__title {
    font-size: 1.05rem !important;
}

.ibc-chat-head__sub::before {
    display: none !important;
}

.ibc-chat-icon-btn {
    width: 36px !important;
    height: 36px !important;
    flex: 0 0 36px !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

/* Verlauf */
.ibc-chat-body,
.ibc-chat-target .chat-body,
.ibc-chat-target .chat-layout {
    background:
        radial-gradient(120% 60% at 0% 0%, rgba(109, 151, 68, 0.08), transparent 60%),
        linear-gradient(180deg, #f6f8f4 0%, #eef1f6 100%) !important;
}

.ibc-chat-target .chat-messages-list {
    padding: 16px 14px 8px !important;
    gap: 10px;
}

.ibc-chat-target .chat-message {
    border-radius: 18px !important;
    padding: 10px 14px !important;
    font-size: 0.94rem !important;
    box-shadow: 0 2px 8px -4px rgba(20, 24, 60, 0.18);
}

.ibc-chat-target .chat-message-from-bot {
    position: relative;
    margin-left: 34px !important;
    border-bottom-left-radius: 6px !important;
    border: 1px solid rgba(32, 35, 74, 0.08) !important;
    background: #fff !important;
}

/* Maskottchen neben Bot-Nachrichten */
.ibc-chat-target .chat-message-from-bot::before {
    content: "";
    position: absolute;
    left: -34px;
    bottom: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #fff url("../assets/img/cropped_maskottchen_192x192.webp") center / cover no-repeat;
    box-shadow: 0 0 0 1px rgba(32, 35, 74, 0.1);
}

.ibc-chat-target .chat-message-from-user {
    border-bottom-right-radius: 6px !important;
    background: linear-gradient(135deg, #2b3070, #1f2350) !important;
    color: #fff !important;
}

.ibc-chat-target .chat-message-from-user * {
    color: #fff !important;
}

/* Vorschläge */
.ibc-chat-suggestions {
    background: transparent !important;
    border-top: 0 !important;
    padding: 4px 14px 10px !important;
    gap: 6px !important;
}

.ibc-chat-chip {
    border: 1px solid rgba(109, 151, 68, 0.45) !important;
    background: rgba(109, 151, 68, 0.08) !important;
    color: var(--ibc-p-green-dark) !important;
    font-weight: 600;
    font-size: 0.82rem !important;
    padding: 7px 12px !important;
}

.ibc-chat-chip:hover,
.ibc-chat-chip:focus-visible {
    background: var(--ibc-p-green) !important;
    border-color: var(--ibc-p-green) !important;
    color: #fff !important;
}

/* Eingabe */
.ibc-chat-target .chat-footer {
    background: transparent !important;
    border-top: 0 !important;
}

.ibc-chat-target .chat-input {
    padding: 8px 12px 10px !important;
    background: #fff !important;
    border-top: 1px solid var(--ibc-p-line) !important;
}

.ibc-chat-target .chat-inputs {
    display: flex !important;
    align-items: flex-end !important;
    gap: 8px;
    padding: 4px 4px 4px 14px !important;
    border-radius: 24px !important;
    background: #f3f5f9 !important;
    border: 1px solid transparent;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.ibc-chat-target .chat-inputs:focus-within {
    background: #fff !important;
    border-color: rgba(109, 151, 68, 0.6);
    box-shadow: 0 0 0 3px rgba(109, 151, 68, 0.15);
}

.ibc-chat-target .chat-inputs textarea {
    background: transparent !important;
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 10px 0 !important;
    min-height: 40px;
    max-height: 120px;
    line-height: 1.4 !important;
    color: var(--ibc-p-ink) !important;
}

.ibc-chat-target .chat-inputs-controls {
    display: flex;
    align-items: center;
}

.ibc-chat-target .chat-input-send-button {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    border-radius: 50% !important;
    background: var(--ibc-p-green) !important;
    color: #fff !important;
    display: grid !important;
    place-items: center !important;
    transition: background 0.2s ease, transform 0.2s var(--ibc-p-ease) !important;
}

.ibc-chat-target .chat-input-send-button svg {
    width: 18px !important;
    height: 18px !important;
    color: #fff !important;
    fill: currentColor;
}

.ibc-chat-target .chat-input-send-button:hover:not(:disabled) {
    background: var(--ibc-p-green-dark) !important;
    transform: scale(1.05);
}

.ibc-chat-target .chat-input-send-button:disabled {
    background: #c9cdd8 !important;
}

.ibc-chat-note {
    background: #fff !important;
    border-top: 0 !important;
    padding-top: 0 !important;
}

.ibc-chat-target .chat-message-from-bot {
    overflow: visible !important;
}

.ibc-chat-target .chat-message .chat-message-markdown {
    overflow-wrap: anywhere;
    min-width: 0;
}

.ibc-chat-target .chat-message pre {
    overflow-x: auto;
    max-width: 100%;
}

.team-card-social a,
.team-card-social a i {
    text-decoration: none !important;
}

/* ==========================================================================
   18. INSTAGRAM-HIGHLIGHTS (fuer-studierende.html, Logik: js/social-embeds.js)
   Handy/Tablet: wischbares Karussell · Desktop: drei Reels nebeneinander
   ========================================================================== */
.ibc-ig {
    --ig-grad: linear-gradient(45deg, #f9ce34 0%, #ee2a7b 45%, #6228d7 100%);
    position: relative;
    padding: 72px 0 80px !important;
    background:
        radial-gradient(60% 50% at 100% 0%, rgba(238, 42, 123, 0.07), transparent 70%),
        radial-gradient(50% 40% at 0% 100%, rgba(109, 151, 68, 0.1), transparent 70%),
        linear-gradient(180deg, #f7f9f5 0%, #ffffff 100%) !important;
    overflow: hidden;
}

.ibc-ig__head {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 28px;
}

.ibc-ig__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    margin-bottom: 14px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--ibc-p-line);
    box-shadow: 0 4px 12px -6px rgba(20, 24, 60, 0.2);
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--ibc-p-navy);
}

.ibc-ig__eyebrow i {
    font-size: 1rem;
    background: var(--ig-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.ibc-ig__head .ibc-heading {
    margin-bottom: 10px !important;
}

.ibc-ig__lead {
    margin: 0;
    font-size: 1.02rem;
    line-height: 1.6;
    color: var(--ibc-p-muted) !important;
}

/* Profilkarte */
.ibc-ig__profile {
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 520px;
    margin: 0 auto 36px;
    padding: 12px 12px 12px 14px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid var(--ibc-p-line);
    box-shadow: 0 16px 36px -22px rgba(20, 24, 60, 0.45);
}

.ibc-ig__avatar {
    position: relative;
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    padding: 3px;
    background: var(--ig-grad);
}

.ibc-ig__avatar img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 3px solid #fff;
    background: #fff;
    object-fit: contain;
}

.ibc-ig__who {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.ibc-ig__who strong {
    font-size: 1rem;
    color: var(--ibc-p-navy);
}

.ibc-ig__who span {
    font-size: 0.82rem;
    color: var(--ibc-p-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ibc-ig__follow {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 18px;
    border-radius: 999px;
    background: var(--ig-grad);
    color: #fff !important;
    font-weight: 700;
    font-size: 0.92rem;
    text-decoration: none !important;
    box-shadow: 0 10px 20px -10px rgba(238, 42, 123, 0.8);
    transition: transform 0.2s var(--ibc-p-ease), box-shadow 0.2s ease;
}

.ibc-ig__follow:hover,
.ibc-ig__follow:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 14px 26px -10px rgba(238, 42, 123, 0.9);
}

.ibc-ig__follow:focus-visible {
    outline: 3px solid var(--ibc-p-navy);
    outline-offset: 3px;
}

/* Reels */
.ibc-ig__track {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
    max-width: 1020px;
    margin: 0 auto;
    outline: none;
}

.ibc-ig__item {
    margin: 0;
    min-width: 0;
}

.ibc-ig__phone {
    position: relative;
    aspect-ratio: 9 / 16.5;
    border-radius: 34px;
    padding: 8px;
    background: #111318;
    box-shadow:
        0 30px 60px -28px rgba(20, 24, 60, 0.55),
        0 0 0 1px rgba(255, 255, 255, 0.06) inset;
    transition: transform 0.4s var(--ibc-p-ease), box-shadow 0.4s ease;
}

/* „Notch“ */
.ibc-ig__phone::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 34%;
    height: 18px;
    border-radius: 0 0 12px 12px;
    background: #111318;
    z-index: 3;
}

.ibc-ig__phone:hover {
    transform: translateY(-6px);
}

.ibc-ig__frame {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 26px;
    background: #fff;
    visibility: hidden;
}

.ibc-ig__phone.is-embed-loaded .ibc-ig__frame {
    visibility: visible;
}

/* Vorschau vor dem Laden */
.ibc-ig__poster {
    position: absolute;
    inset: 8px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    border: 0;
    border-radius: 26px;
    color: #fff;
    cursor: pointer;
    font: inherit;
    background:
        radial-gradient(120% 70% at 20% 0%, rgba(249, 206, 52, 0.45), transparent 55%),
        radial-gradient(120% 80% at 100% 100%, rgba(98, 40, 215, 0.6), transparent 60%),
        linear-gradient(160deg, #ee2a7b 0%, #a3207f 45%, #2b1d5c 100%);
    overflow: hidden;
    transition: filter 0.2s ease;
}

.ibc-ig__item:nth-child(2) .ibc-ig__poster {
    background:
        radial-gradient(120% 70% at 80% 0%, rgba(109, 151, 68, 0.6), transparent 55%),
        linear-gradient(160deg, #2b3070 0%, #1a1d42 100%);
}

.ibc-ig__item:nth-child(3) .ibc-ig__poster {
    background:
        radial-gradient(120% 70% at 20% 0%, rgba(249, 206, 52, 0.4), transparent 55%),
        linear-gradient(160deg, #6d9744 0%, #2b4a1f 100%);
}

.ibc-ig__phone.is-embed-loaded .ibc-ig__poster {
    display: none;
}

.ibc-ig__poster:hover {
    filter: brightness(1.08);
}

.ibc-ig__poster:focus-visible {
    outline: 3px solid #fff;
    outline-offset: -6px;
}

.ibc-ig__poster-logo {
    position: absolute;
    top: 30px;
    left: 18px;
    font-size: 22px;
    opacity: 0.9;
}

.ibc-ig__play {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    padding-left: 4px;
    background: rgba(255, 255, 255, 0.22);
    border: 2px solid rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: transform 0.25s var(--ibc-p-ease);
}

.ibc-ig__poster:hover .ibc-ig__play {
    transform: scale(1.08);
}

.ibc-ig__hint {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    opacity: 0.9;
}

.ibc-ig__dots {
    display: none;
}

/* Gemeinsamer Datenschutz-Hinweis */
.ibc-ig__consent {
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 820px;
    margin: 36px auto 0;
    padding: 18px 20px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid var(--ibc-p-line);
    box-shadow: 0 16px 36px -24px rgba(20, 24, 60, 0.45);
}

.ibc-ig__consent[hidden] {
    display: none;
}

.ibc-ig__consent-icon {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: rgba(109, 151, 68, 0.12);
    color: var(--ibc-p-green-dark);
    font-size: 1.1rem;
}

.ibc-ig__consent-text {
    flex: 1 1 auto;
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.5;
    color: var(--ibc-p-muted) !important;
}

.ibc-ig__consent-text a {
    color: var(--ibc-p-navy) !important;
    font-weight: 600;
}

.ibc-ig__consent-actions {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}

.ibc-ig__load {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 18px;
    border: 0;
    border-radius: 999px;
    background: var(--ibc-p-navy);
    color: #fff;
    font: inherit;
    font-weight: 700;
    font-size: 0.9rem;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.2s ease;
}

.ibc-ig__load:hover,
.ibc-ig__load:focus-visible {
    background: var(--ibc-p-navy-2);
}

.ibc-ig__load:focus-visible {
    outline: 3px solid var(--ibc-p-green);
    outline-offset: 2px;
}

.ibc-ig__remember {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ibc-p-muted);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.ibc-ig__remember input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
}

.ibc-ig__switch {
    position: relative;
    flex: 0 0 auto;
    width: 34px;
    height: 20px;
    border-radius: 999px;
    background: #c9cdd8;
    transition: background 0.2s ease;
}

.ibc-ig__switch::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    transition: transform 0.25s var(--ibc-p-ease);
}

.ibc-ig__remember input:checked + .ibc-ig__switch {
    background: var(--ibc-p-green);
}

.ibc-ig__remember input:checked + .ibc-ig__switch::after {
    transform: translateX(14px);
}

.ibc-ig__remember input:focus-visible + .ibc-ig__switch {
    outline: 2px solid var(--ibc-p-navy);
    outline-offset: 2px;
}

/* Handy & Tablet: Karussell */
@media (max-width: 991.98px) {
    .ibc-ig {
        padding: 56px 0 64px !important;
    }

    .ibc-ig__track {
        display: flex;
        gap: 16px;
        max-width: none;
        margin: 0 calc(-1 * var(--ibc-p-gutter));
        padding: 6px var(--ibc-p-gutter) 18px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding: 0 var(--ibc-p-gutter);
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .ibc-ig__track::-webkit-scrollbar {
        display: none;
    }

    .ibc-ig__item {
        flex: 0 0 min(72vw, 300px);
        scroll-snap-align: center;
    }

    .ibc-ig__phone:hover {
        transform: none;
    }

    .ibc-ig__dots {
        display: flex;
        justify-content: center;
        gap: 8px;
        margin-top: 4px;
    }

    .ibc-ig__dot {
        width: 8px;
        height: 8px;
        padding: 0;
        border: 0;
        border-radius: 999px;
        background: #c9cdd8;
        transition: width 0.25s var(--ibc-p-ease), background 0.25s ease;
    }

    .ibc-ig__dot.is-active {
        width: 22px;
        background: var(--ibc-p-green);
    }

    .ibc-ig__consent {
        flex-wrap: wrap;
        margin-top: 24px;
    }

    .ibc-ig__consent-text {
        flex: 1 1 calc(100% - 60px);
    }

    .ibc-ig__consent-actions {
        flex: 1 1 100%;
    }
}

@media (max-width: 575.98px) {
    .ibc-ig__profile {
        gap: 10px;
        padding: 10px;
    }

    .ibc-ig__avatar {
        flex-basis: 48px;
        width: 48px;
        height: 48px;
    }

    .ibc-ig__follow {
        padding: 0 14px;
        font-size: 0.85rem;
    }

}

@media (prefers-reduced-motion: reduce) {
    .ibc-ig__phone,
    .ibc-ig__play,
    .ibc-ig__dot {
        transition: none;
    }
}

/* Allgemeine Link-Unterstreichungs-Animation (background-size: 0% 2px)
   darf die Instagram-Buttons nicht überschreiben */
.ibc-ig .ibc-ig__follow {
    background: var(--ig-grad) !important;
    background-size: 100% 100% !important;
}

.ibc-ig .ibc-ig__dot {
    width: 8px !important;
    height: 8px !important;
    min-width: 0 !important;
    min-height: 0 !important;
}

.ibc-ig .ibc-ig__dot.is-active {
    width: 22px !important;
}

.ibc-ig .ibc-ig__consent-text a {
    background-image: none !important;
    text-decoration: underline;
}

/* ==========================================================================
   19. KONTAKTSEITE: ÜBERSCHRIFTEN & FORMULARABSTÄNDE
   ========================================================================== */
/* Zweispaltig (ab 992 px) ist jede Spalte schmal: Schrift skalieren statt
   mitten im Wort umzubrechen („Kontaktinformatione / n“) */
main h2.ibc-heading[data-i18n="contact-form-heading"],
main h2.ibc-heading[data-i18n="contact-info-heading"] {
    font-size: clamp(1.6rem, 6vw, 2.8rem) !important;
    line-height: 1.15 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    -webkit-hyphens: manual !important;
    hyphens: manual !important;
    text-align: center !important;
}

@media (min-width: 992px) and (max-width: 1399.98px) {
    main h2.ibc-heading[data-i18n="contact-form-heading"],
    main h2.ibc-heading[data-i18n="contact-info-heading"] {
        font-size: clamp(1.7rem, 2.9vw, 2.4rem) !important;
    }
}

/* Label „Betreff“ war immer grün: ein alter Selektor (select:not([value=""])+label)
   trifft das Auswahlfeld dauerhaft. Wie die anderen Labels navy, grün nur im Fokus. */
#contact-form select.form-control:not(:focus) + label {
    color: var(--ibc-p-navy) !important;
}

#contact-form select.form-control:focus + label {
    color: var(--ibc-p-green-dark) !important;
}

/* Etwas mehr Luft zwischen den Feldern, damit die schwebenden Labels das
   Feld darüber nicht berühren */
#contact-form .form-group-animated {
    margin-bottom: 26px !important;
}

#contact-form .form-group-animated.mb-4 {
    margin-bottom: 28px !important;
}

/* ==========================================================================
   20. KARTEN-ÜBERSCHRIFTEN: NIE ABSCHNEIDEN
   style.css erzwingt h3 { font-size: clamp(1.5rem, 0.5rem + 3vw, 2rem) !important }
   → in schmalen Karten (Für Unternehmen ab ~1000 px, Über uns) war „Prä-
   sentationstechnik“ breiter als die Karte und wurde abgeschnitten. Karten
   sind Flex-Container; ein Wort kann dort nicht schmaler werden als es selbst
   (min-content) – deshalb „overflow-wrap: anywhere“ + Silbentrennung.
   ========================================================================== */
main [class*="card"] :is(h3, h4, h5) {
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    -webkit-hyphens: auto !important;
    hyphens: auto !important;
    hyphenate-limit-chars: 8 3 3;
}

/* Leistungs-Karten (Marketing, Schulungen, Business, Digitalisierung) */
main .angebot-card h3 {
    font-size: clamp(1.05rem, 0.6vw + 0.85rem, 1.3rem) !important;
    line-height: 1.25 !important;
    letter-spacing: 0 !important;
    text-wrap: balance;
}

/* Übersichts-Karten „Beratungsfelder“ (Großbuchstaben) */
main .beratungsfeld-card__title {
    font-size: clamp(0.95rem, 0.5vw + 0.8rem, 1.2rem) !important;
    line-height: 1.3 !important;
    letter-spacing: 0.04em !important;
    text-wrap: balance;
}

/* Flip-Karten „Wer kann mitmachen?“ (Wirtschaftsingenieurwesen …) */
main .flip-card-front h3,
main .flip-card-back h3 {
    font-size: clamp(1rem, 0.6vw + 0.8rem, 1.35rem) !important;
    line-height: 1.25 !important;
    text-wrap: balance;
}

/* ==========================================================================
   21. FEINSCHLIFF AUS DEM BREITEN-TEST (320 – 1920 px)
   ========================================================================== */
/* Referenzen: Filter-Buttons umbrechen statt seitlich aus dem Bild zu laufen
   (ohne Hinweis, dass dort weitere Filter stehen) */
@media (max-width: 767.98px) {
    .filter-container {
        flex-wrap: wrap !important;
        justify-content: center !important;
        overflow: visible !important;
        gap: 8px !important;
    }

    .filter-container .filter-btn {
        flex: 0 0 auto;
        white-space: normal;
        max-width: 100%;
        text-align: center;
    }
}

/* Animierte Überschrift (Wort für Wort): overflow:hidden schnitt am Wortende
   ein paar Pixel ab */
.word-wrapper {
    padding-right: 0.08em;
    margin-right: -0.08em;
}

/* Rechtstexte: lange Wörter in Überschriften („Pflichtinformationen“) */
.privacy-content :is(h2, h3, h4),
.cookie-content :is(h2, h3, h4),
.impressum-card :is(h2, h3, h4) {
    overflow-wrap: anywhere !important;
    -webkit-hyphens: auto !important;
    hyphens: auto !important;
    max-width: 100%;
}

@media (max-width: 575.98px) {
    .privacy-content h2,
    .cookie-content h2,
    .impressum-card h2 {
        font-size: clamp(1.15rem, 5.6vw, 1.5rem) !important;
        line-height: 1.25 !important;
    }
}

/* Kontaktseite (< 992 px, Spalten untereinander): die Zeile hatte -24 px Seitenrand,
   die Spalten aber kein Polster → Inhalt rutschte über den linken Bildschirmrand */
@media (max-width: 991.98px) {
    main .row.g-5:has(#contact-form) {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100%;
    }
}

/* Kontakt (Desktop): Titel saß dicht unter der schwebenden Navigation
   (96 px statt 128+ px wie auf den anderen Unterseiten) */
@media (min-width: 992px) {
    body:has(#contact-form) .page-hero-section {
        padding-top: clamp(7.5rem, 10vw, 9.5rem) !important;
    }
}

/* Einleitungs-Absätze (.ibc-lead) starten mit opacity: 0 und erscheinen nur,
   wenn ein Elternelement „is-in-view“ bekommt. In manchen Abschnitten
   (z. B. „Bereit für den nächsten Schritt?“ auf Für Unternehmen) bekommt der
   Container aber nur „is-visible“ → Absatz blieb dauerhaft unsichtbar. */
.is-visible .ibc-lead,
.ibc-lead.is-visible {
    opacity: 1 !important;
    transform: none !important;
    transition: opacity 0.8s ease 0.2s, transform 0.8s ease 0.2s;
}