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

:root {
    --fis-orange:      #eb5c2c;
    --fis-orange-dark: #d34d20;
    --fis-orange-soft: #fdeee8;
    --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;
    --bs-link-color:     #eb5c2c;
    --bs-link-hover-color: #d34d20;
}

/* --- 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; }

/* --- 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;
    }
}

.text-orange { color: var(--fis-orange) !important; }
.bg-orange   { background-color: var(--fis-orange) !important; }
.bg-soft     { background-color: var(--fis-light) !important; }

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

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

/* Top-Bar (schmaler orangener Balken) */
.topbar {
    background: var(--fis-orange);
    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-dark); }

/* 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); }
.main-nav .nav-item.active > .nav-link { color: var(--fis-orange); }
.main-nav .nav-item.active > .nav-link::after {
    content: "";
    position: absolute;
    left: 1rem; right: 1rem; bottom: .1rem;
    height: 3px;
    border-radius: 3px;
    background: var(--fis-orange);
}

/* "NEU"-Badge */
.badge-neu {
    background: var(--fis-orange);
    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);
    color: var(--fis-orange-dark);
}

/* =========================================================================
   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;
}

/* 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 */
.hero--video::before {
    background: linear-gradient(135deg,
        rgba(228, 231, 235, .97) 0%,
        rgba(198, 203, 210, .88) 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;
}
.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;
    color: var(--fis-orange);
    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) */
.panel-accent {
    background: linear-gradient(135deg, var(--fis-orange), var(--fis-orange-dark));
    color: #fff;
    border-radius: 18px;
    padding: 2.5rem;
    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 */
.shop-embed {
    width: 100%;
    border: 0;
    display: block;
    min-height: 200px; /* kleiner Fallback, bis das Resize-Script die echte Höhe meldet */
}

/* 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; }

/* 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), var(--fis-orange-dark));
    color: #fff;
    border-radius: 22px;
    padding: 3rem;
}
.cta-band h2 { color: #fff; }
.cta-band .btn-light { color: var(--fis-orange-dark); font-weight: 700; }

/* =========================================================================
   FOOTER
   ========================================================================= */
.site-footer {
    background: var(--fis-darker);
    color: #c9ccd1;
    padding: 3.5rem 0 1.5rem;
}
.site-footer .footer-heading {
    color: var(--fis-orange);
    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;
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 991.98px) {
    .main-nav .nav-item.active > .nav-link::after { 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;
    }
}

/* =========================================================================
   STATUSSEITE
   ========================================================================= */
:root {
    --status-operational: #2e7d32;
    --status-problem:     #f59e0b;
    --status-outage:      #d32f2f;
    --status-maintenance: #1c64f2;
    --status-maintenance-planned: #6f42c1;
}

/* --- Gesamtstatus-Banner ------------------------------------------------ */
.status-banner {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    color: #fff;
    border-radius: 18px;
    padding: 1.5rem 1.75rem;
    background: var(--banner-color, var(--status-operational));
}
.status-banner .status-banner-icon { font-size: 2.1rem; line-height: 1; opacity: .95; }
.status-banner h2 { color: #fff; margin-bottom: .15rem; font-size: 1.35rem; }
.status-banner p { margin: 0; opacity: .92; }

/* --- Dienste-Grid --------------------------------------------------------- */
.service-status-card {
    display: flex;
    align-items: center;
    gap: .9rem;
    border: 1px solid #eef0f2;
    border-radius: 14px;
    padding: 1.1rem 1.25rem;
    background: #fff;
    height: 100%;
}
.status-dot {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    flex: 0 0 auto;
    background: var(--dot-color, var(--status-operational));
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--dot-color, var(--status-operational)) 18%, transparent);
}
.service-status-card .service-name { font-weight: 600; color: var(--fis-darker); margin-bottom: .1rem; }
.service-status-card .service-status-label { font-size: .82rem; color: var(--fis-gray); }

/* --- Kategorie-Filter-Chips ----------------------------------------------- */
.filter-chips { display: flex; flex-wrap: wrap; gap: .55rem; }
.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    color: var(--fis-dark);
    border-radius: 999px;
    padding: .4rem .9rem;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.filter-chip:hover { border-color: var(--fis-orange); color: var(--fis-orange); }
.filter-chip.is-active { background: var(--fis-orange); border-color: var(--fis-orange); color: #fff; }

/* --- Timeline -------------------------------------------------------------- */
.timeline { position: relative; padding-left: 2.25rem; }
.timeline::before {
    content: "";
    position: absolute;
    left: .65rem;
    top: .4rem;
    bottom: .4rem;
    width: 2px;
    background: #e5e7eb;
}
.timeline-date {
    font-weight: 700;
    text-transform: uppercase;
    font-size: .78rem;
    letter-spacing: .06em;
    color: var(--fis-gray);
    margin: 2rem 0 1rem;
}
.timeline-date:first-child { margin-top: 0; }
.timeline-item { position: relative; margin-bottom: 1.5rem; }
.timeline-item::before {
    content: "";
    position: absolute;
    left: -1.9rem;
    top: 1.4rem;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--marker-color, var(--fis-gray));
    box-shadow: 0 0 0 3px #fff, 0 0 0 4px #e5e7eb;
}

/* --- Incident-Karte --------------------------------------------------------- */
.incident-card {
    border: 1px solid #eef0f2;
    border-radius: 16px;
    padding: 1.4rem 1.6rem;
    background: #fff;
}
.incident-card.is-pinned {
    border-color: var(--fis-orange);
    box-shadow: 0 10px 28px rgba(235, 92, 44, .12);
}
.incident-card.is-resolved { border-left: 4px solid #2e7d32; }
.status-resolved-badge {
    display: inline-flex;
    align-items: center;
    padding: .3rem .75rem;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 700;
    color: #fff;
    background: #2e7d32;
}
.incident-pin-flag {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--fis-orange);
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: .6rem;
}
.type-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .75rem;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 700;
    color: #fff;
    background: var(--badge-color, var(--fis-gray));
}
.category-badge {
    display: inline-flex;
    padding: .25rem .65rem;
    border-radius: 999px;
    background: var(--fis-light);
    color: var(--fis-dark);
    font-size: .74rem;
    font-weight: 600;
    border: 1px solid #e5e7eb;
}
.incident-schedule { font-size: .85rem; color: var(--fis-gray); margin-top: .5rem; }

/* --- Ursprungsmeldung -------------------------------------------------------- */
.incident-original-message { margin-top: .9rem; }
.incident-original-message .update-message { font-size: 1rem; }

/* --- Update-Verlauf (Statusupdates, optisch von der Ursprungsmeldung abgesetzt) */
.update-list-heading {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--fis-gray);
    margin: 1.2rem 0 .6rem;
}
.update-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .6rem;
}
.update-item {
    padding: .7rem .9rem;
    background: var(--fis-light);
    border-left: 3px solid #e5e7eb;
    border-radius: 0 .5rem .5rem 0;
}
.update-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    font-size: .76rem;
    color: var(--fis-gray);
    margin-bottom: .25rem;
}
.update-status-label { font-weight: 700; color: var(--fis-darker); }
.update-message { margin: 0; color: var(--fis-dark); font-size: .92rem; }
.update-message p:last-child { margin-bottom: 0; }
.update-edit { margin-top: .5rem; }
.update-edit > summary {
    cursor: pointer;
    font-size: .8rem;
    font-weight: 600;
    color: var(--fis-orange);
    list-style: none;
}
.update-edit > summary::-webkit-details-marker { display: none; }
.update-edit > summary::before { content: "\f044"; font-family: "Font Awesome 6 Free"; font-weight: 900; margin-right: .4rem; }

/* --- WYSIWYG-Editor (lokal, ohne externes Framework) ------------------------- */
.wysiwyg {
    border: 1px solid #ced4da;
    border-radius: .5rem;
    overflow: hidden;
}
.wysiwyg-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: .2rem;
    padding: .4rem;
    background: var(--fis-light);
    border-bottom: 1px solid #e5e7eb;
}
.wysiwyg-btn {
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: .35rem;
    background: transparent;
    color: var(--fis-dark);
    cursor: pointer;
}
.wysiwyg-btn:hover { background: #fff; border-color: #e5e7eb; }
.wysiwyg-editor {
    min-height: 140px;
    max-height: 420px;
    overflow-y: auto;
    padding: .75rem .9rem;
    background: #fff;
    color: var(--fis-dark);
}
.wysiwyg-editor:focus { outline: none; }
.wysiwyg-editor p { margin: 0 0 .75rem; }
.wysiwyg-editor p:last-child { margin-bottom: 0; }
.wysiwyg-editor ul, .wysiwyg-editor ol { margin: 0 0 .75rem; padding-left: 1.4rem; }
.wysiwyg-editor a { color: var(--fis-orange); }

/* --- Admin: Dashboard-Tabelle ------------------------------------------------ */
.admin-table td, .admin-table th { vertical-align: middle; }
.pin-toggle { border: 0; background: none; color: #cfd3d8; font-size: 1.1rem; padding: 0; cursor: pointer; }
.pin-toggle.is-pinned { color: var(--fis-orange); }