/*
 * Salonika — Erscheinungsbild des oeffentlichen Auftritts.
 * Aus raw/Planning-OeffentlicherAuftritt-2026-09-04.md, Entwurf "A x C":
 * warmes Nahe-Schwarz + Terrakotta (Entwurf A, identisch mit der App-
 * Dunkelfassung) getragen von uebergrosser buendiger Grotesk und einem
 * laufenden Modulband (Entwurf C).
 *
 * Eigene, schlanke Fassung ohne Import aus app-salonika (F9 der
 * Bestellwebsite-Planung) — dieselbe Denkweise wie shared/ui/stil.css dort,
 * aber unabhaengiger, kleinerer Quelltext.
 *
 * Zwei Zonen in einer Datei (F5): .zone-dunkel verkauft, .zone-hell erklaert
 * und wickelt ab. Keine prefers-color-scheme — welche Zone gilt, entscheidet
 * die Seite, nicht das Betriebssystem des Besuchers.
 */

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/schriften/bricolage-grotesque-800.woff2') format('woff2');
}
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/schriften/public-sans-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/schriften/public-sans-600.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/schriften/ibm-plex-mono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/schriften/ibm-plex-mono-500.woff2') format('woff2');
}

/* ------------------------------------------------------------------ Tokens */

:root {
  /* Marke (dunkel) — F5/Plan */
  --grund: #141312;
  --flaeche: #1e1c1a;
  --flaeche-hoch: #262320;
  --linie: #302d2a;
  --text: #f0efec;
  --leise: #c3c2b7;
  --still: #8f8d84;
  --akzent: #c6613f;
  --akzent-hell: #e8916e;
  --sand: #e6dccd;
  --fokus: var(--sand);

  /* Geschaeft (hell) — dieselbe Familie, dunkleres Terrakotta fuer AA-Kontrast */
  --h-grund: #faf8f4;
  --h-flaeche: #ffffff;
  --h-linie: #e2dbcc;
  --h-text: #211f1b;
  --h-leise: #57524a;
  --h-akzent: #a94e30;
  --h-akzent-flaeche: var(--akzent);
  --h-fokus: #a94e30;

  --schrift-anzeige: 'Bricolage Grotesque', system-ui, sans-serif;
  --schrift-text: 'Public Sans', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --schrift-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, 'Liberation Mono', Menlo, monospace;

  --breite: 74rem;
  --rand: clamp(1.25rem, 4vw, 3rem);
  --rund: 14px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--schrift-text);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

body.zone-hell {
  background: var(--h-grund);
  color: var(--h-text);
}

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

a { color: inherit; text-underline-offset: 0.15em; }
.zone-dunkel a.text-link { color: var(--akzent-hell); }
.zone-hell a.text-link { color: var(--h-akzent); }

/* Fokusring — eigener statt Browser-Standard, in .zone-dunkel gut sichtbar auf Nahe-Schwarz (F9) */
:focus-visible {
  outline: 3px solid var(--fokus);
  outline-offset: 3px;
  border-radius: 4px;
}
.zone-hell :focus-visible { outline-color: var(--h-fokus); }

::selection { background: var(--akzent); color: #fff; }

.sr-nur {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.sr-nur.sr-sprung {
  position: fixed; top: 0.6rem; left: 0.6rem; width: auto; height: auto;
  margin: 0; padding: 0.6rem 1rem; clip: auto; z-index: 100;
  background: var(--flaeche); color: var(--text); border-radius: 8px;
  transform: translateY(-150%); transition: transform .15s ease;
}
.sr-nur.sr-sprung:focus { transform: translateY(0); }

/* ------------------------------------------------------------- Typografie */

h1, h2, h3, .anzeige {
  font-family: var(--schrift-anzeige);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 0.97;
  margin: 0 0 0.5em;
}

h1 { font-size: clamp(2.6rem, 7vw, 5.4rem); }
h2 { font-size: clamp(2rem, 4.6vw, 3.4rem); }
h3 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); letter-spacing: -0.02em; }

/* Terrakotta als Textakzent im Titel selbst (Entwurf A), nicht nur auf
   Knoepfen — <em> markiert die eine Wendung, auf die der Satz zielt. */
h1 em, h2 em, .anzeige em { font-style: normal; color: var(--akzent); }
.zone-hell h1 em, .zone-hell h2 em, .zone-hell .anzeige em { color: var(--h-akzent); }

p { margin: 0 0 1em; max-width: 62ch; }
.zone-dunkel p { color: var(--leise); }
.zone-hell p { color: var(--h-text); }

.vorspann { font-size: clamp(1.1rem, 2vw, 1.35rem); max-width: 46ch; }

.marke-zeile, .mono {
  font-family: var(--schrift-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
}

.still-text { color: var(--still); font-size: 0.95rem; }
.zone-dunkel .still-text { font-size: 1.05rem; } /* F9: --still nicht als Kleintext im Fliesstext */

/* ---------------------------------------------------------------- Layout */

.container {
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--rand);
}

.abschnitt { padding-block: clamp(3.5rem, 8vw, 7rem); }
.abschnitt-eng { padding-block: clamp(2.5rem, 5vw, 4rem); }

.zone-dunkel .abschnitt + .abschnitt { border-top: 1px solid var(--linie); }
.zone-hell .abschnitt + .abschnitt { border-top: 1px solid var(--h-linie); }

.eingeblendet {
  opacity: 0; transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease;
}
.eingeblendet.sichtbar { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .eingeblendet { opacity: 1; transform: none; transition: none; }
}

/* ----------------------------------------------------------------- Kopf */

/* Ziel eines Anker-Links (z.B. von der Rhythmus- oder Preis-Kurzkarte):
   Abstand zur sticky Kopfzeile, plus etwas Luft, damit der Titel nicht direkt
   an der Trennlinie klebt. */
.anker-ziel { scroll-margin-top: 6.5rem; }

.kopf {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--grund) 92%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--linie);
}
.zone-hell .kopf {
  background: color-mix(in srgb, var(--h-grund) 92%, transparent);
  border-bottom-color: var(--h-linie);
}

.kopf-reihe {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; padding-block: 1.1rem;
}

.wortmarke {
  font-family: var(--schrift-anzeige); font-weight: 800;
  letter-spacing: -0.02em; font-size: 1.35rem; display: inline-flex; align-items: baseline; gap: 0.15em;
  text-decoration: none;
}
.wortmarke .punkt { color: var(--akzent); }
.zone-hell .wortmarke .punkt { color: var(--h-akzent); }

.hauptnav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); }
.hauptnav ul { list-style: none; display: flex; gap: clamp(1rem, 2vw, 1.8rem); margin: 0; padding: 0; }
.hauptnav a { text-decoration: none; font-weight: 600; font-size: 0.95rem; }
.zone-dunkel .hauptnav a { color: var(--leise); }
.zone-hell .hauptnav a { color: var(--h-text); }
.hauptnav a[aria-current="page"] { color: var(--text); }
.zone-hell .hauptnav a[aria-current="page"] { color: var(--h-akzent); }
.hauptnav a:hover { color: var(--akzent-hell); }
.zone-hell .hauptnav a:hover { color: var(--h-akzent); }

.nav-umschalter {
  display: none; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--linie); color: var(--text);
  border-radius: 8px; width: 2.5rem; height: 2.5rem; padding: 0;
}

@media (max-width: 780px) {
  .hauptnav { position: relative; }
  .hauptnav ul {
    display: none; position: absolute; top: calc(100% + 0.8rem); right: 0;
    flex-direction: column; background: var(--flaeche); border: 1px solid var(--linie);
    border-radius: 10px; padding: 0.8rem; min-width: 12rem; gap: 0.2rem;
  }
  .zone-hell .hauptnav ul { background: var(--h-flaeche); border-color: var(--h-linie); }
  .hauptnav ul.offen { display: flex; }
  .hauptnav ul a { display: block; padding: 0.5rem 0.6rem; }
  .nav-umschalter { display: inline-flex; }
}

/* --------------------------------------------------------------- Knoepfe */

.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  font-family: var(--schrift-text); font-weight: 700; font-size: 1rem;
  padding: 0.85em 1.5em; border-radius: 999px; text-decoration: none;
  border: 1px solid transparent; cursor: pointer; transition: transform .15s ease, background .15s ease;
}
.knopf:hover { transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) { .knopf:hover { transform: none; } }

.knopf-primaer { background: var(--akzent); color: #fff; }
.knopf-primaer:hover { background: var(--akzent-hell); color: #141312; }
.zone-hell .knopf-primaer { background: var(--h-akzent-flaeche); color: #fff; }

.knopf-zweitrangig { border-color: var(--linie); color: var(--text); background: transparent; }
.knopf-zweitrangig:hover { border-color: var(--akzent-hell); }
.zone-hell .knopf-zweitrangig { border-color: var(--h-linie); color: var(--h-text); }
.zone-hell .knopf-zweitrangig:hover { border-color: var(--h-akzent); }

.knopf-block { width: 100%; }

/* ------------------------------------------------------------------- Kopfbereich */

.held {
  padding-block: clamp(3rem, 9vw, 6.5rem) clamp(2.5rem, 6vw, 4rem);
  display: grid; gap: 2rem;
}
.held-knoepfe { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.5rem; }

/* ------------------------------------------------------------------ Kopfbereich Seite-an-Seite (Entwurf A) */

.held-seite {
  padding-block: clamp(2.5rem, 7vw, 5.5rem) clamp(2.5rem, 6vw, 4.5rem);
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
/* Untereinander statt nebeneinander, sobald es eng wird — die zweite
   Spalte (Kalender/Karte) verliert sonst zuerst Lesbarkeit, danach Platz. */
@media (max-width: 900px) { .held-seite { grid-template-columns: 1fr; } }
.held-fussnotiz { margin-top: 1.3rem; }

/* Kopfkarte — gemeinsamer Rahmen fuer Tagesplan, Rhythmus- und Preis-Karte:
   gleiche Flaeche wie das Produkt, kein eigenes Kartensystem je Seite. */
.kopfkarte {
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--rund);
  overflow: hidden; box-shadow: 0 30px 70px rgba(0, 0, 0, .45);
}
.kopfkarte-kopf {
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem 1.3rem; border-bottom: 1px solid var(--linie);
}
.kopfkarte-marke {
  font-family: var(--schrift-anzeige); font-weight: 800; text-transform: uppercase;
  letter-spacing: -0.02em; font-size: 1.1rem; color: var(--text);
}
.kopfkarte-marke .punkt { color: var(--akzent); }
.kopfkarte-tag { font-family: var(--schrift-mono); letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.85rem; color: var(--still); }

/* Nur die Kopfzeile der Preis-Kurzkarte ist dieser Link (-> #vergleich);
   jede Paket-Zeile darunter verlinkt stattdessen auf ihr eigenes Paket
   (Kundenwunsch 05.09.2026: "wenn ich Basis anklicke, will ich zur
   Basis-Beschreibung, nicht zum allgemeinen Vergleich") — derselbe
   Hover wie `.rhythmus-karte-zeile`, kein Anheben der ganzen Karte mehr. */
.kopfkarte-kopf-link { text-decoration: none; color: inherit; transition: background-color .15s ease; }
.kopfkarte-kopf-link:hover { background: var(--flaeche-hoch); }

/* Ampel — drei stille Punkte wie ein Fenster-Chrome, nur beim Tagesplan:
   signalisiert "das ist ein Blick in echte Software", nicht bei Rhythmus-
   oder Preis-Karte, die nichts Software-Artiges zeigen. */
.kopfkarte-ampel { display: flex; gap: 0.3rem; }
.kopfkarte-ampel i { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--linie); display: block; font-style: normal; }

/* Rhythmus-Karte (Funktionen) — Vorschau der drei Abschnitte weiter unten,
   jede Zeile verlinkt per Anker auf ihren Block. */
.rhythmus-karte-zeile {
  display: grid; grid-template-columns: 2.6rem 1fr; gap: 1rem; align-items: baseline;
  padding: 1rem 1.3rem; border-bottom: 1px solid var(--linie);
  text-decoration: none; transition: background-color .15s ease;
}
.rhythmus-karte-zeile:last-child { border-bottom: none; }
.rhythmus-karte-zeile:hover { background: var(--flaeche-hoch); }
.rhythmus-karte-zeile:hover .rhythmus-karte-nr { color: var(--akzent); }
.rhythmus-karte-nr { font-family: var(--schrift-mono); color: var(--akzent-hell); font-size: 0.9rem; letter-spacing: 0.1em; }
.rhythmus-karte-zeile b { display: block; font-weight: 600; }
.rhythmus-karte-beschreibung { color: var(--still); font-size: 0.9rem; }

/* Preis-Karte (Preise) — Kurzfassung der Tabelle weiter unten, Werte kommen
   serverseitig aus demselben Preisplan (F10/F11 der Bestellwebsite-Planung) */
.preis-karte-zeile {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: 0.9rem 1.3rem; border-bottom: 1px solid var(--linie);
  text-decoration: none; transition: background-color .15s ease;
}
.preis-karte-zeile:hover { background: var(--flaeche-hoch); }
.preis-karte-zeile:last-child { border-bottom: none; }
.preis-karte-zeile span { color: var(--leise); }
.preis-karte-zeile b { font-family: var(--schrift-mono); font-size: 1.2rem; color: var(--sand); }
.preis-karte-zeile--empfohlen { background: color-mix(in srgb, var(--akzent) 12%, transparent); }
.preis-karte-zeile--empfohlen b { color: var(--akzent-hell); }

/* ------------------------------------------------------------------ Tagesplan (im Kopfbereich, Entwurf A) */
/* Rahmen und Kopfzeile kommen von .kopfkarte/.kopfkarte-kopf; hier nur, was
   den Tagesplan von der Rhythmus- und der Preis-Karte unterscheidet. */

.tagesplan-summe { margin-left: auto; font-family: var(--schrift-mono); font-size: 0.85rem; color: var(--sand); }

/* Echter Zeitraster statt gestapelter Zeilen (Entwurf A): eine Zeitachse
   links, daneben eine Spalte je Mitarbeiter/in, Termine als absolut
   positionierte, terrakotta getoente Bloecke — Position und Hoehe aus der
   Startzeit/Dauer, nicht geraten. Ein Raster mit sichtbaren Stundenlinien
   und mehreren Spalten liest sich als Kalender, eine gestapelte Liste liest
   sich als Tabelle. */
.tagesplan-gitter { display: grid; grid-template-columns: 3.4rem 1fr 1fr; }
.tagesplan-namen { display: grid; grid-template-columns: 3.4rem 1fr 1fr; border-bottom: 1px solid var(--linie); }
.tagesplan-namen span {
  padding: 0.55rem 0.7rem; font-size: 0.78rem; color: var(--still); border-left: 1px solid var(--linie);
}
.tagesplan-namen span:first-child { border-left: 0; }

.tagesplan-zeitachse div {
  height: 3.2rem; padding-right: 0.6rem; box-sizing: border-box;
  font-family: var(--schrift-mono); font-size: 0.68rem; color: var(--still); text-align: right;
}
.tagesplan-spalte { position: relative; border-left: 1px solid var(--linie); }
.tagesplan-raster-linie { height: 3.2rem; border-bottom: 1px solid var(--linie); box-sizing: border-box; }

.tagesplan-termin {
  position: absolute; left: 0.5rem; right: 0.5rem; min-height: 2.9rem; border-radius: 8px; overflow: hidden;
  padding: 0.35rem 0.6rem; border-left: 3px solid var(--akzent);
  background: color-mix(in srgb, var(--akzent) 18%, var(--flaeche));
  opacity: 0; transform: translateX(-10px);
  animation: zeile-fahrt .5s ease forwards;
}
.tagesplan-termin--still { border-left-color: var(--linie); background: var(--flaeche-hoch); }
@media (prefers-reduced-motion: reduce) {
  .tagesplan-termin { opacity: 1; transform: none; animation: none; }
}
@keyframes zeile-fahrt { to { opacity: 1; transform: none; } }
.tagesplan-kunde, .tagesplan-leistung {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tagesplan-kunde { font-weight: 600; }
.tagesplan-leistung { color: var(--still); font-size: 0.78rem; }

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

.ablauf-raster { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; counter-reset: schritt; }
@media (max-width: 900px) { .ablauf-raster { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ablauf-raster { grid-template-columns: 1fr; } }
.ablauf-schritt { counter-increment: schritt; }
.ablauf-schritt::before {
  content: counter(schritt, decimal-leading-zero);
  font-family: var(--schrift-mono); color: var(--akzent-hell); font-size: 0.95rem; letter-spacing: 0.1em;
  display: block; margin-bottom: 0.6rem;
}
.zone-hell .ablauf-schritt::before { color: var(--h-akzent); }

/* ---------------------------------------------------------------- Preise */

.preis-gross { font-family: var(--schrift-mono); font-size: 1.6rem; color: var(--sand); }
.zone-hell .preis-gross { color: var(--h-akzent); }
.preiskarte-preis { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem; margin: 0.6rem 0; }
/* "oder" ist nur ein Bindewort zwischen den beiden Betraegen, kein eigener
   Preisbestandteil — kleiner als der umgebende still-text (Kundenwunsch
   05.09.2026). */
.preis-oder { font-size: 0.8em; }

/* Preisvergleich als eine durchgehende Karte mit duennen Spaltentrennlinien
   statt Einzelkarten mit Abstand (Kundenwunsch 05.09.2026, Referenzlayout).
   margin-top reserviert den Platz, den die Empfohlen-Fahne (.preisvergleich-fahne)
   braucht, um ueber den oberen Rand hinauszuragen — kein overflow-Wrapper
   noetig, weil auf Mobil gestapelt statt seitlich gescrollt wird. */
.preisvergleich-karte {
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--rund);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .4); margin-top: 3.8rem;
}
.zone-hell .preisvergleich-karte { background: var(--h-flaeche); border-color: var(--h-linie); }
@media (max-width: 860px) { .preisvergleich-karte { grid-template-columns: 1fr; margin-top: 0; } }

.preisvergleich-spalte { padding: 1.8rem; border-left: 1px solid var(--linie); position: relative; }
.preisvergleich-spalte:first-child { border-left: none; }
.zone-hell .preisvergleich-spalte { border-left-color: var(--h-linie); }
@media (max-width: 860px) {
  .preisvergleich-spalte { border-left: none; border-top: 1px solid var(--linie); }
  .preisvergleich-spalte:first-child { border-top: none; }
  .zone-hell .preisvergleich-spalte { border-top-color: var(--h-linie); }
  /* Fahne verschwindet gestapelt (sie braucht die Spaltenbreite) — der
     Akzentstrich haelt die Hervorhebung trotzdem sichtbar. */
  .preisvergleich-spalte--empfohlen { border-top: 3px solid var(--akzent); }
}

/* Fahne statt Fliesstext-Label — ragt ueber den oberen Rand der Karte
   hinaus, wie bei anderen Preisvergleichen ueblich. */
.preisvergleich-fahne {
  position: absolute; top: -2.4rem; left: -1px; right: -1px;
  background: var(--akzent); color: #fff; text-align: center;
  font-family: var(--schrift-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700;
  padding: 0.65rem 0; border-radius: var(--rund) var(--rund) 0 0;
}
@media (max-width: 860px) { .preisvergleich-fahne { display: none; } }

.preisvergleich-merkmale { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.preisvergleich-merkmale li { display: flex; gap: 0.6rem; align-items: baseline; }
/* Groesserer Abstand vor einer neuen Merkmal-Gruppe (Kundenwunsch 05.09.2026:
   Zusammengehoeriges clustern) — zusaetzlich zum normalen Zeilenabstand. */
.preisvergleich-merkmale li.merkmal-neue-gruppe { margin-top: 0.6rem; }
.preisvergleich-alles-aus { font-weight: 700; color: var(--sand); }
.zone-hell .preisvergleich-alles-aus { color: var(--h-akzent); }
.haekchen { color: var(--akzent-hell); font-weight: 700; }
.zone-hell .haekchen { color: var(--h-akzent); }

.grundsatz-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.grundsatz-liste li { padding-left: 1.6rem; position: relative; }
.grundsatz-liste li::before { content: '—'; position: absolute; left: 0; color: var(--akzent-hell); }
.zone-hell .grundsatz-liste li::before { color: var(--h-akzent); }

/* Einstiegskarte (Startseite) — dieselbe Kopfkarte wie Tagesplan/Rhythmus/
   Preisuebersicht, hier nur ein Preis statt einer Liste. */
.preis-einstieg-zeile { display: flex; align-items: baseline; gap: 0.4rem; padding: 1.3rem 1.3rem 0.6rem; }

/* Gamification-Schaufenster (Kundenwunsch 05.09.2026: "ausfuehrlicher und
   bunt erklaeren") — bewusst der einzige Ort im ganzen Auftritt mit mehr als
   der einen Akzentfarbe. Ein warmer Verlauf statt reinem Terrakotta signalisiert
   "das ist der spielerische Teil", ohne die Zurueckhaltung des restlichen
   Erscheinungsbilds zu brechen — sonst bunt nirgends. */
.gamification-schaufenster {
  margin-top: 2.5rem; padding: 1.8rem; border-radius: var(--rund);
  background: linear-gradient(135deg, color-mix(in srgb, #7c5cff 16%, var(--flaeche)), color-mix(in srgb, #ff8a3d 14%, var(--flaeche)));
  border: 1px solid var(--linie);
}
.gamification-schaufenster h3 { margin-bottom: 0.5rem; }
.gamification-abzeichen { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.3rem; }
.abzeichen {
  display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.55rem 1.1rem;
  border-radius: 999px; font-weight: 700; font-size: 0.9rem; color: #fff;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .25);
}
.abzeichen--feuer { background: #d9534f; }
.abzeichen--gold { background: #b8860b; }
.abzeichen--stern { background: #4f6fd1; }
.abzeichen--ziel { background: #3f9d5c; }
.abzeichen--bonus { background: #0f766e; }

/* Kopfzeile der Paket-Detailabschnitte (Kundenwunsch 05.09.2026): Ueberschrift
   links, Preis rechts — als echter Knopf im selben Stil wie "14 Tage testen"
   im Hauptmenue (.knopf.knopf-primaer, direkt in seiten/*.html verwendet),
   mit einem kleinen "Paket X"-Label darueber statt einer zweiten Marke links. */
.paket-kopf { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 1rem 1.5rem; }
.paket-kopf h2 { margin-bottom: 0; }
.paket-preis-spalte { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.paket-preis-label { font-family: var(--schrift-mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--still); }

/* -------------------------------------------------------------- Karten/Grid */

.karten-raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
@media (max-width: 900px) { .karten-raster { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .karten-raster { grid-template-columns: 1fr; } }

.karte {
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--rund);
  padding: 1.6rem;
}
.zone-hell .karte { background: var(--h-flaeche); border-color: var(--h-linie); }
.karte h3 { margin-bottom: 0.4rem; }
.karte p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- Funktionen */

.rhythmus-block + .rhythmus-block { margin-top: clamp(2.5rem, 5vw, 4rem); }
.rhythmus-titel { display: flex; align-items: baseline; gap: 0.8rem; margin-bottom: 1.5rem; }
.rhythmus-titel .marke-zeile { color: var(--akzent-hell); }
.funktions-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem 2rem; }
@media (max-width: 620px) { .funktions-liste { grid-template-columns: 1fr; } }
.funktions-liste li {
  padding: 0.9rem 0; border-bottom: 1px solid var(--linie); display: flex; gap: 0.8rem; align-items: baseline;
}
.zone-hell .funktions-liste li { border-bottom-color: var(--h-linie); }
.funktions-liste b { font-weight: 600; min-width: 11rem; }
.funktions-liste span { color: var(--still); }

/* ------------------------------------------------------------------ Formulare */

.formular { display: grid; gap: 1.4rem; max-width: 34rem; }
.feld { display: grid; gap: 0.4rem; }
.feld label { font-weight: 600; font-size: 0.95rem; }
.feld input, .feld textarea, .feld select {
  font: inherit; padding: 0.8em 1em; border-radius: 8px; border: 1px solid var(--linie);
  background: var(--flaeche-hoch); color: var(--text);
}
.zone-hell .feld input, .zone-hell .feld textarea, .zone-hell .feld select {
  border-color: var(--h-linie); background: var(--h-flaeche); color: var(--h-text);
}
.feld input:focus-visible, .feld textarea:focus-visible, .feld select:focus-visible { outline-offset: 1px; }
.feld-hinweis { font-size: 0.85rem; color: var(--still); }
.zone-hell .feld-hinweis { color: var(--h-leise); }

/* ------------------------------------------------------------------------ Fuss */

.fuss { border-top: 1px solid var(--linie); padding-block: clamp(2.5rem, 5vw, 4rem) 2rem; }
.zone-hell .fuss { border-top-color: var(--h-linie); }
.fuss-raster { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; }
@media (max-width: 700px) { .fuss-raster { grid-template-columns: 1fr; } }
.fuss h4 { font-family: var(--schrift-mono); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.8rem; color: var(--still); margin: 0 0 0.9rem; }
.fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.fuss a { text-decoration: none; }
.zone-dunkel .fuss a { color: var(--leise); }
.zone-hell .fuss a { color: var(--h-text); }
.fuss a:hover { color: var(--akzent-hell); }
.zone-hell .fuss a:hover { color: var(--h-akzent); }
.fuss-zeile-unten {
  margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--linie);
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center;
}
.zone-hell .fuss-zeile-unten { border-top-color: var(--h-linie); }
.datenschutz-zusage {
  display: inline-flex; align-items: center; gap: 0.5em; font-size: 0.85rem; color: var(--still);
}
.zone-hell .datenschutz-zusage { color: var(--h-leise); }
.datenschutz-zusage .punkt { width: 7px; height: 7px; border-radius: 50%; background: #7fae7a; display: inline-block; }

/* -------------------------------------------------------------- Legal/Text */

/* Kundenwunsch 11.09.2026: Kopf und Fuss bleiben auf den Fliesstextseiten
   (Impressum, Datenschutz, AGB) in der Standard-Farbe (Seite bleibt
   zone-dunkel) — nur dieser Abschnitt schaltet sich lokal auf hell um, per
   Klasse "zone-hell" direkt am <section class="abschnitt container">. Die
   bestehenden ".zone-hell ..."-Regeln (Absaetze, Links, Ueberschriften)
   greifen dadurch unveraendert innerhalb des Abschnitts; nur Hintergrund und
   Grundtextfarbe muessen hier zusaetzlich gesetzt werden, weil sie sonst nur
   ueber "body.zone-hell" kaemen. */
.abschnitt.zone-hell {
  background: var(--h-grund);
  color: var(--h-text);
}

.textseite { max-width: 62rem; }
.textseite h2 { text-transform: none; font-family: var(--schrift-text); font-weight: 700; letter-spacing: 0; line-height: 1.25; font-size: 1.5rem; margin-top: 2.4rem; }
.textseite h2:first-of-type { margin-top: 0; }
.textseite p, .textseite li { max-width: 68ch; }
.textseite table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; }
.textseite th, .textseite td { text-align: left; padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--h-linie); }
.entwurfs-hinweis {
  background: color-mix(in srgb, var(--h-akzent) 10%, var(--h-flaeche));
  border: 1px solid var(--h-akzent); border-radius: 10px; padding: 1rem 1.3rem;
  font-size: 0.92rem; margin-bottom: 2rem;
}

/* --------------------------------------------------------------------- Utility */

.stapel { display: grid; gap: 1rem; }
.center { text-align: center; }
/* text-align zentriert nur Inhalt innerhalb einer Box — ein <p> ist selbst
   durch seine eigene max-width (62ch) begrenzt und braucht darum eigene
   Randautomatik, sonst haengt es (und damit z.B. ein Knopf darin) links. */
.center p { margin-inline: auto; }
.max-blende { max-width: 40rem; margin-inline: auto; }

/* ------------------------------------------------------------ Bestellstrecke */

/*
 * Planning-Bestellstrecke-2026-09-19 (B5/B10/B16-B18). Nuechternes Formularhandwerk
 * in der hellen Zone (Planning-OeffentlicherAuftritt F18): eine Spalte, grosse Felder,
 * sichtbarer Fortschritt, Fehler mit Handlungsanweisung. Die Walze im Wartestand ist
 * die eine Ausnahme von der Nuechternheit — vom Auftraggeber vorgegeben (B18).
 */

.bestell { --fehler: #a3271a; --frei: #2f6b3a; }
.bestell-kopf { max-width: 40rem; }
.bestell-kopf h1 { font-size: clamp(2.2rem, 5.5vw, 3.6rem); }

.bestell-fortschritt {
  list-style: none; margin: 1rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem;
  font-size: 0.95rem; color: var(--h-leise);
}
.bestell-fortschritt li { display: inline-flex; align-items: center; gap: 0.55rem; }
.bestell-schritt-nr {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.7rem; height: 1.7rem; border-radius: 50%;
  border: 1px solid var(--h-linie); font-family: var(--schrift-mono); font-size: 0.8rem;
}
.bestell-fortschritt li[aria-current="step"] { color: var(--h-text); font-weight: 600; }
.bestell-fortschritt li[aria-current="step"] .bestell-schritt-nr { background: var(--h-akzent); border-color: var(--h-akzent); color: #fff; }
.bestell-fortschritt li.erledigt .bestell-schritt-nr { background: var(--h-text); border-color: var(--h-text); color: var(--h-grund); }

.bestell-formular { max-width: 40rem; margin-top: 2.5rem; gap: 2rem; }
.bestell-formular input[type="text"], .bestell-formular input[type="email"] { font-size: 1.05rem; padding: 0.9em 1em; }

/* minmax(0, 1fr): Eingabefelder haben eine feste Grundbreite und duerfen die Spalte auf schmalen Bildschirmen nicht aufweiten */
.bestell-gruppe { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.2rem; min-width: 0; }
.bestell-formular .feld { min-width: 0; }
.bestell-formular input[type="text"], .bestell-formular input[type="email"] { width: 100%; min-width: 0; }
.bestell-gruppe > legend {
  padding: 0; margin-bottom: 0.9rem; font-family: var(--schrift-mono); font-weight: 500;
  font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--h-leise);
}

.bestell-auswahlliste { display: grid; gap: 0.7rem; }
.bestell-auswahl {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.9rem;
  padding: 1rem 1.1rem; border: 1px solid var(--h-linie); border-radius: 12px;
  background: var(--h-flaeche); cursor: pointer;
}
.bestell-auswahl:has(input:checked) { border-color: var(--h-akzent); box-shadow: 0 0 0 1px var(--h-akzent); }
.bestell-auswahl input { width: 1.2rem; height: 1.2rem; accent-color: var(--h-akzent); }
.bestell-auswahl-text { display: grid; gap: 0.15rem; }
.bestell-auswahl-preis { text-align: right; font-weight: 700; font-size: 1.15rem; white-space: nowrap; }
.bestell-auswahl-preis small { display: block; font-weight: 400; font-size: 0.8rem; color: var(--h-leise); }
.bestell-preis-jahr { margin-top: 0.1rem; }
.bestell-fahne {
  font-family: var(--schrift-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--h-akzent);
}

.bestell-zahlweise { display: flex; flex-wrap: wrap; gap: 0.7rem 1.4rem; margin-top: 0.4rem; }
.bestell-zahlweise-option { display: inline-flex; align-items: center; gap: 0.55rem; cursor: pointer; }
.bestell-zahlweise-option input { width: 1.1rem; height: 1.1rem; accent-color: var(--h-akzent); }

/* Buchung einer Probe (B19): Salon, Adresse und Zugangsadresse stehen aus der Probe fest — nur zu lesen. */
.bestell-festwerte { margin: 0; display: grid; gap: 0.8rem; }
.bestell-festwerte > div { display: grid; gap: 0.15rem; padding: 0.7rem 1rem; border-radius: 10px; background: var(--h-grund); border: 1px solid var(--h-linie); }
.bestell-festwerte dt { font-family: var(--schrift-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--h-leise); }
.bestell-festwerte dd { margin: 0; overflow-wrap: anywhere; font-weight: 500; }

.bestell-adresse { display: flex; align-items: stretch; }
.bestell-adresse input { flex: 1 1 0; width: auto; min-width: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.bestell-adresse-ende {
  display: inline-flex; align-items: center; padding-inline: 0.9em; border: 1px solid var(--h-linie); border-left: 0;
  border-radius: 0 8px 8px 0; background: var(--h-grund); color: var(--h-leise); font-family: var(--schrift-mono); font-size: 0.95rem;
}
.feld-status { font-size: 0.9rem; min-height: 1.3em; }
.feld-status[data-art="frei"] { color: var(--frei); }
.feld-status[data-art="fehler"] { color: var(--fehler); }

.feld.hat-fehler input:not([type="checkbox"]) { border-color: var(--fehler); }
.feld-fehler { color: var(--fehler); font-size: 0.9rem; }
.bestell-fehler {
  border: 1px solid var(--fehler); border-radius: 10px; padding: 1rem 1.3rem;
  background: color-mix(in srgb, var(--fehler) 7%, var(--h-flaeche));
}
.bestell-fehler ul { margin: 0.5rem 0 0; padding-left: 1.2rem; }
.bestell-fehler li { max-width: 60ch; }

.bestell-haken { display: grid; grid-template-columns: auto 1fr; gap: 0.8rem; align-items: start; cursor: pointer; font-weight: 400; }
.bestell-haken input { width: 1.25rem; height: 1.25rem; margin-top: 0.15rem; accent-color: var(--h-akzent); }

/* Fallfeld gegen Bots (B13): fuer Menschen unsichtbar und ohne Tastaturfokus */
.bestell-fallfeld { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.bestell-zusammenfassung { border: 1px solid var(--h-linie); border-radius: 12px; padding: 1rem 1.3rem; background: var(--h-flaeche); }
.bestell-zusammenfassung p { margin: 0.3rem 0 0; }
.bestell-zusammenfassung b { font-size: 1.3rem; display: block; }
.bestell-hinweis { margin: 0; max-width: 62ch; }

/* --------------------------------------------------------------- Wartestand */

.wartestand .bestell-kopf { margin-bottom: 1rem; }
.bestell-verzoegerung {
  max-width: 34rem; padding: 0.9rem 1.1rem; border-left: 3px solid var(--h-akzent);
  background: color-mix(in srgb, var(--h-akzent) 8%, var(--h-flaeche)); border-radius: 0 8px 8px 0;
}
.bestell-verzoegerung[hidden], .bestell-fertig[hidden], .bestell-code[hidden] { display: none; }

/*
 * Die Walze (B18): ein Sichtfenster mit ausmaskiertem Rand und innerem Schatten, in dem
 * die Eintraege wie auf der Walze eines Spielautomaten von unten nach oben laufen. Der
 * aktive Eintrag steht in der Mitte, die Randeintraege sind leicht gekruemmt (rotateX) und
 * blasser. Alles haengt an einer einzigen Zahl (--aktiv); der Wechsel ist ein rasanter
 * Cubic-Bezier mit Bewegungsunschaerfe waehrend der Drehung (.dreht).
 */
.walze { --hoehe: 4.4rem; --dauer: 900ms; max-width: 34rem; margin: 2.2rem 0 1.4rem; }
.walze[hidden] { display: none; }
.walze-fenster {
  position: relative; height: calc(var(--hoehe) * 3); overflow: hidden;
  border: 1px solid var(--h-linie); border-radius: var(--rund); background: var(--h-flaeche);
  perspective: 720px; perspective-origin: 50% 50%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6);
}
/* Rand ausmaskiert (Verlauf aus der Flaechenfarbe) + innerer Schatten oben und unten (Vignette) */
.walze-fenster::before, .walze-fenster::after {
  content: ""; position: absolute; left: 0; right: 0; height: 36%; z-index: 2; pointer-events: none;
}
.walze-fenster::before {
  top: 0;
  background:
    linear-gradient(to bottom, var(--h-flaeche) 8%, transparent),
    linear-gradient(to bottom, rgba(33, 31, 27, .16), transparent 70%);
}
.walze-fenster::after {
  bottom: 0;
  background:
    linear-gradient(to top, var(--h-flaeche) 8%, transparent),
    linear-gradient(to top, rgba(33, 31, 27, .16), transparent 70%);
}
.walze-band {
  list-style: none; margin: 0; padding: 0; transform-style: preserve-3d;
  transform: translateY(calc((1 - var(--aktiv)) * var(--hoehe)));
  transition: transform var(--dauer) cubic-bezier(.75, 0, .15, 1);
}
.walze-eintrag {
  --abstand: calc(var(--i) - var(--aktiv));
  height: var(--hoehe); display: flex; align-items: center; gap: 1rem; padding-inline: 1.5rem;
  transform-origin: 50% 50%; backface-visibility: hidden;
  transform: rotateX(calc(var(--abstand) * -28deg));
  opacity: calc(1 - 0.5 * var(--abstand) * var(--abstand));
  transition: transform var(--dauer) cubic-bezier(.75, 0, .15, 1), opacity var(--dauer) ease, filter 160ms ease;
}
.walze.dreht .walze-eintrag { filter: blur(2.4px); }
.walze.springt .walze-band, .walze.springt .walze-eintrag { transition: none; }
.walze.schnell { --dauer: 260ms; }
.walze-nr {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 2.3rem; height: 2.3rem; border-radius: 50%; border: 1px solid var(--h-linie);
  font-family: var(--schrift-mono); font-size: 0.9rem; background: var(--h-grund);
}
.walze-text b { font-family: var(--schrift-anzeige); font-weight: 800; letter-spacing: -0.02em; font-size: clamp(1.15rem, 3vw, 1.45rem); line-height: 1.15; }
.walze[data-aktiv="2"] .walze-eintrag:nth-child(3) .walze-nr { background: var(--h-akzent); border-color: var(--h-akzent); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .walze-band, .walze-eintrag { transition: none; }
  .walze.dreht .walze-eintrag { filter: none; }
}

/*
 * Rollende S.-Marke neben dem Titel des Wartestands (bestellseiten.mjs,
 * bestellung.js) — dieselbe Mechanik wie der Ladebalken im Stil "Werkstatt"
 * der Salon-App und der Start-Ladebalken des Cockpits: ein Kreis in der
 * Akzentfarbe, die "S."-Marke des Favicons dreht sich darin, als würde der
 * Kreis rollen. Steht nur, während im Hintergrund wirklich etwas passiert
 * (Einrichtung/Freischaltung) — die Walze darunter bleibt die ausführliche
 * Fortschrittsanzeige, die Marke ist der schnell erkennbare Blickfang daneben.
 */
.wartestand-titelzeile { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.wartestand-titelzeile h1 { margin: 0; }
.lade-marke[hidden] { display: none; }
.lade-marke__kreis {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.1rem; height: 2.1rem; border-radius: 50%;
  background: var(--h-akzent-flaeche); color: #fff; flex: none;
}
.lade-marke__s {
  display: inline-block; font-family: var(--schrift-anzeige); font-weight: 700; font-size: .95rem;
  animation: webseite-marke-rollen 1.8s linear infinite;
}
@keyframes webseite-marke-rollen {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .lade-marke__s { animation: none; }
}

.bestell-fertig .karte { max-width: 34rem; }
.bestell-fertig-titel { font-family: var(--schrift-text); text-transform: none; font-size: 1.3rem; letter-spacing: 0; line-height: 1.3; }
.bestell-anleitung { margin: 0 0 1.2rem; padding-left: 1.3rem; max-width: 60ch; }
.bestell-anleitung li { margin-bottom: 0.4rem; }
.bestell-code { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.2rem; padding: 1rem 1.2rem; border-radius: 10px; background: var(--h-grund); border: 1px dashed var(--h-linie); margin-bottom: 1rem; }
.bestell-code .marke-zeile { flex-basis: 100%; }
.bestell-code-wert { font-family: var(--schrift-mono); font-size: clamp(1.15rem, 4vw, 1.6rem); letter-spacing: 0.08em; font-weight: 500; overflow-wrap: anywhere; }
.bestell-code .knopf { padding: 0.5em 1.1em; font-size: 0.9rem; }