/*************************************************************************************
 * BBL-Software – Moderne Webseite (Variante 3, hell)
 * Seiten-spezifisch: Hero-Slider + Bilderkarussell
 *************************************************************************************/
 
 .material-symbols-outlined { font-variation-settings:'FILL' 0,'wght' 500,'GRAD' 0,'opsz' 24; font-size:20px; line-height:1; vertical-align:middle; user-select:none; }


/*************************************************************************************
 * Hero
 *************************************************************************************/
.hero {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: 40px 0 10px;
    /*background:
        radial-gradient(60% 80% at 50% -10%, rgba(0, 176, 240, .16), transparent 60%),
        radial-gradient(50% 60% at 88% 16%, rgba(108, 93, 193, .12), transparent 60%),
        var(--surface);*/
}
.hero__badge {
    display: inline-flex; align-items: center; gap: 8px;
    border: 1px solid #cfe9f8; background: #eaf7fe; color: var(--cyan-dark);
    font-size: 13px; font-weight: 700; padding: 6px 14px; border-radius: var(--radius-pill);
    margin-bottom: 26px;
}
.hero__badge svg { width: 15px; height: 15px; }

/* Slogan-Slider (selbst gerendert) */
/* Aktiver Slide steht im Fluss (position:relative) und gibt die Hoehe vor -
   so passt sich der Hero an ein Bild an, statt es an fixen 170px abzuschneiden.
   Inaktive Slides liegen absolut darueber und sind ausgeblendet. */
.hero__slides { position: relative; min-height: 170px; margin: 0 auto 8px; }
.hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; pointer-events: none; }
.hero__slide.is-active { position: relative; inset: auto; opacity: 1; pointer-events: auto; }
.hero__sub { color: var(--cyan-dark); font-size: 18px; font-weight: 700; margin-bottom: 8px; min-height: 27px; }

/* Bild unter .hero__sub (kommt als Anhang ueber [L-...] + [BBL:BILD]) */
.hero__bild {
    max-width: 1250px;
    width: 100%;
    height: auto;
    margin: 16px auto 0;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}
.hero__title { font-size: 50px; line-height: 1.1; font-weight: 800; letter-spacing: -1px; }
.hero__title .grad { background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }


.hero__dots { display: flex; gap: 10px; justify-content: center; margin-bottom: 26px; }
.hero__dot { width: 9px; height: 9px; border-radius: 50%; border: 1px solid #9ab2c6; background: transparent; cursor: pointer; padding: 0; transition: background .2s, border-color .2s; }
.hero__dot.is-active { background: var(--blue); border-color: var(--blue); }

.hero__lead { color: var(--muted); font-size: 18px; /*max-width: 520px;*/ margin: 0 auto 34px; }
.hero__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 56px; }

/* Dekoratives "App-Fenster" */
.hero__panel {
    /*max-width: 680px;*/ margin: 0 auto; text-align: left;
    background: #fff; border: 1px solid #e2e9f1; border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg); overflow: hidden;
}
.hero__panel-bar { display: flex; align-items: center; gap: 6px; padding: 11px 15px; border-bottom: 1px solid var(--line); background: #f9fbfd; }
.hero__panel-bar .dot { width: 9px; height: 9px; border-radius: 50%; background: #d4dce6; }
.hero__panel-bar .title { margin-left: 8px; color: var(--hint); font-size: 12px; }
.hero__panel-body { display: flex; }
.hero__panel-side { width: 160px; background: #f5f8fb; padding: 16px 14px; border-right: 1px solid var(--line); }
.hero__panel-navit { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 7px; margin-bottom: 3px; font-size: 13px; color: #6c7a8c; }
.hero__panel-navit svg { width: 16px; height: 16px; }
.hero__panel-navit.is-on { background: #e9f6fe; color: var(--cyan-dark); font-weight: 700; }
.hero__panel-main { flex: 1; padding: 18px; }
.hero__panel-stats { display: flex; gap: 10px; margin-bottom: 14px; }
.hero__stat { flex: 1; border-radius: 10px; padding: 12px; }
.hero__stat--a { background: #f3fbff; border: 1px solid #cfeafa; }
.hero__stat--b { background: #f4f3fc; border: 1px solid #ddd8f3; }
.hero__stat .lbl { color: var(--hint); font-size: 11px; }
.hero__stat .val { font-size: 22px; font-weight: 800; color: var(--ink); }
.hero__stat--b .val { color: var(--blue); }
.hero__bar { display: flex; align-items: center; gap: 9px; padding: 9px 0; border-bottom: 1px solid #f1f5f9; font-size: 13px; color: #46566a; }
.hero__bar:last-child { border-bottom: none; }
.hero__bar svg { width: 16px; height: 16px; color: var(--blue); }
.hero__pill { margin-left: auto; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: var(--radius-pill); }
.hero__pill--ok { background: #e7f8ee; color: #15a13d; }
.hero__pill--wait { background: #fff3df; color: #9a7400; }

@media (max-width: 760px) {
    .hero__title { font-size: 34px; }
    .hero__slides { min-height: 200px; }
    .hero__bild { max-width: 100%; }
    .hero__panel-side { display: none; }
}

/*************************************************************************************
 * Bilderkarussell (Referenzen / Screenshots) – selbst gerendert
 *************************************************************************************/
.karussell { position: relative; max-width: 1420px; margin: 0 auto; }
.karussell__viewport { position: relative; border-radius: var(--radius-lg); }
.karussell__slide {
    position: absolute; inset: 0; opacity: 0; transition: opacity .4s ease;
    pointer-events: none; 
}
.karussell__slide.is-active { position: relative; opacity: 1; pointer-events: auto; }
.karussell__bild {
    border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg);
    border: 1px solid #e2e9f1; background: #fff;
}
/* gestaltete Platzhalter-Flaeche statt echtem Screenshot */
.karussell__platzhalter {
    aspect-ratio: 16 / 9;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    color: var(--hint); font-weight: 700;
    background:
        linear-gradient(135deg, rgba(0,176,240,.06), rgba(108,93,193,.06)),
        repeating-linear-gradient(45deg, #f3f6fa 0 16px, #eef2f7 16px 32px);
}
.karussell__platzhalter svg { width: 26px; height: 26px; }
.karussell__caption { text-align: center; margin-top: 22px; color: var(--muted); }
.karussell__caption strong { color: var(--ink); }

.karussell__btn {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 52px; height: 52px; border-radius: 50%;
    background: #fff; border: 2px solid var(--cyan); color: var(--cyan-dark);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; box-shadow: var(--shadow-md); z-index: 3;
    transition: transform .2s ease;
}
.karussell__btn svg { width: 22px; height: 22px; }
.karussell__btn--prev { left: -20px; }
.karussell__btn--next { right: -20px; }
.karussell__btn--prev:hover { transform: translateY(-50%) translateX(-3px); }
.karussell__btn--next:hover { transform: translateY(-50%) translateX(3px); }

.karussell__dots { display: none;/* flex;*/ gap: 10px; justify-content: center; margin-top: 28px; }
.karussell__dot { width: 8px; height: 8px; border-radius: 50%; border: 1px solid #9ab2c6; background: transparent; cursor: pointer; padding: 0; transition: background .2s, border-color .2s; }
.karussell__dot.is-active { background: var(--blue); border-color: var(--blue); }

@media (max-width: 980px) {
    .karussell__btn--prev { left: 6px; }
    .karussell__btn--next { right: 6px; }
}

/* Material-Icon-Groessen fuer Hero & Karussell */
.hero__badge .material-symbols-outlined { font-size: 16px; }
.hero__panel-navit .material-symbols-outlined { font-size: 18px; }
.hero__bar .material-symbols-outlined { font-size: 18px; color: var(--blue); }
.karussell__btn .material-symbols-outlined { font-size: 24px; }
.karussell__platzhalter .material-symbols-outlined { font-size: 30px; }


.button_fliegen {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 800;
    font-size: 14px;
    padding: 9px 18px;
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-sm);
    transition: transform .15s ease, box-shadow .2s ease;
    background: #fff;
    cursor: pointer;
    color: var(--gradient);
}

.button_fliegen:hover {
    background: var(--gradient);
    color: #fff;
}



.fliegender_hollaender .button_fliegen {
    display: block;
    margin-bottom: 50px;
    text-align: center;
    border: 1px solid;
}


.fliegender_hollaender {
    position: fixed;
    top: 40%;
    right: 10px;
    z-index: 1000;
}
/*************************************************************************************
/* Kontaktdaten Floater / Kontaktbox
/*************************************************************************************/
#kontaktdaten_floater {
    position: fixed;
    top: 150px;
    right: 150px;
    z-index: 2000;
    max-width: 390px;
    padding: 10px 25px 5px 25px;
    border-radius: 2px;
    transform: translate3d(calc(100% + 150px), 0, 0);
    background-color: #FFF;
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.22);
    text-align: center;
    border-radius: 15px;
    border: 2px solid var(--cyan);
    /*opacity: 0.4;*/
    /*border-left: 15px solid var(--cyan);
    border-right: 15px solid var(--cyan);*/
}

#kontaktdaten_floater:hover{
    opacity: 1;
}

#kontaktdaten_floater.transition-enabled {
  transition: transform .6s ease-in-out;
}
#kontaktdaten_floater.visible {
  transform: translate3d(0, 0, 0);
}

#kontaktdaten_floater h3 {
  border: none;
}
.kontaktdaten_floater_icon {
    vertical-align: bottom;
    width: 1.2em;
}
#kontaktdaten_floater_closer {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 14px;
    filter: grayscale(100%);
    opacity: 0.3;
    cursor: pointer;
}
#kontaktdaten_floater_closer:hover {
    filter: unset;
    opacity: 1;
}
/*************************************************************************************
/* ENDE Kontaktdaten Floater / Kontaktbox
/*************************************************************************************/

/*************************************************************************************
 * Mobile Anpassungen (Karussell / Fliegender Hollaender / Kontakt-Floater)
 *************************************************************************************/
@media (max-width: 860px) {
    /* Karussell-Bilder sollen 95 % der Bildschirmbreite nutzen: aus der
       Container-Polsterung ausbrechen und mittig auf den Viewport zentrieren.
       Der Container ist links/rechts symmetrisch gepolstert, daher liegt
       margin-left:50% + translateX(-50%) exakt auf der Viewport-Mitte. */
    .karussell {
        width: 95vw;
        max-width: 95vw;
        margin-left: 50%;
        transform: translateX(-50%);
    }
    .karussell__slide { padding: 0; }

    /* Die drei "fliegender Hollaender"-Buttons wandern ins Hamburgermenue
       (siehe styles.css) und werden hier als fixe Box ausgeblendet. */
    .fliegender_hollaender { display: none; }

    /* Kontakt-Floater beim Einblenden mittig stehen lassen statt an den
       linken Rand zu fahren: rechte Kante auf Viewport-Mitte, dann per
       translateX(50%) um die halbe Breite nach rechts -> zentriert. */
    #kontaktdaten_floater {
        right: 50%;
        left: auto;
        max-width: 90vw;
        transform: translate3d(calc(100% + 50vw), 0, 0);
    }
    #kontaktdaten_floater.visible {
        transform: translate3d(50%, 0, 0);
    }
}


/*************************************************************************************
 * FAQ / Häufige Fragen  (Akkordeon)
 * Basis: natives <details>/<summary> – klappt auch ohne JS auf/zu und ist
 * tastatur-/screenreader-tauglich. js/main.js ergänzt Akkordeon-Modus
 * (immer nur eine Antwort offen), Deep-Link und den Live-Filter.
 *************************************************************************************/
.faqs { max-width: 1200px; margin-inline: auto; }

/* Suchfeld / Filter über der Liste */
.faqs__filter {
    position: relative;
    margin-bottom: 28px;
}
.faqs__filter input {
    width: 100%;
    box-sizing: border-box;
    padding: 14px 18px 14px 46px;
    font: inherit;
    color: var(--text);
    background: #fff;
    border: 1px solid #cdd7e3;
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-sm);
    transition: border-color .2s, box-shadow .2s;
}
.faqs__filter input:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(0,176,240,.18); }
.faqs__filter::before {
    content: 'search';
    font-family: 'Material Symbols Outlined';
    position: absolute;
    left: 16px; top: 50%; transform: translateY(-50%);
    color: var(--hint);
    pointer-events: none;
}

section.section.faqs{
    padding: 48px 0;
}

/* Einzelne Frage-Karte */
.faq {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    margin-bottom: 14px;
    overflow: hidden;
    transition: border-color .2s, box-shadow .2s;
}
.faq:hover { border-color: #cfe9f8; }
.faq[open] { border-color: var(--cyan); box-shadow: var(--shadow-md); }

/* Frage (immer sichtbar, klickbar) */
.faq__frage {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 22px;
    font-weight: 700;
    font-size: 17px;
    color: var(--ink);
    cursor: pointer;
    list-style: none;               /* Standard-Dreieck entfernen */
    user-select: none;
    scroll-margin-top: 90px;        /* Platz für Deep-Link-Sprung */
}
.faq__frage::-webkit-details-marker { display: none; }   /* Safari/Chrome-Marker weg */
.faq__frage:hover { color: var(--cyan-dark); }

/* Frage kommt aus dem CMS als <h3 class="faq__frage"> und wird per JS in ein
   <summary> umgebaut. Bis dahin (bzw. falls JS aus ist) als schlichte
   Ueberschrift zeigen: Heading-Margin weg, kein Chevron, kein Pointer. */
h3.faq__frage { margin: 0; }
.faq__frage:not(summary) { cursor: default; }
.faq__frage:not(summary)::after { content: none; }

/* Chevron rechts – dreht sich beim Öffnen */
.faq__frage::after {
    content: 'expand_more';
    font-family: 'Material Symbols Outlined';
    font-size: 26px;
    color: var(--cyan-dark);
    flex: none;
    transition: transform .25s ease;
}
.faq[open] > .faq__frage::after { transform: rotate(180deg); }

/* Antwort */
.faq__antwort {
    padding: 0 22px 22px;
    color: var(--muted);
    line-height: 1.6;
}
.faq__antwort > :first-child { margin-top: 0; }
.faq__antwort > :last-child { margin-bottom: 0; }
.faq__antwort a { color: var(--blue); }

/* Sanftes Aufklappen, wo der Browser es kann (Chrome/Edge ≥ 2024).
   Ältere Browser klappen ohne Animation auf – Funktion bleibt gleich. */
@supports (interpolate-size: allow-keywords) {
    .faqs { interpolate-size: allow-keywords; }
    .faq::details-content {
        height: 0;
        overflow: clip;
        transition: height .28s ease, content-visibility .28s allow-discrete;
    }
    .faq[open]::details-content { height: auto; }
}

/* Vom Filter ausgeblendete Fragen */
.faq[hidden] { display: none; }

/* „Keine Treffer“-Hinweis beim Filtern */
.faqs__leer {
    text-align: center;
    color: var(--muted);
    padding: 24px 0;
}

@media (max-width: 640px) {
    .faq__frage { font-size: 16px; padding: 16px 18px; }
    .faq__antwort { padding: 0 18px 18px; }
}
/*************************************************************************************
/* ENDE FAQ / Häufige Fragen
/*************************************************************************************/