/* goldstein-folierung.de – Neugestaltung Oktober 2026 (Werbeagentur Focustrend)
   Schwarz/Gold, Schrift Archivo (lokal, keine Google-Verbindung). */

@font-face {
    font-family: 'Archivo';
    src: url(schrift/archivo-latin.woff2) format('woff2');
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-style: normal;
    font-display: swap;
}

:root {
    --schwarz: #060608;
    --flaeche: #0e0e12;
    --flaeche2: #15151b;
    --linie: rgba(255, 255, 255, .09);
    --text: #f4f1ea;
    --text2: rgba(244, 241, 234, .68);
    --text3: rgba(244, 241, 234, .42);
    --gold: #f2b84b;
    --gold2: #ffcf5a;
    --gold3: #d9a23c;
    --verlauf: linear-gradient(100deg, #f0a541 0%, #ffcf5a 30%, #fff1c2 46%, #ffcf5a 60%, #f3a843 82%, #ffd468 100%);
    --verlauf-knopf: linear-gradient(135deg, #ffb457 0%, #ffd668 48%, #f3a640 100%);
    --breit: 1320px;
    --rand: clamp(16px, 4vw, 48px);
    --kopf-h: 84px;
    --ease: cubic-bezier(.22, 1, .36, 1);
    --ease2: cubic-bezier(.65, 0, .35, 1);
    --schrift: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 72px; background: var(--schwarz); overflow-x: hidden; overflow-x: clip; }
body {
    font-family: var(--schrift);
    font-stretch: 100%;
    font-size: 17px;
    line-height: 1.65;
    color: var(--text);
    background: var(--schwarz);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    overflow-x: clip;
    text-rendering: optimizeLegibility;
}
html.gesperrt, html.gesperrt body { overflow: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }
ul, ol { list-style: none; }
::selection { background: var(--gold2); color: #000; }
:focus-visible { outline: 2px solid var(--gold2); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }

.sprung { position: fixed; left: 16px; top: -60px; z-index: 500; background: var(--gold2); color: #000; padding: 10px 16px; border-radius: 10px; font-weight: 700; text-decoration: none; transition: top .3s; }
.sprung:focus { top: 16px; }

.rahmen { width: 100%; max-width: calc(var(--breit) + 2 * var(--rand)); margin: 0 auto; padding-inline: var(--rand); }
.abschnitt { position: relative; padding: clamp(84px, 11vw, 160px) 0; }

/* ---------- Schrift-Bausteine ---------- */
.etikett {
    display: inline-flex; align-items: center; gap: 12px;
    font-size: .76rem; font-weight: 700; letter-spacing: .28em; text-transform: uppercase;
    color: var(--gold2); margin-bottom: 22px;
}
.etikett::before { content: ''; width: 34px; height: 1px; background: currentColor; flex: none; }
.titel {
    font-stretch: 118%; font-weight: 850; text-transform: uppercase;
    font-size: clamp(2.2rem, 6.1vw, 5.7rem); line-height: .93; letter-spacing: -.015em;
    margin-bottom: 30px; overflow-wrap: normal;
}
.titel em { font-style: normal; }
.titel-riesig { font-size: clamp(3rem, 11vw, 10rem); }
.kontur { color: transparent; -webkit-text-stroke: 1.5px rgba(244, 241, 234, .55); }
.gold-schimmer, .gold-schimmer .wort > span {
    background: var(--verlauf); background-size: 220% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: schimmer 5s ease-in-out infinite alternate;
}
@keyframes schimmer { from { background-position: 0% 0; } to { background-position: 100% 0; } }
.fliesstext p { color: var(--text2); margin-bottom: 1.05em; max-width: 60ch; }
.fliesstext p.einleitung { color: var(--text); font-size: 1.12rem; }

.kopfzeile { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: clamp(44px, 6vw, 72px); }
.kopfzeile .titel { margin-bottom: 0; }
.kopfzeile > div { min-width: 0; }
.kopfzeile-text { max-width: 420px; color: var(--text2); font-size: 1.05rem; }
.kopfzeile-mitte { flex-direction: column; align-items: center; text-align: center; gap: 0; }
.kopfzeile-mitte > * { max-width: 100%; }
.kopfzeile-mitte .titel { width: 100%; }
.kopfzeile-mitte .kopfzeile-text { margin-top: 24px; max-width: 560px; }

/* ---------- Knöpfe ---------- */
.knopf {
    --h: 56px;
    position: relative; isolation: isolate; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center; gap: 12px;
    height: var(--h); padding: 0 30px; border: 0; border-radius: 999px;
    font-size: .8rem; font-weight: 750; letter-spacing: .16em; text-transform: uppercase;
    text-decoration: none; white-space: nowrap; cursor: pointer;
    transform: translate(var(--mgx, 0px), var(--mgy, 0px));
    transition: transform .45s var(--ease), box-shadow .45s var(--ease), background-color .35s, color .3s;
}
.knopf svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .45s var(--ease); flex: none; }
.knopf:hover svg { transform: translateX(4px); }
.knopf-gold { background: var(--verlauf-knopf); color: #140e03; box-shadow: 0 12px 34px -12px rgba(255, 180, 70, .6), inset 0 1px 0 rgba(255, 255, 255, .5); }
.knopf-gold::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .7) 50%, transparent 70%); transform: translateX(-130%); transition: transform 1s var(--ease); }
.knopf-gold:hover::before { transform: translateX(130%); }
.knopf-gold:hover { box-shadow: 0 18px 44px -12px rgba(255, 180, 70, .8), inset 0 1px 0 rgba(255, 255, 255, .5); }
.knopf-rand { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .24); }
.knopf-rand:hover { color: var(--gold2); box-shadow: inset 0 0 0 1.5px var(--gold2); background: rgba(242, 184, 75, .07); }
.knopf-dunkel { background: #060608; color: var(--gold2); box-shadow: 0 14px 34px -14px rgba(0, 0, 0, .7); }
.knopf-dunkel:hover { background: #000; }
.knopf-klein { --h: 44px; padding: 0 20px; font-size: .72rem; }
.knopf-breit { width: 100%; }
.knopf[disabled] { opacity: .6; cursor: progress; }
.knopf-text {
    display: inline-flex; align-items: center; gap: 8px; padding: 8px 0;
    background: none; border: 0; cursor: pointer; text-decoration: none;
    color: var(--gold2); font-size: .76rem; font-weight: 750; letter-spacing: .16em; text-transform: uppercase;
}
.knopf-text svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .4s var(--ease); }
.knopf-text:hover svg { transform: translateX(4px); }

/* ---------- Ladebild ---------- */
.lader { position: fixed; inset: 0; z-index: 400; background: var(--schwarz); display: grid; place-content: center; gap: 26px; justify-items: center; animation: laderNotaus .5s 3s forwards; }
.lader.weg { opacity: 0; visibility: hidden; transition: opacity .7s var(--ease), visibility 0s .7s; }
html.ohne-intro .lader, html:not(.js) .lader { display: none; }
.lader-logo { position: relative; width: min(260px, 62vw); overflow: hidden; }
.lader-logo img { width: 100%; height: auto; opacity: 0; animation: laderLogo .9s var(--ease) .1s forwards; }
.lader-logo span { font-stretch: 125%; font-weight: 900; font-size: 2.4rem; text-transform: uppercase; }
.lader-glanz { position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .95) 50%, transparent 65%); mix-blend-mode: overlay; transform: translateX(-120%); animation: laderGlanz 1.1s var(--ease2) .45s forwards; }
.lader-linie { width: 160px; height: 2px; background: rgba(255, 255, 255, .1); border-radius: 2px; overflow: hidden; }
.lader-linie i { display: block; height: 100%; background: var(--verlauf); transform-origin: left; transform: scaleX(0); animation: laderLinie 1.2s var(--ease) .1s forwards; }
@keyframes laderLogo { from { opacity: 0; transform: translateY(12px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes laderGlanz { to { transform: translateX(120%); } }
@keyframes laderLinie { to { transform: scaleX(1); } }
@keyframes laderNotaus { to { opacity: 0; visibility: hidden; } }

.fortschritt { position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 70; pointer-events: none; }
.fortschritt i { display: block; height: 100%; background: var(--verlauf); transform-origin: left; transform: scaleX(var(--p, 0)); }

/* ---------- Kopfzeile ---------- */
.kopf { position: fixed; inset: 0 0 auto; z-index: 60; transition: background-color .45s, border-color .45s, transform .45s var(--ease); border-bottom: 1px solid transparent; }
.kopf-innen { max-width: calc(var(--breit) + 2 * var(--rand)); margin: 0 auto; padding: 0 var(--rand); height: var(--kopf-h); display: flex; align-items: center; justify-content: space-between; gap: 24px; transition: height .45s var(--ease); }
.kopf.fest { background: #060608; border-color: var(--linie); }
.kopf.fest .kopf-innen { height: 70px; }
.kopf-logo { display: block; flex: none; }
.kopf-logo img { height: 50px; width: auto; transition: height .45s var(--ease); }
.kopf.fest .kopf-logo img { height: 40px; }
.kopf-logo-text { font-stretch: 125%; font-weight: 900; font-size: 1.6rem; text-transform: uppercase; color: var(--gold2); text-decoration: none; }
.kopf-nav { display: flex; gap: 34px; margin-left: auto; }
.kopf-link { position: relative; text-decoration: none; font-size: .78rem; font-weight: 650; letter-spacing: .18em; text-transform: uppercase; padding: 8px 0; overflow: hidden; display: block; }
.kopf-link span { display: block; position: relative; transition: transform .5s var(--ease); }
.kopf-link span::after { content: attr(data-text); position: absolute; left: 0; top: 100%; color: var(--gold2); }
.kopf-link:hover span { transform: translateY(-100%); }
.kopf-link.aktiv { color: var(--gold2); }
.kopf-rechts { display: flex; align-items: center; gap: 18px; }
.kopf-tel { display: flex; align-items: center; gap: 10px; text-decoration: none; font-size: .86rem; font-weight: 600; color: var(--text2); transition: color .3s; }
.kopf-tel svg { width: 34px; height: 34px; padding: 8px; border-radius: 50%; border: 1px solid var(--linie); fill: none; stroke: var(--gold2); stroke-width: 2; }
.kopf-tel:hover { color: var(--gold2); }
.menue-knopf { display: none; width: 46px; height: 46px; border: 0; border-radius: 13px; background: var(--verlauf-knopf); cursor: pointer; position: relative; flex: none; box-shadow: 0 8px 22px -8px rgba(255, 180, 70, .6); }
.menue-knopf i { position: absolute; left: 12px; right: 12px; height: 3px; border-radius: 3px; background: #120d04; transition: transform .45s var(--ease), opacity .3s, top .45s var(--ease); }
.menue-knopf i:nth-child(1) { top: 14px; }
.menue-knopf i:nth-child(2) { top: 21.5px; right: 18px; }
.menue-knopf i:nth-child(3) { top: 29px; }
.menue-knopf[aria-expanded="true"] i:nth-child(1) { top: 21.5px; transform: rotate(45deg); }
.menue-knopf[aria-expanded="true"] i:nth-child(2) { opacity: 0; transform: translateX(10px); }
.menue-knopf[aria-expanded="true"] i:nth-child(3) { top: 21.5px; transform: rotate(-45deg); }

.menue { position: fixed; inset: 0; z-index: 55; background: #060608; padding: calc(var(--kopf-h) + 24px) var(--rand) calc(28px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; justify-content: space-between; overflow-y: auto; }
.menue-nav { display: flex; flex-direction: column; gap: 6px; }
.menue-nav a { display: flex; align-items: baseline; gap: 14px; text-decoration: none; font-stretch: 120%; font-weight: 850; text-transform: uppercase; font-size: clamp(2rem, 9vw, 3.6rem); line-height: 1.12; border-bottom: 1px solid var(--linie); padding: 10px 0; opacity: 0; transform: translateY(24px); }
.menue-nav a small { font-size: .8rem; color: var(--gold2); font-weight: 700; letter-spacing: .1em; font-stretch: 100%; }
.menue.offen .menue-nav a { animation: menueRein .7s var(--ease) forwards; animation-delay: calc(var(--i) * 70ms + 80ms); }
@keyframes menueRein { to { opacity: 1; transform: none; } }
.menue-unten { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 32px; }
.menue-unten p { grid-column: 1 / -1; color: var(--text3); font-size: .9rem; margin-top: 8px; }
.menue-unten .knopf:only-of-type { grid-column: 1 / -1; }

/* ---------- Bühne ---------- */
.buehne {
    position: relative; isolation: isolate; overflow: hidden;
    min-height: 100vh; min-height: 100svh;
    display: flex; flex-direction: column;
    padding: calc(var(--kopf-h) + 18px) 0 30px;
    background: radial-gradient(90% 60% at 50% 6%, #1c170f 0%, #0c0b0a 52%, var(--schwarz) 82%);
}
.buehne-licht { position: absolute; left: -10%; right: -10%; top: -12%; height: 85%; z-index: -1; background: radial-gradient(48% 52% at 50% 22%, rgba(255, 236, 205, .2), transparent 72%); opacity: 0; transition: opacity 2.2s var(--ease) .5s; }
.decke { position: absolute; left: 0; top: 0; width: 100%; height: 58%; z-index: -1; pointer-events: none; overflow: visible; }
.decke g { filter: drop-shadow(0 0 3px rgba(255, 255, 255, .8)) drop-shadow(0 0 12px rgba(255, 226, 180, .45)); }
.decke { opacity: .62; }
.decke line { stroke: #fff; stroke-linecap: round; opacity: 0; }
.buehne.an .decke line { animation: roehreAn 1.1s linear forwards; animation-delay: var(--d, 0s); }
.buehne.an .decke.sofort line { animation: none; opacity: var(--o, 1); }
@keyframes roehreAn {
    0% { opacity: 0; } 6% { opacity: var(--o, 1); } 10% { opacity: .08; } 18% { opacity: var(--o, 1); }
    24% { opacity: .2; } 30% { opacity: var(--o, 1); } 100% { opacity: var(--o, 1); }
}
.buehne-boden { position: absolute; left: -60%; right: -60%; bottom: -14%; height: 52%; z-index: -1; background: repeating-conic-gradient(#19191c 0 25%, #0a0a0c 0 50%) 0 0 / 96px 96px; transform: perspective(520px) rotateX(64deg); transform-origin: 50% 100%; -webkit-mask: linear-gradient(to top, rgba(0, 0, 0, .7), transparent 80%); mask: linear-gradient(to top, rgba(0, 0, 0, .7), transparent 80%); opacity: 0; transition: opacity 2.4s var(--ease) .9s; }
.buehne.an .buehne-licht { opacity: 1; }
.buehne.an .buehne-boden { opacity: .6; }
.buehne-foto-bild { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; opacity: .5; }
.buehne-foto::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(6, 6, 8, .35), rgba(6, 6, 8, .2) 40%, var(--schwarz)); }

.buehne-oben { position: relative; z-index: 4; text-align: center; padding: 0 var(--rand); }
.marke-chip { display: inline-flex; align-items: center; gap: 10px; padding: 9px 18px; border-radius: 999px; border: 1px solid rgba(242, 184, 75, .42); background: rgba(20, 16, 8, .9); color: var(--gold2); font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; font-weight: 700; margin-bottom: 20px; }
.marke-chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--gold2); box-shadow: 0 0 0 0 rgba(255, 207, 90, .7); animation: puls 2.2s infinite; }
@keyframes puls { 70% { box-shadow: 0 0 0 10px rgba(255, 207, 90, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 207, 90, 0); } }
.buehne-titel { font-stretch: 125%; font-weight: 900; text-transform: uppercase; line-height: .9; letter-spacing: -.02em; text-shadow: 0 6px 40px rgba(0, 0, 0, .85), 0 2px 10px rgba(0, 0, 0, .6); }
.buehne-oben::before { content: ''; position: absolute; left: 50%; top: 45%; width: min(1100px, 110%); height: 150%; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(6, 6, 8, .72), rgba(6, 6, 8, 0)); z-index: -1; pointer-events: none; }
.buehne-titel .zeile { display: block; white-space: nowrap; }
.buehne-titel .gold-schimmer { text-shadow: none; filter: drop-shadow(0 4px 22px rgba(0, 0, 0, .8)); }
.buehne-titel .zeile:first-child { font-size: clamp(2rem, 6.3vw, 6.6rem); }
.buehne-titel .zeile:last-child { font-size: clamp(1.15rem, 3.2vw, 3.3rem); margin-top: .28em; letter-spacing: .005em; }
.js .buehne-titel .zeile { opacity: 0; transform: translateY(40px); transition: opacity 1.1s var(--ease), transform 1.3s var(--ease); }
.js .buehne-titel .zeile:last-child { transition-delay: .15s; }
.js .marke-chip, .js .buehne-unten { opacity: 0; transform: translateY(20px); transition: opacity 1s var(--ease) .5s, transform 1.2s var(--ease) .5s; }
.buehne.an .buehne-titel .zeile, .buehne.an .marke-chip, .buehne.an .buehne-unten { opacity: 1; transform: none; }

.buehne-mitte { position: relative; z-index: 3; flex: 1; display: flex; align-items: flex-end; justify-content: center; padding: 0 var(--rand); min-height: 0; }
.riesenwort {
    position: absolute; left: 0; right: 0; top: 46%; transform: translate3d(var(--rx, 0px), calc(-50% + var(--ry, 0px)), 0);
    text-align: center; white-space: nowrap; pointer-events: none; user-select: none; z-index: -1;
    font-stretch: 125%; font-weight: 900; font-size: 12.4vw; line-height: .85; letter-spacing: -.02em;
    color: transparent; -webkit-text-stroke: 1.5px rgba(255, 207, 90, .3);
}
.riesenwort .bst { display: inline-block; background: linear-gradient(180deg, rgba(255, 207, 90, .2), rgba(255, 207, 90, 0) 78%); -webkit-background-clip: text; background-clip: text; }
.js .riesenwort .bst { opacity: 0; transform: translateY(35%); transition: opacity 1.2s var(--ease), transform 1.4s var(--ease); transition-delay: calc(.35s + var(--b) * 55ms); }
.buehne.an .riesenwort .bst { opacity: 1; transform: none; }

.auto { position: relative; width: clamp(290px, min(92vw, calc((100svh - 440px) * 1.766)), 1040px); aspect-ratio: 830 / 470; margin-top: 10px; transform: translate3d(var(--ax, 0px), var(--ay, 0px), 0) scale(var(--as, 1)); transform-origin: 50% 85%; }
.auto-bild { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; }
.js .auto-bild { opacity: 0; filter: brightness(0); transform: translateY(14px) scale(.975); transition: opacity 1.3s var(--ease) .3s, filter 2s var(--ease) .55s, transform 2s var(--ease) .3s; }
.buehne.an .auto-bild { opacity: 1; filter: none; transform: none; }
.auto-spiegel { position: absolute; left: 0; top: 97%; width: 100%; height: 100%; transform: scaleY(-1); -webkit-mask: linear-gradient(to top, rgba(0, 0, 0, .32) 0%, transparent 30%); mask: linear-gradient(to top, rgba(0, 0, 0, .32) 0%, transparent 30%); z-index: 1; opacity: 0; transition: opacity 2s var(--ease) 1.1s; }
.buehne.an .auto-spiegel { opacity: .6; }
.auto-schatten { position: absolute; left: 6%; right: 4%; bottom: -2%; height: 16%; z-index: 1; background: radial-gradient(closest-side, rgba(0, 0, 0, .9), transparent); }
.auto-glanz { position: absolute; inset: 0; z-index: 3; pointer-events: none; -webkit-mask: url(../img/_neu/auto.webp) center / 100% 100% no-repeat; mask: url(../img/_neu/auto.webp) center / 100% 100% no-repeat; mix-blend-mode: multiply; opacity: 0; }
.auto-glanz::before { content: ''; position: absolute; inset: 0; opacity: 0; transition: opacity .6s; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 40%), rgba(255, 176, 66, .7), rgba(255, 210, 120, .22) 14%, transparent 32%); }
.auto.licht .auto-glanz::before { opacity: 1; }
.auto-glanz::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 38%, rgba(255, 170, 60, .8) 48%, rgba(255, 225, 160, .4) 52%, transparent 62%) no-repeat; background-size: 300% 100%; background-position: 130% 0; }
.buehne.an .auto-glanz { opacity: 1; }
.buehne.an .auto-glanz::after { animation: autoStreif 2.4s var(--ease2) 1.9s both; }
@keyframes autoStreif { from { background-position: 130% 0; } to { background-position: -30% 0; } }

.buehne-unten { position: relative; z-index: 4; display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; width: 100%; max-width: calc(var(--breit) + 2 * var(--rand)); margin: 0 auto; padding: 22px var(--rand) 0; }
.buehne-text { max-width: 420px; color: var(--text2); font-size: 1rem; }
.buehne-text p + p { margin-top: .4em; }
.buehne-knoepfe { display: flex; gap: 14px; flex-wrap: wrap; justify-content: flex-end; }
.scroll-hinweis { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; color: var(--text3); font-size: .62rem; letter-spacing: .3em; text-transform: uppercase; }
.scroll-hinweis i { width: 1px; height: 46px; background: rgba(255, 255, 255, .15); position: relative; overflow: hidden; }
.scroll-hinweis i::after { content: ''; position: absolute; left: 0; right: 0; top: -50%; height: 50%; background: var(--gold2); animation: scrollLinie 2s var(--ease2) infinite; }
@keyframes scrollLinie { to { top: 100%; } }

/* ---------- Laufband ---------- */
.laufband { position: relative; overflow: hidden; background: #0b0b0e; border-block: 1px solid var(--linie); padding: 22px 0; }
.laufband-spur, .band-spur { display: flex; width: max-content; will-change: transform; }
.laufband-gruppe { display: flex; align-items: center; gap: 30px; padding-right: 30px; white-space: nowrap; }
.laufband-titel { font-size: .72rem; letter-spacing: .26em; text-transform: uppercase; color: var(--text3); font-weight: 700; }
.laufband-marke { font-stretch: 125%; font-weight: 900; font-size: clamp(1.4rem, 2.6vw, 2.1rem); text-transform: uppercase; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .55); transition: color .4s, -webkit-text-stroke-color .4s; }
.laufband-marke:hover { color: var(--gold2); -webkit-text-stroke-color: var(--gold2); }
.laufband-leistung { font-size: 1rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text2); }
.stern { color: var(--gold2); font-style: normal; font-size: .9rem; }

/* ---------- Über uns ---------- */
.ueber-raster { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: clamp(48px, 7vw, 110px); align-items: center; }
.unterschrift { display: flex; align-items: center; gap: 16px; color: var(--gold2); font-size: .74rem; letter-spacing: .3em; text-transform: uppercase; font-weight: 700; margin-top: 30px; }
.unterschrift i { width: 48px; height: 1px; background: rgba(255, 255, 255, .25); }
.ueber-bild { position: relative; }
.bild-rahmen { position: relative; overflow: hidden; border-radius: 30px; aspect-ratio: 4 / 5; background: #111; border: 1px solid var(--linie); }
.bild-rahmen img { width: 100%; height: 118%; object-fit: cover; transform: translate3d(0, var(--py, -8%), 0); }
.siegel { position: absolute; left: -46px; bottom: -46px; width: 150px; height: 150px; border-radius: 50%; background: #0b0b0e; border: 1px solid rgba(242, 184, 75, .3); display: grid; place-items: center; z-index: 3; box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .8); }
.siegel svg { position: absolute; inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); animation: drehen 22s linear infinite; }
.siegel text { fill: var(--gold2); font-size: 15.5px; font-weight: 700; letter-spacing: 3.2px; font-family: var(--schrift); }
.siegel span { font-size: 2rem; color: var(--gold2); animation: drehen 8s linear infinite reverse; }
@keyframes drehen { to { transform: rotate(360deg); } }

/* Folie abziehen: goldene Folie gleitet beim Einblenden vom Bild */
.js .folie::after {
    content: ''; position: absolute; inset: -1px; z-index: 2; pointer-events: none;
    background: linear-gradient(115deg, #a9771f 0%, #f6c457 22%, #fff3cc 36%, #ffcd55 48%, #c88d2a 66%, #ffd56a 84%, #b07d22 100%);
    clip-path: polygon(-35% 0, 100% 0, 100% 100%, 0 100%);
    transition: clip-path 1.5s var(--ease2) .15s;
}
.js .folie.sichtbar::after { clip-path: polygon(100% 0, 100% 0, 100% 100%, 135% 100%); }
.js .folie img { scale: 1.18; transition: scale 1.9s var(--ease) .2s; }
.js .folie.sichtbar img { scale: 1; }

/* ---------- Expertise (Paneele) ---------- */
.paneele { display: flex; gap: 14px; height: clamp(500px, 72vh, 660px); }
.paneel { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; border-radius: 26px; background: #111; border: 1px solid var(--linie); cursor: pointer; transition: flex-grow .9s var(--ease), border-color .5s; outline-offset: 4px; }
.paneel.aktiv { flex-grow: 3.3; border-color: rgba(242, 184, 75, .35); cursor: default; }
.paneel > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.14); filter: grayscale(.7) brightness(.5); transition: transform 1.4s var(--ease), filter .9s var(--ease); }
.paneel.aktiv > img { transform: scale(1); filter: none; }
.paneel:not(.aktiv):hover > img { filter: grayscale(.2) brightness(.7); }
.paneel-verlauf { position: absolute; inset: 0; background: linear-gradient(to top, rgba(6, 6, 8, .96) 0%, rgba(6, 6, 8, .55) 42%, rgba(6, 6, 8, .05) 100%); }
.paneel-zu { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 30px 0; transition: opacity .45s; }
.paneel-senkrecht { writing-mode: vertical-rl; transform: rotate(180deg); font-stretch: 120%; font-weight: 850; text-transform: uppercase; font-size: 1.45rem; letter-spacing: .02em; white-space: nowrap; }
.paneel-nr { font-size: .78rem; font-weight: 700; letter-spacing: .2em; color: var(--gold2); }
.paneel.aktiv .paneel-zu { opacity: 0; pointer-events: none; }
.paneel-auf { position: absolute; left: 0; bottom: 0; width: max(100%, 520px); max-width: 640px; padding: clamp(26px, 3.4vw, 44px); opacity: 0; transform: translateY(26px); transition: opacity .35s, transform .5s var(--ease); pointer-events: none; }
.paneel.aktiv .paneel-auf { opacity: 1; transform: none; transition: opacity .7s var(--ease) .35s, transform .9s var(--ease) .3s; pointer-events: auto; }
.paneel-icon { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; background: rgba(242, 184, 75, .12); border: 1px solid rgba(242, 184, 75, .35); margin: 14px 0 18px; }
.paneel-icon svg { width: 26px; height: 26px; fill: none; stroke: var(--gold2); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.paneel-auf h3 { font-stretch: 120%; font-weight: 850; text-transform: uppercase; font-size: clamp(1.7rem, 3vw, 2.6rem); line-height: 1; margin-bottom: 12px; }
.paneel-auf p { color: var(--text2); max-width: 42ch; margin-bottom: 14px; }

/* ---------- Konfigurator ---------- */
.konfig { background: linear-gradient(180deg, var(--schwarz), #0a0a0d 30%, #0a0a0d 70%, var(--schwarz)); }
.konfig-raster { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.konfig-buehne { position: relative; padding: clamp(40px, 5vw, 70px) clamp(8px, 3vw, 40px) 96px; border-radius: 32px; overflow: hidden; border: 1px solid var(--linie); background: radial-gradient(70% 60% at 50% 30%, #2a2418 0%, #121110 55%, #09090b 100%); }
.konfig-boden { position: absolute; left: -40%; right: -40%; bottom: -30%; height: 60%; background: repeating-conic-gradient(#1b1b1e 0 25%, #0c0c0e 0 50%) 0 0 / 70px 70px; transform: perspective(420px) rotateX(64deg); transform-origin: 50% 100%; -webkit-mask: linear-gradient(to top, rgba(0, 0, 0, .8), transparent 85%); mask: linear-gradient(to top, rgba(0, 0, 0, .8), transparent 85%); opacity: .7; }
.konfig-auto { position: relative; z-index: 2; width: 100%; aspect-ratio: 830 / 470; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.konfig-auto::after { content: ''; position: absolute; left: 6%; right: 4%; bottom: -3%; height: 14%; z-index: -1; background: radial-gradient(closest-side, rgba(0, 0, 0, .95), transparent); }
.konfig-auto img { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; -webkit-user-drag: none; }
.k-lack { position: absolute; inset: 0; isolation: isolate; -webkit-mask: url(../img/_neu/auto-lack.webp) center / 100% 100% no-repeat; mask: url(../img/_neu/auto-lack.webp) center / 100% 100% no-repeat; --glanz: .35; --kontrast: .94; --hell: 1; }
.k-lack[data-finish="glanz"] { --glanz: .95; --kontrast: 1.06; --hell: 1; }
.k-lack[data-finish="satin"] { --glanz: .32; --kontrast: .93; --hell: 1.02; }
.k-lack[data-finish="matt"] { --glanz: 0; --kontrast: .74; --hell: 1.1; }
.k-farbe { position: absolute; inset: 0; background: var(--farbe, #17171a); }
.k-farbe.chrom { background: linear-gradient(105deg, #6d4d17 0%, #f3cd6c 18%, #fff4cd 27%, #c28a2c 42%, #ffe08c 58%, #8a6220 74%, #f6cf6b 88%, #6d4d17 100%); background-size: 240% 100%; animation: schimmer 4s ease-in-out infinite alternate; }
.konfig-auto .k-schatten { mix-blend-mode: multiply; filter: contrast(var(--kontrast)) brightness(var(--hell)); transition: filter .6s; }
.konfig-auto .k-glanz { mix-blend-mode: screen; opacity: var(--glanz); transition: opacity .6s; }
.k-neu { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.k-alt.leer { display: none; }
.k-rakel { position: absolute; top: -9%; bottom: -9%; left: clamp(26px, var(--pos), calc(100% - 26px)); z-index: 4; width: 0; cursor: ew-resize; touch-action: none; outline: none; }
.k-rakel-linie { position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: linear-gradient(transparent, var(--gold2) 14%, #fff 50%, var(--gold2) 86%, transparent); box-shadow: 0 0 16px 2px rgba(255, 196, 90, .65); }
.k-rakel-griff { position: absolute; top: 50%; left: 0; width: 56px; height: 56px; transform: translate(-50%, -50%); border-radius: 17px; background: var(--verlauf-knopf); display: grid; place-items: center; box-shadow: 0 10px 30px -6px rgba(0, 0, 0, .7), 0 0 0 6px rgba(255, 207, 90, .16), inset 0 1px 0 rgba(255, 255, 255, .6); transition: transform .3s var(--ease), box-shadow .3s; }
.k-rakel-griff svg { width: 24px; height: 24px; fill: none; stroke: #140e03; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.k-rakel:hover .k-rakel-griff, .k-rakel:focus-visible .k-rakel-griff, .konfig-auto.zieht .k-rakel-griff { transform: translate(-50%, -50%) scale(1.08); box-shadow: 0 10px 30px -6px rgba(0, 0, 0, .7), 0 0 0 10px rgba(255, 207, 90, .22), inset 0 1px 0 rgba(255, 255, 255, .6); }
.konfig-anzeige { position: absolute; left: 0; right: 0; bottom: 26px; z-index: 3; text-align: center; font-stretch: 120%; font-weight: 850; text-transform: uppercase; font-size: 1.15rem; letter-spacing: .04em; }
.konfig-anzeige small { display: inline-block; margin-left: 8px; padding: 3px 10px; border-radius: 999px; background: rgba(242, 184, 75, .14); color: var(--gold2); font-size: .66rem; letter-spacing: .2em; vertical-align: middle; font-stretch: 100%; }
.steuer-titel { font-size: .72rem; letter-spacing: .26em; text-transform: uppercase; color: var(--text3); font-weight: 700; margin: 0 0 14px; }
.farbfelder { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 30px; }
.farbfeld { display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 14px 6px 12px; border-radius: 18px; background: var(--flaeche); border: 1px solid var(--linie); cursor: pointer; transition: border-color .3s, background .3s, transform .3s var(--ease); }
.farbfeld i { width: 38px; height: 38px; border-radius: 50%; background: var(--f); box-shadow: inset 0 -6px 10px rgba(0, 0, 0, .35), inset 0 4px 8px rgba(255, 255, 255, .25), 0 0 0 3px #0e0e12, 0 0 0 4px rgba(255, 255, 255, .12); transition: box-shadow .3s; }
.farbfeld span { font-size: .68rem; font-weight: 650; line-height: 1.2; text-align: center; color: var(--text2); }
.farbfeld:hover { transform: translateY(-3px); border-color: rgba(255, 255, 255, .2); }
.farbfeld.aktiv { border-color: var(--gold2); background: rgba(242, 184, 75, .08); }
.farbfeld.aktiv i { box-shadow: inset 0 -6px 10px rgba(0, 0, 0, .35), inset 0 4px 8px rgba(255, 255, 255, .25), 0 0 0 3px #0e0e12, 0 0 0 5px var(--gold2); }
.farbfeld.aktiv span { color: var(--text); }
.schalter3 { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); padding: 5px; border-radius: 999px; background: var(--flaeche); border: 1px solid var(--linie); margin-bottom: 28px; }
.schalter3 button { position: relative; z-index: 1; height: 46px; border: 0; background: none; cursor: pointer; font-size: .76rem; font-weight: 750; letter-spacing: .16em; text-transform: uppercase; color: var(--text2); transition: color .35s; border-radius: 999px; }
.schalter3 button.aktiv { color: #140e03; }
.schalter3-marke { position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc((100% - 10px) / 3); border-radius: 999px; background: var(--verlauf-knopf); transform: translateX(calc(var(--s, 1) * 100%)); transition: transform .5s var(--ease); }
.konfig-hinweis { margin-top: 16px; font-size: .82rem; color: var(--text3); }

/* ---------- Aufruf (CTA) ---------- */
.aufruf { position: relative; overflow: hidden; background: var(--cta-hg); color: var(--cta-text); padding: 46px 0; }
.band { position: relative; z-index: 2; overflow: hidden; padding: 14px 0; white-space: nowrap; }
.band-a { background: #060608; color: var(--gold2); transform: rotate(-2deg) scale(1.06); box-shadow: 0 16px 40px -18px rgba(0, 0, 0, .7); }
.band-b { background: var(--cta-text); color: var(--cta-hg); transform: rotate(1.5deg) scale(1.06); }
.band-gruppe { display: flex; align-items: center; gap: 26px; padding-right: 26px; }
.band span { font-stretch: 125%; font-weight: 900; text-transform: uppercase; font-size: clamp(1.25rem, 2.8vw, 2.4rem); letter-spacing: .01em; }
.band i { font-style: normal; font-size: 1rem; opacity: .7; }
.aufruf-innen { position: relative; z-index: 1; text-align: center; padding-block: clamp(56px, 9vw, 120px); }
.aufruf-titel { font-stretch: 118%; font-weight: 900; text-transform: uppercase; font-size: clamp(1.8rem, 5vw, 4.8rem); line-height: .96; letter-spacing: -.015em; max-width: 17ch; margin: 0 auto 38px; }
.aufruf-titel em { font-style: normal; color: transparent; -webkit-text-stroke: 1.6px var(--cta-text); }

/* ---------- Leistungen ---------- */
.leistungen-raster { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(40px, 6vw, 90px); align-items: start; }
.leistungen-kleber { position: sticky; top: 118px; }
.zaehler { display: flex; align-items: baseline; gap: 14px; margin: 18px 0 34px; font-stretch: 125%; font-weight: 900; line-height: .9; font-variant-numeric: tabular-nums; }
.zaehler-jetzt { display: inline-block; min-width: 2.1ch; font-size: clamp(4rem, 9vw, 8.6rem); background: var(--verlauf); -webkit-background-clip: text; background-clip: text; color: transparent; transition: transform .5s var(--ease), opacity .3s; }
.zaehler-jetzt.wechsel { transform: translateY(-14px); opacity: 0; transition: none; }
.zaehler-von { font-size: clamp(1.2rem, 2vw, 1.7rem); color: var(--text3); }
.leistungen-liste { display: grid; gap: 16px; counter-reset: l; }
.leistung { position: relative; overflow: hidden; display: grid; grid-template-columns: 70px 1fr; gap: 18px; padding: clamp(24px, 3vw, 36px); border-radius: 26px; background: var(--flaeche); border: 1px solid var(--linie); transition: border-color .5s, background-color .5s; }
.leistung.aktiv { border-color: rgba(242, 184, 75, .45); background: #121117; }
.leistung-nr { font-stretch: 125%; font-weight: 900; font-size: 1.6rem; color: var(--text3); transition: color .5s; line-height: 1.2; }
.leistung.aktiv .leistung-nr { color: var(--gold2); }
.leistung h3 { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; font-stretch: 112%; font-weight: 850; text-transform: uppercase; font-size: clamp(1.15rem, 1.9vw, 1.5rem); line-height: 1.15; margin-bottom: 14px; }
.leistung ul { display: grid; gap: 8px; margin-bottom: 10px; }
.leistung ul li { position: relative; padding-left: 28px; color: var(--text2); line-height: 1.55; }
.leistung ul li::before { content: ''; position: absolute; left: 0; top: .42em; width: 16px; height: 9px; border-left: 2px solid var(--gold2); border-bottom: 2px solid var(--gold2); transform: rotate(-45deg) scale(.8); transform-origin: left; }

/* Lichtfleck, der der Maus folgt */
[data-licht] { position: relative; }
[data-licht]::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 200, 90, .1), transparent 45%); opacity: 0; transition: opacity .4s; z-index: 0; }
[data-licht]:hover::before { opacity: 1; }
[data-licht] > * { position: relative; z-index: 1; }

/* ---------- Ablauf ---------- */
.ablauf-schiene { position: relative; --lueck: 28px; }
.ablauf-linie { position: absolute; top: 34px; left: 36px; width: calc(75% + .75 * var(--lueck)); height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.ablauf-linie i { position: absolute; inset: 0; background: var(--verlauf); transform-origin: left; transform: scaleX(var(--fortschritt)); }
.ablauf-schritte { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--lueck); }
.ablauf-schritte li { position: relative; }
.ablauf-punkt { position: relative; z-index: 1; width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 26px; background: #0e0e12; border: 1px solid var(--linie); font-stretch: 125%; font-weight: 900; font-size: 1.5rem; color: var(--text3); transition: background .6s, color .6s, box-shadow .6s, border-color .6s; }
.ablauf-schritte li.erreicht .ablauf-punkt { background: var(--verlauf-knopf); color: #140e03; border-color: transparent; box-shadow: 0 0 0 8px rgba(242, 184, 75, .12), 0 12px 40px -6px rgba(242, 184, 75, .45); }
.ablauf-schritte h3 { font-stretch: 118%; font-weight: 850; text-transform: uppercase; font-size: 1.35rem; margin-bottom: 8px; }
.ablauf-schritte p { color: var(--text2); font-size: .98rem; max-width: 30ch; }

/* ---------- Referenzen ---------- */
.insta-chip { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--linie); text-decoration: none; font-size: .8rem; font-weight: 650; letter-spacing: .08em; color: var(--text2); transition: border-color .3s, color .3s; }
.insta-chip svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.insta-chip:hover { color: var(--gold2); border-color: var(--gold2); }
.galerie { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-flow: dense; gap: 12px; }
.galerie-bild { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border: 0; padding: 0; border-radius: 18px; background: #111; cursor: zoom-in; }
.galerie-bild.gross { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.galerie-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease), filter .6s; }
.galerie-bild::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); transition: box-shadow .4s; pointer-events: none; }
.galerie-bild:hover img, .galerie-bild:focus-visible img { transform: scale(1.07); }
.galerie-bild:hover::after { box-shadow: inset 0 0 0 2px var(--gold2); }
.galerie-plus { position: absolute; right: 14px; bottom: 14px; width: 44px; height: 44px; border-radius: 50%; background: var(--verlauf-knopf); color: #140e03; display: grid; place-items: center; transform: scale(0) rotate(-90deg); transition: transform .5s var(--ease); }
.galerie-plus svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.galerie-bild:hover .galerie-plus, .galerie-bild:focus-visible .galerie-plus { transform: none; }
.galerie-bild.neu { animation: einblenden .9s var(--ease) both; animation-delay: calc(var(--k, 0) * 55ms); }
@keyframes einblenden { from { opacity: 0; transform: translateY(30px) scale(.96); } to { opacity: 1; transform: none; } }
.galerie-mehr { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 42px; }
.galerie-stand { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text3); font-variant-numeric: tabular-nums; }
.galerie-balken { width: 200px; height: 2px; background: rgba(255, 255, 255, .1); border-radius: 2px; overflow: hidden; margin-bottom: 8px; }
.galerie-balken i { display: block; height: 100%; background: var(--verlauf); transition: width .8s var(--ease); }

/* ---------- Unternehmen ---------- */
.unternehmen-raster { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(48px, 7vw, 110px); align-items: center; }
.unternehmen-bild { position: relative; }
.plakette { position: absolute; right: -26px; bottom: -26px; z-index: 3; width: 150px; height: 150px; border-radius: 34px; background: var(--verlauf-knopf); color: #140e03; display: flex; flex-direction: column; justify-content: center; align-items: center; transform: rotate(-6deg); box-shadow: 0 24px 50px -16px rgba(255, 170, 60, .55); animation: schweben 6s ease-in-out infinite; }
.plakette strong { font-stretch: 125%; font-weight: 900; font-size: 2.3rem; line-height: 1; text-transform: uppercase; }
.plakette span { font-size: .72rem; font-weight: 800; letter-spacing: .3em; text-transform: uppercase; margin-top: 6px; }
@keyframes schweben { 50% { translate: 0 -10px; } }
.weiterlesen { display: none; margin-bottom: 18px; }
.weiterlesen[aria-expanded="true"] svg { transform: rotate(180deg); }
.merkmale { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 30px; }
.merkmal { padding: 22px 24px; border-radius: 20px; background: var(--flaeche); border: 1px solid var(--linie); overflow: hidden; }
.merkmal h4 { font-size: .74rem; letter-spacing: .24em; text-transform: uppercase; color: var(--gold2); margin-bottom: 6px; }
.merkmal p { color: var(--text2); font-size: .95rem; }

/* ---------- Versprechen ---------- */
.versprechen { padding-top: 0; }
.versprechen-raster { display: grid; grid-template-columns: repeat(var(--spalten, 3), 1fr); gap: 16px; }
.versprechen-karte { overflow: hidden; padding: clamp(30px, 3.4vw, 46px); border-radius: 28px; background: linear-gradient(160deg, #121117, #0b0b0e); border: 1px solid var(--linie); transition: border-color .5s, transform .6s var(--ease); }
.versprechen-karte:hover { border-color: rgba(242, 184, 75, .35); transform: translateY(-6px); }
.versprechen-nr { position: absolute !important; right: 26px; top: 18px; font-stretch: 125%; font-weight: 900; font-size: 4.2rem; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .1); line-height: 1; }
.versprechen-icon { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; background: rgba(242, 184, 75, .1); border: 1px solid rgba(242, 184, 75, .3); margin-bottom: 26px; }
.versprechen-icon svg { width: 32px; height: 32px; margin: 0; color: var(--gold2); stroke: var(--gold2); fill: none; }
.versprechen-karte h3 { font-stretch: 118%; font-weight: 850; text-transform: uppercase; font-size: 1.55rem; margin-bottom: 10px; }
.versprechen-karte p { color: var(--text2); }
.js .versprechen-icon .zeichnen { stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.6s var(--ease) .4s; }
.js .versprechen-icon .zeichnen.fertig { stroke-dashoffset: 0; }

/* ---------- Kontakt ---------- */
.kontakt { background: radial-gradient(60% 50% at 80% 40%, rgba(242, 184, 75, .07), transparent 70%); }
.kontakt-raster { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(40px, 6vw, 90px); align-items: start; }
.kontakt-einleitung { color: var(--text2); font-size: 1.08rem; margin-bottom: 34px; max-width: 46ch; }
.kontakt-karten { display: grid; gap: 12px; }
.kontakt-karte { display: flex; align-items: center; gap: 18px; padding: 18px 22px; border-radius: 20px; background: var(--flaeche); border: 1px solid var(--linie); text-decoration: none; overflow: hidden; transition: border-color .4s, transform .5s var(--ease); }
.kontakt-karte:hover { border-color: rgba(242, 184, 75, .4); transform: translateX(6px); }
.kontakt-icon { flex: none; width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center; background: rgba(242, 184, 75, .1); border: 1px solid rgba(242, 184, 75, .3); }
.kontakt-icon svg { width: 22px; height: 22px; fill: none; stroke: var(--gold2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kontakt-wa .kontakt-icon { background: rgba(37, 211, 102, .12); border-color: rgba(37, 211, 102, .4); }
.kontakt-wa .kontakt-icon svg { color: #25d366; }
.kontakt-karte small { display: block; font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: var(--text3); font-weight: 700; margin-bottom: 2px; }
.kontakt-karte strong { display: block; font-weight: 600; font-size: 1.05rem; line-height: 1.4; }

.formular-karte { position: relative; overflow: hidden; padding: clamp(22px, 3.6vw, 44px); border-radius: 32px; background: linear-gradient(170deg, #131218 0%, #0c0c10 100%); border: 1px solid var(--linie); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .8); }
.formular-karte::before { content: ''; position: absolute; left: 10%; right: 10%; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--gold2), transparent); }
.anfrage-kopf { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 18px; }
.anfrage-titel { font-stretch: 118%; font-weight: 850; text-transform: uppercase; font-size: 1.2rem; }
.anfrage-schritt { font-size: .82rem; color: var(--text3); }
.anfrage-schritt b { color: var(--gold2); }
.anfrage-punkte { display: flex; gap: 8px; }
.anfrage-punkte li { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .14); transition: background .4s, transform .4s var(--ease); }
.anfrage-punkte li.aktiv { background: var(--gold2); transform: scale(1.25); }
.anfrage-punkte li.fertig { background: var(--gold3); }
.anfrage-balken { height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .08); overflow: hidden; margin-bottom: 30px; }
.anfrage-balken i { display: block; height: 100%; width: calc(var(--schritt, 1) / 3 * 100%); background: var(--verlauf); transition: width .7s var(--ease); }
.schritt { border: 0; min-width: 0; }
.schritt.rein { animation: schrittRein .6s var(--ease) both; }
.schritt.rein-zurueck { animation: schrittZurueck .6s var(--ease) both; }
@keyframes schrittRein { from { opacity: 0; transform: translateX(34px); } to { opacity: 1; transform: none; } }
@keyframes schrittZurueck { from { opacity: 0; transform: translateX(-34px); } to { opacity: 1; transform: none; } }
.schritt legend { font-stretch: 112%; font-weight: 800; font-size: clamp(1.35rem, 2.4vw, 1.75rem); line-height: 1.15; margin-bottom: 6px; padding: 0; }
.hilfe { color: var(--text3); font-size: .9rem; margin-bottom: 20px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.chip span { display: inline-flex; align-items: center; gap: 0; padding: 12px 18px; border-radius: 999px; background: #0a0a0d; border: 1px solid rgba(255, 255, 255, .13); font-size: .92rem; font-weight: 550; line-height: 1.25; transition: background .3s, border-color .3s, color .3s, gap .3s, transform .3s var(--ease); }
.chip svg { width: 0; height: 16px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; transition: width .3s var(--ease); flex: none; }
.chip:hover span { border-color: rgba(242, 184, 75, .5); }
.chip input:checked + span { background: var(--verlauf-knopf); color: #140e03; border-color: transparent; font-weight: 700; gap: 8px; }
.chip input:checked + span svg { width: 16px; }
.chip input:focus-visible + span { outline: 2px solid var(--gold2); outline-offset: 3px; }
.chips-radio .chip span { padding: 10px 16px; font-size: .88rem; }
.felder2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.feld { position: relative; display: block; margin-bottom: 12px; }
.felder2 .feld { margin-bottom: 0; }
.feld input, .feld textarea { width: 100%; padding: 27px 18px 11px; border-radius: 15px; background: #0a0a0d; border: 1px solid rgba(255, 255, 255, .13); font-size: 1rem; line-height: 1.4; outline: none; transition: border-color .3s, box-shadow .3s; -webkit-appearance: none; appearance: none; }
.feld textarea { resize: vertical; min-height: 120px; }
.feld > span { position: absolute; left: 19px; top: 19px; right: 12px; pointer-events: none; color: var(--text3); font-size: 1rem; line-height: 1.2; transition: top .25s var(--ease), font-size .25s var(--ease), color .25s, letter-spacing .25s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feld > span em { font-style: normal; opacity: .7; font-size: .85em; margin-left: 4px; }
.feld input:focus, .feld textarea:focus { border-color: var(--gold2); box-shadow: 0 0 0 4px rgba(242, 184, 75, .14); }
.feld input:focus + span, .feld input:not(:placeholder-shown) + span, .feld textarea:focus + span, .feld textarea:not(:placeholder-shown) + span { top: 9px; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold2); font-weight: 700; }
.feld input:focus + span em, .feld input:not(:placeholder-shown) + span em, .feld textarea:focus + span em, .feld textarea:not(:placeholder-shown) + span em { display: none; }
.feld.fehler input, .feld.fehler textarea { border-color: #ff7a6b; box-shadow: 0 0 0 4px rgba(255, 122, 107, .12); }
.feld-titel { font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--text3); font-weight: 700; margin: 22px 0 12px; }
.feld-titel em { font-style: normal; letter-spacing: .04em; text-transform: none; font-weight: 500; }
.feld-fehler { color: #ff8f80; font-size: .88rem; min-height: 0; margin-top: 10px; }
.feld-fehler:empty { margin: 0; }
.ablage { position: relative; display: flex; align-items: center; gap: 14px; padding: 20px; border-radius: 16px; border: 1.5px dashed rgba(255, 255, 255, .2); background: #0a0a0d; cursor: pointer; transition: border-color .3s, background .3s; color: var(--text2); font-size: .95rem; }
.ablage input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.ablage svg { width: 30px; height: 30px; flex: none; fill: none; stroke: var(--gold2); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ablage b { color: var(--gold2); }
.ablage:hover, .ablage.drueber { border-color: var(--gold2); background: rgba(242, 184, 75, .05); }
.vorschauen { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.vorschauen:empty { display: none; }
.vorschau { position: relative; width: 78px; height: 78px; border-radius: 14px; overflow: hidden; border: 1px solid var(--linie); animation: einblenden .5s var(--ease) both; }
.vorschau img { width: 100%; height: 100%; object-fit: cover; }
.vorschau button { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: #060608; color: #fff; cursor: pointer; display: grid; place-items: center; font-size: 15px; line-height: 1; }
.haken { position: relative; display: flex; gap: 14px; align-items: flex-start; margin-top: 18px; cursor: pointer; font-size: .9rem; color: var(--text2); line-height: 1.5; }
.haken input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.haken i { flex: none; width: 24px; height: 24px; border-radius: 8px; border: 1.5px solid rgba(255, 255, 255, .3); display: grid; place-items: center; transition: background .3s, border-color .3s; margin-top: 1px; }
.haken i svg { width: 15px; height: 15px; fill: none; stroke: #140e03; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .35s var(--ease) .05s; }
.haken input:checked + i { background: var(--verlauf-knopf); border-color: transparent; }
.haken input:checked + i svg { stroke-dashoffset: 0; }
.haken input:focus-visible + i { outline: 2px solid var(--gold2); outline-offset: 3px; }
.haken.fehler i { border-color: #ff7a6b; }
.haken a { color: var(--gold2); }
.anfrage-fuss { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 30px; }
.anfrage-fuss .knopf:last-child, .anfrage-fuss #anfrageWeiter, .anfrage-fuss #anfrageSenden { margin-left: auto; }
.anfrage-meldung { display: none; margin-top: 18px; padding: 14px 18px; border-radius: 14px; background: rgba(255, 122, 107, .1); border: 1px solid rgba(255, 122, 107, .35); color: #ffc2b9; font-size: .93rem; }
.anfrage-meldung.sichtbar { display: block; }
.anfrage-meldung a { color: #fff; }
.lade-kreis { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(20, 14, 3, .25); border-top-color: #140e03; animation: drehen .8s linear infinite; }
.danke { text-align: center; padding: clamp(20px, 4vw, 40px) 0; outline: none; animation: einblenden .8s var(--ease) both; }
.danke-haken { width: 92px; height: 92px; margin: 0 auto 26px; fill: none; stroke: var(--gold2); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.danke-haken circle { stroke-dasharray: 230; stroke-dashoffset: 230; animation: strich 1s var(--ease) .1s forwards; opacity: .45; }
.danke-haken path { stroke-dasharray: 60; stroke-dashoffset: 60; animation: strich .7s var(--ease) .7s forwards; stroke-width: 4; }
@keyframes strich { to { stroke-dashoffset: 0; } }
.danke h3 { font-stretch: 118%; font-weight: 900; text-transform: uppercase; font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin-bottom: 12px; }
.danke p { color: var(--text2); max-width: 44ch; margin: 0 auto 8px; }
.danke-klein { font-size: .88rem; color: var(--text3) !important; }
.danke-knoepfe { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }

/* ---------- Fuß ---------- */
.fuss { position: relative; overflow: hidden; padding-top: clamp(70px, 9vw, 120px); border-top: 1px solid var(--linie); background: #050506; }
.fuss-oben { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; margin-bottom: 60px; }
.fuss-logo img { height: 64px; width: auto; }
.fuss-spalten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; padding-bottom: 40px; }
.fuss h5 { font-size: .72rem; letter-spacing: .26em; text-transform: uppercase; color: var(--text); margin-bottom: 16px; }
.fuss ul { display: grid; gap: 8px; }
.fuss li, .fuss li a { color: var(--text3); text-decoration: none; font-size: .95rem; transition: color .3s; }
.fuss li a:hover { color: var(--gold2); }
.sozial { display: flex; gap: 10px; margin-top: 20px; }
.sozial a { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; border: 1px solid var(--linie); color: var(--text2); transition: color .3s, border-color .3s, transform .4s var(--ease); }
.sozial a:hover { color: var(--gold2); border-color: var(--gold2); transform: translateY(-3px); }
.sozial svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fuss-wort { text-align: center; white-space: nowrap; font-stretch: 125%; font-weight: 900; font-size: 12.6vw; line-height: .8; letter-spacing: -.02em; color: transparent; -webkit-text-stroke: 1px rgba(255, 207, 90, .25); background: linear-gradient(90deg, var(--gold2) 0%, #fff1c2 calc(var(--f, 0%) - 6%), var(--gold) var(--f, 0%), transparent calc(var(--f, 0%) + .01%)); -webkit-background-clip: text; background-clip: text; padding: 10px 0 2px; user-select: none; margin-bottom: -1.2vw; }
.fuss-unten { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-block: 22px 26px; border-top: 1px solid var(--linie); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text3); position: relative; z-index: 1; background: #050506; }
.fuss-unten a { color: var(--text); font-weight: 700; text-decoration: none; }
.fuss-unten a:hover { color: var(--gold2); }

/* ---------- Fenster ---------- */
.fenster { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px; }
.fenster-grund { position: absolute; inset: 0; background: rgba(3, 3, 4, .86); animation: grundRein .4s ease both; }
.fenster-karte { position: relative; width: min(980px, 100%); max-height: min(88vh, 900px); overflow: auto; overscroll-behavior: contain; border-radius: 30px; background: #0e0e12; border: 1px solid var(--linie); box-shadow: 0 50px 100px -30px rgba(0, 0, 0, .9); animation: karteRein .6s var(--ease) both; }
.fenster.zu .fenster-grund { animation: grundRaus .35s ease both; }
.fenster.zu .fenster-karte { animation: karteRaus .35s ease both; }
@keyframes grundRein { from { opacity: 0; } }
@keyframes grundRaus { to { opacity: 0; } }
@keyframes karteRein { from { opacity: 0; transform: translateY(30px) scale(.97); } }
@keyframes karteRaus { to { opacity: 0; transform: translateY(20px) scale(.98); } }
.fenster-zu { position: sticky; top: 16px; float: right; margin: 16px 16px 0 0; z-index: 5; width: 46px; height: 46px; border-radius: 14px; border: 1px solid var(--linie); background: #17171c; cursor: pointer; display: grid; place-items: center; transition: background .3s, transform .4s var(--ease); }
.fenster-zu:hover { background: var(--gold2); color: #000; transform: rotate(90deg); }
.fenster-zu svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.details { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); min-height: 520px; }
.details-bild { position: relative; min-height: 320px; }
.details-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.details-text { padding: clamp(28px, 4vw, 52px); padding-top: 70px; }
.details-text h3 { font-stretch: 120%; font-weight: 900; text-transform: uppercase; font-size: clamp(1.9rem, 3.4vw, 2.8rem); line-height: 1; margin-bottom: 16px; }
.details-kurz { color: var(--text) !important; font-size: 1.1rem; }
.details-text p { color: var(--text2); margin-bottom: 14px; }
.details-text .knopf { margin-top: 14px; }
.rechtstext { padding: clamp(26px, 4vw, 56px); padding-top: 34px; color: var(--text2); font-size: .98rem; line-height: 1.7; clear: both; }
.rechtstext h1, .rechtstext h2, .rechtstext h3 { color: var(--text); font-stretch: 110%; line-height: 1.2; }
.rechtstext h1 { font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 900; text-transform: uppercase; }
.rechtstext h2 { font-size: 1.2rem; }
.rechtstext a { color: var(--gold2); word-break: break-word; }
.rechtstext ul { list-style: disc; padding-left: 20px; }

/* ---------- Großansicht ---------- */
.lupe { position: fixed; inset: 0; z-index: 210; background: #040405; display: flex; flex-direction: column; animation: grundRein .35s ease both; touch-action: pan-y; }
.lupe-kopf { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; padding-top: calc(16px + env(safe-area-inset-top)); }
.lupe-zahl { font-size: .8rem; letter-spacing: .2em; color: var(--text2); font-variant-numeric: tabular-nums; }
.lupe-buehne { position: relative; flex: 1; display: grid; place-items: center; padding: 0 90px 30px; min-height: 0; }
.lupe-buehne img { max-width: 100%; max-height: calc(100vh - 140px); max-height: calc(100svh - 140px); object-fit: contain; border-radius: 14px; transition: opacity .35s, transform .45s var(--ease); user-select: none; -webkit-user-drag: none; }
.lupe-buehne img.laedt { opacity: 0; transform: scale(.98); }
.lupe-knopf { width: 52px; height: 52px; border-radius: 16px; border: 1px solid var(--linie); background: #121216; color: var(--text); cursor: pointer; display: grid; place-items: center; transition: background .3s, color .3s; }
.lupe-knopf:hover { background: var(--gold2); color: #000; }
.lupe-knopf svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.lupe-zurueck, .lupe-vor { position: absolute; top: 50%; transform: translateY(-50%); }
.lupe-zurueck { left: 20px; }
.lupe-vor { right: 20px; }
.lupe-balken { height: 3px; background: rgba(255, 255, 255, .08); }
.lupe-balken i { display: block; height: 100%; background: var(--verlauf); transition: width .5s var(--ease); }

/* ---------- Schwebende Knöpfe ---------- */
.schwebe-wa { position: fixed; left: 24px; bottom: 24px; z-index: 40; width: 58px; height: 58px; border-radius: 50%; background: #25d366; color: #fff; display: grid; place-items: center; box-shadow: 0 14px 30px -10px rgba(37, 211, 102, .6); transition: transform .5s var(--ease), opacity .4s; opacity: 0; transform: translateY(16px) scale(.9); pointer-events: none; }
.schwebe-wa.sichtbar { opacity: 1; transform: none; pointer-events: auto; }
.schwebe-wa::before { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #25d366; animation: waPuls 2.6s ease-out infinite; }
@keyframes waPuls { from { transform: scale(1); opacity: .7; } to { transform: scale(1.6); opacity: 0; } }
.schwebe-wa.sichtbar:hover { transform: scale(1.08); }
.schwebe-wa svg { width: 30px; height: 30px; }
.nach-oben { position: fixed; right: 24px; bottom: 24px; z-index: 40; width: 56px; height: 56px; border-radius: 50%; border: 0; background: #0e0e12; color: var(--text); cursor: pointer; display: grid; place-items: center; opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity .4s, transform .5s var(--ease), color .3s; }
.nach-oben.sichtbar { opacity: 1; transform: none; pointer-events: auto; }
.nach-oben:hover { color: var(--gold2); }
.nach-oben-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); fill: none; stroke-width: 2.5; }
.nach-oben-ring circle { stroke: rgba(255, 255, 255, .1); }
.nach-oben-ring .ring-wert { stroke: var(--gold2); stroke-dasharray: 150.8; stroke-dashoffset: calc(150.8 * (1 - var(--p, 0))); stroke-linecap: round; }
.nach-oben-pfeil { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.handy-leiste { display: none; }

/* ---------- Einwilligung ---------- */
.keks { position: fixed; left: 24px; bottom: 24px; z-index: 150; width: min(430px, calc(100vw - 32px)); padding: 24px; border-radius: 24px; background: #111116; border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .9); animation: karteRein .7s var(--ease) both; }
.keks-titel { font-stretch: 115%; font-weight: 850; text-transform: uppercase; font-size: 1.05rem; margin-bottom: 8px; }
.keks-text { color: var(--text2); font-size: .9rem; line-height: 1.55; margin-bottom: 16px; }
.keks-details dl { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 14px 0; border-top: 1px solid var(--linie); margin-bottom: 14px; font-size: .82rem; }
.keks-details dt { color: var(--gold2); font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; }
.keks-details dd { color: var(--text2); }
.keks-knoepfe { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.keks-links { display: flex; gap: 16px; margin-top: 14px; }
.keks-links a { color: var(--text3); font-size: .78rem; }
.keks-links:empty { display: none; }

/* ---------- Mauszeiger (nur Maus) ---------- */
.zeiger { display: none; }
@media (hover: hover) and (pointer: fine) {
    html.js.zeiger-an body, html.js.zeiger-an a, html.js.zeiger-an button, html.js.zeiger-an .paneel, html.js.zeiger-an label { cursor: none; }
    html.js.zeiger-an .feld input, html.js.zeiger-an .feld textarea { cursor: text; }
    html.js.zeiger-an .zeiger { display: block; }
    .zeiger { position: fixed; left: 0; top: 0; z-index: 300; pointer-events: none; }
    .zeiger-punkt { position: fixed; left: 0; top: 0; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--gold2); transform: translate3d(var(--zx), var(--zy), 0); }
    .zeiger-ring { position: fixed; left: 0; top: 0; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%; border: 1px solid rgba(255, 207, 90, .55); transform: translate3d(var(--rx), var(--ry), 0) scale(var(--rs, 1)); transition: width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease), background .35s, border-color .35s; display: grid; place-items: center; }
    .zeiger-ring span { font-size: .6rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #140e03; opacity: 0; transition: opacity .25s; }
    .zeiger.link .zeiger-ring { width: 58px; height: 58px; margin: -29px 0 0 -29px; background: rgba(255, 207, 90, .08); border-color: var(--gold2); }
    .zeiger.text .zeiger-ring { width: 86px; height: 86px; margin: -43px 0 0 -43px; background: var(--gold2); border-color: var(--gold2); }
    .zeiger.text .zeiger-ring span { opacity: 1; }
    .zeiger.text .zeiger-punkt, .zeiger.versteckt { opacity: 0; }
}

/* ---------- Einblenden beim Scrollen ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(36px); transition: opacity 1s var(--ease), transform 1.15s var(--ease); transition-delay: var(--d, 0s); }
.js [data-reveal].sichtbar { opacity: 1; transform: none; }
.js .folie[data-reveal] { opacity: 1; transform: none; }
.wort { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; padding-right: .02em; }
.wort > span { display: inline-block; }
.js [data-woerter] .wort > span { transform: translateY(108%); transition: transform 1.05s var(--ease); transition-delay: calc(var(--w, 0) * 55ms); }
.js [data-woerter].sichtbar .wort > span { transform: none; }

/* ---------- Tablet ---------- */
@media (max-width: 1099px) {
    .kopf-nav, .kopf-tel { display: none; }
    .kopf-rechts .knopf { display: none; }
    .menue-knopf { display: block; }
    .ueber-raster, .unternehmen-raster, .kontakt-raster, .leistungen-raster, .konfig-raster { grid-template-columns: minmax(0, 1fr); }
    .ueber-bild { max-width: 560px; }
    .unternehmen-bild { max-width: 520px; }
    .leistungen-kleber { position: static; }
    .zaehler { display: none; }
    .konfig-steuer { max-width: 640px; }
    .farbfelder { grid-template-columns: repeat(8, 1fr); }
    .kopfzeile { flex-direction: column; align-items: flex-start; gap: 22px; }
    .kopfzeile > div { width: 100%; }
    .kopfzeile-mitte { align-items: center; }
    .galerie { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Handy ---------- */
@media (max-width: 759px) {
    :root { --kopf-h: 70px; }
    body { font-size: 16px; }
    .kopf { background: #060608; border-color: var(--linie); }
    .kopf-innen, .kopf.fest .kopf-innen { height: 70px; }
    .kopf-logo img, .kopf.fest .kopf-logo img { height: 38px; }
    .menue-knopf { width: 46px; height: 46px; }

    .buehne { padding-top: calc(var(--kopf-h) + 22px); padding-bottom: 26px; min-height: auto; }
    .buehne-titel .zeile { white-space: normal; }
    .buehne-titel .zeile:first-child { font-size: 11.2vw; }
    .buehne-titel .zeile:last-child { font-size: 6vw; }
    .marke-chip { font-size: .6rem; letter-spacing: .16em; padding: 8px 14px; max-width: 100%; }
    .buehne-mitte { margin-top: 18px; padding: 0 8px; }
    .riesenwort { top: 40%; }
    .auto { width: 100%; margin-top: 28px; }
    .buehne-unten { flex-direction: column; align-items: stretch; text-align: center; gap: 22px; padding-top: 30px; }
    .buehne-text { max-width: none; font-size: .98rem; }
    .buehne-knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .buehne-knoepfe .knopf { padding: 0 14px; }
    .scroll-hinweis { display: none; }
    .decke { height: 46%; }
    .decke g { filter: drop-shadow(0 0 3px rgba(255, 255, 255, .85)); }

    .titel { font-size: clamp(2rem, 10vw, 3rem); }
    .titel-riesig { font-size: 15vw; }
    .kontur { -webkit-text-stroke-width: 1.2px; }
    .siegel { width: 112px; height: 112px; left: -8px; bottom: -40px; }
    .siegel text { font-size: 16px; }
    .bild-rahmen { border-radius: 22px; }

    .paneele { flex-direction: column; height: auto; gap: 12px; }
    .paneel, .paneel.aktiv { flex: none; height: 440px; cursor: default; border-color: var(--linie); }
    .paneel > img, .paneel.aktiv > img { transform: none; filter: none; }
    .paneel-zu { display: none; }
    .paneel-auf, .paneel.aktiv .paneel-auf { width: 100%; opacity: 1; transform: none; pointer-events: auto; padding: 24px; }
    .paneel-auf h3 { font-size: clamp(1.4rem, 7.2vw, 2.2rem); hyphens: auto; -webkit-hyphens: auto; }

    .konfig-buehne { padding: 34px 4px 84px; border-radius: 24px; }
    .farbfelder { grid-template-columns: repeat(4, 1fr); gap: 8px; }
    .farbfeld { padding: 12px 4px 10px; }
    .farbfeld i { width: 32px; height: 32px; }
    .farbfeld span { font-size: .62rem; }
    .k-rakel-griff { width: 48px; height: 48px; border-radius: 15px; }

    .aufruf { padding: 30px 0; }
    .aufruf-titel { font-stretch: 105%; }

    .leistung { grid-template-columns: 1fr; gap: 6px; border-radius: 22px; }
    .leistung-nr { font-size: 1.1rem; }

    .ablauf-linie { left: 27px; top: 0; bottom: 0; width: 4px; height: auto; }
    .ablauf-linie i { transform-origin: top; transform: scaleY(var(--fortschritt)); }
    .ablauf-schritte { grid-template-columns: 1fr; gap: 34px; }
    .ablauf-schritte li { padding-left: 84px; min-height: 56px; }
    .ablauf-punkt { position: absolute; left: 0; top: 0; width: 56px; height: 56px; font-size: 1.2rem; margin: 0; }

    .galerie { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .galerie-bild { border-radius: 14px; }
    .galerie-plus { display: none; }

    .plakette { width: 112px; height: 112px; right: -6px; bottom: -22px; border-radius: 26px; }
    .plakette strong { font-size: 1.7rem; }
    .fliesstext.lang:not(.offen) p:nth-child(n+3) { display: none; }
    .weiterlesen { display: inline-flex; }
    .merkmale { grid-template-columns: 1fr; }
    .versprechen-raster { grid-template-columns: 1fr; }

    .formular-karte { border-radius: 24px; padding: 22px 16px; }
    .anfrage-titel { font-size: 1.02rem; }
    .felder2 { grid-template-columns: 1fr; }
    .chip span { padding: 11px 15px; font-size: .88rem; }
    .anfrage-fuss .knopf { padding: 0 22px; }
    .kontakt-karte { padding: 16px; }

    .fuss { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
    .fuss-logo img { height: 48px; }
    .fuss-spalten { grid-template-columns: 1fr 1fr; gap: 30px; }
    .fuss-spalten > div:last-child { grid-column: 1 / -1; }
    .fuss-unten { flex-direction: column; gap: 6px; letter-spacing: .1em; }

    .fenster { padding: 0; align-items: flex-end; }
    .fenster-karte { max-height: 92vh; max-height: 92svh; border-radius: 26px 26px 0 0; animation-name: blattRein; }
    @keyframes blattRein { from { transform: translateY(100%); } }
    .details { grid-template-columns: 1fr; min-height: 0; }
    .details-bild { min-height: 260px; }
    .details-text { padding-top: 26px; }
    .fenster-zu { position: absolute; top: 12px; right: 12px; margin: 0; float: none; }

    .lupe-buehne { padding: 0 8px 70px; }
    .lupe-zurueck, .lupe-vor { top: auto; bottom: 20px; transform: none; }
    .lupe-zurueck { left: calc(50% - 64px); }
    .lupe-vor { right: calc(50% - 64px); }

    .schwebe-wa, .nach-oben { display: none; }
    .handy-leiste { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: #0b0b0e; border-top: 1px solid var(--linie); transform: translateY(110%); transition: transform .5s var(--ease); }
    .handy-leiste.sichtbar { transform: none; }
    .handy-leiste a { display: flex; align-items: center; justify-content: center; gap: 8px; height: 48px; border-radius: 14px; background: #16161b; text-decoration: none; font-size: .78rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
    .handy-leiste svg { width: 18px; height: 18px; fill: none; stroke: var(--gold2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .handy-leiste .handy-leiste-gold { background: var(--verlauf-knopf); color: #140e03; }
    .handy-leiste .handy-leiste-gold svg { stroke: #140e03; }
    .keks { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); width: auto; padding: 20px; }
}

@media (max-width: 380px) {
    .buehne-knoepfe { grid-template-columns: 1fr; }
    .farbfelder { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Weniger Bewegung gewünscht ---------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
    .js [data-reveal], .js [data-woerter] .wort > span, .js .riesenwort .bst, .js .buehne-titel .zeile, .js .auto-bild { opacity: 1 !important; transform: none !important; filter: none !important; }
    .js .folie::after { display: none; }
    .decke line { opacity: var(--o, 1) !important; }
}
.leistung-inhalt { min-width: 0; }