/* ============================================================
   Konfigurator 3.0 – Entwurf (isoliert, bindet base.css NICHT ein)
   Prinzip: Das Produkt steht auf einer Bühne, die Bedienung tritt zurück.
   Markenfarben aus assets/base.css übernommen, Tokens hier lokal.
   ============================================================ */

:root {
  color-scheme: dark;

  /* Marke */
  --ink:        #1b2440;
  --ink-deep:   #0e1426;
  --ink-deeper: #090d1a;
  --paper:      #faf6ee;
  --sun:        #c06028;
  --marigold:   #f0a840;

  /* Bühne */
  --stage-text:      #f4f1e9;
  --stage-text-mute: rgba(244, 241, 233, 0.70);
  /* 0.58 statt 0.40: darunter fallen die kleinen Labels unter 4.5:1 und sind
     auf dem dunklen Grund schlicht schlecht lesbar. Gemessen, nicht geschaetzt. */
  --stage-text-dim:  rgba(244, 241, 233, 0.58);
  --hairline:        rgba(244, 241, 233, 0.11);
  --hairline-strong: rgba(244, 241, 233, 0.22);

  --font-sans:  "Hanken Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-serif: "Fraunces", Georgia, serif;

  /* Eine Bewegungssprache. Apple-nahe Kurve: schnell raus, lang ausklingend. */
  --ease:      cubic-bezier(0.22, 0.75, 0.12, 1);
  --ease-soft: cubic-bezier(0.22, 0.61, 0.24, 1);
  --t-press: 110ms;
  --t-ui:    300ms;
  --t-scene: 660ms;
  --t-mood:  780ms;

  --panel-w: 29rem;
}

/* Registrierte Farb-Variablen. Ohne das springen Custom Properties hart um:
   der Hintergrund gleitet, der Knopf knallt. Registriert gleiten sie mit,
   und zwar alles gleichzeitig. */
@property --site-bg        { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
@property --site-ink       { syntax: "<color>"; inherits: true; initial-value: #1b2440; }
@property --site-mute      { syntax: "<color>"; inherits: true; initial-value: #6b7280; }
@property --site-line      { syntax: "<color>"; inherits: true; initial-value: #e5e7eb; }
@property --site-tile      { syntax: "<color>"; inherits: true; initial-value: #f3f4f6; }
@property --site-accent    { syntax: "<color>"; inherits: true; initial-value: #c06028; }
@property --site-on-accent { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
@property --site-band      { syntax: "<color>"; inherits: true; initial-value: #ffffff; }

* { box-sizing: border-box; }

/* Eine display-Regel schlaegt sonst das Attribut: dreimal sichtbar
   gewesen, was verborgen sein sollte. */
[hidden] { display: none !important; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  background: var(--ink-deeper);
  color: var(--stage-text);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

button { font: inherit; color: inherit; }

::selection { background: var(--marigold); color: var(--ink); }

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

/* Filmkorn – fest, nie im Scrollfluss, damit die GPU ruhig bleibt. */
.grain {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Kopfleiste ─────────────────────────────────────────── */

.bar {
  position: relative;
  z-index: 30;
  height: 4.5rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.5rem;
  padding: 0 1.75rem;
  background: rgba(9, 13, 26, 0.72);
  backdrop-filter: blur(20px) saturate(150%);
  border-bottom: 1px solid var(--hairline);
}

.bar__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: inherit;
  justify-self: start;
}

.bar__mark {
  width: 2.35rem;
  height: 2.35rem;
  flex: none;
  object-fit: contain;
}

.bar__name {
  display: flex;
  flex-direction: column;
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--stage-text);
}

.bar__name small {
  font-family: var(--font-sans);
  font-size: 0.74rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--stage-text-dim);
}

.bar__price { text-align: center; }

.price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.1rem;
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

/* Die Zahl rollt, sie springt nicht. Das ist der Moment, den man fühlt. */
.price__roll {
  position: relative;
  display: inline-block;
  overflow: hidden;
  height: 1.5em;
}

.price__num {
  display: block;
  font-variant-numeric: tabular-nums;
  transition: transform var(--t-ui) var(--ease), opacity var(--t-ui) var(--ease);
}

.price__num.is-out { transform: translateY(-105%); opacity: 0; }
.price__num.is-in  { transform: translateY(105%);  opacity: 0; }

.price__cur { font-size: 0.85em; color: var(--stage-text-mute); }

.price__care {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--marigold);
  margin-left: 0.5rem;
  opacity: 0;
  transform: translateX(-0.35rem);
  transition: opacity var(--t-ui) var(--ease), transform var(--t-ui) var(--ease);
}

.price__care.is-on { opacity: 1; transform: none; }

.price__meta {
  margin: 0.15rem 0 0;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--stage-text-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
}

.cta {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.5rem 0.5rem 1.15rem;
  border: 0;
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: transform var(--t-press) var(--ease), background var(--t-ui) var(--ease);
}

.cta:hover { background: #fff; }
.cta:active { transform: scale(0.975); }

/* Der Pfeil sitzt in seinem eigenen Kreis, nicht nackt neben dem Text. */
.cta__pip {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(27, 36, 64, 0.09);
  transition: transform var(--t-ui) var(--ease), background var(--t-ui) var(--ease);
}

.cta__pip svg { width: 0.85rem; height: 0.85rem; }
.cta:hover .cta__pip { transform: translate(2px, -2px); background: rgba(27, 36, 64, 0.16); }

/* ── Raum ───────────────────────────────────────────────── */

.room {
  height: calc(100dvh - 4.5rem);
  display: grid;
  grid-template-columns: 1fr var(--panel-w);
}

/* ── Bühne ──────────────────────────────────────────────── */

.stage {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  place-items: center;
  padding: 1.25rem 1.25rem 1rem;
  background:
    radial-gradient(120% 90% at 50% 8%, #1a2440 0%, transparent 60%),
    linear-gradient(180deg, var(--ink-deep) 0%, var(--ink-deeper) 100%);
  overflow: hidden;
}

/* Licht von oben, das mit der Handschrift die Farbe wechselt. */
.stage__light {
  position: absolute;
  top: -22%;
  left: 50%;
  width: 78%;
  aspect-ratio: 1 / 0.62;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, var(--glow, rgba(240, 168, 64, 0.20)) 0%, transparent 68%);
  filter: blur(18px);
  pointer-events: none;
  transition: background var(--t-scene) var(--ease-soft);
}

/* ── Gerät ──────────────────────────────────────────────
   Fünf Bildschirme, zwischen denen man wischt. Breite und Seitenverhältnis
   kommen aus Variablen, damit der Wechsel eine Bewegung ist und kein Sprung. */

.device {
  position: relative;
  width: min(100%, var(--dev-w, 58rem), calc((100dvh - 16rem) * var(--dev-ar, 1.778)));
  transition:
    width var(--t-scene) var(--ease),
    transform var(--t-scene) var(--ease),
    --site-bg var(--t-mood) var(--ease-soft),
    --site-ink var(--t-mood) var(--ease-soft),
    --site-mute var(--t-mood) var(--ease-soft),
    --site-line var(--t-mood) var(--ease-soft),
    --site-tile var(--t-mood) var(--ease-soft),
    --site-accent var(--t-mood) var(--ease-soft),
    --site-on-accent var(--t-mood) var(--ease-soft),
    --site-band var(--t-mood) var(--ease-soft);
}

.device__shell {
  padding: var(--dev-pad, 0.5rem);
  border-radius: calc(var(--dev-r, 1.3rem) + var(--dev-pad, 0.5rem));
  background: linear-gradient(180deg, rgba(244, 241, 233, 0.10), rgba(244, 241, 233, 0.03));
  border: 1px solid rgba(244, 241, 233, 0.14);
  box-shadow:
    0 2px 1px rgba(255, 255, 255, 0.07) inset,
    0 30px 60px -20px rgba(0, 0, 0, 0.75),
    0 60px 120px -40px rgba(0, 0, 0, 0.6);
  /* Gleiche bewusste Ausnahme wie bei der Breite: das Gehaeuse wird beim
     Handy dicker und runder. Ein Element, nur beim Geraetewechsel. */
  transition: padding var(--t-scene) var(--ease), border-radius var(--t-scene) var(--ease);
}

.device__screen {
  position: relative;
  border-radius: var(--dev-r, 1.3rem);
  overflow: hidden;
  background: var(--site-bg, #fff);
  aspect-ratio: var(--dev-ratio, 16 / 9);
  max-height: calc(100dvh - 15.5rem);
  container-type: inline-size;
  transition:
    aspect-ratio var(--t-scene) var(--ease),
    border-radius var(--t-scene) var(--ease),
    background var(--t-scene) var(--ease-soft);
}

/* Ein kurzer Schub in Wischrichtung, damit der Wechsel Fahrt hat. */
.device.is-shifting { animation: devShift var(--t-scene) var(--ease); }

@keyframes devShift {
  0%   { transform: scale(0.975); }
  100% { transform: none; }
}

.device__screen::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3.5rem;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--site-bg, #fff));
  opacity: 0.9;
  transition: opacity var(--t-ui) var(--ease);
  z-index: 2;
}

.device.is-scrolled .device__screen::after { opacity: 0; }

.device__foot {
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: -1.5rem;
  height: 2rem;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.55), transparent 72%);
  filter: blur(10px);
  pointer-events: none;
}

/* Die gezeigte Website folgt dem Gerät, statt nur schmaler zu werden. */
html[data-narrow="yes"] .site__nav { display: none; }

html[data-narrow="yes"] .site__bar::after {
  content: "";
  width: 1.15em;
  height: 0.62em;
  flex: 0 0 auto;
  border-top: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  opacity: 0.75;
}

html[data-narrow="yes"] .site__claim { font-size: 1.9em; max-width: 9em; }

/* Ein Hochkant-Gerät zeigt ein hohes Startbild, kein Breitwandband.
   Flach sah der Hero auf dem Handy aus, als läge der Text auf nichts. */
html[data-device="tablet"] .site__img,
html[data-device="fold"] .site__img { aspect-ratio: 4 / 3; }
html[data-narrow="yes"] .site__img { aspect-ratio: 4 / 4.6; }
html[data-narrow="yes"] .site__heroText { left: 1.2em; right: 1.2em; bottom: 1.2em; }
html[data-device="tablet"] .site__claim,
html[data-device="fold"] .site__claim { max-width: 10em; }

/* ── Gerätewahl ─────────────────────────────────────────── */

.views {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: rgba(244, 241, 233, 0.04);
}

.views__arrow {
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--stage-text-dim);
  cursor: pointer;
  transition: color var(--t-ui) var(--ease), background var(--t-ui) var(--ease), transform var(--t-press) var(--ease);
}

.views__arrow svg { width: 1rem; height: 1rem; }
.views__arrow:hover { color: var(--stage-text); background: rgba(244, 241, 233, 0.10); }
.views__arrow:active { transform: scale(0.9); }

.views__now {
  min-width: 9.5rem;
  text-align: center;
  font-size: 0.88rem;
  color: var(--stage-text);
}

.dots { display: inline-flex; gap: 0.4rem; }

.devDot {
  width: 0.5rem;
  height: 0.5rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(244, 241, 233, 0.45);
  cursor: pointer;
  transition: background var(--t-ui) var(--ease), transform var(--t-ui) var(--ease);
}

.devDot:hover { background: rgba(244, 241, 233, 0.5); }
.devDot.is-on { background: var(--marigold); transform: scale(1.25); }

.views__btn {
  border: 0;
  background: transparent;
  color: var(--stage-text-dim);
  padding: 0.4rem 1rem;
  border-radius: 999px;
  font-size: 0.82rem;
  cursor: pointer;
  transition: color var(--t-ui) var(--ease), background var(--t-ui) var(--ease), transform var(--t-press) var(--ease);
}

.views__btn:hover { color: var(--stage-text); }
.views__btn:active { transform: scale(0.96); }
.views__btn.is-on { background: rgba(244, 241, 233, 0.10); color: var(--stage-text); }

/* ── Die Website im Gerät ───────────────────────────────── */

.site {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: none;
  background: var(--site-bg, #fff);
  color: var(--site-ink, #1b2440);
  /* An die Gerätebreite gekoppelt, nicht an die Fensterbreite: eine echte
     Website hat bei 1400 px rund 17 px Grundschrift, also gut 1,2 Prozent
     der Breite. Vorher schrumpfte die Vorschau optisch, je breiter der
     Monitor war. */
  font-size: clamp(0.7rem, calc(var(--dev-fs, 1.15) * 1cqw), 1.15rem);
  line-height: 1.5;

}

/* Der Szenenwechsel: kurz zurücktreten, unscharf werden, neu aufbauen. */
.site.is-swapping { --swap: 1; }
.site.is-swapping .site__bar,
.site.is-swapping .site__hero,
.site.is-swapping .site__flow { opacity: 0.25; filter: blur(7px); transform: scale(0.988); }

.site__bar, .site__hero, .site__flow {
  transition: opacity var(--t-scene) var(--ease), filter var(--t-scene) var(--ease), transform var(--t-scene) var(--ease);
}

.site__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1em 1.6em;
  background: var(--site-band, transparent);
  border-bottom: 1px solid var(--site-line, rgba(27, 36, 64, 0.1));
}

.site__logo {
  font-family: var(--site-display, var(--font-serif));
  max-width: 58%;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 1.35em;
  font-weight: 600;
  letter-spacing: -0.015em;
}

/* Sehr lange Namen etwas kleiner, sonst draengen sie die Navigation weg. */
.site__logo.is-long { font-size: 1.05em; line-height: 1.2; }

.site__nav { display: flex; gap: 1.35em; }

.site__nav span {
  font-size: 0.92em;
  color: var(--site-mute, rgba(27, 36, 64, 0.6));
  white-space: nowrap;
  text-transform: var(--site-nav-case, none);
  letter-spacing: var(--site-nav-track, 0em);
}

.site::-webkit-scrollbar { width: 0; height: 0; }

/* Kurzer Dip, wenn die Handschrift die Schriftart wechselt. */
.site__logo, .site__claim, .site__h3 {
  transition: opacity 180ms var(--ease-soft), filter 180ms var(--ease-soft);
}

.device.is-tinting .site__logo,
.device.is-tinting .site__claim,
.device.is-tinting .site__h3 { opacity: 0.62; filter: blur(1.6px); }

.site__hero { position: relative; }

/* Der Text steht auf Bildern jeder Helligkeit, also bekommt er seinen eigenen Grund. */
.site__hero::after {
  content: "";
  position: absolute;
  inset: 40% 0 0;
  background: linear-gradient(to bottom, transparent, rgba(12, 10, 8, 0.78));
  pointer-events: none;
}

.site__heroText { z-index: 1; }

.site__img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 8;
  object-fit: cover;
  transition: opacity var(--t-scene) var(--ease);
}

.site__heroText {
  position: absolute;
  left: 2em;
  right: 2em;
  bottom: 1.6em;
  color: #fff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
}

.site__kicker {
  margin: 0 0 0.35em;
  font-size: 0.85em;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.85;
}

.site__claim {
  font-family: var(--site-display, var(--font-serif));
  font-size: 2.2em;
  line-height: 1.1;
  letter-spacing: -0.028em;
  margin: 0 0 0.75em;
  max-width: 11em;
  font-weight: 600;
  text-wrap: balance;
}

.site__btn {
  display: inline-block;
  padding: 0.55em 1.2em;
  border-radius: var(--site-btn-radius, 999px);
  background: var(--site-accent, #c06028);
  color: var(--site-on-accent, #fff);
  font-size: 0.92em;
  font-weight: 500;
}

.site__flow { padding: 1.6em; display: grid; gap: 2.1em; }

.site__block { opacity: 0; transform: translateY(1.1em); }

.site__block.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 520ms var(--ease), transform 520ms var(--ease);
}

.site__h3 {
  font-family: var(--site-display, var(--font-serif));
  font-size: 1.45em;
  letter-spacing: -0.02em;
  margin: 0 0 0.5em;
  font-weight: 600;
}

.site__row { display: grid; grid-template-columns: repeat(var(--dev-cols, 3), 1fr); gap: 0.8em; transition: grid-template-columns var(--t-scene) var(--ease); }

.site__tile {
  border-radius: var(--site-radius, 0.55em);
  overflow: hidden;
  background: var(--site-tile, rgba(27, 36, 64, 0.05));
  aspect-ratio: 4 / 3;
}

.site__tile img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Echte Inhalte in der gezeigten Website ─────────────── */

.site__fig { margin: 0; }

/* ── Eine Seite, die man zeigen kann ──────────────────────
   Eroeffnungssatz, Leistungskarten, gebauter Fuss. Alles im Style des
   Kunden, damit der Wechsel auch hier durchschlaegt. */

.site__say {
  margin: 0.4em 0 0.6em;
  max-width: 17em;
  font-family: var(--site-display, var(--font-serif));
  font-size: 1.5em;
  font-weight: 500;
  line-height: 1.32;
  letter-spacing: -0.02em;
  text-wrap: pretty;
}

.site__card {
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  border-radius: var(--site-radius, 0.55em);
  background: var(--site-band, transparent);
  border: 1px solid var(--site-line, rgba(27, 36, 64, 0.12));
}

.site__card .site__tile {
  border-radius: 0;
  border-bottom: 1px solid var(--site-line, rgba(27, 36, 64, 0.12));
}

.site__cardText {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6em;
  padding: 0.75em 0.85em;
}

.site__cardText h4 {
  margin: 0;
  font-family: var(--site-display, var(--font-serif));
  font-size: 1.02em;
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.2;
}

.site__arrow {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.6em;
  height: 1.6em;
  border-radius: 50%;
  background: var(--site-tile, rgba(27, 36, 64, 0.06));
  color: var(--site-accent, #c06028);
}

.site__arrow svg { width: 0.8em; height: 0.8em; }

/* ── Was die Stufe mitbringt ──────────────────────────────── */

/* Eine Seite hat kein Menue, sondern den kuerzesten Weg zum Anruf. */
.site__call {
  display: none;
  flex: none;
  padding: 0.45em 1em;
  border-radius: var(--site-btn-radius, 999px);
  background: var(--site-accent, #c06028);
  color: var(--site-on-accent, #fff);
  font-size: 0.85em;
  font-weight: 500;
  white-space: nowrap;
}

.site__bar:not(.has-nav) .site__call { display: inline-block; }
/* Ohne Menue auch kein Menueknopf auf dem schmalen Geraet. */
html[data-narrow="yes"] .site__bar:not(.has-nav)::after { display: none; }

/* Betrieb: Bild und Text nebeneinander, eine Form, die vorher fehlte. */
.site__split {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 1.4em;
  align-items: center;
}

.site__split .site__tile { aspect-ratio: 4 / 3; }
.site__splitText .site__h3 { margin-bottom: 0.4em; }
html[data-narrow="yes"] .site__split { grid-template-columns: 1fr; gap: 1em; }

.site__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Werkzeuge in der Vorschau ────────────────────────────────
   Ab Premium erledigt die Seite etwas, statt nur gut auszusehen. Das ist
   das Argument, das sich nicht wegdiskutieren laesst: eine Terminstrecke
   nimmt dem Betrieb Anrufe ab, ein Rechner sortiert Anfragen vor. */

.site__tool {
  display: grid;
  gap: 0.9em;
  padding: 1.4em 1.5em 1.5em;
  border: 1px solid var(--site-line, rgba(27, 36, 64, 0.12));
  border-radius: var(--site-radius, 0.55em);
  background: var(--site-band, transparent);
}

.site__tool .site__h3 { margin: 0; }

.site__days { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5em; }

.site__day {
  display: grid;
  gap: 0.1em;
  padding: 0.6em 0.4em;
  border: 1px solid var(--site-line, rgba(27, 36, 64, 0.12));
  border-radius: var(--site-radius, 0.55em);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: center;
  cursor: pointer;
}

.site__day b { font-size: 1em; font-weight: 600; }
.site__day span { font-size: 0.82em; color: var(--site-mute, rgba(27, 36, 64, 0.6)); }

.site__day.is-on {
  background: var(--site-accent, #c06028);
  border-color: var(--site-accent, #c06028);
  color: var(--site-on-accent, #fff);
}

.site__day.is-on span { color: inherit; opacity: 0.85; }

.site__slots { display: flex; flex-wrap: wrap; gap: 0.45em; }

.site__slot {
  padding: 0.45em 0.95em;
  border: 1px solid var(--site-line, rgba(27, 36, 64, 0.12));
  border-radius: var(--site-btn-radius, 999px);
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.92em;
  cursor: pointer;
}

.site__slot.is-on {
  background: var(--site-accent, #c06028);
  border-color: var(--site-accent, #c06028);
  color: var(--site-on-accent, #fff);
}

.site__toolBtn {
  justify-self: start;
  padding: 0.62em 1.35em;
  border: 0;
  border-radius: var(--site-btn-radius, 999px);
  background: var(--site-accent, #c06028);
  color: var(--site-on-accent, #fff);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}

.site__toolNote {
  margin: 0;
  font-size: 0.86em;
  line-height: 1.45;
  color: var(--site-mute, rgba(27, 36, 64, 0.6));
}

.site__tool.is-done [data-notiz] { color: var(--site-ink, #1b2440); font-weight: 500; }

.site__rechnerZeile {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1em;
  font-size: 0.92em;
  color: var(--site-mute, rgba(27, 36, 64, 0.6));
}

.site__rechnerZeile output {
  font-family: var(--site-display, var(--font-serif));
  font-size: 1.3em;
  font-weight: 600;
  color: var(--site-ink, #1b2440);
}

.site__tool input[type="range"] {
  width: 100%;
  margin: 0;
  accent-color: var(--site-accent, #c06028);
}

.site__preis { margin: 0; }

.site__preis b {
  font-family: var(--site-display, var(--font-serif));
  font-size: 2.1em;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
}

html[data-narrow="yes"] .site__tool { padding: 1.1em 1.1em 1.2em; }
html[data-narrow="yes"] .site__preis b { font-size: 1.7em; }

/* Der Ultra-Style bekommt seinen eigenen Griff: ein Leuchten im Grund,
   das kein anderer Style hat. Genau das soll man vermissen. */
.site[data-style="glas"] {
  background-image:
    radial-gradient(68% 42% at 12% 0%, rgba(142, 230, 200, 0.17), transparent 72%),
    radial-gradient(58% 38% at 92% 10%, rgba(96, 156, 232, 0.15), transparent 72%);
}

/* ── Die Stufe gestaltet die ganze Seite ──────────────────────
   Eine Rubrik mehr rechtfertigt keine 500 Euro. Also sieht die Seite auf
   jeder Stufe anders aus: die Schrift waechst, die Anordnung wird
   redaktioneller, und ab Ultra greifen die Abschnitte ineinander. */

/* Business: mehr Luft und eine Spur groesser als der Einseiter. */
.site[data-stufe="business"] .site__flow { gap: 2.4em; }
.site[data-stufe="business"] .site__claim { font-size: 2.4em; }
.site[data-stufe="business"] .site__say { font-size: 1.7em; }

/* Premium: redaktionell. Grosse Aussage, ungleiche Leistungen,
   Stimme ueber die volle Breite. */
.site[data-stufe="premium"] .site__flow,
.site[data-stufe="ultra"] .site__flow { gap: 2.9em; }

.site[data-stufe="premium"] .site__claim { font-size: 2.75em; }
.site[data-stufe="ultra"] .site__claim { font-size: 3.05em; }

.site[data-stufe="premium"] .site__say,
.site[data-stufe="ultra"] .site__say {
  font-size: 2.15em;
  max-width: 13em;
  line-height: 1.24;
}

/* Die Eyebrow bekommt einen Strich, wie in einem Magazin. */
.site[data-stufe="premium"] .site__kicker,
.site[data-stufe="ultra"] .site__kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.8em;
}

.site[data-stufe="premium"] .site__kicker::before,
.site[data-stufe="ultra"] .site__kicker::before {
  content: "";
  width: 2.4em;
  height: 1px;
  background: currentColor;
  opacity: 0.8;
}

/* Ungleiche Leistungen: eine gross, zwei daneben. Nur auf Geraeten, die
   drei Spalten zeigen, sonst wird es auf dem Handy zur Quetsche. */
html[data-device="desktop"] .site[data-stufe="premium"] .site__row,
html[data-device="desktop"] .site[data-stufe="ultra"] .site__row,
html[data-device="laptop"] .site[data-stufe="premium"] .site__row,
html[data-device="laptop"] .site[data-stufe="ultra"] .site__row {
  grid-template-columns: 1.55fr 1fr;
  grid-auto-rows: 1fr;
}

html[data-device="desktop"] .site[data-stufe="premium"] .site__card:first-child,
html[data-device="desktop"] .site[data-stufe="ultra"] .site__card:first-child,
html[data-device="laptop"] .site[data-stufe="premium"] .site__card:first-child,
html[data-device="laptop"] .site[data-stufe="ultra"] .site__card:first-child {
  grid-row: span 2;
  grid-template-rows: 1fr auto;
}

html[data-device="desktop"] .site[data-stufe="premium"] .site__card:first-child .site__tile,
html[data-device="desktop"] .site[data-stufe="ultra"] .site__card:first-child .site__tile,
html[data-device="laptop"] .site[data-stufe="premium"] .site__card:first-child .site__tile,
html[data-device="laptop"] .site[data-stufe="ultra"] .site__card:first-child .site__tile {
  aspect-ratio: auto;
  height: 100%;
  min-height: 9em;
}

html[data-device="desktop"] .site[data-stufe="premium"] .site__card:first-child h4,
html[data-device="desktop"] .site[data-stufe="ultra"] .site__card:first-child h4,
html[data-device="laptop"] .site[data-stufe="premium"] .site__card:first-child h4,
html[data-device="laptop"] .site[data-stufe="ultra"] .site__card:first-child h4 { font-size: 1.2em; }

/* Zahlen mit Trennern statt nur nebeneinander. */
.site[data-stufe="premium"] .site__fact,
.site[data-stufe="ultra"] .site__fact { padding-left: 1.1em; border-left: 1px solid var(--site-line, rgba(27, 36, 64, 0.12)); }
.site[data-stufe="premium"] .site__fact:first-child,
.site[data-stufe="ultra"] .site__fact:first-child { padding-left: 0; border-left: 0; }
.site[data-stufe="premium"] .site__fact b,
.site[data-stufe="ultra"] .site__fact b { font-size: 2.25em; }

/* Die Stimme bekommt den ganzen Raum. */
.site[data-stufe="premium"] .site__quote,
.site[data-stufe="ultra"] .site__quote {
  margin: 0 -1.6em;
  padding: 2.4em 1.8em;
  background: var(--site-band, transparent);
}

.site[data-stufe="premium"] .site__quote p,
.site[data-stufe="ultra"] .site__quote p { font-size: 1.7em; max-width: 15em; }

/* Ultra: die Abschnitte greifen ineinander. Die Zahlen liegen auf dem
   Band statt darunter. Das ist der Griff, den man auf teuren Seiten
   sieht und auf billigen nie. */
html[data-narrow="no"] .site[data-stufe="ultra"] .site__block--band + .site__block .site__facts {
  position: relative;
  margin: -4em 1.4em 0;
  padding: 1.5em 1.6em;
  border-radius: var(--site-radius, 0.55em);
  background: var(--site-band, transparent);
  box-shadow: 0 1.4em 3em -1.6em rgba(0, 0, 0, 0.45);
}

/* Ab Premium bewegt sich die Seite beim Scrollen. Reine Transform-
   Animation auf der Scrollachse, kein Scroll-Zuhoerer. */
@media (prefers-reduced-motion: no-preference) {
  .site.is-motion .site__band img {
    animation: bandPan linear both;
    animation-timeline: view();
    animation-range: entry 0% exit 100%;
  }
}

@keyframes bandPan {
  from { transform: scale(1.14) translateY(-3.2%); }
  to   { transform: scale(1.14) translateY(3.2%); }
}

/* Der neue Abschnitt meldet sich kurz, in der Akzentfarbe des Kunden,
   nicht in unserer. */
.site__block.is-new {
  border-radius: var(--site-radius, 0.55em);
  animation: neuDa 1700ms var(--ease);
}

@keyframes neuDa {
  0%   { box-shadow: 0 0 0 0 transparent; }
  14%  { box-shadow: 0 0 0 3px var(--site-accent, #c06028); }
  62%  { box-shadow: 0 0 0 3px var(--site-accent, #c06028); }
  100% { box-shadow: 0 0 0 0 transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .site__block.is-new { animation: none; }
}

/* Das Atmosphaerenband. Randlos aus der Spaltenbreite heraus, damit es
   den Takt der Abschnitte einmal bricht. */
.site__block--band { margin: 0.5em -1.6em; }

.site__band { margin: 0; display: block; overflow: hidden; }

.site__band img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 21 / 9;
  object-fit: cover;
}

/* Drei Zahlen nebeneinander, eine andere Form als alles davor. */
.site__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1em;
  padding: 0.4em 0 0.2em;
}

.site__fact b {
  display: block;
  font-family: var(--site-display, var(--font-serif));
  font-size: 1.9em;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.035em;
  overflow-wrap: anywhere;
}

.site__fact span {
  display: block;
  margin-top: 0.45em;
  font-size: 0.85em;
  line-height: 1.35;
  color: var(--site-mute, rgba(27, 36, 64, 0.6));
}

html[data-narrow="yes"] .site__fact b { font-size: 1.5em; }
html[data-narrow="yes"] .site__facts { gap: 0.7em; }

/* Der Fuss traegt die Marke und die zwei Angaben, die wirklich
   gesucht werden. Vorher stand das als grauer Streifen mittendrin. */
.site__block--foot { margin: 0.8em -1.6em -1.6em; }

.site__foot {
  padding: 1.5em 1.6em 1.6em;
  background: var(--site-band, transparent);
  border-top: 1px solid var(--site-line, rgba(27, 36, 64, 0.12));
}

.site__footName {
  margin: 0 0 0.9em;
  font-family: var(--site-display, var(--font-serif));
  font-size: 1.25em;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.site__footCols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2em;
}

.site__footCols span {
  display: block;
  margin-bottom: 0.3em;
  font-size: 0.78em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--site-mute, rgba(27, 36, 64, 0.6));
}

.site__footCols p { margin: 0; font-size: 0.95em; line-height: 1.45; }

html[data-narrow="yes"] .site__footCols { grid-template-columns: 1fr; gap: 0.9em; }
html[data-narrow="yes"] .site__say { font-size: 1.3em; max-width: none; }

.site__tile--wide { aspect-ratio: 16 / 7; position: relative; }

.site__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
}

.site__play svg {
  width: 2.6em;
  height: 2.6em;
  border-radius: 50%;
  background: rgba(20, 20, 20, 0.45);
  padding: 0.35em;
}

.site__p {
  margin: 0;
  font-size: 0.98em;
  color: var(--site-mute, rgba(27, 36, 64, 0.6));
  max-width: 44em;
}

.site__note {
  padding: 0.85em 1em;
  border-radius: var(--site-radius, 0.55em);
  background: var(--site-band, transparent);
  border: 1px solid var(--site-line, rgba(27, 36, 64, 0.12));
}

.site__note p { margin: 0.3em 0 0; font-size: 0.95em; }

.site__quote { margin: 0; }

.site__quote p {
  margin: 0;
  font-family: var(--site-display, var(--font-serif));
  font-size: 1.25em;
  line-height: 1.4;
  letter-spacing: -0.015em;
}

.site__quote cite {
  display: block;
  margin-top: 0.6em;
  font-style: normal;
  font-size: 0.88em;
  color: var(--site-mute, rgba(27, 36, 64, 0.6));
}

/* Was der Kunde mit Betreuung selbst ändert, bekommt eine ruhige Markierung.
   Das ist der Beweis für die lebenden Funktionen, nicht nur eine Behauptung. */
[data-live] { position: relative; transition: box-shadow var(--t-ui) var(--ease); }

/* Die gelbe Umrandung ist raus. Sie lag auf halben Abschnitten und sah
   aus, als waere die ganze Seite ein Formular. Der Stift allein sagt,
   was anfassbar ist, und er steht nur dort, wo wirklich etwas geht. */

[data-live].is-living::after {
  content: "";
  position: absolute;
  top: -0.35em;
  right: -0.35em;
  width: 0.7em;
  height: 0.7em;
  border-radius: 50%;
  background: #f0a840;
  box-shadow: 0 0 0 0.22em rgba(240, 168, 64, 0.25);
}

/* ── Bedienfeld ─────────────────────────────────────────── */

.panel {
  border-left: 1px solid var(--hairline);
  background: linear-gradient(180deg, rgba(27, 36, 64, 0.55), rgba(9, 13, 26, 0.9));
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 0;
}

.panel__head { padding: 2rem 2rem 1.25rem; }

/* Kein Eyebrow-Label: die Zeile benennt den Betrieb und ändert sich sichtbar mit. */
.panel__eyebrowless {
  margin: 0 0 0.35rem;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  color: var(--marigold);
  transition: opacity var(--t-ui) var(--ease);
}

.panel__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1.62rem;
  line-height: 1.2;
  letter-spacing: -0.025em;
  font-weight: 500;
  text-wrap: balance;
}

.panel__scroll {
  --panel-pad: 2rem;
  overflow-y: auto;
  padding: 0 var(--panel-pad) 2.5rem;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--hairline-strong) transparent;
}

.row { border-top: 1px solid var(--hairline); }
.row--last { padding-bottom: 0.5rem; }

/* ── Bedienfeld: Typografie bewusst groesser ───────────── */

.row__label {
  margin: 0 0 1rem;
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stage-text-mute);
}

.row__hint {
  margin: 0.9rem 0 0;
  font-size: 0.9rem;
  color: var(--stage-text-mute);
  min-height: 1.2em;
  transition: opacity var(--t-ui) var(--ease);
}

/* Kategorien: Bild und Name nebeneinander, damit man sie liest
   statt sie zu ueberfliegen. */
.trades {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem;
}

.trade {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0.35rem 0.8rem 0.35rem 0.35rem;
  background: rgba(244, 241, 233, 0.04);
  cursor: pointer;
  text-align: left;
  transition: background var(--t-ui) var(--ease), border-color var(--t-ui) var(--ease), transform var(--t-press) var(--ease);
}

.trade:hover { background: rgba(244, 241, 233, 0.09); }
.trade:active { transform: scale(0.97); }

.trade.is-on {
  background: rgba(240, 168, 64, 0.13);
  border-color: rgba(240, 168, 64, 0.5);
}

.trade__img {
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  filter: grayscale(1) brightness(0.8);
  opacity: 0.8;
  transition: filter var(--t-ui) var(--ease), opacity var(--t-ui) var(--ease);
}

.trade:hover .trade__img { opacity: 1; filter: grayscale(0.4); }
.trade.is-on .trade__img { filter: none; opacity: 1; }

.trade__name {
  font-size: 0.92rem;
  line-height: 1.2;
  color: var(--stage-text-mute);
  transition: color var(--t-ui) var(--ease);
}

.trade.is-on .trade__name { color: var(--stage-text); font-weight: 500; }

/* Style-Proben */
.moods { display: flex; flex-wrap: wrap; gap: 0.7rem; }

.mood {
  position: relative;
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 50%;
  border: 0;
  padding: 0;
  cursor: pointer;
  box-shadow: 0 0 0 1px var(--hairline);
  transition: transform var(--t-ui) var(--ease), box-shadow var(--t-ui) var(--ease);
}

/* Geschlossene Styles bleiben sichtbar. Man soll sehen, was es noch gibt,
   sonst ist die Stufe daruber kein Angebot, sondern eine Leerstelle. */
.mood.is-locked { opacity: 0.6; }
.mood.is-locked:hover { opacity: 0.85; }

.mood__lock {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
}

.mood__lock::before {
  content: "";
  position: absolute;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 50%;
  background: rgba(9, 13, 26, 0.7);
}

.mood__lock svg { position: relative; width: 0.85rem; height: 0.85rem; }

/* Der eigene Eintrag in der Stilreihe: kein Farbmuster, sondern eine
   Einladung. Die acht Styles sind Startpunkte, keine Schablonen. */
.mood__pick {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
}

.mood__pick::before {
  content: "";
  position: absolute;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: rgba(9, 13, 26, 0.55);
}

.mood__pick svg { position: relative; width: 0.9rem; height: 0.9rem; }

.eigen {
  display: grid;
  gap: 0.75rem;
  margin-top: 0.8rem;
  padding: 0.9rem 1rem 1rem;
  border: 1px solid var(--hairline);
  border-radius: 0.8rem;
  background: rgba(244, 241, 233, 0.04);
}

.eigen__farbe {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.88rem;
  color: var(--stage-text-mute);
}

.eigen__farbe input {
  width: 3.4rem;
  height: 2.1rem;
  padding: 0;
  border: 1px solid var(--hairline-strong);
  border-radius: 0.5rem;
  background: transparent;
  cursor: pointer;
}

.eigen__grund { display: grid; grid-template-columns: 1fr 1fr; gap: 0.45rem; }

.eigen__grund button {
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--hairline);
  border-radius: 0.6rem;
  background: transparent;
  color: var(--stage-text-mute);
  font-family: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  transition: border-color var(--t-ui) var(--ease), background var(--t-ui) var(--ease),
              color var(--t-ui) var(--ease);
}

.eigen__grund button.is-on {
  border-color: var(--marigold);
  background: rgba(240, 168, 64, 0.1);
  color: var(--stage-text);
}

.eigen__note {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--stage-text-dim);
}

/* Was gerade passiert ist, und der Weg zurueck. */
.stilNote {
  display: grid;
  justify-items: start;
  gap: 0.55rem;
  margin-top: 0.75rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid rgba(240, 168, 64, 0.32);
  border-radius: 0.7rem;
  background: rgba(240, 168, 64, 0.07);
}

.stilNote p {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--stage-text-mute);
}

.stilNote button {
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--stage-text);
  font-family: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  transition: background var(--t-ui) var(--ease), border-color var(--t-ui) var(--ease),
              transform var(--t-press) var(--ease);
}

.stilNote button:hover { background: rgba(244, 241, 233, 0.08); border-color: var(--marigold); }
.stilNote button:active { transform: scale(0.97); }

/* In der Uebersicht traegt die Karte den Hinweis statt eines Schlosses. */
.ov__style.is-locked .ov__preview { opacity: 0.62; }
.ov__ab {
  display: inline-block;
  margin-top: 0.3rem;
  padding: 0.12rem 0.5rem;
  border: 1px solid rgba(240, 168, 64, 0.45);
  border-radius: 999px;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--marigold);
}

.mood:active { transform: scale(0.92); }
.mood:hover { box-shadow: 0 0 0 1px var(--hairline-strong); transform: translateY(-2px); }
.mood.is-on { box-shadow: 0 0 0 2px var(--marigold); transform: scale(1.07); }

/* ── Optionen: die gewaehlte faltet sich auf ───────────── */

.sizes, .cares { display: grid; gap: 0.55rem; }

.opt {
  position: relative;
  display: block;
  width: 100%;
  padding: 0.85rem 0.95rem;
  border: 1px solid var(--hairline);
  border-radius: 0.85rem;
  background: rgba(244, 241, 233, 0.025);
  overflow: hidden;
  text-align: left;
  cursor: pointer;
  color: var(--stage-text-mute);
  transition: color var(--t-ui) var(--ease), border-color var(--t-ui) var(--ease),
              background var(--t-ui) var(--ease), box-shadow var(--t-ui) var(--ease),
              transform var(--t-press) var(--ease);
}

.opt:hover {
  color: var(--stage-text);
  border-color: var(--hairline-strong);
  background: rgba(244, 241, 233, 0.06);
  transform: translateY(-1px);
}

.opt:active { transform: translateY(0) scale(0.995); }

.opt.is-on {
  color: var(--stage-text);
  border-color: rgba(240, 168, 64, 0.5);
  background: rgba(240, 168, 64, 0.07);
  box-shadow: 0 16px 34px -24px rgba(0, 0, 0, 0.95);
  transform: none;
}

.opt__head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 0.75rem;
}

.opt__main { display: block; }

.opt::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: var(--tier-col, var(--marigold));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 460ms var(--ease);
}

.opt.is-on::before { transform: scaleX(1); }

.opt__name {
  display: block;
  font-size: 1.08rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.opt.is-on .opt__name {
  font-size: 1.18rem;
  font-weight: 600;
  letter-spacing: -0.018em;
}

.opt__note {
  display: block;
  font-size: 0.88rem;
  color: var(--stage-text-dim);
  margin-top: 0.15rem;
}

.opt__price {
  font-family: var(--font-serif);
  font-size: 1.08rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--stage-text-dim);
  transition: color var(--t-ui) var(--ease);
}

.opt.is-on .opt__price { color: var(--marigold); }

/* Das Aufgehen: Hoehe faehrt weich, der Inhalt kommt gestaffelt nach. */
.opt__more {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 480ms var(--ease);
}

/* Aufgeklappt ist nur die Gruppe, an der gerade gearbeitet wird. */
.is-expanded .opt.is-on .opt__more { grid-template-rows: 1fr; }

.opt__moreIn {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.is-expanded .opt.is-on .opt__moreIn { padding-top: 1rem; }

.opt__lead,
.opt__for,
.opt__list,
.opt__living,
.opt__save {
  opacity: 0;
  transform: translateY(-0.4rem);
  transition: opacity 380ms var(--ease), transform 380ms var(--ease);
}

.is-expanded .opt.is-on .opt__lead,
.is-expanded .opt.is-on .opt__for,
.is-expanded .opt.is-on .opt__list,
.is-expanded .opt.is-on .opt__living,
.is-expanded .opt.is-on .opt__save { opacity: 1; transform: none; }

.is-expanded .opt.is-on .opt__lead   { transition-delay: 90ms; }
.is-expanded .opt.is-on .opt__for    { transition-delay: 150ms; }
.is-expanded .opt.is-on .opt__list   { transition-delay: 210ms; }
.is-expanded .opt.is-on .opt__living { transition-delay: 280ms; }
.is-expanded .opt.is-on .opt__save   { transition-delay: 340ms; }

.opt__lead {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--stage-text);
  text-wrap: pretty;
}

.opt__for {
  margin: 0;
  padding: 0.85rem 0.95rem;
  border-radius: 0.65rem;
  background: rgba(244, 241, 233, 0.06);
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--stage-text-mute);
}

.opt__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.5rem;
}

.opt__list li {
  position: relative;
  padding-left: 1.3rem;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--stage-text-mute);
}

.opt__list li::before {
  content: "";
  position: absolute;
  left: 0.25rem;
  top: 0.62em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--marigold);
  opacity: 0.8;
}

/* Die lebenden Funktionen sind das Verkaufsargument, also sehen sie so aus. */
.opt__living {
  padding: 1rem 1.05rem;
  border-radius: 0.8rem;
  border: 1px solid rgba(240, 168, 64, 0.35);
  background: rgba(240, 168, 64, 0.08);
}

.opt__living h3 {
  margin: 0 0 0.5rem;
  font-family: var(--font-serif);
  font-size: 1.08rem;
  font-weight: 500;
  color: var(--marigold);
}

.opt__living p {
  margin: 0 0 0.75rem;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--stage-text-mute);
}

.opt__chips {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.opt__chips li {
  padding: 0.32rem 0.72rem;
  border-radius: 999px;
  border: 1px solid rgba(240, 168, 64, 0.35);
  font-size: 0.85rem;
  color: var(--stage-text);
}

.opt__aside {
  margin: 0.85rem 0 0 !important;
  font-size: 0.86rem !important;
  color: var(--stage-text-dim) !important;
}

.opt__save {
  margin: 0;
  padding-top: 0.7rem;
  border-top: 1px solid var(--hairline);
  color: var(--marigold);
  font-size: 0.95rem;
  font-weight: 500;
}

/* Platzhalter für die Extras, solange sie nicht definiert sind.
   Bewusst sichtbar und als offen markiert statt mit erfundenen Preisen gefüllt. */
.todo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 0.9rem;
  border-radius: 0.7rem;
  border: 1px dashed var(--hairline-strong);
  font-size: 0.82rem;
  color: var(--stage-text-dim);
}

.todo__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--marigold);
  flex: 0 0 auto;
}

/* ── Schmale Fenster ────────────────────────────────────── */

@media (max-width: 1080px) {
  :root { --panel-w: 22rem; }
  .stage { padding: 1.5rem 1.5rem 1rem; }
}

@media (max-width: 860px) {
  body { overflow-x: clip; overflow-y: auto; padding-bottom: 4.5rem; }

  /* ── Die Buehne bleibt stehen ─────────────────────────────
     Vorher scrollte die Vorschau oben weg und man hat ab „Ihre Angaben"
     blind konfiguriert: Style gewaehlt, nichts gesehen. Jetzt klebt sie
     oben, die Bedienung laeuft darunter durch, und jede Aenderung ist
     sofort sichtbar. Das ist der eigentliche Sinn des Konfigurators. */
  .room { height: auto; grid-template-columns: 1fr; }

  .stage {
    position: sticky;
    top: 0;
    z-index: 20;
    height: 46dvh;
    min-height: 15rem;
    padding: 0.85rem 0.75rem 0.5rem;
    background: var(--ink-deeper);
    border-bottom: 1px solid var(--hairline);
  }

  /* Breite Formate passen sich der Hoehe der Leiste an. */
  .device {
    width: min(100%, calc((46dvh - 5.5rem) * var(--dev-ar, 1.778))) !important;
  }

  /* Hochkant-Formate nicht: ein 9:17,5-Handy in einer 46-Prozent-Leiste
     waere 133 Pixel breit, da bricht jede Ueberschrift. Sie nehmen die
     volle Breite und zeigen ihren oberen Teil, wie ein echtes Display. */
  html[data-device="phone"] .device,
  html[data-device="fold"] .device { width: 100% !important; }

  html[data-device="phone"] .device__screen,
  html[data-device="fold"] .device__screen {
    aspect-ratio: auto;
    height: calc(46dvh - 5.5rem);
    max-height: none;
  }

  /* In der abgeschnittenen Leiste muss oben das Wichtige stehen: Name,
     Bild, Schlagzeile, Knopf. Das hohe 4:4,6-Bild allein war schon
     groesser als die ganze Leiste, man sah nur einen Baum. */
  html[data-device="phone"] .site__img,
  html[data-device="fold"] .site__img { aspect-ratio: 16 / 10; }

  .stage__foot { gap: 0.5rem; padding-top: 0.15rem; }
  .views { padding: 0.15rem; }
  .views__now { min-width: 6.5rem; font-size: 0.78rem; }
  .dots { gap: 0.4rem; }

  /* ── Preis und Knopf in die Daumenzone ────────────────────
     Die Kopfleiste hat 38 Prozent des Bildschirms gefressen: Preis,
     eine zweizeilig umbrechende Versprechenzeile und ein Knopf ueber die
     volle Breite, bevor irgendwas passiert ist. Unten sind beide immer
     erreichbar und der Preis laeuft beim Scrollen mit. */
  .bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4.5rem;
    padding: 0 0.9rem;
    grid-template-columns: auto 1fr auto;
    gap: 0.75rem;
    border-top: 1px solid var(--hairline);
    border-bottom: 0;
    background: rgba(9, 13, 26, 0.92);
  }

  .bar__mark { width: 1.9rem; height: 1.9rem; }
  /* Der Name steht in der Ueberschrift darunter, hier waere er doppelt. */
  .bar__name { display: none; }
  .bar__price { justify-self: start; text-align: left; }
  .price { justify-content: flex-start; }
  /* Die Versprechen stehen ausfuehrlich im Abschluss der Spalte. */
  .price__meta { display: none; }
  .bar .cta { justify-self: end; padding: 0.55rem 0.55rem 0.55rem 1rem; font-size: 0.92rem; }

  .panel { border-left: 0; border-top: 0; }
  .row__top { top: 46dvh; margin-bottom: 1rem; padding-block: 0.7rem 0.65rem; }
  .row { padding-bottom: 1.8rem; }
  .panel__head { padding: 1.5rem 1.25rem 1rem; }
  .panel__scroll { --panel-pad: 1.25rem; overflow: visible; padding: 0 var(--panel-pad) 2rem; }
  .trades { flex-wrap: wrap; }

  /* Die Uebersicht braucht den ganzen Schirm, nicht die halbe Leiste. */
  .stage.shows-detail,
  .stage.shows-ask { position: static; height: auto; }

  /* iOS vergroessert Felder unter 16 Pixeln beim Antippen, dann springt
     die ganze Seite. */
  .own__field input { font-size: 1rem; }

  /* Tastatur offen: die feste Preisleiste lag genau ueber dem Feld,
     in das man gerade tippt. Solange getippt wird, macht sie Platz. */
  body:has(.panel input:focus, .panel textarea:focus) .bar { visibility: hidden; }
}

/* Handy quer oder Tastatur offen: bei so wenig Hoehe blieben unter der
   klebenden Vorschau und der Preisleiste keine 100 Pixel fuer die Bedienung.
   Dann scrollt die Vorschau mit weg. Gleiche Hoehe, also kein Sprung. */
@media (max-width: 860px) and (max-height: 500px) {
  .stage { position: relative; }
  .row__top { top: 0; }
}

/* ── Details statt Vorschau ─────────────────────────────
   Nimmt den Platz der Bühne ein, statt sie zu überlagern:
   ein Wechsel, kein Fenster über einem Fenster. */

.detail {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 2.5rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(1.5rem) scale(0.985);
  transition: opacity var(--t-scene) var(--ease), transform var(--t-scene) var(--ease),
              visibility 0s linear var(--t-scene);
  overflow-y: auto;
  z-index: 5;
}

.stage.shows-detail .detail {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity var(--t-scene) var(--ease), transform var(--t-scene) var(--ease),
              visibility 0s;
}

/* Die Vorschau tritt zurück, statt zu verschwinden. */
.stage.shows-detail .device,
.stage.shows-detail .stage__foot {
  opacity: 0;
  transform: scale(0.97);
  pointer-events: none;
  transition: opacity var(--t-scene) var(--ease), transform var(--t-scene) var(--ease);
}

.device, .stage__foot {
  transition: opacity var(--t-scene) var(--ease), transform var(--t-scene) var(--ease);
}

.detail__inner {
  container-type: inline-size;
  container-name: ov;
  width: min(100%, 68rem);
  margin: auto;
  padding: 2.25rem 2.4rem 2.5rem;
  border-radius: 1.2rem;
  border: 1px solid var(--hairline);
  background: linear-gradient(180deg, rgba(27, 36, 64, 0.72), rgba(9, 13, 26, 0.88));
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.7);
}

.detail__close {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 1.5rem;
  padding: 0.35rem 0.85rem 0.35rem 0.55rem;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: transparent;
  color: var(--stage-text-mute);
  font-size: 0.85rem;
  cursor: pointer;
  transition: color var(--t-ui) var(--ease), border-color var(--t-ui) var(--ease), transform var(--t-press) var(--ease);
}

.detail__close svg { width: 0.85rem; height: 0.85rem; }
.detail__close:hover { color: var(--stage-text); border-color: var(--hairline-strong); }
.detail__close:active { transform: scale(0.96); }

.detail__title {
  margin: 0 0 0.6rem;
  font-family: var(--font-serif);
  font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.3rem);
  font-weight: 500;
  letter-spacing: -0.028em;
  line-height: 1.12;
}

.detail__lead {
  margin: 0 0 2rem;
  font-size: 1.1rem;
  line-height: 1.55;
  color: var(--stage-text-mute);
  max-width: 42ch;
}

/* ── Details-Knopf je Zeile ─────────────────────────────── */

.row__top {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  /* Randlos ueber die volle Spaltenbreite, sonst schimmert der Inhalt
     links und rechts am Kopf vorbei. */
  margin: 0 calc(-1 * var(--panel-pad)) 1.1rem;
  padding: 0.8rem var(--panel-pad) 0.75rem;
  background: rgba(9, 13, 26, 0.86);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--hairline);
}

.row__top .row__label { margin: 0; }

.moreBtn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.6rem 0.3rem 0.75rem;
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--stage-text-mute);
  font-size: 0.82rem;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--t-ui) var(--ease), border-color var(--t-ui) var(--ease),
              background var(--t-ui) var(--ease), transform var(--t-press) var(--ease);
}

.moreBtn svg { width: 0.72rem; height: 0.72rem; }

.moreBtn:hover {
  color: var(--stage-text);
  border-color: var(--marigold);
  background: rgba(240, 168, 64, 0.10);
}

.moreBtn:active { transform: scale(0.95); }

/* ── Übersicht: Kategorien ──────────────────────────────── */

.ov__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 0.75rem;
}

.ov__card {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 0;
  padding: 0;
  border: 1px solid var(--hairline);
  border-radius: 0.9rem;
  background: rgba(244, 241, 233, 0.04);
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  transition: border-color var(--t-ui) var(--ease), background var(--t-ui) var(--ease), transform var(--t-press) var(--ease);
}

.ov__card img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  /* 0.55 Graustufe hat die Fotos schlicht schmutzig gemacht. Ein Hauch
     reicht, damit die gewählte Karte trotzdem hervortritt. */
  filter: grayscale(0.22) brightness(0.92);
  transition: filter var(--t-scene) var(--ease), transform var(--t-scene) var(--ease);
}

.ov__card:hover { background: rgba(244, 241, 233, 0.08); }
.ov__card:hover img { filter: none; transform: scale(1.035); }
.ov__card:active { transform: scale(0.99); }

.ov__card.is-on { border-color: var(--marigold); background: rgba(240, 168, 64, 0.10); }
.ov__card.is-on img { filter: none; }

/* Als Spalte, damit „Beispiel: …" in allen Karten auf einer Höhe sitzt. */
.ov__cardText {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0.75rem 0.85rem 0.85rem;
}
.ov__cardText b { display: block; font-size: 0.98rem; color: var(--stage-text); margin-bottom: 0.2rem; }
.ov__cardText small { display: block; font-size: 0.83rem; line-height: 1.42; color: var(--stage-text-mute); }
.ov__cardText em {
  display: block;
  margin-top: auto;
  padding-top: 0.55rem;
  font-size: 0.75rem;
  font-style: normal;
  color: var(--stage-text-dim);
}

/* ── Übersicht: Styles mit echter Vorschau ──────────────── */

.ov__styles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.75rem;
}

.ov__style {
  display: grid;
  padding: 0.55rem;
  border: 1px solid var(--hairline);
  border-radius: 0.9rem;
  background: rgba(244, 241, 233, 0.04);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--t-ui) var(--ease), background var(--t-ui) var(--ease), transform var(--t-press) var(--ease);
}

.ov__style:hover { background: rgba(244, 241, 233, 0.08); }
.ov__style:active { transform: scale(0.99); }
.ov__style.is-on { border-color: var(--marigold); background: rgba(240, 168, 64, 0.10); }

/* Ein Mini-Abbild der Website in der jeweiligen Farbwelt.
   Vorher nahm das Foto zwei Drittel der Karte ein — und es ist in allen
   sechs Karten dasselbe. Also schrumpft das Bild zum Band, und darunter
   steht das, was den Style wirklich ausmacht. */

.ov__preview {
  display: block;
  border-radius: 0.6rem;
  border: 1px solid;
  overflow: hidden;
  font-size: 0.56rem;
}

.ov__pBar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.7em;
  padding: 0.8em 0.95em;
  border-bottom: 1px solid;
}

.ov__pBar b {
  font-size: 1.35em;
  font-weight: 600;
  letter-spacing: -0.012em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ov__pNav { font-size: 0.95em; white-space: nowrap; flex: none; }

.ov__pImg { display: block; }

.ov__pImg img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 5;
  object-fit: cover;
  display: block;
}

.ov__pBody { display: block; padding: 1em 0.95em 1.1em; }

.ov__pBody > b {
  /* Zwei Zeilen fest: sonst sind die sechs Karten unterschiedlich hoch. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.35em;
  margin-bottom: 0.85em;
  font-size: 1.5em;
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -0.022em;
}

.ov__pLine {
  display: block;
  height: 0.4em;
  border-radius: 999px;
  margin-bottom: 0.5em;
}

.ov__pTiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.55em;
  margin: 1em 0 1.1em;
}

.ov__pTiles em { display: block; aspect-ratio: 4 / 3; }

.ov__pBtn {
  display: inline-block;
  padding: 0.55em 1.2em;
  font-size: 1em;
  font-weight: 500;
}

.ov__styleText { display: block; padding: 0.6rem 0.35rem 0.25rem; }
.ov__styleText b { display: block; font-size: 0.92rem; color: var(--stage-text); margin-bottom: 0.15rem; }
.ov__styleText small { display: block; font-size: 0.79rem; line-height: 1.42; color: var(--stage-text-mute); }

/* ── Rang und Empfehlung ────────────────────────────────
   Ohne Markierung liest man vier gleich aussehende Zeilen und wählt
   die billigste. Die Stufe, die für die meisten passt, sagt das. */

.opt__kicker {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.2rem;
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  color: var(--stage-text-dim);
}

.opt__kicker b {
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: var(--marigold);
  color: var(--ink);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Die Rangfarbe sitzt am Punkt links, nicht als Balken. */
.opt.is-rec .opt__kicker { color: var(--marigold); }

.opt.is-rec { padding-top: 1.05rem; padding-bottom: 1.05rem; }

.opt.is-rec:not(.is-on) {
  border-color: var(--hairline-strong);
  background: rgba(244, 241, 233, 0.065);
}

/* ── Gruppen in der Vergleichstabelle ───────────────────
   Vier Cluster statt neun gleichwertiger Zeilen: man findet wieder,
   wo man ist, statt von Text erschlagen zu werden. */

.ov__group th {
  padding: 1.35rem 0 0.5rem !important;
  border-bottom: 0 !important;
  font-size: 0.76rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--marigold) !important;
}


.ov__kicker {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 0.25rem;
  gap: 0.4rem;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  color: var(--stage-text-dim);
  margin-bottom: 0.15rem;
}

.ov__kicker b { order: -1;
  padding: 0.08rem 0.4rem;
  border-radius: 999px;
  background: var(--marigold);
  color: var(--ink);
  font-size: 0.66rem;
  font-weight: 600;
}


/* Während des Wischens keine Textauswahl, sonst markiert die Maus Inhalte. */
.stage.is-swiping { cursor: grabbing; user-select: none; }
.stage.is-swiping * { pointer-events: none; }

/* Kategorien und Styles ebenfalls grosszuegiger: zwei je Reihe, nicht drei. */
.ov__cards { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0.85rem; }
.ov__styles { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0.85rem; }

.ov__cardText { padding: 0.8rem 0.95rem 0.9rem; }
.ov__cardText b { font-size: 1.05rem; font-family: var(--font-serif); font-weight: 500; }
.ov__cardText small { font-size: 0.86rem; }
.ov__styleText { padding: 0.7rem 0.5rem 0.35rem; }
.ov__styleText b { font-size: 0.98rem; font-family: var(--font-serif); font-weight: 500; }
.ov__styleText small { font-size: 0.83rem; }

@media (max-width: 860px) {
  .ov__cards, .ov__styles { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
}

/* ── Eigener Betriebsname ───────────────────────────────
   Zwei Felder, die sofort in der Vorschau landen. */

.own {
  display: grid;
  grid-template-columns: 1fr 9rem;
  gap: 0.6rem;
  margin-top: 1rem;
}

.own__field { display: block; min-width: 0; }

.own__field span {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.8rem;
  color: var(--stage-text-dim);
}

.own__field input {
  width: 100%;
  padding: 0.65rem 0.85rem;
  /* Feldrand mit mind. 3:1 Kontrast, sonst sieht man nicht, wo man tippen kann. */
  border: 1px solid rgba(244, 241, 233, 0.4);
  border-radius: 0.6rem;
  background: rgba(244, 241, 233, 0.05);
  color: var(--stage-text);
  font-family: inherit;
  font-size: 0.95rem;
  transition: border-color var(--t-ui) var(--ease), background var(--t-ui) var(--ease);
}

.own__field input::placeholder { color: var(--stage-text-dim); }

.own__field input:hover { background: rgba(244, 241, 233, 0.08); }

.own__field input:focus {
  outline: none;
  border-color: var(--marigold);
  box-shadow: 0 0 0 2px rgba(240, 168, 64, 0.45);
  background: rgba(240, 168, 64, 0.08);
}

/* Kurzes Aufleuchten, wenn der eigene Name in der Vorschau ankommt. */
.site__logo.is-fresh,
.site__kicker.is-fresh { animation: freshMark 620ms var(--ease); }

@keyframes freshMark {
  0%   { color: var(--site-accent); }
  100% { color: inherit; }
}

@media (prefers-reduced-motion: reduce) {
  .site__logo.is-fresh,
  .site__kicker.is-fresh { animation: none; }
}

/* ── Beispiel innerhalb der Kategorie ───────────────────── */

.exNav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.7rem;
}

.exNav__btn {
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: transparent;
  color: var(--stage-text-dim);
  font-size: 0.82rem;
  cursor: pointer;
  transition: color var(--t-ui) var(--ease), border-color var(--t-ui) var(--ease),
              background var(--t-ui) var(--ease), transform var(--t-press) var(--ease);
}

.exNav__btn:hover { color: var(--stage-text); background: rgba(244, 241, 233, 0.06); }
.exNav__btn:active { transform: scale(0.96); }

.exNav__btn.is-on {
  color: var(--stage-text);
  border-color: var(--marigold);
  background: rgba(240, 168, 64, 0.12);
}

/* ── Eigene Fotos ─────────────────────────────────────────
   Eigene Bilder schlagen jedes Beispiel, also darf die Einladung dazu
   auch danach aussehen: eine Flaeche zum Ablegen, kein Knopf am Rand. */

.pics { margin-top: 1.1rem; display: grid; gap: 0.6rem; }

.drop {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.8rem;
  width: 100%;
  padding: 0.75rem 0.85rem;
  border: 1px dashed var(--hairline-strong);
  border-radius: 0.85rem;
  background: rgba(244, 241, 233, 0.03);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--t-ui) var(--ease), background var(--t-ui) var(--ease),
              transform var(--t-press) var(--ease);
}

.drop:hover { border-color: var(--marigold); background: rgba(240, 168, 64, 0.07); }
.drop:active { transform: scale(0.99); }

.drop__icon {
  display: grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 0.65rem;
  background: rgba(240, 168, 64, 0.13);
  color: var(--marigold);
  transition: background var(--t-ui) var(--ease);
}

.drop__icon svg { width: 1.2rem; height: 1.2rem; }
.drop:hover .drop__icon { background: rgba(240, 168, 64, 0.2); }

.drop__text b {
  display: block;
  font-size: 0.93rem;
  font-weight: 500;
  color: var(--stage-text);
}

.drop__text small {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.79rem;
  line-height: 1.4;
  color: var(--stage-text-dim);
}

.drop__plus {
  color: var(--stage-text-dim);
  transition: color var(--t-ui) var(--ease), transform 320ms var(--ease);
}

.drop__plus svg { display: block; width: 1rem; height: 1rem; }
.drop:hover .drop__plus { color: var(--marigold); transform: rotate(90deg); }

/* Sind Fotos drin, ist es keine Einladung mehr, sondern ein Zustand. */
.pics.has-own .drop {
  border-style: solid;
  border-color: rgba(240, 168, 64, 0.45);
  background: rgba(240, 168, 64, 0.06);
}

.pics__have {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.pics__thumbs { display: flex; gap: 0.35rem; }

.pics__thumbs img {
  width: 2.3rem;
  height: 2.3rem;
  object-fit: cover;
  border-radius: 0.5rem;
  border: 1px solid var(--hairline-strong);
  animation: thumbIn 420ms var(--ease) both;
}

@keyframes thumbIn {
  from { opacity: 0; transform: scale(0.82) translateY(0.35rem); }
}

.pics__reset {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  padding: 0.35rem 0.6rem;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  color: var(--stage-text-dim);
  font-size: 0.82rem;
  cursor: pointer;
  transition: color var(--t-ui) var(--ease), background var(--t-ui) var(--ease),
              transform var(--t-press) var(--ease);
}

.pics__reset svg { width: 0.78rem; height: 0.78rem; }
.pics__reset:hover { color: var(--stage-text); background: rgba(244, 241, 233, 0.06); }
.pics__reset:active { transform: scale(0.97); }

/* Beim Ziehen zeigt die Bühne, dass sie die Fotos nimmt. */
.stage.is-dropping .device__shell {
  border-color: var(--marigold);
  box-shadow: 0 0 0 2px var(--marigold), 0 30px 60px -20px rgba(0, 0, 0, 0.75);
}

.stage.is-dropping::after {
  content: "Fotos hier ablegen";
  position: absolute;
  left: 50%;
  top: 1.5rem;
  transform: translateX(-50%);
  padding: 0.45rem 1rem;
  border-radius: 999px;
  background: var(--marigold);
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 500;
  z-index: 8;
}

/* ── Gliederung der Spalte ──────────────────────────────
   Die Abschnitte liefen ineinander. Jetzt trägt jeder eine orange
   Marke links am Titel, und die eigenen Angaben stehen in einem
   abgesetzten Kasten statt lose untereinander. */

.row__label {
  position: relative;
  padding-left: 2.1rem;
}

.panel__scroll { counter-reset: schritt; }
.row { counter-increment: schritt; }

.row__label::before {
  content: counter(schritt);
  position: absolute;
  left: 0;
  top: 50%;
  display: grid;
  place-items: center;
  width: 1.45rem;
  height: 1.45rem;
  margin-top: -0.725rem;
  border: 1px solid var(--hairline-strong);
  border-radius: 50%;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  color: var(--stage-text-dim);
  transition: background var(--t-ui) var(--ease), border-color var(--t-ui) var(--ease),
              color var(--t-ui) var(--ease), transform var(--t-ui) var(--ease);
}

/* Erledigt heisst: hier war der Besucher schon. Kein erfundener
   Fortschritt, nur was wirklich angefasst wurde. */
.row.is-active .row__label::before {
  border-color: var(--marigold);
  color: var(--marigold);
}

.row.is-done .row__label::before {
  content: "\2713";
  border-color: var(--marigold);
  background: var(--marigold);
  color: var(--ink);
  font-size: 0.8rem;
  transform: scale(1.04);
}

/* Etwas mehr Abstand zwischen den Abschnitten, damit die Marken wirken. */
.row { padding: 0 0 2.4rem; }
.row + .row { padding-top: 0.6rem; }

.ownBox {
  padding: 1rem 1.1rem 1.1rem;
  border-radius: 0.8rem;
  border: 1px solid var(--hairline);
  background: rgba(244, 241, 233, 0.04);
}

.ownBox .own { margin-top: 0; }
.ownBox .pics { margin-top: 0.9rem; }

/* ── Beweis, Zusage, Mensch ─────────────────────────────── */

.demoLink {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.5rem;
  padding: 0.42rem 0.8rem;
  border: 1px solid rgba(240, 168, 64, 0.4);
  border-radius: 999px;
  background: rgba(240, 168, 64, 0.08);
  color: var(--marigold);
  font-size: 0.85rem;
  text-decoration: none;
  transition: background var(--t-ui) var(--ease), transform var(--t-press) var(--ease);
}

.demoLink svg { width: 0.8rem; height: 0.8rem; }
.demoLink:hover { background: rgba(240, 168, 64, 0.16); }
.demoLink:active { transform: scale(0.97); }

/* Die drei Zusagen, dort wo entschieden wird. */
.promise {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.6rem;
}

.promise li {
  display: grid;
  grid-template-columns: 1.15rem 1fr;
  gap: 0.6rem;
  align-items: start;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--stage-text-mute);
}

.promise svg {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.1rem;
  color: var(--marigold);
}

.promise b { color: var(--stage-text); font-weight: 600; }

.person {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: 0.75rem;
  align-items: center;
  margin-top: 0.4rem;
  padding: 0.85rem 0.95rem;
  border-radius: 0.75rem;
  background: rgba(244, 241, 233, 0.05);
}

.person__mark {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--marigold);
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 600;
}

.person p {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--stage-text-mute);
}

.person b { color: var(--stage-text); }

/* ── Abschluss der Spalte ───────────────────────────────
   Der Weg zum Gespräch steht am Ende, wo man nach dem Durchgehen ankommt.
   Der Teilen-Knopf sitzt jetzt hier statt neben dem Geräteschalter. */

.finish {
  padding: 1.75rem 0 0;
  border-top: 1px solid var(--hairline);
  display: grid;
  justify-items: stretch;
  gap: 1.1rem;
}

.cta--foot {
  justify-self: stretch;
  justify-content: center;
  padding: 0.75rem 0.75rem 0.75rem 1.4rem;
  font-size: 1rem;
}

.finish__note {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--stage-text-dim);
  text-align: center;
}

.finish .shareBtn { justify-self: center; margin-top: 0.35rem; }
.finish .shareLink { width: 100%; margin-top: 0.4rem; }

/* Der Ger\00E4tebereich wird wieder ruhig, ohne Knopf daneben. */
.stage__foot { gap: 0.7rem; }

/* ── Karten nebeneinander ───────────────────────────────
   Nebeneinander, damit man vergleicht statt zu scrollen. Länglich,
   damit jede Karte Luft hat und die Empfehlung heraussticht. */

.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
  align-items: stretch;
}

@container ov (min-width: 25rem) {
  .cards { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
}

@container ov (min-width: 56rem) {
  .cards { grid-template-columns: repeat(4, 1fr); gap: 1rem; }
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  /* Bewusst hochformatig: quadratische Karten wirken gedrungen, eine hohe
     Karte gibt Preis und Argumenten Luft und laesst sich schneller lesen. */
  min-height: 17rem;
  padding: 1.5rem 1.35rem 1.4rem;
  border: 1px solid var(--hairline);
  border-radius: 1rem;
  background: rgba(244, 241, 233, 0.035);
  text-align: left;
  cursor: pointer;
  color: inherit;
  transition: border-color var(--t-ui) var(--ease), background var(--t-ui) var(--ease),
              transform var(--t-ui) var(--ease), box-shadow var(--t-ui) var(--ease);
}

@container ov (min-width: 56rem) {
  .card { padding: 1.9rem 1.5rem 1.6rem; min-height: 20rem; }
}

.card:hover { background: rgba(244, 241, 233, 0.07); transform: translateY(-3px); }
.card:active { transform: translateY(-1px) scale(0.995); }

/* Die Empfehlung steht etwas höher und trägt Farbe. */
.card.is-rec:not(.is-on) {
  border-color: var(--hairline-strong);
  background: rgba(244, 241, 233, 0.07);
}

.card.is-rec:hover { transform: translateY(-3px); }

.card.is-on {
  border-color: var(--marigold);
  background: rgba(240, 168, 64, 0.13);
  box-shadow: 0 0 0 1px var(--marigold), 0 18px 40px -22px rgba(240, 168, 64, 0.55);
}


/* Ein Signal, nicht drei: die Empfehlung ist die Zeile selbst. */
.card__badge {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: var(--marigold);
  color: var(--ink);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.card__kicker {
  display: block;
  min-height: 1.35rem;
  margin-bottom: 0.45rem;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--stage-text-dim);
}

.card.is-rec .card__kicker { color: var(--marigold); }

.card__name {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.28rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-wrap: balance;
  color: var(--stage-text);
}

.card__price {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--font-serif);
  font-size: 1.78rem;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.05;
  white-space: nowrap;
  color: var(--marigold);
}

.card__sub {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.8rem;
  line-height: 1.5;
  text-wrap: pretty;
  color: var(--stage-text-dim);
}

.card__points {
  margin: 1.3rem 0 0;
  padding: 1.1rem 0 0;
  border-top: 1px solid var(--hairline);
  list-style: none;
  display: grid;
  gap: 0.6rem;
}

.card__points { margin-top: auto; }

.card__points li {
  position: relative;
  padding-left: 1rem;
  font-size: 0.86rem;
  line-height: 1.5;
  text-wrap: pretty;
  color: var(--stage-text-mute);
}

.card__points li::before {
  content: "";
  position: absolute;
  left: 0.1rem;
  top: 0.6em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  color: var(--marigold);
}

.card__tick {
  position: absolute;
  top: 1.1rem;
  right: 1.1rem;
  width: 1.55rem;
  height: 1.55rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--marigold);
  color: var(--ink);
  opacity: 0;
  transform: scale(0.7);
  transition: opacity var(--t-ui) var(--ease), transform var(--t-ui) var(--ease);
}

.card__tick svg { width: 0.8rem; height: 0.8rem; }
.card.is-on .card__tick { opacity: 1; transform: none; }

/* ── Vergleich zum Aufklappen ───────────────────────────── */

.cmp__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  margin-top: 1.5rem;
  padding: 0.95rem 1rem;
  border: 1px solid var(--marigold);
  border-radius: 0.8rem;
  background: rgba(240, 168, 64, 0.06);
  color: var(--stage-text);
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--t-ui) var(--ease), transform var(--t-press) var(--ease);
}

.cmp__toggle svg { width: 0.9rem; height: 0.9rem; transition: transform var(--t-ui) var(--ease); }
.cmp__toggle:hover { background: rgba(240, 168, 64, 0.13); }
.cmp__toggle:active { transform: scale(0.995); }
.cmp__wrap.is-open + .cmp__toggle svg,
.cmp__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.cmp__wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 520ms var(--ease);
}

.cmp__wrap.is-open { grid-template-rows: 1fr; }
.cmp__wrapIn { overflow: hidden; }
.cmp__wrap.is-open .cmp__wrapIn { padding-top: 1.25rem; }

.cmp {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.cmp th,
.cmp td {
  padding: 0.75rem 0.9rem;
  text-align: center;
  vertical-align: middle;
  border-bottom: 1px solid var(--hairline);
}

.cmp thead th {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--stage-text);
  border-bottom: 1px solid var(--hairline-strong);
  background: rgba(244, 241, 233, 0.04);
}

.cmp thead th:first-child { background: none; }
.cmp thead th.is-on { color: var(--marigold); }

.cmp tbody th {
  text-align: left;
  font-weight: 400;
  font-size: 0.88rem;
  color: var(--stage-text-dim);
  width: 17rem;
}

.cmp tbody td { color: var(--stage-text-mute); }
.cmp tbody td.is-on { color: var(--stage-text); background: rgba(240, 168, 64, 0.06); }

.cmp__price { font-family: var(--font-serif); font-size: 1.05rem; color: var(--marigold); font-weight: 500; }
.cmp__no { color: var(--stage-text-dim); opacity: 0.55; }
.cmp__yes { color: var(--marigold); font-size: 1.05rem; }

.cmp__always {
  margin: 1.1rem 0 0;
  padding: 0.9rem 1.1rem;
  border-radius: 0.7rem;
  background: rgba(244, 241, 233, 0.05);
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--stage-text-mute);
}

.cmp__always b { color: var(--stage-text); }

@media (max-width: 1200px) {
  .cards { grid-template-columns: repeat(2, 1fr); gap: 1.25rem 1rem; }
  .card.is-rec, .card.is-rec:hover, .card.is-rec.is-on { transform: none; }
  .cmp tbody th { width: 11rem; }
  .cmp { font-size: 0.85rem; }
  .cmp th, .cmp td { padding: 0.6rem 0.5rem; }
}

@media (max-width: 860px) {
  .cards { grid-template-columns: 1fr; }
  .cmp__wrapIn { overflow-x: auto; }
  .cmp { min-width: 38rem; }
}

@media (max-width: 860px) {
  /* Geschlossen darf sie keinen Platz kosten, sonst klafft eine Luecke. */
  .detail { display: none; position: relative; padding: 0; }
  .stage.shows-detail .detail { display: grid; }
  .detail__inner { padding: 1.5rem 1.25rem 1.75rem; }
  .detail__grid { grid-template-columns: 1fr; }
  .stage.shows-detail .device,
  .stage.shows-detail .stage__foot { display: none; }
}

/* ── Merken und teilen ──────────────────────────────────── */

.shareBtn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.85rem 0.35rem 0.7rem;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: transparent;
  color: var(--stage-text-dim);
  font-size: 0.82rem;
  cursor: pointer;
  transition: color var(--t-ui) var(--ease), border-color var(--t-ui) var(--ease),
              background var(--t-ui) var(--ease), transform var(--t-press) var(--ease);
}

.shareBtn svg { width: 0.9rem; height: 0.9rem; flex: none; }
.shareBtn:hover { color: var(--stage-text); border-color: var(--hairline-strong); background: rgba(244, 241, 233, 0.06); }
.shareBtn:active { transform: scale(0.96); }

.shareBtn.is-done {
  color: var(--marigold);
  border-color: rgba(240, 168, 64, 0.45);
  background: rgba(240, 168, 64, 0.10);
}

/* Unsichtbares Hilfsfeld fuer den Kopierversuch. */
.shareFallback {
  position: fixed;
  left: -9999px;
  opacity: 0;
}

/* Sichtbar nur, wenn die Zwischenablage gesperrt ist. */
.shareLink {
  flex: 1 1 22rem;
  max-width: 30rem;
  padding: 0.35rem 0.7rem;
  border: 1px solid rgba(240, 168, 64, 0.45);
  border-radius: 999px;
  background: rgba(240, 168, 64, 0.08);
  color: var(--stage-text);
  font-family: inherit;
  font-size: 0.8rem;
  text-overflow: ellipsis;
}

.shareLink:focus { outline: none; border-color: var(--marigold); }

/* ── Abschluss ──────────────────────────────────────────── */

.ask {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(1.5rem) scale(0.985);
  transition: opacity var(--t-scene) var(--ease), transform var(--t-scene) var(--ease),
              visibility 0s linear var(--t-scene);
  overflow-y: auto;
  z-index: 6;
}

.stage.shows-ask .ask {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity var(--t-scene) var(--ease), transform var(--t-scene) var(--ease), visibility 0s;
}

.stage.shows-ask .device,
.stage.shows-ask .stage__foot {
  opacity: 0;
  transform: scale(0.97);
  pointer-events: none;
}

.ask__inner {
  width: min(100%, 64rem);
  margin: auto;
  padding: 2.25rem 2.4rem 2.5rem;
  border-radius: 1.2rem;
  border: 1px solid var(--hairline);
  background: linear-gradient(180deg, rgba(27, 36, 64, 0.78), rgba(9, 13, 26, 0.92));
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.7);
}

.ask__grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 2.5rem;
  margin-top: 1.75rem;
}

.ask__h3 {
  margin: 0 0 1rem;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stage-text-dim);
}

.ask__h3--gap { margin-top: 1.6rem; }

.ask__sum { margin: 0; display: grid; gap: 0.75rem; }

.ask__sum div {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: 0.75rem;
  align-items: baseline;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--hairline);
}

.ask__sum dt { font-size: 0.86rem; color: var(--stage-text-dim); }
.ask__sum dd { margin: 0; font-size: 0.98rem; color: var(--stage-text); }

.ask__total { margin: 1.35rem 0 0; }

.ask__total span {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(2rem, 1.5rem + 1.6vw, 2.8rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--marigold);
}

.ask__total small {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--stage-text-mute);
}

.ask__fields { display: grid; gap: 0.75rem; }

.ask__slots {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.55rem;
}

.ask__slot {
  display: grid;
  gap: 0.1rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--hairline-strong);
  border-radius: 0.65rem;
  background: rgba(244, 241, 233, 0.04);
  color: var(--stage-text-mute);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--t-ui) var(--ease), background var(--t-ui) var(--ease), transform var(--t-press) var(--ease);
}

.ask__slot b { font-size: 0.95rem; font-weight: 500; color: var(--stage-text); }
.ask__slot small { font-size: 0.8rem; color: var(--stage-text-dim); }
.ask__slot:hover { background: rgba(244, 241, 233, 0.08); }
.ask__slot:active { transform: scale(0.98); }
.ask__slot.is-on { border-color: var(--marigold); background: rgba(240, 168, 64, 0.12); }

.ask__send {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  margin-top: 1.5rem;
  padding: 0.7rem 0.7rem 0.7rem 1.3rem;
  border: 0;
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-size: 1.02rem;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--t-ui) var(--ease), transform var(--t-press) var(--ease);
}

.ask__send:hover { background: #fff; }
.ask__send:active { transform: scale(0.99); }

.ask__note {
  margin: 0.9rem 0 0;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--stage-text-dim);
}

.ask__done { max-width: 44ch; margin: 2.5rem auto 1.5rem; text-align: center; }

.ask__doneMark {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin: 0 auto 1.2rem;
  border-radius: 50%;
  background: var(--marigold);
  color: var(--ink);
  animation: doneIn 520ms var(--ease);
}

.ask__doneMark svg { width: 1.4rem; height: 1.4rem; }

@keyframes doneIn {
  0%   { transform: scale(0.4); opacity: 0; }
  100% { transform: none; opacity: 1; }
}

.ask__done h3 {
  margin: 0 0 0.75rem;
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: -0.025em;
}

.ask__done p {
  margin: 0 0 0.75rem;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--stage-text-mute);
}

.ask__hint { font-size: 0.84rem !important; color: var(--stage-text-dim) !important; }

@media (max-width: 1000px) {
  .ask__grid { grid-template-columns: 1fr; gap: 1.75rem; }
}

@media (max-width: 860px) {
  .ask { display: none; position: relative; padding: 0; }
  .stage.shows-ask .ask { display: grid; }
  .ask__inner { padding: 1.5rem 1.25rem 1.75rem; }
  .stage.shows-ask .device,
  .stage.shows-ask .stage__foot { display: none; }
}

/* ── Weniger Bewegung ───────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 120ms !important;
    animation-duration: 120ms !important;
  }
  /* Die 120 ms oben gelten fuer „all", also auch fuer die geerbte
     Sichtbarkeit: die Uebersicht war im ersten Moment noch unsichtbar, und
     der Fokus blieb beim Oeffnen auf dem Details-Knopf haengen. */
  .stage.shows-detail .detail,
  .stage.shows-detail .detail *,
  .stage.shows-ask .ask,
  .stage.shows-ask .ask * { transition: none !important; }
  .site.is-swapping .site__bar,
  .site.is-swapping .site__hero,
  .site.is-swapping .site__flow { filter: none; transform: none; }
  .site__block { transform: none; }
}


/* ── Auftritt der Uebersicht ─────────────────────────────────
   Die Karten kommen gestaffelt herein, aber nur beim Oeffnen. Bei jeder
   Auswahl neu zu staffeln waere Zappeln, denn die Liste baut sich bei
   jedem Klick neu auf. */

.detail.is-entering .ov__card,
.detail.is-entering .ov__style,
.detail.is-entering .card {
  animation: ovIn 620ms var(--ease) both;
}

.detail.is-entering .ov__card:nth-child(1),
.detail.is-entering .ov__style:nth-child(1),
.detail.is-entering .card:nth-child(1) { animation-delay: 60ms; }

.detail.is-entering .ov__card:nth-child(2),
.detail.is-entering .ov__style:nth-child(2),
.detail.is-entering .card:nth-child(2) { animation-delay: 115ms; }

.detail.is-entering .ov__card:nth-child(3),
.detail.is-entering .ov__style:nth-child(3),
.detail.is-entering .card:nth-child(3) { animation-delay: 170ms; }

.detail.is-entering .ov__card:nth-child(4),
.detail.is-entering .ov__style:nth-child(4),
.detail.is-entering .card:nth-child(4) { animation-delay: 225ms; }

.detail.is-entering .ov__card:nth-child(5),
.detail.is-entering .ov__style:nth-child(5) { animation-delay: 280ms; }

.detail.is-entering .ov__card:nth-child(6),
.detail.is-entering .ov__style:nth-child(6) { animation-delay: 335ms; }

@keyframes ovIn {
  from { opacity: 0; transform: translateY(0.85rem); }
}

@media (prefers-reduced-motion: reduce) {
  .detail.is-entering .ov__card,
  .detail.is-entering .ov__style,
  .detail.is-entering .card { animation: none; }
}


/* ── Der Abschluss: einpacken und wegschicken ─────────────────
   Die Seite auf Briefmarkengroesse zu schrumpfen, damit sie ganz
   hineinpasst, war falsch: man sah nichts mehr. Jetzt steht sie gross
   und leicht gekippt da und fliegt an einem vorbei, danach gleitet sie
   in den Umschlag. */

body.sendet .panel { transform: translateX(6%); opacity: 0; pointer-events: none; }
body.sendet .bar { opacity: 0.2; pointer-events: none; }
.panel { transition: transform 620ms var(--ease), opacity 480ms var(--ease); }
.bar { transition: opacity 480ms var(--ease); }

.brief {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  grid-template-rows: 1fr auto;
  background: radial-gradient(120% 80% at 50% 0%, rgba(27, 36, 64, 0.96), rgba(6, 9, 18, 0.99));
  backdrop-filter: blur(10px) saturate(130%);
}

.brief__buehne {
  position: relative;
  overflow: hidden;
  perspective: 1600px;
  perspective-origin: 50% 26%;
}

/* Der Halter traegt Lage, Flug und das Einstecken. Das Blatt darin ist
   nur noch Inhalt. Beim Einpacken zieht sich der Halter auf die Groesse
   der Umschlagoeffnung zusammen: die Seite wird schmaler und kuerzer,
   wie zusammengelegtes Papier, und schiebt sich dann hinein. Vorher ist
   sie einfach ausgeblendet, was nach Trick aussah und nicht nach Brief. */

.brief__halter {
  position: absolute;
  z-index: 1;
  top: 2.5rem;
  left: 50%;
  width: var(--bw, 40rem);
  margin-left: calc(var(--bw, 40rem) / -2);
  transform-origin: 50% 0;
  transform: rotateX(8deg) rotateZ(-1.2deg) translateY(2.5rem) scale(0.97);
  opacity: 0;
  border-radius: 0.7rem;
  overflow: hidden;
  clip-path: inset(0 0 0 0);
  box-shadow: 0 60px 120px -30px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.06);
  transition: opacity 520ms var(--ease), transform 900ms var(--ease);
}

.brief__blatt { display: block; background: var(--site-bg, #fff); }

.brief.zeigt .brief__halter {
  opacity: 1;
  transform: rotateX(8deg) rotateZ(-1.2deg) translateY(0) scale(1);
}

/* Der Flug ueber die ganze Seite. */
.brief.durch .brief__halter {
  transform: rotateX(8deg) rotateZ(-1.2deg) translateY(calc(var(--flug, 0) * -1px)) scale(1);
  transition: transform var(--flugzeit, 1600ms) cubic-bezier(0.42, 0, 0.58, 1);
}

/* Und hinein: flach legen, auf Umschlagbreite schrumpfen, auf
   Umschlaghoehe zusammenziehen, in die Oeffnung schieben. Alle Werte
   kommen gerechnet aus JS, damit es bei jeder Fenstergroesse sitzt. */
.brief.packt .brief__halter {
  transform: rotateX(0deg) rotateZ(0deg)
             translateY(calc(var(--zielY, 0) * 1px)) scale(var(--k2, 0.3));
  clip-path: inset(0 0 var(--clip, 0%) 0);
  box-shadow: 0 10px 20px -8px rgba(0, 0, 0, 0.6);
  transition: transform 1000ms var(--ease), clip-path 1000ms var(--ease),
              box-shadow 600ms var(--ease);
}

/* Ein Umschlag aus fünf Flächen statt eines Rechtecks: Korpus, zwei
   Seitenklappen, die untere Klappe und die obere, die zufällt. Darauf
   das Siegel. Das Blatt liegt dazwischen, deshalb die Reihenfolge in der
   Tiefe: Korpus 1, Blatt 2, Klappen 3, obere Klappe 4, Siegel 5. */

.brief__umschlag {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 3.5rem;
  /* 60dvh: im Querformat war der Umschlag hoeher als die Buehne, die
     offene Klappe wurde oben abgeschnitten. */
  width: min(23rem, 66vw, 60dvh);
  aspect-ratio: 3 / 2;
  margin-left: calc(min(23rem, 66vw, 60dvh) / -2);
  transform: translateY(150%);
  opacity: 0;
  filter: drop-shadow(0 26px 40px rgba(0, 0, 0, 0.55));
  transition: transform 760ms var(--ease), opacity 380ms var(--ease);
}

.brief.packt .brief__umschlag { transform: translateY(0); opacity: 1; }

.brief__papier,
.brief__seiteL,
.brief__seiteR,
.brief__unten,
.brief__klappe {
  position: absolute;
  inset: 0;
}

/* Korpus. Liegt hinter dem Blatt. */
.brief__papier {
  z-index: 1;
  border-radius: 0.4rem;
  background:
    linear-gradient(180deg, #faf7f0 0%, #ece5d6 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* Die beiden Seitenklappen geben dem Umschlag seine Tiefe. */
.brief__seiteL,
.brief__seiteR,
.brief__unten { z-index: 3; }

.brief__seiteL {
  clip-path: polygon(0 0, 50% 50%, 0 100%);
  background: linear-gradient(90deg, #efe8d9, #e3dac8);
  border-radius: 0.4rem 0 0 0.4rem;
}

.brief__seiteR {
  clip-path: polygon(100% 0, 100% 100%, 50% 50%);
  background: linear-gradient(270deg, #efe8d9, #e3dac8);
  border-radius: 0 0.4rem 0.4rem 0;
}

.brief__unten {
  clip-path: polygon(0 100%, 50% 48%, 100% 100%);
  background: linear-gradient(0deg, #f4eee1, #e6ddcb);
  border-radius: 0 0 0.4rem 0.4rem;
}

/* Die obere Klappe steht offen und fällt zu. */
.brief__klappe {
  z-index: 4;
  bottom: auto;
  height: 54%;
  transform-origin: top center;
  transform: rotateX(178deg);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: linear-gradient(180deg, #f7f2e7, #e8e0ce);
  border-radius: 0.4rem 0.4rem 0 0;
  box-shadow: 0 6px 14px -6px rgba(0, 0, 0, 0.35);
  transition: transform 620ms var(--ease) 860ms;
}

.brief.packt .brief__klappe { transform: rotateX(0deg); }

/* Das Siegel kommt zuletzt und drückt sich kurz auf. */
.brief__siegel {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 50%;
  width: 3.4rem;
  height: 3.4rem;
  margin: -1.7rem 0 0 -1.7rem;
  object-fit: contain;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.4));
  opacity: 0;
  transform: scale(2.1) rotate(-14deg);
  transition: opacity 180ms var(--ease) 1440ms,
              transform 420ms cubic-bezier(0.3, 1.5, 0.5, 1) 1440ms;
}

.brief.packt .brief__siegel { opacity: 1; transform: scale(1) rotate(-6deg); }

.brief.fliegt .brief__umschlag {
  transform: translate(66vw, -42vh) rotate(17deg) scale(0.58);
  opacity: 0;
  transition: transform 760ms cubic-bezier(0.45, 0, 0.9, 0.35), opacity 600ms var(--ease) 240ms;
}

/* Die Seite liegt im Umschlag. Fliegt der weg, darf sie nicht darunter
   wieder auftauchen. Sie verschwindet in demselben Moment, verdeckt vom
   Umschlag, also sieht man den Schnitt nicht. */
.brief.fliegt .brief__halter {
  opacity: 0;
  transition: none;
}

.brief__text {
  margin: 0;
  padding: 1.4rem 1.5rem 2.4rem;
  text-align: center;
  font-family: var(--font-serif);
  font-size: 1.2rem;
  letter-spacing: -0.015em;
  color: var(--stage-text);
  transition: opacity 300ms var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  .brief__blatt, .brief__umschlag, .brief__klappe { transition: none; }
}

/* ── Die Rueckfrage ohne Betreuung ──────────────────────────── */

.nachfrage {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: rgba(9, 13, 26, 0.82);
  backdrop-filter: blur(8px);
  /* Auf kleinen Handys ist die Box hoeher als der Schirm: dann scrollen,
     statt den zweiten Knopf unten abzuschneiden. */
  overflow-y: auto;
  overscroll-behavior: contain;
}

.nachfrage__box {
  margin: auto;
  width: min(100%, 30rem);
  padding: 1.9rem 1.9rem 1.7rem;
  border: 1px solid var(--hairline);
  border-radius: 1.1rem;
  background: linear-gradient(180deg, rgba(27, 36, 64, 0.96), rgba(9, 13, 26, 0.98));
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.8);
  animation: nfRein 380ms var(--ease);
}

@keyframes nfRein { from { opacity: 0; transform: translateY(1rem) scale(0.98); } }

.nachfrage__titel {
  margin: 0 0 0.7rem;
  font-family: var(--font-serif);
  font-size: 1.45rem;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--stage-text);
}

.nachfrage p {
  margin: 0 0 1.4rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--stage-text-mute);
}

.nachfrage__knoepfe { display: grid; gap: 0.6rem; }

.nachfrage__knoepfe button {
  padding: 0.75rem 1.1rem;
  border-radius: 0.75rem;
  font-family: inherit;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background var(--t-ui) var(--ease), transform var(--t-press) var(--ease);
}

.nachfrage__care {
  border: 0;
  background: var(--marigold);
  color: var(--ink);
  font-weight: 500;
}

.nachfrage__care:hover { background: #f5b862; }

.nachfrage__ja {
  border: 1px solid var(--hairline-strong);
  background: transparent;
  color: var(--stage-text-mute);
}

.nachfrage__ja:hover { background: rgba(244, 241, 233, 0.07); color: var(--stage-text); }
.nachfrage__knoepfe button:active { transform: scale(0.985); }


/* ── Selbst aendern ─────────────────────────────────────────── */

[data-live] { position: relative; }

.site__stift {
  position: absolute;
  top: 0.5em;
  right: 0.5em;
  display: grid;
  place-items: center;
  width: 1.9em;
  height: 1.9em;
  padding: 0;
  border: 1px solid var(--site-line, rgba(27, 36, 64, 0.14));
  border-radius: 50%;
  background: var(--site-band, transparent);
  color: var(--site-mute, rgba(27, 36, 64, 0.6));
  cursor: pointer;
  /* Vorher nur beim Ueberfahren sichtbar. Auf dem Handy gibt es kein
     Ueberfahren, dort war er damit unsichtbar. Jetzt ist er immer da,
     nur leise. */
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease, color 220ms ease;
}

.site__stift svg { width: 0.9em; height: 0.9em; }

/* Der Stift meldet sich erst, wenn man in der Naehe ist. Er soll ein
   Angebot sein, kein Ausrufezeichen. */
/* Nur gewaehlte Funktionen zeigen ihren Stift. Ein Stift an einem Feld,
   das man nicht aendern kann, ergibt keinen Sinn. */
[data-live].is-living .site__stift { opacity: 0.75; pointer-events: auto; }
[data-live].is-living:hover .site__stift,
[data-live].is-living .site__stift:focus-visible { opacity: 1; }

[data-live].is-living .site__stift { color: var(--site-accent, #c06028); }

/* Der Stift liegt oben rechts im Feld. Damit der Text nicht darunter
   durchlaeuft, haelt der Text dort Abstand. Und wo ein Stift steht,
   braucht es den Punkt nicht zusaetzlich: zwei Markierungen am selben
   Feld wirkten wie ein Fehler. */
[data-live].is-living > :is([data-text], h2, h3, h4) { padding-right: 2.3em; }
[data-live].is-living:has(> .site__stift)::after { display: none; }
.site__stift:hover { border-color: var(--site-accent, #c06028); }

[data-text][contenteditable] {
  outline: 2px solid var(--site-accent, #c06028);
  outline-offset: 0.25em;
  border-radius: 0.2em;
}

.site__stiftNote {
  margin: 0.55em 0 0;
  font-size: 0.82em;
  line-height: 1.45;
  color: var(--site-mute, rgba(27, 36, 64, 0.6));
  opacity: 0;
  transform: translateY(-0.3em);
  transition: opacity 320ms ease, transform 320ms ease;
}

.site__stiftNote.is-da { opacity: 1; transform: none; }


/* ── Reiner Vorschaumodus ────────────────────────────────────
   Die Seite steckt im Rahmen der Erstgespraech-Seite. Dort soll man
   sehen, was man gebaut hat, und sonst nichts. */

html[data-vorschau="ja"] .bar,
html[data-vorschau="ja"] .panel,
html[data-vorschau="ja"] .grain { display: none; }

html[data-vorschau="ja"] .room { grid-template-columns: 1fr; height: 100dvh; }
html[data-vorschau="ja"] .stage { padding: 1.25rem 1.25rem 0.75rem; }
html[data-vorschau="ja"] .device { width: min(100%, calc((100dvh - 7rem) * var(--dev-ar, 1.778))) !important; }
html[data-vorschau="ja"] .device__screen { max-height: calc(100dvh - 7rem); }

/* Im schmalen Rahmen (Handy) galten sonst die Regeln der klebenden
   Halbleiste: die Vorschau fuellte nur die obere Haelfte, darunter war leer. */
@media (max-width: 860px) {
  html[data-vorschau="ja"] body { padding-bottom: 0; }
  html[data-vorschau="ja"] .stage { position: relative; height: 100dvh; }
  html[data-vorschau="ja"][data-device="phone"] .device__screen,
  html[data-vorschau="ja"][data-device="fold"] .device__screen { height: calc(100dvh - 7rem); }
}


/* ── Lebende Funktionen auswaehlen ────────────────────────────
   Ein eigener Schritt, der erst auftaucht, wenn es etwas zu waehlen
   gibt. Der Begriff wird hier einmal dauerhaft erklaert statt in einer
   Box, die man beim Drueberfahren erst finden muss. */

.funk__zaehler {
  flex: none;
  padding: 0.25rem 0.7rem;
  border: 1px solid rgba(240, 168, 64, 0.4);
  border-radius: 999px;
  background: rgba(240, 168, 64, 0.1);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  color: var(--marigold);
}

.funk__erklaer {
  margin: -0.35rem 0 0.9rem;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--stage-text-mute);
}

.funk { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.funk__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.9rem 0.5rem 0.6rem;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: rgba(244, 241, 233, 0.03);
  color: var(--stage-text-mute);
  font-family: inherit;
  font-size: 0.87rem;
  cursor: pointer;
  transition: border-color var(--t-ui) var(--ease), background var(--t-ui) var(--ease),
              color var(--t-ui) var(--ease), transform var(--t-press) var(--ease);
}

.funk__haken {
  display: grid;
  place-items: center;
  width: 1.15rem;
  height: 1.15rem;
  flex: none;
  border: 1px solid var(--hairline-strong);
  border-radius: 50%;
  color: transparent;
  transition: background var(--t-ui) var(--ease), border-color var(--t-ui) var(--ease),
              color var(--t-ui) var(--ease);
}

.funk__haken svg { width: 0.7rem; height: 0.7rem; }

.funk__chip:hover { color: var(--stage-text); border-color: var(--hairline-strong); }
.funk__chip:active { transform: scale(0.97); }

.funk__chip.is-on {
  border-color: rgba(240, 168, 64, 0.55);
  background: rgba(240, 168, 64, 0.1);
  color: var(--stage-text);
}

.funk__chip.is-on .funk__haken {
  background: var(--marigold);
  border-color: var(--marigold);
  color: var(--ink);
}

/* Voll heisst nicht kaputt: man sieht, dass noch etwas da waere, und
   muss erst etwas abwaehlen. */
.funk__chip.is-zu { opacity: 0.45; }
.funk__chip.is-zu:hover { opacity: 0.7; }
.funk__chip[disabled] { cursor: default; opacity: 1; }


.funk__hier {
  margin: 0.85rem 0 0;
  font-size: 0.83rem;
  line-height: 1.5;
  color: var(--stage-text-dim);
}


/* ── Tippziele ────────────────────────────────────────────────
   Auf dem Handy gemessen: die Geraetepunkte waren 8 x 8 Pixel. Das trifft
   niemand mit dem Daumen. Die Punkte bleiben so klein, wie sie aussehen,
   bekommen aber eine unsichtbare Flaeche darum. */

.devDot { position: relative; }

.devDot::after {
  content: "";
  position: absolute;
  inset: -0.75rem;
}

@media (max-width: 860px) {
  /* 32 Pixel hohe Knoepfe sind am Daumen knapp. */
  .moreBtn { padding: 0.5rem 0.7rem 0.5rem 0.85rem; }
  .exNav__btn { padding: 0.5rem 0.9rem; }
  .funk__chip { padding: 0.6rem 1rem 0.6rem 0.7rem; }
  .dots { gap: 0.75rem; }
}


/* ── Zwei Funde vom Handy-Durchgang ───────────────────────────

   1. Die Schlagzeile stand mit 44 Pixeln ueber dem Betriebsnamen.
      Die Stufen-Typografie (Premium, Ultra) ist spezifischer als die
      Anpassung fuer schmale Geraete und hat sie ueberstimmt. Auf einem
      Handy-Bildschirm gilt die Breite, nicht die Stufe.
   2. In der unteren Leiste brachen Preis und Knopf in zwei Zeilen. */

html[data-narrow="yes"] .site[data-stufe="business"] .site__claim,
html[data-narrow="yes"] .site[data-stufe="premium"] .site__claim,
html[data-narrow="yes"] .site[data-stufe="ultra"] .site__claim { font-size: 1.9em; }

html[data-narrow="yes"] .site[data-stufe="premium"] .site__say,
html[data-narrow="yes"] .site[data-stufe="ultra"] .site__say { font-size: 1.35em; max-width: none; }

html[data-narrow="yes"] .site[data-stufe="premium"] .site__quote p,
html[data-narrow="yes"] .site[data-stufe="ultra"] .site__quote p { font-size: 1.3em; }

.cta__kurz { display: none; }

@media (max-width: 860px) {
  .bar .price { white-space: nowrap; font-size: 1.3rem; }
  .price__care { font-size: 0.72rem; white-space: nowrap; }
  .bar .cta { padding: 0.55rem 1rem; font-size: 0.9rem; }
  .bar .cta .cta__pip { display: none; }
  .bar .cta .cta__lang { display: none; }
  .bar .cta .cta__kurz { display: inline; }
}

/* ── Audit 23.09.: Uebersicht und Abschluss am Handy ──────────
   .detail__inner hat container-type: inline-size und damit keine eigene
   Breite. Im zentrierenden Raster der Buehne schrumpfte die Uebersicht
   deshalb auf 42 Pixel. Unter 860 Pixeln nimmt sie die volle Breite. */
@media (max-width: 860px) {
  .stage.shows-detail .detail,
  .stage.shows-ask .ask { width: 100%; justify-self: stretch; }

  /* Am Tablet ist die Leiste breit: ein „Handy" ueber 800 Pixel war kein
     Handy mehr, die Schrift riesig und die Schlagzeile abgeschnitten. */
  html[data-device="phone"] .device { width: min(100%, 26rem) !important; }
  html[data-device="fold"] .device { width: min(100%, 34rem) !important; }
}

/* Rechtstexte muessen von jeder Seite erreichbar sein. */
.legal { display: flex; justify-content: center; gap: 0.5rem; margin: 1.1rem 0 0; font-size: 0.78rem; color: var(--stage-text-dim); }
.legal a { color: var(--stage-text-dim); text-decoration: none; }
.legal a:hover, .legal a:focus-visible { color: var(--stage-text); text-decoration: underline; }
.nachfrage__fein { font-size: 0.82em; opacity: 0.75; }

/* Nur fuer Screenreader */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── Extras (aus dem Katalog im Portal) ─────────────────────── */
.xtras { display: grid; gap: 0.9rem; }
.xtras__cat {
  margin: 0 0 0.45rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stage-text-dim);
}
.xtras__list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.xtras__preis {
  margin-left: 0.4em;
  font-style: normal;
  font-weight: 600;
  color: var(--marigold);
  white-space: nowrap;
}

/* Auf schmaleren Laptops drueckte die volle Zeile Marke und Knopf zusammen.
   Die Dauer steht ohnehin unten bei den Zusagen. */
@media (max-width: 1360px) { .price__meta .price__meta-lang { display: none; } }


/* Extras: Menge, inklusive, erst ab höherer Betreuung */
.xtras__chip.is-inkl { cursor: default; }
.xtras__chip.is-inkl .xtras__preis { color: var(--stage-text-dim); font-weight: 500; }
.xtras__chip.is-zu[disabled] { opacity: 0.5; cursor: not-allowed; }
.xtras__chip.is-zu .xtras__preis { color: var(--stage-text-dim); font-weight: 500; }
.xtras__n { font-weight: 700; color: var(--stage-text); }
.xtras__menge { display: inline-flex; align-items: center; gap: 0.3rem; }
.xtras__step {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid var(--hairline-strong);
  border-radius: 50%;
  background: rgba(244, 241, 233, 0.04);
  color: var(--stage-text);
  font: inherit;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color var(--t-ui) var(--ease), background var(--t-ui) var(--ease);
}
.xtras__step:hover { border-color: var(--marigold); background: rgba(240, 168, 64, 0.1); }
.xtras__step[disabled] { opacity: 0.4; cursor: default; }

/* Extras als ruhige Preisliste: eine Zeile je Extra, Preis rechtsbündig.
   Als Pillen brachen lange Namen („Online-Terminbuchung: …") unschön um. */
.xtras__list { flex-direction: column; align-items: stretch; gap: 0.4rem; }
.xtras__chip { width: 100%; justify-content: flex-start; text-align: left; border-radius: 0.8rem; padding: 0.55rem 0.8rem 0.55rem 0.6rem; }
.xtras__chip .xtras__preis { margin-left: auto; padding-left: 0.8rem; text-align: right; }
.xtras__menge { display: flex; width: 100%; }
.xtras__menge .xtras__chip { flex: 1; min-width: 0; }