/* ============================================================
   RAUMFABRIK — site.css
   System-Font-Stack (DSGVO-konform, kein externes Webfont-CDN)
   Wenn Source Serif 4 / Open Sans selbst gehostet werden:
   - WOFF2-Dateien nach /assets/fonts/
   - @font-face hier vorne ergänzen
   - Stack-Variablen --f / --s anpassen
============================================================ */

:root{
  --dk:#3a3836; --dk2:#4a4745;
  --cr:#EBE7E4; --cr2:#DDD9D5;
  --tx:#2e2c2a; --tx2:#4a4644;
  --txl:rgba(255,255,255,.92); --txl2:rgba(255,255,255,.65);
  --bd:rgba(46,44,42,.12); --gl:#665a49; --tp:#98897A;
  --ok:#3e6e4a; --warn:#a35a2a;
  --f:'Source Serif 4', Georgia, 'Times New Roman', serif;
  --s:'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --maxw:1280px; --gutter:32px;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--s);color:var(--tx);background:var(--cr);
  -webkit-font-smoothing:antialiased;line-height:1.65;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button{font:inherit;cursor:pointer;border:none;background:none}

/* Skip-Link für Tastatur-/Screenreader-Nutzer */
.skip-link{position:absolute;left:-9999px;top:0;background:#000;color:#fff;padding:12px 18px;z-index:1000;font-weight:600}
.skip-link:focus{left:0}

:focus-visible{outline:2px solid var(--gl);outline-offset:3px}

/* ===== NAV (doppelt so hoch wie zuvor — 144px statt 72px) ===== */
.nav{position:sticky;top:0;z-index:100;background:rgba(235,231,228,.95);backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--bd);height:144px}
/* Nav-Bar nutzt die volle Bildschirmbreite — Logo ganz außen links, CTA ganz außen rechts */
.nav-inner{width:100%;max-width:none;margin:0;height:100%;
  padding-inline:var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:24px}
.nav-logo{display:flex;align-items:center;text-decoration:none}
.nav-logo img{height:96px;width:auto}
.nav-list{display:flex;gap:32px;list-style:none;align-items:center}
/* Nav-Links: 18 px — kompakter; white-space:nowrap verhindert Zeilenumbruch in einzelnen Items */
.nav-list a{font-size:18px;color:var(--tx);text-decoration:none;transition:opacity .2s;padding:8px 0;line-height:1.1;font-weight:400;white-space:nowrap}
.nav-list a:hover{opacity:.6}
.nav-list a[aria-current="page"]{color:var(--gl);font-weight:600}
.nav-list .nav-fran a{border:1.5px solid var(--gl);color:var(--gl);padding:8px 16px;border-radius:2px;font-weight:600;letter-spacing:.03em;font-size:16px}
.nav-list .nav-fran a:hover{background:var(--gl);color:#fff;opacity:1}
.nav-list .nav-arch a{color:var(--gl);font-weight:600}

/* ===== Standorte-Dropdown ===== */
.nav-drop{position:relative}
.nav-drop > a::after{content:" ▾";font-size:.7em;color:var(--tx2);margin-left:2px;transition:transform .2s}
.nav-drop:hover > a::after,
.nav-drop:focus-within > a::after{transform:rotate(180deg);display:inline-block}
.nav-sub{position:absolute;top:100%;left:-12px;min-width:220px;
  background:rgba(235,231,228,.98);backdrop-filter:saturate(140%) blur(8px);
  border:1px solid var(--bd);border-top:none;
  padding:8px 0;list-style:none;display:none;z-index:200;
  box-shadow:0 14px 30px rgba(46,44,42,.12)}
.nav-drop:hover .nav-sub,
.nav-drop:focus-within .nav-sub{display:block}
.nav-sub li{margin:0}
.nav-sub a{display:block;padding:10px 20px;font-size:16px !important;color:var(--tx);
  text-decoration:none;font-weight:400;border:none !important;line-height:1.3;white-space:nowrap}
.nav-sub a:hover{background:var(--cr2);color:var(--gl);opacity:1}
@media (max-width:980px){
  /* In der mobilen Burger-Variante: Dropdown stapeln, nicht absolut */
  .nav-drop > a::after{display:none}
  .nav-sub{position:static;display:block;background:transparent;border:none;box-shadow:none;
    padding:6px 0 6px 16px;backdrop-filter:none;min-width:0}
  .nav-sub a{font-size:18px !important;padding:6px 0}
}
.nav-cta{font-size:15px;font-weight:600;letter-spacing:.05em;color:#fff;background:var(--dk);
  padding:12px 22px;text-decoration:none;transition:background .2s;text-transform:uppercase;white-space:nowrap}
.nav-cta:hover{background:var(--dk2)}
.nav-burger{display:none;font-size:24px;color:var(--tx)}
@media (max-width:1240px){
  /* Auf mittleren Bildschirmen: noch etwas kompakter */
  .nav-list a{font-size:16px}
  .nav-list .nav-fran a{font-size:14px;padding:7px 12px}
  .nav-cta{font-size:13px;padding:10px 18px}
  .nav-list{gap:22px}
}
@media (max-width:980px){
  .nav-list,.nav-cta{display:none}
  .nav-burger{display:block;font-size:32px}
  .nav.open .nav-list{display:flex;flex-direction:column;position:absolute;top:144px;left:0;right:0;
    background:var(--cr);padding:20px var(--gutter);gap:8px;border-bottom:1px solid var(--bd)}
  .nav.open .nav-list a{font-size:22px}
  .nav.open .nav-cta{display:inline-block;margin:14px var(--gutter) 0;text-align:center}
}

/* ===== HERO ===== */
.hero{position:relative;width:100%;height:min(88vh,820px);min-height:560px;overflow:hidden;
  background:#1a1612;color:#fff;isolation:isolate}
/* Foto-Hintergrund als Fallback/Poster — wird vom Cinemagraph überlagert sobald das Video lädt.
   Bei prefers-reduced-motion bleibt nur dieses Bild sichtbar. */
.hero-bg{position:absolute;inset:0;background-size:contain;background-position:center;
  background-repeat:no-repeat;background-color:#1a1612;
  animation:hzoom 36s ease-in-out infinite alternate;z-index:0}

/* Cinemagraph: 8 s Boomerang-Loop — Video ist im ffmpeg bereits geflippt (Flammen rechts) und die
   Magazin-Region wurde zurück-geflippt, damit EXAKT lesbar bleibt. Keine CSS-Transformation nötig.
   Filter-Stack für Eiche-natur + lebhafte Flammen:
   - brightness(.7) belässt genug Helligkeit für aktive Flammen
   - sepia(.45) + hue-rotate(-12deg): brauner Wash + Gelb→Rot-Braun-Shift = Eiche natur statt Ahorn
   - saturate(2.0) + contrast(1.65): Flammen pulsen kräftig vor abgedunkeltem Hintergrund */
.hero-cine{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;z-index:1;
  /* Cinemagraph in Original-Orientierung (kein hflip mehr) — Magazin ist nativ
     lesbar, Format korrekt. Filter stärker Richtung Eiche-Braun gezogen:
     - sepia(.32) + hue-rotate(-12deg) → Eiche kräftig bräunlich (statt Ahorn-Gelb)
     - brightness(.82) → abgedunkelter Showroom
     - saturate(1.55) → genug Sättigung, Feuer bleibt orange-gelb erkennbar
     - contrast(1.7) → Glut hebt sich vom dunkleren Holz ab */
  filter:brightness(.82) sepia(.32) hue-rotate(-12deg) saturate(1.55) contrast(1.7)}
@media (prefers-reduced-motion: reduce){
  .hero-cine{display:none}  /* bei reduzierter Bewegung nur das statische Foto zeigen */
}
@keyframes hzoom{0%{transform:scale(1)}100%{transform:scale(1.03)}}

/* Vogel-Video als Vollbild-Overlay über dem Haus-Foto.
   - mix-blend-mode:darken (statt multiply) → binärer, keine Halb-Transparenz mehr
   - filter: contrast/brightness/saturate(0) → Vögel werden zu soliden Silhouetten,
     Himmel wird einheitlich hell → unter darken komplett transparent
   - Animation "depthFly" simuliert Tiefenflug: Vögel starten groß (vorne),
     verkleinern sich (hinten), faden weich aus und neu ein für sauberen Loop */
.bird-flock{position:absolute;inset:0;z-index:6;pointer-events:none;
  mix-blend-mode:darken;overflow:hidden}
.bird-flock video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;
  /* Weicher Kontrast + leichter Blur → keine harten Schatten-Cutouts, wirkt wie echte Gänse */
  filter:contrast(1.5) brightness(1.08) saturate(.4) blur(.4px);
  /* Drei Durchflüge à 8 s mit Pausen 5 s und 10 s. Gesamtdauer 39 s.
     1×forwards → nach Ablauf bleiben die Vögel dauerhaft unsichtbar. Loop 1, Ende. */
  animation:depthFly 39s ease-in-out 1 forwards;
  transform-origin:center 80%}
@keyframes depthFly{
  /* ===== FLUG 1 — 0 s bis 8 s (0–21 %) ===== */
  0%    {transform:scale(1.35) translateY(8%);   opacity:0}
  2%    {opacity:.92}                                           /* fade-in */
  17%   {transform:scale(.95)  translateY(0);    opacity:.92}   /* mitte: Gleitflug */
  19%   {transform:scale(.7)   translateY(-8%);  opacity:.88}
  21%   {transform:scale(.55)  translateY(-12%); opacity:0}     /* verschwunden */

  /* ===== PAUSE 1 — 5 s bis 13 s (21–33 %) — alles unsichtbar ===== */

  /* ===== FLUG 2 — 13 s bis 21 s (33–54 %) ===== */
  33%   {transform:scale(1.35) translateY(8%);   opacity:0}     /* reset auf Anfangsposition */
  35%   {opacity:.92}
  50%   {transform:scale(.95)  translateY(0);    opacity:.92}
  52%   {transform:scale(.7)   translateY(-8%);  opacity:.88}
  54%   {transform:scale(.55)  translateY(-12%); opacity:0}

  /* ===== PAUSE 2 — 10 s bis 31 s (54–79 %) — alles unsichtbar ===== */

  /* ===== FLUG 3 — 31 s bis 39 s (79–100 %) — letzter Durchgang ===== */
  79%   {transform:scale(1.35) translateY(8%);   opacity:0}
  81%   {opacity:.92}
  96%   {transform:scale(.95)  translateY(0);    opacity:.92}
  98%   {transform:scale(.7)   translateY(-8%);  opacity:.88}
  100%  {transform:scale(.55)  translateY(-12%); opacity:0}     /* Ende — bleibt forever unsichtbar */
}
/* Bottom-Overlay: dunkler Verlauf nach unten — sanfter, damit die Flammen unten nicht erstickt werden */
.hero-ov{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,transparent 0%,transparent 72%,rgba(26,22,18,.3) 90%,rgba(26,22,18,.6) 100%)}
/* Linke Vignette deutlich verstärkt — Feuer sitzt nach dem Halb-Flip rechts,
   also kann die linke Seite (Hero-Text) ohne Rücksicht abgedunkelt werden.
   Lineare Verlaufs-Vignette von tief-dunkel links nach transparent in der Mitte. */
.hero-vig{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(95deg,
    rgba(15,12,9,.92) 0%,
    rgba(15,12,9,.78) 14%,
    rgba(15,12,9,.55) 28%,
    rgba(15,12,9,.28) 42%,
    rgba(15,12,9,.08) 56%,
    transparent 70%)}
.hero-content{position:absolute;bottom:80px;left:56px;z-index:20;max-width:640px}
.hero-eyebrow{font-size:12px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(235,231,228,.78);margin-bottom:18px}
.hero-h1{font-family:var(--f);font-weight:300;font-size:clamp(34px,5.6vw,68px);line-height:1.08;
  color:#fff;margin-bottom:22px;letter-spacing:-.01em;
  text-shadow:0 2px 24px rgba(0,0,0,.55), 0 1px 2px rgba(0,0,0,.4)}
.hero-eyebrow,.hero-sub{text-shadow:0 1px 12px rgba(0,0,0,.6)}
.hero-h1 em{font-style:italic;color:#e0c7a6}
.hero-sub{font-size:17px;line-height:1.6;color:rgba(235,231,228,.85);max-width:520px;margin-bottom:32px;font-weight:300}
.hero-chips{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:28px}
.hero-chip{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.7);
  padding:7px 14px;border:1px solid rgba(255,255,255,.25);border-radius:999px}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 28px;text-decoration:none;
  font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;transition:all .2s;border:1px solid transparent}
.btn-pri{background:#fff;color:var(--tx)}
.btn-pri:hover{background:#e0c7a6}
.btn-sec{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.btn-sec:hover{background:rgba(255,255,255,.1);border-color:#fff}
@media (max-width:680px){
  .hero-content{left:24px;right:24px;bottom:48px}
}

/* ===== HERO ANIMATION: BLÄTTER + VOGEL (überarbeitet, naturalistischer) =====
   Verbesserungen gegenüber v1:
   - SVG mit Gradients statt currentColor (3D-Effekt, Tiefe)
   - Natur-Farbpalette (gedämpfte Erdtöne statt Pure-Orange)
   - Drop-Shadow + leichter Blur für kleine/weit hintere Blätter (Tiefen­schärfe)
   - Bewegungsbahnen mit cubic-bezier statt linear (organischer Pendel)
   - Vogel mit Körper/Kopf/Gabelschwanz (Schwalbe), 4-Posen-Flügelschlag
============================================================================= */

.leaves{position:absolute;inset:0;pointer-events:none;overflow:hidden;perspective:1000px;z-index:5}
.leaf{position:absolute;top:-60px;will-change:transform,opacity;transform-origin:50% 50%;
  filter:drop-shadow(0 3px 4px rgba(20,12,4,.45))}
.leaf svg{display:block;width:100%;height:100%}

@keyframes leafFall{
  0%   {transform:translate3d(0,-10vh,0) rotateZ(-12deg) rotateY(20deg)}
  18%  {transform:translate3d(35px,18vh,0) rotateZ(60deg) rotateY(140deg)}
  37%  {transform:translate3d(-25px,36vh,0) rotateZ(-30deg) rotateY(280deg)}
  56%  {transform:translate3d(48px,54vh,0) rotateZ(110deg) rotateY(420deg)}
  78%  {transform:translate3d(-32px,78vh,0) rotateZ(20deg) rotateY(580deg)}
  100% {transform:translate3d(20px,115vh,0) rotateZ(180deg) rotateY(720deg)}
}
@keyframes leafFallB{
  0%   {transform:translate3d(0,-10vh,0) rotateZ(5deg) rotateY(0)}
  22%  {transform:translate3d(-55px,16vh,0) rotateZ(-80deg) rotateY(160deg)}
  45%  {transform:translate3d(58px,38vh,0) rotateZ(30deg) rotateY(320deg)}
  68%  {transform:translate3d(-44px,62vh,0) rotateZ(-140deg) rotateY(480deg)}
  88%  {transform:translate3d(36px,90vh,0) rotateZ(40deg) rotateY(620deg)}
  100% {transform:translate3d(-12px,115vh,0) rotateZ(220deg) rotateY(700deg)}
}
@keyframes leafFallC{
  0%   {transform:translate3d(0,-10vh,0) rotateZ(20deg) rotateY(0)}
  28%  {transform:translate3d(72px,24vh,0) rotateZ(-50deg) rotateY(220deg)}
  55%  {transform:translate3d(-62px,52vh,0) rotateZ(140deg) rotateY(440deg)}
  82%  {transform:translate3d(40px,82vh,0) rotateZ(-80deg) rotateY(640deg)}
  100% {transform:translate3d(22px,115vh,0) rotateZ(-240deg) rotateY(780deg)}
}

/* Individuelle Positionen, Größen, Geschwindigkeiten — bewusst chaotisch */
.leaf-1 {left:5%; width:30px;height:33px;animation:leafFall  21s cubic-bezier(.4,.05,.55,.95) -2s infinite; opacity:.95}
.leaf-2 {left:14%;width:18px;height:20px;animation:leafFallB 31s cubic-bezier(.35,.1,.65,.9)  -8s infinite; opacity:.55;filter:drop-shadow(0 2px 3px rgba(20,12,4,.3)) blur(.4px)}
.leaf-3 {left:23%;width:34px;height:37px;animation:leafFallC 18s cubic-bezier(.45,.05,.5,.95) -14s infinite;opacity:.92}
.leaf-4 {left:31%;width:22px;height:24px;animation:leafFall  25s cubic-bezier(.3,.1,.6,.9)    -5s infinite; opacity:.78}
.leaf-5 {left:39%;width:15px;height:17px;animation:leafFallB 34s cubic-bezier(.4,.1,.6,.9)   -19s infinite;opacity:.45;filter:drop-shadow(0 1px 2px rgba(20,12,4,.25)) blur(.6px)}
.leaf-6 {left:47%;width:28px;height:30px;animation:leafFallC 19s cubic-bezier(.4,.05,.6,.95) -11s infinite;opacity:.85}
.leaf-7 {left:55%;width:20px;height:22px;animation:leafFall  24s cubic-bezier(.35,.08,.6,.9)  -3s infinite; opacity:.7}
.leaf-8 {left:63%;width:32px;height:35px;animation:leafFallB 17s cubic-bezier(.45,.05,.55,.95)-17s infinite;opacity:.94}
.leaf-9 {left:71%;width:16px;height:18px;animation:leafFallC 28s cubic-bezier(.4,.1,.6,.9)   -22s infinite;opacity:.5;filter:drop-shadow(0 1px 2px rgba(20,12,4,.25)) blur(.5px)}
.leaf-10{left:79%;width:24px;height:26px;animation:leafFall  20s cubic-bezier(.4,.05,.6,.95)  -7s infinite; opacity:.82}
.leaf-11{left:87%;width:19px;height:21px;animation:leafFallB 26s cubic-bezier(.35,.1,.65,.9) -25s infinite;opacity:.6}
.leaf-12{left:94%;width:23px;height:25px;animation:leafFallC 22s cubic-bezier(.45,.05,.5,.95)-13s infinite;opacity:.78}
.leaf-13{left:18%;width:14px;height:16px;animation:leafFallB 33s cubic-bezier(.4,.1,.6,.9)   -29s infinite;opacity:.4;filter:drop-shadow(0 1px 2px rgba(20,12,4,.2)) blur(.7px)}
.leaf-14{left:67%;width:13px;height:15px;animation:leafFall  32s cubic-bezier(.3,.1,.7,.9)   -16s infinite;opacity:.42;filter:drop-shadow(0 1px 2px rgba(20,12,4,.2)) blur(.7px)}

/* ===== VOGEL — Schwalbe mit 4 Flügelposen ===== */
.bird{position:absolute;top:18%;left:0;width:64px;height:34px;opacity:.82;pointer-events:none;z-index:7;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.35));
  animation:birdPath 36s cubic-bezier(.4,.05,.6,.95) infinite}
.bird-inner{width:100%;height:100%;animation:birdArc 36s ease-in-out infinite}
.bird-wings{position:relative;width:100%;height:100%}
.bird-wings svg{position:absolute;inset:0;width:100%;height:100%}

@keyframes birdPath{
  0%   {transform:translateX(110vw)}
  10%  {transform:translateX(70vw)}
  18%  {transform:translateX(35vw)}
  26%  {transform:translateX(-20vw)}
  26.01%,100%{transform:translateX(-20vw)}
}
@keyframes birdArc{
  0%   {transform:translateY(0) scaleX(-1) rotate(-3deg)}
  8%   {transform:translateY(-22px) scaleX(-1) rotate(-6deg)}
  17%  {transform:translateY(-50px) scaleX(-1) rotate(-2deg)}
  26%  {transform:translateY(20px) scaleX(-1) rotate(8deg)}
  26.01%,100%{transform:translateY(20px) scaleX(-1) rotate(0)}
}

/* 4-Phasen-Flügelschlag: ca. 7 Hz (140ms cycle, 35ms pro Pose) */
.bird-wings .pose-1, .bird-wings .pose-2, .bird-wings .pose-3, .bird-wings .pose-4 {opacity:0}
.bird-wings .pose-1{animation:flap1 .14s steps(1) infinite}
.bird-wings .pose-2{animation:flap2 .14s steps(1) infinite}
.bird-wings .pose-3{animation:flap3 .14s steps(1) infinite}
.bird-wings .pose-4{animation:flap4 .14s steps(1) infinite}
@keyframes flap1{0%,24%  {opacity:1} 25%,100%{opacity:0}}
@keyframes flap2{25%,49% {opacity:1} 0%,24%,50%,100%{opacity:0}}
@keyframes flap3{50%,74% {opacity:1} 0%,49%,75%,100%{opacity:0}}
@keyframes flap4{75%,100%{opacity:1} 0%,74%{opacity:0}}

@media (prefers-reduced-motion: reduce){
  .hero-bg{animation:none}
  .bird-flock{display:none}
  .leaf,.leaf svg{animation:none !important}
  .leaf{opacity:0}
  /* Marquee anhalten — Inhalt bleibt lesbar als statische Liste */
  .marquee-track{animation:none;flex-wrap:wrap;justify-content:center;width:auto}
  .marquee{-webkit-mask-image:none;mask-image:none}
}

/* ===== SECTIONS ===== */
.sec{padding:90px var(--gutter)}
.sec-inner{max-width:var(--maxw);margin:0 auto}
.sec-alt{background:var(--cr2)}
.sec-dark{background:var(--dk);color:var(--txl)}
.sec-dark h2,.sec-dark h3{color:#fff}

.eyebrow{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--gl);margin-bottom:14px;font-weight:600}
h1,h2,h3{font-family:var(--f);font-weight:300;line-height:1.2;color:var(--tx)}
h1{font-size:clamp(32px,4.5vw,52px);margin-bottom:24px;letter-spacing:-.01em}
h2{font-size:clamp(26px,3.4vw,40px);margin-bottom:20px;letter-spacing:-.005em}
h3{font-size:clamp(20px,2.2vw,26px);margin-bottom:14px}
h2 em,h1 em{font-style:italic;color:var(--gl)}
.lead{font-size:18px;line-height:1.65;color:var(--tx2);max-width:680px;margin-bottom:28px}
p{margin-bottom:14px}

.grid{display:grid;gap:32px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:880px){.grid-3,.grid-4{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

.card{background:#fff;padding:36px 32px;border:1px solid var(--bd);transition:all .25s}
.card:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(46,44,42,.08)}
.card h3{margin-bottom:12px}
.card-num{font-family:var(--f);font-size:42px;color:var(--gl);margin-bottom:18px;display:block;line-height:1}

.usp{display:grid;grid-template-columns:repeat(3,1fr);gap:0;background:var(--dk);color:#fff;margin:0}
.usp > div{padding:48px 36px;border-right:1px solid rgba(255,255,255,.1)}
.usp > div:last-child{border-right:none}
.usp h3{font-size:22px;color:#fff;font-family:var(--s);font-weight:600;letter-spacing:.02em}
.usp p{color:rgba(255,255,255,.7);margin:0;font-size:14px}
.usp-num{font-family:var(--f);font-size:46px;color:#e0c7a6;line-height:1;margin-bottom:14px;display:block}
@media (max-width:760px){.usp{grid-template-columns:1fr}.usp > div{border-right:none;border-bottom:1px solid rgba(255,255,255,.1)}}

.ref{position:relative;overflow:hidden;background:#222;aspect-ratio:4/3}
.ref img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.ref:hover img{transform:scale(1.05)}
.ref-cap{position:absolute;left:24px;bottom:20px;right:24px;color:#fff;z-index:2}
.ref::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.65) 100%);z-index:1}
.ref-cap small{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.ref-cap h3{font-size:20px;color:#fff;margin-top:6px;font-weight:300}

.location-card{background:#fff;padding:36px;border-top:3px solid var(--gl)}
.location-card h3{margin-bottom:8px}
.location-card .addr{color:var(--tx2);font-size:14px;line-height:1.7;margin-bottom:18px}
.location-card a{color:var(--gl);text-decoration:none;font-weight:600;font-size:14px}
.location-card a:hover{text-decoration:underline}

.final-cta{background:var(--dk);color:#fff;text-align:center;padding:120px var(--gutter)}
.final-cta h2{color:#fff;margin-bottom:18px}
.final-cta p{color:rgba(255,255,255,.7);max-width:560px;margin:0 auto 32px}
.final-cta .btn-pri{background:#fff;color:var(--tx)}
.final-cta .tel{font-family:var(--f);font-size:32px;color:#e0c7a6;text-decoration:none;display:block;margin-bottom:8px}

/* ===== TABS (reine CSS-Lösung, kein JS) — für zielgruppen-spezifische Formulare ===== */
.tabs{margin-top:32px}
.tabs > input[type="radio"]{position:absolute;left:-9999px;opacity:0}
.tab-labels{display:flex;border-bottom:2px solid var(--bd);gap:0;flex-wrap:wrap;margin-bottom:0}
.tab-labels label{padding:18px 24px;cursor:pointer;font-weight:600;font-size:15px;color:var(--tx2);
  border-bottom:3px solid transparent;margin-bottom:-2px;transition:all .2s;flex:1 0 auto;text-align:center;line-height:1.2}
.tab-labels label:hover{color:var(--gl);background:rgba(102,90,73,.04)}
/* Aktiver Tab */
#tab-privat:checked    ~ .tab-labels label[for="tab-privat"],
#tab-gewerbe:checked   ~ .tab-labels label[for="tab-gewerbe"],
#tab-arch:checked      ~ .tab-labels label[for="tab-arch"],
#tab-karriere:checked  ~ .tab-labels label[for="tab-karriere"]{
  color:var(--gl);border-bottom-color:var(--gl);background:#fff
}
/* Tab-Pane Sichtbarkeit */
.tab-pane{display:none;padding:40px 0 8px;animation:tabFade .25s ease-out}
@keyframes tabFade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
#tab-privat:checked   ~ .tab-panes .tab-pane[data-tab="tab-privat"],
#tab-gewerbe:checked  ~ .tab-panes .tab-pane[data-tab="tab-gewerbe"],
#tab-arch:checked     ~ .tab-panes .tab-pane[data-tab="tab-arch"],
#tab-karriere:checked ~ .tab-panes .tab-pane[data-tab="tab-karriere"]{display:block}
/* Tastatur-Fokus */
.tabs > input[type="radio"]:focus + .tab-labels{outline:none}
.tabs > input:focus-visible ~ .tab-labels label[for]{outline:none}
.tab-labels label:focus-within{outline:2px solid var(--gl);outline-offset:2px}
/* Mobile */
@media (max-width:760px){
  .tab-labels{flex-direction:column}
  .tab-labels label{flex:1 0 100%;border-bottom:1px solid var(--bd);border-left:3px solid transparent;text-align:left}
  #tab-privat:checked    ~ .tab-labels label[for="tab-privat"],
  #tab-gewerbe:checked   ~ .tab-labels label[for="tab-gewerbe"],
  #tab-arch:checked      ~ .tab-labels label[for="tab-arch"],
  #tab-karriere:checked  ~ .tab-labels label[for="tab-karriere"]{
    border-bottom-color:var(--bd);border-left-color:var(--gl)
  }
}

/* ===== FORMS ===== */
.form{display:grid;gap:18px;max-width:640px}
.form-row{display:grid;gap:18px;grid-template-columns:1fr 1fr}
@media (max-width:560px){.form-row{grid-template-columns:1fr}}
.form label{display:block;font-size:13px;font-weight:600;margin-bottom:6px;color:var(--tx2)}
.form input, .form textarea, .form select{
  width:100%;padding:14px 16px;border:1px solid var(--bd);background:#fff;font:inherit;color:var(--tx);
  border-radius:0;transition:border-color .2s}
.form input:focus, .form textarea:focus, .form select:focus{outline:none;border-color:var(--gl)}
.form textarea{min-height:140px;resize:vertical}
.form-check{display:flex;align-items:flex-start;gap:10px;font-size:13px;color:var(--tx2)}
.form-check input{width:auto;margin-top:4px}
.form button{padding:16px 32px;background:var(--dk);color:#fff;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;font-size:13px;transition:background .2s;justify-self:start}
.form button:hover{background:var(--dk2)}

/* ===== FOOTER ===== */
.footer{background:#1f1d1b;color:rgba(255,255,255,.7);padding:80px var(--gutter) 32px}
.footer-inner{max-width:var(--maxw);margin:0 auto}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:48px;margin-bottom:48px}
@media (max-width:880px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.footer-grid{grid-template-columns:1fr}}
.footer h4{font-family:var(--s);font-weight:600;color:#fff;margin-bottom:18px;font-size:13px;letter-spacing:.1em;text-transform:uppercase}
.footer ul{list-style:none}
.footer li{margin-bottom:8px;font-size:14px}
.footer a{color:rgba(255,255,255,.7);text-decoration:none;transition:color .2s}
.footer a:hover{color:#fff}
.footer-brand p{font-size:14px;line-height:1.7;color:rgba(255,255,255,.55);margin-top:14px;max-width:280px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:24px;display:flex;justify-content:space-between;align-items:center;font-size:13px;color:rgba(255,255,255,.5);flex-wrap:wrap;gap:12px}

/* ===== UTIL ===== */
.center{text-align:center}
.muted{color:var(--tx2)}
.spacer-s{height:24px}
.spacer-m{height:48px}
.spacer-l{height:80px}
.placeholder-img{aspect-ratio:4/3;background:linear-gradient(135deg,#d9d2c8 0%,#c4b8a8 100%);
  display:flex;align-items:center;justify-content:center;color:#8a7e70;font-size:13px;letter-spacing:.1em;text-transform:uppercase}

/* Sub-Hero für Subpages (Foto-Hintergrund + dunkler Gradient) */
.sub-hero{position:relative;min-height:460px;padding:160px var(--gutter) 80px;color:#fff;overflow:hidden;isolation:isolate}
.sub-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0;animation:hzoom 36s ease-in-out infinite alternate}
.sub-hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,rgba(20,16,12,.82) 0%,rgba(20,16,12,.55) 38%,rgba(20,16,12,.18) 75%);z-index:1}
.sub-hero > .sec-inner{position:relative;z-index:2}
.sub-hero h1{color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.5),0 1px 2px rgba(0,0,0,.4)}
.sub-hero h1 em{color:#e0c7a6;font-style:italic}
.sub-hero .eyebrow{color:#e0c7a6;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.sub-hero .lead{color:rgba(255,255,255,.92);text-shadow:0 1px 10px rgba(0,0,0,.5);max-width:720px}
.sub-hero a{color:#e0c7a6}

/* Text-mit-Bild Layout (für Über uns, Architekten, Franchise inline) */
.split{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center}
.split img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
@media (max-width:760px){.split{grid-template-columns:1fr}}

/* Google-Maps Consent-Click (DSGVO-konform: erst nach Klick wird das Iframe geladen) */
.map-consent{aspect-ratio:4/3;background:linear-gradient(135deg,#e8e2d8 0%,#d6cec0 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:28px;
  border:1px solid var(--bd);color:var(--tx)}
.map-consent .map-icon{font-size:36px;margin-bottom:12px;color:var(--gl)}
.map-consent strong{display:block;font-size:18px;margin-bottom:8px;color:var(--tx)}
.map-consent .map-hint{font-size:13px;color:var(--tx2);max-width:380px;margin:0 0 18px;line-height:1.55}
.map-consent button{padding:12px 24px;background:var(--dk);color:#fff;border:none;cursor:pointer;
  font:inherit;font-weight:600;text-transform:uppercase;font-size:12px;letter-spacing:.06em;transition:background .2s}
.map-consent button:hover{background:var(--dk2)}
.map-frame{aspect-ratio:4/3;border:0;width:100%;display:block}

/* ===== EXAKT-Magazin Cover & Bestellformular ===== */
.exakt-covers{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
@media (max-width:760px){.exakt-covers{grid-template-columns:1fr;gap:24px}}
.exakt-cover{text-align:center}
.exakt-cover img{
  width:100%;
  aspect-ratio:3/4;          /* Alle 3 Cover identische Höhe trotz unterschiedlicher Originale */
  object-fit:cover;
  object-position:center;
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 16px 40px rgba(0,0,0,.5);
  display:block
}
.exakt-cover .exakt-title{margin-top:18px;color:#e0c7a6;font-family:var(--f);font-size:20px;font-weight:300}
.exakt-cover .exakt-themes{color:rgba(255,255,255,.65);font-size:13px;margin-top:4px;line-height:1.45}

/* Cover-Platzhalter für No. 4 — typografisch im EXAKT-Stil */
.exakt-cover-placeholder{position:relative;width:100%;aspect-ratio:3/4;
  background:linear-gradient(135deg,#1a1817 0%,#2a2825 100%);
  border:1px solid rgba(255,255,255,.1);box-shadow:0 16px 40px rgba(0,0,0,.5);
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  padding:32px;color:#fff;overflow:hidden}
.exakt-cover-placeholder-inner{text-align:center}
.exakt-cover-placeholder .exakt-logo{font-family:var(--f);font-size:48px;font-weight:300;
  letter-spacing:.05em;line-height:1;color:#fff}
.exakt-cover-placeholder .exakt-sub{font-family:var(--f);font-size:18px;color:#e0c7a6;
  margin-top:8px;letter-spacing:.1em}
.exakt-cover-placeholder .exakt-line{width:40px;height:1px;background:rgba(255,255,255,.4);margin:18px auto}
.exakt-cover-placeholder .exakt-mini{font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.55);line-height:1.6}
.exakt-cover-placeholder .exakt-cat{margin-top:20px;font-size:9px;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(255,255,255,.4);line-height:1.7}
.exakt-cover-placeholder .exakt-cover-badge{position:absolute;top:14px;right:14px;
  background:#e0c7a6;color:var(--dk);font-size:10px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;padding:5px 10px;border-radius:2px}

/* Bestellkarte: heller Block, sticht aus dunkler EXAKT-Section heraus */
.exakt-order{background:#fff;color:var(--tx);padding:40px;margin-top:56px;
  display:grid;grid-template-columns:.9fr 1.5fr;gap:48px;align-items:start;
  box-shadow:0 24px 60px rgba(0,0,0,.35);border-top:3px solid var(--gl)}
.exakt-order .exakt-order-intro{position:sticky;top:160px}
.exakt-order .form button{background:var(--gl)}
.exakt-order .form button:hover{background:#7a6e5a}
@media (max-width:880px){.exakt-order{grid-template-columns:1fr;padding:28px;gap:24px}.exakt-order .exakt-order-intro{position:static}}

/* ===== Kundenmeinungen-Laufschrift (CSS-Marquee, pure CSS, kein JS) =====
   - .marquee-track wird endlos nach links geschoben
   - Inhalt ist 2× im DOM (Original + Duplikat), damit der Loop nahtlos wirkt:
     wenn 1. Set durch ist (translateX -50%), zeigt das 2. Set genau an der Start-Position
   - Hover pausiert die Animation, damit Nutzer in Ruhe lesen können */
.marquee{overflow:hidden;padding:14px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.marquee-track{display:flex;gap:28px;width:max-content;
  animation:marqueeScroll 90s linear infinite;
  padding-inline:14px}
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track{animation-play-state:paused}
@keyframes marqueeScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.testi{flex:0 0 380px;background:#fff;padding:32px 28px;border:1px solid var(--bd);
  display:flex;flex-direction:column;justify-content:space-between;min-height:220px}
.testi blockquote{font-family:var(--f);font-size:16px;font-weight:300;font-style:italic;
  line-height:1.55;color:var(--tx);margin:0 0 18px;quotes:none}
.testi cite{font-size:13px;color:var(--gl);font-style:normal;font-weight:600;letter-spacing:.02em}
@media (max-width:560px){.testi{flex:0 0 280px;padding:22px 20px;min-height:200px}.testi blockquote{font-size:15px}}

/* ===== Franchise-Sektion ===== */
.franchise-teaser{background:#2a2825;color:#fff;padding:100px var(--gutter);position:relative;overflow:hidden}
.franchise-teaser::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 80% 20%,rgba(102,90,73,.3),transparent 60%);pointer-events:none}
.franchise-teaser h2{color:#fff}
.franchise-teaser .lead{color:rgba(255,255,255,.7);max-width:620px}
.franchise-teaser .grid{position:relative;z-index:1}
.kpi{text-align:center;padding:24px 0}
.kpi-num{font-family:var(--f);font-size:64px;color:#e0c7a6;line-height:1;display:block;margin-bottom:8px;font-weight:300}
.kpi p{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.65);margin:0}
.fran-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:40px;align-items:center}