/*
  [MARKENNAME] — main stylesheet.

  Every visual value on this site comes from the tokens on :root below, and
  every token comes from the KIBH rebuild (docs/design-tokens.md lists the
  source line for each). Same colors, same typeface as KIBH is the one fixed
  design constraint (CLAUDE.md §6). Spacing uses only the --sp-* scale; font
  weights are 400 / 600 / 700 as defined in docs/design-tokens.md §2.

  Design idea (docs/design-konzept.md): the page behaves like a well-kept
  ledger — one left axis, ruled rows (key | entry), cards only where a choice
  is offered, one motion moment in the Startseite hero.

  Order: fonts → tokens → reset & base → utilities → header → hero →
  sections & ledger → sequences → cards → CTA band → FAQ → jump bar →
  industries → contact form → prose/legal → placeholders → footer →
  responsive → motion → print.
*/

/* --- Fonts (self-hosted, CLAUDE.md §10) ----------------------------------- */

/* The upright files carry Mulish's full weight axis; 400–1000 is declared so
   the hero core's 800 is real, not synthesised. */
@font-face {
  font-family: "Mulish";
  font-style: normal;
  font-weight: 400 1000;
  font-display: swap;
  src: url("../fonts/mulish-latin-wght.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: "Mulish";
  font-style: normal;
  font-weight: 400 1000;
  font-display: swap;
  src: url("../fonts/mulish-latin-ext-wght.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: "Mulish";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/mulish-latin-italic-wght.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 (verbatim from ../KIBH/assets/css/main.css :root) ------------- */

:root {
  --c-primary: #31363f;
  --c-secondary: #eeeeee;
  --c-text: #222831;
  --c-accent: #76abae;

  --c-white: #ffffff;
  --c-surface: #f8faf9;
  --c-surface-alt: #edf0ef;
  --c-lime: #d6d84f;
  --c-teal-muted: #587274;
  --c-teal-dark: #3c6264;
  --c-teal-deep: #1c3738;
  --c-ink: #0d1d20;

  --c-text-muted: #5b636e;
  --c-border: #e2e6e5;
  --c-accent-dark: #5f9295;
  --c-accent-soft: rgba(118, 171, 174, 0.12);
  /* hairline on dark bands: --c-secondary at low alpha */
  --c-border-dark: rgba(238, 238, 238, 0.18);

  --font-sans: Verdana, Geneva, "DejaVu Sans", sans-serif;
  --font-display: Mulish, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;

  --fs-eyebrow: 0.75rem;
  --fs-caption: 0.875rem;
  --fs-small: 0.9375rem;
  --fs-body: 1rem;
  --fs-body-lg: 1.125rem;
  --fs-lead: 1.25rem;
  --fs-h4: 1.5rem;
  --fs-h3: 1.75rem;
  --fs-h2-sm: 2rem;
  --fs-h2: 2.375rem;
  --fs-h1: 3rem;
  --fs-display: 3.25rem;
  --fs-hero: clamp(3.25rem, 5.4vw, 4rem);

  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 5rem;
  --sp-10: 7rem;

  --container: 71.25rem;
  --container-wide: 77.5rem;
  --measure: 46rem;        /* Verdana line length ≈ 65–70 characters */
  --radius: 12px;          /* cards */
  --radius-lg: 20px;       /* the hero frame */
  --header-h: 5.75rem;

  --shadow-sm: 0 1px 3px rgba(34, 40, 49, 0.06),
    0 4px 12px rgba(34, 40, 49, 0.05);
  --shadow-md: 0 4px 16px rgba(34, 40, 49, 0.08),
    0 12px 32px rgba(34, 40, 49, 0.07);

  --transition: 180ms cubic-bezier(0.4, 0, 0.2, 1);

  /* KIBH chrome colours used outside :root there (docs/design-tokens.md §1) */
  --c-tab-rest: #cecccc;      /* Kontakt tab, resting */
  --c-form-error: #a13d2d;    /* form error text */
  /* The nav's "!" (Willy, 2026-09-29): first a dark rose (#883d5d, the
     OKLCH lightness of --c-teal-dark), then, same day, "bissi helleres
     Rosa": same hue, OKLCH L 0.60, C 0.15. 4.3:1 on the white header,
     3.9:1 on the tinted pill of the active link. */
  --c-alert: #c25484;

  /* Strength of the cursor glow, one dial. KIBH has 0.26; Willy asked twice
     for less (2026-09-28): 0.12, then 0.06, a hint rather than a light. */
  --glow-a: 0.06;
}

/* --- Reset & base --------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  /* Fluid scale (Willy, 2026-09-28): up to a 1920px-wide window nothing
     changes. Beyond it the whole site grows in proportion, type, spacing,
     container, header and the 3D room alike, because every size is in rem:
     a 4K screen shows the same composition as a 1920 one, just larger. The
     height term keeps the full-screen hero fitting on short, wide windows.
     Breakpoints stay in px, so the layout switches exactly as before. */
  font-size: clamp(100%, min(100vw / 120, 100vh / 58), 300%);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.6;
  color: var(--c-text);
  background: var(--c-white);
  -webkit-font-smoothing: antialiased;
  /* No overflow-x: hidden — it would hide overflow from QA instead of fixing
     it at the source (min-width: 0 below). */
}

/* German compounds, rule 1: grid/flex children default to min-width: auto and
   refuse to shrink below the longest unbreakable word. */
.hero__grid > *,
.ledger__row > *,
.step > *,
.split > *,
.cards > *,
.principles > *,
.branche > *,
.site-header__inner > *,
.site-footer__grid > * {
  min-width: 0;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.2;
  color: var(--c-primary);
  /* German compounds, rule 2: split a word only when it truly cannot fit.
     hyphens: auto was rejected on KIBH ("maß-geschneiderte"). */
  overflow-wrap: break-word;
  hyphens: manual;
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p {
  margin: 0;
  overflow-wrap: break-word;
}

blockquote, li, dd, dt {
  overflow-wrap: break-word;
}

blockquote,
figure {
  margin: 0;
}

ul, ol {
  margin: 0;
  padding: 0;
}

a {
  color: var(--c-accent-dark);
  text-decoration: none;
  transition: color var(--transition);
}

a:hover {
  color: var(--c-teal-dark);
}

/* Links inside running text, footer links and standalone text links share
   KIBH's underline-reveal (see "Micro-interactions" at the end of the file).
   Navigation, chips and buttons are styled separately. */

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

strong { font-weight: 700; }

:focus-visible {
  outline: 3px solid var(--c-accent);
  outline-offset: 3px;
  border-radius: 3px;
}

/* --- Utilities ------------------------------------------------------------ */

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

.container--wide { max-width: var(--container-wide); }

.section {
  padding-block: var(--sp-9);
}

.section--tight { padding-block: var(--sp-8); }
.section--surface { background: var(--c-surface); }
.section--alt { background: var(--c-surface-alt); }
.section--dark {
  background: var(--c-primary);
  color: var(--c-secondary);
}
.section--dark h2,
.section--dark h3 { color: var(--c-white); }
.section--dark p { color: rgba(255, 255, 255, 0.78); }
.section--dark a { color: var(--c-accent); }
.section--dark a:hover { color: var(--c-white); }

.measure { max-width: var(--measure); }

.lead {
  font-size: var(--fs-body-lg);
  color: var(--c-text-muted);
  text-wrap: pretty;
}
.section--dark .lead { color: var(--c-secondary); }

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: var(--sp-3) var(--sp-5);
  background: var(--c-primary);
  color: var(--c-white);
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

/* --- Buttons -------------------------------------------------------------- */

.btn {
  font-family: var(--font-display);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 0.8125rem 1.625rem;
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  border-radius: 6px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background var(--transition), color var(--transition),
    border-color var(--transition), transform var(--transition);
}

@media (hover: hover) {
  .btn:hover { transform: translateY(-1px); }
}
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-white);
}
.btn--primary:hover {
  background: var(--c-accent-dark);
  border-color: var(--c-accent-dark);
  color: var(--c-white);
}

.btn--outline {
  border-color: var(--c-primary);
  color: var(--c-primary);
}
.btn--outline:hover {
  background: var(--c-primary);
  color: var(--c-white);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}

/* A section that ends on a CTA row needs less room below it (KIBH lesson). */
.section:has(> .container > .btn-row:last-child) { padding-bottom: var(--sp-5); }

/* A plain text link that stands on its own (next to a button, after a list).
   44px tall on touch screens without moving the text baseline. */
.text-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-small);
  color: var(--c-teal-dark);
}

/* --- Header --------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  background: var(--c-white);
  border-bottom: 1px solid var(--c-border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  height: 100%;
}

.brand {
  display: inline-flex;
  align-items: center;
  color: var(--c-primary);
  flex-shrink: 0;
}
.brand:hover { color: var(--c-primary); }

/* WeDoo logo: one line of letters, so it is sized by its height: 34 px
   desktop, 28 px phones (bildbedarf.md PH-15; Willy, 2026-09-29: bigger,
   to fill the white bar). */
.brand__logo {
  display: block;
  width: auto;
  height: 2.125rem;
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
}

.nav__list {
  display: flex;
  align-items: center;
  /* Six entries, a caret and the CTA have to share the bar: the gap is the
     tightest of the three levers (size, padding, gap) and the only one that
     does not change how the links read. */
  gap: var(--sp-2);
  list-style: none;
}

/* KIBH: a tinted pill behind the label on hover and on the current page. */
.nav__link {
  display: inline-flex;
  align-items: center;
  padding: var(--sp-2) var(--sp-3);
  border-radius: 6px;
  font-family: var(--font-display);
  font-size: var(--fs-small);
  font-weight: 700;
  white-space: nowrap;
  color: var(--c-primary);
  transition: background var(--transition), color var(--transition);
}
.nav__link:hover,
.nav__link.is-active {
  background: var(--c-accent-soft);
  color: var(--c-teal-dark);
}
/* The E-Rechnungspflicht is a legal deadline, and the nav says so (Willy,
   2026-09-29): a plain "!" in the label's own face and weight, in dark rose.
   (A white "!" on a red disc came first and was too loud.) The label
   carries the meaning; the "!" is hidden from screen readers. */
/* The larger "!" shares one line with the label (both sit in one <span>),
   so it stands on the label's baseline instead of being centred as a flex
   item, which put it low on some screens. From the baseline it is nudged
   down by about half of what it is taller than the digits, so it overhangs
   "2027" equally above and below: measured at 1x to 3x, within a pixel
   (Willy, 2026-09-29). */
.nav__alert {
  position: relative;
  top: var(--alert-drop, 0.08em);
  margin-left: var(--sp-1);
  font-size: 1.25em;   /* a touch larger than the label (Willy, 2026-09-29) */
  line-height: 1;
  color: var(--c-alert);
}

/* --- Navigation dropdown (Referenzen) -------------------------------------
   KIBH's dropdown (../KIBH, commit 00adb00^) with one change: the caret is a
   real button beside the link instead of part of it. Hover still opens it for
   a pointer, the button opens it for a finger and for the keyboard, and the
   link itself always goes to the Referenzen page. */
.nav__item--has-sub {
  position: relative;
  display: flex;
  align-items: center;
  border-radius: 6px;
  transition: background var(--transition);
}
.nav__item--has-sub:hover,
.nav__item--has-sub:focus-within,
.nav__item--has-sub:has(.is-active) { background: var(--c-accent-soft); }
/* The caret sits directly behind the word rather than a gap away, and the pair
   highlights as one (Hari, 2026-09-23). */
.nav__link--sub { padding-right: var(--sp-1); }
/* the pill is the item's now, so the link must not paint a second one */
.nav__item--has-sub .nav__link--sub:hover,
.nav__item--has-sub .nav__link--sub.is-active { background: transparent; }
.nav__caret {
  display: grid;
  place-items: center;
  width: 1.4rem;
  height: 44px;
  margin-left: -0.2rem;
  color: var(--c-primary);
}
.nav__caret::before {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--transition);
}
.nav__caret[aria-expanded="true"]::before { transform: rotate(-135deg) translate(-3px, -3px); }
.nav__item--has-sub:hover .nav__link--sub,
.nav__item--has-sub:hover .nav__caret,
.nav__item--has-sub:focus-within .nav__caret,
.nav__item--has-sub:has(.is-active) .nav__caret { color: var(--c-teal-dark); }

.nav__sub {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 17rem;
  padding: var(--sp-2);
  list-style: none;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--transition), transform var(--transition),
    visibility var(--transition);
  z-index: 10;
}
@media (hover: hover) {
  .nav__item--has-sub:hover .nav__sub { opacity: 1; visibility: visible; transform: translateY(0); }
}
.nav__item--has-sub:focus-within .nav__sub,
.nav__sub.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav__sub a {
  font-family: var(--font-display);
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--c-text);
  border-radius: 8px;
}
.nav__sub a:hover,
.nav__sub a.is-active { background: var(--c-accent-soft); color: var(--c-teal-dark); }

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  border-radius: 6px;
}
.nav-toggle span {
  display: block;
  width: 1.375rem;
  height: 2px;
  background: var(--c-primary);
  transition: transform var(--transition), opacity var(--transition);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-backdrop {
  display: none;
  position: fixed;
  inset: var(--header-h) 0 0 0;
  background: rgba(34, 40, 49, 0.4);
  z-index: 90;
}
.nav-backdrop.is-open { display: block; }

/* --- Hero (Startseite): the 3D room ---------------------------------------- */
/*
  A dark room, not a printed page (Willy, 2026-09-28, Miro template): KIBH's
  darkest ground (--c-ink) with a deep-teal bloom, a floor grid running off
  into depth, and a stage in real CSS perspective on which the modules float
  on their own Z planes around the Odoo core. The glass ∞ behind them is drawn
  on canvas by main.js ("hero scene"). Colours are KIBH tokens only.
*/
.hero {
  position: relative;
  display: grid;
  align-items: center;
  /* The room fills the first screen, whatever its height (Willy,
     2026-09-28): the next section only shows once the visitor scrolls. */
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
  padding-block: var(--sp-8);
  /* No ground of its own: the hero stands in the page-wide room (below). */
  background: radial-gradient(ellipse 45% 55% at 70% 45%, rgba(118, 171, 174, 0.16), transparent 70%);
  color: var(--c-secondary);
  /* Clipped sideways only, at the viewport edge. Upwards and downwards the ∞
     and the tilted cards may pass the hero's box: above, the header covers
     them; below, the room simply goes on. A vertical clip drew a hard line
     across the room (Willy, 2026-09-28). `hidden` is the fallback where
     `clip` is unknown. */
  overflow: hidden;
  overflow: clip visible;
  isolation: isolate;
}

/* The room: KIBH's darkest ground with a deep-teal bloom, and a floor grid
   laid flat and tilted away, fading into the dark before the horizon. Fixed
   to the viewport, so the floor stays put while the sections scroll past. */
.room {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  perspective: 43.75rem;
  perspective-origin: 50% 20%;
  background: radial-gradient(ellipse 70% 50% at 15% 100%, rgba(28, 55, 56, 0.85), transparent 70%);
}
.room__floor {
  position: absolute;
  left: -50%;
  right: -50%;
  bottom: -8%;
  height: 70%;
  background:
    repeating-linear-gradient(to right, rgba(118, 171, 174, 0.2) 0 1px, transparent 1px 5.5rem),
    repeating-linear-gradient(to bottom, rgba(118, 171, 174, 0.2) 0 1px, transparent 1px 5.5rem);
  transform: rotateX(72deg);
  transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 75%);
  mask-image: linear-gradient(to top, #000 10%, transparent 75%);
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  gap: var(--sp-6);
  align-items: center;
}

.hero h1 {
  font-size: var(--fs-hero);
  line-height: 1.1;
  color: var(--c-white);
  /* The two lines are set by hand; balancing would pull "Ihr" onto a line
     of its own. */
  text-wrap: wrap;
}
/* The WeDoo logo on its own line above the claim. Sized off the hero type,
   so its cap height stays just under the h1's on every screen (40 px at a
   64 px h1). */
.hero__logo {
  display: block;
  width: auto;
  height: calc(var(--fs-hero) * 0.63);
  margin-bottom: var(--sp-5);
}
/* "für Dienstleister" always starts its own line, as Willy set it. */
.hero__line { display: block; }
/* Willy asked for "Dienstleister" to stand out (2026-09-28). The KIBH lime,
   the same token as the site's only other accented word ("weniger"); see
   CLAUDE.md §6 for the reconciliation. */
.hero__accent { position: relative; color: var(--c-lime); }
/* Underlined by hand (Willy, 2026-10-01, variant C "Buntstift" of three):
   a thick lime crayon stroke with a waxy grain (#crayon filter in the
   markup), drawn twice like a crayon going there and back: the first pass
   left to right, then the second, right to left (its path runs that way).
   Once, after the hero has arrived; under reduced motion it is simply
   there. The stroke scales with the word's font size, since the viewBox
   height maps onto 0.34em. No non-scaling-stroke: with it, the dashes that
   draw the line broke it into pieces. */
.hero__scribble {
  position: absolute;
  left: -0.03em;
  bottom: -0.24em;
  width: calc(100% + 0.08em);
  height: 0.34em;
  overflow: visible;
  pointer-events: none;
}
.hero__scribble path {
  fill: none;
  stroke: var(--c-lime);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: url(#crayon);
}
.hero__scribble path + path { stroke-width: 5; }
@media (prefers-reduced-motion: no-preference) {
  .hero__scribble path {
    stroke-dasharray: 1 1;
    stroke-dashoffset: 1;
    animation: scribble 0.6s cubic-bezier(0.45, 0, 0.4, 1) 1.5s forwards;
  }
  /* the way back starts as the first pass arrives */
  .hero__scribble path + path { animation-duration: 0.5s; animation-delay: 2.08s; }
}
@keyframes scribble { to { stroke-dashoffset: 0; } }

.hero__lead {
  max-width: 32rem;
  margin-top: var(--sp-5);
  font-size: var(--fs-body-lg);
  color: rgba(238, 238, 238, 0.72);
  text-wrap: pretty;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-5);
  margin-top: var(--sp-6);
}
.hero .text-link { color: var(--c-secondary); }
.hero .text-link:hover { color: var(--c-accent); }

/* --- The scene ------------------------------------------------------------ */

.hero__scene {
  position: relative;
  --depth: 1; /* one dial for how deep the room is; shallower on phones */
  aspect-ratio: 1 / 0.95;
  perspective: 68.75rem;
  perspective-origin: 55% 45%;
}
.hero__stage {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
}
.hero__links {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
/* Dashes, not dots (Willy, 2026-09-28, a touch stronger 2026-09-29): each
   module visibly wired to the core. They run centre to centre and show in
   the gaps between the cards. */
.hero__links line {
  stroke: var(--c-accent);
  stroke-width: 2;
  stroke-dasharray: 0.5rem 0.375rem;
}
.hero__halo {
  position: absolute;
  left: 57%;
  top: 50%;
  width: 70%;
  aspect-ratio: 1;
  translate: -50% -50%;
  background: radial-gradient(circle, rgba(214, 216, 79, 0.1), rgba(118, 171, 174, 0.12) 35%, transparent 68%);
  transform: translateZ(-7.5rem);
}
/* The ∞ is laid out on the scene (main.js), but swings up to a tenth of the
   scene's height past its top and bottom, and its bloom further still. So
   the canvas runs well past the scene on every side, and its outer rim fades
   out: however the knot turns, no stroke ends on the canvas's edge. */
.hero__knot {
  position: absolute;
  inset: -20% -10%;
  width: 120%;
  height: 140%;
  pointer-events: none;
  -webkit-mask-image:
    linear-gradient(to bottom, transparent, #000 6%, #000 94%, transparent),
    linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to bottom, transparent, #000 6%, #000 94%, transparent),
    linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-composite: intersect;
}

/* Cards: centred on (--x, --y), lifted to --z. `translate` centres, `transform`
   carries the depth, so the entrance animation can own `transform` alone. */
.hero__mods {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  /* without this the list flattens its cards into one plane and the core
     would always sit in front of them */
  transform-style: preserve-3d;
}
.hero__mod,
.hero__core {
  position: absolute;
  translate: -50% -50%;
  transform: translateZ(calc(var(--z) * var(--depth)));
  transform-style: preserve-3d;
}
.hero__mod { left: var(--x); top: var(--y); }
.hero__mod a {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 0.5rem 1rem 0.5rem 0.5rem;
  font-family: var(--font-display);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  color: var(--c-primary);
  background: rgba(238, 240, 239, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 10px;
  /* Depth, not decoration: a long dark drop onto the room and a faint teal
     rim light from the glass behind. */
  box-shadow:
    0 24px 40px -12px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(118, 171, 174, 0.15),
    0 0 28px rgba(118, 171, 174, 0.12);
  transition: scale var(--transition), box-shadow var(--transition);
}
.hero__mod a:focus-visible { outline: 2px solid var(--c-lime); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .hero__mod a:hover {
    scale: 1.05;
    box-shadow:
      0 30px 48px -12px rgba(0, 0, 0, 0.6),
      0 0 0 1px rgba(118, 171, 174, 0.5),
      0 0 36px rgba(118, 171, 174, 0.3);
  }
}
.hero__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 7px;
  background: var(--c-accent);
}
.hero__icon svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: var(--c-white);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero__core {
  left: 50%;
  top: 44%;
  display: grid;
  justify-items: center;
  gap: var(--sp-1);
  padding: 1rem 1.5rem;
  text-align: center;
  background: rgba(238, 240, 239, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 14px;
  box-shadow:
    0 36px 60px -16px rgba(0, 0, 0, 0.65),
    0 0 60px rgba(214, 216, 79, 0.12),
    0 0 0 1px rgba(118, 171, 174, 0.2);
}
/* The one 800 on the site and the core's one colour (Willy, 2026-09-28:
   "dicker und mit Farbe"). A label in the scene, not a heading; the darkest
   KIBH teal keeps it readable on the light card (5.8:1). */
.hero__core-name {
  font-family: var(--font-display);
  font-size: clamp(1.625rem, 2.3vw, 2rem);
  font-weight: 800;
  line-height: 1.15;
  color: var(--c-teal-dark);
  white-space: nowrap;
}
.hero__core-sub {
  font-size: var(--fs-caption);
  color: var(--c-text-muted);
  white-space: nowrap;
}

/* Where each card floats: centre (x, y) on the scene, depth z, and a phase
   offset (d) so the six do not bob in step. Order = DOM order.
   Willy, 2026-09-29: Personal and Zeiterfassung lead, so they sit on top on
   the nearest planes (largest) and arrive first; CRM and Finanzen move to
   the bottom. Fertigung and Lager keep their places and planes and are only
   scaled down (--s, about the card's own centre, so they do not move); the
   factors bring both below every other card at every depth setting. */
.hero__core { --z: 4.375rem; --i: 0; }
.hero__mod:nth-child(1) { --x: 15%; --y: 17%; --z: 12rem;    --d: 0s;    --i: 1; }
.hero__mod:nth-child(2) { --x: 70%; --y: 12%; --z: 14.375rem; --d: -1.6s; --i: 2; }
.hero__mod:nth-child(3) { --x: 17%; --y: 74%; --z: 6.875rem; --d: -3.1s; --i: 3; }
.hero__mod:nth-child(4) { --x: 67%; --y: 80%; --z: 5rem;     --d: -2.4s; --i: 4; }
.hero__mod:nth-child(5) { --x: 9%;  --y: 41%; --z: 6.875rem; --d: -4.2s; --i: 5; --s: 0.88; }
.hero__mod:nth-child(6) { --x: 95%; --y: 49%; --z: 11.875rem; --d: -0.8s; --i: 6; --s: 0.82; }
.hero__mod--minor { scale: var(--s); }
/* The two lead cards keep the lit rim the others only get on hover. */
.hero__mod--lead a {
  box-shadow:
    0 24px 40px -12px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(118, 171, 174, 0.5),
    0 0 36px rgba(118, 171, 174, 0.3);
}
/* Lager & Einkauf shares the core's row and needs the gutter right of the
   scene to keep clear of it. Where that gutter is narrower, the card moves
   to a farther plane (smaller, and it swings less with the stage tilt), then
   steps back in from the viewport edge. Below 1270 px the row is too full
   for a gap; the card only stays on screen. */
@media (min-width: 1200px) and (max-width: 1439px) {
  .hero__mod:nth-child(6) { --x: 98%; --z: 3.75rem; }
}
@media (min-width: 1200px) and (max-width: 1339px) {
  .hero__mod:nth-child(6) { --x: 94%; }
}
@media (min-width: 1200px) and (max-width: 1269px) {
  .hero__mod:nth-child(6) { --x: 88%; }
}
/* Narrower desktops: a shallower room, so the nearest cards do not grow
   past the edge of the viewport. */
@media (max-width: 1199px) {
  .hero__scene { --depth: 0.55; }
  .hero__mod:nth-child(6) { --x: 82%; }
}

/* --- Startseite: the room continues below the hero ----------------------- */
/*
  Willy, 2026-09-28: the dark 3D room runs through the whole Startseite, not
  just the hero. Every section is transparent over the fixed room; the
  ledgers become glass slabs that rise out of the depth once as they scroll
  in; the CTA band is one slab floating in the room. Scoped to .page-home,
  every other page keeps its light layout. /warum-odoo/ and /referenzen/
  (Willy, 2026-10-01) stand in the same room: their selectors join these
  rules through :is(.page-home, .page-odoo, .page-referenzen), which keeps
  the specificity of .page-home, so the Startseite renders exactly as
  before.
*/
body.page-home,
body.page-erechnung,
body.page-odoo,
body.page-referenzen {
  background: var(--c-ink);
  color: var(--c-secondary);
}
:is(.page-home, .page-odoo, .page-referenzen) .section,
:is(.page-home, .page-odoo, .page-referenzen) .section--surface { background: transparent; }
:is(.page-home, .page-odoo, .page-referenzen) .section-head h2 { color: var(--c-white); }
:is(.page-home, .page-odoo, .page-referenzen) .section-head p,
:is(.page-home, .page-odoo, .page-referenzen) .after-ledger { color: rgba(238, 238, 238, 0.72); }
:is(.page-home, .page-odoo, .page-referenzen) .section .text-link { color: var(--c-accent); }
:is(.page-home, .page-odoo, .page-referenzen) .section .text-link:hover { color: var(--c-white); }

:is(.page-home, .page-odoo, .page-referenzen) .ledger {
  display: grid;
  gap: var(--sp-3);
  border: 0;
  perspective: 60rem;
  perspective-origin: 50% 0;
}
:is(.page-home, .page-odoo, .page-referenzen) .ledger__row {
  padding: var(--sp-5) var(--sp-6);
  background: linear-gradient(135deg, rgba(118, 171, 174, 0.1), rgba(238, 240, 239, 0.03) 60%);
  border: 1px solid rgba(118, 171, 174, 0.2);
  border-radius: 12px;
  /* depth: a long drop onto the floor, and a lit top edge like glass */
  box-shadow:
    0 1.5rem 3rem -1.5rem rgba(0, 0, 0, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
:is(.page-home, .page-odoo, .page-referenzen) .ledger__key,
:is(.page-home, .page-odoo, .page-referenzen) a.ledger__row .ledger__key { color: var(--c-white); }
:is(.page-home, .page-odoo, .page-referenzen) .ledger__entry { color: rgba(238, 238, 238, 0.78); }
.page-home a.ledger__row {
  transition: transform var(--transition), background var(--transition),
    border-color var(--transition);
}
@media (hover: hover) {
  .page-home a.ledger__row:hover {
    transform: translateY(-3px);
    background: linear-gradient(135deg, rgba(118, 171, 174, 0.2), rgba(238, 240, 239, 0.05) 60%);
    border-color: rgba(118, 171, 174, 0.5);
  }
  .page-home a.ledger__row:hover .ledger__key { color: var(--c-accent); }
}
.page-home a.ledger__row:focus-visible {
  background: rgba(118, 171, 174, 0.2);
  border-color: var(--c-accent);
}

:is(.page-home, .page-odoo, .page-referenzen) .cta-band {
  padding-block: var(--sp-8) var(--sp-9);
  background: transparent;
  border-top: 0;
  perspective: 60rem;
}
/* The band's container becomes the slab, inset to the same text edge as the
   sections above it. */
:is(.page-home, .page-odoo, .page-referenzen) .cta-band__inner {
  width: calc(100% - 2 * var(--sp-5));
  max-width: calc(var(--container) - 2 * var(--sp-5));
  padding: var(--sp-7);
  background:
    radial-gradient(ellipse 60% 120% at 100% 0%, rgba(118, 171, 174, 0.18), transparent 70%),
    rgba(13, 29, 32, 0.6);
  border: 1px solid rgba(118, 171, 174, 0.3);
  border-radius: 16px;
  box-shadow:
    0 2.5rem 5rem -2rem rgba(0, 0, 0, 0.8),
    0 0 4rem rgba(118, 171, 174, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
/* The Startseite's band stacks question, text and buttons (Willy,
   2026-09-28): beside the button the text broke into three lines. The
   text breaks after its first sentence, a <br> in the front matter; below
   1025px the column is too narrow for it, so the lines flow freely. The
   question is short since 2026-09-29 and needs no break of its own.
   /warum-odoo/ stacks its band the same way. */
:is(.page-home, .page-odoo, .page-referenzen) .cta-band__inner {
  grid-template-columns: 1fr;
  gap: var(--sp-6);
}
:is(.page-home, .page-odoo, .page-referenzen) .cta-band__actions { justify-content: flex-start; }
@media (max-width: 1024px) {
  :is(.page-home, .page-odoo, .page-referenzen) .cta-band br { display: none; }
}

/* The team, last on the page (Willy, 2026-09-29): the grey plate would be a
   light box in the room, so it becomes the same glass as the ledger rows.
   Above it the CTA band already ends on --sp-9; --sp-8 on top gives the
   same gap as between the modules and the band. */
.page-home .team-section { padding-top: var(--sp-8); }
.page-home .member__photo {
  background: linear-gradient(135deg, rgba(118, 171, 174, 0.1), rgba(238, 240, 239, 0.03) 60%);
  border: 1px solid rgba(118, 171, 174, 0.2);
  border-radius: 12px;
  box-shadow:
    0 1.5rem 3rem -1.5rem rgba(0, 0, 0, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.page-home .member__name { color: var(--c-white); }
.page-home .member__role { color: rgba(238, 238, 238, 0.72); }
.page-home .member__link:hover { color: var(--c-white); }

/* E-Rechnung and Warum Odoo too: their footers sit over the same room. */
.page-home .site-footer,
.page-erechnung .site-footer,
.page-odoo .site-footer,
.page-referenzen .site-footer {
  background: rgba(8, 18, 20, 0.72);
  border-top-color: rgba(118, 171, 174, 0.18);
}

/* Rising out of the depth, once, as a block scrolls in: the ledger rows one
   after another, the CTA slab as a whole. Replaces the flat slide-up on this
   page; nothing moves under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .js-anim :is(.page-home, .page-odoo, .page-referenzen) .ledger[data-anim] { opacity: 1; transform: none; }
  .js-anim :is(.page-home, .page-odoo, .page-referenzen) .ledger[data-anim] > li {
    opacity: 0;
    transform: translate3d(0, 2rem, -8rem) rotateX(12deg);
    transform-origin: 50% 0;
    transition: opacity 0.9s ease, transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .js-anim :is(.page-home, .page-odoo, .page-referenzen) .ledger[data-anim].is-in > li { opacity: 1; transform: none; }
  .js-anim :is(.page-home, .page-odoo, .page-referenzen) .ledger > li:nth-child(2) { transition-delay: 110ms; }
  .js-anim :is(.page-home, .page-odoo, .page-referenzen) .ledger > li:nth-child(3) { transition-delay: 220ms; }
  .js-anim :is(.page-home, .page-odoo, .page-referenzen) .ledger > li:nth-child(4) { transition-delay: 330ms; }
  .js-anim :is(.page-home, .page-odoo, .page-referenzen) .cta-band [data-anim] {
    transform: translate3d(0, 2rem, -10rem) rotateX(10deg);
    transform-origin: 50% 0;
    transition: opacity 1s ease, transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .js-anim :is(.page-home, .page-odoo, .page-referenzen) .cta-band [data-anim].is-in { transform: none; }
}

@media (max-width: 767px) {
  :is(.page-home, .page-odoo, .page-referenzen) .ledger__row { padding: var(--sp-4) var(--sp-5); }
  :is(.page-home, .page-odoo, .page-referenzen) .cta-band__inner {
    width: calc(100% - 2 * var(--sp-4));
    padding: var(--sp-6) var(--sp-5);
  }
}

/* "Kennen Sie das?": the headache of the status quo beside the three pains
   (Willy, 2026-09-28). The template frame cuts the raised boot off at the
   picture's left edge; a short fade takes that edge back, and on desktop the
   picture also runs under the glass rows, so the leg seems to come from
   behind them. */
.situation__media img {
  width: 100%;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 10%);
  mask-image: linear-gradient(to right, transparent, #000 10%);
}
@media (min-width: 1025px) {
  .situation__grid {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
      "head  media"
      "list  media"
      "after media";
  }
  .situation .section-head { grid-area: head; }
  .situation .ledger { grid-area: list; position: relative; z-index: 1; }
  .situation .after-ledger { grid-area: after; }
  /* one column of text is too narrow for key | entry side by side */
  .situation .ledger__row { grid-template-columns: 1fr; gap: var(--sp-2); }
  .situation__media {
    grid-area: media;
    align-self: center;
    margin-left: calc(-1 * var(--sp-7));
  }
}
@media (max-width: 1024px) {
  .situation__media {
    max-width: 26rem;
    margin: 0 auto var(--sp-6);
  }
}

/* --- Sections & the ledger ------------------------------------------------ */

.section-head {
  max-width: var(--measure);
  margin-bottom: var(--sp-7);
}
.section-head h2 { font-size: var(--fs-h2); }
/* The one line of accent per section: a 2px rule under the title. */
.section-head h2::after {
  content: "";
  display: block;
  width: 4rem;
  height: 2px;
  margin-top: var(--sp-4);
  background: var(--c-accent);
}
.section-head p {
  margin-top: var(--sp-4);
  font-size: var(--fs-body-lg);
  color: var(--c-text-muted);
  text-wrap: pretty;
}
.section--dark .section-head p { color: var(--c-secondary); }

/* Ledger rows: a list of records. Hairline = one record ends. */
.ledger {
  list-style: none;
  border-top: 1px solid var(--c-border);
}
.ledger__row {
  display: grid;
  grid-template-columns: minmax(14rem, 1fr) 3fr;
  gap: var(--sp-5);
  padding-block: var(--sp-5);
  border-bottom: 1px solid var(--c-border);
}
.ledger--plain .ledger__row { grid-template-columns: 1fr; }
.ledger__key {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: 1.2;
  color: var(--c-primary);
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: manual;
}
.ledger__entry {
  max-width: var(--measure);
}
.ledger__entry p + p { margin-top: var(--sp-3); }
/* A row that is a link (Startseite: modules, industries). The whole row is
   the target; on a real pointer it tints like the nav pill. No lift — a row
   is a line in the ledger, not a card. */
a.ledger__row {
  color: inherit;
  min-height: 44px;
  transition: background var(--transition);
}
a.ledger__row .ledger__key { color: var(--c-primary); }
a.ledger__row:hover { color: inherit; }
a.ledger__row .ledger__key { transition: color var(--transition); }
@media (hover: hover) {
  a.ledger__row:hover { background: var(--c-accent-soft); }
  a.ledger__row:hover .ledger__key { color: var(--c-teal-dark); }
}
a.ledger__row:focus-visible { background: var(--c-accent-soft); }
a.ledger__key:hover { color: var(--c-accent-dark); }

.section--dark .ledger,
.section--dark .ledger__row { border-color: var(--c-border-dark); }
.section--dark .ledger__key { color: var(--c-white); }

.after-ledger {
  max-width: var(--measure);
  margin-top: var(--sp-5);
}

/* --- Sequences (numbered only because they are sequences) ----------------- */

.steps {
  list-style: none;
  counter-reset: step;
  margin-left: var(--sp-2);
  padding-left: var(--sp-5);
  border-left: 1px solid var(--c-border);
}
.step {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: var(--sp-4);
  padding-block: var(--sp-4);
}
.step::before {
  counter-increment: step;
  content: counter(step);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: 1.6;
  color: var(--c-accent-dark);
}
.step p { max-width: var(--measure); }

/* --- Cards (only where a choice or an object is carried) ------------------ */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: var(--sp-5);
}
.card {
  padding: var(--sp-5);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-white);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition),
    border-color var(--transition);
}
/* A card that is a link inherits the text colours of a plain card. */
a.card {
  display: block;
  color: inherit;
}
a.card:hover { color: inherit; }
/* KIBH: only cards that lead somewhere lift, and only for a real pointer —
   a touch browser latches :hover on tap and the card would stay lifted. */
@media (hover: hover) {
  .card--link:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--c-accent);
  }
}
/* Card titles sit in columns ~250-300px wide, where single German compounds
   ("Projektimplementierung") are simply wider than the box. Hyphenation is the
   normal German answer at this size and beats break-word chopping the word
   with no hyphen at all. It stays off for display headings (KIBH lesson). */
.card h3,
.flow__panel h3 { hyphens: manual; }
.card h3 { font-size: var(--fs-h4); }
.card h3 + p { margin-top: var(--sp-3); }

/* --- Two-column split (text | image) -------------------------------------- */

.split {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--sp-8);
  align-items: center;
}
.split__text p + p { margin-top: var(--sp-4); }
.split__text .text-link { margin-top: var(--sp-4); }
.split__media {
  border-radius: var(--radius);
  overflow: hidden;
}

/* Three principles side by side — text, not cards */
.principles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  column-gap: var(--sp-7);
}
/* Each principle spans both rows as a subgrid: the three headings share one
   row and the three texts start on one line, even if a heading wraps. */
.principles > div {
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
}
.principles h3 { font-size: var(--fs-h4); align-self: end; }
.principles h3 + p { margin-top: var(--sp-3); }
.principles p { text-wrap: pretty; }

/* --- CTA band (shared partial, light — the button is the only teal) ------- */

/* Dark, like the content bands (Hari, 2026-09-19 — the Phase 4 concept had it
   light). The teal rule on top stays; the button is still the brightest thing. */
.cta-band {
  padding-block: var(--sp-8);
  background: var(--c-primary);
  color: var(--c-secondary);
  border-top: 2px solid var(--c-accent);
}
.cta-band h2 { color: var(--c-white); }
.cta-band p { color: rgba(255, 255, 255, 0.78); }
.cta-band .ph { color: var(--c-secondary); border-color: var(--c-accent); }
.cta-band .text-link { color: var(--c-accent); }
.cta-band .text-link:hover { color: var(--c-white); }
.cta-band__inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--sp-7);
  align-items: center;
}
.cta-band h2 { font-size: var(--fs-h2-sm); }
.cta-band p { margin-top: var(--sp-4); max-width: var(--measure); }
.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-5);
  justify-content: flex-end;
}

/* --- Inner-page hero: typography only ------------------------------------- */

.page-hero {
  padding-block: var(--sp-9) var(--sp-8);
  /* KIBH inner-page hero ground */
  background:
    radial-gradient(ellipse 60% 70% at 85% 10%, var(--c-accent-soft), transparent 70%),
    var(--c-surface);
}
.page-hero h1 { max-width: 28ch; }
.page-hero .lead {
  margin-top: var(--sp-5);
  max-width: var(--measure);
}
.page-hero .btn-row { margin-top: var(--sp-6); }
.page-hero + .section { padding-top: var(--sp-8); }

/* --- FAQ (native details, no JS) ------------------------------------------ */

.faq {
  max-width: var(--measure);
  border-top: 1px solid var(--c-border);
}
.faq details {
  border-bottom: 1px solid var(--c-border);
}
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-4);
  padding-block: var(--sp-4);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-body-lg);
  color: var(--c-primary);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  flex-shrink: 0;
  font-size: var(--fs-h4);
  line-height: 1;
  color: var(--c-accent-dark);
  transition: transform var(--transition);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding-bottom: var(--sp-5); }

@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .faq details::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size var(--transition), content-visibility var(--transition) allow-discrete;
  }
  .faq details[open]::details-content { block-size: auto; }
}

/* --- Jump bar (Branchen) -------------------------------------------------- */

.jump {
  position: sticky;
  top: var(--header-h);
  z-index: 50;
  background: var(--c-white);
  border-bottom: 1px solid var(--c-border);
}
.jump__list {
  display: flex;
  gap: var(--sp-3);
  padding-block: var(--sp-3);
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}
.jump__list::-webkit-scrollbar { display: none; }
.jump__link {
  padding: var(--sp-2) var(--sp-4);
  border-radius: 6px;
  background: var(--c-accent-soft);
  font-family: var(--font-display);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--c-teal-dark);
  white-space: nowrap;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.jump__link:hover { background: var(--c-secondary); color: var(--c-primary); }

/* --- Industry block ------------------------------------------------------- */

.branche {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: var(--sp-7);
  scroll-margin-top: calc(var(--header-h) + 4rem);
}
.branche h3 {
  font-size: var(--fs-lead);
  margin-bottom: var(--sp-3);
}
.branche__fit h3 + p { margin-bottom: var(--sp-5); }
.branche__fit p:last-child { margin-bottom: 0; }
section[id] { scroll-margin-top: calc(var(--header-h) + 4rem); }

/* --- Contact -------------------------------------------------------------- */

.form {
  display: grid;
  gap: var(--sp-4);
}
.form label {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-small);
  color: var(--c-primary);
  margin-bottom: var(--sp-2);
}
.form input,
.form textarea {
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  font: inherit;
  color: var(--c-text);
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: 6px;
}
.form input:focus-visible,
.form textarea:focus-visible {
  outline: 3px solid var(--c-accent);
  outline-offset: 0;
  border-color: var(--c-accent);
}
.form textarea { min-height: 8rem; resize: vertical; }
.form__check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-3);
  align-items: start;
  font-size: var(--fs-small);
}
.form__check input { width: 1.25rem; height: 1.25rem; margin-top: 0.15rem; accent-color: var(--c-accent-dark); }
.form__check label { font-family: var(--font-sans); font-weight: 400; margin: 0; color: var(--c-text); }
.form .btn { justify-self: start; }
.form__status {
  padding: var(--sp-4) var(--sp-5);
  border-radius: 6px;
  background: var(--c-accent-soft);
  color: var(--c-teal-dark);
}
.form__status--error { color: var(--c-form-error); }
.form__status[hidden] { display: none; }
.form__note { font-size: var(--fs-caption); color: var(--c-text-muted); }

.contact-details p + p { margin-top: var(--sp-2); }

/* --- Prose (legal pages) -------------------------------------------------- */

.prose { max-width: var(--measure); }
.prose h2 {
  font-size: var(--fs-h3);
  margin-top: var(--sp-7);
}
.prose h3 {
  font-size: var(--fs-h4);
  margin-top: var(--sp-6);
}
.prose p,
.prose ul,
.prose ol { margin-top: var(--sp-4); }
.prose ul,
.prose ol { padding-left: 1.25em; }
.prose li + li { margin-top: var(--sp-2); }

.draft-notice {
  max-width: var(--measure);
  margin-bottom: var(--sp-7);
  padding: var(--sp-4) var(--sp-5);
  border: 2px dashed var(--c-accent-dark);
  border-radius: 6px;
  background: var(--c-accent-soft);
  color: var(--c-teal-dark);
  font-size: var(--fs-small);
}

/* --- Placeholders (clearly not final — docs/platzhalter.md) --------------- */

.ph {
  display: inline;
  padding: 0 var(--sp-2);
  border: 1px dashed var(--c-accent-dark);
  border-radius: 3px;
  background: var(--c-accent-soft);
  color: var(--c-teal-dark);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.ph-img {
  display: grid;
  place-items: center;
  padding: var(--sp-4);
  text-align: center;
  font-size: var(--fs-caption);
  color: var(--c-text-muted);
  border: 2px dashed var(--c-accent-dark);
  border-radius: var(--radius);
  background: repeating-linear-gradient(45deg, var(--c-surface-alt) 0 0.75rem, var(--c-surface) 0.75rem 1.5rem);
}
.ph-img--16x10 { aspect-ratio: 16 / 10; }
.ph-img--4x3 { aspect-ratio: 4 / 3; }
.ph-img--1x1 { aspect-ratio: 1 / 1; }
.ph-img--wide { aspect-ratio: 3 / 1; }
.section--dark .ph-img { color: var(--c-secondary); border-color: var(--c-accent); background: repeating-linear-gradient(45deg, rgba(238,238,238,.06) 0 0.75rem, rgba(238,238,238,.12) 0.75rem 1.5rem); }
.section--dark .ph { color: var(--c-secondary); border-color: var(--c-accent); }

/* Team, taken from KIBH's homepage (../KIBH: the .page-home .member rules).
   Portrait above the name on a grey plate rather than beside it in a bordered
   card, the two members centred as a pair, name and LinkedIn on one row under
   the plate. Measurements are KIBH's own. Since 2026-09-29 on the Startseite,
   without KIBH's quotes; its dark-room colours sit with the other .page-home
   rules. */
.team {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  /* 403 + 178 + 403: the pair sits centred, not spread across the container */
  max-width: 61.5rem;
  margin-inline: auto;
  row-gap: var(--sp-7);
  column-gap: clamp(2rem, 12.4vw, 11.125rem);
}
/*
  The plate is 403x300 on KIBH with a circle centred in it. The circle is sized
  off the plate's height, not stretched to fill it: the plate is wider than it
  is tall, and filling it would turn the border-radius into an ellipse.
*/
.member__photo {
  display: grid;
  place-items: center;
  aspect-ratio: 403 / 300;
  background: var(--c-surface);
  border-radius: 4px;
}
/* The circle is 83% of the plate's height, set as a share of its width
   (0.83 × 300 / 403 = 61.8%). Sized off the height it grew with the photo's
   own pixel size: Willy's 600 px file stretched his plate taller than
   Ilya's 479 px one (Willy, 2026-10-01). min-height: 0 keeps the plate at
   its aspect ratio whatever the image. */
.member__photo { min-height: 0; overflow: hidden; }
.member__photo img {
  width: 61.8%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 999px;
}
.member__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
  margin-top: var(--sp-5);
}
.member__name {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 700;
  color: var(--c-text);
}
.member__link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--c-accent);
  transition: color var(--transition);
}
.member__link:hover { color: var(--c-accent-dark); }
.member__role {
  margin-top: var(--sp-1);
  font-size: var(--fs-small);
  color: var(--c-text-muted);
}
.member__in { display: inline-flex; width: 1.15em; flex: none; }
.member__in svg { width: 100%; height: auto; }

/* --- 404 ------------------------------------------------------------------ */

.notfound {
  min-height: calc(100vh - var(--header-h));
  display: grid;
  align-content: center;
  text-align: center;
}
.notfound h1 { margin-inline: auto; }
.notfound .lead { margin: var(--sp-5) auto 0; max-width: 34rem; }
.notfound__links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--sp-5);
  margin-top: var(--sp-6);
  list-style: none;
}

/* --- Footer --------------------------------------------------------------- */

.site-footer {
  padding-block: var(--sp-6) var(--sp-5);
  background: var(--c-primary);
  color: var(--c-secondary);
  /* The dark CTA band sits directly above: a hairline keeps the two apart. */
  border-top: 1px solid var(--c-border-dark);
}
.site-footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: var(--sp-5);
}
.site-footer__brand {
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  font-weight: 700;
  color: var(--c-white);
}
.site-footer__tagline {
  margin-top: var(--sp-3);
  max-width: 24rem;
  font-size: var(--fs-small);
}
.site-footer h2 {
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--c-white);
  margin-bottom: var(--sp-3);
}
.site-footer ul { list-style: none; }
.site-footer li + li { margin-top: var(--sp-2); }
/* KIBH sets footer links in the lime accent */
.site-footer a { color: var(--c-lime); }
.site-footer a:hover { color: var(--c-lime); }
.site-footer__meta {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-border-dark);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4) var(--sp-6);
  font-size: var(--fs-caption);
}

/* ==========================================================================
   Micro-interactions — the KIBH set, with KIBH's scoping
   (../KIBH/assets/css/main.css, "Micro-interactions"). Each reuses an
   existing colour and the existing --transition. The two that need JS
   (magnetic CTAs, cursor glow) leave the page exactly as it is without it,
   and both run only for a real pointer and only without reduced motion.
   ========================================================================== */

/* --- Underline that wipes in on hover ------------------------------------- */
/*
  Two stacked background bars rather than an ::after, so a link that wraps
  across lines is underlined on every line. The lower bar is the resting
  underline (body copy only); the upper bar wipes in from the left on hover
  and keyboard focus. currentColor keeps each context's own link colour:
  teal in body copy, lime in the footer.
*/
.prose a,
p a:not(.btn),
label a,
.site-footer li a,
.text-link {
  --ul-rest: 0%;
  text-decoration: none;
  background-image:
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-origin: content-box;
  background-position: 0 100%, 0 100%;
  background-size: 0% 2px, var(--ul-rest) 1px;
  transition: background-size var(--transition), color var(--transition);
}
/* Body-copy links keep a permanent underline so they stay recognisable. */
.prose a,
p a:not(.btn):not(.text-link),
label a {
  --ul-rest: 100%;
}
.prose a:focus-visible,
p a:focus-visible,
label a:focus-visible,
.site-footer li a:focus-visible,
.text-link:focus-visible {
  background-size: 100% 2px, var(--ul-rest) 1px;
}
@media (hover: hover) {
  .prose a:hover,
  p a:not(.btn):hover,
  label a:hover,
  .site-footer li a:hover,
  .text-link:hover {
    background-size: 100% 2px, var(--ul-rest) 1px;
  }
}

/* --- Magnetic booking CTAs --------------------------------------------------- */
/*
  JS sets --mag-x / --mag-y on button-styled links to the booking page and
  nothing else; the transform is composed here so the button's own 1px hover
  lift survives. The class is added only on devices with a real cursor.
*/
.btn.is-magnet {
  --mag-x: 0px;
  --mag-y: 0px;
  --mag-lift: 0px;
  transform: translate3d(var(--mag-x), calc(var(--mag-y) + var(--mag-lift)), 0);
  transition: background var(--transition), color var(--transition),
    border-color var(--transition), transform var(--transition);
}
.btn.is-magnet:hover { --mag-lift: -1px; }
.btn.is-magnet:active { --mag-lift: 0px; }

/* --- Cursor-following background glow ---------------------------------------- */
/*
  One fixed element behind the whole page (z-index -1, above the canvas,
  below every section), plus a clipped copy inside each section that paints
  its own opaque ground — otherwise those sections would hide it. A ground,
  not an overlay: it takes no pointer events.
*/
.cursor-glow {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 14rem;
  height: 14rem;
  margin: -7rem 0 0 -7rem;
  pointer-events: none;
  background: radial-gradient(
    circle closest-side,
    rgba(118, 171, 174, var(--glow-a)),
    rgba(118, 171, 174, calc(var(--glow-a) * 0.5)) 50%,
    rgba(118, 171, 174, 0) 100%
  );
  opacity: 0;
  transition: opacity 200ms linear;
  will-change: transform;
}
.cursor-glow.is-on { opacity: 1; }
.has-glow-ground { isolation: isolate; }
.glow-ground {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.glow-ground > .cursor-glow { position: absolute; }
@media (prefers-reduced-motion: reduce) {
  .cursor-glow { display: none; }
}

/* --- Scroll-in reveals (KIBH, Hari 2026-09-19) ---------------------------- */
/*
  Blocks rise 60px and fade in when they enter the viewport. Only armed once
  the inline script on <html> has added .js-anim, so the page renders in full
  when JS is unavailable. Only "up" and "fade": KIBH's left/right variants
  parked blocks 64px outside the viewport and caused horizontal scroll.
  Reveals sit on wrappers, never on an element with its own transform (linked
  cards, magnetic buttons) — .is-in would override that transform.
*/
.js-anim [data-anim] {
  opacity: 0;
  transition: opacity 1.2s ease, transform 1.2s ease;
}
.js-anim [data-anim="up"] { transform: translate3d(0, 3.75rem, 0); }
.js-anim [data-anim="fade"] { transform: none; }
.js-anim [data-anim].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js-anim [data-anim] { opacity: 1; transform: none; transition: none; }
}

/* --- Kontakt: two tabs, one page (KIBH .ktab) --------------------------------- */

.kontakt { padding-block: var(--sp-9); }
/* The heading carries the rotator and belongs on one line wherever it fits
   (Hari, 2026-09-23); no measure cap, and it only wraps when the viewport
   leaves it no choice. */
.kontakt h1 { max-width: none; text-wrap: balance; }
.kontakt__tablist {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin-top: var(--sp-6);
}
/* The rotating word is the page heading here, so it needs the h1's own size. */
.kontakt h1 .rotator { vertical-align: baseline; }
.ktab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 44px;
  padding: 0.9375rem 2.1875rem;
  background: var(--c-tab-rest);
  border: 0;
  border-radius: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.6;
  /* KIBH sets --c-secondary here (#eee on #cecccc, ~1.4:1); slate keeps the
     resting label readable — worth carrying back to KIBH. */
  color: var(--c-primary);
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.ktab__icon {
  display: inline-flex;
  width: 1em;
  flex: none;
}
.ktab__icon svg { width: 100%; height: auto; }
.ktab[aria-selected="true"] {
  background: var(--c-accent);
  color: var(--c-white);
}
@media (hover: hover) {
  .ktab:hover {
    background: var(--c-accent);
    color: var(--c-white);
  }
}
.kontakt__panel { margin-top: var(--sp-7); }
/* Panels come first in the markup (the tabs sit below the calendar), so the
   spacing above the tablist is the panel's, not the heading's. */
.kontakt__panel[hidden] { display: none; }
.kontakt__panel h2 { font-size: var(--fs-h3); }
.kontakt__panel h2 + p { margin-top: var(--sp-3); }
.kontakt__panel .ph-img { margin-top: var(--sp-5); max-width: 46rem; }
.kontakt__panel .form { margin-top: var(--sp-5); max-width: var(--measure); }

/* --- "In 3 Schritten weniger arbeiten" (KIBH section--flow) ---------------- */

.section--flow { background: var(--c-surface); padding-block: var(--sp-9); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center h2::after { margin-inline: auto; }
/* Willy's brief asks for the lime accent word KIBH uses in this heading, and
   Hari asked for KIBH's rotation with it (schneller / besser / weniger).
   CLAUDE.md §6 otherwise rules accented headline words out; reconciled there.
   Taken from ../KIBH. JS swaps the word; without JS the first word stays, and
   the width JS measures from the widest variant keeps the line from jumping. */
.rotator {
  display: inline-grid;
  vertical-align: bottom;
  overflow: hidden;
}
.rotator__word {
  grid-area: 1 / 1;
  color: var(--c-lime);
  animation: rotator-in 420ms cubic-bezier(0.2, 0, 0.2, 1);
}
@keyframes rotator-in {
  from { opacity: 0; transform: translateY(0.5em) rotateX(-45deg); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .rotator__word { animation: none; }
}

.flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}
/* A panel, not one of our numbered .step rows: its own name so the two
   components cannot collide. KIBH's measurements. */
.flow__panel {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  width: 100%;
  height: 100%;
  padding: 1.875rem;
  border-radius: 4px;
  background: var(--c-white);
  box-shadow: rgba(0, 0, 0, 0.05) 3px 0 12px 0;
}
.flow__panel h3 { font-size: var(--fs-h4); }
.flow__panel p { font-size: var(--fs-body); line-height: 1.6; }
.step__icon {
  display: block;
  width: 5rem;
  height: 5rem;
  color: var(--c-accent);
}
.step__icon .ico { width: 100%; height: 100%; }
.ico {
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* The dotted curve from one panel down to the next; its viewBox is the
   container width, so the ends sit under the panels they join. */
.flow__link { display: block; height: 6.125rem; }
.flow__link svg { width: 100%; height: 100%; }
.flow__link path {
  fill: none;
  stroke: var(--c-accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 1 8;
  vector-effect: non-scaling-stroke;
}
@media (min-width: 900px) {
  .flow__panel { width: 70%; }
  .flow__step--right { justify-self: end; }
}
@media (max-width: 899px) {
  .flow { gap: var(--sp-5); }
  .flow__link { display: none; }
}
.btn--block { position: relative; width: 100%; justify-content: center; }
.btn__chev { display: inline-flex; width: 0.9em; flex: none; }
.btn__chev svg { width: 100%; height: auto; }
.btn--block .btn__chev { position: absolute; right: 1.625rem; }

/* --- ROI calculator, reserved (PH-21) ------------------------------------- */

.roi {
  display: grid;
  gap: var(--sp-4);
  max-width: var(--measure);
  padding: var(--sp-6);
  border: 2px dashed var(--c-accent-dark);
  border-radius: var(--radius);
  background: var(--c-accent-soft);
}
.roi h2 { font-size: var(--fs-h3); }
.roi p { color: var(--c-teal-dark); }

/* --- Leistungen: the modules as Odoo's own app icons ----------------------- */
/* Willy, 2026-09-29: the six module paragraphs were too much text. Each module
   is its official icon and name, linked to its app page on odoo.com, and one
   band leads to the whole catalogue. Ruled cells like the ledger, not cards. */
.apps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--sp-6);
  border-top: 1px solid var(--c-border);
}
/* the link fills its cell, so the rules of neighbouring cells line up even
   when one name takes two lines */
.apps > li { display: flex; }
.apps__item {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-height: 44px;
  padding: var(--sp-5) var(--sp-3);
  border-bottom: 1px solid var(--c-border);
  color: var(--c-primary);
  transition: background var(--transition), color var(--transition);
}
.apps__item img { flex: none; width: 3.5rem; height: 3.5rem; }
.apps__name {
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  font-weight: 600;
  line-height: 1.25;
  text-wrap: balance;
}
@media (hover: hover) {
  .apps__item:hover { color: var(--c-teal-dark); background: var(--c-accent-soft); }
}
.apps__item:focus-visible { background: var(--c-accent-soft); }

.apps-all {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  margin-top: var(--sp-7);
  padding: var(--sp-5) var(--sp-6);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  color: var(--c-text);
  transition: border-color var(--transition), background var(--transition);
}
.apps-all:hover { color: var(--c-text); border-color: var(--c-accent); background: var(--c-accent-soft); }
.apps-all__text { display: block; max-width: var(--measure); }
.apps-all__title {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  font-weight: 700;
  color: var(--c-primary);
}
.apps-all__sub { display: block; margin-top: var(--sp-2); font-size: var(--fs-small); color: var(--c-text-muted); }
.apps-all__cta {
  font-family: var(--font-display);
  font-size: var(--fs-body-lg);
  font-weight: 700;
  color: var(--c-accent-dark);
  white-space: nowrap;
}
@media (max-width: 1024px) {
  .apps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .apps { column-gap: var(--sp-4); }
  .apps__item { flex-direction: column; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-4) 0; }
  .apps__item img { width: 3rem; height: 3rem; }
  .apps__name { font-size: var(--fs-body-lg); }
  .apps-all { padding: var(--sp-5); }
}

/* --- Illustrations drawn in code (Willy, 2026-09-29) ---------------------
   Three of four mock-ups, each where it says something: the path of the five
   services beside "Odoo Schritt für Schritt", an abstract Odoo app beside
   "Die Module", the modules around one core beside the KI-Hebel. Site colours
   only; motion only without reduced motion. */
.art { pointer-events: none; }

/* B: the path, in the Leistungen hero. One colour, as first drafted:
   Willy (2026-09-29) found the teal-to-lime gradient, the halos and the
   travelling light too much. The dashed line draws itself once on every
   page load, the steps appear as it reaches them (their --t is set inline).
   Dash lengths are in user units (the path is 470 long) instead of
   pathLength="1", which not every browser applies to dashes in a mask:
   there the line stayed hidden. */
.art--path { display: none; }
@media (min-width: 1025px) {
  .page-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 19rem;
    column-gap: var(--sp-8);
    align-items: center;
  }
  .art--path { display: block; width: 19rem; }
}
.art--path svg { display: block; width: 100%; height: auto; overflow: visible; }
.art-path__reveal { fill: none; stroke: #fff; stroke-width: 8; stroke-dasharray: 472; stroke-dashoffset: 0; }
.art-path__line { fill: none; stroke: var(--c-accent); stroke-width: 2; stroke-dasharray: 5 7; stroke-opacity: 0.6; }
.art-path__node circle {
  fill: var(--c-white);
  stroke: var(--c-accent);
  stroke-width: 2;
  filter: drop-shadow(0 6px 10px rgba(34, 40, 49, 0.12));
}
.art-path__node text { font-family: var(--font-display); font-size: 15px; font-weight: 700; fill: var(--c-teal-dark); }
.art-path__node .art-path__label { font-weight: 600; fill: var(--c-text-muted); }
.art-path__node--last circle { fill: var(--c-accent); }
.art-path__node--last text:first-of-type { fill: var(--c-white); }
@media (prefers-reduced-motion: no-preference) {
  .art-path__reveal { animation: art-path-draw 1.8s linear 0.3s both; }
  .art-path__node { animation: art-path-step 0.4s ease var(--t) both; }
}
@keyframes art-path-draw {
  from { stroke-dashoffset: 472; }
  to { stroke-dashoffset: 0; }
}
@keyframes art-path-step {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* C: the app window, beside "Die Module" */
.art--app { display: none; }
@media (min-width: 1025px) {
  .module-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 22rem;
    column-gap: var(--sp-8);
    align-items: center;
    margin-bottom: var(--sp-7);
  }
  .module-intro .section-head { margin-bottom: 0; }
  .art--app { display: block; perspective: 60rem; }
}
.art-app__win {
  overflow: hidden;
  background: var(--c-white);
  border-radius: var(--radius);
  box-shadow: 0 2rem 3rem -1.5rem rgba(34, 40, 49, 0.28), inset 0 0 0 1px rgba(118, 171, 174, 0.25);
  transform: rotateY(-14deg) rotateX(4deg);
  transform-origin: 100% 50%;
}
.art-app__bar { display: flex; align-items: center; gap: 0.35rem; padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--c-border); }
.art-app__bar i { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--c-border); }
.art-app__bar b { width: 6rem; height: 0.45rem; margin-left: 0.8rem; border-radius: 4px; background: var(--c-surface-alt); }
.art-app__body { display: flex; min-height: 13rem; }
.art-app__side {
  display: grid;
  align-content: start;
  gap: 0.6rem;
  width: 3.2rem;
  padding: 0.9rem 0.6rem;
  background: var(--c-surface);
  border-right: 1px solid var(--c-border);
}
.art-app__side b { height: 0.45rem; border-radius: 4px; background: var(--c-border); }
.art-app__side b:first-child { background: var(--c-accent); }
.art-app__cols { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; padding: 0.8rem; }
.art-app__col { display: grid; align-content: start; gap: 0.5rem; }
.art-app__head { width: 60%; height: 0.5rem; margin-bottom: 0.2rem; border-radius: 4px; background: #d3d9d8; }
.art-app__card {
  display: grid;
  gap: 0.35rem;
  padding: 0.55rem 0.6rem 0.6rem;
  background: var(--c-white);
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px var(--c-border);
}
.art-app__card b { height: 0.4rem; border-radius: 3px; background: var(--c-border); }
.art-app__card .art-app__short { width: 55%; }
.art-app__tag { width: 1.6rem; height: 0.35rem; border-radius: 3px; }
.art-app__tag--teal { background: var(--c-accent); }
.art-app__tag--lime { background: var(--c-lime); }
.art-app__tag--grey { background: #c9cfce; }
.art-app__card--lift {
  transform: translate(0.4rem, -0.3rem) rotate(3deg);
  box-shadow: 0 0.9rem 1.4rem -0.6rem rgba(34, 40, 49, 0.3), inset 0 0 0 1px rgba(118, 171, 174, 0.5);
}
@media (prefers-reduced-motion: no-preference) {
  .art-app__card--lift { animation: art-lift 4.5s ease-in-out infinite alternate; }
}
@keyframes art-lift {
  to { transform: translate(0.55rem, -0.55rem) rotate(4deg); }
}

/* A: the orbit, in the KI-Hebel on /referenzen/ (dark band) */
.split__media--art { overflow: visible; border-radius: 0; }
.art--orbit { position: relative; width: 100%; max-width: 24rem; margin-inline: auto; aspect-ratio: 1; }
.art--orbit svg { display: block; width: 100%; height: 100%; overflow: visible; }
.art--orbit circle { fill: none; stroke: var(--c-accent); stroke-opacity: 0.45; stroke-dasharray: 3 7; }
.art--orbit line { stroke: var(--c-accent); stroke-opacity: 0.35; stroke-dasharray: 4 6; }
.art-orbit__app {
  position: absolute;
  display: grid;
  place-items: center;
  width: 17%;
  aspect-ratio: 1;
  translate: -50% -50%;
  background: var(--c-white);
  border-radius: 50%;
  box-shadow: 0 0.5rem 1.5rem -0.5rem rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(118, 171, 174, 0.25);
}
.art-orbit__app img { width: 60%; height: auto; }
.art-orbit__core {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  padding: 0.6rem 1.1rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  white-space: nowrap;
  color: var(--c-teal-dark);
  background: var(--c-white);
  border-radius: 10px;
  box-shadow: 0 0.75rem 2rem -0.75rem rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(118, 171, 174, 0.35);
}
@media (prefers-reduced-motion: no-preference) {
  .art-orbit__app { animation: art-float 5.4s ease-in-out var(--d, 0s) infinite alternate; }
}
@keyframes art-float {
  from { transform: translateY(-0.2rem); }
  to { transform: translateY(0.2rem); }
}
@media (max-width: 1024px) {
  .art--orbit { max-width: 20rem; }
}

/* --- Warum Odoo (Willy, 2026-10-01) ---------------------------------------- */
/*
  The page that sells Odoo itself, in the Startseite's room (the shared rules
  above carry .page-odoo): Odoo's own figures as big type on glass, open
  source as glass rows beside a wall of app tiles, the AI argument beside a
  three-node MCP sketch, the comparison as a real table and every source in
  one line at the end (docs/content.md §2b). One motion moment: the three
  hero figures count up once (main.js, "Counting figures"); everything else
  only rises in with the site's reveals. Sizes in rem (CLAUDE.md §7).
*/

/* Hero: the Leistungen grid, lit like the Startseite hero instead of grey. */
.page-odoo .page-hero {
  background: radial-gradient(ellipse 45% 60% at 78% 45%, rgba(118, 171, 174, 0.16), transparent 70%);
}
.page-odoo .page-hero h1 {
  font-size: var(--fs-hero);
  line-height: 1.1;
  color: var(--c-white);
}
/* "4 schlagkräftige Argumente" (Willy, 2026-10-01): the promise under the
   question, part of the h1, smaller and in the lead's grey, not an accent. */
.page-odoo .h1-sub {
  display: block;
  margin-top: var(--sp-3);
  font-size: 0.45em;
  font-weight: 600;
  line-height: 1.25;
  color: rgba(238, 238, 238, 0.72);
}
/* "Top 4 Gründe:" as four ticked lines (Willy, 2026-10-01), each a jump to
   its section; the tick is the comparison table's. */
.reasons {
  list-style: none;
  display: grid;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}
.reasons a {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 44px;
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  font-weight: 600;
  color: var(--c-white);
  transition: color var(--transition);
}
.reasons a::before {
  content: "";
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%2376abae' fill-opacity='.22'/%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='%2376abae' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.reasons a:hover { color: var(--c-accent); }
.page-odoo .page-hero .reasons + .btn-row { margin-top: var(--sp-6); }
.page-odoo .page-hero .lead {
  max-width: 34rem;
  color: rgba(238, 238, 238, 0.72);
}
@media (min-width: 1025px) {
  .page-odoo .page-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 27rem); }
}
@media (max-width: 1024px) {
  .page-odoo .figures-wrap { max-width: 34rem; margin-top: var(--sp-7); }
}

/* The figures: Odoo's own numbers, big, on one glass slab (the CTA slab's
   glass). The hero slab leans a little into the room on desktop; the tilt
   sits on the slab, the reveal on its wrapper, so neither cancels the other. */
.figures {
  list-style: none;
  display: grid;
  gap: var(--sp-5);
  padding: var(--sp-6) var(--sp-7);
  background:
    radial-gradient(ellipse 70% 90% at 100% 0%, rgba(118, 171, 174, 0.18), transparent 70%),
    rgba(13, 29, 32, 0.6);
  border: 1px solid rgba(118, 171, 174, 0.3);
  border-radius: 16px;
  box-shadow:
    0 2.5rem 5rem -2rem rgba(0, 0, 0, 0.8),
    0 0 4rem rgba(118, 171, 174, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
@media (min-width: 1025px) {
  .figures-wrap { perspective: 60rem; }
  /* --lean-x/-y come from main.js ("Leaning slab"), -0.5 … 0.5. */
  .figures--hero {
    transform:
      rotateY(calc(-10deg + var(--lean-x, 0) * 12deg))
      rotateX(calc(3deg - var(--lean-y, 0) * 8deg));
    transform-origin: 0 50%;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }
}
/* "Mehr Leben" (Willy, 2026-10-01): the hero slab floats like the
   Startseite's cards, and a sheen crosses its glass now and then. */
.figures--hero { position: relative; overflow: hidden; }
.figures--hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.07) 50%, transparent 65%);
  transform: translateX(-100%);
}
@media (prefers-reduced-motion: no-preference) {
  .figures--hero { animation: drift 7s ease-in-out infinite; }
  .figures--hero::after { animation: odoo-sheen 7s ease-in-out 1.5s infinite; }
}
@keyframes odoo-sheen {
  0%, 60% { transform: translateX(-100%); }
  85%, 100% { transform: translateX(100%); }
}
/* The one figure that is a growth rate carries the KIBH lime. */
.figure--up .figure__num { color: var(--c-lime); }
.figure + .figure {
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(118, 171, 174, 0.18);
}
.figure__num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 4.4vw, 3.5rem);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--c-white);
}
/* "≈" before 8.000 (Willy, 2026-10-01; was "fast"): a qualifier, not part
   of the figure, so a little smaller and in grey. */
.figure__num small {
  margin-right: 0.12em;
  font-size: 0.8em;
  font-weight: 600;
  color: rgba(238, 238, 238, 0.72);
}
.figure__label {
  display: block;
  margin-top: var(--sp-2);
  color: rgba(238, 238, 238, 0.72);
  text-wrap: pretty;
}

/* The second slab: three figures side by side from 900px, hairlines between;
   stacked like the hero slab below. Slightly smaller, so "10 Mrd. €" fits its
   third of the container (measured down to 900px). */
.figures--row .figure__num { font-size: clamp(2.5rem, 3.6vw, 3rem); }
@media (min-width: 900px) {
  .figures--row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    padding-inline: 0;
  }
  .figures--row .figure { padding-inline: var(--sp-6); }
  .figures--row .figure + .figure {
    padding-top: 0;
    border-top: 0;
    border-left: 1px solid rgba(118, 171, 174, 0.18);
  }
}
@media (min-width: 1025px) {
  .figures--row .figure { padding-inline: var(--sp-7); }
}
@media (max-width: 767px) {
  .figures { padding: var(--sp-5); }
}
/* "Klein starten, groß arbeiten": one glass row under the slab. */
.page-odoo .ledger--proof { margin-top: var(--sp-5); }

/* Two columns, text and drawing; the app wall only where there is room for
   it, as on /leistungen/. In the KI section the drawing stands left and the
   link to the KI-Hebel under the text; on narrow screens the order is text,
   drawing, link, so the link does not seem to caption the drawing. */
.odoo-split > * { min-width: 0; }
@media (min-width: 1025px) {
  .odoo-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
    column-gap: var(--sp-8);
    align-items: center;
  }
  .odoo-split--flip {
    grid-template-columns: minmax(0, 24rem) minmax(0, 1fr);
    grid-template-areas: "art text" "art more";
  }
  .odoo-split--flip > .art { grid-area: art; }
  .odoo-split--flip > .odoo-split__text { grid-area: text; }
  .odoo-split--flip > .odoo-more { grid-area: more; align-self: start; }
}
/* In a half-width column a row is title over text, not title beside text. */
.page-odoo .ledger--plain .ledger__row { gap: var(--sp-2); }
.odoo-more { margin-top: var(--sp-5); }

/* The app wall: Odoo's six app icons we already show (docs/odoo-icons.md)
   in front, empty glass tiles behind them running off into the dark, the
   catalogue's "and tens of thousands more". Leans back into the room like
   its floor. */
.art--wall { display: none; }
@media (min-width: 1025px) {
  .art--wall { display: block; perspective: 50rem; }
}
.art-wall__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.75rem;
  /* The left edge stays near, the right edge turns away into the room. */
  transform: rotateY(24deg) rotateX(6deg);
  transform-origin: 0 50%;
  -webkit-mask-image: linear-gradient(105deg, #000 35%, transparent 95%);
  mask-image: linear-gradient(105deg, #000 35%, transparent 95%);
}
.art-wall__grid span {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  background: linear-gradient(135deg, rgba(118, 171, 174, 0.12), rgba(238, 240, 239, 0.03) 60%);
  border: 1px solid rgba(118, 171, 174, 0.2);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.art-wall__grid .art-wall__app {
  background: var(--c-white);
  border-color: transparent;
  box-shadow: 0 0.75rem 1.5rem -0.75rem rgba(0, 0, 0, 0.6);
}
.art-wall__app img { width: 62%; height: auto; }
/* "Mehr Leben" (Willy, 2026-10-01): empty tiles light up one after another,
   as if new apps kept arriving, and the six icons float a little. */
@media (prefers-reduced-motion: no-preference) {
  /* eight of the empty tiles, spread over the wall (apps sit at 1, 3, 7,
     11, 13 and 17) */
  .art-wall__grid span:is(:nth-child(2), :nth-child(4), :nth-child(9), :nth-child(12),
    :nth-child(15), :nth-child(18), :nth-child(22), :nth-child(24)) {
    animation: wall-light 6s ease-in-out infinite;
  }
  .art-wall__grid span:nth-child(4)  { animation-delay: 0.2s; }
  .art-wall__grid span:nth-child(9)  { animation-delay: 1.4s; }
  .art-wall__grid span:nth-child(12) { animation-delay: 2.6s; }
  .art-wall__grid span:nth-child(18) { animation-delay: 3.8s; }
  .art-wall__grid span:nth-child(22) { animation-delay: 5s; }
  .art-wall__grid span:nth-child(2)  { animation-delay: 3.2s; }
  .art-wall__grid span:nth-child(15) { animation-delay: 0.8s; }
  .art-wall__grid span:nth-child(24) { animation-delay: 2s; }
  .art-wall__app { animation: art-float 5.4s ease-in-out infinite alternate; }
  .art-wall__app:nth-child(3)  { animation-delay: -1.2s; }
  .art-wall__app:nth-child(7)  { animation-delay: -2.4s; }
  .art-wall__app:nth-child(11) { animation-delay: -3.6s; }
  .art-wall__app:nth-child(13) { animation-delay: -0.6s; }
  .art-wall__app:nth-child(17) { animation-delay: -4.2s; }
}
@keyframes wall-light {
  0%, 70%, 100% { background-color: transparent; border-color: rgba(118, 171, 174, 0.2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); }
  80% { background-color: rgba(118, 171, 174, 0.35); border-color: rgba(118, 171, 174, 0.7); box-shadow: 0 0 1.5rem rgba(118, 171, 174, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.15); }
}

/* The MCP sketch: an AI system, the connector, Odoo. Three nodes on one
   dashed line, still; Odoo is the white card, as in the KI-Hebel orbit. */
.art--mcp {
  display: grid;
  justify-items: center;
  max-width: 22rem;
  margin: var(--sp-7) auto 0;
}
@media (min-width: 1025px) {
  .art--mcp { margin-top: 0; }
}
.art-mcp__node {
  display: grid;
  justify-items: center;
  gap: var(--sp-3);
  min-width: 12rem;
  padding: var(--sp-5) var(--sp-7);
  font-family: var(--font-display);
  font-size: var(--fs-body-lg);
  font-weight: 700;
  color: var(--c-white);
  background: linear-gradient(135deg, rgba(118, 171, 174, 0.12), rgba(238, 240, 239, 0.03) 60%);
  border: 1px solid rgba(118, 171, 174, 0.3);
  border-radius: 12px;
  box-shadow:
    0 1.5rem 3rem -1.5rem rgba(0, 0, 0, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.art-mcp__node svg {
  width: 2.25rem;
  height: 2.25rem;
  fill: none;
  stroke: var(--c-accent);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.art-mcp__link {
  width: 0;
  height: 3.5rem;
  border-left: 2px dashed rgba(118, 171, 174, 0.6);
}
.art-mcp__plug {
  padding: var(--sp-2) var(--sp-5);
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--c-ink);
  background: var(--c-accent);
  border-radius: 999px;
}
.art-mcp__node--odoo {
  font-size: var(--fs-lead);
  color: var(--c-teal-dark);
  background: var(--c-white);
  border-color: transparent;
}
.art-mcp__apps { display: flex; gap: var(--sp-3); }
.art-mcp__apps img { width: 2.5rem; height: 2.5rem; }
/* "Mehr Leben" (Willy, 2026-10-01): a lime light runs from the AI system
   through MCP into Odoo, and the connector glows as it passes. */
.art-mcp__link { position: relative; }
.art-mcp__link i { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .art-mcp__link i {
    display: block;
    position: absolute;
    left: -0.3125rem;
    top: 0;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--c-lime);
    box-shadow: 0 0 0.75rem var(--c-lime);
    opacity: 0;
    animation: mcp-flow 2.8s ease-in infinite;
  }
  .art-mcp__link--2 i { animation-delay: 1.1s; }
  .art-mcp__plug { animation: mcp-plug 2.8s ease-in-out 0.8s infinite; }
}
@keyframes mcp-flow {
  0% { top: 0; opacity: 0; }
  10% { opacity: 1; }
  35% { top: 100%; opacity: 1; }
  40%, 100% { top: 100%; opacity: 0; }
}
@keyframes mcp-plug {
  0%, 30%, 100% { box-shadow: 0 0 0 0 rgba(214, 216, 79, 0); }
  12% { box-shadow: 0 0 0 0.375rem rgba(214, 216, 79, 0.25), 0 0 1.25rem rgba(214, 216, 79, 0.35); }
}

/* The comparison: a real table on one glass slab. The Odoo column is lit;
   the other column is the same grey as running text on this ground. */
.compare-wrap {
  overflow: hidden;
  background: linear-gradient(135deg, rgba(118, 171, 174, 0.08), rgba(238, 240, 239, 0.02) 60%);
  border: 1px solid rgba(118, 171, 174, 0.2);
  border-radius: 16px;
  box-shadow:
    0 1.5rem 3rem -1.5rem rgba(0, 0, 0, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.compare {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
.compare th,
.compare td {
  padding: var(--sp-4) var(--sp-6);
  vertical-align: top;
  border-top: 1px solid rgba(118, 171, 174, 0.15);
}
.compare thead th,
.compare thead td { border-top: 0; }
.compare thead th {
  padding-block: var(--sp-5);
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  font-weight: 700;
  color: var(--c-white);
}
.compare tbody th {
  font-family: var(--font-display);
  font-size: var(--fs-body-lg);
  font-weight: 700;
  color: var(--c-white);
}
.compare td { color: rgba(238, 238, 238, 0.65); }
/* The Odoo column: a teal wash and a teal edge on top. */
.compare .compare__odoo {
  color: var(--c-white);
  background: rgba(118, 171, 174, 0.1);
}
.compare thead .compare__odoo {
  color: var(--c-accent);
  box-shadow: inset 0 3px 0 var(--c-accent);
}
@media (min-width: 768px) {
  .compare tbody th { width: 22%; }
  .compare .compare__odoo { width: 39%; }
  /* A teal tick before every Odoo answer (Willy, 2026-10-01: "mehr Pep"). */
  .compare tbody .compare__odoo {
    padding-left: calc(var(--sp-6) + 1.75rem);
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%2376abae' fill-opacity='.18'/%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='%2376abae' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
        var(--sp-6) calc(var(--sp-4) + 0.05rem) / 1.25rem 1.25rem no-repeat,
      rgba(118, 171, 174, 0.1);
  }
}
/* The row under the pointer lights up across both answers. */
.compare tbody tr { transition: background var(--transition); }
@media (hover: hover) {
  .compare tbody tr:hover { background: rgba(118, 171, 174, 0.08); }
  .compare tbody tr:hover .compare__odoo { color: var(--c-white); }
}
/* Phones: three columns would break words, so every row becomes a block:
   the criterion, then the two answers, each with its column name. The ARIA
   roles in the markup keep it a table for screen readers. */
@media (max-width: 767px) {
  .compare,
  .compare tbody,
  .compare tr,
  .compare th,
  .compare td { display: block; }
  .compare thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  .compare tr { padding: var(--sp-4) var(--sp-5); border-top: 1px solid rgba(118, 171, 174, 0.15); }
  .compare tbody tr:first-child { border-top: 0; }
  .compare th,
  .compare td { padding: 0; border: 0; }
  .compare td { margin-top: var(--sp-2); }
  .compare td::before {
    content: attr(data-label);
    display: block;
    font-family: var(--font-display);
    font-size: var(--fs-caption);
    font-weight: 700;
    color: var(--c-accent);
  }
  .compare td:not(.compare__odoo)::before { color: rgba(238, 238, 238, 0.55); }
  .compare .compare__odoo { padding: var(--sp-2) var(--sp-3); border-radius: 8px; }
}

/* Sources: one small line under the band. */
.sources {
  padding-block: 0 var(--sp-8);
  font-size: var(--fs-caption);
  color: rgba(238, 238, 238, 0.55);
}
.sources p { max-width: var(--measure); }
.sources a { color: var(--c-accent); }
.sources a:hover { color: var(--c-white); }

/* --- Top Referenzen (Willy, 2026-10-01) ------------------------------------ */
/*
  Variant A of three: every reference is one glass slab in the dark room
  (the shared rules above carry .page-referenzen). Left the result, big, in
  the KIBH lime, counting up as it scrolls in (main.js, "Counting figures");
  right the customer's voice with a quote mark and the portrait in a teal
  ring. The slabs rise out of the depth one after the other, like the
  Startseite's rows. Sizes in rem (CLAUDE.md §7).
*/
.page-referenzen .section-head h1 {
  font-size: var(--fs-hero);
  line-height: 1.1;
  color: var(--c-white);
}
.page-referenzen .section-head h1::after {
  content: "";
  display: block;
  width: 4rem;
  height: 2px;
  margin-top: var(--sp-4);
  background: var(--c-accent);
}
.refs-section { padding-top: var(--sp-9); }

.refs {
  display: grid;
  gap: var(--sp-6);
  perspective: 60rem;
  perspective-origin: 50% 0;
}
.ref {
  display: grid;
  grid-template-columns: minmax(0, 21rem) minmax(0, 1fr);
  gap: var(--sp-8);
  padding: var(--sp-7) var(--sp-8);
  background:
    radial-gradient(ellipse 50% 90% at 0% 0%, rgba(118, 171, 174, 0.16), transparent 70%),
    rgba(13, 29, 32, 0.6);
  border: 1px solid rgba(118, 171, 174, 0.3);
  border-radius: 16px;
  box-shadow:
    0 2.5rem 5rem -2rem rgba(0, 0, 0, 0.8),
    0 0 4rem rgba(118, 171, 174, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.ref > * { min-width: 0; }
.ref__result {
  padding-right: var(--sp-7);
  border-right: 1px solid rgba(118, 171, 174, 0.2);
}
.ref__topic {
  font-size: var(--fs-body-lg);
  font-weight: 700;
  color: var(--c-accent);
}
.ref__metric {
  margin-top: var(--sp-4);
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 7vw, 6.5rem);
  font-weight: 700;
  line-height: 0.95;
  font-variant-numeric: tabular-nums;
  color: var(--c-lime);
}
.ref__label {
  margin-top: var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 700;
  line-height: 1.2;
  color: var(--c-white);
}
.ref__detail {
  margin-top: var(--sp-3);
  color: rgba(238, 238, 238, 0.65);
  text-wrap: pretty;
}
.ref__mark {
  display: block;
  width: 3rem;
  height: auto;
  margin-bottom: var(--sp-5);
}
.ref__mark path { fill: rgba(118, 171, 174, 0.6); }
.ref__quote {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.6vw, 1.45rem);
  line-height: 1.45;
  color: var(--c-white);
  text-wrap: pretty;
}
.ref__person {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-5);
  margin-top: var(--sp-6);
}
.ref__avatar {
  flex: none;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  object-fit: cover;
  background: var(--c-white);
  box-shadow: 0 0 0 2px var(--c-accent), 0 0 0 6px rgba(118, 171, 174, 0.15);
}
.ref__name {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--c-white);
}
.ref__company { color: rgba(238, 238, 238, 0.65); }
/* "Mehr Lesen" in the lime of the figures and the footer links, a size up
   (Willy, 2026-10-01); white on hover like the other links in the room. */
.page-referenzen .ref .ref__more {
  margin-left: auto;
  font-size: var(--fs-lead);
  font-weight: 700;
  color: var(--c-lime);
}
.page-referenzen .ref .ref__more:hover { color: var(--c-white); }

/* Rising out of the depth, one slab after the other; nothing moves under
   reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .js-anim .page-referenzen .refs[data-anim] { opacity: 1; transform: none; }
  .js-anim .page-referenzen .refs[data-anim] > .ref {
    opacity: 0;
    transform: translate3d(0, 2rem, -8rem) rotateX(12deg);
    transform-origin: 50% 0;
    transition: opacity 0.9s ease, transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .js-anim .page-referenzen .refs[data-anim].is-in > .ref { opacity: 1; transform: none; }
  .js-anim .page-referenzen .refs > .ref:nth-child(2) { transition-delay: 150ms; }
  .js-anim .page-referenzen .refs > .ref:nth-child(3) { transition-delay: 300ms; }
  .js-anim .page-referenzen .refs > .ref:nth-child(4) { transition-delay: 450ms; }
}

/* Tablet: result above the voice, divided by a hairline instead. */
@media (max-width: 1024px) {
  .ref {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-6);
    padding: var(--sp-7);
  }
  .ref__result {
    padding: 0 0 var(--sp-6);
    border-right: 0;
    border-bottom: 1px solid rgba(118, 171, 174, 0.2);
  }
}
@media (max-width: 767px) {
  .refs-section { padding-top: var(--sp-8); }
  .ref { padding: var(--sp-6) var(--sp-5); }
  .page-referenzen .ref .ref__more { margin-left: 0; }
}

/* --- Footer: ERP plus KI --------------------------------------------------- */

.kibh-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  margin-bottom: var(--sp-6);
  padding: var(--sp-5);
  border: 1px solid var(--c-border-dark);
  border-radius: var(--radius);
  color: var(--c-secondary);
  transition: border-color var(--transition), background var(--transition);
}
.kibh-band:hover {
  color: var(--c-secondary);
  border-color: var(--c-lime);
  background: rgba(238, 238, 238, 0.05);
}
.kibh-band__text { display: block; max-width: 46rem; }
.kibh-band__title {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  font-weight: 700;
  color: var(--c-white);
}
/* The band is a link, so the footer's lime link colour would swallow the
   whole paragraph; only the call-to-action line keeps it. */
.site-footer .kibh-band__sub { display: block; margin-top: var(--sp-2); font-size: var(--fs-small); color: var(--c-secondary); }
.kibh-band__cta {
  font-family: var(--font-display);
  font-size: var(--fs-body-lg);   /* one step up from --fs-small (Willy, 2026-09-28) */
  font-weight: 700;
  color: var(--c-lime);
  white-space: nowrap;
}

/* --- Calendly (KIBH's account, our wrapper) -------------------------------- */

.calendly { min-height: 700px; }
.calendly-inline-widget { width: 100%; }

/* ==========================================================================
   Case study — the KIBH design, copied
   (../KIBH/assets/css/main.css: the .page-case block and the Ergebnisse card
   rules, with .page-ergebnisse renamed to .page-referenzen). Values are KIBH's,
   unchanged, so the case-study page reads exactly as it does there. The
   Referenzen cards that stood here gave way to the showcase slabs on
   2026-10-01 ("Top Referenzen" above).
   ========================================================================== */

.page-case main .container { max-width: calc(var(--container) + 2 * var(--sp-5)); }

.page-case main {
  font-family: var(--font-sans);
  font-size: var(--fs-body-lg);
  line-height: 1.34;
  color: var(--c-text);
}
.page-case main :is(h1, h2, h3, h4, h5, h6),
.page-case main .btn,
.page-case main .eyebrow {
  font-family: var(--font-display);
}
/* Mulish has a real 600, as Plus Jakarta did before it, so this stays the
   weight the original asks for rather than the 700 the Avenir pages use as a
   stand-in for bold. */
.page-case main :is(h1, h2, h3) { font-weight: 600; }

/* --- hero --------------------------------------------------------------- */

/*
  The original's hero is a photograph with a teal bloom over black, and the
  client quote sits inside it. We have no licence to that photograph, so this
  is the same black + teal-bloom ground the Ergebnisse and Deep Reading Engine
  heroes already use. It reads the same way and costs no asset.
*/
.case-hero {
  position: relative;
  padding-block: var(--sp-9);
  overflow: hidden;
  text-align: center;
  color: rgba(255, 255, 255, 0.86);
  background:
    radial-gradient(ellipse 75% 85% at 78% 108%, rgba(118, 171, 174, 0.42), transparent 62%),
    radial-gradient(ellipse 55% 70% at 6% -12%, rgba(214, 216, 79, 0.13), transparent 60%),
    var(--c-ink);
}
.case-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(118, 171, 174, 0.55), transparent);
}

/* Lime, sentence case, full size -- the original's "Case study" line is a 24px
   heading, not the small-caps eyebrow used elsewhere on our site. */
.case-hero__eyebrow {
  font-size: var(--fs-h4);
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--c-lime);
}

.case-hero h1 {
  max-width: 26ch;
  margin: var(--sp-4) auto 0;
  /*
    64px on the original, whose headline is 60 characters long. Three of the
    four pages carry a headline twice that length, which at 64px fills the
    screen before the reader reaches the quote. 52px is the compromise: same
    scale and weight, still one system across the four pages.
  */
  font-size: clamp(2rem, 3.4vw, 3.25rem);
  line-height: 1.22;
  color: var(--c-white);
}

/* --- hero quote --------------------------------------------------------- */

.case-hero__label {
  margin-top: var(--sp-8);
  font-size: var(--fs-h4);
  font-weight: 400;
  color: var(--c-lime);
}

.case-quote {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: var(--sp-6);
  align-items: center;
  margin-top: var(--sp-6);
  text-align: left;
}
.case-quote__avatar {
  width: 7.5rem;
  height: 7.5rem;
  min-height: 0;
  font-size: var(--fs-eyebrow);
}
.case-quote__body { position: relative; }
.case-quote blockquote {
  margin: 0;
  padding-inline: var(--sp-7);
  font-size: var(--fs-body-lg);
  font-style: italic;
  line-height: 1.45;
  text-align: center;
  color: var(--c-white);
}
/*
  The original sets its two quotation marks as separate icon widgets, one at
  each end of the text. Generated content does the same job without adding two
  empty elements for a screen reader to walk past.
*/
.case-quote blockquote::before,
.case-quote blockquote::after {
  position: absolute;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 3.25rem;
  font-style: normal;
  line-height: 1;
  color: rgba(255, 255, 255, 0.5);
}
.case-quote blockquote::before { content: "\201C"; left: 0; top: -0.12em; }
.case-quote blockquote::after { content: "\201D"; right: 0; bottom: -0.4em; }

.case-quote__attrib {
  grid-column: 1 / -1;
  margin-top: var(--sp-5);
  font-size: var(--fs-body-lg);
  font-weight: 500;
  line-height: 1.35;
  color: var(--c-white);
}
.case-quote__attrib span {
  display: block;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.72);
}

/* --- body flow ---------------------------------------------------------- */

/*
  One flow container per page rather than a stack of <section>s: the original
  puts every paragraph, heading and card row 20px apart in a single column,
  and only a section heading opens a wider gap.
*/
.case-body { padding-block: var(--sp-8) var(--sp-9); }
.case-body > * { margin: 0; }
.case-body > * + * { margin-top: 1.25rem; }
.case-body > * + .case-h2 { margin-top: 44px; }

.case-h2 {
  padding-bottom: 0.625rem;
  border-bottom: 4px solid var(--c-accent);
  font-size: var(--fs-h1);
  line-height: 1.1;
  color: var(--c-accent);
}
/* A sub-heading inside a section -- "Kernpunkte der Lösung" on U2care. */
.case-h3 {
  font-size: var(--fs-h3);
  line-height: 1.2;
  color: var(--c-text);
}
/*
  The narrative runs at the site's body size rather than the 18px it inherits
  from `.page-case main`.

  18px is the size measured off the original, and at that size a page of
  continuous prose read as one uniform oversized block -- Hari's words were that
  it looked "a little bit like every text is too big". Dropping it to 16px puts
  it on the site's own body size and opens a real step above it for the pull
  quote, which stays at 18px, and below it for the card and list copy at 15px.
*/
.case-body > :is(p, ul, ol) { font-size: var(--fs-body); }
.case-body p { line-height: 1.34; }
.case-body :is(strong, b) { font-weight: 700; }
.case-body a {
  /* Underline drawn in the micro-interactions block at the foot of this file. */
  color: var(--c-accent-dark);
}
.case-body a:hover { color: var(--c-teal-dark); }

.case-figure .ph { aspect-ratio: 1140 / 384; border-radius: var(--radius-lg); }

/* --- cards -------------------------------------------------------------- */

.case-cards {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.case-cards--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
@media (min-width: 1100px) {
  .case-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.case-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 1.25rem;
  border: 1px solid var(--c-accent);
  border-radius: var(--radius-lg);
  /* A step under the narrative, the same relationship the Deep Reading Engine
     page has between its card copy and its section leads. */
  font-size: var(--fs-small);
  line-height: 1.5;
  text-align: center;
}
.case-card > * { margin: 0; }
.case-card__icon {
  width: 3.125rem;
  height: 3.125rem;
  flex: none;
  color: #69727d;
}
.case-card__icon svg { display: block; width: 100%; height: 100%; }
/*
  The three pages that number their steps put the badge where U2care puts its
  icon, so the two occupy the same slot and rows still line up across pages.
*/
.case-card__num {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  margin-bottom: 6px;
  background: var(--c-accent);
  border-radius: 8px;
  font-size: var(--fs-body-lg);
  font-weight: 700;
  line-height: 1;
  color: var(--c-white);
}
.case-card h3 {
  font-size: var(--fs-body-lg);
  font-weight: 700;
  line-height: 1.3;
  color: var(--c-text);
}
.case-card ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/*
  Potenzial Analyse's three step cards carry a bullet list. The original
  centres those lines, which leaves the bullets floating at ragged positions
  and is hard to read, so a card holding a list is set left instead.
*/
.case-card--list { text-align: left; align-items: stretch; }
.case-card ul li { position: relative; padding-left: 1.15em; }
.case-card ul li::before {
  content: "";
  position: absolute;
  left: 0.15em;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--c-accent);
}





/* ==========================================================================
   E-Rechnung — the KIBH page, copied 1:1 (Hari, 2026-09-25)
   (../KIBH/assets/css/main.css, "E-Rechnung page"). Everything is scoped to
   .page-erechnung. The values are KIBH's, which KIBH measured from the
   rendered WordPress original: its own typeface, container and type scale,
   none of which match the rest of this site, by design of the original.
   Only three adaptations: image URLs are relative to this stylesheet; the
   icon sizes and the left/right reveals, which this site does not carry
   globally, are defined here for this page alone; and there is no
   .er-cta__logo rule until the logo exists (PH-15). Since 2026-09-28 the
   page wears the Startseite's look (Willy): the site's own type instead of
   Plus Jakarta Sans, and one visual block at the end ("The Startseite's
   look"). Text, layout and behaviour are unchanged.
   ========================================================================== */

.page-erechnung main {
  color: var(--c-secondary);
  /* the slide-in animations start off-canvas */
  overflow-x: clip;
}

/* The original lays this page out on a 1140px content measure with no inner
   padding at desktop widths. Widening the box by the gutter reproduces it
   (KIBH writes 1188px; same figure as the case-study page here). */
.page-erechnung main .container { max-width: calc(var(--container) + 2 * var(--sp-5)); }

/* --- icons and slide-ins (KIBH shared rules, this page only) ------------ */

/* The sprite only carries <symbol> definitions; it must occupy no space but
   stay in the layout tree, so `display: none` is deliberately not used. */
.page-erechnung .sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.page-erechnung .ico { width: 2rem; height: 2rem; stroke-width: 1.5; }
.page-erechnung .ico--sm { width: 1rem; height: 1rem; stroke-width: 2; }
.page-erechnung .ico--38 { width: 2.375rem; height: 2.375rem; }
.page-erechnung .ico--40 { width: 2.5rem; height: 2.5rem; }
.page-erechnung .ico--42 { width: 2.625rem; height: 2.625rem; }
.page-erechnung .ico--risk { color: #d50000; }

/* KIBH's images slide in from the side they sit on. The rest of this site
   keeps "up"/"fade" only because left/right caused horizontal scroll there;
   here `overflow-x: clip` on <main> contains it, exactly as on KIBH. */
.js-anim .page-erechnung [data-anim="left"] { transform: translate3d(-4rem, 0, 0); }
.js-anim .page-erechnung [data-anim="right"] { transform: translate3d(4rem, 0, 0); }
.js-anim .page-erechnung [data-anim].is-in { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js-anim .page-erechnung [data-anim] { transform: none; }
}

/* --- hero --------------------------------------------------------------- */

.er-hero {
  padding-block: 9.625rem 11rem;
  background: #000 url("../img/erechnung/bg-1.webp") 0 0 / cover no-repeat;
  color: var(--c-white);
  text-align: center;
}
/*
  Opted out of the `text-wrap: balance` the base heading rule applies.

  This heading carries an explicit <br>, so the author has already decided where
  it breaks, and balancing works against that. Below 640px it produced an empty
  trailing line fragment inside `.er-hero__mark` -- and that span's highlight is
  an absolutely positioned ::after, whose containing block for a split inline
  box runs from the first fragment's start to the last one's end. The stroke
  collapsed from 170px to a 27px stub floating in the gap between the two
  headline lines.
*/
.er-hero h1 {
  text-wrap: wrap;
  font-size: 4rem;
  line-height: 1;
  font-weight: 600;
  color: var(--c-white);
}
/* the hand-drawn underline the original parks under the last word */
.er-hero__mark { position: relative; }
.er-hero__mark::after {
  content: "";
  position: absolute;
  left: 0;
  right: -0.35em;
  bottom: -0.05em;
  height: 0.9375rem;
  background: url("../img/erechnung/graphic.svg") 50% 50% / 100% 100% no-repeat;
}
.er-hero__lead {
  margin-top: 4rem;
  font-size: 1.25rem;
  line-height: 1.75rem;
  color: rgba(255, 255, 255, 0.75);
}
.er-hero__lead b { color: var(--c-white); font-weight: 700; }
.er-hero__note {
  margin-top: 6rem;
  font-size: 1rem;
  line-height: 1.75rem;
  color: var(--c-white);
}

/* --- shared section furniture ------------------------------------------- */

.er-section { padding-block: 5rem; }

/* Black ground with the neon bloom along the bottom, same artwork as the hero.
   KIBH restored this background, which the live WordPress site has lost on
   all three bands; the shape in the questions band is drawn with
   `plus-lighter`, so it only resolves against a dark ground at all. */
.er-section--ask,
.er-section--solutions,
.er-section--cta {
  background: #000 url("../img/erechnung/bg-1.webp") 50% 100% / cover no-repeat;
  color: var(--c-white);
}
.er-section--ask .er-h2,
.er-section--solutions .er-h2,
.er-section--cta .er-cta__title { color: var(--c-white); }
.er-section--risk { padding-block: 5rem 6rem; }
.er-section--detail { padding-block: 0 5rem; }
.er-section--cta { padding-block: 7.5rem; text-align: center; }
/* See the note on .er-card__more: this one button is Avenir on the original. */
.er-section--cta .er-btn { font-family: var(--font-display); }

.er-h2 {
  font-size: 2.75rem;
  line-height: 1.1;
  font-weight: 600;
  text-align: center;
  color: var(--c-primary);
}
.er-h2--lg { font-size: 2.875rem; }
.er-h3 { font-size: 2.375rem; line-height: 1.105; font-weight: 600; color: var(--c-primary); }
.er-h4 { font-size: 1.75rem; line-height: 2.125rem; font-weight: 600; color: var(--c-text); }
.er-body {
  margin-top: 1.5rem;
  font-size: 1.125rem;
  line-height: 1.5rem;
  color: var(--c-text);
}
.er-body b { font-weight: 700; }
.er-accent { color: var(--c-lime); }

.er-btn-row { display: flex; justify-content: center; margin-top: 2.5rem; }
.er-btn-row--start { justify-content: flex-start; }

.er-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1.125rem 2.25rem;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  /* 0.3s is what the original's buttons use */
  transition: background 0.3s, color 0.3s;
}
.er-btn__arrow { stroke-width: 1.8; }
.er-btn--sm { padding: 0.875rem 1.75rem; font-size: 0.875rem; }
.er-btn--white { background: var(--c-white); color: #000; }
.er-btn--white:hover { background: var(--c-lime); color: #000; }
.er-btn--teal { background: var(--c-accent); color: var(--c-white); }
.er-btn--teal:hover { background: #80b0a4; color: var(--c-white); }
/* the two buttons inside the tab panels go lime on hover, not darker teal */
.er-btn--teal.er-btn--sm:hover { background: var(--c-lime); color: var(--c-text); }

/* --- what happens if you miss the deadline ------------------------------ */

.er-tiles {
  margin-top: 2.25rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
  list-style: none;
}
.er-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  height: 100%;
  padding: 1.5rem 1.25rem;
  background: #f3f3f3;
  border-radius: 10px;
  text-align: center;
}
.er-tile p {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--c-text);
}

/* --- the four questions ------------------------------------------------- */

.er-section--ask { position: relative; isolation: isolate; }
/* Decorative shape, bleeding off the left edge exactly as on the original.
   The clipping frame is itself absolutely positioned and inset to the band, so
   the oversized image never enlarges the section's own scroll box. */
.er-blob-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.er-blob {
  position: absolute;
  left: -18rem;
  top: 8.9375rem;
  width: 69.5rem;
  height: 45.375rem;
  max-width: none;
}
.er-section--ask > .container { position: relative; }

.er-asks {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
  list-style: none;
}
.er-asks li {
  display: grid;
  grid-template-columns: 2.625rem minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
  min-width: 0;
}
.er-asks .ico { color: rgba(255, 255, 255, 0.75); }
/* 14px on 14px leading, what the live page sets here and in the feature copy
   below; Willy put KIBH's page back to the original's own figures. */
.er-asks p {
  font-size: 0.875rem;
  line-height: 1;
  color: rgba(255, 255, 255, 0.75);
}
.er-asks__close {
  max-width: 52rem;
  margin: 3rem auto 0;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.333;
  text-align: center;
  color: var(--c-white);
}

/* --- image + icon-list rows --------------------------------------------- */

.er-media-split {
  display: grid;
  grid-template-columns: 25rem minmax(0, 1fr);
  gap: 2.5rem;
  align-items: center;
}
.er-shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;
}

.er-features {
  margin-top: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  list-style: none;
}
.er-features li {
  display: grid;
  /* Two tracks only: the icon, and one wrapper holding all the text. Siblings
     placed directly in the row would wrap into the narrow icon column. */
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}
.er-features li > div { min-width: 0; }
.er-features .ico { color: var(--c-accent); }
.er-features__title {
  font-size: 1.125rem;
  font-weight: 600;
  /* 18px on 18px, as the original sets it. */
  line-height: 1;
  color: var(--c-text);
}
.er-features__title + p {
  margin-top: 0.5rem;
  /* 16/14 leading here, not the 1.0 the ask block uses. */
  font-size: 0.875rem;
  line-height: 1.143;
  color: rgba(0, 0, 0, 0.75);
}

/* --- the two solution cards --------------------------------------------- */

.er-cards {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}
.er-card {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  height: 100%;
  padding: 2rem 2.5rem;
  border: 2px solid;
  border-radius: 20px;
}
.er-card h3 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 2.375rem;
  line-height: 1.2;
  font-weight: 600;
}
.er-card h4 { font-size: 1.1875rem; line-height: 1.3; font-weight: 600; }
/* The original does not give the two cards the same subhead size: the big
   card's runs at 19px and the small card's at 22px. */
.er-card--small h4 { font-size: 1.375rem; }
.er-card p { margin-top: 1rem; font-size: 1rem; font-weight: 500; line-height: 1.375; }
.er-card__more {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  align-self: center;
  margin-top: auto;
  padding: 1.5rem 0 0;
  /* KIBH's toggle is 40px tall; the 4px below reach this site's 44px touch
     minimum, and the equal negative margin keeps the card exactly as it was. */
  padding-bottom: 0.25rem;
  margin-bottom: -0.25rem;
  background: none;
  border: 0;
  font: inherit;
  /* Two controls on this page escape Plus Jakarta Sans on the original --
     Elementor defaults showing through rather than a decision. 1:1 means
     copying that: this toggle renders in Verdana there, and the closing
     "Termin buchen" in Avenir, for which Mulish is the stand-in. */
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.3s;
}
.er-card__more .ico { transition: transform var(--transition); }
.er-card__more:hover .ico { transform: translateY(2px); }

/* The bloom behind this band runs straight through the right-hand card, so the
   cards get an opaque base under their tint instead of letting it read
   through. */
.er-card { background-color: rgba(0, 0, 0, 0.5); }
.er-card--big {
  border-color: var(--c-lime);
  background-image: linear-gradient(rgba(214, 216, 79, 0.25), rgba(214, 216, 79, 0.25));
}
.er-card--big h3,
.er-card--big h4 { color: var(--c-lime); }
/* Low contrast, but this is the original's own treatment for the card copy. */
.er-card--big p { color: rgba(214, 216, 79, 0.6); }
.er-card--big .er-card__more { color: rgba(214, 216, 79, 0.5); }
.er-card--big .er-card__more:hover { color: var(--c-lime); }

.er-card--small {
  border-color: var(--c-accent);
  background-image: linear-gradient(rgba(118, 171, 174, 0.25), rgba(118, 171, 174, 0.25));
}
.er-card--small h3,
.er-card--small h4 { color: var(--c-accent); }
.er-card--small p { color: rgba(118, 171, 174, 0.75); }
.er-card--small .er-card__more { color: rgba(118, 171, 174, 0.75); }
.er-card--small .er-card__more:hover { color: var(--c-accent); }

/* --- detail tabs -------------------------------------------------------- */

.er-tabs__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.er-tabs__btn {
  padding: 0.9375rem 2.1875rem;
  background: none;
  border: 1px solid var(--c-accent);
  border-radius: 5px;
  font: inherit;
  font-size: 1.1875rem;
  font-weight: 600;
  color: var(--c-accent);
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
}
.er-tabs__btn[aria-selected="true"] { background: var(--c-accent); color: var(--c-white); }
.er-tabs__btn:hover { background: rgba(118, 171, 174, 0.15); }
.er-tabs__btn[aria-selected="true"]:hover { background: var(--c-accent); }

.er-tabs__panel { padding-top: 5rem; }
.er-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.5rem;
  align-items: center;
}
.er-row + .er-row { margin-top: 3.75rem; }

/* --- closing call to action --------------------------------------------- */

.er-cta__title {
  font-size: 2.375rem;
  line-height: 3rem;
  font-weight: 600;
  color: var(--c-primary);
}

/* --- narrow viewports ---------------------------------------------------- */

@media (max-width: 1023px) {
  .er-tiles,
  .er-asks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .er-media-split,
  .er-cards,
  .er-row { grid-template-columns: minmax(0, 1fr); }
  /* stacked, the text should lead even in the flipped rows */
  .er-row--flip .er-shot { order: 2; }
  .er-hero { padding-block: 6rem 7rem; }
  .er-hero h1 { font-size: 3rem; }
  .er-h2 { font-size: 2.25rem; }
  .er-h2--lg { font-size: 2.25rem; }
  .er-h3 { font-size: 2rem; }
  .er-blob { top: 2.5rem; left: -26.25rem; }
}

@media (max-width: 639px) {
  .er-tiles,
  .er-asks { grid-template-columns: minmax(0, 1fr); }
  .er-hero h1 { font-size: 2.25rem; }
  .er-hero__lead { margin-top: 2.5rem; font-size: 1.125rem; }
  .er-hero__note { margin-top: 3rem; }
  .er-h2, .er-h2--lg { font-size: 1.875rem; }
  .er-h3 { font-size: 1.75rem; }
  .er-card { padding: 1.5rem; }
  .er-card h3 { font-size: 1.75rem; }
  .er-tabs__btn { padding: 0.75rem 0.625rem; font-size: 1rem; }
  .er-btn { padding: 1rem 1.5rem; font-size: 0.9375rem; }
}

/* Below 360px three words no longer fit their column at KIBH's sizes and
   `overflow-wrap` would split them (this site's rule: never, CLAUDE.md
   §16.8). Measured at 320px, largest size that fits in brackets. From 360px
   up the page is KIBH's figures unchanged. Checked by tests/wordsplit.py. */
@media (max-width: 359px) {
  .er-features__title { font-size: 0.9375rem; }  /* 15px: "Automatisierungskompetenz" (16.0) */
  /* 17px: "Schritt-für-Schritt-Anleitung", bold Verdana since 2026-09-28
     (18px needs 288.2 of 288 px) */
  .er-body { font-size: 1.0625rem; }
  .er-card--small h4 { font-size: 1.3125rem; }   /* 21px: "Handlungsempfehlung" (21.5) */
  /* 36px: measured on the placeholder "[MARKENNAME]" (36.4); re-check once
     the real name is in. */
  .er-cta__title { font-size: 2.25rem; }
}

/* --- The Startseite's look (Willy, 2026-09-28) --------------------------
   Purely visual (Willy: "nur visuell einheitlich und clean"): text, layout,
   images and behaviour stay KIBH's as set above. What changes is the
   surface: the page stands in the Startseite's room (the fixed .room in the
   markup, body ground and footer in the shared block above), every band is
   transparent over it, the type is the site's own, the tiles and cards are
   the Startseite's glass, the buttons its buttons. Listed in
   docs/content.md §3a. */

/* The bands: no black-and-bloom artwork, no white; the room shows through.
   The hero keeps the Startseite hero's soft teal light, centred here because
   this hero is centred. */
.er-hero,
.er-section,
.er-section--ask,
.er-section--solutions,
.er-section--cta { background: transparent; }
.er-hero {
  background: radial-gradient(ellipse 45% 60% at 50% 45%, rgba(118, 171, 174, 0.16), transparent 70%);
}
/* KIBH's blurred shape only resolved against its black band. */
.er-blob-wrap { display: none; }

/* Type: Mulish for headings, titles and controls, Verdana for running text,
   as on the Startseite. Verdana runs wider than Plus Jakarta, so the two
   14px blocks get room to breathe instead of KIBH's 1.0 leading. */
.er-tile p,
.er-features__title,
.er-cta__title,
.er-btn,
.er-tabs__btn,
.er-card__more { font-family: var(--font-display); }
.er-asks p,
.er-features__title + p { line-height: 1.45; }
/* Verdana runs wider: at KIBH's measure the middle sentence of the closing
   text left "Aufwand." on a line of its own. A little more measure keeps it
   on one line again, as in the original. */
.er-asks__close { max-width: 58rem; text-wrap: balance; }

/* Colours on the dark ground: white headings, the Startseite's greys for
   text, the lime for the one accented word. */
.page-erechnung main :is(.er-h2, .er-h3, .er-h4, .er-cta__title, .er-features__title) { color: var(--c-white); }
.er-hero__lead,
.er-hero__note { color: rgba(238, 238, 238, 0.72); }
.er-hero__mark { color: var(--c-lime); }
.er-hero__mark::after { display: none; }
.er-body,
.er-features__title + p,
.er-asks p,
.er-asks__close { color: rgba(238, 238, 238, 0.78); }
.er-body b { color: var(--c-white); }
.er-asks .ico { color: var(--c-accent); }

/* The risk tiles: the Startseite's glass rows. */
.er-tile {
  background: linear-gradient(135deg, rgba(118, 171, 174, 0.1), rgba(238, 240, 239, 0.03) 60%);
  border: 1px solid rgba(118, 171, 174, 0.2);
  border-radius: 12px;
  box-shadow:
    0 1.5rem 3rem -1.5rem rgba(0, 0, 0, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.er-tile p { color: var(--c-white); }

/* The photos: framed like the glass and a touch darker, so the white desks
   do not glare against the ink. The outline sits inside, the size is
   unchanged. */
.er-shot img {
  border-radius: 12px;
  outline: 1px solid rgba(118, 171, 174, 0.25);
  outline-offset: -1px;
  box-shadow: 0 2.5rem 5rem -2rem rgba(0, 0, 0, 0.8);
  filter: brightness(0.88) saturate(0.9);
}

/* The two solution cards: the Startseite's CTA slab, lime for the large
   solution and teal for the small one, as on the original. */
.er-card {
  border-width: 1px;
  border-radius: 16px;
  box-shadow:
    0 2.5rem 5rem -2rem rgba(0, 0, 0, 0.8),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.er-card--big {
  background:
    radial-gradient(ellipse 70% 90% at 100% 0%, rgba(214, 216, 79, 0.12), transparent 70%),
    rgba(13, 29, 32, 0.6);
  border-color: rgba(214, 216, 79, 0.4);
}
.er-card--small {
  background:
    radial-gradient(ellipse 70% 90% at 100% 0%, rgba(118, 171, 174, 0.18), transparent 70%),
    rgba(13, 29, 32, 0.6);
  border-color: rgba(118, 171, 174, 0.35);
}
.er-card--big h3,
.er-card--small h3 { color: var(--c-white); }
.er-card--big h3 .ico { color: var(--c-lime); }
.er-card--small h3 .ico { color: var(--c-accent); }
.er-card--big p,
.er-card--small p { color: rgba(238, 238, 238, 0.78); }
.er-card--big .er-card__more { color: var(--c-lime); }
.er-card--small .er-card__more { color: var(--c-accent); }
.er-card--big .er-card__more:hover,
.er-card--small .er-card__more:hover { color: var(--c-white); }

/* The tabs: resting on glass, the chosen one in the button teal. */
.er-tabs__btn {
  background: rgba(118, 171, 174, 0.05);
  border-color: rgba(118, 171, 174, 0.35);
  border-radius: 6px;
  color: rgba(238, 238, 238, 0.78);
}
.er-tabs__btn:hover { background: rgba(118, 171, 174, 0.15); color: var(--c-white); }
.er-tabs__btn[aria-selected="true"],
.er-tabs__btn[aria-selected="true"]:hover {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-white);
}

/* The buttons: the Startseite's primary button, without KIBH's arrow. */
.page-erechnung .er-btn {
  gap: var(--sp-2);
  padding: 0.8125rem 1.625rem;
  border-radius: 6px;
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.3;
  background: var(--c-accent);
  color: var(--c-white);
  transition: background var(--transition), color var(--transition),
    transform var(--transition);
}
.page-erechnung .er-btn:hover { background: var(--c-accent-dark); color: var(--c-white); }
@media (hover: hover) {
  .page-erechnung .er-btn:hover { transform: translateY(-1px); }
}
.page-erechnung .er-btn__arrow { display: none; }

/* The closing band: the Startseite's CTA slab floating in the room. Title
   and button stay centred, as on the original. */
.er-section--cta { padding-block: var(--sp-8) var(--sp-9); }
.page-erechnung main .er-section--cta > .container {
  width: calc(100% - 2 * var(--sp-5));
  max-width: calc(var(--container) - 2 * var(--sp-5));
  padding: var(--sp-7);
  background:
    radial-gradient(ellipse 60% 120% at 100% 0%, rgba(118, 171, 174, 0.18), transparent 70%),
    rgba(13, 29, 32, 0.6);
  border: 1px solid rgba(118, 171, 174, 0.3);
  border-radius: 16px;
  box-shadow:
    0 2.5rem 5rem -2rem rgba(0, 0, 0, 0.8),
    0 0 4rem rgba(118, 171, 174, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
@media (max-width: 767px) {
  .page-erechnung main .er-section--cta > .container {
    width: calc(100% - 2 * var(--sp-4));
    padding: var(--sp-6) var(--sp-5);
  }
}


/* --- Navigation drawer (≤1239) ---------------------------------------------
   Five entries since E-Rechnung joined the nav (2026-09-25): the bar needs
   1180px for them plus the one-line CTA, measured. Below that it broke the
   button onto two lines and scrolled the page sideways (1025px: 1046 wide),
   so the drawer took over up to 1199px instead of up to 1024px. Five again
   since "Warum Odoo" (2026-10-01), with the longer "E-Rechnungspflicht 2027":
   1201px plus the scrollbar, 1216px, measured; at 1200px the button broke
   onto two lines. Hence 1239px, the same margin as before.
   Everything else keeps Elementor's 1024 breakpoint. */

@media (max-width: 1239px) {
  .nav-toggle { display: flex; }

  .nav {
    position: fixed;
    top: var(--header-h);
    right: 0;
    bottom: 0;
    width: min(100%, 22rem);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--sp-5);
    background: var(--c-white);
    border-left: 1px solid var(--c-border);
    transform: translateX(100%);
    transition: transform var(--transition);
    visibility: hidden;
    z-index: 95;
    overflow-y: auto;
  }
  .nav.is-open { transform: none; visibility: visible; }
  .nav__list { flex-direction: column; gap: 0; }
  .nav__link {
    display: flex;
    align-items: center;
    min-height: 3.5rem;
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--c-border);
    font-size: var(--fs-body-lg);
    white-space: normal;
  }
  .nav__list { display: block; }
  .nav__link.is-active { border-bottom-color: var(--c-accent); }
  .nav .btn { margin-top: var(--sp-6); }

  /* In the drawer the case studies are simply listed under their parent:
     no overlay, no toggle to find. */
  .nav__item--has-sub { display: block; }
  .nav__caret { display: none; }
  .nav__link--sub { padding-right: var(--sp-3); }
  /* in the drawer the item is a plain row again */
  .nav__item--has-sub:hover,
  .nav__item--has-sub:focus-within,
  .nav__item--has-sub:has(.is-active) { background: none; }
  .nav__item--has-sub .nav__link--sub:hover,
  .nav__item--has-sub .nav__link--sub.is-active { background: var(--c-accent-soft); }
  .nav__sub {
    position: static;
    min-width: 0;
    margin: var(--sp-1) 0 var(--sp-3) var(--sp-4);
    padding: 0 0 0 var(--sp-4);
    border: none;
    border-left: 2px solid var(--c-border);
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    visibility: inherit;
    transform: none;
  }
}

/* --- Responsive: tablet (≤1024) ------------------------------------------- */

@media (max-width: 1024px) {
  :root {
    --fs-hero: 3.25rem;
    --fs-h1: 2.75rem;
  }

  .hero__grid { grid-template-columns: 1fr; gap: var(--sp-6); }
  .hero__scene { width: 100%; max-width: 36rem; margin-inline: auto; }

  .split,
  .cta-band__inner { grid-template-columns: 1fr; }
  /* Stacked media must not become a 700px block: same cap as the hero media. */
  .split__media { max-width: 34rem; }
  .cta-band__actions { justify-content: flex-start; }
  .principles { grid-template-columns: 1fr; gap: var(--sp-6); }
  .principles > div { display: block; grid-row: auto; }
  .branche { grid-template-columns: 1fr; gap: var(--sp-6); }
  .site-footer__grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: var(--sp-6); }
}

/* --- Responsive: mobile (≤767) -------------------------------------------- */

@media (max-width: 767px) {
  :root {
    --header-h: 4.75rem;
    --fs-body: 1rem;
    /* Hero H1 sized so its longest word fits the column (KIBH derivation).
       Longest word here: "Excel-Listen" — breaks at the hyphen if needed. */
    --fs-hero: clamp(2rem, calc((100vw - 2rem) / 9.1), 2.5rem);
    --fs-h1: 2.375rem;
    --fs-display: 2.375rem;
    --fs-h2: 2rem;
    --fs-h3: 1.5rem;
    --sp-9: 3.5rem;
    --sp-10: 4rem;
  }

  .container { padding-inline: var(--sp-4); }
  .section--tight { padding-block: var(--sp-7); }

  .brand__logo { height: 1.75rem; }

  .hero { padding-block: var(--sp-8) var(--sp-9); }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .text-link { text-align: center; }

  .ledger__row { grid-template-columns: 1fr; gap: var(--sp-2); padding-block: var(--sp-4); }
  .ledger__key { font-size: var(--fs-lead); }

  .step { grid-template-columns: 2rem 1fr; }
  .step::before { font-size: var(--fs-lead); }

  .section-head { margin-bottom: var(--sp-6); }
  .cta-band { padding-block: var(--sp-7); }
  .cta-band__actions { flex-direction: column; align-items: stretch; }

  .prose h2 { font-size: 1.625rem; margin-top: var(--sp-6); }

  .btn { width: 100%; }
  .btn-row { flex-direction: column; align-items: stretch; }
  .nav .btn { width: 100%; }

  /* Case study, KIBH's own mobile rules: the portrait moves above the quote
     instead of taking half the column (../KIBH, @media max-width 767). */
  .case-hero { padding-block: var(--sp-8); }
  .case-quote {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: var(--sp-5);
  }
  .case-quote blockquote { padding-inline: var(--sp-6); }
  .case-quote__attrib { text-align: center; }
  .case-h2 { font-size: var(--fs-h2); }
  .case-body { padding-block: var(--sp-7) var(--sp-8); }
  /* The scene keeps its composition on a phone: smaller cards, pulled in
     from the edges so the long labels stay inside the room. */
  .hero__mod a { gap: var(--sp-2); padding: 0.3125rem 0.625rem 0.3125rem 0.3125rem; font-size: 0.75rem; border-radius: 8px; }
  .hero__icon { width: 1.625rem; height: 1.625rem; border-radius: 6px; }
  .hero__icon svg { width: 0.9375rem; height: 0.9375rem; }
  .hero__core { padding: 0.8125rem 1.125rem; border-radius: 12px; }
  .hero__core-name { font-size: 1.375rem; }
  .hero__core-sub { font-size: 0.6875rem; }
  .hero__scene { --depth: 0.4; aspect-ratio: 1 / 1.15; }
  .hero__core { left: 50%; top: 50%; }
  .hero__mod:nth-child(1) { --x: 25%; --y: 7%; }
  .hero__mod:nth-child(2) { --x: 63%; --y: 19%; }
  .hero__mod:nth-child(3) { --x: 22%; --y: 82%; }
  .hero__mod:nth-child(4) { --x: 63%; --y: 93%; }
  .hero__mod:nth-child(5) { --x: 22%; --y: 31%; }
  .hero__mod:nth-child(6) { --x: 76%; --y: 70%; }
  .kibh-band { padding: var(--sp-5); }
  .form .btn { justify-self: stretch; }
  .ktab { flex: 1 1 100%; justify-content: center; padding-inline: var(--sp-4); }
}

@media (orientation: landscape) and (max-height: 500px) {
  :root { --header-h: 3.5rem; }
}

/* --- Motion: one moment, and only for those who want motion --------------- */

/* The Startseite hero: the core and the modules arrive out of the depth of
   the room once, then drift on their planes, each on its own phase. Nothing
   moves under prefers-reduced-motion: the cards simply stand in place. */
@media (prefers-reduced-motion: no-preference) {
  .hero__mod,
  .hero__core {
    animation: arrive 1400ms cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: calc(150ms + var(--i) * 90ms);
  }
  .hero__mod a { animation: drift 7s ease-in-out var(--d) infinite; }
}

@keyframes arrive {
  from { opacity: 0; transform: translateZ(calc(var(--z) * var(--depth) - 37.5rem)); }
  to { opacity: 1; transform: translateZ(calc(var(--z) * var(--depth))); }
}
@keyframes drift {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -0.625rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- Print ---------------------------------------------------------------- */

/* --- Narrow phones: keep the longest German compounds whole ----------------
   Rule (Hari, 2026-09-23, and the KIBH lesson in CLAUDE.md §16.8): no word is
   ever broken, with or without a hyphen. Four headings had a single word that
   needed more room than its column at 320-360px, so `overflow-wrap` chopped it.
   The sizes below are the measured ones that make the longest word fit:
   Projektimplementierung, Prozessautomatisierung, Prozessautomation,
   Geschäftsführer. Checked by tests/wordsplit.py. */
@media (max-width: 400px) {
  .flow__panel h3 { font-size: 1.25rem; }   /* 20px: "Projektimplementierung" */
  .case-hero h1 { font-size: 1.8rem; }      /* 29px: "Prozessautomation" */

  /* Calendly's widget will not go below 320px, which is the whole viewport
     here, so on a 320px screen the panel gives up the container's gutter
     instead of pushing the page sideways. */
  .kontakt .calendly { margin-inline: calc(-1 * var(--sp-4)); }
}

@media print {
  .site-header, .site-footer, .skip-link, .cta-band, .nav-toggle, .jump { display: none; }
  body { color: #000; }
  .section--dark { background: none; color: #000; }
  .section--dark h2, .section--dark h3, .section--dark .ledger__key { color: #000; }
}