/* ============ HERO · BLAUPAUSEN-BAUKASTEN (Startseite / Header) (mhx-hero-hell.html) ============ */
.mhx-hero { opacity: 1 !important; } .mhx-title { opacity: 1 !important; }
/* ==========================================================================
   [FARBEN] Helle Holz-Palette – Akzent bleibt #ba5512
   ========================================================================== */
.mhx-hero { opacity: 0; }
.mhx-hero.mhx-hero-ready { opacity: 1; transition: opacity .4s ease; }
.mhx-hero{
  --mhx-ink:#1c140d;                 /* dunkle Schrift/Kontur-Farbe (statt hellem Cream-Text) */
  --mhx-wood:#332519;                /* zweiter dunkler Ton für Fließtext-Nuancen */
  --mhx-cream:#f3e0ce;               /* jetzt: helle Oberflächenfarbe für Glas-Chips */
  --mhx-gold:#ba5512;
  --mhx-gold-lt:#ec883c;
  --mhx-accent-ink:#8e3f0b;          /* kontraststarker Akzent für Text auf hellem Grund */
  --mhx-muted:rgba(28,20,13,.68);
  --mhx-hair:rgba(28,20,13,.14);
}
.mhx-hero{
  --mhx-vw:100vw;
  position:relative;
  box-sizing:border-box;
  width:var(--mhx-vw); max-width:var(--mhx-vw);
  margin-left:calc(50% - var(--mhx-vw) / 2);
  margin-right:calc(50% - var(--mhx-vw) / 2);
  display:grid;
  min-height:600px;
  min-height:100svh;
  min-height:100dvh;
  overflow:hidden; overflow:clip;
  isolation:isolate;
  background:radial-gradient(120% 90% at 12% 105%, #efdbc8 0%, #e8ccb0 46%, #d5a87b 100%);
  color:var(--mhx-ink);
  font-family:"Inter","Helvetica Neue",Arial,system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}
.mhx-hero *,.mhx-hero *::before,.mhx-hero *::after{box-sizing:border-box;}
.mhx-hero p,.mhx-hero h1,.mhx-hero dl,.mhx-hero dd,.mhx-hero dt{margin:0;padding:0;}
/* --- Ebenen --------------------------------------------------------------- */
.mhx-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;
  opacity:.9;z-index:1;}
.mhx-grid{position:absolute;inset:-2px;z-index:2;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(to right, var(--mhx-hair) 1px, transparent 1px),
    linear-gradient(to bottom, var(--mhx-hair) 1px, transparent 1px);
  background-size:clamp(60px,7vw,110px) clamp(60px,7vw,110px);
  -webkit-mask-image:radial-gradient(120% 100% at 78% 40%, #000 0%, transparent 72%);
          mask-image:radial-gradient(120% 100% at 78% 40%, #000 0%, transparent 72%);
  animation:mhx-gridin 1.6s cubic-bezier(.2,.7,.2,1) .2s both;}
@keyframes mhx-gridin{from{opacity:0;transform:scale(1.06)}to{opacity:.5;transform:none}}
.mhx-vignette{position:absolute;inset:0;z-index:6;pointer-events:none;
  background:
    linear-gradient(100deg, rgba(243,224,206,.94) 0%, rgba(243,224,206,.74) 34%, rgba(243,224,206,.12) 62%, rgba(243,224,206,.55) 100%),
    radial-gradient(75% 65% at 50% 118%, rgba(221,186,152,.7), transparent 70%);}
.mhx-sweep{position:absolute;top:-30%;left:-45%;width:60%;height:170%;z-index:5;
  pointer-events:none;mix-blend-mode:overlay;opacity:.6;
  background:linear-gradient(100deg, transparent 0%, rgba(135,79,34,.35) 42%, rgba(109,62,24,.5) 50%, rgba(135,79,34,.35) 58%, transparent 100%);
  filter:blur(6px);
  animation:mhx-sweep 11s cubic-bezier(.45,0,.55,1) 1.1s infinite;}
@keyframes mhx-sweep{0%{transform:translateX(0) skewX(-12deg)}55%,100%{transform:translateX(280%) skewX(-12deg)}}
/* ==========================================================================
   Interaktiver Massivholz-Baukasten
   ========================================================================== */
.mhx-build{position:absolute;inset:0;z-index:3;display:flex;
  align-items:center;justify-content:flex-end;
  padding-right:clamp(10px,5vw,90px);pointer-events:none;}
.mhx-build-progress{
  position:absolute;left:0;top:-10%;z-index:4;pointer-events:none;
  display:flex;align-items:center;gap:8px;
  font-family:ui-monospace,"SF Mono",Consolas,monospace;
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mhx-accent-ink);
  padding:8px 13px;border:1px solid rgba(186,85,18,.4);border-radius:999px;
  background:rgba(243,224,206,.55);backdrop-filter:blur(6px);
  white-space:nowrap;
}
.mhx-build-count{font-variant-numeric:tabular-nums;color:var(--mhx-ink);}
.mhx-build-rig{
  position:relative;pointer-events:none;
  width:min(42vw,540px);
  aspect-ratio:3/4.5;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:.55fr repeat(4,1fr);
  grid-template-areas:
    "roof roof roof"
    "f3a  f3b  f3c"
    "f2a  f2b  bal2"
    "f1a  bal1 f1c"
    "gnda door gndc";
  gap:clamp(4px,.8vw,9px);
  filter:drop-shadow(0 40px 60px rgba(0,0,0,.3));
}
.mhx-build-rig.is-complete::after{
  content:"";position:absolute;inset:-8%;pointer-events:none;
  background:radial-gradient(60% 60% at 50% 55%, rgba(236,136,60,.4), transparent 70%);
  animation:mhx-build-glow 1.5s ease-out both;
}
@keyframes mhx-build-glow{0%{opacity:0;transform:scale(.85)}30%{opacity:1}100%{opacity:0;transform:scale(1.08)}}
.mhx-panel{
  position:relative;overflow:hidden;pointer-events:auto;cursor:pointer;
  border-radius:2px;
  background:
    repeating-linear-gradient(180deg, rgba(0,0,0,.1) 0 2px, transparent 2px 24px),
    linear-gradient(155deg,#bd814c 0%,#976335 48%,#774f2c 100%);
  outline:1px dashed rgba(186,85,18,.5);outline-offset:-1px;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.35),
    inset 0 2px 4px rgba(255,255,255,.15);
  opacity:.55;
  transform:translate(var(--sx),var(--sy)) rotate(var(--sr)) scale(.68);
  transition:
    transform .85s cubic-bezier(.34,1.56,.64,1),
    opacity .5s ease,
    outline-color .5s ease,
    box-shadow .5s ease;
}
.mhx-panel:hover{filter:brightness(1.08);}
.mhx-panel:focus-visible{outline:2px solid var(--mhx-gold);outline-offset:2px;}
.mhx-panel.is-placed{
  opacity:1;outline-color:transparent;
  transform:translate(0,0) rotate(0deg) scale(1);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.35),
    inset 0 2px 4px rgba(255,255,255,.15),
    0 14px 28px -10px rgba(0,0,0,.35),
    0 0 22px rgba(186,85,18,.3);
}
/* Fenster: dunkel bis das Teil sitzt, dann warmes Leuchten */
.mhx-panel:not(.mhx-panel--balcony):not(.mhx-panel--door):not(.mhx-panel--roof)::after{
  content:"";position:absolute;left:50%;top:50%;width:32%;height:32%;
  transform:translate(-50%,-50%);
  background:#130c06;border:1px solid rgba(0,0,0,.45);
  transition:background .6s ease .12s, box-shadow .6s ease .12s;
}
.mhx-panel.is-placed:not(.mhx-panel--balcony):not(.mhx-panel--door):not(.mhx-panel--roof)::after{
  background:linear-gradient(180deg,#f1c79d,#ec7f13);
  box-shadow:0 0 14px 3px rgba(226,119,18,.55);
}
/* Loggia/Balkon: offene Gitter-Optik */
.mhx-panel--balcony{
  background:
    repeating-linear-gradient(90deg, rgba(15,10,6,.92) 0 3px, transparent 3px 13px),
    linear-gradient(180deg, rgba(46,32,21,.55), rgba(18,12,8,.75));
}
.mhx-panel--balcony::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--mhx-gold-lt);opacity:.55;
  transition:opacity .5s ease, box-shadow .5s ease;
}
.mhx-panel--balcony.is-placed::before{opacity:1;box-shadow:0 0 10px rgba(236,136,60,.5);}
/* Eingangstür */
.mhx-panel--door{
  background:linear-gradient(155deg,#362516,#1d140c);
  border-radius:3px 3px 0 0;
}
.mhx-panel--door::after{
  content:"";position:absolute;right:15%;top:50%;width:6px;height:6px;
  margin-top:-3px;border-radius:50%;background:var(--mhx-gold-lt);opacity:.5;
  transition:opacity .5s ease, box-shadow .5s ease;
}
.mhx-panel--door.is-placed{box-shadow:inset 0 0 0 1px rgba(0,0,0,.35), 0 0 30px rgba(236,136,60,.5);}
.mhx-panel--door.is-placed::after{opacity:1;box-shadow:0 0 10px 3px rgba(236,136,60,.65);}
/* Dach mit Attika-Kante */
.mhx-panel--roof{
  background:linear-gradient(155deg,#463120,#20160e);
  border-radius:3px 3px 0 0;
}
.mhx-panel--roof::before{
  content:"";position:absolute;left:0;right:0;top:-3px;height:3px;
  background:var(--mhx-gold);opacity:.65;
  transition:opacity .5s ease, box-shadow .5s ease;
}
.mhx-panel--roof.is-placed::before{opacity:1;box-shadow:0 0 12px rgba(186,85,18,.6);}
/* ==========================================================================
   Inhalt
   ========================================================================== */
.mhx-content{position:relative;z-index:7;
  display:flex;flex-direction:column;justify-content:center;
  gap:clamp(14px,2.1vh,26px);
  padding:clamp(26px,6vw,120px);
  padding-right:clamp(26px,6vw,120px);
  max-width:min(1500px,100%);}
.mhx-logo{width:clamp(190px,19vw,280px);height:auto;align-self:flex-start;
  filter:drop-shadow(0 4px 14px rgba(0,0,0,.25));
  animation:mhx-rise 1s cubic-bezier(.2,.8,.2,1) 0s both;}
.mhx-eyebrow{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;
  max-width:100%;flex-wrap:wrap;row-gap:4px;line-height:1.7;
  font-family:ui-monospace,"SF Mono","Cascadia Mono",Consolas,monospace;
  font-size:clamp(9.5px,1.05vw,12px);letter-spacing:.34em;text-transform:uppercase;
  color:var(--mhx-accent-ink);
  padding:9px 15px;border:1px solid rgba(186,85,18,.4);border-radius:999px;
  background:rgba(243,224,206,.5);backdrop-filter:blur(6px);
  animation:mhx-rise 1s cubic-bezier(.2,.8,.2,1) .05s both;}
.mhx-dot{width:6px;height:6px;border-radius:50%;background:var(--mhx-gold);
  box-shadow:0 0 0 0 rgba(186,85,18,.55);animation:mhx-pulse 2.4s ease-out infinite;}
@keyframes mhx-pulse{0%{box-shadow:0 0 0 0 rgba(186,85,18,.5)}70%,100%{box-shadow:0 0 0 11px rgba(186,85,18,0)}}
.mhx-title { opacity: 0; transition: opacity .35s ease; }
.mhx-title.mhx-ready { opacity: 1; }
.mhx-title{font-weight:800;line-height:.86;letter-spacing:-.035em;
  font-size:clamp(2.9rem,12.5vw,11.5rem);text-transform:uppercase;
  font-family:"Inter","Helvetica Neue",Arial,system-ui,-apple-system,"Segoe UI",sans-serif !important;
  max-width:100%;}
.mhx-title .mhx-line{font-family:inherit !important;}
.mhx-title--long{font-size:clamp(2.1rem,8vw,7rem);line-height:.94;}
.mhx-line{display:block;animation:mhx-rise 1.25s cubic-bezier(.16,.84,.24,1) var(--d) both;}
.mhx-line--out{color:transparent;-webkit-text-stroke:1.4px rgba(28,20,13,.78);
  text-shadow:0 0 60px rgba(186,85,18,.2);}
.mhx-line--fill{
  background:linear-gradient(100deg,var(--mhx-ink) 0%,var(--mhx-ink) 34%,var(--mhx-gold-lt) 46%,#f9e0c8 50%,var(--mhx-gold) 55%,var(--mhx-ink) 68%,var(--mhx-ink) 100%);
  background-size:300% 100%;background-position:100% 0;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:mhx-rise 1.25s cubic-bezier(.16,.84,.24,1) var(--d) both,
            mhx-shine 3.4s cubic-bezier(.4,0,.2,1) 1.25s both;}
@keyframes mhx-shine{from{background-position:100% 0}to{background-position:0 0}}
@keyframes mhx-rise{from{opacity:0;transform:translate3d(0,44px,0) skewY(1.4deg)}to{opacity:1;transform:none}}
/* ---------- Sonderfall "5-Familienhaus": Zahl + Wort, eine Zeile ---------- */
.mhx-title.mhx-title--numword{
  font-size:clamp(2.4rem,8.5vw,7rem);
  line-height:1;
  white-space:nowrap;
}
.mhx-num-wrap{
  position:relative;
  display:inline-flex;
  align-items:baseline;
  white-space:nowrap;
  padding-bottom:.12em;
}
.mhx-num-wrap::after{
  content:"";position:absolute;left:.03em;bottom:0;
  width:1.05em;height:2px;
  background:linear-gradient(90deg,var(--mhx-gold) 0%,transparent 100%);
  transform:scaleX(0);transform-origin:left center;
  animation:mhx-tick .5s cubic-bezier(.2,.8,.2,1) .95s both;
}
@keyframes mhx-tick{to{transform:scaleX(1)}}
.mhx-num{
  position:relative;z-index:1;display:inline-block;
  font-size:1.4em;line-height:1;
  margin-right:.02em;
  padding:0 .02em;
  background:linear-gradient(135deg,#f2ba8c 0%,var(--mhx-gold-lt) 38%,var(--mhx-gold) 72%,#8e3f0b 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 6px 14px rgba(186,85,18,.22));
  animation:mhx-num-pop .8s cubic-bezier(.22,1.3,.4,1) .05s both,
            mhx-num-glow 3.2s ease-in-out 1s infinite alternate;
}
@keyframes mhx-num-pop{
  from{opacity:0;transform:translateY(.18em) scale(.6);}
  to{opacity:1;transform:translateY(0) scale(1);}
}
@keyframes mhx-num-glow{
  from{filter:drop-shadow(0 6px 10px rgba(186,85,18,.18));}
  to{filter:drop-shadow(0 10px 24px rgba(186,85,18,.4));}
}
.mhx-numword{
  position:relative;z-index:2;display:inline-block;line-height:1;
  background:linear-gradient(100deg,var(--mhx-ink) 0%,var(--mhx-ink) 34%,var(--mhx-gold-lt) 46%,#f9e0c8 50%,var(--mhx-gold) 55%,var(--mhx-ink) 68%,var(--mhx-ink) 100%);
  background-size:300% 100%;background-position:100% 0;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:mhx-rise 1.25s cubic-bezier(.16,.84,.24,1) .32s both,
            mhx-shine 3.4s cubic-bezier(.4,0,.2,1) 1.25s both;
}
.mhx-sub{max-width:38ch;font-size:clamp(15px,1.55vw,21px);line-height:1.55;
  color:var(--mhx-muted);text-wrap:balance;
  animation:mhx-rise 1.1s cubic-bezier(.2,.8,.2,1) var(--d) both;}
/* Buttons */
.mhx-actions{display:flex;flex-wrap:wrap;gap:12px;
  animation:mhx-rise 1.1s cubic-bezier(.2,.8,.2,1) var(--d) both;}
.mhx-btn{position:relative;display:inline-flex;align-items:center;gap:10px;
  padding:15px 26px;border-radius:2px;text-decoration:none;overflow:hidden;
  font-size:14px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease,color .3s ease,border-color .3s ease;}
.mhx-btn:hover{transform:translateY(-2px);}
.mhx-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .35s cubic-bezier(.2,.8,.2,1);}
.mhx-btn:hover svg{transform:translateX(5px);}
.mhx-btn--solid{color:#fff;
  background:linear-gradient(100deg,#d36c22,var(--mhx-gold) 55%,#8e3f0b);
  box-shadow:0 12px 34px -12px rgba(186,85,18,.5);}
.mhx-btn--solid::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);
  transform:translateX(-120%);transition:transform .7s cubic-bezier(.4,0,.2,1);}
.mhx-btn--solid:hover::after{transform:translateX(120%);}
.mhx-btn--ghost{color:var(--mhx-ink);border:1px solid var(--mhx-hair);
  background:rgba(243,224,206,.55);backdrop-filter:blur(4px);}
.mhx-btn--ghost:hover{border-color:rgba(186,85,18,.65);color:var(--mhx-accent-ink);}
.mhx-btn:focus-visible{outline:2px solid var(--mhx-gold);outline-offset:3px;}
/* HUD */
.mhx-mark{position:absolute;z-index:7;top:clamp(20px,3.4vw,44px);right:clamp(20px,3.4vw,44px);
  width:46px;height:46px;display:grid;place-items:center;border-radius:50%;
  background:rgba(243,224,206,.55);backdrop-filter:blur(6px);
  border:1px solid rgba(186,85,18,.45);color:var(--mhx-accent-ink);
  font-size:12px;font-weight:700;letter-spacing:.1em;
  animation:mhx-fadein 1.4s ease 1.2s both;}
@keyframes mhx-fadein{from{opacity:0}to{opacity:1}}
.mhx-scrollhintwrap{position:absolute;z-index:7;left:50%;
  bottom:clamp(18px,3vw,34px);transform:translateX(-50%);pointer-events:none;}
.mhx-scrollhint{position:relative;width:26px;height:42px;
  border:2px solid rgba(28,20,13,.3);border-radius:14px;
  animation:mhx-fadein 1.4s ease 1.6s both;}
.mhx-scrollhint::before{content:"";position:absolute;left:50%;top:8px;
  width:4px;height:8px;margin-left:-2px;border-radius:3px;
  background:var(--mhx-gold);
  animation:mhx-wheel 1.8s ease-in-out infinite;}
@keyframes mhx-wheel{
  0%,100%{transform:translateY(0);opacity:1}
  60%{transform:translateY(12px);opacity:0}}
/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1100px){
  .mhx-build{align-items:flex-start;justify-content:center;padding:6vh 0 0;}
  .mhx-build-rig{width:min(66vw,440px);}
  .mhx-build-progress{top:-8%;}
  .mhx-vignette{background:
    linear-gradient(180deg, rgba(243,224,206,.4) 0%, rgba(243,224,206,.18) 30%, rgba(243,224,206,.93) 72%, rgba(243,224,206,.97) 100%);}
  .mhx-content{justify-content:flex-end;padding-bottom:clamp(84px,13vh,140px);}
  .mhx-logo{width:clamp(150px,26vw,210px);}
  .mhx-sub{max-width:44ch;}
}
@media (max-width:640px){
  .mhx-hero{min-height:560px;}
  .mhx-build-rig{width:min(72vw,320px);}
  .mhx-build-progress{font-size:9.5px;padding:6px 10px;}
  .mhx-eyebrow{letter-spacing:.18em;font-size:10px;}
  .mhx-title{font-size:clamp(2.6rem,15vw,4.6rem);letter-spacing:-.03em;}
  .mhx-title--long{font-size:clamp(1.9rem,10vw,3.4rem);}
  .mhx-title.mhx-title--numword{font-size:clamp(2rem,14vw,3.4rem);}
  .mhx-line--out{-webkit-text-stroke-width:1px;}
  .mhx-actions{flex-direction:column;align-items:stretch;}
  .mhx-btn{justify-content:center;}
  .mhx-grid{background-size:54px 54px;}
}
@media (max-width:1100px) and (orientation:landscape){
  .mhx-hero{min-height:520px;}
  .mhx-build-rig{width:min(40vw,300px);}
}
/* Barrierefreiheit: Bewegung reduzieren */
@media (prefers-reduced-motion:reduce){
  .mhx-hero *,.mhx-hero *::before,.mhx-hero *::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;}
  .mhx-sweep{display:none;}
  .mhx-panel{transform:translate(0,0) rotate(0) scale(1);opacity:1;}
}

/* ============ HERO · PROJEKT-FOTO-VARIANTE (mhx-hero-projekt-hell.html) ============ */
.mhx-hero { opacity: 1 !important; } .mhx-title { opacity: 1 !important; }
/* ==========================================================================
   [FARBEN] Helle Holz-Palette – Akzent bleibt #ba5512
   ========================================================================== */
.mhx-hero { opacity: 0; }
.mhx-hero.mhx-hero-ready { opacity: 1; transition: opacity .4s ease; }
.mhx-hero{
  --mhx-ink:#1c140d;
  --mhx-wood:#332519;
  --mhx-cream:#f3e0ce;
  --mhx-gold:#ba5512;
  --mhx-gold-lt:#ec883c;
  --mhx-accent-ink:#8e3f0b;
  --mhx-muted:rgba(28,20,13,.68);
  --mhx-hair:rgba(28,20,13,.14);
}
.mhx-hero{
  --mhx-vw:100vw;
  position:relative;
  box-sizing:border-box;
  width:var(--mhx-vw); max-width:var(--mhx-vw);
  margin-left:calc(50% - var(--mhx-vw) / 2);
  margin-right:calc(50% - var(--mhx-vw) / 2);
  display:grid;
  min-height:600px;
  min-height:100svh;
  min-height:100dvh;
  overflow:hidden; overflow:clip;
  isolation:isolate;
  background:radial-gradient(120% 90% at 12% 105%, #efdbc8 0%, #e8ccb0 46%, #d5a87b 100%);
  color:var(--mhx-ink);
  font-family:"Inter","Helvetica Neue",Arial,system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}
.mhx-hero *,.mhx-hero *::before,.mhx-hero *::after{box-sizing:border-box;}
.mhx-hero p,.mhx-hero h1,.mhx-hero dl,.mhx-hero dd,.mhx-hero dt{margin:0;padding:0;}
/* --- Ebenen --------------------------------------------------------------- */
.mhx-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;
  z-index:1;opacity:.4;mix-blend-mode:soft-light;}
.mhx-grid{position:absolute;inset:-2px;z-index:2;pointer-events:none;opacity:.32;
  background-image:
    linear-gradient(to right, var(--mhx-hair) 1px, transparent 1px),
    linear-gradient(to bottom, var(--mhx-hair) 1px, transparent 1px);
  background-size:clamp(60px,7vw,110px) clamp(60px,7vw,110px);
  -webkit-mask-image:radial-gradient(120% 100% at 78% 40%, #000 0%, transparent 72%);
          mask-image:radial-gradient(120% 100% at 78% 40%, #000 0%, transparent 72%);
  animation:mhx-gridin 1.6s cubic-bezier(.2,.7,.2,1) .2s both;}
@keyframes mhx-gridin{from{opacity:0;transform:scale(1.06)}to{opacity:.32;transform:none}}
.mhx-vignette{position:absolute;inset:0;z-index:6;pointer-events:none;
  background:
    linear-gradient(100deg, rgba(243,224,206,.94) 0%, rgba(243,224,206,.74) 34%, rgba(243,224,206,.16) 62%, rgba(243,224,206,.5) 100%),
    radial-gradient(75% 65% at 50% 118%, rgba(221,186,152,.72), transparent 70%);}
.mhx-sweep{position:absolute;top:-30%;left:-45%;width:60%;height:170%;z-index:5;
  pointer-events:none;mix-blend-mode:overlay;opacity:.5;
  background:linear-gradient(100deg, transparent 0%, rgba(135,79,34,.3) 42%, rgba(109,62,24,.42) 50%, rgba(135,79,34,.3) 58%, transparent 100%);
  filter:blur(6px);
  animation:mhx-sweep 11s cubic-bezier(.45,0,.55,1) 1.1s infinite;}
@keyframes mhx-sweep{0%{transform:translateX(0) skewX(-12deg)}55%,100%{transform:translateX(280%) skewX(-12deg)}}
/* ==========================================================================
   Projektfoto mit Ken-Burns-Zoom + Blaupausen-Eckrahmen
   ========================================================================== */
.mhx-photo-frame{position:absolute;inset:0;z-index:3;overflow:hidden;}
.mhx-photo{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 42%;
  filter:brightness(.94) contrast(1.04) saturate(.97) sepia(.04);
  transform-origin:54% 42%;
  animation:mhx-kenburns 24s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes mhx-kenburns{from{transform:scale(1.02)}to{transform:scale(1.11)}}
.mhx-corner{position:absolute;width:clamp(26px,3.4vw,42px);height:clamp(26px,3.4vw,42px);
  border-color:var(--mhx-gold-lt);opacity:0;
  animation:mhx-cornerin 1s cubic-bezier(.2,.8,.2,1) both;}
.mhx-corner--tl{top:clamp(16px,3vw,34px);left:clamp(16px,3vw,34px);
  border-top:2px solid var(--mhx-gold-lt);border-left:2px solid var(--mhx-gold-lt);
  animation-delay:.5s;}
.mhx-corner--tr{top:clamp(16px,3vw,34px);right:clamp(16px,3vw,34px);
  border-top:2px solid var(--mhx-gold-lt);border-right:2px solid var(--mhx-gold-lt);
  animation-delay:.65s;}
.mhx-corner--bl{bottom:clamp(16px,3vw,34px);left:clamp(16px,3vw,34px);
  border-bottom:2px solid var(--mhx-gold-lt);border-left:2px solid var(--mhx-gold-lt);
  animation-delay:.8s;}
.mhx-corner--br{bottom:clamp(16px,3vw,34px);right:clamp(16px,3vw,34px);
  border-bottom:2px solid var(--mhx-gold-lt);border-right:2px solid var(--mhx-gold-lt);
  animation-delay:.95s;}
@keyframes mhx-cornerin{
  from{opacity:0;transform:scale(1.6);}
  60%{opacity:.85;}
  to{opacity:.65;transform:scale(1);}
}
.mhx-photo-scan{position:absolute;left:0;right:0;height:2px;top:0;z-index:4;
  background:linear-gradient(90deg, transparent, var(--mhx-gold-lt) 45%, #fff 50%, var(--mhx-gold-lt) 55%, transparent);
  box-shadow:0 0 16px 2px rgba(236,136,60,.6);
  opacity:0;
  animation:mhx-photoscan 2.6s cubic-bezier(.4,0,.2,1) .3s 1 both;}
@keyframes mhx-photoscan{
  0%{top:0;opacity:0;}
  8%{opacity:.9;}
  92%{opacity:.9;}
  100%{top:100%;opacity:0;}
}
/* ==========================================================================
   Inhalt
   ========================================================================== */
.mhx-content{position:relative;z-index:7;
  display:flex;flex-direction:column;justify-content:center;
  gap:clamp(14px,2.1vh,26px);
  padding:clamp(26px,6vw,120px);
  padding-right:clamp(26px,6vw,120px);
  max-width:min(1500px,100%);}
.mhx-logo{width:clamp(190px,19vw,280px);height:auto;align-self:flex-start;
  filter:drop-shadow(0 4px 14px rgba(0,0,0,.35));
  animation:mhx-rise 1s cubic-bezier(.2,.8,.2,1) 0s both;}
.mhx-eyebrow{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;
  max-width:100%;flex-wrap:wrap;row-gap:4px;line-height:1.7;
  font-family:ui-monospace,"SF Mono","Cascadia Mono",Consolas,monospace;
  font-size:clamp(9.5px,1.05vw,12px);letter-spacing:.34em;text-transform:uppercase;
  color:var(--mhx-accent-ink);
  padding:9px 15px;border:1px solid rgba(186,85,18,.4);border-radius:999px;
  background:rgba(243,224,206,.5);backdrop-filter:blur(6px);
  animation:mhx-rise 1s cubic-bezier(.2,.8,.2,1) .05s both;}
.mhx-dot{width:6px;height:6px;border-radius:50%;background:var(--mhx-gold);
  box-shadow:0 0 0 0 rgba(186,85,18,.55);animation:mhx-pulse 2.4s ease-out infinite;}
@keyframes mhx-pulse{0%{box-shadow:0 0 0 0 rgba(186,85,18,.5)}70%,100%{box-shadow:0 0 0 11px rgba(186,85,18,0)}}
.mhx-title { opacity: 0; transition: opacity .35s ease; }
.mhx-title.mhx-ready { opacity: 1; }
.mhx-title{font-weight:800;line-height:.86;letter-spacing:-.035em;
  font-size:clamp(2.9rem,12.5vw,11.5rem);text-transform:uppercase;
  font-family:"Inter","Helvetica Neue",Arial,system-ui,-apple-system,"Segoe UI",sans-serif !important;
  max-width:100%;
  text-shadow:0 4px 24px rgba(243,224,206,.55);}
.mhx-title .mhx-line{font-family:inherit !important;}
.mhx-title--long{font-size:clamp(2.1rem,8vw,7rem);line-height:.94;}
.mhx-line{display:block;animation:mhx-rise 1.25s cubic-bezier(.16,.84,.24,1) var(--d) both;}
.mhx-line--out{color:transparent;-webkit-text-stroke:1.4px rgba(28,20,13,.8);
  text-shadow:0 0 60px rgba(186,85,18,.25);}
.mhx-line--fill{
  background:linear-gradient(100deg,var(--mhx-ink) 0%,var(--mhx-ink) 34%,var(--mhx-gold-lt) 46%,#f9e0c8 50%,var(--mhx-gold) 55%,var(--mhx-ink) 68%,var(--mhx-ink) 100%);
  background-size:300% 100%;background-position:100% 0;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:mhx-rise 1.25s cubic-bezier(.16,.84,.24,1) var(--d) both,
            mhx-shine 3.4s cubic-bezier(.4,0,.2,1) 1.25s both;}
@keyframes mhx-shine{from{background-position:100% 0}to{background-position:0 0}}
@keyframes mhx-rise{from{opacity:0;transform:translate3d(0,44px,0) skewY(1.4deg)}to{opacity:1;transform:none}}
/* ---------- Sonderfall "5-Familienhaus": Zahl + Wort, eine Zeile ---------- */
.mhx-title.mhx-title--numword{
  font-size:clamp(2.4rem,8.5vw,7rem);
  line-height:1;
  white-space:nowrap;
}
.mhx-num-wrap{
  position:relative;
  display:inline-flex;
  align-items:baseline;
  white-space:nowrap;
  padding-bottom:.12em;
}
.mhx-num-wrap::after{
  content:"";position:absolute;left:.03em;bottom:0;
  width:1.05em;height:2px;
  background:linear-gradient(90deg,var(--mhx-gold) 0%,transparent 100%);
  transform:scaleX(0);transform-origin:left center;
  animation:mhx-tick .5s cubic-bezier(.2,.8,.2,1) .95s both;
}
@keyframes mhx-tick{to{transform:scaleX(1)}}
.mhx-num{
  position:relative;z-index:1;display:inline-block;
  font-size:1.4em;line-height:1;
  margin-right:.02em;
  padding:0 .02em;
  background:linear-gradient(135deg,#f2ba8c 0%,var(--mhx-gold-lt) 38%,var(--mhx-gold) 72%,#8e3f0b 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 6px 14px rgba(186,85,18,.22));
  animation:mhx-num-pop .8s cubic-bezier(.22,1.3,.4,1) .05s both,
            mhx-num-glow 3.2s ease-in-out 1s infinite alternate;
}
@keyframes mhx-num-pop{
  from{opacity:0;transform:translateY(.18em) scale(.6);}
  to{opacity:1;transform:translateY(0) scale(1);}
}
@keyframes mhx-num-glow{
  from{filter:drop-shadow(0 6px 10px rgba(186,85,18,.18));}
  to{filter:drop-shadow(0 10px 24px rgba(186,85,18,.4));}
}
.mhx-numword{
  position:relative;z-index:2;display:inline-block;line-height:1;
  background:linear-gradient(100deg,var(--mhx-ink) 0%,var(--mhx-ink) 34%,var(--mhx-gold-lt) 46%,#f9e0c8 50%,var(--mhx-gold) 55%,var(--mhx-ink) 68%,var(--mhx-ink) 100%);
  background-size:300% 100%;background-position:100% 0;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:mhx-rise 1.25s cubic-bezier(.16,.84,.24,1) .32s both,
            mhx-shine 3.4s cubic-bezier(.4,0,.2,1) 1.25s both;
}
.mhx-sub{max-width:38ch;font-size:clamp(15px,1.55vw,21px);line-height:1.55;
  color:var(--mhx-muted);text-wrap:balance;text-shadow:0 2px 16px rgba(243,224,206,.5);
  animation:mhx-rise 1.1s cubic-bezier(.2,.8,.2,1) var(--d) both;}
/* Buttons */
.mhx-actions{display:flex;flex-wrap:wrap;gap:12px;
  animation:mhx-rise 1.1s cubic-bezier(.2,.8,.2,1) var(--d) both;}
.mhx-btn{position:relative;display:inline-flex;align-items:center;gap:10px;
  padding:15px 26px;border-radius:2px;text-decoration:none;overflow:hidden;
  font-size:14px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease,color .3s ease,border-color .3s ease;}
.mhx-btn:hover{transform:translateY(-2px);}
.mhx-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .35s cubic-bezier(.2,.8,.2,1);}
.mhx-btn:hover svg{transform:translateX(5px);}
.mhx-btn--solid{color:#fff;
  background:linear-gradient(100deg,#d36c22,var(--mhx-gold) 55%,#8e3f0b);
  box-shadow:0 12px 34px -12px rgba(186,85,18,.5);}
.mhx-btn--solid::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);
  transform:translateX(-120%);transition:transform .7s cubic-bezier(.4,0,.2,1);}
.mhx-btn--solid:hover::after{transform:translateX(120%);}
.mhx-btn--ghost{color:var(--mhx-ink);border:1px solid var(--mhx-hair);
  background:rgba(243,224,206,.55);backdrop-filter:blur(4px);}
.mhx-btn--ghost:hover{border-color:rgba(186,85,18,.65);color:var(--mhx-accent-ink);}
.mhx-btn:focus-visible{outline:2px solid var(--mhx-gold);outline-offset:3px;}
/* Kennzahlen */
.mhx-specs{display:flex;flex-wrap:wrap;gap:clamp(20px,3vw,46px);margin-top:4px;
  animation:mhx-rise 1.1s cubic-bezier(.2,.8,.2,1) var(--d) both;}
.mhx-specs dt{font-family:ui-monospace,"SF Mono",Consolas,monospace;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--mhx-muted);}
.mhx-specs dd{margin-top:3px;font-size:clamp(16px,1.7vw,22px);font-weight:700;color:var(--mhx-ink);
  text-shadow:0 2px 14px rgba(243,224,206,.5);}
/* HUD */
.mhx-mark{position:absolute;z-index:7;top:clamp(20px,3.4vw,44px);right:clamp(20px,3.4vw,44px);
  width:46px;height:46px;display:grid;place-items:center;border-radius:50%;
  border:1px solid rgba(186,85,18,.45);color:var(--mhx-accent-ink);
  background:rgba(243,224,206,.55);backdrop-filter:blur(4px);
  font-size:12px;font-weight:700;letter-spacing:.1em;
  animation:mhx-fadein 1.4s ease 1.2s both;}
@keyframes mhx-fadein{from{opacity:0}to{opacity:1}}
.mhx-scrollhintwrap{position:absolute;z-index:7;left:50%;
  bottom:clamp(18px,3vw,34px);transform:translateX(-50%);pointer-events:none;}
.mhx-scrollhint{position:relative;width:26px;height:42px;
  border:2px solid rgba(28,20,13,.35);border-radius:14px;
  animation:mhx-fadein 1.4s ease 1.6s both;}
.mhx-scrollhint::before{content:"";position:absolute;left:50%;top:8px;
  width:4px;height:8px;margin-left:-2px;border-radius:3px;
  background:var(--mhx-gold);
  animation:mhx-wheel 1.8s ease-in-out infinite;}
@keyframes mhx-wheel{
  0%,100%{transform:translateY(0);opacity:1}
  60%{transform:translateY(12px);opacity:0}}
/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1100px){
  .mhx-photo{object-position:56% 38%;}
  .mhx-vignette{background:
    linear-gradient(180deg, rgba(243,224,206,.5) 0%, rgba(243,224,206,.28) 28%, rgba(243,224,206,.92) 74%, rgba(243,224,206,.98) 100%);}
  .mhx-content{justify-content:flex-end;padding-bottom:clamp(84px,13vh,140px);}
  .mhx-logo{width:clamp(150px,26vw,210px);}
  .mhx-sub{max-width:44ch;}
  .mhx-specs{gap:clamp(16px,5vw,34px);}
}
@media (max-width:640px){
  .mhx-hero{min-height:560px;}
  .mhx-eyebrow{letter-spacing:.18em;font-size:10px;}
  .mhx-title{font-size:clamp(2.6rem,15vw,4.6rem);letter-spacing:-.03em;}
  .mhx-title--long{font-size:clamp(1.9rem,10vw,3.4rem);}
  .mhx-title.mhx-title--numword{font-size:clamp(2rem,14vw,3.4rem);}
  .mhx-line--out{-webkit-text-stroke-width:1px;}
  .mhx-actions{flex-direction:column;align-items:stretch;}
  .mhx-btn{justify-content:center;}
  .mhx-specs{gap:16px 26px;}
  .mhx-specs div:nth-child(3){display:none;}
  .mhx-grid{background-size:54px 54px;}
  .mhx-corner{width:20px;height:20px;}
}
@media (max-width:1100px) and (orientation:landscape){
  .mhx-hero{min-height:520px;}
  .mhx-specs{display:none;}
}
/* Barrierefreiheit: Bewegung reduzieren */
@media (prefers-reduced-motion:reduce){
  .mhx-hero *,.mhx-hero *::before,.mhx-hero *::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;}
  .mhx-sweep,.mhx-photo-scan{display:none;}
  .mhx-photo{transform:scale(1.02);}
  .mhx-corner{opacity:.65;transform:none;}
}

/* ============ LEISTUNGEN & PARTNER (kwi-leistungen-hell.html) ============ */
.kwi{
    position:relative;
    box-sizing:border-box;
    width:100%;
    overflow:hidden;
    border-radius:20px;
    padding:clamp(30px,4.5vw,54px) clamp(24px,4vw,52px);
    color:#1c140d;
    font-family:inherit;
    background: radial-gradient(1100px 620px at 12% 8%, #efdbc8 0%, #e7c9ac 55%, #d5a87b 100%);
    border:1px solid rgba(78,48,24,.16);
    box-shadow:0 10px 40px rgba(78,48,24,.12);
  }
  .kwi *,.kwi *::before,.kwi *::after{box-sizing:border-box;}
  :where(.kwi p,.kwi h3,.kwi h4,.kwi ul){margin:0;padding:0;}
  .kwi a{color:inherit;}
  .kwi-rings{
    position:absolute;right:-14%;top:-30%;z-index:0;
    width:min(46vw,540px);aspect-ratio:1;
    animation:kwi-spin 150s linear infinite;
    pointer-events:none;
  }
  @keyframes kwi-spin{to{transform:rotate(360deg)}}
  .kwi-inner{position:relative;z-index:3;}
  .kwi-eyebrow{
    display:flex;align-items:center;gap:10px;
    font-family:ui-monospace,"SF Mono",Consolas,monospace;
    font-size:12px;font-weight:700;letter-spacing:.28em;text-transform:uppercase;
    color:#8e3f0b;margin-bottom:28px;
  }
  .kwi-dot{
    width:7px;height:7px;border-radius:50%;background:#ba5512;flex:0 0 auto;
    animation:kwi-pulse 2.4s ease-out infinite;
  }
  @keyframes kwi-pulse{
    0%{box-shadow:0 0 0 0 rgba(186,85,18,.55)}
    70%,100%{box-shadow:0 0 0 10px rgba(186,85,18,0)}
  }
  /* ---------- Grid ---------- */
  .kwi-grid{
    display:grid;
    grid-template-columns:minmax(220px,270px) 1fr;
    gap:clamp(28px,4vw,48px);
    align-items:start;
  }
  /* ---------- Leistungen (eigene getönte Box, wie kwu-insta) ---------- */
  .kwi-services{
    padding:24px 24px;
    border-radius:16px;
    background:rgba(243,224,206,.55);
    border:1px solid rgba(78,48,24,.14);
  }
  .kwi-service-group{margin-bottom:24px;}
  .kwi-service-group:last-child{margin-bottom:0;}
  .kwi-service-title{
    font-family:ui-monospace,"SF Mono",Consolas,monospace;
    font-size:12px;letter-spacing:.18em;text-transform:uppercase;
    color:#8e3f0b;margin-bottom:14px;
    padding-bottom:8px;
    border-bottom:1px solid rgba(78,48,24,.14);
  }
  .kwi-service-list{list-style:none;display:flex;flex-direction:column;gap:12px;}
  .kwi-service-list li{
    padding-left:14px;
    border-left:2px solid rgba(186,85,18,.4);
    display:flex;flex-direction:column;gap:2px;
  }
  .kwi-service-list strong{
    font-size:14px;font-weight:700;color:#1c140d;
  }
  .kwi-service-list span{
    font-size:13px;line-height:1.5;color:rgba(28,20,13,.62);
  }
  /* ---------- Content-Grid: Feature-Zeilen (Icon + Text, wie kwu-feature) ---------- */
  .kwi-content{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:28px 40px;
  }
  .kwi-feature{
    display:grid;
    grid-template-columns:46px 1fr;
    gap:16px;
    align-items:start;
  }
  .kwi-feature-icon{
    width:46px;height:46px;
    display:grid;place-items:center;
    border-radius:12px;
    background:rgba(186,85,18,.1);
    flex:0 0 auto;
  }
  .kwi-feature-icon svg{
    width:24px;height:24px;
    fill:none;stroke:#8e3f0b;stroke-width:1.7;
    stroke-linecap:round;stroke-linejoin:round;
  }
  .kwi-feature-body h4{
    font-size:clamp(16px,1.5vw,18px);
    line-height:1.3;font-weight:800;
    color:#1c140d;
    margin-bottom:8px;
  }
  .kwi-kicker{
    font-family:ui-monospace,"SF Mono",Consolas,monospace;
    font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
    color:#8e3f0b;margin-bottom:8px;
  }
  .kwi-feature-body p{
    font-size:14px;line-height:1.7;
    color:rgba(28,20,13,.68);
  }
  .kwi-feature-body p + p{margin-top:10px;}
  .kwi-feature-body a{
    color:#8e3f0b;text-decoration:underline;text-decoration-color:rgba(142,63,11,.45);
    text-underline-offset:2px;
  }
  .kwi-feature-body a:hover{color:#1c140d;text-decoration-color:#1c140d;}
  .kwi-more{
    display:inline-flex;align-items:center;gap:8px;
    margin-top:14px;
    font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
    color:#8e3f0b;text-decoration:none !important;
    border-bottom:1px solid rgba(142,63,11,.45);
    padding-bottom:3px;
    transition:color .25s ease, border-color .25s ease;
  }
  .kwi-more span{transition:transform .3s ease;}
  .kwi-more:hover{color:#1c140d;border-color:#1c140d;}
  .kwi-more:hover span{transform:translateX(4px);}
  /* ---------- Einblendung beim Scrollen ---------- */
  .kwi-rev{opacity:0;transform:translateY(20px);
    transition:opacity .8s ease, transform .8s ease;}
  .kwi-rev.kwi-in{opacity:1;transform:translateY(0);}
  /* ---------- Responsive ---------- */
  @media (max-width:900px){
    .kwi-grid{grid-template-columns:1fr;}
    .kwi-services{
      display:grid;grid-template-columns:1fr 1fr;gap:24px;
    }
    .kwi-service-group{margin-bottom:0;}
  }
  @media (max-width:620px){
    .kwi-services{grid-template-columns:1fr;gap:20px;}
    .kwi-content{grid-template-columns:1fr;}
  }
  @media (max-width:480px){
    .kwi-feature{grid-template-columns:1fr;}
    .kwi-feature-icon{margin-bottom:4px;}
  }
  /* ---------- Reduzierte Bewegung ---------- */
  @media (prefers-reduced-motion:reduce){
    .kwi-rings,.kwi-dot{animation:none;}
    .kwi-rev{opacity:1;transform:none;transition:none;}
  }

/* ============ BAUPROJEKT-FEATURE-KARTE (helles Split-Panel, wie kwa-card) (kwv-feature-karte-hell.html) ============ */
.kwv-wrap {
    container-type: inline-size;
    container-name: kwv;
    width: 100%;
  }
  .kwv-wrap *, .kwv-wrap *::before, .kwv-wrap *::after { box-sizing: border-box; }

  .kwv-hero {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    overflow: hidden;
    border-radius: 20px;
    background: radial-gradient(1100px 620px at 88% 6%, #efdbc8 0%, #e7c9ac 55%, #d5a87b 100%);
    border: 1px solid rgba(78, 48, 24, .16);
    box-shadow: 0 14px 46px rgba(70, 47, 27, .18);
  }

  /* ---------- Bildseite ---------- */
  .kwv-media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 10;
  }
  .kwv-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.08);
    animation: kwv-kenburns 32s ease-in-out infinite alternate;
  }
  @keyframes kwv-kenburns {
    from { transform: scale(1.08) translate(0, 0); }
    to   { transform: scale(1.16) translate(-1.4%, 1.2%); }
  }
  /* dezente Abdunkelung nur oben, damit das Badge lesbar bleibt — der
     Rest des Fotos bleibt unverdeckt */
  .kwv-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(16,13,9,.32) 0%, rgba(16,13,9,0) 42%);
    pointer-events: none;
  }
  .kwv-badge {
    position: absolute;
    top: 16px; left: 16px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 15px;
    border-radius: 99px;
    background: rgba(16, 13, 9, .72);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(186, 85, 18, .5);
    font-family: ui-monospace, "SF Mono", Consolas, monospace;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #ec883c;
  }
  .kwv-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #ba5512;
    animation: kwv-pulse 2.2s ease-out infinite;
  }
  @keyframes kwv-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(186,85,18,.55); }
    70%, 100% { box-shadow: 0 0 0 10px rgba(186,85,18,0); }
  }

  /* ---------- Textseite (helles Panel, wie der Rest der Seite) ---------- */
  .kwv-panel {
    position: relative;
    padding: clamp(28px, 4.5vw, 48px) clamp(24px, 4vw, 44px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
    overflow: hidden;
  }
  /* dezente Jahresringe im Panel-Hintergrund, wie bei kwa/kwn */
  .kwv-panel::before {
    content: "";
    position: absolute;
    right: -140px;
    bottom: -140px;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    box-shadow:
      0 0 0 1px  rgba(186, 85, 18, .1),
      0 0 0 40px rgba(186, 85, 18, .06),
      0 0 0 90px rgba(186, 85, 18, .04),
      0 0 0 150px rgba(186, 85, 18, .025);
    pointer-events: none;
  }

  .kwv-title {
    position: relative;
    z-index: 1;
    margin: 0;
    font-family: inherit;
    font-weight: 300;
    font-size: clamp(24px, 3.6cqw, 40px);
    line-height: 1.14;
    color: #1c140d;
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: normal;
  }
  .kwv-title b { font-family: inherit; font-weight: 800; color: #8e3f0b; }

  .kwv-sub {
    position: relative;
    z-index: 1;
    margin: 0;
    font-size: clamp(14.5px, 1.5vw, 16.5px);
    line-height: 1.65;
    color: rgba(28, 20, 13, .7);
    max-width: 52ch;
  }

  .kwv-chips {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 2px 0 0;
    padding: 0;
    list-style: none;
  }
  .kwv-chips li {
    padding: 7px 14px;
    border-radius: 99px;
    border: 1px solid rgba(28, 20, 13, .22);
    font-size: 12.5px;
    font-weight: 600;
    color: rgba(28, 20, 13, .82);
  }
  .kwv-chips li.kwv-chip-accent {
    border-color: rgba(186, 85, 18, .65);
    color: #8e3f0b;
  }

  .kwv-cta {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
    padding: 16px 30px;
    border-radius: 8px;
    background: linear-gradient(100deg, #d36c22, #ba5512 55%, #8e3f0b);
    color: #fff !important;
    text-decoration: none !important;
    font-size: 13.5px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    width: fit-content;
    box-shadow: 0 14px 34px -10px rgba(186, 85, 18, .5);
    transition: transform .3s ease, box-shadow .3s ease, gap .3s ease;
  }
  .kwv-cta svg {
    width: 18px; height: 18px;
    fill: none; stroke: currentColor; stroke-width: 1.8;
    stroke-linecap: round; stroke-linejoin: round;
    transition: transform .3s ease;
  }
  .kwv-cta:hover {
    gap: 16px;
    transform: translateY(-3px);
    box-shadow: 0 20px 40px -10px rgba(186, 85, 18, .6);
  }
  .kwv-cta:hover svg { transform: translateX(4px); }

  /* ---------- Scroll-Einblendung ---------- */
  .kwv-rev {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .8s ease, transform .8s ease;
  }
  .kwv-hero.kwv-in .kwv-rev { opacity: 1; transform: translateY(0); }
  .kwv-hero.kwv-in .kwv-badge { transition-delay: .05s; }
  .kwv-hero.kwv-in .kwv-title { transition-delay: .12s; }
  .kwv-hero.kwv-in .kwv-sub   { transition-delay: .22s; }
  .kwv-hero.kwv-in .kwv-chips { transition-delay: .32s; }
  .kwv-hero.kwv-in .kwv-cta   { transition-delay: .42s; }

  /* ---------- Breites Layout: Split-Panel wie kwa-card ---------- */
  @container kwv (min-width: 720px) {
    .kwv-hero { grid-template-columns: 1.05fr 1fr; }
    .kwv-media { aspect-ratio: auto; min-height: 460px; height: 100%; }
  }
  @container kwv (min-width: 1000px) {
    .kwv-media { min-height: 520px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .kwv-media img, .kwv-dot { animation: none; }
    .kwv-rev { opacity: 1; transform: none; transition: none; }
  }

/* ============ BAUFORTSCHRITT-MENÜ (Grid, 4 Gebäude, helle Karten wie kwa/kwm) (kwb-baufortschritt-hell.html) ============ */
.kwb-wrap { width: 100%; position: relative; }
  .kwb-wrap * { box-sizing: border-box; }
  /* dezente Jahresringe im Hintergrund der ganzen Sektion */
  .kwb-rings {
    position: absolute;
    right: -8%;
    top: -18%;
    width: min(38vw, 460px);
    aspect-ratio: 1;
    opacity: .35;
    pointer-events: none;
    z-index: 0;
  }
  .kwb-eyebrow {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: ui-monospace, "SF Mono", Consolas, monospace;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: #8e3f0b;
    margin: 0 0 8px;
  }
  .kwb-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #ba5512;
    animation: kwb-pulse 2.4s ease-out infinite;
  }
  @keyframes kwb-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(186,85,18,.5); }
    70%, 100% { box-shadow: 0 0 0 10px rgba(186,85,18,0); }
  }
  .kwb-heading {
    position: relative;
    z-index: 1;
    margin: 0 0 24px;
    font-family: inherit;
    font-weight: 300;
    font-size: clamp(22px, 3vw, 32px);
    color: #1c140d;
  }
  .kwb-heading b { font-family: inherit; font-weight: 800; color: #ba5512; }
  .kwb-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    width: 100%;
    margin: 0;
    padding: 0 0 10px;
  }
  .kwb-card {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none !important;
    background: radial-gradient(700px 450px at 15% 15%, #efdbc8 0%, #e7c9ac 60%, #d5a87b 100%);
    border: 1px solid rgba(78, 48, 24, .16);
    box-shadow: 0 10px 32px rgba(70, 47, 27, .16);
    opacity: 0;
    transform: translateY(20px);
    transition: transform .35s ease, box-shadow .35s ease, opacity .7s ease, transform .7s ease;
  }
  .kwb-wrap.kwb-in .kwb-card { opacity: 1; transform: translateY(0); }
  .kwb-wrap.kwb-in .kwb-card:nth-child(1) { transition-delay: .05s; }
  .kwb-wrap.kwb-in .kwb-card:nth-child(2) { transition-delay: .15s; }
  .kwb-wrap.kwb-in .kwb-card:nth-child(3) { transition-delay: .25s; }
  .kwb-wrap.kwb-in .kwb-card:nth-child(4) { transition-delay: .35s; }
  .kwb-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 22px 48px rgba(70, 47, 27, .24);
  }
  /* ---------- Bildseite: nur oben, kein Vollflächen-Overlay mehr ---------- */
  .kwb-media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 10;
  }
  .kwb-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .6s ease;
  }
  .kwb-card:hover .kwb-media img { transform: scale(1.05); }
  /* dezente Abdunkelung nur oben, damit das Badge lesbar bleibt */
  .kwb-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(16,13,9,.28) 0%, rgba(16,13,9,0) 42%);
    pointer-events: none;
  }
  /* ---------- Textseite: helles Panel, wie der Rest der Seite ---------- */
  .kwb-panel {
    position: relative;
    flex: 1 1 auto;
    padding: 16px 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .kwb-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
  }
  .kwb-name {
    font-size: clamp(15px, 1.8vw, 18px);
    font-weight: 800;
    letter-spacing: .01em;
    line-height: 1.2;
    color: #1c140d;
  }
  .kwb-pct {
    font-size: clamp(17px, 2.1vw, 22px);
    font-weight: 800;
    letter-spacing: .01em;
    color: #8e3f0b;
    white-space: nowrap;
  }
  /* Fortschrittsbalken — Breite über --p (0–100) */
  .kwb-bar {
    position: relative;
    height: 8px;
    border-radius: 99px;
    background: rgba(28, 20, 13, .12);
    overflow: hidden;
  }
  .kwb-bar::before {
    content: "";
    position: absolute;
    inset: 0;
    width: calc(var(--p, 0) * 1%);
    border-radius: 99px;
    background: linear-gradient(90deg, #8e3f0b, #ba5512 55%, #ec883c);
    transition: width 1.1s cubic-bezier(.25, .8, .3, 1);
  }
  .kwb-card[style*="--p:100"] .kwb-bar::before,
  .kwb-card[style*="--p: 100"] .kwb-bar::before {
    background: linear-gradient(90deg, #227a3a, #2f9e44, #6fe08a);
  }
  .kwb-cta {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #8e3f0b;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color .3s ease, gap .3s ease;
  }
  .kwb-cta::after { content: "→"; transition: transform .3s ease; }
  .kwb-card:hover .kwb-cta { color: #1c140d; gap: 10px; }
  /* Badge für fertiggestellte Gebäude — sitzt auf dem Foto, bleibt
     dunkler Chip mit Grün-Akzent (konsistent mit "Verfügbar" andernorts) */
  .kwb-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 13px;
    border-radius: 99px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #6fe08a;
    background: rgba(16, 13, 9, .78);
    border: 1px solid rgba(47, 158, 68, .5);
    backdrop-filter: blur(3px);
  }
  .kwb-badge-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #6fe08a;
  }
  @media (max-width: 700px) {
    .kwb-grid { grid-template-columns: 1fr; gap: 18px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .kwb-dot { animation: none; }
    .kwb-card, .kwb-media img, .kwb-bar::before, .kwb-cta, .kwb-cta::after {
      transition: none;
    }
    .kwb-card { opacity: 1; transform: none; }
  }

/* ============ WOHNUNGS-INSERAT (kwa-wohnungsinserat-hell.html) ============ */
.kwa-wrap {
    container-type: inline-size;
    container-name: kwa;
    width: 100%;
    margin-block: clamp(28px, 4vw, 48px);
  }
  .kwa-wrap * { box-sizing: border-box; }
  .kwa-card {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    overflow: hidden;
    border-radius: 16px;
    background: radial-gradient(900px 500px at 80% 20%, #efdbc8 0%, #e7c9ac 60%, #d5a87b 100%);
    text-decoration: none !important;
    color: #1c140d;
    box-shadow: 0 10px 32px rgba(70, 47, 27, .16);
    transition: transform .4s ease, box-shadow .4s ease;
  }
  .kwa-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 22px 48px rgba(70, 47, 27, .24);
  }
  /* ---------- Bildseite ---------- */
  .kwa-media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 10;
  }
  .kwa-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.06);
    animation: kwa-kenburns 26s ease-in-out infinite alternate;
  }
  @keyframes kwa-kenburns {
    from { transform: scale(1.06) translate(0, 0); }
    to   { transform: scale(1.14) translate(-1.5%, 1.5%); }
  }
  .kwa-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(16,13,9,.25) 0%, rgba(16,13,9,0) 35%);
    pointer-events: none;
  }
  /* Badge auf dem Bild — bleibt dunkler Chip, sitzt auf dem Foto */
  .kwa-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 15px;
    border-radius: 99px;
    background: rgba(16, 13, 9, .78);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(186, 85, 18, .5);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #ec883c;
  }
  .kwa-badge::before {
    content: "";
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #ba5512;
    animation: kwa-pulse 1.8s ease-in-out infinite;
  }
  @keyframes kwa-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(186, 85, 18, .55); }
    60%      { box-shadow: 0 0 0 9px rgba(186, 85, 18, 0); }
  }
  /* ---------- Info-Panel ---------- */
  .kwa-panel {
    position: relative;
    padding: 30px 28px 28px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
    overflow: hidden;
  }
  /* dezente Jahresringe im Panel-Hintergrund */
  .kwa-panel::before {
    content: "";
    position: absolute;
    right: -140px;
    bottom: -140px;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    box-shadow:
      0 0 0 1px  rgba(186, 85, 18, .1),
      0 0 0 40px rgba(186, 85, 18, .06),
      0 0 0 90px rgba(186, 85, 18, .04),
      0 0 0 150px rgba(186, 85, 18, .025);
    pointer-events: none;
  }
  .kwa-eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: rgba(28, 20, 13, .58);
    margin: 0;
  }
  .kwa-title {
    margin: 0;
    /* erbt die Fließtext-Schrift statt der Theme-Überschriftenschrift */
    font-family: inherit;
    letter-spacing: normal;
    text-transform: none;
    font-size: clamp(17px, 3.8cqw, 30px);
    line-height: 1.22;
    font-weight: 300;
    color: #1c140d;
    overflow-wrap: break-word;
  }
  .kwa-title b { font-family: inherit; }
  .kwa-title b { font-weight: 800; color: #8e3f0b; }
  .kwa-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 2px 0 0;
    padding: 0;
    list-style: none;
  }
  .kwa-chips li {
    padding: 7px 14px;
    border-radius: 99px;
    border: 1px solid rgba(28, 20, 13, .22);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .04em;
    color: rgba(28, 20, 13, .82);
    white-space: nowrap;
  }
  .kwa-chips li.kwa-chip-gold {
    border-color: rgba(186, 85, 18, .65);
    color: #8e3f0b;
  }
  .kwa-priceline {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 6px;
    padding-top: 18px;
    border-top: 1px solid rgba(28, 20, 13, .14);
  }
  .kwa-price small {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(28, 20, 13, .55);
    margin-bottom: 4px;
  }
  .kwa-price strong {
    font-size: clamp(26px, 4.6cqw, 38px);
    font-weight: 800;
    line-height: 1;
    background: linear-gradient(90deg, #8e3f0b, #ec883c, #8e3f0b);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: kwa-shine 5s linear infinite;
  }
  @keyframes kwa-shine { to { background-position: -200% 0; } }
  .kwa-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 26px;
    border-radius: 6px;
    background: linear-gradient(100deg, #d36c22, #ba5512 55%, #8e3f0b);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    transition: transform .3s ease, box-shadow .3s ease, gap .3s ease;
  }
  .kwa-cta::after { content: "→"; transition: transform .3s ease; }
  .kwa-card:hover .kwa-cta {
    gap: 15px;
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(186, 85, 18, .35);
  }
  /* ---------- Einblendung beim Scrollen ---------- */
  .kwa-rev {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .8s ease, transform .8s ease;
  }
  .kwa-card.kwa-in .kwa-rev { opacity: 1; transform: translateY(0); }
  .kwa-card.kwa-in .kwa-rev:nth-child(1) { transition-delay: .05s; }
  .kwa-card.kwa-in .kwa-rev:nth-child(2) { transition-delay: .15s; }
  .kwa-card.kwa-in .kwa-rev:nth-child(3) { transition-delay: .25s; }
  .kwa-card.kwa-in .kwa-rev:nth-child(4) { transition-delay: .35s; }
  /* ---------- Breites Layout: Split-Panel ---------- */
  @container kwa (min-width: 720px) {
    .kwa-card { grid-template-columns: 1.15fr 1fr; }
    .kwa-media { aspect-ratio: auto; min-height: 440px; height: 100%; }
    .kwa-panel { padding: 44px 46px; }
  }
  @container kwa (min-width: 1000px) {
    .kwa-media { min-height: 500px; }
  }
  /* ---------- Reduzierte Bewegung ---------- */
  @media (prefers-reduced-motion: reduce) {
    .kwa-media img, .kwa-badge::before, .kwa-price strong { animation: none; }
    .kwa-rev { opacity: 1; transform: none; transition: none; }
    .kwa-card, .kwa-cta { transition: none; }
  }

/* ============ JOB-INSERAT (kwj-jobinserat-hell.html) ============ */
.kwj-wrap {
    container-type: inline-size;
    container-name: kwj;
    width: 100%;
  }
  .kwj-wrap * { box-sizing: border-box; }
  .kwj-card {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    overflow: hidden;
    border-radius: 16px;
    background: radial-gradient(900px 500px at 20% 20%, #efdbc8 0%, #e7c9ac 60%, #d5a87b 100%);
    text-decoration: none !important;
    color: #1c140d;
    box-shadow: 0 10px 32px rgba(70, 47, 27, .16);
    transition: transform .4s ease, box-shadow .4s ease;
  }
  .kwj-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 22px 48px rgba(70, 47, 27, .24);
  }
  /* ---------- Bildseite ---------- */
  .kwj-media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 10;
  }
  .kwj-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.06);
    animation: kwj-kenburns 26s ease-in-out infinite alternate;
  }
  @keyframes kwj-kenburns {
    from { transform: scale(1.06) translate(0, 0); }
    to   { transform: scale(1.14) translate(1.5%, -1.5%); }
  }
  .kwj-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(16,13,9,.25) 0%, rgba(16,13,9,0) 35%);
    pointer-events: none;
  }
  /* Badge auf dem Bild — bleibt dunkler Chip, sitzt auf dem Foto */
  .kwj-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 15px;
    border-radius: 99px;
    background: rgba(16, 13, 9, .78);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(186, 85, 18, .55);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #e87a2c;
  }
  .kwj-badge::before {
    content: "";
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #ba5512;
    animation: kwj-pulse 1.8s ease-in-out infinite;
  }
  @keyframes kwj-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(186, 85, 18, .55); }
    60%      { box-shadow: 0 0 0 9px rgba(186, 85, 18, 0); }
  }
  /* ---------- Info-Panel ---------- */
  .kwj-panel {
    position: relative;
    padding: 30px 28px 28px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
    overflow: hidden;
  }
  /* dezente Jahresringe im Panel-Hintergrund */
  .kwj-panel::before {
    content: "";
    position: absolute;
    left: -140px;
    bottom: -140px;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    box-shadow:
      0 0 0 1px  rgba(186, 85, 18, .1),
      0 0 0 40px rgba(186, 85, 18, .06),
      0 0 0 90px rgba(186, 85, 18, .04),
      0 0 0 150px rgba(186, 85, 18, .025);
    pointer-events: none;
  }
  .kwj-eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: rgba(28, 20, 13, .58);
    margin: 0;
  }
  .kwj-title {
    margin: 0;
    /* erbt die Fließtext-Schrift statt der Theme-Überschriftenschrift */
    font-family: inherit;
    letter-spacing: normal;
    text-transform: none;
    font-size: clamp(17px, 3.8cqw, 30px);
    line-height: 1.22;
    font-weight: 300;
    color: #1c140d;
    overflow-wrap: break-word;
  }
  .kwj-title b { font-family: inherit; font-weight: 800; color: #8e3f0b; }
  .kwj-text {
    margin: 0;
    font-size: clamp(14px, 1.9cqw, 16px);
    line-height: 1.6;
    color: rgba(28, 20, 13, .72);
  }
  .kwj-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 2px 0 0;
    padding: 0;
    list-style: none;
  }
  .kwj-chips li {
    padding: 7px 14px;
    border-radius: 99px;
    border: 1px solid rgba(28, 20, 13, .22);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .04em;
    color: rgba(28, 20, 13, .82);
    white-space: nowrap;
  }
  .kwj-chips li.kwj-chip-accent {
    border-color: rgba(186, 85, 18, .65);
    color: #8e3f0b;
  }
  .kwj-bottomline {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 6px;
    padding-top: 18px;
    border-top: 1px solid rgba(28, 20, 13, .14);
  }
  .kwj-mail small {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(28, 20, 13, .55);
    margin-bottom: 4px;
  }
  .kwj-mail strong {
    font-size: clamp(15px, 2.6cqw, 20px);
    font-weight: 800;
    line-height: 1;
    background: linear-gradient(90deg, #8e3f0b, #ec883c, #8e3f0b);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: kwj-shine 5s linear infinite;
    word-break: break-all;
  }
  @keyframes kwj-shine { to { background-position: -200% 0; } }
  .kwj-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 26px;
    border-radius: 6px;
    background: linear-gradient(90deg, #9b460d, #d36c22);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    transition: transform .3s ease, box-shadow .3s ease, gap .3s ease;
  }
  .kwj-cta::after { content: "→"; transition: transform .3s ease; }
  .kwj-card:hover .kwj-cta {
    gap: 15px;
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(186, 85, 18, .38);
  }
  /* ---------- Einblendung beim Scrollen ---------- */
  .kwj-rev {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .8s ease, transform .8s ease;
  }
  .kwj-card.kwj-in .kwj-rev { opacity: 1; transform: translateY(0); }
  .kwj-card.kwj-in .kwj-rev:nth-child(1) { transition-delay: .05s; }
  .kwj-card.kwj-in .kwj-rev:nth-child(2) { transition-delay: .15s; }
  .kwj-card.kwj-in .kwj-rev:nth-child(3) { transition-delay: .25s; }
  .kwj-card.kwj-in .kwj-rev:nth-child(4) { transition-delay: .35s; }
  .kwj-card.kwj-in .kwj-rev:nth-child(5) { transition-delay: .45s; }
  /* ---------- Breites Layout: Panel links, Bild rechts ---------- */
  @container kwj (min-width: 720px) {
    .kwj-card { grid-template-columns: 1fr 1.15fr; }
    .kwj-media { order: 2; aspect-ratio: auto; min-height: 440px; height: 100%; }
    .kwj-panel { order: 1; padding: 44px 46px; }
  }
  @container kwj (min-width: 1000px) {
    .kwj-media { min-height: 500px; }
  }
  /* ---------- Reduzierte Bewegung ---------- */
  @media (prefers-reduced-motion: reduce) {
    .kwj-media img, .kwj-badge::before, .kwj-mail strong { animation: none; }
    .kwj-rev { opacity: 1; transform: none; transition: none; }
    .kwj-card, .kwj-cta { transition: none; }
  }

/* ============ NEWSLETTER-SEKTION (kwl-newsletter-hell.html) ============ */
.kwl-wrap { width: 100%; margin-block: clamp(28px, 4vw, 48px); }
  .kwl-wrap * { box-sizing: border-box; }
  .kwl-card {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    padding: clamp(36px, 6vw, 64px) clamp(28px, 6vw, 72px);
    background: radial-gradient(1000px 600px at 15% 20%, #efdbc8 0%, #e7c9ac 55%, #d5a87b 100%);
    color: #1c140d;
    box-shadow: 0 14px 40px rgba(70, 47, 27, .18);
  }
  /* Akzent-Diagonale oben rechts, wie im Hero-Cover */
  .kwl-card::before {
    content: "";
    position: absolute;
    top: 0; right: 0;
    width: min(46%, 420px);
    height: 100%;
    background: linear-gradient(135deg, transparent 45%, rgba(186,85,18,.16) 46%, rgba(217,178,140,.55) 100%);
    pointer-events: none;
  }
  /* Jahresringe im Hintergrund */
  .kwl-rings {
    position: absolute;
    right: -10%;
    top: -30%;
    width: min(48vw, 620px);
    aspect-ratio: 1;
    opacity: .5;
    animation: kwl-spin 150s linear infinite;
    pointer-events: none;
  }
  @keyframes kwl-spin { to { transform: rotate(360deg); } }
  /* schwebendes Umschlag/Papierflieger-Icon */
  .kwl-icon {
    position: absolute;
    top: clamp(26px, 5vw, 46px);
    right: clamp(28px, 6vw, 64px);
    width: clamp(70px, 8vw, 96px);
    opacity: .5;
    animation: kwl-float 6s ease-in-out infinite;
    pointer-events: none;
  }
  @keyframes kwl-float {
    0%, 100% { transform: translateY(0) rotate(-3deg); }
    50%      { transform: translateY(-10px) rotate(2deg); }
  }
  .kwl-content { position: relative; z-index: 2; max-width: 640px; }
  .kwl-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: ui-monospace, "SF Mono", Consolas, monospace;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: #8e3f0b;
    margin: 0 0 22px;
  }
  .kwl-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #ba5512;
    animation: kwl-pulse 2.4s ease-out infinite;
  }
  @keyframes kwl-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(186,85,18,.55); }
    70%, 100% { box-shadow: 0 0 0 11px rgba(186,85,18,0); }
  }
  .kwl-title {
    margin: 0 0 16px;
    font-family: inherit;
    font-weight: 300;
    font-size: clamp(28px, 4.4vw, 46px);
    line-height: 1.15;
    color: #1c140d;
  }
  .kwl-title b { font-family: inherit; font-weight: 800; color: #8e3f0b; }
  .kwl-sub {
    margin: 0 0 28px;
    font-size: clamp(15px, 1.5vw, 17.5px);
    line-height: 1.6;
    color: rgba(28, 20, 13, .72);
    max-width: 50ch;
  }
  /* ---------- Formular-Bereich: generisch fürs Newsletter-Plugin ---------- */
  .kwl-form { max-width: 560px; }
  /* Feld + Button in eine Zeile bringen (Plugin wrappt sie meist in
     <form> mit je einem <p>/<div class="tnp-field ..."> pro Element) */
  .kwl-form form {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: stretch;
  }
  .kwl-form form p,
  .kwl-form form .tnp-field {
    margin: 0 !important;
    flex: 1 1 200px;
    min-width: 180px;
  }
  /* Button-Feld soll sich nicht dehnen, sondern nur so breit wie nötig sein */
  .kwl-form form .tnp-field-button,
  .kwl-form form p:has(input[type="submit"]),
  .kwl-form form p:has(input.tnp-submit) {
    flex: 0 0 auto;
    min-width: 0;
  }
  .kwl-form form p:has(input[type="checkbox"]) {
    flex: 1 1 100%;
  }
  /* übliche Klassen des "Newsletter"-Plugins (tnp) */
  .kwl-form input.tnp-email,
  .kwl-form input[type="email"],
  .kwl-form input[type="text"] {
    width: 100%;
    height: 100%;
    padding: 14px 16px;
    border-radius: 8px;
    border: 1px solid rgba(28,20,13,.25) !important;
    background: rgba(255,255,255,.65) !important;
    color: #1c140d !important;
    font-size: 14.5px;
    margin: 0 !important;
    transition: border-color .25s ease, background .25s ease;
  }
  .kwl-form input::placeholder { color: rgba(28,20,13,.45); }
  .kwl-form input:focus {
    outline: none;
    border-color: #ba5512 !important;
    background: rgba(255,255,255,.85) !important;
  }
  .kwl-form input.tnp-submit,
  .kwl-form input[type="submit"] {
    display: block !important;
    width: auto !important;
    text-align: center !important;
    text-indent: 0 !important;
    padding: 14px 28px !important;
    border: none !important;
    border-radius: 8px !important;
    background: linear-gradient(100deg, #d36c22, #ba5512 55%, #8e3f0b) !important;
    color: #fff !important;
    font-size: 13.5px !important;
    font-weight: 800 !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
    line-height: normal !important;
    cursor: pointer;
    transition: transform .3s ease, box-shadow .3s ease;
  }
  .kwl-form button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 10px;
    width: auto !important;
    padding: 14px 28px !important;
    border: none !important;
    border-radius: 8px !important;
    background: linear-gradient(100deg, #d36c22, #ba5512 55%, #8e3f0b) !important;
    color: #fff !important;
    font-size: 13.5px !important;
    font-weight: 800 !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
    cursor: pointer;
    transition: transform .3s ease, box-shadow .3s ease;
  }
  /* falls der Button-Text in einem eigenen <span>/<i> steckt */
  .kwl-form button > * { margin: 0 auto; }
  .kwl-form input.tnp-submit:hover,
  .kwl-form input[type="submit"]:hover,
  .kwl-form button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(186, 85, 18, .35);
  }
  .kwl-form label {
    display: block;
    font-size: 12px;
    color: rgba(28,20,13,.6);
    margin-bottom: 4px;
  }
  /* Datenschutz-Checkbox-Zeile o.ä. lesbar machen */
  .kwl-form input[type="checkbox"] { margin-right: 8px; }
  .kwl-form small, .kwl-form .tnp-privacy-text {
    color: rgba(28,20,13,.55);
    font-size: 12px;
    line-height: 1.5;
  }
  /* ---------- Einblendung beim Scrollen ---------- */
  .kwl-wrap { opacity: 0; transform: translateY(24px);
    transition: opacity .8s ease, transform .8s ease; }
  .kwl-wrap.kwl-in { opacity: 1; transform: translateY(0); }
  /* ---------- Responsive ---------- */
  @media (max-width: 700px) {
    .kwl-icon { display: none; }
    .kwl-card::before { width: 55%; }
  }
  @media (prefers-reduced-motion: reduce) {
    .kwl-rings, .kwl-icon, .kwl-dot { animation: none; }
    .kwl-wrap { opacity: 1; transform: none; transition: none; }
  }


/* ---- Einwilligung + Honigtopf im Newsletter-Formular ---- */
/* Pflicht-Checkbox (Double-Opt-in, Art. 7 DSGVO). Nicht entfernen. */
.kwl-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 460px;
  margin: 4px auto 16px !important;
  text-align: left;
}
.kwl-consent input[type="checkbox"] {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: #ba5512;
  cursor: pointer;
}
.kwl-consent label {
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(28, 20, 13, .72);
  cursor: pointer;
}
.kwl-consent a {
  color: #8e3f0b;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.kwl-consent a:hover { color: #1c140d; }

/* Honigtopf gegen Bots: fuer Menschen unsichtbar, aber nicht display:none,
   damit einfache Bots das Feld trotzdem finden und ausfuellen. */
.kwl-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* Hinweiszeile ueber dem Formular (Fehlermeldungen) */
.kwl-hinweis {
  max-width: 460px;
  margin: 0 auto 16px;
  padding: 11px 15px;
  border-radius: 9px;
  background: rgba(186, 85, 18, .12);
  border: 1px solid rgba(186, 85, 18, .3);
  font-size: 13.5px;
  line-height: 1.5;
  color: #8e3f0b;
  text-align: center;
}

/* ============ FOOTER (kwf-footer-hell.html) ============ */
.kwf{
    --kwf-vw:100vw;
    position:relative;
    box-sizing:border-box;
    width:var(--kwf-vw);max-width:var(--kwf-vw);
    margin-left:calc(50% - var(--kwf-vw) / 2);
    margin-right:calc(50% - var(--kwf-vw) / 2);
    margin-top:0;margin-bottom:0;
    overflow:hidden;
    background:
      radial-gradient(900px 500px at 12% 100%, rgba(186,85,18,.09) 0%, rgba(186,85,18,0) 60%),
      radial-gradient(1200px 700px at 80% 0%, #efdbc8 0%, #e7c9ac 55%, #d5a87b 100%);
    color:#1c140d;
    font-family:inherit;
  }
  .kwf *,.kwf *::before,.kwf *::after{box-sizing:border-box;}
  .kwf p{margin:0;}
  /* Akzent-Haarlinie oben */
  .kwf::before{
    content:"";position:absolute;top:0;left:0;right:0;height:2px;
    background:linear-gradient(90deg, transparent 0%, #ba5512 30%, #ec883c 50%, #ba5512 70%, transparent 100%);
    opacity:.8;
  }
  .kwf-rings{
    position:absolute;right:-14%;bottom:-38%;
    width:min(60vw,760px);aspect-ratio:1;
    animation:kwf-spin 160s linear infinite;
    pointer-events:none;
  }
  @keyframes kwf-spin{to{transform:rotate(360deg)}}
  .kwf-eyebrow{
    display:flex;align-items:center;justify-content:center;gap:10px;
    font-family:ui-monospace,"SF Mono",Consolas,monospace;
    font-size:11px;letter-spacing:.3em;text-transform:uppercase;
    color:#8e3f0b;margin:0 0 80px;
  }
  .kwf-dot{
    width:6px;height:6px;border-radius:50%;background:#ba5512;
    animation:kwf-pulse 2.4s ease-out infinite;
  }
  @keyframes kwf-pulse{
    0%{box-shadow:0 0 0 0 rgba(186,85,18,.5)}
    70%,100%{box-shadow:0 0 0 10px rgba(186,85,18,0)}
  }
  /* ---------- Partner-Marquee ---------- */
  .kwf-partners{
    position:relative;z-index:2;
    max-width:1200px;margin:0 auto;
    padding:54px 40px 44px;
    border-bottom:1px solid rgba(28,20,13,.14);
    text-align:center;
  }
  .kwf-marquee{
    margin-top:6px;
    overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
            mask-image:linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
  }
  .kwf-track{
    display:flex;align-items:center;gap:clamp(44px,6vw,84px);
    width:max-content;
    animation:kwf-marquee 34s linear infinite;
  }
  .kwf-marquee:hover .kwf-track{animation-play-state:paused;}
  @keyframes kwf-marquee{to{transform:translateX(-50%)}}
  .kwf-track a{display:block;flex:0 0 auto;}
  .kwf-track img{
    display:block;height:36px;width:auto;
    opacity:.75;
    transition:opacity .3s ease, transform .3s ease;
  }
  .kwf-track a:hover img{opacity:1;transform:translateY(-2px);}
  /* ---------- Hauptbereich ---------- */
  .kwf-main{
    position:relative;z-index:2;
    max-width:1200px;margin:0 auto;
    padding:56px 40px 46px;
    display:grid;
    grid-template-columns:1.4fr .8fr .7fr 1fr;
    gap:clamp(28px,4vw,60px);
  }
  .kwf-logo{
    width:clamp(140px,13vw,180px);height:auto;display:block;
    filter:drop-shadow(0 3px 12px rgba(0,0,0,.25));
    margin-bottom:20px;
  }
  .kwf-claim{
    font-size:14.5px;line-height:1.65;
    color:rgba(28,20,13,.68);
    max-width:34ch;margin-bottom:18px;
  }
  .kwf-address{
    font-style:normal;
    font-size:14px;line-height:1.7;
    color:rgba(28,20,13,.58);
  }
  .kwf-heading{
    font-family:ui-monospace,"SF Mono",Consolas,monospace;
    font-size:11px;letter-spacing:.24em;text-transform:uppercase;
    color:#8e3f0b;margin-bottom:16px;
  }
  .kwf-nav{display:flex;flex-direction:column;gap:10px;align-items:flex-start;}
  .kwf-nav a{
    position:relative;
    font-size:14.5px;
    color:rgba(28,20,13,.75);
    text-decoration:none !important;
    transition:color .25s ease, padding-left .25s ease;
  }
  .kwf-nav a::before{
    content:"";position:absolute;left:0;top:50%;
    width:0;height:1.5px;background:#ba5512;
    transition:width .25s ease;
  }
  .kwf-nav a:hover{color:#8e3f0b;padding-left:16px;}
  .kwf-nav a:hover::before{width:10px;}
  .kwf-socials{display:flex;gap:10px;margin-bottom:16px;}
  .kwf-socials a{
    display:grid;place-items:center;
    width:42px;height:42px;border-radius:50%;
    border:1px solid rgba(28,20,13,.22);
    color:rgba(28,20,13,.72);
    transition:border-color .3s ease, color .3s ease, transform .3s ease, box-shadow .3s ease;
  }
  .kwf-socials svg{
    width:19px;height:19px;
    fill:none;stroke:currentColor;stroke-width:1.7;
    stroke-linecap:round;stroke-linejoin:round;
  }
  .kwf-socials a:hover{
    border-color:#ba5512;color:#8e3f0b;
    transform:translateY(-3px);
    box-shadow:0 8px 20px rgba(186,85,18,.25);
  }
  .kwf-mail{
    font-size:15px;font-weight:700;
    color:#8e3f0b;text-decoration:none !important;
    border-bottom:1px solid rgba(142,63,11,.45);
    padding-bottom:2px;
    transition:border-color .3s ease, color .3s ease;
  }
  .kwf-mail:hover{color:#1c140d;border-color:#1c140d;}
  /* ---------- Bodenzeile ---------- */
  .kwf-bottom{
    position:relative;z-index:2;
    max-width:1200px;margin:0 auto;
    padding:20px 40px 24px;
    border-top:1px solid rgba(28,20,13,.14);
    display:flex;flex-wrap:wrap;gap:10px 24px;
    align-items:center;justify-content:space-between;
    font-size:12.5px;color:rgba(28,20,13,.5);
  }
  .kwf-credit a{
    color:rgba(28,20,13,.68);text-decoration:none !important;
    transition:color .25s ease;
  }
  .kwf-credit a b{color:#8e3f0b;}
  .kwf-credit a:hover{color:#8e3f0b;}
  /* ---------- Back-to-Top ---------- */
  .kwf-top{
    position:absolute;right:clamp(18px,3vw,40px);bottom:clamp(18px,3vw,36px);
    z-index:3;
    width:46px;height:46px;border-radius:50%;
    display:grid;place-items:center;
    background:linear-gradient(135deg,#d36c22,#9b460d);
    border:none;cursor:pointer;color:#fff;
    box-shadow:0 8px 24px rgba(186,85,18,.35);
    transition:transform .3s ease, box-shadow .3s ease;
  }
  .kwf-top svg{width:20px;height:20px;fill:none;stroke:currentColor;
    stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
  .kwf-top:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(186,85,18,.45);}
  /* ---------- Scroll-Einblendung ---------- */
  .kwf-rev{opacity:0;transform:translateY(20px);
    transition:opacity .8s ease, transform .8s ease;}
  .kwf.kwf-in .kwf-rev{opacity:1;transform:translateY(0);}
  .kwf.kwf-in .kwf-partners{transition-delay:.05s;}
  .kwf.kwf-in .kwf-brand{transition-delay:.15s;}
  .kwf.kwf-in .kwf-nav:nth-of-type(1){transition-delay:.25s;}
  .kwf.kwf-in .kwf-nav:nth-of-type(2){transition-delay:.33s;}
  .kwf.kwf-in .kwf-contact{transition-delay:.41s;}
  .kwf.kwf-in .kwf-bottom{transition-delay:.5s;}
  /* ---------- Responsive ---------- */
  @media (max-width:920px){
    .kwf-main{grid-template-columns:1fr 1fr;padding:46px 26px 36px;}
    .kwf-partners{padding:44px 26px 36px;}
    .kwf-bottom{padding:18px 26px 22px;justify-content:center;text-align:center;}
    .kwf-top{bottom:auto;top:-23px;right:26px;}
  }
  @media (max-width:560px){
    .kwf-main{grid-template-columns:1fr;gap:32px;}
    .kwf-brand{text-align:center;}
    .kwf-logo{margin-left:auto;margin-right:auto;}
    .kwf-claim{margin-left:auto;margin-right:auto;}
    .kwf-nav{align-items:center;}
    .kwf-contact{display:flex;flex-direction:column;align-items:center;}
    .kwf-track img{height:30px;}
  }
  /* ---------- Reduzierte Bewegung ---------- */
  @media (prefers-reduced-motion:reduce){
    .kwf-rings,.kwf-dot{animation:none;}
    .kwf-track{animation:none;flex-wrap:wrap;justify-content:center;width:100%;}
    .kwf-track a[aria-hidden="true"]{display:none;}
    .kwf-rev{opacity:1;transform:none;transition:none;}
  }

/* ============ ANFAHRT / STANDORT-KARTE (kwg-standort-hell.html) ============ */
.kwg-wrap { width: 100%; margin-block: clamp(28px, 4vw, 48px); }
  .kwg-wrap * { box-sizing: border-box; }

  .kwg-card {
    position: relative;
    overflow: hidden;
    border-radius: 20px 20px 0 0;
    padding: clamp(32px, 5vw, 52px) clamp(28px, 5vw, 52px) 36px;
    background: radial-gradient(1000px 500px at 15% 0%, #efdbc8 0%, #e7c9ac 55%, #d5a87b 100%);
    color: #1c140d;
    text-align: center;
  }

  .kwg-rings {
    position: absolute;
    right: -12%;
    top: -30%;
    width: min(42vw, 480px);
    aspect-ratio: 1;
    opacity: .45;
    pointer-events: none;
  }

  .kwg-inner { position: relative; z-index: 2; max-width: 640px; margin: 0 auto; }

  .kwg-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    font-family: ui-monospace, "SF Mono", Consolas, monospace;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: #8e3f0b;
    margin: 0 0 16px;
  }
  .kwg-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #ba5512;
    animation: kwg-pulse 2.4s ease-out infinite;
  }
  @keyframes kwg-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(186,85,18,.5); }
    70%, 100% { box-shadow: 0 0 0 10px rgba(186,85,18,0); }
  }

  .kwg-title {
    margin: 0 0 16px;
    font-family: inherit;
    font-weight: 300;
    font-size: clamp(24px, 3.4vw, 36px);
    line-height: 1.2;
    color: #1c140d;
  }
  .kwg-title b { font-family: inherit; font-weight: 800; color: #8e3f0b; }

  .kwg-address {
    margin: 0 0 26px;
    font-size: 15px;
    line-height: 1.6;
    color: rgba(28, 20, 13, .72);
  }

  .kwg-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 26px;
    border-radius: 8px;
    background: linear-gradient(100deg, #d36c22, #ba5512 55%, #8e3f0b);
    color: #fff !important;
    text-decoration: none !important;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    transition: transform .3s ease, box-shadow .3s ease, gap .3s ease;
  }
  .kwg-cta svg {
    width: 16px; height: 16px;
    fill: none; stroke: currentColor; stroke-width: 1.8;
    stroke-linecap: round; stroke-linejoin: round;
  }
  .kwg-cta:hover {
    gap: 14px;
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(186, 85, 18, .32);
  }

  /* Nahtloser Übergang: unten keine Rundung, damit die native Karte
     direkt darunter optisch andockt statt einen Spalt zu zeigen */
  .kwg-card::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 24px;
    background: linear-gradient(180deg, rgba(217,176,135,0) 0%, #d5a87b 100%);
    pointer-events: none;
  }


/* ---- Statische Standortkarte (loest das Google-Maps-iFrame ab) ---- */
/* Das Bild liegt auf dem eigenen Server (einmalig aus OSM-Kacheln gebaut),
   deshalb kein Fremdabruf und keine Einwilligung noetig. Die Karte ist ein
   Link: erst der Klick fuehrt zu Google. */
.kwg-map {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 0 0 20px 20px;
  line-height: 0;
  text-decoration: none !important;
}
.kwg-map img {
  display: block;
  width: 100%;
  height: 301px;
  object-fit: cover;
  object-position: center;
  /* waermt die bunte OSM-Darstellung an die Holzpalette an */
  filter: sepia(.3) saturate(.88) contrast(1.02);
  transition: transform 1.2s ease, filter .45s ease;
}
.kwg-map:hover img,
.kwg-map:focus-visible img { transform: scale(1.03); filter: sepia(.12) saturate(1) contrast(1.02); }
.kwg-map:focus-visible { outline: 2px solid #ba5512; outline-offset: -3px; }
/* weicher Anschluss an die Karte darueber */
.kwg-map::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 26px;
  z-index: 2;
  background: linear-gradient(180deg, #d5a87b 0%, rgba(213,168,123,0) 100%);
  pointer-events: none;
}

/* Markierung genau in der Bildmitte — dort liegt der Bauplatz, weil die
   Karte auf diese Koordinate zentriert gerendert wurde. object-position:
   center haelt die Mitte in jeder Breite an derselben Stelle. */
.kwg-pin {
  position: absolute;
  left: 50%; top: 50%;
  z-index: 3;
  width: 40px; height: 40px;
  transform: translate(-50%, -100%);
  pointer-events: none;
}
.kwg-pin svg {
  position: relative;
  z-index: 2;
  width: 40px; height: 40px;
  fill: #ba5512;
  stroke: #fff;
  stroke-width: 1.3;
  filter: drop-shadow(0 3px 6px rgba(78, 48, 24, .45));
}
.kwg-pin svg circle { fill: #fff; stroke: none; }
.kwg-pin-puls {
  position: absolute;
  left: 50%; bottom: 1px;
  width: 12px; height: 12px;
  border-radius: 50%;
  transform: translateX(-50%);
  background: rgba(186, 85, 18, .3);
  animation: kwg-ping 2.6s ease-out infinite;
}
@keyframes kwg-ping {
  0%   { box-shadow: 0 0 0 0 rgba(186, 85, 18, .45); }
  70%, 100% { box-shadow: 0 0 0 20px rgba(186, 85, 18, 0); }
}

.kwg-hint {
  position: absolute;
  right: 14px; bottom: 14px;
  z-index: 3;
  padding: 9px 15px;
  border-radius: 999px;
  background: rgba(247, 238, 228, .93);
  color: #8e3f0b;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1.2;
  box-shadow: 0 4px 14px rgba(78, 48, 24, .2);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .3s ease, transform .3s ease;
}
.kwg-map:hover .kwg-hint,
.kwg-map:focus-visible .kwg-hint { opacity: 1; transform: none; }
/* auf Touch-Geraeten gibt es kein Hover — dort dauerhaft zeigen */
@media (hover: none) {
  .kwg-hint { opacity: 1; transform: none; }
}

.kwg-credit {
  margin: 10px 0 0;
  text-align: center;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(28, 20, 13, .6);
}
.kwg-credit a { color: rgba(28, 20, 13, .78); }

@media (max-width: 560px) {
  .kwg-map img { height: 240px; }
  .kwg-hint { right: 10px; bottom: 10px; padding: 7px 12px; font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .kwg-pin-puls, .kwg-dot { animation: none; }
  .kwg-map img { transition: none; }
  .kwg-map:hover img { transform: none; }
}

/* ============ BAUPROJEKTE-ÜBERSICHT (kwn-bauprojekte-hell.html) ============ */
.kwn-wrap {
    container-type: inline-size;
    container-name: kwn;
    width: 100%;
  }
  .kwn-wrap * { box-sizing: border-box; }

  .kwn-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 26px;
    width: 100%;
  }
  @container kwn (min-width: 700px) {
    .kwn-grid { grid-template-columns: 1fr 1fr; }
  }

  /* ---------- Projekt-Karte (Foto-Kachel — bleibt dunkel überzogen) ---------- */
  .kwn-card {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 16px;
    aspect-ratio: 16 / 11;
    background: radial-gradient(700px 450px at 15% 15%, #efdbc8 0%, #e7c9ac 60%, #d5a87b 100%);
    text-decoration: none !important;
    color: #fff;
    box-shadow: 0 10px 32px rgba(70, 47, 27, .16);
    transition: transform .4s ease, box-shadow .4s ease;
  }
  .kwn-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 22px 48px rgba(70, 47, 27, .24);
  }

  .kwn-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.06);
    transition: transform .8s cubic-bezier(.2,.7,.2,1);
    animation: kwn-kenburns 28s ease-in-out infinite alternate;
  }
  .kwn-card:hover img { transform: scale(1.12); animation-play-state: paused; }
  @keyframes kwn-kenburns {
    from { transform: scale(1.06) translate(0, 0); }
    to   { transform: scale(1.13) translate(-1.2%, 1.2%); }
  }

  /* Abdunkelung, damit der Text auf dem Foto immer lesbar ist — bleibt
     dunkel, unabhängig vom Seitenthema (sitzt auf echtem Foto) */
  .kwn-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
      rgba(16, 13, 9, .1) 0%,
      rgba(16, 13, 9, 0) 38%,
      rgba(16, 13, 9, .55) 72%,
      rgba(16, 13, 9, .9) 100%);
    pointer-events: none;
  }

  .kwn-info {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 2;
    padding: 20px 22px 18px;
  }
  /* Text sitzt auf dem abgedunkelten Foto — bleibt hell/weiß */
  .kwn-eyebrow {
    margin: 0 0 8px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .6);
  }
  .kwn-title {
    margin: 0 0 12px;
    font-family: inherit;
    letter-spacing: normal;
    text-transform: none;
    font-size: clamp(19px, 2.6cqw, 27px);
    line-height: 1.22;
    font-weight: 300;
    color: #fff;
    overflow-wrap: break-word;
  }
  .kwn-title b { font-family: inherit; font-weight: 800; color: #e87a2c; }

  .kwn-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .85);
    transition: color .3s ease, gap .3s ease;
  }
  .kwn-cta::after { content: "→"; }
  .kwn-card:hover .kwn-cta { color: #e87a2c; gap: 13px; }

  /* ---------- Coming-Soon-Platzhalter (kein Foto → volle Umfärbung) ---------- */
  .kwn-soon {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    overflow: hidden;
    border-radius: 16px;
    aspect-ratio: 16 / 11;
    background: radial-gradient(600px 400px at 50% 60%, #efdbc8 0%, #d5a87b 70%);
    border: 1.5px dashed rgba(186, 85, 18, .45);
    text-align: center;
    padding: 24px;
  }
  /* dezente Jahresringe im Hintergrund — Deko, bleibt Akzentfarbe */
  .kwn-soon::before {
    content: "";
    position: absolute;
    right: -120px;
    bottom: -120px;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    box-shadow:
      0 0 0 1px  rgba(186, 85, 18, .08),
      0 0 0 36px rgba(186, 85, 18, .05),
      0 0 0 82px rgba(186, 85, 18, .03),
      0 0 0 140px rgba(186, 85, 18, .02);
    pointer-events: none;
  }
  .kwn-soon-plus {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    border: 1.5px solid rgba(186, 85, 18, .55);
    display: grid;
    place-items: center;
    font-size: 26px;
    font-weight: 300;
    line-height: 1;
    color: #8e3f0b;
    animation: kwn-breathe 2.6s ease-in-out infinite;
  }
  @keyframes kwn-breathe {
    0%, 100% { box-shadow: 0 0 0 0 rgba(186, 85, 18, .35); transform: scale(1); }
    50%      { box-shadow: 0 0 0 14px rgba(186, 85, 18, 0); transform: scale(1.05); }
  }
  .kwn-soon-title {
    margin: 0;
    font-family: inherit;
    font-size: clamp(17px, 2.4cqw, 23px);
    font-weight: 300;
    color: #1c140d;
  }
  .kwn-soon-title b { font-family: inherit; font-weight: 800; color: #8e3f0b; }
  .kwn-soon-sub {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: rgba(28, 20, 13, .55);
    max-width: 34ch;
  }

  /* ---------- Scroll-Einblendung ---------- */
  .kwn-rev {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .8s ease, transform .8s ease;
  }
  .kwn-wrap.kwn-in .kwn-rev { opacity: 1; transform: translateY(0); }
  .kwn-wrap.kwn-in .kwn-rev:nth-child(1) { transition-delay: .05s; }
  .kwn-wrap.kwn-in .kwn-rev:nth-child(2) { transition-delay: .18s; }
  .kwn-wrap.kwn-in .kwn-rev:nth-child(3) { transition-delay: .31s; }

  /* ---------- Reduzierte Bewegung ---------- */
  @media (prefers-reduced-motion: reduce) {
    .kwn-card img { animation: none; transition: none; }
    .kwn-soon-plus { animation: none; }
    .kwn-rev { opacity: 1; transform: none; transition: none; }
    .kwn-card { transition: none; }
  }

/* ============ IMMOBILIENBÖRSE (kwm-immobilien-hell.html) ============ */
.kwm-wrap { width: 100%; }
  .kwm-wrap * { box-sizing: border-box; }

  /* ---------- Hinweistext ---------- */
  .kwm-hint {
    margin: 0 0 28px;
    padding: 14px 18px;
    border-radius: 10px;
    background: rgba(186, 85, 18, .09);
    border-left: 3px solid rgba(186, 85, 18, .55);
    font-size: 13px;
    line-height: 1.65;
    color: rgba(28, 20, 13, .68);
  }

  /* ---------- Kennzahlen-Leiste ---------- */
  .kwm-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 1px;
    background: rgba(28, 20, 13, .08);
    border-radius: 16px;
    overflow: hidden;
    margin: 0 0 28px;
    box-shadow: 0 10px 34px rgba(36, 24, 15, .1);
  }
  .kwm-stat {
    position: relative;
    background: linear-gradient(160deg, #efdbc8 0%, #e7c9ac 100%);
    padding: 24px 16px;
    text-align: center;
  }
  .kwm-stat strong {
    display: block;
    font-size: clamp(22px, 2.8vw, 30px);
    font-weight: 800;
    color: #1c140d;
    margin-bottom: 4px;
    line-height: 1.1;
  }
  .kwm-stat span {
    display: block;
    font-size: 11.5px;
    letter-spacing: .04em;
    color: rgba(28, 20, 13, .62);
  }
  /* Akzent-Kachel bleibt wie ein CTA-Button: Orange-Verlauf, weißer
     Text, theme-neutral unverändert */
  .kwm-stat.kwm-accent {
    background: linear-gradient(135deg, #8e3f0b, #ba5512 55%, #d36c22);
  }
  .kwm-stat.kwm-accent strong { color: #fff; }
  .kwm-stat.kwm-accent span { color: rgba(255, 255, 255, .82); }
  .kwm-stat.kwm-accent::after {
    content: "";
    position: absolute;
    top: 10px; right: 10px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #fff;
    animation: kwm-pulse 2s ease-out infinite;
  }
  @keyframes kwm-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(255,255,255,.6); }
    70%, 100% { box-shadow: 0 0 0 9px rgba(255,255,255,0); }
  }

  /* ---------- Spotlight: die verfügbare Einheit ---------- */
  .kwm-spot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    padding: 22px 26px;
    border-radius: 16px;
    background: radial-gradient(700px 400px at 15% 20%, #efdbc8 0%, #e7c9ac 55%, #d5a87b 100%);
    border: 1.5px solid rgba(186, 85, 18, .45);
    box-shadow: 0 10px 26px rgba(70, 47, 27, .18);
    margin-bottom: 40px;
  }
  .kwm-spot-thumb {
    width: 96px; height: 72px;
    border-radius: 10px;
    overflow: hidden;
    flex: 0 0 auto;
  }
  .kwm-spot-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .kwm-spot-text { flex: 1 1 260px; }
  .kwm-spot-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px;
    font-family: ui-monospace, "SF Mono", Consolas, monospace;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #8e3f0b;
  }
  .kwm-spot-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: #2f9e44;
    animation: kwm-pulse2 2s ease-out infinite;
  }
  @keyframes kwm-pulse2 {
    0%   { box-shadow: 0 0 0 0 rgba(47,158,68,.5); }
    70%, 100% { box-shadow: 0 0 0 8px rgba(47,158,68,0); }
  }
  .kwm-spot-title {
    margin: 0 0 4px;
    font-family: inherit;
    font-weight: 800;
    font-size: clamp(17px, 2.2vw, 21px);
    color: #1c140d;
  }
  .kwm-spot-sub {
    font-size: 13.5px;
    color: #8e3f0b;
    text-decoration: underline;
    text-decoration-color: rgba(142, 63, 11, .4);
    text-underline-offset: 2px;
    transition: color .2s ease;
  }
  .kwm-spot-sub:hover { color: #682d08; }
  .kwm-spot-cta {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: 8px;
    background: linear-gradient(100deg, #d36c22, #ba5512 55%, #8e3f0b);
    color: #fff !important;
    text-decoration: none !important;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: transform .25s ease, box-shadow .25s ease;
  }
  .kwm-spot-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(186, 85, 18, .32);
  }

  /* ---------- Gebäude-Sektionen (native <details>) ---------- */
  .kwm-building {
    border: 1px solid rgba(28, 20, 13, .1);
    border-radius: 14px;
    background: radial-gradient(700px 400px at 85% 0%, #efdbc8 0%, #e7c9ac 55%, #d5a87b 100%);
    margin-bottom: 14px;
    overflow: hidden;
  }
  .kwm-building > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 22px;
    user-select: none;
  }
  .kwm-building > summary::-webkit-details-marker { display: none; }
  .kwm-building-head { display: flex; flex-direction: column; gap: 3px; }
  .kwm-building-name {
    font-family: inherit;
    font-weight: 800;
    font-size: 15.5px;
    color: #1c140d;
  }
  .kwm-building-meta {
    font-size: 12.5px;
    color: #8e3f0b;
    text-decoration: underline;
    text-decoration-color: rgba(142, 63, 11, .4);
    text-underline-offset: 2px;
    transition: color .2s ease;
  }
  .kwm-building-meta:hover { color: #682d08; }
  .kwm-building-right { display: flex; align-items: center; gap: 14px; }
  .kwm-badge {
    padding: 6px 13px;
    border-radius: 99px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .03em;
    white-space: nowrap;
  }
  .kwm-badge.kwm-badge-sold {
    background: rgba(28, 20, 13, .08);
    color: rgba(28, 20, 13, .6);
  }
  .kwm-badge.kwm-badge-free {
    background: rgba(47, 158, 68, .18);
    color: #1f7a34;
  }
  .kwm-chevron {
    width: 20px; height: 20px;
    flex: 0 0 auto;
    transition: transform .3s ease;
    color: #ec883c;
  }
  .kwm-building[open] .kwm-chevron { transform: rotate(180deg); }

  .kwm-units {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(186px, 1fr));
    gap: 14px;
    padding: 8px 22px 26px;
  }

  /* ---------- Einheiten-Kacheln: echte Fotos, bleiben dunkel überzogen ---------- */
  .kwm-unit {
    position: relative;
    display: block;
    border-radius: 10px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
  }
  .kwm-unit img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    filter: saturate(.85);
    transition: transform .35s ease, filter .35s ease;
  }
  .kwm-unit:hover img { transform: scale(1.06); filter: saturate(1); }
  .kwm-unit::before {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.75) 100%);
  }
  .kwm-unit-label {
    position: absolute;
    top: 10px; left: 12px;
    font-size: 12.5px;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,.6);
    z-index: 2;
  }
  .kwm-unit-status {
    position: absolute;
    bottom: 10px; left: 12px; right: 12px;
    z-index: 2;
    display: block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: rgba(255,255,255,.85);
    text-decoration: underline;
    text-decoration-color: rgba(255,255,255,.4);
    text-underline-offset: 2px;
  }
  .kwm-unit-status:hover { color: #fff; text-decoration-color: #fff; }
  .kwm-unit.kwm-free .kwm-unit-status { color: #8fe0a0; text-decoration-color: rgba(143,224,160,.5); }
  .kwm-unit.kwm-free .kwm-unit-status:hover { color: #b6f0c2; }
  .kwm-unit.kwm-free::after {
    content: "";
    position: absolute; inset: 0;
    border: 2px solid #2f9e44;
    border-radius: 10px;
    z-index: 3;
    pointer-events: none;
  }

  @media (max-width: 560px) {
    .kwm-units { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
    .kwm-spot { padding: 18px; }
  }

/* ============ NACHHALTIGKEIT-SPALTEN (kwo-nachhaltigkeit-hell.html) ============ */
.kwo-wrap { width: 100%; }
  .kwo-wrap * { box-sizing: border-box; }

  .kwo-card {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    padding: clamp(32px, 6vw, 60px);
    background: radial-gradient(1100px 650px at 85% 10%, #efdbc8 0%, #e7c9ac 55%, #d5a87b 100%);
    color: #1c140d;
    box-shadow: 0 10px 32px rgba(70, 47, 27, .18);
  }

  .kwo-rings {
    position: absolute;
    left: -12%;
    bottom: -24%;
    width: min(42vw, 500px);
    aspect-ratio: 1;
    opacity: .4;
    pointer-events: none;
  }

  .kwo-inner { position: relative; z-index: 2; }

  .kwo-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: ui-monospace, "SF Mono", Consolas, monospace;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: #8e3f0b;
    margin: 0 0 16px;
  }
  .kwo-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #ba5512;
    animation: kwo-pulse 2.4s ease-out infinite;
  }
  @keyframes kwo-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(186,85,18,.5); }
    70%, 100% { box-shadow: 0 0 0 10px rgba(186,85,18,0); }
  }

  .kwo-h2 {
    margin: 0 0 40px;
    font-family: inherit;
    font-weight: 300;
    font-size: clamp(24px, 3.2vw, 36px);
    line-height: 1.2;
    max-width: 26ch;
  }
  .kwo-h2 b { font-family: inherit; font-weight: 800; color: #ba5512; }

  /* ---------- Drei Themen-Spalten ---------- */
  .kwo-cols {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    margin-bottom: 44px;
  }
  @media (min-width: 860px) {
    .kwo-cols { grid-template-columns: repeat(3, 1fr); gap: 28px; }
  }

  .kwo-col {
    padding: 24px 22px;
    border-radius: 14px;
    background: rgba(28, 20, 13, .035);
    border: 1px solid rgba(28, 20, 13, .1);
    transition: border-color .3s ease, transform .3s ease;
  }
  .kwo-col:hover {
    border-color: rgba(186, 85, 18, .45);
    transform: translateY(-3px);
  }

  .kwo-icon {
    width: 46px; height: 46px;
    margin-bottom: 16px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(186, 85, 18, .12);
    border: 1px solid rgba(186, 85, 18, .35);
  }
  .kwo-icon svg {
    width: 22px; height: 22px;
    fill: none;
    stroke: #ec883c;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .kwo-col-title {
    margin: 0 0 14px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #1c140d;
  }

  .kwo-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .kwo-list li {
    display: flex;
    gap: 10px;
    font-size: 14px;
    line-height: 1.55;
    color: rgba(28, 20, 13, .75);
  }
  .kwo-list li strong {
    color: #1c140d;
    font-weight: 700;
  }
  .kwo-check {
    flex: 0 0 auto;
    width: 17px; height: 17px;
    margin-top: 2px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(186, 85, 18, .18);
  }
  .kwo-check svg {
    width: 9px; height: 9px;
    fill: none;
    stroke: #ec883c;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* ---------- Abschluss-Statement ---------- */
  .kwo-statement {
    position: relative;
    padding-top: 36px;
    border-top: 1px solid rgba(28, 20, 13, .12);
    text-align: center;
  }
  .kwo-statement p {
    margin: 0 auto;
    max-width: 46ch;
    font-family: inherit;
    font-weight: 300;
    font-size: clamp(19px, 2.4vw, 27px);
    line-height: 1.45;
    color: #1c140d;
  }
  .kwo-statement b {
    font-family: inherit;
    font-weight: 800;
    color: #ba5512;
  }

  /* ---------- Scroll-Einblendung ---------- */
  .kwo-rev { opacity: 0; transform: translateY(20px);
    transition: opacity .8s ease, transform .8s ease; }
  .kwo-wrap.kwo-in .kwo-rev { opacity: 1; transform: translateY(0); }
  .kwo-wrap.kwo-in .kwo-eyebrow { transition-delay: .05s; }
  .kwo-wrap.kwo-in .kwo-h2 { transition-delay: .12s; }
  .kwo-wrap.kwo-in .kwo-col:nth-child(1) { transition-delay: .2s; }
  .kwo-wrap.kwo-in .kwo-col:nth-child(2) { transition-delay: .3s; }
  .kwo-wrap.kwo-in .kwo-col:nth-child(3) { transition-delay: .4s; }
  .kwo-wrap.kwo-in .kwo-statement { transition-delay: .5s; }

  @media (prefers-reduced-motion: reduce) {
    .kwo-dot { animation: none; }
    .kwo-rev { opacity: 1; transform: none; transition: none; }
    .kwo-col { transition: none; }
  }

/* ============ VIDEO-BLOCK (kww-video-hell.html) ============ */
.kww-wrap { width: 100%; margin-block: clamp(28px, 4vw, 48px); }
  .kww-wrap * { box-sizing: border-box; }

  .kww-card {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    padding: clamp(32px, 5vw, 52px);
    background: radial-gradient(1000px 600px at 82% 20%, #efdbc8 0%, #e7c9ac 55%, #d5a87b 100%);
    color: #1c140d;
    box-shadow: 0 10px 32px rgba(70, 47, 27, .18);
  }

  .kww-rings {
    position: absolute;
    left: -12%;
    bottom: -26%;
    width: min(46vw, 540px);
    aspect-ratio: 1;
    opacity: .5;
    animation: kww-spin 150s linear infinite;
    pointer-events: none;
  }
  @keyframes kww-spin { to { transform: rotate(360deg); } }

  .kww-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: center;
  }
  @media (min-width: 780px) {
    .kww-grid { grid-template-columns: 1fr 1.15fr; gap: 44px; }
  }

  .kww-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: ui-monospace, "SF Mono", Consolas, monospace;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: #8e3f0b;
    margin: 0 0 18px;
  }
  .kww-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #ba5512;
    animation: kww-pulse 2.4s ease-out infinite;
  }
  @keyframes kww-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(186,85,18,.5); }
    70%, 100% { box-shadow: 0 0 0 10px rgba(186,85,18,0); }
  }

  .kww-title {
    margin: 0 0 16px;
    font-family: inherit;
    font-weight: 300;
    font-size: clamp(26px, 3.6vw, 38px);
    line-height: 1.18;
    color: #1c140d;
  }
  .kww-title b { font-family: inherit; font-weight: 800; color: #ba5512; }

  .kww-text {
    margin: 0;
    font-size: clamp(15px, 1.5vw, 17px);
    line-height: 1.65;
    color: rgba(28, 20, 13, .78);
    max-width: 40ch;
  }

  /* ---------- Video-Seite (bewegtes Filmmaterial — bleibt wie Foto behandelt) ---------- */
  .kww-media {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .35);
    cursor: pointer;
  }
  .kww-media video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
  }
  .kww-media:hover video { transform: scale(1.04); }

  .kww-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(16,13,9,0) 55%, rgba(16,13,9,.65) 100%);
    pointer-events: none;
  }

  /* Hinweis: mit Ton ansehen */
  .kww-sound {
    position: absolute;
    left: 16px; bottom: 14px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 15px;
    border-radius: 99px;
    background: rgba(16, 13, 9, .55);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(236, 136, 60, .5);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #ec883c;
    transition: transform .3s ease, border-color .3s ease;
  }
  .kww-sound svg {
    width: 15px; height: 15px;
    fill: none; stroke: currentColor; stroke-width: 1.8;
    stroke-linecap: round; stroke-linejoin: round;
  }
  .kww-media:hover .kww-sound {
    transform: translateY(-2px);
    border-color: #ec883c;
  }

  /* zentrales Play-Symbol, dezent, blendet beim Hover ein */
  .kww-play {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: grid;
    place-items: center;
    pointer-events: none;
  }
  .kww-play span {
    width: 62px; height: 62px;
    border-radius: 50%;
    background: rgba(16, 13, 9, .45);
    backdrop-filter: blur(3px);
    border: 1.5px solid rgba(255, 255, 255, .5);
    display: grid;
    place-items: center;
    opacity: 0;
    transform: scale(.85);
    transition: opacity .3s ease, transform .3s ease;
  }
  .kww-media:hover .kww-play span { opacity: 1; transform: scale(1); }
  .kww-play svg {
    width: 22px; height: 22px;
    fill: #fff;
    margin-left: 3px;
  }

  /* ---------- Scroll-Einblendung ---------- */
  .kww-wrap { opacity: 0; transform: translateY(20px);
    transition: opacity .8s ease, transform .8s ease; }
  .kww-wrap.kww-in { opacity: 1; transform: translateY(0); }

  @media (prefers-reduced-motion: reduce) {
    .kww-rings, .kww-dot { animation: none; }
    .kww-wrap { opacity: 1; transform: none; transition: none; }
    .kww-media video { transition: none; }
  }

/* ============ NEWSLETTER-DANKE (kwd-newsletter-danke-hell.html) ============ */
.kwd-wrap { width: 100%; }
  .kwd-wrap * { box-sizing: border-box; }

  .kwd-card {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    padding: clamp(48px, 8vw, 88px) clamp(28px, 6vw, 60px);
    background: radial-gradient(1000px 650px at 50% 0%, #efdbc8 0%, #e7c9ac 55%, #d5a87b 100%);
    color: #1c140d;
    text-align: center;
    box-shadow: 0 14px 38px rgba(70, 47, 27, .18);
  }

  /* Jahresringe im Hintergrund */
  .kwd-rings {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(70vw, 780px);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    opacity: .45;
    animation: kwd-spin 150s linear infinite;
    pointer-events: none;
  }
  @keyframes kwd-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }

  /* aufsteigende Konfetti-Punkte in Akzentfarbe */
  .kwd-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
  .kwd-confetti span {
    position: absolute;
    bottom: -10px;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #ba5512;
    opacity: 0;
    animation: kwd-rise 3.2s ease-out forwards;
  }
  .kwd-confetti span:nth-child(2n) { background: #ec883c; width: 4px; height: 4px; }
  .kwd-confetti span:nth-child(1) { left: 14%; animation-delay: .1s; }
  .kwd-confetti span:nth-child(2) { left: 26%; animation-delay: .3s; }
  .kwd-confetti span:nth-child(3) { left: 39%; animation-delay: .05s; }
  .kwd-confetti span:nth-child(4) { left: 47%; animation-delay: .45s; }
  .kwd-confetti span:nth-child(5) { left: 58%; animation-delay: .2s; }
  .kwd-confetti span:nth-child(6) { left: 67%; animation-delay: .55s; }
  .kwd-confetti span:nth-child(7) { left: 76%; animation-delay: .15s; }
  .kwd-confetti span:nth-child(8) { left: 85%; animation-delay: .4s; }
  @keyframes kwd-rise {
    0%   { transform: translateY(0) scale(.6);   opacity: 0; }
    12%  { opacity: 1; }
    100% { transform: translateY(-220px) scale(1); opacity: 0; }
  }

  .kwd-content { position: relative; z-index: 2; max-width: 560px; margin: 0 auto; }

  /* Haken-Kreis: zeichnet sich selbst */
  .kwd-check {
    width: 84px; height: 84px;
    margin: 0 auto 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: radial-gradient(circle at 35% 30%, rgba(236,136,60,.18), rgba(186,85,18,.05));
    border: 1.5px solid rgba(186, 85, 18, .5);
    animation: kwd-popin .6s cubic-bezier(.3, 1.4, .4, 1) .1s both;
  }
  @keyframes kwd-popin {
    from { transform: scale(.4); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
  }
  .kwd-check svg { width: 40px; height: 40px; }
  .kwd-check path {
    fill: none;
    stroke: #ec883c;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 40;
    stroke-dashoffset: 40;
    animation: kwd-draw .6s ease .5s forwards;
  }
  @keyframes kwd-draw { to { stroke-dashoffset: 0; } }

  .kwd-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: ui-monospace, "SF Mono", Consolas, monospace;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: #8e3f0b;
    margin: 0 0 18px;
    opacity: 0;
    animation: kwd-fadeup .8s ease .3s forwards;
  }
  .kwd-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #ba5512;
    animation: kwd-pulse 2.4s ease-out infinite;
  }
  @keyframes kwd-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(186,85,18,.55); }
    70%, 100% { box-shadow: 0 0 0 11px rgba(186,85,18,0); }
  }

  .kwd-title {
    margin: 0 0 16px;
    font-family: inherit;
    font-weight: 300;
    font-size: clamp(28px, 4.6vw, 48px);
    line-height: 1.15;
    color: #1c140d;
    opacity: 0;
    animation: kwd-fadeup .9s ease .4s forwards;
  }
  .kwd-title b { font-family: inherit; font-weight: 800; color: #ba5512; }

  .kwd-sub {
    margin: 0 0 34px;
    font-size: clamp(15px, 1.5vw, 17.5px);
    line-height: 1.6;
    color: rgba(28, 20, 13, .78);
    opacity: 0;
    animation: kwd-fadeup .9s ease .55s forwards;
  }

  .kwd-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 30px;
    border-radius: 8px;
    background: linear-gradient(100deg, #d36c22, #ba5512 55%, #8e3f0b);
    color: #fff !important;
    font-size: 13.5px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-decoration: none !important;
    opacity: 0;
    animation: kwd-fadeup .9s ease .7s forwards;
    transition: transform .3s ease, box-shadow .3s ease, gap .3s ease;
  }
  .kwd-cta::after { content: "→"; transition: transform .3s ease; }
  .kwd-cta:hover {
    gap: 15px;
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(186, 85, 18, .35);
  }

  @keyframes kwd-fadeup {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  @media (prefers-reduced-motion: reduce) {
    .kwd-rings, .kwd-dot { animation: none; }
    .kwd-confetti { display: none; }
    .kwd-check { animation: none; opacity: 1; }
    .kwd-check path { animation: none; stroke-dashoffset: 0; }
    .kwd-eyebrow, .kwd-title, .kwd-sub, .kwd-cta { animation: none; opacity: 1; transform: none; }
  }

/* ============ STECKBRIEF-TEASER (Kran-Animation) (kws-steckbrief-hell.html) ============ */
.kws{
    position:relative;
    box-sizing:border-box;
    width:100%;
    margin-top:0;margin-bottom:0;
    overflow:hidden;
    display:flex;align-items:center;justify-content:center;
    min-height:clamp(420px,62vh,620px);
    padding:clamp(60px,9vw,110px) clamp(20px,5vw,40px);
    border-radius:18px;
    color:#332519;
    font-family:inherit;
    background:
      radial-gradient(900px 520px at 15% 100%, rgba(186,85,18,.1) 0%, rgba(186,85,18,0) 60%),
      radial-gradient(1200px 750px at 82% 8%, #efdbc8 0%, #e7c9ac 55%, #d5a87b 100%);
  }
  .kws *,.kws *::before,.kws *::after{box-sizing:border-box;}
  :where(.kws p,.kws h2,.kws ul){margin:0;padding:0;}
  .kws::after{
    content:"";position:absolute;top:0;left:0;right:0;height:2px;z-index:2;
    background:linear-gradient(90deg, transparent 0%, #ba5512 30%, #ec883c 50%, #ba5512 70%, transparent 100%);
    opacity:.8;
  }
  .kws-rings{
    position:absolute;left:50%;top:50%;z-index:1;
    width:min(70vw,860px);aspect-ratio:1;
    transform:translate(-50%,-50%);
    animation:kws-spin 170s linear infinite;
    pointer-events:none;
  }
  @keyframes kws-spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
  .kws-crane{
    position:absolute;z-index:1;
    right:clamp(-40px,-1vw,10px);bottom:0;
    width:min(46vw,520px);height:auto;
    overflow:visible;
    opacity:.85;
    pointer-events:none;
    filter:drop-shadow(0 0 4px rgba(186,85,18,.45)) drop-shadow(0 0 16px rgba(186,85,18,.22));
  }
  .kws-crane-head{
    animation:kws-crane-slew 22s ease-in-out infinite;
    transform-box:fill-box;
  }
  @keyframes kws-crane-slew{
    0%,100%{transform:rotate(-2.5deg)}
    50%{transform:rotate(2.5deg)}
  }
  .kws-crane-trolley{
    animation:kws-crane-trolley 15s ease-in-out infinite;
  }
  @keyframes kws-crane-trolley{
    0%,100%{transform:translateX(0)}
    50%{transform:translateX(-195px)}
  }
  .kws-crane-hook{
    animation:kws-crane-hook 6.5s ease-in-out infinite;
  }
  @keyframes kws-crane-hook{
    0%{transform:translateY(0)}
    35%{transform:translateY(18px)}
    60%{transform:translateY(18px)}
    100%{transform:translateY(0)}
  }
  .kws-corner{
    position:absolute;z-index:2;width:34px;height:34px;
    border:1.5px solid rgba(236,136,60,.45);
    pointer-events:none;
  }
  .kws-corner--tl{top:22px;left:22px;border-right:none;border-bottom:none;}
  .kws-corner--tr{top:22px;right:22px;border-left:none;border-bottom:none;}
  .kws-corner--bl{bottom:22px;left:22px;border-right:none;border-top:none;}
  .kws-corner--br{bottom:22px;right:22px;border-left:none;border-top:none;}
  .kws-inner{
    position:relative;z-index:3;
    max-width:640px;width:100%;
    text-align:center;
  }
  .kws-eyebrow{
    display:flex;align-items:center;justify-content:center;gap:10px;
    font-family:ui-monospace,"SF Mono",Consolas,monospace;
    font-size:11px;letter-spacing:.3em;text-transform:uppercase;
    color:#8e3f0b;margin-bottom:22px;
  }
  .kws-dot{
    width:6px;height:6px;border-radius:50%;background:#ba5512;
    animation:kws-pulse 2.4s ease-out infinite;
  }
  @keyframes kws-pulse{
    0%{box-shadow:0 0 0 0 rgba(186,85,18,.5)}
    70%,100%{box-shadow:0 0 0 10px rgba(186,85,18,0)}
  }
  .kws-title{
    font-size:clamp(28px,4.4vw,46px);
    line-height:1.15;font-weight:700;
    color:#1c140d;
    margin-bottom:22px;
  }
  .kws-title b{font-family:inherit;font-weight:800;color:#ba5512;}
  .kws-text{
    font-size:15px;line-height:1.7;
    color:rgba(28,20,13,.72);
    max-width:52ch;margin:0 auto 14px;
  }
  .kws-checklist{
    list-style:none;
    display:flex;flex-wrap:wrap;gap:10px;
    justify-content:center;
    margin-top:28px;margin-bottom:0;
  }
  .kws-checklist li{
    display:flex;align-items:center;gap:8px;
    font-size:13px;
    color:rgba(28,20,13,.85);
    padding:10px 16px;
    border:1px solid rgba(28,20,13,.18);
    border-radius:999px;
    background:rgba(28,20,13,.03);
  }
  .kws-check{
    display:grid;place-items:center;
    width:16px;height:16px;border-radius:50%;
    background:rgba(186,85,18,.18);
    color:#8e3f0b;font-size:10px;line-height:1;
    flex:0 0 auto;
  }
  /* ---------- Scroll-Einblendung ---------- */
  .kws-rev{opacity:0;transform:translateY(20px);
    transition:opacity .8s ease, transform .8s ease;}
  .kws-rev.kws-in{opacity:1;transform:translateY(0);}
  /* ---------- Responsive ---------- */
  @media (max-width:760px){
    .kws-crane{width:min(58vw,360px);opacity:.55;}
  }
  @media (max-width:560px){
    .kws-corner{width:22px;height:22px;}
    .kws-corner--tl,.kws-corner--tr{top:14px;}
    .kws-corner--bl,.kws-corner--br{bottom:14px;}
    .kws-corner--tl,.kws-corner--bl{left:14px;}
    .kws-corner--tr,.kws-corner--br{right:14px;}
    .kws-checklist{flex-direction:column;align-items:center;}
    .kws-crane{opacity:.3;}
  }
  /* ---------- Reduzierte Bewegung ---------- */
  @media (prefers-reduced-motion:reduce){
    .kws-rings,.kws-dot,.kws-crane-head,.kws-crane-trolley,.kws-crane-hook{animation:none;}
    .kws-rev{opacity:1;transform:none;transition:none;}
  }

/* ============ STECKBRIEF (Projekt-Kennzahlen) (kws-steckbrief-naherholungsgebiet-hell.html) ============ */
.kws-wrap { width: 100%; }
  .kws-wrap * { box-sizing: border-box; }

  .kws-card {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    padding: clamp(32px, 6vw, 64px);
    background: radial-gradient(1000px 600px at 15% 20%, #efdbc8 0%, #e7c9ac 55%, #d5a87b 100%);
    box-shadow: 0 10px 32px rgba(70, 47, 27, .18);
  }

  /* dezente Jahresringe im Hintergrund */
  .kws-rings {
    position: absolute;
    left: -14%;
    bottom: -22%;
    width: min(46vw, 560px);
    aspect-ratio: 1;
    opacity: .55;
    pointer-events: none;
  }

  .kws-inner { position: relative; z-index: 2; }

  .kws-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: ui-monospace, "SF Mono", Consolas, monospace;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: #8e3f0b;
    margin: 0 0 18px;
  }
  .kws-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #ba5512;
    animation: kws-pulse 2.4s ease-out infinite;
  }
  @keyframes kws-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(186,85,18,.5); }
    70%, 100% { box-shadow: 0 0 0 10px rgba(186,85,18,0); }
  }

  .kws-h2 {
    margin: 0 0 26px;
    font-family: inherit;
    font-weight: 300;
    font-size: clamp(26px, 3.6vw, 42px);
    line-height: 1.18;
    color: #1c140d;
    max-width: 18ch;
  }
  .kws-h2 b { font-family: inherit; font-weight: 800; color: #ba5512; }

  .kws-lead {
    margin: 0 0 36px;
    font-size: clamp(16px, 1.7vw, 19px);
    line-height: 1.7;
    color: rgba(28, 20, 13, .78);
    max-width: 68ch;
  }

  /* ---------- Kennzahlen-Leiste ---------- */
  .kws-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1px;
    background: rgba(28, 20, 13, .08);
    border-radius: 14px;
    overflow: hidden;
    margin: 0 0 52px;
  }
  .kws-stat {
    background: linear-gradient(160deg, #efdbc8 0%, #e7c9ac 100%);
    padding: 22px 16px;
    text-align: center;
  }
  .kws-stat strong {
    display: block;
    font-size: clamp(20px, 2.6vw, 27px);
    font-weight: 800;
    color: #ba5512;
    margin-bottom: 4px;
    line-height: 1.1;
  }
  .kws-stat span {
    display: block;
    font-size: 11.5px;
    letter-spacing: .05em;
    color: rgba(28, 20, 13, .7);
    line-height: 1.35;
  }

  /* ---------- Zwei-Spalten: Standort + Ausstattung ---------- */
  .kws-grid2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 44px;
    margin-bottom: 48px;
  }
  @media (min-width: 860px) {
    .kws-grid2 { grid-template-columns: .9fr 1.3fr; }
  }

  .kws-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #1c140d;
  }
  .kws-heading::before {
    content: "";
    width: 22px; height: 2px;
    background: #ba5512;
    display: inline-block;
  }

  .kws-location p {
    margin: 0 0 14px;
    font-size: 15px;
    line-height: 1.7;
    color: rgba(28, 20, 13, .72);
  }
  .kws-location p:last-child { margin-bottom: 0; }

  /* ---------- Ausstattungs-Grid ---------- */
  .kws-features {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .kws-features li {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 14px;
    border-radius: 12px;
    background: rgba(28, 20, 13, .04);
    border: 1px solid rgba(28, 20, 13, .1);
    transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
  }
  .kws-features li:hover {
    border-color: rgba(186, 85, 18, .5);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(70, 47, 27, .18);
  }
  .kws-features svg {
    width: 22px; height: 22px;
    fill: none;
    stroke: #ec883c;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .kws-features span {
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.35;
    color: rgba(28, 20, 13, .88);
  }

  /* ---------- Abschluss: Pull-Quote + CTA ---------- */
  .kws-quote {
    position: relative;
    padding: 26px 28px 26px 30px;
    border-left: 3px solid #ba5512;
    background: rgba(186, 85, 18, .1);
    border-radius: 0 12px 12px 0;
    margin-bottom: 34px;
  }
  .kws-quote p {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.7;
    color: rgba(28, 20, 13, .82);
    font-style: italic;
  }

  .kws-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 30px;
    border-radius: 8px;
    background: linear-gradient(100deg, #d36c22, #ba5512 55%, #8e3f0b);
    color: #fff !important;
    text-decoration: none !important;
    font-size: 13.5px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    transition: transform .3s ease, box-shadow .3s ease, gap .3s ease;
  }
  .kws-cta svg {
    width: 17px; height: 17px;
    fill: none; stroke: currentColor; stroke-width: 1.8;
    stroke-linecap: round; stroke-linejoin: round;
  }
  .kws-cta:hover {
    gap: 14px;
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(186, 85, 18, .3);
  }

  /* ---------- Scroll-Einblendung ---------- */
  .kws-rev { opacity: 0; transform: translateY(20px);
    transition: opacity .8s ease, transform .8s ease; }
  .kws-wrap.kws-in .kws-rev { opacity: 1; transform: translateY(0); }
  .kws-wrap.kws-in .kws-rev:nth-of-type(1) { transition-delay: .05s; }
  .kws-wrap.kws-in .kws-rev:nth-of-type(2) { transition-delay: .15s; }
  .kws-wrap.kws-in .kws-rev:nth-of-type(3) { transition-delay: .25s; }
  .kws-wrap.kws-in .kws-rev:nth-of-type(4) { transition-delay: .35s; }
  .kws-wrap.kws-in .kws-rev:nth-of-type(5) { transition-delay: .45s; }

  @media (prefers-reduced-motion: reduce) {
    .kws-dot { animation: none; }
    .kws-rev { opacity: 1; transform: none; transition: none; }
    .kws-features li { transition: none; }
  }

/* ============ INSTAGRAM-CTA (kwc-instagram-hell.html) ============ */
/* Ehemals "kwi-" auf der News-Seite — umbenannt auf kwc-, weil kwi- bereits
   vom "Leistungen & Partner"-Block belegt ist (Präfix-Kollision; ohne diese
   Umbenennung stand die Karte komplett ohne Styles da). Helle Adaption des
   dunklen Originals: Creme-Karte, Tinten-Text, Akzent nur als Farbe der
   Marke; der rotierende Instagram-Farbring ums Icon bleibt erhalten. */
.kwc-card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 20px;
  padding: clamp(36px, 6vw, 56px) clamp(24px, 5vw, 44px);
  background: radial-gradient(900px 550px at 80% 15%, #efdbc8 0%, #e7c9ac 55%, #d5a87b 100%);
  border: 1px solid rgba(78, 48, 24, .16);
  text-decoration: none !important;
  text-align: center;
  box-shadow: 0 10px 40px rgba(78, 48, 24, .14);
  transition: transform .4s ease, box-shadow .4s ease;
}
.kwc-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 55px rgba(78, 48, 24, .2);
}
.kwc-card * { box-sizing: border-box; }

.kwc-rings {
  position: absolute;
  right: -12%;
  bottom: -28%;
  width: min(50vw, 560px);
  aspect-ratio: 1;
  animation: kwc-spin 150s linear infinite;
  pointer-events: none;
}
@keyframes kwc-spin { to { transform: rotate(360deg); } }

.kwc-inner {
  position: relative;
  z-index: 2;
  max-width: 420px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ---------- Icon mit rotierendem Instagram-Farbring ---------- */
.kwc-icon-wrap {
  position: relative;
  width: 84px;
  height: 84px;
  margin-bottom: 22px;
  display: grid;
  place-items: center;
}
.kwc-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 200deg,
    #ba5512, #d36c22, #ec883c, #efa96c, #d36c22, #ba5512);
  animation: kwc-rotate 6s linear infinite;
}
.kwc-ring::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: #f3e0ce;
}
@keyframes kwc-rotate { to { transform: rotate(360deg); } }
.kwc-icon {
  position: relative;
  z-index: 1;
  width: 34px; height: 34px;
  fill: none;
  stroke: #1c140d;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.kwc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: #8e3f0b;
}
.kwc-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #ba5512;
  animation: kwc-pulse 2.4s ease-out infinite;
}
@keyframes kwc-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(186,85,18,.55); }
  70%, 100% { box-shadow: 0 0 0 10px rgba(186,85,18,0); }
}

.kwc-handle {
  margin: 0 0 12px;
  font-family: inherit;
  font-weight: 800;
  font-size: clamp(24px, 3.2vw, 32px);
  color: #1c140d;
}

.kwc-sub {
  margin: 0 0 26px;
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(28, 20, 13, .68);
}

.kwc-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 26px;
  border-radius: 8px;
  background: linear-gradient(100deg, #d36c22, #ba5512 55%, #8e3f0b);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: transform .3s ease, box-shadow .3s ease, gap .3s ease;
}
.kwc-cta svg {
  width: 16px; height: 16px;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .3s ease;
}
.kwc-card:hover .kwc-cta {
  gap: 14px;
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(186, 85, 18, .32);
}
.kwc-card:hover .kwc-cta svg { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .kwc-rings, .kwc-ring, .kwc-dot { animation: none; }
  .kwc-card { transition: none; }
}

/* ============ IMMOBILIEN-PORTAL · Seitenkopf (kwm-head) ============ */
/* Ersetzt die frühere nackte Überschrift "IMMOBILIEN-ANGEBOT" durch den
   Standard-Sektionskopf des Design-Systems (Mono-Eyebrow + große Zeile). */
.kwm-head {
  text-align: center;
  margin: clamp(10px, 2vw, 22px) 0 clamp(24px, 3.5vw, 40px);
}
.kwm-head-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: #8e3f0b;
}
.kwm-head-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #ba5512;
  animation: kwm-head-pulse 2.4s ease-out infinite;
}
@keyframes kwm-head-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(186,85,18,.55); }
  70%, 100% { box-shadow: 0 0 0 10px rgba(186,85,18,0); }
}
.kwm-head-title {
  margin: 0;
  font-family: inherit;
  font-weight: 300;
  font-size: clamp(26px, 4vw, 40px);
  line-height: 1.15;
  color: #1c140d;
  letter-spacing: normal;
  text-transform: none;
}
.kwm-head-title b { font-weight: 800; color: #8e3f0b; }
@media (prefers-reduced-motion: reduce) {
  .kwm-head-dot { animation: none; }
}

/* Rhythmus-Glättung: steht eine der großen Karten direkt am Anfang/Ende einer
   Sektion, entfällt ihr Außenabstand — sonst stapeln sich Sektions-Padding und
   Karten-Margin zu einem doppelt so großen Loch wie zwischen den Karten. */
.kw-section > :is(.kwa-wrap, .kwl-wrap, .kww-wrap, .kwg-wrap):first-child { margin-top: 0; }
.kw-section > :is(.kwa-wrap, .kwl-wrap, .kww-wrap, .kwg-wrap):last-child { margin-bottom: 0; }

/* ============ NEWS · INSTAGRAM-FEATURE (kwu-news-instagram-hell.html) ============ */
/* Neugestaltung der News-Seite: ersetzt die beiden früheren Foto-Cover
   (verschachtelte Panels) durch EINE aufgeräumte Karte — links die
   redaktionellen Texte als Icon-Zeilen, rechts der Instagram-Auftritt mit
   rotierendem Farbring und CTA. Inhalte 1:1 übernommen. */
.kwu-wrap { width: 100%; margin-block: clamp(28px, 4vw, 48px); }
.kwu-wrap * { box-sizing: border-box; }
.kwu-card {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  padding: clamp(30px, 4.5vw, 54px) clamp(24px, 4vw, 52px);
  background: radial-gradient(1100px 620px at 12% 8%, #efdbc8 0%, #e7c9ac 55%, #d5a87b 100%);
  border: 1px solid rgba(78, 48, 24, .16);
  box-shadow: 0 10px 40px rgba(78, 48, 24, .12);
}
.kwu-rings {
  position: absolute;
  right: -14%;
  top: -30%;
  width: min(46vw, 540px);
  aspect-ratio: 1;
  animation: kwu-spin 150s linear infinite;
  pointer-events: none;
}
@keyframes kwu-spin { to { transform: rotate(360deg); } }

.kwu-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 48px);
  align-items: center;
}
@media (min-width: 900px) {
  .kwu-grid { grid-template-columns: 1.35fr 1fr; }
}

/* ---------- linke Spalte: Texte ---------- */
.kwu-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: #8e3f0b;
}
.kwu-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #ba5512;
  animation: kwu-pulse 2.4s ease-out infinite;
}
@keyframes kwu-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(186,85,18,.55); }
  70%, 100% { box-shadow: 0 0 0 10px rgba(186,85,18,0); }
}
.kwu-lead {
  margin: 0 0 22px;
  font-size: clamp(16.5px, 1.7vw, 19px);
  line-height: 1.55;
  font-weight: 700;
  color: #1c140d;
}
.kwu-feature {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 16px;
  align-items: start;
  padding: 14px 0;
}
.kwu-feature + .kwu-feature { border-top: 1px solid rgba(78, 48, 24, .14); }
.kwu-feature-icon {
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(186, 85, 18, .1);
}
.kwu-feature-icon svg {
  width: 24px; height: 24px;
  fill: none;
  stroke: #8e3f0b;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.kwu-feature h3 {
  margin: 0 0 4px;
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 800;
  letter-spacing: .01em;
  text-transform: none;
  color: #1c140d;
}
.kwu-feature p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(28, 20, 13, .72);
}

/* ---------- rechte Spalte: Instagram ---------- */
.kwu-insta {
  text-align: center;
  padding: clamp(22px, 3vw, 34px) clamp(18px, 2.5vw, 30px);
  border-radius: 16px;
  background: rgba(243, 224, 206, .55);
  border: 1px solid rgba(78, 48, 24, .14);
}
.kwu-icon-wrap {
  position: relative;
  width: 84px; height: 84px;
  margin: 0 auto 18px;
  display: grid;
  place-items: center;
}
.kwu-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 200deg,
    #ba5512, #d36c22, #ec883c, #efa96c, #d36c22, #ba5512);
  animation: kwu-rotate 6s linear infinite;
}
.kwu-ring::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: #f3e0ce;
}
@keyframes kwu-rotate { to { transform: rotate(360deg); } }
.kwu-icon {
  position: relative;
  z-index: 1;
  width: 34px; height: 34px;
  fill: none;
  stroke: #1c140d;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.kwu-follow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: #8e3f0b;
}
.kwu-handle {
  margin: 0 0 10px;
  font-family: inherit;
  font-weight: 800;
  font-size: clamp(22px, 2.6vw, 28px);
  color: #1c140d;
}
.kwu-sub {
  margin: 0 0 22px;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(28, 20, 13, .68);
}
.kwu-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 26px;
  border-radius: 8px;
  background: linear-gradient(100deg, #d36c22, #ba5512 55%, #8e3f0b);
  color: #fff !important;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none !important;
  transition: transform .3s ease, box-shadow .3s ease, gap .3s ease;
}
.kwu-cta svg {
  width: 16px; height: 16px;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .3s ease;
}
.kwu-cta:hover {
  gap: 14px;
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(186, 85, 18, .32);
}
.kwu-cta:hover svg { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .kwu-rings, .kwu-ring, .kwu-dot { animation: none; }
}

/* ============ NEWS-ARTIKEL · HOLZ VON HIER (kwr-holz-von-hier.php) ============ */
/* Redaktioneller Artikel auf der News-Seite: Kopf mit Eyebrow/Lead, darunter
   ein zweispaltiger Block aus Hochformat-Foto (Plakettenuebergabe) und
   "Auf einen Blick"-Faktenliste, danach der Fliesstext in Abschnitten und
   zum Schluss ein aufklappbarer Hintergrund-Kasten "Ueber HOLZ VON HIER".
   Farbwelt wie kwu-/kwa-: helle Holzkarte, Akzent #ba5512 / #8e3f0b. */
.kwr-wrap { width: 100%; margin-block: clamp(28px, 4vw, 48px); }
.kwr-wrap * { box-sizing: border-box; }
.kwr-card {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  padding: clamp(30px, 4.5vw, 56px) clamp(24px, 4vw, 52px);
  background: radial-gradient(1100px 640px at 88% 4%, #efdbc8 0%, #e7c9ac 55%, #d5a87b 100%);
  border: 1px solid rgba(78, 48, 24, .16);
  box-shadow: 0 10px 40px rgba(78, 48, 24, .12);
}
.kwr-rings {
  position: absolute;
  left: -16%;
  bottom: -28%;
  width: min(52vw, 600px);
  aspect-ratio: 1;
  animation: kwr-spin 170s linear infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes kwr-spin { to { transform: rotate(360deg); } }
.kwr-card > *:not(.kwr-rings) { position: relative; z-index: 2; }

/* ---------- Einblenden beim Scrollen ---------- */
.kwr-rev {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s ease, transform .7s ease;
}
.kwr-in .kwr-rev { opacity: 1; transform: none; }
.kwr-in .kwr-head   { transition-delay: .05s; }
.kwr-in .kwr-figure { transition-delay: .12s; }
.kwr-in .kwr-aside  { transition-delay: .20s; }
.kwr-in .kwr-body section:nth-of-type(1) { transition-delay: .16s; }
.kwr-in .kwr-body section:nth-of-type(2) { transition-delay: .22s; }
.kwr-in .kwr-body section:nth-of-type(3) { transition-delay: .28s; }
.kwr-in .kwr-more   { transition-delay: .30s; }

/* ---------- Kopf ---------- */
.kwr-head { max-width: 60ch; margin: 0 0 clamp(26px, 3.4vw, 38px); }
.kwr-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: #8e3f0b;
}
.kwr-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #ba5512;
  animation: kwr-pulse 2.4s ease-out infinite;
  flex: none;
}
@keyframes kwr-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(186,85,18,.55); }
  70%, 100% { box-shadow: 0 0 0 10px rgba(186,85,18,0); }
}
.kwr-title {
  margin: 0 0 16px;
  font-family: inherit;
  font-weight: 300;
  font-size: clamp(26px, 3.6vw, 42px);
  line-height: 1.18;
  letter-spacing: -.01em;
  color: #1c140d;
}
.kwr-title b { font-weight: 800; font-family: inherit; }
.kwr-lead {
  margin: 0;
  font-size: clamp(16.5px, 1.7vw, 19px);
  line-height: 1.6;
  color: rgba(28, 20, 13, .82);
}
.kwr-lead b { font-weight: 800; color: #8e3f0b; }

/* ---------- Foto + Fakten ---------- */
.kwr-top {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 3.2vw, 40px);
  align-items: start;
  margin-bottom: clamp(28px, 3.6vw, 44px);
}
@media (min-width: 900px) {
  .kwr-top { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); }
}
.kwr-figure { margin: 0; min-width: 0; }
.kwr-photo {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(78, 48, 24, .18);
  box-shadow: 0 12px 34px rgba(78, 48, 24, .18);
  background: rgba(243, 224, 206, .5);
}
.kwr-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: 50% 32%;
  transform: scale(1.01);
  transition: transform 1.2s ease;
}
.kwr-figure:hover .kwr-photo img { transform: scale(1.045); }
.kwr-figure figcaption {
  margin-top: 12px;
  padding-left: 14px;
  border-left: 2px solid rgba(186, 85, 18, .5);
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(28, 20, 13, .68);
}

.kwr-aside {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 2.8vw, 30px) clamp(18px, 2.4vw, 28px);
  border-radius: 16px;
  background: rgba(243, 224, 206, .55);
  border: 1px solid rgba(78, 48, 24, .14);
}
.kwr-aside-label {
  margin: 0 0 18px;
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: #8e3f0b;
}
.kwr-facts { list-style: none; margin: 0; padding: 0; }

/* Die Weiterfuehrungs-Links sitzen per margin-top:auto am unteren Ende der
   Spalte und fuellen so den Raum neben dem hohen Hochformat-Foto. */
.kwr-aside-links {
  margin-top: 4px;
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.kwr-aside-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 15px;
  border-radius: 10px;
  background: rgba(186, 85, 18, .09);
  color: #8e3f0b !important;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.35;
  text-decoration: none !important;
  transition: background .25s ease, transform .25s ease;
}
.kwr-aside-links a:hover { background: rgba(186, 85, 18, .17); transform: translateX(2px); }
.kwr-aside-links svg {
  width: 16px; height: 16px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.kwr-facts li {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 14px 0;
}
.kwr-facts li + li { border-top: 1px solid rgba(78, 48, 24, .14); }
.kwr-fact-icon {
  width: 42px; height: 42px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: rgba(186, 85, 18, .1);
}
.kwr-fact-icon svg {
  width: 22px; height: 22px;
  fill: none;
  stroke: #8e3f0b;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.kwr-facts strong {
  display: block;
  font-size: 15px;
  font-weight: 800;
  color: #1c140d;
  line-height: 1.3;
}
.kwr-facts small {
  display: block;
  margin-top: 2px;
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(28, 20, 13, .68);
}

/* ---------- Fliesstext ---------- */
.kwr-body { max-width: 74ch; }
.kwr-body section + section { margin-top: clamp(24px, 3vw, 34px); }
.kwr-body h3 {
  margin: 0 0 12px;
  font-family: inherit;
  font-weight: 800;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.3;
  color: #1c140d;
}
.kwr-body p {
  margin: 0 0 14px;
  font-size: 15.5px;
  line-height: 1.72;
  color: rgba(28, 20, 13, .78);
}
.kwr-body p:last-child { margin-bottom: 0; }
.kwr-body b { font-weight: 800; color: #1c140d; }

/* ---------- aufklappbarer Hintergrund-Kasten ---------- */
.kwr-more {
  margin-top: clamp(28px, 3.6vw, 44px);
  border-radius: 16px;
  border: 1px solid rgba(78, 48, 24, .16);
  background: rgba(243, 224, 206, .55);
  overflow: hidden;
}
.kwr-more-btn {
  width: 100%;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 28px;
  gap: 16px;
  align-items: center;
  padding: clamp(16px, 2.2vw, 22px) clamp(16px, 2.4vw, 26px);
  border: 0;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .25s ease;
}
.kwr-more-btn:hover { background: rgba(186, 85, 18, .07); }
.kwr-more-btn:focus-visible { outline: 2px solid #ba5512; outline-offset: -3px; }
.kwr-more-mark {
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(186, 85, 18, .12);
}
.kwr-more-mark svg {
  width: 24px; height: 24px;
  fill: none; stroke: #8e3f0b; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.kwr-more-txt { min-width: 0; }
.kwr-more-txt strong {
  display: block;
  font-size: 15.5px;
  font-weight: 800;
  color: #1c140d;
}
.kwr-more-txt small {
  display: block;
  margin-top: 2px;
  font-size: 13.5px;
  color: rgba(28, 20, 13, .66);
}
.kwr-more-chev {
  width: 28px; height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(186, 85, 18, .12);
  transition: transform .35s ease, background .25s ease;
}
.kwr-more-chev svg {
  width: 16px; height: 16px;
  fill: none; stroke: #8e3f0b; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.kwr-more.kwr-open .kwr-more-chev { transform: rotate(180deg); background: rgba(186, 85, 18, .2); }

.kwr-more-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .45s ease;
}
.kwr-more.kwr-open .kwr-more-panel { grid-template-rows: 1fr; }
.kwr-more-inner {
  overflow: hidden;
  min-height: 0;
  /* KEIN vertikales Padding: der Panel-Inhalt wird ueber grid-template-rows
     von 0fr auf 1fr aufgefahren; vertikales Padding an diesem Grid-Kind
     bliebe auch im zugeklappten Zustand als sichtbarer Streifen stehen.
     Der untere Abstand kommt deshalb ueber das letzte Kind. */
  padding: 0 clamp(16px, 2.4vw, 26px);
}
.kwr-more-inner > *:first-child { margin-top: 4px; }
.kwr-more-inner > *:last-child { margin-bottom: clamp(20px, 2.6vw, 28px); }
.kwr-more-inner p {
  margin: 0 0 13px;
  max-width: 74ch;
  font-size: 14.5px;
  line-height: 1.7;
  color: rgba(28, 20, 13, .74);
}
.kwr-more-inner b { font-weight: 800; color: #1c140d; }
.kwr-more-inner h4 {
  margin: 22px 0 10px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #8e3f0b;
}

@media (max-width: 560px) {
  .kwr-more-btn { grid-template-columns: 40px minmax(0, 1fr) 24px; gap: 12px; }
  .kwr-more-mark { width: 40px; height: 40px; }
  .kwr-more-chev { width: 24px; height: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .kwr-rings, .kwr-dot { animation: none; }
  .kwr-rev { opacity: 1; transform: none; transition: none; }
  .kwr-photo img, .kwr-more-panel, .kwr-more-chev { transition: none; }
}

/* ---- Videoblock: echter Startknopf statt Autoplay ---- */
/* Der Film laedt erst beim Klick (preload="none" + Standbild). Vorher lief
   er automatisch los und zog dabei 335 MB pro Seitenaufruf. */
.kww-start {
  position: absolute;
  inset: 0;
  z-index: 3;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.kww-start:focus-visible { outline: 2px solid #ec883c; outline-offset: -4px; }
/* Das Play-Symbol muss dauerhaft sichtbar sein — auf Touch-Geraeten gibt es
   kein Hover, und ohne Symbol sieht niemand, dass hier etwas startet. */
.kww-play span { opacity: .92; transform: scale(1); }
.kww-media:hover .kww-play span { opacity: 1; transform: scale(1.06); }
.kww-media::after { transition: opacity .4s ease; }

/* Sobald der Film laeuft: Overlay weg, Bedienleiste frei, kein Hover-Zoom
   und kein Beschnitt mehr (16:9 in einem 16:10-Rahmen). */
.kww-media.kww-laeuft .kww-start { display: none; }
.kww-media.kww-laeuft::after { opacity: 0; }
.kww-media.kww-laeuft { cursor: default; }
.kww-media.kww-laeuft video { object-fit: contain; background: #100d09; }
.kww-media.kww-laeuft:hover video { transform: none; }

/* ---- Freistehendes Video (kwq-) ---- */
/* Ersetzt die YouTube-Einbettung: selbst gehostet, laedt erst auf Wunsch,
   keine Datenuebertragung an Dritte, keine Einwilligung noetig. */
.kwq-video { margin: clamp(24px, 3.5vw, 40px) 0 0; }
.kwq-video video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: #100d09;
  border-radius: 16px;
  border: 1px solid rgba(78, 48, 24, .18);
  box-shadow: 0 12px 34px rgba(78, 48, 24, .18);
}
.kwq-video figcaption {
  margin-top: 12px;
  padding-left: 14px;
  border-left: 2px solid rgba(186, 85, 18, .5);
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(28, 20, 13, .68);
}

/* ==========================================================================
   KONTAKTSEITE (kwe-) — Kontaktwege, Formular mit Anhang, Kurzfragen
   Alles im HELLEN Holz-Design-System: Kartengrund als radialer Verlauf,
   Innenpanels rgba(243,224,206,.55), Akzent #8e3f0b / #ba5512.
   Bewegung: eine Kurve fuer alles (--kwe-aus), Dauern unter 300 ms,
   prefers-reduced-motion und Hover-Sperre auf Touch werden bedient.
   ========================================================================== */
.kwe-wege, .kwe-form-wrap, .kwe-faq { --kwe-aus: cubic-bezier(.23, 1, .32, 1); }
.kwe-wege *, .kwe-form-wrap *, .kwe-faq * { box-sizing: border-box; }

/* ---------- gemeinsame Textbausteine ---------- */
.kwe-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 11.5px; font-weight: 700; letter-spacing: .28em;
  text-transform: uppercase; color: #8e3f0b; margin: 0 0 18px;
}
.kwe-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #ba5512;
  animation: kwe-puls 2.4s ease-out infinite;
}
@keyframes kwe-puls {
  0%        { box-shadow: 0 0 0 0 rgba(186,85,18,.55); }
  70%, 100% { box-shadow: 0 0 0 11px rgba(186,85,18,0); }
}
.kwe-h2 {
  font-family: inherit !important; margin: 0 0 14px; font-weight: 300;
  font-size: clamp(27px, 4.2vw, 44px); line-height: 1.14; color: #1c140d;
  text-wrap: pretty;
}
.kwe-h2 b { font-family: inherit !important; font-weight: 800; color: #8e3f0b; }
.kwe-lead {
  margin: 0 0 30px; max-width: 62ch; text-wrap: pretty;
  font-size: clamp(15px, 1.5vw, 17.5px); line-height: 1.65;
  color: rgba(28,20,13,.78);
}
.kwe-lead a { color: #8e3f0b; font-weight: 600; }
.kwe-stern { color: #ba5512; font-weight: 700; }
.kwe-optional { color: rgba(28,20,13,.5); font-weight: 400; font-size: .92em; }

/* ---------- Scroll-Einblendung (Muster der uebrigen Bloecke) ---------- */
.kwe-rev {
  opacity: 0; transform: translateY(20px);
  transition: opacity .6s var(--kwe-aus), transform .6s var(--kwe-aus);
}
.kwe-in .kwe-rev { opacity: 1; transform: none; }
.kwe-in .kwe-rev:nth-child(2)  { transition-delay: .06s; }
.kwe-in .kwe-rev:nth-child(3)  { transition-delay: .12s; }
.kwe-in .kwe-rev:nth-child(4)  { transition-delay: .18s; }
.kwe-in .kwe-rev:nth-child(5)  { transition-delay: .24s; }
.kwe-karten.kwe-in > .kwe-rev:nth-child(1) { transition-delay: 0s; }
.kwe-karten.kwe-in > .kwe-rev:nth-child(2) { transition-delay: .06s; }
.kwe-karten.kwe-in > .kwe-rev:nth-child(3) { transition-delay: .12s; }
.kwe-karten.kwe-in > .kwe-rev:nth-child(4) { transition-delay: .18s; }

/* ==========================================================================
   KONTAKTWEGE (kwe-wege)
   ========================================================================== */
.kwe-wege { margin-block: clamp(24px, 4vw, 44px) clamp(28px, 4.5vw, 52px); }

.kwe-karten {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
}
/* Vier Karten gehen nur in 4x1, 2x2 oder 1x4 sauber auf. Ohne diese Regel
   waeren es im mittleren Bereich drei Karten und eine allein darunter. */
@media (min-width: 620px) and (max-width: 1059px) {
  .kwe-karten { grid-template-columns: repeat(2, 1fr); }
}
.kwe-karte {
  position: relative; display: flex; align-items: center; gap: 15px;
  padding: 20px 18px; border-radius: 16px; text-decoration: none !important;
  background: radial-gradient(700px 420px at 12% 8%, #efdbc8 0%, #e7c9ac 55%, #d5a87b 100%);
  border: 1px solid rgba(78,48,24,.16);
  box-shadow: 0 8px 26px rgba(78,48,24,.10);
  color: #1c140d;
  transition: transform .22s var(--kwe-aus), box-shadow .22s var(--kwe-aus),
              border-color .22s var(--kwe-aus);
}
.kwe-ikon {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 13px;
  background: rgba(186,85,18,.12); border: 1px solid rgba(186,85,18,.20);
}
.kwe-ikon svg {
  width: 26px; height: 26px; fill: none; stroke: #8e3f0b;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.kwe-karte-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kwe-karte-label {
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 10.5px; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; color: #8e3f0b;
}
/* Kein nowrap: "info@kawe-bau.de" wuerde sonst in der schmalen Karte
   abgeschnitten. Lieber umbrechen als kuerzen. */
.kwe-karte-wert {
  font-size: 16.5px; font-weight: 700; color: #1c140d;
  line-height: 1.25; overflow-wrap: anywhere;
}
.kwe-karte-sub { font-size: 13px; line-height: 1.45; color: rgba(28,20,13,.66); }
.kwe-karte-pfeil {
  margin-left: auto; flex: 0 0 auto; display: grid; place-items: center;
  width: 24px; height: 24px; opacity: .45;
  transition: transform .22s var(--kwe-aus), opacity .22s var(--kwe-aus);
}
.kwe-karte-pfeil svg {
  width: 20px; height: 20px; fill: none; stroke: #8e3f0b;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
@media (hover: hover) and (pointer: fine) {
  .kwe-karte:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 38px rgba(78,48,24,.18);
    border-color: rgba(186,85,18,.38);
  }
  .kwe-karte:hover .kwe-karte-pfeil { transform: translateX(4px); opacity: .9; }
}
.kwe-karte:active { transform: scale(.985); }
.kwe-karte:focus-visible {
  outline: 2px solid #ba5512; outline-offset: 3px;
}

/* ---------- vierte Karte: soziale Kanaele ----------
   Sie fuehrt an zwei Ziele, ist also selbst kein Link: kein Zeigefinger,
   kein Anheben beim Ueberfahren der Karte. Die Bewegung sitzt stattdessen
   auf den beiden Links darin. */
.kwe-karte--sozial { cursor: default; }
@media (hover: hover) and (pointer: fine) {
  .kwe-karte--sozial:hover {
    transform: none;
    box-shadow: 0 8px 26px rgba(78,48,24,.10);
    border-color: rgba(78,48,24,.16);
  }
}
.kwe-karte--sozial:active { transform: none; }

.kwe-karte-links {
  display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 3px 0 2px;
}
.kwe-karte-links a {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 14.5px; font-weight: 700; color: #8e3f0b;
  text-decoration: none !important;
  transition: color .2s ease, transform .2s var(--kwe-aus);
}
.kwe-karte-links a svg {
  width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
@media (hover: hover) and (pointer: fine) {
  .kwe-karte-links a:hover { color: #1c140d; transform: translateY(-1px); }
}
.kwe-karte-links a:focus-visible { outline: 2px solid #ba5512; outline-offset: 3px; border-radius: 4px; }

/* ==========================================================================
   FORMULAR (kwe-form)
   ========================================================================== */
.kwe-form-wrap { margin-block: clamp(28px, 4.5vw, 52px); }
/* Die Karte ist bewusst schmaler als die Kontaktkarten darueber: ein
   Formular, das ueber 1200 px laeuft, hat entweder unlesbar breite Felder
   oder eine leere rechte Haelfte. 920 px zentriert loest beides. */
.kwe-form-card {
  max-width: 920px; margin-inline: auto;
  position: relative; overflow: hidden; border-radius: 20px;
  padding: clamp(30px, 5vw, 60px) clamp(24px, 5vw, 60px);
  background: radial-gradient(1100px 620px at 12% 8%, #efdbc8 0%, #e7c9ac 55%, #d5a87b 100%);
  border: 1px solid rgba(78,48,24,.16);
  box-shadow: 0 14px 42px rgba(78,48,24,.16);
  color: #1c140d;
}
/* Lichtschein oben rechts. Bewusst KEINE Diagonale wie im kwl-Block: die
   Karte hier ist deutlich hoeher, und die harte Kante der Diagonale zoege
   quer durch das Formular. Ein weicher Radialverlauf laeuft sauber aus. */
.kwe-form-card::before {
  content: ""; position: absolute; top: 0; right: 0; pointer-events: none;
  width: min(62%, 580px); height: min(62%, 540px);
  background: radial-gradient(circle at 100% 0,
              rgba(186,85,18,.15) 0%, rgba(217,178,140,.30) 42%, transparent 72%);
}
.kwe-rings {
  position: absolute; right: -12%; top: -32%;
  width: min(48vw, 600px); aspect-ratio: 1; opacity: .45;
  animation: kwe-dreh 165s linear infinite; pointer-events: none;
}
@keyframes kwe-dreh { to { transform: rotate(360deg); } }
.kwe-form-inner { position: relative; z-index: 2; }

/* WICHTIG: display:grid/flex weiter unten schlaegt das UA-[hidden].
   Ohne diese Zeile blieben Dateiliste und Balken als leere Streifen stehen. */
.kwe-liste[hidden], .kwe-balken[hidden] { display: none !important; }

/* ---------- Felder ---------- */
.kwe-form { margin: 0; }
.kwe-zeile {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.kwe-feld { margin: 0 0 16px; position: relative; }
.kwe-feld > label,
.kwe-feld > .kwe-feld-label {
  display: block; margin: 0 0 7px;
  font-size: 13.5px; font-weight: 700; color: #1c140d;
}
.kwe-form input[type="text"],
.kwe-form input[type="email"],
.kwe-form input[type="tel"],
.kwe-form textarea,
.kwe-form select {
  width: 100%; font-family: inherit; font-size: 15px; color: #1c140d;
  padding: 13px 15px; border-radius: 10px;
  border: 1px solid rgba(28,20,13,.22);
  background: rgba(255,255,255,.68);
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
  -webkit-appearance: none; appearance: none;
}
.kwe-form textarea { resize: vertical; min-height: 150px; line-height: 1.6; }
.kwe-form ::placeholder { color: rgba(28,20,13,.42); }
.kwe-form input:focus, .kwe-form textarea:focus, .kwe-form select:focus {
  outline: none; border-color: #ba5512; background: rgba(255,255,255,.9);
  box-shadow: 0 0 0 3px rgba(186,85,18,.16);
}
.kwe-feld--fehler > label { color: #96280c; }
.kwe-feld--fehler input,
.kwe-feld--fehler textarea,
.kwe-feld--fehler select,
.kwe-feld--fehler .kwe-drop {
  border-color: #b5350f; background: rgba(255,246,242,.85);
}

/* Auswahlfeld mit eigenem Pfeil (appearance:none oben) */
.kwe-select { position: relative; display: block; }
.kwe-select select { padding-right: 42px; cursor: pointer; }
.kwe-select svg {
  position: absolute; right: 14px; top: 50%; width: 18px; height: 18px;
  transform: translateY(-50%); pointer-events: none;
  fill: none; stroke: #8e3f0b; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Zeichenzaehler */
.kwe-zaehler {
  position: absolute; right: 4px; bottom: -18px;
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 11px; color: rgba(28,20,13,.5);
}
.kwe-zaehler[data-voll="1"] { color: #96280c; }

/* ---------- Ablagefeld fuer Dateien ---------- */
.kwe-drop {
  position: relative; display: flex; align-items: center; gap: 16px;
  padding: 20px 20px; border-radius: 14px;
  border: 1.6px dashed rgba(78,48,24,.32);
  background: rgba(243,224,206,.5);
  transition: border-color .2s ease, background .2s ease, transform .2s var(--kwe-aus);
}
.kwe-drop input[type="file"] {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer;
}
.kwe-drop-ikon {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 13px;
  background: rgba(186,85,18,.12); border: 1px solid rgba(186,85,18,.2);
}
.kwe-drop-ikon svg {
  width: 26px; height: 26px; fill: none; stroke: #8e3f0b;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.kwe-drop-text { font-size: 15px; color: rgba(28,20,13,.8); line-height: 1.4; }
.kwe-drop-text b { font-family: inherit !important; color: #8e3f0b; font-weight: 700; }
.kwe-drop-text small {
  display: block; margin-top: 4px; font-size: 12.5px; color: rgba(28,20,13,.6);
}
@media (hover: hover) and (pointer: fine) {
  .kwe-drop:hover { border-color: rgba(186,85,18,.55); background: rgba(247,232,216,.7); }
}
.kwe-drop:focus-within {
  border-color: #ba5512; box-shadow: 0 0 0 3px rgba(186,85,18,.16);
}
.kwe-drop.kwe-drop--ueber {
  border-color: #ba5512; background: rgba(250,236,222,.9); transform: scale(1.008);
}

/* ---------- Liste der gewaehlten Dateien ---------- */
.kwe-liste { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.kwe-liste li {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; border-radius: 11px;
  background: rgba(255,255,255,.6); border: 1px solid rgba(78,48,24,.14);
  animation: kwe-rein .22s var(--kwe-aus) both;
}
@keyframes kwe-rein {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.kwe-liste .kwe-datei-typ {
  flex: 0 0 auto; display: grid; place-items: center;
  min-width: 40px; height: 26px; padding: 0 7px; border-radius: 7px;
  background: rgba(186,85,18,.14); color: #8e3f0b;
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.kwe-liste .kwe-datei-name {
  flex: 1 1 auto; min-width: 0; font-size: 14px; color: #1c140d;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kwe-liste .kwe-datei-groesse {
  flex: 0 0 auto; font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 12px; color: rgba(28,20,13,.6);
}
.kwe-liste li[data-zuviel="1"] { border-color: #b5350f; background: rgba(255,246,242,.85); }
.kwe-liste li[data-zuviel="1"] .kwe-datei-groesse { color: #96280c; font-weight: 700; }

/* ---------- Groessenbalken ---------- */
.kwe-balken { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.kwe-balken-spur {
  flex: 1 1 auto; height: 6px; border-radius: 99px; overflow: hidden;
  background: rgba(78,48,24,.14);
}
.kwe-balken-fuell {
  display: block; height: 100%; width: 100%; border-radius: 99px;
  background: linear-gradient(90deg, #d36c22, #ba5512);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .25s var(--kwe-aus), background .25s ease;
}
.kwe-balken[data-voll="1"] .kwe-balken-fuell { background: linear-gradient(90deg, #c4441a, #96280c); }
.kwe-balken-text {
  flex: 0 0 auto; font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 12px; color: rgba(28,20,13,.66);
}
.kwe-balken[data-voll="1"] .kwe-balken-text { color: #96280c; font-weight: 700; }

/* ---------- Honigtopf: fuer Menschen unsichtbar ---------- */
.kwe-hp {
  position: absolute !important; left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}

/* ---------- Rechenaufgabe ---------- */
.kwe-feld--rechnen { max-width: 480px; }
.kwe-feld--rechnen label b { font-family: inherit !important; color: #8e3f0b; }
.kwe-feld--rechnen input { max-width: 120px; text-align: center; letter-spacing: .1em; }

/* ---------- Einwilligung ---------- */
.kwe-consent {
  display: flex; align-items: flex-start; gap: 11px;
  margin: 4px 0 22px; padding: 14px 16px; border-radius: 13px;
  background: rgba(243,224,206,.55); border: 1px solid rgba(78,48,24,.14);
}
.kwe-consent input[type="checkbox"] {
  flex: 0 0 auto; width: 19px; height: 19px; margin: 1px 0 0;
  accent-color: #ba5512; cursor: pointer;
}
.kwe-consent label {
  font-size: 13.5px; line-height: 1.6; color: rgba(28,20,13,.78); cursor: pointer;
}
.kwe-consent a { color: #8e3f0b; font-weight: 600; }
.kwe-consent.kwe-feld--fehler { border-color: #b5350f; background: rgba(255,246,242,.85); }

/* ---------- Absenden ---------- */
.kwe-absenden {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin: 0;
}
.kwe-cta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 26px; border: none; border-radius: 10px; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none !important; color: #fff !important;
  background: linear-gradient(100deg, #d36c22, #ba5512 55%, #8e3f0b);
  box-shadow: 0 8px 22px rgba(142,63,11,.28);
  transition: transform .16s var(--kwe-aus), box-shadow .22s var(--kwe-aus);
}
.kwe-cta svg {
  width: 18px; height: 18px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .22s var(--kwe-aus);
}
@media (hover: hover) and (pointer: fine) {
  .kwe-cta:hover { box-shadow: 0 14px 30px rgba(142,63,11,.36); }
  .kwe-cta:hover svg { transform: translateX(4px); }
}
.kwe-cta:active { transform: scale(.97); }
.kwe-cta:focus-visible { outline: 2px solid #1c140d; outline-offset: 3px; }
.kwe-cta[disabled] { opacity: .62; cursor: progress; }
.kwe-cta--leer {
  background: none; color: #8e3f0b !important; box-shadow: none;
  border: 1px solid rgba(142,63,11,.35);
}
@media (hover: hover) and (pointer: fine) {
  .kwe-cta--leer:hover { background: rgba(186,85,18,.1); box-shadow: none; }
}
.kwe-absenden-hinweis {
  font-size: 12.5px; line-height: 1.55; color: rgba(28,20,13,.6); max-width: 42ch;
}

/* ---------- Hinweise ---------- */
.kwe-hinweis {
  display: flex; align-items: flex-start; gap: 11px;
  margin: 0 0 22px; padding: 14px 16px; border-radius: 12px;
  font-size: 14.5px; line-height: 1.55;
}
.kwe-hinweis svg {
  flex: 0 0 auto; width: 21px; height: 21px; margin-top: 1px;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.kwe-hinweis--fehler {
  color: #7d2409; background: rgba(255,241,235,.9); border: 1px solid rgba(181,53,15,.4);
}

/* ---------- Erfolgszustand ---------- */
.kwe-erfolg { text-align: left; }
.kwe-erfolg-ikon {
  display: grid; place-items: center; width: 62px; height: 62px;
  margin: 0 0 20px; border-radius: 18px;
  background: rgba(186,85,18,.13); border: 1px solid rgba(186,85,18,.24);
}
.kwe-erfolg-ikon svg {
  width: 36px; height: 36px; fill: none; stroke: #8e3f0b;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.kwe-erfolg-ikon svg circle { stroke-dasharray: 126; animation: kwe-kreis .5s var(--kwe-aus) both; }
.kwe-erfolg-ikon svg polyline { stroke-dasharray: 30; animation: kwe-haken .35s var(--kwe-aus) .35s both; }
@keyframes kwe-kreis { from { stroke-dashoffset: 126; } to { stroke-dashoffset: 0; } }
@keyframes kwe-haken { from { stroke-dashoffset: 30; } to { stroke-dashoffset: 0; } }
.kwe-erfolg-links { display: flex; flex-wrap: wrap; gap: 12px; margin: 4px 0 0; }

/* ==========================================================================
   KURZFRAGEN (kwe-faq) — Aufklappmuster wie kwr-
   ========================================================================== */
.kwe-faq { margin-block: clamp(28px, 4.5vw, 52px); }
.kwe-faq-liste { display: grid; gap: 10px; }
.kwe-faq-item {
  border-radius: 14px; overflow: hidden;
  background: radial-gradient(700px 420px at 12% 8%, #efdbc8 0%, #e7c9ac 55%, #d5a87b 100%);
  border: 1px solid rgba(78,48,24,.16);
  box-shadow: 0 6px 20px rgba(78,48,24,.09);
  transition: border-color .2s ease, box-shadow .2s var(--kwe-aus);
}
.kwe-faq-item.kwe-faq--offen { border-color: rgba(186,85,18,.34); }
.kwe-faq-frage { margin: 0; font-family: inherit !important; font-weight: 400; }
.kwe-faq-knopf {
  width: 100%; display: flex; align-items: center; gap: 16px;
  padding: 17px 20px; border: none; background: none; cursor: pointer;
  font-family: inherit; font-size: clamp(15px, 1.6vw, 17px); font-weight: 700;
  line-height: 1.4; color: #1c140d; text-align: left;
  transition: color .2s ease;
}
.kwe-faq-knopf > span { flex: 1 1 auto; min-width: 0; text-wrap: pretty; }
.kwe-faq-knopf svg {
  flex: 0 0 auto; width: 20px; height: 20px;
  fill: none; stroke: #8e3f0b; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .22s var(--kwe-aus);
}
.kwe-faq-knopf[aria-expanded="true"] svg { transform: rotate(135deg); }
@media (hover: hover) and (pointer: fine) {
  .kwe-faq-knopf:hover { color: #8e3f0b; }
}
.kwe-faq-knopf:focus-visible { outline: 2px solid #ba5512; outline-offset: -3px; }
/* Panel: 0fr -> 1fr. Das Grid-Kind darf KEIN vertikales Padding tragen,
   sonst bleibt im zugeklappten Zustand ein Streifen stehen. */
.kwe-faq-panel {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .22s var(--kwe-aus);
}
.kwe-faq--offen .kwe-faq-panel { grid-template-rows: 1fr; }
.kwe-faq-innen { overflow: hidden; min-height: 0; padding: 0 20px; }
.kwe-faq-innen > *:last-child { margin-bottom: 18px; }
.kwe-faq-innen p {
  margin: 0; font-size: 14.5px; line-height: 1.68;
  color: rgba(28,20,13,.78); max-width: 68ch; text-wrap: pretty;
}

/* ==========================================================================
   Rueckzugsstufen
   ========================================================================== */
@media (max-width: 560px) {
  .kwe-drop { flex-direction: column; align-items: flex-start; gap: 12px; text-align: left; }
  .kwe-absenden .kwe-cta { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .kwe-rev { opacity: 1 !important; transform: none !important; transition: none !important; }
  .kwe-rings, .kwe-dot { animation: none !important; }
  .kwe-karte, .kwe-cta, .kwe-cta svg, .kwe-karte-pfeil, .kwe-drop,
  .kwe-faq-item, .kwe-faq-knopf svg { transition: none !important; }
  .kwe-liste li { animation: none !important; }
  .kwe-erfolg-ikon svg circle, .kwe-erfolg-ikon svg polyline { animation: none !important; }
  /* Aufklappen bleibt — es erklaert den Zustandswechsel — nur ohne Weg. */
  .kwe-faq-panel { transition-duration: .01ms; }
  .kwe-balken-fuell { transition: none !important; }
}