/* lopsticles Landingpage – Design "Glas" (hell/dunkel), ENTWURF 2026-10-02
   Gleiche Variablen und Glasflaeche wie die Rechner (glas.css aus dem Vorsorgerechner,
   Vault: Umbau-Glas-Design-Code). Wird nach dem Inline-<style> eingebunden und
   ueberschreibt ihn; Inhalt und Skripte der Seite bleiben unveraendert. */

:root{
  --bg:#e1e8f4; --ink:#0f1b33; --sub:#3b4a66; --muted:#66758f;
  --glass:rgba(255,255,255,.34); --glass-in:rgba(255,255,255,.55); --glass-edge:rgba(255,255,255,.65);
  --line:rgba(15,27,51,.10);
  --acc:#2563eb; --acc-dk:#1d4ed8; --acc-soft:rgba(37,99,235,.12);
  --gold:#d9a94a; --gold-dk:#b7791f;
  --grad:linear-gradient(135deg,#2f6fe0,#5b9bff);
  --r:14px;
  --sheen1:rgba(255,255,255,.66); --sheen2:rgba(255,255,255,.26); --sheen-tint:rgba(255,255,255,.40);
  --hi:rgba(255,255,255,.95); --ring:rgba(15,27,51,.05); --drop:rgba(31,64,140,.45); --drop-h:rgba(31,64,140,.55);
  --top-bg:rgba(255,255,255,.55); --div:rgba(15,27,51,.16); --hover:rgba(255,255,255,.50);
  --dialog-bg:rgba(255,255,255,.88); --solid:#fff; --overlay:rgba(15,27,51,.35);
  --blob1:rgba(91,155,255,.42); --blob2:rgba(159,179,209,.50); --blob3:rgba(217,169,74,.28); --blob4:rgba(110,162,255,.30);
  /* Hero: Video bleibt, darueber ein heller Schleier von links */
  --veil1:rgba(214,225,243,.84); --veil2:rgba(214,225,243,.48); --veil3:rgba(214,225,243,0);
  --hex-fill:#2f6fe0; --hex-edge:rgba(255,255,255,.85);
  --ok:#047857; --warn:#b45309;
  color-scheme:light;
}
html[data-theme="dark"]{
  --bg:#060a13; --ink:#eaf0fb; --sub:#b0bcd3; --muted:#8a97b3;
  --glass:rgba(22,32,56,.42); --glass-in:rgba(255,255,255,.06); --glass-edge:rgba(255,255,255,.10);
  --line:rgba(255,255,255,.10);
  --acc:#6ea2ff; --acc-dk:#8fb8ff; --acc-soft:rgba(110,162,255,.18);
  --gold:#e3b862; --gold-dk:#f0c674;
  --grad:linear-gradient(135deg,#3f7be0,#6ea2ff);
  --sheen1:rgba(255,255,255,.075); --sheen2:rgba(255,255,255,.025); --sheen-tint:rgba(255,255,255,.03);
  --hi:rgba(255,255,255,.07); --ring:rgba(255,255,255,.03); --drop:rgba(0,0,0,.60); --drop-h:rgba(0,0,0,.70);
  --top-bg:rgba(6,10,19,.55); --div:rgba(255,255,255,.18); --hover:rgba(255,255,255,.07);
  --dialog-bg:rgba(16,24,44,.92); --solid:#16223b; --overlay:rgba(0,0,0,.55);
  --blob1:rgba(63,123,224,.42); --blob2:rgba(159,179,209,.22); --blob3:rgba(217,169,74,.16); --blob4:rgba(91,155,255,.20);
  --veil1:rgba(6,10,19,.86); --veil2:rgba(6,10,19,.58); --veil3:rgba(6,10,19,.14);
  --hex-fill:#3f7be0; --hex-edge:rgba(255,255,255,.35);
  --ok:#34d399; --warn:#f0c674;
  color-scheme:dark;
}

html,body{background:var(--bg);color:var(--ink)}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
   radial-gradient(560px 440px at 10% 14%,var(--blob1),transparent 70%),
   radial-gradient(620px 480px at 90% 6%,var(--blob2),transparent 70%),
   radial-gradient(540px 440px at 80% 90%,var(--blob3),transparent 70%),
   radial-gradient(500px 400px at 6% 92%,var(--blob4),transparent 70%)}
::-webkit-scrollbar-thumb{background:var(--div)}

/* ── gemeinsame Glasflaeche ── */
.tool-card,.footer-row{
  background:linear-gradient(160deg,var(--sheen1),var(--sheen2) 65%),var(--glass);
  border:1px solid var(--glass-edge);
  box-shadow:0 1px 0 var(--hi) inset,0 0 0 1px var(--ring),0 20px 40px -26px var(--drop);
  backdrop-filter:blur(20px) saturate(140%);-webkit-backdrop-filter:blur(20px) saturate(140%)}

/* ── Kopfleiste ── */
nav{height:56px;background:var(--top-bg);border-bottom:1px solid var(--line);
  backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%)}
.nav-logo-text{color:var(--ink)}
.nav-tagline{color:var(--muted);border-left-color:var(--div)}
.nav-links{align-items:center}
.nav-link{color:var(--sub);border-radius:8px;font-size:12.5px}
.nav-link:hover{background:var(--acc-soft);color:var(--acc-dk)}
.nav-rechts{display:flex;align-items:center}
.theme-toggle{flex:none;width:34px;height:34px;margin-left:12px;padding:0;border-radius:10px;border:1px solid var(--glass-edge);
  background:var(--glass-in);color:var(--acc-dk);display:grid;place-items:center;cursor:pointer;
  box-shadow:0 1px 0 var(--hi) inset,0 0 0 1px var(--ring)}
.theme-toggle:hover{border-color:var(--acc);background:var(--solid)}
.theme-toggle svg{width:18px;height:18px}
.theme-toggle .ic-sun{display:none}
html[data-theme="dark"] .theme-toggle .ic-sun{display:block}
html[data-theme="dark"] .theme-toggle .ic-moon{display:none}

/* Logos: freigestellte Fassungen (*-frei.png), im hellen Schema etwas kraeftiger */
html:not([data-theme="dark"]) .nav-brand img,html:not([data-theme="dark"]) .section-header img,html:not([data-theme="dark"]) .footer-row img{filter:saturate(1.8) brightness(.6) contrast(1.15)}

/* ── Hero: Video bleibt, Text auf einer Glaskarte ── */
.hero{background:var(--bg)}
.hero-video-overlay{background:
  linear-gradient(90deg,var(--veil1) 0%,var(--veil2) 42%,var(--veil3) 100%),
  linear-gradient(180deg,transparent 82%,var(--bg) 100%)}
.hero-grid,.hero-scanline{display:none}
#particle-canvas{opacity:.28}
html[data-theme="dark"] #particle-canvas{opacity:.4}
.hero-badge{background:var(--acc-soft);border:1px solid rgba(37,99,235,.25);border-radius:999px;padding:5px 12px}
.hero-badge-dot{background:var(--acc)}
.hero-badge-text{color:var(--acc-dk);font-weight:600}
.hero h1{color:var(--ink);letter-spacing:-.02em;text-shadow:0 1px 18px var(--veil1)}
.hero-sub{text-shadow:0 1px 12px var(--veil1)}
.hero-highlight{color:var(--acc)}
.hero-sub{color:var(--sub);margin-bottom:28px}
.btn-primary{background:var(--grad);border-radius:10px;box-shadow:0 10px 26px -12px rgba(37,99,235,.7)}
.btn-primary:hover{background:var(--grad);filter:brightness(1.06)}
.btn-secondary{background:var(--grad);color:#fff;border:0;border-radius:10px;font-weight:600;
  box-shadow:0 10px 26px -12px rgba(37,99,235,.7)}
.btn-secondary:hover{color:#fff;filter:brightness(1.06);box-shadow:0 12px 30px -12px rgba(37,99,235,.85)}

/* ── Kachelbereich ── */
.cards-section{background:transparent}
.section-label{color:var(--acc);letter-spacing:.12em}
.section-title{color:var(--ink);letter-spacing:-.02em}
.section-sub{color:var(--sub)}
.tool-grid{gap:20px}
.tool-card{border-radius:var(--r);color:var(--ink);transition:transform .2s,box-shadow .2s,border-color .2s}
.tool-card:hover{border-color:rgba(37,99,235,.45);transform:translateY(-3px);
  box-shadow:0 1px 0 var(--hi) inset,0 0 0 1px var(--ring),0 26px 46px -24px var(--drop-h)}
.tool-card h3{color:var(--ink)}
.tool-tagline{color:var(--acc)}
.tool-desc{color:var(--sub)}
.tool-features li{color:var(--sub)}
.feat-dot{background:var(--acc);opacity:.7}
.tool-card-footer{border-top-color:var(--line)}
.tool-card:hover .tool-card-footer{background:var(--hover)}
.card-open-label{color:var(--muted)}
.tool-card:hover .card-open-label,.tool-card:hover .card-arrow{color:var(--acc-dk)}
.card-arrow{color:var(--muted)}
.card-fb-btn{color:var(--muted)}
.card-fb-btn:hover{color:var(--gold-dk)}
/* Sechseck-Symbol wie das Hero-Symbol der Rechner: blau gefuellt, Linie weiss */
.hex-icon{filter:drop-shadow(0 6px 14px rgba(37,99,235,.30))}
.hex-icon svg.hex-bg polygon{fill:var(--hex-fill);stroke:var(--hex-edge)}
.hex-icon-inner{color:#fff}
.card-survey .hex-icon{filter:drop-shadow(0 6px 14px rgba(217,169,74,.35))}
.card-survey .hex-icon svg.hex-bg polygon{fill:var(--gold)}
.card-survey .tool-tagline{color:var(--gold-dk)!important}
.card-survey:hover{transform:none;border-color:var(--glass-edge);
  box-shadow:0 1px 0 var(--hi) inset,0 0 0 1px var(--ring),0 20px 40px -26px var(--drop)}
.card-survey:hover .tool-card-footer{background:transparent}
.survey-input{background:var(--glass-in);border:1px solid var(--line);border-radius:10px;color:var(--ink)}
.survey-input:focus{background:var(--solid);border-color:var(--gold);box-shadow:0 0 0 3px rgba(217,169,74,.18)}
.survey-input::placeholder{color:var(--muted)}
.survey-send{color:var(--muted)}
.survey-send:hover:not(:disabled),.survey-send:hover:not(:disabled) .card-arrow{color:var(--gold-dk)}
.survey-count{color:var(--muted)}
.survey-msg.ok{color:var(--ok)}
.survey-msg.err{color:var(--warn)}
.survey-msg a{color:var(--acc-dk)}

/* ── Fusszeile ── */
.footer-row{border-radius:var(--r)}
.footer-author{color:var(--ink)}
.footer-desc{color:var(--sub)}
.btn-dark{background:var(--grad);color:#fff;border-radius:10px;box-shadow:0 10px 26px -12px rgba(37,99,235,.7)}
.btn-dark:hover{opacity:1;filter:brightness(1.06)}
.btn-outline{background:var(--glass-in);color:var(--sub);border:1px solid var(--line);border-radius:10px}
.btn-outline:hover{border-color:var(--acc);color:var(--acc-dk);background:var(--solid)}
.copyright{background:transparent;border-top:1px solid var(--line)}
.copyright p,.copyright a{color:var(--muted)}
.copyright a:hover{color:var(--acc-dk)}

/* ── Dialoge (Impressum, Datenschutz, Hinweise) ── */
.modal-overlay{background:var(--overlay);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.modal-box{background:var(--dialog-bg);border:1px solid var(--glass-edge);border-radius:var(--r);
  box-shadow:0 1px 0 var(--hi) inset,0 30px 70px -30px var(--drop-h);
  backdrop-filter:blur(24px) saturate(140%);-webkit-backdrop-filter:blur(24px) saturate(140%)}
.modal-box h2{color:var(--acc-dk)}
.modal-box p{color:var(--sub)}
.modal-box p strong{color:var(--ink)}
.modal-box a{color:var(--acc-dk)!important}
.modal-close{color:var(--muted)}
.modal-close:hover{color:var(--ink)}

/* ── Schmal ── */
@media (max-width:900px){
  nav{padding:0 14px}
  .nav-tagline{display:none}
  .hero-video-overlay{background:
    linear-gradient(180deg,var(--veil3) 0%,var(--veil2) 40%,var(--veil2) 86%,var(--bg) 100%)}
}
@media (max-width:900px){.nav-links{display:none}}

/* Gedruckt wird hell und ohne Glas */
@media print{
  .theme-toggle,#particle-canvas,.hero-video-bg{display:none}
}