/* Aions · aions.css · Runde H 2026-10-21
   Gestaltung nach aions_notes/relaunch/mockup/ (startseite, leistungen, partner, agenturen).
   Ersetzt den Stand bis Runde K2 vollstaendig (alte Gestaltung, Dashboard, Runde-G-Block).
   Schriften lokal in /fonts, keine Verbindung zu Dritten. Im HTML keine style-Attribute.
   Aufbau: Schriften · Variablen · Grundlagen · Kopf und Fuss · Abschnitte · Bausteine der Seiten ·
   Tabellen und Info-Buttons · Bestandsseiten (Insights, Artikel, Rechtliches) · Breiten.
   Danach folgen die Visual-Bausteine (.v-*, aus bausteine/visuals.css). */

/* ---------- Schriften ---------- */
@font-face{font-family:"Spectral";font-style:normal;font-weight:400;font-display:swap;src:url("./fonts/spectral-latin-400.woff2") format("woff2")}
@font-face{font-family:"Spectral";font-style:normal;font-weight:500;font-display:swap;src:url("./fonts/spectral-latin-500.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url("./fonts/ibm-plex-sans-latin-400.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500;font-display:swap;src:url("./fonts/ibm-plex-sans-latin-500.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;src:url("./fonts/ibm-plex-sans-latin-600.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("./fonts/ibm-plex-mono-v20-latin-regular.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("./fonts/ibm-plex-mono-v20-latin-500.woff2") format("woff2")}

/* ---------- Variablen ---------- */
:root{
  --paper:#F7F6EF;--white:#FFFDF8;--sand:#E9E3D4;--surface-2:#F3F1E8;--teal-tint:#E6EFEC;
  --teal:#14544C;--teal-deep:#0E3C36;--teal-mid:#1F6E64;--rust:#A34733;--rose:#E9C9BE;
  --ink:#1E2B29;--ink-2:#4A5552;--ink-3:#5A6461;
  --on-teal:#F7F6EF;--on-teal-2:#DDE9E6;--on-teal-3:#CFE0DC;
  --line:rgba(20,84,76,.12);--line-soft:rgba(20,84,76,.10);--line-strong:rgba(20,84,76,.16);--line-chip:rgba(20,84,76,.30);
  --shadow-panel:0 24px 60px rgba(20,84,76,.14);--shadow-card:0 18px 44px rgba(20,84,76,.22);--shadow-tip:0 10px 24px rgba(0,0,0,.18);
  --serif:Spectral,Georgia,"Times New Roman",serif;--sans:"IBM Plex Sans",Arial,Helvetica,sans-serif;--mono:"IBM Plex Mono",Consolas,"Courier New",monospace;
  --max:1200px;--gutter:24px;--sec-y:96px;--sec-mod:56px;
  --r-s:8px;--r-m:12px;--r-l:14px;--r-xl:16px;
}

/* ---------- Grundlagen ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.55 var(--sans)}
h1,h2,h3{margin:0;font-family:var(--serif);font-weight:500;color:var(--teal);overflow-wrap:break-word;hyphens:auto}
h1{font-size:clamp(34px,4.6vw,60px);line-height:1.06}
h2{font-size:clamp(30px,4vw,48px);line-height:1.1}
h3{font-size:26px;line-height:1.2}
p,ul,ol,dl,figure{margin:0}
strong,b{font-weight:600}
a{color:var(--teal);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--teal-deep);text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--rust);outline-offset:2px}
sup{font-size:max(12px,.7em);line-height:0}
/* Textfarben der Seiten gelten nicht in den Visual-Bausteinen (.v-fig bringt eigene Farben mit) */
main :is(p,li,dd):not(:where(.v-fig *)){color:var(--ink-2)}
main :is(p,li) strong:not(:where(.v-fig *)){color:var(--ink)}
.wrap{max-width:calc(var(--max) + 2 * var(--gutter));margin:0 auto;padding:0 var(--gutter)}
.mono{font-family:var(--mono)}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* Abstaende im Fluss: Abschnitt, Textspalte, Karte */
.flow>*+*{margin-top:16px}
.flow>:is(h1,h2)+*{margin-top:20px}
.flow>.cta-row{margin-top:28px}
.flow>.note-sm{margin-top:12px}
.flow>.cta-row+.note-sm{margin-top:16px}
.flow>:is(.grid2,.grid3,.grid4,.split,.tscroll,.plan-matrix,.plan-extras,.v-fig,.steps4,.feat-cols,.faq,.cases,.pricebar,.people,.overview,.band3,.stufen,.vis-full,.close-row,.form-placeholder){margin-top:40px}
.flow>.sec-head-row+*,.flow>.sec-head+*{margin-top:40px}

/* ---------- Texte ---------- */
.label{margin:0;font:400 13px/1.4 var(--mono);letter-spacing:3px;text-transform:uppercase;color:var(--rust)}
.kicker{font:400 13px/1.4 var(--mono);color:var(--ink-2)}
.lead{font-size:20px;line-height:1.5;max-width:540px}
.page-lead{font-size:19px;line-height:1.5;max-width:760px}
.note-sm{font-size:14px;line-height:1.5;color:var(--ink-3)}
main .note-sm{color:var(--ink-3)}
h2.col,h1.col{max-width:900px}
.prose{max-width:760px}
.prose>*+*{margin-top:16px}
.after-table,.after-people{max-width:760px}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:14px 23px;border:1px solid var(--teal);border-radius:var(--r-s);background:var(--teal);color:var(--on-teal);font:500 17px/1.25 var(--sans);text-align:center;text-decoration:none;cursor:pointer}
.btn:hover{background:var(--teal-deep);border-color:var(--teal-deep);color:var(--on-teal)}
.btn-ghost{background:transparent;color:var(--teal)}
.btn-ghost:hover{background:rgba(20,84,76,.07);border-color:var(--teal);color:var(--teal-deep)}
.btn-sm{padding:10px 18px;font-size:15px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px}
.lnk{font-weight:500;text-decoration:none}
.lnk::after{content:" \203A"}
.lnk:hover{text-decoration:underline}

/* ---------- Kopfzeile ---------- */
header.site{position:relative;z-index:20;background:var(--paper);border-bottom:1px solid var(--line)}
.hdr{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:76px}
.mark{font:500 20px/1 var(--mono);letter-spacing:6px;text-transform:uppercase;color:var(--teal);text-decoration:none;white-space:nowrap}
.mark:hover{color:var(--teal-deep)}
.nav{display:flex;flex-wrap:wrap;gap:8px 28px;font-size:15px}
.nav a{color:var(--ink);text-decoration:none;white-space:nowrap}
.nav a:hover{color:var(--teal);text-decoration:underline;text-underline-offset:5px}
.nav a[aria-current="page"]{color:var(--teal);font-weight:600}
.hdr-end{display:flex;align-items:center;gap:18px}
.lang{display:flex;align-items:baseline;gap:6px;margin:0;font-size:15px;color:var(--ink-2)}
.lang a{color:var(--ink-2);text-decoration:none}
.lang a:hover{color:var(--teal);text-decoration:underline}
.lang .on{color:var(--teal);font-weight:600}
.hdr-login{font-size:15px;font-weight:500;text-decoration:none;white-space:nowrap}
.lbl-short{display:none}
.menu{display:none;position:relative}
.menu>summary{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--line-strong);border-radius:var(--r-s);list-style:none;cursor:pointer}
.menu>summary::-webkit-details-marker{display:none}
.bars,.bars::before,.bars::after{display:block;width:18px;height:2px;border-radius:1px;background:var(--teal)}
.bars{position:relative}
.bars::before,.bars::after{content:"";position:absolute;left:0}
.bars::before{top:-6px}
.bars::after{top:6px}
.menu[open] .bars{background:transparent}
.menu[open] .bars::before{top:0;transform:rotate(45deg)}
.menu[open] .bars::after{top:0;transform:rotate(-45deg)}
.panel{position:absolute;right:0;top:calc(100% + 10px);z-index:30;width:min(300px,calc(100vw - 2 * var(--gutter)));display:flex;flex-direction:column;gap:4px;padding:16px 20px;background:var(--white);border:1px solid var(--line-strong);border-radius:var(--r-m);box-shadow:var(--shadow-card)}
.panel a{padding:8px 0;font-size:17px;color:var(--ink);text-decoration:none}
.panel a[aria-current="page"]{color:var(--teal);font-weight:600}
.panel .lang{margin-top:8px;padding-top:12px;border-top:1px solid var(--line)}
.panel .lang a{padding:0}
.panel .mono{margin-top:8px;font-size:14px;color:var(--ink-2)}

/* ---------- Fusszeile ---------- */
footer.site{padding:40px 0;border-top:1px solid var(--line)}
footer.site .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:24px 48px;font-size:14px;color:var(--ink-2)}
.fbrand{display:flex;flex-direction:column;gap:8px}
.fmark{font:500 16px/1 var(--mono);letter-spacing:4px;text-transform:uppercase;color:var(--teal)}
.fline{font:400 13px/1.5 var(--mono);color:var(--ink-2)}
.fnav{display:flex;flex-wrap:wrap;gap:8px 20px;max-width:520px}
footer.site a{color:var(--ink-2)}
footer.site a:hover{color:var(--teal)}
.fmeta{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.fmeta .lang{font-size:14px}

/* ---------- Abschnitte und Flaechen ---------- */
main>section{padding:var(--sec-y) 0}
.s-white{background:var(--white);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.s-sand{background:var(--sand)}
.s-teal{background:var(--teal);color:var(--on-teal)}
.s-mod{padding:var(--sec-mod) 0;border-top:1px solid var(--line)}
main>section.s-mod{padding:var(--sec-mod) 0}
.s-tight{padding-top:0 !important}
.s-teal :is(h2,h3){color:var(--on-teal)}
.s-teal .label{color:var(--rose)}
.s-teal :is(p,li):not(:where(.v-fig *)){color:var(--on-teal-2)}
.s-teal p strong:not(:where(.v-fig *)){color:var(--on-teal)}
.s-teal .note-sm{color:var(--on-teal-3)}
.s-teal a:not(.btn):not(:where(.v-fig *)){color:var(--on-teal)}
.s-teal .btn{background:var(--paper);border-color:var(--paper);color:var(--teal)}
.s-teal .btn:hover{background:var(--white);border-color:var(--white);color:var(--teal-deep)}
.s-teal .btn-ghost{background:transparent;border-color:var(--on-teal);color:var(--on-teal)}
.s-teal .btn-ghost:hover{background:rgba(247,246,239,.12);color:var(--on-teal)}
.hero{padding:80px 0 96px}
main>section.hero{padding:80px 0 96px}
main>section.page-hero{padding:72px 0 56px}
.hero h1{font-size:clamp(38px,5.2vw,68px);line-height:1.04}
.hero .split{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)}
.hero .txt>*+*{margin-top:24px}
.hero .txt>.note-sm{margin-top:16px}
.page-hero h1{max-width:900px}
.sec-head{max-width:760px}
.sec-head>*+*{margin-top:16px}
.sec-head-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px 32px}
.sec-head-row>.sec-head{max-width:640px}
.sec-head-row .side-note{max-width:420px;padding:12px 16px;border-radius:10px;background:var(--sand);font-size:15px;color:var(--ink)}
.grid2.uneven{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);align-items:start}
.grid2>.card.sand>.v-fig{margin-left:-18px;margin-right:-18px}

/* Text links, Visual rechts */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:56px;align-items:center}
.split.top{align-items:start}
.split.even{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.split.narrow-txt{grid-template-columns:minmax(0,.75fr) minmax(0,1.3fr)}
.split>.txt{min-width:0}
.txt>*+*{margin-top:16px}
.txt>:is(h1,h2)+*{margin-top:20px}
.txt>.cta-row{margin-top:28px}
.txt>.note-sm{margin-top:12px}
.txt>:is(.what,.pts,.card,.cta-card)+*{margin-top:16px}
.split>.vis{min-width:0;display:flex;flex-direction:column;gap:32px}
.split>.vis>.v-fig{width:100%;margin-left:auto;margin-right:auto}
.vis-full{min-width:0}

/* Karten und Raster */
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:24px}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:24px}
.grid4{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:16px}
.card{min-width:0;display:flex;flex-direction:column;padding:32px;background:var(--white);border:1px solid var(--line-strong);border-radius:var(--r-xl)}
.card>*+*{margin-top:14px}
.card>.cta-row{margin-top:auto;padding-top:20px}
.card>.basis{margin-top:20px}
.card h3{font-size:28px;line-height:1.2}
.s-white .card{background:var(--paper)}
.card.sand{background:var(--sand);border-color:transparent}
.card.teal{background:var(--teal);border-color:var(--teal);color:var(--on-teal)}
.card.teal :is(h2,h3){color:var(--on-teal)}
.card.teal :is(p,li):not(:where(.v-fig *)){color:var(--on-teal-2)}
.card.teal .kicker,.card.teal .label{color:var(--rose)}
.card.teal .note-sm{color:var(--on-teal-3)}
.card.teal .btn{background:var(--paper);border-color:var(--paper);color:var(--teal)}
.card.teal .btn:hover{background:var(--white);border-color:var(--white)}
.card.teal .lnk,.card.teal a:not(.btn){color:var(--on-teal)}
.card.small{padding:24px;border-radius:var(--r-l)}
.card.small h3{font-size:24px}
.card .v-fig{margin-top:20px}
.price{color:var(--ink-2)}
.price-n{font:400 44px/1.1 var(--serif);color:var(--ink)}
.card .pts{font-size:15px}

/* Listen */
.pts{list-style:none;padding:0;display:flex;flex-direction:column;gap:10px;max-width:760px}
.pts>li{position:relative;padding-left:22px}
.pts>li::before{content:"\203A";position:absolute;left:2px;top:0;color:var(--teal);font-weight:600}
.s-teal .pts>li::before,.card.teal .pts>li::before{color:var(--rose)}
.pts.num>li{display:flex;gap:14px;padding-left:0}
.pts.num>li::before{display:none}
.pts.num>li>.mono:first-child{flex:0 0 auto;padding-top:2px;font-size:14px;color:var(--rust)}
.pts.links>li>a{font-weight:500}
.feat-cols{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:24px}
.feat-cols:has(>li:nth-child(5)){grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.feat-cols>li{padding-top:14px;border-top:2px solid var(--teal);font-size:15px}
.feat-cols>li>strong:first-child{display:block;margin-bottom:6px;font-size:17px}
.what{padding:16px 18px;background:var(--white);border:1px solid var(--line);border-radius:var(--r-m);font-size:15px}
.s-white .what{background:var(--paper)}
.what-h{margin:0 0 8px;font:400 12px/1.4 var(--mono);color:var(--ink-2)}
.what .pts{gap:6px}
.what .pts>li{color:var(--ink)}

/* Vier Schritte (Plattform-Uebersicht, So arbeiten wir, Partner-Phasen) */
.overview,.steps4{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:12px}
.overview>li{display:flex;flex-direction:column;gap:6px;padding:16px 18px;background:var(--white);border:1px solid var(--line-strong);border-radius:var(--r-m)}
.overview .t{font:400 12px/1.4 var(--mono);color:var(--rust)}
.overview .d{display:flex;flex-direction:column;gap:6px}
.overview .d a{text-decoration:none}
.overview .d a:hover{text-decoration:underline}
.steps4{gap:16px}
.steps4>li{display:flex;flex-direction:column;gap:10px;padding:24px;background:var(--white);border:1px solid var(--line-strong);border-radius:var(--r-l)}
.s-white .steps4>li{background:var(--paper)}
.steps4 .t{font:500 24px/1.2 var(--serif);color:var(--teal)}
.steps4 .d{font-size:15px;color:var(--ink-2)}
.steps4.cols>li{padding:14px 0 0;background:none;border:0;border-top:2px solid var(--teal);border-radius:0}
.steps4.cols .t{font:400 13px/1.4 var(--mono);color:var(--rust)}

/* Teal-Band in drei Spalten (Startseite, Agenturen) */
.band3{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr) minmax(0,1fr);gap:48px;align-items:center}
.band3>*{min-width:0}
.band3 .col-a>*+*,.band3 .col-b>*+*{margin-top:12px}
.band3 .col-b>.v-fig{margin-top:20px}
h2.big{font:400 clamp(64px,8vw,96px)/1 var(--serif);color:var(--on-teal)}
.cta-card{display:flex;flex-direction:column;gap:16px;padding:28px;background:var(--paper);border-radius:var(--r-xl);color:var(--ink)}
.cta-card .q{font:400 26px/1.25 var(--serif);color:var(--teal)}
.s-teal .cta-card p.q{color:var(--teal)}
.s-teal .cta-card .btn{background:var(--teal);border-color:var(--teal);color:var(--on-teal)}
.s-teal .cta-card .btn:hover{background:var(--teal-deep);border-color:var(--teal-deep)}

/* Faelle */
.cases{display:grid;gap:24px}
.cases.two{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}
.case{min-width:0;padding:32px;background:var(--white);border:1px solid var(--line-strong);border-radius:var(--r-xl)}
.s-white .case{background:var(--paper)}
.case>*+*{margin-top:16px}
.case h3{font-size:28px;line-height:1.2;color:var(--ink)}
.case .split{margin-top:24px;gap:40px;align-items:start}
.cases:not(.two) .case>.prose{max-width:none;columns:2 340px;column-gap:48px}
.cases:not(.two) .case>.prose>p{break-inside:avoid}
.basis{max-width:760px;border-top:1px solid var(--line)}
.basis>summary{display:flex;align-items:center;gap:8px;padding:12px 0 4px;font-size:14px;font-weight:500;color:var(--ink-2);cursor:pointer;list-style:none}
.basis>summary::-webkit-details-marker{display:none}
.basis>summary::before{content:"+";display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border:1px solid var(--ink-2);border-radius:50%;font-size:13px;line-height:1}
.basis[open]>summary::before{content:"\2212"}
.basis>summary:hover{color:var(--teal)}
.basis>p{margin-top:6px;font-size:14px}

/* Preise kurz, Report-Zeile, Planbox */
.pricebar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px 24px;padding-top:24px;border-top:1px solid var(--line-strong)}
.pricebar .pb-txt{max-width:720px}
.pricebar .pb-txt>*+*{margin-top:6px}
.pricebar h3{font:600 17px/1.4 var(--sans);color:var(--ink)}
.plan-box{max-width:none}
.plan-box h2{font:400 44px/1.1 var(--serif)}

/* Personen */
.people{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:24px}
.person{display:flex;flex-direction:column;gap:2px}
.person .name{font-weight:600;color:var(--ink)}
.person .role{font-size:15px}
.person .lines{display:flex;flex-direction:column;gap:2px;margin-top:8px;font-size:15px}

/* Abschluss */
.close-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:32px}
.close-row .close-txt{max-width:640px}
.close-row .close-txt>*+*{margin-top:12px}
.close-row h2{font-size:clamp(30px,3.8vw,46px);line-height:1.12}
main>section.closing:first-child{margin-top:0}

/* Readiness-Check: Stufen, Formular-Platzhalter */
.stufen{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:24px 40px}
.stufen>div>*+*{margin-top:8px}
.stufen h3{font-size:22px;line-height:1.25}
.form-placeholder{max-width:560px;display:grid;gap:14px;padding:24px;background:var(--white);border:1px dashed var(--ink-2);border-radius:var(--r-l)}
.form-placeholder .vp-id{font:500 13px/1.2 var(--mono);color:var(--rust)}
.form-placeholder label{display:grid;gap:6px;font-size:15px;color:var(--ink)}
.form-placeholder input{font:inherit;min-height:44px;padding:10px 12px;border:1px solid var(--line-chip);border-radius:var(--r-s);background:var(--paper)}
.form-placeholder .btn[disabled]{opacity:.6;cursor:not-allowed}
.price-h{font:400 40px/1.1 var(--serif);color:var(--ink)}

/* Fachleute */
.fach>*+*{margin-top:10px}
.fach h3{font-size:24px}
.fach .pts{font-size:15px}

/* FAQ */
.faq{max-width:900px;border-bottom:1px solid var(--line)}
.faq details{border-top:1px solid var(--line)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:20px 0;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:0 0 auto;font:400 26px/1 var(--sans);color:var(--teal)}
.faq details[open] summary::after{content:"\2212"}
.faq summary h3{font-size:22px;line-height:1.3}
.faq details>p{max-width:760px;padding-bottom:16px}
.faq details>p+p{margin-top:-4px;padding-bottom:20px}

/* Plattform-Module, Karten fuer Wege, Studie, Artikel-Links */
.label.plain{letter-spacing:0;text-transform:none}
.s-mod h2{font-size:clamp(28px,3vw,34px);line-height:1.15}
.card h2{font-size:26px;line-height:1.2}
.flow>.grid2+.grid2,.flow>.grid3+.grid3{margin-top:24px}
.flow>:is(.study,.post-links,.ov){margin-top:40px}
.ov .overview{margin-top:14px}
.card.pro{border:2px solid var(--teal);padding:31px}
.card.path>p:not(.kicker):not(.note-sm){flex:1}
.card.path .note-sm{font-size:17px;font-weight:600;color:var(--ink)}
.card.path.teal .note-sm{color:var(--on-teal)}
.card.path h3{font-size:30px}
.study{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center;padding:36px;border-radius:var(--r-xl);background:var(--teal);color:var(--on-teal)}
.study .kicker{letter-spacing:2px;text-transform:uppercase;color:var(--rose)}
.study h3{font-size:clamp(26px,3vw,34px);line-height:1.15;color:var(--on-teal)}
.study p:not(:where(.v-fig *)){color:var(--on-teal-2)}
.study .btn{background:var(--paper);border-color:var(--paper);color:var(--teal)}
.study .btn:hover{background:var(--white);border-color:var(--white);color:var(--teal-deep)}
.study .vis{min-width:0}
.post-links{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:24px}
.post-links>li{padding:24px;background:var(--paper);border:1px solid var(--line-strong);border-radius:var(--r-l)}
.post-links a{font:400 22px/1.25 var(--serif);color:var(--ink);text-decoration:none}
.post-links a:hover{color:var(--teal);text-decoration:underline}
.split.v22{grid-template-columns:minmax(0,1fr) minmax(0,640px)}
.fach{padding:28px;background:var(--paper);border:1px solid var(--line-strong);border-radius:var(--r-xl)}

/* ---------- Tabellen ---------- */
.tscroll{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;background:var(--white);border:1px solid var(--line-strong);border-radius:var(--r-l)}
.s-white .tscroll{background:var(--paper)}
table{border-collapse:collapse}
.matrix{width:100%;font-size:15px;line-height:1.45}
.matrix thead th{padding:14px 16px;background:var(--surface-2);font-weight:600;text-align:left;vertical-align:bottom;color:var(--ink)}
.s-white .matrix thead th{background:var(--sand)}
.matrix tbody th,.matrix td{padding:12px 16px;border-top:1px solid var(--line-soft);text-align:left;vertical-align:top}
.matrix tbody th{font-weight:500;color:var(--ink)}
.matrix td{color:var(--ink-2)}
.matrix td .btn{width:100%;padding:10px 12px;font-size:15px}
.matrix.roles{min-width:680px}
.matrix.compare3{min-width:600px}
.matrix.cadence{min-width:440px}
.matrix.plans3{table-layout:fixed}
.matrix.plans3 thead th{font:500 22px/1.2 var(--serif);color:var(--teal)}
.matrix.plans3 thead th:first-child{width:28%;font:600 15px/1.45 var(--sans);color:var(--ink)}
.matrix.plans3 :is(th,td){overflow-wrap:break-word;hyphens:auto}
.matrix.plans3 tbody th{position:sticky;left:0;z-index:1;background:var(--white)}
.s-white .matrix.plans3 tbody th{background:var(--paper)}
.matrix.plans3 tbody th:is(:hover,:focus-within){z-index:5}
.matrix tr.plan-cta td{border-top:1px solid var(--line-strong)}
/* H-Fix: bis 760 px ein Block je Plan (Entscheid K1), Info-Text klein unter der Zeile */
.plan-blocks{display:none}
.plan-block{padding:24px;background:var(--white);border:1px solid var(--line-strong);border-radius:var(--r-l)}
.s-white .plan-block{background:var(--paper)}
.plan-block+.plan-block{margin-top:16px}
.plan-block h3{font-size:26px}
.plan-block dl{margin:12px 0 0}
.plan-block dl>div{padding:10px 0;border-bottom:1px solid var(--line-soft)}
.plan-block dt{font:400 12px/1.4 var(--mono);color:var(--rust)}
.plan-block dd{margin:2px 0 0;font-size:16px;color:var(--ink);overflow-wrap:break-word}
.plan-block dd.plan-info{margin-top:4px;font-size:13px;line-height:1.45;color:var(--ink-3)}
.plan-block dd.plan-info strong{color:var(--ink-2)}
.plan-block .cta-row{margin-top:16px}

/* Info-Buttons mit Tooltip: Hover und Tastaturfokus per CSS; aions-tip.js ergaenzt Klick/Antippen und Escape.
   Der Tooltip richtet sich an der (klebenden) Zeilenkopf-Zelle aus. */
.tip{position:static;display:inline-block;margin-left:6px;vertical-align:-1px}
.tip-btn{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:1px solid var(--teal);border-radius:50%;background:var(--white);color:var(--teal);font:600 13px/1 var(--sans);cursor:help}
.tip-btn:hover{background:var(--teal);color:var(--on-teal)}
.tip-box{position:absolute;left:12px;top:calc(100% - 4px);z-index:40;width:min(290px,72vw);padding:10px 12px;border-radius:var(--r-s);background:var(--ink);color:var(--paper);box-shadow:var(--shadow-tip);font:400 14px/1.45 var(--sans);text-align:left;white-space:normal;visibility:hidden;opacity:0;transition:opacity .12s}
.tip-box strong{color:var(--paper)}
.tip:hover .tip-box,.tip:focus-within .tip-box,.tip.open .tip-box{visibility:visible;opacity:1}
.tip.dismissed .tip-box,.tip.dismissed:hover .tip-box,.tip.dismissed:focus-within .tip-box{visibility:hidden;opacity:0}
.tip-hint{font-size:14px}

/* ---------- Bestandsseiten: Insights-Uebersicht ---------- */
.posts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:24px}
.posts article{min-width:0;display:flex;flex-direction:column;gap:10px;padding:28px;background:var(--paper);border:1px solid var(--line-strong);border-radius:var(--r-l)}
.posts .feat{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:16px 48px;padding:36px;background:var(--teal);border-color:var(--teal)}
.posts .feat>div{display:flex;flex-direction:column;gap:10px}
.posts .cat{font:400 12px/1.4 var(--mono);letter-spacing:2px;text-transform:uppercase;color:var(--rust)}
.posts .date{font:400 13px/1.4 var(--mono);color:var(--ink-2)}
.posts h2{font-size:24px;line-height:1.25}
.posts .ex{font-size:16px}
.posts .more{margin-top:auto;padding-top:6px;font-weight:500}
.posts .feat :is(h2){font-size:clamp(26px,3vw,34px);line-height:1.15;color:var(--on-teal)}
.posts .feat .cat{color:var(--rose)}
.posts .feat :is(.date,.ex,.side){color:var(--on-teal-2)}
.posts .feat .side{align-self:end;padding-top:14px;border-top:1px solid rgba(247,246,239,.25);font:400 14px/1.6 var(--mono)}
.posts .feat a{color:var(--on-teal)}
.rnote{max-width:760px;font:400 14px/1.6 var(--mono)}

/* ---------- Bestandsseiten: Artikel und Rechtliches (schlicht, Typografie und Breite) ---------- */
main>.art{padding:56px 0 88px}
.art .wrap,.legal-page .wrap{max-width:calc(820px + 2 * var(--gutter))}
.art .back{font:400 14px/1.4 var(--mono);color:var(--ink-2);text-decoration:none}
.art .back:hover{color:var(--teal);text-decoration:underline}
.art .cat,.art .label{margin-top:28px;font:400 13px/1.4 var(--mono);letter-spacing:3px;text-transform:uppercase;color:var(--rust)}
.art .label{margin-top:0}
.art h1{margin-top:16px;font-size:clamp(34px,4.4vw,52px);line-height:1.1}
.art .sub{margin-top:20px;font:400 21px/1.5 var(--serif);color:var(--ink-2)}
.art .meta{margin-top:24px;padding-top:14px;border-top:1px solid var(--line);font:400 13px/1.5 var(--mono);color:var(--ink-2)}
.body{margin-top:40px}
.body h2{margin-top:48px;font-size:clamp(26px,3vw,32px);line-height:1.2}
.body h3{margin-top:32px;font:600 19px/1.4 var(--sans);color:var(--ink)}
.body p{margin-top:16px;font-size:18px;line-height:1.7;color:var(--ink)}
.body h2+p,.body h3+p{margin-top:14px}
.body ul{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.body ul li{position:relative;padding-left:22px;font-size:17px;line-height:1.6;color:var(--ink)}
.body ul li::before{content:"\203A";position:absolute;left:2px;color:var(--teal);font-weight:600}
.body .q{margin-top:20px;padding:14px 18px;background:var(--surface-2);border-radius:var(--r-s);font:400 15px/1.6 var(--mono)}
.body .lead-in{font-size:20px;color:var(--ink-2)}
.body details{margin-top:20px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.body summary{padding:12px 0;font-weight:500;color:var(--teal);cursor:pointer}
.pull{margin:48px 0 8px;padding-top:28px;border-top:2px solid var(--teal)}
.pull p{font:400 26px/1.35 var(--serif);color:var(--teal)}
.srcbox{margin-top:56px;padding-top:20px;border-top:1px solid var(--line)}
.srcbox h2{margin:0;font:400 13px/1.4 var(--mono);letter-spacing:3px;text-transform:uppercase;color:var(--rust)}
.srcbox ul{gap:8px}
.srcbox li{font:400 14px/1.55 var(--mono);color:var(--ink-2)}
.srcbox li::before{display:none}
.srcbox ul li{padding-left:0}
.defs{margin-top:20px}
.defs div{display:grid;grid-template-columns:170px minmax(0,1fr);gap:4px 20px;padding:12px 0;border-top:1px solid var(--line)}
.defs dt{font:500 13px/1.45 var(--mono);color:var(--rust)}
.defs dd{margin:0;font-size:17px;color:var(--ink)}
.gaps{width:100%;margin-top:20px;font-size:15px;line-height:1.45}
.gaps th{padding:0 12px 8px 0;border-bottom:1px solid var(--line-strong);font:600 13px/1.3 var(--sans);text-align:left;color:var(--ink-2)}
.gaps td,.gaps tbody th{padding:10px 12px 10px 0;border-bottom:1px solid var(--line);font:400 15px/1.45 var(--sans);text-align:left;vertical-align:top;color:var(--ink-2)}
.gaps tbody th{color:var(--ink);font-weight:500}
.legal{max-width:760px;display:flex;flex-direction:column;gap:32px}
.legal-page .wrap>*+*{margin-top:16px}
.legal-page .legal{margin-top:40px}
.legal-block h3{margin-bottom:8px;font-size:24px}
.legal-block p{font-size:17px;color:var(--ink)}
.legal-block p+p,.legal-block .lnk{margin-top:12px}
.legal-block .lnk{font-size:14px;line-height:1.9}
.legal-block .lnk::after{content:none}

/* ---------- Breiten ---------- */
@media (max-width:1080px){
  .nav,.hdr-end>.lang,.hdr-login{display:none}
  .menu{display:block}
}
@media (max-width:1000px){
  .split,.split.even,.split.narrow-txt,.split.v22,.hero .split,.study{grid-template-columns:minmax(0,1fr);gap:40px}
  .grid2.uneven{grid-template-columns:minmax(0,1fr)}
  .band3{grid-template-columns:minmax(0,1fr);gap:32px}
  .posts .feat{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  :root{--sec-y:64px;--sec-mod:48px}
  .plan-matrix>.tscroll{display:none}
  .plan-blocks{display:block}
  main>section.hero{padding:48px 0 64px}
  main>section.page-hero{padding:48px 0 40px}
  .card,.case,.fach{padding:24px}
  .card.pro{padding:23px}
  .posts .feat,.study{padding:24px}
  .card h3,.case h3{font-size:24px}
  .lead{font-size:18px}
  .page-lead{font-size:18px}
  .price-n{font-size:38px}
  .defs div{grid-template-columns:minmax(0,1fr);gap:4px}
  /* Artikel-Tabellen: Zeilenbloecke mit Spaltennamen vor dem Wert */
  .gaps,.gaps tbody,.gaps tr,.gaps tbody th,.gaps td{display:block;width:auto}
  .gaps thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%)}
  .gaps tr{padding:12px 0;border-bottom:1px solid var(--line)}
  .gaps tbody th,.gaps td{padding:2px 0;border:0}
  .gaps td::before{content:attr(data-col);display:block;font:600 12px/1.4 var(--sans);color:var(--rust)}
}
@media (max-width:600px){
  :root{--gutter:16px}
  .card,.case,.fach{padding:20px}
  .card.pro{padding:19px}
  .hdr{gap:10px;min-height:64px}
  .hdr-end{gap:10px}
  .mark{font-size:18px;letter-spacing:4px}
  .btn-sm{padding:10px 12px;font-size:14px}
  .lbl-full{display:none}
  .lbl-short{display:inline}
  .btn{padding:13px 18px;font-size:16px}
  .cta-row>.btn{flex:1 1 auto}
  h3{font-size:22px}
  .faq summary h3{font-size:20px}
  .body p{font-size:17px}
  .tip-box{font-size:13px}
}
@media (prefers-reduced-motion:reduce){.tip-box{transition:none}}

/* Aions · Visual-Bausteine V1 bis V21 · Runde V
   Gestaltung nach mockup/ (startseite, leistungen, partner, agenturen).
   Alle Klassen mit Praefix .v-, alle Farben als Variablen. Keine Bilder, keine Skripte, keine Animation.
   Schriften: Spectral, IBM Plex Sans, IBM Plex Mono muessen von aions.css lokal geladen werden (Runde H).
   Breite: Jeder Baustein reagiert auf die Breite seines <figure> (Container-Query). Unter 560 px
   stapeln sich ueberlappende Karten; breite Tabellen scrollen in .v-scroll. Fallback per Media-Query
   fuer Browser ohne Container-Queries am Ende der Datei. */

:root {
  --v-paper: var(--paper);
  --v-teal: var(--teal);
  --v-teal-deep: var(--teal-deep);
  --v-teal-mid: var(--teal-mid);
  --v-card: var(--sand);
  --v-rust: var(--rust);
  --v-surface: var(--white);
  --v-surface-2: var(--surface-2);
  --v-teal-tint: var(--teal-tint);
  --v-ink: var(--ink);
  --v-ink-2: var(--ink-2);
  --v-ink-3: var(--ink-3);
  --v-ink-4: #8C9592;
  --v-on-teal: var(--on-teal);
  --v-on-teal-2: var(--on-teal-2);
  --v-on-teal-3: var(--on-teal-3);
  --v-rose: var(--rose);
  --v-line: rgba(20, 84, 76, 0.12);
  --v-line-soft: rgba(20, 84, 76, 0.08);
  --v-line-strong: rgba(20, 84, 76, 0.16);
  --v-line-chip: rgba(20, 84, 76, 0.30);
  --v-band: rgba(20, 84, 76, 0.14);
  --v-band-grey: rgba(74, 85, 82, 0.25);
  --v-band-teal: rgba(20, 84, 76, 0.25);
  --v-on-teal-track: rgba(247, 246, 239, 0.18);
  --v-shadow-panel: 0 24px 60px rgba(20, 84, 76, 0.16);
  --v-shadow-card: 0 18px 44px rgba(20, 84, 76, 0.22);
  --v-serif: var(--serif);
  --v-sans: var(--sans);
  --v-mono: var(--mono);
}

/* ---------- Grundgeruest ---------- */

.v-fig {
  container: v / inline-size;
  margin: 0;
  max-width: 100%;
  font-family: var(--v-sans);
  font-size: 13px;
  line-height: 1.45;
  color: var(--v-ink);
  text-align: left;
}
.v-fig *, .v-fig *::before, .v-fig *::after { box-sizing: border-box; }
.v-fig p, .v-fig ul, .v-fig ol, .v-fig dl, .v-fig dd, .v-fig h3, .v-fig h4 { margin: 0; }
.v-fig ul, .v-fig ol { padding: 0; list-style: none; }

.v-fig--s { max-width: 560px; }
.v-fig--m { max-width: 680px; }
.v-fig--l { max-width: 760px; }
.v-fig--full { max-width: 1200px; }

.v-body { display: flex; flex-direction: column; gap: 10px; }

.v-label {
  display: block;
  margin-top: 8px;
  font-family: var(--v-mono);
  font-size: 11px;
  line-height: 1.4;
  color: var(--v-ink-2);
  text-align: right;
}
.v-label--onteal { color: var(--v-on-teal-3); }

.v-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Text ---------- */

.v-title { font-weight: 600; font-size: 13px; color: var(--v-ink); }
.v-title--l { font-size: 14px; }
.v-meta { color: var(--v-ink-2); }
.v-small { font-size: 11px; color: var(--v-ink-3); }
.v-note { font-size: 12px; color: var(--v-ink-2); }
.v-mono { font-family: var(--v-mono); }
.v-kicker { font-family: var(--v-mono); font-size: 11px; color: var(--v-ink-2); }
.v-kicker--rust { color: var(--v-rust); font-size: 12px; }
.v-strong { font-weight: 600; }
.v-num { font-family: var(--v-serif); color: var(--v-teal); line-height: 1.1; font-weight: 400; }
.v-num--22 { font-size: 22px; margin-right: 6px; }
.v-ok { color: var(--v-teal); }
.v-ok-strong { color: var(--v-teal); font-weight: 600; }
.v-bad { color: var(--v-rust); font-weight: 600; }
.v-muted { color: var(--v-ink-2); }
.v-nowrap { white-space: nowrap; }

/* ---------- Flaechen ---------- */

.v-panel {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  background: var(--v-surface);
  border: 1px solid var(--v-line);
  border-radius: 14px;
  box-shadow: var(--v-shadow-panel);
}
.v-panel--flat { box-shadow: none; }
.v-panel--pad { padding-bottom: 40px; }
.v-panel--doc { border-radius: 6px; padding: 32px; gap: 18px; }
.v-panel--onteal { box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18); }

.v-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px 12px;
}

.v-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  font-size: 12px;
  line-height: 1.45;
  background: var(--v-surface);
  border: 1px solid var(--v-line-strong);
  border-radius: 12px;
  box-shadow: var(--v-shadow-card);
}
.v-card__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.v-card__title { font-weight: 600; font-size: 14px; line-height: 1.35; color: var(--v-ink); }
.v-card__text { color: var(--v-ink-2); }
.v-card dl { display: flex; flex-direction: column; gap: 4px; }
.v-card dt { display: inline; font-weight: 600; color: var(--v-ink); }
.v-card dd { display: inline; color: var(--v-ink); }
.v-card .v-row { display: block; }

.v-box {
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--v-surface-2);
  color: var(--v-ink-2);
}
.v-box--teal { background: var(--v-teal); color: var(--v-on-teal); }

/* ---------- Kennzahlen ---------- */

.v-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.v-kpi { min-width: 0; padding: 10px; border: 1px solid var(--v-line); border-radius: 8px; }
.v-kpi__label { color: var(--v-ink-2); }
.v-kpi__value { font-family: var(--v-serif); font-size: 26px; line-height: 1.1; color: var(--v-teal); }
.v-kpi__sub { font-size: 11px; color: var(--v-ink-3); }
.v-kpi__prev { font-size: 11px; color: var(--v-ink-2); }
.v-facts { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11px; color: var(--v-ink-2); }
.v-facts b { font-weight: 600; color: var(--v-ink); }

/* ---------- Marken: Tag, Chip ---------- */

.v-tag {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 4px;
  font-size: 11px;
  line-height: 1.5;
  white-space: nowrap;
  vertical-align: baseline;
}
.v-tag--high { background: var(--v-rust); color: var(--v-surface); }
.v-tag--open { border: 1px solid var(--v-teal); color: var(--v-teal); padding: 0 7px; }
.v-tag--mid { border: 1px solid var(--v-ink-2); color: var(--v-ink-2); padding: 0 7px; }
.v-tag--prep { border: 1px dashed var(--v-ink-2); color: var(--v-ink-2); padding: 0 7px; }
.v-tag--sand { background: var(--v-card); color: var(--v-ink); font-size: 12px; padding: 1px 6px; }
.v-tag--plain { color: var(--v-ink-2); padding: 0; font-size: 12px; }

.v-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.v-chip {
  display: inline-block;
  padding: 1px 10px;
  border: 1px solid var(--v-line-chip);
  border-radius: 20px;
  white-space: nowrap;
  color: var(--v-ink);
}
.v-chip--on { background: var(--v-teal); border-color: var(--v-teal); color: var(--v-on-teal); }
.v-chip--meta { border-color: rgba(20, 84, 76, 0.2); color: var(--v-ink-2); padding: 2px 9px; }

/* Auswahlfeld als Vorschau (Kategorie, Systeme); zeigt eine Auswahl, ist kein Formular */
.v-selects { display: flex; flex-wrap: wrap; gap: 6px; }
.v-select {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 3px 8px 3px 10px; border: 1px solid var(--v-line-chip); border-radius: 6px;
  background: var(--v-surface); color: var(--v-ink); white-space: nowrap;
}
.v-select__caret { color: var(--v-teal); font-size: 10px; }

/* Werte je System unter der zusammengefassten Kennzahl (V1) */
.v-sysrow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.v-sys {
  min-width: 0; display: flex; flex-direction: column; gap: 1px;
  padding: 6px 8px; border-radius: 6px; background: var(--v-surface-2);
}
.v-sys__name { font-size: 11px; color: var(--v-ink-2); }

/* ---------- Balken (inline SVG, aria-hidden) ---------- */

.v-bar { display: block; width: 100%; height: 6px; border-radius: 3px; overflow: hidden; }
.v-bar--8 { height: 8px; border-radius: 4px; }
.v-bar--10 { height: 10px; border-radius: 5px; }
.v-bar--12 { height: 12px; border-radius: 6px; }
.v-track { fill: var(--v-card); }
.v-fill { fill: var(--v-teal); }
.v-fill--rust { fill: var(--v-rust); }
.v-fill--rose { fill: var(--v-rose); }
.v-fill--paper { fill: var(--v-on-teal); }
.v-track--onteal { fill: var(--v-on-teal-track); }
.v-fill--ghost { fill: none; stroke: var(--v-teal); stroke-opacity: 0.45; stroke-dasharray: 3 3; }

.v-ci { display: block; width: 100%; height: auto; }
.v-ci-wrap { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.v-ci-wrap > .v-ci[preserveAspectRatio] { height: 12px; }
.v-ci__tickbar { fill: var(--v-ink); }
.v-ci__axis { fill: var(--v-card); }
.v-ci__band--grey { fill: var(--v-band-grey); }
.v-ci__band--teal { fill: var(--v-band-teal); }
.v-ci__band--rust { fill: var(--v-rust); fill-opacity: 0.55; }
.v-ci__band--rust2 { fill: var(--v-rust); fill-opacity: 0.45; }
.v-ci__band--teal2 { fill: var(--v-teal); fill-opacity: 0.55; }
.v-ci__band--solid { fill: var(--v-teal); }
.v-ci__dot--grey { fill: var(--v-ink-2); }
.v-ci__dot--teal { fill: var(--v-teal); }
.v-ci__tick { stroke: var(--v-ink); stroke-width: 2; }

/* Verlauf: ein Punkt je Kalenderwoche, Band und Fehlerbalken = Wilson-Intervall der Woche.
   Das SVG skaliert gleichmaessig (Breite 100 %, Hoehe folgt), damit Punkte rund bleiben. */
.v-chart { display: block; width: 100%; height: auto; }
.v-chart__band { fill: var(--v-band); }
.v-chart__line { fill: none; stroke: var(--v-teal); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.v-chart__err { stroke: var(--v-teal); stroke-width: 1.5; stroke-opacity: 0.55; vector-effect: non-scaling-stroke; }
.v-chart__dot { fill: var(--v-teal); }
.v-chart__mark { stroke: var(--v-rust); stroke-width: 1; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.v-chart__grid { stroke: var(--v-line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.v-axis { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--v-ink-2); }
.v-weeks { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; text-align: center; }
.v-week { min-width: 0; display: flex; flex-direction: column; gap: 0; font-size: 10.5px; line-height: 1.35; color: var(--v-ink-3); overflow-wrap: anywhere; }
.v-week__kw { color: var(--v-ink-2); }
.v-week .v-strong { font-size: 12px; color: var(--v-ink); }
/* Wochentabelle nur auf dem Telefon (unter 560 px), am Desktop stehen die Werte in den Spalten */
.v-weektable { display: none; width: 100%; border-collapse: collapse; font-size: 12px; line-height: 1.4; margin-top: 6px; }
.v-weektable th, .v-weektable td { padding: 4px 6px; text-align: right; font-weight: 400; white-space: nowrap; }
.v-weektable th:first-child { text-align: left; padding-left: 0; }
.v-weektable td:last-child { padding-right: 0; }
.v-weektable thead th { color: var(--v-ink-2); border-bottom: 1px solid var(--v-line); }
.v-weektable tbody tr + tr { border-top: 1px solid var(--v-line-soft); }
.v-chartbox {
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 12px; border: 1px solid var(--v-line); border-radius: 8px;
}
.v-chartbox__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 10px; color: var(--v-ink-2); }
.v-markname { color: var(--v-rust); }

/* ---------- Tabellen ---------- */

.v-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.v-scroll:focus { outline: 2px solid var(--v-rust); outline-offset: 2px; }
.v-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.v-table th, .v-table td { padding: 6px 8px; text-align: left; vertical-align: middle; font-weight: 400; }
.v-table th:first-child, .v-table td:first-child { padding-left: 0; }
.v-table th:last-child, .v-table td:last-child { padding-right: 0; }
.v-table thead th { padding-top: 0; padding-bottom: 6px; font-size: 12px; color: var(--v-ink-2); }
.v-table--lines tbody tr { border-top: 1px solid var(--v-line-soft); }
.v-table--lines thead tr { border-bottom: 1px solid var(--v-line); }
.v-table--s { font-size: 12px; }
.v-table--s thead th { font-size: 11px; }
.v-cell { display: flex; flex-direction: column; gap: 3px; }
.v-cell__sub { font-size: 11px; color: var(--v-ink-3); }
.v-table .v-col-bar { width: 34%; }
.v-table .v-right { text-align: right; }

.v-mw-460 { min-width: 460px; }
.v-mw-470 { min-width: 470px; }
.v-mw-520 { min-width: 520px; }
.v-mw-560 { min-width: 560px; }

/* ---------- Listen ---------- */

.v-list { display: flex; flex-direction: column; }
.v-list__item {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  padding: 8px 0; border-bottom: 1px solid var(--v-line-soft);
}
.v-list__item:last-child { border-bottom: 0; }
.v-list__main { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.v-list__code { font-family: var(--v-mono); font-size: 11px; color: var(--v-ink-2); overflow-wrap: anywhere; }
.v-list__side { white-space: nowrap; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }

/* ---------- Buehne mit ueberlappenden Karten (V1, V17, V19) ---------- */

/* Die Hauptflaeche steht im Fluss, die Karten haengen unten ueber und decken nur deren leeren Rand ab. */
.v-stage { position: relative; padding: 48px 28px 100px 64px; }
.v-stage--560 { padding: 40px 28px 100px 72px; }
.v-stage__bg { position: absolute; inset: 0 0 0 40px; background: var(--v-card); border-radius: 24px; }
.v-stage__shape {
  position: absolute; right: 0; top: 0; width: 46%; height: 58%;
  background: var(--v-teal); border-radius: 0 24px 0 160px; opacity: 0.92;
}
.v-stage__shape--short { height: 52%; }
.v-stage__shape--bl { left: 40px; right: auto; top: auto; bottom: 0; width: 44%; height: 46%; border-radius: 0 160px 0 24px; }
.v-stage > .v-panel { position: relative; z-index: 1; }
.v-stage > .v-card { position: absolute; z-index: 2; }

/* Ueberlappung Tabelle + Karte (V3, V9, V10): Karte ragt 28 px in den unteren Rand der Tabelle */
.v-overlap { position: relative; display: flex; flex-direction: column; }
.v-overlap > .v-panel { padding-bottom: 46px; }
.v-overlap > .v-card { position: relative; z-index: 2; margin-top: -28px; width: 310px; }
.v-overlap--left > .v-card { margin-left: 24px; width: 290px; }
.v-overlap--right > .v-panel { margin-right: 48px; }
.v-overlap--right > .v-card { align-self: flex-end; }

/* ---------- App-Navigation (V1 bis Runde V, derzeit in keinem Baustein verwendet) ---------- */

.v-app__nav {
  width: 118px; flex-shrink: 0; display: flex; flex-direction: column; gap: 9px;
  padding: 16px 12px; background: var(--v-surface-2); border-right: 1px solid rgba(20, 84, 76, 0.10); color: var(--v-ink-2);
}
.v-app__brand { font-family: var(--v-mono); letter-spacing: 3px; font-weight: 500; color: var(--v-teal); padding-bottom: 8px; }
.v-app__nav span { padding: 0 8px; }
.v-app__nav .v-app__on { background: var(--v-teal); color: var(--v-on-teal); border-radius: 5px; padding: 4px 8px; }
.v-app__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; }
.v-fig--v1 .v-dash { font-size: 13px; }
.v-fig--v1 .v-dash__row--2 { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }

/* ---------- V2 Kette, V8 Phasen, V21 Ablauf ---------- */

.v-chain {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 32px minmax(0, 1fr) 32px minmax(0, 1fr) 32px minmax(0, 1fr);
  row-gap: 14px;
}
.v-step {
  display: flex; flex-direction: column; gap: 8px; padding: 20px;
  background: var(--v-paper); border: 1px solid var(--v-line-strong); border-radius: 12px;
}
.v-step--focus { border: 2px solid var(--v-teal); padding: 19px; }
.v-step--teal { background: var(--v-teal); border-color: var(--v-teal); color: var(--v-on-teal); }
.v-step--surface { background: var(--v-surface); }
.v-step--sand { background: var(--v-card); border-color: var(--v-card); }
.v-step__no { font-family: var(--v-mono); font-size: 13px; color: var(--v-rust); }
.v-step--teal .v-step__no { color: var(--v-rose); }
.v-step__name { font-family: var(--v-serif); font-size: 26px; line-height: 1.15; color: var(--v-teal); }
.v-step--teal .v-step__name { color: var(--v-on-teal); }
.v-step__text { font-size: 15px; line-height: 1.5; color: var(--v-ink-2); }
.v-step--teal .v-step__text { color: var(--v-on-teal-2); }
.v-step__who { margin-top: auto; padding-top: 8px; border-top: 1px solid var(--v-line); font-size: 13px; color: var(--v-ink); }
.v-step--teal .v-step__who { border-top-color: rgba(247, 246, 239, 0.25); color: var(--v-on-teal); }
.v-chev { display: flex; align-items: center; justify-content: center; color: var(--v-teal); font-size: 24px; }
.v-span-all { grid-column: 1 / -1; }
.v-band {
  padding: 11px 16px; border-radius: 8px; text-align: center; font-size: 15px; font-weight: 500;
  background: var(--v-teal); color: var(--v-on-teal);
}
.v-band--sand { background: var(--v-card); color: var(--v-ink); font-weight: 400; font-size: 14px; padding: 9px 14px; }
.v-col-1 { grid-column: 1; grid-row: 2; }
.v-col-7 { grid-column: 7; grid-row: 2; }

.v-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1.2fr) 28px minmax(0, 1.6fr) 28px minmax(0, 1fr);
  align-items: stretch;
}
.v-flow__box {
  display: flex; flex-direction: column; gap: 10px; padding: 20px;
  background: var(--v-surface); border: 1px solid var(--v-line-strong); border-radius: 14px;
}
.v-flow__box--teal { background: var(--v-teal); border-color: var(--v-teal); color: var(--v-on-teal); }
.v-flow__box--sand { background: var(--v-card); border-color: var(--v-card); }
.v-flow__no { font-family: var(--v-mono); font-size: 12px; color: var(--v-rust); }
.v-flow__box--teal .v-flow__no { color: var(--v-rose); }
.v-flow__quote { font-family: var(--v-serif); font-size: 20px; line-height: 1.3; }
.v-flow__box--sand .v-flow__quote { color: var(--v-teal); }
.v-flow__query { padding: 6px 10px; border-radius: 6px; background: var(--v-card); font-size: 14px; }
.v-flow__text { font-size: 14px; color: var(--v-ink-2); }
.v-engine { display: inline-block; padding: 3px 8px; border-radius: 6px; white-space: nowrap; }
.v-engine--google { background: var(--v-teal); color: var(--v-on-teal); }
.v-engine--bing { background: var(--v-teal-mid); color: var(--v-on-teal); }
.v-engine--brave { background: var(--v-rust); color: var(--v-surface); }
.v-engine--own { background: var(--v-card); color: var(--v-ink); }
.v-flow__foot { margin-top: 12px; text-align: left; }
.v-table--flow { font-size: 14px; }
.v-table--flow td, .v-table--flow th { padding: 3px 4px; }

/* ---------- V5, V14 Intervalle ---------- */

.v-cigrid { display: grid; grid-template-columns: minmax(110px, 0.9fr) minmax(0, 3fr); gap: 18px 16px; align-items: center; }
.v-cigrid--3 { grid-template-columns: minmax(0, 1.3fr) minmax(0, 3fr) minmax(0, 0.9fr); gap: 12px; font-size: 14px; }
.v-compare { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 20px; }
.v-compare__val { font-family: var(--v-serif); font-size: 28px; line-height: 1.1; color: var(--v-ink-2); }
.v-compare__val--new { color: var(--v-teal); }
.v-compare__arrow { color: var(--v-teal); font-size: 20px; }
.v-period { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.v-period__item { padding: 10px; border: 1px solid var(--v-line); border-radius: 8px; display: flex; flex-direction: column; gap: 2px; }
.v-period__value { font-family: var(--v-serif); font-size: 24px; line-height: 1.1; color: var(--v-ink-2); }
.v-period__value--new { color: var(--v-teal); }

/* ---------- V6 zwei Spalten ---------- */

.v-split { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; }
.v-split__col { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.v-split__col + .v-split__col { padding-left: 18px; border-left: 1px solid var(--v-line); }
.v-you { font-weight: 600; }

/* ---------- V7 Kundenbericht ---------- */

.v-doc__head {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px;
  padding-bottom: 14px; border-bottom: 1px solid var(--v-line);
}
.v-logo { display: inline-block; padding: 6px 14px; border: 1px dashed var(--v-ink-2); border-radius: 4px; color: var(--v-ink-2); }
.v-logo--s { padding: 2px 8px; }
.v-doc__foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  padding-top: 12px; border-top: 1px solid var(--v-line);
  font-family: var(--v-mono); font-size: 11px; color: var(--v-ink-2);
}
.v-fig--v7 .v-kpi { padding: 12px; }

/* ---------- V22 Anforderungskatalog ---------- */

.v-roles { display: flex; flex-direction: column; gap: 6px; margin: 0; }
/* Rolle als Satz: Rollenname fett, danach der Text in derselben Zeile */
.v-role { display: block; }
.v-role dt { display: inline; font-weight: 600; color: var(--v-teal); }
.v-role dt::after { content: " "; }
.v-role dd { display: inline; margin: 0; color: var(--v-ink-2); }
.v-table--blocks th, .v-table--blocks td { vertical-align: top; }
.v-table--blocks tbody th { padding-top: 8px; }

/* ---------- V15 Aions-Studie 2026 (Runde T: Werte statt Platzhalter), V16 Aufhaenger ---------- */

.v-ph { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 2fr) auto; gap: 12px; align-items: center; }
.v-ph__state { font-size: 11px; color: var(--v-ink-2); white-space: nowrap; }
.v-ph__val { font: 600 13px/1 var(--v-mono); color: var(--v-ink); white-space: nowrap; text-align: right; }

.v-hook {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr);
  gap: 40px;
  align-items: center;
  padding: 36px;
  border-radius: 16px;
  background: var(--v-teal);
  color: var(--v-on-teal);
}
.v-hook--bars { grid-template-columns: minmax(0, 1fr); padding: 28px; }
.v-hook__title { font-size: 14px; color: var(--v-on-teal-2); }
.v-hook__src { font-size: 12px; color: var(--v-on-teal-3); }
/* Runde L: Quelle FHNW als Textlink (neuer Tab), Farbe wie der Quellentext */
.v-hook__src a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.v-hook__src a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.v-hook__col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.v-hook__bars { display: flex; flex-direction: column; gap: 12px; font-size: 14px; }
.v-hook__row { display: flex; justify-content: space-between; gap: 12px; color: var(--v-on-teal-2); }
.v-hook__row b { color: var(--v-on-teal); font-weight: 600; }

/* ---------- V18 E-Mail ---------- */

.v-mail__meta { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; font-size: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--v-line); }
.v-mail__meta dt { color: var(--v-ink-2); }
.v-mail__meta dd { margin: 0; color: var(--v-ink); overflow-wrap: anywhere; }
.v-mail__body { display: flex; flex-direction: column; gap: 12px; font-size: 13px; }
.v-finding {
  display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 4px 12px;
  padding: 12px 0; border-top: 1px solid var(--v-line-soft);
}
.v-finding__no { font-family: var(--v-mono); color: var(--v-rust); font-size: 13px; }
.v-finding__main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.v-finding__title { font-weight: 600; font-size: 14px; }

/* ---------- V19 Phasen im Cockpit ---------- */

.v-phases { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.v-phase { display: flex; flex-direction: column; gap: 4px; padding: 10px; border: 1px solid rgba(20, 84, 76, 0.2); border-radius: 8px; min-width: 0; }
.v-phase--done { background: var(--v-teal); border-color: var(--v-teal); color: var(--v-on-teal); }
.v-phase--now { border: 2px solid var(--v-teal); padding: 9px; }
.v-phase__no { font-family: var(--v-mono); font-size: 11px; color: var(--v-rust); }
.v-phase--done .v-phase__no { color: var(--v-rose); }
.v-phase__name { font-weight: 600; }
.v-phase__state { color: var(--v-ink-2); }
.v-phase--done .v-phase__state { color: var(--v-on-teal-2); }
.v-phase--now .v-phase__state { color: var(--v-teal); }
.v-fig--v19 .v-panel { padding: 18px 20px 64px; font-size: 12px; line-height: 1.4; gap: 14px; }
.v-fig--v19 .v-pos-a { left: 0; bottom: 24px; width: 290px; }

/* ---------- V17 Agency-Konto ---------- */

.v-fig--v17 .v-stage { padding-top: 44px; }
.v-fig--v17 .v-panel { padding: 18px 20px 80px; font-size: 12px; line-height: 1.4; gap: 12px; }
.v-fig--v17 .v-pos-a { left: 0; bottom: 16px; width: 280px; gap: 8px; }

/* ---------- V20 Protokoll ---------- */

.v-proto { display: grid; grid-template-columns: 28px minmax(0, 2fr) minmax(0, 1.4fr); gap: 10px; align-items: center; }
.v-proto__mark { font-weight: 600; }

/* ---------- Runde V2: Dashboard V1 (vereinfacht) und V23 (detailliert) ---------- */

.v-stage--dash { padding: 40px 28px 40px 64px; }
.v-dash { gap: 14px; }
.v-dash__row { display: grid; gap: 14px; align-items: start; }
.v-dash__row--2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.v-dash__row--3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 0.9fr); }
.v-dash__row--charts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.v-dash__sec { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding-top: 10px; border-top: 1px solid var(--v-line); }

/* Karte Sichtbarkeit */
.v-vis {
  min-width: 0; display: flex; flex-direction: column; gap: 12px;
  padding: 14px 16px; border: 1px solid var(--v-line); border-radius: 10px; background: var(--v-surface);
}
.v-vis__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 10px; }
.v-vis__kicker { font-family: var(--v-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--v-teal); }
.v-vis__kicker::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: var(--v-rust); vertical-align: 1px; }
.v-vis__meta, .v-rank__meta { font-size: 12px; color: var(--v-ink-2); }
.v-vis__main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; }
.v-vis__main .v-vis__label { flex-basis: 100%; }
.v-vis__label { font-size: 12px; color: var(--v-ink-2); }
.v-vis__value { font-family: var(--v-serif); font-size: 40px; line-height: 1.05; color: var(--v-teal); }
.v-vis__sub { font-size: 12px; line-height: 1.4; color: var(--v-ink-3); }
.v-vis__grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; margin: 0;
  padding-top: 12px; border-top: 1px solid var(--v-line-soft);
}
.v-vis__item { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.v-vis__item--wide { grid-column: 1 / -1; }
.v-vis__item dt { font-size: 12px; color: var(--v-ink-2); }
.v-vis__item dd { margin: 0; display: flex; flex-direction: column; gap: 1px; }
.v-vis__num { font-weight: 600; font-size: 15px; color: var(--v-ink); }
.v-vis__cmp { display: flex; flex-direction: column; gap: 2px; padding-top: 12px; border-top: 1px solid var(--v-line-soft); }
.v-vis__pair { font-size: 14px; color: var(--v-ink); }
.v-vis__new { color: var(--v-teal); font-weight: 600; }

/* Share-of-Voice-Rangliste */
.v-rank { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.v-rank__list { display: flex; flex-direction: column; }
.v-rank__row {
  display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; column-gap: 8px; row-gap: 4px; align-items: baseline;
  padding: 6px 0; border-bottom: 1px solid var(--v-line-soft);
}
.v-rank__no { font-family: var(--v-mono); font-size: 12px; color: var(--v-ink-2); }
.v-rank__name { min-width: 0; overflow-wrap: anywhere; }
.v-rank__val { white-space: nowrap; text-align: right; }
.v-rank__n { font-size: 12px; color: var(--v-ink-3); }
.v-rank__bar { grid-column: 2 / -1; }
.v-rank__row--you { border-bottom: 0; }
.v-rank__row--you .v-rank__name, .v-rank__row--you .v-rank__no { font-weight: 600; color: var(--v-ink); }
.v-rank__gap { padding: 6px 0 6px 30px; font-size: 12px; color: var(--v-ink-2); border-bottom: 1px solid var(--v-line-soft); }

/* Mention Rate je System */
.v-sysbars { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.v-sysbars__list { display: flex; flex-direction: column; gap: 10px; }
.v-sysbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 8px; align-items: baseline; }
.v-sysbar__name { min-width: 0; }
.v-sysbar__val { white-space: nowrap; }
.v-sysbar__bar, .v-sysbar__sub { grid-column: 1 / -1; }
.v-sysbar__sub { font-size: 12px; color: var(--v-ink-3); }

/* Verlauf: Ihr Shop (Teal, Punkte, Band = Intervall) gegen 4 Wettbewerber (Grau, Strichmuster) */
.v-lc { min-width: 0; display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border: 1px solid var(--v-line); border-radius: 10px; }
.v-lc__head { display: flex; flex-direction: column; gap: 1px; }
.v-lc__sub, .v-lc__note { font-size: 12px; color: var(--v-ink-2); }
.v-lc__vals { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 12px; color: var(--v-ink-2); }
.v-lc__vals .v-strong { font-size: 15px; color: var(--v-ink); }
.v-lc__plot { position: relative; }
.v-lc__svg { display: block; width: 100%; height: auto; }
.v-lc__svg--simple { display: none; }
.v-lc__base { stroke: var(--v-line-strong); stroke-width: 1; vector-effect: non-scaling-stroke; }
.v-lc__comp { fill: none; stroke: var(--v-ink-4); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.v-lc__avg { fill: none; stroke: var(--v-ink-4); stroke-width: 2; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.v-lc__x { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); text-align: center; font-size: 12px; color: var(--v-ink-2); }
.v-lc__keys { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 12px; color: var(--v-ink-2); }
.v-lc__keys li { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.v-lc__keys--simple { display: none; }
.v-lc__key { width: 24px; height: 8px; flex-shrink: 0; }
.v-lc__k-you { stroke: var(--v-teal); stroke-width: 2.5; }
.v-lc__k-comp, .v-lc__k-avg { stroke: var(--v-ink-4); stroke-width: 1.5; }
.v-lc__k-mark { stroke: var(--v-rust); stroke-width: 1.5; }
.v-lc__keymark { color: var(--v-rust); }

/* ---------- Runde V2: V4 Anforderungskatalog ---------- */

.v-panel--cat { padding: 24px; gap: 14px; }
.v-table--cat { min-width: 680px; }
.v-table--cat td, .v-table--cat th { padding-left: 6px; padding-right: 6px; }
.v-table--cat td:nth-child(2), .v-table--cat td:nth-child(5) { width: 30%; }
.v-dots { font-size: 11px; letter-spacing: 1px; color: var(--v-teal); }

/* ---------- Runde V2: V16 Marktzahlen und Beispiel ---------- */

.v-hook--market { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 28px; }
.v-hook__blocks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.v-hook__block {
  display: flex; flex-direction: column; gap: 14px; padding: 20px;
  border: 1px solid rgba(247, 246, 239, 0.25); border-radius: 12px;
}
.v-hook__fig { display: flex; flex-direction: column; gap: 4px; }
.v-hook__big { font-family: var(--v-serif); font-weight: 400; font-size: 44px; line-height: 1; color: var(--v-on-teal); }
.v-hook__text { font-size: 15px; line-height: 1.45; color: var(--v-on-teal-2); }
.v-hook__block .v-hook__src { margin-top: auto; }
.v-hook__case { display: flex; flex-direction: column; gap: 10px; padding-top: 18px; border-top: 1px solid rgba(247, 246, 239, 0.25); }
.v-hook__badge {
  align-self: flex-start; padding: 2px 9px; border: 1px solid var(--v-rose); border-radius: 4px;
  font-family: var(--v-mono); font-size: 12px; color: var(--v-rose);
}

/* ---------- Runde V2: V21 fuenf Schritte ---------- */

.v-flow--5 {
  grid-template-columns: minmax(0, 0.9fr) 24px minmax(0, 1fr) 24px minmax(0, 1.55fr) 24px minmax(0, 1.2fr) 24px minmax(0, 0.95fr);
}
.v-flow--5 .v-flow__box { padding: 16px; }
.v-flow--5 .v-flow__quote { font-size: 18px; }
.v-flow--5 .v-table--flow { font-size: 13px; }
.v-flow__pages { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.v-flow__pages li { padding: 5px 8px; border-radius: 6px; background: var(--v-surface-2); }
.v-flow__ref { padding-top: 8px; border-top: 1px solid var(--v-line); font-size: 13px; }

/* Zwischenbreiten fuer V23 */
@container v (max-width: 999px) {
  .v-dash__row--3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .v-dash__row--3 > .v-sysbars { grid-column: 1 / -1; }
  .v-dash__row--charts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .v-flow--5 { grid-template-columns: minmax(0, 1fr); row-gap: 10px; }
  .v-flow--5 .v-chev { transform: rotate(90deg); padding: 2px 0; }
}
@container v (max-width: 759px) {
  .v-dash__row--charts { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Schmal: unter 560 px stapeln ---------- */

@container v (max-width: 559px) {
  .v-stage, .v-stage--560, .v-fig--v17 .v-stage {
    display: flex; flex-direction: column; gap: 12px;
    padding: 14px; background: var(--v-card); border-radius: 20px;
  }
  .v-stage__bg, .v-stage__shape { display: none; }
  .v-stage > .v-card,
  .v-fig--v1 .v-pos-a, .v-fig--v1 .v-pos-b,
  .v-fig--v17 .v-pos-a, .v-fig--v19 .v-pos-a {
    position: static; width: auto; inset: auto;
  }
  .v-fig--v17 .v-panel, .v-fig--v19 .v-panel { padding-bottom: 18px; }
  .v-app__nav { display: none; }
  .v-kpi__value { font-size: 22px; }

  .v-overlap { gap: 12px; }
  .v-overlap > .v-panel { padding-bottom: 18px; }
  .v-overlap > .v-card, .v-overlap--left > .v-card, .v-overlap--right > .v-card { margin: 0; width: auto; align-self: stretch; }
  .v-overlap--right > .v-panel { margin-right: 0; }

  .v-chain, .v-flow { grid-template-columns: minmax(0, 1fr); row-gap: 10px; }
  .v-chain .v-chev { display: none; }
  .v-flow .v-chev { transform: rotate(90deg); padding: 2px 0; }
  .v-col-1, .v-col-7 { grid-column: 1; grid-row: auto; }

  .v-split { grid-template-columns: minmax(0, 1fr); }
  .v-split__col + .v-split__col { padding-left: 0; border-left: 0; padding-top: 14px; border-top: 1px solid var(--v-line); }

  .v-phases, .v-sysrow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v-weeks { gap: 2px; }
  .v-week { font-size: 12px; overflow-wrap: normal; }
  .v-week .v-strong { font-size: 12px; }
  .v-week__detail { display: none; }
  .v-weektable { display: table; }
  .v-chartbox, .v-chartbox .v-weeknote { font-size: 12px; }
  /* V1 und V5 auf dem Telefon: keine Schrift unter 12 px */
  .v-fig--v1 :is(.v-kpi__sub, .v-sys__name, .v-facts, .v-cell__sub, .v-small, .v-note, .v-kicker, .v-tag, .v-chip, .v-select, .v-card),
  .v-fig--v5 :is(.v-kpi__sub, .v-cell__sub, .v-small, .v-note, .v-meta, .v-chip),
  .v-fig--v5p :is(.v-cell__sub, .v-small, .v-note, .v-meta, .v-axis),
  .v-fig--v1 > .v-label, .v-fig--v5 > .v-label, .v-fig--v5p > .v-label { font-size: 12px; }

  /* Zeilenbloecke mit Beschriftung ueber dem Wert (lange Texte, V22) */
  .v-table--stack.v-table--blocks td { display: block; text-align: left; padding: 4px 0; }
  .v-table--stack.v-table--blocks td[data-label]::before { display: block; max-width: none; margin-bottom: 1px; }
  .v-table--stack.v-table--blocks td > .v-cell { flex-direction: row; gap: 8px; align-items: baseline; }
  /* V22 auf dem Telefon: keine Schrift unter 12 px */
  .v-fig--v22 :is(.v-table, .v-table th, .v-table td, .v-cell__sub, .v-small, .v-kicker, .v-tag, .v-mono),
  .v-fig--v22 .v-table--stack td[data-label]::before,
  .v-fig--v22 > .v-label { font-size: 12px; }
  /* Runde V2: V1, V23 untereinander, Verlauf vereinfacht (Ihr Shop gegen Ø 4 Wettbewerber) */
  .v-dash__row--2, .v-dash__row--3, .v-dash__row--charts, .v-fig--v1 .v-dash__row--2 { grid-template-columns: minmax(0, 1fr); }
  .v-dash__row--3 > .v-sysbars { grid-column: auto; }
  .v-dash > .v-head { flex-direction: column; align-items: flex-start; }
  .v-vis { padding: 12px; }
  .v-vis__value { font-size: 34px; }
  .v-lc { padding: 12px; }
  .v-lc__svg--full, .v-lc__keys--full { display: none; }
  .v-lc__svg--simple { display: block; }
  .v-lc__keys--simple { display: flex; }
  .v-table--cat td:nth-child(2), .v-table--cat td:nth-child(5) { width: auto; }
  .v-hook__blocks { grid-template-columns: minmax(0, 1fr); }
  .v-hook--market { padding: 20px; }
  .v-hook__big { font-size: 38px; }
  /* V1, V4, V16, V21, V23 auf dem Telefon: keine Schrift unter 12 px */
  :is(.v-fig--v1, .v-fig--v4, .v-fig--v16, .v-fig--v21, .v-fig--v23) :is(.v-small, .v-kicker, .v-tag, .v-cell__sub, .v-note),
  .v-fig--v4 .v-table--stack td[data-label]::before, .v-fig--v4 .v-table thead th,
  :is(.v-fig--v1, .v-fig--v4, .v-fig--v16, .v-fig--v21, .v-fig--v23) > .v-label { font-size: 12px; }
  .v-hook { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 24px; }
    .v-panel--doc { padding: 20px; }
  .v-cigrid { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .v-cigrid--3 { grid-template-columns: minmax(0, 1fr) auto; grid-auto-flow: row dense; gap: 4px 12px; }
  .v-cigrid--3 > .v-ci-wrap { grid-column: 1 / -1; margin-bottom: 8px; }
  .v-ph { grid-template-columns: minmax(0, 1fr) auto; grid-auto-flow: row dense; }
  .v-ph > .v-bar { grid-column: 1 / -1; }
  .v-step__text { font-size: 14px; }

  /* Tabellen werden zu Zeilenbloecken, die Spaltennamen stehen vor jedem Wert */
  .v-table.v-table--stack { min-width: 0; }
  .v-table--stack, .v-table--stack tbody, .v-table--stack tr, .v-table--stack th, .v-table--stack td { display: block; width: auto; }
  .v-table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .v-table--stack tr { padding: 10px 0; }
  .v-table--stack tbody th { padding: 0 0 4px; font-weight: 600; }
  .v-table--stack td { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 2px 0; text-align: right; }
  .v-table--stack td[data-label]::before { content: attr(data-label); flex: 0 0 auto; max-width: 55%; color: var(--v-ink-2); font-size: 12px; text-align: left; }
  .v-table--stack td:empty { display: none; }
  .v-table--stack td.v-col-bar { display: block; width: 100%; padding: 4px 0; }
  .v-table--stack td > .v-cell { align-items: flex-end; }
  .v-table--stack td > .v-cell > .v-bar { width: 120px; }
}

@container v (max-width: 420px) {
  .v-kpis { grid-template-columns: minmax(0, 1fr); }
  .v-kpi { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; align-items: baseline; }
  .v-kpi__label { grid-column: 1; }
  .v-kpi__value { grid-column: 2; grid-row: 1 / span 2; }
  .v-kpi__sub, .v-kpi__prev { grid-column: 1; }
  .v-proto { grid-template-columns: 22px minmax(0, 1fr); }
  .v-proto > .v-proto__res { grid-column: 2; margin-top: -8px; }
}

/* Fallback ohne Container-Queries: nach Fensterbreite */
@supports not (container-type: inline-size) {
  @media (max-width: 599px) {
    .v-stage, .v-stage--560, .v-fig--v17 .v-stage { display: flex; flex-direction: column; gap: 12px; padding: 14px; background: var(--v-card); border-radius: 20px; }
    .v-stage__bg, .v-stage__shape, .v-app__nav, .v-chain .v-chev { display: none; }
    .v-stage > .v-card, .v-fig--v1 .v-pos-a, .v-fig--v1 .v-pos-b, .v-fig--v17 .v-pos-a, .v-fig--v19 .v-pos-a { position: static; width: auto; }
    .v-overlap { gap: 12px; }
    .v-overlap > .v-card, .v-overlap--left > .v-card { margin: 0; width: auto; align-self: stretch; }
    .v-overlap--right > .v-panel { margin-right: 0; }
    .v-chain, .v-flow, .v-split, .v-hook, .v-cigrid { grid-template-columns: minmax(0, 1fr); }
    .v-col-1, .v-col-7 { grid-column: 1; grid-row: auto; }
    .v-phases, .v-sysrow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .v-week { font-size: 12px; }
    .v-week__detail { display: none; }
    .v-weektable { display: table; }
  }
}

/* ---------- Runde H: Ergaenzungen zu den Visual-Bausteinen ---------- */
/* Vermerk unter einem Baustein auf Teal-Flaechen lesbar halten */
.s-teal .v-fig>.v-label,.card.teal .v-fig>.v-label,.study .v-fig>.v-label{color:var(--on-teal-3)}
/* V22 kleiner auf der Agenturen-Seite (Wer macht was) */
.split.v22>.vis>.v-fig{max-width:640px}

/* Kette (V2, V8) bei mittlerer Rahmenbreite in zwei Spalten, damit lange Stufennamen (EN) nicht ueberlaufen */
@container v (min-width: 560px) and (max-width: 899px) {
  .v-chain { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .v-chain .v-chev { display: none; }
  .v-chain .v-col-1, .v-chain .v-col-7 { grid-column: 1 / -1; grid-row: auto; }
  .v-step__name { font-size: 24px; }
}
/* Wochentabelle (V1, V5) in sehr schmalen Karten (320 px Fenster): weniger Innenabstand */
@container v (max-width: 300px) {
  .v-weektable th, .v-weektable td { padding-left: 2px; padding-right: 2px; }
}

/* Mindestschrift 12 px auf dem Telefon in allen Bausteinen (Runde V hatte das nur fuer V1, V5 und V5 Partner) */
@container v (max-width: 559px) {
  .v-fig :is(.v-label,.v-small,.v-kpi__sub,.v-kpi__prev,.v-facts,.v-tag,.v-kicker,.v-list__code,.v-sys__name,.v-axis,.v-ph__state,.v-week,.v-cell__sub,.v-doc__foot,.v-phase__no),
  .v-fig .v-table thead th { font-size: 12px; }
}
@supports not (container-type: inline-size) {
  @media (max-width: 599px) {
    .v-fig :is(.v-label,.v-small,.v-kpi__sub,.v-kpi__prev,.v-facts,.v-tag,.v-kicker,.v-list__code,.v-sys__name,.v-axis,.v-ph__state,.v-week,.v-cell__sub,.v-doc__foot,.v-phase__no),
    .v-fig .v-table thead th { font-size: 12px; }
  }
}

/* ---------- Korrektur 3 (2026-10-23) ---------- */
/* Kopfzeile bleibt beim Scrollen oben, Desktop und Telefon; Sprungziele landen unter der Kopfzeile */
header.site{position:sticky;top:0;z-index:50}
html{scroll-padding-top:92px}
/* CTA zweigeteilt: "Kontakt aufnehmen" zuerst, "Gratis Readiness-Check" mit Zeile darunter, beide gleich breit */
.cta-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px;align-items:start;max-width:540px}
.cta-pair .btn{width:100%}
.cta-check{display:flex;flex-direction:column;gap:8px;min-width:0}
.cta-sub{font-size:14px;line-height:1.4;text-align:center;color:var(--ink-3)}
.flow>.cta-pair,.txt>.cta-pair{margin-top:28px}
.hero .txt>.cta-pair{margin-top:32px}
.s-teal .cta-sub{color:var(--on-teal-3)}
.close-row>.cta-pair{flex:0 1 500px}
/* in der Fragekarte (Teal-Band) untereinander, Zweitbutton in Teal auf Papier */
.cta-card .cta-pair{grid-template-columns:minmax(0,1fr);max-width:none}
.s-teal .cta-card .btn-ghost{background:transparent;border-color:var(--teal);color:var(--teal)}
.s-teal .cta-card .btn-ghost:hover{background:rgba(20,84,76,.07);color:var(--teal-deep)}
.s-teal .cta-card .cta-sub{color:var(--ink-3)}
/* "Wo Sie verlieren": Fragekarte als eigenes Feld; ab 1001 px links unter dem Text, V16 rechts ueber beide Zeilen;
   darunter eine Spalte in DOM-Reihenfolge (Text, V16, Fragekarte) */
.split.hook>.cta-card{min-width:0}
@media (min-width:1001px){
  .split.hook{grid-template-rows:auto 1fr;row-gap:28px}
  .split.hook>.txt{grid-column:1;grid-row:1}
  .split.hook>.vis{grid-column:2;grid-row:1/span 2}
  .split.hook>.cta-card{grid-column:1;grid-row:2;align-self:start}
}
/* Startseite, Plattform-Karten: Empfehlungen mit V4 (Anforderungskatalog) breiter */
@media (min-width:1001px){.grid2.uneven.wide{grid-template-columns:minmax(0,1fr) minmax(0,2.3fr)}}
/* Grenzen der Messung: zugeklappter Block am Ende von "So arbeiten wir" */
main>section.s-limits{padding:40px 0 72px}
.limits{max-width:760px}
.limits>summary{font-size:17px;color:var(--teal)}
.limits>.pts{margin:14px 0 8px}
/* FAQ: Fragen als h2 statt h3 (Reihenfolge der Ueberschriften), gleiche Groesse wie bisher */
.faq summary h2{font-size:22px;line-height:1.3}
@media (max-width:600px){html{scroll-padding-top:80px}.faq summary h2{font-size:20px}}
@media (max-width:480px){.cta-pair{grid-template-columns:minmax(0,1fr)}}

/* ---------- Runde I (2026-10-23): Formulare, Datenschutz-Tabelle ---------- */
/* Formular als weisse Karte wie .card; Felder untereinander, Beschriftung ueber dem Feld */
.form{min-width:0;max-width:560px;display:grid;gap:18px;padding:32px;background:var(--white);border:1px solid var(--line-strong);border-radius:var(--r-xl)}
.flow>.form{margin-top:40px}
@media (min-width:1001px){.split.form-split{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.split.form-split>.vis>.form{width:100%;max-width:none}
.field{display:grid;gap:6px;min-width:0}
.field label{font-size:15px;font-weight:500;color:var(--ink)}
.field .req{color:var(--rust)}
.field :is(input,select,textarea){width:100%;min-width:0;min-height:44px;padding:10px 12px;font:400 17px/1.4 var(--sans);color:var(--ink);background:var(--paper);border:1px solid var(--line-chip);border-radius:var(--r-s)}
.field textarea{resize:vertical;min-height:120px}
.field select{appearance:none;-webkit-appearance:none;padding-right:40px;background-image:linear-gradient(45deg,transparent 50%,var(--teal) 50%),linear-gradient(135deg,var(--teal) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat}
.field :is(input,select,textarea):focus-visible{outline:2px solid var(--rust);outline-offset:1px;border-color:var(--teal)}
.field [aria-invalid="true"]{border-color:var(--rust);border-width:2px;padding:9px 11px}
.field select[aria-invalid="true"]{padding-right:39px}
.form-req{font-size:14px;color:var(--ink-3)}
.form-req span{color:var(--rust)}
.form .form-actions{margin-top:4px}
.form .btn[disabled]{opacity:.6;cursor:wait}
.form-status{font-size:16px;line-height:1.5}
.form-status:empty{display:none}
main .form-status.is-ok{padding:12px 14px;border-radius:var(--r-s);background:var(--teal-tint);color:var(--teal-deep)}
main .form-status.is-error{padding:12px 14px;border-radius:var(--r-s);background:var(--surface-2);border-left:3px solid var(--rust);color:var(--ink)}
main .form-note{font-size:14px;line-height:1.5;color:var(--ink-3)}
/* Honeypot: fuer Menschen und Screenreader unsichtbar, fuer einfache Bots ein normales Feld */
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.form{position:relative}
@media (max-width:600px){.form{padding:22px 18px}}

/* Datenschutz, Abschnitt Formulare: Tabelle Formular / Daten / Zweck; auf dem Telefon je Formular ein Block */
.body .legal-table{margin-top:20px}
.body .legal-table table{width:100%;border-collapse:collapse;font-size:16px;line-height:1.55;color:var(--ink)}
.body .legal-table :is(th,td){padding:12px 14px 12px 0;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.body .legal-table thead th{font:500 13px/1.4 var(--mono);letter-spacing:1px;text-transform:uppercase;color:var(--ink-2);border-bottom:1px solid var(--line-strong)}
.body .legal-table tbody th{font-weight:600;color:var(--ink)}
@media (max-width:700px){
  .body .legal-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%)}
  .body .legal-table :is(table,tbody,tr,th,td){display:block}
  .body .legal-table tr{padding:12px 0;border-bottom:1px solid var(--line)}
  .body .legal-table :is(th,td){padding:4px 0;border:0}
  .body .legal-table td::before{content:attr(data-col);display:block;font:500 12px/1.4 var(--mono);letter-spacing:1px;text-transform:uppercase;color:var(--ink-2)}
}

/* ---------- Runde K (2026-10-23): Vergleich Gratis-Check / Readiness-Report (vergleich.js) ---------- */
/* Tabelle mit drei Spalten ohne waagrechtes Scrollen; bis 760 px ein Block je Angebot, wie die Plan-Bloecke (Entscheid K1) */
.flow>.cmp{margin-top:40px}
.matrix.cmp2{table-layout:fixed}
.matrix.cmp2 thead th{font:500 22px/1.2 var(--serif);color:var(--teal)}
.matrix.cmp2 thead th:first-child{width:26%}
.matrix.cmp2 :is(th,td){overflow-wrap:break-word;hyphens:auto}
.cmp-blocks{display:none}
.cmp-block{padding:24px;background:var(--white);border:1px solid var(--line-strong);border-radius:var(--r-l)}
.s-white .cmp-block{background:var(--paper)}
.cmp-block+.cmp-block{margin-top:16px}
.cmp-block h3{font-size:26px}
.cmp-block dl{margin:12px 0 0}
.cmp-block dl>div{padding:10px 0;border-bottom:1px solid var(--line-soft)}
.cmp-block dl>div:last-child{border-bottom:0;padding-bottom:0}
.cmp-block dt{font:400 12px/1.4 var(--mono);color:var(--rust)}
.cmp-block dd{margin:2px 0 0;font-size:16px;color:var(--ink);overflow-wrap:break-word;hyphens:auto}
@media (max-width:760px){.cmp>.tscroll{display:none}.cmp-blocks{display:block}}

/* ---------- Runde M2 (2026-10-25): Kurzbox "Das Wichtigste in Kürze" / "At a glance" ---------- */
/* Sand #E9E3D4, Text Teal #14544C; Innenabstand und Rundung wie .card; volle Breite bis 760 px */
.kurz{width:100%;max-width:760px;padding:32px;background:var(--sand);border-radius:var(--r-xl);color:var(--teal)}
.flow>.kurz{margin-top:40px}
.art .kurz{margin-top:28px}
.kurz-titel{font:400 13px/1.4 var(--mono);letter-spacing:3px;text-transform:uppercase}
.kurz ul{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.kurz li{position:relative;padding-left:22px;font-size:17px;line-height:1.5}
.kurz li::before{content:"\203A";position:absolute;left:2px;top:0;font-weight:600}
main .kurz :is(.kurz-titel,li){color:var(--teal)}
@media (max-width:760px){.kurz{padding:24px}}
@media (max-width:600px){.kurz{padding:20px}.kurz li{font-size:16px}}

/* ---------- Runde T (2026-11-02): Studienartikel, Studie auf der Startseite ---------- */
/* Untertitel unter dem H1: ruhig in der Schrift der Datumszeile, ohne deren Linie; kein zweiter Lead */
.art .untertitel{margin-top:16px;font:400 15px/1.55 var(--mono);color:var(--ink-2)}
/* nummerierte Liste im Artikel ("Was daraus folgt"), Nummer in Mono und Teal wie die Pfeile der ul */
.body ol{list-style:none;counter-reset:n;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.body ol li{counter-increment:n;position:relative;padding-left:30px;font-size:17px;line-height:1.6;color:var(--ink)}
.body ol li::before{content:counter(n) ".";position:absolute;left:0;font:500 15px/1.75 var(--mono);color:var(--teal)}
/* Fussnote "Zur Messung" als Box: helle Flaeche wie .body .q, Titel wie .srcbox h2, Absaetze kleiner als der Fliesstext */
.srcbox--mess{padding:28px 32px;background:var(--surface-2);border-top:0;border-radius:var(--r-l)}
.srcbox p{margin-top:12px;font:400 15px/1.6 var(--sans);color:var(--ink-2)}
.srcbox h2+p{margin-top:14px}
/* Tabellen im Artikel: lange Woerter brechen statt ueberlaufen */
.art .gaps :is(th,td){overflow-wrap:break-word}
/* nur Prozentwerte (Beispieltabelle): Zahlen rechtsbuendig, bleibt auch auf dem Telefon eine Tabelle */
.gaps.gaps-num td{text-align:right;white-space:nowrap}
.gaps.gaps-num thead th:not(:first-child){text-align:right}
@media (max-width:760px){
  .gaps.gaps-num{display:table;width:100%}
  .gaps.gaps-num tbody{display:table-row-group}
  .gaps.gaps-num thead{position:static;width:auto;height:auto;overflow:visible;clip:auto;clip-path:none;display:table-header-group}
  .gaps.gaps-num tr{display:table-row;padding:0}
  .gaps.gaps-num :is(th,td){display:table-cell;padding:8px 8px 8px 0;border-bottom:1px solid var(--line)}
  .gaps.gaps-num td::before{content:none}
}
@media (max-width:600px){.srcbox--mess{padding:20px}}
/* Startseite S8: zweiter Button (Anmeldung) auf Teal als sekundaer, .study .btn faerbt sonst beide gleich */
.study .btn-ghost{background:transparent;border-color:var(--paper);color:var(--paper)}
.study .btn-ghost:hover{background:rgba(247,246,239,.12);border-color:var(--paper);color:var(--paper)}
/* Korrektur T-CTA: Handlungsaufruf am Ende des Studienartikels, wie der Studienblock der Startseite, einspaltig ohne Visual;
   .body h2 / .body p stehen spaeter als .study p und faerben sonst dunkel */
.study.study--art{display:block;margin-top:56px}
.study--art h2{margin-top:0;color:var(--on-teal)}
.study--art p{margin-top:14px;color:var(--on-teal-2)}
.study--art .cta-row{margin-top:24px}
/* Runde U (Vorgabe 11, E18): letzte Karte der Insights-Übersicht über beide Spalten, wenn sie in der zweispaltigen Ansicht allein steht */
.posts .second:last-child:nth-child(even){grid-column:1/-1}
/* Runde U2: Regler „Credits berechnen“ auf pricing (#budget). Ohne JavaScript verborgen; hidden muss gegen display:grid gewinnen */
.calc[hidden],.calc [hidden]{display:none!important}
.flow>.calc,.flow>.calc+.split{margin-top:40px}
.calc>h3{font-size:28px;line-height:1.2}
.calc-grid{margin-top:20px;display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:24px;align-items:start}
.calc-in{gap:0}
.calc-in>*+*{margin-top:22px}
.calc-row{display:grid;gap:8px;min-width:0}
.calc-row>label,.calc fieldset>legend{font-size:15px;font-weight:500;color:var(--ink)}
.calc fieldset{margin-inline:0;margin-bottom:0;padding:0;border:0;min-width:0}
.calc fieldset>legend{padding:0;margin-bottom:8px}
.calc-num{display:grid;grid-template-columns:44px minmax(0,140px) 44px;gap:6px;align-items:stretch}
.calc-num input{width:100%;min-width:0;min-height:44px;padding:8px 10px;text-align:center;font:500 17px/1.4 var(--sans);color:var(--ink);background:var(--paper);border:1px solid var(--line-chip);border-radius:var(--r-s)}
.calc-step{min-height:44px;padding:0;font:500 22px/1 var(--sans);color:var(--teal);background:var(--white);border:1px solid var(--line-chip);border-radius:var(--r-s);cursor:pointer}
.calc-step:hover{background:var(--teal-tint)}
.calc-step[aria-disabled="true"]{opacity:.4;cursor:default}
.calc-range{width:100%;max-width:420px;height:44px;margin:0;accent-color:var(--teal);cursor:pointer}
.calc-cad{display:flex;flex-wrap:wrap;gap:8px}
.calc-cad>legend{width:100%}
/* Runde U3: Durchlaeufe im Monat je Messtakt; Info-Knoepfe neben Beschriftung und Legende (Tooltip am Label ausgerichtet); Textlink zu Kern- und explorativen Fragen */
.calc-cad>.calc-runs{flex:0 0 100%;width:100%;margin-top:6px}
.calc .calc-lab{position:relative;display:flex;flex-wrap:wrap;align-items:center;min-width:0}
.calc-row>.calc-lab>label{font-size:15px;font-weight:500;color:var(--ink)}
.calc .calc-lab .tip-box{left:0;top:calc(100% + 6px);width:min(290px,100%)}
.calc-more{font-size:15px}
/* Runde U3 (E1): Link „Credits berechnen“ in der Plan-Matrix, nur pricing */
.plan-calc{display:block;margin-top:4px;font-size:14px}
/* Runde U3 (F): kein Umbruch innerhalb von „95-%-Intervall“ */
.nowrap{white-space:nowrap}
.calc-pill{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 14px;font-size:15px;color:var(--ink);background:var(--white);border:1px solid var(--line-chip);border-radius:999px;cursor:pointer}
.calc-pill:has(:checked){background:var(--teal-tint);border-color:var(--teal);color:var(--teal-deep)}
.calc input[type="radio"],.calc input[type="checkbox"]{width:18px;height:18px;margin:0;flex:none;accent-color:var(--teal)}
.calc-count{margin-left:6px;font:400 13px/1.4 var(--mono);color:var(--ink-3)}
.calc-group+.calc-group{margin-top:14px}
.calc-group>legend.label{font-size:13px}
.calc-checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 16px}
.calc-check{display:flex;align-items:center;gap:10px;min-height:44px;min-width:0;font-size:16px;color:var(--ink);cursor:pointer}
.calc-check span{min-width:0;overflow-wrap:anywhere}
.calc-model{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;min-width:0}
.calc-model select{min-height:44px;max-width:100%;padding:8px 36px 8px 10px;font:400 16px/1.3 var(--sans);color:var(--ink);background-color:var(--paper);border:1px solid var(--line-chip);border-radius:var(--r-s);appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--teal) 50%),linear-gradient(135deg,var(--teal) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 12px) 50%;background-size:6px 6px;background-repeat:no-repeat}
.calc :is(input,select,button,a):focus-visible{outline:2px solid var(--rust);outline-offset:2px}
.calc-out{position:sticky;top:96px}
.calc-out>*+*{margin-top:10px}
.calc-big{margin-top:4px;font:500 48px/1.05 var(--serif);color:var(--on-teal)}
.card.teal .calc-big,.card.teal .calc-planname{color:var(--on-teal)}
.calc-plan{margin-top:18px;padding-top:16px;border-top:1px solid rgba(247,246,239,.25)}
.calc-plan>*+*{margin-top:6px}
.calc-planname{font:500 24px/1.25 var(--serif)}
.calc-hint{font-size:15px}
.calc-out .cta-row{margin-top:18px}
.calc-bar{display:none}
@media (max-width:760px){
  .calc-grid{grid-template-columns:minmax(0,1fr)}
  .calc-in.card,.calc-out.card{padding:24px}
  .calc-out{position:static}
  .calc-big{font-size:40px}
  .calc-bar{position:sticky;bottom:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;margin:22px -24px -24px;padding:10px 24px;font:500 15px/1.3 var(--sans);color:var(--on-teal);background:var(--teal);border-radius:0 0 var(--r-l) var(--r-l);text-decoration:none}
  .calc-bar::after{content:"↓";font-size:16px}
  /* Runde U3: Info-Knoepfe im Regler auf dem Telefon mit 44 px Trefferflaeche; sichtbar bleibt der Kreis von 24 px an derselben Stelle */
  .calc .tip-btn{width:44px;height:44px;margin:-10px;border:10px solid transparent;background-clip:padding-box;box-shadow:inset 0 0 0 1px var(--teal)}
}
@media (max-width:560px){
  .calc-cad{flex-direction:column;align-items:stretch}
  .calc-pill{border-radius:var(--r-s)}
  .calc-checks{grid-template-columns:minmax(0,1fr)}
  .calc-out .cta-row .btn{width:100%}
}
@media (max-width:360px){
  .calc-in.card,.calc-out.card{padding:16px}
  .calc-bar{margin:22px -16px -16px;padding:10px 16px}
  .calc-num{grid-template-columns:44px minmax(0,1fr) 44px}
}