/* ================================================================
   PFISTERER CONSULTING — Relaunch 2026
   Richtung: Referenz-verankerte Konvention (hell, ein Arbeitsblau,
   1px-Linien, Mono nur für Zahlen/Quellen). Gilt nur für Seiten,
   die relaunch.css laden (Homepage); Bestandsseiten nutzen main.css.
   ================================================================ */

/* ---------------------------------------------------------------
   FONTS — self-hosted (DSGVO), identische Dateien wie main.css
   --------------------------------------------------------------- */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/fonts/sora-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/fonts/sora-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------------------------------------------------------------
   TOKENS
   --------------------------------------------------------------- */
:root {
  --bg: #ffffff;
  --ink: #111820;
  --sub: #48545f;
  --muted: #5c6874;
  --line: #e3e7ec;
  --line-strong: #ccd3db;
  --line-input: #8a95a1; /* nur Rahmen interaktiver Elemente; 3,05:1 auf Weiß */
  --soft: #f5f7fa;
  --acc: #1a4fc4;
  --acc-dark: #143da0;
  --acc-tint: #eef3fc;
  --warn-ink: #7a5804;
  --warn-bg: #fdf1cc;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: 'Sora', 'Inter', system-ui, sans-serif;
  --mono: ui-monospace, 'Cascadia Mono', Consolas, 'Liberation Mono', Menlo, monospace;
  --shadow-card: 0 6px 20px rgba(17, 24, 32, 0.07);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --header-h: 64px;
}

/* ---------------------------------------------------------------
   BASE
   --------------------------------------------------------------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--acc); color: #fff; }

:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
  border-radius: 2px;
}

a { color: var(--acc); text-decoration: none; }

p a, li a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(26, 79, 196, 0.4);
}
p a:hover, li a:hover { text-decoration-color: var(--acc); }

img { max-width: 100%; display: block; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 28px; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: #fff;
  padding: 10px 16px;
  z-index: 200;
}
.skip-link:focus { left: 12px; top: 12px; }

/* Nur fuer Screenreader: Trenner in zusammengesetzten Link-Namen */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Typo-Hierarchie */
h1, h2, h3 { font-family: var(--display); color: var(--ink); }

h1 {
  font-size: clamp(2.125rem, 4.6vw, 3.625rem);
  line-height: 1.07;
  letter-spacing: -0.02em;
  font-weight: 700;
  max-width: 21ch;
  text-wrap: balance;
}

h2 {
  font-size: clamp(1.625rem, 2.6vw, 1.875rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  font-weight: 700;
  max-width: 30ch;
  text-wrap: balance;
}

h3 { font-size: 1.1875rem; font-weight: 600; letter-spacing: -0.01em; }

/* Zahlen, Daten, Quellzeilen: Mono mit Tabellenziffern */
.num, .src, .tag, .soon, .date {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------
   BUTTONS
   --------------------------------------------------------------- */
.btn {
  display: inline-block;
  background: var(--acc);
  color: #fff;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.35;
  padding: 11px 20px;
  border: 1.5px solid var(--acc);
  border-radius: 6px;
  text-decoration: none;
  cursor: pointer;
  transition: background 160ms var(--ease-out), border-color 160ms var(--ease-out), color 160ms var(--ease-out);
}
.btn:hover { background: var(--acc-dark); border-color: var(--acc-dark); }

.btn.ghost { background: transparent; color: var(--acc); }
.btn.ghost:hover { background: var(--acc-tint); color: var(--acc-dark); }

.btn.sm { font-size: 14px; padding: 8px 15px; }

/* Header-CTA: Langfassung auf Desktop, Kurzfassung unter 1025px */
.header-cta .cta-short { display: none; }

.btn.inverse { background: #fff; color: var(--acc); border-color: #fff; }
.btn.inverse:hover { background: var(--acc-tint); border-color: var(--acc-tint); }

.btn.inverse-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.65); }
.btn.inverse-ghost:hover { border-color: #fff; background: rgba(255, 255, 255, 0.1); }

/* ---------------------------------------------------------------
   HEADER
   --------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow 200ms var(--ease-out);
}
.site-header.is-scrolled { box-shadow: 0 4px 18px rgba(17, 24, 32, 0.06); }

.nav-row {
  display: flex;
  align-items: center;
  gap: 6px;
  height: var(--header-h);
}

.logo {
  font-family: var(--display);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-right: auto;
  white-space: nowrap;
}
.logo:hover { color: var(--acc); }

.main-nav { display: flex; align-items: center; gap: 2px; }

.nav-link {
  display: inline-block;
  font-size: 14.5px;
  font-weight: 550;
  color: var(--ink);
  /* 10px statt 12px: die Zeile traegt seit "Loesungen" sechs Punkte */
  padding: 8px 10px;
  border-radius: 6px;
  white-space: nowrap;
}
.nav-link:hover { color: var(--acc); background: var(--soft); }

/* Leistungen-Dropdown (einziges Untermenü, flach wie aurebus) */
.nav-item { position: relative; }

.nav-sub-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 550;
  color: var(--ink);
  background: none;
  border: 0;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
}
.nav-sub-toggle::after {
  content: '';
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 160ms var(--ease-out);
}
.nav-item:hover .nav-sub-toggle,
.nav-sub-toggle:hover,
.nav-item.is-open .nav-sub-toggle { color: var(--acc); background: var(--soft); }
.nav-item.is-open .nav-sub-toggle::after { transform: rotate(225deg) translateY(-2px); }

.submenu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 340px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow-card);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out), visibility 0s linear 180ms;
}
.nav-item:hover .submenu,
.nav-item:focus-within .submenu,
.nav-item.is-open .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out);
}

.submenu a {
  display: block;
  padding: 10px 12px;
  border-radius: 6px;
  color: var(--ink);
}
.submenu a:hover { background: var(--soft); }
.submenu a b { display: block; font-size: 14.5px; font-weight: 650; }
.submenu a span { display: block; font-size: 13px; color: var(--sub); margin-top: 1px; }
.submenu a:hover b { color: var(--acc); }
.submenu .submenu-all {
  border-top: 1px solid var(--line);
  margin-top: 6px;
  padding-top: 10px;
}
.submenu .submenu-all b { color: var(--acc); font-weight: 600; }

.header-actions { display: flex; align-items: center; gap: 10px; margin-left: 10px; }

.lang-switch { display: flex; align-items: center; gap: 2px; }
.lang-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  padding: 6px 8px;
  border-radius: 6px;
}
.lang-link:hover { color: var(--acc); background: var(--soft); }

/* Mobile-Navigation */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 10px;
  background: none;
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
}
.nav-toggle-bar {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 200ms var(--ease-out), opacity 200ms var(--ease-out);
}
.nav-toggle.is-open .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle.is-open .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav {
  display: none;
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99;
  background: var(--bg);
  overflow-y: auto;
  padding: 20px 28px 40px;
}
.mobile-nav.is-open { display: block; }

.mobile-nav .m-group { border-bottom: 1px solid var(--line); padding: 14px 0; }
.mobile-nav .m-link {
  display: block;
  font-family: var(--display);
  font-size: 19px;
  font-weight: 600;
  color: var(--ink);
  padding: 4px 0;
}
.mobile-nav .m-link:hover { color: var(--acc); }
.mobile-nav .m-sub { margin-top: 6px; }
.mobile-nav .m-sub a {
  display: block;
  font-size: 15px;
  color: var(--sub);
  padding: 6px 0 6px 14px;
  border-left: 1px solid var(--line);
}
.mobile-nav .m-sub a:hover { color: var(--acc); border-left-color: var(--acc); }
.mobile-nav .m-cta { margin-top: 22px; display: grid; gap: 10px; }
.mobile-nav .m-meta {
  margin-top: 22px;
  font-size: 14px;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
}

body.nav-locked { overflow: hidden; }

/* ---------------------------------------------------------------
   HERO
   --------------------------------------------------------------- */
.hero-bleed {
  position: relative;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}
.hero-wash {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(255, 255, 255, 0.96) 44%,
    rgba(255, 255, 255, 0.82) 68%,
    rgba(255, 255, 255, 0.55) 100%);
}
.hero-bleed .wrap { position: relative; z-index: 2; }
.ai-badge {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 3;
  font-size: 11px;
  font-weight: 600;
  color: var(--sub);
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 3px 7px;
}
/* Tap-Target 44px ohne Optik-Aenderung: das Badge sitzt absolut auf einem
   Bild, mehr Padding wuerde die sichtbare Plakette vergroessern. Stattdessen
   traegt ein unsichtbares ::before die Trefferflaeche. */
.ai-badge::before {
  content: '';
  position: absolute;
  inset: -10px -8px;
}
.ai-badge:hover { color: var(--acc); }
@media (max-width: 900px) {
  /* Badge kollidierte mit der letzten Tuer (KI-Automatisierung) und fing deren Tap ab */
  .hero-bleed { padding-bottom: 42px; }
  .hero-bleed .ai-badge { bottom: 8px; }
  .ai-badge::before { inset: 0; }
}

.hero { padding: 64px 0 44px; }

.hero .sub {
  font-size: 19px;
  line-height: 1.6;
  color: var(--sub);
  max-width: 58ch;
  margin: 20px 0 26px;
}
.hero .sub b { color: var(--ink); font-weight: 650; }
.hero .sub a { color: inherit; }

.ctas { display: flex; gap: 14px; flex-wrap: wrap; }

/* Leistungs-Leiste: fünf benannte Türen (Signatur) */
.svc {
  display: flex;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  margin-top: 40px;
  background: #fff;
}
.svc a {
  flex: 1;
  position: relative; /* Anker fuer das Abwaerts-Caret */
  /* Grundlinien-Register: Unterzeilen liegen auf einer Linie, auch wenn
     das Label ueber zwei Zeilen laeuft */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px 14px 14px;
  border-left: 1px solid var(--line);
  box-shadow: inset 0 0 0 0 var(--acc);
  transition: background 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.svc a:first-child { border-left: none; }
.svc a:hover, .svc a:focus-visible, .svc a[aria-current] {
  background: var(--acc-tint);
  box-shadow: inset 0 3px 0 0 var(--acc);
}
.svc b {
  display: block;
  font-size: 13px;
  font-weight: 750;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
}
.svc a:hover b, .svc a[aria-current] b { color: var(--acc); }
.svc span { display: block; font-size: 13px; color: var(--sub); margin-top: 3px; }
/* Abwaerts-Chevron: die Tuer ist ein In-Page-Ziel. Der wortgleiche
   Submenu-Eintrag im Header fuehrt dagegen auf eine eigene Seite und
   traegt deshalb kein Caret. Gleiche Bauweise wie .nav-sub-toggle::after.
   Absolut auf Hoehe der Unterzeile statt inline: ein inline-block-Caret
   rutschte bei langen Labels allein auf eine neue Zeile, und die Label-
   Zeile hat bei 1025px nur ~3px Rest. Die Unterzeile traegt Platz, das
   padding-right haelt ihn frei. */
.svc span:not(.sr-only) { padding-right: 12px; }
.svc a::after {
  content: '';
  position: absolute;
  bottom: 20px;
  right: 12px;
  width: 5px;
  height: 5px;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: rotate(45deg);
  transition: border-color 160ms var(--ease-out);
}
.svc a:hover::after,
.svc a:focus-visible::after,
.svc a[aria-current]::after { border-color: var(--acc); }
/* Zwischen 901 und 1024px hat die Tuer keinen horizontalen Rest mehr
   (Unterzeile ~2px Schlupf): Reserve raus, Caret in die Randspalte —
   sonst braechen vier Unterzeilen um und die Leiste wuechse um 21px. */
@media (min-width: 901px) and (max-width: 1024px) {
  .svc span:not(.sr-only) { padding-right: 0; }
  .svc a::after { right: 4px; }
}

/* Lade-Choreografie: der eine autorisierte Motion-Moment */
.hero h1, .hero .sub, .hero .ctas, .hero .svc, .proof .p {
  animation: rise 600ms var(--ease-out) backwards;
}
.hero .sub { animation-delay: 70ms; }
.hero .ctas { animation-delay: 140ms; }
.hero .svc { animation-delay: 210ms; }
.proof .p:nth-child(1) { animation-delay: 280ms; }
.proof .p:nth-child(2) { animation-delay: 340ms; }
.proof .p:nth-child(3) { animation-delay: 400ms; }
.proof .p:nth-child(4) { animation-delay: 460ms; }

@keyframes rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------
   PROOF-ZEILE — belegte Werte mit Quellzeile
   --------------------------------------------------------------- */
.proof {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  padding: 34px 0 44px;
  border-bottom: 1px solid var(--line);
}
.proof .p > span { font-size: 13.5px; color: var(--sub); line-height: 1.45; display: block; margin-top: 4px; }
/* Wert-Override NACH der Caption-Regel: 0-2-1 schlug 0-2-0, die 21px griffen nie */
.proof .p > .num { font-size: 21px; font-weight: 700; color: var(--ink); display: block; margin-top: 0; }
/* Tap-Target 44px: Padding trägt die Höhe, negative Margins halten das Satzbild */
.proof .src, .proof a.src { font-size: 12px; display: inline-block; color: var(--muted); padding: 13px 0; margin: -8px 0 -13px; }
.proof a.src { color: var(--acc); text-decoration: underline; text-decoration-color: rgba(26, 79, 196, 0.35); text-underline-offset: 3px; }
.proof a.src:hover { text-decoration-color: var(--acc); }

/* ---------------------------------------------------------------
   LEISTUNGS-SEKTIONEN
   --------------------------------------------------------------- */
section.line { padding: 56px 0; border-bottom: 1px solid var(--line); }
section.line h2 { margin-bottom: 16px; }

.cols { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 44px; align-items: start; }
.cols .body p { color: var(--sub); max-width: 62ch; }
.cols .body p + p { margin-top: 12px; }
.cols .body p b { color: var(--ink); font-weight: 650; }

/* Fristen-Zeitleiste: datierte Chronologie auf einer 1px-Achse.
   Warn-Paar markiert genau den naechsten anstehenden Stichtag. */
.timeline {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 18px;
  border-top: 1px solid var(--line-strong);
}
.timeline li {
  position: relative;
  padding: 16px 0 0;
  font-size: 14px;
  line-height: 1.45;
}
.timeline li::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--line-strong);
}
.timeline .tl-date {
  display: inline-block;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink);
}
.timeline .tl-what { display: block; margin-top: 5px; color: var(--sub); }
.timeline .is-next::before { background: var(--warn-ink); border-color: var(--warn-ink); }
.timeline .is-next .tl-date {
  padding: 2px 6px;
  margin-left: -6px;
  border-radius: 4px;
  background: var(--warn-bg);
  color: var(--warn-ink);
}

.steps { margin: 20px 0 0; padding: 0; list-style: none; counter-reset: s; }
.steps li {
  counter-increment: s;
  padding: 11px 0 11px 42px;
  position: relative;
  border-top: 1px dashed var(--line-strong);
  font-size: 15px;
  color: var(--ink);
}
.steps li::before {
  content: counter(s);
  position: absolute;
  left: 0;
  top: 10px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--soft);
  border: 1px solid var(--line);
  font: 700 13px/24px var(--mono);
  text-align: center;
  color: var(--ink);
}
/* Zweiteilige Schritte (Homepage-Sequenz); die Linienseiten nutzen
   dieselbe Liste einzeilig, dort greifen diese Regeln nicht. */
.steps b { display: block; color: var(--ink); font-weight: 650; }
.steps span { display: block; margin-top: 3px; font-size: 14.5px; line-height: 1.5; color: var(--sub); }

.more-link { font-size: 14.5px; font-weight: 650; display: inline-block; padding: 11px 0; margin: 7px 0 -11px; }
.more-link:hover { color: var(--acc-dark); }

/* Teilleistungen: scannbare Zeilen (Titel links, Konkretes rechts) */
.subsvc { list-style: none; margin-top: 20px; }
.subsvc li {
  display: grid;
  grid-template-columns: 225px 1fr;
  gap: 4px 20px;
  padding: 11px 0;
  border-top: 1px dashed var(--line-strong);
  font-size: 14.5px;
  line-height: 1.5;
}
.subsvc b { color: var(--ink); font-weight: 650; }
.subsvc span { color: var(--sub); }
.subsvc-link { text-decoration: none; }
.subsvc-link:hover b { color: var(--acc); }

/* Kontierungsmatrix: die vier Dimensionen als Mono-Chips, Ergebnis am Ende.
   Bricht auf schmalen Viewports um, statt zu ueberlaufen. */
.matrix-line {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
}
.matrix-line .m-d,
.matrix-line .m-r {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.35;
  border-radius: 4px;
  padding: 3px 7px;
  white-space: nowrap;
}
.matrix-line .m-d { color: var(--sub); border: 1px solid var(--line); }
.matrix-line .m-r { color: var(--acc-dark); background: var(--acc-tint); border: 1px solid var(--acc); }
.matrix-line .m-x { font-family: var(--mono); font-size: 12px; line-height: 1; color: var(--muted); }

@media (max-width: 700px) {
  .subsvc li { grid-template-columns: 1fr; }
  /* Zeitleiste kippt auf eine vertikale Achse */
  .timeline {
    grid-template-columns: 1fr;
    gap: 0;
    border-top: 0;
    border-left: 1px solid var(--line-strong);
    padding-left: 18px;
  }
  .timeline li { padding: 9px 0; }
  .timeline li::before { top: 13px; left: -23px; }
}

/* Beweis-Karte: Zitat mit namentlicher Referenz */
.quote-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 22px;
  background: #fff;
}
.quote-card blockquote {
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink);
}
.quote-card .q-author { margin-top: 14px; font-weight: 650; font-size: 14.5px; }
.quote-card .q-role { font-size: 13px; color: var(--sub); }
.quote-card .q-trans { font-size: 12px; color: var(--muted); margin-top: 6px; }
.quote-card .q-result {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 13px;
}
.quote-card .q-result .num { font-size: 14px; font-weight: 700; display: block; margin-bottom: 2px; }
/* Tap-Target 44px: Padding traegt die Hoehe, negative Margins halten
   den Abstand zur Rolle oben und zum Kartenrand unten. */
.quote-card .q-contact {
  display: inline-block;
  margin: 0 0 -12px;
  padding: 12px 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--acc);
}

/* Middleware-Slot (E-Rechnung-Middleware) */
.demo {
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 22px;
}
.demo .tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
  background: var(--ink);
  color: #fff;
  padding: 5px 8px;
  border-radius: 4px;
}
.demo h3 { margin: 12px 0 8px; }
.demo p { font-size: 14.5px; color: var(--sub); margin-bottom: 14px; }
.demo .date { font-weight: 700; color: var(--ink); }

/* Sektions-Foto (rechte Spalte) */
.line-photo { margin: 0; position: relative; }
.line-photo img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--line);
}

/* Kompakt-Referenz (Nebenprojekte ohne Zahlen) */
.mini-cases { margin-top: 20px; display: grid; gap: 12px; }
.mini-case {
  border-top: 1px solid var(--line);
  padding-top: 12px;
  font-size: 14px;
  color: var(--sub);
}
.mini-case b { color: var(--ink); font-weight: 650; display: block; font-size: 14.5px; }
.mini-foot { border-top: 1px solid var(--line); padding-top: 12px; }
.mini-foot .mini-note { font-size: 13px; color: var(--muted); line-height: 1.5; }
/* Tap-Target 44px nach demselben Muster wie .proof .src */
.mini-foot .src { font-size: 12px; padding: 13px 0; margin: -8px 0 -13px; display: inline-block; color: var(--acc); text-decoration: underline; text-decoration-color: rgba(26, 79, 196, 0.35); text-underline-offset: 3px; }
.mini-foot .src:hover { text-decoration-color: var(--acc); }

/* ---------------------------------------------------------------
   TOOLS
   --------------------------------------------------------------- */
section.tools { padding: 56px 0; border-bottom: 1px solid var(--line); }
section.tools .lead { color: var(--sub); max-width: 62ch; margin-top: 14px; }

.tools-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 26px; }

.tool {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  background: #fff;
  transition: border-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.tool:hover { border-color: var(--line-strong); box-shadow: var(--shadow-card); }
.tool h3 { font-size: 16.5px; margin-bottom: 6px; }
.tool .t-meta { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.tool p { font-size: 14px; color: var(--sub); margin-bottom: 14px; }
.tool .t-link { font-size: 14px; font-weight: 650; margin-top: auto; padding: 11px 0; margin-bottom: -11px; }
.tool .t-link:hover { color: var(--acc-dark); }

.soon {
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.06em;
  color: var(--warn-ink);
  background: var(--warn-bg);
  padding: 4px 7px;
  border-radius: 4px;
  margin-left: 8px;
  vertical-align: 2px;
  white-space: nowrap;
}

/* ---------------------------------------------------------------
   WISSEN
   --------------------------------------------------------------- */
section.wissen { padding: 56px 0; border-bottom: 1px solid var(--line); }

.news-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 24px; }
.news-item { border-top: 2px solid var(--ink); padding-top: 14px; display: block; color: var(--ink); }
.news-item time { font-size: 12px; color: var(--muted); font-family: var(--mono); }
.news-item .news-tags { font-family: var(--mono); font-size: 12px; color: var(--muted); margin-left: 10px; }
.news-item h3 { font-size: 17px; margin: 6px 0 6px; line-height: 1.35; }
.news-item p { font-size: 14px; color: var(--sub); }
.news-item:hover h3 { color: var(--acc); }

.wissen-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
/* Tap-Target 44px: Padding traegt die Hoehe, negative Margins halten
   das Satzbild. Umbrechend (mobil) werden die Margins neutralisiert,
   damit sich die Zeilen-Trefferflaechen nicht ueberlappen. */
.wissen-links a { display: inline-block; font-size: 14.5px; font-weight: 650; padding: 11px 0; margin: -11px 0; }
.wissen-links a:hover { color: var(--acc-dark); }

/* ---------------------------------------------------------------
   LEISTUNGS-UNTERSEITEN
   --------------------------------------------------------------- */
.page-head { padding: 56px 0 8px; }
.crumb { font-size: 13px; font-weight: 600; color: var(--muted); }
.crumb:hover { color: var(--acc); }
.page-head h1 { margin-top: 12px; }

.page-lead p { font-size: 17px; line-height: 1.6; color: var(--sub); max-width: 62ch; }
.page-lead p + p { margin-top: 12px; }
.page-lead p strong, .page-lead p b { color: var(--ink); font-weight: 650; }

.page-cols { padding: 26px 0 48px; }

.sub-h { font-size: 1.25rem; font-weight: 650; margin: 30px 0 4px; }
.page-aside .sub-h:first-child, .proof-box .sub-h { margin-top: 0; }

.page-aside { display: grid; gap: 18px; align-content: start; }

.proof-box {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 20px 22px;
  background: #fff;
}
.proof-box .sub-h { font-size: 1.0625rem; margin-bottom: 8px; }
.proof-items { list-style: none; }
.proof-items li { border-top: 1px dashed var(--line-strong); padding: 9px 0; font-size: 14px; }
.proof-items li:first-child { border-top: none; padding-top: 0; }
.proof-items a { color: var(--ink); }
.proof-items a:hover { color: var(--acc); }

.related { padding: 0 0 56px; }
.related-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.chip {
  display: inline-block;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 9px 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  transition: border-color 160ms var(--ease-out), color 160ms var(--ease-out);
}
.chip:hover { border-color: var(--acc); color: var(--acc); }

/* Legacy-Markdown-Seiten in der neuen Welt */
.page-article { padding: 10px 0 56px; max-width: 760px; }
.page-article h2 { margin: 34px 0 12px; }
.page-article h3 { margin: 22px 0 8px; }
.page-article p, .page-article li { color: var(--sub); }
.page-article p { margin-bottom: 12px; max-width: 68ch; }
.page-article ul, .page-article ol { padding-left: 22px; margin-bottom: 14px; }
/* Teilleistungs-Zeilen im Prosa-Body bleiben buendig zum Fliesstext */
.page-article .subsvc { padding-left: 0; }
.page-article li { margin-bottom: 6px; }
.page-article li b, .page-article li strong, .page-article p b, .page-article p strong { color: var(--ink); }
.page-article hr { border: 0; border-top: 1px solid var(--line); margin: 28px 0; }
.page-article details {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px 18px;
  margin: 12px 0;
  background: #fff;
}
.page-article summary { cursor: pointer; font-weight: 650; color: var(--ink); }
.page-article details[open] summary { margin-bottom: 10px; }

/* Leistungs-Übersicht */
.line-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 26px 0 56px; }
.line-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 24px;
  background: #fff;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  transition: border-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.line-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-card); }
.line-card h2 { font-size: 1.25rem; }
.line-card:hover h2 { color: var(--acc); }
.line-card-sub { font-size: 13px; color: var(--muted); margin-top: 2px; }
.line-card p { font-size: 14.5px; color: var(--sub); margin: 10px 0 14px; }
.line-card .t-link { font-size: 14px; font-weight: 650; color: var(--acc); margin-top: auto; }

/* ---------------------------------------------------------------
   WER SIE BEGLEITET
   --------------------------------------------------------------- */
section.person { padding: 56px 0 64px; }

.person-grid {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 44px;
  align-items: center;
}
.person-photo { margin: 0; }
.portrait-frame { position: relative; }
.portrait-frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center 20%;
  border-radius: 10px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  background: #fff;
}
.person-body h2 { margin-bottom: 14px; }
.person-body p { color: var(--sub); max-width: 62ch; }
.person-body p + p { margin-top: 12px; }

/* ---------------------------------------------------------------
   ABSCHLUSS-CTA
   --------------------------------------------------------------- */
section.close { background: var(--acc); color: #fff; padding: 64px 0; }
/* Fokusring auf blauem Grund: Ring in Akzentfarbe wäre unsichtbar */
section.close :focus-visible, .cta-section :focus-visible { outline-color: #fff; }
section.close h2 { color: #fff; }
section.close .close-sub {
  color: rgba(255, 255, 255, 0.85);
  max-width: 58ch;
  margin: 14px 0 26px;
  font-size: 17px;
}
section.close .close-meta {
  margin-top: 18px;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.75);
}
section.close .close-meta a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------------------------------------------------
   FOOTER
   --------------------------------------------------------------- */
.site-footer { background: var(--soft); border-top: 1px solid var(--line); padding: 48px 0 28px; }

.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1.1fr;
  gap: 36px;
}
.footer-brand { font-family: var(--display); font-weight: 800; font-size: 16px; color: var(--ink); }
.footer-desc { font-size: 14px; color: var(--sub); margin-top: 10px; max-width: 34ch; }

.footer-h { font-size: 13px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink); margin-bottom: 12px; }
.footer-links { list-style: none; }
.footer-links li { margin-bottom: 8px; }
.footer-links a { font-size: 14px; color: var(--sub); text-decoration: none; }
.footer-links a:hover { color: var(--acc); text-decoration: underline; text-underline-offset: 3px; }

.footer-links-gap { margin-top: 12px; }

.footer-contact { font-size: 14px; color: var(--sub); }
.footer-contact div { margin-bottom: 8px; }
.footer-contact a { color: var(--sub); }
.footer-contact a:hover { color: var(--acc); }

.footer-social { display: flex; gap: 12px; margin-top: 14px; }
.footer-social a { color: var(--muted); }
.footer-social a:hover { color: var(--acc); }

.footer-bottom {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--muted);
}
.footer-bottom .legal { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 10px; }
.footer-bottom a { color: var(--muted); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; }
.footer-bottom a:hover { color: var(--acc); text-decoration-color: var(--acc); }
.footer-ai { margin-top: 10px; max-width: 90ch; }

/* ---------------------------------------------------------------
   SITE-WEITER ROLLOUT: Bestands-Templates im neuen Vokabular
   (Re-Skin der geteilten Klassen; Markup der Templates bleibt)
   --------------------------------------------------------------- */

/* Button-Aliase des Bestands */
.btn.btn-primary { background: var(--acc); color: #fff; border-color: var(--acc); }
.btn.btn-primary:hover { background: var(--acc-dark); border-color: var(--acc-dark); }
.btn.btn-secondary { background: transparent; color: var(--acc); }
.btn.btn-secondary:hover { background: var(--acc-tint); color: var(--acc-dark); }
.btn.btn-ghost { background: transparent; border-color: transparent; color: var(--acc); }
.btn.btn-ghost:hover { background: var(--acc-tint); }
.btn.btn-lg { font-size: 16px; padding: 13px 24px; }
.btn.btn-sm { font-size: 14px; padding: 8px 15px; }

/* Utility-Reste des Bestands */
.mt-s-4 { margin-top: 1rem; }
.mt-s-6 { margin-top: 1.5rem; }
.mt-s-8 { margin-top: 2rem; }
[data-hidden] { display: none !important; }
.icon-inline { vertical-align: -3px; margin-right: 6px; }

/* Page-Hero (Bestands-Seitenkopf) */
.page-hero { border-bottom: 1px solid var(--line); }
.page-hero-inner { max-width: 1120px; margin: 0 auto; padding: 56px 28px 36px; }
.page-hero-title { max-width: 24ch; }
.page-hero-desc { font-size: 18px; line-height: 1.6; color: var(--sub); max-width: 62ch; margin-top: 14px; }

/* Prosa-Seiten: Kopf und Inhalt teilen die volle 1120er-Achse; nur die
   Textblöcke behalten (links ausgerichtet) ihr Lesemaß */

/* Lese-Typografie (prose) */
.article-section { padding: 36px 0 56px; }
.article-inner { max-width: 1120px; margin: 0 auto; padding: 0 28px; }
.prose p, .prose ul, .prose ol, .prose blockquote { max-width: 800px; }
.author-box, .share-box { max-width: 800px; }
.prose p { color: var(--sub); line-height: 1.7; margin: 0 0 14px; }
.prose h2 { font-size: clamp(1.375rem, 2vw, 1.625rem); margin: 36px 0 12px; }
.prose h3 { font-size: 1.1875rem; margin: 26px 0 8px; }
.prose h4 { font-size: 1.0625rem; margin: 20px 0 6px; }
.prose ul, .prose ol { padding-left: 22px; margin: 0 0 14px; color: var(--sub); }
.prose li { margin-bottom: 6px; }
.prose li b, .prose li strong, .prose p b, .prose p strong { color: var(--ink); }
.prose blockquote { border-left: 1px solid var(--line-strong); padding: 6px 0 6px 16px; margin: 0 0 14px; color: var(--ink); }
.prose img { border-radius: 10px; border: 1px solid var(--line); }
.prose code { font-family: var(--mono); font-size: 0.9em; background: var(--soft); border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; }
.prose pre { background: var(--ink); color: #e6edf3; border-radius: 8px; padding: 16px; overflow-x: auto; margin: 0 0 14px; }
.prose pre code { background: none; border: 0; color: inherit; padding: 0; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 28px 0; }
/* Tabellen scrollen im Wrapper statt die Seite zu sprengen (mobil).
   Der Wrapper kommt aus layouts/_markup/render-table.html; die <table>
   bleibt dadurch eine echte Tabelle (Semantik für Screenreader). */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 16px;
  /* Scroll-Affordanz ohne JS: mitscrollende Deck-Flächen in Seitenfarbe
     (background-attachment: local) decken die fixen Schatten-Verläufe ab,
     solange die Tabelle am jeweiligen Rand steht. */
  background:
    linear-gradient(to right, var(--bg), rgba(255, 255, 255, 0)) left center,
    linear-gradient(to left, var(--bg), rgba(255, 255, 255, 0)) right center,
    linear-gradient(to right, rgba(17, 24, 32, 0.08), rgba(17, 24, 32, 0)) left center,
    linear-gradient(to left, rgba(17, 24, 32, 0.08), rgba(17, 24, 32, 0)) right center;
  background-repeat: no-repeat;
  background-size: 28px 100%, 28px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}
.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  margin: 0;
}
.prose th { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line-strong); color: var(--ink); white-space: nowrap; }
.prose td { padding: 8px 10px; border-top: 1px dashed var(--line); color: var(--sub); white-space: normal; }

/* Artikel-Bausteine */
.article-hero-image-section { padding-top: 10px; }
.article-hero-image-wrap { position: relative; margin: 0; }
.article-hero-image { width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--line); display: block; }
.ai-image-label { font-size: 12px; color: var(--muted); margin-top: 6px; }
.ai-image-label a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.ai-image-label a:hover { color: var(--acc); }
.ai-image-badge {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  font-size: 11px;
  font-weight: 600;
  color: var(--sub);
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 3px 7px;
  cursor: pointer;
}
.ai-image-badge:hover { color: var(--acc); }
.article-meta-top { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 14px; }
.article-back { font-size: 13px; font-weight: 600; color: var(--muted); }
.article-back:hover { color: var(--acc); }
.article-meta-info { font-family: var(--mono); font-size: 12.5px; color: var(--muted); }
.article-series-badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--acc-dark);
  background: var(--acc-tint);
  border-radius: 4px;
  padding: 4px 7px;
  margin-bottom: 10px;
}
.article-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.news-tag { font-family: var(--mono); font-size: 12px; color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 3px 7px; }
.article-author, .article-share, .article-nav-section { padding-bottom: 24px; }
.author-box { border: 1px solid var(--line); border-radius: 10px; padding: 22px; background: #fff; }
.author-label { display: block; font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.author-name { color: var(--ink); }
.author-bio { font-size: 14.5px; color: var(--sub); margin: 6px 0 10px; }
.author-link { font-size: 14px; font-weight: 650; }
.share-box { background: var(--soft); border: 1px solid var(--line); border-radius: 10px; padding: 20px 22px; }
.share-title { font-size: 16px; margin-bottom: 6px; }
.share-desc { font-size: 14px; color: var(--sub); margin-bottom: 10px; }
.share-url { font-family: var(--mono); font-size: 13px; background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; margin-bottom: 10px; word-break: break-all; }
.share-feedback { font-size: 13px; color: var(--acc-dark); margin-left: 10px; }
.article-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.article-nav-link { border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; display: block; transition: border-color 160ms var(--ease-out); }
.article-nav-link:hover { border-color: var(--acc); }
.article-nav-next { text-align: right; }
.article-nav-label { display: block; font-family: var(--mono); font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.article-nav-title { font-size: 14.5px; font-weight: 650; color: var(--ink); }

/* CTA-Band des Bestands = blaues Abschluss-Band */
.cta-section { background: var(--acc); padding: 64px 0; }
.cta-inner { max-width: 1120px; margin: 0 auto; padding: 0 28px; }
.cta-title { color: #fff; }
.cta-text { color: rgba(255, 255, 255, 0.85); font-size: 17px; max-width: 58ch; margin: 14px 0 26px; }
.cta-section .btn { background: #fff; color: var(--acc); border-color: #fff; }
.cta-section .btn:hover { background: var(--acc-tint); border-color: var(--acc-tint); }
.cta-section .btn.btn-secondary { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.65); }
.cta-section .btn.btn-secondary:hover { border-color: #fff; background: rgba(255, 255, 255, 0.1); }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; }

/* News-Liste */
.news-section { padding: 30px 0 64px; }
.news-inner { max-width: 1120px; margin: 0 auto; padding: 0 28px; }
.news-intro { max-width: 760px; margin-bottom: 20px; }
.news-rss { margin-top: 14px; }
.news-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin: 6px 0 24px; }
.news-search-wrap { position: relative; flex: 1; min-width: 220px; max-width: 340px; }
.news-search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--muted); }
.news-search-input {
  width: 100%;
  padding: 9px 12px 9px 34px;
  border: 1px solid var(--line-input);
  border-radius: 6px;
  font: 400 14.5px/1.4 var(--sans);
  color: var(--ink);
  background: #fff;
}
.news-search-input:focus { border-color: var(--acc); }
.news-filter { display: flex; flex-wrap: wrap; gap: 6px; }
.news-filter-btn {
  border: 1px solid var(--line-input);
  background: #fff;
  border-radius: 6px;
  padding: 7px 12px;
  font: 600 13.5px/1.2 var(--sans);
  color: var(--sub);
  cursor: pointer;
}
.news-filter-btn:hover { border-color: var(--acc); color: var(--acc); }
.news-filter-btn.active { background: var(--acc); border-color: var(--acc); color: #fff; }
.news-section .news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.news-card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 18px;
  background: #fff;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  transition: border-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.news-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-card); }
.news-card:hover .news-card-title { color: var(--acc); }
.news-card-image-wrap { position: relative; margin: -18px -18px 14px; }
.news-card-image { width: 100%; height: auto; display: block; border-radius: 10px 10px 0 0; border-bottom: 1px solid var(--line); }
.news-card-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; font-family: var(--mono); font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.news-card-series { color: var(--acc-dark); font-weight: 700; }
.news-card-title { font-size: 16.5px; line-height: 1.35; margin-bottom: 8px; }
.news-card-desc { font-size: 14px; color: var(--sub); margin-bottom: 10px; }
.news-card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.news-card-link { margin-top: auto; font-size: 14px; font-weight: 650; color: var(--acc); }
.news-pagination { display: flex; justify-content: center; gap: 6px; margin-top: 26px; }
.news-pagination-btn {
  min-width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  font: 600 14px/1 var(--sans);
  color: var(--sub);
  cursor: pointer;
}
.news-pagination-btn:hover { border-color: var(--acc); color: var(--acc); }
.news-pagination-btn.is-active { background: var(--acc); border-color: var(--acc); color: #fff; }
.news-pagination-btn:disabled { opacity: 0.4; cursor: default; }
.news-pagination-ellipsis { align-self: center; color: var(--muted); }
.news-pagination-info { text-align: center; font-family: var(--mono); font-size: 12.5px; color: var(--muted); margin-top: 18px; }
.news-empty { text-align: center; padding: 40px 0; color: var(--sub); }
.news-empty-title { font-weight: 650; color: var(--ink); margin-bottom: 6px; }

/* Generische Listen (Workshops, Sektions-Übersichten) */
.list-section { padding: 30px 0 64px; }
.list-inner { max-width: 1120px; margin: 0 auto; padding: 0 28px; }
.list-intro { max-width: 760px; margin-bottom: 24px; }
.section-image-banner { position: relative; margin-bottom: 24px; }
.section-banner-img { width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--line); display: block; }
.list-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.pillar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.list-card, .pillar-card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 22px;
  background: #fff;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  transition: border-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.list-card:hover, .pillar-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-card); }
.list-card-title, .pillar-card h3 { font-size: 16.5px; margin-bottom: 8px; }
.list-card:hover .list-card-title, .pillar-card:hover h3 { color: var(--acc); }
.list-card-desc, .pillar-card p { font-size: 14px; color: var(--sub); margin-bottom: 12px; }
.list-card-footer { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: auto; }
.list-card-meta { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.list-card-action, .pillar-card-action { font-size: 14px; font-weight: 650; color: var(--acc); margin-top: auto; }
.pillar-card-number { font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--muted); margin-bottom: 10px; }
.workshop-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--acc-dark);
  background: var(--acc-tint);
  border-radius: 4px;
  padding: 4px 7px;
}
.workshop-card-img-wrap { position: relative; width: 80px; margin-bottom: 12px; }
.workshop-card-img { border-radius: 8px; border: 1px solid var(--line); display: block; }
.workshop-card-img-wrap .ai-image-badge { right: auto; left: 0; bottom: -8px; font-size: 9px; padding: 2px 5px; }
.leistungen-links { display: flex; flex-direction: column; gap: 8px; margin-top: 28px; border-top: 1px solid var(--line); padding-top: 18px; }
.leistungen-link { font-size: 14.5px; font-weight: 650; }

/* Über-mich- und Kontakt-Layouts */
.about-hero { border-bottom: 1px solid var(--line); }
.about-hero-inner { max-width: 1120px; margin: 0 auto; padding: 56px 28px; display: grid; grid-template-columns: 300px 1fr; gap: 48px; align-items: center; }
.about-hero-image-col { position: relative; }
.about-hero-image { width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--line); box-shadow: var(--shadow-card); display: block; }
.contact-split-section { padding: 30px 0 56px; }
.contact-split-inner { max-width: 1120px; margin: 0 auto; padding: 0 28px; }
.contact-split-image-col { position: relative; margin-bottom: 26px; }
.contact-split-image { width: 100%; height: auto; max-height: 320px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); display: block; }
.contact-split-content { max-width: 800px; }

/* Integrationen-Seite */
.integrations-hero { border-bottom: 1px solid var(--line); }
.integrations-hero-inner { max-width: 1120px; margin: 0 auto; padding: 56px 28px 36px; }
.section-header { margin-bottom: 22px; }
.systems-section, .integrations-process, .integrations-extras { padding: 48px 0; border-bottom: 1px solid var(--line); }
.systems-inner, .integrations-process-inner, .integrations-extras-inner { max-width: 1120px; margin: 0 auto; padding: 0 28px; }
.systems-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.system-card { border: 1px solid var(--line); border-radius: 10px; padding: 20px; background: #fff; }
.system-card-badge { display: inline-block; font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--acc-dark); background: var(--acc-tint); border-radius: 4px; padding: 3px 6px; margin-bottom: 8px; }
.system-card-icon { width: 40px; height: 40px; margin-bottom: 10px; color: var(--acc); }
.system-card h3 { font-size: 16.5px; margin-bottom: 6px; }
.system-card p { font-size: 14px; color: var(--sub); }
.system-card-links { display: grid; gap: 6px; margin-top: 10px; font-size: 14px; font-weight: 650; }
.integrations-process-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.integrations-process-step { border: 1px solid var(--line); border-radius: 10px; padding: 20px; background: #fff; font-size: 14.5px; color: var(--sub); }
.integrations-process-step b, .integrations-process-step strong, .integrations-process-step h3 { color: var(--ink); }
.extras-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.extras-item { border: 1px solid var(--line); border-radius: 10px; padding: 18px; background: #fff; font-size: 14.5px; color: var(--sub); }

/* Checks (Reifegrad + DATEV): ein Frage-Schritt in einer ruhigen Karte */
.quiz-container {
  max-width: 680px;
  margin: 8px 0 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  box-shadow: var(--shadow-card);
  padding: 28px;
}
.quiz-progress { height: 6px; background: var(--soft); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; margin-bottom: 8px; }
.quiz-progress-bar { height: 100%; background: var(--acc); }
.quiz-progress-text { font-family: var(--mono); font-size: 12.5px; color: var(--muted); margin-bottom: 20px; }
.quiz-question { display: none; }
.quiz-question.active { display: block; }
.quiz-question h3, .quiz-question-title { font-family: var(--display); font-size: 1.25rem; font-weight: 650; margin-bottom: 6px; }
/* Programmatisches Fokus-Ziel (tabindex="-1" + focus() in quiz.js / datev-check.js):
   Ring auf Abstand halten, damit die Überschrift nicht wie ein Bedienelement wirkt. */
.quiz-question h3:focus-visible,
.quiz-question-title:focus-visible,
.quiz-result-level:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 6px;
  border-radius: 4px;
}
.quiz-group { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; display: block; }
.quiz-options { display: grid; gap: 10px; margin-top: 14px; }
.quiz-option {
  text-align: left;
  border: 1px solid var(--line-input);
  border-radius: 8px;
  background: #fff;
  padding: 14px 16px;
  font: 400 15px/1.5 var(--sans);
  color: var(--ink);
  cursor: pointer;
  transition: border-color 160ms var(--ease-out), background 160ms var(--ease-out);
}
.quiz-option:hover { border-color: var(--acc); }
.quiz-option.selected { border-color: var(--acc); background: var(--acc-tint); }
.quiz-back {
  margin-top: 14px;
  background: none;
  border: 0;
  font: 600 13px/1.3 var(--sans);
  color: var(--muted);
  cursor: pointer;
  padding: 4px 0;
}
.quiz-back:hover { color: var(--acc); }
.quiz-hint { font-size: 13px; color: var(--muted); margin-top: 12px; }
.quiz-result { display: none; }
.quiz-result-header { margin-bottom: 12px; }
.quiz-result-score { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 28px; font-weight: 700; display: block; }
.quiz-result-level { display: inline-block; border: 1px solid var(--line-strong); border-radius: 6px; padding: 6px 12px; font-size: 18px; font-weight: 650; color: var(--ink); margin-top: 8px; }
.quiz-result-level-num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.quiz-result-details { font-size: 14.5px; color: var(--sub); margin: 12px 0; }
.quiz-result-details h3 { font-size: 1.0625rem; margin: 0 0 8px; }
.quiz-category-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.quiz-category-row:last-child { border-bottom: 0; }
.quiz-category-name { flex: 0 0 190px; font-family: var(--sans); font-size: 14px; color: var(--ink); }
.quiz-category-bar { flex: 1; height: 4px; background: var(--line); border-radius: 4px; overflow: hidden; }
.quiz-category-fill { height: 100%; background: var(--acc); border-radius: 4px; }
.quiz-category-pct { flex: 0 0 42px; text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 13px; color: var(--muted); }
.quiz-result-cta { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 12px; }
.quiz-restart { border: 1.5px solid var(--acc); background: transparent; color: var(--acc); border-radius: 6px; padding: 9px 16px; font: 600 14px/1.3 var(--sans); cursor: pointer; }
.quiz-restart:hover { background: var(--acc-tint); }

/* Kontakt-Karten (Markup in content/kontakt.md) */
.contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 24px 0; }
.contact-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 22px;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.contact-card--primary { border-color: var(--acc); background: var(--acc-tint); }
.contact-card-icon { display: none; }
.contact-card-title { font-size: 16.5px; margin-bottom: 6px; }
.contact-card-desc { font-size: 14px; color: var(--sub); margin-bottom: 14px; }
.contact-card .btn { margin-top: auto; }

/* Accordion-Untertitel */
.acc-subtitle { display: block; font-size: 13px; font-weight: 400; color: var(--sub); margin-top: 3px; }

/* Workshop-Detail-Metadaten */
.workshop-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 20px 0; }
.workshop-meta-item { border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; background: #fff; }
.workshop-meta-label { display: block; font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.workshop-meta-value { font-size: 14.5px; font-weight: 600; color: var(--ink); }

/* Goldmark-Content-Klassen des Bestands */
.wp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 20px 0; }
.wp-card { border: 1px solid var(--line); border-radius: 10px; padding: 22px; background: #fff; }
.wp-card-badge { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.wp-card-title { font-size: 1.1875rem; margin: 8px 0; }
.wp-card-desc { font-size: 14.5px; color: var(--sub); }
.wp-card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 14px; }
.wp-tag { font-family: var(--mono); font-size: 12px; color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 3px 6px; }
.pricing-highlight { border: 1px solid var(--acc); background: var(--acc-tint); border-radius: 10px; padding: 18px 22px; margin: 18px 0; }
.pricing-highlight p { color: var(--ink); }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 16px 0; }
.about-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 18px 0; }
.about-stats > div { border: 1px solid var(--line); border-radius: 8px; padding: 14px; background: #fff; }
.about-stat-value, .about-result-value { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 18px; font-weight: 700; color: var(--ink); }
.about-stat-label, .about-result-label { font-size: 13px; color: var(--sub); line-height: 1.45; margin-top: 4px; }
.about-results { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 18px 0; }
.about-result-card { border: 1px solid var(--line); border-radius: 8px; padding: 14px; background: #fff; }
details.accordion { border: 1px solid var(--line); border-radius: 8px; padding: 14px 18px; margin: 12px 0; background: #fff; }
details.accordion summary {
  cursor: pointer;
  font-weight: 650;
  color: var(--ink);
  display: flex;
  align-items: flex-start;
  gap: 12px;
  list-style: none;
}
details.accordion summary::-webkit-details-marker { display: none; }
details.accordion summary::before {
  content: '';
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  margin-top: 8px;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: rotate(-45deg);
  transition: transform 160ms var(--ease-out);
}
details.accordion[open] summary::before { transform: rotate(45deg); }
details.accordion[open] summary { margin-bottom: 10px; }
details.accordion summary .acc-title { flex: 1; }
.acc-title { display: block; }
.acc-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.acc-badge { font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--sub); background: var(--soft); border: 1px solid var(--line); border-radius: 4px; padding: 3px 6px; }
.acc-body { padding-top: 8px; color: var(--sub); }
.acc-body p { margin-bottom: 10px; }

/* Editorial-Ruhe auf Desktop: Sektionen atmen weiter (BCG-Abgleich,
   Rhythmus-Anhebung ohne Wechsel des Systems) */
@media (min-width: 1025px) {
  .hero { padding: 80px 0 52px; }
  section.line, section.tools, section.wissen { padding-top: 72px; padding-bottom: 72px; }
  section.person { padding: 72px 0 80px; }
}

/* Sechs Nav-Punkte statt fuenf ("Loesungen" neben "Leistungen"): zwischen
   1025 und 1160px reicht die Kopfzeile nicht mehr fuer die Langfassung der
   CTA. Kurzfassung plus engere Nav-Paddings halten alle Punkte einzeilig,
   ohne dass die CTA umbricht. */
@media (min-width: 1025px) and (max-width: 1160px) {
  .header-cta .cta-long { display: none; }
  .header-cta .cta-short { display: inline; }
  .nav-link, .nav-sub-toggle { padding-left: 9px; padding-right: 9px; }
  .header-actions { margin-left: 6px; }
}

/* ---------------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------------- */
@media (max-width: 1024px) {
  .main-nav { display: none; }
  .nav-toggle { display: flex; }
  /* CTA bleibt sichtbar, nur kuerzer beschriftet */
  .header-cta .cta-long { display: none; }
  .header-cta .cta-short { display: inline; }
  /* Touch-Breiten: die beiden Dauer-Ziele der Kopfzeile auf 44px bringen.
     Nur die Hoehe waechst, die Zeilenbreite bleibt unveraendert. */
  .header-actions .header-cta { padding-top: 12px; padding-bottom: 12px; }
  .lang-link { padding-top: 12px; padding-bottom: 12px; }
}

@media (max-width: 900px) {
  .hero { padding: 48px 0 32px; }
  .hero-wash { background: rgba(255, 255, 255, 0.94); }
  .person-grid { grid-template-columns: 1fr; gap: 24px; }
  .person-photo { max-width: 200px; }
  .svc { flex-direction: column; }
  .svc a { border-left: none; border-top: 1px solid var(--line); }
  .svc a:first-child { border-top: none; }
  .svc a:hover, .svc a:focus-visible, .svc a[aria-current] { box-shadow: inset 3px 0 0 0 var(--acc); }
  .proof { grid-template-columns: 1fr 1fr; }
  .cols { grid-template-columns: 1fr; gap: 28px; }
  .tools-grid { grid-template-columns: 1fr; }
  .line-cards { grid-template-columns: 1fr; }
  .about-results { grid-template-columns: 1fr 1fr; }
  .about-stats { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .workshop-meta { grid-template-columns: 1fr 1fr; }
  .news-section .news-grid { grid-template-columns: 1fr; }
  .pillar-grid, .systems-grid, .integrations-process-steps, .extras-grid { grid-template-columns: 1fr; }
  .list-grid, .wp-grid { grid-template-columns: 1fr; }
  .article-nav { grid-template-columns: 1fr; }
  .about-hero-inner { grid-template-columns: 1fr; gap: 24px; }
  .about-hero-image-col { max-width: 220px; }
  .news-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  /* Tap-Targets im Footer: 44px Zeilenhöhe statt 8px-Abstand.
     Zeilenabstand wandert ins Padding, damit sich die Flächen nicht überlappen. */
  .footer-links li { margin-bottom: 0; }
  .footer-links a { display: block; padding: 11px 0; }
  .footer-contact div { margin-bottom: 0; }
  .footer-contact a { display: inline-block; padding: 11px 0; }
  .footer-bottom .legal { gap: 0 20px; }
  .footer-bottom .legal a { display: inline-block; padding: 12px 0; }
  /* Social-Icons: 44px-Kachel um das 20px-Icon. Der negative Aussenrand
     haelt das erste Icon an seinem Platz, das zweite rueckt um die
     Kachelbreite nach; Gap 0, damit sich die Flaechen nicht ueberlappen. */
  .footer-social { gap: 0; margin: 2px 0 0 -12px; }
  .footer-social a { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; }
  /* Umbrechende Wissen-Links: Margins neutralisieren (siehe Basis-Regel) */
  .wissen-links { gap: 0 26px; }
  .wissen-links a { margin: 0; }
}

@media (max-width: 520px) {
  .wrap { padding: 0 20px; }
  /* Typo-Step-Down: die Subzeile laeuft sonst neun Zeilen lang */
  .hero .sub { font-size: 17px; line-height: 1.55; }
  /* Header-Zeile: Logo, Sprache, CTA und Burger bleiben nebeneinander */
  .logo { font-size: 15px; }
  .header-actions { gap: 6px; margin-left: 6px; }
  .lang-link { padding: 12px 5px; }
  /* Selektor zweistufig, sonst gewinnt .btn.sm */
  .header-actions .header-cta { padding: 13px 11px; font-size: 13px; }
}

/* Kleinste gaengige Breite (375px): die Kopfzeile muss vier Elemente tragen */
@media (max-width: 400px) {
  .nav-row { gap: 4px; }
  .logo { font-size: 14px; }
  .header-actions { gap: 4px; margin-left: 0; }
  .lang-link { padding: 12px 4px; }
  .header-actions .header-cta { padding: 13px 9px; }
  .mobile-nav { padding: 16px 20px 40px; }
  .proof { grid-template-columns: 1fr; gap: 18px; }
  .ctas .btn { width: 100%; text-align: center; }
  .footer-grid { grid-template-columns: 1fr; }
  .quiz-category-row { flex-wrap: wrap; gap: 6px 12px; }
  .quiz-category-name { flex: 1 0 100%; }
}

/* ---------------------------------------------------------------
   REDUCED MOTION
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero h1, .hero .sub, .hero .ctas, .hero .svc, .proof .p { animation: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}