@charset "UTF-8";
/* ══════════════════════════════════════════════════════════════════
   Colora Design – Stylesheet

   Bildsprache aus dem bisherigen Auftritt: Glasflächen mit Unschärfe,
   Leuchtakzent, schwebende Navigationspille, mittige Abschnitte,
   Einblendung beim Scrollen.

   Die Werte stammen aus style.v4.css und style.v5.css, nur ohne den
   Überschreibungsstapel – ein System statt zweier Ebenen mit 138
   !important. Zwei Abweichungen, beide begründet:
     · Der Hauptknopf bleibt die dunkle Pille mit Verlaufsrand.
       Weiß auf Vollton-Violett ergibt 3,12:1 und wäre unlesbar.
     · Die Einblendung versteckt nichts, solange kein Skript läuft.
   ══════════════════════════════════════════════════════════════════ */

/* ─── Schriften: je eine variable Datei statt sechs Schnitten ───── */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/inter-var-latin.woff2') format('woff2-variations'),
       url('fonts/inter-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/outfit-var-latin.woff2') format('woff2-variations'),
       url('fonts/outfit-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}

/* ─── Token ─────────────────────────────────────────────────────
   Heller Auftritt, Markenverläufe unverändert.
   Zwei Werte mussten sich ändern, damit die Schrift lesbar bleibt:
     · Als TEXTFARBE ergibt #c864ff auf Weiß nur 2,85:1. Dafür gibt es
       --accent-text #9333D6 mit 5,20:1. Als Fläche und im Verlauf
       bleibt #c864ff unangetastet.
     · Der Fokusring braucht 3:1. #ffb86c erreicht 1,56 – dafür steht
       --active auf #C25F00 (3,89:1), demselben Orange, nur tiefer.
   ──────────────────────────────────────────────────────────────── */
:root {
  --bg-primary:       #F5F4F8;
  --bg-secondary:     #FFFFFF;
  /* Etwas dichter als früher (0,72): Diese Flächen hatten zusätzlich
     eine Hintergrundunschärfe, die sie mattierte. Die ist raus -
     siehe den Abschnitt "Karten" -, die Dichte gleicht es aus. */
  --bg-glas:          rgba(255, 255, 255, 0.82);
  --bg-glas-nav:      rgba(255, 255, 255, 0.72);
  /* Rot für fehlende Pflichtangaben - derselbe Ton wie in der
     Meldung unter dem Absendeknopf. */
  --fehler:           #B91C1C;
  --bg-glas-nav-fest: rgba(255, 255, 255, 0.88);
  --bg-knopf:         #FFFFFF;

  --text-primary:     #17131F;
  --text-secondary:   #514B63;
  --text-muted:       #6B6480;

  --accent:           #E8619B;
  /* Aus der Logodatei gemessen: das Zeichen läuft von Pink (337°) über
     Lachs (5°) nach Pfirsich (25°). Violett kommt darin nicht vor – das
     stammte aus dem alten Stylesheet. Der Verlauf selbst steht in
     --gradient und zieht die feinen Linien: Unterstriche, Konturen,
     Striche vor den Beschriftungen.

     --accent-text ist derselbe Farbton, nur tief genug für Text und
     Flächen: Weiß darauf ergibt 5,34:1, die Fläche gegen die Seite
     4,87:1. Diese eine Farbe trägt alles Aktive – Hauptknopf, Verweise,
     Beschriftungen, gewählter Tag im Kalender. Ein zweites, helleres
     Pink daneben ließ die Seite unruhig wirken. */
  /* Der Knopf steht heller als die Textfarbe – näher am Pink des Logos,
     aber gerade noch tief genug, dass Weiß darauf 4,62:1 erreicht.
     Beim Überfahren geht er auf die tiefere Textfarbe. */
  --knopf:            #D33578;
  --accent-text:      #C42D6B;
  --accent-tief:      #A82459;
  --accent-soft:      rgba(196, 45, 107, 0.09);
  --accent-glow:      rgba(196, 45, 107, 0.32);
  --active:           #C25F00;
  --gradient:         linear-gradient(135deg, #F080B0 0%, #F09890 52%, #F0B080 100%);

  --border:           rgba(23, 19, 31, 0.10);
  --border-light:     rgba(23, 19, 31, 0.16);
  --border-glas:      rgba(255, 255, 255, 0.9);
  --border-feld:      #8E86A6;

  --schatten-karte:    0 1px 2px rgba(23, 19, 31, 0.04), 0 10px 30px rgba(23, 19, 31, 0.07);
  --schatten-hover:    0 2px 6px rgba(23, 19, 31, 0.05), 0 18px 44px rgba(196, 45, 107, 0.18);
  /* Schein nach außen beim Überfahren anklickbarer Kästen */
  --schein:            0 1px 3px rgba(23, 19, 31, 0.04), 0 10px 28px rgba(196, 45, 107, 0.14);
  --schatten-nav:      0 1px 2px rgba(23, 19, 31, 0.04), 0 10px 32px rgba(23, 19, 31, 0.08);
  --schatten-nav-fest: 0 2px 6px rgba(23, 19, 31, 0.06), 0 14px 40px rgba(23, 19, 31, 0.12);
  --schatten-feld:     inset 0 1px 2px rgba(23, 19, 31, 0.04);

  --radius-sm:    8px;
  --radius-md:    14px;
  --radius-lg:    20px;
  --radius-xl:    28px;
  --radius-pille: 100px;
  /* Eine Höhe für alle einzeiligen Formularfelder. Ein Eingabefeld
     kommt aus 2 x 14 px Innenabstand, 28,9 px Zeile und 2 px Rahmen
     auf 59 px - daran richten sich Auswahlknöpfe, Kalender und
     Farbwähler aus, damit keine Zeile aus der Reihe fällt. */
  --feldhoehe: 59px;

  /* Eine einzige Inhaltsbreite für die ganze Seite. Die farbigen Flächen
     der Abschnitte laufen weiterhin von Fensterkante zu Fensterkante –
     begrenzt wird nur die Spalte, in der Inhalt steht. */
  --inhalt:  88rem;                                     /* 1408 px */
  --breite:  calc(var(--inhalt) + 2 * var(--rand));
  --spalte:  44rem;
  --rand:    clamp(20px, 4vw, 80px);
  --sektion: clamp(80px, 12vw, 140px);

  --ease:  cubic-bezier(0.22, 0.61, 0.36, 1);
  /* Gleichmäßig und ruhig – für Einblendungen und Seitenwechsel.
     Bewusst keine Kurve mit steilem Anfang: die legt fast den ganzen
     Weg in den ersten Zehntelsekunden zurück und wirkt dadurch
     hektisch, auch wenn die Gesamtdauer länger ist. */
  --weich: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --tempo: 0.35s;
}

/* ─── Grundlagen ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Die Navileiste ist 76 px hoch – ein Sprungziel landet knapp darunter. */
  scroll-padding-top: 88px;
  /* Ruhelage des Scheins: mittig im oberen Drittel. Nimmt seite.js die
     Zeigerstelle wieder weg, gleitet er hierher zurück. */
  --mx: 50vw;
  --my: 30vh;
}
/* Das Nachgleiten schaltet seite.js frei, sobald es einen echten
   Mauszeiger gibt. Stünde es fest im Stil, liefe schon beim ersten
   Aufbau der Seite eine Bewegung von der Ausgangsstelle in die
   Ruhelage - der Schein käme sichtbar aus der Ecke hereingerutscht.
   Auf Geräten ohne Zeiger gibt es ohnehin nichts nachzuziehen. */
html.schein-weich body::before {
  transition: translate 0.8s var(--weich);
}

/* ─── Lichtschein, der dem Zeiger folgt ────────────────────────────
   Ein großer, weicher Schein in den Logofarben hinter der ganzen Seite.
   Er liegt hinter allem und fängt keine Klicks ab. --mx und --my setzt
   seite.js; ohne JavaScript stehen sie auf einem festen Wert und der
   Schein liegt ruhig im oberen Drittel.

   Wichtig ist, WIE er sich bewegt: Die Fläche ist doppelt so groß wie
   der Schein und trägt ihn fest in ihrer Mitte; bewegt wird nur die
   Fläche. Vorher wanderte stattdessen die Mitte des Verlaufs - dann
   muss der Browser den Verlauf bei jeder Zeigerbewegung über die
   ganze Fensterfläche neu ausrechnen und zeichnen, und wegen der
   Überblendung 0,8 Sekunden lang weiter. Auf einem großen Bildschirm
   sind das über eine Million Bildpunkte je Bild, während man tippt.
   Eine Verschiebung dagegen reicht der Browser an die Grafikkarte
   durch und muss nichts neu zeichnen. */
body::before {
  content: ''; position: fixed; left: 0; top: 0; z-index: -1;
  width: 156vmax; height: 156vmax;
  margin-left: -78vmax; margin-top: -78vmax;
  pointer-events: none;
  translate: var(--mx) var(--my);
  will-change: translate;
  background: radial-gradient(78vmax 78vmax at 50% 50%,
    rgba(240, 128, 176, 0.22) 0%,
    rgba(240, 140, 160, 0.15) 26%,
    rgba(240, 152, 144, 0.09) 44%,
    rgba(240, 176, 128, 0.04) 62%,
    transparent 80%);
}

body {
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.7;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

/* Muss nach allen display-Regeln stehen: .feld und andere Bausteine setzen
   display selbst und würden das hidden-Attribut sonst überstimmen. Genau das
   ließ auf den Leistungsseiten die Leistungsauswahl neben dem Chip stehen,
   obwohl sie hidden trug. */
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }

::selection { background: var(--accent); color: #17131F; }
:root { caret-color: var(--accent-text); accent-color: var(--accent-text); }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb { background: #C6BFD6; border-radius: var(--radius-pille); }
::-webkit-scrollbar-thumb:hover { background: #A79DBE; }
* { scrollbar-color: #C6BFD6 var(--bg-primary); scrollbar-width: thin; }

:focus-visible { outline: 2px solid var(--active); outline-offset: 3px; border-radius: 4px; }
:focus:not(:focus-visible) { outline: none; }

a {
  color: var(--accent-text);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color var(--tempo) var(--ease);
}
a:hover { color: var(--text-primary); }

.sprung {
  position: absolute; left: 16px; top: -100px; z-index: 2000;
  padding: 12px 22px; border-radius: var(--radius-pille);
  background: var(--accent-text); color: #FFFFFF; font-weight: 700; text-decoration: none;
  transition: top var(--tempo) var(--ease);
}
.sprung:focus { top: 16px; color: #FFFFFF; }

.nur-lesen {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ─── Typografie ────────────────────────────────────────────────── */
h1, h2, h3, h4 { font-weight: 700; line-height: 1.15; text-wrap: balance; }
h1, h2 { font-family: 'Outfit', 'Inter', system-ui, sans-serif; letter-spacing: -0.025em; }

h1 { font-size: clamp(2.05rem, 1.3rem + 3.1vw, 3.4rem); line-height: 1.1; }
h2 { font-size: clamp(2rem, 1.4rem + 2.2vw, 3.2rem); line-height: 1.15; }
h3 { font-size: 1.15rem; font-weight: 600; line-height: 1.4; letter-spacing: -0.01em; }
h4 { font-size: 1.0625rem; font-weight: 600; line-height: 1.45; }

/* Silbentrennung und Umbruch für jeden Fließtext. Deutsche Wörter
   sind lang: Ohne Trennung reißt der Blocksatz Löcher in die Zeilen,
   und auch linksbündig franst der rechte Rand stärker aus als nötig.
   break-word greift erst, wenn ein Wort selbst breiter ist als die
   Spalte - dann wird es umgebrochen, statt aus dem Kasten zu ragen.
   text-wrap: pretty lässt den Browser den ganzen Absatz betrachten,
   statt Zeile für Zeile zu füllen; das vermeidet einzelne kurze
   Restzeilen. Voraussetzung für die Trennung ist lang="de" im
   <html>-Tag - das setzt _build/bausteine.py. */
p, li {
  hyphens: auto;
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 6 3 3;
  overflow-wrap: break-word;
  text-wrap: pretty;
}
/* Ausgenommen die Navigation und die Bildunterschriften: Ein
   getrenntes "Leis-tungen" im Menü wäre schlechter zu erfassen als
   eine etwas längere Zeile, und unter einem Bild steht ohnehin zu
   wenig Text, als dass sich eine Trennung lohnte. */
.menue li, .klappe-liste li,
figcaption, .nachbarn-text {
  hyphens: manual;
  -webkit-hyphens: manual;
}

/* Blocksatz für den Fließtext - auf jeder Bildschirmbreite.

   Damit dabei keine Löcher zwischen den Wörtern entstehen, arbeiten
   drei Angaben zusammen:

   hyphens: auto trennt nach den deutschen Regeln. Voraussetzung ist
   lang="de" im <html>-Tag; das setzt _build/bausteine.py.

   hyphenate-limit-chars: 6 3 3 erlaubt die Trennung ab sechs
   Buchstaben, drei davor, drei danach. Vorher standen hier vier
   davor - damit war "aus-gewiesener" verboten, und eine Zeile im
   Steuerhinweis klaffte mit 14,7 px statt 4,6 px auf. Weniger als
   drei danach lässt Trennungen wie "Angebotsannah-me" zu; die sind
   nach Duden erlaubt, lesen sich aber schlecht.

   text-justify: inter-character legt den Rest, der zur vollen Zeile
   fehlt, nicht nur zwischen die Wörter, sondern auch zwischen die
   Buchstaben. Er verteilt sich dadurch auf ein Vielfaches an Stellen
   und fällt an keiner einzelnen auf. Browser, die die Angabe nicht
   kennen, setzen wie bisher nur die Wortabstände - dann sieht es aus
   wie zuvor, kaputt geht nichts.

   Nicht in dieser Liste: Überschriften, Schaltflächen, Navigation,
   Bildunterschriften und die mittig gesetzten Blöcke. Dort ergibt
   weder Blocksatz noch Trennung einen Sinn.

   Beim Steuerhinweis steht der Klassenname doppelt, weil weiter
   unten in der Datei eine eigene Ausrichtung für ihn steht und ein
   späterer Eintrag bei gleichem Gewicht gewinnt. */
.blocksatz,
.fliess p, .fliess li,
.karte p,
.anderes p,
.fall-text p,
.fuss-text,
.arbeit-text p,
.beleg blockquote,
.frage-text p, .frage-text li,
.ablauf p,
.recht p, .recht li,
.arbeit-gross-text p,
.preis-klapp-text,
.steuer-hinweis.steuer-hinweis {
  text-align: justify;
  text-justify: inter-character;
  hyphens: auto;
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 6 3 3;
  overflow-wrap: break-word;
  text-wrap: pretty;
}

/* Blocksatz auf dem Telefon: bleibt - aber ohne inter-character.

   Der Weg hierher, damit ihn niemand zweimal geht:

   1. Erst stand hier eine Liste schmaler Blöcke, die linksbündig
      blieben - aus Sorge vor Löchern zwischen den Wörtern.
   2. Dann habe ich sie auf Blocksatz gestellt und die Wortabstände
      gemessen: 5 bis 7 px, unauffällig. Das Maß war das falsche.
      `text-justify: inter-character` hält die Wortabstände genau
      deshalb klein, weil es den Rest zwischen die Buchstaben schiebt.
      In den Bewertungen stand dann "E r g e b n i s .  A b s o l u t e".
   3. Schärfer trennen half nicht: Die schlimmsten Zeilen haben gar
      keine trennbare Stelle. Gemessen über vier Fassungen von
      "6 3 3" bis "4 2 2" - die größte Dehnung blieb bei 8,8 px.

   Also andersherum. Auf dem Telefon verteilt sich der fehlende Platz
   wieder auf die Wortabstände. Gemessen bei 375 px, größte Lücke:

     Bewertungen           137 px   <- Ausnahme, siehe unten
     Karten, Fragen         40 px
     Zusagen                34 px
     Fließtext, Ablauf      24 bis 27 px
     Schreibhilfe-Block     15 px
     Steuerhinweis          14 px

   Weite Wortabstände sind das erwartbare Bild von Blocksatz - das
   kennt man aus jeder Zeitung. Gesperrte Buchstaben sind es nicht,
   und genau deshalb fallen sie sofort auf. */
@media (max-width: 767px) {
  .blocksatz,
  .fliess p, .fliess li,
  .karte p,
  .anderes p,
  .fall-text p,
  .fuss-text,
  .arbeit-text p,
  .beleg blockquote,
  .frage-text p, .frage-text li,
  .ablauf p,
  .recht p, .recht li,
  .arbeit-gross-text p,
  .preis-klapp-text,
  .zusagen li,
  .steuer-hinweis.steuer-hinweis {
    text-justify: auto;
  }

  /* Zwei Ausnahmen, beide nachgemessen.

     Die Bewertungen: Eine Zeile besteht dort aus zwei Wörtern
     ("Ergebnis. Absolute"), und der ganze fehlende Platz landet in
     der einen Lücke dazwischen - 137 px. Das ist kein weiter Abstand
     mehr, das ist ein Loch.

     Die kleine Zeile unter dem Paketnamen: zwei Zeilen, kurze Wörter,
     nichts zu trennen. 29 px gegen 4 px linksbündig. */
  .beleg blockquote,
  .paket p.klein {
    text-align: left;
  }
}

p + p { margin-top: 16px; }

.fliess { max-width: var(--spalte); }
.fliess p, .fliess ul, .fliess ol { color: var(--text-secondary); }
.fliess strong { color: var(--text-primary); font-weight: 600; }
.klein { font-size: 0.86rem; line-height: 1.6; color: var(--text-muted); }
.leise { color: var(--text-secondary); }

/* Signature: Verlaufs-Unterstrich unter dem Schlüsselwort */
.zeichen {
  color: var(--text-primary);
  padding-bottom: 0.06em;
  background-image: var(--gradient);
  background-repeat: no-repeat;
  background-size: 100% 0.07em;
  background-position: 0 1.05em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ─── Layout ────────────────────────────────────────────────────── */
.huelle { width: 100%; max-width: var(--breite); margin-inline: auto; padding-inline: var(--rand); }
/* Alle Inhaltsblöcke teilen sich dieselbe linke und rechte Kante wie die Hülle.
   Frühere Einzelbreiten (1100–1360 px, 46–52 rem) ließen sie gegeneinander versetzt
   erscheinen. Statt schmaler zu werden, brechen breite Blöcke jetzt in Spalten um. */
.abschnitt {
  padding-top: clamp(40px, 5vw, 72px);
  padding-bottom: var(--sektion);
  position: relative;
}
/* Leicht durchscheinend: Der Lichtschein liegt hinter der Seite. Wäre
   die Fläche deckend weiß, verschwände er in jedem zweiten Abschnitt. */
.abschnitt:nth-of-type(even) { background: rgba(255, 255, 255, 0.74); }
.abschnitt + .abschnitt { border-top: 1px solid var(--border); }

/* Abschnittskopf mittig – wie im bisherigen Auftritt */
.kopf { text-align: center; margin-bottom: clamp(40px, 5vw, 64px); }
.kopf h2 { max-width: 24ch; margin-inline: auto; }
.kopf p { margin-top: 18px; max-width: 52ch; margin-inline: auto; color: var(--text-secondary); }

/* Eyebrow mit Verlaufsstrich */
.marke-zeile {
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: 18px;
  text-transform: uppercase; letter-spacing: 0.22em;
  font-size: 0.78rem; font-weight: 600;
  color: var(--text-secondary);
}
.marke-zeile::before { content: ''; width: 28px; height: 2px; border-radius: 2px; background: var(--gradient); }

/* ─── Navigation: die schwebende Glaspille ──────────────────────── */
.leiste {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  padding: 14px var(--rand) 0;
  pointer-events: none;
}
.leiste-inhalt {
  pointer-events: auto;
  display: flex; align-items: center;
  --leiste-gap: 16px;
  gap: var(--leiste-gap);
  /* Die Glaspille steht auf derselben Kante wie der Inhalt darunter. */
  max-width: var(--inhalt); margin-inline: auto;
  min-height: 62px;
  /* Rechts weniger als links, und das hat einen Grund: Dort sitzt der
     Menüknopf, und der ist selbst rund. Die Pille ist 62 px hoch,
     ihre Rundung also 31 px im Halbmesser; der Knopf misst 44 px,
     Halbmesser 22. Bei 9 px Abstand liegen beide Mittelpunkte
     aufeinander - der Knopf sitzt dann mittig in der Rundung, und der
     Rand bleibt oben, rechts und unten gleich breit.
     Links steht Text, der braucht seinen eigenen Abstand. */
  padding: 0 9px 0 22px;
  border-radius: var(--radius-pille);
  background: var(--bg-glas-nav);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid var(--border);
  box-shadow: var(--schatten-nav);
  transition: background var(--tempo) var(--ease), box-shadow var(--tempo) var(--ease),
              border-color var(--tempo) var(--ease);
}
.leiste[data-gescrollt='true'] .leiste-inhalt {
  background: var(--bg-glas-nav-fest);
  border-color: var(--border-light);
  box-shadow: var(--schatten-nav-fest);
}

/* ─── Der Streifen über der Pille ───────────────────────────────────
   Die Pille schwebt 14 px unter der Fensterkante. In diesem Spalt lief
   der Seiteninhalt beim Scrollen sichtbar durch. Darüber liegt jetzt
   eine Blende in genau demselben Anstrich wie die Seite selbst:
   Grundton plus derselbe Lichtschein, beide über das volle Fenster
   gerechnet, damit es keine Kante gibt. Sie deckt die obersten 16 px
   voll ab und läuft bis 46 px weich aus - so verschwindet der Inhalt
   auch links und rechts neben der Pille, statt hart abgeschnitten zu
   werden. Sie liegt im Stapel der Leiste unter der Pille, aber über
   dem Seiteninhalt. */
.leiste::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  /* Hier steht der Schein fest an seiner Ruhelage, statt dem Zeiger zu
     folgen: Der Streifen ist 16 bis 46 px hoch, ein Unterschied fällt
     darin nicht auf - eine zweite bildschirmfüllende Fläche, die bei
     jeder Zeigerbewegung neu gezeichnet wird, dagegen sehr wohl. */
  background:
    radial-gradient(78vmax 78vmax at 50vw 30vh,
      rgba(240, 128, 176, 0.22) 0%,
      rgba(240, 140, 160, 0.15) 26%,
      rgba(240, 152, 144, 0.09) 44%,
      rgba(240, 176, 128, 0.04) 62%,
      transparent 80%),
    var(--bg-primary);
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 16px, transparent 46px);
  mask-image: linear-gradient(to bottom, #000 0, #000 16px, transparent 46px);
}

.wortmarke {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; margin-right: auto;
  color: var(--text-primary); font-weight: 700; font-size: 1.05rem;
  letter-spacing: 0.01em; text-decoration: none;
}
.wortmarke span { white-space: nowrap; }
.wortmarke img { width: 26px; height: 26px; }
.wortmarke:hover { color: var(--text-primary); }
.fuss .wortmarke { font-size: 1rem; }
/* Der Absatz unter der Wortmarke. Die Breite stand früher als
   style-Attribut am Element; sie gehört hierher, damit sie sich mit
   der Bildschirmbreite ändern kann. Im Browser bleibt er auf 30
   Zeichen begrenzt - so bricht er in vier ruhige Zeilen. Auf dem
   Telefon nimmt er die volle Spaltenbreite, sonst hätte der Blocksatz
   zu wenig Zeile, auf die er sich verteilen könnte. */
.fuss-text { margin-top: 16px; max-width: 32ch; }
@media (max-width: 619px) { .fuss-text { max-width: none; } }

.menue { display: flex; align-items: center; gap: 2px; list-style: none; padding: 0; }
.menue a {
  display: flex; align-items: center; min-height: 44px;
  padding: 8px 14px; border-radius: var(--radius-pille);
  color: var(--text-secondary); font-size: 0.88rem; font-weight: 500;
  text-decoration: none; white-space: nowrap;
  transition: color var(--tempo) var(--ease), background var(--tempo) var(--ease);
}
.menue > li > a:hover { color: var(--accent-text); }
/* Wo bin ich? Die aktuelle Seite trägt Farbe und Fettung – kein Balken
   darunter. Wo genau man ist, sagt beim Scrollen zusätzlich der
   Seitenname neben der Wortmarke. */
.menue a.hier,
.klappe > button[data-aktiv='true'] { color: var(--accent-text); font-weight: 600; }

.klappe { position: relative; }
.klappe > button {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 8px 14px;
  border: 0; border-radius: var(--radius-pille);
  background: none; color: var(--text-secondary);
  font-size: 0.88rem; font-weight: 500; cursor: pointer;
  transition: color var(--tempo) var(--ease), background var(--tempo) var(--ease);
}
.klappe > button:hover { color: var(--accent-text); }
.klappe > button svg { transition: transform var(--tempo) var(--ease); }
.klappe > button[aria-expanded='true'] { color: var(--text-primary); }
.klappe > button[aria-expanded='true'] svg { transform: rotate(180deg); }

.klappe-liste {
  /* Linksbündig zur Beschriftung „Leistungen“ statt mittig unter der
     Schaltfläche: Die Schaltfläche hat 14 px Innenabstand, die Einträge
     im Panel zusammen 24 px – die Differenz von 10 px verschiebt das
     Panel nach links, dann stehen beide Schriftkanten übereinander. */
  position: absolute; top: calc(100% + 12px); left: -10px;
  min-width: 320px; padding: 10px 14px; list-style: none;
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--schatten-nav-fest);
  display: none;
}
.klappe-liste[data-offen='true'] { display: block; }
/* Aufbau wie im Faktenkasten der Leistungsseiten: dünne Trennlinien,
   darüber der Name kräftig, darunter der Halbsatz leise. */
.klappe-liste li + li { border-top: 1px solid var(--border); }
.klappe-liste a {
  display: block; min-height: 0; padding: 14px 10px;
  border-radius: var(--radius-sm);
  font-size: 0.96rem; font-weight: 600; color: var(--text-primary);
}
/* Nur die Schriftfarbe wechselt, keine Fläche dahinter. */
.klappe-liste a:hover { color: var(--accent-text); }
.klappe-liste a[aria-current='page'] { color: var(--accent-text); }
.klappe-liste .beschreibung {
  display: block; margin-top: 3px;
  font-size: 0.82rem; font-weight: 400; color: var(--text-muted);
}

.menue-schalter {
  display: none; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 10px;
  border: 1px solid var(--border-light); border-radius: var(--radius-pille);
  background: rgba(255, 255, 255, 0.7); color: var(--text-primary); cursor: pointer;
}

/* Die drei Striche tragen denselben Verlauf wie das Logo. Er steckt als
   linearGradient im SVG, weil ein CSS-Verlauf keine Linie einfaerben
   kann - nur Flaechen. Die Stops sind dieselben Werte wie in
   --gradient, die Achse 0,0 -> 20,14 entspricht den 135 Grad dort.
   Der Ring drumherum bleibt unberuehrt. */
.menue-zeichen .strich {
  stroke: url(#menue-verlauf);
  stroke-width: 1.6;
  stroke-linecap: round;
  /* view-box statt fill-box: Eine waagerechte Linie hat null Hoehe,
     ihr eigenes Kaestchen taugt deshalb nicht als Bezug. So zaehlen die
     Koordinaten unten in viewBox-Einheiten ab der linken oberen Ecke. */
  transform-box: view-box;
  transition: transform var(--tempo) var(--ease), opacity 0.2s var(--ease);
}
.strich-1 { transform-origin: 10px 1px; }
.strich-2 { transform-origin: 10px 7px; }
.strich-3 { transform-origin: 10px 13px; }

/* Offen falten sich die beiden aeusseren Striche zum Pfeil nach unten:
   auf halbe Laenge gestaucht, um 45 Grad gekippt und so verschoben,
   dass sich ihre Enden bei 10/10,25 treffen. Der mittlere zieht sich
   in die Mitte zusammen und verschwindet. */
.menue-schalter[aria-expanded='true'] .strich-1 {
  transform: translate(-3.25px, 6px) rotate(45deg) scaleX(0.5);
}
.menue-schalter[aria-expanded='true'] .strich-2 {
  opacity: 0; transform: scaleX(0.2);
}
.menue-schalter[aria-expanded='true'] .strich-3 {
  transform: translate(3.25px, -6px) rotate(-45deg) scaleX(0.5);
}
@media (prefers-reduced-motion: reduce) {
  .menue-zeichen .strich { transition: none; }
}

@media (max-width: 979px) {
  .menue-schalter { display: inline-flex; }
  /* Das <nav> steht im Quelltext hinter dem Menüknopf - richtig so, der
     Knopf schaltet die Liste, also kommt er zuerst. Auf dem Telefon ist
     das <nav> aber leer: Die Liste darin klappt absolut positioniert
     auf und belegt keine Breite. Als Flex-Kind bekommt es trotzdem
     seinen Abstand zugeteilt, und der landet rechts vom Knopf - dadurch
     saß der 16 px weiter links als gedacht und kam nicht in die
     Rundung. Der negative Rand nimmt genau diesen Abstand zurück. */
  .leiste-inhalt > nav { margin-left: calc(-1 * var(--leiste-gap)); }
  .menue {
    position: absolute; top: calc(100% + 10px); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.96);
    /* Das Zeichen als leiser Grund unten links - genau dort, wo die
       rechtsbündigen Verweise Platz gelassen haben. Die Blässe steckt
       in der Datei (siehe _build/zeichen.py), nicht hier: Ein weisser
       Schleier über dem Bild würde an dieser Stelle die Milchglas-
       scheibe zunichte machen. background-attachment bleibt auf
       scroll, damit das Zeichen stehen bleibt, wenn die Liste bei
       geöffneten Leistungen in sich rollt. */
    --zeichen: 120px;
    --zeichen-rand: 14px;
    background-image: url(bilder/marke-menue-v1.png);
    background-repeat: no-repeat;
    background-position: left var(--zeichen-rand) bottom var(--zeichen-rand);
    background-size: var(--zeichen) var(--zeichen);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    backdrop-filter: blur(22px) saturate(180%);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    /* Unten links folgt die Ecke dem Zeichen. Der äussere Kreis der
       Marke ist dem Bild einbeschrieben, sein Halbmesser also die
       halbe Kantenlänge. Liegt der Mittelpunkt der Eckrundung auf dem
       Mittelpunkt des Kreises - halbes Zeichen plus sein Abstand zur
       Kante -, laufen Kante und Ring gleichmässig nebeneinander her,
       überall mit demselben Zwischenraum. Rechnet sich von selbst um,
       wenn das Zeichen oben grösser oder kleiner gesetzt wird. */
    border-bottom-left-radius: calc(var(--zeichen) / 2 + var(--zeichen-rand));
    box-shadow: var(--schatten-nav-fest);
    display: none;
    /* Passt nicht alles ins Fenster, rollt das Menü in sich selbst
       statt die Seite dahinter zu verschieben. Die genaue Höhe setzt
       das Skript beim Öffnen; der Rückfallwert greift, solange es
       noch nicht gemessen hat. overscroll-behavior hält das Rollen
       im Menü: am Ende der Liste läuft nicht die Seite weiter. */
    max-height: var(--menue-hoehe, 72vh);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .menue[data-offen='true'] { display: flex; }
  /* Das Menü klappt unter dem Knopf am rechten Rand auf, also stehen
     auch die Einträge dort: Blickachse Knopf → Liste, kein Sprung nach
     links. Die Einträge behalten ihre volle Breite als Trefferfläche,
     nur der Text rückt nach rechts. */
  .menue a, .klappe > button {
    width: 100%; padding: 12px 14px; font-size: 1rem; border-radius: var(--radius-md);
    justify-content: flex-end; text-align: right;
  }
  /* Der Pfeil wandert vor die Beschriftung, sonst schiebt er
     „Leistungen“ um seine Breite nach innen und der Eintrag stünde als
     einziger nicht auf der gemeinsamen rechten Kante. */
  /* row-reverse dreht die Hauptachse: flex-start ist damit rechts. */
  .klappe > button { flex-direction: row-reverse; justify-content: flex-start; }
  .klappe-liste {
    position: static; transform: none; min-width: 0; margin-top: 4px;
    background: rgba(23, 19, 31, 0.03); box-shadow: none; border-color: var(--border);
  }
  .klappe-liste a, .klappe-liste .beschreibung { text-align: right; }
}

/* ─── Schaltflächen ─────────────────────────────────────────────── */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 15px 32px;
  border-radius: var(--radius-pille);
  font-size: 1rem; font-weight: 600; letter-spacing: 0.01em;
  text-decoration: none; cursor: pointer;
  transition: transform var(--tempo) var(--ease), box-shadow var(--tempo) var(--ease),
              background var(--tempo) var(--ease), color var(--tempo) var(--ease);
}

/* Hauptknopf: dieselbe tiefe Akzentfarbe, die auf der ganzen Seite den
   Ton angibt – Beschriftungen, Verweise, Konturen. Vorher war es ein
   helleres Pink mit dunkler Schrift und einer Kante in einem dritten
   Ton; das wirkte wie ein aufgeklebtes Schild und stand neben dem
   übrigen Akzent. Weiß auf #C42D6B ergibt 5,34:1, die Fläche gegen die
   Seite 5,1:1 – eine Kante braucht es dafür nicht mehr. */
.knopf-voll {
  color: #FFFFFF;
  border: 0;
  background: var(--knopf);
  box-shadow: 0 1px 2px rgba(23, 19, 31, 0.06), 0 6px 18px rgba(196, 45, 107, 0.20);
}
.knopf-voll:hover, .knopf-voll:focus-visible {
  color: #FFFFFF;
  background: var(--accent-text);
  box-shadow: 0 2px 4px rgba(23, 19, 31, 0.08), 0 10px 26px rgba(196, 45, 107, 0.28);
}
.knopf-voll:active { background: var(--accent-tief); }

/* Zweitknopf: nur Text mit Pfeil, klar untergeordnet */
.knopf-leer { background: none; border: 0; padding: 15px 12px; color: var(--text-primary); }
.knopf-leer:hover { color: var(--accent-text); }
.knopf-leer::after {
  content: ''; width: 7px; height: 7px;
  border-right: 2px solid currentColor; border-top: 2px solid currentColor;
  transform: rotate(45deg); transition: transform var(--tempo) var(--ease);
}
.knopf-leer:hover::after { transform: rotate(45deg) translate(2px, -2px); }

.knopf-reihe { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; }
.hero .knopf-reihe { justify-content: center; }
.hero .knopf-voll { min-width: 240px; }
@media (max-width: 479px) {
  .knopf-reihe { flex-direction: column; }
  .knopf-reihe .knopf { width: 100%; }
}

/* ─── Hero ──────────────────────────────────────────────────────── */
.hero {
  min-height: 100vh;
  min-height: 100svh;   /* der Teil, der bei sichtbarer Browserleiste bleibt */
  display: flex; align-items: center;
  padding: 116px 0 72px;
  position: relative; overflow: hidden;
  text-align: center;
}
.hero::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 90% 70% at 50% -5%, rgba(240, 128, 176, 0.26) 0%, rgba(240, 176, 128, 0.12) 45%, transparent 74%);
  pointer-events: none;
}
.hero .huelle { position: relative; z-index: 1; width: 100%; }
/* ─── Das Zeichen im Kopfbereich schwenkt zum Zeiger ────────────────
   Der Fluchtpunkt sitzt am Elternteil, gedreht wird nur das Bild - der
   Platz auf der Seite bleibt derselbe, es rückt keinen Millimeter. Die
   Winkel setzt seite.js; ohne Skript, auf Touchgeräten und bei
   „weniger Bewegung" stehen sie auf null und nichts bewegt sich. */
/* Gedreht wird die Hülle, nicht das Bild - so dreht der Lichtschein
   darüber mit. Der Fluchtpunkt steckt in der Transformation selbst,
   dadurch braucht es kein zusätzliches Elternteil. Je kleiner er ist,
   desto stärker die perspektivische Verkürzung. */
.hero-logo-raum {
  position: relative;
  width: 240px; height: 240px; margin: 0 auto 28px;
  transform-style: preserve-3d;
  transform: perspective(420px)
             rotateX(var(--kipp-x, 0deg))
             rotateY(var(--kipp-y, 0deg));
  /* Die Dauer steuert das Skript: kurz, solange das Zeichen dem Zeiger
     folgt, länger beim Aufrichten und beim Wiedereintritt. */
  transition: transform var(--tempo-kipp, 0.28s) var(--weich);
  will-change: transform;
}
.hero-logo {
  width: 100%; height: 100%; margin: 0; opacity: 0.95;
  /* Der Schlagschatten wandert entgegen der Neigung - das ist die
     Angabe, an der das Auge die Tiefe wirklich abliest. Ohne ihn dreht
     sich eine Fläche, mit ihm steht ein Körper im Raum. */
  filter: drop-shadow(var(--schatten-x, 0px) var(--schatten-y, 18px)
                      30px rgba(120, 60, 100, 0.34));
  transition: filter var(--tempo-kipp, 0.28s) var(--weich);
  will-change: filter;
}
/* Glanzlicht auf der Seite, die dem Zeiger zugewandt ist. Es liegt
   über dem Zeichen und ist auf dessen Umriss beschnitten - deshalb die
   Maske aus derselben Bilddatei. */
.hero-logo-raum::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(58% 58% at var(--glanz-x, 50%) var(--glanz-y, 50%),
    rgba(255, 255, 255, 0.62) 0%,
    rgba(255, 255, 255, 0.22) 40%,
    transparent 70%);
  -webkit-mask-image: url("bilder/marke-480.png");
          mask-image: url("bilder/marke-480.png");
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  mix-blend-mode: soft-light;
}
@media (prefers-reduced-motion: reduce) {
  .hero-logo-raum { transform: none; transition: none; }
  .hero-logo { filter: none; transition: none; }
  .hero-logo-raum::after { display: none; }
}

/* Nur die Pille rückt nach oben, nicht der übrige Kopfinhalt. Sie wird
   dafür aus dem Fluss genommen und dicht unter die Navileiste gesetzt;
   Überschrift, Vorspann und Schaltflächen bleiben mittig im Fenster.
   Auf der Startseite nicht – dort gehört die Pille unter das Logo. */
.hero:not(:has(.hero-logo)) .hero-marke {
  position: absolute; top: clamp(120px, 15vh, 164px);
  left: 50%; translate: -50% 0;
  margin-bottom: 0; z-index: 2;
}
/* Unterhalb von 900 px stapelt sich der Kopfbereich und wird länger –
   die frei hängende Pille legte sich dort über die Überschrift. Also
   zurück in den Fluss. Der Kopfbereich wird dafür zur Spalte, sonst
   stellte sich die Pille neben den Inhalt statt darüber. */
@media (max-width: 899px) {
  .hero { flex-direction: column; justify-content: center; }
  .hero:not(:has(.hero-logo)) .hero-marke {
    position: static; translate: none;
    margin: 0 auto 24px; align-self: center;
  }
}

/* Flache Fenster: Logo und Abstände kleiner, damit von Überschrift und
   Schaltflächen mehr ins Bild passt. */
@media (min-width: 769px) and (max-height: 720px) {
  .hero { padding: 88px 0 44px; }
  .hero-logo-raum { width: 148px; height: 148px; margin-bottom: 16px; }
  .hero .fliess { font-size: 1.05rem; margin-top: 18px; }
}

/* Impressum, Datenschutz und die Fehlerseite behalten einen knappen Kopf.
   Dort ist der Text darunter der eigentliche Inhalt – ihn hinter einen
   bildschirmfüllenden Titel zu schieben wäre nur ein Hindernis. */
.hero-schlicht { min-height: 0; padding-top: 128px; }
.hero h1 { max-width: 18ch; margin-inline: auto; }
.hero .fliess { margin: 24px auto 0; max-width: 56ch; font-size: 1.15rem; }

.hero-marke {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  margin-bottom: 24px; padding: 8px 18px;
  text-align: center;   /* auf schmalen Fenstern bricht die Zeile – dann mittig */
  border: 1px solid var(--border-light); border-radius: var(--radius-pille);
  background: rgba(255, 255, 255, 0.75);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  /* Gesetzt wie die Wortmarke oben links: Versalien, dieselbe enge
     Sperrung, der Name in 700. Nur eine Spur kleiner, damit die Pille
     die Überschrift darunter nicht bedrängt. */
  font-size: clamp(0.78rem, 2.4vw, 0.9rem); font-weight: 500; color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: 0.01em;
}
.hero-marke b { color: var(--text-primary); font-weight: 700; }

@media (max-width: 768px) {
  .hero { min-height: auto; padding: 104px 0 56px; }
  .hero-logo-raum { width: 162px; height: 162px; margin-bottom: 22px; }
}

/* Faktenkasten auf den Leistungsseiten */
.hero-gitter {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 25rem);
  gap: clamp(32px, 4vw, 72px); align-items: center; text-align: left;
}
.hero-gitter h1, .hero-gitter .fliess { margin-inline: 0; }
.hero-gitter h1 { max-width: 21ch; }
.hero-gitter .fliess { max-width: 60ch; }
.hero-gitter .knopf-reihe { justify-content: flex-start; }
@media (max-width: 899px) {
  .hero-gitter { grid-template-columns: 1fr; text-align: center; }
  .hero-gitter h1, .hero-gitter .fliess { margin-inline: auto; }
  .hero-gitter .knopf-reihe { justify-content: center; }
}

.fakten {
  margin: 0; padding: 26px 24px; text-align: left;
  background: var(--bg-glas);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--schatten-karte);
}
.fakten > div + div { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border); }
.fakten dt { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-muted); }
.fakten dd { margin: 5px 0 0; font-size: 1.08rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.fakten dd small { display: block; font-size: 0.78rem; font-weight: 400; color: var(--text-muted); margin-top: 3px; }

/* ─── Karten ──────────────────────────────────────────────────────
   Ohne Hintergrundunschärfe. Sie stand vorher auf allen diesen
   Flächen - auf der Startseite sind das 41 Stück mit zusammen rund
   6,9 Millionen Bildpunkten. So eine Fläche muss der Browser jedes
   Mal neu weichzeichnen, wenn sich darunter etwas ändert: beim
   Scrollen, beim Tippen im Formular, bei jeder Bewegung dahinter. Am
   Rechner ist das Formular 1314 px breit, auf dem Telefon 335 -
   deshalb war es dort träge und hier nicht.

   Zu sehen war davon nichts: Hinter den Karten liegt nur der weiche
   Farbverlauf der Seite, und ein weicher Verlauf bleibt beim
   Weichzeichnen derselbe. Zwei Bildschirmfotos, mit und ohne, waren
   nicht zu unterscheiden. Die Unschärfe bleibt dort, wo sie wirklich
   etwas tut: unter der Navileiste und dem Menü, wo Inhalt
   durchläuft. */
.karte, .paket, .beleg, .arbeit, .nachbar, .leer, .formular, .preis-panel, .frage,
.preis-klapp {
  position: relative;
  background: var(--bg-glas);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--schatten-karte);
}
/* Ein einziger Überfahr-Effekt für alles, was anklickbar ist: eine Kontur
   im Logoverlauf und ein Schein nach außen – dieselbe Auszeichnung, die
   das hervorgehobene Paket dauerhaft trägt. Nichts verschiebt sich dabei;
   springende Kacheln machen eine Liste unruhig und lassen den Zeiger
   verrutschen. Der frühere Verlaufsbalken an der Oberkante entfällt.

   Nicht anklickbare Kästen (Inhaltskacheln, Kundenstimmen, Pakete,
   Portfoliobilder) bekommen bewusst gar keinen Effekt – ein Aufleuchten
   ohne Ziel verspricht einen Klick, den es nicht gibt. */
a.karte, a.nachbar, .frage, .paket, .preis-klapp {
  transition: box-shadow 0.28s var(--ease), border-color 0.28s var(--ease);
}
a.karte::after, a.nachbar::after, .frage::after, .preis-klapp::after,
.paket:not([data-empfohlen='true'])::after {
  /* Die Kontur beginnt an der Außenkante und ist 2 px stark – dieselbe
     Stärke und dieselbe Lage wie die feste Kante des hervorgehobenen
     Pakets. inset: -1px, weil der graue Grundrahmen 1 px breit ist. */
  content: ''; position: absolute; inset: -1px;
  border-radius: calc(var(--radius-lg) + 1px); padding: 2px;
  background: var(--gradient);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0; pointer-events: none; z-index: 2;
  transition: opacity 0.28s var(--ease);
}
/* Fragen und Preisklappen haben einen kleineren Eckradius als die Karten. */
.frage::after, .preis-klapp::after { border-radius: calc(var(--radius-md) + 1px); }
a.karte:hover::after, a.karte:focus-visible::after,
a.nachbar:hover::after, a.nachbar:focus-visible::after,
.frage:hover::after, .frage:has(summary:focus-visible)::after,
.preis-klapp:hover::after, .preis-klapp:has(summary:focus-visible)::after,
.paket:not([data-empfohlen='true']):has(a:hover)::after,
.paket:not([data-empfohlen='true']):has(a:focus-visible)::after { opacity: 1; }

/* Der graue Grundrahmen liegt außerhalb der Kontur und ergäbe sonst eine
   zweite, blasse Linie daneben. Beim Überfahren wird er unsichtbar –
   die Verlaufskontur deckt dieselbe Stelle ab. */
a.karte:hover, a.karte:focus-visible,
a.nachbar:hover, a.nachbar:focus-visible,
.frage:hover, .frage:has(summary:focus-visible),
.preis-klapp:hover, .preis-klapp:has(summary:focus-visible),
.paket:not([data-empfohlen='true']):has(a:hover) { border-color: transparent; }

a.karte:hover, a.karte:focus-visible,
a.nachbar:hover, a.nachbar:focus-visible,
.frage:hover, .preis-klapp:hover,
.paket:has(a:hover), .paket:has(a:focus-visible) { box-shadow: var(--schein); }

@media (prefers-reduced-motion: reduce) {
  a.karte, a.nachbar, .frage, .paket, .preis-klapp,
  a.karte::after, a.nachbar::after, .frage::after, .paket::after,
  .preis-klapp::after { transition: none; }
}

/* Leistungskarten */
.karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 24px; }
@media (min-width: 1500px) { .karten { grid-template-columns: repeat(4, 1fr); } }
/* Genau vier Karten: nie 3 + 1 stehen lassen - entweder alle vier nebeneinander oder 2 x 2 */
@media (min-width: 1200px) and (max-width: 1499px) {
  .karten:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 700px) and (max-width: 1199px) {
  .karten:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, 1fr); }
}
.karte { display: flex; flex-direction: column; padding: 30px 28px; text-decoration: none; color: inherit; text-align: left; }
.karte h3 { margin-bottom: 10px; font-size: 1.25rem; }
.karte p { color: var(--text-secondary); font-size: 0.95rem; }
.karte-preis {
  margin-top: auto; padding-top: 18px; border-top: 1px solid var(--border);
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
.karte-preis b { font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.karte-preis span { font-size: 0.78rem; color: var(--text-muted); }
.karte-weiter {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 16px;
  font-size: 0.9rem; font-weight: 600; color: var(--text-secondary);
  transition: color var(--tempo) var(--ease), transform var(--tempo) var(--ease);
}
.karte:hover .karte-weiter { color: var(--accent-text); transform: translateX(4px); }

/* ─── Preise ────────────────────────────────────────────────────── */
.preis-panel { padding: 30px clamp(20px, 3vw, 40px); margin: 0 auto 24px; text-align: left; }
.preis-kopf {
  padding-bottom: 14px; margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
  font-weight: 600; font-size: 0.78rem;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-muted);
}
/* Bei breitem Fenster mehrspaltig, damit Leistung und Betrag beieinander
   bleiben. column-width statt fester Spaltenzahl: die Spalten entstehen
   erst, wenn wirklich Platz da ist. */
.preis-liste { margin: 0; columns: 34rem auto; column-gap: clamp(28px, 4vw, 64px); }
.preis-zeile {
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  padding-block: 18px; border-bottom: 1px solid var(--border);
  break-inside: avoid;
}
.preis-liste .preis-zeile:last-child { border-bottom: 0; }
.preis-zeile dt { flex: 1 1 auto; min-width: 0; margin: 0; }
.preis-zeile dd { flex: 0 0 auto; margin: 0; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.preis-name { font-weight: 500; }
.preis-brutto { font-weight: 700; font-size: 1.08rem; }
.preis-detail { display: block; margin-top: 4px; font-size: 0.88rem; color: var(--text-muted); }

.pakete {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  gap: 24px;
}
.paket { display: flex; flex-direction: column; padding: 30px 28px; text-align: left; }
.paket[data-empfohlen='true'] {
  /* Die Füllung muss weitgehend deckend sein: bei niedriger Deckkraft
     scheint der Verlauf aus der border-box durch die ganze Karte. */
  background: linear-gradient(#FFFFFF, #FFFFFF) padding-box,
              var(--gradient) border-box;
  border: 2px solid transparent;
  box-shadow: 0 2px 8px rgba(23, 19, 31, 0.05), 0 16px 40px rgba(196, 45, 107, 0.15);
}
.paket-marke-zeile { display: flex; align-items: center; height: 26px; margin-bottom: 16px; }
.paket-marke {
  /* Kein gefüllter Aufkleber mehr. Die Karte ist schon durch ihre
     Verlaufskante hervorgehoben – ein zweites lautes Signal daneben ist
     zu viel. Stattdessen dieselbe Auszeichnung, die auf der ganzen Seite
     kleine Labels tragen: Verlaufsstrich, Versalien, Akzentfarbe. */
  display: inline-flex; align-items: center; gap: 10px;
  height: 26px;
  color: var(--accent-text);
  font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
}
.paket-marke::before {
  content: ''; width: 22px; height: 2px; flex: none;
  border-radius: 2px; background: var(--gradient);
}
.paket h3 { margin-bottom: 8px; font-size: 1.3rem; }
.paket > .klein { min-height: 3.2em; }
/* Sagt geradeheraus, was der Betrag ist. */
.paket-art {
  margin-top: 22px;
  font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-muted);
}
.paket-preis { margin-top: 4px; font-size: 2rem; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
/* Steuerangabe und Nettobetrag standen in einer Zeile, durch einen
   Punkt getrennt - der Betrag las sich dadurch wie die Steuer selbst.
   Jetzt zwei Zeilen, und "netto" steht vor der Zahl. */
.paket-steuer { font-size: 0.8rem; color: var(--text-muted); line-height: 1.45; }
/* Was das Paket spart. Der Vergleichswert bleibt zurückhaltend, die
   Ersparnis selbst trägt die Akzentfarbe - sie ist der Grund, warum
   die Zeile überhaupt dasteht. */
.paket-sparen {
  margin-top: 10px; padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  font-size: 0.84rem; color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.paket-sparen b { color: var(--accent-text); font-weight: 700; }
.paket-steuer span { display: block; font-variant-numeric: tabular-nums; }
.paket ul { margin: 24px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; font-size: 0.93rem; }
.paket li { display: grid; grid-template-columns: 18px 1fr; gap: 11px; align-items: start; color: var(--text-secondary); }
.paket li b { color: var(--text-primary); font-weight: 500; }
.paket li svg { margin-top: 5px; color: var(--accent-text); }
.paket li[data-fehlt='true'] svg { color: #A79DBE; }
.paket-hinweis { margin-top: auto; padding-top: 26px; }
.paket .knopf { width: 100%; }

/* Der Kasten läuft auf dieselben Kanten wie die Aufklappkarten
   darüber - also über die volle Inhaltsspalte. Vorher waren es 1100 px
   in der Mitte: Bei 1440 px Fensterbreite stand er dadurch 107 px
   schmaler als die Karten und sprang sichtbar ein. */
.steuer-hinweis {
  margin-top: 36px; padding: 20px 24px;
  border: 1px solid rgba(196, 45, 107, 0.22);
  background: var(--accent-soft);
  border-radius: var(--radius-md);
  font-size: 0.9rem; color: var(--text-secondary); text-align: left;
}
.steuer-hinweis strong { color: var(--text-primary); font-weight: 600; }

/* ─── Einzelpreise als Aufklappliste ────────────────────────────────
   Auf der Startseite standen bisher nur die Pakete. Die Einzelpreise
   liegen jetzt darunter, eine Leistung je Zeile. Offen ist immer nur
   eine (name="einzelpreise"), wie bei den häufigen Fragen. Die
   Preistafel darin verliert ihren eigenen Rahmen - sonst säße eine
   Karte in einer Karte. */
.preis-vorspann {
  max-width: 62ch; margin: -8px auto 24px; text-align: center;
  color: var(--text-secondary);
}
/* minmax(0, 1fr) statt der Voreinstellung: sonst weigern sich die
   Rasterfelder, unter ihre Mindestbreite zu gehen, und die breiteste
   Preistafel zieht die ganze Liste über den Bildschirmrand. */
.preis-klappen { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.preis-klapp, .preis-klapp-inhalt, .preis-klapp-inhalt .preis-liste { min-width: 0; }
.preis-klapp { border-radius: var(--radius-md); }
.preis-klapp[open] { border-color: var(--accent); }
.preis-klapp > summary {
  display: flex; align-items: center; gap: 18px;
  padding: 20px clamp(20px, 3vw, 30px);
  font-size: 1.02rem; font-weight: 600;
  cursor: pointer; list-style: none;
}
.preis-klapp > summary::-webkit-details-marker { display: none; }
.preis-klapp > summary:hover { color: var(--accent-text); }
.preis-klapp-name { min-width: 0; }
.preis-klapp-ab {
  margin-left: auto; font-size: 0.86rem; font-weight: 600;
  color: var(--text-muted); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.preis-klapp > summary > svg {
  flex: none; color: var(--accent-text);
  transition: transform var(--tempo) var(--ease);
}
.preis-klapp[open] > summary > svg { transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) { .preis-klapp > summary > svg { transition: none; } }
.preis-klapp-inhalt { padding: 0 clamp(20px, 3vw, 30px) 24px; }
.preis-klapp-inhalt .preis-panel {
  padding: 0; margin: 0; background: none; border: 0;
  box-shadow: none; border-radius: 0;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.preis-klapp-text { color: var(--text-secondary); max-width: var(--spalte); }
.preis-klapp-link {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; margin-top: 8px;
  color: var(--accent-text); font-weight: 600; text-decoration: none;
}
.preis-klapp-link:hover { text-decoration: underline; }

/* Zwischenüberschrift. Der Abstand nach oben fällt nur weg, wenn sie
   direkt am Abschnittskopf steht - vorher galt das über :first-of-type
   für jede erste h3 im Abschnitt, auch wenn ein Kartenraster oder eine
   Preistafel darüberstand. Dann klebte die Überschrift daran fest. */
.preis-titel { text-align: center; margin: clamp(48px, 5vw, 72px) 0 24px; font-size: 1.3rem; }
.kopf + .preis-titel { margin-top: 0; }

/* ─── Ablauf ────────────────────────────────────────────────────── */
/* Ablaufschritte stehen untereinander, nie nebeneinander. Mehrspaltig
   ließ die letzte Zeile mit einer einzelnen Karte allein stehen, und die
   Reihenfolge 01–05 war über zwei Zeilen hinweg schwerer zu lesen. Die
   Liste behält dieselbe Obergrenze wie der Kopfbereich der
   Leistungsseiten, statt sich über die ganze Fensterbreite zu ziehen. */
.ablauf {
  counter-reset: schritt; list-style: none; padding: 0;
  display: grid; gap: 16px;
  grid-template-columns: 1fr;
}
.ablauf li {
  counter-increment: schritt;
  display: grid; grid-template-columns: 56px 1fr; gap: 22px; align-items: start;
  padding: 24px 26px;
  background: var(--bg-glas);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--schatten-karte);
  text-align: left;
}
.ablauf li::before {
  content: counter(schritt, decimal-leading-zero);
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--accent-soft); border: 1px solid rgba(196, 45, 107, 0.30);
  font-size: 0.88rem; font-weight: 700; color: var(--accent-text);
  font-variant-numeric: tabular-nums;
}
.ablauf h3 { margin-bottom: 6px; }
.ablauf p { color: var(--text-secondary); font-size: 0.95rem; }
@media (max-width: 599px) { .ablauf li { grid-template-columns: 1fr; gap: 14px; } }

/* ─── Zwei Spalten ──────────────────────────────────────────────── */
.zweispalt { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 72px); align-items: center; text-align: left; }
@media (max-width: 819px) { .zweispalt { grid-template-columns: 1fr; } }
.person { display: flex; justify-content: center; }
.person img { border-radius: var(--radius-xl); border: 1px solid var(--border); box-shadow: var(--schatten-karte); }

/* ─── Belege ────────────────────────────────────────────────────── */
.belege {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 24px;
}
.beleg { padding: 30px 28px; overflow: hidden; text-align: left; }
.beleg blockquote { margin: 0 0 18px; font-size: 1.02rem; line-height: 1.7; color: var(--text-primary); }
.beleg cite { font-style: normal; font-weight: 600; font-size: 0.95rem; }
.beleg .quelle { display: block; font-size: 0.82rem; color: var(--text-muted); font-weight: 400; margin-top: 2px; }
.sterne { display: inline-flex; gap: 3px; margin-bottom: 16px; color: #C25F00; }

/* ─── Galerie ───────────────────────────────────────────────────── */
/* Spuren mit Ober- statt nur Untergrenze: bei wenigen Arbeiten steht die
   Reihe mittig, statt ein einzelnes Stueck an den linken Rand zu heften. */
.galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 34rem)); gap: 24px; justify-content: center; }
.arbeit { overflow: hidden; text-align: left; }
.arbeit img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.arbeit-text { padding: 22px 26px 26px; }
.arbeit-text h3 { font-size: 1.1rem; }
.arbeit-text p { margin-top: 6px; font-size: 0.9rem; color: var(--text-secondary); }

.leer { padding: 40px 36px; text-align: left; }
.leer h3 { margin-bottom: 12px; font-size: 1.2rem; }
.leer p { color: var(--text-secondary); max-width: var(--spalte); }

/* ─── Fragen ────────────────────────────────────────────────────── */
/* Eine Frage je Zeile. Mehrere Spalten waren der Fehler: Karten in einer
   Rasterzeile hängen aneinander – klappte man eine auf, wuchsen die
   Nachbarn mit oder die ganze Zeile darunter rutschte weg und ließ ein
   Loch. Die Breite wird stattdessen waagerecht genutzt: die Antwort
   klappt neben die Frage, nicht darunter. Dadurch wächst die Zeile nur
   um wenige Pixel und nichts darunter springt. */
.fragen {
  display: grid; gap: 14px; grid-template-columns: 1fr; align-content: start;
}
.frage { border-radius: var(--radius-md); transition: border-color var(--tempo) var(--ease); }
.frage[open] { border-color: var(--accent); }
.frage summary {
  display: flex; align-items: center; justify-content: space-between; gap: 22px;
  padding: 22px 26px; font-size: 1.02rem; font-weight: 600;
  cursor: pointer; list-style: none; text-align: left;
}
.frage summary::-webkit-details-marker { display: none; }
.frage summary:hover { color: var(--accent-text); }
.frage summary svg { flex: none; color: var(--accent-text); transition: transform var(--tempo) var(--ease); }
.frage[open] summary svg { transform: rotate(45deg); }
.frage-text { padding: 0 26px 24px; color: var(--text-secondary); text-align: left; }
@media (min-width: 64rem) {
  .frage[open] {
    display: grid; align-items: start;
    grid-template-columns: minmax(0, 30rem) minmax(0, 1fr);
    column-gap: clamp(24px, 3vw, 56px);
  }
  /* Das Zeichen bleibt am rechten Kartenrand, sonst springt es beim
     Aufklappen in die Mitte. */
  .frage[open] { position: relative; }
  .frage[open] summary { align-items: flex-start; padding-right: 60px; }
  .frage[open] summary svg { position: absolute; top: 24px; right: 26px; }
  .frage[open] .frage-text { padding: 22px 60px 24px 0; }
}

/* ─── Formular ──────────────────────────────────────────────────── */
.formular { padding: 36px clamp(20px, 4vw, 40px); text-align: left; }
/* Formularraster: höchstens etwa drei Spalten. Ein Eingabefeld über
   2400 px ist keine Hilfe – der Blick muss vom Anfang der Zeile bis zum
   Ende wandern, obwohl dort eine Postleitzahl steht. Der Kasten selbst
   bleibt so breit wie alle anderen Blöcke. */
.feld-gitter {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
  gap: 22px;
}
.feld-voll { grid-column: 1 / -1; }
/* Felder, die mehr Platz brauchen als eine Spalte, aber nicht die ganze
   Breite: Beschreibung, Datei, Leistungsauswahl. Unterhalb von 60rem
   gibt es ohnehin nur eine Spalte – dort volle Breite. */
.feld-breit { grid-column: 1 / -1; }
@media (min-width: 60rem) { .feld-breit { grid-column: span 2; } }

/* Block mit den Feldern, die zur gewählten Leistung passen.
   Er steht offen sichtbar – nicht mehr im zugeklappten Bereich. */
.feld-passend {
  padding: 22px clamp(16px, 2vw, 26px);
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
}
.feld-passend-kopf {
  margin-bottom: 18px;
  font-size: 0.78rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--text-secondary);
}
@media (max-width: 619px) {
  .feld-gitter { grid-template-columns: 1fr; }
  /* seite.js gibt dem letzten Feld einer Zeile den Rest der Breite. Bei
     einer einzigen Spalte darf das nicht greifen – sonst entstünde eine
     zweite Spalte und die Seite ließe sich seitwärts schieben. Der
     Zuschlag steht als Inline-Stil am Element, deshalb !important. */
  .feld-gitter > .feld { grid-column: 1 / -1 !important; }
}
.feld { display: flex; flex-direction: column; gap: 8px; }
.feld label { font-size: 0.92rem; font-weight: 500; }
.feld label .pflicht { color: var(--accent-text); }
.feld .hinweis { font-size: 0.8rem; color: var(--text-muted); }

.eingabe {
  width: 100%; min-height: var(--feldhoehe); padding: 14px 16px;
  background-color: #FFFFFF;
  border: 1px solid var(--border-feld);
  border-radius: var(--radius-md);
  box-shadow: var(--schatten-feld);
  color: var(--text-primary);
  transition: border-color var(--tempo) var(--ease), box-shadow var(--tempo) var(--ease);
}
.eingabe::placeholder { color: #857E99; }
.eingabe:hover { border-color: var(--accent-text); }
.eingabe:focus-visible { border-color: var(--accent); box-shadow: var(--schatten-feld), 0 0 0 3px var(--accent-soft); outline-offset: 1px; }
/* Wächst beim Tippen mit (seite.js). Deshalb kein eigener Rollbalken:
   das Feld wird höher, statt den Text nach oben wegzuschieben. */
textarea.eingabe { min-height: 140px; resize: vertical; line-height: 1.65; overflow-y: hidden; }
textarea.eingabe.eine-zeile { min-height: var(--feldhoehe); }
/* Das Dateifeld bringt seine eigene Schaltfläche mit und wird davon
   einen Tick höher als der Rest. Feste Höhe statt Mindesthöhe. */
input[type="file"].eingabe { height: var(--feldhoehe); padding-block: 0; line-height: normal; }
select.eingabe {
  appearance: none; padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23514B63' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
}
input[type='file'].eingabe { padding: 12px 16px; cursor: pointer; }
input[type='file']::file-selector-button {
  margin-right: 14px; padding: 8px 16px;
  border: 1px solid var(--border-light); border-radius: var(--radius-pille);
  background: var(--bg-primary); color: var(--text-primary);
  font-size: 0.86rem; font-weight: 500; cursor: pointer;
}

/* Vorbelegte Leistung: sieht aus wie ein Feld, damit sie in derselben
   Rasterzelle sitzt wie das Auswahlfeld auf der Startseite. */
.anfrage-zu-wert {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 52px; margin: 0; padding: 12px 14px 12px 16px;
  background: var(--accent-soft);
  border: 1px solid rgba(196, 45, 107, 0.24);
  border-radius: var(--radius-md);
  font-size: 1rem;
}
.anfrage-zu-wert b { color: var(--text-primary); font-weight: 600; }
/* Gewähltes Paket: Name und Preis stehen untereinander. In einer Zeile
   brach der Betrag zwischen Zahl und Währungszeichen um - "2.389" oben,
   "€" darunter. Ein Preis gehört nicht auseinandergerissen. */
.paket-wahl { display: block; min-width: 0; }
.paket-wahl > b { display: block; font-size: 0.95rem; line-height: 1.3; }
.paket-wahl-preis {
  display: block; margin-top: 1px;
  font-size: 0.84rem; line-height: 1.2; color: var(--text-secondary);
}
/* Der Betrag bleibt zusammen, die Steuerangabe darf dahinter umbrechen. */
.paket-wahl-preis b { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.paket-wahl-preis span { font-weight: 400; }
.paket-wahl-preis b + span::before { content: ' \00b7 '; }
/* Der Kasten ist genauso hoch wie ein Eingabefeld daneben: dessen
   Innenabstand (2 x 14) plus eine Textzeile (28,9) plus Rahmen ergibt
   59 px. Zwei kleinere Zeilen passen mit 8 px Luft hinein. */
[data-paket-feld] .anfrage-zu-wert { min-height: var(--feldhoehe); padding-block: 8px; }

/* Kurzauskunft zur gewählten Leistung - Preis und, wo es eindeutig
   ist, der Beschreibungstext aus der Preisliste. Sie steht im Formular
   und nicht hinter einem Verweis: Wer gerade eine Anfrage schreibt,
   soll dafür nicht die Seite wechseln müssen. */
.leistung-info {
  margin: 0; padding: 14px 18px;
  border: 1px solid rgba(196, 45, 107, 0.22);
  border-radius: var(--radius-md);
  background: var(--accent-soft);
  font-size: 0.94rem; color: var(--text-secondary);
  line-height: 1.5;
}
.leistung-info b {
  color: var(--text-primary); font-weight: 700;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.leistung-info span:not(:empty)::before { content: ' · '; color: var(--text-muted); }

/* Was im Paket steckt - unter der Feldzeile, damit der Kasten oben
   seine Höhe behält. Ruhig gehalten: es ist eine Auskunft, kein Feld. */
.paket-inhalt {
  padding: 16px 18px;
  border: 1px solid rgba(196, 45, 107, 0.22);
  border-radius: var(--radius-md);
  background: var(--accent-soft);
}
.paket-kopfzeile { margin: 0 0 14px; }
.paket-kopfzeile > b { display: block; font-size: 1.02rem; color: var(--text-primary); }
.paket-inhalt-kopf {
  margin: 0 0 10px;
  font-size: 0.78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-muted);
}
.paket-inhalt-liste {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 8px 28px;
}
.paket-inhalt-liste li {
  display: grid; grid-template-columns: 15px 1fr; gap: 10px; align-items: start;
  font-size: 0.94rem; color: var(--text-secondary);
}
.paket-inhalt-liste svg { margin-top: 4px; color: var(--accent-text); }
.anfrage-zu-wert button {
  flex: none; min-height: 32px; padding: 4px 14px;
  border: 1px solid var(--border-light); border-radius: var(--radius-pille);
  background: #FFFFFF; color: var(--text-primary);
  font-family: inherit; font-size: 0.82rem; font-weight: 500; cursor: pointer;
}
.anfrage-zu-wert button:hover { border-color: var(--accent-text); color: var(--accent-text); }

/* Beim Umbau des Leistungsfelds versehentlich mitgelöscht und hier
   wiederhergestellt: der zugeklappte Block und das Zustimmungsfeld. */
.mehr-details { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-primary); }
.mehr-details > summary { display: flex; align-items: center; gap: 12px; padding: 16px 22px; font-weight: 600; cursor: pointer; list-style: none; }
.mehr-details > summary::-webkit-details-marker { display: none; }
.mehr-details > summary svg { color: var(--accent-text); transition: transform var(--tempo) var(--ease); }
.mehr-details[open] > summary svg { transform: rotate(90deg); }
.mehr-details > summary .klein { font-weight: 400; margin-left: auto; }
.mehr-details-inhalt { padding: 0 22px 24px; }

.zustimmung { display: grid; grid-template-columns: 24px 1fr; gap: 13px; align-items: start; font-size: 0.92rem; color: var(--text-secondary); }
.zustimmung input { width: 24px; height: 24px; margin-top: 1px; }

/* ─── Fehlende Pflichtangaben ───────────────────────────────────────
   Beim Absenden bekommt jedes Feld, das noch fehlt, einen roten Rand
   und einen weichen Schein darum - dieselbe Farbe wie die Fehlermeldung
   darunter, damit beides zusammengehört. Der Schein liegt außen, das
   Feld springt also nicht. Die Markierung geht weg, sobald etwas
   drinsteht (seite.js). */
.eingabe.fehlt,
.klappwahl-knopf.fehlt,
.kalender-knopf.fehlt,
.cp-trigger.fehlt {
  border-color: var(--fehler);
  box-shadow: var(--schatten-feld), 0 0 0 3px rgba(185, 28, 28, 0.15);
}
.eingabe.fehlt:focus-visible,
.klappwahl-knopf.fehlt:focus-visible,
.kalender-knopf.fehlt:focus-visible {
  border-color: var(--fehler);
  box-shadow: var(--schatten-feld), 0 0 0 3px rgba(185, 28, 28, 0.28);
}
/* Beim Häkchen gibt es kein Feld, das man umranden könnte - also
   bekommt die ganze Zeile einen Rahmen, damit klar ist, worum es
   geht. */
.zustimmung.fehlt {
  outline: 1px solid var(--fehler);
  outline-offset: 8px;
  border-radius: 2px;
}
.zustimmung.fehlt input { accent-color: var(--fehler); }

.melde { margin-top: 22px; padding: 16px 22px; border-radius: var(--radius-md); border: 1px solid var(--border); font-size: 0.94rem; }
.melde[data-art='gut'] { border-color: rgba(194, 95, 0, 0.4); background: rgba(255, 184, 108, 0.14); }
.melde[data-art='schlecht'] { border-color: rgba(185, 28, 28, 0.45); background: rgba(185, 28, 28, 0.07); }
.melde:empty { display: none; }

.gesendet {
  max-width: 46rem; margin-inline: auto; padding: 44px 36px; text-align: center;
  background: linear-gradient(#FFFFFF, #FFFFFF) padding-box,
              var(--gradient) border-box;
  border: 2px solid transparent; border-radius: var(--radius-lg);
  box-shadow: var(--schatten-karte);
}
.gesendet h3 { margin-bottom: 12px; font-size: 1.4rem; }
.gesendet p { color: var(--text-secondary); max-width: 42rem; margin-inline: auto; }

/* ─── Nachbarn ──────────────────────────────────────────────────── */
/* Verweise auf die übrigen Leistungen. Sie sahen aus wie weitere
   Textkacheln – jetzt tragen sie eine Auszeichnung, den Startpreis und
   einen sichtbaren Weiterführer, damit erkennbar ist, dass es sich um
   ein Angebot handelt und nicht um Fließtext. */
.nachbarn-block { margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--border); }
.nachbarn-titel {
  text-align: center; font-family: 'Outfit', 'Inter', sans-serif;
  font-size: 1.3rem; margin-bottom: 6px;
}
.nachbarn-text { text-align: center; font-size: 0.86rem; color: var(--text-muted); margin-bottom: 28px; }

.nachbarn { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: 20px; margin: 0; }
.nachbar {
  display: flex; flex-direction: column; gap: 8px;
  padding: 24px 26px; text-decoration: none; text-align: left;
  transition: border-color var(--tempo) var(--ease), transform var(--tempo) var(--ease);
}
.nachbar-marke {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent-text);
}
.nachbar-marke::before {
  content: ''; width: 18px; height: 2px; border-radius: 2px; background: var(--gradient);
}
.nachbar b { display: block; color: var(--text-primary); font-size: 1.14rem; font-weight: 700; }
.nachbar-frage { display: block; font-size: 0.92rem; color: var(--text-secondary); }
.nachbar-fuss {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin-top: auto; padding-top: 16px; border-top: 1px solid var(--border);
}
.nachbar-preis { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-primary); }
.nachbar-mehr {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.88rem; font-weight: 600; color: var(--accent-text);
}
.nachbar-mehr svg { transition: transform var(--tempo) var(--ease); }
a.nachbar:hover .nachbar-mehr svg { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
  .nachbar, .nachbar-mehr svg { transition: none; }
  a.nachbar:hover .nachbar-mehr svg { transform: none; }
}

/* ─── Abschlussband ─────────────────────────────────────────────── */
.band { padding-block: 100px; text-align: center; position: relative; overflow: hidden; }
.band::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(240, 128, 176, 0.16) 0%, transparent 70%);
  pointer-events: none;
}
.band .huelle { position: relative; z-index: 1; }
.band h2 { max-width: 22ch; margin-inline: auto; }
.band .knopf-reihe { justify-content: center; }

/* ─── Fußzeile ──────────────────────────────────────────────────── */
.fuss { border-top: 1px solid var(--border); padding-block: 64px 40px; background: rgba(255, 255, 255, 0.74); }
/* Vier Spalten: Marke, Leistungen, Außerdem, Kontakt. Die erste ist
   breiter, weil dort ein Absatz steht und keine Liste. Der Abstand
   sinkt gegenüber drei Spalten, sonst bliebe für die Listen zu wenig. */
.fuss-gitter { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.1fr; gap: clamp(28px, 3vw, 56px); }
/* Vier Spalten haben vier Kinder - drei hätten drei und dann eines
   allein in einer zweiten Zeile. Deshalb geht es von vier direkt auf
   zwei: dort stehen zwei und zwei, das geht auf. Die Grenze liegt bei
   980 px, weil darunter die Kontaktspalte schmaler würde als die
   E-Mail-Adresse (186 px) und diese umbräche. */
@media (max-width: 979px) { .fuss-gitter { grid-template-columns: 1fr 1fr; } }
@media (max-width: 519px) {
  .fuss-gitter { grid-template-columns: 1fr; }
  /* Zwei Spalten, statt alles untereinander zu stellen. */
  .fuss ul { grid-template-columns: 1fr 1fr; gap: 12px 18px; }

  /* Die Kontaktliste hat ihre eigene Ordnung: Die Spalten sind ungleich
     breit, weil die E-Mail-Adresse 186 px braucht; bei zwei gleichen
     Spalten von je 155 px bräche sie um. grid-auto-flow: column füllt
     erst die linke Spalte, dann die rechte - so stehen Adresse und
     Nummer links, die Rechtstexte rechts.

     Diese Regel galt eine Zeit lang für alle Listen im Fuß. Seit die
     Leistungsliste auf dem Telefon wieder sichtbar ist, ging das nicht
     mehr: Sieben Einträge auf zwei feste Zeilen verteilt ergaben vier
     enge Spalten mit "Vek-tor-grafik" darin. */
  .fuss-kontakt ul {
    grid-template-columns: minmax(0, 200px) 1fr;
    grid-template-rows: auto auto;
    grid-auto-flow: column;
  }
}
/* Auf dem Telefon bleibt die Leistungsliste im Fuß ausgeblendet - das
   Menü führt bereits dorthin, und sieben Einträge kosten dort vier
   Zeilen, die niemand liest.

   "Außerdem" bleibt stehen. Die Überschrift steht dann zwar ohne die
   Liste da, auf die sie sich im Browser bezieht - gelesen wird sie auf
   dem Telefon aber als "außerdem gibt es noch", und das stimmt: Beide
   Verweise führen auf Seiten, die im Menü unter keinem anderen Punkt
   stehen. */
@media (max-width: 619px) {
  .fuss-leistungen,
  .fuss-ausserdem { display: none; }
}
/* Die Überschriften im Fuß tragen denselben Verlaufsstrich wie die
   Abschnittsmarken weiter oben - dieselbe Auszeichnung für dieselbe
   Art von Wort.

   Er liegt als Unterstrich darunter, so breit wie das Wort - dieselbe
   Figur wie der Verlaufs-Unterstrich unter den Schlüsselwörtern in
   den Überschriften (.zeichen).

   Zwei andere Stellungen standen hier schon: daneben, da schob er den
   Text um 29 px nach rechts und Überschrift und Liste standen auf
   zwei Kanten. Darüber, da flüchtete zwar alles, aber der Strich
   schwebte über der Zeile statt zu ihr zu gehören.

   inline-block, damit der Verlauf die Wortbreite annimmt und nicht
   die der ganzen Spalte. Die linke Kante bleibt dabei unberührt. */
.fuss h2 {
  display: inline-block;
  font-family: 'Inter', sans-serif; font-size: 0.78rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-muted);
  margin-bottom: 18px;
  padding-bottom: 8px;
  background-image: var(--gradient);
  background-repeat: no-repeat;
  background-size: 100% 2px;
  background-position: 0 100%;
}
.fuss ul { list-style: none; padding: 0; display: grid; gap: 11px; }
.fuss a { display: inline-flex; align-items: center; min-height: 24px; color: var(--text-secondary); text-decoration: none; font-size: 0.92rem; }
.fuss a:hover { color: var(--accent-text); }
.fuss-schluss { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 14px 40px; justify-content: space-between; }

/* ─── Rechtstexte ───────────────────────────────────────────────── */
/* Einzige Ausnahme von der vollen Breite: Impressum und Datenschutz.
   Ungedeckelt stehen dort bei 2560 px 223 Zeichen in einer Zeile – etwa
   das Dreifache dessen, was sich noch lesen lässt. 90ch sind rund 90
   Zeichen und immer noch breiter als die vorherigen 48rem. */
.recht { max-width: 90ch; margin-inline: auto; text-align: left; }
.recht h2 { font-family: 'Outfit', sans-serif; font-size: 1.4rem; margin-top: 56px; margin-bottom: 16px; }
.recht h2:first-of-type { margin-top: 32px; }
.recht h3 { margin-top: 28px; margin-bottom: 8px; }
.recht p, .recht li { color: var(--text-secondary); }
.recht ul, .recht ol { margin: 16px 0; padding-left: 1.3rem; display: grid; gap: 8px; }
.recht address { font-style: normal; color: var(--text-secondary); }
.recht code { font-size: 0.9em; padding: 2px 6px; border-radius: 4px; background: rgba(23, 19, 31, 0.06); }

/* ─── Einblendung beim Scrollen ──────────────────────────────────
   Anders als bisher versteckt sie nichts, solange kein Skript läuft:
   der Startzustand gilt nur, wenn das Skript die Klasse gesetzt hat.
   Fällt es aus, ist der Inhalt einfach sofort da.

   Die Kurve läuft weich aus (schnell an, langsam ins Ziel) und der Weg
   ist maßvoll: 26 px statt 40. Ein weiter Weg mit harter Kante wirkt wie
   ein Sprung, ein kurzer mit weicher Kante wie ein Auftauchen.       */
/* Eingeblendet wird mit einer Animation, nicht mit einem Übergang.
   Der Grund: ein Element hat nur eine transition-Liste, die letzte
   gültige Regel gewinnt. Die Karten unter "Leistungen" bringen eine
   eigene mit - Schatten und Rahmen beim Überfahren - und überschrieben
   damit die Einblendung. Sie sprangen von unsichtbar auf sichtbar,
   ohne Übergang: sie ploppten herein. Eine Animation steht daneben
   und nimmt keiner Regel etwas weg. Sie läuft einmal, danach gelten
   wieder die normalen Werte, das Überfahren arbeitet wie zuvor.

   Auf schmalen Schirmen ohne Weg, nur die reine Einblendung: dort
   stehen die Karten untereinander und füllen fast die ganze Breite,
   die 34 px lesen sich dann als Sprung statt als Aufziehen. Dafür
   darf es etwas länger dauern. */
@keyframes einblenden {
  from { opacity: 0; transform: translateY(34px); }
  to   { opacity: 1; transform: none; }
}
@keyframes einblenden-schmal {
  from { opacity: 0; }
  to   { opacity: 1; }
}
html.bewegt .reveal { opacity: 0; transform: translateY(34px); }
/* "both" ist nötig, seit die Elemente einer Reihe versetzt starten:
   Ohne Füllung stünde ein Element während seiner Verzögerung schon
   auf opacity 1 - der Zustand aus der Zeile darüber - und spränge
   beim Animationsstart zurück auf 0. Mit "both" gilt währenddessen
   der Anfangszustand der Animation. */
html.bewegt .reveal.sichtbar {
  opacity: 1; transform: none;
  animation: einblenden 0.9s var(--weich) both;
}
/* Nachgezogen, weil es beim Sprung übersprungen wurde: Es steht
   bereits über dem oberen Fensterrand. Eine Einblendung, die man
   erst beim Zurückscrollen bemerkt, wäre genau die Unruhe, die hier
   vermieden werden soll - also ohne Bewegung und ohne Verzögerung. */
html.bewegt .reveal.sofort { animation: none; }
@media (max-width: 780px) {
  html.bewegt .reveal { transform: none; }
  html.bewegt .reveal.sichtbar { animation: einblenden-schmal 1s var(--weich) both; }
  html.bewegt .reveal.sofort { animation: none; }
}

/* ─── Seitenwechsel ──────────────────────────────────────────────
   Browser, die Ansichtsübergänge können, blenden die alte Seite weich
   in die neue über, statt hart umzuschalten. Alle anderen navigieren
   wie bisher – es geht nichts verloren, es sieht nur weniger ruhig aus. */
@view-transition { navigation: auto; }
/* Beide liefen bisher ab derselben Millisekunde: Die alte Seite war
   nach 0,4 s weg, die neue erst bei zwei Dritteln - dazwischen lagen
   zwei halbdurchsichtige Seiten übereinander, und die Seite wurde in
   der Mitte des Wechsels sichtbar dunkler. Jetzt setzt die neue erst
   ein, wenn die alte fast geräumt ist. Zusammen bleibt es bei gut
   einer halben Sekunde. */
::view-transition-old(root) {
  animation: verblassen 0.3s var(--weich) both;
}
::view-transition-new(root) {
  animation: auftauchen 0.42s var(--weich) 0.18s both;
}
@keyframes verblassen { to { opacity: 0; } }
@keyframes auftauchen { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.bewegt .reveal { opacity: 1; transform: none; }
  /* Die Übergangs-Pseudoelemente trifft der Stern unten nicht. */
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ─── Farbauswähler ─────────────────────────────────────────────────
   Ersetzt das Textfeld „Farben" durch eine Palette mit Mehrfachauswahl,
   freiem Farbfeld und HEX-Eingabe. Getrennt nach Wunschfarben und zu
   vermeidenden Farben. Das ursprüngliche Eingabefeld bleibt Wertträger
   (kommagetrennte HEX-Liste) – ohne JavaScript bleibt es ein normales
   Textfeld, das Formular funktioniert unverändert. */
.cp { position: relative; }
.cp-trigger {
  width: 100%; min-height: var(--feldhoehe);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 16px; text-align: left;
  background-color: #FFFFFF;
  border: 1px solid var(--border-feld);
  border-radius: var(--radius-md);
  box-shadow: var(--schatten-feld);
  color: var(--text-primary);
  font-family: inherit; font-size: 1rem;
  cursor: pointer;
  transition: border-color var(--tempo) var(--ease), box-shadow var(--tempo) var(--ease);
}
.cp-trigger:hover { border-color: var(--accent-text); }
.cp.open .cp-trigger, .cp-trigger:focus-visible {
  border-color: var(--accent); box-shadow: var(--schatten-feld), 0 0 0 3px var(--accent-soft); outline: none;
}
.cp-trigger::after {
  content: ''; width: 12px; height: 8px; flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23514B63' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
  transition: transform var(--tempo) var(--ease);
}
.cp.open .cp-trigger::after { transform: rotate(180deg); }
.cp-trigger-val { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cp-empty .cp-trigger-val { color: var(--text-secondary); }
.cp-dot { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(23, 19, 31, 0.25); }
.cp-count { font-size: 0.86rem; color: var(--text-secondary); margin-left: 4px; }

.cp-panel {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 60;
  padding: 14px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-light); border-radius: var(--radius-lg);
  box-shadow: 0 18px 48px rgba(23, 19, 31, 0.18);
  opacity: 0; transform: translateY(-6px); transform-origin: top center;
  pointer-events: none; transition: opacity 0.18s var(--ease), transform 0.18s var(--ease);
}
.cp.open .cp-panel { opacity: 1; transform: none; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .cp-panel { transition: none; } }

.cp-modes { display: flex; gap: 6px; margin-bottom: 10px; padding: 4px; background: var(--bg-primary); border: 1px solid var(--border); border-radius: var(--radius-md); }
.cp-mode {
  flex: 1; min-height: 40px; padding: 8px 6px; border: 1px solid transparent; background: transparent;
  color: var(--text-secondary); border-radius: var(--radius-sm); cursor: pointer;
  font-family: inherit; font-size: 0.88rem; font-weight: 500;
  transition: background var(--tempo) var(--ease), color var(--tempo) var(--ease);
}
.cp-mode.active { background: var(--accent-text); border-color: var(--accent-tief); color: #FFFFFF; font-weight: 600; }
.cp-avoid .cp-mode.active { background: #E9C4C4; border-color: #9B2C2C; }

.cp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.cp-chip {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 32px; padding: 4px 6px 4px 8px; border-radius: var(--radius-pille);
  background: var(--bg-primary); border: 1px solid var(--border-light);
  font-size: 0.82rem; color: var(--text-secondary);
}
.cp-avoid .cp-chip { border-color: #9B2C2C; }
.cp-chip-sw { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(23, 19, 31, 0.3); }
.cp-chip-x { min-width: 24px; min-height: 24px; border: none; background: none; color: var(--text-secondary); cursor: pointer; font-size: 1.1rem; line-height: 1; }
.cp-chip-x:hover { color: var(--accent-tief); }

/* 24 Felder: acht Spalten, drei Zeilen. Weniger Spalten als vorher,
   dadurch sind die einzelnen Felder groesser und die Palette flacher. */
.cp-palette { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
@media (max-width: 768px) { .cp-palette { grid-template-columns: repeat(6, 1fr); } }
.cp-swatch {
  aspect-ratio: 1; min-width: 24px; min-height: 24px;
  border: 1px solid rgba(23, 19, 31, 0.2); border-radius: var(--radius-sm);
  cursor: pointer; padding: 0;
  transition: transform 0.12s var(--ease), box-shadow 0.12s var(--ease);
}
.cp-swatch:hover { transform: scale(1.12); }
.cp-swatch.on { box-shadow: 0 0 0 2px var(--bg-secondary), 0 0 0 4px var(--accent-text); }
.cp-avoid .cp-swatch.on { box-shadow: 0 0 0 2px var(--bg-secondary), 0 0 0 4px #9B2C2C; }
@media (prefers-reduced-motion: reduce) { .cp-swatch:hover { transform: none; } }

.cp-custom { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.cp-custom-label { font-size: 0.86rem; color: var(--text-secondary); margin-bottom: 8px; }
.cp-sv { position: relative; width: 100%; height: 92px; margin-bottom: 8px; border-radius: var(--radius-md); border: 1px solid var(--border-light); cursor: crosshair; touch-action: none; }
.cp-sv-handle { position: absolute; width: 16px; height: 16px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(23, 19, 31, 0.5); transform: translate(-50%, -50%); pointer-events: none; }
.cp-hue { position: relative; width: 100%; height: 16px; border-radius: var(--radius-pille); border: 1px solid var(--border-light); cursor: pointer; touch-action: none;
  background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); }
.cp-hue-handle { position: absolute; top: 50%; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(23, 19, 31, 0.5); transform: translate(-50%, -50%); pointer-events: none; }
.cp-custom-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.cp-preview { width: 40px; height: 40px; flex: none; border-radius: var(--radius-sm); border: 1px solid var(--border-light); }
.cp-hex { flex: 1; min-width: 0; min-height: 40px; padding: 0 12px; background: #FFFFFF; border: 1px solid var(--border-feld); border-radius: var(--radius-sm); color: var(--text-primary); font-family: inherit; font-size: 0.94rem; }
.cp-hex:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); outline: none; }
.cp-add {
  flex: none; min-height: 40px; padding: 0 16px;
  background: var(--accent-text); border: 0; border-radius: var(--radius-sm);
  color: #FFFFFF; cursor: pointer; font-family: inherit; font-size: 0.9rem; font-weight: 600;
}
.cp-add:hover { background: var(--accent-tief); }

/* Auf dem Telefon ist die Zeile eng: schmalerer Knopf, damit im
   HEX-Feld die vollen sieben Zeichen stehen und nicht abgeschnitten
   werden. */
@media (max-width: 480px) {
  .cp-custom-row { gap: 8px; }
  .cp-preview { width: 32px; height: 32px; }
  .cp-add { padding: 0 10px; font-size: 0.84rem; }
  .cp-hex { padding: 0 8px; font-size: 0.9rem; }
}

/* ─── Eigenes Auswahlfeld und eigener Kalender ──────────────────────
   Die Aufklappliste eines <select> und der Kalender eines
   <input type="date"> werden vom Betriebssystem gezeichnet und lassen
   sich mit CSS nicht gestalten. Beide werden deshalb durch eigene
   Bedienelemente ersetzt. Das ursprüngliche Feld bleibt in beiden
   Fällen der Wertträger – ohne JavaScript steht das native Feld da
   und das Formular verschickt unverändert dasselbe. */

.hat-klappwahl > select.eingabe,
.hat-kalender > input[type="date"] {
  position: absolute; width: 1px; height: 1px;
  min-height: 0; min-width: 0;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

.klappwahl, .kalender { position: relative; }

.klappwahl-knopf, .kalender-knopf {
  width: 100%; min-height: var(--feldhoehe); padding: 14px 42px 14px 16px;
  display: flex; align-items: center; gap: 10px;
  text-align: left;
  background-color: #FFFFFF;
  border: 1px solid var(--border-feld);
  border-radius: var(--radius-md);
  box-shadow: var(--schatten-feld);
  color: var(--text-primary);
  font-family: inherit; font-size: 1rem;
  cursor: pointer;
  transition: border-color var(--tempo) var(--ease), box-shadow var(--tempo) var(--ease);
}
.klappwahl-knopf:hover, .kalender-knopf:hover { border-color: var(--accent-text); }
.klappwahl.offen .klappwahl-knopf, .klappwahl-knopf:focus-visible,
.kalender.offen .kalender-knopf, .kalender-knopf:focus-visible {
  border-color: var(--accent); box-shadow: var(--schatten-feld), 0 0 0 3px var(--accent-soft); outline: none;
}
.klappwahl-knopf::after, .kalender-knopf::after {
  content: ''; position: absolute; right: 16px; top: 50%; margin-top: -4px;
  width: 12px; height: 8px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23514B63' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
  transition: transform var(--tempo) var(--ease);
}
.klappwahl.offen .klappwahl-knopf::after, .kalender.offen .kalender-knopf::after { transform: rotate(180deg); }
.leer-wert { color: var(--text-secondary); }

.klappwahl-liste, .kalender-blatt {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 60;
  background: var(--bg-secondary);
  border: 1px solid var(--border-light); border-radius: var(--radius-lg);
  box-shadow: 0 18px 48px rgba(23, 19, 31, 0.18);
  opacity: 0; transform: translateY(-6px); transform-origin: top center;
  pointer-events: none; transition: opacity 0.18s var(--ease), transform 0.18s var(--ease);
}
.klappwahl.offen .klappwahl-liste, .kalender.offen .kalender-blatt {
  opacity: 1; transform: none; pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
  .klappwahl-liste, .kalender-blatt { transition: none; }
}

/* Auswahlliste */
.klappwahl-liste {
  right: 0; padding: 8px;
  max-height: min(28rem, 65vh);
  overflow-y: auto; overscroll-behavior: contain;
  /* Nur die lange Leistungsliste scrollt noch. Dann ein schmaler Balken
     in den Farben der Seite statt des Balkens vom Betriebssystem. */
  /* Chrome beachtet ::-webkit-scrollbar nur, solange scrollbar-width und
     scrollbar-color nicht gesetzt sind. */
}
.klappwahl-liste::-webkit-scrollbar { width: 8px; }
.klappwahl-liste::-webkit-scrollbar-track { background: transparent; }
.klappwahl-liste::-webkit-scrollbar-thumb {
  background: var(--border-feld); border-radius: 100px;
  border: 2px solid var(--bg-secondary);
}
/* Die Gruppenzeile bleibt beim Blättern oben stehen - bei dreißig
   Einträgen weiß man sonst nach zwei Umdrehungen nicht mehr, in
   welchem Bereich man liest. Sie deckt dabei ab, was darunter
   durchläuft, deshalb der volle Hintergrund. */
.klappwahl-gruppe {
  position: sticky; top: -8px; z-index: 1;
  display: flex; align-items: center; gap: 9px;
  margin: 14px -8px 6px; padding: 9px 20px;
  /* Ein eigener Grundton statt Weiß: So liest sich die Zeile als Band
     durch die Liste und nicht als besonders kleiner Eintrag. Dazu der
     Verlaufsstrich, den die Auszeichnungen auf der Seite auch tragen,
     und die volle Textfarbe - vorher war sie grau und ging unter. */
  background: var(--bg-primary);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  font-size: 0.8rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--text-primary);
}
.klappwahl-gruppe::before {
  content: ''; flex: none; width: 18px; height: 2px; border-radius: 2px;
  background: var(--gradient);
}
.klappwahl-gruppe:first-child { margin-top: -8px; border-top: 0; }
.klappwahl-gruppe + .klappwahl-punkt { margin-top: 2px; }
.klappwahl-punkt {
  display: flex; align-items: center; gap: 10px;
  width: 100%; min-height: 44px; padding: 11px 14px;
  text-align: left; border: 0; border-radius: 10px;
  background: none; color: var(--text-primary);
  font-family: inherit; font-size: 0.96rem; cursor: pointer;
  transition: background var(--tempo) var(--ease), color var(--tempo) var(--ease);
}
@media (prefers-reduced-motion: reduce) { .klappwahl-punkt { transition: none; } }
.klappwahl-punkt:hover, .klappwahl-punkt.aktiv { background: var(--accent-soft); }
/* Das Gewählte trägt einen Haken statt einer Umrandung. Ein Kasten um
   einen Listeneintrag sieht aus wie ein zweites Bedienelement. */
.klappwahl-punkt[aria-selected="true"] {
  background: var(--accent-soft); color: var(--accent-text); font-weight: 600;
}
.klappwahl-punkt[aria-selected="true"]::after {
  content: ''; flex: none; margin-left: auto; width: 15px; height: 15px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5' stroke='%23C42D6B' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Kalender */
/* Genauso breit wie das Feld darüber – left und right auf 0, keine feste Breite. */
.kalender-blatt { padding: 14px; right: 0; }
.kalender-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.kalender-titel { font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 1rem; }
.kalender-nav {
  width: 36px; height: 36px; flex: none;
  border: 1px solid var(--border-light); border-radius: var(--radius-sm);
  background: #FFFFFF; color: var(--text-primary);
  font-size: 1.1rem; line-height: 1; cursor: pointer;
}
.kalender-nav:hover:not(:disabled) { border-color: var(--accent-text); }
.kalender-nav:disabled { opacity: 0.35; cursor: default; }
.kalender-wochentage, .kalender-gitter { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.kalender-wochentage span {
  text-align: center; padding-bottom: 6px;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-secondary);
}
.kalender-tag {
  min-width: 36px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  background: none; color: var(--text-primary);
  font-family: inherit; font-size: 0.92rem; font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.kalender-tag:hover:not(:disabled) { background: var(--bg-primary); border-color: var(--accent-text); }
.kalender-tag:disabled { color: var(--text-muted); opacity: 0.4; cursor: default; }
.kalender-tag.heute { border-color: var(--border-feld); font-weight: 600; }
.kalender-tag.gewaehlt {
  background: var(--accent-text); border-color: var(--accent-tief);
  color: #FFFFFF; font-weight: 700;
}
.kalender-fuss { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; gap: 10px; }
.kalender-fuss button {
  min-height: 36px; padding: 6px 14px;
  border: 1px solid var(--border-light); border-radius: var(--radius-pille);
  background: #FFFFFF; color: var(--text-primary);
  font-family: inherit; font-size: 0.84rem; font-weight: 500; cursor: pointer;
}
.kalender-fuss button:hover { border-color: var(--accent-text); }

/* ─── Lesebalken am linken Rand ─────────────────────────────────────
   Zeigt, wie weit die Seite gelesen ist: der gefüllte Teil liegt hinter
   dir, der graue vor dir. Die Abschnitte sind als feine Trennungen im
   Balken selbst zu sehen – dafür schneidet eine Maske schmale Fenster
   an den Abschnittsgrenzen aus, die seite.js berechnet. Kein Text.
   Unter 1100 px ist im Seitenrand kein Platz, dann verschwindet er.
   Ohne JavaScript bleibt ein durchgehender grauer Strich. */
.achse {
  position: fixed; z-index: 900;
  left: clamp(6px, 1.1vw, 20px);
  top: 50%; translate: 0 -50%;
  display: flex; align-items: center;
  pointer-events: none;
}
@media (max-width: 1099px) { .achse { display: none; } }

.achse-spur {
  position: relative;
  width: 5px; height: min(46vh, 400px);
  border-radius: var(--radius-pille);
  background: var(--border-light);
  -webkit-mask-image: var(--teilung, none);
  mask-image: var(--teilung, none);
}
.achse-fuellung {
  position: absolute; inset: 0 0 auto 0;
  height: var(--fortschritt, 0%);
  border-radius: var(--radius-pille);
  background: var(--gradient);
  background-size: 5px min(46vh, 400px);   /* ein Verlauf über den ganzen Balken */
  background-repeat: no-repeat;
  transition: height 0.1s linear;
}
@media (prefers-reduced-motion: reduce) { .achse-fuellung { transition: none; } }

/* ─── Wo bin ich? Brotkrume in der Leiste ───────────────────────────
   Oben im Kopfbereich steht die Pille mit dem Seitennamen. Sobald
   gescrollt wird, blendet sie dort aus und die Brotkrume in der Leiste
   ein: Trennzeichen, dann der Seitenname im Schriftschnitt der
   Menüpunkte. Der Platz ist immer reserviert, es verschiebt sich also
   nichts - nur die Deckkraft ändert sich. Ohne JavaScript passiert
   gar nichts: die Pille bleibt oben, die Leiste zeigt nichts an. */
.leiste-marke { display: flex; align-items: center; min-width: 0; margin-right: auto; }

/* ─── Zurück ────────────────────────────────────────────────────────
   Steht rechts neben der Wortmarke, im selben Schriftschnitt wie die
   Menüpunkte - kein Kasten, keine Pille. Es ist ein Weg zurück, kein
   Handlungsaufruf; ein umrandeter Knopf machte daraus ein Gewicht, das
   der Sache nicht zusteht. Unter 700 px bleibt nur der Pfeil, die
   Fläche aber bei 44 px. */
.leiste-zurueck {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-width: 44px; min-height: 44px; padding: 0 10px; margin-left: 14px;
  border: 0; background: none;
  color: var(--text-secondary); font-size: 0.88rem; font-weight: 500;
  font-family: inherit; cursor: pointer;
  transition: color var(--tempo) var(--ease);
}
.leiste-zurueck:hover, .leiste-zurueck:focus-visible { color: var(--accent-text); }
.leiste-zurueck svg { flex: none; }
@media (max-width: 699px) {
  /* Der Abstand zur Wortmarke stand hier auf 2 px - aus der Zeit, als
     der Schriftzug auf schmalen Schirmen schrumpfte und in der Pille
     jedes Pixel zählte. Seit er seine Größe behält, klebte der Pfeil
     am letzten Buchstaben. Nachgemessen ist Platz da: 45 px bis zum
     Menüknopf bei 375 px Breite, 64 px bei 414. */
  .leiste-zurueck { padding: 0 4px; margin-left: 14px; gap: 6px; }
}
/* Nur ganz schmal wird es wirklich knapp - dort ein kleinerer Abstand
   und eine engere Pille, gemessen bei 320 px. */
@media (max-width: 349px) {
  .leiste-zurueck { margin-left: 8px; }
}
/* Auf dem Telefon steht in der Leiste immer der Markenname, und höchstens
   der Zurück-Knopf daneben. Sonst nichts.

   Vorher wich der ausgeschriebene Name dem Seitennamen, sobald es eng
   wurde - die Leiste zeigte dann "⊙ ← Zurück › Preise ☰" und die Marke
   war verschwunden. Die Auskunft war zwar nützlicher, aber der Preis
   dafür zu hoch: Die Leiste ist auf jeder Seite das eine Element, das
   immer gleich aussehen sollte, und wo man steht, sagt die Überschrift
   darunter ohnehin. */
@media (max-width: 559px) {
  .leiste-zurueck { min-width: 36px; }
}
/* Das Bildzeichen darf nie schrumpfen. Ohne diese Zeile gibt es als
   erstes nach, wenn es eng wird - gemessen bei 320 px war es auf 0 px
   zusammengedrückt, und die Marke stand ohne Zeichen da. Aufgefallen
   ist es erst, als der Markenname auf dem Telefon bleiben sollte;
   vorher wich der Name, und das Zeichen hatte immer Platz. */
.wortmarke picture, .wortmarke img { flex: none; }

/* Sobald der Zurück-Knopf dazukommt, wird es auf dem Telefon eng. Dann
   weicht die Beschriftung des Knopfes - der Pfeil allein ist an dieser
   Stelle verstanden, und daneben steht ja, wohin er führt.

   Was ausdrücklich NICHT weicht: der Schriftzug. Er stand hier eine
   Zeit lang auf 0,92 und 0,86 rem, damit alles nebeneinanderpasst.
   Das war falsch - ein Markenname, der je nach Seite eine andere
   Größe hat, ist kein Markenname mehr. Er bleibt auf 1,05 rem, wie
   überall sonst.

   Für Screenreader bleibt das Wort "Zurück" erhalten, es wird nur
   unsichtbar gestellt. */
@media (max-width: 619px) {
  html.mit-zurueck .leiste-zurueck span {
    position: absolute; width: 1px; height: 1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  html.mit-zurueck .leiste-zurueck { min-width: 34px; justify-content: center; gap: 0; }
}
/* Ganz schmale Geräte: Der fehlende Platz kommt aus dem Innenabstand
   der Pille, nicht aus der Schriftgröße. */
@media (max-width: 379px) {
  html.mit-zurueck .leiste-inhalt { padding: 0 9px 0 12px; --leiste-gap: 8px; }
  html.mit-zurueck .wortmarke { gap: 8px; }
}
.leiste-pfad {
  display: inline-flex; align-items: center; gap: 9px;
  margin-left: 11px; min-width: 0;
  font-size: 0.88rem; font-weight: 600; letter-spacing: 0.01em;
  color: var(--text-primary);
  white-space: nowrap; overflow: hidden;
  opacity: 0; pointer-events: none;
  transition: opacity 0.24s var(--ease);
}
.pfad-stufe { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
.pfad-stufe + .pfad-stufe { margin-left: 9px; }
.pfad-stufe > svg { flex: none; color: var(--text-muted); opacity: 0.55; }
.pfad-stufe > span { overflow: hidden; text-overflow: ellipsis; }
.leiste[data-gescrollt='true'] .leiste-pfad { opacity: 1; }
/* Startseite: ab 980 px steht "Startseite" ohnehin markiert im Menü.
   Und solange man dort noch über dem ersten Abschnitt steht, hat die
   Brotkrume nichts zu sagen – dann ist sie ganz weg statt leer. */
@media (min-width: 980px) { .leiste-pfad-schmal { display: none; } }
.leiste .leiste-pfad-schmal:has(.pfad-teil[hidden]) { display: none; }

/* Telefon und Tablet: keine Brotkrume, zu keinem Zeitpunkt - auch nicht
   beim Scrollen. In der Pille ist nur Platz für eines von beidem, und
   das ist der Markenname. Ab 980 px erscheint sie wieder, dort ist die
   Leiste breit genug für Marke, Menü und Weg. */
@media (max-width: 979px) {
  .leiste-pfad { display: none; }
}

/* Gegenstück im Kopfbereich: Die Auszeichnung über der Überschrift
   blendet aus, während dieselbe Angabe oben in der Leiste erscheint -
   zweimal dasselbe nebeneinander wäre eine Wiederholung.
   Unter 980 px erscheint dort aber nichts mehr. Also bleibt sie stehen,
   sonst verschwände sie beim Scrollen ersatzlos. */
@media (min-width: 980px) {
  html.pille-wandert[data-gescrollt='true'] .hero-marke {
    opacity: 0; transform: translateY(-8px); pointer-events: none;
  }
}
.hero-marke { transition: opacity 0.22s var(--ease), transform 0.32s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  .leiste-pfad, .hero-marke { transition: none; }
}

/* ─── Desktop: die Pille nutzt die Bildschirmbreite ─────────────────
   Sie bleibt eine schwebende Glaspille, hört aber auf, sich auf die
   Inhaltsbreite zu beschränken: ab 980 px läuft sie bis kurz vor die
   Bildschirmkanten. Der schmale Rand ringsum ist das, was sie als Pille
   lesbar macht - ohne ihn wäre es ein Band. Unter 980 px bleibt alles
   wie bisher. */
@media (min-width: 980px) {
  .leiste { padding: 14px clamp(16px, 1.5vw, 26px) 0; }
  .leiste-inhalt { max-width: none; min-height: 66px; padding: 0 20px 0 28px; }
}

/* ─── Arbeiten: die eine gezeigte Arbeit groß ───────────────────────
   Vorher stand sie als einzelne Kachel in einem Raster für mehrere und
   wirkte dadurch wie ein Platzhalter. Jetzt Bild und Text nebeneinander,
   wie im Kopfbereich der Leistungsseiten. */
.arbeit-gross {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px); align-items: center;
  text-align: left;
}
@media (max-width: 899px) { .arbeit-gross { grid-template-columns: 1fr; } }
.arbeit-gross-bild img {
  width: 100%; border-radius: var(--radius-xl);
  border: 1px solid var(--border); box-shadow: var(--schatten-karte);
}
.arbeit-gross-text h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin-bottom: 14px; }
.arbeit-gross-text p { color: var(--text-secondary); max-width: 46ch; }
.arbeit-gross-text .knopf-leer { margin-top: 18px; padding-left: 0; }

/* Galerieverweise: gleiche Karte wie die Leistungsverweise, ohne Preis */
.nachbar-schlicht .nachbar-mehr { margin-top: auto; padding-top: 18px; }

/* ─── Wer das macht: die Zusagen als Liste statt im Fließtext ───────
   Sie standen als Aufzählung in einem Satz und gingen darin unter. */
.zusagen { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 12px; }
.zusagen li { display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start; }
.zusagen svg { margin-top: 3px; color: var(--accent-text); }
.zusagen span { color: var(--text-primary); font-weight: 500; }

/* ═══════════════════════════════════════════════════════════════════
   FALLSTUDIE: EINE ANWENDUNG ZEIGEN

   Die Aufnahmen sind freigestellt: Browserfenster und Handy stehen als
   PNG mit durchsichtigem Grund da und bringen ihren eigenen weichen
   Schatten mit. Deshalb bekommen sie hier weder Rahmen noch Fläche noch
   Eckenrundung - das Gerät schwebt über der Seite, wie es auf dem
   Schreibtisch stünde. Ein Kasten darunter würde denselben Schatten ein
   zweites Mal erzählen, und der Verlauf hinter der Seite liefe an einer
   harten Kante tot.

   Die Bildunterschrift steht darunter im Ton der Seite, nicht im Ton der
   Anwendung: Sie ist unser Kommentar zum Bild, nicht Teil davon.
   ═══════════════════════════════════════════════════════════════════ */
.schaustueck { margin: 0; }
.schaustueck img { display: block; width: 100%; height: auto; }

.schaustueck figcaption {
  margin-top: 18px;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--text-muted);
  text-align: center;
  text-wrap: pretty;
}

/* Freigestellte Bilder brauchen mehr Luft als gerahmte. Ein Rahmen sagt
   "hier hört das Bild auf"; ohne ihn übernimmt das der Abstand. */
.schaustueck-breit { margin-inline: auto; }
.schaustueck-abstand { margin-top: clamp(56px, 7vw, 96px); }
#projekt .schaustueck-breit { margin-bottom: clamp(56px, 7vw, 96px); }

/* Nicht jede Aufnahme muss die volle Inhaltsbreite nehmen. Die
   Kombi-Bilder tun es, weil sie zwei Geräte nebeneinander zeigen und
   sonst zu klein würden. Ein einzelnes Browserfenster über 1408 px
   wirkt dagegen aufgeblasen - und zwei gleich breite Blöcke
   untereinander lesen sich als ein Block. Deshalb steht es schmaler
   und mittig, als eigener Absatz im Bildverlauf. */
.schaustueck-mittel { max-width: 62rem; margin-inline: auto; }

/* Auch auf Start- und Leistungsseite steht die Aufnahme frei. Der
   Rahmen dort gilt Fotos und flächigen Bildern - hier gäbe er eine
   Kontur um nichts. */
.arbeit-gross-bild-frei img {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* ─── Text und Bild nebeneinander ────────────────────────────────── */
.fall-paar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
@media (max-width: 899px) { .fall-paar { grid-template-columns: 1fr; } }

.fall-text { max-width: var(--spalte); margin-inline: auto; text-align: left; }
.fall-text p { color: var(--text-secondary); }
.fall-text p + p { margin-top: 18px; }
.fall-text b { color: var(--text-primary); font-weight: 600; }
.fall-paar .fall-text { margin-inline: 0; }

/* ─── Die Farbwelt der App als Beleg ─────────────────────────────── */
.farbreihe {
  list-style: none; padding: 0;
  margin: 30px 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr));
  gap: 16px;
}
.farbreihe li { display: grid; gap: 2px; font-size: 0.85rem; }
.farbreihe b { font-size: 0.92rem; }
.farbfleck {
  display: block; height: 44px; margin-bottom: 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}
.farbrolle { color: var(--text-muted); }
.farbreihe code {
  font-size: 0.78rem; color: var(--text-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ─── Leitlinien: dieselbe Hakenliste, nur zweispaltig ───────────── */
.zusagen-breit {
  max-width: 72rem; margin-inline: auto;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: 14px clamp(24px, 3vw, 48px);
}
.zusagen-breit span { font-weight: 400; color: var(--text-secondary); }

/* ─── Das Zitat zur Arbeit ──────────────────────────────────────── */
.zitat-gross {
  margin: clamp(48px, 5vw, 72px) auto 0;
  max-width: 54rem;
  padding: clamp(30px, 4vw, 48px);
  background: var(--bg-glas);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--schatten-karte);
  text-align: left;
}
.zitat-gross blockquote {
  margin: 0 0 20px;
  font-family: 'Outfit', 'Inter', system-ui, sans-serif;
  font-size: clamp(1.1rem, 1.9vw, 1.35rem);
  line-height: 1.65;
  color: var(--text-primary);
}
.zitat-gross figcaption { font-weight: 600; font-size: 0.95rem; }
.zitat-gross .quelle {
  display: block; margin-top: 2px; font-weight: 400;
  font-size: 0.82rem; color: var(--text-muted);
}

/* ─── Haltung: der Satz, der nicht ins Kleingedruckte gehört ─────── */
.haltung {
  margin: 28px auto 0; max-width: 54rem;
  padding: 20px 24px;
  border-left: 3px solid var(--accent-text);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--accent-soft);
  font-size: 0.93rem; line-height: 1.7;
  color: var(--text-secondary);
  text-align: left;
}

/* ─── Der Weg in die laufende Anwendung ──────────────────────────── */
.ausprobieren { margin-top: clamp(32px, 4vw, 48px); text-align: center; }
.ausprobieren .knopf { display: inline-flex; }

/* Solange die Subdomain nicht steht, hier ein ruhiger Hinweis statt
   eines Knopfes ins Leere. Er sieht bewusst nicht aus wie ein Knopf. */
.bald {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 28px auto 0; max-width: 46rem;
  padding: 14px 20px;
  border: 1px dashed var(--border-light);
  border-radius: var(--radius-md);
  font-size: 0.9rem; line-height: 1.6;
  color: var(--text-muted);
  text-align: left;
}
.bald svg { flex: none; margin-top: 2px; color: var(--accent-text); }
.bald b { color: var(--text-secondary); font-weight: 600; }
.hero .bald { margin-top: 28px; margin-inline: 0; }

/* ─── Zweite Arbeit auf der Startseite: Bild auf der anderen Seite ─
   Im Quelltext steht das Bild zuerst, damit auf dem Handy beide
   Arbeiten gleich aufgebaut sind: erst sehen, dann lesen. Erst ab der
   zweispaltigen Breite wandert es nach rechts. */
@media (min-width: 900px) {
  .arbeit-gross-gedreht .arbeit-gross-bild { order: 2; }
}
.arbeit-gross { margin-top: clamp(48px, 6vw, 88px); }
.arbeit-gross:first-of-type { margin-top: 0; }
.arbeit-gross-text .zusagen { margin-top: 20px; }
.arbeit-gross-text .zusagen span { font-weight: 400; color: var(--text-secondary); }

/* ─── Verweis auf die Bewertungen bei Google ─────────────────────────
   Steht unter den beiden Zitaten und führt zur Quelle. Bewusst
   zurückhaltend: Er soll belegen, nicht werben. */
/* Untereinander und mittig. Nebeneinander ging nicht auf: Der erste
   Verweis ist lang, brach auf dem Telefon um und füllte dabei die
   ganze Zeile, während der Pfeil ganz rechts hängen blieb. */
.profil-verweis {
  display: flex; flex-direction: column; align-items: center;
  gap: 14px; margin-top: clamp(28px, 4vw, 40px); text-align: center;
}
.profil-verweis a {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; font-size: 0.92rem; font-weight: 500;
  color: var(--accent-text); text-decoration: none; text-align: center;
}
.profil-verweis a:hover { text-decoration: underline; text-underline-offset: 4px; }
/* Ohne Pfeil: Gestapelt und mittig trägt der Verweis seine Richtung
   im Text ("ansehen"). Der Pfeil rutschte beim Umbruch auf eine dritte
   Zeile und stand dort allein. */
/* Der zweite Verweis ist eine Bitte, keine Angabe - deshalb leiser. */
.profil-bewerten { color: var(--text-muted) !important; font-weight: 400 !important; }
.profil-bewerten:hover { color: var(--accent-text) !important; }


/* ─── Schreibhilfe: was ich nicht mache ──────────────────────────────
   Dieselbe Liste wie die Zusagen, nur mit Minuszeichen statt Haken.
   Die Farbe bleibt gedeckt: Das ist keine Warnung, sondern eine
   ehrliche Abgrenzung – rot gesetzt läse es sich wie eine Absage. */
.zusagen-nicht svg { color: var(--text-muted); }
.zusagen-nicht span { font-weight: 400; color: var(--text-secondary); }

/* ─── Startseite: das zweite Angebot ─────────────────────────────────
   Die Schreibhilfe steht unter den sieben Leistungskarten, aber nicht
   als achte Karte. Sie richtet sich an andere Leute und soll nicht
   mitgelesen werden wie "noch eine Designleistung" - deshalb ein
   liegender Kasten in anderer Form, abgesetzt durch eine Linie
   darüber statt durch Farbe. */
.anderes {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(20px, 3vw, 44px); align-items: center;
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: clamp(32px, 4vw, 48px);
  border-top: 1px solid var(--border);
  text-align: left;
}
@media (max-width: 720px) { .anderes { grid-template-columns: 1fr; } }
.anderes h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); margin-bottom: 12px; }
.anderes p { color: var(--text-secondary); max-width: 58ch; }
.anderes p.klein { margin-top: 12px; color: var(--text-muted); }
.anderes-weiter .knopf { white-space: nowrap; }

/* ─── Hinweis unter einem Feld ───────────────────────────────────────
   Erklärt, warum eine Angabe gebraucht wird. Steht unter dem Feld, weil
   er dort gelesen wird, wenn man davorsitzt - über dem Feld liest man
   ihn vor dem Ausfüllen und hat ihn beim Tippen vergessen. */
.feld-hinweis {
  margin-top: 8px;
  font-size: 0.84rem; line-height: 1.5;
  color: var(--text-muted);
}

/* ─── Das Vorschaubild führt mit ──────────────────────────────────────
   Bild und Knopf zeigen auf dasselbe Ziel. Wer ein Vorschaubild sieht,
   klickt es an - das ist erwartbar, und vorher passierte dabei nichts.

   `tabindex="-1"` hält den Verweis aus der Tabulatorreihenfolge heraus:
   Mit der Tastatur wäre er ein zweiter Halt zum selben Ort, direkt vor
   dem beschrifteten Knopf, der dasselbe tut und dabei sagt, wohin.
   Angeklickt werden kann er trotzdem, und der Alternativtext des Bildes
   bleibt für Vorleseprogramme erhalten. */
.bild-verweis { display: block; }
/* Die Aufnahme steht frei, ohne Rahmen - eine Kontur beim Überfahren
   liefe deshalb um nichts herum. Stattdessen hebt sie sich leicht an,
   und der Pfeil am Knopf rückt mit, als läge der Zeiger auf ihm. Das
   verbindet beide sichtbar zu einer Fläche. */
.bild-verweis img { transition: transform 0.4s var(--weich); }
.bild-verweis:hover img { transform: translateY(-4px); }
.arbeit-gross:has(.bild-verweis:hover) .knopf-leer { color: var(--accent-text); }
.arbeit-gross:has(.bild-verweis:hover) .knopf-leer::after {
  transform: rotate(45deg) translate(2px, -2px);
}
/* Mit der Tastatur erreicht man den Verweis nicht - klickt jemand ihn
   dennoch an, soll der Fokusrahmen nicht am Bild kleben bleiben. */
.bild-verweis:focus { outline: none; }
@media (prefers-reduced-motion: reduce) {
  .bild-verweis img, .bild-verweis:hover img { transition: none; transform: none; }
}

/* ─── Unter dem Formular: der direkte Weg ────────────────────────────
   Stand als ein Satz in einer Zeile: "Lieber direkt? adresse oder
   nummer." Auf dem Telefon brach der zweimal um, und die Adresse
   stand dabei mitten in der Zeile - man musste sie suchen, statt sie
   zu sehen. Jetzt drei Zeilen, mittig: die Frage, die Adresse, die
   Nummer. Beide Angaben stehen für sich und lassen sich antippen,
   ohne danebenzugreifen. */
.direkt {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  margin-top: 32px; text-align: center;
}
.direkt p { margin: 0; }
.direkt a {
  font-size: 1rem; font-weight: 600;
  color: var(--text-primary); text-decoration: none;
  /* Volle Fingerbreite, damit die beiden Zeilen nicht aneinanderkleben. */
  padding: 3px 8px;
}
.direkt a:hover { color: var(--accent-text); text-decoration: underline; text-underline-offset: 4px; }