/* Startseite: Hero mit Verweil-Kacheln, Vorteile, Systeme, Einsatz,
   Qualitaet, Projekte, Dekore, FAQ, Abschluss. Bis 08.09.2026 stand das
   inline im Kopf von index.html (28 KB); als Datei ist es cachebar. */

/* ---------- Hero ----------
   Vier Bodensysteme nebeneinander. Der Scroll bleibt nativ, die frühere
   Scroll-Choreografie ist raus. Am Rechner geht eine Kachel auf, sobald der
   Zeiger drei Sekunden darauf steht.
   Der Trick dahinter: jedes Panel traegt sein Foto über die ganze
   Kachelreihe, sichtbar ist davon nur ein Fenster. Waechst das Fenster,
   waechst nicht das Bild, sondern der gezeigte Ausschnitt. Man sieht mehr,
   statt naeher heranzugehen. */

/* Grundzustand bis 1023 px: Kacheln im normalen Fluss, aber dieselbe tiefe
   Buehne wie am Rechner. */
.hero-stage{position:relative;background:var(--stage);color:var(--on-dark)}
/* Lesbarkeitsverlauf hinter dem durchsichtigen Kopf. Sonst ertrinken die
   Wortmarke und der Knopf auf der tiefen Flaeche nicht, wohl aber auf einem
   hellen Foto, das bis unter die Leiste reicht. */
.hero-stage::before{content:"";position:absolute;inset:0 0 auto 0;height:150px;
  z-index:5;pointer-events:none;
  background:linear-gradient(to bottom,oklch(var(--flor) / .5),oklch(var(--flor) / 0))}
.hero-intro{padding-top:calc(var(--header-h) + var(--s5));position:relative;z-index:6;
  color:var(--on-dark)}
.hero-intro h1{text-shadow:0 1px 3px var(--scrim),0 2px 24px var(--scrim)}
/* Die Ueberschrift traegt den Hero, deshalb Display-Stufe und volle
   Shell-Breite. Ein enger ch-Deckel haette sie unnoetig umbrechen lassen. */
.hero-intro h1{font-size:var(--text-display);
  line-height:var(--text-display--line-height);max-width:none;
  text-wrap:balance;letter-spacing:-.01em}
.panel-row{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap);
  max-width:var(--shell);margin-inline:auto;
  padding:var(--s6) var(--gutter) var(--s8)}
.panel{position:relative;height:clamp(340px,52vh,520px);
  border-radius:var(--radius);overflow:hidden}
.panel .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:filter var(--dur-slow) var(--ease-out)}
/* Bildausschnitte. Der zweite Wert schiebt den sichtbaren Bereich senkrecht,
   damit im schmalen Kachelfenster die Bodenflaeche traegt. Die Farben bleiben
   als Grund stehen, bis das Bild geladen ist. */
.panel[data-b="puzzle"] .ph{background:var(--ph-puzzle);object-position:50% 64%}
.panel[data-b="klick"] .ph{background:var(--ph-klick);object-position:50% 50%}
.panel[data-b="design-klick"] .ph{background:var(--ph-design-klick);object-position:50% 56%}
/* Bei Design Puzzle sitzt das Fenster tief. Im oberen Bilddrittel stehen
   die Spielgeraete, weiter oben faengt das Fenster mehr Geraet als Boden.
   Bei 85 Prozent traegt die Musterflaeche. */
.panel[data-b="design-puzzle"] .ph{background:var(--ph-design-puzzle);object-position:50% 85%}
.panel .veil{position:absolute;inset:0;background:var(--veil);
  transition:opacity var(--dur-fast) var(--ease-out)}
/* Lesbarkeitsverlauf unter der Beschriftung. Bleibt auch beim Hover stehen,
   sonst wird der Text auf hellen Bildern unlesbar. */
.panel::after{content:"";position:absolute;inset:auto 0 0 0;height:44%;z-index:5;
  pointer-events:none;
  background:linear-gradient(to top,oklch(var(--flor) / .84),oklch(var(--flor) / 0))}
/* Ohne eigene Stapelstufe, damit die Beschriftung mit ihrem Knopf darueber
   liegt. Der Knopf braucht den Zeiger fuer seinen eigenen Hover-Zustand,
   der Rest der Kachel geht an die Klickflaeche. */
.panel .hotspot{position:absolute;inset:0;display:block;cursor:pointer}
.panel:hover .veil,.panel:focus-within .veil{opacity:0}

.panel-label{position:absolute;z-index:6;pointer-events:none;
  left:24px;right:24px;bottom:20px;
  display:flex;flex-direction:column;align-items:flex-start;
  color:var(--on-dark);text-align:left}
.pl-name{font-family:var(--f-display);font-weight:400;letter-spacing:.01em;
  font-size:var(--text-h2);line-height:1.14;
  text-shadow:0 1px 14px var(--scrim)}
.pl-sub{display:block;margin-top:var(--s2);font-size:var(--text-small);
  line-height:var(--text-small--line-height);font-weight:500;color:var(--on-dark-2);
  max-width:38ch;text-shadow:0 1px 12px var(--scrim)}
.panel-label .btn-mehr{display:none}

@media (min-width:1024px){
  .hero-stage{display:flex;flex-direction:column;
    min-height:clamp(720px,100vh,1160px);overflow:hidden}
  .hero-intro{pointer-events:none;
    padding-top:calc(var(--header-h) + var(--s6));padding-bottom:var(--s6)}

  /* Die Kachelreihe ist die Bezugsflaeche fuer alle Fenster. Sie liegt genau
     im Inhaltskasten der Shell, damit die Kacheln unter der Ueberschrift
     fluchten. */
  .panel-row{display:block;position:relative;flex:1;min-height:0;
    width:calc(100% - 2 * var(--gutter));
    max-width:calc(var(--shell) - 2 * var(--gutter));
    margin:0 auto var(--s5);padding:0}

  /* Bewusste Abweichung von der Regel "nur transform und opacity animieren":
     der Formatwechsel geht ohne Bildverzerrung nur ueber clip-path. Das ist
     paint-only, es entsteht kein Layout-Thrashing.
     --f0 und --f1 sind die linke und rechte Kante des Fensters als Anteil der
     Reihenbreite, --gl und --gr die halbe Luecke zu den Nachbarn, --unten der
     Abstand zur Unterkante der Reihe. */
  .panel{position:absolute;inset:0;height:auto;border-radius:0;overflow:visible;
    --f0:0;--f1:.25;--gl:8px;--gr:8px;--unten:3%;
    clip-path:inset(0 calc((1 - var(--f1)) * 100% + var(--gr))
                    var(--unten) calc(var(--f0) * 100% + var(--gl))
                    round var(--radius));
    transition:clip-path var(--dur-slow) var(--ease-out)}
  .panel:nth-child(1){--gl:0px}
  .panel:nth-child(2){--f0:.25;--f1:.5}
  .panel:nth-child(3){--f0:.5;--f1:.75}
  .panel:nth-child(4){--f0:.75;--f1:1;--gr:0px}
  /* Design Puzzle traegt sein Foto nur ueber den rechten Teil der Reihe.
     Das Fenster dieser Kachel liegt in jedem Zustand zwischen 54 und 100
     Prozent, ein Kasten ab 54 Prozent deckt es also in jedem Zustand ab.
     Das Foto wird dadurch rund 1.7 mal kleiner abgebildet: statt eines
     Ausschnitts aus anderthalb Platten steht die Musterflaeche in der
     Kachel. Der Kasten ist breiter als hoch, das Bild deckt ihn ueber die
     Hoehe genau ab, senkrecht traegt object-position deshalb nichts mehr. */
  .panel[data-b="design-puzzle"] .ph{left:54%;width:46%;object-position:50% 50%}
  /* Der Verlauf sitzt an der Unterkante des Fensters, nicht der Reihe,
     sonst laege sein dunkelstes Stueck ausserhalb des Sichtbaren.
     In der aufgegangenen Kachel ist der Beschriftungsblock hoeher,
     weil Name, Beschreibung und Knopf uebereinander stehen. Gerechnet
     sind das rund 50 Prozent der Fensterhoehe, der Verlauf deckt sie
     mit 60 Prozent sicher ab. */
  /* Der Verlauf muss die Beschriftung tatsaechlich tragen. Auf dem hellsten
     Foto, dem Terrazzo von Design Puzzle, liegt die Bildhelligkeit bei 194
     von 255. Ein gleichmaessiger Verlauf mit 84 Prozent an der Unterkante
     kommt in der Zone der Unterzeile nur auf rund 62 Prozent Deckung, das
     ergibt 2.3:1 und ist nicht lesbar. Die Stufen unten sind deshalb so
     gelegt, dass in der Zone der Unterzeile mindestens 84 und in der Zone
     des Namens mindestens 56 Prozent stehen. Damit kommt die Unterzeile auf
     ueber 4.5:1 und der Name auf ueber 3:1. */
  .panel::after{inset:auto 0 var(--unten) 0;height:42%;
    background:linear-gradient(to top,
      oklch(var(--flor) / .86) 0%,
      oklch(var(--flor) / .80) 26%,
      oklch(var(--flor) / .50) 56%,
      oklch(var(--flor) / 0) 100%);
    /* Die Unterkante muss mitfahren, nicht nur die Hoehe. Sie haengt an
       --unten, und benannte Eigenschaften springen, wenn sie nicht in der
       Ueberblendung stehen. Beim Zurueckfahren stand der Verlauf dadurch
       schon 18.5 px hoeher als das Bildfenster, und in diesem Streifen
       blitzte das helle Foto durch. Gleiche Dauer und gleiche Kurve wie
       beim clip-path des Panels, sonst laufen beide auseinander. */
    transition:height var(--dur-slow) var(--ease-out),
               bottom var(--dur-slow) var(--ease-out)}
  .panel.ist-gross::after{height:56%}
  /* Volles Weiss statt der gedaempften Zweitstufe. Auf hellen Boeden ist
     das der Unterschied zwischen 2.3:1 und ueber 4.5:1. */
  .pl-sub{color:var(--on-dark)}

  /* Die vier aufgegangenen Zustaende. Die grosse Kachel nimmt 46 Prozent der
     Reihe, die drei Nachbarn je 18, und nur die grosse waechst nach unten. */
  .panel-row[data-gross="0"] .panel:nth-child(1){--f0:0;--f1:.46;--unten:0%}
  .panel-row[data-gross="0"] .panel:nth-child(2){--f0:.46;--f1:.64}
  .panel-row[data-gross="0"] .panel:nth-child(3){--f0:.64;--f1:.82}
  .panel-row[data-gross="0"] .panel:nth-child(4){--f0:.82;--f1:1}

  .panel-row[data-gross="1"] .panel:nth-child(1){--f0:0;--f1:.18}
  .panel-row[data-gross="1"] .panel:nth-child(2){--f0:.18;--f1:.64;--unten:0%}
  .panel-row[data-gross="1"] .panel:nth-child(3){--f0:.64;--f1:.82}
  .panel-row[data-gross="1"] .panel:nth-child(4){--f0:.82;--f1:1}

  .panel-row[data-gross="2"] .panel:nth-child(1){--f0:0;--f1:.18}
  .panel-row[data-gross="2"] .panel:nth-child(2){--f0:.18;--f1:.36}
  .panel-row[data-gross="2"] .panel:nth-child(3){--f0:.36;--f1:.82;--unten:0%}
  .panel-row[data-gross="2"] .panel:nth-child(4){--f0:.82;--f1:1}

  .panel-row[data-gross="3"] .panel:nth-child(1){--f0:0;--f1:.18}
  .panel-row[data-gross="3"] .panel:nth-child(2){--f0:.18;--f1:.36}
  .panel-row[data-gross="3"] .panel:nth-child(3){--f0:.36;--f1:.54}
  .panel-row[data-gross="3"] .panel:nth-child(4){--f0:.54;--f1:1;--unten:0%}

  /* Die Klickflaeche deckt genau das sichtbare Fenster. clip-path allein
     wuerde zwar schon richtig treffen, aber der Fokusring haenge dann am
     Rand der ganzen Reihe und wuerde weggeschnitten. Deshalb faehrt der
     Kasten mit, und der Ring liegt innen. */
  .panel .hotspot{inset:0 calc((1 - var(--f1)) * 100% + var(--gr))
                  var(--unten) calc(var(--f0) * 100% + var(--gl));
    border-radius:var(--radius);
    transition:inset var(--dur-slow) var(--ease-out)}
  .panel .hotspot:focus-visible{outline-offset:-5px}

  /* Waehrend der Wartezeit vor dem Aufgehen fuellt sich ein Strich an der
     Unterkante des Fensters. Ohne ihn passierte eine Sekunde lang sichtbar
     nichts, das las sich als kaputt (Handoff 26.08.). Das Skript legt den
     Strich an und setzt .wartet beim Hineinfahren; die Dauer kommt aus der
     Variable --verweil, die das Skript mit VERWEILDAUER fuellt. */
  .panel .takt{position:absolute;z-index:7;pointer-events:none;height:3px;
    left:calc(var(--f0) * 100% + var(--gl));
    right:calc((1 - var(--f1)) * 100% + var(--gr));
    bottom:var(--unten);
    background:var(--accent);transform-origin:left;transform:scaleX(0)}
  .panel.wartet .takt{transform:scaleX(1);
    transition:transform var(--verweil,1s) linear}
  .panel.ist-gross .takt{opacity:0;transition:opacity var(--dur-fast) var(--ease-out)}

  /* Die Beschriftung haengt an der linken unteren Ecke des Fensters und
     faehrt mit. Sie steht ausserhalb des Textflusses, der Formatwechsel
     kostet deshalb kein Umbrechen der Seite. */
  .panel-label{left:calc(var(--f0) * 100% + var(--gl) + var(--s5));right:auto;
    bottom:calc(var(--unten) + var(--s4));
    max-width:calc((var(--f1) - var(--f0)) * 100%
                   - var(--gl) - var(--gr) - 2 * var(--s5));
    transition:left var(--dur-slow) var(--ease-out),
               bottom var(--dur-slow) var(--ease-out),
               max-width var(--dur-slow) var(--ease-out)}
  /* Feste Hoehe ueber zwei Zeilen. Sonst saesse der Name je nach Laenge des
     Systemnamens auf anderer Hoehe und die vier Kacheln fluchten nicht. */
  .pl-name{display:flex;align-items:flex-end;height:2.28em;
    font-size:var(--text-h3);
    transition:font-size var(--dur-slow) var(--ease-out)}
  /* --sub-h setzt das Skript aus der laengsten der vier Unterzeilen bei der
     aktuellen Spaltenbreite. Fester Wert nur als Rueckfall ohne Skript.
     Vorher standen hier feste Zeilenzahlen je Breitenband, die bei 1440 px
     eine Zeile zu viel reservierten. Genau dieser Leerraum drueckte die
     Beschriftung nach oben. */
  .pl-sub{height:var(--sub-h,4.65em);overflow:hidden;
    transition:font-size var(--dur-slow) var(--ease-out),
               height var(--dur-slow) var(--ease-out),
               opacity var(--dur-base) var(--ease-out)}
  /* Im Ruhezustand faellt der Knopf in sich zusammen, sonst reservierte er
     unter der Beschreibung 76 px und drueckte den ganzen Block nach oben.
     Geregelt ueber height, nicht ueber max-height: min-height sticht
     max-height aus, und weil .btn ein min-height von 52 px mitbringt, stand
     der Knopf trotz laufender max-height-Ueberblendung schon bei 0 ms auf
     voller Hoehe. Die Beschriftung sprang dadurch nach oben, waehrend die
     Kachel noch klein war, und genau das war das Flackern an der
     Unterkante. min-height bleibt deshalb in beiden Zustaenden auf 0.
     visibility faellt weg, ein Kasten ohne Hoehe mit overflow:hidden und
     ohne Zeigerereignisse ist ohnehin weder sicht- noch klickbar. */
  .panel-label .btn-mehr{display:inline-flex;margin-top:0;
    height:0;min-height:0;overflow:hidden;
    color:var(--on-dark);background:transparent;
    box-shadow:inset 0 0 0 1px var(--on-dark);--btn-fill:var(--on-dark);
    opacity:0;pointer-events:none;
    transition:opacity var(--dur-base) var(--ease-out),
               height var(--dur-slow) var(--ease-out),
               margin-top var(--dur-slow) var(--ease-out)}
  .panel-label .btn-mehr:hover,.panel-label .btn-mehr:focus-visible{color:var(--ink)}

  /* Die aufgegangene Kachel traegt den Namen gross, die Beschreibung in
     Lesegroesse und den Knopf. */
  .panel.ist-gross .pl-name{font-size:var(--text-h2)}
  /* In der breiten Kachel braucht die Beschreibung nur zwei Zeilen. Die
     Hoehe faehrt mit, sonst spraenge der Knopf beim Aufgehen nach oben. */
  .panel.ist-gross .pl-sub{font-size:var(--text-body);height:var(--sub-gross-h,3.2em)}
  .panel.ist-gross .btn-mehr{margin-top:var(--s5);height:52px;
    opacity:1;pointer-events:auto}

  /* Scroll-Hinweis im rechten Seitenrand. Die Buehne fuellt fast das ganze
     Fenster, ohne Zeichen bliebe unklar, dass darunter weitergeht. Der Pfeil
     kommt von oben und geht nach unten, die Bewegung zeigt also die Richtung,
     in die es geht. Er verschwindet, sobald der Besucher losgescrollt ist. */
  .hero-hinweis{position:absolute;z-index:7;pointer-events:none;
    right:calc((var(--gutter) - 30px) / 2);bottom:22%;
    color:var(--on-dark-2);opacity:.85;
    transition:opacity var(--dur-base) var(--ease-out)}
  .hero-hinweis svg{display:block;animation:tupf 2.6s ease-in-out infinite}
  .hero.ist-gescrollt .hero-hinweis{opacity:0}
  @keyframes tupf{0%,100%{transform:translateY(-5px)}50%{transform:translateY(5px)}}

  /* Waehrend der Messung liegen alle Ueberblendungen still, sonst
     zeichnete der kurz hergestellte Zustand sichtbar mit. */
  .panel-row.misst,.panel-row.misst *,.panel-row.misst *::after{transition:none !important}

  /* Die drei schmalen Nachbarn treten zurueck: kleinerer Name, keine
     Beschreibung, gedaempftes Bild. */
  .panel-row[data-gross] .panel:not(.ist-gross) .pl-name{font-size:var(--text-lead)}
  .panel-row[data-gross] .panel:not(.ist-gross) .pl-sub{opacity:0}
  .panel-row[data-gross] .panel:not(.ist-gross) .ph{filter:brightness(.7)}
}


/* ---------- Sektionen ---------- */
/* Sprungziel ist der Inhalt, nicht die Polsterkante. Ohne das haelt ein
   Anker aus der Kopfleiste am oberen Rand des Sektionspolsters, und die
   Ueberschrift steht dann fast das ganze Polster tiefer, gemessen 147 px
   unter der Leiste. Mit dem negativen Rand kommt sie auf rund 48 px
   heran. Das Polster selbst bleibt unveraendert, es geht allein um die
   Stelle, an der der Sprung haelt. */
.sec{padding-block:var(--pad-section);
  scroll-margin-top:calc(var(--s5) - var(--pad-section))}
.sec-hell{background:var(--surface)}
/* Tiefe Sektion. Statt jede Komponente einzeln umzufaerben, werden hier die
   semantischen Tokens neu belegt: Karten, Tabellen, Linien und Zweittexte
   ziehen automatisch nach. */
.sec-tief{background:var(--tief);color:var(--on-dark);
  --ink:var(--on-dark);--ink-2:var(--on-dark-2);--line:var(--line-tief);
  --surface:var(--tief-2);--rahmen:var(--on-dark-2);--accent-strong:var(--accent)}

/* ---------- Vorteile ---------- */
/* Erst der Text, dann der Ablauf. Die Ueberschrift mit ihrer Einleitung
   steht links, die Merkmale rechts daneben, darunter laufen die vier
   Schritte ueber die volle Breite. Vier Bilder in einer Zeile lesen sich
   als Folge; ein Raster aus zwei mal zwei bricht sie und nimmt genau das
   weg, worum es hier geht. */
.vt-kopf{display:grid;grid-template-columns:6fr 5fr;gap:var(--s8);align-items:start}
/* balance haelt alle Zeilen gleich kurz, hier soll die Zeile aber
   auslaufen. wrap ist der gueltige Wert dafuer, normal waere ungueltig. */
.vt-text h2{max-width:none;text-wrap:wrap}
.vt-liste{display:grid;gap:var(--s4)}
.vt-punkt{display:grid;grid-template-columns:13ch 1fr;gap:var(--s3) var(--s5);
  align-items:baseline;padding-top:var(--s3);border-top:1px solid var(--line)}
/* Die Striche trennen die Merkmale voneinander. Ueber dem ersten trennt er
   nichts und wirkt als Deko, deshalb faellt er weg. */
.vt-punkt:first-child{padding-top:0;border-top:0}
.vt-punkt dt{font-family:var(--f-body);font-weight:700;font-size:var(--text-body);
  line-height:1.3}
.vt-punkt dd{color:var(--ink-2);max-width:38ch;font-size:var(--text-small);line-height:var(--text-small--line-height)}

/* Der Ablauf in vier Schritten. Bilder aus den Originalen der Kundin,
   nicht aus ihrer fertigen Montage: so bleiben Schrift und Abstaende die
   der Seite, die Reihe faellt bei schmalen Fenstern sauber um, und neue
   Fotos sind ein Dateitausch statt einer neuen Grafik. */
.ablauf{list-style:none;margin-top:var(--s6);display:grid;
  grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.ab-schritt{display:flex;flex-direction:column}
.ab-bild{border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3;
  background:var(--foto-grund)}
.ab-bild img{width:100%;height:100%;object-fit:cover;display:block;
  transform-origin:center;
  transition:transform var(--dur-slow) var(--ease-out)}
.ab-schritt:hover .ab-bild img{transform:scale(1.04)}
.ab-titel{margin-top:var(--s4);font-family:var(--f-body);font-weight:700;
  font-size:var(--text-body);line-height:1.35;
  display:flex;align-items:baseline;gap:var(--s2)}
/* Ziffer in der Akzentfarbe, ohne Kreis. Die Reihenfolge traegt ohnehin
   die Anordnung, die Ziffer ist nur die Lesehilfe. */
.ab-nr{font-family:var(--f-display);font-weight:400;font-size:var(--text-lead);
  line-height:1;color:var(--accent-strong)}
.ab-text{margin-top:var(--s1);color:var(--ink-2);font-size:var(--text-small);
  line-height:var(--text-small--line-height)}
.ab-fuss{margin-top:var(--s5)}

/* ---------- Systeme im Vergleich ---------- */
.sys-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s6) var(--s5)}
.sys-karte{display:flex;flex-direction:column;gap:var(--s3)}
/* Rahmen mit overflow:hidden, sonst liefe das herangefahrene Bild ueber
   seine Kanten hinaus. Gleiche Bewegung wie im Dekorraster. */
.sys-rahmen{border-radius:var(--radius);border:1px solid var(--line);
  overflow:hidden;background:var(--surface)}
.sys-bild{aspect-ratio:4/3;width:100%;height:auto;object-fit:cover;display:block;
  transform-origin:center;
  transition:transform var(--dur-slow) var(--ease-out)}
.sys-rahmen:hover .sys-bild{transform:scale(1.04)}
.sys-karte h3{margin-top:var(--s2)}
/* 500 statt 400. Der Kontrast liegt hier ueber 7:1, es fehlte nur
   Strichstaerke: heller Text in 400 auf tiefem Grund traegt bei 15 px
   zu wenig. Gleiches gilt fuer die Beschriftungen der Merkmalzeilen. */
.sys-karte>p{color:var(--ink-2);font-weight:500;font-size:var(--text-small);
  line-height:var(--text-small--line-height)}
.sys-daten{margin-top:auto;padding-top:var(--s4);display:grid;gap:var(--s1)}
.sys-daten div{display:flex;justify-content:space-between;gap:var(--s3);
  font-size:var(--text-small);padding-block:var(--s2);border-top:1px solid var(--line)}
/* Dieselbe Sorte Inhalt wie die Zeilenbeschriftungen der Tabelle, kurze
   Etiketten zum Ueberfliegen, deshalb auch dieselbe Stufe 700. Der
   Fliesstext der Karte bleibt bei 500, dort waere 700 zu laut. */
.sys-daten dt{color:var(--ink-2);font-weight:700}
.sys-daten dd{font-weight:500;text-align:right}
.sys-karte .btn{align-self:flex-start;margin-top:var(--s4)}

/* Vergleichstabelle. Waagerecht scrollbar, sobald die Spalten nicht
   mehr in die Breite passen, statt die Schrift zu verkleinern. */
.tab-huelle{margin-top:var(--s8);overflow-x:auto}
.tab-hinweis{display:none;margin-top:var(--s6);margin-bottom:calc(-1 * var(--s6))}
/* 760 statt 680: bei 680 blieben je Systemspalte nur 88 px innen,
   "Design Puzzle" braucht 91 px und brach deshalb ein drittes Mal um. */
.vergleich{width:100%;min-width:760px;border-collapse:collapse}
.vergleich th,.vergleich td{text-align:left;padding:var(--s4) var(--s4);
  border-bottom:1px solid var(--line);font-size:var(--text-small)}
.vergleich thead th{font-family:var(--f-display);font-weight:400;
  font-size:var(--text-h3);line-height:1.15;vertical-align:bottom;
  border-bottom:1px solid var(--ink)}
/* Die Zeilenbeschriftungen sind die schwaechste Stelle der Tabelle:
   gedaempfte Farbe, kleine Groesse, tiefer Grund. Deshalb 700. */
.vergleich tbody th{font-weight:700;color:var(--ink-2);width:24%}
.vergleich td{font-weight:500}
.vergleich .ja{color:var(--accent-strong);font-size:var(--text-body)}
.vergleich .nein{color:var(--rahmen)}
.vergleich tbody tr:hover{background:var(--surface)}

/* ---------- Einsatzbereiche ---------- */
/* Zehn Kacheln (seit 10.09.) in fuenf Spalten, zwei volle Reihen ohne
   Rest. Unter 1280 px zwei Spalten mit flacherem Format, sonst wuerde jede
   Kachel unter 220 px breit oder die fuenf Reihen zu hoch. */
.ein-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--gap)}
.ein-kachel{position:relative;border-radius:var(--radius);overflow:hidden;
  aspect-ratio:4/3;display:block}
.ein-kachel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform var(--dur-slow) var(--ease-out)}
.ein-kachel::after{content:"";position:absolute;inset:auto 0 0 0;height:62%;
  background:linear-gradient(to top,oklch(var(--flor) / .78),oklch(var(--flor) / 0))}
.ein-kachel h3{position:absolute;left:var(--s5);right:var(--s5);bottom:var(--s5);
  z-index:2;color:var(--on-dark);font-size:var(--text-h3);
  text-shadow:0 1px 12px var(--scrim)}
.ein-kachel:hover img{transform:scale(1.05)}

/* ---------- Projekte, Anriss ---------- */
.pro-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.pro-karte{display:flex;flex-direction:column;gap:var(--s3)}
.pro-karte img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  border-radius:var(--radius);background:var(--surface);display:block}
.pro-karte .branche{font-size:var(--text-meta);letter-spacing:.04em;
  font-weight:500;color:var(--accent-strong);margin-top:var(--s2)}
.pro-karte h3{font-family:var(--f-body);font-weight:700;font-size:var(--text-body);
  line-height:1.35}
.pro-karte p{color:var(--ink-2);max-width:34ch;font-size:var(--text-small);
  line-height:var(--text-small--line-height)}
/* Gleiches Weiss wie die Knoepfe auf den Dekorkacheln, damit die beiden
   Abschnitte dieselbe Knopf-Handschrift haben. */
.pro-mehr{margin-top:var(--s7)}
.pro-mehr .btn{background:var(--foto-grund)}

/* ---------- Qualitaet ---------- */
/* auto-fit statt drei fester Spalten, damit das Raster ohne weitere
   Aenderung stimmt, egal wie viele Punkte belegt sind. Die Betriebsklasse
   ist am 26.08.2026 herausgenommen worden, weil fuer 23-33-42 keine Quelle
   auffindbar war. Kommt sie belegt zurueck, reicht die Karte im Markup. */
.qua-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:var(--s7) var(--s6)}
.qua-punkt{padding-top:var(--s4);border-top:1px solid var(--line)}
.qua-zahl{font-family:var(--f-display);font-weight:400;font-size:var(--text-h2);
  line-height:1.05;display:block}
.qua-punkt h3{font-family:var(--f-body);font-weight:700;font-size:var(--text-body);
  line-height:1.35;margin-top:var(--s3)}
.qua-punkt p{margin-top:var(--s2);color:var(--ink-2);max-width:34ch;font-size:var(--text-small);
  line-height:var(--text-small--line-height)}

/* ---------- Produkte ---------- */
.prod-layout{display:grid;grid-template-columns:minmax(220px,1fr) 3fr;gap:var(--s8);align-items:start}
.filters{position:sticky;top:calc(var(--header-h) + var(--s5));display:flex;flex-direction:column;gap:var(--s4)}
.filters h3{margin-bottom:var(--s2)}
.filters h3 + label{margin-top:calc(-1 * var(--s2))}
.filter-gruppe + .filter-gruppe{margin-top:var(--s5)}
.filters label{display:flex;align-items:center;gap:var(--s3);min-height:44px;cursor:pointer;
  font-weight:500}
.filters input[type="checkbox"]{appearance:none;width:20px;height:20px;flex:none;
  border:2px solid var(--ink-2);border-radius:var(--radius-s);cursor:pointer;
  display:grid;place-content:center;background:var(--surface)}
.filters input[type="checkbox"]::after{content:"";width:10px;height:10px;border-radius:1px;
  background:transparent;transition:background-color var(--dur-fast) var(--ease-out)}
.filters input[type="checkbox"]:checked{border-color:var(--accent-strong)}
.filters input[type="checkbox"]:checked::after{background:var(--accent-strong)}
.link-btn{background:none;border:0;padding:12px 0;min-height:44px;cursor:pointer;
  font-family:var(--f-body);font-size:var(--text-small);font-weight:500;color:var(--ink-2);
  text-decoration:underline;text-underline-offset:3px;text-align:left}
.link-btn:hover{color:var(--ink)}
.prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s7) var(--s6)}
.prod-card{display:flex;flex-direction:column;gap:var(--s2)}
.swatch{aspect-ratio:4/3;border-radius:var(--radius);border:1px solid var(--line);
  position:relative;overflow:hidden;background:var(--foto-grund)}
/* Sanftes Heranfahren beim Ueberfahren. Bewusst nur Skalierung, keine
   Helligkeit und kein Schatten: der Besucher soll das Dekor beurteilen,
   nicht die Animation. */
.swatch img{width:100%;height:100%;object-fit:cover;display:block;
  transform-origin:center;
  transition:transform var(--dur-slow) var(--ease-out)}
.swatch:hover img{transform:scale(1.04)}
.prod-card h3{margin-top:var(--s2);font-family:var(--f-body);font-weight:700;
  font-size:var(--text-body);line-height:1.35}
.prod-card .system{font-size:var(--text-meta);letter-spacing:.04em;
  font-weight:500;color:var(--accent-strong)}
.prod-card .dims{color:var(--ink-2);font-size:var(--text-small)}
/* Knopf im selben Weiss wie der Fotogrund darueber, dadurch lesen
   Kachel und Knopf als ein Block. */
.prod-card .btn{align-self:flex-start;margin-top:var(--s2);
  background:var(--foto-grund)}
.prod-card[hidden]{display:none}
.prod-leer{margin-top:var(--s5);color:var(--ink-2)}

/* ---------- Abschluss ---------- */
.abschluss-band{padding-block:var(--pad-section);background:var(--stage);color:var(--on-dark)}
.abschluss-band h2{max-width:20ch}
.abschluss-band p{margin-top:var(--s4);max-width:44ch;color:var(--on-dark-2)}
.abschluss-band .aktionen{margin-top:var(--s6);display:flex;align-items:center;
  gap:var(--s5);flex-wrap:wrap}
.abschluss-band .textlink{color:var(--on-dark)}
.abschluss-band .textlink:hover{color:var(--accent)}

/* ---------- Responsiv ---------- */
@media (max-width:1279px){
  .sys-grid{grid-template-columns:repeat(2,1fr);gap:var(--s7) var(--s6)}
  .prod-grid{grid-template-columns:repeat(2,1fr)}
  .pro-grid{grid-template-columns:repeat(3,1fr);gap:var(--s5)}
}
@media (max-width:1023px){
  .prod-layout{grid-template-columns:1fr;gap:var(--s6)}
  .filters{position:static;flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s5)}
  .filters h3{width:100%;margin:0}
  .filter-gruppe{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s5);width:100%}
  .filter-gruppe + .filter-gruppe{margin-top:var(--s3)}
  html{scroll-snap-type:none}
  .vt-kopf{grid-template-columns:1fr;gap:var(--s6)}
  .vt-text h2{max-width:26ch;text-wrap:balance}
  .ablauf{grid-template-columns:repeat(2,1fr);margin-top:var(--s6)}
}
/* Fuenf schmale Kacheln bis 1599 px: Titel eine Stufe kleiner, damit
   "Gastronomie und Innenbereiche" in zwei Zeilen bleibt. */
@media (min-width:1280px) and (max-width:1599px){
  .ein-kachel h3{font-size:var(--text-lead);line-height:var(--text-lead--line-height);
    left:var(--s4);right:var(--s4);bottom:var(--s4)}
}
@media (max-width:1279px){
  .ein-grid{grid-template-columns:repeat(2,1fr)}
  .ein-kachel{aspect-ratio:16/10}
}
@media (max-width:640px){
  .vt-punkt{grid-template-columns:1fr;gap:var(--s2)}
  .vt-punkt dt{max-width:none}
  .ablauf{grid-template-columns:1fr}
}
@media (max-width:760px){
  .panel-row{grid-template-columns:1fr}
  /* 34vh statt 46vh: vier Kacheln untereinander schoben das erste Argument
     sonst auf 1.850 px, also zweieinhalb Bildschirme (Review 08.09.). */
  .panel{height:34vh}
  /* In der flacheren Kachel liegt der Name hoeher im Foto. Auf den zwei
     hellen Boeden (Design Klick, Design Puzzle) blieb der Kontrast bei
     3,5 bis 3,8, deshalb hier ein hoeherer und dichterer Verlauf. */
  .panel::after{height:62%;
    background:linear-gradient(to top,oklch(var(--flor) / .9) 0%,
      oklch(var(--flor) / .78) 40%,oklch(var(--flor) / 0) 100%)}
  /* Zwei Spalten statt einer: einspaltig war der Dekorkatalog auf dem
     Handy 10.000 px hoch. Der Knopf wird dort zum Textlink, sonst passt
     er nicht in 150 px Kartenbreite. */
  .prod-grid{grid-template-columns:repeat(2,1fr);gap:var(--s5) var(--s4)}
  .prod-card .btn{min-height:44px;padding:0;background:none;box-shadow:none;
    text-decoration:underline;text-underline-offset:4px;font-weight:500}
  .prod-card .btn::before{display:none}
  .prod-card .btn:hover{color:var(--accent-strong)}
  /* Die Vergleichstabelle ist breiter als das Fenster: ein Verlauf am
     rechten Rand zeigt, dass es weitergeht, der Hinweis sagt es. */
  .tab-huelle{position:relative}
  .tab-huelle::after{content:"";position:absolute;top:0;right:0;bottom:0;width:40px;
    pointer-events:none;background:linear-gradient(to right,transparent,var(--tief))}
  .tab-hinweis{display:block}
  .sys-grid{grid-template-columns:1fr}
  .ein-grid{grid-template-columns:1fr;gap:var(--s4)}
  .ein-kachel{aspect-ratio:16/9}
  .qua-grid{grid-template-columns:1fr;gap:var(--s5)}
  .pro-grid{grid-template-columns:1fr}

  /* Auf dem Handy stehen die Sektionen untereinander statt bildschirmweise,
     deshalb knappere Polster als am Rechner, aber nicht gedraengt. */
  .sec{--pad-section:var(--s8)}
  .hero-intro{padding-top:calc(var(--header-h) + var(--s5));padding-bottom:0}
  .panel-row{padding:var(--s5) var(--gutter) var(--s6);gap:var(--s4)}
  .sec-head{margin-bottom:var(--s6)}
  /* Bildlegende dicht ans Bild, damit Bild und Text als ein Block lesen */
  .vt-kopf{gap:var(--s5)}
  .ablauf{gap:var(--s4)}
  .tab-huelle{margin-top:var(--s6)}

  /* Der Marker am Uebergang vom Hero zu den Vorteilen faellt weg. Er stand
     dort, weil auf dem Handy zwei helle Flaechen aneinanderstiessen. Die
     Buehne ist jetzt auch hier tief, die Grenze traegt also die Farbe. */
}
/* Unter 1024 px stehen die Kacheln untereinander, dort ist ohnehin klar,
   dass es weitergeht. */
@media (max-width:1023px){
  .hero-hinweis{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero-hinweis svg{animation:none}
  /* Der Formatwechsel bleibt erreichbar, er springt nur statt zu fahren. */
  .panel,.panel-label,.pl-name,.pl-sub,.panel .ph,.panel .veil,
  .panel-label .btn-mehr{transition:none}
  .ein-kachel img{transition:none}
  .swatch img{transition:none}
  .swatch:hover img{transform:none}
  .sys-bild{transition:none}
  .sys-rahmen:hover .sys-bild{transform:none}
}