/* ===== Modell-Detailseite: Überschrift rechts, Inhalt direkt unter der Leiste, Automat ganz sichtbar ===== */
.md-hero { padding-top: calc(var(--nav-h) + clamp(14px, 2.6vh, 32px)) !important; padding-bottom: clamp(24px, 4vw, 56px) !important; }
.md-hero .grid { align-items: center; gap: clamp(24px, 4vw, 64px); }
.md-pic img { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(100svh - var(--nav-h) - 56px); margin: 0 auto; }
.md-info .kicker { text-align: left; margin: 0 0 10px; }
.md-info .h1 { text-align: left; margin: 0; font-size: clamp(2rem, 3.6vw, 3.2rem); line-height: 1.04; }
.md-info .lead { text-align: left; margin: 12px 0 18px; max-width: 32em; }
.md-info .btns { justify-content: flex-start; margin-bottom: 20px; }
.md-info > div:last-child .btns { margin-bottom: 0; }
@media (max-width: 900px) { .md-pic img { max-height: 64svh; } .md-info .btns { flex-wrap: wrap; } }
.md-hero { padding-bottom: clamp(16px, 2vw, 28px) !important; }
.md-pic img { max-height: calc(100svh - var(--nav-h) - 88px); }
@media (max-width: 900px) { .md-pic img { max-height: 62svh; } }

/* Modell-Detailseite: Bilderleiste links neben dem Automaten */
.md-gal { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(12px, 1.6vw, 22px); align-items: center; min-width: 0; }
.md-th { display: grid; gap: 10px; align-content: center; }
.md-t { width: 78px; height: 78px; padding: 5px; border-radius: 18px; background: #fff; border: 2px solid transparent; cursor: pointer;
  box-shadow: 0 10px 22px -16px rgba(11,90,41,.55); transition: border-color .25s, translate .2s, box-shadow .25s; }
.md-t img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 12px; } .md-t-d img { object-fit: cover; }
.md-t:hover { translate: 3px 0; } .md-t.on { border-color: #22c55e; box-shadow: 0 14px 26px -14px rgba(34,197,94,.7); }
.md-t:focus-visible { outline: 3px solid #86efac; outline-offset: 2px; }
.md-pic img { transition: opacity .25s; } .md-pic img.md-swap { opacity: 0; }
.md-pic img.is-detail { width: 100%; max-height: calc(100svh - var(--nav-h) - 88px); object-fit: cover; border-radius: 22px; aspect-ratio: 4 / 3; }
@media (max-width: 900px) {
  .md-gal { grid-template-columns: minmax(0, 1fr); }
  .md-th { order: 2; grid-auto-flow: column; justify-content: center; overflow-x: auto; padding: 6px 6px 10px; margin: -6px 0 -4px; scrollbar-width: none; } .md-th::-webkit-scrollbar { display: none; }
  .md-t { width: 62px; height: 62px; border-radius: 15px; } .md-t:hover { translate: 0 -2px; }
}

/* Bilderleiste wie im Showroom: Originalfotos + 3D-Kachel */
.md-t-p img { object-fit: cover; } .md-t-3d { position: relative; }
.md-t-3d b { position: absolute; left: 50%; bottom: 8px; translate: -50% 0; padding: 4px 10px; border-radius: 999px; font: 800 12px/1 inherit; color: #fff; background: rgba(15,21,17,.82); }
.md-pic img.is-detail { aspect-ratio: 16 / 9.2; }
/* Bildbereich hat eine feste Größe, egal ob Render (quadratisch) oder Foto (16:9): die Seite springt beim Wechseln nicht */
.md-pic { aspect-ratio: 1 / 1; width: min(100%, calc(100svh - var(--nav-h) - 88px)); margin: 0 auto; display: grid; place-items: center; }
.md-pic img { max-width: 100%; max-height: 100%; width: auto; height: auto; }
.md-pic img.is-detail { width: 100%; height: auto; max-height: 100%; aspect-ratio: 16 / 9.2; }
@media (max-width: 900px) { .md-pic { width: 100%; } }

/* Drehbarer Automat (wie im Showroom): Canvas über dem Bild, Hinweis, Zoom, Ladebalken; Box bleibt gleich groß */
.md-pic { position: relative; overflow: clip; border-radius: 26px; cursor: grab; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.md-pic:active { cursor: grabbing; } .md-pic:focus-visible { outline: 3px solid #86efac; outline-offset: 2px; } .md-pic.zoomed { touch-action: none; }
.md-pic.photo { cursor: default; touch-action: auto; }
.md-pic.swap > img { opacity: 0 !important; }
.md-zoom { position: absolute; right: 10px; bottom: 10px; z-index: 3; display: grid; gap: 6px; }
.md-zoom button { width: 36px; height: 36px; border-radius: 12px; border: 1px solid rgba(15,21,17,.1); background: rgba(255,255,255,.9); color: #0f1511; font: 600 19px/1 inherit; cursor: pointer;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background .2s, color .2s, translate .2s; }
.md-zoom button:hover { background: #22c55e; color: #04140a; translate: 0 -2px; } .md-pic.photo .md-zoom { display: none; }

/* Modell-Detailseite wie im Showroom: links bleibt das Gerät stehen, rechts scrollt alles weiter */
.md-split { padding-top: calc(var(--nav-h) + clamp(14px, 2.6vh, 32px)) !important; padding-bottom: clamp(24px, 4vw, 56px) !important; overflow: visible !important; }
.md-grid { width: min(1320px, 100% - 48px); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.md-gal { position: sticky; top: calc(var(--nav-h) + clamp(14px, 2.6vh, 32px)); align-self: start; }
.md-right { min-width: 0; }
.md-info { min-height: min(calc(100svh - var(--nav-h) - 88px), 640px); display: flex; flex-direction: column; justify-content: center; }
.md-more { padding: clamp(36px, 6vw, 72px) 0 8px; }
.md-more .eyebrow { text-align: left; margin: 0 0 6px; }
.md-more .h2 { text-align: left; font-size: clamp(1.7rem, 2.6vw, 2.3rem); line-height: 1.08; margin: 0 0 18px; }
.md-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.md-cards .card { padding: 20px 22px; }
.md-cards .card h3 { font-size: 1.1rem; } .md-cards .card p { font-size: 15px; }
@media (max-width: 980px) {
  .md-grid { grid-template-columns: minmax(0, 1fr); }
  .md-gal { position: static; } .md-info { min-height: 0; }
  .md-cards { grid-template-columns: minmax(0, 1fr); }
}

.md-zoom { z-index: 8; }
.md-pic > img:not(.is-detail) { translate: 0 var(--shift, 0%); transition: opacity .28s ease; }
/* Detailseite: kein Kasten hinter dem Automaten. Das 3D-Fenster ist durchsichtig, der Automat steht frei auf dem Seitenhintergrund;
   das Platzhalter-Standbild verschwindet, sobald das 3D läuft (sonst doppelt zu sehen). */
.md-pic { border-radius: 0; background: transparent; border: 0; box-shadow: none; }

/* ===== Detailseite wie im Showroom: erster Bildschirm passt genau, links bleibt stehen, rechts scrollt ===== */
.md-split { --mdh: max(520px, calc(100svh - var(--nav-h) - 48px)); padding-top: calc(var(--nav-h) + 24px) !important; padding-bottom: clamp(24px, 3vw, 44px) !important; overflow: visible !important; }
.md-split .md-grid { align-items: start; }
.md-split .md-gal { position: sticky; top: calc(var(--nav-h) + 24px); height: var(--mdh); align-items: center; align-self: start; }
.md-split .md-pic { width: min(100%, calc(var(--mdh) - 8px)); }
.md-split .md-info { min-height: var(--mdh); justify-content: center; }
.md-split .md-pic img { max-height: 100%; }
@media (max-width: 980px) {
  .md-split .md-gal { position: static; height: auto; }
  .md-split .md-pic { width: 100%; }
  .md-split .md-info { min-height: 0; }
}

/* ===== Detailseite, Lösung A: Drehen mit den 120 Blender-Bildern (Canvas), gleiche Qualität wie das Standbild ===== */
.md-pic { cursor: grab; touch-action: pan-y; -webkit-user-select: none; user-select: none; position: relative; }
.md-pic:active { cursor: grabbing; } .md-pic.zoomed { touch-action: none; } .md-pic.photo { cursor: default; touch-action: auto; }
.md-cv { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; translate: 0 var(--shift, 0%); transform-origin: 50% 55%;
  transform: translate(var(--tx, 0px), var(--ty, 0px)) scale(var(--z, 1)); will-change: transform; }
.md-pic.has-cv .md-cv { opacity: 1; } .md-pic.has-cv > img:not(.is-detail) { opacity: 0; }
.md-pic.photo .md-cv { opacity: 0; } .md-pic.photo > img.is-detail { opacity: 1; }
.md-hint { position: absolute; left: 50%; bottom: 10px; translate: -50% 0; z-index: 3; display: inline-flex; align-items: center; gap: 8px; padding: 8px 15px; border-radius: 999px;
  font: 600 13px/1 inherit; color: #0f1511; background: rgba(255,255,255,.88); border: 1px solid rgba(15,21,17,.1); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  pointer-events: none; transition: opacity .5s, translate .5s; white-space: nowrap; }
.md-hint svg { color: #16a34a; animation: mdSpin 3.2s linear infinite; } @keyframes mdSpin { to { rotate: 360deg; } }
.md-pic.used .md-hint, .md-pic.photo .md-hint { opacity: 0; translate: -50% 10px; }
.md-load { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 4; pointer-events: none; transition: opacity .5s .3s; }
.md-load i { display: block; height: 100%; width: var(--p, 0%); background: linear-gradient(90deg, #4ade80, #22c55e); transition: width .2s; } .md-pic.ready .md-load { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .md-hint svg { animation: none; } }

/* ===== Detailseite: kleinerer Abstand unter dem Preisblock, schönere Detail-Karten, Kachel-Daten ===== */
.md-split .md-info { min-height: 0; }
.md-split .md-right { padding-top: clamp(0px, calc((var(--mdh) - 470px) / 2), 130px); }
.md-split .md-more { padding-top: clamp(28px, 4vw, 52px); }
.md-split .md-more .eyebrow { margin: 0 0 6px; }
.md-split .md-more .h2 { margin: 0 0 20px; font-size: clamp(1.8rem, 2.8vw, 2.5rem); letter-spacing: -.035em; }
.md-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.md-card { position: relative; overflow: hidden; isolation: isolate; display: grid; align-content: start; border-radius: 24px; background: #fff; border: 1px solid rgba(15,21,17,.08);
  box-shadow: 0 22px 44px -34px rgba(11,90,41,.5); transition: border-color .3s, box-shadow .3s, translate .25s; }
.md-card:hover { border-color: rgba(34,197,94,.5); box-shadow: 0 30px 56px -34px rgba(11,90,41,.65); translate: 0 -3px; }
.md-card-i { aspect-ratio: 16 / 9.2; overflow: hidden; background: #eef2ee; }
.md-card-i img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.md-card:hover .md-card-i img { transform: scale(1.06); }
.md-card-b { display: grid; gap: 5px; padding: 15px 18px 18px; }
.md-card-b .eyebrow { margin: 0; font-size: 11.5px; letter-spacing: .1em; }
.md-card-b h3 { margin: 0; font-size: 1.12rem; letter-spacing: -.02em; line-height: 1.2; }
.md-card-b p { margin: 0; font-size: 14.5px; line-height: 1.5; color: #475569; }
.md-specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
.md-specs > div { display: grid; gap: 5px; padding: 14px 18px; border-radius: 18px; background: #fff; border: 1px solid rgba(15,21,17,.08);
  box-shadow: 0 14px 28px -24px rgba(11,90,41,.5); transition: border-color .25s, translate .25s; }
.md-specs > div:hover { border-color: rgba(34,197,94,.5); translate: 0 -2px; }
.md-specs dt { margin: 0; font: 800 11px/1.2 inherit; letter-spacing: .1em; text-transform: uppercase; color: #16a34a; }
.md-specs dd { margin: 0; font-size: 15.5px; line-height: 1.35; font-weight: 700; color: #0f1511; overflow-wrap: anywhere; }
@media (max-width: 980px) { .md-split .md-right { padding-top: 0; } .md-cards { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .md-specs { grid-template-columns: minmax(0, 1fr); } }
/* Hinweis "Ziehen zum Drehen": Desktop unter der Bildbox; Mobil dezent schwebend über dem Automaten */
.md-pic { overflow: visible; } .md-pic.zoomed { overflow: clip; }
.md-hint { bottom: -42px; white-space: nowrap; }
@media (max-width: 980px) {
  .md-split { padding-top: calc(var(--nav-h) + 26px) !important; }
  .md-hint {
    top: -16px;
    bottom: auto;
    font-size: 11px;
    font-weight: 500;
    padding: 4px 11px;
    gap: 5px;
    color: #1a261e;
    background: rgba(255, 255, 255, .78);
    border: 1px solid rgba(15, 21, 17, .08);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: 0 4px 16px -4px rgba(15, 21, 17, .12);
    letter-spacing: -.01em;
  }
  .md-hint svg { width: 12px; height: 12px; }
  .md-pic.used .md-hint,
  .md-pic.photo .md-hint {
    opacity: 0;
    translate: -50% -8px;
  }
  .md-grid { gap: 6px !important; }
  .md-gal { gap: 6px !important; padding-bottom: 0; }
  .md-t { width: 56px !important; height: 56px !important; }
  .md-info { display: flex; flex-direction: column; }
  .md-price { order: -1; margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
  .md-price .eyebrow { margin: 0 0 1px !important; }
  .md-price .price { margin: 0 !important; }
  .md-price .price-note { margin: 1px 0 0 !important; }
  .md-price .btns { margin-top: 6px !important; }
}

/* "Weitere Modelle" auf der Detailseite: gleiche Breite und Kartengröße wie "Alle Modelle im Überblick" auf der Startseite */
.md-others { --wrap: min(1320px, 100% - 48px); }


/* Performance: GPU-Layer fuer 120 FPS beim Drehen */
.md-pic, .md-cv { will-change: transform; }

/* Handy: Kaufbereich als kompakte Karte direkt unter dem Automaten, damit Preis und Knopf ohne Scrollen sichtbar sind */
.md-name-m, .md-ask-m, .md-use-m { display: none; }
@media (max-width: 900px) {
  .md-name-m { display: block; margin: 0 0 4px; font-weight: 800; font-size: 1.18rem; line-height: 1.15; letter-spacing: -.02em; color: #0f1511; }
  .md-info .md-price { order: -1; margin: 12px 0 22px; padding: 14px 16px 12px; border: 1px solid rgba(34,197,94,.32); border-radius: 22px; background: #fff;
    box-shadow: 0 18px 38px -26px rgba(11,90,41,.6); }
  .md-price .eyebrow { display: none; }
  .md-price .price { gap: 8px 10px; } .md-price .price .now { font-size: 2rem; line-height: 1.05; }
  .md-hide-m { display: none; }
  .md-price .price-note { font-size: 12.5px; }
  .md-price .btns { margin-top: 10px !important; } .md-price .btns .btn { width: 100%; justify-content: center; min-height: 50px; font-size: 15px; padding-inline: 12px; white-space: nowrap; }
  .md-ask-m { display: block; margin-top: 8px; text-align: center; font-weight: 700; font-size: 14px; line-height: 1.3; color: #15803d; text-decoration: none; }
  .md-price .md-dep { margin: 6px 0 0 !important; text-align: center; font-size: 11.5px; line-height: 1.35; }
  .md-use-d { display: none; } .md-use-m { display: block; margin: 14px 0 0; color: var(--mid); }
  .md-info .md-price { display: flex; flex-direction: column; justify-content: space-between; }
}
/* Sehr niedrige Handys: Bild und Leiste etwas kleiner, damit der Reservieren-Knopf sichtbar bleibt */
@media (max-width: 900px) and (max-height: 700px) {
  .md-t { width: 48px !important; height: 48px !important; }
  .md-info .md-price { margin-top: 8px; padding: 11px 14px 9px; }
  .md-price .price .now { font-size: 1.8rem; }
}

/* Hochformat-Geraetefotos ganz zeigen (kein 16:9-Zuschnitt) */
.md-pic img.is-detail.is-fit { object-fit: contain; aspect-ratio: 1 / 1; width: 100%; height: 100%; max-height: 100%; background: #fff; }

/* Echtes 3D (<vp-3d>, model-viewer) in der Hauptbühne: liegt über dem Standbild, das als Platzhalter bleibt, bis das Modell geladen ist.
   Chips, Farben und AR der Komponente sind hier aus (Attribut bare); Zoom-Knöpfe und Hinweis kommen von der Bühne. */
.md-v3 { position: absolute; inset: 0; z-index: 2; display: block; opacity: 0; transition: opacity .35s ease; }
.md-v3 .vp3d-stage, .md-v3 .vp3d-mv { position: absolute; inset: 0; width: 100%; height: 100%; }
.md-v3 .vp3d-mv { background: transparent; --poster-color: transparent; --progress-bar-color: transparent; }
.md-v3 .vp3d-poster, .md-v3 .vp3d-note, .md-v3 .vp3d-bar, .md-v3 .vp3d-info { display: none; }
.md-pic.is-3d .md-v3 { opacity: 1; }
.md-pic.is-3d:not(.photo) > img:not(.is-detail), .md-pic.is-3d .md-cv { opacity: 0; }
.md-pic.photo .md-v3 { display: none; }
@media (prefers-reduced-motion: reduce) { .md-v3 { transition: none; } }

/* Viele Bilder in der Leiste (Werksfotos der Bauteile, 2026-11-12): Leiste scrollt in sich, statt die Buehne zu verschieben */
@media (min-width: 901px) {
  .md-th { max-height: var(--mdh, 80svh); overflow-y: auto; align-content: safe center; padding: 6px 10px 6px 6px; margin: 0 -10px 0 -6px; overscroll-behavior: contain; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(#0000, #000 14px, #000 calc(100% - 14px), #0000); mask-image: linear-gradient(#0000, #000 14px, #000 calc(100% - 14px), #0000); }
  .md-th::-webkit-scrollbar { display: none; }   /* keine sichtbare Scroll-Leiste (Nutzerwunsch), Rand blendet weich aus */
}
@media (max-width: 900px) { .md-th { justify-content: safe center; scroll-snap-type: x proximity; } .md-t { scroll-snap-align: center; } }