/* Gemeinsames Stylesheet für alle Seiten (ausgelagert am 24.09.2026) */
@font-face{font-family:'Archivo';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/Archivo-500.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/Archivo-600.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/Archivo-700.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/Archivo-800.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:900;font-display:swap;src:url(fonts/Archivo-900.woff2) format('woff2')}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/InstrumentSerif-400i.woff2) format('woff2')}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/InstrumentSerif-400.woff2) format('woff2')}
@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/Anton-400.woff2) format('woff2')}
@font-face{font-family:'Mr Dafoe';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/MrDafoe-400.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/Inter-400.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/Inter-500.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/Inter-600.woff2) format('woff2')}
  :root{
    --bg:#0B0C0A;
    --bg2:#0E100B;
    --card-dark:#141310;
    --card-dark2:#1A1813;
    --stroke-dark:#282520;
    --cream:#ECEAE3;
    --cream2:#E5E3DA;
    --card-light:#FBFAF6;
    --stroke-light:#DDDACF;
    --lime:#F4C900;
    --lime-soft:#FFD41F;
    --ink:#141610;
    --ink-soft:#4A4D42;
    --white:#F4F4EF;
    --dim:#9BA092;
    --dim2:#6F746A;
    --line2:#181611;
    --r-lg:28px;
    --r-md:16px;
    --r-sm:12px;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    font-family:'Inter',system-ui,sans-serif;
    background:var(--bg);
    color:var(--white);
    line-height:1.6;font-size:15.5px;
    -webkit-font-smoothing:antialiased;
  }
  ::selection{background:var(--lime);color:var(--ink)}
  a{color:inherit}
  h1,h2,h3{font-family:'Archivo',sans-serif;font-weight:800;letter-spacing:-.02em;line-height:1.04}
  .serif{font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;letter-spacing:0}

  /* ============ Layout: Sidebar + Main ============ */
  .shell{display:flex;min-height:100vh}
  aside.side{
    position:fixed;inset:0 auto 0 0;width:230px;z-index:60;
    background:var(--bg);display:flex;flex-direction:column;
    padding:22px 18px;gap:8px;
    border-right:1px solid var(--line2);
  }
  main.page{flex:1;min-width:0;margin-left:230px;background:var(--bg)}
  body{overflow-x:hidden}
  @media(max-width:960px){
    aside.side{display:none}
    main.page{margin-left:0}
    .topbar{display:flex!important}
  }

  .side .brand{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
  .side .brandline{font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;font-weight:600;color:var(--dim2);margin:0 0 16px 2px}
  .side .brandline b{color:var(--lime);font-weight:600}
  .side .brand svg{height:40px;width:auto;color:var(--white)}
  .toggle{
    width:32px;height:32px;border-radius:50%;border:1px solid var(--stroke-dark);
    background:var(--card-dark2);color:var(--dim);display:grid;place-items:center;
    font-size:13px;cursor:default;
  }
  .side nav{display:flex;flex-direction:column;gap:2px}
  .side nav a{
    display:flex;align-items:center;gap:10px;text-decoration:none;
    font-size:13.5px;font-weight:500;color:var(--dim);
    padding:9px 12px;border-radius:10px;
  }
  .side nav a:hover{background:var(--card-dark2);color:var(--white)}
  .side nav a.active{background:var(--card-dark2);color:var(--white)}
  .side nav a.active::after{content:"→";margin-left:auto;color:var(--lime)}
  .side nav a .ic{width:16px;text-align:center;opacity:.7;font-size:12px}
  .side .grp{
    font-size:10px;letter-spacing:.18em;text-transform:uppercase;
    color:var(--dim2);font-weight:600;margin:18px 4px 6px;
  }
  .quick{display:flex;flex-direction:column;gap:6px}
  .quick a{
    display:flex;flex-direction:row;align-items:center;gap:11px;text-decoration:none;
    padding:9px 12px;border-radius:12px;background:var(--card-dark);
    border:1px solid var(--stroke-dark);
  }
  .quick .qic{
    width:34px;height:34px;border-radius:10px;background:var(--card-dark2);
    border:1px solid var(--stroke-dark);display:grid;place-items:center;flex:none;
  }
  .quick .qcol{display:flex;flex-direction:column;min-width:0}
  .quick a:hover{border-color:#443E2A}
  .quick .t{font-size:13px;font-weight:600;color:var(--white);display:flex;align-items:center;gap:8px}
  .quick .t .dot{width:8px;height:8px;border-radius:50%;background:var(--lime)}
  .quick .s{font-size:11px;color:var(--dim2);margin-top:2px}
  .side .foot{margin-top:auto}
  .socials{display:flex;gap:8px}
  .socials a{
    flex:1;text-align:center;font-size:10.5px;font-weight:600;color:var(--dim);
    text-decoration:none;background:var(--card-dark);border:1px solid var(--stroke-dark);
    border-radius:12px;padding:10px 4px;
  }
  .socials a:hover{color:var(--white)}
  .rating{
    margin-top:8px;display:block;background:var(--card-dark);border:1px solid var(--stroke-dark);
    border-radius:12px;padding:10px 12px;font-size:11px;color:var(--dim2);text-decoration:none;
  }
  .rating b{color:var(--white);font-size:13px}

  /* Mobile Topbar */
  .topbar{
    display:none;position:sticky;top:0;z-index:60;background:var(--bg);
    border-bottom:1px solid var(--line2);align-items:center;justify-content:space-between;
    padding:14px 20px;
  }
  .topbar svg{height:34px;width:auto;color:var(--white)}
  .topbar a.cta{
    background:var(--lime);color:var(--ink);text-decoration:none;font-weight:700;
    font-size:12.5px;padding:10px 18px;border-radius:999px;
  }

  /* ============ Gemeinsames ============ */
  .wrap{max-width:1060px;margin:0 auto;padding:0 28px}
  section{padding:110px 0}
  .kick{
    display:flex;align-items:center;gap:8px;
    font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--dim);
    margin-bottom:22px;
  }
  .kick::before{content:"";width:7px;height:7px;background:var(--lime);border-radius:2px}
  .light .kick{color:var(--ink-soft)}
  .light .kick::before{background:#B89400}
  .h-xl{font-size:clamp(38px,5.4vw,64px)}
  .h-lg{font-size:clamp(30px,4.2vw,48px)}
  .accent{color:var(--lime)}
  .pillbtn{
    display:inline-flex;align-items:center;gap:10px;text-decoration:none;cursor:pointer;
    font-family:'Inter',sans-serif;font-size:14px;font-weight:600;
    padding:15px 28px;border-radius:999px;border:1px solid transparent;
    transition:transform .15s,box-shadow .15s,background .15s;
  }
  .pillbtn:hover{transform:translateY(-1px)}
  .pill-lime{
    background:var(--lime);color:var(--ink);
    box-shadow:0 0 0 6px rgba(244,201,0,.09),0 8px 30px rgba(244,201,0,.18);
  }
  .pill-lime:hover{background:var(--lime-soft)}
  .pill-darkghost{background:var(--card-dark2);color:var(--white);border-color:var(--stroke-dark)}
  .pill-darkghost:hover{border-color:#443E2A}
  .pill-ink{background:var(--ink);color:var(--white)}
  .pill-ink:hover{background:#2A2720}
  .arrow{font-family:'Inter',sans-serif}

  /* Dunkle Sektionen: Punkte-Textur oben */
  .dark-sec{position:relative;background:var(--bg)}
  .dark-sec::before{
    content:"";position:absolute;inset:0 0 auto 0;height:340px;pointer-events:none;
    background-image:radial-gradient(rgba(244,201,0,.14) 1px,transparent 1.4px);
    background-size:14px 14px;
    -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.5),transparent);
            mask-image:linear-gradient(to bottom,rgba(0,0,0,.5),transparent);
  }
  .light{background:var(--cream);color:var(--ink)}
  .light h1,.light h2,.light h3{color:var(--ink)}

  /* ============ Hero ============ */
  .hero{padding:120px 0 90px;text-align:center}
  .badge{
    display:inline-flex;align-items:center;gap:9px;
    background:var(--card-dark2);border:1px solid var(--stroke-dark);
    border-radius:999px;padding:8px 18px;font-size:12.5px;font-weight:500;color:var(--dim);
  }
  .badge::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--lime);
    box-shadow:0 0 10px var(--lime)}
  .hero h1{margin:30px auto 0;max-width:24ch}
  .hero .serif{font-size:1.06em}
  .hero p.sub{margin:26px auto 0;max-width:58ch;color:var(--dim);font-size:16.5px}
  .hero p.sub b{color:var(--white);font-weight:600}
  .hero .ctas{margin-top:38px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
  .hero .proof{
    margin-top:30px;display:inline-flex;align-items:center;gap:10px;
    background:var(--card-dark);border:1px solid var(--stroke-dark);
    border-radius:999px;padding:9px 20px;font-size:12.5px;color:var(--dim);
  }
  .hero .proof b{color:var(--white)}

  /* Anruf-Karte */
  .callcard{
    margin-top:70px;border-radius:var(--r-lg);border:1px solid #2E2A1C;
    background:
      radial-gradient(ellipse at 50% 0%,rgba(244,201,0,.12),transparent 60%),
      var(--card-dark);
    padding:52px 40px;text-align:center;position:relative;overflow:hidden;
  }
  .callcard::before{
    content:"";position:absolute;inset:0;pointer-events:none;
    background-image:radial-gradient(rgba(244,201,0,.10) 1px,transparent 1.4px);
    background-size:12px 12px;
    -webkit-mask-image:radial-gradient(ellipse at 50% 20%,rgba(0,0,0,.7),transparent 75%);
            mask-image:radial-gradient(ellipse at 50% 20%,rgba(0,0,0,.7),transparent 75%);
  }
  .callcard .tag{font-size:11px;letter-spacing:.2em;color:var(--dim2);font-weight:600;text-transform:uppercase}
  .callcard h2{font-size:clamp(26px,3.6vw,40px);margin:16px auto 14px;max-width:22ch;position:relative}
  .callcard p{color:var(--dim);max-width:54ch;margin:0 auto;font-size:15px;position:relative}
  .callcard p b{color:var(--white)}
  .callcard .pillbtn{margin-top:28px;position:relative}

  /* ============ Leistungs-Karten ============ */
  .cards3{margin-top:50px;display:grid;grid-template-columns:1fr;gap:18px}
  @media(min-width:900px){.cards3{grid-template-columns:repeat(2,minmax(0,1fr))}}
  @media(min-width:1180px){.cards3{grid-template-columns:repeat(3,minmax(0,1fr))}}
  .lcard h3{overflow-wrap:break-word}
  .lcard{
    background:var(--card-light);border:1px solid var(--stroke-light);
    border-radius:var(--r-lg);padding:30px 28px;display:flex;flex-direction:column;
  }
  .lcard .lic{
    width:42px;height:42px;border-radius:12px;background:#F7ECC0;color:#7A6200;
    display:grid;place-items:center;font-size:17px;margin-bottom:16px;
  }
  .lcard h3{font-size:22px;margin-bottom:10px}
  .lcard p.d{color:var(--ink-soft);font-size:14px;margin-bottom:18px}
  .lcard ul{list-style:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 18px;margin-bottom:24px}
  .lcard li{
    display:flex;align-items:flex-start;gap:8px;min-width:0;overflow-wrap:break-word;font-size:12.5px;font-weight:500;color:#3B3E33;
    padding:7px 0;border-bottom:1px solid #E7E4DA;
  }
  .lcard li::before{content:"";width:5px;height:5px;border-radius:50%;background:#B89400;flex:none;margin-top:7px}
  .lcard .pillbtn{margin-top:auto;align-self:flex-start;font-size:13px;padding:12px 22px}

  /* ============ Branchen (Anti-Giganten) ============ */
  .brgrid{margin-top:50px;display:grid;grid-template-columns:1fr;gap:16px}
  @media(min-width:700px){.brgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
  @media(min-width:1000px){.brgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
  .brcard{
    background:var(--card-dark);border:1px solid var(--stroke-dark);
    border-radius:var(--r-md);padding:26px 26px 24px;
  }
  .brcard .vs{
    display:inline-block;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
    font-weight:600;color:var(--dim2);margin-bottom:12px;
  }
  .brcard .vs b{color:var(--lime);font-weight:600}
  .brcard h3{font-size:19px;margin-bottom:8px}
  .brcard p{color:var(--dim);font-size:13.5px}
  .brwide{
    grid-column:1/-1;background:#211D12;border:1px solid var(--lime);
    border-radius:var(--r-md);padding:28px;
  }
  .brwide h3{font-size:20px;margin-bottom:8px}
  .brwide p{color:var(--dim);font-size:14px;max-width:78ch}
  .brwide p b{color:var(--white)}
  .br-cta{margin-top:34px}
  .cj{margin-top:64px;border-top:1px solid var(--stroke-dark);padding-top:48px}
  .cj h3{font-size:clamp(22px,3vw,32px);margin-bottom:10px}
  .cj p.intro{color:var(--dim);font-size:14.5px;max-width:60ch}
  .cj-grid{margin-top:34px;display:flex;flex-direction:column;gap:16px;padding-bottom:84px}
  .cj-grid .cj-step{width:86%}
  .cj-grid .cj-step:nth-child(odd){margin-left:auto}
  .cj-grid .cj-step:nth-child(even){margin-right:auto}
  @media(min-width:700px){.cj-grid .cj-step{width:46%}}
  .cj-step{
    display:flex;gap:14px;align-items:flex-start;
    background:var(--card-dark);border:1px solid var(--stroke-dark);
    border-radius:var(--r-md);padding:18px 20px;
  }
  .cj-step .n{
    font-family:'Instrument Serif',serif;font-style:italic;font-size:26px;
    color:var(--lime);line-height:1.2;flex:none;
  }
  .cj-step p{font-size:13.5px;color:#C9CDC0}
  .cj-step p b{color:var(--white);display:block;margin-bottom:2px}
  .cj p.outro{margin-top:24px;color:var(--dim);font-size:14px;max-width:66ch}
  .cj p.outro b{color:var(--white)}

  /* ============ Warum (dark rows) ============ */
  .whygrid{margin-top:50px;display:grid;grid-template-columns:1fr;gap:14px}
  .whyrow{
    display:grid;grid-template-columns:1fr;gap:6px 30px;
    background:var(--card-dark);border:1px solid var(--stroke-dark);
    border-radius:var(--r-md);padding:24px 28px;
  }
  @media(min-width:800px){.whyrow{grid-template-columns:280px 1fr;align-items:center}}
  .whyrow .s{font-family:'Archivo',sans-serif;font-weight:800;font-size:19px;letter-spacing:-.01em}
  .whyrow .c{color:var(--dim);font-size:14.5px}
  .whyrow .c b{color:var(--lime);font-weight:600}

  /* ============ Ablauf Timeline ============ */
  .flow{display:grid;grid-template-columns:1fr;gap:60px}
  @media(min-width:900px){.flow{grid-template-columns:340px 1fr}}
  .flow .sticky{align-self:start}
  @media(min-width:900px){.flow .sticky{position:sticky;top:60px}}
  .flow .sticky p.lead{margin-top:18px;color:var(--dim);font-size:14.5px;max-width:34ch}
  .timeline{position:relative;padding-left:34px}
  .timeline::before{content:"";position:absolute;left:8px;top:8px;bottom:8px;width:1px;background:var(--stroke-dark)}
  .phase{position:relative;padding-bottom:64px}
  .phase:last-child{padding-bottom:0}
  .phase::before{
    content:"";position:absolute;left:-30px;top:7px;width:9px;height:9px;border-radius:50%;
    background:var(--lime);box-shadow:0 0 0 5px rgba(244,201,0,.12);
  }
  .phase .chip{
    display:inline-flex;align-items:center;gap:8px;background:var(--card-dark2);
    border:1px solid var(--stroke-dark);border-radius:999px;padding:6px 14px;
    font-size:12px;font-weight:600;color:var(--dim);
  }
  .phase .chip .dot{width:6px;height:6px;border-radius:50%;background:var(--lime)}
  .phase h3{font-size:clamp(24px,3vw,34px);margin:16px 0 10px}
  .phase p{color:var(--dim);max-width:52ch;font-size:14.5px}
  .phase p b{color:var(--white)}
  .phase ul{
    list-style:none;margin-top:18px;display:grid;grid-template-columns:1fr;gap:0 34px;
  }
  @media(min-width:640px){.phase ul{grid-template-columns:1fr 1fr}}
  .phase li{
    display:flex;align-items:center;gap:10px;font-size:13px;font-weight:500;color:#C9CDC0;
    padding:10px 0;border-bottom:1px solid #201D15;
  }
  .phase li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--lime);flex:none}

  /* ============ Funnel (Creme + dunkle Karte) ============ */
  #termin h2{max-width:26ch}
  .funnelcard{
    margin-top:44px;background:
      radial-gradient(ellipse at 85% 0%,rgba(244,201,0,.08),transparent 55%),
      var(--card-dark);
    color:var(--white);border-radius:var(--r-lg);padding:44px 40px;
    border:1px solid #242017;
  }
  @media(max-width:640px){.funnelcard{padding:30px 22px}}
  .steplab{font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--dim2)}
  .funnelcard h3{font-size:clamp(26px,3.4vw,38px);margin:14px 0 8px;color:var(--white)}
  .funnelcard .hint{color:var(--dim);font-size:14.5px;margin-bottom:28px}
  .opts{display:grid;grid-template-columns:1fr;gap:12px}
  @media(min-width:700px){.opts{grid-template-columns:repeat(2,minmax(0,1fr))}}
  .opt{
    display:flex;align-items:center;gap:14px;text-align:left;cursor:pointer;
    background:var(--card-dark2);border:1px solid var(--stroke-dark);
    border-radius:var(--r-md);padding:15px 18px;color:var(--white);
    font-family:'Inter',sans-serif;font-size:14.5px;font-weight:600;
    transition:border-color .15s,background .15s;
  }
  .opt:hover{border-color:#4A4430}
  .opt.sel{border-color:var(--lime);background:#211D12}
  .opt .oic{
    width:34px;height:34px;flex:none;border-radius:10px;display:grid;place-items:center;
    background:#242013;color:var(--lime);font-size:15px;
  }
  .opt small{display:block;font-weight:400;color:var(--dim2);font-size:12px;margin-top:2px}
  .funnel-foot{margin-top:22px;font-size:12.5px;color:var(--dim2)}

  #step2{display:none}
  #step2.active{display:block}
  #step1.hidden{display:none}
  .chosen{
    display:inline-flex;align-items:center;gap:8px;background:#211D12;border:1px solid var(--lime);
    border-radius:999px;padding:8px 16px;font-size:12.5px;font-weight:600;margin-bottom:24px;
  }
  .fgrid{display:grid;grid-template-columns:1fr;gap:16px}
  @media(min-width:700px){.fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
  .field label{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--dim);margin-bottom:8px}
  .field input,.field textarea{
    width:100%;background:var(--card-dark2);border:1px solid var(--stroke-dark);
    border-radius:var(--r-sm);padding:14px 16px;color:var(--white);
    font-family:'Inter',sans-serif;font-size:15px;
  }
  .field input:focus,.field textarea:focus{outline:none;border-color:var(--lime)}
  .field.full{grid-column:1/-1}
  .slotrow{display:flex;flex-wrap:wrap;gap:10px}
  .slot{
    cursor:pointer;background:var(--card-dark2);border:1px solid var(--stroke-dark);
    border-radius:999px;padding:10px 20px;color:var(--dim);
    font-family:'Inter',sans-serif;font-size:13px;font-weight:600;
  }
  .slot:hover{border-color:#4A4430;color:var(--white)}
  .slot.sel{border-color:var(--lime);background:#211D12;color:var(--white)}
  .upcal-wrap{display:flex;gap:18px;flex-wrap:wrap}
  .upcal{flex:1 1 280px;background:var(--card-dark2);border:1px solid var(--stroke-dark);border-radius:16px;padding:16px}
  .upcal-kopf{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;font-family:'Archivo',sans-serif;font-weight:700;font-size:14px;color:var(--white)}
  .upcal-nav{width:32px;height:32px;border-radius:10px;border:1px solid var(--stroke-dark);background:none;color:var(--dim);font-size:18px;cursor:pointer}
  .upcal-nav:hover{color:var(--white);border-color:#4A4430}
  .upcal-wt{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:4px;text-align:center;font-size:11px;color:var(--dim2);font-weight:600}
  .upcal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
  .upcal-tag{aspect-ratio:1;border:none;background:none;border-radius:10px;color:var(--cream);font-family:'Inter',sans-serif;font-size:13px;cursor:pointer;position:relative}
  .upcal-tag:hover:not(:disabled){background:var(--card-dark)}
  .upcal-tag:disabled{color:var(--dim2);opacity:.35;cursor:default}
  .upcal-tag.heute::after{content:"";position:absolute;bottom:4px;left:50%;transform:translateX(-50%);width:4px;height:4px;border-radius:50%;background:var(--lime)}
  .upcal-tag.sel{background:var(--lime);color:#0B0C0A;font-weight:700}
  .upcal-zeiten{flex:1 1 220px;display:flex;flex-direction:column}
  .upcal-hint{font-size:12px;letter-spacing:1px;text-transform:uppercase;font-weight:700;color:var(--dim);margin-bottom:10px}
  .upcal-auswahl{margin-top:auto;padding-top:14px;font-size:13.5px;color:var(--dim2)}
  .upcal-auswahl.aktiv{color:var(--lime);font-weight:600}
  .f-actions{margin-top:26px;display:flex;flex-wrap:wrap;gap:16px;align-items:center}
  .backlink{background:none;border:none;cursor:pointer;color:var(--dim2);font-size:13px;font-weight:500;font-family:'Inter',sans-serif}
  .backlink:hover{color:var(--white)}
  #success{display:none}
  #success.active{display:block}
  #success h3{font-size:26px}
  #success p{color:var(--dim);font-size:14px;margin-top:8px}
  #success .out{
    margin-top:18px;background:var(--card-dark2);border:1px solid var(--stroke-dark);
    border-radius:var(--r-sm);padding:16px;font-size:13px;white-space:pre-wrap;color:var(--dim);
  }

  /* ============ Konditionen ============ */
  .kond3{margin-top:50px;display:grid;grid-template-columns:1fr;gap:18px}
  @media(min-width:900px){.kond3{grid-template-columns:repeat(3,minmax(0,1fr))}}
  .kcard{
    background:var(--card-dark);border:1px solid var(--stroke-dark);
    border-radius:var(--r-lg);padding:30px 28px;
  }
  .kcard .num{
    font-family:'Instrument Serif',serif;font-style:italic;font-size:40px;color:var(--lime);
    line-height:1;
  }
  .kcard h3{font-size:22px;margin:14px 0 10px}
  .kcard p{color:var(--dim);font-size:14px}
  .kcard p b{color:var(--white);font-weight:600}

  /* ============ FAQ ============ */
  .faq{margin-top:50px;display:grid;gap:12px;max-width:820px}
  .faq details{
    background:var(--card-light);border:1px solid var(--stroke-light);
    border-radius:var(--r-md);padding:0 24px;
  }
  .faq summary{
    cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;
    padding:19px 0;font-weight:600;font-size:15px;color:var(--ink);
  }
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{
    content:"+";flex:none;width:28px;height:28px;border-radius:50%;
    background:#F7ECC0;color:#7A6200;display:grid;place-items:center;font-size:15px;font-weight:500;
  }
  .faq details[open] summary::after{content:"–"}
  .faq .a{padding:0 0 20px;font-size:14px;color:var(--ink-soft);max-width:62ch}

  /* ============ Schluss / Footer ============ */
  #schluss{text-align:center;padding:130px 0}
  #schluss p{margin:20px auto 0;max-width:46ch;color:var(--dim)}
  #schluss .pillbtn{margin-top:36px}
  footer{background:var(--cream);color:var(--ink);padding:70px 0 36px}
  .fgrid4{display:grid;grid-template-columns:1fr 1fr;gap:36px}
  @media(min-width:900px){.fgrid4{grid-template-columns:2fr 1fr 1fr 1fr}}
  footer h4{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:#8A8D80;margin-bottom:14px;font-family:'Inter',sans-serif;font-weight:600}
  footer ul{list-style:none}
  footer li{margin-bottom:9px}
  footer a{text-decoration:none;font-size:13.5px;color:var(--ink-soft)}
  footer a:hover{color:var(--ink)}
  footer .brand svg{height:48px;width:auto;color:var(--ink)}
  footer .brand p{margin-top:14px;font-size:13px;color:var(--ink-soft);max-width:30ch}
  .fbase{
    margin-top:52px;border-top:1px solid var(--stroke-light);padding-top:22px;
    display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;
    font-size:12px;color:#8A8D80;
  }

  /* Chat-Pill */
  .chatpill{
    position:fixed;right:22px;bottom:22px;z-index:70;
    display:inline-flex;align-items:center;gap:9px;text-decoration:none;
    background:var(--card-dark2);border:1px solid var(--stroke-dark);
    color:var(--white);font-size:13.5px;font-weight:600;
    padding:13px 22px;border-radius:999px;box-shadow:0 10px 30px rgba(0,0,0,.45);
  }
  .chatpill::before{content:"✦";color:var(--lime);font-size:14px}
  .chatpill:hover{border-color:#443E2A}

  /* ============ Grafiken ============ */
  .mockwrap{max-width:620px;margin:36px auto 8px;position:relative}
  .mockwrap svg{width:100%;height:auto;display:block;filter:drop-shadow(0 24px 50px rgba(0,0,0,.5))}
  .lart{margin:0 0 18px;border-radius:16px;overflow:hidden;background:#141310;border:1px solid #282520;position:relative}
  .lart svg{width:100%;height:auto;display:block}
  .lart img{width:100%;aspect-ratio:2.2/1;object-fit:cover;display:block}
  .lart::after{
    content:"KI-generiert";position:absolute;right:8px;bottom:8px;
    background:rgba(20,19,16,.78);color:#EDEBE2;border:1px solid rgba(244,201,0,.35);
    font-size:9px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;
    padding:3px 8px;border-radius:999px;pointer-events:none;
  }
  .chartcard{
    margin-top:18px;background:var(--card-dark);border:1px solid var(--stroke-dark);
    border-radius:var(--r-md);padding:28px 28px 22px;
  }
  .chartcard svg{width:100%;height:auto;display:block}
  .chartcard .cap{margin-top:16px;font-size:13px;color:var(--dim)}
  .chartcard .cap b{color:var(--lime)}
  .banner{
    margin-top:40px;border-radius:var(--r-lg);overflow:hidden;position:relative;
    border:1px solid var(--stroke-dark);background:#141310;
  }
  .banner img{width:100%;aspect-ratio:21/8;object-fit:cover;display:block}
  .banner video{width:100%;aspect-ratio:2/1;object-fit:cover;display:block}
  .banner::after{
    content:"KI-generiert";position:absolute;right:10px;bottom:10px;
    background:rgba(20,19,16,.78);color:#EDEBE2;border:1px solid rgba(244,201,0,.35);
    font-size:9px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;
    padding:3px 8px;border-radius:999px;pointer-events:none;
  }
  html[data-theme="light"] .banner{border-color:#DFDCD1}

  /* ============ Light Theme ============ */
  html[data-theme="light"]{
    --bg:#F2F0E9;
    --bg2:#EDEBE2;
    --card-dark:#FFFFFF;
    --card-dark2:#F6F4ED;
    --stroke-dark:#DFDCD1;
    --line2:#DFDCD1;
    --white:#141610;
    --dim:#4A4D42;
    --dim2:#8A8D80;
    --cream:#E7E4DB;
    --cream2:#DFDCD1;
  }
  html[data-theme="light"] body{background:var(--bg);color:var(--white)}
  html[data-theme="light"] .dark-sec::before{
    background-image:radial-gradient(rgba(160,130,0,.16) 1px,transparent 1.4px);
  }
  html[data-theme="light"] .opt.sel{background:#FCF4D2}
  html[data-theme="light"] .chosen{background:#FCF4D2}
  html[data-theme="light"] .brwide{background:#FCF6DC}
  html[data-theme="light"] .phase li{border-color:#E5E2D6;color:#3B3E33}
  html[data-theme="light"] .cj-step p{color:#3B3E33}
  html[data-theme="light"] .pill-lime{box-shadow:0 0 0 6px rgba(244,201,0,.14),0 8px 26px rgba(244,201,0,.28)}
  html[data-theme="light"] .chatpill{box-shadow:0 10px 30px rgba(20,22,16,.14)}
  html[data-theme="light"] .toggle,html[data-theme="light"] .langbtn{color:#4A4D42}
  html[data-theme="light"] .mockwrap svg{filter:drop-shadow(0 24px 50px rgba(20,22,16,.18))}
  /* Dunkle Bildschirm-Grafiken bleiben in beiden Themes dunkel */
  html[data-theme="light"] .lart{background:#141310;border-color:#DFDCD1}

  /* Sprachumschalter */
  .sideset{display:flex;flex-direction:column;align-items:flex-end;gap:8px;margin-bottom:16px}
  .langsw{display:flex;gap:4px}
  .topbar .langsw{margin-left:8px}
  .langbtn{
    background:var(--card-dark2);border:1px solid var(--stroke-dark);color:var(--dim);
    font-family:'Inter',sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.08em;
    padding:6px 9px;border-radius:999px;cursor:pointer;
  }
  .langbtn.on{background:var(--lime);border-color:var(--lime);color:#141610}
  .toggle{cursor:pointer;border:1px solid var(--stroke-dark)}
  .side .ctrls{display:flex;align-items:center}
  .topbar .ctrls{display:flex;align-items:center;gap:8px}

  /* Hinweis-Banner */
  .cookiebar{
    position:fixed;left:22px;bottom:22px;z-index:80;max-width:420px;
    background:var(--card-dark2);border:1px solid var(--stroke-dark);
    border-radius:var(--r-md);padding:18px 20px;
    box-shadow:0 14px 40px rgba(0,0,0,.45);
  }
  html[data-theme="light"] .cookiebar{box-shadow:0 14px 40px rgba(20,22,16,.16)}
  .cookiebar p{font-size:13px;color:var(--dim);margin-bottom:14px}
  .cookiebar p a{color:var(--lime)}
  html[data-theme="light"] .cookiebar p a{color:#7A6200}
  .cookiebar .pillbtn{padding:13px 24px;font-size:13px;min-height:44px}
  @media(max-width:640px){.cookiebar{left:12px;right:12px;bottom:12px;max-width:none}}

  /* ============ Showreel ============ */
  .reel{position:relative;margin-top:56px;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--stroke-dark);background:#141310}
  .reel video{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
  .reel::after{
    content:"KI-generiert";position:absolute;right:10px;bottom:10px;
    background:rgba(20,19,16,.78);color:#EDEBE2;border:1px solid rgba(244,201,0,.35);
    font-size:9px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;
    padding:3px 8px;border-radius:999px;pointer-events:none;
  }
  .reel .rtag{
    position:absolute;left:14px;top:12px;font-size:10px;letter-spacing:.2em;
    color:#EDEBE2;background:rgba(20,19,16,.6);padding:5px 12px;border-radius:999px;
    text-transform:uppercase;font-weight:600;
  }

  /* ============ Pakete ============ */
  .pkgtabs{display:flex;flex-wrap:wrap;gap:10px;margin-top:40px}
  .pkgtab{
    cursor:pointer;font-family:'Inter',sans-serif;font-size:13px;font-weight:600;
    padding:11px 20px;border-radius:999px;border:1px solid var(--stroke-light);
    background:var(--card-light);color:var(--ink-soft);transition:background .15s,color .15s,border-color .15s;
  }
  .pkgtab:hover{border-color:#B8B4A4}
  .pkgtab.on{background:#141610;border-color:#141610;color:#F4F4EF}
  .pkgwrap{display:grid;grid-template-columns:1fr;gap:24px;margin-top:26px}
  @media(min-width:900px){.pkgwrap{grid-template-columns:1.45fr 1fr;align-items:start}}
  .pkgmain{background:var(--card-light);border:1px solid var(--stroke-light);border-radius:var(--r-lg);padding:36px 34px}
  .pkgmain h3{font-size:clamp(24px,3vw,34px);color:#141610;margin-bottom:8px}
  .pkgmain p.tag{color:var(--ink-soft);font-size:14.5px;margin-bottom:24px}
  .pkgmain .inc{font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:#8A8D80;margin-bottom:12px}
  .pkgmain ul{list-style:none}
  .pkgmain li{display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-bottom:1px solid #E7E4DA;font-size:14.5px;color:#3B3E33}
  .pkgmain li::before{content:"✓";color:#7A6200;font-weight:700;flex:none}
  .pricecard{background:var(--lime);border-radius:var(--r-lg);padding:32px 30px;color:#141610}
  @media(min-width:900px){.pricecard{position:sticky;top:24px}}
  .pricecard .lbl{font-size:11px;letter-spacing:.24em;text-transform:uppercase;font-weight:700;opacity:.75}
  .pricecard .big{font-family:'Archivo',sans-serif;font-weight:900;font-size:clamp(40px,5vw,56px);letter-spacing:-.02em;line-height:1;margin:10px 0 4px}
  .pricecard .psub{font-size:14px;font-weight:500;opacity:.8;margin-bottom:22px}
  .pricecard .pillbtn{width:100%;justify-content:center;margin-bottom:10px}
  .pricecard .ghosty{background:transparent;border:1px solid rgba(20,22,16,.4);color:#141610}
  .pricecard .ghosty:hover{background:rgba(20,22,16,.08)}
  .pricecard .note{font-size:12px;opacity:.75;text-align:center;margin-top:10px;margin-bottom:0}

  /* ============ Wartung ============ */
  .wgrid{margin-top:50px;display:grid;grid-template-columns:1fr;gap:18px}
  @media(min-width:900px){.wgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
  .wcard{
    background:var(--card-dark);border:1px solid var(--stroke-dark);
    border-radius:var(--r-lg);padding:28px;display:flex;flex-direction:column;
    transition:border-color .25s;
  }
  .wcard.sel{border-color:var(--lime)}
  .wcard .whead{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
  .wcard .whead .wic{width:38px;height:38px;border-radius:11px;background:#242013;color:var(--lime);display:grid;place-items:center;font-size:15px}
  .wcard .whead .tagpill{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--lime);background:#211D12;border:1px solid #4A4430;border-radius:999px;padding:6px 13px}
  .wcard h3{font-size:21px;margin-bottom:8px}
  .wcard p{color:var(--dim);font-size:13.5px;margin-bottom:14px}
  .wcard ul{list-style:none;margin-bottom:22px}
  .wcard li{display:flex;gap:10px;align-items:flex-start;font-size:13px;font-weight:500;color:#C9CDC0;padding:9px 0;border-bottom:1px solid #201D15}
  .wcard li::before{content:"✓";color:var(--lime);font-weight:700;flex:none}
  .wcard .pillbtn{margin-top:auto;justify-content:center;font-size:12.5px;padding:12px 20px}
  .wcard.sel .pillbtn{background:var(--lime);color:#141610;border-color:var(--lime)}
  html[data-theme="light"] .wcard .whead .tagpill{background:#FCF4D2;border-color:#D4C687;color:#7A6200}
  html[data-theme="light"] .wcard li{color:#3B3E33;border-color:#E5E2D6}
  html[data-theme="light"] .wcard li::before{color:#7A6200}
  html[data-theme="light"] .wcard .whead .wic{background:#F7ECC0;color:#7A6200}

  /* ============ Funnel-Auswahl ============ */
  .selinfo{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
  .selinfo span{
    display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;
    background:#211D12;border:1px solid #4A4430;border-radius:999px;padding:7px 14px;color:var(--lime);
  }
  .fgroups .field{margin-bottom:4px}

  .cj-grid .cj-step{opacity:0;transform:translateY(22px);transition:opacity .45s cubic-bezier(.25,1,.5,1),transform .45s cubic-bezier(.25,1,.5,1)}
  .cj-grid .cj-step.on{opacity:1;transform:none}
  @keyframes cjPulse{0%{transform:scale(1)}45%{transform:scale(1.35);text-shadow:0 0 16px rgba(244,201,0,.85)}100%{transform:scale(1);text-shadow:none}}
  .cj-grid .cj-step.on .n{display:inline-block;animation:cjPulse .8s cubic-bezier(.25,1,.5,1) both}
  @media(prefers-reduced-motion:reduce){
    .cj-grid .cj-step{opacity:1;transform:none;transition:none}
    .cj-grid .cj-step.on .n{animation:none}
  }


  .cj-grid{position:relative}
  .cj-car2{
    position:absolute;left:0;top:0;height:36px;width:auto;z-index:4;opacity:0;
    filter:drop-shadow(0 8px 10px rgba(0,0,0,.45));pointer-events:none;
  }
  .cj-flag{
    position:absolute;z-index:3;opacity:0;transform:scale(.3);transform-origin:bottom left;
    transition:opacity .3s,transform .5s cubic-bezier(.25,1,.5,1);pointer-events:none;
  }
  .cj-flag.show{opacity:1;transform:scale(1)}
  @media(prefers-reduced-motion:reduce){
    .cj-car2{display:none}
    .cj-flag{opacity:1;transform:scale(1);transition:none}
  }

  .orgrows{margin-top:44px;border-top:1px solid var(--stroke-dark)}
  .orgrow{
    display:grid;grid-template-columns:44px 1fr;gap:6px 24px;
    padding:24px 4px;border-bottom:1px solid var(--stroke-dark);
  }
  @media(min-width:800px){.orgrow{grid-template-columns:56px 250px 1fr;align-items:center}}
  .orgrow .no{font-family:'Instrument Serif',serif;font-style:italic;font-size:22px;color:var(--lime)}
  .orgrow .nm{font-family:'Archivo',sans-serif;font-weight:800;font-size:clamp(19px,2.2vw,26px);letter-spacing:-.01em}
  .orgrow .ds{color:var(--dim);font-size:14.5px;max-width:56ch}
  @media(max-width:799px){.orgrow .ds{grid-column:2}}
  .orgnote{margin-top:22px;color:var(--dim);font-size:14.5px;max-width:64ch}
  .orgnote b{color:var(--white)}

  .orghead{font-family:'Archivo',sans-serif;font-weight:800;font-size:clamp(24px,3.2vw,38px);letter-spacing:-.015em;margin:14px 4px 0}
  .orgintro{margin:14px 4px 26px;color:var(--dim);font-size:14.5px;max-width:62ch}
  .orgrow .ds b{color:var(--white);display:block;margin-bottom:4px}
  .orgrow .ds .ls{display:block;margin-top:8px;font-family:'Instrument Serif',serif;font-style:italic;font-size:16px;color:var(--lime)}
  @media(min-width:800px){.orgrow{align-items:start}.orgrow .nm{padding-top:2px}}

  .haus{margin-top:36px}
  .haus-dach{
    border:1px solid var(--stroke-dark);background:var(--card-dark);
    border-radius:var(--r-md);padding:18px 24px;text-align:center;
  }
  .hd-name{font-family:'Archivo',sans-serif;font-weight:800;font-size:17px;letter-spacing:.04em;text-transform:uppercase;display:block}
  .hd-sub{color:var(--dim);font-size:13px}
  .haus-stamm{width:2px;height:28px;background:var(--stroke-dark);margin:0 auto;position:relative}
  .haus-stamm::after{content:"";position:absolute;left:50%;bottom:-3px;transform:translateX(-50%);width:7px;height:7px;border-radius:50%;background:var(--lime)}
  .haus-row{display:flex;flex-direction:column;align-items:stretch}
  @media(min-width:900px){.haus-row{flex-direction:row}}
  .haus-step{
    flex:1;border:1px solid var(--stroke-dark);background:var(--card-dark);
    border-radius:var(--r-md);padding:22px 22px 20px;display:flex;flex-direction:column;gap:7px;
    transition:border-color .25s;
  }
  .haus-step:hover{border-color:#4A4430}
  .hs-no{font-family:'Instrument Serif',serif;font-style:italic;color:var(--lime);font-size:18px}
  .hs-name{font-family:'Archivo',sans-serif;font-weight:800;font-size:22px;letter-spacing:-.01em}
  .hs-kurz{color:var(--white);font-weight:600;font-size:14px}
  .hs-more summary{
    cursor:pointer;list-style:none;color:var(--dim2);font-size:12px;font-weight:600;
    letter-spacing:.08em;text-transform:uppercase;
  }
  .hs-more summary::-webkit-details-marker{display:none}
  .hs-more summary::after{content:" +";color:var(--lime)}
  .hs-more[open] summary::after{content:" \2013"}
  .hs-more p{color:var(--dim);font-size:13.5px;margin-top:8px}
  .hs-ls{
    margin-top:auto;padding-top:10px;font-family:'Instrument Serif',serif;font-style:italic;
    color:var(--lime);font-size:16px;
  }
  .haus-arrow{display:grid;place-items:center;color:var(--lime);padding:4px 12px;font-size:20px;flex:none}
  .haus-arrow::before{content:"\2193"}
  @media(min-width:900px){.haus-arrow::before{content:"\2192"}}
  .orgnote2{
    margin-top:28px;border:1px solid var(--lime);background:#211D12;
    border-radius:var(--r-md);padding:20px 26px;color:var(--dim);font-size:15px;
  }
  .orgnote2 b{color:var(--white)}
  html[data-theme="light"] .orgnote2{background:#FCF6DC}
  .orgjourney{margin-top:18px;color:var(--dim);font-size:14.5px;max-width:70ch}
  .orgjourney b{color:var(--lime);font-weight:600}
  .orgclaim{
    margin-top:16px;font-family:'Instrument Serif',serif;font-style:italic;
    font-size:clamp(19px,2.4vw,25px);color:var(--white);max-width:60ch;
  }

  .addonrow{display:flex;flex-wrap:wrap;gap:8px}
  .addon{
    cursor:pointer;font-family:'Inter',sans-serif;font-size:12.5px;font-weight:600;
    padding:9px 16px;border-radius:999px;border:1px solid var(--stroke-light);
    background:#fff;color:var(--ink-soft);transition:background .15s,border-color .15s,color .15s;
  }
  .addon:hover{border-color:#B8B4A4}
  .addon.sel{background:var(--lime);border-color:var(--lime);color:#141610}

  .chipline{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
  .chipline span{
    font-size:12.5px;font-weight:600;color:var(--dim);background:var(--card-dark2);
    border:1px solid var(--stroke-dark);border-radius:999px;padding:8px 16px;
  }

  /* ============ Vorher/Nachher-Listen (Beispiel) ============ */
  .vgl{list-style:none;margin-top:8px}
  .vgl li{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:#C9CDC0;padding:8px 0;border-bottom:1px solid #201D15}
  .vgl li::before{content:"\2715";color:var(--dim2);font-weight:700;flex:none;font-size:12px;margin-top:3px}
  .vgl.plus li::before{content:"\2713";color:var(--lime)}
  html[data-theme="light"] .vgl li{color:#3B3E33;border-color:#E5E2D6}

  /* ============ Feinschliff ============ */
  :focus-visible{outline:2px solid var(--lime);outline-offset:3px}
  html[data-theme="light"] :focus-visible{outline-color:#141610}
  html[data-theme="light"] .accent{color:#8A6D00}
  html{scroll-padding:90px 0 120px}
  .pillbtn:focus-visible,.opt:focus-visible,.slot:focus-visible,.langbtn:focus-visible,.toggle:focus-visible{outline-offset:2px}
  section[id],footer{scroll-margin-top:24px}
  @media(max-width:960px){section[id]{scroll-margin-top:78px}}
  .pillbtn{transition:transform .18s cubic-bezier(.25,1,.5,1),box-shadow .18s cubic-bezier(.25,1,.5,1),background .18s,color .18s,border-color .18s}
  .pillbtn:active{transform:translateY(0) scale(.98)}
  .lcard,.brcard,.kcard,.cj-step,.whyrow,.quick a{transition:transform .25s cubic-bezier(.25,1,.5,1),border-color .25s}
  .lcard:hover,.brcard:hover,.kcard:hover{transform:translateY(-3px);border-color:#4A4430}
  html[data-theme="light"] .lcard:hover,html[data-theme="light"] .brcard:hover,html[data-theme="light"] .kcard:hover{border-color:#C9C5B4}
  .whyrow:hover,.cj-step:hover{border-color:#4A4430}
  html[data-theme="light"] .whyrow:hover,html[data-theme="light"] .cj-step:hover{border-color:#C9C5B4}
  .faq summary{transition:color .15s}
  .lart img{transition:transform .5s cubic-bezier(.25,1,.5,1)}
  .lcard:hover .lart img{transform:scale(1.03)}
  @media(prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    .band-inner{animation:none}
    .pillbtn,.lcard,.brcard,.kcard,.cj-step,.whyrow,.lart img{transition:none}
    .lcard:hover,.brcard:hover,.kcard:hover{transform:none}
    .lcard:hover .lart img{transform:none}
  }

  /* Reveal */
  /* ============ Story-Einstieg v2 (19.09.2026), Aufbau nach levora-ai.de ============
     Regelwerk DESIGN.md (Apple): Farbwechsel als Trenner, enge Überschriften, ein Akzent.
     Aufwendige Zustände nur unter html.story (Desktop + Bewegung erlaubt) bzw. html.gsap. */
  :root{--ease-out:cubic-bezier(.16,1,.3,1);--ease-spring:cubic-bezier(.32,.72,0,1)}
  .wechsel{display:inline-block;overflow:hidden;vertical-align:bottom;padding:0 .04em .12em 0;margin-bottom:-.12em}
  .wechsel__w{display:inline-block}
  .pillbtn:active{transform:scale(.98)}

  /* Check als schmale Leiste */
  .check-bar{padding:64px 0}
  .check-bar .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:56px;align-items:end}
  .check-bar .wrap > .kick{grid-column:1;grid-row:1}
  .check-bar .wrap > h2{grid-column:1;grid-row:2}
  .check-bar .wrap > p:not(.kick){grid-column:1;grid-row:3}
  .check-bar .wrap > form{grid-column:2;grid-row:2 / span 2;align-self:center;margin-top:0!important}
  .check-bar .wrap > p.check-bar__hinweis:not(.kick){grid-column:2;grid-row:4}
  .check-bar .wrap > #sc-ergebnis{grid-column:1 / -1;grid-row:5}
  .check-bar__h{margin-top:14px;font-size:clamp(26px,2.6vw,36px);letter-spacing:-.03em;line-height:1.1}
  .check-bar .wrap > p:not(.kick){font-size:15.5px}

  /* Kapitel-Etikett */
  .kap{display:flex;align-items:center;gap:12px;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--dim)}
  .kap::before{content:"";width:28px;height:1px;background:currentColor;opacity:.6}
  .kap--ink{color:var(--ink-soft)}

  /* Der Moment */
  .moment{padding:128px 0 0;border-top:1px solid var(--line2)}
  .moment__h{margin-top:20px;max-width:18ch}
  .moment__uhr{display:inline-block;font-weight:800;font-size:clamp(80px,12vw,168px);line-height:.92;letter-spacing:-.05em;font-variant-numeric:tabular-nums}
  .moment .lead{margin-top:22px;max-width:46ch;font-size:17px;line-height:1.5;color:var(--dim)}
  .stage{position:relative;margin-top:64px}
  .stage__media{position:sticky;top:0;height:100vh;margin-bottom:-100vh;overflow:hidden}
  .stage__media picture{display:block;width:100%;height:100%}
  .stage__media img{width:100%;height:100%;object-fit:cover;object-position:55% 60%}
  @media(max-width:900px){.stage__media img{object-position:50% 70%}}
  .stage__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,12,10,.25) 0%,rgba(11,12,10,.55) 55%,rgba(11,12,10,.88) 100%)}
  .panels{position:relative;display:grid;gap:18px;padding:36vh 28px 72px;max-width:1116px;margin:0 auto}
  .panel{position:sticky;top:calc(88px + var(--i,0) * 16px);transform-origin:50% 0}
  .panel:nth-child(2){--i:1}.panel:nth-child(3){--i:2}
  .panel__body{padding:16px 4px 4px}
  .panel__body h3,.flip h3{margin-top:6px;font-size:clamp(24px,2.1vw,30px);letter-spacing:-.03em;line-height:1.08}
  .panel__body p{margin-top:8px;font-size:15.5px;line-height:1.5;color:var(--dim)}
  .flip{position:relative;background:var(--cream);color:var(--ink);padding:88px 0}
  .flip__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
  .flip .panel__n{color:var(--ink-soft)}
  .flip h3{color:var(--ink);font-size:clamp(32px,3.8vw,52px)}
  .flip p{margin-top:14px;max-width:38ch;font-size:17px;line-height:1.5;color:var(--ink-soft)}
  .flip__link{display:inline-flex;gap:8px;margin-top:14px;padding:10px 0;font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
  .flip__link:hover{text-decoration-thickness:2px}

  /* Desktop mit Bewegung: Bühne wird angepinnt, Karten fahren ein, dann kippt die Fläche */
  html.story.gsap .stage{height:100vh;margin-top:64px;overflow:hidden}
  html.story.gsap .stage__media{position:absolute;inset:0;height:auto;margin:0}
  html.story.gsap .panels{position:absolute;inset:0;grid-template-columns:repeat(3,minmax(0,1fr));align-content:center;align-items:stretch;gap:22px;padding:0 28px}
  html.story.gsap .panel{position:relative;top:auto}
  html.story.gsap .flip{position:absolute;inset:0;display:flex;align-items:center;padding:0}
  html.story.gsap .flip__grid{width:100%}
  @media(min-width:901px){
    html:not(.gsap) .panels{grid-template-columns:repeat(3,minmax(0,1fr));align-items:end}
    html:not(.gsap) .panel{position:relative;top:auto}
  }

  /* Die Idee dahinter */
  .idee{padding:144px 0 200px;border-top:1px solid var(--line2)}
  .idee__grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.8fr);gap:64px;align-items:end}
  .idee__h{margin-top:20px;max-width:19ch;font-size:clamp(32px,4vw,56px);letter-spacing:-.035em;line-height:1.06}
  .idee__h .serif{display:inline;padding-bottom:.08em}
  .idee__p{margin-top:28px;max-width:54ch;font-size:18px;line-height:1.55;color:var(--dim);text-wrap:pretty}
  .idee__zitat{margin:0;padding-top:22px;border-top:1px solid var(--line2)}
  .idee__zitat .idee__leitsatz{font-size:clamp(26px,2.4vw,34px);line-height:1.2;color:var(--white)}

  /* Rechner */
  .rechner{position:relative;z-index:2;margin-top:-32px;border-radius:32px 32px 0 0;padding:112px 0 104px}
  .rechner__h{margin-top:18px;max-width:22ch;letter-spacing:-.035em}
  .rechner__h .serif{display:block;padding-bottom:.08em}
  .rechner__sub{margin-top:18px;font-size:17px;color:var(--ink-soft)}
  .rechner__shell{margin-top:44px;padding:6px;border-radius:32px;background:rgba(20,22,16,.045);border:1px solid rgba(20,22,16,.08)}
  .rechner__core{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);border-radius:26px;overflow:hidden;background:#FBFAF6;box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}
  .rechner__regler{padding:36px 40px;display:grid;gap:30px;align-content:center}
  .regler__kopf{display:flex;justify-content:space-between;align-items:flex-end;gap:20px}
  .regler label{font-size:15.5px;line-height:1.4;color:var(--ink);max-width:40ch}
  .regler__hilfe{margin-top:6px;font-size:13px;color:#4A4D42}
  .regler output{flex:none;font-family:'Archivo',sans-serif;font-weight:700;font-size:21px;letter-spacing:-.01em;color:var(--ink);font-variant-numeric:tabular-nums}
  .regler input[type=range]{--p:50%;width:100%;margin-top:14px;height:28px;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer;touch-action:pan-y}
  .regler input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:linear-gradient(90deg,#141610 var(--p),#DDDACF var(--p))}
  .regler input[type=range]::-moz-range-track{height:4px;border-radius:4px;background:linear-gradient(90deg,#141610 var(--p),#DDDACF var(--p))}
  .regler input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;margin-top:-10px;border-radius:50%;background:var(--lime);border:2px solid #141610;box-shadow:0 4px 12px -4px rgba(20,22,16,.5);transition:transform .2s var(--ease-out)}
  .regler input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--lime);border:2px solid #141610}
  .regler input[type=range]:active::-webkit-slider-thumb{transform:scale(1.15)}
  .regler input[type=range]:focus-visible{outline:2px solid #141610;outline-offset:6px;border-radius:6px}
  .rechner__ergebnis{background:#141310;color:#F4F4EF;padding:36px 36px 34px;display:flex;flex-direction:column}
  .kap--ergebnis{color:#9BA092}
  .rechner__summe{margin-top:10px;font-family:'Archivo',sans-serif;font-weight:800;font-size:clamp(44px,5vw,70px);line-height:1;letter-spacing:-.04em;color:var(--lime);font-variant-numeric:tabular-nums;transition:transform .35s var(--ease-out)}
  .rechner__summe.puls{transform:scale(1.03)}
  .rechner__monat{margin-top:12px;font-size:15px;color:#9BA092}
  .rechner__zeit{margin-top:18px;padding-top:18px;border-top:1px solid #2A2721;font-size:15.5px;color:#D8D8D0}
  .rechner__zeit b{color:#F4F4EF}
  .rechner__anker{margin-top:18px;padding-top:18px;border-top:1px solid #2A2721;font-size:15.5px;color:#F4F4EF;font-weight:600}
  .rechner__cta{margin-top:26px;align-self:flex-start}
  .rechner__hinweis{margin-top:16px;font-size:13.5px;color:var(--ink-soft)}
  html[data-theme="light"] .rechner{background:#E7E4DB}

  @media(max-width:900px){
    .check-bar{padding:56px 0}
    .check-bar .wrap{grid-template-columns:1fr}
    .check-bar .wrap > *{grid-column:1!important;grid-row:auto!important}
    .check-bar .wrap > form{margin-top:24px!important}
    .moment{padding-top:88px}
    .panels{padding:30vh 20px 56px}
    .panel{top:calc(80px + var(--i,0) * 14px)}
    .flip{padding:64px 0}
    .flip__grid{grid-template-columns:1fr;gap:32px}
    .idee{padding:96px 0 128px}
    .idee__grid{grid-template-columns:1fr;gap:44px}
    .rechner{padding:80px 0 72px;border-radius:24px 24px 0 0}
    .rechner__core{grid-template-columns:1fr}
    .rechner__regler{padding:28px 22px}
    .regler__kopf{flex-direction:column;align-items:flex-start;gap:6px}
    .rechner__ergebnis{padding:28px 22px}
  }
  @media(prefers-reduced-motion:reduce){
    .panel{position:relative;top:auto}
  }
  /* Ziel der Hero-Fahrt, Check-Button als Umriss, Lesefortschritt */
  .check-bar__btn{background:transparent;border:1.5px solid var(--lime);color:var(--white);transition:background-color .25s var(--ease-out),color .25s var(--ease-out),transform .18s var(--ease-out)}
  .check-bar__btn:hover{background:var(--lime);color:var(--ink)}
  .check-bar__btn:active{transform:scale(.98)}
  html[data-theme="light"] .check-bar__btn{border-color:#141610}
  html[data-theme="light"] .check-bar__btn:hover{background:#141610;color:#F4F4EF}
  .moment__h,.idee__h,.rechner__h,.check-bar__h,.flip h3,.panel__body h3{text-wrap:balance}
  .lesefortschritt{position:fixed;top:0;left:230px;right:0;height:2px;z-index:70;pointer-events:none}
  .lesefortschritt i{display:block;height:100%;background:var(--lime);transform:scaleX(0);transform-origin:0 50%}
  @media(max-width:960px){.lesefortschritt{left:0}}
  @media(prefers-reduced-motion:reduce){.lesefortschritt{display:none}}
  /* ============ Story hell (19.09.2026): Papier-Töne des hellen Schemas, in beiden Farbschemas ============ */
  .story-hell{--bg:#F4F2EC;--card-dark:#FFFFFF;--card-dark2:#FFFFFF;--stroke-dark:#E3E0D6;--line2:#E3E0D6;--white:#141610;--dim:#4A4D42;--dim2:#62655A;--cream:#E9E6DD;background:var(--bg);color:var(--white)}
  .story-hell :focus-visible{outline-color:#141610}
  .story-hell .accent{color:inherit;background:linear-gradient(180deg,transparent 56%,var(--lime) 56%,var(--lime) 90%,transparent 90%);padding:0 .08em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
  .story-hell .check-bar__btn{border-color:#141610;color:#141610}
  .story-hell .check-bar__btn:hover{background:#141610;color:#F4F4EF}
  .story-hell .stage__scrim{background:linear-gradient(180deg,rgba(244,242,236,0) 45%,rgba(244,242,236,.35) 100%)}
  .story-hell .flip{background:#FBFAF6}
  .rechner{background:#FFFFFF;box-shadow:0 -34px 60px -44px rgba(50,38,12,.35)}
  .rechner__core{background:#F7F5EF}
  html[data-theme="light"] .rechner{background:#FFFFFF}
  /* ============ Clean-Fassung (19.09.2026): ruhiger Hero, Foto-Szenen, echter Produkt-Screenshot ============ */
  .story-hell.dark-sec::before{display:none}
  .hero--story{padding:clamp(72px,11vh,132px) 0 0;text-align:left;overflow:clip}
  .hero--story .hs-title{margin:0;max-width:17ch;font-size:clamp(40px,5vw,76px);letter-spacing:-.045em;line-height:.98}
  .hs-title .serif{letter-spacing:-.01em;font-size:1.04em}
  .hs-title .accent{-webkit-box-decoration-break:clone;box-decoration-break:clone}
  .hs-unten{margin-top:clamp(36px,5vh,56px);display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:28px 48px}
  .hero--story p.sub{margin:0;max-width:40ch;font-size:18px;line-height:1.5;color:var(--dim)}
  .hero--story .ctas{margin:0;justify-content:flex-start}
  @media(min-width:1100px){
    .hero--story .hs-inner{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,1fr);gap:clamp(40px,5vw,84px);align-items:center}
    .hero--story .hs-inner{grid-template-columns:minmax(0,1.12fr) minmax(0,1fr)}
    .hero--story .hs-title{font-size:clamp(32px,2.95vw,44px);max-width:17ch}
    .hero--story .hs-unten{display:block}
    .hero--story .ctas{flex-wrap:wrap;margin-top:26px}
    .hero--story .ctas .pillbtn{white-space:nowrap}
    .hs-text,.zeitsprung{grid-column:1}
    .vn{grid-column:2;grid-row:1;margin-top:0}
    .zeitsprung{grid-column:1/-1}
  }

  .hs-facts{margin:clamp(48px,7vh,88px) 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line2)}
  .hs-facts > div{padding:22px 24px 40px 0}
  .hs-facts > div + div{padding-left:24px;border-left:1px solid var(--line2)}
  .hs-facts dt{font-family:'Archivo',sans-serif;font-weight:700;font-size:clamp(20px,1.8vw,26px);letter-spacing:-.02em;color:var(--white)}
  .hs-facts dd{margin:4px 0 0;font-size:14.5px;color:var(--dim)}
  html.story .hs-title{visibility:hidden;animation:zeigen 0s 2.5s forwards}
  html.story.gsap .hs-title{animation:none}
  html.story .hs-title.ist-bereit{visibility:visible}
  @keyframes zeigen{to{visibility:visible}}
  .panel{display:flex;flex-direction:column;border-radius:20px;overflow:hidden;background:#FFFFFF;box-shadow:0 1px 0 rgba(20,22,16,.04),0 28px 56px -30px rgba(50,38,12,.45)}
  .panel__bild{display:block;aspect-ratio:16/10;overflow:hidden;background:#EDE9DF}
  .panel__bild img{width:100%;height:100%;object-fit:cover;display:block}
  .panel__body{padding:18px 22px 24px}
  .panel__body h3{margin-top:0;color:#141610}
  .panel__body p{color:#4A4D42}
  .flip__bild{margin:0}
  .stage__ruhe{position:absolute;inset:0;background:#F4F2EC;opacity:0;pointer-events:none}
  html.story.gsap .flip__grid{grid-template-columns:minmax(0,.75fr) minmax(0,1.35fr)}
  .flip__bild img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid #E3E0D6;box-shadow:0 30px 70px -36px rgba(50,38,12,.45)}
  .flip__bild figcaption{margin-top:12px;font-size:13.5px;color:#4A4D42}
  html.lenis,html.lenis body{height:auto}
  .lenis.lenis-smooth{scroll-behavior:auto!important}
  .lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
  .lenis.lenis-stopped{overflow:hidden}
  @media(max-width:900px){
    .hero--story{padding-top:64px}
    .hero--story .hs-title{font-size:clamp(30px,8.2vw,46px)}
    .hs-unten{flex-direction:column;align-items:flex-start}
    .hs-facts{grid-template-columns:1fr;margin-top:56px}
    .hs-facts > div,.hs-facts > div + div{padding:16px 0;border-left:0;border-top:1px solid var(--line2)}
    .hs-facts > div:first-child{border-top:0}
  }
  /* Bewerbungsmodul */
  .bewerbung{padding:128px 0 136px;border-top:1px solid var(--line2)}
  .bew__grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:64px;align-items:center}
  .bew__h{max-width:16ch;letter-spacing:-.035em;line-height:1.06}
  .bew__h .serif{padding-bottom:.08em}
  .bew__p{margin-top:20px;max-width:52ch;font-size:17px;line-height:1.55;color:var(--dim)}
  .bew__cta{margin-top:32px}
  .bew__demo{background:#FFFFFF;border:1px solid #E3E0D6;border-radius:22px;padding:26px 26px 28px;box-shadow:0 30px 60px -36px rgba(50,38,12,.4);color:#141610}
  .bew__kopf{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
  .bew__kopf b{font-family:'Archivo',sans-serif;font-size:18px;letter-spacing:-.01em}
  .bew__kopf span{font-size:12.5px;color:#4A4D42}
  .bew__schritte{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:16px 0 22px;padding:0}
  .bew__schritte li{height:4px;border-radius:4px;background:#E6E3D9;transition:background-color .3s var(--ease-out)}
  .bew__schritte li.ist-an{background:#141610}
  .bew__frage{font-family:'Archivo',sans-serif;font-weight:700;font-size:21px;letter-spacing:-.02em;margin-bottom:14px}
  .bew__wahl{display:grid;gap:10px}
  .bew__wahl button{min-height:52px;padding:0 18px;border-radius:14px;border:1px solid #DDD9CD;background:#F7F5EF;color:#141610;font:inherit;font-weight:600;text-align:left;cursor:pointer;transition:border-color .2s,background-color .2s,transform .15s}
  .bew__wahl button:hover{border-color:#141610;background:#FFFFFF}
  .bew__wahl button:active{transform:scale(.985)}
  .bew__schritt label{display:block;margin-top:12px;font-size:14px;font-weight:600;color:#141610}
  .bew__schritt input{width:100%;min-height:50px;margin-top:6px;padding:0 14px;border-radius:12px;border:1px solid #CFCABB;background:#FFFFFF;color:#141610;font:inherit;font-size:16px}
  .bew__schritt input:focus-visible{outline:2px solid #141610;outline-offset:2px}
  .bew__fehler{margin-top:10px;font-size:14px;color:#98302F}
  .bew__senden{margin-top:18px;width:100%;justify-content:center;background:#141610;color:#F4F4EF}
  .bew__senden:hover{background:#2A2720}
  .bew__fertig .bew__danke{color:#141610;font-family:'Archivo',sans-serif;font-weight:700;font-size:24px;letter-spacing:-.02em;margin-bottom:6px}
  .bew__fertig p{font-size:15px;color:#4A4D42}
  .bew__zusammen{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;margin:14px 0 18px;padding:14px 16px;border-radius:14px;background:#F7F5EF;font-size:15px}
  .bew__zusammen dt{color:#4A4D42}
  .bew__zusammen dd{margin:0;font-weight:600}
  .bew__neu{background:none;border:0;padding:8px 0;font:inherit;font-size:14px;font-weight:600;color:#141610;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
  @media(max-width:900px){
    .bewerbung{padding:88px 0 96px}
    .bew__grid{grid-template-columns:1fr;gap:40px}
    .bew__demo{padding:22px 18px 24px}
  }
  /* ============ HEADER "BOLD" (24.09.2026), Vorbilder: Creatix / BRVND ============
     Schwarze Bühne, Versalien in Archivo 900, Gelb als einziger Akzent,
     rotierendes Sticker-Badge, morphendes Objekt, Zahlenleiste, Laufband. */
  .hx{position:relative;isolation:isolate;overflow:clip;background:#0C0D09;color:#F4F4EF;padding:clamp(104px,14vh,150px) 0 0}
  .hx__grain{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.5;background-image:radial-gradient(rgba(255,255,255,.055) 1px,transparent 1px);background-size:3px 3px}
  .hx__blob{position:absolute;z-index:0;top:-16%;right:-12%;width:min(40vw,560px);aspect-ratio:1;pointer-events:none;opacity:.9;filter:blur(2px)}
  .hx::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(100deg,#0C0D09 30%,rgba(12,13,9,.66) 52%,rgba(12,13,9,.18) 76%,transparent 100%)}
  .hx__blob svg{width:100%;height:100%}
  .hx__inner{position:relative;z-index:2}
  .hx a{text-decoration:none}
  .hx__btn,.hx__ghost{text-decoration:none!important;background-image:none!important}
  .hx__kick{display:inline-flex;align-items:center;gap:10px;padding:9px 16px;border:1px solid rgba(244,244,239,.22);border-radius:999px;font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#E9E9E2}
  .hx__punkt{width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 4px rgba(244,201,0,.18)}
  .hx__h{margin:clamp(26px,4vh,44px) 0 0;font-family:'Archivo',sans-serif;font-weight:900;text-transform:uppercase;font-size:clamp(38px,5.6vw,86px);line-height:.94;letter-spacing:-.035em;color:#F7F7F2}
  .hx__zeile{display:block;overflow:hidden;padding-bottom:.06em}
  .hx__w{display:inline-block}
  .hx__w--gelb{color:var(--lime)}
  .hx__pill{display:inline-block;vertical-align:middle;margin-left:.4em;padding:.45em .9em;border-radius:999px;background:var(--lime);color:#141610;font-size:clamp(11px,1.05vw,15px);font-weight:700;letter-spacing:.01em;text-transform:none;line-height:1.2;transform:translateY(-.2em) rotate(-1.5deg)}
  .hx__unten{margin-top:clamp(30px,5vh,52px);display:flex;flex-wrap:wrap;align-items:center;gap:22px 44px}
  .hx__sub{max-width:44ch;font-size:clamp(15px,1.2vw,18px);line-height:1.55;color:rgba(244,244,239,.74)}
  .hx__sub b{color:#F4F4EF;font-weight:700}
  .hx__ctas{display:flex;flex-wrap:wrap;gap:12px}
  .hx__btn{display:inline-flex;align-items:center;gap:14px;min-height:56px;padding:0 10px 0 26px;border-radius:999px;background:var(--lime);color:#141610;font-size:13.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;transition:background .35s,transform .35s}
  .hx__btnpunkt{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#141610;color:var(--lime);font-size:15px;transition:transform .45s cubic-bezier(.16,1,.3,1)}
  .hx__btn:hover{background:#FFD91F}
  .hx__btn:hover .hx__btnpunkt{transform:translate(3px,-3px)}
  .hx__ghost{display:inline-flex;align-items:center;gap:10px;min-height:56px;padding:0 26px;border-radius:999px;border:1px solid rgba(244,244,239,.28);font-size:13.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#F4F4EF;transition:border-color .3s,background .3s}
  .hx__ghost:hover{border-color:var(--lime);background:rgba(244,201,0,.08)}
  .hx__sticker{position:absolute;right:0;top:-6px;display:grid;place-items:center;width:clamp(96px,10vw,132px);aspect-ratio:1;border-radius:50%;background:rgba(20,22,16,.5);border:1px solid rgba(244,201,0,.35);backdrop-filter:blur(6px)}
  .hx__sticker svg{position:absolute;inset:0;width:100%;height:100%;animation:hxDreh 22s linear infinite}
  .hx__sticker text{font-family:'Archivo',sans-serif;font-size:9.2px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;fill:#F4F4EF}
  .hx__stickerpfeil{font-size:22px;color:var(--lime)}
  @keyframes hxDreh{to{transform:rotate(360deg)}}
  .hx__fakten{position:relative;z-index:2;list-style:none;margin:clamp(56px,8vh,96px) auto 0;padding:26px 0 30px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px 28px;border-top:1px solid rgba(244,244,239,.16)}
  .hx__fakten li{display:grid;gap:6px;min-width:0}
  .hx__fakten b{font-family:'Archivo',sans-serif;font-size:clamp(28px,3.2vw,46px);font-weight:900;letter-spacing:-.03em;line-height:1;color:var(--lime)}
  .hx__fakten span{font-size:13px;line-height:1.4;color:rgba(244,244,239,.66)}
  .hx__band{position:relative;z-index:2;overflow:hidden;background:var(--lime);color:#141610}
  .hx__bandtrack{display:flex;width:max-content;padding:13px 0;font-family:'Archivo',sans-serif;font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
  .hx__bandtrack span{padding-right:34px;white-space:nowrap}
  .hx__bandtrack i{font-style:normal;padding-left:34px;opacity:.55}
  @media(prefers-reduced-motion:no-preference){
    .hx__bandtrack{animation:hxBand 34s linear infinite}
    .hx__zeile .hx__w,.hx__zeile .hx__pill{transform:translateY(106%);animation:hxZeile 1.1s cubic-bezier(.16,1,.3,1) forwards}
    .hx__zeile:nth-child(2) .hx__w,.hx__zeile:nth-child(2) .hx__pill{animation-delay:.12s}
    .hx__zeile:nth-child(3) .hx__w,.hx__zeile:nth-child(3) .hx__pill{animation-delay:.24s}
    .hx__kick,.hx__unten,.hx__fakten li,.hx__sticker{opacity:0;animation:hxAuf .9s cubic-bezier(.16,1,.3,1) forwards}
    .hx__kick{animation-delay:.05s}
    .hx__unten{animation-delay:.5s}
    .hx__sticker{animation-delay:.7s}
    .hx__fakten li{animation-delay:calc(.6s + var(--i,0) * .08s)}
    .hx__blob{animation:hxSchweben 13s ease-in-out infinite}
  }
  @keyframes hxBand{to{transform:translateX(-50%)}}
  @keyframes hxZeile{to{transform:none}}
  @keyframes hxAuf{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
  @keyframes hxSchweben{0%,100%{transform:translate3d(0,0,0) rotate(0)}50%{transform:translate3d(-2%,3%,0) rotate(6deg)}}
  #zeitsprung-sec{padding-top:clamp(64px,9vh,110px)}
  #zeitsprung-sec .zeitsprung{margin-top:0}
  @media(max-width:1100px){
    .hx__blob{top:auto;bottom:-4%;right:-20%;width:min(80vw,560px);opacity:.7}
    .hx__sticker{position:static;margin-top:28px}
  }
  @media(max-width:760px){
    .hx{padding-top:96px}
    .hx__h{font-size:clamp(34px,10.2vw,54px)}
    .hx__pill{display:block;width:max-content;margin:.4em 0 0;transform:rotate(-1.5deg)}
    .hx__fakten{grid-template-columns:repeat(2,minmax(0,1fr))}
  }

  /* ============ STAPELKARTEN (24.09.2026, Vorbild Creatix) ============
     Jede Karte klebt oben fest, die nächste schiebt sich darüber,
     die untere wird dabei kleiner und dunkler (GSAP in story.js). */
  .stapel{position:relative;background:#0C0D09;color:#F4F4EF;padding:clamp(88px,12vh,140px) 0 clamp(60px,10vh,120px)}
  .stapel__kopf{margin-bottom:clamp(36px,6vh,64px)}
  .stapel__kick{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#C9CBC1}
  .stapel__kick span{width:8px;height:8px;border-radius:50%;background:var(--lime)}
  .stapel__h{margin-top:18px;max-width:16ch;font-family:'Archivo',sans-serif;font-weight:900;text-transform:uppercase;font-size:clamp(34px,5vw,74px);line-height:.95;letter-spacing:-.03em;color:#F7F7F2}
  .stapel__mark{color:#141610;background:var(--lime);padding:0 .12em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
  .stapel__liste{display:grid;gap:clamp(18px,3vh,28px)}
  .skarte{position:sticky;top:calc(96px + var(--i) * 16px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(22px,3vw,48px);align-items:center;min-height:min(72vh,600px);padding:clamp(22px,3vw,40px);border-radius:32px;transform-origin:50% 0;will-change:transform}
  .skarte--schwarz{background:#16180F;border:1px solid #2A2D22;color:#F4F4EF}
  .skarte--gelb{background:var(--lime);color:#141610}
  .skarte--creme{background:#F3F0E7;color:#141610}
  .skarte__nr{display:inline-block;padding:7px 14px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border:1px solid currentColor;opacity:.85}
  .skarte h3{margin-top:22px;font-family:'Archivo',sans-serif;font-weight:900;text-transform:uppercase;font-size:clamp(28px,3.4vw,52px);line-height:.96;letter-spacing:-.03em;color:inherit}
  .skarte p{margin-top:18px;max-width:42ch;font-size:clamp(15px,1.15vw,17px);line-height:1.6;opacity:.82}
  .skarte__tags{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
  .skarte__tags li{padding:7px 13px;border-radius:999px;font-size:12.5px;font-weight:600;background:rgba(255,255,255,.08)}
  .skarte--gelb .skarte__tags li,.skarte--creme .skarte__tags li{background:rgba(20,22,16,.08)}
  .skarte__link{display:inline-flex;align-items:center;gap:10px;margin-top:26px;min-height:48px;padding:0 20px;border-radius:999px;font-size:13px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;text-decoration:none;background:var(--lime);color:#141610;transition:transform .3s}
  .skarte--gelb .skarte__link{background:#141610;color:var(--lime)}
  .skarte__link:hover{transform:translateY(-2px)}
  .skarte__bild{height:100%;min-height:260px;border-radius:22px;overflow:hidden}
  .skarte__bild img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
  .skarte:hover .skarte__bild img{transform:scale(1.04)}
  @media(max-width:900px){
    .skarte{grid-template-columns:1fr;top:calc(76px + var(--i) * 12px);min-height:0}
    .skarte__bild{min-height:200px;aspect-ratio:16/10;height:auto}
  }

  /* ============ GEMISCHTES RASTER (24.09.2026, Vorbild BRVND) ============
     Bildkarten und Textkarten im Wechsel, eine große Handlungs-Karte. */
  .bento-sec{background:#F3F0E7;padding:clamp(88px,12vh,140px) 0}
  .bento__kopf{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:clamp(26px,4vh,40px)}
  .bento__h{font-family:'Archivo',sans-serif;font-weight:900;text-transform:uppercase;font-size:clamp(36px,5.4vw,80px);line-height:.92;letter-spacing:-.035em;color:#141610}
  .bento__mark{background:var(--lime);padding:0 .1em}
  .bento__alle{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#141610;text-decoration:none;border-bottom:2px solid #141610;padding-bottom:4px}
  .bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(250px,auto);gap:14px}
  .bk{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-width:0;overflow:hidden;border-radius:22px;padding:22px;text-decoration:none;color:inherit}
  .bk--bild{padding:0;background:#141610}
  .bk--bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.16,1,.3,1),filter .6s}
  .bk--bild::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(12,13,9,.82),rgba(12,13,9,0) 58%)}
  a.bk--bild:hover img{transform:scale(1.05)}
  .bk__label{position:relative;z-index:1;display:grid;gap:3px;padding:20px 22px;color:#F4F4EF}
  .bk__label b{font-family:'Archivo',sans-serif;font-size:20px;font-weight:900;text-transform:uppercase;letter-spacing:-.01em}
  .bk__label i{font-style:normal;font-size:13px;color:rgba(244,244,239,.78)}
  .bk--gelb{background:var(--lime);color:#141610}
  .bk--schwarz{background:#141610;color:#F4F4EF;justify-content:space-between}
  .bk--creme{background:#fff;border:1px solid #DFDBCF;color:#141610;justify-content:space-between}
  .bk__gross{font-family:'Archivo',sans-serif;font-weight:900;text-transform:uppercase;font-size:clamp(20px,1.85vw,28px);line-height:1;letter-spacing:-.02em;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
  .bk__klein{margin-top:14px;font-size:13.5px;line-height:1.45;opacity:.78}
  .bk__mittel{font-size:17px;line-height:1.45;font-weight:600;color:#141610}
  .bk__kick{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.75}
  .bk__liste{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:9px;font-size:15px;font-weight:600}
  .bk__liste li{display:flex;align-items:center;gap:10px}
  .bk__liste li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--lime);flex:none}
  .bk__link{margin-top:18px;font-size:13px;font-weight:700;color:var(--lime);text-decoration:none}
  .bk--cta{grid-column:span 2;background:var(--lime);color:#141610;flex-direction:row;align-items:flex-end;justify-content:space-between;gap:20px;transition:background .3s}
  .bk--cta .bk__gross{font-size:clamp(28px,3.2vw,48px);max-width:14ch}
  .bk__pfeil{display:grid;place-items:center;flex:none;width:64px;height:64px;border-radius:50%;background:#141610;color:var(--lime);font-size:26px;transition:transform .45s cubic-bezier(.16,1,.3,1)}
  .bk--cta:hover{background:#FFD91F}
  .bk--cta:hover .bk__pfeil{transform:translate(4px,-4px) rotate(8deg)}
  @media(max-width:1100px){
    .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  }
  @media(max-width:620px){
    .bento{grid-template-columns:1fr;grid-auto-rows:minmax(220px,auto)}
    .bk--cta{grid-column:auto}
    .bento__kopf{flex-direction:column;align-items:flex-start}
  }

  /* Zeitsprung Früher / Heute */
  .hero--story{padding-bottom:clamp(96px,14vh,160px)}
  .zeitsprung{margin-top:clamp(72px,12vh,128px);overflow-x:clip}
  @media(max-width:900px){.zeitsprung{margin-top:84px}}
  .zs__kopf{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:32px;padding-bottom:14px;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#4A4D42}
  .zs__liste{list-style:none;margin:0;padding:0}
  .zs__liste li{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);min-width:0;gap:32px;align-items:baseline;padding:26px 0;border-top:1px solid #DFDBCF}
  .zs__liste li:last-child{border-bottom:1px solid #DFDBCF}
  .zs__alt{position:relative;justify-self:start;min-width:0;overflow-wrap:break-word;font-size:clamp(17px,1.5vw,21px);color:#6B6E63;text-decoration:line-through;text-decoration-thickness:2px}
  .zs__morgen{display:block;margin-top:10px;font-family:'Instrument Serif',serif;font-weight:400;font-size:.82em;letter-spacing:0;color:#141610}
  .zs__morgen em{font-style:italic;background:linear-gradient(180deg,transparent 56%,var(--lime) 56%,var(--lime) 90%,transparent 90%);padding:0 .08em}
  .zs__neu{min-width:0;overflow-wrap:break-word;font-family:'Archivo',sans-serif;font-weight:700;font-size:clamp(22px,2.3vw,34px);letter-spacing:-.025em;line-height:1.15;color:#141610;text-wrap:balance}
  html.gsap .zs__alt{text-decoration:none}
  html.gsap .zs__alt::after{content:"";position:absolute;left:-2px;right:-2px;top:54%;height:2px;background:#141610;transform:scaleX(var(--strich,1));transform-origin:0 50%}
  @media(max-width:900px){
    .zs__kopf{display:none}
    .zs__liste li{grid-template-columns:1fr;gap:6px;padding:20px 0}
  }
  /* Demos */
  .demos{padding:112px 0 120px;border-top:1px solid var(--line2)}
  .demos__h{max-width:18ch;letter-spacing:-.035em;line-height:1.06}
  .demos__p{margin-top:18px;max-width:58ch;font-size:17px;line-height:1.55;color:var(--dim)}
  .demos__reiter{margin-top:40px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
  .demos__reiter button{display:grid;gap:2px;text-align:left;padding:16px 18px;border-radius:16px;border:1px solid #DFDBCF;background:#FFFFFF;color:#141610;font:inherit;cursor:pointer;transition:border-color .2s,background-color .2s,transform .15s}
  .demos__reiter button b{font-family:'Archivo',sans-serif;font-size:18px;letter-spacing:-.01em}
  .demos__reiter button span{font-size:13.5px;color:#4A4D42}
  .demos__reiter button:hover{border-color:#141610}
  .demos__reiter button:active{transform:scale(.985)}
  .demos__reiter button[aria-selected="true"]{background:#141610;border-color:#141610;color:#F4F4EF}
  .demos__reiter button[aria-selected="true"] span{color:#C9CBC1}
  .demos__rahmen{margin-top:14px;border-radius:20px;border:1px solid #DFDBCF;background:#FFFFFF;overflow:hidden;box-shadow:0 40px 80px -48px rgba(50,38,12,.5)}
  .demos__leiste{display:flex;align-items:center;gap:16px;padding:12px 16px;border-bottom:1px solid #E8E5DC;background:#FBFAF6}
  .demos__url{flex:1;min-width:0;padding:8px 14px;border-radius:999px;background:#F1EEE6;font-size:13.5px;color:#4A4D42;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .demos__ansicht{display:flex;padding:3px;border-radius:999px;background:#F1EEE6}
  .demos__ansicht button{min-height:34px;padding:0 14px;border-radius:999px;border:0;background:transparent;font:inherit;font-size:13.5px;font-weight:600;color:#4A4D42;cursor:pointer}
  .demos__ansicht button[aria-pressed="true"]{background:#FFFFFF;color:#141610;box-shadow:0 1px 3px rgba(20,22,16,.12)}
  .demos__neu{font-size:13.5px;font-weight:600;color:#141610;text-decoration:none;white-space:nowrap}
  .demos__neu:hover{text-decoration:underline;text-underline-offset:3px}
  .demos__buehne{display:flex;justify-content:center;background:#EDEAE1;height:min(76vh,780px)}
  .demos__buehne iframe{display:block;width:100%;height:100%;border:0;background:#FFFFFF;transition:width .45s var(--ease-out)}
  .demos__buehne.ist-handy{padding:20px 0}
  .demos__buehne.ist-handy iframe{width:390px;max-width:100%;border-radius:28px;box-shadow:0 0 0 8px #141610,0 30px 60px -30px rgba(20,22,16,.6)}
  .demos__hinweis{margin-top:14px;font-size:13.5px;color:#4A4D42}
  /* Echte Referenzen (19.09.2026) */
  .refs{margin-top:104px;padding-top:56px;border-top:1px solid #DFDBCF}
  .refs__h{font-family:'Archivo',sans-serif;font-size:clamp(30px,3.4vw,44px);font-weight:700;letter-spacing:-.03em;line-height:1.08;color:#141610}
  .refs__p{margin-top:12px;max-width:52ch;font-size:17px;line-height:1.55;color:#4A4D42}
  .refs__liste{list-style:none;margin:44px 0 0;padding:0;display:grid;gap:72px}
  .ref{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:clamp(40px,5vw,80px);align-items:center}
  .ref__bild{position:relative;display:block;padding:0 18px 36px 0;color:inherit;text-decoration:none;border-radius:18px}
  .ref__browser{display:block;border-radius:16px;overflow:hidden;border:1px solid #DFDBCF;background:#FFFFFF;box-shadow:0 40px 80px -48px rgba(50,38,12,.55)}
  .ref__leiste{display:flex;align-items:center;gap:6px;padding:10px 14px;background:#FBFAF6;border-bottom:1px solid #E8E5DC;font-size:12.5px;color:#4A4D42}
  .ref__leiste i{width:9px;height:9px;border-radius:50%;background:#DDD8CB}
  .ref__leiste span{margin-left:10px;padding:4px 12px;border-radius:999px;background:#F1EEE6}
  .ref__browser img{display:block;width:100%;height:auto;transition:transform .9s var(--ease-out)}
  .ref__handy{position:absolute;right:0;bottom:0;width:24%;height:auto;border-radius:22px;box-shadow:0 0 0 6px #141610,0 30px 50px -24px rgba(20,22,16,.55);transition:transform .6s var(--ease-out)}
  .ref__bild:hover .ref__browser img{transform:scale(1.02)}
  .ref__bild:hover .ref__handy{transform:translateY(-6px)}
  .ref__bild:focus-visible{outline:3px solid #141610;outline-offset:6px}
  .ref__ort{font-size:13.5px;font-weight:600;letter-spacing:.02em;color:#4A4D42}
  .ref__name{margin-top:8px;font-family:'Archivo',sans-serif;font-size:clamp(24px,2.4vw,32px);font-weight:700;letter-spacing:-.025em;line-height:1.1;color:#141610}
  .ref__was{margin-top:14px;max-width:46ch;font-size:16.5px;line-height:1.6;color:#2E3128}
  .ref__link{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:18px;font-weight:700;color:#141610;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px;text-decoration-color:#F4C900}
  .ref__link:hover{text-decoration-color:#141610}
  @media (max-width:900px){
    .refs{margin-top:72px;padding-top:44px}
    .ref{grid-template-columns:1fr;gap:28px}
    .ref__handy{right:-6px;width:28%;border-radius:16px;box-shadow:0 0 0 4px #141610,0 20px 36px -20px rgba(20,22,16,.55)}
  }
  @media (prefers-reduced-motion:reduce){.ref__browser img,.ref__handy{transition:none}}
  @media(max-width:900px){
    .demos{padding:80px 0 88px}
    .demos__reiter{grid-template-columns:repeat(2,minmax(0,1fr))}
    .demos__ansicht,.demos__url{display:none}
    .demos__leiste{justify-content:flex-end}
    .demos__buehne{height:78vh}
  }
  .vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .rv{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.25,1,.5,1),transform .7s cubic-bezier(.25,1,.5,1)}
  .rv.in{opacity:1;transform:none}
  @media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

  /* ================================================================
     BOLD-SCHICHT (24.09.2026): die Sprache aus Header, Stapelkarten und
     Raster über die ganze Seite. Vorbilder: Creatix, BRVND (Prinzipien).
     Liegt bewusst am Ende, damit sie ältere Regeln überschreibt.
     ================================================================ */
  :root{--r-lg:30px;--r-md:22px;--r-sm:14px}

  /* Seite als Stapel aus Karten: jeder Abschnitt ist eine abgerundete Fläche */
  main.page{background:#060705;padding:10px 10px 0}
  html[data-theme="light"] main.page{background:#DEDAD0}
  main.page > section{margin:0 0 10px;border-radius:34px}
  main.page > section:not(#problem):not(.stapel):not(.layer-under):not(.layer-over){overflow:clip}
  main.page > footer{border-radius:34px 34px 0 0}
  @media(max-width:760px){
    main.page{padding:6px 6px 0}
    main.page > section{margin-bottom:6px;border-radius:24px}
  }

  /* Überschriften: fette Versalien, eng gesetzt */
  .h-lg,.h-xl,.check-bar__h{
    font-family:'Archivo',sans-serif;font-weight:900;text-transform:uppercase;
    letter-spacing:-.03em;line-height:.96;text-wrap:balance
  }
  .h-lg,.check-bar__h{font-size:clamp(32px,4.6vw,68px)}
  .h-xl{font-size:clamp(38px,5.8vw,86px)}

  /* Früher kursives Goldwort: jetzt gelbe Markierung in derselben Schrift */
  h1 .serif,h2 .serif,h3 .serif,.h-lg .serif,.h-xl .serif{
    font-family:inherit;font-style:normal;font-weight:inherit;font-size:1em;letter-spacing:inherit;
    color:#141610!important;background:var(--lime)!important;padding:0 .12em;
    -webkit-box-decoration-break:clone;box-decoration-break:clone
  }

  /* Kapitel-Labels als Pillen mit Punkt */
  .kick,.kap{
    display:inline-flex;align-items:center;gap:10px;width:max-content;max-width:100%;
    padding:8px 15px;border:1px solid currentColor;border-radius:999px;
    font-family:'Archivo',sans-serif;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
    color:inherit;opacity:.85;margin-bottom:22px
  }
  .kick::before,.kap::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--lime);flex:none}

  /* Buttons: Versalien, runder Pfeil im Button */
  .pillbtn{
    font-family:'Archivo',sans-serif;font-size:13.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
    min-height:54px;padding:0 26px
  }
  .pillbtn:has(.arrow){padding-right:9px;gap:14px}
  .pillbtn .arrow{
    display:grid;place-items:center;width:36px;height:36px;border-radius:50%;
    background:#141610;color:var(--lime);font-size:15px;transition:transform .4s cubic-bezier(.16,1,.3,1)
  }
  .pillbtn:hover .arrow{transform:translate(3px,-3px) rotate(-12deg)}
  .pill-darkghost .arrow,.pill-ink .arrow{background:var(--lime);color:#141610}
  .pill-lime{box-shadow:none}

  /* Karten und Flächen: großzügiger gerundet, ruhige Kanten */
  .brcard,.kcard{border-radius:var(--r-lg)}
  .brcard:hover,.kcard:hover{transform:translateY(-4px)}

  /* Dunkle Abschnitte: Punktemuster etwas zurücknehmen, Schrift heller */
  .dark-sec::before{opacity:.6}

  /* Überschriften in schmalen Spalten kleiner, damit sie nicht zerfallen */
  #ablauf .h-lg{font-size:clamp(28px,3.1vw,46px)}
  .idee .h-lg{font-size:clamp(30px,3.8vw,56px)}
  .bew__h.h-lg{font-size:clamp(30px,4vw,58px)}

  /* Letzte Reste der kursiven Serife in die Hausschrift holen */
  .num{font-family:'Archivo',sans-serif!important;font-style:normal!important;font-weight:900!important;color:var(--lime)!important;letter-spacing:-.03em}
  .zs__morgen{font-family:'Archivo',sans-serif!important;font-weight:700!important;font-size:.72em!important;text-transform:uppercase;letter-spacing:.06em!important}
  .zs__morgen em{font-style:normal!important;background:var(--lime)!important;color:#141610;padding:.1em .45em;border-radius:999px;margin-right:.3em}
  .idee__leitsatz{font-family:'Archivo',sans-serif!important;font-style:normal!important;font-weight:900!important;text-transform:uppercase;letter-spacing:-.02em;line-height:1.02!important}


/* ============ Unterseiten, Rechner-Pop-up, neue Kacheln (24.09.2026) ============ */
.hx--klein{padding:clamp(90px,12vh,130px) 0 clamp(56px,8vh,90px)}
.hx--klein .hx__h{font-size:clamp(36px,5.4vw,84px)}
.hx--klein .hx__sub{margin-top:clamp(20px,3vh,30px)}
.hx__zurueck{display:inline-flex;align-items:center;gap:10px;margin-bottom:22px;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:rgba(244,244,239,.72);text-decoration:none}
.hx__zurueck:hover{color:var(--lime)}
.hx--klein .hx__kick{margin-left:0;display:flex;width:max-content}

a.bk{cursor:pointer}
.bk--gelb{transition:background .3s}
a.bk--gelb:hover{background:#FFD91F}
.bk__mehr{margin-top:16px;font-size:12.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.bk--rechner{border:0;text-align:left;font:inherit;cursor:pointer;background:#141610;color:#F4F4EF;justify-content:space-between;transition:background .3s}
.bk--rechner .bk__gross{color:var(--lime)}
.bk--rechner .bk__mehr{color:var(--lime)}
.bk--rechner:hover{background:#1E2117}
.bk--rechner:focus-visible{outline:3px solid var(--lime);outline-offset:3px}

.rdialog{width:min(1100px,calc(100% - 24px));max-height:calc(100dvh - 24px);margin:auto;padding:0;border:0;border-radius:30px;background:var(--cream);color:var(--ink);overflow:auto;box-shadow:0 60px 120px -40px rgba(0,0,0,.6)}
.rdialog::backdrop{background:rgba(6,7,5,.72);backdrop-filter:blur(6px)}
.rdialog > section{border-radius:0;margin:0;padding:clamp(54px,7vh,80px) 0 clamp(40px,6vh,64px)}
.rdialog__zu{position:sticky;top:14px;float:right;margin:14px 14px 0 0;z-index:2;width:46px;height:46px;border-radius:50%;border:0;background:#141610;color:var(--lime);font-size:26px;line-height:1;cursor:pointer}
.rdialog__zu:hover{background:#2A2D22}
@media(prefers-reduced-motion:no-preference){
  .rdialog[open]{animation:rdAuf .45s cubic-bezier(.16,1,.3,1)}
}
@keyframes rdAuf{from{opacity:0;transform:translateY(24px) scale(.98)}to{opacity:1;transform:none}}
/* Pop-up: Schließen immer sichtbar, Inhalt darf schmaler werden als sein längstes Wort */
.rdialog__zu{position:fixed;top:max(18px,env(safe-area-inset-top));right:18px;float:none;margin:0}
.rdialog *{min-width:0}
.rdialog .wrap{padding:0 clamp(16px,4vw,28px)}
.rdialog .rechner__shell,.rdialog .rechner__core{max-width:100%}
@media(max-width:760px){
  .rdialog{width:calc(100% - 12px);max-height:calc(100dvh - 12px);border-radius:24px}
  .rdialog > section{padding-top:72px}
}
.rdialog__zu{position:sticky;top:12px;right:auto;display:grid;place-items:center;margin:12px 12px -58px auto}
.rdialog__zu{z-index:20}

/* Neues UP-Logo (24.09.2026): feine Schrift, deshalb größer als das alte Zeichen */
.side .brand svg{height:66px}
footer .brand svg{height:84px}
.topbar svg{height:46px;width:auto}

/* ============ PLAKATKACHELN (24.09.2026, Vorbild Nexora, in UP-Farben) ============
   Hochformat-Plakate: Logo und Mini-Zeile oben, drei Zeilen Versalien mit
   gelber Schlusszeile, kurzer Satz, runder Pfeil. Bild füllt die Kachel,
   das Objekt sitzt unten, oben bleibt Platz für die Schrift. */
.pkraster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.pk{position:relative;isolation:isolate;display:flex;flex-direction:column;aspect-ratio:4/5;min-width:0;padding:22px 22px 20px;border-radius:24px;overflow:hidden;text-decoration:none;color:inherit;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.pk--hell{background:#EFEBE2;color:#141610}
.pk--dunkel{background:#121310;color:#F4F4EF}
.pk__bild{position:absolute;inset:0;z-index:-1;width:100%;height:100%;object-fit:cover;object-position:50% 100%;transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
.pk:hover{transform:translateY(-4px)}
.pk:hover .pk__bild{transform:scale(1.045)}
.pk__oben{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.pk__logo{height:30px;width:auto;color:currentColor}
.pk__tag{font-size:10.5px;font-weight:600;line-height:1.35;text-align:right;letter-spacing:.02em;opacity:.8}
.pk__h{margin-top:clamp(18px,3vw,28px);font-family:'Archivo',sans-serif;font-weight:900;text-transform:uppercase;font-size:clamp(24px,2.35vw,38px);line-height:.92;letter-spacing:-.035em;color:inherit}
.pk--dunkel .pk__akz{color:var(--lime)}
.pk--hell .pk__akz{background:var(--lime);padding:0 .1em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.pk__sub{margin-top:12px;max-width:22ch;font-size:13px;line-height:1.4;opacity:.78}
.pk__unten{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.pk--hell .pk__unten{text-shadow:0 0 12px rgba(239,235,226,.9)}
.pk--dunkel .pk__unten{text-shadow:0 0 12px rgba(18,19,16,.9)}
.pk__pfeil{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;background:var(--lime);color:#141610;font-size:17px;transition:transform .45s cubic-bezier(.16,1,.3,1)}
.pk:hover .pk__pfeil{transform:translateX(4px)}
.pk:focus-visible{outline:3px solid var(--lime);outline-offset:3px}

/* Abschluss-Kachel: breit, schwarz, gelber Lichtbogen */
.pk--cta{grid-column:1/-1;aspect-ratio:auto;min-height:clamp(300px,34vw,420px);background:#0C0D09;color:#F4F4EF;justify-content:space-between}
.pk--cta .pk__h{font-size:clamp(30px,4.2vw,64px);max-width:16ch}
.pk--cta .pk__akz{color:var(--lime);background:none;padding:0}
.pk__bogen{position:absolute;z-index:-1;right:-12%;top:-40%;width:min(70%,760px);aspect-ratio:1;border-radius:50%;border:3px solid var(--lime);box-shadow:0 0 28px rgba(244,201,0,.55),inset 0 0 28px rgba(244,201,0,.35);clip-path:inset(0 0 0 0)}
.pk__knopf{align-self:flex-start;display:inline-flex;align-items:center;gap:14px;margin-top:22px;min-height:54px;padding:0 9px 0 24px;border-radius:999px;background:var(--lime);color:#141610;font-size:13.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.pk__knopf .pk__pfeil{background:#141610;color:var(--lime);width:38px;height:38px}
@media(prefers-reduced-motion:no-preference){
  .pk__bogen{animation:pkBogen 16s linear infinite}
}
@keyframes pkBogen{to{transform:rotate(360deg)}}
@media(max-width:1100px){.pkraster{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){
  .pkraster{grid-template-columns:1fr}
  .pk__h{font-size:clamp(28px,8.6vw,38px)}
  .pk__bogen{right:-40%;top:-30%;width:120%}
}
/* Bild in die untere Kachelhälfte, oben weich ausgeblendet, damit Schrift frei steht */
.pk:not(.pk--cta) .pk__bild{inset:auto 0 0 0;top:auto;height:64%;object-position:50% 62%;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 22%);mask-image:linear-gradient(to bottom,transparent 0,#000 22%)}
.pk__h{font-size:clamp(22px,2.1vw,34px)}
.pk--hell .pk__unten > span:first-child{padding:7px 12px;border-radius:999px;background:rgba(239,235,226,.92);text-shadow:none}
.pk--dunkel .pk__unten > span:first-child{padding:7px 12px;border-radius:999px;background:rgba(18,19,16,.78);text-shadow:none}
.pk:not(.pk--cta) .pk__bild{height:56%;object-position:50% 58%}

/* ============ STAPELKARTEN IM PLAKAT-STIL (24.09.2026, wie .pk) ============ */
.skarte__oben{display:flex;align-items:center;justify-content:space-between;gap:14px}
.skarte__logo{height:34px;width:auto;flex:none}
.skarte h3{margin-top:clamp(26px,5vh,48px);line-height:.92;letter-spacing:-.035em}
.skarte--schwarz .skarte__akz{color:var(--lime)}
.skarte--creme .skarte__akz{background:var(--lime);padding:0 .1em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.skarte--gelb .skarte__akz{background:#141610;color:var(--lime);padding:0 .1em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.skarte__link,.skarte--gelb .skarte__link{gap:12px;padding:0;min-height:52px;background:none;color:inherit}
.skarte__ltext{padding:9px 16px;border-radius:999px;background:rgba(255,255,255,.08)}
.skarte--gelb .skarte__ltext,.skarte--creme .skarte__ltext{background:rgba(20,22,16,.08)}
.skarte__pfeil{display:grid;place-items:center;flex:none;width:48px;height:48px;border-radius:50%;background:var(--lime);color:#141610;font-size:20px;transition:transform .45s cubic-bezier(.16,1,.3,1)}
.skarte--gelb .skarte__pfeil{background:#141610;color:var(--lime)}
.skarte__link:hover{transform:none}
.skarte__link:hover .skarte__pfeil{transform:translateX(4px) rotate(-45deg)}
.skarte__bild{position:relative;background:#141610}
.skarte__bild img{object-position:50% 58%}
.skarte--creme .skarte__bild{background:#EFEBE2}
@media(max-width:900px){.skarte__logo{height:28px}}
@media(max-width:900px){.skarte__bild{min-height:0;width:100%}}
@media(max-width:900px){.skarte__bild{aspect-ratio:4/3}.skarte__bild img{object-position:50% 50%}.skarte__ltext{white-space:nowrap}}

/* ============ PLAKATKACHELN, KRAFTVOLLE BILDER (24.09.2026) ============
   Motiv füllt die Kachel, je Kachel so weit nach unten geschoben (--dy),
   dass Überschrift und Untertitel frei stehen. Hintergrund = Bildfarbe. */
.pk--hell,.pk--dunkel{background:var(--pkbg)}
.pk:not(.pk--cta) .pk__bild{inset:0;top:0;height:100%;object-position:50% 100%;translate:0 var(--dy,0%);-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 9%);mask-image:linear-gradient(to bottom,transparent 0,#000 9%)}
.pk__sub{opacity:.86}
@media(min-width:1101px){.pk:not(.pk--cta) .pk__bild{translate:0 calc(var(--dy,0%) + 9%)}}

/* ============ HEADER-TYPO MIT SCHRIFTMIX (24.09.2026) ============
   Nach Terrences Referenzen (Good Trouble, Exceso y Abundancia, Placebo):
   schmale Versal-Grotesk (Anton) + Pinsel-Signatur (Mr Dafoe, passt zum
   handschriftlichen UP-Logo) + schräges gelbes Schild + Vier-Zacken-Stern. */
.hx__h{font-size:clamp(50px,6.9vw,112px);line-height:.9;letter-spacing:0}
@media(min-width:761px){.hx__zeile{white-space:nowrap}}
.hx__zeile{overflow:visible;padding-bottom:0}
.hx__w--anton{font-family:'Anton','Archivo',sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.004em}
.hx__zeile--skript{position:relative;z-index:2;margin:-.2em 0 -.12em .5em}
.hx__skript{font-family:'Mr Dafoe',cursive;font-weight:400;text-transform:none;letter-spacing:0;font-size:1.08em;line-height:1;color:var(--lime);transform:rotate(-6deg);transform-origin:0 70%;padding:0 .12em .08em 0;text-shadow:0 .04em .18em rgba(12,13,9,.55)}
.hx__stern{display:inline-block;width:.34em;height:.34em;margin:0 0 .5em .1em;vertical-align:middle;fill:var(--lime)}
.hx__zeile:first-child .hx__pill{transform:translateY(-.55em) rotate(4deg);margin-left:.35em}
.hx__schild{font-family:'Archivo',sans-serif;font-weight:900;text-transform:uppercase;letter-spacing:-.04em;font-size:.86em;line-height:1;padding:.06em .16em .02em;margin-left:.08em;background:var(--lime);color:#141610;transform:rotate(-4deg);box-shadow:.06em .06em 0 #141610}
@media(prefers-reduced-motion:no-preference){
  .hx__zeile .hx__w,.hx__zeile .hx__pill{opacity:0;transform:translateY(40%);animation:hxZeile2 1s cubic-bezier(.16,1,.3,1) forwards}
  .hx__zeile .hx__skript{transform:translateY(30%) rotate(-6deg);animation-name:hxSkript}
  .hx__zeile .hx__schild{transform:translateY(40%) rotate(-4deg);animation-name:hxSchild}
  .hx__zeile:first-child .hx__pill{transform:translateY(40%) rotate(4deg);animation-name:hxPille;animation-delay:.6s}
  .hx__zeile:nth-child(2) .hx__w,.hx__zeile:nth-child(2) .hx__pill{animation-delay:.14s}
  .hx__zeile:nth-child(3) .hx__w,.hx__zeile:nth-child(3) .hx__pill{animation-delay:.28s}
  .hx__zeile .hx__schild{animation-delay:.46s!important}
  .hx__stern{animation:hxStern 5s ease-in-out infinite}
}
@keyframes hxZeile2{to{opacity:1;transform:none}}
@keyframes hxSkript{to{opacity:1;transform:rotate(-6deg)}}
@keyframes hxSchild{0%{opacity:0;transform:translateY(40%) rotate(-4deg)}60%{opacity:1;transform:translateY(-4%) rotate(-6deg)}100%{opacity:1;transform:rotate(-4deg)}}
@keyframes hxPille{to{opacity:1;transform:translateY(-.55em) rotate(4deg)}}
@keyframes hxStern{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(.72) rotate(45deg)}}
@media(max-width:760px){
  .hx__h{font-size:clamp(40px,12vw,70px)}
  .hx__zeile--skript{margin:.06em 0 .02em .15em}
  .hx__zeile:first-child .hx__pill{display:block;width:max-content;margin:.35em 0 .3em;font-size:12px}
}
/* Branchen-Pille: aus der H1 raus, gerade neben die Kick-Pille (24.09.2026) */
.hx__kopfzeile{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.hx__branchen{display:inline-flex;align-items:center;min-height:40px;padding:9px 16px;border-radius:999px;background:var(--lime);color:#141610;font-size:12.5px;font-weight:700;letter-spacing:.04em}
@media(prefers-reduced-motion:no-preference){.hx__branchen{opacity:0;animation:hxAuf .9s cubic-bezier(.16,1,.3,1) .12s forwards}}
@media(max-width:760px){.hx__branchen{font-size:12px;padding:8px 14px}}
@media(max-width:760px){.hx__zeile--skript{margin:-.1em 0 -.02em .15em}}
.hx__band{margin-top:clamp(56px,8vh,96px)}

/* ============ KNÖPFE NACH REFERENZ + BESCHRIFTUNGEN OHNE PILLE (24.09.2026) ============
   Terrence: Pillen, die nur Text tragen, werden kleine Schrift ohne Hülle.
   Nur Buttons mit Funktion bekommen die Form vom Referenzfoto: eckiger
   Textblock (Radius 7px) + separates Quadrat mit Pfeil, der auf den Text
   zeigt. Primär: Quadrat links „→“, sekundär: Quadrat rechts „←“.
   Pfeil-Quadrat als Pseudo-Element, damit übersetzte Button-Texte (i18n)
   und bestehende Skripte unberührt bleiben. */

/* --- 1. Beschriftungen: klein, ohne Pille --- */
.kick,.kap,.hx__kick,.hx__branchen,.stapel__kick,.skarte__nr,.wcard .whead .tagpill{
  display:inline-flex;align-items:center;gap:9px;width:auto;min-height:0;padding:0!important;border:0!important;border-radius:0!important;
  background:none!important;box-shadow:none!important;
  font-family:'Archivo',sans-serif;font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;line-height:1.3;opacity:1}
.kick::before,.kap::before{content:"";width:7px;height:7px;border-radius:1px;background:var(--lime);flex:none}
.hx__punkt,.stapel__kick span{width:7px!important;height:7px!important;border-radius:1px!important;box-shadow:none!important}
.hx__kick{color:rgba(244,244,239,.78)}
.hx__branchen{color:var(--lime)}
.hx__kopfzeile{gap:8px 26px}
.skarte__nr{opacity:.8}
.skarte__tags{gap:4px 0!important}
.skarte__tags li{padding:0!important;background:none!important;border-radius:0;font-size:12.5px;font-weight:600;opacity:.75}
.skarte__tags li:not(:last-child)::after{content:"·";margin:0 .6em;color:var(--lime)}
.skarte--gelb .skarte__tags li:not(:last-child)::after,.skarte--creme .skarte__tags li:not(:last-child)::after{color:inherit}

/* --- 2. Knöpfe --- */
.hx__btn,.pillbtn,.pk__knopf,.skarte__ltext,.pk__unten > span:first-child,.topbar a.cta,.hx__ghost{
  --kn-h:48px;--kn-rand:var(--lime);
  position:relative;display:inline-flex;align-items:center;gap:0;
  min-height:var(--kn-h);height:auto;padding:12px 18px!important;border-radius:7px!important;border:0!important;box-shadow:none!important;text-shadow:none!important;
  font-family:'Archivo',sans-serif;font-size:14px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;line-height:1.15;
  transition:transform .25s cubic-bezier(.16,1,.3,1),background .2s,color .2s}
/* Primär: Quadrat links */
.hx__btn,.pillbtn:not(.ghosty),.pk__knopf,.skarte__ltext,.pk__unten > span:first-child,.topbar a.cta{margin-left:calc(var(--kn-h) + 6px)!important}
.hx__btn::before,.pillbtn:not(.ghosty)::before,.pk__knopf::before,.skarte__ltext::before,.pk__unten > span:first-child::before,.topbar a.cta::before{
  content:"→";position:absolute;top:0;right:calc(100% + 6px);width:var(--kn-h);height:100%;min-height:var(--kn-h);box-sizing:border-box;
  display:grid;place-items:center;border:1.5px solid var(--kn-rand);border-radius:7px;background:transparent;color:var(--kn-rand);
  font-family:'Inter',sans-serif;font-size:20px;font-weight:400;letter-spacing:0;transition:background .2s,color .2s,transform .25s cubic-bezier(.16,1,.3,1)}
/* Sekundär: Quadrat rechts */
.hx__ghost,.pillbtn.ghosty{margin-right:calc(var(--kn-h) + 6px)!important}
.hx__ghost::after,.pillbtn.ghosty::after{
  content:"←";position:absolute;top:0;left:calc(100% + 6px);width:var(--kn-h);height:100%;min-height:var(--kn-h);box-sizing:border-box;
  display:grid;place-items:center;border:1.5px solid var(--kn-rand);border-radius:7px;color:var(--kn-rand);
  font-family:'Inter',sans-serif;font-size:20px;font-weight:400;transition:background .2s,color .2s,transform .25s cubic-bezier(.16,1,.3,1)}
/* alte Pfeile ausblenden */
.hx__btnpunkt,.pillbtn .arrow,.pk__knopf .pk__pfeil,.skarte__pfeil,.pk__unten .pk__pfeil,.hx__ghost > span[aria-hidden]{display:none!important}
.pillbtn:has(.arrow){padding-right:18px!important}

/* Farben: auf dunklem Grund gelber Block, auf hellem/gelbem Grund schwarzer Block */
.hx__btn,.pillbtn.pill-lime,.pk__knopf,.topbar a.cta,.pk--dunkel .pk__unten > span:first-child,.skarte--schwarz .skarte__ltext{background:var(--lime)!important;color:#141610!important}
.pillbtn.pill-ink,.pk--hell .pk__unten > span:first-child,.skarte--gelb .skarte__ltext,.skarte--creme .skarte__ltext{background:#141610!important;color:var(--lime)!important}
.hx__ghost,.pillbtn.ghosty{background:transparent!important;color:#F4F4EF!important;outline:1.5px solid rgba(244,244,239,.55);outline-offset:-1.5px}
.light .pillbtn.ghosty{color:#141610!important;outline-color:#141610}
.light,.pk--hell,.skarte--gelb,.skarte--creme,.rdialog{--kn-rand:#141610}
.light .pillbtn,.pk--hell .pk__unten > span:first-child,.skarte--gelb .skarte__ltext,.skarte--creme .skarte__ltext,.rdialog .pillbtn{--kn-rand:#141610}
.pk__knopf{--kn-rand:#141610}
.pk__knopf{--kn-h:52px}

/* Hover: Quadrat füllt sich, Block rückt nach */
.hx__btn:hover::before,.pillbtn:not(.ghosty):hover::before,.pk:hover .pk__knopf::before,.skarte__link:hover .skarte__ltext::before,.pk:hover .pk__unten > span:first-child::before,.topbar a.cta:hover::before{background:var(--kn-rand);color:var(--kn-inv,#141610)}
.light .pillbtn:hover::before,.pk--hell:hover .pk__unten > span:first-child::before,.skarte--gelb .skarte__link:hover .skarte__ltext::before,.skarte--creme .skarte__link:hover .skarte__ltext::before{color:var(--lime)}
.hx__ghost:hover::after,.pillbtn.ghosty:hover::after{background:var(--kn-rand);color:#141610}
.hx__btn:hover,.pillbtn:hover,.hx__ghost:hover,.topbar a.cta:hover{transform:translateX(3px)}
.hx__btn:active,.pillbtn:active,.hx__ghost:active{transform:translateX(3px) scale(.98)}

/* Kachel-Fußzeile: Block + Quadrat links bündig */
.pk__unten{justify-content:flex-start}
.pk__unten > span:first-child{--kn-h:40px;font-size:12px;padding:9px 13px!important}
.pk__knopf{margin-top:26px}
.pk--cta .pk__knopf{--kn-rand:var(--lime)}
/* Karten-Link */
.skarte__link{padding:0!important;background:none!important;min-height:0}
.skarte__ltext{font-size:13px}
/* Leiste oben: am Handy ohne Quadrat, damit nichts überläuft */
.topbar a.cta{--kn-h:40px;font-size:12px;padding:8px 13px!important}
@media(max-width:760px){
  .topbar a.cta{margin-left:0!important}
  .topbar a.cta::before{display:none}
  .hx__btn,.pillbtn,.hx__ghost{font-size:13px}
  .pricecard .pillbtn,.wcard .pillbtn{width:calc(100% - var(--kn-h) - 6px)}
}
.pricecard .pillbtn,.wcard .pillbtn{width:calc(100% - var(--kn-h) - 6px)}
/* Bedien-Elemente ohne Pfeil (Tabs, Extras): eckig im Referenz-Stil */
.pkgtab,.addon,.demos__ansicht button{border-radius:7px!important;font-family:'Archivo',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.03em;font-size:12px}
.pkgtab.on{background:#141610!important;color:var(--lime)!important}
.addon.sel{background:#141610!important;border-color:#141610!important;color:var(--lime)!important}
/* Pfeil-Quadrat in Kacheln: eigener Grund, damit es über dem Bild steht */
.pk--hell .pk__unten > span:first-child::before{background:rgba(239,235,226,.92)}
.pk--dunkel .pk__unten > span:first-child::before{background:rgba(18,19,16,.85)}
.rechner__cta,.rdialog .rechner__cta{--kn-rand:var(--lime)!important}
/* Chat-Schaltfläche und Schließen-Knopf im Referenz-Stil (24.09.2026) */
.chatpill{--kn-h:46px;min-height:var(--kn-h);padding:0 16px!important;gap:10px;border:0!important;border-radius:7px!important;background:var(--lime)!important;color:#141610!important;
  font-family:'Archivo',sans-serif;font-size:13px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;box-shadow:0 10px 26px rgba(0,0,0,.35)!important;transition:transform .25s cubic-bezier(.16,1,.3,1)}
.chatpill::before{content:"✦";position:absolute;top:0;right:calc(100% + 6px);width:var(--kn-h);height:100%;box-sizing:border-box;display:grid;place-items:center;
  border:1.5px solid var(--lime);border-radius:7px;background:#141610;color:var(--lime);font-size:17px;box-shadow:0 10px 26px rgba(0,0,0,.35);transition:background .2s,color .2s}
.chatpill:hover{transform:translateX(-3px)}
.chatpill:hover::before{background:var(--lime);color:#141610}
.chatpill::after{animation:upcPulse 2s infinite}
.rdialog__zu{width:46px!important;height:46px!important;border-radius:7px!important;background:#141610!important;color:var(--lime)!important;font-family:'Inter',sans-serif;font-size:24px!important;transition:background .2s,color .2s}
.rdialog__zu:hover{background:var(--lime)!important;color:#141610!important}
/* Header-Feinschliff (24.09.2026): Überschrift richtet sich an der Breite des
   Textbereichs aus (Zeile 3 = 9,64 Schriftgrößen breit, Puffer für Safari),
   Label-Zeile kleiner und zweizeilig links, weg von Klumpen und Sticker. */
.hx__inner{container-type:inline-size}
@media(min-width:761px){.hx__h{font-size:clamp(50px,6.9vw,112px);font-size:min(112px,9.3cqi)}}
.hx__kopfzeile{flex-direction:column;align-items:flex-start;gap:7px}
.hx__kick,.hx__branchen{font-size:10px;letter-spacing:.18em;gap:8px}
.hx__punkt{width:6px!important;height:6px!important}
.hx__branchen{padding-left:14px!important}

.hx__kopfzeile,.hx__h,.hx__unten{position:relative;z-index:2}

/* ============ LOGO ALS SCROLL-ANZEIGE (24.09.2026) ============
   Logo oben links (Seitenleiste, Handy-Leiste): eine gelbe Kopie liegt
   darüber und wird von unten her sichtbar, je weiter gescrollt ist.
   Am Seitenende ist das Logo komplett gelb. --sp setzt story.js. */
.logofuell{position:relative;display:inline-block;line-height:0}
.logofuell > svg{display:block}
.logofuell__gelb{position:absolute;inset:0;width:100%!important;height:100%!important;color:var(--lime)!important;
  clip-path:inset(calc((1 - var(--sp,0)) * 100%) 0 0 0);transition:clip-path .12s linear}

/* ============ KOPFLEISTE OBEN STATT SEITENLEISTE (24.09.2026) ============
   Schwebende Insel, verschwindet beim Runterscrollen, kommt beim
   Hochscrollen zurück (story.js). Schnellwahl-Quadrate im Stil der
   Pfeil-Quadrate, Beschriftung klappt beim Hover aus. */
main.page{margin-left:0!important}
.kopf{position:sticky;top:10px;z-index:80;display:flex;align-items:center;gap:clamp(10px,1.6vw,22px);margin:0 0 10px;padding:9px 9px 9px 18px;border-radius:20px;
  background:rgba(12,13,9,.84);-webkit-backdrop-filter:blur(14px) saturate(1.15);backdrop-filter:blur(14px) saturate(1.15);border:1px solid rgba(244,244,239,.08);
  transition:transform .5s cubic-bezier(.16,1,.3,1)}
.kopf.ist-weg{transform:translateY(calc(-100% - 20px))}
.kopf__logo{display:block;line-height:0;color:#F4F4EF}
.kopf__logo svg{height:44px;width:auto}
.kopf__nav{display:flex;gap:2px}
.kopf__nav a{position:relative;padding:10px 11px;font-family:'Archivo',sans-serif;font-size:12.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:rgba(244,244,239,.7);text-decoration:none;transition:color .2s}
.kopf__nav a::after{content:"";position:absolute;left:11px;right:11px;bottom:5px;height:2px;background:var(--lime);transform:scaleX(0);transform-origin:0 50%;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.kopf__nav a:hover,.kopf__nav a.active{color:#F4F4EF}
.kopf__nav a:hover::after,.kopf__nav a.active::after{transform:scaleX(1)}
.kopf__schnell{display:flex;gap:6px;margin-left:auto}
.kq{display:inline-flex;align-items:center;height:44px;border:1.5px solid rgba(244,201,0,.5);border-radius:7px;color:var(--lime);text-decoration:none;overflow:hidden;transition:background .25s,color .25s,border-color .25s}
.kq svg{width:19px;height:19px;flex:none;margin:0 11px}
.kq span{max-width:0;opacity:0;white-space:nowrap;font-family:'Archivo',sans-serif;font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;transition:max-width .45s cubic-bezier(.16,1,.3,1),opacity .25s,padding .45s}
.kq:hover,.kq:focus-visible{background:var(--lime);border-color:var(--lime);color:#141610}
.kq:hover span,.kq:focus-visible span{max-width:190px;opacity:1;padding-right:14px}
.kopf__cta{position:relative;display:inline-flex;align-items:center;height:44px;margin-left:50px;padding:0 16px;border-radius:7px;background:var(--lime);color:#141610;font-family:'Archivo',sans-serif;font-size:12.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;white-space:nowrap;transition:transform .25s cubic-bezier(.16,1,.3,1)}
.kopf__cta::before{content:"→";position:absolute;top:0;right:calc(100% + 6px);width:44px;height:100%;box-sizing:border-box;display:grid;place-items:center;border:1.5px solid var(--lime);border-radius:7px;color:var(--lime);font-family:'Inter',sans-serif;font-size:19px;transition:background .2s,color .2s}
.kopf__cta:hover{transform:translateX(3px)}
.kopf__cta:hover::before{background:var(--lime);color:#141610}
.kopf__knopf{display:grid;place-items:center;flex:none;width:44px!important;height:44px!important;padding:0!important;border-radius:7px!important;border:1.5px solid rgba(244,244,239,.22)!important;background:transparent!important;color:#F4F4EF!important;font-size:16px;cursor:pointer;transition:border-color .2s}
.kopf__knopf:hover{border-color:var(--lime)!important}
.kopf__menue{display:none;position:relative}
.kopf__menue i{position:absolute;left:12px;right:12px;height:2px;background:currentColor;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.kopf__menue i:first-child{transform:translateY(-4px)}
.kopf__menue i:last-child{transform:translateY(4px)}
.kopf__menue[aria-expanded="true"] i:first-child{transform:rotate(45deg)}
.kopf__menue[aria-expanded="true"] i:last-child{transform:rotate(-45deg)}
html[data-theme="light"] .kopf{background:rgba(12,13,9,.9)}

/* Menü über den ganzen Bildschirm */
.menue{position:fixed;inset:0;z-index:79;display:flex;flex-direction:column;gap:22px;padding:calc(100px + env(safe-area-inset-top)) clamp(20px,5vw,56px) 32px;background:#0C0D09;overflow-y:auto}
.menue[hidden]{display:none}
.menue__nav{display:flex;flex-direction:column}
.menue__nav a{font-family:'Anton',sans-serif;font-size:clamp(40px,10.5vw,76px);line-height:1.04;text-transform:uppercase;color:#F4F4EF;text-decoration:none;transition:color .2s,transform .3s cubic-bezier(.16,1,.3,1)}
.menue__nav a:hover{color:var(--lime);transform:translateX(8px)}
.menue__label{display:flex;align-items:center;gap:9px;margin-top:10px;font-family:'Archivo',sans-serif;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(244,244,239,.7)}
.menue__label::before{content:"";width:7px;height:7px;border-radius:1px;background:var(--lime)}
.menue__kacheln{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-width:640px}
.menue__kachel{display:flex;flex-direction:column;justify-content:space-between;gap:22px;min-height:112px;padding:16px;border-radius:12px;border:1.5px solid rgba(244,201,0,.5);color:var(--lime);text-decoration:none}
.menue__kachel:nth-child(1),.menue__kachel:nth-child(4){background:var(--lime);border-color:var(--lime);color:#141610}
.menue__kachel svg{width:26px;height:26px}
.menue__kachel b{font-family:'Archivo',sans-serif;font-size:13px;font-weight:800;letter-spacing:.05em;text-transform:uppercase}
@media(prefers-reduced-motion:no-preference){.menue:not([hidden]) .menue__nav a,.menue:not([hidden]) .menue__kachel{animation:hxAuf .6s cubic-bezier(.16,1,.3,1) both}
  .menue__nav a:nth-child(2){animation-delay:.04s}.menue__nav a:nth-child(3){animation-delay:.08s}.menue__nav a:nth-child(4){animation-delay:.12s}.menue__nav a:nth-child(5){animation-delay:.16s}.menue__kachel{animation-delay:.2s!important}}
html.menue-offen{overflow:hidden}

/* Breiten: erst Menüpunkte ins Menü, am Handy auch Schnellwahl und Thema */
@media(max-width:1220px){.kopf__nav{display:none}.kopf__menue{display:grid}}
@media(max-width:760px){
  .kopf{top:6px;margin-bottom:6px;padding:7px 7px 7px 14px;gap:8px;border-radius:16px}
  .kopf__logo svg{height:36px}
  .kopf__schnell,.kopf__knopf.js-theme{display:none!important}
  .kopf__cta{margin-left:auto;height:40px;padding:0 13px;font-size:11.5px}
  .kopf__cta::before{display:none}
  .kopf__menue{width:40px!important;height:40px!important}
  .hx{padding-top:clamp(48px,8vh,72px)}
}
.menue:focus{outline:none}

/* ============ ANGEBOTSSEITEN HINTER DEN KACHELN (24.09.2026) ============
   Aufbau je Seite: Kopf mit Kachel-Motiv, Das bekommst du, Beispiele,
   So läuft es ab, Ohne Risiko, Fragen, Schluss. Nur Fakten aus Pakete,
   Ablauf, Konditionen und FAQ der Startseite. */
.hx--angebot{position:relative}
.hx--angebot .hx__inner{padding-right:min(34%,400px)}
.hx--angebot .hx__h{margin-top:clamp(20px,3vh,32px)}
.hx--angebot .hx__zeile--skript{margin:-.12em 0 -.06em .35em}
.hx--angebot .hx__unten{margin-top:clamp(26px,4vh,40px)}
.hx--angebot .hx__sub{max-width:48ch}
.hx__karte{position:absolute;z-index:2;right:clamp(24px,5vw,90px);top:50%;width:min(28%,340px);aspect-ratio:900/1117;border-radius:24px;overflow:hidden;
  transform:translateY(-50%) rotate(4deg);box-shadow:0 30px 60px -20px rgba(0,0,0,.6),0 0 0 1px rgba(244,244,239,.08)}
.hx__karte img{display:block;width:100%;height:100%;object-fit:cover}
@media(prefers-reduced-motion:no-preference){.hx__karte{animation:hxKarte 1.1s cubic-bezier(.16,1,.3,1) .3s both}}
@keyframes hxKarte{from{opacity:0;transform:translateY(-40%) rotate(10deg)}}
@media(max-width:900px){
  .hx--angebot .hx__inner{padding-right:28px}
  .hx__karte{position:relative;top:auto;right:auto;display:block;width:min(62%,300px);margin:36px 28px 0 auto;transform:rotate(4deg);animation:none}
}

/* Das bekommst du */
.ang{padding:clamp(80px,11vh,130px) 0}
.ang__h,.abl__h,.sicher__h,.fragen__h{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.005em;line-height:.95;font-size:clamp(44px,6.2vw,92px)}
.ang__mark{background:var(--lime);padding:0 .12em}
.ang__intro{margin-top:18px;max-width:52ch;font-size:clamp(15px,1.2vw,17.5px);line-height:1.6;color:#4A4D42}
.ang__karten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:clamp(34px,5vh,52px)}
.ang__karte{display:flex;flex-direction:column;padding:clamp(24px,3vw,38px);border-radius:24px}
.ang__karte--hell{background:#fff;border:1px solid #E2DED2;color:#141610}
.ang__karte--dunkel{background:#141610;color:#F4F4EF;--kn-rand:var(--lime)}
.ang__karte--dunkel .pillbtn{--kn-rand:var(--lime)}
.ang__nr{font-family:'Archivo',sans-serif;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;opacity:.65}
.ang__karte h3{margin-top:14px;font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;font-size:clamp(34px,3.6vw,52px);line-height:.95;hyphens:manual}
.ang__tag{margin-top:10px;font-size:15px;line-height:1.5;opacity:.75}
.ang__liste{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:0}
.ang__liste li{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-top:1px solid rgba(20,22,16,.1);font-size:15px;line-height:1.45}
.ang__karte--dunkel .ang__liste li{border-top-color:rgba(244,244,239,.12)}
.ang__liste svg{flex:none;width:20px;height:20px;padding:3px;border-radius:5px;background:var(--lime);color:#141610}
.ang__preis{margin:26px 0 22px;padding-top:18px;border-top:2px solid currentColor;font-size:14px;opacity:.85}
.ang__preis b{display:block;font-family:'Anton',sans-serif;font-weight:400;font-size:34px;text-transform:uppercase;line-height:1;opacity:1}
.ang__karte .pillbtn{margin-top:auto;align-self:flex-start}
.ang__extras{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 22px;margin-top:26px;padding:20px 24px;border-radius:16px;border:1.5px dashed rgba(20,22,16,.25)}
.ang__extras .kick{margin:0}
.ang__extras ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 0;font-size:14.5px;font-weight:600}
.ang__extras li:not(:last-child)::after{content:"·";margin:0 .7em;color:#B89400}

/* So läuft es ab */
.abl{padding:clamp(80px,11vh,130px) 0}
.abl__h{color:#F7F7F2}
.abl__skript{font-family:'Mr Dafoe',cursive;text-transform:none;color:var(--lime);font-size:1.1em;display:inline-block;transform:rotate(-6deg);padding:0 .08em}
.abl__schritte{list-style:none;margin:clamp(36px,5vh,56px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;counter-reset:none}
.abl__schritte li{position:relative;padding:26px 24px 28px;border-radius:20px;background:#1A1C15;border:1px solid rgba(244,244,239,.08)}
.abl__schritte li:last-child{background:var(--lime);color:#141610;border-color:var(--lime)}
.abl__nr{display:block;font-family:'Anton',sans-serif;font-size:64px;line-height:.9;color:var(--lime)}
.abl__schritte li:last-child .abl__nr{color:#141610}
.abl__schritte h3{margin-top:18px;font-family:'Archivo',sans-serif;font-size:19px;font-weight:800;line-height:1.2;text-transform:uppercase;letter-spacing:-.005em}
.abl__schritte p{margin-top:10px;font-size:15px;line-height:1.55;opacity:.8}

/* Ohne Risiko */
.sicher{background:var(--lime);color:#141610;padding:clamp(70px,10vh,110px) 0}
.sicher__liste{list-style:none;margin:clamp(30px,4vh,44px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
.sicher__liste li{padding:22px 26px 6px 0;border-top:2px solid #141610}
.sicher__liste li + li{padding-left:26px;border-left:2px solid #141610}
.sicher__liste b{display:block;font-family:'Archivo',sans-serif;font-size:18px;font-weight:900;text-transform:uppercase;letter-spacing:-.01em;line-height:1.15}
.sicher__liste p{margin-top:10px;font-size:15px;line-height:1.55}

/* Fragen */
.fragen{padding:clamp(80px,11vh,130px) 0}
.fragen__liste{margin:clamp(30px,4vh,46px) 0 0;display:grid}
.fragen__liste > div{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:14px 40px;padding:24px 0;border-top:1px solid #D8D4C8}
.fragen__liste dt{font-family:'Archivo',sans-serif;font-size:19px;font-weight:800;line-height:1.3;color:#141610}
.fragen__liste dd{margin:0;font-size:15.5px;line-height:1.6;color:#4A4D42}

@media(max-width:900px){
  .ang__karten,.abl__schritte,.sicher__liste{grid-template-columns:1fr}
  .sicher__liste li + li{padding-left:0;border-left:0}
  .fragen__liste > div{grid-template-columns:1fr}
}
.ang__karte--dunkel h3,.ang__karte--dunkel .ang__tag,.ang__karte--dunkel .ang__nr,.ang__karte--dunkel li{color:#F4F4EF}
.hx--angebot .hx__zeile--skript{margin-top:.02em}

/* Beispiel-Gespräch Telefonagent (25.09.2026) */
.gs{padding:clamp(80px,11vh,130px) 0}
.gs__wrap{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(30px,5vw,70px);align-items:start}
.gs__intro{margin-top:18px;max-width:40ch;font-size:15.5px;line-height:1.6;color:rgba(244,244,239,.72)}
.gs__ergebnis{margin-top:30px;padding:22px 24px;border-radius:18px;background:var(--lime);color:#141610;max-width:420px}
.gs__ergebnis-kopf{font-family:'Archivo',sans-serif;font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.gs__ergebnis dl{margin:14px 0 0;display:grid}
.gs__ergebnis dl > div{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-top:1.5px solid rgba(20,22,16,.2)}
.gs__ergebnis dt{font-size:13px;font-weight:600;opacity:.7}
.gs__ergebnis dd{margin:0;font-family:'Archivo',sans-serif;font-size:14px;font-weight:800;text-align:right}
.gs__verlauf{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.gs__zeile{max-width:88%;padding:14px 18px;border-radius:16px;font-size:15px;line-height:1.5}
.gs__zeile p{margin:4px 0 0}
.gs__wer{font-family:'Archivo',sans-serif;font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;opacity:.7}
.gs__zeile--agent{justify-self:start;background:#1D1F18;border:1px solid rgba(244,201,0,.35);color:#F4F4EF;border-bottom-left-radius:4px}
.gs__zeile--agent .gs__wer{color:var(--lime);opacity:1}
.gs__zeile--anrufer{justify-self:end;background:#F4F4EF;color:#141610;border-bottom-right-radius:4px}
@media(max-width:900px){.gs__wrap{grid-template-columns:1fr}.gs__zeile{max-width:94%}}
/* 7 Kacheln: Abschluss-Kachel füllt die letzte Reihe neben dem Telefonagenten */
.pk--cta{grid-column:span 2}
@media(max-width:1100px){.pk--cta{grid-column:span 1;aspect-ratio:4/5;min-height:0}}
@media(max-width:620px){.pk--cta{grid-column:1/-1;aspect-ratio:auto;min-height:340px}}

/* Termine: Beispiel-Karten zum Ausprobieren */
.bsp{padding:clamp(80px,11vh,130px) 0}
.bsp__karten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:clamp(30px,4vh,46px)}
.bsp__karte{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);align-items:stretch;border-radius:24px;overflow:hidden;background:#141610;color:#F4F4EF;text-decoration:none;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.bsp__karte:hover{transform:translateY(-4px)}
.bsp__bild{display:block;background:#1D1F18;padding:18px 0 0 18px;overflow:hidden}
.bsp__bild img{display:block;width:100%;height:auto;border-radius:14px 0 0 0;box-shadow:0 20px 40px -20px rgba(0,0,0,.7)}
.bsp__text{display:flex;flex-direction:column;justify-content:center;gap:12px;padding:26px}
.bsp__text .kick{margin:0;color:rgba(244,244,239,.75)}
.bsp__text b{font-family:'Anton',sans-serif;font-weight:400;font-size:clamp(26px,2.4vw,36px);line-height:1;text-transform:uppercase}
.bsp__los{--kn-h:44px;position:relative;align-self:flex-start;margin:10px 0 0 50px;display:inline-flex;align-items:center;height:44px;padding:0 16px;border-radius:7px;background:var(--lime);color:#141610;font-family:'Archivo',sans-serif;font-size:12.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.bsp__los::before{content:"↗";position:absolute;top:0;right:calc(100% + 6px);width:44px;height:100%;box-sizing:border-box;display:grid;place-items:center;border:1.5px solid var(--lime);border-radius:7px;color:var(--lime);font-family:'Inter',sans-serif;font-size:18px;transition:background .2s,color .2s}
.bsp__karte:hover .bsp__los::before{background:var(--lime);color:#141610}

/* Automatisierung: Ablauf einer Anfrage */
.vl{list-style:none;margin:0;padding:0 0 0 22px;display:grid;gap:10px;border-left:2px dashed rgba(244,201,0,.45)}
.vl__schritt{position:relative;padding:16px 20px;border-radius:16px;background:#1D1F18;border:1px solid rgba(244,244,239,.08)}
.vl__schritt::before{content:"";position:absolute;left:-31px;top:22px;width:14px;height:14px;border-radius:3px;background:var(--lime);box-shadow:0 0 0 5px #0E100B}
.vl__schritt:last-child{background:var(--lime);color:#141610;border-color:var(--lime)}
.vl__zeit{display:block;font-family:'Archivo',sans-serif;font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--lime)}
.vl__schritt:last-child .vl__zeit{color:#141610}
.vl__schritt b{display:block;margin-top:6px;font-family:'Archivo',sans-serif;font-size:17px;font-weight:800;text-transform:uppercase}
.vl__schritt p{margin:4px 0 0;font-size:14.5px;line-height:1.5;opacity:.8}
@media(max-width:900px){.bsp__karten{grid-template-columns:1fr}}
@media(max-width:520px){.bsp__karte{grid-template-columns:1fr}.bsp__bild{max-height:300px;padding:18px 18px 0}.bsp__bild img{border-radius:14px 14px 0 0}}

/* Kontakt-Reihe unter „So läuft es ab“ (25.09.2026): Calendly, WhatsApp, E-Mail
   im Referenz-Stil, Quadrat mit Symbol + Textblock */
.kontaktreihe{margin-top:clamp(30px,4.5vh,48px);padding-top:clamp(24px,3.5vh,34px);border-top:1px solid rgba(244,244,239,.12)}
.kontaktreihe__label{display:flex;align-items:center;gap:9px;font-family:'Archivo',sans-serif;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(244,244,239,.75)}
.kontaktreihe__label::before{content:"";width:7px;height:7px;border-radius:1px;background:var(--lime)}
.kontaktreihe__knoepfe{display:flex;flex-wrap:wrap;gap:12px 18px;margin-top:16px}
.ktr{display:inline-flex;align-items:stretch;gap:6px;text-decoration:none;color:#F4F4EF;transition:transform .25s cubic-bezier(.16,1,.3,1)}
.ktr__q{display:grid;place-items:center;width:50px;min-height:50px;border:1.5px solid rgba(244,244,239,.5);border-radius:7px;transition:background .2s,color .2s,border-color .2s}
.ktr__q svg{width:21px;height:21px}
.ktr__t{display:inline-flex;align-items:center;padding:0 18px;border-radius:7px;border:1.5px solid rgba(244,244,239,.5);font-family:'Archivo',sans-serif;font-size:14px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;white-space:nowrap}
.ktr--haupt{color:#141610}
.ktr--haupt .ktr__q{border-color:var(--lime);color:var(--lime)}
.ktr--haupt .ktr__t{background:var(--lime);border-color:var(--lime)}
.ktr:hover{transform:translateX(3px)}
.ktr:hover .ktr__q{background:var(--lime);border-color:var(--lime);color:#141610}
.kontaktreihe__hinweis{margin-top:14px;font-size:13.5px;color:rgba(244,244,239,.6)}
/* auf hellen Flächen der Startseite (Hell-Modus) */
.light .kontaktreihe{border-top-color:rgba(20,22,16,.14)}
.light .kontaktreihe__label,.light .kontaktreihe__hinweis{color:#4A4D42}
.light .ktr{color:#141610}
.light .ktr__q,.light .ktr__t{border-color:rgba(20,22,16,.45)}
.light .ktr--haupt .ktr__q{border-color:#141610;color:#141610}
.light .ktr--haupt .ktr__t{background:#141610;border-color:#141610;color:var(--lime)}
@media(max-width:520px){.kontaktreihe__knoepfe{flex-direction:column;align-items:stretch}.ktr__t{flex:1}}

/* ============ KURZE ANGEBOTSSEITEN (25.09.2026) ============
   Terrence: „short and simple“. Ablauf, Sicherheit, Fragen und Schluss
   sind zu einem Abschluss zusammengefasst. */
.abschluss{padding:clamp(70px,10vh,110px) 0}
.abschluss__schritte{list-style:none;margin:clamp(26px,4vh,38px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.abschluss__schritte li{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:14px;background:#1A1C15;border:1px solid rgba(244,244,239,.08);font-family:'Archivo',sans-serif;font-size:15px;font-weight:700;line-height:1.3;color:#F4F4EF}
.abschluss__schritte b{font-family:'Anton',sans-serif;font-weight:400;font-size:34px;line-height:1;color:var(--lime)}
.abschluss__schritte li:last-child{background:var(--lime);color:#141610;border-color:var(--lime)}
.abschluss__schritte li:last-child b{color:#141610}
.abschluss__sicher{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 22px}
.abschluss__sicher li{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:rgba(244,244,239,.82)}
.abschluss__sicher li::before{content:"✓";display:grid;place-items:center;width:18px;height:18px;border-radius:4px;background:var(--lime);color:#141610;font-size:11px;font-weight:900}
.abschluss__faq{margin-top:20px;font-size:14px;color:rgba(244,244,239,.6)}
.abschluss__faq a{color:#F4F4EF;text-decoration:underline;text-decoration-color:var(--lime);text-underline-offset:4px}
.hx--angebot{padding-top:clamp(70px,10vh,110px);padding-bottom:clamp(50px,7vh,80px)}
.ang{padding:clamp(64px,9vh,100px) 0}
@media(max-width:900px){.abschluss__schritte{grid-template-columns:1fr}}
/* Schnellcheck im Referenz-Stil (25.09.2026): eckige Felder, Button mit Pfeil-Quadrat */
#sc-name,#sc-ort{border-radius:7px!important}
#sc-btn{position:relative;margin-left:54px!important;border-radius:7px!important;border:0!important;background:#141610!important;color:var(--lime)!important;
  font-family:'Archivo',sans-serif!important;font-size:14px!important;font-weight:700!important;letter-spacing:.03em;text-transform:uppercase;transition:transform .25s cubic-bezier(.16,1,.3,1)}
#sc-btn::before{content:"→";position:absolute;top:0;right:calc(100% + 6px);width:48px;height:100%;box-sizing:border-box;display:grid;place-items:center;border:1.5px solid #141610;border-radius:7px;color:#141610;font-family:'Inter',sans-serif;font-size:19px;font-weight:400;transition:background .2s,color .2s}
#sc-btn:hover{transform:translateX(3px)}
#sc-btn:hover::before{background:#141610;color:var(--lime)}
#sc-btn:disabled{opacity:.6;cursor:wait}

/* ============ TEXTSEITEN (Impressum, Datenschutz, KI, 404) · 25.09.2026 ============ */
.rechtstext{padding:clamp(56px,9vh,110px) 0 clamp(70px,10vh,120px)}
.rechtstext .wrap{max-width:820px}
.rechtstext__zurueck{display:inline-flex;align-items:center;gap:8px;margin-bottom:26px;color:#4A4D42!important;font-family:'Archivo',sans-serif;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;text-decoration:none}
.rechtstext h1{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;font-size:clamp(48px,7vw,96px);line-height:.95;color:#141610;margin:0 0 30px}
.rechtstext h1 em,.rechtstext h1 span,.rechtstext h1 .serif{font-family:inherit;font-style:normal;background:var(--lime);padding:0 .12em;color:#141610}
.rechtstext h2{margin:40px 0 12px;font-family:'Archivo',sans-serif;font-size:19px;font-weight:800;text-transform:uppercase;letter-spacing:.01em;color:#141610}
.rechtstext h3{margin:26px 0 8px;font-family:'Archivo',sans-serif;font-size:16px;font-weight:800;color:#141610}
.rechtstext p,.rechtstext li{font-size:16px;line-height:1.7;color:#3B3E33}
.rechtstext ul,.rechtstext ol{margin:10px 0 0 22px}
.rechtstext a:not(.pillbtn){color:#141610;text-decoration:underline;text-decoration-color:var(--lime);text-decoration-thickness:2px;text-underline-offset:3px}
.rechtstext b,.rechtstext strong{color:#141610}
.rechtstext .kick{margin-bottom:14px}
.rechtstext h1{line-height:1.04;overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
.rechtstext h1 em,.rechtstext h1 span,.rechtstext h1 .serif{-webkit-box-decoration-break:clone;box-decoration-break:clone}
@media(max-width:520px){.rechtstext h1{font-size:clamp(34px,10vw,48px)}}

/* ============ KRITIK-POLITUR (25.09.2026, /impeccable critique) ============ */
/* Einheitliche Abschnitts-Überschriften in Anton, wie Header und Angebotsseiten */
.h-lg,.h-xl,.bento__h,.stapel__h{font-family:'Anton',sans-serif!important;font-weight:400!important;letter-spacing:.005em!important;line-height:.98!important}
.h-lg .serif,.h-xl .serif,.bento__h .bento__mark,.stapel__h .stapel__mark{font-family:inherit!important}
/* Termin: Calendly als Hauptweg, Formular als kurze schriftliche Anfrage */
.termin-cal{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 28px;margin-top:clamp(26px,4vh,40px);padding:26px 28px;border-radius:22px;background:#141610;color:#F4F4EF}
.termin-cal__label{display:flex;align-items:center;gap:9px;font-family:'Archivo',sans-serif;font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--lime)}
.termin-cal__label::before{content:"";width:7px;height:7px;border-radius:1px;background:var(--lime)}
.termin-cal__text{margin-top:8px;max-width:46ch;font-size:16px;line-height:1.5}
.termin-cal .ktr{color:#141610}
.termin-oder{margin:clamp(28px,4vh,40px) 0 0;font-family:'Archivo',sans-serif;font-size:14px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#4A4D42}
.success-wege{display:flex;flex-wrap:wrap;gap:12px 18px;margin-top:22px}
.success-wege .ktr--haupt{color:#141610}
.flabel{display:block;margin-bottom:10px;font-size:13px;font-weight:600;color:#C9CBC1}
/* Formular: eckig, Pfeil-Quadrat sichtbar, lesbare Kleintexte */
.slot,.opt,.chosen,.upcal-tag,.funnelcard input,.funnelcard textarea{border-radius:7px!important}
.funnelcard .pillbtn{--kn-rand:var(--lime)!important}
.opt small,.steplab,.funnel-foot,.backlink,.upcal-auswahl{color:#A9AEA0!important}
.steplab{font-size:12px!important}
/* FAQ: Plus-Zeichen in eckigem Kasten */
.faq summary::after{border-radius:6px!important}
/* Über uns: Fakten statt Kennzahlkarten */
.uns-fakten{list-style:none;margin:clamp(26px,4vh,38px) 0 0;padding:0;display:grid;gap:0;max-width:760px}
.uns-fakten li{position:relative;padding:18px 0 18px 36px;border-top:1px solid rgba(244,244,239,.12);font-size:17px;line-height:1.55;color:rgba(244,244,239,.82)}
.uns-fakten li::before{content:"✓";position:absolute;left:0;top:19px;display:grid;place-items:center;width:22px;height:22px;border-radius:5px;background:var(--lime);color:#141610;font-size:13px;font-weight:900}
.uns-fakten b{color:#F4F4EF}
.uns-direkt{margin-top:22px;font-size:16px;line-height:1.6;color:rgba(244,244,239,.82)}
.uns-direkt a{color:#F4F4EF;text-decoration:underline;text-decoration-color:var(--lime);text-underline-offset:4px}
/* Karten ohne Logo: Stichwort rechtsbündig */
.pk__oben{justify-content:flex-end}
/* Lesbarkeit: Mindestgrößen und Kontrast */
.hx__kick,.hx__branchen{font-size:11px!important}
.pk__tag{font-size:12px!important}
.gs__wer{font-size:11.5px!important}
footer h4{color:#5A5D52!important;font-size:11.5px!important}
footer .fbase,footer .fbase *{color:#5A5D52!important}
/* Tippflächen am Handy mindestens 44 px */
@media(max-width:760px){.kopf__menue{width:44px!important;height:44px!important}.kopf__cta{height:44px}}
/* Buttons auf dunklen Karten innerhalb heller Abschnitte */
.light .termin-cal .ktr,.light .success-wege .ktr{color:#F4F4EF}
.light .termin-cal .ktr__q,.light .termin-cal .ktr__t,.light .success-wege .ktr__q,.light .success-wege .ktr__t{border-color:rgba(244,244,239,.5)}
.light .termin-cal .ktr--haupt,.light .success-wege .ktr--haupt{color:#141610}
.light .termin-cal .ktr--haupt .ktr__q,.light .success-wege .ktr--haupt .ktr__q{border-color:var(--lime);color:var(--lime)}
.light .termin-cal .ktr--haupt .ktr__t,.light .success-wege .ktr--haupt .ktr__t{background:var(--lime);border-color:var(--lime);color:#141610}
/* Anton-Überschriften mit Markierung: genug Zeilenabstand */
.h-lg,.h-xl,.bento__h,.stapel__h{line-height:1.14!important}
/* Chat-Pille am Handy im ersten Bildschirm ausblenden (19.10.2026, Launch-Check Punkt 9) */
.chatpill{transition:transform .25s cubic-bezier(.16,1,.3,1),opacity .25s}
.chatpill.upcImHero{opacity:0;pointer-events:none;transform:translateY(14px)}