:root {
            --bg: #10151d;
            --bg-2: #151c27;
            --card: #1a2230;
            --card-2: #1f2939;
            --accent: #ff8a1e;
            --accent-2: #ffb03a;
            --accent-dark: #d96f0a;
            --text: #f2f5f9;
            --muted: #a3b0c2;
            --border: #2a3547;
            --font-main: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            --font-display: 'Unbounded', 'Manrope', sans-serif;
            --radius: 14px;
            --shadow: 0 4px 24px rgba(0,0,0,.45);
            --shadow-lg: 0 14px 48px rgba(0,0,0,.55);
            --transition: all .3s cubic-bezier(.4,0,.2,1);
        }

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

        html { scroll-behavior: smooth; }

        body {
            font-family: var(--font-main);
            background: var(--bg);
            color: var(--text);
            line-height: 1.6;
            overflow-x: hidden;
        }

        :focus-visible {
            outline: 2px solid var(--accent);
            outline-offset: 3px;
            border-radius: 4px;
        }

        ::-webkit-scrollbar { width: 10px; }
        ::-webkit-scrollbar-track { background: var(--bg); }
        ::-webkit-scrollbar-thumb { background: var(--accent-dark); border-radius: 5px; }

        /* ===== HEADER ===== */
        .header {
            position: fixed;
            top: 0; left: 0; right: 0;
            z-index: 1000;
            background: rgba(16, 21, 29, .92);
            backdrop-filter: blur(18px);
            border-bottom: 1px solid var(--border);
            transition: var(--transition);
        }
        .header.scrolled { box-shadow: var(--shadow); }

        .header-inner {
            max-width: 1240px;
            margin: 0 auto;
            padding: 0 24px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 76px;
            gap: 16px;
        }

        .logo { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
        .logo-svg { height: 34px; width: auto; display: block; }
        .logo-svg .lm { fill: var(--text); }
        .logo-svg .la { fill: var(--accent); }

        /* Nie umbrechen: bei 1040 px stand die Nummer vierzeilig in der
           Leiste und hat sie auf 96 px Hoehe aufgeblaeht. */
        .header-phone { white-space: nowrap; }
        .header-phone {
            display: flex;
            align-items: center;
            gap: 8px;
            color: var(--muted);
            text-decoration: none;
            font-size: 15px;
            font-weight: 600;
            transition: var(--transition);
        }
        .header-phone:hover { color: var(--accent); }
        .header-phone svg { width: 18px; height: 18px; }

        .nav-desktop { display: flex; align-items: center; gap: 18px; }
        .nav-desktop a.nav-link {
            color: var(--muted);
            text-decoration: none;
            font-size: 14.5px;
            font-weight: 600;
            transition: var(--transition);
            position: relative;
            white-space: nowrap;
        }
        .nav-desktop a.nav-link::after {
            content: '';
            position: absolute;
            bottom: -5px; left: 0;
            width: 0; height: 2px;
            background: var(--accent);
            transition: var(--transition);
        }
        .nav-desktop a.nav-link:hover { color: var(--text); }
        .nav-desktop a.nav-link:hover::after { width: 100%; }

        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 9px;
            padding: 13px 28px;
            border-radius: var(--radius);
            font-size: 15px;
            font-weight: 700;
            text-decoration: none;
            cursor: pointer;
            border: none;
            transition: var(--transition);
            font-family: var(--font-main);
        }
        .btn svg { width: 18px; height: 18px; flex-shrink: 0; }

        .btn-primary {
            background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
            color: #14100a;
            box-shadow: 0 4px 18px rgba(255, 138, 30, .35);
        }
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 28px rgba(255, 138, 30, .5);
            filter: brightness(1.08);
        }

        .btn-outline {
            background: transparent;
            color: var(--text);
            border: 2px solid var(--border);
        }
        .btn-outline:hover { border-color: var(--accent); color: var(--accent); }

        .btn-sm { padding: 11px 22px; font-size: 14px; }
        .btn-lg { padding: 17px 38px; font-size: 17px; }

        .menu-toggle {
            display: none;
            flex-direction: column;
            gap: 5px;
            cursor: pointer;
            padding: 10px;
            background: none;
            border: none;
        }
        .menu-toggle span {
            display: block;
            width: 24px; height: 2px;
            background: var(--text);
            transition: var(--transition);
        }
        .menu-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
        .menu-toggle.active span:nth-child(2) { opacity: 0; }
        .menu-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

        .nav-mobile {
            display: none;
            position: fixed;
            top: 76px; left: 0; right: 0;
            background: var(--bg-2);
            border-bottom: 1px solid var(--border);
            padding: 20px 24px 28px;
            flex-direction: column;
            gap: 4px;
            z-index: 999;
        }
        .nav-mobile.active { display: flex; }
        .nav-mobile a.nav-link {
            color: var(--text);
            text-decoration: none;
            font-size: 17px;
            font-weight: 600;
            padding: 13px 0;
            border-bottom: 1px solid var(--border);
        }
        .nav-mobile .btn { margin-top: 16px; }

        /* ===== HERO ===== */
        .hero {
            position: relative;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            padding: 120px 24px 70px;
        }
        .hero-bg {
            position: absolute; inset: 0;
            background:
                radial-gradient(ellipse 65% 45% at 78% 18%, rgba(255, 138, 30, .16) 0%, transparent 60%),
                radial-gradient(ellipse 55% 40% at 12% 85%, rgba(255, 138, 30, .09) 0%, transparent 55%),
                linear-gradient(160deg, #131926 0%, #10151d 55%, #0d1118 100%);
        }
        .hero-bg::after {
            content: '';
            position: absolute; inset: 0;
            background-image:
                repeating-linear-gradient(-45deg, rgba(255,255,255,.022) 0 1px, transparent 1px 14px);
            pointer-events: none;
        }
        .hero-grid-lines {
            position: absolute; inset: 0;
            background-image:
                linear-gradient(rgba(163,176,194,.05) 1px, transparent 1px),
                linear-gradient(90deg, rgba(163,176,194,.05) 1px, transparent 1px);
            background-size: 72px 72px;
            mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 0%, transparent 75%);
            -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 0%, transparent 75%);
            pointer-events: none;
        }

        .hero-content {
            position: relative;
            z-index: 2;
            /* Mittig, wie vorher. Der Zwei-Spalten-Versuch hat den Text
               linksbuendig gemacht -- Daven wollte ihn genau so, wie er war.
               Das Logo wandert stattdessen weiter unten per Positionierung
               in den linken Rand, sobald dort Platz ist. */
            max-width: 900px;
            text-align: center;
        }
        .hero-text { min-width: 0; }

        .hero-logo { height: 44px; width: auto; margin-bottom: 34px; }
        .hero-logo .lm { fill: var(--text); }
        .hero-logo .la { fill: var(--accent); }

        .hero-badge-row {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 30px;
        }
        .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: rgba(255, 138, 30, .1);
            border: 1px solid rgba(255, 138, 30, .32);
            color: var(--accent-2);
            padding: 8px 18px;
            border-radius: 50px;
            font-size: 13.5px;
            font-weight: 700;
            letter-spacing: .3px;
        }
        .hero-badge .dot {
            width: 7px; height: 7px;
            background: var(--accent);
            border-radius: 50%;
            animation: pulse 2s infinite;
        }
        @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

        .hero h1 {
            font-family: var(--font-display);
            /* Untergrenze 22px, nicht 26px: bei 26px ist das laengste Wort
               "кондиционирования," 363 px breit, der Kasten auf einem
               390er-Handy aber nur 332 -- die Endungen fielen weg. Sichtbar
               war das nur im Bild, nicht als Querlauf, weil body
               overflow-x: hidden hat und das Ueberstehende abschneidet. */
            /* 3.6vw und nicht 4.6vw: der Textblock ist jetzt 56vw breit,
               und ihr laengstes Wort ist rund 14 mal so breit wie die
               Schrift hoch. 14 * 3.6 = 50vw passt in 56vw, 14 * 4.6 = 64vw
               nicht -- bei 1000 px Fenster waere das Wort abgeschnitten. */
            font-size: clamp(22px, 3.6vw, 52px);
            font-weight: 700;
            line-height: 1.22;
            margin-bottom: 22px;
            letter-spacing: 0;
        }
        /* Schmale Geraete: das laengste Wort der Ueberschrift,
           "кондиционирования,", ist bei 22px 307 px breit. Auf 390 px ist
           dafuer Platz (354 nach Abzug der Raender), auf 360 und 320 nicht.
           Statt Silbentrennung -- die hat auf dem Rechner "охлажде-ния"
           erzeugt -- wird hier der Rand schmaler und auf den kleinsten
           Geraeten die Schrift eine Stufe kleiner. Der Umbruch im Wort steht
           als letzte Reserve dahinter und greift nach dieser Rechnung nicht
           mehr. */
        @media (max-width: 400px) {
            .hero { padding-left: 18px; padding-right: 18px; }
            .hero h1 { overflow-wrap: break-word; }
        }
        @media (max-width: 345px) {
            .hero h1 { font-size: 19px; }
        }

        .hero h1 .amber {
            color: var(--accent);
        }
        .hero-subtitle {
            font-size: clamp(16px, 2.2vw, 19px);
            color: var(--muted);
            margin: 0 auto 12px;
            max-width: 640px;
        }

        .hero-cta {
            display: flex;
            gap: 14px;
            justify-content: center;
            flex-wrap: wrap;
            margin: 34px 0 40px;
        }

        .hero-trust {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 12px;
        }
        .trust-chip {
            display: flex;
            align-items: center;
            gap: 10px;
            background: rgba(26, 34, 48, .75);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            padding: 12px 18px;
            font-size: 13.5px;
            color: var(--muted);
        }
        .trust-chip strong { color: var(--text); display: block; font-size: 14px; }
        .trust-chip svg { width: 22px; height: 22px; color: var(--accent); flex-shrink: 0; }

        /* ===== SECTIONS ===== */
        .section { padding: 96px 24px; max-width: 1240px; margin: 0 auto; }
        .section-header { text-align: center; margin-bottom: 56px; }
        .section-tag {
            display: inline-block;
            color: var(--accent);
            font-size: 13px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 2.4px;
            margin-bottom: 12px;
        }
        .section-title {
            font-family: var(--font-display);
            font-size: clamp(23px, 3.4vw, 36px);
            font-weight: 700;
            line-height: 1.25;
            margin-bottom: 16px;
        }
        .section-desc { color: var(--muted); font-size: 17px; max-width: 640px; margin: 0 auto; }

        /* ===== SERVICES ===== */
        .services-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 22px;
            /* Kein align-items hier -- die Vorgabe `stretch` ist gewollt:
               alle Karten einer Reihe sind gleich hoch. Das war am
               18.09.2026 kurz auf `start` gestellt, damit ein aufgeklapptes
               «Что входит» die Nachbarn nicht mitzieht; dann waren die
               Karten aber dauerhaft ungleich hoch. Das Aufklappen passiert
               jetzt im Fenster und fasst das Raster gar nicht mehr an. */
        }
        .service-card {
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            padding: 30px 28px;
            transition: var(--transition);
            position: relative;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }
        .service-card::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 3px;
            background: linear-gradient(90deg, var(--accent), var(--accent-2));
            transform: scaleX(0);
            transform-origin: left;
            transition: var(--transition);
        }
        .service-card:hover {
            transform: translateY(-5px);
            border-color: rgba(255, 138, 30, .5);
            box-shadow: var(--shadow-lg);
        }
        .service-card:hover::before { transform: scaleX(1); }

        /* ---- «Что входит» ----------------------------------------------
           Ihre eigenen Beschreibungen vom 18.09.2026. <details> statt
           eigenem Schalter: geht ohne JavaScript, kann Tastatur von Haus
           aus, und der Text steht im Dokument -- fuer Яндекс lesbar, auch
           zugeklappt. */
        .was-drin-knopf {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            margin: 14px 0 16px;
            padding: 0;
            border: 0;
            background: none;
            cursor: pointer;
            color: var(--accent-2);
            font-family: var(--font-main);
            font-size: 13.5px;
            font-weight: 700;
            text-align: left;
        }
        .was-drin-knopf svg { width: 15px; height: 15px; flex-shrink: 0; }
        .was-drin-knopf:hover { color: var(--accent); }
        /* Der Text steht in der Karte und bleibt damit im Dokument -- fuer
           Яндекс lesbar. Sichtbar wird er nur im Fenster, das beim Klick
           eine Kopie bekommt. Waere er erst aus JavaScript gebaut, gaebe es
           ihn fuer die Suche nicht. */
        .was-drin-quelle { display: none; }
        .was-drin-inhalt {
            font-size: 14.5px;
            line-height: 1.62;
            color: var(--muted);
        }
        .was-drin-inhalt h4 {
            margin: 12px 0 5px;
            color: var(--text);
            font-size: 13.5px;
            font-weight: 700;
        }
        .was-drin-inhalt h4:first-child { margin-top: 0; }
        .was-drin-inhalt ul {
            margin: 0;
            padding-left: 17px;
        }
        .was-drin-inhalt li { margin-bottom: 4px; }
        /* Der Satz, der die meisten Missverstaendnisse verhindert: im Preis
           steht ein Posten, nicht die ganze Reparatur. Deshalb abgesetzt
           und nicht als weiterer Listenpunkt. */
        .was-drin-extra {
            margin: 9px 0 0;
            padding: 8px 11px;
            border-left: 2px solid var(--accent);
            border-radius: 0 7px 7px 0;
            background: rgba(255, 138, 30, .07);
            color: var(--text);
            /* Im Fenster hat der Text 14.5px -- mit 12.8 sah der Kasten
               aus wie Kleingedrucktes. Er ist aber das Gegenteil davon:
               genau dieser Satz verhindert den Streit an der Kasse. */
            font-size: 13.6px;
        }

        .service-card.featured {
            border-color: rgba(255, 138, 30, .45);
            background: linear-gradient(160deg, #232130 0%, var(--card) 60%);
        }
        .service-card .featured-badge {
            position: absolute;
            top: 34px; right: -52px;
            background: var(--accent);
            color: #14100a;
            font-size: 11px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 1px;
            padding: 6px 56px;
            transform: rotate(45deg);
        }

        .service-icon {
            width: 56px; height: 56px;
            background: rgba(255, 138, 30, .1);
            border: 1px solid rgba(255, 138, 30, .22);
            border-radius: 13px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 20px;
        }
        .service-icon svg { width: 28px; height: 28px; color: var(--accent); }

        .service-card h3 { font-size: 19px; font-weight: 800; margin-bottom: 10px; line-height: 1.35; }
        .service-card p { color: var(--muted); font-size: 14.5px; margin-bottom: 20px; line-height: 1.6; flex: 1; }

        .service-price {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            color: var(--accent-2);
            font-size: 15px;
            font-weight: 800;
            margin-bottom: 16px;
        }
        .service-card .btn { align-self: flex-start; }
        /* Kartentitel ist der Link zur Leistungsseite -- ohne Unterstreichung, beim Hover Akzentfarbe */
        .service-card h3 a { color: inherit; text-decoration: none; }
        .service-card h3 a:hover { color: var(--accent); }
        /* Preiszeile: alle gleich hoch, damit die Fusszeilen einer Reihe auf einer Linie stehen */
        .service-card .service-price { display: inline-flex; align-items: center; box-sizing: border-box; height: 40px; }
        /* Fusszeile: eine Zeile, Knopf links, ruhiger Textlink rechts, am Kartenboden */
        .service-foot { margin-top: auto; min-height: 50px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
        .service-foot .btn { align-self: center; }
        .service-more {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            min-height: 44px;
            padding: 0 2px;
            color: var(--accent-2);
            font-size: 14.5px;
            font-weight: 700;
            text-decoration: none;
            white-space: nowrap;
        }
        .service-more:hover { color: var(--accent); }
        .service-more .pfeil { display: inline-block; transition: transform .2s ease; }
        .service-more:hover .pfeil { transform: translateX(3px); }
    
        /* ===== PRICING (Accordion) ===== */
        .pricing-section { background: var(--bg-2); max-width: none; }
        .pricing-inner { max-width: 1240px; margin: 0 auto; }
        .pricing-note {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            color: var(--muted);
            font-size: 14px;
            margin-top: 16px;
            text-align: center;
            flex-wrap: wrap;
        }
        .pricing-note svg { width: 18px; height: 18px; color: var(--accent); flex-shrink: 0; }

        /* ---- Ihr Lied im Abschnitt "О нас" ----
           Bewusst schlicht: ein Kasten, eine Zeile, die Bedienelemente des
           Browsers. Nichts blinkt, nichts spielt von selbst. */
        .pesnya {
            margin: 22px 0 0;
            padding: 14px 16px 16px;
            background: var(--bg-2);
            border: 1px solid var(--border);
            border-left: 3px solid var(--accent);
            border-radius: 12px;
        }
        .pesnya figcaption {
            display: flex;
            align-items: center;
            gap: 9px;
            margin-bottom: 10px;
            font-size: 14px;
            font-weight: 700;
            color: var(--text);
        }
        .pesnya-note { color: var(--accent); font-size: 18px; line-height: 1; }
        /* Die Spieldauer steht im Text und nicht im Abspieler: mit
           preload="none" kennt der Browser sie noch nicht und zeigt
           "0:00 / 0:00", was nach kaputt aussieht. So kostet die Angabe
           kein einziges Byte. */
        .pesnya-dauer {
            margin-left: auto;
            font-weight: 500;
            font-size: 12.5px;
            color: var(--muted);
            font-variant-numeric: tabular-nums;
        }
        .pesnya audio {
            width: 100%;
            height: 40px;
            display: block;
        }

        /* ==== Galerie "Наши работы" ==============================
           Ihre eigenen Aufnahmen. Bewusst NICHT im ersten Blick und nicht
           in der Preisliste -- dort war ein Foto ueber 54 Preiszeilen der
           Grund, dass die Liste unbedienbar wurde. */
        .galerie-raster {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
            gap: 14px;
        }
        .galerie-kachel {
            position: relative;
            display: block;
            padding: 0;
            border: 1px solid var(--border);
            border-radius: 12px;
            overflow: hidden;
            background: var(--card);
            cursor: zoom-in;
            transition: var(--transition);
        }
        .galerie-kachel:hover,
        .galerie-kachel:focus-visible {
            border-color: rgba(255, 138, 30, .5);
            transform: translateY(-2px);
        }
        .galerie-kachel img {
            display: block;
            width: 100%;
            /* height:auto MUSS hier stehen. Das img hat height im HTML
               (die Groesse des Vorschaubildes), und dieses Attribut wirkt
               wie height:NNNpx -- damit war aspect-ratio unwirksam und das
               Bild bei 163 px Breite fast quadratisch. */
            height: auto;
            /* 3:2, weil tools/galerie_bauen.py alle Bilder darauf
               normiert. Vorher stand hier 1080/567 (1,9:1) -- das war das
               Mass der alten Kartenstreifen und hat ihre neuen Fotos, unter
               denen vier hochkant sind, zu einem Streifen zerschnitten. */
            aspect-ratio: 3 / 2;
            object-fit: cover;
            /* Ihre Vorlagen sind teils Videobilder und flau. Leicht
               abgedunkelt sitzen sie ruhiger auf der dunklen Seite; beim
               Zeigen kommt die volle Farbe. */
            filter: saturate(.92) brightness(.94);
            transition: filter .25s ease;
        }
        .galerie-kachel:hover img { filter: none; }
        .galerie-kachel figcaption {
            padding: 10px 13px 12px;
            font-size: 12.5px;
            line-height: 1.45;
            color: var(--muted);
            text-align: left;
        }

        /* ---- Grossansicht ---- */

        /* ===== Videos aus dem Cech =====
           Hochkant, weil ihre Aufnahmen hochkant sind (406x720). Ein
           16:9-Rahmen haette schwarze Balken und ein briefmarkengrosses
           Bild ergeben. */
        .video-raster {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
            gap: 22px;
            max-width: 1240px;
            margin: 0 auto;
        }

        .video-karte {
            background: var(--bg-2);
            border: 1px solid var(--line);
            border-radius: 16px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }

        .video-buehne {
            position: relative;
            aspect-ratio: 9 / 16;
            background: #05070b;
        }
        .video-buehne img,
        .video-buehne video {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        .video-start {
            position: absolute;
            inset: 0;
            width: 100%;
            border: none;
            padding: 0;
            background: none;
            cursor: pointer;
            display: block;
        }
        .video-start::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(5,7,11,.05), rgba(5,7,11,.55));
            transition: var(--transition);
        }
        .video-start:hover::after { background: linear-gradient(180deg, rgba(5,7,11,0), rgba(5,7,11,.35)); }

        .video-pfeil {
            position: absolute;
            left: 50%; top: 50%;
            transform: translate(-50%, -50%);
            width: 58px; height: 58px;
            border-radius: 50%;
            background: rgba(255, 138, 30, .92);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 2;
            box-shadow: 0 6px 22px rgba(0, 0, 0, .45);
        }
        .video-pfeil svg { width: 24px; height: 24px; fill: #0c1017; margin-left: 3px; }
        .video-start:hover .video-pfeil { transform: translate(-50%, -50%) scale(1.07); }

        .video-dauer {
            position: absolute;
            right: 10px; bottom: 10px;
            z-index: 2;
            background: rgba(5, 7, 11, .78);
            color: #fff;
            font-size: 12px;
            font-weight: 700;
            padding: 3px 8px;
            border-radius: 6px;
            font-variant-numeric: tabular-nums;
        }

        .video-text { padding: 14px 16px 16px; }
        .video-text h3 {
            font-family: var(--font-display);
            font-size: 15.5px;
            line-height: 1.35;
            margin-bottom: 8px;
        }
        .video-text p { font-size: 13.5px; line-height: 1.55; color: var(--muted); margin: 0; }

        .video-fotos {
            display: flex;
            gap: 10px;
            overflow-x: auto;
            padding: 12px 16px 16px;
            border-top: 1px solid var(--line);
        }
        .video-foto {
            flex: 0 0 104px;
            text-decoration: none;
            /* Seit 18.09. ein <button> und kein <a>: der Browser bringt dafür
               eigenen Rand, Polster und Schriftart mit, die hier alle stören. */
            background: none;
            border: 0;
            padding: 0;
            margin: 0;
            font: inherit;
            color: inherit;
            text-align: left;
            cursor: zoom-in;
        }
        .video-foto:focus-visible {
            outline: 2px solid var(--accent-2);
            outline-offset: 3px;
            border-radius: 10px;
        }
        .video-foto img {
            width: 104px;
            height: 78px;
            object-fit: cover;
            border-radius: 8px;
            display: block;
            border: 1px solid var(--line);
        }
        .video-foto span {
            display: block;
            font-size: 11px;
            line-height: 1.35;
            color: var(--muted);
            margin-top: 6px;
        }

        @media (max-width: 480px) {
            .video-raster { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
            .video-text { padding: 12px; }
            .video-text h3 { font-size: 14px; }
            .video-text p { font-size: 12.5px; }
        }

        .galerie-lupe {
            position: fixed;
            inset: 0;
            z-index: 120;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 26px;
            background: rgba(6, 8, 11, .93);
            backdrop-filter: blur(3px);
        }
        .galerie-lupe.offen { display: flex; }
        .lupe-innen {
            max-width: min(1080px, 100%);
            max-height: 100%;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        .lupe-innen img {
            max-width: 100%;
            max-height: calc(100vh - 150px);
            width: auto;
            border-radius: 12px;
            border: 1px solid rgba(255, 138, 30, .3);
        }
        .lupe-text {
            margin: 0;
            font-size: 14px;
            line-height: 1.5;
            color: var(--muted);
            text-align: center;
        }
        .lupe-zaehler { color: var(--accent-2); font-weight: 700; }
        .lupe-knopf {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 46px; height: 46px;
            border-radius: 50%;
            border: 1px solid var(--border);
            background: rgba(20, 24, 30, .9);
            color: var(--text);
            font-size: 22px;
            line-height: 1;
            cursor: pointer;
            transition: var(--transition);
        }
        .lupe-knopf:hover { border-color: rgba(255, 138, 30, .5); color: var(--accent-2); }
        .lupe-zurueck { left: 16px; }
        .lupe-vor { right: 16px; }
        .lupe-zu {
            position: absolute;
            top: 16px; right: 16px;
            transform: none;
        }
        @media (max-width: 620px) {
            .galerie-raster { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
            .galerie-kachel figcaption { font-size: 11.5px; padding: 8px 10px 10px; }
            .lupe-knopf { width: 40px; height: 40px; }
        }

        /* ==== Preisliste ================================================
           Zwei Ebenen: Gruppe -> Abschnitt -> Zeilen. Beim Laden ist alles
           zu. Vorher stand die erste Gruppe offen, und das war die mit 59
           Zeilen -- man kam auf die Seite und sah eine Wand aus Zahlen. */

        /* Nur fuer Vorleseprogramme. Ohne diese Regel steht das Label
           "Поиск по прайс-листу" sichtbar ueber dem Suchfeld. */
        .visually-hidden {
            position: absolute;
            width: 1px; height: 1px;
            margin: -1px; padding: 0;
            overflow: hidden;
            clip: rect(0 0 0 0);
            clip-path: inset(50%);
            white-space: nowrap;
            border: 0;
        }

        .preis-suche {
            max-width: 560px;
            margin: 0 auto 26px;
        }
        .suche-feld { position: relative; }
        .preis-suche input {
            width: 100%;
            padding: 15px 46px 15px 46px;
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: 12px;
            color: var(--text);
            font-family: var(--font-main);
            font-size: 15px;
            transition: var(--transition);
        }
        .preis-suche input:focus {
            outline: none;
            border-color: rgba(255, 138, 30, .55);
            box-shadow: 0 0 0 3px rgba(255, 138, 30, .12);
        }
        .preis-suche input::placeholder { color: var(--muted); }
        .preis-suche .lupe {
            position: absolute;
            left: 16px; top: 50%;
            transform: translateY(-50%);
            width: 18px; height: 18px;
            color: var(--muted);
            pointer-events: none;
        }
        .preis-suche .leeren {
            position: absolute;
            right: 10px; top: 50%;
            transform: translateY(-50%);
            width: 28px; height: 28px;
            border: none;
            border-radius: 8px;
            background: none;
            color: var(--muted);
            font-size: 19px;
            line-height: 1;
            cursor: pointer;
            display: none;
        }
        .preis-suche .leeren:hover { color: var(--accent-2); background: var(--card-2); }
        .preis-suche.hat-text .leeren { display: block; }
        .suche-stand {
            margin: 10px 2px 0;
            text-align: center;
            font-size: 13px;
            color: var(--muted);
            min-height: 18px;
        }
        .suche-stand b { color: var(--accent-2); font-weight: 700; }

        /* Eine Spalte, nicht zwei. Ein offenes Akkordeon im Zwei-Spalten-
           Raster laesst die Nachbarspalte leer und die Zeilen zu schmal. */
        .price-groups { display: grid; gap: 12px; align-items: start; }
        .price-group {
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            overflow: hidden;
            transition: border-color .2s ease;
        }
        .price-group:hover { border-color: rgba(255, 138, 30, .35); }
        .price-group.offen { border-color: rgba(255, 138, 30, .45); }
        .price-group-kopf {
            width: 100%;
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 18px 22px;
            background: var(--card-2);
            border: none;
            cursor: pointer;
            color: var(--text);
            font-family: var(--font-main);
            text-align: left;
        }
        .price-group-titel {
            flex: 1 1 auto;
            min-width: 0;
            display: flex;
            flex-wrap: wrap;
            align-items: baseline;
            gap: 4px 12px;
            font-size: 16.5px;
            font-weight: 800;
        }
        .price-group-pod {
            font-size: 13px;
            font-weight: 500;
            color: var(--muted);
        }
        .anzahl {
            flex: 0 0 auto;
            font-size: 12px;
            font-weight: 700;
            color: var(--muted);
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: 20px;
            padding: 3px 10px;
            font-variant-numeric: tabular-nums;
        }
        .price-group.offen .anzahl {
            color: var(--accent-2);
            border-color: rgba(255, 138, 30, .35);
        }
        .price-group-pfeil {
            flex: 0 0 auto;
            width: 30px; height: 30px;
            border-radius: 9px;
            border: 1px solid var(--border);
            background: var(--card);
            color: var(--muted);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: var(--transition);
        }
        .price-group-pfeil svg { width: 16px; height: 16px; }
        .price-group.offen .price-group-pfeil {
            transform: rotate(180deg);
            color: var(--accent);
            border-color: rgba(255, 138, 30, .4);
        }
        /* Auf dem Handy faellt der Untertitel der Gruppe weg. Er
           umbricht dort auf zwei bis vier Zeilen und macht aus einem 64 px
           hohen Balken einen von 100 (390 px) bis 157 (320 px) -- neun davon
           sind dann eine Bildschirmlaenge, nur um die Liste zu SEHEN. Name
           und Anzahl reichen zum Auswaehlen; die Einzelheiten stehen beim
           Aufklappen ohnehin da. */
        @media (max-width: 480px) {
            /* Tippziele: die Fusszeilen-Links waren 33 px hoch, die
               Telefon- und Mail-Links in den Kontaktblocken 21 bis 22.
               Polsterung vergroessert die Trefferflaeche; bei den Links
               MITTEN IM SATZ (contact-block, parts-empty) wirkt sie nur auf
               die Trefferflaeche und nicht auf die Zeilenhoehe, weil es
               Inline-Elemente sind. */
            /* min-height statt nur Polsterung: mit padding 5px kam der
               Link auf 33 px, weil der Inhalt nur 23 hoch ist. 40 ist die
               Groesse, die man mit dem Daumen zuverlaessig trifft. */
            .footer-col a {
                display: flex;
                align-items: center;
                min-height: 40px;
            }
            .contact-block a,
            .parts-empty a,
            .footer-credit a { padding: 7px 0; }

            .price-group-pod { display: none; }
            .price-group-kopf { padding: 15px 18px; }
            .abschnitt-kopf { padding: 12px 18px 12px 15px; }
            .preis-zeile { padding: 10px 18px 10px 19px; }
        }

        .price-group-body {
            display: grid;
            grid-template-rows: 0fr;
            transition: grid-template-rows .34s cubic-bezier(.4,0,.2,1);
        }
        .price-group.offen .price-group-body { grid-template-rows: 1fr; }
        .price-group-body-innen { overflow: hidden; }

        /* ---- Abschnitt (zweite Ebene) ---- */
        .preis-abschnitt { border-top: 1px solid var(--border); }
        .abschnitt-kopf {
            width: 100%;
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 13px 22px 13px 20px;
            background: none;
            border: none;
            border-left: 3px solid transparent;
            cursor: pointer;
            color: var(--text);
            font-family: var(--font-main);
            font-size: 14.5px;
            font-weight: 700;
            text-align: left;
            transition: background .18s ease, border-color .18s ease;
        }
        .abschnitt-kopf:hover { background: rgba(255, 138, 30, .05); }
        .preis-abschnitt.offen > .abschnitt-kopf {
            border-left-color: var(--accent);
            background: rgba(255, 138, 30, .05);
        }
        .abschnitt-name { flex: 1 1 auto; min-width: 0; }
        .abschnitt-pfeil {
            flex: 0 0 auto;
            width: 18px; height: 18px;
            color: var(--muted);
            transition: transform .22s ease;
        }
        .preis-abschnitt.offen .abschnitt-pfeil {
            transform: rotate(180deg);
            color: var(--accent);
        }
        .abschnitt-body {
            display: grid;
            grid-template-rows: 0fr;
            transition: grid-template-rows .3s cubic-bezier(.4,0,.2,1);
        }
        .preis-abschnitt.offen .abschnitt-body { grid-template-rows: 1fr; }
        .abschnitt-body-innen { overflow: hidden; }

        /* ---- Die Zeile ----
           Der Name ist die Hauptspalte und darf umbrechen; der Preis nimmt,
           was er braucht. Vorher hatte der Preis white-space: nowrap und
           damit Vorrang -- bei "+40% от стоимости выполненных по
           заказ/наряду работ" blieb fuer den Namen eine Spalte von vier
           Woertern Breite uebrig. */
        .preis-zeile {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 4px 20px;
            align-items: baseline;
            padding: 11px 22px 11px 23px;
            border-top: 1px solid rgba(255, 255, 255, .04);
            font-size: 14.5px;
        }
        .preis-zeile:first-child { border-top: none; }
        .preis-zeile:hover { background: rgba(255, 255, 255, .018); }
        .preis-name { min-width: 0; line-height: 1.45; }
        .preis-wert {
            justify-self: end;
            text-align: right;
            color: var(--accent-2);
            font-weight: 800;
            white-space: nowrap;
            font-variant-numeric: tabular-nums;
        }
        /* Langer Preis: unter den Namen, linksbuendig -- der Name hat Vorrang. */
        .preis-zeile.lang { grid-template-columns: minmax(0, 1fr); }
        .preis-zeile.lang .preis-wert {
            justify-self: start;
            text-align: left;
            white-space: normal;
            font-size: 13.5px;
            line-height: 1.45;
        }

        /* ---- Suchtreffer: flach, mit Pfad ---- */
        .treffer-liste {
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            overflow: hidden;
        }
        .treffer-pfad {
            padding: 12px 22px 7px;
            border-top: 1px solid var(--border);
            font-size: 12px;
            font-weight: 700;
            letter-spacing: .04em;
            text-transform: uppercase;
            color: var(--accent);
            background: rgba(255, 138, 30, .04);
        }
        .treffer-liste > .treffer-pfad:first-child { border-top: none; }

        .preis-pfad {
            display: block;
            margin-top: 3px;
            font-size: 12px;
            color: var(--muted);
        }
        .preis-name mark {
            background: rgba(255, 138, 30, .22);
            color: var(--text);
            border-radius: 3px;
            padding: 0 1px;
        }
        .kein-treffer {
            padding: 30px 22px;
            text-align: center;
            color: var(--muted);
            font-size: 14.5px;
        }
        .kein-treffer a { color: var(--accent-2); font-weight: 700; }

        /* ---- Allgemeine Bedingungen und Fussnoten ---- */
        .price-group.allgemein { border-style: dashed; }
        .gruppe-snoska,
        .preis-snoska {
            margin: 0;
            padding: 13px 22px;
            border-top: 1px solid var(--border);
            font-size: 12.5px;
            line-height: 1.55;
            color: var(--muted);
        }
        .preis-snoski {
            margin: 16px 0 0;
            padding: 16px 20px;
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: 12px;
        }
        .preis-snoski p {
            margin: 0 0 9px;
            font-size: 12.5px;
            line-height: 1.6;
            color: var(--muted);
        }
        .preis-snoski p:last-child { margin-bottom: 0; }
        .preis-snoski b { color: var(--text); font-weight: 700; }

        .price-item-body {
            display: grid;
            grid-template-rows: 0fr;
            transition: grid-template-rows .32s cubic-bezier(.4,0,.2,1);
        }
        .price-item.offen .price-item-body { grid-template-rows: 1fr; }
        .price-item-body-innen { overflow: hidden; }
        .price-details {
            margin: 2px 24px 18px;
            padding: 16px 18px;
            background: var(--bg-2);
            border: 1px solid var(--border);
            border-left: 3px solid var(--accent);
            border-radius: 10px;
            font-size: 14px;
        }
        .price-details .details-titel {
            font-size: 11.5px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: var(--accent-2);
            margin-bottom: 9px;
        }
        .price-details ul { list-style: none; }
        .price-details li {
            color: var(--muted);
            padding: 3px 0 3px 20px;
            position: relative;
            line-height: 1.55;
        }
        .price-details li::before {
            content: '';
            position: absolute;
            left: 2px; top: 10px;
            width: 7px; height: 7px;
            border-radius: 2px;
            background: var(--accent);
            opacity: .75;
        }
        .price-details .dauer {
            margin-top: 10px;
            padding-top: 9px;
            border-top: 1px dashed var(--border);
            color: var(--muted);
            font-size: 13px;
            display: flex;
            align-items: center;
            gap: 7px;
        }
        .price-details .dauer svg { width: 15px; height: 15px; color: var(--accent); flex-shrink: 0; }

        /* ===== ABOUT ===== */
        .about-grid {
            display: grid;
            grid-template-columns: 1fr 1.15fr;
            gap: 56px;
            align-items: center;
        }
        .about-panel {
            position: relative;
            border-radius: var(--radius);
            background: linear-gradient(150deg, #232130 0%, var(--card) 55%);
            border: 1px solid var(--border);
            padding: 44px 40px;
            overflow: hidden;
        }
        .about-panel::before {
            content: '';
            position: absolute;
            inset: 0;
            background-image: repeating-linear-gradient(-45deg, rgba(255,255,255,.02) 0 1px, transparent 1px 12px);
            pointer-events: none;
        }
        .about-year {
            font-family: var(--font-display);
            font-size: clamp(56px, 7vw, 84px);
            font-weight: 800;
            line-height: 1;
            color: var(--accent);
            margin-bottom: 8px;
        }
        .about-year-label { font-size: 16px; font-weight: 700; margin-bottom: 26px; }
        .about-panel p { color: var(--muted); font-size: 15.5px; line-height: 1.7; }

        .benefits-list { display: grid; gap: 20px; }
        .benefit-item { display: flex; align-items: flex-start; gap: 15px; }
        .benefit-check {
            width: 30px; height: 30px;
            min-width: 30px;
            background: rgba(255, 138, 30, .13);
            border: 1px solid rgba(255, 138, 30, .25);
            border-radius: 9px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--accent);
            font-size: 15px;
            font-weight: 800;
            margin-top: 2px;
        }
        .benefit-item h4 { font-size: 16.5px; font-weight: 800; margin-bottom: 3px; }
        .benefit-item p { color: var(--muted); font-size: 14px; margin: 0; }

        /* ===== PARTS (Karten-Grid + Filter) ===== */
        .parts-section { background: var(--bg-2); max-width: none; }
        .parts-inner { max-width: 1240px; margin: 0 auto; }
        .parts-search {
            position: relative;
            max-width: 520px;
            margin: 0 auto 22px;
        }
        .parts-search svg {
            position: absolute;
            left: 16px; top: 50%;
            transform: translateY(-50%);
            width: 19px; height: 19px;
            color: var(--muted);
            pointer-events: none;
        }
        .parts-search input {
            width: 100%;
            padding: 15px 18px 15px 48px;
            border-radius: 50px;
            border: 1px solid var(--border);
            background: var(--card);
            color: var(--text);
            font-family: var(--font-main);
            font-size: 15.5px;
        }
        .parts-search input:focus { outline: none; border-color: var(--accent); }
        .parts-search input::placeholder { color: var(--muted); }

        .parts-chips {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 9px;
            margin-bottom: 30px;
        }
        .parts-chip {
            padding: 9px 18px;
            border-radius: 40px;
            border: 1px solid var(--border);
            background: var(--card);
            color: var(--muted);
            font-family: var(--font-main);
            font-size: 13.5px;
            font-weight: 700;
            cursor: pointer;
            transition: var(--transition);
        }
        .parts-chip:hover { border-color: rgba(255, 138, 30, .5); color: var(--text); }
        .parts-chip.aktiv {
            background: var(--accent);
            border-color: var(--accent);
            color: #14100a;
        }
        .parts-chip .chip-zahl { opacity: .65; font-weight: 600; margin-left: 4px; }

        .parts-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
            gap: 18px;
        }
        .part-karte {
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            padding: 20px 22px;
            display: flex;
            flex-direction: column;
            gap: 10px;
            transition: var(--transition);
            animation: partRein .4s cubic-bezier(.4,0,.2,1) both;
        }
        @keyframes partRein {
            from { opacity: 0; transform: translateY(14px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        .part-karte:hover {
            transform: translateY(-4px);
            border-color: rgba(255, 138, 30, .5);
            box-shadow: var(--shadow-lg);
        }
        .part-kat {
            font-size: 11.5px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 1.1px;
            color: var(--muted);
        }
        .part-name { font-size: 15.5px; font-weight: 700; line-height: 1.45; flex: 1; }
        .part-fuss {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
        }
        .part-preis {
            color: var(--accent-2);
            font-weight: 800;
            font-size: 15.5px;
        }
        .part-badge {
            font-size: 12px;
            font-weight: 700;
            padding: 5px 12px;
            border-radius: 30px;
            white-space: nowrap;
        }
        .badge-yes { color: #6fce8f; background: rgba(111, 206, 143, .12); border: 1px solid rgba(111, 206, 143, .3); }
        .badge-order { color: var(--accent-2); background: rgba(255, 176, 58, .1); border: 1px solid rgba(255, 176, 58, .3); }
        .parts-empty {
            display: none;
            text-align: center;
            color: var(--muted);
            padding: 44px 20px;
            font-size: 15px;
            grid-column: 1 / -1;
        }
        .parts-mehr {
            display: flex;
            justify-content: center;
            margin-top: 26px;
        }
        /* [hidden] muss gewinnen: .btn setzt display:inline-flex */
        .parts-mehr button[hidden] { display: none; }

        .parts-count {
            text-align: center;
            color: var(--muted);
            font-size: 13.5px;
            margin-top: 22px;
        }

        /* ===== REVIEWS (Marquee mit echten Zitaten) ===== */
        .reviews-marquee {
            overflow: hidden;
            position: relative;
            padding: 6px 0 18px;
            -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
        }
        .reviews-track {
            display: flex;
            gap: 22px;
            width: max-content;
            animation: marquee 70s linear infinite;
        }
        .reviews-marquee:hover .reviews-track,
        .reviews-marquee:focus-within .reviews-track { animation-play-state: paused; }
        @keyframes marquee { to { transform: translateX(-50%); } }

        .review-quote {
            width: 350px;
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            padding: 24px 26px;
            display: flex;
            flex-direction: column;
            gap: 13px;
            flex-shrink: 0;
            transition: var(--transition);
        }
        .review-quote:hover { border-color: rgba(255, 138, 30, .5); }
        .review-quote blockquote {
            color: var(--text);
            font-size: 14.5px;
            line-height: 1.65;
            flex: 1;
        }
        .review-quote blockquote::before {
            content: '«';
            color: var(--accent);
            font-family: var(--font-display);
            font-size: 26px;
            line-height: 0;
            margin-right: 4px;
            vertical-align: -6px;
        }
        .review-quote-figur {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
        }
        .review-plattform {
            font-size: 12px;
            font-weight: 800;
            letter-spacing: .6px;
            padding: 5px 12px;
            border-radius: 30px;
            border: 1px solid var(--border);
            color: var(--muted);
            background: var(--card-2);
        }
        .review-plattform.pl-2gis { color: #3ec96e; border-color: rgba(62, 201, 110, .35); }
        .review-plattform.pl-flamp { color: #9a8cff; border-color: rgba(123, 104, 238, .4); }
        .review-plattform.pl-zoon { color: var(--accent-2); border-color: rgba(255, 176, 58, .35); }
        .review-datum { font-size: 12.5px; color: var(--muted); }

        .reviews-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 22px;
            margin-top: 34px;
        }
        .review-card {
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            padding: 32px 28px;
            text-align: center;
            transition: var(--transition);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
        }
        .review-card:hover {
            transform: translateY(-4px);
            border-color: rgba(255, 138, 30, .5);
            box-shadow: var(--shadow-lg);
        }
        .review-logo {
            height: 42px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 10px;
        }
        .review-logo svg { height: 100%; width: auto; }
        .review-card h3 { font-size: 18px; font-weight: 800; }
        .review-card p { color: var(--muted); font-size: 14px; flex: 1; }
        .review-card .btn { margin-top: 14px; }

        /* ===== CONTACTS ===== */
        .contact-grid {
            display: grid;
            grid-template-columns: 1fr 1.35fr;
            gap: 36px;
        }
        .contact-info { display: flex; flex-direction: column; gap: 24px; }
        .contact-block {
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            padding: 22px 24px;
        }
        .contact-block h3 {
            font-size: 16px;
            font-weight: 800;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 11px;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-size: 13px;
            color: var(--muted);
        }
        .contact-block h3 svg { width: 19px; height: 19px; color: var(--accent); }
        .contact-block a, .contact-block p { color: var(--text); font-size: 16px; font-weight: 600; text-decoration: none; line-height: 1.7; }
        .contact-block a:hover { color: var(--accent); }
        .contact-block .c-muted { color: var(--muted); font-size: 14px; font-weight: 500; }
        /* Warnung vor Betrugsanrufen (Annas Wortlaut, Mail 05.10.2026):
           am 03.10. riefen Betrueger einen Kunden in ihrem Namen an. */
        .contact-block.c-warnung { border-color: var(--accent); }
        .contact-block.c-warnung h3 { color: var(--accent); }
        .contact-block.c-warnung p { font-size: 15px; font-weight: 500; line-height: 1.6; }
        .contact-block.c-warnung a { color: var(--accent-2); font-weight: 700; white-space: nowrap; }

        .map-container {
            position: relative;
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            overflow: hidden;
            min-height: 420px;
        }
        /* Bild und Rahmen bekommen DENSELBEN Filter: beim Klick tauscht
           das eine gegen das andere, und der Uebergang faellt nicht auf.
           Der Filter dreht das helle OpenStreetMap-Bild ins Dunkle der
           Seite -- deshalb ist das Bild selbst hell gerechnet. Die Nennung
           steht ausserhalb, sonst kaeme sie invertiert heraus. */
        .map-container iframe,
        .map-container .karte-bild {
            position: absolute;
            inset: 0;
            width: 100%; height: 100%;
            border: 0;
            display: block;
            filter: grayscale(.35) invert(.92) hue-rotate(180deg) contrast(.9);
        }
        .map-container .karte-bild {
            object-fit: cover;
            /* Der Ausschnitt ist auf die Adresse zentriert; beim Zuschneiden
               auf schmale Felder muss die Mitte die Mitte bleiben, sonst
               zeigt die Nadel darueber auf die falsche Stelle. */
            object-position: center center;
        }
        /* Oben LINKS: unten links sitzt «Построить маршрут», unten rechts
           schiebt sich der feste MAX-Knopf darueber, sobald der Kartenfuss
           am unteren Fensterrand steht. Eine Lizenznennung, die zeitweise
           verdeckt ist, erfuellt ihren Zweck nicht. */
        .karte-quelle {
            position: absolute;
            left: 0; top: 0;
            z-index: 2;
            padding: 3px 8px;
            border-radius: 0 0 6px 0;
            background: rgba(10, 14, 20, .62);
            color: rgba(226, 232, 240, .82);
            font-size: 11px;
            letter-spacing: .02em;
            pointer-events: none;
        }
        /* ---- Eigene Markierung und Schutzschicht ----
           Die Schicht liegt auf z-index 1, der Routen-Knopf auf 2 -- der
           muss auch vor dem ersten Klick erreichbar bleiben. */
        .karte-schild {
            position: absolute;
            inset: 0;
            z-index: 1;
            width: 100%;
            border: 0;
            background: transparent;
            cursor: pointer;
            padding: 0;
            font-family: var(--font-main);
        }
        .karte-nadel {
            position: absolute;
            left: 50%; top: 50%;
            transform: translate(-50%, -100%);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            pointer-events: none;
        }
        .karte-nadel svg {
            width: 40px; height: 40px;
            color: var(--accent);
            filter: drop-shadow(0 3px 7px rgba(0, 0, 0, .65));
        }
        .karte-nadel-schild {
            order: -1;
            display: block;
            padding: 7px 12px;
            background: rgba(16, 20, 25, .93);
            border: 1px solid rgba(255, 138, 30, .5);
            border-radius: 9px;
            font-size: 12.5px;
            line-height: 1.45;
            color: var(--muted);
            text-align: center;
            white-space: nowrap;
            box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
        }
        .karte-nadel-schild b {
            display: block;
            color: var(--text);
            font-size: 13.5px;
            font-weight: 800;
        }
        .karte-freigeben {
            position: absolute;
            /* Nicht mittig unten: dort sitzt "Построить маршрут", und auf
               390 px lagen beide uebereinander. Jetzt oben rechts, wo nur
               die Yandex-Bedienknoepfe sind -- und die liegen unter der
               Schutzschicht. */
            right: 12px; top: 12px;
            left: auto; bottom: auto;
            transform: none;
            padding: 6px 13px;
            background: rgba(16, 20, 25, .85);
            border: 1px solid var(--border);
            border-radius: 20px;
            font-size: 12px;
            color: var(--muted);
            white-space: nowrap;
            transition: var(--transition);
        }
        .karte-schild:hover .karte-freigeben {
            color: var(--text);
            border-color: rgba(255, 138, 30, .45);
        }
        @media (max-width: 560px) {
            .karte-nadel-schild { font-size: 11.5px; }
            .karte-nadel svg { width: 34px; height: 34px; }
        }

        .map-link {
            position: absolute;
            left: 16px; bottom: 16px;
            z-index: 2;
            background: var(--accent);
            color: #14100a;
            font-weight: 800;
            font-size: 14px;
            text-decoration: none;
            padding: 12px 22px;
            border-radius: 50px;
            box-shadow: var(--shadow);
            display: inline-flex;
            align-items: center;
            gap: 8px;
            transition: var(--transition);
        }
        .map-link:hover { transform: translateY(-2px); filter: brightness(1.08); }
        .map-link svg { width: 17px; height: 17px; }

        /* ===== FOOTER ===== */
        .footer {
            background: #0c1017;
            border-top: 1px solid var(--border);
            padding: 60px 24px 30px;
        }
        .footer-inner { max-width: 1240px; margin: 0 auto; }
        .footer-top {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            flex-wrap: wrap;
            gap: 36px;
            margin-bottom: 44px;
        }
        .footer-brand .logo-svg { height: 30px; margin-bottom: 14px; }
        .footer-brand p { color: var(--muted); font-size: 14px; max-width: 340px; line-height: 1.7; }
        .footer-col h4 {
            font-size: 13px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 1.4px;
            color: var(--muted);
            margin-bottom: 14px;
        }
        .footer-col a, .footer-col span {
            display: block;
            color: var(--muted);
            text-decoration: none;
            font-size: 14.5px;
            padding: 5px 0;
            transition: var(--transition);
        }
        .footer-col a:hover { color: var(--accent); }
        .footer-bottom {
            border-top: 1px solid var(--border);
            padding-top: 24px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 12px;
        }
        .footer-bottom p { color: var(--muted); font-size: 13.5px; }
        .footer-bottom a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
        .footer-bottom a:hover { color: var(--accent); }

        /* ---- Fenster fuer «Что входит» ----
           Gleiche Machart wie das Buchungsfenster: dunkler Schleier, Karte
           in der Mitte, hoechstens 92vh hoch mit eigenem Bildlauf. Zwei
           Fenster, die sich verschieden verhalten, faellt sofort auf. */
        .drin-overlay {
            position: fixed;
            inset: 0;
            background: rgba(6, 9, 14, .8);
            backdrop-filter: blur(5px);
            z-index: 2000;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 18px;
        }
        .drin-overlay.open { display: flex; }
        .drin-fenster {
            background: var(--bg-2);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            width: 100%;
            max-width: 580px;
            max-height: 92vh;
            display: flex;
            flex-direction: column;
            box-shadow: var(--shadow-lg);
        }
        .drin-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            padding: 22px 26px 14px;
            border-bottom: 1px solid var(--border);
        }
        .drin-head h3 {
            font-family: var(--font-display);
            font-size: 19px;
            font-weight: 700;
        }
        .drin-body {
            padding: 20px 26px 26px;
            overflow-y: auto;
        }

        /* ===== SCHWEBENDER MAX-KNOPF =====
           Hiess einmal WhatsApp und war gruen (#2fbf5f). Seit dem
           15.09.2026 fuehrt er nach MAX -- Verlauf Blau nach Violett, die
           Markenfarben von MAX; gruen waere schlicht der falsche Dienst.

           Seit dem 18.09.2026 fuehrt er zu ZWEI Adressen: dem Chat zum
           Schreiben und dem Kanal zum Ansehen. Vorher nur zum Kanal -- und
           wer dort etwas fragen wollte, fand kein Eingabefeld. */
        .max-ecke {
            position: fixed;
            right: 20px; bottom: 20px;
            z-index: 1500;
        }
        .max-knopf {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 14px 22px 14px 16px;
            border-radius: 40px;
            background: linear-gradient(135deg, #4A90E2, #9B59D6);
            color: #fff;
            text-decoration: none;
            font-weight: 700;
            font-size: 15px;
            box-shadow: 0 8px 26px rgba(106, 118, 220, .45);
            transition: var(--transition);
        }
        .max-knopf {
            cursor: pointer;
            list-style: none;
            user-select: none;
        }
        /* Das Standard-Dreieck von <summary> weg -- Safari braucht dafuer
           einen eigenen Pseudowaehler, sonst steht es doppelt da. */
        .max-knopf::-webkit-details-marker { display: none; }
        .max-knopf::marker { content: ''; }
        .max-knopf:hover { filter: brightness(1.08); transform: translateY(-2px); }
        .max-knopf svg { width: 22px; height: 22px; flex-shrink: 0; }

        /* Die beiden Ziele. Sitzen UEBER dem Knopf, weil darunter auf dem
           Handy der Bildschirmrand ist. */
        .max-auswahl {
            position: absolute;
            right: 0;
            bottom: calc(100% + 10px);
            width: 254px;
            padding: 7px;
            border: 1px solid var(--border);
            border-radius: 16px;
            background: var(--card);
            box-shadow: 0 16px 40px rgba(0, 0, 0, .5);
            animation: maxAuf .18s ease-out;
        }
        @keyframes maxAuf {
            from { opacity: 0; transform: translateY(8px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        .max-auswahl a {
            display: flex;
            align-items: center;
            gap: 11px;
            padding: 11px 12px;
            border-radius: 11px;
            color: var(--text);
            text-decoration: none;
            transition: var(--transition);
        }
        .max-auswahl a:hover { background: rgba(255, 138, 30, .1); }
        .max-auswahl a svg {
            width: 21px; height: 21px;
            flex-shrink: 0;
            color: var(--accent-2);
        }
        .max-auswahl b {
            display: block;
            font-size: 14px;
            font-weight: 700;
            line-height: 1.3;
        }
        .max-auswahl small {
            display: block;
            color: var(--muted);
            font-size: 12.2px;
        }
        @media (max-width: 420px) {
            /* Auf schmalen Geraeten sonst breiter als der Abstand zum
               linken Rand: die Karte wuerde rechts herausragen. */
            .max-auswahl { width: calc(100vw - 52px); }
        }

        /* ===== REVEAL ===== */
        .reveal {
            opacity: 0;
            transform: translateY(36px);
            transition: opacity .8s cubic-bezier(.4,0,.2,1), transform .8s cubic-bezier(.4,0,.2,1);
        }
        .reveal.visible { opacity: 1; transform: translateY(0); }

        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after {
                animation-duration: .01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: .01ms !important;
                scroll-behavior: auto !important;
            }
            .reveal { opacity: 1 !important; transform: none !important; }
            .reviews-track { animation: none !important; flex-wrap: wrap; width: auto; justify-content: center; }
            .review-quote { width: min(350px, 100%); }
        }

        /* ===== BOOKING DIALOG ===== */
        .zapis-overlay {
            position: fixed;
            inset: 0;
            background: rgba(6, 9, 14, .8);
            backdrop-filter: blur(5px);
            z-index: 2000;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 18px;
        }
        .zapis-overlay.open { display: flex; }
        .zapis {
            background: var(--bg-2);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            width: 100%;
            max-width: 580px;
            max-height: 92vh;
            overflow-y: auto;
            box-shadow: var(--shadow-lg);
        }
        .zapis-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            padding: 22px 26px 0;
        }
        .zapis-head h3 { font-family: var(--font-display); font-size: 19px; font-weight: 700; }
        .zapis-close {
            background: none;
            border: none;
            color: var(--muted);
            font-size: 28px;
            line-height: 1;
            cursor: pointer;
            padding: 4px 10px;
            border-radius: 8px;
        }
        .zapis-close:hover { color: var(--text); background: var(--card); }
        .zapis-schritte { display: flex; gap: 8px; padding: 18px 26px 0; }
        .zapis-schritt { flex: 1; height: 4px; border-radius: 2px; background: var(--border); }
        .zapis-schritt.aktiv { background: var(--accent); }
        .zapis-body { padding: 20px 26px 26px; }
        .zapis-label {
            display: block;
            font-size: 12.5px;
            font-weight: 800;
            color: var(--muted);
            text-transform: uppercase;
            letter-spacing: .6px;
            margin-bottom: 9px;
        }
        .zapis-feld {
            width: 100%;
            padding: 13px 15px;
            border-radius: 11px;
            border: 1px solid var(--border);
            background: var(--card);
            color: var(--text);
            font-family: var(--font-main);
            font-size: 15px;
            margin-bottom: 16px;
        }
        .zapis-feld:focus { outline: none; border-color: var(--accent); }
        .zapis-feld::placeholder { color: var(--muted); }
        select.zapis-feld { appearance: none; }
        textarea.zapis-feld { resize: vertical; min-height: 84px; }

        .zapis-monat {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 12px;
        }
        .zapis-monat strong { font-size: 15.5px; }
        .zapis-pfeil {
            background: var(--card);
            border: 1px solid var(--border);
            color: var(--text);
            width: 36px; height: 36px;
            border-radius: 9px;
            cursor: pointer;
            font-size: 17px;
        }
        .zapis-pfeil:disabled { opacity: .3; cursor: default; }
        .zapis-pfeil:not(:disabled):hover { border-color: var(--accent); }
        /* ---- Ihr Logo im Hero -------------------------------------------
           Freigestellt aus ihrer Kontaktkarte, sitzt deshalb ohne schwarzen
           Kasten auf dem Seitenhintergrund. */
        .hero-logo-bild {
            display: block;
            width: min(250px, 62vw);
            height: auto;
            margin: 0 auto 26px;
            filter: drop-shadow(0 6px 20px rgba(255, 138, 30, .18));
        }
        @media (max-width: 900px) {
            /* Auf dem Handy kleiner, sonst nimmt es die halbe erste Ansicht. */
            .hero-logo-bild { width: min(190px, 55vw); margin-bottom: 18px; }
        }

        /* Logo links -- bei JEDER Fensterbreite, nicht ab einer Stufe.
           Vorher waren es zwei Stufen (ab 1380 und ab 1560 px), und darunter
           sprang das Logo zurueck nach oben. Das passiert schneller als man
           denkt: bei 125 % Browser-Zoom zaehlt ein 1878-px-Fenster nur noch
           als 1502. Daven: "es soll bei garkeinem zoom so aussehen".

           Also keine Umschaltung mehr, sondern mitwachsende Groessen. Die
           Rechnung dahinter, damit sich das Logo und die Ueberschrift nie in
           die Quere kommen:

           - Textblock: min(900px, 56vw). Links daneben bleiben damit immer
             (100vw - 48 - Text) / 2 = mindestens 22 % der Fensterbreite.
           - Logo: min(250px, 15vw). Zusammen mit 32 px Abstand braucht es
             also nie mehr als 17 vw -- es passt immer, mit Luft zum Rand.
           - Ueberschrift: 3.6vw statt 4.6vw. Ihr laengstes Wort,
             "кондиционирования,", ist etwa 14 mal so breit wie die
             Schriftgroesse hoch. 14 * 3.6vw = 50 vw, der Textblock ist 56 vw
             -- damit passt es auf jeder Breite, ohne Trennung und ohne
             Umbruch mitten im Wort.

           Unter 900 px greift die Handy-Regel weiter oben: dort steht das
           Logo mittig ueber dem Text, weil neben einem Textblock auf einem
           Telefon wirklich kein Platz ist. */
        @media (min-width: 901px) {
            .hero-content { max-width: min(900px, 56vw); }
            .hero-logo-bild {
                position: absolute;
                /* Bezug ist .hero-content (selbst position: relative), also
                   der Textblock. top: 0 setzt die obere Kante damit genau auf
                   die Hoehe der Abzeichenreihe -- die ist sein erstes Kind. */
                top: 0;
                left: calc(-1 * (min(250px, 15vw) + 32px));
                transform: none;
                width: min(250px, 15vw);
                margin: 0;
            }
        }


        /* Ihr Zusatz zu Spezialtechnik und Lastwagen -- sie hat ausdruecklich
           "маленьким шрифтом" geschrieben. */
        .hero-klein {
            /* auto-Raender, damit der Block im mittigen Hero auch mittig
               sitzt -- mit max-width allein klebte er links. */
            margin: 10px auto 0;
            font-size: 13.5px;
            line-height: 1.55;
            color: var(--muted);
            max-width: 46ch;
        }

        /* "по прайсу" statt einer geratenen Zahl: sieht aus wie der Preis,
           fuehrt aber in die Liste. */
        .service-price-link {
            /* Als Tippziel war die Zeile nur 26 px hoch. Mit Polsterung
               oben und unten kommt sie auf 40 -- ohne dass sich am
               Aussehen etwas aendert, weil die Karte ohnehin Platz hat. */
            display: inline-block;
            text-decoration: none;
            border-bottom: 1px dashed currentColor;
            padding: 7px 0 8px;
        }

        .service-price-link:hover { color: var(--accent-2); }

        /* ---- Bewertung und Autor der Zitate ----------------------------- */
        .reyting-zeile {
            display: flex;
            align-items: baseline;
            justify-content: center;
            gap: 10px;
            flex-wrap: wrap;
            margin: 0 0 26px;
        }

        .reyting-zahl {
            font-family: var(--font-display);
            font-size: 40px;
            line-height: 1;
            color: var(--accent-2);
        }

        .reyting-von { font-size: 15px; color: var(--muted); }

        .reyting-anzahl {
            font-size: 13.5px;
            color: var(--muted);
            border-left: 1px solid var(--border);
            padding-left: 10px;
        }

        .review-autor {
            font-size: 12.5px;
            font-weight: 700;
            color: var(--text);
        }

        .price-hinweis {
            margin: 22px 0 0;
            padding: 16px 18px;
            border-left: 3px solid var(--accent);
            background: var(--card);
            border-radius: var(--radius);
            font-size: 14px;
            line-height: 1.6;
            color: var(--muted);
        }

        .price-hinweis a { color: var(--accent-2); font-weight: 700; }

        .zapis-honig {
            position: absolute;
            left: -9999px;
            width: 1px;
            height: 1px;
            overflow: hidden;
        }

        .zapis-zustimmung {
            display: flex;
            gap: 10px;
            align-items: flex-start;
            margin: 14px 0 4px;
            font-size: 13.5px;
            line-height: 1.5;
            color: var(--muted);
            cursor: pointer;
        }

        .zapis-zustimmung input {
            flex: 0 0 auto;
            width: 19px;
            height: 19px;
            margin-top: 1px;
            accent-color: var(--accent);
            cursor: pointer;
        }

        .zapis-zustimmung a { color: var(--accent-2); }

        .zapis-kalender {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 6px;
            margin-bottom: 16px;
        }
        .zapis-wtag {
            text-align: center;
            font-size: 11.5px;
            color: var(--muted);
            padding-bottom: 3px;
            font-weight: 700;
        }
        .zapis-tag {
            aspect-ratio: 1;
            border: 1px solid var(--border);
            background: var(--card);
            color: var(--text);
            border-radius: 9px;
            cursor: pointer;
            font-family: var(--font-main);
            font-size: 14px;
        }
        .zapis-tag.leer { border: none; background: none; cursor: default; }
        .zapis-tag:disabled { opacity: .22; cursor: default; }
        .zapis-tag:not(:disabled):hover { border-color: var(--accent); }
        .zapis-tag.gewaehlt {
            background: var(--accent);
            border-color: var(--accent);
            color: #14100a;
            font-weight: 800;
        }
        .zapis-zeiten {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
            gap: 8px;
            margin-bottom: 4px;
        }
        .zapis-zeit {
            padding: 10px 4px;
            border: 1px solid var(--border);
            background: var(--card);
            color: var(--text);
            border-radius: 9px;
            cursor: pointer;
            font-family: var(--font-main);
            font-size: 14px;
        }
        .zapis-zeit:disabled { opacity: .28; cursor: default; text-decoration: line-through; }
        .zapis-zeit:not(:disabled):hover { border-color: var(--accent); }
        .zapis-zeit.gewaehlt {
            background: var(--accent);
            border-color: var(--accent);
            color: #14100a;
            font-weight: 800;
        }
        .zapis-hinweis { font-size: 13px; color: var(--muted); margin-top: 14px; line-height: 1.6; }
        .zapis-hinweis a { color: inherit; }
        .zapis-fehler {
            color: #ff9d6b;
            font-size: 13px;
            margin: -8px 0 12px;
            display: none;
            font-weight: 600;
        }
        .zapis-fertig { text-align: center; padding: 16px 0 4px; }
        .zapis-haken {
            width: 62px; height: 62px;
            border-radius: 50%;
            background: var(--accent);
            color: #14100a;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 30px;
            margin: 0 auto 18px;
            font-weight: 800;
        }
        .zapis-zusammenfassung {
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: 11px;
            padding: 15px 18px;
            margin: 18px 0;
            font-size: 15px;
            text-align: left;
        }
        .zapis-zusammenfassung div { margin: 4px 0; }
        .zapis-zusammenfassung span { color: var(--muted); }
        .zapis-tel-fallback { margin-top: 14px; font-size: 14px; color: var(--muted); }
        .zapis-tel-fallback a { color: var(--accent-2); font-weight: 700; text-decoration: none; }
        .zapis-abbrechen {
            display: block;
            width: 100%;
            margin-top: 10px;
            padding: 11px;
            background: none;
            border: 1px solid var(--border);
            border-radius: 11px;
            color: var(--muted);
            font-family: var(--font-main);
            font-size: 14.5px;
            font-weight: 700;
            cursor: pointer;
            transition: var(--transition);
        }
        .zapis-abbrechen:hover { color: var(--text); border-color: var(--muted); }
        .zapis-senden:disabled { opacity: .55; cursor: default; }
        .zapis-hinweis {
            margin: 0 0 16px;
            padding: 10px 12px;
            border-radius: 10px;
            background: rgba(255, 138, 30, .10);
            border: 1px solid rgba(255, 138, 30, .28);
            font-size: 13.5px;
            line-height: 1.5;
            color: var(--text);
        }

        .zapis-max-link { margin-top: 12px; font-size: 13.5px; color: var(--muted); }
        .zapis-max-link a { color: var(--accent-2); font-weight: 700; text-decoration: none; }
        .zapis-kopieren {
            background: none; border: none; padding: 0;
            font: inherit; color: var(--accent-2); font-weight: 700;
            cursor: pointer; text-decoration: none;
        }
        .zapis-kopieren:hover { text-decoration: underline; }
        .zapis-fehlerbox {
            background: rgba(255, 90, 90, .08);
            border: 1px solid rgba(255, 90, 90, .3);
            border-radius: 11px;
            padding: 14px 16px;
            margin: 14px 0;
            color: #ffb3a0;
            font-size: 14px;
            line-height: 1.6;
        }
        .zapis-nummer {
            display: inline-block;
            font-family: var(--font-display);
            color: var(--accent);
            font-size: 21px;
            margin: 4px 0 2px;
        }

        /* ===== FAHR-ANIMATION (Auto faehrt in die Werkstatt) ===== */
        .fahrt-section {
            position: relative;
            height: 230vh;
            background: linear-gradient(180deg, var(--bg) 0%, #0b0f16 55%, var(--bg-2) 100%);
        }
        .fahrt-sticky {
            position: sticky;
            top: 0;
            height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }
        .fahrt-szene { width: min(1240px, 100%); padding: 0 20px; }
        .fahrt-szene svg { width: 100%; height: auto; display: block; }
        .fahrt-auto { will-change: transform; }
        .fahrt-rad { will-change: transform; transform-box: fill-box; transform-origin: center; }
        .fahrt-tor { will-change: transform; transform-origin: 50% 0%; }
        .fahrt-licht { transition: none; }
        .fahrt-caption {
            text-align: center;
            margin-top: 8px;
            opacity: 0;
            transform: translateY(14px);
            transition: opacity .5s ease, transform .5s ease;
        }
        .fahrt-caption.sichtbar { opacity: 1; transform: translateY(0); }
        .fahrt-caption .fahrt-tag {
            display: inline-block;
            font-size: 12px;
            font-weight: 800;
            letter-spacing: 1.6px;
            text-transform: uppercase;
            color: var(--accent);
            margin-bottom: 8px;
        }
        .fahrt-caption h2 {
            font-family: var(--font-display);
            font-size: clamp(20px, 3.2vw, 32px);
            font-weight: 700;
        }
        .fahrt-caption p { color: var(--muted); font-size: 15px; margin-top: 8px; }

        /* ===== RESPONSIVE ===== */
        @media (max-width: 1024px) {
            .about-grid { grid-template-columns: 1fr; gap: 40px; }
            .contact-grid { grid-template-columns: 1fr; }
            .map-container { min-height: 340px; }
        }

        /* Ab hier uebernimmt der Menueknopf.
           1150 px und nicht 1024: gemessen bricht die Kopfleiste schon bei
           1150 um -- ein Navigationspunkt geht zweizeilig, die
           Telefonnummer bei 1040 sogar vierzeilig. Und die Grenze war
           doppelt falsch: die Links verschwanden unter 1024, der
           Menueknopf kam aber erst unter 768. Zwischen 769 und 1024 px gab
           es damit ueberhaupt keine Navigation -- kein Menue, keine Links.
           Beim Zoomen faellt man genau in dieses Loch.
           Nachgemessen: bei 1160 px brach noch ein Punkt um, bei 1200 nicht
           mehr -- deshalb 1199 und nicht 1150. */
        /* VAKANSII-ENTWURF: Telefon im Kopf unter 1360 px ausgeblendet. Auskommentiert,
           weil der Kopf mit Telefon gemessen von 769 bis 1359 px einzeilig bleibt
           (ohne Vakanz-Link). Zurueck, falls der Kopf wieder umbricht. */
        /* @media (max-width: 1359px) {
            .header-phone { display: none; }
        } */

        @media (max-width: 1199px) {
            .nav-desktop a.nav-link { display: none; }
            .menu-toggle { display: flex; }
        }
        @media (max-width: 768px) {
            .header-phone span { display: none; }
            .menu-toggle { display: flex; }
            .nav-desktop { display: none; }
            .section { padding: 64px 20px; }
            .hero { padding-top: 104px; }
            .hero-logo { height: 34px; margin-bottom: 26px; }
            .footer-top { flex-direction: column; }
            .footer-bottom { flex-direction: column; text-align: center; }
            .price-groups { grid-template-columns: 1fr; }
            .fahrt-section { height: 195vh; }
            .review-quote { width: 300px; }
        }
        @media (max-width: 480px) {
            .hero-cta { flex-direction: column; width: 100%; }
            .hero-cta .btn { width: 100%; }
            .zapis-head { padding: 18px 18px 0; }
            .zapis-body { padding: 16px 18px 20px; }
            .zapis-schritte { padding: 14px 18px 0; }
            .max-knopf { right: 14px; bottom: 14px; padding: 14px; border-radius: 50%; }
            .max-knopf span { display: none; }
        }
        /* Vakanz-Hinweis im О нас-Block (07.10.2026): bewusst leise — kein Banner */
        .about-vakansii { margin-top: 20px; font-size: 15px; }
        .about-vakansii a { color: var(--accent-2); text-decoration: none; font-weight: 600; border-bottom: 1px solid rgba(255,176,58,.35); transition: var(--transition); }
        .about-vakansii a:hover { border-bottom-color: var(--accent-2); }
    

/* ===== Unterseiten: Aufbau wie auf der Startseite ===== */
main { padding-top: 76px; }
.sub-wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.krumen { padding-top: 26px; font-size: 14px; color: var(--muted); }
.krumen ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.krumen a { color: var(--muted); text-decoration: none; }
.krumen a:hover { color: var(--accent); }
.krumen span[aria-hidden] { color: var(--border); }
.krumen [aria-current] { color: var(--text); }
.sub-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 48px; align-items: center; padding: 34px 0 56px; }
.sub-hero.ohne-foto { grid-template-columns: minmax(0, 1fr); }
.sub-hero h1 { font-family: var(--font-display); font-size: clamp(28px, 3.4vw, 44px); line-height: 1.18; font-weight: 800; color: var(--text); margin-bottom: 18px; overflow-wrap: anywhere; }
.sub-hero .lead-text { color: var(--muted); font-size: 18px; line-height: 1.65; max-width: 640px; margin-bottom: 12px; }
.sub-hero .lead-meta { color: var(--muted); font-size: 14.5px; }
.sub-hero .cta { display: flex; flex-wrap: nowrap; gap: 12px; margin-top: 28px; }
.sub-hero .cta .btn-lg { padding: 17px 26px; white-space: nowrap; }
.sub-foto { margin: 0; }
.sub-foto img { width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--border); box-shadow: var(--shadow); }
.sub-foto figcaption { margin-top: 10px; font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.sub-fakten { list-style: none; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; display: grid; gap: 18px; }
.sub-fakten li { font-weight: 800; color: var(--text); font-size: 17px; }
.sub-fakten li span { display: block; font-weight: 500; color: var(--muted); font-size: 14px; margin-top: 3px; }
.sub-karten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.sub-karten.solo { grid-template-columns: minmax(0, 760px); justify-content: center; }
.sub-karten .sub-karte.mitte { grid-column: 1 / -1; justify-self: center; width: calc((100% - 22px) / 2); }
.sub-karte { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 30px 28px; display: flex; flex-direction: column; }
.sub-karte h3 { font-size: 19px; font-weight: 800; line-height: 1.35; color: var(--text); margin-bottom: 12px; }
.sub-karte h4 { font-size: 15.5px; font-weight: 700; color: var(--text); margin: 16px 0 6px; }
.sub-karte p { color: var(--muted); font-size: 15px; line-height: 1.62; margin-bottom: 8px; }
.sub-karte ul { color: var(--muted); font-size: 15px; line-height: 1.62; padding-left: 20px; margin-bottom: 8px; }
.sub-karte li { margin-bottom: 5px; }
.sub-karte .sub-fussnote { display: flex; gap: 10px; align-items: flex-start; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--border); color: var(--muted); }
.sub-karte .sub-fussnote p { font-size: 13.5px; line-height: 1.55; margin-bottom: 6px; }
.sub-karte .sub-fussnote p:last-child { margin-bottom: 0; }
.sub-karte .sub-fussnote svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 3px; color: var(--accent-2); }
.sub-preis { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.sub-kasten { margin-top: 18px; padding: 18px 22px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); }
.sub-kasten p { font-size: 13.5px; color: var(--muted); line-height: 1.6; margin: 0 0 8px; padding: 0; }
.sub-kasten p:last-child { margin-bottom: 0; }
.sub-bezug { margin-top: 22px; text-align: center; }
.sub-bezug a { color: var(--accent-2); font-weight: 700; text-decoration: none; }
.sub-bezug a:hover { color: var(--accent); }
.sub-lese { max-width: 800px; margin: 0 auto; }
.sub-lese h3 { font-size: 19px; font-weight: 800; line-height: 1.35; color: var(--text); margin: 28px 0 10px; }
.sub-lese h3:first-child { margin-top: 0; }
.sub-lese p { color: var(--muted); font-size: 16px; line-height: 1.7; margin-bottom: 12px; }
.sub-lese ul { color: var(--muted); font-size: 16px; line-height: 1.7; padding-left: 22px; margin-bottom: 12px; }
.sub-lese li { margin-bottom: 6px; }
.sub-galerie { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; }
.sub-galerie .galerie-kachel { flex: 0 0 calc((100% - (var(--n) - 1) * 22px) / var(--n)); min-width: 0; }
.section.ceny-sec { padding-left: 0; padding-right: 0; }
.sub-gruppe-link { padding: 4px 22px 18px; font-size: 14px; }
.sub-gruppe-link a { color: var(--accent-2); font-weight: 700; text-decoration: none; }
.sub-gruppe-link a:hover { color: var(--accent); }
.sub-reviews { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; }
.sub-reviews .review-quote { width: auto; max-width: none; }
.sub-andere { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.sub-andere-karte { display: flex; align-items: center; gap: 16px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 22px; min-height: 76px; color: var(--text); text-decoration: none; font-weight: 700; transition: var(--transition); }
.sub-andere-karte:hover { border-color: rgba(255, 138, 30, .5); transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.sub-andere-icon { width: 48px; height: 48px; flex-shrink: 0; display: grid; place-items: center; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--border); color: var(--accent); }
.sub-andere-icon svg { width: 24px; height: 24px; }
.sub-andere-name { flex: 1; font-size: 16px; line-height: 1.35; }
.sub-andere-pfeil { color: var(--accent-2); font-size: 20px; }
@media (max-width: 900px) {
    .sub-hero { grid-template-columns: minmax(0, 1fr); gap: 36px; }
    .sub-karten, .sub-karten.solo { grid-template-columns: minmax(0, 1fr); }
    .sub-karten .sub-karte.mitte { width: 100%; }
    .sub-andere { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .sub-foto { display: none; }
}
@media (max-width: 560px) {
    .sub-wrap { padding: 0 20px; }
    .preis-wert { white-space: normal; }
    .sub-galerie { --n: 2 !important; }
    .sub-andere { grid-template-columns: minmax(0, 1fr); }
    .sub-hero .cta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .sub-hero .cta .btn-primary { grid-column: 1 / -1; }
    .sub-hero .cta .btn { width: 100%; padding-left: 12px; padding-right: 12px; font-size: 15px; }
    .sub-karte { padding: 24px 20px; }
}