/* Stintwerk – Grundlagen und Abschnitte. Nur var(--…), keine festen Werte.
   Umbrüche: 600px, 900px, 1100px (siehe tokens.css). */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-canvas);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-17);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, dl, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: var(--border-strong); outline-offset: var(--space-1); }
[id] { scroll-margin-top: var(--space-24); }

.wrap {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--space-6);
}
@media (min-width: 900px) { .wrap { padding-inline: var(--space-10); } }

/* Sektionsabstand: 2 × 48 = 96 (rules.section_gap), mobil 2 × 28 = 56 */
.section { padding-block: var(--space-7); }
@media (min-width: 900px) { .section { padding-block: var(--space-12); } }

/* ---------- Typografie: feste Stufen statt Zwischenwerte ---------- */
.display, .h2, .reel__title, .service--lead .h3 {
  font-weight: var(--weight-bold);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-body);
  text-wrap: balance;
}
.display { font-size: var(--text-55); letter-spacing: var(--tracking-display); }
.h2 { font-size: var(--text-36); }
.reel__title { font-size: var(--text-55); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); }
.service--lead .h3 { font-size: var(--text-30); }
@media (min-width: 900px) { .service--lead .h3 { font-size: var(--text-36); } }
.h2--leise { font-size: var(--text-36); }
@media (min-width: 600px) {
  .display { font-size: var(--text-55); letter-spacing: var(--tracking-display); }
}
@media (min-width: 900px) {
  .h2 { font-size: var(--text-55); letter-spacing: var(--tracking-display); }
  .h2--leise { font-size: var(--text-36); letter-spacing: var(--tracking-body); }
}
@media (min-width: 1100px) {
  .display { font-size: var(--text-90); }
  .h2 { font-size: var(--text-66); }
  .h2--leise { font-size: var(--text-55); letter-spacing: var(--tracking-display); }
  .reel__title { font-size: var(--text-90); }
}
.h3 { font-size: var(--text-30); font-weight: var(--weight-bold); line-height: var(--leading-heading); }
.h4 { font-size: var(--text-24); font-weight: var(--weight-semibold); line-height: var(--leading-ui); }
.lead { font-size: var(--text-18); line-height: var(--leading-body); color: var(--color-text-muted); max-width: var(--measure); }
.small { font-size: var(--text-14); color: var(--color-text-muted); line-height: var(--leading-ui); }
.mono { font-family: var(--font-mono); font-size: var(--text-14); line-height: var(--leading-ui); }
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-14);
  line-height: var(--leading-ui);
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}
.mark {
  background: var(--color-accent);
  color: var(--color-canvas);
  border-radius: var(--radius-md);
  padding-inline: var(--space-3);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ---------- Knöpfe ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-17);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-ui);
  text-decoration: none;
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-10);
  box-shadow: var(--shadow-button);
  cursor: pointer;
  transition: transform var(--motion-fast);
}
.btn:hover { transform: translateY(var(--lift)); }
.btn--primary { background: var(--color-text); color: var(--color-canvas); border: var(--border-strong); }
.btn--ghost { background: transparent; color: var(--color-text); border: var(--border-strong); }
.btn--on-dark { background: var(--color-canvas); color: var(--color-text); border: var(--border-strong-on-dark); }
.btn--sm { padding: var(--space-2) var(--space-6); }
.link { font-weight: var(--weight-semibold); text-decoration: underline; text-underline-offset: var(--space-1); }

/* ---------- Navigation ---------- */
.nav-shell { position: sticky; top: 0; z-index: 20; background: var(--color-canvas); padding-block: var(--space-3); }
.nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-6);
  border: var(--border-hairline);
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-6);
}
.nav__logo img { height: var(--logo-h); width: auto; }
.nav__links { display: none; gap: var(--space-8); }
.nav__links a { text-decoration: none; }
.nav__links a:hover { text-decoration: underline; text-underline-offset: var(--space-1); }
.nav .btn { border-radius: var(--radius-pill); }
@media (min-width: 1100px) { .nav__links { display: flex; } }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; padding-block: var(--space-16) var(--space-30); }
@media (min-width: 900px) { .hero { padding-block: var(--space-20) var(--space-30); } }
.hero__inner { position: relative; z-index: 2; text-align: center; display: grid; justify-items: center; gap: var(--space-8); }
.tag {
  display: inline-flex; align-items: center; gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-14);
  line-height: var(--leading-ui);
  color: var(--color-text-muted);
  border: var(--border-hairline);
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-4);
  text-align: left;
}
.tag__fish { color: var(--color-text); white-space: nowrap; }
.hero .display { max-width: 16ch; }
/* Fallblatt-Anzeige in der großen Überschrift */
.fb__wort { display: inline-block; white-space: nowrap; }
.fb__z { display: inline-block; text-align: center; backface-visibility: hidden; }
.fb__z--neu { animation: fb-blatt 110ms ease-out; }
@keyframes fb-blatt { from { transform: rotateX(-80deg); } to { transform: rotateX(0); } }
/* Variante Tintenstrich: Wort in Petrol, darunter ein gezogener roter Strich */
.mark--strich { background: transparent; color: var(--color-text); padding-inline: 0; position: relative; }
.strich { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: var(--space-4); overflow: visible; pointer-events: none; }
.strich path { fill: none; stroke: var(--color-accent); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 120; stroke-dashoffset: 120; }
.strich--an path { animation: strich-ziehen 700ms ease-out 250ms forwards; }
@keyframes strich-ziehen { to { stroke-dashoffset: 0; } }
.hero .lead { margin-inline: auto; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: center; }

.sketch {
  position: absolute; z-index: 1; pointer-events: none;
  opacity: var(--sketch-opacity);
  animation: schweben 7s ease-in-out infinite;
}
/* bewusst ungleich groß: Stint und Kran tragen, Zollstock und Handy begleiten */
.sketch--stint { width: 21%; left: 1%; top: 3%; animation-name: schwimmen; animation-duration: 9s; }
.sketch--kran { width: 17%; right: 2%; bottom: 0; animation-delay: -2s; }
.sketch--zollstock { width: 12%; right: 5%; top: 6%; animation-delay: -5s; }
.sketch--handy { width: 6%; left: 9%; bottom: 8%; animation-delay: -1s; }
@media (max-width: 899px) {
  .sketch--zollstock { display: none; }
  .sketch--stint { width: 46%; top: auto; bottom: var(--space-4); left: -14%; }
  .sketch--kran { width: 24%; right: -6%; }
  .sketch--handy { display: none; }
}
@keyframes schweben {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(var(--float-y)) rotate(var(--float-rot)); }
}
@keyframes schwimmen {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(var(--swim-x)); }
}

/* ---------- Leistungen ---------- */
.head { display: grid; gap: var(--space-4); margin-bottom: var(--space-12); }
.service { display: grid; gap: var(--space-4); padding-block: var(--space-8); border-top: var(--border-hairline); }
.service__nr { font-family: var(--font-mono); font-size: var(--text-14); line-height: var(--leading-ui); color: var(--color-text-muted); }
.service p { max-width: var(--measure); margin-top: var(--space-3); }
.service--lead { padding-block: var(--space-12); }
.service--lead p { font-size: var(--text-18); }
.service__sketch { width: 50%; max-width: var(--measure-narrow); }
.services__grid { display: grid; border-bottom: var(--border-hairline); }
@media (min-width: 900px) {
  .service--lead { grid-template-columns: var(--space-20) 6fr 3fr; align-items: start; column-gap: var(--space-6); }
  .service__sketch { justify-self: end; width: 70%; }
  .services__grid { grid-template-columns: 1fr 1fr; column-gap: var(--space-10); }
  .services__grid .service { grid-template-columns: var(--space-20) 1fr; column-gap: var(--space-6); }
}

.service__sketch--schmal { width: 30%; }
@media (min-width: 900px) { .service__sketch--schmal { width: 28%; } }

/* ---------- KI-Schulung: Versprechen und Beweisstück nebeneinander (Stufen: Lektionsliste wie Microsoft Learn) ---------- */
.ki-kopf { display: grid; gap: var(--space-10); margin-bottom: var(--space-12); }
.ki-kopf .head { margin-bottom: 0; }
@media (min-width: 900px) {
  .ki-kopf { grid-template-columns: 3fr 2fr; align-items: start; column-gap: var(--space-12); }
}
.ki-stufen .h3 { margin-bottom: var(--space-6); }
.ki-fragen { margin-top: var(--space-16); margin-bottom: var(--space-12); }
.ordner {
  display: grid; gap: var(--space-4);
  background: var(--color-surface-water);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
}
@media (min-width: 900px) { .ordner { padding: var(--space-10); } }
.ordner .eyebrow { margin-bottom: 0; }
.ordner__titel { font-size: var(--text-30); font-weight: var(--weight-bold); line-height: var(--leading-heading); }
.ordner__liste { display: grid; gap: var(--space-4); }
.ordner__liste div { display: grid; gap: var(--space-1); }
.ordner__liste dt { font-weight: var(--weight-semibold); }
.ordner__liste dd { margin: 0; }
.cta-info { font-size: var(--text-17); line-height: var(--leading-body); color: var(--color-text); max-width: var(--measure); }

/* ---------- Schaufenster (geliehen: Smiling Wolf) ---------- */
.reel {
  position: relative; overflow: hidden;
  background: var(--color-text);
  color: var(--color-canvas);
  border-radius: var(--radius-lg);
  min-height: var(--reel-min-h);
  display: grid; justify-items: center; align-content: start;
  padding: var(--space-20) var(--space-6);
  text-align: center;
}
.reel :focus-visible { outline: var(--border-strong-on-dark); }
.reel .eyebrow, .reel .small { color: var(--color-canvas); }
.reel__text { position: relative; z-index: 3; display: grid; gap: var(--space-6); justify-items: center; min-width: 0; }
.reel__text .small { max-width: var(--measure-narrow); font-size: var(--text-18); line-height: var(--leading-body); }
.reel__track { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.reel__tile {
  position: absolute; left: 0; top: 0;
  width: var(--reel-tile-w);
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-md);
  overflow: hidden;
  display: grid; align-content: space-between;
  padding: var(--space-3);
  text-align: left;
  color: var(--color-text);
  will-change: transform;
}
.reel__tile img { width: 70%; margin: auto; }
.reel__tile--water { background: var(--color-surface-water); }
.reel__tile--salt { background: var(--color-canvas); }
.reel__tile .mono { font-size: var(--text-12); }
.reel__tile--bild { padding: 0; align-content: stretch; background: var(--color-canvas); grid-template-rows: 1fr auto; }
.reel__tile--bild img { width: 100%; height: 100%; margin: 0; object-fit: cover; object-position: top; }
.reel__tile--bild .mono { padding: var(--space-2) var(--space-3); }
.reel__links { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; }

/* ---------- Vorher / Nachher ---------- */
.vn { position: relative; margin: 0; border-radius: var(--radius-lg); overflow: hidden; border: var(--border-hairline); aspect-ratio: 16 / 10; user-select: none; }
.vn img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.vn__neu { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--vn-pos, 50%)); }
.vn__griff {
  position: absolute; top: 0; bottom: 0; left: var(--vn-pos, 50%);
  width: 2px; background: var(--color-text); transform: translateX(-50%); pointer-events: none;
}
.vn__griff span {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: var(--color-text); color: var(--color-canvas);
  font-family: var(--font-mono); font-size: var(--text-14); line-height: var(--leading-ui);
  border-radius: var(--radius-pill); padding: var(--space-2) var(--space-4); white-space: nowrap;
}
.vn__label { position: absolute; top: var(--space-4); background: var(--color-text); color: var(--color-canvas); border-radius: var(--radius-md); padding: var(--space-1) var(--space-3); }
.vn__label--alt { left: var(--space-4); }
.vn__label--neu { right: var(--space-4); }
.vn__regler { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.vn__regler:focus-visible + .vn__griff, .vn:focus-within .vn__griff span { outline: var(--border-strong-on-dark); }
.vn__links { margin-top: var(--space-4); }

/* ---------- Preise ---------- */
.abo {
  display: grid; gap: var(--space-4);
  background: var(--color-surface-sunken);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
}
.abo h4 + p { margin-top: var(--space-3); }
.abo .btn { justify-self: start; }
.abo__price { font-size: var(--text-30); font-weight: var(--weight-bold); line-height: var(--leading-heading); }
.abo__price span { font-size: var(--text-14); font-weight: var(--weight-regular); color: var(--color-text-muted); }
.abo__rules { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .abo { grid-template-columns: 3fr 1fr auto; align-items: center; column-gap: var(--space-10); padding: var(--space-10); }
}

.plans { display: grid; gap: var(--space-6); }
@media (min-width: 900px) { .plans { grid-template-columns: 1fr 1.2fr 1fr; align-items: stretch; } }
.plan > .link, .plan__body > .link { align-self: end; }
.plan {
  display: grid; align-content: start; gap: var(--space-6);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
  background: var(--color-surface-sunken);
}
@media (min-width: 900px) { .plan { padding: var(--space-10); } }
.plan__name { font-size: var(--text-24); font-weight: var(--weight-semibold); line-height: var(--leading-ui); }
.plan__price { font-size: var(--text-36); font-weight: var(--weight-bold); line-height: var(--leading-tight); }
.plan__price small { font-size: var(--text-18); font-weight: var(--weight-medium); }
.plan__list { display: grid; gap: var(--space-3); }
.plan__list li { padding-left: var(--space-8); position: relative; line-height: var(--leading-body); }
.plan__list li::before {
  content: "><>"; position: absolute; left: 0; top: var(--space-1);
  font-family: var(--font-mono); font-size: var(--text-12); line-height: var(--leading-body);
}
/* Die eine laute Karte: Akzentfläche nur unter großem Text, Liste auf Salzweiß */
.plan--lead { background: var(--color-accent); color: var(--color-canvas); }
.plan--lead .plan__price { font-size: var(--text-55); letter-spacing: var(--tracking-display); }
@media (min-width: 1100px) { .plan--lead .plan__price { font-size: var(--text-66); } }
.plan--lead .plan__body {
  background: var(--color-canvas);
  color: var(--color-text);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: grid; gap: var(--space-4);
}
.plan--empfohlen { border: var(--border-strong); }
.plan__body { display: grid; gap: var(--space-6); }
.plan__kopf { display: grid; gap: var(--space-6); align-content: start; }
@media (min-width: 900px) {
  .plan--breit { grid-template-columns: 2fr 3fr; column-gap: var(--space-10); align-items: center; }
}
.plan__note { font-family: var(--font-mono); font-size: var(--text-14); line-height: var(--leading-ui); color: var(--color-text-muted); }

.price-block { margin-top: var(--space-16); display: grid; gap: var(--space-6); }
.price-block--first { margin-top: 0; }
.price-block .h3 { font-size: var(--text-30); line-height: var(--leading-heading); }
@media (min-width: 900px) { .price-block .h3 { font-size: var(--text-36); line-height: var(--leading-display); } }
.rows { border-top: var(--border-strong); }
.row { display: grid; gap: var(--space-2); padding-block: var(--space-6); border-bottom: var(--border-hairline); }
.row__name { font-size: var(--text-24); font-weight: var(--weight-semibold); line-height: var(--leading-ui); }
.row__price { font-size: var(--text-24); font-weight: var(--weight-bold); line-height: var(--leading-ui); }
.row__dauer { font-family: var(--font-mono); font-size: var(--text-17); line-height: var(--leading-ui); color: var(--color-text-muted); }
.row__price span { display: block; font-size: var(--text-14); font-weight: var(--weight-regular); color: var(--color-text-muted); }
.row__demo { justify-self: start; }
@media (min-width: 900px) {
  .row { grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 2fr); align-items: baseline; column-gap: var(--space-10); }
  .row__price, .row__dauer { text-align: right; }
  .row__demo { grid-column: 2; }
}
.prices__cta { margin-top: var(--space-12); display: flex; flex-wrap: wrap; gap: var(--space-6); align-items: center; }

/* ---------- App-Demos zum Ausprobieren (werkzeuge.html) ---------- */
.demos { display: grid; gap: var(--space-6); margin-bottom: var(--space-16); }
.demos .h3 { font-size: var(--text-30); line-height: var(--leading-heading); }
.demos__strip { display: flex; gap: var(--space-6); overflow-x: auto; padding-block: var(--space-2) var(--space-4); scroll-snap-type: x mandatory; scrollbar-width: thin; }
.demo { flex: 0 0 auto; margin: 0; display: grid; gap: var(--space-3); scroll-snap-align: start; }
.demo__phone { width: 300px; height: 600px; border: var(--phone-border); border-radius: var(--radius-lg); background: var(--color-canvas); overflow: hidden; }
.demo__phone iframe { width: 350px; height: 725px; border: 0; transform: scale(0.8); transform-origin: top left; display: block; }
.demo figcaption { display: grid; gap: var(--space-1); font-size: var(--text-14); line-height: var(--leading-ui); color: var(--color-text-muted); }
.demo figcaption strong { font-size: var(--text-17); color: var(--color-text); }
.demo figcaption .link { justify-self: start; font-size: var(--text-14); }

/* ---------- Rechenbeispiele und Rechner ---------- */
.faelle { display: grid; gap: var(--space-6); }
@media (min-width: 900px) { .faelle { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.faelle > * { min-width: 0; }
.fall { background: var(--color-surface-sunken); border-radius: var(--radius-lg); padding: var(--space-7); display: grid; gap: var(--space-4); align-content: start; min-width: 0; overflow-wrap: break-word; }
@media (min-width: 900px) { .fall { padding: var(--space-10); } }
.fall__art { font-family: var(--font-mono); font-size: var(--text-14); line-height: var(--leading-ui); color: var(--color-text-muted); }
.fall__titel { font-size: var(--text-24); font-weight: var(--weight-semibold); line-height: var(--leading-heading); }
.fall__vergleich { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3); }
.fall__zahl { display: grid; gap: var(--space-1); padding: var(--space-4); border-radius: var(--radius-md); background: var(--color-canvas); }
.fall__zahl span { font-size: var(--text-14); line-height: var(--leading-ui); color: var(--color-text-muted); }
.fall__zahl strong { font-size: var(--text-36); font-weight: var(--weight-bold); line-height: var(--leading-tight); font-variant-numeric: tabular-nums; }
.fall__zahl--neu { background: var(--color-surface-water); }
.fall__wie { max-width: var(--measure); }
.fall__ergebnis { display: grid; border-top: var(--border-strong); }
.fall__ergebnis div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-4); padding-block: var(--space-3); border-bottom: var(--border-hairline); }
.fall__ergebnis dt { font-size: var(--text-14); line-height: var(--leading-ui); color: var(--color-text-muted); }
.fall__ergebnis dd { font-size: var(--text-17); line-height: var(--leading-ui); font-weight: var(--weight-semibold); }
.fall__formel { margin-top: var(--space-6); max-width: var(--measure); }
.rechner { margin-top: var(--space-12); border: var(--border-strong); border-radius: var(--radius-lg); padding: var(--space-7); display: grid; gap: var(--space-6); }
@media (min-width: 900px) { .rechner { padding: var(--space-10); grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.rechner__kopf, .rechner__ergebnis, .rechner__cta { grid-column: 1 / -1; }
.rechner__kopf { display: grid; gap: var(--space-2); }
.rechner__ergebnis { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3); }

/* ---------- Über mich ---------- */
.about { display: grid; gap: var(--space-10); align-items: center; }
.about__text { display: grid; gap: var(--space-6); justify-items: start; }
.about__text p { max-width: var(--measure); }
.photo-slot {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  background: var(--color-surface-sunken);
  display: grid; grid-template-rows: 1fr auto;
  padding: var(--space-10);
}
.photo-slot img { width: 40%; justify-self: end; align-self: start; }
.photo-slot--foto { padding: 0; overflow: hidden; display: block; }
.photo-slot--foto img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) { .about { grid-template-columns: 6fr 4fr; column-gap: var(--space-20); } }

/* ---------- Ablauf ---------- */
.steps { display: grid; gap: var(--space-8); }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(4, 1fr); gap: var(--space-10); } }
.step { display: grid; align-content: start; gap: var(--space-3); padding-top: var(--space-6); border-top: var(--border-strong); }
.pay { margin-top: var(--space-12); display: grid; gap: var(--space-4); }
.pay ul { display: grid; gap: var(--space-3); }
@media (min-width: 900px) { .pay ul { grid-template-columns: repeat(3, 1fr); gap: var(--space-10); } }

/* ---------- Fragen ---------- */
.faq { display: grid; gap: var(--space-8); }
@media (min-width: 900px) { .faq { grid-template-columns: 4fr 6fr; column-gap: var(--space-20); } }
.faq details { border-bottom: var(--border-hairline); padding-block: var(--space-6); }
.faq details:first-child { border-top: var(--border-hairline); }
.faq summary {
  cursor: pointer; list-style: none;
  font-size: var(--text-24); font-weight: var(--weight-semibold); line-height: var(--leading-ui);
  display: flex; justify-content: space-between; gap: var(--space-6);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-mono); }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin-top: var(--space-4); max-width: var(--measure); }

/* ---------- Kontakt ---------- */
.contact { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-12); }
@media (min-width: 900px) { .contact { grid-template-columns: 5fr 6fr; column-gap: var(--space-20); } }
.contact__info { display: grid; gap: var(--space-6); align-content: start; }
.checks { display: grid; gap: var(--space-3); }
.checks li { padding-left: var(--space-8); position: relative; }
.checks li::before { content: "><>"; position: absolute; left: 0; top: var(--space-1); font-family: var(--font-mono); font-size: var(--text-12); line-height: var(--leading-body); }
.form {
  display: grid; gap: var(--space-4);
  background: var(--color-surface-sunken);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
}
@media (min-width: 900px) { .form { grid-template-columns: 1fr 1fr; padding: var(--space-10); } }
.field { display: grid; gap: var(--space-2); min-width: 0; }
.field select { min-width: 0; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: var(--text-14); font-weight: var(--weight-semibold); }
.field input, .field select, .field textarea {
  font: inherit;
  color: var(--color-text);
  background: var(--color-canvas);
  border: var(--border-field);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  width: 100%;
}
.field textarea { min-height: var(--textarea-min-h); resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: var(--border-strong); outline-offset: 0; }
.consent { grid-column: 1 / -1; display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--text-14); line-height: var(--leading-ui); }
.consent input { margin-top: var(--space-1); }
.form .btn { grid-column: 1 / -1; justify-self: start; }
.hp { position: absolute; left: -9999px; }

/* ---------- Werkzeuge im KI-Block (Startseite) ---------- */
.ki-tools { margin-top: var(--space-12); display: grid; gap: var(--space-4); }
.ki-tools__links { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* ---------- KI und Datenschutz (ki-datenschutz.html) ---------- */
.ampel { display: grid; gap: var(--space-6); }
@media (min-width: 900px) { .ampel { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ampel__karte { border-radius: var(--radius-lg); padding: var(--space-7); display: grid; gap: var(--space-4); align-content: start; min-width: 0; overflow-wrap: break-word; }
@media (min-width: 900px) { .ampel__karte { padding: var(--space-10); } }
.ampel__karte--frei { background: var(--color-surface-water); }
.ampel__karte--vorsicht { background: var(--color-surface-sunken); }
.ampel__karte--tabu { background: var(--color-text); color: var(--color-canvas); }
.ampel__karte--tabu .ampel__stufe { color: var(--color-canvas); }
.ampel__stufe { font-family: var(--font-mono); font-size: var(--text-14); line-height: var(--leading-ui); color: var(--color-text-muted); }
.ampel__titel { font-size: var(--text-24); font-weight: var(--weight-semibold); line-height: var(--leading-heading); }
.ampel__karte ul { display: grid; gap: var(--space-2); padding-left: var(--space-6); }
.block { margin-top: var(--space-20); display: grid; gap: var(--space-8); }
.block > .head { margin-bottom: 0; }
.beispiel { display: grid; gap: var(--space-6); }
@media (min-width: 900px) { .beispiel { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.beispiel figure { margin: 0; display: grid; gap: var(--space-3); min-width: 0; }
.beispiel figcaption { font-family: var(--font-mono); font-size: var(--text-14); line-height: var(--leading-ui); color: var(--color-text-muted); }
.beispiel blockquote { margin: 0; padding: var(--space-6); border-radius: var(--radius-md); background: var(--color-surface-sunken); font-family: var(--font-mono); font-size: var(--text-14); line-height: var(--leading-body); overflow-wrap: break-word; }
.beispiel__neu blockquote { background: var(--color-surface-water); }
.ehrlich { border: var(--border-strong); border-radius: var(--radius-lg); padding: var(--space-7); display: grid; gap: var(--space-4); max-width: 72ch; }
@media (min-width: 900px) { .ehrlich { padding: var(--space-10); } }
.ehrlich ul { display: grid; gap: var(--space-2); padding-left: var(--space-6); }

/* ---------- Fuß ---------- */
.footer { padding-block: var(--space-12); border-top: var(--border-hairline); margin-top: var(--space-12); }
.footer__inner { display: flex; flex-wrap: wrap; gap: var(--space-6); justify-content: space-between; align-items: center; }
.footer__inner img { height: var(--logo-h-sm); width: auto; }
.footer nav { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); }

/* ---------- Unterseiten ---------- */
.legal { max-width: var(--measure); display: grid; gap: var(--space-6); padding-block: var(--space-16); }
.legal h2 { font-size: var(--text-24); font-weight: var(--weight-semibold); margin-top: var(--space-6); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

@media (max-width: 599px) {
  .reel__title { hyphens: manual; }
  .reel__text { background: var(--color-text); border-radius: var(--radius-lg); padding: var(--space-4); }
  .reel__links .btn--sm { padding-inline: var(--space-4); }
}