/* max.dash - PANEL.01 Design-System (shared) */
:root{
  --bg:#F4F6F7; --panel:#FFFFFF; --surface-tint:#F1F5F6;
  --ink:#0D1F2A; --ink-2:#344950; --ink-soft:#5A6D73;
  --line:#DCE4E6; --line-2:#24363E; --line-soft:#EDF1F2;
  --teal:#0FB5AE; --teal-deep:#0A8F89; --teal-soft:#D5F2F0; --teal-wash:#F0FAF9;
  --teal-btn:#06756B; --teal-btn-deep:#055D55;
  --warn:#D97706; --warn-text:#B45309;
  --danger:#DC2626; --ok:#16A34A;
  --r:8px; --r-sm:5px; --r-pill:999px;
  --shadow:0 18px 50px rgba(20,60,60,.10);
  --shadow-lift:0 28px 70px rgba(20,60,60,.14);
  --mono:ui-monospace,"SF Mono","Cascadia Mono",Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.num,.mono{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
a{color:inherit;text-decoration:none}
.wrap{max-width:1120px;margin:0 auto;padding:0 28px}

/* ---------- BUTTONS ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--teal-btn);color:#fff;font-weight:600;font-size:15px;
  padding:12px 20px;border-radius:6px;border:1px solid var(--teal-btn-deep);
  box-shadow:0 1px 2px rgba(13,31,42,.10);transition:background .15s,box-shadow .15s}
.btn:hover{background:var(--teal-btn-deep);box-shadow:0 2px 6px rgba(13,31,42,.16)}
.btn-line{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:15px;padding:12px 18px;
  border-radius:6px;background:var(--panel);border:1px solid var(--line);color:var(--ink);
  box-shadow:0 1px 2px rgba(13,31,42,.06);transition:border-color .15s,color .15s}
.btn-line:hover{border-color:var(--ink-soft);color:var(--ink)}

/* ---------- A11Y: skip-link + focus ---------- */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:#fff;padding:10px 16px;border-radius:var(--r-sm);font-weight:600}
.skip:focus{left:14px;top:10px}
:focus-visible{outline:2px solid var(--teal-deep);outline-offset:2px;border-radius:2px}
.dark-band :focus-visible,.cta :focus-visible,footer :focus-visible{outline-color:#4FE3DA}

/* ---------- COOKIE / DATENSCHUTZ-HINWEIS ---------- */
.cookie{position:fixed;left:14px;right:14px;bottom:14px;z-index:90;max-width:880px;margin:0 auto;background:var(--ink);color:#fff;border-radius:var(--r);box-shadow:0 12px 32px -10px rgba(20,23,26,.5);padding:14px 18px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:space-between}
.cookie p{margin:0;font-size:13.5px;color:#CDD2D7;max-width:64ch}
.cookie a{color:#fff;text-decoration:underline}
.cookie .btn{flex:none;font-size:13px;padding:9px 18px;background:var(--teal-btn);border-color:var(--teal-btn-deep)}
.cookie-actions{display:flex;gap:10px;flex:none}
.cookie .btn-ghost{background:transparent;border:1px solid #4A5057;color:#CDD2D7}
.cookie .btn-ghost:hover{border-color:#fff;color:#fff}
@media(max-width:560px){.cookie-actions{flex-direction:column-reverse}.cookie-actions .btn{width:100%}}
.cookie[hidden]{display:none}
@media(max-width:560px){.cookie{flex-direction:column;align-items:stretch;text-align:center;gap:10px;bottom:0;left:0;right:0;border-radius:0}}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* ---------- NAV ---------- */
nav{position:sticky;top:0;z-index:40;background:rgba(250,250,248,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);box-shadow:0 6px 16px -12px rgba(20,23,26,.22)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:62px;padding-left:28px}
.logo{font-weight:800;font-size:20px;letter-spacing:-.03em;display:inline-flex;align-items:center}
.logo img{height:23px;width:auto;display:block}
.logo b{color:var(--teal);font-weight:800}
.nav-links{display:flex;gap:28px;align-items:stretch;font-size:14.5px;color:var(--ink-soft)}
.nav-links a{display:flex;align-items:center;font-weight:500;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .12s}
.nav-links a:hover{color:var(--ink)}
.nav-links a.current{color:var(--ink);font-weight:600;border-bottom-color:var(--teal)}
.nav .btn{font-size:14px;padding:9px 16px}
.navtoggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:42px;height:38px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel);cursor:pointer;padding:0 10px;flex:none}
.navtoggle span{display:block;height:2px;width:100%;background:var(--ink);transition:transform .2s,opacity .2s}
nav.open .navtoggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
nav.open .navtoggle span:nth-child(2){opacity:0}
nav.open .navtoggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* Zwischenstufe fuer die 7-Punkt-Nav: unterhalb ~1000px reicht die Breite nicht
   mehr fuer Logo + 7 Links + CTA, der Button ueberlappt sonst "Wissen".
   Enger setzen statt Hamburger, damit die Navigation auf Laptops sichtbar bleibt. */
@media(max-width:1000px) and (min-width:841px){
  .nav-links{gap:10px;font-size:13.5px}
  /* Am unteren Rand des Bandes standen Link und CTA auf 0px Abstand - gemessen,
     keine Ueberlappung, aber ohne Reserve fuer Font-Fallback oder Browser-Zoom.
     Der Button gibt hier etwas Polsterung ab. */
  nav .wrap > .btn{padding:10px 14px;font-size:14px}
}
@media(max-width:840px){
  .navtoggle{display:flex}
  nav .wrap{padding-left:20px;gap:14px}
  /* Der Sticky-CTA unten (.mobilecta) uebernimmt hier die Aufgabe. Ohne das stehen
     zwei gleiche CTAs plus Hamburger in einer 62px-Leiste. */
  nav .wrap > .btn{display:none}
  .nav-links{display:none;position:absolute;top:62px;left:0;right:0;background:var(--bg);border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;gap:0;padding:4px 20px 14px;box-shadow:0 12px 22px -14px rgba(20,23,26,.3)}
  nav.open .nav-links{display:flex}
  .nav-links a{padding:14px 0;border-bottom:1px solid var(--line);margin-bottom:0;font-size:16px}
  .nav-links a:last-child{border-bottom:0}
  .nav-links a.current{border-bottom-color:var(--line);color:var(--teal-deep)}
}

/* ---------- SECTION SCAFFOLD ---------- */
.pad-lg{padding:104px 0}
.pad-md{padding:72px 0}
.pad-sm{padding:56px 0}
h1,h2,h3{letter-spacing:-.03em;line-height:1.05}
h2{font-size:clamp(27px,3.2vw,38px);font-weight:800;letter-spacing:-.025em;line-height:1.1}
h3{font-weight:700}
h2 + p{margin-top:16px}
h2 + .log{margin-top:28px}
.dark-band{background:var(--ink);color:#fff}
.dark-band h2{color:#fff}
.surface{background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* ---------- SUB-PAGE HERO ---------- */
.subhero{padding:72px 0 56px;border-bottom:1px solid var(--line)}
.subhero h1{font-size:clamp(34px,4.6vw,56px);font-weight:800;letter-spacing:-.035em;line-height:1.0}
.subhero h1 em{font-style:normal;color:var(--teal-deep)} /* WCAG-AA large text 3:1 auf hellem Grund */
.subhero .lead{margin-top:20px;font-size:19px;color:var(--ink-soft);max-width:54ch}
.hero .lead,.subhero .lead{font-weight:400}
/* .actions war nur innerhalb .subhero und .hero als Flex-Container definiert.
   Ausserhalb - also in jeder normalen Sektion - hatte der Block weder Flex noch
   Gap noch Abstand nach oben: die Buttons klebten aneinander. Basisregel zuerst,
   die spezifischeren Faelle ueberschreiben sie danach. */
.actions{margin-top:24px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}
@media(max-width:560px){
  .actions .btn,.actions .btn-line{flex:1 1 100%;justify-content:center}
}
.subhero .actions{margin-top:28px;display:flex;gap:14px;flex-wrap:wrap}
.crumb{font-family:var(--sans);font-size:13px;font-weight:500;letter-spacing:0;color:var(--ink-soft);margin-bottom:22px;display:flex;gap:8px;align-items:center}
.crumb a:hover{color:var(--ink)}

/* ---------- HERO (home) ---------- */
/* Randabstand der zentrierten Spalte, damit die rechte Haelfte gezielt daraus ausbrechen kann */
:root{--gutter:28px}
header.home{padding:0;border-bottom:1px solid var(--line);overflow:hidden}
/* Bildspalte ist die breitere: das Foto soll den Header tragen. H1 entsprechend
   kleiner, sonst bricht die Ueberschrift in der schmaleren Textspalte auf 6 Zeilen. */
.hero{display:grid;grid-template-columns:1fr 1.18fr;gap:48px;align-items:center;
  max-width:1120px;margin:0 auto;padding:56px var(--gutter) 56px}
.hero-text{min-width:0}
.hero h1{font-size:clamp(31px,3.6vw,46px);font-weight:800;letter-spacing:-.032em;line-height:1.06}
.hero h1 em{font-style:normal;color:var(--teal-deep)}
.hero .lead{margin-top:20px;font-size:18px;font-weight:400;color:var(--ink-soft);max-width:44ch}
.hero .actions{margin-top:28px;display:flex;gap:12px;flex-wrap:wrap}
.hero .foot{margin-top:18px;font-size:12.5px;font-weight:600;color:var(--ink-soft)}

/* Kein Ueberstand auf Desktop: ein randlos auslaufendes Bild waechst mit der Fensterbreite
   und dominiert dann den Text. Bild bleibt in der Spalte, Textspalte ist die breitere. */
.hero-shot{margin:0}
.hero-shot img{width:100%;height:auto;display:block;border-radius:10px;
  box-shadow:var(--shadow-lift)}
.hero-shot figcaption{font-size:12.5px;font-weight:500;color:var(--ink-soft);
  margin-top:12px;max-width:60ch}

/* gestapelt: hier darf das Bild in die Seitenraender laufen, das wirkt auf schmalen
   Viewports absichtlich statt beschnitten */
@media(max-width:1000px){
  .hero{grid-template-columns:1fr;gap:32px;padding:52px var(--gutter) 56px}
  .hero .lead{max-width:56ch}
  .hero-shot{margin-left:calc(-1 * var(--gutter));margin-right:calc(-1 * var(--gutter))}
  .hero-shot img{border-radius:0}
  .hero-shot figcaption{padding:0 var(--gutter)}
}
@media(max-width:560px){
  .hero{padding:36px 20px 40px;gap:26px}
  .hero-shot{margin-left:-20px;margin-right:-20px}
  .hero-shot figcaption{padding:0 20px;font-size:12px}
  .hero .actions{gap:10px}
  .hero .actions .btn,.hero .actions .btn-line{flex:1 1 100%;justify-content:center}
}

.bars{display:flex;align-items:flex-end;gap:8px;height:84px}
.bars i{flex:1;background:var(--teal);opacity:.8;transform:scaleY(0);transform-origin:bottom;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.bars i:last-child{background:var(--teal-deep);opacity:1}
.run .bars i{transform:scaleY(1)}

/* ---------- STOERUNGSPROTOKOLL / LOG ROWS ---------- */
.log{border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:120px 1fr;gap:22px;padding:30px 0;border-bottom:1px solid var(--line);align-items:start}
.row.big{padding:48px 0}
.row .gutter{font-family:var(--sans);font-size:13px;font-weight:500;font-variant-numeric:tabular-nums;color:var(--ink-soft);display:flex;align-items:center;gap:8px;padding-top:5px}
.row h3{font-size:22px;font-weight:700;letter-spacing:-.02em}
.row.big h3{font-size:clamp(26px,3.4vw,38px);font-weight:800}
.row p{margin-top:9px;color:var(--ink-soft);font-size:16px;max-width:62ch}
@media(max-width:680px){.row{grid-template-columns:1fr;gap:8px}}

/* ---------- SOLUTION SPLIT ---------- */
.split{display:grid;grid-template-columns:1.12fr 1fr;gap:20px;margin-top:44px;align-items:stretch}
.mod{border:1px solid var(--line);border-radius:var(--r);padding:32px}
.mod.light{background:var(--panel);box-shadow:var(--shadow)}
.mod.dark{background:var(--ink);color:#fff;border-color:var(--ink)}
.mod .tag{font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:0;color:var(--ink-soft);display:flex;align-items:center;gap:7px}
.mod.dark .tag{color:#7EE6E0}
.mod h3{font-size:23px;margin:14px 0 10px;font-weight:800}
.mod>p{color:var(--ink-soft);font-size:15.5px}
.mod.dark>p{color:#B8BDC2}
.oklist{list-style:none;margin-top:16px;display:flex;flex-direction:column;gap:10px}
.oklist li{font-size:14.5px;padding-left:22px;position:relative;color:var(--ink-soft)}
.mod.dark .oklist li{color:#CDD2D7}
.dark-band .oklist li{color:#CDD2D7}
.oklist li::before{content:"";position:absolute;left:0;top:10px;width:10px;height:2px;background:var(--teal)}

/* ---------- SLA GAUGE ---------- */
.sla .grid,.split-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.sla p{margin-top:18px;color:#B8BDC2;font-size:17px;max-width:46ch}
.sla .checks{margin-top:24px;display:flex;flex-direction:column;gap:11px}
.sla .checks div{position:relative;padding-left:22px;font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:0;color:#9AA6AB}
.sla .checks div::before{content:"";position:absolute;left:0;top:11px;width:10px;height:2px;background:var(--teal)}
.gauge-wrap{display:flex;justify-content:center;position:relative}
.gauge{--p:0;position:relative;width:min(340px,78vw);aspect-ratio:1;border-radius:50%;
  background:conic-gradient(var(--teal) calc(var(--p)*3.6deg),var(--line-2) 0)}
.gauge::after{content:"";position:absolute;inset:18px;border-radius:50%;background:var(--ink-2);border:1px solid var(--line-2)}
.gauge .mid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:2}
.gauge .pct{font-size:clamp(34px,6.5vw,60px);font-weight:900;letter-spacing:-.02em;line-height:1;color:var(--teal);white-space:nowrap}
.gauge .pct b{color:var(--teal);font-weight:900}
.gauge .glab{font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:0;color:#B8BDC2;margin-top:6px}
@media(max-width:880px){.sla .grid,.split-grid{grid-template-columns:1fr;gap:36px}}

/* ---------- WEDGE / SCHALTSCHEMA ---------- */
.wedge h2{font-size:clamp(30px,4.2vw,52px);font-weight:800;letter-spacing:-.035em;line-height:1.04;max-width:20ch}
.schema{margin-top:40px;display:flex;align-items:center;gap:0;flex-wrap:wrap}
.node{border:1px solid var(--line);border-radius:var(--r);padding:18px 22px;background:var(--panel);min-width:170px}
.node .n-lab{font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:0;color:var(--ink-soft)}
.node .n-name{font-size:19px;font-weight:800;margin-top:5px;letter-spacing:-.02em}
.node.cloud{border-color:#CDECEA;background:linear-gradient(180deg,#F2FBFA,#fff)}
.node.cloud .n-name{color:var(--teal-deep)}
.flow{flex:1;min-width:120px;height:54px}
.wedge p{margin-top:26px;color:var(--ink-soft);font-size:16.5px;max-width:54ch}
.wedge .wedge-sub{margin-top:14px;color:var(--ink-soft);font-size:16.5px;max-width:60ch}

/* ---------- DATA-FLOW SCHEMATIC ---------- */
.dataflow{margin-top:16px}
.df-svg{width:100%;height:auto;display:block;overflow:visible}
/* literal hex (not var()) - Safari does not resolve var() in SVG fill/stroke via CSS */
.df-box{fill:#FFFFFF;stroke:#DCE4E6;stroke-width:1}
.df-box.cloud{fill:#F0FAF9;stroke:#D5F2F0}
.df-lab{font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:0;fill:#5A6D73}
.df-name{font-family:var(--sans);font-weight:800;font-size:23px;letter-spacing:-.02em;fill:#0D1F2A}
.df-name.teal{fill:#0A8F89;font-size:27px}
.df-sub{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:0;fill:#5A6D73}
.df-line{stroke:#9FB0B4;stroke-width:1.6;fill:none}
.df-flow-base{stroke:#B6E3E0;stroke-width:1.6}
.df-flow-teal{stroke:#0A8F89;stroke-width:1.6;fill:none}
.prose .byline{font-family:var(--sans);font-size:13px;font-weight:400;letter-spacing:0;color:var(--ink-soft);margin-top:24px}
/* Hervorhebung ueber Flaeche, nicht ueber einen Randstreifen links.
   Farbige Akzentleisten an Kartenkanten sind ein bekanntes Kennzeichen
   generierter Layouts, siehe AI-SLOP-AUDIT.md Merkmal 9. */
.tldr{border:1px solid var(--teal-soft);background:var(--teal-wash);border-radius:var(--r);
  padding:20px 24px 10px;margin:0 0 34px}
.tldr .tldr-lab{color:var(--teal-btn)}

/* Zitat ohne Kasten und ohne Leiste: Wirkung kommt aus Schriftgrad,
   Farbe und Weissraum. */
.pull-quote{padding:0;margin:34px 0 0;max-width:52ch}
.pull-quote p{font-size:21px;line-height:1.5;letter-spacing:-.015em;color:var(--ink);margin:0;font-weight:500}
.pull-quote footer{background:none;border-top:0;font-family:var(--sans);font-size:13px;font-weight:400;letter-spacing:0;color:var(--ink-soft);margin-top:12px}
.tldr .tldr-lab{font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:0;color:var(--ink-soft);margin-bottom:10px}

/* ---------- DEMO-FORMULAR ---------- */
.demo-form{margin-top:30px;max-width:600px}
.demo-form .row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.demo-form .field{margin-bottom:16px}
.demo-form label{display:block;font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:0;color:var(--ink-soft);margin-bottom:6px}
.demo-form input,.demo-form textarea,.demo-form select{width:100%;font-family:var(--sans);font-size:15.5px;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:12px 14px;transition:border-color .12s,box-shadow .12s}
.demo-form input:focus,.demo-form textarea:focus,.demo-form select:focus{border-color:var(--teal-deep);box-shadow:0 0 0 3px var(--teal-wash)}
.demo-form textarea{min-height:104px;resize:vertical;line-height:1.5}
.demo-form button{margin-top:4px}
.demo-form .form-note{margin-top:14px;font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:0;color:var(--ink-soft);line-height:1.5}
@media(max-width:560px){.demo-form .row2{grid-template-columns:1fr;gap:0}}
#buchen{scroll-margin-top:80px}

/* ---------- EXPRESS-ANFRAGE (auf dark-band) ---------- */
.express{max-width:780px;margin-top:28px}
.express-row{display:flex;gap:12px;flex-wrap:wrap}
.express-row input{flex:1 1 calc(50% - 6px);min-width:200px;font-family:var(--sans);font-size:17px;color:#fff;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.2);border-radius:6px;padding:17px 18px;transition:border-color .12s,box-shadow .12s}
.express-row input::placeholder{color:#9aa0a6}
.express-row input:focus{border-color:var(--teal);background:rgba(255,255,255,.1);outline:none;box-shadow:0 0 0 3px rgba(15,181,174,.22)}
.express-row .btn{flex:1 1 calc(50% - 6px);justify-content:center;padding:17px 22px;font-size:16px}
.express-note{margin-top:16px;font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:0;color:#9AA6AB}
.express-note a{color:#fff;text-decoration:underline}
@media(max-width:560px){.express-row input,.express-row .btn{flex:1 1 100%}}

/* ---------- STICKY MOBILE-CTA ---------- */
.mobilecta{display:none}
/* Muss denselben Breakpoint haben wie das Ausblenden des Header-CTA weiter oben.
   Lagen die beiden auseinander, gab es in dem Band dazwischen gar keinen CTA. */
@media(max-width:840px){
  .mobilecta{display:flex;align-items:center;justify-content:center;position:fixed;left:0;right:0;bottom:0;z-index:80;background:var(--teal-btn);color:#fff;font-weight:600;font-size:16px;min-height:54px;padding:15px calc(16px + env(safe-area-inset-right)) calc(15px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));border-top:1px solid var(--teal-btn-deep)}
  body:has(.mobilecta){padding-bottom:66px}
}
.df-conlab{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:0;fill:#5A6D73}
.dataflow-stack{display:none}
@media(max-width:680px){
  .df-svg{display:none}
  .dataflow-stack{display:flex;flex-direction:column;gap:0;margin-top:10px}
  .df-down{font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:0;color:var(--ink-soft);padding:9px 0 9px 16px}
  .df-divider{font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:0;color:var(--ink-soft);margin:24px 0 12px;display:flex;align-items:center;gap:10px}
  .df-divider::after{content:"";flex:1;height:1px;background:var(--line)}
  .df-substack{font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:0;color:var(--ink-soft);margin-top:8px}
}
@media(max-width:680px){.schema{flex-direction:column;align-items:stretch;gap:12px}.flow{display:none}.node{min-width:0}}

/* ---------- PROOF / TYPENSCHILD ---------- */
.proof .grid{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center}
.plate{border:1px solid var(--line);border-radius:var(--r);background:var(--bg);box-shadow:inset 0 2px 5px rgba(20,23,26,.06);padding:22px 24px}
.plate .p-row{display:flex;justify-content:space-between;gap:20px;font-family:var(--sans);font-size:13px;padding:9px 0;border-bottom:1px solid var(--line);letter-spacing:0}
.plate .p-row:last-child{border-bottom:0}
.plate .p-row span:first-child{font-weight:500;color:var(--ink-soft)}
.plate .p-row span:last-child{font-weight:600;color:var(--ink)}
@media(max-width:880px){.proof .grid{grid-template-columns:1fr;gap:36px}}

/* ---------- PHOTO (documentary, framed like .device) ---------- */
.shot{margin:0}
.shot img{width:100%;height:auto;display:block;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.shot figcaption{font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:0;color:var(--ink-soft);margin-top:10px}
.shot.band{margin-top:40px;max-width:900px}
.shot.crop img{aspect-ratio:16/9;object-fit:cover;object-position:center 60%}
.shot.wide{max-width:none}
.shot.wide.crop img{aspect-ratio:5/2;object-position:center 58%}
.dark-band .shot figcaption{color:#9AA6AB}

/* ---------- FEATURE ROWS (sub-pages) ---------- */
.featrow{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;padding:56px 0;border-bottom:1px solid var(--line)}
.featrow.flip .ftext{order:2}
.featrow h3{font-size:clamp(22px,2.6vw,30px);font-weight:800;letter-spacing:-.02em}
.featrow p{margin-top:14px;color:var(--ink-soft);font-size:16.5px;max-width:52ch}
.fvisual{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);padding:22px;box-shadow:var(--shadow);transition:box-shadow .18s}
@media(max-width:760px){.featrow{grid-template-columns:1fr;gap:24px}.featrow.flip .ftext{order:0}}

/* ---------- SCREEN-TOUR (Startseite): echte Screenshots statt Feature-Kacheln.
   Baut auf .featrow auf, nur die Spaltengewichte kippen zugunsten des Bildes. */
.tour{margin-top:8px}
.tour .featrow{grid-template-columns:1fr 1.3fr;gap:52px}
.tour .featrow.flip{grid-template-columns:1.3fr 1fr}
.tour .featrow:last-child{border-bottom:0;padding-bottom:8px}
/* Das Mitarbeiter-Ranking ist von Haus aus breit: in einer halben Spalte waere
   es nicht mehr lesbar, also bekommt diese Zeile die volle Breite. */
.tour .featrow.full{grid-template-columns:1fr;gap:30px}
.tour .featrow.full .oklist{flex-direction:row;flex-wrap:wrap;gap:10px 34px}
.tour .featrow.full .oklist li{max-width:34ch}
.tour-sub{margin-top:14px;color:var(--ink-soft);font-size:17px;max-width:62ch}
.tour-foot{margin-top:36px;font-size:15px;color:var(--ink-soft);max-width:70ch}
.f-no{font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:0;color:var(--ink-soft);display:flex;align-items:center;gap:9px;margin-bottom:14px}
.f-no b{font-variant-numeric:tabular-nums;color:var(--teal-deep);font-weight:700}
.f-no::after{content:"";flex:0 0 26px;height:2px;background:var(--teal);opacity:.5}
@media(max-width:760px){.tour .featrow,.tour .featrow.flip{grid-template-columns:1fr}}

/* mini panel (generic data card for visuals) */
.panel{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);box-shadow:var(--shadow);transition:box-shadow .18s}
.panel .ph-top{display:flex;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--line);font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:0;color:var(--ink-soft)}
.panel .ph-body{padding:16px}
.statline{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}
.statline:last-child{border-bottom:0}
.statline b{font-family:var(--sans);font-variant-numeric:tabular-nums;font-weight:700}
.statline .t{color:var(--teal-deep)}

/* feature grid: editorial column set, not a card grid */
.fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px 30px;margin-top:44px}
.fcell{border:0;border-top:2px solid var(--ink);border-radius:0;padding:16px 0 0;background:none}
.fcell .fc-lab{font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:0;color:var(--ink-soft)}
.fcell h3{font-size:20px;margin-top:10px;font-weight:800;letter-spacing:-.02em}
.fcell p{margin-top:8px;color:var(--ink-soft);font-size:15px}
@media(max-width:760px){.fgrid{grid-template-columns:1fr;gap:26px}}

/* ---------- PRICING ---------- */
.tiers{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:42px;align-items:start}
.tier{border:1px solid var(--line);border-radius:var(--r);padding:28px;background:var(--panel);position:relative;box-shadow:var(--shadow);transition:box-shadow .18s,transform .18s}
.tier:hover{box-shadow:var(--shadow-lift)}
/* Empfohlener Tarif: getoente Flaeche plus umlaufender Akzentrand und Anhebung.
   Kein Streifen links, kein "beliebteste Wahl"-Pillenlabel. */
.tier.active{border-color:var(--teal-soft);background:var(--teal-wash);
  transform:translateY(-10px);box-shadow:var(--shadow-lift)}
.tier.active .price{color:var(--teal-btn-deep)}
.tier h3{font-size:21px;font-weight:800}
.tier .price{font-family:var(--sans);font-variant-numeric:tabular-nums;font-size:32px;font-weight:800;letter-spacing:-.02em;margin:12px 0 4px}
.tier .price small{font-family:var(--sans);font-variant-numeric:tabular-nums;font-size:13px;color:var(--ink-soft);font-weight:400;letter-spacing:0}
.tier .t-desc{color:var(--ink-soft);font-size:14.5px;min-height:40px}
.tier ul{list-style:none;margin:18px 0 24px;display:flex;flex-direction:column;gap:9px}
.tier li{font-size:14.5px;padding-left:24px;position:relative;color:var(--ink)}
.tier li::before{content:"";position:absolute;left:0;top:9px;width:9px;height:2px;background:var(--teal)}
.komplett{margin-top:22px;border:1px dashed var(--line);border-radius:var(--r);padding:16px 22px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;color:var(--ink-soft);font-size:14.5px}
.komplett b{color:var(--ink);font-weight:700}
.setup{margin-top:22px;font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:0;color:var(--ink-soft);display:flex;align-items:center;gap:9px}
/* Loest das Sternchen an den Preisen direkt unter den Tarifen auf, statt in einem
   eigenen Block nach dem FAQ. */
.pricenote{margin-top:14px;font-size:14px;color:var(--ink-soft);max-width:78ch}
.pricenote a{color:var(--teal-btn);text-decoration:underline}
.pricenote a:hover{color:var(--teal-btn-deep)}
@media(max-width:680px){.tiers{grid-template-columns:1fr}.tier.active{transform:none}}

/* ---------- PREISLEITER (3 Stufen x Volumenbaender) ---------- */
.tiers-3{grid-template-columns:repeat(3,1fr);gap:18px}
.tiers-3 .tier{padding:24px}
.tiers-3 .tier .price{font-size:29px}
@media(max-width:900px){.tiers-3{grid-template-columns:1fr}}

.ladder-wrap{margin-top:34px;overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);box-shadow:var(--shadow)}
.ladder{width:100%;border-collapse:collapse;font-size:15px;min-width:620px}
.ladder th,.ladder td{padding:13px 20px;text-align:right;border-bottom:1px solid var(--line)}
.ladder th:first-child,.ladder td:first-child{text-align:left}
.ladder thead th{font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);font-weight:700;background:var(--surface-tint)}
.ladder tbody tr:last-child td{border-bottom:0}
.ladder tbody tr:hover{background:var(--surface-tint)}
.ladder td{font-variant-numeric:tabular-nums}
.ladder .lad-seg{display:block;font-size:12.5px;color:var(--ink-soft);font-weight:400;margin-top:2px}
.ladder .col-hl{background:var(--teal-wash);font-weight:700;color:var(--teal-btn-deep)}
.ladder thead .col-hl{background:var(--teal-soft);color:var(--teal-btn-deep)}
.ladder tbody tr:hover .col-hl{background:var(--teal-soft)}

.addons{margin-top:26px;display:grid;grid-template-columns:repeat(2,1fr);gap:0 40px}
.addon{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:12px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.addon b{font-weight:600;color:var(--ink)}
.addon span{color:var(--ink-soft);text-align:right}
@media(max-width:680px){.addons{grid-template-columns:1fr}}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line);margin-top:34px}
details{border-bottom:1px solid var(--line)}
summary{cursor:pointer;list-style:none;padding:20px 0;font-size:17.5px;font-weight:600;display:flex;align-items:center;gap:14px;position:relative;padding-right:34px}
summary::-webkit-details-marker{display:none}
summary .tg{display:none}
summary::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);
  font-family:var(--sans);font-size:20px;font-weight:400;color:var(--ink-soft);line-height:1}
details[open] summary::after{content:"\2212"}
details[open] summary{color:var(--teal-btn)}
details>div,details>p{padding:0 0 20px 0;color:var(--ink-soft);font-size:15.5px;max-width:74ch}

/* ---------- CTA ---------- */
.cta h2{max-width:20ch}
.cta p{margin-top:14px;color:#B8BDC2;font-size:16px}

/* ---------- BLOG / PROSE ---------- */
.bloglist{margin-top:32px;border-top:1px solid var(--line)}
.bloglink{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;
  column-gap:32px;align-items:start;
  padding:22px 18px;margin:0 -18px;
  border-bottom:1px solid var(--line);border-radius:8px;
  transition:background .15s}
.bloglink:hover{background:var(--panel)}
.bloglink .meta{grid-column:1;grid-row:1;font-size:12.5px;font-weight:600;color:var(--ink-soft);margin-bottom:6px}
.bloglink>div:not(.meta):not(.go){grid-column:1;grid-row:2;min-width:0}
.bloglink .go{grid-column:2;grid-row:1 / span 2;align-self:center;
  font-size:13px;font-weight:600;color:var(--teal-btn);white-space:nowrap}
.bloglink h3{font-size:20px;font-weight:800;letter-spacing:-.02em}
.bloglink p{margin-top:7px;color:var(--ink-soft);font-size:15px;max-width:74ch}
.bloglink:hover h3{color:var(--teal-deep)}
.bloglink:hover .go{color:var(--teal-btn-deep)}
@media(max-width:680px){
  .bloglink{grid-template-columns:1fr;column-gap:0;padding:20px 14px;margin:0 -14px}
  .bloglink .go{display:none}
}

.prose{max-width:72ch;font-size:17.5px}
.prose p{margin:20px 0;color:#26292E}
.prose h2{font-size:clamp(24px,3vw,32px);margin:46px 0 14px;font-weight:800}
.prose h3{font-size:21px;margin:34px 0 10px;font-weight:800;letter-spacing:-.02em}
.prose ul,.prose ol{margin:18px 0 18px 4px;display:flex;flex-direction:column;gap:10px;list-style:none}
.prose ul li{padding-left:22px;position:relative;color:#26292E}
.prose ul li::before{content:"";position:absolute;left:0;top:12px;width:10px;height:2px;background:var(--teal)}
.prose ol{counter-reset:n}
.prose ol li{padding-left:42px;position:relative;color:#26292E;counter-increment:n}
.prose ol li::before{content:counter(n,decimal-leading-zero);position:absolute;left:0;top:0;font-family:var(--sans);font-variant-numeric:tabular-nums;font-size:13px;color:var(--teal-deep);font-weight:700}
.prose blockquote{margin:30px 0;padding:22px 26px;border:1px solid var(--teal-soft);
  background:var(--teal-wash);border-radius:var(--r);color:var(--ink);font-size:18px}
.prose blockquote p:first-child{margin-top:0}
.prose blockquote p:last-child{margin-bottom:0}
.prose code{font-family:var(--mono);font-size:.88em;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-sm);padding:1px 6px}
.prose strong{font-weight:700;color:var(--ink)}
.article-meta{font-family:var(--sans);font-size:13px;font-weight:500;letter-spacing:0;color:var(--ink-soft);margin:16px 0 18px;display:flex;gap:14px;flex-wrap:wrap}
.toc{border:1px solid var(--line);border-radius:var(--r);padding:18px 22px;background:var(--bg);margin:26px 0;max-width:72ch}
.toc .toc-lab{font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:0;color:var(--ink-soft);margin-bottom:10px}
.toc a{display:block;padding:5px 0;font-size:15px;color:var(--ink-soft)}
.toc a:hover{color:var(--teal-deep)}

/* ---------- LEGAL ---------- */
.legal{max-width:74ch;font-size:16px}
.legal h2{font-size:22px;margin:34px 0 10px;font-weight:800}
.legal h3{font-size:17px;margin:22px 0 8px;font-weight:700}
.legal p{margin:12px 0;color:#26292E}
.legal a{color:var(--teal-deep)}
.legal .muted{color:var(--ink-soft);font-size:14px}

/* ---------- FOOTER ---------- */
footer{background:var(--ink);color:#8A9098;border-top:1px solid var(--line-2)}
footer .wrap{padding-top:46px;padding-bottom:34px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px;padding-bottom:34px;border-bottom:1px solid var(--line-2)}
.foot-grid .logo{color:#fff;margin-bottom:12px}
.foot-grid .f-tag{font-size:13.5px;line-height:1.6;max-width:30ch}
.foot-col .foot-h{font-family:var(--sans);font-size:13px;letter-spacing:0;color:#fff;margin-bottom:14px;font-weight:700}
.foot-col a{display:block;padding:5px 0;font-size:14px;color:#8A9098}
.foot-col a:hover{color:#fff}
.foot-bot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;padding-top:24px;font-family:var(--sans);font-size:12.5px;font-weight:400;letter-spacing:0}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr 1fr;gap:24px}}

/* ---------- VERGLEICHSTABELLE (mobil scrollbar: Scroll-Schatten + Wisch-Hinweis) ---------- */
.tablewrap{overflow-x:auto;margin-top:28px;-webkit-overflow-scrolling:touch}
/* Scroll-Schatten NUR dort, wo Tabellen tatsaechlich scrollen. Vorher lief der
   Verlauf immer: die 40px breite Abdeckung am rechten Rand legte sich ueber die
   Zeilenlinien der Tabelle und riss sie sichtbar auf, obwohl nichts zu scrollen
   war. Gekoppelt an denselben Breakpoint wie der Hinweis "Tabelle seitlich
   scrollen", damit Effekt und Hinweis nicht auseinanderlaufen. */
@media(max-width:680px){
  .tablewrap{
    background:
      linear-gradient(to right,var(--bg) 30%,rgba(250,250,248,0)) 0 0,
      linear-gradient(to left,var(--bg) 30%,rgba(250,250,248,0)) 100% 0,
      radial-gradient(farthest-side at 0 50%,rgba(20,23,26,.16),transparent) 0 0,
      radial-gradient(farthest-side at 100% 50%,rgba(20,23,26,.16),transparent) 100% 0;
    background-repeat:no-repeat;
    background-size:40px 100%,40px 100%,14px 100%,14px 100%;
    background-attachment:local,local,scroll,scroll}
}
.table-hint{display:none}
@media(max-width:680px){
  .table-hint{display:flex;align-items:center;gap:8px;margin-top:28px;font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:0;color:var(--ink-soft)}
  .table-hint::after{content:"";flex:1;height:1px;background:var(--line)}
  .table-hint+.tablewrap{margin-top:12px}
}

/* ---------- RESPONSIVE GLOBAL ---------- */
@media(max-width:880px){
  .split{grid-template-columns:1fr}
  .pad-lg{padding:72px 0}
  .pad-md{padding:56px 0}
  .featrow{grid-template-columns:1fr}
}
@media(max-width:560px){
  .wrap{padding:0 20px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:22px 18px}
  .subhero h1{font-size:clamp(30px,8vw,40px)}
  .row{grid-template-columns:1fr;gap:6px}
  /* Ohne eigene Stufe stapeln .subhero (56px) und .pad-lg (72px) auf dem Telefon
     zu rund 130px Leerraum zwischen zwei Sektionen. */
  .pad-lg{padding:52px 0}
  .pad-md{padding:44px 0}
  .pad-sm{padding:34px 0}
  .subhero{padding:40px 0 34px}
  .featrow{padding:36px 0}
  .prose h2{margin:34px 0 12px}
}

/* ---------- FLIESSTEXT DIREKT IN EINER SEKTION ----------
   styles.css setzt global margin:0. Ein <p> ohne Klasse als direktes Kind von
   .wrap.inset hatte dadurch weder Abstand zum Vorgaenger noch eine Zeilenbreite -
   es klebte am Absatz darueber und lief auf volle Containerbreite. Sichtbar
   geworden auf den Systemseiten, wo genau solche Absaetze ergaenzt wurden.
   Nur direkte Kinder, damit FAQ, Karten, Tabellen und .prose unberuehrt bleiben. */
/* Nur der gestapelte Fall: ein Absatz, der auf etwas folgt, braucht Abstand.
   Und wo Absaetze aufeinander folgen, braucht der Text eine Lesebreite - sonst
   steht ein 60ch-Lead ueber einem Absatz auf voller Containerbreite. */
section > .wrap.inset > * + p:not([class]){margin-top:18px}
section > .wrap.inset > p.lead + p:not([class]),
section > .wrap.inset > p:not([class]) + p:not([class]),
section > .wrap.inset > p:not([class]):has(+ p:not([class])){max-width:72ch}

/* ---------- CTA-BAND MITTEN IM TEXT ----------
   Schmaler Zwischenruf nach der Funktionsmatrix, dort wo der Leser gerade
   gesehen hat, was er bekommt. Absichtlich KEIN zweites Formular - das steht
   unten. Nur eine Zeile Text und ein Button, damit es den Lesefluss nicht
   zerschneidet. */
.ctastrip{display:flex;align-items:center;justify-content:space-between;gap:22px;
  margin-top:34px;padding:20px 24px;background:var(--teal-wash);
  border:1px solid var(--teal-soft);border-radius:var(--r)}
.ctastrip .cs-text{display:flex;flex-direction:column;gap:4px;min-width:0}
.ctastrip strong{font-size:17px;font-weight:800;letter-spacing:-.015em;color:var(--ink)}
.ctastrip span{font-size:14.5px;color:var(--ink-soft)}
.ctastrip .cs-act{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.ctastrip .btn-line{background:var(--panel)}
@media(max-width:680px){
  .ctastrip{flex-direction:column;align-items:stretch;gap:16px;padding:18px 20px}
  .ctastrip .cs-act{flex-direction:column;align-items:stretch}
  .ctastrip .cs-act .btn,.ctastrip .cs-act .btn-line{justify-content:center}
}

/* ---------- SYSTEMWAND (Integrationen) ----------
   Feste Boxmasse, damit ein spaeter freigegebenes Anbieter-Logo die Textmarke
   ohne Layout-Sprung ersetzen kann: .sysbox img ist auf 26px Hoehe gedeckelt.
   Raster ueber gap auf Linienfarbe statt Rahmen je Kachel - dadurch stimmen die
   Trennlinien bei jeder Kachelzahl, nicht nur bei genau sechs. */
.syswall{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;margin-top:30px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.sysbox{height:96px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
  padding:0 10px;text-align:center;background:var(--panel)}
.sysbox img{max-height:26px;max-width:130px;width:auto;height:auto;object-fit:contain}
.sysname{font-size:16.5px;font-weight:700;letter-spacing:-.01em;color:var(--ink);line-height:1.2}
.sysstat{font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--teal-btn);font-weight:600;display:inline-flex;align-items:center;gap:6px;line-height:1}
.sysstat::before{content:"";width:7px;height:7px;border-radius:50%;flex:0 0 auto;
  background:var(--teal);border:1.5px solid var(--teal-deep)}
a.sysbox{transition:background .15s}
a.sysbox:hover{background:var(--teal-wash)}
@media(max-width:560px){.sysbox{height:88px}}

/* ---------- SYSTEMKARTEN (Hub /integrationen) ----------
   Eine Karte je Quellsystem. Kein Statusbadge: die Karte sagt, was das System
   ist und wohin der Link geht, nicht wie weit ein Konnektor gebaut ist. */
.sysgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:16px;margin-top:30px}
.syscard{display:flex;flex-direction:column;gap:8px;padding:20px 22px;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--r);box-shadow:0 1px 2px rgba(13,31,42,.05);
  transition:border-color .15s,box-shadow .15s,transform .15s}
.syscard:hover{border-color:var(--teal);box-shadow:var(--shadow);transform:translateY(-2px)}
.syscard .sc-name{font-size:19px;font-weight:800;letter-spacing:-.02em;line-height:1.15}
.syscard .sc-region{font-family:var(--mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft)}
.syscard .sc-line{font-size:14.5px;color:var(--ink-soft);margin-top:2px}
.syscard .sc-go{margin-top:auto;padding-top:12px;font-size:13.5px;font-weight:600;color:var(--teal-btn)}
.syscard.own{background:var(--teal-wash);border-color:var(--teal-soft)}

/* ---------- DATENTABELLE ----------
   Ersetzt die Inline-Styles, mit denen die erste Integrationsseite ihre
   Tabellen gesetzt hat. 28 Systemseiten mit Inline-CSS waeren nicht pflegbar. */
.dtable{width:100%;border-collapse:collapse;font-size:15px;min-width:600px}
.dtable th{text-align:left;padding:11px 16px 13px;font-size:12.5px;color:var(--ink-soft);font-weight:600;
  border-bottom:1px solid var(--line);white-space:nowrap}
.dtable td{padding:16px;border-bottom:1px solid var(--line-soft);color:var(--ink-soft);vertical-align:top;
  line-height:1.5}
.dtable tr:last-child td{border-bottom:0}
.dtable td:first-child{font-weight:600;color:var(--ink)}
.dtable code{font-family:var(--mono);font-size:13px;background:var(--bg);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:1px 5px;white-space:nowrap}
/* Statuswerte: der Punkt traegt die Bedeutung, der Text bleibt normaler Fliesstext.
   Vorher waren ganze Zellen gruen und orange gesetzt - das liess die Tabelle wie
   eine Ampel-Matrix im Datenblatt aussehen statt wie ein Fliesstext-Vergleich. */
/* WICHTIG: kein display auf .yes/.via setzen. Die Klassen sitzen auf dem <td>
   selbst - ein display:inline-flex nimmt der Zelle die Eigenschaft table-cell,
   sie faellt aus dem Spaltenraster und schrumpft auf Inhaltsbreite. Genau das
   hat eine 52px-Luecke zwischen Spalte 4 und 5 erzeugt. Der Punkt kommt
   deshalb als inline-block im ::before, die Zelle bleibt unangetastet. */
.dtable .yes,.dtable .via{color:var(--ink-2);font-weight:500}
.dtable .yes::before,.dtable .via::before{content:"";display:inline-block;
  width:7px;height:7px;border-radius:50%;margin-right:8px;vertical-align:middle;
  position:relative;top:-1px}
.dtable .yes::before{background:var(--ok)}
.dtable .via::before{background:var(--warn)}

/* ---------- SPRACHUMSCHALTER ---------- */
.langsw{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.04em;color:var(--ink-soft);margin-left:auto;padding:0 4px}
.langsw a{padding:3px 5px;border-radius:4px;font-weight:600}
.langsw a[aria-current]{background:var(--teal-wash);color:var(--teal-btn)}
.langsw a:not([aria-current]):hover{color:var(--ink)}