/* Rösternest 3D Configurator — aligned to theme CI (--rn-*) */

/* Force solid header on configurator pages (no dark hero under logo initially) */
/* KORREKTUR 2026-09-17 (Alex: "mobilen Header niedriger"): Hier stand
   'padding-block: var(--rn-space-4)'. Diese Regel ist spezifischer als die des
   Themes und wird spaeter geladen - sie hat also die Kopfhoehe auf den
   Konfigurator-Seiten festgenagelt, egal was das Theme mobil vorgibt. Gesucht
   war hier nur der deckende Hintergrund; die Hoehe bestimmt das Theme. */
/* KORREKTUR 2026-09-17: Hier stand eine eigene Kopfhoehe von 66 px - der Wert
   des zusammengeschrumpften Kopfes, weil boot() 'is-scrolled' von Anfang an
   setzt. Mit dem Theme-Stand vom 17.09. nimmt dessen main.js die Klasse bei
   Scrollposition 0 wieder weg; der Kopf ist oben also 76 px hoch und hat die
   obersten 10 px der Buehne verdeckt. Die Vorgabe entfaellt - der Wert des
   Themes stimmt, und mehr als einen Bildschirm gibt es hier ohnehin nicht zu
   scrollen. */

body.rr-cfg-page .site-header,
body.rr-cfg-page .site-header.is-scrolled {
  background-color: rgba(17, 17, 17, 0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}

.rn-subpage-hero--compact {
  min-height: 280px;
}
.rn-subpage-hero--compact .rn-subpage-hero__content {
  padding-block: calc(var(--rn-header-height) + var(--rn-space-6)) var(--rn-space-8);
}
.rn-subpage-hero__desc {
  margin: var(--rn-space-3) 0 0;
  color: var(--rn-white-70);
  font-size: var(--rn-text-md);
  max-width: 36rem;
}

.rr-cfg-wrap {
  padding-block: var(--rn-space-8) var(--rn-space-16);
}

.rr-cfg {
  color: var(--rn-black);
  font-family: var(--rn-font-primary);
  max-width: 100%;
}

/* .rr-cfg__progress entfernt - siehe Kommentar in views/configurator.php */

.rr-cfg__eyebrow {
  font-family: var(--rn-font-display);
  text-transform: uppercase;
  letter-spacing: var(--rn-eyebrow-track);
  font-size: var(--rn-eyebrow-size);
  font-weight: 700;
  color: var(--rn-accent-dark);
  margin: 0 0 var(--rn-space-2);
}
.rr-cfg__title {
  font-family: var(--rn-font-display);
  font-size: var(--rn-text-2xl);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 0 0 var(--rn-space-3);
  line-height: 1.15;
  color: var(--rn-black);
}

.rr-cfg__layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.95fr) minmax(320px, 1.05fr);
  gap: var(--rn-space-6);
  align-items: start;
}
@media (max-width: 900px) {
  .rr-cfg__layout { grid-template-columns: 1fr; }
  .rr-cfg__viewer-wrap { position: relative; top: auto; }
}

.rr-cfg__viewer-wrap {
  background: #e4c49a;
  border: 1px solid var(--rn-gray-200);
  overflow: hidden;
  position: sticky;
  top: calc(var(--rn-header-height) + var(--rn-space-4));
}
.rr-cfg__viewer {
  width: 100%;
  aspect-ratio: 1 / 1.08;
  min-height: 440px;
  background: #e4c49a;
}
.rr-cfg__viewer canvas { display: block; width: 100% !important; height: 100% !important; }

.rr-cfg__panel {
  background: var(--rn-white);
  border: 1px solid var(--rn-gray-200);
  padding: var(--rn-space-5);
  min-height: 420px;
  display: flex;
  flex-direction: column;
}
.rr-cfg__step { flex: 1; }

.rr-cfg__grid { display: grid; gap: var(--rn-space-4); }
.rr-cfg__grid--packages { grid-template-columns: 1fr; }
@media (min-width: 520px) {
  .rr-cfg__grid--packages { grid-template-columns: repeat(3, 1fr); }
}

.rr-cfg__card {
  border: 1px solid var(--rn-gray-200);
  padding: var(--rn-space-4);
  cursor: pointer;
  transition: border-color var(--rn-duration, 0.2s) ease, background-color var(--rn-duration, 0.2s) ease;
  background: var(--rn-white);
  text-align: left;
  width: 100%;
  font: inherit;
  color: inherit;
}
.rr-cfg__card:hover { border-color: var(--rn-black); }
.rr-cfg__card.is-selected {
  border-color: var(--rn-black);
  background: var(--rn-off-white);
  box-shadow: inset 0 0 0 1px var(--rn-black);
}
.rr-cfg__card img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  margin-bottom: var(--rn-space-3);
  background: var(--rn-gray-100);
}
.rr-cfg__card h3 {
  margin: 0 0 var(--rn-space-2);
  font-family: var(--rn-font-display);
  font-size: var(--rn-text-base);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.rr-cfg__card p {
  margin: 0;
  font-size: var(--rn-text-sm);
  color: var(--rn-gray-600);
  line-height: 1.45;
}
.rr-cfg__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rn-space-2);
  margin-top: var(--rn-space-3);
}
.rr-cfg__chip {
  font-size: var(--rn-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.3rem 0.55rem;
  background: var(--rn-gray-100);
  color: var(--rn-black);
}
.rr-cfg__stars { color: var(--rn-accent-dark); letter-spacing: 0.05em; }

.rr-cfg__coffee {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: var(--rn-space-4);
  align-items: center;
  border: 1px solid var(--rn-gray-200);
  padding: var(--rn-space-3);
  margin-bottom: var(--rn-space-3);
  cursor: pointer;
  width: 100%;
  background: var(--rn-white);
  text-align: left;
  font: inherit;
  color: inherit;
  transition: border-color 0.2s ease;
}
.rr-cfg__coffee:hover,
.rr-cfg__coffee.is-selected {
  border-color: var(--rn-black);
}
.rr-cfg__coffee.is-selected {
  background: var(--rn-off-white);
  box-shadow: inset 0 0 0 1px var(--rn-black);
}
.rr-cfg__coffee img {
  width: 72px; height: 72px; object-fit: cover; background: var(--rn-gray-100);
}
.rr-cfg__coffee h3 {
  margin: 0 0 0.2rem;
  font-family: var(--rn-font-display);
  font-size: var(--rn-text-base);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.rr-cfg__coffee p { margin: 0; font-size: var(--rn-text-sm); color: var(--rn-gray-600); }
.rr-cfg__rating {
  display: flex; gap: var(--rn-space-4); margin-top: var(--rn-space-2);
  font-size: var(--rn-text-xs); color: var(--rn-gray-600);
  align-items: center; flex-wrap: wrap;
  text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600;
}
.rr-cfg__rating-row { display: inline-flex; align-items: center; gap: 0.25rem; }
.rr-cfg__rating-row img { width: 14px; height: 14px; }

.rr-cfg__varbox {
  margin-top: var(--rn-space-4);
  padding: var(--rn-space-4);
  background: var(--rn-off-white);
  border: 1px solid var(--rn-gray-200);
}
@media (max-width: 520px) {
  .rr-cfg__coffee { grid-template-columns: 64px 1fr; }
  .rr-cfg__coffee .rr-cfg__chip { display: none; }
}

.rr-cfg__qty {
  display: flex;
  align-items: center;
  gap: var(--rn-space-2);
}
.rr-cfg__qty input { text-align: center; max-width: 7rem; }
.rr-cfg__qty-btn {
  width: 42px;
  height: 42px;
  border: 1px solid var(--rn-gray-300);
  background: var(--rn-white);
  font-size: 1.2rem;
  cursor: pointer;
  line-height: 1;
}
.rr-cfg__qty-btn:hover { border-color: var(--rn-black); }

.rr-cfg__color {
  display: flex; gap: var(--rn-space-2); flex-wrap: wrap; align-items: center;
}
.rr-cfg__swatch {
  width: 34px; height: 34px; border-radius: 0;
  border: 2px solid var(--rn-white);
  box-shadow: 0 0 0 1px var(--rn-gray-300);
  cursor: pointer;
  padding: 0;
}
.rr-cfg__swatch.is-selected { box-shadow: 0 0 0 2px var(--rn-black); }
.rr-cfg__swatch--custom {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
}
.rr-cfg__swatch--custom input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
}

.rr-cfg__pricebox {
  background: var(--rn-cream);
  border: 1px solid var(--rn-gray-200);
  padding: var(--rn-space-4);
  margin-top: var(--rn-space-2);
  display: grid;
  gap: var(--rn-space-2);
}
.rr-cfg__pricebox strong { font-size: var(--rn-text-xl); font-family: var(--rn-font-display); }
.rr-cfg__total { font-size: var(--rn-text-2xl); font-family: var(--rn-font-display); }
.rr-cfg__note {
  background: var(--rn-off-white);
  border: 1px solid var(--rn-gray-200);
  padding: var(--rn-space-3) var(--rn-space-4);
  font-size: var(--rn-text-sm);
  color: var(--rn-gray-600);
  margin: 0 0 var(--rn-space-4);
}

/* Die Ankreuzzeile "Logo-Farben beibehalten" ist ein <label class="rr-cfg__hint">
   und erbte damit die Formularbeschriftung: GROSSBUCHSTABEN, fett, gesperrt und
   ueber die volle Breite. Auf dem Handy brach sie dadurch auf zwei Zeilen um und
   das Kaestchen stand allein in der Mitte. Es ist ein Hinweis, keine
   Beschriftung - also normal setzen und links buendig. */

.rr-cfg__nav {
  display: flex;
  justify-content: space-between;
  gap: var(--rn-space-3);
  margin-top: var(--rn-space-5);
  padding-top: var(--rn-space-4);
  border-top: 1px solid var(--rn-gray-200);
}
.rr-cfg__nav .rn-btn { margin: 0; }
.rr-cfg__nav #rr-cfg-next { margin-left: auto; }
.rr-cfg__nav .rn-btn:disabled { opacity: 0.35; cursor: not-allowed; }

/* Legacy btn aliases used in JS-rendered steps */
.rr-cfg__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--rn-space-2);
  font-family: var(--rn-font-display);
  min-height: var(--rn-btn-height);
  font-size: var(--rn-btn-size);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--rn-btn-track);
  padding: 0.9em 2.2em;
  border: 2px solid transparent;
  border-radius: var(--rn-radius-control);
  cursor: pointer;
  text-decoration: none;
  line-height: 1;
  background: var(--rn-black);
  color: var(--rn-white);
  border-color: var(--rn-black);
}
.rr-cfg__btn:disabled { opacity: 0.35; cursor: not-allowed; }
.rr-cfg__btn--primary { background: var(--rn-black); color: var(--rn-white); border-color: var(--rn-black); }
.rr-cfg__btn--primary:hover:not(:disabled) { background: transparent; color: var(--rn-black); }
.rr-cfg__btn--ghost {
  background: transparent;
  color: var(--rn-black);
  border-color: var(--rn-black);
}
.rr-cfg__btn--ghost:hover { background: var(--rn-black); color: var(--rn-white); }

/* WEBLABS 2026-09-16: dezente Bedienelemente ueber der Buehne.
   Bewusst im Viewer statt daneben - sie gehoeren zur Ansicht, nicht zum Formular.
   Glasoptik, damit sie auf hellem wie dunklem Hintergrund lesbar bleiben. */
.rr-cfg__stagectl {
  position: absolute;
  left: 14px;
  bottom: 14px;
  display: flex;
  gap: 8px;
  z-index: 3;
}
.rr-cfg__stagebtn {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(20, 16, 12, 0.10);
  border-radius: var(--rn-radius-control);
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
  color: #2a2420;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(20, 16, 12, 0.10);
  transition: background .18s ease, transform .18s ease, opacity .18s ease;
}
.rr-cfg__stagebtn:hover { background: rgba(255, 255, 255, 0.92); transform: translateY(-1px); }
.rr-cfg__stagebtn:focus-visible { outline: 2px solid #2a2420; outline-offset: 2px; }
.rr-cfg__stagebtn svg { width: 19px; height: 19px; fill: currentColor; }
.rr-cfg__stagebtn:not(.is-on) { opacity: .62; }
/* Play/Pause tauschen je nach Zustand */
.rr-cfg__stagebtn .rr-ic-play { display: none; }
.rr-cfg__stagebtn:not(.is-on) .rr-ic-play { display: block; }
.rr-cfg__stagebtn:not(.is-on) .rr-ic-pause { display: none; }
/* Lautsprecher: Wellen nur wenn an, Kreuz nur wenn aus */
#rr-cfg-sound .rr-ic-mute { display: block; }
#rr-cfg-sound.is-on .rr-ic-mute { display: none; }
#rr-cfg-sound .rr-ic-wave,
#rr-cfg-sound .rr-ic-wave2 { display: none; }
#rr-cfg-sound.is-on .rr-ic-wave,
#rr-cfg-sound.is-on .rr-ic-wave2 { display: block; }

/* Dunkelschalter: aus = Mond (bietet dunkel an), an = Sonne (bietet hell an). */
#rr-cfg-dunkel .rr-ic-sonne { display: none; }
#rr-cfg-dunkel.is-on .rr-ic-sonne { display: block; }
#rr-cfg-dunkel.is-on .rr-ic-mond { display: none; }
.rr-cfg__sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
@media (prefers-reduced-motion: reduce) {
  .rr-cfg__stagebtn { transition: none; }
}

/* WEBLABS 2026-09-16: Erklaerlinien im Standardmodus.
   Als SVG-Overlay ueber dem Canvas, nicht im 3D gezeichnet - so bleibt die
   Schrift bei jeder Aufloesung scharf und laesst sich normal typografieren.
   pointer-events: none, damit Drehen und Zoomen nicht blockiert werden. */
.rr-cfg__notes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity .5s ease;
}
.rr-cfg__notes.is-on { opacity: .9; }

/* WEBLABS 2026-09-17: Die Beschriftungen liegen im Bild und muessen sich nach der
   RAUMHELLIGKEIT richten. Sie waren dunkle Schrift mit hellem Rand - im dunklen
   Raum (schwarzer Marmor) war das kaum zu lesen. Statt sie fest umzudrehen,
   liegen beide Faelle als Variablen bereit; die Klasse setzt der Viewer selbst,
   je nachdem wie hell der Raumton gerade ist. Damit bleibt es lesbar, egal
   welchen Wert rrRaum({dunkel}) bekommt. */
.rr-cfg__viewer-wrap {
  --rr-note-ink: rgba(246, 241, 235, .72);
  --rr-note-halo: rgba(18, 14, 12, .58);
  --rr-note-line: rgba(246, 241, 235, .28);
  --rr-note-stark: 246, 241, 235;
}
.rr-cfg__viewer-wrap.is-heller-raum {
  --rr-note-ink: rgba(30, 25, 22, .62);
  --rr-note-halo: rgba(255, 255, 255, .65);
  --rr-note-line: rgba(42, 36, 32, .26);
  --rr-note-stark: 30, 25, 22;
}
.rr-cfg__notes line,
.rr-cfg__notes polyline { stroke: var(--rr-note-line); stroke-width: .9; fill: none; }
.rr-cfg__notes circle { fill: none; stroke: var(--rr-note-line); stroke-width: 1; }
.rr-cfg__notes circle.rr-dot { fill: var(--rr-note-ink); stroke: none; }
.rr-cfg__notes text {
  fill: var(--rr-note-ink);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  paint-order: stroke;
  stroke: var(--rr-note-halo);
  stroke-width: 3px;
  stroke-linejoin: round;
}
@media (prefers-reduced-motion: reduce) {
  .rr-cfg__notes { transition: none; }
}

/* WEBLABS 2026-09-16: Schrittleiste im Kopf, Vor/Zurueck gleich daneben.
   Vorher standen die Buttons unter dem Formular - man musste also erst
   scrollen, um zu sehen, dass es weitergeht. */
.rr-cfg__headnav {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
}
.rr-cfg__steps {
  display: flex;
  flex: 1 1 auto;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 0;
}
.rr-cfg__steps li {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0;
}
/* 2026-09-17 (Alex: "es fehlen Linien dazwischen"): Verbindungsstrecke zwischen
   den Schritten. Sie sitzt als Pseudoelement HINTER der Beschriftung und nimmt
   den restlichen Platz der Zelle ein - dadurch reicht sie immer exakt bis zur
   naechsten Ziffer, egal wie breit das Wort ist. Erledigte Strecken sind
   kraeftiger: die Leiste zeigt damit nicht nur Stationen, sondern Fortschritt. */
.rr-cfg__steps li::after {
  content: "";
  flex: 1 1 auto;
  min-width: 10px;
  height: 1px;
  margin-left: 2px;
  background: rgba(42, 36, 32, .20);
}
.rr-cfg__steps li:last-child::after { display: none; }
.rr-cfg__steps li.is-done::after { background: rgba(42, 36, 32, .45); }
/* Die Beschriftung darf den Platz nicht fuer sich beanspruchen, sonst bleibt
   fuer die Linie nichts uebrig. */
.rr-cfg__steplabel { flex: 0 1 auto; }
.rr-cfg__stepdot {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: var(--rn-radius-pill);
  border: 1px solid rgba(42, 36, 32, .22);
  background: transparent;
  font-size: 13px;
  font-weight: 700;
  color: rgba(42, 36, 32, .55);
  cursor: default;
  padding: 0;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.rr-cfg__steps li.is-done .rr-cfg__stepdot {
  border-color: rgba(42, 36, 32, .45);
  color: rgba(42, 36, 32, .8);
  cursor: pointer;
}
.rr-cfg__steps li.is-now .rr-cfg__stepdot {
  background: #2a2420;
  border-color: #2a2420;
  color: #fff;
}
.rr-cfg__steplabel {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(42, 36, 32, .5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rr-cfg__steps li.is-now .rr-cfg__steplabel { color: #2a2420; }
.rr-cfg__navbtn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid rgba(42, 36, 32, .22);
  border-radius: var(--rn-radius-control);
  background: #fff;
  color: #2a2420;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, opacity .18s ease;
}
.rr-cfg__navbtn svg { width: 15px; height: 15px; }
.rr-cfg__navbtn:hover { border-color: rgba(42, 36, 32, .5); }
.rr-cfg__navbtn--primary { background: #2a2420; border-color: #2a2420; color: #fff; }
.rr-cfg__navbtn--primary:hover { background: #17120f; }
.rr-cfg__navbtn[disabled] { opacity: .38; cursor: not-allowed; }
.rr-cfg__navbtn:focus-visible { outline: 2px solid #2a2420; outline-offset: 2px; }

/* 2026-09-17 gefunden: Das hidden-Attribut wurde von 'display: inline-flex'
   ueberstimmt - der Zurueck-Knopf stand deshalb auch auf Schritt 1 da, wo es
   nichts zurueckzugehen gibt, und tat beim Klick nichts. Gleiches gilt fuer
   Weiter auf den letzten Schritten. */
.rr-cfg__navbtn[hidden] { display: none; }

/* Dezenter Hinweis im Bild statt Textzeile darunter. */
.rr-cfg__stagechip {
  position: absolute;
  right: 14px;
  top: 14px;
  margin: 0;
  padding: 6px 11px;
  z-index: 3;
  border-radius: var(--rn-radius-pill);
  background: rgba(255, 255, 255, .62);
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
  color: rgba(42, 36, 32, .8);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  pointer-events: none;
}

/* Responsiv: ab hier tragen nur noch die Ziffern, die Woerter entfallen. */
@media (max-width: 860px) {
  .rr-cfg__steplabel { display: none; }
  .rr-cfg__steps { flex: 0 1 auto; gap: 5px; }
  /* Ohne Woerter sind die Zellen inhaltsbreit - die Linie bekommt ein festes
     Mass, sonst bliebe sie auf 0 und die Ziffern klebten aneinander. */
  .rr-cfg__steps li { flex: 0 0 auto; }
  .rr-cfg__steps li::after { flex: 0 0 auto; width: 14px; min-width: 0; }
}
@media (max-width: 560px) {
  .rr-cfg__headnav { gap: 8px; flex-wrap: wrap; }
  .rr-cfg__navbtn span { display: none; }
  .rr-cfg__navbtn { padding: 8px 10px; }
  .rr-cfg__stagechip { font-size: 13px; padding: 5px 9px; }
}

/* Der grosse Weiter-Button bleibt dort, wo der Blick am Ende der Auswahl landet:
   unter dem Formular. Die Pfeile oben im Kopf sind nur die Zweitbedienung. */
/* Zurueck links, Weiter rechts. 'auto' auf dem Weiter-Knopf haelt ihn auch dann
   rechts, wenn Zurueck (Schritt 1) ausgeblendet ist. */
.rr-cfg__nav { display: flex; justify-content: flex-start; gap: 10px; margin-top: 18px; }
.rr-cfg__nav #rr-cfg-next-panel { margin-left: auto; }
.rr-cfg__navbtn--wide { padding: 12px 22px; font-size: 14px; }
@media (max-width: 560px) {
  .rr-cfg__nav { justify-content: stretch; }
  .rr-cfg__navbtn--wide { flex: 1 1 auto; justify-content: center; }
  .rr-cfg__navbtn--wide span { display: inline; }
  /* Auf schmalen Schirmen teilen sich beide die Zeile - kein 'auto' mehr. */
  .rr-cfg__nav #rr-cfg-next-panel { margin-left: 0; }
}

/* Schrittleiste sitzt jetzt im Theme-Hero, ueber der Ueberschrift. Dezenter
   als im Panel, weil sie dort Beiwerk ist und nicht die Hauptsache. */
/* Sitzt jetzt UNTER den Texten - der Abstand gehoert also nach oben. */
.rr-cfg__headnav--hero { margin: 22px 0 0; }
.rr-cfg__headnav--hero .rr-cfg__steplabel { font-size: 13px; }
.rr-cfg__headnav--hero .rr-cfg__stepdot { width: 20px; height: 20px; font-size: 13px; }
.rr-cfg__headnav--hero .rr-cfg__navbtn { font-size: 14px; padding: 7px 12px; }

/* WEBLABS 2026-09-17 (Alex: "Hero-Steps sind nicht sichtbar"): Die Leiste ist
   fuer helle Flaechen gebaut - dunkle Schrift, dunkle Raender. Im Hero liegt sie
   auf einem dunklen Foto und war praktisch unsichtbar. Hier also heller Satz. */
.rr-cfg__headnav--hero .rr-cfg__steplabel { color: rgba(255, 255, 255, .62); }
.rr-cfg__headnav--hero .rr-cfg__steps li.is-now .rr-cfg__steplabel { color: #fff; }
.rr-cfg__headnav--hero .rr-cfg__stepdot {
  border-color: rgba(255, 255, 255, .34);
  color: rgba(255, 255, 255, .72);
}
.rr-cfg__headnav--hero .rr-cfg__steps li.is-now .rr-cfg__stepdot {
  background: #fff;
  border-color: #fff;
  color: #17120f;
}
/* Auf dem dunklen Hero dieselbe Strecke in hell. */
.rr-cfg__headnav--hero .rr-cfg__steps li::after { background: rgba(255, 255, 255, .22); }
.rr-cfg__headnav--hero .rr-cfg__steps li.is-done::after { background: rgba(255, 255, 255, .5); }
.rr-cfg__headnav--hero .rr-cfg__steps li.is-done .rr-cfg__stepdot {
  background: rgba(255, 255, 255, .22);
  border-color: rgba(255, 255, 255, .34);
  color: #fff;
}
.rr-cfg__headnav--hero .rr-cfg__navbtn {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .38);
  color: #fff;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.rr-cfg__headnav--hero .rr-cfg__navbtn:hover { background: rgba(255, 255, 255, .22); }
.rr-cfg__headnav--hero .rr-cfg__navbtn--primary { background: #fff; border-color: #fff; color: #17120f; }
.rr-cfg__headnav--hero .rr-cfg__navbtn--primary:hover { background: rgba(255, 255, 255, .86); }

/* Kopf und Fussnote im Auswahlfenster */
.rr-cfg__panelhead {
  flex: 0 0 auto;
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(42, 36, 32, .12);
}
.rr-cfg__panelstep {
  margin: 0 0 3px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(42, 36, 32, .5);
}
.rr-cfg__paneltitle {
  margin: 0;
  font-family: var(--rn-font-display, inherit);
  font-size: 19px;
  line-height: 1.15;
  font-weight: 700;
  color: #17120f;
}
.rr-cfg__panelnote {
  display: flex;
  gap: 7px;
  align-items: flex-start;
  /* Sitzt jetzt IM Schritt, hinter der Auswahl - nicht mehr fest ueber den
     Knoepfen. Der Abstand nach oben trennt ihn von der letzten Karte. */
  margin: 14px 0 2px;
  font-size: 13px;
  line-height: 1.4;
  color: rgba(42, 36, 32, .58);
}
.rr-cfg__panelnote svg { flex: 0 0 auto; width: 14px; height: 14px; margin-top: 1px; opacity: .8; }

/* ============================================================
   WEBLABS 2026-09-16: Bühne auf volle Breite, Konfigurator als
   schwebendes Fenster darüber.
   Der Aufbau bleibt im Markup unveraendert - das Raster wird nur
   ueberlagert. Faellt dieses Stylesheet aus, steht wieder das
   zweispaltige Layout da, nichts bricht.
   ============================================================ */
.rr-cfg--buehne .rr-cfg__layout {
  display: block;
  position: relative;
}
/* Aus dem Inhaltsraster des Themes ausbrechen, ohne Randabstand am Fenster */
/* 2026-09-16: KEIN Vollbreiten-Ausbruch mehr - die Buehne bleibt in der
   Inhaltsbreite des Themes. */
.rr-cfg--buehne .rr-cfg__viewer-wrap {
  position: relative;
  top: auto;
  left: auto;
  width: auto;
  max-width: none;
  margin-left: 0;
}
.rr-cfg--buehne .rr-cfg__viewer {
  height: clamp(460px, 74vh, 860px);
}

/* Das Fenster: Glasoptik, rechts eingehaengt, eigener Scrollbereich. */
.rr-cfg--buehne .rr-cfg__panel {
  position: absolute;
  z-index: 4;
  top: 50%;
  right: 18px;
  transform: translateY(-50%);
  width: calc(50% - 30px);
  max-height: calc(100% - 36px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 22px;
  min-height: 0;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: var(--rn-radius-card);
  background: rgba(255, 255, 255, .78);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: 0 18px 50px rgba(25, 19, 14, .16), 0 2px 8px rgba(25, 19, 14, .08);
}
/* Schlanke Scrollleiste, damit das Fenster ruhig bleibt */
.rr-cfg--buehne .rr-cfg__panel::-webkit-scrollbar { width: 8px; }
.rr-cfg--buehne .rr-cfg__panel::-webkit-scrollbar-thumb {
  background: rgba(42, 36, 32, .22);
  border-radius: var(--rn-radius-pill);
}
.rr-cfg--buehne .rr-cfg__panel { scrollbar-width: thin; }

/* Bedienelemente und Chip an den Rand der breiten Buehne */
.rr-cfg--buehne .rr-cfg__stagectl { left: 16px; }
.rr-cfg--buehne .rr-cfg__stagechip { right: auto; left: 16px; }

/* Ab hier hat ein schwebendes Fenster keinen Platz mehr: es setzt sich
   wieder unter die Buehne und wird zur normalen Karte. */
@media (max-width: 1100px) {
  .rr-cfg--buehne .rr-cfg__panel {
    position: static;
    transform: none;
    width: auto;
    max-height: none;
    overflow: visible;
    margin: -46px auto 0;
    max-width: min(640px, calc(100% - 32px));
    border-radius: var(--rn-radius-card);
  }
  .rr-cfg--buehne .rr-cfg__viewer { height: clamp(380px, 56vh, 620px); }
  .rr-cfg--buehne .rr-cfg__stagectl,
  .rr-cfg--buehne .rr-cfg__stagechip { left: 16px; }
}
@media (max-width: 560px) {
  .rr-cfg--buehne .rr-cfg__panel { margin-top: -28px; padding: 16px; }
  .rr-cfg--buehne .rr-cfg__viewer { height: clamp(320px, 48vh, 480px); }
}
@media (prefers-reduced-motion: reduce) {
  .rr-cfg--buehne .rr-cfg__panel { backdrop-filter: none; background: rgba(255, 255, 255, .94); }
}

/* 2026-09-16: Im schwebenden Fenster ist die Spalte schmal - drei Paketkarten
   nebeneinander werden dort zu Briefmarken. Deshalb untereinander, mit Bild
   links und Text rechts, damit die Karte flach bleibt. */
.rr-cfg--buehne .rr-cfg__grid--packages { grid-template-columns: 1fr; gap: 10px; }
.rr-cfg--buehne .rr-cfg__grid--packages .rr-cfg__card {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 12px;
  align-items: center;
  text-align: left;
  padding: 10px;
}
.rr-cfg--buehne .rr-cfg__grid--packages .rr-cfg__card img {
  width: 92px; height: 92px; object-fit: cover; border-radius: var(--rn-radius-card); margin: 0;
}
.rr-cfg--buehne .rr-cfg__grid--packages .rr-cfg__card h3 { margin: 0 0 2px; font-size: 15px; }
.rr-cfg--buehne .rr-cfg__grid--packages .rr-cfg__card p { margin: 0 0 6px; font-size: 14px; line-height: 1.35; }
.rr-cfg--buehne .rr-cfg__grid--packages .rr-cfg__meta { gap: 6px; flex-wrap: wrap; }
.rr-cfg--buehne .rr-cfg__grid--packages .rr-cfg__chip { font-size: 13px; padding: 3px 7px; }

/* Optional-Kennzeichnung an Feldbeschriftungen */
.rr-cfg__opt {
  margin-left: 6px;
  padding: 2px 6px;
  border-radius: var(--rn-radius-pill);
  background: rgba(42, 36, 32, .07);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(42, 36, 32, .55);
  vertical-align: middle;
}
@media (max-width: 420px) {
  .rr-cfg--buehne .rr-cfg__grid--packages .rr-cfg__card { grid-template-columns: 64px 1fr; }
  .rr-cfg--buehne .rr-cfg__grid--packages .rr-cfg__card img { width: 64px; height: 64px; }
}

/* Stationsueberschriften im SVG-Overlay. Die aktive traegt, die anderen sind
   nur Orientierung - deshalb deutlich blasser statt gleich laut. */
/* 2026-09-17 (Alex): Die Pakettitel ueber den Stationen sind zurueckgenommen -
   dasselbe steht als Kopfzeile im Auswahlfenster und als markierte Karte
   daneben. Im Bild sind sie nur noch Orientierung, welche Station man ansieht,
   nicht die Hauptaussage. */
.rr-cfg__notes text.rr-st {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .12em;
  fill: rgba(var(--rr-note-stark), .22);
  stroke-width: 3px;
}
.rr-cfg__notes text.rr-st.is-aktiv { fill: rgba(var(--rr-note-stark), .58); }
.rr-cfg__notes text.rr-st-sub {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  fill: rgba(var(--rr-note-stark), .18);
  stroke-width: 2.6px;
}
.rr-cfg__notes text.rr-st-sub.is-aktiv { fill: rgba(var(--rr-note-stark), .40); }

/* (Paket-Pillen in der Buehne entfernt, 2026-09-16 - siehe punkteLeiste) */

/* 2026-09-16: Aufraeumen im Auswahlfenster.
   Vorher: feste Mindesthoehe, grosszuegige Innenabstaende und ein erzwungener
   Scrollbereich - dadurch wirkte es leer und man musste in einem halbhohen
   Kasten scrollen. Jetzt waechst das Fenster mit dem Inhalt und scrollt nur,
   wenn es wirklich nicht mehr passt. */
.rr-cfg--buehne .rr-cfg__panel {
  min-height: 0;
  height: auto;
  top: 18px;
  bottom: 18px;
  transform: none;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.rr-cfg--buehne .rr-cfg__step { margin: 0; }
.rr-cfg--buehne .rr-cfg__step.is-active { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.rr-cfg--buehne .rr-cfg__panel { overflow: hidden; }
.rr-cfg--buehne .rr-cfg__nav { margin-top: 14px; flex: 0 0 auto; }

/* Paketkarten kompakter - im halbbreiten Fenster ist Platz kostbar. */
.rr-cfg--buehne .rr-cfg__grid--packages { gap: 8px; }
.rr-cfg--buehne .rr-cfg__grid--packages .rr-cfg__card {
  grid-template-columns: 76px 1fr;
  gap: 11px;
  padding: 9px;
}
.rr-cfg--buehne .rr-cfg__grid--packages .rr-cfg__card img { width: 76px; height: 76px; }
.rr-cfg--buehne .rr-cfg__grid--packages .rr-cfg__card h3 { font-size: 14px; }
.rr-cfg--buehne .rr-cfg__grid--packages .rr-cfg__card p {
  font-size: 13px;
  line-height: 1.3;
  margin: 0 0 5px;
}

@media (max-width: 1100px) {
  .rr-cfg--buehne .rr-cfg__panel {
    top: auto; bottom: auto; height: auto; overflow: visible; display: block;
  }
  .rr-cfg--buehne .rr-cfg__step.is-active { overflow: visible; }
}

/* 2026-09-16: Paketkarte sauber zweispaltig - Bild links, ein zusammenhaengender
   Textblock rechts. Vorher lagen h3/p/meta als EINZELNE Rasterkinder darin und
   liefen zeilenweise um, dadurch stand die Beschreibung unter dem Bild. */
.rr-cfg--buehne .rr-cfg__grid--packages .rr-cfg__card {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 13px;
  align-items: start;
  text-align: left;
  padding: 11px;
  border-radius: var(--rn-radius-card);
}
.rr-cfg--buehne .rr-cfg__grid--packages .rr-cfg__card img {
  grid-row: 1;
  width: 82px;
  height: 82px;
  object-fit: cover;
  border-radius: var(--rn-radius-card);
  margin: 0;
}
.rr-cfg__cardbody {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.rr-cfg__cardhead {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.15;
}
.rr-cfg__cardtext {
  font-size: 14px;
  line-height: 1.38;
  opacity: .75;
}
.rr-cfg--buehne .rr-cfg__grid--packages .rr-cfg__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 1px;
}
@media (max-width: 1100px) {
  .rr-cfg--buehne .rr-cfg__grid--packages .rr-cfg__card { grid-template-columns: 96px minmax(0, 1fr); }
  .rr-cfg--buehne .rr-cfg__grid--packages .rr-cfg__card img { width: 96px; height: 96px; }
}

/* ============================================================================
   2026-09-17 (Alex): Mobil war die Auswahl eine eigene Karte, die halb ueber der
   Buehne hing und halb darunter stand - zwei Flaechen, zwei Raender, und die
   Bedienknoepfe im Bild lagen genau unter der Kartenkante.

   Jetzt ist es EINE Flaeche mit fester Gesamthoehe: oben die Buehne, darunter die
   Auswahl im selben Rahmen mit eigenem Scrollbereich. Der Block ist dafuer
   bewusst hoeher als der Inhalt - das ist der "kuenstlich hoeher" Teil.

   Warum feste Hoehe statt mitwachsend: nur so hat der Auswahlteil einen eigenen
   Scrollbereich. Ohne den waechst die Seite bei Schritt 2 (neun Sorten) ins
   Endlose und die Buehne ist beim Ausfuellen laengst weggescrollt.
   ========================================================================= */
/* 2026-09-17 (Alex): Auf der Konfigurator-Seite soll mobil KEIN Vorspann mehr
   stehen - Kopfzeile und Werkzeug ergeben zusammen genau einen Bildschirm. Der
   Hero war dort 576 px hoch; man musste also erst an einem Bild vorbeiscrollen,
   um ueberhaupt an den Konfigurator zu kommen, und beim Bedienen rutschte die
   Seite staendig mit. Ueberschrift und Schritt stehen jetzt ohnehin im Fenster
   selbst (rr-cfg__panelhead), der Hero traegt dort nichts mehr bei. */
@media (max-width: 860px) {
  /* Alle Hero-Bauarten: .rn-subpage-hero ist der alte Unterseiten-Hero,
     .hero--configurator der vom 17.09., .rn-cfg-hero der schmale vom 18.09.
     (der hiess wieder anders - deshalb stand mobil ploetzlich 294 px Bild ueber
     dem Konfigurator). Nur mobil; am Desktop bleibt der Hero. */
  .rr-cfg-seite .rn-subpage-hero,
  .rr-cfg-seite .hero--configurator,
  .rr-cfg-seite .rn-cfg-hero { display: none; }
  .rr-cfg-seite .rr-cfg { margin: 0; }
  .rr-cfg-seite .rr-cfg__header { display: none; }
  /* Das Theme legt oben einen Abstand in Kopfzeilenhoehe an. Der Kopf ist hier
     fest positioniert und wird darum einmal gebraucht - mehr aber nicht. */
  .rr-cfg-seite main,
  .rr-cfg-seite .site-main,
  .rr-cfg-seite .rn-page {
    padding-top: var(--rn-header-height, 66px);
    padding-bottom: 0;
  }
  /* Der Inhaltsrahmen legt oben 48 px drauf und seitlich je 16 px. Zusammen
     waren das ueber 100 px Luft um einen Block, der den Bildschirm fuellen soll.
     padding-inline statt padding-left/right, weil das Theme die Kurzform
     benutzt - sonst gewinnt bei gleicher Spezifitaet die spaetere Zeile. */
  .rr-cfg-seite .rn-container {
    padding-top: 0;
    padding-bottom: 0;
    padding-inline: 0;
    max-width: none;
  }
}

@media (max-width: 860px) {
  .rr-cfg--buehne .rr-cfg__layout {
    display: flex;
    flex-direction: column;
    /* PFLICHT: .rr-cfg__layout ist im Grundzustand ein Raster mit
       'align-items: start'. Im Flexbau heisst dasselbe Wort "so breit wie der
       Inhalt" - die Buehne behielt dadurch die Breite ihrer Leinwand aus der
       Desktop-Ansicht (407 statt 368 px) und ragte rechts aus der Karte. Genau
       deshalb liefen auch die Erklaerlinien ueber den Rand hinaus: sie werden
       gegen die Breite der Buehne gerechnet, nicht gegen die der Karte. */
    align-items: stretch;
    /* Ebenfalls aus dem Raster geerbt: gap. Im Flexbau greift er genauso und
       trennte Buehne und Auswahl um 32 px - genau der weisse Streifen. */
    gap: 0;
    /* Genau der Platz unter der festen Kopfzeile - zusammen ein Bildschirm.
       svh statt vh: auf dem Handy aendert die ein- und ausfahrende Adressleiste
       vh staendig, der Block wuerde bei jedem Scrollen springen. */
    height: calc(100vh - var(--rn-header-height, 66px));
    height: calc(100svh - var(--rn-header-height, 66px));
    min-height: 520px;
    overflow: hidden;
    /* Randlos bis an die Bildschirmkante - eine abgerundete Karte mit Schatten
       braucht Luft aussenrum, die hier nicht mehr da ist. */
    border-radius: 0;
    border: 0;
    border-top: 1px solid rgba(42, 36, 32, .12);
    background: #fff;
    box-shadow: none;
  }
  .rr-cfg--buehne .rr-cfg__viewer-wrap {
    position: relative;
    top: auto;
    flex: 0 0 52%;
    min-height: 0;
    border: 0;
    border-radius: 0;
  }
  /* Die Buehne fuellt ihren Rahmen exakt aus. Absolut statt 'height: 100%',
     weil sonst je nach Breakpoint eine der aelteren clamp()-Hoehen gewinnt und
     die Leinwand groesser bleibt als der sichtbare Ausschnitt. */
  .rr-cfg--buehne .rr-cfg__viewer {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    /* PFLICHT: Die Grundregel gibt .rr-cfg__viewer ein Seitenverhaeltnis 1/1.08
       und min-height 440px. Beides gewinnt gegen 'height: auto' - die Leinwand
       blieb dadurch 407x440 gross, waehrend der sichtbare Rahmen 366x288 mass.
       Alles darunter wurde von overflow:hidden abgeschnitten, und die
       Erklaerlinien wurden gegen die falsche Breite gerechnet. */
    aspect-ratio: auto;
    min-height: 0;
  }

  .rr-cfg--buehne .rr-cfg__panel {
    position: static;
    transform: none;
    width: auto;
    max-width: none;
    max-height: none;
    margin: 0;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    /* NICHT das Fenster scrollen lassen, sondern den Schritt darin - sonst
       wandern Zurueck und Weiter mit nach unten aus dem Bild. */
    overflow: hidden;
    padding: 12px 12px 0;
    border: 0;
    border-top: 1px solid rgba(42, 36, 32, .12);
    border-radius: 0;
    background: #fff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
  }
  /* Der jeweils sichtbare Schritt ist der Scrollbereich. Die uebrigen tragen
     ohnehin das hidden-Attribut und sind damit aus dem Fluss. */
  .rr-cfg--buehne .rr-cfg__step.is-active {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-right: 4px;
    scrollbar-width: thin;
  }
  .rr-cfg--buehne .rr-cfg__step.is-active::-webkit-scrollbar { width: 5px; }
  .rr-cfg--buehne .rr-cfg__step.is-active::-webkit-scrollbar-thumb {
    background: rgba(42, 36, 32, .20);
    border-radius: var(--rn-radius-pill);
  }

  /* Vor und Zurueck stehen fest am Fuss, nicht im Scrollbereich. Damit ist
     immer sichtbar, dass es weitergeht - und nichts liegt uebereinander. */
  .rr-cfg--buehne .rr-cfg__nav {
    position: static;
    flex: 0 0 auto;
    margin: 0 -12px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    background: #fff;
    border-top: 1px solid rgba(42, 36, 32, .10);
  }

  /* Bedienknoepfe INNERHALB der Buehne. Der Hinweis wandert nach unten rechts -
     oben mittig steht die Paketueberschrift, dort stiess er dagegen. */
  .rr-cfg--buehne .rr-cfg__stagectl { left: 12px; bottom: 12px; }
  .rr-cfg--buehne .rr-cfg__stagechip {
    left: auto;
    right: 12px;
    top: auto;
    bottom: 14px;
    font-size: 13px;
    padding: 5px 9px;
  }
}

@media (max-width: 520px) {
  /* Auf schmalen Geraeten braucht die Auswahl etwas mehr Platz als die Buehne. */
  .rr-cfg--buehne .rr-cfg__viewer-wrap { flex-basis: 48%; }
  .rr-cfg--buehne .rr-cfg__grid--packages .rr-cfg__card {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 10px;
    padding: 9px;
  }
  .rr-cfg--buehne .rr-cfg__grid--packages .rr-cfg__card img { width: 72px; height: 72px; }
  .rr-cfg__cardtext { font-size: 13px; }
  .rr-cfg--buehne .rr-cfg__stagebtn { width: 34px; height: 34px; }
}

/* Sortenkarten auf dem Handy. Eine Karte war dort rund 290 px hoch - es passte
   also genau EINE ins Fenster, und man musste neunmal scrollen, um das Sortiment
   zu ueberblicken. Bild kleiner, Bewertungen nebeneinander, Chip unter den Text:
   damit passen zweieinhalb Karten ins Bild und man sieht, dass es eine Liste ist. */
@media (max-width: 860px) {
  .rr-cfg--buehne .rr-cfg__coffee {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 11px;
    align-items: start;
    padding: 10px;
    margin-bottom: 8px;
    border-radius: var(--rn-radius-card);
  }
  .rr-cfg--buehne .rr-cfg__coffee img {
    grid-row: 1;
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: var(--rn-radius-card);
  }
  .rr-cfg--buehne .rr-cfg__coffee h3 { font-size: 13.5px; line-height: 1.15; margin: 0 0 2px; }
  .rr-cfg--buehne .rr-cfg__coffee p { font-size: 13px; line-height: 1.3; margin: 0; }
  .rr-cfg--buehne .rr-cfg__rating {
    gap: 10px;
    margin-top: 5px;
    font-size: 13px;
    flex-wrap: nowrap;
  }
  .rr-cfg--buehne .rr-cfg__rating-row img { width: 11px; height: 11px; }
  /* Der Auswahl-Chip sass in einer dritten Spalte und wurde bei 366 px Breite
     erdrueckt. Er steht jetzt unter dem Text, links buendig. */
  .rr-cfg--buehne .rr-cfg__coffee > .rr-cfg__chip {
    grid-column: 2;
    justify-self: start;
    margin-top: 6px;
    font-size: 13px;
  }

  /* Formularteil (Schritt 3 bis 5): Die Felder waren fuer die Desktop-Spalte
     bemessen. Im Handyfenster passten dadurch nicht einmal zwei Felder ins Bild.
     16px Schriftgroesse bleibt PFLICHT - darunter zoomt iOS beim Antippen in
     das Feld hinein und reisst das ganze Layout auseinander. */

  /* Kopf und Fussnote schmaler: im Handyfenster geht jede Zeile von der Liste ab. */
  .rr-cfg--buehne .rr-cfg__panelhead { margin-bottom: 9px; padding-bottom: 8px; }
  .rr-cfg--buehne .rr-cfg__panelstep { font-size: 13px; margin-bottom: 2px; }
  .rr-cfg--buehne .rr-cfg__paneltitle { font-size: 16px; }
  .rr-cfg--buehne .rr-cfg__panelnote { font-size: 13px; margin-top: 8px; gap: 6px; }
  .rr-cfg--buehne .rr-cfg__panelnote svg { width: 12px; height: 12px; }

  /* 2026-09-17 (Alex: "Bezeichnungen am Mobile deutlich kleiner"): Die
     Erklaerlinien sind fuer eine 1300 px breite Buehne bemessen. Auf 366 px
     nahmen sie ein Drittel der Flaeche ein und lagen teils uebereinander. */
  .rr-cfg__notes text { font-size: 13px; letter-spacing: .05em; stroke-width: 2.4px; }
  .rr-cfg__notes text.rr-st { font-size: 13px; stroke-width: 2.6px; }
  .rr-cfg__notes text.rr-st-sub { font-size: 13px; stroke-width: 2.2px; }
  .rr-cfg__notes circle { r: 4; }
  .rr-cfg--buehne .rr-cfg__stagechip { font-size: 13px; padding: 4px 8px; }
}

/* =========================================================================
   WEBLABS 2026-10-21 (Alex: "UX und UI total billig, vor allem das Form",
   "beim ersten Laden eine total alte Version")
   1. Ladezustand: Buehnenlayout steht sofort, die Szene blendet weich ein.
   2. Formulare (Schritt 3-5) als ein System: Gruppen mit Ueberschrift,
      ruhige Felder mit Fokusring im Akzentton, eigene Upload-Flaeche,
      Schalter statt Checkbox, Farbraster, Zusammenfassung mit Summenblock.
   Alles mit .rr-cfg davor, damit es die aelteren Schichten oben sicher schlaegt.
   ========================================================================= */
.rr-cfg {
  --rr-ink: #2a2420;
  --rr-ink-2: rgba(42, 36, 32, .62);
  --rr-ink-3: rgba(42, 36, 32, .45);
  --rr-line: rgba(42, 36, 32, .14);
  --rr-line-2: rgba(42, 36, 32, .08);
  --rr-fokus: 0 0 0 3px rgba(200, 169, 126, .35);
  --rr-fehler: #b3412e;
}

/* ——— 1. Ladezustand ——— */
.rr-cfg .rr-cfg__viewer {
  background: radial-gradient(120% 95% at 32% 42%, #efe7dc 0%, #ddcfbb 58%, #cdb99e 100%);
}
.rr-cfg .rr-cfg__viewer canvas { opacity: 0; transition: opacity .8s var(--rn-ease); }
.rr-cfg.is-bereit .rr-cfg__viewer canvas { opacity: 1; }
.rr-cfg__loader {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  pointer-events: none;
  color: var(--rr-ink-2);
  font: 700 13px/1.4 var(--rn-font-display);
  letter-spacing: .16em;
  text-transform: uppercase;
  transition: opacity .5s var(--rn-ease), visibility .5s;
}
@media (min-width: 1101px) {
  /* Rechts liegt das Fenster - die Anzeige gehoert in die sichtbare Haelfte. */
  .rr-cfg--buehne .rr-cfg__loader { right: 50%; }
}
.rr-cfg.is-bereit .rr-cfg__loader { opacity: 0; visibility: hidden; }
.rr-cfg__loaderring {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid rgba(42, 36, 32, .14);
  border-top-color: rgba(42, 36, 32, .62);
  animation: rr-dreh .9s linear infinite;
}
.rr-cfg__loader.is-fehler .rr-cfg__loaderring { display: none; }
.rr-cfg__loader.is-fehler .rr-cfg__loadertext {
  max-width: 300px;
  text-align: center;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  font-size: 14px;
}
@keyframes rr-dreh { to { transform: rotate(360deg); } }
/* Bedienknoepfe und Hinweise erst mit der Szene - vorher bedienen sie nichts. */
.rr-cfg:not(.is-bereit) .rr-cfg__stagectl,
.rr-cfg:not(.is-bereit) .rr-cfg__stagechip,
.rr-cfg:not(.is-bereit) .rr-cfg__notes { opacity: 0; pointer-events: none; }
.rr-cfg .rr-cfg__stagectl,
.rr-cfg .rr-cfg__stagechip { transition: opacity .5s var(--rn-ease); }
@media (prefers-reduced-motion: reduce) {
  .rr-cfg__loaderring { animation-duration: 2.4s; }
  .rr-cfg .rr-cfg__viewer canvas { transition: none; }
}

/* ——— 2. Formulare ——— */
.rr-cfg .rr-form { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.rr-cfg .rr-form__group {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 16px;
  background: rgba(255, 255, 255, .62);
  border: 1px solid var(--rr-line-2);
  border-radius: var(--rn-radius-card);
}
.rr-cfg .rr-form__legend {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font: 700 13px/1 var(--rn-font-display);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--rr-ink-3);
}
.rr-cfg .rr-form__legend::after { content: ''; flex: 1; height: 1px; background: var(--rr-line-2); }
.rr-cfg .rr-form__field { display: flex; flex-direction: column; gap: 6px; margin: 0; min-width: 0; }
.rr-cfg .rr-form__labelrow { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.rr-cfg .rr-form__field label {
  display: block;
  margin: 0;
  font: 600 13px/1.25 var(--rn-font-display);
  letter-spacing: .02em;
  text-transform: none;
  color: var(--rr-ink);
}
.rr-cfg .rr-form__count {
  font-size: 13px;
  color: var(--rr-ink-3);
  font-variant-numeric: tabular-nums;
}
.rr-cfg .rr-form__field input,
.rr-cfg .rr-form__field textarea {
  width: 100%;
  height: 44px;
  margin: 0;
  padding: 0 14px;
  border: 1px solid var(--rr-line);
  border-radius: var(--rn-radius-control);
  background: #fff;
  color: var(--rr-ink);
  font-family: inherit;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.3;
  box-shadow: none;
  transition: border-color .18s var(--rn-ease), box-shadow .18s var(--rn-ease);
}
.rr-cfg .rr-form__field textarea { height: auto; min-height: 84px; padding: 11px 14px; resize: vertical; }
.rr-cfg .rr-form__field input::placeholder,
.rr-cfg .rr-form__field textarea::placeholder { color: rgba(42, 36, 32, .35); }
.rr-cfg .rr-form__field input:hover,
.rr-cfg .rr-form__field textarea:hover { border-color: rgba(42, 36, 32, .3); }
.rr-cfg .rr-form__field input:focus,
.rr-cfg .rr-form__field textarea:focus { outline: none; border-color: var(--rr-ink); box-shadow: var(--rr-fokus); }
.rr-cfg .rr-form__field.is-fehler label { color: var(--rr-fehler); }
.rr-cfg .rr-form__field.is-fehler input { border-color: var(--rr-fehler); }
.rr-cfg .rr-form__hint { margin: 0; font-size: 14px; line-height: 1.45; color: var(--rr-ink-2); }
.rr-cfg .rr-form__error { margin: 0; font-size: 14px; color: var(--rr-fehler); }
.rr-cfg .rr-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rr-cfg .rr-form__row--plz { grid-template-columns: 112px 1fr; }
@media (max-width: 520px) {
  .rr-cfg .rr-form__row { grid-template-columns: 1fr; }
  .rr-cfg .rr-form__row--plz { grid-template-columns: 96px 1fr; }
}
.rr-cfg .rr-form__callout {
  margin: 0;
  padding: 12px 14px;
  border-left: 3px solid var(--rn-accent);
  border-radius: 0 var(--rn-radius-card) var(--rn-radius-card) 0;
  background: rgba(200, 169, 126, .14);
  font-size: 14px;
  line-height: 1.5;
  color: var(--rr-ink);
}
.rr-cfg .rr-form__fine { text-align: center; }

/* Upload-Flaeche. Die echte Dateiauswahl liegt unsichtbar darueber - so
   funktionieren Klick, Tastatur und Ziehen-und-Ablegen ohne eigenen Code. */
.rr-cfg .rr-drop {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 72px;
  border: 1.5px dashed rgba(42, 36, 32, .24);
  border-radius: var(--rn-radius-card);
  background: rgba(255, 255, 255, .7);
  transition: border-color .18s var(--rn-ease), background-color .18s var(--rn-ease), box-shadow .18s var(--rn-ease);
}
.rr-cfg .rr-drop:hover,
.rr-cfg .rr-drop.is-drag { border-color: var(--rn-accent-dark); background: rgba(200, 169, 126, .12); }
.rr-cfg .rr-drop:focus-within { box-shadow: var(--rr-fokus); border-color: var(--rr-ink); }
.rr-cfg .rr-drop__input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.rr-cfg .rr-drop__leer,
.rr-cfg .rr-drop__voll { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 14px; }
.rr-cfg .rr-drop__voll { display: none; }
.rr-cfg .rr-drop.is-voll { border-style: solid; border-color: var(--rr-line); background: #fff; }
.rr-cfg .rr-drop.is-voll .rr-drop__leer { display: none; }
.rr-cfg .rr-drop.is-voll .rr-drop__voll { display: flex; }
.rr-cfg .rr-drop__icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(42, 36, 32, .06);
  color: var(--rr-ink);
}
.rr-cfg .rr-drop__icon svg { width: 20px; height: 20px; }
.rr-cfg .rr-drop__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rr-cfg .rr-drop__text strong {
  overflow: hidden;
  font: 600 14px/1.3 var(--rn-font-display);
  color: var(--rr-ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rr-cfg .rr-drop__text > span { font-size: 14px; line-height: 1.35; color: var(--rr-ink-2); }
.rr-cfg .rr-drop__thumb {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  overflow: hidden;
  border: 1px solid var(--rr-line-2);
  border-radius: var(--rn-radius-card);
  /* Schachbrett zeigt, ob das Logo freigestellt ist */
  background: repeating-conic-gradient(#ece8e2 0 25%, #fff 0 50%) 0 0 / 10px 10px;
}
.rr-cfg .rr-drop__thumb img { max-width: 86%; max-height: 86%; object-fit: contain; }
.rr-cfg .rr-drop__weg {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  margin-left: auto;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(42, 36, 32, .06);
  color: var(--rr-ink);
  cursor: pointer;
  transition: background-color .18s var(--rn-ease);
}
.rr-cfg .rr-drop__weg:hover { background: rgba(42, 36, 32, .14); }
.rr-cfg .rr-drop__weg svg { width: 16px; height: 16px; }
.rr-cfg .rr-drop__liste { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.rr-cfg .rr-drop__liste[hidden] { display: none; }
.rr-cfg .rr-drop__liste li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--rr-line-2);
  border-radius: var(--rn-radius-card);
  background: #fff;
  font-size: 14px;
  color: var(--rr-ink);
}
.rr-cfg .rr-drop__liste li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rr-cfg .rr-drop__liste small { flex: 0 0 auto; color: var(--rr-ink-3); }

/* Schalter */
.rr-cfg .rr-switch { position: relative; display: flex; align-items: center; gap: 12px; margin: 0; cursor: pointer; }
.rr-cfg .rr-switch[hidden] { display: none; }
.rr-cfg .rr-switch input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.rr-cfg .rr-switch__track {
  position: relative;
  flex: 0 0 auto;
  width: 38px;
  height: 22px;
  border-radius: var(--rn-radius-pill);
  background: rgba(42, 36, 32, .2);
  transition: background-color .2s var(--rn-ease), box-shadow .2s var(--rn-ease);
}
.rr-cfg .rr-switch__track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
  transition: transform .2s var(--rn-ease);
}
.rr-cfg .rr-switch input:checked + .rr-switch__track { background: var(--rr-ink); }
.rr-cfg .rr-switch input:checked + .rr-switch__track::after { transform: translateX(16px); }
.rr-cfg .rr-switch input:focus-visible + .rr-switch__track { box-shadow: var(--rr-fokus); }
.rr-cfg .rr-switch__text { display: flex; flex-direction: column; gap: 1px; font: 600 13px/1.3 var(--rn-font-display); color: var(--rr-ink); }
.rr-cfg .rr-switch__text small { font-family: inherit; font-size: 14px; font-weight: 400; line-height: 1.35; color: var(--rr-ink-2); }

/* Farben */
.rr-cfg .rr-form__colors { display: flex; flex-direction: column; gap: 10px; }
.rr-cfg .rr-form__colorhead { display: flex; align-items: center; justify-content: space-between; }
.rr-cfg .rr-form__colortitle { font: 600 13px/1.25 var(--rn-font-display); color: var(--rr-ink); }
.rr-cfg .rr-form__colorval {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 500 13px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .04em;
  color: var(--rr-ink-3);
}
.rr-cfg .rr-form__colorval i { width: 10px; height: 10px; border-radius: var(--rn-radius-control); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
.rr-cfg .rr-form .rr-cfg__color {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(30px, 1fr));
  gap: 8px;
}
.rr-cfg .rr-form .rr-cfg__swatch {
  position: relative;
  width: auto;
  height: auto;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: var(--rn-radius-control);
  background: var(--sw, #ccc);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
  cursor: pointer;
  transition: transform .15s var(--rn-ease), box-shadow .15s var(--rn-ease);
}
.rr-cfg .rr-form .rr-cfg__swatch:hover { transform: scale(1.07); }
.rr-cfg .rr-form .rr-cfg__swatch:focus-visible { outline: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12), var(--rr-fokus); }
.rr-cfg .rr-form .rr-cfg__swatch.is-selected {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12), 0 0 0 2px #fff, 0 0 0 4px var(--rr-ink);
}
.rr-cfg .rr-form .rr-cfg__swatch--custom {
  display: block;
  overflow: hidden;
  background: conic-gradient(#e0533d, #e8c33a, #4cae5b, #3a9bd9, #7d55c7, #d94f9a, #e0533d);
}
.rr-cfg .rr-form__fixed {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--rr-ink-2);
}
.rr-cfg .rr-form__fixed strong { color: var(--rr-ink); }
.rr-cfg .rr-form__fixedchips,
.rr-cfg .rr-sum__chips { display: inline-flex; flex: 0 0 auto; }
.rr-cfg .rr-form__fixedchips i,
.rr-cfg .rr-sum__chips i {
  width: 28px;
  height: 28px;
  border-radius: var(--rn-radius-pill);
  box-shadow: 0 0 0 2px #fff, inset 0 0 0 1px rgba(0, 0, 0, .12);
}
.rr-cfg .rr-form__fixedchips i + i,
.rr-cfg .rr-sum__chips i + i { margin-left: -6px; }
.rr-cfg .rr-sum__chips i { width: 18px; height: 18px; }

/* Zusammenfassung */
.rr-cfg .rr-sum { display: flex; flex-direction: column; gap: 14px; }
.rr-cfg .rr-sum__list {
  margin: 0;
  padding: 2px 16px;
  border: 1px solid var(--rr-line-2);
  border-radius: var(--rn-radius-card);
  background: rgba(255, 255, 255, .62);
}
.rr-cfg .rr-sum__row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid var(--rr-line-2);
}
.rr-cfg .rr-sum__row:last-child { border-bottom: 0; }
.rr-cfg .rr-sum__row dt {
  margin: 0;
  font: 700 13px/1.4 var(--rn-font-display);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--rr-ink-3);
}
.rr-cfg .rr-sum__row dd { margin: 0; font-size: 14px; font-weight: 600; color: var(--rr-ink); overflow-wrap: anywhere; }
.rr-cfg .rr-sum__muted { margin-left: 6px; font-size: 14px; font-weight: 400; color: var(--rr-ink-2); }
.rr-cfg .rr-sum__total {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-radius: var(--rn-radius-card);
  background: var(--rr-ink);
  color: #fff;
}
.rr-cfg .rr-sum__totallabel {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font: 700 13px/1 var(--rn-font-display);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.rr-cfg .rr-sum__totallabel small { font-family: inherit; font-size: 14px; font-weight: 400; line-height: 1.3; letter-spacing: 0; text-transform: none; opacity: .7; }
.rr-cfg .rr-sum .rr-cfg__total { margin: 0; font-size: 26px; line-height: 1; color: #fff; }
.rr-cfg .rr-sum__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 520px) { .rr-cfg .rr-sum__actions { grid-template-columns: 1fr; } }

/* Knoepfe in den Schritten an die Fensterknoepfe angleichen (eckig nach CI) */
.rr-cfg .rr-form .rr-cfg__btn,
.rr-cfg .rr-sum .rr-cfg__btn {
  width: 100%;
  min-height: 48px;
  padding: 0 18px;
  border-width: 1.5px;
  border-radius: var(--rn-radius-control);
  font-size: 14px;
  letter-spacing: .12em;
}

/* Platzhalter, solange Pakete bzw. Sorten noch kommen - gleiche Hoehe wie die
   echten Karten, damit beim Eintreffen nichts springt. */
.rr-cfg .rr-skel { display: flex; flex-direction: column; gap: 8px; }
.rr-cfg .rr-skel span {
  display: block;
  height: 98px;
  border-radius: var(--rn-radius-card);
  background: linear-gradient(100deg, rgba(42, 36, 32, .05) 30%, rgba(42, 36, 32, .1) 50%, rgba(42, 36, 32, .05) 70%) 0 0 / 300% 100%;
  animation: rr-schimmer 1.4s ease-in-out infinite;
}
.rr-cfg .rr-skel--pakete span { height: 104px; }
@keyframes rr-schimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .rr-cfg .rr-skel span { animation: none; } }
.rr-cfg .rr-sum__wege { display: flex; flex-direction: column; gap: 10px; }
.rr-cfg .rr-form__hint[hidden] { display: none; }

/* Deluxe: Layout-Auswahl mit Skizzen */
.rr-cfg .rr-bauart { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rr-cfg .rr-bauart__opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 12px 8px 10px;
  border: 1px solid var(--rr-line);
  border-radius: var(--rn-radius-control);
  background: #fff;
  color: var(--rr-ink);
  font: inherit;
  text-align: center;
  cursor: pointer;
  transition: border-color .18s var(--rn-ease), box-shadow .18s var(--rn-ease), transform .18s var(--rn-ease);
}
.rr-cfg .rr-bauart__opt:hover { border-color: rgba(42, 36, 32, .35); transform: translateY(-1px); }
.rr-cfg .rr-bauart__opt:focus-visible { outline: none; box-shadow: var(--rr-fokus); }
.rr-cfg .rr-bauart__opt.is-selected { border-color: var(--rr-ink); box-shadow: inset 0 0 0 1px var(--rr-ink); }
.rr-cfg .rr-bauart__opt svg { width: 40px; height: 52px; margin-bottom: 6px; }
.rr-cfg .rr-bauart__opt strong { font: 700 13px/1.2 var(--rn-font-display); letter-spacing: .08em; text-transform: uppercase; }
.rr-cfg .rr-bauart__opt span { font-size: 13px; line-height: 1.3; color: var(--rr-ink-2); }
.rr-cfg .rr-sk-grund { fill: rgba(42, 36, 32, .07); stroke: rgba(42, 36, 32, .25); stroke-width: 1; }
.rr-cfg .rr-bauart__opt.is-selected .rr-sk-grund { fill: #f2d41a; stroke: var(--rr-ink); }
.rr-cfg .rr-sk-linie { fill: none; stroke: var(--rr-ink); stroke-width: 1.4; stroke-linecap: round; }
.rr-cfg .rr-sk-dick { fill: none; stroke: var(--rr-ink); stroke-width: 2.6; stroke-linecap: round; }
@media (max-width: 420px) { .rr-cfg .rr-bauart__opt span { display: none; } }

/* 2026-10-21: Kopf ueber der Buehne entfaellt - Schritt, Titel und Fortschritt
   stehen im Fenster. Vorher dreifach: Leiste (halb unter dem Seitenkopf),
   "Schritt fuer Schritt" + Ueberschrift, und dieselbe Ueberschrift im Fenster. */
.rr-cfg--buehne .rr-cfg__header { display: none; }
/* Abstand Hero -> Buehne: nur der Seitenrand des Themes (56 px), kein
   zusaetzlicher Innenrand - der Platz war fuer den alten Kopf reserviert. */
@media (min-width: 861px) { .rr-cfg-page-main .rr-cfg-wrap { padding-top: 0; } }
/* Spruenge zum Konfigurator (Paket-Knoepfe unten) landen unter dem fixierten Kopf */
#rr-cfg { scroll-margin-top: calc(var(--rn-header-height, 76px) + 16px); }
@media (max-width: 860px) { #rr-cfg { scroll-margin-top: var(--rn-header-height, 60px); } }
.rr-cfg .rr-cfg__progress {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.rr-cfg .rr-cfg__progress li { margin: 0; padding: 0; }
.rr-cfg .rr-cfg__progress li > * {
  display: block;
  width: 100%;
  height: 3px;
  padding: 0;
  border: 0;
  border-radius: var(--rn-radius-pill);
  background: rgba(42, 36, 32, .12);
  transition: background-color .3s var(--rn-ease);
}
.rr-cfg .rr-cfg__progress li.is-done > * { background: var(--rr-ink); }
.rr-cfg .rr-cfg__progress li.is-now > * { background: var(--rn-accent-dark); }
.rr-cfg .rr-cfg__progress button { cursor: pointer; position: relative; }
/* groessere Trefferflaeche, ohne die Linie dicker zu machen */
.rr-cfg .rr-cfg__progress button::after { content: ''; position: absolute; inset: -8px 0; }
.rr-cfg .rr-cfg__progress button:hover { background: var(--rn-accent-dark); }
.rr-cfg .rr-cfg__panelhead { padding-bottom: 14px; }
.rr-cfg .rr-cfg__panelhead { border-bottom: 0; }

/* ——— Schritt 1 + 2: Karten im selben System wie die Formulare ——— */
.rr-cfg--buehne .rr-cfg__grid--packages .rr-cfg__card,
.rr-cfg .rr-cfg__coffee {
  border: 1px solid var(--rr-line-2);
  border-radius: var(--rn-radius-card);
  background: rgba(255, 255, 255, .82);
  box-shadow: none;
  transition: border-color .18s var(--rn-ease), box-shadow .18s var(--rn-ease), transform .18s var(--rn-ease), background-color .18s var(--rn-ease);
}
.rr-cfg--buehne .rr-cfg__grid--packages .rr-cfg__card:hover,
.rr-cfg .rr-cfg__coffee:hover { border-color: rgba(42, 36, 32, .3); background: #fff; transform: translateY(-1px); }
.rr-cfg--buehne .rr-cfg__grid--packages .rr-cfg__card.is-selected,
.rr-cfg .rr-cfg__coffee.is-selected { border-color: var(--rr-ink); box-shadow: inset 0 0 0 1px var(--rr-ink); background: #fff; }
.rr-cfg .rr-cfg__coffee { grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; padding: 10px 14px 10px 10px; margin-bottom: 8px; }
.rr-cfg .rr-cfg__coffee img { width: 64px; height: 64px; border-radius: var(--rn-radius-card); }
.rr-cfg .rr-cfg__coffee h3 { font-size: 14px; letter-spacing: .05em; }
.rr-cfg .rr-cfg__coffee p { font-size: 14px; }
.rr-cfg .rr-cfg__rating { gap: 14px; margin-top: 6px; font-size: 13px; letter-spacing: .08em; color: var(--rr-ink-2); }
.rr-cfg .rr-cfg__rating-row img { width: 12px; height: 12px; }
.rr-cfg .rr-cfg__radio {
  width: 20px;
  height: 20px;
  border: 1.5px solid rgba(42, 36, 32, .3);
  border-radius: 50%;
  transition: border-color .18s var(--rn-ease), background-color .18s var(--rn-ease);
}
.rr-cfg .rr-cfg__coffee.is-selected .rr-cfg__radio {
  border-color: var(--rr-ink);
  background: radial-gradient(circle, var(--rr-ink) 0 4.5px, transparent 5px);
}
/* Variantenbox direkt unter der Karte */
.rr-cfg .rr-cfg__varbox { margin: -2px 0 12px; padding: 14px 16px; border-color: var(--rr-line); background: #fff; }
.rr-cfg .rr-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.rr-cfg .rr-seg__opt {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-width: 84px;
  padding: 9px 14px;
  border: 1px solid var(--rr-line);
  border-radius: var(--rn-radius-control);
  background: #fff;
  color: var(--rr-ink);
  font: 600 13px/1.2 var(--rn-font-display);
  cursor: pointer;
  transition: border-color .18s var(--rn-ease), box-shadow .18s var(--rn-ease), background-color .18s var(--rn-ease);
}
.rr-cfg .rr-seg__opt small { font: 400 13px/1.2 inherit; font-family: inherit; color: var(--rr-ink-2); }
.rr-cfg .rr-seg__opt:hover { border-color: rgba(42, 36, 32, .35); }
.rr-cfg .rr-seg__opt:focus-visible { outline: none; box-shadow: var(--rr-fokus); }
.rr-cfg .rr-seg__opt.is-selected { border-color: var(--rr-ink); box-shadow: inset 0 0 0 1px var(--rr-ink); background: rgba(200, 169, 126, .1); }
.rr-cfg .rr-cfg__qty { display: grid; grid-template-columns: 44px 1fr 44px; gap: 0; max-width: 220px; }
.rr-cfg .rr-cfg__qty input {
  height: 44px;
  max-width: none;
  border: 1px solid var(--rr-line);
  border-left: 0;
  border-right: 0;
  border-radius: 0;
  text-align: center;
  font: 600 15px/1 inherit;
  font-family: inherit;
  -moz-appearance: textfield;
}
.rr-cfg .rr-cfg__qty input::-webkit-inner-spin-button,
.rr-cfg .rr-cfg__qty input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.rr-cfg .rr-cfg__qty input:focus { outline: none; box-shadow: var(--rr-fokus); position: relative; z-index: 1; }
.rr-cfg .rr-cfg__qty-btn {
  width: 44px;
  height: 44px;
  border: 1px solid var(--rr-line);
  background: #fff;
  color: var(--rr-ink);
  font-size: 18px;
  cursor: pointer;
}
.rr-cfg .rr-cfg__qty-btn:first-child { border-radius: 0; }
.rr-cfg .rr-cfg__qty-btn:last-child { border-radius: 0; }
.rr-cfg .rr-cfg__qty-btn:hover { background: rgba(42, 36, 32, .05); }
.rr-cfg .rr-cfg__pricebox {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 12px 14px;
  border: 0;
  border-radius: var(--rn-radius-card);
  background: var(--rr-ink);
  color: rgba(255, 255, 255, .75);
  font-size: 14px;
}
.rr-cfg .rr-cfg__pricebox strong { display: block; margin-top: 2px; font: 700 17px/1.1 var(--rn-font-display); color: #fff; }
.rr-cfg .rr-cfg__pricebox span:last-child { text-align: right; }
.rr-cfg .rr-sum__row { padding: 9px 0; }

/* Abschluss (Schritt 6) */
.rr-cfg .rr-done { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 8px 4px; text-align: center; }
.rr-cfg .rr-done__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--rr-ink);
  color: #fff;
  animation: rr-plopp .5s cubic-bezier(.2, 1.4, .4, 1) both;
}
.rr-cfg .rr-done__icon svg { width: 26px; height: 26px; }
@keyframes rr-plopp { from { transform: scale(.4); opacity: 0; } }
.rr-cfg .rr-done__title { margin: 4px 0 0; font: 700 22px/1.2 var(--rn-font-display); letter-spacing: .04em; text-transform: uppercase; color: var(--rr-ink); }
.rr-cfg .rr-done__text { margin: 0; font-size: 14px; color: var(--rr-ink-2); }
.rr-cfg .rr-done__steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  margin: 8px 0 6px;
  padding: 14px 16px;
  border: 1px solid var(--rr-line-2);
  border-radius: var(--rn-radius-card);
  background: rgba(255, 255, 255, .62);
  list-style: none;
  counter-reset: rrschritt;
  text-align: left;
}
.rr-cfg .rr-done__steps li { position: relative; display: flex; flex-direction: column; gap: 2px; padding-left: 34px; counter-increment: rrschritt; }
.rr-cfg .rr-done__steps li::before {
  content: counter(rrschritt);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(200, 169, 126, .25);
  font: 700 13px/1 var(--rn-font-display);
  color: var(--rr-ink);
}
.rr-cfg .rr-done__steps strong { font: 700 13px/1.3 var(--rn-font-display); color: var(--rr-ink); }
.rr-cfg .rr-done__steps span { font-size: 14px; line-height: 1.45; color: var(--rr-ink-2); }
.rr-cfg .rr-done .rr-sum__actions { width: 100%; }

/* =========================================================================
   Infobereich unter dem Konfigurator (SEO/GEO, 2026-10-21)
   CI 2026-11 (docs/CI.md): Kennwert-Kacheln, Schritt-Karten, eckige Buttons.
   ========================================================================= */
.rr-info {
  --rr-ink: #2a2420;
  --rr-ink-2: rgba(42, 36, 32, .66);
  --rr-line-2: rgba(42, 36, 32, .1);
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 7vw, 88px);
  margin: clamp(56px, 8vw, 112px) 0 clamp(64px, 8vw, 120px);
  color: var(--rr-ink);
}
.rr-info__intro { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.rr-info__eyebrow { grid-column: 1 / -1; margin: 0 0 -12px; font: 700 var(--rn-eyebrow-size)/1 var(--rn-font-display); letter-spacing: var(--rn-eyebrow-track); text-transform: uppercase; color: var(--rn-accent-dark); }
.rr-info__titel { grid-column: 1; margin: 0; font: 800 var(--rn-title-h2)/1.02 var(--rn-font-display); text-transform: uppercase; letter-spacing: .01em; }
.rr-info__lead { grid-column: 1; margin: -8px 0 0; font-size: var(--rn-text-lead); line-height: 1.65; color: var(--rn-text-mute); max-width: 62ch; }
.rr-info__fakten {
  grid-column: 2;
  grid-row: 2 / span 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 0;
}
/* Kennwert-Kacheln wie Seminar-Detail (.rn-seminar-fakten) */
.rr-info__fakten > div { padding: 16px 18px; border: 1px solid var(--rn-line); border-radius: var(--rn-radius-card); background: #fff; box-shadow: var(--rn-shadow-card); }
.rr-info__fakten dt { margin: 0 0 4px; font: 700 var(--rn-eyebrow-size)/1.3 var(--rn-font-display); letter-spacing: var(--rn-eyebrow-track); text-transform: uppercase; color: var(--rn-accent-dark); }
.rr-info__fakten dd { margin: 0; font: 700 17px/1.35 var(--rn-font-display); color: #0a0a0a; }
.rr-info .rr-info__h3 { margin: 0 0 32px; font: 800 var(--rn-title-h2)/1.02 var(--rn-font-display); text-transform: uppercase; letter-spacing: .01em; }
.rr-info .rn-ci-title em { font-style: normal; color: var(--rn-accent-dark); }

.rr-info__tabelle { overflow-x: auto; border: 1px solid var(--rn-line); border-radius: var(--rn-radius-card); background: #fff; box-shadow: var(--rn-shadow-card); }
.rr-info__tabelle:focus-visible { outline: 2px solid var(--rn-accent); outline-offset: 2px; }
.rr-info table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 15px; }
.rr-info th, .rr-info td { padding: 15px 18px; border-bottom: 1px solid var(--rr-line-2); text-align: center; vertical-align: middle; }
.rr-info tbody th { text-align: left; font-weight: 600; }
.rr-info thead th { padding-top: 20px; padding-bottom: 20px; font: 800 17px/1.2 var(--rn-font-display); letter-spacing: .1em; text-transform: uppercase; background: #0a0a0a; color: #fff; }
.rr-info thead th small { color: var(--rn-accent) !important; }
.rr-info tbody th { font-size: 16px; }
.rr-info thead th small,
.rr-info td small { display: block; margin-top: 3px; font: 400 13px/1.3 inherit; font-family: inherit; letter-spacing: 0; text-transform: none; color: var(--rr-ink-2); }
.rr-info tfoot td { border-bottom: 0; padding-top: 18px; padding-bottom: 18px; }
.rr-info__ja { width: 20px; height: 20px; color: var(--rr-ink); vertical-align: middle; }
.rr-info__nein { color: rgba(42, 36, 32, .3); font-weight: 700; }
.rr-info__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--rn-btn-height);
  padding: 0 18px;
  border: 2px solid #0a0a0a;
  border-radius: var(--rn-radius-control);
  color: #0a0a0a;
  font: 700 var(--rn-btn-size)/1 var(--rn-font-display);
  letter-spacing: var(--rn-btn-track);
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color .18s var(--rn-ease), color .18s var(--rn-ease);
}
.rr-info__cta:hover,
.rr-info__cta:focus-visible { background: var(--rr-ink); color: #fff; outline: none; }

.rr-info__ablauf { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; counter-reset: rrablauf; }
.rr-info__ablauf li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 28px;
  border: 1px solid var(--rn-line);
  border-radius: var(--rn-radius-card);
  background: #fff;
  box-shadow: var(--rn-shadow-card);
  counter-increment: rrablauf;
}
/* Schritt-Nummer wie das Icon-Feld der Fakten-Karten (Baustein 03) */
.rr-info__ablauf li::before {
  content: counter(rrablauf, decimal-leading-zero);
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 8px;
  border-radius: 14px;
  background: #0a0a0a;
  color: var(--rn-accent);
  font: 800 18px/1 var(--rn-font-display);
  letter-spacing: .04em;
}
.rr-info__ablauf strong { font: 800 var(--rn-title-h3)/1.2 var(--rn-font-display); text-transform: uppercase; letter-spacing: .02em; }
.rr-info__ablauf span { font-size: 16px; line-height: 1.6; color: var(--rn-text-mute); }

.rr-info__faq { max-width: 860px; border-top: 1px solid var(--rr-line-2); }
.rr-info__faq details { border-bottom: 1px solid var(--rr-line-2); }
.rr-info__faq summary {
  position: relative;
  padding: 20px 44px 20px 0;
  font: 600 17px/1.35 var(--rn-font-display);
  list-style: none;
  cursor: pointer;
}
.rr-info__faq summary::-webkit-details-marker { display: none; }
.rr-info__faq summary::after {
  content: '';
  position: absolute;
  right: 6px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 1.8px solid currentColor;
  border-bottom: 1.8px solid currentColor;
  transform: translateY(-70%) rotate(45deg);
  transition: transform .2s var(--rn-ease);
}
.rr-info__faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.rr-info__faq summary:focus-visible { outline: 2px solid var(--rn-accent); outline-offset: 2px; }
.rr-info__faq p { margin: 0 0 22px; max-width: 70ch; font-size: 15.5px; line-height: 1.65; color: var(--rr-ink-2); }

@media (max-width: 900px) {
  .rr-info__intro { grid-template-columns: 1fr; }
  .rr-info__fakten { grid-column: 1; grid-row: auto; }
  .rr-info__ablauf { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  /* Auf der Konfigurator-Seite ist der Inhaltsrahmen mobil randlos (Buehne) -
     der Infobereich braucht seinen Seitenabstand zurueck. */
  .rr-cfg-seite .rr-info { padding-inline: 16px; }
}
@media (max-width: 560px) {
  .rr-info__ablauf { grid-template-columns: 1fr; }
  .rr-info__fakten { grid-template-columns: 1fr; }
  .rr-info th, .rr-info td { padding: 12px 10px; font-size: 14px; }
}