/* =========================================================================
   Stein.Digital — Startseite (Webdesign & Entwicklung)

   Verhaeltnis zum Starterset-Stylesheet: die Design-Tokens sind uebernommen,
   der Rest ist neu. Ein @import waere bequemer gewesen, haette aber rund
   1200 Zeilen produktspezifischer Regeln mitgeschleppt, die hier nie
   greifen — und einen zweiten blockierenden Request im kritischen Pfad.

   Wo die Seite bewusst vom Starterset abweicht:

     Schriftgroesse. Das Starterset richtet sich an 50- bis 75-Jaehrige und
     setzt 19-20px Fliesstext. Hier lesen Geschaeftsfuehrer am Schreibtisch,
     17-19px ist die ruhigere, erwachsenere Groesse.

     Farbeinsatz. Terrakotta bleibt die Marke, tritt aber seltener auf.
     Eine Dienstleistungsseite wirkt serioeser, wenn die Akzentfarbe etwas
     bedeutet — hier heisst sie fast nur "hier geht es weiter".

     Flaechen. Statt weicher Schatten ueberall tragen feine Linien die
     Struktur. Schatten nur dort, wo etwas wirklich vor der Flaeche liegt.

   MOBILE FIRST. Basisregeln gelten ab ~360px, @media fuegt nur hinzu.
   ========================================================================= */

/* ---------- 0. Schrift (selbst gehostet, kein Google-CDN) ---------- */
@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/nunito-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/nunito-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- 1. Tokens ---------- */
:root {
  --cream:        #faf9f6;
  --cream-warm:   #fdf6ee;
  --sand:         #f3ede3;
  --white:        #ffffff;
  --ink:          #2a2622;
  --ink-soft:     #5c554d;
  --ink-mid:      #453f39;
  --terracotta:   #c0603a;
  --terracotta-btn: #b45332;
  --terracotta-t: #b45332;
  --terracotta-d: #a44b28;
  --terracotta-label: #a44b28;  /* Versalien/Kleinschrift: AA auf weiss,
                                   creme, creme-warm und sand */
  --gold:         #c8a056;
  --gold-tint:    #f6ecd8;
  --anthracite:   #1c2b3a;
  --on-dark:      #dfe4e9;
  --terra-pale:   #f7ece7;
  --line:         #e8e2d8;
  /* Kraeftigere Linie fuer Elemente, die Struktur tragen statt nur zu trennen */
  --line-strong:  #d8d0c2;

  --shadow-sm: 0 1px 2px rgba(90, 60, 40, 0.05), 0 4px 12px rgba(90, 60, 40, 0.06);
  --shadow-md: 0 2px 6px rgba(90, 60, 40, 0.06), 0 14px 34px rgba(90, 60, 40, 0.09);
  --shadow-lift: 0 4px 10px rgba(28, 43, 58, 0.07), 0 22px 50px rgba(28, 43, 58, 0.13);

  --radius-card: 14px;
  --radius-btn: 8px;
  --radius-shot: 10px;

  --font: "Nunito Sans", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;

  /* Etwas kompakter als im Starterset — siehe Kopfkommentar */
  --fs-body:   clamp(1.0625rem, 1.02rem + 0.2vw, 1.1875rem);  /* 17 -> 19 */
  --fs-lead:   clamp(1.125rem, 1.04rem + 0.38vw, 1.3125rem);  /* 18 -> 21 */
  /* Nebentext etwas kleiner, Ueberschriften etwas groesser als frueher:
     16-18 und 17-19 px lagen zu nah beieinander, um verschiedene Rollen
     zu tragen. */
  --fs-small:  clamp(0.96875rem, 0.94rem + 0.12vw, 1.03125rem); /* 15.5 -> 16.5 */
  --fs-label:  clamp(0.8125rem, 0.78rem + 0.15vw, 0.9375rem); /* 13 -> 15 */
  --fs-btn:    1.0625rem;                                     /* 17 */
  --fs-h1:     clamp(2.125rem, 1.45rem + 2.9vw, 3.5rem);      /* 34 -> 56 */
  --fs-h2:     clamp(1.875rem, 1.45rem + 1.8vw, 2.75rem);     /* 30 -> 44 */
  --fs-h3:     clamp(1.25rem, 1.15rem + 0.35vw, 1.4375rem);   /* 20 -> 23 */

  --gap-xs: 0.5rem;
  --gap-s:  clamp(0.75rem, 0.6rem + 0.6vw, 1rem);
  --gap-m:  clamp(1.25rem, 1rem + 1.2vw, 2rem);
  --gap-l:  clamp(2rem, 1.5rem + 2.4vw, 3.5rem);
  --gap-xl: clamp(3.5rem, 2.2rem + 5vw, 7rem);
  /* Abstand zwischen Abschnitten — grosszuegiger als --gap-xl, damit die
     Seite ruhig atmet, obwohl weniger Farbwechsel sie gliedern. */
  --abstand: clamp(4.5rem, 3rem + 6vw, 8rem);

  --container: 1320px;
  /* Spaltenabstand der Vertrauensleiste: weiter als --gap-l, aber nicht
     so weit wie --gap-xl, das die drei Punkte auseinanderreissen wuerde. */
  --spalte-weit: clamp(2.5rem, 1rem + 4vw, 5.5rem);
  --pad: clamp(1.25rem, 0.6rem + 2.8vw, 3rem);
  --measure: 66ch;

  --kopf-hoehe: 64px;
}

/* ---------- 2. Reset / Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Ankersprung darf nicht unter der klebenden Kopfzeile landen */
  scroll-padding-top: calc(var(--kopf-hoehe) + 1rem);
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2, h3 {
  color: var(--anthracite); line-height: 1.15;
  margin: 0 0 var(--gap-s); text-wrap: balance;
  /* Deutsche Komposita wie "Gebaeudereinigungsbetrieb" sind als ein Wort
     breiter als eine schmale Spalte. Ohne diese beiden Zeilen ragte die
     Ueberschrift der Fallstudie bei 1024px 44px aus dem Fenster.
     hyphens trennt an einer Silbengrenze mit Trennstrich (das Dokument ist
     als lang="de" ausgezeichnet); overflow-wrap bleibt als letzte Reissleine
     fuer Woerter, die auch damit nicht passen — etwa lange URLs. */
  hyphens: auto;
  /* Kurze Woerter nicht trennen: sonst wird aus "einen" ein "ei-nen".
     Mindestens 8 Zeichen im Wort, 4 vor und 3 nach dem Trennstrich. */
  hyphenate-limit-chars: 8 4 3;
  overflow-wrap: break-word;
}
/* Die Hauptzeile bricht nur zwischen Woertern: "gefun-den" wirkte billig. */
h1 {
  font-size: var(--fs-h1); font-weight: 800; letter-spacing: -0.028em;
  line-height: 1.04; hyphens: manual;
}
h2 { font-size: var(--fs-h2); font-weight: 800; letter-spacing: -0.022em; line-height: 1.1; }
h3 { font-size: var(--fs-h3); font-weight: 700; letter-spacing: -0.01em; }
p  { margin: 0 0 var(--gap-s); }
p:last-child { margin-bottom: 0; }

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

/* Browserflaechen in den Hausfarben */
html { scrollbar-color: var(--line-strong) var(--cream); }
::selection { background: var(--terra-pale); color: var(--ink); }
input, textarea, select { caret-color: var(--terracotta); accent-color: var(--terracotta-btn); }
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid var(--terracotta);
  outline-offset: 2px;
  border-radius: 4px;
}

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

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

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--anthracite); color: #fff; padding: 0.75rem 1.25rem;
}
.skip-link:focus { left: 0; }

/* ---------- 3. Kopfzeile ---------- */
.kopf {
  position: sticky; top: 0; z-index: 60;
  background: rgba(250, 249, 246, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.kopf__inner {
  display: flex; align-items: center; gap: var(--gap-m);
  min-height: var(--kopf-hoehe);
}
.kopf__marke {
  display: flex; align-items: center; text-decoration: none; margin-right: auto;
}
.kopf__logo { width: 10.5rem; }

.kopf__nav { display: none; }
.kopf__nav ul {
  display: flex; gap: clamp(1rem, 2vw, 1.9rem);
  list-style: none; margin: 0; padding: 0;
}
.kopf__nav a {
  color: var(--ink-mid); text-decoration: none; font-size: var(--fs-small);
  font-weight: 600; padding: 0.4rem 0; display: block;
  border-bottom: 1.5px solid transparent;
}
.kopf__nav a:hover { color: var(--terracotta-t); border-bottom-color: var(--terracotta); }

.kopf__inner .kopf__cta { display: none; }

/* Rufnummer: sichtbar, aber leise. Auf schmalen Schirmen steht sie im
   Klappbereich als eigene Zeile — ein Fingertipp genuegt fuer den Anruf. */
.kopf__tel {
  display: none; white-space: nowrap;
  font-size: var(--fs-small); font-weight: 700; color: var(--ink-mid);
  text-decoration: none; letter-spacing: 0.01em;
}
.kopf__tel:hover { color: var(--terracotta-label); }
.kopf__tel--klapp {
  display: block; margin-top: var(--gap-s); padding: 0.8rem 0;
  border-top: 1px solid var(--line); color: var(--terracotta-label);
}

/* Umschalter fuer die Navigation auf schmalen Schirmen */
.kopf__schalter {
  display: inline-flex; align-items: center; gap: 0.55rem;
  background: none; border: 1px solid var(--line-strong); border-radius: var(--radius-btn);
  padding: 0.5rem 0.8rem; font: inherit; font-size: var(--fs-label); font-weight: 700;
  color: var(--ink-mid); cursor: pointer; min-height: 44px;
}
.kopf__balken { display: block; width: 18px; height: 2px; background: currentColor; position: relative; }
.kopf__balken::before, .kopf__balken::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor;
}
.kopf__balken::before { top: -6px; }
.kopf__balken::after  { top: 6px; }

.kopf__klapp {
  border-top: 1px solid var(--line);
  background: var(--cream);
  padding: var(--gap-s) 0 var(--gap-m);
}
.kopf__klapp[hidden] { display: none; }
.kopf__klapp ul { list-style: none; margin: 0 0 var(--gap-s); padding: 0; }
.kopf__klapp a {
  display: block; padding: 0.8rem 0; text-decoration: none;
  color: var(--ink); font-weight: 600; border-bottom: 1px solid var(--line);
}

@media (min-width: 60rem) {
  .kopf__nav { display: block; }
  /* Zweiwortige Eintraege ("Fuer wen", "Ueber mich") und die Beschriftung
     des Knopfes duerfen nicht umbrechen — sonst waechst die Kopfzeile
     knapp oberhalb der Umschaltbreite von 65 auf 72 Pixel. */
  .kopf__nav a, .kopf__inner .kopf__cta { white-space: nowrap; }
  .kopf__inner .kopf__cta {
    display: inline-flex; width: auto; min-height: 44px;
    padding: 0.55rem 1.35rem; font-size: var(--fs-small);
  }
  .kopf__tel { display: inline-block; }
  .kopf__tel--klapp { display: none; }
  .kopf__schalter, .kopf__klapp { display: none; }
}

@media (min-width: 60rem) and (max-width: 71.99rem) {
  .kopf__inner { gap: var(--gap-s); }
}

/* ---------- 4. Abschnitte ---------- */
.abschnitt { padding-block: var(--abstand); }
.abschnitt--weiss  { background: var(--white); }
.abschnitt--sand   { background: var(--sand); }
.abschnitt--warm   { background: var(--cream-warm); }
.abschnitt--dunkel { background: var(--anthracite); color: var(--on-dark); }
.abschnitt--dunkel h2, .abschnitt--dunkel h3 { color: #fff; }
.abschnitt--schmal { padding-block: calc(var(--abstand) * 0.62); }

/* Zwei Abschnitte auf gleichem Grund trennt statt eines Farbwechsels eine
   feine Linie, die am Satzspiegel beginnt und endet. Die Startseite kam
   so von elf auf sieben Hintergrundwechsel. */
.mit-linie { padding-top: 0; }
.mit-linie > .container::before {
  content: ""; display: block; height: 1px; background: var(--line-strong);
  margin-bottom: calc(var(--abstand) * 0.62);
}
.abschnitt:not(.abschnitt--schmal).mit-linie > .container::before { margin-bottom: var(--abstand); }

.kopfzeile { max-width: var(--measure); margin-bottom: clamp(2rem, 1.4rem + 2.4vw, 3.25rem); }
.kopfzeile--mitte { margin-inline: auto; text-align: center; }
.kopfzeile p { color: var(--ink-soft); font-size: var(--fs-lead); margin-top: 1rem; max-width: 36em; }
.abschnitt--dunkel .kopfzeile p { color: var(--on-dark); }


/* ---------- 5. Knoepfe ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 52px; padding: 0.8rem 1.75rem;
  background: var(--terracotta-btn); color: var(--white);
  font-family: inherit; font-size: var(--fs-btn); font-weight: 700; line-height: 1.3;
  text-align: center; text-decoration: none; border: 2px solid var(--terracotta-btn);
  border-radius: var(--radius-btn); cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.btn:hover { background: var(--terracotta-d); border-color: var(--terracotta-d); }
/* Weisser Grund statt durchsichtig: auf Sand kam die Terrakotta-Schrift
   nur auf 4,3:1, auf Weiss sind es 5,0:1. Ausserdem liest sich der Knopf
   dadurch auf jedem Abschnittsgrund gleich. */
.btn--zweit {
  background: var(--white); color: var(--terracotta-t); border-color: var(--line-strong);
}
.btn--zweit:hover { background: var(--terra-pale); border-color: var(--terracotta); color: var(--terracotta-d); }
.btn--hell { background: var(--white); color: var(--anthracite); border-color: var(--white); }
.btn--hell:hover { background: var(--sand); border-color: var(--sand); }
.btn--breit { width: 100%; }
.btn[disabled] { opacity: 0.6; cursor: progress; }

.knopfreihe { display: flex; flex-wrap: wrap; gap: var(--gap-s); }
.knopfreihe .btn { flex: 1 1 15rem; }
@media (min-width: 40rem) { .knopfreihe .btn { flex: 0 0 auto; } }

/* ---------- 6. Hero ---------- */
.hero {
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) calc(var(--abstand) * 0.7);
  background: var(--cream);
}
.hero__inner { display: grid; gap: var(--gap-xl); }
.hero h1 { margin-bottom: var(--gap-s); }
.hero__lead { font-size: var(--fs-lead); color: var(--ink-soft); max-width: 34em; }
.hero__vertrauen {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem;
  margin: var(--gap-m) 0 0; padding: 0; list-style: none;
  font-size: var(--fs-small); color: var(--ink-mid); font-weight: 600;
}
.hero__vertrauen li { display: flex; align-items: center; gap: 0.45rem; }
.hero__vertrauen li::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--terracotta); flex: none;
}
.hero .knopfreihe { margin-top: var(--gap-m); }

/* Buehne: Desktop-Aufnahme mit vorgelagertem Handy */
.buehne { position: relative; }
.buehne__desktop {
  border: 1px solid var(--line-strong); border-radius: var(--radius-shot);
  box-shadow: var(--shadow-lift); overflow: hidden; background: var(--white);
}
.buehne__handy {
  position: absolute; right: -0.25rem; bottom: -1.75rem;
  width: 27%; max-width: 158px;
  border: 5px solid #ffffff; border-radius: 16px;
  box-shadow: var(--shadow-lift); overflow: hidden; background: var(--white);
}
.buehne__handy img { border-radius: 11px; }
.buehne__quelle {
  margin: calc(var(--gap-m) + 0.75rem) 0 0;
  font-size: var(--fs-label); color: var(--ink-soft);
}

@media (min-width: 62rem) {
  /* Knapp zugunsten der Aufnahme verschoben: 48/52. */
  .hero__inner {
    grid-template-columns: minmax(0, 0.96fr) minmax(0, 1.04fr);
    align-items: center; gap: var(--gap-l);
  }
  .buehne__handy { right: -2.75rem; bottom: -2.25rem; width: 25%; }
}

/* ---------- 7. Vertrauensleiste ---------- */
.leiste { display: grid; gap: var(--gap-m); }
/* Schliesst direkt an die Buehne an; jeder Punkt steht auf einer feinen
   Linie statt auf einem Terrakotta-Balken. */
.leiste-abschnitt { padding-top: 0; }
.leiste__punkt { border-top: 1px solid var(--line-strong); padding-top: var(--gap-s); }
.leiste__punkt h3 { margin-bottom: 0.35rem; }
.leiste__punkt p { color: var(--ink-soft); font-size: var(--fs-small); }
/* Die drei Punkte sollen als duenne Leiste ueber die volle Breite laufen,
   nicht als drei eng stehende Kaesten. */
@media (min-width: 48rem) {
  .leiste {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--spalte-weit); row-gap: var(--gap-l);
  }
}

/* ---------- 8. Karten und Raster ---------- */
.karte {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: clamp(1.25rem, 0.9rem + 1.6vw, 2.25rem);
}
.abschnitt--weiss .karte { background: var(--cream); }

.raster { display: grid; gap: var(--gap-m); }
@media (min-width: 48rem) { .raster--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .raster--3 { grid-template-columns: repeat(3, 1fr); } }

/* ---------- 9. Fallstudie ---------- */
.fall { display: grid; gap: var(--gap-l); align-items: start; }
.fall__bild {
  border: 1px solid var(--line-strong); border-radius: var(--radius-shot);
  overflow: hidden; box-shadow: var(--shadow-lift); background: var(--white);
}
/* "Echtes Kundenprojekt" steht als Bildunterschrift unter der Aufnahme,
   nicht als Etikett ueber der Ueberschrift. */
.fall__figur { margin: 0; }
.fall__marke {
  margin: 0.85rem 0 0; font-size: var(--fs-label); font-weight: 700; color: var(--ink-mid);
}
/* Das Kompositum ist im Markup mit ­ getrennt:
   "Gebaeude-reinigungsbetrieb" statt "Gebaeudereini-gungsbetrieb". */
.fall h2 { hyphens: manual; }
.fall__punkte {
  margin: var(--gap-m) 0; padding: 0;
  display: grid; gap: var(--gap-s);
}
.fall__punkte > div {
  display: grid; grid-template-columns: 8.5rem 1fr;
  gap: var(--gap-s); align-items: baseline;
}
.fall__punkte dt { font-size: var(--fs-small); font-weight: 800; color: var(--anthracite); }
.fall__punkte dd { margin: 0; color: var(--ink-soft); font-size: var(--fs-small); }
@media (max-width: 32rem) {
  .fall__punkte > div { grid-template-columns: 1fr; gap: 0.15rem; }
}
@media (min-width: 62rem) {
  /* Der Screenshot ist das eigentliche Beweisstueck und bekommt 58 Prozent.
     minmax(0, ...) ist hier nicht Kosmetik: ohne die Null als Untergrenze
     zog die Textspalte ueber ihre min-content-Breite auf 489px und liess
     dem Bild nur die Haelfte statt der deklarierten zwei Drittel. */
  .fall {
    grid-template-columns: minmax(0, 1.38fr) minmax(0, 1fr);
    gap: var(--gap-l); align-items: center;
  }
}

/* ---------- 10. Branchenmuster ---------- */
/* Gewichtete Komposition statt fuenf gleicher Kacheln: Elektro und Kfz
   liegen oben und ueber die halbe Breite, die drei uebrigen darunter zu
   dritt. Bewusst ein einfaches Sechstel-Raster und kein Bento-Geflecht —
   das bleibt in jeder Breite sauber. */
.muster { display: grid; gap: var(--gap-m); }
@media (min-width: 42rem) { .muster { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) {
  .muster { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .mock--gross { grid-column: span 3; }
  .mock--klein { grid-column: span 2; }
  /* Die beiden grossen Kacheln bekommen ein hoeheres Bildfeld als die drei
     kleinen. Die Demos sind das staerkste Argument der Seite und duerfen
     mehr Flaeche haben als eine Produktkarte. */
  .mock--gross .mock__bild { aspect-ratio: 3 / 2; }
}

/* Die Kachel ist jetzt ein Link auf die vollstaendige Beispielseite. Als
   ein einziges <a> statt Karte-mit-Link-darin: die gesamte Flaeche ist
   anklickbar, und Tastatur wie Screenreader bekommen genau ein Ziel statt
   mehrerer verschachtelter. */
.mock {
  display: flex; flex-direction: column;
  border: 1px solid var(--line-strong); border-radius: var(--radius-card);
  overflow: hidden; background: var(--white); box-shadow: var(--shadow-sm);
  text-decoration: none; color: inherit;
  transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}
.mock:hover {
  box-shadow: var(--shadow-md); border-color: var(--terracotta);
  transform: translateY(-3px);
}
.mock:focus-visible { outline: 3px solid var(--terracotta); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .mock:hover { transform: none; } }

/* Kopfleiste eines Browserfensters — macht ohne Worte klar, dass hier eine
   Website gezeigt wird und kein Foto. */
.mock__leiste {
  display: flex; align-items: center; gap: 0.35rem;
  padding: 0.55rem 0.75rem; background: #f1eee8; border-bottom: 1px solid var(--line);
}
.mock__punkt { width: 8px; height: 8px; border-radius: 50%; background: #cfc8bc; flex: none; }
.mock__adresse {
  margin-left: 0.5rem; font-size: 0.6875rem; color: #6f685e;
  background: #fff; border-radius: 999px; padding: 0.15rem 0.6rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Der Bildausschnitt ist eine echte Aufnahme der Beispielseite, kein
   nachgebauter Hero. Feste Hoehe ueber aspect-ratio, damit beim Nachladen
   nichts springt. */
.mock__bild { display: block; aspect-ratio: 8 / 5; overflow: hidden; background: var(--sand); }
.mock__bild img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }

.mock__fuss {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 0.35rem; padding: var(--gap-s) var(--gap-m) var(--gap-m);
  border-top: 1px solid var(--line); background: var(--white);
  flex: 1;
}
/* Die Kennzeichnung ist bewusst kein zartes Kleingedrucktes. Wer die Kachel
   sieht, muss ohne Suchen erkennen, dass das kein Kundenprojekt ist. */
.mock__label {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.8125rem; font-weight: 700; color: var(--ink-mid);
  background: var(--sand); border: 1px solid var(--line-strong);
  border-radius: 999px; padding: 0.25rem 0.7rem; margin-bottom: 0.15rem;
}
.mock__name {
  font-size: var(--fs-h3); font-weight: 700; color: var(--anthracite);
  line-height: 1.2; letter-spacing: -0.01em;
}
@media (min-width: 68rem) {
  .mock--gross .mock__name { font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.625rem); }
}
.mock__deskriptor {
  font-size: var(--fs-label); font-weight: 700; color: var(--ink-mid);
  letter-spacing: 0.02em;
}
.mock__text { font-size: var(--fs-small); color: var(--ink-soft); }
.mock__oeffnen {
  display: inline-flex; align-items: center; gap: 0.4rem;
  margin-top: auto; padding-top: var(--gap-s);
  font-size: var(--fs-small); font-weight: 700; color: var(--terracotta-label);
}
.mock:hover .mock__oeffnen { color: var(--terracotta-d); text-decoration: underline; }

.hinweisband {
  display: flex; gap: var(--gap-s); align-items: flex-start;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-btn); padding: var(--gap-s) var(--gap-m);
  margin-top: var(--gap-m); font-size: var(--fs-small); color: var(--ink-mid);
}
.hinweis-ico {
  width: 1.15rem; height: 1.15rem; flex: none; margin-top: 0.2rem;
  fill: none; stroke: var(--ink-soft); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- 11. Hakenliste ---------- */
/* Frueher Teil der Leistungen-Sektion, inzwischen von den Preiskarten und
   den Branchenseiten mitbenutzt — deshalb steht sie hier fuer sich. */
.haken { list-style: none; margin: 0 0 var(--gap-m); padding: 0; display: grid; gap: 0.55rem; }
.haken li { position: relative; padding-left: 1.85rem; font-size: var(--fs-small); color: var(--ink-mid); }
.haken li::before {
  content: ""; position: absolute; left: 0; top: 0.42em;
  width: 0.7rem; height: 0.4rem; border-left: 2.5px solid var(--terracotta);
  border-bottom: 2.5px solid var(--terracotta); transform: rotate(-45deg);
}

/* Lange Listen untereinander ergeben auf breiten Schirmen eine sehr duenne
   Spalte. Zweispaltig bleibt der Block kompakt und lesbar. */
.haken--zwei { margin-bottom: var(--gap-m); }
@media (min-width: 46rem) {
  .haken--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap-l); }
}

/* ---------- 11b. Leistungskarten ---------- */
/* Drei gleich breite Karten: Website, Google-Profil, Betreuung. Der Preis
   steht als eigene Zeile unter der Ueberschrift, damit er beim Ueberfliegen
   in allen drei Karten auf derselben Hoehe steht — und ist nach dem Titel
   das Groesste in der Karte. */
.leistung { display: flex; flex-direction: column; }
.leistung__symbol {
  display: grid; place-items: center; width: 3rem; height: 3rem;
  border-radius: 50%; background: var(--terra-pale); margin-bottom: var(--gap-s);
}
.leistung__symbol svg {
  width: 1.5rem; height: 1.5rem; fill: none; stroke: var(--terracotta-t);
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.leistung__preis {
  font-size: clamp(2rem, 1.7rem + 1.3vw, 2.75rem); font-weight: 800;
  line-height: 1.05; letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
  color: var(--terracotta-t); margin: 0.5rem 0 var(--gap-s);
}
/* "ab", "einmalig", "pro Monat": Beiwort zum Preis, nicht Teil der Zahl. */
.leistung__preis small, .preiskarte__preis small {
  font-size: 0.5em; font-weight: 700; color: var(--ink-mid); letter-spacing: 0;
}
.leistung__text { font-size: var(--fs-small); color: var(--ink-mid); margin: 0 0 var(--gap-m); }
.leistung > .btn { margin-top: auto; }

/* ---------- 11c. Branchenkacheln ("Fuer wen") ---------- */
/* Vier Karten, jede ein einziges <a> statt Karte mit Verweis darin —
   gleiche Begruendung wie bei .mock: eine Trefferflaeche, ein Ziel fuer
   Tastatur und Vorlesewerkzeug. Jede zeigt eine Aufnahme des
   Beispielentwurfs ihrer Branche: man sieht sofort, worum es geht.
   Auf dem Handy steht die Hochformat-Aufnahme als Vorschaubild links
   neben dem Text, damit alle vier ohne langes Blaettern Platz haben;
   ab Tablet liegt die Breitformat-Aufnahme oben in der Karte. */
.branchen { display: grid; gap: var(--gap-s); }
@media (min-width: 48rem) {
  .branchen { gap: var(--gap-m); grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 62rem) {
  .branchen { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.branche {
  display: grid; grid-template-columns: 6rem minmax(0, 1fr);
  column-gap: 1rem; row-gap: 0.25rem; align-content: start;
  padding: 0.75rem 1rem 0.75rem 0.75rem; box-shadow: var(--shadow-sm);
  text-decoration: none; color: inherit;
  transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}
.branche:hover {
  box-shadow: var(--shadow-md); border-color: var(--terracotta); transform: translateY(-3px);
}
.branche:focus-visible { outline: 3px solid var(--terracotta); outline-offset: 3px; }

.branche__bild {
  grid-row: 1 / span 3; display: block; aspect-ratio: 4 / 5; overflow: hidden;
  border-radius: 8px; border: 1px solid var(--line); background: var(--sand);
}
.branche__bild picture, .branche__bild img {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center;
}
.branche h3 { grid-column: 2; margin: 0.2rem 0 0; line-height: 1.25; }
.branche p { grid-column: 2; font-size: var(--fs-small); color: var(--ink-soft); margin: 0; }
.branche__mehr {
  grid-column: 2; align-self: end; padding-top: 0.35rem;
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: var(--fs-small); font-weight: 700; color: var(--terracotta-label);
}
@media (min-width: 48rem) {
  .branche {
    display: flex; flex-direction: column; gap: 0.4rem;
    padding: 0 0 1.25rem; overflow: hidden;
  }
  .branche > :not(.branche__bild) { margin-inline: 1.25rem; }
  .branche__bild {
    aspect-ratio: 8 / 5; border: 0; border-bottom: 1px solid var(--line);
    border-radius: 0; margin-bottom: 0.6rem;
  }
  .branche__bild img { transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
  .branche:hover .branche__bild img { transform: scale(1.03); }
  .branche__mehr { align-self: flex-start; margin-top: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .branche:hover, .branche:hover .branche__bild img { transform: none; }
}
.branchen__bu { margin: var(--gap-s) 0 0; font-size: var(--fs-label); color: var(--ink-soft); }
.branche:hover .branche__mehr { color: var(--terracotta-d); text-decoration: underline; }

/* Kachel ohne eigene Seite: gleiche Form, aber kein Verweis und kein
   Schweben — sonst verspricht sie ein Ziel, das es nicht gibt. */
.branche--ohne { color: inherit; }

/* Der Hinweis, dass die vier Branchen Beispiele sind und keine Grenze.
   Bewusst kein Kleingedrucktes: wer ein Cafe betreibt, muss ihn sehen,
   ohne danach zu suchen. Deshalb Ueberschriftengroesse und ein eigener
   Knopf; ohne Kasten, weil er direkt zur Liste darueber gehoert. */
.offen { padding-top: var(--gap-m); }
.offen__satz {
  margin: 0 0 var(--gap-xs);
  font-size: var(--fs-h3); font-weight: 700; color: var(--anthracite);
  line-height: 1.35;
}
.offen p + p { color: var(--ink-soft); margin-bottom: var(--gap-s); }
.offen .btn { min-height: 44px; padding: 0.6rem 1.4rem; }
@media (min-width: 52rem) {
  .offen {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--gap-s) var(--gap-l); align-items: center;
  }
  .offen__satz { grid-column: 1; }
  .offen p + p { grid-column: 1; margin-bottom: 0; }
  .offen .btn { grid-column: 2; grid-row: 1 / span 2; }
}

/* ---------- 11d. Bildschirmabzug mit Fensterrahmen ---------- */
/* Wie .mock, aber ohne Verweis: auf den Branchenseiten steht der Knopf
   "Beispiel ansehen" darunter, die Flaeche selbst ist kein Ziel. */
.abzug {
  border: 1px solid var(--line-strong); overflow: hidden;
  background: var(--white); box-shadow: var(--shadow-sm);
  /* Auf dem Handy ein Geraet im Hochformat, mittig; ab Tablet ein
     Browserfenster in Breitformat, links am Raster. */
  max-width: 17rem; margin-inline: auto; border-radius: 20px;
}
.abzug .mock__leiste { display: none; }
.abzug__bild { display: block; aspect-ratio: 400 / 860; overflow: hidden; background: var(--sand); }
.abzug__bild picture, .abzug__bild img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
}
@media (min-width: 48rem) {
  .abzug {
    max-width: 62rem; margin-inline: 0; border-radius: var(--radius-card);
  }
  .abzug .mock__leiste { display: flex; }
  .abzug__bild { aspect-ratio: 8 / 5; }
}

/* Die Kennzeichnung steht unter dem Bild, nicht darin: sie gehoert zu
   uns, nicht zur gezeigten Seite. */
.abzug__bu {
  max-width: 62rem; margin: var(--gap-m) 0 0;
  font-size: var(--fs-label); color: var(--ink-mid);
}
.abzug__bu strong { color: var(--anthracite); }

/* Zeile mit den vier Branchenseiten. Steht auf der Preisseite und
   verhindert, dass die Branchenseiten nur ueber den Fuss erreichbar
   sind — wer den Preis liest, will als Naechstes wissen, was bei seiner
   Art Betrieb draufgehoert. */
.branchenzeile {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem;
  margin: 0; font-size: var(--fs-small); color: var(--ink-soft);
}
.branchenzeile > a {
  display: inline-block;
  padding: 0.45rem 0.95rem;
  background: var(--white); border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-weight: 700; color: var(--terracotta-t); text-decoration: none;
}
.branchenzeile > a:hover {
  border-color: var(--terracotta); background: var(--terra-pale);
  color: var(--terracotta-d);
}
.branchenzeile__rest { flex-basis: 100%; }

/* Ortszeile im Einstieg der Branchenseiten. Bewusst leise: sie soll
   niemanden abhalten, aber auch nicht mit dem Angebot konkurrieren. */
.ortshinweis {
  max-width: var(--measure); margin: var(--gap-m) 0 0;
  font-size: var(--fs-label); color: var(--ink-soft);
}

/* ---------- 12. Ablauf ---------- */
.ablauf {
  display: grid; gap: var(--gap-m); counter-reset: schritt;
  list-style: none; margin: 0; padding: 0;
}
.ablauf > li {
  counter-increment: schritt; position: relative;
  padding-top: var(--gap-s); border-top: 1px solid var(--line-strong);
}
.ablauf > li::before {
  content: counter(schritt);
  display: flex; align-items: center; justify-content: center;
  width: 2.1rem; height: 2.1rem; border-radius: 50%;
  background: var(--terracotta); color: #fff; font-weight: 800; font-size: 1rem;
  margin-bottom: var(--gap-s);
}
.ablauf h3 { margin-bottom: 0.25rem; }
.ablauf p { color: var(--ink-soft); font-size: var(--fs-small); }
/* Die vier Schritte laufen ueber die volle Rasterbreite — aber erst, wenn
   eine Spalte auch breit genug fuer einen Satz ist. Dazwischen zwei Reihen
   zu zweit. */
@media (min-width: 42rem) {
  .ablauf { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap-l); }
}
@media (min-width: 62rem) {
  .ablauf { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gap-l); }
}

/* ---------- 13. Weitere Projekte ---------- */
.projekt { display: grid; gap: var(--gap-s); align-content: start; }
/* Einzelnes Projekt: Bild und Text nebeneinander statt gestapelt, damit die
   Sektion ohne zweite Kachel nicht wie eine halbe Reihe aussieht. */
@media (min-width: 58rem) {
  .projekt--einzeln {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: var(--gap-l); align-items: center;
  }
}
.projekt__bild {
  border: 1px solid var(--line-strong); border-radius: var(--radius-shot);
  overflow: hidden; box-shadow: var(--shadow-sm); background: var(--white);
}
.projekt h3 { margin-bottom: 0.25rem; }
.projekt__art { font-size: var(--fs-small); font-weight: 700; color: var(--ink-soft); margin: 0 0 0.35rem; }
.projekt p { color: var(--ink-soft); font-size: var(--fs-small); }

/* ---------- 14. Ueber mich ---------- */
.ueber { display: grid; gap: var(--gap-l); align-items: start; }
/* Das Portrait steht an der Stelle des frueheren Monogramms. Auf
   schmalen Schirmen wird die Spalte voll breit — ohne Deckel waere das
   Bild dort riesig. */
.ueber__portrait {
  width: 100%; max-width: 15rem;
  aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 22%;
  border-radius: var(--radius-card);
  margin: 0 0 var(--gap-s);
}
@media (min-width: 52rem) { .ueber__portrait { max-width: none; } }
.ueber__name { font-size: var(--fs-h3); font-weight: 700; color: var(--anthracite); margin: 0 0 0.2rem; }
.ueber__rolle { font-size: var(--fs-label); color: var(--ink-soft); margin: 0; }
/* Die drei Punkte als Zeilen zwischen feinen Linien: links die Aussage,
   rechts die Erklaerung. */
.ueber__punkte {
  list-style: none; margin: var(--gap-m) 0 0; padding: 0;
  border-top: 1px solid var(--line-strong);
}
.ueber__punkte li {
  display: grid; gap: 0.15rem 1.5rem;
  padding: 0.9rem 0; border-bottom: 1px solid var(--line-strong);
}
@media (min-width: 46rem) { .ueber__punkte li { grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); } }
.ueber__punkte b { display: block; color: var(--anthracite); }
.ueber__punkte span { font-size: var(--fs-small); color: var(--ink-soft); }
.ueber__technik { font-size: var(--fs-small); color: var(--ink-soft); margin-top: var(--gap-m); }
@media (min-width: 52rem) { .ueber { grid-template-columns: 18rem minmax(0, 1fr); } }

/* ---------- 15. Preiskarten ---------- */
/* Eine Komponente fuer drei Einsatzorte: die Preisseite (mit Hakenliste),
   der Preisblock der Startseite und spaeter die Branchenseiten (beide ohne
   Liste, nur Titel, Preis, ein Satz, Knopf). Der Unterschied ist allein,
   was im Markup steht — keine zweite Karte, keine Variante fuer "kompakt".

   Vorher stand an dieser Stelle ein dunkler Abschnitt mit einer einzelnen
   Preiszeile. Er faellt weg, weil es jetzt drei Preise gibt; die Karten
   stehen auf Sand, damit sie sich weiss vom Untergrund abheben. */
.preise {
  display: grid; gap: var(--gap-m);
  /* Platz fuer das Empfohlen-Schild, das ueber die Kartenkante ragt. */
  margin-top: 0.85rem;
}
@media (min-width: 62rem) {
  .preise { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.preiskarte { position: relative; display: flex; flex-direction: column; }

/* Auf dem Handy steht die empfohlene Karte oben. Auf dem Schreibtisch
   waere das falsch: dort liest man von links, und die Reihenfolge
   guenstig -> empfohlen -> laufend ist die Argumentation. */
@media (max-width: 61.99rem) {
  .preiskarte--betont { order: -1; }
}

/* Doppelte Klasse, damit die Regel `.abschnitt--weiss .karte` die
   Hervorhebung nicht ueberschreibt. */
.karte.preiskarte--betont {
  border: 2px solid var(--terracotta);
  background: var(--cream-warm); box-shadow: var(--shadow-md);
}

.preiskarte__schild {
  position: absolute; top: -0.85rem; left: clamp(1.25rem, 0.9rem + 1.6vw, 2.25rem);
  padding: 0.25rem 0.7rem; border-radius: 999px;
  /* --terracotta traegt Weiss nur mit 4,2:1 — fuer 12px zu wenig.
     Der dunklere Knopfton kommt auf 5,0:1. */
  background: var(--terracotta-btn); color: var(--white);
  font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.02em; line-height: 1.6;
}

/* Der Preis ist nach dem Titel das Auffaelligste der Karte: "was kostet
   es" soll beim Ueberfliegen zuerst beantwortet sein. */
.preiskarte h3 { margin-bottom: 0; }
.preiskarte__preis {
  font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem); font-weight: 800;
  color: var(--terracotta-t); line-height: 1; font-variant-numeric: tabular-nums;
  margin: 0.6rem 0 0; letter-spacing: -0.03em;
}
.preiskarte__zusatz {
  font-size: var(--fs-small); font-weight: 600; color: var(--ink-mid);
  margin: 0.5rem 0 0;
}
.preiskarte__text {
  font-size: var(--fs-small); color: var(--ink-mid);
  margin: var(--gap-s) 0 var(--gap-m);
}
.preiskarte .haken { margin-bottom: var(--gap-m); }
/* Die Knoepfe aller drei Karten stehen auf einer Linie, auch wenn die
   Listen unterschiedlich lang sind. */
.preiskarte .btn { margin-top: auto; }

/* Zeile unter den Karten: der Weg zur vollstaendigen Preisseite. */
.preise__mehr {
  margin-top: var(--gap-m); text-align: center;
  font-size: var(--fs-small); font-weight: 700;
}
.preise__mehr a {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.4rem 0.5rem; text-decoration: none;
}
.preise__mehr a:hover { text-decoration: underline; }
/* Unter den Leistungskarten der Startseite steht der Verweis am Raster. */
#leistungen .preise__mehr { text-align: left; }

/* Textverweis mit gezeichnetem Pfeil — statt dreier gleicher Knoepfe
   "Was drin ist" und statt Unicode-Pfeilen, die jede Schrift anders
   zeichnet. */
.textpfeil {
  display: inline-flex; align-items: center; gap: 0.4rem; align-self: flex-start;
  margin-top: auto; padding-block: 0.35rem;
  font-weight: 700; color: var(--terracotta-label); text-decoration: none;
}
.textpfeil:hover { color: var(--terracotta-d); text-decoration: underline; }
.pfeil {
  width: 1.05em; height: 1.05em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.textpfeil:hover .pfeil, .branche:hover .pfeil, .mock:hover .pfeil,
.preise__mehr a:hover .pfeil { transform: translateX(3px); }

/* Pflichtangabe. Steht einmal je Preisseite und einmal im Fuss. */
/* Änderungspreise unter "Auch einzeln": bewusst eine Textzeile, keine Karte. */
.einzeln__aenderung {
  max-width: var(--measure); margin: var(--gap-m) 0 0;
  font-size: var(--fs-small); color: var(--ink-soft);
}
.einzeln__aenderung strong { color: var(--anthracite); }

.preis-hinweis {
  margin-top: var(--gap-s); text-align: center;
  font-size: var(--fs-label); color: var(--ink-soft);
}

/* ---------- 15b. Sichtbarkeitspaket (Preisseite) ---------- */
/* Links die Begruendung mit der langen Liste, rechts die beiden kurzen
   Karten. Untereinander waere die Liste eine sehr lange duenne Saeule und
   der Knopf laege weit unter dem Text, auf den er sich bezieht. */
.sicht { display: grid; gap: var(--gap-m); }
.sicht p { color: var(--ink-soft); }
.sicht__ueber { margin-top: var(--gap-m); margin-bottom: var(--gap-s); }
.sicht__neben { display: grid; gap: var(--gap-m); align-content: start; }
@media (min-width: 62rem) {
  .sicht {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: var(--gap-l); align-items: start;
  }
}

/* ---------- 16. FAQ ---------- */
/* Zweispaltig ab Desktop: links die Ueberschrift, rechts das Accordion.
   Damit faellt eine weitere mittige Saeule weg. Die Ueberschrift bleibt
   beim Blaettern stehen, solange der Abschnitt sichtbar ist. */
.faq { display: grid; gap: 0; max-width: var(--measure); }
@media (min-width: 62rem) {
  .faq-block {
    display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.5fr);
    gap: var(--gap-xl); align-items: start;
  }
  .faq-block > .kopfzeile {
    margin-bottom: 0; position: sticky;
    top: calc(var(--kopf-hoehe) + var(--gap-m));
  }
  .faq { max-width: none; }
}
.faq details { border-bottom: 1px solid var(--line-strong); }
.faq summary {
  cursor: pointer; list-style: none; padding: var(--gap-s) 2.5rem var(--gap-s) 0;
  font-weight: 700; color: var(--anthracite); position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 0.4rem; top: 1.4em;
  width: 0.6rem; height: 0.6rem;
  border-right: 2.5px solid var(--terracotta); border-bottom: 2.5px solid var(--terracotta);
  transform: translateY(-50%) rotate(45deg); transition: transform 0.15s ease;
}
.faq details[open] summary::after { transform: translateY(-20%) rotate(-135deg); }
.faq p { padding: 0 0 var(--gap-m); color: var(--ink-soft); font-size: var(--fs-small); }
/* Antworten mit mehreren Absätzen: dazwischen enger, nach dem letzten wie gehabt. */
.faq p:has(+ p) { padding-bottom: var(--gap-s); }

/* ---------- 17. Kontakt ---------- */
.kontakt { display: grid; gap: var(--gap-l); align-items: start; }
/* 40 Prozent Einleitung und Kontaktwege, 60 Prozent Formular. */
@media (min-width: 58rem) {
  .kontakt { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: var(--gap-xl); }
}

.formular { display: grid; gap: var(--gap-m); }
.feld { display: grid; gap: 0.35rem; }
.feld > label { font-weight: 700; font-size: var(--fs-small); color: var(--anthracite); }
.feld__hilfe { font-size: var(--fs-label); color: var(--ink-soft); }
/* Kennzeichnung optionaler Felder. Bewusst am Etikett und nicht als
   Hinweiszeile darunter: wer das Formular ueberfliegt, soll auf einen
   Blick sehen, was er ueberspringen darf. */
.feld__opt { font-weight: 400; color: var(--ink-soft); font-size: var(--fs-label); }
.feld input, .feld textarea, .feld select {
  font: inherit; font-size: var(--fs-small); color: var(--ink);
  background: var(--white); border: 1px solid var(--line-strong);
  border-radius: var(--radius-btn); padding: 0.75rem 0.9rem; width: 100%;
}
.feld textarea { min-height: 8.5rem; resize: vertical; }
.feld input:hover, .feld textarea:hover, .feld select:hover { border-color: #c3b9a8; }
.feld--fehler input, .feld--fehler textarea, .feld--fehler select {
  border-color: #a3341f; background: #fdf4f2;
}
.feld__fehler { font-size: var(--fs-label); color: #8f2d1b; font-weight: 700; }
.feld__fehler:empty { display: none; }

/* Honigtopf: fuer Menschen unsichtbar, fuer einfache Bots sichtbar.
   Bewusst nicht display:none — manche Bots ueberspringen genau die Felder,
   die so versteckt sind. Aus dem Fluss nehmen und aus der Tabreihenfolge
   nehmen wirkt zuverlaessiger. */
.honigtopf {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

.formular__fuss { display: grid; gap: var(--gap-s); justify-items: start; }
.formular__hinweis { font-size: var(--fs-label); color: var(--ink-soft); }

.meldung {
  border-radius: var(--radius-btn); padding: var(--gap-s) var(--gap-m);
  font-size: var(--fs-small);
}
.meldung[hidden] { display: none; }
.meldung--gut { background: #eef4ef; border: 1px solid #b9cfc0; color: #21492f; }
.meldung--schlecht { background: #fdf1ee; border: 1px solid #e0b3a6; color: #7d2a17; }
.meldung b { display: block; margin-bottom: 0.2rem; }

.kontakt__wege {
  list-style: none; margin: var(--gap-m) 0 0; padding: 0;
  display: grid; gap: var(--gap-s); font-size: var(--fs-small);
}
.kontakt__wege b { display: block; color: var(--anthracite); }

/* ---------- 17b. Schwebender Aufruf (nur schmale Schirme) ---------- */
/* Auf dem Handy stand der Aufruf im zugeklappten Menue und war damit erst
   nach zwei Tipps erreichbar. Als schwebender Knopf ist er durchgehend da.
   Er verschwindet, sobald der Kontaktabschnitt im Bild ist — sonst deckte
   er dort den Absendeknopf zu. */
.schwebe-cta {
  position: fixed; z-index: 60;
  left: var(--pad); right: var(--pad); bottom: 1rem;
  display: flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0.85rem 1.25rem;
  /* Weiss auf --terracotta kam nur auf 4,2:1; der Knopfton traegt 5:1. */
  border: 1px solid var(--terracotta-btn);
  border-radius: var(--radius-btn);
  background: var(--terracotta-btn); color: #fff;
  font-family: inherit; font-size: var(--fs-btn); font-weight: 700;
  text-align: center; text-decoration: none;
  box-shadow: 0 6px 20px rgba(58, 42, 30, 0.28);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.schwebe-cta:hover {
  background: var(--terracotta-d); border-color: var(--terracotta-d); color: #fff;
}
.schwebe-cta[data-aus] { opacity: 0; transform: translateY(150%); pointer-events: none; }

@media (min-width: 60rem) { .schwebe-cta { display: none; } }
/* Platz unter der Fusszeile, damit der Knopf nichts verdeckt. */
@media (max-width: 59.99rem) { .fuss { padding-bottom: 6rem; } }

/* ---------- 18. Fuss ---------- */
.fuss {
  background: var(--anthracite); color: var(--on-dark);
  padding-block: var(--gap-l); font-size: var(--fs-small);
}
.fuss__inner { display: grid; gap: var(--gap-m); }
.fuss__logo { width: 9rem; filter: brightness(0) invert(1); opacity: 0.9; }

.fuss__spalten { display: grid; gap: var(--gap-m); }
@media (min-width: 34rem) { .fuss__spalten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 62rem) { .fuss__spalten { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.fuss__titel { margin: 0 0 0.6rem; color: #fff; font-size: var(--fs-small); font-weight: 800; }
.fuss__nav { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
/* 22px hohe Verweise sind als Tippflaeche zu klein (WCAG 2.5.8 nennt
   24px). Mit dem Innenabstand kommen sie auf 33px, ohne dass die
   Spalten sichtbar auseinandergehen. */
.fuss a { color: var(--on-dark); display: inline-block; padding: 0.3rem 0; text-decoration: none; }
.fuss a:hover { color: #fff; text-decoration: underline; }

.fuss__schluss {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem;
  padding-top: var(--gap-s); border-top: 1px solid rgba(255, 255, 255, 0.14);
  color: #93a3b3; font-size: var(--fs-label);
}
.fuss__schluss p { margin: 0; color: inherit; }
@media (min-width: 62rem) {
  .fuss__inner { grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); align-items: start; }
  .fuss__schluss { grid-column: 1 / -1; }
}

/* ---------- 19. Rechtstexte ---------- */
.rechtstext { padding-block: var(--gap-l) var(--gap-xl); }
.rechtstext .container { max-width: 48rem; }
.rechtstext h2 { font-size: var(--fs-h3); margin-top: var(--gap-l); }
.rechtstext h2:first-of-type { margin-top: var(--gap-m); }
.rechtstext p, .rechtstext li { font-size: var(--fs-small); color: var(--ink-mid); }
.rechtstext ul { padding-left: 1.25rem; }
.rechtstext li { margin-bottom: 0.4rem; }
.rechtstext address { font-style: normal; }

/* ---------- 20. Bewegung nur, wenn erwuenscht ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}