/* =========================================================================
   fisinger.de – Theme
   Orange/Grau, modern. Aufbauend auf Bootstrap 5.
   ========================================================================= */

:root {
    /* Markenorange – der Grundzustand der Seite. */
    --fis-orange:      #eb5c2c;
    --fis-orange-dark: #d34d20;
    --fis-orange-soft: #fdeee8;

    /* Rollen des Orange. Im Grundzustand tragen alle drei das Markenorange;
       der Kontrastmodus weiter unten tauscht nur diese Werte aus. Deshalb
       stehen im übrigen Stylesheet Rollen statt Farben – eine Umstellung
       braucht dann keine einzige Regel anzufassen. */
    --fis-orange-text:     #eb5c2c;      /* Text, Links, Buttonflächen */
    --fis-orange-deep:     #d34d20;      /* Hover/Active dazu */
    --fis-orange-on-dark:  #eb5c2c;      /* Orange auf dunklem Grund */
    --fis-orange-text-rgb: 235, 92, 44;  /* Bootstraps Fokusschatten */

    /* Lese-Schleier über dem Hero-Video, s. .hero--video::before */
    --fis-scrim-a: rgba(228, 231, 235, .97);
    --fis-scrim-b: rgba(198, 203, 210, .88);

    --fis-dark:        #2d2d2d;
    --fis-darker:      #252525;
    --fis-gray:        #6b7280;
    --fis-light:       #f4f6f8;
    --fis-hero:        #e9eef3;

    /* Bootstrap-Variablen überschreiben */
    --bs-primary:        #eb5c2c;
    --bs-primary-rgb:    235, 92, 44;
    --bs-body-color:     #2d2d2d;
    --bs-body-font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
    /* Bootstrap 5.3 bildet Linkfarben aus den -rgb-Varianten. Nur
       --bs-link-color zu setzen bleibt wirkungslos – Links blieben blau. */
    --bs-link-color:     #eb5c2c;
    --bs-link-hover-color: #d34d20;
    --bs-link-color-rgb: 235, 92, 44;
    --bs-link-hover-color-rgb: 211, 77, 32;
}

/* =========================================================================
   KONTRASTMODUS  (Umschalter „Darstellung" im Kopfbereich)
   -------------------------------------------------------------------------
   Das Markenorange #eb5c2c erreicht auf Weiß nur 3,44:1. Für Flächen, Icons
   und Rahmen genügt das (WCAG 1.4.11 verlangt 3:1), für Text, Links und
   weiße Schrift auf orangem Grund nicht (WCAG 1.4.3 verlangt 4,5:1).
   Der Grundzustand behält bewusst das Markenorange; dieser Modus liefert die
   konforme Fassung und ist von jeder Seite aus erreichbar.
   Die Töne bleiben dieselbe Farbfamilie, nur dunkler bzw. – auf dunklem
   Grund – heller.
   ========================================================================= */
html[data-kontrast="hoch"] {
    --fis-orange-text:     #b8431c;      /* 5,44:1 auf Weiß, 5,02:1 auf --fis-light */
    --fis-orange-deep:     #96360f;      /* 7,42:1 – Hover/Active dazu */
    --fis-orange-on-dark:  #f5825a;      /* 6,00:1 auf --fis-darker */
    --fis-orange-text-rgb: 184, 67, 28;
    /* #6b7280 erreicht auf getönten Flächen nur 4,14:1 */
    --fis-gray:            #5d6673;      /* 5,81:1 auf Weiß, 4,98:1 auf --fis-hero */
    /* Hellerer Schleier: Eyebrow und Text sitzen oben links über dem Video */
    --fis-scrim-a: rgba(250, 251, 252, .97);
    --fis-scrim-b: rgba(219, 224, 230, .92);

    --bs-link-color:     #b8431c;
    --bs-link-hover-color: #96360f;
    --bs-link-color-rgb: 184, 67, 28;
    --bs-link-hover-color-rgb: 150, 54, 15;
}

/* Wer im Betriebssystem „erhöhter Kontrast" eingestellt hat, bekommt die
   konforme Fassung sofort – bis er im Menü ausdrücklich „Standard" wählt.
   Die Werte stehen bewusst doppelt: CSS kann eine Media Query nicht in eine
   Selektorliste ziehen. Bei Änderungen beide Blöcke pflegen. */
@media (prefers-contrast: more) {
    html:not([data-kontrast="standard"]) {
        --fis-orange-text:     #b8431c;
        --fis-orange-deep:     #96360f;
        --fis-orange-on-dark:  #f5825a;
        --fis-orange-text-rgb: 184, 67, 28;
        --fis-gray:            #5d6673;
        --fis-scrim-a: rgba(250, 251, 252, .97);
        --fis-scrim-b: rgba(219, 224, 230, .92);

        --bs-link-color:     #b8431c;
        --bs-link-hover-color: #96360f;
        --bs-link-color-rgb: 184, 67, 28;
        --bs-link-hover-color-rgb: 150, 54, 15;
    }
}

/* =========================================================================
   SCHRIFTGRÖSSE  (Umschalter „Darstellung")
   -------------------------------------------------------------------------
   Nur die Wurzel-Schriftgröße wird verstellt. Weil das Layout in rem rechnet,
   wachsen Text, Abstände und Zielflächen gleichmäßig mit; die Breite der
   Container bleibt, sodass nichts umbricht, was nicht umbrechen soll.
   ========================================================================= */
html[data-schrift="gross"]      { font-size: 112.5%; }  /* 16 -> 18 px */
html[data-schrift="sehr-gross"] { font-size: 125%; }    /* 16 -> 20 px */

/* --- Basis ------------------------------------------------------------- */
html {
    /* Sprungziele (Skip-Link/Anker) nicht hinter dem Sticky-Header verstecken */
    scroll-padding-top: 110px;
}
body {
    font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
    color: var(--fis-dark);
    background: #fff;
}

h1, h2, h3, h4, h5, h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-family: 'Roboto', 'Poppins', sans-serif;
    font-weight: 700;
    color: var(--fis-darker);
    letter-spacing: 0;
}

a { text-decoration: none; }

/* WCAG 1.4.1 (Verwendung von Farbe): Ein Link im Fließtext darf sich nicht
   allein durch die Farbe vom Text unterscheiden. Gegen die Grundtextfarbe
   #2d2d2d reicht das Orange mit 4,00:1 dafür aus, gegen .text-secondary
   (#6b7280) aber nur 1,40:1 – gefordert wären 3:1. Weil im Layout beides
   vorkommt, sind Links im Textkörper dauerhaft unterstrichen. Das gilt in
   jedem Darstellungsmodus: ein Umschalter „Links unterstreichen" wäre nur
   nötig, wenn der Grundzustand nicht stimmt.
   Navigation, Buttons und Kacheln bleiben ausgenommen – dort ist der Link an
   Fläche, Rahmen und Position erkennbar. */
main :is(p, li, dd, dt, td, th, figcaption, blockquote, address) a:not(.btn) {
    text-decoration: underline;
    text-underline-offset: .18em;
    text-decoration-thickness: 1px;
}
main :is(p, li, dd, dt, td, th, figcaption, blockquote, address) a:not(.btn):hover,
main :is(p, li, dd, dt, td, th, figcaption, blockquote, address) a:not(.btn):focus-visible {
    text-decoration-thickness: 2px;
}

/* --- Barrierefreiheit ------------------------------------------------- */
/* Sichtbarer Tastatur-Fokus (WCAG 2.4.7) – auf hell, orange und dunkel sichtbar */
:focus-visible {
    outline: 3px solid #1c64f2;
    outline-offset: 2px;
    border-radius: 3px;
}
/* Skip-Link: nur bei Tastatur-Fokus sichtbar */
.skip-link {
    position: absolute;
    left: .5rem;
    top: -3rem;
    z-index: 2000;
    background: var(--fis-darker);
    color: #fff;
    padding: .6rem 1.1rem;
    border-radius: 0 0 8px 8px;
    font-weight: 600;
    transition: top .15s ease;
}
.skip-link:focus { top: 0; color: #fff; }

/* Nur für Screenreader (visuell versteckt, aber vorlesbar) */
.visually-hidden-focusable:not(:focus):not(:focus-within) {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

/* Bewegung reduzieren, wenn vom Nutzer gewünscht (WCAG 2.3.3) */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* Orange als Textfarbe immer über die Rolle --fis-orange-text, nie direkt über
   --fis-orange: nur so greift der Kontrastmodus (s. :root). */
.text-orange { color: var(--fis-orange-text) !important; }
/* Badges tragen weißen Text – also ebenfalls die Textrolle */
.bg-orange   { background-color: var(--fis-orange-text) !important; }
.bg-soft     { background-color: var(--fis-light) !important; }
/* Auf dunklem Grund kehrt sich das Verhältnis um */
.hero--dark .text-orange,
.section-dark .text-orange,
.site-footer .text-orange { color: var(--fis-orange-on-dark) !important; }

/* --- Buttons ----------------------------------------------------------- */
.btn-primary {
    --bs-btn-bg: var(--fis-orange-text);
    --bs-btn-border-color: var(--fis-orange-text);
    --bs-btn-hover-bg: var(--fis-orange-deep);
    --bs-btn-hover-border-color: var(--fis-orange-deep);
    --bs-btn-active-bg: var(--fis-orange-deep);
    --bs-btn-active-border-color: var(--fis-orange-deep);
    --bs-btn-focus-shadow-rgb: var(--fis-orange-text-rgb);
    font-weight: 600;
}
.btn-outline-primary {
    --bs-btn-color: var(--fis-orange-text);
    --bs-btn-border-color: var(--fis-orange-text);
    --bs-btn-hover-bg: var(--fis-orange-text);
    --bs-btn-hover-border-color: var(--fis-orange-text);
    --bs-btn-active-bg: var(--fis-orange-deep);
    --bs-btn-active-border-color: var(--fis-orange-deep);
    font-weight: 600;
}
.btn { border-radius: 8px; }
.btn-lg { padding: .75rem 1.75rem; }

/* =========================================================================
   HEADER
   ========================================================================= */

/* Top-Bar (schmaler orangener Balken).
   Trägt weißen Text in .82rem – deshalb die Textrolle, die im Kontrastmodus
   nachdunkelt. */
.topbar {
    background: var(--fis-orange-text);
    color: #fff;
    font-size: .82rem;
    /* Über dem Sticky-Header (z-index 1030), damit die Dropdowns
       (Login, Support, Über Uns) nicht vom Header überdeckt werden. */
    position: relative;
    z-index: 1040;
}
.topbar a { color: #fff; opacity: .95; }
.topbar a:hover { opacity: 1; color: #fff; }
.topbar .dropdown-menu { font-size: .9rem; }
.topbar .nav-link { color: #fff; padding: .35rem .7rem; }
.topbar .contact-item { display: inline-flex; align-items: center; gap: .4rem; }
/* Dropdown-Einträge im weißen Menü wieder dunkel (nicht weiß-auf-weiß) */
.topbar .dropdown-item { color: var(--fis-dark); opacity: 1; }
.topbar .dropdown-item:hover,
.topbar .dropdown-item:focus { color: var(--fis-orange-deep); }

/* Sticky Hauptheader */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: #fff;
    box-shadow: 0 1px 0 rgba(0,0,0,.06);
}
.site-header .navbar { transition: padding .25s ease; }
.site-header.is-scrolled { box-shadow: 0 6px 20px rgba(0,0,0,.08); }
.site-header.is-scrolled .navbar { padding-top: .35rem; padding-bottom: .35rem; }

.navbar-brand img { height: 42px; width: auto; transition: height .25s ease; }
.site-header.is-scrolled .navbar-brand img { height: 36px; }

/* Hauptnav-Links */
.main-nav .nav-link {
    color: var(--fis-dark);
    font-weight: 600;
    padding: .5rem 1rem;
    position: relative;
}
.main-nav .nav-link:hover { color: var(--fis-orange-text); }
.main-nav .nav-item.active > .nav-link { color: var(--fis-orange-text); }
/* Aktiv-Markierung als ::before – Bootstrap nutzt ::after für das Caret der
   Dropdowns. Über ::after wäre der Pfeil bei aktivem Menüpunkt verschwunden. */
.main-nav .nav-item.active > .nav-link::before {
    content: "";
    position: absolute;
    left: 1.05rem; right: 1.05rem; bottom: .15rem;
    height: 2px;
    border-radius: 2px;
    background: var(--fis-orange);
}
/* Bei Dropdowns rechts Platz für das Caret lassen, damit die Linie nicht
   darunter durchläuft. */
.main-nav .nav-item.active > .nav-link.dropdown-toggle::before { right: 1.9rem; }

/* "NEU"-Badge */
.badge-neu {
    background: var(--fis-orange-text);
    color: #fff;
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .04em;
    padding: .15em .45em;
    border-radius: 4px;
    vertical-align: middle;
    margin-left: .3rem;
    text-transform: uppercase;
}

/* Dropdowns */
.dropdown-menu {
    border: none;
    border-radius: 10px;
    box-shadow: 0 12px 34px rgba(0,0,0,.12);
    padding: .4rem;
}
.dropdown-item {
    border-radius: 7px;
    font-weight: 500;
    padding: .5rem .8rem;
}
.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--fis-orange-soft);
    /* auf dem hellen Orangeton --fis-orange-soft der dunklere Ton */
    color: var(--fis-orange-deep);
}

/* =========================================================================
   DARSTELLUNGSMENÜ  (Kontrast + Schriftgröße)
   -------------------------------------------------------------------------
   Steht in der Top-Bar (Desktop) und im aufgeklappten Menü (Mobil). Kein
   schwebendes Widget am Bildschirmrand: das würde Inhalte verdecken und mit
   dem Cookie-Banner und dem Nach-oben-Button um denselben Platz streiten.
   ========================================================================= */
.a11y-toggle {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: inherit;
    font-weight: 500;
    line-height: 1.4;
    border: 0;
    background: none;
    padding: .35rem .7rem;
}
.a11y-toggle i { font-size: 1.05em; }
/* In der orangen Top-Bar weiß, im weißen Mobilmenü dunkel */
.topbar .a11y-toggle { color: #fff; }
.navbar .a11y-toggle { color: var(--fis-dark); }
.navbar .a11y-toggle:hover { color: var(--fis-orange-text); }

.a11y-panel {
    min-width: 15rem;
    padding: .85rem;
    /* Schrift nicht aus der .82rem-Top-Bar erben – die Optionen müssen in
       jedem Modus gut lesbar bleiben. */
    font-size: .95rem;
    color: var(--fis-dark);
}
.a11y-panel fieldset { border: 0; margin: 0 0 .75rem; padding: 0; }
.a11y-panel legend {
    float: none;                 /* Bootstrap setzt legend auf 100 % Breite */
    width: auto;
    margin-bottom: .35rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--fis-gray);
}
.a11y-panel .form-check { margin-bottom: .15rem; padding-left: 1.7rem; }
.a11y-panel .form-check-input { margin-top: .3rem; }
.a11y-panel .form-check-input:checked {
    background-color: var(--fis-orange-text);
    border-color: var(--fis-orange-text);
}
.a11y-panel .form-check-label { cursor: pointer; }
.a11y-panel .a11y-hint {
    margin: 0;
    padding-top: .6rem;
    border-top: 1px solid rgba(0, 0, 0, .1);
    font-size: .78rem;
    color: var(--fis-gray);
}
/* Ohne JavaScript bewirkt das Menü nichts – dann gar nicht anzeigen. */
html:not(.js) .a11y-menu { display: none; }

/* =========================================================================
   HERO
   ========================================================================= */
.hero {
    /* Fallback-Verlauf, falls kein Bild gesetzt ist */
    background: linear-gradient(135deg, var(--fis-hero) 0%, #f3f6f9 100%);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: scroll; /* scrollt mit der Seite (nicht fixiert) */
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    min-height: 460px;
    padding: 4.5rem 0;
}
.hero .container { position: relative; z-index: 2; }
.hero h1 { font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.1; }
.hero .lead { color: var(--fis-gray); font-size: 1.15rem; }

/* Video-Hintergrund im Hero */
.hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
}

/* Hero, der den ersten Bildschirm füllt (Startseite).
   Abgezogen wird die Höhe von Header (+ Top-Bar ab lg), damit der Anschluss
   an die nächste Sektion sichtbar bleibt. */
.hero--full { min-height: calc(100vh - 76px); }
@media (min-width: 992px) {
    .hero--full { min-height: calc(100vh - 110px); }
}
/* svh berücksichtigt die ein- und ausfahrende Browserleiste auf Mobilgeräten */
@supports (height: 100svh) {
    .hero--full { min-height: calc(100svh - 76px); }
    @media (min-width: 992px) {
        .hero--full { min-height: calc(100svh - 110px); }
    }
}

/* Scroll-Hinweis am unteren Rand des Vollbild-Heros */
.hero-scroll {
    position: absolute;
    left: 50%;
    bottom: 1.25rem;
    transform: translateX(-50%);
    z-index: 2;
    color: var(--fis-dark);
    opacity: .75;
    font-size: 1.35rem;
    line-height: 1;
    padding: .5rem;
}
.hero-scroll:hover { opacity: 1; color: var(--fis-orange-text); }

/* Wer weniger Bewegung möchte, sieht statt des Videos das Posterbild
   (liegt als Hintergrundbild der Sektion darunter). */
@media (prefers-reduced-motion: reduce) {
    .hero-video { display: none; }
    /* Ohne Video gibt es nichts anzuhalten – Schalter ausblenden. */
    .hero-video-toggle { display: none !important; }
}

/* Pause-Schalter für das Hero-Video (WCAG 2.2.2).
   Bewusst dezent, aber mit ausreichendem Kontrast und 44x44 px Zielfläche
   (WCAG 2.5.8 Zielgröße). */
.hero-video-toggle {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    z-index: 3;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: rgba(37, 37, 37, .78);
    color: #fff;
    font-size: .95rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .2s ease;
}
.hero-video-toggle:hover { background: var(--fis-darker); }
.hero-video-toggle:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@media (min-width: 992px) {
    .hero-video-toggle { right: 1.5rem; bottom: 1.5rem; }
}

/* Lese-Schleier über dem Hintergrundbild/-video (Textseite) */
.hero--light::before,
.hero--dark::before,
.hero--video::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}
/* Grauer Farbverlauf über dem Video/Bild – macht es dezenter, hält dunklen Text
   lesbar. Die ersten beiden Stopps sind Variablen: im Kontrastmodus werden sie
   heller, weil Eyebrow und Text oben links sitzen und dort auch das Orange
   noch 4,5:1 erreichen muss (bei .97 über dem hellsten denkbaren Videobild
   sind es 5,22:1). */
.hero--video::before {
    background: linear-gradient(135deg,
        var(--fis-scrim-a) 0%,
        var(--fis-scrim-b) 55%,
        rgba(168, 174, 183, .78) 100%);
}
/* Helles Bild -> dunkler Text bleibt, dezenter weißer Verlauf links */
.hero--light::before {
    background: linear-gradient(90deg,
        rgba(255,255,255,.82) 0%,
        rgba(255,255,255,.45) 45%,
        rgba(255,255,255,0) 78%);
}
/* Dunkles Bild -> weißer Text, dunkler Verlauf links für Kontrast */
.hero--dark { color: #fff; }
.hero--dark h1 { color: #fff; }
.hero--dark .lead { color: rgba(255,255,255,.88); }
.hero--dark .aktion-line { color: #fff; }
.hero--dark .text-secondary { color: rgba(255,255,255,.8) !important; }
.hero--dark::before {
    background: linear-gradient(90deg,
        rgba(15,20,32,.88) 0%,
        rgba(15,20,32,.62) 45%,
        rgba(15,20,32,.15) 80%);
}

/* Bildplatzhalter rechts (4 Rastereinheiten) */
.hero-figure {
    aspect-ratio: 4 / 3;
    width: 100%;
    border-radius: 16px;
    border: 2px dashed rgba(45,45,45,.25);
    background: rgba(255,255,255,.55);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    color: var(--fis-gray);
    text-align: center;
}
.hero-figure i { font-size: 2.6rem; opacity: .6; }
.hero-figure span { font-size: .85rem; font-weight: 500; }
.hero--dark .hero-figure {
    background: rgba(255,255,255,.10);
    border-color: rgba(255,255,255,.4);
    color: rgba(255,255,255,.85);
}

/* Domain-Suchfeld */
.domain-search .form-control {
    border: 1px solid #dfe4ea;
    border-right: none;
    border-radius: 10px 0 0 10px;
    padding: .9rem 1.1rem;
    font-size: 1.05rem;
}
.domain-search .form-control:focus {
    box-shadow: none;
    border-color: var(--fis-orange);
}
.domain-search .btn {
    border-radius: 0 10px 10px 0;
    padding-left: 1.4rem; padding-right: 1.4rem;
}

/* Große Variante (Startseite): Schaltfläche mit Text statt bloßer Lupe.
   Auf schmalen Geräten reicht die Zeile für Feld und Text nicht mehr, dort
   stapelt sich beides. Der Text bleibt dabei sichtbar, statt ihn auszublenden:
   ein Knopf, dessen Beschriftung verschwindet, verliert seinen Namen. */
.domain-search--gross .btn { font-weight: 600; }
@media (max-width: 575.98px) {
    .domain-search--gross .input-group { flex-wrap: wrap; }
    .domain-search--gross .form-control {
        flex: 1 0 100%;
        border-right: 1px solid #dfe4ea;
        border-radius: 10px;
    }
    .domain-search--gross .btn {
        width: 100%;
        margin-top: .6rem;
        border-radius: 10px;
    }
}
.aktion-line { font-size: .95rem; color: var(--fis-dark); }
.aktion-line .sep { color: #c9ced4; margin: 0 .35rem; }

/* =========================================================================
   SECTIONS / CARDS
   ========================================================================= */
.section { padding: 4.5rem 0; }
.section-title { margin-bottom: 2.5rem; }

/* Section mit Hintergrundbild (optional mit abschwächendem Overlay) */
.section-bg {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: scroll; /* scrollt mit der Seite (nicht fixiert) */
}
.section-bg > .container { position: relative; z-index: 1; }
.section-bg--overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    /* heller Schleier – schwächt das Bild ab, hält Text/Karten lesbar */
    background: rgba(255, 255, 255, .82);
}

/* Dekorativer oranger Unterstrich unter Hauptüberschriften */
.heading-accent { padding-bottom: .2rem; }
.heading-accent::after {
    content: "";
    display: block;
    width: 56px;
    height: 4px;
    border-radius: 4px;
    background: var(--fis-orange);
    margin-top: .8rem;
}
/* zentriert, wenn die Überschrift zentriert ausgerichtet ist */
.text-center .heading-accent::after,
.heading-accent.text-center::after { margin-left: auto; margin-right: auto; }

/* Eyebrow / Kicker – kleines oranges Label über Überschriften */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    /* kleiner, aber echter Text – daher die Textrolle */
    color: var(--fis-orange-text);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .78rem;
    margin-bottom: .75rem;
}
.eyebrow::before {
    content: "";
    width: 26px; height: 3px;
    border-radius: 99px;
    background: var(--fis-orange);
}
.text-center .eyebrow { justify-content: center; }
.hero--dark .eyebrow { color: #fff; }
.hero--dark .eyebrow::before { background: #fff; }

/* Check-Liste (Häkchen in Markenfarbe) */
.check-list { list-style: none; padding: 0; margin: 0; }
.check-list li { position: relative; padding-left: 1.9rem; margin-bottom: .7rem; }
.check-list li::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: var(--fis-orange);
    position: absolute; left: 0; top: .15rem;
}

/* Kennzahl-Karten */
.stat-card {
    background: #fff;
    border: 1px solid #eef0f2;
    border-radius: 14px;
    padding: 1.25rem 1rem;
    text-align: center;
    height: 100%;
}
.stat-card strong { display: block; color: var(--fis-orange); font-size: 1.5rem; line-height: 1.1; margin-bottom: .2rem; }
.stat-card span { color: var(--fis-gray); font-size: .88rem; }

/* Akzent-Panel (oranger Verlauf, weiße Schrift) */
/* Weiße Schrift auf Orange: Verlauf aus den Textrollen, nicht aus --fis-orange */
.panel-accent {
    background: linear-gradient(135deg, var(--fis-orange-text), var(--fis-orange-deep));
    color: #fff;
    border-radius: 18px;
    padding: 2.5rem;
}
/* Auf die Höhe der Nachbarspalte strecken – aber nur, wenn das Panel allein in
   seiner Spalte steht. Sitzt noch ein Kasten darüber (Impressum, Datenschutz),
   käme zu dessen Höhe die volle Spaltenhöhe hinzu und das Panel ragte unten
   heraus, bis es den Footer überlappt. */
.panel-accent:only-child { height: 100%; }
.panel-accent h2, .panel-accent h3 { color: #fff; }
.panel-accent .check-list li::before { color: #fff; }

/* Info-Badge (Hero-Chips) */
.hero-badges { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.4rem 0; }
.hero-badge {
    display: inline-flex; align-items: center; gap: .5rem;
    background: #fff;
    color: var(--fis-dark);
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    padding: .5rem .85rem;
    font-size: .88rem;
    font-weight: 600;
    box-shadow: 0 6px 16px rgba(15,23,42,.06);
}
.hero-badge i { color: var(--fis-orange); }

/* Shop-iFrames (KIS) – ohne umrahmten Kasten, direkt eingebettet.
   Nur noch Rückfallebene: die Produktseiten geben ihre Tarife inzwischen
   nativ über includes/shop-produkte.php aus (Karten darunter). */
.shop-embed {
    width: 100%;
    border: 0;
    display: block;
    min-height: 200px; /* kleiner Fallback, bis das Resize-Script die echte Höhe meldet */
}

/* Shop-Produktkarten – native Einbindung über die Portal-API
   (includes/shop-produkte.php). Aufbau wie .service-card, ergänzt um
   Preisblock, Feature-Liste und Bänder für Aktion/Empfohlen. */
.shop-produkte { padding-top: .9rem; } /* Platz für das überstehende Band der ersten Reihe */
.produkt-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid #eef0f2;
    border-radius: 16px;
    padding: 1.75rem 1.5rem 1.5rem;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.produkt-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(45,45,45,.10);
}
.produkt-card--empfohlen { border-color: var(--fis-orange-text); }
.produkt-badge {
    position: absolute;
    top: -.85rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--fis-orange-text);
    color: #fff;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: .32rem .95rem;
    white-space: nowrap;
}
.produkt-name {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--fis-darker);
    margin-bottom: .4rem;
}
.produkt-chip-neu {
    display: inline-block;
    vertical-align: .15em;
    margin-left: .35rem;
    background: var(--fis-orange-soft);
    color: var(--fis-orange-text);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: .18rem .6rem;
}
.produkt-kurz {
    color: var(--fis-gray);
    font-size: .9rem;
    margin-bottom: 1rem;
}
.produkt-features {
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem;
    font-size: .88rem;
}
.produkt-features li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: .75rem;
    padding: .45rem 0;
    border-bottom: 1px solid #f1f3f5;
}
.produkt-features li:last-child { border-bottom: 0; }
.produkt-features .feat-name { color: var(--fis-gray); }
.produkt-features .feat-wert {
    font-weight: 600;
    color: var(--fis-dark);
    text-align: right;
}
.produkt-features .feat-ja   { color: var(--fis-orange-text); }
.produkt-features .feat-nein { color: #9aa1a9; } /* Bedeutung trägt der Screenreader-Text, nicht die Farbe */
.produkt-fuss { margin-top: auto; padding-top: .25rem; }
.produkt-preis {
    font-size: 1.55rem;
    font-weight: 800;
    color: var(--fis-darker);
    line-height: 1.15;
}
.produkt-intervall {
    font-size: .9rem;
    font-weight: 600;
    color: var(--fis-gray);
}
.produkt-preis-alt {
    text-decoration: line-through;
    color: var(--fis-gray);
    font-size: 1rem;
    font-weight: 600;
    margin-left: .3rem;
}
.produkt-mwst {
    display: block;
    color: var(--fis-gray);
    font-size: .78rem;
    margin-top: .2rem;
}
.produkt-varianten {
    color: var(--fis-gray);
    font-size: .82rem;
    margin-top: .6rem;
}

/* Domain-Preiskacheln – native Einbindung über die Portal-API
   (includes/shop-domains.php). Filter und "Mehr anzeigen" steuert
   assets/js/domains-tlds.js; ohne JavaScript sind alle Kacheln sichtbar. */
.tld-filter {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: center;
    margin-bottom: .9rem;
}
.tld-filter-btn {
    border: 1px solid #e5e7eb;
    background: #fff;
    color: var(--fis-dark);
    border-radius: 999px;
    padding: .4rem 1rem;
    font-size: .85rem;
    font-weight: 600;
    transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.tld-filter-btn:hover {
    border-color: var(--fis-orange-text);
    color: var(--fis-orange-text);
}
.tld-filter-btn.active {
    background: var(--fis-orange-text);
    border-color: var(--fis-orange-text);
    color: #fff;
}
.tld-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: .9rem;
    padding-top: .75rem; /* Platz für das überstehende Aktions-Band der ersten Reihe */
}
.tld-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .15rem;
    background: #fff;
    border: 1px solid #eef0f2;
    border-radius: 14px;
    padding: 1.3rem .75rem 1rem;
    text-align: center;
    text-decoration: none;
    color: var(--fis-dark);
    transition: transform .2s ease, box-shadow .2s ease;
}
.tld-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(45,45,45,.10);
    border-color: var(--fis-orange-text);
    color: var(--fis-dark);
}
.tld-aktion {
    position: absolute;
    top: -.7rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--fis-orange-text);
    color: #fff;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: .22rem .7rem;
    white-space: nowrap;
}
/* Zweifarbig wie im alten Portal-Embed: die Endung in Markenorange als
   Blickfang, der Preis kräftig dunkel darunter – vorher war beides dunkel
   und die Liste wirkte grau in grau. Orange nur über die Rolle
   --fis-orange-text, damit der Kontrastmodus greift (s. :root). */
.tld-name {
    font-weight: 800;
    font-size: 1.2rem;
    color: var(--fis-orange-text);
}
.tld-preis {
    font-weight: 700;
    color: var(--fis-darker);
    line-height: 1.3;
}
.tld-preis small {
    color: var(--fis-gray);
    font-weight: 600;
}
.tld-preis-alt {
    display: block;
    color: var(--fis-gray);
    font-size: .8rem;
    font-weight: 600;
}
.tld-preis--anfrage {
    color: var(--fis-gray);
    font-size: .8rem;
    font-weight: 600;
}
.tld-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    justify-content: center;
    margin-top: .4rem;
}
.tld-chip {
    background: var(--fis-light);
    color: var(--fis-gray);
    border-radius: 999px;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    padding: .16rem .5rem;
}
.tld-chip--top {
    background: var(--fis-orange-soft);
    color: var(--fis-orange-text);
}

/* Klickbare Vorschaubilder (zoombar) – ohne Rahmen */
.zoomable {
    display: block;
    cursor: zoom-in;
}
.zoomable img {
    width: 100%;
    height: auto;
    border: 0;
    transition: transform .25s ease;
}
.zoomable:hover img { transform: scale(1.02); }
.zoomable:focus-visible { outline: 3px solid #1c64f2; outline-offset: 2px; }

/* Dunkle Fläche hinter freigestellten Grafiken. Transparente PNGs mit hellen
   Beschriftungen (z. B. die Backbone-Karte) sind auf weißem Grund kaum
   lesbar – auf Dunkel treten sie hervor. Die Lightbox ist bereits dunkel. */
.figure-dark {
    background: var(--fis-darker);
    border-radius: 18px;
    padding: 1.5rem;
}
@media (max-width: 575.98px) {
    .figure-dark { padding: 1rem; border-radius: 14px; }
}

/* Lightbox-Overlay */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: rgba(15, 20, 32, .9);
    cursor: zoom-out;
}
.lightbox.is-open { display: flex; }
.lightbox img {
    max-width: 95%;
    max-height: 90%;
    border: 0;         /* kein Rahmen */
}
.lightbox__close {
    position: absolute;
    top: 1rem; right: 1.25rem;
    width: 46px; height: 46px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .15);
    color: #fff;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}
.lightbox__close:hover { background: var(--fis-orange); }

/* Leistungs-Kachel */
.service-card {
    border: 1px solid #eef0f2;
    border-radius: 16px;
    padding: 2rem 1.5rem;
    height: 100%;
    background: #fff;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.service-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(45,45,45,.10);
    border-color: transparent;
}
.service-icon {
    width: 62px; height: 62px;
    border-radius: 14px;
    background: var(--fis-orange-soft);
    color: var(--fis-orange);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem;
    margin-bottom: 1.1rem;
}

/* Feature-Item (Domainangebot-Grid) */
.feature-box {
    background: #fff;
    border: 1px solid #eef0f2;
    border-radius: 18px;
    padding: 2rem;
}
.feature-item { display: flex; gap: 1rem; align-items: flex-start; }
.feature-item .fi-icon {
    flex: 0 0 auto;
    width: 46px; height: 46px;
    border-radius: 12px;
    background: var(--fis-orange-soft);
    color: var(--fis-orange);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.15rem;
}
.feature-item h3 { font-size: 1.05rem; margin-bottom: .1rem; }
.feature-item p { margin: 0; color: var(--fis-gray); font-size: .9rem; }

/* Text-Icon-Absatz (Domainangebot links) */
.info-row { display: flex; gap: 1rem; margin-bottom: 1.4rem; }
.info-row .ir-icon {
    flex: 0 0 auto;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--fis-darker);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
}
.info-row p { margin: 0; color: var(--fis-gray); }

/* CTA-Band */
.cta-band {
    background: linear-gradient(135deg, var(--fis-orange-text), var(--fis-orange-deep));
    color: #fff;
    border-radius: 22px;
    padding: 3rem;
}
.cta-band h2 { color: #fff; }
/* weißer Button im orangen Band – Schrift im dunkleren Ton */
.cta-band .btn-light { color: var(--fis-orange-deep); font-weight: 700; }

/* =========================================================================
   FOOTER
   ========================================================================= */
.site-footer {
    background: var(--fis-darker);
    color: #c9ccd1;
    padding: 3.5rem 0 1.5rem;
}
.site-footer .footer-heading {
    /* auf dunklem Grund gilt die eigene Rolle – im Kontrastmodus wird sie heller */
    color: var(--fis-orange-on-dark);
    font-size: 1.05rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: 1.1rem;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
}
.site-footer a { color: #b7bbc2; }
.site-footer a:hover { color: #fff; }
.site-footer .footer-logo { height: 40px; margin-bottom: 1rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer ul li { margin-bottom: .55rem; font-size: .92rem; }

/* Support & Beratung: Icon + Label + Wert */
.footer-support li { display: flex; gap: .85rem; align-items: flex-start; margin-bottom: 1rem; }
.footer-support li > i { color: var(--fis-orange); font-size: 1.35rem; width: 26px; text-align: center; margin-top: .15rem; }
.footer-support .support-label { display: block; color: #fff; font-weight: 600; font-size: .9rem; }

/* Kompaktes Domain-Suchfeld */
.footer-search .form-control {
    border: none;
    border-radius: 6px 0 0 6px;
    padding: .6rem .9rem;
}
.footer-search .form-control:focus { box-shadow: none; }
.footer-search .btn { border-radius: 0 6px 6px 0; }

/* Hosttest-Auszeichnungen */
.footer-badges { display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; margin-bottom: 1.5rem; }
.footer-badges img { height: 74px; width: auto; border-radius: 6px; }

/* Social-Icons */
.footer-social { display: flex; gap: .6rem; }
.footer-social li { margin: 0; }
.footer-social a {
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.08);
    border-radius: 8px;
    color: #c9ccd1;
    transition: background .2s ease, color .2s ease;
}
.footer-social a:hover { background: var(--fis-orange); color: #fff; }

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,.1);
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    font-size: .85rem;
    color: #9a9ea6;
    text-align: center;
}

/* Widerrufsschaltfläche im Footer – muss deutlich lesbar und leicht
   zugänglich sein, deshalb abgesetzt und nicht als Fließtext-Link. */
.footer-widerruf {
    border-top: 1px solid rgba(255, 255, 255, .12);
    margin-top: 2rem;
    padding-top: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.5rem;
}
.footer-widerruf p { color: #b7bbc2; max-width: 46rem; }
/* Zurückhaltende Variante auf dunklem Grund: ein weißer Block sticht hier zu
   stark heraus. Umrandung und weiße Schrift halten die Schaltfläche klar
   erkennbar (gesetzlich muss sie leicht auffindbar bleiben), das orange Icon
   setzt den Markenakzent. Beim Hover füllt sie sich orange, wie .btn-primary
   auch: im Kontrastmodus greift dort dieselbe dunklere Orangerolle. */
.btn-widerruf {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .45);
    font-weight: 600;
    padding: .6rem 1.25rem;
    white-space: nowrap;
}
.btn-widerruf i { color: var(--fis-orange-on-dark); }
.btn-widerruf:hover,
.btn-widerruf:focus-visible {
    background: var(--fis-orange-text);
    border-color: var(--fis-orange-text);
    color: #fff;
}
.btn-widerruf:hover i,
.btn-widerruf:focus-visible i { color: #fff; }

.footer-cookie-link {
    color: #9a9ea6;
    text-decoration: underline;
    font-size: .85rem;
    vertical-align: baseline;
}
.footer-cookie-link:hover { color: #fff; }

/* =========================================================================
   NACH-OBEN-BUTTON
   ========================================================================= */
.to-top {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 1035;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 50%;
    background: var(--fis-orange);
    color: #fff;
    font-size: 1.1rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .18);
    /* Standard: unsichtbar und nicht fokussierbar, bis gescrollt wurde */
    opacity: 0;
    visibility: hidden;
    transform: translateY(.5rem);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--fis-orange-dark); color: #fff; }
.to-top:focus-visible { outline: 3px solid #1c64f2; outline-offset: 3px; }
/* Platz für das Cookie-Banner am unteren Rand */
@media (max-width: 575.98px) {
    .to-top { right: .85rem; bottom: .85rem; width: 44px; height: 44px; }
}

/* =========================================================================
   RECHTSTEXTE (Impressum, Datenschutz, AGB, Widerrufsinformationen)
   ========================================================================= */
/* Reine Fließtextseiten. Sie brauchen keine Karten und keine Farbflächen,
   sondern begrenzte Zeilenlänge und deutliche Abstände – daran erkennt man
   die Gliederung auch ohne Rahmen. */
.legal-text > section + section { margin-top: 2.75rem; }
.legal-text h2 { font-size: 1.35rem; margin-bottom: .75rem; }
.legal-text h3 { font-size: 1.05rem; margin: 1.5rem 0 .5rem; }
/* 68 Zeichen je Zeile – darüber verliert das Auge beim Rücksprung die Zeile
   (WCAG 1.4.8 empfiehlt maximal 80). */
.legal-text p,
.legal-text li { max-width: 68ch; }
.legal-text dl { margin: 0; }
.legal-text dt {
    color: var(--fis-gray);
    font-size: .85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
}
.legal-text dd { margin: 0 0 1rem; }

/* Inhaltsverzeichnis in der Randspalte */
.legal-toc { position: sticky; top: 110px; }
.legal-toc ol { list-style: none; padding: 0; margin: 0; }
.legal-toc li { margin-bottom: .5rem; }
.legal-toc a { text-decoration: none; }
.legal-toc a:hover,
.legal-toc a:focus { text-decoration: underline; }

/* Nummerierung per CSS-Zähler – nur dort, wo die Nummer nicht schon in der
   Beschriftung steht. Die AGB heißen bereits „§ 1 …“, ein zusätzliches „1. “
   davor wäre doppelt. */
.legal-toc--numbered ol { counter-reset: toc; }
.legal-toc--numbered li { counter-increment: toc; }
.legal-toc--numbered a::before { content: counter(toc) ". "; color: var(--fis-gray); }

/* Von eRecht24 gelieferter Text. Die Gliederung kommt von dort und besteht aus
   Überschriften statt aus <section>-Blöcken – der Abstand zwischen den
   Abschnitten muss deshalb an der Überschrift hängen. Alles andere (Zeilenlänge,
   Schriftgrößen) erbt der Block von .legal-text, weil er darin liegt. */
.legal-sync h2 { margin-top: 2.75rem; }
.legal-sync > :first-child,
.legal-sync > :first-child h2 { margin-top: 0; }

/* Noch nicht gelieferter Text. Bewusst sichtbar: eine Lücke in einem
   Rechtstext fällt niemandem auf, ein Platzhalter schon. Vor dem Livegang
   darf keine .legal-pending mehr im Quelltext stehen. */
.legal-pending {
    border-left: 3px solid var(--fis-orange);
    background: var(--fis-orange-soft);
    padding: .6rem .9rem;
    margin: 0;
    color: var(--fis-dark);
    font-size: .92rem;
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 991.98px) {
    .main-nav .nav-item.active > .nav-link::before { display: none; }
    /* Orange Akzentlinie oben – ersetzt die mobil ausgeblendete Info-Leiste */
    .site-header { border-top: 3px solid var(--fis-orange); }
    .hero { padding: 3rem 0; min-height: 380px; }
    .navbar-collapse {
        margin-top: .75rem;
        border-top: 1px solid #eef0f2;
        padding-top: .5rem;
    }
    /* Einspaltig steht das Inhaltsverzeichnis über dem Text – mitscrollen
       würde es dort nur im Weg sein. */
    .legal-toc { position: static; }
}