/*
|--------------------------------------------------------------------------
| 2026-11-02
| Author: Claude
| Änderung (Startseite R12): gemeinsame Basis ausgelagert, Werte
| unverändert (pixelgleich):
|   - Achse --vt-start-achse-* → 01-foundation/vt-axis.css (--vt-achse-*)
|   - .vt-start-band* → 02-layout/vt-band.css (.vt-band*)
|   - .vt-start-abschluss* → .vt-abschluss* (vt-band.css)
|   - .vt-start-textlink* → 03-components/vt-textlink.css (.vt-textlink*)
| Hier bleibt nur, was zur Startseite gehört (Kopf, Schwerpunkte,
| PHP-Band-Aufteilung, Projekte, Fakten, Stimmen).
|--------------------------------------------------------------------------
*/

/*
|--------------------------------------------------------------------------
| 2026-10-25
| Author: Claude
| Änderung (Startseite R9): Faktenband, Kundenstimmen, Abschluss.
| Zahl #9fd0ff auf #0b1730, Text Weiß; Abschluss #12264a.
|--------------------------------------------------------------------------
*/

/*
|--------------------------------------------------------------------------
| 2026-10-25
| Author: Claude
| Änderung (Startseite R8): getöntes Band Referenzen (.vt-start-refs),
| Textlink .vt-start-textlink. Bildradius --vt-radius-media (14px).
|--------------------------------------------------------------------------
*/

/*
|--------------------------------------------------------------------------
| 2026-10-25
| Author: Claude
| Änderung (Startseite R7): blaues Band PHP-Check (.vt-start-band--blau,
| .vt-start-php). Fläche #1658a8, Weiß 7,0:1.
|--------------------------------------------------------------------------
*/

/*
|--------------------------------------------------------------------------
| 2026-10-25
| Author: Claude
| Änderung (Startseite R6b): Schwerpunkte als ganze Links, Hover nur mit
| Maus (hover: hover), Pointer über der ganzen Spalte.
|--------------------------------------------------------------------------
*/

/*
|--------------------------------------------------------------------------
| 2026-10-25
| Author: Claude
| Änderung (Startseite R6): Bänder über die volle Breite und Schwerpunkte.
|   - .vt-start-seite ist jetzt der volle Rahmen (Elementor-Container auf
|     volle Breite, Innenabstand 0); Bänder .vt-start-band mit innerer
|     Achse .vt-start-band__inner (max. 1320px).
|   - Achse vorläufig hier (nur Startseite), Werte aus der Messung der
|     sichtbaren H1-Kante 2026-10-25; wandert ab der 2./3. Seite nach
|     01-foundation/vt-axis.css (Entscheidung Klaus).
|   - Spezifität (0,2,0) und höher, damit Kit-Regeln für h2/h3/a
|     (0,1,1) nicht greifen.
|--------------------------------------------------------------------------
*/

/*
|--------------------------------------------------------------------------
| 2026-10-25
| Author: Claude
| Änderung (Startseite R5c): Umbruch in der H1 nur ab 1025px
| (<br class="vt-br-gross"> im Elementor-Titel, Entscheidung Klaus).
|--------------------------------------------------------------------------
*/

/*
|--------------------------------------------------------------------------
| 2026-10-25
| Author: Claude
| Änderung (Startseite R5b), nach Messung bei 320/480 px:
|   1. Kopf wächst mit dem Inhalt: Elementor setzt .e-con-inner auf die
|      Höhe des Kopfes (530px); Inhalt mit 150px Innenabstand oben ragte
|      bei 320px 45px heraus.
|   2. Breadcrumb im Kopf ausgeblendet (Entscheidung Klaus); der Strich
|      (vt-header-divider) bleibt.
|   3. −80px aus 05-content.css (≤1024px) gilt auf der Startseite nicht;
|      der Inhalt überdeckte sonst den Kopf.
|   4. Dachzeile: Klasse vt-header-dachzeile (zusätzlich zu
|      vt-header-subtitle, damit die Achsenregeln des Small-Headers
|      weiter greifen), kleiner und enger.
|   5. Buttons im Kopf: 441–480px dieselbe Verschiebung −35px wie H1 und
|      Untertitel; ≤480px untereinander, gleich breit, höchstens 300px.
|--------------------------------------------------------------------------
*/

/*
|--------------------------------------------------------------------------
| 2026-10-25
| Author: Claude
| Änderung (Startseite R5): Buttons im Kopf (.vt-start-kopf-actions).
|--------------------------------------------------------------------------
*/

/*
|--------------------------------------------------------------------------
| 2026-10-24
| Author: Claude
| Neufassung (Startseite R2).
|
| VisionThinks – Startseite ([vt-start-seite]), nur Seiteneigenes.
|
| Ersetzt die 1:1-Kopie von contao/vt-start-contao.css, die bis hierhin
| unter diesem Dateinamen lag (Original unverändert unter contao/).
|
| Die gemeinsame Basis (Container, Blöcke, Karten, Typografie, Buttons,
| Bühne, Divider) steht in 05-content/05-content.css (vt-05cont-*).
| Hier nur: Referenzen-Raster, Kundenstimmen, Kartenbutton, Hinweis zum
| Bildradius-Vergleich.
|--------------------------------------------------------------------------
*/


/* --------------------------------------------------------------
   Kopf: Buttons unter dem Untertitel ([vt-start-kopf])
   Zweitbutton mit leicht abgedunkelter Fläche, damit er auf dem
   Foto lesbar bleibt (lädt nach vt-buttons.css, gleiche Spezifität).
-------------------------------------------------------------- */

.vt-start-kopf-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 24px;
}

.vt-start-kopf-actions .vt-btn--secondary {
    background-color: rgba(10, 20, 45, .55);
    backdrop-filter: blur(6px);
}

@media (max-width: 480px) {
    .vt-start-kopf-actions {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .vt-start-kopf-actions .vt-btn.vt-btn {
        width: 100%;
        max-width: 300px;
    }
}

/* Gleiche Achse wie H1/Untertitel (vt-small-header.css, 441–480px) */
@media (min-width: 441px) and (max-width: 480px) {
    .vt-small-header .vt-start-kopf-actions {
        transform: translateX(-35px);
    }
}


/* --------------------------------------------------------------
   Kopf der Startseite (R5b)
-------------------------------------------------------------- */

/* Kopf wächst mit: innerer Container nicht mehr auf Kopfhöhe begrenzt */
.vt-page-start-seite .vt-header-image > .e-con-inner {
    height: auto;
    flex: 1 0 auto;
}

/* Breadcrumb aus, Strich bleibt */
.vt-page-start-seite .vt-header-bottom-bread {
    display: none;
}

/* Kein Hochziehen des Inhalts unter dem Kopf (R6: Rest-Container) */
.vt-start-seite .vt-05cont {
    margin-top: 0;
}

/* Dachzeile „Aachen · Köln · Düren · Benelux“ (nur Startseite) */
/* Spezifität (0,3,1) bzw. (0,3,0): über den Elementor-Elementregeln */
.vt-page-start-seite .vt-header-top .vt-header-dachzeile p {
    margin: 0;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: .04em;
}

.vt-page-start-seite .vt-header-top > .vt-header-dachzeile {
    margin-bottom: -8px;
}


/* --------------------------------------------------------------
   Schwerpunkt-Karten: Button unten, über die Kartenbreite
-------------------------------------------------------------- */

.vt-start-seite .vt-start-seite-karte__cta { margin-top:auto; }


/* --------------------------------------------------------------
   Referenzen: vier Bilder nebeneinander, Tablet zwei, Handy eins
-------------------------------------------------------------- */

.vt-start-seite-refs {
    display:grid;
    grid-template-columns:repeat(4, minmax(0,1fr));
    gap:18px;
    margin:10px 0 24px;
}

/* Screenshots: oben links ausrichten, damit Kopf und Textanfang sichtbar bleiben */
.vt-start-seite-refs img { object-position:left top; }

.vt-start-seite .vt-start-seite-vergleich {
    margin:24px 0 0;
    font-style:italic;
}

@media (max-width:1024px) {
    .vt-start-seite-refs { grid-template-columns:repeat(2, minmax(0,1fr)); }
}

@media (max-width:480px) {
    .vt-start-seite-refs { grid-template-columns:minmax(0,1fr); }
}


/* --------------------------------------------------------------
   Kundenstimmen
-------------------------------------------------------------- */

.vt-start-seite-stimmen {
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:clamp(20px,2.6vw,44px);
    margin-top:clamp(24px,3vw,40px);
}

.vt-start-seite-stimme { margin:0; }

.vt-start-seite .vt-start-seite-stimme blockquote {
    margin:0;
    padding:0 0 0 18px;
    border:0;
    border-left:3px solid rgb(34,138,232);
}

.vt-start-seite .vt-start-seite-stimme blockquote p {
    font-style:italic;
    color:rgba(255,255,255,.9);
}

.vt-start-seite-stimme figcaption {
    margin-top:12px;
    padding-left:21px;
    font-size:14px;
    color:rgba(255,255,255,.7);
}

@media (max-width:860px) {
    .vt-start-seite-stimmen { grid-template-columns:minmax(0,1fr); }
}


/* --------------------------------------------------------------
   R5c: Umbruch in der H1 nur ab 1025px
   Elementor-Titel: „Webseiten, Hosting und Pflege <br class="vt-br-gross">– persönlich.“
   Darunter bricht der Text von selbst um (2 statt 3 Zeilen bei 768–1024).
-------------------------------------------------------------- */

.vt-page-start-seite .vt-br-gross {
    display: none;
}

@media (min-width: 1025px) {
    .vt-page-start-seite .vt-br-gross {
        display: inline;
    }
}


/* --------------------------------------------------------------
   R6: Rahmen. R12: Achse → 01-foundation/vt-axis.css,
   Bänder → 02-layout/vt-band.css (.vt-band*)
-------------------------------------------------------------- */

.vt-start-seite {
    width: 100%;
}


/* --------------------------------------------------------------
   R6/R6b: Schwerpunkte – offene Spalten
   Leitlinie Hover-Karten (claude/gestaltung-inhaltsseiten.md):
   - die ganze Spalte ist ein Link (::after des Links über die Spalte),
     Mauszeiger überall Pointer, kein Text-Cursor;
   - Hover-Effekt nur auf Geräten mit Maus (hover: hover), unabhängig
     von der Breite; Touch: ab 768px dezenter Rahmen, darunter
     Trennlinien.
   Der Innenabstand der Spalte wird über einen negativen Rand des
   Rasters ausgeglichen: der Text steht auf der Achse.
-------------------------------------------------------------- */

.vt-start-seite .vt-start-schwerpunkte {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    margin: 0 -28px;
}

.vt-start-seite .vt-start-schwerpunkt {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-sizing: border-box;
    padding: 28px;
    border: 1px solid transparent;
    border-radius: var(--vt-radius-media, 14px);
    transition: border-color .2s ease, background-color .2s ease;
}

.vt-start-seite .vt-start-schwerpunkt--link {
    cursor: pointer;
}

.vt-start-seite .vt-start-schwerpunkt__dach {
    margin: 0;
    color: #1658a8;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .14em;
    line-height: 1.4;
    text-transform: uppercase;
}

.vt-start-seite .vt-start-schwerpunkt__title {
    margin: 0;
    color: #0b1730;
    font-size: 23px;
    font-weight: 700;
    line-height: 1.3;
    text-transform: none;
}

.vt-start-seite .vt-start-schwerpunkt__text {
    margin: 0;
    color: #34445e;
    font-size: 17px;
    line-height: 1.65;
}

.vt-start-seite .vt-start-schwerpunkt__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    margin-top: auto;
    padding-top: 8px;
    color: #1658a8;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
}

/* Link über die ganze Spalte ziehen */
.vt-start-seite .vt-start-schwerpunkt--link .vt-start-schwerpunkt__link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
}

.vt-start-seite .vt-start-schwerpunkt__link:focus,
.vt-start-seite .vt-start-schwerpunkt__link:focus-visible {
    outline: none;
    color: #0b1730;
}

/* Tastaturfokus an der ganzen Spalte */
.vt-start-seite .vt-start-schwerpunkt--link:has(.vt-start-schwerpunkt__link:focus-visible) {
    outline: 2px solid #1764c4;
    outline-offset: 2px;
}

/* Hover nur mit Maus */
@media (hover: hover) {
    .vt-start-seite .vt-start-schwerpunkt--link:hover {
        border-color: #1d8ff0;
        background-color: #f5f8fc;
    }

    .vt-start-seite .vt-start-schwerpunkt--link:hover .vt-start-schwerpunkt__link {
        color: #0b1730;
        text-decoration: underline;
        text-underline-offset: 3px;
    }
}

/* Touch ab 768px: dezenter Rahmen statt Hover */
@media (hover: none) and (min-width: 768px) {
    .vt-start-seite .vt-start-schwerpunkt { border-color: #d4e2f2; }
}

/* Schmal: untereinander */
@media (max-width: 767px) {
    .vt-start-seite .vt-start-schwerpunkte {
        grid-template-columns: 1fr;
        gap: 8px;
        margin: 0 -16px;
    }

    .vt-start-seite .vt-start-schwerpunkt {
        padding: 20px 16px;
    }
}

/* Schmal und Touch: Trennlinien statt Rahmen */
@media (hover: none) and (max-width: 767px) {
    .vt-start-seite .vt-start-schwerpunkte {
        gap: 0;
    }

    .vt-start-seite .vt-start-schwerpunkt {
        border: 0;
        border-top: 1px solid #d4e2f2;
        border-radius: 0;
    }

    .vt-start-seite .vt-start-schwerpunkt:first-child {
        border-top: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vt-start-seite .vt-start-schwerpunkt { transition: none; }
}


/* --------------------------------------------------------------
   R7: Blaues Band PHP-Check
-------------------------------------------------------------- */

.vt-start-seite .vt-start-php {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px 48px;
}

.vt-start-seite .vt-start-php__copy {
    flex: 1 1 560px;
    min-width: 0;
}

.vt-start-seite .vt-start-php__text {
    margin: 14px 0 0;
    max-width: 760px;
    color: rgba(255, 255, 255, .94);
    font-size: 18px;
    line-height: 1.6;
}

@media (max-width: 767px) {
    .vt-start-seite .vt-start-php__text { font-size: 17px; }
}


/* --------------------------------------------------------------
   R8: Getöntes Band Referenzen, 3 + 2
-------------------------------------------------------------- */

.vt-start-seite .vt-start-refs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px 32px;
}

.vt-start-seite .vt-start-ref {
    flex: 0 1 calc((100% - 64px) / 3);
    min-width: 260px;
    margin: 0;
}

/* Spezifität (0,2,1): über Elementors img-Regeln (Radius 0) */
.vt-start-seite .vt-start-ref img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: top center;
    border-radius: var(--vt-radius-media, 14px);
    box-shadow: 0 12px 30px rgba(11, 23, 48, .12);
}

.vt-start-seite .vt-start-ref figcaption {
    margin-top: 14px;
    color: #34445e;
    font-size: 16px;
    line-height: 1.5;
}

.vt-start-seite .vt-start-ref figcaption strong {
    color: #0b1730;
    font-weight: 700;
}

@media (max-width: 767px) {
    .vt-start-seite .vt-start-ref { flex-basis: 100%; min-width: 0; }
}


/* --------------------------------------------------------------
   R9: Faktenband (dunkel)
-------------------------------------------------------------- */

.vt-start-seite .vt-start-fakten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 36px 48px;
}

.vt-start-seite .vt-start-fakt__zahl {
    margin: 0;
    color: #9fd0ff;
    font-size: 60px;
    font-weight: 300;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.vt-start-seite .vt-start-fakt__text {
    margin: 14px 0 0;
    color: #ffffff;
    font-size: 22px;
    line-height: 1.45;
}

@media (min-width: 1025px) {
    .vt-start-seite .vt-start-fakten { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 767px) {
    .vt-start-seite .vt-start-fakt__zahl { font-size: 44px; }
    .vt-start-seite .vt-start-fakt__text { font-size: 18px; margin-top: 10px; }
}


/* --------------------------------------------------------------
   R9: Kundenstimmen (hell)
   Reset gegen Theme-Regeln für blockquote (Rand, Kursiv, Abstand).
-------------------------------------------------------------- */

.vt-start-seite .vt-start-stimmen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 40px 64px;
}

.vt-start-seite .vt-start-stimme {
    margin: 0;
}

.vt-start-seite .vt-start-stimme .vt-start-stimme__text {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: #1b2a41;
    font-size: 22px;
    font-style: normal;
    font-weight: 300;
    line-height: 1.6;
    quotes: none;
}

.vt-start-seite .vt-start-stimme .vt-start-stimme__text::before,
.vt-start-seite .vt-start-stimme .vt-start-stimme__text::after {
    content: none;
}

.vt-start-seite .vt-start-stimme__wer {
    margin-top: 18px;
    color: #1658a8;
    font-size: 15px;
    font-weight: 500;
}

@media (max-width: 767px) {
    .vt-start-seite .vt-start-stimmen { grid-template-columns: 1fr; gap: 32px; }
    .vt-start-seite .vt-start-stimme .vt-start-stimme__text { font-size: 19px; }
}


/* --------------------------------------------------------------
   R9: Abschluss (dunkel). R12: → 02-layout/vt-band.css
   (.vt-band--abschluss, .vt-abschluss*), Textlink hell →
   03-components/vt-textlink.css (.vt-textlink--hell)
-------------------------------------------------------------- */

/* R14 | 2026-11-11 | PHP-Band mit kompakter Angriffsgrafik (f2b-stats 1.9) */
.vt-start-seite .vt-start-php.vt-start-php--mit-grafik {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
    gap: 40px;
    align-items: center;
}
.vt-start-seite .vt-start-php__btn { margin-top: 24px; }
.vt-start-seite .vt-start-php__grafik {
    display: block;
    text-decoration: none;
    border-radius: 20px;
    outline-offset: 4px;
    transition: transform .2s ease;
}
.vt-start-seite .vt-start-php__grafik:hover { transform: translateY(-2px); }
.vt-start-seite .vt-start-php__grafik .f2b-root { margin: 0; }
.vt-start-seite .vt-start-php__grafik-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    color: #fff;
    font-weight: 600;
}
@media (max-width: 860px) {
    .vt-start-seite .vt-start-php.vt-start-php--mit-grafik { grid-template-columns: 1fr; gap: 28px; }
}

/* R14b | 2026-11-11 | Schmale Handys (≤ 320px): Grid-Spalten dürfen schrumpfen,
 * damit das Chart.js-Canvas mit fester Pixelbreite das Band nicht sprengt. */
.vt-start-seite .vt-start-php.vt-start-php--mit-grafik > .vt-start-php__copy,
.vt-start-seite .vt-start-php.vt-start-php--mit-grafik > .vt-start-php__grafik { min-width: 0; }
.vt-start-seite .vt-start-php__grafik .f2b-root,
.vt-start-seite .vt-start-php__grafik .f2b-canvas { max-width: 100%; min-width: 0; }
@media (max-width: 860px) {
    .vt-start-seite .vt-start-php.vt-start-php--mit-grafik { grid-template-columns: minmax(0, 1fr); }
}

/* R5 2026-11-11: Dachzeile im blauen PHP-Band */
.vt-start-php .vt-start-php__dach { margin: 0 0 10px; color: rgba(255,255,255,.85); }

/* R6 2026-11-11: Fakten heute/gesamt als Link */
.vt-start-seite .vt-start-fakt__link { display: block; color: inherit; text-decoration: none; border-radius: 12px; outline-offset: 6px; transition: transform .2s ease; }
.vt-start-seite .vt-start-fakt__link:hover { transform: translateY(-2px); }
.vt-start-seite .vt-start-fakt__link:focus-visible { outline: 2px solid #fff; }
.vt-start-seite .vt-start-fakt__pfeil { display: inline-flex; vertical-align: middle; margin-left: 4px; }
.vt-start-seite .vt-start-fakt__pfeil svg { width: .8em; height: .8em; }
.vt-start-seite .vt-start-fakt__link:hover .vt-start-fakt__text, .vt-start-seite .vt-start-fakt__link:focus-visible .vt-start-fakt__text { color: #fff; }

/* R6b 2026-11-11: Chevron bleibt am letzten Wort */
.vt-start-seite .vt-start-fakt__ende { white-space: nowrap; }