/* ==========================================================================
   Roemhold Digital — Gestaltungswelt "Werkstatt"
   Warmer Sand trägt die Fläche, tiefes Laubgrün trägt Akzent und Tiefe, der
   Nebentext läuft auf grünstichigem Warmgrau statt auf blauem Stahl. Der
   Besucher landet im Hellen: Diese Seite wird tagsüber in Werkstätten,
   Praxen und Büros geöffnet, nicht abends im abgedunkelten Raum. Dunkel ist
   die Ausnahme und steht am Ende, nicht am Anfang.
   ========================================================================== */

/* Self-gehostet (kein Google-Fonts-Request) — Variable Font, ein Schnitt für alle Stärken. */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/archivo-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/archivo-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* ---- Rampen: hier stehen die Farben, sonst nirgends ------------------- */

  /* Forst — Basis ist 800. Die Mitteltöne 500 und 600 gibt es bewusst nicht:
     Grün zwischen 40 % und 60 % Helligkeit wird stumpf und billig. Die Lücke
     ist eine Entscheidung, kein Versehen. */
  --forst-50:  #F1F8F6;
  --forst-100: #DDEEE2;
  --forst-200: #BFDEC7;
  --forst-300: #8DC399;
  --forst-400: #5FAB6D;
  --forst-700: #26542B;
  --forst-800: #1C4020;
  --forst-900: #112814;
  --forst-950: #0A190C;

  /* Sand — warme Neutrale. Ein Blaustich im Nebentext war der halbe Grund,
     warum die Seite kühl wirkte; diese Töne kippen leicht ins Grüne. */
  --sand-50:   #FBF8F2;
  --sand-100:  #F5F1E8;
  --sand-200:  #EDE7DA;
  --sand-300:  #E0D8C8;

  /* ---- Rollen: hier steht, was wofür gilt ------------------------------- */

  --surface:    var(--sand-100);   /* die tragende Fläche */
  --raised:     var(--sand-50);    /* Karten, erhöhte Flächen */
  --sunk:       var(--sand-200);   /* ruhige Füllung */

  --dark:       var(--forst-900);  /* Überschriften, dunkle Bänder */
  --dark-press: var(--forst-950);  /* gedrückt */
  --dark-deep:  var(--forst-950);  /* der Fuß */

  /* Der Akzent hat zwei Stufen, weil ein tiefes Grün auf dunklem Grund
     verschwindet und ein helles auf Sand flimmert. */
  --accent:             var(--forst-800);   /* auf heller Fläche, 10,3:1 */
  --accent-press:       var(--forst-900);   /* gedrückt */
  --accent-light:       var(--forst-400);   /* auf dunkler Fläche, 5,6:1 */
  --accent-light-press: var(--forst-300);   /* gedrückt auf dunkel */
  --accent-tint:        var(--forst-100);

  /* Schrift auf hellem Grund */
  --ink:       #1F241E;
  --ink-soft:  #5A6157;
  /* Die leise Stufe muss dunkel genug für 4,5:1 bleiben — darunter fallen
     Preiszusätze und Fußnoten unter die Lesbarkeitsschwelle. */
  --ink-faint: #666D61;

  /* Schrift auf dunklem Grund */
  --on-dark:       #F4F7F2;
  --on-dark-soft:  #B3BFB2;
  --on-dark-faint: #93A093;

  /* Linien: haardünn, das ist das halbe Register */
  --line:      var(--sand-300);
  --line-soft: #EBE5D9;

  /* Typografie — die Wirkung kommt aus Größe und Laufweite, nicht aus einer
     zweiten Schriftfamilie. */
  --font: "Archivo", "Segoe UI", system-ui, -apple-system, sans-serif;
  --fs-hero: clamp(2.25rem, 5.6vw, 4.4rem);
  --fs-h2:   clamp(1.85rem, 3.4vw, 2.6rem);
  --fs-h3:   1.24rem;
  --fs-body: 1.05rem;
  --fs-small: 0.92rem;

  /* Form */
  --radius:      8px;    /* Buttons, Cards, Inputs */
  --radius-big:  14px;   /* große Container */
  --ease:        cubic-bezier(0.16, 1, 0.3, 1);
  /* Schatten tragen denselben Grünstich wie alles andere, sonst legt sich
     ein grauer Schleier über die warmen Flächen. */
  --shadow-soft: 0 1px 2px rgba(17, 40, 20, 0.04), 0 4px 12px rgba(17, 40, 20, 0.05), 0 14px 40px rgba(17, 40, 20, 0.07);
  --shadow-lift: 0 2px 4px rgba(17, 40, 20, 0.05), 0 8px 24px rgba(17, 40, 20, 0.07), 0 28px 70px rgba(17, 40, 20, 0.10);

  --header-h: 4.5rem;
}

/* --- Reset & Basis ------------------------------------------------------ */

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

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

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.68;
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Echte Ziffern statt Versalziffern, gleiche Breite in Preistabellen */
  font-feature-settings: "cv05" 1, "tnum" 0;
}

h1, h2, h3, h4 {
  color: var(--dark);
  line-height: 1.18;
  letter-spacing: -0.015em;
  margin: 0 0 1rem;
  text-wrap: balance;
}

h1 { font-size: var(--fs-hero); font-weight: 640; line-height: 1.05; letter-spacing: -0.032em; }
h2 { font-size: var(--fs-h2); font-weight: 620; line-height: 1.1; letter-spacing: -0.026em; }
h3 { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.018em; }

/* Der Absatzabstand läuft in em statt rem: Er wächst mit der Schriftgröße
   mit, sodass zwei Lead-Absätze genauso viel Luft zueinander halten wie zwei
   Fußnotenzeilen — relativ zur eigenen Zeile. 1 rem pauschal war für die
   großen Absätze der Unterseiten sichtbar zu knapp. */
p { margin: 0 0 1.25em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--dark); text-decoration-color: color-mix(in srgb, var(--accent) 55%, transparent); text-underline-offset: 3px; }
a:hover { color: var(--accent-press); }

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

/* Auch ol: Die Schrittfolgen (.steps) und das AGB-Inhaltsverzeichnis sind
   geordnete Listen. Ohne den Reset tragen sie 40 px Browser-Einzug und einen
   Außenabstand, den keine andere Liste der Seite hat — die Nummern standen
   dadurch sichtbar rechts von der Überschrift darüber. */
ul, ol { margin: 0; padding: 0; }

::selection { background: var(--accent-tint); color: var(--dark); }

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

.container {
  max-width: 71.25rem;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2rem);
}

.skip-link {
  position: absolute;
  left: 1rem; top: -4rem;
  z-index: 200;
  background: var(--dark);
  color: #fff;
  padding: 0.6rem 1rem;
  border-radius: var(--radius);
  transition: top 0.2s;
}
.skip-link:focus { top: 1rem; color: #fff; }

/* Für Screenreader vorhanden, optisch nicht. Für Tabellen-Beschriftungen und
   Statusmeldungen, die auf dem Bildschirm doppelt wären. */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- Typo-Bausteine ----------------------------------------------------- */

.kicker {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}

.lead {
  font-size: 1.16rem;
  line-height: 1.62;
  color: var(--ink-soft);
  max-width: 38em;
}

.section {
  padding-block: clamp(5rem, 10vw, 8.5rem);
}

.section--alt { background: var(--raised); border-block: 1px solid var(--line-soft); }

.section__head { max-width: 42em; margin-bottom: clamp(2.75rem, 6vw, 4.5rem); }

.section__head h2 { margin-bottom: 1.15rem; }

/* Manche Abschnitte bestehen nur aus dem Kopf (etwa "Warum es einen
   Unterschied macht" auf /fotografie). Dort addierte sich der Kopfabstand auf
   das Sektions-Padding: unten 200 px Luft, oben 128 px. Ohne folgenden Inhalt
   entfällt der Abstand, und der Abschnitt sitzt wieder mittig in seiner
   Fläche. */
.section__head:last-child { margin-bottom: 0; }

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

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.8rem 1.5rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s, border-color 0.18s, color 0.18s, box-shadow 0.18s;
}

.btn svg { width: 1.1em; height: 1.1em; flex: none; }

/* Der führende Knopf trägt jetzt den Akzent statt Grünschwarz. Auf Sand ist
   das der wärmste Punkt der Seite und mit 11,6:1 trotzdem bestens lesbar. */
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-press); color: #fff; }

.btn--ghost { border-color: color-mix(in srgb, var(--line) 45%, var(--ink-faint)); color: var(--dark); background: transparent; }
.btn--ghost:hover { border-color: var(--dark); color: var(--dark); }

/* Der Akzent-Knopf steht ausschließlich auf Graphit, deshalb die helle
   Stufe mit dunkler Schrift: Ein tiefgrüner Knopf auf dunklem Grund hätte
   fast keine Kante. */
.btn--accent { background: var(--accent-light); color: var(--dark); }
.btn--accent:hover { background: var(--accent-light-press); color: var(--dark); }

.btn--light { background: var(--surface); color: var(--dark); }
.btn--light:hover { background: #fff; color: var(--dark); }

.btn--small { padding: 0.55rem 1.05rem; font-size: 0.94rem; }

/* Kopfbereich-CTA erscheint auf jeder Seite: eigene Höhe statt .btn--small
   pauschal zu ändern, damit andere Stellen (z. B. designs.php) unberührt
   bleiben. Erfüllt die 44px-Mindestgröße für Tipp-Ziele. */
.site-header__actions .btn { min-height: 2.75rem; }

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

/* Oben liegt der Kopf ohne eigene Fläche im Hero: keine Farbe, keine Kante,
   kein Schatten. Zwei gestapelte Flächen am Seitenanfang lesen sich sonst wie
   ein Deckel. Erst beim Scrollen kondensiert er zu einer Leiste — sichtbar
   genau dann, wenn Inhalt darunter durchliefe. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 0.28s var(--ease), border-color 0.28s, box-shadow 0.28s, backdrop-filter 0.28s;
}

.site-header.is-scrolled {
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom-color: var(--line);
  box-shadow: 0 4px 24px rgba(17, 40, 20, 0.06);
}

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: var(--header-h);
}

.brand {
  font-size: 1.22rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--dark);
  text-decoration: none;
  white-space: nowrap;
}
.brand:hover { color: var(--dark); }
.brand__light { font-weight: 400; }
.brand__dot { color: var(--accent); }

.site-nav__list {
  display: flex;
  gap: 0.25rem;
  list-style: none;
}

.site-nav__list a {
  display: block;
  padding: 0.5rem 0.85rem;
  border-radius: 6px;
  font-size: 0.97rem;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 0.15s, background-color 0.15s;
}

.site-nav__list a:hover { color: var(--dark); background: var(--sunk); }

.site-nav__list a[aria-current="page"] { color: var(--dark); font-weight: 600; }

.site-header__actions { display: flex; align-items: center; gap: 0.75rem; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--raised);
  cursor: pointer;
}

.nav-toggle__line {
  display: block;
  width: 1.15rem;
  height: 2px;
  margin-inline: auto;
  background: var(--dark);
  border-radius: 1px;
  transition: transform 0.25s, translate 0.25s;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__line:first-child { transform: rotate(45deg); translate: 0 4px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__line:last-child { transform: rotate(-45deg); translate: 0 -4px; }

/* Seit der zweiten IT-Seite stehen sieben Einträge in der Leiste. Sie brauchen
   zusammen mit Wortmarke und Kontaktknopf rund 1.035 px; darunter bricht die
   Liste in eine zweite Zeile und der Kopf wird doppelt so hoch. Der Menüknopf
   übernimmt deshalb früher als die übrigen Umbrüche der Seite. */
@media (max-width: 70rem) {
  .nav-toggle { display: flex; }

  .site-nav {
    position: absolute;
    top: var(--header-h);
    left: 0;
    right: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    padding: 0.75rem clamp(1.25rem, 4vw, 2rem) 1.25rem;
    display: none;
  }

  body.nav-open .site-nav { display: block; }

  .site-nav__list { flex-direction: column; gap: 0.1rem; }
  .site-nav__list a { padding: 0.7rem 0.85rem; font-size: 1.05rem; }
}

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

/* Heller Auftakt. Der Besucher landet in Sand, nicht im Dunkeln — die Seite
   wird tagsüber geöffnet, und Vertrauen entsteht hier aus Offenheit, nicht
   aus Bühnenlicht. Der Hero zieht sich unter den Kopf, damit dieser ohne
   eigene Fläche darin liegen kann. Die Bildebene nimmt ein Foto auf, sobald
   eines abgelegt wird; fehlt es, trägt der Sand allein. */

.hero {
  position: relative;
  isolation: isolate;
  margin-top: calc(var(--header-h) * -1);
  background:
    radial-gradient(120% 100% at 88% 0%, rgba(28, 64, 32, 0.07), transparent 58%),
    linear-gradient(178deg, var(--raised), var(--surface));
  color: var(--ink-soft);
  padding-block: calc(var(--header-h) + clamp(3.5rem, 8vw, 6.5rem)) clamp(4.5rem, 9vw, 7.5rem);
  overflow: hidden;
}

/* Bildebene: erwartet assets/img/hero.jpg. Fehlt die Datei, bleibt sie leer. */
.hero__photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: url("../img/hero.jpg");
  background-size: cover;
  background-position: center 38%;
}

/* Schleier: lässt das Bild nach rechts stehen und nach links in den Sand
   auslaufen, damit die Zeile immer auf ruhigem Grund sitzt. Hell statt
   dunkel — das Foto wird aufgehellt, nicht abgedunkelt. */
.hero__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(96deg,
    var(--surface) 26%,
    color-mix(in srgb, var(--surface) 86%, transparent) 52%,
    color-mix(in srgb, var(--surface) 42%, transparent) 100%);
}

.hero__inner { position: relative; max-width: 46em; }

.hero .kicker { color: var(--accent); }

.hero h1 { color: var(--dark); margin-bottom: 1.5rem; }

.hero .lead { color: var(--ink-soft); margin-bottom: 2.5rem; max-width: 34em; }

.hero__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-bottom: 3rem; }

/* Der zweite Knopf steht auf einer Fläche, nicht nur auf einer Linie: Ein
   reiner Umriss neben einem vollen Knopf wirkt auf Sand schnell wie ein
   deaktivierter Knopf. */
.hero .btn--ghost { background: var(--raised); border-color: var(--line); color: var(--dark); }
.hero .btn--ghost:hover { background: #fff; border-color: var(--accent); color: var(--accent); }

.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2.25rem;
  list-style: none;
  font-size: var(--fs-small);
  color: var(--ink-soft);
}

.hero__facts li { display: flex; align-items: center; gap: 0.55rem; }

.hero__facts svg { width: 1rem; height: 1rem; color: var(--accent); flex: none; }

/* Rotierendes Branchen-Wort in der Hero-Headline */

.swap { display: inline-grid; color: var(--accent); }

.swap__word {
  grid-area: 1 / 1;
  white-space: nowrap;
  opacity: 0;
  translate: 0 0.3em;
  transition: opacity 0.4s ease, translate 0.4s ease;
}

.swap__word.is-current { opacity: 1; translate: 0 0; }

/* Auf schmalen Geräten stößt das längste Branchenwort sonst an die Kante.
   Nur das wechselnde Wort schrumpft, die feste Zeile bleibt groß. */
@media (max-width: 30rem) {
  .swap { font-size: 0.88em; }
}

/* Solange das ausgeklappte Menü offen steht, braucht der Kopf doch eine
   Fläche — sonst läuft der Seiteninhalt sichtbar durch die Leiste. */
body.nav-open .site-header {
  background: var(--surface);
  border-bottom-color: var(--line);
}


/* --- Problem-Sektion ------------------------------------------------------ */

.problem__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

.problem__points {
  list-style: none;
  display: grid;
  gap: 1rem;
  margin-top: 0.5rem;
}

.problem__points li {
  display: flex;
  gap: 0.9rem;
  padding: 1.1rem 1.25rem;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.problem__points svg { width: 1.25rem; height: 1.25rem; color: var(--accent); flex: none; margin-top: 0.2rem; }

.problem__points strong { display: block; color: var(--dark); font-weight: 600; margin-bottom: 0.15rem; }

.problem__points p { font-size: 0.97rem; color: var(--ink-soft); margin: 0; }

@media (max-width: 56rem) {
  .problem__grid { grid-template-columns: 1fr; }
}

/* --- Leistungen ----------------------------------------------------------- */

.cards-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 1.75rem);
}

@media (max-width: 56rem) {
  .cards-3 { grid-template-columns: 1fr; }
}

.card {
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-big);
  transition: box-shadow 0.25s, border-color 0.25s, translate 0.25s;
}

.card:hover { box-shadow: var(--shadow-soft); border-color: color-mix(in srgb, var(--line) 40%, var(--accent)); translate: 0 -3px; }

.card__icon {
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  border-radius: var(--radius);
  background: var(--accent-tint);
  color: var(--accent-press);
  margin-bottom: 1.35rem;
}

.card__icon svg { width: 1.4rem; height: 1.4rem; }

.card p { color: var(--ink-soft); font-size: 0.99rem; }

.card__link {
  margin-top: auto;
  padding-top: 1.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 600;
  font-size: 0.97rem;
  text-decoration: none;
}

.card__link svg { width: 1rem; height: 1rem; transition: translate 0.2s; }
.card__link:hover svg { translate: 3px 0; }

/* --- Referenzkunden -------------------------------------------------------
   Karte je Projekt, auf Basis von .card. Bleibt leer und unsichtbar, solange
   includes/data/referenzen.php kein Array liefert — siehe referenz_karten_html()
   in includes/daten.php. */
.referenz-card__photo {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--sunk);
  margin-bottom: 1.1rem;
}

.referenz-card__photo img { width: 100%; height: 100%; object-fit: cover; }

.referenz-card__zitat { font-size: 1rem; line-height: 1.55; color: var(--ink); flex: 1; }

.referenz-card__person { margin: 0; font-weight: 600; color: var(--dark); font-size: 0.94rem; }

.referenz-card__betrieb { margin: 0.15rem 0 0; font-size: 0.92rem; color: var(--ink-soft); }

.referenz-card__vorher { margin: 0.6rem 0 0; font-size: 0.88rem; color: var(--ink-faint); }

/* --- Materialproben der Gestaltungswelten (Teaser) -------------------------- */

.swatches {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(0.85rem, 2vw, 1.5rem);
  list-style: none;
}

/* Fünf Kacheln: Zwei Spalten ließen die letzte Reihe bei 2/2/1 stehen, eine
   einzeln wirkende Karte. Drei Spalten ergeben 3/2 — kürzere zweite Reihe,
   aber nie eine Karte allein. Unter 30rem geht es direkt auf eine Spalte,
   damit die 2/2/1-Lücke gar nicht erst auftritt. */
@media (max-width: 60rem) { .swatches { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 30rem) { .swatches { grid-template-columns: 1fr; } }

.swatch a {
  display: block;
  text-decoration: none;
  border-radius: var(--radius-big);
  transition: translate 0.3s var(--ease);
}

.swatch a:hover { translate: 0 -4px; }

.swatch__proof {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  aspect-ratio: 4 / 3;
  padding: 1rem 1.1rem;
  border-radius: var(--radius-big);
  overflow: hidden;
  container-type: inline-size;
  box-shadow: var(--shadow-soft);
  transition: box-shadow 0.3s var(--ease);
}

.swatch a:hover .swatch__proof { box-shadow: var(--shadow-lift); }

.swatch__mark { font-size: 0.72rem; letter-spacing: 0.02em; }
.swatch__line { font-size: 1.5rem; line-height: 1.1; letter-spacing: -0.03em; }

/* Jede Probe trägt Grund, Schriftbehandlung und Haltung ihrer Welt. */

.swatch__proof--klar { background: #FBFBFA; }
.swatch__proof--klar .swatch__mark { color: #101214; font-weight: 600; }
.swatch__proof--klar .swatch__line { color: #101214; font-weight: 500; }

.swatch__proof--papier { background: #F1EBE0; font-family: Georgia, 'Times New Roman', serif; }
.swatch__proof--papier .swatch__mark { color: #665C4D; font-family: var(--font); letter-spacing: 0.12em; text-transform: uppercase; }
.swatch__proof--papier .swatch__line { color: #23201B; letter-spacing: -0.012em; }

.swatch__proof--studio { background: #0F1214; position: relative; }
.swatch__proof--studio::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(62% 66% at 74% 22%, rgba(214, 224, 220, 0.22), transparent 62%);
}
.swatch__proof--studio .swatch__mark { color: #FBFAF8; font-weight: 700; letter-spacing: 0.2em; position: relative; }
.swatch__proof--studio .swatch__line { color: #FBFAF8; font-weight: 640; letter-spacing: -0.035em; position: relative; }

.swatch__proof--reaktiv { background: #090B0C; position: relative; }
/* Ruhendes Abbild des Feldes: dieselbe Punktdichte, aber ohne Rechenlast. */
.swatch__proof--reaktiv::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(196, 204, 201, 0.42) 1px, transparent 1px);
  background-size: 13px 13px;
  mask-image: radial-gradient(58% 58% at 72% 62%, #000 0%, rgba(0,0,0,0.25) 55%, transparent 78%);
  -webkit-mask-image: radial-gradient(58% 58% at 72% 62%, #000 0%, rgba(0,0,0,0.25) 55%, transparent 78%);
}
.swatch__proof--reaktiv::after {
  content: '';
  position: absolute;
  width: 42%;
  aspect-ratio: 1;
  right: 8%;
  bottom: 12%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(95, 171, 109, 0.55), transparent 62%);
}
.swatch__proof--reaktiv .swatch__mark { color: #FBFAF8; font-weight: 640; position: relative; }
.swatch__proof--reaktiv .swatch__mark i { font-style: normal; color: var(--accent-light); }
.swatch__proof--reaktiv .swatch__line { color: #FBFAF8; font-weight: 640; letter-spacing: -0.035em; position: relative; }

/* Signatur ist keine fremde Grammatik wie die vier davor, sondern trägt die
   eigene Werkstatt-Palette — deshalb Tokens statt fremder Hex-Werte. Die
   Standbild-Miniatur zeigt das Prinzip der Welt in einem einzigen Bild:
   Umriss trifft Fläche, derselbe Wechsel, den die Bühne beim Scrollen zeigt. */
.swatch__proof--signatur {
  background:
    radial-gradient(120% 90% at 78% 8%, rgba(28, 64, 32, 0.28), transparent 58%),
    linear-gradient(168deg, var(--dark), var(--dark-deep) 70%);
  position: relative;
}

.swatch__sig {
  position: absolute;
  inset: 16% 12% 42%;
  display: flex;
  gap: 8%;
}

.swatch__sig-wire,
.swatch__sig-real {
  flex: 1;
  border-radius: 5px;
}

.swatch__sig-wire { border: 1.5px dashed var(--accent-light); opacity: 0.6; }
.swatch__sig-real { background: linear-gradient(152deg, var(--forst-700), var(--dark)); }

.swatch__proof--signatur .swatch__mark { color: var(--on-dark); font-weight: 640; position: relative; }
.swatch__proof--signatur .swatch__line { color: var(--on-dark); font-weight: 640; letter-spacing: -0.035em; position: relative; }

.swatch__name {
  display: block;
  margin-top: 1rem;
  font-size: 1.05rem;
  font-weight: 620;
  letter-spacing: -0.018em;
  color: var(--dark);
}

.swatch__note {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

.swatches__after { margin-top: 2.5rem; }

@media (prefers-reduced-motion: reduce) {
  .swatch a, .swatch__proof { transition: none; }
  .swatch a:hover { translate: none; }
}

/* --- Pakete ---------------------------------------------------------------- */

/* Der externe Preisanker steht zwischen Auftakt und Karten. Er nennt zuerst
   die Zahl, gegen die der Besucher ohnehin rechnet, und erst danach die
   eigene. Ein heller Kasten auf Sand: erhöhte Fläche plus Haarlinie, kein
   Schatten, damit die Aufmerksamkeit bei den Karten darunter bleibt. */
.anchor-box {
  max-width: 54rem;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: clamp(1.1rem, 3vw, 2.5rem);
  align-items: start;
  padding: clamp(1.5rem, 3.5vw, 2.25rem) clamp(1.35rem, 3.5vw, 2.5rem);
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-big);
  text-align: center;
}

.anchor-box__rule { background: var(--line); align-self: stretch; }

.anchor-box__label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.88rem;
  color: var(--ink-soft);
}

.anchor-box__figure {
  display: block;
  font-size: clamp(1.45rem, 3.4vw, 2.05rem);
  font-weight: 640;
  line-height: 1.12;
  letter-spacing: -0.026em;
  color: var(--dark);
}

/* Die fremde Zahl steht leiser als die eigene. Bei dieser Größe reichen 3:1,
   #666D61 auf #FBF8F2 liegt bei 5,0:1. */
.anchor-box__figure--them { color: var(--ink-faint); font-weight: 600; }

.anchor-box__note {
  margin: 0.5rem 0 0;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--ink-soft);
}

@media (max-width: 44rem) {
  .anchor-box { grid-template-columns: 1fr; gap: 1.25rem; }
  .anchor-box__rule { height: 1px; }
}

/* Laufzeit und Nachlass: je eine Spur mit zwei oder mehr Segmenten, die
   Auswahl als erhöhte Fläche. Der Akzent bleibt hier bewusst außen vor und
   markiert nur den Gewinn, damit im Blickfeld genau eine grüne Aussage steht:
   die empfohlene Karte darunter.

   Ohne JavaScript bleibt die Leiste versteckt (Attribut hidden im Markup, das
   Skript nimmt es weg). Dann stehen die Karten auf der Vorbelegung aus den
   Daten, und alle Preise sind trotzdem sichtbar. */
.pay-switch {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(0.9rem, 2.4vw, 1.75rem);
  margin-block: clamp(2rem, 5vw, 3rem) 0;
}

.pay-switch[hidden] { display: none; }

.pay-switch__group { border: 0; margin: 0; padding: 0; min-width: 0; }

/* Sichtbare Beschriftung statt versteckter legend: bei drei Gruppen
   nebeneinander ist sonst nicht erkennbar, was welche Spur steuert. */
.pay-switch__legend {
  display: block;
  width: 100%;
  padding: 0 0 0.45rem;
  font-size: 0.79rem;
  font-weight: 620;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-align: center;
}

/* Ohne diese Zeile hängt das optisch versteckte Radio am nächsten
   positionierten Vorfahren, und der Browser scrollt beim Tabben an eine
   Stelle weit außerhalb der Leiste. */
.pay-switch__track {
  position: relative;
  display: flex;
  gap: 0.25rem;
  padding: 0.3rem;
  background: var(--sunk);
  border: 1px solid var(--line);
  border-radius: 11px;
}

.pay-switch__track label { display: flex; }

/* Erklärt die Regeln, die der Umschalter nicht von selbst zeigt: worauf der
   Nachlass wirkt, und dass es Premium nur mit 24 Monaten gibt. */
.pay-switch__note {
  max-width: 42rem;
  margin: 1rem auto 0;
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--ink-faint);
  text-align: center;
}

.pay-switch__note[hidden] { display: none; }

/* Das echte Radio bleibt bedienbar und für Screenreader vorhanden, nur
   optisch ersetzt durch die Beschriftung daneben. */
.pay-switch input {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.pay-switch__opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.55rem clamp(0.8rem, 2.5vw, 1.15rem);
  border-radius: var(--radius);
  font-size: 0.96rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink-soft);
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.18s, color 0.18s, box-shadow 0.18s;
}

.pay-switch__gift {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.79rem;
  font-weight: 500;
  /* --ink-faint fällt auf dieser Fläche unter 4,5:1 (gemessen 4,34:1),
     deshalb hier --ink-soft statt der sonst üblichen leisen Stufe. */
  color: var(--ink-soft);
}

.pay-switch__opt:hover { color: var(--dark); }

.pay-switch input:checked + .pay-switch__opt {
  background: var(--raised);
  color: var(--dark);
  box-shadow: 0 1px 2px rgba(17, 40, 20, 0.05), 0 2px 8px rgba(17, 40, 20, 0.06);
}

.pay-switch input:checked + .pay-switch__opt .pay-switch__gift { color: var(--accent); }

.pay-switch input:focus-visible + .pay-switch__opt {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Drei Pakete nebeneinander. Auf dem Desktop steht Business in der Mitte,
   gestapelt wandert es nach oben: dort gewinnt die erste Karte. Die
   Reihenfolge kommt als --order-m aus den Daten. */
.price-grid {
  display: flex;
  align-items: stretch;
  gap: clamp(0.9rem, 2vw, 1.4rem);
  padding-block: 2.75rem 1.5rem;
}

/* Flexbox statt Raster, weil die empfohlene Karte breiter werden soll als ihre
   Nachbarn und eine Rasterspur sich nicht vom Element aus verbreitern lässt.
   Nebenbei wirkt hier auch die Reihenfolge aus --order-m. */
.price-grid .price-card { flex: 1 1 0; min-width: 0; }

@media (max-width: 62rem) {
  .price-grid {
    flex-direction: column;
    max-width: 34rem;
    margin-inline: auto;
    gap: 2.25rem;
    padding-block: 1.75rem 0;
  }
  .price-grid .price-card { order: var(--order-m, 1); }
  .price-grid .price-card--featured { margin-block: 0; }
}

/* Durchgestrichener Ausgangspreis, sobald ein Rabatt greift. Macht den
   Nachlass sichtbar, statt ihn nur zu behaupten. */
/* Muss .price-card__price span schlagen, das Größe und Farbe für die
   Zusatzangaben in dieser Zeile setzt. Deshalb dieselbe Verschachtelung. */
.price-card__price .price-card__was {
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--ink-faint);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}

.price-card__list li.is-off { color: var(--ink-faint); }
.price-card__list li.is-off svg { color: var(--ink-faint); opacity: 0.55; }

.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-big);
}

.price-card--featured {
  border-color: var(--dark);
  box-shadow: var(--shadow-soft);
}

/* Die Empfehlung trägt alle vier Merkmale zusammen: Fahne oben mittig, 2 px
   Rahmen im Akzent während die Nachbarn eine Haarlinie haben, rund 8 Prozent
   mehr Höhe durch Innenabstand und Anhebung, und als einzige einen
   Vollflächen-Knopf. Einzeln wirkt keines davon. */
.price-grid .price-card--featured {
  border: 2px solid var(--accent);
  box-shadow: var(--shadow-soft);
  padding: clamp(1.75rem, 3.4vw, 2.35rem) clamp(1.6rem, 3.2vw, 2.15rem);
  flex-grow: 1.12;
  margin-block: -1.5rem;
}

.price-grid .price-card--featured .price-card__price strong { font-size: 2.6rem; }

.price-card__flag {
  position: absolute;
  top: -0.8rem;
  left: 50%;
  translate: -50% 0;
  background: var(--dark);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 0.28rem 0.85rem;
  border-radius: 6px;
  white-space: nowrap;
}

/* Weiß auf #1C4020 liegt bei 11,6:1. */
.price-grid .price-card__flag { background: var(--accent); top: -0.95rem; }

.price-card h3 { margin-bottom: 0.25rem; }

.price-card__claim {
  margin-bottom: 1.3rem;
  font-size: 0.94rem;
  color: var(--ink-soft);
}

.price-card__desc { font-size: 0.94rem; color: var(--ink-soft); margin-bottom: 1.4rem; }

.price-card__setup { font-size: var(--fs-small); color: var(--ink-faint); margin-bottom: 1.4rem; }

/* Die Zahlungszeile wechselt mit dem Umschalter. Beide Fassungen stehen im
   Markup, damit ohne JavaScript die vorbelegte sichtbar bleibt. */
.price-card__pay {
  margin: 0 0 1.4rem;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--ink-soft);
}

.price-card__pay[hidden] { display: none; }

.price-card__price { display: flex; align-items: baseline; gap: 0.4rem; margin-bottom: 1.4rem; }

.price-card__price strong {
  font-size: 2.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--dark);
  line-height: 1;
}

.price-card__price span { color: var(--ink-faint); font-size: var(--fs-small); }

/* Aus demselben Grund wie bei .price-card__list: der durchgestrichene Preis
   steht in einer Flex-Zeile und braucht die Regel, sobald jemand ihm ein
   display gibt. */
.price-card__price .price-card__was[hidden] { display: none; }

/* Der Wechsel des Umschalters. Preis, Zahlungszeile, Einrichtung und Laufzeit
   blenden gemeinsam 90 ms aus, preise.js schreibt im unsichtbaren Moment alle
   Werte neu, danach blenden sie 90 ms wieder ein. Zusammen 180 ms: Die Zahl
   springt nicht, zählt aber auch nicht hoch, was bei Preisen unseriös wirkt.

   Nur opacity und translate, beides ohne Layout und ohne Neuzeichnen. Die
   Leistungszeilen bleiben außen vor, sie werden im selben Moment als Elemente
   ausgetauscht; eine Blende auf frisch eingefügten Knoten hätte keinen
   Ausgangswert, von dem aus sie laufen könnte. */
.price-card [data-preis],
.price-card [data-was],
.price-card [data-pay],
.price-card [data-setup-text],
.price-card [data-laufzeit-text] {
  transition: opacity 90ms var(--ease), translate 90ms var(--ease);
}

.price-card.is-wechsel [data-preis],
.price-card.is-wechsel [data-was],
.price-card.is-wechsel [data-pay],
.price-card.is-wechsel [data-setup-text],
.price-card.is-wechsel [data-laufzeit-text] {
  opacity: 0;
  translate: 0 -3px;
}

/* Der Wechsel bleibt, die Bewegung fällt weg. preise.js schreibt dann sofort
   statt in zwei Hälften, diese Regel ist die Absicherung für den Fall, dass
   die Einstellung mitten in einem laufenden Wechsel umgestellt wird. */
@media (prefers-reduced-motion: reduce) {
  .price-card [data-preis],
  .price-card [data-was],
  .price-card [data-pay],
  .price-card [data-setup-text],
  .price-card [data-laufzeit-text] { transition: none; }

  .price-card.is-wechsel [data-preis],
  .price-card.is-wechsel [data-was],
  .price-card.is-wechsel [data-pay],
  .price-card.is-wechsel [data-setup-text],
  .price-card.is-wechsel [data-laufzeit-text] { opacity: 1; translate: none; }
}

.price-card__list {
  list-style: none;
  display: grid;
  gap: 0.65rem;
  margin-bottom: 1.75rem;
  font-size: 0.98rem;
}

/* Ohne diese Zeile gewinnt "display: grid" oben gegen das eingebaute
   [hidden]{display:none} des Browsers, weil Autor-CSS die UA-Regel des
   Browsers immer schlägt, unabhängig von Spezifität. Der Umschalter blendet
   hier zwar nichts mehr aus, er ersetzt die beiden wechselnden Zeilen als
   Elemente. Die Regel bleibt trotzdem stehen: Wer der Liste später wieder ein
   hidden gibt, tappt sonst erneut in dieselbe Falle. */
.price-card__list[hidden] { display: none; }

.price-card__list li { display: flex; gap: 0.65rem; align-items: flex-start; }

.price-card__list svg { width: 1.1rem; height: 1.1rem; color: var(--accent); flex: none; margin-top: 0.22rem; }

/* Vertragsdaten am Fuß der Karte. Sie stehen unten, weil sie erst gelesen
   werden, wenn Preis und Leistungen überzeugt haben, und sie schieben
   zusammen mit dem Knopf alle drei Karten auf dieselbe Grundlinie. */
.price-card__meta {
  margin: auto 0 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 0.5rem;
  font-size: var(--fs-small);
  line-height: 1.45;
}

.price-card__meta > div { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 0.35rem 0.75rem; }

.price-card__meta dt { color: var(--ink-faint); }
.price-card__meta dd { margin: 0; color: var(--ink-soft); }

@media (max-width: 24rem) {
  .price-card__meta > div { grid-template-columns: 1fr; gap: 0.1rem; }
}

.price-card__cta { display: grid; gap: 0.55rem; }

.price-card .btn { margin-top: auto; justify-content: center; text-align: center; }
.price-card__cta .btn { margin-top: 0; }

.price-card__fine,
.price-card__tel {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.45;
  text-align: center;
  color: var(--ink-soft);
}

.price-card__tel a { font-weight: 600; }

/* Der Anker nach oben: eine schmale Zeile ohne Kaufknopf. Sie verschiebt die
   Skala, ohne die Klarheit der drei Spalten anzutasten. */
.price-more {
  margin-top: clamp(1.5rem, 3.5vw, 2.25rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem clamp(1rem, 3vw, 2rem);
  padding: clamp(1.1rem, 2.5vw, 1.5rem) clamp(1.2rem, 3vw, 1.75rem);
  background: var(--sunk);
  border: 1px solid var(--line);
  border-radius: var(--radius-big);
}

.price-more__text { margin: 0; font-size: var(--fs-small); line-height: 1.55; color: var(--ink-soft); }
.price-more__text strong { display: block; font-size: 1.05rem; font-weight: 640; color: var(--dark); letter-spacing: -0.012em; }
.price-more__link { flex: none; font-weight: 600; color: var(--dark); white-space: nowrap; }

/* --- Passt perfekt dazu ------------------------------------------------------
   Zwei Kacheln, kleiner als die Pakete, damit sie als Ergänzung gelesen werden
   und nicht als vierte Wahl. T-16 füllt sie mit Bündelvorteil und Preisen. */
.cross-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 1.75rem);
}

@media (max-width: 48rem) { .cross-grid { grid-template-columns: 1fr; } }

.cross {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: clamp(1.35rem, 2.8vw, 1.85rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-big);
}

.cross h3 { margin: 0; font-size: 1.08rem; }
.cross p { margin: 0; font-size: 0.92rem; color: var(--ink-soft); }

.cross__price { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem; font-size: 0.92rem; color: var(--ink-soft); }
.cross__label { font-weight: 600; color: var(--dark); }
.cross__price strong { font-size: 1.05rem; font-weight: 650; color: var(--dark); }
.cross__price s { color: var(--ink-faint); font-weight: 500; text-decoration-thickness: 1.5px; }

.cross__link { margin-top: auto; padding-top: 0.4rem; font-weight: 600; font-size: 0.94rem; color: var(--dark); }

/* Die Fotoshooting-Zeile in Starter und Business ist eine buchbare Option,
   keine erfüllte Leistung. Das Pluszeichen statt Häkchen macht den
   Unterschied auch ohne den Fließtext lesbar. */
.price-card__list li.is-addon svg { color: var(--ink-faint); }

/* --- Zusage vor dem Vertrag --------------------------------------------------
   Die konkreteste Angst dieser Zielgruppe ist das falsche Design. Deshalb
   steht die Antwort darauf als eigener Kasten und nicht als Aufzählungspunkt.
   T-12 stellt Transparenzblock und Personenblock daneben. */
.promise {
  max-width: 46em;
  padding: clamp(1.5rem, 3.5vw, 2.25rem);
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-big);
}

.promise p { margin: 0; font-size: 1.12rem; line-height: 1.6; color: var(--ink); }

.trust-grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
  max-width: 58em;
  margin-top: clamp(2rem, 4vw, 3rem);
}

@media (max-width: 48rem) { .trust-grid { grid-template-columns: 1fr; } }

.trust-block h3 { margin-bottom: 1rem; }

.trust-list { list-style: none; display: grid; gap: 0.7rem; }

.trust-list li {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  font-size: 0.97rem;
  color: var(--ink-soft);
}

.trust-list svg { width: 1.05rem; height: 1.05rem; flex: none; margin-top: 0.2rem; color: var(--ink-faint); }

.trust-person {
  padding: clamp(1.25rem, 2.8vw, 1.65rem);
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-big);
}

.trust-person__photo {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--sunk);
  margin-bottom: 0.9rem;
}

.trust-person__photo img { width: 100%; height: 100%; object-fit: cover; }

.trust-person__name { margin: 0; font-weight: 600; color: var(--dark); }

.trust-person__meta { margin: 0.25rem 0 0.7rem; font-size: 0.92rem; color: var(--ink-soft); }

.trust-person__tel { font-weight: 600; color: var(--accent); }

/* --- Sticky-Leiste auf schmalen Geräten ---------------------------------------
   Erscheint erst, wenn die Preiskarten nach oben aus dem Bild gelaufen sind,
   und lässt sich wegtippen. Auf breiten Geräten existiert sie nicht: dort ist
   der Weg zum Kontakt über Kopf und Karten kurz genug. Ohne JavaScript steht
   sie unterhalb des Bildrands und verdeckt nichts. */
.sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: none;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem clamp(0.75rem, 3vw, 1.1rem);
  padding-bottom: calc(0.65rem + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-top: 1px solid var(--line);
  translate: 0 100%;
  transition: translate 0.24s var(--ease);
}

@media (max-width: 47.99rem) {
  .sticky-cta { display: flex; }
  .sticky-cta.is-on { translate: 0 0; }
  .has-sticky-cta .site-footer__grid { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px)); }
}

.sticky-cta__btn {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 2.75rem;
  justify-content: center;
  padding-inline: 0.85rem;
  font-size: 0.92rem;
  white-space: nowrap;
}

.sticky-cta__tel {
  flex: none;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--dark);
  white-space: nowrap;
  text-decoration: none;
}

.sticky-cta__close {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.75rem; height: 2.75rem;
  padding: 0;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink-soft);
  cursor: pointer;
}

.sticky-cta__close svg { width: 1rem; height: 1rem; }
.sticky-cta__close:hover { color: var(--dark); border-color: var(--ink-faint); }

@media (prefers-reduced-motion: reduce) {
  .sticky-cta { transition: none; }
}

/* --- Was wohin gehört ------------------------------------------------------
   Abgrenzungskacheln auf /it-support und /fotografie. Was enthalten ist und
   was gesondert berechnet wird, heißt im Alltag beides "dabei" und wird
   deshalb ständig verwechselt. Die Abgrenzung gehört sichtbar auf die Seite,
   sonst klärt sie jedes Erstgespräch einzeln. */
.scope__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 1.75rem);
}

/* Auf /fotografie stehen im Nutzungsrechte-Block nur zwei Kacheln. In der
   Dreierspur bliebe rechts eine leere Spalte stehen — zwei Spalten auf etwas
   verringerter Breite füllen die Zeile, ohne dass die Kacheln aufgebläht
   wirken. */
.scope__grid:has(> :nth-child(2):last-child) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 56rem;
}

@media (max-width: 56rem) {
  .scope__grid,
  .scope__grid:has(> :nth-child(2):last-child) { grid-template-columns: 1fr; }
}

.scope {
  display: flex;
  flex-direction: column;
  padding: clamp(1.35rem, 2.8vw, 1.85rem);
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-big);
}

.scope--apart { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }

.scope__tag {
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.55rem;
}

.scope h3 { margin-bottom: 0.7rem; }

.scope__list { list-style: none; display: grid; gap: 0.5rem; font-size: 0.95rem; margin-top: 0.4rem; }
.scope__list li { display: flex; gap: 0.6rem; align-items: flex-start; }
.scope__list svg { width: 1.05rem; height: 1.05rem; flex: none; margin-top: 0.22rem; color: var(--accent); }

.scope__pay {
  margin-top: auto;
  padding-top: 1.1rem;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.scope__pay strong { color: var(--dark); font-weight: 600; }

.price-note {
  margin-top: 2rem;
  font-size: var(--fs-small);
  color: var(--ink-faint);
  /* 52em ergab bei der kleinen Schrift Zeilen jenseits von 100 Zeichen. */
  max-width: 46em;
}

/* Mehrere price-notes hintereinander sind keine Fortsetzung eines Gedankens,
   sondern getrennte Aussagen. Gleiche Haarlinien-Trennung wie .limits__list,
   nur in der leiseren Textgröße/-farbe von .price-note. */
.price-note-list {
  list-style: none;
  margin-top: 2rem;
  /* Wie .price-note: Die Zeilen liefen bei 52em auf über 100 Zeichen. */
  max-width: 46em;
}

.price-note-list li {
  padding-block: 0.85rem;
  border-top: 1px solid var(--line-soft);
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--ink-faint);
}

.price-note-list li:first-child { border-top: 0; padding-top: 0; }
.price-note-list li:last-child { padding-bottom: 0; }

/* --- Zielgruppenkennzeichnung ----------------------------------------------
   Firmenkundenpreise sind netto, Privatkundenpreise sind Endpreise. Welche
   der beiden Welten ein Betrag meint, muss neben dem Betrag stehen und nicht
   erst in einer Fußnote. Die Texte erzeugt kennzeichnung_html() in
   includes/daten.php, das Regelwerk steht in PRODUCT.md. Deshalb hier kein
   Inhalt, nur Darstellung: ink-soft statt ink-faint, weil diese Zeile eine
   Pflichtangabe ist und lesbar bleiben muss. */
.price-audience {
  margin: 0 0 1.4rem;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 52em;
}

.price-audience--inline {
  display: block;
  margin: -0.9rem 0 1.4rem;
  font-size: 0.85rem;
  letter-spacing: 0.01em;
  color: var(--ink-soft);
}

/* Allein stehend, etwa unter dem Auftakt, wo der Einstiegspreis in der
   Überschrift steht: kein negativer Abstand, weil kein Betrag darüber klebt. */
.price-audience--inline.price-audience--solo {
  margin: 1.5rem 0 0;
}

.price-audience--solo {
  margin: 1.5rem 0 0;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--ink-soft);
}

/* Über einer Kartengruppe oder Tabelle: als abgesetzter Streifen, damit die
   Zuordnung vor den Beträgen gelesen wird. Abgesetzt wird über die ruhige
   Füllung und eine umlaufende Haarlinie. Ein dicker farbiger Balken an der
   linken Kante wäre Dekoration und ist auf dieser Seite verboten. */
.price-audience--lead {
  max-width: none;
  margin-bottom: 1.75rem;
  padding: 0.75rem 1rem;
  background: var(--sunk);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

/* --- Preistabellen IT-Support ------------------------------------------------
   Stundensätze gehören in eine Tabelle und nicht in ein Kachelraster: Wer
   wissen will, was eine Stunde kostet, vergleicht Zeilen. Zwei Karten
   nebeneinander, weil "nach Aufwand" und "zum Festpreis" zwei verschiedene
   Entscheidungen sind und nicht zwei Zeilen derselben Liste.
   Die Karten stehen in einer --alt-Sektion, deshalb tragen sie die Grundfläche
   und nicht die erhöhte: sonst läge Sand auf Sand ohne jede Kante. */
.rate-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 1.75rem);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

/* Steht nur eine Karte in der Spur (die Zusatzpositionen auf /fotografie),
   säße sie allein in der linken Hälfte einer leeren Zeile. Einspaltig auf dem
   Maß von .rate-single wirkt sie als das, was sie ist: eine Nebentabelle. */
.rate-grid:has(> :only-child) {
  grid-template-columns: 1fr;
  max-width: 40rem;
}

@media (max-width: 56rem) { .rate-grid { grid-template-columns: 1fr; } }

.rate {
  display: flex;
  flex-direction: column;
  padding: clamp(1.35rem, 2.8vw, 1.85rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-big);
}

.rate h3 { margin-bottom: 0.3rem; }

.rate__intro { margin: 0 0 1.35rem; font-size: 0.95rem; color: var(--ink-soft); }

/* Kein Kicker im Sinne der Typo-Regel, sondern die Beschriftung einer zweiten
   Tabelle in derselben Karte. Deshalb leise statt im Akzent. */
.rate__sub {
  margin: 1.75rem 0 0.2rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.rate__table { width: 100%; border-collapse: collapse; }

.rate__table th,
.rate__table td {
  padding: 0.85rem 0;
  text-align: left;
  vertical-align: baseline;
  border-top: 1px solid var(--line-soft);
}

/* Die erste Zeile braucht keine Linie: darüber steht schon eine Überschrift. */
.rate__table tr:first-child th,
.rate__table tr:first-child td { border-top: 0; }

.rate__table th {
  font-weight: 500;
  color: var(--ink);
  padding-right: 1.1rem;
  line-height: 1.45;
}

.rate__detail {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--ink-faint);
}

/* Die Betragsspalte nimmt genau ihre Breite: "width: 1%" plus nowrap ist der
   verlässlichste Weg, eine Tabellenspalte auf ihren Inhalt zu schrumpfen. */
.rate__table td { width: 1%; text-align: right; white-space: nowrap; }

.rate__amount {
  display: block;
  font-size: 1.08rem;
  font-weight: 650;
  letter-spacing: -0.012em;
  color: var(--dark);
  font-variant-numeric: tabular-nums;
}

.rate__unit { display: block; margin-top: 0.1rem; font-size: 0.84rem; color: var(--ink-faint); }

/* Auf schmalen Geräten frisst eine unumbrechbare Einheit wie "auf den
   Stundensatz" die halbe Zeilenbreite. Dort darf sie umbrechen, der Betrag
   selbst nie. */
@media (max-width: 30rem) {
  .rate__table td { white-space: normal; }
  .rate__amount { white-space: nowrap; }
}

/* Steht am Fuß der Karte, damit beide Karten trotz unterschiedlicher
   Zeilenzahl auf derselben Grundlinie enden. */
.rate__note {
  margin: auto 0 0;
  padding-top: 1.5rem;
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--ink-soft);
}

/* --- Der IT-Check vor dem Vertrag --------------------------------------------
   Kein Kontingentvertrag ohne vorherige Bestandsaufnahme. Das ist keine
   Fußnote, sondern der erste Schritt, deshalb steht der Block über den Karten
   und nicht darunter. Ruhige Füllung, weil er eine Bedingung benennt und
   keine Ware anbietet. */
.gate {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem clamp(1.5rem, 4vw, 3.5rem);
  margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
  padding: clamp(1.35rem, 3vw, 2rem);
  background: var(--sunk);
  border: 1px solid var(--line);
  border-radius: var(--radius-big);
}

.gate__body { flex: 1 1 24rem; }
.gate__body h3 { margin-bottom: 0.5rem; }
.gate__body p { margin: 0; font-size: 0.97rem; line-height: 1.6; color: var(--ink-soft); max-width: 44em; }

.gate__price { flex: 0 1 15rem; }

.gate__amount {
  display: block;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--dark);
  font-variant-numeric: tabular-nums;
}

.gate__unit { display: block; margin-top: 0.35rem; font-size: var(--fs-small); color: var(--ink-soft); }

.gate__note { margin: 0.65rem 0 0; font-size: var(--fs-small); line-height: 1.5; color: var(--ink-soft); }

/* --- Grenzen des Angebots ----------------------------------------------------
   Was nicht enthalten ist, steht nicht im Kleingedruckten, sondern als eigener
   Block unter den Karten. Er schützt vor Streit und ist zugleich das stärkste
   Vertrauenssignal der Seite: Wer seine Grenzen aufschreibt, hält den Rest
   eher ein. Deshalb in Fließtextgröße und nicht als Fußnote. */
.limits {
  /* Dieselbe Breite wie .promise und .faq: Der Kasten lief vorher über die
     volle Containerbreite, und seine Zeilen wurden über 1000 px lang — weit
     jenseits des lesbaren Maßes. Als schmaler Textkasten unter dem breiten
     Kartenraster folgt er demselben Muster wie die übrigen Textblöcke. */
  max-width: 46em;
  margin-top: clamp(2rem, 4.5vw, 3rem);
  padding: clamp(1.5rem, 3.5vw, 2.25rem);
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-big);
}

.limits h3 { margin-bottom: 1rem; }

.limits__list { list-style: none; display: grid; }

.limits__list li {
  padding-block: 0.85rem;
  border-top: 1px solid var(--line-soft);
  font-size: 0.99rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

.limits__list li:first-child { border-top: 0; padding-top: 0; }
.limits__list li:last-child { padding-bottom: 0; }

/* --- Auftragsliste Privatkunden ------------------------------------------------
   Elf Festpreise als elf gleich große Kacheln wären ein Suchbild: Wer Hilfe
   braucht, kennt den Produktnamen nicht, sondern seine Lage. Deshalb drei
   Listen nach Lebenslage, und in jeder Zeile steht der Name links, der Betrag
   rechts auf derselben Grundlinie und die Erklärung darunter über die volle
   Breite. Das ist die Grammatik einer Preistafel und nicht die eines
   Kachelrasters, und sie lässt sich von oben nach unten lesen. */
.joblist-set {
  display: grid;
  gap: clamp(1.1rem, 2.5vw, 1.75rem);
}

.joblist {
  padding: clamp(1.4rem, 3vw, 2.15rem) clamp(1.3rem, 2.8vw, 2rem);
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-big);
}

.joblist__head {
  margin-bottom: clamp(1rem, 2.2vw, 1.4rem);
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--line);
}

.joblist__head h3 { margin-bottom: 0.3rem; font-size: 1.3rem; }
.joblist__head p { margin: 0; font-size: 0.97rem; color: var(--ink-soft); }

.joblist__rows { margin: 0; }

/* Zwei Spalten für Name und Betrag, eine volle Zeile für die Erklärung. Die
   Grundlinien von Name und Betrag liegen gleich, sonst schwimmt der Betrag. */
.job {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "name preis"
    "was  was";
  align-items: baseline;
  column-gap: clamp(1rem, 3vw, 2rem);
  padding-block: clamp(1rem, 2.2vw, 1.35rem);
  border-top: 1px solid var(--line-soft);
}

.job:first-child { border-top: 0; padding-top: 0; }
.job:last-child { padding-bottom: 0; }

.job__name {
  grid-area: name;
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.012em;
  color: var(--dark);
}

.job__price {
  grid-area: preis;
  margin: 0;
  text-align: right;
  font-size: clamp(1.3rem, 2.6vw, 1.5rem);
  font-weight: 650;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--dark);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.job__ab { font-size: 0.72em; font-weight: 500; color: var(--ink-soft); }

/* Einen Tick größer als der übliche Nebentext dieser Seite: Die Leserschaft
   ist im Schnitt älter, und hier steht, was der Kunde für sein Geld bekommt. */
.job__what {
  grid-area: was;
  margin: 0.4rem 0 0;
  /* 46 statt 52em: Bei voller Kartenbreite liefen die Erklärzeilen sonst auf
     über 100 Zeichen — gerade für die ältere Leserschaft dieser Seite zu lang. */
  max-width: 46em;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

.job__note { display: block; margin-top: 0.35rem; font-size: 0.9rem; color: var(--ink-faint); }

/* Die Zeitabrechnung steht nachrangig: eine schmale Karte statt zweier
   breiter, damit sie neben den Festpreisen nicht wie das Hauptangebot
   aussieht. */
.rate-single { max-width: 40rem; }

/* --- Steuerermäßigung nach § 35a EStG ------------------------------------------
   Die Zahl, die der Besucher mitnehmen soll, ist nicht der Auftragsbetrag,
   sondern der Rückfluss. Deshalb steht die Rechnung als eigener Block neben
   dem Text und nicht als Satz darin. Grün trägt hier genau eine Aussage: das
   Ergebnis der letzten Zeile. */
.tax-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 21rem);
  gap: clamp(1.75rem, 4.5vw, 3.5rem);
  align-items: start;
}

@media (max-width: 56rem) {
  .tax-grid { grid-template-columns: 1fr; max-width: 40rem; }
}

.tax-text p { max-width: 42em; color: var(--ink-soft); }
.tax-text h3 { margin: clamp(1.75rem, 3.5vw, 2.25rem) 0 0.6rem; }

.receipt {
  padding: clamp(1.3rem, 3vw, 1.75rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-big);
}

.receipt__title { margin: 0 0 0.5rem; font-size: 0.95rem; font-weight: 600; color: var(--ink-soft); }

.receipt__rows { margin: 0; }

.receipt__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.85rem;
  border-top: 1px solid var(--line-soft);
}

.receipt__row dt { font-size: 0.95rem; line-height: 1.45; color: var(--ink-soft); }

.receipt__row dd {
  margin: 0;
  font-weight: 650;
  color: var(--dark);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Die Summenzeile trägt die kräftige Linie. Das ist die einzige Stelle der
   Seite, an der eine Linie mehr sagt als eine Haarlinie. */
.receipt__row--sum { border-top: 1px solid var(--dark); padding-top: 1rem; }
.receipt__row--sum dt { color: var(--dark); }
.receipt__row--sum dd { font-size: 1.5rem; line-height: 1.1; letter-spacing: -0.02em; color: var(--accent); }

.receipt__about { font-size: 0.62em; font-weight: 500; color: var(--ink-soft); }

/* Die kurze Kennzeichnung sitzt sonst mit negativem Abstand unter einem
   Betrag. Hier folgt sie auf die Summenlinie und braucht Luft davor. */
.receipt .price-audience--inline { margin: 1rem 0 0; }

.receipt__note { margin: 0.85rem 0 0; font-size: 0.88rem; line-height: 1.55; color: var(--ink-faint); }

/* Zwei Betreuungsverträge, bewusst schmaler als die drei Kontingentkarten der
   Firmenkundenseite: Sie sind eine Möglichkeit und nicht der Weg. */
.care-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 1.75rem);
  max-width: 46rem;
}

@media (max-width: 44rem) {
  .care-grid { grid-template-columns: 1fr; max-width: 30rem; }
}

/* Widerruf und AGB stehen bei den Grenzen und nicht nur im Fuß: Beides
   beantwortet dieselbe Frage, nämlich woran der Kunde ist. */
.legal-pair { margin-top: clamp(2rem, 4.5vw, 3rem); }

.legal-pair__text {
  max-width: 46em;
  margin-bottom: clamp(1.25rem, 3vw, 1.75rem);
  color: var(--ink-soft);
}

/* --- Ablauf ----------------------------------------------------------------- */

.steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 2rem);
  counter-reset: step;
}

@media (max-width: 56rem) {
  .steps { grid-template-columns: 1fr; max-width: 34rem; }
}

.steps li { counter-increment: step; position: relative; }

.steps li::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.08em;
  margin-bottom: 0.8rem;
}

.steps li::after {
  content: "";
  position: absolute;
  top: 0.55rem;
  left: 2.6rem;
  right: 0.5rem;
  height: 1px;
  background: var(--line);
}

.steps li:last-child::after { display: none; }

@media (max-width: 56rem) {
  .steps li::after { display: none; }
}

.steps h3 { font-size: 1.08rem; margin-bottom: 0.4rem; }

.steps p { font-size: 0.96rem; color: var(--ink-soft); }

/* --- Prozess-Bühne (So entsteht Ihre Website) --------------------------------- */

.proc {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: clamp(1.25rem, 3vw, 2.25rem);
  align-items: start;
}

.proc__tabs { display: flex; flex-direction: column; gap: 0.5rem; }

.proc__tab {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 0.9rem 1rem 1rem;
  text-align: left;
  font: inherit;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.proc__tab:hover { background: var(--sunk); }

.proc__tab.is-active {
  background: var(--raised);
  border-color: var(--line);
  box-shadow: var(--shadow-soft);
}

.proc__num {
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  margin-top: 0.2rem;
  transition: color 0.2s;
}

.proc__tab.is-active .proc__num { color: var(--accent); }

.proc__label strong { display: block; color: var(--dark); font-weight: 600; font-size: 1.02rem; }

.proc__label small {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* Fortschrittsbalken: nur sichtbar, solange die Bühne automatisch weiterläuft */

.proc__prog {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 0.45rem;
  height: 2px;
  border-radius: 1px;
  overflow: hidden;
}

.proc--auto .proc__tab.is-active .proc__prog { background: var(--line-soft); }

.proc--auto .proc__tab.is-active .proc__prog::after {
  content: "";
  display: block;
  height: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  animation: proc-prog 7s linear forwards;
}

@keyframes proc-prog { to { transform: scaleX(1); } }

/* Bühne: Szenen liegen im selben Grid-Feld und überblenden */

.proc__stage {
  display: grid;
  border: 1px solid var(--line);
  border-radius: var(--radius-big);
  background: var(--raised);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.proc__scene {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1rem, 2.5vw, 1.75rem);
  align-items: start;
  padding: clamp(1.25rem, 3vw, 2rem);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s ease, visibility 0s linear 0.45s;
}

.proc__scene.is-active { opacity: 1; visibility: visible; transition: opacity 0.45s ease; }

.proc__after {
  margin-top: 1.5rem;
  font-size: var(--fs-small);
  color: var(--ink-soft);
  max-width: 46em;
}

/* Einblende-Animationen: Kinder tragen --t als Reihenfolge-Index */

@keyframes proc-in {
  from { opacity: 0; translate: 0 10px; }
  to   { opacity: 1; translate: 0 0; }
}

.sc-chat__bubble, .sc-chat__notes li,
.sc-site__nav, .sc-site__hero, .sc-site__cards i,
.sc-pin, .sc-review__log li,
.sc-live__terminal p, .sc-live__site { opacity: 0; }

.proc__scene.is-active :is(.sc-chat__bubble, .sc-chat__notes li, .sc-site__nav, .sc-site__hero, .sc-site__cards i, .sc-pin, .sc-review__log li, .sc-live__terminal p, .sc-live__site) {
  animation: proc-in 0.5s ease forwards;
  animation-delay: calc(var(--t, 0) * 0.55s);
}

/* Szene 03/04 zeigen die Mini-Website fertig — keine Aufbau-Verzögerung */

.sc-site--pins .sc-site__nav, .sc-site--pins .sc-site__hero, .sc-site--pins .sc-site__cards i,
.sc-site--flat .sc-site__nav, .sc-site--flat .sc-site__hero { opacity: 1; }

.proc__scene.is-active :is(.sc-site--pins, .sc-site--flat) :is(.sc-site__nav, .sc-site__hero, .sc-site__cards i) {
  animation: none;
}

/* Szene 01: Erstgespräch */

.sc-chat__thread { display: flex; flex-direction: column; gap: 0.6rem; }

.sc-chat__bubble {
  max-width: 92%;
  padding: 0.6rem 0.85rem;
  border-radius: var(--radius);
  font-size: 0.92rem;
  line-height: 1.5;
  margin: 0;
}

.sc-chat__bubble--in { background: var(--sunk); color: var(--ink); align-self: flex-start; border-bottom-left-radius: 3px; }
.sc-chat__bubble--out { background: var(--dark); color: #fff; align-self: flex-end; border-bottom-right-radius: 3px; }

.sc-chat__notes {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.sc-chat__notes li {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.92rem;
  color: var(--ink);
}

.sc-chat__notes li::before {
  content: "";
  flex: none;
  width: 0.95rem;
  height: 0.95rem;
  border: 1.5px solid var(--ink-faint);
  border-radius: 4px;
  background: transparent;
}

.proc__scene.is-active .sc-chat__notes li::before {
  animation: proc-check 0.25s ease forwards;
  animation-delay: calc(var(--t, 0) * 0.55s + 0.35s);
}

@keyframes proc-check {
  to { background: var(--accent); border-color: var(--accent); }
}

/* Szene 02: Umsetzung — Editor links, entstehende Mini-Website rechts */

.sc-code__editor {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  background: var(--dark-deep);
  border-radius: var(--radius);
  padding: 0.9rem 1rem 1.1rem;
}

.sc-code__bar { display: flex; align-items: center; gap: 0.35rem; margin-bottom: 0.35rem; }

.sc-code__bar i { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: rgba(244, 247, 242, 0.25); }

.sc-code__bar em {
  margin-left: 0.4rem;
  font-style: normal;
  font-family: "Courier New", monospace;
  font-size: 0.7rem;
  color: rgba(244, 247, 242, 0.5);
}

.sc-code__line {
  display: block;
  height: 0.5rem;
  width: var(--w, 50%);
  border-radius: 3px;
  transform: scaleX(0);
  transform-origin: left;
}

.sc-code__line.ind { margin-left: 1.1rem; }

.sc-code__line.c-a { background: var(--accent-light); }
.sc-code__line.c-b { background: rgba(244, 247, 242, 0.8); }
.sc-code__line.c-c { background: rgba(244, 247, 242, 0.32); }

.proc__scene.is-active .sc-code__line {
  animation: proc-typeline 0.5s ease forwards;
  animation-delay: calc(var(--t, 0) * 0.5s);
}

@keyframes proc-typeline { to { transform: scaleX(1); } }

.sc-code__caret {
  display: block;
  width: 0.5rem;
  height: 0.75rem;
  border-radius: 2px;
  background: var(--accent-light);
  opacity: 0;
}

.proc__scene.is-active .sc-code__caret {
  animation: proc-caret 1s steps(1) infinite;
  animation-delay: calc(var(--t, 0) * 0.5s);
}

@keyframes proc-caret { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* Mini-Website (Skeleton, in mehreren Szenen wiederverwendet) */

.sc-site {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  overflow: hidden;
}

.sc-site__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--line);
}

.sc-site__nav b { font-size: 0.8rem; font-weight: 700; color: var(--dark); }
.sc-site__nav b i { font-style: normal; color: var(--accent); }

.sc-site__links { display: flex; gap: 0.4rem; }
.sc-site__links u { width: 1.1rem; height: 3px; border-radius: 2px; background: var(--line); }

.sc-site__hero { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.9rem; }

.l { display: block; border-radius: 3px; }
.l--title { width: 62%; height: 0.7rem; background: var(--dark); }
.l--text  { width: 84%; height: 0.45rem; background: var(--line-soft); }
.l--btn   { width: 5.5rem; height: 1.35rem; border-radius: 6px; background: var(--accent); margin-top: 0.2rem; }

.sc-site__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  padding: 0 0.9rem 0.9rem;
  margin-top: auto;
}

.sc-site__cards i {
  display: block;
  height: 2.4rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background:
    linear-gradient(var(--accent) 0 0) 0.5rem 0.45rem / 0.85rem 3px no-repeat,
    linear-gradient(var(--line-soft) 0 0) 0.5rem 0.95rem / 55% 4px no-repeat,
    #fff;
}

/* Szene 03: Review — Pins auf der Website, Protokoll daneben */

.sc-pin {
  position: absolute;
  display: grid;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  box-shadow: 0 0 0 3px var(--accent-tint), 0 2px 8px rgba(17, 40, 20, 0.25);
}

.sc-pin--1 { top: 0.35rem; left: 5.2rem; }
.sc-pin--2 { top: 3.4rem; left: 55%; }

.sc-review__log {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.sc-review__log li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.92rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.sc-review__ref {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--sunk);
  color: var(--dark);
  font-size: 0.7rem;
  font-weight: 700;
}

.sc-review__done {
  margin-left: auto;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent-press);
  background: var(--accent-tint);
  border-radius: 6px;
  padding: 0.12rem 0.5rem;
}

.sc-review__approve {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line)) !important;
  color: var(--dark);
  font-weight: 600;
}

.sc-review__approve svg { width: 1rem; height: 1rem; color: var(--accent); flex: none; }

/* Szene 04: Go-Live — Terminal und Live-Karte */

.sc-live__terminal {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  background: var(--dark-deep);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  font-family: "Courier New", monospace;
  font-size: 0.82rem;
  color: var(--on-dark-soft);
}

.sc-live__terminal p { display: flex; align-items: center; gap: 0.5rem; margin: 0; }

.sc-live__terminal svg { width: 0.85rem; height: 0.85rem; color: var(--accent-light); flex: none; margin-left: auto; }

.sc-live__prompt { color: var(--accent-light); }

.sc-live__site { position: relative; display: block; }

.sc-live__url {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--line);
  border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--sunk);
  font-family: "Courier New", monospace;
  font-size: 0.76rem;
  color: var(--ink-soft);
}

.sc-live__url svg { width: 0.8rem; height: 0.8rem; color: var(--accent-press); flex: none; }

.sc-live__site .sc-site { border-radius: 0 0 var(--radius) var(--radius); }

.sc-live__badge {
  position: absolute;
  top: -0.55rem;
  right: -0.55rem;
  padding: 0.22rem 0.6rem;
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.proc__scene.is-active .sc-live__badge {
  animation: proc-pulse 2.2s ease-out infinite;
  animation-delay: 2.6s;
}

@keyframes proc-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(28, 64, 32, 0.45); }
  60%  { box-shadow: 0 0 0 10px rgba(28, 64, 32, 0); }
  100% { box-shadow: 0 0 0 0 rgba(28, 64, 32, 0); }
}

/* Prozess: responsiv */

@media (max-width: 56rem) {
  .proc { grid-template-columns: 1fr; }

  .proc__tabs { flex-direction: row; overflow-x: auto; padding-bottom: 0.25rem; }

  .proc__tab { flex: none; padding: 0.65rem 0.85rem 0.8rem; }

  .proc__label small { display: none; }

  .proc__label strong { font-size: 0.95rem; }
}

@media (max-width: 40rem) {
  .proc__scene { grid-template-columns: 1fr; }
}

/* --- Über mich ---------------------------------------------------------------- */

.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

@media (max-width: 56rem) {
  .about__grid { grid-template-columns: 1fr; max-width: 34rem; }
}

.about__photo {
  border-radius: var(--radius-big);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  background: var(--sunk);
  aspect-ratio: 4 / 5;
}

.about__photo img { width: 100%; height: 100%; object-fit: cover; }

.about__photo-fallback {
  display: grid;
  place-items: center;
  height: 100%;
  color: var(--ink-faint);
  font-size: var(--fs-small);
}

/* --- Einzugsgebiet --------------------------------------------------------------- */

.area__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

@media (max-width: 56rem) {
  .area__grid { grid-template-columns: 1fr; }
}

.area-map { width: 100%; height: auto; display: block; }

.area-legend { list-style: none; display: grid; gap: 1rem; margin-top: 0.5rem; }

.area-legend li { display: flex; align-items: flex-start; gap: 0.9rem; }

.area-legend i {
  flex: none;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  margin-top: 0.38rem;
}

.area-legend .dot-1 { background: var(--accent); }
.area-legend .dot-2 { background: transparent; border: 2px solid var(--accent); }
.area-legend .dot-3 { background: transparent; border: 2px dashed var(--ink-faint); }

.area-legend strong { display: block; color: var(--dark); font-weight: 600; }
.area-legend span { font-size: 0.96rem; color: var(--ink-soft); }

/* --- Gewerkseiten ---------------------------------------------------------------------
   Drei Landingpages je Gewerk, gebaut aus includes/gewerk-layout.php. Die
   Bauteile hier sind bewusst inhaltsleer benannt: Sie tragen jedes weitere
   Gewerk, ohne dass eine Zeile CSS dazukommt.
   ------------------------------------------------------------------------------------ */

/* Die Lage in drei Fällen. Keine Karten: Drei Kachelboxen mit Icon, Titel und
   Text sind genau der Aufbau, den jede Branchenseite baut, und sie zwingen
   drei ungleich schwere Aussagen in dieselbe Höhe. Stattdessen breite Zeilen
   mit Haarlinie, links die Lage als große Aussage, rechts Erklärung und
   Antwort untereinander. Das Verhältnis 5 zu 7 gibt der Aussage links Gewicht
   und lässt der rechten Spalte trotzdem ein lesbares Maß. */
.case-set { display: grid; }

.case {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(1rem, 4vw, 3rem);
  padding-block: clamp(1.85rem, 4vw, 2.85rem);
  border-top: 1px solid var(--line);
}

.case:first-child { border-top: 0; padding-top: 0; }
.case:last-child { padding-bottom: 0; }

.case__claim {
  margin: 0;
  font-size: clamp(1.3rem, 2.3vw, 1.65rem);
  font-weight: 620;
  line-height: 1.2;
  letter-spacing: -0.026em;
  color: var(--dark);
  text-wrap: balance;
}

.case__body { display: grid; gap: clamp(1.1rem, 2.4vw, 1.5rem); }

.case__label {
  margin: 0 0 0.3rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink-faint);
}

.case__block p { margin: 0; color: var(--ink-soft); }

/* Genau eine grüne Aussage je Blickfeld: die Antwort. Sie steht außerdem eine
   Stufe dunkler als die Lage darüber, damit die Lösung schwerer wiegt als das
   Problem. */
.case__block--answer .case__label { color: var(--accent); }
.case__block--answer p { color: var(--ink); }

@media (max-width: 56rem) {
  .case { grid-template-columns: 1fr; gap: 1.1rem; }
}

/* Das passende Paket: links das Argument, rechts die Karte mit dem Betrag.
   Die Karte steht schmaler als die Textspalte, weil sie eine Zahl trägt und
   keinen Fließtext. */
.pitch {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.pitch__text > p { max-width: 40em; color: var(--ink-soft); }

.pitch__alt { font-size: var(--fs-small); color: var(--ink-faint); }

.pitch__trust { margin-top: clamp(1.5rem, 3.5vw, 2.25rem); }

.pitch__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem 2rem;
  margin-top: clamp(1.5rem, 3.5vw, 2.25rem);
}

/* Die Karte steht hier einzeln statt in der Dreiergruppe der Preisseite. Ohne
   die Fahne der Empfehlung fehlt oben der Platz, den .price-card__flag sonst
   überdeckt, deshalb sitzt sie nicht am oberen Rand des Abschnitts. */
.pitch__card { max-width: 25rem; }

/* Dieselbe Auszeichnung wie in der Dreiergruppe der Preisseite: 2 px Akzent
   statt einer Haarlinie unter dem Schatten, dazu die Fahne in Akzentgrün. Der
   Besucher soll dieselbe Karte wiedererkennen, und eine dünne Linie unter
   einem weichen Schatten ergäbe an derselben Kante zwei Erklärungen für eine
   Erhebung. Der Abstand nach oben gilt nur hier: Er macht der Fahne Platz,
   und eine Karte ohne Fahne braucht ihn nicht. */
.pitch__card.price-card--featured { border: 2px solid var(--accent); margin-top: 1.25rem; }
.pitch__card .price-card__flag { background: var(--accent); }

.pitch__card .price-card__fine { margin-top: 0.85rem; }

@media (max-width: 62rem) {
  .pitch { grid-template-columns: 1fr; }
  .pitch__card { max-width: none; }
}

/* Regionalbezug als Namensband. Die Karte der Startseite wird hier nicht
   wiederholt: Sie ist dort das Bild des Einzugsgebiets, hier zählen die Namen,
   weil der Leser seinen eigenen Ort darin sucht. */
.region__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.region__grid > div > p { color: var(--ink-soft); max-width: 34em; }

.region__base { font-size: var(--fs-small); color: var(--ink-faint); }

.zone { padding-block: clamp(1.1rem, 2.5vw, 1.5rem); border-top: 1px solid var(--line); }
.zone:first-child { border-top: 0; padding-top: 0; }

.zone__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.85rem;
  margin: 0 0 0.7rem;
}

.zone__name { font-size: 1.05rem; font-weight: 600; color: var(--dark); }
.zone__note { font-size: var(--fs-small); color: var(--ink-faint); }

/* Das Namensband läuft wie ein Satz um, nicht als Flex-Reihe: Ein Trennzeichen
   mit eigenem Außenabstand bleibt am Zeilenende hängen und sieht dort nach
   Fehler aus. Als Fließtext bricht die Zeile hinter dem Komma, und das ist die
   Stelle, an der ein Leser den Umbruch ohnehin erwartet. */
.zone__orte {
  list-style: none;
  color: var(--ink-soft);
  line-height: 1.85;
}

/* Mehrteilige Namen wie Sankt Leon-Rot dürfen nicht in der Mitte umbrechen.
   Das Komma trägt normale Umbrucherlaubnis, sonst bliebe die ganze Zeile in
   einem Stück. */
.zone__orte li { display: inline; white-space: nowrap; }
.zone__orte li::after { content: ", "; white-space: normal; }
.zone__orte li:last-child::after { content: none; }

.zone__hint {
  margin: clamp(1.1rem, 2.5vw, 1.5rem) 0 0;
  padding-top: clamp(1.1rem, 2.5vw, 1.5rem);
  border-top: 1px solid var(--line);
  font-size: var(--fs-small);
  color: var(--ink-faint);
}

@media (max-width: 56rem) {
  .region__grid { grid-template-columns: 1fr; }
}

/* Aufzählung der Gewerkseiten unter der Preistabelle. Sie ist der einzige
   feste Weg von der Website zu diesen Seiten, alles andere kommt aus Anzeigen
   und Briefen. */
.trades {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.35rem;
  list-style: none;
}

.trades a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.05rem;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 0.96rem;
  font-weight: 600;
  color: var(--dark);
  text-decoration: none;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}

.trades a:hover,
.trades a:focus-visible { border-color: var(--accent); color: var(--accent); }

.trades svg { width: 1rem; height: 1rem; flex: none; color: var(--ink-faint); }
.trades a:hover svg { color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .trades a { transition: none; }
}

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

/* Jede Seite öffnet hell, wie die Startseite. Der Rhythmus entsteht weiter
   aus hell-dunkel, nur liegt das Dunkel jetzt hinten: im Abschlussband und
   im Fuß. Auch hier zieht sich der Auftakt unter den Kopf. */
.page-hero {
  position: relative;
  isolation: isolate;
  margin-top: calc(var(--header-h) * -1);
  background:
    radial-gradient(110% 100% at 92% 0%, rgba(28, 64, 32, 0.06), transparent 60%),
    linear-gradient(178deg, var(--raised), var(--surface));
  color: var(--ink-soft);
  padding-block: calc(var(--header-h) + clamp(2.75rem, 7vw, 4.5rem)) clamp(3.5rem, 8vw, 5.5rem);
}

.page-hero h1 { color: var(--dark); max-width: 30em; }

.page-hero .lead { color: var(--ink-soft); }

.page-hero .kicker { color: var(--accent); }

.page-hero--narrow { padding-bottom: clamp(3rem, 7vw, 4.5rem); }
.page-hero--narrow h1 { margin: 0; }

.page-hero .about__photo { border-color: var(--line); background: var(--raised); }

/* Eigene Knopfzeile statt .hero__actions: Der Auftakt der Startseite hält
   darunter 3 rem Abstand für die Materialproben, hier folgt direkt eine Zeile
   Kleingedrucktes und danach die Zielgruppenweiche. */
.page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
}

.page-hero__fine {
  margin: 0.9rem 0 0;
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--ink-faint);
  max-width: 38em;
}

/* --- Zielgruppenweiche --------------------------------------------------------
   IT-Support gibt es in zwei Preiswelten, die nach der Preisangabenverordnung
   nicht auf einer Seite stehen dürfen: netto für Betriebe, Endpreis für
   Haushalte. Wer auf der falschen Seite landet, liest sonst Preise, die für
   ihn nicht gelten. Deshalb steht die Weiche auf beiden Seiten im ersten
   Bildschirm und nicht im Fuß. Ruhige Füllung mit Haarlinie: Sie ist ein
   Wegweiser und kein Angebot, der Akzent bleibt dem Knopf darüber. */
.audience-switch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.85rem;
  width: fit-content;
  max-width: 100%;
  margin: clamp(2.25rem, 5vw, 3.25rem) 0 0;
  padding: 0.8rem 1.1rem;
  background: var(--sunk);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 0.97rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

.audience-switch svg { width: 1.2rem; height: 1.2rem; flex: none; color: var(--accent); }

/* Ohne Grundbreite bricht die Frage als Ganzes um und lässt das Zeichen allein
   in der ersten Zeile stehen. Mit ihr bleiben Zeichen und Frage zusammen, und
   nur der Verweis rutscht auf schmalen Geräten darunter. */
.audience-switch span { flex: 1 1 12rem; min-width: 0; }
.audience-switch a { flex: none; font-weight: 600; }

/* --- Kontaktformular ------------------------------------------------------------------ */

.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

@media (max-width: 56rem) {
  .contact__grid { grid-template-columns: 1fr; max-width: 40rem; }
}

.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

@media (max-width: 32rem) {
  .form-row { grid-template-columns: 1fr; }
}

.form-field { margin-bottom: 1.25rem; }

.form-field label,
.checkbox-label {
  display: block;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--dark);
  margin-bottom: 0.4rem;
}

.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field select,
.form-field textarea {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.7rem 0.9rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.form-field textarea { resize: vertical; min-height: 8rem; }

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--dark);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dark) 14%, transparent);
}

.form-field input[aria-invalid="true"],
.form-field select[aria-invalid="true"],
.form-field textarea[aria-invalid="true"] {
  border-color: #B3462C;
}

.field-error { margin-top: 0.4rem; font-size: 0.86rem; color: #B3462C; }

.form-field--checkbox { display: flex; flex-direction: column; }

.checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-weight: 400;
  font-size: 0.94rem;
  color: var(--ink-soft);
  cursor: pointer;
}

.checkbox-label input { margin-top: 0.2rem; width: 1.05rem; height: 1.05rem; accent-color: var(--dark); flex: none; }

.form-banner {
  display: flex;
  gap: 0.85rem;
  padding: 1.1rem 1.25rem;
  border-radius: var(--radius);
  margin-bottom: 1.75rem;
  border: 1px solid;
}

.form-banner svg { width: 1.3rem; height: 1.3rem; flex: none; margin-top: 0.1rem; }

.form-banner strong { display: block; color: var(--dark); margin-bottom: 0.15rem; }
.form-banner p { font-size: 0.94rem; color: var(--ink-soft); margin: 0; }

.form-banner--ok { background: #EEF6EE; border-color: #BFDDBF; color: #2E6B37; }
.form-banner--ok svg { color: #2E6B37; }

.form-banner--error { background: #FBEEEA; border-color: #E7C3B4; color: #B3462C; }
.form-banner--error svg { color: #B3462C; }

.form-banner p + p { margin-top: 0.5rem; }
.form-banner a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* Fehlerübersicht nach einem abgelehnten Absenden. Jeder Eintrag springt an
   das Feld, um das es geht, damit auf dem Telefon niemand suchen muss. */
.form-banner__list { list-style: none; margin: 0.4rem 0 0; display: grid; gap: 0.3rem; }
.form-banner__list a { font-size: 0.94rem; color: #B3462C; }
.form-banner__list a:hover { color: var(--dark); }
.form-banner[tabindex]:focus-visible { outline: 2px solid var(--dark); outline-offset: 3px; }

/* --- Rollenwahl: Unternehmen oder Privatperson ------------------------------ */

/* Die erste Frage des Formulars, weil sie entscheidet, welche AGB gelten und ob
   ein Widerrufsrecht besteht. Sie steht deshalb bewusst vor Name und E-Mail. */
.role-choice { border: 0; padding: 0; margin: 0 0 1.5rem; min-width: 0; }

.role-choice__legend {
  padding: 0;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--dark);
}

.role-choice__why {
  margin: 0.3rem 0 0.7rem;
  font-size: 0.88rem;
  color: var(--ink-soft);
}

.role-choice__options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

@media (max-width: 32rem) {
  .role-choice__options { grid-template-columns: 1fr; }
}

.role-option {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin: 0;
  padding: 0.85rem 0.95rem;
  font-weight: 400;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}

.role-option:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }

.role-option input {
  margin: 0.15rem 0 0;
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--accent);
  flex: none;
}

/* Die gewählte Karte trägt den Akzent, damit die Antwort auch beim Überfliegen
   ablesbar bleibt und nicht nur am kleinen Punkt hängt. */
.role-option:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-tint);
}

.role-option:has(input:focus-visible) {
  border-color: var(--dark);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dark) 14%, transparent);
}

.role-option__label { display: block; font-size: 0.96rem; font-weight: 600; color: var(--dark); }
.role-option__hint { display: block; margin-top: 0.15rem; font-size: 0.86rem; color: var(--ink-soft); }

.role-choice__firma { margin: 0.9rem 0 0; }
.role-choice__firma[hidden] { display: none; }

.form-field__note { font-weight: 400; color: var(--ink-faint); }

/* --- Rechtshinweise unter dem Formular -------------------------------------- */

.form-legal {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  /* Pflichthinweise. Ein Teil der Zielgruppe ist älter, deshalb steht der Block
     auf der kleinen Textstufe der Seite und nicht darunter. */
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--ink-soft);
}

.form-legal p { margin: 0 0 0.7rem; font-size: inherit; }
.form-legal p:last-child { margin-bottom: 0; }
.form-legal__hint[hidden] { display: none; }
.form-legal a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.form-legal a:hover { color: var(--accent-press); }

/* Übernommene Stilwahl aus der Galerie */

.stil-note {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 1.5rem;
  padding: 0.7rem 0.9rem;
  font-size: 0.92rem;
  color: var(--ink-soft);
  background: var(--accent-tint);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  border-radius: var(--radius);
}

.stil-note[hidden] { display: none; }

.stil-note svg { width: 1.05rem; height: 1.05rem; color: var(--accent-press); flex: none; }

.stil-note strong { color: var(--dark); font-weight: 600; }

.stil-note button {
  margin-left: auto;
  font: inherit;
  font-size: 0.85rem;
  color: var(--ink-soft);
  background: none;
  border: 0;
  padding: 0.2rem 0.1rem;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.stil-note button:hover { color: var(--dark); }

.contact__side { display: grid; gap: 1.25rem; align-content: start; }

.contact-card {
  padding: 1.5rem;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-big);
}

.contact-card h3 { margin-bottom: 1rem; }

.contact-list { list-style: none; display: grid; gap: 0.85rem; }

.contact-list li { display: flex; align-items: flex-start; gap: 0.7rem; font-size: 0.96rem; }

.contact-list svg { width: 1.1rem; height: 1.1rem; color: var(--accent); flex: none; margin-top: 0.15rem; }

.contact-card p { color: var(--ink-soft); font-size: 0.95rem; }
.contact-card .contact-list + p { margin-top: 1rem; }

/* Die drei Kontaktwege. Telefon und WhatsApp stehen vor dem Formular, weil die
   Zielgruppe anruft oder schreibt, statt Felder auszufüllen. Jede Zeile sagt
   zusätzlich, wofür der Weg der richtige ist. */
.channel-list { list-style: none; display: grid; gap: 1.15rem; }

.channel { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.8rem; align-items: start; }

.channel__icon {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  background: var(--sunk);
  color: var(--accent);
  border-radius: var(--radius);
}

.channel__icon svg { width: 1.15rem; height: 1.15rem; }

.channel__label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--ink-faint); }

.channel__value {
  display: block;
  margin-top: 0.05rem;
  font-size: 1.06rem;
  font-weight: 600;
  color: var(--dark);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.channel__value:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

.channel__hint { display: block; margin-top: 0.25rem; font-size: 0.88rem; line-height: 1.5; color: var(--ink-soft); }

/* Die Rückrufzusage ist ein Versprechen, kein weiterer Infokasten. Der Akzent
   hebt sie aus der Reihe, ohne dass eine zweite Farbe nötig wird. */
.contact-card--promise {
  background: var(--accent-tint);
  border-color: color-mix(in srgb, var(--accent) 28%, transparent);
}

.contact-card--promise h3 { margin-bottom: 0.6rem; }
.contact-card--promise p { color: var(--ink); }
.contact-card--promise p + p { margin-top: 0.6rem; }

/* --- Vergleichstabelle ------------------------------------------------------------------ */

.compare__table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-big);
  background: var(--raised);
}

.compare__table {
  width: 100%;
  min-width: 42rem;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 0.95rem;
}

/* Ohne feste Spaltenbreiten richtet sich jede Spalte nach ihrem längsten
   Inhalt aus, und die drei Paketspalten laufen unterschiedlich breit —
   ausgerechnet die hervorgehobene Business-Spalte wurde dadurch schmaler als
   ihre Nachbarn. Feste Breiten halten alle drei gleich breit, wie die
   Paketkarten im Abschnitt darüber. */
.compare__table th:first-child,
.compare__table td:first-child {
  width: 22%;
}

.compare__table th:not(:first-child),
.compare__table td:not(:first-child) {
  width: 26%;
}

.compare__table th,
.compare__table td {
  padding: 0.85rem 1.1rem;
  text-align: left;
  border-bottom: 1px solid var(--line-soft);
}

/* Bleibt beim Scrollen unter dem Kopf stehen, damit man in der Mitte der
   Tabelle noch weiß, welche Spalte welches Paket ist. */
.compare__table thead th {
  position: sticky;
  top: var(--header-h);
  z-index: 2;
  color: var(--dark);
  font-weight: 650;
  background: var(--sunk);
}

.compare__table tbody th {
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
}

.compare__table tbody tr:last-child td,
.compare__table tbody tr:last-child th { border-bottom: none; }

.compare__table td { color: var(--ink-soft); }

/* Business-Spalte, konsistent zur hervorgehobenen Karte darüber. */
.compare__table .compare__col--featured {
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}

.compare__table thead th.compare__col--featured {
  background: color-mix(in srgb, var(--accent) 16%, var(--sunk));
}

.compare__table td.compare__cell--empty {
  color: var(--ink-faint);
}

.compare__table td.compare__cell--empty svg {
  width: 1.05rem;
  height: 1.05rem;
  vertical-align: -0.2rem;
}

/* --- FAQ-Akkordeon ------------------------------------------------------------------------ */

.faq { display: grid; gap: 0.75rem; max-width: 46em; }

.faq__item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--raised);
  padding: 0.2rem 1.25rem;
}

.faq__item summary {
  padding: 1rem 0;
  font-weight: 600;
  color: var(--dark);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.faq__item summary::-webkit-details-marker { display: none; }

.faq__item summary::after {
  content: "";
  flex: none;
  width: 0.7rem;
  height: 0.7rem;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg);
  transition: transform 0.2s;
}

.faq__item[open] summary::after { transform: rotate(-135deg); }

.faq__item p { padding-bottom: 1.1rem; color: var(--ink-soft); font-size: 0.97rem; }

/* --- Rechtstexte ---------------------------------------------------------------------------- */

.legal__content { max-width: 42em; }

.legal__content h2 { font-size: 1.15rem; margin-top: 2.25rem; }
.legal__content h2:first-child { margin-top: 0; }

.legal__content p { color: var(--ink-soft); font-size: 0.98rem; }

.legal__content a { color: var(--dark); }

/* --- Rechtsdokument-Vorlage (AGB, Widerruf) -------------------------------------------------- */
/* Wiederverwendbares Muster für lange Fließtexte mit Sprungmarken: Inhaltsverzeichnis
   links, Lesebreite rechts. Nutzt .legal__content für Absatz- und Überschriftentypografie. */

.legal-notice {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  padding: 1.1rem 1.25rem;
  margin: 0 0 clamp(2rem, 5vw, 3rem);
  background: var(--accent-tint);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  border-radius: var(--radius-big);
}

.legal-notice svg { width: 1.3rem; height: 1.3rem; color: var(--accent-press); flex: none; margin-top: 0.15rem; }

.legal-notice strong { display: block; color: var(--dark); margin-bottom: 0.25rem; }

.legal-notice p { margin: 0; font-size: 0.95rem; color: var(--ink-soft); }

.legal-notice a { font-weight: 600; }

.legal-doc__grid {
  display: grid;
  grid-template-columns: minmax(0, 14.5rem) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 4.5rem);
  align-items: start;
}

.legal-doc__toc { position: sticky; top: calc(var(--header-h) + 2rem); }

.legal-doc__toc-title {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 0.9rem;
}

.legal-doc__toc ol {
  list-style: none;
  display: grid;
  gap: 0.55rem;
  border-left: 1px solid var(--line);
  max-height: calc(100vh - var(--header-h) - 4rem);
  overflow-y: auto;
}

.legal-doc__toc li { padding-left: 1rem; }

.legal-doc__toc a {
  display: block;
  font-size: 0.92rem;
  line-height: 1.4;
  color: var(--ink-soft);
  text-decoration: none;
}

.legal-doc__toc a:hover,
.legal-doc__toc a:focus-visible { color: var(--dark); }

.legal-doc__body { max-width: 42em; }

.legal-doc__body h2 { scroll-margin-top: calc(var(--header-h) + 1.5rem); }

.legal-doc__stand {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
  color: var(--ink-faint);
}

.legal-doc__end {
  font-style: italic;
  color: var(--ink-faint);
  text-align: center;
}

/* --- Muster-Widerrufsformular ---------------------------------------------------------------- */

.legal-form {
  padding: 1.5rem 1.75rem;
  margin: 1.5rem 0 2rem;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-big);
}

.legal-form p { color: var(--ink-soft); font-size: 0.95rem; margin: 0 0 0.9rem; }
.legal-form p:last-child { margin-bottom: 0; }

.legal-form__field { min-height: 1.5rem; }

.legal-form__footnote { font-size: 0.85rem; color: var(--ink-faint); }

/* --- Downloadbereich -------------------------------------------------------------------------- */

.legal-downloads {
  display: grid;
  gap: 0.75rem;
  margin: 1.5rem 0 2rem;
}

.legal-downloads__item {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1rem 1.25rem;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-big);
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.legal-downloads__item:hover,
.legal-downloads__item:focus-visible {
  border-color: var(--accent-press);
  transform: translateY(-1px);
}

.legal-downloads__item svg { width: 1.5rem; height: 1.5rem; color: var(--accent-press); flex: none; }

.legal-downloads__item strong { display: block; color: var(--dark); font-size: 0.98rem; }

.legal-downloads__item small { display: block; color: var(--ink-faint); font-size: 0.85rem; margin-top: 0.15rem; }

@media (max-width: 56rem) {
  .legal-doc__grid { grid-template-columns: 1fr; }
  .legal-doc__toc {
    position: static;
    order: 2;
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--line);
    max-height: none;
  }
  .legal-doc__toc ol { max-height: none; overflow: visible; }
  .legal-doc__body { order: 1; max-width: none; }
}

/* Kopf, Navigation und Fuß tragen im Druck nichts bei — nur der Text zählt. */
@media print {
  .skip-link, .site-header, .site-footer, .legal-doc__toc, .cta-band, .legal-downloads { display: none !important; }
  .page-hero { margin-top: 0; padding-block: 0 1rem; background: none; color: #000; }
  .page-hero .kicker { color: #000; }
  body { background: #fff; color: #000; }
  .legal-notice { background: none; border-color: #000; }
  .legal-doc__grid { grid-template-columns: 1fr; }
  .legal-doc__body { max-width: none; }
  .legal__content p, .legal-doc__stand { color: #000; }
  a { color: #000; text-decoration: underline; }
  .container { max-width: none; padding-inline: 0; }
}

/* --- CTA-Band ---------------------------------------------------------------------- */

.cta-band { background: var(--dark); color: var(--on-dark-soft); }

/* Auf Graphit trägt die helle Stufe des Akzents. Das tiefe Tannengrün
   würde hier verschwinden. */
.cta-band .kicker { color: var(--accent-light); }

.cta-band h2 { color: var(--on-dark); }

.cta-band .lead { color: var(--on-dark-soft); }

.cta-band__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2rem; }

.cta-band__inner { max-width: 44em; }

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

.site-footer { background: var(--dark-deep); color: var(--on-dark-faint); font-size: 0.96rem; }

.site-footer a { color: var(--on-dark-soft); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--accent-light); }

.site-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: clamp(1.75rem, 4vw, 3rem);
  padding-block: clamp(2.75rem, 6vw, 4.25rem);
}

@media (max-width: 56rem) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 36rem) {
  .site-footer__grid { grid-template-columns: 1fr; }
}

.brand--footer { color: #fff; font-size: 1.15rem; margin-bottom: 0.9rem; }

/* Auch der Punkt im Fuß steht auf Graphit und braucht die helle Stufe. */
.brand--footer .brand__dot { color: var(--accent-light); }

.site-footer__about p:last-child { max-width: 26em; }

.site-footer__title {
  color: #fff;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.site-footer__col ul { list-style: none; display: grid; gap: 0.5rem; }

.site-footer address { font-style: normal; line-height: 1.8; }

.site-footer__bottom {
  border-top: 1px solid rgba(244, 247, 242, 0.12);
  padding-block: 1.4rem;
  font-size: 0.88rem;
  color: var(--on-dark-faint);
}

/* --- Scroll-Reveal ------------------------------------------------------------------- */

/* Versteckt wird nur, wenn JS läuft und den Observer gestartet hat (html.has-reveal).
   Ohne JS oder bei totem Observer bleibt jeder Inhalt sichtbar. */
.has-reveal .reveal {
  opacity: 0;
  translate: 0 18px;
  transition: opacity 0.65s ease, translate 0.65s ease;
  transition-delay: var(--d, 0s);
}

.has-reveal .reveal.is-in { opacity: 1; translate: 0 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .has-reveal .reveal { opacity: 1; translate: none; transition: none; }
  .card, .card__link svg { transition: none; }

  /* Wort-Rotation entfällt (JS schaltet sie ab). */
  .swap__word { transition: none; }

  /* Prozess-Bühne: alle Szenen-Elemente sofort sichtbar, kein Autoplay (JS). */
  .proc__scene { transition: none; }
  .proc__scene :is(.sc-chat__bubble, .sc-chat__notes li, .sc-site__nav, .sc-site__hero, .sc-site__cards i, .sc-pin, .sc-review__log li, .sc-live__terminal p, .sc-live__site) {
    opacity: 1;
    animation: none;
  }
  .sc-code__line { transform: none; }
  .proc__scene.is-active :is(.sc-code__line, .sc-code__caret, .sc-chat__notes li::before, .sc-live__badge) { animation: none; }
  .sc-code__caret { opacity: 1; }
  .proc__scene.is-active .sc-chat__notes li::before { background: var(--accent); border-color: var(--accent); }
}