/* Lokale Fonts (Satoshi, self-hosted — ersetzt das fontshare-CDN; identische Familie/Schnitte) */
  @font-face{font-family:"Satoshi";src:url("/public/fonts/satoshi-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
  @font-face{font-family:"Satoshi";src:url("/public/fonts/satoshi-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;}
  @font-face{font-family:"Satoshi";src:url("/public/fonts/satoshi-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;}
  @font-face{font-family:"Satoshi";src:url("/public/fonts/satoshi-900.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap;}
  :root{
    --tc-blue:#0d5a93; --tc-blue-700:#0a4a7a; --cyan:#189EFF; --cyan-300:#6ec4ff;
    --navy:#0A2540; --navy-900:#061726; --paper:#efefef;
    --ink:#0f1b2d; --ink-2:#3a4a60; --muted:#5d6a7c;
    --green:#0fae73; --green-bg:rgba(15,174,115,.12);
    --amber:#e58a00; --amber-bg:rgba(229,138,0,.12);
    --red:#d8453b; --red-bg:rgba(216,69,59,.11);
    --line:rgba(13,40,70,.08);
    --glass:rgba(255,255,255,.66); --glass-strong:rgba(255,255,255,.84);
    --grad:linear-gradient(120deg,var(--tc-blue),var(--cyan));
    --radius:20px; --radius-sm:14px;
    --shadow-sm:0 1px 2px rgba(11,32,58,.04),0 4px 14px rgba(11,32,58,.05);
    --shadow:0 2px 6px rgba(11,32,58,.05),0 18px 50px -12px rgba(11,40,80,.16);
    --shadow-brand:0 14px 38px -10px rgba(13,90,147,.5);
    --fd:"Satoshi",system-ui,-apple-system,"Segoe UI",sans-serif;
    --fb:"Satoshi",system-ui,-apple-system,"Segoe UI",sans-serif;
  }
  *{box-sizing:border-box;}
  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
  .skip-link{position:fixed;left:12px;top:-60px;z-index:1000;background:var(--navy);color:#fff;padding:10px 16px;border-radius:10px;font-weight:700;text-decoration:none;box-shadow:0 6px 20px rgba(8,30,60,.35);transition:top .18s;}
  .skip-link:focus{top:12px;outline:2px solid #fff;outline-offset:2px;}
  html,body{height:100%;}
  body{
    margin:0; font-family:var(--fb); color:var(--ink); font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased;
    background:
      radial-gradient(120% 80% at 100% -10%, #e3effb 0%, rgba(227,239,251,0) 55%),
      radial-gradient(100% 70% at -10% 110%, #e8f4ff 0%, rgba(232,244,255,0) 50%),
      linear-gradient(180deg,#f2f6fb 0%, #eceff5 100%);
    position:relative; overflow-x:hidden;
  }
  body::before{content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
    background:
      radial-gradient(38% 55% at 20% 28%, rgba(13,90,147,.26), rgba(13,90,147,0) 70%),
      radial-gradient(34% 50% at 72% 18%, rgba(24,158,255,.24), rgba(24,158,255,0) 70%),
      radial-gradient(30% 45% at 50% 60%, rgba(45,212,191,.12), rgba(45,212,191,0) 70%);
    filter:blur(38px); opacity:.9; animation:drift 24s ease-in-out infinite alternate;}
  body::after{content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.03; mix-blend-mode:multiply;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
  @keyframes drift{0%{transform:translate3d(0,0,0) scale(1);}100%{transform:translate3d(-3%,2%,0) scale(1.08);}}

  .shell{position:relative; z-index:1; display:flex; min-height:100vh;}
  .hdr{position:sticky; top:0; z-index:20; padding:11px 0;
    background:rgba(244,247,251,.82); backdrop-filter:blur(18px) saturate(150%); -webkit-backdrop-filter:blur(18px) saturate(150%);
    border-bottom:1px solid rgba(13,40,70,.07);}
  .hdr-inner{padding:0 28px; display:flex; align-items:center; gap:14px;}
  .hdr-mobile{display:none; align-items:center; gap:10px;}
  .hdr-actions{margin-left:auto; display:flex; align-items:center; gap:12px;}
  .burger{display:none; background:rgba(13,40,70,.06); border:none; border-radius:10px; width:38px; height:38px; cursor:pointer; color:var(--ink); font-size:17px;}
  .ftr{max-width:1640px; margin:0 auto; width:100%; padding:22px 28px 30px; display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center; justify-content:space-between; color:var(--muted); font-size:13px; border-top:1px solid var(--line);}
  .ftr-links{display:flex; flex-wrap:wrap; gap:6px 12px; align-items:center;}
  .ftr-cr{display:inline-flex; align-items:center; gap:6px; white-space:nowrap;}
  .ftr-cr svg{width:14px; height:14px; color:var(--cyan);}
  .ftr a{color:var(--muted); text-decoration:none; cursor:pointer;} .ftr a:hover{color:var(--tc-blue);} .ftr .sep{opacity:.4;}
  .side-inner{position:sticky; top:0; height:100vh; overflow-y:auto; display:flex; flex-direction:column; padding:18px 14px 16px;}
  .navdot{margin-left:auto; margin-right:7px; width:9px; height:9px; border-radius:50%; background:var(--green); box-shadow:0 0 0 3px rgba(15,174,115,.25);}
  .hdr-title{font-family:var(--fd); font-weight:700; font-size:17px; color:var(--ink); display:flex; align-items:center; gap:7px;}
  .badge-prev img{height:46px; width:auto; border-radius:8px; background:#fff; border:1px solid var(--line); padding:3px;}
  .pitch{position:relative; overflow:hidden; background:linear-gradient(120deg,#0A2540,#0d5a93); color:#eaf4ff; border-radius:18px; padding:20px 24px; margin-bottom:16px; display:flex; gap:18px; align-items:center; flex-wrap:wrap; box-shadow:var(--shadow);}
  .pitch::before{content:""; position:absolute; width:240px; height:240px; right:-60px; top:-90px; border-radius:50%; background:radial-gradient(circle,rgba(56,200,255,.45),rgba(56,200,255,0) 65%); filter:blur(18px);}
  .pitch .q{position:relative; flex:1; min-width:260px; font-size:15.5px; line-height:1.55;} .pitch .q b{color:#fff;}
  .pitch .cp{position:relative; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.3); color:#fff; border-radius:11px; padding:11px 16px; font-weight:700; font-size:13.5px; cursor:pointer; white-space:nowrap; display:inline-flex; gap:7px; align-items:center;}
  /* Produkte: Pitch + Beispielrechnung nebeneinander */
  .pitch-row{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; align-items:stretch;}
  .pitch-row .pitch{margin-bottom:0; height:100%;}
  .calc{background:var(--glass-strong); border:1px solid rgba(255,255,255,.7); border-radius:18px; padding:16px 20px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column;}
  .calc h4{font-family:var(--fd); font-weight:700; font-size:16.5px; margin:0 0 12px; padding-bottom:11px; border-bottom:1px solid var(--line); color:var(--ink); display:flex; align-items:center; gap:8px;}
  .calc h4 svg{width:18px; height:18px; color:var(--amber);}
  .calc .sub2{font-size:12px; color:var(--muted); margin-bottom:6px;}
  .calc .tot{display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-top:10px; padding-top:10px; border-top:1.5px solid var(--line);}
  .calc .tot .l{font-family:var(--fd); font-weight:700; font-size:14px;}
  .calc .tot .v{font-family:var(--fd); font-weight:800; font-size:26px; color:var(--tc-blue); white-space:nowrap;}
  .calc .calc-foot{font-size:11.5px; color:var(--muted); margin-top:7px; line-height:1.45;}
  /* interaktiver Rechner: einzeilige Produktzeile + kompakter Stepper + Live-Zeilensumme */
  .calc-prod{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:4px 0;}
  .calc-fixed .cp-sum{color:var(--ink-2);}
  .cp-name{display:flex; align-items:center; gap:8px; min-width:0; font-size:13.5px; font-weight:700; color:var(--ink); white-space:nowrap;}
  .cp-name small{font-weight:500; color:var(--muted); font-size:12.5px;}
  /* Lizenz-Switcher (Monat/Jahr) */
  .liz-switch{display:inline-flex; border:1px solid var(--line); border-radius:7px; overflow:hidden; background:#fff; flex-shrink:0;}
  .liz-switch button{border:none; background:transparent; padding:2px 8px; font-family:var(--fb); font-size:10.5px; font-weight:700; color:var(--muted); cursor:pointer; transition:.14s;}
  .liz-switch button:hover{color:var(--tc-blue);}
  .liz-switch button.on{background:var(--tc-blue); color:#fff;}
  .cp-ctrl{display:flex; align-items:center; gap:11px; flex-shrink:0;}
  .calc-stepper{display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:999px; background:#fff; box-shadow:0 1px 3px rgba(13,40,70,.05); padding:1px;}
  .calc-stepper button{width:23px; height:23px; padding:0; border:none; border-radius:50%; background:transparent; color:var(--tc-blue); font-size:15px; font-weight:600; line-height:1; display:grid; place-items:center; cursor:pointer; transition:background .14s, transform .1s;}
  .calc-stepper button:hover{background:rgba(13,90,147,.1);}
  .calc-stepper button:active{transform:scale(.85);}
  .calc-stepper .num{min-width:22px; text-align:center; font-family:var(--fb); font-weight:700; font-size:13.5px; color:var(--ink); font-variant-numeric:tabular-nums;}
  .cp-sum{min-width:52px; text-align:right; font-family:var(--fd); font-weight:800; font-size:15px; color:var(--tc-blue); white-space:nowrap;}
  .cp-sum.zero{color:var(--muted);}
  .calc .tot .v, .cp-sum{display:inline-block; transform-origin:right center;}
  .bump{animation:calcbump .34s ease;}
  @keyframes calcbump{0%{transform:scale(1);}40%{transform:scale(1.16);}100%{transform:scale(1);}}
  /* linke Box: Icon-Titel + Belohnungs-Zeilen + Beispiel */
  .pitch-head{display:flex; align-items:center; gap:10px; font-family:var(--fd); font-weight:800; font-size:20px; color:#fff; margin-bottom:13px;}
  .pitch-head svg{width:21px; height:21px; color:#9fe0ff; flex-shrink:0;}
  .reward-row{display:flex; gap:12px; align-items:flex-start; margin-bottom:11px;}
  .reward-row .rw-ic{flex-shrink:0; width:32px; height:32px; border-radius:9px; background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.22); display:grid; place-items:center; font-family:var(--fd); font-weight:800; font-size:15px; color:#fff;}
  .reward-row .rw-ic svg{width:16px; height:16px; color:#fff;}
  .pitch-link{margin-top:auto; padding-top:12px; display:flex; align-items:center; gap:7px; font-size:12px; font-weight:600; color:#9fe0ff;}
  .pitch-link svg{width:15px; height:15px;}
  .reward-row b{display:block; color:#fff; font-size:14.5px;}
  .reward-row span{display:block; color:#cfe6ff; font-size:12px; line-height:1.4; margin-top:2px;}
  .ex-calc{position:relative; margin-top:4px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); border-radius:11px; padding:10px 13px; font-size:12.5px; color:#eaf4ff; line-height:1.5;} .ex-calc b{color:#9fe0ff;}
  /* Info-Fußnote (kein Kasten) */
  .infonote{display:flex; gap:8px; align-items:flex-start;} .infonote > svg{width:15px; height:15px; flex-shrink:0; margin-top:2px; color:var(--muted);}
  .beleg{display:inline-flex; align-items:center; gap:6px; color:var(--tc-blue); font-weight:700; text-decoration:none; font-size:13px; white-space:nowrap;}
  .beleg:hover{text-decoration:underline;}
  .beleg .pdf{width:15px; height:15px; color:var(--red); flex-shrink:0;}
  /* Einwilligungs-/AGB-Liste im Profil */
  .consent-row{display:flex; align-items:flex-start; gap:11px; padding:11px 0; border-bottom:1px dashed var(--line);}
  .consent-row:last-of-type{border-bottom:none; padding-bottom:2px;}
  .consent-row .ck{width:22px; height:22px; border-radius:50%; background:var(--green-bg); color:var(--green); display:grid; place-items:center; flex-shrink:0; margin-top:1px;}
  .consent-row .ck svg{width:13px; height:13px;}
  .consent-row .ct{flex:1; min-width:0;}
  .consent-row .ct b{font-size:13.5px; color:var(--ink);}
  .consent-row .ct small{color:var(--muted); font-weight:500; font-size:12px; margin-left:7px;}
  .consent-row .when{display:block; font-size:12px; color:var(--muted); margin-top:1px;}
  .consent-row .ver{font-family:var(--fb); font-weight:700; font-size:11.5px; color:var(--green); flex-shrink:0;}
  .consent-row .ck.info{background:rgba(13,90,147,.10); color:var(--tc-blue);}
  .consent-row .dlink{display:inline-block; margin-top:5px; font-size:12.5px; font-weight:700; color:var(--tc-blue); text-decoration:none;}
  .consent-row .dlink:hover{text-decoration:underline;}
  /* Verkaufsargumente: Produkt-Umschalter */
  .prodtabs{display:inline-flex; gap:4px; background:rgba(13,40,70,.05); border:1px solid var(--line); border-radius:11px; padding:4px; margin-bottom:16px;}
  .prodtabs button{border:none; background:transparent; padding:8px 16px; border-radius:8px; font-family:var(--fb); font-weight:700; font-size:13px; color:var(--ink-2); cursor:pointer; transition:color .16s, background .16s, box-shadow .16s; display:inline-flex; align-items:center; gap:7px;}
  .prodtabs button svg{width:15px; height:15px;}
  .prodtabs button:hover{color:var(--tc-blue);}
  .prodtabs button.on{background:#fff; color:var(--tc-blue); box-shadow:var(--shadow-sm);}
  /* Verkaufsargumente: kompakte Argument-Kacheln */
  .spcgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px;}
  .spc{position:relative; display:flex; flex-direction:column; padding:14px 15px; border-radius:13px; background:var(--glass-strong); border:1px solid rgba(255,255,255,.7); box-shadow:var(--shadow-sm);}
  .spc.wide{grid-column:1/-1;}
  .spc .h{display:flex; align-items:center; gap:10px; margin-bottom:8px;}
  .spc .ico{width:31px; height:31px; border-radius:9px; background:rgba(13,90,147,.10); color:var(--tc-blue); display:grid; place-items:center; flex-shrink:0;}
  .spc .ico svg{width:17px; height:17px;}
  .spc .h b{font-family:var(--fd); font-weight:600; font-size:14.5px; line-height:1.2;}
  .spc .chip{margin-left:auto; flex-shrink:0; font-size:10px; font-weight:700; letter-spacing:.3px; text-transform:uppercase; color:#b06a00; background:rgba(229,138,0,.14); border-radius:999px; padding:3px 9px;}
  .spc .say{font-size:13px; color:var(--ink-2); line-height:1.5; margin:0 0 11px;}
  .spc .copy{margin-top:auto; align-self:flex-start; font-size:12px; font-weight:700; color:var(--tc-blue); cursor:pointer; display:inline-flex; align-items:center; gap:6px;}
  .spc .copy:hover{text-decoration:underline;}
  .enable-note{display:flex; align-items:flex-start; gap:9px; font-size:12.5px; color:var(--ink-2); margin:14px 0 0; padding:11px 14px; background:rgba(13,90,147,.04); border:1px solid var(--line); border-radius:11px;}
  .enable-note svg{width:15px; height:15px; flex-shrink:0; margin-top:1px; color:var(--tc-blue);}
  /* Einwände als FAQ-Akkordeon */
  .faq{border:1px solid var(--line); border-radius:12px; background:#fff; overflow:hidden; margin-bottom:9px;}
  .faq summary{list-style:none; cursor:pointer; padding:13px 15px; display:flex; align-items:center; gap:11px; font-weight:600; font-size:13.8px; color:var(--ink);}
  .faq summary::-webkit-details-marker{display:none;}
  .faq .qico{width:26px; height:26px; border-radius:7px; background:rgba(13,90,147,.10); color:var(--tc-blue); display:grid; place-items:center; flex-shrink:0; font-weight:800; font-family:var(--fb); font-size:14px;}
  .faq .chev{margin-left:auto; flex-shrink:0; color:var(--muted); transition:transform .2s;}
  .faq[open] .chev{transform:rotate(180deg);}
  .faq .ans{padding:0 16px 14px 52px; font-size:13.3px; color:var(--ink-2); line-height:1.55;}
  .faq .ans .lbl{display:block; font-size:10.5px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:var(--tc-blue); margin-bottom:4px;}
  @media(max-width:900px){.spcgrid{grid-template-columns:repeat(2,1fr);}}
  @media(max-width:600px){.spcgrid{grid-template-columns:1fr;}}
  /* Partner-Vorteile / Marken-Kooperationen */
  .benefit-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:14px; margin-bottom:18px;}
  .benefit{display:flex; flex-direction:column; background:var(--glass-strong); border:1px solid rgba(255,255,255,.7); border-radius:16px; box-shadow:var(--shadow-sm); padding:18px;}
  .benefit .bh{display:flex; align-items:flex-start; gap:11px; margin-bottom:12px;}
  .benefit .bico{width:42px; height:42px; border-radius:12px; display:grid; place-items:center; flex-shrink:0; color:#fff;}
  .benefit .bico svg{width:21px; height:21px;}
  .benefit .bname{font-family:var(--fd); font-weight:600; font-size:15.5px; line-height:1.15;}
  .benefit .bcat{font-size:10.5px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--muted); margin-top:3px;}
  .benefit .kick{display:inline-flex; align-items:center; gap:5px; align-self:flex-start; margin:13px 0 0; font-family:var(--fb); font-weight:600; font-size:12px; color:var(--muted); background:none; padding:0;}
  .benefit .kick svg{width:12px; height:12px; color:var(--green);}
  .benefit .gets{display:flex; align-items:center; gap:8px; align-self:flex-start; font-size:14px; color:#0a7a52; font-weight:700; background:var(--green-bg); border-radius:10px; padding:9px 13px; margin:0 0 11px;}
  .benefit .gets svg{width:16px; height:16px; flex-shrink:0;}
  .benefit .bdesc{font-size:12.8px; color:var(--ink-2); line-height:1.5; margin:0 0 14px;}
  .benefit .bact{margin-top:auto;}
  .codebox2{display:flex; align-items:center; justify-content:space-between; gap:10px; background:#0A2540; border-radius:10px; padding:9px 9px 9px 13px; margin-bottom:8px;}
  .codebox2 code{font-family:var(--fb); font-weight:700; font-size:14.5px; letter-spacing:1.5px; color:#bfeaff;}
  .codebox2 button{border:none; background:rgba(255,255,255,.16); color:#fff; font-weight:700; font-size:12px; border-radius:7px; padding:6px 11px; cursor:pointer; white-space:nowrap; display:inline-flex; align-items:center; gap:5px; transition:background .15s;}
  .codebox2 button:hover{background:rgba(255,255,255,.3);}
  .codebox2 button svg{width:13px; height:13px;}
  .bnote{font-size:12.5px; color:var(--ink-2); font-style:italic; line-height:1.45; margin:0 0 12px;}
  .bcta{width:100%; justify-content:center; display:inline-flex; align-items:center; gap:8px; background:var(--grad); border:none; color:#fff; font-family:var(--fb); font-weight:700; font-size:14px; padding:12px 18px; border-radius:12px; cursor:pointer; box-shadow:var(--shadow-brand); transition:transform .18s, box-shadow .18s; text-decoration:none;}
  .bcta:hover{transform:translateY(-1px);}
  .bcta svg{width:16px; height:16px;}
  .field textarea{resize:vertical; min-height:84px;}
  .bcta-ghost{display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%; margin-top:8px; background:#fff; border:1.5px solid var(--line); color:var(--tc-blue); font-family:var(--fb); font-weight:700; font-size:13.5px; padding:11px 16px; border-radius:12px; cursor:pointer; transition:border-color .16s, background .16s; text-decoration:none;}
  .bcta-ghost:hover{border-color:var(--tc-blue); background:rgba(13,90,147,.05);}
  .bcta-ghost svg{width:15px; height:15px;}
  .benefit .bact .codebox2{margin-bottom:0;}
  .bf-bonus{display:inline-flex; align-items:center; gap:6px; margin-top:10px; font-family:var(--fb); font-weight:700; font-size:12.5px; color:var(--green); background:var(--green-bg); border-radius:999px; padding:5px 12px;}
  .bf-bonus svg{width:13px; height:13px;}
  .bf-bonus .amt{font-size:13.5px;}
  .rew-row{display:flex; gap:12px; flex-wrap:wrap; margin:8px 0 0;}
  .rew{display:flex; flex-direction:column; gap:3px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); border-radius:12px; padding:10px 16px; min-width:104px;}
  .rew .a{font-family:var(--fd); font-weight:800; font-size:25px; line-height:1; background:linear-gradient(90deg,#bfeaff,#6ec4ff); -webkit-background-clip:text; background-clip:text; color:transparent;}
  .rew .l{font-size:11.5px; color:#a9c8e6; font-weight:600;}
  /* Produkte-Seite: Partner-Vorteile-Teaser (Fokus Agentur-Verdienst) */
  .ptease{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px;}
  .pt{position:relative; display:flex; flex-direction:column; gap:5px; background:var(--glass-strong); border:1px solid rgba(255,255,255,.7); border-radius:14px; box-shadow:var(--shadow-sm); padding:16px; cursor:pointer; transition:transform .14s, box-shadow .14s, border-color .14s;}
  .pt:hover{transform:translateY(-2px); box-shadow:var(--shadow); border-color:rgba(13,90,147,.3);}
  .pt .pt-top{display:flex; align-items:center; gap:9px;}
  .pt .pt-ic{width:30px; height:30px; border-radius:8px; display:grid; place-items:center; color:#fff; flex-shrink:0;}
  .pt .pt-ic svg{width:17px; height:17px;}
  .pt .pt-nm{font-family:var(--fd); font-weight:700; font-size:14px;}
  .pt .pt-earn{font-family:var(--fd); font-weight:800; font-size:25px; line-height:1; color:var(--green);}
  .pt .pt-earn small{font-family:var(--fb); font-weight:600; font-size:12px; color:var(--muted); margin-left:5px;}
  .pt .pt-cust{font-size:12px; color:var(--ink-2); display:flex; align-items:center; gap:5px;}
  .pt .pt-cust svg{width:12px; height:12px; color:var(--green); flex-shrink:0;}
  .pt .pt-arrow{position:absolute; right:14px; top:15px; color:var(--muted); width:16px; height:16px;}
  .bk-seg{display:inline-flex; gap:4px; background:rgba(13,40,70,.05); border:1px solid var(--line); border-radius:11px; padding:4px;}
  .bk-seg button{flex:1; border:none; background:transparent; padding:9px 18px; border-radius:8px; font-family:var(--fb); font-weight:700; font-size:13.5px; color:var(--ink-2); cursor:pointer; transition:color .16s, background .16s, box-shadow .16s;}
  .bk-seg button:hover{color:var(--tc-blue);}
  .bk-seg button.on{background:#fff; color:var(--tc-blue); box-shadow:var(--shadow-sm);}
  .kbsteps{list-style:none; margin:0; padding:0; counter-reset:kb;}
  .kbsteps li{position:relative; counter-increment:kb; padding:1px 0 16px 40px; font-size:13px; color:var(--ink-2); line-height:1.5;}
  .kbsteps li:last-child{padding-bottom:0;}
  .kbsteps li b{color:var(--ink); font-weight:600;}
  .kbsteps li::before{content:counter(kb); position:absolute; left:0; top:-2px; width:27px; height:27px; border-radius:50%; background:rgba(13,90,147,.1); color:var(--tc-blue); font-family:var(--fb); font-weight:700; font-size:13px; display:grid; place-items:center;}
  .kbsteps li:not(:last-child)::after{content:""; position:absolute; left:13px; top:28px; bottom:0; width:2px; background:var(--line);}
  .kbtarget{background:rgba(24,158,255,.12); color:var(--tc-blue); font-weight:700; border-radius:5px; padding:1px 7px;}
  .bk-confirm-box{display:flex; align-items:flex-start; gap:10px; font-size:12.8px; color:var(--ink-2); line-height:1.45; background:rgba(13,40,70,.04); border:1px solid var(--line); border-radius:11px; padding:11px 13px; margin-bottom:16px; cursor:pointer; transition:border-color .15s, background .15s;}
  .bk-confirm-box:hover{border-color:var(--ink-2); background:rgba(13,40,70,.055);}
  .bk-confirm-box input{width:auto; margin:1px 0 0; flex-shrink:0; accent-color:var(--tc-blue); width:16px; height:16px;}
  @media(max-width:900px){.benefit-grid{grid-template-columns:1fr;}}
  /* Lead: mehrere Lizenz-Domains dynamisch */
  .domrow{display:flex; align-items:stretch; gap:8px;}
  .domrow input{flex:1;}
  .domrow .rm{flex-shrink:0; display:inline-flex; align-items:center; gap:7px; padding:0 15px; border:1.5px solid rgba(13,40,70,.12); background:#fff; border-radius:13px; color:var(--ink-2); cursor:pointer; font-family:var(--fb); font-size:13.5px; font-weight:600; white-space:nowrap; transition:border-color .16s, color .16s, background .16s;}
  .domrow .rm:hover{border-color:var(--red); color:var(--red); background:rgba(216,69,59,.06);}
  .domrow .rm svg{width:15px; height:15px;}
  .dnorm{font-size:12.5px; color:var(--muted); margin:5px 0 0 2px;}
  .dnorm b{color:var(--ink-2); font-family:var(--fb);}
  .domrow-wrap + .domrow-wrap{margin-top:10px;}
  .btn-adddom{display:inline-flex; align-items:center; gap:7px; background:rgba(13,90,147,.06); border:1px dashed rgba(13,90,147,.4); color:var(--tc-blue); font-weight:700; font-size:13px; padding:8px 14px; border-radius:9px; cursor:pointer; transition:background .16s, border-color .16s, border-style .16s;}
  .btn-adddom:hover{background:rgba(13,90,147,.11); border-style:solid;}
  .btn-adddom svg{width:15px; height:15px;}
  @media(max-width:760px){.pitch-row{grid-template-columns:1fr;}}
  .proof{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px 16px; padding:16px 20px; margin-bottom:20px; background:var(--glass-strong); border:1px solid rgba(255,255,255,.7); border-radius:14px; box-shadow:var(--shadow-sm);}
  .proof .pf{display:flex; align-items:center; gap:10px; min-width:0;}
  .proof .pf-ic{width:32px; height:32px; border-radius:9px; background:rgba(13,90,147,.08); color:var(--tc-blue); display:grid; place-items:center; flex-shrink:0;}
  .proof .pf-ic svg{width:17px; height:17px;}
  .proof .pf-tx{display:flex; flex-direction:column; min-width:0;}
  .proof .pf-tx b{font-family:var(--fd); color:var(--ink); font-size:16px; line-height:1.15;}
  .proof .pf-tx small{font-size:11.5px; color:var(--muted); line-height:1.25;}
  .sayit{background:rgba(13,90,147,.06); border-left:3px solid var(--cyan); border-radius:0 8px 8px 0; padding:9px 12px; font-size:13.5px; color:var(--ink-2); margin:0 0 11px; font-style:italic;}
  .obj{display:grid; grid-template-columns:1fr 1.45fr; border:1px solid var(--line); border-radius:13px; overflow:hidden; margin-bottom:10px; background:var(--glass-strong);}
  .obj .e{padding:13px 16px; background:rgba(229,138,0,.07); font-weight:600; font-size:14px; display:flex; align-items:center;}
  .obj .a{padding:13px 16px; font-size:14px; color:var(--ink-2);}
  @media(max-width:700px){.obj{grid-template-columns:1fr;}}
  .popwrap{position:relative;}
  .pop{position:absolute; right:0; top:48px; width:300px; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); padding:8px; display:none; z-index:60;}
  .pop.open{display:block; animation:rise .2s ease;}
  .pop h4{margin:6px 10px 8px; font-family:var(--fd); font-size:11.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.6px;}
  .pop .it{display:flex; gap:10px; padding:9px 10px; border-radius:10px; cursor:pointer; font-size:13.5px;}
  .pop .it:hover{background:#f4f7fb;} .pop .it b{font-weight:700;} .pop .it small{display:block; color:var(--muted);}
  .pop .it .d{width:8px; height:8px; border-radius:50%; margin-top:5px; flex-shrink:0;}
  .pop .mi{display:flex; align-items:center; gap:10px; padding:10px; border-radius:10px; cursor:pointer; font-weight:600; font-size:14px;}
  .pop .mi:hover{background:#f4f7fb;}
  .bal{background:var(--glass-strong); border:1px solid rgba(255,255,255,.75); border-radius:var(--radius); box-shadow:var(--shadow); padding:22px 26px; display:flex; align-items:center; gap:26px; flex-wrap:wrap;}
  .bal .lbl{font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:var(--muted);}
  .bal .big{font-family:var(--fd); font-weight:900; font-size:36px; color:var(--green); letter-spacing:-.6px; font-variant-numeric:tabular-nums; line-height:1; margin-top:3px;}
  .bal .thr{flex:1; min-width:180px;}
  .bal .thrbar{height:8px; border-radius:999px; background:rgba(13,40,70,.08); overflow:hidden; margin-top:8px;}
  .bal .thrbar i{display:block; height:100%; width:100%; background:linear-gradient(90deg,#16c98a,#0fae73);}
  .ic{width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0;}

  /* ---------- Sidebar ---------- */
  .side{width:262px; flex-shrink:0; align-self:stretch; color:#bcd0e6;
    background:linear-gradient(168deg, rgba(13,42,70,.99), rgba(6,23,38,1)); border-right:1px solid rgba(255,255,255,.07);}
  .side::-webkit-scrollbar{width:0;}
  .brand{display:flex; align-items:center; gap:11px; margin:0 -14px 12px; padding:2px 18px 14px; border-bottom:1px solid rgba(255,255,255,.08);}
  .logo-svg{height:20px; width:auto; display:block;}
  .brand .bt{font-family:var(--fd); font-weight:700; color:#fff; font-size:19px; letter-spacing:.2px; line-height:1.05;}
  .brand b{font-family:var(--fd); font-weight:700; color:#fff; font-size:18px; letter-spacing:-.2px;}
  .brand .bt small{display:block; color:#6f88a6; font-size:10px; font-weight:600; letter-spacing:1.3px; text-transform:uppercase;}
  .nav-group{margin:0 0 4px;}
  .nav-group + .nav-group{margin-top:16px;}
  .nav-label{font-size:10.5px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:#5f7a98; padding:11px 12px 4px 7px;}
  .nav a{display:flex; align-items:center; gap:12px; padding:9px 12px; border-radius:11px; color:#aec1d6; text-decoration:none; font-weight:500; font-size:14.5px; cursor:pointer; position:relative; transition:all .16s cubic-bezier(.2,.7,.2,1);}
  .nav a .pill{margin-left:auto; font-size:11px; font-weight:700; padding:1px 8px; border-radius:999px; background:rgba(255,255,255,.1); color:#cdddf0;}
  .nav a .pill.prog{background:rgba(24,158,255,.2); color:#9fd4ff;}
  .nav a:hover{background:rgba(255,255,255,.05); color:#fff;}
  .nav a.active{color:#fff; background:rgba(24,158,255,.12);}
  .nav a.active::before{content:""; position:absolute; left:-14px; top:7px; bottom:7px; width:3px; border-radius:0 3px 3px 0; background:var(--grad); box-shadow:0 0 12px rgba(24,158,255,.7);}
  .side .foot{margin-top:auto; padding-top:14px;}
  .tier{border-radius:14px; padding:12px 13px; margin-bottom:12px; color:#eaf4ff; text-align:center; background:linear-gradient(135deg, var(--tc-blue), var(--tc-blue-700)); border:1px solid rgba(255,255,255,.12); box-shadow:inset 0 1px 0 rgba(255,255,255,.15);}
  .tier .top{font-family:var(--fd); font-weight:600; font-size:13.5px;}
  .tier .sub{font-size:11.5px; color:#bcd6ef; margin:2px 0 0;}
  .tier .bar{height:6px; border-radius:999px; background:rgba(255,255,255,.18); overflow:hidden;}
  .tier .bar i{display:block; height:100%; width:73%; border-radius:999px; background:linear-gradient(90deg,#9fe0ff,#fff);}
  .acct{display:flex; align-items:center; gap:10px; padding:2px 8px; color:#cdddf0;}
  .acct .av{width:32px; height:32px; border-radius:10px; background:linear-gradient(135deg,var(--cyan),var(--tc-blue)); display:flex; align-items:center; justify-content:center; color:#fff; font-family:var(--fd); font-weight:700; font-size:13px;}
  .acct .nm{font-size:13px; font-weight:600; color:#fff; line-height:1.2;}
  .acct .nm small{display:block; color:#7d96b3; font-weight:500;}

  /* ---------- Main ---------- */
  .main{flex:1; min-width:0; display:flex; flex-direction:column;}
  .topbar{position:sticky; top:14px; z-index:6; display:flex; align-items:center; gap:14px; padding:11px 16px; border-radius:18px; margin-bottom:20px;
    background:var(--glass); backdrop-filter:blur(18px) saturate(150%); -webkit-backdrop-filter:blur(18px) saturate(150%);
    border:1px solid rgba(255,255,255,.7); box-shadow:var(--shadow-sm);}
  .search{flex:1; max-width:340px; display:flex; align-items:center; gap:9px; padding:9px 13px; border-radius:11px; background:rgba(13,40,70,.05); color:var(--muted); font-size:14px;}
  .search .kbd{margin-left:auto; font-size:11px; font-weight:700; background:#fff; border:1px solid var(--line); border-radius:6px; padding:1px 6px; color:var(--muted);}
  .tb-chip{display:flex; align-items:center; gap:10px; padding:5px 5px 5px 13px; border-radius:12px; background:rgba(15,174,115,.1); border:1px solid rgba(15,174,115,.2); cursor:pointer;}
  .tb-chip .lbl{font-size:11px; color:var(--muted); font-weight:600; line-height:1;}
  .tb-chip .v{font-family:var(--fd); font-weight:700; color:var(--green); font-size:15px; line-height:1.1;}
  .tb-chip .go{background:var(--green); color:#fff; border-radius:8px; padding:5px 9px; font-size:12px; font-weight:700;}
  .tb-spacer{flex:1;}
  .btn-werben{display:flex; align-items:center; gap:7px; border:none; cursor:pointer; border-radius:12px; padding:10px 16px; color:#fff; font-family:var(--fb); font-weight:700; font-size:14px; background:var(--grad); box-shadow:var(--shadow-brand); transition:.18s;}
  .btn-werben:hover{transform:translateY(-1px);}
  .tb-ico{width:38px; height:38px; border-radius:11px; display:grid; place-items:center; cursor:pointer; color:var(--ink-2); background:rgba(13,40,70,.05); position:relative;}
  .tb-ico .dot{position:absolute; top:8px; right:9px; width:7px; height:7px; border-radius:50%; background:var(--cyan); box-shadow:0 0 0 2px #fff;}
  .tb-acct{display:flex; align-items:center; gap:7px; cursor:pointer; padding:4px 8px 4px 4px; border-radius:11px;}
  .tb-acct{padding:3px 6px 3px 4px; border-radius:12px;} .tb-acct:hover{background:rgba(13,40,70,.05);}
  .tb-acct .av{width:36px; height:36px; border-radius:11px; background:linear-gradient(135deg,var(--cyan),var(--tc-blue)); color:#fff; display:grid; place-items:center; font-family:var(--fd); font-weight:700; font-size:14px;}

  .content{max-width:1640px; margin:0 auto; width:100%; padding:26px 28px 50px;}
  h1.page{font-family:var(--fd); font-weight:700; font-size:26px; letter-spacing:-.2px; margin:4px 0 4px;}
  .sub{color:var(--ink-2); margin:0 0 22px; font-size:15px;}
  .sec-h{display:flex; align-items:center; gap:16px; margin:46px 2px 14px;}
  .sec-h h2{font-family:var(--fd); font-weight:600; font-size:15px; letter-spacing:.4px; text-transform:uppercase; color:var(--ink-2); margin:0; white-space:nowrap;}
  .sec-h .ln{flex:1; height:1px; background:var(--line);}

  .badge{display:inline-flex; align-items:center; gap:7px; padding:4px 11px; border-radius:999px; font-size:12.5px; font-weight:700;}
  .b-verified,.b-payable{background:var(--green-bg); color:var(--green);}
  .b-pending{background:rgba(24,158,255,.12); color:#176fb8;}
  .b-year{background:var(--amber-bg); color:#b06a00;}
  .b-paid{background:rgba(13,40,70,.07); color:#5a6d84;}
  .b-reversed{background:var(--red-bg); color:#c0392b;}
  .b-unmatched{background:var(--amber-bg); color:#b06a00;}
  .dot7{width:7px; height:7px; border-radius:50%; display:inline-block;}

  .card{background:var(--glass); backdrop-filter:blur(20px) saturate(150%); -webkit-backdrop-filter:blur(20px) saturate(150%); border:1px solid rgba(255,255,255,.7); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden;}
  .card .hd{padding:16px 20px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between;}
  .card .hd h3{margin:0; font-family:var(--fd); font-weight:600; font-size:16px;}
  .card .hd a{color:var(--tc-blue); font-size:13px; font-weight:700; text-decoration:none; cursor:pointer;}
  .card .bd{padding:10px;}

  /* ---------- Bento Dashboard ---------- */
  .bento{display:grid; grid-template-columns:1.55fr 1fr; gap:16px; margin-bottom:16px;}
  .earn{display:flex; flex-direction:column; gap:14px;}
  .pay-hero{position:relative; overflow:hidden; border-radius:var(--radius); padding:24px 26px; color:#fff; background:var(--grad); box-shadow:var(--shadow-brand);}
  .pay-hero::after{content:""; position:absolute; width:220px; height:220px; right:-60px; top:-80px; border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.25),rgba(255,255,255,0) 65%);}
  .pay-hero .lbl{font-size:12.5px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:rgba(255,255,255,.85);}
  .pay-hero .v{font-family:var(--fd); font-weight:900; font-size:40px; letter-spacing:-.8px; margin:8px 0 2px; line-height:1; font-variant-numeric:tabular-nums;}
  .pay-hero .hero-sub{position:relative; opacity:.9; font-size:13.5px; margin-top:2px;}
  .hero-actions{position:relative; display:flex; gap:10px; margin-top:18px; flex-wrap:wrap;}
  .pay-hero .btn{display:inline-flex; align-items:center; gap:8px; border-radius:12px; padding:11px 18px; font-family:var(--fb); font-weight:700; font-size:14px; cursor:pointer; border:1px solid transparent; transition:.16s;}
  .pay-hero .btn.primary{background:#fff; color:var(--tc-blue); box-shadow:0 6px 16px rgba(8,25,45,.18);}
  .pay-hero .btn.primary:hover{transform:translateY(-1px);}
  .pay-hero .btn.ghost{background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.45); color:#fff; backdrop-filter:blur(6px);}
  .pay-hero .btn.ghost:hover{background:rgba(255,255,255,.24);}
  .pay-hero .btn.locked{background:rgba(255,255,255,.12); color:rgba(255,255,255,.62); border-color:rgba(255,255,255,.22); cursor:not-allowed;}
  .mini2{display:grid; grid-template-columns:1fr 1fr; gap:14px; flex:1;}
  .mini{background:var(--glass-strong); border:1px solid rgba(255,255,255,.75); border-radius:var(--radius-sm); padding:16px 18px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; justify-content:center;}
  .mini .lbl{color:var(--muted); font-size:12px; font-weight:700; letter-spacing:.3px; text-transform:uppercase;}
  .mini .v{font-family:var(--fd); font-weight:700; font-size:23px; margin-top:5px; font-variant-numeric:tabular-nums;}
  .mini .h{font-size:11.5px; color:var(--muted); margin-top:3px;}
  .kpirow{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:2px 0 20px;}
  .kpirow .mini .v{font-size:32px; line-height:1.05; margin-top:6px; letter-spacing:-.6px;}
  .kpirow .mini .h{margin-top:5px;}
  .kpi-top{display:flex; align-items:center; gap:9px; margin-bottom:4px;}
  .kpi-top .lbl{margin:0;}
  .kpi-ic{width:30px; height:30px; border-radius:9px; display:grid; place-items:center; flex-shrink:0;}
  .kpi-ic svg{width:16px; height:16px;}
  .k-blue .kpi-ic{background:rgba(13,90,147,.1); color:var(--tc-blue);}  .k-blue .v{color:var(--tc-blue);}
  .k-cyan .kpi-ic{background:rgba(24,158,255,.13); color:#1786d8;}       .k-cyan .v{color:#1786d8;}
  .k-green .kpi-ic{background:var(--green-bg); color:var(--green);}      .k-green .v{color:var(--green);}
  .k-amber .kpi-ic{background:var(--amber-bg); color:#b06a00;}           .k-amber .v{color:#b06a00;}
  @media(max-width:760px){.kpirow{grid-template-columns:1fr 1fr;}}
  .side-cards{display:flex; flex-direction:column; gap:16px;}
  .scard{background:var(--glass-strong); border:1px solid rgba(255,255,255,.75); border-radius:var(--radius); padding:18px 20px; box-shadow:var(--shadow); flex:1;}
  /* Level-Card (Dashboard, volle Spaltenhöhe) */
  .levelcard{flex:1; display:flex; flex-direction:column; background:var(--glass-strong); border:1px solid rgba(255,255,255,.75); border-radius:var(--radius); padding:18px 20px; box-shadow:var(--shadow);}
  .levelcard .lvl-head{display:flex; align-items:center; justify-content:space-between; gap:10px;}
  .levelcard .lbl{color:var(--muted); font-size:12px; font-weight:700; letter-spacing:.3px; text-transform:uppercase;}
  .levelcard .hero-row{display:flex; align-items:center; gap:15px; margin:12px 0 14px;}
  .levelcard .hero-row img{height:76px; width:auto;}
  .levelcard .nm{font-family:var(--fd); font-weight:700; font-size:18px; line-height:1.1;}
  .lvl-ladder{margin-top:auto; padding-top:13px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:10px;}
  .lvl-step{display:flex; align-items:center; gap:9px; font-size:13px; color:var(--muted);}
  .lvl-step svg{width:15px; height:15px; flex-shrink:0;}
  .lvl-step.done{color:var(--ink); font-weight:600;} .lvl-step.done svg{color:var(--green);}
  .lvl-step .meta2{margin-left:auto; font-size:11px; color:var(--muted); font-weight:500;}
  .lvl-step.premium{color:#9a5b00; font-weight:600;} .lvl-step.premium svg{color:#d18700;} .lvl-step.premium .meta2{color:#b06a00; font-weight:700;}
  .levelcard .lnk{font-size:12.5px; font-weight:700; color:var(--tc-blue); cursor:pointer; white-space:nowrap;}
  .scard .t{display:flex; align-items:center; gap:9px; font-family:var(--fd); font-weight:600; font-size:15px;}
  .scard .t .ico-badge{width:30px; height:30px; border-radius:9px; display:grid; place-items:center; color:#fff; background:var(--grad);}
  .scard .meta{font-size:12.5px; color:var(--muted);}
  .scard .lnk{margin-top:10px; font-size:13px; font-weight:700; color:var(--tc-blue); cursor:pointer;}
  .lvlbar{height:7px; border-radius:999px; background:rgba(13,40,70,.08); overflow:hidden; margin:13px 0 8px;}
  .lvlbar i{display:block; height:100%; border-radius:999px; background:var(--grad);}
  .badge-prev{display:flex; gap:8px; margin-top:10px;}

  .recurring{position:relative; overflow:hidden; border-radius:var(--radius); padding:22px 26px; margin-bottom:8px; color:#eaf4ff;
    background:linear-gradient(120deg,#0A2540 0%, #0d3a63 55%, #0d5a93 100%); border:1px solid rgba(255,255,255,.1);
    box-shadow:0 24px 56px -18px rgba(8,30,60,.55), inset 0 1px 0 rgba(255,255,255,.12); display:flex; align-items:center; gap:22px;}
  .recurring::before{content:""; position:absolute; width:280px; height:280px; right:-60px; top:-110px; border-radius:50%; background:radial-gradient(circle,rgba(56,200,255,.5),rgba(56,200,255,0) 65%); filter:blur(20px);}
  .recurring .rec-lbl{position:relative; font-size:11.5px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:#9fc6e8; margin-bottom:2px;}
  .recurring .big{position:relative; font-family:var(--fd); font-weight:800; font-size:40px; line-height:1.05; letter-spacing:-1px; white-space:nowrap; background:linear-gradient(90deg,#bfeaff,#6ec4ff); -webkit-background-clip:text; background-clip:text; color:transparent;}
  .recurring .big .per{font-size:18px; font-weight:700; letter-spacing:0; margin-left:4px;}
  .recurring .txt{position:relative;} .recurring .txt b{font-family:var(--fd); font-weight:600; color:#fff;} .recurring .txt small{color:#a9c8e6; font-size:13.5px;}
  .recurring .rew-head{position:relative; font-family:var(--fd); font-weight:800; font-size:23px; line-height:1.1; letter-spacing:-.4px; color:#fff; margin-bottom:6px;}

  /* chart + grids */
  .grid-2{display:grid; grid-template-columns:1.7fr 1fr; gap:16px;}

  .row{display:flex; align-items:center; gap:14px; padding:13px 14px; border-radius:13px; cursor:pointer; transition:.16s;}
  .row:hover{background:rgba(255,255,255,.7); box-shadow:var(--shadow-sm);}
  .row .rico{width:38px; height:38px; border-radius:11px; display:grid; place-items:center; font-family:var(--fd); font-weight:700; flex-shrink:0; background:linear-gradient(150deg,#eaf3fb,#dceaf8); color:var(--tc-blue);}
  .row .nm{flex:1; min-width:0;} .row .nm b{display:block;} .row .nm small{color:var(--muted); font-size:13px;}
  .row .amt{font-family:var(--fd); font-weight:700; white-space:nowrap; text-align:right; font-variant-numeric:tabular-nums;}
  .row .amt small{display:block; font-family:var(--fb); font-weight:500; color:var(--muted); font-size:12px;}
  .seg{display:inline-flex; gap:5px; background:rgba(13,40,70,.05); border-radius:12px; padding:5px; margin-bottom:16px;}
  .seg span{padding:7px 14px; border-radius:9px; font-size:13.5px; font-weight:700; color:var(--muted); cursor:pointer; transition:.15s;}
  .seg span.on{background:#fff; color:var(--ink); box-shadow:var(--shadow-sm);}
  .ver{display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:700; color:var(--tc-blue); background:rgba(13,90,147,.08); border-radius:7px; padding:3px 9px; margin-right:12px; white-space:nowrap;}
  /* Shops: Kopf mit Sprung-Ankern + tabellarische Rows */
  .shops-head{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:16px;}
  .shops-jump{display:flex; gap:8px; flex-shrink:0;}
  .shops-jump a{display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; color:var(--ink-2); background:rgba(13,40,70,.05); border:1px solid var(--line); border-radius:10px; padding:7px 13px; cursor:pointer; transition:.15s; text-decoration:none;}
  .shops-jump a:hover{border-color:var(--cyan); color:var(--tc-blue);}
  .shops-jump a .c{color:var(--muted); font-weight:600;}
  #shops .card .bd .row{display:grid; grid-template-columns:40px minmax(0,1fr) 150px 110px; column-gap:14px; align-items:center;}
  #shops .card .bd .row .badge{justify-self:start; margin:0 !important;}
  #shops .card .bd .row .ver{justify-self:start; margin:0;}
  #shops .card .bd .row .amt{justify-self:end;}
  #shops .row.thead{padding:2px 14px 9px; cursor:default; font-size:10.5px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:var(--muted); border-bottom:1px solid var(--line); border-radius:0;}
  #shops .row.thead:hover{background:none;}
  #shops .row.thead .e{justify-self:end;}
  #shops .card .bd .row.addrow{display:flex; justify-content:center; gap:8px; cursor:default; color:var(--tc-blue); font-weight:700;}
  @media(max-width:760px){#shops .card .bd .row{display:flex; flex-wrap:wrap; gap:6px 12px;} #shops .card .bd .row.thead{display:none;}}
  .portfolio-note{display:flex; align-items:flex-start; gap:11px; background:rgba(13,90,147,.06); border:1px solid rgba(13,90,147,.14); border-radius:14px; padding:13px 16px; margin-bottom:14px; font-size:13.5px; color:var(--ink-2); line-height:1.5;}

  table{width:100%; border-collapse:collapse;}
  th{text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); font-weight:700; padding:13px 18px; border-bottom:1px solid var(--line);}
  td{padding:14px 18px; border-bottom:1px solid rgba(13,40,70,.05);} tr:last-child td{border-bottom:none;}
  td.num,th.num{text-align:right; font-variant-numeric:tabular-nums;} tbody tr:hover{background:rgba(255,255,255,.5);}
  .neg{color:var(--red); font-weight:700;} tfoot td{font-family:var(--fd);}
  .alert.urgent{border-color:rgba(216,69,59,.32); background:rgba(216,69,59,.07);}
  .alert.urgent > svg{color:var(--red);}
  .alert.urgent textarea{background:rgba(255,255,255,.85);}
  /* Shop-Detail: Status-Buckets + Auszahlungs-Trennzeile */
  .shop-buckets{display:flex; flex-wrap:wrap; gap:8px; padding:12px 18px 2px;}
  .shop-buckets .bk{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; border-radius:999px; padding:5px 12px;}
  .shop-buckets .bk b{font-variant-numeric:tabular-nums;}
  .bk-paid{background:rgba(13,40,70,.07); color:#5a6d84;}
  .bk-pay{background:var(--green-bg); color:var(--green);}
  .bk-pend{background:rgba(24,158,255,.12); color:#176fb8;}
  .bk-rev{background:var(--red-bg); color:#c0392b;}
  .paydiv td{padding:7px 18px; background:var(--green-bg); color:var(--green); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; border-top:1px dashed rgba(46,178,123,.45); border-bottom:1px dashed rgba(46,178,123,.45);}
  .paydiv td .pd-r{float:right; font-variant-numeric:tabular-nums;}
  /* Shops-Tabelle (mehrspaltig, einzeilig) */
  .shops-note{font-size:13px; color:var(--muted); margin:-4px 2px 12px; line-height:1.5;} .shops-note b{color:var(--ink-2);}
  .sec-h .cnt2{font-family:var(--fb); font-weight:700; font-size:14px; color:var(--tc-blue); text-transform:none; letter-spacing:0;}
  .shoptab td{padding:11px 14px; vertical-align:middle; font-size:13.5px; white-space:nowrap;}
  .shoptab th{padding:9px 14px;}
  .shoptab td.ico{width:50px; padding-right:0;}
  .shoptab .rico{width:34px; height:34px; border-radius:9px; display:grid; place-items:center; font-family:var(--fd); font-weight:700; font-size:13px; background:linear-gradient(150deg,#eaf3fb,#dceaf8); color:var(--tc-blue);}
  .shoptab .dom{font-family:var(--fb); font-weight:700; color:var(--ink);}
  .shoptab td.r,.shoptab th.r{text-align:right;}
  .shoptab .amt{font-family:var(--fd); font-weight:700; font-variant-numeric:tabular-nums;}
  .shoptab .amt .sm{font-family:var(--fb); font-weight:500; color:var(--muted); font-size:12px;}
  .shoptab .mut{color:var(--muted);}
  .shoptab .ver{margin:0;}
  .shoptab tbody tr{cursor:pointer;}
  .shoptab .addrow td{text-align:center; color:var(--tc-blue); font-weight:700; cursor:pointer;}
  .shoptab .addrow svg{vertical-align:-3px; margin-right:5px;}
  .shoptab .addrow:hover td{background:rgba(24,158,255,.07);}
  @media(max-width:760px){.shoptab .hide-sm{display:none;} .shoptab td,.shoptab th{white-space:normal; padding:9px 8px;} .shoptab td.ico,.shoptab th.ico{display:none;} .shoptab .amt .sm{display:none;}}
  /* Kunden-Gruppierung: Kundenkopf + Domain-Zeilen darunter */
  .shoptab .cust-head td{background:rgba(13,90,147,.05); border-top:1px solid var(--line);}
  .shoptab .cust-head:first-child td, .shoptab tbody tr.cust-head:first-of-type td{border-top:none;}
  .shoptab .cust-name{font-family:var(--fd); font-weight:700; color:var(--ink); font-size:14px;}
  .shoptab .cust-name small{font-family:var(--fb); font-weight:500; color:var(--muted); font-size:12px;}
  .shoptab .dom-row .dom{font-weight:600;}
  .shoptab .dom-row .dom .arr{color:var(--muted); margin-right:7px;}
  .shoptab .dom small.csub{display:block; font-family:var(--fb); font-weight:500; color:var(--muted); font-size:12px; margin-top:1px;}
  /* Tabellen-Toolbar (Suche/Filter) + Pagination */
  .tbar{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:12px;}
  .tbar-search{position:relative; flex:1; min-width:200px;}
  .tbar-search svg{position:absolute; left:12px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--muted);}
  .tbar-search input{width:100%; padding:9px 12px 9px 36px; border:1.5px solid rgba(13,40,70,.12); border-radius:11px; font-size:14px; font-family:var(--fb); background:rgba(255,255,255,.85);}
  .tbar select{-webkit-appearance:none; -moz-appearance:none; appearance:none; padding:9px 34px 9px 13px; border:1.5px solid rgba(13,40,70,.12); border-radius:11px; font-size:13.5px; font-family:var(--fb); background:rgba(255,255,255,.85) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236a7787' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 11px center / 15px; cursor:pointer; color:var(--ink);}
  .pager{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; padding:13px 4px 2px;}
  .pager .pinfo{font-size:13px; color:var(--muted);}
  .pager .pbtns{display:flex; gap:6px; flex-wrap:wrap;}
  .pager .pbtns button{min-width:32px; height:32px; padding:0 9px; border:1px solid var(--line); background:#fff; border-radius:9px; font-size:13px; font-weight:600; color:var(--ink-2); cursor:pointer; font-family:var(--fb);}
  .pager .pbtns button:hover:not(:disabled){border-color:var(--tc-blue); color:var(--tc-blue);}
  .pager .pbtns button.on{background:var(--tc-blue); border-color:var(--tc-blue); color:#fff;}
  .pager .pbtns button:disabled{opacity:.4; cursor:default;}
  .more-trigger{text-align:center; color:var(--tc-blue); font-weight:700; font-size:12.5px; padding:11px; cursor:pointer; transition:background .14s;}
  .more-trigger:hover{background:rgba(24,158,255,.06);}
  .more-trigger.loading{color:var(--muted); cursor:default; background:transparent;}
  /* Detail: Buchungs-Gruppe je Domain */
  .bookgrp td{background:rgba(13,90,147,.05); font-family:var(--fd); font-weight:700; font-size:11.5px; color:var(--ink-2); text-transform:uppercase; letter-spacing:.3px; padding:8px 14px; border-top:1px solid var(--line);}
  .bookgrp td small{font-family:var(--fb); font-weight:500; text-transform:none; letter-spacing:0; color:var(--muted);}

  .formula{display:flex; align-items:center; gap:10px; flex-wrap:wrap; background:linear-gradient(120deg,rgba(13,90,147,.07),rgba(24,158,255,.06)); border:1px solid rgba(13,90,147,.15); border-radius:13px; padding:13px 18px; margin:14px 18px; color:var(--ink-2); font-size:14px;}
  .formula b{color:var(--ink);} .formula .op{color:var(--tc-blue); font-family:var(--fd); font-weight:700;}

  /* stepper */
  .stepper{display:flex; padding:26px 22px 8px;}
  .step{flex:1; text-align:center; position:relative;}
  .step .c{width:30px; height:30px; border-radius:50%; background:#e2e9f1; color:#94a3b4; margin:0 auto 9px; display:grid; place-items:center; font-family:var(--fd); font-weight:700; font-size:13px; position:relative; z-index:2;}
  .step.done .c{background:linear-gradient(135deg,#16c98a,#0fae73); color:#fff;}
  .step.now .c{background:var(--grad); color:#fff; box-shadow:0 0 0 5px rgba(24,158,255,.18);}
  .step .t{font-size:13px; font-weight:700;} .step .t small{display:block; color:var(--muted); font-weight:500;}
  .step::before{content:""; position:absolute; top:15px; left:-50%; width:100%; height:2px; background:#e2e9f1; z-index:1;}
  .step:first-child::before{display:none;} .step.done::before,.step.now::before{background:linear-gradient(90deg,#16c98a,var(--cyan));}

  /* Rückbuchung: Storno-Zeile geblurrt, Button mittig als Overlay über die ganze Zeile */
  tr.rev-row{position:relative; cursor:pointer;}
  .rev-dim{filter:blur(1.6px); opacity:.5; pointer-events:none; transition:filter .25s, opacity .25s;}
  tr.rev-row.rev-resolved .rev-dim, tr.rev-row.rev-open .rev-dim{filter:none; opacity:1;}   /* offen oder erledigt → scharf */
  .rev-overlay{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:3; pointer-events:none;}
  .rev-overlay .rev-act{pointer-events:auto;}
  tr.rev-row.rev-open .rev-overlay{display:none;}                                            /* aufgeklappt → Button weg */
  .rev-act{display:inline-flex; align-items:center; gap:8px; padding:9px 18px; border:1.5px solid var(--red); border-radius:11px; background:#fff; color:var(--red); font-family:var(--fb); font-weight:700; font-size:13px; cursor:pointer; white-space:nowrap; box-shadow:0 4px 14px rgba(216,69,59,.18); transition:transform .16s, background .16s, color .16s; animation:revbtnpulse 1.9s infinite;}
  .rev-act:hover{background:var(--red); color:#fff; transform:translateY(-1px); animation:none;}
  .rev-act svg{width:15px; height:15px;}
  .rev-done{display:inline-flex; align-items:center; gap:6px; margin-left:8px; padding:3px 10px; border:1px solid var(--line); border-radius:999px; background:#fff; color:var(--muted); font-size:11px; font-weight:700; vertical-align:middle;}
  .rev-done svg{width:12px; height:12px; color:var(--green);}
  @keyframes revbtnpulse{0%{box-shadow:0 4px 14px rgba(216,69,59,.18), 0 0 0 0 rgba(216,69,59,.38);}70%{box-shadow:0 4px 14px rgba(216,69,59,.18), 0 0 0 9px rgba(216,69,59,0);}100%{box-shadow:0 4px 14px rgba(216,69,59,.18), 0 0 0 0 rgba(216,69,59,0);}}
  tr.rev-panel > td{padding:0 !important; border:none !important;}
  .rev-box{max-height:0; overflow:hidden; transition:max-height .3s ease; background:rgba(216,69,59,.05); border-left:3px solid var(--red);}
  tr.rev-panel.open .rev-box{max-height:340px;}
  .rev-inner{padding:15px 18px;}
  .rev-inner .rev-h{font-family:var(--fd); font-weight:700; font-size:14px; color:var(--ink); margin-bottom:4px;}
  .rev-inner p{margin:0 0 11px; font-size:13px; color:var(--ink-2); line-height:1.5;}
  .rev-inner textarea{margin-bottom:11px;}
  .rev-acts{display:flex; gap:10px; flex-wrap:wrap;}
  .btn-send{border:none; cursor:pointer; border-radius:11px; padding:9px 16px; font-size:13.5px; color:#fff; font-family:var(--fb); font-weight:700; background:var(--grad); box-shadow:var(--shadow-brand); display:inline-flex; align-items:center; gap:7px; transition:.18s;}
  .btn-send:hover{transform:translateY(-2px);}
  .btn-ack{border:1.5px solid var(--line); cursor:pointer; border-radius:11px; padding:9px 16px; font-size:13.5px; color:var(--ink); font-family:var(--fb); font-weight:700; background:rgba(255,255,255,.7); display:inline-flex; align-items:center; gap:7px; transition:.16s;}
  .btn-ack:hover{border-color:var(--ink-2);}
  .btn-ack svg{width:15px; height:15px; color:var(--green);}

  /* forms */
  .field label{font-family:var(--fd); font-weight:600; display:block; margin-bottom:8px; font-size:14.5px;}
  .field input,.field select,textarea{width:100%; padding:13px 15px; border:1.5px solid rgba(13,40,70,.12); border-radius:13px; font-size:15px; font-family:var(--fb); background:rgba(255,255,255,.85);}
  .field input:focus,.field select:focus,textarea:focus{outline:none; border-color:var(--cyan); box-shadow:0 0 0 4px rgba(24,158,255,.14);}
  .field select{-webkit-appearance:none; -moz-appearance:none; appearance:none; padding-right:42px; cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236a7787' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; background-size:16px;}
  .normalized{margin:9px 0 0; font-size:13px; color:var(--muted);} .normalized b{color:var(--tc-blue); font-weight:700;}
  .basebox{background:rgba(24,158,255,.07); border:1px solid rgba(24,158,255,.2); border-radius:13px; padding:14px 16px; font-size:13.5px; margin-bottom:16px;}
  .live{display:flex; align-items:center; gap:10px; margin-top:13px; padding:12px 15px; border-radius:13px; font-size:14px; font-weight:600;}
  .live-ok{background:var(--green-bg); color:var(--green);} .live-yours{background:rgba(24,158,255,.1); color:#176fb8;}
  .live-pending{background:var(--amber-bg); color:#b06a00; margin-top:0;}
  #pf-tax-note{display:block; line-height:1.5;}
  .flow{list-style:none; margin:0; padding:0; position:relative;}
  .flow li{position:relative; padding:0 0 14px 24px; border-left:2px solid rgba(13,40,70,.16); margin-left:6px; font-size:13px; line-height:1.5;}
  .flow li:last-child{border-left-color:transparent; padding-bottom:0;}
  .flow li::before{content:""; position:absolute; left:-8px; top:1px; width:13px; height:13px; border-radius:50%; background:#fff; border:2px solid rgba(13,40,70,.20); box-shadow:0 0 0 3px var(--glass-strong);}
  .flow li.active::before{border-color:var(--tc-blue);}
  .flow li.done::before{background:var(--tc-blue); border-color:var(--tc-blue);}
  .flow li b{font-family:var(--fd); font-weight:600; color:var(--ink);}
  .flow li span{color:var(--muted);}
  .btn-primary{border:none; cursor:pointer; border-radius:13px; padding:13px 22px; color:#fff; font-family:var(--fb); font-weight:700; font-size:15px; background:var(--grad); box-shadow:var(--shadow-brand); transition:.18s; display:inline-flex; align-items:center; gap:8px;}
  .btn-locked{border:1px solid var(--line); cursor:not-allowed; border-radius:13px; padding:13px 22px; color:var(--muted); font-family:var(--fb); font-weight:700; font-size:15px; background:rgba(13,40,70,.05); display:inline-flex; align-items:center; gap:8px;}
  .b-done{background:var(--green-bg); color:var(--green);}
  .btn-primary:hover{transform:translateY(-2px);}
  .btn-ghost{background:rgba(255,255,255,.7); color:var(--ink); border:1.5px solid var(--line); border-radius:13px; padding:12px 20px; font-family:var(--fb); font-weight:600; cursor:pointer; transition:transform .18s, background .16s, border-color .16s;}
  .btn-ghost:hover{transform:translateY(-1px); background:#fff; border-color:var(--ink-2);}
  /* kontextuelle Alert-Buttons */
  .btn-amber{border:none; cursor:pointer; border-radius:11px; padding:8px 14px; font-size:13.5px; color:#fff; font-family:var(--fb); font-weight:700; background:linear-gradient(120deg,#e58a00,#f4a627); box-shadow:0 6px 16px rgba(229,138,0,.28); display:inline-flex; align-items:center; gap:7px; transition:.18s;}
  .btn-amber:hover{transform:translateY(-1px);}
  .btn-red{border:none; cursor:pointer; border-radius:11px; padding:8px 14px; font-size:13.5px; color:#fff; font-family:var(--fb); font-weight:700; background:linear-gradient(120deg,#d8453b,#e8635a); box-shadow:0 6px 16px rgba(216,69,59,.30); display:inline-flex; align-items:center; gap:7px; transition:.18s;}
  .btn-red:hover{transform:translateY(-1px);}
  .btn-red .ic, .btn-amber .ic{width:15px; height:15px;}
  /* Outline-Sekundärbutton passt sich der Alert-Farbe an */
  .alert.slim:not(.urgent) .btn-ghost{border-color:rgba(229,138,0,.55); color:#9a6200; background:rgba(255,255,255,.65);}
  .alert.slim:not(.urgent) .btn-ghost:hover{border-color:#e58a00; background:rgba(229,138,0,.1);}

  .alert{border-radius:16px; padding:18px 20px; margin-bottom:18px; display:flex; gap:15px; align-items:flex-start; background:rgba(229,138,0,.07); border:1px solid rgba(229,138,0,.22);}
  .alert b{display:block; margin-bottom:3px; font-family:var(--fd); font-weight:600;} .alert .acts{margin-top:12px; display:flex; gap:9px;}
  .alert.slim{padding:12px 16px; gap:12px; align-items:center; margin-bottom:12px;}
  .alert.slim .alert-body{flex:1; font-size:13px; line-height:1.5;}
  .alert.slim b{display:inline; margin:0; font-size:13.5px;}
  .alert.slim .acts{margin-top:0; flex-shrink:0; white-space:nowrap;}
  @media(max-width:680px){.alert.slim{align-items:flex-start; flex-wrap:wrap;} .alert.slim .acts{margin-top:8px;}}
  .info-line{display:flex; gap:24px; flex-wrap:wrap; color:var(--muted); font-size:13.5px; margin:8px 0 4px;} .info-line b{color:var(--ink);}

  /* selling points / badges grids */
  .sp{padding:16px 18px; border-radius:14px; background:var(--glass-strong); border:1px solid rgba(255,255,255,.7); box-shadow:var(--shadow-sm);}
  .sp .h{display:flex; align-items:center; gap:9px; font-family:var(--fd); font-weight:600; font-size:15.5px; margin-bottom:6px;}
  .sp .h .tag{font-size:10.5px; font-weight:700; background:var(--grad); color:#fff; border-radius:999px; padding:2px 8px;}
  .sp p{margin:0 0 12px; color:var(--ink-2); font-size:14px;}
  .sp .copy{font-size:12.5px; font-weight:700; color:var(--tc-blue); cursor:pointer; display:inline-flex; align-items:center; gap:6px;}
  .gridcards{display:grid; grid-template-columns:repeat(2,1fr); gap:14px;}
  /* Produkt-Karten */
  .prodcard{display:grid; grid-template-columns:340px 1fr; background:var(--glass-strong); border:1px solid rgba(255,255,255,.7); border-radius:18px; overflow:hidden; box-shadow:var(--shadow-sm); margin-bottom:16px;}
  .prodcard .prod-img{background:#0A2540; min-height:200px;}
  .prodcard .prod-img img{width:100%; height:100%; object-fit:cover; object-position:center; display:block;}
  .prodcard .prod-body{padding:20px 22px;}
  .prodcard .ttl{font-family:var(--fd); font-weight:700; font-size:18px; display:flex; align-items:center; gap:9px; margin-bottom:7px;}
  .prodcard .tag{font-size:10.5px; font-weight:700; background:var(--grad); color:#fff; border-radius:999px; padding:2px 9px;}
  .prodcard p{margin:0 0 12px; color:var(--ink-2); font-size:14px; line-height:1.5;}
  .prod-badges{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px;}
  .prod-hint{font-size:13px; color:var(--muted); margin-bottom:14px;} .prod-hint b{color:var(--ink);}
  .prod-hr{border:none; border-top:1px solid var(--line); margin:14px 0;}
  .prod-cta{display:flex; gap:10px; flex-wrap:wrap; align-items:center;}
  .btn-store{display:inline-flex; align-items:center; gap:7px; padding:9px 15px; border-radius:11px; border:1px solid var(--line); background:transparent; color:var(--muted); font-family:var(--fb); font-weight:600; font-size:13px; text-decoration:none; transition:.18s;}
  .btn-store:hover{color:var(--tc-blue); border-color:var(--tc-blue); background:rgba(13,90,147,.05); transform:translateY(-2px);}
  .btn-store .ic{width:14px; height:14px;}
  .prodcard.placeholder{grid-template-columns:1fr; border-style:dashed; box-shadow:none; background:rgba(255,255,255,.5);}
  @media(max-width:760px){.prodcard{grid-template-columns:1fr;} .prodcard .prod-img{min-height:0;} .prodcard .prod-img img{height:180px;}}
  /* Badge-Assets */
  .badge-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:18px;}
  .badge-asset{display:flex; flex-direction:column; background:var(--glass-strong); border:1px solid rgba(255,255,255,.7); border-radius:18px; overflow:hidden; box-shadow:var(--shadow-sm);}
  .badge-asset .preview{position:relative; display:grid; place-items:center; padding:28px; min-height:188px; background:#f3f7fc; background-image:radial-gradient(rgba(13,40,70,.06) 1px, transparent 1px); background-size:14px 14px; border-bottom:1px solid var(--line);}
  .badge-asset .preview .chip-ok{position:absolute; top:11px; right:11px; background:#fff; box-shadow:var(--shadow-sm);}
  .badge-asset .preview{min-height:248px;}
  .badge-asset .preview img{height:210px; width:auto; filter:drop-shadow(0 10px 24px rgba(10,37,64,.2));}
  .badge-asset .body{padding:16px 18px 18px;}
  .badge-asset.locked .preview{filter:grayscale(1); opacity:.55;}
  .badge-asset.locked{border-style:dashed;}
  .lock-tag{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:var(--muted); background:rgba(13,40,70,.06); border-radius:999px; padding:4px 11px;}
  /* Tier-Ladder (Status-Panel) */
  .statuspanel{background:var(--glass-strong); border:1px solid rgba(255,255,255,.7); border-radius:16px; padding:16px 18px; margin-bottom:18px; box-shadow:var(--shadow-sm);}
  .statuspanel .now{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
  .statuspanel .now h2{font-family:var(--fd); font-weight:700; font-size:17px; margin:0; color:var(--ink);}
  .statuspanel .now .cg{flex-basis:100%; font-size:12.5px; color:var(--muted); margin-top:1px;}
  .chip-ok{display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:700; color:var(--green); background:var(--green-bg); border-radius:999px; padding:3px 10px;}
  .ladder{display:flex; gap:10px; margin-top:14px;}
  .ladder .lstep{flex:1; background:rgba(13,40,70,.035); border:1px solid var(--line); border-radius:12px; padding:11px 13px;}
  .ladder .lstep.cur{background:var(--green-bg); border-color:rgba(46,178,123,.4);}
  .ladder .lstep b{font-family:var(--fd); font-weight:600; font-size:13.5px; color:var(--ink); display:flex; align-items:center; gap:7px; flex-wrap:wrap;}
  .ladder .lstep span{font-size:11.5px; color:var(--muted); display:block; margin-top:2px;}
  .ladder .lbar{height:6px; border-radius:999px; background:rgba(13,40,70,.08); overflow:hidden; margin:9px 0 0;}
  .ladder .lbar i{display:block; height:100%; border-radius:999px; background:var(--grad);}
  .soon-tag{font-style:normal; display:inline-flex; align-items:center; font-size:10px; font-weight:700; color:#b06a00; background:var(--amber-bg); border-radius:999px; padding:2px 7px;}
  .ladder .lstep.premium{background:linear-gradient(135deg,rgba(229,138,0,.13),rgba(255,255,255,.55)); border-color:rgba(229,138,0,.45);}
  .ladder .lstep.premium b{color:#9a5b00;} .ladder .lstep.premium b svg{color:#d18700;}
  .ladder .lstep.premium .lbar i{background:linear-gradient(90deg,#f0b24a,#d18700);}
  .badge-asset .body .ttl{font-family:var(--fd); font-weight:600; font-size:15.5px; display:flex; align-items:center; gap:8px;}
  .badge-asset .body .sub2{font-size:12.5px; color:var(--muted); margin:3px 0 12px;}
  .code-box{position:relative; background:#0A2540; border-radius:12px; padding:12px 14px; margin-bottom:10px;}
  .code-box code{display:block; color:#bcd6ef; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:11.5px; line-height:1.55; white-space:pre-wrap; word-break:break-all;}
  .code-actions{display:flex; gap:9px;}
  .btn-copy{flex:1; display:inline-flex; align-items:center; justify-content:center; gap:7px; border:none; cursor:pointer; border-radius:11px; padding:10px 14px; color:#fff; font-family:var(--fb); font-weight:700; font-size:13.5px; background:var(--grad); box-shadow:var(--shadow-brand); transition:.16s;}
  .btn-copy:hover{transform:translateY(-1px);} .btn-copy.done{background:var(--green); box-shadow:none;}
  .btn-dl{display:inline-flex; align-items:center; gap:7px; border:1.5px solid var(--navy); background:#fff; cursor:pointer; border-radius:11px; padding:10px 16px; color:var(--navy); font-family:var(--fb); font-weight:700; font-size:13.5px; text-decoration:none; transition:.16s;}
  .btn-dl:hover{background:var(--navy); color:#fff;}
  @media(max-width:760px){.badge-grid{grid-template-columns:1fr;}}

  .empty{text-align:center; padding:46px 24px;}
  .empty h3{margin:16px 0 8px; font-family:var(--fd); font-weight:600; font-size:22px;}
  .empty .steps3{display:flex; gap:16px; justify-content:center; margin:24px 0; flex-wrap:wrap;}
  .empty .s3{background:var(--glass-strong); border:1px solid rgba(255,255,255,.7); border-radius:16px; padding:18px; width:185px; box-shadow:var(--shadow-sm);}
  .empty .s3 .n{width:30px; height:30px; border-radius:50%; background:var(--grad); color:#fff; display:grid; place-items:center; font-family:var(--fd); font-weight:700; margin:0 auto 10px;}

  .view{display:none;} .view.active{display:block; animation:viewIn .5s cubic-bezier(.2,.7,.2,1);}
  @keyframes viewIn{from{opacity:0; transform:translateY(10px);}to{opacity:1; transform:translateY(0);}}
  .reveal{animation:rise .6s cubic-bezier(.2,.7,.2,1) backwards;} @keyframes rise{from{opacity:0; transform:translateY(16px);}to{opacity:1; transform:translateY(0);}}

  @media(max-width:960px){.bento{grid-template-columns:1fr;} .grid-2{grid-template-columns:1fr;} .gridcards{grid-template-columns:1fr;}}
  @media(max-width:820px){
    .shell{flex-direction:column;}
    .side{position:fixed; left:0; top:0; bottom:0; width:84%; max-width:300px; height:100vh; z-index:40; transform:translateX(-101%); transition:transform .22s ease; border-radius:0;}
    .side.open{transform:translateX(0); box-shadow:0 0 0 100vmax rgba(6,23,46,.45);}
    .hdr-inner{padding:0 14px;} .hdr-mobile{display:flex;} .burger{display:grid; place-items:center;} .hdr-title{display:none;}
    .hdr-actions{gap:8px;} .tb-ico{display:none;} .tb-chip .lbl,.tb-chip .go{display:none;} .tb-chip{padding:8px 12px;} .btn-werben{font-size:0; padding:10px;}
    .content{padding:18px 14px 40px;} .ftr{padding:18px 14px;} h1.page{font-size:23px;}
  }
  .mock-tag{position:fixed; right:16px; bottom:16px; z-index:50; background:rgba(10,37,64,.85); color:#cfe3f7; font-size:11px; padding:7px 13px; border-radius:999px; backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.12);}
  /* Modal (Auszahlung anfordern) */
  .modal-bg{position:fixed; inset:0; background:rgba(10,37,64,.45); backdrop-filter:blur(4px); display:none; align-items:center; justify-content:center; z-index:200; padding:20px;}
  .modal-bg.open{display:flex;}
  .modal{background:#fff; border-radius:18px; max-width:440px; width:100%; box-shadow:0 30px 80px -20px rgba(8,30,60,.5); overflow:hidden; animation:modalIn .18s ease;}
  @keyframes modalIn{from{transform:translateY(10px); opacity:0;} to{transform:none; opacity:1;}}
  .modal .mh{padding:20px 22px 0; font-family:var(--fd); font-weight:800; font-size:19px; color:var(--navy);}
  .modal .mb{padding:14px 22px 22px;}
  .modal .mrow{display:flex; justify-content:space-between; align-items:center; padding:11px 0; border-bottom:1px solid var(--line); font-size:14px; color:var(--ink-2);}
  .modal .mrow b{font-family:var(--fd); color:var(--navy); font-size:15px;}
  .modal .mact{display:flex; gap:10px; justify-content:flex-end; margin-top:18px;}
  .toast{position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px); background:var(--navy); color:#eaf4ff; padding:11px 18px; border-radius:12px; font-size:13.5px; box-shadow:0 12px 30px -8px rgba(8,30,60,.5); opacity:0; pointer-events:none; transition:.25s; z-index:300; max-width:90vw;}
  .toast.show{opacity:1; transform:translateX(-50%) translateY(0);}
  .pf-save{display:flex; justify-content:flex-end; align-items:center; gap:12px; margin-top:16px; padding-top:14px; border-top:1px solid var(--line);}
  .pf-save .pf-saved{display:none; margin:0; padding:6px 11px;}
  /* Consent-Modal (AGB scroll-to-confirm) */
  .modal.consent{max-width:580px;}
  .consent-scroll{max-height:44vh; overflow-y:auto; border:1px solid var(--line); border-radius:12px; padding:14px 16px; margin:6px 0 14px; font-size:13px; line-height:1.55; color:var(--ink-2); background:#fff;}
  .consent-scroll h4{font-family:var(--fd); font-weight:700; font-size:13.5px; color:var(--navy); margin:14px 0 3px;}
  .consent-scroll h4:first-child{margin-top:0;}
  .consent-scroll p{margin:0 0 8px;}
  .consent-end{text-align:center; color:var(--muted); font-size:12px; margin:12px 0 0; border-top:1px dashed var(--line); padding-top:10px;}
  .consent-check{display:flex; gap:9px; align-items:flex-start; font-size:13.5px; color:var(--ink); font-weight:600; cursor:pointer;}
  .consent-check input{margin-top:3px; width:auto;}
  .consent-check.locked{opacity:.5; cursor:default;}
  .consent-hint{font-size:12px; color:var(--muted); margin:0 0 4px;}

  /* ===== Globale Komponenten (BFF-Ergaenzung): Buttons/Alerts ausserhalb
     der Shell-Kontexte — der Prototyp stylte .btn nur in .pay-hero ===== */
  .btn{display:inline-flex; align-items:center; gap:8px; border-radius:12px; padding:11px 18px;
    font-family:var(--fb); font-weight:700; font-size:14px; cursor:pointer;
    border:1px solid var(--line, #dfe6ee); background:#fff; color:var(--ink-1, #14304d);
    text-decoration:none; transition:.16s;}
  .btn:hover{transform:translateY(-1px); box-shadow:0 6px 16px rgba(8,25,45,.10);}
  .btn.primary{background:var(--grad); color:#fff; border-color:transparent; box-shadow:var(--shadow-brand);}
  .btn.locked{background:rgba(13,40,70,.06); color:var(--muted); border-color:transparent;
    cursor:not-allowed; box-shadow:none;}
  .btn.locked:hover{transform:none;}
  .alert.ok{background:rgba(47,125,79,.08); border-color:rgba(47,125,79,.25); color:#225c3c;}
  .alert.warn{color:#7a5200;}

  /* Mobile-Pass (QA-POLISH): 3er-Grid kollabiert, Reward-Banner wrappt */
  .grid-2.grid-3{grid-template-columns:1fr 1fr 1fr;}
  @media(max-width:960px){.grid-2.grid-3{grid-template-columns:1fr;}}
  @media(max-width:760px){
    .recurring{padding:20px 18px;}
    .recurring .big{white-space:normal; font-size:32px;}
    .recurring{flex-wrap:wrap !important;}
    .recurring .rew-row{flex-wrap:wrap !important; flex-shrink:1 !important; min-width:0 !important; width:100%;}
    .sec-h h2{white-space:normal;}
    /* 1fr-Spalten duerfen nicht auf min-content aufweiten (Grid-Klassiker) */
    .benefit-grid{grid-template-columns:minmax(0,1fr);}
    .benefit, .pitch, .calc{min-width:0;}
    .pitch-row{grid-template-columns:minmax(0,1fr);}
  }

  /* Modals duerfen hoeher sein als der Viewport (Mobile): innen scrollen */
  .modal{max-height:calc(100dvh - 28px); overflow-y:auto;}

  /* Klassenlose Links (Fliesstext, Karten, Tabellen): Portal-Blau statt
     Browser-Default — nimmt auch :visited das Lila */
  .content a:not([class]), .auth-card a:not([class]){color:var(--tc-blue); font-weight:700; text-decoration:none;}
  .content a:not([class]):hover, .auth-card a:not([class]):hover{text-decoration:underline;}

  /* Rechtsdokumente (Bedingungen, Datenschutz): rohes Markdown -> Typografie */
  .legal-doc{font-size:14px; line-height:1.72; color:var(--ink-2);}
  .legal-doc > :first-child{margin-top:0;}
  .legal-doc h2{font-family:var(--fd); font-weight:700; font-size:16px; color:var(--ink); margin:24px 0 9px; letter-spacing:-.2px;}
  .legal-doc h3{font-family:var(--fd); font-weight:700; font-size:14.5px; color:var(--ink); margin:18px 0 7px;}
  .legal-doc h4{font-family:var(--fd); font-weight:700; font-size:14px; color:var(--ink); margin:15px 0 6px;}
  .legal-doc p{margin:0 0 11px;}
  .legal-doc ul{margin:2px 0 13px; padding-left:20px;}
  .legal-doc li{margin:0 0 6px;}
  .legal-doc li::marker{color:var(--tc-blue);}
  .legal-doc strong{font-weight:700; color:var(--ink);}
  .legal-doc hr{border:0; border-top:1px solid var(--line); margin:20px 0;}