/* ============================================================
   MOZART BAU — mozart-bau.de  ·  2026
   Display: Bricolage Grotesque · Text: Manrope · Labels: Plex Mono
   ============================================================ */
@font-face{font-family:"Bricolage";src:url("../fonts/bricolage.woff2") format("woff2");font-weight:200 800;font-stretch:75% 100%;font-display:swap}
@font-face{font-family:"Manrope";src:url("../fonts/manrope.woff2") format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Plex Mono";src:url("../fonts/plex-mono-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Plex Mono";src:url("../fonts/plex-mono-500.woff2") format("woff2");font-weight:500;font-display:swap}

:root{
  --bg:#161513;          /* Asphalt */
  --bg-2:#1f1e1b;
  --bg-3:#292723;
  --line:rgba(255,255,255,.1);
  --line-2:rgba(255,255,255,.18);
  --fg:#f3efe6;          /* Elfenbein */
  --fg-2:#b8b2a6;
  --fg-3:#7f796e;
  --green:#84c449;       /* exakter Logo-Ton, gemessen aus dem Wappen */
  --green-2:#6aa634;
  --green-ink:#12200a;
  --gold:#b6e28d;        /* heller Logo-Ton */
  --stern:#6aa634;       /* Bewertungssterne im Markenton */
  --paper:#f3efe6;
  --paper-2:#e9e3d6;
  --ink:#12200a;
  --ink-2:#4a463f;
  --display:"Bricolage","Manrope",system-ui,sans-serif;
  --text:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Plex Mono",ui-monospace,Menlo,monospace;
  --gut:clamp(20px,4.5vw,72px);
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-2:cubic-bezier(.76,0,.24,1);
  --r:18px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:90px}
html.lenis{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--text);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
:focus-visible{outline:2px solid var(--green);outline-offset:4px;border-radius:4px}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:600;line-height:.98;letter-spacing:-.025em;text-wrap:balance}
p{margin:0 0 1em;text-wrap:pretty}
ul,ol{margin:0;padding:0;list-style:none}
.skip{position:absolute;left:-9999px;top:8px;z-index:200;background:var(--green);color:var(--ink);padding:10px 16px;border-radius:8px}
.skip:focus{left:8px}
.wrap{width:100%;max-width:1440px;margin:0 auto;padding-inline:var(--gut)}
.mono{font-family:var(--text);font-size:13.5px;font-weight:600}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
::selection{background:var(--green);color:var(--ink)}


/* ============================================================
   FARBFELDER — jeder Abschnitt setzt die Farbtoken neu, alle
   Bausteine darin folgen automatisch.
   ============================================================ */
.feld{background:var(--bg);color:var(--fg)}
.feld-kalk{
  --bg:#efe9dd;--bg-2:#e5ddcc;--bg-3:#d9cfba;
  --line:rgba(26,24,22,.16);--line-2:rgba(26,24,22,.3);
  --fg:#1a1816;--fg-2:#4d4840;--fg-3:#615b50;
  --green:#3f661b;--green-2:#2f4d14;--green-ink:#ffffff;
  --ink:#ffffff;--gold:#3f661b;
}

.feld-gruen{
  --bg:#325214;--bg-2:#3d6219;--bg-3:#49731f;
  --line:rgba(255,255,255,.22);--line-2:rgba(255,255,255,.4);
  --fg:#f2f7ec;--fg-2:#c9dcb4;--fg-3:#b3cc9a;
  --green:#a8d977;--green-2:#93cd5b;--green-ink:#1b2c0c;
  --ink:#1b2c0c;--gold:#a8d977;
}
.feld-logo{
  --bg:#84c449;--bg-2:#78b83e;--bg-3:#6aa634;
  --line:rgba(16,32,8,.26);--line-2:rgba(16,32,8,.46);
  --fg:#12200a;--fg-2:#1e3510;--fg-3:#2b4718;
  --green:#12200a;--green-2:#000000;--green-ink:#eef7e2;
  --ink:#eef7e2;--gold:#12200a;
}
.feld-kalk ::selection,.feld-logo ::selection{background:var(--fg);color:var(--bg)}

/* ---- Körnung / Atmosphäre ---- */
.korn{pointer-events:none;position:fixed;inset:-50%;width:200%;height:200%;z-index:120;opacity:.045;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:korn 1.2s steps(6) infinite}
@keyframes korn{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-4%)}60%{transform:translate(-4%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}

/* ---- Cursor ---- */
.cursor{position:fixed;left:0;top:0;z-index:150;pointer-events:none;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--green);mix-blend-mode:difference;transition:transform .25s var(--ease),opacity .3s}
.cursor-ring{position:fixed;left:0;top:0;z-index:150;pointer-events:none;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;border:1px solid rgba(255,255,255,.55);mix-blend-mode:difference;transition:transform .4s var(--ease),opacity .3s,border-color .3s;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:9px;letter-spacing:.1em;color:#fff}
.cursor-ring span{opacity:0;transition:opacity .2s}
body.cur-link .cursor{transform:scale(.4)}
body.cur-link .cursor-ring{transform:scale(1.7);border-color:rgba(255,255,255,.9)}
body.cur-drag .cursor{opacity:0}
body.cur-drag .cursor-ring{transform:scale(2.2);background:rgba(132,196,73,.95);border-color:transparent;mix-blend-mode:normal}
body.cur-drag .cursor-ring span{opacity:1;color:var(--ink)}
@media (hover:none),(pointer:coarse){.cursor,.cursor-ring{display:none}}
body.hat-cursor{cursor:none}
body.hat-cursor a,body.hat-cursor button{cursor:none}

/* ---- Preloader ---- */
.lader{position:fixed;inset:0;z-index:300;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;transition:transform 1s var(--ease-2);will-change:transform}
.lader.weg{transform:translateY(-100%)}
.lader img{width:72px;opacity:.9}
.lader .zahl{font-family:var(--display);font-size:clamp(64px,10vw,140px);font-weight:300;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums;color:var(--fg)}
.lader .zahl small{font-size:.35em;color:var(--fg-3);margin-left:.2em}
.lader .balken{width:min(320px,60vw);height:1px;background:var(--line);position:relative;overflow:hidden}
.lader .balken i{position:absolute;inset:0;background:var(--green);transform-origin:left;transform:scaleX(0)}
html.geladen .lader{pointer-events:none}

/* ---- Navigation ---- */
.kopf{position:fixed;top:0;left:0;right:0;z-index:100;padding:18px 0;transition:padding .4s var(--ease),background .4s,backdrop-filter .4s}
.kopf::before{content:"";position:absolute;left:0;right:0;top:0;bottom:-46px;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(12,16,10,.78),rgba(12,16,10,.42) 55%,transparent);transition:opacity .4s}
.kopf.klein::before{opacity:0}
.kopf .wrap{display:flex;align-items:center;gap:20px}
.kopf.klein{padding:10px 0;background:rgba(16,15,14,.86);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);border-bottom:1px solid var(--line)}
.marke{display:flex;align-items:center;gap:12px;color:var(--fg)}
.marke img{width:42px;height:auto;transition:transform .5s var(--ease)}
.marke:hover img{transform:rotate(-8deg)}
.marke b{font-family:var(--display);font-size:20px;font-weight:700;letter-spacing:-.01em;text-transform:uppercase;line-height:1}
.marke small{display:block;font-family:var(--text);font-size:11.5px;font-weight:600;color:var(--fg-3);margin-top:5px}
.navi{display:flex;gap:6px;margin-left:auto}
.navi a{padding:10px 14px;border-radius:999px;font-size:14.5px;font-weight:500;color:var(--fg-2);transition:color .2s,background .2s}
.navi a:hover,.navi a[aria-current="page"]{color:var(--fg);background:rgba(255,255,255,.07)}
.kopf-cta{display:inline-flex;align-items:center;gap:10px;background:var(--fg);color:var(--ink);padding:0 18px;height:44px;border-radius:999px;font-weight:600;font-size:14.5px;transition:transform .3s var(--ease),background .2s}
.kopf-cta:hover{transform:translateY(-2px);background:var(--green)}
.kopf-cta svg{width:16px;height:16px}
.burger{display:none;margin-left:auto;width:48px;height:48px;border-radius:50%;border:1px solid var(--line-2);align-items:center;justify-content:center;flex-direction:column;gap:5px}
.burger i{display:block;width:18px;height:1.5px;background:var(--fg);transition:transform .4s var(--ease),opacity .3s}
body.menue-offen .burger i:first-child{transform:translateY(3.25px) rotate(45deg)}
body.menue-offen .burger i:last-child{transform:translateY(-3.25px) rotate(-45deg)}
@media (max-width:1000px){.navi,.kopf-cta{display:none}.burger{display:flex}}

/* Vollbild-Menü */
.vollmenue{position:fixed;inset:0;z-index:95;background:var(--bg);clip-path:inset(0 0 100% 0);transition:clip-path .8s var(--ease-2);display:flex;align-items:center;overflow:auto}
body.menue-offen .vollmenue{clip-path:inset(0 0 0 0)}
.vollmenue .wrap{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding-top:100px;padding-bottom:60px;width:100%}
.vollmenue ol{counter-reset:m}
.vollmenue ol a{display:flex;align-items:baseline;gap:18px;font-family:var(--display);font-size:clamp(38px,7vw,84px);font-weight:500;letter-spacing:-.03em;line-height:1.05;padding:8px 0;color:var(--fg);transform:translateY(40px);opacity:0;transition:transform .7s var(--ease),opacity .5s,color .2s}
.vollmenue ol a::before{counter-increment:m;content:"0" counter(m);font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--green)}
.vollmenue ol a:hover{color:var(--green)}
body.menue-offen .vollmenue ol a{transform:none;opacity:1}
body.menue-offen .vollmenue ol li:nth-child(1) a{transition-delay:.25s}
body.menue-offen .vollmenue ol li:nth-child(2) a{transition-delay:.31s}
body.menue-offen .vollmenue ol li:nth-child(3) a{transition-delay:.37s}
body.menue-offen .vollmenue ol li:nth-child(4) a{transition-delay:.43s}
body.menue-offen .vollmenue ol li:nth-child(5) a{transition-delay:.49s}
body.menue-offen .vollmenue ol li:nth-child(6) a{transition-delay:.55s}
.vollmenue aside{align-self:end;color:var(--fg-2);font-size:15px}
.vollmenue aside .gross{font-family:var(--display);font-size:clamp(28px,3.4vw,44px);color:var(--fg);letter-spacing:-.02em;display:block;margin:6px 0 20px}
@media (max-width:800px){.vollmenue .wrap{grid-template-columns:1fr}}

/* ---- Buttons ---- */
.knopf{position:relative;display:inline-flex;align-items:center;gap:14px;height:58px;padding:0 8px 0 28px;border-radius:999px;background:var(--green);color:var(--ink);font-weight:700;font-size:16px;overflow:hidden;isolation:isolate;transition:transform .35s var(--ease),box-shadow .35s}
.knopf .ico{width:42px;height:42px;border-radius:50%;background:var(--green-ink);color:var(--green);display:grid;place-items:center;transition:transform .35s var(--ease)}
.knopf .ico svg{width:16px;height:16px}
.knopf::after{content:"";position:absolute;inset:0;background:var(--fg);z-index:-1;transform:translateY(100%);border-radius:inherit;transition:transform .45s var(--ease)}
.knopf:hover{transform:translateY(-3px);box-shadow:0 18px 38px -18px color-mix(in srgb,var(--green) 65%,transparent)}
.knopf:hover::after{transform:none}
.knopf:hover .ico{transform:rotate(-45deg)}
.knopf.geist{background:transparent;color:var(--fg);border:1px solid var(--line-2)}
.knopf.geist .ico{background:color-mix(in srgb,var(--fg) 10%,transparent);color:var(--fg)}
.knopf.geist::after{background:color-mix(in srgb,var(--fg) 10%,transparent)}
.knopf.geist:hover{box-shadow:none}
.knopf.dunkel{background:var(--fg);color:var(--bg)}
.knopf.dunkel .ico{background:var(--green);color:var(--green-ink)}
.knopf.dunkel::after{background:var(--green-2)}
.link{display:inline-flex;align-items:center;gap:10px;font-weight:600;color:var(--fg);position:relative;padding-bottom:4px}
.link::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform-origin:right;transition:transform .4s var(--ease)}
.link:hover::after{transform:scaleX(0);transform-origin:left}
.link svg{width:14px;height:14px;transition:transform .3s var(--ease)}
.link:hover svg{transform:translate(4px,-4px)}

/* ---- Hero ---- */
.held{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;isolation:isolate}
.held-bild{position:absolute;inset:0;z-index:-2}
.held-bild img{width:100%;height:100%;object-fit:cover;object-position:58% 42%;transform:scale(1.18);will-change:transform;animation:kamera 14s var(--ease) forwards}
@keyframes kamera{to{transform:scale(1.02)}}
.held-schleier{position:absolute;inset:0;z-index:-1;background:
  linear-gradient(180deg,rgba(22,21,19,.6) 0%,rgba(22,21,19,.15) 30%,rgba(22,21,19,.45) 60%,rgba(22,21,19,.98) 100%),
  linear-gradient(90deg,rgba(22,21,19,.55) 0%,rgba(22,21,19,.1) 60%),
  radial-gradient(60% 50% at 82% 24%,rgba(132,196,73,.16),transparent 70%)}
/* ---- Wappen als Hologramm im Startbild ---- */
.held-wappen{position:absolute;z-index:-1;right:-4vw;top:7%;width:min(44vw,540px);aspect-ratio:1;pointer-events:none}
.held-wappen::before{content:"";position:absolute;inset:-20%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(10,15,7,.5),rgba(10,15,7,.24) 54%,transparent 76%)}
.held-wappen img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.held-wappen .aura{opacity:.2;mix-blend-mode:screen;animation:wappen-atmen 10s ease-in-out infinite}
.held-wappen .kontur{opacity:.09;mix-blend-mode:screen;animation:wappen-schweben 15s ease-in-out infinite}
@keyframes wappen-atmen{0%,100%{opacity:.16;transform:scale(1)}50%{opacity:.24;transform:scale(1.03)}}
@keyframes wappen-schweben{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-12px) rotate(1.8deg)}}
@media (max-width:900px){.held-bild img{object-position:66% 42%}.held-wappen{right:-26vw;top:1%;width:min(74vw,360px)}.held-wappen .aura{opacity:.14}.held-wappen .kontur{opacity:.06}.held-wappen::before{inset:-14%}}
@media (prefers-reduced-motion:reduce){.held-wappen .aura,.held-wappen .kontur{animation:none}}

.held-inhalt{position:relative;padding-top:132px;padding-bottom:40px}
.held .oben{display:inline-flex;gap:12px;align-items:center;color:var(--fg);margin-bottom:24px;background:rgba(22,21,19,.55);backdrop-filter:blur(10px);border:1px solid var(--line-2);padding:9px 16px 9px 12px;border-radius:999px;font-size:14px;font-weight:600}
.held .oben i{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(132,196,73,.6);animation:puls 2.4s infinite}
@keyframes puls{0%{box-shadow:0 0 0 0 rgba(132,196,73,.55)}70%{box-shadow:0 0 0 14px rgba(132,196,73,0)}100%{box-shadow:0 0 0 0 rgba(132,196,73,0)}}
.held h1{font-size:clamp(54px,10.4vw,168px);font-weight:500;letter-spacing:-.045em;line-height:.9;max-width:12ch}
.held h1 .zeile{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.held h1 .zeile span{display:block;transform:translateY(110%);will-change:transform}
.held h1 em{font-style:normal;color:var(--green);font-weight:300}
.held-unten{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:36px;align-items:end;margin-top:30px}
.held-unten p{font-size:clamp(17px,1.5vw,21px);color:var(--fg-2);max-width:520px;margin:0 0 30px}
.held-aktion{display:flex;gap:14px;flex-wrap:wrap}
.held-fakten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-left:1px solid var(--line-2)}
.held-fakten div{padding:6px 22px 4px}
.held-fakten b{display:block;font-family:var(--display);font-size:clamp(34px,3.6vw,52px);font-weight:400;letter-spacing:-.03em;line-height:1;margin-bottom:8px}
.held-fakten b sup{font-size:.45em;color:var(--green);vertical-align:top;margin-left:2px}
.held-fakten span{font-size:13px;color:var(--fg-3);line-height:1.4;display:block}
.scrollen{position:absolute;right:var(--gut);top:calc(50% + 40px);display:flex;flex-direction:column;align-items:center;gap:12px;color:var(--fg-3)}
.scrollen i{width:1px;height:70px;background:linear-gradient(var(--fg-3),transparent);position:relative;overflow:hidden}
.scrollen i::after{content:"";position:absolute;inset:0;background:var(--green);transform:translateY(-100%);animation:runter 2s var(--ease) infinite}
@keyframes runter{to{transform:translateY(100%)}}
.scrollen .mono{writing-mode:vertical-rl;font-size:10px}
@media (max-width:900px){
  .held-inhalt{padding-top:130px}
  .held-unten{grid-template-columns:1fr;gap:28px}
  .held-fakten{border-left:0;border-top:1px solid var(--line-2);padding-top:18px}
  .held-fakten div{padding:0 12px 0 0}
  .scrollen{display:none}
}

/* ---- Laufband ---- */
.band{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0;overflow:hidden;background:var(--bg)}
.band .spur{display:flex;width:max-content;gap:0;animation:lauf 40s linear infinite}
.band span{display:flex;align-items:center;gap:26px;padding-right:26px;font-family:var(--display);font-size:clamp(20px,2.4vw,34px);font-weight:400;letter-spacing:-.02em;color:var(--fg-2);white-space:nowrap}
.band span i{width:8px;height:8px;border-radius:50%;background:var(--green);flex-shrink:0}
@keyframes lauf{to{transform:translateX(-50%)}}

/* ---- Abschnitte ---- */
.abschnitt{padding:clamp(56px,7vw,104px) 0;position:relative}
.abschnitt.eng{padding:clamp(44px,5vw,72px) 0}
.kopfzeile{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--gut);align-items:end;margin-bottom:clamp(28px,3.4vw,52px)}
.kopfzeile .mono{color:var(--green);display:flex;align-items:center;gap:14px}
.kopfzeile .mono::before{content:"";width:10px;height:10px;border-radius:50%;background:currentColor}
.kopfzeile h2{font-size:clamp(40px,6vw,92px);font-weight:500;letter-spacing:-.04em}
.kopfzeile p{max-width:560px;color:var(--fg-2);font-size:clamp(17px,1.4vw,20px);margin:22px 0 0}
@media (max-width:800px){.kopfzeile{grid-template-columns:1fr;gap:16px}}

/* Text-Reveal (Wörter) */
.w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em}
.w>span{display:inline-block;transform:translateY(110%)}

/* ---- Vorher / Nachher ---- */
.vergleich{position:relative;aspect-ratio:16/9;max-height:86vh;overflow:hidden;border-radius:var(--r);user-select:none;touch-action:pan-y;background:var(--bg-2);--x:50%;cursor:ew-resize}
.vergleich img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.vergleich .nach{clip-path:inset(0 0 0 var(--x))}
.vergleich .griff{position:absolute;top:0;bottom:0;left:var(--x);width:0;pointer-events:none}
.vergleich .griff::before{content:"";position:absolute;top:0;bottom:0;left:-1px;width:2px;background:var(--fg);box-shadow:0 0 30px rgba(0,0,0,.6)}
.vergleich .griff i{position:absolute;top:50%;left:0;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:var(--green);display:grid;place-items:center;color:var(--ink);box-shadow:0 10px 30px rgba(0,0,0,.5)}
.vergleich .griff i svg{width:22px;height:22px}
.vergleich .tag{position:absolute;bottom:16px;font-family:var(--text);font-size:12.5px;font-weight:600;background:rgba(22,21,19,.72);backdrop-filter:blur(8px);padding:8px 12px;border-radius:999px;border:1px solid var(--line-2)}
.vergleich .tag.l{left:16px}.vergleich .tag.r{right:16px;background:var(--green);color:var(--ink);border-color:transparent}
.vergleich input[type=range]{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:ew-resize}
.vergleich-hinweis{margin-top:18px;color:var(--fg-3);font-size:14px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
@media (max-width:700px){.vergleich{aspect-ratio:4/5}}

/* ---- Story (gepinnt) ---- */
.story{position:relative}
.story-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gut);align-items:start}
.story-bilder{position:sticky;top:90px;height:calc(100vh - 120px);min-height:520px;border-radius:var(--r);overflow:hidden;background:var(--bg-2)}
.story-bilder figure{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .8s var(--ease)}
.story-bilder figure.an{opacity:1}
.story-bilder img{width:100%;height:100%;object-fit:cover;transform:scale(1.1);transition:transform 1.6s var(--ease)}
.story-bilder figure.an img{transform:scale(1)}
.story-bilder figcaption{position:absolute;left:22px;bottom:22px;right:22px;display:flex;justify-content:space-between;align-items:end;gap:20px;font-family:var(--text);font-size:13px;font-weight:600;color:var(--fg-2);text-shadow:0 2px 12px rgba(0,0,0,.8)}
.story-bilder .nummer{position:absolute;right:22px;top:16px;font-family:var(--display);font-size:clamp(90px,12vw,180px);font-weight:200;letter-spacing:-.05em;line-height:1;color:rgba(255,255,255,.14);mix-blend-mode:screen}
.story-texte>div{min-height:56vh;display:flex;flex-direction:column;justify-content:center;padding:22px 0;opacity:.28;transition:opacity .5s}
.story-texte>div.an{opacity:1}
.story-texte .mono{color:var(--green);margin-bottom:22px}
.story-texte h3{font-size:clamp(36px,4.6vw,68px);font-weight:500;letter-spacing:-.035em;margin-bottom:22px}
.story-texte p{color:var(--fg-2);font-size:clamp(16px,1.3vw,19px);max-width:480px}
@media (max-width:900px){
  .story-grid{grid-template-columns:1fr}
  .story-bilder{position:relative;top:0;height:auto;aspect-ratio:4/3;min-height:0}
  .story-bilder figure{position:relative;display:none}
  .story-bilder figure.an{display:block}
  .story-texte>div{min-height:0;opacity:1;padding:26px 0}
}

/* ---- Leistungen: 3D-Karten ---- */
.karten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;perspective:1600px}
.karte{position:relative;display:block;aspect-ratio:3/4.2;border-radius:var(--r);overflow:hidden;background:var(--bg-2);transform-style:preserve-3d;transition:transform .6s var(--ease),box-shadow .6s;will-change:transform;isolation:isolate}
.karte img,.karte .plan{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease),filter .6s;z-index:-2}
.karte::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(22,21,19,.05) 30%,rgba(22,21,19,.92) 100%)}
.karte .glanz{position:absolute;inset:0;z-index:1;background:radial-gradient(500px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.16),transparent 45%);opacity:0;transition:opacity .4s;pointer-events:none}
.karte:hover .glanz{opacity:1}
.karte:hover img{transform:scale(1.06)}
.karte .inhalt{position:absolute;inset:0;padding:28px;display:flex;flex-direction:column;justify-content:flex-end;transform:translateZ(40px)}
.karte .oben{position:absolute;top:24px;left:28px;right:28px;display:flex;justify-content:space-between;align-items:center;color:var(--fg-2)}
.karte .oben i{width:44px;height:44px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;background:rgba(22,21,19,.4);backdrop-filter:blur(6px);transition:background .3s,transform .5s var(--ease)}
.karte .oben i svg{width:16px;height:16px}
.karte:hover .oben i{background:var(--green);color:var(--ink);transform:rotate(-45deg)}
.karte h3{font-size:clamp(30px,2.6vw,40px);font-weight:500;letter-spacing:-.03em;margin-bottom:12px}
.karte p{color:var(--fg-2);font-size:15.5px;margin:0;max-height:0;opacity:0;overflow:hidden;transition:max-height .6s var(--ease),opacity .5s .1s,margin .5s}
.karte:hover p{max-height:120px;opacity:1;margin-bottom:4px}
.karte .liste{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.karte .liste span{font-size:12px;padding:5px 10px;border-radius:999px;border:1px solid var(--line-2);color:var(--fg-2);background:rgba(22,21,19,.4)}
.einzeln{margin-top:26px;display:flex;gap:10px 22px;flex-wrap:wrap;align-items:center;color:var(--fg-3);font-size:14.5px}
.einzeln a{color:var(--fg-2);border-bottom:1px solid var(--line-2);padding-bottom:2px;transition:color .2s,border-color .2s}
.einzeln a:hover{color:var(--green);border-color:var(--green)}
@media (max-width:900px){.karten{grid-template-columns:1fr}.karte{aspect-ratio:4/3}.karte p{max-height:none;opacity:1}}

/* ---- Zahlen ---- */
.zahlen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px}
.zahl{padding:40px 28px 36px;background:var(--bg-2);position:relative;overflow:hidden;border-radius:6px}
.zahl:first-child{border-radius:var(--r) 6px 6px var(--r)}.zahl:last-child{border-radius:6px var(--r) var(--r) 6px}
.zahl::before{content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--green);transform:scaleX(0);transform-origin:left;transition:transform 1.2s var(--ease)}
.zahl.an::before{transform:none}
.zahl b{display:block;font-family:var(--display);font-size:clamp(56px,6.5vw,104px);font-weight:300;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums}
.zahl b small{font-size:.4em;color:var(--green);font-weight:400;margin-left:4px}
.zahl>span{display:block;margin-top:12px;color:var(--fg-2);font-size:15px;max-width:22ch}
@media (max-width:900px){.zahlen{grid-template-columns:1fr 1fr}.zahl{border-radius:6px!important}}

/* ---- Referenzen: horizontal ---- */
.galerie-wrap{overflow:hidden}
.galerie{display:flex;gap:18px;padding-inline:var(--gut);width:max-content;will-change:transform}
.projekt{position:relative;flex:0 0 auto;width:min(78vw,520px);aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;background:var(--bg-2);display:block;isolation:isolate}
.projekt.breit{width:min(90vw,760px);aspect-ratio:4/3}
.projekt img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.projekt:hover img{transform:scale(1.05)}
.projekt::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(22,21,19,.9));z-index:1}
.projekt .text{position:absolute;left:24px;right:24px;bottom:22px;z-index:2}
.projekt .text .mono{color:var(--green);display:block;margin-bottom:10px}
.projekt .text h3{font-size:clamp(22px,2.2vw,30px);font-weight:500;letter-spacing:-.025em}
.projekt .text p{color:var(--fg-2);font-size:14px;margin:8px 0 0}
.projekt .nr{position:absolute;top:18px;left:22px;z-index:2;font-size:13px;font-weight:600;color:var(--fg);background:rgba(22,21,19,.5);padding:6px 10px;border-radius:999px;backdrop-filter:blur(6px)}
.projekt.ende{background:var(--green);color:var(--ink);display:flex;align-items:center;justify-content:center;text-align:center;padding:40px;width:min(70vw,420px)}
.projekt.ende::after{display:none}
.projekt.ende h3{font-size:clamp(30px,3vw,44px);letter-spacing:-.03em;margin-bottom:18px}
.projekt.ende .ico{width:64px;height:64px;border-radius:50%;background:var(--ink);color:var(--green);display:grid;place-items:center;margin:0 auto;transition:transform .5s var(--ease)}
.projekt.ende:hover .ico{transform:rotate(-45deg) scale(1.1)}
.galerie-fortschritt{margin:28px var(--gut) 0;height:1px;background:var(--line);position:relative}
.galerie-fortschritt i{position:absolute;left:0;top:-1px;height:3px;width:20%;background:var(--green);border-radius:3px}
@media (max-width:900px){
  .galerie-wrap{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .galerie-wrap::-webkit-scrollbar{display:none}
  .galerie{will-change:auto}
  .projekt{scroll-snap-align:start}
}

/* ---- Ablauf ---- */
.ablauf{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;position:relative}
.ablauf-linie{position:absolute;left:0;right:0;top:26px;height:1px;background:var(--line)}
.ablauf-linie i{position:absolute;inset:0;background:var(--green);transform-origin:left;transform:scaleX(0)}
.schritt{position:relative;padding-top:60px}
.schritt .punkt{position:absolute;top:18px;left:0;width:17px;height:17px;border-radius:50%;background:var(--bg);border:1px solid var(--line-2);display:grid;place-items:center}
.schritt .punkt::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--green);transform:scale(0);transition:transform .5s var(--ease)}
.schritt.an .punkt::after{transform:none}
.schritt .mono{color:var(--fg-3);display:block;margin-bottom:12px}
.schritt h3{font-size:clamp(26px,2.4vw,34px);font-weight:500;letter-spacing:-.03em;margin-bottom:12px}
.schritt p{color:var(--fg-2);font-size:15.5px;margin:0}
@media (max-width:900px){.ablauf{grid-template-columns:1fr 1fr}.ablauf-linie{display:none}.schritt{padding-top:0;padding-left:34px}.schritt .punkt{top:8px}}
@media (max-width:560px){.ablauf{grid-template-columns:1fr}}

/* ---- Verwaltungen ---- */
.verw{border-radius:clamp(24px,4vw,56px) clamp(24px,4vw,56px) 0 0}
.verw-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gut);align-items:start}
.verw-liste li{display:grid;grid-template-columns:76px 1fr;gap:16px;align-items:baseline;padding:22px 0;border-top:1px solid var(--line);font-size:19px;font-weight:500}
.verw-liste li:last-child{border-bottom:1px solid var(--line)}
.verw-liste li b{font-family:var(--display);font-size:30px;font-weight:400;letter-spacing:-.03em;color:var(--green)}
.verw figure{margin:0;border-radius:var(--r);overflow:hidden;position:sticky;top:100px}
.verw figure img{width:100%;aspect-ratio:4/5;object-fit:cover}
.verw .knopf{margin-top:34px}
@media (max-width:900px){.verw-grid{grid-template-columns:1fr}.verw figure{position:relative;top:0}.verw figure img{aspect-ratio:4/3}}

/* ---- Preise ---- */

.preis-reihe{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.preis{background:var(--paper);border-radius:var(--r);padding:30px 30px 34px;transition:transform .5s var(--ease),box-shadow .5s;position:relative;overflow:hidden}
.preis:hover{transform:translateY(-6px);box-shadow:0 30px 60px -30px rgba(22,21,19,.35)}
.preis .mono{color:var(--ink-2)}
.preis h3{font-size:30px;font-weight:500;letter-spacing:-.03em;margin:14px 0 10px}
.preis p{color:var(--ink-2);font-size:15px;min-height:3.2em}
.preis .betrag{font-family:var(--display);font-size:clamp(48px,4.6vw,66px);font-weight:300;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums}
.preis .betrag small{font-family:var(--text);font-size:14px;color:var(--ink-2);letter-spacing:0;margin-left:8px;font-weight:500}
.preise-fuss{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:center;margin-top:36px}
.preise-fuss p{margin:0;color:var(--ink-2);font-size:14px;max-width:560px}
@media (max-width:900px){.preis-reihe{grid-template-columns:1fr}}

/* ---- Karte ---- */
.gebiet{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gut);align-items:center}
.gebiet h2{font-size:clamp(40px,5.6vw,84px);font-weight:500;letter-spacing:-.04em}
.gebiet p{color:var(--fg-2);font-size:19px;margin:22px 0 26px;max-width:460px}
.orte{display:flex;flex-wrap:wrap;gap:8px}
.orte li{border:1px solid var(--line-2);padding:8px 14px;border-radius:999px;font-size:14px;color:var(--fg-2);transition:border-color .2s,color .2s}
.orte li:hover{border-color:var(--green);color:var(--fg)}
.karte-svg svg{width:100%;height:auto;display:block}
@media (max-width:900px){.gebiet{grid-template-columns:1fr}}

/* ---- Kontakt ---- */
.kontakt{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--gut)}
.kontakt h2{font-size:clamp(52px,8.6vw,140px);font-weight:500;letter-spacing:-.05em;line-height:.9}
.kontakt h2 em{font-style:normal;color:var(--green);font-weight:300}
.kontakt .lead{color:var(--fg-2);font-size:19px;margin:22px 0 30px;max-width:440px}
.tel-gross{display:inline-flex;align-items:center;gap:18px;font-family:var(--display);font-size:clamp(32px,4vw,56px);font-weight:400;letter-spacing:-.03em;color:var(--fg);transition:color .2s}
.tel-gross:hover{color:var(--green)}
.tel-gross .ico{width:56px;height:56px;border-radius:50%;background:var(--green);color:var(--ink);display:grid;place-items:center;flex-shrink:0}
.tel-gross .ico svg{width:22px;height:22px}
.daten{margin-top:30px;display:grid;grid-template-columns:1fr 1fr;gap:26px;font-size:15.5px;color:var(--fg-2)}
.daten .mono{color:var(--fg-3);display:block;margin-bottom:8px;font-size:11px}
.daten p{margin:0}
.daten a:hover{color:var(--green)}
.formular{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);padding:clamp(24px,3.4vw,44px);position:relative;overflow:hidden}
.formular::before{content:"";position:absolute;inset:-40% -20% auto;height:60%;background:radial-gradient(closest-side,rgba(132,196,73,.14),transparent);pointer-events:none}
.formular h3{font-size:30px;font-weight:500;letter-spacing:-.03em;margin-bottom:8px;position:relative}
.formular .hinweis-oben{font-size:14.5px;color:var(--fg-3);margin-bottom:26px}
.felder{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.feld{position:relative}
.feld.voll{grid-column:1/-1}
.feld label{position:absolute;left:16px;top:16px;font-size:14.5px;color:var(--fg-3);pointer-events:none;transition:all .25s var(--ease);background:transparent}
.feld input,.feld select,.feld textarea{width:100%;font:16px var(--text);color:var(--fg);background:rgba(255,255,255,.04);border:1px solid var(--line-2);border-radius:12px;padding:26px 16px 10px;min-height:60px;transition:border-color .2s,background .2s}
.feld textarea{min-height:140px;resize:vertical}
.feld select{appearance:none;padding-top:24px}
.feld input:focus,.feld select:focus,.feld textarea:focus{outline:none;border-color:var(--green);background:rgba(255,255,255,.06)}
.feld input:focus~label,.feld input:not(:placeholder-shown)~label,.feld textarea:focus~label,.feld textarea:not(:placeholder-shown)~label,.feld select~label{top:9px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--green)}
.feld input::placeholder,.feld textarea::placeholder{color:transparent}
.feld .pfeil{position:absolute;right:16px;top:50%;width:12px;height:12px;margin-top:-6px;border-right:1.5px solid var(--fg-2);border-bottom:1.5px solid var(--fg-2);transform:rotate(45deg) translateY(-3px);pointer-events:none}
.formular .knopf{margin-top:22px}
.hinweis{font-size:13px;color:var(--fg-3);margin:16px 0 0;line-height:1.5}
.hinweis a{color:var(--fg-2);text-decoration:underline;text-underline-offset:3px}
#formstatus{font-size:14px;color:var(--green);margin-top:12px}
@media (max-width:900px){.kontakt{grid-template-columns:1fr}.felder{grid-template-columns:1fr}.daten{grid-template-columns:1fr}}

/* ---- Footer ---- */
.fuss{position:relative;padding:56px 0 26px;border-top:1px solid var(--line);overflow:hidden}
.fuss .riese{font-family:var(--display);font-size:clamp(70px,17vw,300px);font-weight:600;letter-spacing:-.06em;line-height:.8;text-transform:uppercase;color:transparent;-webkit-text-stroke:1px color-mix(in srgb,var(--fg) 16%,transparent);white-space:nowrap;text-align:center;margin:34px 0 -14px;user-select:none}
.fuss-grid{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:var(--gut);font-size:15px;color:var(--fg-2)}
.fuss h2{font-family:var(--text);font-size:13px;font-weight:600;color:var(--fg-3);font-weight:500;margin-bottom:18px;letter-spacing:.14em}
.fuss li{margin-bottom:10px}
.fuss a:hover{color:var(--green)}
.fuss-basis{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:26px;padding-top:24px;border-top:1px solid var(--line);font-size:13px;color:var(--fg-3)}
@media (max-width:900px){.fuss-grid{grid-template-columns:1fr 1fr}.fuss-grid>div:first-child{grid-column:1/-1}}

/* ---- Mobile Leiste ---- */
.leiste{display:none}
@media (max-width:700px){
  .leiste{display:grid;grid-template-columns:1fr 1fr;position:fixed;left:12px;right:12px;bottom:12px;z-index:90;background:rgba(20,19,17,.85);backdrop-filter:blur(16px);border:1px solid var(--line-2);border-radius:999px;padding:6px;gap:6px}
  .leiste a{display:flex;align-items:center;justify-content:center;gap:10px;min-height:48px;border-radius:999px;font-weight:600;font-size:15px;color:var(--fg)}
  .leiste a+a{background:var(--green);color:var(--ink)}
  .leiste svg{width:18px;height:18px}
  body{padding-bottom:80px}
}

/* ---- Unterseiten ---- */
.seitenkopf{position:relative;padding:136px 0 clamp(40px,5vw,72px);overflow:hidden;isolation:isolate;min-height:50vh;display:flex;align-items:flex-end}
.seitenkopf .hintergrund{position:absolute;inset:0;z-index:-2}
.seitenkopf .hintergrund img{width:100%;height:100%;object-fit:cover;transform:scale(1.12);animation:kamera 12s var(--ease) forwards;opacity:.55}
.seitenkopf::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(22,21,19,.7),rgba(22,21,19,.3) 40%,rgba(22,21,19,.98))}
.pfad{display:flex;gap:12px;flex-wrap:wrap;color:var(--fg-3);margin-bottom:28px}
.pfad a:hover{color:var(--fg)}
.seitenkopf h1{font-size:clamp(48px,8.4vw,132px);font-weight:500;letter-spacing:-.045em;line-height:.92;max-width:14ch}
.seitenkopf h1 em{font-style:normal;color:var(--green);font-weight:300}
.seitenkopf .lead{font-size:clamp(17px,1.5vw,21px);color:var(--fg-2);max-width:620px;margin:22px 0 0}
.seitenkopf .held-aktion{margin-top:34px}
.seitenkopf.klein{min-height:0;padding-top:124px}

.gewerk{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gut);padding:clamp(40px,5vw,72px) 0;border-top:1px solid var(--line);align-items:start}
.gewerk:first-of-type{border-top:0}
.gewerk .nr{font-family:var(--display);font-size:clamp(56px,7vw,110px);font-weight:200;letter-spacing:-.05em;line-height:.9;color:var(--fg-3);display:block;margin-bottom:18px}
.gewerk h2{font-size:clamp(36px,4.6vw,68px);font-weight:500;letter-spacing:-.035em;margin-bottom:20px}
.gewerk .lead{font-size:18px;color:var(--fg-2)}
.gewerk figure{margin:0;border-radius:var(--r);overflow:hidden;position:sticky;top:100px}
.gewerk figure img,.gewerk figure .plan{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
.gewerk figcaption{position:absolute;left:18px;bottom:18px;font-family:var(--text);font-size:13px;font-weight:600;color:var(--fg-2);background:rgba(22,21,19,.6);backdrop-filter:blur(8px);padding:8px 12px;border-radius:999px}
.punkte{margin-top:26px;border-top:1px solid var(--line)}
.punkte li{padding:13px 0 13px 30px;border-bottom:1px solid var(--line);position:relative;color:var(--fg);font-size:16px}
.punkte li::before{content:"";position:absolute;left:0;top:23px;width:14px;height:1px;background:var(--green)}
.notiz{margin-top:26px;padding:22px 24px;border-radius:14px;background:var(--bg-2);border-left:2px solid var(--green);font-size:15.5px;color:var(--fg-2)}
.notiz strong{color:var(--fg)}
.notiz p:last-child{margin:0}
.faq{margin-top:34px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:20px 48px 20px 0;font-weight:600;font-size:17.5px;position:relative;transition:color .2s}
.faq summary:hover{color:var(--green)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:14px;height:14px;margin-top:-7px;background:linear-gradient(currentColor,currentColor) center/14px 1.5px no-repeat,linear-gradient(currentColor,currentColor) center/1.5px 14px no-repeat;transition:transform .35s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 48px 22px 0;color:var(--fg-2);margin:0;max-width:720px}
.faq details p a{color:var(--fg);text-decoration:underline;text-underline-offset:3px}
@media (max-width:900px){.gewerk{grid-template-columns:1fr}.gewerk figure{position:relative;top:0}.gewerk figure img{aspect-ratio:4/3}}

.kacheln{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.kachel{padding:30px;border-radius:var(--r);background:var(--bg-2);border:1px solid var(--line);transition:border-color .3s,transform .5s var(--ease)}
.kachel:hover{border-color:var(--line-2);transform:translateY(-4px)}
.kachel .mono{color:var(--green)}
.kachel h3{font-size:28px;font-weight:500;letter-spacing:-.03em;margin:14px 0 10px}
.kachel p{color:var(--fg-2);margin:0;font-size:15.5px}
@media (max-width:700px){.kacheln{grid-template-columns:1fr}}
.zweispaltig{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:var(--gut);align-items:start}
.zweispaltig h2{font-size:clamp(36px,5vw,72px);font-weight:500;letter-spacing:-.04em}
.zweispaltig .text{font-size:19px;color:var(--fg-2)}
@media (max-width:900px){.zweispaltig{grid-template-columns:1fr}}
.bezug{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gut);align-items:center}
.bezug figure{margin:0;border-radius:var(--r);overflow:hidden}
.bezug img{width:100%;aspect-ratio:5/4;object-fit:cover;display:block}
.bezug .plan{width:100%;height:auto;display:block;background:var(--bg-3)}
.bezug figcaption{font-size:13.5px;color:var(--fg-3);margin-top:12px;line-height:1.45}
.bezug h2{font-size:clamp(34px,4.2vw,60px);font-weight:500;letter-spacing:-.035em;margin:16px 0 20px}
.bezug p{color:var(--fg-2);font-size:18px}
@media (max-width:900px){.bezug{grid-template-columns:1fr}}

/* Referenzen-Seite */
.ref{padding:clamp(40px,5vw,72px) 0;border-top:1px solid var(--line)}
.ref-kopf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:var(--gut);margin-bottom:28px}
.ref-kopf .mono{color:var(--green);display:block;margin-bottom:14px}
.ref-kopf h2{font-size:clamp(34px,4.4vw,62px);font-weight:500;letter-spacing:-.035em}
.ref-kopf .text{font-size:17.5px;color:var(--fg-2)}
.ref-kopf .text strong{color:var(--fg)}
.eck{display:grid;grid-template-columns:150px 1fr;margin-top:26px;font-size:15px;border-top:1px solid var(--line)}
.eck dt,.eck dd{margin:0;padding:12px 0;border-bottom:1px solid var(--line)}
.eck dt{font-family:var(--text);font-size:13px;font-weight:600;color:var(--fg-3);padding-top:15px}
.eck dd{color:var(--fg)}
.raster{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.raster figure{margin:0;border-radius:14px;overflow:hidden;background:var(--bg-2);position:relative}
.raster img{width:100%;aspect-ratio:3/4;object-fit:cover;transition:transform 1.2s var(--ease)}
.raster figure:hover img{transform:scale(1.05)}
.raster figure.breit{grid-column:span 2}
.raster figure.breit img{aspect-ratio:auto;height:100%}
.raster figcaption{position:absolute;left:0;right:0;bottom:0;padding:40px 16px 14px;font-size:13px;color:var(--fg-2);background:linear-gradient(transparent,rgba(22,21,19,.9));line-height:1.4}
@media (max-width:900px){.ref-kopf{grid-template-columns:1fr}.raster{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.raster{grid-template-columns:1fr}.raster figure.breit{grid-column:auto}}

/* Preiskatalog */
.katalog-kopf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gut);align-items:end;margin-bottom:30px}
.suche{position:relative}
.suche input{width:100%;font:18px var(--text);color:var(--fg);padding:20px 22px 20px 56px;border:1px solid var(--line-2);background:var(--bg-2);border-radius:999px;min-height:64px}
.suche input:focus{outline:none;border-color:var(--green)}
.suche svg{position:absolute;left:22px;top:50%;width:20px;height:20px;margin-top:-10px;color:var(--fg-3)}
#anzahl{font-family:var(--text);font-size:13px;font-weight:600;color:var(--fg-3);margin:14px 0 0 22px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips a{font-size:13.5px;border:1px solid var(--line-2);padding:7px 13px;border-radius:999px;color:var(--fg-2);transition:all .2s}
.chips a:hover{border-color:var(--green);color:var(--fg)}
.gruppe{margin-top:48px}
.gruppe h2{font-size:clamp(28px,3vw,42px);font-weight:500;letter-spacing:-.03em;display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding-bottom:16px;border-bottom:1px solid var(--line-2)}
.gruppe h2 span{font-family:var(--text);font-size:13px;font-weight:600;color:var(--fg-3);font-weight:500}
.zeile{display:grid;grid-template-columns:minmax(0,1fr) 180px;gap:24px;padding:20px 0;border-bottom:1px solid var(--line);transition:background .2s}
.zeile:hover{background:linear-gradient(90deg,transparent,rgba(255,255,255,.025),transparent)}
.zeile h3{font-family:var(--text);font-size:18px;font-weight:600;letter-spacing:-.01em;margin-bottom:6px;line-height:1.3}
.zeile p{color:var(--fg-2);font-size:14.5px;margin:0 0 6px;max-width:760px}
.zeile small{font-size:12.5px;color:var(--fg-3)}
.wert{text-align:right}
.wert strong{display:block;font-family:var(--display);font-size:28px;font-weight:400;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.1}
.wert span{display:block;font-size:12px;color:var(--fg-3)}
.wert small{display:block;margin-top:4px;color:var(--fg-3)}
.leer{padding:40px 0;color:var(--fg-2);display:none}
.bedingungen{font-size:15px;color:var(--fg-2);max-width:820px;border-left:2px solid var(--green);padding-left:18px}
.bedingungen strong{color:var(--fg)}
@media (max-width:760px){.katalog-kopf{grid-template-columns:1fr}.zeile{grid-template-columns:1fr;gap:8px}.wert{text-align:left;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}.wert strong{display:inline}.wert span,.wert small{display:inline;margin:0}}

/* Ansprechpartner */
.person{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:var(--gut);align-items:center}
.person .portrait{border-radius:var(--r);background:var(--bg-2);aspect-ratio:4/5;display:grid;place-items:center;padding:14%;border:1px solid var(--line);position:relative;overflow:hidden}
.person .portrait::before{content:"";position:absolute;inset:auto -30% -40%;height:80%;background:radial-gradient(closest-side,rgba(132,196,73,.18),transparent)}
.person .portrait img{width:100%;position:relative}
.person .mono{color:var(--green);display:block;margin-bottom:16px}
.person h2{font-size:clamp(40px,5.4vw,80px);font-weight:500;letter-spacing:-.04em;margin-bottom:18px}
.person p{color:var(--fg-2);font-size:18px;max-width:520px}
.person .tel{display:block;font-family:var(--display);font-size:clamp(28px,3vw,42px);font-weight:400;letter-spacing:-.03em;margin-top:6px;transition:color .2s}
.person .tel:hover{color:var(--green)}
.person .mail{color:var(--fg-2);text-decoration:underline;text-underline-offset:4px}
.person .mail:hover{color:var(--green)}
.info-liste{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:40px}
.info-liste div{padding:22px;border-radius:14px;background:var(--bg-2);border:1px solid var(--line)}
.info-liste .mono{color:var(--fg-3);display:block;margin-bottom:8px}
.info-liste p{margin:0;font-size:15.5px;color:var(--fg)}
@media (max-width:900px){.person{grid-template-columns:1fr}.person .portrait{max-width:360px}}
@media (max-width:560px){.info-liste{grid-template-columns:1fr}}

/* Rechtstexte */
.recht{max-width:780px;color:var(--fg-2)}
.recht h2{font-size:28px;font-weight:500;letter-spacing:-.02em;margin:44px 0 12px;color:var(--fg)}
.recht h3{font-family:var(--text);font-size:19px;font-weight:600;margin:28px 0 8px;color:var(--fg)}
.recht a{color:var(--fg);text-decoration:underline;text-underline-offset:3px}
.recht ul{padding-left:20px;list-style:disc;margin-bottom:1em}

/* Reveal-Helfer */
.auf{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.auf.da{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
  .auf{opacity:1;transform:none}.held h1 .zeile span,.w>span{transform:none}.korn{display:none}
}

/* ---- Stimmen ---- */
.stimmen-kopf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--gut);align-items:end;margin-bottom:30px}
.stimmen-kopf .gross{font-family:var(--display);font-size:clamp(64px,9vw,150px);font-weight:300;letter-spacing:-.05em;line-height:.9}
.stimmen-kopf .gross small{display:block;font-family:var(--text);font-size:16px;font-weight:500;letter-spacing:0;color:var(--fg-2);margin-top:14px;max-width:26ch}
.stimmen-kopf h2{font-size:clamp(36px,5vw,72px);font-weight:500;letter-spacing:-.04em}
.stimmen-kopf p{color:var(--fg-2);max-width:560px;margin:18px 0 0}
.stimmen{overflow:hidden;margin-inline:calc(var(--gut)*-1);padding-inline:var(--gut);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.stimmen .spur{display:flex;gap:16px;width:max-content;animation:lauf 70s linear infinite}
.stimme{width:min(80vw,400px);flex:0 0 auto;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);padding:28px 28px 26px;display:flex;flex-direction:column;gap:18px;transition:border-color .3s,transform .5s var(--ease)}
.stimme:hover{border-color:var(--line-2);transform:translateY(-4px)}
.stimme .zitat{font-family:var(--display);font-size:22px;font-weight:400;letter-spacing:-.015em;line-height:1.3;color:var(--fg);margin:0;flex-grow:1}
.stimme .zitat::before{content:"„"}.stimme .zitat::after{content:"“"}
.stimme .wer{display:flex;justify-content:space-between;gap:14px;align-items:end;border-top:1px solid var(--line);padding-top:16px;font-size:14px;color:var(--fg-2)}
.stimme .wer b{display:block;color:var(--fg);font-weight:600}
.stimme .wer span{color:var(--fg-3);font-size:13px;text-align:right}
.stimmen-fuss{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center;margin-top:28px;color:var(--fg-3);font-size:14px}
@media (max-width:800px){.stimmen-kopf{grid-template-columns:1fr;gap:24px}}

/* Vergleichs-Galerie */
.vergleiche{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.vergleiche .vergleich{aspect-ratio:4/3;max-height:none}
.vergleich .tag.t{top:16px;left:16px;bottom:auto;background:rgba(22,21,19,.7)}
.vergleich-nav{display:none}
.vergleich-nav button{width:52px;height:52px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;color:var(--fg);transition:background .2s,border-color .2s}
.vergleich-nav button:hover{background:var(--green);color:var(--ink);border-color:var(--green)}
.vergleich-nav button svg{width:18px;height:18px}
.vergleich-nav .zurueck svg{transform:rotate(180deg)}
.punkte-nav{display:flex;gap:8px}
.punkte-nav i{width:8px;height:8px;border-radius:50%;background:var(--line-2);transition:background .2s,transform .2s}
.punkte-nav i.an{background:var(--green);transform:scale(1.3)}
@media (max-width:820px){.vergleiche{grid-template-columns:1fr;gap:12px}.vergleiche .vergleich{aspect-ratio:4/3}}

/* ---- Bewertungs-Leiste (direkt unter dem Hero) ---- */
.bewertband{background:var(--bg);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.bewertband .wrap{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(20px,3vw,48px);align-items:center;padding-block:clamp(20px,2.6vw,34px)}
.bewertband .note{display:flex;align-items:baseline;gap:12px}
.bewertband .note b{font-family:var(--display);font-size:clamp(40px,4.4vw,64px);font-weight:300;letter-spacing:-.04em;line-height:1}
.bewertband .note span{color:var(--fg-3);font-size:14px}
.bewertband .mitte{min-width:0}
.bewertband .mitte strong{display:block;font-family:var(--display);font-size:clamp(19px,1.8vw,26px);font-weight:500;letter-spacing:-.02em}
.bewertband .mitte span{color:var(--fg-2);font-size:14.5px}
.bewertband .rechts{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:flex-end}
.sterne{display:inline-flex;gap:3px;color:var(--stern);vertical-align:middle}
.sterne[hidden]{display:none}
.sterne svg{width:20px;height:20px}
.sterne .leer{color:color-mix(in srgb,var(--fg) 26%,transparent)}
.sterne.gross svg{width:30px;height:30px}
@media (max-width:900px){
  .bewertband .wrap{grid-template-columns:1fr;gap:16px}
  .bewertband .rechts{justify-content:flex-start}
}

/* Klickbare Sterne */
.sternwahl{display:inline-flex;gap:4px}
.sternwahl button{width:46px;height:46px;display:grid;place-items:center;border-radius:12px;color:color-mix(in srgb,var(--fg) 30%,transparent);transition:color .15s,background .15s,transform .15s}
.sternwahl button svg{width:30px;height:30px}
.sternwahl button:hover{background:color-mix(in srgb,var(--fg) 8%,transparent);color:var(--stern);transform:translateY(-2px)}
.sternwahl button.an{color:var(--stern)}
.sternwahl.klein button{width:38px;height:38px}
.sternwahl.klein button svg{width:24px;height:24px}

/* Bewertungsformular */
.bewertform{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);padding:clamp(22px,3vw,38px);margin-top:26px}
.bewertform h3{font-size:clamp(24px,2.4vw,32px);font-weight:500;letter-spacing:-.03em;margin-bottom:6px}
.bewertform .unter{color:var(--fg-2);font-size:15px;margin-bottom:20px}
.bewertform .zeile{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:18px}
.bewertform .zeile em{font-style:normal;color:var(--fg-3);font-size:14.5px}
.bewertform .felder{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.bewertform .voll{grid-column:1/-1}
.bewertform input,.bewertform textarea{width:100%;font:16px var(--text);color:var(--fg);background:rgba(255,255,255,.04);border:1px solid var(--line-2);border-radius:12px;padding:14px 15px;min-height:52px}
.bewertform textarea{min-height:110px;resize:vertical}
.bewertform input:focus,.bewertform textarea:focus{outline:none;border-color:var(--green)}
.bewertform input::placeholder,.bewertform textarea::placeholder{color:var(--fg-3)}
.bewertform .fallgrube{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.bewertform .knopf{margin-top:18px}
.bewertform .rueck{margin:14px 0 0;font-size:15px;min-height:1.6em}
.bewertform .rueck.gut{color:var(--green)}
.bewertform .rueck.schlecht{color:var(--fg);font-weight:700}
.bewertform .klein{font-size:13px;color:var(--fg-3);margin-top:12px;line-height:1.5}
.bewertform .klein a{color:var(--fg-2);text-decoration:underline;text-underline-offset:3px}
@media (max-width:700px){.bewertform .felder{grid-template-columns:1fr}}

.stimme .sterne{margin-bottom:2px}