/* =====================================================================
   Piening – Fidelity-Korrekturen für die TYPO3-Migration
   Wird NACH der Webflow-CSS geladen und überschreibt gezielt.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Quick-Stack-Layouts:
   In Webflow kommen die Spalten aus individuellen #w-node-…-IDs, die beim
   Nachbau als Content-Elemente fehlen. Ergebnis: Sektionen fallen auf 1 Spalte.
   Fix: Quick-Stacks ohne ID bekommen 2 Spalten als sinnvolle Vorgabe.
   (Original-Layouts mit #w-node-ID behalten Vorrang – ID schlägt Klasse.)
   Betrifft: brand-slider, quote, media-columns-Intro, product-feature.
   gallery überschreibt per Inline-Style selbst und bleibt unberührt.
   --------------------------------------------------------------------- */
.default-quick-stack {
    grid-template-columns: 1fr 1fr;
    align-items: center;
}

@media (max-width: 767px) {
    .default-quick-stack {
        grid-template-columns: 1fr;
    }
}

/* ---------------------------------------------------------------------
   Produkt-Karten Hover (verlorene Webflow-IX2-Interaktion):
   Default heller Kopf → beim Hover verdunkeln, damit der weiße „ECO"-Titel
   sichtbar wird. Sanfte Überblendung.
   --------------------------------------------------------------------- */
.produkt-card-header {
    transition: background-color .35s ease;
}
.produkt-card-image {
    transition: transform .35s ease;
}
.orodukt-card-subtitle {
    transition: color .35s ease;
}
.produkt-card:hover .produkt-card-header {
    background-color: #4d4d4d;
}
.produkt-card:hover .produkt-card-image {
    transform: scale(1.12);
}
.produkt-card:hover .orodukt-card-subtitle {
    color: var(--colors--white);
}

/* ---------------------------------------------------------------------
   Footer: 3-Spalten-Layout (CTA | Kontakt | Sitemap).
   Kam in Webflow aus einer #w-node-ID, die beim Nachbau fehlt.
   --------------------------------------------------------------------- */
.footer-quick-stack {
    grid-template-columns: 1.5fr 1fr 1fr;
}
@media (max-width: 991px) {
    .footer-quick-stack {
        grid-template-columns: 1.5fr 1fr;
    }
}
@media (max-width: 767px) {
    .footer-quick-stack {
        grid-template-columns: 1fr;
    }
}

/* Footer-Meta: Abstand zwischen „Datenschutz" und „Impressum"
   (das Leerzeichen aus dem HTML-Quelltext geht bei der Fluid-Ausgabe verloren). */
.footer-meta .footer-link + .footer-link {
    margin-left: .75rem;
}

/* ---------------------------------------------------------------------
   Medien-Spalten (helle Variante, z. B. Loop-Video-Reihe):
   fette Titel in Markenorange (im Original highlight-text-primary).
   Die dunkle Technik-Sektion (.content-section.dark) bleibt weiß.
   --------------------------------------------------------------------- */
.content-section:not(.dark) .icon-text-kasten .w-richtext strong {
    color: var(--colors--primary);
}

/* ---------------------------------------------------------------------
   Farbauswahl-Dropdown: Chevron dreht beim Öffnen (die Webflow-JS würde
   das per IX2 machen; hier per w--open-Klasse aus piening-custom.js).
   --------------------------------------------------------------------- */
.farbauswahl-dropdown-toggle .w-icon-dropdown-toggle {
    transition: transform .2s;
}
.farbauswahl-dropdown-toggle.w--open .w-icon-dropdown-toggle {
    transform: rotate(180deg);
}

/* ---------------------------------------------------------------------
   Lightbox-Overlay (Galerie mit Lightbox-Option). Die eigentliche
   Klapp-/Navigations-Logik steckt in piening-custom.js.
   --------------------------------------------------------------------- */
.pv-lightbox-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .9);
}
.pv-lightbox-overlay.open {
    display: flex;
}
.pv-lightbox-overlay .pv-lb-img {
    max-width: 90vw;
    max-height: 85vh;
    object-fit: contain;
    box-shadow: 0 2px 40px rgba(0, 0, 0, .6);
}
.pv-lb-close,
.pv-lb-prev,
.pv-lb-next {
    position: absolute;
    background: none;
    border: 0;
    color: #fff;
    cursor: pointer;
    font-size: 2.5rem;
    line-height: 1;
    padding: .5rem 1rem;
    opacity: .8;
    transition: opacity .2s;
}
.pv-lb-close:hover,
.pv-lb-prev:hover,
.pv-lb-next:hover {
    opacity: 1;
}
.pv-lb-close { top: 1rem; right: 1.5rem; font-size: 3rem; }
.pv-lb-prev { left: 1rem; }
.pv-lb-next { right: 1rem; }
@media (max-width: 767px) {
    .pv-lb-prev, .pv-lb-next { font-size: 2rem; }
}

/* ---------------------------------------------------------------------
   Galerie mit hellgrauem Hintergrund: Innenabstand, damit der graue
   Bereich wie im Original (content-section light) atmet.
   --------------------------------------------------------------------- */
.gallery-section.light {
    padding: 4.5rem 2.5rem;
}
@media (max-width: 767px) {
    .gallery-section.light {
        padding: 2.5rem 1.25rem;
    }
}

/* ---------------------------------------------------------------------
   Vorher-Nachher-Slider (Content-Block „before-after-slider").
   Zwei deckungsgleiche Bilder; das „Vorher"-Bild wird per clip-path auf
   die linke Seite beschnitten. Trenner per Maus/Touch ziehbar (JS in
   piening-custom.js). Eigenständig – nutzt NICHT die alten .before/.after-
   Regeln der Webflow-CSS.
   --------------------------------------------------------------------- */
.pv-ba {
    position: relative;
    width: 100%;
    height: 550px;
    margin: 50px 0 100px;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
}
.pv-ba__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.pv-ba__after  { z-index: 1; }
.pv-ba__before {
    z-index: 2;
    clip-path: inset(0 50% 0 0);
    -webkit-clip-path: inset(0 50% 0 0);
}
.pv-ba__handle {
    z-index: 5;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 5px;
    margin-left: -2.5px;
    background-color: #e63f11cc;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: ew-resize;
}
.pv-ba__knob {
    width: 50px;
    height: 38px;
    min-width: 37px;
    border-radius: 50px;
    background-color: var(--colors--primary, #e63f11);
    box-shadow: 0 0 10px 1px #000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
}
@media (max-width: 767px) {
    .pv-ba { height: 360px; margin: 2.5rem 0 3.5rem; }
}

/* ---------------------------------------------------------------------
   Karriere / Stellenliste (job-list):
   Im Webflow-Original standen diese zwei Regeln inline im <head>.
   Beim Nachbau als Content-Element hierher zentralisiert.
   --------------------------------------------------------------------- */
.stellenanzeigen-wrapper:last-child { border: none; }
.list-item::marker { color: var(--colors--primary, #e63f11); }

/* ---------------------------------------------------------------------
   EXT:form – Formulare im Piening-/Webflow-Look (Phase 5)
   Bewerbung + Kontakt teilen dieselbe Optik. Das Formular-Frame wird
   selbst zur dunklen Sektion (Original: content-section dark).
   EXT:form-Markup:
     .frame-type-form_formframework > form
       > div (versteckte State-Inputs)          <- display:contents
       > .form-group > .form-label + .input > .form-control
       > .form-group … .input.checkbox .form-check   (Datenschutz)
       > input[honeypot]  (position:absolute, außerhalb des Rasters)
       > .actions … .btn.btn-primary
   --------------------------------------------------------------------- */

/* Dunkle Sektion + zentrierter Container (wie .content-section.dark + .container) */
.frame-type-form_formframework {
    background-color: var(--colors--dark);
    color: var(--colors--white);
    padding-top: 3.75rem;
    padding-bottom: 3.75rem;
}
/* Feld-Optik gilt für das eigenständige Frame UND das eingebettete Formular (.pv-form im contact-hero). */
:is(.frame-type-form_formframework, .pv-form) > form {
    max-width: 940px;
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: var(--sizes--element-margin-s, 1rem);
    grid-row-gap: 1rem;
    align-items: start;
}
/* Versteckte State-Inputs (erster <div>) nehmen keine Rasterzelle ein */
:is(.frame-type-form_formframework, .pv-form) > form > div:first-child { display: contents; }

/* Formular-Überschrift (StaticText) über die volle Breite */
:is(.frame-type-form_formframework, .pv-form) > form > .heading-3 { grid-column: 1 / -1; margin: 0 0 .5rem; }

/* Zeilen: Name|Stelle und E-Mail|Telefon nebeneinander; Rest volle Breite */
:is(.frame-type-form_formframework, .pv-form) .form-group { margin: 0; }
:is(.frame-type-form_formframework, .pv-form) .form-group:has(textarea),
:is(.frame-type-form_formframework, .pv-form) .form-group:has(.checkbox),
:is(.frame-type-form_formframework, .pv-form) .actions { grid-column: 1 / -1; }

/* Labels */
:is(.frame-type-form_formframework, .pv-form) .form-label {
    display: block;
    margin: 0 0 .35rem;
    font-size: var(--sizes--font-size-s, 1rem);
    color: var(--colors--white);
}
:is(.frame-type-form_formframework, .pv-form) .required { color: var(--colors--primary); }

/* Eingabefelder = .w-input-Look */
:is(.frame-type-form_formframework, .pv-form) .form-control {
    display: block;
    width: 100%;
    height: 38px;
    padding: 8px 12px;
    margin: 0;
    font-size: 14px;
    line-height: 1.428;
    color: #333;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 0;
}
:is(.frame-type-form_formframework, .pv-form) textarea.form-control {
    height: auto;
    min-height: 120px;
    resize: vertical;
}
:is(.frame-type-form_formframework, .pv-form) .form-control::placeholder { color: #999; }
:is(.frame-type-form_formframework, .pv-form) .form-control:focus { border-color: var(--colors--primary); outline: 0; }

/* Datenschutz-Checkbox */
:is(.frame-type-form_formframework, .pv-form) .form-check-label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: var(--sizes--font-size-xs, .875rem);
    cursor: pointer;
}
:is(.frame-type-form_formframework, .pv-form) .form-check input[type="checkbox"] {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    margin: 2px 0 0;
    box-shadow: 1px 1px 6px #0000001a;
}

/* Absenden-Button = .form-submit-button */
:is(.frame-type-form_formframework, .pv-form) .actions .btn {
    background-color: var(--colors--primary);
    color: var(--colors--white);
    font-size: var(--sizes--font-size-s, 1rem);
    text-transform: uppercase;
    font-weight: 700;
    padding: .9375rem 2.5rem;
    margin-top: 1.25rem;
    border: 0;
    border-radius: 0;
    cursor: pointer;
    display: inline-block;
}
:is(.frame-type-form_formframework, .pv-form) .actions .btn:hover { background-color: var(--colors--black); }
/* Bootstrap-Toolbar-Reste neutralisieren */
:is(.frame-type-form_formframework, .pv-form) .form-navigation,
:is(.frame-type-form_formframework, .pv-form) .btn-toolbar,
:is(.frame-type-form_formframework, .pv-form) .btn-group { display: block; margin: 0; padding: 0; }

/* Formular in der rechten Spalte des Kontakt-Heros (Backend-Layout „kontakt"):
   dunkle Box statt Vollbreiten-Sektion. Das Frame liefert Hintergrund/Farbe,
   die Feld-Optik kommt aus den :is(...)-Regeln oben. */
.kontakt-hero-form .frame-type-form_formframework {
    padding: 1.5rem;
}
.kontakt-hero-form .frame-type-form_formframework > form {
    max-width: none;
    padding: 0;
}

/* Mobil: eine Spalte */
@media (max-width: 767px) {
    :is(.frame-type-form_formframework, .pv-form) > form { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   Scroll-Reveal
   Elemente mit [data-pv-reveal] starten unsichtbar und leicht versetzt und
   werden per IntersectionObserver eingeblendet, sobald sie beim Scrollen in
   den Viewport kommen – „nach und nach". Eigenständiger Ersatz für die
   Webflow-IX2-Scroll-Animation (Produktdetail-Header u. a.).

   Der versteckte Startzustand gilt nur, wenn JS läuft (html.pv-reveal-on wird
   vom Skript gesetzt). Ohne JS bleiben die Inhalte sichtbar – kein Blockieren.
   Richtung über data-pv-reveal="up|right|left" (Default: up), zeitlicher
   Versatz über --pv-reveal-delay.
   --------------------------------------------------------------------------- */
.pv-reveal-on [data-pv-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s ease, transform .7s ease;
    transition-delay: var(--pv-reveal-delay, 0ms);
    will-change: opacity, transform;
}
.pv-reveal-on [data-pv-reveal="right"] { transform: translateX(48px); }
.pv-reveal-on [data-pv-reveal="left"]  { transform: translateX(-48px); }

.pv-reveal-on [data-pv-reveal].pv-reveal--in {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .pv-reveal-on [data-pv-reveal] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ---------------------------------------------------------------------------
   Produktdetail-Header – gepinnte Scroll-„Kamera" (originalgetreu)
   Nachbau der Webflow-IX2-Sektion ohne IX2. Der Track ist mehrere Viewport-
   Höhen hoch, die Kamera bleibt sticky. Beim Scrollen:
     • Fortschrittsbalken füllt sich kontinuierlich (--p, vom Skript gesetzt).
     • Diskrete Schritte (nicht gescrubbt): je Schritt klappt ein Absatz auf
       (.pv-scrub__item.is-open) und ein Detailbild fliegt von rechts ein
       (.pv-scrub__img.is-in). Beim ersten Schritt blendet das Basisbild aus
       (.pv-scrub__img--base.is-out). Die Bewegung ist eine reine 0,5-s-CSS-
       Transition (easeInOut) – dadurch spielt Zurückscrollen sauber rückwärts.
   Original-Werte: Bild-Offset 16rem, Absätze klappen per Höhe auf, nur die
   Absätze animieren – Überschriften bleiben sichtbar.

   Aktiv nur unter html.pv-scrub-on (Skript, nur Desktop, keine reduzierte
   Bewegung). Sonst statisches Layout mit voll sichtbaren Inhalten.
   --------------------------------------------------------------------------- */

/* Basis-/Fallback-Layout (ohne aktiven Scrub) */
.pv-scrub__camera {
    padding-top: var(--sizes--element-margin-l, 4rem);
    padding-bottom: var(--sizes--element-margin-l, 4rem);
}
.pv-scrub__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 48px;
    align-items: center;
}
.pv-scrub__text {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 28px;
}
.pv-scrub__title-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}
.pv-scrub__icon { width: 3rem; height: 3rem; object-fit: contain; flex: none; }
.pv-scrub__title {
    font-weight: 700;
    font-size: 2rem;
    line-height: 1.15;
    color: var(--colors--dark, #1d1d1d);
}
.pv-scrub__text-p { margin: 0; }
.pv-scrub__rail { display: none; }
.pv-scrub__stage {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.pv-scrub__img { display: block; max-width: 100%; height: auto; }

/* Aktiver Scrub (nur Desktop, keine reduzierte Bewegung) */
.pv-scrub-on .pv-scrub {
    position: relative;
    height: calc(var(--pv-scrub-steps, 4) * 100vh);
    height: calc(var(--pv-scrub-steps, 4) * 100svh);
}
.pv-scrub-on .pv-scrub__camera {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    padding: 0;
    display: flex;
    align-items: center;
    overflow: hidden;
}
/* Container zentriert (etwas breiter als Standard). Positionsbezug der Bildbühne
   ist die Kamera (sticky, volle Viewport-Höhe) – daher hier NICHT positioniert,
   damit sich top/left/right der Bühne auf den Viewport beziehen. */
.pv-scrub-on .pv-scrub__camera > .container {
    width: 100%;
    max-width: 1320px;
    padding-left: clamp(20px, 4vw, 64px);
    padding-right: 0;
}
.pv-scrub-on .pv-scrub__layout { display: block; }
.pv-scrub-on .pv-scrub__text {
    width: 48%;
    padding-left: 28px;
}

/* Fortschrittsbalken links neben der Textspalte (kontinuierlich, --p) */
.pv-scrub-on .pv-scrub__rail {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--colors--light, #e6e6e6);
    overflow: hidden;
}
.pv-scrub-on .pv-scrub__rail-fill {
    position: absolute;
    inset: 0;
    background: var(--colors--primary, #c8102e);
    transform-origin: top center;
    transform: scaleY(var(--p, 0));
}

/* Absätze klappen auf/zu (Überschriften bleiben immer sichtbar).
   grid-template-rows 0fr↔1fr animiert sauber auf die Inhaltshöhe – in beide
   Richtungen, dadurch spielt das Zurückscrollen korrekt rückwärts. */
.pv-scrub-on .pv-scrub__textbox {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows .5s ease-in-out, opacity .5s ease-in-out;
}
.pv-scrub-on .pv-scrub__textbox > * { overflow: hidden; min-height: 0; }
.pv-scrub-on .pv-scrub__item.is-open .pv-scrub__textbox {
    grid-template-rows: 1fr;
    opacity: 1;
}

/* Bildbühne – absolut positioniert, vertikal zentriert; bricht nach rechts bis
   knapp an den Viewport-Rand aus (Bleed). Das % in calc() bezieht sich korrekt
   auf den Container (Positionskontext), daher kein Überschießen.
   Je Schritt ist genau EIN Bild sichtbar; das vorige blendet aus (kein Stapel). */
.pv-scrub-on .pv-scrub__stage {
    position: absolute;
    top: -2vh;                                 /* oben verankert – kleiner = höher */
    left: 50%;
    right: clamp(16px, 2vw, 48px);             /* knapp vor dem rechten Rand */
    height: min(78vh, 800px);
    display: grid;
    grid-template: 1fr / 1fr;
    place-items: start end;                    /* Bild am OBEREN (und rechten) Rand */
}
.pv-scrub-on .pv-scrub__img {
    grid-area: 1 / 1;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: contain;
    object-position: right top;
    transition: opacity .5s ease-in-out, transform .5s ease-in-out;
    will-change: opacity, transform;
}
/* Detailbilder starten ausgeblendet + versetzt, kommen mit .is-in herein */
.pv-scrub-on .pv-scrub__img[data-pv-step-img] {
    opacity: 0;
    transform: translate(var(--dx, 16rem), var(--dy, 0));
}
.pv-scrub-on .pv-scrub__img[data-pv-step-img].is-in {
    opacity: 1;
    transform: none;
}
/* „Vergangen": blendet aus, sobald das nächste Bild kommt (bleibt an Ort) */
.pv-scrub-on .pv-scrub__img[data-pv-step-img].is-in.is-out {
    opacity: 0;
}
/* Basisbild sichtbar, blendet beim ersten Schritt aus */
.pv-scrub-on .pv-scrub__img--base { opacity: 1; }
.pv-scrub-on .pv-scrub__img--base.is-out { opacity: 0; }

@media (max-width: 767px) {
    .pv-scrub__layout { grid-template-columns: 1fr; gap: 28px; }
}


/* ---------------------------------------------------------------------------
   Produktdetail – Detailbild-Switch beim Scrollen (Content-Block
   „Feature Sektion Produktdetail"). Originalgetreuer Nachbau der Webflow-
   IX2-Aktion „Produktdetail Switch [Scroll]": mehrere Detailbilder liegen
   gestapelt übereinander; je nach Scroll-Fortschritt der Sektion durchs
   Bild blendet piening-custom.js das jeweils aktive Bild ein (Klasse
   .pv-switch-active) und die übrigen aus – weiche Überblendung per
   CSS-Transition. Ohne JS bleibt das erste Bild sichtbar (Fallback), da es
   im Markup bereits .pv-switch-active trägt.
   --------------------------------------------------------------------------- */
[data-pv-switch] > .produktdetail-small-image-switch {
    opacity: 0;
    transition: opacity .6s ease;
}
[data-pv-switch] > .produktdetail-small-image-switch.pv-switch-active {
    opacity: 1;
}
/* Reduzierte Bewegung: harter Wechsel statt Überblendung, Inhalt bleibt erreichbar */
@media (prefers-reduced-motion: reduce) {
    [data-pv-switch] > .produktdetail-small-image-switch { transition: none; }
}


/* ---------------------------------------------------------------------------
   Content-Block „Produktspalten mit Varianten-Tabs" (variant-columns).
   Nachbau des Eco/Eco+-Blocks der alten Startseite: zwei Spalten nebeneinander,
   je Spalte Reiter (Klinker/WDVS) mit Bild, optionale Stärken-Auswahl
   (40–120 mm) und Hover-Punkte (ersetzen die alten Image-Maps mit nhpup).
   Eigenes Grid – bewusst KEIN Webflow-Quick-Stack (dort fehlen die #w-node-IDs).
   --------------------------------------------------------------------------- */
.pv-varcols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 3rem;
}
/* Trennlinie zwischen den Spalten wie im Original */
.pv-varcol + .pv-varcol {
    border-left: 1px solid #dcdcdc;
    padding-left: 3rem;
}
.content-section.dark .pv-varcol + .pv-varcol { border-left-color: #3a3a3a; }

.pv-varcol__title { margin-top: 0; }
.pv-varcol__subtitle {
    margin: 0 0 var(--sizes--element-margin-s, .9375rem);
    font-size: var(--sizes--font-size-m, 1.25rem);
    font-weight: 700;
    line-height: 1.3;
}

/* --- Reiter (Klinker / WDVS) ------------------------------------------- */
.pv-vartabs { margin-top: var(--sizes--element-margin-m, 1.875rem); }
.pv-vartabs__menu {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    border-bottom: 1px solid #dcdcdc;
}
.pv-vartabs__link {
    appearance: none;
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    padding: .55rem 1.1rem;
    font-family: inherit;
    font-size: var(--sizes--font-size-xs, 1rem);
    font-weight: 600;
    color: var(--colors--dark-font, #666);
    cursor: pointer;
    transition: color .25s ease, border-color .25s ease;
}
.pv-vartabs__link:hover { color: var(--colors--dark, #1d1d1d); }
.pv-vartabs__link.is-active {
    color: var(--colors--dark, #1d1d1d);
    border-bottom-color: var(--colors--primary, #e63f11);
}
.content-section.dark .pv-vartabs__link.is-active,
.content-section.dark .pv-vartabs__link:hover { color: var(--colors--white, #fff); }
.pv-vartabs__pane:not(.is-active) { display: none; }

/* --- Bildbühne + Hover-Punkte ------------------------------------------ */
.pv-varstage {
    position: relative;
    margin-top: var(--sizes--element-margin-s, .9375rem);
}
.pv-varstage__img {
    display: block;
    width: 100%;
    height: auto;
}
.pv-varhotspot {
    position: absolute;
    left: var(--pv-x, 50%);
    top: var(--pv-y, 50%);
    width: var(--pv-w, 12%);
    height: var(--pv-h, 12%);
}
.pv-varhotspot__btn {
    appearance: none;
    width: 100%;
    height: 100%;
    padding: 0;
    background: none;
    border: 2px solid transparent;
    cursor: help;
    transition: background-color .25s ease, border-color .25s ease;
}
.pv-varhotspot:hover .pv-varhotspot__btn,
.pv-varhotspot__btn:focus-visible {
    border-color: var(--colors--primary, #e63f11);
    background-color: #e63f1126;
    outline: none;
}
.pv-varpopup {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    width: max-content;
    max-width: min(280px, 70vw);
    padding: 10px 12px;
    border: 3px solid var(--colors--primary, #e63f11);
    background-color: #e63f11eb;
    color: var(--colors--white, #fff);
    font-size: .95rem;
    line-height: 1.35;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease;
}
.pv-varpopup--left { left: auto; right: 0; transform: none; }
.pv-varpopup--up { top: auto; bottom: calc(100% + 8px); }
.pv-varhotspot:hover .pv-varpopup,
.pv-varhotspot:focus-within .pv-varpopup {
    opacity: 1;
    visibility: visible;
}
.pv-varpopup__title { display: block; margin-bottom: .25rem; }
.pv-varpopup__text p:last-child { margin-bottom: 0; }
.pv-varpopup__img {
    display: block;
    width: 100%;
    height: auto;
    margin-top: 8px;
}

/* --- Stärken-Auswahl (40 / 60 / 80 / 100 / 120 mm) --------------------- */
.pv-varsteps { margin-top: var(--sizes--element-margin-s, .9375rem); }
.pv-varsteps__label {
    margin-bottom: 1.25rem;
    color: var(--colors--primary, #e63f11);
    font-weight: 700;
}
.pv-varsteps__track { display: flex; }
.pv-varsteps__step {
    position: relative;
    flex: 1 1 0;
    appearance: none;
    background: none;
    border: 0;
    border-top: 1px solid #dcdcdc;
    padding: .9rem .2rem 0;
    font-family: inherit;
    font-size: var(--sizes--font-size-xs, 1rem);
    color: var(--colors--dark-font, #666);
    cursor: pointer;
    transition: color .25s ease;
}
.pv-varsteps__step:hover { color: var(--colors--primary, #e63f11); }
.pv-varsteps__step.is-active {
    color: var(--colors--dark, #1d1d1d);
    font-weight: 700;
}
.content-section.dark .pv-varsteps__step.is-active { color: var(--colors--white, #fff); }
/* Oranger Zeiger über der Linie – markiert die aktive Stärke */
.pv-varsteps__marker {
    position: absolute;
    top: -9px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 9px solid var(--colors--primary, #e63f11);
    opacity: 0;
    transition: opacity .25s ease;
}
.pv-varsteps__step.is-active .pv-varsteps__marker { opacity: 1; }

.pv-varcol__footnote { margin-top: var(--sizes--element-margin-m, 1.875rem); }

.pv-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 767px) {
    .pv-varcols { gap: 2.5rem; }
    .pv-varcol + .pv-varcol {
        border-left: 0;
        border-top: 1px solid #dcdcdc;
        padding-left: 0;
        padding-top: 2.5rem;
    }
    .pv-varsteps__step { font-size: .8rem; }
    .pv-varpopup { max-width: min(240px, 80vw); }
}

@media (prefers-reduced-motion: reduce) {
    .pv-vartabs__link,
    .pv-varhotspot__btn,
    .pv-varpopup,
    .pv-varsteps__step,
    .pv-varsteps__marker { transition: none; }
}


/* ---------------------------------------------------------------------------
   Content-Block „Kastenplaner" (kastenplaner).
   Links die Schnittzeichnung mit prozentual positionierten Maßbeschriftungen,
   rechts das Bedienfeld (im Original eine hellgraue Box).
   --------------------------------------------------------------------------- */
.pv-khp {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 3rem;
    align-items: start;
    margin-top: var(--sizes--element-margin-m, 1.875rem);
}
.pv-khp__stage {
    position: relative;
    max-width: 500px;
    margin-inline: auto;
    font-weight: 700;
}
.pv-khp__img {
    display: block;
    width: 100%;
    height: auto;
}
.pv-khp__val {
    position: absolute;
    transform: translateY(-50%);
    font-size: clamp(.75rem, 2.6vw, 1.125rem);
    line-height: 1;
    white-space: nowrap;
}
.pv-khp__val[data-pv-khp-val="frontplatte"] {
    transform: translateX(-50%);
}
/* Unsinnige Kombination: „keinen_Sinn.png" trägt die Aussage selbst */
.pv-khp--invalid .pv-khp__val { display: none; }

.pv-khp__panel {
    background-color: var(--colors--light, #f2f2f2);
    padding: 1.75rem;
}
.content-section.light .pv-khp__panel { background-color: var(--colors--white, #fff); }

.pv-khp__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}
.pv-khp__field {
    display: block;
}
.pv-khp__field--inline {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: .75rem;
}
.pv-khp__label {
    display: block;
    margin-bottom: .4rem;
    font-weight: 700;
    font-size: var(--sizes--font-size-xs, 1rem);
}
.pv-khp__field--inline .pv-khp__label { margin-bottom: 0; }
.pv-khp select {
    appearance: none;
    background: var(--colors--white, #fff) url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23666' stroke-width='2'/%3E%3C/svg%3E") no-repeat right .75rem center/12px 8px;
    border: 1px solid #dcdcdc;
    padding: .6rem 2.2rem .6rem .75rem;
    font-family: inherit;
    font-size: var(--sizes--font-size-xs, 1rem);
    color: inherit;
    cursor: pointer;
    min-width: 6.5rem;
}
.pv-khp select:focus-visible {
    outline: 2px solid var(--colors--primary, #e63f11);
    outline-offset: 1px;
}
.pv-khp__note {
    margin: .75rem 0 1.25rem;
    font-size: var(--sizes--font-size-xs, 1rem);
}
.pv-khp__note p:last-child { margin-bottom: 0; }
.pv-khp__result {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    margin: .25rem 0;
}
.pv-khp__out {
    color: var(--colors--primary, #e63f11);
    font-size: 1.625rem;
    font-weight: 700;
    line-height: 1;
}

@media (max-width: 767px) {
    .pv-khp {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .pv-khp__panel { padding: 1.25rem; }
}


/* ---------------------------------------------------------------------------
   Content-Block „U-/Psi-Wert-Tabelle" (u-value-table).
   8 Spalten – auf schmalen Schirmen scrollt die Tabelle in ihrem eigenen
   Container, das Seitenlayout bleibt heil. Standardpositionen orange wie im
   Original (.standardposition { color:#fff; background:#e63f10 }).
   --------------------------------------------------------------------------- */
.pv-uvt { margin-top: var(--sizes--element-margin-m, 1.875rem); }
.pv-uvt__heading {
    margin: 0 0 .75rem;
    font-size: var(--sizes--font-size-m, 1.25rem);
    font-weight: 700;
}
.pv-uvt__scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.pv-uvt__table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--sizes--font-size-xs, 1rem);
    text-align: center;
}
.pv-uvt__table th,
.pv-uvt__table td {
    border: 1px solid #dcdcdc;
    padding: .5rem .6rem;
    white-space: nowrap;
    font-weight: 400;
}
.pv-uvt__table thead th {
    background-color: var(--colors--light, #f2f2f2);
    font-weight: 700;
    vertical-align: bottom;
}
.content-section.light .pv-uvt__table thead th { background-color: var(--colors--white, #fff); }
.pv-uvt__table tbody th { font-weight: 700; }
.pv-uvt__table tr.is-standard th,
.pv-uvt__table tr.is-standard td {
    background-color: var(--colors--primary, #e63f11);
    border-color: var(--colors--primary, #e63f11);
    color: var(--colors--white, #fff);
}
.pv-uvt__legend { margin-top: 1rem; }
.pv-uvt__legend p:last-child { margin-bottom: 0; }


/* ---------------------------------------------------------------------------
   Content-Block „Einbausituationen-Raster" (position-grid).
   --------------------------------------------------------------------------- */
.pv-pgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 2.5rem 2rem;
    margin-top: var(--sizes--element-margin-m, 1.875rem);
}
.pv-pgrid__item { margin: 0; }
.pv-pgrid__link {
    display: block;
    position: relative;
}

/* Aufklappbare Gruppen (natives <details>) --------------------------------- */
.pv-pgrid__panel {
    border-top: 1px solid #dcdcdc;
}
.pv-pgrid__panel:last-of-type { border-bottom: 1px solid #dcdcdc; }
.pv-pgrid__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 0;
    font-size: var(--sizes--font-size-m, 1.25rem);
    font-weight: 700;
    cursor: pointer;
    list-style: none;
    transition: color .25s ease;
}
.pv-pgrid__summary::-webkit-details-marker { display: none; }
.pv-pgrid__summary:hover { color: var(--colors--primary, #e63f11); }
.pv-pgrid__summary:focus-visible {
    outline: 2px solid var(--colors--primary, #e63f11);
    outline-offset: 2px;
}
/* Plus/Minus statt Dreieck – wie das Zustandszeichen im Original */
.pv-pgrid__summary::after {
    content: "";
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    background:
        linear-gradient(currentColor, currentColor) center/100% 2px no-repeat,
        linear-gradient(currentColor, currentColor) center/2px 100% no-repeat;
    color: var(--colors--primary, #e63f11);
    transition: transform .25s ease;
}
.pv-pgrid__panel[open] .pv-pgrid__summary::after {
    background: linear-gradient(currentColor, currentColor) center/100% 2px no-repeat;
    transform: rotate(180deg);
}
.pv-pgrid__panel > .pv-pgrid { margin-bottom: 2.5rem; }
.pv-pgrid__heading {
    margin: 2.5rem 0 0;
    font-size: var(--sizes--font-size-m, 1.25rem);
    font-weight: 700;
}

/* Abzeichen: sagt vorab, dass die Kachel ein PDF öffnet (im Original fehlte
   jeder Hinweis darauf) */
.pv-pgrid__badge {
    position: absolute;
    top: .5rem;
    right: .5rem;
    padding: .15rem .45rem;
    background-color: var(--colors--primary, #e63f11);
    color: var(--colors--white, #fff);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.4;
    opacity: .9;
}
.pv-pgrid__image {
    display: block;
    width: 100%;
    height: auto;
    background-color: var(--colors--white, #fff);
    transition: transform .35s ease;
}
.pv-pgrid__link:hover .pv-pgrid__image { transform: scale(1.03); }
.pv-pgrid__caption {
    display: block;
    margin-top: .75rem;
    font-size: .9375rem;
    line-height: 1.35;
}
.pv-pgrid__position {
    display: block;
    margin-bottom: .4rem;
    color: var(--colors--primary, #e63f11);
    font-weight: 700;
    text-transform: uppercase;
}
.pv-pgrid__measure { display: block; margin-top: .35rem; }
.pv-pgrid__measure-label {
    display: block;
    color: var(--colors--dark-font, #666);
    font-size: .8125rem;
}
.pv-pgrid__measure-value { display: block; font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
    .pv-pgrid__image { transition: none; }
}