/* TOOB360 · toob360.com
 *
 * Gestaltung nach app.toob360.com (~/Toob360 Software/public/toob-auth.css):
 * Bühne #0a0a0a, Blatt #121212 mit goldenem Haarstrich, Gold #c9a84c,
 * Cormorant Garamond für Überschriften, DM Sans für alles andere, das
 * bewegte Zeichen, Drahtgitterkugel und driftende Goldschleier.
 *
 * Mobile first: der Grundzustand ist das Handy, alles Breitere kommt über
 * min-width dazu. Haltepunkte 40 / 48 / 64 / 80 rem. Keine max-width-Abfrage.
 *
 * SCHUTZREGELN, beim Neuschreiben mitnehmen (Playbook B47):
 *   [hidden] { display:none !important }                         B2
 *   figure { margin:0 }, Rundung ans img, nie an die figure      B4, A25
 *   Trefferflächen 44 px, auch Fuß und Menü                      A17, B38
 *   Raster mit minmax(0,1fr) / min(100%, …), Kinder min-width:0  B37, B41
 *   overflow-wrap: break-word, nicht anywhere                    B62
 *   waagerecht nur am body abschneiden, nie am html              B32
 *   Einblenden hängt an html.js, Reißleine im Skript             B1, B43
 *   Menü position:absolute unter dem Kopf, nicht fixed           B3
 *   Kopf flex-wrap:nowrap mit Skript, wrap ohne                  B45, B57
 *   scroll-margin-top an allen Sprungzielen                      B22, B59
 *   genau EIN position:fixed über dem Inhalt (die Leiste)        A15
 *   Schleier ist fixed: darüber nichts deckend auslaufen lassen  B61
 *   .nurvorlesen statt .invisible, Zustand heißt .ist-an/.auf    A5, A18
 */

@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 300 600; font-display: swap;
  src: url('../fonts/dmsans-latin.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300 500; font-display: swap;
  src: url('../fonts/cormorant-latin.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('../fonts/cormorant-italic-latin.woff2') format('woff2'); }

:root {
  --bg: #0a0a0a;
  --bg2: #111111;
  --bg3: #161616;
  --sheet: #121212;
  --field: #181818;
  --field-hi: #1d1d1d;
  --line: #222222;
  --field-line: #2a2a2a;
  --gold: #c9a84c;
  --gold-dim: #a8873a;
  --gold-rgb: 201, 168, 76;
  --ink: #f0dda6;
  --text: #f0f0f0;
  --lauf: #b8b8b8;     /* Fließtext, wie .bill-body im Portal            */
  --muted: #8a8a8a;    /* statt #666 der Plattform: 5,7:1 statt 3,5:1     */

  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'DM Sans', system-ui, -apple-system, sans-serif;

  --gut: 1rem;
  --breit: 72rem;
  --kopf: 4rem;
  --leiste: calc(3.75rem + env(safe-area-inset-bottom, 0px));
  --radius: 12px;
  --blatt-radius: 24px;
  --schatten: 0 -12px 32px rgba(0,0,0,.5), 0 16px 34px rgba(0,0,0,.45);
  --ease-out: cubic-bezier(.2,.75,.25,1);

  /* Rollen, die im Hellmodus anders belegt sind (Playbook B60) */
  --hover: var(--ink);                    /* Verweis beim Überfahren       */
  --auf-gold: #0a0a0a;                    /* Schrift auf goldener Fläche   */
  --auf-gold-zeichen: #4a3a05;            /* Zeichen im Absendeknopf       */
  --auf-bild: #f0f0f0;                    /* Schrift auf dunklem Glas überm Foto, in BEIDEN Modi */
  --glas: rgba(10,10,10,.82);             /* Kopfleiste                    */
  --glas-knopf: rgba(18,18,18,.85);
  --leiste-bg: rgba(17,17,17,.94);
  --fuss-bg: rgba(10,10,10,.6);
  --schatten-tief: 0 24px 40px rgba(0,0,0,.55);
  --portal-schatten: 0 30px 60px rgba(0,0,0,.6), 0 0 0 8px #0f0f0f, 0 0 0 9px var(--field-line);
  --blend: screen;
  --kugel: rgba(var(--gold-rgb), .09);
  --knauf: #d8d8d8;
  --fehler: #f3c4c3;
  --fehler-rgb: 239, 138, 136;
  --wort-filter: none;
  color-scheme: dark;
}

/* Hellmodus. Werte aus ~/Toob360 Software/public/theme.css und toob-auth.css,
   mit zwei Abweichungen: Gold als Schrift #7d6222 statt #9c7c2e (3,6:1 reicht
   für kleine Schrift nicht; gemessen mind. 4,66:1 auch auf den getönten
   Auswahlflächen) und Fließtext #44444a.
   Ohne gespeicherte Wahl folgt die Seite dem System, auch ohne Skript. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f5f5f7; --bg2: #ffffff; --bg3: #eeeef1; --sheet: #ffffff;
    --field: #f2f2f5; --field-hi: #ffffff; --line: #d7d7dc; --field-line: #dcdce1;
    --gold: #7d6222; --gold-dim: #654f16; --gold-rgb: 156, 124, 46; --ink: #e0c47a;
    --text: #1b1b1d; --lauf: #44444a; --muted: #6c6c72;
    --schatten: 0 -10px 26px rgba(20,16,4,.07), 0 14px 30px rgba(20,16,4,.10);
    --hover: #5e4a15; --auf-gold: #fffaf0; --auf-gold-zeichen: #fdf6e0;
    --glas: rgba(245,245,247,.85); --glas-knopf: rgba(255,255,255,.85);
    --leiste-bg: rgba(255,255,255,.95); --fuss-bg: rgba(238,238,241,.7);
    --schatten-tief: 0 24px 40px rgba(20,16,4,.12);
    --portal-schatten: 0 30px 60px rgba(20,16,4,.18), 0 0 0 8px #ffffff, 0 0 0 9px var(--field-line);
    --blend: multiply; --kugel: rgba(var(--gold-rgb), .16); --knauf: #ffffff;
    --fehler: #8c1d18; --fehler-rgb: 179, 38, 30;
    --wort-filter: brightness(.7) saturate(1.2);
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --bg: #f5f5f7; --bg2: #ffffff; --bg3: #eeeef1; --sheet: #ffffff;
  --field: #f2f2f5; --field-hi: #ffffff; --line: #d7d7dc; --field-line: #dcdce1;
  --gold: #7d6222; --gold-dim: #654f16; --gold-rgb: 156, 124, 46; --ink: #e0c47a;
  --text: #1b1b1d; --lauf: #44444a; --muted: #6c6c72;
  --schatten: 0 -10px 26px rgba(20,16,4,.07), 0 14px 30px rgba(20,16,4,.10);
  --hover: #5e4a15; --auf-gold: #fffaf0; --auf-gold-zeichen: #fdf6e0;
  --glas: rgba(245,245,247,.85); --glas-knopf: rgba(255,255,255,.85);
  --leiste-bg: rgba(255,255,255,.95); --fuss-bg: rgba(238,238,241,.7);
  --schatten-tief: 0 24px 40px rgba(20,16,4,.12);
  --portal-schatten: 0 30px 60px rgba(20,16,4,.18), 0 0 0 8px #ffffff, 0 0 0 9px var(--field-line);
  --blend: multiply; --kugel: rgba(var(--gold-rgb), .16); --knauf: #ffffff;
  --fehler: #8c1d18; --fehler-rgb: 179, 38, 30;
  --wort-filter: brightness(.7) saturate(1.2);
  color-scheme: light;
}

/* ------------------------------------------------------------ Grundlagen */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
[hidden] { display: none !important; }
figure { margin: 0; }
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--bg);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  min-height: 100dvh;
  background: var(--bg);
  color: var(--lauf);
  font-family: var(--sans);
  font-weight: 350;
  font-size: 1rem;
  line-height: 1.65;
  overflow-wrap: break-word;
  overflow-x: hidden;
  overflow-x: clip;
  padding-bottom: var(--leiste);
}

[id]:not(body):not(html) { scroll-margin-top: calc(var(--kopf) + 1.25rem); }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--text);
  letter-spacing: .02em;
  line-height: 1.12;
  font-variant-numeric: lining-nums;
  text-wrap: balance;
}
h1 { font-size: clamp(2.3rem, 1.6rem + 3.4vw, 4.2rem); font-weight: 300; }
h2 { font-size: clamp(1.9rem, 1.5rem + 1.8vw, 2.9rem); font-weight: 300; }
h3 { font-size: 1.4rem; }

p { max-width: 38rem; }
a { color: var(--gold); text-underline-offset: .2em; }
a:hover { color: var(--hover); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
::selection { background: rgba(var(--gold-rgb), .35); color: #fff; }

.nurvorlesen {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.sprung {
  position: absolute; left: var(--gut); top: -5rem; z-index: 60;
  min-height: 44px; display: inline-flex; align-items: center; padding: 0 1rem;
  background: var(--gold); color: var(--auf-gold); border-radius: 10px; text-decoration: none;
}
.sprung:focus { top: .75rem; color: var(--auf-gold); }

.ikon { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor;
        stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.huelle { width: min(100% - 2 * var(--gut), var(--breit)); margin-inline: auto; }

/* Die kleine Versalzeile der Plattform („VIRTUAL TOUR PLATFORM") */
.tag {
  font-size: .72rem; letter-spacing: .28em; text-transform: uppercase;
  color: var(--muted); line-height: 1.5; font-weight: 400;
}
.tag--gold { color: var(--gold); }

/* Beim Umschalten die Farben überblenden, nicht springen. Nur während des
   Wechsels, sonst verlangsamt es jeden Hover. */
html.wechselt *, html.wechselt *::before { transition: background-color .3s, color .3s, border-color .3s, fill .3s, stroke .3s !important; }

/* ------------------------------------------------------------ Schleier
 * Drei weiche Goldlichter wie in der Anmeldung. Nur transform wird bewegt. */
.schleier { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.schleier i {
  position: absolute; display: block; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle closest-side,
              rgba(var(--gold-rgb), .5) 0%, rgba(var(--gold-rgb), .18) 45%, rgba(var(--gold-rgb), 0) 100%);
  mix-blend-mode: var(--blend);
  transform: translate(-50%, -50%);
  will-change: transform;
}
.schleier i:nth-child(1) { left: 28%; top: 14%; width: min(160vw, 1100px); opacity: .22; animation: drift1 19s ease-in-out infinite; }
.schleier i:nth-child(2) { left: 80%; top: 30%; width: min(124vw, 900px);  opacity: .13; animation: drift2 27s ease-in-out infinite; }
.schleier i:nth-child(3) { left: 50%; top: 86%; width: min(150vw, 1000px); opacity: .10; animation: drift3 33s ease-in-out infinite; }
@keyframes drift1 { 0%,100% { transform: translate(-50%,-50%); } 33% { transform: translate(-36%,-44%); } 66% { transform: translate(-61%,-55%); } }
@keyframes drift2 { 0%,100% { transform: translate(-50%,-50%); } 40% { transform: translate(-62%,-56%); } 70% { transform: translate(-41%,-45%); } }
@keyframes drift3 { 0%,100% { transform: translate(-50%,-50%); } 35% { transform: translate(-63%,-43%); } 75% { transform: translate(-38%,-57%); } }

/* ------------------------------------------------------------ Das Zeichen */

.zeichen { position: relative; display: block; width: var(--z, 40px); aspect-ratio: 1; flex: none; }
.zeichen > span, .zeichen > svg, .zeichen span span { position: absolute; inset: 0; display: block; }
.zeichen svg { width: 100%; height: 100%; }
.tm-ring { fill: var(--gold); }
.tm-inf { fill: none; stroke: var(--gold); stroke-linecap: round; }
.tm-idle { animation: tm-turn 24s linear infinite; }
.tm-in { animation: tm-in 1.1s cubic-bezier(.22,1.28,.52,1) backwards; }
.tm-base { stroke-width: 3.4; opacity: .85; stroke-dasharray: 100; stroke-dashoffset: 100;
           animation: tm-draw 1.1s cubic-bezier(.22,.9,.3,1) both; }
.tm-dot { stroke-width: 2.1; stroke: var(--ink); opacity: .95; stroke-dasharray: 2 98;
          animation: tm-run 2.6s cubic-bezier(.4,.25,.6,.75) calc(var(--i) * .055s - 2.6s) infinite,
                     tm-dots-in .45s ease .3s backwards; }
.ohne-auftakt .tm-in { animation: none; }
.ohne-auftakt .tm-base { animation: none; stroke-dashoffset: 0; }
@keyframes tm-turn { to { transform: rotate(360deg); } }
@keyframes tm-in { from { transform: rotate(-95deg); } }
@keyframes tm-draw { to { stroke-dashoffset: 0; } }
@keyframes tm-run { to { stroke-dashoffset: -100; } }
@keyframes tm-dots-in { from { opacity: 0; } }

/* Zeichen + Schriftzug in den Proportionen der Originaldatei (toob-auth.css) */
.lockup { --mh: 26px; display: inline-flex; align-items: center; gap: calc(var(--mh) * .1347); }
.lockup .zeichen { --z: calc(var(--mh) * 1.2821); }
.lockup__wort { height: calc(var(--mh) * .6985); width: auto; aspect-ratio: 648 / 95; filter: var(--wort-filter); }
.lockup--gross { --mh: 44px; }

/* ------------------------------------------------------------ Knöpfe */

.knopfreihe { display: flex; flex-wrap: wrap; gap: .75rem; max-width: none; }

.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 52px; padding: 0 1.4rem;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dim) 100%);
  color: var(--auf-gold); border: 0; border-radius: 10px;
  font-size: .76rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap;
  box-shadow: 0 8px 22px rgba(var(--gold-rgb), .16);
  transition: filter .18s, transform .12s;
}
.knopf:hover { color: var(--auf-gold); filter: brightness(1.07); }
.knopf:active { transform: scale(.985); }
.knopf--breit { width: 100%; }
.knopf--geist {
  background: rgba(var(--gold-rgb), .10); color: var(--gold);
  border: 1px solid rgba(var(--gold-rgb), .30); box-shadow: none;
}
.knopf--geist:hover { color: var(--hover); background: rgba(var(--gold-rgb), .18); filter: none; }

/* Knopf zieht sich beim Absenden zum Kreis mit drehendem Zeichen zusammen */
.knopf.ist-busy { width: 52px !important; padding: 0; border-radius: 26px; transition: width .5s cubic-bezier(.3,1.05,.4,1), border-radius .5s; }
.knopf.ist-busy .knopf__wort { opacity: 0; }
.knopf .zeichen { --z: 30px; position: absolute; opacity: 0; }
.knopf { position: relative; }
.knopf.ist-busy .zeichen { opacity: 1; }
.knopf.ist-busy .tm-ring { fill: var(--auf-gold-zeichen); }
.knopf.ist-busy .tm-inf { stroke: var(--auf-gold-zeichen); }

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

.kopf {
  position: sticky; top: 0; z-index: 40;
  background: var(--glas);
  border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: saturate(1.2) blur(14px);
  backdrop-filter: saturate(1.2) blur(14px);
}
.kopf__in {
  position: relative;
  width: min(100% - 2 * var(--gut), var(--breit)); margin-inline: auto;
  min-height: var(--kopf);
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
}
html.js .kopf__in { flex-wrap: nowrap; height: var(--kopf); }
.kopf__marke { display: flex; align-items: center; min-height: 44px; margin-right: auto; min-width: 0; }
.kopf__marke .lockup { --mh: 24px; }

.kopf__sprache, .kopf__menue {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  min-width: 44px; height: 44px; padding: 0 .6rem;
  border: 1px solid var(--field-line); border-radius: 10px;
  background: var(--glas-knopf); color: var(--muted);
  font-size: .76rem; letter-spacing: .08em; text-decoration: none;
  transition: border-color .15s, color .15s;
}
.kopf__modus { display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 44px; height: 44px; border: 1px solid var(--field-line); border-radius: 10px;
  background: var(--glas-knopf); color: var(--gold); transition: border-color .15s; }
.kopf__modus:hover { border-color: var(--gold); }
.kopf__modus .ikon { width: 18px; height: 18px; }
.kopf__modus .ikon--mond { display: none; }
:root[data-theme="light"] .kopf__modus .ikon--sonne { display: none; }
:root[data-theme="light"] .kopf__modus .ikon--mond { display: block; }
.kopf__sprache:hover, .kopf__menue:hover, .kopf__modus:hover { color: var(--text); border-color: var(--gold); }
.kopf__menue .ikon { width: 20px; height: 20px; }
.kopf__menue .ikon:nth-of-type(2) { display: none; }
.kopf__menue[aria-expanded="true"] .ikon:nth-of-type(1) { display: none; }
.kopf__menue[aria-expanded="true"] .ikon:nth-of-type(2) { display: block; }

/* Navigation: ohne Skript eine offene Zeile, mit Skript ein Ausklappblatt */
.nav { order: 5; width: 100%; padding-bottom: .5rem; }
.nav__liste { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem; }
.nav__link, .nav__portal {
  display: flex; align-items: center; gap: .6rem; min-height: 44px; padding: 0 .75rem;
  color: var(--text); text-decoration: none; border-radius: 10px; font-size: .95rem;
}
.nav__link:hover, .nav__portal:hover { color: var(--gold); background: var(--bg3); }
.nav__link.ist-hier { color: var(--gold); }
.nav__portal { color: var(--gold); }

html.js .nav {
  position: absolute; top: calc(100% + 1px); left: calc(-1 * var(--gut)); right: calc(-1 * var(--gut));
  width: auto; padding: .75rem var(--gut) 1.25rem;
  background: var(--bg2); border-bottom: 1px solid var(--line);
  box-shadow: var(--schatten-tief);
  opacity: 0; transform: translateY(-8px); visibility: hidden;
  transition: opacity .22s var(--ease-out), transform .22s var(--ease-out), visibility 0s .22s;
}
html.js .nav.auf { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
html.js .nav__liste { flex-direction: column; }
html.js .nav__link { font-size: 1.05rem; border-bottom: 1px solid var(--line); border-radius: 0; min-height: 52px; }
html.js .nav__portal { margin-top: .75rem; justify-content: center; border: 1px solid rgba(var(--gold-rgb), .3);
                       background: rgba(var(--gold-rgb), .08); min-height: 48px; }

/* ------------------------------------------------------------ Blatt und Zeilen */

.blatt {
  position: relative;
  background: var(--sheet);
  border-radius: var(--blatt-radius);
  padding: 1.5rem 1.1rem;
  box-shadow: var(--schatten);
}
/* goldener Haarstrich an der Oberkante, nach unten auslaufend */
.blatt::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(to bottom, rgba(var(--gold-rgb), .30), transparent 55%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}

.zeilen { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.zeile {
  display: flex; align-items: center; gap: 14px; min-height: 64px;
  padding: 12px 14px; border-radius: var(--radius);
  background: var(--field); border: 1px solid var(--field-line);
  color: var(--text); text-decoration: none; min-width: 0;
  transition: border-color .18s, background .18s, transform .12s;
}
.zeile:hover { color: var(--text); background: var(--field-hi); border-color: rgba(var(--gold-rgb), .45); }
.zeile:active { transform: scale(.99); }
.zeile__ikon, .schritt__ikon, .haken__ikon {
  flex: none; width: 38px; height: 38px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; color: var(--gold);
  background: rgba(var(--gold-rgb), .09); border: 1px solid rgba(var(--gold-rgb), .22);
}
.zeile__ikon .ikon { width: 17px; height: 17px; }
.zeile__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.zeile__titel { font-size: .95rem; font-weight: 500; letter-spacing: .01em; }
.zeile__sub { font-size: .76rem; color: var(--muted); letter-spacing: .03em; margin-top: .1rem; }
.zeile__pfeil { flex: none; color: var(--muted); display: flex; transition: color .18s, transform .18s; }
.zeile:hover .zeile__pfeil { color: var(--gold); transform: translateX(2px); }

/* ------------------------------------------------------------ Einblenden
 * wie .ta-in der Plattform, nur im Kopf der Startseite. Ohne Skript sichtbar. */
html.js .an { animation: an .8s var(--ease-out) var(--d, 0s) backwards; }
@keyframes an { from { opacity: 0; transform: translateY(18px); filter: blur(6px); } }

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

.held { position: relative; text-align: center; padding: 3rem 0 2.5rem; overflow: hidden; overflow: clip; }
.held__in { position: relative; width: min(100% - 2 * var(--gut), 50rem); margin-inline: auto;
            display: flex; flex-direction: column; align-items: center; }
.held__tag { margin-top: 1rem; }
.held__titel { margin-top: 1.5rem; }
.held__text { margin: 1.1rem auto 0; font-size: 1.05rem; max-width: 34rem; }
.held__knoepfe { justify-content: center; margin-top: 1.75rem; }
.held__knoepfe .knopf { flex: 1 1 15rem; }

.kugel {
  position: absolute; left: 50%; top: 7.5rem;
  width: min(560px, 140vw); aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: kugel-an 1.6s ease-out backwards;
}
@keyframes kugel-an { from { opacity: 0; transform: translate(-50%,-50%) scale(.82); } }
.kugel svg { width: 100%; height: 100%; overflow: visible; }
.kugel ellipse { fill: none; stroke: var(--kugel); stroke-width: 1; vector-effect: non-scaling-stroke; }
.kugel .sp-mer { transform-box: fill-box; transform-origin: 50% 50%;
  animation: sp-breit 30s linear infinite, sp-vorn 60s linear infinite;
  animation-delay: calc(var(--i) * -3.75s), calc(var(--i) * -3.75s); }
.kugel .sp-lat { opacity: .55; }
@keyframes sp-breit {
  0% { transform: scaleX(1); } 12.5% { transform: scaleX(.924); } 25% { transform: scaleX(.707); }
  37.5% { transform: scaleX(.383); } 50% { transform: scaleX(.004); } 62.5% { transform: scaleX(.383); }
  75% { transform: scaleX(.707); } 87.5% { transform: scaleX(.924); } 100% { transform: scaleX(1); } }
@keyframes sp-vorn { 0% { opacity: .45; } 25% { opacity: 1; } 50% { opacity: .45; } 100% { opacity: .45; } }

/* ------------------------------------------------------------ Bänder */

.band { padding: 3.5rem 0; }
.band--tour { padding-top: .5rem; }
.band h2 { margin-top: .6rem; }
.band h2 + p, .zwei__kopf p { margin-top: 1rem; }

.zwei { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
.zwei > * { min-width: 0; }

/* ------------------------------------------------------------ Rundgang
 * Der echte Viewer von app.toob360.com im iframe. Das Portal gibt height=600px
 * aus; am Handy wäre das fast der ganze Bildschirm, und wer darin wischt, dreht
 * den Rundgang statt die Seite zu scrollen. Deshalb hier kleiner, erst
 * breiter dann die 600 px aus dem Einbettungscode. Am Handy 4:5: höher als
 * quadratisch, damit die Bedienelemente des Viewers Platz haben, aber mit genug
 * Rand im Blatt, an dem man die Seite weiterschieben kann. */

.blatt--tour { display: flex; flex-direction: column; gap: 1.25rem;
               animation: blatt-an .9s cubic-bezier(.19,1.05,.34,1) .06s backwards; }
@keyframes blatt-an { from { transform: translateY(12%); opacity: 0; } }
.blatt__kopf h2 { font-size: clamp(1.7rem, 1.4rem + 1.4vw, 2.4rem); }
.blatt__kopf p:last-child { margin-top: .75rem; }

.tour { position: relative; aspect-ratio: 4 / 5; border-radius: 16px; overflow: hidden;
        background: #050505; border: 1px solid var(--line); }
.tour__rahmen { position: absolute; inset: 0; width: 100%; height: 100% !important; display: block; }

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

.schritte { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; counter-reset: s; }
.schritt { display: flex; gap: 14px; align-items: flex-start; padding: 1rem 1rem 1.1rem;
           background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius); }
.schritt__text { min-width: 0; }
.schritt__nr { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold);
               font-variant-numeric: tabular-nums; }
.schritt h3 { margin-top: .2rem; font-size: 1.35rem; }
.schritt h3 + p { margin-top: .35rem; font-size: .95rem; }

/* ------------------------------------------------------------ Portal */

.portal { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
.portal > * { min-width: 0; }
.portal__bild { width: min(72vw, 20rem); margin-inline: auto; order: 2; }
.portal__foto img { border-radius: 30px; border: 1px solid var(--field-line);
                    box-shadow: var(--portal-schatten); }
.haken { list-style: none; padding: 0; margin: 1.5rem 0; display: grid; gap: .6rem; }
.haken li { display: flex; align-items: center; gap: .75rem; color: var(--text); font-size: .95rem; }
.haken__ikon { width: 28px; height: 28px; border-radius: 8px; }
.haken__ikon .ikon { width: 14px; height: 14px; }

/* ------------------------------------------------------------ Einsatz */

.einsatz { display: grid; }
.einsatz > div { padding: 1.25rem 0; border-top: 1px solid var(--line); }
.einsatz > div:last-child { border-bottom: 1px solid var(--line); }
.einsatz dt { font-family: var(--serif); font-size: 1.5rem; color: var(--text); line-height: 1.2; }
.einsatz dd { margin: .4rem 0 0; max-width: 36rem; }

/* ------------------------------------------------------------ Preis */

.blatt--preis { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
.blatt--preis > * { min-width: 0; }
.betrag { background: var(--field); border: 1px solid var(--field-line); border-radius: 18px; padding: 1.25rem; }
.betrag__zahl { font-family: var(--sans); font-weight: 300; font-size: clamp(2.6rem, 2rem + 3vw, 3.6rem);
                line-height: 1.1; color: var(--text); margin-top: .35rem; font-variant-numeric: tabular-nums lining-nums;
                letter-spacing: -.01em; }
.betrag__klein { font-size: .8rem; color: var(--muted); }
.betrag__liste { margin: 1rem 0 1.25rem; display: grid; }
.betrag__liste div { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0;
                     border-top: 1px solid var(--field-line); font-size: .9rem; }
.betrag__liste dt { color: var(--muted); }
.betrag__liste dd { margin: 0; color: var(--text); text-align: right; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ Fuß */

.fuss { border-top: 1px solid var(--line); margin-top: 2rem; padding: 2.5rem 0 1.5rem; background: var(--fuss-bg); }
.fuss__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
.fuss__claim { margin-top: .9rem; color: var(--lauf); font-size: .92rem; }
.fuss__adresse { margin-top: .6rem; color: var(--muted); font-size: .88rem; line-height: 1.6; }
.fuss__links { list-style: none; padding: 0; display: grid; }
.fuss__links a { display: flex; align-items: center; min-height: 44px; color: var(--lauf); text-decoration: none; font-size: .92rem; }
.fuss__links a:hover { color: var(--gold); }
.fuss__nurde { color: var(--muted); font-size: .8rem; margin-left: .3rem; }
.fuss__zeile { text-align: center; margin: 2rem auto 0; font-size: .64rem; letter-spacing: .22em;
               text-transform: uppercase; color: var(--muted); }

/* ------------------------------------------------------------ Leiste unten (Handy) */

.leiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  height: var(--leiste); padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px;
  background: var(--leiste-bg); border-top: 1px solid rgba(var(--gold-rgb), .25);
  border-radius: 18px 18px 0 0;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.leiste__zelle {
  display: flex; align-items: center; justify-content: center; gap: .5rem; min-width: 0;
  border-radius: 12px; color: var(--text); text-decoration: none;
  font-size: .8rem; letter-spacing: .06em; font-weight: 500; line-height: 1.2;
  border: 1px solid var(--field-line); background: var(--field);
}
.leiste__zelle .ikon { color: var(--gold); }
.leiste__zelle--gold { background: linear-gradient(135deg, var(--gold), var(--gold-dim)); color: var(--auf-gold); border: 0; }
.leiste__zelle--gold .ikon { color: var(--auf-gold); }
.leiste__zelle--gold:hover { color: var(--auf-gold); }
.leiste__betrag { display: flex; flex-direction: column; justify-content: center; padding-left: .5rem; min-width: 0; }
.leiste__betrag small { font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.leiste__betrag strong { font-weight: 400; font-size: 1.3rem; color: var(--text); font-variant-numeric: tabular-nums; line-height: 1.15; }

/* ------------------------------------------------------------ Seitenkopf Unterseiten */

.kopfband { padding: 2.75rem 0 1.5rem; }
.kopfband h1 { margin-top: .75rem; font-size: clamp(2.2rem, 1.6rem + 2.6vw, 3.6rem); }
.kopfband p:not(.tag) { margin-top: 1rem; font-size: 1.05rem; }

.fliesstext h2 { font-size: 1.6rem; margin: 2.25rem 0 .75rem; }
.fliesstext p + p { margin-top: .8rem; }
.fliesstext strong { color: var(--text); font-weight: 500; }

/* ------------------------------------------------------------ Rechner */

.band--rechner { padding-top: 0; }
.rechner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.rechner > *, .rechner__spalte > * { min-width: 0; }
.rechner__spalte { display: grid; gap: 1rem; }
.feldblock { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: .9rem; }
.feldblock legend { padding: 0; margin-bottom: .9rem; }
.feldblock__lauf { font-size: .9rem; color: var(--muted); }
.feldkopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .25rem 1rem; }
.feldkopf__wort { color: var(--text); font-weight: 500; }
.feldkopf__wert { color: var(--gold); white-space: nowrap; font-variant-numeric: tabular-nums; }

#wohnungen { display: grid; gap: .75rem; }
.wohnung { background: var(--field); border: 1px solid var(--field-line); border-radius: var(--radius); padding: .9rem; display: grid; gap: .6rem; }
.wohnung__kopf { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 44px; }
.wohnung__name { font-family: var(--serif); font-size: 1.3rem; color: var(--text); font-variant-numeric: lining-nums; }
.wohnung__weg { min-height: 44px; padding: 0 .75rem; background: none; border: 1px solid var(--field-line);
                border-radius: 10px; color: var(--muted); font-size: .8rem; }
.wohnung__weg:hover { color: var(--text); border-color: var(--gold); }
.wohnung__marke { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.schieberreihe { display: flex; align-items: center; gap: .6rem; }
.wohnung__einheit { color: var(--muted); font-size: .9rem; }
.zahlfeld { width: 5.5rem; min-height: 44px; padding: 0 .6rem; background: var(--bg2); border: 1px solid var(--field-line);
            border-radius: 10px; color: var(--text); font-variant-numeric: tabular-nums; text-align: right; }
.zahlfeld:focus { border-color: var(--gold); outline: none; }

.schieber { flex: 1; min-width: 0; height: 44px; background: none; -webkit-appearance: none; appearance: none; accent-color: var(--gold); }
.schieber::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: rgba(var(--gold-rgb), .35); }
.schieber::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -10px; border-radius: 50%;
  background: var(--gold); border: 3px solid var(--sheet); box-shadow: 0 0 0 1px var(--gold), 0 4px 12px rgba(0,0,0,.3); }
.schieber::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(var(--gold-rgb), .35); }
.schieber::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--gold); border: 3px solid var(--sheet); }

.punkte { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .4rem; }
.punkte button, .zaehler__knopf {
  min-height: 44px; border-radius: 10px; background: var(--bg2); border: 1px solid var(--field-line);
  color: var(--lauf); font-variant-numeric: tabular-nums; }
.punkte button.ist-an { background: rgba(var(--gold-rgb), .14); border-color: rgba(var(--gold-rgb), .6); color: var(--gold); }

.wahl { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; }
.wahl--vier { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wahl__opt { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; min-height: 56px;
             padding: .6rem .9rem; text-align: left; border-radius: var(--radius);
             background: var(--field); border: 1px solid var(--field-line); transition: border-color .15s, background .15s; }
.wahl__opt:hover { border-color: rgba(var(--gold-rgb), .45); }
.wahl__opt.ist-an { background: rgba(var(--gold-rgb), .10); border-color: rgba(var(--gold-rgb), .6); }
.wahl__name { color: var(--text); font-weight: 500; }
.wahl__opt.ist-an .wahl__name { color: var(--gold); }
.wahl__unter { font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; }

.schalterreihe { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.schalterreihe__wort { color: var(--text); }
.schalterreihe__unter { font-size: .85rem; color: var(--muted); }
.schalter { flex: none; position: relative; width: 56px; height: 44px; background: none; border: 0; }
.schalter::before { content: ''; position: absolute; left: 4px; right: 4px; top: 10px; height: 24px; border-radius: 12px;
                    background: var(--field-line); transition: background .2s; }
.schalter::after { content: ''; position: absolute; left: 7px; top: 13px; width: 18px; height: 18px; border-radius: 50%;
                   background: var(--knauf); transition: transform .25s cubic-bezier(.3,1.3,.4,1), background .2s; }
.schalter[aria-checked="true"]::before { background: var(--gold); }
.schalter[aria-checked="true"]::after { transform: translateX(24px); background: var(--auf-gold); }

.zaehler { display: flex; align-items: center; gap: .6rem; }
.zaehler__wort { flex: 1; color: var(--text); }
.zaehler__wort--klein { color: var(--muted); font-size: .82rem; line-height: 1.4; }
.zaehler__knopf { width: 44px; font-size: 1.2rem; }
.zaehler__wert { min-width: 2ch; text-align: center; color: var(--gold); font-size: 1.2rem; font-variant-numeric: tabular-nums; }

.ergebnis .betrag__liste { margin-bottom: 1.25rem; }

/* ------------------------------------------------------------ Formular */

.formular { display: grid; gap: 12px; }
.honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.feld { position: relative; display: flex; align-items: center; gap: 12px; min-height: 60px;
        padding: 9px 12px; background: var(--field); border: 1px solid var(--field-line); border-radius: 10px;
        cursor: text; transition: background .25s, box-shadow .35s, border-color .25s; }
.feld--lang { align-items: flex-start; }
.feld--lang .feld__ikon { margin-top: 4px; }
.feld:focus-within { background: var(--field-hi); border-color: rgba(var(--gold-rgb), .7);
                     box-shadow: 0 0 18px rgba(var(--gold-rgb), .16); }
.feld__ikon { flex: none; width: 18px; color: var(--muted); display: flex; transition: color .25s, transform .35s cubic-bezier(.3,1.2,.4,1); }
.feld:focus-within .feld__ikon { color: var(--gold); transform: scale(1.08); }
.feld__rumpf { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.feld__label { font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); transition: color .25s; }
.feld:focus-within .feld__label { color: var(--gold); }
.feld input, .feld textarea { width: 100%; background: none; border: 0; outline: none; color: var(--text);
                               font-size: 1rem; padding: 2px 0; resize: vertical; }
.feld textarea { min-height: 6rem; line-height: 1.5; }
.formular__hinweis { font-size: .8rem; color: var(--muted); }
.formular .knopf { margin-top: .5rem; }
.meldung { display: flex; gap: .6rem; align-items: flex-start; padding: .9rem 1rem; border-radius: 12px; margin-bottom: 1rem; max-width: none; }
.meldung--gut { background: rgba(var(--gold-rgb), .08); border: 1px solid rgba(var(--gold-rgb), .35); color: var(--text); }
.meldung--gut .ikon { color: var(--gold); margin-top: 3px; }
.meldung--schlecht { background: rgba(var(--fehler-rgb), .07); border: 1px solid rgba(var(--fehler-rgb), .4); color: var(--fehler); }
.meldung--block { flex-direction: column; }
.zeilen--kontakt { margin-top: 1.5rem; }

/* ============================================================ ab 40 rem */
@media (min-width: 40rem) {
  :root { --gut: 1.5rem; --blatt-radius: 30px; }
  .blatt { padding: 2rem; }
  .tour { aspect-ratio: 16 / 10; }
  .lockup--gross { --mh: 60px; }
  .held { padding: 4.5rem 0 3.5rem; }
  .kugel { top: 9rem; }
  .held__knoepfe .knopf { flex: 0 0 auto; }
  .fuss__in { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); }
  .leiste { grid-auto-columns: minmax(0, 15rem); justify-content: center; }
}

/* ============================================================ ab 48 rem */
@media (min-width: 48rem) {
  .band { padding: 5rem 0; }
  .portal { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); align-items: center; gap: 4rem; }
  .portal__bild { width: 100%; }
  .blatt--preis { grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); align-items: center; gap: 3rem; padding: 2.5rem; }
  .wahl { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wahl--vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .portal__bild { order: 0; }
}

/* ============================================================ ab 64 rem */
@media (min-width: 64rem) {
  :root { --kopf: 4.5rem; --leiste: 0px; }
  body { padding-bottom: 0; }
  .leiste { display: none; }

  html.js .kopf__menue { display: none !important; }
  .nav, html.js .nav {
    position: static; order: 0; width: auto; padding: 0; margin-right: .5rem;
    display: flex; align-items: center; gap: .5rem;
    background: none; border: 0; box-shadow: none;
    opacity: 1; transform: none; visibility: visible;
  }
  .kopf__in { flex-wrap: nowrap; height: var(--kopf); }
  html.js .nav__liste, .nav__liste { flex-direction: row; gap: 0; }
  html.js .nav__link, .nav__link { font-size: .9rem; border: 0; border-radius: 10px; min-height: 44px; }
  html.js .nav__portal, .nav__portal { margin: 0 0 0 .5rem; min-height: 44px; font-size: .85rem;
    border: 1px solid rgba(var(--gold-rgb), .3); background: rgba(var(--gold-rgb), .08); }

  .zwei { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4rem; align-items: start; }
  .zwei__kopf { position: sticky; top: calc(var(--kopf) + 2rem); }
  .rechner { grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); gap: 1.5rem; align-items: start; }
  .ergebnis { position: sticky; top: calc(var(--kopf) + 1.5rem); }
  .schritt { padding: 1.25rem 1.4rem; }
  .blatt--tour { padding: 2.5rem; }
  .tour { aspect-ratio: auto; height: 600px; }   /* wie im Einbettungscode */
  .lockup--gross { --mh: 68px; }
}

/* ============================================================ ab 80 rem */
@media (min-width: 80rem) {
  .held { padding-top: 5.5rem; }
}

/* ------------------------------------------------------------ Weniger Bewegung */
@media (prefers-reduced-motion: reduce) {
  .tm-idle, .tm-in, .kugel, .schleier i, .blatt--tour, html.js .an { animation: none !important; }
  .tm-base { animation: none; stroke-dashoffset: 0; }
  .tm-dot { display: none; }
  .kugel .sp-mer { animation-play-state: paused; }
  html.js .nav { transition: none; }
}