/* =========================================================================== LCW Haustechnik - Sachverstaendigenbereich =========================================================================== Wird NACH lcw.css geladen und greift ausschliesslich unter . lcw.css bleibt unangetastet - die 13 Produktionsseiten koennen sich dadurch nicht veraendern. GESTALTUNGSENTSCHEIDUNG (Umbau 16.08.2026) --------------------------------------------------------------------------- Erste Fassung: jeder Abschnitt in einem eigenen Container - Glaskasten, deckender Kasten, heller Kasten, gestricheltes Bild, Hinweisbox, dazwischen Abschnitte ohne Rahmen. Sieben Oberflaechen auf zwoelf Abschnitten. Das Ergebnis wirkte zusammengesetzt, weil Container dekorativ statt nach Bedeutung eingesetzt waren. Jetzt: EIN Dokument. Eine Spalte, eine linke Achse, Kapitel getrennt durch eine Haarlinie und eine laufende Nummer. Die Nummernreihe 01-09 haelt die Seite von oben bis unten zusammen. Genau ZWEI Flaechen bleiben - beide, weil sie funktional kein Kapitel sind: .sv-grenzen--hell der helle Einschub "Was nicht geleistet wird" .sv-abschluss der Handlungsblock am Ende Jede weitere Ausnahme macht daraus wieder einen Flickenteppich. Der Unterschied zur Verkaufsseite entsteht damit nicht mehr durch andere Kacheln, sondern dadurch, dass es ueberhaupt keine gibt: Die Verkaufsseite lebt von Kacheln, ein Gutachten lebt von Gliederung. Alle Werte aus lcw.css abgeleitet. Kein neuer Farbwert erfunden. =========================================================================== */ body.sv{ /* --- Flaechen --------------------------------------------------------- */ --sv-bg-primary: var(--canvas); --sv-bg-dark: var(--canvas-deep); --sv-surface: #ffffff10; /* --- Schrift ------------------------------------------------------------ Heller als der Bestand (16.08.2026, Nutzerwunsch): Die Seite traegt deutlich mehr Fliesstext als die Verkaufsseiten, dort ermuedet --ink-2 (#a9b3cc, 9,4:1). Beide Stufen sind aus dem Bestand in Richtung --ink aufgehellt: muted #bfc8dc ~11,7:1 (Fliesstext) faint #8b96b0 ~6,7:1 (Nebeninformation; vorher 4,6:1) */ --sv-text-primary: var(--ink); --sv-text-muted: #bfc8dc; --sv-text-faint: #8b96b0; /* --- Linien: eine Stufe feiner als im Bestand -------------------------- */ --sv-border: #ffffff12; --sv-border-strong: #ffffff24; /* --- Akzente ---------------------------------------------------------- Orange traegt die eine Handlungsaufforderung. Fuer alles Technische das kuehle Blau - ein Gutachten ist keine warme Verkaufsseite. */ --sv-accent: var(--waerme); --sv-accent-technisch: var(--wasser-hell); /* Fuer TEXT auf dunklem Grund reicht das Akzentblau nicht (5,6:1 - fuer Linien und Marker gut, fuer Schrift zu dunkel). Aufgehellte Textstufe, aus dem Bestand gemischt: ~7,8:1. */ --sv-accent-text: color-mix(in srgb, var(--wasser-hell) 72%, var(--ink)); /* --- Form -------------------------------------------------------------- */ --sv-radius: 14px; --sv-radius-ctl: 12px; --sv-shadow-subtle: 0 1px 0 0 #ffffff0a inset, 0 10px 30px -22px #000000cc; /* --- Raster ------------------------------------------------------------ Die Achse: Nummernspalte + Abstand. Alles auf der Seite richtet sich danach aus, deshalb steht sie als Token hier. */ --sv-achse: 4.5rem; --sv-space-section: clamp(4rem, 9vh, 7rem); --sv-measure: 66ch; /* Schmalerer Satzspiegel als im Verkaufsteil (dort 1120 px). Grund: Der Text laeuft auf 66ch, also rund 660 px. Bei 1120 px Rahmen blieben ueber 400 px ausschliesslich rechts frei - einseitige Leere wirkt unfertig, nicht grosszuegig. Bei 920 px bleibt ein Rand, der wie ein gesetzter Seitenrand aussieht. Gilt nur hier; lcw.css bleibt bei 1120 px. */ --shell: 920px; } /* Bewegung des Hintergrunds daempfen: spuerbar, nicht auffaellig. */ body.sv::before{ opacity:.5; filter:blur(44px) saturate(102%); transform:translate3d(0, calc(var(--py,0px) * .16), 0); } /* Grundschrift eine Stufe groesser als der Bestand (16 -> 17 px): lange Lesetexte auf dunklem Grund brauchen mehr Koerper. --sv-measure ist in ch definiert und waechst automatisch mit. */ body.sv{ line-height:1.68; font-size:1.0625rem } body.sv p{ max-width:var(--sv-measure) } /* Lede und Eyebrow erben ihre Farben aus lcw.css (--ink-2/--ink-3) und blieben beim Aufhellen sonst zurueck. Die Lede war zudem mit ihrem alten clamp KLEINER als die neue Grundschrift - eine Einleitung, die kleiner ist als der Fliesstext, ist verkehrt herum. */ body.sv .lede{ color:var(--sv-text-muted); font-size:clamp(1.1rem, 1.6vw, 1.28rem); } body.sv .eyebrow{ color:var(--sv-text-faint); font-size:.8rem } /* Nachgemessene Erbschaften aus lcw.css (16.08.2026): Das FAQ-Bauteil und h3 waren dort fuer kurze Verkaufstexte bemessen - hier lagen Antworten (15,4 px, 9,4:1) und sogar h3 (16 px) UNTER der Grundschrift von 17 px. Eine Ueberschrift, die kleiner ist als ihr Text, ist keine. */ body.sv h3{ font-size:1.24rem } body.sv .fragen summary{ font-size:1.0625rem } body.sv .fragen .antwort{ font-size:1rem; color:var(--sv-text-muted) } /* Textlinks erbten aus lcw.css das dunkle Markenblau - auf dunklem Grund 2,1:1, praktisch unsichtbar (Seiten-Sweep 16.08.2026). Buttons sind ausgenommen, die stehen auf eigenen Flaechen. */ body.sv main a:not(.btn){ color:var(--sv-accent-text); text-decoration-color:#5a86e066; text-underline-offset:.15em; } body.sv main a:not(.btn):hover{ color:var(--ink) } /* Fussbereich: geerbte 4,6:1 auf die faint-Stufe angehoben, Spaltentitel von 12 px auf lesbare Groesse. Nur im SV-Bereich - die Verkaufsseiten behalten ihren Fuss unveraendert. */ body.sv .fuss li, body.sv .fuss p, body.sv .fuss-recht{ color:var(--sv-text-faint); } body.sv .fuss h4{ color:var(--sv-text-muted); font-size:.85rem } /* Einige Fusszeilen tragen ihre Farbe als Inline-Stil (color:var(--ink-3)) direkt im Markup - dagegen gewinnt keine Regel. Deshalb wird die VARIABLE im SV-Fuss umbelegt: der Inline-Stil zeigt dann selbst auf die helle Stufe. Wirkt nur unter body.sv - die Verkaufsseiten bleiben unveraendert. */ body.sv .fuss{ --ink-3:var(--sv-text-faint) } body.sv h1{ font-size:clamp(2.1rem, 4.6vw, 3.4rem); letter-spacing:-.02em } body.sv h2{ font-size:clamp(1.5rem, 2.6vw, 2rem) } /* =========================================================================== DOKUMENTGERUEST =========================================================================== */ /* Auftakt: Kopf, Qualifikation und Bild sind EIN Block, keine drei. */ .sv-auftakt{ padding:clamp(5.5rem, 11vh, 8rem) 0 var(--sv-space-section); } .sv-auftakt .lede{ max-width:var(--sv-measure); font-size:clamp(1.02rem,1.5vw,1.18rem) } /* Kapitel: Haarlinie oben, gleiche Achse, gleicher Rhythmus. Immer. Jedes Kapitel liegt auf einer durchgehenden Glasebene - nicht auf einer Kachel. Die Ebene laeuft ueber die volle Breite, das driftende Farbfeld scheint hindurch. Gerade und ungerade Kapitel unterscheiden sich nur in der Dichte: Rhythmus ohne Beliebigkeit. Das ist die Korrektur der Ueberkorrektur: nicht sieben zufaellige Oberflaechen, aber auch nicht null. Eine Behandlung, zehnmal angewendet. */ .sv-kapitel{ position:relative; padding:var(--sv-space-section) 0; border-top:1px solid #ffffff1f; backdrop-filter:blur(10px) saturate(112%); -webkit-backdrop-filter:blur(10px) saturate(112%); background:linear-gradient(180deg,#ffffff09 0%,#ffffff04 45%,#ffffff01 100%); } .sv-kapitel:nth-of-type(even){ background:linear-gradient(180deg,#ffffff04 0%,#ffffff01 60%,#00000000 100%); } /* Lichtkante an der Oberkante - das Material der Marke, aber nur eine Haarlinie stark, nicht der volle Glanz der Verkaufskacheln. */ .sv-kapitel::before{ content:""; position:absolute; inset:0 0 auto; height:1px; pointer-events:none; background:linear-gradient(90deg,#0000,#ffffff2e 18%,#ffffff14 55%,#0000); } .sv-kapitel + .sv-kapitel{ padding-top:var(--sv-space-section) } .sv-kapitel-kopf{ display:grid; grid-template-columns:var(--sv-achse) 1fr; align-items:start; margin-bottom:2rem; } .sv-kapitel-kopf .eyebrow{ margin-bottom:.5rem } /* --- Zweispaltiger Aufbau ab 1000 px ---------------------------------------- Links steht der Kapitelkopf und BLEIBT beim Scrollen stehen, rechts laeuft der Inhalt daran vorbei. Das fuellt die Breite, erzeugt Tiefe und macht die Nummernspalte zu einer echten Marginalie statt zu einer Randnotiz. Gilt fuer ALLE Kapitel gleich - darin liegt der Unterschied zur ersten Fassung: nicht Abwechslung, sondern ein System, das sich wiederholt. */ @media (min-width:1000px){ .sv-kapitel > .shell{ display:grid; grid-template-columns:minmax(15rem, 20rem) 1fr; gap:clamp(2.5rem, 5vw, 4.5rem); align-items:start; } .sv-kapitel-kopf{ position:sticky; top:6.5rem; margin-bottom:0; grid-template-columns:2.5rem 1fr; } .sv-kapitel-inhalt{ margin-left:0 } .sv-kapitel-kopf h2{ font-size:clamp(1.45rem, 2.1vw, 1.85rem) } } /* Die laufende Nummer - das verbindende Element der ganzen Seite. */ .sv-nr{ font-variant-numeric:tabular-nums; font-size:.88rem; letter-spacing:.14em; color:var(--sv-accent-text); padding-top:.55rem; } /* Abhebung der Kapiteltitel: eine kurze Akzentlinie unter jeder h2 - dasselbe Motiv wie an der Qualifikationszeile, systematisch auf allen Kapiteln. */ .sv-kapitel-kopf h2::after{ content:""; display:block; width:2.4rem; height:2px; border-radius:1px; background:var(--sv-accent-technisch); margin-top:.8rem; } /* Der Inhalt sitzt auf derselben Achse wie die Ueberschrift. */ .sv-kapitel-inhalt{ margin-left:var(--sv-achse) } /* Auf schmalen Fenstern faellt die Nummernspalte weg - sonst bleibt zu wenig Platz fuer den Text. Die Nummer rueckt ueber die Dachzeile. */ @media (max-width:720px){ body.sv{ --sv-achse:0rem } .sv-kapitel-kopf{ grid-template-columns:1fr; gap:.35rem } .sv-nr{ padding-top:0 } .sv-kapitel-inhalt{ margin-left:0 } } /* Einschuebe tragen ihre Trennung selbst - keine zusaetzliche Linie. */ .sv-kapitel--einschub{ border-top:0 } /* =========================================================================== INHALTSBAUSTEINE =========================================================================== */ /* Qualifikationszeile: Urkundenmarkierung, kein Werbesiegel. */ .sv-qualifikation{ position:relative; border-left:2px solid var(--sv-accent-technisch); padding:.15rem 0 .15rem 1rem; margin:1.75rem 0 0; max-width:54ch; overflow:visible; } .sv-qualifikation strong{ display:block; font-weight:600; color:var(--sv-text-primary); letter-spacing:-.012em; } .sv-qualifikation span{ display:block; margin-top:.3rem; font-size:.94rem; color:var(--sv-text-muted); } /* Listen: Haarlinienraster statt Kacheln. */ .sv-liste{ list-style:none; margin:0; padding:0 } .sv-liste li{ padding:.9rem 0 .9rem 1.6rem; border-top:1px solid var(--sv-border); position:relative; color:var(--sv-text-muted); max-width:var(--sv-measure); } .sv-liste li:last-child{ border-bottom:1px solid var(--sv-border) } .sv-liste li::before{ content:""; position:absolute; left:0; top:1.5rem; width:.5rem; height:1px; background:var(--sv-accent-technisch); } .sv-liste li strong{ color:var(--sv-text-primary); font-weight:600 } .sv-liste li a{ white-space:nowrap } /* Unterlagen: zweispaltig, aber ohne Kastenoptik. */ .sv-unterlagen{ display:grid; gap:0 2.5rem; margin:1.75rem 0 0; padding:0; list-style:none; grid-template-columns:1fr; } @media (min-width:700px){ .sv-unterlagen{ grid-template-columns:1fr 1fr } } .sv-unterlagen li{ padding:.7rem 0; border-top:1px solid var(--sv-border); font-size:.98rem; color:var(--sv-text-muted); } /* Fiktivkennzeichnung: rechtlich tragend, muss unuebersehbar bleiben. Kein Kasten - eine kraeftige Kante, die zur Dokumentsprache passt. */ .sv-fiktiv{ display:block; max-width:var(--sv-measure); margin:1.75rem 0 0; padding:.9rem 0 .9rem 1rem; border-left:3px solid var(--sv-accent-technisch); font-size:.95rem; line-height:1.55; color:var(--sv-text-primary); background:linear-gradient(90deg,#5a86e014,#5a86e000 70%); } /* Nummerierter Ablauf. */ .sv-ablauf{ counter-reset:sv; list-style:none; margin:0; padding:0 } .sv-ablauf li{ counter-increment:sv; position:relative; padding:1.5rem 0 1.5rem 3.2rem; border-top:1px solid var(--sv-border); max-width:var(--sv-measure); } .sv-ablauf li:last-child{ border-bottom:1px solid var(--sv-border) } .sv-ablauf li::before{ content:counter(sv,decimal-leading-zero); position:absolute; left:1rem; top:1.75rem; font-variant-numeric:tabular-nums; font-size:.82rem; letter-spacing:.08em; } .sv-ablauf h3{ margin:0 0 .4rem } .sv-ablauf p{ color:var(--sv-text-muted); margin:0 } /* Person: Portrait und Text nebeneinander. */ .sv-person{ display:grid; gap:2rem; grid-template-columns:1fr } @media (min-width:760px){ .sv-person{ grid-template-columns:220px 1fr; gap:2.5rem } } /* Transparenzhinweis. */ .sv-transparenz{ border-top:1px solid var(--sv-border); padding-top:1.5rem; margin-top:2.5rem; font-size:.95rem; color:var(--sv-text-muted); max-width:var(--sv-measure); } /* Schaltflaechen: genau eine orange Flaeche je Bildschirm. */ .sv-cta{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2.25rem } body.sv .btn{ border-radius:var(--sv-radius-ctl) } body.sv .btn-primary{ box-shadow:0 8px 24px -14px #f3731e99 } body.sv .btn-primary:hover{ box-shadow:0 12px 30px -14px #f3731eb3 } body.sv .btn:hover{ transform:translateY(-1px) } /* Haeufige Fragen: das Bauteil aus lcw.css an die Dokumentsprache angleichen. */ body.sv .fragen details{ border-radius:0; border-left:0; border-right:0 } /* =========================================================================== DIE ZWEI FLAECHEN =========================================================================== */ /* Beide Flaechen sind BAENDER, keine Kacheln: der Farbwechsel laeuft ueber die volle Seitenbreite, der Text bleibt auf derselben Achse wie ueberall sonst. Eine Kachel haette den Inhalt um ihren Innenabstand nach rechts geschoben - genau der Achsensprung, der die erste Fassung zerrissen hat. */ /* Das helle Band ist entfallen (16.08.2026). Es war die einzige Ausnahme der Seite - und genau deshalb wirkte es als Fremdkoerper, nicht als Akzent. Eine Ausnahme in zehn gleichen Kapiteln liest sich immer als Fehler. Kapitel 04 laeuft jetzt in derselben Sprache wie alle anderen; sein Gewicht bekommt es ueber den Inhalt, nicht ueber eine eigene Farbe. */ /* 2 · Glasband am Ende. Die einzige Stelle, an der die Materialsprache der Verkaufsseite noch durchscheint - ueber die volle Breite, ohne Kante. */ .sv-kapitel--abschluss{ border-top:1px solid var(--sv-border-strong); backdrop-filter:blur(14px) saturate(118%); -webkit-backdrop-filter:blur(14px) saturate(118%); background:linear-gradient(180deg,var(--sv-surface) 0%,#ffffff05 60%,#ffffff02 100%); } /* =========================================================================== BEWEGUNG =========================================================================== Zwei Regeln fuer alles hier: 1. Langsam. Was ein Mensch erfassen soll, braucht laenger als eine Sekunde. 2. Der Endzustand traegt die Aussage allein. Wer die Bewegung verpasst, spaeter ankommt oder prefers-reduced-motion gesetzt hat, sieht dasselbe Ergebnis. Keine Information existiert nur waehrend einer Bewegung. Nichts laeuft in Dauerschleife - mit einer bewussten Ausnahme. =========================================================================== */ /* Der Kopf kommt scharf. */ body.sv h1 .sv-zeile{ display:block; animation:svScharf 1.6s cubic-bezier(.19,.72,.24,1) both; } body.sv h1 .sv-zeile:nth-child(2){ animation-delay:.42s } @keyframes svScharf{ from{ opacity:0; filter:blur(9px); transform:translateY(.4em) } 60% { opacity:1 } to { opacity:1; filter:blur(0); transform:none } } /* Der Leuchtpunkt an der Qualifikationszeile: einmal, 5,2 s. */ .sv-qualifikation::before{ content:""; position:absolute; left:-2px; top:0; width:2px; height:38%; border-radius:2px; background:linear-gradient(180deg,#f3731e00,var(--sv-accent) 45%,var(--waerme-hell) 60%,#f3731e00); filter:drop-shadow(0 0 6px #f3731ecc) drop-shadow(0 0 13px #f3731e66); opacity:0; pointer-events:none; } .sv-qualifikation.is-in::before{ animation:svLauf 5.2s cubic-bezier(.45,0,.25,1) .6s 1 both; } @keyframes svLauf{ 0% { opacity:0; transform:translateY(-45%) } 10% { opacity:1 } 86% { opacity:1 } 100%{ opacity:0; transform:translateY(205%) } } /* Die einzige Dauerbewegung: 14 s, minimale Amplitude. Man sieht es nicht, wenn man hinsieht - nur, wenn man laenger auf der Seite ist. */ .sv-qualifikation.is-in{ animation:svAtem 14s ease-in-out 6s infinite; } @keyframes svAtem{ 0%,100%{ border-left-color:var(--sv-accent-technisch) } 50% { border-left-color:color-mix(in srgb, var(--sv-accent) 55%, var(--sv-accent-technisch)) } } /* Der Ablauf laeuft ab. */ .sv-ablauf li::after{ content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--sv-accent-technisch); transform:scaleY(0); transform-origin:top; transition:transform 2.1s cubic-bezier(.19,.72,.24,1); } .sv-ablauf li.is-in::after{ transform:scaleY(1) } .sv-ablauf li::before{ color:var(--sv-text-faint); opacity:.45; transition:color 1.5s ease .5s, opacity 1.5s ease .5s; } .sv-ablauf li.is-in::before{ color:var(--sv-accent-technisch); opacity:1 } .sv-ablauf li h3, .sv-ablauf li p{ transition:opacity 1.4s ease .45s, transform 1.4s cubic-bezier(.19,.72,.24,1) .45s; } .sv-ablauf li:not(.is-in) h3, .sv-ablauf li:not(.is-in) p{ opacity:.35; transform:translateX(.5rem) } /* =========================================================================== TECHNISCHE GRAFIKEN =========================================================================== Eigene Zeichnungen in der Machart der LCW-Animationen (Loxone-Tagesmodell, Manometer): SVG, Markenfarben, Bewegung mit Bedeutung. Kein Stockfoto kann das ersetzen - und kein Herstellerlogo haengt daran. =========================================================================== */ /* --- Messschrieb (Kopfbereich) ---------------------------------------------- */ .sv-chart{ margin:clamp(2.5rem, 6vh, 4rem) 0 0; padding:clamp(1.2rem, 2.5vw, 2rem); border:1px solid var(--sv-border); border-radius:var(--sv-radius); background:linear-gradient(165deg,#ffffff0a,#ffffff03 60%); backdrop-filter:blur(10px) saturate(112%); -webkit-backdrop-filter:blur(10px) saturate(112%); } .sv-chart svg{ display:block; width:100%; height:auto } .sv-chart figcaption{ margin-top:.9rem; font-size:.86rem; color:var(--sv-text-faint); max-width:var(--sv-measure); } /* Diagnosezeile: Befund und Einordnung, wie im Gutachten getrennt. Erscheint als Letztes - nachdem die Kurven stehen und der Befund markiert ist, so wie die Bewertung im Gutachten nach dem Befund kommt. */ .sv-diagnose{ margin-top:1.4rem; padding-top:1.2rem; border-top:1px solid var(--sv-border); display:grid; gap:.6rem; opacity:0; } /* Der Ausloeser muss BEIDE Traeger kennen - Chart und Schema. Nur auf .sv-chart gebunden blieb die Zeile auf den Schema-Seiten unsichtbar. Die Verzoegerung folgt der jeweiligen Sequenzlaenge ueber --td. */ .sv-diagnose{ --td:6.8s } .sv-schema .sv-diagnose{ --td:3.2s } .sv-ausschluss .sv-diagnose{ --td:9s } .sv-chart.is-in .sv-diagnose, .sv-schema.is-in .sv-diagnose{ animation:svEinblenden 1.4s ease var(--td) forwards } /* Zweispaltig mit haengendem Einzug: das Etikett steht in einer eigenen Spalte, Umbruchzeilen bleiben buendig in der Textspalte - sonst laeuft die zweite Zeile unter das Etikett. */ .sv-diagnose p{ margin:0; font-size:1rem; color:var(--sv-text-muted); max-width:none; display:grid; grid-template-columns:7.5rem 1fr; gap:.85rem; align-items:baseline; } .sv-diagnose strong{ font-size:.72rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; } @media (max-width:560px){ .sv-diagnose p{ grid-template-columns:1fr; gap:.2rem } } .sv-diagnose p:nth-child(1) strong{ color:var(--sv-accent-text) } .sv-diagnose p:nth-child(2) strong{ color:var(--sv-accent) } .sv-chart-legende{ display:flex; flex-wrap:wrap; gap:1.25rem; margin-bottom:1rem; font-size:.8rem; color:var(--sv-text-muted); } .sv-chart-legende span{ display:inline-flex; align-items:center; gap:.45rem } .sv-chart-legende .lg{ width:1.1rem; height:2px; border-radius:1px; display:inline-block } .lg-warm{ background:var(--waerme) } .lg-kalt{ background:var(--wasser-hell) } .lg-grau{ background:var(--ink-3) } .sv-raster line{ stroke:#ffffff10; stroke-width:1 } .sv-achsentext text{ fill:var(--sv-text-faint); font-size:11px; letter-spacing:.04em; font-family:inherit; } .sv-trace{ fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1000; stroke-dashoffset:1000; } .sv-trace-warm{ stroke:var(--waerme) } .sv-trace-kalt{ stroke:var(--wasser-hell) } .sv-trace-grau{ stroke:var(--ink-3); stroke-width:1.5 } /* Zeichnen beim Erscheinen: erst die Umgebung (grau), dann Ruecklauf, dann Vorlauf. Langsam - zusammen gut sieben Sekunden. Der Endzustand ist der fertige Schrieb; wer die Bewegung verpasst, verpasst nichts Inhaltliches. */ .sv-chart.is-in .sv-trace-grau{ animation:svZeichnen 3.2s cubic-bezier(.4,0,.3,1) .3s forwards } .sv-chart.is-in .sv-trace-kalt{ animation:svZeichnen 3.6s cubic-bezier(.4,0,.3,1) 1.1s forwards } .sv-chart.is-in .sv-trace-warm{ animation:svZeichnen 3.6s cubic-bezier(.4,0,.3,1) 1.9s forwards } @keyframes svZeichnen{ to{ stroke-dashoffset:0 } } /* Der Befund kommt ZULETZT - erst wenn die Kurven stehen, faellt der Blick dorthin, wo der Sachverstaendige ihn hinlenken wuerde. */ .sv-befund rect{ fill:#5a86e00d; stroke:#5a86e04d; stroke-width:1; stroke-dasharray:4 4; } .sv-befund text{ fill:var(--sv-accent-text); font-size:11px; letter-spacing:.12em; text-transform:uppercase; font-family:inherit; } /* Spreizungs-Beschriftung: erscheint mit den Kurven, nicht erst mit dem Befund - sie gehoert zum Normalbetrieb. */ .sv-delta{ opacity:0 } .sv-chart.is-in .sv-delta{ animation:svEinblenden 1.2s ease 4.6s forwards } .sv-delta line{ stroke:var(--sv-text-faint); stroke-width:1 } .sv-delta text{ fill:var(--sv-text-muted); font-size:11px; letter-spacing:.04em; font-family:inherit; } .sv-delta-wert{ fill:var(--sv-text-muted) !important; text-transform:none !important; letter-spacing:.04em !important; } .sv-marke{ fill:var(--sv-accent-technisch) } .sv-marke-ring{ fill:none; stroke:var(--sv-accent-technisch); stroke-width:1.5; transform-box:fill-box; transform-origin:center; } .sv-befund{ opacity:0 } .sv-chart.is-in .sv-befund{ animation:svEinblenden 1.4s ease 5.6s forwards } .sv-chart.is-in .sv-marke-ring{ animation:svRing 3.2s ease-out 6.2s infinite } @keyframes svEinblenden{ to{ opacity:1 } } @keyframes svRing{ 0% { transform:scale(1); opacity:.9 } 70% { transform:scale(2.6); opacity:0 } 100%{ transform:scale(2.6); opacity:0 } } /* --- Anlagenschema (Kapitel 01) --------------------------------------------- */ .sv-schema{ margin:2.5rem 0 0; padding:clamp(1.2rem, 2.5vw, 2rem); border:1px solid var(--sv-border); border-radius:var(--sv-radius); background:linear-gradient(165deg,#ffffff08,#ffffff02 60%); } .sv-schema svg{ display:block; width:100%; max-width:34rem; height:auto } .sv-schema figcaption{ margin-top:.9rem; font-size:.86rem; color:var(--sv-text-faint); max-width:var(--sv-measure); } .sv-geraet rect, .sv-geraet circle{ fill:#ffffff05; stroke:var(--sv-border-strong); stroke-width:1.5; } .sv-geraet-detail{ fill:none; stroke:var(--sv-text-faint); stroke-width:1.2 } .sv-schrift{ fill:var(--sv-text-muted); font-size:11.5px; font-family:inherit; letter-spacing:.03em } .sv-rohr{ fill:none; stroke-width:2.5; stroke-linecap:round } .sv-rohr-warm{ stroke:#f3731e59 } .sv-rohr-kalt{ stroke:#5a86e059 } /* Stroemung: bewegte Strichelung auf den Leitungen. Eine Dauerbewegung mit Bedeutung - sie zeigt eine laufende Anlage, wie das Loxone-Modell einen laufenden Tag zeigt. Sehr langsam, geringe Deckkraft. */ .sv-fluss{ fill:none; stroke-width:2.5; stroke-linecap:round; stroke-dasharray:5 14; opacity:.75; } .sv-fluss-warm{ stroke:var(--waerme-hell) } .sv-fluss-kalt{ stroke:var(--wasser-hell) } .sv-schema.is-in .sv-fluss{ animation:svStroemen 2.8s linear infinite } @keyframes svStroemen{ to{ stroke-dashoffset:-19 } } /* Messstellen: pulsieren NACHEINANDER, wie eine Messrunde am Objekt. Reihenfolge ueber --mess aus dem Markup. */ .sv-mess-punkt{ fill:var(--sv-accent-technisch) } .sv-mess-ring{ fill:none; stroke:var(--sv-accent-technisch); stroke-width:1.5; opacity:0; transform-box:fill-box; transform-origin:center; } .sv-schema.is-in .sv-mess-ring{ animation:svMessen 6.4s ease-out infinite; animation-delay:calc(var(--mess) * 1.6s); } @keyframes svMessen{ 0% { transform:scale(1); opacity:.9 } 18% { transform:scale(2.4); opacity:0 } 100%{ transform:scale(2.4); opacity:0 } } /* --- Raumtemperatur-Balken (Heizungsseite) ---------------------------------- */ .sv-balken{ display:grid; gap:.65rem } .sv-balken-zeile{ display:grid; grid-template-columns:9.5rem 1fr 4.5rem; align-items:center; gap:1rem; font-size:.92rem; color:var(--sv-text-muted); } .sv-balken-zeile i{ display:block; height:10px; border-radius:5px; background:linear-gradient(90deg,var(--wasser-hell),var(--waerme)); transform:scaleX(0); transform-origin:left; transition:transform 1.8s cubic-bezier(.19,.72,.24,1); width:var(--w); } .sv-balken-zeile:nth-child(2) i{ transition-delay:.25s } .sv-balken-zeile:nth-child(3) i{ transition-delay:.5s } .sv-balken-zeile:nth-child(4) i{ transition-delay:.75s } .sv-balken-zeile:nth-child(5) i{ transition-delay:1s } .sv-chart.is-in .sv-balken-zeile i{ transform:scaleX(1) } .sv-balken-zeile b{ font-weight:600; color:var(--sv-text-primary); font-variant-numeric:tabular-nums; text-align:right; } .sv-balken--auffaellig i{ background:var(--wasser-hell); opacity:.75 } .sv-balken--auffaellig b{ color:var(--sv-accent-text) } .sv-balken-hinweis{ margin-top:.6rem; font-size:.82rem; color:var(--sv-text-faint) } @media (max-width:560px){ .sv-balken-zeile{ grid-template-columns:6.5rem 1fr 3.6rem; font-size:.85rem } } /* --- Pruefliste (Abnahmeseite) ---------------------------------------------- */ .sv-check{ list-style:none; margin:0; padding:0 } .sv-check li{ display:grid; grid-template-columns:1.6rem 1fr auto; align-items:center; gap:.9rem; padding:.8rem 0; border-top:1px solid var(--sv-border); color:var(--sv-text-muted); opacity:0; transform:translateY(.4rem); transition:opacity .9s ease, transform .9s cubic-bezier(.19,.72,.24,1); transition-delay:calc(var(--i) * .45s); } .sv-check li:last-child{ border-bottom:1px solid var(--sv-border) } .sv-schema.is-in .sv-check li{ opacity:1; transform:none } .sv-check i{ width:1.25rem; height:1.25rem; border-radius:50%; display:grid; place-items:center; border:1.5px solid var(--sv-border-strong); font-style:normal; font-size:.72rem; } .sv-check i.ok::before{ content:"✓"; color:var(--klima) } .sv-check i.nein::before{ content:"—"; color:var(--sv-accent) } .sv-check li.fehlt{ color:var(--sv-text-primary) } .sv-check li.fehlt i{ border-color:var(--sv-accent) } .sv-check b{ font-weight:600; font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; color:var(--sv-text-faint); } .sv-check li.fehlt b{ color:var(--sv-accent) } /* --- Ausschlusspruefung (Maengelseite) --------------------------------------- Kein statischer Baum, sondern der Ablauf der Methode als Sequenz: 1. Symptom und Hypothesen erscheinen. 2. Ein Pruefring wandert von Hypothese zu Hypothese (je 1,4 s). 3. Hinter ihm faellt jede geprüfte aus: Kasten dimmt ab, Stempel "geprüft — nein" erscheint. 4. Die letzte bestaetigt sich: Ring bleibt, Kasten gluht auf, der Nachweis haengt sich an. Endzustand traegt allein: abgedimmte Ausgeschlossene, markierter Treffer, Nachweis - wer die Sequenz verpasst, sieht das fertige Ergebnis. */ .sv-ausschluss .sv-anim{ opacity:0 } .sv-schema.is-in .sv-anim{ animation:svEinblenden .8s ease var(--t) forwards } .sv-sym{ fill:#ffffff08; stroke:var(--sv-border-strong); stroke-width:1.5 } .sv-hypo rect{ fill:#ffffff05; stroke:var(--sv-border-strong); stroke-width:1.5 } .sv-nachweis{ fill:#f3731e10; stroke:var(--sv-accent); stroke-width:1.5 } /* Ausscheiden: Kasten dimmt ab, sobald der Ring weitergezogen ist. */ .sv-schema.is-in .sv-hypo--aus{ animation:svEinblenden .8s ease var(--t) forwards, svAbwahl 1s ease var(--taus) forwards; } @keyframes svAbwahl{ to{ opacity:.38 } } /* Bestaetigen: der Kasten wechselt auf die technische Akzentfarbe und bekommt einen Schein - dieselbe Sprache wie die Befundzone im Chart. */ .sv-schema.is-in .sv-treffer-box{ animation:svTreffer 1.2s ease 6.9s forwards; } @keyframes svTreffer{ to{ stroke:var(--sv-accent-technisch); fill:#5a86e014; filter:drop-shadow(0 0 8px #5a86e080) } } /* Der wandernde Pruefring. */ .sv-ring{ fill:none; stroke:var(--sv-accent-technisch); stroke-width:2; filter:drop-shadow(0 0 7px #5a86e099); opacity:0; pointer-events:none; } .sv-schema.is-in .sv-ring{ animation:svRingBesuch 1.5s ease var(--t) 1 } .sv-schema.is-in .sv-ring--bleibt{ animation:svRingBesuch 1.5s ease var(--t) 1 } @keyframes svRingBesuch{ 0% { opacity:0; transform:scale(1.04); transform-box:fill-box; transform-origin:center } 18% { opacity:1; transform:scale(1) } 82% { opacity:1 } 100%{ opacity:0 } } .sv-stempel{ fill:var(--sv-text-faint); font-size:12px; font-family:inherit; letter-spacing:.05em; } .sv-stempel--ja{ fill:var(--klima); font-weight:600 } /* --- Szenario-Gliederung (Pruefbeispiele) ------------------------------------ */ .sv-szenario{ margin:1.75rem 0 0; display:grid; gap:0 } .sv-szenario dt{ font-size:.8rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--sv-accent-text); padding:1.3rem 0 .35rem; border-top:1px solid var(--sv-border); } .sv-szenario dt:first-child{ border-top:0; padding-top:0 } .sv-szenario dd{ margin:0 0 .9rem; color:var(--sv-text-muted); max-width:var(--sv-measure); } .sv-szenario .sv-kern{ color:var(--sv-text-primary); border-left:2px solid var(--sv-accent); padding-left:1rem; } /* =========================================================================== BILDER =========================================================================== */ .sv-bild{ margin:0; position:relative } .sv-bild img{ display:block; width:100%; height:100%; object-fit:cover; border-radius:var(--sv-radius); border:1px solid var(--sv-border); } .sv-bild--hero{ margin-top:clamp(2.5rem, 6vh, 4rem); container-type:inline-size } .sv-bild--hero img{ aspect-ratio:16/9 } .sv-bild--fach img{ aspect-ratio:3/2 } .sv-bild--portrait img{ aspect-ratio:4/5 } .sv-bild figcaption{ margin-top:.7rem; font-size:.86rem; color:var(--sv-text-faint); } /* Platzhalter-Kennzeichnung. Zurueckhaltender als in der ersten Fassung: der gestrichelte Rahmen hat die Seite mit zerrissen. Jetzt eine feine Kante und ein kleines Etikett - erkennbar unfertig, ohne die Gestaltung zu sprengen. Entfernen: Klasse "ist-platzhalter" aus sv-inhalt.js loeschen. */ .ist-platzhalter img{ border-color:var(--sv-accent-technisch); filter:saturate(.7); } .ist-platzhalter::after{ content:"Beispielbild"; position:absolute; left:.85rem; top:.85rem; padding:.3rem .65rem; border-radius:6px; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; background:#070a12e6; color:var(--sv-text-primary); border:1px solid var(--sv-accent-technisch); pointer-events:none; } .sv-bildplatz{ border:1px dashed var(--sv-border-strong); border-radius:var(--sv-radius); background:#ffffff05; display:grid; place-items:center; text-align:center; padding:1.5rem; color:var(--sv-text-faint); font-size:.85rem; } .sv-bildplatz--portrait{ aspect-ratio:4/5 } /* Der Befund-Scan haengt am Scrollen, nicht an einer Uhr: er dauert genau so lange, wie der Besucher will. Browser ohne Unterstuetzung zeigen das Bild ohne Scan - die Aussage der Seite haengt nicht daran. */ @supports (animation-timeline: view()){ @media (prefers-reduced-motion:no-preference){ .sv-bild--hero{ overflow:hidden } .sv-bild--hero::before{ content:""; position:absolute; top:0; bottom:1.9rem; left:0; width:2px; z-index:2; pointer-events:none; background:linear-gradient(180deg,#5a86e000,var(--sv-accent-technisch) 12%, #cfe0ff 50%,var(--sv-accent-technisch) 88%,#5a86e000); box-shadow:0 0 14px 2px #5a86e0a6, 0 0 40px 6px #5a86e047; animation:svScanLinie linear both; animation-timeline:view(); animation-range:entry 15% cover 75%; } @keyframes svScanLinie{ 0% { transform:translateX(0); opacity:0 } 8% { opacity:1 } 88% { opacity:1 } 100%{ transform:translateX(calc(100cqw - 2px)); opacity:0 } } .sv-bild--hero img{ animation:svScanFlaeche linear both; animation-timeline:view(); animation-range:entry 15% cover 75%; } @keyframes svScanFlaeche{ 0% { filter:saturate(.2) contrast(.9) brightness(.8) } 100%{ filter:saturate(.7) contrast(1) brightness(1) } } } } /* =========================================================================== RUECKSICHT UND DRUCK =========================================================================== */ @media (prefers-reduced-motion:reduce){ body.sv::before{ transform:none } body.sv .btn:hover{ transform:none } /* Alle Auftakte und die Dauerbewegung abschalten. Weil jeder Endzustand die Aussage allein traegt, geht dabei nichts verloren. */ body.sv h1 .sv-zeile{ animation:none; opacity:1; filter:none; transform:none } .sv-qualifikation.is-in{ animation:none } .sv-qualifikation::before, .sv-qualifikation.is-in::before{ animation:none; opacity:0 } .sv-ablauf li::after{ transition:none; transform:scaleY(1) } .sv-ablauf li::before{ transition:none } .sv-ablauf li h3, .sv-ablauf li p{ transition:none } .sv-ablauf li:not(.is-in) h3, .sv-ablauf li:not(.is-in) p{ opacity:1; transform:none } .sv-kapitel--abschluss, .sv-kapitel--abschluss h2, .sv-kapitel--abschluss .eyebrow, .sv-kapitel--abschluss li, .sv-kapitel--abschluss p, .sv-kapitel--abschluss .sv-nr{ transition:none } /* Grafiken: fertig gezeichnet, ohne Bewegung. Der Endzustand traegt. */ .sv-trace{ stroke-dashoffset:0; animation:none !important } .sv-befund, .sv-delta, .sv-diagnose{ opacity:1; animation:none !important } .sv-marke-ring, .sv-mess-ring{ animation:none !important; opacity:0 } .sv-fluss{ animation:none !important; opacity:.35 } .sv-balken-zeile i{ transition:none; transform:scaleX(1) } .sv-check li{ transition:none; opacity:1; transform:none } /* Ausschlusspruefung: direkt der Endzustand. */ .sv-ausschluss .sv-anim{ animation:none !important; opacity:1 } .sv-hypo--aus{ opacity:.38 !important } .sv-ring{ animation:none !important; opacity:0 } .sv-treffer-box{ stroke:var(--sv-accent-technisch); fill:#5a86e014 } } /* Seiten aus diesem Bereich werden ausgedruckt und Anwaelten, Versicherern oder Verwaltungen vorgelegt. Der Druck muss wie ein Dokument aussehen. */ @media print{ body.sv{ background:#fff; color:#000; line-height:1.5 } body.sv::before, body.sv::after{ display:none !important } .sv-kapitel--abschluss{ backdrop-filter:none; -webkit-backdrop-filter:none; background:#fff; box-shadow:none; } .sv-fiktiv{ border-left:3px solid #000; background:#fff; color:#000; font-weight:600; } .sv-kapitel, .sv-liste li, .sv-ablauf li, .sv-unterlagen li{ border-color:#999 } .sv-nr, .sv-ablauf li::before{ color:#000 } .sv-liste li::before{ background:#000 } .sv-qualifikation{ border-left-color:#000 } .sv-qualifikation::before{ display:none } .sv-cta{ display:none } /* Grafiken drucken als fertige Schwarzweiss-Zeichnung. */ .sv-chart, .sv-schema{ background:#fff; border:1px solid #999 } .sv-trace{ stroke-dashoffset:0; animation:none } .sv-trace-grau{ stroke:#888 } .sv-befund, .sv-delta{ opacity:1 } .sv-delta line{ stroke:#000 } .sv-delta text, .sv-delta-wert{ fill:#000 !important } .sv-diagnose{ opacity:1; border-color:#999 } .sv-diagnose p, .sv-diagnose strong{ color:#000 } .sv-balken-zeile i{ transform:scaleX(1); background:#666 } .sv-balken-zeile, .sv-balken-zeile b, .sv-balken-hinweis{ color:#000 } .sv-check li{ opacity:1; transform:none; color:#000; border-color:#999 } .sv-check b{ color:#000 } .sv-ausschluss .sv-anim{ animation:none; opacity:1 } .sv-hypo--aus{ opacity:.55 } .sv-ring{ display:none } .sv-sym, .sv-hypo rect, .sv-nachweis{ fill:#fff; stroke:#666 } .sv-treffer-box{ stroke:#000; stroke-width:2.5 } .sv-stempel, .sv-stempel--ja{ fill:#000 } .sv-szenario dt{ color:#000; border-color:#999 } .sv-szenario dd{ color:#000 } .sv-szenario .sv-kern{ border-left-color:#000 } .sv-marke-ring, .sv-mess-ring, .sv-fluss{ display:none } .sv-raster line{ stroke:#ddd } .sv-achsentext text, .sv-schrift, .sv-befund text{ fill:#000 } .sv-geraet rect, .sv-geraet circle{ fill:#fff; stroke:#666 } .sv-geraet-detail{ stroke:#666 } .sv-rohr-warm, .sv-rohr-kalt{ stroke:#999 } }