/* ==========================================================================
   Neuhaus Solutions – Design-System
   Schwarz, Weiß, Grau und genau ein Blau. Nur Systemschriften, keine
   externen Ressourcen, keine Inline-Styles nötig.
   Bausteine und HTML-Beispiele: siehe components.md
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Farb- und Form-Tokens
   Helles Set auf :root. Das dunkle Set gilt für dunkle Abschnitte, den
   Fußbereich und im Dunkelmodus für die ganze Seite.
   Alle Textpaare sind auf WCAG AA geprüft (Text 4,5:1, groß/Rahmen 3:1).
   -------------------------------------------------------------------------- */

:root {
  color-scheme: light dark;

  /* Flächen */
  --bg: #ffffff;
  --tile: #f4f4f4;
  --tile-2: #e8e8e8;
  --tint: #ecf2fd;

  /* Text */
  --ink: #161616;
  --ink-2: #5c5c5c;            /* Nebentext, auf allen Flächen >= 4,5:1 */
  --line: rgb(22 22 22 / 0.12);

  /* Akzent: einziges Blau, nur für Links, Fokus und kleine Hervorhebungen */
  --accent: #1652cc;
  --accent-ink: #ffffff;
  --focus: #1652cc;
  --glow: rgb(22 82 204 / 0.12);

  /* Knöpfe */
  --btn-bg: #161616;
  --btn-fg: #ffffff;
  --btn2-bg: #ebebeb;
  --btn2-hover: #dedede;
  --btn2-fg: #161616;

  /* Kopfzeile (Glas) und Menü-Abdunklung */
  --header-bg: rgb(255 255 255 / 0.92);
  --scrim: rgb(0 0 0 / 0.4);

  /* Produktbilder aus HTML/CSS (rein dekorativ) */
  --mock-bezel: #161616;
  --mock-edge: rgb(22 22 22 / 0.07);
  --mock-screen: #f4f4f4;
  --mock-card: #ffffff;
  --mock-fill: #ebebeb;
  --mock-ink: #161616;
  --mock-ink-2: #5c5c5c;
  --mock-line: rgb(22 22 22 / 0.08);
  --mock-shadow: 0 16px 64px rgb(22 22 22 / 0.12);

  /* Platzhalter: bewusst auffällig, verschwinden vor dem Start */
  --ph-bg: #fff3d0;
  --ph-line: #a35d00;
  --ph-ink: #161616;

  --sel-bg: #1652cc;
  --sel-fg: #ffffff;

  /* Form */
  --r-pill: 9999px;
  --r-sm: 12px;
  --r-md: 20px;
  --r-tile: 24px;
  --r-media: 28px;
  --r-sheet: 24px;

  /* Raster */
  --gutter: 16px;
  --max: 1080px;
  --header-h: 56px;
  --tile-pad: 24px;
  --section-y: clamp(3.5rem, 2.25rem + 5vw, 8rem);
  --head-gap: clamp(2rem, 1.25rem + 3vw, 3.5rem);

  /* Schrift */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-display: clamp(3rem, 1rem + 7vw, 8.5rem);
  --fs-h1: clamp(2.5rem, 1.6rem + 4.6vw, 5.5rem);
  --fs-h2: clamp(2.25rem, 1.45rem + 3.4vw, 5rem);
  --fs-h3: clamp(1.375rem, 1.2rem + 0.75vw, 1.875rem);
  --fs-h4: clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem);
  --fs-lead: clamp(1.125rem, 1rem + 0.55vw, 1.375rem);

  /* Bewegung */
  --ease: cubic-bezier(0.15, 0.5, 0.5, 1);
}

/* Dunkles Set: dunkle Abschnitte, Hero der Startseite, Fußbereich,
   Kontrast-Kachel */
.theme-dark,
.section-dark,
.hero-home,
.site-footer,
.tile--contrast {
  color-scheme: dark;

  --bg: #000000;
  --tile: #171717;
  --tile-2: #242424;
  --tint: #0e1a33;

  --ink: #f5f5f5;
  --ink-2: #a8a8a8;
  --line: rgb(255 255 255 / 0.14);

  --accent: #80abff;
  --accent-ink: #000000;
  --focus: #80abff;
  --glow: rgb(128 171 255 / 0.14);

  --btn-bg: #ffffff;
  --btn-fg: #000000;
  --btn2-bg: #262626;
  --btn2-hover: #333333;
  --btn2-fg: #f5f5f5;

  --header-bg: rgb(0 0 0 / 0.82);
  --scrim: rgb(0 0 0 / 0.6);

  --mock-bezel: #2b2b2b;
  --mock-edge: rgb(255 255 255 / 0.14);
  --mock-screen: #0b0b0b;
  --mock-card: #1c1c1c;
  --mock-fill: #2a2a2a;
  --mock-ink: #f5f5f5;
  --mock-ink-2: #a8a8a8;
  --mock-line: rgb(255 255 255 / 0.1);
  --mock-shadow: 0 16px 64px rgb(0 0 0 / 0.5);

  --ph-bg: #2f2406;
  --ph-line: #e5a83a;
  --ph-ink: #f5f5f5;

  --sel-bg: #80abff;
  --sel-fg: #000000;
}

/* Kopfzeile der Startseite: schwarz wie der Hero darunter, auch beim
   Scrollen. Deckend statt Glas, weil hinter der Kopfzeile oben noch der
   weiße Seitenhintergrund liegt (sonst entstünde ein grauer Streifen).
   Eigene Regel, damit Browser ohne :has() nur diese Regel verwerfen und
   die Kopfzeile hell bleibt. Werte wie im dunklen Set. */
body:has(.hero-home) .site-header {
  color-scheme: dark;

  --bg: #000000;
  --tile: #171717;
  --tile-2: #242424;
  --ink: #f5f5f5;
  --ink-2: #a8a8a8;
  --line: rgb(255 255 255 / 0.14);
  --accent: #80abff;
  --focus: #80abff;
  --btn-bg: #ffffff;
  --btn-fg: #000000;
  --btn2-bg: #262626;
  --btn2-hover: #333333;
  --btn2-fg: #f5f5f5;
  --header-bg: #000000;
  --scrim: rgb(0 0 0 / 0.6);
  --sel-bg: #80abff;
  --sel-fg: #000000;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --tile: #171717;
    --tile-2: #242424;
    --tint: #0e1a33;

    --ink: #f5f5f5;
    --ink-2: #a8a8a8;
    --line: rgb(255 255 255 / 0.14);

    --accent: #80abff;
    --accent-ink: #000000;
    --focus: #80abff;
    --glow: rgb(128 171 255 / 0.14);

    --btn-bg: #ffffff;
    --btn-fg: #000000;
    --btn2-bg: #262626;
    --btn2-hover: #333333;
    --btn2-fg: #f5f5f5;

    --header-bg: rgb(0 0 0 / 0.82);
    --scrim: rgb(0 0 0 / 0.6);

    --mock-bezel: #2b2b2b;
    --mock-edge: rgb(255 255 255 / 0.14);
    --mock-screen: #0b0b0b;
    --mock-card: #1c1c1c;
    --mock-fill: #2a2a2a;
    --mock-ink: #f5f5f5;
    --mock-ink-2: #a8a8a8;
    --mock-line: rgb(255 255 255 / 0.1);
    --mock-shadow: 0 16px 64px rgb(0 0 0 / 0.5);

    --ph-bg: #2f2406;
    --ph-line: #e5a83a;
    --ph-ink: #f5f5f5;

    --sel-bg: #80abff;
    --sel-fg: #000000;
  }

  /* Dunkle Abschnitte und Fußbereich heben sich im Dunkelmodus deutlich
     vom Schwarz ab, damit Wechsel und Ecken sichtbar bleiben */
  .section-dark,
  .site-footer {
    --bg: #161616;
    --tile: #232323;
    --tile-2: #2e2e2e;
    --btn2-bg: #2e2e2e;
    --btn2-hover: #3a3a3a;
  }

  /* Kontrast-Kachel im Dunkelmodus: angehobenes Dunkelgrau statt Weiß */
  .tile--contrast {
    --bg: #2a2a2a;
    --tile: #333333;
    --tile-2: #3d3d3d;
    --btn2-bg: #3d3d3d;
    --btn2-hover: #474747;
  }
}

@media (min-width: 37.5em) {
  :root { --gutter: 24px; }
}

@media (min-width: 52.5em) {
  :root {
    --gutter: 32px;
    --tile-pad: 32px;
    --r-tile: 28px;
    --r-media: 32px;
    --r-sheet: 32px;
  }
}

@media (min-width: 64em) {
  :root { --header-h: 72px; }
}

@media (min-width: 75em) {
  :root {
    --tile-pad: 40px;
    --r-sheet: 40px;
  }
}

@media (min-width: 100em) {
  :root { --max: 1240px; }
}

@media (min-width: 120em) {
  :root { --max: 1400px; }
}


/* --------------------------------------------------------------------------
   2. Grundlagen
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.55;
  letter-spacing: -0.01em;
  overflow-wrap: break-word;
  /* Fließtext wird nicht automatisch getrennt; nur Überschriften (siehe 3.) */
  hyphens: manual;
  -webkit-hyphens: manual;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media (min-width: 75em) {
  body { font-size: 1.125rem; }
}

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

::selection {
  background: var(--sel-bg);
  color: var(--sel-fg);
}

p,
ul,
ol,
dl {
  margin: 0 0 1em;
}

p {
  text-wrap: pretty;
}

strong,
b {
  font-weight: 600;
}

sup {
  font-size: 0.6em;
  line-height: 0;
  vertical-align: super;
}

a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

[tabindex="-1"]:focus {
  outline: none;
}

/* Für Screenreader lesbar, sonst unsichtbar */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: 8px;
  left: 16px;
  z-index: 200;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 20px;
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform 0.2s var(--ease);
}

.skip-link:focus {
  transform: none;
}


/* --------------------------------------------------------------------------
   3. Schrift
   Element-Standards ohne Gewicht (:where), damit Klassen sie überschreiben.
   -------------------------------------------------------------------------- */

:where(h1, h2, h3, h4) {
  margin: 0 0 0.5em;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: pretty;
  hyphens: auto;
  -webkit-hyphens: auto;
}

:where(h1) {
  font-size: var(--fs-h1);
  line-height: 1.02;
  letter-spacing: -0.03em;
}

:where(h2) {
  font-size: var(--fs-h2);
  line-height: 1.04;
  letter-spacing: -0.03em;
}

:where(h3) {
  font-size: var(--fs-h3);
  line-height: 1.15;
}

:where(h4) {
  font-size: var(--fs-h4);
  line-height: 1.25;
  letter-spacing: -0.015em;
}

.lead {
  max-width: 36rem;
  font-size: var(--fs-lead);
  line-height: 1.45;
  letter-spacing: -0.015em;
}

.muted {
  color: var(--ink-2);
}

.fine {
  color: var(--ink-2);
  font-size: 0.875rem;
  line-height: 1.5;
  letter-spacing: 0;
}

.label {
  margin: 0 0 12px;
  color: var(--ink-2);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.measure {
  max-width: 38rem;
}

.center {
  text-align: center;
}


/* --------------------------------------------------------------------------
   4. Raster und Abschnitte
   -------------------------------------------------------------------------- */

.container {
  width: min(var(--max), 100% - 2 * var(--gutter));
  margin-inline: auto;
}

.container--narrow {
  width: min(48rem, 100% - 2 * var(--gutter));
}

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

/* Zwei helle Abschnitte hintereinander: Abstand nur einmal */
.section:not(.section-dark) + .section:not(.section-dark),
.page-hero + .section:not(.section-dark),
.section-dark + .section-dark {
  padding-top: 0;
}

/* Bögen: Ein Abschnitt, der die Farbe wechselt, schiebt sich mit runden
   oberen Ecken über den vorherigen (Hero → hell, hell → dunkel,
   dunkel → hell, letzter Abschnitt → Fußbereich). Der überdeckte
   Abschnitt bekommt unten den Eckradius als Zusatzabstand. */
.section-dark {
  position: relative;
  z-index: 1;
  margin-top: calc(var(--r-sheet) * -1);
  border-radius: var(--r-sheet) var(--r-sheet) 0 0;
  background: var(--bg);
  color: var(--ink);
}

.section-dark:first-child {
  margin-top: 0;
}

.hero-home + .section,
.section-dark + .section:not(.section-dark) {
  position: relative;
  z-index: 1;
  margin-top: calc(var(--r-sheet) * -1);
  border-radius: var(--r-sheet) var(--r-sheet) 0 0;
  background: var(--bg);
}

.section-dark,
main > .section:last-child {
  padding-bottom: calc(var(--section-y) + var(--r-sheet));
}

.section-head {
  max-width: 48rem;
  margin-bottom: var(--head-gap);
}

.section-head > :last-child {
  margin-bottom: 0;
}

.section-head :where(h2, h3) + .lead,
.section-head :where(h2, h3) + p {
  margin-top: 16px;
}

.section-head .actions {
  margin-top: 28px;
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.section-head--center :where(h2, h3),
.section-head--center .lead {
  margin-inline: auto;
}

.section-head--center .actions {
  justify-content: center;
}

/* Zentrierte Überschriften gleichmäßig umbrechen */
.section-head--center :where(h2, h3),
.page-hero--center :where(h1),
.closing :where(h2) {
  text-wrap: balance;
}

/* Inhalt links, Bild rechts (oder umgekehrt). Nie Text neben Text. */
.split {
  display: grid;
  gap: 32px;
  align-items: center;
}

.split > * {
  min-width: 0;
}

@media (min-width: 52.5em) {
  .split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(32px, 6vw, 96px);
  }

  .split--reverse > :first-child {
    order: 2;
  }
}


/* --------------------------------------------------------------------------
   5. Knöpfe und Links
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 24px;
  border: 0;
  border-radius: var(--r-pill);
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.3s var(--ease), background-color 0.3s var(--ease);
}

.btn-primary {
  background: var(--btn-bg);
  color: var(--btn-fg);
}

.btn-primary:hover {
  opacity: 0.85;
}

.btn-primary:active {
  opacity: 0.75;
}

.btn-secondary {
  background: var(--btn2-bg);
  color: var(--btn2-fg);
}

.btn-secondary:hover {
  background: var(--btn2-hover);
}

.btn-lg {
  min-height: 56px;
  padding: 16px 32px;
  font-size: 1.0625rem;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  margin-top: 32px;
}

.actions > p {
  margin: 0;
}

/* Auf dem Smartphone volle Breite, wie in Apps */
@media (max-width: 37.49em) {
  .actions > .btn {
    width: 100%;
  }
}

/* Einzelner Textlink mit Pfeil, z. B. „Mehr zum Website-Check“ */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  min-height: 44px;
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}

.link-arrow::after {
  content: "";
  flex: none;
  width: 0.45em;
  height: 0.45em;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.3s var(--ease);
}

.link-arrow:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

.link-arrow:hover::after {
  transform: translateX(4px) rotate(45deg);
}


/* --------------------------------------------------------------------------
   6. Kopfzeile und Menü
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  isolation: isolate;
}

/* Glas-Hintergrund als eigene Ebene */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--bg);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .site-header::before {
    background: var(--header-bg);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
  }
}

.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 16px;
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
  font-size: 1.125rem;
  font-weight: 650;
  letter-spacing: -0.03em;
  text-decoration: none;
  white-space: nowrap;
}

.brand:hover {
  opacity: 0.75;
}

/* Logo-Kachel vor dem Schriftzug. Feine Kante, damit die schwarze Kachel
   auch auf schwarzer Kopfzeile und im Dunkelmodus sichtbar bleibt. */
.brand {
  gap: 10px;
}

.brand-logo {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 23%;
  box-shadow: 0 0 0 1px var(--line);
}

@media (min-width: 64em) {
  .brand-logo {
    width: 36px;
    height: 36px;
  }
}

.nav-toggle {
  display: none;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 18px 0 16px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--btn2-bg);
  color: var(--btn2-fg);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.nav-toggle:hover {
  background: var(--btn2-hover);
}

.nav-toggle-icon {
  position: relative;
  width: 16px;
  height: 10px;
}

.nav-toggle-icon::before,
.nav-toggle-icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.3s var(--ease), top 0.3s var(--ease);
}

.nav-toggle-icon::before { top: 1px; }
.nav-toggle-icon::after { top: 7px; }

.nav-toggle[aria-expanded="true"] .nav-toggle-icon::before {
  top: 4px;
  transform: rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-icon::after {
  top: 4px;
  transform: rotate(-45deg);
}

.nav-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-link {
  display: flex;
  align-items: center;
  min-height: 44px;
  border-radius: var(--r-pill);
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}

/* Aktuelle Seite: unterstrichen wie im Fußbereich, keine Farbfläche */
.nav-link[aria-current="page"] {
  background: none;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.35em;
}

.nav-link:hover,
.nav-link[aria-current="page"]:hover {
  background: var(--tile);
  color: var(--ink);
}

/* Smartphone und Tablet: Menü als großes Feld unter der Kopfzeile.
   Ohne JavaScript steht das Menü einfach sichtbar im Kopfbereich. */
@media (max-width: 63.99em) {
  html:not(.js) .site-header {
    position: relative;
  }

  .site-nav {
    flex-basis: 100%;
    padding: 8px 0 24px;
  }

  .js .nav-toggle {
    display: inline-flex;
  }

  .js .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    max-height: calc(100vh - var(--header-h));
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 8px var(--gutter) 24px;
    border-radius: 0 0 var(--r-media) var(--r-media);
    background: var(--bg);
  }

  .js .nav-toggle[aria-expanded="true"] + .site-nav {
    display: block;
  }

  /* Abgedunkelte Seite unter dem offenen Menü; ein Klick darauf schließt es */
  .js .site-header:has(.nav-toggle[aria-expanded="true"])::after {
    content: "";
    position: fixed;
    inset: var(--header-h) 0 0;
    z-index: -1;
    background: var(--scrim);
  }

  .nav-list {
    display: grid;
    gap: 2px;
  }

  .nav-link {
    min-height: 56px;
    margin-inline: -12px;
    padding: 6px 12px;
    font-size: clamp(1.5rem, 1.25rem + 1.25vw, 2rem);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.03em;
  }

  /* Fokusring innerhalb der Fläche, damit der Panelrand ihn nicht abschneidet */
  .nav-link:focus-visible {
    outline-offset: -3px;
  }

  .nav-cta {
    width: 100%;
    min-height: 56px;
    margin-top: 20px;
    font-size: 1.0625rem;
  }
}

/* Desktop: alles in einer Zeile */
@media (min-width: 64em) {
  .header-inner {
    flex-wrap: nowrap;
  }

  .site-nav {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .nav-list {
    display: flex;
    gap: 2px;
  }

  .nav-link {
    padding: 0 12px;
    font-size: 0.9375rem;
    white-space: nowrap;
  }

  .nav-cta {
    min-height: 44px;
    padding: 0 20px;
    font-size: 0.9375rem;
    white-space: nowrap;
  }
}

@media (min-width: 75em) {
  .nav-link {
    padding: 0 16px;
  }
}


/* --------------------------------------------------------------------------
   7. Hero der Startseite (dunkel) und Kopf der Unterseiten
   -------------------------------------------------------------------------- */

/* Schwarze Bühne ohne Farbverlauf; der nächste Abschnitt schiebt sich
   mit runden Ecken darüber (siehe 4.) */
.hero-home {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-top: clamp(3rem, 2rem + 5vw, 5rem);
  background: var(--bg);
  color: var(--ink);
}

.hero-home-inner {
  display: grid;
  flex: 1;
  gap: 40px;
}

.hero-home-copy {
  min-width: 0;
}

.hero-home .lead {
  margin-top: 20px;
}

.hero-home-visual {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  height: clamp(300px, 60vw + 120px, 440px);
  --phone-w: 240px;
}

@media (min-width: 52.5em) {
  .hero-home {
    min-height: max(600px, calc(100vh - var(--header-h)));
    min-height: max(600px, calc(100svh - var(--header-h)));
  }

  .hero-home-inner {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    align-items: end;
    gap: 48px;
  }

  .hero-home-copy {
    padding-bottom: calc(clamp(3rem, 1rem + 5vw, 6rem) + var(--r-sheet));
  }

  .hero-home-visual {
    height: clamp(440px, 56vh, 600px);
    --phone-w: clamp(260px, 22vw, 320px);
  }
}

.page-hero {
  padding-top: clamp(2.5rem, 1.5rem + 5vw, 6.5rem);
  padding-bottom: var(--section-y);
}

.page-hero h1 {
  max-width: 20ch;
  margin-bottom: 0;
}

.page-hero .lead {
  margin-top: 24px;
  margin-bottom: 0;
}

.page-hero-media {
  margin-top: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
}

/* Rechtstexte und 404: Inhalt folgt mit kleinerem Abstand */
.page-hero--compact {
  padding-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}

.page-hero--center {
  text-align: center;
}

.page-hero--center h1,
.page-hero--center .lead {
  margin-inline: auto;
}

.page-hero--center .actions {
  justify-content: center;
}

@media (min-width: 52.5em) {
  .page-hero--split .container {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 48px;
    align-items: center;
  }

  .page-hero--split .page-hero-media {
    margin-top: 0;
  }

  .page-hero--split h1 {
    font-size: clamp(2.5rem, 1.4rem + 3.4vw, 4.5rem);
  }
}

/* Preis direkt neben dem Hauptknopf */
.price-line {
  color: var(--ink-2);
  font-size: 1rem;
}

.price-line strong {
  color: var(--ink);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
}


/* --------------------------------------------------------------------------
   8. Kacheln, Bento-Raster, Bildflächen
   -------------------------------------------------------------------------- */

.bento {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 52.5em) {
  .bento { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .span-4 { grid-column: span 4; }
  .span-5 { grid-column: span 5; }
  .span-6 { grid-column: span 6; }
  .span-7 { grid-column: span 7; }
  .span-8 { grid-column: span 8; }
  .span-12 { grid-column: 1 / -1; }
}

@media (min-width: 75em) {
  .bento { gap: 24px; }
}

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--tile-pad);
  overflow: hidden;
  border-radius: var(--r-tile);
  background: var(--tile);
  color: var(--ink);
  container-type: inline-size;
}

.tile > :last-child {
  margin-bottom: 0;
}

.tile :where(h2, h3, h4) {
  font-size: var(--fs-h3);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 0.4em;
}

.tile :where(p) {
  color: var(--ink-2);
}

.tile--tall {
  min-height: clamp(440px, 30vw + 240px, 580px);
}

.tile--contrast {
  background: var(--bg);
}

.tile--tint {
  background:
    radial-gradient(70% 60% at 70% 100%, var(--glow), transparent 70%),
    var(--tint);
}

/* Textblock in breiten Kacheln (.tile--row) */
.tile-body {
  min-width: 0;
}

.tile-body > :last-child {
  margin-bottom: 0;
}

/* Ganze Kachel klickbar, Link bleibt der Titel */
.tile-link {
  color: inherit;
  text-decoration: none;
}

.tile-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: var(--r-tile);
}

.tile-link:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.15em;
}

.tile-link:focus-visible {
  outline: none;
}

.tile-link:focus-visible::after {
  outline: 3px solid var(--focus);
  outline-offset: -4px;
}

/* Riesige Zahl in einer Kachel, z. B. der Preis */
.tile-figure {
  display: block;
  margin: 16px 0 12px;
  color: var(--ink);
  font-size: clamp(3.5rem, 2.5rem + 5vw, 7rem);
  font-size: clamp(3rem, 24cqi, 7rem);
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tile-figure small {
  margin-right: 0.15em;
  font-size: 0.32em;
  letter-spacing: -0.01em;
}

/* Bildbereich am unteren Rand der Kachel, wird bewusst angeschnitten */
.tile-visual {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  height: var(--visual-h, 260px);
  margin: auto calc(var(--tile-pad) * -1) calc(var(--tile-pad) * -1);
  padding-top: 32px;
  overflow: hidden;
  --phone-w: 220px;
}

.tile--tall .tile-visual {
  --visual-h: 300px;
}

.tile-visual--right {
  justify-content: flex-start;
  padding-left: var(--tile-pad);
}

/* Rechts angeschnitten statt verkleinert */
.tile-visual--right .browser {
  max-width: none;
}

@media (min-width: 52.5em) {
  .tile--tall .tile-visual {
    --visual-h: 340px;
  }

  /* Breite Kachel: Text links, Bild rechts */
  .tile--row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    gap: 32px;
    min-height: 420px;
  }

  .tile--row .tile-visual {
    height: auto;
    margin: calc(var(--tile-pad) * -1) calc(var(--tile-pad) * -1) calc(var(--tile-pad) * -1) 0;
    padding-top: var(--tile-pad);
  }
}

/* Große Bildfläche für ein Produktbild */
.media {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  height: var(--media-h, clamp(360px, 40vw + 220px, 560px));
  padding-top: clamp(32px, 4vw, 56px);
  overflow: hidden;
  border-radius: var(--r-media);
  background: var(--tile);
  --phone-w: clamp(220px, 70vw - 24px, 280px);
}

.media--glow {
  background:
    radial-gradient(60% 55% at 50% 100%, var(--glow), transparent 75%),
    var(--tile);
}

.media--tint {
  background:
    radial-gradient(60% 55% at 50% 100%, var(--glow), transparent 75%),
    var(--tint);
}

.media--center {
  align-items: center;
  padding-top: 0;
}

/* Echtes Foto (Inhaber, Werkstatt, Büro), füllt die Fläche */
.media--photo {
  padding: 0;
}

.media--photo > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media + :is(p, .actions) {
  margin-top: 24px;
}


/* --------------------------------------------------------------------------
   9. Produktbilder aus HTML/CSS (immer aria-hidden="true", keine Zahlen)
   -------------------------------------------------------------------------- */

/* Gemeinsame Textbasis für alle Attrappen */
.phone,
.doc,
.browser,
.flow,
.toasts {
  color: var(--mock-ink);
  font-size: 13px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-align: left;
  hyphens: none;
  -webkit-hyphens: none;
  user-select: none;
}

.phone :where(p),
.doc :where(p),
.browser :where(p),
.flow :where(p),
.toasts :where(p) {
  margin: 0;
  color: inherit;
}

/* Smartphone. Inhalt skaliert mit der Breite (--phone-w), alle Maße in em. */
.phone {
  flex: none;
  width: var(--phone-w, 280px);
  aspect-ratio: 9 / 19.5;
  padding: calc(var(--phone-w, 280px) * 0.03);
  border-radius: calc(var(--phone-w, 280px) * 0.155);
  background: var(--mock-bezel);
  box-shadow: 0 0 0 1px var(--mock-edge), var(--mock-shadow);
  container-type: inline-size;
}

.phone-screen {
  display: flex;
  flex-direction: column;
  gap: 0.923em;
  height: 100%;
  padding: 0.77em 1.077em;
  overflow: hidden;
  border-radius: calc(var(--phone-w, 280px) * 0.125);
  background: var(--mock-screen);
  font-size: 13px;
  font-size: 4.61cqi;
}

.phone-top {
  display: flex;
  justify-content: center;
  flex: none;
}

.phone-top::before {
  content: "";
  width: 6.46em;
  height: 1.846em;
  border-radius: var(--r-pill);
  background: #000000;
}

.app-head {
  display: flex;
  align-items: center;
  gap: 0.615em;
}

.app-avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.727em;
  height: 2.727em;
  border-radius: 50%;
  background: var(--mock-ink);
  color: var(--mock-screen);
  font-size: 0.846em;
  font-weight: 700;
}

.app-search {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  height: 2.5em;
  padding: 0 1em;
  overflow: hidden;
  border-radius: var(--r-pill);
  background: var(--mock-fill);
  color: var(--mock-ink-2);
  font-size: 0.923em;
  white-space: nowrap;
}

.app-title {
  margin-top: 0.25em;
  font-size: 1.846em;
  font-weight: 650;
  line-height: 1.05;
  letter-spacing: -0.035em;
}

.app-sub {
  color: var(--mock-ink-2);
  font-size: 0.923em;
}

/* Umschalter wie in Apps */
.app-seg {
  display: flex;
  gap: 0.18em;
  padding: 0.27em;
  border-radius: var(--r-pill);
  background: var(--mock-fill);
  font-size: 0.846em;
  font-weight: 600;
}

.app-seg span {
  flex: 1;
  padding: 0.45em 0;
  border-radius: var(--r-pill);
  color: var(--mock-ink-2);
  text-align: center;
}

.app-seg .is-active {
  background: var(--mock-card);
  color: var(--mock-ink);
}

.app-card {
  padding: 0.15em 0.923em;
  border-radius: 1.385em;
  background: var(--mock-card);
}

.app-row {
  display: grid;
  grid-template-columns: 2.31em minmax(0, 1fr) auto;
  gap: 0.77em;
  align-items: center;
  padding: 0.77em 0;
}

.app-row + .app-row {
  border-top: 1px solid var(--mock-line);
}

.app-icon {
  display: grid;
  place-items: center;
  width: 2.31em;
  height: 2.31em;
  border-radius: 50%;
  background: var(--mock-fill);
  color: var(--mock-ink);
}

.app-icon svg {
  width: 1.23em;
  height: 1.23em;
}

.app-icon svg,
.flow-icon svg,
.toast-icon svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.flow-icon svg,
.toast-icon svg {
  width: 16px;
  height: 16px;
}

.app-text {
  min-width: 0;
}

.app-text b,
.flow-text b,
.toast-text b {
  display: block;
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-text small,
.flow-text small,
.toast-text small {
  display: block;
  overflow: hidden;
  color: var(--mock-ink-2);
  font-size: 0.846em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Status-Chips, nur innerhalb von Attrappen */
.chip {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border-radius: var(--r-pill);
  background: var(--mock-fill);
  color: var(--mock-ink);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.chip--ink {
  background: var(--mock-ink);
  color: var(--mock-screen);
}

.chip--accent {
  background: var(--accent);
  color: var(--accent-ink);
}

.chip--line {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--mock-ink-2);
}

.phone .chip {
  height: 2em;
  padding: 0 0.82em;
  font-size: 0.846em;
}

/* Bericht (PDF-Seite), auf Wunsch als Fächer mit zweitem Blatt.
   Das hintere Blatt ragt bis 54px nach rechts heraus; die Höchstbreite
   verhindert seitliches Scrollen, falls es außerhalb einer Bildfläche steht. */
.doc-stack {
  position: relative;
  flex: none;
  width: var(--doc-w, 280px);
  max-width: calc(100% - 56px);
  aspect-ratio: 1 / 1.3;
}

/* Rechts angeschnitten statt verkleinert */
.tile-visual--right .doc-stack {
  max-width: none;
}

.doc {
  position: absolute;
  inset: 0;
  padding: 22px 20px;
  overflow: hidden;
  border-radius: 16px;
  background: var(--mock-card);
  box-shadow: 0 0 0 1px var(--mock-edge), var(--mock-shadow);
  font-size: 11px;
  transform: rotate(-3deg);
}

.doc--back {
  transform: rotate(5deg) translate(22px, -6px);
}

.doc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  color: var(--mock-ink-2);
  font-size: 10px;
  font-weight: 600;
}

.doc-title {
  margin-bottom: 2px;
  font-size: 20px;
  font-weight: 650;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.doc-meta {
  margin-bottom: 14px;
  color: var(--mock-ink-2);
}

/* Mini-Screenshot: kleine Seite mit echtem Text, der Knopf ist markiert */
.doc-shot {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 72px;
  margin-bottom: 14px;
  padding: 10px 12px;
  overflow: hidden;
  border-radius: 10px;
  background: var(--mock-fill);
  font-size: 12px;
}

.doc-shot-btn {
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--mock-ink);
  color: var(--mock-card);
  font-size: 10px;
  font-weight: 600;
  box-shadow: 0 0 0 3px var(--mock-fill), 0 0 0 5px var(--accent);
}

.doc-h {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 10px 0 3px;
  font-weight: 650;
}

.doc-h::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mock-ink);
}

.doc-h--soft::before {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--mock-ink-2);
}

.doc-item {
  color: var(--mock-ink-2);
}

/* Browserfenster mit Mini-Website */
.browser {
  flex: none;
  width: var(--browser-w, 560px);
  max-width: calc(100% - 32px);
  overflow: hidden;
  border-radius: 14px;
  background: var(--mock-card);
  box-shadow: 0 0 0 1px var(--mock-edge), var(--mock-shadow);
  font-size: 12px;
}

.browser-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 36px;
  padding: 0 12px;
  background: var(--mock-fill);
}

.browser-url {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  max-width: 260px;
  height: 22px;
  margin-inline: auto;
  padding: 0 10px;
  border-radius: var(--r-pill);
  background: var(--mock-card);
  color: var(--mock-ink-2);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
}

.browser-page {
  min-height: 480px;
  padding: 18px 22px 28px;
}

.site-mock-nav {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
  color: var(--mock-ink-2);
  font-size: 11px;
}

.site-mock-nav b {
  margin-right: auto;
  color: var(--mock-ink);
  font-size: 13px;
  font-weight: 650;
}

.site-mock-title {
  max-width: 12ch;
  margin-bottom: 14px;
  font-size: 32px;
  font-weight: 650;
  line-height: 1.02;
  letter-spacing: -0.04em;
}

.site-mock-btn {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 14px;
  border-radius: var(--r-pill);
  background: var(--mock-ink);
  color: var(--mock-card);
  font-size: 11px;
  font-weight: 600;
}

.site-mock-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 22px;
}

.site-mock-tiles span {
  display: flex;
  align-items: flex-end;
  min-height: 84px;
  padding: 10px;
  border-radius: 10px;
  background: var(--mock-fill);
  font-size: 11px;
  font-weight: 600;
}

/* Automatisierung: drei Schritte untereinander, ohne Verbindungslinie.
   Nur die feine Kante (wie bei allen Attrappen), kein Schatten. */
.flow {
  display: grid;
  flex: none;
  gap: 10px;
  width: min(340px, 100% - 32px);
}

.flow-step {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: var(--mock-card);
  box-shadow: 0 0 0 1px var(--mock-edge);
}

.flow-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--mock-fill);
  color: var(--mock-ink);
}

.flow-step--done .flow-icon {
  background: var(--accent);
  color: var(--accent-ink);
}

.flow-text {
  min-width: 0;
}

/* Benachrichtigungen, leicht gestaffelt */
.toasts {
  display: grid;
  flex: none;
  gap: 10px;
  width: min(360px, 100% - 32px);
}

.toast {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
  border-radius: var(--r-md);
  background: var(--mock-card);
  box-shadow: 0 0 0 1px var(--mock-edge), 0 14px 28px rgb(0 0 0 / 0.05), 0 8px 16px rgb(0 0 0 / 0.04);
}

.toast:nth-child(2) { transform: scale(0.96); }
.toast:nth-child(3) { transform: scale(0.92); }

.toast-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 25%;
  background: var(--mock-ink);
  color: var(--mock-card);
}

.toast-text {
  min-width: 0;
}

.toast-time {
  align-self: start;
  color: var(--mock-ink-2);
  font-size: 11px;
}


/* --------------------------------------------------------------------------
   10. Inhaltsbausteine: Prüfpunkte, Schritte, Kennzahlen, Aussage
   -------------------------------------------------------------------------- */

/* Prüfpunkte: ein großes Wort, ein Satz. Ab 840px im Bento-Rhythmus
   7 + 5, 5 + 7 (gerade Anzahl verwenden: 4 oder 6). */
.points {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 37.5em) {
  .points { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 52.5em) {
  .points { grid-template-columns: repeat(12, minmax(0, 1fr)); }

  .point:nth-child(4n+1),
  .point:nth-child(4n+4) {
    grid-column: span 7;
  }

  .point:nth-child(4n+2),
  .point:nth-child(4n+3) {
    grid-column: span 5;
  }
}

@media (min-width: 75em) {
  .points { gap: 24px; }
}

.point {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: clamp(220px, 12vw + 160px, 300px);
  padding: var(--tile-pad);
  border-radius: var(--r-tile);
  background: var(--tile);
}

.point :where(h2, h3, h4) {
  margin-bottom: auto;
  padding-bottom: 24px;
  font-size: clamp(1.75rem, 1.35rem + 1.4vw, 2.5rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
}

.point :where(p) {
  margin: 0;
  color: var(--ink-2);
}

/* Smartphone: kompakt, ohne Leerraum in der Kachel */
@media (max-width: 37.49em) {
  .point {
    min-height: 0;
  }

  .point :where(h2, h3, h4) {
    padding-bottom: 12px;
  }
}

/* Ablauf mit großen Ziffern 1 2 3 */
.steps {
  display: grid;
  gap: 48px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

@media (min-width: 52.5em) {
  .steps {
    grid-template-columns: repeat(var(--steps, 3), minmax(0, 1fr));
    gap: 32px;
  }

  .steps--2 { --steps: 2; }
  .steps--4 { --steps: 4; }
}

.steps > li {
  min-width: 0;
  counter-increment: step;
}

.steps > li::before {
  content: counter(step);
  display: block;
  margin-bottom: 16px;
  color: var(--ink);
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.steps :where(h2, h3, h4) {
  font-size: var(--fs-h3);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 0.4em;
}

.steps :where(p) {
  margin: 0;
  color: var(--ink-2);
}

/* Echte Eckdaten des Angebots: große Zahl, kleine Beschriftung */
.figures {
  display: grid;
  gap: 32px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 30em) {
  .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 52.5em) {
  .figures {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
}

.figure {
  display: block;
  font-size: clamp(2.5rem, 1.9rem + 3vw, 4.5rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.figure-label {
  display: block;
  margin-top: 10px;
  color: var(--ink-2);
  font-size: 0.9375rem;
}

/* Ein großer Satz über die ganze Breite */
.statement {
  max-width: 22ch;
  margin: 0;
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-wrap: pretty;
  hyphens: auto;
  -webkit-hyphens: auto;
}


/* --------------------------------------------------------------------------
   11. Preis, Hinweis
   -------------------------------------------------------------------------- */

.price-block {
  display: grid;
  gap: 32px;
  padding: clamp(1.5rem, 1rem + 3vw, 3.5rem);
  border-radius: var(--r-media);
  background: var(--tile);
}

@media (min-width: 52.5em) {
  .price-block {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    align-items: end;
  }
}

.price-block > * {
  min-width: 0;
}

.price-block :where(h2, h3, h4) {
  font-size: var(--fs-h3);
  letter-spacing: -0.02em;
}

.price {
  margin: 0;
  font-size: clamp(4rem, 3rem + 7vw, 10rem);
  font-weight: 600;
  line-height: 0.9;
  letter-spacing: -0.055em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.price-from {
  margin-right: 0.15em;
  font-size: 0.28em;
  letter-spacing: -0.01em;
}

.price-note {
  margin: 16px 0 0;
  color: var(--ink-2);
  font-size: 1.125rem;
}

.price-block .actions {
  margin-top: 28px;
}

/* Ruhiger Hinweis ohne Kasten, z. B. „ersetzt keine Rechtsberatung“ */
.notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 40rem;
  margin: 24px 0 0;
  color: var(--ink-2);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.notice strong {
  color: var(--ink);
}

.notice-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
}


/* --------------------------------------------------------------------------
   12. Häufige Fragen
   -------------------------------------------------------------------------- */

.faq {
  max-width: 52rem;
  border-top: 1px solid var(--line);
}

.faq details {
  border-bottom: 1px solid var(--line);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 72px;
  padding: 18px 0;
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
  list-style: none;
  cursor: pointer;
}

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

/* Plus, geöffnet Minus */
.faq summary::after {
  content: "";
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--tile);
  background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 14px 2px, 2px 14px;
  transition: background-color 0.2s var(--ease);
}

.faq summary:hover::after {
  background-color: var(--tile-2);
}

.faq details[open] summary::after {
  background-size: 14px 2px, 0 0;
}

.faq-answer {
  max-width: 44rem;
  padding: 0 64px 28px 0;
}

.faq-answer > :last-child {
  margin-bottom: 0;
}


/* --------------------------------------------------------------------------
   13. Linkzeilen, Kontakt
   -------------------------------------------------------------------------- */

.link-rows {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.link-rows li {
  border-bottom: 1px solid var(--line);
}

.link-rows a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 72px;
  padding: 16px 4px 16px 0;
  color: var(--ink);
  font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.75rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.025em;
  text-decoration: none;
}

.link-rows a::after {
  content: "";
  flex: none;
  width: 11px;
  height: 11px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.3s var(--ease);
}

.link-rows a:hover span {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.15em;
}

.link-rows a:hover::after {
  transform: translateX(4px) rotate(45deg);
}

.link-rows small {
  display: block;
  margin-top: 4px;
  color: var(--ink-2);
  font-size: 0.9375rem;
  font-weight: 400;
  letter-spacing: -0.01em;
}

/* Riesige E-Mail-Adresse, bricht auf schmalen Bildschirmen um */
.mail-xl {
  display: inline-block;
  max-width: 100%;
  min-height: 44px;
  color: var(--ink);
  font-size: clamp(2rem, 1.2rem + 4.2vw, 4.75rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.04em;
  text-decoration: underline;
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.12em;
  overflow-wrap: anywhere;
  hyphens: none;
  -webkit-hyphens: none;
}

.mail-xl:hover {
  color: var(--accent);
}

.contact-block .label + .mail-xl {
  margin-top: 4px;
}

.contact-block .fine,
.contact-block p:last-child {
  margin-top: 20px;
}


/* --------------------------------------------------------------------------
   14. Über uns, Foto, Platzhalter
   -------------------------------------------------------------------------- */

.about {
  display: grid;
  gap: 32px;
}

.about > * {
  min-width: 0;
}

@media (min-width: 52.5em) {
  .about {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 56px;
    align-items: start;
  }
}

.photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--r-media);
  background: var(--tile);
}

/* Platzhalter: gelb gestrichelt, damit nichts unbemerkt online geht */
.placeholder {
  padding: 20px 24px;
  border: 2px dashed var(--ph-line);
  border-radius: var(--r-md);
  background: var(--ph-bg);
  color: var(--ph-ink);
}

.placeholder > :last-child {
  margin-bottom: 0;
}

.placeholder-label {
  margin: 0 0 8px;
  color: var(--ph-ink);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.placeholder-photo {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-media);
  font-size: 1.25rem;
  font-weight: 700;
  text-align: center;
}

.ph {
  padding: 0 0.3em;
  border-radius: 6px;
  background: var(--ph-bg);
  outline: 2px dashed var(--ph-line);
  outline-offset: -1px;
  color: var(--ph-ink);
  font-weight: 600;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}


/* --------------------------------------------------------------------------
   15. Rechtstexte
   -------------------------------------------------------------------------- */

.prose {
  max-width: 44rem;
}

.prose :where(h2) {
  margin: 2.5rem 0 0.75rem;
  font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.875rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.prose :where(h3) {
  margin: 2rem 0 0.5rem;
  font-size: 1.25rem;
}

.prose > :first-child,
.prose :where(h2, h3):first-child {
  margin-top: 0;
}

.prose :where(ul, ol) {
  padding-left: 1.25em;
}

.prose :where(li) + :where(li) {
  margin-top: 0.4em;
}

.prose :where(li)::marker {
  color: var(--ink-2);
}

.prose > .placeholder {
  margin-bottom: 2.5rem;
}


/* --------------------------------------------------------------------------
   16. Abschluss einer Angebotsseite (Handlungsaufforderung)
   -------------------------------------------------------------------------- */

.closing {
  text-align: center;
}

.closing :where(h2) {
  max-width: 22ch;
  margin-inline: auto;
}

.closing :where(p) {
  max-width: 36rem;
  margin-inline: auto;
}

.closing .lead {
  margin-top: 16px;
}

.closing .actions {
  justify-content: center;
}

.closing .fine {
  margin-top: 40px;
}


/* --------------------------------------------------------------------------
   17. Fußbereich (immer dunkel)
   -------------------------------------------------------------------------- */

/* Schiebt sich mit runden Ecken über den letzten Abschnitt; nach einem
   dunklen Abschluss geht er nahtlos weiter */
.site-footer {
  position: relative;
  z-index: 1;
  margin-top: calc(var(--r-sheet) * -1);
  padding-block: clamp(3rem, 2rem + 4vw, 5rem) 32px;
  border-radius: var(--r-sheet) var(--r-sheet) 0 0;
  background: var(--bg);
  color: var(--ink);
  font-size: 0.9375rem;
}

.footer-label {
  margin: 0 0 8px;
  color: var(--ink-2);
  font-size: 1rem;
  font-weight: 600;
}

.footer-mail {
  display: inline-block;
  max-width: 100%;
  min-height: 44px;
  color: var(--ink);
  font-size: clamp(1.75rem, 1.1rem + 3.3vw, 3.5rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.035em;
  text-decoration: underline;
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.14em;
  overflow-wrap: anywhere;
  hyphens: none;
  -webkit-hyphens: none;
}

.footer-mail:hover {
  color: var(--accent);
}

/* Eine Zeile mit den fünf Hauptseiten, groß gesetzt */
.footer-nav {
  padding-block: 32px 40px;
}

.footer-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink-2);
  text-decoration: none;
}

.footer-nav .footer-link {
  color: var(--ink);
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.footer-link:hover {
  color: var(--ink);
  text-decoration: underline;
}

.footer-link[aria-current="page"] {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.35em;
}

/* Kleingedrucktes: Jahr links, Impressum und Datenschutz rechts */
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 24px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 0.875rem;
  letter-spacing: 0;
}

.footer-bottom p {
  margin: 0;
}


/* --------------------------------------------------------------------------
   18. Schriftgrößen-Klassen (wenn die Überschriftenebene anders sein muss)
   Stehen zuletzt, damit sie Bausteine überschreiben.
   -------------------------------------------------------------------------- */

.display {
  font-size: var(--fs-display);
  line-height: 1;
  letter-spacing: -0.03em;
}

.h1 {
  font-size: var(--fs-h1);
  line-height: 1.02;
  letter-spacing: -0.03em;
}

.h2 {
  font-size: var(--fs-h2);
  line-height: 1.04;
  letter-spacing: -0.03em;
}

.h3 {
  font-size: var(--fs-h3);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.h4 {
  font-size: var(--fs-h4);
  line-height: 1.25;
  letter-spacing: -0.015em;
}


/* --------------------------------------------------------------------------
   19. Bewegung (nur wenn gewünscht) und Druck
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  /* Bild öffnet sich einmalig aus einem abgerundeten Rechteck */
  .reveal {
    animation: reveal 1.4s cubic-bezier(0.45, 0, 0.55, 1) backwards;
  }

  /* Text gleitet einmalig 16px nach oben. Nur Bewegung, keine Deckkraft:
     die Überschrift ist immer sichtbar, auch wenn keine Animation läuft. */
  .rise {
    animation: rise 0.8s var(--ease) 0.1s backwards;
  }
}

@keyframes reveal {
  from { clip-path: inset(22% 26% 22% 26% round 40px); }
  to { clip-path: inset(-50% round 0); }
}

@keyframes rise {
  from { transform: translateY(16px); }
}

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

@media print {
  .skip-link,
  .site-header,
  .site-footer .footer-nav,
  .actions,
  [aria-hidden="true"] {
    display: none !important;
  }

  .section-dark,
  .hero-home,
  .site-footer,
  .tile--contrast {
    --ink: #000000;
    --ink-2: #333333;
    margin-top: 0;
    background: none !important;
    color: #000000 !important;
  }

  body {
    font-size: 11pt;
  }
}