/* ═══════════════════════════════════════════════════════════════════════
   dp2-teile.css · v1540 · Die Bausteine der DealPilot-Seite
   Boarding-Pass-Karten, Workflow, Stories, Zinsen, Tarife, Matrix
   ═══════════════════════════════════════════════════════════════════════ */

/* ══ Boarding-Pass-Karte (die Modul-Kachel) ═════════════════════════════ */
.bpg{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.bp{background:#fff;color:var(--ink);position:relative;display:flex;flex-direction:column;
  border:1px solid var(--cream-line);transition:transform .3s var(--e-weich),box-shadow .3s var(--e-weich)}
.bp:hover{transform:translateY(-4px);box-shadow:0 22px 46px -22px rgba(0,0,0,.45)}
.bp-top{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:9px 15px;background:var(--runway);color:var(--gold-on);
  font:700 8px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase}
.bp-in{padding:17px 17px 16px;flex:1}
.bp-ico{width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  background:rgba(201,168,76,.11);color:var(--gdi);margin-bottom:12px;font-size:17px}
.bp-ico .ico{width:18px;height:18px}
.bp h3{font-size:15.5px;margin-bottom:6px}
.bp .sb{margin:0 0 11px;font-size:13px;color:var(--inkm);line-height:1.5}
.bp ul{margin:0;padding:0;list-style:none;font-size:12.2px;color:var(--mut)}
.bp li{padding:3px 0 3px 15px;position:relative;line-height:1.5}
.bp li::before{content:'';position:absolute;left:0;top:10px;width:5px;height:1px;background:var(--gd)}
.bp-tear{position:relative;height:13px;background:var(--stub)}
.bp-tear::before{content:'';position:absolute;left:12px;right:12px;top:50%;
  border-top:2px dashed rgba(201,168,76,.35)}
.bp-tear .nl,.bp-tear .nr{position:absolute;top:50%;width:13px;height:13px;border-radius:50%;
  transform:translateY(-50%);background:var(--ob)}
.bp-tear .nl{left:-6.5px}.bp-tear .nr{right:-6.5px}
.bp-stub{display:flex;align-items:center;justify-content:space-between;gap:8px;
  background:var(--stub);color:#9a8f6a;padding:0 15px 11px;
  font:700 8px/1 var(--mono);letter-spacing:.11em;text-transform:uppercase}
.bp-stub b{color:var(--gdh)}

/* ══ Workflow ═══════════════════════════════════════════════════════════ */
.wf{display:grid;grid-template-columns:repeat(5,1fr);gap:0;
  border:1px solid var(--cream-line);background:#fff}
.wf .st{padding:30px 24px 32px;border-right:1px solid var(--cream-line);position:relative}
.wf .st:last-child{border-right:0}
.wf .st::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--runway);transform:scaleY(0);transform-origin:top;
  transition:transform .3s var(--e-weich)}
.wf .st:hover::before{transform:scaleY(1)}
.wf .st:hover{background:var(--cream)}
.wf .n{font:700 9.5px/1 var(--mono);letter-spacing:.16em;color:var(--gdi);margin-bottom:14px;display:block}
.wf .st h3{font-size:16.5px;margin-bottom:9px}
.wf .st p{margin:0;font-size:13.2px;color:var(--inkm);line-height:1.58}

/* ══ Stories ════════════════════════════════════════════════════════════ */
.stx-vp{overflow:hidden}
.stx-track{display:flex;transition:transform .7s var(--e-hoch)}
.stx-item{flex:0 0 100%;padding:0 2px}
.stx-in{display:grid;grid-template-columns:.9fr 1.1fr;gap:38px;align-items:start}
.stx-scene{margin:0;padding:30px 32px;background:rgba(255,255,255,.04);
  border-left:3px solid var(--gd);font:500 20px/1.55 var(--ser);color:#fff}
.stx-tag{font:700 10px/1 var(--mono);letter-spacing:.2em;color:var(--gdh);
  margin-bottom:16px;display:block}
.stx-body p{margin:0 0 13px;color:var(--mdk);font-size:14.8px;line-height:1.7}
.stx-body p:last-child{margin-bottom:0}
.stx-pay{margin-top:18px;padding-top:15px;border-top:1px solid var(--line);
  font:700 10.5px/1.5 var(--mono);letter-spacing:.09em;color:var(--gdh)}
.stx-nav{display:flex;align-items:center;justify-content:space-between;gap:20px;
  margin-top:30px;flex-wrap:wrap}
.stx-dots{display:flex;gap:7px;flex-wrap:wrap}
.stx-dots i{width:22px;height:3px;background:rgba(236,230,214,.2);cursor:pointer;
  transition:background .25s,width .25s}
.stx-dots i.on{background:var(--gd);width:38px}
.stx-arr{display:flex;gap:8px}
.stx-a{width:42px;height:42px;background:none;border:1px solid var(--line);
  color:var(--gdh);font-size:19px;cursor:pointer;transition:.22s;line-height:1}
.stx-a:hover{background:rgba(201,168,76,.12);border-color:var(--gd);transform:translateY(-2px)}

/* ══ Live-Marktzinsen ═══════════════════════════════════════════════════ */
.cond{border:1px solid var(--cream-line);background:#fff;display:grid;
  grid-template-columns:200px 1fr}
.cond-stub{background:var(--stub);color:var(--gdh);padding:26px 22px;
  display:flex;flex-direction:column;justify-content:center;gap:6px}
.cond-stub .k{font:700 8.5px/1 var(--mono);letter-spacing:.17em;color:rgba(232,204,122,.6)}
.cond-stub b{font:700 21px/1.1 var(--disp);color:#fff}
.cond-stub .s{font:500 9px/1.4 var(--mono);letter-spacing:.08em;color:rgba(236,230,214,.45)}
.cond-r{display:flex;flex-direction:column}
.cond-band{padding:9px 20px;background:var(--runway);color:var(--gold-on);
  font:700 8.5px/1 var(--mono);letter-spacing:.15em;text-transform:uppercase}
.cond-g{display:grid;grid-template-columns:repeat(4,1fr);flex:1}
.cond-c{padding:20px 18px;border-right:1px solid var(--cream-line);text-align:center}
.cond-c:last-child{border-right:0}
.cond-c .zb{font:700 9px/1 var(--mono);letter-spacing:.11em;color:var(--mut);margin-bottom:5px}
.cond-c .bd{display:inline-block;font:700 7.5px/1 var(--mono);letter-spacing:.1em;
  background:rgba(201,168,76,.15);color:var(--gdi);padding:3px 7px;margin-bottom:9px}
.cond-c .zs{font:700 25px/1 var(--disp);color:var(--ink);font-variant-numeric:tabular-nums}
.cond-c .er{font-size:11px;color:var(--mut);margin-top:6px;line-height:1.45}
.cond-foot{padding:12px 20px;border-top:1px solid var(--cream-line);
  font:500 10px/1.5 var(--mono);letter-spacing:.04em;color:var(--mut)}
.cond-foot .live{color:var(--grn);font-weight:700}

/* ══ Trust-Band ═════════════════════════════════════════════════════════ */
.trust{display:grid;grid-template-columns:repeat(5,1fr);border:1px solid var(--cream-line);
  background:#fff}
.trust > div{padding:20px 18px;border-right:1px solid var(--cream-line);
  display:flex;gap:12px;align-items:center}
.trust > div:last-child{border-right:0}
.trust .ico{width:21px;height:21px;color:var(--gdi)}
.trust b{display:block;font-size:13.4px;font-weight:600;color:var(--ink)}
.trust span{display:block;font-size:11.6px;color:var(--mut);margin-top:1px}

/* ══ Tarife ═══════════════════════════════════════════════════════════
   v1551 · Marcel: "Die Preispakete haette ich gerne so, wie wir sie von
   meiner normalen Page angegeben hatten - da fand ich sie cooler."

   Also das Ticket-Design der bisherigen Landing, unveraendert per Skript
   herauskopiert: goldener Kopf mit Sternen und Bestseller-Plakette,
   weisser Koerper, gerahmte Kerosin-Zeile, gestrichelte Abrisskante.
   Mein eigener, flacherer Entwurf ist dafuer entfallen - zwei
   Tarif-Stile nebeneinander haetten sich nur gegenseitig ueberschrieben.

   Die Umschalter (.pseg/.seg) bleiben meine, sie gehoeren zur Seite.
   ═══════════════════════════════════════════════════════════════════ */
.pseg{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;margin-bottom:12px}
.seg{display:inline-flex;background:rgba(255,255,255,.05);border:1px solid var(--line);padding:4px}
.seg button{border:0;background:none;padding:10px 20px;cursor:pointer;
  font:600 13.5px var(--body);color:var(--ddk);transition:.24s;white-space:nowrap}
.seg button.on{background:var(--runway);color:#14100a}
.seg button .spar{font:700 9px/1 var(--mono);background:var(--grn);color:#fff;
  padding:3px 6px;margin-left:7px;border-radius:20px}
.seg button.on .spar{background:var(--stub);color:var(--grnh)}
.pseg-sub{text-align:center;color:var(--mdk);font-size:14.5px;margin:0 0 34px}

#pricing .ptoggle{display:inline-flex;gap:2px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:3px;margin-top:20px}
#pricing .ptoggle button{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.55);background:transparent;border:0;border-radius:9px;padding:9px 18px;cursor:pointer;transition:.15s;display:flex;align-items:center;gap:7px}
#pricing .ptoggle button.on{background:linear-gradient(110deg,#E8CC7A,#C9A84C 55%,#b8932f);color:#221a06;font-weight:700}
.tkg{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:30px;align-items:stretch}
.tk-stub{background:linear-gradient(110deg,#E8CC7A,#C9A84C 55%,#b8932f);color:#221a06;padding:14px 20px 12px;position:relative}
.tk-stars{font-size:11px;letter-spacing:3px;color:#221a06;line-height:1;margin-bottom:5px}
.tk-bs{position:absolute;top:13px;right:14px;font-family:'JetBrains Mono',monospace;font-size:8.5px;letter-spacing:.08em;text-transform:uppercase;background:#0a0a0a;color:#E8CC7A;border-radius:20px;padding:3px 9px;font-weight:700}
.tk-tag{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:#5a4711}
.tk-name{font-family:'Space Grotesk',sans-serif;font-size:23px;font-weight:700;color:#1a1305;margin-top:1px}
.tk-body{background:#fff;padding:16px 20px 20px;display:flex;flex-direction:column;flex:1}
.tk-price{display:flex;align-items:baseline;gap:3px;margin-bottom:2px}
.tk-price b{font-family:'Space Grotesk',sans-serif;font-size:42px;font-weight:700;color:#1a1305;line-height:1}
.tk.best .tk-price b{background:linear-gradient(110deg,#b8932f,#8a6d24);-webkit-background-clip:text;background-clip:text;color:transparent}
.tk-price .cur{font-family:'Space Grotesk',sans-serif;font-size:18px;color:#1a1305}
.tk-price .per{font-family:'JetBrains Mono',monospace;font-size:11px;color:#6b6250;margin-left:3px}
.tk-note{font-family:'JetBrains Mono',monospace;font-size:10px;color:#b8932f;min-height:14px;margin-bottom:14px}
.tk-ker{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.03em;color:#1a1305;background:rgba(201,168,76,.14);border:1px solid rgba(201,168,76,.34);border-radius:9px;padding:7px 10px;display:flex;align-items:center;gap:7px;margin-bottom:16px}
.tk-ker span{color:#b8932f}
.tk-feat{list-style:none;padding:0;margin:0 0 20px;display:flex;flex-direction:column;gap:9px;flex:1}
.tk-feat li{font-size:13px;line-height:1.4;color:#3a352c;padding-left:22px;position:relative}
.tk-feat li::before{content:'✓';position:absolute;left:0;top:0;color:#2f8a58;font-weight:700}
.tk-cta{display:block;text-align:center;font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.05em;text-transform:uppercase;text-decoration:none;border-radius:11px;padding:13px 16px;border:1px solid #b8932f;color:#b8932f;transition:.16s}
.tk-cta:hover{background:linear-gradient(110deg,#E8CC7A,#C9A84C 55%,#b8932f);color:#221a06;border-color:transparent;font-weight:700}
.tk.best .tk-cta{background:linear-gradient(110deg,#E8CC7A,#C9A84C 55%,#b8932f);color:#221a06;border-color:transparent;font-weight:700}
#pricing .tkg{align-items:stretch}
#pricing .tk-class{font-family:var(--mono);font-size:8.5px;letter-spacing:.24em;text-transform:uppercase;color:#221a06;opacity:.75;margin-top:5px;font-weight:700}
#pricing .tk-rip{position:relative;background:#fff;border-top:2px dashed #d8d2c2;padding:9px 16px 12px;display:flex;align-items:center;justify-content:space-between;gap:10px}
#pricing .tk-rip::before,#pricing .tk-rip::after{content:"";position:absolute;top:-8px;width:16px;height:16px;border-radius:50%;background:#070707;z-index:2}
#pricing .tk-rip::before{left:-9px}
#pricing .tk-rip::after{right:-9px}
#pricing .tk-rip .bar{flex:1;max-width:56%;height:22px;background:repeating-linear-gradient(90deg,#1a1305 0 2px,transparent 2px 4px,#1a1305 4px 5px,transparent 5px 9px);border-radius:2px;opacity:.8}
#pricing .tk-rip .bp-txt{font-family:var(--mono);font-size:8px;letter-spacing:.16em;text-transform:uppercase;color:#8a7c60;white-space:nowrap}
#pricing .tk.best .tk-stub{position:relative;overflow:hidden}
#pricing .tk.best .tk-stub::after{content:"";position:absolute;top:0;bottom:0;left:-70%;width:46%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-18deg);animation:tkSheen 4.2s ease-in-out infinite}
#pricing .tk.best .tk-bs{box-shadow:0 4px 14px -4px rgba(0,0,0,.5)}
#pricing .dp-tgrow .ptoggle{margin-top:0}
@media(max-width:900px){
.tkg{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
.tkg{grid-template-columns:1fr}
}

/* Partner-Ansicht */
.pbox{display:none}
.pbox.on{display:block}
.ebox.off{display:none}
.pcard{background:#fff;color:var(--ink);position:relative;border:1px solid rgba(255,255,255,.1);
  display:grid;grid-template-columns:1.15fr .85fr;gap:0}
.pcard-l{padding:32px 32px 30px;border-right:1px solid var(--cream-line)}
.pcard-r{padding:32px 30px 30px;background:var(--cream2)}
.pbadge{position:absolute;top:0;right:0;background:var(--runway);color:var(--gold-on);
  font:700 9px/1 var(--mono);letter-spacing:.13em;padding:7px 13px}
.pcard .tag{font:700 9px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;
  color:var(--mut);margin-bottom:11px}
.pcard h3{font-size:27px;margin-bottom:12px}
.pcard .lead{font:500 17px/1.55 var(--ser);color:var(--inkm);margin:0 0 20px}
.pcard .pr{font:700 40px/1 var(--disp);margin-bottom:3px;font-variant-numeric:tabular-nums}
.pcard .pr small{font-size:14px;color:var(--mut);font-weight:400}
.pcard .prn{font-size:13px;color:var(--grn);font-weight:500;margin-bottom:20px}
.pinc{margin:0;padding:0;list-style:none;font-size:13.6px;color:var(--inkm)}
.pinc li{padding:5px 0 5px 19px;position:relative;line-height:1.5}
.pinc li::before{content:'';position:absolute;left:1px;top:12px;width:9px;height:5px;
  border-left:1.6px solid var(--grn);border-bottom:1.6px solid var(--grn);transform:rotate(-45deg)}
.pcta{display:block;text-align:center;background:var(--runway);color:#14100a;padding:14px;
  font-weight:600;font-size:15px;margin-top:20px;transition:.22s}
.pcta:hover{transform:translateY(-2px)}
.pcta.aus{background:var(--cream2);color:var(--mut);text-decoration:line-through;cursor:default}
.pcta.aus:hover{transform:none}
.phint{font-size:12.4px;color:var(--mut);margin:13px 0 0;line-height:1.55}
.pstaffel{border:1px solid var(--cream-line);background:#fff;color:var(--ink);margin-top:16px}
.pstaffel-h{display:flex;align-items:center;gap:13px;padding:18px 24px;
  border-bottom:1px solid var(--cream-line)}
.pstaffel-h .ico{width:22px;height:22px;color:var(--gdi)}
.pstaffel-h b{display:block;font:700 16px/1.2 var(--disp)}
.pstaffel-h span{display:block;font-size:12.8px;color:var(--mut);margin-top:2px}
.pstaffel-g{display:grid;grid-template-columns:repeat(3,1fr)}
.pstaffel-g div{padding:18px 24px;border-right:1px solid var(--cream-line);text-align:center}
.pstaffel-g div:last-child{border-right:0}
.pstaffel-g .st{font:700 9px/1 var(--mono);letter-spacing:.11em;color:var(--mut);margin-bottom:7px}
.pstaffel-g .pv{font:700 22px/1 var(--disp);color:var(--ink)}
.pstaffel-f{padding:14px 24px;border-top:1px solid var(--cream-line);
  font-size:12.4px;color:var(--mut);line-height:1.55}
.pe{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:16px;
  border:1px solid var(--line);background:rgba(255,255,255,.02)}
.pe > div{padding:24px 22px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.pe h4{font-size:15.5px;margin-bottom:9px;color:#fff}
.pe p{margin:0 0 11px;font-size:13.2px;color:var(--mdk);line-height:1.6}
.pe .ptag{font:700 8.5px/1 var(--mono);letter-spacing:.1em;color:var(--gdh);
  background:rgba(232,204,122,.1);padding:5px 9px;display:inline-block}

/* ══ Cockpit-Matrix ═════════════════════════════════════════════════════ */
/* v1550 · Marcel: "die Cockpit-Matrix waere cool, wenn du das im hellen
   Bereich machst". 35 Zeilen auf Obsidian waren eine dunkle Wand; auf
   Papier liest sich eine Tabelle wie eine Tabelle. */
.mx-wrap{overflow-x:auto;border:1px solid var(--cream-line);background:#fff}
.mx{width:100%;border-collapse:collapse;font-size:13.4px;min-width:780px}
.mx th,.mx td{padding:11px 14px;text-align:center;border-bottom:1px solid var(--cream-line)}
.mx th:first-child,.mx td:first-child{text-align:left}
.mx thead th{background:var(--runway);color:var(--gold-on);position:sticky;top:0;z-index:2;
  font:700 10px/1.3 var(--mono);letter-spacing:.07em;text-transform:uppercase}
.mx tbody td{color:var(--inkm)}
.mx tbody td:first-child{color:var(--ink);font-weight:500}
.mx tbody tr:nth-child(even){background:#FCFBF8}
.mx tbody tr:hover{background:var(--cream2)}
.mx .ja{color:var(--grn);font-weight:700}
.mx .nein{color:rgba(20,18,15,.22)}
.mx .wert{color:var(--gdi);font-family:var(--mono);font-size:12px}
.mx-foot{padding:16px 18px;font-size:12.3px;color:var(--mut);line-height:1.6;
  border-top:1px solid var(--cream-line);background:var(--cream2)}
.mx-foot p{margin:0 0 8px}
.mx-foot p:last-child{margin:0}

/* ══ App / PWA ══════════════════════════════════════════════════════════ */
.appg{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center}
.appb{display:grid;gap:0;border:1px solid var(--line)}
.appb > div{padding:20px 22px;border-bottom:1px solid var(--line);display:flex;gap:13px}
.appb > div:last-child{border-bottom:0}
.appb .ico{width:20px;height:20px;color:var(--gdh);margin-top:2px}
.appb b{display:block;font-size:14.5px;color:#fff;margin-bottom:3px}
.appb span{display:block;font-size:13px;color:var(--mdk);line-height:1.55}

@media(max-width:1080px){
  .bpg,.cond-g,.trust{grid-template-columns:repeat(2,1fr)}
  .wf,.tkg,.pe{grid-template-columns:repeat(2,1fr)}
  .cond,.pcard,.stx-in,.appg{grid-template-columns:1fr}
  .pcard-l{border-right:0;border-bottom:1px solid var(--cream-line)}
}
@media(max-width:700px){
  .bpg,.wf,.tkg,.cond-g,.trust,.pe,.pstaffel-g{grid-template-columns:1fr}
  .wf .st,.trust > div,.cond-c,.pe > div,.pstaffel-g div{border-right:0;
    border-bottom:1px solid var(--cream-line)}
}


/* ═══════════════════════════════════════════════════════════════════════
   v1545 · Vertrauensband, Kurzfassung und der Modul-Durchlauf
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Vertrauensband direkt unter dem Laufband ─────────────────────────── */
.tband{background:var(--ob1);border-bottom:1px solid var(--line)}
.tband-in{display:grid;grid-template-columns:repeat(5,1fr);gap:0}  /* v1873: fuenf Eintraege (FuE-Siegel) */
.tband-in > div{display:flex;gap:13px;align-items:center;padding:20px 24px;
  border-right:1px solid var(--line)}
.tband-in > div:first-child{padding-left:0}
.tband-in > div:last-child{border-right:0}
.tband .ico{width:21px;height:21px;color:var(--gdh);flex:none}
.tband b{display:block;font:600 13.6px/1.3 var(--body);color:#fff}
.tband span{display:block;font-size:11.8px;color:var(--ddk);margin-top:2px}
/* v1873 - FuE-Siegel 2026 (BSFZ): das Bild ist farbig und rund, deshalb kein Gold-Icon, sondern das Siegel selbst in 52 px */
.tband-siegel img{width:64px;height:64px;flex:none;border-radius:50%;background:#fff;padding:2px;box-shadow:0 0 0 1px var(--line)}  /* v1873a: 52 war am Bildschirm nicht lesbar */

/* ── Was DealPilot macht: ein Satz, vier Punkte ───────────────────────── */
.satz{max-width:940px;margin:0 auto 40px;text-align:center}
.satz .eye{justify-content:center;margin-bottom:16px}
.satz .gross{margin:0;font:500 clamp(21px,2.9vw,33px)/1.42 var(--ser);color:var(--ink)}
.vier{display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border:1px solid var(--cream-line);background:#fff}
.vier > div{padding:26px 24px 28px;border-right:1px solid var(--cream-line);position:relative}
.vier > div:last-child{border-right:0}
.vier > div::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--runway);transform:scaleY(0);transform-origin:top;
  transition:transform .3s var(--e-weich)}
.vier > div:hover::before{transform:scaleY(1)}
.vier > div:hover{background:var(--cream)}
.vier .n{font:700 9.5px/1 var(--mono);letter-spacing:.17em;color:var(--gdi);
  display:block;margin-bottom:12px}
.vier b{display:block;font:700 16.5px/1.25 var(--disp);margin-bottom:8px}
.vier p{margin:0;font-size:13.4px;color:var(--inkm);line-height:1.58}

/* ── Der Modul-Durchlauf ──────────────────────────────────────────────── */
/* Neunzehn Karten untereinander waren eine Wand. Vier auf einmal, der
   Rest faehrt durch - dieselben Inhalte auf einem Viertel der Hoehe. */
.bpslide{position:relative}
.bpslide-vp{overflow:hidden}
.bpslide .bpg{display:flex;gap:16px;transition:transform .6s var(--e-hoch)}
.bpslide .bp{flex:0 0 calc(25% - 12px);min-width:0}
.bpslide-nav{display:flex;align-items:center;gap:20px;margin-top:26px;flex-wrap:wrap}
.bpslide-bar{flex:1;min-width:130px;height:3px;background:rgba(236,230,214,.14);overflow:hidden}
.bpslide-bar i{display:block;height:100%;background:var(--runway);width:21%;
  transition:width .5s var(--e-hoch),margin-left .5s var(--e-hoch)}
.bpslide-z{font:700 10px/1 var(--mono);letter-spacing:.14em;color:var(--ddk);white-space:nowrap}
.bpslide-z span{color:var(--gdh)}

@media(max-width:1080px){
  .tband-in,.vier{grid-template-columns:repeat(2,1fr)}
  .tband-siegel{grid-column:1 / -1;border-right:0}  /* v1873: fuenfter Eintrag allein in der letzten Zeile */
  /* landing-tband-1 · Marcel 17.10.2026: „auf der Handy-Version ist Server in Deutschland mit dem Logo
     versetzt". Gemessen bei 390 px: Symbol bei 26 px, die anderen bei 50 px - padding-left:0 des
     ersten Eintrags gilt nur fuer die Desktop-Zeile, im Raster ab 1080 px fluchten alle gleich. */
  .tband-in > div:first-child{padding-left:24px}
  .bpslide .bp{flex:0 0 calc(50% - 8px)}
}
@media(max-width:700px){
  .tband-in,.vier{grid-template-columns:1fr}
  .tband-in > div,.vier > div{border-right:0;border-bottom:1px solid var(--line)}
  .vier > div{border-bottom-color:var(--cream-line)}
  .bpslide .bp{flex:0 0 100%}
}


/* ═══════════════════════════════════════════════════════════════════════
   v1546 · Bilder
   Ein Bild hinter einem Abschnitt darf den Text nie schwerer lesbar
   machen. Deshalb liegt es weit abgedunkelt darunter und bekommt einen
   Verlauf nach oben und unten, der es in die Flaeche einbettet.
   ═══════════════════════════════════════════════════════════════════════ */
.mit-bild{position:relative;overflow:hidden}
.mit-bild > .wrap{position:relative;z-index:2}
.sec-bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.30;z-index:0;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 22%,#000 72%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 22%,#000 72%,transparent)}
.sec-bild.schwach{opacity:.17}
.mit-bild::after{content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(7,7,7,.92) 12%,rgba(7,7,7,.68) 58%,rgba(7,7,7,.82))}

.bildzeile{margin:0 0 6px;position:relative}
.bildzeile img{width:100%;height:clamp(200px,30vw,330px);object-fit:cover;
  filter:saturate(.86) contrast(1.02)}
.bildzeile figcaption{position:absolute;left:0;bottom:0;right:0;
  background:linear-gradient(transparent,rgba(12,11,9,.88));
  color:var(--gdh);padding:36px 22px 14px;
  font:700 10px/1.4 var(--mono);letter-spacing:.15em;text-transform:uppercase}

/* ═══════════════════════════════════════════════════════════════════
   v1557 · Die Grundregeln der Tickets - sie hatten gefehlt.
   Mein Filter in v1551 suchte nach "tkg", "tkt" und "tk-" und hat
   damit ausgerechnet ".tk" selbst verfehlt: die Regel mit Hintergrund,
   Radius 16 px und Schatten. Die Tickets trugen deshalb die Farbe des
   Laufbands. In v1553 habe ich das Laufband umbenannt und damit nur
   das Symptom behoben. Hier ist die Ursache.

   Marcel am 23.09.2026: "Das muss rund sein." Genau das steckt in
   dieser Regel - und im Umschalter (12 px aussen, 9 px innen).
   ═══════════════════════════════════════════════════════════════════ */
#pricing .ptoggle{display:inline-flex;gap:2px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:3px;margin-top:20px}
#pricing .ptoggle button{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.55);background:transparent;border:0;border-radius:9px;padding:9px 18px;cursor:pointer;transition:.15s;display:flex;align-items:center;gap:7px}
#pricing .ptoggle button.on{background:linear-gradient(110deg,#E8CC7A,#C9A84C 55%,#b8932f);color:#221a06;font-weight:700}
.tk{display:flex;flex-direction:column;background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 30px 66px -38px rgba(0,0,0,.8),0 0 0 1px rgba(201,168,76,.28)}
.tk.best{box-shadow:0 42px 92px -38px rgba(201,168,76,.5),0 0 0 1.6px #C9A84C}
.tk.best .tk-price b{background:linear-gradient(110deg,#b8932f,#8a6d24);-webkit-background-clip:text;background-clip:text;color:transparent}
.tk.best .tk-cta{background:linear-gradient(110deg,#E8CC7A,#C9A84C 55%,#b8932f);color:#221a06;border-color:transparent;font-weight:700}
#pricing .tk{transition:transform .25s ease,box-shadow .25s ease}
#pricing .tk:hover{transform:translateY(-4px)}
#pricing .tk.best{transform:scale(1.045);z-index:2;box-shadow:0 34px 70px -28px rgba(201,168,76,.55),0 0 0 1.5px rgba(201,168,76,.75)}
#pricing .tk.best:hover{transform:scale(1.045) translateY(-4px)}
#pricing .tk.best .tk-stub{position:relative;overflow:hidden}
#pricing .tk.best .tk-stub::after{content:"";position:absolute;top:0;bottom:0;left:-70%;width:46%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-18deg);animation:tkSheen 4.2s ease-in-out infinite}
#pricing .tk.best .tk-bs{box-shadow:0 4px 14px -4px rgba(0,0,0,.5)}
#pricing .dp-tgrow .ptoggle{margin-top:0}
@media(max-width:900px){
#pricing .tk.best{transform:none}
#pricing .tk.best:hover{transform:translateY(-4px)}
}

/* Die Umschalter tragen jetzt die runde Form der bisherigen Seite. */
.seg{border-radius:12px;padding:3px}
.seg button{border-radius:9px;font-family:var(--mono);font-size:11px;
  letter-spacing:.05em;text-transform:uppercase;padding:9px 18px}
.seg button.on{font-weight:700}
.seg button .spar{border-radius:20px}

/* ══ Videobereich ══════════════════════════════════════════════════════ */
.vidg{display:grid;grid-template-columns:1.6fr .9fr;gap:18px;align-items:start}
.vid-haupt{position:relative;background:#000;border-radius:14px;overflow:hidden;
  box-shadow:0 30px 66px -38px rgba(0,0,0,.9)}
.vid-haupt video{width:100%;display:block;aspect-ratio:16/9;object-fit:cover;background:#000}
.vid-kopf{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:13px;
  padding:34px 20px 16px;pointer-events:none;
  background:linear-gradient(transparent,rgba(7,7,7,.9))}
.vid-nr{font:700 10px/1 var(--mono);letter-spacing:.14em;color:var(--gold-on);
  background:var(--runway);padding:6px 9px;border-radius:20px;flex:none}
.vid-kopf b{display:block;font:700 16px/1.25 var(--disp);color:#fff}
.vid-kopf span span,.vid-kopf > div > span{display:block;font-size:12.6px;color:var(--mdk);margin-top:2px}
.vid-liste{display:flex;flex-direction:column;gap:9px}
.vid-w{display:flex;align-items:center;gap:13px;width:100%;text-align:left;cursor:pointer;
  background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:12px;
  padding:14px 15px;transition:.24s var(--e-weich);color:inherit;font:inherit}
.vid-w:hover{background:rgba(201,168,76,.09);transform:translateX(3px)}
.vid-w.on{background:rgba(201,168,76,.12);border-color:var(--gd)}
.vid-wn{font:700 11px/1 var(--mono);color:var(--gdh);flex:none}
.vid-wt{flex:1;min-width:0}
.vid-wt b{display:block;font:700 14.5px/1.3 var(--disp);color:#fff}
.vid-wt span{display:block;font-size:12.4px;color:var(--mdk);margin-top:2px}
.vid-wd{font:500 10px/1 var(--mono);color:var(--ddk);flex:none}
@media(max-width:900px){ .vidg{grid-template-columns:1fr} }

/* ═══════════════════════════════════════════════════════════════════════
   v1562 · Der begehbare Ablauf
   Aus "Was DealPilot macht" und "In fuenf Schritten zum Ziel" wird einer:
   vier Reiter, darunter faehrt auf, was in dieser Phase geschieht.
   ═══════════════════════════════════════════════════════════════════════ */
.ablauf-w{border:1px solid var(--cream-line);background:#fff}
.ab-reiter{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--cream-line)}
.ab-r{position:relative;background:none;border:0;border-right:1px solid var(--cream-line);
  padding:20px 20px 22px;cursor:pointer;text-align:left;font:inherit;color:inherit;
  transition:background .26s var(--e-weich);display:block}
.ab-r:last-child{border-right:0}
.ab-r:hover{background:var(--cream2)}
.ab-rn{display:block;font:700 9.5px/1 var(--mono);letter-spacing:.17em;color:var(--mut);
  margin-bottom:9px;transition:color .26s}
.ab-rt{display:block;font:700 18px/1.2 var(--disp);color:var(--ink);transition:color .26s}
.ab-r.on{background:var(--cream)}
.ab-r.on .ab-rn{color:var(--gdi)}
.ab-rb{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(20,18,15,.07);
  overflow:hidden;display:block}
.ab-rb i{display:block;height:100%;width:0;background:var(--runway);
  transition:width .4s var(--e-weich)}
.ab-r.on .ab-rb i{width:100%}
/* Solange von selbst weitergeschaltet wird, laeuft der Balken mit der Zeit.
   Sobald jemand selbst blaettert (.ab-hand), steht er einfach voll da. */
.ablauf-w:not(.ab-hand) .ab-r.on .ab-rb i{animation:abLauf 5s linear forwards}
@keyframes abLauf{from{width:0}to{width:100%}}

.ab-buehne{position:relative;min-height:330px}
.ab-b{display:none;padding:30px 30px 32px}
.ab-b.on{display:block}
.ab-kopf{max-width:760px;margin-bottom:24px}
.ab-schritt{font:700 9.5px/1 var(--mono);letter-spacing:.17em;color:var(--gdi);
  display:block;margin-bottom:11px}
.ab-kopf h3{font-size:clamp(21px,2.6vw,28px);margin-bottom:11px}
.ab-kopf p{margin:0;font-size:15.5px;color:var(--inkm);line-height:1.62}
.ab-wege{display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border:1px solid var(--cream-line)}
.ab-w{padding:18px 18px 20px;border-right:1px solid var(--cream-line);
  opacity:0;transform:translateY(10px);
  animation:abAuf .5s var(--e-hoch) forwards;animation-delay:calc(var(--n) * 90ms)}
.ab-w:last-child{border-right:0}
@keyframes abAuf{to{opacity:1;transform:none}}
.ab-w b{display:block;font:700 14.5px/1.3 var(--disp);color:var(--ink);margin-bottom:6px}
.ab-w span{display:block;font-size:12.8px;color:var(--inkm);line-height:1.55}
.ab-erg{display:flex;gap:9px;flex-wrap:wrap;margin-top:18px;
  opacity:0;animation:abAuf .5s var(--e-hoch) .42s forwards}
.ab-erg span{font:700 9.5px/1 var(--mono);letter-spacing:.11em;text-transform:uppercase;
  background:rgba(201,168,76,.13);color:var(--gdi);padding:8px 12px}
.ab-erg span::before{content:'✓';margin-right:6px;color:var(--grn)}

@media(prefers-reduced-motion:reduce){
  .ab-w,.ab-erg{opacity:1;transform:none;animation:none}
  .ablauf-w .ab-r.on .ab-rb i{animation:none;width:100%}
}
@media(max-width:900px){
  .ab-reiter{grid-template-columns:repeat(2,1fr)}
  .ab-r:nth-child(2){border-right:0}
  .ab-r:nth-child(-n+2){border-bottom:1px solid var(--cream-line)}
  .ab-wege{grid-template-columns:repeat(2,1fr)}
  .ab-w{border-bottom:1px solid var(--cream-line)}
  .ab-w:nth-child(2){border-right:0}
}
@media(max-width:620px){
  .ab-reiter,.ab-wege{grid-template-columns:1fr}
  .ab-r,.ab-w{border-right:0;border-bottom:1px solid var(--cream-line)}
  .ab-b{padding:24px 20px 26px}
}

/* ═══════════════════════════════════════════════════════════════════════
   v1563 · Die Kontingent-Tabelle
   Marcel: "dieses 5 und 5, 5 5 5 - das kann gar keiner verstehen."
   Jetzt steht in jeder Zeile, WAS gezaehlt wird, und in jeder Spalte
   ein Plan. Die Tabelle erklaert sich damit selbst.
   ═══════════════════════════════════════════════════════════════════════ */
.kont-vor{max-width:66ch;margin:0 0 20px;color:var(--inkm);font-size:15px;line-height:1.62}
.kont-tab{width:100%;border-collapse:collapse;background:#fff;
  border:1px solid var(--cream-line);font-size:14.5px}
.kont-tab th,.kont-tab td{padding:13px 16px;text-align:center;
  border-bottom:1px solid var(--cream-line)}
.kont-tab th:first-child,.kont-tab td:first-child{text-align:left}
.kont-tab thead th{background:var(--stub);color:var(--gdh);
  font:700 10px/1.3 var(--mono);letter-spacing:.09em;text-transform:uppercase}
.kont-tab thead th.best{background:var(--runway);color:var(--gold-on)}
.kont-tab td{color:var(--ink);font-family:var(--mono);font-size:15px;font-weight:700}
.kont-tab td:first-child{font-family:var(--body);font-weight:400}
.kont-tab td b{display:block;font:700 15px/1.3 var(--disp);color:var(--ink);margin-bottom:3px}
.kont-tab td span{display:block;font:400 12.4px/1.4 var(--body);color:var(--mut)}
.kont-tab td.best{background:rgba(201,168,76,.09)}
.kont-tab td.nein{color:rgba(20,18,15,.25)}
.kont-tab tbody tr:last-child td{border-bottom:0}
.kont-tab tr.sum td{background:var(--cream2);border-top:2px solid var(--gd);
  font-size:16px}
.kont-tab tr.sum td:first-child{font:700 13.5px/1.3 var(--disp);color:var(--ink)}
.kont-tab tr.sum td.best{background:rgba(201,168,76,.16)}
.kont-nach{max-width:66ch;margin:18px 0 0;color:var(--inkm);font-size:14.4px;line-height:1.62}
@media(max-width:700px){
  .kont-tab{font-size:13px}
  .kont-tab th,.kont-tab td{padding:10px 9px}
  .kont-tab td span{display:none}
}

/* ═══════════════════════════════════════════════════════════════════════
   v1563 · Der Ablauf in Obsidian
   Marcel: "nicht einfach nur so ein langweiliges Weiss, sondern auch mit
   den Schwarztoenen arbeiten ... beim Erfassen vielleicht ein Mikrofon,
   dann kommt ein Dokument per PDF. Also richtig geil."

   Die Buehne wird dunkel, die Reiter bleiben hell - so sieht man, wo man
   steht, und der Inhalt bekommt Gewicht. Je Phase poppt ein grosses
   Symbol auf: Mikrofon, Zahnrad, Zielscheibe, Dokument.
   ═══════════════════════════════════════════════════════════════════════ */
.ablauf-w{border:0;background:transparent}
.ab-reiter{border-bottom:0;gap:0;background:#fff;border:1px solid var(--cream-line);
  border-bottom:0}
.ab-buehne{background:var(--ob);color:var(--txtd);min-height:380px;position:relative;
  overflow:hidden}
/* Bauzeichnungs-Raster als ruhiger Grund */
.ab-buehne::before{content:'';position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(232,204,122,.09) 1px,transparent 1px),
    linear-gradient(90deg,rgba(232,204,122,.09) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(70% 70% at 22% 30%,#000,transparent 76%);
  mask-image:radial-gradient(70% 70% at 22% 30%,#000,transparent 76%)}
.ab-b{padding:34px 34px 36px;position:relative;z-index:1}
.ab-kopf{position:relative;padding-left:78px;min-height:64px}
/* Das Symbol poppt auf */
.ab-sym{position:absolute;left:0;top:-2px;width:58px;height:58px;display:flex;
  align-items:center;justify-content:center;
  background:rgba(232,204,122,.1);border:1px solid rgba(232,204,122,.28);
  color:var(--gdh);
  opacity:0;transform:scale(.6) rotate(-12deg);
  animation:abSym .58s cubic-bezier(.2,1.4,.4,1) forwards}
.ab-sym .ico{width:28px;height:28px;stroke-width:1.4}
@keyframes abSym{to{opacity:1;transform:none}}
.ab-schritt{color:var(--gdh)}
.ab-kopf h3{color:#fff}
.ab-kopf p{color:var(--mdk)}
.ab-wege{border-color:var(--line);background:rgba(255,255,255,.02)}
.ab-w{border-right-color:var(--line)}
.ab-w b{color:#fff}
.ab-w span{color:var(--mdk)}
.ab-erg span{background:rgba(232,204,122,.12);color:var(--gdh)}
.ab-erg span::before{color:var(--grnh)}
/* Der aktive Reiter zeigt nach unten in die dunkle Buehne */
.ab-r.on{background:var(--ob);color:#fff}
.ab-r.on .ab-rt{color:#fff}
.ab-r.on .ab-rn{color:var(--gdh)}
.ab-r.on .ab-rb{background:rgba(255,255,255,.12)}
@media(prefers-reduced-motion:reduce){
  .ab-sym{opacity:1;transform:none;animation:none}
}
@media(max-width:620px){
  .ab-b{padding:26px 20px 28px}
  .ab-kopf{padding-left:0;padding-top:70px}
  .ab-sym{width:52px;height:52px}
}

/* ── Die zwei Wege im Sprechlauf ─────────────────────────────────────── */
.zwei-wege{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:24px 0;
  border:1px solid var(--cream-line);background:#fff}
.weg{padding:24px 24px 26px;border-right:1px solid var(--cream-line);position:relative}
.weg:last-child{border-right:0}
.weg::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--runway);transform:scaleY(0);transform-origin:top;
  transition:transform .3s var(--e-weich)}
.weg:hover::before{transform:scaleY(1)}
.weg:hover{background:var(--cream)}
.weg-k{display:inline-block;font:700 9px/1 var(--mono);letter-spacing:.16em;
  text-transform:uppercase;background:var(--stub);color:var(--gdh);
  padding:5px 9px;margin-bottom:12px}
.weg h4{font-size:18px;margin-bottom:10px}
.weg p{margin:0 0 10px;font-size:14px;color:var(--inkm);line-height:1.6}
.weg .weg-fuer{margin:12px 0 0;padding-top:11px;border-top:1px solid var(--cream-line);
  font-size:13.2px;color:var(--mut)}
.weg .weg-fuer b{color:var(--gdi)}
@media(max-width:760px){
  .zwei-wege{grid-template-columns:1fr}
  .weg{border-right:0;border-bottom:1px solid var(--cream-line)}
}

/* ══ NACHKAUF ════════════════════════════════════════════════════════
   v1588 · Die Kontingent-Nachbuchung. Sie gehoerte der alten Landing
   und hat hier gefehlt.
   Marcel ueber die alte Darstellung: "Das kann gar keiner verstehen,
   dieses 5 und 5, 5 5 5." Deshalb traegt jede Karte jetzt einen Satz,
   der sagt wofuer - die Zahlenkette steht klein darunter. ══════════ */
#nachkauf .sec-kopf{text-align:center;margin-bottom:26px}
#nachkauf .sec-lb{font:700 9px/1 var(--mono);letter-spacing:.2em;color:var(--gdh);
  display:block;margin-bottom:10px}
#nachkauf h2{font-size:30px;color:#fff;margin:0 0 10px}
#nachkauf .sec-sub{margin:0 auto;max-width:64ch;font-size:14.6px;line-height:1.6;
  color:var(--mdk)}
#nachkauf .sec-sub b{color:#fff}

.nk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);max-width:940px;margin:0 auto}
.nk-k{background:rgba(255,255,255,.035);padding:22px 20px 20px;display:flex;
  flex-direction:column;gap:7px;transition:background .3s var(--e-weich)}
.nk-k:hover{background:rgba(255,255,255,.06)}
.nk-k.best{background:rgba(201,168,76,.1);position:relative}
.nk-k.best::before{content:'MEIST GEWÄHLT';position:absolute;top:0;left:0;right:0;
  background:var(--runway);color:var(--gold-on);font:700 7.5px/1 var(--mono);
  letter-spacing:.14em;text-align:center;padding:5px 0}
.nk-k.best{padding-top:32px}
.nk-name{font:700 9px/1 var(--mono);letter-spacing:.15em;color:var(--gdh)}
.nk-preis{font:700 38px/1 var(--disp);color:#fff;letter-spacing:-.02em}
.nk-was{font:700 13.5px/1.35 var(--disp);color:#fff}
.nk-wofuer{font-size:12.4px;line-height:1.5;color:var(--mdk);flex:1}
.nk-cta{display:block;margin-top:9px;padding:11px 0;text-align:center;
  background:var(--runway);color:var(--gold-on);font:700 12.5px/1 var(--disp);
  transition:filter .25s}
.nk-cta:hover{filter:brightness(1.1)}

.nk-einzel{max-width:940px;margin:22px auto 0;border:1px solid var(--line);
  background:rgba(255,255,255,.025);padding:20px 22px}
.nk-e-h{font:700 13.5px/1.3 var(--disp);color:#fff;margin-bottom:14px;
  text-align:center}
.nk-e-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.nk-e{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:12px 14px;background:rgba(255,255,255,.04);border-left:2px solid var(--gd)}
.nk-e-was{font:600 12.8px/1.3 var(--body);color:var(--txtd)}
.nk-e-was small{display:block;font:500 10.5px/1.45 var(--mono);color:var(--ddk);
  margin-top:3px}
.nk-e-preis{font:700 17px/1 var(--disp);color:var(--gdh);white-space:nowrap;flex:none}
.nk-e-cta{display:block;margin:16px auto 0;max-width:280px;padding:11px 0;
  text-align:center;border:1px solid var(--gd);color:var(--gdh);
  font:700 12.5px/1 var(--disp);transition:.25s var(--e-weich)}
.nk-e-cta:hover{background:rgba(201,168,76,.14)}
.nk-note{text-align:center;margin:18px auto 0;max-width:72ch;font-size:12.4px;
  line-height:1.55;color:var(--mut)}

@media(max-width:860px){
  .nk-grid,.nk-e-grid{grid-template-columns:1fr}
  #nachkauf h2{font-size:24px}
  .nk-preis{font-size:32px}
}

/* ── Wortzeichen ohne Haus-Icon ─────────────────────────────────────
   v1592 · Marcel am 24.09.2026: "bei den Logos ganz oben und unten, da
   ist irgendwie so ein Icon davor mit einem Haeuschen. Einmal unten aus
   dem Footer-Bereich raus ... und das Ganze bitte oben im Header auch."
   Das Wortzeichen traegt jetzt allein - und darf dafuer groesser sein. */
.mark-gross .wort{font-size:23px;letter-spacing:-.02em}
.nav .mark-gross{padding-left:2px}
footer .mark-gross .wort{font-size:21px}
@media(max-width:700px){ .mark-gross .wort{font-size:20px} }

/* v2215b · Kontingent-Tabelle am Handy: gemessen 395 px Breite bei 375 px Ansicht
   (leistungsumfang.html, Seite lief 46 px quer ueber). Weniger Polster, kleinere Ziffern. */
@media (max-width:560px){
  .kont-tab th,.kont-tab td{padding:10px 6px}
  .kont-tab td{font-size:13px}
  .kont-tab td b{font-size:13.5px}
  .kont-tab td span{font-size:11.5px}
  .kont-tab thead th{letter-spacing:.04em}
}