/* ========================================================================== EnergyNexus — Gestaltungssystem (Richtung F, reduziert) Eine Schriftfamilie, eine Akzentfarbe, keine Flächen. Alle Seiten binden ausschliesslich diese Datei ein. ========================================================================== */ :root{ /* Farbe Die Deckkraft ist nicht Geschmack, sondern gerechnet: jeder Wert unten ist auf --void (#0a0a0a) aufgerechnet und nach WCAG geprueft. --bone 16,46:1 Ueberschriften, kraeftiger Text --dim 5,88:1 Fliesstext, Zeilen, Navigation --faint 4,61:1 Marken, Formularbeschriftungen, Tabellenkoepfe --hot 6,35:1 Akzent und Fokusring --umriss 3,11:1 Rahmen von Bedienelementen (Grenze 3,0) --hair 1,19:1 reine Trennlinien ohne Bedeutung — duerfen leise sein Wer hier dreht, rechnet nach. --dim und --faint tragen Text und muessen ueber 4,5 bleiben, --umriss ueber 3,0. */ --void:#0a0a0a; --void-2:#101010; --bone:#ebeae7; --dim:rgba(235,234,231,.58); --faint:rgba(235,234,231,.50); --hot:#ff5a1f; --umriss:rgba(235,234,231,.38); --hair:rgba(235,234,231,.09); --gut:#5bd08a; --warn:#ffb020; /* Schrift */ --sans:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif; --mono:'Martian Mono',ui-monospace,'Cascadia Mono',Consolas,monospace; /* Mass */ --breit:1080px; --rand:clamp(22px,5vw,40px); --luft:clamp(74px,12.5vh,130px); } *,*::before,*::after{box-sizing:border-box;} html{scroll-behavior:smooth;} body{ margin:0;background:var(--void);color:var(--bone); font-family:var(--sans);font-size:16px;line-height:1.7; -webkit-font-smoothing:antialiased;overflow-x:hidden; } ::selection{background:var(--hot);color:var(--void);} a{color:inherit;text-decoration:none;} :focus-visible{outline:1px solid var(--hot);outline-offset:4px;} /* Rollbehaelter (Tabelle, Protokoll) bekommen von der Auszeichnung tabindex="0", damit man sie mit der Tastatur rollen kann. Ihr Fokusring liegt INNEN — aussen wuerde ihn body{overflow-x:hidden} an der Seitenkante abschneiden. */ [tabindex="0"]:focus-visible{outline:2px solid var(--hot);outline-offset:-2px;} img{max-width:100%;height:auto;display:block;} /* Lange deutsche Woerter ("Geschaeftsbedingungen") sind bei 320 px breiter als die Inhaltsspalte. body{overflow-x:hidden} wuerde sie stillschweigend abschneiden, deshalb duerfen Ueberschriften trennen und notfalls umbrechen. */ h1,h2,h3{text-wrap:balance;overflow-wrap:break-word;hyphens:auto;} .wrap{max-width:var(--breit);margin:0 auto;padding:0 var(--rand);} .schmal{max-width:760px;} /* Marken ------------------------------------------------------------------ */ .label{ font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--faint); text-transform:uppercase;margin:0; } .label.akzent{color:var(--hot);} /* Eine Abschnittsmarke darf auch eine Ueberschrift sein. Dann traegt sie h2 mit: 16ch Breite, Zeilenhoehe 1.12 und Fettung 600 — bei 10px Mono mit 0.2em Sperrung bricht der Text um und die Zeilen laufen ineinander. */ /* Eine Abschnittsmarke darf auch eine Ueberschrift sein. Dann traegt sie h2 bzw. h3 mit: Breite, Zeilenhoehe und Fettung, die zu 10px Mono nicht passen. ABER SIE DUERFEN NICHT GLEICH AUSSEHEN. Bis 27.08.2026 taten sie es, und seit die Seiten zweispaltig sind, war dadurch nicht mehr zu erkennen, wo ein Abschnitt anfaengt: "ABSCHLUSS" (ein Unterblock) und "DAS PROGRAMM" (ein neuer Abschnitt) standen in derselben Schrift, derselben Groesse und derselben Farbe untereinander. Deshalb ein Helligkeitsschritt — keine zweite Farbe, die Gestaltung hat genau einen Akzent. */ h2.label,h3.label{max-width:none;line-height:1.5;font-weight:400;} h2.label{color:var(--bone);letter-spacing:.24em;} h3.label{color:var(--faint);} /* Typografie -------------------------------------------------------------- */ h1{ font-weight:600;font-size:clamp(32px,6.6vw,86px);line-height:1.06; letter-spacing:-.035em;margin:0 0 34px;max-width:17ch; } h1 em{font-style:normal;color:var(--hot);} h2{ font-weight:600;font-size:clamp(28px,3.8vw,44px);line-height:1.12; letter-spacing:-.028em;margin:0 0 18px;max-width:16ch; } h3{font-size:19px;font-weight:500;letter-spacing:-.01em;margin:0 0 6px;} p{margin:0 0 18px;} p:last-child{margin-bottom:0;} .fliess{color:var(--dim);font-size:16px;line-height:1.78;max-width:52ch;} .fliess.gross{font-size:17px;max-width:46ch;} /* Einblendung ------------------------------------------------------------- Der Ausgangswert ist SICHTBAR. Versteckt wird nur, wenn seite.js laeuft und die Klasse js an gehaengt hat — sonst bliebe ohne Skript die halbe Seite unsichtbar, weil niemand .on setzt. */ .rv{ transition:opacity 1s cubic-bezier(.2,.8,.3,1),transform 1s cubic-bezier(.2,.8,.3,1); } html.js .rv{opacity:0;transform:translateY(14px);} html.js .rv.on{opacity:1;transform:none;} /* Kopf -------------------------------------------------------------------- */ header.top{padding:36px 0 0;} .top-in{display:flex;align-items:baseline;gap:32px;} /* Wortmarke. Groesser als die uebrige Kopfzeile, und der zweite Teil traegt mehr Gewicht als der erste - das ist der Rhythmus, den eine zweiteilige Marke braucht, damit sie nicht wie zwei gleichrangige Woerter liest. Die Laufweite sinkt mit steigender Groesse: .2em waren bei 11 px richtig, bei 15 px zerfaellt das Wort damit. */ .marke{font-family:var(--mono);font-size:15px;letter-spacing:.14em;white-space:nowrap;} .marke .schraeg{color:var(--hot);} /* NICHT font-weight. Martian Mono ist hier als STATISCHER Schnitt mit Gewicht 300 eingebunden (schriften.css) und traegt kein fvar - es gibt also gar keinen fetten Schnitt, auf den font-weight:700 zeigen koennte. Es stand hier und tat nichts. text-stroke verdickt die vorhandenen Striche und wirkt damit auch bei einem einzelnen Schnitt. 0.6px ist gemessen der Punkt, an dem NEXUS sichtbar schwerer steht als ENERGY, ohne dass die Innenraeume der Buchstaben zulaufen. */ .marke-zwei{ -webkit-text-stroke:0.6px currentColor; text-stroke:0.6px currentColor; } @media(max-width:680px){ .marke{font-size:13px;letter-spacing:.12em;} } .top nav{display:flex;gap:26px;margin-left:auto;font-size:14px;color:var(--dim);flex-wrap:wrap;} .top nav a{transition:color .3s;} .top nav a:hover,.top nav a[aria-current="page"]{color:var(--bone);} @media(max-width:680px){ .top-in{flex-direction:column;align-items:flex-start;gap:14px;} .top nav{margin-left:0;gap:18px;font-size:13px;} } /* Aufmacher --------------------------------------------------------------- */ .aufmacher{padding:clamp(52px,10vh,112px) 0 clamp(44px,8vh,92px);} .aufmacher.klein{padding:clamp(40px,6vh,68px) 0 clamp(28px,4vh,48px);} .aufmacher .fliess{margin-bottom:30px;} /* Textlink ---------------------------------------------------------------- */ .textlink{ display:inline-flex;align-items:center;gap:10px;font-size:16px;font-weight:500; padding-bottom:5px;border-bottom:1px solid var(--faint); transition:border-color .35s,gap .35s; } .textlink:hover{border-color:var(--hot);gap:16px;} .textlink svg{color:var(--hot);flex:none;} .textlink.leise{font-size:14.5px;} /* Knopf ------------------------------------------------------------------- */ .knopf{ display:inline-flex;align-items:center;justify-content:center;gap:10px; font-family:var(--sans);font-size:15px;font-weight:500; padding:14px 26px;border-radius:2px;cursor:pointer; background:var(--hot);color:var(--void);border:1px solid var(--hot); transition:opacity .3s,transform .3s; } .knopf:hover{opacity:.88;transform:translateY(-1px);} .knopf[disabled]{opacity:.32;cursor:not-allowed;transform:none;} .knopf.leer{background:transparent;color:var(--bone);border-color:var(--umriss);} .knopf.leer:hover{border-color:var(--hot);color:var(--hot);} /* Liste ------------------------------------------------------------------- */ .liste{border-top:1px solid var(--hair);} .zeile{ display:grid;grid-template-columns:120px 1fr;gap:clamp(18px,5vw,60px); padding:34px 0;border-bottom:1px solid var(--hair);align-items:baseline; } .zeile p{color:var(--dim);font-size:15px;line-height:1.75;margin:0;max-width:56ch;} /* Die Zeilenmarke ist eine Marke, kein Fliesstext. `.zeile p` (0-1-1) schlaegt `.label` (0-1-0) — ohne diese Zeile rendern die Rubriken mit 15px in --dim und stehen damit GROESSER und HELLER da als die Abschnittsueberschrift darueber. Die Hierarchie stand bis 30.08.2026 auf dem Kopf; die Korrektur gab es nur fuer .dicht-Listen (Zeile 455) und griff auf der Startseite nie. */ .zeile p.label{font-size:10px;line-height:1.7;color:var(--faint);max-width:none;} /* Zwei Absaetze in einer Zeile standen ohne Abstand aneinander (p{margin:0}), der zweite las sich als Fortsetzung des ersten Satzes. Betrifft /gewerbe und /node-red, wo je Punkt eine Aussage und ihre Begruendung stehen. */ .zeile p + p{margin-top:15px;} /* Preis und Verfuegbarkeit gehoeren an die Ueberschrift, nicht als Schlusssatz in den Werbetext: "Derzeit nicht lieferbar" stand in derselben Farbe wie das Verkaufsversprechen und wurde ueberlesen. */ .zeile h3{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 4px;} .zeile .preis{margin-left:auto;font-family:var(--mono);font-size:13px; color:var(--dim);white-space:nowrap;font-weight:400;letter-spacing:0;} @media(max-width:640px){ .zeile{grid-template-columns:1fr;gap:10px;} .zeile .preis{margin-left:0;width:100%;} } /* Trefferflaechen --------------------------------------------------------- WCAG 2.5.8 verlangt 24x24 CSS-Pixel. Gemessen am 30.08.2026 lagen 16 von 38 fokussierbaren Elementen der Startseite darunter, alle ueber die Hoehe: die Marke 18,7px, sechs Navigationslinks 22,1px, neun Fusszeilenlinks 23,8px. Die Flaeche waechst ueber Polster, nie ueber die Schriftgroesse. */ .marke{display:inline-flex;align-items:center;min-height:44px;} .top nav a{display:inline-flex;align-items:center;min-height:44px;} .fuss-spalte a{display:inline-flex;align-items:center;min-height:26px;} /* Abschluss --------------------------------------------------------------- Ohne diesen Block endete die Startseite auf dem kostenlosen Flash-Werkzeug: kein Absender, keine Wiederholung der Handlung, kein Ausgang fuer den Besucher, der bis ganz nach unten gelesen hat. */ /* EINE Spalte als Grundform, zwei nur wenn wirklich eine Datenliste danebensteht. Seit die Liste auf der Startseite herausgenommen ist (03.09.2026), stand dort sonst eine leere 240-px-Spalte samt Abstand - der Text saesse links gequetscht neben nichts. :has kennt jeder Browser der letzten Jahre; wo nicht, bleibt es bei einer Spalte. Das ist der harmlose Ausgang: die Liste stuende dann unter dem Text statt daneben. */ .abschluss{ display:grid;grid-template-columns:minmax(0,1fr); gap:clamp(28px,6vw,72px);align-items:start; padding:clamp(44px,8vh,86px) 0 clamp(52px,9vh,96px); border-top:1px solid var(--umriss); } .abschluss:has(dl){grid-template-columns:minmax(0,1fr) minmax(240px,auto);} .abschluss h2{max-width:20ch;} .abschluss .fliess{margin-bottom:28px;} .abschluss dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:8px 20px;font-size:14px;} .abschluss dt{font-family:var(--mono);font-size:10px;letter-spacing:.14em; text-transform:uppercase;color:var(--faint);padding-top:3px;} .abschluss dd{margin:0;color:var(--dim);} .abschluss dd a{display:inline-flex;align-items:center;min-height:26px;} @media(max-width:760px){.abschluss{grid-template-columns:1fr;}} /* Daten ------------------------------------------------------------------- */ .daten{margin:0;} .datenzeile{ display:grid;grid-template-columns:1fr auto;gap:20px;padding:12px 0; border-bottom:1px solid var(--hair);font-size:14.5px; } .datenzeile:first-child{border-top:1px solid var(--hair);} .datenzeile dt{color:var(--dim);margin:0;} /* Rechtsbuendig, und zwar ausdruecklich. Die Spalte sitzt zwar schon rechts (grid-template-columns: 1fr auto), aber das richtet nur den Kasten aus, nicht den Text darin. Bei einzeiligen Werten faellt der Unterschied nicht auf - der Kasten ist dann so breit wie sein Inhalt. Bei mehrzeiligen wie dem Gewerbewortlaut oder der Kammerzugehoerigkeit schon: die Folgezeilen standen linksbuendig und die rechte Kante franste aus. */ .datenzeile dd{margin:0;font-family:var(--mono);font-size:12px;font-variant-numeric:tabular-nums; text-align:right;} /* Gerät ------------------------------------------------------------------- */ /* minmax(0,1fr) statt 1fr, und min-width:0 an der Spalte: der Geraetenachbau in .puckwrap traegt eine feste Pixelbreite. Mit dem stillschweigenden min-width:auto zieht diese Breite die Rasterspalte auf — die Spalte meldet dann eine Breite, die das Geraet selbst gesetzt hat. Genau diese Rueckkopplung misst stil/powerdot.js. */ .geraet{ padding:var(--luft) 0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(40px,8vw,110px);align-items:center; } @media(max-width:820px){.geraet{grid-template-columns:minmax(0,1fr);gap:56px;}} .puckwrap{display:flex;justify-content:center;min-width:0;} .puck{ width:min(300px,72vw);aspect-ratio:1;border-radius:50%; background:#141414;border:1px solid rgba(235,234,231,.08); display:flex;align-items:center;justify-content:center; } .schirm{ width:84%;aspect-ratio:1;border-radius:50%;background:#050505; display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center; } .s-marke{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;color:var(--faint);} .s-wert{ font-size:clamp(38px,7.4vw,60px);font-weight:600;line-height:1.05; letter-spacing:-.04em;font-variant-numeric:tabular-nums;margin-top:6px; } .s-einheit{font-family:var(--mono);font-size:11px;color:var(--hot);} .s-fuss{font-family:var(--mono);font-size:9px;color:var(--faint);margin-top:18px;letter-spacing:.14em;} /* Formular ---------------------------------------------------------------- */ .feld{display:flex;flex-direction:column;gap:8px;margin-bottom:22px;} .feld > span{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--faint);text-transform:uppercase;} input[type=text],input[type=email],input[type=tel],input[type=number],textarea,select{ font-family:var(--sans);font-size:15px;color:var(--bone); background:transparent;border:1px solid var(--umriss);border-radius:2px; padding:13px 14px;transition:border-color .3s;width:100%; } /* KEIN outline:none. Der Rahmenwechsel allein traegt nicht: --hot gegen --umriss sind gerechnet 2,04:1, noetig waeren 3,0. Er bleibt als Zugabe, den Ausweis fuehrt der Fokusring aus Zeile 51 (--hot auf --void, 6,35:1). :focus-visible statt :focus, damit die Zugabe der Tastatur folgt. */ input:focus-visible,textarea:focus-visible,select:focus-visible{border-color:var(--hot);} textarea{resize:vertical;min-height:130px;} select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%),linear-gradient(135deg,var(--dim) 50%,transparent 50%); background-position:calc(100% - 18px) 20px,calc(100% - 13px) 20px;background-size:5px 5px,5px 5px;background-repeat:no-repeat;} option{background:#141414;color:var(--bone);} /* Wahlfelder (Konfigurator) ----------------------------------------------- */ .wahl{display:flex;gap:8px;flex-wrap:wrap;} .wahl button{ flex:1 1 auto;min-width:72px;cursor:pointer; font-family:var(--sans);font-size:14px;color:var(--dim); background:transparent;border:1px solid var(--umriss);border-radius:2px; padding:12px 10px;transition:border-color .25s,color .25s; } .wahl button:hover{border-color:var(--bone);color:var(--bone);} /* Gewaehlt und nicht gewaehlt duerfen sich nicht nur in der Farbe unterscheiden. Gerechnet (Alpha auf --void, dann WCAG): Schrift --hot 0,2867 gegen --dim 0,2620 Leuchtdichte -> 1,08:1 Rahmen --hot gegen --umriss -> 2,04:1 Beides unter 3,0 — Farbe allein traegt den Zustand also nicht. Das zweite Merkmal ist deshalb geometrisch: der Rahmen wird doppelt so dick. Das Polster gibt genau den einen Pixel zurueck, den der Rahmen nimmt (border-box), damit der Knopf nicht springt und die Schrift an derselben Stelle stehen bleibt. Kein outline dafuer — das wuerde den Fokusring aus Zeile 51 ersetzen, und ein gewaehlter Knopf verloere beim Antabben seinen Ausweis. */ .wahl button[aria-pressed="true"]{ border-width:2px;padding:11px 9px; border-color:var(--hot);color:var(--hot); } .wahl.breit button{flex:1 1 100%;text-align:left;display:flex;justify-content:space-between;gap:16px;align-items:baseline;} .wahl small{font-family:var(--mono);font-size:11px;color:var(--faint);} /* outline:none stand hier ohne :focus davor — der Regler war damit fuer die Tastatur voellig unmarkiert. Die Bahn ist 1 px hoch, ein Ring dicht daran waere kaum zu sehen; deshalb 7 px Abstand: das umfasst den 20-px-Griff. */ /* Die Eingabe war 1 px hoch. Optisch stimmte das — der Griff ragt darueber hinaus —, aber die BAHN war damit nicht anklickbar: auf eine Stelle springen ging nicht, nur den Griff schieben. Der Kasten ist jetzt 24 px hoch und durchsichtig, die sichtbare Bahn zeichnet die Spur. */ input[type=range]{ -webkit-appearance:none;appearance:none;width:100%;height:24px; background:transparent;padding:0;border:none;cursor:pointer; } input[type=range]::-webkit-slider-runnable-track{height:1px;background:var(--umriss);} input[type=range]::-moz-range-track{height:1px;background:var(--umriss);} input[type=range]:focus-visible{outline:1px solid var(--hot);outline-offset:2px;} input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%; background:var(--hot);cursor:pointer;border:none; margin-top:-9.5px; /* (1 px Bahn − 20 px Griff) / 2 */ } input[type=range]::-moz-range-thumb{ width:20px;height:20px;border-radius:50%;background:var(--hot);cursor:pointer;border:none; } /* Kabelbild --------------------------------------------------------------- */ .kabelbild{width:100%;height:auto;display:block;} /* Terminal (Flash-Tool) ---------------------------------------------------- */ .terminal{border:1px solid var(--hair);border-radius:2px;overflow:hidden;} .terminal-kopf{ display:flex;align-items:center;gap:14px;padding:11px 16px;border-bottom:1px solid var(--hair); font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--faint);text-transform:uppercase; } .terminal-kopf .zustand{margin-left:auto;} .protokoll{ height:250px;overflow-y:auto;padding:16px; font-family:var(--mono);font-size:11px;line-height:1.9;color:var(--dim); } .protokoll div{white-space:pre-wrap;word-break:break-word;} .fortschritt{height:1px;background:var(--hair);overflow:hidden;} /* transform statt width: eine Breitenanimation laesst den Browser bei jedem Bild neu umbrechen. scaleX laeuft auf dem Compositor und beruehrt das Layout nicht — beim Flashen laufen daneben Schreibvorgaenge, da zaehlt es. */ .fortschritt i{display:block;height:100%;width:100%;background:var(--hot); transform:scaleX(0);transform-origin:left center;transition:transform .35s;} @media(prefers-reduced-motion:reduce){.fortschritt i{transition:none;}} .terminal-fuss{ display:flex;gap:10px;padding:16px;border-top:1px solid var(--hair);flex-wrap:wrap; } .terminal-fuss .knopf{flex:1 1 160px;} /* Hinweis ----------------------------------------------------------------- */ .hinweis{ margin-top:34px;padding-left:18px;border-left:1px solid var(--hair); font-size:14.5px;line-height:1.8;color:var(--faint);max-width:60ch; } .hinweis.wichtig{border-left-color:var(--hot);color:var(--dim);} /* Tabelle ----------------------------------------------------------------- */ .tabellenrahmen{overflow-x:auto;} table{border-collapse:collapse;width:100%;font-size:14.5px;} th,td{text-align:left;padding:12px 16px 12px 0;border-bottom:1px solid var(--hair);vertical-align:top;} th{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--faint);text-transform:uppercase;font-weight:400;} td.zahl{font-family:var(--mono);font-size:12.5px;font-variant-numeric:tabular-nums;text-align:right;padding-right:0;} /* Steuerhinweis unter einem Betrag. Stand auf drei Seiten einzeln — seit der PowerPilot-Preistabelle auch dort, also gehoert er hierher. */ .ust{font-size:12px;line-height:1.6;color:var(--faint);margin:0;} /* Fuss -------------------------------------------------------------------- */ footer.fuss{ border-top:1px solid var(--hair);margin-top:var(--luft); padding:34px 0 44px; } .fuss-in{display:flex;justify-content:space-between;gap:36px;flex-wrap:wrap;} .fuss-spalte{display:flex;flex-direction:column;gap:9px;font-size:14px;color:var(--dim);} .fuss-spalte a:hover{color:var(--bone);} .fuss-mark{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--faint);} @media (prefers-reduced-motion: reduce){ *{transition-duration:.001ms !important;animation-duration:.001ms !important;scroll-behavior:auto !important;} .rv,html.js .rv{opacity:1;transform:none;} } /* Zusagen ------------------------------------------------------------------ Drei bis vier kurze Aussagen nebeneinander, jede eine fette Zeile und ein Satz. Steht im Aufmacher von /gewerbe und /node-red und im Abschnitt "Auch einzeln" der Startseite. Hier stand an der ersten Stelle ein KENNZAHLEN-Block: grosse Ziffern, darunter eine Zeile Erklaerung. Die Form versprach Zahlen und lieferte eine Zusage ("Ihr Auftrag"), eine Belanglosigkeit ("3 Phasen" hat jede Anlage) und einen Wert, den ohne den Kleintext niemand versteht ("0 h/a"). Also keine Zahlen-Optik mehr: die Aussage traegt, nicht ihr Grad. Bewusst KEIN :hover wie bei .kachel - eine Zusage ist nichts zum Anklicken, und ein Aufleuchten unter dem Zeiger verspricht ein Ziel, das es nicht gibt. */ .zusagen{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1px;background:var(--hair);border:1px solid var(--hair); margin-top:clamp(32px,5vh,54px);} .zusage{background:var(--void);padding:24px 22px;} .zusage b{display:block;font-size:17px;font-weight:600;letter-spacing:-.01em; color:var(--bone);} .zusage span{display:block;font-size:14px;line-height:1.65;color:var(--dim); margin-top:7px;} .zusage .textlink{margin-top:12px;} /* Sechs Kacheln teilen sich schlecht auf: die Voreinstellung ergibt bei 1080 px vier Spalten, also eine zweite Reihe mit zwei Loechern. Deshalb fuer diesen Fall drei feste Spalten - 6 geht durch 3 auf. Darunter greift wieder auto-fit (zwei Spalten, drei Reihen). */ @media (min-width: 880px){ .zusagen.sechs{grid-template-columns:repeat(3,1fr);} } /* In einer .gruppe steht die Zwischenmarke schon darueber. */ .gruppe > .zusagen{margin-top:0;} /* Innerhalb EINES Abschnitts: --luft ist der Abstand ZWISCHEN Abschnitten und liest sich hier wie ein Schnitt - genau das Gegenteil dessen, was die Zusammenlegung sagen soll. */ .gruppe.eng{margin-top:clamp(38px,6vh,66px);} /* Signalkette (/node-red) -------------------------------------------------- Immer dieselbe Bauart einer Steuerung: links lesen, in der Mitte rechnen, rechts schreiben. Genau das ist der Satz, den die Seite sonst nur behauptet. Der Rahmen rollt waagrecht, statt dass die Zeichnung mitschrumpft: bei 390 px waere die 10-px-Schrift auf 4 px zusammengefallen und damit nicht mehr lesbar - eine Zeichnung, die niemand entziffern kann, ist schlechter als keine. tabindex="0" steht in der Auszeichnung, damit der Rahmen auch mit der Tastatur rollbar ist. Lesend grau (--umriss), schreibend orange (--hot). Die Richtung ist damit ohne Beschriftung erkennbar, und Orange traegt hier eine Aussage statt Schmuck: das sind die Stellen, an denen die Steuerung in die Anlage eingreift. */ .kettenfeld{margin:clamp(32px,5vh,54px) 0 0;} .kettenrahmen{overflow-x:auto;border:1px solid var(--hair);background:var(--void-2);} .kette{display:block;width:100%;min-width:780px;height:auto;} .kettenfeld figcaption{ margin-top:14px;font-size:13px;color:var(--faint);line-height:1.6;max-width:64ch; } .k-feld{fill:var(--void);stroke:var(--hair);} .k-marke{font-family:var(--mono);font-size:9px;letter-spacing:.18em;fill:var(--faint);} .k-name{font-family:var(--mono);font-size:10.5px;fill:var(--bone);} .k-neben{font-family:var(--mono);font-size:9px;fill:var(--faint);} .k-code{font-family:var(--mono);font-size:10px;fill:var(--bone);} .k-code.leise{font-size:9px;fill:var(--faint);} .k-trenn{stroke:var(--hair);stroke-width:1;} .k-lese{fill:none;stroke:var(--umriss);stroke-width:1;} .k-schreib{fill:none;stroke:var(--hot);stroke-width:1;} .k-spitze{fill:var(--umriss);} .k-spitze.heiss{fill:var(--hot);} /* Kennzeile: die harten Zahlen eines Beispiels in einer Zeile, damit die Absaetze nicht die einzige Ebene sind. Mono und tabular-nums, weil hier Werte stehen und keine Prosa. Doppelter Selektor: .zeile p (0-1-1) schlaegt .kennzeile (0-1-0) und wuerde Farbe, Groesse und max-width zurueckdrehen - dieselbe Falle wie bei .zeile p.label weiter oben. */ .zeile p.kennzeile, .kennzeile{ font-family:var(--mono);font-size:10.5px;letter-spacing:.06em; font-variant-numeric:tabular-nums;color:var(--faint); border-top:1px solid var(--hair);margin:16px 0 0;padding-top:12px; line-height:1.9;max-width:none; } /* Strecke ----------------------------------------------------------------- Die vier Schritte einer Anlage nebeneinander an einer Schiene. Die Reihenfolge traegt hier wirklich eine Aussage - ohne Messung keine Auslegung, ohne Auslegung keine Stueckliste - also darf sie auch zu sehen sein. Deshalb
    : die Reihenfolge steht in der Auszeichnung, nicht nur im Bild. Zwei Feinheiten, die etwas bedeuten: - Der erste Punkt ist gefuellt und orange. Dort faengt es an, und genau das ist der Verweis unter dem Abschnitt ("Netzmessung vereinbaren"). - Die Schiene hinter dem letzten Punkt ist gestrichelt und laeuft weiter. "Bleiben" hat kein Ende - die drei davor sind das Projekt, der vierte ist die Zeit danach. Die Schiene wird STUECKWEISE gezeichnet, ein Stueck je Halt, jedes um die Luecke nach rechts verlaengert. Eine durchgehende Linie auf dem Behaelter waere einfacher, koennte aber nicht am vierten Punkt die Strichelung beginnen: wo die vierte Spalte anfaengt, haengt von der Luecke ab und ist in Prozent nicht ausdrueckbar. */ .strecke{ --luecke:clamp(20px,3vw,44px); list-style:none;margin:0;padding:0; display:grid;grid-template-columns:repeat(4,minmax(0,1fr)); column-gap:var(--luecke);row-gap:clamp(30px,5vh,46px); } .halt{position:relative;padding-top:30px;} .halt::after{ content:"";position:absolute;top:5px;left:0;right:calc(-1 * var(--luecke)); height:1px;background:var(--hair); } .halt:last-child::after{right:0;height:0;background:none;border-top:1px dashed var(--hair);} .halt::before{ content:"";position:absolute;top:1px;left:0;width:9px;height:9px; border:1px solid var(--umriss);border-radius:50%;background:var(--void); } .halt:first-child::before{border-color:var(--hot);background:var(--hot);} .halt .label{margin-bottom:12px;} .halt h3{font-size:17px;margin-bottom:8px;} .halt p{color:var(--dim);font-size:14.5px;line-height:1.7;margin:0;} /* Zwei Spalten, dann eine. Unter 1000 px reissen vier Spalten die Ueberschriften in Einzelwoerter. */ @media(max-width:1000px){.strecke{grid-template-columns:repeat(2,minmax(0,1fr));} .halt:nth-child(2)::after{right:0;}} @media(max-width:620px){.strecke{grid-template-columns:1fr;row-gap:26px;} .halt::after{right:0;}} /* Produktraster ------------------------------------------------------------ */ .raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1px; background:var(--hair);border:1px solid var(--hair);} .kachel{background:var(--void);padding:24px 22px;display:flex;flex-direction:column;gap:10px; transition:background .3s;} .kachel:hover{background:var(--void-2);} /* Das Seitenverhaeltnis steht VOR dem Bild fest, deshalb kann beim Nachladen nichts springen, obwohl die Kacheln per Skript entstehen und kein width/height je Bild tragen. Fuellung und Zoom regelt "Bilder in Kacheln" weiter unten — hier keine zweite object-fit-Regel, die dort verliert. */ .kachel .bild{aspect-ratio:4/3;background:#131313;border:1px solid var(--hair); display:flex;align-items:center;justify-content:center;margin-bottom:6px;} .kachel .bild span{font-family:var(--mono);font-size:9px;letter-spacing:.14em;color:var(--faint);} .kachel h3{font-size:16px;font-weight:500;margin:0;} .kachel .satz{font-size:13.5px;color:var(--dim);line-height:1.65;margin:0;flex:1;} .kachel .preis{font-family:var(--mono);font-size:13px;font-variant-numeric:tabular-nums;margin-top:4px;} .kachel .preis.offen{color:var(--faint);} /* Gruppenüberschrift ------------------------------------------------------- */ .gruppe{margin-top:var(--luft);} .gruppe:first-of-type{margin-top:0;} .gruppe > .label{margin-bottom:18px;} /* Bilder in Kacheln -------------------------------------------------------- */ .kachel .bild{overflow:hidden;padding:0;} .kachel .bild img{width:100%;height:100%;object-fit:cover;display:block; transition:transform .5s cubic-bezier(.2,.8,.3,1);} .kachel:hover .bild img{transform:scale(1.04);} .dazu .bild{display:block;aspect-ratio:4/3;background:#131313;border:1px solid var(--hair); overflow:hidden;margin-bottom:4px;} .dazu .bild img{width:100%;height:100%;object-fit:cover;display:block;} /* Flash-Werkzeug ----------------------------------------------------------- */ .flash{display:grid;grid-template-columns:320px 1fr;gap:clamp(26px,4vw,48px);align-items:start;} @media(max-width:880px){.flash{grid-template-columns:1fr;}} .flash.kompakt{grid-template-columns:1fr;gap:26px;} .flash-block{padding:22px 0;border-bottom:1px solid var(--hair);} .flash-block:first-child{border-top:1px solid var(--hair);} .flash-block:last-child{border-bottom:none;} .fassungen{display:flex;flex-direction:column;margin-top:14px;max-height:250px;overflow-y:auto;} .fassung{display:flex;gap:12px;align-items:flex-start;padding:12px 12px 12px 0;cursor:pointer; border-bottom:1px solid var(--hair);transition:color .25s;} .fassung:last-child{border-bottom:none;} .fassung:hover{color:var(--bone);} .fassung input{accent-color:var(--hot);margin-top:4px;flex:none;} .fassung .kennung{font-family:var(--mono);font-size:12.5px;} .fassung .zusatz{display:block;font-size:12px;color:var(--faint);margin-top:3px;line-height:1.5;} .merker{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase; border:1px solid var(--hair);padding:1px 7px;margin-left:8px;color:var(--faint);} .merker.neu{border-color:var(--hot);color:var(--hot);} .vorauss{display:flex;flex-direction:column;gap:11px;margin-top:14px;font-size:14px;color:var(--dim);} .vorauss div{display:flex;align-items:center;gap:11px;} .punkt{width:6px;height:6px;border-radius:50%;background:var(--faint);flex:none;} .punkt.gut{background:var(--gut);} .punkt.schlecht{background:var(--warn);} .geraetzeile{display:flex;gap:26px;padding:11px 16px;border-top:1px solid var(--hair); font-family:var(--mono);font-size:10px;color:var(--faint);flex-wrap:wrap;} /* Sprungmarke für Tastatur und Vorlesegeräte ------------------------------- */ .sprung{ position:absolute;left:-9999px;top:0;z-index:100; background:var(--hot);color:var(--void); padding:12px 20px;font-size:14px;font-weight:500; } .sprung:focus{left:0;} /* Warenkorb-Zähler in der Kopfzeile ---------------------------------------- */ /* Der Zähler wird von stil/warenkorb.js selbst in die Navigation gehängt und trägt data-warenkorb-zaehler. Keine Seite muss dafür geändert werden. */ [data-warenkorb-zaehler]{display:inline-flex;align-items:center;gap:8px;} [data-warenkorb-zaehler] .merker{ margin-left:0;border-color:var(--hot);color:var(--void);background:var(--hot); font-weight:600;padding:1px 7px; } /* Kleine Bildschirme: Feinschliff ------------------------------------------ */ @media(max-width:520px){ .wahl.breit button{flex-direction:column;align-items:flex-start;gap:4px;} .laenge-eingabe{flex-wrap:wrap;gap:10px;} .datenzeile{grid-template-columns:1fr;gap:2px;} /* Einspaltig steht der Wert UNTER seiner Beschriftung, nicht daneben - dann waere rechtsbuendig sinnlos und laese sich schlechter. */ .datenzeile dd{font-size:12.5px;text-align:left;} .terminal-fuss{flex-direction:column;} .terminal-fuss .knopf{flex:1 1 auto;width:100%;} } /* Druck --------------------------------------------------------------------- */ @media print{ /* Jeder Wert ist gegen Weiss gerechnet, nicht geschaetzt: --bone #111 18,88:1 --dim #444 9,74:1 --faint #666 5,74:1 --hot #c1440e 5,12:1 --umriss #8e8e8e 3,33:1 (Bedienrahmen, Grenze 3,0 — #999 lag mit 2,89:1 knapp darunter) --gut #1e7a45 4,87:1 --warn #9a5b00 5,42:1 --gut und --warn fehlten hier ganz und blieben auf den Bildschirmwerten #5bd08a / #ffb020 stehen: auf Weiss 1,94:1 und 1,83:1. Sie tragen in .meldung.fehler und .formantwort echten Text. */ :root{--void:#fff;--void-2:#fff;--bone:#111;--dim:#444;--faint:#666; --umriss:#8e8e8e;--hair:#ccc;--hot:#c1440e;--gut:#1e7a45;--warn:#9a5b00;} body{background:#fff;color:#111;} /* Die beiden Geraetenachbauten sind aus Farbflaechen gebaut und tragen Bedienelemente — auf Papier sind sie weder lesbar noch bedienbar. Mit dem Nachbau geht auch seine Leiste und seine Bildunterschrift, die ohne ihn nichts mehr erklaeren wuerden. */ header.top nav,.knopf,.terminal,.sprung,[data-warenkorb-zaehler], .powerdot,.webui{display:none;} .rv,html.js .rv{opacity:1;transform:none;} a[href^="http"]::after{content:" (" attr(href) ")";font-size:.85em;color:#555;} } /* ==== Gliederung ================================================================== Ein Abschnittsanfang braucht ein Zeichen. Innerhalb des Inhalts liegen ueberall Haarlinien (--hair, 1.19:1) — die reichen dafuer nicht, sie sind Zierlinien. Die Abschnittslinie ist deshalb --umriss (3.11:1) und die einzige Linie der Seite, die ueber die volle Breite laeuft. Nicht am ersten Abschnitt: der Aufmacher braucht keinen Strich ueber sich. */ main > section + section{border-top:1px solid var(--umriss);} /* ==== Verdichtung: PowerPilot-Seite ================================================= */ .abb{margin:0;} .abb .rahmen{display:block;border:1px solid var(--hair);overflow:hidden;} .abb img{width:100%;} .abb figcaption{margin-top:12px;font-size:13.5px;line-height:1.6;color:var(--faint);max-width:74ch;} a.rahmen{transition:border-color .3s;} a.rahmen:hover{border-color:var(--umriss);} .abb .vollbild{display:inline;margin-left:10px;font-family:var(--mono);font-size:9px; letter-spacing:.14em;text-transform:uppercase;color:var(--faint);white-space:nowrap;} .kopf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(24px,4vw,56px);align-items:start;margin-bottom:28px;} .kopf > div > :last-child{margin-bottom:0;} .kopf h2.label{margin-bottom:10px;} .kopf .fliess{max-width:54ch;margin-bottom:0;} @media(max-width:820px){.kopf{grid-template-columns:1fr;gap:14px;}} .unter{margin-top:44px;} .doppel > .unter,.doppel > .hinweis{margin-top:0;} .unter > .label{margin-bottom:10px;} h3.gross{font-size:clamp(21px,2.2vw,26px);font-weight:600;letter-spacing:-.022em; line-height:1.18;margin:0 0 14px;max-width:22ch;} .dicht .zeile{padding:20px 0;} .doppel .liste .zeile{grid-template-columns:110px minmax(0,1fr);gap:16px;} .dicht .zeile p.label{font-size:10px;line-height:1.7;color:var(--faint);} .dicht .zeile h3{line-height:1.3;} /* Steht eine Gruppenmarke ueber den Zeilen, ruecken deren Ueberschriften eine Ebene tiefer — sonst hoert ein Vorlesegeraet zehn gleichrangige h3 und erkennt die Gruppengrenze nicht. Aussehen bleibt gleich. */ .zeile h4{font-size:19px;font-weight:500;letter-spacing:-.01em;margin:0 0 6px; text-wrap:balance;overflow-wrap:break-word;hyphens:auto;} .dicht .zeile h4{line-height:1.3;} .dicht .zeile p{line-height:1.65;} .liste.zwei{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(28px,4.5vw,60px);} .liste.zwei > .zeile{grid-template-columns:120px 1fr;gap:16px;} .liste.zwei > .zeile:last-child:nth-child(odd){grid-column:1 / -1;} @media(max-width:1000px){.liste.zwei{grid-template-columns:1fr;}} .liste.schritte{display:grid;grid-template-columns:repeat(5,minmax(0,1fr)); column-gap:clamp(16px,2.4vw,30px);border-top:0;} .liste.schritte > .zeile{grid-template-columns:1fr;gap:6px;padding:18px 0 22px; border-top:1px solid var(--hair);border-bottom:0;align-items:start; /* align-content:start, sonst teilen sich die zwei Reihen einer Zelle den Ueberschuss der hoechsten Spalte und die Ueberschriften haengen verschieden tief. Gemessen auf powerpilot.html: der erste Streifen sass 12 px hoeher als die vier anderen. */ align-content:start;} @media(max-width:900px){.liste.schritte{grid-template-columns:repeat(3,minmax(0,1fr));}} @media(max-width:620px){.liste.schritte{grid-template-columns:repeat(2,minmax(0,1fr));}} @media(max-width:460px){.liste.schritte{grid-template-columns:minmax(0,1fr);}} .doppel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start;} .doppel.buch{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);} @media(max-width:860px){.doppel,.doppel.buch{grid-template-columns:1fr;gap:34px;}} .abb.seitlich{display:grid;grid-template-columns:minmax(0,1fr) minmax(190px,240px); gap:clamp(18px,2.6vw,30px);align-items:start;} .abb.seitlich figcaption{margin-top:0;max-width:none;font-size:13px;line-height:1.6;} @media(max-width:900px){.abb.seitlich{grid-template-columns:1fr;} .abb.seitlich figcaption{margin-top:10px;}} .bildpaar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(16px,2.4vw,28px);align-items:start;} @media(max-width:720px){.bildpaar{grid-template-columns:1fr;}} .schlussraster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,4.5vw,60px);margin-top:48px;align-items:start;} @media(max-width:760px){.schlussraster{grid-template-columns:1fr;gap:44px;}} /* Anlagenschnitt =========================================================== Ein Haus bei Nacht, im Schnitt. Das Bauliche liegt in --umriss und tritt zurueck; die Geraete stehen in --bone; --hot bekommt AUSSCHLIESSLICH zwei Dinge: den DC-Pfad unter Spannung und die leuchtenden Schirme. Damit sagt die Akzentfarbe etwas, statt zu schmuecken. Keine Flaeche, kein Schlagschatten, keine zweite Farbe. Das Messnetz liegt auf --hair (1,19:1) und ist genau das, wofuer dieser Wert da ist: eine Linie ohne Bedeutung, die leise sein darf. */ .anlage{padding-bottom:var(--luft);} .schnittfeld{margin:0 0 40px;} .schnittfeld figcaption{ margin-top:14px;font-size:13px;color:var(--faint);line-height:1.6;max-width:60ch; } .schnitt{display:block;width:100%;height:auto;border:1px solid var(--hair);} .s-bau{fill:none;stroke:var(--umriss);stroke-width:2;stroke-linejoin:round;} .s-erde{stroke:var(--umriss);stroke-width:1.2;fill:none;} .s-hatch{stroke:var(--hair);stroke-width:1.2;fill:none;} .s-achse{stroke:var(--hair);stroke-width:1;stroke-dasharray:20 6 3 6;} .s-pv{stroke:var(--dim);stroke-width:3;stroke-linecap:round;} .s-rad{fill:none;stroke:var(--umriss);stroke-width:1.6;} .s-rad-i{fill:none;stroke:var(--hair);stroke-width:1.2;} /* Bauteile: Anlagenteile leiser als die eigenen Geraete. Der Unterschied ist Absicht — der Besucher soll auf einen Blick sehen, was von mir kommt. */ .s-teil{fill:none;stroke:var(--dim);stroke-width:1.6;} .s-geraet{fill:none;stroke:var(--bone);stroke-width:2;} .s-innen{fill:none;stroke:var(--hair);stroke-width:1.2;} .s-behaelter{fill:none;stroke:var(--dim);stroke-width:1.6;} .s-fuell{fill:rgba(235,234,231,.07);stroke:var(--hair);stroke-width:1;} .s-pfeil{fill:none;stroke:var(--dim);stroke-width:1.4; stroke-linecap:round;stroke-linejoin:round;} /* Die einzigen orangen Elemente */ .s-dc{fill:none;stroke:var(--hot);stroke-width:3.4;stroke-linecap:round;} .s-schirm{fill:none;stroke:var(--hot);stroke-width:2.6; stroke-linejoin:round;stroke-linecap:round;} .s-schirm-r{fill:none;stroke:var(--hot);stroke-width:3.4;stroke-linecap:round;} .s-ac{fill:none;stroke:var(--dim);stroke-width:1.8;stroke-linecap:round;} .s-daten{fill:none;stroke:var(--umriss);stroke-width:1.4;stroke-dasharray:8 7;} /* Beschriftungen in der Zeichnung. paint-order:stroke legt einen Rand in der Grundfarbe UNTER die Buchstaben - der Text schneidet sich damit selbst aus dem frei, was hinter ihm liegt. Ohne das lag "PV 9,8 kWp" mitten auf der Dachlinie und war halb unlesbar; dasselbe drohte bei jeder Kennwertzeile im Technikraum, wo Leitungen und Kaesten dicht beieinander stehen. Der Weg ueber einen Rand ist dem Verschieben vorzuziehen: eine Zeichnung mit 33 Pfaden laesst sich nicht an jeder Stelle freiraeumen, und beim naechsten Bauteil laege der Text wieder auf einer Kante. */ .s-raum,.s-mini,.s-wert{ paint-order:stroke; stroke:var(--void);stroke-width:4px;stroke-linejoin:round; } .s-raum{fill:var(--faint);font-family:var(--mono);font-size:14px; letter-spacing:.16em;text-transform:uppercase;} .s-mini{fill:var(--faint);font-family:var(--mono);font-size:13px;} .s-wert{fill:var(--bone);font-family:var(--mono);font-size:15px;} .schnitt .ballon circle{fill:var(--void);stroke:var(--umriss);stroke-width:1.4;} .schnitt .ballon text{fill:var(--dim);font-family:var(--mono);font-size:16px; text-anchor:middle;} .schnitt .ballon line{stroke:var(--hair);stroke-width:1.2;} .schnitt .ballon{cursor:pointer;} .schnitt .gruppe{transition:opacity .2s ease;} /* Querverweis Zeichnung <-> Stueckliste */ .schnitt .hell .s-geraet,.schnitt .hell .s-teil,.schnitt .hell .s-behaelter{ stroke:var(--hot);stroke-width:2.6;} .schnitt .hell .ballon circle{fill:var(--hot);stroke:var(--hot);} .schnitt .hell .ballon text{fill:var(--void);} .schnitt .gedimmt{opacity:.28;} /* Stueckliste: dieselbe Zeilenform wie ueberall auf der Seite, plus Positionsnummer und Preisspalte. SPALTEN (columns), NICHT GITTER. Hier stand einmal ein zweispaltiges Grid, und das war der Grund, warum dieser eine Abschnitt 46 % der ganzen Startseite ausmachte: in einem Gitter wird jede ZEILE so hoch wie ihr hoechster Eintrag. Neben einem dreizeiligen Text klaffte deshalb ueber dem einzeiligen Nachbarn ein Loch von zweihundert Pixeln - elfmal. Mit columns fliessen die Eintraege einfach nacheinander weiter, ohne Zeilenraster und ohne Loecher. Nebenbei stimmt damit auch die Lesefolge einer nummerierten Liste: 1 bis 6 links, 7 bis 11 rechts, statt 1-2 / 3-4 ueber Kreuz. */ .anlage .stueckliste{ border-top:1px solid var(--hair); columns:2;column-gap:clamp(24px,4vw,56px); } @media(max-width:860px){.anlage .stueckliste{columns:1;}} .anlage .pos{ display:grid;grid-template-columns:38px 1fr auto;gap:clamp(12px,2vw,22px); padding:16px 0;border-bottom:1px solid var(--hair);align-items:baseline; outline-offset:2px; /* Ein Eintrag darf nicht zwischen zwei Spalten zerrissen werden. */ break-inside:avoid; } /* .gruppe IST HIER ZWEIMAL VERGEBEN, und das hat 625 px gekostet. Im Anlagenschnitt bezeichnet sie ein anklickbares Bauteil - sowohl das in der Zeichnung als auch die Zeile in der Legende tragen sie, weil stil/anlage.js beide darueber findet und miteinander verbindet. Weiter oben in dieser Datei steht aber .gruppe{margin-top:var(--luft)} fuer Gruppenueberschriften. Am SVG- tut das nichts (SVG kennt kein margin), an der Legendenzeile schon: jeder der elf Eintraege bekam 125 px Abschnittsabstand ueber sich. Gemessen 1215 px Listenhoehe bei 1072 px Inhalt. Der Abstand zwischen den Zeilen kommt aus padding und der Trennlinie, nicht von hier. */ .anlage .pos.gruppe{margin-top:0;} .anlage .pos:hover,.anlage .pos.hell{background:var(--void-2);} .anlage .pos-nr{ font-family:var(--mono);font-size:13px;color:var(--faint);margin:0; font-variant-numeric:tabular-nums; } .anlage .pos h3{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 8px;margin:0 0 3px; font-size:16px;} /* Legendenzeile, kein Fliesstext: eine Zeile je Position. Die ausfuehrliche Beschreibung steht auf der Produktseite, die daneben verlinkt ist. */ .anlage .pos p{color:var(--dim);font-size:13.5px;line-height:1.6;margin:0;max-width:42ch;} .anlage .pos-weg{margin-top:7px;} .anlage .pos-preis{ font-family:var(--mono);font-size:14px;color:var(--dim);white-space:nowrap; font-variant-numeric:tabular-nums; } .anlage .ausserdem{ margin-top:34px;color:var(--dim);font-size:15px;line-height:2.1;max-width:64ch; } @media(max-width:720px){ .anlage .pos{grid-template-columns:40px 1fr;gap:12px;} .anlage .pos-preis{grid-column:2;margin-top:8px;} } /* Kundenart: Privat oder Gewerbe ------------------------------------------ Eine schmale Leiste ueber der Hauptnavigation. Zwei ECHTE VERWEISE auf zwei Bereiche, kein Schalter mit gemerktem Zustand — das ist Absicht: - Ein Zustand im localStorage klebt. Wer ihn einmal umgelegt hat, sieht Monate spaeter eine andere Seite und weiss nicht mehr, warum. - Ein Verweis laesst sich teilen. Wer einem Betrieb die Gewerbeseite schickt, schickt eine Adresse, die dort auch ankommt. - Ohne JavaScript funktioniert er trotzdem. Der aktive Eintrag traegt aria-current="page" und wird damit auch angesagt, nicht nur eingefaerbt. Die Trefferflaeche ist 44 px hoch (WCAG 2.5.8), auch wenn der Text nur 11 px misst — sonst ist er am Telefon nicht zu treffen. */ /* Die Leiste sitzt INNERHALB von .wrap — Breite und Seitenrand kommen von dort, sie duerfen hier nicht ein zweites Mal gesetzt werden. */ .kundenart{border-bottom:1px solid var(--hair);display:flex;gap:2px;} .kundenart a{font-family:var(--mono);font-size:11px;letter-spacing:.14em; text-transform:uppercase;color:var(--faint); display:inline-flex;align-items:center;min-height:44px;padding:0 14px; border-bottom:1px solid transparent;margin-bottom:-1px;transition:color .3s;} .kundenart a:first-child{padding-left:0;} .kundenart a:hover{color:var(--dim);} .kundenart a[aria-current="page"]{color:var(--bone);border-bottom-color:var(--hot);} @media(max-width:680px){ .kundenart a{font-size:10px;letter-spacing:.1em;padding:0 10px;} }