/*
Theme Name: dataloft Werkstatt
Theme URI: https://dataloft.ch
Author: dataloft GmbH
Author URI: https://dataloft.ch
Description: Custom-Theme für dataloft.ch — Schweizer Digitalwerkstatt. CI-Blau als einziger Akzent, klassische Sans, sauberes kühles Weiss. Ohne Page-Builder, ohne Block-Editor-Verstecke.
Version: 1.0.38
Requires at least: 6.0
Requires PHP: 8.1
License: GNU GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dataloft-werkstatt
Tags: custom-theme, werkstatt, business
*/

/* ==========================================================================
 * TOKENS — Farben, Schriften, Masse
 * CI: Blau #377AEB einziger Akzent · sauberes kühles Weiss · Graphit-Text
 * 60 % Grund / 30 % Struktur / 10 % Akzent
 * ========================================================================== */

:root {
  /* Schrift — EINE Sans für alles (Roger-Grundsatz: Open Sans).
     TODO: Open-Sans woff2 self-hosted einbetten (@font-face hier) und
     "Open Sans" vor den System-Stack setzen. Bis dahin produktionssicherer
     System-Humanist-Stack, self-contained, kein externer Request. */
  --font-sans:   -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Alte Token-Namen aus Bestands-Templates auf die eine Sans umgebogen —
     keine Serif, kein Mono-als-Stilmittel mehr. */
  --serif:       var(--font-sans);
  --sans:        var(--font-sans);
  --mono:        var(--font-sans);

  /* Grund + Flächen: leicht kühles Weiss, kein warmes Beige */
  --bg:          oklch(0.986 0.002 250);
  --paper:       var(--bg);
  --surface:     oklch(0.967 0.004 252);
  --paper-soft:  var(--surface);
  --surface-2:   oklch(0.940 0.006 255);

  /* Text: tiefes Graphit, leicht kühl */
  --ink:         oklch(0.235 0.012 262);
  --ink-soft:    oklch(0.440 0.013 262);
  --mute:        oklch(0.520 0.012 262);
  --ink-faint:   oklch(0.520 0.011 262);

  /* Linien */
  --line:        oklch(0.906 0.006 255);
  --line-soft:   oklch(0.945 0.004 255);
  --line-strong: oklch(0.820 0.010 258);

  /* Akzent = dataloft-Blau. -deep für kleinen Text (Kontrast ≥ 4.5:1) UND für jede
     gefüllte Fläche, die Text trägt — --accent-ink auf --accent misst nur 3.96:1.
     -accent bleibt für Grafik/Linien/grosse Headline-Highlights ohne Text darauf. */
  --accent:      oklch(0.598 0.184 260);   /* #377AEB */
  --accent-deep: oklch(0.512 0.170 260);   /* dunkler, für kleinen Text auf Weiss */
  --accent-mid:  oklch(0.706 0.138 265);   /* #769DF6 */
  --accent-soft: oklch(0.930 0.045 250);   /* Highlight-Wash */
  --accent-line: oklch(0.720 0.135 262);
  --accent-ink:  oklch(0.990 0.005 260);   /* Text auf Blau */
  --accent-wash: color-mix(in oklch, var(--accent) 12%, transparent);

  /* Grid-Textur für Kontrollraum-Module */
  --grid-line:   oklch(0.598 0.184 260 / 0.05);

  --shadow-sm:   0 1px 2px oklch(0.30 0.02 262 / .05);
  --shadow:      0 1px 2px oklch(0.30 0.02 262 / .05), 0 10px 30px oklch(0.30 0.02 262 / .08);

  --container:   1200px;
  --wrap:        1240px;
  --gutter:      clamp(1.15rem, 0.55rem + 2.7vw, 2.5rem);
  --section-y:   clamp(3.2rem, 7vw, 6rem);
  --section-y-sm: clamp(2.4rem, 5vw, 4rem);

  --step:        clamp(1rem, 0.95rem + 0.25vw, 1.1rem);

  --radius:      10px;
  --radius-sm:   7px;

  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast:    150ms;
  --dur-base:    260ms;
}

/* ==========================================================================
 * RESET + BASE
 * ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--ink);
  font-size: var(--step);
  line-height: 1.6;
  letter-spacing: -0.006em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  line-height: 1.08;
  letter-spacing: -0.026em;
  font-weight: 700;
  text-wrap: balance;
  color: var(--ink);
}
h1 { font-size: clamp(2.1rem, 1.2rem + 3.6vw, 3.6rem); font-weight: 750; letter-spacing: -0.032em; }
h2 { font-size: clamp(1.65rem, 1.1rem + 2.2vw, 2.7rem); }
h3 { font-size: clamp(1.1rem, 1rem + 0.5vw, 1.32rem); letter-spacing: -0.018em; }
h4 { font-size: 1.05rem; }

p { max-width: 68ch; }
a { color: inherit; text-decoration: none; }
strong { font-weight: 680; }
img { max-width: 100%; height: auto; display: block; }

::selection { background: var(--accent-deep); color: var(--accent-ink); }
:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 3px; border-radius: 3px; }

/* ==========================================================================
 * UTILITIES  (Bestands-Klassen kompatibel halten)
 * ========================================================================== */

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

/* "italic": frühere Serif-Kursiv-Highlights → jetzt klarer Blau-Akzent.
   Reused markup aus Bestands-Templates <span class="italic">Wort</span>. */
.italic { font-style: normal; color: var(--accent-deep); font-weight: 750; }
h1 .italic, h2 .italic, .display .italic { color: var(--accent); }
.italic.mute { color: var(--mute); font-weight: 400; }

.mute { color: var(--mute); }
/* "mono": kein Monospace-Stilmittel mehr — nur tabellarische Ziffern in der Sans. */
.mono { font-family: var(--font-sans); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.tnum { font-variant-numeric: tabular-nums; }

.display { letter-spacing: -0.03em; }
.lede { font-size: clamp(1.12rem, 1rem + 0.7vw, 1.4rem); line-height: 1.45; color: var(--ink-soft); max-width: 40ch; }
.body-large { font-size: clamp(1.02rem, 0.98rem + 0.3vw, 1.16rem); line-height: 1.62; }
.screen-reader-text {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ==========================================================================
 * BUTTONS
 * ========================================================================== */

.btn {
  display: inline-flex; align-items: center; gap: 0.55em;
  font-family: var(--font-sans); font-size: 0.95rem; font-weight: 600;
  letter-spacing: -0.01em; line-height: 1;
  padding: 0.78em 1.2em; border: 1px solid var(--accent-deep); border-radius: var(--radius-sm);
  background: var(--accent-deep); color: var(--accent-ink); cursor: pointer; white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-base) ease, border-color var(--dur-base) ease;
}
/* Fuellung liegt auf -deep, nicht auf -accent: --accent-ink auf --accent misst 3.96:1
   und reisst AA fuer 0.95rem-Text. -deep misst 5.68:1, Hover 7.16:1.
   Hover geht eine Stufe tiefer, damit der Zustand ueberhaupt sichtbar bleibt — vorher
   war -deep selbst der Hover-Wert. Kein Template setzt heute einen .btn in .panel.ctrl;
   falls doch, traegt der Override dort 4.92:1 / 6.60:1, also ebenfalls ueber AA. */
.btn:hover {
  background: color-mix(in oklch, var(--accent-deep) 80%, var(--ink));
  border-color: color-mix(in oklch, var(--accent-deep) 80%, var(--ink));
}
.btn:active { transform: scale(0.975); }
.btn[disabled] { cursor: default; opacity: 0.6; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn--ghost:hover { background: var(--surface-2); border-color: var(--ink-faint); color: var(--ink); }
.btn svg { width: 1.05em; height: 1.05em; flex: none; }

/* ==========================================================================
 * SITE HEADER + NAV
 * ========================================================================== */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in oklch, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header .container { display: flex; align-items: center; gap: 1.4rem; height: 64px; }
.brand { display: inline-flex; align-items: center; font-weight: 800; font-size: 1.2rem; letter-spacing: -0.035em; color: var(--ink); }
.brand-logo { height: 30px; width: auto; display: block; }
.nav {
  display: none; list-style: none; align-items: center; gap: 1.5rem;
  margin-left: auto;
}
/* <nav>-Landmark ohne eigene Box: .nav bleibt Flex-Kind des Header-Containers. */
.site-nav { display: contents; }
.nav li { display: inline-flex; }
.nav a {
  font-size: 0.94rem; font-weight: 550; color: var(--ink-soft); letter-spacing: -0.008em;
  padding: 0.3rem 0; position: relative; transition: color var(--dur-base) ease;
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}
.nav a:hover { color: var(--ink); }
.nav a:hover::after, .nav .current-menu-item > a::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav .current-menu-item > a { color: var(--ink); }

.nav-toggle {
  margin-left: auto; display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: transparent; color: var(--ink); cursor: pointer;
}
.nav-toggle svg { width: 22px; height: 22px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

/* Header-Button «Anfrage»: auf allen Breiten sichtbar (P1 Relaunch 10/2026), Tap-Ziel >= 40 px. */
.header-cta { padding: 0 1rem; min-height: 40px; font-size: 0.9rem; flex: none; }
@media (max-width: 899px) {
  .site-header .container { gap: 0.6rem; }
  .header-cta { margin-left: auto; }
  .nav-toggle { margin-left: 0; order: 3; }
}
@media (max-width: 380px) {
  .brand-logo { height: 24px; }
  .header-cta { padding: 0 0.8rem; }
}
@media (min-width: 900px) {
  .nav { display: flex; }
  .nav-toggle { display: none; }
}

/* Mobile-Nav Panel */
@media (max-width: 899px) {
  .nav.is-open {
    display: flex; flex-direction: column; align-items: flex-start; gap: 0;
    position: absolute; left: 0; right: 0; top: 64px;
    background: var(--bg); border-bottom: 1px solid var(--line);
    padding: 0.5rem var(--gutter) 1.2rem; box-shadow: var(--shadow);
  }
  .nav.is-open li { width: 100%; }
  .nav.is-open a { display: block; width: 100%; padding: 0.85rem 0; border-bottom: 1px solid var(--line-soft); font-size: 1.05rem; }
  .nav.is-open a::after { display: none; }
}

/* ==========================================================================
 * HERO / COVER
 * ========================================================================== */

.hero { border-bottom: 1px solid var(--line); }
.hero__in {
  display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 5vw, 3.4rem);
  padding-top: clamp(2.8rem, 6vw, 5rem); padding-bottom: clamp(2.6rem, 5vw, 4rem);
}
@media (min-width: 940px) { .hero__in { grid-template-columns: 1.12fr 0.88fr; align-items: center; } }
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 0.6em; font-size: 0.88rem;
  color: var(--ink-soft); margin-bottom: 1.35rem; font-weight: 500;
}
.hero__eyebrow .tick { width: 22px; height: 1px; background: var(--accent-line); }
.hero h1 { margin-bottom: 1.3rem; }
.hero h1 .em, .hero h1 .italic { color: var(--accent); }
.hero__lead {
  font-size: clamp(1.08rem, 0.98rem + 0.6vw, 1.3rem); color: var(--ink-soft);
  max-width: 46ch; margin-bottom: 1.9rem; line-height: 1.5;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.hero__aside {
  margin-top: 2rem; padding-top: 1.1rem; border-top: 1px solid var(--line);
  font-size: 0.94rem; color: var(--ink-faint); max-width: 52ch; line-height: 1.55;
}
.hero__aside b { color: var(--ink-soft); font-weight: 650; }

/* Cover-Variante (Archive-Header) */
.cover { padding-block: clamp(2.6rem, 6vw, 4.5rem); border-bottom: 1px solid var(--line); }
.cover-meta {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; margin-bottom: 1.6rem;
  font-size: 0.82rem; color: var(--ink-faint); font-variant-numeric: tabular-nums;
}
.cover-meta span { display: inline-flex; align-items: center; gap: 0.5em; }
.cover-text { max-width: 58ch; margin-top: 1.5rem; display: grid; gap: 1.1rem; }

/* ==========================================================================
 * KONTROLLRAUM-MODUL  (.ctrl / .panel) — nur hier dunkel, gescoped
 * ========================================================================== */

.ctrl {
  --bg:          oklch(0.198 0.014 262);
  --surface:     oklch(0.234 0.016 262);
  --surface-2:   oklch(0.272 0.018 262);
  --ink:         oklch(0.958 0.006 255);
  --ink-soft:    oklch(0.760 0.012 258);
  --ink-faint:   oklch(0.660 0.012 260);
  --mute:        oklch(0.680 0.012 260);
  --line:        oklch(0.328 0.016 262);
  --line-strong: oklch(0.440 0.020 262);
  --accent:      oklch(0.660 0.170 262);
  --accent-deep: oklch(0.600 0.160 262);
  --accent-soft: oklch(0.320 0.070 262);
  --accent-line: oklch(0.700 0.140 262);
  --accent-ink:  oklch(0.145 0.02 262);
  --grid-line:   oklch(0.700 0.150 262 / 0.09);
  color: var(--ink);
}

.panel {
  position: relative; border: 1px solid var(--line-strong); border-radius: 12px;
  background:
    linear-gradient(var(--grid-line) 1px, transparent 1px) 0 0/100% 34px,
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) 0 0/34px 100%,
    var(--surface);
  box-shadow: var(--shadow); overflow: hidden;
}
.panel__bar {
  display: flex; align-items: center; gap: 0.6em; padding: 0.7rem 0.95rem;
  border-bottom: 1px solid var(--line);
  background: color-mix(in oklch, var(--surface) 70%, var(--bg));
  font-size: 0.74rem; color: var(--ink-soft); letter-spacing: 0; font-variant-numeric: tabular-nums;
}
.panel__body { padding: 1.05rem 1.1rem 1.2rem; }
.panel__lead { font-size: 0.88rem; color: var(--ink-soft); margin-bottom: 0.9rem; line-height: 1.5; max-width: 40ch; }
.metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem; }
.metric {
  border: 1px solid var(--line); border-radius: 8px; padding: 0.85rem;
  background: color-mix(in oklch, var(--bg) 45%, var(--surface));
  display: flex; flex-direction: column;
}
.metric__n { font-variant-numeric: tabular-nums; font-size: 1.7rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1; color: var(--ink); }
.metric__n .unit { font-size: 0.82rem; color: var(--accent); margin-left: 0.2em; font-weight: 600; }
.metric__l { font-size: 0.76rem; color: var(--ink-faint); margin-top: 0.4rem; line-height: 1.35; }
.panel__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 0.6em;
  margin-top: 0.9rem; padding-top: 0.8rem; border-top: 1px dashed var(--line-strong);
  font-size: 0.74rem; color: var(--ink-soft); letter-spacing: 0; font-variant-numeric: tabular-nums;
}
.panel__foot span { display: inline-flex; align-items: center; gap: 0.45em; }

.dot-live { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); position: relative; flex: none; display: inline-block; }
.dot-live::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 1.5px solid var(--accent); opacity: 0; animation: ping 2.6s var(--ease-out) infinite;
}
@keyframes ping { 0% { transform: scale(0.6); opacity: .6; } 80%, 100% { transform: scale(1.75); opacity: 0; } }

/* ==========================================================================
 * SECTIONS
 * ========================================================================== */

.section { padding-block: var(--section-y); }
.section.rule-t { border-top: 1px solid var(--line); }
.section-soft, .section--soft { background: var(--surface); }
.section__head, .section-head { max-width: 62ch; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section__head p, .section-head p { color: var(--ink-soft); margin-top: 1rem; font-size: 1.05rem; }

/* Kicker — ersetzt die §NN-Kapitelmarker: kleiner Blau-Label mit Tick. */
.kicker, .section-num {
  display: flex; align-items: center; gap: 0.7em; font-size: 0.8rem;
  color: var(--accent-deep); font-weight: 650; margin-bottom: 1.1rem;
  letter-spacing: 0.01em; text-transform: none;
}
.kicker .tick, .section-num::before {
  content: ""; width: 26px; height: 1px; background: var(--accent-line); flex: none;
}
.section-num strong { display: none; } /* alte §NN-Ziffern aus Bestands-Markup ausblenden */

/* ==========================================================================
 * WERKSTATT-LISTE  (Index-Zeilen, kein Karten-Höhen-Problem)
 * ========================================================================== */

.werkstatt-list { list-style: none; border-top: 1px solid var(--line); }
.werkstatt-list li { border-bottom: 1px solid var(--line); }
.werkstatt-list a {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: 0.7rem 1.2rem; padding: 1.15rem 0.25rem; transition: background var(--dur-base) ease, padding var(--dur-base) ease;
}
.werkstatt-list a:hover { background: var(--surface); padding-inline: 0.9rem; }
.werkstatt-tag {
  grid-row: 1; font-size: 0.72rem; font-weight: 650; letter-spacing: 0.02em;
  color: var(--ink-soft); border: 1px solid var(--line-strong); border-radius: 999px;
  padding: 0.25em 0.7em; white-space: nowrap; justify-self: start;
}
.werkstatt-tag.tag-eigen { color: var(--accent-deep); border-color: var(--accent-line); background: var(--accent-soft); }
.werkstatt-slug { grid-row: 2; grid-column: 1 / -1; order: 3; font-size: 0.78rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.werkstatt-title { font-size: 1.06rem; font-weight: 600; color: var(--ink); letter-spacing: -0.015em; }
.werkstatt-arrow { color: var(--accent); font-size: 1.15rem; transition: transform var(--dur-base) var(--ease-out); }
.werkstatt-list a:hover .werkstatt-arrow { transform: translateX(4px); }
.werkstatt-desc { grid-column: 1 / -1; order: 4; font-size: 0.92rem; line-height: 1.5; color: var(--ink-soft); max-width: 62ch; }
.werkstatt-group + .werkstatt-group { margin-top: clamp(3.5rem, 7vw, 5rem); }
@media (min-width: 680px) {
  .werkstatt-list a { grid-template-columns: 130px 1fr auto; }
  .werkstatt-slug { grid-row: 1; grid-column: auto; order: 0; text-align: right; }
  .werkstatt-title { grid-column: 2; }
  .werkstatt-desc { grid-column: 2; grid-row: 3; }
}

/* ==========================================================================
 * PROBLEM-GRID  (Front-Page: Werkstatt nach Problem) — GLEICH HOHE KARTEN
 * ========================================================================== */

.grid-work {
  display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line);
  border-radius: 12px; overflow: hidden; grid-template-columns: 1fr;
}
@media (min-width: 560px) { .grid-work { grid-template-columns: repeat(2, 1fr); } }
/* 4 Karten: 2x2 ab 560 px, keine Leerzelle */
.cell {
  background: var(--surface); padding: clamp(1.2rem, 2.2vw, 1.7rem);
  display: flex; flex-direction: column; gap: 0.5rem;   /* gleich hoch: Grid-Stretch + Flex-Column */
  transition: background var(--dur-base) ease; position: relative;
}
.cell:hover { background: var(--surface-2); }
.cell__ix { font-size: 0.72rem; color: var(--accent-deep); font-weight: 650; letter-spacing: 0.02em; }
.cell h3 { font-size: 1.12rem; }
.cell p { font-size: 0.92rem; color: var(--ink-soft); line-height: 1.5; max-width: 36ch; }
.cell__tag { margin-top: auto; padding-top: 0.6rem; font-size: 0.72rem; color: var(--ink-faint); letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.cell--feature { background: color-mix(in oklch, var(--accent-soft) 60%, var(--surface)); }
.cell--feature .cell__ix { color: var(--accent-deep); }
.cell--feature h3 span, .cell--feature h3 .em { color: var(--accent-deep); }

/* ==========================================================================
 * SPEC-TABLE  (Leistungen)
 * ========================================================================== */

.spec-table { width: 100%; border-collapse: collapse; }
.spec-table tr { border-top: 1px solid var(--line); }
.spec-table tr:last-child { border-bottom: 1px solid var(--line); }
.spec-table th {
  text-align: left; vertical-align: top; font-weight: 700; color: var(--ink);
  font-size: 1.02rem; padding: 1.1rem 1.5rem 1.1rem 0; width: 34%; letter-spacing: -0.015em;
}
.spec-table td { vertical-align: top; color: var(--ink-soft); font-size: 0.96rem; line-height: 1.55; padding: 1.1rem 0; }
@media (max-width: 620px) {
  .spec-table th, .spec-table td { display: block; width: 100%; padding-inline: 0; }
  .spec-table th { padding-bottom: 0.3rem; }
  .spec-table td { padding-top: 0; padding-bottom: 1.1rem; }
}

/* ==========================================================================
 * AUS EINER HAND  (.oneh / .moat)
 * ========================================================================== */

.oneh { background: var(--surface); }
.oneh h2 { max-width: 24ch; margin-bottom: 1.3rem; }
.oneh h2 .u, .oneh h2 .italic { color: var(--accent); }
.oneh__lead { max-width: 56ch; font-size: 1.08rem; color: var(--ink-soft); line-height: 1.6; }
.oneh__split { display: grid; gap: 1.6rem; margin-top: 2.6rem; grid-template-columns: 1fr; align-items: stretch; }
@media (min-width: 760px) { .oneh__split { grid-template-columns: repeat(3, 1fr); gap: clamp(1.4rem, 3vw, 2.4rem); } }
.moat { border-top: 2px solid var(--accent); padding-top: 1rem; display: flex; flex-direction: column; }
.moat__n { font-size: 0.76rem; color: var(--accent-deep); font-weight: 700; margin-bottom: 0.5rem; font-variant-numeric: tabular-nums; }
.moat h3 { font-size: 1.06rem; margin-bottom: 0.4rem; }
.moat p { font-size: 0.93rem; color: var(--ink-soft); line-height: 1.55; max-width: 40ch; }

/* ==========================================================================
 * BELEGE  (Proofs)
 * ========================================================================== */

.subgrid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); grid-template-columns: 1fr; }
@media (min-width: 860px) { .subgrid { grid-template-columns: 0.9fr 1.1fr; } }
.proofs { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 1.3rem; }
.proof {
  font-size: 0.86rem; letter-spacing: 0; padding: 0.5em 0.85em; border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); background: var(--surface); color: var(--ink-soft);
  display: inline-flex; align-items: center; gap: 0.5em;
}
.proof .d { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex: none; }
.honesty { border-left: 2px solid var(--accent); padding-left: 1.4rem; }
.honesty p { font-size: 1.1rem; line-height: 1.6; color: var(--ink); max-width: 52ch; }
.honesty p + p { margin-top: 1rem; color: var(--ink-soft); font-size: 1rem; }
.honesty b { color: var(--ink); font-weight: 680; }

/* ==========================================================================
 * CONTACT / ANFRAGE-FORM
 * ========================================================================== */

.contact__card {
  border: 1px solid var(--line-strong); border-radius: 14px; background: var(--bg);
  box-shadow: var(--shadow); overflow: hidden; display: grid; grid-template-columns: 1fr;
}
@media (min-width: 820px) { .contact__card { grid-template-columns: 0.85fr 1.15fr; } }
.contact__side {
  padding: clamp(1.6rem, 3vw, 2.4rem); border-bottom: 1px solid var(--line);
  background:
    linear-gradient(var(--grid-line) 1px, transparent 1px) 0 0/34px 34px,
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) 0 0/34px 34px,
    var(--surface);
}
@media (min-width: 820px) { .contact__side { border-bottom: 0; border-right: 1px solid var(--line); } }
.contact__side h3 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem); margin-bottom: 0.9rem; }
.contact__side p { font-size: 0.98rem; color: var(--ink-soft); max-width: 34ch; }
.contact__select { margin-top: 1.5rem; font-size: 0.9rem; color: var(--ink-soft); max-width: 34ch; line-height: 1.55; }
.contact__meta { margin-top: 1.5rem; font-size: 0.9rem; color: var(--ink-faint); line-height: 1.9; font-variant-numeric: tabular-nums; }
.contact__meta b { color: var(--ink-soft); font-weight: 650; }
.contact__meta a { color: var(--accent-deep); }
.contact__meta a:hover { text-decoration: underline; }

.form { padding: clamp(1.6rem, 3vw, 2.4rem); display: grid; gap: 1rem; }
.form label { display: block; font-size: 0.84rem; color: var(--ink-soft); margin-bottom: 0.4rem; font-weight: 550; }
.form .f2 { display: grid; gap: 1rem; }
@media (min-width: 520px) { .form .f2 { grid-template-columns: 1fr 1fr; } }
.form input, .form textarea {
  width: 100%; font-family: var(--font-sans); font-size: 0.98rem; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: 8px;
  padding: 0.72rem 0.9rem; transition: border-color var(--dur-base) ease, box-shadow var(--dur-base) ease;
}
.form input:focus, .form textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.form textarea { resize: vertical; min-height: 96px; line-height: 1.5; }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; justify-content: space-between; }
.form__note { font-size: 0.82rem; color: var(--ink-faint); max-width: 36ch; }
/* KI-Check-Formular (inc/ki-check-form.php): Einwilligung inline, Datenschutzhinweis klein */
.form .field--consent label { display: flex; align-items: flex-start; gap: 0.6em; font-weight: 400; color: var(--ink); }
.form .field--consent input { width: auto; flex: none; margin-top: 0.2em; padding: 0; accent-color: var(--accent); }
.form__privacy { font-size: 0.82rem; line-height: 1.5; color: var(--ink-faint); margin: 0; }
.form__privacy a { color: inherit; text-decoration: underline; }
/* Honeypot — visuell + für Screenreader versteckt, aber im DOM */
.hp-field { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__ok {
  margin: 0 0 1.2rem; padding: 0.9rem 1.1rem; border: 1px solid var(--accent-line);
  border-radius: 8px; background: var(--accent-soft); color: var(--accent-deep);
  font-weight: 600; display: flex; align-items: center; gap: 0.6em;
}
.form__ok svg { width: 20px; height: 20px; flex: none; }
.form__err {
  margin: 0 0 1.2rem; padding: 0.9rem 1.1rem; border: 1px solid var(--line-strong);
  border-radius: 8px; background: var(--surface); color: var(--ink); font-weight: 550;
}

/* Kontakt-Block im Footer-Bereich (Bestand) */
.contact-block { padding-block: var(--section-y); border-top: 1px solid var(--line); background: var(--surface); }
.contact-block h2 { max-width: 24ch; margin-bottom: 2rem; }
.contact-data { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 2rem; max-width: 520px; }
.contact-data dt { font-size: 0.82rem; color: var(--ink-faint); font-weight: 550; }
.contact-data dd { color: var(--ink); }
.contact-data a { color: var(--accent-deep); }
.contact-data a:hover { text-decoration: underline; }

/* ==========================================================================
 * EINBLICK / BILD-SLOTS
 *  Platzhalter-Bilder werden NICHT gezeigt, bis echte Aufnahmen da sind.
 * ========================================================================== */

.slotband { display: grid; gap: 1.1rem; grid-template-columns: 1fr; align-items: stretch; }
@media (min-width: 760px) { .slotband { grid-template-columns: 1.3fr 0.7fr; } }
.slot {
  position: relative; border: 1px solid var(--line-strong); border-radius: 12px; overflow: hidden;
  min-height: 240px; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.15rem;
}
.slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slot__badge {
  position: absolute; top: 0.95rem; left: 0.95rem; font-size: 0.72rem; font-weight: 700;
  color: var(--accent-deep); background: var(--accent-soft); border: 1px solid var(--accent-line);
  padding: 0.32em 0.65em; border-radius: 6px; z-index: 2;
}
.slot__cap { position: relative; z-index: 2; font-size: 0.92rem; color: var(--ink-soft); max-width: 44ch; line-height: 1.5; }
.slot__cap b { color: var(--ink); }

/* ==========================================================================
 * ENTRY  (single-werkstatt, pillar, page, single-post)
 * ========================================================================== */

.entry-header { padding-block: clamp(2.6rem, 6vw, 4.2rem) clamp(1.6rem, 3vw, 2.4rem); border-bottom: 1px solid var(--line); }
.entry-meta {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; margin-bottom: 1.3rem;
  font-size: 0.8rem; color: var(--ink-faint); font-variant-numeric: tabular-nums;
}
.entry-meta span { display: inline-flex; align-items: center; }
.entry-meta span + span::before { content: "·"; margin-right: 1.2rem; margin-left: -0.75rem; color: var(--line-strong); }
.entry-title { font-size: clamp(2rem, 1.2rem + 3vw, 3.2rem); font-weight: 750; letter-spacing: -0.03em; }
.entry-title .italic { color: var(--accent); }
/* Beitragsbild im Kopf rechts (wie rundum.dog): feste Höhe, Breite folgt dem Bild, nie Zuschnitt.
   Quadrat 300×300, Querformat wird über die Breite gedeckelt und dafür niedriger. */
.entry-hero { margin: 1.8rem 0 0; }
.entry-hero img {
  display: block; width: auto; height: auto; max-width: 100%; max-height: 240px;
  border: 1px solid var(--line); border-radius: 12px;
}
@media (min-width: 900px) {
  .entry-header__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(2rem, 4vw, 3.5rem); }
  .entry-header__grid .entry-hero { margin: 0; }
  .entry-header__grid .entry-hero img { max-height: 300px; max-width: min(460px, 36vw); }
}

.entry-body { padding-block: clamp(2.4rem, 5vw, 4rem); }
.entry-body .container { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 900px) { .entry-body .container.has-toc { grid-template-columns: 220px minmax(0, 1fr); } }

.entry-toc { align-self: start; }
@media (min-width: 900px) { .entry-toc { position: sticky; top: 88px; } }
.entry-toc ol { list-style: none; display: grid; gap: 0.15rem; }
.entry-toc li { font-size: 0.88rem; }
.entry-toc a { display: block; padding: 0.35rem 0 0.35rem 0.8rem; color: var(--ink-soft); border-left: 2px solid var(--line); transition: color var(--dur-base) ease, border-color var(--dur-base) ease; }
.entry-toc a:hover, .entry-toc a.is-active { color: var(--accent-deep); border-color: var(--accent); }
.entry-toc strong { color: var(--accent-deep); font-variant-numeric: tabular-nums; margin-right: 0.5em; font-weight: 700; }

/* Prose */
.entry-content, .page-prose, .entry-body main {
  font-size: 1.05rem; line-height: 1.68; color: var(--ink-soft); max-width: 72ch;
}
.entry-content > *, .page-prose > *, .entry-body main > * { margin-bottom: 1.1rem; }
.entry-content h2, .page-prose h2, .entry-body main h2 { color: var(--ink); font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem); margin-top: 2.6rem; margin-bottom: 0.9rem; scroll-margin-top: 88px; }
.entry-content h3, .page-prose h3, .entry-body main h3 { color: var(--ink); margin-top: 1.8rem; margin-bottom: 0.6rem; scroll-margin-top: 88px; }
.entry-content p, .page-prose p, .entry-body main p { max-width: 72ch; }
.entry-content a, .page-prose a, .entry-body main a { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.entry-content a:hover, .page-prose a:hover, .entry-body main a:hover { text-decoration-thickness: 2px; }
.entry-content ul, .entry-content ol, .page-prose ul, .page-prose ol { padding-left: 1.3rem; }
.entry-content li, .page-prose li { margin-bottom: 0.4rem; }
.entry-content blockquote, .page-prose blockquote { border-left: 2px solid var(--accent); padding-left: 1.2rem; color: var(--ink); font-size: 1.1rem; }
.entry-content img, .page-prose img { border-radius: 8px; border: 1px solid var(--line); }
.entry-content table, .page-prose table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.entry-content th, .entry-content td, .page-prose th, .page-prose td { text-align: left; vertical-align: top; padding: 0.7rem 0.9rem; border: 1px solid var(--line); }
.entry-content th, .page-prose th { background: var(--surface); font-weight: 650; color: var(--ink); }
/* Tabellen im Section-Layout (ohne .spec-table): gleiche Grundform wie .entry-content, auf dem Handy gestapelt */
.entry-section table:not(.spec-table) { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.entry-section table:not(.spec-table) th, .entry-section table:not(.spec-table) td { text-align: left; vertical-align: top; padding: 0.7rem 0.9rem; border: 1px solid var(--line); }
.entry-section table:not(.spec-table) th { background: var(--surface); font-weight: 650; color: var(--ink); }
@media (max-width: 620px) {
  .entry-section table:not(.spec-table) { border-top: 1px solid var(--line); }
  .entry-section table:not(.spec-table) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .entry-section table:not(.spec-table) tr { display: block; border-bottom: 1px solid var(--line); padding: 0.8rem 0; }
  .entry-section table:not(.spec-table) td { display: block; width: 100%; border: 0; padding: 0.15rem 0; }
  .entry-section table:not(.spec-table) td:last-child { font-weight: 650; color: var(--ink); }
}
/* lange Befehlszeilen brechen um, statt die Spalte auf dem Handy zu sprengen */
.entry-content pre, .page-prose pre { white-space: pre-wrap; overflow-wrap: anywhere; }
/* ausgerichtete Schemata (.code-block) behalten ihre Spalten und rollen im Block */
.entry-content pre.code-block, .page-prose pre.code-block { white-space: pre; overflow-wrap: normal; overflow-x: auto; }

/* ==========================================================================
 * BLOG  (post single)
 * ========================================================================== */

.post-cta-band { background: var(--surface); border-top: 1px solid var(--line); padding-block: var(--section-y); }
.post-cta-band .cta-grid { display: grid; gap: 2.4rem; grid-template-columns: 1fr; }
@media (min-width: 820px) { .post-cta-band .cta-grid { grid-template-columns: 1.1fr 0.9fr; } }
.rd-hint { border-left: 2px solid var(--accent); padding-left: 1.3rem; }
.rd-hint .kicker { margin-bottom: 0.6rem; }
.related-list { list-style: none; border-top: 1px solid var(--line); }
.related-list li { border-bottom: 1px solid var(--line); }
.related-list a { display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: baseline; padding: 1rem 0.25rem; color: var(--ink); transition: padding var(--dur-base) ease; }
.related-list a:hover { padding-inline: 0.7rem; background: var(--bg); }
.related-list .r-date { font-size: 0.78rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.related-list .r-title { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.015em; }

/* ==========================================================================
 * FOOTER
 * ========================================================================== */

.site-footer { border-top: 1px solid var(--line); background: var(--bg); padding-top: clamp(2.6rem, 5vw, 4rem); }
.site-footer > .container:first-child {
  display: grid; grid-template-columns: 1fr; gap: 2rem;
  padding-bottom: 2.4rem;
}
@media (min-width: 620px) { .site-footer > .container:first-child { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2.5rem; } }
.footer-col h3 { font-size: 0.82rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 1rem; }
.footer-col p { color: var(--ink-soft); }
.footer-col ul { list-style: none; display: grid; gap: 0.55rem; }
.footer-col a { color: var(--ink-soft); font-size: 0.94rem; transition: color var(--dur-base) ease; }
.footer-col a:hover { color: var(--accent-deep); }
/* Cookie-Einstellungen: Aktion, kein Ziel → <button>, sieht aus wie die Links daneben */
.footer-link-btn { background: none; border: 0; padding: 0; font: inherit; font-size: 0.94rem; color: var(--ink-soft); cursor: pointer; text-align: left; transition: color var(--dur-base) ease; }
.footer-link-btn:hover { color: var(--accent-deep); }
.footer-bottom {
  display: flex; flex-wrap: wrap; gap: 0.6rem 2rem; align-items: center; justify-content: space-between;
  padding-block: 1.5rem; border-top: 1px solid var(--line); font-size: 0.82rem; color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.footer-paws { display: inline-flex; align-items: center; gap: 0.4em; }
.footer-paws .paw-name { color: var(--ink-soft); font-weight: 600; }
.footer-paws .paw-lead::before { content: "🐾"; }

/* ==========================================================================
 * COOKIE-CONSENT (eigener Banner seit 2026-10-25, Logik in header.php)
 * ========================================================================== */

.consent[hidden] { display: none; }
.consent {
  position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 80;
  max-width: 30rem; padding: 1.1rem 1.2rem 1.2rem;
  background: var(--bg); color: var(--ink); border: 1px solid var(--line-strong); border-radius: 10px;
  box-shadow: 0 10px 30px oklch(0.235 0.012 262 / 0.14);
}
.consent__title { font-weight: 700; margin-bottom: 0.35rem; }
.consent__text { font-size: 0.92rem; line-height: 1.5; color: var(--ink-soft); }
.consent__text a { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 0.15em; }
.consent__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-top: 0.9rem; }
/* Beide Knöpfe gleich gewichtet: Ablehnen so leicht wie Annehmen */
.consent__btn {
  font: inherit; font-weight: 600; font-size: 0.94rem; padding: 0.65em 1em; min-height: 44px;
  background: var(--bg); color: var(--accent-deep); border: 2px solid var(--accent-deep); border-radius: 8px; cursor: pointer;
  transition: background var(--dur-base) ease, color var(--dur-base) ease;
}
.consent__btn:hover { background: var(--accent-deep); color: var(--accent-ink); }
.consent__btn:focus-visible { outline: 3px solid var(--accent-deep); outline-offset: 2px; }
@media (min-width: 620px) { .consent { left: 1.4rem; right: auto; bottom: 1.4rem; } }

/* ==========================================================================
 * SCROLL-TOP
 * ========================================================================== */

.scroll-top {
  position: fixed; right: 1.4rem; bottom: 1.4rem; z-index: 60;
  width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-strong); border-radius: 50%; background: var(--bg); color: var(--ink);
  cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(8px); box-shadow: var(--shadow);
  transition: opacity var(--dur-base) ease, transform var(--dur-base) var(--ease-out), visibility var(--dur-base);
}
.scroll-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.scroll-top:hover { border-color: var(--accent); color: var(--accent-deep); }

/* ==========================================================================
 * REVEAL ON SCROLL  (nur transform/opacity, reduced-motion-safe)
 * ========================================================================== */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal { animation: revUp both; animation-timeline: view(); animation-range: entry 3% entry 30%; }
    @keyframes revUp { from { opacity: 0; transform: translateY(14px); } }
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0s !important; }
  .dot-live::after { animation: none; }
}

/* ==========================================================================
 * ============  ANHANG 2026-07-16 · Voll-Breite Overview + Leistungen  ======
 *
 * Zweck (Roger-Auftrag):
 *  A) Werkstatt-Archiv nutzt jetzt das entry-header-Muster wie alle Seiten
 *     (kein Sonder-.cover mehr) — Titel-/Lede-Konsistenz systemweit.
 *  B) /kontakt/-Inhalt laeuft voll-breit (entry-sections statt schmaler prose).
 *  C) /leistungen/ Redesign: .lst-svc (4 Schwerpunkte), .lst-flow (6 Schritte),
 *     Belege reusen .subgrid/.honesty/.proofs/.panel.ctrl, .lst-cta Abschluss.
 *  D) .entry-sections/.hub-grid: generische page.php-Uebersichtsseiten voll-breit.
 *
 * Erbt alle Tokens (Farben/Fonts/Masse) von oben. Nur transform/opacity in
 * Bewegung; reduced-motion greift ueber den globalen Block. Ein Akzent (CI-Blau),
 * ein Radius-System (--radius), ein Theme.
 * ========================================================================== */

/* --- D - Voll-breite Uebersichts-Sektionen (wissen, kontakt-Inhalt, page.php) --- */
.entry-sections { display: grid; gap: clamp(2.4rem, 5vw, 3.6rem); }
.entry-sections > .entry-section { max-width: 100%; }
/* Bestands-Prosa-Regel `.entry-body main { max-width:72ch }` kappt sonst den
 * voll-breiten Wrapper auf ~800px. Hoehere Spezifitaet hebt das gezielt auf. */
.entry-body main.entry-sections { max-width: none; width: 100%; }

/* Mehrspalten-Variante (/kontakt/): Intro spannt voll, die Info-Bloecke
 * balancieren ueber zwei Spalten und nutzen die ganze Container-Breite.
 * Multicol statt Grid, damit ungleich hohe Bloecke sauber fliessen. */
.entry-sections--cols { display: block; }
.entry-sections--cols > * { margin-bottom: clamp(2rem, 4vw, 3rem); }
.entry-sections--cols > *:last-child { margin-bottom: 0; }
@media (min-width: 760px) {
  .entry-sections--cols { column-count: 2; column-gap: clamp(1.8rem, 3.5vw, 3rem); }
  .entry-sections--cols > .entry-section { break-inside: avoid; }
  .entry-sections--cols > .entry-section:first-child { column-span: all; }
}
/* Alle Sektions-Regeln auf .entry-sections gescoped: index.php/search.php nutzen
 * die Klasse .entry-section solo fuer den "Keine Beitraege"-Fallback — die darf
 * von diesem Anhang nichts erben (Carla-Finding 2026-07-16). */
.entry-sections .entry-section > h2 {
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem); margin-bottom: 0.8rem;
  max-width: 26ch; color: var(--ink); scroll-margin-top: 88px;
}
.entry-sections .entry-section > p { max-width: 68ch; color: var(--ink-soft); font-size: 1.05rem; line-height: 1.65; }
.entry-sections .entry-section > p + p { margin-top: 1rem; }
.entry-sections .entry-section a { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.entry-sections .entry-section a:hover { text-decoration-thickness: 2px; }
/* .btn im Fliesstext: die Link-Regeln (Z. 596, oben) faerben sonst die Schrift -deep auf -deep (2026-10-25). */
.entry-content a.btn:not(.btn--ghost), .page-prose a.btn:not(.btn--ghost), .entry-body main a.btn:not(.btn--ghost),
.entry-sections .entry-section a.btn:not(.btn--ghost) { color: var(--accent-ink); text-decoration: none; }
.entry-sections .entry-section .section-num { margin-bottom: 0.9rem; }
/* Blaues Label leitet den folgenden H2 ein: eng darueber, Luft nach oben zum
 * vorigen Abschnitt — sonst liest es sich als Nachsatz des vorigen (Roger 25.10.). */
.entry-sections .entry-section > .section-num, .entry-content > .entry-section > .section-num { margin-bottom: 0.45rem; }
.entry-section > .section-num + h2 { margin-top: 0; }
.entry-content > .entry-section:not(:first-child) > .section-num:first-child { margin-top: 3rem; }
.hub-grid .hub-card > .section-num { margin-bottom: 0.1rem; }
.entry-sections .entry-section h3 { margin: 1.4rem 0 0.5rem; }
/* FAQ-Paare h4/p (z. B. #ki-website-check): Abstand zwischen den Fragen (Roger 25.10.) */
.entry-sections .entry-section h4, .entry-content .entry-section h4 { margin: 1.6rem 0 0.35rem; }
.entry-sections .entry-section h3 + h4, .entry-content .entry-section h3 + h4 { margin-top: 0.9rem; }

/* Intro-/Abschluss-Lead einer Uebersicht - groesser, Lesemass */
.entry-sections .entry-section--lead > p { max-width: 62ch; font-size: clamp(1.12rem, 1rem + 0.7vw, 1.34rem); line-height: 1.5; color: var(--ink-soft); }

/* Listen in Sektionen:
 *  - reine Text-Liste  -> normale Bullets (Lesbarkeit)
 *  - Link-Liste (Branchen o. Ae.)  -> Chip-Reihe statt nackter ul (Detektor #60) */
.entry-sections .entry-section ul { padding-left: 1.3rem; margin-top: 0.6rem; display: grid; gap: 0.4rem; max-width: 68ch; }
.entry-sections .entry-section li { color: var(--ink-soft); line-height: 1.55; }
.entry-sections .entry-section ul:has(li a) { list-style: none; padding-left: 0; display: flex; flex-wrap: wrap; gap: 0.55rem; max-width: none; }
.entry-sections .entry-section ul:has(li a) a {
  display: inline-flex; align-items: center; text-decoration: none; font-size: 0.9rem;
  padding: 0.42em 0.9em; border: 1px solid var(--line-strong); border-radius: 999px;
  color: var(--ink-soft); background: var(--surface);
  transition: border-color var(--dur-base) ease, color var(--dur-base) ease, background var(--dur-base) ease;
}
.entry-sections .entry-section ul:has(li a) a:hover { border-color: var(--accent-line); color: var(--accent-deep); background: var(--bg); text-decoration: none; }

/* --- D - Wissen-Hub: Pillar-Teaser als Karten-Grid (Card Play) --- */
.hub-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; align-items: stretch; }
@media (min-width: 600px) { .hub-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .hub-grid { grid-template-columns: repeat(3, 1fr); } }
.hub-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.3rem, 2.4vw, 1.7rem); display: flex; flex-direction: column; gap: 0.55rem;
  transition: border-color var(--dur-base) ease, background var(--dur-base) ease, transform var(--dur-base) var(--ease-out);
}
.hub-card:hover { border-color: var(--accent-line); background: var(--bg); transform: translateY(-3px); }
.hub-card .section-num { margin-bottom: 0.1rem; }
/* Teaser-Headline: bewusst klein (Karte, kein Hero). Hoehere Spezifitaet als
 * globales h2 / .entry-section > h2, damit kein 32px-Ein-Wort-Stapel entsteht. */
.hub-grid .hub-card h2 { font-size: 1.14rem; line-height: 1.25; letter-spacing: -0.018em; max-width: none; margin-top: 0; margin-bottom: 0.1rem; }
.hub-card p { font-size: 0.94rem; color: var(--ink-soft); line-height: 1.58; max-width: none; }
.hub-card__more { margin-top: auto; padding-top: 0.6rem; }
.hub-card__more a { font-size: 0.9rem; font-weight: 600; color: var(--accent-deep); text-decoration: none; display: inline-flex; align-items: center; gap: 0.4em; }
.hub-card__more a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* --- C - Leistungen: 4 Schwerpunkte (2x2, Flaggschiff hervorgehoben) --- */
.lst-svc {
  display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line);
  border-radius: 14px; overflow: hidden; grid-template-columns: 1fr; align-items: stretch;
}
@media (min-width: 720px) { .lst-svc { grid-template-columns: repeat(2, 1fr); } }
.lst-card {
  background: var(--surface); padding: clamp(1.5rem, 3vw, 2.2rem);
  display: flex; flex-direction: column; gap: 0.65rem; position: relative;
  transition: background var(--dur-base) ease;
}
.lst-card:hover { background: var(--surface-2); }
.lst-card__ix { font-size: 0.76rem; font-weight: 650; color: var(--accent-deep); letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.lst-card h3 { font-size: clamp(1.15rem, 1rem + 0.6vw, 1.4rem); }
.lst-card p { font-size: 0.96rem; color: var(--ink-soft); line-height: 1.58; max-width: 44ch; }
.lst-card__more { margin-top: auto; padding-top: 0.7rem; font-size: 0.9rem; font-weight: 600; }
.lst-card__more a { color: var(--accent-deep); display: inline-flex; align-items: center; gap: 0.4em; text-decoration: none; }
.lst-card__more a:hover { text-decoration: underline; text-underline-offset: 2px; }
.lst-card__sub a { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.lst-card__sub a:hover { text-decoration-thickness: 2px; }
.lst-card__more .arw { transition: transform var(--dur-base) var(--ease-out); }
.lst-card__more a:hover .arw { transform: translateX(4px); }
.lst-card--flag { background: color-mix(in oklch, var(--accent-soft) 55%, var(--surface)); }
.lst-card--flag:hover { background: color-mix(in oklch, var(--accent-soft) 72%, var(--surface)); }
.lst-card--flag .lst-card__ix { color: var(--accent-deep); }
.lst-card--flag h3 .em { color: var(--accent-deep); }
.lst-card__flag {
  align-self: flex-start; margin-bottom: 0.1rem; font-size: 0.72rem; font-weight: 650;
  letter-spacing: 0.02em; color: var(--accent-deep); background: var(--accent-soft);
  border: 1px solid var(--accent-line); border-radius: 999px; padding: 0.28em 0.75em;
}

/* --- C - Leistungen: Arbeitsprozess 6 Schritte --- */
.lst-flow {
  display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line);
  border-radius: 14px; overflow: hidden; grid-template-columns: 1fr; align-items: stretch;
}
@media (min-width: 560px) { .lst-flow { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 920px) { .lst-flow { grid-template-columns: repeat(3, 1fr); } }
.lst-step { background: var(--surface); padding: clamp(1.35rem, 2.6vw, 1.75rem); display: flex; flex-direction: column; gap: 0.45rem; }
.lst-step__n { font-size: 1.7rem; font-weight: 750; color: var(--accent); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1; }
.lst-step h3 { font-size: 1.08rem; margin-top: 0.15rem; }
.lst-step p { font-size: 0.92rem; color: var(--ink-soft); line-height: 1.55; max-width: 42ch; }

/* --- C - Leistungen: Abschluss-CTA --- */
.lst-cta__in { display: grid; gap: 1.5rem; }
@media (min-width: 760px) { .lst-cta__in { grid-template-columns: 1.25fr 0.75fr; align-items: center; } }
.lst-cta h2 { max-width: 22ch; margin-bottom: 0; }
.lst-cta__lead { color: var(--ink-soft); margin-top: 0.9rem; max-width: 50ch; font-size: 1.05rem; line-height: 1.6; }
.lst-cta__act { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
@media (min-width: 760px) { .lst-cta__act { justify-content: flex-end; } }

/* ==========================================================================
 * Relaunch P3/P4 (25.10.2026): Telefonzeile Hero, Zellen-Links, Preisblock.
 * ========================================================================== */
.hero__phone { margin-top: 0.9rem; color: var(--ink-soft); font-size: 1rem; }
.hero__phone a, .section__head p a { color: var(--accent-deep); font-weight: 650; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; white-space: nowrap; }
.hero__phone a:hover, .section__head p a:hover { text-decoration-thickness: 2px; }
/* Ganze Zelle klickbar ueber ::after; Fokus sichtbar am Titel */
.cell__link { color: inherit; text-decoration: none; }
.cell__link::after { content: ""; position: absolute; inset: 0; }
.cell__link:hover, .cell__link:focus-visible { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 3px; }
.cell__link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
.prices {
  display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line);
  border-radius: 12px; overflow: hidden; grid-template-columns: 1fr;
}
@media (min-width: 560px) { .prices { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .prices { grid-template-columns: repeat(4, 1fr); } }
.price { background: var(--surface); padding: clamp(1.2rem, 2.2vw, 1.7rem); display: flex; flex-direction: column; gap: 0.5rem; position: relative; }
.price h3 { font-size: 1.05rem; margin: 0; }
.price__n { font-size: clamp(1.5rem, 1.2rem + 1vw, 1.9rem); font-weight: 700; color: var(--ink); letter-spacing: -0.01em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.price__n span { font-size: 0.95rem; font-weight: 500; color: var(--ink-soft); letter-spacing: 0; }
.price > p:last-child { color: var(--ink-soft); font-size: 0.98rem; line-height: 1.55; }
.prices__cta { margin-top: 1.4rem; }
.prices__note { margin-top: 1.2rem; max-width: 68ch; color: var(--ink-soft); font-size: 1rem; line-height: 1.6; }

/* Leistungen: Ab-Preis je Schwerpunkt (P4, 25.10.2026) */
.lst-card .lst-card__price { margin-top: .75rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); font-size: .95rem; }