/* Die Startansicht zeigt das ruhende Modell. Bedienung wird bewusst geöffnet. */
.kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--abstand-3); padding-block: var(--abstand-4); }
.marke { display: inline-flex; align-items: center; gap: var(--abstand-2); text-decoration: none; font-size: var(--groesse-lead); font-weight: 650; letter-spacing: -.04em; }
.marke svg { width: var(--marke-icon); height: var(--marke-icon); fill: none; stroke: var(--akzent); stroke-width: 1.6; }
.kopf-nav { display: flex; align-items: center; gap: var(--abstand-3); }
.hero { display: grid; grid-template-columns: var(--hero-spalten); gap: var(--abstand-4); align-items: center; padding-block: var(--abstand-5) var(--abstand-6); }
.hero-text { position: relative; z-index: 1; padding-block: var(--abstand-4); }
.punkt { width: var(--abstand-2); height: var(--abstand-2); background: var(--akzent); border-radius: 50%; }
h1 { margin: var(--abstand-4) 0; font-size: var(--groesse-titel); font-weight: var(--gewicht-titel); line-height: 1.02; letter-spacing: -.065em; color: var(--text-stark); }
h1 span { display: block; }
.titel-zweit { color: var(--text-leise); }
.lead { max-width: var(--textbreite); font-size: var(--groesse-lead); line-height: 1.6; margin-block: var(--abstand-4); }
.entdecken { margin-top: var(--abstand-2); gap: var(--abstand-4); }
.hero-fussnote { color: var(--text-leise); font-size: var(--groesse-winzig); margin-top: var(--abstand-3); }
.modell { position: relative; margin: 0; min-width: 0; height: var(--modell-hoehe); border-radius: var(--radius); background: radial-gradient(ellipse at 50% 44%, var(--modell-schein), var(--modell-grund) 72%); isolation: isolate; }
.modell::before, .modell::after { content: ''; position: absolute; inset: var(--abstand-4); border: var(--kante) solid var(--linie); border-radius: 50%; opacity: .45; transform: rotate(-30deg) scaleY(.63); pointer-events: none; }
.modell::after { inset: var(--abstand-6); }
.modell-kopf, .modell-fuss { position: absolute; z-index: 2; left: var(--abstand-4); right: var(--abstand-4); display: flex; align-items: center; gap: var(--abstand-2); color: var(--text-stark); }
.modell-kopf { top: var(--abstand-3); justify-content: space-between; }
.modell-wort { font-size: var(--groesse-lead); font-weight: 600; letter-spacing: -.04em; }
.modell-art { font-size: var(--groesse-winzig); color: var(--text-leise); }
.modell-flaeche { position: absolute; inset: var(--abstand-4) 0; z-index: 1; }
.standbild { width: 100%; height: 100%; object-fit: contain; display: block; }
.modell-flaeche canvas { display: block; width: 100%; height: 100%; touch-action: pan-y; }
.modell-flaeche canvas:active { cursor: grabbing; }
.modell-fuss { bottom: var(--abstand-3); font-size: var(--groesse-winzig); }
.modell-fuss > :last-child { margin-left: auto; }
.feine-linie { width: var(--abstand-4); height: var(--kante); background: var(--text-leise); }
.modell-meldung { position: absolute; z-index: 3; bottom: var(--abstand-6); margin-inline: var(--abstand-3); padding: var(--abstand-2) var(--abstand-3); background: var(--flaeche); color: var(--text-stark); border-radius: var(--radius-klein); font-size: var(--groesse-klein); box-shadow: var(--schatten); }
.lagen-schilder { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.lagen-schild { position: absolute; font: 600 var(--groesse-winzig)/1.5 var(--schrift-zahl); padding: var(--abstand-1) var(--abstand-2); background: var(--flaeche); color: var(--lagenfarbe); border-left: var(--fokus) solid currentColor; border-radius: var(--radius-klein); white-space: nowrap; transform: translateY(-50%); }
.lagen-schild[data-aktiv="true"] { outline: var(--kante) solid currentColor; }
.modell-bedienung { padding-bottom: var(--abstand-5); }
.bedienung-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: var(--abstand-3); flex-wrap: wrap; border-top: var(--kante) solid var(--linie); padding-top: var(--abstand-4); }
.bedienung-kopf h2 { margin: var(--abstand-2) 0; font-size: var(--groesse-abschnitt); color: var(--text-stark); font-weight: 500; letter-spacing: -.04em; }
#kamera-zustand { color: var(--text-leise); font-size: var(--groesse-klein); }
.bedienung-raster { display: grid; grid-template-columns: 1fr 1fr; gap: var(--abstand-5); }
.stapel-bedienung label { display: block; }
#lagen-abstand { width: 100%; min-height: var(--knopfhoehe); accent-color: var(--akzent); }
.lagenwahl { display: flex; flex-wrap: wrap; gap: var(--abstand-2); }
.lagenwahl button { border-left: var(--fokus) solid var(--lagenfarbe); }
.kamera-bedienung { display: grid; align-content: start; gap: var(--abstand-3); }
.ziel-abschnitt { display: grid; grid-template-columns: var(--hero-spalten); gap: var(--abstand-5); padding-block: var(--abstand-5) var(--abstand-6); border-top: var(--kante) solid var(--linie); }
.ziel-kopf h2 { font-size: var(--groesse-abschnitt); font-weight: 500; line-height: 1.15; letter-spacing: -.04em; color: var(--text-stark); max-width: var(--textbreite); margin-block: var(--abstand-3); }
.ziel-inhalt > p { margin: 0 0 var(--abstand-4); max-width: var(--lesebreite); }
.kette { list-style: none; display: flex; flex-wrap: wrap; gap: var(--abstand-2) var(--abstand-3); padding: 0; margin: 0; }
.kette li { font-size: var(--groesse-klein); color: var(--text-stark); }
.kette li:not(:last-child)::after { content: '↗'; color: var(--text-leise); margin-left: var(--abstand-3); }
.fuss { border-top: var(--kante) solid var(--linie); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--abstand-3); padding-block: var(--abstand-4); font-size: var(--groesse-winzig); color: var(--text-leise); }
.fuss nav { display: flex; gap: var(--abstand-3); }
.fuss a { color: var(--text-leise); }
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: var(--abstand-3); padding-top: var(--abstand-2); padding-bottom: var(--abstand-5); }
  .hero-text { padding-block: var(--abstand-3); }
  .modell { height: var(--modell-mobil); }
  .ziel-abschnitt, .bedienung-raster { grid-template-columns: 1fr; gap: var(--abstand-4); }
  .kopf { padding-block: var(--abstand-3); }
  .kopf-nav { gap: var(--abstand-2); }
  .marke { font-size: var(--groesse-text); }
  .marke svg { width: var(--abstand-3); height: var(--abstand-3); }
  .kopf-nav .knopf { padding-inline: var(--abstand-2); }
  .kopf-nav .knopf svg { display: none; }
}
@media (max-width: 420px) { .kopf-nav { gap: var(--abstand-1); } .marke { gap: var(--abstand-1); } }