/** Shopify CDN: Minification failed Line 598:25 Unexpected "}" Line 682:2 Unexpected "}" Line 9721:0 Unexpected "}" **/ /* Palette = Brand Book v1.1 Pfad 6 "Feierabend-Handwerk" (60-30-10: Sand/Papier Flaeche, Ink/Walnuss Text+Struktur, Rost NUR CTA/Preis-Highlights/Logo-Klammer, Messing sparsam). Historische Variablennamen bleiben (93 Verbraucherstellen): --gruen traegt jetzt WALNUSS, --bernstein traegt MESSING. Neue Rollen-Tokens: --rost, --walnuss, --sand. */ /* ====================== HALTEPUNKTE ====================== Vorgabe Claras vom 30.09.2026: "das responsive Design mit diesen gaengigen Breakpoints - Tablet 576/640px, Laptop 992/1024px, grosser Desktop 1200/1280px". DAS SCHEMA (max-width / die Gegenstuecke als min-width): 576 / 577 schmales Handy 640 / 641 Handy, kleines Tablet 768 / 769 HAUPTUMBRUCH - hier wechselt die Seite von nebeneinander auf untereinander 992 / 993 Tablet quer, kleiner Laptop 1024 / 1025 Laptop 1200 / 1201 grosser Desktop 768 STEHT IN CLARAS LISTE NICHT, ist aber die wichtigste Stufe dieses Themes: Der Hauptumbruch lag bei 760px und traegt allein 46 Regelbloecke. Auf 640 gezogen bekaeme ein Tablet hochkant (768px) die Desktop-Ansicht, fuer die es zu schmal ist; auf 1024 gezogen bekaemen kleine Laptops die gestapelte. 768 ist der fehlende Standardwert dazwischen (Bootstrap md, Tailwind md) und praktisch dieselbe Grenze wie bisher - Clara hat ihn so gewaehlt. VORHER WAREN ES 17 STUFEN: 420, 480, 520, 560, 600, 620, 640, 680, 700, 760, 820, 860, 899, 900, 920, 980, 1180 - gewachsen ueber Monate, jede fuer einen Einzelfall. Sie sind zu den sechs oben zusammengefasst. WAS DABEI VERSCHMILZT, ist der Teil, der beim Ansehen auffallen kann: - 820, 860, 899, 900, 920 -> 992: Regeln, die frueher nur bis 820 galten, gelten jetzt bis 992. Dieser Bereich gehoert geprueft. - 600 bis 700 -> 640 und 420 bis 560 -> 576: kleine Verschiebungen, unkritisch. - Der frueher doppelt gedeckte Bereich 901-920 (max 920 UND min 901 trafen beide zu) ist aufgeloest; dort gilt jetzt genau eine Seite. 1500 und 1800 SIND KEINE LAYOUT-HALTEPUNKTE, sondern die Stufen der Inhaltsbreite fuer sehr grosse Bildschirme (--seite-max). Sie liegen ueber dem Schema und bleiben. NUR DIESE DATEI: assets/base.css und die Horizon-Schnipsel gehoeren zum Basistheme von Shopify und haben ihr eigenes Raster (749/750, 990, 1200, 1400). Sie bedienen Warenkorb, Suche und Kollektionen - sie hier mit umzuhaengen hiesse, bei jedem Theme-Update dagegen anzuarbeiten. ========================================================== */ /* Scrollbalken ausblenden, Scrollen bleibt (User-Entscheid 29.07.2026: "sieht schrecklich aus"). Gilt bewusst fuer die ganze Seite inklusive aller inneren Scroll-Container - Info-Blase, Rechenzettel, Bauteil-Listen. Firefox/alte Edge ueber scrollbar-width bzw. -ms-overflow-style, Chrome/Safari ueber den ::-webkit-scrollbar-Pseudoselektor. HINWEIS: Ohne sichtbaren Balken fehlt ein Hinweis darauf, DASS es weitergeht - die scrollbaren Bereiche muessen deshalb am unteren Rand angeschnitten wirken. */ /* KEIN WAAGERECHTES SCHIEBEN DER GANZEN SEITE (15.10.2026, Meldung Claras: "beim Reiter Kits kann man irgendwie den Screen bewegen" - die Seite stand um gut hundert Punkte nach rechts verschoben, Logo und Ueberschrift links angeschnitten). WAS ES NICHT IST, GEPRUEFT: die Vergleichstabelle (.kitcompare traegt overflow-x:auto und wird unter 640 Punkten zum Raster mit min-width:0), die Kit-Raster, Warenkorb-Schub und Pop-up-Fenster (alle position:fixed, die erweitern den Scrollbereich nicht) und das Kopfbild (sein ueberbreiter Teil liegt in einem Abschnitt mit overflow:hidden). Gesucht habe ich ueber alle Klassen der Seite gegen jede CSS-Regel mit Breiten ab 400 Punkten, negativen Raendern oder Versatz. Ohne Browser laesst sich das verursachende Element von hier aus nicht zweifelsfrei benennen. DESHALB DER RIEGEL AN DER WURZEL - und clip, nicht hidden: overflow-x:hidden am html-Element macht es zum Scrollkasten, und damit verlieren alle position:sticky-Elemente darin ihren Bezug. In diesem Theme sind das die Menueleiste, der Rechenzettel und die Berater-Spalte. clip schneidet ab, ohne einen Scrollkasten zu erzeugen. DIE INNEREN SCHIEBEKAESTEN BLEIBEN: Kit-Karussell und Vergleichstabelle haben ihr eigenes overflow-x und sind nicht betroffen. */ html{overflow-x:clip} html,body,*{scrollbar-width:none;-ms-overflow-style:none} ::-webkit-scrollbar,*::-webkit-scrollbar{width:0;height:0;display:none} :root{ --paper:#F7F5F1; --card:#FFFFFF; --line:#E4DFD5; --ink:#33312D; --muted:#8A7A63; --graphit:#5C5850; --gruen:#6B4A34; --gruen-tint:#EFE6D8; --bernstein:#B98B3E; --bernstein-dark:#9C7433; --bernstein-tint:#F3E9D3; /* DIE BREITE DES RECHNER-KASTENS, an einer Stelle (14.10.2026). Sie gilt fuer den Funnel und fuer den Heizkostenrechner darunter (Vorgabe Claras: "pass die Breite des Heizkostenrechners auch an die Groesse des Kastens des Rechners oben an"). Die beiden liegen in verschiedenen Dateien - zwei getippte 1160 waeren die sicherste Art, dass sie beim naechsten Mal auseinanderlaufen. */ --rechner-max:1160px; --rost:#FFC700; --rost-dark:#E6B200; --walnuss:#6B4A34; --sand:#EFE6D8; --sand-deep:#E3D3BB; --warn:#8A3A22; --warn-tint:#EFE6D8; /* ---- Radien und Schatten auf das Design System gezogen (30.07.2026) ---- Quelle: "billigerwaermepumpe Design System/tokens/effects.css". Vorher lief hier eine eigene Skala (18/9) plus ein langer Schwanz an Einzelwerten - gemessen 14 verschiedene Radien, 11 davon systemfremd. --radius 18px -> 14px DS radius-lg "Karten, Boxen" --radius-s 9px -> 10px DS radius-md "Buttons, Callout-Ecke" Beides aendert keine Textmetrik: nichts bricht um, nichts verrutscht. Schatten: das System schreibt genau zwei vor und begruendet das ("Kaum Schatten: Struktur kommt aus duennen Linien, nicht aus Tiefe"). Der alte Wert war mit 44px Weichzeichnung mehr als doppelt so tief wie die DS-Vorgabe und benutzte einen anderen Grundton (43,33,26 statt 51,49,45 = Graphit). */ --radius:14px; --radius-s:10px; --radius-xs:4px; --radius-pill:100px; --radius-xl:16px; --shadow-card:0 1px 2px rgba(51,49,45,.04); --shadow-lift:0 6px 20px rgba(51,49,45,.08); --shadow:var(--shadow-card),var(--shadow-lift); --font:'Urbanist',system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace; /* BREITE DES INHALTS (22.09.2026). Bis dahin stand die Zahl fest in .wrap - und an weiteren Stellen noch einmal. Als Variable gibt es sie einmal, und alle ziehen mit. 1140px SIND AM VORBILD GEMESSEN (klekks.com, zwei Aufnahmen desselben Shops auf verschieden grossen Schirmen). Die Inhaltsspalte nimmt dort einmal 60, einmal 94 Prozent der Fensterbreite ein - ein fester Prozentsatz ist es also nicht, sondern eine feste Hoechstbreite, die das kleinere Fenster fast ausfuellt und im groesseren mittig steht. Aus beiden Messungen ergeben sich rund 1140 Pixel. DIE STUFE AUF 1280px BEI 1440px SCHIRMBREITE IST DAMIT WIEDER WEG. Ich hatte sie heute eingebaut, weil der Inhalt auf grossen Monitoren schmal wirkte. Das Vorbild macht genau das NICHT: Es laesst die Spalte stehen und den Rand wachsen. Eine Stufe, die das Gegenteil des Vorbilds tut, bleibt nicht stehen, nur weil sie von heute Vormittag ist. */ --seite-max:1140px; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} /* Sprungziele duerfen nicht unter der klebenden Leiste landen (22.09.2026). Ohne diese Zeile scrollt jeder Anker - "#rechner", die Reiter, jedes scrollIntoView aus dem Skript - das Ziel genau an die Oberkante des Fensters, wo die 64px hohe Leiste darueberliegt: Die Ueberschrift, auf die gesprungen wurde, ist dann unsichtbar. 76px = Leistenhoehe plus etwas Luft. */ html{scroll-padding-top:76px} body{font-family:var(--font);background:var(--paper);color:var(--ink);line-height:1.55;-webkit-font-smoothing:antialiased} a{color:var(--gruen)} img{display:block;max-width:100%} /* AUF BREITEN BILDSCHIRMEN WAECHST DIE INHALTSBREITE MIT (30.09.2026, Meldung Claras: auf einem grossen Monitor sehe die Startseite anders aus als in der Editor-Vorschau). URSACHE, nachgemessen: Die Inhalte sind auf 1140px gedeckelt. Die Vorschau im Theme-Editor ist ungefaehr so breit - dort fuellt die Seite das Fenster. Auf einem 1600er oder 1920er Monitor steht dieselbe Spalte mittig in 300 bis 400px Leerraum je Seite; das Layout ist dasselbe, der Eindruck ein voellig anderer. ZWEI STUFEN STATT EINER FORMEL: 1280px ab 1500er Bildschirm, 1380px ab 1800. Stufen, weil jede von ihnen ein Ergebnis ist, das man ansehen und ablehnen kann - eine Formel (min(90vw, ...)) waere auf jeder Breite ein bisschen anders und auf keiner geprueft. DIE ZEILENLAENGE BLEIBT LESBAR: Die Ueberschriften decken bei 40 Zeichen, die Unterzeilen bei 46, die Textabsaetze bei 68. Vom zusaetzlichen Platz profitieren also die Raster - Kit-Karten, Kacheln, Geraetezeile -, nicht der Fliesstext. Genau darum geht es. DER KOPFBEREICH BLEIBT UNBERUEHRT: .hero.xl .wrap hat eine eigene Hoechstbreite von 690px, die staerker ist als diese Regel. Das ist Absicht - die 690 sind darauf berechnet, dass die Ueberschrift in zwei Zeilen bricht, ohne kleiner zu werden (siehe dort). */ @media(min-width:1500px){ :root{--seite-max:1280px} } @media(min-width:1800px){ :root{--seite-max:1380px} } /* HALBER SEITENABSTAND AUF ALLEN SEITEN (30.09.2026, Vorgabe Claras: "die Seitenabstaende nach links und rechts kleiner machen und dadurch den Text und alles mehr in die Breite strecken ... mindestens um die Haelfte geringerer Seitenabstand"). Zuerst galt es nur auf der Startseite - "wenns mir gefaellt, aendern wir es ueberall" -, und am selben Abend kam die Ansage: "die Seitenraender bei allen Seiten zu denen von der Startseite anpassen". GERECHNET STATT GERATEN: Der Rand je Seite ist (Fensterbreite - Inhaltsbreite) / 2. Soll er halb so gross werden, muss die Inhaltsbreite auf (Fenster + bisherige Inhaltsbreite) / 2 wachsen - das ist genau die Formel unten. Sie halbiert den Rand auf JEDER Fensterbreite, nicht nur auf der einen, fuer die man einen festen Wert ausprobiert haette. Was das heisst, in Zahlen (Rand je Seite, vorher -> nachher): 1280px Fenster: 70 -> 35 1920px Fenster: 270 -> 135 1440px Fenster: 150 -> 75 2560px Fenster: 590 -> 295 DREI STUFEN, WEIL ES DREI AUSGANGSWERTE GIBT: Die Inhaltsbreite ist selbst gestuft (1140, ab 1500 dann 1280, ab 1800 dann 1380). Die Formel muss jeweils von dem Wert ausgehen, der dort gilt - sonst waere der Rand an den Stufengrenzen nicht halbiert, sondern spraenge. ERST AB 769px: Darunter fuellt der Inhalt ohnehin die Breite, dort gibt es keinen Rand zu halbieren. JETZT AN :root UND DAMIT UEBERALL. Die damalige Klasse bwp-start am ist entfallen - die heutige bwp-mittig hat mit ihr nichts zu tun ausser dem Ort; sie schaltet den mittigen Abschnittstext. - ein Schalter, der nichts mehr schaltet, laedt beim naechsten Mal zu der Frage ein, was er eigentlich tut. SIE MUESSEN NACH DEN STUFEN OBEN STEHEN: Gleiche Staerke, also entscheidet die Reihenfolge. Umgekehrt gesetzt gaeben die festen 1280 bzw. 1380 den Ton an und die Rechnung liefe ins Leere. */ @media(min-width:769px){ :root{--seite-max:calc((100vw + 1140px) / 2)} } @media(min-width:1500px){ :root{--seite-max:calc((100vw + 1280px) / 2)} } @media(min-width:1800px){ :root{--seite-max:calc((100vw + 1380px) / 2)} } .wrap{max-width:var(--seite-max);margin:0 auto;padding:0 22px;transition:margin-right .3s cubic-bezier(.2,.8,.2,1),max-width .3s cubic-bezier(.2,.8,.2,1)} .m{font-family:var(--mono);font-variant-numeric:tabular-nums} .hidden{display:none!important} /* Eyebrows/Kicker in Messing (Brand Book: Glanzlicht) */ .kicker{font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--bernstein)} /* ---------- Topbar-Nav: horizontal scrollbarer Tab-Streifen (8 Tabs passen nicht auf 375px) ---------- */ .navwrap{position:relative;min-width:0;flex:1;overflow:hidden;margin:0 4px} .navwrap::before,.navwrap::after{content:"";position:absolute;top:0;bottom:0;width:22px;pointer-events:none;z-index:1} .navwrap::before{left:0;background:linear-gradient(90deg,var(--paper),transparent)} .navwrap::after{right:0;background:linear-gradient(270deg,var(--paper),transparent)} .nav{display:flex;gap:22px;font-size:14px;font-weight:700;overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:2px 14px} .nav::-webkit-scrollbar{display:none} .nav a{color:var(--muted);text-decoration:none;white-space:nowrap;scroll-snap-align:start;padding:2px 1px;border-bottom:2px solid transparent;transition:color .12s,border-color .12s} .nav a:hover{color:var(--ink)} .nav a.active{color:var(--gruen);border-color:var(--gruen)} /* --- UNTERMENUE IM REITER (15.09.2026) --------------------------------------- Der Reiter bleibt ein Link; beim Ueberfahren klappt darunter eine Liste der Abschnitte auf, zu denen die Seite Sprungmarken hat. Die beiden overflow-Regeln sind noetig, nicht Zierde: .navwrap schneidet ab (Verlaufskanten links/rechts), .nav ist waagerecht scrollbar. Beides wuerde die aufgeklappte Liste abschneiden, weil sie in deren Rahmen liegt. Nur solange ueberfahren wird, geben beide den Rand frei - :has() ist im Theme bereits im Einsatz (.buyline:has(.qtystep)). :focus-within haelt das Menue auch bei Tastaturbedienung offen. Auf Geraeten ohne Zeiger gibt es kein Ueberfahren; dort fuehrt der Reiter wie bisher direkt auf die Seite, und die Abschnitte stehen dort untereinander. */ .nav .navitem{position:relative;display:inline-flex;align-items:center} .navwrap:has(.navitem:hover),.navwrap:has(.navitem:focus-within), .nav:has(.navitem:hover),.nav:has(.navitem:focus-within){overflow:visible} .navsub{position:absolute;top:calc(100% + 10px);left:-14px;z-index:70; /* max-width seit dem 30.09.2026: Die Eintraege heissen jetzt wie die Ueberschriften, auf die sie zeigen ("Was du fuer die Foerderung nachweisen musst"). Ohne Deckel zoege der laengste das ganze Feld auf; mit Deckel bricht er auf zwei Zeilen um. */ display:none;flex-direction:column;min-width:210px;max-width:min(330px,80vw);padding:8px; background:var(--card);border:1px solid var(--line);border-radius:var(--radius); box-shadow:var(--shadow-lift)} .navitem:hover .navsub,.navitem:focus-within .navsub{display:flex} /* Ueberbrueckt die Luecke zwischen Reiter und Liste: ohne sie faellt das Menue zu, sobald der Zeiger die zehn Pixel dazwischen quert. */ .navsub::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px} .navsub a{display:block;padding:8px 10px;border-radius:var(--radius-s);border-bottom:none; color:var(--graphit);font-weight:700;white-space:normal} .navsub a:hover{background:var(--bernstein-tint);color:var(--ink)} @media(hover:none){.navsub{display:none!important}} /* ---------- Hero XL ---------- */ /* --hero-flucht STEHT AM KOPF UND NICHT AN DER TEXTSPALTE (30.09.2026): Die Kreise im Hintergrund sind ein ::before DES KOPFES. Waere der Wert nur an .wrap deklariert, kaemen sie nicht daran - benachbarte Elemente erben nichts voneinander. So lesen ihn beide. */ .hero.xl{display:flex;align-items:stretch;padding:0;position:relative;overflow:hidden; --hero-flucht:max(22px, calc(50vw - var(--seite-max) / 2 + 22px))} .hero.xl[hidden]{display:none} /* DIE KREISE RUECKEN MIT DEM TEXT NACH RECHTS (30.09.2026, Vorgabe Claras: "kannst du im Header diese Kreise, die im Hintergrund sind, auch bisschen nach rechts schieben"). SIE FOLGEN DERSELBEN FLUCHT wie die Schrift, nur zur Haelfte: Der Text ist heute an den Seitenrand der Inhaltsspalte gerueckt, die Kreise standen noch an der alten Stelle und lagen damit links neben ihm statt hinter ihm. Ganz mitzugehen waere zu viel - sie sind Hintergrund und sollen den Text umspielen, nicht ihm nachlaufen; bei halbem Weg bleibt der Bogen links angeschnitten, was er auch vorher war. AN DIE FLUCHT GEHAENGT UND NICHT AUF EINEN NEUEN WERT GESETZT: Verschiebt sich die Spalte noch einmal - etwa weil die Inhaltsbreite auf breiten Schirmen wieder anders gestuft wird -, wandern die Kreise von selbst mit. */ .hero.xl::before{content:"";position:absolute;top:-32%;left:calc(-16% + var(--hero-flucht) * 0.5);width:640px;height:640px;border-radius:50%;background:repeating-radial-gradient(circle at center,transparent 0 17px,rgba(43,33,26,.04) 17px 19px);pointer-events:none;z-index:0} /* 690px STATT 580px (21.09.2026). Die Ueberschrift soll in zwei Zeilen stehen UND ihre Groesse behalten (Vorgabe). Beides zusammen geht nur ueber die Spaltenbreite: Bei 44px braucht "Waermepumpe selbst einbauen:" 602px (13,68 em, gemessen an der Schriftdatei), die Spalte bot mit 580px abzueglich 72px Polsterung aber nur 508px - also brach die erste Zeile um, und es wurden drei. 690px lassen 618px Inhalt, mithin 16px Luft fuer die Ersatzschrift, solange Urbanist noch laedt. Bezahlt wird das vom Bild rechts: Es traegt flex:1 1 30% und bekommt bei gleicher Bildschirmbreite rund 110px weniger. Bei 1440px bleiben ihm noch etwa 750px, das Motiv ist beschnitten (object-fit:cover) und vertraegt das. max-width UND flex-basis, sonst waechst die Spalte zwar, startet aber weiter bei 580px und teilt den freien Platz mit dem Bild - die Breite haenge dann am Zufall der Bildschirmgroesse statt an dem, was die Zeile braucht. */ /* ENGER GESETZT, DAMIT DER KNOPF FRUEHER KOMMT (Vorgabe 22.09.2026: "die einzelnen Textkomponenten ein bisschen enger, sodass der Button deutlicher auf dem Header zu sehen ist"). Gekuerzt wurden allein die ABSTAENDE zwischen Ueberschrift, Vorspann, USP-Liste und Knopfreihe - zusammen rund 78px, um die der Knopf hochrueckt (zweiter Durchgang am 22.09.2026: "noch ein bisschen enger"). DER ZEILENABSTAND DER UEBERSCHRIFT BLEIBT BEI 1.2 und ist KEIN Sparpotenzial mehr: Er steht dort nicht aus Geschmack, sondern weil sich sonst die gelbe Markerflaeche der zweiten Zeile ueber die Unterlaengen der ersten legt - nachzulesen am Kommentar bei .h1-accent, wo genau dieser Fehler schon einmal behoben wurde. KEINE SCHRIFTGROESSE ANGEFASST: Dass die Ueberschrift ihre 44px behaelt und zweizeilig bleibt, ist eine eigene Vorgabe vom 21.09.2026 - und der Umbruch haengt an genau diesem Wert (Rechnung im Kommentar an .hero.xl h1). Kleiner setzen waere der bequeme, aber falsche Hebel gewesen. ALLE UEBERSCHREIBUNGEN TRAGEN .hero.xl: Die Grundwerte in .hero h1 / .hero-usps / .hero-cta-row gelten auch fuer die Kopfbereiche der Unterseiten. Dort war nichts zu eng, und dort steht auch kein Knopf, der hochrutschen soll. */ .hero.xl .wrap{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;text-align:left;max-width:690px;width:100%;flex:1 1 690px;padding:26px 32px 26px 40px;row-gap:40px;justify-content:center;margin:0} /* DIE SCHRIFT IM KOPF STEHT AUF DERSELBEN SENKRECHTEN FLUCHT WIE DER REST DER SEITE (30.09.2026, Vorgabe Claras: "die Schrift links auf die gleiche vertikale Hoehe setzen wie die anderen Elemente auf der Seite"). WAS DAS PROBLEM WAR: Der Kopfbereich ist randlos - er beginnt am Bildschirmrand, seine Textspalte hatte 40px Polsterung. Alles darunter steht dagegen in .wrap, also in einer mittig gesetzten Spalte von hoechstens --seite-max plus 22px Rand. Auf einem breiten Bildschirm liegen dazwischen mehrere hundert Pixel: Die Ueberschrift "Waermepumpe selbst einbauen" begann weit links von "Warum jetzt selbst bauen" darunter. DIE POLSTERUNG IST JETZT DER SEITENRAND SELBST: max(22px, 50vw - haelfte der Spalte + 22px) ist genau der Abstand, den .wrap von der linken Kante haelt. DIE UNTERGRENZE IST 22px UND NICHT MEHR 40 (berichtigt am 30.09.2026 auf Claras Frage "ist das ueberall rechts und links jetzt der gleiche Abstand?"). Nachgemessen war es das ab etwa 1280px Fensterbreite - darunter griff die alte Untergrenze von 40px, waehrend der uebrige Inhalt naeher an der Kante stand: auf einem iPad mit 1194px 40 gegen 35,5. Jetzt ist 22px der Wert, den .wrap als Polsterung ohnehin traegt - damit koennen die beiden auf keiner Breite mehr auseinanderlaufen. DIE TEXTBREITE BLEIBT DAVON UNBERUEHRT: Die Spalte rechnet 690px + Flucht - 40px, und die Flucht wird gleich wieder abgezogen - innen bleiben 618px, welche Untergrenze auch immer gilt. Dieselbe Rechnung steht schon weiter unten fuer die seitlich scrollende Reihe - eine zweite Formel fuer denselben Rand liefe beim naechsten Wert auseinander. DIE SPALTE WAECHST UM GENAU DIESEN BETRAG MIT. Ohne das waere die Textbreite geschrumpft, und die 690px sind kein runder Wert, sondern eine Rechnung: 690 minus 72px Polsterung sind 618px, und "Waermepumpe selbst einbauen:" braucht bei 44px genau 602px. Waere die Spalte enger geworden, braeche die Ueberschrift wieder in drei Zeilen - der Fehler, der am 21.09.2026 behoben wurde. DIE DIMENSIONEN DES KOPFES BLEIBEN, WIE SIE SIND (Claras Zusatz: "uebernimm nicht die Dimension der anderen Seiten"). Der Kopf behaelt seine Hoehe, sein randloses Bild und seine Textbreite - er rueckt nur an die Flucht. UNTER 992px AENDERT SICH NICHTS: Dort steht der Text ohnehin mittig ueber die volle Breite, und die Regeln weiter unten setzen Polsterung und Breite neu. */ .hero.xl .wrap{ padding-left: var(--hero-flucht); max-width: calc(690px + var(--hero-flucht) - 40px); flex-basis: calc(690px + var(--hero-flucht) - 40px); } /* row-gap AUSDRUECKLICH GESETZT (22.09.2026: "den ganzen Header ein bisschen verkleinern"). .hero .wrap weiter unten ist ein RASTER mit gap:64px - die Regel hier stellt auf eine Flex-Spalte um, uebernimmt den Wert dabei aber stillschweigend. Zwischen Ueberschrift, Vorspann, USP-Liste, Knopfreihe und Zahlarten standen also viermal 64px, und daran lag die Hoehe des Hero - nicht an den Raendern, an denen die beiden Durchgaenge davor gedreht haben. Jetzt 40px, das sind rund 96px weniger. WER DEN WERT SUCHT, findet ihn ab jetzt hier und nicht mehr 600 Zeilen weiter unten in einer Regel, die dem Namen nach das Raster des alten Hero beschreibt. */ /* GROESSE UNVERAENDERT (Vorgabe 21.09.2026: "lass die bitte so gross wie vorher auch schon, aber halt in 2 Zeilen"). Eine Zwischenfassung hatte hier 36px stehen - das war der falsche Hebel: Nicht die Schrift war zu gross, die Spalte war zu schmal. Sie ist jetzt 690px breit, siehe .hero.xl .wrap darueber, und traegt die 44px. WER DIE UEBERSCHRIFT AENDERT, muss gegenrechnen: Die Spalte bietet 618px Inhalt, und "Waermepumpe selbst einbauen:" braucht bei 44px 602px - das sind rund 27 Zeichen. Eine laengere erste Zeile bricht um, und es sind wieder drei Zeilen. Gemessen wird in em an der Schriftdatei (Urbanist 800, letter-spacing -.025em: 13,68 em fuer diesen Satz), nicht nach Augenmass. AUF TELEFONEN SIND ES DREI ZEILEN. Unter 860px steht der Hero einspaltig, die Spalte ist dann nur so breit wie das Geraet minus 44px Polsterung - auf einem 390px-Telefon also 346px, waehrend die erste Zeile bei den unveraenderten 30px 410px braucht. Zwei Zeilen gaebe es dort nur mit rund 25px, und das ist ausdruecklich NICHT gewollt. */ /* DIESELBE GROESSENSTUFE WIE DIE TITEL DER UNTERSEITEN (Vorgabe 22.09.2026). Die trugen clamp(28px,4.4vw,46px) - hier standen 3,6vw, und genau der Unterschied war zu sehen: Auf einem 1000px-Fenster stand die Startseite bei 36px, jede Unterseite bei 44. Bei ganz breiten Schirmen fiel es nicht auf, weil beide an ihrer Obergrenze liefen. DER DECKEL BLEIBT BEI 44px UND NICHT 46. Die 46 der Unterseiten waeren hier eine Zeile zu viel: "Waermepumpe selbst einbauen:" braucht 13,68 mal die Schriftgroesse, also 629px bei 46 - die Textspalte hat 618. Die Ueberschrift stuende wieder dreizeilig, und dass sie zweizeilig ist, war eine eigene Vorgabe von heute. Zwei Pixel Unterschied auf sehr breiten Schirmen sind der Preis dafuer; auf allem darunter sind beide gleich gross. */ .hero.xl h1{font-size:clamp(28px,4.4vw,44px);margin-top:0} /* Erster Teil und Akzent stehen je auf einer eigenen Zeile - siehe die Begruendung im Markup von sections/billigerwaermepumpe-hero.liquid. Ohne den Block entschiede allein die Spaltenbreite, wo umbrochen wird, und die Teilung saesse mitten im Satz. */ .hero h1 .h1-zeile{display:block} .hero.xl .lead{margin:6px 0 0;max-width:38ch;font-size:clamp(15px,1.3vw,17.5px)} /* Nur die Aussenabstaende, NICHT der gap: Ab 900px steht die Liste in einer Reihe und traegt dort 26px Spaltenabstand - ein pauschales gap haette den mitgenommen. */ .hero.xl .hero-usps{margin:6px 0 0} .hero-eyebrow{display:block;font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--gruen)} .hero-cta-row{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-top:20px} .hero.xl .hero-cta-row{margin-top:10px} /* CTA-Logik Pfad B2: Gelb-Flaeche mit Ink-Vollkontur statt duenner Unterrand-Linie, Text Ink — Gelb als Textfarbe waere auf hellem Grund unlesbar */ .cta-xl{display:inline-block;font-family:var(--font);font-weight:800;font-size:19px;background:var(--rost);color:var(--ink);border:2px solid var(--ink);border-radius:var(--radius);padding:16px 34px;cursor:pointer;margin-top:0;transition:background .12s,transform .1s;box-shadow:var(--shadow-lift)} .cta-xl:hover{background:var(--rost-dark)} .cta-xl:active{transform:scale(.98)} /* AUF SCHMALEN SCHIRMEN IN EINE ZEILE (28.09.2026, Vorgabe Claras: "bei Mobil bitte den Text des Buttons in eine Zeile"). "Jetzt passendes Kit berechnen" ist seit heute frueh der Text - 31 Zeichen statt der 21 von "Jetzt selbst bauen". Bei 19px und Schriftschnitt 800 braucht er mit den 34px Polsterung je Seite rund 374px; auf einem 390er Schirm stehen nach Abzug der Spaltenraender 346 zur Verfuegung. Der Knopf brach also um, und in der zweiten Zeile stand ein Wort. SCHRIFT UND POLSTERUNG ZUSAMMEN: Nur die Schrift zu verkleinern haette den Knopf schmaeler gemacht, aber die 68px Polsterung blieben - das ist ein Fuenftel der verfuegbaren Breite. KEIN white-space:nowrap: Der Text ist ein Feld im Editor. Ein laengerer soll umbrechen duerfen, statt den Knopf aus der Spalte laufen zu lassen. */ @media(max-width:576px){ .cta-xl{font-size:clamp(14.5px,4.3vw,17px);padding:15px 20px} } .cta-secondary{font-family:var(--font);font-weight:700;font-size:14.5px;color:var(--graphit);background:none;border:none;cursor:pointer;padding:4px 2px;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:4px} .cta-secondary:hover{color:var(--ink);text-decoration-color:var(--gruen)} .hero.xl .pricechips{justify-content:flex-start;margin-top:22px} .hero.xl .heroimg{position:relative;flex:1 1 30%;align-self:stretch;min-height:330px;overflow:hidden} /* AUSSCHNITT TIEFER ANGESETZT (22.09.2026: "das Bild bisschen hochschieben, sodass die komplette WP sichtbar ist"). Das Bild ist 2000x1116, die Waermepumpe steht darin zwischen 24% und 86% der Hoehe. Solange die Bildspalte hoch und schmal war, wurde gar nicht senkrecht beschnitten - mit dem kuerzeren Hero wird die Spalte breiter als das Bildverhaeltnis, und ab da schneidet cover oben und unten weg. Bei 45% fielen die Fuesse heraus; 64% legt das Fenster auf rund 20-88% und haelt das Geraet komplett darin. Wer den Hero weiter kuerzt, muss hier gegenrechnen. */ /* DER UEBERGANG ZWISCHEN BILD UND HINTERGRUND IST DERSELBE WIE AUF DEN UNTERSEITEN (30.09.2026). Clara zuerst: "die Ueberlappung ... ein bisschen weiter nach rechts, sodass es gerade nicht mittig ist" - daraus wurden 45%. Dann: "noch weiter, bitte genauso weit wie auch bei den anderen Seiten im Header." DIESER VERLAUF GILT NUR HIER, im Kopf der Startseite (berichtigt am 30.09.2026: "nicht ueberall die letzten 3 Aenderungen machen, sondern nur auf der Startseite"). Die Kopfbaender der Unterseiten (.sb-bild img) stehen wieder auf ihrem alten 38% / 72% - siehe dort. DER VERLAUF HAT DREI MARKEN, und erst seit dem 30.09.2026 abends sind es drei: 0 ganz durchsichtig - hier ist nur Hintergrund zu sehen 10% IMMER NOCH ganz durchsichtig: bis hierhin bleibt die Flaeche voellig frei 34% halbdeckend - der Uebergang selbst 60% ganz deckend - ab hier steht das Bild DIE ZWEITE MARKE IST DER KERN DER LETZTEN AENDERUNG (Vorgabe Claras: "es ist nicht nur der Uebergang, sondern auch das, wo das Weisse komplett weiss ist, soll weiter nach rechts ruecken - also der Anfang von dem Uebergang weiter nach rechts"). Vorher begann das Bild schon an der linken Kante durchzuscheinen, weil direkt hinter "transparent 0" die naechste Marke kam. Jetzt bleiben die ersten 30 % voellig frei, und erst dann setzt der Uebergang ein. DER WERT IST AN EINEM ABEND MEHRFACH GEWANDERT: 14 / 52 Ausgangsstand, und die beiden Masken widersprachen sich (siehe unten) 22 / 45 "ein bisschen weiter nach rechts, sodass es gerade nicht mittig ist" 38 / 72 "genauso weit wie auch bei den anderen Seiten im Header" 50 / 85 "den Uebergang noch weiter nach rechts" 30 / 60 / 88 "auch der Anfang vom Uebergang weiter nach rechts" 15 / 55 / 86 "nicht so weit, wieder die Haelfte zurueck" 10 / 34 / 60 "wieder mehr nach links und den Uebergang etwas schmaler" <- jetzt ZWEI DINGE AUF EINMAL, und sie sind auseinanderzuhalten: WO er liegt - alle drei Marken zusammen nach links (15->10, 55->34, 86->60). WIE BREIT er ist - der Abstand zwischen erster und letzter Marke. Er ist von 71 auf 50 Prozentpunkte gefallen; das ist der "schmalere" Teil. Haette man nur alles nach links geschoben, waere der Verlauf genauso weich geblieben, nur weiter vorn. Frueher stand hier, die halbe Ruecknahme sei woertlich die Haelfte gewesen: jede Marke in der Mitte zwischen 0/50/85 und 30/60/88. Das gilt fuer jenen Schritt weiter. GROESSERE ZAHLEN HEISSEN WEITER RECHTS. Wer weiter drehen will, aendert diese Marken hier - und NUR hier, denn die Unterseiten haben seit der Trennung ihren eigenen Verlauf. (Ein Zwischenstand mit 20 / 48 ging versehentlich nach links - Claras Ansage kam als "links", eine Minute spaeter berichtigt auf "rechts". Er war nie im Theme.) Eine eigene Zahl haette denselben Uebergang zweimal beschrieben und waere beim naechsten Nachjustieren auseinandergelaufen. Wer ihn aendert, aendert ihn an beiden Stellen - das steht auch dort. BEIDE MASKEN TRAGEN JETZT DENSELBEN VERLAUF, und das war ueberfaellig: mask-image endete bei 14%, -webkit-mask-image bei 52%. Moderne Browser lesen die erste, aeltere Safari die zweite - dasselbe Bild verlief also je nach Browser ueber ein Siebtel oder ueber die halbe Breite. Wer an einer der beiden Zahlen drehte, aenderte es nur fuer die Haelfte der Besucher. */ /* DER AUSSCHNITT DER ZWEISPALTIGEN FASSUNG (58% 64% bis zum 15.10.2026) zeigt seitdem auf das neue Motiv: 73 Prozent waagerecht ist die Mitte der Waermepumpe, 62 senkrecht. Diese Regel ist heute der Rueckfall - die Fassung mit dem Bild ueber die ganze Flaeche ueberschreibt sie im @media screen weiter unten. Sie bleibt trotzdem richtig gestellt: Wer die vollflaechige Fassung je zuruecknimmt, bekommt sonst wieder das alte Fenster. */ .hero.xl .heroimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:73% 62%;display:block;-webkit-mask-image:linear-gradient(to right,transparent 0,transparent 10%,rgba(0,0,0,.65) 34%,#000 60%);mask-image:linear-gradient(to right,transparent 0,transparent 10%,rgba(0,0,0,.65) 34%,#000 60%)} /* ================= KOPF DER STARTSEITE: BILD UEBER DIE GANZE FLAECHE, TEXT MITTIG DARAUF (02.10.2026, Vorgabe Claras: "kannst du auf dem Header auf der Startseite den gerade linksbuendigen Text und Ueberschriften bitte mittig machen und dafuer das Bild, das gerade rechtsbuendig ist, komplett ueber den Header ziehen"). DAS IST DIE ZWEITE ANNAEHERUNG AN DIESE FORM. Am 30.09.2026 gab es schon einmal einen mittigen Kopf nach einem klekks-Bildschirmfoto; er ist auf Claras Wunsch zurueckgenommen worden ("kannst du alles wieder so setzen, wie es war, bevor ich den Screenshot geschickt habe"). Was damals schiefging, war nicht die Mitte, sondern dass ich Inhalte weggelassen und auf weisse Schrift auf dunklem Grund umgestellt hatte. Deshalb hier: dieselben Inhalte, dieselben Farben, nur die Anordnung ist neu. DER UMBAU IN DREI SCHRITTEN: 1. Die Bildspalte wird zur Flaeche. Aus einem Flex-Kind von 30% Breite wird eine absolut gesetzte Ebene ueber dem ganzen Kopf (inset:0). Der weiche Uebergang nach links (mask-image) faellt weg - er hatte genau die Aufgabe, die Kante zwischen Bild und Hintergrund zu verwischen, und es gibt keine Kante mehr. 2. Darueber liegt ein heller Schleier. Die Schrift ist dunkel (--ink) und bleibt es; ohne Schleier staende sie auf einem Foto mit hellen und dunklen Stellen, und an den dunklen waere sie nicht mehr zu lesen. Oben etwas dichter als unten, weil dort die Ueberschrift sitzt. 3. Die Textspalte wird mittig und bekommt senkrechte Polsterung. Sie trug ihre Hoehe bisher nicht selbst - die kam von der Bildspalte (min-height:330px). Mit absolutem Bild gibt es die nicht mehr, und ohne Polsterung waere der Kopf auf Texthoehe zusammengefallen. SEIT DEM 02.10.2026 FUER ALLE BREITEN (Vorgabe Claras: "bei Mobile hast du die Neuerungen noch nicht uebernommen. Dort moechte ich gerne, dass das Bild auch der Hintergrund ist im Header und nicht die Kreise"). Zuerst galt das hier nur ab 993px, weil auf dem Telefon das Bild UNTER dem Text stand und unter 576px gar nicht erschien - eine eigene, aeltere Bauform. Die ist damit abgeloest: Auch dort liegt das Foto jetzt hinter dem Text, mit demselben schwarzen Schleier, derselben weissen Schrift und ohne die Ringe. @media screen STATT min-width: Der Block behaelt damit seine Einrueckung und seine Kommentare, und es ist auf einen Blick zu sehen, dass er ueberall gilt. Was auf schmalen Schirmen anders sein muss - Polsterung, mittige Ausrichtung - steht wie bisher in der Regel fuer max-width:992px weiter unten. DIE KREISE IM HINTERGRUND VERSCHWINDEN DAMIT (.hero.xl::before). Sie liegen auf derselben Ebene wie das Bild und im Markup davor, werden also davon verdeckt. Das ist richtig so: Sie waren eine Textur fuer eine leere Flaeche, und die gibt es hier nicht mehr. Unter 993px stehen sie unveraendert. */ @media screen{ .hero.xl{display:block;position:relative;overflow:hidden} /* overflow:hidden schneidet den Ueberstand des unscharfen Streifens weg - er ragt absichtlich ueber beide Raender hinaus, siehe unten. */ .hero.xl .heroimg{position:absolute;inset:0;width:100%;height:100%;flex:none;min-height:0;z-index:0;overflow:hidden} /* DER KOPF NIMMT DAS SEITENVERHAELTNIS DES FOTOS AN - DAMIT IST ES GANZ ZU SEHEN (02.10.2026, Vorgabe Claras: "nicht diesen Bildausschnitt, das ist viel zu nah rangezoomt, das komplette Bild soll schon dargestellt werden ... wenn rechteckig, wird es zu quadratisch, hier wird nur rechts und links von dem Bild was genommen und nicht von oben und unten", mit Verweis auf klekks.com/collections/shop). WAS ICH VORHER FALSCH GEMACHT HATTE: Auf die Vorgabe "das Bild soll nicht groesser oder kleiner werden" hatte ich eine feste Bildbreite von 2200px gesetzt. Das Foto behielt damit zwar seine Groesse, aber der Rahmen zeigte nur noch den mittleren Ausschnitt davon - bei 1400px Fensterbreite knapp zwei Drittel. Genau das ist das "viel zu nah rangezoomt". DER WIRKLICHE HEBEL IST DIE HOEHE DES KOPFES, nicht die Groesse des Bildes. Das Foto ist 2000x1116, also 1,79:1. Ist der Kopf genauso proportioniert, deckt das Bild ihn exakt ab - ohne Beschnitt, in keiner Richtung. min-height:100vw/1.792 stellt genau das her, und zwar auf jeder Breite: Das Fenster wird schmaler, der Kopf wird flacher, das Bild bleibt vollstaendig. GEDECKELT BEI 90svh, damit der Kopf auf einem sehr breiten Schirm nicht hoeher wird als das Fenster. Nur dort - und nur dann - schneidet cover wieder oben und unten etwas weg; mittig angesetzt (50 % statt der frueheren 52 %), damit es sich gleichmaessig verteilt. STRENG NUR LINKS UND RECHTS ZU BESCHNEIDEN, wie im Vorbild, ginge nur um den Preis einer der beiden folgenden Seiten: entweder seitliche Luecken, sobald das Fenster breiter wird als das Bild bei dieser Hoehe, oder ein Kopf, der auf einem 1920er-Schirm ueber 1000px hoch waere. Dieser Weg gibt Clara, worauf es ihr ankam - das ganze Bild - ohne eines von beiden. */ /* DAS MOTIV RUECKT NACH RECHTS, INDEM RECHTS ETWAS WEGFAELLT (02.10.2026, vierter und letzter Anlauf - die Begruendung steht ausfuehrlich in der Section). DREI VERSUCHE, DIE FLAECHE LINKS ZU FUELLEN, SIND VERWORFEN WORDEN: gespiegelt ("man erkennt, dass du die Bilder einfach nur nebeneinander gesetzt hast"), weichgezeichnet ("das einfach nur verschwimmen zu machen ist auch nicht die Loesung") und die gedehnte Bildkante ("das neue ist nicht verschwommen oder verwischt, sondern ganz normal auch ein Bild"). Alle drei scheitern an derselben Sache: Ein Stylesheet kann keinen Bildinhalt erfinden. Was links erscheint, ist immer aus dem Vorhandenen abgeleitet. DESHALB OHNE ERWEITERUNG. Der Kopf ist um --hero-ueber Prozent HOEHER, als das Seitenverhaeltnis des Fotos verlangt; das Foto steht in voller Hoehe darin und ragt damit rechts hinaus. Sichtbar ist sein linker Teil - und weil der Ausschnitt schmaler ist als das Foto, sitzt das Motiv darin weiter rechts. OBEN UND UNTEN FAELLT NICHTS WEG, genau wie Clara es am Vorbild beschrieben hat: height:100% legt die volle Bildhoehe in den Kopf, width:auto laesst die Breite folgen. object-fit:cover UND min-width:100% SIND DAS NETZ: Greift die Hoehendeckelung von 90svh (sehr breites, flaches Fenster), waere das Foto schmaler als der Kopf und es klaffte rechts. Dann - und nur dann - fuellt cover die Flaeche und schneidet oben und unten. */ .hero.xl{min-height:min(calc(100vw * (100 + var(--hero-ueber,0)) / 100 / var(--hero-ratio,1.792)), 90svh)} /* RECHTS VERANKERT STATT LINKS (15.10.2026, Vorgabe Claras: "beim Header-Bild auf der Startseite das bitte auch wieder responsiv - das Bild war schon responsiv, dann habe ich es aber ausgetauscht, deswegen pass die alten Einstellungen wieder an das neue Bild an"). WAS SICH MIT DEM BILD GEAENDERT HAT, IST DIE LAGE DES MOTIVS. Nachgemessen am neuen Foto (Gemini_Generated_Image..., 1376 x 768): Die Waermepumpe steht zwischen 62 und 84 Prozent der Bildbreite, ihre Mitte bei 73 - also rechts. Im alten Bild stand sie mittig, und darauf war left:0 abgestimmt: Wird das Foto bei gedeckelter Hoehe breiter als der Kopf, faellt der Ueberhang auf der ANDEREN Seite weg. Links verankert heisst, rechts wird abgeschnitten - und das ist beim neuen Bild genau das Geraet. DAS SEITENVERHAELTNIS MUSSTE NICHT NACHGEZOGEN WERDEN: --hero-ratio kommt aus dem Bild selbst (aspect_ratio in der Section), und das neue traegt 1,7917 gegen 1,7921 des alten. Die Hoehe des Kopfes stimmte also weiter - deshalb sah es "fast richtig" aus, und nur das Geraet fehlte am Rand. */ .hero.xl .heroimg img{position:absolute;top:0;right:0;left:auto;transform:none; height:100%;width:auto;min-width:100%;max-width:none; object-fit:cover;object-position:right center; -webkit-mask-image:none;mask-image:none} pointer-events:none} /* DER SCHLEIER IST IM EDITOR REGELBAR (02.10.2026, Vorgabe Claras: "mach das Bild im Header mehr sichtbar, und lass mich das im Editor bearbeiten"). DIE BEIDEN WERTE KOMMEN AUS DER SECTION, als --hero-schleier-oben/-unten am
. Die Rueckfallwerte hier gelten nur, falls die Section sie einmal nicht mitgibt - dann steht der Kopf so da wie am Vormittag des 02.10.2026, und nicht ohne Schleier mit unlesbarer Schrift. OBEN DICHTER ALS UNTEN: Oben sitzt die Ueberschrift, unten nur noch die Knopfreihe. Den Abstand von 16 Punkten zwischen beiden haelt die Section; hier stehen nur die Variablen. SCHWARZ STATT HELL (02.10.2026, Vorgabe Claras: "das Transparente im Header beim Bild mach das bitte nicht mit der weissen Ueberlagerung, sondern mit einer schwarzen"). DAS DREHT DIE SCHRIFT MIT, und das ist keine eigenmaechtige Zugabe, sondern die Bedingung dafuer, dass die Vorgabe ueberhaupt funktioniert: Dunkle Schrift auf dunklem Schleier ist nicht lesbar. Ueberschrift, Vorspann, Hakenliste, Nebenverweis und die Zahlart-Zeile stehen deshalb in Weiss - aber NUR hier im Kopf und nur ab 993px. WAS SEINE EIGENE FLAECHE HAT, BLEIBT WIE ES IST: der gelbe Marker in der Ueberschrift, der Preis im Vorspann und der grosse Knopf stehen auf Rost mit dunkler Schrift. Sie waren vorher lesbar und sind es jetzt erst recht - ein zweites Mal umzufaerben haette den Kopf von der uebrigen Seite abgeschnitten. DIE HAKEN WERDEN HELL: --gruen ist trotz seines Namens ein dunkles Braun (#6B4A34) und auf schwarzem Grund praktisch unsichtbar. DIE VORGABE DES REGLERS STEIGT AUF 45 %: Schwarz deckt staerker als der helle Papierton - bei 20 % Sichtbarkeit waere vom Foto fast nichts mehr uebrig. */ .hero.xl .heroimg::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(to bottom, rgba(0,0,0,var(--hero-schleier-oben,.60)), rgba(0,0,0,var(--hero-schleier-unten,.44)))} .hero.xl .wrap, .hero.xl h1, .hero.xl .hero-usps li{color:#fff} .hero.xl .lead{color:rgba(255,255,255,.93)} .hero.xl .lead s{color:rgba(255,255,255,.62);text-decoration-color:rgba(255,255,255,.55)} .hero.xl .hero-usps .fb-icon{color:#F0E4CC} .hero.xl .cta-secondary{color:rgba(255,255,255,.90);text-decoration-color:rgba(255,255,255,.45)} .hero.xl .cta-secondary:hover{color:#fff;text-decoration-color:#fff} .hero.xl .hero-pay-text{color:rgba(255,255,255,.78)} /* DER TEXT STEHT WIEDER LINKS (02.10.2026, Vorgabe Claras: "kannst du den Text im Header bitte wieder linksbuendig machen"). Er stand seit heute Mittag mittig - das Bild ueber der ganzen Flaeche, der schwarze Schleier und die weisse Schrift bleiben davon unberuehrt. ER STEHT AUF DER FLUCHT DER SEITE, nicht am Bildschirmrand: Die Textspalte ist die Seitenspalte (--seite-max, mittig, 22px Polsterung), nur ihr Inhalt richtet sich links aus. Damit beginnt die Ueberschrift genau dort, wo "Warum jetzt selbst bauen" darunter beginnt - Claras Vorgabe vom 30.09.2026, die den alten --hero-flucht-Rechenweg ueberfluessig macht: Die Spalte IST jetzt die Flucht. DIE UEBERSCHRIFT BEHAELT IHRE 618px. Das ist kein runder Wert, sondern der alte Innenraum der Textspalte (690px minus 72px Polsterung), und an ihm haengt der Zweizeiler: "Waermepumpe selbst einbauen:" braucht bei 44px rund 602px. Ohne die Deckelung liefe die Zeile in der nun viel breiteren Spalte durch und der Kopf saehe voellig anders aus. */ .hero.xl .wrap{position:relative;z-index:2;align-items:flex-start;text-align:left; flex:none;width:100%;max-width:var(--seite-max);margin:0 auto; padding:clamp(56px,6.5vw,92px) 22px} .hero.xl h1{max-width:618px;margin-left:0;margin-right:0} .hero.xl .lead{margin-left:0;margin-right:0} .hero.xl .hero-usps{width:auto;max-width:100%;margin-left:0;margin-right:0; flex-direction:row;flex-wrap:wrap;justify-content:flex-start;gap:10px 26px;text-align:left} .hero.xl .hero-cta-row{align-items:flex-start} .hero.xl .hero-payblock{display:flex;flex-direction:column;align-items:flex-start} /* HIER STANDEN DIE RINGE, ZWEIMAL AN EINEM TAG (02.10.2026). Erst waren sie verschwunden, als das Bild die ganze Flaeche uebernahm - beide lagen auf z-index 0, und was im Markup spaeter kommt, liegt obenauf. Dann kamen sie auf Vorgabe zurueck ("kannst du nur diese Kreise bitte auch rechts ueber das Bild legen, aber zwischen Bild und Text"): rechts statt links, hell statt dunkel, auf z-index 1. Eine knappe Stunde spaeter: "mach die Kreise wieder weg." JETZT AUSDRUECKLICH AUSGEBLENDET STATT NUR NICHT UEBERSCHRIEBEN. Ohne diese Zeile laegen sie wieder auf z-index 0 und waeren zufaellig unsichtbar, weil das Bild davor liegt - ein Zustand, der beim naechsten Umbau an der Reihenfolge unbemerkt wieder auftaucht. So steht da, dass sie nicht sollen. UNTER 993px BLEIBEN SIE: Dort liegt das Bild nicht ueber der Flaeche, sondern darunter, und die Ringe stehen auf dem leeren Papierton wie seit jeher. Claras Vorgabe galt dem Kopf, den sie vor sich hat. */ .hero.xl::before{display:none} } /* Kleingedrucktes zum Preis - kleine Zeile direkt unter den Zahlarten. Beide sitzen in .hero-payblock, damit die Zeilenluecke von .wrap (40px) nur EINMAL vor dem Block greift und nicht noch einmal zwischen Zeichen und Fussnote. Klein und zurueckgenommen: 11.5px, var(--muted). Bewusst die Token-Farbe statt opacity, damit der Kontrast berechenbar bleibt und nicht vom Untergrund abhaengt. */ /* Die Zahlarten sollen naeher an die Knoepfe ("den Hinweis 'sicher bezahlen...' vielleicht noch was nach oben setzen"). In einer Flex-Spalte laesst sich der Abstand nicht fuer ein einzelnes Kind kleiner stellen - row-gap gilt fuer alle. Der negative Rand zieht darum genau diesen einen Block um 14px an die Knopfreihe heran, ohne die Abstaende darueber anzufassen. */ .hero.xl .hero-payblock{margin-top:-14px} .hero-payblock{width:100%} /* DIE PREIS-FUSSNOTE STEHT SEIT DEM 28.09.2026 AM SEITENENDE, nicht mehr im Kopf (Vorgabe). Die alten .hero-*-Regeln bleiben stehen, solange der Block zurueckkehren koennte; getragen wird die Darstellung jetzt von .preishinweis. KEIN EIGENES BAND, NUR EIN ABSTAND: Der Abschnitt hat keine eigene Farbe und keine Linie - er haengt an den Fragen darueber und soll wie deren Nachsatz lesen, nicht wie ein weiterer Abschnitt. Oben wenig Luft, unten so viel, dass er nicht am Footer klebt. */ /* WEISS WIE DER FRAGENBLOCK DARUEBER (02.10.2026, Vorgabe Claras: "Preisfussnote bitte auch weisser Hintergrund"). Die Fussnote ist der Nachsatz zu den Fragen und steht unmittelbar darunter; seit die Fragen auf den meisten Seiten weiss sind, saesse sie sonst als beiger Streifen zwischen weissem Block und Footer. SIE FOLGT DEM FRAGENBLOCK AUCH IN DER AUSNAHME: Auf der Ablaufseite ist der beige (weil der Abschnitt davor weiss ist), und dann ist es auch die Fussnote. Dieselbe Kennung-Regel wie dort - zwei verschiedene Herleitungen fuer dieselbe Kante liefen beim naechsten Umbau auseinander. */ .preishinweis{padding:0 0 44px;background:#fff} #shopify-section-billigerwaermepumpe-ablauf-cta + .shopify-section section.land.seitenfaq + .preishinweis, .shopify-section:has(> section.land.ablauf-cta) + .shopify-section .preishinweis{background:var(--paper)} .preis-fussnote{margin:0;max-width:78ch;font-size:11.5px;line-height:1.5;color:var(--muted);text-wrap:pretty} @media(max-width:768px){ .preishinweis{padding-bottom:34px} .preis-fussnote{max-width:100%} } .hero-fussnote{margin:10px 0 0;max-width:52ch;font-size:11.5px;line-height:1.5;color:var(--muted);text-align:left;text-wrap:pretty} @media(max-width:992px){ .hero.xl{flex-direction:column} .hero.xl .wrap{max-width:100%;align-items:center;text-align:center;padding:clamp(38px,9vw,64px) 22px} .hero.xl .lead{margin-left:auto;margin-right:auto} /* Weniger Luft ueber den Knoepfen, mehr darunter (User-Vorgabe 30.07.2026): der Block rutscht damit hoch und steht nicht mehr direkt auf der Bildkante. */ /* Knoepfe ruecken hoch, Zahlarten stehen jetzt darunter und tragen den Abstand nach unten. */ .hero-cta-row{align-items:center;margin-top:14px;margin-bottom:0} /* flex:none HOLT DIE LUFT UEBER DER UEBERSCHRIFT WEG (28.09.2026, Vorgabe Claras mit Screenshot: "verringere diesen Abstand hier"). Der Kasten trug aus der Desktop-Regel flex:1 1 690px. Nebeneinander meint die 690px eine BREITE - untereinander, wie hier, meint dieselbe Angabe eine HOEHE. Der Textblock war damit 690px hoch, egal wie wenig darin stand, und justify-content:center schob den Inhalt in die Mitte. Was man sah, war kein Abstand, sondern die leere untere und obere Haelfte eines viel zu hohen Kastens. Mit flex:none folgt die Hoehe dem Inhalt. Die Polsterung oben (32px) bleibt der einzige Abstand zur Leiste darueber - und der ist gewollt. AUF DEM DESKTOP MUSS flex:1 1 690px STEHEN BLEIBEN: Dort teilt es die Breite zwischen Text und Bild auf. Deshalb steht die Korrektur hier in der Spalten-Regel und nicht oben. */ /* padding-bottom bleibt stehen (frueher 0): Seit das Foto HINTER dem Text liegt statt darunter, gibt es keine Bildkante mehr, auf der der Block aufsitzen koennte - ohne Polsterung klebte die Knopfreihe am unteren Rand des Kopfes. */ .hero.xl .wrap{row-gap:22px;flex:none} /* AUF SCHMALEN SCHIRMEN OHNE SCHUB UND OHNE ERWEITERUNG (02.10.2026, Vorgabe Claras: "dort kann das Bild auch wieder mittiger werden und die Erweiterung muss dort nicht angezeigt werden"). DER GRUND, AUS DEM ES BEIDES GIBT, FAELLT HIER WEG: Der Schub schafft Platz, damit das Motiv neben dem Text nach rechts rueckt - auf dem Telefon steht der Text aber UEBER dem Bild und nicht daneben. Dann gibt es kein Nebeneinander, das man ausgleichen muesste, und die gezogene Bildkante waere ein Streifen ohne Aufgabe. DAS FOTO NIMMT DAMIT WIEDER DIE VOLLE BREITE und sitzt mittig (object-position 50 %). Der Verlauf an seiner linken Kante faellt mit weg - ohne Streifen darunter waere er ein durchsichtiger Rand. --hero-ueber BLEIBT UNANGETASTET: Es kommt aus der Section und gilt fuer beide Breiten. Hier wird nicht die Variable geaendert, sondern das, was sie bewirkt - sonst muesste die Section wissen, wie breit der Bildschirm ist, und das kann sie nicht. */ .hero.xl{min-height:min(calc(100vw / var(--hero-ratio,1.792)), 72svh)} .hero.xl .heroimg img{width:100%;height:100%;min-width:0; object-fit:cover;object-position:50% 50%} /* DIE SCHRIFT IM KOPF EINE STUFE KLEINER (Vorgabe Claras: "den Text bei Mobile bitte kleiner machen"). Die Grundwerte sind fuer die breite Fassung gerechnet; auf 390px greift ueberall die Untergrenze des clamp, und die ist dort zu gross - die Ueberschrift nahm vier Zeilen. Eigene, niedrigere Untergrenzen statt fester Werte, damit es zwischen Telefon und Tablet weiter mitwaechst. */ .hero.xl h1{font-size:clamp(25px,6.2vw,36px)} .hero.xl .lead{font-size:clamp(14px,3.6vw,16.5px)} .hero.xl .hero-usps li{font-size:clamp(13px,3.4vw,15px)} /* KLEINER AUF DEM TELEFON (02.10.2026, Vorgabe Claras: "bei Mobile im Header der Startseite den Button 'Jetzt passendes Kit berechnen' kleiner machen"). Er nahm dort fast die ganze Breite und stand als groesstes Element ueber dem Foto - groesser als die Ueberschrift wirkte. Schrift und Polsterung eine Stufe zurueck; er bleibt der auffaelligste Knopf der Seite, nur nicht mehr der auffaelligste Gegenstand. */ .hero.xl .cta-xl{font-size:clamp(14px,3.6vw,16px);padding:12px 20px} .hero.xl .cta-secondary{font-size:13.5px} .hero.xl .pricechips{justify-content:center} /* HIER STAND DAS BILD UNTER DEM TEXT (bis 02.10.2026): eine eigene Spalte von 220px Hoehe, das Foto darin stehend und nach unten ausgeblendet. Diese Bauform ist entfallen - das Foto liegt jetzt auch auf dem Telefon hinter dem Text (Vorgabe Claras). Die Regeln dafuer stehen im Block darueber und gelten fuer alle Breiten; hier waere jede Zeile dazu eine Gegenregel, die genau das wieder aufhebt. DER KOPF IST AUF DEM TELEFON HOEHER ALS DAS BILDVERHAELTNIS verlangt - bei 390px Breite waeren es nur 187px. min-height ist eine Untergrenze, kein Mass: Der Text macht den Kopf hoeher, und das Foto fuellt ihn mit cover. Dass es dabei seitlich beschnitten wird, ist auf einem Hochformat-Schirm unvermeidlich und bei einem Hintergrundbild auch richtig. */ /* Linksbuendig bleibt es auch hier - die Textspalte ist auf dem Handy zwar zentriert, ein mehrzeiliges Kleingedrucktes mittig gesetzt liest sich schlecht und flattert an beiden Kanten. */ .hero-fussnote{max-width:100%} } /* ---------- Benefits + Förder-Störer ---------- */ /* OHNE LINIE OBEN (28.09.2026, Vorgabe Claras: "gerne die zarte Linie am Ende des Headers entfernen"). Sie lag direkt unter dem Kopf und trennte ihn von der USP-Zeile darunter - zwei Dinge, die zusammengehoeren: Der Kopf sagt, worum es geht, die Zeile sagt, was dafuer spricht. Der Abstand allein leistet die Gliederung. */ .benefits{padding:34px 0} /* BILD ALS GRUND - NUR AUF DEM TELEFON (28.09.2026, Vorgabe Claras: "das Bild als Hintergrund der Benefits-Zeile, gerne das Bild etwas verblassen lassen" und kurz darauf: "das mit dem Bild im Hintergrund nur bei Mobile machen und bei Mobile dann das andere Bild auch entfernen"). AUF DEM TELEFON TRITT ES AN DIE STELLE DES HERO-BILDES. Dort stand der Kopf bisher zweistoeckig da: Text, darunter das Foto in voller Breite, darunter die weisse USP-Zeile. Jetzt traegt die USP-Zeile das Foto als Grund, und das eigene Bild im Kopf entfaellt - ein Motiv statt zweier untereinander, und der Kopf wird um eine halbe Bildschirmhoehe kuerzer. AUF DEM DESKTOP AENDERT SICH NICHTS: Dort steht das Hero-Bild neben dem Text, nicht darunter. Es nimmt keinen Platz weg, und ein zweites Mal dasselbe Motiv als Grund waere dort eine Doppelung ohne Gewinn. DER SCHLEIER IST EIN EIGENES ELEMENT, kein opacity am Bild: opacity haette den Kasten samt Inhalt durchsichtig gemacht, sobald der Text darin liegt. So liegt genau eine Schicht zwischen Foto und Schrift, und ihre Staerke kommt aus dem Editor (--bene-schleier). UNTEN ETWAS DICHTER ALS OBEN: Laeuft der Grund nach unten heller aus, geht die Zeile in die weisse Flaeche darunter ueber, statt mit einer zweiten Kante zu enden. Dieselbe Ueberlegung wie beim Kopfband. object-position oben: Auf einem flachen Ausschnitt eines 2000x1116-Bildes sieht man nur einen Streifen - der obere traegt bei diesem Motiv den Himmel und bleibt ruhig. */ @media(max-width:768px){ .benefits.hat-bild{position:relative;overflow:hidden;isolation:isolate} .bene-bild{position:absolute;inset:0;pointer-events:none;z-index:0} .bene-bild img{width:100%;height:100%;object-fit:cover;object-position:center 22%;display:block} .bene-bild::after{content:"";position:absolute;inset:0; background:linear-gradient(to bottom, rgba(249,245,236,var(--bene-schleier,.62)) 0, rgba(249,245,236,calc(var(--bene-schleier,.62) + .08)) 100%)} .benefits.hat-bild .wrap{position:relative;z-index:1} /* HIER WURDE DAS FOTO IM KOPF AUSGEBLENDET (bis 02.10.2026). Damals stand es als eigene Spalte UNTER dem Text, und unter 768px zeigte die USP-Zeile darunter ohnehin ein Bild - zwei Fotos untereinander waren zu viel. JETZT BLEIBT ES STEHEN (Vorgabe Claras: "dort moechte ich gerne, dass das Bild auch der Hintergrund ist im Header"). Es nimmt keinen eigenen Platz mehr ein, sondern liegt hinter dem Text - damit entfaellt auch der Grund, es wegzunehmen. Der KI-Hinweis haengt daran und ist deshalb auf dem Telefon wieder zu sehen; er muss es auch, die Kennzeichnung gilt unabhaengig von der Bildschirmbreite. */ } /* Ueber 760px gibt es den Grund nicht - das Element bleibt im Markup und traegt nichts. */ @media(min-width:769px){ .bene-bild{display:none} } /* HIER LAG DIE USP-ZEILE EINE VIERTELSTUNDE LANG AUF DEM KOPFBILD (02.10.2026). Vorgabe Claras: "bei Mobile die Benefits-Zeile bitte auch auf das Header-Bild setzen, dazu das Header-Bild einfach groesser machen" - und kurz nach dem Live-Gang: "mach das mit der USP-Zeile wieder rueckgaengig". WIE ES GEBAUT WAR, falls es je zurueckkommen soll: Der Kopf bekam unten die Hoehe der Zeile als zusaetzliche Polsterung, die Zeile denselben Betrag als negativen Aussenabstand - beide aus einer Variablen an :root, weil .benefits kein Kind von .hero.xl ist, sondern sein Geschwister. Dazu entfiel ihr eigenes Foto (.bene-bild) und die Schrift wurde hell. WAS DARAN VERMUTLICH NICHT STIMMTE: die 132px Ueberlappung. Sie waren geschaetzt und nicht gemessen - das stand als Vorbehalt dabei, und genau das ist der Teil, der sich von hier aus nicht pruefen laesst. Wer es noch einmal versucht, misst die Hoehe der Zeile im Browser und setzt sie ein, statt sie zu raten. JETZT IST ALLES WIEDER WIE VORHER: Die USP-Zeile traegt auf dem Telefon ihr eigenes Foto (siehe .bene-bild weiter oben), der Kopf endet mit seiner gewohnten Polsterung. */ .benefits .wrap{display:flex;gap:28px;align-items:center;justify-content:space-between;flex-wrap:wrap} .benefits ul{list-style:none;display:flex;gap:20px;flex-wrap:wrap;width:100%} .benefits li{font-weight:500;font-size:14.5px;line-height:1.4;display:flex;gap:9px;align-items:flex-start;min-width:0} .benefits li b{font-weight:800} .benefits li::before{content:"✓";flex:0 0 auto;font-family:var(--mono);font-weight:700;color:var(--bernstein);font-size:17px;line-height:1.4} @media(min-width:769px){ /* Eine Zeile, und auch INNERHALB jedes Punktes kein Umbruch. DIE ZEILE STEHT SEIT DEM 30.09.2026 IN DERSELBEN SPALTE WIE DIE GANZE SEITE (Vorgabe Claras: "auch die Benefits-Zeile auf die gleiche vertikale Hoehe bringen, also rechts und links"). Vorher hatte sie ein eigenes Mass von 1280px und ragte damit beidseitig ueber den Inhalt hinaus - der erste Punkt begann links vor der Flucht, der letzte endete rechts dahinter. DIE SCHRIFT WAECHST DAFUER LANGSAMER (0,92vw statt 1,15vw). Der Grund fuer die 1280px war echt: Drei Punkte ohne Umbruch brauchen Platz, und in der schmaleren Spalte liefe die Zeile sonst ueber. DIE ENGSTE LAGE IST NICHT DIE SCHMALSTE, und das ist der Fallstrick: Die Spalte bleibt bis 1500px bei 1140, die Schrift waechst aber mit dem FENSTER weiter. Am engsten wird es deshalb kurz VOR 1500px - bei 1440 war die Zeile mit 1,15vw um rund 70px zu lang, bei 1200 haette sie noch gepasst. Nachgerechnet fuer 992, 1200, 1440, 1500, 1800 und 2560px Fensterbreite; mit 0,92vw passt sie ueberall. UND EIN NETZ DARUNTER: flex-wrap steht auf wrap statt nowrap. Sollte meine Rechnung bei einer Schriftart oder einem laengeren Text doch danebenliegen, rutscht der dritte Punkt in eine zweite Zeile - statt aus der Spalte zu laufen. Innerhalb eines Punktes bleibt der Umbruch verboten, das war die urspruengliche Vorgabe. NOCH EINMAL ZWEI BIS DREI PUNKT GROESSER (02.10.2026, Vorgabe Claras: "mach die Font bei den Punkten in der Benefits-Zeile groesser, so um 2-3"). Aus 14,5px werden 17px, aus 15px Haken 17,5px. DAS IST JETZT GROESSER ALS DIE USP-ZEILEN, auf die der Absatz darunter sich beruft - und das ist gewollt: Die Vorgabe vom Vortag war "so gross wie die USPs", die von heute ist "zwei bis drei groesser". Die zweite steht ueber der ersten. DAFUER BRICHT DIE ZEILE AUF SCHMALEREN SCHIRMEN UM, und das ist kein Versehen: Die drei Punkte brauchen bei 17px rund 1480px Spaltenbreite, und so breit wird die Spalte erst ab etwa 1800px Fensterbreite. Bei 1440px stehen 1246px zur Verfuegung - dort rutscht der dritte Punkt in eine zweite Zeile. Das ist der Preis der Groesse und Clara so gesagt; flex-wrap sorgt dafuer, dass es ein Umbruch wird und kein Ueberlauf. DER UNTERE TEIL DER STAFFELUNG BLEIBT WEICH: 1,18vw heisst 17px ab 1440px und darunter weniger, bis zu 12px auf dem kleinsten Schirm, fuer den diese Regel ueberhaupt gilt. Eine feste Groesse haette auf dem Telefon drei Punkte mit je zwei Zeilen ergeben. ---- Stand vom 01.10.2026, als Begruendung der Staffelung weiterhin gueltig ---- SO GROSS WIE DIE USP-ZEILEN IM HERO (Vorgabe Claras: "die Punkte der Benefits-Zeile bitte groesser machen, so gross wie auch die USP-Teile"). Die USPs stehen auf 14,5px, ihr Haken auf 15px - das waren bis heute die Obergrenzen hier. DIE OBERGRENZE WAR VORHER HOEHER (15px) UND TRAF TROTZDEM SELTEN ZU. Das ist der Widerspruch, der hinter Claras Beobachtung steckt: Auf einem sehr grossen Schirm war die Zeile schon bisher einen Hauch GROESSER als die USPs - erreicht wurde die Grenze aber erst ab rund 1630px, und auf einem 1440er-Laptop stand die Zeile bei 13,2px gegen 14,5px im Hero. Dort sah man den Unterschied. DESHALB WAECHST SIE JETZT SCHNELLER (0,99vw statt 0,92vw) UND HOERT FRUEHER AUF: ab rund 1465px steht sie auf 14,5px und damit auf USP-Groesse, darunter faellt sie weich ab. Ein fester Wert von 14,5px fuer alle Breiten ginge nicht - nachgerechnet passen die drei Punkte dann erst ab etwa 1500px in eine Zeile, auf jedem Laptop darunter rutschte der dritte in eine zweite. DIE ABSTAENDE GEBEN DEN PLATZ DAFUER HER (1,5vw statt 2vw, hoechstens 26px statt 30px). Bei 1440px sind das rund 14px weniger zwischen den Punkten - ungefaehr so viel, wie die groessere Schrift dort mehr braucht. Die Punkte stehen ohnehin mit space-between auseinander; der Wert ist nur ihr Mindestabstand. DIE RECHNUNG IST EINE SCHAETZUNG, keine Messung im Browser - sie fusst auf der Beobachtung vom 30.09.2026, dass die Zeile bei 1440px und 15px um rund 70px zu lang war. Deshalb bleibt flex-wrap als Netz: Liegt sie daneben, rutscht der dritte Punkt in eine zweite Zeile, statt aus der Spalte zu laufen. */ .benefits .wrap{max-width:var(--seite-max)} .benefits ul{flex-wrap:wrap;gap:clamp(14px,1.5vw,26px);justify-content:space-between} .benefits li{flex:0 1 auto;white-space:nowrap;font-size:clamp(12px,1.18vw,17px)} .benefits li::before{font-size:clamp(13px,1.22vw,17.5px)} } .foerder-badge{display:flex;gap:10px;align-items:flex-start;font-size:14px;font-weight:700;color:var(--ink);margin-top:16px;margin-bottom:4px} .foerder-badge .fb-icon{flex:0 0 auto;font-family:var(--mono);font-weight:700;color:var(--gruen);font-size:15px;line-height:1.5} .foerder-badge small{display:block;font-family:var(--mono);font-size:10px;font-weight:500;color:var(--muted);margin-top:4px} /* Drei USPs im Hero (User-Entscheid 29.07.2026), loest die einzelne Foerder-Zeile ab. Untereinander statt nebeneinander: im Hero steht wenig Breite zur Verfuegung, und die Punkte sollen einzeln lesbar bleiben statt zu einer Wortkette zu verschwimmen. */ .hero-usps{list-style:none;margin:18px 0 4px;padding:0;display:flex;flex-direction:column;gap:7px} .hero-usps li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;line-height:1.45;font-weight:500;color:var(--ink)} .hero-usps li b{font-weight:800} .hero-usps .fb-icon{flex:0 0 auto;font-family:var(--mono);font-weight:700;color:var(--gruen);font-size:15px;line-height:1.45} @media(min-width:993px){ /* Ab Desktop nebeneinander, solange genug Platz ist. */ .hero-usps{flex-direction:row;flex-wrap:wrap;gap:10px 26px} .hero-usps li{max-width:30ch} } /* Mobil: alle drei Punkte auf EINER Kante (User-Vorgabe 30.07.2026). Der Hero ist unter 900px mittig gesetzt, dadurch erbte die Liste text-align:center. Die Haken standen zwar untereinander, der Text dahinter aber nicht: der erste Punkt bricht auf zwei Zeilen um, und beide Zeilen wurden einzeln zentriert - die drei Punkte begannen an drei verschiedenen Stellen. Jetzt ist der Block als Ganzes mittig, sein Inhalt linksbuendig: Haken unter Haken, Text unter Text. */ @media(max-width:992px){ .hero-usps{width:fit-content;max-width:100%;margin-left:auto;margin-right:auto;text-align:left} .hero-usps li{text-align:left} } /* Abschluss-Claim unter der zweiten USP-Reihe. */ /* Zweiter Teil der Ueberschrift als Textmarker (User-Vorgabe 30.07.2026): schwarze Schrift auf gelber Flaeche, genau wie "Billiger" und ".de" im Logo (.logo .accent). Vorher stand der Teil in Rost auf Papier - gelbe Schrift auf hellem Grund ist der schwaechste Kontrast im ganzen Brandbook und traegt die Botschaft am schlechtesten. Umgedreht traegt sie am besten und zitiert das Logo. Masse relativ zur Schriftgroesse (em statt px): das Logo steht bei 19px, diese Zeile bei bis zu 74px - feste 1px/6px waeren dort ein Haarstrich. box-decoration-break sorgt dafuer, dass bei einem Zeilenumbruch JEDE Zeile ihre eigene Flaeche mit runden Ecken bekommt statt eines durchgehenden Blocks mit Ecken nur aussen. */ .h1-accent{ background:var(--rost);color:var(--ink); padding:.06em .16em;border-radius:var(--radius-xs); -webkit-box-decoration-break:clone;box-decoration-break:clone; /* Die Ueberschrift laeuft mit line-height:1.02 sehr eng. Ohne Zugabe legt sich die gelbe Flaeche der zweiten Zeile ueber die Unterlaengen der ersten ("DIY-Waermepumpe." wurde unten abgeschnitten). Die Zeilenhoehe am Marker weitet die Zeilenkaesten, in denen er vorkommt, gerade so weit, dass die Flaechen sich nicht mehr beruehren. */ line-height:1.2} /* Zusaetzlich am H1 selbst, damit auch Zeilen ohne Marker denselben Abstand halten und der Block gleichmaessig laeuft. Nur wenn ueberhaupt ein Marker drinsteht - eine Ueberschrift ohne Akzent behaelt ihre enge Setzung. */ h1:has(.h1-accent){line-height:1.2} /* ---------- Prozess-Roadmap v3: durchgehende, zentrierte Verbindungslinie (.rm-line-track/.rm-line-fill, volle Höhe von .roadmap) statt einzelner Kurven pro Schritt - Punkte bleiben außen an ihrem Schritt, die Linie läuft neutral in der Mitte durch, ohne die Punkte zu berühren (User-Sketch 09.07.). Grüne Füllung wächst mit den Scroll-Reveals (--rm-fill, siehe watchSteps()). Jeder Schritt kommt sanft mit Scale+Fade herein. ---------- */ /* DIE ZEITLEISTE STEHT MITTIG AUF DER SEITE (02.10.2026, Vorgabe Claras: "die Ablauf-Grafik ... mittig auf den Screen stellen" und, fuer dieselbe Grafik auf der Foerderseite, "die Grafik, die sich bewegt, ... auch mittig auf den Screen"). SIE WAR NIE ZENTRIERT: 700px Hoechstbreite ohne Aussenabstaende heisst linksbuendig in einer Spalte, die auf einem grossen Schirm ueber 1100px breit ist - rechts daneben blieb eine Handbreit Nichts. Aufgefallen ist das erst, seit die Ueberschriften darueber mittig stehen. margin-inline:auto UND NICHT text-align: Die Leiste ist ein Raster aus zwei Spalten mit einer Linie dazwischen; ihre Punkte stehen abwechselnd links und rechts davon. Zentriert wird der KASTEN, der Inhalt darin bleibt, wie er ist. */ .roadmap{position:relative;max-width:700px;margin-top:64px;margin-left:auto;margin-right:auto} .roadmap svg.rm-line{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0} .rm-line-track{fill:none;stroke:var(--line);stroke-width:2;stroke-dasharray:2 7;stroke-linecap:round} .rm-line-fill{fill:none;stroke:var(--gruen);stroke-width:3;stroke-linecap:round;transition:stroke-dashoffset .6s cubic-bezier(.2,.8,.2,1)} @media (prefers-reduced-motion: reduce){.rm-line-fill{transition:none}} /* 110px statt 210px: die Schlange war ~4000px hoch bei fünf kurzen Schritten - Leerfläche dominierte */ .rm-item{position:relative;z-index:1;width:46%;padding:0;margin-top:110px;opacity:0;transform:translateY(40px) scale(.96);transition:opacity .6s ease,transform .8s cubic-bezier(.2,.8,.2,1)} .rm-item:first-of-type{margin-top:0} .rm-item.in{opacity:1;transform:none} /* Mess-Modus: layoutRoadmapLine() misst die Dot-Positionen in Endlage, nicht mitten in der reveal-Verschiebung */ .roadmap.rm-measure .rm-item{transform:none!important;transition:none!important} .rm-item:nth-of-type(odd){margin-right:auto;padding-left:58px} .rm-item:nth-of-type(even){margin-left:auto;padding-right:58px;text-align:right} .rm-dot{position:absolute;top:-3px;width:34px;height:34px;border-radius:8px;border:2px solid var(--line);background:var(--paper);transition:border-color .3s,background .3s,transform .3s,color .3s;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-weight:700;font-size:13px;color:var(--muted);transform:rotate(-4deg);box-shadow:var(--shadow-card)} .rm-item:nth-of-type(odd) .rm-dot{left:0} .rm-item:nth-of-type(even) .rm-dot{right:0} /* Drei Zustaende statt einem (27.07.2026): erledigt = ruhig gefuellt, aktiv = gelber Ring wie beim Tour-Spotlight (gleiche Bildsprache) und leicht groesser, kommend = nur Umriss. Vorher waren nach dem Durchscrollen ALLE Punkte identisch gruen - dadurch wirkte der Ablauf flach. */ .rm-item.is-past .rm-dot{border-color:var(--gruen);background:var(--gruen);color:#fff} .rm-item.is-active .rm-dot{border-color:var(--rost);background:var(--rost);color:var(--ink);transform:scale(1.14);box-shadow:0 0 0 4px rgba(255,199,0,.28)} .rm-item.is-active b{color:var(--ink)} .rm-item:not(.is-past):not(.is-active) b{color:var(--graphit)} /* Kommende Schritte treten zurueck, ohne unlesbar zu werden - der Blick soll beim aktiven bleiben. */ .rm-item.in:not(.is-past):not(.is-active){opacity:.62} .rm-item.in{transition:opacity .4s ease,transform .8s cubic-bezier(.2,.8,.2,1)} @media (prefers-reduced-motion: reduce){.rm-item.is-active .rm-dot{transform:none}.rm-item.in:not(.is-past):not(.is-active){opacity:1}} /* Waehrend der Scroll-Fuehrung folgt die Linie direkt dem Finger - die lange Ease-Transition von oben wuerde dabei sichtbar hinterherhaengen. */ .roadmap .rm-line-fill{transition:stroke-dashoffset .12s linear} /* Fortschrittsanzeige ueber der Roadmap, klebt beim Durchscrollen unter der Topbar. SIE STEHT SEIT DEM 02.10.2026 MITTIG (Vorgabe Claras, zweimal fuer dasselbe Element: "bei Foerderung den Button mit '8 Schritte, scroll dich durch' mittig machen" und "bei Ablauf 'Schritt 1 von 6, Heute 2 Minuten' bitte mittig auf dem Screen darstellen"). ES IST EIN ELEMENT, NICHT ZWEI: Die Pille zeigt den Stand der Zeitleiste und steht auf beiden Seiten darueber - ihr Text wird von konfigurator.js gesetzt und heisst deshalb hier "Schritt 1 von 6" und dort "8 Schritte". Eine Regel genuegt. DIESELBEN 700px WIE DIE ZEITLEISTE, und jetzt mit denselben automatischen Aussenabstaenden: Sie hatte margin:26px 0 0 und sass damit links, waehrend die Leiste darunter seit heute mittig steht. Die beiden gehoeren zusammen und muessen auf derselben Flucht stehen. */ /* SIE SOLL BEIM SCROLLEN STEHEN BLEIBEN (02.10.2026, Meldung Claras: "wenn man bei Foerderung scrollt, sieht man den Button mit '8 Schritte, scroll dich durch' nicht mehr - das gleiche auch bei Ablauf"). WAS ICH NACHGESEHEN HABE: Die Pille klebt (position:sticky) und haengt im selben Kasten wie die Zeitleiste, laeuft also ueber deren ganze Laenge mit. Ein Vorfahr mit overflow:hidden wuerde das aushebeln - auf diesen beiden Seiten gibt es keinen; geprueft an jeder Regel, die overflow setzt. Das Skript blendet sie auch nicht aus, es schreibt nur ihren Text. WAS BLEIBT, SIND ZWEI VERDAECHTIGE: Sie klebte 72px unter dem Fensterrand, die Navigation darueber ist 64px hoch und liegt auf Ebene 60 - bei 72 gegen 64 bleiben acht Pixel, und das ist knapp, sobald eine Zeile umbricht. Und sie lag selbst nur auf Ebene 2, also unter allem, was sich einen eigenen Stapel aufmacht. ZUERST 84px, DANN 110 (Meldung Claras kurz darauf: "das muss noch tiefer, da man jetzt nur die Haelfte sieht"). Die Ebene war also richtig - sie lag nicht mehr dahinter, sondern nur noch halb darunter. Die Pille ist rund 40px hoch, halb verdeckt heisst rund 20px zu wenig; 110 gibt darueber hinaus Luft, damit es auch dann reicht, wenn die Navigation einmal eine Zeile mehr traegt. DIE 64px DER NAVIGATION ERKLAEREN DAS NICHT ALLEIN - rechnerisch waeren 84 schon genug gewesen. Was zusaetzlich zaehlt, laesst sich von hier aus nicht messen; der Wert ist deshalb am gemeldeten Fehlbetrag ausgerichtet und nicht an einer Rechnung. */ .rm-progress{position:sticky;top:110px;z-index:40;display:flex;align-items:center;gap:12px;flex-wrap:wrap; background:var(--card);border:1px solid var(--line);border-radius:var(--radius-pill);padding:9px 18px; margin:26px auto 0; box-shadow:var(--shadow);max-width:700px;transition:opacity .3s ease} .rm-prog-count{font-weight:800;font-size:13.5px;white-space:nowrap} .rm-prog-when{font-family:var(--mono);font-size:11.5px;font-weight:700;color:var(--bernstein-dark);text-transform:uppercase;letter-spacing:.04em;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .rm-prog-bar{flex:0 0 88px;height:5px;border-radius:var(--radius-xs);background:var(--line);overflow:hidden} .rm-prog-bar i{display:block;height:100%;background:var(--rost);border-radius:var(--radius-xs);transition:width .18s linear} .rm-progress.is-start .rm-prog-count{color:var(--muted)} @media (prefers-reduced-motion: reduce){.rm-prog-bar i{transition:none}} @media(max-width:576px){ .rm-progress{padding:8px 14px;gap:9px;top:100px} .rm-prog-when{flex:1 1 100%;order:3} .rm-prog-bar{flex:1 1 auto} } .rm-when{font-family:var(--mono);font-size:11.5px;font-weight:700;color:var(--bernstein);text-transform:uppercase;letter-spacing:.05em} /* UNTERSCHRITTE IN EINER STATION (28.09.2026, Vorgabe Claras: "die sind aber nicht gleichwertig wie Reservierung, Konfiguration und so"). SIE MUESSEN ANDERS AUSSEHEN, nicht nur kleiner: Die Stationen tragen einen Punkt auf der Linie, die Unterschritte haengen an einer eigenen, duennen Linie und tragen schlichte Zahlen. Wer die Seite ueberfliegt, zaehlt weiter fuenf Schritte. LINKSBUENDIG AUCH IN DEN RECHTEN STATIONEN: Die Zeitleiste setzt jede zweite Station rechtsbuendig. Eine Liste, die von rechts nach links laeuft, liest sich nicht - die Nummern staenden dann am Zeilenende. counter STATT list-style: Die Zahl soll in der Mono-Schrift stehen und einen festen Platz haben; ol mit Standardpunkten gaebe weder das eine noch das andere. */ .rm-sub{list-style:none;counter-reset:rmsub;margin:14px 0 0;padding:0 0 0 18px; border-left:2px solid var(--line);text-align:left} .rm-sub li{counter-increment:rmsub;position:relative;margin-top:12px;padding-left:26px} .rm-sub li:first-child{margin-top:0} .rm-sub li::before{content:counter(rmsub);position:absolute;left:0;top:1px; font-family:var(--mono);font-size:11px;font-weight:700;color:var(--muted)} .rm-sub b{font-weight:800;font-size:14.5px;display:inline} .rm-sub-wann{font-family:var(--mono);font-size:10.5px;font-weight:700;color:var(--bernstein); text-transform:uppercase;letter-spacing:.05em;margin-left:8px;white-space:nowrap} .rm-sub p{margin:3px 0 0;font-size:13.5px;line-height:1.5;color:var(--graphit)} .rm-sub-tools{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px} .rm-sub-tools .tag{font-size:10.5px} @media(max-width:768px){ .rm-sub{padding-left:14px} .rm-sub li{padding-left:22px} .rm-sub p{font-size:13px} } /* DIE BUEHNE (28.09.2026, Vorgabe Claras: die Unterschritte sollen beim Scrollen seitlich durchlaufen, danach geht es auf der Seite weiter). DER HOHE KASTEN IST DER SCHALTWEG: Eine Bildschirmhoehe je Schritt, plus die Hoehe des klebenden Teils. Waehrend er am Bild vorbeilaeuft, bleibt der Inhalt stehen und die Spur wandert zur Seite. Ohne diese Hoehe gaebe es nichts zu scrollen und damit auch nichts umzulenken. DIE STATION NIMMT DAFUER DIE VOLLE BREITE: Die Zeitleiste setzt ihre Stationen sonst abwechselnd links und rechts auf 46 Prozent - eine Praesentation in 320px waere keine. DIE SPUR IST SO BREIT WIE ALLE SCHRITTE ZUSAMMEN, jeder Schritt so breit wie das Fenster. Das Skript schiebt sie in Prozent der Spurbreite; die Rechnung dort kennt nur die Anzahl, nicht die Pixel - so stimmt sie auch nach dem Drehen des Telefons. OHNE SKRIPT BLEIBT SIE WISCHBAR: overflow-x:auto steht hier und nicht im Skript. Erst die Klasse "laeuft" schaltet das eigene Scrollen ab, und die setzt das Skript selbst. */ /* DIE STATION MIT BUEHNE BLENDET SICH NICHT EIN (Fehler vom 28.09.2026: "Schritt 4 ist in der Desktop-Version komplett weg"). Die Stationen starten unsichtbar (opacity:0) und werden von einem IntersectionObserver eingeblendet, sobald ein Viertel von ihnen im Bild ist - bei rootMargin -25% sogar etwas spaeter. Diese Station ist mit ihrer Buehne aber rund sechs Bildschirmhoehen hoch: Ein Viertel davon passt nie ins Bild, der Beobachter loeste nie aus, und sie blieb auf opacity:0 stehen. Auf dem Telefon fiel es weniger auf, weil dort weniger Bild pro Station zu sehen ist - weg war sie trotzdem. SIE IST DESHALB VON ANFANG AN DA. Kein Einblenden, keine Verschiebung - und das ist kein Verlust: Was sechs Bildschirmhoehen fuellt, braucht keinen Auftritt. Die Regel steht im Stylesheet und nicht im Skript, damit die Station auch ohne JavaScript sichtbar ist. */ /* KEINE POLSTERUNG MEHR ALS SCHALTWEG (28.09.2026, Vorgabe Claras: "jetzt scrollt es innerhalb des Prozesses immer noch nach unten, es soll dann ueberhaupt nicht vertikal scrollen"). Die vier Fassungen davor arbeiteten mit position:sticky und einem Stueck Leerraum darunter. Genau das heisst aber: Die Seite laeuft weiter, nur der Inhalt bleibt hoch - und alles ringsum wandert sichtbar nach oben. Jetzt faengt das Skript den Scroll ab, solange die Station an ihrem Platz steht; es gibt nichts zu verbrauchen, also auch keine Polsterung und kein Kleben. Die Station ist damit wieder so lang wie jede andere. */ /* DIE STATION MIT DEN SECHS UNTERSCHRITTEN STEHT MITTIG (02.10.2026, Vorgabe Claras: "6 Schritte, scroll dich durch, bitte auch mittig setzen"). WAS SCHIEF WAR: Alle anderen Stationen sind 46 % breit und stehen abwechselnd links und rechts der Mittellinie. Diese eine ist 100 % breit, und ihr Inhalt begann 76px von der linken Kante (58px fuer den Punkt, 18px fuer die Linie daneben) und lief bis an die rechte Kante durch - rechts also 76px mehr Flaeche als links. Seit die Zeitleiste selbst mittig auf dem Schirm steht, faellt genau diese Schieflage auf. GLEICH VIEL AUF BEIDEN SEITEN, und zwar ueber padding-right statt ueber eine neue Breite: Der Punkt sitzt mit left:-58px an der linken Kante der Station und muesste bei einer schmaleren Station nachgerechnet werden. So bleibt er, wo er ist, und nur der Inhalt rueckt in die Mitte. text-align BLEIBT LINKS: Darin stehen eine Linie am linken Rand und sechs Karten in einer Spur - zentrierter Text wuerde von beidem abruecken. Mittig steht der KASTEN, nicht die Schrift; dasselbe Prinzip wie bei der Zeitleiste selbst. */ .rm-item.hat-buehne{width:100%;margin-right:auto;margin-left:0;padding-left:58px; padding-right:58px;text-align:left;opacity:1;transform:none;transition:none} /* DIE HUELLE HAELT DIE STATION IM BILD (28.09.2026, Vorgabe Claras: "wenn das Scrollen bei dem Feld mit der Zahl 05 ankommt, soll das Scrollen der kompletten Seite sofort aufhoeren und wenn man weiterhin scrollt, direkt die Unterschritte von rechts nach links anfangen zu scrollen"). DIE POLSTERUNG UNTEN AM ELEMENT IST DER SCHALTWEG: leerer Platz, den der Scroll verbraucht, waehrend der Inhalt oben klebt. Sichtbar wird davon nichts - die Station steht an ihrer Stelle und sieht aus wie die anderen. top:96px haelt die Menueleiste frei; sie klebt selbst bei 64px. DER PUNKT SITZT IN DER HUELLE, nicht im Element darueber: Er muss mitwandern, sonst bleibt er am Anfang der Station stehen, waehrend ihr Text im Bild haengt. -58px bringt ihn wieder an die Linie - genau die Polsterung, die das Element links traegt. */ .rm-item.hat-buehne .rm-dot{left:-58px;right:auto;top:-3px} /* KEIN EIGENER SCHALTWEG MEHR (28.09.2026, Vorgabe Claras: "diese Praesentation, Scrollen von rechts nach links, soll die gesamte Struktur gar nicht so sehr veraendern, sondern einfach nur einen kleinen Bereich ergaenzen und platzsparend agieren" - und: waehrend man durch die Unterschritte geht, soll der naechste Ueberschritt schon zu sehen sein). DREI ANLAEUFE VORHER, alle mit demselben Fehler: Die Buehne bekam eigene Hoehe, damit es etwas zu scrollen gab - erst sechs Bildschirmhoehen, dann zwei. Genau diese Hoehe schob die naechste Station aber weit nach unten und machte aus Schritt 5 einen Sonderfall. Und sie war der Grund, warum die Linie weiterlief: Es WAR ja Scrollweg da. Jetzt hat die Buehne gar keine eigene Hoehe: Sie ist ein kleiner Kasten im Fluss, so hoch wie ein Unterschritt. Was die Spur weiterschaltet, ist nicht mehr eigener Scrollweg, sondern der Weg, den die Station ohnehin durchs Bild nimmt. Die Zeitleiste behaelt damit ihre Abstaende, die naechste Station steht da, wo sie immer stand, und die Linie hat nichts mehr, worauf sie kriechen koennte. KEIN position:sticky mehr: Das Kleben war nur noetig, solange es eigenen Scrollweg gab. */ .rm-buehne{position:relative;margin-top:14px;min-height:var(--rmb-fix,150px); display:flex;flex-direction:column;justify-content:flex-start;overflow:hidden; border-left:2px solid var(--line);padding:2px 0 0 18px} .rm-buehne-spur{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none} .rm-buehne-spur::-webkit-scrollbar{display:none} .rm-buehne.laeuft .rm-buehne-spur{overflow-x:hidden} /* In der Buehne ist die Liste die Spur: nebeneinander statt untereinander, jeder Schritt so breit wie das Fenster der Buehne. Die Linie links traegt jetzt der Kasten, nicht die Liste. */ /* DIE BEWEGUNG ZWISCHEN ZWEI SCHRITTEN STEHT HIER, nicht im Skript: Das Skript setzt nur die Zielposition, das Stylesheet faehrt sie an. So rastet die Spur ein, statt am Finger zu haengen - und wer keine Bewegung will, bekommt den Sprung ohne Fahrt (Regel weiter unten). 0,6 SEKUNDEN (28.09.2026): erst 0,5, dann auf "viel langsamer" 0,9, dann auf "doch zu langsam" hierher. Die zweite Haelfte des Tempos steht im Skript - dort sagt die Schwelle, wie viel Wisch einen Schritt ausmacht (110), und die Sperre danach, wie lange nicht noch einmal geschaltet wird (600ms, so lang wie diese Fahrt). */ .rm-sub--buehne{display:flex;flex-wrap:nowrap;width:calc(var(--rmb-n,6) * 100%); border-left:0;padding-left:0;margin-top:0;will-change:transform; transition:transform .6s cubic-bezier(.22,.75,.2,1)} .rm-sub--buehne li{flex:0 0 calc(100% / var(--rmb-n,6));margin-top:0;padding-right:28px; opacity:.35;transition:opacity .25s ease} .rm-sub--buehne li.an{opacity:1} .rm-buehne-zaehler{font-family:var(--mono);font-size:11.5px;font-weight:700;color:var(--muted); margin-top:14px;padding-left:18px;letter-spacing:.06em} /* PFEILE ZUM DURCHBLAETTERN - AUF JEDER BREITE (02.10.2026, Vorgabe Claras in zwei Schritten: "das mit dem Scrollen entfernen und dafuer Pfeile einsetzen", dann "mach das mit den Pfeilen auch bei der Desktop-Version"). ZUERST NUR AUF DEM TELEFON, eine knappe Stunde spaeter ueberall - und damit ist die Scroll-Uebernahme ganz entfallen (siehe assets/bwp-ablauf-buehne.js). Die Spur kennt jetzt genau einen Weg, und der ist sichtbar. DIE ZEILE TRAEGT DEN ZAEHLER IN DER MITTE: links zurueck, rechts weiter, dazwischen "3 / 6". Der Zaehler verliert dafuer seinen eigenen Einzug - er sitzt jetzt zwischen den Knoepfen und nicht mehr unter der Linie am linken Rand. */ .rm-buehne-pfeile{display:flex;align-items:center;justify-content:space-between;gap:12px; margin-top:14px;padding-left:18px} .rm-buehne-pfeile .rm-buehne-zaehler{margin-top:0;padding-left:0} .rm-pfeil{display:inline-flex;align-items:center;justify-content:center; width:40px;height:40px;flex:0 0 auto;padding:0; appearance:none;border:1.5px solid var(--line);border-radius:50%; background:var(--card);color:var(--ink);font:inherit;font-size:17px;line-height:1; cursor:pointer;transition:border-color .16s,background .16s} .rm-pfeil:hover{border-color:var(--bernstein);background:var(--bernstein-tint)} .rm-pfeil:focus-visible{outline:2px solid var(--bernstein);outline-offset:2px} /* DIE ZAHL BLEIBT IN DER ZEILE (30.09.2026, Meldung Claras: "da ist ein 2/6 abgebildet, im Moment sind die beiden Zahlen eher uebereinander, bitte mach die in die gleiche horizontale Reihe"). URSACHE: Weiter unten steht .rm-item b{display:block;font-size:19px} - die Regel ist fuer die fette Ueberschrift eines Schritts gedacht, trifft aber JEDES im Schritt, und der Zaehler liegt darin. Aus "2 / 6" wurde dadurch eine 2 in Ueberschriftgroesse und darunter "/ 6". ZWEI KLASSEN IM WAEHLER, damit es reicht: .rm-item b und .rm-buehne-zaehler b sind gleich stark, und die spaetere gewinnt - die spaetere ist die falsche. Mit .rm-item davor liegt diese Regel darueber, egal wo sie steht. font-size und margin werden mitgesetzt, nicht nur display: Sonst bliebe die Zahl 19px gross und um 3px versetzt neben dem 11,5px kleinen Rest. */ .rm-item .rm-buehne-zaehler b{display:inline;color:var(--ink);font-size:inherit;margin-top:0} @media(max-width:768px){ .rm-item.hat-buehne{padding-left:50px;padding-right:50px} .rm-item.hat-buehne .rm-dot{left:-50px} .rm-buehne{min-height:var(--rmb-fix,164px);padding-left:14px} .rm-sub--buehne li{padding-right:18px} } /* Wer keine Bewegung will, bekommt die Liste untereinander - das Skript steigt dort ohnehin aus, und ohne diese Regel bliebe ein hoher, halb leerer Kasten stehen. */ @media (prefers-reduced-motion: reduce){ .rm-buehne{min-height:0;overflow:visible;display:block;padding-top:0} .rm-sub--buehne{display:block;width:100%;transition:none;transform:none!important} .rm-sub--buehne li{opacity:1;margin-top:12px;padding-right:0} .rm-sub--buehne li:first-child{margin-top:0} .rm-buehne-zaehler{display:none} } .rm-item b{display:block;font-size:19px;margin-top:3px} .rm-item p{font-size:14.5px;color:var(--graphit);margin-top:4px;max-width:46ch} .rm-item:nth-of-type(even) p{margin-left:auto} .rm-tools{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px} .rm-item:nth-of-type(even) .rm-tools{justify-content:flex-end} @media (prefers-reduced-motion: reduce){.rm-item{transition:opacity .3s ease}} @media(max-width:640px){ .rm-item{width:100%!important;text-align:left!important;padding-right:0!important;padding-left:50px!important;margin-left:0!important;margin-right:0!important;margin-top:64px!important;flex-direction:row!important} .rm-item:first-of-type{margin-top:0!important} .rm-item .rm-dot{left:0!important;right:auto!important} .rm-item p{margin-left:0!important} .rm-tools{justify-content:flex-start!important} } /* ---------- Kit-Karten (Produktvorstellung) ---------- */ .kitcards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:48px} @media(max-width:1024px){.kitcards{grid-template-columns:1fr 1fr}} @media(max-width:576px){.kitcards{grid-template-columns:1fr}} .kitcard{background:var(--card);border:1px solid #E3D3BB;box-shadow:var(--shadow);border-radius:var(--radius);padding:20px;text-align:center;display:flex;flex-direction:column} .kitcard img{height:130px;width:auto;margin:0 auto 14px;object-fit:contain} .kc-name{font-weight:800;font-size:16.5px} .kc-spec{font-family:var(--mono);font-size:12.5px;font-weight:700;color:var(--gruen);margin-top:6px} .kc-sub{font-size:12px;color:var(--muted);margin-top:2px;flex:1} .kc-price{font-family:var(--mono);font-weight:700;font-size:19px;margin-top:14px;padding-top:12px;border-top:1px dashed var(--line)} .kc-price .tag{display:block;margin:6px auto 0;width:fit-content} /* ---------- Produkt-Tiefe: Kits im Detail + Vergleichstabelle ---------- auto-fit statt repeat(4,1fr) (02.09.2026): Die Spaltenzahl folgt jetzt der tatsaechlichen Kartenzahl. Mit festen vier Spalten und nur drei Karten (Hybrid ausgeblendet) blieb die vierte Spalte leer stehen - die Karten waren schmaler als noetig und rechts klaffte eine Luecke. minmax(220px,1fr) haelt die Karte breit genug fuer Bild und Preiszeile. */ .kitdeep{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:48px} @media(max-width:1024px){.kitdeep{grid-template-columns:1fr 1fr}} /* AUF DEM TELEFON EINE ROLLE STATT EINER SPALTE (28.09.2026, Vorgabe Claras: "die drei Produkte sollen nicht mehr untereinander angezeigt werden, sondern nebeneinander in einem Karussell - dadurch sollen sie auch nicht so gross sein, sodass man sieht, es ist ein Karussell und es gibt drei Produkte"). Untereinander waren die drei Karten zusammen ueber zwei Bildschirmhoehen lang. Wer die erste gelesen hatte, wusste nicht, dass zwei weitere kommen - er sah nur eine Karte und darunter die naechste Ueberschrift. 76 PROZENT BREITE SIND DER GANZE TRICK: Die zweite Karte schaut am Rand herein. Genau das sagt "hier geht es seitwaerts weiter", und es sagt es ohne Pfeil, Punktreihe oder Skript. Bei voller Breite waere es wieder eine Liste, nur mit anderem Scrollweg. VOLLE BREITE, ERSTE KARTE AN DER TEXTKANTE: dieselbe Bauform wie bei den Kundenbildern - margin-inline bricht aus der Spalte aus, padding-inline holt sie als Innenabstand zurueck. Die Reihe laeuft damit bis an den Bildschirmrand, beginnt aber dort, wo auch die Ueberschrift beginnt. LUFT OBEN UND UNTEN: overflow-x macht den Kasten auch senkrecht beschnitten. Ohne die Polsterung waere die Empfehlungs-Pille abgeschnitten, die 11px ueber der Kante der empfohlenen Karte sitzt - und deren gruener Ring gleich mit. */ @media(max-width:576px){ .kitdeep{display:flex;grid-template-columns:none;gap:12px; overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch; margin-inline:calc(50% - 50vw);padding:16px 22px 6px; scroll-padding-inline-start:22px; scrollbar-width:none;-ms-overflow-style:none;margin-top:32px} .kitdeep::-webkit-scrollbar{display:none} .kitdeep > .kitcard-deep{flex:0 0 76%;scroll-snap-align:start} } .kitcard-deep{background:var(--card);border:1.5px solid #E3D3BB;box-shadow:var(--shadow);border-radius:var(--radius);text-align:left;display:flex;flex-direction:column;overflow:hidden;position:relative} .kitcard-deep.hybrid{border-color:var(--bernstein)} /* EMPFEHLUNG AUF DEM KITS-REITER (Vorgabe 17.09.2026): dieselbe Markierung wie auf der Produktseite und im Kit-Vergleich - Rand in Walnuss, 3px-Ring daneben, Pille auf der Kante. Eine Empfehlung, drei Orte, ein Aussehen. overflow:visible MUSS hier stehen: Die Karte schneidet sonst alles ab, was ueber ihren Rand ragt - und genau das tut die Pille (top:-11px). Sie waere sonst zur Haelfte weg. Aufgehoben wird es nur fuer die eine empfohlene Karte; alle anderen behalten ihren Beschnitt. Die Pille steht als ERSTES Kind im Kasten, damit sie nicht in .kd-plate haengt - dessen Beschnitt bleibt naemlich bestehen. Der Ring steht VOR var(--shadow), sonst faellt der Kartenschatten weg. */ .kitcard-deep.ist-empfohlen{border-color:var(--gruen);overflow:visible; box-shadow:0 0 0 3px var(--gruen-tint), var(--shadow)} /* ---- Die Neuheiten-Marke am Kit (16.10.2026, Vorgabe Claras) ---- Dieselbe Pillenform wie das Empfehlungs-Siegel, nur in Sand statt Gruen, und RECHTS statt mittig: Ist das 5-kW-Kit zugleich das empfohlene, stehen beide Pillen nebeneinander statt uebereinander. Der Ring um die Karte ist derselbe Gedanke wie beim Siegel - nur leiser: Die Karte traegt ohnehin schon eine Kante in #E3D3BB, der Ring legt sie ein zweites Mal darum, statt die Farbe zu wechseln. So faellt sie auf, ohne wie das Siegel zu rufen. */ /* overflow:visible IST HIER DER GANZE PUNKT (berichtigt am 16.10.2026, Meldung Claras: "die Neu-Pille liegt bitte ueber dem Kasten, jetzt wird der durch den Kasten abgeschnitten"). .kitcard-deep traegt overflow:hidden - noetig fuer die abgerundeten Ecken des Bildfelds -, und die Pille sitzt mit top:-11px ueber der Kartenkante, wird dort also beschnitten. Die empfohlene Karte hat genau dieselbe Zeile seit dem Tag, an dem ihr Siegel dazukam; bei der neuen hatte ich sie uebersehen. */ .kitcard-deep.ist-neu{box-shadow:0 0 0 3px var(--sand),var(--shadow);overflow:visible} .kd-neu{position:absolute;top:-11px;right:16px;left:auto; display:inline-flex;align-items:center;background:var(--sand-deep);color:var(--ink); font-family:var(--mono);font-size:10.5px;font-weight:700;padding:4px 12px; border-radius:var(--radius-pill);white-space:nowrap;z-index:2; border:1px solid rgba(51,49,45,.14)} .kd-empfehlung{position:absolute;top:-11px;left:50%;transform:translateX(-50%); display:inline-flex;align-items:center;background:var(--gruen);color:#fff; font-family:var(--mono);font-size:10.5px;font-weight:700;padding:4px 12px; border-radius:var(--radius-pill);white-space:nowrap;z-index:1} /* DIE RUNDUNG HAENGT NICHT MEHR AM BESCHNITT (12.10.2026, Meldung Claras: "wenn es eine Empfehlung bei den Kits gibt und das so umkreist wird, dann stehen da diese Ecken raus - bitte runde die Kachel auch ab, wenn es so dunkler umrandet wird, bei allen vieren"). DIE URSACHE WAR EIN WIDERSPRUCH IN DER KARTE SELBST: Sie rundet ihre Ecken und schneidet ab, was darueber hinausragt (overflow:hidden) - die weissen Flaechen darin bleiben also eckig und werden nur weggeschnitten. Die empfohlene Karte MUSS den Beschnitt aufheben, sonst waere die Pille auf ihrer Oberkante zur Haelfte weg. Damit kam die Eckigkeit darunter zum Vorschein, und zwar genau an den vier Ecken. JETZT RUNDEN SICH DIE FLAECHEN SELBST, oben die Kopfplatte, unten der Koerper. Die Karte sieht damit in beiden Zustaenden gleich aus, und der Beschnitt ist nur noch Sicherung statt Voraussetzung - genau die Abhaengigkeit, die den Fehler erzeugt hat. Ein Pixel weniger als die Karte (13px zu 14px): Die Rundung gilt innerhalb des 1,5px starken Randes, der eigene Bogen liegt also minimal weiter innen. Gleich gross stiesse die Flaeche an der Schraege gegen den Rand. */ .kd-plate{background:var(--card);color:var(--ink);padding:16px 18px 14px;position:relative;border-bottom:1px solid var(--line); border-radius:13px 13px 0 0} /* DAS HERSTELLERLOGO UEBER DEM NAMEN (12.10.2026, Vorgabe Claras am Beispiel einer Vaillant-Karte: "bitte bei der Uebersicht der Kits bei der Kachel auch das Logo oben so einfuegen"). Oben links, darunter der Kit-Name - dieselbe Ordnung wie im Beispiel. DIE HOEHE IST FEST, DIE BREITE NICHT: Markenlogos sind verschieden breit, und auf eine gemeinsame Breite gezwungen waere jedes zweite verzerrt. Gleich hoch sehen sie nebeneinander gleich gewichtig aus - das ist, was die Reihe braucht. max-width haelt ein sehr breites Logo davon ab, die Kachel zu sprengen; object-fit sorgt dafuer, dass es dann schrumpft statt zu quetschen. 22px AUF VORGABE (13.10.2026: "das Logo bitte kleiner und mit nicht so viel Leerraum nach oben zum Ende der Kachel"). Es stand kurz auf 28px, und dafuer gab es einen gemessenen Grund: Die Datei ist 1772 x 909 Punkte, knapp 2:1, und traegt unter dem Schriftzug "FOX" eine zweite Zeile "ESS" - die ist jetzt rund 2,5px hoch, also eher Form als Schrift. DAS IST EIN ABWAEGEN UND KEIN VERSEHEN: Das Logo soll die Kachel anschreiben, nicht sie anfuehren; der Kit-Name darunter ist die Aussage. Wer "Fox ESS" lesen will, findet es eine Zeile tiefer ausgeschrieben in der Modellbezeichnung. Die Breite ergibt sich zu rund 43px. DER ABSTAND NACH OBEN FAELLT VON 20px AUF 12px - siehe .kitcard-deep .kd-plate weiter unten. Das Logo ist kleiner als der Name, der dort vorher stand; derselbe Abstand sah darueber nach vergessener Flaeche aus. */ .kd-marke{margin-bottom:8px;line-height:0} .kd-marke img{display:block;height:22px;width:auto;max-width:150px;object-fit:contain} /* Ohne Logo der Markenname - in der Schrift der technischen Angaben, damit er nicht mit dem Kit-Namen darunter konkurriert. Er ist die Angabe selbst, kein Platzhalter. */ .kd-marke-text{font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.06em; text-transform:uppercase;color:var(--muted);line-height:1} .kd-plate::before,.kd-plate::after{content:"";position:absolute;top:9px;width:5px;height:5px;border-radius:50%;background:rgba(43,33,26,.16)} .kd-plate::before{left:9px} .kd-plate::after{right:9px} .kitcard-deep.hybrid .kd-plate{border-bottom-color:var(--bernstein-tint)} /* HIER STAND DIE GROESSENREGEL FUER DIE KIT-BILDER (.kitcard-deep img). Die Bilder sind am 01.10.2026 auf Vorgabe aus den Kit-Kaesten genommen worden - siehe konfigurator.js. Die Kopien auf der Produktseite (.kd-produktseite) behalten ihre Bilder; sie wurden von dieser Regel ohnehin nie getroffen. */ .kd-name{font-weight:800;font-size:15.5px;margin:10px 0 0} /* GROESSER, ABER NUR IM KIT-KASTEN (01.10.2026, Vorgabe Claras: "dafuer den Titel 'DIY-Kit 8 kW' ... groesser machen"). Der Name steht jetzt dort, wo vorher das Bild war, und traegt den Kasten allein - mit 15,5 px waere oben eine leere Flaeche geblieben. DIE KOPIEN AUF DER PRODUKTSEITE BLEIBEN KLEIN: Dort steht der Name unter einem Bild und neben Fliesstext, nicht als Kopf eines Kastens. Deshalb .kitcard-deep davor und nicht .kd-name allein. */ .kitcard-deep .kd-name{font-size:21px;line-height:1.2;margin-top:2px} /* 12px STATT 20px (13.10.2026, Vorgabe Claras: "nicht so viel Leerraum nach oben zum Ende der Kachel"). Die 20px stammen vom 01.10.2026, als der grosse Kit-Name ganz oben stand - eine 21px-Zeile braucht Luft ueber sich. Seit das Logo davorsteht, fuehrt ein kleineres Element die Kachel an, und derselbe Abstand wirkt darueber wie vergessene Flaeche. */ .kitcard-deep .kd-plate{padding-top:12px} .kd-model{font-family:var(--mono);font-size:10px;opacity:.65;margin-top:2px;text-transform:uppercase;letter-spacing:.05em} /* DER KOERPER TRAEGT DIE UNTEREN BEIDEN - siehe die Begruendung an .kd-plate. Er bekommt dafuer den Grund der Karte ausdruecklich: Ohne eigene Flaeche waere eine Rundung an ihm wirkungslos, es gaebe nichts zu runden. Sichtbar aendert das nichts, es ist derselbe Grund, den die Karte schon hat. */ .kd-body{padding:16px 18px 20px;display:flex;flex-direction:column;gap:10px;flex:1; background:var(--card);border-radius:0 0 13px 13px} .kd-specs{display:flex;flex-direction:column;font-size:12.5px;font-family:var(--mono)} .kd-specs div{display:flex;justify-content:space-between;gap:10px;border-bottom:1px dotted var(--line);padding:4px 0} .kd-specs div:last-child{border-bottom:none} .kd-specs span{color:var(--muted);font-family:var(--font);white-space:nowrap} .kd-specs b{font-weight:700;white-space:nowrap} .kd-hybrid-head{font-family:var(--mono);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--bernstein-dark)} .kd-hybrid-list{list-style:none;margin-top:8px;display:flex;flex-direction:column;gap:6px} .kd-hybrid-list li{position:relative;padding-left:14px;font-size:12.5px;color:var(--graphit);line-height:1.45} .kd-hybrid-list li::before{content:"–";position:absolute;left:0;color:var(--bernstein-dark);font-weight:700} .kd-fit{font-size:12px;color:var(--graphit);flex:1} .kd-fit .tag{margin-left:4px} /* DIE EINORDNUNG IST DER GRIFF ZUR LEISTUNGSTABELLE (01.10.2026, Vorgabe Claras: "die Unterueberschrift ... ueber die Heizlast-Uebersicht tun und aufklappbar machen, sodass man nach dem Aufklappen die Tabelle mit der Heizlast bei den Temperaturen sieht"). DER RAHMEN MACHT AUS DEM SATZ EINEN KNOPF. Ohne ihn saehe er aus wie der Fliesstext, der er vorher war, und niemand kaeme auf die Idee, darauf zu klicken - ein Pfeil allein am Zeilenende reicht dafuer nicht. DAS DREIECK STEHT ABSOLUT UND DER TEXT BLEIBT EIN BLOCK: Als Flex-Zeile waere die Pille "Richtwert" ein eigenes Element neben dem Satz geworden, statt wie bisher hinter dem letzten Wort mitzulaufen. list-style:none UND ::-webkit-details-marker: Das eine fuer heutige Browser, das andere fuer Safari, das den Marker weiterhin ueber das Pseudoelement zeichnet. Nur eins von beiden und das Standarddreieck steht neben dem eigenen. */ .kd-auf{border:1px solid var(--line);border-radius:10px;background:var(--paper)} .kd-auf > summary{list-style:none;cursor:pointer;display:block;position:relative; padding:9px 30px 9px 11px;font-size:12px;color:var(--graphit);line-height:1.45} .kd-auf > summary::-webkit-details-marker{display:none} .kd-auf > summary::marker{content:""} .kd-auf > summary:hover{color:var(--ink)} .kd-auf > summary:focus-visible{outline:2px solid var(--bernstein);outline-offset:2px;border-radius:10px} .kd-chev{position:absolute;right:10px;top:9px;opacity:.55;font-size:11px; transition:transform .18s ease;display:inline-block} .kd-auf[open] .kd-chev{transform:rotate(180deg)} .kd-auf[open] > summary{border-bottom:1px solid var(--line)} /* Die Tabelle sitzt im selben Rahmen und braucht deshalb den Innenabstand, den sie als freistehender Block nicht hatte. */ .kd-auf > .kd-specs,.kd-auf > .kd-hybrid{padding:8px 11px 10px} /* ZWEI WEGE ZUM PASSENDEN KIT (22.09.2026): der Block zwischen Kit-Karten und Vergleich. Ueberschrift auf derselben Stufe wie die des Vergleichs darunter - beide ordnen einen Abschnitt INNERHALB der Seite ein und stehen unter der H1 des Kopfbandes. Die grosse h2-Stufe von section.land waere hier so laut wie der Seitentitel. Der Text laeuft auf 68 Zeichen: Er ist laenger als eine uebliche Unterzeile, und bei den 46 Zeichen von .sec-sub stuende er in sieben schmalen Zeilen. */ /* GEMEINSAME KLASSE .seiten-absatz (22.09.2026): Ueberschrift auf Abschnittsstufe, Text auf Lesebreite. Sie gab es zuerst zweimal unter eigenen Namen (.kit-wege, .kit-ueberblick); mit dem dritten Ort - dem richtigstellenden Absatz auf der Foerderseite - haetten drei fast gleiche Regelsaetze nebeneinander gestanden. Die Namen der einzelnen Orte bleiben, sie tragen nur noch ihre Abstaende. */ /* DER EINLEITUNGSBLOCK UNTER DEM KOPFBAND STEHT MITTIG (02.10.2026, Vorgabe Claras: "bei Foerderung den Titel und Text unter dem Header bitte mittig machen" - und fuer die Ablaufseite, die seit heute dieselbe Bauform hat, "gerne mittig mit dem Titel 'So laeuft's ab'"). NUR IN .seiten-intro, nicht bei jedem .seiten-absatz: Dieselbe Klasse traegt auch die Textbloecke im Fallbeispiel-Band der Startseite und auf der Kits-Seite. Gemeint ist der eine Block zwischen Kopfband und Inhalt. 820px WIE UEBERALL, WO ZENTRIERT WIRD - derselbe Wert wie auf der Startseite, am klekks-Vorbild gemessen. Die Ueberschrift darin darf breiter laufen, sie ist kurz. */ section.land.seiten-intro .seiten-absatz{text-align:center;max-width:min(820px,100%); margin-left:auto;margin-right:auto} /* DIE UEBERSCHRIFT DARIN AUCH (02.10.2026, Meldung Claras: "bei Mobile bei Ablauf ist der Titel 'So laeuft's ab' nicht ganz mittig"). DIE URSACHE: section.land h1/h2 deckelt jede Abschnittsueberschrift auf 16 Zeichen, auf schmalen Schirmen auf 40. .seiten-absatz h2 hebt das zwar auf (max-width:none), steht im Stylesheet aber WEITER OBEN - bei gleicher Spezifitaet gewinnt die spaetere Regel, also die Deckelung. Der Textkasten war damit schmaler als die Spalte und sass links darin; zentriert waren nur seine Zeilen. Auf dem Telefon faellt das auf, weil der Unterschied dort am groessten ist. DIE REGEL HIER IST SPEZIFISCHER ALS BEIDE und raeumt beides aus einem Griff: volle Breite und automatische Aussenabstaende. */ section.land.seiten-intro .seiten-absatz > h2, section.land.seiten-intro .seiten-absatz > h3{max-width:100%;margin-left:auto;margin-right:auto} .seiten-absatz{max-width:68ch} /* "ZWEI WEGE ZUM PASSENDEN KIT" STEHT MITTIG (02.10.2026, Vorgabe Claras: "bei Kits die 'Zwei Wege zum passenden Kit' mittig machen"). EINE EIGENE REGEL, WEIL DIE KITS-SEITE NICHT bwp-mittig TRAEGT: Dort steht sonst alles linksbuendig, und das soll so bleiben - gemeint ist dieser eine Block. Ohne die automatischen Aussenabstaende bliebe sein Kasten links stehen und nur die Zeilen darin waeren zentriert; .seiten-absatz ist in der Breite begrenzt. 820px WIE ueberall sonst, wo zentriert wird. */ .kit-wege{margin-top:52px;text-align:center;max-width:min(820px,100%); margin-left:auto;margin-right:auto} /* DIE UEBERSCHRIFT DARIN BRAUCHT DASSELBE (02.10.2026, nach Claras Hinweis, auf schmalen Schirmen noch einmal nachzusehen, ob alles Mittige auch mittig steht). DERSELBE FALL WIE BEI "So laeuft's ab" auf der Ablaufseite: section.land h1/h2 deckelt jede Abschnittsueberschrift auf 16 Zeichen, auf schmalen Schirmen auf 40. .seiten-absatz h2 hebt das zwar auf, steht im Stylesheet aber weiter oben - bei gleicher Spezifitaet gewinnt die spaetere Regel. Der Kasten der Ueberschrift war damit schmaler als der Block und sass links darin; zentriert waren nur seine Zeilen. Auf dem Telefon faellt es am meisten auf, weil der Unterschied dort am groessten ist. SYSTEMATISCH NACHGESEHEN, nicht einzeln gefunden: Jede Regel durchgegangen, die text-align:center setzt oder vererbt, und geprueft, ob der zugehoerige Kasten automatische Aussenabstaende hat. Uebrig blieben zwei - dieser hier und der auf der Ablaufseite, der vorhin schon behoben wurde. */ .kit-wege > h2, .kit-wege > h3{max-width:100%;margin-left:auto;margin-right:auto} /* Ueber den Karten, direkt unter dem Kopfband: weniger Abstand nach oben als der Block zwischen zwei Inhalten, dafuer Luft nach unten zu den Karten. */ .kit-ueberblick{margin-bottom:34px} /* h3 GILT MIT (28.09.2026): Die zwei Textabschnitte auf der Startseite ruecken eine Stufe tiefer, sobald ueber ihnen eine Ueberschrift fuer den ganzen Abschnitt steht. Ihre Ueberschrift bleibt dabei dieselbe Ueberschrift - die Stufe sagt etwas ueber die Gliederung, nicht ueber die Groesse. */ .seiten-absatz h2,.seiten-absatz h3{font-size:clamp(20px,2.6vw,26px);margin-top:0;max-width:none} .seiten-absatz p{margin-top:12px;font-size:clamp(14.5px,1.18vw,18.5px);line-height:1.6;color:var(--graphit)} /* Der Absatz unter dem Titel - auf der Foerder- und der App-Seite. Oben die 56px, die auch sonst auf ein Kopfband folgen; unten null, weil der Abschnitt darunter seinen Abstand selbst mitbringt. NEUTRALER NAME, seit es ihn zweimal gibt (22.09.2026): Er hiess .foerder-intro, solange nur die Foerderseite ihn hatte. Ein Ortsname an einer Regel, die an zwei Orten gilt, ist die Einladung, beim dritten eine Kopie anzulegen. */ section.land.seiten-intro{padding:30px 0 0} /* Die Sonderabstaende nach Intro und Kopfband sind am 30.09.2026 entfallen: Sie waren mit 48/56px gedacht als ABZUG von den 82px der Grundregel. Seit die 30px sind, waeren sie ein Aufschlag - also genau das Gegenteil. Der Grundabstand gilt jetzt auch hier. */ /* DER ABSTAND VON 52px IST AM 30.09.2026 AUF 0 GEFALLEN (Meldung Claras: "bei dem Abschnitt Leistungsvergleich ist ueber dem Titel noch viel Platz"). Er stammt aus der Zeit, als der Vergleich MITTEN in billigerwaermepumpe-produkt stand und sich vom Vorherigen absetzen musste. Seit dem 29.09.2026 ist er eine eigene Section mit eigenem Innenabstand - der alte Abstand kam obendrauf. */ .kitcompare{margin-top:0;overflow-x:auto} /* Die Groesse stand bis zum 28.09.2026 als Inline-Stil am h2 und liess sich damit fuer das Telefon nicht unterbieten - ein Inline-Stil schlaegt jede Regel hier. Werte unveraendert uebernommen. */ .kitcompare h2{font-size:clamp(20px,2.6vw,26px);margin-top:0} /* DER UMSCHALTER UEBER DER TABELLE (13.10.2026). Zwischen Untertext und Tabelle, damit beim Lesen erst klar ist, WAS die Tabelle zeigt, und dann erst die Zahlen kommen. Umbrechen darf er: Auf dem Telefon stehen die beiden Beschriftungen untereinander. MITTIG (14.10.2026, Vorgabe Claras). Er steht damit in derselben Flucht wie die beiden Zeilen darueber: Ueberschrift und Untertext dieses Abschnitts sind seit dem 28.09.2026 zentriert (siehe section.land#kitvergleich weiter oben). Linksbuendig war er der einzige Teil des Kopfes, der ausscherte. justify-content UND NICHT text-align: Die beiden Knoepfe sind Flex-Kinder - text-align wirkte nur auf ihre Beschriftung, nicht auf ihre Lage in der Reihe. */ .kitcompare-schalter{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:12px 0 14px} /* "ALLE LEISTUNGSDATEN IM VERGLEICH": TITEL MITTIG, ABSCHNITT WEISS (02.10.2026, Vorgabe Claras: "mach den Titel von 'alle Leistungsdaten im Vergleich' mittig und den Hintergrund weiss"). NUR DER KOPF, NICHT DIE TABELLE: Darunter stehen vier Auslegungspunkte je Kit in Spalten - zentrierte Zellen waeren nicht mehr zu vergleichen, und genau dafuer ist die Tabelle da. DIE TABELLE BEHAELT IHREN HELLEN KASTEN: Sie steht auf --card, einem Sandton, und hebt sich damit jetzt vom weissen Abschnitt ab statt vom beigen. Das ist weniger Kontrast als vorher, aber die Linien zwischen den Zeilen tragen die Gliederung ohnehin. */ section.land#kitvergleich{background:#fff} section.land#kitvergleich .kitcompare > h2, section.land#kitvergleich .kitcompare > .sec-sub, section.land#kitvergleich > .wrap > h2{text-align:center;margin-left:auto;margin-right:auto} /* DIE ZEILE UNTER DER UEBERSCHRIFT KOMMT MIT (02.10.2026, Vorgabe Claras: "bei 'alle Leistungsdaten im Vergleich' auch den kleinen Text darunter mittig stellen"). SIE WAR BEIM ERSTEN MAL NICHT DABEI, weil ich .kitcompare-kopf gewaehlt hatte - eine Klasse, die es in diesem Markup gar nicht gibt. Der Waehler ging ins Leere, und die Ueberschrift stand nur deshalb mittig, weil sie ueber den zweiten Teil der Regel getroffen wurde. Jetzt stehen beide als direkte Kinder von .kitcompare da, und das ist auch nachgesehen. .sec-sub TRAEGT EINE HOECHSTBREITE von 46 Zeichen - ohne die automatischen Aussenabstaende waeren nur ihre Zeilen zentriert und der Kasten bliebe links. */ section.land#kitvergleich .kitcompare > .sec-sub{max-width:min(820px,100%)} /* WENIGER LUFT UEBER DEN BEIDEN UEBERSCHRIFTEN (30.09.2026, Meldung Claras zu "Was im Kit steckt" und "Leistungsvergleich": "ueber dem Titel ist noch viel Platz, kannst du den bitte verringern ... du musst wahrscheinlich auch die Groesse des Abschnitts verringern, in dem der Text liegt"). Genau das war es: Beide sind section.land und trugen deren 82px Innenabstand oben - dazu beim Vergleich noch 52px aus .kitcompare und bei beiden 14px vom h2. Ueber der Ueberschrift des Vergleichs standen damit 148px, und darueber lagen noch einmal 82px Innenabstand des Abschnitts davor. NUR OBEN UND NUR BEI DIESEN BEIDEN: Der Abstand nach unten bleibt, sonst klebte der naechste Abschnitt an der Tabelle. Und section.land gilt auf jeder Seite des Themes - eine Aenderung dort haette jeden Abschnitt schmaler gemacht. DIE BEIDEN GEHOEREN ZUSAMMEN: "Was im Kit steckt" und der Leistungsvergleich sind zwei Kapitel derselben Sache und folgen direkt aufeinander. Der grosse Abstand trennte sie optisch staerker als den Kit-Ueberblick davor. */ /* Die Einzelregel fuer #kit und #kitvergleich ist am 30.09.2026 entfallen: Der Grundabstand von section.land traegt jetzt dieselben 30px fuer jeden Abschnitt. Geblieben ist nur die Nullstellung des h2-Vorabstands - die gilt bei diesem Abschnitt, weil seine Ueberschrift direkt unter der Kante sitzen soll. */ section.land#kit > .wrap > h2{margin-top:0} /* "PRODUKT & KIT" BEGINNT OHNE OBEREN ABSTAND (01.10.2026, Vorgabe Claras: "zwischen 'Produkt & Kit' und 'Welche Waermepumpe' ist noch recht viel Platz, weil bei 'Welche Waermepumpe' im unteren Bereich des Abschnitts viel Leerraum ist und 'Produkt & Kit' im oberen Bereich mehr Leerraum hat. Entferne den oberen Leerraum bei 'Produkt & Kit'"). WORAUS DER PLATZ BESTEHT: Der Abschnitt darueber endet optisch hoch, weil seine rechte Spalte (Text und Merkmale) kuerzer ist als die Bilder links - die Hoehe des Abschnitts richtet sich nach den Bildern, der Rest ist leer. Dazu kommen seine 82px Fussabstand und die 30px Kopfabstand hier. Die 30px fallen weg; die Ueberschrift "Die Kits im Ueberblick" sitzt damit direkt an der Kante, so wie die von #kit darueber auch. NUR DIESER ABSCHNITT, und das geht gefahrlos: billigerwaermepumpe-produkt wird allein von templates/page.produkt.liquid gerendert, die Regel kann also nirgends sonst zuschlagen. Der Fussabstand bleibt - er trennt die Kit-Kaesten vom naechsten Kapitel. */ section.land#produkt{padding-top:0} .kitcompare table{border-collapse:collapse;width:100%;min-width:640px;font-size:13.5px} .kitcompare th,.kitcompare td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:center} .kitcompare th{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:700} /* ===== WELCHE FASSUNG STEHT HIER (14.10.2026) ================================ Vorgabe Claras, zweiter Anlauf: "das Farbliche mit der Tabelle gefaellt mir nicht. Mach bitte einfach einen leichten beigen Hintergrund ueber die ganze Tabelle, und diese Farbe aendert sich dann, wenn man den anderen Button klickt." ZURUECKGENOMMEN IST DER ERSTE ENTWURF: eingefaerbter Tabellenkopf, eingefaerbte Beschriftung und ein farbiger Punkt davor - drei Stellen, die zusammen unruhig wirkten. Jetzt traegt die ganze Flaeche den Ton, und die Beschriftung sagt in Worten, welcher es ist. Ein Feld, eine Farbe. DIE FARBEN SIND DIE DER SEITE (dritter und letzter Anlauf, 14.10.2026, Vorgabe Claras: "pass die Farbe bitte an das Beige an, das wir sowieso schon als Hintergrund auf den Seiten nutzen - fuer den Vergleich mach eine ein bisschen waermer"). 35 °C var(--paper) - genau der Grund, auf dem die ganze Seite steht. Kein neuer Ton, keine neue Entscheidung. 55 °C #F3EEE5 - derselbe Grund, einen Schritt Richtung --sand gezogen. DER ZWEITE IST NICHT GEGRIFFEN, SONDERN GERECHNET: --paper (#F7F5F1) und --sand (#EFE6D8) zu gleichen Teilen. Beide stehen seit jeher nebeneinander auf dieser Seite - der eine als Seitengrund, der andere als Band- und Kastenfarbe -, der Zwischenwert gehoert also in dieselbe Familie. Abstand zum Seitengrund: 4/7/12. Das ist "ein bisschen waermer" und nicht mehr. ZWEI ANLAEUFE DAVOR, beide zu kraeftig: erst --bernstein-tint und --sand-deep, dann deren aufgehellte Fassungen. Der Fehler war beide Male derselbe - ich habe nach einem Beige gesucht, statt das zu nehmen, das die Seite schon traegt. SIE STEHEN BEWUSST NICHT ALS TOKEN BEI DEN UEBRIGEN FARBEN: Ein Token ist ein Versprechen, dass die Farbe anderswo wieder gebraucht wird. Der waermere Ton gehoert genau dieser einen Tabelle; im Kopf der Datei waere er eine Einladung, ihn irgendwo sonst zu verwenden, wo dann niemand mehr weiss, warum es ihn gibt. DER UEBERGANG IST SICHTBAR GEMACHT (transition): Die Farbe ist die Rueckmeldung auf den Klick. Springt sie ohne Zwischenschritt, liest sich das eher wie ein Neuaufbau der Seite als wie eine Antwort auf den Knopf. */ .kitcompare table{background:var(--paper);border-radius:var(--radius-s);overflow:hidden; transition:background-color .25s ease} .kitcompare table[data-vl="W35"]{background:var(--paper)} .kitcompare table[data-vl="W55"]{background:#F3EEE5} /* Die Beschriftung sitzt auf derselben Flaeche und braucht keine eigene - nur die ruhigere Schriftfarbe, damit sie den Zahlen nicht die Aufmerksamkeit nimmt. */ .kitcompare-cap{caption-side:top;text-align:left;padding:10px 12px 2px; font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.04em; text-transform:uppercase;color:var(--graphit)} /* Die Trennlinien liegen jetzt auf Beige - die helle Linienfarbe verschwaende darin. */ .kitcompare table[data-vl] th, .kitcompare table[data-vl] td{border-bottom-color:rgba(51,49,45,.12)} .kitcompare table[data-vl] tr:last-child td{border-bottom:none} .kitcompare td:first-child,.kitcompare th:first-child{text-align:left;font-weight:700} .kitcompare tr.rec-row td:first-child{color:var(--gruen)} .kitcompare .m{font-family:var(--mono)} /* ---------- Förderung ↔ Services: Zuordnungstabelle ---------- */ /* DER KASTEN STEHT MITTIG (02.10.2026, Vorgabe Claras: "bei 'Was du fuer die Foerderung nachweisen musst' den Kasten auch mittig darstellen"). Er hat 760px Hoechstbreite und stand ohne Aussenabstaende links in einer Spalte, die auf einem grossen Schirm ueber 1100px breit ist - seit die Ueberschrift darueber mittig steht, faellt das auf. Zentriert wird der KASTEN; die Zeilen darin bleiben, wie sie sind: Es ist eine Tabelle aus Pflicht und zugehoerigem Service, und zentrierte Spalten waeren nicht mehr zu lesen. */ .foermap{display:flex;flex-direction:column;margin-top:24px;max-width:760px;margin-left:auto;margin-right:auto;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--card)} /* Zeilen sind Text, keine Klickflaechen mehr (28.09.2026, Vorgabe Claras: "das Aufgeklappte weg, den Text direkt darstellen, und die Haekchen weg"). Der Zeiger, der Hover-Wechsel und die Regel fuers Aufklappen sind damit entfallen - sie versprachen eine Handlung, die es nicht mehr gibt. Die Haekchen lasen sich ausserdem wie abgehakte Aufgaben, in einer Liste dessen, was noch zu tun ist. */ .foermap-row{display:flex;gap:14px;align-items:flex-start;padding:16px 20px;border:none;border-bottom:1px dashed var(--line);width:100%;background:none;font-family:var(--font);color:var(--ink);text-align:left} .foermap-row:last-child{border-bottom:none} .foermap-row .fm-req{flex:1 1 260px;font-size:14.5px} .foermap-row .fm-req b{display:block} .foermap-row .fm-req span{color:var(--muted);font-size:12.5px} .foermap-row .fm-why{display:block;margin-top:4px;line-height:1.5} .foermap-row .fm-svc{flex:0 0 auto;font-family:var(--mono);font-size:12px;font-weight:700;color:var(--gruen);background:var(--gruen-tint);border-radius:var(--radius-pill);padding:6px 14px;align-self:center;white-space:nowrap} /* "inkludiert in" ueber dem Servicenamen, im selben Chip (29.09.2026, Vorgabe Claras). Eigene Zeile, weil der Chip nicht umbricht: nebeneinander waere er so breit geworden, dass die Pflicht links zusammengedrueckt wird. In der Textschrift statt der Mono und eine Spur leiser - es ordnet ein, es ist keine Angabe. Die Ecken bleiben rund; aus der Pille wird dadurch eine zweizeilige Kapsel, und genau das ist sie auch. */ .foermap-row .fm-svc-vor{display:block;font-family:var(--font);font-size:10.5px; font-weight:600;letter-spacing:.01em;color:var(--graphit);margin-bottom:1px} /* ---------- Services-Panel ---------- */ .svcpanel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);margin-top:40px;overflow:hidden} .svcpanel .sp-head{padding:16px 22px;border-bottom:1px dashed var(--line);font-weight:800;font-size:16px} .svcrow{display:flex;justify-content:space-between;gap:16px;padding:14px 22px;border-bottom:1px dashed var(--line);font-size:14.5px;align-items:baseline} .svcrow:last-child{border-bottom:none} .svcrow b{display:block} .svcrow .why{color:var(--muted);font-size:13px;margin-top:2px;max-width:52ch} .svcrow .price{font-family:var(--mono);font-weight:700;white-space:nowrap} /* ---------- Buybox v2: Thumbs + Speicher-Wahl ---------- */ .withthumb{display:flex;gap:12px;align-items:center;min-width:0} .thumb{width:46px;height:46px;flex:0 0 auto;object-fit:contain;background:var(--paper);border-radius:var(--radius-s);padding:4px} .spchips{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap} /* SPEICHER UND LIEFERUNG TRAGEN DIESELBEN CHIPS (.af-chip) - der Speicher seit dem 21.09.2026, die Lieferung seit dem 29.09.2026 (Vorgabe Claras: "die beiden Auswahl-Buttons in dem gleichen Design wie oben bei dem Warmwasserspeicher"). Die Form kommt von .af-chip selbst; hier steht nur, was der lange Abhol-Text braucht. UMBRECHEN STATT ABSCHNEIDEN: Seit im Abhol-Chip der Ort steht ("Abholung in 59425 Unna · kostenlos"), lief er auf dem Handy 53px aus dem Kasten heraus. Links ausgerichtet, weil ein zweizeiliger Text mittig gesetzt wie ein Zitat aussieht. Die vorige Regel galt .spchips .chipbtn und traf nach der Umstellung nichts mehr - der grosse Mono-Knopf steht in diesem Behaelter nicht mehr. */ .spchips .af-chip{white-space:normal;text-align:left;max-width:100%;line-height:1.3} .spchips .tag{margin-left:5px} /* ---------- Services-Tiefe ---------- */ /* Zwischenzeile "Vor dem Einbau" / "Nach dem Einbau" (15.09.2026). Die zweite traegt die durchgezogene Linie - sie ist der Schnitt zwischen den beiden Phasen. Die erste steht nur als Beschriftung darueber, eine Linie ganz oben waere eine Trennung von nichts. */ .sd-phase{font-family:var(--mono);font-size:11px;font-weight:700;text-transform:uppercase; letter-spacing:.06em;color:var(--muted);margin:2px 0 10px} .sd-phase--schnitt{border-top:2px solid var(--line);margin-top:22px;padding-top:16px} /* Die Karte direkt ueber dem Schnitt legt ihre eigene gestrichelte Trennlinie ab - sonst stehen dort zwei Linien uebereinander, eine gestrichelte und die durchgezogene. Getrennt wird hier einmal, nicht zweimal. :has() ist im Theme bereits im Einsatz (siehe .buyline:has(.qtystep)). */ .svcdeep:has(+ .sd-phase){border-bottom:none} .sd-groups{display:flex;flex-direction:column;gap:18px;margin-top:32px} .sd-group{border-radius:var(--radius);padding:4px 0} .sd-legend-pill{display:flex;align-items:center;gap:8px;width:100%;font-size:14.5px;font-family:var(--font);font-weight:700;background:none;border:none;padding:16px 0;margin:0;cursor:pointer;color:var(--gruen);text-align:left} .sd-legend-pill:hover{opacity:.75} .sd-group--other .sd-legend-pill{color:var(--graphit)} .sd-legend-pill b{font-family:var(--mono);font-size:16px} .sd-legend-pill .sd-chev{margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--muted);transition:transform .2s ease} .sd-group.off{padding-bottom:4px} .sd-group.off .sd-legend-pill{opacity:.55} .sd-group.off .sd-legend-pill .sd-chev{transform:rotate(-90deg)} .sd-group.off .sd-group-body{display:none} .svcdeep{display:flex;gap:16px;padding:22px 0;border-bottom:1px dashed rgba(43,33,26,.14)} .svcdeep:last-child{border-bottom:none} .svcdeep .sd-num{flex:0 0 auto;width:32px;height:32px;border-radius:8px;background:var(--paper);border:1px solid var(--line);color:var(--muted);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-weight:700;font-size:12.5px; /* Auf die MITTE der ersten Textzeile ausgerichtet, nicht auf ihre Oberkante. Der Kasten ist 32px hoch, die Titelzeile 17px x 1.55 = 26.35px - der Unterschied gehoert zur Haelfte nach oben. Vorher standen hier feste 3px nach UNTEN, der Kasten sass damit rund 6px zu tief. */ margin-top:calc((17px * 1.55 - 32px) / 2)} .svcdeep .sd-num.relevant{background:var(--gruen);border-color:var(--gruen);color:#fff} /* Die Nummer traegt die Einordnung mit (Vorgabe 15.09.2026): Foerder-Pflicht im Nussbraun, gesetzlich vorgeschrieben im hellen Braun, freiwillig im hellsten Beige. Drei Stufen, die von dunkel nach hell abnehmen - wie die Verbindlichkeit. */ .svcdeep .sd-num--gesetz{background:var(--sand-deep);border-color:var(--sand-deep);color:var(--ink)} .svcdeep .sd-num--frei{background:var(--sand);border-color:var(--sand);color:var(--graphit)} .svcdeep:not(.foerder-relevant) .sd-name{color:var(--graphit)} .sd-main{flex:1;min-width:0} /* Kartenkopf = Klickfläche: zugeklappt nur Name + Tag + Preis, Details klappen auf */ .sd-head{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;font-size:17px;width:100%;background:none;border:none;padding:0;margin:0;font-family:var(--font);color:var(--ink);text-align:left;cursor:pointer} .sd-head:hover .sd-name{color:var(--gruen)} .sd-head .price{font-size:16px;font-weight:700;white-space:nowrap;font-family:var(--mono);margin-left:auto} .sd-head .sd-name{margin:0;font:inherit;font-weight:700;transition:color .12s;flex:1;min-width:0} .sd-head .sd-name .tag{margin-left:8px;vertical-align:middle} .sd-head .sd-chev{flex:0 0 auto;font-family:var(--mono);font-size:12px;color:var(--muted);margin-top:4px;transition:transform .2s ease} .svcdeep.open .sd-head .sd-chev{transform:rotate(180deg)} .sd-body .sd-cols{margin-top:16px} .sd-info-btn{flex:0 0 auto;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--line);background:none;color:var(--muted);font-family:var(--mono);font-size:11px;font-style:italic;font-weight:700;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;margin-left:8px;vertical-align:middle;padding:0;transition:border-color .12s,color .12s,background .12s} .sd-info-btn:hover,.sd-info-btn.active{border-color:var(--gruen);color:var(--gruen);background:var(--gruen-tint)} .sd-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:16px 20px;margin-top:14px} @media(max-width:640px){.sd-cols{grid-template-columns:1fr}} .sd-l{font-family:var(--mono);font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--bernstein)} .sd-col .sd-l{display:block;margin-bottom:5px} .sd-col ul{list-style:none;display:flex;flex-direction:column;gap:5px} .sd-col li{position:relative;padding-left:13px;font-size:13.5px;line-height:1.5;color:var(--graphit)} .sd-col li::before{content:"–";position:absolute;left:0;color:var(--muted)} .sd-src{display:block;font-family:var(--mono);font-size:10.5px;color:var(--muted);margin-top:12px} /* ---------- Foerderung-Reiter auf dem Handy vereinheitlicht (Messung 30.07.2026) ---------- Drei Befunde auf 390px: 1. Die rechte Spalte traegt nicht immer einen Preis, sondern auch Textlabel ("Festpreise je Komponente", "inklusive"). Mit white-space:nowrap belegte so ein Label ueber 200px, der Servicename wurde auf ein Wort pro Zeile gequetscht ("Abgleich" / "(Verfahren" / "B)") und die beiden ueberdruckten sich optisch. 2. Das Pflicht-Tag steckt inline IM Namen und hing dadurch 8px versetzt hinter dem letzten Wort - die Kanten im Reiter lagen bei 70px (Name) und 78px (Tag). 3. .sd-head war 40px hoch, also unter dem Tippziel von 44px. Ziel: eine Kante je Ebene, Label darf umbrechen, Tag sitzt buendig unter dem Namen. */ @media(max-width:576px){ .sd-head{column-gap:10px;min-height:44px;align-items:flex-start} .sd-head .sd-name{flex:1 1 auto;min-width:0;line-height:1.3} /* NUR lange Beschriftungen umbrechen lassen (Klasse setzt konfigurator.js nach Textlaenge). Vorher galt white-space:normal fuer die ganze Spalte - dadurch zerfiel "999 €" in "999" und "€" auf zwei Zeilen. Echte Betraege bleiben unteilbar. */ .sd-head .price{text-align:right;font-size:14.5px;line-height:1.35} .sd-head .price-lang{white-space:normal;max-width:42%} /* Tag auf eigene Zeile, buendig mit dem Namen darueber - nicht mehr eingerueckt. */ .sd-head .sd-name .tag{display:block;width:fit-content;max-width:100%;margin-left:0;margin-top:7px} .sd-head .sd-chev{margin-top:6px} /* Materialzeilen und ihre Hinweis-Tags auf dieselbe Kante wie die Zeile selbst. */ .mat-row .tag{margin-left:0;margin-top:5px} } /* ---------- Reviews-Slot ---------- */ .reviewrow{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px} @media(max-width:768px){.reviewrow{grid-template-columns:1fr}} .reviewcard{background:var(--card);border:1px dashed var(--line);border-radius:var(--radius);padding:24px;text-align:center} .reviewcard .stars{font-size:18px;letter-spacing:4px;color:var(--line)} .reviewcard p{font-size:13.5px;color:var(--muted);margin-top:12px} /* ---------- Fallbeispiele (extern) ---------- */ /* ZWEI SPALTEN STATT DREI (Vorgabe 21.09.2026). Die Karten tragen Fliesstext; bei drei Spalten blieben je rund 300px, in denen jeder Satz zwei- bis dreimal umbricht. Zu zweit haben sie rund 460px und lesen sich in ganzen Zeilen. Sind mehr als zwei Bloecke angelegt, rutscht der dritte in die naechste Reihe und steht dort halbbreit links - das ist gewollt und kein Rest: Ein Raster, das die letzte Karte ueber beide Spalten zoege, machte sie groesser als die beiden darueber. */ /* ZWEI TEXTABSCHNITTE STATT ZITATKARTEN (28.09.2026, Vorgabe Claras: "die Fallbeispiele auf der Startseite bitte in einen normalen Textabschnitt mit Ueberschrift und Text, bzw. in zwei Abschnitte"). Untereinander und auf Lesebreite, nicht mehr nebeneinander: Ein Absatz, den man liest, will keine halbe Spalte sein. Der Abstand ist der einzige Wert hier - Ueberschrift und Text kommen aus .seiten-absatz. */ .falltext{display:flex;flex-direction:column;gap:38px;margin-top:40px} /* Der Verweis unter einem Absatz (29.09.2026). Linksbuendig unter dem Text, nicht mittig wie .shop-backlink - er gehoert zum Absatz darueber und beginnt deshalb an derselben Kante. Groesse und Farbe wie dort: Es ist derselbe Weg weiter, nur an einem anderen Ort. */ /* ---------- SEITEN-KACHELN (29.09.2026) ---------------------------------------------- Drei Bildkacheln mit Titel und Pfeil, jede ein Verweis auf eine Seite. Vorbild ist ein Screenshot von otinga.de, den Clara mitgeschickt hat: Bild, grosser heller Titel unten links, darunter ein langer Pfeil. DIE KACHEL IST DER VERWEIS - deshalb als Raster-Element, nicht ein Kasten mit einem Link darin. position:relative traegt den Textblock, overflow:hidden haelt das Bild in den runden Ecken. FESTES SEITENVERHAELTNIS statt fester Hoehe: Die drei Kacheln sind dadurch gleich hoch, egal welches Bild darin liegt, und wachsen mit der Spaltenbreite. 4:3 ist etwa, was das Vorbild zeigt. DER VERLAUF MACHT DIE SCHRIFT LESBAR, nicht eine Flaeche ueber dem ganzen Bild: Oben bleibt das Foto unveraendert, nach unten wird es dunkler. Ein gleichmaessiger Schleier haette das Bild ueberall gedaempft, auch dort, wo kein Text steht. OHNE BILD BLEIBT DIE KACHEL DUNKEL statt leer: --ink als Grund, der Titel steht weiter da. Der Weg soll auch dann begehbar sein, wenn niemand ein Foto hinterlegt hat. */ .kacheln{padding-top:0} .kachelreihe{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px} .kachelreihe .kachel{position:relative;display:block;aspect-ratio:4/3;overflow:hidden; border-radius:var(--radius);background:var(--ink);text-decoration:none; box-shadow:var(--shadow)} .kachelreihe .kachel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; transition:transform .45s cubic-bezier(.2,.8,.2,1)} .kachelreihe .kachel:hover img{transform:scale(1.04)} .kachelreihe .kachel::after{content:"";position:absolute;inset:0; background:linear-gradient(to bottom,rgba(20,18,15,0) 38%,rgba(20,18,15,.62) 100%)} .kachel-text{position:absolute;left:0;right:0;bottom:0;z-index:1;display:flex; flex-direction:column;gap:6px;padding:22px 24px;color:#fff} .kachel-titel{font-weight:800;font-size:clamp(22px,2.4vw,30px);letter-spacing:-.015em; line-height:1.15;text-shadow:0 1px 10px rgba(20,18,15,.35)} /* Die kleine Zeile unter dem Titel (29.09.2026). Deutlich kleiner und leichter als er - sie erklaert, er benennt. Auf 42 Zeichen begrenzt, damit sie in zwei bis drei Zeilen bleibt und das Bild nicht zudeckt; der Schatten haelt sie auch ueber hellen Stellen lesbar. Auf dem Telefon ist die Kachel flacher (16:9) - dort noch eine Spur kleiner. */ .kachel-sub{font-size:13px;line-height:1.4;font-weight:600;max-width:42ch; text-shadow:0 1px 8px rgba(20,18,15,.45);opacity:.95} .kachel-pfeil{font-size:20px;line-height:1;transition:transform .25s cubic-bezier(.2,.8,.2,1)} .kachelreihe .kachel:hover .kachel-pfeil{transform:translateX(6px)} .kachelreihe .kachel:focus-visible{outline:3px solid var(--bernstein);outline-offset:3px} @media (prefers-reduced-motion: reduce){ .kachelreihe .kachel img,.kachel-pfeil{transition:none} .kachelreihe .kachel:hover img{transform:none} } /* Untereinander statt drei nebeneinander: Ein Drittel von 360px ist keine Kachel mehr, sondern ein Streifen. Flacher als auf dem Desktop, damit drei gestapelte Bilder nicht die halbe Seite einnehmen. */ @media(max-width:768px){ .kachelreihe{grid-template-columns:1fr;gap:12px;margin-top:28px} .kachelreihe .kachel{aspect-ratio:16/9} .kachel-text{padding:16px 18px;gap:4px} .kachel-sub{font-size:11.5px;line-height:1.35} } .absatz-mehr{margin-top:14px} .absatz-mehr a{color:var(--gruen);font-weight:700;font-size:14.5px;text-decoration:none} .absatz-mehr a:hover{text-decoration:underline} @media(max-width:768px){.falltext{gap:30px;margin-top:30px}} /* .fallrow und .fallcard zeichnen seit dem 28.09.2026 nichts mehr - die Section gibt diese Klassen nicht mehr aus. Sie bleiben stehen, damit ein Zurueck nur die Section-Datei kostet; die drei Fallbeispiele liegen unveraendert im Live-Theme. */ .fallrow{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:44px} @media(max-width:768px){.fallrow{grid-template-columns:1fr}} .fallcard{display:flex;flex-direction:column;gap:12px} .fallcard .fb-save{font-family:var(--mono);font-weight:700;font-size:19px;color:var(--gruen)} .fallcard .fb-tags{display:flex;flex-wrap:wrap;gap:6px 10px;font-size:12px;color:var(--muted)} .fallcard p{font-size:14px;color:var(--graphit);line-height:1.5} .fallcard .fb-src{font-family:var(--mono);font-size:10px;color:var(--muted);opacity:.75;margin-top:auto;text-transform:uppercase;letter-spacing:.03em} /* ---------- Magazin ---------- */ .magrow{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:44px} @media(max-width:1024px){.magrow{grid-template-columns:1fr 1fr}} @media(max-width:576px){.magrow{grid-template-columns:1fr}} .magcard{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--line);border-radius:var(--radius);padding:22px;display:flex;flex-direction:column;gap:10px;width:100%;font-family:var(--font);text-align:left;cursor:pointer;transition:border-color .15s,transform .15s} .magcard:hover{border-color:var(--gruen);transform:translateY(-2px)} .magcard:nth-child(1){border-left-color:var(--gruen)} .magcard:nth-child(2){border-left-color:var(--bernstein)} .magcard:nth-child(3){border-left-color:var(--ink)} .magcard:nth-child(4){border-left-color:var(--graphit)} .magcard .mc-kat{font-family:var(--mono);font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--bernstein)} .magcard .mc-read{display:inline-block;font-family:var(--mono);font-size:11px;font-weight:700;color:var(--gruen);width:fit-content;margin-top:auto} .magcard b{font-size:16px;line-height:1.3;flex:1} a.magcard{text-decoration:none;color:inherit} /* Artikel-/Blogseiten (Shopify-Blog im billigerWaermepumpe-Look) */ .artpage{max-width:720px} .art-meta{margin-top:10px;font-size:12px;color:var(--muted)} .art-hero{width:100%;height:auto;border-radius:var(--radius);margin-top:22px} .art-cta{margin-top:40px;padding:24px;background:var(--card);border:1.5px solid var(--line);border-radius:var(--radius);display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between} .art-cta b{font-size:17px} .art-cta .btn{width:auto} .blog-pager{display:flex;gap:16px;align-items:center;margin-top:36px} .blog-pager .btn{width:auto} /* Forum-Kommentare (native Shopify-Kommentarfunktion, siehe article.liquid) */ .comments{margin-top:40px;padding-top:28px;border-top:1px solid var(--line)} .comment{padding:16px 0;border-bottom:1px dashed var(--line)} .comment-meta{display:flex;justify-content:space-between;gap:10px;font-size:13px;color:var(--muted);margin-bottom:6px} .comment-body{font-size:14.5px;color:var(--graphit);line-height:1.6} .comment-success{background:var(--gruen-tint);color:var(--ink);border-radius:var(--radius-s);padding:14px 16px;font-size:13.5px;margin:16px 0} .comments h3{margin-top:28px} .comments label{display:block;font-size:13px;font-weight:600;margin:12px 0 4px} .comments input[type=text],.comments input[type=email],.comments textarea{display:block;width:100%;max-width:440px;font-family:var(--font);font-size:16px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius-s);background:var(--card);color:var(--ink)} .comments textarea{resize:vertical} .comments button[type=submit]{margin-top:14px} /* ---------- Artikel-Overlay (Mockup-Vorschau aus "Wissen") ---------- */ .artoverlay{position:fixed;inset:0;z-index:90;background:rgba(43,33,26,.5);backdrop-filter:blur(3px);display:none;align-items:flex-start;justify-content:center;padding:64px 20px;overflow-y:auto} .artoverlay.show{display:flex} .artpanel{position:relative;background:var(--paper);border-radius:var(--radius);max-width:680px;width:100%;padding:44px 40px 48px;box-shadow:var(--shadow-lift)} @media(max-width:640px){.artpanel{padding:32px 22px 36px}} .artclose{position:absolute;top:18px;right:18px;width:34px;height:34px;border-radius:8px;border:1px solid var(--line);background:var(--card);color:var(--muted);font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .12s,color .12s} .artclose:hover{border-color:var(--gruen);color:var(--gruen)} .art-kat{font-family:var(--mono);font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--bernstein)} .art-title{font-weight:800;font-size:clamp(23px,3.2vw,30px);line-height:1.14;margin-top:10px;letter-spacing:-.01em} .art-body{margin-top:20px;display:flex;flex-direction:column;gap:14px} .art-body p{font-size:15.5px;color:var(--graphit);line-height:1.6} .art-mock{margin-top:26px;padding-top:14px;border-top:1px dashed var(--line);font-family:var(--mono);font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em} /* ---------- Lieferumfang-Popup: Bild + Kurzinfo je Position ---------- */ .lu-panel{max-width:760px} .lu-popgrid{margin-top:22px;display:grid;grid-template-columns:1fr 1fr;gap:6px 20px} @media(max-width:640px){.lu-popgrid{grid-template-columns:1fr}} .lu-popitem{display:flex;gap:14px;padding:14px 0;border-bottom:1px dashed var(--line)} .lu-popimg{flex:0 0 auto;width:60px;height:60px;border-radius:var(--radius-s);overflow:hidden;background:repeating-linear-gradient(135deg,#EFE6D8 0 9px,#E3D3BB 9px 18px);border:1px solid #DDCCB2;display:flex;align-items:center;justify-content:center} .lu-popimg span{font-family:var(--mono);font-size:8px;font-weight:700;color:var(--muted);text-align:center;line-height:1.3} .lu-popmeta{flex:1;min-width:0} .lu-popqty{display:block;font-family:var(--mono);font-weight:700;color:var(--gruen);font-size:12px;margin-bottom:2px} .lu-popmeta b{display:block;font-size:14px;line-height:1.3} .lu-popmeta p{font-size:12.5px;color:var(--muted);margin-top:4px;line-height:1.4} /* ---------- Scroll-Reveal ---------- */ .reveal{opacity:0;transform:translateY(30px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.8,.2,1)} .reveal.in{opacity:1;transform:none} .reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s} @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{transition:none!important;animation:none!important} .reveal{opacity:1;transform:none} .rm-item{opacity:1;transform:none} .lu-pop,.svcchoice{opacity:1} } /* ---------- Topbar ---------- */ /* DIE LEISTE KLEBT BEIM SCROLLEN (Vorgabe 22.09.2026). Sie trug position:sticky schon laenger - ohne Wirkung, und der Grund ist eine Shopify-Eigenheit: Jede mit {% section %} eingebundene Datei liegt in einem eigenen
. Ein sticky-Element klebt nur innerhalb seines ELTERN-Kastens, und der ist hier genau so hoch wie die Leiste selbst. Sie war also die ganze Zeit "sticky" in einem Kasten, aus dem sie nie herauskonnte - und scrollte mit ihm davon. DESHALB KLEBT JETZT DER WRAPPER, eine Regel weiter unten. Dieselbe Falle ist in konfigurator.js schon einmal dokumentiert (beim Rabatt-Balken, wo die Geschwister-Sperre aus demselben Grund ins Leere lief). Das sticky hier bleibt trotzdem stehen: Es kostet nichts, und wuerde die Leiste je aus dem Section-Wrapper herauswandern, klebte sie weiter. */ /* ---------- ANSAGELEISTE UEBER DER NAVIGATION (01.10.2026) ---------- Vorgabe Claras, nach einem Bildschirmfoto von klekks.de: eine schmale Leiste ueber der Navigation, "in Gelb und mit zwei Textfeldern". EIGENES GELB STATT --bernstein: Der Bernstein der Seite (#B98B3E) ist ein gedecktes Ocker - als Flaeche ueber die volle Breite liest er sich braun, nicht gelb. #F5C542 ist dasselbe Gelb eine Stufe heller und gesaettigter; die Schrift bleibt --ink, damit der Kontrast reicht (dunkel auf hell, rund 9:1 - weisse Schrift auf diesem Gelb waere unlesbar gewesen). SIE IST NICHT STICKY, die Navigation darunter schon. Beim Scrollen wandert sie hinaus und die Navigation legt sich an den Rand - wie im Bildschirmfoto. ZWEI TEXTE MITTIG MIT GROSSEM ABSTAND, nicht an die Raender gedrueckt: Im Vorbild sind es drei, die die Breite fuellen; zwei an den Aussenkanten saehen aus, als fehle ein dritter in der Mitte. Der Abstand waechst mit dem Fenster und ist gedeckelt, damit sie auf einem grossen Schirm nicht auseinanderfallen. UMBRUCH STATT GEDRAENGE: Auf dem Telefon passen die beiden Saetze nicht nebeneinander. Sie brechen dann untereinander - lieber zwei Zeilen als zwei abgeschnittene Haelften. */ /* ---- Neuheiten-Leiste ganz oben (15.10.2026, Vorgabe Claras) ---- ZUERST WAR SIE WALNUSS MIT SAND, also dunkelbraun. Claras Urteil nach dem Ansehen: "mach die eher beige oder helles Braun - die soll auffallen, aber nicht so sehr." Richtig: Das dunkle Braun war der staerkste Ton auf der ganzen Seite und stand ueber der gelben Leiste, also noch ueber dem, was dauerhaft gilt. Eine Neuheit soll auffallen und nicht herrschen. JETZT SAND-DEEP MIT TINTE. Nachgerechnet statt geschaetzt: Tinte auf #E3D3BB traegt 8,8:1 und besteht AAA. Gegen den Seitengrund (#F7F5F1) ist die Flaeche deutlich genug - sie hat rund drei Viertel von dessen Helligkeit, und die feine Kante nach unten setzt sie zusaetzlich ab. Das hellere --sand (#EFE6D8) waere dem Papier zu nah gewesen und haette wie ein Rand gewirkt, nicht wie eine Leiste. EINE STUFE LEISER ALS DIE GELBE: 12 statt 13 Punkte, Gewicht 600 statt 700. Zwei gleich laute Leisten uebereinander haben keine Rangfolge, und die gelbe traegt die Zusagen, die dauerhaft gelten. */ .neuheit{background:var(--sand-deep);color:var(--ink);font-weight:600;font-size:12px; line-height:1.35;border-bottom:1px solid rgba(51,49,45,.10)} /* DIESELBEN MASSE WIE DIE GELBE DARUNTER (15.10.2026, Meldung Claras: die beiden Leisten passen nicht zueinander). WAS NICHT ZUSAMMENPASSTE, WAR DIE HOEHE. Die gelbe Leiste traegt min-height:36px und align-items:center - sie ist also immer 36 Punkte hoch, egal wie kurz der Text ist. Die neue hatte nur Polsterung und war damit rund sechs Punkte flacher. Zwei Baender uebereinander, von denen eines schmaler ist, lesen sich nicht als Paar, sondern als Versehen - und weil die Schrift der oberen zusaetzlich kleiner ist, wirkte der Unterschied groesser, als er war. DIE SCHRIFT BLEIBT EINE STUFE LEISER (12 statt 13 Punkte, Gewicht 600 statt 700): Das ist die Rangfolge zwischen Neuheit und Dauerzusage und war so gewollt. Angeglichen wird der KASTEN, nicht der Ton. */ .neuheit .wrap{display:flex;align-items:center;justify-content:center; gap:8px;text-align:center;min-height:36px;padding-block:7px} /* KEINE VERWEIS-ZEICHEN (15.10.2026, Vorgabe Claras: "stelle es nicht als Verlinkung mit Unterstrich oder so dar"). Weder Unterstreichung noch Pfeil, auch nicht beim Ueberfahren; die Schrift erbt ihre Farbe von der Leiste. Als Hinweis bleibt der Mauszeiger, den ein a-Element ohnehin mitbringt - das ist genau so viel, wie gewuenscht ist, und auf dem Telefon gibt es ihn gar nicht. */ /* Das Zeichen steht IM Punkt, nicht daneben: Beide Leisten sind Flexkaesten, die ihre Punkte verteilen - ein Zeichen als eigenes Kind waere ein zusaetzlicher Punkt und haette die Verteilung verschoben. Deshalb inline-flex am span und Abstand ueber die Luecke. 1em hoch und currentColor: Es waechst mit der Schrift mit und traegt deren Farbe, in der gelben wie in der beigen Leiste. */ .neuheit .wrap > span,.neuheit .wrap > a, .ansage .wrap > span{display:inline-flex;align-items:center;gap:7px} .lz-ikon{flex:0 0 auto;width:1.15em;height:1.15em;display:block} .neuheit a{color:inherit;text-decoration:none} .neuheit a:hover,.neuheit a:focus{text-decoration:none} /* Die Tastatur braucht trotzdem eine sichtbare Marke - sonst waere der Verweis fuer sie unauffindbar. :focus-visible trifft nur die Tastatur, nicht den Mausklick. */ .neuheit a:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px} /* Auf dem Telefon faellt die Mindesthoehe bei beiden weg und die Polsterung sinkt auf 6 - dieselben Werte wie bei .ansage eine Regel weiter unten. */ @media(max-width:576px){ .neuheit{font-size:11.5px} .neuheit .wrap{padding-block:6px;min-height:0} } .ansage{background:#F5C542;color:var(--ink);font-weight:700;font-size:13px;line-height:1.35} .ansage .wrap{display:flex;align-items:center;justify-content:center;flex-wrap:wrap; gap:6px clamp(24px,7vw,110px);min-height:36px;padding-block:7px;text-align:center} /* AUF DEM TELEFON NUR DIE FOERDERUNG (02.10.2026, Vorgabe Claras: "bei der Mobile-Version in der Zeile ueber der Nav-Zeile nur das mit der vollen Foerderung anzeigen lassen"). DER ZWEITE TEXT WIRD AUSGEBLENDET, NICHT GELOESCHT: Im Editor stehen weiter beide, und ab 769px erscheinen auch beide. Wer den zweiten dort leert, nimmt ihn ueberall weg - diese Regel entscheidet nur ueber die schmalen Schirme. span + span UND NICHT :last-child: Steht nur EIN Text in der Leiste, ist er zugleich der letzte - :last-child haette ihn mit ausgeblendet und die Leiste leer zuruecklassen. "Jeder span, vor dem schon ein span steht" trifft dagegen nur den zweiten. DIE GRENZE LIEGT BEI 768px, der Tablet-Grenze des Themes. Nachgerechnet brauchen beide Saetze zusammen rund 900px; zwischen 769 und etwa 990px stehen sie deshalb weiterhin da, dann aber in zwei Zeilen. Wer das auch dort einzeilig will, zieht die Grenze hoch. */ @media(max-width:768px){ .ansage .wrap span + span{display:none} /* IM WECHSEL STATT NUR DER ERSTE (14.10.2026, Vorgabe Claras: "kannst du das im 10-Sekunden-Takt veraendern, sodass man nacheinander alle sieht"). DIE KLASSE SETZT DAS SKRIPT DER SECTION, nicht Liquid: Solange sie fehlt, gilt die Regel darueber und es steht der erste Punkt da - der Stand von vorher. Erst wenn der Wechsel wirklich laeuft, uebernimmt "an" das Zeigen. Ohne diese Reihenfolge waere die Leiste bei abgeschaltetem JavaScript leer. */ .ansage .wrap.laeuft span{display:none} /* inline-flex UND NICHT inline (berichtigt am 16.10.2026, Meldung Claras: "bei mobil ist in der oberen gelben Leiste das Icon nicht in der gleichen Zeile wie der Text"). Seit dem 16.10.2026 steht in jedem Punkt ein Zeichen, und das ist ein Blockelement. Mit display:inline am Punkt bricht es auf eine eigene Zeile - die Regel hier wiegt vier Klassen und schlaegt die allgemeine inline-flex-Zeile weiter oben. */ .ansage .wrap.laeuft span.an{display:inline-flex;animation:ansageAuf .45s ease} @keyframes ansageAuf{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}} @media(prefers-reduced-motion:reduce){ .ansage .wrap.laeuft span.an{animation:none} } } @media(max-width:576px){ .ansage{font-size:11.5px} .ansage .wrap{gap:3px 14px;padding-block:6px;min-height:0} } .topbar{position:sticky;top:0;z-index:60;background:rgba(249,245,236,.9);backdrop-filter:blur(10px)} #shopify-section-billigerwaermepumpe-topbar{position:sticky;top:0;z-index:60} /* DER INHALT DER LEISTE STEHT IN DER SPALTE DER SEITE - nur ihr Grund ist randlos. So macht es das Vorbild (klekks.com): Auf der Aufnahme vom grossen Schirm beginnt das Logo an GENAU derselben Kante wie das Produktraster darunter, waehrend der weisse Grund der Leiste von Rand zu Rand laeuft. DAS NIMMT MEINE EIGENE AENDERUNG VON HEUTE VORMITTAG ZURUECK. Die Vorgabe damals lautete, alles in der Leiste ueber den ganzen Bildschirm zu ziehen, und ich hatte sie dafuer aus der Spalte genommen (--tb-rand, zuletzt 4,3 Prozent nach dem solago-Vorbild). Das neue Vorbild zeigt das Gegenteil, und es ist das juengere Wort - deshalb steht die Leiste wieder in der Spalte, und --tb-rand ist ersatzlos entfallen statt auf einen Wert gesetzt zu werden, den niemand mehr liest. Die Leiste braucht damit gar keine eigene Breitenregel mehr: .wrap bringt Spalte und Rand von sich aus mit. Was bleibt, ist die Aufteilung in drei Spalten darunter - Logo links, Navigation mittig, Aktionen rechts; die zeigt das Vorbild auf beiden Aufnahmen so. */ .topbar .wrap{height:64px;display:flex;align-items:center;justify-content:space-between;gap:12px} /* DREI SPALTEN: LOGO LINKS, NAVIGATION MITTIG, AKTIONEN RECHTS (22.09.2026, Vorbild klekks.com). Bis dahin lief die Leiste als eine Reihe, in der die Reiter direkt hinter dem Logo begannen - bei voller Leistenbreite also weit links, wo darunter kein Text steht. DIE MITTIGE NAVIGATION LOEST DIE FRUEHERE VORGABE VON SELBST ("die Reiter duerfen nicht links vom Seitentext beginnen"): In der Mitte der Leiste liegen sie immer rechts von dieser Kante. Die Rechnung, die die Logo-Gruppe vorher genau bis zur Textkante verbreiterte, ist damit ersatzlos entfallen - sie wuerde die Mitte jetzt sogar verschieben. Ein Stueck Technik, das seinen Zweck verloren hat, bleibt nicht stehen. minmax(0,auto) fuer die Mitte, 1fr fuer die Seiten: Die Seitenspalten werden nie schmaler als ihr Inhalt - Logo und Knoepfe duerfen nicht abgeschnitten werden -, die Navigation dagegen schon. Sie bringt fuer diesen Fall ihre eigenen Randverlaeufe mit und schneidet sauber ab. Bei reichlich Platz sind beide Seiten gleich breit und die Navigation steht mittig; wird es eng, weicht sie als Erste. ERST AB 861px, denn darunter ist die Navigation ausgeblendet: Mit drei Spalten und nur zwei sichtbaren Kindern landeten die Knoepfe rechts in der MITTLEREN Spalte. Unterhalb bleibt es bei der Reihe von vorher. */ .tb-links{display:flex;align-items:center;gap:10px} .tb-rechts{display:flex;align-items:center;gap:10px} @media(min-width:993px){ .topbar .wrap{display:grid;grid-template-columns:1fr minmax(0,auto) 1fr} /* DIE SPALTE STEHT AUSDRUECKLICH AN JEDER GRUPPE und wird nicht der Reihenfolge ueberlassen. Im Produkt-Modus faellt die Navigation weg; ohne diese Zuweisung waere die rechte Gruppe das zweite verbliebene Kind und landete in der MITTLEREN Spalte - der Warenkorb staende mitten in der Leiste statt rechts. */ .topbar .tb-links{grid-column:1;justify-self:start} .topbar .navwrap{grid-column:2;justify-self:center} .topbar .tb-rechts{grid-column:3;justify-self:end} } /* Logo-Farblogik Pfad B2: "billiger" und ".de" bilden die Gelb-Klammer als Flaeche mit Ink-Text (Gelb als reine Textfarbe waere unlesbar), der Mittelteil steht in der neutralen Ink-Farbe */ .logo{font-weight:800;font-size:19px;letter-spacing:-.01em;text-decoration:none;color:var(--ink);white-space:nowrap} .logo .accent{background:var(--rost);color:var(--ink);padding:1px 6px;border-radius:var(--radius-xs)} .logo em{color:var(--ink);font-style:normal;font-weight:700} .resume{display:inline-block;font-family:var(--font);font-weight:800;font-size:14px;color:var(--ink);background:var(--rost);border:2px solid var(--ink);border-radius:var(--radius-pill);padding:9px 19px;cursor:pointer;white-space:nowrap;transition:background .12s,transform .15s;box-shadow:var(--shadow-lift)} .resume:hover{background:var(--rost-dark);transform:scale(1.04)} .resume .pct{color:var(--ink)} /* ---------- Hero ---------- */ .hero{padding:88px 0 96px} @media(max-width:768px){.hero{padding:52px 0 64px}} .hero .wrap{display:grid;grid-template-columns:1.08fr .92fr;gap:64px;align-items:center} @media(max-width:992px){.hero .wrap{grid-template-columns:1fr;gap:36px}} .hero h1{font-weight:800;font-size:clamp(42px,6.6vw,74px);line-height:1.02;letter-spacing:-.025em;margin-top:16px} .hero .lead{font-size:19px;color:var(--graphit);margin-top:18px;max-width:40ch} /* Preis-Highlight Pfad B2: Gelb-Flaeche mit Ink-Text statt reiner Textfarbe (Kontrast auf hell) */ .hero .lead .m{background:var(--rost);color:var(--ink);font-weight:800;padding:1px 10px;border-radius:var(--radius-xs);white-space:nowrap} .hero .lead s{color:var(--muted);text-decoration-color:var(--bernstein-dark);text-decoration-thickness:2px} .heroq{margin-top:44px} .heroq .hq{font-weight:800;font-size:18px} .heroq .hq-sub{font-family:var(--mono);font-size:11.5px;color:var(--muted);margin:4px 0 16px} .heroimg svg{width:100%;height:auto;display:block} /* KI-Kennzeichnung am Hero-Bild (AI Act, User-Vorgabe 30.07.2026). Sie muss ohne Zutun lesbar sein - nicht als Tooltip, nicht erst beim Hovern, und nicht als Fussnote weit weg vom Bild. Unten rechts in der Bildecke, mit eigener Flaeche, damit sie auf hellem wie dunklem Bildinhalt trifft. Bewusst leise: sie informiert, sie wirbt nicht. */ .heroimg{position:relative} /* KLEINER SEIT DEM 02.10.2026 (Vorgabe Claras: "der Hinweis, dass es mit KI erzeugt ist, bitte kleiner"). 9,5px statt 11, duennere Polsterung, blasser. ER BLEIBT ABER DA UND BLEIBT LESBAR: Die EU-KI-Verordnung verlangt, dass kuenstlich erzeugte Bilder als solche erkennbar sind - "kleiner" heisst deshalb kleiner, nicht versteckt. Der Kasten mit dem leichten Hintergrund bleibt, sonst stuende die Zeile je nach Bildstelle auf hellem oder dunklem Grund. */ .heroimg-ki{position:absolute;right:10px;bottom:10px;z-index:2;max-width:calc(100% - 20px); font-family:var(--font);font-size:9.5px;font-weight:600;line-height:1.3; color:var(--graphit);background:rgba(247,245,241,.78); -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px); padding:3px 7px;border-radius:var(--radius-xs);border:1px solid rgba(51,49,45,.08)} @media(max-width:992px){ /* Auf dem Handy laeuft das Bild unten weich aus (mask-image) - der Hinweis wandert deshalb nach oben, sonst steht er im ausgeblendeten Bereich. */ /* KLEINER UND IN DIE RECHTE UNTERE ECKE (02.10.2026, Vorgabe Claras: "bei Mobile den KI-Hinweis noch kleiner und bitte rechts in die Ecke machen"). ER STAND OBEN RECHTS, aus der Zeit, als das Bild unter dem Text eine eigene Spalte hatte - dort war unten die weiche Kante. Jetzt liegt das Foto hinter dem Text, und die Ecke unten rechts ist die ruhigste Stelle: Darueber steht die Knopfreihe, nicht die Ueberschrift. 8,5px UND ENGER GEPOLSTERT, aber weiterhin mit Kasten: Die Kennzeichnung kuenstlich erzeugter Bilder ist Pflicht, "kleiner" heisst kleiner und nicht unlesbar. Ohne den leichten Hintergrund stuende die Zeile je nach Bildstelle auf hell oder dunkel. */ .heroimg-ki{top:auto;bottom:6px;right:6px;font-size:8.5px;padding:2px 5px;line-height:1.25} } /* ---------- Options / Chips / Inputs (geteilt Hero + Rechner) ---------- */ /* ZWEI SPALTEN ALS NORMALFALL (14.10.2026, Vorgabe Claras: "die Antworten bitte nicht so breit darstellen - lieber wieder normaler und dafuer auch zweispaltig"). BISHER WAR EINE SPALTE DER NORMALFALL und cols2 die Ausnahme (viermal im Code). Solange der Rechner in der halben Seitenbreite stand, war eine Kachel ueber die ganze Zeile unauffaellig. Seit der Umstellung auf eine Spalte ist die Textspalte 680 px breit - und darin wurde aus "Saniert / Neubau, komplett saniert" ein Balken ueber die volle Strecke fuer drei Woerter. auto-fit STATT EINER FESTEN ZWEI: Die Regel gilt damit fuer JEDE Antwortliste, ohne dass jemand beim naechsten neuen Schritt an das Wort "cols2" denken muss - und sie faellt von selbst auf eine Spalte zurueck, wo keine zwei 240er nebeneinander passen. Bei 680 px Textspalte sind das zwei Spalten zu je rund 335 px. min(100%,240px) UND NICHT NUR 240px: Ohne die Klammer waere die Mindestbreite auf einem schmalen Telefon groesser als die Spalte selbst, und das Raster liefe ueber den Rand hinaus. Die ausdrueckliche Regel fuer Telefone darunter bleibt trotzdem stehen: Dort soll EINE Spalte stehen, auch wenn rechnerisch zwei passen wuerden. */ .options{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))} /* DIE WEICHE BEKOMMT HOEHERE KACHELN (14.10.2026, Vorgabe Claras). Sie ist die einzige Frage, hinter der zwei verschieden lange WEGE stehen und nicht zwei Antworten - und die einzige mit drei Zeilen Erklaerung je Kachel. Mehr Hoehe gibt diesem Text Raum und der Entscheidung Gewicht, ohne eine zweite Bauform einzufuehren: Es bleibt button.opt. align-items:flex-start statt center: In einer 170px hohen Kachel schwebte das Symbol sonst auf halber Hoehe neben einem Absatz, zu dem nur seine erste Zeile gehoert. */ /* DIE AUFTEILUNG DER WEICHE (15.10.2026, Vorgabe Claras zu einem Screenshot aus der neuen HTML: "die Frage nach der Heizlast bitte nicht in dem Stil wie der Screenshot machen, aber die Aufteilung wie in diesem Screenshot"). STIL UND AUFTEILUNG SIND ZWEI SACHEN. Die Vorlage hat gelbe Pillenknoepfe und runde Umrisse - das ist ihr Stil und bleibt draussen. Die AUFTEILUNG ist die Reihenfolge untereinander: Zeichen oben, Titel, Beschreibung, und unten ein Aufruf. Bis heute lag das Zeichen LINKS neben dem Text, der Aufruf fehlte ganz. flex-direction:column ist der ganze Umbau. margin-top:auto am Aufruf drueckt ihn an die Unterkante, damit er in beiden Kacheln auf derselben Hoehe steht - auch wenn der eine Titel zwei Zeilen braucht und der andere eine. DER AUFRUF SIEHT NICHT WIE EIN KNOPF AUS, und das ist Absicht: Er sitzt in einer Kachel, die selbst schon ein Knopf ist. Ein Knopf im Knopf laedt zum Zielen auf die falsche Stelle ein, obwohl die ganze Flaeche auslöst. Deshalb die Form eines Verweises - Walnuss, fett, mit dem Pfeil aus dem Text. Beim Ueberfahren der Kachel zieht er mit nach rechts. */ .options.weiche button.opt{min-height:clamp(150px,19vh,190px);padding:20px; flex-direction:column;align-items:flex-start;gap:13px} .options.weiche button.opt .oi{width:40px;height:40px} .options.weiche button.opt .oi svg{width:23px;height:23px} .options.weiche button.opt>span{font-size:17px;line-height:1.25} .options.weiche button.opt small{margin-top:6px;font-size:13.5px;line-height:1.45} .opt-cta{margin-top:auto;font-size:14.5px;font-weight:800;color:var(--gruen); display:inline-block;transition:transform .12s} @media(hover:hover){ button.opt:hover .opt-cta{transform:translateX(3px)} } button.opt.sel .opt-cta{color:var(--ink)} @media(max-width:576px){ .options.weiche button.opt{min-height:0;padding:16px;gap:10px} } .options.cols2{grid-template-columns:1fr 1fr} /* Mobil: EINE Spalte, alles an derselben linken Kante (User-Vorgabe 30.07.2026). Vorher wurden die Kacheln hier auf flex-direction:column gestellt, waehrend die Basisregel weiter align-items:center setzte - Ergebnis: der Inhalt schwebte mittig in einer breiten Karte, obwohl text-align:left gewann. Frage und Unterzeile standen links, die Antwortkarten mittig; genau dieser Bruch liess den Funnel unfertig wirken. Die alte Begruendung ("lange Woerter sprengen die 2-Spalten-Zeile") faellt mit der zweiten Spalte weg: eine volle Zeile traegt "Fernwaerme" und "Waermepumpe" muehelos. Die Hoehe bleibt vergleichbar - 8 Zeilen à 56px statt 4 Kachelreihen à 80px. */ @media(max-width:576px){ .options{gap:8px;grid-template-columns:1fr} .options.cols2{grid-template-columns:1fr} button.opt{min-height:56px;padding:13px 14px;font-size:15.5px;min-width:0} button.opt>span{min-width:0;max-width:100%;overflow-wrap:anywhere} button.opt .oi{width:30px;height:30px} button.opt .oi svg{width:17px;height:17px} button.opt small{font-size:12px;font-weight:500} } button.opt{display:flex;align-items:center;gap:12px;font-family:var(--font);font-size:16px;font-weight:700;text-align:left;padding:14px 16px;min-height:56px;background:var(--card);border:1.5px solid var(--line);border-radius:var(--radius-s);cursor:pointer;transition:border-color .12s,background .12s,transform .1s;color:var(--ink)} button.opt:active{transform:scale(.98)} button.opt:hover{border-color:var(--gruen)} button.opt.sel{border-color:var(--gruen);background:var(--gruen-tint)} button.opt .oi{flex:0 0 auto;width:34px;height:34px;border-radius:var(--radius-s);background:var(--gruen-tint);color:var(--gruen);display:flex;align-items:center;justify-content:center} button.opt .oi svg{width:19px;height:19px} button.opt small{display:block;color:var(--muted);font-size:12.5px;font-weight:500} .chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px} button.chipbtn{font-family:var(--mono);font-weight:700;font-size:17px;min-width:56px;min-height:52px;padding:10px 16px;border:1.5px solid var(--line);border-radius:var(--radius-s);background:var(--card);cursor:pointer;color:var(--ink);transition:border-color .1s,background .1s} button.chipbtn.txt{font-family:var(--font);font-size:14.5px} button.chipbtn.sel,button.chipbtn:hover{border-color:var(--gruen)} button.chipbtn.sel{background:var(--gruen-tint)} .field{margin-top:20px} /* Alle Eingabefelder linksbuendig (User-Vorgabe 30.07.2026). Die Zahlenfelder standen als einzige mittig - im Funnel sass dadurch der eingetippte Wert unter einer linksbuendigen Frage in der Mitte der Karte. Eine Kante fuer alles, was der Nutzer liest oder tippt. */ input[type=number],input[type=text],input[type=email],input[type=tel]{width:100%;font-family:var(--mono);font-size:22px;font-weight:700;padding:15px;border:1.5px solid var(--line);border-radius:var(--radius-s);background:#fff;color:var(--ink);text-align:left} input[type=email],input[type=text],input[type=tel]{font-family:var(--font);font-size:16px;font-weight:600;text-align:left} /* Die beiden Zahlenfelder im Funnel sind bewusst type="text" (deutsche Kommaschreibweise, siehe zahlAus() in konfigurator.js) - optisch bleiben sie aber grosse Zahlenfelder. */ input.zahlfeld{font-family:var(--mono);font-size:22px;font-weight:700} /* Die Einheit sitzt IM Feld, rechts neben der Zahl (14.10.2026). Das Feld bekommt dafuer Platz an der rechten Seite - ohne ihn liefe eine lange Zahl unter das Wort. Wie breit, weiss nur der Browser: 9ch sind neun Nullbreiten der Schrift, also grob "Raummeter". */ /* DIE BEIDEN VORJAHRE STEHEN NEBENEINANDER (14.10.2026, Vorgabe Claras: "die Frage des Jahresverbrauchs, die Antworten bitte auch zweizeilig machen"). SIE STANDEN UNTEREINANDER und machten diese Frage zur mit Abstand laengsten im Rechner: drei grosse Zahlenfelder, dazwischen die Einheitenreihe und der Knopf mit dem typischen Wert. Nebeneinander spart eine ganze Feldhoehe - und das ist dieselbe Frage, an der sich eben noch der Zurueck-Knopf nach unten geschoben hat. DAS ERSTE JAHR BLEIBT ALLEIN UND GROSS: Es ist die Pflichtangabe, die beiden anderen sind freiwillig. Gleich gross nebeneinander gestellt saehen alle drei wie drei Pflichtfelder aus - die Form sagt hier mit, was die Unterzeile erklaert. DIE PLATZHALTER SIND KUERZER GEWORDEN ("Vorjahr" statt "Vorjahr (optional)"): In einem halb so breiten Feld haette der alte Text nicht mehr hineingepasst, und ein abgeschnittener Platzhalter erklaert nichts. Dass die beiden freiwillig sind, steht in der Unterzeile der Frage. */ .field.zwei-jahre{display:grid;grid-template-columns:1fr 1fr;gap:10px} .field.zwei-jahre input.zahlfeld{font-size:17px;min-width:0} @media(max-width:480px){ .field.zwei-jahre{grid-template-columns:1fr} } .field.hat-einheit{position:relative} .field.hat-einheit input.zahlfeld{padding-right:calc(9ch + 18px)} .field.hat-einheit .zf-einheit{position:absolute;right:14px;top:50%;transform:translateY(-50%); pointer-events:none;color:var(--muted);font-size:14px;font-weight:600} input:focus{border-color:var(--gruen);outline:none} input::placeholder{color:#B9A98D;font-weight:500} /* Feldbezogene Fehlermeldung im Funnel - linksbuendig unter dem Knopf, in Rost, damit sie ohne Farbwechsel-Schock auffaellt. Vorher gab es hier gar keine Rueckmeldung. */ .feldfehler{margin-top:10px;font-size:14px;font-weight:600;line-height:1.45;color:var(--rost-dark);text-align:left} .feldfehler[hidden]{display:none} .unitchips{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap} .unitchips .chipbtn{min-height:40px;font-size:13px;padding:6px 14px;font-family:var(--font);font-weight:700} .btn{display:block;width:100%;font-family:var(--font);font-weight:800;font-size:17px;background:var(--rost);color:var(--ink);border:2px solid var(--ink);border-radius:var(--radius-s);padding:15px 24px;cursor:pointer;text-decoration:none;text-align:center;transition:background .12s,transform .08s;margin-top:16px} .btn:active{transform:scale(.985)} .btn:hover{background:var(--rost-dark)} /* Zweite Zeile im Kaufbutton: "100 % erstattbar · keine Bindung" (11.08.2026, Carsten). Leichter gesetzt als das Label darueber - es soll die Hemmung nehmen, nicht mit dem Betrag konkurrieren. KEINE opacity mehr (Review 11.08.2026): opacity:.72 auf ink #33312D ueber Rost #FFC700 drueckt den Kontrast auf rund 4,3:1 - unter den 4,5:1, die WCAG AA fuer Text unter 18,66 px verlangt. Die Zeile traegt eine Rechtsaussage (Erstattbarkeit) und muss lesbar sein. Stattdessen volle Deckkraft und die Zuruecknahme allein ueber Schriftgrad und -gewicht. */ .btn small{display:block;font-family:var(--font);font-size:11.5px;font-weight:600; letter-spacing:0;margin-top:3px} .btn.mid{max-width:340px;margin-left:auto;margin-right:auto} /* Wie .mid, nur ohne die auto-Raender: derselbe schmale Knopf, aber linksbuendig (Vorgabe 22.09.2026 fuer den Rechner-Knopf auf der Foerderseite). Eine eigene Klasse und nicht .mid umgeschrieben - die benutzt auch der End-CTA der Startseite, und der steht in einem zentrierten Abschnitt, wo die Mitte richtig ist. .btn ist ein Block mit width:100%; ohne auto-Raender steht er damit von selbst links. */ .btn.schmal{max-width:340px} .btn.quiet{background:none;color:var(--muted);font-weight:600;font-size:13.5px;padding:10px 4px;margin-top:8px;border:none} .btn.quiet:hover{color:var(--ink);background:none} .btn:disabled{background:var(--line);color:var(--muted);cursor:not-allowed} .btn:focus-visible,button.opt:focus-visible,button.chipbtn:focus-visible,input:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--gruen);outline-offset:2px} /* Linksbuendig wie Frage, Unterzeile und Eingabefeld darueber. Zentriert brach der zweizeilige Text ("Typisch fuers Einfamilienhaus: 8,0 kW · uebernehmen") auf dem Handy in eine schiefe zweite Zeile. */ .typ-default{display:block;width:100%;font-family:var(--mono);font-weight:700;font-size:13px;color:var(--gruen);background:var(--gruen-tint);border:1.5px dashed #E3D3BB;border-radius:var(--radius-s);padding:10px 14px;margin-top:12px;cursor:pointer;text-align:left} .typ-default:hover{border-style:solid} .feedback{font-family:var(--mono);font-size:13.5px;color:var(--gruen);margin-top:12px;min-height:20px;text-align:center} .ghostrow{display:flex;gap:16px;margin-top:14px;justify-content:center;flex-wrap:wrap} /* ---------- Rechner-Sektion ---------- */ #rechnerCalc{background:var(--card);padding:88px 0} @media(max-width:768px){#rechnerCalc{padding:56px 0}} /* EIGENE RECHNERSEITE: durchgehend beige (16.09.2026). Der weisse Grund oben stammt aus der Zeit, als der Rechner mitten im One-Pager stand und sich von den Abschnitten darueber und darunter absetzen musste. Auf seiner eigenen Seite gibt es nichts abzusetzen - dort war er nur ein zweifarbiger Streifen. Die Fragekarte bleibt beige und bekommt stattdessen eine Umrandung, wie die Karten auf den Produktseiten: Ohne den Farbwechsel braucht sie eine Kante, sonst schwebt sie ohne Begrenzung auf dem Untergrund. */ /* padding-top:0 war zu knapp - der Kasten klebte an der Unterzeile der Seite. Der Abschnitt darueber traegt selbst keinen Abstand nach unten (padding-bottom:0), also muss er von hier kommen. 28px: genug, dass Ueberschrift und Kasten zwei Dinge sind, und weit weniger als die 88px des One-Pagers, wo der Rechner sich gegen ganze Abschnitte behaupten muss. */ /* DIE RECHNERSEITE WECHSELT WEISS UND BEIGE AB (02.10.2026). ZWEI VORGABEN AN EINEM TAG, und die zweite dreht die erste um. Zuerst: "beim Rechner selber einen weissen Hintergrund machen, bei 'Warum sich das lohnt' dann wieder der beige, der jetzt schon ist". Dann: "mach 'Was der Rechner dir zeigt' weissen Hintergrund, beim Rechner wieder dieses zarte Beige und bei 'Warum sich das lohnt' wieder weiss." DARAUS VON OBEN NACH UNTEN: weiss - beige - weiss. Die beiden Punktereihen sind die weissen Flaechen, das Werkzeug dazwischen steht auf dem Beige der Seite. Das Werkzeug ist damit wieder die ruhige Mitte zwischen zwei hellen Kaesten, statt selbst herauszustechen. DER RECHNER TRAEGT KEINE EIGENE FARBE MEHR: --paper ist der Seitenhintergrund, also genau das "zarte Beige". Die Zeile bleibt trotzdem stehen, weil sie die Grundregel darueber ueberschreibt - #rechnerCalc steht ohne sie auf --card, einem helleren Sandton. DER KOPF DES WERKZEUGS GEHOERT ZUM RECHNER, nicht zur Reihe darueber: Er traegt Ueberschrift und Zeile des Rechners, und eine Farbkante mitten im Gedanken waere falsch. Er bekommt deshalb gar keine eigene Farbe und folgt der Seite. #fff UND KEIN TOKEN: --card ist in diesem Theme kein Weiss, sondern ein sehr heller Sandton. Reines Weiss als Flaeche gibt es nur hier. */ #rechnerCalc.rechner-seite{background:var(--paper);padding-top:28px} section.land.rechner-zeigt{background:#fff} section.land.rechner-lohnt{background:#fff} .rechner-seite .qcard{border:1px solid var(--line);box-shadow:var(--shadow)} /* Der andere Weg steht unter dem Rechner und ist ein gewoehnlicher Knopf: kein unterstrichener Text, wie es ein von Haus aus waere. Seit dem 29.09.2026 traegt er .btn.mid statt .btn.quiet - gelb und auf 340px begrenzt statt grau und randlos (Vorgabe Claras). Die Begruendung steht am Markup in bwp-rechner.liquid. margin-top:0 gleicht das aus, was .btn selbst schon mitbringt (16px) - sonst stuenden 22 + 16 px zwischen Rechner und Knopf. :not(.quiet) GRENZT DAS AUF DIE NEUE FORM EIN (29.09.2026): Die alte, graue Fassung bringt ihre eigenen 8px mit und braucht den Ausgleich nicht. Ohne die Einschraenkung wuerde diese Regel sie mitziehen - auch dort, wo das Markup noch die alte ist, etwa in einem Theme, in das nur das Stylesheet gewandert ist. Eine Regel soll nur das treffen, wofuer sie da ist. */ /* ---- Das Foto im Rechner-Kopf (15.10.2026, Vorgabe Claras) ---- Drei Zeilen reichen: Die Bildregeln selbst (.sb-bild, .sb-bild img samt Maske) stehen weiter oben ohne Einschraenkung auf .seitenband und gelten hier mit. DER TEXT BRAUCHT SEINE HOECHSTBREITE, sonst liefe er unter das Foto - dieselbe Zahl wie bei den Kopfbaendern (58 %). z-index an der Spalte, damit sie ueber dem Bild liegt. */ section.land.rechner-kopf-block.hat-bild{position:relative;overflow:hidden} .rechner-kopf-block.hat-bild > .wrap{position:relative;z-index:1} .rechner-kopf-block.hat-bild h1, .rechner-kopf-block.hat-bild .sec-sub{max-width:min(54ch,58%)} @media(max-width:768px){ /* Auf dem Telefon laeuft das Bild im Fluss mit und steht ueber dem Text - wie auf den uebrigen Seiten. Ohne Maske: Die blendet nach LINKS aus und ergaebe quer ueber die volle Breite einen halb verschwundenen Streifen. position:relative UND NICHT static (15.10.2026, mit dem Uebergang darunter dazugekommen): Das ::after ist absolut gesetzt und braucht einen positionierten Vorfahren. Mit static waere das der Abschnitt selbst - der Verlauf laege dann ueber dem ganzen Kopf statt ueber dem Bild. relative aendert am Fluss nichts und macht den Kasten zum Bezugspunkt. */ /* OHNE POLSTERUNG OBEN, sonst stuende ueber dem Foto ein dunkler Streifen: section.land gibt auf dem Telefon 22 Punkte oben und 52 unten. Die Kopfbaender der anderen Seiten raeumen das an derselben Stelle weg (padding:0 0 34px) - hier etwas mehr unten, weil unter dem Text noch der kleine Knopf steht. */ section.land.rechner-kopf-block.hat-bild{padding:0 0 46px} .rechner-kopf-block.hat-bild .sb-bild{position:relative;width:auto;height:min(62vw,280px); --sb-verlauf:120px} /* 50 PROZENT, ALSO DIE BILDMITTE - und das ist seit dem Zuschnitt vom 15.10.2026 ein gemessener Wert und kein weggelassener. Vor dem Zuschnitt stand die Waermepumpe auf IMG_20261011_114438.jpg zwischen 46 und 72 Prozent der Bildhoehe (Mitte 59), danach zwischen 32 und 67 (Mitte 50). Die Zeile bleibt deshalb stehen, obwohl sie gerade dasselbe tut wie der Vorgabewert: Beim naechsten Bild oder Zuschnitt ist sie die Stelle, an der nachgerechnet wird. */ .rechner-kopf-block.hat-bild .sb-bild img{-webkit-mask-image:none;mask-image:none; object-position:50% 50%} /* DER UEBERGANG WIE AUF DEN ANDEREN SEITEN (15.10.2026, Vorgabe Claras: "bei mobile Rechner bitte auch den transparenten Uebergang, wie bei den anderen Seiten auch"). DIESELBE BAUART WIE BEI .seitenband.hat-bild .sb-bild::after: Das Foto loest sich ueber die letzten 120 Punkte in den Grund auf, statt mit einer Kante zu enden. Es steht hier noch einmal, weil jene Regel auf .seitenband eingeschraenkt ist und dieser Kopf kein Seitenband ist - die Begruendung dafuer steht bei .rechner-kopf-block.hat-bild oben. NACH var(--ink) UND NICHT NACH var(--sand): Darunter geht der dunkle Grund dieses Abschnitts weiter. Genau diese Unterscheidung war am 14.10.2026 beim Kits-Band die harte Kante, die Clara gemeldet hat - hier von vornherein richtig herum. KEIN ::before: Auf den anderen Seiten verdunkelt es das Foto, damit der Titel darueber lesbar bleibt. Hier steht kein Text ueber dem Bild, sondern darunter. */ .rechner-kopf-block.hat-bild .sb-bild::after{content:"";position:absolute;inset:0;z-index:2; background:linear-gradient(to bottom,transparent calc(100% - var(--sb-verlauf)),var(--ink) 100%)} /* Der Text rueckt in die Verlaufszone hinauf, damit der Uebergang nicht als leerer Streifen zwischen Bild und Ueberschrift steht - dieselbe Idee wie --sb-textzug bei den Baendern, nur ohne deren Titel-im-Bild-Mechanik. */ .rechner-kopf-block.hat-bild > .wrap{padding-top:0;margin-top:-34px;position:relative;z-index:3} .rechner-kopf-block.hat-bild h1, .rechner-kopf-block.hat-bild .sec-sub{max-width:100%} } .rechner-fuss{margin-top:22px;display:flex;justify-content:center} /* AUF DER ERGEBNISSEITE IST DER ANDERE WEG WEG (15.10.2026, Vorgabe Claras: "wenn man beim Rechner das Ergebnis hat, also die E-Mail eingegeben hat und zur Ergebnisseite kommt, entferne dann den Knopf 'oder direkt Kit konfigurieren'"). Wer hier steht, hat seine Auslegung - ihn jetzt noch auf die allgemeine Kit-Liste zu schicken, nimmt ihm genau das Ergebnis wieder ab, fuer das er zwoelf Fragen beantwortet hat. display:none statt [hidden]: .rechner-fuss traegt display:flex, dagegen kaeme das Attribut allein nicht an. */ .rechner-fuss[hidden]{display:none} .rechner-fuss .btn:not(.quiet){margin-top:0} .rechner-anderer-weg{text-decoration:none} .r-head{max-width:640px;margin:0 auto 44px;text-align:center} .r-head h2{font-weight:800;font-size:clamp(28px,4vw,42px);letter-spacing:-.018em} .r-head p{font-family:var(--mono);font-size:11.5px;color:var(--muted);margin-top:12px} /* DAS RASTER FUELLT DIE SPALTE DER SEITE (Vorgabe 22.09.2026: "das Rechner-Tool auf die gleiche senkrechte Hoehe wie das Los geht's setzen"). Es stand auf max-width:1020px und mittig - in der 1096px breiten Inhaltsspalte also 38px eingerueckt auf jeder Seite. Die Ueberschrift darueber beginnt an der Spaltenkante, das Formular 38px weiter rechts; genau dieser Versatz ist aufgefallen. DIE GEWONNENEN 76px GEHEN IN DEN ABSTAND, nicht in die Kaesten - so hat die Betreiberin es vorgeschlagen ("dafuer kannst du einfach die beiden Kaesten bisschen mehr auseinander machen"). Von 28px auf 56px: Fragekarte und Rechenzettel werden dadurch nur um gut 20px breiter, stehen aber sichtbar getrennter. Beides zusammen in die Breite zu geben haette die Fragekarte auf ueber 560px gebracht, und dort steht kurzer Text in grosser Schrift. */ /* IMMER EINE SPALTE (14.10.2026, Vorgabe Claras: "im Rechner veraendert sich das Format haeufiger. Waehrend man die Fragen beantwortet ist es klein links und rechts der Rechenzettel. Mach bitte, dass es immer so im grossen Format ist"). VORHER WAREN ES ZWEI LAYOUTS: beim Fragen zwei Spalten (Frage 53 %, Rechenzettel 47 %), beim Ergebnis eine. Der Wechsel kam genau an der Stelle, an der ohnehin viel passiert - E-Mail-Gate, dann das Ergebnis -, und davor stand die Frage in gut der halben Breite. DER RECHENZETTEL BLEIBT, ER STEHT JETZT DARUNTER. Er verschwindet also nicht; er ist nur nicht mehr der Nachbar der Frage, sondern ihre Fussnote. Das ist der Preis dieser Entscheidung und Clara ist darauf hingewiesen: Beim Beantworten sieht man ihn nicht mehr nebenher mitwachsen, sondern erst beim Scrollen. DAMIT ENTFAELLT AUCH DAS STICKY am Rechenzettel: In einer Spalte klebt er an nichts, er waere nur eine Zeile, die beim Scrollen stehenbleibt und den Platz verengt. */ .funnel-grid{display:grid;grid-template-columns:1fr;gap:28px;align-items:start} @media(max-width:992px){.funnel-grid{gap:16px}} .funnel-grid.done .qcard{min-height:0} /* LINKS UND RECHTS LUFT - UND ZWAR UEBERALL GLEICH VIEL (14.10.2026, Nachtrag Claras in zwei Schritten: "nicht so lang ziehen, so sehen die Buttons bisschen uebertrieben lang aus, also einfach links und rechts bisschen Platz lassen" - und daraufhin: "genauso viel Abstand wie die Ergebnisse, wenn nicht sogar bisschen mehr, dann aber den Abstand der Ergebnisse auch daran anpassen"). ERST STAND DIE DECKELUNG NUR AN DER FRAGE (880 px, Ergebnis voll breit). Das war genau der Formatwechsel, den Clara eine Nachricht vorher abgeschafft haben wollte - nur an einer anderen Stelle. Jetzt haengt sie am Raster selbst und gilt in beiden Zustaenden. DER KASTEN UND SEIN INHALT SIND ZWEI VERSCHIEDENE BREITEN (Praezisierung Claras: "meinte auch den Text innerhalb des Kastens. Der Kasten selber kann wieder ein Stueckchen breiter"). Erst hatte ich nur den Kasten geschmaelert - damit wurde der Knopf zwar kuerzer, aber der Kasten wirkte eng. JETZT: Kasten so breit wie die Seitenspalte, Fragentext darin 680 px und mittig. Der Knopf unter einer Frage ist display:block mit width:100 % - er misst damit 680 statt der vollen Breite. DIE BREITE DES KASTENS IST IN DREI SCHRITTEN GEFUNDEN WORDEN (Nachtraege Claras: "den Kasten noch was breiter bitte", dann "mach den Kasten doch wieder etwas kleiner"). Er stand auf 1.000, auf 1.080 und zwischendurch ganz ohne Deckelung. WARUM DIE ZWISCHENSCHRITTE KAUM ETWAS GEAENDERT HABEN: Auf einem normalen Bildschirm laesst die Seitenspalte 1.096 px - zwischen 1.080 und "voll" liegen dort 16 Pixel. Sichtbar wird die Deckelung erst auf breiten Schirmen: --seite-max geht ab 1.500 px auf 1.280 und ab 1.800 px auf 1.380. Dass Clara 1.080 als zu schmal UND die volle Breite als zu breit empfunden hat, heisst also: Sie sieht die Seite mit mehr als 1.500 px. 1.160 LIEGT DAZWISCHEN und ist auf einem normalen Bildschirm weiterhin die volle Spalte - dort gibt es nichts zu deckeln. NUR WAEHREND DER FRAGEN. Im Ergebnis fuellen vier Kit-Karten und das Diagramm den Kasten zu Recht aus; eine 680er Spalte waere dort eine Fessel. Die Bedingung haengt an :not(.done) - an genau dem Schalter, der die Seite ohnehin schon aufs Ergebnis umstellt. ALLE DREI TEILE DER KARTE BEKOMMEN DIE SPALTE, nicht nur die Frage: Abschnittsleiste oben und Zurueck-Knopf unten muessen auf derselben Flucht stehen, sonst steht die Leiste breiter als das, was sie beschreibt. Der Rechenzettel darunter ebenso. */ /* DIE FORTSCHRITTSLEISTE NICHT (Nachtrag Claras: "die Fortschrittsleiste aber bitte ueber den gesamten Kasten"). Sie beschreibt den ganzen Weg und nicht die einzelne Frage - in der Textspalte sah sie aus, als gehoere sie zur Frage darunter. Ueber die volle Breite ist sie das, was sie ist: die Gliederung ueber allem. */ .funnel-grid{max-width:var(--rechner-max);margin-inline:auto} /* DER TITEL STEHT AUF DERSELBEN KANTE WIE DER KASTEN (14.10.2026, Vorgabe Claras: "Titel von Kitgroessen-Rechner bitte buendig mit dem Kasten"). Er sitzt in einem eigenen Abschnitt darueber (.rechner-toolkopf) und damit in der vollen Seitenspalte, waehrend der Kasten darunter auf --rechner-max gedeckelt und mittig steht. Auf einem breiten Schirm begann die Ueberschrift dadurch rund 90 px weiter links als der Kasten. GEDECKELT WIRD DIE .wrap UND NICHT DER TEXT: Die Spalte bringt 22 px Polsterung je Seite mit; mit max-width Kasten+44 misst ihr INHALT genau die Kastenbreite. Haette ich stattdessen den Text selbst gedeckelt und zentriert, stuende er zwar an derselben Kante - aber jede spaetere Aenderung an der Polsterung liefe wieder auseinander. */ section.land.rechner-toolkopf > .wrap{max-width:calc(var(--rechner-max) + 44px)} /* DIE SPALTE HAENGT AM SCHRITT, NICHT AM RASTER (14.10.2026, Vorgabe Claras: "bei der Website: das 'Deine Auslegung steht' bitte auch so mittig wie beim kompletten Rechner, also gleiches Format"). Das E-Mail-Gate kommt aus renderAuslegung() und schreibt ein gewoehnliches .step in dieselbe Karte. Zu diesem Zeitpunkt traegt das Raster aber schon .done - finish() setzt es, bevor das Gate erscheint -, und damit griff die Deckelung nicht mehr: Die Auslegung stand ueber die ganze Kastenbreite, waehrend jede Frage davor in 680 px stand. Mit der Bedingung am SCHRITT statt am Raster ist die Regel einfacher und trifft genau: Jeder Schritt bekommt die Spalte, nur der Kit-Vergleich nicht - der braucht die Breite fuer vier Karten und das Diagramm. */ .qcard>#app>.step:not(.compare-step), .funnel-grid:not(.done) .nav-row, .funnel-grid:not(.done) .receipt{max-width:680px;width:100%;margin-inline:auto} /* DER ZURUECK-KNOPF STEHT BEI JEDER FRAGE AN DERSELBEN STELLE (14.10.2026, Vorgabe Claras: "es waere auch toll, wenn du es hinkriegst, dass der Zurueck-Button sich nicht bewegt und bei jeder Frage an der gleichen Stelle ist - aber ohne jetzt ploetzlich in der Frage zu sein"). ER SPRANG, WEIL ER AN DER FRAGE HING: .nav-row steht hinter #app, und #app war so hoch wie sein Inhalt. Eine Frage mit drei Eingabefeldern schob ihn nach unten, eine mit zwei Kacheln zog ihn hoch. ZWEI SACHEN ZUSAMMEN LOESEN DAS: #app nimmt den Platz, der in der Karte uebrig ist (flex:1), und die Karte hat eine Mindesthoehe, die auch die laengste Frage traegt. Damit sitzt der Knopf an der Unterkante der Karte - immer an derselben Stelle, und immer UNTER der Frage und nicht in ihr. Die Frage selbst steht in ihrem Feld senkrecht mittig (.step{justify-content:center}), bei kurzen Fragen bleibt also oben und unten gleich viel Luft statt einer Leere nur unten. DIE HOEHE WAECHST MIT DEM FENSTER, aber gedeckelt: clamp(460px, 58vh, 580px). Fest in Pixeln waere sie auf einem kleinen Laptop zu viel und auf einem grossen zu wenig. Unter 992px faellt sie weg - dort steht ohnehin alles untereinander, und eine halbe Bildschirm- hoehe Leerraum ueber dem Knopf waere auf dem Telefon nur Scrollweg. */ .qcard{background:var(--paper);border-radius:var(--radius);padding:32px; min-height:clamp(500px,60vh,600px);display:flex;flex-direction:column} .qcard>#app{flex:1 1 auto;min-height:0;display:flex;flex-direction:column} @media(max-width:992px){.qcard{min-height:0}} @media(max-width:576px){.qcard{padding:22px 18px}} .prog-row{display:flex;align-items:center;gap:14px;margin-bottom:22px} /* .progressbar und #pbar sind am 14.10.2026 entfallen (Vorgabe Claras: "bei der Fortschrittsleiste bitte nur eine machen"). Der Fuellstand steckt jetzt in den Abschnitten darunter. Rueckstandslos: Das Markup in bwp-rechner.liquid ist mit raus, und die beiden Skriptstellen, die den Balken auf 100 % setzten, ebenfalls. */ .prog-pct{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--muted);white-space:nowrap} .prog-pct.goalgrad{color:var(--gruen)} /* ---------- Abschnittsleiste ueber dem Fortschrittsbalken (14.10.2026) ---------- Vorgabe Claras: "vor allem die Fortschrittsleiste oben mit den Themen, zu denen die Fragen gerade sind, auch uebernehmen". DREI ZUSTAENDE IN DREI FARBEN DES HAUSES, nicht in Ampelfarben: erledigt im Braun des Fortschrittsbalkens, aktuell im Bernstein der Seite, offen in der Linienfarbe. So liest sich die Leiste zusammen mit dem Balken darunter als ein Element und nicht als zweites, fremdes Bedienteil. DIE PUNKTE SIND GLEICH BREIT (flex:1), obwohl die Woerter verschieden lang sind. Eine Leiste, deren Abschnitte unterschiedlich breit sind, behauptet etwas ueber die Dauer, das nicht stimmt - "Foerderung" hat zwei Fragen, "Dein Haus" bis zu sieben. */ .phasen{display:flex;gap:6px;list-style:none;margin:0 0 14px;padding:0} .phasen li{flex:1;min-width:0} .phasen{flex:1;min-width:0} /* Die Breite je Abschnitt setzt zeichnePhasen() als flex:Anzahl - hier steht nur, was dabei nicht passieren darf: Ein Abschnitt mit einer einzigen Frage wuerde ohne min-width:0 seine Beschriftung nach aussen druecken und das Verhaeltnis verfaelschen. Der Abschnitt, in dem man gerade steht, bekommt umgekehrt eine Mindestbreite, damit sein Name immer lesbar ist. */ .phasen li.now{min-width:min(100%,148px)} /* Unter zwoelf Prozent Anteil passt kein Wort mehr hinein - dann bleibt der Balken und das Wort geht. zeichnePhasen() entscheidet das, weil nur dort die Fragenzahl bekannt ist. */ .phasen li.schmal span:not(.vh){display:none} /* DER FUELLSTAND STECKT IM ABSCHNITT (14.10.2026). Die Schiene ist die Linienfarbe, der Balken darin waechst mit den beantworteten Fragen DIESES Abschnitts - erledigte Abschnitte stehen auf 100 %, kommende auf 0. Damit sagt die Leiste beides zugleich: wo man ist und wie weit man darin ist. */ .phasen li i{display:block;height:6px;border-radius:var(--radius-xs);background:var(--line); overflow:hidden} .phasen li i b{display:block;height:100%;width:0;border-radius:var(--radius-xs); background:var(--gruen);transition:width .4s cubic-bezier(.2,.8,.2,1)} .phasen li.now i b{background:var(--bernstein)} /* Nur fuer Screenreader: die Leiste ist sonst eine Reihe Balken mit Woertern daneben. */ .phasen .vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap;border:0} .phasen li span{display:block;margin-top:6px;font-size:12px;line-height:1.25;color:var(--muted); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .phasen li.done span{color:var(--graphit)} .phasen li.now span{color:var(--ink);font-weight:700} @media(max-width:560px){ /* Fuenf Beschriftungen nebeneinander waeren auf dem Telefon keine mehr lesbar. Sichtbar bleibt die, in der man gerade steht; die uebrigen behalten ihren Balken und sagen damit weiter, wie viel noch kommt. */ .phasen li:not(.now) span{display:none} /* DIE ABSCHNITTE BEHALTEN IHRE BREITE DURCH DEN GANZEN FRAGEBOGEN (15.10.2026, Meldung Claras: "bei mobil beim Rechner springt die Fortschrittsleiste bei Foerderung ploetzlich auf gross/breit - die Themenleisten sollen immer gleich bleiben im ganzen Beantwortungsprozess"). DIE URSACHE WAR DIE MINDESTBREITE DES AKTIVEN ABSCHNITTS. Sie steht weiter oben (min-width:min(100%,148px)) und ist auf dem Desktop richtig: Dort stehen alle fuenf Namen nebeneinander, und der aktive soll lesbar bleiben. Auf dem Telefon traegt nur der aktive Abschnitt seinen Namen - und 148 Punkte sind dort fast die halbe Leiste. Bei "Foerderung" faellt es am meisten auf: Der Abschnitt hat zwei von rund zwanzig Fragen, ihm stehen also rund zehn Prozent zu, und er bekam die Haelfte. Die uebrigen vier mussten entsprechend schrumpfen - die ganze Leiste baute sich bei jedem Abschnittswechsel um. DIE BESCHRIFTUNG ZIEHT DESHALB UNTER DIE LEISTE statt im Abschnitt zu stehen. Dort hat sie die volle Breite, der Abschnitt braucht keine Mindestbreite mehr, und die Verhaeltnisse der fuenf Balken stehen vom ersten bis zum letzten Schritt fest. position:absolute und nicht ein eigenes Element: Die Zeile steht schon im Markup, sie wechselt nur den Platz. zeichnePhasen() bleibt unberuehrt. :not(.vh) IST HIER PFLICHT. Im selben Abschnitt steht eine zweite, nur fuer Vorlesesoftware gedachte Zeile (.vh), die ueber position/clip auf einen Punkt geschrumpft ist. Ein Selektor ohne diese Einschraenkung waere spezifischer als ".phasen .vh" und haette sie wieder sichtbar gemacht - zweimal derselbe Name untereinander. */ .phasen{position:relative;margin-bottom:30px} .phasen li.now{min-width:0} .phasen li.now span:not(.vh){position:absolute;left:0;right:0;top:100%;margin-top:7px; font-size:12.5px} } /* Plausibilitaetshinweis im Rechenzettel (14.10.2026). Er warnt, er sperrt nicht: Die Heizlast bleibt stehen, der Kunde bekommt nur gesagt, woran es liegen koennte. */ .rwarn{margin:10px 0 0;padding:10px 12px;border-left:3px solid var(--bernstein); background:var(--bernstein-tint);border-radius:0 var(--radius-xs) var(--radius-xs) 0; font-size:13px;line-height:1.45;color:var(--ink)} .rwarn b{font-weight:700} /* DER FRAGENBLOCK STEHT OBEN, NICHT IN DER MITTE (14.10.2026, Vorgabe Claras: "bei dem Rechner orientier dich beim Titel der Frage bitte an der Hoehe von der Frage 'Womit heizt du', damit geht dann auch die Antworten mit hoch - also der ganze Block soll hoch ruecken, sodass dadurch auch das Zurueck unten immer auf der gleichen Hoehe ist"). VORHER STAND ER SENKRECHT MITTIG. Damit haengt die Hoehe des Titels an der Laenge der Antwortliste: "Womit heizt du" hat acht Kacheln und beginnt deshalb weit oben, "Hast du einen Keller" hat drei und rutscht in die Mitte. Beim Weiterklicken wandert die Ueberschrift also auf und ab, obwohl sich an der Seite nichts geaendert hat. MIT flex-start beginnt JEDE Frage an derselben Kante - und zwar genau dort, wo die laengste Liste sie ohnehin schon hatte. Der Block waechst nach unten, und weil die Karte ihre Mindesthoehe behaelt, bleibt der Zurueck-Knopf an der Unterkante stehen. DIE MINDESTHOEHE IST MITGEWACHSEN (500 statt 460 px): Sie muss die laengste Frage tragen, sonst schiebt genau die den Knopf doch wieder nach unten - und das war der Punkt der Uebung. */ .step{animation:stepIn .3s cubic-bezier(.2,.8,.2,1);flex:1;display:flex;flex-direction:column;justify-content:flex-start} @keyframes stepIn{from{opacity:0;transform:translateX(22px)}to{opacity:1;transform:none}} .step h2{font-weight:800;font-size:clamp(22px,3vw,28px);line-height:1.15;letter-spacing:-.012em} .step .sub{color:var(--muted);font-size:14.5px;margin-top:6px} .step .options,.step .chips{margin-top:22px} .nav-row{display:flex;justify-content:flex-start;margin-top:18px;min-height:32px} .back{font-family:var(--font);font-weight:700;font-size:14px;color:var(--muted);background:none;border:none;cursor:pointer;padding:6px 10px 6px 0} .back:hover{color:var(--ink)} /* ---------- Rechenzettel (live Tracker) ---------- */ /* Kein sticky mehr, seit alles in einer Spalte steht - siehe .funnel-grid oben. */ .receipt-wrap{position:static} .receipt{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden} .receipt summary{list-style:none;cursor:pointer;padding:16px 20px;display:flex;justify-content:space-between;align-items:center;gap:10px;border-bottom:1px dashed var(--line)} .receipt summary::-webkit-details-marker{display:none} .receipt summary .rt{font-weight:800;font-size:15px} .receipt summary .rt small{display:block;font-family:var(--mono);font-size:10.5px;font-weight:500;color:var(--muted);letter-spacing:.04em;text-transform:uppercase} .receipt summary .rv{font-family:var(--mono);font-weight:700;font-size:19px;color:var(--gruen);white-space:nowrap;transition:transform .15s} .receipt summary .rv.bump{transform:scale(1.14)} .receipt .rows{padding:14px 20px 16px} .rrow{display:flex;justify-content:space-between;gap:12px;padding:7px 8px;margin:0 -8px;border-bottom:1px dashed var(--line);font-size:14px;border-radius:var(--radius-xs)} .rrow:last-child{border-bottom:none} .rrow .rl{color:var(--graphit)} .rrow .rl b{color:var(--ink);font-weight:700} .rrow .rl .src{display:block;font-family:var(--mono);font-size:10.5px;color:var(--muted);margin-top:1px} .rrow .rv{font-family:var(--mono);font-weight:700;white-space:nowrap;text-align:right} .rrow.pending{opacity:.38} .rrow.pending .rv{font-weight:500} .rrow.total{border-top:2px solid var(--ink);border-bottom:none;margin-top:6px;padding-top:11px} .rrow.total .rv{color:var(--gruen);font-size:18px} .stamp{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;width:66px;height:66px;border-radius:50%;border:2px dashed var(--gruen);color:var(--gruen);font-family:var(--mono);font-weight:800;transform:rotate(-9deg);flex:0 0 auto;text-align:center;line-height:1.05} .stamp b{font-size:17px} .stamp small{font-size:8px;font-weight:700;letter-spacing:.03em;text-transform:uppercase} .rrow.flash{animation:rowflash 1.1s ease} @keyframes rowflash{0%{background:var(--gruen-tint)}100%{background:transparent}} .rrow.enter{animation:rowEnter .4s cubic-bezier(.2,.8,.2,1)} @keyframes rowEnter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .receipt .rfoot{font-family:var(--mono);font-size:10.5px;color:var(--muted);padding:0 20px 16px;line-height:1.6} /* ---------- Ergebnis ---------- */ .verdict{background:var(--ink);color:#EFE6D8;border-radius:var(--radius);padding:24px;text-align:center} .verdict .v-eyebrow{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--bernstein)} .verdict img{max-height:160px;width:auto;margin:12px auto;object-fit:contain;background:#fff;border-radius:var(--radius-s);padding:10px} .verdict h2{font-size:clamp(24px,4vw,32px);color:#EFE6D8;font-weight:800;letter-spacing:-.01em} .verdict .kwline{font-family:var(--mono);font-size:14px;color:#D8C9B3;margin-top:6px} .verdict .kwline b{color:var(--bernstein);font-weight:700} .beleg{background:var(--gruen-tint);border:1px solid #E3D3BB;border-radius:var(--radius-s);padding:12px 16px;margin-top:12px;font-size:14px} .beleg .m{font-weight:700} .beleg .src{display:block;font-family:var(--mono);font-size:10.5px;color:var(--muted);margin-top:4px} .tag{display:inline-block;font-family:var(--mono);font-size:10px;font-weight:700;background:var(--bernstein-tint);color:var(--warn);border-radius:var(--radius-pill);padding:2px 8px;margin-left:6px;vertical-align:middle;white-space:nowrap} .tag.gruen{background:var(--gruen-tint);color:var(--gruen)} /* Warenkorbseite: Konfiguration ausklappbar, feste Menge, Zusage-Block. */ .cart-konfig{margin:5px 0 3px} .cart-konfig summary{cursor:pointer;font-family:var(--mono);font-size:11.5px;color:var(--gruen);font-weight:700} .cart-konfig ul{list-style:none;margin:7px 0 0;padding:0;display:flex;flex-direction:column;gap:4px} .cart-konfig li{font-size:12.5px;line-height:1.5;color:var(--graphit)} .cart-konfig li b{color:var(--ink)} .cart-fix{display:inline-block;min-width:38px;text-align:center;padding:7px 0;border:1px solid var(--line);border-radius:var(--radius-s);background:var(--sand);color:var(--graphit);font-weight:700} .cart-hinweis{margin-top:14px;background:var(--sand);border-left:3px solid var(--rost);border-radius:var(--radius-s);padding:12px 14px;font-size:12.5px;line-height:1.55;color:var(--graphit);max-width:60ch} .cart-hinweis b{display:block;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gruen);margin-bottom:4px} /* Was nach der Anzahlung passiert - steht direkt ueber dem Kaufknopf. Bewusst als eigener Absatz mit Trennlinie statt als weitere .src-Zeile: es ist eine Zusage, keine Fussnote. */ .resnext{margin-top:12px;padding-top:11px;border-top:1px dashed var(--line);font-size:12.5px;line-height:1.55;color:var(--graphit)} .resnext b{display:block;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gruen);margin-bottom:4px} /* Seit dem Umbau (11.08.2026) steht .resnext als ERSTES Kind in .banner.ok - und das bringt bereits eine gestrichelte Oberkante mit. Ohne diese Regel liegen zwei identische Linien mit 11 px Abstand uebereinander. Trennlinie nur noch, wenn wirklich etwas darueber steht. */ .resnote .resnext:first-child{margin-top:0;padding-top:0;border-top:none} /* ---------- Klebende Kopfleiste der Kaufbox (ueberarbeitet 12.08.2026) ---------- Vorher schnitt sie mitten durch den Inhalt: zu flach, keine Kante, und der Zurueck-Knopf stand darunter im Fluss und war nach kurzem Scrollen aus dem Bild. Wer scrollte, sah eine halbe Chip-Reihe ueber und eine halbe Ueberschrift unter der Leiste - das wirkte kaputt, nicht wie eine Leiste. Jetzt: hoeher, blickdicht, mit sichtbarer Unterkante und Schatten, damit der Schnitt als gewollt lesbar ist. Der Zurueck-Knopf sitzt drin und faehrt mit. top:0, NICHT 64px: die Kopfleiste der Seite ist zwar sticky, haengt aber in einem Abschnitt, der lange vor der Kaufbox endet - beim Kaufen steht sie tausende Pixel weiter oben. Ein Versatz von 64px liess deshalb einen offenen Streifen frei, durch den der Inhalt sichtbar nach oben durchlief. Gemessen 12.08.2026: topbar.top = -2437px, waehrend die Leiste klebte. Polsterung bewusst unsymmetrisch (oben mehr als unten): waehrend die Leiste klebt, ist ihr oberes Polster der einzige Luftraum zwischen Bildschirmkante und Schrift - mit gleichmaessigen 13px sass die Zeile oben angeklebt. Der Luftraum muss also im Element selbst stecken; ein Aussenabstand waere im geklebten Zustand ausserhalb des Bildes. */ .buybox .bb-minisum{position:sticky;top:0;z-index:20;background:var(--card); margin-left:-20px;margin-right:-20px;padding:24px 20px 14px; border-bottom:1px solid var(--line);box-shadow:0 8px 12px -10px rgba(51,49,45,.30)} /* Mobil MEHR Luft oben als am Desktop, nicht weniger: die Leiste klebt dort an der obersten Bildschirmkante (am Desktop hat man immer noch Browserrahmen und Seitenluft ueber sich), und die Zeile ist naeher am Auge. 20px sahen angeklebt aus, 32px sitzen. */ @media(max-width:576px){.buybox .bb-minisum{margin-left:-12px;margin-right:-12px;padding:32px 12px 13px}} .bb-ms-links{display:flex;align-items:center;gap:9px;min-width:0} /* Zurueck ist ein Nebenweg, keine Handlung: als Textlink, nicht als Pille. Eine Pille neben der Schrittangabe las sich wie ein zweiter Knopf in einer Leiste, die genau einen Zweck hat. */ .bb-zurueck{font:inherit;font-size:12px;font-weight:700;font-family:var(--mono);cursor:pointer; background:none;border:0;padding:0;color:var(--muted); white-space:nowrap;flex:0 0 auto;transition:color .12s} .bb-zurueck:hover{color:var(--ink);text-decoration:underline} .bb-zurueck[hidden]{display:none} /* ---------- Lieferumfang-Liste (12.08.2026) ---------- Sitzt zugeklappt unten in der Kaufbox, direkt ueber dem Kaufknopf - eine Zeile, bis jemand sie aufklappt. VERWORFEN am selben Tag: dieselbe Liste als klebende Spalte rechts neben der Kaufbox und als eingeblendete Leiste am unteren Rand. Beides machte die Seite voller statt klarer und ist auf Wunsch des Users wieder raus. Wer es je zurueckholen will, sollte wissen, woran es lag: nicht an der Technik, sondern daran, dass an dieser Stelle weniger stehen soll. Die Listenklassen leben weiter, sie fuellen jetzt das aufklappbare Feld. */ .lu-liste{padding-top:4px} .lu-g + .lu-g{margin-top:12px} .lu-g-t{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.09em; text-transform:uppercase;color:var(--bernstein-dark);padding-bottom:5px; border-bottom:1px solid var(--line);margin-bottom:6px} .lu-z{display:flex;gap:8px;align-items:baseline;padding:3px 0;font-size:13px;line-height:1.45} .lu-q{flex:0 0 auto;min-width:18px;color:var(--muted);font-size:11.5px} .lu-n{min-width:0;color:var(--ink)} .lu-n small{display:block;margin-top:1px;color:var(--muted);font-size:11.5px;line-height:1.4} .lu-f{margin-top:13px;padding-top:9px;border-top:1px solid var(--line); font-size:12px;font-weight:600;color:var(--muted)} /* "Brauchst du Hilfe?" ist am 12.08.2026 aus beiden Kaufwegen entfernt worden (User-Vorgabe): ein zweiter Handlungsaufruf direkt ueber dem Kaufknopf, waehrend derselbe Weg unten rechts dauerhaft als .help-fab bereitsteht. Die Hilfe-Optionen selbst leben unveraendert weiter - renderHelpCta('fab') fuellt den Knopf unten rechts mit Telefon, Chat und Fachbetrieb. */ /* ---------- Schritt-Einstieg in der Kaufbox (User-Vorgabe 10.08.2026) ---------- Steht ganz oben in jedem der beiden .bb-step-Container und beantwortet die Frage, die der Kunde an dieser Stelle wirklich hat: "Wo bin ich, und habe ich schon alles?" Bewusst ohne eigene Rahmenfarbe - es ist ein Absatz, kein Kasten, der mit den Kaufzeilen darunter um Aufmerksamkeit kaempft. */ .bb-stage{padding-bottom:14px;margin-bottom:4px;border-bottom:1px solid var(--line)} .bb-stage-nr{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--gruen)} .bb-stage-titel{font-size:17px;font-weight:800;letter-spacing:-.01em;margin-top:3px} .bb-stage p{font-size:13px;line-height:1.55;color:var(--graphit);margin-top:6px;max-width:56ch} .bb-stage p b{color:var(--ink)} /* ---------- Zwei Wege bei junger Gasheizung (User-Vorgabe 07.08.2026) ---------- Steht ueber den Kit-Karten und erklaert, dass "beistellen" und "ersetzen" zwei Entscheidungen sind, keine zwei Produkte. Bewusst ruhig gehalten: Sand statt Karte, keine Schatten - der Block ordnet ein, er soll den Karten darunter nicht die Aufmerksamkeit wegnehmen. Text linksbuendig wie die Funnel-Fragen, die Karten darunter bleiben mittig. */ .zweiwege{max-width:760px;margin:26px auto 0;background:var(--sand);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;text-align:left} .zw-kopf{font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--gruen)} .zw-sub{font-size:14px;color:var(--graphit);margin-top:6px;max-width:60ch} .zw-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin-top:14px} .zw-karte{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-s);padding:13px 15px;display:flex;flex-direction:column;gap:6px} .zw-titel{font-weight:800;font-size:15px} .zw-karte p{font-size:13px;line-height:1.5;color:var(--graphit)} .zw-kit{margin-top:auto;padding-top:8px;border-top:1px dashed var(--line);font-family:var(--mono);font-size:11.5px;color:var(--muted)} .zw-fuss{font-size:12px;color:var(--muted);margin-top:12px} @media(max-width:576px){ .zweiwege{padding:15px 14px} } /* ---------- Vergleichsansicht (routeAll): Kandidaten-Karten ---------- */ .compare-step{max-width:1040px;margin:0 auto;width:100%} .compare-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-top:28px} .candcard{position:relative;background:var(--card);border:1.5px solid var(--line);border-radius:var(--radius);padding:20px;text-align:center;display:flex;flex-direction:column;gap:8px} .candcard.rec{border-color:var(--gruen);box-shadow:0 0 0 3px var(--gruen-tint)} .candcard.insuff{opacity:.82} /* DIE GANZE KARTE IST ANTIPPBAR (14.10.2026, Vorgabe Claras: "Tippe eine Groesse an, um deine Konfiguration zu starten - dann fuehrt das zu der Produktseite"). Der Knopf unten bleibt der sichtbare Weg; hier kommt nur dazu, dass auch die Flaeche darum reagiert und dass man es ihr ansieht. */ .candcard.klickbar{cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .15s} .candcard.klickbar:focus-visible{outline:3px solid var(--gruen);outline-offset:3px} /* NUR FUER ZEIGEGERAETE (15.10.2026). Auf einem Telefon bleibt :hover nach dem Antippen kleben, bis woanders hingetippt wird - die angetippte Karte staende dann angehoben da, auch nach der Rueckkehr von der Produktseite. hover:hover trifft Maus und Trackpad und laesst den Finger aus. */ @media(hover:hover){ .candcard.klickbar:hover{border-color:var(--gruen);transform:translateY(-2px);box-shadow:var(--shadow)} /* Der empfohlenen Karte ihren gruenen Rahmen lassen - der Schwebezustand darf ihn nicht gegen denselben Ton tauschen und damit das Siegel entwerten. */ .candcard.klickbar.rec:hover{box-shadow:0 0 0 3px var(--gruen-tint),var(--shadow)} } .candcard img{height:96px;width:auto;margin:0 auto;object-fit:contain} .cc-badge{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--gruen);color:#fff;font-family:var(--mono);font-size:10.5px;font-weight:700;padding:4px 12px;border-radius:var(--radius-pill);white-space:nowrap} .cc-badge.warn{background:var(--warn-tint);color:var(--warn);border:1px solid #E3956B} .cc-name{font-weight:800;font-size:16px;margin-top:6px} .cc-cov{font-size:12px;color:var(--graphit)} /* Bivalenzpunkt-Zeile auf der Kit-Karte. Bewusst leiser als die Deckungszeile darueber - das ist eine Einordnung, keine Kennzahl, um die der Kunde entscheidet. Liegt der Punkt im empfohlenen Fenster, traegt die Zeile die Bestaetigungsfarbe statt Grau. */ .cc-biv{font-size:11.5px;line-height:1.45;color:var(--muted);margin-top:3px} .cc-biv.ok{color:var(--gruen);font-weight:600} .cc-price{font-family:var(--mono);font-weight:700;font-size:18px;margin-top:auto;padding-top:8px;color:var(--bernstein-dark)} /* "ab" bewusst kleiner und ruhiger als die Zahl: es soll den Preis einordnen, nicht mit ihm konkurrieren. Der Kit-Preis ist nur die Hardware - Services und Material kommen dazu. */ .cc-price .ab,.kc-price .ab{font-family:var(--font);font-size:.72em;font-weight:700;color:var(--muted);text-transform:lowercase;letter-spacing:.02em} .amort-line{font-size:12.5px;color:var(--gruen);font-weight:700;border-top:1px dashed var(--line);padding-top:8px;margin-top:2px;text-align:left} .amort-line.muted{color:var(--muted);font-weight:500} .amort-line .amort-costs{font-family:var(--mono);font-size:13.5px;color:var(--graphit);font-weight:600} .amort-line .amort-costs s{color:var(--muted);text-decoration-color:var(--bernstein-dark);text-decoration-thickness:1.5px;font-weight:500} .amort-line .amort-costs .arr{color:var(--muted);margin:0 4px} .amort-line .amort-costs b{color:var(--ink);font-weight:700} .amort-line .amort-result{margin-top:4px;font-size:13px} .amort-line .amort-result.muted{color:var(--muted);font-weight:500} .amort-line .src{display:block;font-family:var(--mono);font-size:10px;color:var(--muted);margin-top:6px} .buybox{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin-top:14px;box-shadow:var(--shadow);text-align:left} /* Trennlinie kommt vom FOLGENDEN Element (border-top), nicht von .buyline selbst: .buyline teilt sich .buybox mit anderen div-Typen (svc-block, anchorline, totalrow, ...) - :last-of-type bezieht sich auf das Element (div), nicht auf die Klasse, und traf darum nie zu (Bugfix 24.07.2026: vorher stand am Ende der Buyline-Gruppe eine doppelte gestrichelte Linie, weil sowohl die letzte .buyline ihre eigene border-bottom behielt ALS AUCH das nächste Element (details.mini/.svc-block) seine eigene border-top zeigte). */ .buyline{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 0;font-size:14px;font-weight:600} .buyline + .buyline{margin-top:4px} .buyline .price{font-family:var(--mono);font-weight:700;white-space:nowrap} .buyline label{display:flex;gap:10px;align-items:center;cursor:pointer;font-weight:600} /* Nur Ankreuzfelder: als reines `.buyline input` traf die Regel auch das Zahlenfeld der Eigenleistung und presste es auf 19px Hoehe zusammen (die hoehere Spezifitaet von .eigen-wrap input[type=number] setzt zwar die Breite, aber keine Hoehe). */ .buyline input[type=checkbox],.buyline input[type=radio]{width:19px;height:19px;accent-color:var(--gruen)} /* Aufklappbare Material-Gruppen (12.08.2026). Der Gruppenname bleibt optisch, was er war - eine Rubrik-Ueberschrift, keine neue Kastenart -, bekommt nur die Angabe rechts, was in der Gruppe gewaehlt ist. Kein eigener Klapp-Pfeil: details.mini bringt weiter unten schon ein "+" / "–" mit. Meine erste Fassung setzte zusaetzlich einen gezeichneten Pfeil daneben - sichtbar waren dann beide uebereinander. Selektoren mit details.mini.xgrp, weil die Regeln von details.mini spaeter in der Datei stehen und bei gleicher Spezifitaet sonst gewinnen (Innenabstaende: die Kopfzeilen waren dadurch 74px hoch statt rund 30). */ /* GERAHMT (Vorgabe 21.09.2026: "alle Aufklapp-Buttons mit einer Umrandung markieren"). Zugeklappt ist eine Gruppe damit genau das, wonach sie aussieht - ein Knopf, den man druecken kann. Vorher war sie eine Zeile zwischen Zeilen, und ob sie sich oeffnen laesst, verriet nur das kleine Zeichen rechts. Der Rahmen liegt um das GANZE details, nicht nur um den Kopf: Aufgeklappt gehoert der Inhalt sichtbar in denselben Kasten, sonst stuende die Liste unter einem Knopf statt in ihm. Dasselbe Bild wie .pinfo-klapp im Produkt-Infokasten. border-top:none faellt damit weg - es stammt aus der Zeit, als die Gruppen nur durch die Trennlinie von details.mini auseinandergehalten wurden. */ /* KEINE EIGENE FUELLUNG, sondern die des Kastens, in dem sie stehen (Vorgabe 21.09.2026: "der Hintergrund innerhalb der Buttons soll der gleiche sein wie der der grossen Kaesten"). transparent statt eines Farbwerts, weil der grosse Kasten je nach Ort ein anderer ist: auf der Produktseite traegt .modalcard var(--paper), im Vollbild-Dialog var(--card). Ein fest eingetragener Wert waere an genau einem der beiden Orte richtig - und bliebe es nur so lange, bis jemand die Farbe des Kastens aendert. */ details.mini.xgrp{margin:0 0 8px;padding:0;border:1px solid var(--line); border-radius:var(--radius);background:transparent;overflow:hidden} details.mini.xgrp[open]{border-color:var(--bernstein-dark)} /* flex-wrap und min-width:0 wie beim festen Kopf darunter: Wird es eng, bricht die SUMME in die naechste Zeile, statt den Namen zusammenzuquetschen. Ohne sie brach "Hydraulischer Abgleich" mitten im Wort um, sobald die Zahl rechts danebenstand (21.09.2026). */ details.mini.xgrp > summary{display:flex;align-items:center;gap:10px;padding:12px 14px; flex-wrap:wrap;row-gap:2px} /* AUF DEM TELEFON BRICHT NICHTS MEHR UM (29.09.2026, Vorgabe Claras: "das Info-i hinter den einzelnen Oberpaketen bitte direkt hinter den Titel setzen, vor allem wenn innerhalb des Paketes schon was ausgewaehlt wurde und dann rechts in der Ecke angezeigt wird - hier soll alles auf einer horizontalen Hoehe sein"). GENAU DAS WRAP DARUEBER WAR DIE URSACHE. Flexbox verteilt auf Zeilen, BEVOR es schrumpft: Passt die Reihe aus Name, ⓘ, Auswahl und ▾ nicht, wandert das Letzte eine Zeile tiefer - bei langen Gruppennamen auch das ⓘ. Dann stand es nicht mehr hinter dem Titel, sondern darunter, und die Auswahl rechts daneben lag wieder eine Stufe tiefer. Auf dem breiten Schirm passiert das nicht, deshalb fiel es dort nie auf. Jetzt eine Zeile, und der NAME gibt nach: flex:1 1 auto laesst ihn schrumpfen und bei Bedarf zweizeilig werden, waehrend ⓘ, Auswahl und Pfeil ihre Groesse behalten. align-items:center von oben haelt alle drei dabei auf derselben Hoehe - auch neben einem zweizeiligen Namen. SILBENTRENNUNG STATT UEBERLAUF: "Warmwasserspeicher" ist ein Wort ohne Leerzeichen und passt in die schmale Spalte nicht. Ohne Trennung liefe es unter das ⓘ. hyphens:auto trennt an erlaubter Stelle ("Warmwasser-speicher"), break-word ist die Notbremse, falls der Browser keine Trennstelle kennt - dieselbe Ueberlegung wie bei .xr-name im Dialog. Der Einwand vom 21.09.2026 gegen einen Bruch mitten im Wort bleibt damit gewahrt: Getrennt wird mit Bindestrich, nicht wortmittig abgeschnitten. */ @media(max-width:768px){ /* EIN FREIRAUM, NICHT DREI (29.09.2026, Meldung Claras: "zwischen dem nach unten zeigenden Dreieck und dem Text ist noch voll viel Platz, mach den viel geringer"). Der Kopf erbt justify-content:space-between von details.mini summary. Das verteilt jeden uebrigen Pixel GLEICHMAESSIG auf alle Zwischenraeume - zwischen Name und ⓘ, zwischen ⓘ und Zahl und zwischen Zahl und Pfeil. Genau diese drei Luecken waren im Bild zu sehen, und deshalb half es auch nicht, der Zahl mehr Platz zu geben: Sie bekam ihn, aber die Luecke dahinter blieb, weil sie nicht aus der Zahl kam, sondern aus der Verteilung. flex-start schaltet die Verteilung ab. Uebrig bleibt genau ein Freiraum, und der steht, wo er hingehoert: als margin-left:auto vor der Zahl, die damit am Pfeil klebt. Zwischen ihr und dem Pfeil bleiben die 8px Spaltenabstand - mehr braucht es nicht, um zwei Dinge zu trennen. */ details.mini.xgrp > summary{flex-wrap:nowrap;gap:0;padding:10px 12px; justify-content:flex-start} /* DER NAME BEKOMMT VORRANG (berichtigt am 29.09.2026 nach Claras Screenshot: "jetzt ist alles zerfickt" - "Warmwasserspeicher" stand als Warm-wasser-spei-cher in vier Zeilen). Ursache war die Zaehlung rechts: Sie stand auf flex:0 0 auto und white-space:nowrap und nahm damit unverhandelbar ihre vollen ~200px ("200 l · 1.390 €"). Fuer den Namen blieben 85px, und in 85px trennt jede Silbentrennung gnadenlos. Jetzt darf die Zahl schrumpfen und umbrechen ("200 l ·" / "1.390 €"). Sie ist die Zusammenfassung, der Name die Sache selbst - wenn einer nachgeben muss, dann sie. Mit rund 120px trennt der Name hoechstens einmal: Warmwasser-speicher. */ /* WER DEN FREIEN PLATZ BEKOMMT, entscheidet, wo die Zahl steht (29.09.2026, Vorgabe Claras nach dem zweiten Screenshot: "hier kannst du das '1 gewaehlt' noch weiter nach rechts tun, ueberall bitte"). Bis eben war der NAME der gierige Teil (flex:1 1 auto): Sein Kasten dehnte sich bis an die Zahl, der Text darin stand links, und der Rest des Kastens blieb leer. Sichtbar war das als Luecke zwischen Name und Zahl - rund 110px auf dem Telefon, obwohl beide Texte schmal sind. Jetzt ist die ZAHL der gierige Teil. Der freie Platz sammelt sich in ihrem Kasten, und weil ihr Text rechts ausgerichtet ist, sammelt er sich LINKS von ihm: Die Zahl rueckt an den Pfeil heran, der Name behaelt genau die Breite, die er braucht. Am Verhalten bei Enge aendert das nichts: Beide duerfen weiter schrumpfen (flex-shrink 1), und zwar im Verhaeltnis ihrer Inhalte - der lange Name gibt dann mehr nach als die kurze Zahl, wie vorher. */ details.mini.xgrp > summary .svc-group-label{flex:0 1 auto;min-width:0; hyphens:auto;overflow-wrap:break-word} /* Die Zahl behaelt ihre Inhaltsbreite und wird vom auto-Rand nach rechts geschoben. Ein wachsender Kasten (flex:1 1 auto) taete dasselbe, solange der Text rechts steht - er macht aber den Unterschied zwischen "Zahl rechts" und "Kasten rechts" unsichtbar, und genau daran habe ich vorhin die falsche Stelle gesucht. */ /* DIE ABSTAENDE SIND JETZT UNGLEICH (29.09.2026, Vorgabe Claras: "die Verteilung ungleich machen, sodass zwischen Zahl und Pfeil eigentlich kaum eine Luecke besteht"). Ein gemeinsamer gap-Wert kann das nicht - er gilt fuer jeden Zwischenraum gleich. Also gap:0 und die drei Abstaende einzeln gesetzt: Name -> ⓘ 8px, damit das Zeichen nicht am Wort klebt ⓘ -> Zahl der ganze Rest (auto), er schiebt die Zahl nach rechts Zahl -> Pfeil 2px, praktisch nichts - sie gehoeren zusammen Der ⓘ-Knopf ist 40px breit und traegt seinen Freiraum innen; nach aussen braucht er deshalb keinen. */ details.mini.xgrp > summary .svc-group-label{margin-right:8px} details.mini.xgrp > summary .xgrp-n{flex:0 1 auto;margin-left:auto;margin-right:2px; white-space:normal;text-align:right;font-size:11px;line-height:1.3} details.mini.xgrp > summary .xgrp-chev{margin-left:0} details.mini.xgrp > summary > .kb-info, details.mini.xgrp > summary .xgrp-chev{flex:0 0 auto} /* Weniger Luft im Kasten, seit der Kopf zweizeilig werden darf (Vorgabe Claras: "du darfst auch den Abstand in dem Kasten nach oben und unten veraendern"). */ details.mini.xgrp > .xgrp-body{padding:0 12px 8px} } /* NUR IM ZUGEKLAPPTEN ZUSTAND (Vorgabe 24.09.2026: der beige Grund beim Ueberfahren ist "ein bisschen zu gross, da es den Inhalt der aufklappbaren Box schneidet"). Offen sitzt der Kopf unmittelbar ueber dem Inhalt - die Flaeche laeuft dann bis an die erste Zeile heran und sieht aus, als schnitte sie hinein. Zugeklappt ist sie das, was sie sein soll: die Ruecklmeldung, dass hier etwas aufgeht. Dieselbe Loesung wie bei .pinfo-geraet. */ details.mini.xgrp:not([open]) > summary:hover{background:var(--gruen-tint)} details.mini.xgrp > summary .svc-group-label{padding:0;margin:0;flex:0 1 auto;min-width:0} /* Der ⓘ gehoert zum Namen und darf nicht mitschrumpfen - er ist ein Ziel zum Antippen. Fuer den ↗ bei "Selbst besorgen" (03.10.2026) gilt dasselbe: Er steht direkt hinter der Ueberschrift, vor der Zahl, die .xgrp-n per margin-left:auto nach rechts zieht. Das negative Aussenmass holt den Knopf an die Schrift heran - er ist 30px breit, die Beschriftung darin 15px, und ohne das stuende der Pfeil wie abgerueckt da. */ details.mini.xgrp > summary > .kb-info, details.mini.xgrp > summary > .xr-seite{flex:0 0 auto} details.mini.xgrp > summary > .xr-seite{margin-left:-4px} details.mini.xgrp .xgrp-n{margin-left:auto;font-size:11.5px;font-weight:700; color:var(--bernstein-dark);white-space:nowrap} /* KEIN PLUS UND MINUS MEHR (Vorgabe 21.09.2026). details.mini setzt es als ::after auf jedes summary; hier traegt der Kopf stattdessen ein ▾ im Markup, wie ueberall sonst auf der Seite. Die Regel MUSS den [open]-Zustand eigens nennen: `details.mini[open] summary::after` hat dieselbe Spezifitaet wie die Grundregel und steht spaeter in der Datei - ohne die zweite Zeile kaeme im aufgeklappten Zustand das Minus zurueck. */ details.mini.xgrp > summary::after, details.mini.xgrp[open] > summary::after{content:none} /* Der Pfeil selbst - Zeichen, Groesse und Drehung wie .sd-chev, .xr-chev und .pinfo-chev. margin-left:auto greift nur, wenn rechts keine Zahl steht; sonst schiebt die sich schon dorthin und der Pfeil setzt sich mit dem Spaltenabstand daneben. */ .xgrp-chev{flex:0 0 auto;margin-left:auto;font-family:var(--mono);font-size:12px; color:var(--muted);transition:transform .2s ease} .xgrp-n + .xgrp-chev{margin-left:0} details.mini.xgrp[open] > summary .xgrp-chev{transform:rotate(180deg)} /* Der Inhalt sitzt auf derselben Innenkante wie die Kopfzeile darueber - sonst bilden Kopf und Zeilen zwei Kanten im selben Kasten. AM AUFKLAPPER FESTGEMACHT, NICHT AN DER LISTE: Die Regel stand zuerst als `#cmExtraList .xgrp-body`. Damit galt sie nur fuer die Gruppen im Dialog - der Kasten "Selbst besorgen", der seit dem 21.09.2026 derselbe Aufklapper ist, aber ausserhalb der Liste steht, haette seinen Inhalt ohne Abstand an den Rahmen gelegt. */ details.mini.xgrp > .xgrp-body{padding:0 14px 10px} /* FESTE GRUPPEN (User-Vorgabe 12.08.2026): Fundament, Hauseinfuehrung und Peripherie-Paket stehen immer offen und haben gar keinen Umschalter - das sind Entscheidungen, die zum Kit gehoeren. Nur der hydraulische Abgleich bleibt einklappbar und behaelt sein
. Der Kopf sieht bewusst identisch aus, nur ohne Pfeil: derselbe Abstand, dieselbe Zaehlung rechts. Sonst saehe die eine Gruppe fremd zwischen den anderen aus. */ .xgrp.xgrp-fest{margin:0;padding:2px 0 0;border-top:none} .xgrp-kopf{display:flex;align-items:baseline;gap:10px;padding:7px 0 6px} /* Name und Summe teilen sich eine Zeile. Wird es zu eng, bricht die SUMME in die naechste Zeile (flex-wrap) statt den rechts reservierten Rand zusammenzudruecken - dadurch stand die Summe der Peripherie-Gruppe 8px weiter rechts als die der Hauseinfuehrung. Bewusst KEIN text-overflow:ellipsis auf dem Namen: das kuerzte "Peripherie-Paket" sichtbar zu "Peripherie-Pa…", und ein abgeschnittener Rubriktitel sieht nach Fehler aus, nicht nach Ordnung. Lieber eine Zeile mehr. (13.08.2026) */ .xgrp-kopf{flex-wrap:wrap;row-gap:2px} .xgrp-kopf .svc-group-label{padding:0;margin:0;flex:0 1 auto;min-width:0} .xgrp.xgrp-fest .xgrp-n{margin-left:auto;font-size:11.5px;font-weight:700; color:var(--bernstein-dark);white-space:nowrap} .xgrp-body{padding-bottom:6px} /* HINWEIS STATT AUSWAHL (25.09.2026, Vorgabe Claras: "nur ein kleiner Hinweis in kursiv"). Bei Heizkoerpern steht in der Gruppe "Pumpengruppen" kein Paket mehr, sondern dieser eine Satz. Kursiv und eine Spur kleiner als die Zeilen daneben - damit er nicht wie eine Position aussieht, der nur der Preis fehlt. */ .xgrp-hinweis{margin:2px 0 4px;font-size:13.5px;line-height:1.45;color:var(--graphit)} /* Konfiguration per E-Mail (18.08.2026). Bewusst als zugeklappter Aufklapper unter dem Kaufknopf: wer kaufen will, klickt oben; wer vergleichen will, findet es hier. Nutzt details.mini, .emailrow und .proconsent, die es alle schon gibt - kein neues Idiom. */ details.mini.konfmail{margin-top:14px;border-top:1px solid var(--line);padding-top:4px} details.mini.konfmail > summary{padding:9px 0 8px} .konfmail-body{padding:2px 0 10px} .konfmail-body .sub{font-size:13.5px;color:var(--graphit);margin:0 0 10px} .konfmail-body .proconsent{display:flex;align-items:flex-start;gap:8px;margin:10px 0 12px;font-size:13px;color:var(--graphit);line-height:1.4} .konfmail-body .proconsent input{margin-top:2px;flex:0 0 auto} .konfmail-body .btn{width:100%} .svc-row{padding:7px 0} .svc-row:last-of-type{border-bottom:none} .svc-row .buyline,.svc-row .svcchoice{padding:0;border-bottom:none} /* Zusatzinfo je Service: standardmäßig zu, Aufklapp-Pfeil rechts (gleiches Muster wie Förder-Karte) */ .svc-why{display:none;font-family:var(--mono);font-size:11px;color:var(--muted);margin:6px 0 0 29px} .svc-row.open .svc-why{display:block} .svc-right{display:flex;align-items:center;gap:6px;flex:0 0 auto} /* ÖLTANK-ENTSORGUNG: DAS AUSWAHLFELD UNTER DER ZEILE (02.10.2026, Vorgabe Claras). Eingerückt auf 29px wie .svc-why darüber - also auf die Textkante neben dem Haken, nicht auf die des Hakens selbst. So liest es sich als Nachsatz zu DIESER Zeile und nicht als neuer Punkt der Liste. Die Breite ist begrenzt: Ein Auswahlfeld über die ganze Kastenbreite sähe aus wie ein Eingabefeld für etwas Längeres, hier stehen vier kurze Angaben darin. */ .oel-wahl{margin:8px 0 2px 29px;max-width:340px} .oel-wahl[hidden]{display:none} .oel-select{width:100%;font-family:var(--mono);font-size:14px;padding:9px 30px 9px 10px;border:1.5px solid var(--line);border-radius:var(--radius-s);background:#fff;color:var(--ink);cursor:pointer; /* Eigener Pfeil statt des Systempfeils: Safari auf iOS zeichnet sonst einen eigenen Rahmen um das Feld, der mit dem hier nichts zu tun hat. */ -webkit-appearance:none;appearance:none; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%236B6B6B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 10px center;background-size:11px 7px} .oel-select:focus{outline:2px solid var(--gruen);outline-offset:1px;border-color:var(--gruen)} /* Der Hinweis steht nur, solange nichts gewählt ist - danach beantwortet ihn das Feld selbst. */ .oel-hinweis{font-family:var(--mono);font-size:11px;color:var(--muted);margin:6px 0 0;line-height:1.45} .oel-hinweis[hidden]{display:none} .svc-info,.kb-info,.xr-seite{flex:0 0 auto;width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;background:none;border:none;border-radius:8px;cursor:pointer;padding:0} .svc-info:hover,.kb-info:hover,.xr-seite:hover{background:var(--gruen-tint)} .kb-info,.xr-seite{font-size:15px;color:var(--bernstein-dark)} .svc-info[aria-expanded="true"] .xr-chev{transform:rotate(180deg)} .svcline{display:flex;align-items:center} .svcline .svcchoice{flex:1;min-width:0} /* Eigenleistungs-Eingabe: groß genug zum Tippen, ≥16px verhindert den iOS-Auto-Zoom */ .eigen-wrap{display:flex;align-items:center;gap:6px} .eigen-wrap input[type=number]{width:112px;font-family:var(--mono);font-size:16px;font-weight:700;padding:10px;border:1.5px solid var(--line);border-radius:var(--radius-s);text-align:right;background:#fff} .eigen-eur{font-family:var(--mono);font-size:15px;font-weight:700} /* ================= PREISBLOCK (umgebaut 11.08.2026, Carsten) ================= Die Hierarchie ist umgedreht. Bis heute war "Gesamt" die grosse Bernstein-Zahl und "Preis nach Foerderung" die kleine, graue Zeile darunter - der Kunde sah also als Erstes und Groesstes den hoechsten Betrag der ganzen Seite, und die Zahl, auf die es ihm ankommt, stand kleingedruckt daneben. Bei rund 90 % Abbruch auf dieser Seite ist das die teuerste Zeile Design der Seite gewesen. Jetzt: Paketsumme ist ein Zwischenschritt (klein, graphit), der Endpreis nach Foerderung ist eine hervorgehobene Karte. .anchorline und .saveline sind ersatzlos entfallen - der Handwerker-Vergleich ist raus (siehe konfigurator.js, updateTotal). */ .totalrow{display:flex;justify-content:space-between;align-items:baseline;border-top:2px solid var(--ink);margin-top:10px;padding-top:12px;font-weight:800} .totalrow .sum{font-family:var(--mono);font-size:26px;color:var(--bernstein-dark)} /* Zwischensumme: bewusst zurueckgenommen - duenne Linie statt 2px, Graphit statt Bernstein, 19px statt 26px. Sie darf informieren, aber nicht mehr um Aufmerksamkeit konkurrieren. */ .totalrow.sub{border-top:1px solid var(--line);font-weight:700;font-size:15px;color:var(--graphit)} .totalrow.sub .sum{font-size:19px;color:var(--graphit)} /* Abzugszeile zwischen Gesamt und Endpreis. Keine eigene Oberkante: die drei Zeilen sind EINE Rechnung, kein Stapel aus drei Kaesten. --gruen ist trotz seines Namens #6B4A34, also Nussbraun - dieselbe Farbe wie --walnuss. Hier absichtlich verwendet, weil die Zeile zum Foerder-Kasten darunter gehoert, der dieselbe Farbwelt traegt. Wer den Token je auf echtes Gruen umstellt, sollte hier nachsehen. */ .totalrow.abzug{border-top:none;margin-top:5px;padding-top:0;font-weight:700;font-size:15px;color:var(--gruen)} .totalrow.abzug .sum{font-size:19px;color:var(--gruen)} .totalrow.abzug small{margin-left:7px;font-family:var(--mono);font-size:11px;font-weight:700; letter-spacing:.04em;color:var(--muted)} /* Durchgestrichener Gesamtpreis, von links unten nach rechts oben. Als gedrehte Linie statt line-through, weil die waagerechte Variante bei Monospace-Ziffern wie ein Minuszeichen aussieht - gerade in einer Zeile, in der direkt darunter ein echtes Minus steht. */ .sum.gestrichen{position:relative;color:var(--muted)} /* 46 % statt 50 %: die Ziffern sitzen im Kasten hoeher als dessen Mitte (Zeilenhoehe unter der Grundlinie), bei 50 % lief der Strich durch das untere Drittel. */ .sum.gestrichen::after{content:"";position:absolute;left:-3px;right:-3px;top:46%;margin-top:-1px; height:2px;border-radius:2px;background:var(--rost-dark); transform:rotate(-7deg);transform-origin:center;pointer-events:none} /* Feste 3px statt Prozent: prozentualer Ueberstand waechst mit der Zahlenbreite, und die Drehung hebt das rechte Ende zusaetzlich an - auf 390px stand der Strich deutlich neben dem Betrag, statt durch ihn zu gehen. Mobil noch etwas flacher, weil die Zahl dort kleiner ist. */ @media(max-width:576px){.sum.gestrichen::after{transform:rotate(-6deg);left:-2px;right:-2px}} .foerderline{display:flex;justify-content:space-between;align-items:center;gap:10px;border-top:1px dashed var(--line);margin-top:16px;padding:16px 0 0;font-weight:700;color:var(--ink)} .foerderline .price{font-family:var(--mono);font-weight:700;font-size:17px;white-space:nowrap;color:var(--ink)} .foerderline .tag{margin-left:8px;font-weight:700} /* Der Endpreis: einzige hervorgehobene Zahl im Block. Bernstein-Tint + Rahmen heben ihn aus der Zeilenflucht heraus, ohne einen neuen Farbton einzufuehren. */ .totalrow.eff{border-top:none;margin-top:12px;padding:14px 16px;align-items:center;gap:12px; background:var(--bernstein-tint);border:1.5px solid var(--bernstein);border-radius:var(--radius); /* Umbruch erlauben: die Karte steht auch in der Split-View-Sidebar und im Direktkauf-Modal, die bei ~320 px Innenbreite liegen - dort passen Label und 30-px-Mono-Betrag nicht mehr nebeneinander. Ohne wrap schiebt der nowrap-Betrag ueber den Rahmen hinaus, und die Scrollbalken sind global auf width:0 gesetzt, es gaebe also nicht einmal einen Hinweis. Die 560-px-Media-Query greift dort nicht: Split-View existiert erst ab min-width 761 px. */ flex-wrap:wrap} .totalrow.eff>span:first-child{font-size:15.5px;line-height:1.3;min-width:0} /* "voraussichtlich - Antrag vor Baubeginn noetig": Pflichtzusatz an der groessten Zahl der Seite. Sie ist eine Foerderschaetzung, nicht der geschuldete Betrag - ohne den Hinweis waere der optisch dominante Preis ein anderer als der zu zahlende. Bewusst nicht ausgegraut, sondern nur kleiner: er soll gelesen werden. */ .totalrow.eff .eff-lbl{display:flex;flex-direction:column;gap:2px;min-width:0} .totalrow.eff .eff-lbl small{font-size:11.5px;font-weight:600;line-height:1.35;color:var(--gruen)} .totalrow.eff .sum{font-size:30px;color:var(--bernstein-dark);white-space:nowrap;margin-left:auto} /* Sidebar/Modal: sobald der Container schmal wird, faellt der Betrag unter das Label statt ueber die Kante zu laufen. cqw waere schoener, aber der Container hat keine container-type. */ html.bwp-split .totalrow.eff .sum,#cartModal .totalrow.eff .sum{font-size:26px} .totalrow.eigen{border-top:1px dashed var(--line);margin-top:0;padding-top:9px;font-weight:600;font-size:14.5px;color:var(--graphit)} .totalrow.eigen span:last-child{font-family:var(--mono);font-weight:700;font-size:15px;color:var(--ink)} .banner{border-radius:var(--radius-s);padding:11px 14px;font-size:13.5px;margin-top:12px;text-align:left} .banner.warn{background:var(--warn-tint);border:1px solid #E3956B;color:var(--warn)} .banner.ok{background:none;border:none;border-radius:0;padding:0;margin-top:22px;color:var(--ink)} .banner.ok::before{content:"\2713 ";color:var(--gruen);font-weight:700} .banner.resnote::before{content:none} /* Aufschlüsselung braucht kein vorangestelltes Häkchen */ details.mini{padding:12px 0 10px;margin-top:8px} details.mini summary{cursor:pointer;font-weight:700;font-size:14px;color:var(--gruen);list-style:none;display:flex;justify-content:space-between} /* Die Zusammenfassung ist ein Flex-Container mit space-between. Steht mitten im Text ein (z. B. die Positionszahl im Lieferumfang), wird daraus ein eigenes Flex-Element und der Satz reisst auseinander: "Lieferumfang ( 0 Positionen)". Ein .mini-label fasst den ganzen Text zu EINEM Element zusammen, das +/- bleibt das zweite. */ details.mini summary>.mini-label{flex:1 1 auto;min-width:0} details.mini summary::-webkit-details-marker{display:none} details.mini summary::after{content:"+";font-family:var(--mono)} details.mini[open] summary::after{content:"–"} .lu-grid{display:grid;grid-template-columns:1fr;gap:2px;margin-top:8px} /* Gleiche Logik wie bei .buyline: Trennlinie kommt vom naechsten Element, nicht von der letzten Zeile selbst - sonst doppelte gestrichelte Linie zwischen dem Ende von .lu-grid und dem naechsten Element (z.B. .svc-block), das seine eigene border-top mitbringt. */ .lu-grid div{font-size:14px;padding:4px 0} .lu-grid div + div{border-top:1px dashed var(--line)} /* Bauteile-Karten: Kopfzeile sauber in zwei Gruppen aufgeteilt (Name+Preis links, "N Positionen" + Auf/Zu-Icon als EIN rechtsbuendiges Paar) statt drei einzeln space-between'ter Elemente wie bei den anderen .mini-Akkordeons - deshalb eigenes ::after auf .bt-item-count statt auf summary. */ .bt-item summary{align-items:center;gap:14px} /* Der [open]-Zustand MUSS mitgenannt werden: `details.mini[open] summary::after` hat eine hoehere Spezifitaet (0,2,3) als eine Unterdrueckung ohne [open] (0,1,3) - aufgeklappt erschien deshalb zusaetzlich zum Zeichen der .bt-item-count ein ZWEITES Minus. */ details.bt-item summary::after, details.bt-item[open] summary::after{content:none} .bt-item-name{flex:1;min-width:0} /* Bauteile-Uebersicht auf dem Handy (User-Vorgabe 30.07.2026: "wirkt sehr eng und unuebersichtlich"). Der Positionszaehler ist raus, der Klick fuehrt direkt auf die Detailseite (siehe renderBauteilePanel). Dadurch ist jede Karte eine ruhige Zeile statt eines Akkordeons - und bekommt Luft. */ @media(max-width:768px){ .bt-item{margin-bottom:10px} .bt-item summary{padding:16px 16px;gap:12px;min-height:60px} .bt-item-name{font-size:15.5px;line-height:1.35} /* Der Details-Knopf wird zum Pfeil - die ganze Zeile ist ohnehin klickbar. */ .bt-detail-link{flex:0 0 auto;font-size:0;padding:0;border:0;background:none;min-width:28px} .bt-detail-link::after{content:"→";font-family:var(--mono);font-size:15px;font-weight:700;color:var(--muted)} .lu-grid{gap:12px} } /* Zahlarten im Hero - bewusst leise (User-Vorgabe 30.07.2026: "muss aber dezent sein"). Graustufen und kleine Zeichen, damit die Zeile Sicherheit gibt, ohne mit dem CTA um Aufmerksamkeit zu konkurrieren - das System erlaubt nur einen lauten Punkt pro Schirm. */ .hero-pay{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;margin-top:16px} /* Urbanist statt Mono (User-Vorgabe 30.07.2026) - die Zeile ist Fliesstext, keine Kennzahl. */ .hero-pay-text{font-family:var(--font);font-size:12.5px;font-weight:600;letter-spacing:0; text-transform:none;color:var(--muted)} .hero-pay-icons{display:flex;align-items:center;flex-wrap:wrap;gap:6px} /* Zeichen IMMER farbig (User-Vorgabe 30.07.2026). Die Graustufen waren zwar dezent, aber ein ausgegrautes Zahlungslogo liest sich wie "nicht verfuegbar" - genau das Gegenteil der Absicht. Dezent bleibt es ueber die Groesse, nicht ueber die Farbe. */ .hero-pay-ico{height:22px;width:auto;display:block;border-radius:3px} @media(max-width:992px){ /* Wie die USPs: Block mittig, Inhalt an einer Kante. */ .hero-pay{width:fit-content;max-width:100%;margin-left:auto;margin-right:auto; margin-top:20px;margin-bottom:0} /* Der Abstand zum Bild darunter haengt jetzt am ganzen Block statt an den Zahlarten allein - sonst ginge er verloren, sobald die Fussnote als letztes Element darunter steht (oder umgekehrt, wenn das Sternchen am Preis entfaellt). Summe unveraendert: vorher 26px unter den Zeichen, jetzt 26px unter dem Block. */ .hero-payblock{margin-bottom:26px} .hero-pay-ico{height:20px} } /* Hinweis unter der Stueckliste, wenn Positionen ohne Foto ausgeblendet wurden. */ .bt-pos-rest{margin-top:12px;padding-top:10px;border-top:1px dashed var(--line); font-size:13px;line-height:1.5;color:var(--muted)} .bt-item-count{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;color:var(--muted);font-weight:500;white-space:nowrap} .bt-item-count::after{content:"+";font-family:var(--mono);color:var(--gruen);font-weight:700} .bt-item[open] .bt-item-count::after{content:"–"} .lu-grid .m{color:var(--gruen);font-weight:700;margin-right:8px} /* Topic 2: "Details ansehen" direkt in der Kopfzeile jeder Bauteil-Karte - eigener Button in .summary statt hinter dem Aufklappen versteckt, per stopPropagation vom Akkordeon-Toggle entkoppelt. Detail-Seite selbst ersetzt #bauteileList komplett (gleiches Swap-Prinzip wie renderBuyBox/backToCompare). */ .bt-detail-link{flex:0 0 auto;font-size:12.5px;font-weight:700;color:var(--bernstein-dark);background:none;border:1px solid var(--line);border-radius:var(--radius-xl);padding:5px 12px;cursor:pointer;transition:border-color .15s ease,background .15s ease,transform .15s cubic-bezier(.22,1,.36,1)} .bt-detail-link:hover{border-color:var(--bernstein-dark);background:var(--bernstein-tint);transform:translateY(-1px)} /* Der Pfeil gehoert zum Link, nicht in den Text - so laesst er sich beim Hover bewegen und der Knopf liest sich klarer als "fuehrt woandershin" statt als weiterer Aufklapper. */ .bt-detail-link::after{content:"→";margin-left:6px;display:inline-block;transition:transform .15s cubic-bezier(.2,.8,.2,1)} .bt-detail-link:hover::after{transform:translateX(3px)} @media (prefers-reduced-motion: reduce){.bt-detail-link,.bt-detail-link::after{transition:none}.bt-detail-link:hover{transform:none}} /* "Frage einreichen": Kunden koennen in Shopify keine eigenen Threads anlegen, deshalb sammelt ein natives Kontaktformular die Fragen ein. Optisch bewusst wie ein Beitrag, nicht wie ein Support-Ticket - es soll sich nach Mitmachen anfuehlen. */ .frage-form{max-width:700px;margin:40px 0 0;padding:22px 24px;background:var(--sand);border-radius:var(--radius)} .frage-form b{font-size:18px} .frage-form-sub{font-size:14.5px;color:var(--graphit);line-height:1.55;margin-top:6px} .frage-form-felder{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px} .frage-form-felder input{flex:1 1 200px;min-width:0} .frage-form input,.frage-form textarea{width:100%;font-family:var(--font);font-size:16px;padding:12px 14px;border:1.5px solid var(--line);border-radius:var(--radius-s);background:var(--card);color:var(--ink)} .frage-form textarea{margin-top:10px;resize:vertical;line-height:1.5} .frage-form .btn{width:auto;margin-top:14px} .frage-form .fineprint{margin-top:10px} .frage-form-done b{display:block;font-size:18px} .frage-form-done p{font-size:14.5px;color:var(--graphit);line-height:1.55;margin-top:6px} @media(max-width:576px){.frage-form{padding:18px 16px}.frage-form .btn{width:100%}} /* Kontakt-Ausweg am Ende des Fragen-Tabs: steht bewusst nach FAQ und Community, nicht davor - erst Selbsthilfe, dann der persoenliche Weg. */ .hilfe-ausweg{max-width:700px;margin:40px 0 0;padding:22px 24px;background:var(--card);border:1.5px solid var(--line);border-radius:var(--radius)} .hilfe-ausweg b{font-size:18px} .hilfe-ausweg p{font-size:14.5px;color:var(--graphit);line-height:1.55;margin-top:6px} .hilfe-ausweg-wege{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px} .hilfe-ausweg-wege .btn{width:auto;margin-top:0} @media(max-width:576px){.hilfe-ausweg{padding:18px 16px}.hilfe-ausweg-wege .btn{width:100%}} /* Stücklisten-Positionen mit Bild: feste Bildspalte, damit die Namen trotz unterschiedlicher Bildverfügbarkeit auf einer Fluchtlinie stehen. Positionen ohne Herstellerbild bekommen einen leeren Platzhalter gleicher Breite statt eines Ersatzbildes. */ .bt-poslist{display:flex;flex-direction:column;gap:2px;margin-top:8px} .bt-pos{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--line)} .bt-pos:last-child{border-bottom:0} .bt-pos-img{flex:0 0 auto;width:44px;height:44px;object-fit:contain;background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:3px} .bt-pos-img--leer{background:repeating-linear-gradient(135deg,var(--paper) 0 6px,var(--card) 6px 12px);border-style:dashed} .bt-pos-name{flex:1;min-width:0;font-size:14px;line-height:1.4;overflow-wrap:anywhere} .bt-pos-qty{flex:0 0 auto;font-weight:700;color:var(--gruen)} @media(max-width:576px){.bt-pos-img{width:38px;height:38px}.bt-pos-name{font-size:13.5px}} .bt-detail-head{display:flex;align-items:center;gap:16px;margin-bottom:18px} .bt-detail-head img{width:88px;height:88px;object-fit:contain;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-s);padding:8px;flex:0 0 auto} .bt-detail-noimg{width:88px;height:88px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:11.5px;color:var(--muted);background:var(--paper);border:1px dashed var(--line);border-radius:var(--radius-s);flex:0 0 auto;padding:6px} .bt-detail-head h3{font-size:19px;font-weight:800} /* AUF DER PAKETSEITE IST DER TITEL EINE SEITENUEBERSCHRIFT (30.09.2026, Vorgabe Claras: "mach bitte die Fontgroesse der Titel bei der Produktpaketseite groesser, so wie 'Häufige Fragen dazu'"). Dieselbe Staffelung wie section.land h2 - das IST die Groesse von "Häufige Fragen dazu" weiter unten auf derselben Seite. NUR .zub-head, nicht .bt-detail-head: Dieselbe Ueberschrift traegt auch die Info-Blase im Konfigurator und die aeltere Detailansicht. Dort ist sie ein Einschub in einer laufenden Seite und muss klein bleiben; hier ist sie der Titel der Seite. line-height und letter-spacing kommen mit: Bei 46px wirkt der Zeilenabstand von 1,4 aus der Grundschrift auseinandergezogen, und die Ueberschriften des Themes stehen alle etwas enger. Ohne beides saehe der Titel aus wie vergroesserte Fliesstextschrift. */ .zub-head h3{font-size:clamp(26px,4.4vw,46px);line-height:1.08;letter-spacing:-.02em} .bt-detail-body{margin-bottom:18px} .bt-detail-body p{font-size:14.5px;line-height:1.55;color:var(--ink)} .bt-detail-body h4{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:var(--bernstein-dark);margin-top:14px;margin-bottom:4px} /* ---------- Services im Buybox: immer sichtbar, Pflicht/Freiwillig getrennt (reuse .sd-group) ---------- */ .svc-block{margin-top:26px} .svc-block-title{font-weight:800;font-size:14px;margin-bottom:10px} .svc-block .sd-group{padding:2px 16px 8px;margin-bottom:12px} .svc-block .sd-group:last-of-type{margin-bottom:0} .svc-group-label{font-weight:700;font-size:14px;color:var(--gruen);padding:12px 0 4px} /* SATZ STATT ZEILE ZUM ANKLICKEN (30.09.2026). Steht direkt unter der Gruppenueberschrift und nennt, was inklusive ist - siehe SERVICE_INKLUSIVE in konfigurator.js. Bewusst ruhiger als eine Serviceszeile: Es ist eine Feststellung und keine Wahl. */ .svc-inklusive{margin:2px 0 10px;font-size:13.5px;line-height:1.5;color:var(--muted)} .svc-group-label.muted{color:var(--graphit)} .svc-block .svc-row:first-of-type{border-top:none} /* ---------- Förderung-Erklärung: Kurzfassung sichtbar, Details hinter (i) ---------- */ details.foerder-info{background:none;border:none;border-top:1px dashed var(--line);border-radius:0;padding:14px 0 0;margin-top:14px;color:var(--gruen);font-size:13.5px} details.foerder-info summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;font-weight:700} details.foerder-info summary::-webkit-details-marker{display:none} details.foerder-info summary::before{content:"\2713 ";color:var(--gruen);font-weight:700} details.foerder-info .infodot{flex:0 0 auto;width:18px;height:18px;border-radius:50%;border:1.5px solid var(--gruen);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:10.5px;font-weight:700;margin-left:auto;color:var(--gruen)} details.foerder-info .foerder-info-body{margin-top:10px;font-weight:500;color:var(--graphit)} details.foerder-info .foerder-info-body .src{display:block;font-family:var(--mono);font-size:10px;color:var(--muted);margin-top:6px} details.foerder-info .foerder-info-body .tag{font-weight:700} /* ---- Pflichtangabe am Haken (16.10.2026, Vorgabe Claras) ---- Ein Stern, kein Satz: "das musst du nicht als langen Text ausschreiben, aber dieses typische Sternchen, das das eigentlich schon aussagt." Im Kleingedruckten darunter steht einmal "* Pflichtangabe" - zusammen ist das die uebliche Lesart. .fehlt setzt das Skript erst nach einem Klick ohne Haken: Ein Kasten, der von Anfang an rot umrandet ist, meldet einen Fehler, den noch niemand gemacht hat. */ .pflicht-stern{color:var(--warn);font-weight:800} .proconsent.pflicht{position:relative} .proconsent.fehlt{background:var(--warn-tint);border-radius:var(--radius-xs); outline:1.5px solid #E3956B;outline-offset:3px} /* Der Weg zurueck in den Rechner - leiser als alles andere im Kasten, er fuehrt nicht ans Ziel, sondern noch einmal an den Anfang. */ .ausl-neu{margin:14px 0 0} .ausl-neu .btn.quiet{padding-left:0;font-size:14px} .emailrow{margin-top:14px} .emailrow input{font-size:16px;padding:12px 14px} /* ≥16px: kein iOS-Auto-Zoom */ .emailrow .email-hint{font-size:12.5px;color:var(--muted);margin-bottom:8px} .fineprint{font-size:11px;color:var(--muted);margin-top:10px;text-align:center} /* ---------- Bestätigung nach Reservieren/Kaufen: direkt zu Lieferumfang + Anleitung ---------- */ .orderconfirm{border-top:1px dashed var(--line);margin-top:14px;padding-top:14px} .oc-head{font-size:14px;color:var(--ink)} .oc-head .oc-check{display:inline-flex;width:20px;height:20px;border-radius:50%;background:var(--gruen);color:#fff;align-items:center;justify-content:center;font-size:12px;font-weight:700;margin-right:6px} .oc-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px} .oc-btn{flex:1 1 200px;display:block;font-family:var(--font);font-weight:700;font-size:14px;color:var(--ink);background:var(--paper);border:1.5px solid var(--line);border-radius:var(--radius-s);padding:12px 16px;cursor:pointer;text-align:center;transition:border-color .12s,color .12s} .oc-btn:hover{border-color:var(--gruen);color:var(--gruen)} /* ---------- Landing-Sektionen: Luft statt Boxen ---------- */ /* DER TITEL STEHT AM OBEREN RAND DES ABSCHNITTS (30.09.2026, Vorgabe Claras: "kannst du diesen Abstand bitte bei allen Abschnitten verringern, also dass der Titel am oberen Rand des Abschnittes ist"). Vorher waren es oben wie unten 82px. NUR OBEN. Unten bleiben die 82px: Sie sind der Abstand zum naechsten Abschnitt, und der wird beim Lesen als Trennung gebraucht. Zwischen zwei Abschnitten stehen damit weiterhin 112px (82 unten + 30 oben) statt 164 - enger, aber nicht zusammengeschoben. 30px und nicht 0: Bei 0 saesse die Ueberschrift auf der Kante des Abschnitts davor. Auf farbig abgesetzten Baendern (section.land.dark, .seitenband) waere das sichtbar falsch. */ section.land{padding:30px 0 82px} @media(max-width:768px){section.land{padding:22px 0 52px}} /* line-height gehoert hier explizit hin: ohne Angabe erbt die Ueberschrift die 1.55 des Fliesstextes. Bei 46px Schrift sind das 71px Zeilenhoehe - Absatzabstand fuer eine Display-Ueberschrift, und jede zweizeilige Ueberschrift zieht die Seite unnoetig lang (Befund aus der Notion-Liste, nachgemessen 18.08.2026). 1.08 ist der uebliche Wert fuer Schriftgroessen dieser Klasse; der Hero-H1 steht bereits bei 1.02. */ section.land h1,section.land h2{font-weight:800;font-size:clamp(28px,4.4vw,46px);line-height:1.08;letter-spacing:-.02em;margin-top:14px;max-width:16ch} /* EINZEILIGE UEBERSCHRIFTEN AUF BREITEN SCHIRMEN (User-Vorgabe: "Titel moeglichst one-liner") Die Deckelung auf 16ch ist knapp 447px und gilt bisher unabhaengig von der Fensterbreite. Gemessen bei 1440px: fuenf von zehn Ueberschriften brachen um, obwohl links und rechts reichlich Platz war - "Was andere Selbsteinbauer berichten." lief sogar ueber drei Zeilen. Der Umbruch kam also nicht vom Platzmangel, sondern von dieser Zahl. Auf schmalen Schirmen bleibt 16ch: dort ist die enge Zeile richtig und der Platz real knapp. */ @media(min-width:1025px){ section.land h1,section.land h2{max-width:min(40ch,100%)} } /* ---------- DER FLIESSTEXT WAECHST MIT DEM FENSTER (02.10.2026) ---------- Vorgabe Claras: "den Text bitte, wenn der Screen kleiner wird, auch kleiner machen, und wenn der Screen groesser wird, sodass dieser auch groesser wird". DIE UEBERSCHRIFTEN KONNTEN DAS SCHON: section.land h1/h2 stehen auf clamp(28px,4.4vw,46px), ebenso die Zwischentitel und der Kopf der Startseite. Der FLIESSTEXT stand dagegen ueberall auf festen Werten - 17px die Unterzeile, 16px der Textabsatz, 15px in den Gruenden. Auf einem grossen Schirm wirkte die Seite deshalb von Zeile zu Zeile unterschiedlich: grosse Ueberschrift, kleiner Satz darunter. JETZT UEBERALL clamp(klein, waechst, gross). Die Mittelwerte sind so gewaehlt, dass bei rund 1360px Fensterbreite genau der bisherige Wert herauskommt - die Seite sieht auf einem gewoehnlichen Laptop also aus wie vorher und veraendert sich nur nach oben und unten. Nachgerechnet: 1,25vw x 1360 = 17px, 1,18vw x 1360 = 16px, 1,1vw x 1360 = 15px. DIE UNTERGRENZEN LIEGEN NICHT VIEL TIEFER. Unter 14px wird Fliesstext auf dem Telefon muehsam, und genau dort greift die Untergrenze - "kleiner" heisst eine Spur kleiner, nicht klein. DIE OBERGRENZEN AUCH NICHT VIEL HOEHER: Auf sehr grossen Schirmen rechnet das Layout ohnehin ueber zoom herunter (siehe layout/konfigurator.liquid); ohne Deckel kaeme beides zusammen und der Text wuerde doppelt gross. */ section.land .sec-sub{font-size:clamp(15px,1.25vw,19.5px);color:var(--graphit);margin-top:12px;max-width:46ch} /* DER WERKZEUG-ABSCHNITT ZIEHT BREITER, BLEIBT ABER LINKS (02.10.2026, Vorgabe Claras: "bei Werkzeug unter Bauteile den Text linksbuendig lassen, aber breiter ziehen"). DIE GRUNDWERTE SIND FUER DIE LINKE FLUCHT GEMACHT: 16 Zeichen Ueberschrift und 46 Zeichen Unterzeile ergeben einen schmalen, hohen Block an der Kante, neben dem Luft bleibt. Auf der Bauteile-Seite steht darunter aber die breite Karten-Reihe, und ein schmaler Textblock darueber sieht daneben aus wie abgeschnitten. ZENTRIERT WIRD NICHTS. Die Bauteile-Seite traegt bwp-mittig nicht, und das soll so bleiben - geaendert wird allein die Breite, in die der Text laufen darf. DER WAEHLER NENNT DEN ABSCHNITT UEBER SEINE KENNUNG (#werkzeug), nicht ueber die Seite: Die Section steht auf /pages/bauteile und auf /pages/werkzeuge, und dort soll sie gleich aussehen. Auf der zweiten blendet die Vorlage Ueberschrift und Unterzeile ohnehin aus. */ section.land#werkzeug > .wrap > h2{max-width:min(30ch,100%)} section.land#werkzeug > .wrap > .sec-sub{max-width:min(78ch,100%)} /* AUSGENOMMEN IST SEIT DEM 02.10.2026 AUCH DER FRAGENBLOCK (Vorgabe Claras: "bei 'Häufige Fragen dazu' den Text auch wieder linksbuendig"). Er steht ueber bwp-seite-fuss auf JEDER Seite, also auch auf den beiden mittigen - und als einziger Abschnitt dort ist er eine Liste zum Aufklappen. Die Antworten darin waren ohnehin linksbuendig (sie stecken in Bloecken, nicht unmittelbar im Abschnitt); zentriert standen nur Ueberschrift und Unterzeile darueber, und das passte nicht zu dem, was darunter kam. ---------- DER TEXT DER ABSCHNITTE STEHT MITTIG - NUR AUF STARTSEITE UND ABLAUF ---- Vorgabe Claras: "kannst du bitte auf jeder der Seiten den Text nicht linksbuendig machen, sondern mittig" - auf Rueckfrage praezisiert auf Ueberschriften, Unterzeilen UND Fliesstext; Listen, Karten, Tabellen und der Konfigurator bleiben linksbuendig. WENIGE STUNDEN SPAETER AUF DIE STARTSEITE EINGEGRENZT (Vorgabe desselben Tages: "kannst du die Zentrierung des Textes bei allen Seiten ausser der Startseite wieder rueckgaengig machen"). Dafuer traegt der dort die Kennung bwp-mittig - siehe layout/konfigurator.liquid. AM SELBEN ABEND KAM DIE ABLAUF-SEITE DAZU (Vorgabe Claras: "Ablauf bitte mittig machen, Titel und Text und Verlinkung"). Welche Seiten die Kennung tragen, steht ausschliesslich im Layout; hier ist dafuer nichts zu tun. Die Kennung hiess bis dahin bwp-start und ist umbenannt worden, weil sie nicht mehr eine Seite meint, sondern eine Eigenschaft. EINGEGRENZT, NICHT KOPIERT: Die Regeln sind dieselben geblieben und haben nur den body.bwp-mittig davorbekommen. Die Unterseiten fallen damit auf den Zustand von vorher zurueck, ohne dass irgendwo eine Gegenregel steht, die spaeter jemand uebersieht. NUR DIE DIREKTEN KINDER VON .wrap, und das ist der ganze Trick: Ueber den Abschnitt zu zentrieren (section.land{text-align:center}) waere eine Zeile gewesen - und haette jede Stueckliste, jede Preisspalte, jede Tabellenzelle und die ganze Kaufbox mitgenommen, weil text-align vererbt wird. Dann haette ich an zwei Dutzend Stellen wieder auf links zurueckstellen muessen und bei jeder neuen Karte daran denken. So trifft es ausschliesslich die Textbloecke, die unmittelbar im Abschnitt stehen; alles in einem Kasten, einer Spalte oder einer Zeile bleibt unberuehrt, ohne eine einzige Gegenregel. margin-left/right:auto GEHOERT DAZU. Die Bloecke sind in der Breite begrenzt (Ueberschrift 16ch, Unterzeile 46ch, Textabsatz 68ch). text-align zentriert nur die Zeilen INNERHALB des Blocks - der Block selbst klebte weiter am linken Rand, und zentrierte Zeilen in einem linksbuendigen Kasten saehen schlimmer aus als vorher. ZWEI AUSNAHMEN, UND BEIDE MIT GRUND: .seitenband das Kopfband der Unterseiten. Rechts liegt das Foto, der Text haelt sich links davon (max-width 58%); zentriert stuende er mitten auf der Kante zum Bild. .rechner-kopf-block derselbe Fall auf der Rechnerseite, dort ausdruecklich auf links gesetzt. Der Hero der Startseite ist ohnehin nicht betroffen (er ist kein section.land) - und er war am 30.09.2026 schon einmal mittig und ist auf Claras Wunsch zurueckgenommen worden. */ /* "SCHON GEBAUT." BLEIBT LINKSBUENDIG - und zwar als einziger Abschnitt der Startseite. Am 02.10.2026 war er auf Vorgabe mitzentriert worden ("'Schon gebaut' auf der Startseite, den Titel bitte mittig"), wenige Minuten spaeter wieder zurueck ("das 'Schon gebaut' doch wieder linksbuendig"). Der Waehler ist deshalb wieder auf die .wrap-Form allein beschraenkt. DASS DAS GENUEGT, IST KEIN ZUFALL, SONDERN DER GRUND: billigerwaermepumpe-kundenbilder laesst seine .wrap auf der Startseite absichtlich weg - dort steckt der Abschnitt im Vertrauens-Block #proof, der schon eine mitbringt, und eine zweite darin legte deren 22px Innenabstand ein zweites Mal an (Claras Hinweis vom 25.09.2026: "der 'Schon gebaut'-Titel ist nicht mit den anderen Titeln aligned"). Seine Ueberschrift haengt damit direkt an der
- und ist der einzige Fall auf der Seite, auf den das zutrifft. Nachgesehen, nicht vermutet. WER IHN DOCH WIEDER MITTIG WILL, nimmt die vier Zeilen ohne "> .wrap" wieder dazu. */ body.bwp-mittig section.land:not(.seitenband):not(.rechner-kopf-block):not(.seitenfaq) > .wrap > h1, body.bwp-mittig section.land:not(.seitenband):not(.rechner-kopf-block):not(.seitenfaq) > .wrap > h2, body.bwp-mittig section.land:not(.seitenband):not(.rechner-kopf-block):not(.seitenfaq) > .wrap > h3, body.bwp-mittig section.land:not(.seitenband):not(.rechner-kopf-block):not(.seitenfaq) > .wrap > p, body.bwp-mittig section.land:not(.seitenband):not(.rechner-kopf-block):not(.seitenfaq) > .wrap > .seiten-absatz{ text-align:center;margin-left:auto;margin-right:auto} /* ZENTRIERT BRAUCHT BREITER (02.10.2026, Vorgabe Claras: "jetzt ist der Text, der mittig ist, sehr zusammengequetscht - mach den breiter ueberall, wo er so schmal ist", mit einem Bildschirmfoto von klekks.de). WARUM ES ERST JETZT AUFFAELLT: Die Begrenzungen gab es vorher schon - Ueberschrift 16 Zeichen, Unterzeile 46, Textabsatz 68. Linksbuendig war das eine bewusste Form: Die Ueberschrift stand als schmaler, hoher Block an der linken Flucht, daneben blieb Luft. Zentriert wird aus demselben Block eine schmale Saeule in der Mitte, und die Luft steht auf BEIDEN Seiten - dieselbe Zahl, ein voellig anderes Bild. ZWEI STUFEN AM SELBEN TAG: Erst 26 Zeichen fuer die Ueberschrift und 78 fuer den Absatz, am Bildschirmfoto abgelesen und bewusst unter dessen rund 110 Zeichen je Zeile gehalten - ab etwa 90 wird das Zurueckfinden an den Zeilenanfang muehsam, und das war der Vorbehalt, den ich genannt habe. DANN AUF VOLLE SPALTENBREITE (Vorgabe Claras: "wenn du etwas mittig machst, lass den Text bitte breiter von links nach rechts gehen und nicht so schmal"). UND SCHLIESSLICH AM VORBILD GEMESSEN (Vorgabe desselben Tages: "bitte wenn es mittig ist, so machen wie hier auf der klekks Seite", mit Bildschirmfoto). Dort ist es NICHT die volle Breite: Die Ueberschrift laeuft weit, der Absatz darunter steht als ruhiger Block in der Mitte und laesst links und rechts deutlich Luft. Nachgemessen am Bildschirmfoto: Das Fenster ist rund 1230 CSS-Pixel breit, der Absatz rund 740 - also knapp 60 %. DARAUS DIE ZWEI WERTE: Ueberschriften ohne Deckelung (sie sind kurz und sollen gross dastehen), Absaetze hoechstens 820px. In unserer Spalte, die bei diesem Fenster rund 1140px misst, sind das dieselben Proportionen wie im Vorbild. Textabschnitte mit eigener Ueberschrift (.seiten-absatz) duerfen 900px, weil darin eine Zeile mehr steht. IN PIXELN UND NICHT IN ch: ch haengt an der Schriftgroesse und damit am Fenster - der Block waere auf jedem Schirm anders breit. Das Vorbild hat eine feste Breite, und darum geht es. DIE PREISFUSSNOTE BLEIBT AUSGENOMMEN (eigene Regel weiter unten): Sie ist Kleingedrucktes am Seitenende und soll ausdruecklich bis an die Seitenraender laufen. GEAENDERT WIRD NUR, WAS AUCH ZENTRIERT IST. Derselbe Waehler wie oben: Die Kopfbaender und der Rechnerkopf behalten ihre schmalen Spalten, weil dort rechts das Foto liegt. */ body.bwp-mittig section.land:not(.seitenband):not(.rechner-kopf-block):not(.seitenfaq) > .wrap > h1, body.bwp-mittig section.land:not(.seitenband):not(.rechner-kopf-block):not(.seitenfaq) > .wrap > h2, body.bwp-mittig section.land:not(.seitenband):not(.rechner-kopf-block):not(.seitenfaq) > .wrap > h3{max-width:100%} body.bwp-mittig section.land:not(.seitenband):not(.rechner-kopf-block):not(.seitenfaq) > .wrap > p{max-width:min(820px,100%)} body.bwp-mittig section.land:not(.seitenband):not(.rechner-kopf-block):not(.seitenfaq) > .wrap > .seiten-absatz{max-width:min(900px,100%)} /* DIE PREISFUSSNOTE NIMMT DIE GANZE SPALTE (02.10.2026, Vorgabe Claras: "die Preisfussnote bitte zwar mittig, aber viel breiter - so breit bis zu den Seitenabstaenden links und rechts"). SIE IST KEIN LESETEXT, SONDERN EIN NACHSATZ. Fuer Fliesstext sind 78 Zeichen die Obergrenze, weil darueber das Zurueckfinden an den Zeilenanfang muehsam wird - bei zwei Zeilen Kleingedrucktem am Seitenende gibt es dieses Problem nicht. Dafuer faellt auf, wenn der Kasten schmaler ist als alles darueber: Zentriert und schmal sah er aus wie ein vergessener Absatz. 100% HEISST HIER: BIS AN DIE SEITENABSTAENDE. Die Breite kommt von .wrap, und die traegt die Flucht der ganzen Seite - mehr als "bis zum Rand des Inhalts" ist nicht gemeint und waere auch nicht richtig. DIE SPEZIFITAET MUSS MITHALTEN: Die Regel darueber trifft jedes

unmittelbar im Abschnitt und ist durch die drei :not() schwer zu ueberbieten. Deshalb steht hier derselbe Waehler noch einmal, nur mit p.preis-fussnote am Ende - ein schlichtes ".preis-fussnote{max-width:100%}" waere wirkungslos geblieben, ohne dass irgendetwas gemeldet haette. */ body.bwp-mittig section.land:not(.seitenband):not(.rechner-kopf-block):not(.seitenfaq) > .wrap > p.preis-fussnote{max-width:100%} /* DER ABLAUF-BLOCK AUF DER STARTSEITE STEHT MITTIG (02.10.2026, Vorgabe Claras: "Ablauf auf der Startseite bitte mittig"). GEMEINT IST "Was du selbst machst und was der Fachbetrieb macht" samt dem Verweis "So laeuft der Einbau ab" - der einzige Block der Startseite, der vom Ablauf handelt. Er kommt aus billigerwaermepumpe-fallbeispiele und steht im Vertrauens-Band #proof. WARUM DIE ALLGEMEINE REGEL IHN NICHT ERWISCHT: Sie trifft nur direkte Kinder von .wrap. Hier liegen zwischen .wrap und der Ueberschrift noch zwei Ebenen - der Kasten, den Shopify um jede Section legt, und #fallbeispiele. Den Waehler dafuer aufzuweichen kam nicht in Frage; das ist dieselbe Falle wie beim Zentrieren ueber den ganzen Abschnitt. text-align AM GANZEN BLOCK IST HIER UNGEFAEHRLICH: Darin stehen ausschliesslich Textabsaetze (Ueberschrift, Unterzeile, je Block Titel, Absatz und Verweis) - keine Karte, keine Liste, keine Tabelle. Nachgesehen, nicht angenommen. DIE BREITEN ZIEHEN MIT, aus demselben Grund wie oben: 16 Zeichen Ueberschrift und 46 Unterzeile sind fuer die linke Flucht gemacht und werden zentriert zu einer schmalen Saeule. Derselbe Wert wie bei den uebrigen Abschnitten - die volle Spaltenbreite. */ body.bwp-mittig #fallbeispiele{text-align:center} body.bwp-mittig #fallbeispiele > h2{max-width:100%;margin-left:auto;margin-right:auto} body.bwp-mittig #fallbeispiele > .sec-sub{max-width:min(820px,100%);margin-left:auto;margin-right:auto} body.bwp-mittig #fallbeispiele .seiten-absatz{max-width:min(900px,100%);margin-left:auto;margin-right:auto} .hwrow{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:56px} /* ZWEI GERAETE NEBENEINANDER, DER LIEFERUMFANG DARUNTER - bis hinunter aufs Telefon (28.09.2026, Vorgabe Claras: "in der mobilen Version Aussen- und Inneneinheit nebeneinander darstellen und der Lieferumfang darunter"). Diese Aufteilung gab es schon zwischen 760 und 900px; darunter fiel alles in eine Spalte. Damit stand das Kit auf dem Telefon als Liste aus drei gleichwertigen Kaesten da - dabei sind die ersten beiden EIN Geraetepaar und der dritte die Stueckliste dazu. Nebeneinander zeigt die Anordnung selbst, was zusammengehoert, und spart einen ganzen Bildschirm Weg. Die 900er-Regel gilt auf dem Telefon mit (max-width schliesst kleinere Fenster ein), hier wird deshalb nur noch enger gestellt: Zwei Kaesten auf 360px Breite brauchen weniger Zwischenraum und weniger Polsterung, sonst bleibt fuer das Bild darin kaum etwas uebrig. */ @media(max-width:992px){.hwrow{grid-template-columns:1fr 1fr}.hwrow .lu-card{grid-column:1/-1}} @media(max-width:768px){ .hwrow{gap:16px 14px;margin-top:38px} .hwrow .imgbox{padding:12px;border-radius:var(--radius-s)} .hwrow figcaption{font-size:13.5px;margin-top:10px} .hwrow figcaption small{font-size:9.5px;margin-bottom:2px} } .hwrow figure{text-align:center} .hwrow .imgbox{aspect-ratio:1/1;background:var(--card);border:1px solid #E3D3BB;border-radius:var(--radius);box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;padding:22px;overflow:hidden} .hwrow .imgbox img{width:100%;height:100%;object-fit:contain} .hwrow figcaption{font-size:15px;font-weight:800;margin-top:18px} .hwrow figcaption small{display:block;font-family:var(--mono);font-size:10px;color:var(--muted);font-weight:500;text-transform:uppercase;letter-spacing:.06em;margin-bottom:3px} /* WAS IM KIT ENTHALTEN IST - Text und Gegenstand nebeneinander (29.09.2026, Vorgabe Claras: "bei der ersten Kombi kommen auch die Bilder von Innen- und Ausseneinheit dazu (der Lieferumfang) daneben"). Links steht, was drin ist, rechts liegt es: die zwei Geraete als Bild und die Liste des Lieferumfangs. Das erste Paar ist das einzige mit einem Gegenstand zum Danebenstellen - die uebrigen drei stehen darunter auf Lesebreite. ZWEI SPALTEN ERST AB 900px: Darunter haette die Bilderreihe drei Kacheln auf halber Spaltenbreite - jede waere schmaler als ihr eigener Rahmen. Gestapelt steht der Text oben, die Bilder darunter, wie vorher. align-items:start, damit der Text oben beginnt und nicht gegen die Mitte der Bilder ausgerichtet wird; .hwrow bringt seinen eigenen Abstand nach oben mit, der hier weg muss. */ .ki-erste{margin-top:40px} .ki-erste .hwrow{margin-top:26px} .ki-text h3{font-size:clamp(17px,1.9vw,20px);font-weight:800;margin-top:0} .ki-text p{margin-top:8px;font-size:16px;line-height:1.6;color:var(--graphit);max-width:68ch} /* DIE ZUSATZABSAETZE UNTER DEN DREI SPALTEN STEHEN MITTIG UND LAUFEN BREITER (02.10.2026, Vorgabe Claras: "mach bei Kits das 'So laeuft es ab' mittig und strecke es mehr"). "So laeuft es ab" ist der erste dieser Absaetze - alles ab dem vierten Block der Section landet hier, unter den drei Spalten. Sie standen linksbuendig und auf 68 Zeichen gedeckelt; unter drei mittig wirkenden Spalten las sich das wie ein angehaengter Nachsatz. "STRECKEN" HEISST HIER BREITER, NICHT HOEHER: 920px statt 68 Zeichen - rund ein Drittel mehr Zeile. Der Block selbst rueckt mit automatischen Aussenabstaenden in die Mitte, sonst waeren nur seine Zeilen zentriert und der Kasten bliebe links. */ .ki-weitere{margin-top:40px;display:flex;flex-direction:column;gap:26px; text-align:center;max-width:min(920px,100%);margin-left:auto;margin-right:auto} .ki-weitere .ki-text p{max-width:100%} /* DREI SPALTEN WIE DIE PUNKTEREIHE (29.09.2026, Vorgabe Claras: "die drei Steps nebeneinander, aehnlich wie bei 'Was der Rechner zeigt'"). Dieselben Masse wie .rz-grid dort - drei gleiche Spalten, 30px Abstand -, damit die beiden Reihen der Seite nicht verschieden aussehen. DIE GERAETEBILDER STEHEN IN DER ERSTEN SPALTE. Auf ein Drittel Breite sind zwei Kacheln nebeneinander klein genug, um den Text nicht zu ueberlagern; die Polsterung faellt entsprechend kleiner aus. Der Abstand nach unten trennt sie von der Ueberschrift, die ihretwegen nicht mehr am Spaltenanfang steht. UNTER 901px UNTEREINANDER, wie die Punktereihe unter 760px: Drei Spalten auf einem Telefon sind drei Streifen. Die Bilderreihe steht dann wieder zweispaltig in voller Breite - dort ist Platz. */ .ki-drei{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:34px} /* Das Icon sitzt ueber der Ueberschrift, wie in der Punktereihe. rz-icon bringt Groesse und Farbe mit; hier steht nur der Abstand nach unten - dort kommt er vom margin-top der Ueberschrift, die hier aber auf 0 steht, weil sie ohne Icon am Spaltenanfang beginnt. */ .ki-icon{margin-bottom:12px} .ki-spalte h3{font-size:clamp(16.5px,1.8vw,19px);font-weight:800;margin-top:0;line-height:1.25} .ki-spalte p{margin-top:6px;font-size:15px;line-height:1.5;color:var(--graphit)} /* Die Regeln fuer die Geraetebilder in der ersten Spalte sind am 29.09.2026 entfallen - die Bilder stehen dort nicht mehr (Vorgabe Claras). Die Bildreihe .hwrow selbst bleibt im Stylesheet: Sie wird auf anderen Seiten weiter benutzt. */ .ki-text h3{font-size:clamp(17px,1.9vw,20px);font-weight:800;margin-top:0} .ki-text p{margin-top:8px;font-size:16px;line-height:1.6;color:var(--graphit);max-width:68ch} /* DIE ZUSATZABSAETZE UNTER DEN DREI SPALTEN STEHEN MITTIG UND LAUFEN BREITER (02.10.2026, Vorgabe Claras: "mach bei Kits das 'So laeuft es ab' mittig und strecke es mehr"). "So laeuft es ab" ist der erste dieser Absaetze - alles ab dem vierten Block der Section landet hier, unter den drei Spalten. Sie standen linksbuendig und auf 68 Zeichen gedeckelt; unter drei mittig wirkenden Spalten las sich das wie ein angehaengter Nachsatz. "STRECKEN" HEISST HIER BREITER, NICHT HOEHER: 920px statt 68 Zeichen - rund ein Drittel mehr Zeile. Der Block selbst rueckt mit automatischen Aussenabstaenden in die Mitte, sonst waeren nur seine Zeilen zentriert und der Kasten bliebe links. */ .ki-weitere{margin-top:40px;display:flex;flex-direction:column;gap:26px; text-align:center;max-width:min(920px,100%);margin-left:auto;margin-right:auto} .ki-weitere .ki-text p{max-width:100%} @media(max-width:992px){ .ki-drei{grid-template-columns:1fr;gap:26px;margin-top:28px} } @media(max-width:768px){ .ki-weitere{margin-top:30px;gap:22px} } /* DAS DREIERFELD STEHT ALS GANZES MITTIG (02.10.2026, Vorgabe Claras: "die drei Gruende, also die Felder mit jeweils einem Grund, bitte auch mittig machen - also nicht der Text in dem Grund selber, aber das gemeinsame Konstrukt mit den drei Gruenden"). DAS IST KEIN text-align, und genau darum geht es: Der Text IN einem Grund bleibt linksbuendig - Nummer, Titel und Absatz stehen weiter an einer Kante untereinander. Zentriert wird der Kasten, in dem die drei zusammen stehen. SICHTBAR WIRD DAS ERST DURCH DIE BEGRENZUNG. Das Feld lief bisher ueber die ganze Spalte; "mittig" waere daran nicht zu erkennen gewesen, weil es ja schon beide Raender beruehrte. Mit hoechstens 1040px und margin-inline:auto rueckt es zusammen und bekommt links und rechts gleich viel Luft - so, wie die Ueberschrift darueber seit gestern auch steht. 1040px SIND AM INHALT GEMESSEN, nicht geraten: Drei Spalten zu je rund 328px plus zwei Luecken von 28px. Bei 15px Schrift passen damit rund 44 Zeichen in eine Zeile - breiter als die 36, auf die der Absatz vorher gedeckelt war, und darum faellt die alte Deckelung weg: Sie haette den Text innerhalb der Spalte wieder nach links gezogen und das Dreierfeld schief aussehen lassen. AUF DEM TELEFON AENDERT SICH NICHTS: Dort steht ohnehin eine Spalte, und 100% deckelt frueher als 1040px. */ .reasons-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:48px} /* DIE DREI GRUENDE STEHEN INNEN MITTIG (02.10.2026, Vorgabe Claras: "die Gruende bei '3 Gruende' bitte mittig machen"). DAS IST DIE UMKEHRUNG VON HEUTE MORGEN. Damals hiess es ausdruecklich "nicht der Text in dem Grund selber, aber das gemeinsame Konstrukt" - deshalb stand hier eine Deckelung auf 1040px, die das Dreierfeld als Ganzes zusammenrueckte, waehrend innen alles an einer Kante blieb. Beides faellt jetzt zusammen weg: Der Inhalt jedes Grundes ist mittig, und damit braucht es die Deckelung nicht mehr, um die Mitte sichtbar zu machen. Die drei Spalten nehmen wieder die ganze Breite - das ist zugleich Claras Vorgabe "lass den Text breiter von links nach rechts gehen und nicht so schmal". DIE NUMMER MUSS MITWANDERN: Sie ist ein 34px-Kaestchen, also ein Block mit fester Breite - text-align erreicht sie nicht. Ohne die automatischen Aussenabstaende stuende sie als einziges Element links, waehrend Titel und Absatz darunter mittig stehen. */ body.bwp-mittig .reason{text-align:center} body.bwp-mittig .reason-num{margin-left:auto;margin-right:auto} @media(max-width:768px){.reasons-grid{grid-template-columns:1fr;gap:32px}} /* DAS KAESTCHEN TRAEGT SEIT DEM 02.10.2026 EIN ICON (Vorgabe Claras: "bei den Gruenden bitte Icons machen - und nicht so wie bei den anderen, ohne Hintergrund, sondern mit diesem farbigen Hintergrund, und anstatt die Zahl ein Icon, in Weiss"). ES BLEIBT DASSELBE KAESTCHEN, nur groesser: 34px reichten fuer zwei Ziffern, ein Strich-Icon braucht darin mehr Luft - sonst steht es randvoll und wirkt wie ein Druckfehler. 46px mit etwas weicherer Ecke. WEISS IST CLARAS VORGABE, und sie ist hier vertretbar: Auf dem Bernstein (#B98B3E) kommt Weiss auf rund 2,9:1. Fuer FLIESSTEXT waere das zu wenig (4,5:1), fuer eine Strichgrafik dieser Groesse gilt die Grenze von 3:1 fuer grafische Elemente - knapp darunter, aber das Icon traegt keine Information allein: Daneben steht die Ueberschrift, die dasselbe sagt, und das Icon ist aria-hidden. NUR MIT ICON, NICHT MIT ZAHL: hat-icon unterscheidet die beiden Faelle. Steht im Kaestchen weiterhin eine Nummer, bleibt sie dunkel und das Kaestchen klein - Mono-Ziffern in Weiss auf Bernstein waeren bei 13px wirklich zu schwach. */ .reason-num{font-family:var(--mono);font-weight:700;font-size:13px;color:var(--ink);background:var(--bernstein);width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center} .reason-num.hat-icon{width:46px;height:46px;border-radius:13px;color:#fff} .reason-ic{width:25px;height:25px;stroke-width:1.9} .reason h3{font-size:clamp(17px,1.4vw,22px);font-weight:800;margin-top:16px} /* Ohne eigene Deckelung - die Spalte ist seit dem 02.10.2026 selbst begrenzt (siehe .reasons-grid). Zwei Begrenzungen uebereinander haetten den Absatz innerhalb seiner Spalte noch einmal verschmaelert und das Dreierfeld schief wirken lassen. */ .reason p{font-size:clamp(14px,1.1vw,17.5px);color:var(--graphit);margin-top:8px} .lu-card{background:var(--card);border:1px solid #E3D3BB;border-radius:var(--radius);box-shadow:var(--shadow);padding:24px 26px;display:flex;flex-direction:column} .lu-card-head{display:flex;align-items:baseline;justify-content:space-between;font-weight:800;font-size:15.5px;padding-bottom:14px;border-bottom:1px solid var(--line)} .lu-card-head span{font-family:var(--mono);font-weight:500;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em} .lu-table{width:100%;border-collapse:collapse;margin-top:4px} .lu-table td{font-size:13.5px;padding:8px 0;border-bottom:1px dashed var(--line);vertical-align:top;line-height:1.35} .lu-table td.m{font-family:var(--mono);color:var(--gruen);font-weight:700;white-space:nowrap;padding-right:10px;width:1%} .lu-table tr:last-child td{border-bottom:none} .lu-card .fineprint{margin-top:14px} @media(max-width:768px){.lu-card{margin-top:0}} /* ---------- Kundenbilder: einfache Foto-Slots, Nutzer legt eigene Bilder rein (image-slot.js) ---------- */ .kb-group{margin-top:52px} .kb-group:first-of-type{margin-top:56px} .kb-label{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:14px} /* KUNDENBILDER ALS KARUSSELL (25.09.2026, Vorbild klekks.com). Vorher ein zweispaltiges Raster mit fester Kachelgroesse - Hochformate wurden darin beschnitten, und bei Kundenfotos ist das der haeufige Fall. VOLLE BREITE, TEXT IN DER SPALTE: margin-inline bricht aus .wrap aus, padding-inline holt die Spaltenbreite als Innenabstand zurueck. Das erste Bild beginnt damit genau dort, wo Ueberschrift und Text beginnen, die Reihe laeuft trotzdem bis zum Bildschirmrand. Die 22px sind die Polsterung von .wrap; wer sie dort aendert, aendert sie hier mit. scroll-padding-inline-start haelt beim Schnappen dieselbe Kante ein - ohne das rastet das erste Bild am Bildschirmrand statt an der Textkante. proximity statt mandatory: Bei unterschiedlich breiten Bildern zwingt mandatory den Scroller in Positionen, die der Finger gar nicht wollte. */ .kb-bahn{position:relative} .kb-row{display:flex;gap:14px;align-items:flex-start; overflow-x:auto;scroll-snap-type:x proximity;scroll-behavior:smooth; margin-inline:calc(50% - 50vw); padding-inline:max(22px, calc(50vw - var(--seite-max) / 2 + 22px)); scroll-padding-inline-start:max(22px, calc(50vw - var(--seite-max) / 2 + 22px)); scrollbar-width:none;-ms-overflow-style:none} .kb-row::-webkit-scrollbar{display:none} /* EIN FORMAT FUER ALLE (Vorgabe 25.09.2026, Vorbild klekks.com). Der erste Versuch liess die Bilder ihr eigenes Seitenverhaeltnis behalten und gab ihnen nur eine gemeinsame Hoehe - die Reihe wurde dadurch unruhig, jedes Bild endete woanders. Beim Vorbild sind alle Kacheln gleich gross, und erst das laesst die Reihe als Reihe lesen. Der Preis dafuer ist der Beschnitt: object-fit:cover schneidet an, was nicht ins Quadrat passt. Das ist hier die richtige Seite des Tauschs - Kundenfotos sind ohnehin nicht komponiert, und ein einheitliches Raster wirkt mehr als ein unbeschnittenes Motiv. */ .kb-slide{flex:0 0 auto;margin:0;scroll-snap-align:start; width:clamp(240px, 30vw, 380px);max-width:82vw} /* height:auto IST HIER PFLICHT, nicht Kosmetik (25.09.2026). Die Bilder tragen width und height als Attribute im Markup - noetig, damit die Seite beim Laden nicht springt. Der Browser macht daraus eine CSS-Angabe niedriger Spezifitaet. width ueberschreibt die Regel unten, height NICHT - und solange Breite UND Hoehe feststehen, ignoriert der Browser aspect-ratio. Genau deshalb hatte jedes Bild weiter sein eigenes Format, obwohl hier 1/1 steht: eine Regel, die vollstaendig aussah und stumm nichts tat. */ .kb-slide img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover; border-radius:var(--radius);border:1px solid #E3D3BB;box-shadow:var(--shadow)} .kb-cap{margin-top:10px;font-size:14px;line-height:1.4;color:var(--graphit); text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:4px} /* EIN PFEIL LINKS, EINER RECHTS (25.09.2026). Vorher lagen beide uebereinander am rechten Rand und mussten mit position:sticky in der Rolle festgehalten werden; welche Richtung ein Klick bringt, musste man am Zeichen ablesen. Getrennt an die Raender gestellt, sagt schon die Lage, wohin es geht. SIE LIEGEN UEBER DER REIHE, nicht daneben: Die Reihe laeuft ueber die volle Breite, daneben ist kein Platz. Die Raender sind die der Textspalte - dort, wo auch Ueberschrift und Text beginnen. DIE HOEHE FOLGT DEM BILD, nicht dem ganzen Block: Der traegt unter dem Bild noch die Beschriftung, und ein daran zentrierter Pfeil saesse sichtbar zu tief. Der Abzug entspricht der Zeile darunter (10px Abstand + rund 20px Zeilenhoehe). */ .kb-nav{position:absolute;inset:0;pointer-events:none;z-index:2} .kb-pfeil{position:absolute;top:50%;margin-top:-15px;transform:translateY(-50%); pointer-events:auto;width:52px;height:52px;display:flex;align-items:center;justify-content:center; border:none;cursor:pointer;background:rgba(51,49,45,.86);color:#fff;font-size:20px;line-height:1; border-radius:var(--radius-s)} .kb-pfeil--links{left:0} .kb-pfeil--rechts{right:0} .kb-pfeil:hover{background:var(--ink)} /* Am Anfang und am Ende der Reihe tritt der jeweilige Pfeil zurueck, statt zu verschwinden: Ein Knopf, der wegspringt, laesst die Reihe zucken und den Daumen danebengreifen. */ .kb-pfeil[disabled]{opacity:0;pointer-events:none} /* Die Linie unter der Reihe: helle Spur ueber die ganze Breite, dunkler Abschnitt darauf, der beim Wischen mitwandert - wie beim Vorbild. Sie steht in der Textspalte und nicht ueber die volle Breite: Sie gehoert zum Abschnitt, nicht zum Bildband. */ .kb-fortschritt{position:relative;height:3px;margin-top:24px;background:var(--line);border-radius:3px} .kb-balken{position:absolute;top:0;height:3px;background:var(--ink);border-radius:3px; transition:left .12s linear,width .12s linear} @media(max-width:640px){ .kb-slide{width:clamp(210px,68vw,280px)} .kb-pfeil{width:44px;height:44px} } .steps-line span i{font-family:var(--mono);font-style:normal;color:var(--bernstein);margin-right:6px;font-weight:700} .warnline{font-size:14px;color:var(--warn);background:var(--warn-tint);border:1px solid #E3956B;border-radius:var(--radius-s);padding:12px 16px;margin-top:12px;max-width:620px} .warnline b{display:block;margin-bottom:6px} .warnline ul{list-style:none;display:flex;flex-direction:column;gap:6px} .warnline li{position:relative;padding-left:14px} .warnline li::before{content:"–";position:absolute;left:0} .foerder-info-toggle{display:inline-flex;align-items:center;gap:8px;margin-top:18px;background:none;border:none;padding:0;font-family:var(--font);font-size:13.5px;font-weight:700;color:var(--muted);cursor:pointer} .foerder-info-toggle:hover{color:var(--gruen)} .foerder-info-toggle.active .sd-info-btn{border-color:var(--gruen);color:var(--gruen);background:var(--gruen-tint)} /* "FOERDERUNG ERKLAERT" STEHT NEBENEINANDER (02.10.2026, Vorgabe Claras: "links ist der Text und rechts ist die Grafik"). ZWEI GLEICHE SPALTEN: Die Karte traegt eine Zahlentafel und braucht Breite, der Text daneben soll nicht zu einer schmalen Saeule werden. align-items:start, damit die Karte oben buendig mit der Ueberschrift steht und nicht in der Mitte der Textspalte schwebt. DIE KARTE VERLIERT IHREN OBEREN ABSTAND: Die 44px stammen aus der Zeit, als sie UNTER dem Text stand und sich von ihm absetzen musste. Nebeneinander waere derselbe Wert ein Versatz, der aussieht, als sei die Karte verrutscht. UNTER 992px WIEDER UNTEREINANDER - dann steht die Karte hinter dem Text, also an der Stelle, an der sie vorher ohnehin stand. */ /* ZWEI ABSCHNITTE DER FOERDERSEITE STEHEN MITTIG (02.10.2026, Vorgabe Claras: "die 'Verfuegbaren Services bei uns' mittig machen und auch 'Was du fuer die Foerderung nachweisen musst' mittig machen"). EIGENE REGEL, WEIL DIE FOERDERSEITE bwp-mittig NICHT TRAEGT - dort steht sonst alles linksbuendig, und gemeint sind diese beiden. Die Ueberschriften brauchen zusaetzlich automatische Aussenabstaende: Sie sind in der Breite begrenzt (16 Zeichen), und text-align zentriert nur die Zeilen darin, nicht den Kasten. DIE UNTERZEILE BEKOMMT DIESELBEN 820px WIE UEBERALL, wo zentriert wird - sonst stuende sie als schmale Saeule unter einer weit laufenden Ueberschrift. WAS DARUNTER STEHT, BLEIBT WIE ES IST: Die Service-Liste und die Nachweis-Tabelle sind Listen mit Zeilen, kein Fliesstext; zentriert wuerden ihre Spalten auseinanderfallen. */ section.land#services > .wrap > h2, section.land#services > .wrap > .sec-sub, section.land#foerdernachweis > .wrap > h2, section.land#foerdernachweis > .wrap > .sec-sub{text-align:center;margin-left:auto;margin-right:auto} section.land#services > .wrap > h2, section.land#foerdernachweis > .wrap > h2{max-width:100%} section.land#services > .wrap > .sec-sub, section.land#foerdernachweis > .wrap > .sec-sub{max-width:min(820px,100%)} .foerder-reihe{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(24px,4vw,56px);align-items:start} .foerder-reihe .methodik-row{margin-top:0} .foerder-reihe .methodik-card{max-width:100%} @media(max-width:992px){ .foerder-reihe{grid-template-columns:1fr;gap:34px} } .methodik-row{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start;margin-top:44px} .methodik-row .methodik-card{margin-top:0;flex:1 1 380px} .methodik-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:26px 28px;max-width:560px;margin-top:44px} .methodik-card .rrow{margin:0;padding:8px 0;border-radius:0} /* Förder-Karte: Zeilen sind Klickflächen, die Erklärung (.src) klappt auf */ .methodik-card .rrow.xr{display:flex;width:100%;background:none;border:none;border-bottom:1px dashed var(--line);font-family:var(--font);font-size:14px;color:var(--ink);text-align:left;cursor:pointer;align-items:center} .methodik-card .rrow.xr:last-child{border-bottom:none} .methodik-card .rrow.xr.total{border-top:2px solid var(--ink)} .methodik-card .rrow.xr:hover .rl b{color:var(--gruen)} .methodik-card .rrow.xr .rl b{transition:color .12s} .methodik-card .rrow.xr .src{display:none;margin-top:3px} .methodik-card .rrow.xr.open .src{display:block} /* Material-Extras: Meter-/Stück-Stepper im Buybox-Dropdown */ .qtystep{display:inline-flex;align-items:center;border:1.5px solid var(--line);border-radius:var(--radius-s);background:#fff;overflow:hidden} .qtystep button{width:34px;height:34px;background:none;border:none;font-family:var(--mono);font-size:16px;font-weight:700;color:var(--gruen);cursor:pointer;padding:0} .qtystep button:hover{background:var(--gruen-tint)} .qtystep .qv{min-width:46px;text-align:center;font-family:var(--mono);font-weight:700;font-size:14px} .extra-price{min-width:72px;text-align:right} #extraDetails .svc-group-label{margin-top:12px} #extraDetails .svc-group-label:first-child{margin-top:8px} /* Material-Festpreisliste auf dem Services-Panel */ .mat-list{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px 22px} .mat-list .svc-group-label{margin:14px 0 4px} .mat-list .svc-group-label:first-child{margin-top:0} .mat-row{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px dashed var(--line);font-size:14.5px} .mat-row:last-of-type{border-bottom:none} /* Preisspalte bleibt einzeilig, der NAME bricht um (User-Meldung 30.07.2026). Vorher durften beide Spalten schrumpfen. Bei den EQ3-Positionen traegt der Preis eine Einheit ("49 € je Heizkoerper") - der brach auf zwei Zeilen um und stand damit als einziger nicht mehr in der Flucht der uebrigen Preise. */ .mat-row>:first-child{flex:1 1 auto;min-width:0} .mat-row>:last-child{flex:0 0 auto;white-space:nowrap;text-align:right;align-self:flex-start} /* Die Einheit ("je Heizkoerper") steht UNTER dem Betrag, nicht daneben. Nebeneinander war die Preisspalte rund 150px breit und quetschte den Produktnamen auf bis zu drei Zeilen - gemessen 30.07.2026 an den vier EQ3-Positionen. */ .mat-row .price small{display:block;font-family:var(--font);font-size:11.5px;font-weight:500; line-height:1.3;color:var(--muted);white-space:nowrap;margin-top:1px} .mat-list .sd-src{display:block;margin-top:12px} /* Förder-Effektivpreis dezent auf der Kit-Karte */ .cc-foerder{font-family:var(--mono);font-size:11.5px;font-weight:700;color:var(--gruen);margin-top:2px} /* Schlanke Bestätigung statt Banner (Buybox clean) */ .okline{font-size:12.5px;color:var(--gruen);font-weight:700} /* Zweistufen-Reservierung: Paket gesamt / heute / Restzahlung, volle Preistransparenz */ .resnote .resdetail{margin:0;padding:0} .resnote .resdetail summary{cursor:pointer;font-size:14px;font-weight:700;list-style:none} .resnote .resdetail summary::-webkit-details-marker{display:none} .resnote .resdetail summary::after{content:" ▾";color:var(--gruen)} .resnote .resdetail[open] summary::after{content:" ▴"} .resnote .resitems{list-style:none;margin:6px 0 0;padding:0} .resnote .resitems li{position:relative;padding:2px 0 2px 16px;font-size:14px;line-height:1.45} .resnote .resitems li::before{content:"•";position:absolute;left:2px;color:var(--gruen);font-weight:700} .resnote .resitems li b{font-weight:700} .resnote .resrow{display:flex;justify-content:space-between;gap:12px;padding:3px 0} .resnote .resrow b{font-family:var(--mono);white-space:nowrap} /* "Restzahlung bei Erhalt" ist der Betrag, den der Kunde wirklich noch schuldet - unabhaengig davon, ob die Foerderung am Ende bewilligt wird. Seit der Endpreis nach Foerderung die grosse Zahl der Seite ist (11.08.2026), darf diese Zeile nicht in der Aufzaehlung untergehen. */ .resnote .resrow.total{border-top:1px dashed var(--line);margin-top:4px;padding-top:7px;font-weight:800;font-size:15px} .resnote .resrow.total b{font-size:17px;color:var(--ink)} .resnote .src{display:block;margin-top:9px} /* ---- "Was passiert, wenn du jetzt reservierst" (11.08.2026, Carsten) ---- Der Ablauf stand vorher als Fliesstext am Ende der Box - also unter den Zahlen, dort wo niemand mehr liest, der ohnehin zoegert. Jetzt drei nummerierte Schritte VOR den Zahlen. Die Nummern kommen aus einem CSS-Counter, damit die Liste im Markup semantisch

    bleibt. */ .resteps{list-style:none;counter-reset:rs;margin:9px 0 0;padding:0} .resteps li{position:relative;counter-increment:rs;padding:0 0 0 31px;margin-bottom:11px;font-size:13.5px;line-height:1.5;color:var(--graphit)} .resteps li:last-child{margin-bottom:0} .resteps li::before{content:counter(rs);position:absolute;left:0;top:1px;width:21px;height:21px; border-radius:50%;background:var(--gruen);color:#fff;font-family:var(--mono);font-size:11px; font-weight:700;display:flex;align-items:center;justify-content:center} /* .resnext b setzt Uppercase-Mono-Gruen fuer die Ueberschrift - das darf NICHT auf die Fettungen innerhalb der Schritte durchschlagen, sonst schreit jeder Schrittanfang. */ .resteps li b{display:inline;font-family:var(--font);font-size:inherit;font-weight:700; letter-spacing:0;text-transform:none;color:var(--ink);margin:0} /* Geld-zurueck-Zusage: eigene Zeile statt Nebensatz in der Kleinschrift (Carsten: "risikofrei / Geld zurueck Garantie" gehoert sichtbar an den Kaufpunkt). */ /* Grund NICHT #fff: .buybox und .modalcard stehen selbst auf var(--card) = #FFFFFF - die Box waere weiss auf weiss gewesen und haette nur am duennen Rahmen gehangen. Sand-Tint hebt die Zusage ab, ohne einen weiteren Akzent neben der Bernstein-Preiskarte aufzumachen. */ .resguarantee{display:flex;align-items:center;gap:9px;margin:13px 0;padding:10px 13px; background:var(--gruen-tint);border:1px solid var(--sand-deep);border-radius:var(--radius-s); font-size:13.5px;font-weight:700;color:var(--ink);line-height:1.4} .resguarantee::before{content:"↩";font-family:var(--mono);font-size:15px;color:var(--gruen);flex:0 0 auto} /* Die Geld-zurueck-Zusage steht bewusst an GENAU ZWEI Stellen: ausfuehrlich in .resguarantee (bevor der Kunde die Zahlen liest) und kompakt als im Kaufbutton (im Moment des Klicks). Ein dritter Absatz darunter stand hier bis zur visuellen Abnahme am 11.08.2026 - dreimal dieselbe Aussage in zehn Zeilen las sich wie eine Entschuldigung und lief dem Auftrag "Seite entschlacken" zuwider. */ /* Aufklapp-Pfeil (Förder-Karte + Nachweis-Tabelle) */ .xr-chev{display:inline-block;font-family:var(--mono);font-style:normal;font-size:12px;color:var(--gruen);margin-left:2px;transition:transform .2s ease} [aria-expanded="true"] .xr-chev{transform:rotate(180deg)} .truststrip{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:52px} .truststrip>div{display:flex;flex-direction:column} @media(max-width:768px){.truststrip{grid-template-columns:1fr 1fr;gap:26px 14px}} .truststrip .tn{font-family:var(--mono);font-weight:700;font-size:clamp(26px,3.6vw,38px);color:var(--gruen);letter-spacing:-.02em} .truststrip .tl{font-size:13px;color:var(--muted);margin-top:2px;min-height:41px} .truststrip .tsrc{display:block;font-family:var(--mono);font-size:10px;color:var(--muted);opacity:.75;margin-top:auto;padding-top:5px;text-transform:uppercase;letter-spacing:.03em} /* Die Bilderreihe stand einmal direkt unter den Zitatkarten aus .fallrow und gehoerte optisch zu ihnen: erstes Bild unter erstem Zitat und so fort. Dafuer mussten beide Reihen DASSELBE Raster benutzen - bis 12.08.2026 taten sie das nicht (.fallrow drei gleiche Spalten und 16px Abstand, .fotorow "1.3fr 1fr 1fr" und 14px), die Spaltenkanten lagen versetzt und das erste Bild war breiter als die Karte darueber. DIESE KOPPLUNG BESTEHT NICHT MEHR. Die Fotoreihe ist am 02.09.2026 gegen die Kundenbilder getauscht und nur noch auskommentiert im Snippet vorhanden; .fallrow steht seit dem 21.09.2026 auf zwei Spalten. Die frueher hier stehende Anweisung "wer eine aendert, muss beide aendern" gilt also nicht mehr - wer die Fotoreihe wieder einbindet, muss ihr Raster dann allerdings neu an .fallrow angleichen. */ .fotorow{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px} @media(max-width:768px){.fotorow{grid-template-columns:1fr}} .foto{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--card);border:1px solid var(--line);aspect-ratio:4/3;display:flex;align-items:flex-end} .foto svg{position:absolute;inset:0;width:100%;height:100%} .foto figcaption{position:relative;width:100%;background:linear-gradient(transparent,rgba(43,33,26,.82));color:#EFE6D8;font-size:12.5px;padding:26px 14px 12px} .roadmap.imgline{max-width:820px} .roadmap.imgline .rm-item{width:46%} .roadmap.imgline .rm-item:nth-of-type(even){flex-direction:row-reverse} .roadmap.imgline .rm-item,.roadmap.imgline .rm-item:nth-of-type(even){text-align:left} .roadmap.imgline .rm-text p{margin-left:0} .roadmap-details{margin-top:44px;max-width:760px} .roadmap-details summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:14px;background:var(--card);border:1.5px solid var(--line);border-radius:var(--radius);padding:18px 22px;font-weight:800;font-size:16.5px;transition:border-color .12s} .roadmap-details summary::-webkit-details-marker{display:none} .roadmap-details summary:hover{border-color:var(--gruen)} .roadmap-details[open] summary{border-color:var(--gruen)} .roadmap-details .rd-toggle{flex:0 0 auto;width:26px;height:26px;border:1.5px solid var(--line);border-radius:var(--radius-xs);display:flex;align-items:center;justify-content:center;font-family:var(--mono);color:var(--gruen);font-size:15px;transition:border-color .12s,background .12s} .roadmap-details .rd-toggle::after{content:"+"} .roadmap-details[open] .rd-toggle{border-color:var(--gruen);background:var(--gruen-tint)} .roadmap-details[open] .rd-toggle::after{content:"–"} .roadmap-details .roadmap{margin-top:40px} .roadmap.imgline .rm-item{display:flex;gap:18px;align-items:flex-start} .roadmap.imgline .rm-dot{border-color:#E3D3BB;color:var(--bernstein-dark)} .roadmap.imgline .rm-item.in .rm-dot{border-color:var(--bernstein);background:var(--bernstein);color:var(--ink)} .roadmap.imgline .rm-item.wir.in .rm-dot{border-color:var(--gruen);background:var(--gruen);color:#fff} .roadmap.imgline .rm-media{flex:0 0 auto;width:96px;height:96px;border-radius:var(--radius-s);overflow:hidden;background:repeating-linear-gradient(135deg,#EFE6D8 0 9px,#E3D3BB 9px 18px);border:1px solid #DDCCB2;display:flex;align-items:center;justify-content:center} .roadmap.imgline .rm-media span{font-family:var(--mono);font-size:9px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;text-align:center;line-height:1.45;padding:4px} .roadmap.imgline .rm-text{flex:1;min-width:0;padding-top:2px} .roadmap.imgline .rm-item.wir .rm-media{background:var(--gruen-tint);border-color:#E3D3BB} @media(max-width:576px){.roadmap.imgline .rm-item{gap:12px}.roadmap.imgline .rm-media{width:68px;height:68px}.roadmap.imgline .rm-media span{font-size:7.5px}} section.land.dark{background:var(--ink);color:#EFE6D8;text-align:center} /* DIE DREI AUFRUF-BAENDER STEHEN AUCH SENKRECHT MITTIG (02.10.2026, Vorgabe Claras: "auf Startseite: Rechner-CTA den Text mittig (rechts und links, oben und unten) in den Abschnitt. Das gleiche auch bei Konfiguration und bei Rechner-Abschluss"). RECHTS UND LINKS WAR SCHON DA: section.land.dark setzt text-align:center, und Ueberschrift wie Absatz haben automatische Aussenabstaende. Was fehlte, war OBEN UND UNTEN - der Grundabstand von section.land ist mit 30px oben und 82px unten absichtlich ungleich (Ueberschrift dicht an der Kante, Luft zum naechsten Abschnitt). Auf einem farbigen Band, das man als Flaeche wahrnimmt, liest sich dieselbe Ungleichheit als Fehler: Der Text klebt oben. DESHALB HIER GLEICH VIEL, und zwar mitwachsend - ein fester Wert waere auf dem Telefon zu viel und auf einem grossen Schirm zu wenig. Bei rund 1360px Fensterbreite sind es 63px, der Mittelwert der bisherigen 30 und 82. NUR DIESE DREI, nicht alle dunklen Baender: section.land.dark traegt auch den Kopf der Rechnerseite (.rechner-kopf-block), und der ist linksbuendig und hat seine eigenen Abstaende. */ section.land.dark.endcta, section.land.dark.rechner-cta, section.land.dark#bauteile-cta{padding-top:clamp(42px,4.6vw,78px);padding-bottom:clamp(42px,4.6vw,78px)} section.land.dark h1,section.land.dark h2{color:#EFE6D8;margin:0 auto;max-width:22ch} /* Gleiche Regel wie oben fuer section.land h2 - sie MUSS hier unten stehen, nicht dort: die Zeile direkt darueber ist gleich spezifisch und kaeme sonst zuletzt, womit die 22ch gewonnen haetten. Beim ersten Anlauf ist genau das passiert, die Schluss- ueberschrift blieb zweizeilig. */ @media(min-width:1025px){ section.land.dark h1,section.land.dark h1,section.land.dark h2{max-width:min(40ch,100%)} } /* SCHMALER ALS DIE UEBERSCHRIFT (29.09.2026, Vorgabe Claras zum Rechner-Aufruf der Startseite: "den Untertext nicht so breit machen, eher mehr Zeilen und dafuer schmaler als die Ueberschrift"). Der Absatz hatte als einziges Element dieses Bandes gar keine Breitenbegrenzung: Die Ueberschrift ist auf 22 bis 40 Zeichen gedeckelt, der Knopf auf 340px - der Text lief ueber die volle Spalte und stand damit als breitestes Element unter dem schmalsten Kopf. Ein Satz ueber 170 Zeichen ergab eine einzige, sehr lange Zeile. ZWISCHEN UEBERSCHRIFT UND KNOPF (nachgeschaerft am 29.09.2026, Vorgabe Claras: "den Text im Rechner-CTA doch noch bisschen breiter machen, soll genau zwischen der Breite der Ueberschrift und des Buttons sein"). Erst standen hier 46ch - die Lesebreite, die .sec-sub ueberall sonst hat. Das war schmaler als der Knopf darunter wirkt und liess den Absatz eingeschnuert aussehen. Jetzt 560px: Der Knopf ist auf 340px gedeckelt, die Ueberschrift laeuft je nach Fenster auf etwa 800px aus - 560px liegt dazwischen, ungefaehr in der Mitte. IN PIXELN UND NICHT IN ZEICHEN, weil der Bezug hier ein anderer ist: 46ch beschrieb die Lesbarkeit des Textes selbst, 560px sein Verhaeltnis zu zwei Nachbarn mit festen Breiten. Ein ch haengt an der Schriftgroesse des Absatzes, die beiden Nachbarn nicht. min(...,100%) haelt ihn auf schmalen Schirmen in der Spalte. Mittig, weil das ganze Band zentriert ist. */ section.land.dark p{color:#D8C9B3;font-size:16px;margin-top:10px} /* NUR DER AUFRUF DER STARTSEITE (eingegrenzt am 29.09.2026, Vorgabe Claras: "aber nicht auf der Rechner-Seite, sondern nur auf der Startseite - auf der Rechner-Seite wieder so wie frueher"). Die Regel stand zuerst an section.land.dark p und traf damit jedes dunkle Band. Auf der Rechnerseite gibt es auch eines; dessen Absatz hat eine eigene Breite (54ch), aber die mittigen Raender kamen von hier und haben ihn verschoben. Seit das Band der Startseite eine eigene Klasse traegt, bleibt die Rechnerseite unberuehrt. */ section.land.dark.endcta p{max-width:min(560px,100%);margin-left:auto;margin-right:auto} /* BILD HINTER EINEM DUNKLEN BAND (30.09.2026, Vorgabe Claras fuer den Konfigurator-Aufruf auf der Startseite: das Kopfbild der Kits-Seite als Hintergrund, "nicht ganz sichtbar, also verdunkelt"). Der schwarze Grund aus section.land.dark bleibt liegen, das Bild kommt als eigene Ebene darueber und wird ueber seine Deckkraft heruntergezogen - die Section setzt sie inline, weil sie im Theme-Editor einstellbar ist. EIGENE EBENE UND NICHT background-image AM ABSCHNITT: Deckkraft am Abschnitt selbst traefe auch Ueberschrift, Text und Knopf. overflow:hidden, weil die Ebene den Abschnitt in allen vier Richtungen ausfuellt und background-size:cover je nach Seitenverhaeltnis darueber hinausragt. .wrap kommt mit position:relative nach vorn - ohne das laege der Text unter dem Bild. z-index braucht es dafuer nicht einmal: positionierte Geschwister ohne z-index stapeln sich in Dokumentreihenfolge, und .wrap steht hinter der Ebene. Er steht trotzdem da, damit ein spaeterer z-index am Bild nicht stillschweigend den Text verdeckt. */ /* WELCHE WAERMEPUMPE ES IST (30.09.2026). Bilder links, Text rechts - nach einem Vorbild, das Clara geschickt hat. KEIN KASTEN UM DIE BILDER, UND DAS WEISS VERSCHWINDET (Vorgabe Claras vom 30.09.2026: "die Bilder mit transparentem Hintergrund, zur Zeit sieht man noch einen weissen Rand und der komplette ist in einem Kasten, das will ich auch nicht"). Die beiden Geraetefotos sind JPEGs und koennen gar nicht durchsichtig sein - sie stehen auf reinem Weiss (#FFFFFF), die Seite dagegen auf --paper (#F7F5F1). Genau dieser Unterschied war der sichtbare Rand. mix-blend-mode:multiply LOEST DAS OHNE NEUE DATEIEN: Multiplizieren mit Weiss laesst den Untergrund unveraendert - die weisse Flaeche verschwindet also exakt, egal welchen Ton die Seite hat. Ein freigestelltes PNG waere die andere Loesung; sie braeuchte zwei neue Dateien, und auf diesem Rechner gibt es kein Bildwerkzeug, das Weiss zu Alpha macht. Die Grenze der Methode: Auf einem DUNKLEN Untergrund wuerden die Geraete mit verschwinden. Der Abschnitt steht deshalb bewusst auf hellem Grund. GLEICHE UNTERKANTE (Vorgabe Claras: "den unteren Teil der Bilder auf die gleiche Hoehe"). Die beiden Freisteller sind verschieden hoch. Sie stehen in gleich hohen Feldern, und object-position:bottom setzt sie darin auf den Boden - dadurch stehen sie auf einer Linie statt mittig zu schweben. align-items:end tut dasselbe fuer die Felder selbst. */ /* AUF DER KITS-SEITE MEHR LUFT ZUM KOPFBAND (01.10.2026, Vorgabe Claras: "mehr Platz zwischen 'Welche Waermepumpe' und dem Header"). WARUM ER DORT ENGER WIRKT ALS AUF DER STARTSEITE: Auf der Kits-Seite folgt der Abschnitt unmittelbar auf das Kopfband - eine farbig abgesetzte Flaeche, deren Kante hart schneidet. Auf der Startseite steht er mitten in einer Reihe gleichartiger heller Abschnitte, wo dieselben 30px voellig genuegen. DER WAEHLER TRENNT DIE BEIDEN STELLEN, ohne eine zweite Datei zu brauchen: data-panel richtet sich ohnehin nach der Seite ("produkt" auf der Kits-Seite, "rechner" auf der Startseite, siehe die Section). Es ist derselbe Abschnitt mit denselben Inhalten - nur sein Kopfabstand haengt davon ab, was darueber steht. DER FUSSABSTAND FAELLT GANZ WEG (Nachtrag desselben Tages, Vorgabe Claras: "auch den unteren Abstand bei 'Welche Waermepumpe' entfernen, aber nur bei der Seite Kits"). DAMIT STOSSEN DIE BEIDEN ABSCHNITTE DIREKT ANEINANDER - "Produkt & Kit" hat seinen Kopfabstand seit heute ebenfalls auf null. Das ist gewollt und faellt nicht zusammen, weil unten im Abschnitt ohnehin Leerraum steht: Seine Hoehe richtet sich nach den beiden Bildern links, die rechte Spalte endet hoeher. Dieser Leerraum traegt den Abstand jetzt allein. NUR AUF DER KITS-SEITE, auch das: Auf der Startseite folgt ein ganz anderer Abschnitt, und dort fehlte ohne Fussabstand jede Trennung. */ section.land.geraete[data-panel="produkt"]{padding-top:64px;padding-bottom:0} @media(max-width:768px){section.land.geraete[data-panel="produkt"]{padding-top:40px;padding-bottom:0}} section.geraete .ge-reihe{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:clamp(24px,4vw,56px);align-items:center} .ge-bilder{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,2vw,22px);align-items:end} .ge-bild{margin:0;display:flex;align-items:flex-end;justify-content:center} .ge-bild img{display:block;width:100%;height:clamp(210px,27vw,350px);object-fit:contain; object-position:bottom;mix-blend-mode:multiply} .ge-text .ge-ober{font-family:var(--mono);font-size:12.5px;font-weight:700;letter-spacing:.06em; text-transform:uppercase;color:var(--muted);margin:0 0 8px} .ge-text h2{margin:0 0 12px;text-align:left;max-width:none} .ge-text .ge-lead{margin:0 0 18px;font-size:clamp(15px,1.21vw,19px);line-height:1.6} /* Die Merkmale sind seit dem 30.09.2026 kurz genug fuer EINE Zeile (Vorgabe Claras: "nur in so einem praegnanten Satz die Daten"). Stichwort und Satz stehen deshalb nebeneinander statt uebereinander; bricht es doch um, rutscht der Satz unter sein Stichwort. */ .ge-merkmale{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-direction:column;gap:11px} .ge-merkmale li{display:flex;flex-wrap:wrap;gap:4px 8px;padding-left:16px;position:relative; font-size:15px;line-height:1.5} .ge-merkmale li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px; border-radius:2px;background:var(--bernstein)} .ge-merkmale b{flex:0 0 auto} .ge-merkmale span{flex:1 1 220px;min-width:0;color:var(--muted)} @media(max-width:992px){ section.geraete .ge-reihe{grid-template-columns:1fr;gap:26px} } @media(max-width:576px){ .ge-bild img{height:180px} .ge-merkmale li{font-size:14.5px} } section.land.dark.hat-hg{position:relative;overflow:hidden} section.land.dark.hat-hg > .wrap{position:relative;z-index:1} .cta-hg{position:absolute;inset:0;background-size:cover;background-position:center; pointer-events:none} /* SEKTIONEN ALS EIGENE AUFKLAPP-EINHEIT (User-Vorgabe 31.07.2026: "uebersichtlicher, einklappbar - beziehungsweise einruecken"). Beides umgesetzt: die Gruppe klappt, und der Inhalt sitzt eingerueckt an einer senkrechten Linie, damit auch im offenen Zustand erkennbar bleibt, was zu welcher Gruppe gehoert. Die Kopfzeile bewusst klein und in Versalien: sie sortiert, sie konkurriert nicht mit "Fragen" darueber und nicht mit den Fragen darunter, die fett und 17px sind. Der Aufklapp-Knopf ist derselbe wie bei den Fragen - eine Geste, zwei Ebenen. */ .faq-gruppe{max-width:680px;margin-top:26px} .faq-gruppe:first-of-type{margin-top:10px} .faq-gruppe > summary{display:flex;align-items:center;gap:12px;cursor:pointer;list-style:none; padding:10px 0;border-bottom:1.5px solid var(--line)} .faq-gruppe > summary::-webkit-details-marker{display:none} .fg-name{flex:1;min-width:0;font-family:var(--mono);font-size:12px;font-weight:700; letter-spacing:.09em;text-transform:uppercase;color:var(--gruen)} /* Anzahl der Fragen: nimmt der zugeklappten Zeile das Raten ab. */ .fg-zahl{flex:0 0 auto;font-family:var(--mono);font-size:11.5px;font-weight:700;color:var(--muted); background:var(--sand);border-radius:var(--radius-pill);padding:1px 8px;line-height:1.6} .faq-gruppe > summary .ftoggle{flex:0 0 auto;width:22px;height:22px;border:1.5px solid var(--line); border-radius:var(--radius-xs);display:flex;align-items:center;justify-content:center; font-family:var(--mono);color:var(--gruen);font-size:14px;transition:border-color .12s,background .12s} .faq-gruppe > summary:hover .ftoggle{border-color:var(--gruen);background:var(--gruen-tint)} .faq-gruppe > summary .ftoggle::after{content:"+"} .faq-gruppe[open] > summary .ftoggle::after{content:"–"} /* Einrueckung ohne Fuehrungslinie (User-Vorgabe 31.07.2026: die senkrechte Linie raus). Die Zuordnung traegt jetzt der Einzug allein - zusammen mit der Trennlinie unter der Gruppenzeile reicht das voellig, und es beruhigt die Ansicht spuerbar. Die Fragen behalten ihre eigene Breite, deshalb hier nur Innenabstand statt einer neuen max-width - sonst waeren sie doppelt begrenzt. */ .faq-gruppe-inhalt{padding-left:16px} .faq-gruppe-inhalt > details.faq:last-child{border-bottom:none} @media(max-width:640px){ .faq-gruppe{margin-top:20px} .fg-name{font-size:11.5px;letter-spacing:.07em} .faq-gruppe-inhalt{padding-left:11px} } details.faq{border-bottom:1px dashed var(--line);padding:20px 0;max-width:680px} /* DIE FRAGENSEITE STEHT MITTIG UND ETWAS BREITER (02.10.2026, Vorgabe Claras: "mach die Fragenseite bitte auch mittig und streck sie ein bisschen, aber nicht zu sehr. Der Header bleibt linksbuendig"). DAS KOPFBAND IST NICHT DABEI: Es kommt aus bwp-seitenband und steht ausserhalb dieses Abschnitts - die Regeln hier erreichen es gar nicht erst. Genau so war es gewollt. 860px STATT 680: "ein bisschen" - rund ein Viertel mehr. Die Lesebreite bleibt damit unter dem, was ich auf der Startseite fuer Fliesstext angesetzt habe; eine Antwort ist laenger als eine Unterzeile und soll bequem zu lesen bleiben. DIE FRAGEZEILEN BLEIBEN INNEN LINKSBUENDIG. Jede traegt links ihre Nummer und rechts das Aufklapp-Zeichen - zentrierter Text zwischen zwei festen Enden stuende bei jeder Frage an einer anderen Stelle. Mittig ist die SPALTE, und mittig sind Ueberschrift und Unterzeile. DIE GRUPPENTITEL STEHEN LINKS (Nachtrag 02.10.2026, Vorgabe Claras: "die Titel der Fragenbloecke bitte nicht mittig, sondern linksbuendig"). Sie sind Beschriftungen fuer die Liste darunter, nicht Ueberschriften des Abschnitts - und die Liste beginnt links. Mittig standen sie ueber Zeilen, die links anfangen; das las sich wie ein zweiter Mittelpunkt. DIE ANTWORT NIMMT DIE GANZE KASTENBREITE (Vorgabe desselben Tages: "den Text gerne so breit ziehen wie auch der ganze Kasten der Frage"). Sie stand auf 58 Zeichen - rund 490px in einem 860px breiten Kasten, also knapp die Haelfte. Die 42px Einzug bleiben: Sie bringen die Antwort auf dieselbe senkrechte Flucht wie die Frage darueber, die links von ihrer Nummer eingerueckt wird. Ohne sie begaenne die Antwort weiter links als die Frage, zu der sie gehoert. */ /* DAS KOPFBAND DER BERATER-SEITE STEHT MITTIG - SOLANGE KEIN BILD DARIN LIEGT (02.10.2026, Vorgabe Claras: "Fragen im Header auch mittig machen"; eingeschraenkt am 13.10.2026: "den Titel jetzt auch linksbuendig"). DIE EINSCHRAENKUNG STAND SCHON IN DER URSPRUENGLICHEN BEGRUENDUNG: "Dieselbe Bauform traegt die Kopfbaender ALLER Unterseiten, und dort steht rechts ein Foto - zentriert liefe der Text auf dessen Kante. Hier gibt es kein Bild, also auch keine Kante." Seit dem 13.10.2026 liegt dort ein Bild, und genau der vorhergesagte Fall ist eingetreten. DESHALB :not(.hat-bild) UND NICHT GELOESCHT: Die Bedingung, unter der mittig richtig war, ist jetzt ausgeschrieben statt nur im Kommentar. Nimmt jemand das Bild wieder aus dem Editor, steht der Titel von selbst wieder mittig - ohne dass jemand diese Regel sucht. UEBER DIE KENNUNG DER SECTION, nicht ueber .seitenband: Shopify vergibt jedem Abschnitt eine feste Kennung am umschliessenden Kasten; darueber trifft die Regel genau dieses eine Band und nicht die der uebrigen Unterseiten. DER UNTERTITEL GEHT MIT. Clara hat den Titel genannt, aber beide sitzen in derselben Spalte neben demselben Foto; nur einen von beiden zu loesen hiesse, zwei Anfangskanten uebereinanderzusetzen - und "im gleichen Stil wie die anderen Seiten" war die Ansage zum Bild. */ #shopify-section-billigerwaermepumpe-wissen-fragen .seitenband:not(.hat-bild) h1, #shopify-section-billigerwaermepumpe-wissen-fragen .seitenband:not(.hat-bild) h2, #shopify-section-billigerwaermepumpe-wissen-fragen .seitenband:not(.hat-bild) .sec-sub{ text-align:center;margin-left:auto;margin-right:auto} section.land.wissenfragen > .wrap > h2, section.land.wissenfragen > .wrap > .sec-sub{text-align:center} section.land.wissenfragen .wf-obertitel{text-align:left} section.land.wissenfragen details.faq p{max-width:none} section.land.wissenfragen > .wrap > h2{max-width:100%;margin-left:auto;margin-right:auto} section.land.wissenfragen > .wrap > .sec-sub{max-width:min(860px,100%);margin-left:auto;margin-right:auto} section.land.wissenfragen details.faq, section.land.wissenfragen .wf-obertitel{max-width:min(860px,100%);margin-left:auto;margin-right:auto} /* ===== SUCHE AUF DER FRAGEN-SEITE (02.10.2026, Vorgabe Claras) ================ Dieselbe Breite und dieselbe Mitte wie die Fragen darunter - die Leiste gehoert zur Liste und ist kein eigener Abschnitt davor. */ .faq-suche{max-width:min(860px,100%);margin:0 auto 22px;display:block} /* Das Label gehoert vorgelesen, nicht gesehen: Daneben steht die Lupe, und der graue Text im Feld sagt dasselbe noch einmal. Nicht display:none - das nehmen Vorlesewerkzeuge mit raus. */ .faq-suche-vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden; clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} .faq-suche-feld{display:flex;align-items:center;gap:10px;background:#fff; border:1.5px solid var(--line);border-radius:var(--radius-s);padding:0 10px 0 14px} .faq-suche-feld:focus-within{border-color:var(--gruen);box-shadow:0 0 0 3px var(--gruen-tint)} .faq-suche-ic{flex:0 0 auto;display:inline-flex;color:var(--muted)} /* 16px ist die Grenze, unterhalb derer iOS beim Antippen in das Feld hineinzoomt - und aus dem Zoom kommt man nur von Hand wieder heraus. */ .faq-suche input[type=search]{flex:1;min-width:0;border:none;outline:none;background:none; font-family:inherit;font-size:16px;color:var(--ink);padding:13px 0;-webkit-appearance:none;appearance:none} .faq-suche input[type=search]::-webkit-search-cancel-button{display:none} .faq-suche input[type=search]::placeholder{color:var(--muted)} /* Der eigene Loeschknopf steht nur da, wenn auch etwas zu loeschen ist. :placeholder-shown trifft das leere Feld - kein JavaScript noetig, um den Knopf zu verstecken. */ .faq-suche-weg{flex:0 0 auto;width:30px;height:30px;border:none;background:none;cursor:pointer; font-size:21px;line-height:1;color:var(--muted);border-radius:8px;padding:0} .faq-suche-weg:hover{background:var(--gruen-tint);color:var(--ink)} .faq-suche input[type=search]:placeholder-shown ~ .faq-suche-weg{visibility:hidden} .faq-suche-info{font-family:var(--mono);font-size:12px;color:var(--muted);margin:10px 0 0; text-align:left;line-height:1.5} .faq-suche-info[hidden]{display:none} /* DER BESTE TREFFER. Er steht aufgeklappt da, also sagt die Markierung nur noch, dass das Aufklappen kein Zufall war. Ein gruener Balken an der linken Kante - dieselbe Farbe, mit der im Konfigurator "das hier ist gemeint" gesagt wird. */ section.land.wissenfragen details.faq.faq-top{border-left:3px solid var(--gruen); padding-left:13px;background:var(--gruen-tint);border-radius:var(--radius-s)} section.land.wissenfragen details.faq[hidden], section.land.wissenfragen .wf-obertitel[hidden]{display:none} @media (max-width:640px){ .faq-suche{margin-bottom:18px} .faq-suche input[type=search]{padding:12px 0} } details.faq summary{font-weight:700;cursor:pointer;font-size:17px;list-style:none;display:flex;align-items:center;gap:14px} details.faq summary::-webkit-details-marker{display:none} details.faq .fidx{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--muted);flex:0 0 28px} /* DIE NUMMER IST AM SEITENENDE EIN VERWEIS (02.10.2026) - sie fuehrt zur selben Frage auf der Fragenseite. Sie soll aber aussehen wie vorher: Der Unterstrich erscheint erst beim Darueberfahren, damit die Zeile ruhig bleibt und trotzdem erkennbar ist, dass dort etwas passiert. */ details.faq a.fidx-link{text-decoration:none;cursor:pointer} details.faq a.fidx-link:hover{color:var(--gruen);text-decoration:underline} details.faq a.fidx-link:focus-visible{outline:2px solid var(--bernstein);outline-offset:2px;border-radius:3px} details.faq .fq{flex:1;min-width:0;margin:0;font:inherit} details.faq .ftoggle{flex:0 0 auto;width:22px;height:22px;border:1.5px solid var(--line);border-radius:var(--radius-xs);display:flex;align-items:center;justify-content:center;font-family:var(--mono);color:var(--gruen);font-size:14px;transition:border-color .12s,background .12s} details.faq:hover .ftoggle{border-color:var(--gruen);background:var(--gruen-tint)} details.faq .ftoggle::after{content:"+"} details.faq[open] .ftoggle::after{content:"–"} details.faq p{margin-top:12px;margin-left:42px;color:var(--graphit);font-size:15px;max-width:58ch} /* DREI FRAGEN AM SEITENENDE (21.09.2026). Kein eigenes Aussehen: Es sind dieselben details.faq wie auf der Fragen-Seite, damit der Besucher denselben Baustein wiedererkennt. Drei Abweichungen sind noetig: - Der Abschnitt bekommt eine Trennlinie nach oben. Er steht unter dem eigentlichen Seiteninhalt und braucht eine Kante, sonst liest er sich wie dessen Fortsetzung. - Die Antwort ruecken 42px ein, um an der Frage auszurichten, NEBEN der auf der Fragen-Seite die laufende Nummer steht. Hier gibt es keine Nummer, also auch keinen Grund fuer die Einrueckung. - Der Verweis auf alle Fragen steht auf eigener Zeile mit Abstand. */ /* OHNE TRENNLINIE (Vorgabe 23.09.2026). Die Linie sollte den Fragenblock vom Rest der Seite absetzen - genau das ist jetzt nicht gewollt. Die Polsterung bleibt: Sie und nicht die Linie haelt den Abstand, ein Wegfall beider haette den Block an den Text darueber geklebt. */ /* DER FRAGENBLOCK WAR ZU HOCH (30.09.2026, Meldung Claras zur Produktpaketseite: "mach die dazu gestellten Fragen nicht so hoch, vor allem wenn kaum was drauf steht"). UND DIESE REGEL HAT NIE GEGRIFFEN - dieselbe Spezifitaetsfalle wie bei .shoppage weiter unten: ".seitenfaq" ist eine Klasse (0,1,0), "section.land" weiter oben ist Element plus Klasse (0,1,1) und schlaegt sie. Die 56/64px standen hier seit dem 23.09.2026 wirkungslos; in Wahrheit galten die 30/82px der Grundregel. Wer an diesen Zahlen drehte, aenderte nichts - genau das laedt zum Herumprobieren ein. Jetzt mit "section.land." davor, und damit wirksam: oben derselbe schmale Abstand wie bei allen Abschnitten, unten 48 statt 82. Der Block steht am Seitenende, unter ihm kommt nur noch der Fuss - die 82px trennten dort nichts mehr ab. */ /* BEIGES BAND AUF JEDER SEITE (30.09.2026, Vorgabe Claras: "kannst du bei allen Seiten bei 'Häufige Fragen dazu' den Abschnitt beige machen, so wie auf der Startseite"). WARUM ER AUF DER STARTSEITE SCHON BEIGE AUSSAH und sonst nicht: Er hatte nirgends einen eigenen Grund - ueberall stand er auf dem Papierton der Seite (--paper). Auf der Startseite steht unmittelbar darueber der weisse Block mit den Kundenbildern (background:--card); erst dieser Wechsel liess den Fragenblock als eigenes, waermeres Band erscheinen. Auf den Unterseiten grenzt er an Abschnitte derselben Farbe und verschwand deshalb im Rest der Seite. DER TON IST --paper (Nachbesserung am selben Tag: "nicht in diesem kraeftigen Beige, sondern in der Farbe, wie sie beim Hintergrund bei Preis-Fussnote ist"). Kurz stand hier --sand, der Beigeton der Kopfbaender - Clara war er zu kraeftig. Die Preis-Fussnote hat gar keinen eigenen Grund; sie steht auf --paper, dem warmen Weiss der Seite. Genau dieser Ton steht jetzt hier. ER IST DAMIT AUSGESCHRIEBEN UND NICHT MEHR GEERBT, und das ist der Unterschied zu vorher: Der Abschnitt haelt seinen Ton auch dann, wenn ueber oder unter ihm ein weisses Band steht - auf der Startseite ist das der Fall. Wo die Nachbarn denselben Ton tragen, setzt er sich nicht ab; das liegt in der Natur der gewaehlten Farbe und nicht an der Regel. Die Polsterung bleibt deshalb so knapp wie bei jedem anderen Abschnitt - ein Band, das man nicht sieht, braucht innen keine zusaetzliche Luft. */ /* DER FRAGENBLOCK NIMMT IMMER DIE GEGENFARBE ZU DEM, WAS UEBER IHM STEHT (02.10.2026, Vorgabe Claras: "bei jeder Seite die Hintergrundfarbe von 'Haeufige Fragen dazu' immer in der gegenteiligen Farbe machen von dem, wie es davor ist"). DER GRUNDFALL IST WEISS. Auf fast allen Seiten endet der Inhalt beige - Kundenbilder, Werkzeug, Amortisation tragen keine eigene Farbe und folgen damit dem Seitenhintergrund. Gegenfarbe dazu ist Weiss. DIE AUSNAHME IST DIE ABLAUFSEITE: Dort steht seit heute der Aufruf "Jetzt passendes Kit berechnen" auf Weiss unmittelbar davor. Zweimal Weiss waere keine Gegenfarbe, also faellt der Fragenblock dort auf Beige zurueck. :has() AM VORANGEHENDEN GESCHWISTER, nicht eine Regel je Seite: Shopify legt um jede Section einen eigenen Kasten; der Waehler fragt also "steht im Kasten davor ein weisser Abschnitt?" und nicht "welche Seite ist das?". Kommt irgendwann eine weitere weisse Section unmittelbar vor die Fragen, reicht es, sie in dieser Liste zu ergaenzen - die Seiten selbst muessen nicht bekannt sein. NICHT BETROFFEN SIND DUNKLE BAENDER: Auf der Rechnerseite steht der dunkle Abschluss davor. Gegenfarbe zu Dunkel ist Hell, und Weiss ist die hellere der beiden - der Grundfall stimmt dort also schon. */ section.land.seitenfaq{background:#fff;padding-top:30px;padding-bottom:48px} .shopify-section:has(> section.land.ablauf-cta) + .shopify-section section.land.seitenfaq, .shopify-section:has(> section.land.fachbetrieb) + .shopify-section section.land.seitenfaq, .shopify-section:has(> section.land.rechner-lohnt) + .shopify-section section.land.seitenfaq{background:var(--paper)} /* DASSELBE NOCH EINMAL OHNE :has() (02.10.2026, nach Claras Hinweis "bei Ablauf 'Haeufige Fragen dazu' in diesem hellen Beige"). DIE REGEL DARUEBER WAR NACHWEISLICH AUSGELIEFERT - im Stylesheet nachgesehen, und die Seitenstruktur passt dazu (der Kasten mit dem Aufruf steht unmittelbar vor dem mit den Fragen). Blieb als Erklaerung nur der Waehler selbst: :has() ist zwar lange verfuegbar, aber es ist die einzige Zutat hier, die ein aelterer Browser nicht kennt - und ein unbekannter Waehler laesst die GANZE Regel fallen, auch die beiden anderen Zeilen davor. SHOPIFY VERGIBT JEDEM ABSCHNITT EINE FESTE KENNUNG am umschliessenden Kasten (#shopify-section-). Darueber laesst sich dasselbe ohne :has() sagen, und zwar in jedem Browser. Die allgemeine Fassung bleibt stehen: Sie greift auch dort, wo ich die Kennung nicht vorher weiss. */ #shopify-section-billigerwaermepumpe-ablauf-cta + .shopify-section section.land.seitenfaq, #shopify-section-billigerwaermepumpe-fachbetrieb + .shopify-section section.land.seitenfaq{background:var(--paper)} /* VIDEO-ABSCHNITT (30.09.2026). Der Rahmen haelt 16:9 von sich aus - aspect-ratio statt des alten Polster-Tricks mit padding-bottom:56.25%, damit der Kasten auch dann die richtige Hoehe hat, wenn noch gar nichts darin steht. DER VORBAU IST EIN KNOPF ueber die ganze Flaeche: Wer irgendwo hineinklickt, startet das Video - nicht nur, wer das kleine Dreieck trifft. OHNE STANDBILD EINE RUHIGE FLAECHE statt eines schwarzen Lochs: Der Abschnitt soll auch dann ordentlich aussehen, wenn niemand ein Bild hinterlegt hat, und das ist der Normalfall, solange keins existiert. DAS FENSTER FUELLT DEN RAHMEN, sobald es da ist - dieselbe Regel fuer iframe und img, weil der Rahmen nach dem Klick nur noch das Fenster enthaelt. */ section.land.video-band{padding-top:30px;padding-bottom:82px} /* KLEINER SEIT DEM 30.09.2026 (Vorgabe Claras: "mach bitte das Video etwas kleiner"): 680 statt 920px. Es ist ein Einschub zwischen zwei Textabschnitten und nicht der Anlass der Seite - in voller Inhaltsbreite wirkte es wie ein Kopfbild. */ /* ZWEI SPALTEN NACH DEM VORBILD VON klekks.com (02.10.2026, Vorgabe Claras: "kannst du das Video auf der Startseite bitte in diesem Design darstellen"). Links das Medium, rechts ein Textblock aus kleiner Zeile, Ueberschrift, Absatz und Knopf - und der Textblock senkrecht auf halber Hoehe des Videos (align-items:center), nicht oben buendig. Genau das macht im Vorbild den ruhigen Eindruck. DIESELBE BAUFORM WIE .ge-reihe bei "Welche Waermepumpe": zwei Abschnitte derselben Seite, die dasselbe tun, sollen auch gleich gebaut sein. Die Spalten sind hier gleich breit statt 1,05 zu 1 - das Video ist 16:9 und braucht mehr Breite als die beiden hochkanten Geraetefotos, der Text daneben weniger. DER TEXT STEHT MITTIG IN SEINER SPALTE, wie im Bildschirmfoto. Das macht die allgemeine Zentrierungsregel nicht: Sie greift nur bei direkten Kindern von .wrap, und hier steckt alles eine Ebene tiefer in der Spalte. Deshalb hier ausdruecklich - und damit bleibt es auch dann stehen, wenn die Startseite irgendwann wieder linksbuendig wird. */ .video-reihe{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(20px,3vw,44px);align-items:center;margin-top:8px} @media(max-width:992px){ .video-reihe{grid-template-columns:1fr;gap:26px} } .video-text{text-align:center} /* Die kleine Zeile darueber: Mono und gesperrt wie .ge-ober bei "Welche Waermepumpe" - im Vorbild ist sie der Griff, an dem der Block haengt. */ .video-text .video-ober{font-family:var(--mono);font-size:12.5px;font-weight:700; letter-spacing:.06em;text-transform:uppercase;color:var(--gruen);margin:0 0 10px} /* Ohne die 16ch-Deckelung von section.land h2: In einer halben Spalte waere die Ueberschrift sonst vier Woerter breit. max-width:none statt eines eigenen Wertes - die Spalte deckelt schon. */ .video-text h2{margin:0 0 12px;max-width:none;font-size:clamp(26px,3.2vw,40px)} .video-text .video-lead{margin:0;font-size:clamp(15px,1.21vw,19px);line-height:1.6;color:var(--graphit)} /* .btn.mid ist von Haus aus zentriert und hoechstens 340px breit - hier braucht er nur seinen Abstand nach oben. */ .video-text .btn.mid{margin-top:22px} /* OHNE EIGENE BREITE UND OHNE AUSSENABSTAND, seit es die Spalte gibt: Die 680px und das margin:auto stammen aus der Zeit, als das Video allein unter der Ueberschrift stand (30.09.2026, Vorgabe Claras: "mach bitte das Video etwas kleiner"). In der Spalte deckelt die Spalte, und ein zweiter Deckel darin haette das Video von der Textspalte weggerueckt. */ .video-rahmen{position:relative;aspect-ratio:16/9;width:100%; border-radius:var(--radius-xl);overflow:hidden;background:var(--sand); border:1px solid var(--line)} .video-rahmen iframe,.video-rahmen img{position:absolute;inset:0;width:100%;height:100%; border:0;object-fit:cover;display:block} .video-start{position:absolute;inset:0;width:100%;height:100%;display:flex; flex-direction:column;align-items:center;justify-content:center;gap:12px; background:none;border:0;cursor:pointer;padding:0;color:var(--ink)} .video-play{position:relative;display:inline-flex;align-items:center;justify-content:center; width:72px;height:72px;border-radius:999px;background:var(--rost);color:var(--ink); font-size:26px;line-height:1;padding-left:5px; box-shadow:var(--shadow-lift);transition:transform .18s ease,background .18s ease} .video-start:hover .video-play{transform:scale(1.06);background:var(--rost-dark)} .video-label{position:relative;font-weight:800;font-size:15px} .video-hinweis{margin:14px 0 0;font-size:11.5px;line-height:1.5; color:var(--muted);text-align:center} @media(max-width:576px){ .video-play{width:58px;height:58px;font-size:22px} .video-label{font-size:14px} } /* KEINE SONDERBREITE (21.09.2026). Eine Zwischenfassung zog den Abschnitt ueber den ganzen Bildschirm; zurueckgenommen auf Wunsch - er faengt an und hoert auf, wo jeder andere Block der Seite das auch tut. Er braucht dafuer keine eigene Regel mehr: .wrap bringt die Inhaltsbreite (--seite-max) und die 22px Rand von sich aus mit. Der Gewinn der Zwischenfassung bleibt aber: die zwei Spalten weiter unten. Sie waren das, was die Fragezeile wirklich gestreckt hat - nicht die Bildschirmbreite. */ .seitenfaq h2{margin-bottom:6px} .seitenfaq .sec-sub{margin-bottom:10px} /* DER FRAGENBLOCK LAEUFT BREITER (02.10.2026, Vorgabe Claras: "bei 'Haeufige Fragen' den Text unten nicht so knapp links lassen, sondern breiter machen"). DIE AUFKLAPPLISTE STAND AUF 680px, die Zeile darueber auf 46 Zeichen - in einer Spalte, die auf einem grossen Schirm ueber 1100px breit ist. Als der Block noch linksbuendig unter linksbuendigen Abschnitten stand, war das eine Lesebreite; seit alles darueber mittig und weit laeuft, sieht derselbe Wert nach einer angeschnittenen Spalte aus. 980 UND 820 STATT 680 UND 46ch: dieselben Groessenordnungen wie ueberall sonst auf der Seite. Die Liste darf etwas breiter sein als ein Fliesstextabsatz - ihre Zeilen sind Fragen, also kurz, und die Antworten stehen eingerueckt darunter. LINKSBUENDIG BLEIBT ES: Das war Claras ausdrueckliche Vorgabe von heute Mittag ("bei 'Haeufige Fragen dazu' den Text auch wieder linksbuendig"). Breiter heisst hier breiter, nicht mittig. NUR IM SEITEN-FRAGENBLOCK: .faq-gruppe traegt auch die Fragen-Seite; dort ist die Breite nicht beanstandet worden. */ /* BERICHTIGUNG (02.10.2026): Hier stand zusaetzlich ".seitenfaq .faq-gruppe{max-width:980px}". Die Regel war wirkungslos - .faq-gruppe gehoert zur ANDEREN Fragenliste (billigerwaermepumpe-faq auf /pages/fragen); der Fragenblock am Seitenende baut seine Liste aus .seitenfaq-liste, .sf-spalte und details.faq. Im Markup nachgesehen, nicht vermutet. GEWIRKT HAT DIE ZWEITE ZEILE, und sie war auch die gemeinte: Die Zeile unter der Ueberschrift stand auf 46 Zeichen und war damit das Schmale, das Clara gemeldet hat ("nicht so knapp links lassen, sondern breiter"). Die Fragen darunter laufen ohnehin ueber die volle Spalte - details.faq traegt dort max-width:none. */ .seitenfaq .sec-sub{max-width:min(820px,100%)} /* ZWEI SPALTEN (Vorgabe 21.09.2026). Die Breite allein haette nichts gebracht: Eine Frage samt Antwort ueber 1600px zu ziehen ergibt Zeilen, die das Auge beim Ruecksprung verliert. Zu zweit fuellen sie die Flaeche und bleiben lesbar. Das Raster fuellt zeilenweise - bei drei Fragen stehen zwei oben und eine unten links. align-items:start, damit eine aufgeklappte Antwort nur ihre eigene Zelle waechsen laesst und nicht die danebenstehende, zugeklappte Frage in die Hoehe zieht. Der Spaltenabstand ist fest: Er stand als clamp mit vw-Anteil da, als der Abschnitt noch ueber den ganzen Schirm lief. Die Inhaltsspalte waechst seit dem 22.09.2026 zwar noch einmal - aber in EINER Stufe bei 1440px, nicht laufend mit dem Fenster. Ein mitwachsender Abstand haette darin nichts mehr zu rechnen; 48px passen zu beiden Stufen. */ /* ZWEI EIGENE SPALTEN, JEDE FUER SICH (22.09.2026, zweite Fehlerbehebung). Erst war es ein Raster: Zwei Felder nebeneinander lagen in derselben Zeile, und wuchs das rechte, riss unter dem linken eine Luecke auf - sichtbar als "aufgeklappte Antwort ohne Text". Dann Mehrspaltensatz: Der kennt keine Zeilen, verteilt die Fragen aber bei jeder Hoehenaenderung NEU - eine Frage sprang von links nach rechts, sobald darueber eine aufging, und der Verweis darunter wanderte mit. Beides gemeldet. Die Aufteilung liegt jetzt im Markup: zwei Behaelter, jede Frage gehoert fest zu einem. Keine Verteilung, die sich aendern koennte - was aufgeht, schiebt nur das, was in DERSELBEN Spalte darunter liegt. flex und nicht grid: Zwei Kinder nebeneinander, beide gleich breit, unabhaengige Hoehe - genau das kann flex von sich aus. Ein Raster brauchte fuer die Unabhaengigkeit wieder align-items, und die Zeilenbindung war ja der erste Fehler. */ .seitenfaq-liste{display:flex;gap:48px;align-items:flex-start;margin-top:18px} .sf-spalte{flex:1 1 0;min-width:0} /* Ueberschrift links, Verweis rechts auf derselben Zeile. Der Verweis stand unter der Liste und rutschte bei jedem Aufklappen nach unten; hier haengt er an nichts, was waechst. */ .sf-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:24px;flex-wrap:wrap} .sf-kopf h2{margin-top:0} /* Die Begrenzung auf 680px kommt von der Fragen-Seite, wo die Liste allein in einer Spalte steht. Hier gibt die Rasterspalte das Mass vor. */ .seitenfaq-liste details.faq{max-width:none} .seitenfaq details.faq p{margin-left:0} .seitenfaq-mehr{display:inline-block;flex:0 0 auto;font-weight:700;font-size:15px; color:var(--gruen);text-decoration:none} .seitenfaq-mehr:hover{text-decoration:underline;text-underline-offset:4px} /* ---------- RECHNERSEITE: die Abschnitte um das Formular (22.09.2026) ---------- Reihenfolge laut Vorgabe: Ueberschrift, Aufruf, Einstimmung, Formular, drei Textabschnitte. ALLE VIER SIND .land UND NEHMEN SICH IHRE POLSTERUNG ZURUECK. section.land bringt 82px oben und unten mit - richtig fuer einen Abschnitt, der allein steht, aber hier stehen vier hintereinander, die zusammengehoeren. Ohne die Ruecknahme laegen zwischen Ueberschrift und Knopf 164px Luft. */ /* DER KOPFBAND DER RECHNERSEITE. Er traegt zusaetzlich .dark und holt sich Grund und Textfarbe von dort (siehe section.land.dark weiter oben) - hier stehen nur die Abweichungen. PADDING STATT 0: Die Nullsetzung stammt aus der Zeit, als der Kopf ein blosser Textanfang war und direkt in den Seiteninhalt ueberging. Als abgesetzter Band braucht er Luft, sonst klebt die Ueberschrift an der Navigation darueber. */ /* ---------- KOPFBAND DER UNTERSEITEN (22.09.2026) ---------- Dieselbe Form wie der Kopf der Rechnerseite - nur hell statt dunkel (Vorgabe). Er hebt den Seitenanfang vom Inhalt ab, statt ihn als ersten von vielen gleich aussehenden Abschnitten beginnen zu lassen. var(--sand) UND NICHT var(--paper): Der Grund der Seite ist bereits Papier; ein Band in derselben Farbe waere kein Band. --sand ist der naechste warme Ton darueber und auf der Seite eingefuehrt (Hinweiskaesten, Zahlenfelder). DIESELBEN ABSTAENDE WIE DER RECHNER-KOPF, absichtlich auf dieselben Zahlen gesetzt: Genau darum ging die Vorgabe - die Koepfe sollen dieselbe Groesse haben. Wer sie aendert, muss beide anfassen; das steht auch am anderen Ende. */ section.land.seitenband{background:var(--sand);padding:74px 0 78px} /* ---------- BILD IM KOPFBAND (22.09.2026, nur wo eines uebergeben wird) ---------- Vorgabe: "ein Bild, wo man die Aussseneinheit sieht, rechts in den Header, und die mittlere Abgrenzung soll verschwimmen - der Fokus soll aber der Text sein." DREI MITTEL FUER "FOKUS BLEIBT DER TEXT": 1. Das Bild nimmt 46 Prozent der Breite, der Text behaelt die Seitenspalte. 2. Die Maske blendet es zur Mitte hin vollstaendig aus - es hat keine Kante, an der das Auge haengenbleibt, und keinen Bereich, der mit der Ueberschrift konkurriert. 3. Der Text bekommt eine Hoechstbreite von 58 Prozent, damit er nie ins Bild laeuft. MASKE STATT VERLAUF DARUEBER: Ein Verlauf muesste die Farbe des Bandes kennen und liefe beim naechsten Farbwechsel daneben. Die Maske blendet das Bild selbst aus, egal was darunter liegt. Dieselbe Bauform wie im Hero der Startseite. ABSOLUT UND MIT overflow:hidden: So reicht das Bild bis an den Bildschirmrand, waehrend der Text in der Spalte bleibt - ohne dass der Band ein eigenes Raster braucht. */ section.land.seitenband.hat-bild{position:relative;overflow:hidden} /* Tagline im Kopfband: eine Stufe unter dem Titel, eine ueber dem Fliesstext. Traegt die Schriftfamilie des Titels und dessen Gewicht, aber nicht dessen Groesse - sonst laesen sich beide als zwei Ueberschriften und der Kopf haette keine Rangfolge mehr. */ .sb-tagline{margin:10px 0 0;font-weight:800;font-size:clamp(17px,1.6vw,20px);letter-spacing:-.01em;color:var(--ink)} .sb-tagline + .sec-sub{margin-top:8px} .sb-bild{position:absolute;top:0;right:0;bottom:0;width:46%;pointer-events:none} /* DER VERLAUF DIESER KOPFBAENDER IST WIEDER DER ALTE (38% / 72%, berichtigt am 30.09.2026). Am selben Abend hatte Clara den Kopf der Startseite auf genau diesen Wert gezogen ("genauso weit wie auch bei den anderen Seiten im Header"), und die drei folgenden Feinschritte liefen deshalb auf BEIDE. Ihr Einwand danach: "nicht ueberall die letzten 3 Aenderungen machen, sondern nur auf der Startseite." DIE BEIDEN SIND DAMIT WIEDER GETRENNT. Das ist kein Versehen, sondern der Auftrag: Der Kopf der Startseite steht jetzt auf 15/55/86, diese Baender auf 38/72. Wer sie wieder gleichziehen will, kopiert den Verlauf von .hero.xl .heroimg img hierher - und sollte es an beiden Stellen vermerken, sonst wandert beim naechsten Feinschritt wieder mehr mit als gemeint. */ .sb-bild img{width:100%;height:100%;object-fit:cover;display:block; -webkit-mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.65) 38%,#000 72%); mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.65) 38%,#000 72%)} /* ===== DER KITS-KOPF HAT SEINE EIGENE FORM (13.10.2026) ======================= Vorgabe Claras: "kannst du bei dem Reiter Kits bitte einmal das Headerdesign veraendern - ueberrasch mich." DUNKEL STATT SAND, UND DAS FOTO UEBER DIE GANZE BREITE. Die fuenf hellen Baender unterscheiden ihre Seiten durch den Text, nicht durch die Form - fuer die Kits-Seite ist das zu wenig: Sie ist die Produktseite des Shops, und ihr Kopf soll das Gewicht haben, das der Rechner-Kopf auf seiner Seite hat. Dunkel traegt dieses Gewicht, und das Foto der Aussseneinheit wird darin vom Beiwerk am Rand zum Grund, auf dem der Satz steht. ES IST KEINE NEUE SPRACHE, SONDERN DIE DES TELEFONS: Auf schmalen Schirmen liegt der Titel seit dem 28.09.2026 IM Bild, auf dunklem Verlauf, in heller Schrift - genau diese Form bekommt jetzt auch der grosse Schirm. Vorher sahen die beiden aus wie zwei Entwuerfe. DIESE VARIANTE KENNT IHRE FARBE, und das darf sie als einzige: Die Maske am Bild bleibt (sie blendet das Foto aus, ohne den Grund zu kennen, siehe oben), der Schleier darueber ist dagegen ausdruecklich in --ink gemischt. Das ist der Preis dafuer, dass heller Text auf einem Foto ueberall lesbar bleibt - ein maskenbasierter Weg kann das nicht leisten. Wer den Grund dieses Bandes aendert, aendert den Schleier mit; beide stehen deshalb unmittelbar untereinander. DIE OBERZEILE IN GELB UND MONO zitiert das Logo und die Zahlenfelder der Seite. Sie ist die kleinste Stufe im Kopf und sagt in zwei Worten, was die Seite ist, bevor die Ueberschrift es ausspricht. */ /* DAS BAND IST HOEHER GEWORDEN, DAMIT DAS FOTO WEITER AUFGEHT (14.10.2026, Meldung Claras: "das Bild beim Kits-Header soll aber nicht weiter nach rechts wandern und einen kleineren Ausschnitt bekommen"). SIE HAT EINEN RECHENFEHLER VON MIR GESEHEN. Als ich das Feld von 46 auf 56 Prozent verbreitert habe, stand im Kommentar "71 Prozent der Bildhoehe bleiben stehen" - gerechnet mit 420 Punkten Bandhoehe. Die gibt es aber erst ab 1615 Punkten Bildschirmbreite, denn clamp(300px,26vw,420px) liefert bei 1440 nur 374. Tatsaechlich fielen damit 75 auf 62 Prozent: Das Verbreitern hat ein Fuenftel des Fotos gekostet. WARUM NICHT EINFACH ZURUECK AUF 46 PROZENT: Das Feld haengt rechts fest, ein schmaleres zieht seine LINKE Kante nach rechts - und damit das Motiv, das in der Feldmitte sitzt, von Band 72 auf 77 Prozent. Genau das hat Clara im selben Satz ausgeschlossen. Schmaler und grosszuegiger zugleich geht nicht. ALSO DIE DRITTE GROESSE: die Hoehe. Ein 4:3-Bild in einem Feld von 56 Prozent Breite ist 0,42 mal der Bildschirmbreite hoch; damit davon 79 Prozent stehen bleiben, braucht das Band 0,33 davon. Daher 33vw statt 26vw. Gerechnet, nicht geschaetzt: Bildschirm Band alt -> neu sichtbar alt -> neu (bei 46 % waren es) 1280 333 -> 422 62 % -> 79 % 75 % 1440 374 -> 475 62 % -> 79 % 75 % 1600 416 -> 528 62 % -> 79 % 75 % Es ist also mehr Foto zu sehen als vor der ganzen Aenderung, und das Motiv steht weiter links als damals. Beides zugleich gab es nur ueber die Hoehe. DIE OBERGRENZE 540 STATT 420: Ab etwa 1640 Punkten greift sie, und von da an wird der Ausschnitt wieder enger (bei 1920 noch 67 Prozent). Das ist bewusst - ein Kopfband, das auf einem grossen Monitor 640 Punkte hoch waere, draengt den Seiteninhalt unter die Kante. */ /* ===== DIE FARBEN GELTEN FUER JEDES DUNKLE KOPFBAND (15.10.2026) ============== Vorgabe Claras: "kannst du beim Reiter Ablauf im Header das Beige auch mit dem Schwarz/Grau austauschen, so wie bei Reiter Kits auch." GETRENNT WAS VERSCHIEDEN IST: Am Kits-Band hingen Farbe und Form in einer Regel. Die FORM ist auf sein Foto zugeschnitten (IMG_4678 ist 4:3, die Waermepumpe steht mittig; Hoehe, Bildbreite und Maske sind darauf abgestimmt). Die FARBE ist es nicht - sie passt auf jedes Band. Also stehen die Farben jetzt fuer beide Varianten hier und die Form eine Zeile weiter nur fuer kits. WARUM NICHT EINFACH variante:'kits' AUCH FUER ABLAUF: Dann erbte die Ablaufseite die ganze Form mit - 540 Punkte Bandhoehe und eine Maske, die auf ein querformatiges Motiv gerechnet ist. Das Ablauf-Foto ist hochkant (1780170274367_1.jpg, 2983 Punkte hoch); in diesem Zuschnitt bliebe davon ein Streifen uebrig. --dunkel IST DER NAME, NICHT --ablauf: Es gibt nichts Ablaufspezifisches daran. Das naechste Band, das dunkel werden soll, bekommt dieselbe Variante und keine dritte. */ section.land.seitenband.seitenband--kits, section.land.seitenband.seitenband--dunkel{background:var(--ink);color:#EFE6D8} section.land.seitenband.seitenband--kits{ padding:0;min-height:clamp(340px,33vw,540px);display:flex;align-items:center} /* DAS BAND IST HOCH UND DAS FOTO LAEUFT AUS (13.10.2026, Meldung Claras: "kannst du das Bild irgendwie erweitern, sodass es in der vollen Breite Sinn ergibt - und auch ein bisschen den Header auf der Startseite imitiert, aber da wo Text steht, nicht nur Bild der Hintergrund ist"). WARUM NICHT EINFACH UEBER DIE GANZE BREITE: IMG_4678 ist 4:3, die Waermepumpe steht mittig darin. Ueber die volle Bandbreite gezogen wird das Bild auf seine natuerliche Groesse skaliert und oben wie unten beschnitten - bei 1400 x 260 blieben 25 Prozent der Bildhoehe uebrig, und die Textflaeche laege genau auf dem Geraet. Vollbreit WIRKT also nur mit einem breiten Foto; mit diesem hier macht es den Zuschnitt schlimmer, nicht besser. WAS STATTDESSEN "VOLLE BREITE" ERZEUGT: Hoehe und ein langer Verlauf. Das Band ist jetzt mindestens 300 und bis 420 Pixel hoch - damit naehert sich seine Form der des Fotos, und es bleibt mehr vom Bild stehen. Das Feld reicht ueber zwei Drittel der Breite und loest sich nach links ueber eine lange Strecke auf (8 % bis 66 %, dieselbe Bauform wie im Kopf der Startseite). Es gibt damit keine Kante mehr, an der das Bild aufhoert - es endet nicht, es verschwindet. UND UNTER DEM TEXT LIEGT KEIN FOTO, sondern Farbe: Der Schleier ist links praktisch deckend und oeffnet sich erst dort, wo der Text aufhoert. Genau das war Claras Zusatz zum Startseiten-Vorbild - dort liegt der Text mittig AUF dem Bild, hier soll er das nicht. */ /* DAS BILD HAT WIEDER SEINE URSPRUENGLICHE GROESSE (13.10.2026, Vorgabe Claras: "das Bild bitte in der gleichen Groesse wie vorher rechts haben"). Also keine eigene Breite mehr - es gilt die der uebrigen Kopfbaender (46 %, siehe .sb-bild weiter oben). Zusammen mit dem hohen Band ist das der GERINGSTE Zuschnitt, den dieses Foto je hatte: In 644 x 420 Punkten braucht ein 4:3-Bild 483 px Hoehe, es fehlen also 13 Prozent. Vollbreit waren es 75. Die Hoehe des Bandes bleibt deshalb, wie sie ist. DIE MASKE BLEIBT LAENGER ALS BEI DEN HELLEN BAENDERN (30/70 statt 38/72): Auf dunklem Grund faellt eine Bildkante frueher auf. */ /* DAS DUNKLE REICHT WENIGER WEIT NACH RECHTS UND LAEUFT LAENGER AUS (13.10.2026, Vorgabe Claras: "mach im Header bei Kits bitte das Schwarze/Graue links nicht ganz so weit nach rechts und insgesamt mehr ausfaden"). GEAENDERT IST NICHT DIE BILDGROESSE, SONDERN DER VERLAUF DARIN. Das Feld bleibt bei 46 % (Claras Vorgabe von vorhin), der Zuschnitt des Fotos aendert sich also nicht. Bewegt hat sich, WANN innerhalb dieses Feldes das Bild durchkommt: vorher 0 % · 45 % bei 30 % · voll bei 70 % jetzt 0 % · 38 % bei 14 % · 72 % bei 46 % · 94 % bei 78 % · voll am rechten Rand Auf die ganze Bandbreite gerechnet traegt das Foto damit schon bei 60 statt erst bei 68 Prozent sichtbar bei - das Dunkle reicht weniger weit nach rechts. Und der Uebergang endet nicht mehr bei 86 Prozent, sondern laeuft bis an den Rand: mehr Ausfaden. VIER MARKEN STATT ZWEI: Ein Verlauf mit zwei Punkten steigt gleichmaessig und hat genau dort eine sichtbare Kante, wo er endet. Mit vier Marken steigt er vorn schneller und hinten flacher - so faellt kein Punkt auf, an dem "das Bild fertig ist". DER SCHLEIER IST LEICHTER GEWORDEN (von .72 auf .55 am linken Rand): Er soll das Foto in den Grund legen, nicht ersetzen. Je frueher das Bild durchkommt, desto weniger muss er verdecken. */ /* VOLLBREIT IST AM 14.10.2026 ZUM ZWEITEN MAL ZURUECKGENOMMEN WORDEN - und diesmal lag es nicht am Bild. Am 13.10. scheiterte der Versuch am Seitenverhaeltnis: IMG_4678 ist 4:3, ueber die ganze Bandbreite blieb ein Streifen von 25 Prozent der Bildhoehe. Am 14.10. lag dort kurz ein 16:9-Bild, mit dem die Rechnung aufging (54 Prozent sichtbar) - vollbreit war technisch also in Ordnung. Claras Antwort darauf war trotzdem "mach es bitte wieder wie es vorher war, mit dem anderen Bild": zurueck auf dieses Foto UND auf dieses Feld. DARAUS DIE LEHRE FUER DEN NAECHSTEN ANLAUF: Dass ein Bild vollbreit rechnerisch passt, heisst nicht, dass das Band es soll. Dieser Kopf lebt davon, dass links Farbe steht und das Foto rechts daraus auftaucht - nicht davon, wieviel Foto zu sehen ist. Wer die Breite wieder anfasst, aendert nicht den Zuschnitt, sondern diese Idee. */ /* MEHR FOTO, WENIGER DUNKLE FLAECHE (14.10.2026, Vorgabe Claras: "mehr Bild weniger schwarzer Kasten") - und zwar an DREI Stellen gleichzeitig, weil der "Kasten" aus drei Dingen besteht und ein einzelner Regler ihn nur verschiebt: 1. das Feld 46 % -> 56 % das Foto beginnt bei 44 statt bei 54 Prozent 2. die Maske oeffnet frueher und ist bei 92 % des Feldes voll da, nicht erst am Rand 3. der Schleier .55 -> .42 am linken Rand, .30 -> .20 in der Mitte DIE OBERGRENZE IST NICHT DER GESCHMACK, SONDERN DIE BILDHOEHE. IMG_4678 ist 4:3: Je breiter das Feld, desto groesser wird das Bild skaliert und desto weniger seiner Hoehe passt ins Band. Wer hier weiter aufdreht, bekommt mehr Breite und weniger Bild - das ist der Punkt, an dem "mehr Foto" in sein Gegenteil kippt, und genau daran ist der vollbreite Versuch vom 13.10. gescheitert. DIE ZAHLEN DAZU STEHEN OBEN AN DER BANDHOEHE und nicht hier: Der sichtbare Anteil haengt an BEIDEN Werten, Feldbreite und Bandhoehe, und war hier am 14.10.2026 schon einmal falsch notiert (mit 420 Punkten Band gerechnet, die es erst ab 1615 Punkten Bildschirmbreite gibt). Eine Zahl, die nur die Haelfte ihrer Herkunft nennt, geht beim naechsten Mal wieder daneben. DIE MASKE IST LANG GEBLIEBEN, obwohl das Feld breiter ist: Bei Band 53 Prozent, wo der Text endet, ist das Foto erst zu 22 Prozent da. Unter der Schrift liegt damit weiterhin im Wesentlichen Farbe und kein Bild - Claras Zusatz zum Startseiten-Vorbild vom 13.10.2026 gilt unveraendert. Das Foto wird dort sichtbar, wo der Text aufgehoert hat. */ .seitenband--kits .sb-bild{width:56%} .seitenband--kits .sb-bild img{object-position:50% 42%; -webkit-mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.22) 16%,rgba(0,0,0,.60) 38%,rgba(0,0,0,.90) 68%,#000 92%); mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.22) 16%,rgba(0,0,0,.60) 38%,rgba(0,0,0,.90) 68%,#000 92%)} .seitenband--kits .sb-bild::after{content:"";position:absolute;inset:0; background:linear-gradient(to right,rgba(51,49,45,.42) 0,rgba(51,49,45,.20) 38%, rgba(51,49,45,.06) 72%,rgba(51,49,45,.02) 100%)} /* Die Spalte traegt ihre Polsterung jetzt selbst - das Band ist ein Flexkasten, der seinen Inhalt senkrecht mittig stellt, und eine Polsterung am Band wuerde die Mitte verschieben. */ /* width:100% IST HIER NICHT SCHMUECK, SONDERN NOETIG (Meldung Claras 13.10.2026: "bei Kits im Header steht der Titel jetzt irgendwie in der Mitte, mach das wieder linksbuendig"). DAS BAND IST SEIT HEUTE EIN FLEXKASTEN - nur so steht sein Inhalt senkrecht mittig. Ein Flexkind nimmt aber die Breite seines INHALTS, nicht die der Spalte; .wrap hat margin-inline:auto, und ein schmaler Kasten mit auto-Raendern rutscht in die Mitte. Der Text blieb darin linksbuendig, stand aber als Block mittig - und sieht damit zentriert aus. Mit voller Breite ist die Spalte wieder die Spalte. */ .seitenband--kits > .wrap{width:100%;padding-top:64px;padding-bottom:68px} /* Der Text endet, bevor das Foto beginnt. 54 % statt der 52 % aus der vollbreiten Fassung: Das Bild sitzt jetzt erst ab 54 %, davor ist blanker Grund. */ .seitenband--kits h1,.seitenband--kits h2,.seitenband--kits .sec-sub{max-width:min(50ch,54%)} /* BEIDE IM HELLEN TON DES HAUSES (13.10.2026, Vorgabe Claras in zwei Schritten: erst "den Text links in weiss, sodass man es besser lesen kann", dann die Praezisierung "ich meine nicht den Titeltext, der darf in dem hellen Ton #EFE6D8 bleiben, aber der beschreibende Text soll in dem gleichen Ton sein: #EFE6D8"). GEMEINT WAR ALSO NICHT WEISS, SONDERN GLEICHHEIT. Die Unterzeile stand mit #D7CCBC eine Stufe leiser als die Ueberschrift - und sie ist der Teil, der wirklich gelesen wird. Jetzt tragen beide denselben Ton; der Unterschied zwischen ihnen kommt aus Groesse und Gewicht, nicht aus der Farbe. */ .seitenband--kits h1,.seitenband--kits h2, .seitenband--dunkel h1,.seitenband--dunkel h2{color:#EFE6D8} /* section.land DAVOR, UND DAS IST DER GANZE PUNKT (berichtigt am 13.10.2026, nachdem Clara denselben Satz ein zweites Mal gemeldet hat). Die Zeile stand schon auf #EFE6D8 und blieb trotzdem dunkel: "section.land .sec-sub" setzt weiter oben color:var(--graphit) und wiegt (0,2,1); ".seitenband--kits .sec-sub" wiegt (0,2,0) und verliert. Mit section.land davor sind es (0,3,1). DIE UEBERSCHRIFT WAR NIE BETROFFEN: Fuer sie gibt es keine Farbregel im Theme, sie erbt den Ton vom Band - deshalb sah sie von Anfang an richtig aus und der Satz darunter nicht. DAS IST DIE DRITTE AUFLAGE DESSELBEN FEHLERS in diesem Projekt (Heizkosten-Rechner-Titel am 12.10., Kit-Kacheln am 01.10.). Merksatz: Wer in section.land eine Farbe oder Groesse setzt, muss nachsehen, ob section.land sie schon setzt. */ section.land.seitenband--kits .sec-sub, section.land.seitenband--kits .sb-tagline, section.land.seitenband--dunkel .sec-sub, section.land.seitenband--dunkel .sb-tagline{color:#EFE6D8} /* IN SAND UND NICHT IN GELB, obwohl Gelb die Akzentfarbe ist: Clara hat die Ueberschrift darunter inzwischen mit der gelben Marke versehen ("Vier Kits."). Zwei Gelbs uebereinander - eines als Schrift, eines als Flaeche - nehmen einander das Gewicht, und die Marke ist das lautere von beiden. Die Oberzeile ist die kleinste Stufe im Kopf; sie ordnet ein, sie ruft nicht. */ .seitenband--kits .appeyebrow, .seitenband--dunkel .appeyebrow{color:var(--sand-deep);font-family:var(--mono);font-size:12px; font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin:0 0 12px} /* Eine haarfeine Kante nach unten, in Messing: Sie schliesst das dunkle Band zur hellen Seite hin ab, statt es abreissen zu lassen. */ .seitenband--kits,.seitenband--dunkel{border-bottom:3px solid var(--bernstein)} /* ===== DER AUSSCHNITT DES ABLAUF-FOTOS (15.10.2026) ========================== Vorgabe Claras: "beim Header in Ablauf das Bild hoeher setzen, sodass die Waermepumpe drauf ist." NACHGEMESSEN, NICHT GESCHAETZT: Auf IMG_20261010_173755.jpg (2296 x 4080) steht das Geraet zwischen 42 und 64 Prozent der Bildhoehe, seine Mitte liegt bei 53. object-position 50% 53% legt genau diesen Punkt in die Mitte des Ausschnitts - das Bild rutscht damit nach oben, und sichtbar wird der Bereich darunter. DIE ZAHL GEHOERT ZUM FOTO UND NICHT ZUR SEITE. Am 15.10.2026 sind die Bilder von Ablauf und Rechner getauscht worden; mit ihnen ist diese Zahl gewandert (vorher 59 fuer IMG_20261011_114438.jpg, dessen Geraet zwischen 46 und 72 Prozent steht). Wer das naechste Mal tauscht und sie stehen laesst, schneidet das Geraet an. DAS ALLEIN HAETTE NICHT GEREICHT. Das Band war so hoch wie sein Inhalt: Titel, zwei Zeilen Text und die Polsterung, zusammen rund 250 Punkte. Die Bildspalte ist 46 Prozent breit, ein hochkantes Foto wird darin auf etwa die vierfache Bandhoehe skaliert - zu sehen waren also rund 21 Prozent der Bildhoehe. Das Geraet braucht 26. Es haette also mittig im Ausschnitt gestanden und waere oben und unten angeschnitten gewesen. DESHALB EINE MINDESTHOEHE, und zwar in vw: Bildbreite und Bandhoehe wachsen damit gemeinsam, der sichtbare Anteil bleibt auf jeder Bildschirmbreite bei rund 30 Prozent - also mehr als die 26, die das Geraet braucht. Mit einer festen Pixelzahl waere der Anteil auf einem breiten Monitor wieder zu klein geworden. FLEXKASTEN UND width:100% AM .wrap: Dieselbe Kombination wie beim Kits-Band, und aus demselben Grund - ohne die Breite nimmt das Flexkind die Breite seines INHALTS, und die Spalte mit margin-inline:auto rutscht in die Mitte. Der Text saehe dann zentriert aus. Die Polsterung wandert mit ans .wrap, sonst verschoebe sie die senkrechte Mitte. NUR DIESE EINE SEITE: Das Foerderungs-Band traegt dieselbe Variante, aber ein anderes Bild (ein Laptop-Mockup) - fuer das waere beides falsch. */ /* UMBRUCH NACH "BAUTEILE:" (15.10.2026, Vorgabe Claras: "bei dem Titel bei Bauteile einen Umbruch nach Bauteile machen, sodass 'individuell anpassbar' immer in einer Zeile steht, mobile und Desktop"). DER TITEL HEISST "Bauteile: *Individuell anpassbar*", und die Sternchen machen den zweiten Teil zur gelben Marke - er steckt also ohnehin schon in einem eigenen Element. display:block daran bricht die Zeile genau dort, und zwar unabhaengig von der Fensterbreite: Vorher entschied der Zeilenumbruch, wo Platz war, und auf mittleren Breiten stand "Individuell" oben und "anpassbar" allein darunter. ueber data-seite UND NICHT ueber .h1-accent allgemein: Dieselbe Marke steht auf anderen Seiten mitten im Satz (auf der Ergebnisseite zum Beispiel "Zu deinem Haus passt KEINE unserer Waermepumpen"). Ein Umbruch an der Marke selbst wuerde die zerlegen - dieselbe Ueberlegung wie bei .erg-kitname. */ /* width:fit-content IST HIER DER GANZE PUNKT (berichtigt am 15.10.2026, Meldung Claras: "bei Bauteile im Titel ist die gelbe Markierung hinter 'individuell anpassbar' ploetzlich laenger als der Text"). display:block allein bricht zwar die Zeile, macht die Marke aber zu einem Kasten ueber die volle Breite der Ueberschrift - und die gelbe Flaeche ist der Hintergrund dieses Kastens, lief also bis zum rechten Rand. Mit fit-content schrumpft der Block auf seinen Inhalt und bleibt trotzdem ein Block, bricht also weiterhin um. Ein inline-block haette die Flaeche richtig gehalten und nicht umgebrochen - beides zusammen gibt nur diese Kombination. */ .seitenband[data-seite="bauteile"] h1 .h1-accent, .seitenband[data-seite="bauteile"] h2 .h1-accent{display:block;width:fit-content} .seitenband[data-seite="ablauf"] .sb-bild img{object-position:50% 53%} section.land.seitenband[data-seite="ablauf"]{min-height:clamp(300px,25vw,400px); padding:0;display:flex;align-items:center} .seitenband[data-seite="ablauf"] > .wrap{width:100%;padding-top:44px;padding-bottom:48px} @media(max-width:768px){ /* Auf dem Telefon steht das Bild ohnehin oben ueber die volle Breite und hat seine eigene Hoehe; Flexkasten und Mindesthoehe stoeren dort nur. Der verschobene Ausschnitt bleibt - er steckt am Bild, nicht am Band, und passt auch im hohen Telefon-Kasten. */ section.land.seitenband[data-seite="ablauf"]{padding:0 0 34px;display:block;min-height:0} .seitenband[data-seite="ablauf"] > .wrap{padding-top:0;padding-bottom:0} } @media(max-width:768px){ /* DIE UEBERBLENDUNG NACH UNTEN WAR ABGESCHALTET - DAS WAR DIE HARTE KANTE (14.10.2026, Meldung Claras: "bei mobile ist der Header bei Kits jetzt kein fliessender Uebergang. Mach dies bitte wie es vorher war, nur mit dem Unterschied, dass es schwarz und nicht grau ist - und halt die Veraenderung des Designs des Titels - nur bei mobile"). WAS HIER SCHIEFGING: Auf dem Telefon bedeutet .sb-bild::after etwas ANDERES als auf dem Desktop. Oben ist es der Schleier ueber dem Foto, unten die Aufloesung des Bildes in den Grund - zwei Aufgaben, ein Name. Diese Zeile hat den Schleier abschalten wollen und hat dabei die Aufloesung mit erwischt. Seitdem endet das Foto auf dem Telefon mit einer Kante. SIE KOMMT ZURUECK, ABER IN DER FARBE DIESES BANDES. Die allgemeine Regel loest nach var(--sand) auf - richtig fuer die fuenf hellen Baender, falsch fuer dieses eine dunkle: Das Foto liefe in einen beigen Streifen, unter dem schwarzer Grund beginnt. Mit var(--ink) verschwindet es in genau dem Ton, der darunter weitergeht. DER SCHLEIER BLEIBT TROTZDEM WEG: Er steckte in derselben Regel und ist mit ihr entfallen, weil er auf dem Telefon nichts zu tun hat - dort liegt kein Text ueber dem Bild, sondern darunter. */ /* Die Regel, die das hier richtigstellt, steht NICHT hier, sondern unten direkt hinter der allgemeinen - sonst waere sie wirkungslos: ".seitenband.hat-bild .sb-bild::after" wiegt drei Klassen, ".seitenband--kits .sb-bild::after" nur zwei. Ein Medienblock aendert daran nichts. Dieselbe Falle wie beim Kits-Kopfband am 13.10., bei den Kit-Kacheln am 01.10. und beim Heizkosten-Rechner am 12.10. */ /* Titel und Unterzeile behalten ihren Sandton, auch ueber dem Bild - die allgemeine Regel stellt sie bei Baendern mit Bild auf Weiss. Auf diesem Band gehoeren sie zum Entwurf vom 13.10. und nicht zur Vorlage der hellen Baender. */ section.land.seitenband--kits.hat-bild h1, section.land.seitenband--kits.hat-bild h2{color:#EFE6D8} .seitenband--kits .appeyebrow{margin-bottom:8px} /* Auf dem Telefon steht das Bild ohnehin oben ueber die volle Breite und hat seine eigene Hoehe (--sb-hoehe), und der Text steht darunter. Der Flexkasten und die Mindesthoehe von oben wuerden dort nur stoeren: Sie stellten den Inhalt senkrecht mittig in einen Kasten, der ohnehin genau so hoch ist wie sein Inhalt. */ section.land.seitenband.seitenband--kits{padding:0 0 34px;display:block;min-height:0} .seitenband--kits > .wrap{padding-top:0;padding-bottom:0} .seitenband--kits h1,.seitenband--kits h2,.seitenband--kits .sec-sub{max-width:100%} } .seitenband.hat-bild .wrap{position:relative;z-index:1} .seitenband.hat-bild h1,.seitenband.hat-bild h2,.seitenband.hat-bild .sec-sub{max-width:min(54ch,58%)} /* DIE UNTERZEILE LAEUFT BREITER ALS SONST - in beiden Koepfen gleich (Vorgabe 22.09.2026: "bei dem Kit-Reiter ist der Text unter dem Header so gequetscht, zieh ihn genauso lang wie beim Rechner"). section.land .sec-sub deckelt auf 46 Zeichen. Das passt fuer die kurzen Unterzeilen mitten auf der Seite; im Kopfband stehen aber teils lange Absaetze - der Kits-Text hat rund 390 Zeichen und lief damit ueber neun schmale Zeilen. BEIDE KOEPFE IN EINER REGEL, damit sie nicht wieder auseinanderlaufen: Der Rechner-Kopf stand seit heute frueh auf 54 Zeichen, die neuen Baender auf den geerbten 46 - genau dieser Unterschied ist aufgefallen. Jetzt gibt es die Zahl einmal. */ section.land.seitenband .sec-sub, section.land.rechner-kopf-block .sec-sub{max-width:54ch} /* Der Abschnitt NACH dem Band ruecken naeher heran. Volle 82px plus die 78px des Bandes waeren 160px Luft zwischen Ueberschrift und dem, was sie ankuendigt. Die drei Abschnitte, die frueher padding-top:0 als Inline-Stil trugen, haben ihn dabei verloren - sonst haette der Inline-Wert diese Regel geschlagen und der Inhalt klebte am Band. */ section.land.rechner-kopf-block{padding:74px 0 78px;text-align:left} /* .dark zentriert seine Ueberschriften (margin:0 auto) - richtig fuer den End-CTA, wo ein einzelner Satz steht. Hier stehen Ueberschrift, Unterzeile und Knopf untereinander und lesen sich an einer gemeinsamen linken Kante ruhiger. */ section.land.dark.rechner-kopf-block h1{margin-left:0;margin-right:0;margin-top:0} /* Die Unterzeile traegt sonst var(--graphit) - auf dunklem Grund waere das kaum zu lesen. Etwas abgeblendet, damit sie der Ueberschrift nicht die Aufmerksamkeit nimmt. */ section.land.dark.rechner-kopf-block .sec-sub{color:#EFE6D8;opacity:.86} /* KLEINER KNOPF. .btn ist ein Block ueber die volle Breite - richtig in der Kaufbox, wo er die letzte Handlung der Spalte ist. Hier soll er nur so breit sein wie seine Beschriftung und unter dem Text stehen, nicht als Balken quer durch den Abschnitt. ALS EIGENE KLASSE, seit es ihn zweimal gibt (22.09.2026): im Kopfband der Rechnerseite und bei "Zwei Wege zum passenden Kit" auf der Kits-Seite. Vorher hiess die Regel .rechner-kopf-cta und haette fuer den zweiten Ort kopiert werden muessen. */ .btn-klein{display:inline-block;width:auto;font-size:15px;padding:11px 20px;margin-top:22px} /* WAS DER RECHNER DIR ZEIGT - drei Punkte nebeneinander, direkt unter dem Formular. Drei gleiche Spalten, weil die drei gleichrangig sind: Groesse, Foerderung, Preis. Untereinander laese sich das als Reihenfolge. */ /* Sie steht jetzt UEBER dem Formular (Nachtrag 22.09.2026), also zwischen zwei Dingen, die eng zusammengehoeren - Ueberschrift und Rechner. Entsprechend knapp gesetzt: 34px ueber der Reihe, 8px darunter - so galt es, solange der Kopf ein blosser Textanfang war. SEIT DER KOPF EIN ABGESETZTER BAND IST, braucht es mehr: 34px liessen die Reihe am dunklen Rand kleben, als gehoerte sie noch dazu. 54px setzen sie sichtbar davor. Mit den 82px eines normalen .land waere sie dagegen vom Formular abgeschnitten, auf das sie hinfuehrt. */ /* MEHR LUFT UNTER "WAS DER RECHNER DIR ZEIGT" (02.10.2026, Vorgabe Claras: "bei 'Was der Rechner dir zeigt' unten mehr Leerraum lassen"). 8px WAREN FRUEHER RICHTIG: Darunter folgte der Kopf des Werkzeugs auf demselben beigen Grund, beide lasen sich als ein Block, und der Abstand kam aus dessen Polsterung. SEIT HEUTE STEHT DER RECHNER AUF WEISS (Vorgabe desselben Tages), und damit ist aus dem Uebergang eine Farbkante geworden. Die 68px Polsterung gehoeren jetzt der WEISSEN Flaeche - auf der beigen endet der Text acht Pixel vor der Kante. Was vorher ein gemeinsamer Abstand war, sieht jetzt nach einem Schnitt aus. MITWACHSEND, bei rund 1360px 60px - dieselbe Groessenordnung wie auf der weissen Seite der Kante, damit die Luft oberhalb und unterhalb der Naht gleich wirkt. */ section.land.rechner-zeigt{padding-top:30px;padding-bottom:clamp(38px,4.4vw,72px)} /* DIE ANSAGE VOR DEM FORMULAR (22.09.2026). Sie schliesst die Luecke, die zwischen den drei Punkten und der ersten Frage zu eng war: 8px vom Abschnitt darueber plus 28px, die #rechnerCalc.rechner-seite mitbringt, waren zusammen 36px - zu wenig fuer den Uebergang von "was du bekommst" zu "jetzt tu etwas". Die 64px hier stehen UEBER der Ansage, nicht zwischen ihr und dem Formular: Sie gehoert zu dem, was sie ankuendigt, und soll nah daran stehen. Die 28px darunter bleiben. */ /* MEHR LUFT VOR DEM RECHNER (02.10.2026, Vorgabe Claras: "mehr Abstand zwischen 'Was der Rechner dir zeigt' und dem Rechner selber"). Der Kopf des Werkzeugs sass mit 30px fast auf der Punktereihe darueber; seit die mittig steht und groessere Titel traegt, lesen sich die beiden wie ein Block. Mitwachsend, bei rund 1360px sind es 68px. */ section.land.rechner-toolkopf{padding:clamp(44px,5vw,80px) 0 0} /* Dieselbe kleinere Stufe wie bei der Reihe darueber - auf dieser Seite traegt die h1 die grosse. Siehe die Begruendung bei section.land.rechner-zeigt h2. */ section.land.rechner-toolkopf h2{font-size:clamp(20px,2.4vw,27px);line-height:1.2;margin-top:0;max-width:40ch} /* DIE KLEINE ZEILE UEBER DER UEBERSCHRIFT (12.10.2026, Vorgabe Claras: "so wie beim Heizkosten-Rechner"). Dieselben Werte wie dort (.bwp-rechner .eyebrow): 11px, fett, gesperrt, in Versalien - die beiden Rechner stehen auf einer Seite und sollen als Paar gelesen werden. In --muted und nicht in --gruen wie .hero-eyebrow: Gruen ist auf dieser Seite das Zeichen fuer eine Empfehlung; eine Rubrik ist keine. */ .rechner-toolkopf .rt-ober{font-family:var(--mono);font-size:11px;font-weight:700; letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 6px} .rt-sub{font-size:15px;color:var(--graphit);margin-top:6px;max-width:54ch;line-height:1.5} /* DIE H2 DEUTLICH KLEINER ALS DIE H1 DARUEBER (22.09.2026, Vorgabe: "das ist h2 und das andere h1"). Sie waren vorher GLEICH gross, und zwar beide 46px: Die Regel "section.land h1,section.land h2" fasst sie zusammen, und sie schlaegt die .art-title der Ueberschrift (zwei Elemente plus Klasse gegen eine Klasse allein). Die Rangfolge der Seite war damit nicht zu sehen - genau das, was aufgefallen ist. Behoben wird es hier und nicht an der gemeinsamen Regel: Die gilt fuer die ganze Seite, wo h1 und h2 nie zusammen in einem Abschnitt stehen. Auf der Rechnerseite tun sie das. Rund 60 Prozent der Ueberschriftgroesse - weit genug auseinander, um eine Stufe zu sein, nah genug, um zusammenzugehoeren. */ /* AN .punktereihe UND NICHT AN .rechner-zeigt: Seit dem 22.09.2026 gibt es zwei solche Reihen auf der Seite ("Was der Rechner dir zeigt" ueber dem Formular, "Warum sich das lohnt" darunter). Beide kommen aus demselben Schnipsel; die Schriftstufe gehoert deshalb an die gemeinsame Klasse, sonst braeuchte jede neue Reihe eine eigene Zeile. */ /* GROESSER (02.10.2026, Vorgabe Claras: "bei Rechner mach die Titel groesser"). Die beiden Reihen auf der Rechnerseite trugen mit hoechstens 27px die kleinste Ueberschrift der Seite - kleiner als die Abschnittstitel ueberall sonst (bis 46px) und damit kaum als Kapitelanfang zu erkennen. Jetzt bis 36px; die Untergrenze steigt mit, damit es auf dem Telefon nicht auseinanderfaellt. */ section.land.punktereihe h2{font-size:clamp(24px,3.1vw,36px);line-height:1.18;margin-top:0;max-width:40ch} /* BEIDE PUNKTEREIHEN STEHEN MITTIG, MITSAMT IHREN DREI PUNKTEN (02.10.2026, Vorgabe Claras: "setze 'Was der Rechner dir zeigt' mit dem Textinhalt mittig", kurz darauf "auch das 'Warum sich das lohnt' auch mittig machen"). ZUERST STAND HIER NUR .rechner-zeigt, ausdruecklich NICHT .punktereihe allgemein - die zweite Reihe war nicht genannt, und sie stillschweigend mitzunehmen waere eine Entscheidung gewesen, die mir nicht zusteht. Mit der zweiten Vorgabe gilt es fuer beide, und dann ist die allgemeine Klasse auch die richtige Stelle: Eine dritte Reihe derselben Bauform steht spaeter von selbst richtig. DIE UEBERSCHRIFT BRAUCHT AUTOMATISCHE AUSSENABSTAENDE: Sie ist auf 40 Zeichen begrenzt, und text-align allein zentriert nur die Zeilen INNERHALB dieses Kastens - der Kasten selbst bliebe links. Dieselbe Stelle, an der das heute schon mehrfach aufgefallen ist. */ section.land.punktereihe{text-align:center} section.land.punktereihe > .wrap > h2{margin-left:auto;margin-right:auto} /* Die zweite Reihe steht UNTER dem Formular und beginnt einen neuen Gedanken - deshalb mehr Luft darueber als bei der ersten, die zum Formular hinfuehrt. Unten null: Der Textabschnitt danach bringt seinen Abstand selbst mit. */ /* MEHR LUFT ZUM ABSCHLUSS (02.10.2026, Vorgabe Claras: "zwischen 'Warum sich das lohnt' und 'Rechner-Abschluss' bitte mehr Abstand machen - das machst du wahrscheinlich, indem du mehr Leerraum bei 'Warum sich das lohnt' einfuegst"). GENAU SO IST ES: Der Fussabstand stand hier auf 0. Das war richtig, solange darunter noch ein schlichter Textblock folgte, der zum selben Gedanken gehoerte - seit dem 02.10.2026 steht dort das dunkle Band des Abschlusses, eine eigene Flaeche mit eigener Farbe. Zwischen zwei so verschiedenen Dingen braucht es eine Trennung, sonst beginnt das Band unmittelbar unter der letzten Textzeile. MITWACHSEND statt fest: bei rund 1360px sind es 60px. Dieselbe Form wie bei den Aufruf-Baendern - ein fester Wert waere auf dem Telefon zu viel. */ section.land.rechner-lohnt{padding-top:30px;padding-bottom:clamp(38px,4.4vw,72px)} .rz-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:28px} /* Das Icon traegt die Farbe des Textes (currentColor im Schnipsel) und wird hier gefaerbt - nicht im Schnipsel selbst, damit derselbe Satz an anderer Stelle anders aussehen darf. */ .rz-icon{width:30px;height:30px;color:var(--gruen);display:block} /* DIE ICONS RUECKEN MIT (02.10.2026, Vorgabe Claras: "bei Rechner auch die Icons mittig machen"). text-align AN DER REIHE ERREICHT SIE NICHT: Ein Icon ist ein Block mit fester Groesse (30x30), kein Text in einer Zeile - es bleibt links stehen, waehrend Titel und Satz darunter schon mittig standen. Genau dasselbe war heute frueh bei den Nummern-Kaestchen der drei Gruende auf der Startseite der Fall. NUR IN DER PUNKTEREIHE: Dieselbe Klasse koennte spaeter anderswo stehen; hier ist die Mitte eine Entscheidung dieser beiden Reihen und keine Eigenschaft des Icons. */ section.land.punktereihe .rz-icon{margin-left:auto;margin-right:auto} .rz-titel{font-weight:800;font-size:16.5px;margin-top:13px;line-height:1.25} .rz-text{font-size:15px;color:var(--graphit);margin-top:5px;line-height:1.5} /* .rechner-texte ist am 22.09.2026 entfallen: Von den drei Textabschnitten unter dem Rechner ist keiner mehr uebrig - alle sind in knappere Formen gewandert, zuletzt "Was der Rechner nicht ersetzt" in einen Nebensatz der Ansage. Der Block, der sie zusammenhielt, hat damit keinen Inhalt mehr. .rechner-text SELBST BLEIBT: Die beiden weiterfuehrenden Abschnitte benutzen ihn, und die Abstandsregel darunter greift dort genauso. */ .rechner-text + .rechner-text{margin-top:52px} /* Dieselbe Stufe wie bei der Reihe darueber - aus demselben Grund: Auch diese h2 stand bei 46px und damit so gross wie die Ueberschrift der Seite. Zwei verschiedene h2-Groessen auf einer Seite waeren eine zweite Rangfolge, die niemand gemeint hat. */ /* NICHT MEHR AN .rechner-texte GEBUNDEN: .rechner-text kommt seit dem 22.09.2026 in zwei Abschnitten vor - in den weiterfuehrenden Verweisen und im Textabschnitt darunter. Die Schriftstufe gehoert an den Block selbst, sonst braeuchte jeder neue Ort eine eigene Zeile. section.land davor, damit sie die gemeinsame h1/h2-Regel der Seite schlaegt. */ section.land .rechner-text h2{font-size:clamp(20px,2.4vw,27px);line-height:1.2;margin-top:0;max-width:40ch} /* Die beiden weiterfuehrenden Abschnitte. Oben Luft wie bei der Punktereihe darueber, unten null - der Textabschnitt danach bringt seinen Abstand selbst mit. */ section.land.rechner-verweise{padding-top:30px;padding-bottom:0} /* DER ABSCHLUSS DER RECHNERSEITE SIEHT AUS WIE SEIN ZWILLING AUF DER STARTSEITE (02.10.2026, Vorgabe Claras: "so machen wie auch auf der Startseite, also mit dem Bildhintergrund und mittig"). DAS BAND UND DAS BILD KOMMEN VON .land.dark UND .cta-hg, also von denselben Regeln wie bei billigerwaermepumpe-bauteile-cta - dort ist nichts zu tun. DIE MITTE IST DIE EINZIGE EIGENE ZEILE, und sie ist noetig: Auf der Startseite steht der Zwilling mittig, weil die ganze Seite es tut (body.bwp-mittig am ). Die Rechnerseite traegt diese Kennung nicht - ohne diese Regel stuende derselbe Abschnitt hier linksbuendig und saehe eben NICHT aus wie auf der Startseite. text-align reicht fuer Ueberschrift und Zeile; der Knopf traegt .btn.mid und ist von Haus aus mittig. */ section.land.rechner-cta{text-align:center} section.land.rechner-cta > .wrap > h2{max-width:100%;margin-left:auto;margin-right:auto} section.land.rechner-cta > .wrap > p{max-width:min(820px,100%);margin-left:auto;margin-right:auto} /* Der Verweis unter dem Satz, auf eigener Zeile. Gleiche Form wie der Verweis unter den Fragen am Seitenende - kein zweites Aussehen fuer dieselbe Sache. */ .rt-link{display:inline-block;margin-top:12px;font-weight:700;font-size:15px; color:var(--gruen);text-decoration:none} .rt-link:hover{text-decoration:underline;text-underline-offset:4px} .rechner-text p{font-size:17px;color:var(--graphit);margin-top:14px;max-width:62ch;line-height:1.55} @media(max-width:768px){ section.land.seitenband{padding:46px 0 50px} /* AUF DEM TELEFON LIEGT DAS BILD HINTER DEM TEXT (28.09.2026, Vorgabe Claras: "wenn es eins gibt, stelle das bitte auch in der mobilen Version dar - hier muss es nicht daneben sein oder danach kommen, sondern darf als Hintergrund sein. Mach das Bild aber nicht fully sichtbar, sondern verdunkle es ein bisschen, sodass man die Font des Headers noch gut erkennt"). Bis heute war es hier ausgeblendet, und das aus gutem Grund: Als 46 Prozent breite Spalte blieben dem Text bei 400px noch 232px - drei Woerter je Zeile, und vom Bild ein Streifen ohne Motiv. Als Hintergrund gibt es dieses Problem nicht: Text und Bild teilen sich keine Breite mehr, sie liegen uebereinander. DIE SEITLICHE MASKE FAELLT WEG. Sie blendet das Bild nach links aus - richtig, solange links der Text steht. Ueber die volle Breite gezogen liesse sie die linke Haelfte leer und die rechte hart abbrechen. DER SCHLEIER MACHT DIE SCHRIFT HELL, nicht dunkel. Claras Wort war "verdunkeln", ihr Ziel die Lesbarkeit - und die Schrift des Bandes ist dunkel auf Sand. Ein dunkler Schleier unter dunkler Schrift haette genau das Gegenteil bewirkt. Deshalb kippt hier beides zusammen: Grund dunkel, Schrift weiss. Auf dem Bildschirm ist das der bekannte Bild-Kopf, und die 58 Prozent Deckung reichen auch bei hellen Motiven. NUR HIER, NICHT AUF DEM DESKTOP: Dort steht das Bild neben dem Text, nicht darunter - ein Schleier waere dort eine Verschlechterung ohne Anlass. */ /* DIE FORM KOMMT AUS CLARAS SCREENSHOT (otinga.de, 28.09.2026): ein hohes Bild ueber die volle Breite, der Text unten drin, gross und weiss. Der erste Versuch legte das Bild nur flach hinter den bisherigen Kopf - richtig in der Sache, aber es blieb ein Textband mit Tapete. Hier traegt das Bild den Kopf. DIE HOEHE KOMMT AUS DER BREITE, nicht aus dem Text: min(108vw, 560px) ergibt auf dem Telefon ein stehendes Format wie im Vorbild und deckelt auf grossen Schirmen, bevor der Kopf den ganzen Bildschirm einnimmt. Der Text sitzt unten (align-items:flex-end) - dort, wo bei Fotos am wenigsten Motiv liegt und der Verlauf am dunkelsten ist. VERLAUF STATT FLAECHIGEM SCHLEIER: Gleichmaessig abgedunkelt verliert das Bild oben sein Motiv, ohne dass es unten heller wird, wo die Schrift steht. Der Verlauf laesst die obere Haelfte frei und wird genau dort dicht, wo gelesen wird - im Vorbild ist es dieselbe Bauform. */ /* NUR DER TITEL LIEGT IM BILD (28.09.2026, Vorgabe Claras: "nur den Titel der Seite dort im unteren Bereich des Bildes darstellen und den Untertitel-Text direkt unter das Bild, aber in einer kleineren Schriftgroesse als jetzt"). Davor lag der ganze Kopf im Bild - Titel UND Fliesstext, alles weiss auf dem Verlauf. Bei den langen Unterzeilen dieser beiden Seiten (rund 200 Zeichen) hiess das: fuenf Zeilen heller Text ueber einem Foto, genau in dem Bereich, in dem noch Motiv liegt. Der Titel traegt das, ein Absatz nicht. DAS BILD ENDET AM KASTEN DES TITELS: Beide tragen dieselbe Hoehe, das Bild als height, der Kasten als min-height. Der Text darunter faellt damit automatisch auf den Sandgrund - es braucht keine zweite Stelle, an der eine Hoehe steht. min-height UND NICHT height: Eine Ueberschrift ueber drei Zeilen soll den Kasten wachsen lassen duerfen. Sie waechst dann aus dem Bild heraus - bei 375px Bildhoehe gegen rund 120px Titel ist das reichlich Luft, und ein abgeschnittener Titel waere schlimmer. */ /* DER UEBERGANG ZUM BAND (28.09.2026, Vorgabe Claras: "ich moechte einen Uebergang zwischen Bild und beigem Header-Element, sodass zwar der Titel noch im unteren Bereich des Bildes steht, aber der Untertitel nicht so aussieht, als waere er komplett vom Header-Bild abgeschnitten. Es soll aber auch nicht auf dem Bild liegen, weil das dann schlecht erkennbar ist - also so ein Mittelding, ein leicht transparenter Farbverlauf"). Vorher endete das Bild mit einer harten Kante, und der Text begann eine Zeile darunter auf Sand. Zwei Bloecke, die nichts miteinander zu tun hatten. ZWEI VERLAEUFE UEBEREINANDER, jeder mit einer Aufgabe: ::before dunkelt ab, damit der weisse Titel auf dem Foto lesbar bleibt - und hoert dort auf, wo der zweite anfaengt, sonst wuerde er ihn truebe faerben. ::after loest das Bild auf den letzten 120px in genau die Sandfarbe des Bandes auf. Wo der Text beginnt, ist der Grund deckend - er liegt also NICHT auf dem Bild, aber es gibt auch keine Kante mehr. DER TITEL RUECKT UEBER DIE VERLAUFSZONE: Seine Polsterung unten ist die Hoehe des Verlaufs plus ein wenig. Ohne das saesse er mitten in der Aufloesung - weiss auf hellem Sand, also genau der Fall, den die Vorgabe ausschliesst. EINE ZAHL AN EINER STELLE: --sb-verlauf steht in allen drei Regeln. Wer den Uebergang weicher will, aendert sie einmal. */ /* DIE HOEHE DES BILDES IST JETZT AUCH EINE ZAHL (28.09.2026, Vorgabe Claras: "beim Header ist jetzt ueber dem Text sehr viel Platz, schiebe bitte den Titeltext und damit alles andere nach oben - bei Mobile"). Der Titel sitzt unten im Bild, der Text darunter; ueber dem Titel stand damit die ganze restliche Bildhoehe. Bei 96vw waren das auf einem 390er Schirm rund 250px Foto, bevor ueberhaupt ein Wort kam - und alles Weitere begann entsprechend spaet. EIN NIEDRIGERES BILD HEBT ALLES: Titel, Text und der ganze Abschnitt darunter ruecken um dieselbe Strecke hoch, ohne dass an ihren Abstaenden zueinander etwas geaendert werden muss. Genau das war die Bitte - der Titel UND damit alles andere. 78vw statt 96vw: Das Bild bleibt ein stehendes Format und traegt sein Motiv, nimmt aber rund ein Fuenftel weniger Hoehe. Der Deckel von 380px greift auf breiteren Telefonen. */ section.land.seitenband.hat-bild{padding:0 0 34px;--sb-hoehe:min(78vw,380px); --sb-verlauf:120px;--sb-textzug:56px;--sb-abstand:34px} /* DER TEXT LIEGT UEBER BEIDEN VERLAEUFEN (Vorgabe Claras 28.09.2026: "der Text selber soll nicht transparent sein, sondern in voller Farbe erscheinen"). Er sah blass aus, weil der Sand-Verlauf tatsaechlich UEBER ihm lag: .sb-bild ist zwar absolut gesetzt, hat aber kein z-index und bildet damit keinen eigenen Stapel - sein ::after mit z-index:2 zaehlt deshalb im selben Stapel wie die Textspalte und schlug deren z-index:1. Die Schrift stand also unter einer halbdurchsichtigen Sandschicht. z-index:3 hebt die Spalte ueber beide Verlaeufe. Am Bild aendert das nichts - die Verlaeufe liegen weiter auf dem Foto, nur eben nicht mehr auf der Schrift. */ .seitenband.hat-bild > .wrap{padding-top:0;z-index:3} /* DER ABSTAND ZWISCHEN UEBERSCHRIFT UND TEXT IST JETZT EINE ZAHL (Vorgabe Claras 28.09.2026: "die Ueberschrift etwas niedriger, sodass ein schoener Abstand zwischen dem Text und der Ueberschrift steht"). Vorher hing die Polsterung am Verlauf (120px + 8) - die Ueberschrift sass also dort, wo die Aufloesung beginnt, und darunter klaffte, was vom Textsprung uebrig blieb: rund 72px. Der Abstand war damit ein Rest aus zwei anderen Werten statt einer Entscheidung. Jetzt steht die Ueberschrift genau --sb-abstand ueber dem Text, egal wie die beiden anderen Werte stehen. Sie rutscht damit in die obere Haelfte der Verlaufszone - dort ist der Grund erst zu einem knappen Viertel Sand, das dunkle Band darunter traegt die weisse Schrift weiterhin. */ .seitenband.hat-bild .sb-kopf{min-height:var(--sb-hoehe);display:flex;flex-direction:column; justify-content:flex-end;padding-bottom:calc(var(--sb-textzug) + var(--sb-abstand))} .seitenband.hat-bild .sb-bild{display:block;left:0;width:auto;bottom:auto; height:var(--sb-hoehe)} .seitenband.hat-bild .sb-bild img{-webkit-mask-image:none;mask-image:none;object-position:center} .seitenband.hat-bild .sb-bild::before{content:"";position:absolute;inset:0;z-index:1; background:linear-gradient(to bottom,rgba(28,26,23,.10) 0,rgba(28,26,23,.18) 40%, rgba(28,26,23,.62) calc(100% - var(--sb-verlauf)),rgba(28,26,23,0) 100%)} /* EIN VERLAUF, EINE MARKE - so wie er vorher war (Vorgabe Claras 28.09.2026: "jetzt hast du mehr vollfarbigen Hintergrund hochgeschoben, das bitte nicht. Dieser Verlauf zwischen dem beigen Block und dem Bildblock war vorher besser"). Zwischendurch stand hier eine zweite Marke, ab der der Grund voll Sand war - damit sollte der Text auf deckendem Grund sitzen. Der Preis dafuer war genau das, was sie nicht will: Die volle Farbe begann 70px frueher, und vom Bild blieb unten weniger uebrig. Die Aufloesung laeuft deshalb wieder gleichmaessig ueber die letzten 120px bis zur Unterkante. Dass der Text auf halbdurchsichtigem Grund beginnt, ist damit gewollt. */ .seitenband.hat-bild .sb-bild::after{content:"";position:absolute;inset:0;z-index:2; background:linear-gradient(to bottom,transparent calc(100% - var(--sb-verlauf)),var(--sand) 100%)} /* DAS DUNKLE BAND LOEST SICH IN SEINEN EIGENEN GRUND AUF (14.10.2026, Meldung Claras: "bei mobile ist der Header bei Kits jetzt kein fliessender Uebergang - mach dies bitte wie es vorher war, nur mit dem Unterschied, dass es schwarz und nicht grau ist"). DIE ZEILE DARUEBER IST FUER FUENF BAENDER RICHTIG und fuer eines falsch: Sie loest das Foto nach var(--sand) auf. Unter den hellen Baendern geht genau dieser Ton weiter, unter dem Kits-Band dagegen var(--ink). Das Foto lief dort in einen beigen Streifen, unter dem unvermittelt Schwarz begann - die Kante, die Clara gemeldet hat. Vorher gab es gar keine Aufloesung: Im Kits-Block weiter oben stand ein display:none, das den Schleier des Desktops abschalten wollte und dabei die Aufloesung des Telefons mit erwischt hat. HIER UND NICHT IM KITS-BLOCK, und mit vier Klassen: Ein Medienblock erhoeht die Spezifitaet nicht, und die allgemeine Regel wiegt drei. Eine Zeile weiter oben im selben Block haette gar nichts bewirkt. */ section.land.seitenband--kits.hat-bild .sb-bild::after, section.land.seitenband--dunkel.hat-bild .sb-bild::after{ background:linear-gradient(to bottom,transparent calc(100% - var(--sb-verlauf)),var(--ink) 100%)} /* Gross wie im Vorbild: Die geerbte Spanne beginnt bei 28px und bleibt dort stehen, weil 4.4vw auf dem Telefon nie greift. Ueber dem Bild darf die Zeile den Platz nehmen. */ .seitenband.hat-bild h1,.seitenband.hat-bild h2{font-size:clamp(32px,9vw,44px);line-height:1.05; color:#fff;margin-top:0} .seitenband.hat-bild .appeyebrow{color:rgba(255,255,255,.8)} /* Unter dem Bild wieder normale Schrift auf Sand - und kleiner als der Rest der Seite (Vorgabe): 15px gegen die geerbten 17. Der Absatz erklaert, er verkuendet nicht. */ /* DER TEXT RUECKT IN DEN UEBERGANG HINAUF - und NUR der Text (Vorgabe: "das Einzige, was du veraendern sollst, ist, dass der Text nicht oben beim beigen Block startet, sondern da, wo schon der Uebergang zwischen dem Bildblock und dem beigen Block ist"). --sb-textzug ist dieser Sprung, nichts weiter: Er verschiebt den Absatz um 56px nach oben in die Verlaufszone. Am Verlauf selbst aendert er nichts - genau das war der Fehler des vorigen Versuchs, der stattdessen die Farbe hochgezogen hat. Auf das ERSTE Geschwister des Titelkastens, nicht auf .sec-sub: Auf Seiten mit Tagline stuende die zuerst, und der Sprung traefe den falschen Absatz. Auf den beiden Seiten mit Bild gibt es heute keine - die Regel haelt trotzdem. */ .seitenband.hat-bild .sb-kopf + *{margin-top:calc(4px - var(--sb-textzug));color:var(--ink)} /* SCHWARZ STATT GRAU IM UEBERGANG (Vorgabe Claras 28.09.2026: "jetzt muss nur noch der Text, der in dem sich ueberschneidenden Abschnitt ist, auch in schwarz gefaerbt werden"). Die Unterzeile traegt sonst --graphit, ein weiches Grau - richtig auf ruhigem Sand, zu wenig auf dem halbdurchsichtigen Verlauf, wo darunter noch das Foto steht. --ink ist die dunkelste Farbe des Themes und hebt sich auch dort ab. Die Farbe steht an der Regel, die den Absatz hochzieht: Beides gehoert zusammen - er ist genau deshalb dunkler, WEIL er im Uebergang sitzt. */ .seitenband.hat-bild .sec-sub{font-size:15px;line-height:1.55} .seitenband.hat-bild h1,.seitenband.hat-bild h2,.seitenband.hat-bild .sec-sub{max-width:54ch} /* Der Abschnitt darunter braucht wieder seinen eigenen Abstand: Das Band bringt unten keinen mehr mit, seit seine Polsterung an der Textspalte haengt. */ section.land.rechner-kopf-block{padding:46px 0 50px} /* Einspaltig: Drei Spalten a rund 100px waeren hier drei abgeschnittene Woerter. */ .rz-grid{grid-template-columns:1fr;gap:26px} section.land.rechner-zeigt{padding-top:22px} section.land.rechner-lohnt{padding-top:22px} section.land.rechner-verweise{padding-top:22px} section.land.rechner-toolkopf{padding-top:22px} .rechner-text + .rechner-text{margin-top:38px} } /* AUF DEM TELEFON EINSPALTIG. Zwei Spalten a 160px waeren dort ein Wortsalat. 760px wie bei .fallrow und .fotorow, damit die Umbruchpunkte der Seite dieselben bleiben. */ @media(max-width:768px){ /* Untereinander: Zwei Spalten a 160px waeren ein Wortsalat. Der Verweis ruecken unter die Ueberschrift, weil daneben kein Platz mehr ist. */ .seitenfaq-liste{flex-direction:column;gap:0} .sf-kopf{display:block} .seitenfaq-mehr{margin-top:12px} section.land.seitenfaq{padding-top:22px;padding-bottom:34px} } /* ---------- FUSSZEILE IN SPALTEN (22.09.2026, Vorbild klekks.com) ---------- Vorher eine einzige Reihe: Copyright links, Rechtslinks rechts, alles in einer Zeile. Jetzt links eine kurze Einordnung, daneben die Verweisspalten, darunter eine schmale Schlusszeile. DIE MARKENSPALTE IST BREITER als die Verweisspalten: Dort steht ein Absatz, in den anderen einzelne Woerter. Gleich breite Spalten haetten den Text in sechs Zeilen gedrueckt, waehrend daneben Platz frei bleibt. FLEX UND NICHT GRID - Fehlerbehebung 22.09.2026. Meine erste Fassung stand auf "grid-template-columns:1.4fr repeat(auto-fit,minmax(150px,1fr))". Das ist UNGUELTIG: auto-fit und auto-fill duerfen nicht mit flexiblen Spuren in derselben Angabe stehen. Der Browser verwirft dann die ganze Zeile, das Raster faellt auf eine Spalte zurueck - und der Fuss stand untereinander statt nebeneinander. Genau so gemeldet. Flex ist hier ohnehin das passendere Mittel: Wie viele Spalten es gibt, entscheidet Liquid - eine Gruppe ohne Verweise wird gar nicht erst ausgegeben. Ein Raster braeuchte dafuer eine feste Spurenzahl und liesse bei drei Spalten eine leere stehen; flex verteilt einfach, was da ist. */ footer{padding:56px 0 44px;color:var(--muted);font-size:13px} /* FARBIGER GRUND, ZWEI FASSUNGEN ZUR ANSICHT (23.09.2026: "gerne auch wieder in so einem beige oder gelb, das moechte ich mir beides einmal anschauen"). Umgeschaltet wird im Theme-Editor am Footer-Abschnitt, Feld "Hintergrund" - kein Code-Wechsel noetig. MEHR POLSTERUNG, SOBALD FARBE DRUNTER LIEGT: Auf Papiergrund ist der Fuss eine Fortsetzung der Seite, mit Farbe wird er ein eigenes Band - und ein Band braucht Rand, sonst sitzt der Text auf der Kante. DIE SCHRIFTFARBEN ZIEHEN MIT. var(--muted) ist ein warmes Grau, das auf Papier ruhig wirkt und auf Gelb absaeuft; auf Farbe traegt darum --graphit bzw. --walnuss. Das gilt auch fuer die Spaltenkoepfe und die Kontur des Widerrufsknopfes, die sonst verschwindet. */ footer.foot-sand,footer.foot-gelb{padding:64px 0 52px} footer.foot-sand{background:var(--sand);color:var(--graphit)} footer.foot-sand a,footer.foot-sand .foot-kopf{color:var(--graphit)} footer.foot-sand .billigerwaermepumpe-widerruf-btn{border-color:var(--sand-deep);color:var(--graphit)} footer.foot-gelb{background:var(--rost);color:var(--walnuss)} footer.foot-gelb a,footer.foot-gelb .foot-kopf{color:var(--walnuss)} footer.foot-gelb .foot-name,footer.foot-gelb a:hover{color:var(--ink)} footer.foot-gelb .billigerwaermepumpe-widerruf-btn{border-color:var(--rost-dark);color:var(--walnuss)} footer.foot-gelb .billigerwaermepumpe-widerruf-btn:hover{border-color:var(--ink);color:var(--ink)} footer .wrap{display:block} .foot-grid{display:flex;flex-wrap:wrap;gap:34px 48px;align-items:flex-start} /* ZAHLARTEN IN DER FUSSZEILE (28.09.2026, aus dem Hero hierher gezogen). Eine Zeile unter den Spalten, abgesetzt durch eine Linie - sie gehoert zu keiner Spalte, sondern zum Shop. Die Zeichen bleiben farbig und klein: Ein ausgegrautes Zahlungslogo liest sich wie "nicht verfuegbar" (Vorgabe 30.07.2026), dezent wird es ueber die Groesse. Dieselbe Regel galt im Hero, sie ist mit umgezogen. currentColor im Rand: Der Fuss traegt je nach Einstellung Sand, Gelb oder Papier. Eine feste Linienfarbe waere auf einem der drei falsch. */ .foot-zahlung{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px; margin-top:30px;padding-top:20px;border-top:1px solid currentColor; border-top-color:color-mix(in srgb, currentColor 22%, transparent)} .foot-zahlung-text{font-size:12.5px;font-weight:600} /* DIESELBE ZEILE AUF DER PRODUKTSEITE, unter dem Preis (29.09.2026, Vorgabe Claras). Eigene Klassen statt der Fuss-Klassen: Dort traegt sie eine Trennlinie und helle Schrift auf dunklem Grund, hier steht sie in der hellen Kaufkarte und braucht nur Abstand nach oben. Das Markup ist trotzdem dasselbe - siehe bwp-zahlarten.liquid. Kleiner und leiser als im Fuss: Sie steht direkt unter dem Preis und soll ihm nicht die Aufmerksamkeit nehmen - dieselbe Ueberlegung wie bei den Zahlarten im Hero (dezent). */ .shop-zahlung{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin-top:14px} .shop-zahlung-text{font-size:12px;font-weight:600;color:var(--muted)} .shop-zahlung-icons{display:flex;align-items:center;flex-wrap:wrap;gap:5px} .shop-zahlung-ico{height:20px;width:auto;display:block;border-radius:3px} @media(max-width:768px){.shop-zahlung{margin-top:12px}.shop-zahlung-ico{height:18px}} .foot-zahlung-icons{display:flex;align-items:center;flex-wrap:wrap;gap:6px} .foot-zahlung-ico{height:22px;width:auto;display:block;border-radius:3px} @media(max-width:640px){ .foot-zahlung{margin-top:24px;padding-top:16px;gap:6px 10px} .foot-zahlung-ico{height:20px} } .foot-marke{flex:1 1 300px;min-width:0;max-width:440px} .foot-spalte{flex:0 1 auto;min-width:132px} .foot-name{font-weight:800;font-size:15px;color:var(--ink)} .foot-ueber{margin-top:10px;max-width:42ch;line-height:1.6} .foot-mail{display:inline-block;margin-top:12px} /* Die Spaltenueberschrift in Versalien und Mono - dieselbe kleine Marke, die im Rechner ueber Zahlenfeldern steht. Kein neues Idiom fuer eine Zeile. */ .foot-kopf{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.09em; text-transform:uppercase;color:var(--graphit);margin-bottom:12px} /* Jeder Verweis auf eigener Zeile: Das ist der Unterschied zur alten Reihe, und dafuer muss der Aussenabstand nach rechts weg, den footer a mitbringt. */ .foot-spalte a{display:block;margin:0 0 9px;line-height:1.45} @media(max-width:768px){ /* Die Einordnung nimmt die volle Breite, die Spalten teilen sich die Zeile darunter - flex-wrap erledigt den Rest von selbst. */ .foot-grid{gap:26px 32px} .foot-marke{flex:1 1 100%;max-width:none} .foot-spalte{flex:1 1 130px} } footer a{color:var(--muted);text-decoration:none;margin-right:14px} footer a:hover{color:var(--ink)} /* Social-Link im Footer: gleiche Zurueckhaltung wie die uebrigen Fusszeilen-Links, das Icon traegt currentColor und faerbt sich damit beim Hover mit. */ .foot-social a{display:inline-flex;align-items:center;gap:7px;margin-right:0} .foot-social svg{width:17px;height:17px;flex:0 0 auto} .foot-social a:hover svg{color:var(--ink)} /* ---------- Sticky Mobile-CTA: hält den nächsten Schritt immer erreichbar ---------- */ .stickycta{position:fixed;left:0;right:0;bottom:0;z-index:70;display:flex;justify-content:center;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:rgba(249,245,236,.92);backdrop-filter:blur(10px);border-top:1px solid var(--line);box-shadow:0 -6px 20px rgba(51,49,45,.08);transform:translateY(100%);transition:transform .25s cubic-bezier(.2,.8,.2,1)} .stickycta.show{transform:translateY(0)} /* max-width aus der Variablen: Der Knopf soll so breit sein wie die Inhaltsspalte, nicht wie eine Zahl, die zufaellig einmal dieselbe war (22.09.2026). */ .stickycta button{display:block;width:100%;max-width:var(--seite-max);font-family:var(--font);font-weight:800;font-size:16px;background:var(--rost);color:var(--ink);border:2px solid var(--ink);border-radius:var(--radius-s);padding:13px 20px;cursor:pointer} .stickycta button:hover{background:var(--rost-dark)} @media(min-width:769px){.stickycta button{max-width:320px}} @media (prefers-reduced-motion: reduce){.stickycta{transition:none}} /* AUF DEM TELEFON GIBT ES SIE NICHT MEHR (28.09.2026, Vorgabe Claras: "entferne bei Mobile die Sticky Mobile-CTA"). Auf der Startseite war sie schon am 25.09.2026 weggefallen; jetzt auf allen uebrigen Seiten - dort, wo sie am meisten Platz nahm. Sie deckte am unteren Rand rund 70px dauerhaft ab. Auf einem Telefon ist das ein Zehntel des Bildschirms, und sie lag ueber dem, was gerade gelesen wurde - beim Karussell der Kits ebenso wie ueber den letzten Zeilen der Fragen. display:none, nicht der Weg ueber transform: Die Leiste faehrt sich per Klasse "show" selbst ein; nur verschoben bliebe sie ein Element, das Platz und Klicks abfaengt. AUF DEM DESKTOP BLEIBT SIE vorerst - dort ist sie schmaler und nimmt keinen Inhalt weg. */ @media(max-width:768px){.stickycta{display:none}} /* ---------- Warenkorb-Modal (Produkt-Panel: direkt bestellen ohne Rechner) ---------- */ .modalback{position:fixed;inset:0;background:rgba(43,33,26,.55);z-index:300;display:flex;align-items:center;justify-content:center;padding:20px} .modalback.hidden{display:none} .modalcard{position:relative;background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow-lift);max-width:560px;width:100%;max-height:88vh;overflow-y:auto;padding:34px 30px} @media(max-width:576px){.modalcard{padding:28px 20px;max-height:92vh}} .modalcard{animation:modalIn .28s cubic-bezier(.2,.8,.2,1)} /* ---------- BESTELLPROZESS AUF DER GANZEN SEITE (02.09.2026) ---------- .voll macht aus dem zentrierten Dialog eine Vollflaeche. Der Inhalt bleibt in einer lesbaren Spaltenbreite zentriert - bildschirmfuellend heisst mehr Ruhe drumherum, nicht Zeilen ueber 1200px. Die Kopfleiste klebt, damit Schliessen und Tabs immer erreichbar sind; vorher lag der Schliessen-Knopf im scrollenden Inhalt. 100dvh statt 100vh: auf iOS wandert sonst die Adressleiste ueber den Inhalt. */ .modalback.voll{padding:0;align-items:stretch;justify-content:stretch} .modalback.voll .modalcard{max-width:none;width:100%;height:100vh;height:100dvh;max-height:none;border-radius:0;padding:0;display:flex;flex-direction:column;overflow:hidden;animation:vollIn .26s cubic-bezier(.2,.8,.2,1)} @keyframes vollIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} .modalback.voll #cartModalBody{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;padding:26px 30px 56px;width:100%;max-width:940px;margin:0 auto} @media(max-width:640px){.modalback.voll #cartModalBody{padding:20px 18px 48px}} /* ---------- PFAD-WEICHE AUF DER STARTSEITE (02.09.2026) ---------- Zwei gleich gewichtete Karten. Bewusst KEIN lauter/leiser Kontrast wie im Hero: dort gibt es genau einen Handlungsaufruf, hier sind es zwei gleichrangige. Beide Knoepfe tragen deshalb dieselbe Groesse; nur die Fuellung unterscheidet sie, damit man sie auseinanderhaelt. */ .pfad-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:26px} @media(max-width:768px){.pfad-grid{grid-template-columns:1fr}} .pfad-karte{background:var(--card);border:1.5px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:26px 24px;display:flex;flex-direction:column;gap:10px} .pfad-karte h3{font-size:21px;font-weight:800;letter-spacing:-.01em;margin:0} .pfad-karte p{color:var(--graphit);font-size:15px;margin:0;flex:1 1 auto} .pfad-nr{font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--bernstein-dark)} .pfad-karte .btn{width:100%;justify-content:center;margin-top:4px} .pfad-fuss{font-size:12.5px;color:var(--muted)} .pfad-kits{display:flex;flex-direction:column;gap:8px;margin-top:4px} .pfad-kits .btn{width:100%;justify-content:center} .pfad-kit{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;text-align:left;background:transparent;border:1.5px solid var(--line);border-radius:var(--radius);padding:11px 15px;font:inherit;font-weight:700;font-size:14.5px;color:var(--ink);cursor:pointer;transition:border-color .16s,background .16s} .pfad-kit:hover{border-color:var(--bernstein);background:var(--bernstein-tint)} .pfad-kit:focus-visible{outline:2px solid var(--bernstein);outline-offset:2px} .pfad-kit .pk-preis{font-family:var(--mono);font-weight:700;white-space:nowrap} .pfad-kit .pk-sub{display:block;font-weight:500;font-size:12.5px;color:var(--muted)} .kaufkopf{display:none} .modalback.voll .kaufkopf{display:block;flex:0 0 auto;position:sticky;top:0;z-index:2;background:var(--card);border-bottom:1px solid var(--line)} .kaufkopf-innen{display:flex;align-items:center;gap:16px;width:100%;max-width:940px;margin:0 auto;padding:12px 30px} @media(max-width:640px){.kaufkopf-innen{padding:10px 18px;gap:10px}} .kaufkopf-titel{font-weight:800;font-size:15px;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} @media(max-width:576px){.kaufkopf-titel{display:none}} .kauftabs{display:flex;gap:6px;margin-left:auto} .kauftab{appearance:none;border:1.5px solid var(--line);background:transparent;color:var(--graphit);font:inherit;font-size:13.5px;font-weight:700;padding:7px 14px;border-radius:999px;cursor:pointer;white-space:nowrap;transition:background .16s,border-color .16s,color .16s} .kauftab:hover{border-color:var(--bernstein)} .kauftab.an{background:var(--ink);border-color:var(--ink);color:var(--paper)} .kauftab:focus-visible{outline:2px solid var(--bernstein);outline-offset:2px} /* Im Vollbild deckt .modalcard die ganze Flaeche - der Schliessen-Knopf sitzt jetzt in der Kopfleiste und braucht die absolute Positionierung des Dialog-Modus nicht mehr. */ .modalback.voll .modalclose{position:static;margin-left:8px;flex:0 0 auto} @media(max-width:576px){.kauftabs{margin-left:0}} @keyframes modalIn{from{opacity:0;transform:scale(.96) translateY(10px)}to{opacity:1;transform:none}} .modalclose{position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:50%;border:1.5px solid var(--line);background:var(--card);color:var(--muted);font-size:16px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0} .modalclose:hover{border-color:var(--gruen);color:var(--ink)} .lu-pop{opacity:0;animation:luPop .45s cubic-bezier(.2,.8,.2,1) forwards} @keyframes luPop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} .svcchoice{display:flex;align-items:center;gap:12px;padding:11px 2px;border-bottom:1px dashed var(--line);cursor:pointer;opacity:0;animation:luPop .45s cubic-bezier(.2,.8,.2,1) forwards} .svcchoice:last-child{border-bottom:none} .svcchoice input{width:19px;height:19px;accent-color:var(--gruen);flex:0 0 auto} .svcchoice span:nth-child(2){flex:1;font-size:14.5px;font-weight:600} .svcchoice .price{font-family:var(--mono);font-weight:700;white-space:nowrap;font-size:13.5px} /* Widerrufsbutton (§ 356a BGB) im Footer - zweistufige Bestätigung */ .billigerwaermepumpe-widerruf{flex-basis:100%;margin-top:10px;padding-top:14px;border-top:1px dashed var(--line)} /* IN DER FUSSSPALTE (23.09.2026): Trennlinie und volle Breite stammen aus der Zeit, als der Knopf allein in einem eigenen Band unter dem Fuss stand. In einer Spalte sind sie falsch - die Linie zoege quer durch die Spalte, die Breitenangabe spraengte sie auf. */ .foot-spalte .billigerwaermepumpe-widerruf{flex-basis:auto;margin-top:2px;padding-top:0;border-top:0} /* Der Knopf ist seit dem 23.09.2026 ein auf die Widerrufsseite. Als Verweis bringt er Unterstreichung und den Rechtsabstand aus "footer a" mit - beides muss weg, sonst steht eine unterstrichene Schaltflaeche mit Luft an der falschen Seite im Fuss. */ .billigerwaermepumpe-widerruf-btn{font-family:var(--font);font-weight:700;font-size:13px;background:none;border:1px solid var(--line);border-radius:var(--radius-s);padding:8px 14px;color:var(--muted);cursor:pointer;display:inline-block;text-decoration:none;margin-right:0} .billigerwaermepumpe-widerruf-btn:hover{color:var(--ink);border-color:var(--muted)} .billigerwaermepumpe-widerruf-confirm{margin-top:12px;padding:14px;border:1px solid var(--warn);border-radius:var(--radius-s);background:var(--warn-tint);color:var(--ink);max-width:520px} .billigerwaermepumpe-widerruf-confirm p{margin-bottom:10px;font-size:13.5px;line-height:1.5} .billigerwaermepumpe-widerruf-confirm button{font-family:var(--font);font-weight:700;font-size:13px;border-radius:var(--radius-s);padding:8px 14px;cursor:pointer;margin-right:8px;border:1px solid var(--warn);background:var(--warn);color:#fff} .billigerwaermepumpe-widerruf-confirm button + button{background:none;color:var(--muted);border-color:var(--line)} /* WIDERRUFSSEITE (23.09.2026). Das Formular stand vorher als Ausklapper im Fuss und war auf dessen 13px-Schrift und schmale Spalte gerechnet. Auf einer eigenen Seite traegt es die normale Textgroesse und eine Lesebreite, sonst laege ein Rechtsformular in Fussnotengroesse vor dem Leser. */ /* BREITER UND MITTIG (12.10.2026, Vorgabe Claras: "den Kasten mit dem Widerruf bitte mittig setzen und ein bisschen breiter ziehen, sodass man ihn direkt komplett sieht und nicht scrollen muss"). Er stand auf 560px und linksbuendig - eine Lesespalte fuer Fliesstext. Hier steht aber ein Formular mit zwei Feldern, und die lagen deshalb untereinander. Breiter passen sie nebeneinander; der Kasten wird dadurch flacher statt laenger, und genau darum ging es. */ .widerruf-seite{max-width:760px;margin-inline:auto} .widerruf-seite .billigerwaermepumpe-widerruf-confirm{margin-top:0;max-width:none;padding:24px 26px} .widerruf-seite .billigerwaermepumpe-widerruf-confirm p{font-size:15px} .widerruf-seite .billigerwaermepumpe-widerruf-confirm button{font-size:14.5px;padding:11px 18px} /* DIE BEIDEN FELDER NEBENEINANDER. Das spart die Hoehe einer ganzen Zeile samt Beschriftung - rund 70px, und das ist der Unterschied zwischen "passt ins Bild" und "knapp darunter". Auf schmalen Schirmen bricht das Raster von selbst auf eine Spalte um. */ .widerruf-seite .billigerwaermepumpe-widerruf-confirm label{display:block;margin-bottom:14px; font-size:14px;font-weight:700} .widerruf-seite .billigerwaermepumpe-widerruf-confirm input[type=email], .widerruf-seite .billigerwaermepumpe-widerruf-confirm input[type=text]{display:block;width:100%; margin-top:6px;padding:11px 13px;font:inherit;font-weight:500; border:1.5px solid var(--line);border-radius:var(--radius-s);background:#fff;color:var(--ink)} .widerruf-seite .billigerwaermepumpe-widerruf-confirm input:focus{outline:2px solid var(--gruen); outline-offset:1px;border-color:var(--gruen)} @media(min-width:620px){ .widerruf-seite .billigerwaermepumpe-widerruf-felder{display:grid; grid-template-columns:1fr 1fr;gap:0 18px} } .widerruf-hinweis{margin-top:16px;font-size:13px;line-height:1.6;color:var(--muted); max-width:760px;margin-inline:auto} .billigerwaermepumpe-widerruf-done{margin-top:12px;padding:14px;border:1px solid var(--gruen);border-radius:var(--radius-s);background:var(--gruen-tint);color:var(--ink);max-width:520px;font-size:13.5px} /* Kundenbilder: Platzhalter-Slots (Sections rendern .kb-placeholder statt ) */ /* Platzhalter bekommt dieselbe Hoehe wie ein Bild, damit die Reihe nicht springt, sobald ein Bild fehlt. Die alte Regel setzte hier eine Breite von 100% - im Scroller haette ein einziger Platzhalter die ganze Reihe eingenommen. */ /* Derselbe Zuschnitt wie ein Bild, damit die Reihe nicht springt, sobald eines fehlt. */ .kb-row .kb-placeholder{display:flex;align-items:center;justify-content:center; width:100%;aspect-ratio:1/1;border-radius:var(--radius); border:1px dashed var(--line);background:var(--card);color:var(--muted); font-family:var(--mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase} /* Mobile-Topbar: nur Burger + Logo - der Resume-Chip wandert auf Mobile in den Sticky-CTA unten (daumenfreundlich), statt oben abgeschnitten zu werden */ @media(max-width:576px){ .topbar .wrap{gap:8px} .logo{font-size:16px} .navwrap{margin:0} } /* Widerruf-Formular (Stufe 2) */ .billigerwaermepumpe-widerruf-confirm label{display:block;font-size:13px;font-weight:600;margin:10px 0 4px} .billigerwaermepumpe-widerruf-confirm input[type=email],.billigerwaermepumpe-widerruf-confirm input[type=text]{display:block;width:100%;max-width:320px;font-family:var(--font);font-size:16px;padding:9px 12px;border:1px solid var(--line);border-radius:var(--radius-s);background:var(--card);color:var(--ink);margin-top:4px} .billigerwaermepumpe-widerruf-confirm button[type=submit]{margin-top:12px} .billigerwaermepumpe-widerruf-error{color:var(--warn);font-weight:600} /* Mobil: lange nowrap-Tags (z.B. Foerder-Zeile) duerfen umbrechen, statt die Buybox ueber den Viewport hinaus aufzuspannen */ @media(max-width:576px){ .tag{white-space:normal} .foerderline{flex-wrap:wrap} .foerderline .price{margin-left:auto} /* Betrag bleibt rechtsbündig, auch nach Umbruch */ .funnel-grid>*{min-width:0} .foermap-row{flex-wrap:wrap} /* Die Service-Pille darf hier umbrechen - dann passt aber der Pillenradius nicht mehr: bei zwei Zeilen schneiden die runden Enden in den Text, und seitlich fehlt Innenabstand (User-Meldung 30.07.2026: "muessen Luft zum Atmen haben an den Seiten"). Mehrzeilig also als Kaestchen mit ruhigem Radius, mehr Polster und eigener Zeilenhoehe. */ .foermap-row .fm-svc{white-space:normal;text-align:left;margin-left:0;margin-top:8px; align-self:flex-start;max-width:calc(100% - 34px); border-radius:var(--radius-s);padding:9px 14px;line-height:1.4;font-size:12.5px; overflow-wrap:anywhere} /* Zeile selbst etwas grosszuegiger, damit die Pille nicht an der Kante klebt. */ .foermap-row{padding:16px 18px} /* Buybox-Rahmen mobil: weniger Innenabstand = mehr Platz für Inhalte, nichts wirkt gequetscht */ /* ÜBER DIE VOLLE BILDBREITE (13.08.2026, Betreiber): Die Kaufbox bricht mobil aus ihren Containern aus und laeuft von Kante zu Kante. Die 40px sind die Summe zweier Einzuege, gemessen statt geschaetzt: .wrap traegt padding:0 22px (Zeile 48), die .qcard darin nochmal 18px. Ein erster Versuch mit nur -22px liess die Box 18px vom Rand stehen. Aendert sich einer der beiden Werte, muss dieser mit. Gefahrlos, weil die .qcard optisch gar nicht existiert: ihr Grund ist derselbe Papierton wie die Seite und sie hat weder Rahmen noch Schatten - die Box ragt also ueber nichts Sichtbares hinaus. Rahmen und Rundung fallen links/rechts weg: eine Kante, die am Displayrand klebt, sieht abgeschnitten aus statt gerahmt. Oben und unten bleiben sie. Innenabstand 16px statt 12: die Box hat jetzt 80px mehr Breite, der Text soll trotzdem nicht am Glasrand kleben. */ .buybox{padding:16px;margin-left:-40px;margin-right:-40px; border-left:none;border-right:none;border-radius:0} /* Seitlicher Einzug raus (12.08.2026): die Service-Zeilen standen 10px weiter innen als die Summenzeilen darunter, also endeten "+ 199 €" und "10.696 €" auf zwei verschiedenen Kanten. Auf dem breiten Desktop faellt das nicht auf, auf 390px liest es sich als schief. Die Gruppe traegt weder Hintergrund noch Rahmen - der Einzug hielt nichts zusammen, er verschob nur die Zahlenspalte. Oben/unten bleibt der Abstand, der trennt die Gruppen. */ .svc-block .sd-group{padding:2px 0 8px} /* Zeilen mit ⓘ-Knopf schieben ihren Betrag um dessen Breite nach links (Knopf 40px + 8px Abstand), Zeilen ohne Knopf nicht - dadurch endeten die Betraege auf zwei Spalten, 54px und 13px vom Rand. Statt den Knopf zu verschieben, halten wir seinen Platz auch dort frei, wo keiner steht: eine Zahlenspalte fuer alle. Gilt bewusst nur mobil - auf dem breiten Desktop faellt der Versatz nicht auf und die Kaufbox soll dort so bleiben, wie sie ist. NUR im Hardware-Schritt: dort gibt es die ⓘ-Knoepfe. Im Service-Schritt hat keine Zeile einen, dafuer stehen darunter die Summenzeilen - eine leer reservierte Spalte haette die Service-Betraege dort 41px von "Dein Paket gesamt" weggerueckt statt sie anzugleichen. */ /* 46px = Info-Knopf 40px (siehe .kb-info weiter unten) + 6px Spaltenabstand. Der Wert muss zur tatsaechlichen Knopfbreite passen, sonst enden Zeilen mit und ohne Knopf auf zwei Kanten - gemessen 40px gegen 46px. */ .bb-step[data-step="hardware"] .buyline > .price, .bb-step[data-step="hardware"] .buyline > .svc-right{margin-right:46px} .bb-step[data-step="hardware"] .buyline > .svc-right:has(.kb-info){margin-right:0} /* Die Gruppensumme ("1 gewaehlt · 599 €") stand buendig am Kastenrand, waehrend die Betraege der Positionen darunter 40px eingerueckt sind - zwei Kanten direkt uebereinander. Sie zaehlt dieselben Betraege zusammen und gehoert damit auf dieselbe Linie. (13.08.2026) */ .bb-step[data-step="hardware"] .xgrp-kopf .xgrp-n, .bb-step[data-step="hardware"] details.mini.xgrp > summary .xgrp-n{margin-right:46px} .svc-why{margin-left:0} .totalrow .sum{font-size:23px} /* Endpreis bleibt auch mobil die groesste Zahl des Blocks, nur etwas gebaendigt. Eigene Regel noetig: .totalrow.eff .sum ist spezifischer als .totalrow .sum darueber. */ .totalrow.eff{padding:12px 13px;gap:10px} .totalrow.eff>span:first-child{font-size:14.5px} .totalrow.eff .sum{font-size:25px} .totalrow.sub .sum{font-size:18px} /* Buybox-Zeilen: Name links (bricht in seiner Spalte um), Preis/Eingabe + Pfeil bleiben rechts auf derselben Zeile - kein Zerfallen in zwei linksbündige Zeilen */ .buyline{flex-wrap:nowrap} .buyline>label,.buyline>span:first-child{flex:1 1 auto;min-width:0} .buyline .price,.buyline .svc-right{flex:0 0 auto} /* Buendige Preiskante: ohne Mindestbreite richtet sich die Spalte nach der Textlaenge, "inklusive" und "+ 1.999 EUR" beginnen dann an verschiedenen Stellen. */ .buyline .price{min-width:72px;text-align:right;white-space:nowrap} .buyline .svc-right{justify-content:flex-end} /* MENGEN-ZEILEN (EQ3-Komponenten, Erdleitung ...) auf zwei Zeilen. Messung 30.07.2026 auf 390px: der rechte Block aus −/Menge/+ , Preis und ⓘ ist 259px breit und darf wegen flex:0 0 auto nicht schrumpfen. Bei 284px Zeilenbreite blieben der Produktbezeichnung 15px - der Name war praktisch weg, die Knoepfe standen optisch auf der Schrift (User-Meldung). Betrifft alle vier EQ3-Positionen, Text war um 61 bis 122px abgeschnitten. Loesung: Name bekommt die volle erste Zeile, die Bedienelemente ruecken darunter - Mengenwahl links, Preis und Info rechts. Nur Zeilen MIT Mengenwahl, alle anderen Kaufzeilen bleiben einzeilig. Die Klasse .hat-menge setzt konfigurator.js selbst; :has() steht nur als Zweitweg daneben, falls die Zeile mal woanders ohne Klasse gebaut wird. */ /* Zeilen mit Auswahl-Chips (Warmwasserspeicher, Abholung/Lieferung) verhalten sich wie die Mengen-Zeilen: Bezeichnung und Chips nehmen die erste Zeile, Preis und Info ruecken darunter. Vorher stand der Preis mittig neben einem zweizeiligen Chip-Block und wirkte dadurch schief (User-Meldung 30.07.2026 zum Warmwasserspeicher). */ /* AUSGERICHTET 13.08.2026: Bis heute bekam der Preis dieser Zeilen eine eigene volle Zeile unter den Chips und stand dort linksbuendig. Gemessen auf 390px endete er 212px (Speicher) bzw. 337px (Abholung/Lieferung) vom rechten Rand, waehrend jede andere Kaufzeile ihren Betrag bei 41px hatte - drei verschiedene Preiskanten auf einem Schirm. Jetzt wie jede andere Zeile: Bezeichnung links, Preis rechts auf der gemeinsamen Kante, Chips ruecken darunter in die linke Spalte. */ .buyline:has(.spchips){position:relative;flex-wrap:nowrap;row-gap:0} /* Die Auswahlchips brauchen die volle Zeilenbreite - in einer schmalen linken Spalte standen sie mobil untereinander und die Zeile wurde ueber 200px hoch. Also nimmt der linke Block die ganze Breite, und der Betrag wird oben rechts darueber gelegt. Er behaelt damit exakt dieselbe Kante wie in jeder anderen Kaufzeile, ohne den Chips Platz wegzunehmen. */ .buyline:has(.spchips)>.withthumb{flex:1 1 100%;min-width:0} .buyline:has(.spchips) .withthumb>span{display:block;min-width:0} /* Der Platz fuer den darueberliegenden Betrag wird NUR in der Namenszeile freigehalten, nicht auf dem ganzen linken Block: sonst fehlt er auch den Chips darunter, und die brechen untereinander um (gemessene Zeilenhoehe 203px statt 96px). */ .buyline:has(.spchips) .withthumb>span>b{display:block;padding-right:112px} .buyline:has(.spchips) .spchips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px} .buyline:has(.spchips)>.svc-right, .buyline:has(.spchips)>.price{position:absolute;top:9px;right:0;margin:0; text-align:right;justify-content:flex-end} .buyline.hat-menge,.buyline:has(.qtystep){flex-wrap:wrap;row-gap:9px} .buyline.hat-menge>label,.buyline.hat-menge>span:first-child, .buyline:has(.qtystep)>label,.buyline:has(.qtystep)>span:first-child{flex:1 1 100%;min-width:0} .buyline.hat-menge .svc-right, .buyline:has(.qtystep) .svc-right{flex:1 1 100%;justify-content:space-between;gap:6px} .buyline.hat-menge .qtystep, .buyline:has(.qtystep) .qtystep{margin-right:auto} /* Verschachteltes Flex: .withthumb hat min-width:0, der Span DARIN aber nicht - deshalb konnte die Chip-Reihe nicht schrumpfen und schob sich ueber die Preisspalte (Abholung/Lieferung). */ .buyline .withthumb>span{min-width:0} /* Die Preisspalte der Abhol-/Lieferzeile wiederholt woertlich, was im gewaehlten Chip steht ("kostenlos" / "+ 239,99 €"). Auf schmalen Schirmen kostet diese Dopplung genau den Platz, den die Chips brauchen - Information geht keine verloren. */ #deliveryPrice{display:none} /* Tippziele auf Fingergroesse: die Icon-Buttons und der Zurueck-Knopf lagen bei 30 bzw. 32px. */ .svc-info,.kb-info,.xr-seite{width:40px;height:40px} .qtystep button{width:40px;height:40px} /* Die Zeile ist schon ~40px hoch, klickbar war aber nur das 22px hohe Label. Fuellt die Zeile aus, ohne die Optik zu aendern. */ .buyline label{min-height:40px} .back{min-height:44px;padding:6px 12px 6px 0} details.mini summary{min-height:40px;align-items:center} .editanswers .btn{min-height:44px} .eigen-wrap input[type=number]{width:96px} /* Beträge nie zwischen Zahl und €-Zeichen umbrechen */ .totalrow>span:last-child{white-space:nowrap} } /* Die Kartenreihenfolge im Vergleich kommt ausschliesslich aus renderComparison (guenstigstes zuerst, unpassende ans Ende). Das fruehere .candcard.rec{order:-1} ist hier bewusst raus: es war ein zweiter, unsichtbarer Sortiermechanismus, der nur mobil griff und die DOM-Reihenfolge ueberstimmt haette, sobald Empfehlung und guenstigstes Kit einmal auseinanderfallen. */ @media(max-width:576px){ .svcchoice .price{margin-left:auto} } /* Hamburger-Menü (mobil): drei parallele Striche links, Drawer im Seiten-Look */ .navburger{display:none;flex-direction:column;justify-content:center;gap:5px;width:40px;height:40px;padding:9px;background:none;border:1px solid var(--line);border-radius:var(--radius-s);cursor:pointer;flex:0 0 auto} .navburger span{display:block;width:100%;height:2px;background:var(--ink);border-radius:var(--radius-xs)} .navdrawer{position:fixed;inset:0;z-index:80;background:var(--paper);display:flex;flex-direction:column;padding:0 22px 32px;transform:translateX(-102%);transition:transform .22s cubic-bezier(.2,.8,.2,1);visibility:hidden} .navdrawer.open{transform:none;visibility:visible} @media (prefers-reduced-motion: reduce){.navdrawer{transition:none}} .navdrawer-head{height:64px;display:flex;align-items:center;justify-content:space-between} .navdrawer-close{width:40px;height:40px;background:none;border:1px solid var(--line);border-radius:var(--radius-s);color:var(--muted);font-size:15px;cursor:pointer} /* DIE LISTE IM SCHUBFACH SCROLLT (02.10.2026, Meldung Claras: "mach die Nav scrollbar, weil wenn Foerderung auf ist, kommt man nicht mehr zu Fragen"). WAS PASSIERT WAR: Das Schubfach ist bildschirmhoch (position:fixed, inset:0) und eine Spalte. Zugeklappt passen die sieben Reiter hinein; klappt man ein Untermenue auf, kommen je nach Seite bis zu fuenf Zeilen dazu, und was unten hinausragt, war nicht mehr erreichbar - die Spalte selbst konnte nicht scrollen. overflow-y:auto AN DER LISTE, NICHT AM SCHUBFACH: Der Kopf mit dem Schliesskreuz soll stehen bleiben, auch wenn die Liste lang wird. min-height:0 gehoert zwingend dazu - ein Flex-Kind schrumpft sonst nicht unter seinen Inhalt, und genau daran scheitert overflow in einer Flex-Spalte lautlos. -webkit-overflow-scrolling fuer aeltere iOS-Fassungen, damit das Scrollen dort nicht stockt. Der untere Innenabstand sorgt dafuer, dass die letzte Zeile nicht an der Kante klebt - auf Geraeten mit Gestenleiste waere sie sonst schwer zu treffen. */ .navdrawer nav{display:flex;flex-direction:column;margin-top:18px; flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch; padding-bottom:24px} .navdrawer nav a{display:flex;justify-content:space-between;align-items:center;padding:18px 2px;border-bottom:1px dashed var(--line);text-decoration:none;color:var(--ink);font-weight:800;font-size:24px;letter-spacing:-.01em} .navdrawer nav a span{color:var(--gruen);font-weight:700} /* ZEILE MIT AUFKLAPP-DREIECK (28.09.2026, Vorgabe Claras: "wenn es diese Pop-up-Nav gibt, gibt es ein kleines Dreieck nach unten, das es dann oeffnet - sonst ist es standardmaessig immer geschlossen"). ZWEI FLAECHEN IN EINER ZEILE: Der Name fuehrt auf die Seite, das Dreieck klappt die Abschnitte auf. Die Trennlinie wandert dafuer vom Link an die Zeile - sonst endete sie unter dem Namen und liesse das Dreieck daneben in der Luft haengen. 44px SIND KEIN ZUFALL: Das ist die kleinste Flaeche, die ein Daumen sicher trifft. Das Zeichen selbst ist klein, seine Schaltflaeche darf es nicht sein. */ .navdrawer-zeile{display:flex;align-items:center;gap:8px;border-bottom:1px dashed var(--line)} .navdrawer nav .navdrawer-zeile > a{flex:1 1 auto;border-bottom:none} .navdrawer-auf{flex:0 0 auto;width:44px;height:44px;display:flex;align-items:center; justify-content:center;background:none;border:0;padding:0;cursor:pointer; color:var(--muted);font-size:15px;line-height:1;transition:transform .18s,color .18s} .navdrawer-auf.auf{transform:rotate(180deg);color:var(--ink)} @media (prefers-reduced-motion: reduce){.navdrawer-auf{transition:none}} /* Ohne diese Zeile bliebe das Untermenue trotz hidden sichtbar: display:flex darunter ist staerker als das display:none, das der Browser fuer [hidden] mitbringt. */ .navdrawer-sub[hidden]{display:none} /* Abschnitte unter ihrem Reiter (16.09.2026). Deutlich kleiner als die Reiter selbst und eingerueckt - sie sind Unterpunkte, keine gleichrangigen Ziele. Die gestrichelte Linie tragen nur die Reiter; innerhalb einer Gruppe waere sie eine Trennung, wo keine ist. */ .navdrawer-sub{display:flex;flex-direction:column;padding:4px 0 10px 14px; border-bottom:1px dashed var(--line)} .navdrawer nav .navdrawer-sub a{font-size:16px;font-weight:700;color:var(--graphit); padding:9px 2px;border-bottom:none} .navdrawer nav .navdrawer-sub a:hover{color:var(--ink)} .billigerwaermepumpe-noscroll,.billigerwaermepumpe-noscroll body{overflow:hidden} @media(max-width:992px){ .navburger{display:flex} .navwrap{display:none} .topbar .wrap{justify-content:flex-start} .topbar .resume{display:none} /* Das Logo steht auf dem Telefon mittig zwischen Burger und Warenkorb. Die auto-Raender wirken jetzt INNERHALB von .tb-links - seit Burger und Logo dort zusammenliegen (22.09.2026). Damit das dieselbe Mitte ergibt wie vorher, muss die Gruppe den freien Platz einnehmen; als flex:0 0 auto waere sie nur so breit wie ihr Inhalt, und die auto-Raender haetten nichts zu verteilen. */ .topbar .tb-links{flex:1 1 auto;min-width:0} .topbar .logo{margin:0 auto;transform:translateX(-20px)} /* IM PRODUKT-MODUS NICHT MEHR MITTIG (29.09.2026, Meldung Claras: "das Logo in mobile auf der Produktseite, wenn man runterscrollt, rutscht auch weiter nach links und bedeckt den Button, mit dem man das Nav-Menue aufmacht"). Die Mitte oben ist gerechnet, nicht gesetzt: margin:0 auto verteilt den freien Platz in .tb-links, die 20px nach links gleichen den Warenkorb rechts aus. Sobald beim Scrollen der Produkt-Modus greift, aendert sich alles, womit diese Rechnung aufging - die Navigation und der Knopf verschwinden, Produktbild und -name kommen dazu. Der freie Platz wird ein anderer, das Logo rutscht weiter nach links, und die 20px schieben es vollends auf den Burger. Im Produkt-Modus steht das Logo deshalb einfach neben dem Burger, wo es hingehoert: Links die Marke, rechts Produkt und Warenkorb. Eine zweite Rechnung fuer den zweiten Zustand waere genau die Sorte Wert, die beim naechsten Umbau still danebenliegt. */ .topbar.hat-produkt .logo{margin:0;transform:none} } /* Split-View "Bauteile": Checkout schrumpft rechts (26vw, min 320px/max 420px), Bauteile-Panel fuellt links - Info-Buttons (.kb-info) fuehren dorthin, ohne dass der Kunde seinen laufenden Checkout aus den Augen verliert. Nur ab 761px aktiv, darunter siehe Mobile-Bottom-Bar weiter unten. transform-Pattern gespiegelt von .navdrawer (gleiche Easing .22s/.28s cubic-bezier). */ @media(min-width:769px){ html.bwp-split #rechnerCalc.bwp-sidebar{position:fixed;top:0;right:0;height:100vh;width:26vw;min-width:320px;max-width:420px;overflow-y:auto;z-index:250;background:var(--paper);box-shadow:-6px 0 20px rgba(51,49,45,.08);padding:24px 20px;transform:translateX(102%);transition:transform .28s cubic-bezier(.2,.8,.2,1)} html.bwp-split #rechnerCalc.bwp-sidebar.in{transform:translateX(0)} /* pointer-events:none auf dem (jetzt unsichtbaren, aber weiterhin 100vw/100vh grossen) Backdrop - sonst faengt es Klicks auf der linken Bauteile-Seite ab und schliesst dabei sogar das Modal (bestehender Backdrop-Klick-Listener). Auf der Karte selbst wieder aktivieren. */ html.bwp-split #cartModal.bwp-sidebar-modal{background:transparent;justify-content:flex-end;padding:0;pointer-events:none} html.bwp-split #cartModal.bwp-sidebar-modal .modalcard{pointer-events:auto;width:26vw;min-width:320px;max-width:420px;height:100vh;max-height:100vh;border-radius:0;margin:0;animation:none;transform:translateX(102%);transition:transform .28s cubic-bezier(.2,.8,.2,1)} html.bwp-split #cartModal.bwp-sidebar-modal.in .modalcard{transform:translateX(0)} /* Split-View ist jetzt reiterübergreifend (User-Wunsch): egal welches Panel gerade sichtbar ist (Produkt, Ablauf, Förderung, Forum, Fragen, Bauteile), sein .wrap rueckt nach links, damit nichts unter der fixierten Sidebar verschwindet. Nur #rechnerCalc ausgenommen - das IST ja die Sidebar selbst (Funnel-Pfad), kann nicht gleichzeitig normal + als Sidebar dargestellt werden. Sections ohne :not([hidden]) bleiben ohnehin unsichtbar, treffen die Regel also nie. */ html.bwp-split [data-panel]:not([hidden]):not(#rechnerCalc) .wrap{max-width:none;margin-right:calc(26vw + 40px);padding-left:5vw} /* Topbar und Footer haengen an keinem Panel, bleiben sonst ueber die volle Breite zentriert und wuerden mit ihren rechten Inhalten unter der fixierten Sidebar verschwinden (Sidebar-z-index > Topbar-z-index) - deshalb rutschen auch sie waehrend der Split-View nach links. */ html.bwp-split .topbar .wrap{max-width:none;margin-right:calc(26vw + 20px)} html.bwp-split footer .wrap{max-width:none;margin-right:calc(26vw + 40px);padding-left:5vw} /* Sticky-CTA gehoert waehrend der Split-View zum geschrumpften Checkout, nicht zur ganzen Bildschirmbreite - auf die Sidebar-Breite begrenzen und darueberlegen (z-index > Sidebar/Modal). */ html.bwp-split .stickycta{left:auto;right:0;width:26vw;min-width:320px;max-width:420px;z-index:310} /* Die Sidebar ist ihr EIGENER Scroll-Container (position:fixed + overflow-y:auto) und hat keine Topbar ueber sich. Der 64px-Versatz der klebenden Summenzeile gilt dort also nicht - sonst bleibt oben eine leere Luecke stehen, bevor die Zeile haengt. */ /* -24px = padding-top der Sidebar. Mit top:0 blieb daruber ein 24px-Streifen frei, durch den der Inhalt sichtbar vorbeiscrollte; jetzt klebt die Zeile buendig an der Oberkante des Tabs. */ html.bwp-split #rechnerCalc.bwp-sidebar .buybox .bb-minisum{top:-24px} /* Zwei nebeneinanderliegende Scrollbalken (Seite + Sidebar) waren der Hauptaerger. Der innere wird jetzt schmal und farblich zurueckgenommen; overscroll-behavior:contain verhindert zusaetzlich das Durchscrollen auf die Seite, sobald die Sidebar am Ende ist. */ html.bwp-split #rechnerCalc.bwp-sidebar, html.bwp-split #cartModal.bwp-sidebar-modal .modalcard{ scrollbar-width:thin;scrollbar-color:var(--sand-deep) transparent;overscroll-behavior:contain} html.bwp-split #rechnerCalc.bwp-sidebar::-webkit-scrollbar, html.bwp-split #cartModal.bwp-sidebar-modal .modalcard::-webkit-scrollbar{width:7px} html.bwp-split #rechnerCalc.bwp-sidebar::-webkit-scrollbar-track, html.bwp-split #cartModal.bwp-sidebar-modal .modalcard::-webkit-scrollbar-track{background:transparent} html.bwp-split #rechnerCalc.bwp-sidebar::-webkit-scrollbar-thumb, html.bwp-split #cartModal.bwp-sidebar-modal .modalcard::-webkit-scrollbar-thumb{ background:var(--sand-deep);border-radius:var(--radius-xs)} /* Die Sticky-Leiste liegt fixiert UEBER der Sidebar (z-index 310) und verdeckte deren letzte Zeile - "Weiter zu Services" war deshalb abgeschnitten. Platz darunter freihalten. */ html.bwp-split #rechnerCalc.bwp-sidebar{padding-bottom:96px} html.bwp-split #cartModal.bwp-sidebar-modal .modalcard{padding-bottom:96px} /* Hilfe-Knopf sitzt unten rechts und laege sonst HINTER der Sidebar (z-index 68 gegen 250). Er rueckt um die Sidebar-Breite nach links; clamp spiegelt exakt width/min/max von oben. */ html.bwp-split .help-fab{right:calc(clamp(320px, 26vw, 420px) + 18px)} } .bwp-split-close{display:block;margin-bottom:14px;background:none;border:none;font-weight:700;font-size:13.5px;color:var(--muted);cursor:pointer;padding:0} .bwp-split-close:hover{color:var(--ink)} /* Mobile: kein Platz fuer eine 26vw-Sidebar - Checkout-Container komplett ausblenden, stattdessen eine feste Bottom-Bar mit Mini-Zusammenfassung (gleiches transform/Easing-Pattern wie .stickycta). Die normale Sticky-CTA wird hier ausgeblendet, damit sie sich nicht mit der Mobile-Bar ueberlappt - die Mobile-Bar uebernimmt deren Rolle (Preis + Rueckkehr zum Checkout). */ @media(max-width:768px){ html.bwp-split #rechnerCalc.bwp-sidebar, html.bwp-split #cartModal.bwp-sidebar-modal, html.bwp-split .stickycta{display:none} /* Hier uebernimmt die .bwp-mobile-bar (fixiert unten, z-index 260) die Rolle der Sticky-Leiste - der Hilfe-Knopf muss also ueber ihr sitzen statt dahinter zu verschwinden. */ html.bwp-split .help-fab{bottom:calc(76px + env(safe-area-inset-bottom))} } .bwp-mobile-bar{position:fixed;left:0;right:0;bottom:0;z-index:260;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px calc(14px + env(safe-area-inset-bottom));background:var(--ink);color:var(--paper);cursor:pointer;transform:translateY(100%);transition:transform .25s cubic-bezier(.2,.8,.2,1)} .bwp-mobile-bar.in{transform:translateY(0)} .bwp-mb-text{display:flex;flex-direction:column;gap:2px;min-width:0} .bwp-mb-name{font-size:13.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .bwp-mb-total{font-size:16px;font-weight:800;color:var(--rost)} .bwp-mb-cta{flex:0 0 auto;font-size:13px;font-weight:700;color:var(--paper);opacity:.85} @media(min-width:769px){.bwp-mobile-bar{display:none}} /* Rechtsseiten (/policies/*, ueber layout/theme.liquid in diese Huelle gelegt). Shopify liefert den Richtlinientext als fertiges Markup (.shopify-policy__container > __title > h1 + __body > .rte) und das Basis-Theme faerbt darin vor allem die Ueberschrift ein. Die folgenden Regeln holen genau diese Fremdteile auf die Typografie der Magazin-Artikel zurueck, damit Impressum & Co. nicht wie eine fremde Seite wirken. */ /* Die Rechtsseiten sollen aussehen wie eine Sektion der Startseite, nicht wie ein Textdump in unserer Schrift (User 30.07.2026: "stilistisch passt das noch nicht zum Design"). Uebernommen wird genau das Vokabular der uebrigen Seite: Papier als Grund, Inhalt in einer weissen Karte mit --radius und --shadow (wie .buybox), Mono-Eyebrow in Bernstein, grosse enge Ueberschrift wie section.land h2, Nummern als Badge wie .reason-num. */ .legalpage{padding:44px 0 84px} .legalpage .wrap{max-width:760px} .legalpage .art-title{margin-top:10px} .legalpage .art-body{margin-top:0} .legalpage .art-body h2,.legalpage .art-body h3{margin:22px 0 6px;font-size:19px} .legalpage .shopify-policy__container{max-width:none;width:100%;margin:0;padding:0} .legalpage .shopify-policy__title{margin:0;padding:0;text-align:left} /* wie .art-title -- der Richtlinienname ist die Seitenueberschrift */ /* Ueberschrift auf der Skala der Startseite (section.land h2), nur gedeckelt - ein Rechtstext darf gross auftreten, aber nicht schreien wie die Hero-Zeile. */ .legalpage .shopify-policy__title h1{ font-family:inherit;font-weight:800;font-size:clamp(30px,5vw,40px); line-height:1.08;letter-spacing:-.02em;color:var(--ink);margin:10px 0 0;text-transform:none} .legalpage .shopify-policy__body{margin:0;padding:0} /* Der Text sitzt in einer Karte auf dem Papier - dasselbe Bauteil wie .buybox. Vorher schwebte er ohne Traeger auf dem Hintergrund und wirkte deshalb wie ein Fremdkoerper. */ .legalpage .rte{margin-top:26px;font-size:15.5px;line-height:1.6;color:var(--graphit); background:var(--card);border:1px solid var(--line);border-radius:var(--radius); padding:30px 32px;box-shadow:var(--shadow)} .legalpage .rte > *:first-child{margin-top:0} .legalpage .rte p{margin:0 0 13px;font-size:15.5px;line-height:1.6;color:var(--graphit)} .legalpage .rte h2,.legalpage .rte h3,.legalpage .rte h4{ font-family:inherit;font-weight:800;color:var(--ink);letter-spacing:-.01em; font-size:19px;line-height:1.25;margin:26px 0 8px} .legalpage .rte strong,.legalpage .rte b{color:var(--ink);font-weight:700} /* Abschnittstitel: stecken im Quelltext als am Absatzanfang, nicht als h2. konfigurator/recht-extras zeichnet genau die aus (siehe Snippet - CSS allein waere hier falsch, weil :first-child Textknoten ignoriert und Hervorhebungen mitten im Satz traefe). Optik wie .art-body h2/h3 im Magazin, damit die Rechtstexte im selben System lesen. */ .legalpage .rte .recht-titel{ display:flex;align-items:center;gap:10px;font-size:17.5px;font-weight:800;line-height:1.3; letter-spacing:-.01em;color:var(--ink);margin:0 0 7px} /* Nummern-Badge wie .reason-num auf der Startseite: Mono, quadratisch, Bernstein. Getoent statt vollflaechig - zwoelf volle Bernstein-Kacheln untereinander waeren zu laut. */ .legalpage .rte .recht-nr{ flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center; min-width:34px;height:26px;padding:0 8px;border-radius:8px; background:var(--bernstein-tint);color:var(--bernstein-dark); font-family:var(--mono);font-size:12.5px;font-weight:700;letter-spacing:0;white-space:nowrap} /* Erster Abschnitt braucht keinen Vorlauf - der Abstand kommt schon von der Ueberschrift. */ .legalpage .rte p:first-child .recht-titel{margin-top:0} /* Trennlinien zwischen den Klauseln - dasselbe Bauteil wie die Zeilen in der Kaufbox (.buyline). Gibt der Karte innere Struktur, statt einer gleichmaessigen Absatzreihe. */ .legalpage .rte p.recht-abschnitt{margin-top:0;padding-top:24px;border-top:1px solid var(--line)} .legalpage .rte > *:first-child.recht-abschnitt, .legalpage .rte p.recht-abschnitt:first-child{padding-top:0;border-top:0} .legalpage .rte > *:first-child{margin-top:0} /* Sprungziel angesteuert (z. B. /policies/terms-of-service#par-7): kurz hervorheben. */ .legalpage .rte p:target{background:var(--gruen-tint);border-radius:var(--radius-s); padding-left:14px;padding-right:14px;padding-bottom:12px;margin-left:-14px;margin-right:-14px; border-top-color:transparent} /* Querverweise zwischen den Rechtstexten, im Chip-Idiom der Seite (.chipbtn): 1,5px Linie, radius-s, Auswahl in Gruen-Ton. Vorher fuehrte von hier nur der Weg zurueck zur Startseite. */ .recht-nav{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px} .recht-nav-chip{display:inline-flex;align-items:center;min-height:44px;padding:8px 15px; font-family:var(--font);font-size:14px;font-weight:700;text-decoration:none;color:var(--ink); border:1.5px solid var(--line);border-radius:var(--radius-s);background:var(--card); transition:border-color .12s,background .12s} a.recht-nav-chip:hover{border-color:var(--gruen)} .recht-nav-chip.ist-hier{border-color:var(--gruen);background:var(--gruen-tint); color:var(--gruen);cursor:default} @media(max-width:576px){ .legalpage .rte{padding:22px 18px;border-radius:var(--radius-s)} .legalpage .rte .recht-titel{font-size:16.5px;gap:8px} .legalpage .rte .recht-nr{min-width:31px;height:24px;font-size:12px;padding:0 7px} .legalpage .rte p.recht-abschnitt{padding-top:20px} .recht-nav-chip{font-size:13.5px;padding:8px 12px} } .legalpage .rte ul,.legalpage .rte ol{margin:0 0 13px;padding-left:20px} .legalpage .rte li{margin:0 0 6px;font-size:15.5px;line-height:1.6;color:var(--graphit)} .legalpage .rte a{color:var(--ink);text-decoration:underline;text-underline-offset:2px} .legalpage .rte a:hover{color:var(--rost-dark)} .legalpage .rte table{width:100%;border-collapse:collapse;font-size:14px;margin:0 0 13px;display:block;overflow-x:auto} .legalpage .rte td,.legalpage .rte th{border:1px solid var(--line);padding:8px 10px;text-align:left} @media(max-width:576px){ .legalpage{padding:30px 0 64px} .legalpage .rte,.legalpage .rte p,.legalpage .rte li{font-size:15px} } /* Overlay-Eyebrow nicht unter den Schliessen-Button laufen lassen */ .artpanel .art-kat{display:block;padding-right:48px} /* Shop-Unterseiten (Produkt, Warenkorb, 404) im billigerWaermepumpe-Look */ .shoppage{padding:64px 0 84px} .shop-product-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start} /* EINE SPALTE, ABER IN ANDERER REIHENFOLGE (29.09.2026, Vorgabe Claras: "bei mobile bitte in der Produktseiten-Anzeige als erstes das Foto-Carousel zeigen, dann den Konfigurator und dann erst den Produkt-Infokasten"). DAS PROBLEM IST DIE SCHACHTELUNG: Galerie und Infokasten liegen beide in .shop-links, der Konfigurator in .shop-info daneben. Untereinandergelegt ergab das Galerie - Infokasten - Konfigurator: Wer auf dem Telefon kaufen will, scrollte erst an einem Kasten mit Reitern und Tabellen vorbei. Und `order` wirkt nur unter Geschwistern - solange die Galerie im einen und der Konfigurator im anderen Behaelter steckt, sind sie keine. display:contents LOEST DEN LINKEN BEHAELTER AUF: Seine Kinder werden selbst zu Rasterfeldern und stehen damit auf derselben Ebene wie .shop-info. Erst dadurch greift order ueber alle vier Teile. Das ist hier gefahrlos, weil .shop-links nichts zeichnet - es traegt nur min-width:0, und genau das muss auf die Kinder uebergehen (siehe darunter): Ein Rasterfeld mit min-width:auto laesst die Bilderspur ueber den Bildschirmrand hinauslaufen. DIE BESCHREIBUNG STEHT BEI DEN ZUBEHOERSEITEN an der Stelle des Infokastens - die beiden kommen nie zusammen vor (Kits zeigen den Kasten, Zubehoer den Text). Beide gehoeren ans Ende: Sie sind zum Nachlesen da, nicht zum Entscheiden. Nur bis 820px. Darueber stehen zwei Spalten nebeneinander, dort gibt es kein "davor". */ @media(max-width:992px){ .shop-product-grid{grid-template-columns:1fr;gap:26px} .shop-links{display:contents} .shop-links>*{min-width:0} .shop-galerie{order:1} .shop-info{order:2} .shop-links>.shop-desc{order:3} .shop-links>.shopify-section{order:4} } .shop-imgbox{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px;display:flex;align-items:center;justify-content:center} .shop-imgbox img{max-width:100%;height:auto;max-height:420px;object-fit:contain} .shop-info .art-title{margin-top:10px} .shop-price{font-size:26px;font-weight:700;margin-top:14px;color:var(--ink)} .shop-desc{margin-top:18px} .shop-buy{display:block;text-align:center;text-decoration:none;margin-top:24px;background:var(--rost);color:var(--ink);border:2px solid var(--ink);font-weight:800;font-size:16px;border-radius:var(--radius-s);padding:14px 22px} .shop-buy:hover{background:var(--rost-dark)} .shop-backlink{display:block;margin-top:14px;text-align:center;color:var(--gruen);font-weight:600;font-size:14.5px} .shop-cartform{margin-top:26px} .shop-cartlines{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:6px 20px} .shop-cartline{display:flex;align-items:center;gap:16px;padding:16px 0;border-bottom:1px dashed var(--line)} .shop-cartline:last-child{border-bottom:none} .shop-cartline img{width:64px;height:64px;object-fit:contain;background:var(--paper);border-radius:var(--radius-s);border:1px solid var(--line);flex:0 0 auto} .shop-cartmeta{flex:1;min-width:0} .shop-cartmeta b{display:block;font-size:15.5px} .shop-cartmeta small{display:block;color:var(--muted)} .shop-cartmeta a{font-size:13px;color:var(--muted)} .shop-cartqty input{width:64px;font-family:var(--mono);font-size:16px;padding:8px;border:1px solid var(--line);border-radius:var(--radius-s);background:var(--paper);color:var(--ink);text-align:center} .shop-cartprice{font-weight:700;white-space:nowrap} .shop-carttotal{display:flex;justify-content:space-between;font-weight:800;font-size:18px;margin-top:18px;padding-top:14px;border-top:1px solid var(--line)} .shop-cartactions{display:flex;gap:12px;margin-top:18px;flex-wrap:wrap} .shop-cartactions .btn{flex:1;min-width:200px} @media(max-width:576px){ .shop-cartline{flex-wrap:wrap} .shop-cartprice{margin-left:auto} } /* Aufmerksamkeits-Schuettler fuer die Nicht-geeignet-Warnung an der Kaufbox */ .banner.flash{animation:bwpShake .45s ease} @keyframes bwpShake{0%,100%{transform:none}20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}} @media (prefers-reduced-motion: reduce){.banner.flash{animation:none;outline:2px solid var(--warn)}} /* Checkout-Education-Walkthrough: Spotlight-Tour ueber vorausgewaehlte Positionen. .tour-spot hat keine eigene Flaeche - der riesige box-shadow-Spread erzeugt die Verdunkelung ringsherum, das Zielelement scheint durch (pointer-events:none, damit es dabei anklickbar bleibt). */ /* Erste Schatten-Schicht = harte Kontur um die Maske (Haring umrandet jede Form mit einer festen Linie), zweite = die Verdunkelung, dritte = der weiche Puls nach aussen. Als box-shadow statt border, damit die Kontur die per JS gesetzten Masse nicht verschiebt. */ .tour-spot{position:fixed;pointer-events:none;box-shadow:0 0 0 3px var(--rost),0 0 0 9999px rgba(20,15,10,.6),0 0 0 3px rgba(255,199,0,.55);border-radius:var(--radius-s);z-index:1400;transition:top .3s cubic-bezier(.2,.8,.2,1),left .3s cubic-bezier(.2,.8,.2,1),width .3s cubic-bezier(.2,.8,.2,1),height .3s cubic-bezier(.2,.8,.2,1);animation:tourPulse 1.8s ease-in-out infinite} @keyframes tourPulse{0%,100%{box-shadow:0 0 0 3px var(--rost),0 0 0 9999px rgba(20,15,10,.6),0 0 0 3px rgba(255,199,0,.5)}50%{box-shadow:0 0 0 3px var(--rost),0 0 0 9999px rgba(20,15,10,.6),0 0 0 11px rgba(255,199,0,0)}} /* Abstrahlende Striche rund um die Maske. Jeder Strich zeichnet sich per stroke-dashoffset von innen nach aussen und verschwindet wieder - deshalb die doppelte dasharray-Laenge. Versetzte animation-delays (im JS gesetzt) lassen sie umlaufen statt gemeinsam zu blinken. */ .tour-rays{position:fixed;pointer-events:none;z-index:1401;overflow:visible} .tour-rays line{stroke:var(--rost);stroke-width:3.5;stroke-linecap:round;stroke-dasharray:14 14;stroke-dashoffset:14;animation:tourRay 2.1s ease-out infinite} @keyframes tourRay{0%{stroke-dashoffset:14;opacity:0}22%{opacity:1}55%{stroke-dashoffset:0;opacity:.95}100%{stroke-dashoffset:-14;opacity:0}} @media (prefers-reduced-motion: reduce){.tour-rays line{animation:none;stroke-dashoffset:0;opacity:.7}} .tour-card{position:fixed;z-index:1402;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;width:280px;box-shadow:var(--shadow-lift);transition:top .3s cubic-bezier(.2,.8,.2,1),left .3s cubic-bezier(.2,.8,.2,1)} .tour-card.pop{animation:tourPop .4s cubic-bezier(.34,1.56,.64,1)} @keyframes tourPop{0%{opacity:0;transform:scale(.9) translateY(6px)}100%{opacity:1;transform:scale(1) translateY(0)}} .tour-progress{font-size:12px;font-weight:700;color:var(--bernstein-dark);letter-spacing:.03em;text-transform:uppercase} .tour-title{font-weight:800;font-size:15.5px;margin-top:4px} .tour-text{font-size:13.5px;color:var(--muted);margin-top:6px;line-height:1.45} /* Rueckfallebene zur Positionierung in positionTourStep(): passt die Karte in kein Fenster mehr (kleines Geraet, Tastatur offen, sehr langer Text), wird sie in sich scrollbar statt unten abgeschnitten. Die Navigation ist damit unter allen Umstaenden erreichbar. */ .tour-card{max-height:calc(100dvh - 24px);overflow-y:auto;overscroll-behavior:contain} .tour-nav{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:14px} .tour-nav .btn{width:auto;min-height:40px;padding:9px 14px;font-size:13.5px;transition:transform .15s cubic-bezier(.22,1,.36,1)} .tour-nav .btn:hover{transform:translateY(-1px)} @media (prefers-reduced-motion: reduce){.tour-spot,.tour-card{transition:none;animation:none}.tour-card.pop{animation:none}} @media(max-width:640px){ .tour-card{width:calc(100vw - 32px);left:16px!important} /* Striche bleiben auch mobil - sie brauchen keinen Platz, sondern sitzen auf der Maske. */ .tour-rays line{stroke-width:3} } /* Hardware/Service-Mini-Wizard in der Buybox: zwei .bb-step-Container, per JS umgeschaltet (wireStepNav). Wechsel ist ein kurzer Cross-Slide (raus nach links/rein von rechts oder umgekehrt) statt eines stummen Sprungs - .bb-leave/.bb-enter werden von wireStepNav() zeitversetzt gesetzt. Mini-Summenzeile bleibt so der Preis auch im Hardware-Step nie "verschwindet". */ .bb-step{transition:opacity .22s ease,transform .28s cubic-bezier(.2,.8,.2,1)} .bb-step.bb-leave{opacity:0;transform:translateX(-14px)} .bb-step.bb-enter{opacity:0;transform:translateX(14px)} @media (prefers-reduced-motion: reduce){.bb-step{transition:none}} .bb-minisum{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;color:var(--muted);font-weight:600;padding-bottom:10px;margin-bottom:14px;border-bottom:1px solid var(--line)} .bb-minisum .sum{font-family:var(--mono);font-weight:800;color:var(--ink);font-size:15px;transition:color .2s ease} .bb-minisum #bbMiniStepLabel,.bb-minisum #cmMiniStepLabel{color:var(--bernstein-dark);font-weight:800} /* Hilfe-Fallback (Topic 1e): kleiner CTA, transformiert sich animiert in drei Optionen - jede Option faehrt zeitversetzt (Stagger) leicht von unten rein statt alle drei stumm auf einmal einzublenden, das macht den Umschlag lebendiger. */ .help-cta{margin:18px 0;padding:14px 16px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-s)} .help-cta .help-ask{width:100%;transition:transform .15s cubic-bezier(.22,1,.36,1)} .help-cta .help-ask:hover{transform:translateY(-1px)} .help-options{display:flex;gap:8px;flex-wrap:wrap;max-height:0;opacity:0;overflow:hidden;transition:max-height .35s cubic-bezier(.2,.8,.2,1),opacity .2s ease} .help-options.in{max-height:200px;opacity:1} /* Nach dem Aufklappen faellt die Deckelung weg (Klasse setzt konfigurator.js beim transitionend) - sonst schneidet max-height:200px + overflow:hidden alles ab, was darueber hinausragt. Seit die vier Wege auf drei Zeilen plus Fusszeile stehen, ist die Liste hoeher als 200px: Der Fachbetrieb und der Satz darunter waren weder sichtbar noch klickbar. Dieselbe Falle wie beim Nachrichtenformular am 30.07.2026, dieselbe Loesung. Die 200px bleiben, damit die Auffahr-Animation unveraendert laeuft. */ .help-options.in.entfaltet{max-height:none;overflow:visible} /* DER HINWEIS JEDER KACHEL, leiser und enger gesetzt als ihre Beschriftung. Gilt seit dem 19.10.2026 fuer beide oberen Kacheln (Telefon und Nachricht), deshalb am .help-opt und nicht mehr nur am Telefon - der Mail-Satz stand bis dahin als Fusszeile unter der Reihe. SCHRIFT, GROESSE UND SCHNITT STEHEN HIER ALLE DREI AUSDRUECKLICH (19.10.2026, Clara: "in der gleichen Schriftgroesse, Breite und Schriftart wie der kleine Text bei Nachricht schreiben"). Sonst erbt jeder Hinweis die Schrift seiner Kachel - und die Telefonkachel traegt var(--mono) fuer die Rufnummer, die Mail-Kachel Urbanist. Zwei Hinweise, die dasselbe sagen sollen, saehen damit verschieden aus. letter-spacing aus demselben Grund: .help-opt-tel setzt 0, die andere Kachel laesst es normal. overflow-wrap ebenso: Das anywhere der Telefonkachel gilt der Rufnummer, die in der halben Zeile umbrechen koennen muss. Im Hinweis darunter liesse es Woerter mitten auseinanderfallen, waehrend der Mail-Hinweis sauber am Leerzeichen bricht - wieder ein sichtbarer Unterschied zwischen zwei Zeilen, die gleich aussehen sollen. */ .help-opt small{display:block;margin-top:3px;font-family:var(--font);font-size:10.5px; font-weight:500;letter-spacing:normal;line-height:1.3;color:var(--muted); text-align:center;white-space:normal;overflow-wrap:normal} .help-opt{flex:1 1 100px;display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 8px;border:1px solid var(--line);border-radius:var(--radius-s);background:var(--paper);color:var(--ink);text-decoration:none;font-size:12.5px;font-weight:700;cursor:pointer;opacity:0;transform:translateY(8px) scale(.96);transition:opacity .3s ease,transform .35s cubic-bezier(.22,1,.36,1),border-color .15s ease,box-shadow .15s ease} .help-options.in .help-opt{opacity:1;transform:translateY(0) scale(1)} .help-options.in .help-opt:nth-child(1){transition-delay:.02s} .help-options.in .help-opt:nth-child(2){transition-delay:.08s} .help-options.in .help-opt:nth-child(3){transition-delay:.14s} .help-opt:hover{border-color:var(--bernstein-dark);box-shadow:var(--shadow-lift);transform:translateY(-2px)} /* Fachbetrieb-Weitergabe: eigener Block, damit der Bestaetigungshaken nicht wie Kleingedrucktes unter den Feldern verschwindet. */ .prolead{margin-top:20px;padding-top:16px;border-top:1px dashed var(--line)} .prolead .sub{margin:4px 0 10px} .proconsent{display:flex;gap:10px;align-items:flex-start;margin-top:12px;font-size:13.5px;font-weight:600;line-height:1.45;cursor:pointer} .proconsent input{width:19px;height:19px;flex:0 0 auto;margin-top:1px;accent-color:var(--gruen)} .prolead .fineprint{margin-top:10px} /* --- Nachfrage vor der Anzahlung, wenn Foerderpunkte offen sind. Bewusst als Dialog und nicht als Banner: er soll den Klick unterbrechen, nicht nur danebenstehen. --- */ /* 1500: blockierender Dialog, liegt ueber allem - auch ueber der Erklaertour (1400-1402). Vorher stand hier 80, wodurch ihn Sticky-CTA und Modal ueberlagert haetten. */ .fg-overlay{position:fixed;inset:0;z-index:1500;background:rgba(28,25,22,.62);display:flex;align-items:center;justify-content:center;padding:20px;animation:fgIn .16s ease-out} @keyframes fgIn{from{opacity:0}to{opacity:1}} .fg-card{background:var(--card);border:2px solid var(--ink);border-radius:var(--radius);padding:24px;max-width:480px;width:100%;max-height:88vh;overflow-y:auto;animation:fgUp .2s cubic-bezier(.22,1,.36,1)} @keyframes fgUp{from{transform:translateY(12px)}to{transform:none}} .fg-eyebrow{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--rost)} .fg-card h3{margin:6px 0 8px;font-size:21px;line-height:1.25} .fg-sub{font-size:14.5px;line-height:1.5;margin:0 0 14px;opacity:.85} .fg-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px} .fg-list li{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-s);padding:11px 13px;display:flex;flex-direction:column;gap:4px} .fg-list b{font-size:15px} .fg-list span{font-size:13px;line-height:1.5;opacity:.82} .fg-hint{color:var(--gruen-dark,#2F5D3A);font-weight:700;opacity:1!important} .fg-nav{display:flex;flex-direction:column;gap:8px;margin-top:16px} .fg-nav .btn{margin-top:0} @media(min-width:577px){ /* Nebeneinander, aber die ergaenzende Handlung bleibt links und damit die erste. */ .fg-nav{flex-direction:row} .fg-nav .btn{flex:1} } /* --- Durchreiche in die Kasse: der Kunde kommt aus der Konfigurations-Mail und wird nach dem Wiederherstellen weitergereicht (direktZurKasse()). Der Schirm ueberdeckt den Rechner, der dahinter fuer eine knappe Sekunde aufgebaut wird - ohne ihn saehe das aus wie eine falsche Seite. Gleiche Bauteile wie der Foerder-Dialog, damit es nicht nach einem zweiten Gestaltungssystem aussieht. --- */ /* 1600: ueber allem, was der Rechner sonst aufbaut - Sticky-CTA (250), Warenkorb-Modal (300), Erklaertour (1400) und Foerder-Dialog (1500). Mit dem Foerder-Dialog kollidiert der Schirm nicht: checkout() ruft dort onAbort, und das raeumt ihn weg, bevor der Dialog erscheint. Die Stufe sichert nur den Normalfall - Schirm oben, bis die Kasse die Seite ersetzt. */ .kw-overlay{position:fixed;inset:0;z-index:1600;background:rgba(28,25,22,.72);display:flex; align-items:center;justify-content:center;padding:20px;animation:fgIn .16s ease-out} .kw-card{background:var(--card);border:2px solid var(--ink);border-radius:var(--radius); padding:28px 24px;max-width:400px;width:100%;text-align:center; display:flex;flex-direction:column;align-items:center;gap:10px; animation:fgUp .2s cubic-bezier(.22,1,.36,1)} .kw-card b{font-size:17px;line-height:1.3} .kw-card span{font-size:13.5px;line-height:1.5;opacity:.8} /* Der Abbruch ist bewusst leise und steht unten: er ist die Ausnahme, nicht das Angebot. Trotzdem echter Knopf und nicht nur ein Link - er wird auf dem Handy angetippt. */ .kw-card .btn.quiet{margin-top:8px;font-size:14px;padding:9px 16px} .kw-spin{width:34px;height:34px;border-radius:50%;border:3px solid var(--line); border-top-color:var(--rost);animation:kwDreh .7s linear infinite} @keyframes kwDreh{to{transform:rotate(360deg)}} /* Ohne Bewegung bleibt der Ring stehen und pulst nur schwach - er zeigt weiterhin an, dass etwas laeuft, ohne zu drehen. */ @media(prefers-reduced-motion:reduce){ .kw-overlay,.kw-card{animation:none} .kw-spin{animation:kwPuls 1.4s ease-in-out infinite} @keyframes kwPuls{0%,100%{opacity:1}50%{opacity:.35}} } /* --- Info-Blase neben dem Checkout. Liegt per position:fixed ueber der Seite und wird von positioniereBlase() an der Kaufbox ausgerichtet - der Checkout selbst wird dabei nicht angefasst und bleibt exakt stehen. --- */ /* 320: ueber Topbar (90), Sticky-CTA (250), Mobile-Bar (260) und dem Warenkorb-Modal (300). Sie kann aus dem Modal heraus geoeffnet werden und muss deshalb darueber liegen. */ .kb-bubble{position:fixed;z-index:320;background:var(--card);border:2px solid var(--ink);border-radius:var(--radius); box-shadow:var(--shadow-lift);overflow-y:auto;overflow-x:hidden;padding:20px; opacity:0;transform:translateX(-8px);transition:opacity .16s ease-out,transform .16s cubic-bezier(.22,1,.36,1)} .kb-bubble.in{opacity:1;transform:none} /* Bleibt beim Scrollen in der Blase sichtbar - sonst scrollt er bei langen Datenlisten weg. */ .kb-bubble-close{position:sticky;float:right;top:0;margin:-4px -4px 0 8px;width:32px;height:32px;border:1.5px solid var(--line); border-radius:50%;background:var(--card);cursor:pointer;font-size:14px;line-height:1;color:var(--ink);z-index:2} .kb-bubble-close:hover{border-color:var(--ink)} /* Kein Rechtsrand mehr noetig: der Schliessen-Knopf floatet im Textfluss mit. */ .kb-bubble-body{padding-right:0} .kb-bubble-body::after{content:"";display:block;clear:both} /* Klare Typo-Treppe: Bild, Name, Modell, Fliesstext, Daten. Jede Ebene deutlich kleiner als die vorige, damit die Blase auch bei 13 Datenzeilen ruhig bleibt. */ /* In der Blase stehen Bild und Titel UNTEREINANDER, nicht nebeneinander. Der Kopf ist per Vorgabe display:flex (Zeile). Zusammen mit width:100% am Bild fraß das Bild die ganze Zeile, und der Titel wurde auf Minimalbreite gequetscht - er stand dann senkrecht mit einem Buchstaben pro Zeile am rechten Rand (User-Meldung 30.07.2026, "Überschrift irgendwo außerhalb des Bildes"). Das margin-top am h3 zeigt, dass Untereinander von Anfang an gemeint war - nur die Richtung fehlte. */ .kb-bubble .bt-detail-head{display:block} .kb-bubble .bt-detail-head img{width:100%;max-height:150px;object-fit:contain;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-s);padding:8px} .kb-bubble .bt-detail-noimg{padding:22px 12px;text-align:center;font-size:13px;background:var(--paper);border:1px dashed var(--line);border-radius:var(--radius-s);opacity:.6} .kb-bubble .bt-detail-head h3{font-size:17.5px;margin:12px 0 0;line-height:1.3;letter-spacing:-.01em} .kb-bubble .bt-modell{font-size:12px;padding:5px 9px;margin:8px 0 12px} .kb-bubble .bt-detail-body p{font-size:13.5px;line-height:1.62;margin:0 0 4px} .kb-bubble .bt-detail-body h4{font-size:11.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;opacity:.55;margin:16px 0 6px} .kb-bubble .bt-technik{font-size:13px;grid-template-columns:minmax(120px,44%) 1fr;margin-top:2px} .kb-bubble .bt-technik dt{padding:7px 10px 7px 0;font-size:12.5px} .kb-bubble .bt-technik dd{padding:7px 0;font-size:12.5px;line-height:1.45} .kb-bubble .bt-norm{font-size:12px;line-height:1.55;padding:9px 11px;margin-top:12px} .kb-bubble .bt-quelle{font-size:11px;margin-top:7px} .kb-bubble details.mini{margin-top:16px;border-top:1px solid var(--line);padding-top:12px} .kb-bubble details.mini summary{font-size:13px} .kb-bubble .bt-pos{padding:7px 0} .kb-bubble .bt-pos-name{font-size:12.5px;line-height:1.4} .kb-bubble .bt-pos-qty{font-size:12px} .kb-bubble .bt-pos-img{width:34px;height:34px} /* Schmale Blase: Technikdaten einspaltig, sonst wird der Wert auf 4 Zeichen gequetscht. */ @media(max-width:1200px){ .kb-bubble .bt-technik{grid-template-columns:1fr} .kb-bubble .bt-technik dt{padding:7px 0 0;font-size:12px;opacity:.62} .kb-bubble .bt-technik dd{padding:1px 0 7px;border-top:none} } /* Kein Platz daneben: dann zentriert als Karte, statt halb aus dem Bild zu ragen. */ .kb-bubble--mittig{left:50%!important;top:50%!important;transform:translate(-50%,-50%); width:min(520px,calc(100vw - 32px))!important;max-height:86vh!important} .kb-bubble--mittig.in{transform:translate(-50%,-50%)} /* MOBIL: die Blase ist keine Blase mehr, sondern eine Karte ueber der Seite. Gemessen 30.07.2026 auf 390px: die Ueberschrift ("Warmwasserspeicher 200 l") stand 109px rechts AUSSERHALB des Bildes, weil die Blase per JS neben ihren Anker gesetzt wird und daneben auf einem Handy kein Platz ist. Statt die Rechnerei zu flicken, wird die Position hier komplett uebersteuert - neben etwas passt auf 390px grundsaetzlich nichts. !important ist noetig, weil positioniereBlase() left/top/width als Inline-Stil setzt. */ @media(max-width:768px){ .kb-bubble,.kb-bubble--mittig{ left:12px!important;right:12px!important;width:auto!important; top:50%!important;transform:translateY(-50%)!important; max-height:min(82vh,700px)!important;padding:18px 16px} .kb-bubble.in,.kb-bubble--mittig.in{transform:translateY(-50%)!important} /* Ueberschrift und lange Datenwerte duerfen umbrechen statt hinauszulaufen. */ .kb-bubble .bt-detail-head h3{font-size:16.5px} .kb-bubble .bt-technik dd,.kb-bubble .bt-technik dt{overflow-wrap:anywhere} /* Schliessen-Knopf auf Fingergroesse. */ .kb-bubble-close{width:40px;height:40px} /* Sichtbar machen, dass es in der Karte weitergeht. */ .kb-bubble::after{content:"";position:sticky;bottom:-18px;display:block;height:26px;margin:0 -16px -18px; background:linear-gradient(to top,var(--card),rgba(255,255,255,0));pointer-events:none} } /* Der geoeffnete Info-Knopf bleibt sichtbar markiert, solange seine Blase offen ist. */ .kb-info.is-offen{border-color:var(--gruen);background:var(--gruen-tint)} /* --- Vorauswahl im gefuehrten Modus: Begruendung unter der Zeile. Sie bleibt auch stehen, wenn der Kunde abwaehlt - er soll wissen, worauf er verzichtet. --- */ /* --- Tippziele auf Mobil: alles Bedienbare im Checkout auf mindestens 44px. Gemessen im Browser bei 360/390/430px - vorher lagen Info-Knoepfe, Mengen-Stepper und Ankreuz-Zeilen bei 40 bis 43px, die Kaestchen selbst bei 19px. Auf einem Geraet ohne Maus entscheidet das darueber, ob man beim ersten Versuch trifft. --- */ @media(max-width:768px){ /* 44px Tippflaeche bleibt, aber nur 34px davon binden Layoutbreite - der Rest ragt per negativem Aussenabstand in den Zeilenrand. So bekommt der Name mehr Platz. */ .kb-info,.svc-info,.sd-info-btn,.xr-seite{min-width:34px;min-height:44px;margin-right:0} .qtystep button{min-width:44px;min-height:44px} /* An der ERSTEN Textzeile ausrichten statt vertikal zentrieren: bei zwei- oder dreizeiligen Namen schwebte das Kaestchen sonst mittig daneben. Die 44px bleiben als Tippziel erhalten, jetzt ueber Innenabstand statt ueber Zentrierung. */ .buyline{align-items:flex-start} .buyline label{min-height:44px;align-items:flex-start;padding-top:9px;padding-bottom:9px} .buyline label input[type=checkbox],.buyline label input[type=radio]{margin-top:1px} /* Preis und Info-Knopf auf dieselbe Linie wie der Name. */ .buyline .svc-right{align-self:flex-start;padding-top:9px} .buyline>span:first-child{padding-top:9px} .buyline label+.svc-right{padding-top:9px} /* AUSNAHME Bildzeilen (13.08.2026): Wo ein Vorschaubild steht, ist die linke Spalte 44px hoch und ihr Text sitzt mittig darin - ein oben ausgerichteter Betrag stand dann sichtbar ueber dem Namen statt daneben (gemessene Zeilenhoehe 73px bei der Kit-Zeile). Dort wird zentriert, nicht an der ersten Textzeile ausgerichtet. Chip-Zeilen sind ausgenommen: die tragen ihre Chips unter dem Namen und brauchen den Betrag weiterhin oben. */ .buyline:not(:has(.spchips)):has(.thumb){align-items:center} .buyline:not(:has(.spchips)):has(.thumb)>.price, .buyline:not(:has(.spchips)):has(.thumb)>.svc-right{align-self:center;padding-top:0} /* Mengen-Stepper: Zeile darf umbrechen, Stepper bleibt rechts und oben buendig. */ .buyline .qtystep{align-self:flex-start} /* 19px trifft man auf Glas schlecht. Der Klickbereich ist ohnehin das ganze Label, aber das Ziel muss auch sichtbar gross genug sein. */ .buyline input[type=checkbox],.buyline input[type=radio],.proconsent input{width:24px;height:24px} .spchips .chipbtn,.unitchips .chipbtn,.hlb-wahl .chipbtn{min-height:44px} .hlb-undo{min-height:44px;display:inline-flex;align-items:center} } /* --- Seitlich scrollbare Bereiche brauchen eine Anzeige, dass es weitergeht. Seit die Scrollbalken ausgeblendet sind, waere die Kit-Vergleichstabelle (640px Inhalt in 346px Fenster) sonst stumm abgeschnitten. Weiche Kante rechts plus Texthinweis. --- */ .kitcompare{position:relative} .kitcompare::after{content:"";position:absolute;top:0;right:0;bottom:0;width:34px;pointer-events:none; background:linear-gradient(to right,transparent,var(--paper));opacity:1;transition:opacity .2s} /* Sobald der Bereich ganz nach rechts gescrollt ist, verschwindet die Kante wieder. */ .kitcompare.am-ende::after{opacity:0} /* AUF DEM HANDY STEHT DIE TABELLE GEKIPPT (28.09.2026, Vorgabe Claras: "die Leistungsdaten im Vergleich bei Mobile - tausche gerne die x- und y-Achse, dadurch muss man nicht zur Seite scrollen"). Sechs Spalten passen nicht in 390px, drei bis vier schon: Gekippt stehen die Kits nebeneinander und die Messpunkte untereinander. Der Wisch entfaellt damit ganz. ZWEI SCHRITTE ZUVOR, BEIDE VON HEUTE: Erst zerfiel die Tabelle in eine Karte je Kit - vergleichen liess sich damit nichts (Vorgabe: "in einer Tabelle gemeinsam"). Dann stand sie als eine Tabelle da, aber 480px breit und damit wischbar. Das hier ist die Fassung, die beides loest. GEKIPPT WIRD MIT GRID, NICHT MIT ZWEITER TABELLE: display:contents loest thead, tbody und tr auf, uebrig bleiben die Zellen selbst als Rasterfelder. grid-auto-flow:column fuellt sie dann spaltenweise - die sechs Kopfzellen bilden die linke Spalte, jede Kit-Zeile wird zu einer eigenen Spalte. Das Markup bleibt eine richtige Tabelle mit Kopfzeile, fuer Suchmaschinen wie fuer Vorlesesoftware. DIE SECHS ZEILEN SIND DIE SECHS SPALTEN DER QUELLE (Kit, vier Temperaturen, Preis). Kaeme eine Spalte dazu, muesste die Zahl hier mit - deshalb steht sie an genau einer Stelle. Die Kit-Spalten daneben zaehlt das Raster selbst, ob drei oder vier. Der Wisch-Hinweis und die weiche Kante regeln sich von selbst: markiereScrollbereiche() sieht, dass nichts mehr ueberlaeuft, setzt "am-ende" und legt keinen Hinweis an. */ @media(max-width:640px){ /* EINE ZEILE AUF DEM TELEFON (Vorgabe Claras 28.09.2026: "bei Mobile den Titel 'Alle Leistungsdaten im Vergleich' bitte in eine Zeile"). Bei 20px und Schriftschnitt 800 braucht die Zeile rund 350px - auf einem 390er Schirm stehen nach Abzug der Spaltenraender 346 zur Verfuegung. Es fehlten also wenige Pixel, und die Ueberschrift brach in zwei Zeilen, von denen die zweite ein Wort trug. Die neue Spanne laesst Luft: 4.4vw ergeben bei 390px etwa 17px, bei 320px noch 15. Kein white-space:nowrap - der Titel ist ein Feld im Editor, und ein laengerer Text soll umbrechen duerfen statt aus der Seite zu laufen. */ .kitcompare h2{font-size:clamp(15px,4.4vw,19px)} /* Auf 0 am 30.09.2026, aus demselben Grund wie oben: Der Vergleich ist eine eigene Section mit eigenem Innenabstand, ein zweiter Abstand kaeme obendrauf. */ .kitcompare{overflow-x:visible;margin-top:0} /* DIE BESCHRIFTUNG BRAUCHT EINE EIGENE ZEILE (15.10.2026, Meldung Claras mit Bildschirmfoto: In der Vergleichstabelle standen die Preise durcheinander, "6.699€6.999" uebereinander, und die Kopfzelle "Preis" sass oben neben der Beschriftung statt unten in der Spalte). WAS SCHIEFGING: Die Tabelle wird hier zum Raster umgeklappt und spaltenweise gefuellt - sechs Zellen je Kit, eine Spalte je Kit. Im Markup steht aber vor der ersten Zelle noch ein ("Leistung bei 35 °C Vorlauf · Fussbodenheizung"), und in einem display:grid ist auch die Beschriftung ein Rasterkind. Sie besetzte damit die erste Zelle, und ALLES danach rutschte um genau eine Position weiter: Die sechste Kopfbeschriftung ("Preis") landete oben in der zweiten Spalte, der Preis des 5-kW-Kits oben in der dritten, und am Ende standen zwei Preise in derselben Zelle. ZWEI ZEILEN LOESEN ES. Die Beschriftung bekommt die erste Rasterzeile ueber die volle Breite, und das Raster bekommt eine Zeile mehr (sieben statt sechs) - die Zellen fuellen dann die Zeilen zwei bis sieben jeder Spalte, also wieder sechs je Kit. FUENF SPALTEN STATT VIER IM RASTER: Seit dem 13.10.2026 gibt es vier Kits, das Raster nannte aber nur vier Spalten (Beschriftung + drei). Die fuenfte entstand als implizite Spalte und war damit die einzige ohne minmax(0,1fr) - daher die gequetschte letzte Spalte mit dem dreizeiligen "DIY-Kit 12 kW". Jetzt sind alle fuenf benannt. */ .kitcompare table{display:grid;min-width:0;width:100%;font-size:12px; grid-template-rows:auto repeat(6,auto); grid-template-columns:1.15fr repeat(4,minmax(0,1fr)); grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)} .kitcompare caption{grid-row:1;grid-column:1 / -1} .kitcompare thead,.kitcompare tbody,.kitcompare tr{display:contents} .kitcompare th,.kitcompare td{padding:9px 6px;font-size:12px; display:flex;align-items:center;justify-content:center;text-align:center} /* Die linke Spalte sind die frueheren Kopfzellen: Sie beschriftet die Zeilen. */ .kitcompare th{justify-content:flex-start;text-align:left;font-size:10.5px;line-height:1.25} /* Die Kit-Namen stehen jetzt als Kopf ueber ihrer Spalte, nicht mehr am Zeilenanfang. */ .kitcompare td:first-child{font-weight:800;font-size:11.5px;line-height:1.2; align-items:flex-end;text-align:center} } /* Weiter-Verweis am Ende jeder Seite - nur Mobile, siehe setzeWeiterBlock() in konfigurator.js. Auf Desktop steht die Reiter-Leiste dauerhaft sichtbar, dort waere der Block Doppelung. */ .panel-weiter{display:none} @media(max-width:992px){ .panel-weiter{display:block;margin:44px 0 0;padding-top:26px;border-top:1px solid var(--line)} .pw-next{display:flex;align-items:center;gap:12px;text-decoration:none;background:var(--card); border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;color:var(--ink)} .pw-next:hover{border-color:var(--gruen)} .pw-kicker{font-family:var(--mono);font-size:11px;font-weight:700;text-transform:uppercase; letter-spacing:.06em;color:var(--muted);flex:0 0 auto} .pw-titel{font-size:17px;font-weight:800;flex:1 1 auto} .pw-pfeil{font-family:var(--mono);font-weight:700;color:var(--muted);flex:0 0 auto} /* Genau ZWEI Reihen (User-Vorgabe 30.07.2026): der grosse Knopf, darunter EINE Zeile mit den uebrigen Zielen. Mit 13.5px und 13px Innenabstand brachen die fuenf Kuerzel auf zwei Zeilen um - dann waeren es drei Reihen. Enger gesetzt passen sie in eine. Hoehe bleibt bei 40px, damit die Flaeche mit dem Daumen erreichbar bleibt. */ .pw-rest{display:flex;flex-wrap:nowrap;gap:6px;margin-top:10px} .pw-rest a{flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center; min-height:40px;padding:0 8px;font-size:12.5px;font-weight:700;text-decoration:none; white-space:nowrap;color:var(--ink);background:var(--card); border:1px solid var(--line);border-radius:var(--radius-s)} .pw-rest a:hover{border-color:var(--gruen)} /* Der grosse Knopf darf kompakter sein, er traegt nur zwei Worte. */ .panel-weiter{margin-top:36px;padding-top:22px} /* Wenn der Block zwischen zwei Sections steht statt in einer .wrap: gleiche Spalte wie der uebrige Inhalt, sonst laeuft er randlos ueber die volle Breite. */ .panel-weiter.pw-standalone{max-width:var(--seite-max);margin-left:auto;margin-right:auto; padding-left:22px;padding-right:22px;margin-bottom:8px} .pw-next{padding:13px 16px} .pw-titel{font-size:16px} } /* Aufnahme fuer eine FAQ-App im Fragen-Reiter (App-Block, siehe billigerwaermepumpe-faq). Nur Abstand und Breite - die App bringt ihr eigenes Aussehen mit, dem greifen wir nicht rein. */ /* Liegt ein App-Block in der Section, sind unsere eigenen Fragen ausgeblendet - die App ist dann der einzige Inhalt. Eine Trennlinie darueber wuerde also nichts trennen. */ .faq-app{margin-top:8px} .faq-app :is(img,iframe,table){max-width:100%} @media(max-width:768px){ .faq-app{margin-top:4px} } .kitcompare-hint{display:none} @media(max-width:768px){ .kitcompare-hint{display:block;font-size:12px;font-weight:700;opacity:.65;margin:0 0 6px} .kitcompare-hint::after{content:" 92";font-family:var(--mono)} } /* Unsichtbares Sprungziel fuer /#rechner. scroll-margin-top haelt die sticky Topbar frei, sonst verschwindet die Ueberschrift darunter. */ .anker{display:block;height:0;scroll-margin-top:78px} .vw-grund{font-size:12.5px;line-height:1.55;opacity:.75;padding:2px 0 4px 29px;max-width:52ch} /* Hauseinfuehrung noch nicht entscheidbar: Erklaerung statt Auswahl. */ .vw-offen-box{background:var(--sand-deep,var(--paper));border:1.5px dashed var(--line);border-radius:var(--radius-s);padding:12px 14px;display:flex;flex-direction:column;gap:6px} .vw-offen-box b{font-size:14.5px} .vw-offen-box span{font-size:13px;line-height:1.55;opacity:.85} .vw-offen-box .btn{margin-top:6px;width:auto;align-self:flex-start;padding:9px 16px;font-size:14px} @media(max-width:576px){ .vw-grund{padding-left:0} .vw-offen-box .btn{width:100%} } /* --- Hinweis, dass die Hybrid-Abbildungen KI-generiert sind. --- */ .ki-stern{font-size:.62em;vertical-align:super;font-weight:700;opacity:.75;margin-left:1px} .ki-fussnote{margin-top:18px;padding-top:12px;border-top:1px dashed var(--line);font-size:12px;line-height:1.6;opacity:.7} /* --- Technische Daten auf der Bauteil-Detailseite. Definitionsliste statt Tabelle: bricht mobil sauber untereinander um, ohne dass eine Spalte gequetscht wird. --- */ .bt-modell{font-family:var(--mono);font-size:13px;font-weight:700;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-s);padding:7px 11px;margin-bottom:12px;display:inline-block} .bt-technik{display:grid;grid-template-columns:minmax(140px,38%) 1fr;gap:0;margin:10px 0 0;font-size:14px} .bt-technik dt{padding:9px 12px 9px 0;border-top:1px solid var(--line);font-weight:700;opacity:.78} .bt-technik dd{padding:9px 0;border-top:1px solid var(--line);margin:0;font-family:var(--mono);font-size:13.5px;overflow-wrap:anywhere} .bt-norm{margin-top:14px;font-size:13px;line-height:1.55;background:var(--gruen-tint);border:1px solid var(--gruen);border-radius:var(--radius-s);padding:10px 12px} .bt-quelle{margin-top:8px;font-size:12px;opacity:.6} @media(max-width:576px){ /* Einspaltig: Label ueber Wert, sonst bleiben fuer den Wert ~120px uebrig. */ .bt-technik{grid-template-columns:1fr} .bt-technik dt{padding:9px 0 0;border-top:1px solid var(--line)} .bt-technik dd{padding:2px 0 9px;border-top:none} } /* --- Heizlastberechnung: Pflicht fuer die Foerderung, aber in Eigenleistung erlaubt. Der Kunde muss aktiv einen der beiden Wege waehlen, sonst steht dort "noch nicht foerderfaehig" - deshalb sitzen die Knoepfe IM Warnbanner und nicht daneben. --- */ .hlb-warn{margin-top:8px} .hlb-wahl{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px} .hlb-wahl .chipbtn{font-family:var(--font);font-weight:700;font-size:13.5px;min-height:40px;min-width:0;padding:8px 14px;background:var(--card)} .hlb-undo{background:none;border:none;padding:0 0 0 6px;font:inherit;font-size:12.5px;font-weight:700;color:var(--ink);opacity:.6;text-decoration:underline;cursor:pointer} .hlb-undo:hover{opacity:1} /* Die Eigenleistung bei der Heizlastberechnung ist erlaubt, aber nicht das Ende der Kette - die Berechnung muss in die Nachweisdokumentation des Fachbetriebs. Der Hinweis steht deshalb direkt an der Wahl und an der Bestaetigung, nicht im Kleingedruckten weit weg. */ .hlb-nachweis{display:block;font-size:12.5px;line-height:1.55;opacity:.78;margin-top:6px;font-weight:500} .hlb-fussnote{font-size:12.5px;line-height:1.55;opacity:.8;margin-top:10px} @media(max-width:576px){ .hlb-wahl{flex-direction:column} .hlb-wahl .chipbtn{width:100%} } /* --- Vamo-Kurzformular (renderVamoGaps): eine Seite, Funnel-Optik, schnell durchtippbar. --- */ .vg-box{max-width:640px;margin:20px auto 0} /* Sichtbarer Beleg, dass die Rechner-Antworten mitgehen - das ist der Grund, warum das Formular so kurz sein darf. */ .vg-known{background:var(--gruen-tint);border:1.5px solid var(--gruen);border-radius:var(--radius-s);padding:12px 14px} .vg-known-title{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);opacity:.72;margin-bottom:8px} .vg-chips{display:flex;flex-wrap:wrap;gap:6px} .vg-chip{font-family:var(--mono);font-size:12.5px;font-weight:700;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-pill);padding:3px 10px} .vg-form{margin-top:6px} .vg-row{padding:14px 0;border-bottom:1px dashed var(--line)} .vg-q{font-size:15px;font-weight:800;margin-bottom:9px} .vg-req{color:var(--rost);font-style:normal;margin-left:4px} .vg-opts{display:flex;flex-wrap:wrap;gap:7px} /* Kompakter als die Funnel-Kacheln: hier sollen zehn Zeilen ohne endloses Scrollen draufpassen. */ .vg-opts .chipbtn{font-family:var(--font);font-weight:700;font-size:14px;min-height:42px;min-width:0;padding:8px 13px} .vg-fehlt .vg-q{color:var(--rost)} .vg-fehlt .vg-opts .chipbtn{border-color:var(--rost)} .vg-num{display:flex;align-items:center;gap:10px} .vg-num input{width:120px;text-align:center} .vg-num span{font-family:var(--mono);font-weight:700;font-size:15px} .vg-kontakt{margin-top:18px} /* Kontaktfelder sind Fliesstext, nicht Zahlen - die globale Mono-/Zentriert-Regel fuer text/tel/number gilt hier bewusst nicht. */ .vg-kontakt input[type=text],.vg-kontakt input[type=tel],.vg-kontakt input[type=email]{ font-family:var(--font);font-size:16px;font-weight:600;text-align:left;padding:13px 14px;margin-top:8px} .vg-grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px} .vg-grid2 input{margin-top:8px} .vg-grid-adr{display:grid;grid-template-columns:1fr;gap:8px} .vg-grid-adr input:first-child{grid-column:1/-1} .vg-optional{opacity:.82;font-size:12.5px} @media(min-width:577px){ .vg-grid-adr{grid-template-columns:110px 1fr} } @media(max-width:576px){ .vg-grid2{grid-template-columns:1fr} /* Unter 16px loest iOS beim Fokus einen Auto-Zoom aus - siehe Mobile-Runde 3. */ .vg-kontakt input{font-size:16px} .vg-opts .chipbtn{font-size:13.5px;padding:8px 11px} } /* ---- DIE AUFTEILUNG DER VIER WEGE (19.10.2026, Vorgabe Claras) ---- Anrufen und "Nachricht schreiben" teilen sich die erste Zeile, Tommy steht darunter, der Fachbetrieb zuletzt. Die Reihenfolge selbst steht im Markup (siehe renderHelpCta), hier stehen nur die Breiten. calc(50% - 4px) und nicht 1 1 100px: Bei gap:8px braucht jede Haelfte die halbe Luecke abgezogen, sonst passen zwei nicht nebeneinander und die zweite faellt um. Die Grundregel .help-opt traegt flex:1 1 100px - das reicht fuer "zwei pro Zeile", nicht fuer "genau diese zwei". DIE NUMMER DARF UMBRECHEN. In der halben Zeile bleiben rund 114 Punkte Inhalt; die +49 221 82826808 misst in 13er Schreibmaschinenschrift gut 120 und bricht deshalb am Leerzeichen in zwei Zeilen. Ohne white-space:normal stuende sie in einer Zeile und schoebe die Kachel ueber ihren Rand - die Nummer ist der Inhalt der Kachel, sie darf nicht als erstes verschwinden. */ .help-opt-tel,.help-chat-btn{flex:1 1 calc(50% - 4px)} .help-opt-tel{font-family:var(--mono);font-size:13px;letter-spacing:0;line-height:1.25; white-space:normal;overflow-wrap:anywhere;text-align:center} /* Tommy und der Fachbetrieb nehmen die ganze Zeile - als Zeile gesetzt (Zeichen neben Wort) bleiben sie dabei halb so hoch wie als Spalte, das Fenster waere sonst unnoetig lang. */ .help-bot-btn,.help-vamo{flex:1 1 100%;flex-direction:row;justify-content:center;gap:9px} .help-opt-ico{font-size:20px} .help-opt-soon{opacity:.5;cursor:default} .help-opt-soon:hover{border-color:var(--line)} .help-chat-form{max-height:0;opacity:0;overflow:hidden;transition:max-height .35s cubic-bezier(.2,.8,.2,1),opacity .3s ease} .help-chat-form.in{max-height:380px;opacity:1} /* Nach dem Aufklappen faellt die Deckelung weg (Klasse setzt konfigurator.js beim transitionend). Sonst schneidet max-height:380px + overflow:hidden die Antwort unter dem Senden-Knopf ab - der "Nachricht abschicken"-Button war dadurch weder sichtbar noch klickbar. Die 380px bleiben, damit die Auffahr-Animation unveraendert laeuft. */ .help-chat-form.in.entfaltet{max-height:none;overflow:visible} .help-chat-form .field,.help-chat-form .emailrow{margin-top:8px} .help-chat-done:not(:empty){margin-top:10px} .help-chat-done .btn{display:block;text-align:center;margin-top:10px} .help-chat-back{width:auto;margin-top:0;padding:6px 10px 6px 0;font-size:13px} /* DER RUECKWEG SITZT IN DER KOPFZEILE, GEGENUEBER DEM KREUZ (19.10.2026, Vorgabe Claras: "den Zurueck-Button bitte auf der gleichen Hoehe wie das x rechts und auch nur einen Pfeil"). Deshalb absolut positioniert mit denselben Werten wie .help-fab-close, nur nach links gespiegelt - gleiche 40x40-Flaeche, gleiches top:2px, gleiche Farbe. DER BEZUGSPUNKT IST DAS PANEL, nicht der Chat: .help-fab-panel traegt position:relative, .help-bot nicht. Dessen overflow:hidden (die Auffahr-Animation) schneidet den Pfeil nicht ab - ein overflow-Vorfahr clippt absolut Positionierte nur, wenn er selbst deren Bezugspunkt ist oder darueber liegt. Im geschlossenen Zustand traegt .help-bot display:none, der Pfeil ist also mit weg. DAS [hidden] BRAUCHT TROTZDEM SEINE EIGENE REGEL: display:flex hier schlaegt die eingebaute Regel des Browsers fuer [hidden], genau wie vorher .btn. Ohne diese Zeile stuende der Pfeil IMMER da - auch auf dem Weg ueber den Tommy-Knopf, wo er gerade nicht hin soll. Dieselbe Falle wie bei .feldfehler, .rechner-fuss und .bb-zurueck. */ .help-bot-back{position:absolute;top:2px;left:4px;width:40px;height:40px;display:flex; align-items:center;justify-content:center;background:none;border:0;font-size:20px; line-height:1;color:var(--muted);cursor:pointer;padding:0;margin:0} .help-bot-back:hover{color:var(--ink)} .help-bot-back[hidden]{display:none} /* Der Chat-Kopf beginnt in derselben Ecke. Solange der Pfeil da ist, rueckt er aus seinem Weg - nur dann, sonst stuende das Maskottchen bei direktem Einstieg ohne Grund eingerueckt. :has() ist im Theme bereits im Einsatz (siehe die Titel-Regel weiter unten). */ .help-fab-panel:has(.help-bot-back:not([hidden])) .help-bot-kopf{padding-left:34px} @media (prefers-reduced-motion: reduce){.help-options,.help-opt,.help-cta .help-ask,.help-chat-form{transition:none}.help-options.in .help-opt{transition-delay:0s}} /* Topic 5: Chat-Maskottchen (Rohrzange mit Augen) - taucht als kleines Icon im Chat-CTA und als Kopf des Chat-Formulars auf. Augen blinzeln in unregelmaessigem Rhythmus (zwei versetzte Keyframe-Laeufe statt synchronem Blinzeln, wirkt weniger mechanisch). */ .mascot-svg{color:var(--bernstein-dark);flex:0 0 auto;display:block} .help-opt-ico .mascot-svg{color:var(--ink)} .mascot-eye{transform-box:fill-box;transform-origin:center;animation:mascotBlink 5.2s ease-in-out infinite} .mascot-eye:nth-child(6){animation-delay:.18s} @keyframes mascotBlink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.12)}} .help-chat-head{display:flex;align-items:center;gap:10px;margin:4px 0 10px} .help-chat-head p{font-size:13.5px;color:var(--muted);line-height:1.4;margin:0} @media (prefers-reduced-motion: reduce){.mascot-eye{animation:none}} /* "Schon fuer dich vorausgewaehlt"-Hinweis: kurzes warmes Aufleuchten auf foerder/ibn/fundament beim ersten Anblick der Buybox, macht die Vorauswahl spuerbar statt nur behauptet. */ .svc-preselect-flash{animation:svcPreselectGlow 1.8s ease} @keyframes svcPreselectGlow{0%{background:rgba(156,116,51,.22)}70%{background:rgba(156,116,51,.1)}100%{background:transparent}} @media (prefers-reduced-motion: reduce){.svc-preselect-flash{animation:none}} /* Confirm-to-Deselect-Banner (Topic 1b): faehrt beim Erscheinen kurz von oben ein statt stumm aufzupoppen. */ .kb-confirm{animation:kbConfirmIn .3s cubic-bezier(.2,.8,.2,1)} @keyframes kbConfirmIn{0%{opacity:0;transform:translateY(-6px)}100%{opacity:1;transform:translateY(0)}} .kb-confirm .btn{transition:transform .15s cubic-bezier(.22,1,.36,1)} .kb-confirm .btn:hover{transform:translateY(-1px)} @media (prefers-reduced-motion: reduce){.kb-confirm{animation:none}} /* ---- UX-Runde 24.07.2026 ---- */ /* Kauf-Button waehrend der drei Cart-Requests: bewusst NICHT der graue :disabled-Look, der liest sich wie "gesperrt". Rost bleibt, ein Spinner zeigt "laeuft gerade". */ .btn.is-busy,.btn.is-busy:disabled{background:var(--rost);color:var(--ink);cursor:progress;opacity:.85} .btn.is-busy::before{content:"";display:inline-block;width:14px;height:14px;margin-right:9px;vertical-align:-2px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:bwpSpin .7s linear infinite} @keyframes bwpSpin{to{transform:rotate(360deg)}} @media (prefers-reduced-motion: reduce){.btn.is-busy::before{animation:none;border-top-color:currentColor;opacity:.5}} /* Laufende Summe klebt am oberen Rand der Kaufbox: Services, Material und Eigenleistung machen die Box mehrere Bildschirme lang - ohne sticky scrollt der Preis weg, sobald man etwas dazubucht. Bewusst nur in der Kaufbox: dort ist die Seite der Scroll-Container und die Liste wird lang. Im Direktkauf-Modal scrollt .modalcard selbst und ist auf 88vh gedeckelt - da bringt sticky wenig und wuerde nur mit dem Schliessen-Button um die obere Kante konkurrieren. Negative Seitenraender = .buybox-Padding, damit die Leiste randlos deckt und beim Scrollen nichts seitlich an ihr vorbeilaeuft. Die Regel selbst steht jetzt gebuendelt weiter oben ("Klebende Kopfleiste der Kaufbox"). Sie stand hier ein zweites Mal und gewann als spaetere Regel - mit top:64px und z-index:4 hat sie die Ueberarbeitung von oben still ueberschrieben. Nicht wieder aufteilen. */ /* Optionaler Einbau-Fahrplan in der Kaufbox: die sieben Schritte der Startseite, aber mit SEINEN Positionen einsortiert. Zugeklappt, oeffnet nur auf Klick. */ .fp-details{margin-top:14px} .fp-frame{display:flex;flex-direction:column;gap:3px;background:var(--sand);border-radius:var(--radius-s);padding:12px 14px;margin-bottom:14px} .fp-frame span{font-size:13px;color:var(--muted);line-height:1.45} .fp-list{list-style:none;display:flex;flex-direction:column;gap:10px} /* Der Zustand (dein Schritt / unser Schritt) sitzt auf der NUMMER, nicht als farbiger Balken an der Kante: die Nummer ist ohnehin das, was man zuerst liest, und es passt zur Punkt-Sprache der Roadmap. Der frühere 3px-Akzentrand links war reine Dekoration mit demselben Informationswert. */ .fp-step{border:1px solid var(--line);border-radius:var(--radius-s);background:var(--paper);padding:12px 14px} .fp-step--wir{background:var(--card)} .fp-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap} .fp-nr{display:inline-flex;align-items:center;justify-content:center;min-width:26px;padding:3px 7px;border-radius:var(--radius-xs);font-weight:800;font-size:12.5px;background:var(--rost);color:var(--ink)} .fp-step--wir .fp-nr{background:var(--gruen);color:#fff} .fp-titel{font-weight:800;font-size:14.5px;flex:1;min-width:0} .fp-wann{font-size:12px;font-weight:700;color:var(--muted);white-space:nowrap} .fp-text{font-size:13px;color:var(--muted);line-height:1.5;margin-top:5px} .fp-items{list-style:none;margin-top:8px;display:flex;flex-direction:column;gap:5px} .fp-items li{font-size:13.5px;font-weight:600;padding-left:15px;position:relative} .fp-items li::before{content:"";position:absolute;left:0;top:7px;width:6px;height:6px;border-radius:50%;background:var(--gruen)} .fp-tools{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px} .fp-offen,.fp-werkzeug{margin-top:14px;padding-top:12px;border-top:1px dashed var(--line)} .fp-offen b,.fp-werkzeug b{font-size:13.5px} /* Dauerhafter Hilfe-Zugang unten rechts. z-index bewusst UNTER Sticky-Leiste (70), Drawer (80) und Modal (300) - er soll begleiten, nicht sich vordraengen. Statt sich zu ueberlappen weicht er der Sticky-Leiste nach oben aus (.bwp-sticky-on) und verschwindet waehrend der Tour ganz. */ .help-fab{position:fixed;right:18px;bottom:18px;z-index:68;display:flex;flex-direction:column;align-items:flex-end;gap:10px;transition:bottom .25s cubic-bezier(.2,.8,.2,1),right .22s cubic-bezier(.2,.8,.2,1)} html.bwp-sticky-on .help-fab{bottom:calc(80px + env(safe-area-inset-bottom))} html.bwp-tour-on .help-fab{display:none} .help-fab-btn{display:flex;align-items:center;gap:8px;font-family:var(--font);font-weight:800;font-size:14px;color:var(--ink);background:var(--rost);border:2px solid var(--ink);border-radius:var(--radius-pill);padding:10px 16px;cursor:pointer;box-shadow:var(--shadow-lift);transition:transform .15s cubic-bezier(.22,1,.36,1),background .12s} .help-fab-btn:hover{background:var(--rost-dark);transform:translateY(-2px)} .help-fab-ico{display:flex;align-items:center} /* DAS FENSTER HAT EINE GRENZE UND SCROLLT IN SICH (19.10.2026, Clara: "das ganze Hilfe- Kasten laesst sich auch nicht scrollen, obwohl dort Felder drin sind, die abgeschnitten werden"). Vorher hatte es keine max-height: .help-fab steht position:fixed unten rechts und waechst nach oben - ein zu hoher Inhalt lief damit oben aus dem Bild, und weil fixed nicht am Seitenscrollen teilnimmt, war er auf keinem Weg erreichbar. NICHT DAS PANEL SCROLLT, SONDERN SEIN KOERPER. Sonst wanderten das Schliessen-Kreuz und der Zurueck-Pfeil mit nach oben weg - beide sind absolut im Panel positioniert, sie muessen stehen bleiben. Also Spalte, Kopf fest, .help-fab-body nimmt den Rest. 96px sind die Knopfreihe (44) plus ihr Abstand (10) plus der untere Rand (18) plus Luft. dvh steht hinter vh, damit Browser ohne dvh die erste Zeile behalten; auf iOS ist vh die Hoehe MIT ausgefahrener Adressleiste und damit zu gross. */ .help-fab-panel{width:min(320px,calc(100vw - 36px));background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-lift);padding:16px 18px 14px;position:relative;animation:helpFabIn .28s cubic-bezier(.2,.8,.2,1); display:flex;flex-direction:column;max-height:calc(100vh - 96px);max-height:calc(100dvh - 96px)} /* flex:0 0 auto: Ohne das quetscht die Spalte bei Platzmangel zuerst die Ueberschrift zusammen statt den Koerper scrollen zu lassen. */ /* DAS SCHLIESSEN-KREUZ SETZT panel.hidden - UND display:flex OBEN SCHLUEGE DAS AUS. Eine Klassenregel gewinnt gegen die eingebaute Regel [hidden]{display:none} des Browsers, das Fenster blieb deshalb nach dem Klick auf das x einfach stehen (Clara, 19.10.2026). Vorher trug .help-fab-panel gar kein display, da griff die Browserregel von selbst. Dieselbe Falle wie bei .feldfehler, .rechner-fuss, .bb-zurueck und .help-bot-back - sie kommt jedes Mal wieder, wenn ein per [hidden] geschaltetes Element ein display bekommt. */ .help-fab-panel[hidden]{display:none} .help-fab-title,.help-fab-sub{flex:0 0 auto} .help-fab-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain} @keyframes helpFabIn{0%{opacity:0;transform:translateY(10px) scale(.97)}100%{opacity:1;transform:translateY(0) scale(1)}} .help-fab-close{position:absolute;top:2px;right:4px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:none;border:0;font-size:22px;line-height:1;color:var(--muted);cursor:pointer;padding:0} .help-fab-close:hover{color:var(--ink)} .help-fab-title{font-weight:800;font-size:16px;padding-right:20px} .help-fab-sub{font-size:13.5px;color:var(--muted);line-height:1.45;margin-top:4px} /* Im Panel ist der Rahmen des wiederverwendeten .help-cta doppelt gemoppelt. */ .help-fab-panel .help-cta{margin:10px 0 0;padding:0;background:none;border:0} @media (prefers-reduced-motion: reduce){.help-fab,.help-fab-btn{transition:none}.help-fab-panel{animation:none}} @media(max-width:576px){ .help-fab{right:12px;bottom:12px} .help-fab-label{display:none} /* auf schmalen Schirmen nur die Rohrzange, spart Platz neben der Sticky-Leiste */ .help-fab-btn{padding:11px;border-radius:50%} } /* Rueckweg in den Funnel ueber der Kit-Auswahl: bewusst zurueckhaltend, der Blick soll auf den Karten bleiben - aber sichtbar genug, dass ein Tippfehler kein Reload mehr kostet. */ /* Links an derselben Kante wie Eyebrow und Ueberschrift darueber - der Zuruecklink gehoert zum Seitenkopf, nicht zu den Kit-Karten darunter (User-Vorgabe 30.07.2026). */ .editanswers{display:flex;justify-content:flex-start;margin-top:6px} .editanswers .btn{width:auto;margin-top:0;font-size:14px;padding:8px 14px 8px 0} /* Einbau-Teil der Produktseite (aus bwp-Metafeldern, siehe produktseiten-admin/LIES-MICH.md). Nutzt bewusst die vorhandenen Idiome: .art-kat/.art-body wie im Magazin, .m fuer Zahlen, .tag fuer Hinweise - eine Produktseite soll nicht wie ein Fremdkoerper wirken. */ .pp-einbau{border-top:1px solid var(--line);padding-top:8px} .pp-h2{font-size:26px;font-weight:800;letter-spacing:-.01em;margin:6px 0 18px} .pp-steps{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px} .pp-step{display:flex;align-items:center;gap:10px;background:var(--card);border:1.5px solid var(--line);border-radius:var(--radius-s);padding:10px 14px} .pp-step-nr{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:30px;border-radius:8px;background:var(--rost);color:var(--ink);font-weight:800;font-size:13px;flex:0 0 auto} .pp-step-txt{display:flex;flex-direction:column;line-height:1.25} .pp-step-txt small{color:var(--muted);font-size:12px;font-weight:600} .pp-facts{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px} .pp-fact{display:flex;flex-direction:column;gap:2px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-s);padding:10px 16px;min-width:150px} .pp-fact-l{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.03em} .pp-fact-v{font-weight:800;font-size:15px} .pp-block{margin-bottom:26px;max-width:720px} .pp-block h3{font-size:18px;font-weight:800;margin-bottom:8px} .pp-tools{list-style:none;display:flex;flex-wrap:wrap;gap:8px} .pp-tools li{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-pill);padding:7px 14px;font-size:13.5px;font-weight:600} .pp-teile-gruppe{border:1px solid var(--line);border-radius:var(--radius-s);overflow:hidden;margin-bottom:10px;background:var(--card)} .pp-teile-head{display:flex;align-items:center;gap:10px;background:var(--paper);padding:10px 14px;font-weight:800;font-size:14.5px;border-bottom:1px solid var(--line)} .pp-teil{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:9px 14px;font-size:14px;border-bottom:1px solid var(--line)} .pp-teil:last-child{border-bottom:0} .pp-tipps .art-body{background:var(--sand);border-radius:var(--radius-s);padding:14px 16px} .pp-help{max-width:720px;background:var(--card);border:1.5px solid var(--line);border-radius:var(--radius);padding:18px 20px;margin-top:8px} .pp-help p{color:var(--muted);font-size:14px;margin:4px 0 4px;line-height:1.5} .pp-help .btn{width:auto;display:inline-block} @media(max-width:576px){ .pp-h2{font-size:22px} .pp-step,.pp-fact{width:100%} } /* Tour-Kopfzeile mit Ausstieg - vorher liess sich die Tour nur durch Klicken aller Schritte beenden. */ .tour-head{display:flex;justify-content:space-between;align-items:center;gap:10px} /* Negative Raender heben die Innenabstaende wieder auf: die Trefferflaeche waechst auf Fingergroesse, die Karte sieht aber unveraendert aus. */ .tour-skip{background:none;border:0;padding:14px 8px;margin:-14px -8px;font-family:var(--font);font-size:12.5px;font-weight:700;color:var(--muted);text-decoration:underline;cursor:pointer} .tour-skip:hover{color:var(--ink)} /* ================= ANLEITUNGS-APP: mitlaufende Buehne (25.08.2026) ================= Das Alleinstellungsmerkmal des Shops - sonst liefert niemand eine Einbauanleitung als App zum DIY-Kit. Ein Geraet bleibt stehen, die Schritte laufen daneben durch, der Bildschirm wechselt mit. Mechanik von Apple, alles Sichtbare aus dem Theme. ECHTES IPHONE-FORMAT (User-Vorgabe): 9/19.5. Der Weg dorthin war nicht der naheliegende. object-fit:cover haette bei diesem Format 12,4 bis 13,6 % JE SEITE abgeschnitten - also genau die BESORGEN-Badges rechts und den Zurueck-Pfeil links. Grund: die Aufnahmen sind 772 px breit, das ist ein Browserfenster und kein Handy (ein iPhone-Screenshot waere 1179x2556). Deshalb stattdessen: untere Tab-Leiste aus den Bildern geschnitten, Bild auf die volle Breite gesetzt und oben angesetzt. Seitlich faellt damit NICHTS weg. Die unteren rund 30 % traegt der Bildschirm selbst - die Aufnahmen laufen dort ohnehin in Weiss aus, der Uebergang ist unsichtbar. Ein Verlauf loest die Schnittkante auf, darunter sitzt der Home-Indikator. Kommen echte Handy-Screenshots nach, passen sie ohne jede Aenderung: Bild auf volle Breite, oben angesetzt - bei 9/19.5 fuellen sie den Bildschirm dann exakt aus. */ .appland{padding-top:0} /* .appkopf ist am 22.09.2026 entfallen: Der Kopf der App-Seite steckt seither im gemeinsamen Seitenband, zusammen mit denen der uebrigen Unterseiten. Die Regel dafuer (max-width:640px) ist mit ihm geloescht - eine Regel ohne Traeger waere beim naechsten Lesen eine falsche Faehrte. Die Augenbraue darueber gibt es weiter, sie haengt jetzt am Band statt am alten Kopf. */ .seitenband .appeyebrow{font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--bernstein-dark);margin:0 0 10px} /* view-timeline auf der Buehne, nicht auf dem Geraet: das Geraet ist sticky, seine eigene Sichtbarkeit taugt deshalb nicht als Zeitachse. timeline-scope macht die Achse fuer die Nachfahren lesbar. */ /* TELEFON UND TEXT STEHEN ALS GANZES MITTIG (02.10.2026, Vorgabe Claras: "bei App die Grafik mit dem beschreibenden Text als Ganzes mittig machen"). DAS RASTER FUELLTE DIE SPALTE: erste Spalte so breit wie das Telefon, zweite nimmt den Rest. Auf einem grossen Schirm wird die Textspalte damit sehr breit, und das Paar aus Bild und Text sitzt links in einer Flaeche, die rechts ausfranst. GEDECKELT UND MITTIG GERUECKT: 1040px ist am Inhalt gemessen - Telefon rund 300px, Lueckeb bis 90px, Text rund 650px. Zentriert wird das PAAR, nicht sein Inhalt: Der Text daneben bleibt linksbuendig, zentrierter Fliesstext neben einem Bild liest sich schlecht. DIE ZEITACHSE FUER DIE BILDWECHSEL BLEIBT UNBERUEHRT: view-timeline haengt am selben Element, und eine Hoechstbreite aendert daran nichts. */ .appbuehne{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(32px,6vw,90px); margin-top:clamp(28px,5vw,52px);align-items:start; max-width:min(1040px,100%);margin-left:auto;margin-right:auto; view-timeline-name:--appbuehne;timeline-scope:--appbuehne} /* DAS TELEFON RUECKT NACH RECHTS (02.10.2026, Vorgabe Claras: "die App-Grafik weiter nach rechts"). ES SASS AN DER LINKEN KANTE des mittig gesetzten Paares - die erste Rasterspalte ist so breit wie das Geraet selbst, also beginnt es genau dort, wo der Block beginnt. Der Einzug schiebt nur das Telefon; der Text daneben folgt ihm, weil die Spalte mitwaechst, und das Paar bleibt als Ganzes mittig. MITWACHSEND UND GEDECKELT: bei rund 1360px sind es 54px. Fest gesetzt waere es auf dem Telefon ein Loch - dort steht das Geraet ohnehin ueber dem Text und nicht daneben, und die Regel fuer schmale Schirme weiter unten nimmt den Einzug wieder heraus. */ .appbuehne-geraet{padding-left:clamp(18px,4vw,64px); position:sticky;top:0;height:100vh;display:flex;flex-direction:column; align-items:center;justify-content:center;gap:22px;perspective:1600px} /* WENIGER LEERE UEBER DEM TELEFON AUF HOHEN SCHIRMEN (15.10.2026, Meldung Claras: "beim App-Reiter ist zwischen dem Text 'Was die App leistet' und dem abgebildeten Handy sehr viel Platz bei grossen Bildschirmen - verringer den"). DIE URSACHE STEHT EINE ZEILE HOEHER: Die Geraetespalte ist 100vh hoch und stellt das Telefon darin senkrecht mittig. Das ist richtig, SOLANGE sie klebt - dann ist "mittig in der Spalte" dasselbe wie "mittig im Bild". Bevor sie klebt, also genau unter dem Intro-Text, ist es eine halbe Bildschirmhoehe Leere: Bei 1440 Punkten Hoehe und einem rund 600 Punkte hohen Telefon sind das 420 Punkte Nichts. DIE HOEHE WIRD GEDECKELT UND DIE SPALTE DAFUER MITTIG EINGEHAENGT. 780 statt 100vh laesst oben noch rund 90 Punkte Luft - genug, dass das Telefon nicht am Text klebt. Damit es beim Scrollen trotzdem dort steht, wo es heute steht, wandert der Kleber um die halbe Differenz nach unten: top = (100vh - 780) / 2. Mittig im Bild bleibt mittig im Bild. NACH HOEHE UND NICHT NACH BREITE GEFRAGT: Der Leerraum haengt an der Bildschirmhoehe, nicht an der Breite. Unter 860 Punkten Hoehe gibt es ihn gar nicht - dort bleibt alles, wie es war, und die 780 waeren dann sogar mehr als der Schirm hergibt. */ @media(min-height:860px){ .appbuehne-geraet{height:780px;top:calc((100vh - 780px) / 2)} } .appphone{position:relative;width:clamp(230px,23vw,300px);border-radius:40px;background:var(--ink);padding:11px; transform-style:preserve-3d; box-shadow:0 30px 70px rgba(26,26,26,.24), 0 4px 12px rgba(26,26,26,.14), 0 0 0 1px rgba(255,255,255,.09) inset} .appphone-insel{position:absolute;top:24px;left:50%;transform:translateX(-50%);width:33%;height:21px;border-radius:12px;background:#000;z-index:4;pointer-events:none} .appphone-schirm{position:relative;width:100%;aspect-ratio:9/19.5;border-radius:30px;overflow:hidden;background:#fff} /* Verlauf loest die Schnittkante der Aufnahme auf, damit sie nicht abrupt endet. */ .appphone-schirm::after{content:"";position:absolute;left:0;right:0;bottom:0;height:26%; background:linear-gradient(to bottom,rgba(255,255,255,0),#fff 58%);pointer-events:none;z-index:2} /* Home-Indikator - vervollstaendigt das Geraet, ohne dass ein Bild dafuer noetig waere. */ .appphone-schirm::before{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:9px; width:34%;height:5px;border-radius:3px;background:rgba(26,26,26,.22);z-index:3} /* Bild auf volle Breite, oben angesetzt: seitlich faellt nichts weg. */ .appschirm{position:absolute;top:0;left:0;width:100%;height:auto;display:block; opacity:0;transform:translateY(26px) scale(1.045); transition:opacity .6s ease, transform .7s cubic-bezier(.22,.61,.36,1);will-change:opacity,transform} .appschirm.ist-an{opacity:1;transform:none} .appphone-leer{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center; font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);padding:16px;line-height:1.55} .appschiene{display:flex;gap:7px} .appschiene-punkt{width:24px;height:3px;border-radius:2px;background:var(--line);transition:background .45s ease,width .45s ease} .appschiene-punkt.ist-an{background:var(--bernstein-dark);width:40px} .appschritte{list-style:none;margin:0;padding:0} /* GEKUERZT 27.08.2026. Vorher 80vh je Schritt: bei vier Schritten eine Buehne von 320vh, in der insgesamt vielleicht 20vh Text stand - der Rest war Luft, und man scrollte drei Bildschirme lang an fast nichts vorbei. 52vh laesst dem Text weiter Raum zum Atmen, halbiert aber die Leerstrecke. Der Beobachter braucht nur, dass ein Schritt hoeher ist als sein 4-Prozent-Band in der Bildschirmmitte - 52vh ist davon weit entfernt. Nebenwirkung, die hier der eigentliche Gewinn ist: derselbe Parallax verteilt sich jetzt auf 208vh statt 320vh. Die Bewegung wird dadurch sichtbar, ohne dass man an ihr dreht. */ /* DIE SCHRITTE STEHEN STILL UND WECHSELN AN ORT UND STELLE (28.09.2026, Vorgabe Claras: "ich moechte, dass die einzelnen Felder, die nacheinander von unten nach oben angezeigt werden, immer am gleichen Punkt bleiben"). Vorher lief jeder Schritt mit der Seite von unten nach oben durchs Bild und wurde dabei hell. Das Geraet daneben blieb stehen - zwei Ebenen, die sich widersprachen: Der Bildschirm im Telefon gehoerte zu einem Text, der schon wieder weiterwanderte. position:sticky auf den Schritten selbst: Jeder bleibt stehen, sobald er seine Linie erreicht, und der naechste legt sich auf ihn. Weil immer nur der aktive sichtbar ist (opacity), sieht man davon nur eines - den Wechsel an derselben Stelle. 34vh statt Mitte: Der Text ist hoeher als eine Zeile; von oben gemessen steht sein Block damit ungefaehr auf der Hoehe des Telefons daneben. DER PLATZ BLEIBT: min-height:52vh je Schritt ist weiter der Scrollweg - er ist es, der die Schritte nacheinander durchlaufen laesst. Nur sieht man ihn jetzt nicht mehr als Wandern. */ .appschritt{min-height:52vh;display:flex;flex-direction:column;justify-content:center; opacity:0;pointer-events:none; transition:opacity .45s ease} .appschritt.ist-an{opacity:1;pointer-events:auto} @media(min-width:993px){ .appschritt{position:sticky;top:34vh} } .appschritt-nr{font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.12em;color:var(--muted);display:block;margin-bottom:12px} .appschritt h3{font-size:clamp(23px,3.4vw,36px);line-height:1.12;letter-spacing:-.022em;margin:0 0 12px;max-width:19ch} .appschritt p{margin:0;font-size:clamp(15.5px,1.55vw,18.5px);line-height:1.6;color:var(--muted);max-width:46ch} .appschritt.ist-an p{color:var(--ink)} .appfuss{margin:clamp(26px,4vw,44px) 0 0;font-size:16px;line-height:1.55;color:var(--muted);max-width:52ch} /* AUFRUF AM ENDE DES ABLAUFS (28.09.2026, Vorgabe Claras: "mittig und mit einem schwarzen Block drum rum"). Er traegt .land.dark und damit dieselbe Form wie der Schluss-Aufruf der Startseite - Grund, Schriftfarbe und Zentrierung kommen von dort. Hier steht nur, was ihn davon unterscheidet: Er ist knapper gepolstert, weil er mitten in einer Seite steht und nicht an ihrem Ende. Der erste Versuch liess ihn links an der Kante der Stationen stehen, ohne Band - als Abzweigung im Lesefluss gedacht. Mit Band gelesen ist er ein Halt, und ein Halt gehoert in die Mitte. */ /* LINKSBUENDIG UND OHNE BAND (29.09.2026, Vorgabe Claras). section.land zentriert seinen Inhalt; hier wird das zurueckgenommen, damit Ueberschrift, Zeile und Knopf an derselben Kante beginnen wie der Text darueber und darunter. Der Knopf traegt .mid, das ihn mit auto-Raendern mittig setzt - der linke Rand muss deshalb ausdruecklich auf 0, sonst zentriert er sich weiter innerhalb der Spalte. */ /* DIE BEIDEN ABSCHLIESSENDEN ABSCHNITTE STEHEN AUF WEISS (02.10.2026, Vorgabe Claras: "den Hintergrund von den beiden bitte in Weiss machen" - gemeint sind "Was der Fachbetrieb macht" und der Aufruf darunter). SIE GEHOEREN ZUSAMMEN: Erst was ein Fachbetrieb uebernimmt, dann der Weg zum passenden Kit. Eine gemeinsame helle Flaeche setzt beide vom beigen Ablauf darueber ab, ohne eine Linie zu brauchen - dasselbe Mittel wie auf der Rechnerseite. DER AUFRUF IST KEIN DUNKLES BAND: .ablauf-cta traegt nicht .dark, anders als die Aufruf-Baender auf Startseite und Rechnerseite. Hier war also eine Farbe zu setzen und keine zu ersetzen. DER FACHBETRIEB-ABSCHNITT TEILT SEINE KLASSE (.seiten-intro) MIT DEM EINLEITUNGSBLOCK derselben Seite - deshalb der Waehler ueber die Reihenfolge und nicht ueber die Klasse: Das letzte .seiten-intro der Seite ist der Fachbetrieb-Absatz, das erste die Einleitung unter dem Kopfband, und die soll beige bleiben. */ section.land.ablauf-cta{padding:clamp(34px,5vw,54px) 0;text-align:left;background:#fff} section.land.fachbetrieb{background:#fff} .ablauf-cta h2{margin-top:0} .ablauf-cta .sec-sub{margin-left:0} .ablauf-cta .btn.mid{margin-left:0;margin-right:auto} /* AUF MITTIGEN SEITEN STEHT AUCH DER KNOPF MITTIG (02.10.2026, Vorgabe Claras: "Ablauf bitte mittig machen, Titel und Text und VERLINKUNG"). .btn.mid ist von Haus aus zentriert (margin-left/right:auto); die Zeile darueber zieht ihn im Ablauf-CTA nach links, weil dieser Abschnitt linksbuendig gesetzt ist. Steht der Text mittig, muss diese Ausnahme wieder weg - sonst haengt der Knopf allein an der linken Kante unter einem zentrierten Absatz. */ body.bwp-mittig .ablauf-cta .btn.mid{margin-left:auto} /* BEWEGUNG (nur Desktop). Das Geraet steigt durch das Bild und kippt dabei durch die Mitte - erst leicht von rechts angeschnitten, in der Mitte frontal, dann nach links weg. Dadurch entsteht Tiefe statt bloss Verschiebung. Rein dekorativ: ohne scroll-getriebene Animationen steht das Geraet still und es fehlt nichts. */ @keyframes appschweben{ from{transform:translateY(120px) rotateZ(3.5deg) rotateY(15deg) scale(.9)} 50% {transform:translateY(0) rotateZ(0) rotateY(0) scale(1)} to {transform:translateY(-120px) rotateZ(-3.5deg) rotateY(-15deg) scale(.9)} } /* ZWEITE EBENE (27.08.2026). Vorher bewegte sich nur das Geraet - ein schwebendes Objekt vor einem stehenden Hintergrund, kein Parallax. Parallax entsteht erst, wenn zwei Ebenen unterschiedlich schnell laufen. Die Textspalte driftet deshalb GEGEN das Geraet, mit kleinerer Amplitude: der Blick nimmt die Differenz wahr, nicht den Absolutweg. Bewusst auf der Liste und nicht auf den einzelnen Schritten - die tragen schon ihre eigene Einblend-Transformation, eine zweite darauf wuerde sich damit schlagen. */ @keyframes apptextdrift{ from{transform:translateY(-34px)} to {transform:translateY(34px)} } /* DIE BEWEGUNG DES GERAETS IST AM 28.09.2026 ENTFALLEN (Vorgabe Claras: "genauso auch die Abbildung des Handys, in dem sich die Screens veraendern" - auch sie soll am gleichen Punkt bleiben). Das Telefon stieg mit dem Scroll durchs Bild und kippte dabei leicht; die Textspalte driftete dagegen. Als Parallax war das richtig gerechnet - nur ist der Gegenstand hier kein Schaufenster, sondern eine Anleitung: Was sich aendern soll, ist der Bildschirm IM Telefon, nicht seine Lage. Steht es still, sieht man genau das. Die Keyframes bleiben stehen, falls die Bewegung je zurueckkommen soll; ohne Aufruf kosten sie nichts. */ /* MOBILE, ueberarbeitet 27.08.2026. Vorher war das Geraet min(178px,44vw) breit - bei 9/19.5 sind das auf einem 390er-Display rund 373px Hoehe, mit Polstern ueber 400. Abzueglich der 64px Topbar klebte damit mehr als die Haelfte des Sichtfelds dauerhaft fest, und der Text lief durch einen Restspalt. Dazu stand JEDER Schritt auf voller Deckkraft: der Bildschirm wechselte, aber nichts zeigte, zu welchem Absatz er gehoerte. Beides zusammen las sich als kaputt. Jetzt: Geraet auf zwei Drittel, damit unter der Topbar Platz zum Lesen bleibt, und der aktive Schritt bekommt eine Messingkante. Bewusst KEINE Abdunklung der inaktiven Schritte wie auf dem Desktop - auf einem kleinen Display stehen mehrere gleichzeitig im Bild, und halb ausgeblendeter Text sieht dort nach Fehler aus, nicht nach Fokus. */ @media (max-width:992px){ .appbuehne{grid-template-columns:1fr;gap:0} /* DER ABSTAND NACH OBEN IST GEMESSEN, NICHT GESCHAETZT (15.10.2026, Meldung Claras: das Telefon war oben angeschnitten). 64 war die Hoehe der Menueleiste allein; ueber ihr klebt aber die ganze Section - die gelbe Ansage und seit heute die Neuheiten-Leiste. --kopf-h setzt kopfhoeheMessen() in konfigurator.js aus der tatsaechlichen Hoehe und zieht sie bei jeder Aenderung nach (Zoom, Drehen, zweizeilige Ansage). Die 6 Punkte obendrauf sind Luft, damit die Geraetekante nicht an der Leiste klebt. */ .appbuehne-geraet{top:calc(var(--kopf-h,94px) + 6px);height:auto;padding:12px 0 14px;gap:12px; background:linear-gradient(var(--paper) 88%,transparent);z-index:2;perspective:none} .appphone{width:min(132px,32vw);border-radius:28px;padding:8px; box-shadow:0 14px 30px rgba(26,26,26,.18), 0 2px 6px rgba(26,26,26,.12)} .appphone-schirm{border-radius:21px} .appphone-insel{height:11px;top:13px;width:32%;border-radius:8px} .appschiene-punkt{width:18px} .appschiene-punkt.ist-an{width:30px} .appschritte{margin-top:4px} /* AUF DEM TELEFON BLEIBT ALLES BEIM ALTEN (28.09.2026, Vorgabe Claras: "mach das bei mobil nicht mit dem bei der App-Seite, da darf das weiter normal scrollen"). Weder das Kleben der Schritte noch das Ausblenden der inaktiven gilt hier: Sie stehen untereinander im Fluss, alle lesbar, und nur die Messingkante zeigt, welcher gerade im Telefon zu sehen ist. position:static setzt die Grundregel ausdruecklich zurueck, damit ein spaeterer Griff an die Desktop-Zeile hier nichts anrichtet. */ .appschritt{position:static;min-height:auto;padding:16px 0 18px 15px;opacity:1;transform:none;pointer-events:auto; border-left:2px solid var(--line);transition:border-color .4s ease} .appschritt.ist-an{border-left-color:var(--bernstein-dark)} .appschritt-nr{margin-bottom:7px;transition:color .4s ease} .appschritt.ist-an .appschritt-nr{color:var(--bernstein-dark)} .appschritt h3{max-width:none;margin-bottom:8px} .appschritt p{color:var(--ink);max-width:none} } @media (prefers-reduced-motion: reduce){ .appschirm{transition:opacity .2s linear;transform:none} .appschirm.ist-an{transform:none} .appschritt{transition:opacity .2s linear;transform:none} } /* ---------- AUFSTELLORT IM KAUFWEG (02.09.2026) ---------- Steht ueber dem Material. Bewusst eine ruhige Karte und kein Warnkasten: es ist eine offene Frage, kein Problem. SIE VERSCHWAND FRUEHER NACH DER ANTWORT, heute klappt nur noch der Fragetext ein und die Auswahl bleibt stehen - siehe .af-knapp weiter unten. */ .aufstellort-frage{border:1.5px solid var(--line);background:var(--gruen-tint);border-radius:var(--radius);padding:16px 18px;margin:14px 0} .af-titel{font-weight:800;font-size:14.5px} .af-sub{color:var(--graphit);font-size:13.5px;margin:4px 0 10px} .af-chips{display:flex;flex-wrap:wrap;gap:8px} .af-chip{appearance:none;border:1.5px solid var(--line);background:var(--card);color:var(--ink);font:inherit;font-size:13.5px;font-weight:700;padding:8px 14px;border-radius:999px;cursor:pointer;transition:border-color .16s,background .16s} .af-chip:hover{border-color:var(--bernstein);background:var(--bernstein-tint)} /* Die gegebene Antwort. Noetig, seit die Fragen im Kasten stehen bleiben, statt nach der Antwort zu verschwinden - ohne Markierung waere nicht zu sehen, was gilt. */ .af-chip.sel{border-color:var(--bernstein-dark);background:var(--bernstein-tint); box-shadow:0 0 0 1px var(--bernstein-dark)} /* DIE DREI ANTWORTEN ZUR HEIZKREIS-AUFTEILUNG STEHEN NEBENEINANDER (01.10.2026, Vorgabe Claras: "bei der Frage 'Wie sind die Heizkreise aufgeteilt' kannst du bitte die drei Antwortmoeglichkeiten nebeneinander darstellen - wenn das nicht geht, kannst du die Font auch kleiner machen"). WARUM SIE UMBRACHEN: Die laengste Beschriftung ist "1× Fußbodenheizung + 1× Heizkörper", 34 Zeichen. Die Knoepfe richten sich sonst nach ihrem Inhalt und brechen um, sobald die Summe nicht mehr in eine Zeile passt - bei dieser Frage also fast immer. DREI GLEICHE SPALTEN STATT INHALTSBREITE: flex:1 1 0 gibt jedem Knopf ein Drittel, egal wie lang sein Text ist. Der Text darf INNEN umbrechen (white-space:normal) - sonst muesste die Zeile breiter werden als der Kasten, und genau das war das Problem. UND BEIDES, WAS SIE ANGEBOTEN HAT: eine Reihe UND eine Spur kleinere Schrift. Ohne die kleinere Schrift braeuchte die lange Beschriftung in einem Drittel drei Zeilen und die drei Knoepfe wuerden unnoetig hoch. ERST AB 576px: Darunter - also auf dem Telefon - blieben je Knopf keine 100px, und die lange Beschriftung stuende vierzeilig in einer schmalen Saeule. Dort ist untereinander das Bessere; die Knoepfe sind dann ohnehin volle Zeilen und leicht zu treffen. */ @media(min-width:576px){ #kreiseFrage .af-chips{flex-wrap:nowrap;gap:6px} #kreiseFrage .af-chip{flex:1 1 0;min-width:0;text-align:center;white-space:normal; font-size:12px;line-height:1.3;padding:8px 10px} #cartModalBody #kreiseFrage .af-chip{font-size:11.5px;padding:7px 8px} } .af-chip:focus-visible{outline:2px solid var(--bernstein);outline-offset:2px} /* --- IM KAUFWEG KLEINER UND ZUGEKLAPPT (14.09.2026) ---------------------- Die beiden Fragen sassen als zwei kraeftige Kaesten ueber der Materialliste und wogen darin schwerer als alles, was danach kam. Im Kasten und im Direktkauf-Dialog fallen sie darum eine Stufe kleiner aus - im Rechner, wo sie allein auf der Flaeche stehen, bleiben sie wie sie waren. Beantwortet klappt der Fragetext ein, die Auswahl bleibt: Was geklaert ist, braucht keinen Platz mehr, muss aber ohne Umweg aenderbar bleiben. Siehe .af-knapp weiter unten. */ #cartModalBody .aufstellort-frage{padding:11px 13px;margin:10px 0;border-width:1px} #cartModalBody .af-titel{font-size:13.5px} #cartModalBody .af-sub{font-size:12.5px;margin:3px 0 9px;line-height:1.4} #cartModalBody .af-chip{font-size:12.5px;padding:6px 12px} /* ---------- DIE FRAGE KLAPPT EIN, DIE AUSWAHL BLEIBT STEHEN (01.10.2026) ---------- Vorgabe Claras: "wenn die Frage beantwortet wurde, sie doch wieder zuklappen, aber die Auswahlmoeglichkeiten noch bestehen lassen ... die Frage soll trotzdem noch anzeigbar sein, gerne mit einem Pfeil". EINGEKLAPPT WIRD NUR .af-text (Ueberschrift und Erklaerung). Die Chips bzw. der Mengenregler sind Geschwister davon und bleiben unberuehrt - deshalb genuegt eine einzige Regel, und es gibt keinen Zustand, in dem die Auswahl versehentlich mitverschwindet. HIER STANDEN BIS ZUM 01.10.2026 DIE .af-zu-REGELN fuer die frueher ganz zugeklappte Frage ("Außeneinheit · Direkt an der Hauswand · ändern"). Die Fassung ist entfallen; die Regeln waren seither tot und sind durch diese ersetzt. */ .aufstellort-frage{position:relative} .af-auf{display:none} /* Erst ab der ersten Antwort - vorher gibt es nichts einzuklappen, und die Frage soll gelesen werden. */ .af-beantwortet{padding-right:40px} .af-beantwortet > .af-auf{display:flex;align-items:center;justify-content:center; position:absolute;top:8px;right:8px;width:26px;height:26px;padding:0; appearance:none;border:1.5px solid var(--line);border-radius:50%; background:var(--card);color:var(--graphit);font:inherit;font-size:13px;line-height:1; cursor:pointer;transition:border-color .16s,background .16s,transform .16s} .af-beantwortet > .af-auf:hover{border-color:var(--bernstein);background:var(--bernstein-tint)} .af-beantwortet > .af-auf:focus-visible{outline:2px solid var(--bernstein);outline-offset:2px} /* Der Pfeil zeigt, wohin es geht: nach unten "ausklappen", nach oben "wieder zuklappen". */ .af-beantwortet:not(.af-knapp) > .af-auf{transform:rotate(180deg)} .af-knapp > .af-text{display:none} /* Eingeklappt ist die Karte nur noch die Auswahlzeile - dann darf sie auch flacher sein. */ .af-knapp{padding-top:10px;padding-bottom:12px} /* Der Mengenregler haengt sonst an einem Text, der nicht mehr da ist. */ .af-knapp > .af-zahl{margin-top:0} #cartModalBody .af-beantwortet{padding-right:34px} #cartModalBody .af-beantwortet > .af-auf{top:6px;right:6px;width:23px;height:23px;font-size:12px} /* Die drei Heizkreis-Knoepfe stehen in einer Reihe und holen sich jeden Pixel - der Pfeil darf ihnen deshalb nicht im Weg stehen, sondern sitzt eine Spur hoeher am Rand. */ @media(min-width:576px){ #kreiseFrage.af-knapp{padding-top:8px} } /* ---------- PREISSPALTE EINHEITLICH RECHTSBUENDIG (02.09.2026) ---------- Die Preise standen von Zeile zu Zeile an anderer Stelle: Zeilen mit Mengen-Regler schoben ihn nach links, Zeilen mit ⓘ-Knopf nach rechts, und der 46px-Ausgleich weiter oben traf nur einen Teil der Faelle. Jetzt hat die Preisspalte in JEDER Materialzeile dieselbe Breite und denselben Abstand zum Regler - das Auge kann die Spalte von oben nach unten lesen, statt sie in jeder Zeile neu zu suchen. */ .svc-row .buyline .svc-right{gap:14px} .svc-row .buyline .svc-right > .price{min-width:96px;text-align:right;font-variant-numeric:tabular-nums} .svc-row .buyline.hat-menge .extra-price{min-width:96px;text-align:right} @media(max-width:576px){ .svc-row .buyline .svc-right > .price, .svc-row .buyline.hat-menge .extra-price{min-width:auto} } /* ---------- VOR/ZURUECK-PILLEN IM KAUFKOPF (02.09.2026) ---------- */ .kaufnav{display:none} .modalback.voll .kaufnav{display:flex;gap:6px} .kaufpill{appearance:none;border:1.5px solid var(--line);background:var(--card);color:var(--graphit);font:inherit;font-size:13.5px;font-weight:700;padding:7px 14px;border-radius:999px;cursor:pointer;white-space:nowrap;transition:border-color .16s,background .16s,color .16s} .kaufpill:hover{border-color:var(--bernstein);color:var(--ink)} .kaufpill:focus-visible{outline:2px solid var(--bernstein);outline-offset:2px} .kaufpill.weiter{background:var(--rost);border-color:var(--rost);color:var(--ink)} .kaufpill.weiter:hover{background:var(--rost-dark);border-color:var(--rost-dark)} @media(max-width:640px){.kaufkopf-innen{flex-wrap:wrap}.kaufnav{order:3;width:100%;justify-content:space-between}} /* ---------- EINSTIEG IN DEN RECHNER SICHTBAR MACHEN (02.09.2026) ---------- Wer auf "Rechnen lassen" drueckt, soll SEHEN, dass etwas passiert ist. Ohne das wirkt der Sprung zum Rechner wie ein Seitenwechsel ohne Rueckmeldung - besonders auf dem Handy, wo der Weg dorthin ohnehin scrollt. Kurz und einmalig, keine Dauerbewegung. */ @keyframes funnelAn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}} .funnel-grid.faehrt-an{animation:funnelAn .42s cubic-bezier(.2,.8,.2,1)} .funnel-grid.faehrt-an .qcard{animation:funnelAn .5s cubic-bezier(.2,.8,.2,1) .06s backwards} .funnel-grid.faehrt-an .receipt-wrap{animation:funnelAn .5s cubic-bezier(.2,.8,.2,1) .14s backwards} @media(prefers-reduced-motion:reduce){ .funnel-grid.faehrt-an,.funnel-grid.faehrt-an .qcard,.funnel-grid.faehrt-an .receipt-wrap{animation:none} } /* Rechner startet auf der Startseite geschlossen und geht erst mit "Jetzt durchrechnen" auf. display:none statt visibility, damit er auch keinen Platz beansprucht - die Pfad-Weiche soll bis dahin allein stehen. funnelOeffnen() nimmt die Klasse weg. */ #rechnerCalc.rechner-zu{display:none} /* Die Pfad-Weiche tritt ab, sobald der Rechner offen ist - und kommt ueber den Rueckweg-Knopf zurueck. Gleiches Mittel wie beim Rechner selbst: display:none, damit kein Platz bleibt. */ #losgehts.weiche-zu{display:none} .rechner-kopf{margin:0 0 14px} .rechner-zurueck{appearance:none;border:1.5px solid var(--line);background:var(--card);color:var(--graphit);font:inherit;font-size:13.5px;font-weight:700;padding:8px 15px;border-radius:999px;cursor:pointer;transition:border-color .16s,color .16s,background .16s} .rechner-zurueck:hover{border-color:var(--bernstein);color:var(--ink);background:var(--bernstein-tint)} .rechner-zurueck:focus-visible{outline:2px solid var(--bernstein);outline-offset:2px} /* ================= MATERIALZEILEN: EIN RASTER FUER ALLE (02.09.2026) ================= Vorher hatte jede Zeile ihren eigenen Aufbau: Ja/Nein-Positionen einen Haken links, Mengen-Positionen keinen; die Preis-Pille klebte am Namen; der ⓘ fehlte mal, mal nicht, und ein 46px-Ausgleich im CSS versuchte das aufzufangen. Ergebnis war eine Liste, deren rechte Kante in jeder Zeile woanders lag. Jetzt ist jede Zeile dasselbe Raster mit festen Spalten: [Haken + Name] [Pille] [Mengenregler] [Preis] [ⓘ] [↗] Die vier rechten Spalten haben feste Breiten. Zeilen ohne Regler lassen ihre Spalte leer, statt die Nachbarn zu verschieben - nur so steht die Preisspalte wirklich untereinander. Die Pille sitzt links vom Minuszeichen mit eigenem Abstand, wie gewuenscht. DIE SECHSTE SPALTE IST AM 30.09.2026 DAZUGEKOMMEN (Meldung Claras: "in der Konfiguration bei Desktop bitte alles moeglichst in einer Zeile pro Produktpaket, da soll nichts in eine zweite Zeile verrutschen"). Genau das war die Ursache: Der Pfeil zur Paketseite kam am selben Tag als SECHSTES Element in eine Zeile mit fuenf Spalten. Ein Raster legt an, wofuer es keine Spalte hat, einfach eine neue Zeile an - der Pfeil rutschte also unter den Namen. Er hat jetzt seine eigene Spalte neben dem ⓘ. DER SPALTENABSTAND FAELLT VON 14 AUF 12px: Die neue Spalte kostet 26px plus Abstand. Was sie nimmt, holen die fuenf Abstaende dazwischen fast wieder herein - so bleibt fuer den Namen links ungefaehr gleich viel Platz wie vorher, und lange Namen brechen nicht stattdessen um. */ .buyline.xrow{ display:grid; grid-template-columns:minmax(0,1fr) auto 128px 96px 26px 26px; align-items:center; column-gap:12px; } .buyline.xrow .xr-check{display:flex;align-items:center;gap:10px;min-width:0;cursor:pointer;margin:0} /* Das Ankreuzfeld darf NICHT mitschrumpfen. In einem Flex-Element gilt von Haus aus flex-shrink:1, und eine Breitenangabe ist dann nur ein Wunsch: Wird der Platz eng, gibt der Browser sie anteilig auf. Sichtbar wurde das an genau einer Zeile - "Paket: Wanddurchfuehrung OI Zentral" ist der laengste Name und steht seit dem 15.09.2026 neben dem Mengenregler in derselben Zeile. Ihr Kaestchen war ein paar Pixel kleiner als die der kuerzeren Nachbarn. */ .buyline.xrow .xr-check input[type=checkbox], .buyline.xrow .xr-check input[type=radio]{flex:0 0 auto} .buyline.xrow .xr-name{min-width:0;overflow-wrap:anywhere} .buyline.xrow .xr-tag{justify-self:end;display:flex;align-items:center} /* Die Pillen mit dem Einzelpreis sind am 14.09.2026 entfallen. Die Huelle bleibt im Markup - sie haelt den Rasterplatz und wuerde ohne diese Regel eine Luecke hinterlassen, wo vorher die Pille stand. */ .buyline.xrow .xr-tag:empty{display:none} .buyline.xrow .xr-tag .tag{margin:0} .buyline.xrow .xr-step{justify-self:end;display:flex;align-items:center;min-height:34px} .buyline.xrow .xr-price{justify-self:end;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap} /* Stueckpreis UEBER der Zeilensumme, ab zwei Stueck - siehe mengenPreisHtml(). Vorangestellt seit dem 12.10.2026 (Vorgabe Claras); der Abstand ist deshalb von margin-top auf margin-bottom gewandert, sonst klebte die Zeile an der Summe und stuende zugleich zu weit von der Zeile darueber ab. Zurueckgenommen und in der Textschrift: Die fette Mono-Zahl darunter ist die, die in die Gesamtsumme eingeht. */ .buyline.xrow .xr-einzel{display:block;margin-bottom:2px;font-family:var(--font);font-weight:500; font-size:11.5px;line-height:1.3;color:var(--muted);white-space:nowrap} .buyline.xrow .xr-info{justify-self:end} .buyline.xrow .xr-seite{justify-self:end} /* Der alte Ausgleich fuer fehlende ⓘ-Knoepfe ist gegenstandslos, seit jede Zeile einen hat - er wuerde die neue Rasterspalte jetzt sogar wieder verschieben. */ .bb-step[data-step="hardware"] .buyline.xrow > .svc-right{margin-right:0} @media(max-width:640px){ /* ZWEI ZEILEN JE PAKET (neu gefasst 29.09.2026, Vorgabe Claras: "der Preis, der erscheint wenn man es dazu auswaehlt, soll rechts unter dem einzelnen Paket stehen, und wenn es einen Stueckzahl-Regler gibt, den bitte links unter das Paket"). Oben Haken, Name und ⓘ ueber die volle Breite - der Name ist das, was gelesen wird. Darunter EINE Bedienzeile: Regler links, Betrag rechts. Vorher standen Regler und Preis in zwei getrennten Zeilen, beide rechtsbuendig; das waren drei Zeilen je Paket und der Regler klebte unter dem Betrag statt an der Kante, an der man ihn sucht. BEIDE IN DERSELBEN RASTERZEILE, der eine links, der andere rechts verankert. Sie stossen nicht aneinander: Regler 128px und Betrag 96px stehen auf einer Zeile von rund 290px. DER ALTE ZIEHTRICK IST WEG. Zeilen ohne Regler holten ihren Preis mit margin-top:-30px neben den Namen zurueck - eine Rechnung, die nur aufgeht, solange der Name einzeilig bleibt. Bei zwei Zeilen Name rutschte der Betrag in den Namen hinein. Jetzt steht der Preis bei ALLEN Zeilen an derselben Stelle: rechts unter dem Paket, wie gefordert. */ /* Auf dem Telefon stehen die beiden Zeichen nebeneinander rechts neben dem Namen - dort ist die Zeile ohnehin am kuerzesten und traegt die zwei 26px. */ .buyline.xrow{grid-template-columns:minmax(0,1fr) 26px 26px;row-gap:8px} .buyline.xrow .xr-check{grid-column:1} .buyline.xrow .xr-info{grid-column:2;grid-row:1} .buyline.xrow .xr-seite{grid-column:3;grid-row:1} .buyline.xrow .xr-tag{grid-column:1 / -1;grid-row:2;justify-self:start} .buyline.xrow .xr-step{grid-column:1;grid-row:3;justify-self:start} .buyline.xrow .xr-price{grid-column:1 / -1;grid-row:3;justify-self:end;align-self:center} /* Ohne Regler bleibt die Bedienzeile dem Betrag allein - der leere Platz links faellt nicht auf, weil dort in den Nachbarzeilen ohnehin oft nichts steht. */ .buyline.xrow .xr-step:empty{display:none} } /* Gliederungszeilen ueber der Gesamtsumme: leiser als die Summe selbst, damit sie erklaeren statt zu konkurrieren. Der Hinweis "waehlst du im naechsten Schritt" steht als Kleintext hinter dem Wort Services, nicht als eigene Zeile - sonst waechst der Block zu sehr. */ .totalrow.glied{color:var(--graphit);font-size:14px} .totalrow.glied .sum{font-family:var(--mono);font-weight:700;font-size:15px;font-variant-numeric:tabular-nums} .totalrow.glied small{display:block;font-size:12px;color:var(--muted);font-weight:500} /* Zahlungsplan: was heute abgebucht wird, was nach der Lieferung faellig ist. Abgesetzt von den Summenzeilen darueber durch eine Linie - es ist eine andere Aussage: oben steht, was das Paket kostet, hier steht, WANN wovon. */ .totalrow.zplan{font-size:14px} .totalrow.zplan:first-of-type{margin-top:10px;padding-top:10px;border-top:1px solid var(--line)} .totalrow.zplan .sum{font-family:var(--mono);font-weight:700;font-size:16px;font-variant-numeric:tabular-nums} .totalrow.zplan small{display:block;font-size:12px;color:var(--muted);font-weight:500} #bbRestRow .sum,#cmRestRow .sum{color:var(--graphit)} /* VERWEIS AUF DIE PRODUKTSEITE (03.09.2026, Alignment-Punkt d) Zwei Fassungen, weil zwei Umgebungen: .produktlink steht als eigene Zeile unter einer Karte oder einem Bauteil-Text, .produktlink-name macht in engen Zeilenrastern (.mat-row) den Namen selbst zum Verweis, ohne eine dritte Spalte zu erzwingen. Erzeugt werden beide von produktLinkHtml() / produktNameHtml() in konfigurator.js; ohne hinterlegte Produktseite entsteht gar kein Link, deshalb gibt es hier keinen "deaktiviert"-Zustand. */ .produktlink{display:inline-block;margin-top:10px;font-size:13.5px;font-weight:600; color:var(--gruen);text-decoration:underline;text-underline-offset:3px; text-decoration-color:var(--gruen-tint);transition:text-decoration-color .15s} .produktlink:hover,.produktlink:focus-visible{text-decoration-color:var(--gruen)} .bt-detail .produktlink,.kb-bubble-body .produktlink{margin-top:14px} .produktlink-name{color:inherit;text-decoration:underline;text-underline-offset:2px; text-decoration-color:var(--line)} .produktlink-name:hover,.produktlink-name:focus-visible{color:var(--gruen);text-decoration-color:var(--gruen)} /* DIMENSIONS-HINWEIS IM KAUFWEG (08.09.2026) Steht im Kauf-Dialog ueber der Mini-Summe und in der Kaufbox unter dem harten Riegel. Bewusst dieselbe Optik wie .banner.warn: es ist kein Nebensatz, sondern eine Aussage ueber die Anlage, die der Kunde gerade kauft. Nur der Abstand ist eigens gesetzt, damit er im Dialog nicht an der Kopfzeile klebt. */ .banner.dimhinweis{margin-top:16px;line-height:1.5} .banner.dimhinweis b{display:block;margin-bottom:3px} /* --- ZUBEHOER-REITER (14.09.2026) ------------------------------------------- PREIS. Steht als eigene Spalte rechts in der Kartenkopfzeile, damit alle Preise auf einer Linie stehen und sich vergleichen lassen. Hervorhebung im Muster von ".totalrow .sum": Festbreitenschrift in Bernstein-Dunkel, nur kleiner - die 26px dort gehoeren der Endsumme und sollen groesser bleiben als ein einzelner Paketpreis. AUFKLAPPZEICHEN. Weiter oben unterdrueckt eine Regel das "+" aus ".mini summary::after" fuer .bt-item - sie stammt aus einem Entwurf, in dem das Zeichen an .bt-item-count haengen sollte. Dieses Element wurde nie erzeugt, die Karten standen also immer ohne jeden Hinweis aufs Aufklappen da. Das Zeichen kommt hier zurueck, aber als ::before und damit LINKS vor dem Paketnamen (Wunsch 14.09.2026). Die Unterdrueckung von ::after bleibt unangetastet - sonst staende rechts ein zweites. min-width:1ch haelt die Spalte ruhig: "+" und "-" sind zwar beide in Festbreitenschrift, der Name soll beim Auf- und Zuklappen aber garantiert nicht springen. -------------------------------------------------------------------------- */ /* Luft zwischen Unterueberschrift und der ersten Paketkarte (Vorgabe 14.09.2026). Noetig, weil die Regel weiter unten den margin-top von ".mini" fuer diese Karten auf 0 setzt - sonst klebte die erste Karte an der Unterueberschrift. 44px ist derselbe Wert, den .magrow zwischen Abschnittskopf und Inhalt nutzt. */ #bauteileList{margin-top:44px} /* ---------- PAKETE ALS KACHELN (29.09.2026) ------------------------------------------- Vorgabe Claras: "die Aufzaehlung nicht mehr als Liste machen, sondern auch in so Kacheln mit einem Button, der sagt 'Paket ansehen'". Vorher standen zwanzig gleich aussehende Zeilen untereinander - sie sagten nichts darueber, was ein Paket IST. Die Kachel zeigt es: Bild, Name, Preis, Knopf. auto-fill MIT MINDESTBREITE statt fester Spaltenzahl: Auf einem breiten Schirm stehen vier nebeneinander, auf einem schmalen zwei, auf dem Telefon eine - ohne dass hier eine einzige Zahl je Geraet gepflegt werden muesste. 240px ist die Breite, unter der Paketname und Preis nebeneinander nicht mehr lesbar sind. align-content:start an der Kachel und der Knopf mit margin-top:auto: Die Knoepfe stehen dadurch auf einer Linie, auch wenn ein Name zwei Zeilen braucht. Ohne das haengt jeder Knopf an seinem Text und die Reihe wirkt zerfranst. DIE POSITIONSLISTE BLEIBT, eingeklappt hinter "N Positionen" - sie ist der indexierbare Inhalt dieser Seite (die Detailansicht je Paket entsteht erst im Browser). Zugeklappt ist sie eine Zeile, aufgeklappt steht sie in der Kachel, ohne die Nachbarn zu verschieben: Grid-Zeilen wachsen, sie ruecken nicht seitlich. */ /* AUF DER PAKETSEITE BLEIBT NUR DAS PAKET (29.09.2026, Vorgabe Claras). Die Klasse setzt konfigurator.js, wenn die Ansicht ueber ?zubehoer= geoeffnet wurde - also ueber die eigene Adresse, nicht als Einschub aus der Kaufbox. Weg sind: das Kopfband mit dem Seitentitel, die Ueberschrift ueber den Kacheln und der Werkzeug-Abschnitt am Ende. AUSBLENDEN UND NICHT ENTFERNEN: Das Kopfband und der Werkzeug-Abschnitt kommen vom Server und stehen im HTML. Sie per JavaScript aus dem Dokument zu nehmen waere derselbe Anblick mit mehr Teilen - und ein Rueckweg muesste sie wieder aufbauen. Der obere Abstand ersetzt den, den sonst das Kopfband mitbringt: Ohne ihn saesse der Rueckweg-Knopf unmittelbar unter der Navigationsleiste. */ html.bwp-paketseite .seitenband, html.bwp-paketseite .bt-liste-titel, html.bwp-paketseite #werkzeug{display:none} html.bwp-paketseite #bauteile{padding-top:34px} /* Ueberschrift ueber den Paketkacheln (29.09.2026). Der Abstand nach unten ersetzt den, den #bauteileList bisher nach oben hatte - zusammen waeren es 44 + 24px gewesen. */ .bt-liste-titel{margin-top:44px;margin-bottom:0} .bt-liste-titel + #bauteileList{margin-top:18px} @media(max-width:768px){.bt-liste-titel{margin-top:30px}.bt-liste-titel + #bauteileList{margin-top:14px}} #bauteileList{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px} /* Die Paketansicht ersetzt den Inhalt dieses Behaelters - als Rasterfeld bekaeme sie die Breite EINER Kachelspalte (240px). Fuer ihre Dauer ist der Behaelter deshalb kein Raster. Die Klasse setzt renderZubehoerDetail(), renderBauteilePanel() nimmt sie wieder weg. */ #bauteileList.zeigt-detail{display:block} .bt-kachel{display:flex;flex-direction:column;gap:10px;padding:16px;background:var(--card); border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)} .bt-kachel-bild{aspect-ratio:4/3;background:var(--paper);border-radius:var(--radius-s); display:flex;align-items:center;justify-content:center;overflow:hidden} .bt-kachel-bild img{width:100%;height:100%;object-fit:contain;padding:10px} .bt-kachel-bild:empty{display:none} .bt-kachel-kopf{display:flex;flex-direction:column;gap:4px} .bt-kachel .bt-item-name{font-weight:700;font-size:15px;line-height:1.3} .bt-kachel .price{font-size:18.5px;font-weight:800;color:var(--bernstein-dark); font-family:var(--mono)} /* .btn bringt Breite und Farbe mit; hier bleibt nur, was die Kachel braucht: kleiner, und unten angeschlagen, damit die Knoepfe einer Reihe auf einer Linie stehen. */ .bt-kachel .bt-detail-link{margin-top:auto;font-size:14.5px;padding:10px 14px} /* "Zur Konfiguration hinzufuegen" (29.09.2026). Der ZWEITE Knopf der Kachel und deshalb bewusst leiser als der gelbe darueber: Rahmen statt Flaeche. Wer hier ist, will in der Regel erst sehen, was drin ist - das Hinzufuegen ist der Weg fuer die, die es schon wissen. Im Kopf der Paketansicht steht derselbe Knopf; dort bricht er in eine eigene Zeile, damit er neben Name und Preis nicht die Zeile sprengt. */ .bt-add{width:100%;font-family:var(--font);font-weight:700;font-size:13px;color:var(--gruen); background:none;border:1.5px solid var(--line);border-radius:var(--radius-s);padding:8px 12px; cursor:pointer;transition:border-color .15s,background .15s,color .15s} .bt-add:hover{border-color:var(--gruen);background:var(--gruen-tint)} /* MENGENREGLER AN DER KACHEL UND IM KOPF DER PAKETSEITE (30.09.2026, Vorgabe Claras: "auch bei der Bauteile-Seite bei den aufgelisteten Produktpaketen einen Regler machen mit Meteranzahl und Stueckanzahl, bei den gleichen wie auch bei der Konfiguration"). DASSELBE BEDIENELEMENT WIE DORT: .qtystep ist unveraendert das aus dem Konfigurator - Rahmen, Groesse, die 34px-Flaechen fuer Plus und Minus. Ein zweites Aussehen fuer dieselbe Handlung waere ein zweites Aussehen ohne zweiten Grund. REGLER LINKS, PREIS RECHTS: Die Zahl, die sich aendert, steht neben den Knoepfen, die sie aendern; was es kostet, am rechten Rand wie ueberall in dieser Kachel. Bei schmalen Kacheln rutscht der Preis unter den Regler statt ihn zu quetschen. NUR ACHT PAKETE HABEN EINEN - die anderen Kacheln bleiben, wie sie waren. Deshalb der Abstand am Regler und nicht am Knopf darueber: Sonst stuende unter jeder Kachel ohne Menge eine Luecke. */ .bt-menge{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between; gap:8px;margin-top:8px} .bt-menge-preis{color:var(--bernstein-dark);font-weight:800;font-size:14px;text-align:right} /* DER STUECKPREIS UEBER DER SUMME, nur im Paketfenster (13.10.2026, Vorgabe Claras). Dieselbe Gestalt wie in den Zeilen der Kaufbox (.buyline.xrow .xr-einzel): zurueckgenommen, in der Textschrift, eine Zeile darueber. Die fette Zahl darunter bleibt die, die in die Gesamtsumme eingeht - deshalb traegt sie allein das Gewicht. EINE EIGENE REGEL UND KEIN GEMEINSAMER SELEKTOR mit der Kaufbox: Dort steht die Zeile in einem Raster mit fester Spaltenbreite, hier in einer Flexzeile neben dem Regler. Gemeinsam waeren es zwei Lagen unter einem Namen, und die naechste Aenderung an der einen traefe die andere mit. */ .bt-menge-preis .xr-einzel{display:block;margin-bottom:2px;font-family:var(--font); font-weight:500;font-size:11.5px;line-height:1.3;color:var(--muted);white-space:nowrap} .bt-menge .qtystep{flex:0 0 auto} @media(max-width:576px){ .bt-menge .qtystep button{width:30px;height:30px} .bt-menge .qtystep .qv{min-width:42px;font-size:13.5px} } /* Im Kopf der Paketseite sitzt der Regler in derselben Rasterspalte wie Preis und Knopf, also rechts unter dem Knopf. */ .zub-head .bt-menge{grid-column:2;grid-row:3;justify-self:end;margin-top:2px} @media(max-width:576px){.zub-head .bt-menge{grid-column:1;grid-row:4;justify-self:start}} /* Der gewaehlte Zustand ist leiser, aber weiter anklickbar: Ein zweiter Klick nimmt das Paket wieder heraus (29.09.2026). Deshalb kein cursor:default mehr - er haette gesagt, hier gibt es nichts mehr zu tun. */ .bt-add.ist-drin{color:var(--muted);border-color:var(--line);background:var(--paper)} .bt-add.ist-drin:hover{color:var(--ink);border-color:var(--muted)} .bt-add:disabled{color:var(--muted);border-color:var(--line);background:var(--paper);cursor:default} /* DER KOPF DER PAKETSEITE IST EIN RASTER (29.09.2026, Vorgabe Claras: "den Titel in einer Zeile lassen und den Preis weiter rechts in der Zeile anzeigen, darunter dann den Knopf - dieser muss aber nicht so breit sein"). Vorher war er ein Flex OHNE Umbruch, und der Knopf trug flex:1 1 100%. Drei Dinge mit dem Anspruch auf die volle Breite in einer Zeile, die nicht umbrechen darf: Der Titel wurde zusammengequetscht und lief ueber mehrere Zeilen, der Preis rutschte in die Mitte. Als Raster ist jede Stelle benannt statt ausgehandelt: Titel links, Preis rechts in derselben Zeile, der Knopf darunter und nur so breit wie seine Beschriftung. EIGENE KLASSE zub-head, weil .bt-detail-head auch die aeltere Bauteil-Ansicht und die Info-Blase im Konfigurator tragen - dort steht ein Bild im Kopf, und ein Raster aus zwei Spalten waere dort falsch. */ /* DER KOPF DER PAKETSEITE: Titel links, Preis rechts daneben, der Knopf darunter. ZWEIMAL GETAUSCHT AM 30.09.2026. Erst sollten Preis und Knopf die Plaetze tauschen, dann wieder zurueck ("setz den Button 'Zur Konfiguration hinzufuegen' bitte unter den Preis"). Es steht damit wieder so, wie Clara es am 29.09.2026 beschrieben hatte: "den Titel in einer Zeile lassen und den Preis weiter rechts in der Zeile anzeigen, dadrunter dann den Button". DAS RASTER ORDNET, NICHT DIE REIHENFOLGE IM HTML: Der Baustein gibt Titel, Preis, Knopf aus - dieselbe Reihenfolge, die auch die Info-Blase und die aeltere Detailansicht lesen. Wer die Felder im Markup umstellte, aenderte sie dort mit. Genau deshalb waren beide Richtungen des Tauschs je drei Zeilen CSS und kein Eingriff ins Skript. align-items:baseline: Titel und Preis stehen auf einer gemeinsamen Schriftlinie - zwei Texte verschiedener Groesse, mittig zueinander gestellt, wirken sonst leicht versetzt. */ .zub-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline; column-gap:16px;row-gap:12px} .zub-head h3{grid-column:1;grid-row:1;min-width:0} .zub-head .price{grid-column:2;grid-row:1;justify-self:end;margin-left:0} /* DER KNOPF STEHT RECHTS UNTER DEM PREIS (30.09.2026, Vorgabe Claras: "den Button 'Zur Konfiguration hinzufuegen' bei der Produktpaketseite auf die rechte Seite unter den Preis bitte setzen"). Vorher lag er links ueber die ganze Breite. Damit bilden Preis und Knopf eine Spalte: erst was es kostet, dann was man damit tut. Die Ueberschrift behaelt die ganze linke Spalte und muss den Knopf nicht mehr umfliessen. */ .zub-head .bt-add{grid-column:2;grid-row:2;justify-self:end;width:auto;margin-top:0} @media(max-width:576px){ /* Auf dem Telefon darf der Preis unter den Titel - nebeneinander bliebe fuer den Namen kaum etwas uebrig. Reihenfolge: Titel, Preis, Knopf. */ .zub-head{grid-template-columns:1fr;row-gap:6px} .zub-head .price{grid-column:1;grid-row:2;justify-self:start} .zub-head .bt-add{grid-column:1;grid-row:3;margin-top:6px} } @media(max-width:768px){.bt-add{font-size:12.5px;padding:7px 10px}} .bt-kachel-liste > summary{cursor:pointer;list-style:none;font-size:12.5px;font-weight:700; color:var(--muted);padding:2px 0} .bt-kachel-liste > summary::-webkit-details-marker{display:none} .bt-kachel-liste > summary::after{content:"▾";font-family:var(--mono);margin-left:6px; display:inline-block;transition:transform .2s ease} .bt-kachel-liste[open] > summary::after{transform:rotate(180deg)} .bt-kachel-liste > summary:hover{color:var(--ink)} .bt-kachel-liste .lu-grid{margin-top:8px} .bt-kachel-liste .bt-pos{display:flex;align-items:center;gap:10px} @media (prefers-reduced-motion: reduce){.bt-kachel-liste > summary::after{transition:none}} @media(max-width:768px){ #bauteileList{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px} .bt-kachel{padding:12px;gap:8px} .bt-kachel .bt-item-name{font-size:14px} .bt-kachel .bt-detail-link{font-size:13.5px;padding:9px 12px} } .bt-item .price{font-size:18.5px;font-weight:800;color:var(--bernstein-dark)} details.bt-item summary::before{content:"+";font-family:var(--mono);color:var(--muted);font-weight:700;flex:0 0 auto;min-width:1ch;text-align:center} details.bt-item[open] summary::before{content:"–"} /* Zarte Linie unter jedem Paketnamen (Vorgabe 14.09.2026), damit Name und Preis als EINE Zeile zusammengehoeren und sich nicht mit der Nachbarkarte mischen. Dafuer entfaellt die border-top, die ".mini" jeder Karte mitgibt: sonst staenden zwischen zwei zugeklappten Karten zwei Linien im Abstand von 10px, und die Zuordnung waere unklarer statt klarer. Eine Linie pro Karte, und zwar die untere - so schliesst sie die Kopfzeile ab und trennt sie aufgeklappt zugleich von den Produktzeilen. */ details.bt-item{border-top:none;margin-top:0} .bt-item summary{border-bottom:1px solid var(--line)} /* Artikelnummer unter dem Produktnamen - nur auf der Detailseite (zubPosZeile mit mitArt). In der Uebersicht waere sie Ballast, hier ist sie der Grund, warum jemand nachschlaegt. Festbreitenschrift, damit sich Ziffernfolgen vergleichen lassen. */ .bt-pos-art{display:block;font-size:12px;color:var(--muted);font-family:var(--mono);margin-top:2px} /* Produktliste der Detailseite: groessere Bilder als in der Uebersicht - dort dienen sie der Wiedererkennung, hier soll man etwas erkennen koennen. */ .bt-detail-pos .bt-pos-img{width:64px;height:64px} /* AUFKLAPPBARE BESCHREIBUNG JE POSITION (29.09.2026, Vorgabe Claras mit Screenshot: "dazu soll eine Beschreibung unter die einzelnen Produkte, darf auch aufklappbar sein mit einem nach unten zeigenden Dreieck"). DIE ZEILE SELBST IST DER AUFKLAPPER:
    um die fertige .bt-pos-Zeile, die traegt sie unveraendert. Ein eigener Knopf unter der Zeile waere eine zweite Zeile je Produkt und in einer Liste aus acht Positionen eine Leiste aus acht Knoepfen. So bleibt die Liste ruhig, und was sich oeffnen laesst, sagt das Dreieck. OHNE Beschreibung bleibt es ein blankes
    - kein Dreieck, nichts anklickbar. Das ist der haeufigere Fall, solange die Texte aus den Datenblaettern fehlen, und er darf nicht aussehen, als sei da etwas verborgen. */ details.bt-pos-item{border-bottom:1px solid var(--line)} details.bt-pos-item:last-child{border-bottom:0} /* Die Trennlinie zieht jetzt das
    , sonst laege sie zwischen Zeile und aufgeklapptem Text - also mitten im Produkt statt zwischen zweien. */ details.bt-pos-item > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px} details.bt-pos-item > summary::-webkit-details-marker{display:none} details.bt-pos-item > summary .bt-pos{flex:1;min-width:0;border-bottom:0} details.bt-pos-item > summary:focus-visible{outline:2px solid var(--bernstein);outline-offset:2px;border-radius:8px} /* DAS DREIECK IST AM 29.09.2026 GROESSER GEWORDEN (Vorgabe Claras: "sodass man sieht, dass es aufklappbar ist"). Bei 13px und Grauton war es ein Satzzeichen neben der Menge und ging zwischen Bild, Name, Artikelnummer und "1x" unter. OHNE KREIS DARUM (Nachtrag Clara, 30.09.2026: "das Dreieck soll nicht so umkreist"). Kurz stand es in einem runden Feld mit Rahmen - das war ein Knopf und sah nach einer zweiten Schaltflaeche neben "Zur Konfiguration hinzufuegen" aus. Geblieben ist allein das, was gefehlt hat: Groesse. 21px statt 13px, in der Schriftfarbe statt im Grauton, denn Grau liest sich als abgeschaltet, und abgeschaltet ist hier nichts. Die Trefferflaeche ist trotzdem gross - angeklickt wird die ganze Zeile, nicht das Zeichen. Das Padding sorgt nur dafuer, dass es nicht am Rand klebt. */ .bt-pos-chev{flex:0 0 auto;color:var(--ink);font-size:21px;line-height:1;padding:0 4px; transition:transform .18s ease,color .18s ease} details.bt-pos-item[open] > summary .bt-pos-chev{transform:rotate(180deg)} /* Faerbt sich, wenn die ZEILE ueberfahren wird - sie ist die Schaltflaeche. */ details.bt-pos-item > summary:hover .bt-pos-chev{color:var(--bernstein-dark)} @media(max-width:576px){.bt-pos-chev{font-size:19px}} /* Eingerueckt auf Bildbreite plus Abstand, damit der Text unter dem Namen beginnt und nicht unter dem Bild - er gehoert zum Namen. */ /* KNOPF ZUM HERUNTERLADEN, unter der Beschreibung (30.09.2026, Vorgabe Claras). Er sitzt auf derselben Einrueckung wie der Text, damit beides zu demselben Produkt gehoert und nicht zur Liste. Bewusst der stille Knopf (.quiet): Auf der Seite gibt es genau eine Handlung, die auffallen soll, und das ist "Zur Konfiguration hinzufuegen". */ /* Mehrere Dokumente je Position sind moeglich (der Dichteinsatz hat Montageanleitung UND Datenblatt) - deshalb umbrechend statt in einer Zeile. */ .bt-pos-pdf{margin:0 0 14px;padding-left:74px;display:flex;flex-wrap:wrap;gap:8px} .bt-pos-pdf .btn{display:inline-flex;align-items:center;gap:8px;font-size:13px;padding:8px 13px} .bt-pos-pdf .btn::before{content:"⤓";font-size:15px;line-height:1} @media(max-width:768px){.bt-pos-pdf{padding-left:62px}} @media(max-width:576px){.bt-pos-pdf{padding-left:0}.bt-pos-pdf .btn{font-size:12.5px}} .bt-pos-text{margin:0 0 12px;padding-left:74px;font-size:14px;line-height:1.55;color:var(--muted);overflow-wrap:anywhere} @media(max-width:768px){.bt-pos-text{padding-left:62px}} @media(max-width:576px){.bt-pos-text{padding-left:0;font-size:13.5px}} .bt-detail-head .price{margin-left:auto;font-size:21px;font-weight:800;color:var(--bernstein-dark)} @media(max-width:768px){ #bauteileList{margin-top:26px} .bt-item .price{font-size:16.5px} .bt-detail-pos .bt-pos-img{width:52px;height:52px} .bt-detail-head .price{margin-left:0;display:block;margin-top:8px;font-size:19px} /* Die Paketseite regelt ihren Kopf selbst (.zub-head) - diese Zeile gilt fuer die aeltere Ansicht und die Blase, dort steht der Preis unter dem Bild. */ .zub-head .price{display:inline;margin-top:0} } /* Hinweis im Kaufkasten, dass Aussen- und Inneneinheit zum Kit gehoeren (14.09.2026). Steht direkt unter der Kit-Zeile und ist bewusst leise: eine Feststellung, keine Auswahl. Der Einzug richtet ihn an den Produktnamen darueber aus, nicht an dessen Vorschaubild. */ .bb-enthalten{margin:2px 0 10px 56px;font-size:12.5px;line-height:1.4;color:var(--muted)} @media(max-width:768px){ .bb-enthalten{margin-left:0} } /* --- WARENKORB OBEN RECHTS (14.09.2026) ------------------------------------- Knopf in der Topbar plus Schublade von rechts. Bewusst dasselbe Muster wie die Navigations-Schublade (.navdrawer), nur die Richtung ist gespiegelt - ein zweites Bewegungsidiom auf derselben Seite waere Unruhe ohne Gewinn. -------------------------------------------------------------------------- */ .navkorb{position:relative;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center; width:40px;height:40px;border:1px solid var(--line);border-radius:var(--radius-pill); background:var(--card);color:var(--ink);cursor:pointer;margin-left:auto; transition:border-color .15s ease,background .15s ease} .navkorb:hover{border-color:var(--bernstein-dark);background:var(--bernstein-tint)} /* Die Zahl sitzt am Rand des Knopfes, nicht darin - sonst verschoebe sie das Symbol, sobald sie zweistellig wird. */ .navkorb-zahl{position:absolute;top:-5px;right:-5px;min-width:19px;height:19px;padding:0 5px; display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-pill); background:var(--bernstein-dark);color:#fff;font-family:var(--mono);font-size:11px;font-weight:700} /* Das display oben ueberstimmt sonst das hidden-Attribut - die Null stand dadurch immer da, auch bei leerer Auswahl. Browser setzen [hidden] nur mit display:none im Standardstil, und jede eigene display-Angabe gewinnt. */ .navkorb-zahl[hidden]{display:none} /* --- FARBEN IN DER LEISTE (14.09.2026) -------------------------------------- Der Warenkorb steht jetzt ganz aussen und traegt das Gelb: Er ist auf dieser Seite die Handlung, zu der alles hinfuehrt, und am aeusseren Rand ist er mit dem Mauszeiger am leichtesten zu treffen. Der Vergleichs-Knopf hatte dasselbe Gelb - zwei gleich auffaellige Knoepfe nebeneinander, von denen keiner sagt, welcher der wichtigere ist. Er bekommt deshalb das Nussbraun des Hauses: erkennbar ein Knopf, aber sichtbar der zweite. Die Zahl am Warenkorb wechselt von Bernstein auf Tinte - auf Gelb waere sie kaum vom Knopf zu unterscheiden gewesen. */ .topbar .navkorb{background:var(--rost);border:2px solid var(--ink);color:var(--ink); transition:border-color .15s ease,background .15s ease,transform .15s} /* HOVER-WIRKUNGEN GETAUSCHT (15.09.2026). Das kurze Aufziehen hatte der Vergleichs-Knopf, der Warenkorb nur einen Farbwechsel - jetzt umgekehrt. Der Gedanke dahinter: Die Bewegung gehoert an die Handlung, zu der alles hinfuehrt. Ein Knopf, der sich meldet, wenn der Zeiger ihn streift, wird eher gefunden - und gefunden werden muss hier der Warenkorb. Farbe behalten beide, getauscht wird nur das Aufziehen. */ .topbar .navkorb:hover{background:var(--rost-dark);border-color:var(--ink);transform:scale(1.04)} @media (prefers-reduced-motion: reduce){ .topbar .navkorb{transition:border-color .15s ease,background .15s ease} .topbar .navkorb:hover{transform:none} } .topbar .navkorb-zahl{background:var(--ink);color:#fff} /* Beige statt Nussbraun (Vorgabe 14.09.2026). --sand-deep und nicht --sand: Letzteres liegt so nah am Untergrund der Leiste, dass der Knopf seine Kante verloere und nur noch der Rahmen ihn als Knopf ausweisen wuerde. */ .topbar .resume{background:var(--sand-deep);color:var(--ink)} /* Nur noch Farbe - das Aufziehen ist an den Warenkorb gewandert. transform:none muss ausdruecklich dastehen: Die Grundregel ".resume:hover" setzt scale(1.04), und meine Regel hier schaltet eine ANDERE Eigenschaft, waere also wirkungslos. */ .topbar .resume:hover{background:var(--sand);transform:none} /* --- PRODUKT IN DER OBEREN LEISTE (14.09.2026) ------------------------------ Erscheint erst, wenn der Produkttitel nach oben aus dem Bild gelaufen ist. Ab da steht in der klebenden Leiste, woran gerade gearbeitet wird - Bild und Titel links, der Warenkorb rechts, wo er ohnehin sitzt. Die Hauptnavigation weicht dafuer: Beides nebeneinander passt in 64px Hoehe nur, indem eines von beiden auf wenige Zeichen zusammenschrumpft. Die Navigation ist ueber das Menue weiter erreichbar; das Produkt waere ohne die Leiste gar nicht mehr zu sehen. [hidden] allein reicht nicht - display:flex schlaegt es (dieselbe Falle wie bei der Warenkorb-Zahl darueber). */ /* Das Produkt sitzt in der linken Gruppe, hinter dem Logo. flex:0 1 auto und nicht 1 1 auto: Es soll den Platz nicht an sich ziehen, sondern nur so viel nehmen, wie der Titel braucht - die Navigation in der Mitte hat Vorrang. */ .tb-produkt{display:flex;align-items:center;gap:11px;min-width:0;flex:0 1 auto;margin-left:6px} .tb-produkt[hidden]{display:none} .tb-produkt img{width:40px;height:40px;object-fit:contain;background:var(--card); border:1px solid var(--line);border-radius:var(--radius-s);padding:3px;flex:0 0 auto} .tb-produkt-titel{font-weight:800;font-size:15px;line-height:1.25;letter-spacing:-.01em; overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:240px} /* IM PRODUKT-MODUS WEICHT DIE NAVIGATION (Vorgabe 14.09.2026, am 22.09.2026 bestaetigt: "du kannst die Reiter auch entfernen, es soll da nur das Produkt stehen"). Dazwischen lag ein Zwischenstand von einer Stunde, in dem beides gleichzeitig stand - auf Wunsch, und auf Wunsch wieder zurueck. Was aus diesem Zwischenstand BLEIBT, ist der Aufbau: Die drei Gruppen mit ihren festen Spalten sind der Grund, warum der Warenkorb jetzt auch ohne Navigation rechts stehenbleibt. Der Knopf "Jetzt selbst bauen" weicht ebenfalls: Auf einer Produktseite ist der Warenkorb daneben der naechste Schritt, nicht der Rechner. */ .topbar.hat-produkt .navwrap, .topbar.hat-produkt .resume{display:none} /* Im Produkt-Modus wird aus dem Symbol ein beschrifteter Knopf. Vorgabe 15.09.2026: ein "schneller Weg, den Warenkorb komplett zu oeffnen" - ein 40px-Symbol neben sieben Reitern ist keiner. Der Platz dafuer entsteht genau hier, weil die Navigation im selben Moment weicht. */ .navkorb-text{display:none;font-weight:800;font-size:14px;white-space:nowrap} .topbar.hat-produkt .navkorb{width:auto;height:40px;gap:9px;padding:0 16px; border-radius:var(--radius-pill)} .topbar.hat-produkt .navkorb-text{display:inline} /* Die Zahl sitzt sonst als Blase am Rand des runden Knopfes - im breiten Knopf steht sie besser IN der Zeile, direkt hinter der Beschriftung. */ .topbar.hat-produkt .navkorb-zahl{position:static;top:auto;right:auto; min-width:20px;height:20px} /* HIER STANDEN NACHEINANDER ZWEI REGELN FUER ENGE FENSTER: erst eine, die das Produkt zwischen 861 und 1180px ganz ausblendete (geraten, und sie hat das Merkmal in einem gewoehnlichen Fenster abgeschaltet), dann eine mildere, die den Titel dort kuerzte. Beide sind gegenstandslos, seit die Navigation im Produkt-Modus wieder weicht: Der Platz, um den sie konkurrierten, ist frei. Stattdessen darf der Titel hier BREITER werden als die 240px, die er neben den Reitern hat - ein Produktname soll nicht abgeschnitten sein, wenn die halbe Leiste leer ist. */ .topbar.hat-produkt .tb-produkt-titel{max-width:360px} @media(max-width:768px){ /* Auf schmalen Schirmen bleibt es beim Symbol - der Produktname braucht die Breite. */ .topbar.hat-produkt .navkorb{width:38px;padding:0;gap:0} .topbar.hat-produkt .navkorb-text{display:none} .topbar.hat-produkt .navkorb-zahl{position:absolute;top:-5px;right:-5px} } @media(max-width:768px){ .tb-produkt img{width:34px;height:34px} .tb-produkt-titel{font-size:13.5px} } /* Verdunkelung hinter der Schublade (15.09.2026). z-index eine Stufe unter ihr, damit sie selbst bedienbar bleibt. Das hidden-Attribut allein wuerde vom display-Wert geschlagen - deshalb die eigene Regel. */ .korbschatten{position:fixed;inset:0;z-index:84;background:rgba(51,49,45,.5); animation:korbSchattenAn .22s ease} .korbschatten[hidden]{display:none} @keyframes korbSchattenAn{from{opacity:0}to{opacity:1}} @media (prefers-reduced-motion: reduce){.korbschatten{animation:none}} .korbdrawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,92vw);z-index:85; background:var(--paper);display:flex;flex-direction:column; border-left:1px solid var(--line);box-shadow:-8px 0 24px rgba(51,49,45,.08); transform:translateX(102%);transition:transform .22s cubic-bezier(.2,.8,.2,1);visibility:hidden} .korbdrawer.open{transform:none;visibility:visible} .korbdrawer-head{display:flex;align-items:center;justify-content:space-between;gap:12px; padding:18px 22px;border-bottom:1px solid var(--line);flex:0 0 auto} .korbdrawer-head b{font-size:16px} .korbdrawer-body{flex:1 1 auto;overflow-y:auto;padding:18px 22px 28px;min-height:0} /* Der stehende Teil: Summe, Foerderung, Abschlussknopf. Ausserhalb der Scrollflaeche, damit der Preis beim Blaettern durch die Positionen stehen bleibt (Vorgabe 15.09.2026). Eigener Grund und Schatten nach oben, sonst sieht man beim Scrollen nicht, dass die Liste darunter weiterlaeuft. */ /* ===== DER FUSS DER SCHUBLADE IST FLACH (14.10.2026) ========================= Meldung Claras: "beim kleinen Pop-up von rechts nimmt mir die Zusammenfassung viel zu viel Platz ein, mach das im Verhaeltnis zu den Produkten viel weniger hoch." SIE IST GEWACHSEN, OHNE DASS JEMAND SIE VERGROESSERT HAT: Am 14.09.2026 standen hier drei Zeilen (Paket gesamt, Foerderung, Preis nach Foerderung). Seitdem sind der Wunschstart und der Versand dazugekommen, bei aktiver Aktion ausserdem Zwischensumme und Rabatt - also bis zu sieben Zeilen plus Knopf in einer Schublade von 420 px Breite. Jede einzelne Zeile war begruendet; die Summe daraus war es nicht. GEKUERZT WIRD AN DEN ABSTAENDEN, NICHT AN DEN ZEILEN. Welche Angabe hier steht, hat Clara selbst entschieden - eine davon wieder wegzunehmen hiesse, ihre eigene Vorgabe zu ueberstimmen. Die Zeilen ruecken deshalb zusammen: Polster, Zeilenhoehe und Schriftgroessen gehen auf das Mass, das eine Nebenrechnung braucht. Das Ergebnis darunter behaelt sein Gewicht - auf ihm soll das Auge haengenbleiben, nicht auf dem Weg dorthin. DIE SCHUBLADE IST DIE ZWISCHENUEBERSICHT, nicht der Abschluss: Wer die Rechnung in Ruhe lesen will, klickt auf "Warenkorb ansehen" - dort steht sie in voller Groesse in einer eigenen Spalte. Hier zaehlt, dass die Produkte sichtbar bleiben. */ .korbdrawer-fuss{flex:0 0 auto;padding:8px 22px 14px;background:var(--card); box-shadow:0 -6px 16px rgba(51,49,45,.06)} /* Die Zeilen der Nebenrechnung: enger als im grossen Fenster, weil sie hier zu siebt untereinanderstehen koennen. */ .korbdrawer-fuss .korb-zeile{padding:2px 0;border-bottom:none;line-height:1.3} /* DIE ZUSATZANGABE RUECKT NEBEN DEN NAMEN, nicht darunter. "46 % KfW 458" und "Abholung in 59425 Unna" stehen sonst je in einer eigenen Zeile - zwei Zeilen fuer zwei Halbsaetze, in einer Schublade, in der die Produkte darueber den Platz brauchen. Im grossen Fenster bleibt es beim Umbruch; dort ist Breite kein Mangel. */ .korbdrawer-fuss .korb-zeile .korb-name small{display:inline;font-size:10.5px;line-height:1.25} .korbdrawer-fuss:empty{display:none} /* OHNE LINIE OBEN (15.09.2026). Dort trafen zwei aufeinander: der Rahmen des Fusses und die kraeftige Oberkante der ersten Summenzeile. Abgegrenzt wird der stehende Teil jetzt allein durch den Schatten nach oben - das reicht, und es spart die Hoehe von Linie, Polsterung und Abstand darunter. */ .korbdrawer-fuss .korb-summe{margin-top:0;border-top:none;padding-top:0} /* Gleich gross: "Dein Paket gesamt" und "Förderung" sind zwei Zwischenschritte derselben Rechnung. Groesser nur das Ergebnis - auf ihm soll das Auge haengenbleiben, nicht auf dem Weg dorthin. */ .korbdrawer-fuss .korb-summe, .korbdrawer-fuss .korb-abzug{font-size:13px} .korbdrawer-fuss .korb-summe .korb-preis, .korbdrawer-fuss .korb-abzug .korb-preis{font-size:13.5px} .korbdrawer-fuss .korb-summe{padding:2px 0} /* Die Zwischensumme traegt denselben Rang wie die Abzugszeilen - erst das Ergebnis unten darf wieder auffallen. */ .korbdrawer-fuss .korb-summe.korb-vorher{font-weight:600;color:var(--muted)} /* Das Ergebnis behaelt sein Gewicht, verliert aber die Luft darum: Die Linie darueber trennt bereits, der Abstand musste es nicht ein zweites Mal tun. */ .korbdrawer-fuss .korb-summe.korb-danach{font-size:15px;margin-top:5px;padding-top:6px} .korbdrawer-fuss .korb-summe.korb-danach .korb-preis{font-size:19px} .korbdrawer-fuss .korb-summe.korb-danach small{font-size:10.5px;line-height:1.25;margin-top:1px} .korbdrawer-fuss .korb-start .korb-startwert{font-size:11.5px} /* Der Knopf rueckt naeher an die Rechnung - er gehoert zu ihr. */ .korbdrawer-fuss .korb-weiter{margin-top:8px} /* Der Kit-Name in der Schublade fuehrt auf seine Produktseite (29.09.2026). Er sieht aus wie die uebrigen Namen - eine andere Farbe haette die Zeile aus der Liste gehoben, obwohl sie dieselbe Sache ist. Nur beim Ueberfahren zeigt die Unterstreichung, dass es weitergeht. */ .korb-link{color:inherit;text-decoration:none} .korb-link:hover,.korb-link:focus-visible{text-decoration:underline} .korb-zeile{display:flex;align-items:baseline;gap:12px;padding:9px 0;border-bottom:1px solid var(--line)} /* Entfernen-Kreuz (15.09.2026). Zurueckhaltend, bis man die Zeile anfasst: Eine Liste mit einem kraeftigen Kreuz hinter jeder Position sieht aus wie eine Aufforderung zum Aufraeumen. Auf Geraeten ohne Mauszeiger gibt es kein :hover - dort steht es immer sichtbar, sonst waere es unauffindbar. */ .korb-weg,.korb-weg-leer{flex:0 0 auto;width:22px;height:22px;align-self:center} .korb-weg{display:inline-flex;align-items:center;justify-content:center; border:1px solid transparent;border-radius:var(--radius-pill);background:none; color:var(--muted);font:inherit;font-size:13px;line-height:1;cursor:pointer;opacity:.45; transition:opacity .15s ease,color .15s ease,border-color .15s ease,background .15s ease} .korb-zeile:hover .korb-weg{opacity:1} .korb-weg:hover{color:var(--warn);border-color:var(--warn);background:var(--warn-tint);opacity:1} .korb-weg:focus-visible{opacity:1;outline:2px solid var(--bernstein);outline-offset:2px} @media(hover:none){.korb-weg{opacity:1}} .korb-name{flex:1;min-width:0;line-height:1.35} .korb-menge{flex:0 0 auto;font-family:var(--mono);font-size:12.5px;color:var(--muted)} .korb-preis{flex:0 0 auto;font-family:var(--mono);font-weight:700;white-space:nowrap} .korb-gruppe{margin:18px 0 2px;font-family:var(--mono);font-size:11px;font-weight:700; text-transform:uppercase;letter-spacing:.06em;color:var(--bernstein)} .korb-gruppe:first-child{margin-top:0} /* DER WUNSCHSTART IN DER ZUSAMMENFASSUNG (13.10.2026). Eine Zeile wie die Abzugszeilen daneben, nur ohne Betrag: Der Wert steht rechts in der Mono-Schrift der Zahlenangaben, damit die Spalte ihre gemeinsame Kante behaelt - "KW 48 · 23.11.-29.11.2026" ist zwar keine Summe, steht aber an deren Stelle. */ .korb-start .korb-startwert{flex:0 0 auto;font-family:var(--mono);font-size:12.5px; font-weight:700;color:var(--bernstein-dark);text-align:right;white-space:nowrap} .korb-start .korb-name{font-weight:600} .korb-summe{display:flex;justify-content:space-between;align-items:baseline; border-top:2px solid var(--ink);margin-top:14px;padding-top:12px;font-weight:800} .korb-summe .korb-preis{font-size:19px;color:var(--bernstein-dark)} /* Foerderrechnung in der Schublade (14.09.2026) - sie stand vorher im Konfigurator unter den Services. Der Abzug ist eine gewoehnliche Zeile, der Preis danach die zweite Summenzeile: Das Auge soll an der letzten Zahl haengenbleiben, nicht an der ersten. */ .korb-abzug .korb-name small{display:block;color:var(--muted);font-size:11.5px;font-weight:600} .korb-abzug .korb-preis{color:var(--gruen)} .korb-summe.korb-danach{border-top:1px solid var(--line);margin-top:10px;padding-top:10px} .korb-summe.korb-danach small{display:block;font-weight:500;font-size:11.5px;color:var(--muted);line-height:1.35} .korb-summe.korb-danach .korb-preis{font-size:21px;color:var(--bernstein-dark)} /* Der Warmwasserspeicher hat seit dem 14.09.2026 kein Symbol und keine eigene fette Zeile mehr - nur noch die Gruppenzeile darueber und die Auswahl selbst. Die Auswahl darf dafuer die ganze Breite nehmen. */ /* SPEICHERWAHL WIE EINE FRAGE (21.09.2026). Die Chips tragen jetzt .af-chip, also dieselbe flache Pille wie die Antworten auf Aufstellort und Heizart im selben Kasten. Der Abstand zwischen Ueberschrift und Chips war groesser als bei den anderen Gruppen: .svc-group-label bringt 4px mit, die Zeile darunter hatte zusaetzlich 4px Rand und .buyline ihre eigene Polsterung. Zusammen stand der Block weiter unten als jede andere Gruppe. Jetzt traegt nur noch das Label seinen Abstand - wie ueberall sonst. */ #cmSpeicherBlock .spchips{flex:1 1 auto;display:flex;flex-wrap:wrap;gap:8px;margin-top:0} #cmSpeicherBlock .buyline{padding-top:0;margin-top:0;align-items:center} /* DER BETRAG LAG AUF DEN CHIPS (berichtigt 29.09.2026, Claras Screenshot: "1.390 €" mitten im Chip "300 l"). Schuld war eine Regel fuer die Kaufbox: Dort steht ueber den Chips eine fette Namenszeile, und der Betrag wird mit position:absolute oben rechts darueber gelegt - der Platz dafuer ist in genau dieser Namenszeile freigehalten (padding-right:112px). Im Kasten der Produktseite gibt es diese Zeile nicht, der Name steht im Gruppenkopf darueber. Der absolut gesetzte Betrag fiel damit auf die erste Zeile, die da war: die Chips. Hier steht er deshalb wieder im Fluss - unter den Chips, rechtsbuendig. Das ist dieselbe Anordnung, die Clara fuer die Paketzeilen verlangt hat: Preis rechts unter dem Paket. */ @media(max-width:768px){ #cmSpeicherBlock .buyline:has(.spchips){position:static;flex-wrap:wrap;row-gap:8px} #cmSpeicherBlock .buyline:has(.spchips)>.spchips{flex:1 1 100%} #cmSpeicherBlock .buyline:has(.spchips)>.svc-right, #cmSpeicherBlock .buyline:has(.spchips)>.price{position:static;flex:1 1 100%; justify-content:flex-end;text-align:right;margin:0} } /* .spchips bringt von weiter oben margin-top:8px mit - fuer die Stelle im Rechner-Funnel, wo die Chips unter einem Fliesstext stehen. Hier stehen sie unter einer Ueberschrift, die ihren Abstand schon hat; die 8px kamen obendrauf. */ /* Abschlussknopf in der Schublade - seit der Kasten nur noch hierher fuehrt. */ .korb-kasse{width:100%;margin-top:18px} /* ================= DIE ERGEBNISSEITE (14.10.2026) ================= Vorgabe Claras: die Ergebnisseite aus dem Auslegungstool uebernehmen, das E-Mail-Gate davor behalten. Die Kit-Karten (.candcard) bleiben wie sie waren - sie tragen den Kaufweg; alles hier ist das, was um sie herum dazugekommen ist. ALLES IN DEN FARBEN DES HAUSES: Bernstein fuer den Waermebedarf, Tinte fuer das Geraet, Sand fuer den Modulationsbereich, Rost fuer die Heizstab-Flaeche. Die Vorlage arbeitet mit #FFC700 und #B98B3E als festen Werten - hier stehen die Variablen, damit eine Palettenaenderung auch das Diagramm mitnimmt. */ .erg-h{font-size:clamp(23px,3.2vw,30px);line-height:1.15;font-weight:800;letter-spacing:-.015em;margin:6px 0 0} .erg-lead{margin:10px 0 0;font-size:16px;line-height:1.5;color:var(--graphit)} /* Eine Stufe lauter als .erg-stufe darunter und leiser als .erg-lead darueber: Die Zahl ist die Grundlage der Empfehlung, aber nicht ihre Ueberschrift. Die Kilowatt in Tinte, damit das Auge sie findet, ohne dass die Zeile ruft. */ .erg-heizlast{margin:8px 0 0;font-size:15px;line-height:1.5;color:var(--graphit)} .erg-heizlast b{color:var(--ink);font-weight:800;font-variant-numeric:tabular-nums} .erg-stufe{margin:6px 0 0;font-size:13.5px;line-height:1.5;color:var(--muted)} .erg-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:18px 0 4px} .erg-kpi{background:var(--paper);border-radius:var(--radius-s);padding:14px} .erg-kpi .k{font-size:12.5px;font-weight:700;color:var(--muted)} .erg-kpi .v{font-size:28px;font-weight:800;line-height:1.15;letter-spacing:-.01em;font-variant-numeric:tabular-nums} .erg-kpi .v small{font-size:15px;font-weight:700} .erg-kpi .s{font-size:12.5px;color:var(--muted);line-height:1.35;margin-top:2px} .erg-block{margin-top:30px} .erg-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:28px 0 10px} .erg-kopf h3{font-size:19px;font-weight:800;margin:0} .erg-kopf .m{font-size:12.5px;color:var(--muted)} .erg-sub{margin:0 0 10px;font-size:13.5px;line-height:1.5;color:var(--muted)} .erg-tabs{display:flex;gap:6px;flex-wrap:wrap} .erg-tab{border:1.5px solid var(--line);background:var(--card);border-radius:999px;padding:6px 13px; font-family:var(--font);font-weight:700;font-size:13px;color:var(--ink);cursor:pointer} .erg-tab:hover{border-color:var(--gruen)} .erg-tab.sel{background:var(--ink);color:var(--paper);border-color:var(--ink)} /* ---- Diagramm ---- */ /* KEIN EIGENER DECKEL MEHR (14.10.2026, zweite Vorgabe Claras am selben Tag: "die Legende der Grafik auch bitte gleich breit"). Das Diagramm stand mit 640px zwischen Texten, die 680 breit waren, und unter einer Legende, die die vollen 1040 nahm - drei Kanten uebereinander. Jetzt fuellt es die Textspalte, und die Legende darunter ist genauso breit. Kleiner wurde es heute ohnehin schon ueber die Hoehe (330 statt 400 Nutzereinheiten). */ .erg-chart{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-s);padding:6px} .erg-chart svg{width:100%;height:auto;display:block;touch-action:pan-y} .erg-tip{position:absolute;pointer-events:none;display:none;z-index:2;min-width:178px; background:var(--card);border:1.5px solid var(--ink);border-radius:var(--radius-s);padding:8px 10px; font-size:12.5px;line-height:1.4;box-shadow:0 4px 14px rgba(51,49,45,.12)} .erg-tip .t{font-weight:800;font-size:13px;margin-bottom:2px} .erg-tip .z{display:flex;justify-content:space-between;gap:12px;font-variant-numeric:tabular-nums} .erg-legende{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin:10px 0 0; font-size:12.5px;color:var(--muted)} .erg-legende span{display:inline-flex;align-items:center;gap:6px} .lg-linie{width:22px;height:0;display:inline-block;border-top:3px solid var(--ink)} .lg-last{border-top-color:var(--bernstein)} .lg-min{border-top:2.5px dotted var(--ink)} .lg-stufe{border-top:2px dashed var(--ink)} .lg-band{width:18px;height:12px;background:var(--sand);border:1px solid var(--line);border-radius:3px;display:inline-block} .lg-flaeche{width:16px;height:12px;background:var(--rost);border:1.5px solid var(--ink);border-radius:3px;display:inline-block} /* ---- Technische Daten auf der Kit-Karte ---- */ .cc-fakten{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:10px 0 0;text-align:left} .cc-fakten div{font-size:11.5px;color:var(--muted);line-height:1.3} .cc-fakten b{display:block;font-size:16px;color:var(--ink);font-variant-numeric:tabular-nums;font-weight:800} .cc-fakten b small{font-size:11px;font-weight:600;color:var(--muted)} .cc-deckung{margin-top:9px} .ccd-bahn{display:flex;height:12px;border-radius:6px;overflow:hidden;background:var(--line);gap:2px} .ccd-wp{background:var(--ink);border-radius:6px 0 0 6px} .ccd-wp.voll{border-radius:6px} .ccd-hs{flex:1;background:var(--rost);border:1.5px solid var(--ink);border-radius:0 6px 6px 0} .ccd-text{display:flex;justify-content:space-between;gap:8px;font-size:11px;color:var(--muted);margin-top:4px} /* ---- Aufklappbarer Ergebnisblock (14.10.2026, Vorgabe Claras) ---- Gleiche Kopfzeile wie .erg-kopf, nur als . Der Marker wird an zwei Stellen abgeschaltet (::marker fuer heutige Browser, ::-webkit-details-marker fuer aeltere Safari), dafuer ein eigenes Zeichen rechts, das sich beim Oeffnen dreht. */ details.erg-auf{border-top:1px solid var(--line)} details.erg-auf > summary{list-style:none;cursor:pointer;display:flex;align-items:baseline; justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0;padding:22px 34px 14px 0;position:relative} details.erg-auf > summary::-webkit-details-marker{display:none} details.erg-auf > summary::marker{content:""} details.erg-auf > summary h3{font-size:19px;font-weight:800;margin:0} details.erg-auf > summary .m{font-size:12.5px;color:var(--muted)} /* MITTIG STATT AUF FESTER HOEHE: Dasselbe Zeichen sitzt jetzt in zwei verschieden gepolsterten Kaesten - frei stehend unter den Karten und im Paar mit eigenem Rahmen. top:30px passte nur in einen davon. */ details.erg-auf > summary::after{content:"";position:absolute;right:8px;top:50%;width:9px;height:9px; border-right:2px solid var(--muted);border-bottom:2px solid var(--muted); transform:translateY(-65%) rotate(45deg);transition:transform .18s} details.erg-auf[open] > summary::after{transform:translateY(-35%) rotate(-135deg)} details.erg-auf > summary:hover h3{color:var(--gruen)} /* ---- Amortisations-Abschnitt der Foerderungsseite (15.10.2026, Vorgabe Claras: "mach das alles auch mittig") ---- Der Abschnitt steht als einziger auf dieser Seite mittig; deshalb eine eigene Klasse und keine der allgemeinen Zentrier-Regeln, die an body.bwp-mittig haengen und fuer jede Seite gelten wuerden. 62ch statt 680px, weil ein zentrierter Absatz an der Zeilenlaenge gemessen wird und nicht an einer Pixelbreite. */ .amort-block > .wrap{text-align:center} /* DIE UEBERSCHRIFT BRAUCHT EIGENE AUSSENRAENDER (15.10.2026, Meldung Claras: "den Titel 'Was das fuer deine Amortisation bedeutet' bitte auch mittig setzen"). text-align:center am Kasten darueber zentriert den TEXT, nicht den KASTEN. section.land h2 traegt max-width:16ch und keine auto-Raender - die Ueberschrift ist damit ein schmaler Block am linken Rand, in dem die Zeilen zwar mittig stehen, der aber selbst links sitzt. Genau so sah es aus. 24ch statt 16: Mit 16 braeche dieser Titel auf drei Zeilen, und eine dreizeilige Ueberschrift ueber einem zweizeiligen Absatz kippt das Verhaeltnis. 24 traegt ihn auf zwei. Der Absatz darunter hatte seine Raender schon. */ .amort-block h2{max-width:24ch;margin-inline:auto} .amort-block .sec-sub{max-width:62ch;margin-inline:auto} /* ---- Die Textspalte der Ergebnisseite (14.10.2026, Vorgabe Claras) ---- Dieselben 680px, in denen jede Frage davor stand (.qcard>#app>.step). Die Ergebnisseite traegt .compare-step und ist von jener Regel ausgenommen, weil die vier Kit-Karten und das Kaestenpaar die volle Breite brauchen - also bekommt der Textteil die Spalte hier, und zwar als eigener Behaelter statt ueber eine Kette von :not(), die beim naechsten neuen Block wieder nicht mehr stimmt. */ .erg-spalte{max-width:680px;width:100%;margin-inline:auto} /* Der rote Hinweis war 640 breit und zentriert, der Text daneben 680 und links - zwei Kanten. In der Spalte braucht er gar keine eigene Breite mehr. */ .erg-band{margin:16px 0 0} /* ---- Die beiden Kaesten unter dem Vergleich (14.10.2026, Vorgabe Claras: "'Was kostet der Heizstab' und 'Was heisst das' nebeneinander machen, gerne auch in Kaesten") ---- Beide sind
    und tragen ihren Rahmen hier, nicht innen: Die Kostentabelle und die drei Erklaerkaertchen brachten je einen eigenen mit, uebereinander waeren das zwei Rahmen. align-items:start, damit der eine Kasten nicht mitwaechst, wenn der andere aufgeklappt ist. */ .erg-paar{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start;margin-top:30px} .erg-paar > details.erg-auf{border:1px solid var(--line);border-radius:var(--radius-s); background:var(--card);padding:0 16px} /* BEIDE KAESTEN SIND ZUGEKLAPPT GLEICH HOCH (14.10.2026, Vorgabe Claras: "mach 'Was kostet der Heizstab' bitte in die gleiche Hoehe unausgeklappt - um das zu machen, kannst du bei beiden Bloecken die Fonts kleiner machen"). DIE KOPFZEILE STEHT DAFUER IN ZWEI ZEILEN STATT IN EINER MIT UMBRUCH. Geerbt war die Anordnung von .erg-kopf: Titel links, Beizeile rechts, flex-wrap fuer den Notfall. In einem halbbreiten Kasten war dieser Notfall der Normalfall - und zwar nur bei einem von beiden, weil "Stromkosten je Groesse - Preis anpassbar" laenger ist als "Bivalenzpunkt, Heizstab, Groesse". Der eine Kasten stand dann auf zwei Zeilen, der andere auf einer. UNTEREINANDER IST DIE HOEHE NICHT MEHR VOM TEXT ABHAENGIG: eine Titelzeile, eine Beizeile, bei beiden. Die kleineren Schriftgrade halten jede der beiden auf ihrer Zeile und sind ohnehin angemessen, seit die Kaesten nur noch halb so breit sind. align-items:start aus der Paar-Regel bleibt wichtig: Sonst zoege der aufgeklappte Kasten den zugeklappten auf seine Hoehe mit. */ .erg-paar > details.erg-auf > summary{padding:14px 28px 14px 0; flex-direction:column;align-items:flex-start;gap:2px} .erg-paar > details.erg-auf > summary h3{font-size:16px} .erg-paar > details.erg-auf > summary .m{font-size:11.5px;line-height:1.3} /* Auch der Inhalt eine Spur kleiner - eine vierspaltige Tabelle in einem halbbreiten Kasten hat weniger Platz als vorher ueber die ganze Seite. */ .erg-paar table.erg-tab{font-size:12.5px} .erg-paar table.erg-tab thead td{font-size:11.5px} .erg-paar table.erg-tab td{padding:7px 3px} .erg-paar .erg-ek h4{font-size:14px} .erg-paar .erg-ek p{font-size:12.5px} .erg-paar .erg-kosten .fineprint{font-size:11px} .erg-paar > details.erg-auf[open] > summary{border-bottom:1px solid var(--line);margin-bottom:14px} .erg-paar .erg-kosten{background:none;border:0;border-radius:0;padding:0 0 14px} /* Die drei Erklaerungen untereinander: in einem halbbreiten Kasten stehen drei Spalten nicht. */ .erg-paar .erg-erklaer{grid-template-columns:1fr;padding-bottom:14px} .erg-paar .erg-ek{background:var(--paper)} @media(max-width:768px){ .erg-paar{grid-template-columns:1fr;gap:12px} } /* ---- Heizstab-Kosten ---- */ .erg-kosten{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-s);padding:16px} .erg-preiswahl{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:12px} .erg-preis-seg{display:inline-flex;border:1.5px solid var(--line);border-radius:12px;padding:3px;gap:3px;flex-wrap:wrap} .erg-preis-seg button{border:0;background:transparent;border-radius:9px;padding:7px 12px;cursor:pointer; font-family:var(--font);font-weight:700;font-size:13px;color:var(--ink)} .erg-preis-seg button[aria-pressed=true]{background:var(--ink);color:var(--paper)} .erg-preis-feld{position:relative} .erg-preis-feld input{width:132px;height:42px;border:1.5px solid var(--line);border-radius:10px; padding:0 54px 0 12px;font-family:var(--font);font-size:15px;color:var(--ink);background:var(--card)} .erg-preis-feld span{position:absolute;right:12px;top:11px;color:var(--muted);font-size:13px;pointer-events:none} .erg-tab-wrap{overflow-x:auto} table.erg-tab{width:100%;border-collapse:collapse;font-size:13.5px} table.erg-tab td{padding:8px 4px;border-bottom:1px solid var(--line);vertical-align:top} table.erg-tab thead td{font-weight:700;color:var(--muted);font-size:12.5px;border-bottom:2px solid var(--line)} table.erg-tab td:not(:first-child){text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap} table.erg-tab tr.rec td{background:var(--gruen-tint)} table.erg-tab .m{font-size:11.5px;color:var(--muted)} /* ---- Erklaerkarten ---- */ .erg-erklaer{display:grid;grid-template-columns:repeat(3,1fr);gap:12px} .erg-ek{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-s);padding:16px} .erg-ek h4{margin:0 0 6px;font-size:15px;font-weight:800} .erg-ek p{margin:0;font-size:13.5px;line-height:1.5;color:var(--muted)} /* 768 UND NICHT 760 (berichtigt am 15.10.2026). Das Theme hat seit dem 30.09.2026 sechs Haltepunkte, 768 ist der Hauptumbruch (siehe den Vermerk bei .qcard). Dieser Block kam gestern mit der Ergebnisseite dazu und trug als einziger noch 760 - zwischen 761 und 768 standen die drei Kennzahlen also in drei Spalten, waehrend das Kaestchenpaar daneben schon untereinander lag. Acht Punkte breit, aber genau die Art Abweichung, die beim naechsten Feinschritt niemand mehr erklaeren kann. */ @media(max-width:768px){ .erg-kpis{grid-template-columns:1fr} .erg-kpi .v{font-size:25px} .erg-erklaer{grid-template-columns:1fr} /* Die Spalte mit den Kilowattstunden faellt zuerst: Euro sind die Zahl, um die es geht. */ table.erg-tab .opt{display:none} .erg-legende{justify-content:flex-start;gap:10px} } .korb-hinweis{margin-top:16px;font-size:12.5px;line-height:1.45;color:var(--muted)} /* HINWEIS AUF DIE FEHLENDE FOERDER-ANGABE (14.10.2026, Vorgabe Claras: "schreib beim Warenkorb einen kleinen Hinweis dazu, sodass sie wissen, dass das der Fall ist"). ER SITZT IN DER SUMMENSPALTE, nicht bei den Positionen - deshalb eine eigene Klasse und nicht .korb-hinweis: Der steht unter der Warenliste und ist grau und still. Dieser hier erklaert eine Zahl, die der Kunde gerade liest, und darf dafuer den Sandton und die Kante des Hauses tragen. Lauter als grau, leiser als eine Warnung - es ist kein Fehler, nur eine fehlende Angabe. */ .korb-fhinweis{margin:10px 0 0;padding:8px 10px;border-left:3px solid var(--bernstein); background:var(--sand);border-radius:0 var(--radius-xs) var(--radius-xs) 0; font-size:12px;line-height:1.45;color:var(--graphit)} .korb-fhinweis b{color:var(--ink);font-weight:700} /* Seit der Hinweis zwischen Foerderzeile und Schlusszeile steht (Vorgabe Claras), stossen zwei Abstaende aufeinander: seine eigenen 10 px und die 10 px, mit denen sich die Schlusszeile vom Block darueber absetzt. Zusammen reissen sie die Summenspalte auseinander - die Schlusszeile gehoert optisch an die Rechnung und nicht an den Hinweis. */ .korb-fhinweis + .korb-summe.korb-danach{margin-top:6px} .korb-fhinweis a{color:var(--ink);font-weight:700} /* In der schmalen Schublade zaehlt jeder Punkt Hoehe - dort eine Spur kompakter. */ .korbdrawer-fuss .korb-fhinweis{margin-top:8px;padding:7px 9px;font-size:11.5px} /* --- SUMMEN IM KASTEN ENTFALLEN (Vorgabe 14.09.2026) ------------------------ Alles ab "Hardware & Material" - Zwischensummen, Paketsumme, Foerderabzug, Preis danach, "Heute faellig" und "Nach Lieferung faellig" - steht jetzt in der Warenkorb-Schublade. Zwei Rechnungen nebeneinander laden zum Vergleichen ein, und sie waren nicht deckungsgleich: Die eine kannte die Liefergebuehr, die andere zeigte im Hardware-Schritt nur die Hardware. Ausgeblendet statt aus dem Markup entfernt: cmUpdateTotal() schreibt in diese Elemente ohne Absicherung; ohne sie braeche die Berechnung ab und mit ihr alles, was danach kommt. Im Dialog auf den anderen Seiten bleiben sie ohnehin sichtbar - dort gibt es keine Schublade daneben. */ .kauf-inline .bb-step[data-step="service"] .totalrow{display:none} /* AUSNAHME: DAS CODEFELD IST KEINE SUMME (17.09.2026, Betreiber-Entscheid). Die Regel darueber blendet im Kasten JEDE .totalrow aus. Das Rabattfeld traegt dieselbe Klasse und verschwand damit mit - auf der Produktseite gab es also gar keine Stelle, an der ein Kunde seinen Code haette eingeben koennen. Wer nicht ueber den ?rabatt=-Link aus der Mail kam, hatte auf diesem Kaufweg keinen Weg zu seinem Rabatt. Die Vorgabe vom 14.09.2026 bleibt im Kern unangetastet: ausgeblendet bleibt alles, was RECHNET - Paketsumme, Foerderabzug, Preis danach, Zahlungsplan. Sichtbar wird nur die Eingabe. Auch die Abzugszeile #cmRabattLine bleibt aus demselben Grund verborgen; ihre Quittung uebernimmt .rabatt-hinweis, siehe rabattZeileAnzeigen() - eine Zeile ohne Euro-Betrag kann von der Schublade nicht abweichen. */ .kauf-inline .bb-step[data-step="service"] .totalrow.rabattfeld{display:flex} /* RABATT-QUITTUNG UEBER DEM KASTEN (24.09.2026) - siehe rabattKopfZeigen() in konfigurator.js. Wer aus der Rabatt-Mail kommt, sieht sie beim Landen; die Schublade oeffnet sich nicht von selbst (Entscheid 15.09.2026), der Knopf fuehrt hin. Farben aus dem Rabattkasten der Seite. */ .rabatt-kopf{display:flex;align-items:center;justify-content:space-between;gap:10px 14px;flex-wrap:wrap; margin:0 0 14px;padding:10px 14px;background:var(--bernstein-tint);border:1px solid var(--bernstein); border-radius:var(--radius-s);font-size:13.5px;line-height:1.45;color:var(--ink)} .rabatt-kopf[hidden]{display:none} .rabatt-kopf-knopf{flex:0 0 auto;font-family:var(--font);font-weight:800;font-size:13px;cursor:pointer; background:var(--card);color:var(--ink);border:1.5px solid var(--ink);border-radius:999px;padding:6px 14px} .rabatt-kopf-knopf:hover{background:var(--ink);color:var(--card)} /* Auch die Preise IN den Service-Zeilen entfallen (Vorgabe 15.09.2026) - dieselbe Begruendung wie bei den Zubehoer-Zeilen: Was eine Position kostet, steht in der Warenkorb-Schublade, und die steht beim Auswaehlen ohnehin offen daneben. Zwei Stellen mit demselben Betrag muessen sonst staendig in Deckung gehalten werden. Im Dialog auf den anderen Seiten bleiben sie stehen; dort gibt es keine Schublade. */ .kauf-inline .bb-step[data-step="service"] .svc-row .buyline .price{display:none} .korb-leer{color:var(--muted);line-height:1.5} /* Nur auf ganz schmalen Schirmen bleibt die Seite stehen, solange die Schublade offen ist: Dort ist sie 100vw breit und deckt alles ab, dahinter waere nichts zu bedienen - die Seite wuerde unbemerkt darunter wegscrollen. UEBERALL SONST SCROLLT DIE SEITE WEITER (15.09.2026). Die Sperre galt bis dahin bis 1280px hinauf, und genau dazwischen liegt das uebliche Notebook-Fenster: Beim ersten Anhaken faehrt die Schublade auf, und ab da liess sich die Seite nicht mehr bewegen - man kam an die Positionen weiter unten im Konfigurator nicht heran, ohne die Schublade wieder zuzumachen. Die Schublade liegt fest im Fenster, sie scrollt ohnehin nicht mit. */ html.korb-offen{overflow:hidden} /* RUECKGAENGIG am 15.09.2026: Hier stand "html.korb-offen{overflow:visible}" ab 761px, damit man bei offener Schublade weiter auswaehlen und scrollen kann. Seit sie erst NACH den Services aufgeht und der Hintergrund dabei verdunkelt wird, ist das Gegenteil richtig: Was verdunkelt ist, soll nicht mehr bedient werden, und eine Seite, die hinter der Verdunkelung wegscrollt, wirkt wie ein Fehler. Die Schublade selbst scrollt innen (.korbdrawer-body). */ @media(max-width:768px){ .korbdrawer{width:100vw} .navkorb{width:38px;height:38px} } /* --- DER CHAT RUECKT NEBEN DIE SCHUBLADE (29.09.2026) ------------------------ Vorgabe Claras: "wenn bei der Desktop-Version der Warenkorb rechts aufpoppt, dann steht da der Chatbot direkt ueber dem Feld. Wenn der Warenkorb sich aufklappt, dann verschieb den Chatbot weiter nach links, sodass er links direkt neben dem Warenkorb steht." ERSTER ANLAUF GING DANEBEN und ist hier ersetzt: Er verschob #faq-king-fly-out, das Widget des App-Embeds "Trusted FAQ". Das steht zwar im Seitenkopf, rendert aber nirgends - sein Datenskript (#faq-king-bubble-data) ist auf jeder Seite leer, das App-Skript baut also gar kein Element. Verschoben wurde damit nichts. DER CHAT IST UNSER EIGENER: #helpFab, .help-fab, gebaut in konfigurator.js. Deshalb stand er in keiner abgerufenen Seite - er entsteht erst im Browser. Die Knopfreihe traegt "Hilfe" und, sobald der Chat bereitsteht, "Chat" mit dem Maskottchen. DIE FORM GIBT ES SCHON: html.bwp-split .help-fab rueckt ihn um die Breite der Seitenleiste nach links. Hier dasselbe mit der Breite der Schublade (min(420px,92vw), siehe .korbdrawer) plus den 18px, die .help-fab ohnehin vom Rand haelt. UND ER KOMMT NACH VORN, solange die Schublade offen ist. Sonst laege er hinter der Verdunkelung (84) und der Schublade (85) - neben der Schublade stuende dann ein abgedunkelter Knopf, der auf keinen Klick reagiert. Das widerspricht der Regel von 15.09.2026 nur scheinbar ("was verdunkelt ist, soll nicht mehr bedient werden"): Gemeint war die Auswahl dahinter, die man nicht versehentlich weiterklicken soll. Eine Frage zu stellen, waehrend man auf seinen Warenkorb schaut, ist genau der Moment, fuer den dieser Knopf da ist. NUR AB 761px. Auf dem Telefon nimmt die Schublade die volle Breite - dorthin verschoben waere der Knopf aus dem Bild. */ @media(min-width:769px){ html.korb-offen .help-fab{right:calc(min(420px, 92vw) + 18px);z-index:86} } /* AUF DEM TELEFON WEICHT DER CHAT GANZ (29.09.2026, Meldung Claras: "bei Mobile liegt der Chatbot noch ueber dem Pop-up-Warenkorb und auch ueber dem Pop-up-Nav-Menue - wenn eins von beiden geoeffnet wird, bitte den Chatbot dahinterlegen oder ausblenden"). WARUM ER UEBERHAUPT DARUEBER LIEGT, obwohl seine Zahl kleiner ist: Beide Schubladen stehen IM Abschnitt der Kopfleiste, und der ist position:sticky mit z-index:60 - also ein eigener Stapelkontext. Ihre 80 und 85 gelten nur INNERHALB davon; nach aussen ist der ganze Abschnitt eine Schicht auf Hoehe 60. Der Chat haengt daneben am body auf 68 und liegt damit ueber allem, was in der Kopfleiste steckt. Eine groessere Zahl an den Schubladen wuerde daran nichts aendern - sie kaeme nie aus ihrem Kontext heraus. DAHINTERLEGEN GEHT ALSO NICHT, ohne den Chat unter die ganze Kopfleiste zu schieben (unter 60), und dort waere er auch im Normalfall halb verdeckt. Deshalb das zweite, das Clara angeboten hat: ausblenden, solange eine der beiden Schubladen offen ist. Beide nehmen auf dem Telefon ohnehin die ganze Breite - daneben waere kein Platz. ZWEI GRENZEN, weil die beiden Schubladen verschieden weit reichen: Die Navigation klappt bis 860px als Schublade auf, der Warenkorb nimmt erst ab 760px die volle Breite. Darueber bleibt es beim Verschieben nach links (Regel oben). noscroll ist die Klasse der Navigations-Schublade (siehe bwpNavToggle), korb-offen die des Warenkorbs. */ @media(max-width:992px){ html.billigerwaermepumpe-noscroll .help-fab{display:none} } @media(max-width:768px){ html.korb-offen .help-fab{display:none} } /* --- SCHUBLADE UEBERDECKT DIE AUSWAHL NICHT MEHR (14.09.2026) --------------- Die Schublade liegt fest am rechten Rand, die Seite ist mittig gesetzt: Auf einem 1600px-Schirm verdeckte sie damit die rechten rund 280px des Inhalts - also genau den Kasten, in dem ausgewaehlt wird. Man haekelte etwas an und konnte das Ergebnis nur sehen, indem man die Schublade wieder schloss. Die Seite rueckt jetzt um die Breite der Schublade nach links, statt sich von ihr ueberdecken zu lassen. Vorbild ist die Split-Ansicht, die dasselbe seit Langem so loest (html.bwp-split, weiter oben). ERST AB 1280px. Darunter blieben nach dem Ruecken keine 860px mehr, und das zweispaltige Raster der Produktseite haengt an der FENSTER-Breite - es waere zweispaltig geblieben und haette sich in die Haelfte gequetscht. Schmaler bleibt es deshalb beim Ueberdecken, wie bisher. Das Scrollen haengt NICHT mehr an dieser Schwelle - es gilt ab 761px, siehe oben. Hier geht es nur noch um das Ruecken. */ /* Auch das Wegruecken der Seite ist am 15.09.2026 entfallen. Es sollte verhindern, dass die Schublade die Auswahl daneben verdeckt - beim gleichzeitigen Arbeiten war das richtig. Jetzt verdeckt sie absichtlich: Sie kommt am Ende, und der Hintergrund tritt zurueck. Seite ruecken UND verdunkeln zugleich saehe aus, als sei etwas kaputt. */ /* --- PRODUKTSEITE: BILDERGALERIE LINKS (14.09.2026) ------------------------- Bilder samt Beschreibung links, Titel und Preis rechts. Das Raster (.shop-product-grid) steht schon auf align-items:start - die rechte Spalte bleibt deshalb oben stehen, waehrend die linke beliebig lang werden darf. Die Spur ist ein Scroll-Bereich mit scroll-snap: Wischen geht ohne JavaScript, und faellt das Skript aus, bleibt die Galerie bedienbar. -------------------------------------------------------------------------- */ .shop-links{min-width:0} .shop-galerie{display:flex;flex-direction:column;gap:12px} .sg-buehne{position:relative} .sg-spur{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth; border:1px solid var(--line);border-radius:var(--radius);background:var(--card); box-shadow:var(--shadow-card);scrollbar-width:none} .sg-spur::-webkit-scrollbar{display:none} .sg-bild{flex:0 0 100%;scroll-snap-align:center;display:flex;align-items:center; justify-content:center;padding:22px} .sg-bild img{max-width:100%;height:auto;max-height:420px;object-fit:contain} .sg-pfeil{position:absolute;top:50%;transform:translateY(-50%);z-index:2; width:38px;height:38px;display:flex;align-items:center;justify-content:center; border:1px solid var(--line);border-radius:var(--radius-pill);background:var(--card); color:var(--ink);font-size:22px;line-height:1;cursor:pointer; transition:border-color .15s ease,background .15s ease} .sg-pfeil:hover{border-color:var(--bernstein-dark);background:var(--bernstein-tint)} .sg-prev{left:10px} .sg-next{right:10px} .sg-vorschau{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px} .sg-vorschau::-webkit-scrollbar{display:none} .sg-mini{flex:0 0 auto;width:62px;height:62px;padding:4px;cursor:pointer; border:1px solid var(--line);border-radius:var(--radius-s);background:var(--card); transition:border-color .15s ease} .sg-mini img{width:100%;height:100%;object-fit:contain;display:block} .sg-mini.ist-aktiv{border-color:var(--bernstein-dark);box-shadow:0 0 0 1px var(--bernstein-dark)} @media(max-width:768px){ .sg-bild{padding:14px} .sg-bild img{max-height:300px} .sg-pfeil{width:34px;height:34px;font-size:19px} .sg-mini{width:52px;height:52px} } /* Modellbezeichnung unter dem Produkttitel (14.09.2026), im Stil von .kd-model - dort stand sie vorher. Die Kategorie darueber ist Bernstein, der Titel schwarz; diese Zeile ordnet sich dazwischen ein, ohne mit beiden zu konkurrieren. */ /* Untertitel unter dem Produkttitel (24.09.2026): eine Stufe unter der Ueberschrift, eine ueber der Modellzeile. Er ordnet ein, wofuer die Leistungsklasse gedacht ist - deshalb Fliesstext und nicht die zurueckgenommene Modellzeile darunter. */ /* KEINE Lesebreite (24.09.2026, Vorgabe: "breiter, sodass es ueber den ganzen Kasten geht"): Die 46ch stammten aus der kurzen ersten Fassung, wo eine schmale Zeile ruhiger wirkte. Seit der Untertitel vier Saetze traegt, riss sie rechts eine weisse Flaeche auf. */ .shop-untertitel{margin:10px 0 0;font-size:15px;line-height:1.55;color:var(--graphit)} /* VIER MERKMALE UNTER DEM KIT-TITEL (02.10.2026, Vorgabe Claras mit einem Bildschirmfoto von klekks.de: "pack unter den Titel bei Kit-Produktseiten bitte sowas wie auf dem Bild, nur nicht uebereinander, sondern 4 nebeneinander" - kurz darauf: "lass den Hintergrundkasten weg und jeden Punkt in einer Zeile; wenn das nicht geht, mach nur zwei in eine Reihe und die anderen zwei darunter"). ES SIND ZWEI MAL ZWEI GEWORDEN, und zwar genau aus dem Grund, den Clara selbst genannt hat: Der laengste Satz hat 45 Zeichen und braucht bei 13px rund 290px. Vier davon nebeneinander waeren ueber 1.200px - die Textspalte der Produktseite ist nicht einmal halb so breit, weil rechts daneben die Kaufbox steht. In einer Zeile je Punkt geht also nur zweispaltig. DER KASTEN IST WEG: kein Hintergrund, kein Rahmen, keine Polsterung. Die Merkmale stehen jetzt als vier Zeilen unter dem Untertitel, nicht als Block daneben. white-space:nowrap WAERE DER FALSCHE WEG gewesen: Er haelt die Zeile zwar zusammen, laesst sie aber aus der Spalte laufen, sobald jemand einen laengeren Satz eintraegt - und die Saetze sind im Editor aenderbar. So bricht ein zu langer Satz um, statt die Seite zu sprengen; das ist der Fehler, den man sieht, statt des Fehlers, den man sucht. UNTER 576px EINE SPALTE: Dort reicht es auch fuer zwei nicht mehr. */ .kitmerkmale{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 22px;margin:16px 0 0;padding:0} .kitmerkmale li{display:flex;align-items:flex-start;gap:9px;min-width:0; font-size:13px;line-height:1.35;color:var(--ink)} .kitmerkmal-ic{flex:0 0 auto;width:20px;height:20px;color:var(--gruen);margin-top:1px} @media(max-width:576px){ .kitmerkmale{grid-template-columns:1fr;gap:9px} } .shop-untertitel + .shop-modell{margin-top:8px} .shop-modell{margin-top:6px;font-size:14px;color:var(--graphit)} /* Der Bildkasten des Detailtextes entfaellt auf der Produktseite: Er wiederholte Titel und Bild, beides steht oben und in der Galerie bereits. Nur hier ausgeblendet - im Zubehoer-Reiter traegt dieselbe Klasse weiterhin die Detailansicht. */ .shop-desc .kd-plate{display:none} /* Und der "ab 6.399 €"-Abbinder am Ende desselben Blocks (Vorgabe 15.09.2026). Er stammt aus der Kit-Uebersicht, wo er das einzige Preisschild ist. Auf der Produktseite steht der Preis gross in der Karte rechts - unten links kam er ein zweites Mal, kleiner, mit "ab" davor und damit auch noch unverbindlicher als der echte. Zwei Preise auf einer Seite, von denen einer vage ist, sind schlimmer als einer. */ .shop-desc .kc-price{display:none} /* --- KONFIGURATOR ALS KASTEN AUF DER PRODUKTSEITE (14.09.2026) -------------- Dieselbe Markup-Struktur wie der Direktkauf-Dialog, damit die vorhandene Logik unveraendert greift - die Klasse nimmt ihr nur das Dialoghafte: feste Lage, Verdunklung, volle Bildschirmhoehe, eigene Scroll-Flaeche. -------------------------------------------------------------------------- */ .modalback.kauf-inline{position:static;inset:auto;background:none;z-index:auto; display:block;padding:0;margin-top:22px} .modalback.voll.kauf-inline .modalcard{height:auto;max-height:none;overflow:visible; border-radius:var(--radius);border:1px solid var(--line);box-shadow:var(--shadow-card); animation:none;padding:0} /* Der Kaufkopf traegt Tabs und Zurueck/Weiter des Dialogs. Im Kasten fuehrt die Seite selbst, nicht ein Schrittzaehler - er bleibt ausgeblendet wie im Bestand (.kaufkopf steht ohnehin auf display:none). */ /* Der Dialog laesst seinen Koerper scrollen - er fuellt ja den ganzen Bildschirm. Im Kasten ist das falsch: Dort soll sich die SEITE bewegen (Vorgabe 15.09.2026). Ein eigener Scrollbereich faengt sonst das Mausrad ab, sobald der Zeiger ueber dem Kasten steht, und die Seite bleibt stehen, obwohl man sie gemeint hat. */ .modalback.voll.kauf-inline #cartModalBody{overflow:visible;overscroll-behavior:auto;flex:0 0 auto} /* SEITLICH KEIN ABSTAND MEHR (21.09.2026): Er gehoerte zum eigenen Kasten. Ohne ihn stuende der Konfigurator eingerueckt in einer Karte, die schon 32px Rand hat - Titel, Preis und Auswahl haetten drei verschiedene Kanten. MIT .modalback.voll DAVOR, sonst greift gar nichts. Die Regel stand hier als ".kauf-inline #cartModalBody" und war damit WIRKUNGSLOS: Weiter oben setzt ".modalback.voll #cartModalBody" die Abstaende des Vollbild-Dialogs (26px 30px 56px), und das ist eine Klasse mehr. Sichtbar waren also immer die Dialogwerte, nie die hier gemeinten - auffaellig war es nicht, weil beide in derselben Groessenordnung liegen. Dieselbe Falle wie beim Kaufkopf und bei der Schrittnavigation ein paar Zeilen weiter; dort ist sie schon zweimal dokumentiert. */ .modalback.voll.kauf-inline #cartModalBody{padding:20px 0 24px} @media(max-width:768px){ .modalback.voll.kauf-inline #cartModalBody{padding:16px 0 20px} .modalback.kauf-inline{margin-top:18px} } /* --- EIGENE SCROLLFLAECHE IM KASTEN (14.09.2026) ---------------------------- Wunsch: im Kasten blaettern, ohne die Seite zu bewegen - damit die Bilder links stehen bleiben. Der Kasten bekommt dafuer eine Hoehengrenze und scrollt innen: Kopfleiste ("1 Hardware / 2 Services" samt Zurueck und Weiter) bleibt oben stehen, nur die Auswahl darunter laeuft durch. Die Schrittsteuerung ist damit immer erreichbar, auch am Ende einer langen Liste - vorher musste man dafuer zurueckscrollen. position:sticky haelt den Kasten im Blick, waehrend links die Beschreibung weiterlaeuft. Die rechte Spalte wird dafuer auf die volle Hoehe der Zeile gezogen (align-self:stretch); ohne das reicht ihre Eigenhoehe nur fuer wenige Pixel Weg, und das Ankleben waere kaum zu bemerken. NUR AB 821px, also genau dort, wo das Raster zweispaltig ist. Einspaltig liegen die Bilder ueber dem Kasten - dann gibt es nichts, was stehen bleiben koennte, und eine Scrollflaeche in der Scrollflaeche waere auf dem Telefon nur schwer zu treffen. -------------------------------------------------------------------------- */ /* HOEHENGRENZE WIEDER ENTFERNT (14.09.2026, zweite Runde). Hier stand eine eigene Scrollflaeche im Kasten: feste Hoehe, innen blaettern, die Bilder links bleiben stehen. Der Betreiber will es andersherum - der Konfigurator laeuft auf volle Laenge, und beim Scrollen fuehrt die obere Leiste mit, die ohnehin klebt: dort stehen der Warenkorb und jetzt auch das Produkt, das gerade konfiguriert wird (siehe .tb-produkt). Das ist die ruhigere Loesung: Zwei geschachtelte Scrollflaechen sind mit dem Rad kaum zu trennen - man scrollt die Seite, obwohl man die Liste meinte, oder umgekehrt. Die mitlaufende Leiste erreicht dasselbe Ziel (immer sehen, woran man ist) ohne diese Zweideutigkeit. */ /* --- PRODUKTSEITE GROESSER, RECHTS EIN KASTEN (14.09.2026) ------------------ Vorlage ist die vom Betreiber geschickte Seite: breiteres Raster, groessere Bilder, groesserer Titel und Preis - und alles, was rechts steht, in EINER weissen Karte statt frei auf dem Papierton. Es kommt nichts inhaltlich dazu, es ist dieselbe Seite in groesserem Massstab. Der Rahmen liegt auf .shop-info und nicht um jeden Teil einzeln: Titel, Modell, Preis und Konfigurator gehoeren zusammen, und eine Karte je Teil waere genau die Zersplitterung, die der Kasten aufloest. -------------------------------------------------------------------------- */ /* Eigene Klasse statt ".shoppage .wrap": Dieselbe Section-Klasse tragen auch die Blog-Uebersicht und mehrere Rechtsseiten - die sollen schmal bleiben. */ .shop-wrap{max-width:1320px} .shoppage .shop-product-grid{gap:52px} .shop-info{background:var(--card);border:1px solid var(--line); border-radius:var(--radius);box-shadow:var(--shadow);padding:30px 32px} /* Empfehlungs-Abzeichen ueber der Kategorie - gleiche Farbe und Form wie im Kit-Vergleich (.cc-badge), nur im Fluss statt ueber der Kartenkante. Es ist dieselbe Aussage, sie soll auch gleich aussehen. [hidden] braucht eine eigene Regel: inline-flex schlaegt es sonst. */ /* Sitzt auf der Kante der Karte - halb darauf, halb auf dem Untergrund, wie im Kit-Vergleich (.cc-badge). OHNE EIGENEN RAHMEN seit dem 17.09.2026 (Vorgabe: "von der kleinen Box die Raender abgehen"). Er war in Papierton gehalten und trennte das Abzeichen vom Kartenrand - eine Loesung fuer eine Karte, die selbst nur eine duenne graue Linie trug. Jetzt traegt die ganze Karte die Empfehlung (.ist-empfohlen), und ein zweiter Rahmen mitten darin zerschnitte sie. Genau wie .cc-badge im Kit-Vergleich, das auch keinen hat. top von -13px auf -11px: Die zwei Pixel waren der Rahmen. */ .shop-info{position:relative} .shop-empfehlung{position:absolute;top:-11px;left:50%;transform:translateX(-50%); display:inline-flex;align-items:center;background:var(--gruen);color:#fff; font-family:var(--mono);font-size:10.5px;font-weight:700;padding:4px 12px; border-radius:var(--radius-pill);white-space:nowrap;z-index:1} .shop-empfehlung[hidden]{display:none} /* DIE GANZE KARTE TRAEGT DIE EMPFEHLUNG (Vorgabe 17.09.2026). Nicht mehr nur die Pille oben, sondern der Kasten mit Titel, Modell, Preis und Konfigurator - also alles, was zu diesem Kit gehoert. Dieselben zwei Zeilen wie .candcard.rec im Kit-Vergleich: Rand in Walnuss plus ein 3px-Ring im Tonwert daneben. Eine Empfehlung, zwei Orte, ein Aussehen. Der Ring steht VOR var(--shadow) in der Liste - so liegt er direkt am Rand, und der vorhandene Kartenschatten bleibt darunter erhalten, statt von der neuen Regel ueberschrieben zu werden. Gesetzt wird die Klasse in konfigurator.js, an derselben Stelle, an der das Abzeichen sichtbar wird - eine Entscheidung, nicht zwei. */ .shop-info.ist-empfohlen{border-color:var(--gruen); box-shadow:0 0 0 3px var(--gruen-tint), var(--shadow)} .shoppage .shop-info .art-kat{font-size:12.5px;display:block} /* Titel und Preis eine Stufe kleiner (Vorgabe 14.09.2026): Sie waren nach dem Hochskalieren die beiden groessten Bloecke der Karte und schoben die Auswahl nach unten. Sie bleiben deutlich groesser als vorher, nehmen aber nicht mehr den halben Kasten ein - jede eingesparte Zeile hier hebt den Konfigurator. */ .shoppage .shop-info .art-title{font-size:clamp(23px,2vw,28px);margin-top:10px} .shoppage .shop-modell{font-size:15px;margin-top:5px} .shoppage .shop-price{font-size:clamp(24px,2.2vw,29px);margin-top:14px} /* Der Zusatz aus dem Konfigurator: knapp halb so gross wie der Kitpreis und in Bernstein - klein genug, dass die Hauptzahl die Hauptzahl bleibt, kraeftig genug, dass man ihn nicht uebersieht. Ausgerichtet an der Grundlinie, sonst haengt er an der Oberkante der grossen Ziffern. [hidden] braucht die eigene Regel, inline-block schlaegt es sonst. */ .shop-price-plus{display:inline-block;margin-left:10px;font-size:.52em; font-weight:700;color:var(--bernstein-dark);vertical-align:baseline;white-space:nowrap} .shop-price-plus[hidden]{display:none} .shoppage .shop-info .modalback.kauf-inline{margin-top:16px} .shoppage .shop-backlink{font-size:15px;margin-top:18px} /* Bilder mit: eine breitere Spalte mit gleich grossen Bildern waere nur mehr Weissraum um dasselbe Motiv. */ /* DIE VORSCHAU MUSS MIT INS BILD (12.10.2026, Vorgabe Claras: "den Kasten mit Bildern bitte kleiner machen, sodass man auch die Anzeige mit allen Bildern sieht"). Die Buehne stand auf 560 px Bildhoehe plus zweimal 28 px Rand; mit Abstand und Vorschau-Reihe kam die Galerie auf rund 704 px. Zusammen mit der festen Kopfleiste und dem Zurueck-Verweis darueber lag die Reihe der Miniaturen damit unterhalb der Sichtkante - man sah das grosse Bild und ahnte nicht, dass es vier weitere gibt. min(460px, 52svh) STATT EINER FESTEN ZAHL: Eine feste Hoehe ist immer fuer genau ein Fenster richtig. Auf einem flachen Notebook-Schirm blieben 460 px wieder zu viel, auf einem hohen Monitor waere eine kleine Zahl verschenkte Flaeche. Der svh-Anteil greift also nur dort, wo es eng wird - unterhalb von rund 885 px Fensterhoehe. Die Miniaturen bleiben bei 74 px: Sie sind das, was sichtbar werden soll; sie zu verkleinern waere das Gegenteil der Vorgabe. */ .shoppage .sg-bild img{max-height:min(460px,52svh)} .shoppage .sg-bild{padding:22px} .shoppage .sg-mini{width:74px;height:74px} .shoppage .shop-desc{font-size:15.5px} /* GAR KEIN EIGENER KASTEN MEHR (Vorgabe 21.09.2026: "den ganzen Konfigurationskasten nicht in einem eigenen Kasten haben, sondern direkt in den weissen Hintergrundkasten"). Am 14.09.2026 war der Schatten gefallen und der Grund auf Papierton gesetzt, damit aus zwei Karten nebeneinander eine Karte mit Abschnitt wird. Der Abschnitt blieb aber ein sichtbares Rechteck: eigener Grundton UND eigener Rahmen. Beides faellt jetzt weg. transparent statt var(--card): Der Konfigurator soll den Grund der Karte annehmen, nicht zufaellig denselben Wert tragen - aendert jemand die Karte, zieht er mit. Der Rahmen kommt aus .modalback.voll.kauf-inline .modalcard weiter oben und muss hier ausdruecklich zurueckgenommen werden; ohne border:0 bliebe die Linie stehen und der Kasten waere weiterhin einer, nur ohne Fuellung. */ .shop-info .modalback.voll.kauf-inline .modalcard{background:transparent;box-shadow:none;border:0} @media(max-width:992px){ .shop-info{padding:22px 18px} .shoppage .sg-bild img{max-height:340px} } /* Der Dialog-Kopf bleibt im Markup (konfigurator.js sucht seine IDs), aber im Kasten ist er falsch: Titel und Schrittreiter "1 Hardware / 2 Service" gehoeren zu einem Dialog, der die ganze Seite einnimmt. Die Regel weiter oben (".modalback.voll .kaufkopf{display:block}") holt ihn sonst zurueck - deshalb hier mit derselben Spezifitaet plus der eigenen Klasse. Ebenso der "Zurueck"-Knopf im Koerper: Er fuehrt zur Kit-AUSWAHL, und auf der Seite eines bestimmten Kits ist das der falsche Weg. */ /* Die Schrittsteuerung BLEIBT sichtbar (Vorgabe 14.09.2026): "1 Hardware / 2 Services" samt Zurueck und Weiter fuehren auch im Kasten durch die beiden Schritte. Nur der Dialogtitel entfaellt - die Ueberschrift darueber sagt dasselbe. Und die Kopfzeile klebt nicht mehr am oberen Rand: In einem Kasten waere das Kleben sinnlos, weil er mit der Seite scrollt. */ /* Papierton statt Weiss (Vorgabe 15.09.2026). Der Kopf erbte das Weiss vom Dialog, wo er sich als klebende Leiste vom scrollenden Inhalt abheben muss. Im Kasten scrollt nichts unter ihm durch - dort war das Weiss nur ein zweiter Farbton in einem Kasten, der ohnehin schon einen hat. Die Trennlinie bleibt, sie leistet die Abgrenzung jetzt allein. MIT .modalback.voll davor: ".modalback.voll .kaufkopf" setzt das Weiss und haette mit drei Klassen gegen zwei gewonnen. */ .modalback.voll.kauf-inline .kaufkopf{position:static;background:transparent; border-radius:0} .kauf-inline .kaufkopf-titel{display:none} .kauf-inline .kaufkopf-innen{padding:12px 0;max-width:none} .kauf-inline #cmBack{display:none} /* Sitzt jetzt IN der Schrittleiste, in derselben Zeile wie "1 Hardware" und "2 Services" (Vorgabe 14.09.2026). Der Kopf darf umbrechen: Ueberschrift und beide Reiter passen im schmalen Kasten nebeneinander, Zurueck und Weiter rutschen bei Bedarf in eine zweite Zeile - besser als ein Kopf, der seine Beschriftungen abschneidet. */ .kauf-inline-titel{font-weight:800;font-size:13.5px;letter-spacing:-.01em;flex:0 0 auto;white-space:nowrap} .kauf-inline .kaufkopf-innen{flex-wrap:wrap;gap:7px;padding:10px 0} /* Nur die Reiter tragen den Abstandhalter nach links. Haetten Reiter UND Schrittknoepfe je einen, teilten sie sich den freien Platz und die Ueberschrift staende mittig zwischen zwei Luecken statt am linken Rand. */ /* Zurueck und Weiter entfallen im Kasten (Vorgabe 15.09.2026). Die beiden Reiter "Zubehör" und "Services" fuehren durch dieselben zwei Schritte und sagen dabei auch, wo man steht - zwei Bedienwege fuer eine Bewegung brauchen wir nicht. Das Markup bleibt, konfigurator.js sucht die Kennungen. MIT .modalback.voll DAVOR, sonst greift es nicht: Weiter oben steht ".modalback.voll .kaufnav{display:flex}" - drei Klassen gegen meine zwei, und die staerkere Regel gewinnt unabhaengig davon, welche spaeter steht. Genau dieselbe Falle wie beim Kit-Kopf (dort war es ein style-Attribut) und bei der Rasterspalte der Auswahlzeilen (dort eine Kennung). */ .modalback.voll.kauf-inline .kaufnav{display:none} /* An ihre Stelle treten zwei kleine Pfeile (15.09.2026): dieselbe Bewegung wie die Reiter, ohne Beschriftung, die daneben ein zweites Mal dasselbe sagt. Den Abstandhalter nach links tragen weiterhin die Reiter (.kauftabs, margin-left:auto); die Pfeile haengen sich rechts an sie an. Abgeblendet statt ausgeblendet, sonst springt der verbliebene Pfeil beim Schrittwechsel an die Stelle des anderen - und man klickt daneben. */ .kauf-pfeile{display:flex;gap:4px;flex:0 0 auto} .kauf-pfeile[hidden]{display:none} .kauf-pfeil{appearance:none;width:28px;height:28px;display:inline-flex;align-items:center; justify-content:center;border:1.5px solid var(--line);border-radius:var(--radius-pill); background:var(--card);color:var(--graphit);font:inherit;font-size:17px;line-height:1; cursor:pointer;transition:border-color .16s,color .16s,background .16s} .kauf-pfeil:hover:not(:disabled){border-color:var(--bernstein-dark);color:var(--ink);background:var(--bernstein-tint)} .kauf-pfeil:disabled{opacity:.35;cursor:default} .kauf-pfeil:focus-visible{outline:2px solid var(--bernstein);outline-offset:2px} /* Kleiner als im Dialog: Dort steht die Kopfzeile ueber der ganzen Seite, hier in einer Spalte. Ueberschrift, beide Reiter und Zurueck/Weiter passen so in EINE Zeile (Vorgabe 14.09.2026) - in derselben Groesse waeren es rund 120px zu viel. Das flex-wrap darueber bleibt als Notausgang: Wird das Fenster so schmal, dass es doch nicht reicht, bricht die Zeile um, statt die Beschriftungen zu zerdruecken. */ .kauf-inline .kauftab, .kauf-inline .kaufpill{font-size:11.5px;padding:5px 10px;border-width:1.5px} .kauf-inline .kauftabs{gap:5px} .kauf-inline .kaufnav{gap:5px} /* Im Dialog beantwortet der Kopf die Frage "worum geht es hier eigentlich" - Bild, Name, Modell, Schrittzaehler und Zwischensumme. Auf der Produktseite steht all das schon unmittelbar darueber: Titel, Modellbezeichnung, Preis und die Galerie. Zweimal dasselbe auf 20 cm Hoehe liest sich wie ein Fehler (Vorgabe 14.09.2026, mit Screenshot). Die Zwischensumme faellt damit auch weg; sie steht in der Warenkorb-Schublade oben rechts, die sich beim ersten Anhaken ohnehin oeffnet. Der versteckte "Hardware"-Knopf darin wird nicht gebraucht: Zurueck und Weiter stehen in der Schrittleiste des Kastens. */ /* Die Gestaltung stand als style-Attribut direkt am Element - und ein Inline-Stil schlaegt jede Klassenregel. Mein display:none lief deshalb ins Leere, waehrend die Zwischensumme daneben (die kein display inline trug) korrekt verschwand. Statt das mit !important zu erzwingen, steht die Gestaltung jetzt hier: So kann sie ueberschrieben werden, ohne dass jemand raten muss, warum es nicht greift. */ .cm-kitkopf{display:flex;align-items:center;gap:16px;margin-top:10px} .kauf-inline .cm-kitkopf, .kauf-inline .bb-minisum, /* "Was drin ist" faellt im Kasten ebenfalls weg (Wunsch 14.09.2026): Die Schublade oben rechts steht waehrend der Auswahl offen daneben und zeigt dasselbe laufend mit. Zwei Listen nebeneinander, die beide beanspruchen, den Umfang zu zeigen, laden zum Vergleichen ein - und die hier lief nur beim Warmwasserspeicher mit. Im Kauf-Dialog auf den anderen Seiten bleibt sie, dort ist sie die einzige Uebersicht. */ .kauf-inline .cm-lu{display:none} /* "Baust du etwas zusätzlich selbst? Zählt zur Förderung" entfaellt im Kasten (Vorgabe 15.09.2026). Ausgeblendet statt aus dem Markup entfernt: cmUpdateTotal liest #cmEigenList fuer die Foerderbasis, und ohne das Feld faellt die Eigenleistung stillschweigend aus der Rechnung. Im Dialog auf den anderen Seiten bleibt der Block sichtbar. */ .kauf-inline #cmEigenBlock{display:none} /* --- AUSWAHLZEILEN IM SCHMALEN KASTEN (14.09.2026) -------------------------- Das Raster der Hardware-Zeilen hat feste Spalten: minmax(0,1fr) auto 128px 96px 26px + 4x14px Abstand Fest sind davon rund 306px plus die Breite der Pille. Bei "950 EUR je Wanddurchfuehrung" sind das zusammen mehr, als der Kasten in der rechten Spalte der Produktseite hergibt - die erste Spalte fiel auf null und overflow-wrap:anywhere brach den Paketnamen BUCHSTABENWEISE um. Genau das zeigte der Screenshot. Fuer schmale Geraete gibt es diese Loesung laengst: Das Raster bricht auf mehrere Zeilen um. Sie hing nur an einem @media, also an der Breite des FENSTERS - und das ist hier weit, waehrend der Kasten schmal ist. Deshalb gilt sie im Kasten unabhaengig vom Fenster. Er ist bauartbedingt schmal: eine Spalte eines zweispaltigen Rasters. Eine Containerabfrage waere genauer, faellt in aelteren Browsern aber auf das kaputte Raster zurueck - und eine Zeile, die man nicht lesen kann, ist schlimmer als eine, die frueher umbricht als noetig. Der Umbruch auf VIER Ebenen (Name, Pille, Regler, Preis) geriet dann zu hoch - die Liste war kaum noch als Liste zu lesen (Rueckmeldung 14.09.2026). Jetzt sind es hoechstens zwei: oben Name, laufender Preis und ⓘ, darunter Pille und Mengenregler nebeneinander. Die Pille darf dabei schrumpfen und innen umbrechen; ihre zwei Textzeilen passen in die Hoehe des Reglers, kosten also keine zusaetzliche Hoehe. -------------------------------------------------------------------------- */ /* Ohne den ⓘ-Knopf (entfernt 14.09.2026) braucht seine Spalte keinen Platz mehr. Die Regel fuer den Kasten steht MIT #cartModalBody davor: Eine Kennung schlaegt jede Klassenregel, die Zeile darueber haette den Kasten sonst mit vier Spalten ueberschrieben. */ /* SECHSTE SPALTE FUER DEN PFEIL ZUR PAKETSEITE (30.09.2026, Meldung Claras: "in der Konfiguration bei Desktop bitte alles moeglichst in einer Zeile pro Produktpaket"). Dieselbe Ursache wie oben: Ein Element ohne Spalte legt eine neue ZEILE an. */ #cartModalBody .buyline.xrow{grid-template-columns:minmax(0,1fr) auto 128px 96px 26px 26px} /* EINZEILIG (Vorgabe 15.09.2026): Name links, Mengenregler rechts DANEBEN, auf derselben Hoehe - nicht mehr darunter. Moeglich wurde das, weil der Zeilenpreis hier entfaellt: Was eine Position kostet, steht in der Warenkorb-Schublade, die beim ersten Anhaken ohnehin aufgeht. Zwei Stellen, die denselben Betrag zeigen, muessen sonst dauernd miteinander in Deckung gehalten werden - und die Zeile brauchte dafuer eine zweite Ebene. */ /* SPALTEN: Name, Preis, Regler (Vorgabe 18.09.2026). Vorher lagen Regler und Preis beide rechts, der Regler VOR dem Preis - bei den Mengen-Positionen schob er sich damit zwischen Titel und Betrag, und der Preis stand weit weg von dem, worauf er sich bezieht ("wenn man bei der Erdleitung den Stueckregler betaetigt, ist der Preis nicht mehr direkt hinter dem Titel"). Seit dem 18.09.2026 (Nachtrag) stehen sie in dieser Reihenfolge: Name, REGLER, Preis. Zuerst war es Name, Preis, Regler - Clara hat sie getauscht. Der Regler gehoert damit zum Titel wie eine Angabe zu ihm ("Erdleitung, 2 m"), und der Betrag steht am rechten Rand, wo Betraege in diesem Kasten immer stehen. Die DRITTE Spalte traegt das 1fr. Dadurch rueckt der Regler dicht an den Namen, und der Preis wird an die rechte Kante gedrueckt. Bei Zeilen ohne Regler faellt die zweite Spalte weg (.xr-step:empty), der Preis bleibt rechts: eine Regel fuer beide Sorten. */ /* VIERTE SPALTE SEIT DEM 30.09.2026: der Pfeil zur Paketseite, der die Zeile rechts abschliesst. Ohne eigene Spalte legte er eine zweite ZEILE an - Claras Meldung "in der Konfiguration bei Desktop bitte alles moeglichst in einer Zeile pro Produktpaket". Die ersten drei bleiben, wie sie waren; das 1fr auf der dritten drueckt den Preis weiter an die rechte Kante, jetzt eben an den Pfeil. */ .kauf-inline #cartModalBody .buyline.xrow{grid-template-columns:minmax(0,auto) auto minmax(0,1fr) 26px} .kauf-inline .buyline.xrow{row-gap:0;column-gap:12px;align-items:center} .kauf-inline .buyline.xrow .xr-check{grid-column:1;grid-row:1} .kauf-inline .buyline.xrow .xr-step{grid-column:2;grid-row:1;justify-self:start;align-self:center} /* PREIS WIEDER DA (Vorgabe 16.09.2026), aber erst wenn die Position gewaehlt ist: zeilenPreis() liefert ohne Haken eine leere Zeichenkette, die Mengen-Zeilen zeigen ihn ab Menge 1. Es braucht also keine eigene Bedingung - nur die Spalte darf sich nicht bemerkbar machen, solange nichts drinsteht. */ .kauf-inline .buyline.xrow .xr-price{grid-column:3;grid-row:1;justify-self:end; align-self:center;white-space:nowrap} .kauf-inline .buyline.xrow .xr-price:empty{display:none} /* DER STUECKPREIS STEHT HIER NEBEN DER SUMME, NICHT DARUEBER (13.10.2026, Meldung Claras mit Bildschirmfoto dieses Kastens: "da ist, wo das stehen soll, und es steht da nicht - also zwischen dem Stueck und dem Preis. Wenn man die Stueckzahl hoeher macht, veraendert sich der Gesamtpreis und man sieht den Stueckpreis nicht mehr; der soll dann davor aufpoppen und auch immer gleich bleiben"). DER UNTERSCHIED ZUM KASTEN IM DIALOG liegt im Raster, nicht im Markup. Dort ist die Preisspalte 96px schmal - ein zweiter Text daneben haette keinen Platz, deshalb steht er darueber. HIER ist die Preisspalte 1fr: Zwischen Regler und Betrag liegt die ganze Restbreite der Zeile, und genau in diese Luecke zeigt Claras Bild. Nebeneinander bleibt die Zeile ausserdem einzeilig - "in der Konfiguration bei Desktop bitte alles moeglichst in einer Zeile pro Produktpaket" (30.09.2026) gilt unveraendert. RECHTSBUENDIG BLEIBT RECHTSBUENDIG: Beide stehen in derselben Zelle, die Zelle haengt am rechten Rand. Der Betrag sitzt also weiter an derselben Kante wie in den Zeilen ohne Regler; der Stueckpreis waechst nach links in die Luecke hinein. */ .kauf-inline .buyline.xrow .xr-einzel{display:inline;margin:0 10px 0 0; font-size:12.5px;color:var(--graphit)} .kauf-inline .buyline.xrow .xr-tag, .kauf-inline .buyline.xrow .xr-info{display:none} /* Der Pfeil bleibt sichtbar und schliesst die Zeile ab - im Kauf-Kasten ist er der EINZIGE Weg zu den Paketinhalten, weil das ⓘ hier ausgeblendet ist. */ .kauf-inline .buyline.xrow .xr-seite{grid-column:4;grid-row:1;justify-self:end;align-self:center} /* Leere Huellen erzeugen sonst eine zweite Ebene samt Abstand, obwohl nichts darin steht: Ja/Nein-Zeilen ohne Hinweis liefern und einen leeren mit, weil das breite Raster feste Spalten braucht. Ausgeblendet belegen sie keine Rasterzeile mehr - solche Positionen stehen damit wieder einzeilig. */ .kauf-inline .buyline.xrow .xr-tag:empty, .kauf-inline .buyline.xrow .xr-step:empty{display:none} /* AUF DEM TELEFON BRICHT DIE ZEILE UM (14.10.2026, Meldung Claras mit Bildschirmfoto: "in der mobilen Version ist bei dem Konfigurator bitte schauen, dass sich keine Texte, Preise oder Stueckzahlen ueberschneiden, das ist naemlich im Moment der Fall"). WAS PASSIERT IST: Das Raster oben haelt Name, Regler, Preis und Pfeil in EINER Rasterzeile - genau so, wie es fuer den Desktop gefordert war ("alles moeglichst in einer Zeile pro Produktpaket", 30.09.2026). Auf 375 px Breite reicht das nicht: Der Name bricht auf vier Zeilen um, Regler und Preis behalten ihre Breite, und beide laufen uebereinander. Im Bildschirmfoto steht "1.390 €" mitten im Mengenregler. DIE DESKTOP-REGEL BLEIBT UNANGETASTET (Vorgabe Claras im selben Satz: "wenn du fuer die mobile Version etwas aenderst, veraendere das nicht auf der Website"). Alles hier steht in einem Medienblock und gilt nur bis 640 px. DER BETRAG BLEIBT IN DER ERSTEN ZEILE, rechts neben dem Namen - dort steht er in diesem Kasten immer, und eine Position ohne Regler sieht damit aus wie bisher. Nur der Regler wandert darunter und bekommt die ganze Breite. */ @media(max-width:640px){ /* ZWEI ZEILEN, UND ZWAR SO (Praezisierung Claras: "mach das bei mobile bitte so, dass der Titel des Paketes da steht, dann kommt der Verlinkungspfeil zur Produktpaketseite - aber dort noch kein Preis oder Stueckzahl, das erst in einer Zeile darunter. Dadurch den Paketnamen auch in die Breite strecken"). Oben also nur Name und Pfeil, unten Regler und Betrag. Der Name bekommt damit die ganze Breite und bricht viel seltener um - im Bildschirmfoto stand "Ungemischte Pumpengruppe" auf vier Zeilen, weil rechts daneben Regler und Preis Platz beanspruchten. DIE ZWEITE SPALTE IST auto UND NICHT 22px: Sie traegt oben den Pfeil und unten den Betrag und richtet sich nach dem breiteren von beiden - so stehen Pfeil und Betrag auf derselben rechten Kante, und der Name bekommt genau den Rest. */ .kauf-inline #cartModalBody .buyline.xrow{ grid-template-columns:minmax(0,1fr) auto;column-gap:10px;row-gap:7px} .kauf-inline .buyline.xrow .xr-check{grid-column:1;grid-row:1;align-self:center} .kauf-inline .buyline.xrow .xr-seite{grid-column:2;grid-row:1;align-self:center} .kauf-inline .buyline.xrow .xr-step{grid-column:1;grid-row:2;justify-self:start} /* DER BETRAG SPANNT UEBER BEIDE SPALTEN (14.10.2026, Vorgabe Claras: "wenn der Preis erscheint, soll der Paketprodukttitel immer noch so breit sein"). Vorher stand er in Spalte 2 - und weil die auto ist, wuchs sie auf die Breite des Betrags mit. Ein Paket mit "1.299,00 €" in Zeile 2 hatte damit oben einen deutlich schmaleren Namen als eins mit "99,00 €", obwohl in Zeile 1 nur der Pfeil steht. SPANNT ER UEBER BEIDE SPALTEN, zaehlt er bei der Breite von Spalte 2 nicht mehr mit: Ein Element, das eine flexible Spalte (1fr) mitueberdeckt, traegt nichts zur Eigenbreite der starren bei - die Spalte misst dann nur noch den Pfeil, und der Name bekommt den Rest. justify-self:end haelt ihn trotzdem an der rechten Kante, buendig unter dem Pfeil. Der Mengenregler bleibt links in derselben Zeile; beide koennen sich nicht in die Quere kommen, weil der eine links und der andere rechts ausgerichtet ist. */ .kauf-inline .buyline.xrow .xr-price{grid-column:1/-1;grid-row:2;justify-self:end;align-self:center} /* Der Stueckpreis stand auf dem Desktop neben dem Betrag in derselben Zelle. Auf dem Telefon ist diese Zelle nur so breit wie der Betrag - dort gehoert er unter ihn. */ .kauf-inline .buyline.xrow .xr-einzel{display:block;margin:0;text-align:right;font-size:11.5px} } /* Weniger Luft zwischen den Positionen: die Zeilen tragen ihre Struktur jetzt in sich, der Abstand von aussen darf entsprechend kleiner ausfallen. */ .kauf-inline .svc-row{padding:4px 0} /* --- MENGENREGLER OHNE KASTEN (Vorgabe 15.09.2026) -------------------------- Im Kasten kein umrandetes, weisses Feld mehr, sondern nur noch Minus, Zahl und Plus. Der Rahmen stammt aus dem Vollbild-Dialog, wo der Regler allein auf weiter Flaeche steht und eine Kante braucht, um als Bedienelement erkennbar zu sein. Hier steht er direkt neben dem Namen, in einer Zeile mit Ankreuzfeld - da genuegen die beiden Zeichen. Die Trefferflaeche bleibt so gross wie vorher: Die Knoepfe behalten ihre 34px, sie zeigen nur keinen Hintergrund mehr. Ein kleineres Ziel waere auf dem Telefon schlechter zu treffen, und nichts an der Vorgabe verlangt das. */ .kauf-inline .qtystep{border:none;background:none;border-radius:0;overflow:visible} .kauf-inline .qtystep button{width:28px;height:34px;color:var(--gruen);font-size:17px} .kauf-inline .qtystep button:hover{background:none;color:var(--ink)} .kauf-inline .qtystep .qv{min-width:0;padding:0 6px;font-weight:700} /* --- AUF DEM TELEFON SCHMALER (Vorgabe 16.09.2026) -------------------------- Der Regler steht seit dem 15.09. in derselben Zeile wie der Name. Auf einem breiten Schirm bleibt daneben genug Platz; auf dem Telefon nahm er rund 100px von 300 und drueckte den Namen in eine Spalte, die ihn woertlich zerlegte - "Wanddurchführung" passt dort nicht mehr in eine Zeile. Kleiner statt umbrechen: Ein Umbruch in zwei Ebenen wuerde die Liste wieder doppelt so hoch machen, und genau das war vorher das Problem. Die Knoepfe bleiben 30px hoch und damit treffbar - schmaler wird nur ihre Breite, und die braucht ein Plus- oder Minuszeichen nicht. -------------------------------------------------------------------------- */ @media(max-width:640px){ .kauf-inline .qtystep button{width:22px;height:30px;font-size:15px} .kauf-inline .qtystep .qv{padding:0 3px;font-size:12.5px} .kauf-inline .buyline.xrow{column-gap:8px} .kauf-inline .buyline.xrow .xr-name{font-size:13.5px;line-height:1.35} } /* --- ABSTAND UNTER DER KOPFZEILE (15.09.2026) ------------------------------- Zwischen den Reitern und der ersten Ueberschrift standen 58px: 20px Polsterung des Koerpers, 26px Aussenabstand des ersten Blocks und 12px ueber der Gruppenzeile. Jeder Wert fuer sich ist im Vollbild-Dialog richtig - dort hat der Kopf die ganze Seitenbreite und braucht Luft. Im Kasten summierten sie sich zu einer leeren Zone, die aussah, als fehle dort etwas. Die erste Gruppenzeile eines Blocks verliert ihre obere Polsterung ganz: Der Abstand darueber kommt schon vom Block. Die zweite und dritte behalten sie - sie trennen Gruppen voneinander und werden dafuer gebraucht. */ /* Die Einordnung unter der Kopfzeile. Sie traegt den Abstand nach unten, deshalb faellt die Polsterung des Koerpers darunter ganz weg - sonst summierten sich beide wieder zu der Luecke, die sie gerade fuellt. */ .kauf-inline-info{margin:0;padding:12px 0 0;font-size:13px;line-height:1.45;color:var(--graphit)} .modalback.voll.kauf-inline #cartModalBody{padding-top:2px} /* 8px statt 14: Zwischen der Einordnung und der ersten Gruppenzeile standen drei Abstaende hintereinander - Polsterung des Textes, Polsterung des Koerpers, Aussenabstand des Blocks. Jeder fuer sich klein, zusammen eine Luecke. Der Abstand ZWISCHEN den Bloecken bleibt davon unberuehrt; er kommt vom selben Wert, und dort sind 8px im schmalen Kasten immer noch genug Trennung. */ .kauf-inline .bb-step > .svc-block{margin-top:8px} .kauf-inline .svc-group-label{padding:10px 0 4px} /* Der Erklaer-Knopf steht in der Gruppenzeile (Vorgabe 15.09.2026): Links der Name, daneben die Frage "warum jetzt?". Nur in den Materialgruppen - die Service-Ueberschriften erklaeren sich selbst. SEIT DEM 21.09.2026 macht das der Gruppenkopf selbst: Die Gruppen sind Aufklapper, der Name ist ein span IM summary und der ⓘ sein Geschwister. Die Ausrichtung kommt damit von `details.mini.xgrp > summary` weiter oben. Die frueheren Regeln standen hier auf dem Namen selbst (display:flex, justify-content:space-between) und haetten jetzt einen span ohne Inhalt ausgerichtet - sie sind deshalb weg und nicht bloss ueberschrieben. Ebenfalls entfallen: `#cmExtraList > .svc-group-label:first-child`. Der Name ist kein direktes Kind der Liste mehr, die Regel traf ins Leere. */ .kauf-inline .svc-block > .svc-group-label:first-child{padding-top:0} /* Der Innenabstand des Gruppenkoerpers stand hier und galt damit nur fuer die Liste im Dialog. Er haengt jetzt an `details.mini.xgrp > .xgrp-body` weiter oben, also am Aufklapper selbst - siehe die Begruendung dort. */ /* Der Name darf normal umbrechen. anywhere ist die Notbremse fuer sehr lange Einzelwoerter und hat den zeichenweisen Umbruch ueberhaupt erst moeglich gemacht; break-word bricht nur, wenn ein Wort allein nicht passt. */ .kauf-inline .buyline.xrow .xr-name{overflow-wrap:break-word} /* ZURUECK-VERWEIS AUF DER PRODUKTSEITE (16.09.2026, Vorgabe: "ohne Umrandung, nur den Text und Pfeil"). Deshalb keine .btn-Klasse und hier ausdruecklich border:0 samt background:none - die Produktseite traegt mehrere Regeln, die a-Elemente im Verkaufsbereich als Knopf zeichnen, und eine davon greift sonst spaeter wieder zu. Der Pfeil steht in einem eigenen span, damit sich nur ER beim Zeigen bewegt; laege die Bewegung auf dem ganzen Verweis, wanderte die Zeile mit und der Text zoege das Auge mit. */ .shop-zurueck{display:inline-flex;align-items:center;gap:8px;margin:0 0 16px;padding:0; border:0;background:none;text-decoration:none; color:var(--ink);opacity:.72;font-weight:600;font-size:14.5px} .shop-zurueck:hover{opacity:1;text-decoration:none} .shop-zurueck .sz-pfeil{display:inline-block;transition:transform .18s ease} .shop-zurueck:hover .sz-pfeil{transform:translateX(-3px)} /* ==================================================================== PORTIERT AUS KONFIGURATOR-TEST (16.09.2026) Rabattbalken, Rabattzeile, Aufklapper, Chat-Knopf, Sprechblasen. Clara hat keinen dieser Selektoren - es wird nichts ueberschrieben, nur ergaenzt. Deshalb steht der Block am Ende der Datei. ==================================================================== */ /* ABGESETZT VON DEN PREISZEILEN (16.09.2026). Die Zeile stand bisher wie eine weitere Preiszeile zwischen "Dein Paket gesamt" und der Foerderung - wer einen Code im Postfach hatte und nicht gezielt danach suchte, scrollte daran vorbei zum Kaufen-Knopf. Die Haarlinie darueber und der Bernstein machen aus einer Zeile eine Frage. */ .totalrow.rabattfeld{align-items:center;flex-wrap:wrap;gap:8px;font-weight:700;font-size:15px; color:var(--bernstein);border-top:1px dashed var(--line);margin-top:8px;padding-top:12px} .rabatt-eingabe{display:flex;gap:8px;flex:1 1 220px;justify-content:flex-end} .rabatt-eingabe input{flex:1 1 auto;min-width:0;max-width:210px;font-family:var(--mono); font-size:16px; /* >=16px, sonst zoomt iOS beim Hineintippen die ganze Seite */ font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:9px 11px; border:1.5px solid var(--line);border-radius:var(--radius-s);background:var(--card);color:var(--ink)} .rabatt-eingabe input:focus{outline:none;border-color:var(--bernstein)} .rabatt-eingabe input::placeholder{letter-spacing:.02em;font-weight:500;color:var(--muted);text-transform:none} .rabatt-go{flex:0 0 auto;font-family:var(--font);font-weight:700;font-size:14px;cursor:pointer; padding:9px 14px;border:1.5px solid var(--ink);border-radius:var(--radius-s); background:var(--ink);color:var(--paper)} .rabatt-go:hover{background:var(--graphit);border-color:var(--graphit)} .rabatt-hinweis:empty{display:none} .rabatt-hinweis .banner{margin-top:8px;font-size:13px} /* ---------- WISSENS-CHAT (15.09.2026) ---------- Steht neben dem Nachrichtenformular im selben Hilfe-Panel. Der Verlauf hat eine feste Hoehe und scrollt in sich: ohne das schoebe eine laengere Antwort das Eingabefeld aus dem Panel heraus - derselbe Fehler, der beim Formular schon einmal den Senden-Knopf abgeschnitten hat (30.07.2026). */ .help-bot{display:flex;flex-direction:column;gap:10px} /* ---- Der Kopf des Chats, wie auf der Berater-Seite (15.10.2026, Vorgabe Claras) ---- Bewusst dieselben Werte wie .berater-chat-kopf weiter unten: 12 Punkte Abstand zum Bild, 17er Fettzeile, 13,5er Satz in Graphit. Zwei Oberflaechen desselben Bots sollen sich nicht in Kleinigkeiten unterscheiden. Es ist KEINE gemeinsame Regel daraus geworden, weil der Berater-Kopf aus dem Markup der Section kommt und dieser aus dem Skript - eine Regel fuer beide haette den Eindruck erweckt, es sei auch ein Element. */ .help-bot-kopf{display:flex;align-items:flex-start;gap:12px} .help-bot-fig{flex:0 0 auto;display:inline-flex;color:var(--ink)} .help-bot-fig svg{display:block} .help-bot-worte{min-width:0} .help-bot-kopf b{display:block;font-size:17px;font-weight:800} .help-bot-kopf p{margin:4px 0 0;font-size:13.5px;line-height:1.5;color:var(--graphit)} /* IM CHAT TRAEGT DER KOPF DIE UEBERSCHRIFT, NICHT DAS FENSTER. "Steckst du fest?" steht ganz oben im Panel und gilt fuer die Hilfe-Optionen; sobald Tommy offen ist, staenden zwei Ueberschriften uebereinander und die obere waere die falsche. :has() ist im Theme bereits im Einsatz, eine Klasse am Panel waere eine zweite Zustandsquelle neben .hidden. */ .help-fab-panel:has(.help-bot:not(.hidden)) .help-fab-title, .help-fab-panel:has(.help-bot:not(.hidden)) .help-fab-sub{display:none} .help-bot-verlauf{display:flex;flex-direction:column;gap:8px;max-height:260px;overflow-y:auto; padding:4px 2px;scroll-behavior:smooth} .bot-blase{max-width:86%;padding:9px 12px;border-radius:var(--radius-s);font-size:13.5px; line-height:1.5;white-space:pre-wrap;word-break:break-word} .bot-du{align-self:flex-end;background:var(--ink);color:var(--paper);border-bottom-right-radius:3px} .bot-bot{align-self:flex-start;background:var(--sand);color:var(--ink);border-bottom-left-radius:3px} /* Der Haftungshinweis haengt an risk_flag aus dem Fluss. Gelber Rand statt roter Warnfarbe: die Antwort ist nicht falsch, sie ist nur keine Beratung. */ .bot-risiko{border-left:3px solid var(--rost)} .bot-fehler{background:var(--warn-tint);color:var(--warn);border:1px solid #E3956B} .bot-wartet{opacity:.55;letter-spacing:.18em} .help-bot-eingabe{display:flex;gap:8px;align-items:flex-end} .help-bot-text{flex:1 1 auto;min-width:0;resize:none;font-family:inherit; font-size:16px; /* >=16px, sonst zoomt iOS beim Hineintippen die ganze Seite */ line-height:1.4;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius-s); background:var(--paper);color:var(--ink);max-height:96px;overflow-y:auto} .help-bot-text:focus{outline:none;border-color:var(--bernstein)} .help-bot-send{flex:0 0 auto;width:40px;height:40px;border:0;border-radius:var(--radius-s); background:var(--rost);color:var(--ink);font-size:18px;font-weight:700;cursor:pointer} .help-bot-send:disabled{opacity:.45;cursor:default} .help-bot{max-height:0;opacity:0;overflow:hidden;transition:max-height .35s cubic-bezier(.2,.8,.2,1),opacity .3s ease} .help-bot.in{max-height:none;opacity:1;overflow:visible} .help-bot.hidden{display:none} .mascot-eye{transform-box:fill-box;transform-origin:center;animation:mascotBlink 5.2s ease-in-out infinite} .mascot-eye:nth-child(6){animation-delay:.18s} /* ZWEI KNÖPFE NEBENEINANDER (16.09.2026, Betreiber-Entscheid). Der Chat war eine von drei Zeilen hinter „Hilfe" — also zwei Klicks und eine Liste entfernt. Jetzt steht das Maskottchen als eigener, größerer Knopf daneben; der menschliche Weg bleibt erreichbar, tritt aber optisch zurück. Reihenfolge Hilfe → Chat, damit der Daumen am rechten Rand zuerst auf dem Chat landet. */ .help-fab-reihe{display:flex;align-items:center;gap:8px} .help-fab-chat{padding:11px 18px 11px 14px;font-size:15px;gap:9px} .help-fab-chat .mascot-svg{display:block} /* Der zweite Knopf ist bewusst ruhiger: heller Grund statt Rost, kleinere Schrift. Zwei gleich laute Knöpfe wären keine Wahl, sondern zwei Aufforderungen. */ .help-fab-neben{background:var(--paper);font-size:13px;padding:9px 14px;box-shadow:var(--shadow-s,0 2px 6px rgba(0,0,0,.08))} .help-fab-neben:hover{background:var(--sand,#EFE6D8)} /* Maskottchen in der Sprechblase: sie soll sichtbar von derselben Figur kommen, auf die der Kunde gleich tippt. */ .chat-blase-fig{flex:0 0 auto;display:flex;align-items:center;justify-content:center; width:38px;height:38px;border-radius:50%;background:var(--paper);color:var(--ink)} .chat-blase-wort{flex:1 1 auto;min-width:0} /* ---------- SPRECHBLASE AM HILFE-KNOPF (15.09.2026) ---------- Holt den Kunden einmal aktiv zum Chat. Sitzt in derselben Spalte wie Panel und Knopf, also ohne eigene Positionierung - sie schiebt sich einfach darueber. Schmaler als das Panel (260 statt 320 px): sie soll wie eine Bemerkung wirken, nicht wie ein zweites Fenster. Eingeblendet wird sie nur ab 900 px, das steuert das Skript. */ .chat-blase{position:relative;width:260px;background:var(--ink);color:var(--paper); border-radius:var(--radius);box-shadow:var(--shadow-lift);padding:14px 16px 13px; opacity:0;transform:translateY(8px) scale(.97); transition:opacity .22s ease,transform .22s cubic-bezier(.2,.8,.2,1)} .chat-blase.in{opacity:1;transform:translateY(0) scale(1)} /* Zipfel zum Knopf hinunter - macht aus dem Kasten eine Sprechblase und zeigt, wozu sie gehoert. */ .chat-blase::after{content:"";position:absolute;right:26px;bottom:-7px;width:14px;height:14px; background:var(--ink);transform:rotate(45deg)} .chat-blase-text{display:flex;gap:11px;align-items:flex-start;width:100%;text-align:left;background:none;border:0;padding:0; margin:0;cursor:pointer;color:inherit;font:inherit} .chat-blase-wort b{display:block;font-size:14.5px;font-weight:800;padding-right:18px} .chat-blase-wort>span{display:block;font-size:13px;line-height:1.45;opacity:.82;margin-top:3px} .chat-blase-text:hover .chat-blase-wort>span{opacity:1} .chat-blase-text:focus-visible{outline:2px solid var(--rost);outline-offset:3px;border-radius:var(--radius-xs)} .chat-blase-zu{position:absolute;top:2px;right:2px;width:30px;height:30px;background:none;border:0; color:inherit;opacity:.5;font-size:14px;line-height:1;cursor:pointer;padding:0} .chat-blase-zu:hover{opacity:1} /* AUFKLAPPER STATT ZWEI FESTER ZEILEN (16.09.2026, Betreiber-Entscheid). Die Aufschlüsselung steht jetzt UNTER „Dein Paket gesamt", damit die Kette darunter – gesamt, minus Rabatt, minus Förderung, dein Preis – vorne nicht abgeschnitten wird. Bewusst leise: der Kasten ist ein Angebot, keine Station auf dem Weg zum Knopf. Plus/Minus wie bei details.mini, damit die Seite eine Sprache spricht. */ .glieder{margin-top:4px} .glieder>summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between; align-items:center;gap:10px;padding:6px 0;font-size:13px;font-weight:700;color:var(--muted)} .glieder>summary::-webkit-details-marker{display:none} .glieder>summary::after{content:"+";font-family:var(--mono);font-size:16px;line-height:1} .glieder[open]>summary::after{content:"–"} .glieder>summary:hover{color:var(--graphit)} /* .totalrow bringt eine 2px-Oberkante mit. Direkt unter der Gesamtsumme waere das eine zweite schwere Linie; im Aufklapper reicht die Haarlinie. Die erste Zeile braucht gar keine - der aufgeklappte Kasten trennt schon, zwei Linien dicht untereinander lesen sich wie ein Fehler. Gleiche Ueberlegung wie bei .totalrow.zplan:first-of-type. */ .glieder .totalrow.glied{border-top:1px solid var(--line);margin-top:6px;padding-top:8px} .glieder .totalrow.glied:first-of-type{border-top:none;margin-top:2px;padding-top:0} /* ---------- RABATT-BALKEN UNTER DER MENUELEISTE (15.09.2026) ---------- Bewusst NICHT sticky: er laeuft im Fluss mit und scrollt weg, die Topbar darueber klebt weiterhin bei top:0. Damit bleiben .topbar{top:0}, .rm-progress{top:72px}, .anker{scroll-margin-top:78px} und .receipt-wrap{top:84px} unveraendert richtig. Eigener Klassenname, weil .banner im Rechner schon fuer Inline-Hinweise vergeben ist. GELBER GRUND, MITTIG (Betreiber-Entscheid 15.09.2026). --rost (#FFC700) ist das Gelb des Themes, es kommt kein neuer Farbwert dazu. Auf Gelb muss alles darin die Farbe tauschen: .rb-pz war vorher gelb auf dunkel und waere jetzt unsichtbar, .rb-cta ebenso. Schrift ist durchgehend --ink - Gelb und Papierweiss haben zu wenig Abstand. Zentriert ueber justify-content; das X liegt dafuer absolut rechts statt im Fluss, sonst zoege seine Breite die Mitte des Textes nach links. */ .rb-balken{background:var(--rost);color:var(--ink)} .rb-balken .wrap{position:relative;display:flex;align-items:center;justify-content:center; gap:10px;min-height:40px;padding:6px 34px} .rb-balken-text{flex:0 1 auto;display:flex;align-items:center;justify-content:center;gap:10px; flex-wrap:wrap;background:none;border:0;padding:0;margin:0;cursor:pointer;color:inherit; font:inherit;text-align:center} .rb-pz{flex:0 0 auto;background:var(--ink);color:var(--rost);font-family:var(--mono); font-weight:700;font-size:12.5px;letter-spacing:.02em;padding:3px 9px;border-radius:var(--radius-pill)} .rb-satz{font-size:13.5px;font-weight:600} .rb-cta{font-size:13.5px;font-weight:700;color:var(--ink);text-decoration:underline; text-underline-offset:3px;white-space:nowrap} .rb-balken-text:hover .rb-cta{text-decoration-thickness:2px} .rb-balken-text:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:var(--radius-xs)} .rb-balken-zu{position:absolute;right:0;top:50%;transform:translateY(-50%); background:none;border:0;color:inherit;opacity:.55;cursor:pointer; font-size:15px;line-height:1;padding:4px 6px} .rb-balken-zu:hover{opacity:1} @media (prefers-reduced-motion: reduce){ .mascot-eye{animation:none} .chat-blase{transition:none} } @media(max-width:576px){ .rabatt-eingabe{flex-basis:100%;justify-content:stretch} .rabatt-eingabe input{max-width:none} } @media(max-width:576px){ .chat-blase{display:none} /* Auf schmalen Schirmen bleibt der Chat der einzige beschriftete Knopf - ein Maskottchen ohne Wort erklärt sich nicht, ein Fragezeichen schon. */ .help-fab-chat{padding:9px 15px 9px 11px;border-radius:var(--radius-pill)} .help-fab-chat .help-fab-label{display:inline} .help-fab-reihe{gap:7px} } /* AUF DEM HANDY BEKOMMT DER SATZ EINE EIGENE ZEILE (28.09.2026, Vorgabe Claras: "bei der mobilen Version ist der Rabattbalken auf der Startseite sehr hoch - mach den mittleren Text bisschen breiter, dass es nicht ueber zwei Zeilen geht"). Vorher teilten sich Prozent-Pille und Satz eine Zeile. Fuer den Satz blieben damit rund 280px, er braucht aber knapp 340 - er brach also in ZWEI Zeilen um, und der Knopf kam als dritte dazu. Drei Reihen, daher die Hoehe. Jetzt steht der Satz zuerst und ueber die volle Breite (order:1, flex-basis:100%), darunter Pille und Knopf nebeneinander. Zwei Reihen statt drei, und der Satz hat die Breite, die er braucht. Die Schrift geht dafuer auf 12px und der Rand auf 24px - zusammen die rund 60px, die zwischen einer und zwei Zeilen entscheiden. KEIN white-space:nowrap: Auf sehr schmalen Geraeten (320px) reicht auch die volle Breite nicht, und ein erzwungener Einzeiler schoebe dort die ganze Seite seitlich weg. Dann bricht der Satz lieber wieder um - schlechter als vorher ist es nie. */ @media(max-width:640px){ .rb-balken .wrap{gap:6px;padding-left:24px;padding-right:24px} .rb-balken-text{gap:6px 8px} .rb-satz{order:1;flex:1 0 100%;font-size:12px;line-height:1.35} .rb-pz{order:2} .rb-cta{order:3;font-size:12.5px} } /* ========================================================================== PRODUKT-INFOKASTEN auf der Produktseite (17.09.2026, Vorgabe mit Screenshot). Reiter oben, darunter links Fliesstext und rechts Aufklapper. Das Aussehen kommt von dieser Seite, nicht vom Screenshot: Pillen-Reiter wie .kauftab in der Kaufbox, Aufklapper mit +/- wie details.faq, Karte in --card mit --line und --radius wie jede andere Karte hier. ========================================================================== */ .pinfo{background:var(--card);border:1px solid var(--line);border-radius:var(--radius); box-shadow:var(--shadow);padding:22px 24px;margin-top:22px} /* Die Reiterzeile darf umbrechen: "Produktinformationen & Materialien" ist lang, und diese Spalte ist auf dem Telefon knapp 350px breit. */ /* ALLE REITER IN EINER ZEILE (Vorgabe 24.09.2026). Mit dem vierten Reiter brach die Reihe um, und der umgebrochene Knopf sah aus wie eine zweite Ebene. nowrap haelt sie zusammen. WIRD ES ZU ENG, WIRD GESCHOBEN STATT UMGEBROCHEN: overflow-x:auto laesst die Reihe seitlich wandern - auf dem Telefon ist das die uebliche Geste, und die Rangfolge der Reiter bleibt erkennbar. Ein Umbruch dagegen stellt den letzten Reiter unter die anderen, als gehoerte er nicht dazu. Die Bildlaufleiste ist ausgeblendet: Sie stuende quer unter den Knoepfen ueber der Trennlinie. Dass es weitergeht, zeigt der angeschnittene naechste Knopf. flex:0 0 auto und white-space:nowrap am Knopf sind noetig, weil Flex-Kinder von Haus aus schrumpfen duerfen - ohne sie quetschte "Technische Daten & Masse" auf zwei Zeilen, statt die Reihe schiebbar zu machen. */ .pinfo-reiter{display:flex;flex-wrap:nowrap;gap:6px;padding-bottom:16px; border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none} .pinfo-reiter::-webkit-scrollbar{display:none} /* Der Richtwert-Satz unter der Kennlinie steht eine Spur naeher an der Tabelle als die Quellenzeile darueber - er gehoert zu den Zahlen, nicht zum Kleingedruckten. */ .pinfo-fuss--hinweis{margin-top:-4px} /* UEBERSCHRIFTEN IM INFOKASTEN (25.09.2026). Sie entstehen aus vollstaendig fetten Absaetzen - siehe die Weiche in bwp-pinfo-flaeche.liquid. Bewusst dieselbe Groesse und dasselbe Gewicht wie vorher der fette Absatz: Es geht um die Auszeichnung fuer Suchmaschinen und Vorlesewerkzeuge, nicht um ein neues Aussehen. Nur der Abstand darueber waechst, damit ein Abschnitt sichtbar beginnt. */ .art-body .pinfo-h{font-size:15.5px;font-weight:800;color:var(--ink);line-height:1.45; margin:22px 0 6px} .art-body .pinfo-h:first-child{margin-top:0} .pinfo-tab{appearance:none;border:1.5px solid var(--line);background:transparent; color:var(--graphit);font:inherit;font-size:13.5px;font-weight:700;padding:7px 14px; border-radius:999px;cursor:pointer;transition:border-color .15s ease,background .15s ease; flex:0 0 auto;white-space:nowrap} .pinfo-tab:hover{border-color:var(--bernstein)} .pinfo-tab.an{background:var(--ink);border-color:var(--ink);color:var(--paper)} .pinfo-tab:focus-visible{outline:2px solid var(--bernstein);outline-offset:2px} /* Zwei Spalten wie im Screenshot. Die linke Spalte bekommt minmax(0,1fr), sonst sprengt ein langes Wort ohne Trennmoeglichkeit das Raster. */ .pinfo-koerper{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:28px;margin-top:20px;align-items:start} /* Reiter ohne Aufklapper (Vorgabe 17.09.2026: beim Ueberblick steht rechts nichts). Der Fliesstext nimmt die volle Breite, statt eine leere Spalte offenzuhalten. */ .pinfo-koerper--breit{grid-template-columns:minmax(0,1fr)} @media(max-width:992px){.pinfo-koerper{grid-template-columns:1fr;gap:20px}} .pinfo-flaeche{display:none} .pinfo-flaeche.an{display:block} /* DER FALT-BEREICH. max-height statt -webkit-line-clamp: Der Inhalt ist Fliesstext aus mehreren Absaetzen, und line-clamp zaehlt nur innerhalb EINES Blocks - bei vier Absaetzen schnitte es gar nichts ab. Der weiche Verlauf am Fuss zeigt, dass es weitergeht. Er liegt auf --card, muss also mitwechseln, wenn die Karte je eine andere Farbe bekommt. */ .pinfo-text.gefaltet{max-height:190px;overflow:hidden;position:relative} .pinfo-text.gefaltet::after{content:"";position:absolute;left:0;right:0;bottom:0;height:56px; background:linear-gradient(to bottom,transparent,var(--card));pointer-events:none} .pinfo-mehr{appearance:none;border:0;background:none;padding:0;margin-top:12px; font:inherit;font-size:14.5px;font-weight:600;color:var(--ink); text-decoration:underline;text-underline-offset:3px;cursor:pointer} .pinfo-mehr:hover{color:var(--gruen)} .pinfo-mehr[hidden]{display:none} /* AUFKLAPPER. Gerahmte Liste wie im Screenshot, Zeichen und Verhalten wie details.faq - dieselbe Bewegung, die der Kunde im Fragen-Bereich schon kennt. */ .pinfo-klapp{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden} .pinfo-det{border-bottom:1px solid var(--line)} .pinfo-det:last-child{border-bottom:none} .pinfo-det summary{display:flex;align-items:center;justify-content:space-between;gap:14px; padding:16px 18px;font-weight:700;font-size:15px;cursor:pointer;list-style:none} .pinfo-det summary::-webkit-details-marker{display:none} .pinfo-det summary:hover{color:var(--gruen)} .pinfo-det > .art-body{padding:0 18px 16px;font-size:15px} /* Aufklapper ohne Datei */ /* Das Plus-Minus-Zeichen der Aufklapper ist am 17.09.2026 dem Pfeil gewichen (Vorgabe) - siehe .pinfo-chev weiter unten. Die Regeln dafuer stehen nicht mehr hier, weil kein Element sie mehr traegt; eine Regel ohne Nutzer waere beim naechsten Lesen eine falsche Spur. */ /* RECHTE SPALTE: die Aufklapper, und in ihnen die Datenblaetter (Vorgabe 17.09.2026). Der Download steht UNTER dem Text - erst was drinsteht, dann das Dokument. Wer nur wissen will, wie laut das Geraet ist, muss dafuer kein PDF oeffnen. Kein .btn: Der Kasten steht neben dem echten Kaufknopf, und zwei gleich aussehende Knoepfe nebeneinander streiten um dieselbe Aufmerksamkeit. Dies hier ist ein Verweis mit Rahmen, kein Aufruf zum Handeln. */ .pinfo-rechts{display:flex;flex-direction:column;gap:14px} .pinfo-det-inhalt{padding:0 18px 16px} .pinfo-det-inhalt .art-body{font-size:15px} .pinfo-blatt{display:inline-flex;align-items:center;gap:10px;padding:11px 14px;margin-top:12px; border:1.5px solid var(--line);border-radius:var(--radius);background:var(--paper); color:var(--ink);text-decoration:none;font-weight:700;font-size:14px;line-height:1.3} .pinfo-blatt:hover{border-color:var(--gruen);background:var(--gruen-tint)} .pinfo-blatt-ico{flex:0 0 auto;font-family:var(--mono);font-size:16px} /* Steht der Download allein im Aufklapper, braucht er keinen Abstand nach oben - darueber ist dann nichts, wovon er sich absetzen muesste. */ .pinfo-det-inhalt > .pinfo-blatt:first-child{margin-top:2px} /* GERECHNETE FLAECHEN (Leistungstabelle, Paketliste). */ .pinfo-slot:empty{display:none} .pinfo-tabtitel{font-weight:800;font-size:14px;margin:18px 0 8px} .pinfo-flaeche .pinfo-text + .pinfo-slot .pinfo-tabtitel:first-child{margin-top:22px} /* Die Leistungstabelle hat fuenf Spalten und steht in einer schmalen Spalte - sie bekommt ihren eigenen Rollbereich. Die Seite selbst darf nie seitlich rollen. */ .pinfo-tabrolle{overflow-x:auto;-webkit-overflow-scrolling:touch} .pinfo-tab-leistung,.pinfo-tab-daten{width:100%;border-collapse:collapse;font-size:14px} .pinfo-tab-leistung th,.pinfo-tab-leistung td{padding:8px 10px;text-align:right; border-bottom:1px solid var(--line);white-space:nowrap} .pinfo-tab-leistung thead th{font-family:var(--mono);font-size:12px;color:var(--graphit);font-weight:700} .pinfo-tab-leistung tbody th,.pinfo-tab-leistung thead th:first-child{text-align:left;font-weight:700} .pinfo-tab-daten th,.pinfo-tab-daten td{padding:9px 0;border-bottom:1px solid var(--line); vertical-align:top;text-align:left} .pinfo-tab-daten th{font-weight:700;width:42%;padding-right:14px} .pinfo-tab-daten tr:last-child th,.pinfo-tab-daten tr:last-child td{border-bottom:none} .pinfo-fuss{margin-top:8px;font-size:12.5px;color:var(--graphit)} /* PAKETLISTE. Eine Zeile je Paket, darunter die beiden Wege - bewusst als Textverweise und nicht als Knoepfe: es sind Abzweigungen, keine Handlungen. */ .pinfo-pakete{display:flex;flex-direction:column;gap:2px;margin-top:4px} /* JE PAKET EIN AUFKLAPPER (Vorgabe 18.09.2026): Name und Preis in der Zeile, die Stueckliste darunter. Vorher standen hier zwei Verweise in den Zubehoer-Reiter; den gibt es in der Navigation nicht mehr. Zugeklappt wie eine Listenzeile, nicht wie ein Kasten - es sind mehrere untereinander, und Raender um jeden einzelnen ergaeben ein Gitter statt einer Liste. Dasselbe leise Muster wie die Geraete-Abschnitte im Reiter davor. .pinfo-paket--flach traegt der Warmwasserspeicher: Er hat keine Paket-Stueckliste, also auch nichts aufzuklappen. Gleiche Zeile, nur ohne Pfeil. */ .pinfo-paket{padding:0;border-bottom:1px solid var(--line)} .pinfo-paket:last-child{border-bottom:none} .pinfo-paket > summary{display:flex;align-items:baseline;justify-content:space-between; gap:14px;padding:12px 0;cursor:pointer;list-style:none} .pinfo-paket > summary::-webkit-details-marker{display:none} .pinfo-paket--flach{padding:12px 0} .pinfo-paket-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:12px; flex:1 1 auto;min-width:0} /* ALLE PAKETNAMEN IN DERSELBEN STAERKE (Vorgabe 18.09.2026: "alle nicht in bold, nur die Titel"). Fett bleibt allein den Gruppenueberschriften vorbehalten - in einer Liste aus vierzehn Zeilen traegt die Schriftstaerke sonst zwei Bedeutungen zugleich: Gliederung und Auswahl. Dass etwas gewaehlt ist, sagt die Pille daneben. */ .pinfo-paket-name{font-weight:400;font-size:15px;min-width:0} .pinfo-paket-preis{flex:0 0 auto;font-size:14px;color:var(--graphit);white-space:nowrap} /* Die Positionszahl sagt vor dem Klick, wie viel dahintersteckt - "3 Positionen" ist eine andere Erwartung als "14 Positionen". */ .pinfo-paket-auf{display:flex;align-items:center;gap:9px;flex:0 0 auto} .pinfo-paket-zahl{font-family:var(--mono);font-size:11px;color:var(--graphit);white-space:nowrap} .pinfo-paket > summary:hover .pinfo-paket-name{color:var(--gruen)} /* SEIT DIE LISTE AUCH DIE NICHT GEWAEHLTEN ZEIGT (18.09.2026), muss auf einen Blick erkennbar sein, was davon im Warenkorb liegt. Die ausgewaehlten stehen in voller Farbe und tragen die Pille; die uebrigen sind leiser - sie sind ein Angebot, keine Rechnung. Kein Haken und keine Hinterlegung: Beides sieht nach Bedienelement aus, und angehakt wird im Konfigurator daneben, nicht hier. */ .pinfo-paket-name .tag{margin-left:8px;vertical-align:middle} /* DER NAME FUEHRT AUF DIE EIGENE SEITE DES PAKETS (18.09.2026). Erbt Farbe und Staerke der Zeile - eine zweite Auszeichnung waere in einer Liste aus vierzehn Namen nur Unruhe. Die Unterstreichung erscheint erst beim Zeigen; dass hier etwas anklickbar ist, sagt schon der Zeiger, und die Zeile ist ohnehin anfassbar (sie klappt auf). */ .pinfo-paket-link{color:inherit;font:inherit;text-decoration:none} .pinfo-paket-link:hover{color:var(--gruen);text-decoration:underline;text-underline-offset:3px} /* Nur die Farbe unterscheidet noch - die Staerke ist jetzt ueberall gleich. */ .pinfo-paket:not(.ist-gewaehlt) .pinfo-paket-name{color:var(--graphit)} .pinfo-paket:not(.ist-gewaehlt) > summary:hover .pinfo-paket-name{color:var(--gruen)} .pinfo-paket-teile{padding:0 0 12px} /* Die Positionszeilen kommen aus zubPosZeile() - dieselbe Funktion wie im Zubehoer-Panel. Ihre Linien wuerden hier eine zweite Gitterebene erzeugen; in der Liste genuegt die Trennlinie zwischen den Paketen. */ .pinfo-paket-teile .bt-pos{border-bottom:0;padding:6px 0} .pinfo-paket-teile .bt-pos-name{font-size:14px} .pinfo-leer{font-size:15px;color:var(--graphit)} .pinfo-tab[hidden]{display:none} @media(max-width:992px){.pinfo{padding:18px 16px}} /* DIE GANZE KIT-KARTE IST KLICKBAR (Vorgabe 17.09.2026). Der Zeiger sagt das an, sonst bliebe die Flaeche eine stille Moeglichkeit - niemand probiert einen Klick auf etwas, das nicht danach aussieht. Verdrahtet in konfigurator.js, ein Lauscher am Dokument. Beim Zeigen hebt sich die Karte leicht und der Rand nimmt Messing an. Bewusst kein Verschieben und keine Skalierung: Die Karten stehen in einem Raster, und eine, die sich bewegt, schiebt optisch ihre Nachbarn. Der Knopf darin behaelt seinen eigenen Hover-Zustand - er ist weiterhin das, worauf die Tastatur zielt, und darf nicht aussehen, als waere er mit der Karte verschmolzen. */ .candcard,.kitcard-deep{cursor:pointer} .candcard:hover,.kitcard-deep:hover{border-color:var(--bernstein)} .kitcard-deep:hover{box-shadow:var(--shadow-lift),var(--shadow-card)} /* Die empfohlene Karte behaelt ihren Ring - er ist die Aussage, der Hover nur eine Rueckmeldung. Ohne diese Zeile schluege der Hover-Rand die Empfehlung, weil er spaeter in der Datei steht. */ .candcard.rec:hover{border-color:var(--gruen)} .kitcard-deep.ist-empfohlen:hover{border-color:var(--gruen); box-shadow:0 0 0 3px var(--gruen-tint),var(--shadow)} /* ZURUECK ZUM KIT im Zubehoer-Reiter (Vorgabe 17.09.2026). Sichtbar nur, wenn jemand aus dem Produkt-Infokasten einer Kit-Seite kommt - konfigurator.js nimmt das hidden weg. Gleiche Form wie der Zurueck-Verweis auf der Produktseite (.shop-zurueck): ohne Rahmen, nur Pfeil und Text, der Pfeil rueckt beim Zeigen nach links. Zwei Rueckwege im selben Shop sollen sich gleich anfuehlen. Eigene Klasse statt .shop-zurueck wiederzuverwenden: Jener steht in einer Karte und traegt deren Abstaende, dieser ueber einer Seitenueberschrift. Gleiches Aussehen, anderer Ort - eine gemeinsame Regel muesste an einer Stelle immer korrigiert werden. */ .zub-zurueck{display:inline-flex;align-items:center;gap:8px;margin:0 0 14px;padding:0; border:0;background:none;text-decoration:none; color:var(--ink);opacity:.72;font-weight:600;font-size:14.5px} .zub-zurueck:hover{opacity:1;text-decoration:none} .zub-zurueck .zz-pfeil{display:inline-block;transition:transform .18s ease} .zub-zurueck:hover .zz-pfeil{transform:translateX(-3px)} .zub-zurueck[hidden]{display:none} /* KOPFZEILE DER PAKETSEITE. Sie trug bis zum 01.10.2026 ZWEI Wege - links zurueck zur Uebersicht, rechts zurueck zur Konfiguration -, und daher kommen die Verteilung auf beide Enden und das Untereinander auf dem Telefon. DER RECHTE IST AUF VORGABE ENTFALLEN (siehe konfigurator.js), seine Regeln (.bt-detail-konfig) mit ihm. Die Zeile bleibt wie sie ist: Mit einem einzigen Kind steht der Knopf unter space-between genauso links wie zuvor, und kaeme je ein zweiter Weg dazu, sitzt er wieder richtig. */ .bt-detail-nav{display:flex;align-items:center;justify-content:space-between;gap:12px; flex-wrap:wrap;margin-bottom:14px} @media(max-width:576px){.bt-detail-nav{flex-direction:column;align-items:flex-start;gap:8px}} /* DER PFEIL ZUR PAKETSEITE NEBEN DEM ⓘ (30.09.2026). Sein Aussehen steht bei .kb-info weiter oben - beide Waehler stehen dort nebeneinander. ER TRAEGT DIE KLASSE kb-info NICHT (berichtigt am selben Tag): Ein Klick-Horcher am Dokument fasst jedes .kb-info ab und ruft preventDefault(); der Link war damit tot. Aussehen teilen heisst deshalb hier: im Stylesheet, nicht ueber dieselbe Klasse. */ /* Der Pfeil in einer Gruppenzeile (Warmwasserspeicher) sitzt im neben dem ⓘ und darf nicht mitwachsen, wenn die Zeile eng wird. */ .xgrp-seite{flex:0 0 auto} .xgrp-seite[hidden]{display:none} /* ============ DAS PAKET ALS FENSTER UEBER DER PRODUKTSEITE (01.10.2026) ============ Vorgabe Claras: "nicht komplett so gross wie die ganze Seite, aber fast so gross, und grob das bedecken, was man sonst darauf sieht." FAST, NICHT GANZ: min(1040px, 94vw) breit und 92vh hoch, mittig. Der Rand ringsum ist das, was "Fenster" von "neue Seite" unterscheidet - man sieht, dass die Konfiguration darunter stehenbleibt und man gleich wieder dort ist. DER KOPF SCROLLT MIT, DAS KREUZ NICHT: Es klebt oben rechts in der Karte. Bei acht Positionen mit aufgeklappten Beschreibungen ist der Weg zurueck sonst ein langer Weg nach oben. GESCROLLT WIRD IM FENSTER, NICHT DAHINTER: overscroll-behavior haelt den Schwung im Kasten; die Seite dahinter steht zusaetzlich fest (html.paketfenster-offen). Ohne beides wandert die Seite unter dem Fenster weg, und nach dem Schliessen steht man woanders. z-index 320 liegt ueber dem Kauf-Dialog (300) und seiner Sidebar (310) - das Fenster geht ja aus genau diesen Flaechen heraus auf und muss darueber liegen. */ .paketfenster{position:fixed;inset:0;z-index:320;display:flex;align-items:center; justify-content:center;padding:max(16px,3vh) max(12px,3vw); background:rgba(43,33,26,.55);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)} .paketfenster[hidden]{display:none} .paketfenster-karte{position:relative;width:min(1040px,94vw);max-height:92vh; display:flex;flex-direction:column;background:var(--paper); border:1px solid var(--line);border-radius:var(--radius-xl);box-shadow:var(--shadow-lift); overflow:hidden} .paketfenster-inhalt{overflow-y:auto;overscroll-behavior:contain; padding:clamp(18px,2.4vw,30px);padding-right:clamp(52px,5vw,64px)} .paketfenster-zu{position:absolute;top:10px;right:10px;z-index:2;width:38px;height:38px; display:inline-flex;align-items:center;justify-content:center; font-size:17px;line-height:1;color:var(--ink);cursor:pointer; background:var(--card);border:1px solid var(--line);border-radius:999px;padding:0; transition:background .15s,border-color .15s} .paketfenster-zu:hover{background:var(--bernstein-tint);border-color:var(--bernstein)} /* Die Seite dahinter steht still, solange das Fenster offen ist. */ html.paketfenster-offen{overflow:hidden} /* DAS SERVICE-FENSTER (02.10.2026, Vorgabe Claras: "mach bei den Services bitte auch ein Pop-up-Fenster wie bei den Bauteilen ... diese aufgeklappte Darstellung im Pop-up anzeigen"). ES TEILT SICH DIE HUELLE MIT DEM PAKETFENSTER - Kasten, Kreuz, Grund, Hoechstbreite stehen dort und gelten hier mit. Eigen ist nur, was innen steht: Kopfzeile und die drei Spalten. DIE SPALTEN (.sd-cols, .sd-col, .sd-l, .sd-src) sind dieselben wie auf der Foerderseite und brauchen hier keine eigenen Regeln - genau das war der Grund, denselben Aufbau zu verwenden. Eine Sonderbehandlung gibt es nur fuer den Abstand nach oben, weil im Fenster keine Karte darueber steht. DIE KOPFZEILE BRICHT UM: Name, Pflicht-Kennzeichen und Preis passen auf einem Telefon nicht in eine Zeile, und der Preis soll dort nicht an den Rand gedrueckt werden. */ .svcfenster .svcfenster-kopf{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px 12px; padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid var(--line)} .svcfenster .svcfenster-kopf h3{margin:0;font-size:clamp(18px,2.2vw,23px);font-weight:800; line-height:1.25;flex:1 1 auto;min-width:0} .svcfenster .svcfenster-kopf .price{flex:0 0 auto;font-size:17px;font-weight:800} .svcfenster .sd-cols{margin-top:0} .svcfenster .sd-src{display:block;margin-top:16px} /* Im Fenster traegt der Kopf keinen Rueckweg - der Titel darf deshalb oben anfangen. */ .paketfenster .bt-detail-head{margin-top:0} @media(max-width:768px){ /* Auf dem Telefon fast formatfuellend: Ein schmaler Rand bliebe ohne Wirkung, und jeder Pixel zaehlt fuer die Positionsliste. */ .paketfenster{padding:10px} .paketfenster-karte{width:100%;max-height:94vh} .paketfenster-inhalt{padding:16px;padding-right:48px} } .xr-seite{text-decoration:none;border-bottom:none} .xr-seite:hover{text-decoration:none} /* Seit dem 01.10.2026 ist der Pfeil ein