/*
|--------------------------------------------------------------------------
| 2026-11-02
| Author: Claude
| Neuanlage (Startseite R12), Entscheidung Klaus 2026-11-02.
|
| VisionThinks UI / Layout / Bänder (Variante C)
|
| Bänder über die volle Breite, Inhalt auf der Achse (01-foundation/
| vt-axis.css) in einem zentrierten Rahmen mit max. 1320px.
| Werte = Startseite R6–R9 (pixelgleich herausgelöst); gelten für alle
| Präsentationsseiten.
|
|   <section class="vt-band vt-band--hell">
|       <div class="vt-band__inner">
|           <h2 class="vt-band__title">…</h2>
|
| Varianten: --hell, --getoent, --blau, --dunkel, --abschluss
| Teile:     __inner, __dachzeile, __title, __title--hell (auf dunkel/blau),
|            __title--mit-intro, __intro, __more
| 2026-11-02 Über uns R4: __dachzeile ergänzt.
| Abschluss: .vt-abschluss (+ __copy, __text, __mehr) im __inner
|
| Spezifität: :root als Vorsatz ergibt (0,2,0) wie vorher
| (.vt-start-seite .vt-start-band…), damit Kit-Regeln für h2/p (0,1,1)
| nicht greifen. Reihenfolge der Regeln ist Teil des Ergebnisses
| (z. B. __title--hell nach der Mobil-Regel von __title).
|--------------------------------------------------------------------------
*/


/* --------------------------------------------------------------
   Grundband
-------------------------------------------------------------- */

:root .vt-band {
    width: 100%;
    box-sizing: border-box;
    padding: 88px 0;
}

:root .vt-band--hell {
    background-color: #ffffff;
    color: #34445e;
}

:root .vt-band__inner {
    box-sizing: border-box;
    max-width: 1320px;
    margin: 0 auto;
    padding-left: var(--vt-achse-l);
    padding-right: var(--vt-achse-r);
}

:root .vt-band__title {
    margin: 0 0 32px;
    color: #0b1730;
    font-size: 34px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: normal;
    text-transform: none;
}

@media (max-width: 767px) {
    :root .vt-band { padding: 56px 0; }
    :root .vt-band__title { font-size: 28px; margin-bottom: 24px; }
}


/* --------------------------------------------------------------
   Überschrift auf dunklen Flächen; blaues Band
-------------------------------------------------------------- */

:root .vt-band__title--hell {
    margin: 0;
    color: #ffffff;
}

:root .vt-band--blau {
    padding: 64px 0;
    background-color: #1658a8;
    color: #ffffff;
}

:root .vt-band--blau .vt-band__title--hell {
    font-size: 30px;
    line-height: 1.25;
}

@media (max-width: 767px) {
    :root .vt-band--blau { padding: 48px 0; }
    :root .vt-band--blau .vt-band__title--hell { font-size: 26px; }
}


/* --------------------------------------------------------------
   Dachzeile über der Band-Überschrift (Über uns R4, 2026-11-02)
   Leitfaden: 13px, Großbuchstaben, Sperrung .14em.
   Kontrast: #1658a8 auf Weiß 7,0:1, auf #eef3f9 6,3:1;
   #dcecff auf Blau 5,8:1; #9fd0ff auf Dunkel 9–11:1.
-------------------------------------------------------------- */

:root .vt-band__dachzeile {
    margin: 0 0 12px;
    color: #1658a8;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .14em;
    text-transform: uppercase;
}

:root .vt-band--blau .vt-band__dachzeile { color: #dcecff; }

:root .vt-band--dunkel .vt-band__dachzeile,
:root .vt-band--abschluss .vt-band__dachzeile { color: #9fd0ff; }


/* --------------------------------------------------------------
   Getöntes Band, Einleitung, Textlink-Zeile
-------------------------------------------------------------- */

:root .vt-band--getoent {
    background-color: #eef3f9;
    color: #34445e;
}

:root .vt-band__title--mit-intro {
    margin-bottom: 14px;
}

:root .vt-band__intro {
    margin: 0 0 44px;
    max-width: 640px;
    color: #34445e;
    font-size: 18px;
    line-height: 1.6;
}

:root .vt-band__more {
    margin: 40px 0 0;
}

@media (max-width: 767px) {
    :root .vt-band__intro { margin-bottom: 32px; font-size: 17px; }
}


/* --------------------------------------------------------------
   Dunkles Band
-------------------------------------------------------------- */

:root .vt-band--dunkel {
    padding: 64px 0;
    background-color: #0b1730;
    color: #ffffff;
}

@media (max-width: 767px) {
    :root .vt-band--dunkel { padding: 48px 0; }
}


/* --------------------------------------------------------------
   Abschluss (dunkel): Text links, Button rechts bzw. darunter
-------------------------------------------------------------- */

:root .vt-band--abschluss {
    background-color: #12264a;
    color: #ffffff;
}

:root .vt-abschluss {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px 64px;
}

:root .vt-abschluss__copy {
    flex: 1 1 560px;
    min-width: 0;
}

:root .vt-abschluss__text {
    margin: 16px 0 0;
    max-width: 640px;
    color: rgba(255, 255, 255, .9);
    font-size: 18px;
    line-height: 1.6;
}

:root .vt-abschluss__mehr {
    margin: 16px 0 0;
    color: rgba(255, 255, 255, .8);
    font-size: 16px;
}

@media (max-width: 767px) {
    :root .vt-abschluss__text { font-size: 17px; }
}