/* WECKTECH – Handy-Bedienung aller sechs Konfiguratoren (2026-10-11, gemeinsamer Baustein mit ../js/handy.js)
   Inhaber: „Kannst du versuchen, die ganze Smartphone-Konfigurator-Bedienung zu optimieren? Da muss man sehr viel scrollen und
   es ist sehr unübersichtlich.“ – „Scrollen geht teilweise schlecht, weil man dann im 3D-Fenster dreht.“ (Stufe 2)

   ALLES hier gilt nur mit html.hy – die Klasse setzt js/handy.js am Handy (schmal bis 760 px, oder Handy quer bis 500 px hoch).
   Am PC und auf dem Tablet bleibt jede Seite genau wie bisher.
     Kopf          kompakt (56 px), Preis aus dem Kopf in die Leiste unten; Aktionsband einzeilig (antippen = ganz lesen, × merkt sich)
     Seitenkopf    Produktwahl als Auswahlfeld + Überschrift in EINER Zeile, Einleitung hinter „mehr“
     Ansicht       bleibt oben stehen (ca. 1/3 des Bildschirms, Umschalter klein/größer, „Groß“ = Großansicht);
                   senkrecht wischen scrollt die Seite, waagerecht dreht, zwei Finger zoomen
     Schritte      Leiste mit Chips unter der Ansicht; immer nur EIN Schritt offen, die anderen eine Zeile mit Zusammenfassung;
                   am Ende jedes Schritts „Zurück“ und „Weiter: …“
     Leiste unten  Preis + „In den Warenkorb“ (springt zum Abschluss – der echte Knopf mit dem Pflicht-Haken bleibt dort);
                   Schubladeneinsatz: dazu seine Reiter Maße/Einteilung/3D (statt der alten Reiterleiste)
   Farben aus css/farben.css (--wt-…) bzw. den Namen aus css/einheit.css. */

html.hy, html.hy.wt-entwurf {
  --wt-kopf-h: 56px;
  --hy-kopf: 56px;            /* echte Höhe des Kopfs (misst js/handy.js) */
  --hy-rand: 16px;            /* seitlicher Rand der Seite (misst js/handy.js) – die Ansicht geht bis an den Bildschirmrand */
  /* Ansicht groß (Inhaber 2026-10-11: „Bild oben groß“): halber Bildschirm; mit dem Griff selbst gezogen: --hy-ans-wunsch (js/handy.js) */
  --hy-ans-h: var(--hy-ans-wunsch, max(240px, 50vh));
  --hy-ans-h-plan: var(--hy-ans-wunsch, max(240px, 50vh));   /* Schubladeneinsatz, Einteilung und 3D */
  --hy-griff-h: 22px;
  --hy-schritte-h: 46px;
  --hy-leiste-h: 60px;
  --hy-oben: calc(var(--hy-kopf) + var(--hy-ans-h) + var(--hy-schritte-h) + 8px);   /* setzt js/handy.js genau */
  --tabh: var(--hy-leiste-h);  /* Schubladeneinsatz: Meldungen (Toast) und Fuß rechnen mit der Höhe der unteren Leiste */
  scroll-padding-top: var(--hy-oben);
}
@supports (height: 1svh) {
  html.hy, html.hy.wt-entwurf { --hy-ans-h: var(--hy-ans-wunsch, max(240px, 50svh)); --hy-ans-h-plan: var(--hy-ans-wunsch, max(240px, 50svh)); }
}
/* ohne Warenkorb-Leiste unten (alle außer Schubladeneinsatz, Inhaber 2026-10-11) */
html.hy.hy-ohne-leiste { --hy-leiste-h: 0px !important; }
/* Abschluss, Speichern, Werkstatt offen: Ansicht klein (dort wird nichts mehr am Modell eingestellt) */
html.hy.hy-ans-klein, html.hy.hy-ans-klein.wt-entwurf { --hy-ans-h: 200px; }
/* Bildschirmtastatur offen: Ansicht kleiner, damit das Eingabefeld sichtbar bleibt; Leiste unten weg */
html.hy.hy-tastatur, html.hy.hy-tastatur.wt-entwurf { --hy-ans-h: 150px; --hy-ans-h-plan: 170px; }

/* ---------- Bausteine nur am Handy ---------- */
.hy-leiste, .hy-schritte, .hy-zus, .hy-nav, .hy-griff, .hy-pwahl, .hy-mehr, .hy-kopf-neu { display: none; }
.hy-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Laden ohne Springen (Ladezeiten 2026-10-24, Lighthouse CLS) ----------
   Bis js/handy.js die Schritte gebaut hat (html.hy-bereit – seit v5 schon, wenn der Fuß eingelesen ist, nicht erst nach DOMContentLoaded),
   bleibt die Werkzeug-Spalte am Handy unsichtbar: sie hält ihren Platz, wird aber nicht erst im PC-Aufbau gezeichnet und springt dann.
   Sicherung: nach 4 s in jedem Fall sichtbar. Am PC (ohne html.hy) wirkt das nicht. */
html.hy:not(.hy-bereit) .stage .panel,
html.hy:not(.hy-bereit) #tab-masse > .card:not(.masse-skizze-karte) { visibility: hidden; animation: hy-zeigen 0s linear 4s forwards; }
@keyframes hy-zeigen { to { visibility: visible; } }
/* Titelzeile: das Auswahlfeld der Produktwahl (34 px, .hy-pwahl unten) macht die Zeile höher als die Überschrift allein – den Platz vorab
   halten (Überschrift mittig wie danach), sonst rutscht die ganze Seite um 12 px, wenn die Zeile schon vor dem Umbau zu sehen war */
html.hy:not(.hy-bereit) .lead > h1 { margin-block: 5.6px; }   /* (34 − 22,8) / 2 */
/* „So geht’s“-Karte (js/so-gehts.js v9): steht ab dem Einlesen an ihrem Platz, unsichtbar, bis der Werkstatt-Schalter gelesen ist – auch am PC */
.sg-hinweis.sg-wartet { visibility: hidden; }

/* ======================================================================================================================
   Kopf und Aktionsband
   ====================================================================================================================== */
html.hy header.topbar { gap: 8px; }
/* der Preis steht oben im Kopf (#preisChip wie am PC) – die Leiste unten gibt es nur noch für die Reiter des Schubladeneinsatzes */
html.hy header.topbar .preis-chip { font-size: 13px; padding: 5px 10px; white-space: nowrap; }
/* Hinweise an der Ansicht ausgeblendet (Inhaber 2026-10-11: „Die Hinweise bitte ausblenden“); Markenhinweis klein am Ende */
html.hy #hinweis3d, html.hy .ansicht-karte .ansicht-leiste > span.fein { display: none !important; }
html.hy .hy-ende-hinweis { margin: 4px 2px 12px !important; padding: 0 !important; font-size: 11.5px; line-height: 1.4; color: var(--wt-text-3); }
html.hy nav.pwahl-zeile { display: none; }                         /* Produktwahl als Auswahlfeld im Seitenkopf */
html.hy .wt-iz { padding: 6px 42px 6px 12px; font-size: 12.5px; line-height: 1.35; text-align: left; cursor: pointer; }
html.hy .wt-iz .wt-iz-innen { flex-wrap: nowrap; justify-content: flex-start; gap: 4px 10px; }
html.hy .wt-iz:not(.hy-iz-offen) .wt-iz-text { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.hy .wt-iz.hy-iz-offen .wt-iz-innen { flex-wrap: wrap; }
html.hy .wt-iz .wt-iz-kopie { padding: 4px 8px; min-width: 0; }
html.hy .wt-iz .wt-iz-zu { right: 4px; width: 34px; height: 34px; }

/* ======================================================================================================================
   Seitenkopf: [Produkt ▾] Überschrift … [mehr] – Einleitung erst nach „mehr“
   ====================================================================================================================== */
html.hy .lead { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; row-gap: 6px; margin: 0 0 8px; }
html.hy .lead > .lead-top { display: none; }
html.hy .lead > h1 { flex: 1 1 0; min-width: 0; margin: 0; font-size: 17px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.hy .lead > :not(h1):not(.hy-mehr):not(.hy-pwahl) { flex: 1 1 100%; }
html.hy .lead > p { display: none; margin: 0; }
html.hy .lead.hy-lead-offen > p { display: block; }
html.hy .lead.hy-lead-offen > h1 { white-space: normal; }
html.hy .hy-pwahl { display: block; position: relative; flex: 0 0 auto; max-width: 46%; }
html.hy .hy-pwahl::after {
  content: ''; position: absolute; right: 13px; top: 50%; width: 7px; height: 7px; margin-top: -6px; pointer-events: none;
  border-right: 2px solid var(--wt-akzent-d); border-bottom: 2px solid var(--wt-akzent-d); transform: rotate(45deg);
}
html.hy .hy-pwahl select {
  display: block; width: 100%; height: 34px; padding: 0 30px 0 11px; margin: 0;
  border: 1px solid var(--wt-linie-2); border-radius: 999px; background: var(--wt-karte); color: var(--wt-akzent-d);
  font: 700 13.5px/1 var(--wt-titel); -webkit-appearance: none; appearance: none; cursor: pointer; text-overflow: ellipsis;
}
html.hy .hy-mehr {
  display: inline-flex; align-items: center; flex: 0 0 auto; height: 30px; padding: 0 11px; margin: 0;
  border: 1px solid var(--wt-linie-2); border-radius: 999px; background: var(--wt-karte); color: var(--wt-akzent-d);
  font: 600 12.5px/1 var(--wt-titel); cursor: pointer;
}
html.hy .lead.hy-lead-offen > .hy-mehr { background: var(--wt-akzent-l); border-color: var(--wt-akzent); }
html.hy .stage { margin-top: 0; gap: 10px; grid-template-columns: minmax(0, 1fr); }
html.hy :is(.wrap, main#main) { padding-top: 8px; }
html.hy .stage > *, html.hy .viewport-col > * { min-width: 0; }
html.hy .stage .panel { grid-template-columns: minmax(0, 1fr); gap: 8px; }
html.hy .hy-schritt { min-width: 0; }

/* ======================================================================================================================
   Ansicht: bleibt oben stehen, ca. 1/3 des Bildschirms, bis an den Rand; Reiter und Knopfleiste je eine Zeile
   ====================================================================================================================== */
html.hy .viewport-col { display: contents; }   /* Boxen: Ansicht und Schritte im selben Raster wie die zweite Spalte (klebt bis zum Ende) */
html.hy .ansicht-karte:not(.wt-gross) {
  position: sticky; top: var(--hy-kopf); z-index: 25; align-self: start;
  display: flex; flex-direction: column; height: var(--hy-ans-h); min-height: 0; max-height: none; overflow: hidden;
  margin-left: calc(-1 * var(--hy-rand)); margin-right: calc(-1 * var(--hy-rand));
  border-radius: 0; border-left: 0; border-right: 0; border-top: 0; box-shadow: var(--wt-schatten-s);
}
html.hy .ansicht-karte:not(.wt-gross) > .ansicht-tabs {
  flex: 0 0 auto; display: flex; flex-wrap: nowrap; align-items: center; gap: 4px; height: 38px; padding: 0 8px;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
}
html.hy .ansicht-karte:not(.wt-gross) > .ansicht-tabs::-webkit-scrollbar { display: none; }
html.hy .ansicht-karte:not(.wt-gross) > .ansicht-tabs [role="tab"] { flex: 0 0 auto; height: 28px; padding: 0 11px; font-size: 12.5px; white-space: nowrap; }
html.hy .ansicht-karte:not(.wt-gross) > .ansicht-tabs .btn { flex: 0 0 auto; min-height: 28px; padding: 4px 10px; font-size: 12px; white-space: nowrap; }
html.hy .ansicht-karte:not(.wt-gross) > :is(.ansicht, .plan, .canvas-wrap) {
  flex: 1 1 auto; height: auto !important; min-height: 0 !important; max-height: none; aspect-ratio: auto;
}
/* Knopfleiste: eine Zeile mit fester Höhe – erscheint dort etwas (z. B. Lage des gewählten Stegs), bleibt die Zeichnung gleich groß */
html.hy .ansicht-karte:not(.wt-gross) > .ansicht-leiste:not([hidden]) {
  flex: 0 0 auto; display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; height: 41px; padding: 0 8px; box-sizing: border-box;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
html.hy .ansicht-karte:not(.wt-gross) > .ansicht-leiste::-webkit-scrollbar { display: none; }
html.hy .ansicht-karte:not(.wt-gross) > .ansicht-leiste > *,
html.hy .ansicht-karte:not(.wt-gross) > .ansicht-leiste .ansicht-gruppe > * { flex: 0 0 auto; white-space: nowrap; }
html.hy .ansicht-karte:not(.wt-gross) > .ansicht-leiste .sp { display: none; }
html.hy .ansicht-karte:not(.wt-gross) > .ansicht-leiste .ansicht-gruppe { display: flex; flex-wrap: nowrap; gap: 6px; flex: 0 0 auto; }
html.hy .ansicht-karte:not(.wt-gross) > .ansicht-leiste :is(.btn, .view-btn) { width: auto; min-height: 30px; padding: 4px 11px; font-size: 12px; }
html.hy .ansicht-karte:not(.wt-gross) > .ansicht-leiste :is(.schalter, .masse-schalter) { margin: 0; font-size: 12.5px; white-space: nowrap; }
html.hy .ansicht-karte:not(.wt-gross) > .ansicht-leiste .fein { white-space: nowrap; font-size: 12px; }
html.hy .ansicht-karte:not(.wt-gross) > :is(.kennzahlen, .specsheet) { display: none; }   /* Kennzahlen in der Großansicht */
/* Großansicht-Knopf mit Wort „Groß“, darunter der Umschalter klein/größer */
html.hy :is(.wt-zoom-btn, .zoom-btn) { width: auto; min-width: 38px; height: 34px; padding: 0 10px 0 8px; display: inline-flex; align-items: center; gap: 5px; }
html.hy :is(.wt-zoom-btn, .zoom-btn) svg { flex: 0 0 auto; width: 17px; height: 17px; }   /* in der 2D-Zeichnung gelten sonst deren svg-Regeln */
html.hy .ansicht-karte:not(.wt-gross) .wt-zoom-btn::after, html.hy .canvas-wrap:not(.gross) > .zoom-btn::after { content: 'Groß'; font: 600 12px/1 var(--wt-titel); }
html.hy .ansicht-karte:not(.wt-gross) .wt-zoom-btn { top: 8px; right: 8px; }
/* Griff unten an der Ansicht: ziehen = höher/flacher (Inhaber 2026-10-11: „das 3D-Fenster in der Höhe mit einem Slider selbst
   einstellen“); in der Karte als letzte Zeile, beim Schubladeneinsatz über dem unteren Rand der Zeichnung */
html.hy .hy-griff {
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 100%; height: var(--hy-griff-h); padding: 0; margin: 0;
  border: 0; border-top: 1px solid var(--wt-linie); border-radius: 0; background: var(--wt-karte); cursor: ns-resize; touch-action: none;
  -webkit-user-select: none; user-select: none;
}
html.hy .hy-griff::before { content: ''; width: 46px; height: 5px; border-radius: 3px; background: var(--wt-linie-2); transition: background .12s, width .12s; }
html.hy .hy-griff:hover::before, html.hy .hy-griff:focus-visible::before, html.hy .hy-griff.hy-zieht::before { width: 64px; background: var(--wt-akzent); }
html.hy .hy-griff:focus-visible { outline: 2px solid var(--wt-akzent); outline-offset: -2px; }
html.hy .canvas-wrap > .hy-griff { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; background: color-mix(in srgb, var(--wt-karte) 82%, transparent); }
html.hy .ansicht-karte.wt-gross > .hy-griff, html.hy .canvas-wrap.gross > .hy-griff,
html.hy.hy-ans-klein .hy-griff, html.hy.hy-tastatur .hy-griff { display: none; }
/* Finger: senkrecht scrollt die Seite, waagerecht dreht (Unterscheidung in js/handy.js), zwei Finger zoomen;
   in der Großansicht gehört jeder Finger der Ansicht (bleibt wie bisher touch-action: none) */
html.hy .ansicht-karte:not(.wt-gross) > .ansicht:not(.ansicht2d),
html.hy .ansicht-karte:not(.wt-gross) > .ansicht:not(.ansicht2d) canvas,
html.hy .ansicht-karte:not(.wt-gross) > .canvas-wrap,
html.hy .ansicht-karte:not(.wt-gross) > .canvas-wrap canvas { touch-action: pan-y; }

/* ======================================================================================================================
   Schritt-Leiste: nummerierte Chips, aktueller hervorgehoben, erledigte mit Haken, waagerecht scrollbar
   ====================================================================================================================== */
html.hy .hy-schritte {
  display: block; position: sticky; top: calc(var(--hy-kopf) + var(--hy-ans-h)); z-index: 24; align-self: start;
  margin-left: calc(-1 * var(--hy-rand)); margin-right: calc(-1 * var(--hy-rand));
  background: var(--wt-grund); border-bottom: 1px solid var(--wt-linie);
}
html.hy .hy-schritte-innen {
  display: flex; gap: 6px; height: var(--hy-schritte-h); align-items: center; padding: 0 var(--hy-rand);
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-behavior: smooth;
}
html.hy .hy-schritte-innen::-webkit-scrollbar { display: none; }
html.hy .hy-chip {
  position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px 0 5px; margin: 0;
  border: 1px solid var(--wt-linie-2); border-radius: 999px; background: var(--wt-karte); color: var(--wt-text-2);
  font: 600 12.5px/1 var(--wt-titel); white-space: nowrap; cursor: pointer; touch-action: manipulation;
}
html.hy .hy-chip-nr {
  display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--wt-holz-l); color: var(--wt-holz-d); font: 700 11.5px/1 var(--wt-titel);
}
html.hy .hy-chip.hy-chip-optional { color: var(--wt-text-3); border-style: dashed; }
html.hy .hy-chip.hy-chip-fertig .hy-chip-nr { background: var(--wt-akzent-l); color: var(--wt-akzent-d); }
html.hy .hy-chip[aria-current="step"] { background: var(--wt-akzent); border-color: var(--wt-akzent); color: var(--wt-karte); }
html.hy .hy-chip[aria-current="step"] .hy-chip-nr { background: var(--wt-karte); color: var(--wt-akzent-d); }

/* ======================================================================================================================
   Schritte: immer nur EINER offen, die anderen eine Zeile (Nummer, Titel, Zusammenfassung)
   ====================================================================================================================== */
html.hy .hy-schritt { position: relative; scroll-margin-top: var(--hy-oben); }
/* zugeklappt: EINE Zeile – Nummer und Titel links, Zusammenfassung rechts, Pfeil */
html.hy .hy-schritt.hy-zu { display: flex; align-items: center; gap: 10px; min-height: 0; padding: 10px 38px 10px 14px; cursor: pointer; }
html.hy .hy-schritt.hy-zu > :not(.hy-kopf):not(.hy-zus) { display: none !important; }
html.hy .hy-schritt > .hy-kopf { flex-wrap: nowrap; cursor: pointer; margin: 0; padding-right: 26px; -webkit-tap-highlight-color: transparent; }
html.hy .hy-schritt > .hy-kopf .u { display: none; }
html.hy .hy-schritt:not(.hy-zu) > .hy-kopf { margin-bottom: 8px; }
html.hy .hy-schritt.hy-zu > .hy-kopf {
  display: block; flex: 0 1 auto; max-width: 64%; min-width: 0; padding-right: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 15px; line-height: 24px;
}
html.hy .hy-schritt.hy-zu > .hy-kopf :is(.nr, .num) { margin-right: 9px; vertical-align: top; }
html.hy .hy-schritt.hy-zu > .hy-kopf :is(button, svg, .zarge-ico) { display: none; }
html.hy .hy-schritt::after {
  content: ''; position: absolute; right: 17px; top: 50%; width: 8px; height: 8px; margin-top: -6px; pointer-events: none;
  border-right: 2px solid var(--wt-text-3); border-bottom: 2px solid var(--wt-text-3); transform: rotate(45deg);
}
html.hy .hy-schritt:not(.hy-zu)::after { top: 27px; margin-top: 0; transform: rotate(-135deg); }
html.hy .hy-schritt > .hy-kopf-neu { display: flex; }
html.hy .hy-schritt.hy-zu > .hy-zus {
  display: flex; justify-content: flex-end; align-items: baseline; flex: 1 1 0; min-width: 0; margin: 0; overflow: hidden; white-space: nowrap;
  color: var(--wt-text-2); font: 400 13px/1.35 var(--wt-schrift);
}
html.hy .hy-schritt.hy-zu > .hy-zus > span { flex: 0 0 auto; }
html.hy .hy-schritt.hy-zu > .hy-zus > span:last-child { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }   /* nichts ragt aus der Karte */
html.hy .hy-schritt.hy-zu > .hy-zus:empty { display: none; }
html.hy .hy-schritt.hy-zu > .hy-zus .hy-opt { color: var(--wt-text-3); font-style: italic; }
html.hy .hy-schritt.hy-zu > .hy-zus .hy-opt + span::before { content: ' · '; color: var(--wt-text-3); }
html.hy .hy-schritt.hy-zu > .hy-zus .hy-fertig { color: var(--wt-akzent-d); font-weight: 700; margin-right: 4px; }
/* Schritt öffnen/schließen ohne Ruckeln für das Auge */
@media (prefers-reduced-motion: no-preference) {
  html.hy .hy-schritt:not(.hy-zu) > :not(.hy-kopf) { animation: hy-auf .18s ease-out; }
}
@keyframes hy-auf { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* Am Ende jedes Schritts: Zurück | Weiter: … */
html.hy .hy-schritt > .hy-nav { display: flex; gap: 8px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--wt-linie); }
html.hy .hy-nav .hy-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 8px 16px; margin: 0;
  border: 1px solid var(--wt-linie-2); border-radius: 999px; background: var(--wt-karte); color: var(--wt-text);
  font: 600 14px/1.2 var(--wt-titel); cursor: pointer; touch-action: manipulation;
}
html.hy .hy-nav .hy-btn.hy-weiter { flex: 1 1 auto; background: var(--wt-akzent); border-color: var(--wt-akzent); color: var(--wt-karte); }
html.hy .hy-nav .hy-btn.hy-weiter:only-child { margin-left: 0; }
html.hy .hy-nav .hy-btn.hy-zurueck { flex: 0 0 auto; }
html.hy .hy-nav .hy-btn.hy-zurueck:only-child { flex: 1 1 auto; }

/* Erklärtexte kurz: zwei Zeilen, antippen zeigt den Rest („mehr“) */
html.hy .hy-kurz { position: relative; cursor: pointer; }
html.hy .hy-kurz:not(.hy-lang) > .wt-erkl-text,
html.hy .wt-erkl-aussen.hy-kurz:not(.hy-lang) > :last-child,
html.hy p.hy-kurz.hy-ohne-pikto:not(.hy-lang) {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
html.hy .hy-kurz:not(.hy-lang)::after {
  content: 'mehr'; position: absolute; right: 0; bottom: 0; padding: 0 2px 0 26px;
  background: linear-gradient(90deg, transparent, var(--wt-karte) 22px);
  color: var(--wt-akzent-d); font: 600 12.5px/1.5 var(--wt-titel);
}

/* ======================================================================================================================
   Leiste unten: Preis + „In den Warenkorb“ (Schubladeneinsatz: dazu die Reiter Maße/Einteilung/3D)
   ====================================================================================================================== */
html.hy .hy-leiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; align-items: center; gap: 8px; height: calc(var(--hy-leiste-h) + env(safe-area-inset-bottom));
  padding: 0 10px env(safe-area-inset-bottom) 12px;
  background: color-mix(in srgb, var(--wt-karte) 97%, transparent); border-top: 1px solid var(--wt-linie); box-shadow: var(--wt-schatten-s);
  -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px);
  transition: transform .18s ease-out;
}
html.hy.hy-tastatur .hy-leiste, html.hy body.gross-an .hy-leiste, html.hy body.wt-gross-an .hy-leiste { transform: translateY(110%); visibility: hidden; }
html.hy .hy-tabs { display: flex; flex: 1 1 auto; justify-content: space-around; min-width: 0; height: 100%; }
html.hy .hy-tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; flex: 0 0 auto;
  width: 54px; height: 100%; padding: 0; margin: 0; border: 0; background: none; color: var(--wt-text-3);
  font: 600 10.5px/1 var(--wt-titel); cursor: pointer; touch-action: manipulation;
}
html.hy .hy-tab svg { width: 21px; height: 21px; }
html.hy .hy-tab[aria-current="page"] { color: var(--wt-akzent-d); }
html.hy .hy-tab[hidden] { display: none; }
html.hy .hy-preis { display: flex; flex-direction: column; justify-content: center; flex: 1 1 auto; min-width: 0; line-height: 1.15; }
html.hy .hy-preis small { color: var(--wt-text-3); font: 400 11.5px/1.2 var(--wt-schrift); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.hy .hy-preis b { color: var(--wt-akzent-d); font: 700 19px/1.15 var(--wt-titel); font-variant-numeric: tabular-nums; white-space: nowrap; }
html.hy .hy-korb {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; flex: 0 0 auto; height: 44px; padding: 0 16px 0 13px; margin: 0;
  border: 0; border-radius: 999px; background: var(--wt-akzent); color: var(--wt-karte); font: 700 14px/1.15 var(--wt-titel); cursor: pointer;
  touch-action: manipulation; white-space: nowrap;
}
html.hy .hy-korb:hover, html.hy .hy-korb:active { background: var(--wt-akzent-d); }
html.hy .hy-korb svg { flex: 0 0 auto; }
html.hy .hy-leiste.hy-mit-tabs .hy-preis b { font-size: 16px; }
html.hy .hy-leiste.hy-mit-tabs .hy-korb { padding: 0 12px 0 10px; font-size: 12.5px; white-space: normal; text-align: left; max-width: 112px; line-height: 1.1; }
html.hy .hy-leiste.hy-mit-tabs .hy-korb[aria-current="page"] { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--wt-karte) 55%, transparent); }
@media (max-width: 359px) { html.hy .hy-leiste.hy-mit-tabs .hy-preis small { display: none; } html.hy .hy-tab { width: 48px; } }
/* Platz für die Leiste: unter dem Fuß (dunkel bis ganz unten, wie beim Schubladeneinsatz) */
html.hy body { padding-bottom: 0; }
html.hy .wt-fuss-unten { padding-bottom: calc(20px + var(--hy-leiste-h) + env(safe-area-inset-bottom)); }
html.hy nav.tabbar { display: none; }

/* ======================================================================================================================
   Schubladeneinsatz (eigener Ablauf mit Reitern): Maße mit Draufsicht oben und Schritten, Einteilung/3D mit Zeichnung oben
   ====================================================================================================================== */
html.hy #tab-masse:not([hidden]) { display: flex; flex-direction: column; }
html.hy #tab-masse > .lead { order: -3; }
html.hy #tab-masse > .masse-skizze-karte { order: -2; }
html.hy #tab-masse > .hy-schritte { order: -1; margin-top: 0; margin-bottom: 12px; align-self: stretch; }
html.hy .lead > .schritt { display: none; }
html.hy #tab-masse > .card { margin-top: 0; margin-bottom: 12px; }
html.hy #tab-masse > .masse-skizze-karte:not(:has(.canvas-wrap.gross)) {
  position: sticky; top: var(--hy-kopf); z-index: 25; height: var(--hy-ans-h); padding: 0; margin: 0 calc(-1 * var(--hy-rand)) 0;
  display: flex; flex-direction: column; overflow: hidden; border-radius: 0; border-left: 0; border-right: 0; border-top: 0;
  box-shadow: var(--wt-schatten-s);
}
html.hy #tab-masse > .masse-skizze-karte > :is(.card-h, .masse-zeichnung-hint) { display: none; }
html.hy #tab-masse > .masse-skizze-karte .masse-zeichnung { flex: 1 1 auto; min-height: 0; display: flex; }
html.hy #tab-masse > .masse-skizze-karte .masse-zeichnung > .canvas-wrap.plan:not(.gross) { height: auto !important; min-height: 0 !important; max-height: none !important; flex: 1 1 auto; border-radius: 0; }
html.hy #tab-plan > .canvas-wrap.plan:not(.gross), html.hy #tab-3d > .canvas-wrap.view3d:not(.gross) {
  position: sticky; top: var(--hy-kopf); z-index: 25; height: var(--hy-ans-h-plan) !important; min-height: 0; max-height: none;
  margin-left: calc(-1 * var(--hy-rand)); margin-right: calc(-1 * var(--hy-rand)); border-radius: 0; border-left: 0; border-right: 0;
  box-shadow: var(--wt-schatten-s);
}
html.hy .canvas-wrap:not(.gross) > .zoom-btn { top: 8px; right: 8px; }
html.hy #cv3d { touch-action: pan-y; }
html.hy .canvas-wrap.gross #cv3d { touch-action: none; }

/* ======================================================================================================================
   Handy quer (z. B. 812 × 375): Ansicht links, Schritte rechts
   ====================================================================================================================== */
html.hy.hy-quer, html.hy.hy-quer.wt-entwurf { --wt-kopf-h: 48px; --hy-leiste-h: 50px; --hy-schritte-h: 42px; }
html.hy.hy-quer .hy-griff { display: none; }
html.hy.hy-quer .wrap:has(> .stage) { display: grid; grid-template-columns: minmax(0, 45fr) minmax(0, 55fr); column-gap: 12px; align-items: start; }
html.hy.hy-quer .wrap > .lead { grid-column: 1; grid-row: 1; margin-bottom: 8px; }
html.hy.hy-quer .wrap > .stage { display: contents; }
html.hy.hy-quer .stage { display: grid; grid-template-columns: minmax(0, 45fr) minmax(0, 55fr); column-gap: 12px; row-gap: 0; align-items: start; }
html.hy.hy-quer .stage > .ansicht-karte:not(.wt-gross), html.hy.hy-quer .viewport-col > .ansicht-karte:not(.wt-gross) {
  grid-column: 1; grid-row: 2 / span 4; top: calc(var(--hy-kopf) + 8px);
  height: calc(100vh - var(--hy-kopf) - var(--hy-leiste-h) - 16px); margin: 0; border: 1px solid var(--wt-linie); border-radius: 16px;
}
html.hy.hy-quer .stage > .hy-schritte, html.hy.hy-quer .viewport-col > .hy-schritte { grid-column: 2; grid-row: 1; top: var(--hy-kopf); margin: 0 0 10px; }
html.hy.hy-quer .stage > .hy-schritte .hy-schritte-innen { padding: 0 2px; }
html.hy.hy-quer .stage > .panel, html.hy.hy-quer .viewport-col > .panel { grid-column: 2; min-width: 0; }
html.hy.hy-quer .stage > .panel { margin-top: 12px; }
html.hy.hy-quer .stage > .hy-schritte + .panel, html.hy.hy-quer .viewport-col > .panel { margin-top: 0; }
@supports (height: 1svh) {
  html.hy.hy-quer .stage > .ansicht-karte:not(.wt-gross), html.hy.hy-quer .viewport-col > .ansicht-karte:not(.wt-gross) { height: calc(100svh - var(--hy-kopf) - var(--hy-leiste-h) - 16px); }
}
/* Schubladeneinsatz quer: Zeichnung bleibt im Fluss (sonst bliebe für die Einstellungen kaum Platz) */
html.hy.hy-quer #tab-masse > .masse-skizze-karte:not(:has(.canvas-wrap.gross)),
html.hy.hy-quer #tab-plan > .canvas-wrap.plan:not(.gross), html.hy.hy-quer #tab-3d > .canvas-wrap.view3d:not(.gross) { position: relative; top: auto; height: 62vh !important; }
html.hy.hy-quer #tab-masse > .hy-schritte { top: var(--hy-kopf); }

@media print { .hy-leiste, .hy-schritte, .hy-nav, .hy-zus, .hy-griff { display: none !important; } }

/* ---------- Ergänzungen ---------- */
/* Tischplatte: Reiter der Platten (Platte 1 | + Platte) eine knappe Zeile über den Schritten */
html.hy .platten-leiste { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
html.hy .platten-leiste::-webkit-scrollbar { display: none; }
html.hy .platten-leiste :is(.pl-tab, .pl-neu) { flex: 0 0 auto; min-height: 32px; padding: 3px 11px; font-size: 13px; white-space: nowrap; }
/* quer: noch knapper – Kopf 44 px, Erklärtexte eine Zeile */
html.hy.hy-quer, html.hy.hy-quer.wt-entwurf { --wt-kopf-h: 44px; }
html.hy.hy-quer .hy-kurz:not(.hy-lang) > .wt-erkl-text,
html.hy.hy-quer .wt-erkl-aussen.hy-kurz:not(.hy-lang) > :last-child,
html.hy.hy-quer p.hy-kurz.hy-ohne-pikto:not(.hy-lang) { -webkit-line-clamp: 1; line-clamp: 1; }
html.hy.hy-quer .hy-schritt:not(.hy-zu) > .hy-kopf { margin-bottom: 4px; }
/* Abschluss offen: die Ansicht ist klein – Modell und Knopfleiste (AR bleibt erreichbar), ohne Reiter; nichts ragt hinaus;
   unten nur der Preis, der echte Knopf „In den Warenkorb“ steht im Abschluss (Schubladeneinsatz: bleibt als Reiter) */
html.hy .ansicht-karte:not(.wt-gross) > :is(.ansicht, .plan, .canvas-wrap) { overflow: hidden; }
html.hy.hy-ans-klein .ansicht-karte:not(.wt-gross) > .wt-z2d-knoepfe,
html.hy.hy-ans-klein .ansicht-karte:not(.wt-gross) > .ansicht-tabs:not(:has(.btn:not([hidden]))) { display: none !important; }   /* Tisch: Reiterzeile mit AR-Knöpfen bleibt */
html.hy.hy-abschluss-offen:not([data-hy-produkt="schublade"]) .hy-korb { display: none; }
/* Tischplatte klappbar/drehbar: Zuklappen/Ausdrehen + Regler + Grad als Band über der Knopfleiste – immer ganz zu sehen */
html.hy .ansicht-karte:not(.wt-gross) > .ansicht-leiste .klapp-steuer:not([hidden]) {
  position: absolute; left: 8px; right: 8px; bottom: calc(47px + var(--hy-griff-h)); z-index: 6; display: flex; align-items: center; gap: 8px; padding: 5px 8px;
  border: 1px solid var(--wt-linie); border-radius: 12px; background: color-mix(in srgb, var(--wt-karte) 94%, transparent); box-shadow: var(--wt-schatten-s);
}
html.hy .ansicht-karte:not(.wt-gross) > .ansicht-leiste .klapp-steuer .btn { min-width: 0; }
html.hy .ansicht-karte:not(.wt-gross) > .ansicht-leiste .klapp-regler { flex: 1 1 auto; min-width: 0; }
/* Boxen „Verschieben“ an: ein Finger verschiebt in jede Richtung – dann gehört er ganz der Ansicht */
html.hy .ansicht-karte:has(#panToggle[aria-pressed="true"]):not(.wt-gross) > .canvas-wrap,
html.hy .ansicht-karte:has(#panToggle[aria-pressed="true"]):not(.wt-gross) > .canvas-wrap canvas { touch-action: none; }
/* Zoom-Knöpfe der 2D-Ansichten (js/zoom2d.js v2: als Zeile ÜBER der Ansicht, Inhaber 2026-10-11) – am Handy knapp;
   in der klebenden Ansichtskarte eine eigene Zeile, beim Schubladeneinsatz (Einteilung) klebt die Zeile mit der Zeichnung */
html.hy .wt-z2d-knoepfe[hidden] { display: none !important; }
html.hy .wt-z2d-knoepfe.wt-z2d-oben { margin: 3px 8px 3px auto; gap: 4px; }
html.hy .wt-z2d-knoepfe.wt-z2d-oben button { height: 30px; min-width: 30px; }
html.hy .ansicht-karte:not(.wt-gross) > .wt-z2d-knoepfe.wt-z2d-oben { flex: 0 0 auto; }
html.hy #tab-masse > .masse-skizze-karte .masse-zeichnung { flex-direction: column; }
html.hy #tab-plan > .wt-z2d-knoepfe.wt-z2d-oben:not([hidden]) {
  position: sticky; top: var(--hy-kopf); z-index: 26; width: auto; max-width: none; height: 38px; box-sizing: border-box;
  margin: 0 calc(-1 * var(--hy-rand)); padding: 3px 8px; background: var(--wt-grund);
}
html.hy #tab-plan > .wt-z2d-knoepfe.wt-z2d-oben:not([hidden]) ~ .canvas-wrap.plan:not(.gross) { top: calc(var(--hy-kopf) + 38px); }
html.hy.hy-quer #tab-plan > .wt-z2d-knoepfe.wt-z2d-oben:not([hidden]) { position: static; }
/* Schubladeneinsatz, Draufsicht in „Maße“: Großansicht wirklich bildschirmhoch (app.css begrenzt sie sonst unter 1100 px auf 380 px) */
html.hy .canvas-wrap.plan.gross { max-height: none !important; min-height: 0 !important; }