@import url("./fonts.css");

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:#0B0C0E;color:#F4F1EC;font-family:Manrope,system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:#7BA7CE;text-decoration:none}
a:hover{color:#F4F1EC}
h1,h2,h3,h4{font-family:Archivo,system-ui,-apple-system,"Segoe UI",sans-serif;margin:0;letter-spacing:-0.03em;text-wrap:balance}
p{text-wrap:pretty}
::selection{background:#3E5C76;color:#fff}
input,textarea,button,select{font-family:inherit}
img{max-width:100%}

@keyframes dd-marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@keyframes dd-scrollhint{0%{transform:translateY(-6px);opacity:0}40%{opacity:1}100%{transform:translateY(12px);opacity:0}}

/* ⚠ Hier stand `.dd-photo` -- die grauen Kaesten mit der Aufschrift
   "Projektfoto: ...". Seit dem 16. August 2026 tragen alle drei
   Referenzen echte Fotos, die Regel ist ersatzlos entfallen.

   Der Rumpf des Abschnitts ist damit platzhalterfrei; wer hier wieder
   einen Kasten braucht, findet die Regel in der Historie. */

/* Hover-Zustände (im Original als style-hover-Attribute) */
.hv1:hover{background:#7BA7CE}
.hv2:hover{background:#7BA7CE; transform:translateY(-2px)}
.hv3:hover{border-color:rgba(244,241,236,0.4); background:rgba(244,241,236,0.04)}
.hv4:hover{background:#7BA7CE}
.hv5:hover{background:#7BA7CE}
.hv6:hover{border-color:rgba(123,167,206,0.45)}
.hv7:hover{border-color:rgba(123,167,206,0.45)}
.hv8:hover{border-color:rgba(123,167,206,0.45)}
.hv9:hover{border-color:rgba(123,167,206,0.45)}
.hv10:hover{border-color:rgba(123,167,206,0.6)}
.hv11:hover{background:rgba(62,92,118,0.18); border-color:rgba(123,167,206,0.5)}
.hv12:hover{background:#7BA7CE}

@media (max-width:1080px){
  #dd-hero{grid-template-columns:1fr!important;padding:120px 24px 64px!important}
  #dd-konfigurator>div>div:last-child{grid-template-columns:1fr!important}
  #dd-konfigurator>div>div:last-child>div:first-child{position:static!important}
  #dd-ablauf>div{grid-template-columns:1fr!important;gap:40px!important}
  #dd-ablauf>div>div:first-child{position:static!important}
  #dd-leistungen>div>div:last-child,#dd-referenzen>div>div{grid-template-columns:1fr!important}
  #dd-leistungen>div>div:last-child>div:first-child{grid-column:auto!important}
  #dd-kontakt>div:last-child{grid-template-columns:1fr!important;gap:40px!important}
  section{padding-left:24px!important;padding-right:24px!important}
  #dd-nav{padding:14px 20px!important}
  #dd-nav nav a:not(:last-child){display:none}
}
/* ===== SOLVIQ-NACHTRAG (15. August 2026) ============================
   Nicht Teil des Exports aus Claude Design. Bei einem neuen Export gehen
   diese Regeln verloren und muessen wieder hinein.

   Zwei Befunde von Stefans iPhone, beide nachgemessen bei 393 x 852.
   ==================================================================== */
@media (max-width:640px){
  /*
   * 0) Der leere Bildraum des Heros faellt weg.
   *
   * Er ist die zweite Spalte des Hero-Rasters und enthaelt nichts -- auf
   * dem Desktop haelt er rechts die Flaeche frei, auf der das
   * Hintergrundfoto liegt. Einspaltig steht er unter den Kennzahlen und
   * bringt dort 420 px + 24 px Abstand mit, ohne etwas zu zeigen: Der
   * Verlauf darueber deckt links mit 94 % ab, sichtbar ist also fast
   * schwarz. Genau das wurde als "extrem viel Leerraum" gemeldet.
   *
   * ⚠ Das Foto verschwindet dadurch NICHT. Es liegt als `inset: 0` hinter
   * dem ganzen Abschnitt, nicht in dieser Spalte.
   */
  #dd-hero-bildraum{display:none}

  /* ⚠ Dazu mehr Polster unten. Ohne den leeren Bildraum endet der
     Hero-Inhalt jetzt dort, wo vorher Leerraum war -- und genau dort liegt
     die Solviq-Leiste (64 px, fest am unteren Rand). Die Beschriftungen
     der Kennzahlen liefen dadurch darunter. 112 px sind die Leiste plus
     Luft. */
  #dd-hero{padding-bottom:112px!important}

  /*
   * 1) Die Buehne war zu hoch fuer ihren Inhalt.
   *
   * Der Kamera-Fit (fitCamera in main.js) rechnet
   *     need = max(x1-x0, y1-y0) / (2 * FILL)
   * -- er passt also die GROESSERE der beiden Ausdehnungen ein. Ein Haus
   * ist breit, und bei einem hochformatigen Canvas ist damit immer die
   * Breite die kritische Achse: Sie bestimmt den Zoom, und was in der
   * Hoehe uebrig bleibt, ist Leerraum.
   *
   * Gemessen bei 393 px: Canvas 343 x 528, das Modell darin rund 302 x 151
   * px. Also gut 70 % der Hoehe ungenutzt -- so gemeldet ("extrem viel
   * Leerraum").
   *
   * ⚠ Die gerenderte HOEHE des Hauses haengt nicht an der Canvas-Hoehe.
   * Solange die Breite die kritische Achse ist, bestimmt sie den Zoom, und
   * die Hoehe folgt im festen Verhaeltnis. Ein flacherer Kasten macht das
   * Haus also NICHT kleiner -- er nimmt nur die Luft weg. Deshalb ist die
   * Hoehe hier der richtige Hebel und nicht der Zoom.
   *
   * 370 px statt 560: Das Modell fuellt damit rund 47 % statt 29 % der
   * Hoehe.
   *
   * ⚠ Nicht weiter kuerzen. Bei 330 px lag der Chip "Naturrot" (zweite
   * Zeile, bis 82 px) auf der Dachflaeche -- gemessen 17 px Ueberlappung.
   * Die Chips brauchen oben rund 82 px und der Hinweis unten rund 34; was
   * dazwischen bleibt, gehoert dem Haus.
   */
  #dd-conf-buehne{height:min(44vh,370px)!important}

  /*
   * 2) Der Richtpreis stand ausserhalb der Karte.
   *
   * Die drei Kennzahlen lagen in einem Flex ohne Umbruch, mit 30 px
   * Abstand und `white-space:nowrap` an jedem Wert. Gemessen brauchte das
   * 400,6 px bei 299 px Platz; der dritte Block endete 101,6 px hinter der
   * Kante und wurde vom `overflow:hidden` der Karte abgeschnitten -- man
   * las "17.000-2".
   *
   * ⚠ Der Umbruch ist die eigentliche Absicherung, nicht die kleinere
   * Schrift. Der Richtpreis waechst mit der Dachflaeche; eine Zeile, die
   * heute knapp passt, passt bei einem groesseren Dach wieder nicht. Mit
   * `wrap` rutscht der dritte Block dann in eine zweite Zeile, statt
   * abgeschnitten zu werden.
   */
  #dd-conf-werte{flex-wrap:wrap; width:100%; justify-content:space-between; gap:8px 12px!important}
  #dd-conf-werte>div>div:first-child{font-size:9px!important; letter-spacing:0.08em!important}
  #dd-conf-werte>div>div:last-child{font-size:16px!important}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ⚠ SOLVIQ-NACHTRAG (16. August 2026): Fotos in den fuenf Leistungskarten.

   Die Karten hatten nie einen Bildplatz -- ihr Leerraum entstand aus
   `justify-content:space-between` bei fester Mindesthoehe und mass
   gemessen 106 bis 148 px, also 33 bis 46 % der Kartenhoehe. Gemeldet
   wurde er als "da fehlen noch 5 Bilder"; genau das steht jetzt drin.

   ⚠ Damit kippen die Karten von hell auf dunkel. Ein abgedunkeltes Foto
   traegt keinen dunklen Text -- Titel, Fliesstext und Nummern sind
   deshalb auf die hellen Toene der dunklen Sections umgestellt, das
   Label-Blau von #2F5A80 auf #7BA7CE. Wer das Foto entfernt, muss die
   Farben mit zurueckdrehen. */
.sq-fotokarte{position:relative; overflow:hidden}

/* ⚠ Der Filter gehoert aufs BILD, nicht auf die Karte. Das Reveal-Skript
   schreibt `opacity` und `transform` auf die Karte -- ein `filter` dort
   waere zusaetzlich eine Compositing-Ebene ueber dem Text. */
.sq-foto{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:blur(1.8px) saturate(.9) contrast(1.06) brightness(.92);
  transform:scale(1.06); opacity:.88}

/* ⚠ `scale(1.06)` ist kein Zoom aus Geschmack: Ein blur() zieht an den
   Kanten Transparenz ins Bild, die Skalierung schiebt diesen weichen Saum
   aus der sichtbaren Flaeche. Dieselben Werte wie am Hero-Foto. */

/* Der Schleier tragt die Lesbarkeit. Oben und unten dichter, weil dort
   Nummer und Titel stehen; in der Mitte darf das Foto durch. Die Werte
   sind an gerenderten Pixeln nachgemessen, nicht geschaetzt -- ein
   blur() laesst sich aus den Deklarationen nicht herleiten. */
.sq-schleier{position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,
    rgba(11,13,16,.84) 0%,
    rgba(11,13,16,.60) 34%,
    rgba(11,13,16,.74) 62%,
    rgba(11,13,16,.93) 100%)}

/* ⚠ Der obere Wert (.84) ist nachgemessen und kein runder Griff: Bei .78
   kam das Label "01 · Kernleistung" auf nur 3,44:1 -- unter ihm liegt der
   helle Himmel des Sanierungsfotos, und 12 px fett verlangen 4,5:1.
   Wer ihn senkt, muss die Labels der Karten 01 und 05 neu messen; das
   sind die beiden mit den hellsten Bildstellen unter der Zeile. */

/* Der Inhalt muss ueber die beiden absoluten Ebenen. ⚠ Ohne das liegt er
   darunter: Positionierte Elemente werden ueber nicht positioniertem
   Inhalt gezeichnet, unabhaengig von der Reihenfolge im Markup. Genau so
   war im Studio-Statement der Hauptseite die Wortmarke einmal
   unsichtbar. */
.sq-fotokarte>:not(.sq-foto):not(.sq-schleier){position:relative; z-index:1}

/* ⚠ Das `overflow:hidden` oben schneidet still ab, was nicht passt -- es
   gibt dann KEINEN Dokumentueberlauf, den ein Pruefskript melden koennte.
   Gemessen bei 320 px lief "Neueindeckung" im 32-px-Titel der breiten
   Karte 35 px ueber die Textspalte und endete mitten im Wort. Dieselbe
   Falle wie bei den Anlass-Kacheln der Catering-Studie.

   ⚠ `!important` ist hier kein Stilbruch, sondern der einzige Weg: Die
   Studie traegt ihre Schriftgroessen inline, und ein Stylesheet schlaegt
   einen Inline-Stil nur so. */
@media (max-width:359px){
  .sq-fotokarte h3{font-size:24px!important}
}
/* Netz fuer jedes kuenftige lange Wort -- greift erst, wenn die Zeile
   sonst reissen wuerde, und kostet sonst nichts. */
.sq-fotokarte h3,.sq-fotokarte p{overflow-wrap:break-word; hyphens:auto}