/* Ergaenzung zu /site-src/styles.css - nur das, was es dort noch nicht gibt:
   die 3D-Buehne (ersetzt die statische Bildbuehne aus site/) und der
   eingeklappte Technik-/Diagnosebereich. Klassen, Farben und Abstaende
   kommen bewusst aus dem bestehenden Stylesheet (--farbe-*, --abstand,
   --radius, .buehne, .knopf), damit hier kein zweites Design entsteht. */

.viewer-buehne__canvas {
  position: absolute;
  inset: 0;
}

/* Der Autodesk Viewer bringt eigene UI (Navigationswuerfel, Werkzeugleiste)
   mit, die auf dem hellen Grund von .buehne sonst kaum lesbar ist. */
.viewer-buehne__canvas .adsk-viewing-viewer {
  background: transparent;
}

.viewer-buehne__status {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  gap: .75rem;
  padding: 1.5rem;
  text-align: center;
  background: var(--farbe-flaeche);
}
.viewer-buehne__status[hidden] { display: none; }
.viewer-buehne__status p { margin: 0; color: var(--farbe-text-leise); }
.viewer-buehne__status .knopf { width: auto; padding-inline: 1.5rem; }
.viewer-buehne__status.ist-fehler p { color: var(--farbe-warnung); }

/* --- Technik-/Diagnosebereich -------------------------------------------
   Bewusst zugeklappt und ans Ende gestellt: fuer die Fehlersuche wichtig,
   aber kein Bestandteil des eigentlichen Produkt-UI. */

.technik {
  max-width: 1100px;
  margin: calc(var(--abstand) * 1.5) auto 0;
  padding: 0 var(--abstand);
  font-size: .85rem;
  color: var(--farbe-text-leise);
}
.technik summary {
  cursor: pointer;
  padding: .5rem 0;
}
.technik__inhalt {
  padding: .75rem;
  background: var(--farbe-flaeche);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius);
}
.technik #log {
  margin-top: .5rem;
  max-height: 16rem;
  overflow-y: auto;
  font: 11px/1.5 ui-monospace, monospace;
  white-space: pre-wrap;
  color: var(--farbe-text);
}
.technik #log .fehler { color: #b3261e; }
.technik #log .warnung { color: var(--farbe-warnung); }

/* --- Website-Version: Preise fuer Besucher ausblenden ----------------------
   TURVIO-Aufgabe 3: der Konfigurator wird zunaechst ohne Preise auf der
   eigenen Website eingesetzt. Bewusst nur die sichtbare Darstellung per CSS
   deaktiviert - site/src/lib/preis.js (formate.geld(), stelleZusammen()) und
   die reaktiven Preis-Updates in kennwerte.js/stueckliste.js/varianten-
   auswahl.js/nachruest-auswahl.js bleiben unveraendert und laufen unveraendert
   weiter, nur ohne sichtbare Ausgabe - jederzeit reversibel, indem dieser
   Block entfernt wird. Gilt bewusst auf allen Bildschirmgroessen (auch
   Mobile), deshalb ausserhalb der Desktop-Media-Query weiter unten.
   .karte__preis deckt sowohl die drei Variantenkarten (varianten-auswahl.js)
   als auch die Einzelartikel im Nachruest-Modus (nachruest-auswahl.js) ab -
   beide verwenden dieselbe Klasse, keine Unterscheidung noetig.
   .kennwerte__hinweis ist der volle Preishinweis-Text ("Unverbindliche
   Preisempfehlung... MwSt... Versandkosten..."), .kennwerte__summe der
   Gesamtpreis - die verbleibende .kennwerte__liste (Gewicht/Aussenmasse)
   bekommt in app.js (passeWebsiteTexteAn()) eine eigene kleine Ueberschrift,
   damit dort nicht kommentarlos nur eine Liste uebrig bleibt. */
.karte__preis,
.stueckliste__preis,
.kennwerte__summe,
.kennwerte__hinweis {
  display: none;
}

/* Keine Grid-Spaltenaenderung an .stueckliste__kopf noetig: die fuer den
   Preis reservierte dritte Spalte ("auto") bleibt durch display:none ohne
   Inhalt und faellt dadurch von selbst auf 0 Breite zusammen - kein
   sichtbarer Leerraum. Eine eigene Regel dafuer wuerde ausserdem die unten
   (site/src/styles.css, @media max-width:699px) absichtlich andere
   Spaltenaufteilung fuer schmale Bildschirme ueberschreiben, dort bewusst
   nicht angefasst. */

@media (max-width: 699px) {
  /* Unter 700px haftet .ausgabe normalerweise unten - die gibt es in diesem
     Schritt (noch) nicht, deshalb braucht body hier keinen Zusatzabstand. */
  .technik { margin-top: var(--abstand); }
}

/* --- Desktop-Layout verbreitern -------------------------------------------
   Bewusst komplett in EINEM @media (min-width: 700px)-Block (Codex-
   Gegenpruefung: eine erste Fassung hatte .layout/.technik/.viewer-buehne
   teilweise AUSSERHALB der Media Query stehen und damit auch das Mobile-
   Layout veraendert - Vorgabe war ausdruecklich "Desktop zuerst, Mobile
   jetzt nicht anfassen"). Unterhalb 700px bleibt jede hier ueberschriebene
   Regel exakt beim Verhalten von site/src/styles.css, keine Seiteneffekte.

   site/src/styles.css begrenzt .layout auf max-width:1100px und setzt ab
   700px grid-template-columns: 5fr 6fr - richtig fuer die schmale Hochkant-
   Bildbuehne des statischen Konfigurators in site/, auf einem breiten
   Desktop-Fenster hier aber deutlich zu schmal (viel ungenutzte weisse
   Flaeche links/rechts, Spaltenverhaeltnis fuer den 3D-Viewer falsch herum).
   Nur hier ueberschrieben (site/ selbst bleibt unveraendert - Wieder-
   verwendung, keine Anpassung dort). */
@media (min-width: 700px) {
  :root {
    /* ca. 85-90% der Fensterbreite, mit einer sinnvollen Obergrenze fuer
       sehr grosse/Ultrawide-Monitore. */
    --hauptbreite: min(88vw, 1800px);
  }
  .layout {
    max-width: var(--hauptbreite);
    /* TURVIO-Aufgabe 3: Vorgabe jetzt links (3D) ca. 68-72%, rechts
       (Bedienflaeche) ca. 28-32% - vorher 58/42 (siehe Git-Historie), nach
       dem Verdichten der rechten Spalte unten (weniger Innenabstand/
       Kartenhoehe) bleibt sie trotz des schmaleren Anteils weiterhin gut
       bedienbar, der Turm bekommt den frei gewordenen Platz. Reine
       Grid-Spaltenaenderung - Kamera/Zoom/Sichtbarkeitslogik in app.js
       unberuehrt, viewer.resize() nach jeder Groessenaenderung uebernimmt
       nur die WebGL-Canvas-Aufloesung (siehe Kommentar an
       ueberwacheGroessenaenderung() in app.js). */
    grid-template-columns: minmax(0, 70fr) minmax(0, 30fr);
  }

  /* --- Rechte Bedienflaeche kompakter (TURVIO-Aufgabe 3) -------------------
     Nur Innenabstaende/Zeilenhoehen/Schriftgroessen verdichtet - Struktur,
     Klassen und Verhalten (Klick/Tastatur/ARIA) bleiben unveraendert. Bewusst
     nur hier im Desktop-Block (Maus-Bedienung): auf Mobile bleibt die
     44px-Tippflaeche (--tippflaeche) aus site/src/styles.css unangetastet,
     wie bei der Spaltenbreite oben. align-content:center sorgt dafuer, dass
     der jetzt kuerzere Textstapel (Preiszeile per CSS oben entfernt) in der
     verbleibenden Kartenhoehe vertikal ausgewogen sitzt statt oben klebt. */
  .spalte--auswahl { gap: .7rem; }

  .modus__knopf {
    padding: .55rem .75rem;
    min-height: 40px;
    align-content: center;
  }
  .modus__titel { font-size: .92rem; }
  .modus__text { font-size: .8rem; }

  .auswahl { gap: .5rem; }
  .karte {
    padding: .55rem .8rem;
    gap: .1rem;
    align-content: center;
  }
  .karte__text { font-size: .85rem; }

  .block { padding: .75rem .85rem; }
  .block__titel { margin-bottom: .5rem; }
  .kennwerte__titel { margin-top: 0; }

  .stueckliste__zeile { padding: .4rem 0; }
  .kennwerte__liste { font-size: .87rem; }
  .technik {
    /* Nur fuer optische Konsistenz mit der jetzt breiteren .layout. */
    max-width: var(--hauptbreite);
  }

  /* .buehne (site/src/styles.css) leitet ihre Breite aus einer festen
     Hoehe * Hochkant-Seitenverhaeltnis ab (width: min(100%, --buehne-hoehe *
     --buehne-verhaeltnis)) - richtig fuer das Portraet-Renderbild der
     statischen Bildbuehne, hier aber genau die Ursache der schmalen
     Viewer-Flaeche: die Breite haengt nie von der tatsaechlich verfuegbaren
     Spaltenbreite ab, --buehne-verhaeltnis faellt hier zudem mangels JS auf
     den CSS-Fallback 0.75 zurueck. Fuer den 3D-Viewer stattdessen die volle
     Spaltenbreite nutzen und nur die Hoehe wie bisher vorgeben - wie fuer
     diesen Schritt gefordert: Hoehe ungefaehr beibehalten, Breite freigeben.
     Kamera/Zoom/Sichtbarkeitslogik bleiben davon unberuehrt, das ist reine
     CSS-Flaechenaenderung; app.js ruft nach jeder erkannten Groessenaenderung
     weiterhin viewer.resize() auf. */
  .viewer-buehne {
    width: 100%;
    max-width: 100%;
    aspect-ratio: auto;
    height: var(--buehne-hoehe);
  }
}

/* --- 3D-Bereich vergroessern (TURVIO-Aufgabe 3) ----------------------------
   Die tatsaechliche Bild-/Turmgroesse im Viewer haengt NICHT von der Breite
   ab: stelleGenauZoomEin() (V1/V2) zielt ausdruecklich auf einen festen
   Anteil der BILDHOEHE (ZIEL_BILDANTEIL_V1_V2), und fitToView() vor
   stelleStandardZoomEin() (V3/Zubehoer) ist fuer diese hochkant-schlanke
   Geometrie in der Praxis ebenfalls hoehengebunden (siehe app.js) - beides
   bewusst unveraendert (Auftrag: kein Eingriff an Kamera/Zoom). Die breitere
   Spalte oben allein wuerde den Turm deshalb nur mit mehr Leerraum links/
   rechts zeigen, nicht groesser. Stattdessen hier die einzige tatsaechliche
   Layout-Stellschraube dafuer: --buehne-hoehe (site/src/styles.css), reine
   CSS-Containergroesse, dieselbe Variable, die schon vorher fuer sehr flache/
   hohe Fenster angepasst wurde. Eigene, engere Media-Query (min-height ab
   641px), damit die bestehende Kurzfenster-Ausnahme aus site/src/styles.css
   (max-height:640px -> 24rem) unangetastet bleibt - nur der Normal- und
   Grossbildschirm-Fall wird hier angehoben (34rem/40rem -> 42rem). */
@media (min-width: 700px) and (min-height: 641px) {
  :root { --buehne-hoehe: 42rem; }
}