/* SUISSE-VIDEO Design v2 (Entwurf): hell, luftig, klare Typografie, Karten mit Rahmen.
   Wird NACH style.css geladen und ueberschreibt nur Optik, keine Struktur. */
:root{
  --color-bg:#FAFAFC;--color-bg-panel:#FFFFFF;--color-bg-panel-2:#F4F0FB;
  --color-fg:#0B0D12;--color-fg-muted:#3E4651;--color-border:#DADDE4;
  --color-accent-soft:rgba(139,47,214,.10);
  --header-bg:#FFFFFF;--header-fg:#12141A;--header-fg-muted:#5B6470;
  --v2-sub:#F3F4F8;--v2-tint:#F4F0FB;--v2-g1:#F3F1F8;--v2-g2:#E2D6F4;--v2-radius:16px;
  --shadow-1:none;--shadow-2:0 18px 50px rgba(30,20,60,.10);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--v2-sub:#1B2028;--v2-tint:#1E1830;--v2-g1:#12151A;--v2-g2:#1E1830;}}
:root[data-theme="dark"]{--v2-sub:#1B2028;--v2-tint:#1E1830;--v2-g1:#12151A;--v2-g2:#1E1830;}

body{font-size:1.02rem;line-height:1.65}
h1,h2,h3{letter-spacing:-.02em}
h1{font-size:clamp(2rem,4vw,3rem);line-height:1.1}
h2{font-size:clamp(1.65rem,3vw,2.35rem)}
section{padding-block:clamp(56px,8vw,96px)}
.section-head{margin-bottom:44px}
.eyebrow{font-family:var(--font-main);font-size:.78rem;letter-spacing:.1em;font-weight:700}

/* Statusleiste + Kopf */
.status-bar{background:var(--v2-sub);color:var(--color-fg-muted);border-bottom:1px solid var(--color-border)}
.status-bar .lang-switch a{color:var(--color-fg-muted)}
.status-bar .lang-switch a.active,.status-bar .lang-switch a:hover{color:var(--color-accent)}
header{background:var(--header-bg);border-bottom:1px solid var(--color-border)}
.brand{color:var(--color-fg)}
.nav-row{padding-block:14px}
nav.links{gap:6px;justify-content:center}
nav.links>a,nav.links .nav-group>a{color:var(--color-fg);font-size:.92rem;font-weight:600;padding:.5em .8em;border-radius:999px;transition:background .15s,color .15s}
nav.links>a:hover,nav.links .nav-group>a:hover,nav.links .nav-group:focus-within>a{background:var(--v2-tint);color:var(--color-accent)}
nav.links a[aria-current="page"]{background:var(--v2-tint);color:var(--color-accent)}
.nav-cta .btn{border-radius:999px;font-size:.9rem;padding:.65em 1.3em}
.menu-toggle{border-color:var(--color-border);color:var(--color-fg)}

/* Dropdown */
.nav-group{position:relative;display:flex;align-items:center}
.nav-sub-toggle{background:none;border:0;color:var(--color-fg-muted);cursor:pointer;width:22px;height:28px;margin-left:-8px;padding:0;font-size:.7rem;border-radius:6px}
.nav-sub-toggle::before{content:'';display:block;width:6px;height:6px;margin:auto;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translate(-1px,-1px);transition:transform .15s}
.nav-group.open .nav-sub-toggle::before{transform:rotate(225deg)}
.nav-sub{position:absolute;top:100%;left:0;min-width:270px;padding:10px;background:var(--color-bg-panel);border:1px solid var(--color-border);border-radius:14px;box-shadow:var(--shadow-2);display:none;flex-direction:column;gap:2px;z-index:70}
.nav-sub::before{content:'';position:absolute;left:0;right:0;top:-10px;height:10px}
nav.links .nav-sub a{color:var(--color-fg);font-weight:500;font-size:.9rem;padding:.55em .8em;border-radius:8px;white-space:nowrap}
nav.links .nav-sub a:hover{background:var(--v2-tint);color:var(--color-accent)}
nav.links .nav-sub a.sub-all{font-weight:700;border-bottom:1px solid var(--color-border);border-radius:8px 8px 0 0;margin-bottom:4px}
@media (min-width:1201px){
  .nav-group:hover .nav-sub,.nav-group.open .nav-sub,.nav-group:focus-within .nav-sub{display:flex}
}
@media (max-width:1200px){
  nav.links{background:var(--header-bg);gap:4px;align-items:stretch;justify-content:flex-start}
  nav.links>a,nav.links .nav-group>a{font-size:1.05rem;padding:.7em .4em;border-radius:10px}
  .nav-group{flex-wrap:wrap}
  .nav-group>a{flex:1}
  .nav-sub-toggle{display:none}
  .nav-sub{position:static;display:flex;width:100%;min-width:0;border:0;box-shadow:none;background:none;padding:0 0 8px 14px;border-left:2px solid var(--v2-tint);margin-left:6px;border-radius:0}
  .nav-sub::before{display:none}
  nav.links .nav-sub a{white-space:normal;font-size:.95rem}
}

/* Hero hell */
.hero{background:linear-gradient(180deg,var(--v2-g1) 0%,var(--v2-g2) 100%);color:var(--color-fg);padding-block:clamp(48px,7vw,96px) clamp(56px,8vw,104px)}
.hero h1{color:var(--color-fg)}
.hero .lede,.hero p{color:var(--color-fg-muted);font-size:1.08rem}
.hero .eyebrow,.page-hero .eyebrow,.cta-band .eyebrow{color:var(--color-accent)}
.hero .eyebrow::before,.page-hero .eyebrow::before,.cta-band .eyebrow::before{background:var(--color-accent)}
.hero .hero-slim a.btn-ghost-light{background:var(--color-bg-panel);border:1px solid var(--color-border);color:var(--color-fg)}
.hero .hero-slim a.btn-ghost-light:hover{background:var(--v2-tint);border-color:var(--color-accent);color:var(--color-accent)}
.hero-slim a.btn{border-radius:999px;font-size:.92rem;padding:.7em 1.4em}
.hero-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin-top:40px}
.hero-stat{background:var(--color-bg-panel);border:1px solid var(--color-border);border-radius:14px;padding:14px 16px}
.hero-stat b{color:var(--color-fg);font-family:var(--font-main);font-size:1.35rem;letter-spacing:-.01em}
.hero-stat span{color:var(--color-fg-muted);font-size:.8rem}
.channel-grid{background:var(--color-bg-panel);border:1px solid var(--color-border);border-radius:22px;padding:14px;box-shadow:var(--shadow-2)}
.channel-tile{border-radius:12px}

/* Karten */
.card{border-radius:var(--v2-radius);padding:28px;box-shadow:none;transition:border-color .15s,transform .15s}
.card:hover{border-color:var(--color-accent)}
.card-grid-3,.card-grid-2{gap:24px}
.tint-panel{background:var(--v2-tint);border:1px solid var(--color-border);border-radius:20px}
.screenshot-frame{border-radius:var(--v2-radius);box-shadow:var(--shadow-2)}
.btn{border-radius:999px}
.btn-primary{box-shadow:none}

/* CTA */
.cta-band{background:var(--v2-tint);color:var(--color-fg);border:1px solid var(--color-border);border-radius:24px;padding:clamp(32px,6vw,64px)}
.cta-band h2{color:var(--color-fg)}
.cta-band p{color:var(--color-fg-muted)}
.questions-block h2{font-family:var(--font-main)}

/* Fuss hell */
footer{background:var(--v2-sub);color:var(--color-fg-muted);border-top:1px solid var(--color-border);margin-top:0}
.footer-brand{color:var(--color-fg)}
.footer-col h3{color:var(--color-fg);font-family:var(--font-main);letter-spacing:.06em}
.footer-col a,.footer-col p,.footer-social a{color:var(--color-fg-muted)}
.footer-col a:hover,.footer-social a:hover{color:var(--color-accent)}
.footer-bottom{border-top-color:var(--color-border)}

/* Unterseiten-Kopf (page-hero) hell */
.page-hero{background:linear-gradient(180deg,var(--v2-g1) 0%,var(--v2-g2) 100%);color:var(--color-fg);padding-block:clamp(36px,5vw,64px) clamp(32px,4vw,52px);border-bottom:1px solid var(--color-border)}
.page-hero h1{color:var(--color-fg);max-width:30ch}
.page-hero .lede,.page-hero p{color:var(--color-fg-muted)}
.breadcrumb{font-family:var(--font-main);font-size:.76rem;letter-spacing:.06em;color:var(--color-fg-muted)}
.breadcrumb a{color:var(--color-fg-muted)}
.breadcrumb a:hover{color:var(--color-accent)}
/* helle Zweit-Buttons in Hero/Kopf/CTA */
.hero .btn-ghost-light,.page-hero .btn-ghost-light,.cta-band .btn-ghost-light,.btn-ghost-light{background:var(--color-bg-panel);border:1px solid var(--color-border);color:var(--color-fg)}
.hero .btn-ghost-light:hover,.page-hero .btn-ghost-light:hover,.cta-band .btn-ghost-light:hover,.btn-ghost-light:hover{background:var(--v2-tint);border-color:var(--color-accent);color:var(--color-accent)}
.btn-outline{border-radius:999px}