/*************************************************************************************
 * 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: 72px 0 0;
    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: 320px;
    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: 240px; }
    .hero__panel-side { display: none; }
}

/*************************************************************************************
 * Bilderkarussell (Referenzen / Screenshots) – selbst gerendert
 *************************************************************************************/
.karussell { position: relative; /*max-width: 900px;*/ 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: 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; }