/* =============================================================
   Das Wolkenhaus — modernes Flachdachhaus, frei drehbar
   Bauhaus-Villa zur blauen Stunde: helle Putzfassaden, warm
   leuchtende Fenster, auskragende Dach-/Bodenplatte mit LED-Linie,
   PV-Anlage auf dem Dach, Schwebe-Ring an der Unterseite.
   Geometrie: Wandkörper 92×60, Höhe 40u (y −20..+20);
   Dachplatte 102×70 (y −24..−20), Bodenplatte 102×70 (y +20..+25).
   ============================================================= */

@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
  src: url("assets/fonts/fraunces-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
  src: url("assets/fonts/fraunces-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("assets/fonts/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("assets/fonts/manrope-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Material & Marke */
  --plaster-a:  #F4EDDE;
  --plaster-b:  #E7DDC8;
  --frame:      #2E2822;      /* Fensterrahmen, dunkle Bauteile */
  --fascia-a:   #423A30;      /* Attika-Blende */
  --fascia-b:   #2A241E;
  --deck-a:     #E0D8C7;      /* Dachterrasse */
  --deck-b:     #CEC5B1;
  --soffit:     #211C16;

  --bronze:      #D99A6C;
  --bronze-deep: #B8754A;
  --teal:        #7FDCC7;

  --ink:        #2B241C;
  --ink-soft:   #4A4136;
  --ink-muted:  #7A7060;
  --light-1:    #F4EEE3;
  --light-2:    #C7BEB1;
  --light-3:    #8D8478;

  /* Dämmerungshimmel (Standard) */
  --sky-1: #0A0C16;
  --sky-2: #171B2E;
  --sky-3: #302A42;
  --sky-4: #4A3A42;
  --sky-5: #74503F;

  /* Tag */
  --day-1: #DCEAF3;
  --day-2: #EAF0EC;
  --day-3: #F3ECDD;

  --font-display: "Fraunces", "Times New Roman", Georgia, serif;
  --font-sans:    "Manrope", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --u: min(0.9vh, 1.32vw, 7.6px);
  /* Halbe Wandhöhe (in --u). Die GESAMTE Vertikale des Baukörpers (Wände, Dach-,
     Boden-, Attika-, Sockelplatten, PV, Geländer) ist hierüber verknüpft — eine
     einzige Zahl macht das Haus höher/niedriger, ohne dass sich Teile trennen.
     Auf dem Handy größer: die Fassaden-Inhalte sind im Hochformat sonst zu hoch
     für die 40u-Wand und würden abgeschnitten. */
  --wh: 20;
  --shade-col: #070810;
}
@media (max-width: 700px) {
  /* Baukörper 102u breit muss in die Viewport-Breite passen → --u klein halten.
     Wände höher (--wh), damit die Leistungen/Über-uns-Inhalte komplett auf die
     Fassade passen statt unten wegzuschneiden. */
  :root { --u: min(0.5vh, 1.15vw); --wh: 36; }
}
@media (max-width: 420px) {
  /* Schmaler + kleineres --u → Inhalt relativ höher → Wand nochmals höher.
     Knapp über den höchsten Fassaden-Inhalt (~72u) → alles sichtbar, ohne dass
     die Wand zum leeren Turm wird. Sehr kurze Displays fangen zur Not über den
     vertikalen Scroll der Fläche (pan-y) ab. */
  :root { --u: min(0.46vh, 1.12vw); --wh: 38; }
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; }
body {
  font-family: var(--font-sans);
  color: var(--light-1);
  background: var(--sky-1);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; }
img { display: block; }
[hidden] { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* =============================================================
   ATMOSPHÄRE
   ============================================================= */
.sky { position: fixed; inset: 0; z-index: -10; transition: opacity 1.4s ease; }
.sky-dusk {
  background:
    radial-gradient(120vmax 70vmax at 50% 118%, var(--sky-5) 0%, rgba(116,80,63,0) 58%),
    linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 38%, var(--sky-3) 66%, var(--sky-4) 100%);
}
.sky-day {
  opacity: 0;
  background: linear-gradient(180deg, var(--day-1) 0%, var(--day-2) 55%, var(--day-3) 100%);
}
body.day .sky-dusk { opacity: 0; }
body.day .sky-day { opacity: 1; }

.stars {
  position: fixed; inset: 0 0 22% 0; z-index: -9;
  background-image:
    radial-gradient(1.2px 1.2px at 12% 20%, rgba(244,238,227,.95) 50%, transparent 51%),
    radial-gradient(1px 1px at 74% 8%, rgba(244,238,227,.8) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 40% 34%, rgba(244,238,227,.9) 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 45%, rgba(244,238,227,.6) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 22% 55%, rgba(244,238,227,.75) 50%, transparent 51%),
    radial-gradient(1px 1px at 60% 62%, rgba(244,238,227,.55) 50%, transparent 51%),
    radial-gradient(1px 1px at 33% 10%, rgba(244,238,227,.7) 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 52% 18%, rgba(244,238,227,.85) 50%, transparent 51%),
    radial-gradient(1px 1px at 8% 42%, rgba(244,238,227,.6) 50%, transparent 51%),
    radial-gradient(1px 1px at 94% 24%, rgba(244,238,227,.7) 50%, transparent 51%);
  animation: twinkle 5s ease-in-out infinite alternate;
  transition: opacity 1.4s ease;
}
body.day .stars { opacity: 0; }
@keyframes twinkle { from { opacity: .55; } to { opacity: 1; } }

/* Mond (Nacht) — dezent oben rechts, weiches Leuchten */
.moon {
  position: fixed; top: 11vh; right: 13vw; z-index: -8;
  width: clamp(46px, 6vw, 74px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, #FBF4E2 0%, #ECE0C4 52%, #D6C7A2 100%);
  box-shadow: 0 0 4vw 1vw rgba(246,238,214,.22), inset -0.5vw -0.35vw 1vw rgba(120,108,84,.4);
  transition: opacity 1.4s ease, transform 1.4s ease;
}
.moon .crater {
  position: absolute; border-radius: 50%;
  background: rgba(150,136,104,.30); box-shadow: inset 1px 1px 2px rgba(110,98,74,.4);
}
.moon .crater.a { width: 22%; height: 22%; top: 22%; left: 30%; }
.moon .crater.b { width: 14%; height: 14%; top: 52%; left: 56%; }
.moon .crater.c { width: 10%; height: 10%; top: 62%; left: 26%; }
body.day .moon { opacity: 0; transform: translateY(-8px) scale(.92); }

/* Sonne (Tag) — gleiche Position, warmer Schein */
.sun {
  position: fixed; top: 11vh; right: 13vw; z-index: -8;
  width: clamp(52px, 6.6vw, 84px); aspect-ratio: 1; border-radius: 50%;
  opacity: 0; transform: scale(.92);
  transition: opacity 1.4s ease, transform 1.4s ease;
}
.sun .sun-core {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 50% 46%, #FFF6DA 0%, #FFE6A2 46%, #FFD277 78%, #FCC65F 100%);
  box-shadow: 0 0 6vw 2vw rgba(255,214,120,.35), 0 0 2vw 0.5vw rgba(255,224,150,.6);
}
body.day .sun { opacity: 1; transform: scale(1); }

/* langsam über den Himmel fliegende Sterne (Nacht) */
.flyers { position: fixed; inset: 0; z-index: -8; pointer-events: none; transition: opacity 1.4s ease; }
body.day .flyers { opacity: 0; }
.flyer {
  position: absolute; left: 0; opacity: 0;
  width: 2.5px; height: 2.5px; border-radius: 50%;
  background: #F8F0DE; box-shadow: 0 0 7px 1px rgba(248,240,222,.85);
  animation: fly linear infinite;
}
.flyer::after {
  content: ""; position: absolute; right: 100%; top: 50%;
  width: 34px; height: 1px; transform: translateY(-50%);
  background: linear-gradient(90deg, rgba(248,240,222,0), rgba(248,240,222,.55));
}
@keyframes fly {
  0%   { transform: translate(-8vw, 0);      opacity: 0; }
  8%   { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translate(112vw, 12vh);  opacity: 0; }
}

/* Vögel (nur Tag) — gemächlich gleitende Silhouetten */
.birds { position: fixed; inset: 0; z-index: -8; pointer-events: none; opacity: 0; transition: opacity 1.4s ease; }
body.day .birds { opacity: 1; }
.bird {
  position: absolute; left: 0;
  width: calc(26px * var(--s, 1)); height: calc(9px * var(--s, 1));
  opacity: .5;
  background: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 14'%3E%3Cpath d='M2 11 Q11 1 20 9 Q29 1 38 11' fill='none' stroke='%234A5568' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
  animation: birdfly linear infinite;
}
@keyframes birdfly {
  0%   { transform: translate(-12vw, 0); }
  50%  { transform: translate(50vw, -4vh); }
  100% { transform: translate(112vw, 3vh); }
}

.grain {
  position: fixed; inset: -60px; z-index: 55; pointer-events: none;
  opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body.day .grain { opacity: .035; }

.cloud-layer { position: fixed; inset: 0; z-index: -6; pointer-events: none; }
#clouds-far { z-index: -7; }
.cloud {
  position: absolute; left: 0; border-radius: 50%; filter: blur(1px);
  background: radial-gradient(closest-side, rgba(230,224,214,.45), rgba(230,224,214,0) 72%);
  animation: drift linear infinite;
  opacity: var(--cloud-op, .3);
  transition: opacity 1.4s ease;
}
/* Tag: pummeligere, weiße Schäfchenwolken (mehrere überlagerte Puffs), deutlicher sichtbar */
body.day .cloud {
  filter: blur(2px);
  opacity: calc(var(--cloud-op, .3) + .45);
  background:
    radial-gradient(closest-side at 30% 64%, rgba(255,255,255,.98), rgba(255,255,255,0) 70%),
    radial-gradient(closest-side at 54% 46%, rgba(255,255,255,1),  rgba(255,255,255,0) 72%),
    radial-gradient(closest-side at 74% 62%, rgba(255,255,255,.94), rgba(255,255,255,0) 70%);
}
@keyframes drift {
  from { transform: translateX(-38vw); }
  to   { transform: translateX(122vw); }
}

.particles { position: fixed; inset: 0; z-index: -5; pointer-events: none; }
.particle {
  position: absolute; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(217,154,108,.8), rgba(217,154,108,0) 70%);
  animation: floatup linear infinite;
  opacity: 0;
}
body.day .particle { background: radial-gradient(closest-side, rgba(184,117,74,.5), rgba(184,117,74,0) 70%); }
@keyframes floatup {
  0%   { transform: translate(0,0); opacity: 0; }
  8%   { opacity: var(--pop, .6); }
  92%  { opacity: var(--pop, .6); }
  100% { transform: translate(var(--dx, 3vw), -32vh); opacity: 0; }
}

/* =============================================================
   BÜHNE & 3D-GRUNDGERÜST
   ============================================================= */
.stage {
  position: fixed; inset: 0;
  perspective: calc(var(--u) * 360);
  perspective-origin: 50% 44%;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  z-index: 1;
}
.stage.dragging { cursor: grabbing; }

.halo {
  position: absolute; left: 50%; top: 68%;
  width: calc(var(--u)*130); height: calc(var(--u)*36);
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(127,220,199,.14), rgba(217,154,108,.1) 45%, rgba(217,154,108,0) 72%);
  filter: blur(6px);
  animation: haloPulse 7s ease-in-out infinite alternate;
  z-index: 0; pointer-events: none;
  transition: opacity 1.4s ease;
}
body.day .halo { opacity: .35; }
@keyframes haloPulse { from { opacity: .65; } to { opacity: 1; } }

.float {
  position: absolute; left: 50%; top: 50%;
  width: 0; height: 0;
  transform-style: preserve-3d;
  animation: bob 7.5s ease-in-out infinite alternate;
}
@keyframes bob {
  from { transform: translateY(calc(var(--u) * -1.3)); }
  to   { transform: translateY(calc(var(--u) *  1.3)); }
}
.house {
  position: relative; width: 0; height: 0;
  transform-style: preserve-3d;
  will-change: transform;
}

[data-shade]::after {
  content: ""; position: absolute; inset: 0;
  background: var(--shade-col);
  opacity: var(--shade, 0);
  pointer-events: none;
  z-index: 40;
}

/* Alle Flächen & Bauteile sitzen zentriert am Ursprung */
.wall, .s3d, .pv {
  position: absolute; left: 50%; top: 50%;
}
.wall { backface-visibility: hidden; }
.s3d { backface-visibility: hidden; }

/* =============================================================
   FASSADEN — heller Putz, Fensterrahmen dunkel
   ============================================================= */
.facade {
  height: calc(var(--u)*var(--wh)*2);
  margin-top: calc(var(--u)*var(--wh)*-1);
  transform: rotateY(calc(var(--az)*1deg)) translateZ(calc(var(--u)*var(--tz)));
  background:
    linear-gradient(180deg, var(--plaster-a) 0%, #EFE6D3 55%, var(--plaster-b) 100%);
  box-shadow: inset 0 0 0 1px rgba(70,58,44,.14);
}
.f-wide { width: calc(var(--u)*92); margin-left: calc(var(--u)*-46); }
.f-side { width: calc(var(--u)*60); margin-left: calc(var(--u)*-30); }
/* LED-Lichtlinie unter der Attika + Bodenschatten */
.facade::before {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,186,110,.34), rgba(255,186,110,0) 11%),
    linear-gradient(0deg, rgba(40,32,24,.22), rgba(40,32,24,0) 9%);
}
body.day .facade::before {
  background:
    linear-gradient(180deg, rgba(60,48,36,.14), rgba(60,48,36,0) 9%),
    linear-gradient(0deg, rgba(40,32,24,.16), rgba(40,32,24,0) 9%);
}

.face-body {
  position: absolute; inset: 0;
  padding: calc(var(--u)*3.2) calc(var(--u)*3.4) calc(var(--u)*3.4);
  display: flex; flex-direction: column; align-items: flex-start;
  overflow-y: auto; overflow-x: hidden;
  scrollbar-width: none;
  touch-action: pan-y;
  z-index: 10;
}
.face-body::-webkit-scrollbar { display: none; }
.face-hero { align-items: center; text-align: center; }

.eyebrow {
  font-size: max(calc(var(--u)*1.2), 8.5px);
  font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--bronze-deep);
  margin-bottom: calc(var(--u)*1.3);
}
.face-title {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: max(calc(var(--u)*2.9), 15px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: calc(var(--u)*1.6);
}
.face-text {
  font-size: max(calc(var(--u)*1.5), 9.5px);
  line-height: 1.5;
  color: var(--ink-soft);
  hyphens: auto;
  margin-bottom: calc(var(--u)*1.7);
}
.face-hint {
  font-size: max(calc(var(--u)*1.15), 8px);
  color: var(--ink-muted);
  margin-top: auto;
  align-self: center;
  letter-spacing: .03em;
}

/* ── Haustür-Zone (Fassade vorne) ── */
.has-entry .face-body { left: calc(var(--u)*28); }
.entry {
  position: absolute; top: 0; bottom: 0; left: 0;
  width: calc(var(--u)*28);
  background: linear-gradient(180deg, #3A332B, #262019);
  box-shadow: inset calc(var(--u)*-0.6) 0 calc(var(--u)*1.4) rgba(0,0,0,.35);
  z-index: 8;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding: calc(var(--u)*2.6) calc(var(--u)*1.6) calc(var(--u)*2.2);
  text-align: center;
}
.entry-head { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u)*0.7); }
.entry-eyebrow {
  font-size: max(calc(var(--u)*1.15), 7.5px);
  font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--bronze);
  text-shadow: 0 0 calc(var(--u)*1.3) rgba(217,154,108,.5);
}
.entry-lead {
  font-weight: 800;
  font-size: max(calc(var(--u)*1.7), 11px);
  line-height: 1.12; letter-spacing: -.01em;
  color: var(--light-1);
}
.door {
  position: relative;
  width: calc(var(--u)*13); height: calc(var(--u)*21);
  display: block; text-decoration: none; flex: 0 0 auto;
}
.door-side {
  position: absolute; top: 0; bottom: 0; right: calc(var(--u)*-2.4);
  width: calc(var(--u)*2);
  background: linear-gradient(180deg, rgba(255,214,150,.85), rgba(240,170,100,.75));
  box-shadow: 0 0 calc(var(--u)*2) rgba(255,190,110,.5);
  transition: background 1.2s ease, box-shadow 1.2s ease;
}
body.day .door-side {
  background: linear-gradient(160deg, #C9DCE8, #AFC7D6);
  box-shadow: none;
}
.door-leaf {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(90deg,
      #5C4630 0 calc(var(--u)*2.7), #4E3B29 calc(var(--u)*2.7) calc(var(--u)*3),
      #66502F calc(var(--u)*3) calc(var(--u)*5.7), #4E3B29 calc(var(--u)*5.7) calc(var(--u)*6));
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.5), inset 0 calc(var(--u)*0.4) calc(var(--u)*1.2) rgba(0,0,0,.35);
  transition: filter .3s ease;
}
.door-handle {
  position: absolute; right: calc(var(--u)*1.6); top: 50%;
  width: calc(var(--u)*0.7); height: calc(var(--u)*7);
  transform: translateY(-50%);
  border-radius: 999px;
  background: linear-gradient(180deg, #E8CD8C, #C9A050);
  box-shadow: 0 1px 3px rgba(0,0,0,.5);
}
.entry-foot { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u)*0.5); }
.entry-mail {
  font-size: max(calc(var(--u)*1.2), 8px);
  font-weight: 800; letter-spacing: .01em;
  color: var(--bronze);
  text-decoration: none; white-space: nowrap;
  padding: calc(var(--u)*0.55) calc(var(--u)*1.1);
  border-radius: 999px;
  background: rgba(217,154,108,.1);
  box-shadow: inset 0 0 0 1px rgba(217,154,108,.42);
  transition: background .25s, color .25s, box-shadow .25s;
}
.entry-mail:hover { background: var(--bronze-deep); color: var(--light-1); box-shadow: none; }
.entry-hint {
  font-size: max(calc(var(--u)*0.98), 6.5px);
  color: var(--light-3); letter-spacing: .03em;
}
.door-bell {
  position: absolute; left: calc(var(--u)*-3.4); top: 55%;
  width: calc(var(--u)*1.3); height: calc(var(--u)*1.3);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FFE9B8, #E2A85C 70%);
  box-shadow: 0 0 calc(var(--u)*1.6) rgba(255,200,120,.8);
  animation: bellpulse 3.4s ease-in-out infinite;
}
@keyframes bellpulse { 0%,100% { opacity: .75; } 50% { opacity: 1; } }
.door:hover .door-leaf, .door:focus-visible .door-leaf { filter: brightness(1.18); }
.door:focus-visible { outline: 2px solid var(--bronze); outline-offset: 3px; }

/* ── Vergleich (Fassade vorne) ── */
.vergleich {
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: calc(var(--u)*1.1); align-items: center; width: 100%;
}
.vgl-tag {
  font-size: max(calc(var(--u)*1.05), 7.5px);
  font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  margin-bottom: calc(var(--u)*0.8);
  color: var(--ink-muted);
}
.vgl-gain .vgl-tag { color: #3E7A63; }
.vergleich ul { list-style: none; }
.vergleich li {
  position: relative; padding-left: calc(var(--u)*1.7);
  font-size: max(calc(var(--u)*1.3), 8.5px);
  line-height: 1.36; color: var(--ink-soft);
  margin-bottom: calc(var(--u)*0.75);
  hyphens: auto;
}
.vergleich li:last-child { margin-bottom: 0; }
.vergleich li::before {
  content: ""; position: absolute; left: 0; top: .32em;
  width: calc(var(--u)*0.85); height: calc(var(--u)*0.85);
  border-radius: 50%;
}
.vgl-pain li::before { background: #B0A492; }
.vgl-gain li::before { background: #4E9B7E; box-shadow: 0 0 calc(var(--u)*0.9) rgba(78,155,126,.6); }
.vgl-gain {
  background: rgba(78,155,126,.08);
  border: 1px solid rgba(78,155,126,.3);
  border-radius: calc(var(--u)*0.7);
  padding: calc(var(--u)*1.1);
}
.vgl-pain { padding: calc(var(--u)*1.1); }
.vgl-arrow {
  width: calc(var(--u)*1.6); height: 1.5px;
  background: linear-gradient(90deg, var(--ink-muted), #4E9B7E);
  position: relative;
}
.vgl-arrow::after {
  content: ""; position: absolute; right: 0; top: 50%;
  width: calc(var(--u)*0.6); height: calc(var(--u)*0.6);
  border-right: 1.5px solid #4E9B7E; border-top: 1.5px solid #4E9B7E;
  transform: translate(20%,-50%) rotate(45deg);
}

/* ── Fenster mit sichtbarem Inhalt (Fassade rechts · Leistungen) ── */
.win-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: calc(var(--u)*1.4);
  width: 100%; margin-top: calc(var(--u)*0.2);
}
.win {
  position: relative; overflow: hidden;
  padding: calc(var(--u)*1.7) calc(var(--u)*1.2) calc(var(--u)*1.1);
  border: calc(var(--u)*0.5) solid var(--frame);
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(255,247,232,.95), rgba(247,235,213,.92));
  box-shadow: 0 0 calc(var(--u)*2.2) rgba(255,190,110,.28), inset 0 0 0 1px rgba(120,80,40,.14);
}
/* leuchtendes Oberlicht des Fensters */
.win-glass {
  position: absolute; top: 0; left: 0; right: 0;
  height: calc(var(--u)*1);
  background: linear-gradient(180deg, #FFD79A, #F1B36B);
  box-shadow: 0 0 calc(var(--u)*1.8) rgba(255,190,110,.6);
  border-bottom: 1px solid var(--frame);
  transition: background 1.2s ease, box-shadow 1.2s ease;
}
body.day .win-glass { background: linear-gradient(180deg, #CFE0EC, #AFC7D6); box-shadow: none; }
.win-head {
  display: block;
  font-size: max(calc(var(--u)*1.32), 9px);
  font-weight: 800; line-height: 1.15;
  color: var(--ink);
  margin-bottom: calc(var(--u)*0.7);
}
.win-head i {
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  color: var(--bronze-deep); margin-right: .3em;
}
.win-list { list-style: none; }
.win-list li {
  position: relative; padding-left: calc(var(--u)*1.35);
  font-size: max(calc(var(--u)*1.12), 7.5px);
  line-height: 1.3; color: var(--ink-soft);
  margin-bottom: calc(var(--u)*0.32);
  hyphens: auto; overflow-wrap: break-word;   /* lange Wörter (z. B. „Eigentümerversammlung") umbrechen statt am Fensterrand abschneiden */
}
.win-list li:last-child { margin-bottom: 0; }
.win-list li::before {
  content: ""; position: absolute; left: 0; top: .42em;
  width: calc(var(--u)*0.5); height: calc(var(--u)*0.5);
  border-radius: 50%; background: var(--bronze-deep);
}

/* ── Glas-Erker (Fassade hinten · Ablauf) ── */
.bays {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--u)*2.4);
  width: 100%;
}
.bay-win {
  display: flex; align-items: center; justify-content: center;
  height: calc(var(--u)*7.4);
  margin-bottom: calc(var(--u)*1);
  border: calc(var(--u)*0.6) solid var(--frame);
  border-radius: 2px;
  background: linear-gradient(160deg, #FFE0AC 0%, #EFB771 60%, #DE9A55 100%);
  box-shadow: 0 0 calc(var(--u)*2.2) rgba(255,190,110,.3);
  transition: background 1.2s ease, box-shadow 1.2s ease;
}
body.day .bay-win {
  background: linear-gradient(140deg, #C7DBE8 0%, #E9F1F5 45%, #AFC7D6 100%);
  box-shadow: inset 0 0 calc(var(--u)*1) rgba(40,60,80,.2);
}
.bay-win b {
  font-size: max(calc(var(--u)*2.4), 13px);
  font-weight: 800; letter-spacing: .04em;
  color: #6B4A28;
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
}
body.day .bay-win b { color: #3E5468; text-shadow: none; }
.bay h3 {
  font-weight: 800;
  font-size: max(calc(var(--u)*1.6), 10.5px);
  color: var(--ink);
  margin-bottom: calc(var(--u)*0.4);
}
.bay p {
  font-size: max(calc(var(--u)*1.28), 8.5px);
  line-height: 1.42; color: var(--ink-soft); hyphens: auto;
}

/* Hinweiszeile unter den Erkern (Einstiegspreis) */
.face-note {
  margin-top: calc(var(--u)*1.8);
  font-size: max(calc(var(--u)*1.28), 8.5px);
  line-height: 1.45; color: var(--ink-soft);
}
.face-note strong { color: var(--ink); font-weight: 800; }

/* Links in den Flächen → passende Stelle der klassischen Website */
.face-link {
  color: var(--bronze-deep); font-weight: 700; text-decoration: none;
  border-bottom: 1px solid rgba(184,117,74,.45);
  transition: border-color .25s;
}
.face-link:hover { border-bottom-color: var(--bronze-deep); }

/* ── Werte (Fassade links · Über uns) ── */
.werte-row {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--u)*1); width: 100%;
}
.wert {
  display: flex; flex-direction: column; gap: calc(var(--u)*0.4);
  align-items: flex-start; text-align: left;
  border-radius: calc(var(--u)*0.5);
  background: rgba(255,252,244,.5);
  box-shadow: inset 0 0 0 1px rgba(70,58,44,.2);
  padding: calc(var(--u)*1.1) calc(var(--u)*1);
}
.wert i {
  font-family: var(--font-display); font-style: italic;
  font-size: max(calc(var(--u)*1.05), 7px);
  color: var(--bronze-deep);
}
.wert span { font-weight: 800; font-size: max(calc(var(--u)*1.22), 8px); line-height: 1.2; color: var(--ink); }
.wert p {
  font-size: max(calc(var(--u)*1.08), 7.5px);
  line-height: 1.3; color: var(--ink-soft); hyphens: auto;
  margin-top: calc(var(--u)*0.25);
}
.promise-note {
  margin-top: calc(var(--u)*1.1); width: 100%;
  padding: calc(var(--u)*0.9) calc(var(--u)*1.2);
  border-left: calc(var(--u)*0.4) solid var(--bronze-deep);
  background: rgba(184,117,74,.06);
  border-radius: 0 calc(var(--u)*0.6) calc(var(--u)*0.6) 0;
  font-family: var(--font-display); font-style: italic;
  font-size: max(calc(var(--u)*1.35), 9px);
  line-height: 1.4; color: var(--ink);
}
.promise-note em { color: var(--bronze-deep); font-style: italic; }
.promise-sign {
  display: block; margin-top: calc(var(--u)*0.6);
  font-family: var(--font-sans); font-style: normal; font-weight: 800;
  font-size: max(calc(var(--u)*1.05), 7.5px);
  color: var(--ink-muted); letter-spacing: .02em;
}

/* =============================================================
   DACH · WILLKOMMEN — Terrasse + PV-Zone
   Element-Oberkante = Hausrückseite (dort steht die PV-Anlage),
   Element-Unterkante = Hausvorderseite (Terrasse mit Empfang).
   ============================================================= */
.roof {
  width: calc(var(--u)*102); height: calc(var(--u)*70);
  margin-left: calc(var(--u)*-51); margin-top: calc(var(--u)*-35);
  transform: translate3d(0, calc(var(--u)*(var(--wh) + 4)*-1), 0) rotateX(90deg);
  background:
    repeating-linear-gradient(90deg, rgba(90,75,58,.12) 0 1px, transparent 1px calc(var(--u)*17)),
    linear-gradient(180deg, var(--deck-b) 0%, var(--deck-a) 45%, #E6DECD 100%);
  box-shadow: inset 0 0 0 calc(var(--u)*0.8) #B9AE97, inset 0 0 calc(var(--u)*6) rgba(60,48,34,.18);
}
.pv-zone {
  position: absolute; top: 0; left: 0; right: 0;
  height: calc(var(--u)*28);
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.18) 0 1px, transparent 1px calc(var(--u)*19)),
    linear-gradient(180deg, #57503F, #6A6250);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.25);
}
.roof .face-body {
  top: calc(var(--u)*27); bottom: 0;
  padding: calc(var(--u)*2.6) calc(var(--u)*16) calc(var(--u)*4);
}
.mark {
  display: flex; align-items: center; justify-content: center;
  margin-bottom: calc(var(--u)*1.1);
  width: calc(var(--u)*5.4); height: calc(var(--u)*5.4);
  border-radius: 50%;
  background: rgba(255,252,244,.65);
  box-shadow: inset 0 0 0 1px rgba(184,117,74,.5), 0 calc(var(--u)*0.5) calc(var(--u)*1.4) rgba(60,45,30,.2);
}
.mark img { width: 60%; height: 60%; object-fit: contain; }
.hero-title {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: max(calc(var(--u)*4.3), 20px);
  line-height: 1.02; letter-spacing: -0.03em;
  color: var(--ink);
  margin-bottom: calc(var(--u)*1.2);
}
.hero-title em {
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  color: var(--bronze-deep); letter-spacing: -0.01em;
}
.face-hero .face-text { max-width: 52ch; }

.hero-actions {
  display: flex; flex-wrap: wrap; gap: calc(var(--u)*1); justify-content: center;
  margin-bottom: calc(var(--u)*1.5);
}
.btn {
  display: inline-flex; align-items: center; gap: .5em;
  background: var(--ink); color: var(--light-1);
  border-radius: 999px;
  padding: calc(var(--u)*1) calc(var(--u)*2.2);
  font-size: max(calc(var(--u)*1.4), 9px);
  font-weight: 800; letter-spacing: -.005em;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: 0 calc(var(--u)*0.5) calc(var(--u)*1.4) rgba(30,22,14,.3);
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), background .3s;
}
.btn:hover { background: var(--bronze-deep); transform: translateY(-2px); box-shadow: 0 0 calc(var(--u)*2.4) rgba(217,154,108,.5), 0 calc(var(--u)*0.7) calc(var(--u)*1.6) rgba(30,22,14,.3); }
.btn-ghost {
  background: rgba(255,252,244,.55);
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px rgba(43,36,28,.55);
}
.btn-ghost:hover { background: var(--ink); color: var(--light-1); box-shadow: none; }

.trust-row {
  display: flex; flex-wrap: wrap; gap: .8em; justify-content: center; align-items: center;
  font-size: max(calc(var(--u)*1.05), 7.5px);
  font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: auto;
}
.trust-row i { font-style: normal; color: var(--bronze-deep); }

/* =============================================================
   UNTERSEITE — leer (kein Abschnitt mehr; Kontakt sitzt an der Haustür)
   Schlichte, warm beschattete Sockelplatte mit sanftem Lichtschein,
   damit die Unterseite beim freien Drehen nicht tot-schwarz wirkt.
   ============================================================= */
.floor {
  width: calc(var(--u)*102); height: calc(var(--u)*70);
  margin-left: calc(var(--u)*-51); margin-top: calc(var(--u)*-35);
  transform: translate3d(0, calc(var(--u)*(var(--wh) + 5)), 0) rotateX(-90deg);
  background:
    radial-gradient(closest-side at 50% 50%, #26201A 0%, #191410 64%, #0E0B08 100%);
  box-shadow:
    inset 0 0 0 calc(var(--u)*0.9) #0A0806,
    inset 0 0 calc(var(--u)*12) rgba(0,0,0,.5);
}
/* warmer Lichtschein aus dem Haus, ruhig pulsierend */
.lev-glow {
  position: absolute; left: 50%; top: 50%;
  width: calc(var(--u)*70); height: calc(var(--u)*70);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(217,154,108,.26) 0%, rgba(217,154,108,0) 70%);
  pointer-events: none;
  animation: floorpulse 6.5s ease-in-out infinite;
}
body.day .lev-glow { background: radial-gradient(closest-side, rgba(120,150,170,.18) 0%, rgba(120,150,170,0) 70%); }
@keyframes floorpulse { 0%,100% { opacity: .5; } 50% { opacity: .85; } }

/* =============================================================
   BAUKÖRPER — Attika, Soffit, Bodenplatte, PV, Geländer, Vordach
   ============================================================= */
.fascia {
  width: calc(var(--u)*var(--fw)); height: calc(var(--u)*4);
  margin-left: calc(var(--u)*var(--fw)*-0.5);
  transform: rotateY(calc(var(--az)*1deg)) translateZ(calc(var(--u)*var(--tz)));
  background: linear-gradient(180deg, var(--fascia-a) 0%, var(--fascia-b) 100%);
}
.fascia-roof {
  margin-top: calc(var(--u)*(var(--wh) + 4)*-1);
  border-bottom: 1px solid rgba(255,190,120,.75);
  box-shadow: 0 calc(var(--u)*0.5) calc(var(--u)*1.8) rgba(255,180,100,.35);
}
body.day .fascia-roof { border-bottom-color: rgba(255,190,120,.25); box-shadow: none; }
.fascia-base {
  height: calc(var(--u)*5);
  margin-top: calc(var(--u)*var(--wh));
  background: linear-gradient(180deg, #373028 0%, #1E1913 100%);
  border-top: 1px solid rgba(0,0,0,.5);
}
.soffit {
  width: calc(var(--u)*102); height: calc(var(--u)*70);
  margin-left: calc(var(--u)*-51); margin-top: calc(var(--u)*-35);
  transform: translate3d(0, calc(var(--u)*var(--wh)*-1), 0) rotateX(-90deg);
  background: var(--soffit);
  box-shadow: inset 0 0 calc(var(--u)*7) rgba(255,180,100,.22);
}
body.day .soffit { box-shadow: inset 0 0 calc(var(--u)*7) rgba(255,180,100,.08); }
.base-top {
  width: calc(var(--u)*102); height: calc(var(--u)*70);
  margin-left: calc(var(--u)*-51); margin-top: calc(var(--u)*-35);
  transform: translate3d(0, calc(var(--u)*var(--wh)), 0) rotateX(90deg);
  background:
    repeating-linear-gradient(90deg, rgba(90,75,58,.14) 0 1px, transparent 1px calc(var(--u)*17)),
    linear-gradient(180deg, #D6CDBA, #C7BDA8);
  box-shadow: inset 0 0 0 calc(var(--u)*0.8) #A99E88;
}

/* Photovoltaik-Module */
.pv { transform-style: preserve-3d; transform: translate3d(calc(var(--u)*var(--px)), calc(var(--u)*(var(--wh) + 4)*-1), calc(var(--u)*var(--pz))); }
.pv i {
  position: absolute;
  width: calc(var(--u)*15); height: calc(var(--u)*10);
  left: calc(var(--u)*-7.5); top: calc(var(--u)*-10);
  transform-origin: bottom center;
  transform: rotateX(68deg);
  background:
    linear-gradient(115deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 30%),
    repeating-linear-gradient(90deg, transparent 0 calc(var(--u)*3.6), rgba(160,190,220,.16) calc(var(--u)*3.6) calc(var(--u)*3.75)),
    repeating-linear-gradient(0deg, transparent 0 calc(var(--u)*3.2), rgba(160,190,220,.16) calc(var(--u)*3.2) calc(var(--u)*3.35)),
    linear-gradient(160deg, #24304A 0%, #101726 70%, #0B101B 100%);
  border: calc(var(--u)*0.35) solid #3B342B;
  border-radius: 2px;
  backface-visibility: hidden;
}

/* Glasgeländer der Dachterrasse */
.rail {
  height: calc(var(--u)*3.6);
  margin-top: calc(var(--u)*(var(--wh) + 7.6)*-1);
  background: linear-gradient(180deg, rgba(235,244,248,.3), rgba(235,244,248,.12));
  border-top: 1.5px solid rgba(244,238,227,.8);
  backface-visibility: visible;
}
.rail-front {
  width: calc(var(--u)*64);
  margin-left: calc(var(--u)*-32);
  transform: translateZ(calc(var(--u)*33.5));
}
.rail-side {
  width: calc(var(--u)*16);
  margin-left: calc(var(--u)*-8);
}
.rail-side.rr { transform: rotateY(90deg) translateZ(calc(var(--u)*33.5)) translateX(calc(var(--u)*-25)); }
.rail-side.rl { transform: rotateY(270deg) translateZ(calc(var(--u)*33.5)) translateX(calc(var(--u)*25)); }

/* Vordach über der Haustür — zentriert über der Tür (Türmitte X −32u, Oberkante ≈ −10u) */
.canopy-top {
  width: calc(var(--u)*16); height: calc(var(--u)*6);
  margin-left: calc(var(--u)*-8); margin-top: calc(var(--u)*-3);
  transform: translate3d(calc(var(--u)*-32), calc(var(--u)*-11), calc(var(--u)*33)) rotateX(90deg);
  background: linear-gradient(180deg, #4A4136, #332C24);
  backface-visibility: visible;
}
.canopy-edge {
  width: calc(var(--u)*16); height: calc(var(--u)*1.3);
  margin-left: calc(var(--u)*-8); margin-top: calc(var(--u)*-0.65);
  transform: translate3d(calc(var(--u)*-32), calc(var(--u)*-11), calc(var(--u)*36.5));
  background: linear-gradient(180deg, var(--fascia-a), var(--fascia-b));
  border-bottom: 1px solid rgba(255,190,120,.7);
  box-shadow: 0 calc(var(--u)*0.4) calc(var(--u)*1.4) rgba(255,180,100,.35);
}
body.day .canopy-edge { border-bottom-color: rgba(255,190,120,.25); box-shadow: none; }

/* =============================================================
   UI-CHROM
   ============================================================= */
.ui-top {
  position: fixed; top: 0; left: 0; right: 0;
  padding: 18px 22px;
  display: flex; justify-content: space-between; align-items: center;
  z-index: 60; pointer-events: none;
}
.ui-top > * { pointer-events: auto; }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.brand-logo { width: 30px; height: 30px; object-fit: contain; filter: brightness(0) invert(1); opacity: .92; transition: filter .4s, opacity .4s; }
body.day .brand-logo { filter: none; opacity: 1; }
.brand-wordmark { display: flex; flex-direction: column; line-height: 1.15; }
.brand-wordmark .top { font-weight: 800; font-size: 14.5px; letter-spacing: -.01em; color: var(--light-1); }
.brand-wordmark .sub {
  font-size: 9px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--bronze);
}
body.day .brand-wordmark .top { color: var(--ink); }
body.day .brand-wordmark .sub { color: var(--bronze-deep); }

.ui-top-right { display: flex; align-items: center; gap: 14px; }
.counter {
  font-size: 11.5px; font-weight: 700; letter-spacing: .1em;
  font-variant-numeric: tabular-nums;
  color: var(--light-2);
}
body.day .counter { color: #6B6255; }

.mode-toggle {
  position: relative; width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(244,238,227,.06);
  box-shadow: inset 0 0 0 1px rgba(244,238,227,.2);
  backdrop-filter: blur(10px);
  transition: background .3s, box-shadow .3s;
}
.mode-toggle:hover { background: rgba(244,238,227,.12); }
body.day .mode-toggle { background: rgba(20,17,14,.04); box-shadow: inset 0 0 0 1px rgba(20,17,14,.16); }
body.day .mode-toggle:hover { background: rgba(20,17,14,.08); }
.icon-dusk, .icon-day {
  position: absolute; inset: 0; margin: auto; width: 14px; height: 14px;
  transition: opacity .5s ease, transform .5s var(--ease-spring);
}
.icon-dusk { border-radius: 50%; box-shadow: inset -3.5px 2px 0 0 var(--bronze); }
.icon-day { border-radius: 50%; background: var(--bronze-deep); opacity: 0; transform: scale(.5) rotate(-40deg); box-shadow: 0 0 0 2.5px rgba(184,117,74,.3); }
body.day .icon-dusk { opacity: 0; transform: scale(.5) rotate(40deg); }
body.day .icon-day { opacity: 1; transform: scale(1) rotate(0); }

.arrow {
  position: fixed; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(244,238,227,.05);
  box-shadow: inset 0 0 0 1px rgba(244,238,227,.16);
  backdrop-filter: blur(10px);
  font-size: 22px; line-height: 1; font-weight: 300;
  color: var(--light-1);
  z-index: 55;
  transition: background .25s, box-shadow .25s, transform .25s var(--ease-out);
  padding-bottom: 3px;
}
.arrow:hover { background: rgba(217,154,108,.14); box-shadow: inset 0 0 0 1px rgba(217,154,108,.5); transform: translateY(-50%) scale(1.06); }
.arrow-l { left: 24px; }
.arrow-r { right: 24px; }
body.day .arrow { background: rgba(20,17,14,.03); box-shadow: inset 0 0 0 1px rgba(20,17,14,.14); color: var(--ink); }
body.day .arrow:hover { background: rgba(184,117,74,.1); box-shadow: inset 0 0 0 1px rgba(184,117,74,.5); }

.facenav {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 2px;
  background: rgba(244,238,227,.05);
  box-shadow: inset 0 0 0 1px rgba(244,238,227,.14);
  border-radius: 999px; padding: 6px 10px;
  backdrop-filter: blur(14px);
  z-index: 60; max-width: calc(100vw - 32px);
}
.facenav button {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 11px; border-radius: 999px;
  font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--light-2); white-space: nowrap;
  transition: background .3s, color .3s;
}
.facenav button i {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--light-3);
  transition: background .3s, box-shadow .3s;
}
.facenav button.active { background: rgba(217,154,108,.16); color: var(--light-1); }
.facenav button.active i { background: var(--bronze); box-shadow: 0 0 5px rgba(217,154,108,.9); }
.facenav button:not(.active):hover { background: rgba(244,238,227,.06); }
/* Kontakt = Abschluss/CTA, optisch mit Trennlinie + Bronze-Punkt abgesetzt */
.facenav-kontakt { margin-left: 4px; padding-left: 14px; box-shadow: inset 1px 0 0 rgba(244,238,227,.14); }
.facenav-kontakt i { background: var(--bronze); box-shadow: 0 0 5px rgba(217,154,108,.7); }
body.day .facenav { background: rgba(20,17,14,.03); box-shadow: inset 0 0 0 1px rgba(20,17,14,.12); }
body.day .facenav button { color: #6B6255; }
body.day .facenav button.active { background: rgba(184,117,74,.12); color: var(--ink); }
body.day .facenav-kontakt { box-shadow: inset 1px 0 0 rgba(20,17,14,.12); }
body.day .facenav-kontakt i { background: var(--bronze-deep); }

.hint {
  position: fixed; bottom: 72px; left: 50%; transform: translateX(-50%);
  background: rgba(244,238,227,.06);
  box-shadow: inset 0 0 0 1px rgba(244,238,227,.14);
  border-radius: 999px; padding: 8px 18px;
  font-size: 11px; font-weight: 600;
  color: var(--light-2);
  backdrop-filter: blur(10px);
  z-index: 58;
  transition: opacity .8s ease, transform .8s var(--ease-out);
  white-space: nowrap;
}
.hint.gone { opacity: 0; transform: translateX(-50%) translateY(8px); pointer-events: none; }
.hint-touch { display: none; }
@media (hover: none) and (pointer: coarse) { .hint-desktop { display: none; } .hint-touch { display: inline; } }
body.day .hint { background: rgba(20,17,14,.03); box-shadow: inset 0 0 0 1px rgba(20,17,14,.1); color: #6B6255; }

.ui-bottom {
  position: fixed; bottom: 20px; left: 22px; right: 22px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; font-weight: 600;
  z-index: 56; pointer-events: none;
}
.ui-bottom a {
  pointer-events: auto; color: var(--light-3); text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .25s, border-color .25s;
}
.ui-bottom a:hover { color: var(--light-1); border-color: var(--light-3); }
.ui-bottom-legal { display: flex; gap: 14px; pointer-events: auto; }
body.day .ui-bottom a { color: #8A8073; }
body.day .ui-bottom a:hover { color: var(--ink); }
/* Weg zur klassischen Website: etwas präsenter als die Rechtslinks */
.ui-bottom a.more-link { color: var(--light-2); }
.ui-bottom a.more-link:hover { color: var(--light-1); }
body.day .ui-bottom a.more-link { color: var(--ink-soft); }
body.day .ui-bottom a.more-link:hover { color: var(--ink); }

.noscript-note {
  position: fixed; inset: auto 0 40% 0; z-index: 200;
  margin: 0 auto; width: fit-content;
  background: #262019; color: var(--light-1);
  box-shadow: inset 0 0 0 1px rgba(244,238,227,.2);
  padding: 18px 26px; border-radius: 10px; font-size: 14px;
}

/* =============================================================
   DETAILKARTE (Modal)
   ============================================================= */
.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; }
.modal-back {
  position: absolute; inset: 0;
  background: rgba(5,6,11,.6);
  backdrop-filter: blur(6px);
  animation: fadein .3s ease;
}
body.day .modal-back { background: rgba(20,20,24,.35); }
.sheet {
  position: relative;
  width: min(440px, calc(100vw - 40px));
  max-height: min(560px, calc(100vh - 80px));
  overflow-y: auto;
  background: linear-gradient(180deg, #FFFDF8, #F4EDDD);
  color: var(--ink);
  border-radius: 18px;
  padding: 38px 34px 30px;
  box-shadow: 0 30px 80px rgba(0,0,0,.5), inset 0 0 0 1px rgba(184,117,74,.25);
  animation: sheetpop .4s var(--ease-spring);
}
.modal-x {
  position: absolute; top: 14px; right: 16px;
  font-size: 24px; color: #8A8073;
  transition: color .2s, transform .2s;
}
.modal-x:hover { color: var(--ink); transform: rotate(90deg); }
.sheet-eyebrow {
  font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--bronze-deep); margin-bottom: 10px;
}
.sheet h3 {
  font-weight: 800; font-size: 22px; line-height: 1.15;
  margin-bottom: 14px;
}
.sheet p { font-size: 14px; line-height: 1.6; color: var(--ink-soft); hyphens: auto; }
.sheet ul { list-style: none; margin-top: 14px; }
.sheet li {
  position: relative; padding-left: 18px;
  font-size: 13.5px; line-height: 1.5; color: var(--ink-soft);
  margin-bottom: 8px;
}
.sheet li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--bronze-deep);
}
.sheet-quote p {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: 18px; line-height: 1.5; color: var(--ink);
}
.sheet-quote em { color: var(--bronze-deep); }
.sheet-sign { margin-top: 18px; font-size: 13px; color: var(--ink-muted); }
.sheet-sign strong { font-size: 15px; color: var(--ink); font-weight: 800; }
@keyframes sheetpop { from { transform: scale(.92) translateY(14px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

/* =============================================================
   INTRO & BEWEGUNGSREDUZIERUNG
   ============================================================= */
html.preload .stage, html.preload .facenav, html.preload .hint,
html.preload .ui-top, html.preload .ui-bottom, html.preload .arrow { opacity: 0; }
.stage, .facenav, .hint, .ui-top, .ui-bottom, .arrow { transition: opacity 1s ease .1s; }

@media (max-width: 700px) {
  .arrow { display: none; }
  .facenav { bottom: 46px; padding: 5px 8px; }
  .facenav button { padding: 6px 8px; }
  .facenav button span { display: none; }
  .facenav button.active span { display: inline; }
  .hint { bottom: 96px; font-size: 10.5px; }
  .ui-bottom { bottom: 14px; font-size: 10px; }
  .brand-wordmark .top { font-size: 13px; }
  .ui-top { padding: 14px 16px; }
  .counter { display: none; }
  .roof .face-body { padding: calc(var(--u)*1.8) calc(var(--u)*6) calc(var(--u)*2.4); }
  /* Startseite/Dach (N°0): Die Dachfläche ist fix (an den Baukörper gebunden) — auf
     niedrigen Handy-Viewports (Safari-Leisten → kleines --u) rutschte die Trust-Zeile
     sonst unter die Dachkante. Hero daher kompakter: Logo-Kreis (schon im Kopf) aus,
     Abstände enger, Titel etwas kleiner. */
  .face-hero .mark { display: none; }
  .face-hero .eyebrow { margin-bottom: calc(var(--u)*0.7); }
  .hero-title { margin-bottom: calc(var(--u)*0.7); font-size: max(calc(var(--u)*3.8), 18px); }
  .face-hero .face-text { margin-bottom: calc(var(--u)*0.9); }
  .hero-actions { margin-bottom: calc(var(--u)*0.9); }
  /* Trust-Zeile einzeilig halten (engere Laufweite) — sonst kostet der Umbruch
     auf schmalen Dächern eine ganze Zeile und die untere rutscht über die Kante. */
  .trust-row { letter-spacing: .03em; gap: .5em; font-size: max(calc(var(--u)*1.0), 7px); }
  /* Fassaden-Inhalt vertikal mittig in der (bewusst etwas höheren) Wand — so wirkt
     keine Fassade unten leer. "safe" fällt bei Überlauf automatisch auf oben-bündig
     zurück, damit der Anfang nicht abgeschnitten und über pan-y scrollbar bleibt. */
  .facade .face-body { justify-content: safe center; }
  /* Kontakt-Nische auf Handy etwas kompakter, damit nichts überläuft */
  .entry { padding-top: calc(var(--u)*2); padding-bottom: calc(var(--u)*1.6); }
  .door { height: calc(var(--u)*18); }
  /* Breite Fassaden (N°1 Vergleich, N°3 Ablauf): mehrspaltige Inhalte auf schmalen
     Displays untereinander statt nebeneinander — sonst läuft die zweite Spalte
     seitlich aus dem Bild. Die Fläche wird dafür höher und scrollt vertikal (pan-y). */
  .vergleich { grid-template-columns: 1fr; gap: calc(var(--u)*1.2); }
  .vgl-arrow { display: none; }
  .bays { grid-template-columns: 1fr; gap: calc(var(--u)*1.4); }
  .bay-win { height: calc(var(--u)*5.4); }
}

@media (prefers-reduced-motion: reduce) {
  .float, .cloud, .particle, .stars, .halo,
  .lev-glow, .door-bell { animation: none !important; }
  .particle { opacity: 0; }
  .stage, .facenav, .hint, .ui-top, .ui-bottom, .arrow { transition: none; }
}