/* ==========================================================================
   Retrofit-Cockpit – Skin V3 (Design-Prototyp "hell & lebendig")
   --------------------------------------------------------------------------
   Gegenthese zu skin-v2.css. Wird NACH main.css geladen, ändert ausschliesslich
   das Erscheinungsbild – KEIN HTML wird angefasst.

   Leitgedanke (abgeleitet von Seiten wie hetzner.com, NICHT nachgebaut):
   Frische entsteht durch helle Flächen, viel Luft, EINE kräftige Akzentfarbe,
   runde Formen und farbige Piktogramme – nicht durch mehr Elemente.

   Die acht Funktionsbereiche haben in app/data/products.php bereits eigene
   Akzentfarben. V2 hat sie unterdrückt; V3 spielt sie bewusst aus: farbige
   Kreis-Badges erzeugen den grössten Teil der "Lebendigkeit".

   Offen: Schriftwechsel (siehe Hinweis zu skin-v2.css) – Inter bleibt vorerst.
   ========================================================================== */

.skin-v3 {
    /* ---- Frischere, klarere Marke: Teal bleibt, wird aber leuchtender ---- */
    --brand-900: #06373d;
    --brand-800: #08525c;
    --brand-700: #0a6b78;
    --brand-600: #0c8797;
    --brand-500: #10a3b5;
    --brand-400: #2bc0d1;
    --brand-300: #7dd9e4;
    --brand-100: #c9eef3;
    --brand-50:  #eefafc;

    /* Akzent: warmes Koralle statt Amber – trägt die Frische */
    --mint-500: #f4633a;
    --mint-400: #ff7d57;
    --mint-300: #ffb59c;

    --ink-900: #0d2430;
    --ink-800: #123240;
    --ink-700: #1a4757;

    --bg: #ffffff;
    /* Exakt der Hintergrundton der Roboter-Illustrationen – so verschmelzen
       sie auf getönten Abschnitten randlos mit der Fläche. */
    --bg-subtle: #f8fcfd;
    --bg-muted: #eef6f8;
    --surface: #ffffff;
    --text: #16242b;
    --text-muted: #4d6068;
    --border: #e3edf0;
    --border-strong: #c6d9de;

    /* ---- Runde, freundliche Formen ---- */
    --r-sm: 10px;
    --r-md: 14px;
    --r-lg: 22px;
    --r-xl: 30px;

    /* ---- Weiche, farbige statt grauer Schatten ---- */
    --shadow-xs: 0 1px 2px rgba(12, 135, 151, 0.06);
    --shadow-sm: 0 4px 14px rgba(12, 135, 151, 0.08);
    --shadow-md: 0 14px 38px rgba(12, 135, 151, 0.12);
    --shadow-lg: 0 28px 64px rgba(12, 135, 151, 0.16);
    --shadow-brand: 0 14px 32px rgba(244, 99, 58, 0.28);

    /* ---- Mehr Luft ---- */
    --sp-9: 7.5rem;
    --container: 1240px;
    background: var(--bg);
}

/* ==========================================================================
   1) Dunkle Flächen aufhellen – der grösste Hebel für "frisch"
   Hero und section-dark werden zu hellen, sanft eingefärbten Flächen.
   ========================================================================== */
.skin-v3 .hero,
.skin-v3 .section-dark {
    background:
        radial-gradient(70% 90% at 88% 0%, #e6f7fa 0%, rgba(230,247,250,0) 60%),
        radial-gradient(60% 80% at 0% 100%, #fff1ec 0%, rgba(255,241,236,0) 55%),
        var(--bg);
}
.skin-v3 .hero { border-bottom: 1px solid var(--border); }

/* Textfarben in den vormals dunklen Bereichen umkehren */
.skin-v3 .section-dark h1, .skin-v3 .section-dark h2,
.skin-v3 .section-dark h3, .skin-v3 .section-dark h4 { color: var(--ink-900); }
.skin-v3 .section-dark .lead,
.skin-v3 .section-dark p { color: var(--text-muted); }
.skin-v3 .section-dark .eyebrow { color: var(--brand-600); }
.skin-v3 .section-dark a { color: var(--brand-700); }
.skin-v3 .section-dark .btn-outline { color: var(--brand-700); border-color: var(--border-strong); }
.skin-v3 .section-dark .btn-outline:hover { background: var(--brand-50); color: var(--brand-700); border-color: var(--brand-400); }
.skin-v3 .section-dark .mk-cap,
.skin-v3 .section-dark .diag-cap { color: var(--text-muted); }
.skin-v3 .section-dark .check-list li::before { background-color: var(--brand-50); }

/* Hervorhebung im Hero-Fliesstext (die frühere Inline-Farbe #fff wurde im
   Markup entfernt, weil der Hero nicht mehr dunkel ist). */
.skin-v3 .hero-sub strong { color: var(--ink-900); }
.skin-v3 .hero-sub { color: var(--text-muted); }
.skin-v3 .hero-trust { color: var(--text-muted); }
.skin-v3 .hero-trust svg { color: var(--mint-500); }
.skin-v3 .hero h1 { color: var(--ink-900); }
.skin-v3 .hero .accent { color: var(--brand-600); }
.skin-v3 .hero-provoke {
    background: #fff;
    border: 1px solid var(--mint-300);
    box-shadow: var(--shadow-xs);
    /* Ohne --pa (Startseite) greift die Akzentfarbe; auf /produkte/{slug}
       liefert das Markup den Akzent des Funktionsbereichs. */
    color: var(--pa, var(--mint-500));
    border-color: color-mix(in srgb, var(--pa, var(--mint-500)) 35%, white);
}

/* Produktdetail-Hero nimmt den Akzent des jeweiligen Funktionsbereichs auf. */
.skin-v3 .hero[style*="--pa"] {
    background:
        radial-gradient(70% 90% at 88% 0%, color-mix(in srgb, var(--pa) 14%, white) 0%, rgba(255,255,255,0) 62%),
        radial-gradient(60% 80% at 0% 100%, #fff1ec 0%, rgba(255,241,236,0) 55%),
        var(--bg);
}

/* ==========================================================================
   2) Typografie: grössere, selbstbewusstere Überschriften, ruhiger Fliesstext
   ========================================================================== */
.skin-v3 h1 { font-size: clamp(2.4rem, 1.5rem + 3.2vw, 3.9rem); letter-spacing: -0.033em; line-height: 1.06; }
.skin-v3 h2 { font-size: clamp(1.8rem, 1.25rem + 2vw, 2.85rem); letter-spacing: -0.026em; }
.skin-v3 h3 { letter-spacing: -0.014em; }
.skin-v3 .lead { font-size: 1.15rem; line-height: 1.65; }
.skin-v3 .eyebrow {
    font-size: var(--fs-sm); letter-spacing: 0.02em; text-transform: none;
    font-weight: 700; color: var(--brand-600);
}
.skin-v3 .eyebrow svg { color: var(--mint-500); }
.skin-v3 .section-head { max-width: 800px; }

/* ==========================================================================
   3) Karten: hell, rund, mit weicher Anhebung beim Hover
   ========================================================================== */
.skin-v3 .card {
    border-radius: var(--r-lg);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-xs);
    padding: var(--sp-6);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.skin-v3 .card:hover { box-shadow: var(--shadow-sm); }
.skin-v3 .card-hover:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-color: var(--brand-300);
}

/* ---- Farbige Kreis-Badges: das eigentliche "Lebendigkeits"-Element ----
   Auf Produktkarten liefert das Markup bereits --pa. In den generischen
   Rastern der Startseite wird die Farbe hier zyklisch vergeben, damit die
   Abschnitte nicht monochrom wirken. */
.skin-v3 .icon-badge {
    width: 58px; height: 58px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--pa, var(--brand-500)) 13%, white);
    color: var(--pa, var(--brand-600));
    border: 0;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--pa, var(--brand-500)) 18%, transparent);
}
.skin-v3 .icon-badge svg { width: 27px; height: 27px; }

.skin-v3 .grid > .card:nth-child(6n+1) { --pa: #0c8797; }
.skin-v3 .grid > .card:nth-child(6n+2) { --pa: #f4633a; }
.skin-v3 .grid > .card:nth-child(6n+3) { --pa: #6d28d9; }
.skin-v3 .grid > .card:nth-child(6n+4) { --pa: #1e8449; }
.skin-v3 .grid > .card:nth-child(6n+5) { --pa: #2563eb; }
.skin-v3 .grid > .card:nth-child(6n+6) { --pa: #d946a0; }

/* ==========================================================================
   4) Schaltflächen: Pillenform, farbiger Schatten, spürbarer Hover
   ========================================================================== */
.skin-v3 .btn {
    border-radius: 999px;
    font-weight: 650;
    padding-inline: 1.6rem;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.skin-v3 .btn-lg { padding: 1.05rem 2rem; }
.skin-v3 .btn-accent { background: var(--mint-500); color: #fff; box-shadow: var(--shadow-brand); }
.skin-v3 .btn-accent:hover { background: var(--mint-400); color: #fff; transform: translateY(-2px); }
.skin-v3 .btn-primary { background: var(--brand-600); box-shadow: 0 12px 28px rgba(12,135,151,0.26); }
.skin-v3 .btn-primary:hover { background: var(--brand-700); transform: translateY(-2px); }
.skin-v3 .btn-outline { border-width: 1.5px; }
.skin-v3 .btn-outline:hover { transform: translateY(-2px); }
.skin-v3 .header-cta { box-shadow: 0 8px 20px rgba(12,135,151,0.22); }

/* ==========================================================================
   5) Kleinteile
   ========================================================================== */
.skin-v3 .pill,
.skin-v3 .tag { border-radius: 999px; }
.skin-v3 .pill { background: var(--brand-50); color: var(--brand-700); border-color: var(--brand-100); }

.skin-v3 .trust-bar { background: var(--bg-subtle); border-color: var(--border); }
.skin-v3 .trust-row { gap: 0.9rem 2.4rem; }
.skin-v3 .trust-item svg { color: var(--mint-500); }

.skin-v3 .section-tint { background: var(--bg-subtle); }

.skin-v3 .q-item { border-radius: var(--r-md); background: #fff; border: 1px solid var(--border); }
.skin-v3 .q-item .q-ic { color: var(--mint-500); }

.skin-v3 .accordion, .skin-v3 .acc-item { border-radius: var(--r-md); }
.skin-v3 .acc-btn { font-weight: 650; }

.skin-v3 .table-wrap { border-radius: var(--r-md); }

.skin-v3 .price-card { border-radius: var(--r-lg); box-shadow: var(--shadow-xs); }
.skin-v3 .price-card.featured { box-shadow: var(--shadow-md); border-color: var(--brand-400); }
.skin-v3 .price-badge { border-radius: 999px; background: var(--mint-500); color: #fff; }

/* ==========================================================================
   6) Kopfbereich, CTA-Band, Fussbereich
   ========================================================================== */
.skin-v3 .site-header { background: rgba(255,255,255,0.88); border-bottom: 1px solid var(--border); }
.skin-v3 .dropdown, .skin-v3 .mega { border-radius: var(--r-md); box-shadow: var(--shadow-md); border: 1px solid var(--border); }

/* Ruhigere Navigation: statt gefüllter Kästchen bei Hover und aktivem Eintrag
   nur ein Farbwechsel und ein feiner Strich unter dem aktiven Punkt. Die
   Flächen liessen die Leiste fleckig wirken – besonders neben Einträgen mit
   Aufklappmenü, wo zusätzlich der Pfeil steht. */
.skin-v3 .nav-link { font-weight: 500; position: relative; }
.skin-v3 .nav-link:hover,
.skin-v3 .nav-link.is-active { background: transparent; color: var(--brand-700); }
.skin-v3 .nav-link.is-active { font-weight: 650; }
.skin-v3 .nav-link.is-active::after {
    content: ""; position: absolute; left: 0.7rem; right: 0.7rem; bottom: 0.3rem;
    height: 2px; border-radius: 2px; background: var(--mint-500);
}
/* Etwas mehr Luft zwischen den Einträgen, seit die Flächen entfallen. */
.skin-v3 .main-nav { gap: 0.3rem; }

/* Knapp oberhalb des Umschaltpunkts sitzt die Leiste noch eng. Statt dort
   bereits auf das Mobilmenü zu wechseln, wird sie kompakter: kleinere
   Wortmarke, engere Abstände. Ab 1400px gilt wieder die volle Größe. */
@media (min-width: 1241px) and (max-width: 1400px) {
    .skin-v3 .brand .wordmark { font-size: 1.15rem; }
    .skin-v3 .brand .logo { width: 30px; height: 30px; }
    .skin-v3 .nav-link { padding-inline: 0.5rem; }
    .skin-v3 .main-nav { gap: 0.1rem; }
    .skin-v3 .header-cta { padding-inline: 1.1rem; }
    .skin-v3 .nav-link.is-active::after { left: 0.5rem; right: 0.5rem; }
}

/* Das CTA-Band bleibt bewusst farbig – als einziger kräftiger Block Kontrast. */
.skin-v3 .cta-band {
    border-radius: var(--r-xl);
    background: linear-gradient(135deg, var(--brand-700) 0%, var(--brand-500) 55%, #14b8a6 100%);
}
.skin-v3 .cta-band h2, .skin-v3 .cta-band p { color: #fff; }
/* Umriss-Schaltflächen stehen hier auf farbigem Grund – die Standardfarbe
   (dunkles Teal) wäre darauf nahezu unlesbar. */
.skin-v3 .cta-band .btn-outline {
    color: #fff; border-color: rgba(255,255,255,0.6); background: transparent;
}
.skin-v3 .cta-band .btn-outline:hover {
    color: #fff; border-color: #fff; background: rgba(255,255,255,0.14);
}

.skin-v3 .site-footer { background: var(--ink-900); }
.skin-v3 .footer-note {
    margin-top: var(--sp-4); padding-top: var(--sp-4);
    border-top: 1px solid rgba(255,255,255,0.09);
}
.skin-v3 .footer-note p { margin: 0; font-size: var(--fs-xs); color: #7f9ba3; max-width: 78ch; }

/* ==========================================================================
   6b) Illustrationen (Roboter-Serie)
   Die Vorlagen bringen einen hellen Eigenhintergrund mit. Auf getönten
   Abschnitten (--bg-subtle) fügt er sich nahtlos ein; auf weissem Grund
   umschliesst ihn eine weiche Rundung, damit die Kante gewollt wirkt.
   ========================================================================== */
.skin-v3 .illu { margin: 0; }
.skin-v3 .illu img {
    width: 100%; height: auto;
    border-radius: var(--r-lg);
    background: var(--bg-subtle);
}
.skin-v3 .section-tint .illu img { border-radius: 0; background: transparent; }

/* Motive mit eigenem Bildhintergrund (z. B. Klassenraum) behalten die Rundung
   auch auf getönten Abschnitten – sonst stünde dort eine harte Kante.
   Muss nach der .section-tint-Regel stehen (gleiche Spezifität). */
.skin-v3 .illu-framed img { border-radius: var(--r-lg); background: transparent; }

/* Kennzeichnung als KI-generiert: dauerhaft sichtbar, aber zurückhaltend. */
.skin-v3 .illu-cap {
    margin-top: 0.5rem;
    font-size: var(--fs-xs);
    color: var(--text-soft);
    text-align: right;
    letter-spacing: 0.01em;
}

/* Nebeneinander mit Textspalte: Illustration optisch etwas anheben. */
.skin-v3 .two-col .illu,
.skin-v3 .hero-grid .illu { margin-bottom: var(--sp-5); }

/* ==========================================================================
   7) Diagramme & Mockups: runder, weicher
   ========================================================================== */
.skin-v3 .vlyx-diagram { border-radius: var(--r-lg); }
.skin-v3 .mk { border-radius: var(--r-lg); box-shadow: var(--shadow-md); }
.skin-v3 .section-dark .vlyx-diagram .diag-node circle[fill="#ffffff"] { fill: #ffffff; }
.skin-v3 .section-dark .vlyx-diagram text[fill="#0d1b2a"] { fill: #0d1b2a; }