/* Self-hosted "Share Tech" (Google Fonts, self-hosted statt extern geladen - siehe
           public/.htaccess CSP und docs/security-checklist.md Risiko #6). */
        @font-face {
            font-family: 'Share Tech';
            font-style: normal;
            font-weight: 400;
            font-display: swap;
            src: url('/assets/fonts/share-tech-v23-latin-regular.woff2') format('woff2');
        }

        :root {
            --color-primary: #5F0E0D;
            --color-secondary: #A90E00;
            --color-accent: #D3A200;
            --color-bg: #232323;
            --color-bg-2: #2B2B2B;
            --color-text: #E0E0E0;
            --color-text-light: #A8A8A8;
            --color-surface: #2B2B2B;
            --color-surface-2: #333333;
            --color-border: rgba(255, 255, 255, 0.07);

            --font-heading: 'Share Tech', monospace;
            --font-body: 'Share Tech', monospace;
            --default-font-size: 1.1rem;

            --radius: 4px;
            --shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
            --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.7);
            --transition: 0.3s ease;
            --max-width: 1200px;

            /* War 60px - das Logo (50px Bild + 10px Abstand auf jeder Seite, siehe .sidebar-logo)
               braucht 70px und wurde bei 60px beschnitten (Nutzer-Feedback). */
            --sidebar-width: 84px;
            /* Hoehe fest stehender Kopfleisten (mobil: .mobile-header) und des mitlaufenden
               Preis-Schalters - Basis fuer alle sticky-Elemente darunter (Schnellmenue). */
            --kopf-fix: 60px;
            --preisleiste-hoehe: 44px;

            --popup-width: min(90vw, 1050px);
            --popup-max-height: 88dvh;

            --popup-bg: rgba(43, 43, 43, 0.88);
            --popup-backdrop: rgba(0, 0, 0, 0.55);
            --popup-border: rgba(255, 255, 255, 0.10);

            --popup-radius: 10px;
            --popup-padding: 22px;
            --popup-gap: 16px;

            --popup-scrollbar-width: 8px;
            --popup-scrollbar-bg: rgba(255, 255, 255, 0.08);
            --popup-scrollbar-thumb: rgba(211, 162, 0, 0.65);

            --popup-z-index: 9999;
        }

        *,
        *::before,
        *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        html {
            scroll-behavior: smooth;
            /* Sprunglinks (#kontakt usw.) landen unter der festen Kopfleiste statt dahinter
               (mobil .mobile-header, Desktop die mitlaufende .topnav - beides = --kopf-fix). */
            scroll-padding-top: var(--kopf-fix);
        }

        body {
            font-family: var(--font-body);
            color: var(--color-text);
            background: var(--color-bg);
            line-height: 1.6;
            font-size: var(--default-font-size);
        }

        img {
            max-width: 100%;
            height: auto;
            display: block;
        }

        a {
            color: inherit;
            text-decoration: none;
        }

        h1,
        h2,
        h3,
        h4 {
            font-family: var(--font-heading);
            line-height: 1.2;
        }

        h2 .accent {
            color: var(--color-accent);
        }

        /* H1-Akzent auf allen Seiten rot wie im Startseiten-Hero (.hero h1 .accent) */
        h1 .accent {
            color: var(--color-secondary);
        }

        /* Echtes Foto im Seitenkopf (Start, /entwicklung, /3d-druck; /lora nutzt dasselbe
           split-layout). Hochformat wird begrenzt, damit der Kopf nicht zu hoch wird. */
        .hero-bild img {
            display: block;
            width: 100%;
            height: auto;
            max-height: 520px;
            object-fit: cover;
            border-radius: var(--radius);
            border: 1px solid var(--color-accent);
        }

        @media (max-width: 767px) {
            .hero-bild img {
                max-height: 360px;
            }
        }

        h2 .icon {
            font-size: 2.4rem;
            /* margin-bottom: 16px; */
            /* display: block; */
        }

        /*
███████ ██ ██████  ███████ ██████   █████  ██████
██      ██ ██   ██ ██      ██   ██ ██   ██ ██   ██
███████ ██ ██   ██ █████   ██████  ███████ ██████
     ██ ██ ██   ██ ██      ██   ██ ██   ██ ██   ██
███████ ██ ██████  ███████ ██████  ██   ██ ██   ██
*/

        /* ===== TOPNAV (Hauptmenue, Desktop) ===== */
        .topnav {
            display: none;
        }

        /* ===== SIDEBAR NAVIGATION (Desktop) ===== */
        .sidebar {
            display: none;
        }

        /*
███    ███  ██████  ██████  ██      ██ ███████     ██   ██ ███████  █████  ██████  ███████ ██████
████  ████ ██    ██ ██   ██ ██      ██ ██          ██   ██ ██      ██   ██ ██   ██ ██      ██   ██
██ ████ ██ ██    ██ ██████  ██      ██ █████       ███████ █████   ███████ ██   ██ █████   ██████
██  ██  ██ ██    ██ ██   ██ ██      ██ ██          ██   ██ ██      ██   ██ ██   ██ ██      ██   ██
██      ██  ██████  ██████  ███████ ██ ███████     ██   ██ ███████ ██   ██ ██████  ███████ ██   ██
*/

        /* ===== MOBILE HEADER ===== */
        .mobile-header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;
            background: var(--color-bg);
            border-bottom: 2px solid var(--color-secondary);
            padding: 0 20px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .mobile-logo {
            display: flex;
            align-items: center;
            gap: 10px;
            /* Gleicher heller Verlauf wie bei .section-label: das Logo (dunkles Rot/Schwarz)
               hat auf dem dunklen Seitenhintergrund wenig Kontrast, der helle Hintergrund hebt
               es sichtbar ab. */
            background: linear-gradient(90deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 1) 60%);
            border-radius: 8px;
            /* Gleicher Abstand auf allen vier Seiten (Nutzer-Feedback: Abstand ueber "Infinity"
               soll zum Abstand unter dem "p" von "Loop" passen) - einheitlicher Wert an allen
               vier Logo-Stellen (mobile/topnav/sidebar/footer). */
            padding: 10px;
        }

        .mobile-logo img {
            height: 36px;
            width: auto;
        }

        /*
███    ██  █████  ██    ██
████   ██ ██   ██ ██    ██
██ ██  ██ ███████ ██    ██
██  ██ ██ ██   ██  ██  ██
██   ████ ██   ██   ████
*/

        .nav-toggle {
            background: none;
            border: 1px solid var(--color-secondary);
            color: var(--color-text);
            font-size: 1.4rem;
            cursor: pointer;
            padding: 6px 12px;
            font-family: var(--font-body);
            transition: var(--transition);
        }

        .nav-toggle:hover {
            background: var(--color-secondary);
        }

        .mobile-nav {
            display: none;
            position: fixed;
            top: 60px;
            left: 0;
            right: 0;
            background: var(--color-bg-2);
            z-index: 999;
            border-bottom: 2px solid var(--color-secondary);
            padding: 20px;
        }

        .mobile-nav.active {
            display: block;
        }

        .mobile-nav ul {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .mobile-nav ul li a {
            display: block;
            padding: 12px 16px;
            color: var(--color-text-light);
            font-size: 0.95rem;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            border-left: 2px solid transparent;
            transition: var(--transition);
        }

        .mobile-nav ul li a:hover,
        .mobile-nav ul li a[aria-current="page"] {
            color: var(--color-accent);
            border-left-color: var(--color-accent);
            background: rgba(211, 162, 0, 0.05);
        }

        /* BOTTOM-NAV: mobiler Ersatz fuer die Desktop-Sidebar (siehe body.has-sidebar,
           protected/layout.php/Nav::renderBottomNav()). Nur auf Seiten mit TOC-Eintraegen
           vorhanden, wird auf Desktop unten in der @media-Regel ausgeblendet (Sidebar uebernimmt
           dort). --bottom-nav-height wird von .back-to-top/.preismodus-switch unten
           wiederverwendet, damit beide nicht unter der Bottom-Nav verschwinden. */
        :root {
            --bottom-nav-height: 64px;
        }

        .bottom-nav {
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            height: var(--bottom-nav-height);
            background: var(--color-bg-2);
            border-top: 2px solid var(--color-secondary);
            z-index: 980;
            /* Respektiert die untere Geraete-Aussparung (z.B. iPhone-Homebar), ohne die Leiste
               selbst dadurch hoeher zu machen. */
            padding-bottom: env(safe-area-inset-bottom, 0);
        }

        .bottom-nav ul {
            list-style: none;
            display: flex;
            height: 100%;
        }

        .bottom-nav ul li {
            flex: 1;
        }

        .bottom-nav ul li a {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 2px;
            height: 100%;
            color: var(--color-text-light);
            font-size: 0.65rem;
            letter-spacing: 0.03em;
            text-transform: uppercase;
            transition: var(--transition);
        }

        .bottom-nav ul li a:hover,
        .bottom-nav ul li a:focus-visible {
            color: var(--color-accent);
        }

        .bottom-nav-icon {
            width: 22px;
            height: 22px;
        }

        /* Solange der Cookie-Banner offen ist, faengt er unten Klicks ab - gleiches Prinzip wie
           bei .back-to-top/.preismodus-switch weiter unten. */
        #cookieConsent:not([hidden])~.bottom-nav {
            display: none;
        }

        /* Mobile Leisten ausblenden (Logik: public/assets/js/site.js, body.menues-ausgeblendet):
           Kopfleiste schiebt sich nach oben, Bottom-Nav nach unten aus dem Bild (0,8 s), Einblenden
           umgekehrt und zuegiger (0,3 s). Kein Verblassen. Ist die Leiste draussen, wird sie
           zusaetzlich visibility: hidden (nicht per Tab/Screenreader erreichbar). */
        .mobile-header,
        .bottom-nav {
            transition: transform 0.3s ease-out, visibility 0s;
        }

        body.menues-ausgeblendet .mobile-header,
        body.menues-ausgeblendet .bottom-nav {
            visibility: hidden;
            transition: transform 0.8s ease-in-out, visibility 0s linear 0.8s;
        }

        body.menues-ausgeblendet .mobile-header {
            transform: translateY(-100%);
        }

        body.menues-ausgeblendet .bottom-nav {
            transform: translateY(100%);
        }

        /* Die angedockten Leisten auf /3d-druck (Netto/Brutto-Schalter, Auf-/Zuklapp-Menue des
           Rechners) kleben bei top: --kopf-fix und fahren mit der Kopfleiste mit - gleiche Dauer
           und Kurve wie die Kopfleiste, damit kein Spalt entsteht. Einblenden: siehe Uebergang bei
           .preismodus-leiste bzw. .rechner-schnellmenue (0,3 s). */
        @media (max-width: 1199.98px) {
            body.menues-ausgeblendet {
                --kopf-fix: 0px;
            }
        }

        body.menues-ausgeblendet .preismodus-leiste {
            transition: opacity 0.15s ease, visibility 0.15s, top 0.8s ease-in-out;
        }

        body.menues-ausgeblendet .rechner-schnellmenue {
            transition: top 0.8s ease-in-out;
        }

        @media (prefers-reduced-motion: reduce) {
            .mobile-header,
            .bottom-nav,
            body.menues-ausgeblendet .mobile-header,
            body.menues-ausgeblendet .bottom-nav,
            body.menues-ausgeblendet .rechner-schnellmenue {
                transition: none;
            }

            body.menues-ausgeblendet .preismodus-leiste {
                transition: opacity 0.15s ease, visibility 0.15s;
            }
        }

        /*
██   ██ ███████ ██████   ██████
██   ██ ██      ██   ██ ██    ██
███████ █████   ██████  ██    ██
██   ██ ██      ██   ██ ██    ██
██   ██ ███████ ██   ██  ██████
*/

        /* Hero — dunkel mit Rot-Akzent-Streifen */
        .hero {
            background: var(--color-bg);
            padding: 80px 24px 60px;
            border-bottom: 3px solid var(--color-primary);
            position: relative;
            overflow: hidden;
        }

        .hero::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 200px;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(95, 14, 13, 0.08));
            pointer-events: none;
        }

        .hero-inner {
            max-width: var(--max-width);
            margin: 0 auto;
            position: relative;
        }

        .hero-badge {
            display: inline-block;
            background: rgba(169, 14, 0, 0.15);
            color: #FF6B5A;
            border: 1px solid rgba(169, 14, 0, 0.3);
            padding: 5px 14px;
            border-radius: var(--radius);
            font-size: 0.78rem;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            margin-bottom: 22px;
        }

        .hero h1 {
            font-size: 2.4rem;
            font-weight: 400;
            color: var(--color-text);
            margin-bottom: 18px;
            max-width: 700px;
        }

        .hero h1 .accent {
            color: var(--color-secondary);
        }

        .hero-sub {
            /* font-size: 1rem; */
            color: var(--color-text-light);
            max-width: 580px;
            margin-bottom: 30px;
            line-height: 1.7;
        }

        .hero-cta-row {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            margin-bottom: 44px;
        }

        /*
████████ ███████  ██████ ██   ██     ████████  █████   ██████  ███████
   ██    ██      ██      ██   ██        ██    ██   ██ ██       ██
   ██    █████   ██      ███████        ██    ███████ ██   ███ ███████
   ██    ██      ██      ██   ██        ██    ██   ██ ██    ██      ██
   ██    ███████  ██████ ██   ██        ██    ██   ██  ██████  ███████
*/

        .tech-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .tech-tag {
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.1);
            color: var(--color-text-light);
            padding: 4px 10px;
            border-radius: var(--radius);
            font-size: 0.76rem;
            letter-spacing: 0.04em;
        }


        /*
██████  ██    ██ ████████ ████████  ██████  ███    ██
██   ██ ██    ██    ██       ██    ██    ██ ████   ██
██████  ██    ██    ██       ██    ██    ██ ██ ██  ██
██   ██ ██    ██    ██       ██    ██    ██ ██  ██ ██
██████   ██████     ██       ██     ██████  ██   ████
*/

        .btn {
            display: inline-block;
            padding: 12px 26px;
            border-radius: var(--radius);
            font-family: var(--font-body);
            /* font-size: 0.95rem; */
            font-size: var(--default-font-size);
            cursor: pointer;
            transition: var(--transition);
            border: 1px solid transparent;
            letter-spacing: 0.04em;
        }

        .btn-primary {
            background: var(--color-accent);
            color: #1A1A1A;
            border-color: var(--color-accent);
        }

        .btn-primary:hover {
            background: #B8900A;
            transform: translateY(-2px);
            box-shadow: 0 4px 16px rgba(211, 162, 0, 0.3);
        }

        .btn-red {
            background: var(--color-secondary);
            color: white;
            border-color: var(--color-secondary);
        }

        .btn-red:hover {
            background: #930000;
            transform: translateY(-2px);
        }

        .btn-ghost {
            background: transparent;
            color: var(--color-accent);
            border-color: rgba(211, 162, 0, 0.4);
        }

        .btn-ghost:hover {
            background: rgba(211, 162, 0, 0.08);
            border-color: var(--color-accent);
        }

        .btn:focus {
            outline: 2px solid var(--color-accent);
            outline-offset: 2px;
        }


        /*
██████   ██████  ██████  ██    ██ ██████
██   ██ ██    ██ ██   ██ ██    ██ ██   ██
██████  ██    ██ ██████  ██    ██ ██████
██      ██    ██ ██      ██    ██ ██
██       ██████  ██       ██████  ██
*/

        /* ---------------------------------------------------------
   Popup Grundstruktur
   --------------------------------------------------------- */

        .popup {
            position: fixed;
            inset: 0;
            z-index: var(--popup-z-index);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 24px;
        }

        .popup[hidden] {
            display: none;
        }

        .popup__backdrop {
            position: absolute;
            inset: 0;
            background: var(--popup-backdrop);
            backdrop-filter: blur(3px);
        }


        /* ---------------------------------------------------------
   Popup Fenster
   --------------------------------------------------------- */

        .popup__panel {
            position: relative;
            width: var(--popup-width);
            max-height: var(--popup-max-height);

            display: flex;
            flex-direction: column;

            background: var(--popup-bg);
            border: 1px solid var(--popup-border);
            border-radius: var(--popup-radius);
            box-shadow: var(--shadow-lg);

            color: var(--color-text);
            overflow: hidden;

            /* verhindert Scroll-Weitergabe an Hintergrund */
            overscroll-behavior: contain;
        }


        /* ---------------------------------------------------------
   Popup Bereiche
   --------------------------------------------------------- */

        .popup__header,
        .popup__footer {
            flex: 0 0 auto;
            padding: var(--popup-padding);
            background: rgba(255, 255, 255, 0.03);
        }

        .popup__header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--popup-gap);
            border-bottom: 1px solid var(--color-border);
        }

        .popup__footer {
            display: flex;
            justify-content: flex-end;
            gap: var(--popup-gap);
            border-top: 1px solid var(--color-border);
        }

        .popup__header h2 {
            margin: 0;
            font-family: var(--font-heading);
            font-size: 1.3rem;
            font-weight: 400;
            color: var(--color-text);
        }


        /* ---------------------------------------------------------
   Scrollbarer Inhaltsbereich
   --------------------------------------------------------- */

        .popup__body {
            flex: 1 1 auto;
            padding: var(--popup-padding);
            overflow-y: auto;

            /* wichtig gegen Hintergrund-Scroll beim Mausrad */
            overscroll-behavior: contain;
        }

        .popup__body p:last-child {
            margin-bottom: 0;
        }


        /* ---------------------------------------------------------
   Eigene Scrollbar
   --------------------------------------------------------- */

        .popup__body::-webkit-scrollbar {
            width: var(--popup-scrollbar-width);
        }

        .popup__body::-webkit-scrollbar-track {
            background: var(--popup-scrollbar-bg);
        }

        .popup__body::-webkit-scrollbar-thumb {
            background: var(--popup-scrollbar-thumb);
            border-radius: 999px;
        }

        .popup__body {
            scrollbar-width: thin;
            scrollbar-color: var(--popup-scrollbar-thumb) var(--popup-scrollbar-bg);
        }


        /* ---------------------------------------------------------
   Schließen-Button
   --------------------------------------------------------- */

        .popup__close {
            width: 34px;
            height: 34px;
            border: 0;
            border-radius: var(--radius);
            background: transparent;
            color: var(--color-text-light);
            font-size: 1.8rem;
            line-height: 1;
            cursor: pointer;
            transition: background var(--transition), color var(--transition);
        }

        .popup__close:hover {
            background: rgba(255, 255, 255, 0.08);
            color: var(--color-text);
        }


        /* ---------------------------------------------------------
   Body sperren, solange Popup offen ist
   --------------------------------------------------------- */

        body.popup-open {
            overflow: hidden;
        }


        /* ---------------------------------------------------------
   Optional: kleine Öffnungsanimation
   --------------------------------------------------------- */

        .popup:not([hidden]) .popup__panel {
            animation: popup-in var(--transition);
        }

        @keyframes popup-in {
            from {
                opacity: 0;
                transform: translateY(12px) scale(0.98);
            }

            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }


        /* ---------------------------------------------------------
   Mobile Anpassung
   --------------------------------------------------------- */

        @media (max-width: 768px) {
            :root {
                --popup-width: 94vw;
                --popup-max-height: 90dvh;
                --popup-padding: 16px;
            }

            .popup {
                padding: 12px;
            }
        }



        /*
██    ██  ██████  ██      ██      ██████  ██ ██      ██████        ███████ ███████ ██   ██ ████████ ██  ██████  ███    ██ ███████ ███    ██
██    ██ ██    ██ ██      ██      ██   ██ ██ ██      ██   ██       ██      ██      ██  ██     ██    ██ ██    ██ ████   ██ ██      ████   ██
██    ██ ██    ██ ██      ██      ██████  ██ ██      ██   ██ █████ ███████ █████   █████      ██    ██ ██    ██ ██ ██  ██ █████   ██ ██  ██
 ██  ██  ██    ██ ██      ██      ██   ██ ██ ██      ██   ██            ██ ██      ██  ██     ██    ██ ██    ██ ██  ██ ██ ██      ██  ██ ██
  ████    ██████  ███████ ███████ ██████  ██ ███████ ██████        ███████ ███████ ██   ██    ██    ██  ██████  ██   ████ ███████ ██   ████
*/

        .section-full {
            width: 100%;
            padding: 80px 24px;
            /* border-top: 3px solid var(--color-secondary); */
            border-bottom: 3px solid var(--color-primary);

        }

        .section-full.bg-dark {
            background: var(--color-bg);
        }

        .section-full.bg-dark-2 {
            background: var(--color-bg-2);
        }

        .section-full.bg-red {
            background: var(--color-primary);
        }

        .section-full.bg-red-2 {
            background: var(--color-secondary);
        }

        .section-inner {
            max-width: var(--max-width);
            margin: 0 auto;
        }

        /* Split-Layout: Text links, Visual rechts */
        .split-layout {
            display: flex;
            flex-direction: column;
            gap: 48px;
        }

        .split-text {
            flex: 1;
        }

        .split-visual {
            flex: 1;
        }

        /* Bild links neben dem Text (z.B. Happyloopo auf der 404-Seite). Nur nebeneinander
           (ab 768px) nach links holen - auf dem Handy bleibt es unter dem Text, damit Inhalt
           bzw. Links zuerst kommen. */
        @media (min-width: 768px) {
            .split-visual--links {
                order: -1;
            }
        }

        .section-label {
            display: inline-block;
            color: var(--color-secondary);
            /* font-size: 0.8rem; */
            letter-spacing: 0.2em;
            text-transform: uppercase;
            margin-bottom: 16px;
            border-left: 3px solid var(--color-secondary);
            /* Dezenter heller Verlauf hinter dem Label (faedet vom Rand nach rechts aus): der
               Label-Text (--color-secondary, dunkles Rot) hat auf dem dunklen Seitenhintergrund
               nur wenig Helligkeitskontrast - der Verlauf hebt ihn optisch ab, ohne wie ein
               harter Kasten zu wirken. */
            background: linear-gradient(90deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 1) 60%);
            border-radius: 0 4px 4px 0;
            padding: 4px 18px 4px 12px;
        }

        .section-title {
            /* font-size: clamp(1.8rem, 4vw, 2.2rem); */
            color: var(--color-text);
            margin-bottom: 20px;
        }

        /* Landingpage-Hero (z.B. /3d-druck, /blog): wie der Homepage-Hero soll das erste,
           namensgebende H1 deutlich groesser wirken als eine normale Section-Ueberschrift -
           ohne die homepage-spezifische .hero-Klasse (eigener Farbverlauf, #top-Anker) zu
           kapern. Wiederverwendbar fuer kuenftige Unterseiten. */
        .lp-hero .section-title {
            font-size: clamp(1.9rem, 5vw, 2.9rem);
            max-width: 760px;
        }

        .hero-price-anchor {
            color: var(--color-accent);
            font-size: 1rem;
            margin-bottom: 16px;
        }

        .hero-honesty-note {
            color: var(--color-text-light);
            font-size: 0.85rem;
            max-width: 560px;
            margin-top: 4px;
        }

        .section-body {
            color: var(--color-text-light);
            /* font-size: 1rem; */
            line-height: 1.7;
            max-width: 560px;
        }

        .section-body p {
            margin-bottom: 16px;
        }

        .img-placeholder {
            background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-bg-2) 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--color-text-light);
            font-size: 0.85rem;
            opacity: 0.7;
            text-align: center;
            padding: 20px;
        }


        /*
██████   █████  ███    ██ ███████ ██
██   ██ ██   ██ ████   ██ ██      ██
██████  ███████ ██ ██  ██ █████   ██
██      ██   ██ ██  ██ ██ ██      ██
██      ██   ██ ██   ████ ███████ ███████
*/

        .panel-detail {
            background: var(--color-bg-2);
            border: 1px solid var(--color-border);
            border-radius: var(--radius);
            padding: 28px 32px;
            display: grid;
            gap: 24px;
        }

        .detail-col h2,
        .detail-col h3 {
            /* font-size: 0.8rem; */
            color: var(--color-text-light);
            text-transform: uppercase;
            letter-spacing: 0.1em;
            margin-bottom: 12px;
            padding-bottom: 8px;
            border-bottom: 1px solid var(--color-border);
        }

        /* .detail-col p, */
        .detail-col p {
            /* font-size: 0.88rem; */
            color: var(--color-text-light);
            line-height: 1.6;
            margin-bottom: 8px;
        }

        .detail-col li {
            /* font-size: 0.88rem; */
            color: var(--color-text);
            line-height: 1.6;
            margin-bottom: 8px;
        }

        .detail-col ul {
            list-style: none;
            padding: 0;
        }

        .detail-col li::before {
            content: "→ ";
            color: var(--color-accent);
        }

        .solution-hint p {
            color: var(--color-text);
        }

        /* .solution-hint p {
            color: var(--color-text);
        } */


        /*
███████ ████████  █████  ████████ ███████
██         ██    ██   ██    ██    ██
███████    ██    ███████    ██    ███████
     ██    ██    ██   ██    ██         ██
███████    ██    ██   ██    ██    ███████
*/

        .stats-bar {
            background: var(--color-primary);
            padding: 25px 24px;
            /* border-bottom: 3px solid var(--color-secondary); */
        }

        .stats-row {
            max-width: var(--max-width);
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 0;
        }

        .stat-box {
            text-align: center;
            padding: 16px;
            border-right: 1px solid rgba(255, 255, 255, 0.1);
        }

        .stat-box:last-child {
            border-right: none;
        }

        .stat-number {
            font-size: 2.2rem;
            font-weight: 400;
            color: var(--color-accent);
            display: block;
            line-height: 1;
            margin-bottom: 4px;
            font-family: var(--font-heading);
        }

        .stat-label {
            font-size: 1rem;
            color: rgba(255, 255, 255, 0.65);
        }


        /*
██      ███████ ██ ███████ ████████ ██    ██ ███    ██  ██████  ███████ ███    ██
██      ██      ██ ██         ██    ██    ██ ████   ██ ██       ██      ████   ██
██      █████   ██ ███████    ██    ██    ██ ██ ██  ██ ██   ███ █████   ██ ██  ██
██      ██      ██      ██    ██    ██    ██ ██  ██ ██ ██    ██ ██      ██  ██ ██
███████ ███████ ██ ███████    ██     ██████  ██   ████  ██████  ███████ ██   ████
*/

        .leistungen-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 20px;
        }

        .leistung-card {
            background: var(--color-bg-2);
            padding: 22px;
            border-left: 2px solid var(--color-primary);
            transition: var(--transition);
        }

        .leistung-card:hover {
            border-left-color: var(--color-secondary);
            background: var(--color-surface-2);
        }

        /* Schwerpunkt-Karten der Startseite (#themen): Sektion ist bg-dark-2, Karten deshalb heller;
           Buttons unten auf einer Linie, egal wie lang der Text ist. */
        .themen-grid .leistung-card {
            display: flex;
            flex-direction: column;
            gap: 12px;
            background: var(--color-surface-2);
        }

        .themen-grid .leistung-card .btn {
            margin-top: auto;
            align-self: flex-start;
        }

        .leistung-icon {
            font-size: 1.7rem;
            margin-bottom: 10px;
            display: block;
        }

        .leistung-card h3 {
            font-size: 1rem;
            color: var(--color-text);
            margin-bottom: 6px;
            font-weight: 400;
        }

        .leistung-card p {
            /* font-size: 0.86rem; */
            color: var(--color-text-light);
            margin-bottom: 8px;
        }

        .leistung-claim {
            font-size: 1rem;
            color: var(--color-accent);
        }

        /* Leistungen-Grid: Bild-Card-Variante (kompakt: kleines Foto + Icon/Titel-Zeile + Text) */
        .leistung-card--bild {
            max-width: 450px;
            background: var(--color-bg-2);
            border: 1px solid var(--color-border);
            border-radius: var(--radius);
            overflow: hidden;
            padding: 0;
            display: flex;
            flex-direction: column;
        }

        .leistung-card--bild:hover {
            border-color: var(--color-primary);
        }

        .leistung-card-foto {
            height: 220px;
            overflow: hidden;
        }

        .leistung-card-foto img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        .leistung-card-content {
            padding: 18px 20px 20px;
            display: flex;
            flex-direction: column;
            gap: 8px;
            background: var(--color-primary);
        }

        .leistung-card-header {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .leistung-card-header img {
            width: 32px;
            height: 32px;
            flex-shrink: 0;
        }

        .leistung-card-header h3 {
            margin: 0;
            font-size: 1rem;
            font-weight: 600;
            color: var(--color-text);
            text-align: left;
            text-transform: none;
        }

        .leistung-card-content p {
            margin: 0;
            font-size: 0.86rem;
            color: var(--color-text-light);
            text-align: left;
            line-height: 1.5;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }


        /*
████████ ██ ███    ███ ███████ ██      ██ ███    ██ ███████
   ██    ██ ████  ████ ██      ██      ██ ████   ██ ██
   ██    ██ ██ ████ ██ █████   ██      ██ ██ ██  ██ █████
   ██    ██ ██  ██  ██ ██      ██      ██ ██  ██ ██ ██
   ██    ██ ██      ██ ███████ ███████ ██ ██   ████ ███████
*/

        .timeline {
            display: flex;
            flex-direction: column;
            gap: 0;
            align-items: flex-start;
        }

        .timeline-item {
            display: grid;
            grid-template-columns: 46px 1fr;
            gap: 18px;
            padding-bottom: 32px;
        }

        .timeline-item:last-child {
            padding-bottom: 0;
        }

        .tl-col {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .tl-dot {
            width: 46px;
            height: 46px;
            background: var(--color-secondary);
            border-radius: var(--radius);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-family: var(--font-heading);
            /* font-size: 1rem; */
            flex-shrink: 0;
            z-index: 1;
        }

        .tl-line {
            width: 2px;
            flex: 1;
            background: rgba(169, 14, 0, 0.2);
            margin-top: 3px;
        }

        .timeline-item:last-child .tl-line {
            display: none;
        }

        .tl-content {
            padding-top: 1px;
        }

        .tl-content h3 {
            /* font-size: 0.95rem; */
            color: var(--color-text);
            margin-bottom: 5px;
            font-weight: 400;
        }

        .tl-content p {
            /* font-size: 0.86rem; */
            color: var(--color-text-light);
        }


        /*
██████  ██████   ██████  ██████  ██    ██  ██████ ████████
██   ██ ██   ██ ██    ██ ██   ██ ██    ██ ██         ██
██████  ██████  ██    ██ ██   ██ ██    ██ ██         ██
██      ██   ██ ██    ██ ██   ██ ██    ██ ██         ██
██      ██   ██  ██████  ██████   ██████   ██████    ██
*/

        .produkt-card {
            background: var(--color-bg-2);
            border: 1px solid var(--color-accent);
            padding: 40px;
            max-width: 700px;
        }

        .produkt-badge {
            display: inline-block;
            background: var(--color-accent);
            color: #232323;
            font-size: 1rem;
            letter-spacing: 0.15em;
            text-transform: uppercase;
            padding: 4px 12px;
            margin-bottom: 20px;
        }

        .produkt-title {
            font-size: clamp(1.4rem, 3vw, 2rem);
            color: var(--color-text);
            margin-bottom: 16px;
        }

        .produkt-desc {
            color: var(--color-text-light);
            /* font-size: 1rem; */
            line-height: 1.7;
            margin-bottom: 24px;
        }

        .produkt-specs {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }


        /*
██████  ██       ██████   ██████
██   ██ ██      ██    ██ ██
██████  ██      ██    ██ ██   ███
██   ██ ██      ██    ██ ██    ██
██████  ███████  ██████   ██████
*/

        .blog-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 24px;
        }

        .blog-card {
            background: var(--color-bg-2);
            border: 1px solid var(--color-border);
            border-radius: var(--radius);
            padding: 24px;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .blog-card h2,
        .blog-card h3 {
            font-size: 1.2rem;
            font-weight: 400;
        }

        .blog-card h2 a:hover,
        .blog-card h3 a:hover {
            color: var(--color-accent);
        }

        .blog-card-excerpt {
            color: var(--color-text-light);
            line-height: 1.6;
        }

        .blog-card-meta {
            color: var(--color-text-light);
            font-size: 0.8rem;
            letter-spacing: 0.03em;
        }

        .blog-card .btn {
            align-self: flex-start;
            margin-top: 8px;
        }

        .blog-article {
            max-width: 760px;
        }

        .blog-post-kicker a {
            color: var(--color-accent);
        }

        .blog-post-meta {
            color: var(--color-text-light);
            font-size: 0.85rem;
            margin: 12px 0 32px;
        }

        .blog-lead {
            font-size: 1.15rem;
            color: var(--color-text);
            margin-bottom: 28px;
        }

        .blog-post-body h2 {
            font-size: 1.25rem;
            font-weight: 400;
            color: var(--color-accent);
            margin: 36px 0 14px;
        }

        .blog-post-body p {
            color: var(--color-text-light);
            line-height: 1.75;
            margin-bottom: 14px;
        }

        .blog-post-body ul {
            margin: 0 0 18px 20px;
            color: var(--color-text-light);
            line-height: 1.7;
        }

        .blog-post-body li {
            margin-bottom: 6px;
        }

        .blog-post-body strong {
            color: var(--color-text);
        }

        .blog-post-body a {
            color: var(--color-accent);
            text-decoration: underline;
            text-underline-offset: 2px;
        }

        .blog-post-body a:hover {
            color: var(--color-text);
        }

        .blog-post-body code {
            background: var(--color-surface-2);
            border: 1px solid var(--color-border);
            border-radius: 3px;
            padding: 2px 6px;
            font-size: 0.9em;
        }

        .blog-post-body pre {
            background: var(--color-surface-2);
            border: 1px solid var(--color-border);
            border-radius: var(--radius);
            padding: 16px 18px;
            margin-bottom: 18px;
            overflow-x: auto;
        }

        .blog-post-body pre code {
            background: none;
            border: none;
            padding: 0;
            font-size: 0.85em;
            line-height: 1.6;
            color: var(--color-text);
        }

        .blog-post-body table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 18px;
        }

        .blog-post-body th,
        .blog-post-body td {
            text-align: left;
            padding: 8px 12px;
            border-bottom: 1px solid var(--color-border);
            color: var(--color-text-light);
            font-size: 0.92em;
        }

        .blog-post-body th {
            color: var(--color-accent);
            font-weight: 400;
        }

        .blog-post-cta,
        .cta-note {
            margin-top: 48px;
            align-items: center;
        }

        /*
██████  ██████    ██████  ██████  ██    ██  ██████ ██   ██
██   ██ ██   ██   ██   ██ ██   ██ ██    ██ ██      ██  ██
██   ██ ██   ██   ██   ██ ██████  ██    ██ ██      █████
██   ██ ██   ██   ██   ██ ██   ██ ██    ██ ██      ██  ██
██████  ██████    ██████  ██   ██  ██████   ██████ ██   ██
*/

        .machine-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 24px;
        }

        .machine-card {
            background: var(--color-bg-2);
            border: 1px solid var(--color-accent);
            border-radius: var(--radius);
            padding: 28px;
        }

        .machine-card h3 {
            font-size: 1.3rem;
            margin-bottom: 6px;
        }

        .machine-tagline {
            color: var(--color-accent);
            font-size: 0.85rem;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            margin-bottom: 14px;
            display: block;
        }

        .machine-card p {
            color: var(--color-text-light);
            line-height: 1.7;
            margin-bottom: 14px;
        }

        .machine-specs {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 6px;
            color: var(--color-text-light);
            font-size: 0.9rem;
        }

        .price-table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 8px;
        }

        .price-table th,
        .price-table td {
            text-align: left;
            padding: 12px 16px;
            border-bottom: 1px solid var(--color-border);
        }

        .price-table th {
            color: var(--color-accent);
            font-weight: 400;
            font-size: 0.85rem;
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }

        .price-table td {
            color: var(--color-text-light);
        }

        .price-note {
            color: var(--color-text-light);
            font-size: 0.85rem;
            margin-top: 12px;
        }

        /* Kleiner MwSt-Kontext-Zusatz direkt neben/hinter einem im Fliesstext genannten Preis
           bzw. in einem Tabellen-Spaltenkopf (siehe $mwstHinweisSpan() in 3d-druck.php,
           renderMwstHinweise() in preismodus.js) - bewusst kleiner als der umgebende Text, damit
           er als Zusatzinfo erkennbar bleibt statt gleichwertig mitzulaufen. */
        .preis-mwst-hinweis {
            font-size: 0.8em;
            color: var(--color-text-light);
        }

        .price-highlight {
            background: var(--color-bg-2);
            border-left: 2px solid var(--color-accent);
            padding: 14px 18px;
            margin-top: 16px;
            color: var(--color-text);
        }

        /* Staerker betonte Variante von .price-highlight (z.B. Resin-Preisabweichungs-Hinweis im
           Rechner-Ergebnis) - deutlicher als der neutrale Akzent-Farbton oben, ohne gleich wie
           ein Fehler (.form-message.is-error) auszusehen. */
        .price-highlight.is-warning {
            background: rgba(169, 14, 0, 0.12);
            border-left-color: var(--color-secondary);
        }

        .price-note a,
        .price-highlight a,
        .form-message a {
            color: var(--color-accent);
            text-decoration: underline;
            text-underline-offset: 2px;
        }

        .price-note a:hover,
        .price-highlight a:hover,
        .form-message a:hover {
            color: var(--color-text);
        }

        .price-tables-grid {
            display: grid;
            gap: 32px;
            margin-bottom: 8px;
        }

        .price-details-more {
            margin-top: 24px;
            border: 1px solid var(--color-border);
            border-radius: var(--radius);
            padding: 0 18px;
        }

        .price-details-more summary {
            cursor: pointer;
            padding: 14px 0;
            color: var(--color-accent);
            font-weight: 600;
            list-style: none;
        }

        .price-details-more summary::-webkit-details-marker {
            display: none;
        }

        .price-details-more summary::after {
            content: "+";
            float: right;
        }

        .price-details-more[open] summary {
            border-bottom: 1px solid var(--color-border);
        }

        .price-details-more[open] summary::after {
            content: "−";
        }

        .price-details-more[open] {
            padding-bottom: 18px;
        }

        .price-example {
            color: var(--color-text-light);
            font-size: 0.9rem;
            margin-top: 8px;
        }

        .paket-price {
            color: var(--color-accent);
            font-size: 1.05rem;
            margin-bottom: 8px;
        }

        .zusatzmodule-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 2px;
            margin-top: 24px;
        }

        .zusatzmodul-card {
            background: var(--color-bg-2);
            padding: 18px 22px;
            border-left: 2px solid var(--color-primary);
        }

        .zusatzmodul-card h4 {
            font-size: 0.95rem;
            font-weight: 400;
            color: var(--color-text);
            margin-bottom: 4px;
        }

        .zusatzmodul-card p {
            color: var(--color-text-light);
            font-size: 0.86rem;
        }

        /*
████████ ███████  █████  ███    ███
   ██    ██      ██   ██ ████  ████
   ██    █████   ███████ ██ ████ ██
   ██    ██      ██   ██ ██  ██  ██
   ██    ███████ ██   ██ ██      ██
*/

        .team-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 24px;
        }

        .team-card {
            background: var(--color-surface);
            border-radius: var(--radius);
            overflow: hidden;
            border: 1px solid rgba(255, 255, 255, 0.05);
            display: grid;
            grid-template-columns: 1fr;
        }

        .team-photo {
            width: 100%;
            height: 260px;
            object-fit: cover;
            object-position: top;
        }

        .team-body {
            padding: 22px;
        }

        .team-name {
            /* font-size: 1.05rem; */
            color: var(--color-text);
            margin-bottom: 2px;
            font-weight: 400;
        }

        .team-title {
            /* font-size: 0.82rem; */
            color: var(--color-accent);
            margin-bottom: 12px;
            display: block;
        }

        .team-body p {
            /* font-size: 0.86rem; */
            color: var(--color-text-light);
            margin-bottom: 12px;
        }


        /*
██   ██  ██████  ███    ██ ████████  █████  ██   ██ ████████        ██████ ██       █████  ███████ ███████ ███████ ███████
██  ██  ██    ██ ████   ██    ██    ██   ██ ██  ██     ██          ██      ██      ██   ██ ██      ██      ██      ██
█████   ██    ██ ██ ██  ██    ██    ███████ █████      ██    █████ ██      ██      ███████ ███████ ███████ █████   ███████
██  ██  ██    ██ ██  ██ ██    ██    ██   ██ ██  ██     ██          ██      ██      ██   ██      ██      ██ ██           ██
██   ██  ██████  ██   ████    ██    ██   ██ ██   ██    ██           ██████ ███████ ██   ██ ███████ ███████ ███████ ███████
*/

        .kontakt-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 48px;
        }

        .kontakt-info {}

        .kontakt-item {
            display: flex;
            gap: 16px;
            align-items: flex-start;
            padding: 20px 0;
            border-bottom: 1px solid #3a3a3a;
        }

        .kontakt-item:last-child {
            border-bottom: none;
        }

        .kontakt-icon {
            font-size: 1.2rem;
            color: var(--color-accent);
            min-width: 28px;
            margin-top: 2px;
        }

        .kontakt-label {
            font-size: 1rem;
            color: var(--color-secondary);
            text-transform: uppercase;
            letter-spacing: 0.1em;
            margin-bottom: 4px;
        }

        .kontakt-value {
            color: var(--color-text);
            /* font-size: 1rem; */
        }

        .kontakt-value a {
            color: var(--color-text);
            transition: var(--transition);
        }

        .kontakt-value a:hover {
            color: var(--color-accent);
        }

        .kontakt-form {}

        /* Formular + Team-Hinweis (protected/src/templates/sections/ansprechpartner.php) auf den
           Leistungsseiten: mobil steht der Hinweis kompakt ueber dem Formular, ab 960px rechts daneben. */
        .kontakt-mit-team {
            display: grid;
            gap: 24px;
            max-width: 560px;
            margin: 32px auto 0;
        }

        .ansprechpartner {
            background: var(--color-surface);
            border: 1px solid rgba(255, 255, 255, 0.05);
            border-radius: var(--radius);
            padding: 20px;
        }

        .ansprechpartner-titel {
            color: var(--color-accent);
            margin-bottom: 6px;
        }

        .ansprechpartner-text {
            color: var(--color-text-light);
            margin-bottom: 16px;
        }

        .ansprechpartner-liste {
            list-style: none;
            display: grid;
            gap: 12px;
            margin: 0;
            padding: 0;
        }

        .ansprechpartner-liste li {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .ansprechpartner-liste img {
            width: 56px;
            height: 56px;
            flex: none;
            border-radius: 50%;
            object-fit: cover;
            object-position: top;
        }

        .ansprechpartner-liste span {
            color: var(--color-text-light);
            font-size: 0.9rem;
        }

        .ansprechpartner-liste strong {
            display: block;
            color: var(--color-text);
            font-weight: 400;
        }

        @media (min-width: 960px) {
            .kontakt-mit-team {
                max-width: none;
                grid-template-columns: minmax(0, 560px) 280px;
                justify-content: center;
                align-items: start;
                gap: 32px;
            }

            .kontakt-mit-team > .ansprechpartner {
                grid-column: 2;
                grid-row: 1;
            }
        }


        /*
███████  ██████  ██████  ███    ███        ██████  ██████   ██████  ██    ██ ██████  ███████
██      ██    ██ ██   ██ ████  ████       ██       ██   ██ ██    ██ ██    ██ ██   ██ ██
█████   ██    ██ ██████  ██ ████ ██ █████ ██   ███ ██████  ██    ██ ██    ██ ██████  ███████
██      ██    ██ ██   ██ ██  ██  ██       ██    ██ ██   ██ ██    ██ ██    ██ ██           ██
██       ██████  ██   ██ ██      ██        ██████  ██   ██  ██████   ██████  ██      ███████
*/

        .form-group {
            margin-bottom: 20px;
        }

        .form-label {
            display: block;
            font-size: 1rem;
            color: var(--color-text-light);
            text-transform: uppercase;
            letter-spacing: 0.1em;
            margin-bottom: 8px;
        }

        .form-input,
        .form-textarea {
            width: 100%;
            background: var(--color-surface-2);
            border: 1px solid #3a3a3a;
            color: var(--color-text);
            font-family: var(--font-body);
            font-size: var(--default-font-size);
            padding: 12px 16px;
            border-radius: var(--radius);
            transition: var(--transition);
        }

        .form-input:focus,
        .form-textarea:focus {
            outline: none;
            border-color: var(--color-accent);
        }

        .form-textarea {
            min-height: 120px;
            resize: vertical;
        }

        .form-note {
            color: var(--color-text-light);
            font-size: 1rem;
            margin-top: 12px;
            text-align: center;
        }

        /* Honeypot-Feld (public/kontakt.php): per CSS statt Inline-style versteckt, damit
           es unabhaengig von der CSP style-src-Konfiguration zuverlaessig unsichtbar bleibt
           (siehe roaster-Review vom 2026-09-15 - ein inline style="..." waere bei einer
           strengen CSP ohne 'unsafe-inline' sichtbar geworden). */
        .form-zusatz {
            position: absolute;
            left: -9999px;
        }

        .form-message {
            margin-top: 14px;
            padding: 12px 14px;
            border-radius: var(--radius);
            font-size: 1rem;
            line-height: 1.4;
            border: 1px solid transparent;
        }

        .form-message.is-success {
            color: var(--color-text);
            background: rgba(211, 162, 0, 0.12);
            border-color: rgba(211, 162, 0, 0.45);
        }

        /* Eingangsbestaetigung der Online-Widerrufsfunktion (/vertrag-widerrufen, siehe site.js). */
        .widerruf-bestaetigung {
            max-width: 560px;
            margin-top: 32px;
        }

        .widerruf-bestaetigung pre {
            margin: 12px 0;
            white-space: pre-wrap;
            font-family: var(--font-body);
            font-size: 0.95rem;
        }

        .form-message.is-error {
            color: var(--color-text);
            background: rgba(169, 14, 0, 0.18);
            border-color: rgba(169, 14, 0, 0.55);
        }

        .form-submit:disabled {
            opacity: 0.65;
            cursor: not-allowed;
        }

        .form-select {
            width: 100%;
            background: var(--color-surface-2);
            border: 1px solid #3a3a3a;
            color: var(--color-text);
            font-family: var(--font-body);
            font-size: var(--default-font-size);
            padding: 12px 16px;
            border-radius: var(--radius);
            transition: var(--transition);
        }

        .form-select:focus {
            outline: none;
            border-color: var(--color-accent);
        }

        .form-select:disabled,
        .form-input:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        /*
██████  ██████  ██    ██  ██████ ██   ██ ██████  ███████  ██████ ██   ██ ███    ██ ███████ ██████
██   ██ ██   ██ ██    ██ ██      ██  ██  ██   ██ ██      ██      ██   ██ ████   ██ ██      ██   ██
██   ██ ██████  ██    ██ ██      █████   ██████  █████   ██      ███████ ██ ██  ██ █████   ██████
██   ██ ██   ██ ██    ██ ██      ██  ██  ██   ██ ██      ██      ██   ██ ██  ██ ██ ██      ██   ██
██████  ██   ██  ██████   ██████ ██   ██ ██   ██ ███████  ██████ ██   ██ ██   ████ ███████ ██   ██
*/

        /* #druckrechner: Vorab-Check-Rechner, Logik in assets/js/3d-druck-rechner.js */
        .rechner-viewer {
            width: 100%;
            aspect-ratio: 16 / 9;
            max-height: 380px;
            background: var(--color-bg);
            border: 1px solid var(--color-border);
            border-radius: var(--radius);
            overflow: hidden;
            margin-top: 16px;
            touch-action: none;
        }

        .rechner-viewer canvas {
            display: block;
            width: 100%;
            height: 100%;
        }

        /* "Zum Zoomen Strg + Mausrad": kurz ueber der Vorschau, wenn ohne Strg gescrollt wird. */
        .rechner-viewer {
            position: relative;
        }

        .rechner-zoom-hinweis {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(0, 0, 0, 0.55);
            color: var(--color-text);
            font-size: 1rem;
            letter-spacing: 0.04em;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.2s ease;
        }

        .rechner-zoom-hinweis.is-sichtbar {
            opacity: 1;
        }

        .rechner-viewer-hint {
            color: var(--color-text-light);
            font-size: 0.8rem;
            margin-top: 8px;
        }

        .rechner-status {
            margin-top: 16px;
            padding: 12px 14px;
            border-radius: var(--radius);
            font-size: 0.9rem;
            background: var(--color-bg-2);
            border: 1px solid var(--color-border);
            color: var(--color-text-light);
        }

        .rechner-farbe-swatches {
            display: flex;
            gap: 12px;
            margin-top: 8px;
        }

        .rechner-farbe-swatch {
            width: 36px;
            height: 36px;
            padding: 0;
            border-radius: 50%;
            border: 2px solid var(--color-border);
            cursor: pointer;
        }

        .rechner-farbe-swatch.is-schwarz {
            background: #000;
        }

        .rechner-farbe-swatch.is-weiss {
            background: #fff;
        }

        .rechner-farbe-swatch.is-wunschfarbe {
            background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red);
        }

        .rechner-farbe-swatch[aria-pressed="true"] {
            border-color: var(--color-accent);
            box-shadow: 0 0 0 2px var(--color-bg-2), 0 0 0 4px var(--color-accent);
        }

        .rechner-farbe-swatch:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        /* [hidden] hat dieselbe Spezifitaet wie die Klasse hier, gewinnt aber ohne diese Regel
           nicht automatisch gegen "display: flex" (spaetere Regel im Stylesheet) - explizit
           wieder ausblenden, sonst bleibt die Wunschfarbe-Zeile trotz hidden-Attribut sichtbar. */
        .rechner-farbe-wunsch {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 10px;
        }

        .rechner-farbe-wunsch[hidden] {
            display: none;
        }

        .rechner-farbe-colorinput {
            width: 44px;
            height: 36px;
            padding: 2px;
            border-radius: 6px;
            border: 1px solid var(--color-border);
            background: var(--color-bg);
            cursor: pointer;
        }

        /* Freitextfeld fuer Effektfilamente (Rainbowfilament, GoldSilk, Matt...) neben dem
           Hex-Farbwaehler - wraps auf eine eigene Zeile, sobald der Platz neben Farbwaehler +
           Hinweistext nicht mehr reicht (siehe flex-wrap oben). */
        .rechner-farbe-wunsch-note {
            flex: 1 1 180px;
            min-width: 140px;
            width: auto;
        }

        .rechner-farbe-wunsch-hint {
            color: var(--color-text-light);
            font-size: 0.8rem;
            flex-basis: 100%;
        }

        /* Ergebnis als hervorgehobene Karte (siehe renderErgebnis in 3d-druck-rechner.js):
           Gesamtpreis zuerst, darunter eingerueckt die Aufschluesselung, Staffel dezent. */
        .rechner-ergebnis {
            margin-top: 32px;
            padding: 24px;
            background: var(--color-bg-2);
            border: 2px solid var(--color-accent);
            border-radius: var(--radius);
        }

        .rechner-ergebnis[hidden] {
            display: none;
        }

        /* CTA im Ergebnis als Trenner zwischen Schaetzung und Staffelpreisen: zentriert, breiter
           als ein normaler Button, links/rechts von einer Linie flankiert. */
        .rechner-ergebnis .hero-cta-row {
            justify-content: center;
            align-items: center;
            flex-wrap: nowrap;
            gap: 16px;
            margin: 24px 0;
        }

        .rechner-ergebnis .hero-cta-row::before,
        .rechner-ergebnis .hero-cta-row::after {
            content: "";
            flex: 1 1 0;
            height: 1px;
            background: var(--color-border);
        }

        .rechner-ergebnis .hero-cta-row .btn {
            flex: 0 1 360px;
            text-align: center;
        }

        .rechner-ergebnis-titel {
            margin: 0 0 12px;
        }

        .rechner-ergebnis-gesamt {
            margin-bottom: 20px;
        }

        .rechner-ergebnis-preis-label {
            color: var(--color-text-light);
            font-size: 0.9rem;
            margin: 0;
        }

        .rechner-ergebnis-preis {
            font-size: 2rem;
            font-weight: 700;
            color: var(--color-accent);
            margin: 4px 0;
            line-height: 1.2;
        }

        .rechner-ergebnis-eckdaten {
            font-size: 0.9rem;
            margin: 0;
        }

        .rechner-ergebnis-versand {
            margin: 2px 0 10px;
            color: var(--color-text-light);
            font-size: 0.85rem;
        }

        /* /3d-druck auf dem Handy: "Jetzt Kosten schaetzen" direkt unter die Ueberschrift statt
           unter den langen Absatz; Etikett nicht unter dem Netto/Brutto-Schalter verstecken. */
        @media (max-width: 767px) {
            #\33 d-druck-intro .split-text {
                display: flex;
                flex-direction: column;
            }

            #\33 d-druck-intro .split-text > * {
                order: 2;
            }

            #\33 d-druck-intro .section-label,
            #\33 d-druck-intro .section-title {
                order: 0;
            }

            #\33 d-druck-intro .hero-cta-row {
                order: 1;
                margin: 4px 0 20px;
            }

            #\33 d-druck-intro .section-label {
                align-self: flex-start;
                margin-top: 56px;
            }

            /* Rechner-Einleitung kompakter, damit die Dateiwahl schneller im Blick ist. */
            #druckrechner .section-label {
                margin-top: 56px;
            }

            #druckrechner .hero-price-anchor,
            #druckrechner .price-highlight {
                font-size: 0.85rem;
                line-height: 1.5;
            }

            #druckrechner .price-highlight {
                padding: 10px 12px;
            }
        }

        /* Aufschluesselung: eingerueckt und dezenter, aber gut lesbar (keine Kosten verstecken). */
        .rechner-bauteil-liste {
            margin: 0 0 24px 12px;
            padding-left: 16px;
            border-left: 2px solid var(--color-border);
            font-size: 0.9rem;
            overflow-x: auto;
        }

        .rechner-bauteil-liste h4 {
            font-size: 0.95rem;
            color: var(--color-text-light);
            margin-bottom: 8px;
        }

        .rechner-bauteil-liste td:first-child {
            word-break: break-word;
        }

        .rechner-bauteil-liste tr.is-summe td {
            border-top: 2px solid var(--color-border);
            font-weight: 600;
        }

        /* Staffelpreise: reines Zusatzargument, deshalb deutlich zurueckgenommen. */
        .rechner-staffel-wrapper {
            font-size: 0.82rem;
            color: var(--color-text-light);
        }

        .rechner-staffel-wrapper h4 {
            font-size: 0.9rem;
            color: var(--color-text-light);
            margin-bottom: 8px;
        }

        .rechner-staffel-wrapper .price-table th,
        .rechner-staffel-wrapper .price-table td {
            padding: 6px 10px;
        }

        .rechner-staffel-wrapper tr.is-aktuell td {
            color: var(--color-text);
            font-weight: 600;
        }

        /* Thumbnail-Galerie der automatisch erzeugten Vorschaubilder (siehe renderErgebnis/
           generateThumbnailsForRow in 3d-druck-rechner.js) - zwischen Preis-Ergebnis und
           "Jetzt verbindlich anfragen"-Button. */
        .rechner-thumbnail-galerie {
            margin-top: 32px;
        }

        .rechner-thumbnail-galerie h4 {
            margin-bottom: 4px;
        }

        /* Ein Block pro Datei-Zeile/Bauteil (siehe renderErgebnis in 3d-druck-rechner.js) - die
           4 Thumbnails EINES Bauteils bleiben so optisch zusammen statt in einem ununterschiedenen
           Gesamt-Grid. */
        .rechner-thumbnail-bauteil {
            margin-top: 16px;
        }

        .rechner-thumbnail-bauteil-titel {
            font-size: 0.85rem;
            font-weight: 600;
            margin-bottom: 4px;
        }

        .rechner-thumbnail-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            margin-top: 12px;
        }

        .rechner-thumbnail-item {
            display: block;
            position: relative;
            width: 96px;
            cursor: pointer;
        }

        .rechner-thumbnail-item img {
            display: block;
            width: 96px;
            height: 96px;
            object-fit: cover;
            border-radius: var(--radius);
            border: 2px solid var(--color-border);
        }

        .rechner-thumbnail-item.is-deselected img {
            opacity: 0.35;
        }

        .rechner-thumbnail-item input[type="checkbox"] {
            position: absolute;
            top: 6px;
            right: 6px;
            width: 18px;
            height: 18px;
            margin: 0;
            cursor: pointer;
        }

        /* Waehlbare Spiegelung ALLER Rechner-Thumbnails im #anfrage-Formular (siehe
           renderAnfrageThumbnailVorschau in 3d-druck-rechner.js) - nutzt fuer das Layout UND die
           Checkbox-Interaktion dieselben .rechner-thumbnail-grid/-item-Klassen wie die
           Haupt-Galerie oben (siehe buildThumbnailGrid dort), beide Ansichten teilen sich denselben
           Auswahl-Zustand. */
        .rechner-anfrage-thumbnail-vorschau {
            margin-bottom: 20px;
        }

        /* Datei-Zeilen (Baugruppe aus mehreren Dateien) - siehe addFileRow/renderFileRow in
           3d-druck-rechner.js. */
        .rechner-datei-zeile {
            background: var(--color-bg-2);
            border: 1px solid var(--color-border);
            border-radius: var(--radius);
            padding: 16px;
            margin-bottom: 16px;
        }

        .rechner-datei-zeile-input-row {
            display: flex;
            gap: 8px;
            align-items: center;
        }

        /* Leere Kachel (noch keine Datei, .is-leer aus 3d-druck-rechner.js): nur eine grosse,
           einladende Dateiwahl - Einstellungen, Einklappen und Kopfinfos erst mit Datei. */
        .rechner-datei-zeile.is-leer .rechner-datei-zeile-params,
        .rechner-datei-zeile.is-leer .rechner-datei-zeile-notiz,
        .rechner-datei-zeile.is-leer .rechner-datei-einklapp-btn,
        .rechner-datei-zeile.is-leer .rechner-datei-kopf-info {
            display: none;
        }

        .rechner-datei-zeile.is-leer .rechner-datei-waehlen {
            flex-direction: column;
            justify-content: center;
            gap: 10px;
            min-height: 140px;
            padding: 20px;
            border: 2px dashed var(--color-accent);
            text-align: center;
        }

        .rechner-datei-zeile.is-leer .rechner-datei-waehlen:hover {
            background: rgba(211, 162, 0, 0.06);
        }

        .rechner-datei-zeile.is-leer .rechner-datei-waehlen-btn {
            padding: 10px 22px;
            background: var(--color-accent);
            color: #1A1A1A;
            font-size: 1rem;
        }

        .rechner-datei-zeile.is-leer .rechner-datei-name {
            flex: 0 0 auto;
            white-space: normal;
            justify-content: center;
        }

        .rechner-datei-zeile-input-row .form-input {
            flex: 1;
        }

        .rechner-datei-remove-btn {
            flex-shrink: 0;
            width: 40px;
            height: 40px;
            padding: 0;
            border-radius: var(--radius);
            border: 1px solid var(--color-border);
            background: transparent;
            color: var(--color-text-light);
            cursor: pointer;
        }

        .rechner-datei-remove-btn:hover {
            border-color: var(--color-secondary);
            color: var(--color-secondary);
        }

        .rechner-datei-zeile-status {
            display: flex;
            flex-wrap: wrap;
            align-items: baseline;
            gap: 10px;
            margin-top: 10px;
            color: var(--color-text-light);
            font-size: 0.85rem;
        }

        .rechner-datei-vorschau-btn {
            background: none;
            border: none;
            padding: 0;
            color: var(--color-accent);
            font-size: 0.85rem;
            text-decoration: underline;
            cursor: pointer;
        }

        .rechner-datei-add-btn {
            margin-top: 4px;
        }

        /* Farb-Indikator pro Datei-Zeile (siehe FILE_ROW_COLORS/updateFileRowColors in
           3d-druck-rechner.js) - ordnet Zeile und Rechteck in der Bett-Vorschau einander zu. */
        .rechner-datei-zeile-farbdot {
            display: inline-block;
            flex-shrink: 0;
            width: 14px;
            height: 14px;
            border-radius: 50%;
            border: 1px solid rgba(255, 255, 255, 0.35);
        }

        /* Farbwahl PRO Datei-Zeile/Bauteil (siehe renderFarbeFuerZeile in 3d-druck-rechner.js) -
           kompakt innerhalb der Datei-Zeilen-Box, ersetzt die fruehere globale Farben-Sektion
           (#rechnerFarben). Wiederverwendet die bestehenden .rechner-farbe-swatch(es)/-wunsch-*
           Klassen der frueheren globalen Farben-UI, nur kleiner (siehe
           .rechner-farbe-swatches--zeile unten) und in einem eigenen Container. */
        .rechner-farbe-swatches--zeile {
            display: flex;
            margin-top: 0;
            gap: 8px;
            min-height: 36px;
            align-items: center;
        }

        .rechner-farbe-swatches--zeile .rechner-farbe-swatch {
            width: 26px;
            height: 26px;
        }

        /* Materialliste (SSOT) + Popup "Eigenes Material" (siehe renderMaterialTabelle/
           oeffneMaterialDialog in 3d-druck-rechner.js). */
        .rechner-materialien {
            margin-bottom: 28px;
            padding: 20px;
            background: var(--color-bg);
            border: 1px solid var(--color-border);
            border-left: 3px solid var(--color-accent);
            border-radius: var(--radius);
        }

        .rechner-materialien-kopf {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
        }

        /* Zugeklappte Materialliste (<details>, standardmaessig zu): Titel wie eine Zwischen-
           ueberschrift, Inhalt mit etwas Abstand darunter. */
        .rechner-materialien {
            padding: 14px 20px;
        }

        /* Titelzeile: Titel + Pfeil links, Button rechts; die ganze Zeile ist klickbar. */
        .rechner-materialien > .rechner-materialien-summary {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 10px 16px;
            font-size: 1rem;
        }

        .rechner-materialien > .rechner-materialien-summary::after {
            order: 1;
            margin-right: auto;
        }

        .rechner-materialien > .rechner-materialien-summary .btn {
            order: 2;
            font-size: 0.9rem;
            padding: 8px 16px;
        }

        .rechner-materialien-anzahl {
            color: var(--color-text-light);
            font-size: 0.85rem;
        }

        .rechner-materialien[open] > .price-note {
            margin-top: 14px;
        }

        #druckrechner .form-input:focus-visible,
        #druckrechner .form-select:focus-visible,
        .rechner-material-dialog .form-input:focus-visible,
        .rechner-material-dialog .form-select:focus-visible,
        .rechner-farbe-swatch:focus-visible,
        .rechner-datei-remove-btn:focus-visible,
        .rechner-datei-vorschau-btn:focus-visible,
        .rechner-link-btn:focus-visible,
        .rechner-zeile-vorschau-bild:focus-visible {
            outline: 2px solid var(--color-accent);
            outline-offset: 2px;
        }

        .rechner-datei-add-btn[hidden] {
            display: none;
        }

        .rechner-bauteil-grenze {
            margin: 8px 0 0;
            font-size: 0.9rem;
            color: var(--color-text-light);
        }

        @media (min-width: 768px) {
            .preismodus-switch__titel {
                display: flex;
            }
        }

        /* ===== Bauteilliste: Schnellmenue + einklappbare Kacheln ===== */
        .rechner-bauteilbereich {
            /* --kopf-fix steckt bereits im scroll-padding-top von html - hier nur der Rest. */
            scroll-margin-top: calc(var(--preisleiste-hoehe) + 16px);
        }

        /* Klebt unter dem Preis-Schalter - nur innerhalb von .rechner-bauteilbereich, laeuft also
           bis zum "Weiteres Bauteil"-Button mit. */
        /* Deckende, abgesetzte Leiste ueber die volle Inhaltsbreite (ragt etwas ueber die
           Kachel-Raender hinaus, damit dahinter nichts durchscheint). Angedockt klebt sie direkt
           unter dem (mobil festen) Kopf und nimmt den Netto/Brutto-Schalter auf. */
        .rechner-schnellmenue {
            position: sticky;
            top: var(--kopf-fix);
            z-index: 960;
            /* wandert mobil mit der Kopfleiste (siehe body.menues-ausgeblendet) */
            transition: top 0.3s ease-out;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            gap: 6px 20px;
            min-height: calc(var(--preisleiste-hoehe) + 12px);
            margin: 0 -12px 12px;
            padding: 6px 12px;
            background: var(--color-surface-2);
            border: 1px solid rgba(255, 255, 255, 0.12);
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            font-size: 0.8rem;
        }

        .rechner-schnellmenue.is-angedockt {
            justify-content: flex-start;
            border-top-color: transparent;
            border-bottom: 2px solid var(--color-accent);
            border-radius: 0 0 var(--radius) var(--radius);
            box-shadow: var(--shadow-lg);
        }

        /* Eingesogener Netto/Brutto-Schalter: nur im angedockten Menue sichtbar. */
        .preismodus-switch.preismodus-switch--menue {
            display: none;
            margin-top: 0;
            margin-left: auto;
            box-shadow: none;
        }

        .rechner-schnellmenue.is-angedockt .preismodus-switch--menue {
            display: flex;
        }

        .rechner-schnellmenue .preismodus-switch__btn {
            border: none;
            border-radius: 0;
            padding: 6px 10px;
            color: var(--color-text-light);
            font-size: 0.7rem;
            line-height: 1.2;
        }

        .rechner-schnellmenue .preismodus-switch__btn+.preismodus-switch__btn {
            border-left: 1px solid var(--color-border);
        }

        .rechner-schnellmenue .preismodus-switch__btn:hover,
        .rechner-schnellmenue .preismodus-switch__btn:focus-visible {
            border-color: var(--color-border);
        }

        .rechner-schnellmenue .preismodus-switch__btn.is-active {
            color: #1A1A1A;
        }

        .preismodus-leiste {
            /* top: wandert mobil mit der Kopfleiste (siehe body.menues-ausgeblendet). */
            transition: opacity 0.15s ease, visibility 0.15s, top 0.3s ease-out;
        }

        .preismodus-leiste.is-eingesogen {
            opacity: 0;
            visibility: hidden;
        }

        .rechner-schnellmenue[hidden] {
            display: none;
        }

        .rechner-schnellmenue-gruppe {
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }

        .rechner-schnellmenue-label {
            color: var(--color-text-light);
            margin-right: 2px;
        }

        .rechner-schnellmenue .kurz {
            display: none;
        }

        @media (max-width: 600px) {
            .rechner-schnellmenue {
                gap: 6px 12px;
                padding: 4px 8px;
            }

            .rechner-schnellmenue.is-angedockt {
                justify-content: center;
            }

            .preismodus-switch.preismodus-switch--menue {
                margin-left: 0;
            }

            .rechner-schnellmenue .lang {
                display: none;
            }

            .rechner-schnellmenue .kurz {
                display: inline;
            }
        }

        .rechner-datei-kopf-offen {
            color: var(--color-secondary);
            font-weight: 600;
        }

        .rechner-schnellmenue button {
            background: none;
            border: 1px solid transparent;
            border-radius: var(--radius);
            color: var(--color-accent);
            font: inherit;
            padding: 3px 6px;
            cursor: pointer;
        }

        .rechner-schnellmenue button:hover,
        .rechner-schnellmenue button:focus-visible {
            border-color: var(--color-accent);
            outline: none;
        }

        .rechner-datei-zeile-input-row {
            cursor: pointer;
        }

        .rechner-datei-kopf-info {
            display: none;
            align-items: center;
            gap: 10px;
            flex-shrink: 0;
            font-size: 0.9rem;
        }

        .rechner-datei-zeile.is-eingeklappt .rechner-datei-kopf-info {
            display: inline-flex;
        }

        .rechner-datei-kopf-farben {
            display: inline-flex;
            gap: 3px;
        }

        .rechner-datei-kopf-farbe {
            width: 14px;
            height: 14px;
            border-radius: 50%;
            border: 1px solid rgba(255, 255, 255, 0.35);
        }

        .rechner-datei-kopf-summe {
            display: inline-flex;
            flex-direction: column;
            align-items: flex-end;
            line-height: 1.25;
        }

        .rechner-datei-kopf-preis {
            color: var(--color-accent);
            white-space: nowrap;
        }

        /* "ohne Pauschalen" unter der Summe, nur wenn ein Preis dasteht */
        .rechner-datei-kopf-pauschal {
            display: none;
            color: var(--color-accent);
            font-size: 0.75rem;
            white-space: nowrap;
        }

        .rechner-datei-kopf-summe.mit-pauschal .rechner-datei-kopf-pauschal {
            display: inline;
        }

        .rechner-datei-kopf-menge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

        .rechner-datei-kopf-menge[hidden] {
            display: none;
        }

        .rechner-datei-kopf-stk {
            display: inline-flex;
            flex-direction: column;
            align-items: center;
            color: var(--color-text-light);
            min-width: 3.6em;
            line-height: 1.25;
            white-space: nowrap;
        }

        .rechner-datei-kopf-einzel {
            font-size: 0.75rem;
        }

        .rechner-datei-kopf-mengen-btn {
            width: 30px;
            height: 30px;
            padding: 0;
            border: 1px solid var(--color-accent);
            border-radius: var(--radius);
            background: transparent;
            color: var(--color-accent);
            font-size: 1.1rem;
            line-height: 1;
            cursor: pointer;
            transition: var(--transition);
        }

        .rechner-datei-kopf-mengen-btn:hover:not(:disabled) {
            background: var(--color-accent);
            color: #1A1A1A;
        }

        .rechner-datei-kopf-mengen-btn:disabled {
            border-color: var(--color-border);
            color: var(--color-text-light);
            opacity: 0.5;
            cursor: not-allowed;
        }

        .rechner-datei-einklapp-btn {
            flex-shrink: 0;
            width: 40px;
            height: 40px;
            padding: 0;
            border-radius: var(--radius);
            border: 1px solid var(--color-border);
            background: transparent;
            color: var(--color-text-light);
            font-size: 1.1rem;
            cursor: pointer;
            transition: transform 0.2s;
        }

        .rechner-datei-einklapp-btn:hover,
        .rechner-datei-einklapp-btn:focus-visible {
            border-color: var(--color-accent);
            color: var(--color-accent);
        }

        .rechner-datei-zeile.is-eingeklappt .rechner-datei-einklapp-btn {
            transform: rotate(-90deg);
        }

        /* Eingeklappt bleibt nur die Kopfzeile (und eine evtl. Fehlermeldung) stehen. */
        .rechner-datei-zeile.is-eingeklappt > :not(.rechner-datei-zeile-input-row):not(.form-message) {
            display: none;
        }

        .rechner-datei-zeile.is-eingeklappt {
            padding-top: 10px;
            padding-bottom: 10px;
        }

        @media (max-width: 600px) {
            .rechner-datei-zeile-input-row {
                flex-wrap: wrap;
            }

            .rechner-datei-waehlen {
                flex-basis: calc(100% - 160px);
            }

            .rechner-datei-zeile.is-eingeklappt .rechner-datei-kopf-info {
                order: 5;
                flex-basis: 100%;
                padding-left: 22px;
            }
        }

        /* ===== Druckplatten je Drucker (vor der Schaetzung) ===== */
        .rechner-platten {
            margin-top: 24px;
        }

        .rechner-platten[hidden] {
            display: none;
        }

        .rechner-platten-titel {
            font-size: 1.1rem;
            margin-bottom: 4px;
        }

        .rechner-platten-karten {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
            gap: 12px;
            margin-top: 12px;
        }

        .rechner-platten-karte {
            padding: 14px;
            background: var(--color-bg-2);
            border: 1px solid var(--color-border);
            border-radius: var(--radius);
        }

        .rechner-platten-karte.is-ueber24 {
            border-color: var(--color-secondary);
        }

        .rechner-platten-name {
            font-weight: 600;
            margin: 0;
        }

        .rechner-platten-meta {
            font-size: 0.85rem;
            color: var(--color-text-light);
            margin: 2px 0 10px;
        }

        .rechner-platten-bilder {
            display: flex;
            flex-wrap: wrap;
            align-items: flex-end;
            gap: 10px;
        }

        .rechner-platten-platte {
            margin: 0;
            display: flex;
            flex-direction: column;
            gap: 4px;
            font-size: 0.75rem;
            color: var(--color-text-light);
        }

        .rechner-platten-mehr {
            font-size: 0.8rem;
            color: var(--color-text-light);
        }

        .rechner-platten-legende {
            list-style: none;
            margin: 10px 0 0;
            padding: 0;
            display: flex;
            flex-wrap: wrap;
            gap: 4px 14px;
            font-size: 0.8rem;
        }

        .rechner-platten-legende li {
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

        .rechner-thumbnail-bauteil-titel {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .rechner-sr-only {
            position: absolute;
            width: 1px;
            height: 1px;
            overflow: hidden;
            clip: rect(0 0 0 0);
            white-space: nowrap;
        }

        .rechner-materialien-tabelle-wrapper[hidden] {
            display: none;
        }

        /* Einsteiger-Hilfe unter "Bauteile" (siehe 3d-druck.php). */
        .rechner-hilfe {
            margin: 6px 0 14px;
            font-size: 0.85rem;
        }

        .rechner-hilfe summary {
            cursor: pointer;
            color: var(--color-accent);
        }

        .rechner-hilfe dl {
            margin-top: 10px;
            display: grid;
            grid-template-columns: max-content 1fr;
            gap: 6px 16px;
        }

        .rechner-hilfe dt {
            font-weight: 600;
        }

        .rechner-hilfe dd {
            margin: 0;
            color: var(--color-text-light);
        }

        /* Deutscher "Datei waehlen"-Button statt des Browser-Standardfelds (siehe renderFileRow). */
        .rechner-datei-input {
            position: absolute;
            width: 1px;
            height: 1px;
            opacity: 0;
        }

        .rechner-datei-waehlen {
            flex: 1;
            display: flex;
            align-items: center;
            gap: 12px;
            min-width: 0;
            padding: 8px;
            background: var(--color-bg);
            border: 1px solid var(--color-border);
            border-radius: var(--radius);
            cursor: pointer;
        }

        .rechner-datei-input:focus-visible + .rechner-datei-waehlen {
            outline: 2px solid var(--color-accent);
            outline-offset: 2px;
        }

        .rechner-datei-waehlen-btn {
            flex-shrink: 0;
            padding: 6px 14px;
            border: 1px solid var(--color-accent);
            border-radius: var(--radius);
            color: var(--color-accent);
            font-size: 0.9rem;
        }

        /* Fuellt die ganze Flaeche rechts von "Andere Datei": ein Klick darauf klappt die Kachel
           (siehe dateiName-Listener in 3d-druck-rechner.js), nur der Button waehlt eine neue Datei. */
        .rechner-datei-name {
            flex: 1;
            min-width: 0;
            align-self: stretch;
            display: flex;
            align-items: center;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 0.9rem;
        }

        .rechner-datei-name.is-leer {
            color: var(--color-text-light);
        }

        /* Farbzuordnung als klare Aufgabe (siehe renderMaterialBereich). */
        /* "Offen" bewusst in der Warnfarbe (--color-secondary) statt im Gold der positiven CTAs. */
        .rechner-sektionen.is-offen {
            border-style: solid;
            border-color: var(--color-secondary);
            background: rgba(169, 14, 0, 0.08);
        }

        .rechner-sektionen-titel.is-offen {
            color: var(--color-text);
            font-weight: 600;
        }

        .rechner-sektion.is-offen {
            padding-left: 10px;
            border-left: 3px solid var(--color-secondary);
        }

        .rechner-sektion-hinweis.is-offen {
            color: var(--color-text);
        }

        .rechner-materialien-kopf h3 {
            margin: 0;
            font-size: 1.1rem;
        }

        .rechner-materialien-tabelle-wrapper {
            overflow-x: auto;
            margin: 8px 0 12px;
        }

        .rechner-materialien-tabelle {
            font-size: 0.85rem;
        }

        .rechner-materialien-tabelle th,
        .rechner-materialien-tabelle td {
            padding: 8px 10px;
            vertical-align: middle;
        }

        .rechner-materialien-tabelle tr.is-standard td {
            color: var(--color-text-light);
        }

        .rechner-materialien-aktionen {
            white-space: nowrap;
            text-align: right;
        }

        .rechner-link-btn {
            background: none;
            border: none;
            padding: 0 4px;
            color: var(--color-accent);
            font: inherit;
            font-size: 0.85rem;
            text-decoration: underline;
            cursor: pointer;
        }

        .rechner-farbpunkt {
            display: inline-block;
            flex-shrink: 0;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            border: 1px solid rgba(255, 255, 255, 0.35);
            vertical-align: middle;
            margin-right: 4px;
        }

        /* Globaler Reset (* { margin: 0 }) hebt das automatische Zentrieren des nativen <dialog>
           auf - deshalb explizit mittig im Viewport. */
        .rechner-material-dialog {
            position: fixed;
            inset: 0;
            margin: auto;
            max-height: 90vh;
            overflow-y: auto;
            width: min(92vw, 460px);
            padding: 24px;
            background: var(--color-bg-2);
            color: var(--color-text);
            border: 1px solid var(--color-accent);
            border-radius: var(--radius);
        }

        .rechner-material-dialog::backdrop {
            background: rgba(0, 0, 0, 0.6);
        }

        .rechner-material-dialog h3 {
            margin: 0 0 16px;
        }

        .rechner-material-farbe {
            display: flex;
            gap: 10px;
            align-items: center;
        }

        .rechner-material-farbe .form-input {
            flex: 1;
        }

        .rechner-material-dialog-aktionen {
            display: flex;
            justify-content: flex-end;
            gap: 12px;
            margin-top: 8px;
        }

        /* Materialauswahl im Bauteil: Select + Schwarz/Weiss direkt nebeneinander. */
        .rechner-zeile-feld--material {
            flex: 2 1 240px;
        }

        .rechner-zeile-feld--material[hidden] {
            display: none;
        }

        .rechner-materialwahl {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .rechner-materialwahl .form-select {
            flex: 1;
            min-width: 0;
        }

        /* Farbsektionen einer mehrfarbigen 3MF: je Dateifarbe eine Zeile mit Materialauswahl. */
        .rechner-sektionen {
            margin-top: 14px;
            padding: 12px;
            border: 1px dashed var(--color-border);
            border-radius: var(--radius);
        }

        .rechner-sektionen[hidden] {
            display: none;
        }

        .rechner-sektion {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 8px 16px;
            margin-top: 10px;
        }

        .rechner-sektion-herkunft {
            flex: 1 1 200px;
            font-size: 0.85rem;
            word-break: break-word;
        }

        .rechner-sektion .rechner-materialwahl {
            flex: 1 1 280px;
        }

        .rechner-sektion-hinweis {
            flex-basis: 100%;
            font-size: 0.8rem;
            color: var(--color-text-light);
        }

        /* Vorschaubilder fuer die Anfrage: aufklappbar am Ende des Ergebnisses. */
        .rechner-thumbnail-details {
            margin-top: 20px;
        }

        .rechner-thumbnail-details > summary {
            cursor: pointer;
            color: var(--color-accent);
            font-size: 0.9rem;
        }

        @media (max-width: 480px) {
            .rechner-drucker-karte {
                flex: 1 1 100%;
            }
        }

        /* Material/Qualitaet/Fuellung/Anzahl/Notiz PRO Datei-Zeile/Bauteil (siehe
           renderParamsFuerZeile in 3d-druck-rechner.js) - ersetzt die fruehere globale Auswahl im
           rechten Formular-Bereich, ein kompakter Satz Controls je Zeile. */
        .rechner-datei-zeile-params {
            display: flex;
            flex-wrap: wrap;
            align-items: flex-start;
            gap: 12px;
            margin-top: 14px;
        }

        .rechner-zeile-feld {
            display: flex;
            flex-direction: column;
            gap: 4px;
            flex: 1 1 120px;
            min-width: 100px;
        }

        .rechner-zeile-feld--anzahl {
            flex: 0 1 76px;
            min-width: 64px;
        }

        .rechner-zeile-feld-label {
            color: var(--color-text-light);
            font-size: 0.7rem;
            text-transform: uppercase;
            letter-spacing: 0.06em;
        }

        .rechner-zeile-select,
        .rechner-zeile-anzahl {
            padding: 8px 10px;
            font-size: 0.85rem;
        }

        .rechner-zeile-feld--farbe {
            flex: 0 1 auto;
        }

        .rechner-datei-zeile-notiz {
            margin-top: 12px;
        }

        .rechner-datei-zeile-notiz .rechner-zeile-feld--notiz {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        /* Druckkosten je Bauteil als Aufklapp-Element (siehe renderBauteilMaschinenInfos in
           3d-druck-rechner.js): Ausloeser = hervorgehobene Preisspanne ueber alle Drucker. */
        .rechner-bauteil-druckkosten {
            margin-top: 12px;
        }

        .rechner-druckkosten {
            border: 1px solid var(--color-border);
            border-radius: var(--radius);
            background: var(--color-bg);
        }

        .rechner-druckkosten summary {
            display: flex;
            flex-wrap: wrap;
            align-items: baseline;
            gap: 4px 12px;
            padding: 10px 14px;
            cursor: pointer;
            list-style: none;
        }

        /* Klickziel ist immer das (dauerhaft bestehende) summary selbst - die Kind-Spans werden
           bei jeder Neuberechnung ersetzt, ein Klick darauf ginge sonst verloren. */
        .rechner-druckkosten summary * {
            pointer-events: none;
        }

        .rechner-druckkosten summary::-webkit-details-marker {
            display: none;
        }

        .rechner-druckkosten summary:hover,
        .rechner-druckkosten summary:focus-visible {
            background: var(--color-bg-2);
        }

        .rechner-druckkosten-label {
            color: var(--color-text-light);
            font-size: 0.85rem;
        }

        .rechner-druckkosten-spanne {
            color: var(--color-accent);
            font-weight: 700;
            font-size: 1.05rem;
        }

        .rechner-druckkosten-zusatz {
            color: var(--color-text-light);
            font-size: 0.8rem;
        }

        .rechner-druckkosten-einzel {
            color: var(--color-text-light);
            font-size: 0.85rem;
            white-space: nowrap;
        }

        /* gleiche Schrift wie .rechner-druckkosten-spanne */
        .rechner-druckkosten-pauschal {
            color: var(--color-accent);
            font-weight: 700;
            font-size: 1.05rem;
        }

        .rechner-druckkosten-aktion {
            margin-left: auto;
            padding: 3px 10px;
            border: 1px solid var(--color-accent);
            border-radius: var(--radius);
            color: var(--color-accent);
            font-size: 0.85rem;
            white-space: nowrap;
        }

        .rechner-druckkosten-aktion::after {
            content: " ▾";
            display: inline-block;
            transition: transform 0.2s;
        }

        .rechner-druckkosten[open] .rechner-druckkosten-aktion::after {
            transform: rotate(180deg);
        }

        /* Drucker je Bauteil (Konzept v2, siehe renderBauteilPreise): Druckerfeld + Preis in einer
           Zeile, darunter Vergleich FDM/Resin, Mengeneffekt, Hinweise und aufklappbare Rechnung. */
        .rechner-bauteil-preis-kopf {
            display: flex;
            flex-wrap: wrap;
            align-items: flex-end;
            gap: 10px 20px;
        }

        .rechner-zeile-feld--drucker {
            flex: 0 1 260px;
        }

        .rechner-bauteil-preis-haupt {
            display: flex;
            flex-wrap: wrap;
            align-items: baseline;
            gap: 4px 10px;
            padding-bottom: 6px;
        }

        /* Kompakte "Chips" fuer Vergleich, Mengeneffekt und Kurzzeile unter dem Gesamtpreis. */
        .rechner-chips {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 6px 6px;
            row-gap: 6px;
        }

        .rechner-chips[hidden] {
            display: none;
        }

        .rechner-chip-label {
            font-size: 0.8rem;
            color: var(--color-text-light);
        }

        .rechner-chip {
            display: inline-block;
            padding: 3px 9px;
            border: 1px solid var(--color-border);
            border-radius: 999px;
            background: var(--color-bg);
            font-size: 0.8rem;
            color: var(--color-text);
        }

        .rechner-chip.is-aktiv {
            border-color: var(--color-accent);
            color: var(--color-accent);
        }

        .rechner-chip.is-aus {
            color: var(--color-text-light);
            border: 1px dashed rgba(255, 255, 255, 0.35);
        }

        .rechner-bauteil-vergleich,
        .rechner-bauteil-menge,
        .rechner-bauteil-hinweis {
            margin: 8px 0 0;
            font-size: 0.82rem;
            color: var(--color-text-light);
        }

        .rechner-bauteil-menge {
            color: var(--color-text);
        }

        .rechner-bauteil-hinweis {
            color: var(--color-accent);
        }

        .rechner-bauteil-vergleich[hidden],
        .rechner-bauteil-menge[hidden],
        .rechner-bauteil-hinweis[hidden] {
            display: none;
        }

        .rechner-druckkosten {
            margin-top: 10px;
        }

        /* EIN Stil fuer alle Aufklapper im Rechner: Textlink in Akzentfarbe mit drehendem Pfeil. */
        .rechner-toggle {
            display: inline-block;
            cursor: pointer;
            list-style: none;
            color: var(--color-accent);
            font-size: 0.9rem;
            padding: 2px 0;
            background: none;
        }

        .rechner-toggle::-webkit-details-marker {
            display: none;
        }

        .rechner-toggle::after {
            content: " ▾";
            display: inline-block;
            transition: transform 0.2s;
        }

        details[open] > .rechner-toggle::after {
            transform: rotate(180deg);
        }

        .rechner-toggle:focus-visible {
            outline: 2px solid var(--color-accent);
            outline-offset: 2px;
        }

        .rechner-druckkosten.rechner-druckkosten {
            border: none;
            background: none;
        }

        .rechner-druckkosten > summary.rechner-toggle {
            padding: 2px 0;
        }

        /* Ergebnis v2: Kurzzeile unter dem Gesamtpreis, Aufschluesselung aufklappbar, Tipp. */
        .rechner-ergebnis-kurzzeile {
            margin: 2px 0 6px;
            font-size: 0.9rem;
            color: var(--color-text);
        }

        .rechner-aufschluesselung {
            margin: 4px 0 8px;
        }

        .rechner-aufschluesselung[hidden] {
            display: none;
        }

        .rechner-aufschluesselung > summary {
            cursor: pointer;
            color: var(--color-accent);
            font-size: 0.95rem;
            margin-bottom: 10px;
            list-style: none;
        }

        .rechner-aufschluesselung > summary::-webkit-details-marker {
            display: none;
        }

        /* Tipp und Resin-Hinweis bewusst NEUTRAL (Rahmen, keine Warnfarbe): Rot bedeutet im
           Rechner ausschliesslich "hier fehlt eine Entscheidung" (offene Farbzuordnung). */
        .rechner-tipp,
        .rechner-info {
            margin-top: 12px;
            padding: 10px 14px;
            border: 1px solid var(--color-border);
            border-left: 3px solid var(--color-text-light);
            border-radius: var(--radius);
            font-size: 0.88rem;
        }

        .rechner-bauteil-maschinen-wrapper {
            padding: 0 14px 10px;
            overflow-x: auto;
        }

        .rechner-bauteil-maschinen {
            font-size: 0.82rem;
        }

        .rechner-bauteil-maschinen caption {
            caption-side: top;
            text-align: left;
            padding-bottom: 6px;
            color: var(--color-text-light);
            font-size: 0.78rem;
        }

        .rechner-bauteil-maschinen th,
        .rechner-bauteil-maschinen td {
            padding: 6px 10px;
            white-space: nowrap;
        }

        .rechner-bauteil-maschinen tr.is-selected td:first-child {
            color: var(--color-accent);
            font-weight: 600;
        }

        /* Kleiner Transparenz-Zusatz unter Gramm-Preis/Druckdauer (siehe zelle() im Rechner). */
        .rechner-zelle-zusatz {
            display: block;
            color: var(--color-text-light);
            font-size: 0.75rem;
            white-space: normal;
        }

        .rechner-bauteil-maschinen-grund {
            color: var(--color-text-light);
            font-style: italic;
        }

        .rechner-zeile-notiz {
            font-size: 0.85rem;
            padding: 8px 10px;
        }

        /* Leerer "Parkplatz" fuer den gemeinsamen 3D-Viewer (siehe moveVorschauZuElement in
           3d-druck-rechner.js) - erscheint nur, wenn der Viewer gerade hier hineingeschoben wurde,
           sonst bleibt der leere Slot unsichtbar (kein zusaetzlicher Platzbedarf). */
        .rechner-zeile-vorschau-slot {
            margin-top: 4px;
        }

        .rechner-zeile-vorschau-slot[hidden],
        .rechner-zeile-vorschau-bild[hidden] {
            display: none;
        }

        /* Standbild fuer Kacheln, in denen der interaktive 3D-Viewer gerade nicht sitzt (siehe
           updateVorschauSlots in 3d-druck-rechner.js) - gleiche Masse wie .rechner-viewer. */
        .rechner-zeile-vorschau-bild {
            position: relative;
            display: block;
            width: 100%;
            aspect-ratio: 16 / 9;
            max-height: 380px;
            margin-top: 16px;
            padding: 0;
            background: #2b2b2b;
            border: 1px solid var(--color-border);
            border-radius: var(--radius);
            overflow: hidden;
            cursor: pointer;
        }

        .rechner-zeile-vorschau-bild img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        .rechner-zeile-vorschau-bild span {
            position: absolute;
            right: 10px;
            bottom: 10px;
            padding: 4px 10px;
            border-radius: var(--radius);
            background: rgba(0, 0, 0, 0.6);
            color: var(--color-text);
            font-size: 0.8rem;
        }

        .rechner-zeile-vorschau-bild:hover,
        .rechner-zeile-vorschau-bild:focus-visible {
            border-color: var(--color-accent);
        }



        /* Drucker-Auswahl + Druckbett-Vorschau in einem (siehe renderDruckerAuswahl in
           3d-druck-rechner.js) - eine Karte pro unterstuetztem Drucker, ersetzt die frueher
           getrennte Text-Badge-Liste und Bett-Vorschau-Liste. */
        .rechner-drucker-auswahl {
            margin-top: 20px;
            margin-bottom: 20px;
        }

        .rechner-drucker-auswahl[hidden] {
            display: none;
        }

        .rechner-drucker-karten {
            display: flex;
            flex-wrap: wrap;
            gap: 16px;
            margin-top: 12px;
        }

        .rechner-drucker-karte {
            display: flex;
            flex-direction: column;
            background: var(--color-bg-2);
            border: 2px solid var(--color-border);
            border-radius: var(--radius);
            overflow: hidden;
        }

        .rechner-drucker-karte.is-selected {
            border-color: var(--color-accent);
        }

        .rechner-drucker-karte.is-disabled {
            opacity: 0.8;
            border-style: dashed;
        }

        .rechner-drucker-karte.is-disabled .rechner-drucker-karte-reason {
            color: var(--color-text);
            max-width: 220px;
        }

        .rechner-drucker-karte-select {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
            padding: 10px;
            background: none;
            border: none;
            color: inherit;
            font-family: inherit;
            cursor: pointer;
        }

        .rechner-drucker-karte-select:disabled {
            cursor: not-allowed;
        }

        .rechner-drucker-karte-name {
            font-size: 0.85rem;
            font-weight: 600;
        }

        .rechner-drucker-karte-canvas {
            display: block;
            border-radius: 4px;
        }

        .rechner-drucker-karte-meta {
            font-size: 0.78rem;
            color: var(--color-text-light);
        }

        .rechner-drucker-karte-platten {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: flex-end;
            gap: 8px;
            max-width: 420px;
        }

        .rechner-drucker-karte-platte {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2px;
            font-size: 0.7rem;
            color: var(--color-text-light);
        }

        .rechner-drucker-karte-mehr {
            align-self: center;
            font-size: 0.78rem;
            color: var(--color-text-light);
        }

        .rechner-drucker-karte-preis {
            font-size: 0.9rem;
            font-weight: 600;
            color: var(--color-accent);
            text-align: center;
        }

        .rechner-drucker-karte-preis small {
            font-weight: 400;
            color: var(--color-text-light);
        }

        .rechner-drucker-karte-reason {
            font-size: 0.78rem;
            color: var(--color-text-light);
            text-align: center;
        }

        /* Anzahl Sets + Erklaerung nebeneinander, wraps auf schmalen Bildschirmen untereinander. */
        /* Kopf der Schaetzung: Titel links, "Anzahl Sets" rechtsbuendig (Nutzer 2026-09-28). Auf
           schmalen Bildschirmen rutscht das Feld unter den Titel, bleibt aber rechts. */
        .rechner-ergebnis-kopf {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            flex-wrap: wrap;
            gap: 8px 24px;
            margin-bottom: 12px;
        }

        .rechner-ergebnis-kopf .rechner-ergebnis-titel {
            margin: 0;
        }

        .rechner-sets {
            display: grid;
            grid-template-columns: auto auto;
            align-items: center;
            gap: 4px 10px;
            margin-left: auto;
            text-align: right;
        }

        .rechner-sets .form-label {
            margin: 0;
        }

        /* Minus | Zahl | Plus. Die nativen Spinner-Pfeile ausblenden, die Buttons ersetzen sie. */
        .rechner-sets-stepper {
            display: flex;
            align-items: stretch;
            gap: 6px;
        }

        .rechner-sets .form-input {
            width: 64px;
            padding: 10px 6px;
            text-align: center;
            -moz-appearance: textfield;
            appearance: textfield;
        }

        .rechner-sets .form-input::-webkit-outer-spin-button,
        .rechner-sets .form-input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        .rechner-sets-btn {
            width: 44px;
            border: 1px solid var(--color-accent);
            border-radius: var(--radius);
            background: transparent;
            color: var(--color-accent);
            font-family: var(--font-body);
            font-size: 1.3rem;
            line-height: 1;
            cursor: pointer;
            transition: var(--transition);
        }

        .rechner-sets-btn:hover:not(:disabled) {
            background: var(--color-accent);
            color: #1A1A1A;
        }

        .rechner-sets-btn:disabled {
            border-color: var(--color-border);
            color: var(--color-text-light);
            opacity: 0.5;
            cursor: not-allowed;
        }

        .rechner-sets-hinweis {
            grid-column: 1 / -1;
            margin: 0;
            color: var(--color-text-light);
            font-size: 0.75rem;
        }

        /*
███████  ██████   ██████  ████████ ███████ ██████
██      ██    ██ ██    ██    ██    ██      ██   ██
█████   ██    ██ ██    ██    ██    █████   ██████
██      ██    ██ ██    ██    ██    ██      ██   ██
██       ██████   ██████     ██    ███████ ██   ██
*/

        .footer {
            background: #1a1a1a;
            /* Unten mehr Luft als oben/seitlich: haelt Platz frei fuer den fixed .back-to-top-
               Button (44px hoch + 20px Abstand zum Rand), der sonst am Seitenende exakt die
               letzte Footer-Zeile (Copyright/Impressum-Link) ueberdeckt - siehe Befund bei der
               Umsetzung von .back-to-top. */
            padding: 48px 24px 90px;
            border-top: 2px solid var(--color-primary);
        }

        .footer-inner {
            max-width: var(--max-width);
            margin: 0 auto;
        }

        .footer-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 40px;
            margin-bottom: 40px;
        }

        .footer-logo {
            display: inline-block;
            /* Gleicher heller Verlauf wie bei .section-label/.mobile-logo/.sidebar-logo/
               .topnav-logo. */
            background: linear-gradient(90deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 1) 60%);
            border-radius: 8px;
            padding: 10px;
        }

        .footer-logo img {
            height: 40px;
            width: auto;
            margin-bottom: 16px;
        }

        .footer-tagline {
            color: var(--color-text-light);
            font-size: 0.9rem;
            line-height: 1.6;
        }

        .footer-nav-title {
            color: var(--color-accent);
            font-size: 0.8rem;
            letter-spacing: 0.15em;
            text-transform: uppercase;
            margin-bottom: 16px;
        }

        .footer-nav ul {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .footer-nav ul li a {
            color: var(--color-text-light);
            font-size: 0.9rem;
            transition: var(--transition);
        }

        .footer-nav ul li a:hover {
            color: var(--color-accent);
        }

        /* "Vertrag widerrufen" hervorgehoben (Online-Widerrufsfunktion, § 356a BGB verlangt eine
           hervorgehobene, leicht zugaengliche Platzierung). */
        .footer-nav ul li a.footer-widerruf {
            display: inline-block;
            padding: 4px 12px;
            border: 1px solid var(--color-accent);
            border-radius: var(--radius);
            color: var(--color-accent);
        }

        .footer-nav ul li a.footer-widerruf:hover {
            background: var(--color-accent);
            color: #1A1A1A;
        }

        /* Links im Fliesstext von Rechtstexten, Rechts-Popups und Formular-Hinweisen/Checkboxen als
           Links erkennbar (Akzentfarbe + Unterstreichung) - sonst gehen sie im Text unter. */
        .legal-page .section-body a:not(.btn),
        .legal-page .detail-col a:not(.btn),
        .popup__body a:not(.btn),
        .form-label a,
        .form-group .price-note a,
        .kontakt-form .price-note a,
        #vertrag-widerrufen .section-body a {
            color: var(--color-accent);
            text-decoration: underline;
            text-underline-offset: 3px;
        }

        .legal-page .detail-col a:not(.btn):hover,
        .popup__body a:not(.btn):hover,
        .form-label a:hover {
            text-decoration-thickness: 2px;
        }

        .footer-bottom {
            border-top: 1px solid #333;
            padding-top: 24px;
            display: flex;
            flex-direction: column;
            gap: 8px;
            align-items: center;
            text-align: center;
        }

        .footer-bottom p {
            color: var(--color-text-light);
            font-size: 0.8rem;
        }

        .footer-bottom a {
            color: var(--color-text-light);
            transition: var(--transition);
        }

        .footer-bottom a:hover {
            color: var(--color-accent);
        }


        /*
 ██████  ██████  ███    ██ ███████ ███████ ███    ██ ████████
██      ██    ██ ████   ██ ██      ██      ████   ██    ██
██      ██    ██ ██ ██  ██ ███████ █████   ██ ██  ██    ██
██      ██    ██ ██  ██ ██      ██ ██      ██  ██ ██    ██
 ██████  ██████  ██   ████ ███████ ███████ ██   ████    ██
*/

        /* Bilder/Ressourcen, die erst nach Cookie-Consent nachgeladen werden (data-consent-src
           statt src, siehe public/assets/js/consent.js). Ohne src-Attribut rendern Browser den
           alt-Text als reinen Text statt eines kaputten Bild-Icons - hier nur passend eingefaerbt. */
        img[data-consent-src]:not([src]) {
            color: var(--color-text-light);
            font-size: 0.7rem;
            font-style: italic;
            background: rgba(255, 255, 255, 0.03);
            border: 1px dashed var(--color-border);
            border-radius: var(--radius);
            padding: 4px 8px;
            min-height: 24px;
        }

        /* Cookie-Banner (Markup: protected/layout.php, Logik: public/assets/js/consent.js).
           Kann durch aufgeklappte Kategorien hoch werden - daher max-height + eigenes Scrollen,
           damit die drei Buttons auf kleinen Bildschirmen nie aus dem Bild rutschen (sticky). */
        .cookie-consent {
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 9998;
            max-height: 85vh;
            overflow-y: auto;
            background: var(--color-bg-2);
            border-top: 2px solid var(--color-primary);
            box-shadow: var(--shadow-lg);
            padding: 18px 20px 0;
        }

        .cookie-consent[hidden] {
            display: none;
        }

        .cookie-consent__inner {
            max-width: var(--max-width);
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            gap: 14px;
        }

        .cookie-consent__title {
            font-family: var(--font-heading);
            color: var(--color-text);
            font-size: 1.05rem;
        }

        .cookie-consent__text {
            color: var(--color-text-light);
            font-size: 0.9rem;
            line-height: 1.6;
        }

        .cookie-consent__text a,
        .consent-service__meta a {
            color: var(--color-accent);
        }

        .cookie-consent__categories {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .consent-category {
            position: relative;
            border: 1px solid var(--color-border);
            border-radius: var(--radius);
            background: var(--color-surface-2);
        }

        .consent-category__summary {
            cursor: pointer;
            padding: 12px 130px 12px 14px;
            color: var(--color-text);
            font-size: 0.95rem;
        }

        .consent-category__count {
            color: var(--color-text-light);
            font-size: 0.8rem;
        }

        /* Schalter liegt ausserhalb von <summary> (siehe layout.php), wird aber optisch rechts in
           dessen Zeile positioniert. */
        .consent-switch {
            position: absolute;
            top: 10px;
            right: 14px;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: var(--color-text-light);
            font-size: 0.8rem;
            cursor: pointer;
        }

        .consent-switch input,
        .consent-service__head input {
            width: 18px;
            height: 18px;
            accent-color: var(--color-accent);
            cursor: pointer;
        }

        .consent-switch input:disabled {
            cursor: not-allowed;
        }

        .consent-category__desc {
            padding: 0 14px 10px;
            color: var(--color-text-light);
            font-size: 0.85rem;
            line-height: 1.5;
        }

        .consent-services {
            list-style: none;
            padding: 0 14px 12px;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .consent-service {
            border-top: 1px solid var(--color-border);
            padding-top: 10px;
        }

        .consent-service__head {
            display: flex;
            align-items: center;
            gap: 10px;
            color: var(--color-text);
            cursor: pointer;
        }

        .consent-service__meta {
            display: grid;
            grid-template-columns: max-content 1fr;
            gap: 2px 12px;
            margin: 6px 0 0 28px;
            color: var(--color-text-light);
            font-size: 0.8rem;
            line-height: 1.5;
        }

        .consent-service__meta dt {
            color: var(--color-text);
        }

        /* Alle drei Buttons bewusst gleich gewichtet (gleiche Klasse/Groesse) - "Alle ablehnen"
           darf nicht unscheinbarer sein als "Alle akzeptieren". */
        .cookie-consent__actions {
            position: sticky;
            bottom: 0;
            display: grid;
            grid-template-columns: 1fr;
            gap: 10px;
            /* Safe-Area wie bei .bottom-nav: unterster Button nicht an der iOS-Wischleiste. */
            padding: 12px 0 calc(16px + env(safe-area-inset-bottom, 0px));
            background: var(--color-bg-2);
        }

        @media (min-width: 768px) {
            .cookie-consent__actions {
                grid-template-columns: repeat(3, 1fr);
            }
        }

        /* Handy: Banner so flach wie moeglich halten, damit Hero und CTA darueber sichtbar bleiben
           (designer-/webseitenbesucher-Roast 2026-09-26). Inhalt und Struktur bleiben gleich - nur
           kleinere Abstaende/Schrift und die drei Buttons nebeneinander statt gestapelt. */
        @media (max-width: 767px) {
            .cookie-consent {
                padding: 12px 12px 0;
            }

            .cookie-consent__inner {
                gap: 8px;
            }

            .cookie-consent__title {
                font-size: 0.95rem;
            }

            .cookie-consent__text {
                font-size: 0.78rem;
                line-height: 1.45;
            }

            .cookie-consent__categories {
                gap: 6px;
            }

            .consent-category__summary {
                padding: 8px 110px 8px 10px;
                font-size: 0.85rem;
            }

            .consent-switch {
                top: 6px;
                right: 10px;
            }

            .cookie-consent__actions {
                grid-template-columns: repeat(3, 1fr);
                gap: 6px;
                padding-top: 8px;
            }

            .cookie-consent__actions .btn {
                padding: 10px 4px;
                font-size: 0.78rem;
                letter-spacing: 0;
                line-height: 1.2;
            }
        }

        /* Gesperrter externer Inhalt (z.B. Google-Maps-Karte im Impressum): Overlay verdeckt den
           Platz, bis der Dienst erlaubt ist - danach setzt consent.js .is-unlocked. */
        .consent-embed {
            position: relative;
            width: 100%;
            aspect-ratio: 16 / 9;
            min-height: 260px;
            border: 1px solid var(--color-border);
            border-radius: var(--radius);
            overflow: hidden;
            background: var(--color-surface-2);
        }

        .consent-embed iframe {
            width: 100%;
            height: 100%;
            border: 0;
            display: block;
        }

        .consent-embed__overlay {
            position: absolute;
            inset: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 12px;
            padding: 20px;
            text-align: center;
            color: var(--color-text-light);
            font-size: 0.85rem;
            line-height: 1.5;
            background: var(--color-surface-2);
        }

        .consent-embed__overlay strong {
            color: var(--color-text);
            font-size: 1rem;
        }

        .consent-embed__overlay a {
            color: var(--color-accent);
        }

        .consent-embed.is-unlocked .consent-embed__overlay {
            display: none;
        }

        .impressum-standort {
            margin-top: 24px;
        }

        /* BACK-TO-TOP (seitenuebergreifend, gerendert in protected/layout.php).
           z-index bewusst unter --popup-z-index (9999) und dem Cookie-Banner (9998), damit
           beide den Button bei Bedarf ueberdecken statt dass er sie verdeckt. */
        .back-to-top {
            position: fixed;
            right: 20px;
            bottom: 20px;
            z-index: 900;
            width: 44px;
            height: 44px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--color-primary);
            color: var(--color-text);
            border: 1px solid var(--color-border);
            border-radius: var(--radius);
            font-size: 1.3rem;
            line-height: 1;
            cursor: pointer;
            box-shadow: var(--shadow);
            opacity: 0;
            transform: translateY(12px);
            pointer-events: none;
            transition: opacity var(--transition), transform var(--transition), background var(--transition);
        }

        .back-to-top.visible {
            opacity: 1;
            transform: translateY(0);
            pointer-events: auto;
        }

        .back-to-top:hover,
        .back-to-top:focus-visible {
            background: var(--color-secondary);
        }

        /* Solange der Cookie-Banner offen ist, stehen dessen Aktions-Buttons ebenfalls unten
           rechts - Button komplett ausblenden statt nur per z-index dahinterzulegen, sonst
           waere er fuer Tastatur-/Screenreader-Nutzung noch da, aber optisch unsichtbar und
           per Klick blockiert. #cookieConsent steht im Markup vor .back-to-top (siehe
           protected/layout.php), daher reicht ein General-Sibling-Selektor ohne JS-Kopplung. */
        #cookieConsent:not([hidden])~.back-to-top {
            display: none;
        }

        /* PREISMODUS-SWITCH (nur /3d-druck, siehe public/3d-druck.php und assets/js/preismodus.js):
           klebt oben mittig unter der Navigation und laeuft immer mit. Die Leiste ist 0 px hoch
           (kein Layout-Versatz); mobil sitzt sie unter dem festen Mobile-Header (--kopf-fix),
           auf Desktop scrollt die Topnav weg und die Leiste klebt am oberen Rand. */
        .preismodus-leiste {
            position: sticky;
            top: var(--kopf-fix);
            z-index: 950;
            height: 0;
            display: flex;
            justify-content: center;
        }

        .preismodus-switch {
            position: relative;
            margin-top: 8px;
            height: var(--preisleiste-hoehe);
            display: flex;
            background: var(--color-bg-2);
            border: 1px solid var(--color-border);
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            overflow: hidden;
        }

        .preismodus-switch__titel {
            display: none;
            align-items: center;
            padding: 0 12px;
            font-size: 0.75rem;
            color: var(--color-text-light);
        }

        .preismodus-switch__btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2px;
            background: transparent;
            border: none;
            color: var(--color-text-light);
            font-family: var(--font-body);
            font-size: 0.7rem;
            line-height: 1.2;
            letter-spacing: 0.02em;
            padding: 8px 10px;
            cursor: pointer;
            white-space: nowrap;
            transition: var(--transition);
        }

        .preismodus-switch__btn+.preismodus-switch__btn {
            border-left: 1px solid var(--color-border);
        }

        .preismodus-switch__btn:hover,
        .preismodus-switch__btn:focus-visible {
            background: rgba(211, 162, 0, 0.08);
            color: var(--color-accent);
        }

        .preismodus-switch__btn.is-active {
            background: var(--color-accent);
            color: #1A1A1A;
        }

        .preismodus-switch__btn.is-active .preismodus-switch__sub {
            color: #1A1A1A;
        }

        .preismodus-switch__sub {
            font-size: 0.6rem;
            color: var(--color-text-light);
        }

        /* Auf Seiten mit Bottom-Nav (body.has-sidebar, siehe protected/layout.php - nur auf
           Mobilgeraeten sichtbar, .bottom-nav ist auf Desktop ausgeblendet) muessen Back-to-Top
           und Preismodus-Switch ueber der neuen Leiste schweben statt darunter zu verschwinden.
           Wird im Desktop-@media weiter unten wieder auf 20px zurueckgesetzt, da dort keine
           Bottom-Nav existiert. */
        body.has-sidebar .back-to-top {
            bottom: calc(var(--bottom-nav-height) + 20px);
        }


        /*
███    ███ ███████ ██████  ██  █████
████  ████ ██      ██   ██ ██ ██   ██
██ ████ ██ █████   ██   ██ ██ ███████
██  ██  ██ ██      ██   ██ ██ ██   ██
██      ██ ███████ ██████  ██ ██   ██
*/

        /* ===== TABLET (768px+) ===== */
        @media (min-width: 768px) {
            .hero {
                padding: 100px 24px 80px;
            }

            .hero h1 {
                font-size: 2.9rem;
            }

            .stats-row {
                grid-template-columns: repeat(4, 1fr);
            }

            .panel-detail {
                grid-template-columns: 1fr 1fr;
            }

            .price-tables-grid {
                grid-template-columns: 1fr 1fr;
            }

            .leistungen-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .blog-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .machine-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .zusatzmodule-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .split-layout {
                flex-direction: row;
                align-items: center;
            }

            .team-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .team-card {
                grid-template-columns: 170px 1fr;
            }

            .team-photo {
                height: 100%;
            }

            .split-text {
                flex: 1.2;
            }

            .split-visual {
                flex: 1;
            }

            .kontakt-grid {
                grid-template-columns: 1fr 1fr;
            }

            .footer-logo img {
                height: 60px;
                width: auto;
            }

            .footer-grid {
                grid-template-columns: 2fr 1fr 1fr;
            }

            .footer-bottom {
                flex-direction: row;
                justify-content: space-between;
                text-align: left;
            }

        }

        /* ===== DESKTOP (1200px+) ===== */
        @media (min-width: 1200px) {

            body {
                padding-left: var(--sidebar-width);
            }

            .hero h1 {
                font-size: 3.4rem;
            }

            /* Sidebar einblenden */
            .sidebar {
                display: flex;
                position: fixed;
                left: 0;
                top: 0;
                bottom: 0;
                width: var(--sidebar-width);
                background: #1a1a1a;
                border-right: 2px solid var(--color-primary);
                flex-direction: column;
                align-items: center;
                z-index: 1000;
                /* Fester Platz fuer Logo (oben) und Indikator-Strich (unten), damit die
                   Navigation dazwischen nie ueberlappen kann - siehe .sidebar-logo/.sidebar-indicator. */
                padding-top: 90px;
                padding-bottom: 80px;
            }

            .sidebar-logo {
                position: absolute;
                top: 20px;
                writing-mode: vertical-rl;
                transform: rotate(180deg);
                font-size: 0.7rem;
                letter-spacing: 0.15em;
                color: var(--color-text-light);
                /* text-transform: uppercase; */
                /* Gleicher heller Verlauf wie bei .section-label/.mobile-logo - Hintergrund
                   dreht optisch mit (Verlauf ist symmetrisch genug, dass die Rotation nicht
                   auffaellt), das eigentliche Logo-Bild bleibt durch die gegenlaeufige Rotation
                   im Markup aufrecht (siehe protected/layout.php). */
                background: linear-gradient(90deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 1) 60%);
                border-radius: 8px;
                padding: 10px;
            }

            .sidebar-nav {
                display: flex;
                flex-direction: column;
                /* "safe center": zentriert wenn Platz reicht, faellt aber auf Start-Ausrichtung
                   zurueck statt Inhalt oben UND unten abzuschneiden, sobald trotz Schriftskalierung
                   noch gescrollt werden muss (siehe overflow-y unten). */
                justify-content: safe center;
                align-items: center;
                /* Nimmt den kompletten Platz zwischen Logo und Indikator ein (siehe .sidebar
                   padding) und schrumpft bei Bedarf statt drueber hinaus zu wachsen. */
                flex: 1 1 auto;
                min-height: 0;
                width: 100%;
                gap: clamp(8px, 3.6vh, 32px);
                list-style: none;
                overflow-y: auto;
                scrollbar-width: thin;
            }

            /* Dezenter Scrollbalken fuer Chromium/WebKit als Pendant zu scrollbar-width (Firefox). */
            .sidebar-nav::-webkit-scrollbar {
                width: 4px;
            }

            .sidebar-nav::-webkit-scrollbar-thumb {
                background: var(--color-primary);
                border-radius: 2px;
            }

            .sidebar-nav::-webkit-scrollbar-track {
                background: transparent;
            }

            .sidebar-nav li a {
                writing-mode: vertical-rl;
                transform: rotate(180deg);
                /* Skaliert mit der Fensterhoehe, damit viele TOC-Eintraege bzw. wenig
                   Hoehe nicht Logo/Indikator ueberdecken (siehe .sidebar padding). */
                font-size: clamp(0.5rem, 1.3vh, 0.7rem);
                letter-spacing: 0.15em;
                text-transform: uppercase;
                color: var(--color-text-light);
                transition: var(--transition);
                padding: 8px 4px;
                border-bottom: 1px solid transparent;
            }

            .sidebar-nav li a:hover {
                color: var(--color-accent);
                border-bottom-color: var(--color-accent);
            }

            .sidebar-indicator {
                position: absolute;
                bottom: 20px;
                width: 2px;
                height: 40px;
                background: var(--color-primary);
            }

            /* Desktop: Die Topnav laeuft beim Scrollen mit (sticky, 70px hoch) - Preis-Schalter
               und Schnellmenue auf /3d-druck kleben deshalb direkt darunter. */
            :root {
                --kopf-fix: 70px;
            }

            /* Auf Desktop gibt es keine Bottom-Nav (siehe .bottom-nav{display:none} unten) - die
               mobile Ausweich-Regel von weiter oben (body.has-sidebar .back-to-top/
               .preismodus-switch) wieder auf den normalen Abstand zuruecksetzen. */
            body.has-sidebar .back-to-top {
                bottom: 20px;
            }

            /* Mobile Header auf Desktop ausblenden */
            .mobile-header {
                display: none;
            }

            /* Bottom-Nav ist der mobile Ersatz fuer die Sidebar - auf Desktop uebernimmt die
               Sidebar wieder, Bottom-Nav raus. */
            .bottom-nav {
                display: none;
            }

            /* Topnav einblenden (ersetzt mobile-header als Hauptmenue auf Desktop). Laeuft beim
               Scrollen mit: z-index ueber Preis-Schalter (950)/Schnellmenue (960), unter Sidebar
               (1000), Cookie-Banner und Popups. Hoehe = --kopf-fix (Desktop). */
            .topnav {
                position: sticky;
                top: 0;
                z-index: 990;
                display: flex;
                align-items: center;
                justify-content: space-between;
                background: var(--color-bg);
                border-bottom: 2px solid var(--color-secondary);
                padding: 0 40px;
                height: var(--kopf-fix);
                box-sizing: border-box;
            }

            .topnav-logo {
                display: inline-flex;
                align-items: center;
                /* Gleicher heller Verlauf wie bei .section-label/.mobile-logo/.sidebar-logo. */
                background: linear-gradient(90deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 1) 60%);
                border-radius: 8px;
                padding: 10px;
            }

            .topnav-logo img {
                height: 40px;
                width: auto;
            }

            /* Sidebar zeigt auf Seiten mit TOC bereits ihr eigenes Logo (siehe body.has-sidebar
               in protected/layout.php) - das Topnav-Logo waere dann redundant. */
            body.has-sidebar .topnav-logo {
                display: none;
            }

            /* margin-left: auto haelt das Menue immer rechtsbuendig - auch wenn .topnav-logo auf
               Seiten mit Sidebar ausgeblendet ist und space-between allein es sonst links anordnet. */
            .topnav-nav {
                display: flex;
                align-items: center;
                gap: 32px;
                list-style: none;
                margin-left: auto;
            }

            .topnav-nav li a {
                font-size: 0.85rem;
                letter-spacing: 0.1em;
                text-transform: uppercase;
                color: var(--color-text-light);
                padding: 8px 4px;
                border-bottom: 2px solid transparent;
                transition: var(--transition);
            }

            .topnav-nav li a:hover,
            .topnav-nav li a[aria-current="page"] {
                color: var(--color-accent);
                border-bottom-color: var(--color-accent);
            }

            .main-content {
                padding-top: 0;
            }

            .section-full {
                padding: 100px 60px;
            }

            .leistungen-grid {
                grid-template-columns: repeat(3, 1fr);
            }

            /* Raster mit 4 Karten (z.B. Einwaende auf /lora): 2x2 statt 3+1. */
            .leistungen-grid.leistungen-grid--zweispaltig {
                grid-template-columns: repeat(2, 1fr);
            }

            .machine-grid {
                grid-template-columns: repeat(3, 1fr);
            }

            .zusatzmodule-grid {
                grid-template-columns: repeat(3, 1fr);
            }

            .timeline {
                flex-direction: row;
            }

            .timeline-item {
                flex: 1;
                grid-template-columns: 1fr;
                padding-bottom: 0;
                padding-right: 20px;
            }

            .tl-col {
                flex-direction: row;
            }

            .tl-line {
                width: auto;
                height: 2px;
                flex: 1;
                margin-top: 21px;
                margin-left: 3px;
            }

            .footer-logo img {
                height: 100px;
                width: auto;
            }

        }

        /* ===== DRUCK / PDF =====
           Drucklayout fuer alle Seiten, vor allem fuer die Rechtstexte: tools/rechtstexte-pdf.sh
           erzeugt daraus beim Deploy agb.pdf, datenschutz.pdf und widerrufsrecht.pdf. Schwarz auf
           Weiss, eine Spalte, ohne Navigation, Footer, Banner und Buttons. */
        @media print {
            @page {
                size: A4;
                margin: 18mm 16mm;
            }

            .topnav,
            .sidebar,
            .mobile-header,
            .mobile-nav,
            .bottom-nav,
            .footer,
            .cookie-consent,
            .back-to-top,
            .preismodus-leiste,
            .popup,
            .legal-pdf-link {
                display: none !important;
            }

            html,
            body {
                background: #fff !important;
                color: #000 !important;
                font-size: 10.5pt;
            }

            body * {
                color: #000 !important;
                background: transparent !important;
                box-shadow: none !important;
            }

            .section-full,
            .section-inner {
                padding: 0 !important;
                margin: 0 !important;
                max-width: none !important;
            }

            .section-label {
                display: block;
                padding: 0;
                border: none;
                font-size: 9pt;
                letter-spacing: 0.1em;
            }

            .section-title {
                font-size: 18pt;
                margin: 4pt 0 10pt;
            }

            .panel-detail {
                display: block !important;
                border: none !important;
                padding: 0 !important;
            }

            .detail-col {
                padding: 0 !important;
                margin: 0 0 12pt !important;
                border: none !important;
            }

            .detail-col h2,
            .detail-col h3 {
                font-size: 11.5pt;
                margin: 12pt 0 4pt;
                padding: 0;
                border: none;
                break-after: avoid;
            }

            p,
            li {
                line-height: 1.45;
                orphans: 3;
                widows: 3;
            }

            a {
                text-decoration: underline;
            }
        }