/* ==========================================================================
   Pafelwerk — stylesheet
   Plain CSS, no build step. Organised as:
   tokens → reset → layout → components → sections → utilities → responsive
   ========================================================================== */

/* ---------- Tokens ---------- */

:root {
  /* Palette: Werkstatt — Stahlblau, Messing, Papier.
     Die Tokens hießen bis zur Umbenennung --water und --reed (Peene, Schilf).
     Die Werte sind geblieben: Stahl und Messing sind Werkstattmaterialien,
     und die Kontrastverhältnisse waren geprüft. Geändert hat sich die
     Bildsprache, nicht die Farbe. */
  --ink: #0f2027;
  --ink-700: #16303a;
  --ink-500: #35505c;
  --ink-300: #64808c;
  --steel: #1f6f7a;
  --steel-bright: #2d8d99;
  --steel-pale: #e6f1f2;
  --brass: #c8a96a;
  --brass-pale: #f6efe1;
  --paper: #fbf9f6;
  --surface: #ffffff;
  --line: #e4ded5;
  --line-dark: rgb(255 255 255 / 0.14);

  --text: var(--ink);
  --text-muted: var(--ink-500);
  --text-inverse: #f2f6f6;
  --text-inverse-muted: rgb(242 246 246 / 0.72);

  /* Typography */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;

  --step--1: clamp(0.84rem, 0.82rem + 0.1vw, 0.9rem);
  --step-0: clamp(1rem, 0.97rem + 0.15vw, 1.08rem);
  --step-1: clamp(1.15rem, 1.08rem + 0.35vw, 1.35rem);
  --step-2: clamp(1.4rem, 1.25rem + 0.7vw, 1.85rem);
  --step-3: clamp(1.75rem, 1.45rem + 1.4vw, 2.6rem);
  --step-4: clamp(2.1rem, 1.5rem + 3vw, 4rem);

  /* Space */
  --space-2xs: 0.375rem;
  --space-xs: 0.625rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2.25rem;
  --space-xl: 3.5rem;
  --space-2xl: clamp(3.5rem, 2rem + 7vw, 7rem);

  --shell: 72rem;
  --radius: 14px;
  --radius-lg: 22px;

  --shadow-sm: 0 1px 2px rgb(15 32 39 / 0.05), 0 2px 8px rgb(15 32 39 / 0.04);
  --shadow-md: 0 2px 6px rgb(15 32 39 / 0.06), 0 14px 34px rgb(15 32 39 / 0.08);
  --shadow-lg: 0 4px 10px rgb(15 32 39 / 0.08), 0 28px 60px rgb(15 32 39 / 0.14);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --header-h: 4.5rem;
}

/* ---------- Reset ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

p { margin: 0 0 var(--space-s); }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: var(--steel); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ink); }

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

button { font: inherit; color: inherit; }

table { border-collapse: collapse; width: 100%; }

:focus-visible {
  outline: 3px solid var(--steel-bright);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--brass); color: var(--ink); }

/* ---------- Layout ---------- */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: clamp(1.15rem, 4vw, 2.5rem);
}

.section { padding-block: var(--space-2xl); }
.section--tight { padding-block: clamp(2.5rem, 1.5rem + 5vw, 5rem); }
.section--surface { background: var(--surface); border-block: 1px solid var(--line); }

.section--ink {
  background:
    radial-gradient(90rem 40rem at 15% -10%, rgb(45 141 153 / 0.28), transparent 60%),
    radial-gradient(60rem 30rem at 95% 110%, rgb(200 169 106 / 0.16), transparent 60%),
    var(--ink);
  color: var(--text-inverse);
}
.section--ink h2,
.section--ink h3 { color: var(--text-inverse); }
/* `:not(.btn)` matters: without it this rule outranks .btn--primary
   (0,1,1 beats 0,1,0) and the gold CTA ends up with pale link-blue text. */
.section--ink a:not(.btn) { color: #9fd9df; }
.section--ink a:not(.btn):hover { color: #fff; }

.section__head { max-width: 46rem; margin-bottom: var(--space-xl); }
.section__title { font-size: var(--step-3); }
.section__sub {
  margin-top: var(--space-s);
  font-size: var(--step-1);
  color: var(--text-muted);
  text-wrap: pretty;
}
.section__head--light .section__sub,
.section--ink .section__sub { color: var(--text-inverse-muted); }

.split {
  display: grid;
  gap: var(--space-l) var(--space-xl);
  grid-template-columns: 1fr;
}

.prose p { max-width: 44rem; }
.prose p + p { margin-top: var(--space-s); }

/* ---------- Skip link ---------- */

.skip-link {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 200;
  transform: translate(-50%, -120%);
  padding: 0.75rem 1.25rem;
  background: var(--ink);
  color: var(--text-inverse);
  border-radius: 0 0 var(--radius) var(--radius);
  text-decoration: none;
  transition: transform 0.2s var(--ease);
}
.skip-link:focus-visible { transform: translate(-50%, 0); color: #fff; }

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgb(251 249 246 / 0.82);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.site-header.is-stuck {
  border-bottom-color: var(--line);
  box-shadow: var(--shadow-sm);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--ink);
  text-decoration: none;
  flex-shrink: 0;
}
.brand__mark { width: 2.1rem; height: 2.1rem; color: var(--steel); }
.brand__text {
  display: flex;
  flex-direction: column;
  font-family: var(--font-display);
  font-size: 1.1rem;
  line-height: 1.02;
  letter-spacing: -0.02em;
}
.brand__text strong { font-weight: 700; }
.brand__text span {
  font-size: 0.68em;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--steel);
  font-family: var(--font-sans);
}
.brand--footer { color: var(--text-inverse); }
.brand--footer .brand__mark { color: var(--brass); }
.brand--footer .brand__text span { color: var(--brass); }

/* ---------- Nav ---------- */

.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 1.6vw, 1.5rem);
}
.nav__list a {
  display: inline-block;
  padding: 0.5rem 0.25rem;
  color: var(--ink-700);
  font-size: var(--step--1);
  font-weight: 500;
  text-decoration: none;
  position: relative;
}
.nav__list a::after {
  content: "";
  position: absolute;
  inset-inline: 0.25rem;
  bottom: 0.25rem;
  height: 2px;
  background: var(--steel);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.22s var(--ease);
}
.nav__list a:hover::after,
.nav__list a[aria-current="true"]::after { transform: scaleX(1); }
.nav__list a:hover { color: var(--ink); }

.nav__cta {
  padding: 0.6rem 1.1rem !important;
  background: var(--ink);
  color: var(--text-inverse) !important;
  border-radius: 999px;
  white-space: nowrap;
  transition: background 0.2s var(--ease), transform 0.2s var(--ease);
}
.nav__cta::after { display: none; }
.nav__cta:hover { background: var(--steel); transform: translateY(-1px); }

.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.9rem 0.5rem 0.7rem;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
}
.nav-toggle__label { font-size: var(--step--1); font-weight: 500; }
.nav-toggle__bars {
  position: relative;
  width: 1.1rem;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: background 0.2s var(--ease);
}
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.25s var(--ease);
}
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); }

/* ---------- Language switch ---------- */

/* Groups everything that sits on the right of the header: the nav, the
   language switch and the menu button. Under 60rem the nav leaves the flow
   (absolute, relative to the sticky .site-header), so this row then holds
   just the switch and the button. */
.site-header__end {
  display: flex;
  align-items: center;
  gap: clamp(0.45rem, 1.5vw, 1.25rem);
}

/* Two plain links, not a <select> and not a JS toggle. The English pages are
   separate documents under /en/, so the switch has to work before any script
   runs and has to be followable by a crawler. */
.lang-switch__list {
  display: flex;
  align-items: center;
  gap: 0.1rem;
  padding: 0.15rem;
  background: rgb(255 255 255 / 0.55);
  border: 1px solid var(--line);
  border-radius: 999px;
}

.lang-switch__item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.45rem;
  border-radius: 999px;
  color: var(--ink-300);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.lang-switch__item:hover { color: var(--ink); background: var(--steel-pale); }
.lang-switch__item[aria-current="true"] { color: var(--ink); background: var(--steel-pale); }

/* Both flags share a fixed 3:2 box. The crop to that ratio is baked into each
   viewBox in the markup instead of being left to preserveAspectRatio, so the
   bands and the Union Jack keep their real proportions at a known size —
   unlike the old hero SVG, where `slice` cropped differently per viewport. */
.lang-switch__flag {
  width: 1.4rem;
  height: calc(1.4rem / 1.5);
  flex-shrink: 0;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgb(15 32 39 / 0.14);
  filter: saturate(0.5);
  transition: filter 0.2s var(--ease);
}
.lang-switch__item:hover .lang-switch__flag,
.lang-switch__item[aria-current="true"] .lang-switch__flag { filter: none; }

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.9rem 1.6rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: var(--step-0);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s var(--ease), background 0.2s var(--ease),
    border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.btn__icon { width: 1.1em; height: 1.1em; flex-shrink: 0; transition: transform 0.2s var(--ease); }
.btn:hover .btn__icon { transform: translateX(3px); }

.btn--primary {
  background: var(--brass);
  color: var(--ink);
  box-shadow: 0 10px 26px rgb(200 169 106 / 0.3);
}
.btn--primary:hover {
  background: #d9bc7c;
  color: var(--ink);
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgb(200 169 106 / 0.38);
}

.btn--ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--ink);
}
.btn--ghost:hover { border-color: var(--ink); color: var(--ink); transform: translateY(-2px); }
.section--ink .btn--ghost { border-color: var(--line-dark); color: var(--text-inverse); }
.section--ink .btn--ghost:hover { border-color: #9fd9df; color: #fff; background: rgb(255 255 255 / 0.05); }
.hero .btn--ghost { border-color: var(--line-dark); color: var(--text-inverse); }
.hero .btn--ghost:hover { border-color: #9fd9df; color: #fff; background: rgb(255 255 255 / 0.06); }

.btn--block { display: flex; width: 100%; }

/* ---------- Eyebrow ---------- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 var(--space-s);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass);
}
.eyebrow--dark { color: var(--steel); }
.eyebrow__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--brass);
  box-shadow: 0 0 0 4px rgb(200 169 106 / 0.2);
}

/* ---------- Hero ---------- */

/* Hero-Hintergrund: bewusst kein SVG-Motiv mehr.
   Ein SVG mit `preserveAspectRatio="xMidYMid slice"` wird je Seitenverhältnis
   unterschiedlich beschnitten. Beim vorherigen Treppenmotiv lag das sichtbare
   Fenster bei 1440px auf viewBox-x 182..1258, bei 390px aber auf 589..851 —
   die harten Stufenkanten landeten dadurch auf jeder Breite an einer anderen
   Stelle mitten im Text. Das war kein Tuning-Problem, sondern der falsche
   Ansatz: ein Motiv mit Kanten lässt sich darin nicht zum Layout ausrichten.

   Ein wiederholendes Raster kachelt und kann deshalb nicht falsch sitzen —
   egal wie hoch oder breit der Hero wird. Es liest sich als technische
   Zeichnung, was zum "-werk" im Namen passt, und die beiden weichen
   Lichtkegel geben die Tiefe, die vorher die Fläche gab. */
.hero {
  position: relative;
  overflow: hidden;
  background:
    repeating-linear-gradient(to right,
      rgb(159 217 223 / 0.05) 0, rgb(159 217 223 / 0.05) 1px,
      transparent 1px, transparent 88px),
    repeating-linear-gradient(to bottom,
      rgb(159 217 223 / 0.05) 0, rgb(159 217 223 / 0.05) 1px,
      transparent 1px, transparent 88px),
    radial-gradient(60rem 36rem at 82% 10%, rgb(45 141 153 / 0.26), transparent 68%),
    radial-gradient(44rem 26rem at 4% 96%, rgb(200 169 106 / 0.12), transparent 70%),
    linear-gradient(170deg, #0b1a20 0%, var(--ink) 55%, #123039 100%);
  color: var(--text-inverse);
  padding-block: clamp(3.5rem, 2rem + 9vw, 8rem) clamp(3rem, 2rem + 6vw, 6rem);
}

/* Kein max-width auf .hero__inner: das Element trägt auch .shell, und da beide
   Selektoren gleich stark sind, würde das spätere max-width (54rem) gewinnen.
   Zusammen mit dem `margin-inline: auto` aus .shell zentriert das den ganzen
   Hero-Block und schiebt ihn 144px nach rechts — der Hero stand damit nicht
   mehr auf derselben linken Kante wie Header, Abschnitte und Footer.
   Die Zeilenlänge wird deshalb an den Textelementen begrenzt, nicht am Block. */

.hero__title {
  max-width: 54rem;
  font-size: var(--step-4);
  color: #fff;
  margin-bottom: var(--space-m);
}

.hero__lead {
  max-width: 40rem;
  font-size: var(--step-1);
  color: var(--text-inverse-muted);
  text-wrap: pretty;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  margin-top: var(--space-l);
}

.hero__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--space-m);
  max-width: 54rem;
  margin: var(--space-xl) 0 0;
  padding-top: var(--space-l);
  border-top: 1px solid var(--line-dark);
}
.fact dt {
  font-size: var(--step--1);
  color: var(--text-inverse-muted);
  letter-spacing: 0.02em;
}
.fact dd {
  margin: 0.2rem 0 0;
  font-family: var(--font-display);
  font-size: var(--step-1);
  color: #fff;
}
.fact__num { font-size: 1.5em; font-weight: 700; color: var(--brass); }

/* ---------- Ticks ---------- */

.ticks { margin-top: var(--space-m); display: grid; gap: 0.7rem; }
.ticks li {
  position: relative;
  padding-left: 1.9rem;
  color: var(--text-muted);
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 1.1rem;
  height: 0.6rem;
  border-left: 2.5px solid var(--steel);
  border-bottom: 2.5px solid var(--steel);
  transform: rotate(-45deg);
  border-radius: 1px;
}

/* ---------- Cards ---------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--space-m);
}

.card {
  padding: var(--space-l) var(--space-m) var(--space-m);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease),
    border-color 0.25s var(--ease);
}
.card:hover {
  transform: translateY(-4px);
  border-color: var(--steel-bright);
  box-shadow: var(--shadow-md);
}
.card__icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: var(--space-s);
  border-radius: 12px;
  background: var(--steel-pale);
  color: var(--steel);
}
.card__icon svg { width: 1.55rem; height: 1.55rem; }
.card__title { font-size: var(--step-2); margin-bottom: 0.5rem; }
.card > p { color: var(--text-muted); }
.card__list {
  margin-top: var(--space-s);
  padding-top: var(--space-s);
  border-top: 1px solid var(--line);
  display: grid;
  gap: 0.45rem;
  font-size: var(--step--1);
  color: var(--text-muted);
}
.card__list li { position: relative; padding-left: 1.1rem; }
.card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--brass);
}

/* ---------- Segments ---------- */

.segments {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.segment {
  padding: var(--space-l) var(--space-m);
  background: var(--surface);
  transition: background 0.25s var(--ease);
}
.segment:hover { background: var(--brass-pale); }
.segment__num {
  display: block;
  margin-bottom: var(--space-xs);
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
  color: var(--brass);
}
.segment h3 { font-size: var(--step-1); margin-bottom: 0.45rem; }
.segment p { color: var(--text-muted); font-size: var(--step--1); }

/* ---------- Tiers ---------- */

.tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr));
  gap: var(--space-m);
  /* stretch, not start: alle Karten einer Reihe werden gleich hoch, damit sie
     unten bündig abschließen. Der Überschuss landet dank `flex: 1` auf
     .tier__list als Leerraum über dem Button. */
  align-items: stretch;
}

.tier {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  padding: var(--space-l) var(--space-m) var(--space-m);
  background: rgb(255 255 255 / 0.04);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-lg);
  transition: transform 0.25s var(--ease), border-color 0.25s var(--ease);
}
.tier:hover { transform: translateY(-4px); border-color: rgb(159 217 223 / 0.5); }

.tier--featured {
  background: rgb(255 255 255 / 0.075);
  border-color: var(--brass);
  box-shadow: 0 24px 60px rgb(0 0 0 / 0.3);
}

.tier__badge {
  position: absolute;
  top: -0.85rem;
  left: var(--space-m);
  margin: 0;
  padding: 0.3rem 0.8rem;
  background: var(--brass);
  color: var(--ink);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tier__name { font-size: var(--step-2); }
.tier__for {
  margin: 0.3rem 0 0;
  font-size: var(--step--1);
  color: var(--text-inverse-muted);
}
.tier__price {
  margin: var(--space-s) 0 0;
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 700;
  color: #fff;
  line-height: 1;
}
.tier__price-hint {
  font-family: var(--font-sans);
  font-size: var(--step-0);
  font-weight: 500;
  color: var(--text-inverse-muted);
}
/* USt-Hinweis und Bruttobetrag stehen unter der großen Zahl, nicht daneben:
   bei Nettopreisen gehört der Hinweis an den Preis, muss ihn aber nicht
   optisch verdrängen. */
.tier__price-vat,
.tier__price-gross {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--text-inverse-muted);
}
.tier__time {
  margin: 0.5rem 0 0;
  font-size: var(--step--1);
  color: var(--brass);
}

.tier__list {
  display: grid;
  gap: 0.55rem;
  padding-top: var(--space-m);
  border-top: 1px solid var(--line-dark);
  font-size: var(--step--1);
  color: var(--text-inverse-muted);
  flex: 1;
  /* Ohne das würde `align-content: normal` die Zeilen auf die volle Höhe
     verteilen und die Stichpunkte auseinanderziehen. So bleiben sie oben
     zusammen und der Leerraum sammelt sich über dem Button. */
  align-content: start;
}
.tier__list li { position: relative; padding-left: 1.6rem; }
.tier__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 0.85rem;
  height: 0.45rem;
  border-left: 2px solid var(--brass);
  border-bottom: 2px solid var(--brass);
  transform: rotate(-45deg);
}
.tier__list strong { color: #fff; }

.note {
  max-width: 48rem;
  margin-top: var(--space-l);
  font-size: var(--step--1);
  color: var(--text-muted);
}
.section--ink .note { color: var(--text-inverse-muted); }

/* ---------- Plans table ---------- */

.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
  -webkit-overflow-scrolling: touch;
}
.table-scroll:focus-visible {
  outline: 3px solid var(--steel-bright);
  outline-offset: 3px;
}

/* Hinweis auf die seitlich scrollbare Tabelle. Ohne ihn wirken die zwei
   sichtbaren Spalten wie die ganze Tabelle, Aktiv und Partner bleiben
   unentdeckt.
   Breakpoint: .shell hat 4vw Innenabstand pro Seite, der Container ist also
   0,92 * Viewport breit. Bei 38rem (608px) Tabellenbreite beginnt der Überlauf
   rechnerisch bei 661px Viewport; 42rem (672px) blendet den Hinweis also ein
   paar Pixel zu früh ein, was deutlich besser ist als zu spät. */
.table-hint {
  display: none;
  margin: 0 0 var(--space-xs);
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--steel);
}
.table-hint__arrow { font-size: 1.1em; }

@media (max-width: 42rem) {
  .table-hint {
    display: flex;
    align-items: center;
    gap: 0.4rem;
  }
}

.plans { min-width: 38rem; font-size: var(--step--1); }
.plans th,
.plans td {
  padding: 0.85rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--line);
}
.plans thead th {
  background: var(--ink);
  color: var(--text-inverse);
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 600;
  border-bottom: none;
}
/* Die Datenzellen sind zentriert (siehe .plans tbody td), also muss ihre
   Beschriftung es auch sein — sonst steht jedes Label rund 60 px neben seiner
   eigenen Spalte. Nur die Leistungsspalte bleibt linksbündig. */
.plans thead th:not(:first-child) { text-align: center; }

.plans thead th:nth-child(3) { background: var(--steel); }
.plans tbody th {
  font-weight: 500;
  color: var(--text);
  width: 40%;
}
.plans tbody td { color: var(--text-muted); text-align: center; }
.plans tbody tr:last-child th,
.plans tbody tr:last-child td { border-bottom: none; }
.plans tbody tr:hover { background: var(--brass-pale); }

.plans__price-row td {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
  color: var(--ink);
}
.plans__price-row .tier__price-hint,
.plans__price-row .tier__price-vat,
.plans__price-row .tier__price-gross {
  color: var(--text-muted);
  font-size: var(--step--1);
  font-weight: 500;
}

.plans td[data-yes]::before {
  content: "";
  display: inline-block;
  width: 0.9rem;
  height: 0.5rem;
  border-left: 2.5px solid var(--steel);
  border-bottom: 2.5px solid var(--steel);
  transform: rotate(-45deg) translateY(-2px);
}
.plans td[data-no]::before {
  content: "–";
  color: var(--ink-300);
}

/* ---------- Steps ---------- */

.steps {
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--space-m);
}
.step {
  padding: var(--space-m);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  border-top: 3px solid var(--steel);
}
.step h3 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--step-1);
  margin-bottom: 0.5rem;
}
.step__num {
  display: grid;
  place-items: center;
  width: 1.8rem;
  height: 1.8rem;
  flex-shrink: 0;
  background: var(--steel-pale);
  color: var(--steel);
  border-radius: 50%;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 700;
}
.step p { color: var(--text-muted); font-size: var(--step--1); }

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

.contact {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: start;
}

.contact__direct {
  display: grid;
  gap: var(--space-s);
  margin-top: var(--space-l);
  padding-top: var(--space-l);
  border-top: 1px solid var(--line-dark);
}
.contact__direct li { display: grid; gap: 0.15rem; }
.contact__label {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brass);
}
.contact__direct a { font-size: var(--step-1); text-decoration: none; }
.contact__direct a:hover { text-decoration: underline; }
.contact__direct span:not(.contact__label) { color: var(--text-inverse-muted); font-size: var(--step--1); }

/* ---------- Form ---------- */

.form {
  display: grid;
  gap: var(--space-s);
  padding: var(--space-l) var(--space-m);
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  color: var(--text);
}

.form__row { display: grid; grid-template-columns: 1fr; gap: var(--space-s); }

.field { display: grid; gap: 0.35rem; }
.field > label {
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink-700);
}
.field > label span { color: var(--steel); }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.75rem 0.9rem;
  font: inherit;
  font-size: var(--step-0);
  color: var(--text);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s var(--ease);
}
.field textarea { resize: vertical; min-height: 7rem; }
.field select { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%2335505c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 1rem;
  padding-right: 2.4rem;
}

.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--ink-300); }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  background: var(--surface);
  border-color: var(--steel);
  box-shadow: 0 0 0 4px rgb(31 111 122 / 0.14);
}

.field--check {
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 0.7rem;
  margin-top: var(--space-2xs);
}
.field--check input {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.25rem;
  accent-color: var(--steel);
  cursor: pointer;
}
.field--check label {
  font-size: var(--step--1);
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-muted);
}
.field--check .field__error { grid-column: 1 / -1; }

.field__error {
  margin: 0;
  font-size: var(--step--1);
  font-weight: 500;
  color: #b4231f;
}
.field.is-invalid input,
.field.is-invalid select,
.field.is-invalid textarea { border-color: #b4231f; background: #fdf4f4; }

.form__trap {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.form__status {
  margin: 0;
  padding: 0.85rem 1rem;
  border-radius: 10px;
  font-size: var(--step--1);
  font-weight: 500;
}
.form__status.is-ok { background: var(--steel-pale); color: #10484f; }
.form__status.is-error { background: #fdf0ef; color: #8f1c19; }

.form__legal { font-size: 0.8rem; color: var(--text-muted); margin: 0; }

button[data-submit][aria-busy="true"] { opacity: 0.7; pointer-events: none; }

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

.site-footer {
  background: var(--ink);
  color: var(--text-inverse-muted);
  padding-top: var(--space-xl);
  font-size: var(--step--1);
}
.site-footer__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-l);
  padding-bottom: var(--space-l);
}
.site-footer__brand .brand { margin-bottom: var(--space-s); }
.site-footer__brand p { max-width: 24rem; }

.site-footer__nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--space-m);
}
.site-footer__nav h2 {
  margin-bottom: 0.7rem;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass);
}
.site-footer__nav ul { display: grid; gap: 0.4rem; }
.site-footer__nav a { color: var(--text-inverse-muted); text-decoration: none; }
.site-footer__nav a:hover { color: #fff; text-decoration: underline; }

.site-footer__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-xs);
  padding-block: var(--space-s) var(--space-m);
  border-top: 1px solid var(--line-dark);
  font-size: 0.8rem;
}
.site-footer__base p { margin: 0; }

/* ---------- Legal pages ---------- */

.legal { padding-block: var(--space-xl) var(--space-2xl); }
.legal__inner { max-width: 48rem; }
.legal h1 { font-size: var(--step-3); margin-bottom: var(--space-s); }
.legal h2 {
  font-size: var(--step-2);
  margin-top: var(--space-l);
  margin-bottom: var(--space-xs);
  padding-top: var(--space-s);
  border-top: 1px solid var(--line);
}
.legal h3 { font-size: var(--step-1); margin-top: var(--space-m); margin-bottom: 0.3rem; }
.legal p,
.legal li { color: var(--text-muted); }
.legal ul { display: grid; gap: 0.4rem; margin-top: var(--space-xs); }
.legal ul li { position: relative; padding-left: 1.1rem; }
.legal ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 50%;
  background: var(--brass);
}
.legal__meta { font-size: var(--step--1); color: var(--ink-300); }
.legal address { font-style: normal; color: var(--text-muted); }
.legal .btn { margin-top: var(--space-l); }

/* ---------- Interne Seite (leistungen.html) ---------- */

.brand-group {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
}

.badge-intern {
  margin: 0;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: #b4231f;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.intern-banner {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  padding: var(--space-s) var(--space-m);
  background: #fdf0ef;
  border: 1px solid #e3b3b1;
  border-left: 4px solid #b4231f;
  border-radius: var(--radius);
  color: #7d1815;
  font-size: var(--step--1);
  line-height: 1.6;
}
.intern-banner strong { color: #5f1210; }
.intern-banner--block { display: block; margin-top: var(--space-l); max-width: 52rem; }
.intern-banner__icon { flex-shrink: 0; color: #b4231f; }
.intern-banner__icon svg { width: 1.4rem; height: 1.4rem; }
.intern-banner code,
.intern-lead code {
  padding: 0.1em 0.35em;
  background: rgb(15 32 39 / 0.07);
  border-radius: 4px;
  font-size: 0.92em;
}

.intern-title {
  margin-top: var(--space-l);
  font-size: var(--step-4);
}
.intern-lead {
  margin-top: var(--space-s);
  max-width: 52rem;
  font-size: var(--step-1);
  color: var(--text-muted);
  text-wrap: pretty;
}

/* Begründung je Stufe — nur intern, deshalb abgesetzt und kleiner. */
.tier__internal {
  margin: 0;
  padding-top: var(--space-s);
  border-top: 1px dashed var(--line-dark);
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--text-inverse-muted);
  font-style: italic;
}

.intern-notes {
  margin-top: var(--space-l);
  padding: var(--space-m);
  background: var(--brass-pale);
  border-radius: var(--radius-lg);
  max-width: 52rem;
}
.intern-notes h3 {
  margin-bottom: var(--space-xs);
  font-size: var(--step-1);
}

.intern-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--space-m);
}
.intern-card {
  padding: var(--space-m);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  border-top: 3px solid var(--steel);
}
.intern-card h3 {
  margin-bottom: var(--space-xs);
  font-size: var(--step-1);
}
.intern-card .ticks li { font-size: var(--step--1); }

/* Zusatzleistungen. Nur zwei Spalten, passt damit auch auf dem Telefon ohne
   seitliches Scrollen — anders als die vierspaltige Pflegetabelle. */
.addons {
  width: 100%;
  max-width: 44rem;
  font-size: var(--step--1);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.addons thead th {
  padding: 0.8rem 1rem;
  background: var(--ink);
  color: var(--text-inverse);
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 600;
  text-align: left;
}
.addons thead th:last-child { text-align: right; }

.addons__group th {
  padding: 0.9rem 1rem 0.4rem;
  background: var(--brass-pale);
  color: var(--ink-700);
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: left;
  border-top: 1px solid var(--line);
}

.addons tbody th,
.addons tbody td {
  padding: 0.7rem 1rem;
  border-top: 1px solid var(--line);
  vertical-align: baseline;
}
.addons tbody th {
  font-weight: 500;
  color: var(--text);
  text-align: left;
}
.addons tbody td {
  text-align: right;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 700;
  color: var(--ink);
}
.addons tbody tr:not(.addons__group):hover { background: var(--paper); }

.addons__note {
  display: block;
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--text-muted);
}

/* Der Zusatz "/ Stunde" erbt sonst die Farbe für dunkle Hintergründe. */
.addons .tier__price-hint,
.addons .tier__price-vat,
.addons .tier__price-gross,
.intern-card .tier__price-hint,
.intern-card .tier__price-vat,
.intern-card .tier__price-gross {
  color: var(--text-muted);
  font-size: 0.8rem;
}

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

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Reveal on scroll.
   Driven entirely by CSS scroll-driven animations, so there is no JavaScript
   in the path to content being visible. Browsers without `animation-timeline`
   simply never apply the rule and show everything immediately — the failure
   mode is "no animation", never "no content". Elements already on screen at
   load sit at the end of their range, so there is no flash either. */

@keyframes reveal-in {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    [data-reveal] {
      animation: reveal-in linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 60%;
    }
  }
}

/* ---------- Responsive ---------- */

@media (max-width: 60rem) {
  .nav-toggle { display: inline-flex; }

  .nav {
    position: absolute;
    inset-inline: 0;
    top: 100%;
    display: grid;
    grid-template-rows: 0fr;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    transition: grid-template-rows 0.3s var(--ease);
  }
  .nav.is-open { grid-template-rows: 1fr; }

  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-xs) clamp(1.15rem, 4vw, 2.5rem) var(--space-m);
    min-height: 0;
  }
  .nav__list li { border-bottom: 1px solid var(--line); }
  .nav__list li:last-child { border-bottom: none; padding-top: var(--space-s); }
  .nav__list a { padding: 0.9rem 0; font-size: var(--step-0); }
  .nav__list a::after { display: none; }
  .nav__cta { text-align: center; }
}

/* The DE/EN words are a reading aid for the flags, not the control itself.
   Once the header carries the brand, the switch and the menu button in a
   single row, they are the first thing that can go. */
@media (max-width: 48rem) {
  .lang-switch__code { display: none; }
  .lang-switch__item { padding: 0.3rem; }
}

/* At 320 px those three still do not fit while the button spells out "Menü".
   The word is hidden the accessible way, not with display:none, so the button
   keeps its name for a screen reader. */
@media (max-width: 30rem) {
  .nav-toggle { gap: 0; padding: 0.55rem 0.7rem; }
  .nav-toggle__label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}

@media (min-width: 40rem) {
  .form__row { grid-template-columns: 1fr 1fr; }
  .form { padding: var(--space-l); }
}

@media (min-width: 56rem) {
  .split { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: start; }
  .split__lead { position: sticky; top: calc(var(--header-h) + 2rem); }
  .contact { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
  .site-footer__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
}

@media (min-width: 64rem) {
  /* Vier Leistungen: 2x2 auf dem Laptop, eine Reihe ab 80rem. */
  .cards { grid-template-columns: repeat(2, 1fr); }
  .segments { grid-template-columns: repeat(4, 1fr); }
  .tiers { grid-template-columns: repeat(3, 1fr); }
  .steps { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 80rem) {
  .cards { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Motion & contrast preferences ---------- */

@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;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; animation: none; }
}

@media (prefers-contrast: more) {
  :root {
    --text-muted: var(--ink-700);
    --text-inverse-muted: #e8eeee;
    --line: #b9b1a4;
    --line-dark: rgb(255 255 255 / 0.4);
  }
}

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

@media print {
  .site-header,
  .nav-toggle,
  .form,
  .site-footer__nav,
  .skip-link { display: none !important; }

  body { background: #fff; color: #000; font-size: 11pt; }
  .hero,
  .section--ink,
  .site-footer { background: #fff !important; color: #000 !important; }
  .hero__title,
  .section--ink h2,
  .section--ink h3,
  .tier__price { color: #000 !important; }
  .section { padding-block: 1.5rem; }
  .card,
  .tier,
  .step { border: 1px solid #999; break-inside: avoid; }
  a { color: #000; text-decoration: underline; }
}