/*
|--------------------------------------------------------------------------
| 2026-10-24
| Author: Claude
| Neuanlage (Startseite R1).
|
| VisionThinks – gemeinsame Basis der Inhaltsseiten (Schicht 05-content).
| Klassen-Präfix: vt-05cont-
|
| Genutzt von:
|   - Startseite neu  [vt-start-seite]  (start-seite/vt-start-seite.css)
| Später umzustellen (je eigene Runde mit Browsertest):
|   Contao [vt-start-contao], Contao-Upgrade [vt-contao-upgrade],
|   Arztpraxen [vt-contao-arztdemo], Preisseite [vt-hosting-preise],
|   Referenzen [vt-referenzen]
|
| Regel: Was mehrere Seiten brauchen, steht hier. Was es nur auf einer
| Seite gibt, steht im Seiten-CSS.
|
| Voraussetzung: 01-foundation/vt-radius.css (Variablen --vt-radius-*).
| Jede Regel hat einen Ersatzwert, falls die Variable fehlt.
|
| Herkunft der Werte: vt-start-contao.css (Typografie, Abstände,
| Breakpoints, Badges, Liste, Button, Bühne, Divider) und
| vt-hosting-preise.css R5/R6 (innere Karte, background-clip,
| Bühnenränder). Breakpoints: 1400 / 1025 / 861 / 860 / 480.
|
| Wird nicht seitenweit geladen, sondern von der Asset-Datei der Seite.
| Body-Klassen, die die Asset-Datei setzt:
|   vt-small-header vt-05cont-page vt-05cont-stage-links-heller
|--------------------------------------------------------------------------
*/

/*
|--------------------------------------------------------------------------
| 2026-10-24
| Author: Claude
| Änderung (Startseite R2, nach lokalem Test des Gerüsts):
|
| 1. .vt-05cont-badge: align-self:flex-start. In Karten (Flex-Spalte)
|    wurde der Badge sonst über die volle Breite gezogen.
| 2. .vt-05cont-media: Radius sitzt jetzt am Bild, nicht an der figure.
|    Vorher schnitt overflow:hidden + Radius die Bildunterschrift an
|    (bei 22px sichtbar).
| Alte Regeln stehen als Kommentar bei der Änderung.
|--------------------------------------------------------------------------
*/


/* --------------------------------------------------------------
   Box-Modell, auf den Inhalt begrenzt
-------------------------------------------------------------- */

.vt-05cont,
.vt-05cont *,
.vt-05cont *::before,
.vt-05cont *::after {
    box-sizing:border-box;
}


/* --------------------------------------------------------------
   Bühne „links heller“ und Divider-Geometrie
   Herkunft: vt-start-contao.css
-------------------------------------------------------------- */

body.vt-05cont-stage-links-heller .webhosting-back {
    background:
        radial-gradient(ellipse at 10% 8%, rgba(40,139,245,.20) 0%, rgba(26,88,168,.11) 28%, rgba(20,62,120,.05) 62%, transparent 82%),
        radial-gradient(ellipse at 82% 42%, rgba(22,105,210,.08) 0%, rgba(22,105,210,.035) 36%, transparent 68%),
        radial-gradient(ellipse at 45% 78%, rgba(30,105,205,.35) 0%, transparent 62%),
        linear-gradient(180deg, #182b49 0%, #142540 30%, #12233e 65%, #12233e 100%) !important;
}

@media (min-width:1025px) {
    .vt-05cont-page.vt-small-header .vt-header-gap { position:static; }
    .vt-05cont-page.vt-small-header .vt-header-divider {
        display:block;
        position:absolute;
        top:auto;
        bottom:-50px;
        left:50%;
        margin:0 !important;
        padding:0 !important;
        transform:translateX(-50%);
    }
}

/* Seitenränder der Bühne (überschreibt Elementor-Innenabstand), S9 */
@media (max-width:860px) { .vt-05cont-page #webhosting-faq { padding-right:20px; padding-left:20px; } }
@media (max-width:480px) { .vt-05cont-page #webhosting-faq { padding-right:5px;  padding-left:5px;  } }


/* --------------------------------------------------------------
   Container
-------------------------------------------------------------- */

.vt-05cont {
    width:100%;
    max-width:1320px;
    margin:0 auto;
    padding:30px 24px 80px;
    color:#fff;
}

@media (max-width:1024px) { .vt-05cont { margin-top:-80px; } }
@media (min-width:1025px) { .vt-05cont { margin-top:0; } }
@media (max-width:860px)  { .vt-05cont { padding:30px 16px 60px; } }
@media (min-width:861px)  { .vt-05cont { padding:30px 20px 80px; } }
@media (min-width:1400px) { .vt-05cont { padding:30px 24px 80px; } }
@media (max-width:480px)  { .vt-05cont { padding-right:0; padding-left:0; } }


/* --------------------------------------------------------------
   Typografie (Werte von /contao/, gemessen 24.10.2026)
-------------------------------------------------------------- */

.vt-05cont p {
    margin:0 0 14px;
    font-size:18px;
    line-height:1.6;
    color:rgba(255,255,255,.92);
}

.vt-05cont p:last-child { margin-bottom:0; }

.vt-05cont .vt-05cont-title {
    margin:0 0 14px;
    font-size:1.75rem;
    font-weight:700;
    line-height:1.3;
    letter-spacing:normal;
    text-transform:none;
    color:#fff;
}

.vt-05cont .vt-05cont-title--card { font-size:1.5rem; }

.vt-05cont .vt-05cont-h3 {
    margin:0 0 12px;
    font-size:1.2rem;
    font-weight:700;
    line-height:1.3;
    letter-spacing:normal;
    text-transform:none;
    color:#fff;
}

.vt-05cont .vt-05cont-lead {
    font-size:20px;
    line-height:1.6;
    max-width:70ch;
}

.vt-05cont .vt-05cont-small {
    font-size:.92rem;
    color:rgba(255,255,255,.72);
}

.vt-05cont strong { color:#fff; }

@media (max-width:860px) {
    .vt-05cont p { font-size:17px; }
    .vt-05cont .vt-05cont-lead { font-size:18px; }
}


/* --------------------------------------------------------------
   Badge
-------------------------------------------------------------- */

.vt-05cont-badge {
    align-self:flex-start; /* 2026-10-24 | R2 | neu */
    display:inline-block;
    margin-bottom:14px;
    padding:4px 12px;
    border:1px solid rgba(94,169,255,.55);
    border-radius:var(--vt-radius-pill, 999px);
    background:rgba(40,139,245,.18);
    color:#cfe6ff;
    font-size:13px;
    font-weight:600;
    letter-spacing:.05em;
    line-height:1.4;
    text-transform:uppercase;
}

.vt-05cont-badge--demo {
    border-color:rgba(255,255,255,.30);
    background:rgba(255,255,255,.08);
    color:rgba(255,255,255,.85);
}

.vt-05cont-badge--entwicklung {
    border-color:rgba(245,190,90,.55);
    background:rgba(245,170,40,.14);
    color:#ffe2a8;
}


/* --------------------------------------------------------------
   Block (große Karte)
   Ton dunkel (Standard) oder hell (--light), wie Contao 2a/2b.
-------------------------------------------------------------- */

.vt-05cont-block {
    position:relative;
    margin-block:clamp(20px,2.4vw,34px);
    padding:clamp(22px,2.6vw,38px);
    border:1px solid rgba(100,170,255,.18);
    border-radius:var(--vt-radius-block, 22px);
    background:linear-gradient(135deg, rgba(17,35,68,.96), rgba(11,23,47,.98));
    background-clip:padding-box;
    box-shadow:0 22px 55px rgba(0,0,0,.24);
    color:#fff;
}

.vt-05cont-block:first-child { margin-top:0; }

.vt-05cont-block--light {
    border-color:transparent;
    background:linear-gradient(145deg, rgba(22,50,86,.94) 0%, rgba(15,37,67,.90) 55%, rgba(13,33,60,.92) 100%);
    box-shadow:0 12px 30px rgba(0,0,0,.16);
}

/* Text links, Inhalt rechts; --reverse: Inhalt links */
.vt-05cont-block--split {
    display:grid;
    grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr);
    gap:clamp(20px,2.6vw,44px);
    align-items:center;
}

.vt-05cont-block--reverse { grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr); }
.vt-05cont-block--reverse > .vt-05cont-media { order:-1; }

.vt-05cont-block__copy { min-width:0; }

/* Abschluss-Zeile: Text links, Button rechts */
.vt-05cont-block--row {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:20px 40px;
}

/* Überschrift über mehreren Blöcken */
.vt-05cont-heading { margin:clamp(40px,4vw,64px) 0 0; }
.vt-05cont-heading p { margin:0; }

@media (max-width:860px) {
    .vt-05cont-block--split,
    .vt-05cont-block--reverse { grid-template-columns:minmax(0,1fr); }
    .vt-05cont-block--split > .vt-05cont-media { order:-1; }
}

@media (max-width:480px) {
    .vt-05cont-block {
        padding:16px;
        border-color:rgba(255,255,255,.05);
    }
    .vt-05cont-heading { padding:0 16px; }
}


/* --------------------------------------------------------------
   Innere Karten in einem Block
   Herkunft: vt-hosting-preise.css (Baukasten-Variante 3)
-------------------------------------------------------------- */

.vt-05cont-cards {
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
    gap:18px;
    margin-top:24px;
}

.vt-05cont-cards--3 { grid-template-columns:repeat(3, minmax(0,1fr)); }

.vt-05cont-card {
    position:relative;
    display:flex;
    flex-direction:column;
    gap:14px;
    padding:24px;
    border:1px solid rgba(94,169,255,.38);
    border-radius:var(--vt-radius-card, 18px);
    background:linear-gradient(145deg, rgba(10,28,55,.97) 0%, rgba(9,25,49,.96) 55%, rgba(7,21,43,.97) 100%);
    box-shadow:0 12px 30px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.075);
    color:#fff;
}

.vt-05cont-card p { margin:0; }

@media (max-width:860px) {
    .vt-05cont-cards--3 { grid-template-columns:minmax(0,1fr); }
}


/* --------------------------------------------------------------
   Bilder
   Standard: --vt-radius-media. Modifier --r-block zum Vergleich
   (22px), bis Klaus entschieden hat.
-------------------------------------------------------------- */

/*
   2026-10-24 | R2 | Radius vom figure auf das Bild verlegt.
   alt:
   .vt-05cont-media { min-width:0; margin:0; overflow:hidden; border-radius:var(--vt-radius-media, 14px); }
   .vt-05cont-media--r-block { border-radius:var(--vt-radius-block, 22px); }
*/
.vt-05cont-media {
    min-width:0;
    margin:0;
}

.vt-05cont-media img {
    display:block;
    width:100%;
    height:auto;
    aspect-ratio:16 / 9;
    object-fit:cover;
    border-radius:var(--vt-radius-media, 14px);
}

.vt-05cont-media--r-block img { border-radius:var(--vt-radius-block, 22px); }

.vt-05cont-media figcaption {
    margin-top:10px;
    font-size:13px;
    line-height:1.4;
    color:rgba(255,255,255,.72);
}


/* --------------------------------------------------------------
   Punkt-Liste
-------------------------------------------------------------- */

.vt-05cont ul.vt-05cont-list {
    margin:0 0 20px;
    padding:0;
    list-style:none;
}

.vt-05cont-list li {
    position:relative;
    margin:0 0 12px;
    padding-left:22px;
    font-size:17px;
    line-height:1.55;
    color:rgba(255,255,255,.88);
}

.vt-05cont-list li::before {
    content:"";
    position:absolute;
    top:.6em;
    left:0;
    width:8px;
    height:8px;
    border-radius:50%;
    background:rgb(34,138,232);
}


/* --------------------------------------------------------------
   Hinweisbox
-------------------------------------------------------------- */

.vt-05cont-note {
    margin-top:24px;
    padding:16px 20px;
    border:1px solid rgba(83,171,235,.42);
    border-left:4px solid rgb(34,138,232);
    border-radius:var(--vt-radius-small, 10px);
    background:rgba(18,77,119,.42);
}


/* --------------------------------------------------------------
   Links und Buttons
   Glas-Button aus vt-start-contao.css / vt-hosting-preise.css
-------------------------------------------------------------- */

.vt-05cont-more {
    color:#9fd0ff;
    text-decoration:underline;
    text-underline-offset:3px;
}

.vt-05cont-more:hover,
.vt-05cont-more:focus-visible { color:#fff; }

.vt-05cont-actions {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:14px 18px;
    margin-top:22px;
}

.vt-05cont-cta {
    display:inline-flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    min-height:52px;
    padding:0 28px;
    background-color:rgba(10,20,45,.72);
    border:1px solid rgb(19,81,137);
    border-radius:var(--vt-radius-button, 20px);
    backdrop-filter:blur(6px);
    color:#fff;
    font-size:16px;
    font-weight:500;
    line-height:1.2;
    text-decoration:none;
    text-transform:none;
    white-space:nowrap;
    transition:transform .18s ease, background-color .18s ease, border-color .18s ease;
}

.vt-05cont-cta:hover,
.vt-05cont-cta:focus-visible {
    background-color:rgb(12,35,77);
    border-color:rgb(34,138,232);
    color:#fff;
    text-decoration:none;
    transform:translateY(-2px);
}

.vt-05cont-cta:focus-visible {
    outline:2px solid rgb(120,190,255);
    outline-offset:3px;
}

/* Zweitbutton (Contao S3) */
.vt-05cont-cta--secondary {
    background:transparent;
    border-color:rgba(94,169,255,.45);
    color:#cfe6ff;
}

.vt-05cont-cta--secondary:hover,
.vt-05cont-cta--secondary:focus-visible {
    background-color:rgba(12,35,77,.55);
    border-color:rgb(34,138,232);
    color:#fff;
}

/* Nicht klickbar, z. B. „Demnächst online“ */
.vt-05cont-cta--disabled {
    border-style:dashed;
    color:rgba(255,255,255,.65);
    cursor:default;
}

.vt-05cont-cta--disabled:hover {
    background-color:rgba(10,20,45,.72);
    border-color:rgb(19,81,137);
    color:rgba(255,255,255,.65);
    transform:none;
}

/* Chevron aus zwei Rahmenlinien, kein Icon */
.vt-05cont-cta__arrow {
    flex:0 0 auto;
    width:8px;
    height:8px;
    border-top:2px solid currentColor;
    border-right:2px solid currentColor;
    transform:rotate(45deg);
}

@media (max-width:480px) {
    .vt-05cont-cta {
        width:100%;
        white-space:normal;
    }
}


/* --------------------------------------------------------------
   Nur für Screenreader
-------------------------------------------------------------- */

.vt-05cont-sr {
    position:absolute;
    width:1px;
    height:1px;
    margin:-1px;
    padding:0;
    overflow:hidden;
    clip:rect(0 0 0 0);
    white-space:nowrap;
    border:0;
}


/* --------------------------------------------------------------
   Weniger Bewegung
-------------------------------------------------------------- */

@media (prefers-reduced-motion:reduce) {
    .vt-05cont-cta { transition:none; }
    .vt-05cont-cta:hover,
    .vt-05cont-cta:focus-visible { transform:none; }
}