:root{
  --black:#0a0c0f;--black-2:#0f1318;--panel:#13181f;--panel-2:#171d26;
  --ice:#1E6FFF;--ice-dim:#3D8BFF;--ice-deep:#114FCF;
  --white:#f4f8fb;--grey:#8b97a6;--grey-dim:#5a6573;
  --line:rgba(30,111,255,.14);--line-soft:rgba(255,255,255,.06);
  --radius:14px;--maxw:560px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--black);color:var(--white);min-height:100vh;font-family:'Archivo',sans-serif;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased;position:relative}
.bg-layer{position:fixed;inset:0;z-index:-1;background:var(--black);background-image:radial-gradient(680px 420px at 50% -6%,rgba(30,111,255,.10),transparent 62%)}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}

/* ---------- HEADER ---------- */
.top{padding:42px 0 28px;text-align:center}
.avatar{width:96px;height:96px;border-radius:50%;object-fit:cover;border:1px solid var(--line);box-shadow:0 0 0 4px rgba(30,111,255,.08),0 14px 40px -14px var(--ice-deep);margin:0 auto 18px;display:block}
.brand{font-family:'Archivo Black',sans-serif;font-size:26px;text-transform:uppercase;letter-spacing:-.01em;line-height:1;margin-bottom:8px}
.brand .ice{color:var(--ice)}
.role{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--ice-deep);letter-spacing:.16em;text-transform:uppercase;margin-bottom:20px}
.claim{color:var(--grey);font-size:16px;max-width:420px;margin:0 auto;line-height:1.65}
.claim strong{color:var(--white);font-weight:700}

/* ---------- SHARED SECTION ---------- */
.sec{padding:26px 0}
.sec-num{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ice-deep);letter-spacing:.2em;text-transform:uppercase;margin-bottom:12px;display:block}
.sec-h{font-family:'Archivo Black',sans-serif;font-size:22px;text-transform:uppercase;letter-spacing:-.01em;line-height:1.1;margin-bottom:10px}
.sec-intro{color:var(--grey);font-size:15px;line-height:1.6;margin-bottom:20px}

/* ---------- BUTTONS (identisch zur Hauptseite) ---------- */
.btn-primary{background:var(--ice);color:#03131c;padding:17px 28px;border-radius:8px;font-weight:800;font-size:16px;display:flex;align-items:center;justify-content:center;gap:10px;border:none;cursor:pointer;box-shadow:0 0 0 1px rgba(30,111,255,.5),0 14px 40px -12px var(--ice-deep);transition:transform .22s,box-shadow .22s;font-family:'Archivo',sans-serif;width:100%;text-align:center}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 0 0 1px var(--ice),0 20px 50px -12px var(--ice-dim)}
.btn-ghost{display:flex;align-items:center;justify-content:center;background:transparent;color:var(--ice);border:1px solid var(--ice);padding:15px 24px;border-radius:8px;font-weight:700;font-size:15px;transition:background .2s,color .2s,transform .2s,border-color .2s;cursor:pointer;width:100%;text-align:center}
.btn-ghost:hover{background:rgba(30,111,255,.06);border-color:var(--ice);transform:translateY(-1px)}

/* ---------- HERO CTA (großer Primary-Block) ---------- */
.cta-card{background:linear-gradient(180deg,var(--panel),var(--black-2));border:1px solid var(--line);border-radius:var(--radius);padding:28px 24px;box-shadow:0 20px 60px -30px rgba(30,111,255,.4);position:relative;overflow:hidden}
.cta-card::before{content:"";position:absolute;inset:0;background:radial-gradient(420px 220px at 50% -10%,rgba(30,111,255,.14),transparent 70%);pointer-events:none}
.cta-in{position:relative;z-index:1}
.cta-eyebrow{font-family:'Archivo Black',sans-serif;font-size:19px;text-transform:uppercase;letter-spacing:-.01em;margin-bottom:10px;line-height:1.15}
.cta-eyebrow .ice{color:var(--ice)}
.cta-sub{color:var(--grey);font-size:14.5px;line-height:1.6;margin-bottom:20px}

/* ---------- SERVICE + PRODUKT KARTEN (tool-card System) ---------- */
.card-list{display:flex;flex-direction:column;gap:14px}
.tool-card{background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--radius);transition:transform .25s,border-color .25s,box-shadow .25s;display:flex;flex-direction:column}
.tool-card:hover{transform:translateY(-4px);border-color:var(--line);box-shadow:0 18px 48px -24px rgba(30,111,255,.35)}
.tool-body{padding:20px;display:flex;flex-direction:column;flex:1}
.tool-icon{font-size:26px;line-height:1;margin-bottom:12px}
.tool-name{font-family:'Archivo Black',sans-serif;font-size:16px;text-transform:uppercase;letter-spacing:-.005em;margin-bottom:5px}
.tool-desc{color:var(--grey);font-size:13.5px;line-height:1.55;margin-bottom:16px;flex:1}
.tool-btn{display:block;text-align:center;background:transparent;border:1px solid var(--line);color:var(--ice);padding:12px;border-radius:7px;font-weight:700;font-size:13px;transition:background .2s,border-color .2s}
.tool-btn:hover{background:rgba(30,111,255,.08);border-color:var(--ice)}

/* Produkt-Karte mit Cover (Werkzeuge) */
.prod-card{background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--radius);overflow:hidden;transition:transform .25s,border-color .25s,box-shadow .25s;display:flex;gap:0}
.prod-card:hover{transform:translateY(-4px);border-color:var(--line);box-shadow:0 18px 48px -24px rgba(30,111,255,.35)}
.prod-cover{width:104px;flex-shrink:0;aspect-ratio:1;object-fit:cover;background:var(--black)}
.prod-body{padding:16px 18px;display:flex;flex-direction:column;flex:1;min-width:0}
.prod-name{font-family:'Archivo Black',sans-serif;font-size:14.5px;text-transform:uppercase;letter-spacing:-.005em;margin-bottom:3px;line-height:1.15}
.prod-price{font-family:'JetBrains Mono',monospace;color:var(--ice);font-size:13px;margin-bottom:12px;font-weight:500}
.prod-btn{align-self:flex-start;margin-top:auto;background:transparent;border:1px solid var(--line);color:var(--ice);padding:9px 16px;border-radius:7px;font-weight:700;font-size:12.5px;transition:background .2s,border-color .2s}
.prod-btn:hover{background:rgba(30,111,255,.08);border-color:var(--ice)}

/* ---------- APP-BLOCK ---------- */
.app-card{background:linear-gradient(180deg,var(--panel),var(--black-2));border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px;position:relative;overflow:hidden}
.app-card::before{content:"";position:absolute;inset:0;background:radial-gradient(360px 200px at 100% 0,rgba(30,111,255,.12),transparent 68%);pointer-events:none}
.app-in{position:relative;z-index:1}
.app-badge{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ice);letter-spacing:.14em;text-transform:uppercase;margin-bottom:10px;display:inline-block;border:1px solid var(--line);padding:5px 11px;border-radius:20px}
.app-name{font-family:'Archivo Black',sans-serif;font-size:20px;text-transform:uppercase;letter-spacing:-.01em;margin-bottom:8px}
.app-text{color:var(--grey);font-size:14px;line-height:1.6;margin-bottom:18px}

/* ---------- SOCIAL ---------- */
.social-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.social-btn{background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--radius);padding:16px 8px;text-align:center;transition:transform .22s,border-color .22s,box-shadow .22s}
.social-btn:hover{transform:translateY(-3px);border-color:var(--line);box-shadow:0 14px 36px -22px rgba(30,111,255,.4)}
.social-btn .ic{font-size:20px;margin-bottom:6px;display:block}
.social-btn .lb{font-family:'Archivo',sans-serif;font-weight:700;font-size:12.5px;letter-spacing:.02em}

/* ---------- KONTAKT ---------- */
.contact-row{display:flex;flex-direction:column;gap:12px}

/* ---------- FOOT MARK (minimal, kein echter Footer) ---------- */
.endmark{text-align:center;padding:34px 0 40px;color:var(--grey-dim);font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase}


/* ---------- PLAYBOOKS ---------- */
.pb-selector{max-width:720px;margin:24px 0 20px}
.pb-selector label{display:block;font-family:'Archivo',sans-serif;font-size:13px;font-weight:700;color:var(--white);margin-bottom:8px}
.pb-select-wrap{position:relative}
.pb-select-wrap::after{content:"⌄";position:absolute;right:16px;top:50%;transform:translateY(-55%);color:var(--ice);font-size:18px;pointer-events:none}
.pb-select{width:100%;appearance:none;-webkit-appearance:none;background:var(--panel);border:1px solid var(--line);border-radius:9px;color:var(--white);padding:14px 46px 14px 15px;font:700 14px/1.35 'Archivo',sans-serif;cursor:pointer;transition:border-color .2s,box-shadow .2s}
.pb-select:focus{outline:none;border-color:var(--ice);box-shadow:0 0 0 3px rgba(30,111,255,.28)}
.pb-status{margin-top:9px;color:var(--grey);font-size:12.5px;line-height:1.45}
.pb-option[hidden],.pb-form-panel[hidden]{display:none!important}
.pb-option{max-width:760px}
.pb-card{background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--radius);overflow:hidden;transition:transform .25s,border-color .25s,box-shadow .25s;display:flex;flex-direction:column}
.pb-card:hover{transform:translateY(-3px);border-color:var(--line);box-shadow:0 18px 48px -24px rgba(30,111,255,.35)}
.pb-cover-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:14px;background:var(--black)}
.pb-cover-wrap{position:relative;background:var(--black);overflow:hidden}
.pb-cover-wrap.a4{aspect-ratio:210/297;border:1px solid var(--line-soft);border-radius:8px}
.pb-cover-wrap.square{aspect-ratio:1}
.pb-cover-wrap img{width:100%;height:100%;object-fit:cover;display:block}
.pb-cover-wrap.a4 img{object-fit:contain}
.pb-badge{position:absolute;top:10px;left:10px;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;letter-spacing:.09em;color:#03131c;background:var(--ice);padding:5px 10px;border-radius:6px;box-shadow:0 4px 14px -4px rgba(30,111,255,.7)}
.pb-body{padding:20px;display:flex;flex-direction:column;flex:1}
.pb-kicker{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ice);margin-bottom:8px}
.pb-title{font-family:'Archivo Black',sans-serif;font-size:18px;text-transform:uppercase;letter-spacing:-.005em;line-height:1.12;margin-bottom:6px}
.pb-subtitle{color:var(--ice);font-size:13.5px;font-weight:600;margin-bottom:12px}
.pb-desc{color:var(--grey);font-size:13.5px;line-height:1.58;margin-bottom:18px;flex:1}
.pb-btn{display:block;text-align:center;background:transparent;border:1px solid var(--line);color:var(--ice);padding:13px;border-radius:7px;font-weight:700;font-size:14px;transition:background .2s,border-color .2s;cursor:pointer;width:100%;font-family:'Archivo',sans-serif}
.pb-btn:hover,.pb-btn:focus-visible{background:rgba(30,111,255,.08);border-color:var(--ice)}

/* ---------- OPT-IN FORMULAR ---------- */
.optin-card{background:linear-gradient(180deg,var(--panel),var(--black-2));border:1px solid var(--line);border-radius:var(--radius);padding:28px 24px;position:relative;overflow:hidden;box-shadow:0 20px 60px -30px rgba(30,111,255,.4)}
.optin-card::before{content:"";position:absolute;inset:0;background:radial-gradient(420px 220px at 50% -10%,rgba(30,111,255,.12),transparent 70%);pointer-events:none}
.optin-in{position:relative;z-index:1}
.optin-h{font-family:'Archivo Black',sans-serif;font-size:19px;text-transform:uppercase;letter-spacing:-.01em;line-height:1.15;margin-bottom:10px}
.optin-h .ice{color:var(--ice)}
.optin-sub{color:var(--grey);font-size:14px;line-height:1.6;margin-bottom:20px}
.optin-note{color:var(--grey-dim);font-size:11.5px;line-height:1.55;margin-top:16px}
.optin-note a{color:var(--grey);text-decoration:underline;text-underline-offset:2px}

@media(min-width:600px){
  .pb-cover-grid{gap:16px;padding:20px}
  .pb-body{padding:24px}
  .pb-title{font-size:20px}
}

/* ---------- REVEAL (identisch zur Hauptseite) ---------- */
.js .reveal{opacity:0;transform:translateY(30px);transition:opacity .7s,transform .7s}
.reveal.in{opacity:1;transform:translateY(0)}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ---------- DESKTOP: Breite begrenzen, zentriert ---------- */
@media(min-width:600px){
  .top{padding:56px 0 30px}
  .avatar{width:104px;height:104px}
  .brand{font-size:30px}
  .social-btn{padding:20px 8px}
}

/* ===== Erweiterungen 08.08.2026 — Paket 5 ===== */
/* Kompakte Karten fuer Auslauf-Dienstleistungen (weniger Flaeche, gleicher Inhalt) */
.tool-card.mini .tool-body{padding:12px 16px}
.tool-card.mini .tool-icon{display:none}
.tool-card.mini .tool-name{font-size:13.5px;margin-bottom:2px}
.tool-card.mini .tool-desc{font-size:12px;margin-bottom:8px}
.tool-card.mini .tool-btn{padding:8px 12px;font-size:12px;align-self:flex-start}

/* Marker-Unterstreichung: statisch ohne JS/bei reduzierter Bewegung, gezeichnet mit */
.mark{position:relative;display:inline-block}
.mark::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:3px;background:var(--ice);transform:scaleX(1);transform-origin:left}
@media(prefers-reduced-motion:no-preference){
  .js .mark::after{transform:scaleX(0);transition:transform .6s ease .3s}
  .js .top .mark::after,.js .reveal.in .mark::after{transform:scaleX(1)}
  /* Gestaffeltes Reveal innerhalb einer Sektion — nur transform/opacity */
  .js .reveal .card-list>*,.js .reveal .social-grid>*{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s ease}
  .js .reveal.in .card-list>*,.js .reveal.in .social-grid>*{opacity:1;transform:none}
  .js .reveal.in .card-list>:nth-child(1),.js .reveal.in .social-grid>:nth-child(1){transition-delay:.05s}
  .js .reveal.in .card-list>:nth-child(2),.js .reveal.in .social-grid>:nth-child(2){transition-delay:.13s}
  .js .reveal.in .card-list>:nth-child(3),.js .reveal.in .social-grid>:nth-child(3){transition-delay:.21s}
  .js .reveal.in .card-list>:nth-child(4){transition-delay:.29s}
  .js .reveal.in .card-list>:nth-child(5){transition-delay:.37s}
  .js .reveal.in .card-list>:nth-child(6){transition-delay:.45s}
}