/* ═══════════════════════════════════════════════
   3D-Konfigurator (Testseite)
   Nutzt die bestehenden Tokens aus homepage.css / konfigurator.css
   ═══════════════════════════════════════════════ */

.ff-3d-page { padding: 0 0 72px; }
.ff-3d-body { padding-top: 20px; }

/* ── Hero (Video-Card wie auf den uebrigen Seiten) ── */
.ff-3d-herowrap { padding: calc(var(--header-h, 64px) + 24px) 0 0; }
.ff-3d-hero {
  position: relative;
  min-height: 280px;
  overflow: hidden;
  background: #0A0A0A;
}

/* ── Bühne ── */
.ff-3d-stage {
  position: relative;
  padding: 0;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  min-height: 620px;
  background:
    radial-gradient(ellipse at 50% 78%, #E4E5E9 0%, #F5F5F7 42%, #F5F5F7 100%);
}
.ff-3d-stage canvas {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity .6s ease;
  touch-action: none;   /* Drehen darf die Seite nicht scrollen */
  cursor: grab;
}
.ff-3d-stage.is-ready canvas { opacity: 1; }
.ff-3d-stage canvas:active { cursor: grabbing; }

/* ── Ladeanzeige ── */
.ff-3d-loader {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  text-align: center;
  transition: opacity .4s ease, visibility .4s;
}
.ff-3d-loader.is-done { opacity: 0; visibility: hidden; }
.ff-3d-loader__bar {
  width: min(240px, 60%);
  height: 4px;
  border-radius: 99px;
  background: rgba(0,0,0,.08);
  overflow: hidden;
}
.ff-3d-loader__bar span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 99px;
  background: var(--text, #1D1D1F);
  transition: width .25s ease;
}
.ff-3d-loader__label { font-size: 14px; font-weight: 600; color: var(--text, #1D1D1F); }
.ff-3d-loader__hint  { font-size: 12px; color: var(--text3, #86868B); max-width: 320px; line-height: 1.5; }
.ff-3d-loader.is-error .ff-3d-loader__label { color: #C0392B; }

/* ── Oben links: Umgebung + Bedienhinweis ── */
.ff-3d-topleft {
  position: absolute;
  left: 16px;
  top: 16px;
  z-index: 4;
  display: flex;
  /* Am Rechner nebeneinander: Boden, Zeit und Wetter gehoeren zusammen und
     bilden eine Zeile. Untereinander gestapelt wuchs die Ecke bei Pflaster
     auf drei Reihen und verdeckte das Fahrzeug.
     Auf dem Handy bleibt es gestapelt — nebeneinander passt es dort nicht. */
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  max-width: calc(100% - 32px);
}
@media (min-width: 900px) {
  .ff-3d-topleft {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    max-width: calc(100% - 260px);   /* Platz fuer die Werkzeuge rechts oben */
  }
}

/* Glasleiste für eine einzelne Auswahl — dieselbe Anmutung wie der
   Radioplayer gegenüber, damit die Ecken zusammenpassen. */
.ff-3d-glas {
  display: flex;
  align-items: center;
  gap: 5px;
  /* Bei mehreren Belägen darf die Leiste schmaler werden und seitlich
     scrollen, statt über die Bühne hinauszuwachsen. */
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 5px 7px 5px 11px;
  border-radius: 980px;
  background: rgba(255, 255, 255, .74);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, .6);
  box-shadow: 0 2px 12px rgba(0, 0, 0, .08);
  opacity: 0;
  transition: opacity .4s ease .3s;
}
.ff-3d-stage.is-ready .ff-3d-glas { opacity: 1; }
.ff-3d-glas::-webkit-scrollbar { display: none; }
.ff-3d-glas .ff-3d-pill { flex: 0 0 auto; }
.ff-3d-glas__label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text3, #86868B);
  flex: 0 0 auto;
}

/* ── Tageszeit und Wetter als Symbolschalter ──
   Text waere hier zu breit fuer die schmale Leiste oben links, und die
   Bedeutung ist mit Sonne/Mond/Wolke ohnehin schneller erfasst als gelesen.
   Der Name steht als title/aria-label dahinter, damit die Schalter trotzdem
   benennbar bleiben. */
/* Ein eigenes display im Autoren-Stylesheet schlaegt das display:none, das
   der Browser fuer [hidden] mitbringt — ohne diese Regel blieben Zeit und
   Wetter auch im Studio sichtbar, wo sie nichts bewirken. */
.ff-3d-glas[hidden] { display: none; }
.ff-3d-glas--icons { gap: 2px; }
.ff-3d-ikon {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text3, #86868B);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.ff-3d-ikon:hover { background: rgba(0,0,0,.06); color: var(--text, #1D1D1F); }
.ff-3d-ikon.is-active {
  background: var(--text, #1D1D1F);
  color: #fff;
}
.ff-3d-ikon .material-symbols-rounded { font-size: 17px; line-height: 1; }
.ff-3d-ikon:focus-visible { outline: 2px solid var(--text, #1D1D1F); outline-offset: 2px; }

/* ── Hinweis + Werkzeuge ── */
.ff-3d-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 980px;
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(10px);
  font-size: 12px;
  font-weight: 500;
  color: var(--text2, #6E6E73);
  opacity: 0;
  transition: opacity .4s ease .3s;
  pointer-events: none;
}
.ff-3d-stage.is-ready .ff-3d-hint { opacity: 1; }
.ff-3d-hint .material-symbols-rounded { font-size: 16px; }

/* ── Bedienhinweis, frei ueber der Buehne ──
   Er stand zuerst dauerhaft oben links im Bild, danach in der Bedienleiste
   zwischen Farben und Felgen — dort sah er aus wie eine weitere Beschriftung
   und drueckte die Leiste auseinander. Jetzt schwebt er unten mittig ueber
   dem Bild, ueber nichts Bedienbarem, und ist nur zu sehen, wenn er gebraucht
   wird: einmal nach dem Laden (Klasse setzt das JS), danach beim Zeigen auf
   die Buehne. */
.ff-3d-hint--frei {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 104px;
  z-index: 3;
  white-space: nowrap;
  background: rgba(0,0,0,.34);
  backdrop-filter: blur(8px);
  color: rgba(255,255,255,.92);
  font-size: 11.5px;
  letter-spacing: .01em;
  padding: 6px 13px;
  opacity: 0;
  transition: opacity .5s ease;
}
/* Die Grundregel weiter oben macht jeden Hinweis sichtbar, sobald die Buehne
   fertig ist (.ff-3d-stage.is-ready .ff-3d-hint). Dieser hier soll das gerade
   nicht — deshalb zuruecknehmen, und die beiden Sichtbarkeitsfaelle muessen
   danach mindestens dieselbe Spezifitaet haben, sonst gewinnt das Zuruecknehmen. */
.ff-3d-stage.is-ready .ff-3d-hint--frei { opacity: 0; }
.ff-3d-stage.is-ready .ff-3d-hint--frei.is-intro { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .ff-3d-stage.is-ready:hover .ff-3d-hint--frei { opacity: 1; }
}
@media (max-width: 900px) {
  /* Die Bedienleiste ist auf dem Handy hoeher. */
  .ff-3d-hint--frei { bottom: 132px; font-size: 11px; padding: 5px 11px; }
}

.ff-3d-topbar {
  position: absolute;
  right: 16px;
  top: 16px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100% - 32px);
}
.ff-3d-tools {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
  opacity: 0;
  transition: opacity .4s ease .3s;
}
.ff-3d-stage.is-ready .ff-3d-tools { opacity: 1; }
.ff-3d-tool {
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 12px;
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(10px);
  color: var(--text2, #6E6E73);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0,0,0,.07);
  transition: background .2s, color .2s;
}
.ff-3d-tool:hover { background: #fff; color: var(--text, #1D1D1F); }
.ff-3d-tool.is-active { background: var(--text, #1D1D1F); color: #fff; }
.ff-3d-tool .material-symbols-rounded { font-size: 19px; }

/* ── Steuerleiste: schwebende Glasflaeche unten in der 3D-Karte ──
   Zwei Gruppen nebeneinander, jeweils Beschriftung ueber den Farbpunkten.
   Die Leiste ist nur so breit wie ihr Inhalt und sitzt mittig. */
.ff-3d-bar {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%) translateY(8px);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 16px;
  width: max-content;
  max-width: calc(100% - 32px);
  padding: 12px 16px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .74);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, .62);
  box-shadow: 0 10px 34px rgba(0, 0, 0, .11);
  opacity: 0;
  transition: opacity .5s ease .2s, transform .5s ease .2s;
}
.ff-3d-stage.is-ready .ff-3d-bar { opacity: 1; transform: translateX(-50%) translateY(0); }

.ff-3d-group { display: flex; flex-direction: column; gap: 7px; min-width: 0; }

.ff-3d-group__head {
  display: flex;
  align-items: baseline;
  gap: 7px;
  min-width: 0;
  line-height: 1;
}
.ff-3d-group__label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text3, #86868B);
  flex: 0 0 auto;
}
.ff-3d-group__value {
  font-size: 12px;
  font-weight: 600;
  color: var(--text, #1D1D1F);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ff-3d-sep {
  align-self: stretch;
  width: 1px;
  background: rgba(0, 0, 0, .09);
  flex: 0 0 auto;
}

/* Farbpunkte: nicht umbrechen, bei Platzmangel scrollen — die Leiste bleibt
   dadurch immer gleich hoch, egal wie viele Farben hinterlegt sind. */
.ff-3d-dots {
  display: flex;
  flex-wrap: nowrap;
  gap: 7px;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px;
  margin: -4px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-snap-type: x proximity;
}
.ff-3d-dots::-webkit-scrollbar { display: none; }

/* ── Farbwahl als Schieber ──
   Zwoelf Punkte nebeneinander sind eine Wand aus Farbe, in der man nichts
   mehr wiedererkennt. Sichtbar sind deshalb immer nur fuenf; der Rest wird
   herangeschoben. Die Breite wird aus Punktgroesse und Abstand gerechnet,
   damit sie nicht auseinanderlaeuft, wenn eines von beiden geaendert wird.
   Auf dem Handy genuegt das Wischen; am Rechner braucht es Pfeile, weil eine
   Maus auf einer Leiste ohne Rollbalken nicht wischen kann. */
.ff-3d-slider {
  --dot: 21px;
  --luecke: 7px;
  --sichtbar: 5;
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.ff-3d-slider .ff-3d-dots {
  /* fuenf Punkte plus die vier Luecken dazwischen */
  width: calc(var(--sichtbar) * var(--dot) + (var(--sichtbar) - 1) * var(--luecke));
  flex: 0 0 auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
}
.ff-3d-slider__arrow {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  display: none;            /* nur wo eine Maus da ist, s. u. */
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(0,0,0,.05);
  color: var(--text2, #6E6E73);
  cursor: pointer;
  transition: background .15s, opacity .15s, color .15s;
}
.ff-3d-slider__arrow:hover { background: rgba(0,0,0,.11); color: var(--text, #1D1D1F); }
.ff-3d-slider__arrow .material-symbols-rounded { font-size: 16px; line-height: 1; }
/* Am Ende angekommen: sichtbar bleiben, aber erkennbar ohne Funktion —
   ein verschwindender Pfeil laesst die Leiste springen. */
.ff-3d-slider__arrow[disabled] { opacity: .25; cursor: default; }
.ff-3d-slider__arrow[disabled]:hover { background: rgba(0,0,0,.05); color: var(--text2, #6E6E73); }
/* Passt alles ohne Schieben hinein, verschwinden die Pfeile ganz. */
.ff-3d-slider.is-komplett .ff-3d-slider__arrow { display: none !important; }
.ff-3d-slider.is-komplett .ff-3d-dots { width: auto; }

@media (hover: hover) and (pointer: fine) {
  .ff-3d-slider__arrow { display: inline-flex; }
}

/* Der Glanz liegt als eigener Layer ueber der Flaeche — so bleibt der
   Farbwert selbst unverfaelscht und dunkle Toene saufen nicht ab. */
.ff-3d-dot {
  position: relative;
  width: 21px;
  height: 21px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--sw, #ccc);
  cursor: pointer;
  flex-shrink: 0;
  scroll-snap-align: center;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.08),
    0 1px 2px rgba(0,0,0,.10);
  transition: transform .18s cubic-bezier(.4,0,.2,1), box-shadow .18s;
}
.ff-3d-dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(160deg, rgba(255,255,255,.35) 0%, rgba(255,255,255,.06) 42%, rgba(0,0,0,.10) 100%);
  pointer-events: none;
}
.ff-3d-dot:hover { transform: scale(1.12); }
.ff-3d-dot.is-active {
  transform: scale(1.02);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.08),
    0 0 0 2px #fff,
    0 0 0 3.5px var(--text, #1D1D1F);
}
.ff-3d-dot:focus-visible { outline: 2px solid var(--text, #1D1D1F); outline-offset: 4px; }

/* ── Felgenmodell-Pills (Dummy, bis eigene FF-Geometrien vorliegen) ── */
.ff-3d-pills { display: flex; gap: 5px; }
.ff-3d-pill {
  padding: 4px 10px;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 980px;
  background: transparent;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--text2, #6E6E73);
  cursor: pointer;
  line-height: 1.2;
  transition: background .18s, color .18s, border-color .18s;
}
.ff-3d-pill:hover { border-color: rgba(0,0,0,.28); color: var(--text, #1D1D1F); }
.ff-3d-pill.is-active {
  background: var(--text, #1D1D1F);
  border-color: var(--text, #1D1D1F);
  color: #fff;
}
.ff-3d-pill:focus-visible { outline: 2px solid var(--text, #1D1D1F); outline-offset: 2px; }

/* Zollgrößen sind reine Zahlen und brauchen weniger Platz. */
.ff-3d-pills--tight { gap: 3px; }
.ff-3d-pills--tight .ff-3d-pill { padding: 4px 7px; font-variant-numeric: tabular-nums; }

/* Umgebungen werden erst beim Anwaehlen geladen — solange laeuft im Knopf
   ein Balken durch, damit der Klick nicht ins Leere zu gehen scheint. */
.ff-3d-pill.is-loading {
  position: relative;
  overflow: hidden;
  color: var(--text3, #86868B);
  cursor: progress;
}
.ff-3d-pill.is-loading::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40%;
  height: 2px;
  border-radius: 2px;
  background: var(--text, #1D1D1F);
  animation: ff-pill-load 1.1s ease-in-out infinite;
}
@keyframes ff-pill-load {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}
@media (prefers-reduced-motion: reduce) {
  .ff-3d-pill.is-loading::after { animation: none; width: 100%; opacity: .4; }
}
.ff-3d-pill.is-error {
  color: #C0392B;
  border-color: rgba(192, 57, 43, .35);
  cursor: not-allowed;
}


/* ── Technische Angaben unter der Karte ── */
.ff-3d-meta {
  margin: 12px 2px 0;
  font-size: 12px;
  color: var(--text3, #86868B);
}
.ff-3d-meta span { color: var(--text2, #6E6E73); font-weight: 600; }

/* ── Radio: oben rechts, in einer Zeile mit den Werkzeugen ── */
.ff-3d-radio {
  display: flex;
  flex: 0 1 auto;
  min-width: 0;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 6px 0 4px;
  border-radius: 980px;
  background: rgba(255, 255, 255, .74);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, .6);
  box-shadow: 0 2px 12px rgba(0, 0, 0, .08);
  opacity: 0;
  transition: opacity .4s ease .3s;
  max-width: 260px;
}
.ff-3d-stage.is-ready .ff-3d-radio { opacity: 1; }
.ff-3d-radio.is-error { display: none; }

.ff-3d-radio__btn,
.ff-3d-radio__skip {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text, #1D1D1F);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .18s;
}
.ff-3d-radio__btn:hover,
.ff-3d-radio__skip:hover { background: rgba(0, 0, 0, .06); }
.ff-3d-radio__btn .material-symbols-rounded { font-size: 20px; }
.ff-3d-radio__skip { color: var(--text3, #86868B); }
.ff-3d-radio__skip .material-symbols-rounded { font-size: 17px; }

.ff-3d-radio__body {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding-right: 4px;
}
.ff-3d-radio__title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text2, #6E6E73);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Kleiner Equalizer — steht still, solange nichts laeuft */
.ff-3d-radio__eq { display: flex; align-items: flex-end; gap: 2px; height: 12px; flex: 0 0 auto; }
.ff-3d-radio__eq i {
  width: 2px;
  height: 3px;
  border-radius: 1px;
  background: var(--text3, #86868B);
  transition: background .2s;
}
.ff-3d-radio.is-playing .ff-3d-radio__eq i {
  background: var(--text, #1D1D1F);
  animation: ff-eq .9s ease-in-out infinite;
}
.ff-3d-radio.is-playing .ff-3d-radio__eq i:nth-child(2) { animation-delay: .18s; }
.ff-3d-radio.is-playing .ff-3d-radio__eq i:nth-child(3) { animation-delay: .36s; }
.ff-3d-radio.is-playing .ff-3d-radio__eq i:nth-child(4) { animation-delay: .54s; }
@keyframes ff-eq {
  0%, 100% { height: 3px; }
  50%      { height: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .ff-3d-radio.is-playing .ff-3d-radio__eq i { animation: none; height: 8px; }
}

/* Ladezustand des Players — der Titel wird erst beim ersten Klick geholt. */
.ff-3d-radio.is-loading .ff-3d-radio__btn .material-symbols-rounded {
  animation: ff-radio-spin 1s linear infinite;
}
@keyframes ff-radio-spin { to { transform: rotate(360deg); } }

/* ── Responsiv ── */
@media (max-width: 900px) {
  /* Auf dem Telefon soll die Buehne den Bildschirm fuellen — ein festes
     Seitenverhaeltnis liesse das Fahrzeug in einem schmalen Streifen sitzen.
     svh statt vh, damit die ein- und ausfahrende Browserleiste die Hoehe
     nicht springen laesst. */
  .ff-3d-stage {
    aspect-ratio: auto;
    /* Die Buehne bekommt, was das Geraet nach Kopfzeile und Bedienung uebrig
       laesst — vorher waren es feste 76 % der Hoehe, und darunter stand noch
       Luft, waehrend das Fahrzeug in einem Streifen sass.
       182px sind die beiden Zeilen unter der Karte plus Abstand; dvh statt
       vh, damit die ein- und ausfahrende Browserleiste die Hoehe nicht
       springen laesst. */
    height: calc(100dvh - var(--header-h, 64px) - 182px);
    min-height: 380px;
    max-height: none;
  }
  .ff-3d-herowrap { padding-top: calc(var(--header-h, 64px) + 14px); }
  .ff-3d-hero { min-height: 210px; }

  .ff-3d-bar {
    left: 8px;
    right: 8px;
    bottom: 8px;
    transform: none;
    width: auto;
    max-width: none;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px 14px;
    padding: 10px 12px 11px;
    border-radius: 16px;
  }
  .ff-3d-stage.is-ready .ff-3d-bar { transform: none; }
  .ff-3d-sep { display: none; }

  /* Lackierung bekommt die volle Zeile (zwoelf Punkte passen sonst nicht),
     die uebrigen Gruppen packen sich in die folgenden Zeilen. */
  .ff-3d-group { flex: 0 1 auto; }
  .ff-3d-group--paint { flex: 1 1 100%; padding-right: 34px; }

  .ff-3d-group__label { font-size: 9px; letter-spacing: .05em; }
  .ff-3d-group__value { font-size: 11px; }
  .ff-3d-dots { gap: 6px; }
  .ff-3d-dot { width: 19px; height: 19px; }
  /* Die Rechnung fuer die Schieberbreite muss die kleineren Werte kennen,
     sonst zeigt sie auf dem Handy vier oder sechs Punkte statt fuenf. */
  .ff-3d-slider { --dot: 19px; --luecke: 6px; }
  /* Die Lackierung braucht die volle Zeile nicht mehr — fuenf Punkte plus
     Pfeile passen neben die uebrigen Gruppen. */
  .ff-3d-group--paint { flex: 0 1 auto; padding-right: 0; }
  .ff-3d-pills { gap: 4px; }
  .ff-3d-pill { padding: 4px 9px; font-size: 10.5px; }


  .ff-3d-topleft { left: 10px; top: 10px; gap: 6px; max-width: calc(100% - 108px); }
  .ff-3d-glas { padding: 4px 6px 4px 9px; gap: 4px; }
  .ff-3d-glas__label { font-size: 9px; }
  .ff-3d-ikon { width: 24px; height: 24px; border-radius: 7px; }
  .ff-3d-ikon .material-symbols-rounded { font-size: 16px; }
  .ff-3d-hint { padding: 6px 10px; font-size: 11px; }
  .ff-3d-topbar { right: 10px; top: 10px; gap: 6px; }
  .ff-3d-tool { width: 34px; height: 34px; border-radius: 10px; }
  .ff-3d-radio { height: 34px; max-width: 42px; padding: 0 2px; }
  .ff-3d-radio__title,
  .ff-3d-radio__eq { display: none; }
  .ff-3d-radio__body { padding-right: 0; }
}

/* Sehr schmale Geraete: der Hinweistext konkurriert mit den Werkzeugen. */
@media (max-width: 420px) {
  .ff-3d-hint { display: none; }
  .ff-3d-group--paint { padding-right: 30px; }
}

/* ══════════════════════════════════════════════════════════════════
   Bedienung auf dem Telefon
   Umgebaut wird in mobil.js — dieselben Knoten wandern unter die Karte,
   statt dass es ein zweites Markup fuer klein gaebe. Hier steht nur, wie
   sie dort aussehen.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {

  .ff-3d-unten {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 10px 8px 0;
  }

  /* ── Zeile 1: Umgebung ──
     Aus der Ecke der Buehne heraus in eine eigene Zeile. Sie schiebt
     seitlich, statt umzubrechen: drei Gruppen nebeneinander sind auf einem
     Telefon breiter als der Bildschirm, und eine zweite Zeile waere wieder
     Hoehe, die dem Fahrzeug fehlt. */
  .ff-3d-unten .ff-3d-topleft {
    position: static;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    max-width: none;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .ff-3d-unten .ff-3d-topleft::-webkit-scrollbar { display: none; }
  .ff-3d-unten .ff-3d-glas {
    flex: 0 0 auto;
    overflow: visible;          /* die Zeile schiebt, nicht jede Leiste einzeln */
    background: rgba(255, 255, 255, .92);
    /* Sichtbar gemacht werden Glasleisten und Bedienleiste sonst ueber
       '.ff-3d-stage.is-ready .ff-3d-glas' — eine Nachfahrenregel. Sobald sie
       unter die Karte wandern, sind sie keine Nachfahren mehr und blieben auf
       opacity 0, also unsichtbar. Hier ausdruecklich wieder einschalten.
       Zugleich der Grund, warum sie unten schon waehrend des Ladens zu sehen
       sind: sie liegen nicht mehr auf der Buehne, wo sie stoeren wuerden. */
    opacity: 1;
  }

  /* ── Zeile 2: die Reiter ──
     Nicht mehr schwebend ueber der Buehne, sondern eine eigene Leiste
     darunter. position: relative, weil die aufgeklappte Auswahl sich daran
     ausrichtet. */
  .ff-3d-bar--reiter {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    transform: none;
    width: 100%;
    max-width: none;
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 0;
    border-radius: 14px;
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid rgba(0, 0, 0, .06);
    box-shadow: 0 2px 14px rgba(0, 0, 0, .07);
  }
  .ff-3d-bar--reiter::-webkit-scrollbar { display: none; }
  /* Die Leiste faehrt am Rechner beim Erscheinen von unten herein — als
     feste Zeile unter der Karte waere das ein Ruckeln beim Laden. */
  .ff-3d-stage.is-ready ~ .ff-3d-unten .ff-3d-bar--reiter,
  .ff-3d-bar--reiter { transform: none; opacity: 1; }

  .ff-3d-bar--reiter .ff-3d-sep { display: none; }

  /* Ein Reiter: Name oben, aktueller Wert darunter. Mehr steht hier nicht —
     die Auswahl kommt erst beim Antippen. */
  .ff-3d-bar--reiter .ff-3d-group {
    position: static;
    flex: 1 0 auto;
    min-width: 84px;
    padding: 9px 12px 10px;
    border-right: 1px solid rgba(0, 0, 0, .05);
    cursor: pointer;
  }
  .ff-3d-bar--reiter .ff-3d-group:last-child { border-right: none; }
  .ff-3d-bar--reiter .ff-3d-group[hidden] { display: none; }
  .ff-3d-bar--reiter .ff-3d-group__head { pointer-events: none; }
  .ff-3d-bar--reiter .ff-3d-group__label { font-size: 9.5px; }
  .ff-3d-bar--reiter .ff-3d-group__value { font-size: 12px; }
  .ff-3d-bar--reiter .ff-3d-group.is-offen {
    background: rgba(0, 0, 0, .045);
    border-radius: 12px;
  }

  /* Die Auswahl selbst: eingeklappt weg, aufgeklappt als Blatt ueber der
     Leiste. Ueber und nicht unter der Leiste, weil der Daumen von unten
     kommt und sonst genau das verdeckt, was er gerade waehlt. */
  .ff-3d-bar--reiter .ff-3d-group > *:not(.ff-3d-group__head) { display: none; }
  .ff-3d-bar--reiter .ff-3d-group.is-offen > *:not(.ff-3d-group__head) {
    display: flex;
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% + 8px);
    z-index: 6;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .97);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border: 1px solid rgba(0, 0, 0, .07);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .14);
  }
  /* Im Blatt ist Platz — die Punkte duerfen wieder Fingergroesse haben.
     Der Schieber mit seinen Pfeilen wird dort nicht gebraucht: alle Farben
     passen nebeneinander, wenn sie umbrechen duerfen. */
  .ff-3d-bar--reiter .ff-3d-group.is-offen .ff-3d-slider { --dot: 30px; --luecke: 8px; }
  .ff-3d-bar--reiter .ff-3d-group.is-offen .ff-3d-slider__arrow { display: none; }
  .ff-3d-bar--reiter .ff-3d-group.is-offen .ff-3d-dots {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    max-width: none;
    overflow: visible;
    transform: none !important;
  }
  .ff-3d-bar--reiter .ff-3d-group.is-offen .ff-3d-dot { width: 30px; height: 30px; }
  .ff-3d-bar--reiter .ff-3d-group.is-offen .ff-3d-pills { flex-wrap: wrap; justify-content: center; gap: 6px; }
  .ff-3d-bar--reiter .ff-3d-group.is-offen .ff-3d-pill { padding: 7px 14px; font-size: 12.5px; }

  .ff-3d-gruppenhinweis {
    flex: 1 0 100%;
    margin: 0;
    padding: 8px 12px 10px;
    font-size: 11px;
    line-height: 1.45;
    color: var(--text3, #86868B);
  }

  /* Der Bedienhinweis lag ueber der alten schwebenden Leiste — die ist weg. */
  .ff-3d-hint--frei { bottom: 14px; }
}

/* Am Rechner bleibt der Hinweis unsichtbar, solange nichts fehlt. */
.ff-3d-gruppenhinweis {
  flex: 1 0 100%;
  margin: 4px 0 0;
  font-size: 11.5px;
  color: var(--text3, #86868B);
}

/* ── Bildschirmfoto ──
   Waehrend der Aufnahme wird der Knopf ueber 'visibility' unsichtbar, nicht
   ueber 'display' — er behaelt seinen Platz, und die Werkzeuge daneben
   springen nicht. Sichtbar ist das ohnehin nur fuer den Bruchteil einer
   Sekunde; der Zustand hier ist fuer den Fall, dass das Einsammeln der
   Stilvorlage beim ersten Mal kurz dauert. */
#ff-3d-foto.is-laeuft { pointer-events: none; }
/* Konnte nur die Szene aufgenommen werden, faerbt sich der Knopf einmal
   dezent ein — eine stille Fehlermeldung waere schlechter als ein Hinweis,
   den man sieht, ohne die Konsole zu oeffnen. */
#ff-3d-foto.is-teilweise { color: #B8860B; }