/* ========================================================================= KMU Software — Stylesheet Die Vergleichstabelle ist die Startansicht. Alles andere ist Beiwerk und sitzt unterhalb. Gestaltung: Schweizer Typografie, Haarlinien, ein Akzent. ========================================================================= */ /* ============================================================== DIE PALETTE BERNCON-FARBEN, ZWEI MODI, EIN UMSCHALTER. Die Werte kommen aus der Hausvorlage: berncon/slides/berncon-master.html fuehrt beide Faelle als --bg/--panel/--line/--ink/--blue, und diese Datei uebersetzt sie in die Marken, die dieses Stilblatt an rund 1400 Stellen benutzt. Uebersetzt und nicht ersetzt: die Namen hier bleiben, damit der Farbwechsel eine Aenderung an EINER Stelle ist und nicht an 1400. WAS SICH INHALTLICH AENDERT: der Akzent ist nicht mehr rot, sondern das berncon-Blau. Das hat eine Folge, die man wissen muss — auf dieser Website hiess Rot dreierlei: «von Ihnen gewaehlt» in der Tabelle, «zwingende Anforderung» in der Schweiz-Leiste, Akzent im Kopf. Die ersten zwei sind jetzt blau, und das ist gut: die dritte Bedeutung, das Schweizerkreuz in der Wortmarke und die rote Leiste, behalten ihr eigenes Rot (--ch-red). Rot heisst damit nur noch eines: Schweiz. ZWEI BLOECKE UND NICHT DREI. Der Hellfall steht in :root, der Dunkelfall in html[data-theme="dark"] — einmal. Kein zweiter Dunkelblock unter prefers-color-scheme: das waere derselbe 25-Marken-Satz zweimal, und zwei Kopien laufen auseinander. Statt dessen entscheidet ein Skript im Kopf (siehe head() in build.js): gespeicherte Wahl, sonst Systemeinstellung. DER PREIS: ohne JavaScript bekommt ein Besucher mit dunkler Systemeinstellung den Hellfall. Das ist keine Stoerung, sondern eine verpasste Vorliebe — und es ist der guenstigere der beiden Fehler. */ :root { /* NEUTRALER GRUND, NICHT HELLBLAU. Der erste Anlauf nahm das --bg2 der Hausvorlage (#eef3fb). Damit war die ganze Seite einfarbig blau — Grund, Linien, Akzent — und sie las sich wie ein Dashboard statt wie eine Publikation. Warmgrau plus Rot war vorher Papier und Tinte, also ZWEI Temperaturen; ein neutraler Grund plus Blau hält diese Spannung und überlässt dem Akzent die Hausfarbe. */ --bg: #f2f3f5; --surface: #ffffff; --surface-2: #f8f9fa; /* Die Tinte bleibt navyfarben: sie ist die einzige Stelle, an der die Hausfarbe auch im Grossen wirkt, und auf Neutralgrau liest sie 15.3:1. */ --ink: #0c1c36; --ink-soft: #3e5677; /* GEMESSEN UND KORRIGIERT: das blaugraue #8093ae der Vorlage erreichte auf dem Seitengrund nur 2.82:1 — bei einer Marke, die Unterzeilen, Tabellennotizen und Feldbezeichnungen traegt, ist das der teuerste Fehler der ganzen Palette. #666c76 erreicht 4.76:1 auf dem Grund und 5.29:1 auf der Karte. */ --muted: #666c76; --line: #e6e8ec; --line-hard: #d3d6dc; /* DER AKZENT IST WIEDER ROT. Zwischenzeitlich stand hier das berncon-Blau; die Marke bleibt navy (--ink, --bar-bg) und traegt damit weiter das Haus, aber das Signal ist rot. Es ist genau der Ton von vorher, und das ist gerechnet und nicht bequem: #d8232a erreicht auf dem NEUEN, neutralen Seitengrund 4.51:1 und auf der Karte 5.01:1. Auf dem alten Warmgrau waren es 4.54 — der Wechsel des Grundes kostet also drei Hundertstel und keine Lesbarkeit. WAS MAN WISSEN MUSS: mit einem roten Akzent traegt Rot auf dieser Website wieder drei Bedeutungen — «von Ihnen gewaehlt» in der Tabelle, «zwingende Anforderung» in der Schweiz-Leiste, und Marke im Kopf. Das war vor dem Farbwechsel so und ist damit kein neuer Zustand; als Unterschied bleibt, dass --ch-red mit 5.88:1 tiefer sitzt als der Akzent mit 5.01:1. */ /* ================================================================== AKZENT AUF BLAU, 24. August 2026. Der Ton kommt aus den BERNCON-Vorlagen (--blue in slides/_block-template.html): #1D5FD1 auf hellem Grund. Gemessen: 5.60:1 auf Weiss, 5.02:1 auf der gedaempften Flaeche — beides ueber der Schwelle und praktisch gleichauf mit dem alten Rot (5.01). WARUM DER WECHSEL MEHR IST ALS GESCHMACK: mit rotem Akzent trug Rot auf dieser Website DREI Bedeutungen — «von Ihnen gewaehlt» in der Tabelle, «zwingende Anforderung» in der Schweiz-Leiste und die Marke im Kopf. An drei Stellen im Stilblatt musste sich der Code deshalb ausdruecklich vom Akzent wegdrehen (siehe die Notizen bei .info, beim Wegweiser und bei .lx-hart). Mit Blau als Akzent ist Rot wieder frei fuer EINE Aussage. ================================================================== */ --accent: #1D5FD1; --accent-ink:#ffffff; /* --accent-soft und --accent-line WAREN VERSCHWUNDEN. Sie werden an vier Stellen benutzt (Kartenmarken, Vergleichspreisband, Bestandspille, Beitragsverweis im Lexikon) und standen beim Zusammenfuehren der beiden Arbeitsstaende nicht mehr in der Datei — eine undefinierte Marke faellt lautlos auf «nichts» zurueck, und ein «1px solid» ohne Farbe nimmt currentColor. Hier stehen sie wieder, in beiden Faellen. */ --accent-soft:#EAF2FD; --accent-line:#C7DBF8; /* DAS GRUEN IST DAS ALTE. #1e9e4b kommt aus der Hausvorlage und ist dort eine Diagrammfarbe auf dunklem Grund; auf Weiss erreicht es 3.47:1. Der Haken IST der Inhalt der Vergleichstabelle, hunderte Male je Seite — das ist die schlechteste Stelle, an der man Kontrast verlieren kann. #1a7a4c ist der Ton, der vorher hier stand: 5.34:1 auf der Karte. */ --good: #1a7a4c; /* Warnton fuer die Entwurfskennzeichnung und die Marke «zwingend». EIGENE Farbe und nicht --accent: der Akzent heisst «von Ihnen gewaehlt», und ein Entwurf ist keine Wahl. */ /* Auch der Warnton kommt aus der Vorlage und ist dort ein Diagrammgelb: 3.68:1 auf Weiss. #9a6b00 ist der Ton von vorher, 4.69:1. */ --warn: #9a6b00; /* SCHRIFT AUF DEM WARNTON. Sie stand als festes #fff in .lx-hart, und im Hellen war das richtig: weiss auf #9a6b00 erreicht 4.69:1. Im Dunkeln ist der Warnton ein Bernsteingelb (#f4b23e), und weiss darauf erreicht 1.86:1 — die Marke «zwingend» war dort praktisch unlesbar. Eine feste Farbe auf einer Flaeche, die je Modus wechselt, ist immer dieser Fehler. */ --warn-ink: #ffffff; /* Die fünf Töne der Musterbetriebe. Eine REIHENFOLGE von hell nach dunkel mit der Betriebsgrösse, keine Palette — damit man ohne Nachschlagen sieht, ob der Preis mit dem Betrieb wächst. Jetzt Blaugrau statt Warmgrau, damit die Reihe zur Palette gehört und nicht daneben steht. Sie stehen hier und nicht in der Grafik, weil beide Fassungen sie brauchen: das Punktdiagramm im CSS und ECharts, das sie zur Laufzeit ausliest. Eine Quelle, kein Abgleich. */ --ton-0: #c3d2e6; --ton-1: #9bb0cc; --ton-2: #6e87a8; --ton-3: #41597e; --ton-4: #0c1c36; --shadow: 0 1px 2px rgba(12,28,54,.05), 0 8px 24px -12px rgba(12,28,54,.16); --shadow-lg: 0 24px 60px -20px rgba(12,28,54,.30); --r: 10px; --r-s: 6px; --maxw: 1560px; --head-h: 46px; /* Kopf- und Fussleiste sind IMMER dunkel, auch im Hellmodus. Eigene Variablen, damit die Elemente darin nicht auf die Seitenpalette zeigen — sonst hätte jede spätere Farbänderung dort unlesbaren Text erzeugt. Der Wert ist das dunkelste Blau der Hausvorlage. */ --bar-bg: #06142a; --bar-ink: #eaf1fb; --bar-muted: #a6bcd8; /* GEMESSEN: #23426b erreichte auf dem Leistengrund 1.81:1 und war damit der schwaechste Rahmen der ganzen Palette — und er umreisst BEDIENELEMENTE: Sprachwaehler, Hell/Dunkel-Umschalter, Suchfeld, Tastaturhinweis. Fuer den Umriss eines Bedienelements verlangt WCAG 1.4.11 3:1, nicht 4.5 — es geht nicht um Lesbarkeit, sondern darum, dass man das Element ueberhaupt als Element erkennt. #456a96 erreicht 3.29 im Hellen und 3.08 im Dunkeln. */ --bar-line: #456a96; /* EIN EIGENER TON FUER DIE NAVIGATION, zwischen Marke und Gedaempftem. Vorher trugen die drei Punkte --bar-muted — GENAU denselben Ton wie das zweite Wort der Wortmarke. Gemessen sind das 9.47:1 auf dem Leistengrund, also weit ueber der Schwelle von 4.5: das Problem war nie die Lesbarkeit, sondern der RANG. Wenn Marke und Navigation gleich hell und gleich schwer gesetzt sind, hebt sich nichts ab und alles wirkt mittelgrau. #c3d4ea bringt 12.20:1 im Hellen und 11.44:1 im Dunkeln — heller als vorher, aber weiter unter der Marke (16.19), und damit bleibt die Rangfolge sichtbar statt nur behauptet. */ --bar-nav: #c3d4ea; /* DER AKZENT FUER DEN DUNKLEN GRUND. Er fehlte, und darum stand an vier Stellen auf dem dunklen Band noch das alte Rot #ff5b62 — die Hausfarbe von vor dem Wechsel auf Blau. var(--accent) ist hier keine Loesung: #1D5FD1 erreicht auf dem Leistengrund gerechnete 3.14:1 und ist fuer 11.5px Schrift zu dunkel. #6FB2FF bringt 8.34:1 und ist derselbe Ton, den der Dunkelmodus ohnehin als Akzent fuehrt. Ein Wert fuer beide Schemata, weil das Band in beiden dunkel ist. */ --bar-accent: #6FB2FF; /* DAS SCHWEIZERKREUZ UND DIE ROTE LEISTE BLEIBEN ROT. Sie sind keine Hausfarbe, sondern eine Landesfahne — und seit der Akzent blau ist, heisst Rot auf dieser Website genau eines: Schweiz. Der Ton ist tiefer als ein Signalrot, damit weisser Text darauf 5.9:1 erreicht statt 4.6:1; bei 13px Schrift ist das der Unterschied zwischen lesbar und knapp. */ --ch-red: #c8102e; color-scheme: light; } html[data-theme="dark"] { --bg: #06142a; --surface: #0f2444; --surface-2: #15315a; --ink: #eaf1fb; --ink-soft: #a6bcd8; /* GEMESSEN UND KORRIGIERT, wie im Hellen: #647fa0 erreichte auf der gedaempften Flaeche nur 3.14:1 und auf der Karte 3.75:1 — und diese Marke traegt Unterzeilen, Bildunterschriften und Feldbezeichnungen. Beim Farbwechsel war nur der HELLE Wert nachgezogen worden, der dunkle blieb stehen; das ist die Sorte Fehler, die eine Palette mit zwei Bloecken erzeugt. #8ba3bf erreicht 7.09 auf dem Grund, 5.96 auf der Karte und 5.00 auf der gedaempften Flaeche. */ --muted: #8ba3bf; --line: #1a3458; --line-hard: #23426b; /* AUCH IM DUNKELN ROT, und auch hier der Ton von vorher: #ff4b52 auf dem navyfarbenen Grund 5.59:1, auf der Karte 4.70:1. Rot auf tiefem Navy ist ausserdem die Kombination, die die Schweiz-Leiste ohnehin fuehrt — der Dunkelmodus sieht damit nicht wie ein zweites Haus aus. --accent-ink bleibt fast schwarz: weisse Schrift auf diesem Rot erreicht im Dunkelmodus zu wenig, #1a0002 darauf 6.11:1. */ /* DUNKELMODUS: der hellere BERNCON-Ton. #6FB2FF erreicht auf dem navyfarbenen Grund 8.29:1 und auf der Karte 6.97:1 — deutlich mehr Luft als das alte Rot mit 5.59, weil Blau im Dunkeln aufgehellt werden darf, ohne grell zu werden. --accent-ink bleibt fast schwarz: dunkle Schrift auf diesem Blau traegt, weisse nicht. */ --accent: #6FB2FF; --accent-ink:#04142b; --accent-soft:#12294a; --accent-line:#2c4f7d; /* Auch hier das Gruen von vorher: #69dc43 der Vorlage ist auf Navy grell und liest sich als Signal, nicht als Haken. */ --good: #3ec287; --warn: #f4b23e; /* Auf dem hellen Bernstein traegt nur dunkle Schrift: #06142a darauf erreicht 9.89:1. */ --warn-ink: #06142a; /* Im Dunkelmodus kehrt sich die Reihe um: dort ist HELL das Kräftige. Die Bedeutung bleibt — der grösste Betrieb sticht hervor. */ --ton-0: #2a4670; --ton-1: #3d5f8f; --ton-2: #5c82b4; --ton-3: #8aa9d0; --ton-4: #eaf1fb; --shadow: 0 1px 2px rgba(0,0,0,.45), 0 10px 30px -14px rgba(0,0,0,.75); --shadow-lg: 0 30px 70px -24px rgba(0,0,0,.85); /* Im Dunkelmodus liegt der Seitengrund tiefer als die Leisten — sie heben sich dadurch ab, statt mit dem Grund zu verschmelzen. */ --bar-bg: #0a1b33; --bar-ink: #eaf1fb; --bar-muted: #a6bcd8; --bar-line: #456a96; --bar-nav: #c3d4ea; --bar-accent: #6FB2FF; /* GEMESSEN: auf #e2415a erreichte weisse Schrift nur 4.09:1 — und die Schweiz-Leiste ist eine ganze Flaeche voll weissem Fliesstext (.chside-panel). #cf1730, der Ton von vor dem Farbwechsel, bringt 5.50:1. ch-red ist ueberall FLAECHE und nie Schrift; geprueft wird darum, was darauf steht, und nicht der Ton gegen die Karte. */ --ch-red: #cf1730; color-scheme: dark; } *, *::before, *::after { box-sizing: border-box; } /* Muss vor allen display-Regeln stehen — Klassen wie .drawer setzen display, was das hidden-Attribut sonst überschreiben würde. */ [hidden] { display: none !important; } html { scroll-behavior: smooth; height: 100%; } /* Genau EINE vertikale Scrollleiste: das Fenster selbst scrollt nicht, gescrollt wird ausschliesslich der Bereich .scroll. Nur so bleiben Tabellenkopf, erste Spalte und Gruppentitel klebend. */ body { margin: 0; height: 100%; overflow: hidden; display: flex; flex-direction: column; background: var(--bg); color: var(--ink); font-family: "Inter", "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; font-size: 15.5px; line-height: 1.6; -webkit-font-smoothing: antialiased; font-feature-settings: "kern" 1, "liga" 1, "tnum" 1; } h1, h2, h3 { line-height: 1.15; letter-spacing: -.02em; margin: 0; font-weight: 620; } p { margin: 0; } /* DER UNTERSTRICH DER VERWEISE, EINMAL ABGELEGT. Er stand als color-mix direkt in der Regel darunter, und der Ausloeser der roten Leiste im Vorspann braucht genau denselben — er ist ein Verweis in allem ausser dem href. Als eigene Eigenschaft steht der Wert an einer Stelle statt an zwei. In beiden Farbschemata richtig, weil --accent dort je neu gesetzt wird und das color-mix erst bei der Verwendung aufgeloest wird. */ :root { --link-line: color-mix(in srgb, var(--accent) 55%, transparent); } a { color: inherit; text-decoration-color: var(--link-line); text-underline-offset: 3px; } a:hover { color: var(--accent); } button, input, select { font: inherit; color: inherit; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; } .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; } /* Für Screenreader und die Dokumentgliederung da, sichtbar nicht. Nicht display:none — das nähme das Element auch der Sprachausgabe. */ .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* ---------------------------------------------------------------- header */ /* Spalte, damit die Fusszeile bei kurzem Inhalt nach unten gedrückt wird: main nimmt mit flex 1 0 auto den freien Rest, die Fusszeile schliesst daran an. Sie klebt NICHT — bei langem Inhalt scrollt sie mit und ist erst am Ende zu sehen. Bei kurzem Inhalt steht sie trotzdem am unteren Rand, statt in der Seitenmitte zu hängen. */ .scroll { flex: 1 1 auto; overflow: auto; overscroll-behavior: contain; display: flex; flex-direction: column; } .scroll > main { flex: 1 0 auto; } /* Inhalte unter der Tabelle bleiben beim waagrechten Scrollen an ihrem Platz */ .below { position: sticky; left: 0; } /* DASSELBE FUER ALLES UM DIE TABELLE HERUM — siehe die Regeln bei 900px. Gescrollt wird nicht die Tabelle, sondern der ganze Bereich .scroll; beim Wischen nach links wandern Titel, tagline, Querverweisband und Legende mit hinaus, waehrend die Tabelle daneben stehenbleibt. Oben klafft dann eine leere Flaeche. */ /* Deckende dunkle Fläche. Der frühere backdrop-filter ist entfallen: bei einer deckenden Farbe hat er keine Wirkung und kostet nur Rechenzeit. */ /* DIE BREITE DER BILDLAUFLEISTE ALS AUSGLEICH RECHTS, und das ist der Grund fuer eine sonst unerklaerliche Verschiebung von 7 Pixeln. Gemessen bei einem Fenster von 1582px: die Huelle der Kopfleiste sass links auf 171, die der Fusszeile und die Inhaltsspalte auf 164. WARUM. Die Kopfleiste liegt AUSSERHALB von .scroll, die Fusszeile und der ganze Inhalt liegen DARIN. .scroll hat die senkrechte Bildlaufleiste, ist also 14 Pixel schmaler als das Fenster — und weil beide Huellen mit «margin: 0 auto» in ihrem jeweiligen Raum zentriert sind, landen sie 7 Pixel auseinander. Nicht die Fusszeile war falsch, sondern die Leiste. --sbw wird in search.js gemessen (dem einzigen Skript, das jede Seite laedt) und ist ohne JavaScript 0 — dann steht die Leiste wie vorher, also 7 Pixel daneben. Das ist der richtige Rueckfall: eine Verschiebung um sieben Pixel ist ein Schoenheitsfehler, ein Ausgleich mit geratener Zahl waere einer mit Folgen. */ /* ============================================================================ DIE KOPFLEISTE BLEIBT BEIM SEITENWECHSEL STEHEN Verlangt am 24.08.2026: ein Klick in der Leiste soll nur den Inhalt darunter austauschen, nicht die Leiste selbst. GELOEST MIT SEITENUEBERGAENGEN (View Transitions) und NICHT mit einem Skript-Router, und der Grund ist die Bauart dieser Website: jede Seitenart laedt ANDERE Skripte — app.js auf Tabellenseiten, start.js auf der Startseite, shell.js sonst, dazu search.js und der Zaehlpunkt. Wer den Inhalt per Skript austauscht, muss all das von Hand nachziehen; vergisst er eines, bleibt eine Tabelle tot, und zwar erst nach dem zweiten Klick, wo es niemand mehr sucht. Mit dem Uebergang laedt der Browser die Seite weiterhin GANZ — alle Skripte laufen wie bisher —, aber er blendet nicht um, sondern behaelt die Elemente mit gleichem view-transition-name stehen. Fuer den Besucher ist die Leiste damit unbewegt, und fuer den Bau aendert sich nichts. Browser ohne diese Unterstuetzung wechseln wie bisher hart. Kein Bruch, nur kein Uebergang. Und wer Bewegung abgestellt hat, bekommt gar keinen. ============================================================================ */ @view-transition { navigation: auto; } @media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } } .site-head { view-transition-name: kopfleiste; flex: none; z-index: 40; height: var(--head-h); padding-right: var(--sbw, 0px); background: var(--bar-bg); color: var(--bar-ink); border-bottom: 1px solid var(--bar-line); } /* SO BREIT WIE DIE SEITE DARUNTER. .wrap gibt 1560px her, die Abschnitte der Startseite laufen aber auf 1240 — die Leiste stand damit rund 160 Pixel je Seite weiter aussen als alles, was sie ueberdachte. Wortmarke und die drei Kreise sassen sichtbar neben der Spalte. DREI SPALTEN STATT EINER REIHE, und zwar «1fr auto 1fr»: die Navigation steht damit in der MITTE DER LEISTE und nicht in der Mitte des Restes. Mit «margin-inline: auto» in einer Flex-Reihe waere sie zwischen Marke (187px) und Werkzeugen (110px) zentriert und damit um rund 40 Pixel aus der Mitte gerutscht — sichtbar, sobald man darauf achtet. NUR AB 761px. Darunter bricht die Leiste um (zwei Zeilen), und dort ist Flex mit flex-wrap richtig; ein Raster mit drei Spalten kennt keinen Umbruch. */ .head-inner { display: flex; align-items: center; gap: 22px; height: var(--head-h); max-width: 1240px; } /* DIE KLAPPHUELLE um Navigation und Werkzeuge. AUF DEM SCHIRM IST SIE NICHT DA: `display: contents` loest sie auf, und ihre beiden Kinder bleiben Kinder der Leiste. Ohne das haette das Raster darueber («1fr auto 1fr») ein Element fuer drei Spalten, und die Navigation stuende nicht in der Mitte der Leiste, sondern links in der ersten Spalte. AUF DEM TELEFON wird sie zum Aufklappfeld und traegt beides, was der Knopf oeffnet: die vier Wege und die drei Werkzeuge. Die Regeln dafuer stehen am Dateiende unter «Kopfleiste auf dem Telefon». */ .head-klapp { display: contents; } @media (min-width: 761px) { .head-inner { display: grid; grid-template-columns: 1fr auto 1fr; } .brand { justify-self: start; } .site-nav-blog { justify-self: center; } /* HIER STAND «margin-left: 0», um das auto der Grundregel zurueckzunehmen — und es tat nichts: die Grundregel steht 130 Zeilen SPAETER und gewann bei gleicher Spezifitaet. Das auto ist jetzt dort entfallen, wo es stand; gebraucht wird es nirgends mehr (Begruendung an der Grundregel). */ .head-right { justify-self: end; } } .brand { display: flex; align-items: center; gap: 9px; text-decoration: none; font-weight: 640; letter-spacing: -.02em; flex: none; } .brand:hover { color: inherit; } /* DAS KREUZ IN DER WORTMARKE IST ROT, nicht --accent. Es war --accent, und solange der Akzent rot war, fiel das nicht auf; mit dem berncon-Blau stand im Kopf ein blaues Schweizerkreuz. Eine Landesfahne ist keine Hausfarbe. --ch-red ist derselbe Ton wie in der Schweiz-Leiste, und das Weiss darin ist fest: --accent-ink ist im Dunkelmodus fast schwarz und haette das Kreuz verschluckt. */ /* DIE MARKE: das offene Radarzeichen, vereinfachte Fassung fuer 19 Pixel. Kein gefuelltes Feld mehr — die Leiste selbst ist der Grund. Die Farben sind die der dunklen Leiste: helle Ringe, damit die Silhouette traegt, und der Fund im Schweizer Rot. Rot steht damit nur noch an EINER Stelle im Kopf, und zwar an der, die etwas bedeutet. ZAHL FUER ZAHL DIESELBE wie assets/icon-radar-klein.svg. Wird eine geaendert, gehoert die andere nachgezogen. */ /* GROESSE UND HOEHE, gemessen und nicht geschaetzt (25. August 2026). 19 Pixel waren neben 15.5px Schrift zu klein; 22 stehen zur Wortmarke wie 1.8 zu 1 ihrer Versalhoehe und bleiben in der 46px-Leiste ruhig. DER HALBE PIXEL NACH OBEN ist kein Geschmack. `align-items: center` richtet das Zeichen an der ZEILENBOX aus (10.59..35.39), die Tinte von «Software Radar» steht aber bei 16.59..28.59 — der Schriftzug hat keine einzige Unterlaenge, seine Masse sitzt also hoeher als seine Box. Gemessen mit canvas.measureText gegen die abgegriffene Grundlinie: 0.4 Pixel Versatz. Verschoben wird mit top und nicht mit margin — ein negativer Rand aendert die Margenbox, an der die Zentrierung rechnet, und haette den halben Effekt. */ .brand-mark { width: 22px; height: 22px; flex: none; display: block; position: relative; top: -.4px; } .brand-mark svg { display: block; width: 100%; height: 100%; } /* ZAHL FUER ZAHL DIESELBE ZEICHNUNG wie assets/favicon.svg (Entwurf 35): blaue Scheibe, ein Ring, weisser Strahl mit Schweif, Punkt in der Mitte. Wird eine der beiden geaendert, gehoert die andere nachgezogen. DIE SCHEIBE TRAEGT #1D5FD1 fest und nicht var(--accent): im Dunkelmodus waere der Akzent das helle #6FB2FF, und weisse Striche darauf verschwaenden. Die Marke sieht in beiden Farbschemata gleich aus — so soll eine Marke sein. */ .bm-feld { fill: #1D5FD1; } .bm-ring { fill: none; stroke: #fff; stroke-opacity: .55; stroke-width: 3; } .bm-schweif { fill: #fff; fill-opacity: .68; } .bm-strahl { stroke: #fff; stroke-width: 5; stroke-linecap: round; } .bm-mitte { fill: #fff; } /* DAS ZWEITE WORT DER MARKE IN VOLLER HELLIGKEIT. Es stand auf --bar-muted, demselben Ton wie die Navigation daneben — «Softwarevergleich» und «Vergleichen» waren nicht auseinanderzuhalten, und die Marke war damit halb so hell wie ihr eigener erster Teil. Jetzt traegt sie durchgehend --bar-ink; unterschieden wird durch das GEWICHT (640 gegen 500), nicht durch die Farbe. Eine Marke ist das Helle in einer Leiste, nicht das Gedaempfte. */ .brand-text em { font-style: normal; color: var(--bar-ink); font-weight: 480; } /* Bereichsnavigation — seit dem 29. Juli 2026 IN GEBRAUCH: sie trägt das Menü über alle Kategorien (catMenu in build.js). Vorher stand darin ein nackter Pfeil auf die Startseite, und das war der einzige Weg von einer Kategorie fort. flex:none ist Absicht: schrumpfbar gemacht, verschwand die Navigation bei 390px lautlos auf Breite 0. Ein fehlender Navigationspunkt ist schlimmer als ein sichtbarer Umbruch — auf schmalen Schirmen weicht darum die Beschriftung und nicht die Navigation. */ /* Kein position: relative — das Feld hängt an .dd (position: relative dort) und damit am Wähler selbst, wie beim Sprachwechsler. */ .site-nav { display: flex; gap: 4px; flex: none; } /* Die Pillenleiste traegt seit dem 23. August 2026 ZWEI Punkte (Marktdaten und Blog). 4px genuegen fuer Aufklappfelder mit Rahmen, nicht fuer zwei nackte Woerter — die lesen sich dann als eines. */ /* HIER STAND EINE HAARLINIE ZWISCHEN MARKE UND NAVIGATION. Auf Wunsch des Betreibers noch am selben Tag entfernt. Was sie sollte — sagen, wo die Marke aufhoert — tun jetzt die zwei Aenderungen, die mit ihr kamen und bleiben: die Marke ist das Hellste in der Leiste (--bar-ink, 16.19:1), die Navigation liegt messbar darunter (--bar-nav, 12.20:1). Die Rangfolge kommt damit aus der Helligkeit und nicht aus einem Strich. */ /* 34 STATT 18 PIXEL. Drei Punkte in der Leistenmitte brauchen mehr Luft als drei Punkte am linken Rand: dort trennte sie die Wortmarke daneben, hier trennt sie nichts als der Abstand selbst. */ .site-nav-blog { gap: 34px; } /* DIE REGELN DES KATEGORIENMENUES STEHEN NICHT HIER, sondern unten bei den Wählern, gleich nach .dd-lang. Sie standen an dieser Stelle und wurden sämtlich überschrieben: das Kategorienfeld und .dd > summary hatten DIESELBE Spezifität, und bei Gleichstand gewinnt die spätere Regel. Also gewannen die weisse Fläche, die 13.5px, die 6/30/6/13-Polsterung und der helle Rahmen aus .dd > summary — deshalb stach der Wähler auf der dunklen Leiste als heller Fleck heraus, obwohl dort background: none stand. Das Feld selbst ist am 23. August 2026 entfallen; die Falle gilt weiter für alles, was in der Leiste steht. Derselbe Fallstrick ist im Stilblatt schon zweimal vermerkt: bei .chside (zwei Klassen im Wähler) und bei .wrap-full.layout. Reihenfolge ist hier Bedeutung. */ /* ENGER GESETZT, BEVOR ETWAS WEICHT. Gemessen bei 390px, der verbreitetsten Telefonbreite: es weichen erst die Abstaende, dann der Schriftgrad der Marke; das kostet niemanden etwas. */ @media (max-width: 430px) { /* «.head-inner { gap: 7px }» STAND HIER UND TAT NICHTS. Die 760er-Regel weiter oben setzt gap: 14px, steht spaeter in der Datei und hat dieselbe Spezifitaet — bei Gleichstand gewinnt die spaetere. Auf 390 Pixeln galten also 14 statt der hier gemessenen 7. Der Wert steht jetzt im Nachrang am Dateiende; gefunden von pruefungen/pruefe-stilrang.js. */ /* HIER VERSCHWAND «Blog» — und das darf es nicht mehr. Es konnte weichen, solange das Kategorienfeld daneben stand: dort war der Blog eine Zeile, gleich unter der Startseite, also ein zweiter Weg. Seit das Feld entfallen ist, gibt es diesen Weg nicht mehr, und die Regel haette nicht «Blog» versteckt, sondern die GANZE Navigation — .site-nav-blog traegt jetzt alle drei Punkte. Auf einem 390px breiten Telefon waere die Leiste damit leer gewesen: Marke, Suche, Sprache, Umschalter, und kein Weg irgendwohin. Die Punkte bleiben stehen; die Suche liegt seit dem Umbau in der zweiten Zeile und nimmt ihnen keinen Platz mehr weg. */ /* Danach fehlten bei 390 und 393 noch fuenf Pixel — und das sind die verbreitetsten Telefonbreiten ueberhaupt. Sie kommen aus dem Schriftgrad der Wortmarke statt aus ihrem Verschwinden: einen Namen kleiner zu setzen ist ein Nachgeben, ihn wegzunehmen ein Verzicht. Der Abstand zum Zeichen gibt den Rest. */ .brand { gap: 7px; } .brand-text { font-size: 14.5px; } } /* Ganz schmal: die Wortmarke weicht, das Zeichen bleibt und führt weiter auf die Startseite. Gemessen wird sie erst unter 384px zum Problem. */ @media (max-width: 384px) { .brand-text { display: none; } } /* .head-meta IST ENTFALLEN (23. August 2026). Darin standen Zahl und Stand der Seite — auf der Kategorieseite «28 Buchhaltungsprogramme · Stand Juli 2026». Das war Auskunft ueber EINE Seite in einer Leiste, die auf allen 835 gleich sein soll, und es war der Grund, warum der Suche die Breite fehlte. Die Angaben stehen jetzt dort, wo sie gelten: .start-zahlen unter dem Vorspann der Startseite, .cat-stand neben der Trefferzahl ueber der Tabelle — und der Stand ohnehin auf jeder Seite in der Fusszeile. */ /* KEIN margin-left: auto MEHR — entfallen am 26. August 2026. Es stand hier «UNBEDINGT und nicht nur im schmalen Fall», weil die Leiste damals eine Flexreihe war und auf der Startseite das dehnbare Suchfeld fehlte: ohne den Rand klebten «DE» und der Umschalter hinter «Blog». Beide Gruende sind weg. Ab 761px ist .head-inner ein RASTER mit drei Spalten, und dort setzt `justify-self: end` die Werkzeuge an ihre Kante — der automatische Rand schiebt sie in diesem Raster nur aus der Spalte. Darunter liegen sie im Klappfeld und tragen dessen eigene Raender. Und es tat ohnehin das Gegenteil des Gewollten: die 761er-Abfrage nahm es mit «margin-left: 0» zurueck, stand aber VOR dieser Regel und verlor. Gefunden von pruefungen/pruefe-stilrang.js, nachdem der Melder auch min-width-Abfragen erfasste. */ .head-right { display: flex; align-items: center; gap: 10px; flex: none; } /* Suche in der Kopfleiste. Das Feld sitzt auf dunklem Grund und nutzt darum die bar-Variablen; die Trefferliste liegt als Fläche DARÜBER und nutzt die Seitenpalette — sonst wäre sie im Hellmodus dunkel und stäche heraus. DIE MITTE DER LEISTE, mit einer Mindestbreite, die nicht unterschritten wird. Sie stand bis zum 23. August 2026 rechts aussen mit flex: 0 1 210px — als einziges nachgiebiges Stueck neben vier festen, und darum als erstes zusammengedrueckt. Die beiden Aussenabstaende auf auto stellen sie zwischen Navigation und Sprachwahl in die Mitte; min-width haelt sie dort, und weichen muss jetzt die Navigation. */ /* KLEINER UND RECHTS. Sie stand mit 440px in der MITTE der Leiste, als dehnbares Stueck zwischen festen. Das war besser als «rechts aussen und als erstes zusammengedrueckt», hat die Leiste aber zerrissen: drei Navigationspunkte links, ein breites Feld in der Mitte, zwei runde Knoepfe rechts — vier Gruppen statt zwei. Jetzt sitzt sie rechts bei den Knoepfen, und die Leiste hat zwei Seiten: Wortmarke und Navigation links, Werkzeuge rechts. */ /* DAS FELD LIEGT IM AUFKLAPPFELD und nicht mehr in der Leiste. Es war ein 300px breites Stueck zwischen Navigation und Werkzeugen — und auf der Startseite gar keines. Jetzt ist es ueberall dasselbe: ein Kreis mit einer Lupe ganz rechts, der ein Feld aufklappt. Kein flex und kein margin mehr: es ist kein Kind der Leiste, sondern des Panels, und dort nimmt es die ganze Breite. */ .hsearch { position: relative; width: 100%; } /* Lupe im Feld: reines Markup statt Bilddatei, damit sie die Schriftfarbe mitnimmt und beim Fokus mit aufhellt. pointer-events aus, sonst schluckt sie den Klick, der ins Eingabefeld gehört. */ .hs-ico { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 12px; height: 12px; pointer-events: none; fill: none; stroke: var(--bar-muted); stroke-width: 1.7; stroke-linecap: round; transition: stroke .14s; } .hsearch input { -webkit-appearance: none; appearance: none; width: 100%; padding: 4px 13px 4px 30px; line-height: 1.5; border-radius: 999px; font-size: 12.5px; color: var(--bar-ink); background: color-mix(in srgb, var(--bar-ink) 7%, transparent); border: 1px solid var(--bar-line); transition: background-color .14s, border-color .14s; } .hsearch input::placeholder { color: var(--bar-muted); } .hsearch input::-webkit-search-decoration, .hsearch input::-webkit-search-cancel-button { -webkit-appearance: none; } /* 40 statt 30 Prozent: bei 30 erreichte der Rahmen 2.48:1 und lag damit unter den 3:1 fuer den Umriss eines Bedienelements. 40 bringt 3.47 im Hellen und 3.48 im Dunkeln. Der RUHENDE Rahmen ist --bar-line und damit schon geheilt. */ .hsearch input:hover { border-color: color-mix(in srgb, var(--bar-ink) 40%, transparent); } .hsearch input:focus { outline: none; border-color: color-mix(in srgb, var(--bar-ink) 45%, transparent); background: color-mix(in srgb, var(--bar-ink) 12%, transparent); } .hsearch input:focus ~ .hs-ico, .hsearch:hover .hs-ico { stroke: var(--bar-ink); } /* Das Tastenkuerzel am rechten Rand des Feldes. Gedaempft und klein: es ist ein Angebot an die, die es kennen, und darf niemanden vom Feld ablenken. Das Skript blendet es aus, sobald jemand tippt oder das Feld waehlt — dort laeuft der geschriebene Text hin. */ /* HIER STANDEN DIE REGELN FUER .hs-kbd — den Tastaturhinweis «Strg K» im Suchfeld. Entfallen mit dem Hinweis selbst: er stand IM Feld und nahm dort Platz, den der Platzhalter braucht, und ein Hinweis auf eine Tastenkombination gehoert nicht in das Feld, das sie oeffnet. Das Tastenkuerzel funktioniert weiter (search.js). */ /* SO BREIT WIE DAS FELD, und an dessen Kanten ausgerichtet. Vorher hing die Liste mit fester Breite an der RECHTEN Kante — richtig, solange das Feld rechts aussen stand und schmaler war als die Liste. Seit das Feld in der Mitte steht und 440px misst, sass die Liste versetzt darunter: sie begann nicht dort, wo der Text steht, den sie beantwortet. */ .hs-panel { position: absolute; top: calc(100% + 7px); left: 0; right: 0; z-index: 70; min-width: 0; background: var(--surface); color: var(--ink); border: 1px solid var(--line-hard); border-radius: var(--r-s); box-shadow: var(--shadow-lg); padding: 4px; display: grid; gap: 1px; max-height: calc(100vh - 80px); overflow-y: auto; } .hs-item { display: flex; flex-direction: column; gap: 1px; padding: 7px 10px; border-radius: 4px; text-decoration: none; color: inherit; } .hs-item:hover, .hs-item.on { background: var(--surface-2); color: inherit; } .hs-n { font-size: 13.5px; font-weight: 560; } .hs-s { font-size: 11.5px; color: var(--muted); } /* Gruppentitel in der Vorschau, in der Grammatik der uebrigen Kleintitel der Seite: versal, gesperrt, gedaempft. Nur wenn es mehr als eine Art zu zeigen gibt — ein Titel ueber allem sagt nichts. */ .hs-gruppe { margin: 6px 0 2px; padding: 0 10px; font-size: 9.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); } .hs-gruppe:first-child { margin-top: 2px; } /* DIESER BLOCK STEHT HIER UND NICHT OBEN BEI .head-inner — aus demselben Grund, der im Stilblatt schon viermal vermerkt ist: gleiche Spezifitaet, und bei Gleichstand gewinnt die SPAETERE Regel. Oben notiert verlor er gegen .hsearch (flex: 0 1 440px, margin-inline: auto), und das Feld stand auf dem Telefon als 250px breiter Klotz in der Mitte statt ueber die ganze Zeile. Wer ihn verschiebt, macht den Fehler zurueck. */ /* ---- DIE LEISTE AUF SCHMALEN SCHIRMEN: EIN UMBRUCH ---- Bis zum 23. August 2026 hatte sie deren vier (980, 800, 660, 430), und jeder war ein Symptom: die Leiste trug zu viel. Sie tut das nicht mehr — Zahl, Stand und Filterschalter stehen auf der Seite, von der sie handeln, und die Suche ist ein Kreis von 30 Pixeln. SEIT DEM 26. AUGUST 2026 EINE ZEILE, und die Wege liegen hinter einem Klappknopf. Vorher waren es zwei: oben Wortmarke und die drei Kreise (Sprache, Hell/Dunkel, Suche), darunter die vier Punkte der Navigation — nebeneinander 187 + 216 + 100 Pixel und damit rund 110 zu viel auf einem 390 Pixel breiten Telefon. Der Knopf loest genau diese Rechnung: er kostet 34 Pixel statt 216, und die Leiste sank von 89 auf 47. Der Knopf, das Kaestchen und das Aufklappfeld stehen am Dateiende unter «Kopfleiste auf dem Telefon». Getrennt, weil sie neu sind — die Hoehe aber steht hier, weil hier der Wert stand, der ihr widersprach. HIER STAND EINE DRITTE ZEILE FUER DAS SUCHFELD. Sie ist mit dem Feld in der Leiste entfallen: die Suche klappt jetzt aus einem Kreis auf und braucht keine Zeile mehr, die sie freihaelt. Zwischenzeitlich stand --head-h darum auf 121px, und auf der Startseite (wo es das Leistenfeld nie gab) blieben 50 Pixel dunkle Flaeche leer stehen. */ @media (max-width: 760px) { /* EINE ZEILE, ALSO WIEDER 46 PIXEL — derselbe Wert wie auf dem Schirm. Hier stand 88px, und das war richtig, solange die Leiste umbrach. Mit dem Klappknopf bricht sie nicht mehr, und der Wert wurde vom Mass zur Luege: gemessen 89 Pixel dunkle Flaeche ueber einem 34 Pixel hohen Inhalt. DER WERT TRAEGT ZWEI WEITERE REGELN, darum steht er als Zahl und nicht als Rechnung: die Suchvorschau haengt sich darunter (top: --head-h + 6) und Sprungziele lassen so viel Rand (scroll-margin-top). Beide werden mit 46 wieder richtig — mit 88 sprangen sie 42 Pixel zu tief. `height: auto` an der Leiste bleibt stehen: die Hoehe kommt weiter vom Inhalt, nur setzt .head-inner sie jetzt selbst. Ein zu kleiner Wert hat hier schon zweimal die Zeile abgeschnitten. UND GAR KEINE POLSTERUNG MEHR HIER. Hier stand `padding: 4px 0`, und die Kurzform nahm der Leiste die seitliche Polsterung von .wrap — im Bild klebten Marke und Klappknopf an den Fensterkanten. Sie steht jetzt nirgends mehr in der Leiste: .wrap traegt sie, 20 Pixel und ab 620 noch 14, und damit sitzt die Wortmarke ueber derselben Kante wie der Text darunter. Ein zweites Mal 20 hier haette bei 390 Pixeln 6 Pixel Versatz bedeutet. */ :root { --head-h: 46px; } .site-head { height: auto; } .head-inner { height: var(--head-h); flex-wrap: nowrap; align-content: center; gap: 14px; } /* DIE REIHENFOLGE IM UMBRUCH, gesetzt und nicht dem Zufall gelassen. Ohne sie brach die Leiste so: Wortmarke allein in Zeile eins (die 216 Pixel der drei Punkte passen nicht mehr daneben), Navigation und Werkzeuge in Zeile zwei. Rechts der Marke stand damit eine halbe leere Zeile, und der Hell/Dunkel-Umschalter sass in der Mitte der Leiste statt oben rechts. Jetzt: Marke und Werkzeuge oben, darunter die Wege, darunter die Suche. */ /* HIER STANDEN «.head-right { order: 1 }» UND «.site-nav-blog { order: 2 }». Sie ordneten den Umbruch, als Navigation und Werkzeuge noch Kinder der Leiste waren. Seit dem 26. August 2026 liegen beide in .head-klapp und damit im Aufklappfeld; in der Leiste stehen nur Wortmarke und Klappknopf, und zwei Teile brauchen keine Ordnung. Die Reihenfolge IM FELD steht am Dateiende. */ /* HIER STAND «.hsearch { flex: 1 0 100%; order: 3 }» — das Suchfeld nahm auf schmalen Schirmen eine eigene Zeile ueber die ganze Breite. Entfallen mit dem Feld in der Leiste: es liegt jetzt im Aufklappfeld und ist dort so breit wie das Panel. */ /* Tippflaechen: mit 4px Polsterung war das Feld 29px hoch. Auf einem Bildschirm, der mit dem Finger bedient wird, ist das zu knapp — 36px sind das Mindeste, das sich sicher treffen laesst. */ .hsearch input { min-height: 36px; padding-top: 0; padding-bottom: 0; } /* HIER STAND «.dd-lang > summary { width: 34px; height: 34px }», und es tat zweierlei nicht: es verlor gegen die 30px der Grundregel weiter unten (gleiche Spezifitaet, spaetere Stelle), und es ist seit dem 26. August 2026 ohnehin gegenstandslos — die drei Werkzeuge liegen im Klappfeld und tragen dort 36 Pixel (.head-klapp .dd-lang > summary, zwei Klassen, gewinnt zweifach). Nicht in den Nachrang uebernommen, sondern entfallen: ein Wert, der nirgends mehr gilt, gehoert nicht verschoben. */ /* Das Tastenkuerzel weicht: wer die Seite auf dem Telefon liest, hat keine Strg-Taste. Ein Angebot, das niemand annehmen kann, ist nur Beiwerk im Feld. */ } .hs-none { padding: 9px 10px; font-size: 12.5px; color: var(--muted); } /* Letzte Zeile im Aufklappen: führt auf die Ergebnisseite. Abgesetzt, weil sie etwas anderes tut als ein Treffer — sie springt nicht, sie zeigt alle. */ .hs-all { display: block; margin-top: 3px; padding: 8px 10px; border-radius: 4px; border-top: 1px solid var(--line); font-size: 12px; font-weight: 560; color: var(--muted); text-decoration: none; } .hs-all:hover, .hs-all.on { background: var(--surface-2); color: var(--accent); } /* ------------------------------------------------------------ Ergebnisseite */ .res-h { margin-top: 30px; } .res-h:first-child { margin-top: 22px; } .res-grid { display: grid; gap: 0; margin-top: 6px; } .res-item { display: flex; flex-direction: column; gap: 2px; padding: 12px 0 13px; border-top: 1px solid var(--line); text-decoration: none; color: inherit; } a.res-item:hover .res-n { color: var(--accent); } .res-n { font-size: 15px; font-weight: 620; } .res-s { font-size: 13px; color: var(--muted); } /* Ein Produkt steht in mehreren Kategorien — jede als eigener Verweis */ .res-cats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; } .res-cats a { padding: 3px 10px; border-radius: 999px; font-size: 12.5px; border: 1px solid var(--line-hard); text-decoration: none; color: var(--ink); } .res-cats a:hover { border-color: var(--accent); color: var(--accent); } .res-hint { margin-top: 20px; font-size: 14px; color: var(--muted); } /* DIE LUPE OHNE FELD IST ENTFALLEN (23. August 2026). Unter 660px schrumpfte das Suchfeld hier auf 34px und fuhr erst beim Antippen aus. Das war die beste Loesung, solange die Suche sich die Leiste mit Zahl, Stand und Filterschalter teilte — aber es machte das wichtigste Werkzeug der Seite auf dem Telefon unsichtbar. Jetzt bekommt sie dort eine eigene Zeile in voller Breite (siehe den Block bei 760px weiter oben), und die Leiste traegt dafuer nichts mehr, was nur einer Seite gehoert. */ /* Der Umschalter Hell/Dunkel ist im Juli 2026 entfallen. Die dunkle Palette oben bleibt in Gebrauch — sie wird aus der Systemeinstellung gesetzt (prefers-color-scheme), nicht mehr von Hand gewählt. */ /* Die Bedienleiste (.controls / .ctrl-inner / .ctrl-row / .ctrl-label) ist am 29. Juli 2026 entfallen. Ihr Inhalt ist gewandert: «Ich bin» und «Sortieren nach» ins Filterpanel, der Panelschalter in die schwarze Kopfzeile, Trefferzahl und Schweiz-Wähler in den Seitenkopf (.cat-head weiter unten). Übrig war ein weisser Streifen mit Haarlinie um eine vierstellige Zahl. */ /* Die zwei Hauptfilter «Ich bin» und «Ich suche» als Dropdown */ /* ================= Filterpanel links, Tabelle rechts ================= Nach der Bauform, die Facettenfilter überall haben — und die meine erste Fassung verfehlte: KÄSTCHEN LINKS, Beschriftung, ZAHL RECHTSBÜNDIG. Eine Zeile, eine Höhe. Die Zahlen stehen in einer festen Spalte und bilden dadurch eine lesbare Kolonne; das ist der Unterschied zwischen «aufgeräumt» und «zusammengewürfelt». Vorher standen Beschriftung UND Zahl links und dahinter zwei Textpillen — bei 264px Panelbreite brach damit jede Zeile um. Das Kästchen ist «zwingend»: ein Kästchen filtert, das ist die Erwartung. «wichtig» ist ein kleiner Nebenschalter am rechten Rand — es sortiert nur und darf die Zeile nicht dominieren. Was beide tun, sagt der Hinweis über der Liste, einmal statt vierzehnmal. Breite 300px: bei deutschen Beschriftungen tragen 240px nicht. Gemessen am längsten Fall bleiben so 180px für den Text — genug für eine Zeile. ---------------------------------------------------------------------- */ /* ZWEI Klassen im Wähler, nicht eine. .wrap-full setzt padding: 0, damit die Tabelle bis an den Rand scrollen kann — und es steht WEITER UNTEN im Stilblatt. Bei gleicher Spezifität gewinnt die spätere Regel, also verlor der linke Aussenabstand des Panels jedes Mal. Mit .wrap-full.layout sind es zwei Klassen gegen eine, und die Reihenfolge im Blatt spielt keine Rolle mehr. */ .wrap-full.layout { /* 196px: die Beschriftungen sind auf kurze Wörter gekürzt, und seit die Zahl dem Text folgt statt am rechten Rand zu stehen, braucht die Spalte keine Breite mehr für Leerraum zwischen beiden. Der Platz gehört der Tabelle. */ /* Die Panelbreite als Variable: die Kleberegeln weiter unten brauchen sie, und sie wechselt mit dem Panelzustand. */ --fp: 196px; display: grid; grid-template-columns: var(--fp) minmax(0, 1fr); /* KEIN Abstand zwischen Panel und Tabelle und keiner links davor: die weisse Flaeche laeuft von der linken Fensterkante bis nach rechts durch, geteilt von einer einzigen Haarlinie. Mit Abstaenden zeigte sich der graue Untergrund als senkrechte Streifen zwischen Panel, Leiste und Tabelle — drei Zonen, wo eine Arbeitsflaeche sein soll. Der Aussenabstand steckt jetzt IM Panel. */ gap: 0; /* stretch statt start: das Panel reicht damit von der Bedienleiste bis zum unteren Ende der Tabelle, und seine Trennlinie läuft über die ganze Höhe. Mit «start» endete es dort, wo sein Inhalt endete. */ align-items: stretch; /* Links derselbe Aussenabstand wie bei jedem anderen Inhalt (.wrap hat 20px). Rechts bleibt es bei 0: dort ist die Tabelle, und die soll die Breite behalten. */ padding-left: 0; } /* minmax(0, 1fr) statt 1fr: sonst zieht die breite Tabelle das Raster auf und das Panel wird gequetscht. */ .wrap-full.layout.fp-zu { --fp: 0px; grid-template-columns: var(--fp) minmax(0, 1fr); gap: 0; padding-left: 0; } .layout.fp-zu .fpanel { display: none; } /* KATEGORIE OHNE LINKE SPALTE (categories.js: panel: false). Anders als fp-zu ist das kein Zustand, den der Besucher umschaltet, sondern eine Eigenschaft der Seite — darum eine eigene Klasse und keine Voreinstellung von fp-zu. Sie steht schon im ausgelieferten Quelltext, damit die Leiste beim Laden nicht kurz aufblitzt. EINE Spalte statt einer auf 0px geschrumpften: ein Rasterplatz mit Breite 0 bleibt ein Rasterplatz und erbt den Spaltenabstand. */ .wrap-full.layout.nopanel { --fp: 0px; grid-template-columns: minmax(0, 1fr); gap: 0; padding-left: 0; } .layout.nopanel .fpanel { display: none; } /* Der Abstand zur Haarlinie der Leiste faellt auf Seiten ohne Leiste weg — die Regel dazu steht im Block ab 901px, wo die 16px ueberhaupt gelten. */ /* --fp AUF NULL, und das ist der Teil, den man leicht vergisst: die Variable beschreibt nicht nur die Breite der Spalte, sondern wird weiter unten fuer den klebenden Kopf und das Querverweisband GERECHNET — «width: calc(var(--vis) - var(--fp))» und «left: var(--fp)». Ohne diese Zeile blieb rechts ein Streifen von genau 196px leer, weil die Seite Platz fuer eine Leiste abzog, die es nicht mehr gibt. Gesehen im Bild, nicht im Quelltext. */ /* KEIN eigener Scrollbereich und kein sticky. Beides war der Versuch, die Filter im Bild zu halten — und beides kostete mehr, als es brachte: eine zweite Scrollleiste neben der der Seite, und ein Panel, das mitten in der Tabelle endete. Jetzt ist es eine volle Spalte, die mit der Seite scrollt. */ /* WEISS wie die Bedienleiste und die Tabelle: die drei bilden EINE Arbeitsflaeche auf dem grauen Untergrund der Seite, getrennt nur durch die Haarlinie. --surface-2 (#fafaf8) waere die Alternative, liegt aber nur zwei Prozent neben Weiss — das liest sich als Versehen, nicht als Entscheidung. Und es ist die Farbe des Zeilen-Hovers: als Grundfarbe des Panels waere der Hover unsichtbar. Weiss als Grund und #fafaf8 im Hover ist die einzige Kombination, in der beides funktioniert. */ .fpanel { min-width: 0; background: var(--surface); border-right: 1px solid var(--line); } .fpanel[hidden] { display: none; } /* LINKS 14px, nicht die 20px der uebrigen Seite: das Panel ist dicht gesetzt, und ein Einzug, der zum Fliesstext passt, wirkt hier als Loch. Die Trefferflaeche der Zeilen ragt weiterhin 6px darueber hinaus. */ .fp-scroll { padding: 12px 10px 22px 14px; } .fp-group { margin: 0 0 14px; } .fp-group h4 { margin: 0 0 3px; font-size: 9.5px; letter-spacing: .09em; text-transform: uppercase; font-weight: 650; color: var(--muted); } /* Eine Kriterienzeile. Feste Höhe, damit die Liste eine Kolonne bildet. Das Raster hält die Zahl und den Nebenschalter in einer Spalte — mit flex wanderten sie je nach Textlänge. */ /* DIE ZAHL FOLGT DEM TEXT, sie steht nicht am rechten Rand. Vorher nahm die Beschriftung 1fr und die Zahl sass in einer eigenen Spalte davor: bei «CRM 4» lagen damit 60px Leerraum zwischen Wort und Zahl, und die Zahl las sich als Angabe zur Spalte statt zum Kriterium. Jetzt ist die Beschriftung so breit wie ihr Text (max-content, aber schrumpfbar), die Zahl folgt unmittelbar, und der verbleibende Platz fällt DAHINTER an. Der Preis dafür ist bewusst: die Zahlen bilden keine ruhige Spalte mehr. Sie gehören zum Wort, nicht zur Liste. Nur das «!» bleibt am rechten Rand — es ist ein Schalter, und Schalter müssen dort liegen, wo die Hand sie erwartet. */ .fp-row { display: grid; grid-template-columns: minmax(0, max-content) 1fr 18px; align-items: center; gap: 6px; min-height: 28px; } /* Die Trefferflaeche ragt 6px ueber den Text hinaus, ohne ihn einzuruecken: der Text sitzt damit auf denselben 20px wie jeder andere Inhalt der Seite. */ .fp-row { margin: 0 -6px; padding: 0 6px; } .fp-row:hover { background: var(--surface-2); border-radius: 4px; } /* Die ganze Beschriftung ist Teil des Kästchens: ein Klick auf den Text setzt das Kriterium. Kleinere Trefferflächen sind der häufigste Mangel solcher Listen. */ .fp-lab { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 11.5px; line-height: 1.3; cursor: pointer; padding: 2px 0; } /* TINTE, nicht Akzent. Die Regel dieser Seite: Tinte heisst «gesetzt», Rot heisst «filtert weg». Das Kaestchen setzt (wichtig), das «!» filtert (zwingend) — vorher trug das Kaestchen Rot und das «!» Tinte, also genau verkehrt. */ .fp-lab input { accent-color: var(--ink); width: 14px; height: 14px; flex: none; margin: 0; cursor: pointer; } .fp-txt { min-width: 0; } /* Gesetzt: die Beschriftung tritt hervor, ohne Farbe zu verbrauchen. */ .fp-row-imp .fp-txt { font-weight: 560; } .fp-row-req .fp-txt { font-weight: 600; color: var(--ink); } /* Die Zahl: so viele blieben übrig, wenn das Kriterium zwingend gesetzt wäre. LINKSBUENDIG, damit sie am Wort klebt und nicht am Rand — rechtsbündig war sie an eine Spalte gebunden, die es nicht mehr gibt. Gleichbreite Ziffern bleiben: sie halten die Zahl selbst ruhig, wenn sie von 9 auf 10 wechselt. */ .fp-n { text-align: left; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; } /* «wichtig» — Nebenschalter. Sortiert nach oben, filtert nicht. Bewusst leise: ein Ring, kein gefüllter Knopf, solange er aus ist. */ .fp-imp { width: 18px; height: 18px; padding: 0; border-radius: 50%; border: 1px solid var(--line-hard); background: none; color: var(--muted); font: inherit; font-size: 10px; font-weight: 700; cursor: pointer; display: grid; place-items: center; justify-self: end; } .fp-imp:hover { border-color: var(--ink); color: var(--ink); } .fp-imp.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } /* Fuehrt ein Kriterium auf null, ist NUR «!» abgeschaltet — das Kaestchen bleibt. Einen Wunsch zu aeussern kann nie eine leere Tabelle ergeben, und die ganze Zeile auszugrauen haette diese Moeglichkeit verdeckt. Die Null traegt die Aussage: die Bedingung ist in diesem Bestand nicht zu haben. */ .fp-n-null { color: var(--accent); } /* ALLE — kein Zahlenwert, also auch nicht als Zahl gesetzt. Kleiner, gesperrt und in Grossbuchstaben liest es sich als Vermerk und nicht als Wert, der in der Zahlenspalte mitzaehlt. Die Grossschreibung kommt aus dem Stilblatt und nicht aus den Sprachdateien: dort steht «alle», «tous», «tutti», «all» in natuerlicher Schreibung, und wer die Regel entfernt, bekommt lesbaren Text statt geschriener Wortfetzen. */ .fp-n-alle { font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase; font-weight: 660; color: var(--muted); } .fp-imp:disabled { opacity: .35; cursor: not-allowed; } /* Budget und «nur Unterschiede»: dieselbe Sorte Filter, darum im Panel — aber abgesetzt, weil sie nicht zur Kriterienliste gehören. */ .fp-block { margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--line); display: grid; gap: 12px; } @media (max-width: 900px) { /* Schmale Geräte: EINE Spalte, das Panel wird ein Blatt über der Tabelle. Das Verdecken kommt hier zurück — unvermeidlich. Abgemildert dadurch, dass die Trefferzahl in der Leiste oben stehen bleibt und mitläuft. */ /* AUCH HIER zwei Klassen: die Grundregel oben ist .wrap-full.layout, und eine Regel mit nur .layout käme dagegen nicht an — die 20px linker Abstand wären auf schmalen Geräten stehengeblieben und hätten die Tabelle verschoben. */ .wrap-full.layout { grid-template-columns: minmax(0, 1fr); gap: 0; padding-left: 0; } /* DREI KLASSEN, aus demselben Grund wie eine Zeile darueber — und diesmal reichten zwei nicht: die Grundregel «.layout-main { padding-left: 16px }» steht weiter UNTEN im Stylesheet und gewinnt bei gleichem Gewicht. Die 16px blieben also stehen, obwohl hier seit je das Gegenteil steht. Gemessen begann die Tabelle bei x=16, und der Kopf mit «width: 100vw» ragte genau um diese 16px rechts aus dem Bild: «Schweizer Besonderheiten» stand als «Schweizer Besonderheiter» da. */ .wrap-full.layout .layout-main { padding-left: 0; } /* z-index 30: ÜBER der Tabelle (deren klebende Köpfe reichen bis 8), aber UNTER dem Seitenkopf. Vorher stand hier 60. Der Kopf hat 40, ist als Flex-Kind mit z-index aber ein eigener STAPELRAUM — alles darin, auch ein Panel mit 60 oder 80, wird mit seinen 40 verrechnet. Das Filterblatt gewann damit gegen jedes aufgeklappte Kopfmenü: das Kategorienblatt war unter 900px ab etwa 40 Prozent Fensterhöhe verdeckt, der Sprachwechsler ebenso. Im Sichttest bei 380px gesehen. Eine höhere Zahl am Panel hilft nicht, nur eine kleinere hier. */ .fpanel { position: fixed; inset: auto 0 0 0; z-index: 30; background: var(--surface); border-right: 0; border-top: 1px solid var(--line-hard); box-shadow: 0 -8px 24px rgba(0, 0, 0, .16); border-radius: var(--r) var(--r) 0 0; } /* Das Blatt MUSS innen scrollen — es liegt fest am unteren Rand und kann nicht wachsen. Das ist der Unterschied zur Spalte auf breiten Schirmen, die mit der Seite scrollt und darum keine eigene Leiste braucht. dvh und nicht vh: auf dem Telefon faehrt die Adressleiste beim Scrollen ein und aus, und vh rechnet mit dem GROESSTEN Stand. Das Blatt waere in dem Moment hoeher als der sichtbare Bereich, und seine unterste Zeile laege unter dem Bildschirmrand. */ .fp-scroll { max-height: 62vh; max-height: 62dvh; overflow-y: auto; overscroll-behavior: contain; padding: 16px 18px 22px; } .wrap-full.layout.fp-zu { grid-template-columns: minmax(0, 1fr); } /* UMGEKEHRTE VORGABE AUF SCHMALEN GERAETEN: das Blatt ist zu, bis es ausdruecklich offen ist. Auf breiten Schirmen gilt weiter das Gegenteil — dort steht das Panel als Spalte neben der Tabelle und verdeckt nichts, hier legt es sich darueber. Das kostet die Regel nichts an Zugaenglichkeit: ohne JavaScript filtert das Panel nicht, ein sichtbares waere also ein Angebot, das nicht eingeloest wird — und es laege ueber dem einzigen Inhalt, den die Seite ohne Skript wirklich hat. */ .fpanel { display: none; } .layout.fp-auf .fpanel { display: block; } /* ---- Was beim Seitwaertswischen stehenbleiben muss --------------------- Auf dem Telefon ist jede zweite senkrechte Wischbewegung ein wenig schraeg. Gemessen wanderten Titel, tagline, Querverweisband und Legende dabei um 700px hinaus, und oben blieb eine leere Flaeche stehen — waehrend die Tabelle daneben ordentlich weiterlief. WARUM «position: sticky» ALLEIN NICHT REICHTE: ein klebendes Element kann seinen eigenen Container nicht verlassen. .layout-main und main sind nur so breit wie die Spalte (375px) und wandern selbst mit; ein Kind darin bleibt hoechstens innerhalb dieser 375px stehen. Deshalb steht dieselbe Absicht in .below schon lange im Stylesheet, ohne je gewirkt zu haben. Die Gruppentitel der Tabelle kleben dagegen richtig — ihr Container ist eine Zelle mit colspan ueber die ganze Tabellenbreite. Genau das wird hier nachgebaut: die Huellen bekommen Inhaltsbreite, die klebenden Elemente darin werden auf die Bildschirmbreite begrenzt. Nicht geaendert wird, WER scrollt. Dass der ganze Bereich .scroll scrollt und nicht die Tabelle, ist die Bedingung dafuer, dass Tabellenkopf und erste Spalte kleben — und zu wissen, welcher Anbieter in der Spalte steht, wiegt auf einem Telefon schwerer als ein Titel, der stehenbleibt. NUR .layout-main, NIEMALS main ODER .view. Beide gibt es auf jeder Seite. «width: max-content» auf main gab der Startseite ihre Desktop-Breite von 1240px zurueck — und weil body den Ueberlauf abschneidet, brach dort nichts mehr um, es war schlicht abgeschnitten. .layout-main steht nur auf Kategorie- und Kriterienseiten, also genau dort, wo eine breite Tabelle ueberhaupt vorkommt. Was UNTER der Tabelle steht — Legende, Verweis auf den Marktbefund — bleibt damit ungeschuetzt und wandert weiter mit. Das ist der bewusste Rest: es liegt ausserhalb von .layout-main, und dafuer muesste die Huelle der ganzen Seite verbreitert werden. Am oberen Rand, der immer im Bild ist, wiegt es schwer; unterhalb der Tabelle scrollt man ohnehin zurueck. */ /* min-width STEHT NICHT MEHR HIER, sondern EINMAL an der Grundregel von .layout-main. Sie stand an DREI Stellen mit zwei Werten: 100% hier, 100% in der 901er-Abfrage, und 0 an der Grundregel — die spaeter in der Datei steht und darum beide Male gewann. Der Container war also nie mindestens so breit wie das Fenster, obwohl genau das der Zweck dieses Abschnitts ist («darum wird hier der CONTAINER verbreitert»). */ .layout-main { width: max-content; } .cat-head, .querband { position: sticky; left: 0; width: 100vw; max-width: 100vw; } } /* ========== WAAGRECHT SCROLLEN, OHNE DEN SEITENKOPF ZU VERLIEREN ========== Die Vergleichstabelle wird bis zu 6500px breit, .scroll rollt sie waagrecht. Seitenkopf, Trefferzeile und Querverweisband wanderten dabei mit hinaus: bei Spalte 20 stand ueber der Tabelle ein leeres graues Band, und man wusste nicht mehr, welche Kategorie man vor sich hat. Fuer schmale Geraete ist das behoben (Regel weiter oben, max-width 900px), fuer den Desktop war es offen. DIE REGEL, DIE ALLES ERKLAERT: ein klebendes Element verlaesst niemals seinen Container. Der Tabellenkopf klebt, weil die Tabelle ueber die ganze Scrollbreite reicht; der Seitenkopf klebte nicht, weil .layout-main nur so breit war wie das Fenster — er scrollte mitsamt seinem Container weg. Darum wird hier der CONTAINER verbreitert und nicht eine Regel gestapelt. Genau denselben Griff macht die Mobilregel oben, mit derselben Begruendung. left: var(--fp) und nicht 0: links steht die Filterspalte. Sie ist ein Rasterfeld und kann selbst nicht kleben — ein Rasterfeld ist der Bezugsrahmen seines Inhalts. Sie scrollt also weg, und der Kopf klebt dort, wo sie war. Der negative Aussenabstand gleicht die 16px Polsterung von .layout-main aus, damit der Kasten buendig beginnt; die Innenpolsterung haelt den TEXT an derselben Stelle wie zuvor. */ @media (min-width: 901px) { /* min-width: 100% steht an der Grundregel — siehe die Notiz in der 900er-Abfrage darueber. */ .layout-main { width: max-content; } /* MIT DEM RASTERWAEHLER DAVOR: .querband traegt weiter unten im Blatt eine eigene Regel mit «left: 0» und gleicher Spezifitaet — bei Gleichstand gewinnt die spaetere, und das Band klebte am linken Fensterrand statt hinter der Filterspalte. Zwei Klassen heben diese Regel darueber. */ /* ACHTUNG, EIGENER STAPELRAUM. Das z-index unten macht aus .cat-head einen Stapelraum: alles darin ist nach aussen auf die 5 festgelegt, ganz gleich welche Zahl es selbst traegt. Fuer die Tabelle darunter reicht das, und die 5 muss bleiben — der Kopf klebt und muss ueber die Zellen. Eine Ueberlagerung DARF hier aber nicht liegen: die Schweiz-Leiste hing als
in .cat-head, und der klebende Tabellenkopf (6), die Eckzelle (8) und eine ueberfahrene Gruppenzeile (9) wurden mitten durch ihr geoeffnetes Panel gezeichnet. Geloest ist das nicht hier, sondern in app.js: das Panel wird beim Laden an den Seitenkoerper gehaengt und verlaesst den Stapelraum. Wer hier eine neue Ueberlagerung einhaengt, faengt sich denselben Fehler. */ .wrap-full.layout .cat-head, .wrap-full.layout .querband { position: sticky; left: var(--fp, 196px); z-index: 5; box-sizing: border-box; /* --vis ist die SICHTBARE Breite des Rollbereichs, in app.js gemessen. 100vw waere falsch: es zaehlt die senkrechte Bildlaufleiste mit, und der Kopf ragte um deren Breite unter sie — «Schweizer Besonderheiten» am rechten Ende wurde angeschnitten. Der Rueckfall auf 100vw greift nur, solange noch nicht gemessen wurde. */ width: calc(var(--vis, 100vw) - var(--fp, 196px)); margin-left: -16px; } /* Rechts derselbe Abstand wie links. Die Grundregel gibt dem Kopf 4px nach rechts — das genuegte, solange er im Fluss lag und rechts ohnehin der Seitenrand kam. Seit er klebt und bis an die sichtbare Kante reicht, sass «Schweizer Besonderheiten» direkt am Rand. */ .wrap-full.layout .cat-head { padding-left: 20px; padding-right: 20px; } .wrap-full.layout .querband-in { padding-left: 30px; } /* KEINE LEISTE, KEIN ABSTAND ZU IHR. Die 16px links an .layout-main trennen die Tabelle von der Haarlinie des Panels, und der negative Aussenabstand oben nimmt sie dem klebenden Kopf wieder weg, damit dessen Kasten buendig beginnt. Auf einer Seite ohne Panel gibt es keine Haarlinie — dort wurde aus dem Abstand ein Rand: die Tabelle begann bei 16 Punkten und endete buendig an der rechten Fensterkante. Links ein Streifen, rechts keiner. Aufgefallen an «Buchhaltung auslagern», der einzigen Kategorie ohne Leiste. BEIDE ZEILEN GEHOEREN ZUSAMMEN, und das ist der Grund, warum die erste allein nicht genuegt: nimmt man nur die Polsterung weg, zieht der negative Aussenabstand den Kopf auf -16px hinaus und die Ueberschrift steht 4 statt 20 Punkte vom Rand. Gemessen, nicht geschaetzt. */ .wrap-full.layout.nopanel .layout-main { padding-left: 0; } .wrap-full.layout.nopanel .cat-head, .wrap-full.layout.nopanel .querband { margin-left: 0; } } /* Die rechte Spalte: Bedienleiste, Querverweisband, Tabelle. min-width: 0, sonst zieht die breite Tabelle das Raster auf. Weiss kommt von den Teilen selbst — die Bedienleiste bringt es mit, die Tabellenzellen ebenfalls. */ /* WEISS wie das Panel, und mit einem Abstand zur Haarlinie: 16px Luft zwischen Trennlinie und Tabelle. Die Polsterung MUSS an einer weissen Flaeche haengen — an .layout oder .layout-main ohne Hintergrund zeigte sie den grauen Untergrund, und der senkrechte Streifen waere zurueck, den die durchgehende Flaeche gerade beseitigt hat. */ /* min-width: 100% UND NICHT 0 — Korrektur vom 26. August 2026. Hier stand 0, mit der Begruendung «sonst zieht die breite Tabelle das Raster auf». Das Aufziehen kommt aber von min-width: AUTO, dem Vorgabewert eines Rasterfeldes; 100% bemisst sich am zugewiesenen Feld und zieht es nicht. Die 0 hat dafuer den Zweck der beiden Abfragen darueber vereitelt: sie setzen zweimal 100%, stehen VOR dieser Regel und verlieren bei gleicher Spezifitaet. Damit war .layout-main so breit wie sein Inhalt und nicht mindestens so breit wie das Fenster — und der klebende Seitenkopf verliess bei kurzen Tabellen seinen Container vor dem rechten Fensterrand. Gefunden von pruefungen/pruefe-stilrang.js. */ .layout-main { min-width: 100%; background: var(--surface); padding-left: 16px; } /* KOPF DER KATEGORIESEITE — und der einzige Kopf, den die rechte Spalte hat, seit die Bedienleiste entfallen ist. Zwei Zeilen links, ein Wähler rechts: Buchhaltungssoftware [+ Schweizer Besonderheiten] Fibu, MWST und Abschluss — … · 14/29 gezeigt align-items: flex-start setzt den Wähler auf die Höhe des TITELS und nicht auf die Mitte des zweizeiligen Blocks — mittig ausgerichtet sass er zwischen den Zeilen und wirkte wie zur tagline gehörend. overflow bleibt sichtbar: das Panel des Wählers fährt darüber hinaus. Kompakt gesetzt — das ist Ortsangabe und kein Vorspann, der Platz gehört der Tabelle. Der Einzug ergänzt die 16px der Spalte auf 20px von der Haarlinie. */ .cat-head { padding: 13px 4px 11px; display: flex; align-items: flex-start; gap: 14px; overflow: visible; border-bottom: 1px solid var(--line); } .cat-head-t { min-width: 0; flex: 1 1 auto; } .cat-head h1 { margin: 0; font-size: 17px; line-height: 1.25; letter-spacing: -.015em; font-weight: 650; color: var(--ink); } /* Zweite Zeile: tagline und Trefferzahl teilen sie sich. baseline, damit die beiden Schriftgrössen auf einer Linie sitzen; der Trenner gehört zur Zahl, damit er mit ihr verschwindet, wenn die Zeile umbricht. */ .cat-sub { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 3px 0 0; min-width: 0; } .cat-lead { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); max-width: 78ch; } .cat-sub .result-count { white-space: normal; overflow: visible; max-width: none; flex: none; } .cat-sub .result-count::before { content: '·'; margin-right: 8px; color: var(--line-hard); } /* Vor dem ersten Zeichnen ist die Zahl leer — dann darf auch der Trenner nicht dastehen. Ohne :empty stand auf jeder Seite ohne JavaScript ein einzelner Punkt hinter der tagline. */ .cat-sub .result-count:empty::before { content: none; } /* Der Stand, vierte Angabe in der Unterzeile — dieselbe Form wie die Trefferzahl daneben, weil er dasselbe tut: er datiert, was in der Tabelle steht. Bis zum 23. August 2026 stand er in der schwarzen Kopfleiste und datierte dort nichts Bestimmtes. */ .cat-stand { margin: 0; flex: none; font-size: 12.5px; color: var(--muted); white-space: nowrap; } .cat-stand::before { content: '·'; margin-right: 8px; color: var(--line-hard); } /* Der Verweis auf den Artikel, dritte Angabe in der Unterzeile. Er steht in der Akzentfarbe und ist damit das einzige Farbige in dieser Zeile — tagline und Trefferzahl sind grau. Wer den Kopf überfliegt, sieht genau ihn. Der Trenner gehört zum Verweis und verschwindet mit ihm, falls eine Kategorie keinen Artikel hat. */ .cat-artikel { margin: 0; white-space: nowrap; } .cat-artikel::before { content: '·'; margin: 0 8px 0 0; color: var(--line-hard); } .cat-artikel a { color: var(--accent); text-decoration: none; font-size: 12.5px; font-weight: 600; border-bottom: 1px solid transparent; } .cat-artikel a:hover { border-bottom-color: var(--accent); } @media (max-width: 660px) { /* Auf dem Telefon fällt die Zeile ohnehin um; dort darf der Verweis brechen. */ .cat-artikel { white-space: normal; } .cat-artikel a { font-size: 12px; } } /* DIE GEFILTERTEN ANSICHTEN, eine Zeile unter dem Artikelverweis. OHNE AKZENTFARBE, mit Absicht: der Artikelverweis darüber ist rot, und drei rote Verweise daneben machten aus einer Abkürzung eine Werbezeile. Sie tragen ihre Auszeichnung über den Rahmen und die Zahl, nicht über die Farbe. Die Zahl steht als im Verweis und nicht in Klammern: «Lohn (Swissdec) (12)» hätte zwei Klammerpaare hintereinander. */ .cat-krit { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; margin: 0; min-width: 0; } .cat-krit > span { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); white-space: nowrap; } .cat-krit a { display: inline-flex; align-items: baseline; gap: 5px; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--line-hard); background: var(--surface); color: var(--ink); text-decoration: none; font-size: 12px; line-height: 1.5; white-space: nowrap; } .cat-krit a b { font-weight: 700; color: var(--muted); } .cat-krit a:hover { border-color: var(--ink-soft); } .cat-krit a:hover b { color: var(--ink); } @media (max-width: 660px) { .cat-krit { gap: 5px; } .cat-krit a { font-size: 11.5px; padding: 2px 8px; } } @media (max-width: 660px) { .cat-head { padding: 12px 14px 10px; gap: 10px; } .cat-head h1 { font-size: 15.5px; } .cat-lead { font-size: 12px; } /* Der Wähler faellt unter den Titel. Nebeneinander blieben dem Titel rund 120px, und «Buchhaltungssoftware Schweiz — Vergleich» stand dreizeilig in einer Schmalspalte neben einem einzeiligen Knopf — der Knopf sah aus wie die Ueberschrift. Eine Zeile Hoehe ist auf dem Telefon billiger als ein zerrissener Titel; das Kuerzen des Knopfes auf das blosse Kreuz waere billiger gewesen und haette ein Zeichen ohne Wort hinterlassen. */ .cat-head { flex-wrap: wrap; } .cat-head-t { flex: 1 1 100%; } /* «.chside { margin-left: 0 }» STAND HIER UND TAT NICHTS: .chside setzt margin-left: auto und steht 3200 Zeilen spaeter. Im Bild sah man es genau so — «Filter» und «Schweizer Besonderheiten» klebten auf dem Telefon am rechten Rand, waehrend Titel, Text und Tabelle links beginnen. Beide Raender stehen jetzt im Nachrang am Dateiende, und zwar ZUSAMMEN: auch .cat-fp traegt ein auto, und zwei autos in einer Zeile teilen sich den Platz. Wer nur eines zuruecknimmt, verschiebt den Fehler. */ } /* SCHALTER FÜRS FILTERPANEL, seit dem 23. August 2026 auf der Seite statt in der schwarzen Kopfleiste — er steuert die linke Spalte genau dieser Seite. Damit zeigt er jetzt auf die Seitenpalette und nicht mehr auf die bar-Variablen; auf hellem Grund wäre --bar-muted unlesbar. Er steht auf der Titelzeile rechts, neben dem Schweiz-Wähler, und trägt dessen Höhe — zwei Bedienelemente derselben Seite, nebeneinander, in derselben Form. */ /* Der Schalter nimmt den freien Platz vor sich (margin-left: auto) und der Schweiz-Wähler rückt hinter ihm auf. Vorher trugen BEIDE ein auto, und zwei autos teilen sich den Platz — der Schalter stand darum mitten in der Zeile, weit von allem. Jetzt stehen sie als Paar am rechten Rand. */ .cat-fp ~ .chside { margin-left: 14px; } .cat-fp { flex: none; align-self: flex-start; margin-left: auto; border: 1px solid transparent; background: none; color: var(--muted); border-radius: var(--r-s); font: inherit; font-size: 11.5px; font-weight: 620; letter-spacing: .05em; padding: 5px 10px; cursor: pointer; white-space: nowrap; transition: color .14s, border-color .14s; } .cat-fp:hover, .cat-fp[aria-expanded="false"] { color: var(--ink); border-color: var(--line-hard); } /* Voreinstellungen: dieselbe Zeile wie die Kriterien, nur ohne die dritte Spalte — es gibt bei ihnen kein «verstaerken». */ .fp-lab input[type="radio"] { accent-color: var(--ink); } /* Die Reihe ist kein eigener Block mehr, sondern die erste Gruppe im Panel. */ /* JEDER Waehler im Kopf des Filterpanels — «Ich bin» und «Sortieren nach». Eine Regel fuer beide statt zwei fast gleiche: NUR das Noetige: volle Breite und ein Abstand nach unten. Die Zusammenfassung bleibt beim Muster der uebrigen vier Waehler (Beschriftung und Wert nebeneinander, inline-flex) — eigene Regeln fuer display und Richtung waren ein fuenftes Muster fuer dasselbe Element und die erste Stelle, an der ein Fehler entsteht. */ .fpanel .dd { display: block; margin: 0 0 14px; } .fpanel .dd[hidden] { display: none; } .fpanel .dd > summary { width: 100%; padding: 5px 24px 5px 11px; } /* Im schmalen Panel kleiner als in der Leiste oben — dort ist mehr Platz. */ .fpanel .dd .dd-key { font-size: 9.5px; } .fpanel .dd .dd-val { font-size: 12px; max-width: 100%; } .fpanel .dd .dd-pick { font-size: 12px; gap: 10px; } /* Das aufklappende Feld nimmt die Breite der Spalte, nicht 272px wie in der Leiste oben — dort ist mehr Platz. */ .fpanel .dd .dd-panel { left: 0; right: 0; min-width: 0; } /* FLACHE Fassung: kein Kasten, kein Hintergrund, klein. Fuer eine Feineinstellung, die nicht so schwer wiegen darf wie «Ich bin» — und die trotzdem ihren Wert nennt, was ein Icon nicht koennte. */ .fpanel .dd-flach > summary { border: 0; background: none; border-radius: 0; min-height: 0; padding: 1px 15px 1px 0; gap: 5px; } .fpanel .dd-flach > summary::after { right: 2px; width: 5px; height: 5px; } .fpanel .dd-flach > summary:hover { border-color: transparent; } .fpanel .dd-flach > summary:hover .dd-val { color: var(--ink); } .fpanel .dd-flach .dd-key { font-size: 9px; } .fpanel .dd-flach .dd-val { font-size: 11px; font-weight: 500; color: var(--muted); } .fpanel .dd-flach .dd-panel { left: 0; right: auto; min-width: 180px; } /* Die Zahl rechts, wie in den Kriterienzeilen. */ .fpanel .dd .dd-pick small { margin-left: auto; } .dd { position: relative; flex: none; } /* EINE Radius-Familie: alles, was man anklickt und was in einer Zeile sitzt, ist vollrund — Wähler, Suchfeld, Pillen, Etiketten. Alles, was eine Fläche ist, hat 6px: Panels, Kacheln, Tabellen. Vorher hatten die Wähler 6px und lasen sich dadurch wie Flächen statt wie Bedienelemente. */ .dd > summary { list-style: none; cursor: pointer; user-select: none; /* EIN Hintergrund für alle Wähler. Vorher trugen die Primärfilter --surface und die übrigen --surface-2 — zwei Töne in einer Zeile, ohne dass der Unterschied etwas bedeutete. Der Sprachwechsler in der dunklen Kopfleiste bleibt davon unberührt: er setzt background eigens auf none. */ border: 1px solid var(--line-hard); background: var(--surface); padding: 6px 30px 6px 13px; border-radius: 999px; font-size: 13.5px; display: inline-flex; align-items: baseline; gap: 8px; white-space: nowrap; position: relative; } /* Die Mindesthöhe von 30px hing an .ctrl-row und ist mit der Bedienleiste entfallen. Sie glich dort zwei Wähler mit verschiedener Schriftgrösse aus; im Seitenkopf steht nur noch einer, und der bringt seine Höhe selbst mit. */ .dd > summary::-webkit-details-marker { display: none; } /* Der Pfeil wird GERECHNET zentriert, nicht mit einem festen top gesetzt. Ein Zahlenwert stimmt nur für eine Höhe — die Wähler sind aber unterschiedlich hoch (dd-key + dd-val gegen einzeilige Umschalter), und der Pfeil sass dadurch zu tief. top/bottom: 0 mit margin: auto zentriert ein absolut gesetztes Element mit bekannter Höhe von selbst. Das translate im transform ist die optische Korrektur: der Pfeil ist ein gedrehtes Quadrat, dessen Tinte nur auf zwei Kanten liegt — geometrisch zentriert wirkt er versetzt. -1px/-1px im gedrehten Koordinatensystem entspricht in beiden Zuständen genau 1.4px senkrecht zur Spitze. */ .dd > summary::after { content: ""; position: absolute; right: 12px; top: 0; bottom: 0; margin: auto 0; width: 6px; height: 6px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(45deg) translate(-1px, -1px); transition: transform .16s; } .dd[open] > summary::after { transform: rotate(-135deg) translate(-1px, -1px); } .dd > summary:hover { border-color: var(--ink); } /* Primärfilter: etwas kräftiger als die Feineinstellungen rechts davon. KEINE eigene Hintergrundfarbe mehr — die stand hier nur, weil die Grundregel einen anderen Ton hatte. Jetzt hat sie denselben, und eine Wiederholung wäre eine Stelle mehr, an der die Töne auseinanderlaufen können. */ .dd-primary > summary { padding: 6px 26px 6px 11px; font-size: 12.5px; } .dd-key { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; font-weight: 650; color: var(--muted); } .dd-val { font-size: 13px; font-weight: 560; letter-spacing: -.01em; max-width: 240px; overflow: hidden; text-overflow: ellipsis; } .dd-primary[open] > summary { border-color: var(--ink); } /* Rot heisst hier: noch NICHT gesetzt, bitte entscheiden. Das ist die Umkehrung der früheren Regel («rot = von Ihnen gesetzt», siehe markState in app.js) und ein Entscheid des Betreibers vom Juli 2026. Damit Rot weiterhin genau EINE Bedeutung hat, trägt der gesetzte Zustand jetzt die Tintenfarbe statt Rot. */ /* Kein Farbsignal am leeren Zustand. Er ist der NORMALZUSTAND — die Seite zeigt dann alle Lösungen alphabetisch, und das ist eine gültige Ansicht. Rot wäre die höchste Priorität der Oberfläche und würde jeden Erstbesucher anschreien, um genau dann zu verstummen, wenn er etwas getan hat. Stattdessen der übliche Unterschied: nicht gewählt = der Wert steht als Platzhalter in gedeckter Schrift, gewählt = Tintenfarbe und kräftigerer Rahmen. Rot bleibt damit für Daten frei: Marke, Akzent, «Filter greift» am Regler, Schweizerkreuz. */ .dd-primary:not(.has-sel) .dd-val { color: var(--muted); font-weight: 500; } .dd.has-sel > summary { border-color: var(--ink); } .dd.has-sel .dd-val { color: var(--ink); font-weight: 560; } /* Aufforderung als TEXT, nicht als Farbe: Text kann sagen warum, Farbe nicht. Verschwindet, sobald ein Profil gewählt ist. */ /* color EXPLIZIT setzen: das Sprachmenü hängt im dunklen .site-head und würde sonst dessen helle Schriftfarbe erben — heller Text auf weisser Fläche, also unlesbar. Panels liegen als eigene Fläche über der Seite und gehören darum in die Seitenpalette, nicht in die der Leiste. */ .dd-panel { position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; min-width: 272px; background: var(--surface); color: var(--ink); border: 1px solid var(--line-hard); border-radius: var(--r-s); box-shadow: var(--shadow-lg); padding: 7px; display: grid; gap: 1px; } /* «Ich suche»: vier Gruppen in zwei Spalten, damit das Panel nicht in die Länge wächst */ .dd-panel-wide { min-width: 700px; grid-template-columns: 1fr 1fr; gap: 4px 18px; padding: 10px; max-height: calc(100vh - 130px); overflow-y: auto; } .dd-group { display: grid; gap: 1px; align-content: start; } .dd-group h4 { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 650; color: var(--muted); margin: 6px 0 4px; padding: 0 10px 5px; border-bottom: 1px solid var(--line); } .dd-group:first-child h4 { margin-top: 0; } .dd-hint { grid-column: 1 / -1; font-size: 11.5px; color: var(--muted); padding: 2px 10px 8px; border-bottom: 1px solid var(--line); margin-bottom: 2px; } /* Dreistufige Kriterien: egal (nichts aktiv) / wichtig / zwingend */ .dd-want { justify-content: space-between; gap: 14px; cursor: default; } .dd-want-label { font-size: 13px; } .wbtns { display: inline-flex; gap: 4px; flex: none; } .wbtn { border: 1px solid var(--line-hard); background: var(--surface-2); color: var(--muted); border-radius: 100px; padding: 2px 8px; font-size: 10.5px; cursor: pointer; white-space: nowrap; line-height: 1.5; } .wbtn:hover { border-color: var(--ink); color: var(--ink); } .wbtn-imp.on { background: var(--ink); border-color: var(--ink); color: var(--bg); } .wbtn-req.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } /* Einzelauswahl (Betriebsart) mit Radio-Punkt statt Häkchen */ .dd-radio { gap: 9px; } .dd-radio i { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--line-hard); flex: none; display: block; } .dd-radio.on i { border-color: var(--accent); box-shadow: inset 0 0 0 3px var(--accent); } .dd-radio.on { color: var(--accent); font-weight: 550; } .dd-item { display: flex; align-items: center; gap: 9px; font-size: 13.5px; cursor: pointer; padding: 7px 10px; border-radius: 4px; white-space: nowrap; border: 0; background: none; text-align: left; width: 100%; font: inherit; color: inherit; } .dd-item:hover { background: var(--surface-2); } /* EINTRAEGE, DIE VERWEISE SIND, tragen weder Unterstreichung noch Rot. Beides kam von den Grundregeln für a: text-decoration-color ist rötlich getönt, und a:hover setzt die Schrift auf --accent. .dd-item setzt zwar color: inherit, aber a:hover ist damit nicht geschlagen und die Unterstreichung gar nicht angesprochen — also stand «Gesamtlösung für Produkte» rot unterstrichen da, sobald der Zeiger darauf lag. Im Sprachwechsler galt das genauso, nur fiel es bei vier kurzen Zeilen niemandem auf. Rot bleibt in dieser Oberfläche für «filtert» reserviert; ein Menüeintrag filtert nichts. Die Rückmeldung auf das Überfahren gibt die Fläche (.dd-item:hover). */ .dd-panel a { text-decoration: none; } .dd-panel a:hover { color: inherit; } /* Eintrag unter einem Gruppentitel: eingerückt, damit die Zugehörigkeit sichtbar ist, ohne dass der Titel wiederholt werden muss. */ .dd-item.dd-sub { padding-left: 22px; } .dd-item input { accent-color: var(--accent); width: 15px; height: 15px; flex: none; } .dd-pick { justify-content: space-between; gap: 16px; font-size: 13.5px; } .dd-pick small { color: var(--muted); font-size: 11.5px; } .dd-pick.on { background: var(--ink); color: var(--bg); } .dd-pick.on small { color: color-mix(in srgb, var(--bg) 65%, var(--ink)); } .dd-sep { height: 1px; background: var(--line); margin: 4px 8px; } /* Aktiv gesetzt → rot, wie in der Tabelle */ .price-box.cuts .price-val { color: var(--accent); font-weight: 600; } /* SPRACHWECHSLER: EIN KREIS WIE DER HELL/DUNKEL-UMSCHALTER. Vorher war es ein Feld mit Kuerzel und Winkel — dieselbe Aufgabe wie beim Umschalter (eine Vorliebe umstellen), aber eine andere Form. Zwei Werkzeuge nebeneinander, die dasselbe tun und verschieden aussehen, sind eine Unstimmigkeit, die man nicht benennen kann und trotzdem sieht. DER WINKEL ENTFAELLT. In 30 Pixeln neben zwei Buchstaben ist er ein Punkt und kein Zeichen; dass sich etwas aufklappt, sagt das Feld beim Anfassen. Sitzt auf der dunklen Kopfleiste, zeigt darum auf die bar-Variablen. */ .dd-lang > summary { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; font-size: 11px; font-weight: 680; letter-spacing: .04em; background: transparent; border: 1px solid var(--bar-line); border-radius: 50%; color: var(--bar-muted); transition: color .14s, border-color .14s, background-color .14s; } .dd-lang > summary:hover, .dd-lang[open] > summary { color: var(--bar-ink); border-color: var(--bar-muted); background: color-mix(in srgb, var(--bar-ink) 10%, transparent); } .dd-lang > summary::after { display: none; } .dd-lang .dd-panel { left: auto; right: 0; z-index: 70; } /* ----------------------------------------- DIE SUCHE ALS AUFKLAPPFELD HIER UND NICHT OBEN BEI .hsearch, und der Grund ist der Fallstrick, der in diesem Stilblatt schon fuenfmal vermerkt ist: «.dd-search > summary» und «.dd > summary» haben DIESELBE Spezifitaet — eine Klasse und ein Element —, und bei Gleichstand gewinnt die SPAETERE Regel. Oben notiert verlor der Kreis gegen .dd > summary in allem: im Bild stand an seiner Stelle eine weisse Pille auf der dunklen Leiste. Wer diesen Block verschiebt, macht das zurueck. Genau daneben steht .dd-lang > summary aus demselben Grund. */ /* DER KREIS, DER SIE OEFFNET — dieselben Masse wie der Sprachwaehler und der Hell/Dunkel-Umschalter daneben. Drei Werkzeuge in einer Reihe, drei gleiche Formen: was die Form nicht unterscheidet, unterscheidet das Zeichen darin. */ .dd-search > summary { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; background: transparent; border: 1px solid var(--bar-line); border-radius: 50%; color: var(--bar-muted); transition: color .14s, border-color .14s, background-color .14s; } .dd-search > summary:hover, .dd-search[open] > summary { color: var(--bar-ink); border-color: var(--bar-muted); background: color-mix(in srgb, var(--bar-ink) 10%, transparent); } /* Kein Winkel: in 30 Pixeln neben einer Lupe ist er ein Punkt. */ .dd-search > summary::after { display: none; } /* Die Lupe IM Knopf ist nicht die Lupe IM FELD: jene sitzt absolut am linken Rand des Feldes, diese mittig im Kreis. Darum eine eigene Klasse und keine Ausnahme an der ersten Regel. */ .hs-ico-btn { position: static; transform: none; width: 14px; height: 14px; stroke: currentColor; } /* Das Panel ist so breit, dass die Vorschauzeilen lesbar bleiben: Titel plus Zweitzeile brauchen bei 12.5px Schrift rund 300 Pixel, und schmaler wird die Liste zum Rueckfall auf die Ergebnisseite. Rechts ausgerichtet, weil das Feld am rechten Rand sitzt — nach links geht der Platz. */ .dd-panel-search { left: auto; right: 0; width: 330px; max-width: calc(100vw - 24px); padding: 10px; z-index: 70; } /* DAS FELD IM PANEL BRAUCHT DIE SEITENFARBEN UND NICHT DIE DER LEISTE, und das ist kein Feinschliff, sondern ein Lesbarkeitsfehler gewesen. .hsearch input ist fuer die dunkle Kopfleiste geschrieben: color: var(--bar-ink), und das ist #eaf1fb — fast Weiss. Im Panel liegt es auf --surface, also auf Weiss. Getippter Text waere unsichtbar gewesen; der Platzhalter (--bar-muted) hielt sich knapp, weil er dunkler ist. Nachgesehen im Bild, dann gerechnet. Die Regeln stehen NACH .hsearch input und heben es damit auf; zusaetzlich ist .dd-panel-search .hsearch input um eine Klasse spezifischer — es gewinnt in beiden Rechnungen. */ .dd-panel-search .hsearch input { color: var(--ink); background: var(--surface-2); border-color: var(--line-hard); } .dd-panel-search .hsearch input::placeholder { color: var(--muted); } .dd-panel-search .hsearch input:hover { border-color: var(--muted); } .dd-panel-search .hsearch input:focus { border-color: var(--accent); background: var(--surface); } .dd-panel-search .hs-ico { stroke: var(--muted); } .dd-panel-search .hsearch input:focus ~ .hs-ico, .dd-panel-search .hsearch:hover .hs-ico { stroke: var(--ink); } .dd-panel-sm { min-width: 168px; } /* ------------------------------------------------- Die drei Punkte der Leiste HIER UND NICHT OBEN BEI .site-nav, und der Grund ist derselbe wie damals fuer das Kategorienfeld: Reihenfolge ist im Stilblatt Bedeutung. Weiter unten steht .dd > summary, und bei gleicher Spezifitaet gewinnt die spaetere Regel. HIER STAND DAS KATEGORIENFELD — rund 7500 Zeichen: der Winkel, das Panel mit 784px Breite, der Dreispaltensatz der 40 Namen, die erste Zeile auf die Startseite, die Zeilenhoehe, das Blatt unter 980px und die eine Spalte unter 660px. Alles entfallen am 23. August 2026 mit dem Feld selbst; die Begruendung steht in build.js an der Stelle, an der catMenu() stand. GEBLIEBEN IST DIE GESTALTUNG DER DREI PUNKTE, denn die trugen Feld und Blogverweis schon gemeinsam. NAVIGATION IST EIN WORT, KEIN KNOPF: sie waren bis zum 23. August 2026 Pillen mit Rand, neben Filterschalter und Suchfeld — vier gleiche Formen fuer vier verschiedene Dinge, und die Form sagte damit nichts mehr. Jetzt hat die Leiste eine Grammatik: Navigation ist gesetzter Text, das Werkzeug ist ein Feld, die Sprachwahl ein Kreis. DIE UNTERSTREICHUNG SAGT, WO MAN IST: 2px in der hellen Schrift der Leiste, auf jeder Seite, die unter diesem Punkt liegt. Nicht in der Akzentfarbe — Rot heisst auf dieser Website «von Ihnen gewaehlt», und wo man steht, hat niemand gewaehlt. */ /* IN GROSSBUCHSTABEN, auf Entscheid des Betreibers. Ich hatte dagegen argumentiert: auf dieser Website heisst gesperrte Versalschrift sonst «Etikett» oder «Reihentitel» (st-eyebrow, st-reihe, Kennzahlenbeschriftung). Das war eine Meinung ueber die Formensprache und kein Befund — entschieden hat der Betreiber, und die Form traegt sich in der Leistenmitte gut: drei kurze Woerter mit Sperrung fuellen den Raum, den sie umgibt, besser als drei kleingesetzte. 12.5px UND NICHT 14.5: Versalien lesen sich rund einen Grad groesser als Gemischtschrift, weil keine Unterlaengen fehlen. 14.5 in Grossbuchstaben waere in der Leiste lauter gewesen als die Wortmarke daneben. */ .head-blog { display: flex; align-items: center; white-space: nowrap; text-decoration: none; padding: 5px 0; font-size: 12.5px; font-weight: 640; text-transform: uppercase; letter-spacing: .085em; background: none; border: 0; border-radius: 0; color: var(--bar-nav); border-bottom: 2px solid transparent; transition: color .14s, border-color .14s; } .head-blog:hover { color: var(--bar-ink); background: none; } /* KEIN UNTERSTRICH MEHR AM LAUFENDEN PUNKT. Er sass 2 Pixel unter der Schrift und war in der Leistenmitte ein Strich ohne Bezug — am linken Rand las er sich als Reiter, in der Mitte als Fehler. Wo man steht, sagen jetzt Helligkeit UND Gewicht: --bar-ink (16.19:1) gegen --bar-nav (12.20:1) und 700 gegen 580. Zwei Merkmale, nicht eines — Farbe allein waere fuer eine Farbschwaeche kein Unterschied. Die durchsichtige Linie bleibt in der Grundregel stehen: sie haelt die Hoehe aller drei Punkte gleich. */ .head-blog.on { color: var(--bar-ink); font-weight: 700; } .price-box { display: flex; align-items: center; gap: 10px; } /* Im schmalen Panel UEBEREINANDER und der Regler ueber die ganze Breite: mit festen 130px nebeneinander lief die rote Spur ueber den rechten Rand hinaus. */ .fpanel .price-box { display: grid; gap: 4px; } .fpanel .price-box label { white-space: normal; font-size: 11.5px; } .fpanel #priceRange { width: 100%; } .fpanel .check { font-size: 11.5px; } .price-box label { font-size: 12.5px; color: var(--muted); white-space: nowrap; } .price-val { color: var(--ink); font-variant-numeric: tabular-nums; } #priceRange { width: 130px; accent-color: var(--accent); } .check { font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 7px; cursor: pointer; white-space: nowrap; } .check input { accent-color: var(--accent); width: 14px; height: 14px; } /* «nur Unterschiede» mit Info-Zeichen. Der Hinweis erklärt eine Option, deren Name allein nicht sagt, was sie tut — sie blendet Zeilen aus, in denen ALLE Einträge dasselbe sagen. Ohne Erklärung wirkt das wie ein Fehler. */ .check-wrap { display: flex; align-items: center; gap: 5px; flex: none; } .info { position: relative; flex: none; width: 15px; height: 15px; padding: 0; display: grid; place-items: center; cursor: help; background: none; border: 1px solid var(--line-hard); border-radius: 999px; color: var(--muted); font-size: 10px; font-weight: 700; font-style: italic; font-family: inherit; line-height: 1; } .info:hover, .info:focus-visible { color: var(--ink); border-color: var(--muted); } /* Der Hinweis erscheint OHNE Verzögerung — eine Wartezeit lässt den Leser zweifeln, ob das Zeichen überhaupt etwas tut. Bewusst dunkel in beiden Paletten: ein Tooltip soll sich vom Untergrund abheben, nicht einfügen. */ .info-tip { position: absolute; top: calc(100% + 9px); left: 50%; transform: translateX(-50%); z-index: 60; width: max-content; max-width: 260px; padding: 9px 11px; border-radius: var(--r-s); background: #111; color: #fff; font-size: 12.5px; font-weight: 400; font-style: normal; line-height: 1.5; text-align: left; white-space: normal; box-shadow: 0 8px 24px rgba(0, 0, 0, .28); opacity: 0; visibility: hidden; pointer-events: none; } /* Zeiger zum Zeichen hoch, aus demselben Schwarz wie die Fläche. */ .info-tip::before { content: ''; position: absolute; bottom: 100%; left: 50%; margin-left: -5px; border: 5px solid transparent; border-bottom-color: #111; } /* :focus UND :focus-visible. Auf einem Berührungsbildschirm gibt es kein Hover, und :focus-visible behalten die Browser in der Regel der Tastatur vor — ein Fingertipp auf das «i» zeigte damit NICHTS. Der Hinweis war auf dem Handy also nicht vorhanden, obwohl das Zeichen da stand. Mit :focus oeffnet ihn ein Tipp, und ein Tipp daneben schliesst ihn wieder (der Schalter verliert den Fokus). */ .info:hover .info-tip, .info:focus .info-tip, .info:focus-visible .info-tip { opacity: 1; visibility: visible; } /* Auf dem Handy hat «cursor: help» keine Bedeutung, und der Hinweis darf die Bildschirmbreite nicht ueberschreiten. */ @media (max-width: 660px) { /* .info-tip bleibt hier: seine Grundregel steht VOR dieser Stelle, der Deckel greift also. */ .info-tip { max-width: calc(100vw - 40px); } /* .info-tip-wide und .tip-tab NICHT: ihre Grundregeln stehen fuenf bzw. dreissig Zeilen SPAETER (480px, 13px, 11.5px, gap 3px 12px) und gewinnen bei gleicher Spezifitaet. Der breite Erklaerkasten stand auf dem Telefon damit mit 480 Pixeln in einem 390 Pixel breiten Fenster. Werte im Nachrang am Dateiende. */ } /* Breitere Fassung fuer einen Hinweis, der einen Gedanken erklaert und nicht nur einen Schalter. 260px zwaengen fuenf Saetze in einen Turm. */ .info-tip-wide { max-width: 480px; font-size: 13px; line-height: 1.5; padding: 12px 14px; } /* Struktur der Erklärinhalte — benannte Abschnitte, Feldlisten, Sammelübersicht. Sie erscheinen an ZWEI Orten: im schwarzen Hinweis an einer Zeile und im hellen Schubfach am Abschnittstitel. Die FORM ist dieselbe, die Farben kommen aus dem Umfeld. Vorher standen die Farben fest in diesen Regeln — gewählt für den schwarzen Hinweis. Im Schubfach ergab das hellgrauen Text auf Weiss. Farben, die an der Form kleben, brechen beim ersten Ortswechsel. */ .info-tip { --tipfg: #fff; --tipfg2: #d7dade; --tipfg3: #a9adb3; --tipline: #333; } #drawerBody { --tipfg: var(--ink); --tipfg2: var(--ink-soft); --tipfg3: var(--muted); --tipline: var(--line); } /* Überschrift und Absatz */ .tip-h { display: block; font-weight: 700; font-size: 12.5px; letter-spacing: .01em; color: var(--tipfg); } .tip-p { display: block; margin: 2px 0 10px; color: var(--tipfg2); } .tip-p:last-child { margin-bottom: 0; } /* Feldliste: Beschriftung links, Wert rechts. Wer die MWST-Methode sucht, findet sie an einer festen Stelle statt irgendwo in einer Aufzählung. */ .tip-dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 14px; align-items: baseline; } .tip-k { color: var(--tipfg3); font-size: 11.5px; } .tip-v { color: var(--tipfg); font-variant-numeric: tabular-nums; } /* Sammelübersicht: eine Zeile je Fall, eine Spalte je Kennwert. Erst untereinander sind die Annahmen vergleichbar — in fünf einzelnen Hinweisen müsste man sie im Kopf behalten. */ .tip-tab { display: grid; grid-template-columns: auto repeat(calc(var(--tipcols) - 1), auto); gap: 3px 12px; margin-top: 4px; font-size: 11.5px; white-space: nowrap; } .tip-th { color: var(--tipfg3); font-weight: 600; border-bottom: 1px solid var(--tipline); padding-bottom: 3px; } .tip-rh { color: var(--tipfg); font-weight: 600; } .tip-td { color: var(--tipfg2); font-variant-numeric: tabular-nums; } /* Im Schubfach ist Platz: dort darf die Übersicht grösser und luftiger stehen. */ #drawerBody .tip-tab { font-size: 13px; gap: 6px 18px; margin-top: 10px; } #drawerBody .tip-p { font-size: 14px; line-height: 1.55; } #drawerBody .tip-h { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); } /* Das Zeichen am Gruppentitel: die Gruppenzeile setzt Grossbuchstaben und Sperrung, der Hinweis darin nicht -- das erledigt .info-tip schon. Der Abstand haelt es vom Titel weg, ohne ihn zu verschieben. */ /* Das Zeichen am Gruppentitel ist ETWAS deutlicher als das in der Bedienleiste, aber keine Farbfläche: es blieb sonst als roter Punkt in der Zeile stehen und zog mehr Aufmerksamkeit als der Titel, den es erklärt. Also der gewohnte Ring — nur mit kräftigerem Rand und dunklerer Schrift, damit er in der grauen Gruppenzeile nicht untergeht. Die Zeile setzt Grossbuchstaben und Sperrung; beides muss zurückgesetzt werden, sonst wird aus dem «i» ein gesperrtes «I». */ /* Erklärzeichen IN DER TABELLE. Gleiche GRÖSSE, verschiedenes GEWICHT — und das mit Absicht: Am Abschnittstitel ist es gefüllt und dunkel. Dahinter steht die Idee der Kategorie: dass jede Zahl an einem festgelegten Betrieb gemessen ist. Wer das nicht liest, versteht die ganze Tabelle falsch, also darf das Zeichen auffallen. An einer Fallzeile ist es der leise Ring. Dahinter stehen die Annahmen dieses einen Falls — nützlich, aber ein Detail auf Abruf. Fünf gefüllte Zeichen untereinander zogen mehr Aufmerksamkeit als die Preise daneben, und die sind der Inhalt. Nicht --accent: Rot ist auf dieser Seite dem Zustand «gesetzt» vorbehalten. Beim Überfahren wechseln beide darauf — dann IST das Zeichen angefasst. */ tr.grouprow .info, td.rowlab .info { display: inline-grid; width: 15px; height: 15px; font-size: 9.5px; letter-spacing: 0; text-transform: none; } tr.grouprow .info { margin-left: 8px; vertical-align: middle; font-weight: 700; background: var(--ink-soft); border-color: var(--ink-soft); color: #fff; } td.rowlab .info { margin-left: 6px; vertical-align: 1px; font-weight: 700; background: none; border-color: var(--line-hard); color: var(--muted); } tr.grouprow .info:hover, tr.grouprow .info:focus-visible { background: var(--accent); border-color: var(--accent); color: #fff; } td.rowlab .info:hover, td.rowlab .info:focus-visible { border-color: var(--accent); color: var(--accent); } /* Der Hinweis hängt LINKS am Zeichen, nicht mittig darunter. Mittig zentriert ragte die halbe Breite über den linken Rand der Tabelle hinaus und wurde vom Rollbereich abgeschnitten — die Zeichen stehen am Anfang der Zeile, da ist links kein Platz. Der Zeiger sitzt dafür über dem Zeichen. */ tr.grouprow .info-tip, td.rowlab .info-tip { left: 0; transform: none; } tr.grouprow .info-tip::before, td.rowlab .info-tip::before { left: 7px; margin-left: 0; } /* STAPELREIHENFOLGE: die klebenden Zellen bilden eigene Stapelkontexte, und darin nuetzt dem Hinweis sein z-index nichts — er kann seinen Kontext nicht verlassen. Die Beschriftungsspalte liegt auf 2, die Gruppenzeilen auf 4, der Tabellenkopf auf 6 und die Ecke auf 8. Ein Hinweis aus einer Zeile wurde deshalb von den Gruppenzeilen und vom Kopf ueberdeckt — er sah abgeschnitten aus, obwohl er vollstaendig gezeichnet war. Abhilfe: die Zelle selbst nach vorn holen, solange ihr Hinweis offen ist. :focus-within deckt die Tastaturbedienung mit ab — ohne sie waere der Hinweis nur mit der Maus lesbar. */ td.rowlab:hover, td.rowlab:focus-within, tr.grouprow td:hover, tr.grouprow td:focus-within { z-index: 9; } /* KEIN automatischer Rand: die Anzahl steht direkt hinter dem letzten Filter und schliesst die Gruppe ab. Den Abstand zum rechten Rand erzeugt .chside. */ .result-count { font-size: 12.5px; color: var(--muted); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .result-count b { color: var(--ink); font-weight: 640; font-variant-numeric: tabular-nums; } /* Schalter in der Anzahlzeile: «alle zeigen» und «Auswahl aufheben». Als Text und nicht als Knopf — sie erscheinen nur, wenn eine Auswahl besteht, und sollen die Zeile nicht in eine zweite Bedienleiste verwandeln. */ .rc-btn { border: 0; background: none; padding: 0 1px; cursor: pointer; font: inherit; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; } .rc-btn:hover { color: var(--ink); } /* EINGESCHALTET: die zwei Stufenschalter («nur diese», «nur Unterschiede») sind Zustände und keine einmaligen Handlungen — man muss ihnen ansehen, ob sie gerade gelten. Gefüllt und ohne Unterstreichung: die Unterstreichung heisst auf dieser Zeile «hier lässt sich etwas auslösen», der gefüllte Grund «es ist ausgelöst». Rot ist hier richtig und keine dritte Bedeutung — es heisst auf dieser Seite «von Ihnen gewählt», und genau das ist es. */ .rc-btn.on { background: var(--accent); color: var(--accent-ink); text-decoration: none; border-radius: 3px; padding: 1px 6px; } .rc-btn.on:hover { color: var(--accent-ink); opacity: .88; } .rc-note { color: var(--muted); } .btn { background: var(--ink); color: var(--bg); border: 1px solid var(--ink); padding: 8px 15px; border-radius: var(--r-s); cursor: pointer; font-size: 14px; font-weight: 550; text-decoration: none; display: inline-block; } .btn:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } .btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-hard); } .btn-ghost:hover { background: transparent; color: var(--accent); border-color: var(--accent); } /* ---------------------------------------------------------------- table */ /* Der Vergleich nutzt die ganze Bildschirmbreite: randlos, ohne Rahmenradius. Der Rest der Seite bleibt in der lesbaren Spaltenbreite. */ .view { padding: 0 0 8px; } .wrap-full { max-width: none; padding: 0; } .wrap-pad { max-width: none; padding: 0 20px; } /* Keine eigene Scrollleiste mehr — gescrollt wird der Bereich .scroll. width: max-content, damit die Rahmenlinien über die ganze Tabellenbreite laufen. */ .table-scroll { background: var(--surface); width: max-content; min-width: 100%; border-top: 1px solid var(--line-hard); border-bottom: 1px solid var(--line-hard); } table.cmp { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 13.5px; } table.cmp th, table.cmp td { text-align: left; border-bottom: 1px solid var(--line); } table.cmp td { padding: 8px 14px; white-space: nowrap; } /* Kopfzelle je Programm */ table.cmp thead th { position: sticky; top: 0; z-index: 6; background: var(--surface-2); border-bottom: 1px solid var(--line-hard); vertical-align: top; padding: 12px 14px 11px; min-width: 172px; } /* DIE AUSWAHL BRAUCHT «table.cmp thead th.corner» UND NICHT NUR «th.corner». Mit dem kurzen Namen gewann die Regel darueber und die Eckzelle bekam z-index 6 statt 8 — gleichauf mit allen anderen Kopfzellen. Bei gleichem Rang entscheidet die Reihenfolge im Dokument, und die Eckzelle steht ZUERST: jede Anbieterspalte, die beim Seitwaertsscrollen unter sie faehrt, wurde ueber sie gemalt. Gemessen stand an der Stelle, wo «KRITERIUM» steht, der Name «Banana Buchhaltung». Auf breiten Schirmen faellt es kaum auf, auf 390px ist die Eckzelle ein Drittel des Bildes. */ table.cmp thead th.corner { position: sticky; left: 0; top: 0; z-index: 8; width: 190px; min-width: 190px; background: var(--surface-2); border-right: 1px solid var(--line-hard); font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); font-weight: 650; } .pth-row { display: flex; align-items: baseline; gap: 6px; } /* EINE FLAECHE FUER EINE HANDLUNG: Kästchen und Name liegen seit dem 1. August 2026 in EINEM Schalter, und der merkt vor. Der Name war bis dahin ein Verweis auf die Produktseite — diesen Weg trägt jetzt «Details» darunter, als echter , damit die 123 Produktseiten aus den Kategorieseiten erreichbar bleiben. Genau das war schon einmal kaputt und wurde im Juli 2026 behoben. Der Schalter sieht aus wie Text: keine Fläche, kein Rahmen. Beim Überfahren färbt sich das Kästchen — der Hinweis kommt, wenn er gebraucht wird. */ .pth-sel { display: flex; align-items: baseline; gap: 6px; flex: 1; border: 0; background: none; padding: 0; margin: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; } .pth-name { font-size: 15.5px; font-weight: 640; letter-spacing: -.02em; text-decoration: none; } .pth-sel:hover .pth-pick { border-color: var(--accent); } .pth-sel:hover .pth-name { color: var(--accent); } /* Auswahlzeichen je Spalte. Ein leeres QUADRAT, gefüllt sobald vorgemerkt — kein Häkchen darin, weil ein Häkchen in dieser Tabelle schon «Merkmal vorhanden» bedeutet und die zweite Bedeutung verwirren würde. RUND WAR ES BIS ZUM 1. AUGUST 2026, und das war das falsche Signal: rund heisst in jeder Oberfläche «eines von mehreren», eckig «mehrere möglich». Vormerken ist ausdrücklich eine Mehrfachwahl, und wer sich nach der Form richtet, erwartete beim zweiten Klick, dass die erste Wahl verfällt. Die alte Begründung für den Kreis stimmte, traf aber daneben: die Kollision liegt beim HÄKCHEN, nicht beim Quadrat. Ohne Häkchen gibt es sie nicht. Nebenbei dieselbe Form wie die Kriterienkästchen links — zwei Achsen, ein Mechanismus, eine Form. Zurückhaltend im Ruhezustand: die Tabelle hat bis zu dreissig Spalten, und dreissig kräftige Zeichen wären eine Aufforderung statt eines Angebots. */ .pth-pick { flex: none; align-self: center; width: 13px; height: 13px; padding: 0; border: 1.5px solid var(--line-hard); border-radius: 3px; background: none; cursor: pointer; transition: background-color .12s, border-color .12s; } .pth-sel.on .pth-pick { border-color: var(--accent); background: var(--accent); } /* Die vorgemerkte Spalte trägt eine Kante in derselben Farbe. Sie ist die Bestätigung, dass der Klick die SPALTE meint und nicht nur das Zeichen. */ /* DREI PIXEL, NICHT ZWEI — und an beiden Achsen gleich. Zwei Pixel trugen die Aussage, verschwanden aber neben den Rahmenlinien der Tabelle, die selbst einen Pixel stark sind: ein Strich, der nur um die Haelfte kraeftiger ist als jede Trennlinie daneben, liest sich als Trennlinie. Drei Pixel setzen ihn ausser Zweifel und bleiben eine Kante — im Unterschied zur Flaeche, die den Werten in der Tabelle die Aufmerksamkeit nimmt. EIN PIXEL LUECKE ZWISCHEN BENACHBARTEN STRICHEN, genau wie links. Dort entsteht sie von selbst: jede Zeile traegt ihren eigenen Strich, und dazwischen liegt die Trennlinie der Zeile. Oben stossen zwei vorgemerkte Spalten unmittelbar aneinander, und die zwei Striche verschmolzen zu einem einzigen langen — zwei Spalten sahen aus wie eine. Als Farbverlauf und nicht als inset-Schatten: ein Schatten laesst sich nicht waagrecht einruecken, ein Hintergrundbild schon. Die Luecke sitzt RECHTS und nicht auf beiden Seiten — so ist sie genau einen Pixel breit wie links, statt zwei, und der aeusserste Strich beginnt buendig mit seiner Spalte. */ /* DER STRICH IST EIN PSEUDOELEMENT UND KEINE HINTERGRUNDFARBE — und das ist keine Geschmacksfrage, sondern die Lehre aus zwei Fehlern am 1. August 2026. Erst war er ein Farbverlauf auf dem : «table.cmp thead th» setzt background als KURZFORM, und eine Kurzform setzt background-image auf none zurueck; mit (0,1,2) gegen (0,1,0) verschwand der Strich ganz. Nach dem Anheben der Spezifitaet verschwand der ZEILEN-Strich beim Ueberfahren, weil «table.cmp tbody tr:hover td:not(.grp)» ebenfalls background als Kurzform setzt — dieselbe Falle, zweite Tuer. Ein Pseudoelement hat einen eigenen Hintergrund. Keine Regel auf der Zelle kann ihn loeschen, egal mit welcher Spezifitaet. Damit ist die Falle nicht umgangen, sondern zugemauert. Die Zelle traegt position: sticky und ist damit schon Bezugsrahmen; ein zusaetzliches position: relative braucht es nicht. */ table.cmp thead th.pth-picked::before { content: ''; position: absolute; left: 0; right: 2px; top: 0; height: 3px; background: var(--accent); } /* KEINE FLAECHE, WEDER HIER NOCH BEI DEN ZEILEN. Ausprobiert am 1. August 2026 und verworfen: die Spalte war mit 6% Rot hinterlegt, wie es die Zeilen der Gruppe «Ihre Auswahl» damals waren. Eine Fläche über dreissig Zeilen nimmt den Werten darin die Aufmerksamkeit, und genau die sind der Zweck der Tabelle. Geblieben ist die LINIE an der Beschriftungskante — oben an der Spalte, links an der Zeile. Eine Handlung, ein Zeichen, zwei Achsen. */ .pth-short { font-size: 11.5px; color: var(--muted); margin-top: 2px; white-space: normal; max-width: 200px; line-height: 1.35; } .pth-fit { display: flex; align-items: center; gap: 7px; margin-top: 8px; font-size: 11px; color: var(--muted); } /* «Details» als stiller Verweis IN der Beschreibungszeile, nicht als umrandeter Knopf darunter. Als Knopf war er das lauteste Element im Kopf — lauter als der Produktname, den er begleitete —, und er kostete den klebenden Kopf eine dritte gestapelte Zeile. Zusammen mit dem entfallenen × sinkt die Kopfzelle von 116 auf rund 70px, also von 15 auf 9 Prozent des Sichtfensters. */ /* IMMER EINE EIGENE ZEILE. Als reines Inline-Element rutschte «Details» hinter die Beschreibung, sobald die kurz genug war — und stand bei langen Beschreibungen darunter. Zwei Kopfzellen nebeneinander sahen damit verschieden gebaut aus, obwohl sie dasselbe enthalten. display: block bindet den Verweis an seine eigene Zeile, ohne dass er dafuer aus dem Beschreibungsblock heraus muesste — der Kopf bleibt zweiteilig. */ .pth-detail { display: block; margin-top: 2px; border: 0; background: none; padding: 0; cursor: pointer; font: inherit; font-size: 11.5px; color: var(--muted); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--line-hard); } .pth-detail:hover { color: var(--accent); text-decoration-color: var(--accent); } /* «4/5 Wuensche erfuellt» IST GRUEN UND NICHT FETT. Vorher war der Zaehler grau und wurde erst gruen und fett, wenn ALLE Wuensche erfuellt waren. Die Auskunft ist aber in beiden Faellen dieselbe Sorte: eine Trefferzahl. Gruen sagt «hier wird gezaehlt, was Sie wollten», und das gilt ab dem ersten Treffer. DIE VOLLSTAENDIGKEIT BLEIBT ERKENNBAR, nur nicht ueber Fettschrift: der Teilstand steht in einem gedaempften Gruen, der Vollstand im satten. Fett auf 11px in einer Spaltenkopfzelle war ausserdem der schwerste Text in einer Zeile voller leichter — er zog den Blick auf eine Nebenauskunft. */ .pth-hits { font-size: 11px; margin-top: 5px; color: color-mix(in srgb, var(--good) 72%, var(--muted)); } .pth-hits.full { color: var(--good); } /* Zeilen */ td.rowlab { position: sticky; left: 0; z-index: 2; background: var(--surface); border-right: 1px solid var(--line-hard); color: var(--ink-soft); font-weight: 500; width: 190px; min-width: 190px; white-space: normal; } /* Gruppentitel bleiben in BEIDEN Richtungen sichtbar: die Zeile klebt senkrecht unter der Kopfzeile (--thead-h wird in app.js gemessen), die Beschriftung klebt waagrecht am linken Rand. Die Zelle selbst kann nicht waagrecht kleben, weil sie über die ganze Tabellenbreite geht — darum der innere Span. */ /* KEIN border-top, UND DAS IST KEINE SPARSAMKEIT. Die Tabelle rechnet mit border-collapse: separate — Rahmen benachbarter Zellen verschmelzen also nicht, sie stapeln sich. Die Gruppenzeile trug oben eine harte Linie, und direkt darueber liegt eine zweite: unter der Kopfzeile deren border-bottom (dieselbe Farbe, --line-hard), mitten in der Tabelle das border-bottom der vorangehenden Datenzeile. Zwei Linien mit einem Haaresbreite-Streifen Untergrund dazwischen, und weil die Zeilenhoehen auf Bruchteile eines Punkts fallen, mal 2 Punkte dick und mal zweifach gezeichnet. Es ist genau EINE Trennung, also gehoert dort genau EINE Linie hin. Sie kommt von oben: unter der Kopfzeile aus deren border-bottom — auch beim Rollen, denn die Gruppenzeile klebt unmittelbar darunter (top: --thead-h) und trifft dieselbe Kante wieder. Mitten in der Tabelle aus der Datenzeile darueber. Unten bleibt die harte Linie: sie schliesst das Band gegen die Zeilen ab, die darunter folgen, und trifft dort auf keinen zweiten Rahmen — Datenzeilen tragen oben keinen. */ tr.grouprow td { background: var(--surface-2); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 650; color: var(--muted); padding: 9px 0 6px; border-bottom: 1px solid var(--line-hard); position: sticky; top: var(--thead-h, 108px); z-index: 4; } /* Titel und Erklaerzeichen kleben GEMEINSAM: die Huelle klebt, nicht die Beschriftung allein. Vorher klebte nur .grplab, und das Zeichen lief beim waagrechten Scrollen aus dem Bild, waehrend der Titel stehen blieb. */ tr.grouprow .grphead { position: sticky; left: 0; display: inline-flex; align-items: center; padding: 0 14px; max-width: 100%; } tr.grouprow .grplab { display: inline-block; } /* Erklaerlink am Abschnittstitel. Die Gruppenzeile ist gesperrt und in Grossbuchstaben gesetzt — der Link setzt beides zurueck. Kleinschreibung neben Grossbuchstaben trennt die zwei Rollen deutlicher als jede Farbe: der Titel benennt, der Link handelt. NICHT rot: Rot heisst auf dieser Seite «gesetzt», und ein dauerhaft rotes Element in jeder Gruppenzeile hiesse, dort sei etwas gewaehlt. */ tr.grouprow .grplink { margin-left: 10px; padding: 0; border: 0; background: none; font: inherit; font-weight: 500; font-size: 11px; text-transform: none; letter-spacing: 0; color: var(--ink-soft); cursor: pointer; text-decoration: underline; text-decoration-color: var(--line-hard); text-underline-offset: 2px; text-decoration-thickness: 1px; } /* Mittelpunkt als Trenner — dieselbe Fuegung wie ueberall auf dieser Seite. Nicht unterstrichen: er gehoert nicht zum Link, er trennt ihn ab. */ tr.grouprow .grplink::before { content: '·'; display: inline-block; margin-right: 10px; color: var(--line-hard); text-decoration: none; } tr.grouprow .grplink:hover, tr.grouprow .grplink:focus-visible { color: var(--accent); text-decoration-color: var(--accent); } /* Auf schmalen Geraeten rutscht der Link unter den Titel, statt die klebende Huelle ueber die halbe Bildschirmbreite zu ziehen. */ tr.grouprow .grphead { flex-wrap: wrap; row-gap: 2px; } @media (max-width: 660px) { /* flex-basis: 100% erzwingt den Umbruch. Ohne ihn blieb er aus: die Huelle ist eine Zelle mit colspan ueber die ganze Tabelle und damit tausende Pixel breit — es gab nie einen Grund umzubrechen, und «VERGLEICHSPREISE» und «So vergleichen wir» klebten ohne Trenner aneinander, weil hier zugleich der Mittelpunkt entfaellt. */ tr.grouprow .grplink { margin-left: 0; flex: 1 0 100%; text-align: left; } tr.grouprow .grplink::before { content: none; margin: 0; } } /* Hinweiszeile eines Abschnitts: der gezählte Befund unter dem Titel «Vergleichspreise». Sie steht IN der Tabelle, weil über der Tabelle höchstens ein Streifen stehen darf — und weil sie hier bei den Zeilen steht, über die sie etwas sagt. NICHT klebend und NICHT in Grossbuchstaben wie die Gruppenzeile: es ist ein Satz zum Lesen, kein Titel. Der innere Span klebt waagrecht, damit er beim Scrollen einer breiten Tabelle nicht aus dem Bild läuft — dasselbe Verfahren wie beim Abschnittstitel. */ tr.noterow td { background: var(--surface-2); padding: 0 0 9px; border-bottom: 1px solid var(--line-hard); } tr.noterow .notein { position: sticky; left: 0; display: block; padding: 0 14px; font-size: 12.5px; line-height: 1.45; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink-soft); max-width: 74ch; white-space: normal; } /* Persönliche Kriterien: eigene Gruppe am Anfang der Tabelle */ /* NUR DIE BESCHRIFTUNG ROT, NICHT DIE LINIE. Die Trennlinie der Gruppe war ebenfalls rot eingefaerbt und lief damit ueber die ganze Tabellenbreite — das groesste rote Element der Seite fuer die leiseste Aussage. Seit die gewaehlten Zeilen ihren Strich an der Beschriftungskante tragen, sagt Rot hier dreimal dasselbe: Linie, Ueberschrift, Strich. Die Linie ist die entbehrlichste davon; sie bleibt als normale Trennlinie stehen, wie bei jeder anderen Gruppe auch. */ tr.grouprow-own td { color: var(--accent); } /* DER ROTE STRICH AN DER BESCHRIFTUNGSKANTE, das Gegenstück zu .pth-picked oben an der Spalte. Bis zum 1. August 2026 war die ganze Zeile mit 6% Rot hinterlegt; die Fläche ist auf Wunsch des Betreibers gefallen, der Strich sagt dasselbe und lässt den Werten den Vordergrund. Als inset-Schatten und nicht als border-left: die Beschriftungsspalte klebt (position: sticky) und trägt bereits eine Rahmenlinie rechts — ein zweiter Rahmen links verschöbe ihre Breite und damit die ganze Tabelle um 2px. */ /* OHNE eigenes Gewicht. Die Zeile ist bereits dreifach gekennzeichnet — roter Strich links, Gruppe «Ihre Auswahl», Stellung oben —, und die Beschriftungsspalte traegt seit dem 1. August 2026 genau EIN Gewicht. Eine Spalte mit einem Gewicht liest sich als Spalte, eine mit dreien als Liste mit Ausnahmen. */ tr.ownrow td.rowlab { color: var(--ink); } tr.ownrow td.rowlab::before { content: ''; position: absolute; left: 0; top: 0; bottom: 1px; width: 3px; background: var(--accent); } /* KLEINER UND UMRANDET STATT GEFUELLT, seit dem 1. August 2026. Als gefuellte Pillen — dunkel fuer «wichtig», rot fuer «zwingend» — sprachen sie lauter als der Kriterienname, den sie begleiten, und der ist die Hauptsache. Dasselbe Argument wie beim managed-Etikett auf der Startseite. Die Farbe bleibt und traegt weiter die Unterscheidung: rot ist «zwingend», grau «wichtig». Sie steht jetzt in Schrift und Rand statt in der Flaeche. Die Zeile ist ohnehin schon dreifach gekennzeichnet — roter Strich links, Gruppe «Ihre Auswahl», Stellung oben. Das Etikett muss nur noch sagen, WELCHE der zwei Stufen gilt. */ .lvl { display: inline-block; margin-left: 8px; font-size: 9px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; padding: 0 5px; border-radius: 100px; border: 1.5px solid; background: none; vertical-align: 1px; } /* lvl-case = die Zeile, die den gewaehlten Fall selbst fuehrt (Preisprofile). Dasselbe Kennzeichen wie die uebrigen Auswahlarten, damit jede Tabelle gleich aussieht -- ein eigener Farbweg dafuer ist entfallen. */ .lvl-imp, .lvl-profile, .lvl-case { color: var(--ink-soft); border-color: var(--line-hard); } .lvl-req { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); } /* Generell entscheidungsrelevante Zeilen: nur die Beschriftung kräftiger, KEIN roter Hintergrund — Rot bleibt den eigenen Kriterien vorbehalten. */ /* «Entscheidungsrelevante» Zeile (key: true im Datensatz). Sie stand auf 620, die uebrigen auf 500 — zwei Sorten Beschriftung, deren Unterschied nirgends erklaert war. Geblieben ist die dunklere Tinte, die Strichstaerke ist weg: eine Spalte mit einem Gewicht liest sich als Spalte, eine mit zweien als Liste mit Ausnahmen. */ tr.keyrow td.rowlab { color: var(--ink); } table.cmp tbody tr:hover td:not(.grp) { background: color-mix(in srgb, var(--accent) 9%, var(--surface)); } tr.linkrow td { padding-top: 10px; padding-bottom: 12px; font-size: 12.5px; } tr.linkrow a { color: var(--muted); } tr.linkrow a:hover { color: var(--accent); } /* --------------------------------------------------- Preisbalken (Magnitude) Eine Messgrösse, eine Farbe: neutraler Ton, kein Signalrot. Die Zahl steht immer daneben, der Balken trägt die Information nie allein. Dunkelmodus ist ein eigener, gewählter Ton — keine automatische Umkehrung. */ :root { --bar: color-mix(in srgb, var(--ink) 58%, var(--surface)); } html[data-theme="dark"] { --bar: color-mix(in srgb, var(--ink) 62%, var(--surface)); } tr.pricerow td { padding-top: 7px; padding-bottom: 8px; } .pcell { display: flex; flex-direction: column; gap: 5px; } /* EIN GEWICHT FUER ALLE WERTE — siehe die Begruendung bei table.cmp td.num. Hier stand 450, damit der Listenpreis leichter wog als die Vergleichspreise darunter. Die Absicht war richtig, das Mittel falsch: eine Rangfolge in Strichstaerken ist eine Wertung, die der Leser nicht nachpruefen kann. */ .pval { font-variant-numeric: tabular-nums; white-space: nowrap; } .pval-na { color: var(--muted); font-weight: 500; } .ptrack { display: block; position: relative; height: 4px; border-radius: 2px; width: 118px; max-width: 100%; background: color-mix(in srgb, var(--line-hard) 55%, var(--surface)); } /* Korridor: Balken von Einstiegs- bis Ausbaupreis, Enden gerundet. Hiess bis Juli 2026 .seg und erbte dadurch versehentlich Rahmen und overflow von der generischen .seg-Regel des Ansichtsumschalters — bei 4px Höhe sichtbar. */ .ptrack .pbar { position: absolute; top: 0; height: 100%; min-width: 4px; border-radius: 2px; background: var(--bar); } /* .pval-span trug 560, um die Spanne schwerer zu setzen als den Listenpreis. Entfallen mit der Vereinheitlichung der Gewichte: was die Spanne von den Fallzeilen unterscheidet, sagt ihre Beschriftung und ihr Balken, nicht ihre Strichstaerke. */ /* Teilspanne: nicht alle Fälle erhoben. Derselbe Balken, nur blasser — KEIN einseitiges Auslaufen wie beim offenen Ende, denn die fehlenden Fälle könnten höher oder tiefer liegen. Eine Richtung zu zeigen wäre geraten. */ .ptrack .pbar-teil { opacity: .45; } /* Offenes Ende: Hersteller nennt nur einen «ab»-Preis */ .ptrack .pbar-open { background: linear-gradient(90deg, var(--bar), color-mix(in srgb, var(--bar) 15%, transparent)); width: 26px !important; } .scalenote { display: block; font-size: 10.5px; font-weight: 400; color: var(--muted); margin-top: 2px; } /* Zeile «Preisangabe»: woher der Preis kommt. Bewusst leicht und klein — sie raeumt die Aufmerksamkeit den Vergleichspreisen darunter ein und enthaelt keine Zahl, die verankern koennte. Gestrichelte Unterstreichung, wo ein Hinweis mit den Tarifstufen daran haengt. */ .pinfo { font-size: 12.5px; font-weight: 450; } .pinfo-na { color: var(--muted); font-weight: 400; } /* Annahmen unter einer Zeilenbeschriftung (Preisprofile). Bewusst NICHT umbruchfrei und nicht schmaler als die Spalte: die vier Angaben stehen in fester Reihenfolge, damit sie sich von Zeile zu Zeile untereinander lesen lassen. Etwas heller und kleiner als die Beschriftung, damit der Name die Zeile anführt und die Annahmen ihn nur belegen. */ .rowsub { display: block; font-size: 11px; font-weight: 400; line-height: 1.4; color: var(--muted); margin-top: 3px; white-space: normal; /* BREITE BEGRENZT: ohne Grenze zieht die Beschreibung die erste Spalte auf, und die Preisspalten -- der eigentliche Inhalt -- werden aus dem Bild gedraengt. Bei 30 Zeichen bricht sie auf zwei kurze Zeilen um und die Spalte bleibt so schmal wie die Namen darueber. */ max-width: 30ch; } /* Zahlenzellen: linksbündig wie alle übrigen Zellen der Tabelle — sie waren kurz rechtsbündig, das war ein Bruch im Bild und wird nicht weiterverfolgt. Gleichbreite Ziffern bleiben: sie ändern die Ausrichtung nicht, lassen aber gleich lange Beträge gleich lang aussehen. */ /* EIN GEWICHT FUER ALLE WERTE IN DER TABELLE. Gemessen standen hier vier Stufen nebeneinander: Haken und guenstigster Preis auf 700, Vergleichspreise auf 560, Listenpreise auf 450, gewoehnlicher Text auf 400. Das Lauteste in der Tabelle waren damit nicht die Preise, sondern die 196 Haken — dieselbe Strichstaerke wie die Auszeichnung des tiefsten Werts, also trug 700 an einer Stelle «das ist der guenstigste» und an 196 anderen nur «ja». Jetzt tragen alle Werte 400. Was wichtig ist, entscheidet der Leser mit den Filtern; die Tabelle stuft nicht vor. */ table.cmp td.num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; } /* Preis dieses Musterbetriebs über dem obersten Listenpreis des Anbieters. Gepunktete Unterstreichung und Hilfezeiger, KEINE Farbe und kein Zeichen: das ist die uebliche Form für «hier steht eine Erläuterung» und liest sich nicht als Vorwurf. Die Tatsache steht im title, für Vorleseprogramme zusätzlich als unsichtbarer Text — sie darf nie nur in der Linie stecken. */ .overval { text-decoration: underline dotted; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--muted); cursor: help; } /* TIEFSTER PREIS DER ZEILE: nicht mehr hervorgehoben. Er stand kraeftiger und gruen da — eine Auszeichnung, und damit eine Wertung: gruen heisst auf dieser Seite «gut», und der guenstigste Preis ist nicht der beste. Welcher Wert der tiefste ist, sieht man in einer Zahlenzeile ohnehin. Die Klasse bleibt im Quelltext: sie traegt fuer Vorleseprogramme den Hinweis «guenstigster», und der ist KEIN Gegenstueck zur Farbe, sondern ein Ersatz fuers Ueberfliegen einer Zeile, das mit den Augen geht und mit dem Ohr nicht. Die Probe pruefe-musterfaelle.js prueft die Klasse ebenfalls. */ /* «nicht erhoben» in einer Zahlenzeile: gedämpft, damit die Zahlen die Fläche behalten. Es ist das Fehlen eines Werts, nicht selbst einer. */ table.cmp td.nonum { color: var(--muted); font-size: 12px; font-weight: 400; } /* Der Haken traegt jetzt dieselbe Strichstaerke wie jeder andere Wert. Er darf dafuer etwas groesser sein: ein Haken ist ein duennes Zeichen und verschwaende auf Textgroesse. Groesse ist keine Wertung, Gewicht war eine. */ .yes { color: var(--good); font-size: 15px; line-height: 1; } .no { color: var(--line-hard); } .part { color: var(--muted); } .meter { display: inline-flex; gap: 3px; vertical-align: middle; } .meter i { width: 18px; height: 5px; border-radius: 2px; background: var(--line-hard); display: block; } .meter i.on { background: var(--accent); } .meter.m0 i.on { background: var(--line-hard); } /* Die Herkunftsangabe steht seit dem 23. August 2026 IN der Legendenzeile und ist darum ein Glied davon, kein eigener Absatz: dieselbe Groesse, dieselbe Farbe, abgesetzt durch denselben Strich wie die Passungsangabe. */ .quelle { border-left: 1px solid var(--line-hard); padding-left: 20px; } /* KEIN ROT IN DIESER ZEILE. Rot ist auf dieser Website der Absprung — und die Quellenangabe ist keine Einladung, wegzugehen, sondern eine Auskunft. Sie traegt darum die Textfarbe und Gewicht; erkennbar als Verweis wird sie an der Unterstreichung beim Ueberfahren. */ /* OHNE JEDE HERVORHEBUNG. Weder Farbe noch Gewicht: die beiden Verweise sehen aus wie der Text um sie herum. Der Weg dahin ging ueber zwei Zwischenstufen — erst Akzentfarbe, dann Textfarbe mit Gewicht und Linie —, und beide Male stach die Zeile mehr heraus als die Legende, mit der sie zusammensteht. Sie ist die leiseste Angabe der Seite: wer sie sucht, findet sie. ERKENNBAR BLEIBEN SIE TROTZDEM: beim Ueberfahren unterstrichen, beim Tabben mit dem Fokusrahmen der Seite. Das ist die Untergrenze — ein Verweis ohne JEDES Unterscheidungsmerkmal waere fuer die Tastatur noch da, fuer das Auge aber nicht mehr auffindbar. */ .quelle a { color: inherit; text-decoration: none; font-weight: inherit; } .quelle a:hover, .quelle a:focus-visible { text-decoration: underline; } .legend { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 11.5px; color: var(--muted); padding: 12px 2px 0; } /* DER BEHAELTER DES ZEICHENSCHLUESSELS LOEST SICH AUF. Er ist noetig, weil app.js ihn ueberschreibt und die Herkunftsangabe daneben stehenbleiben muss — aber als Rasterteil war er EIN Teil, und die Abstaende zwischen «vorhanden», «eingeschraenkt» und «nicht vorhanden» fielen weg («vorhanden~ eingeschraenkt»). display: contents macht seine Kinder wieder zu Teilen der Zeile. Dasselbe Mittel wie bei der Seitenleiste der Autorenseite, aus demselben Grund. */ #legendKey { display: contents; } .legend b { color: var(--ink-soft); } .legend-sep { border-left: 1px solid var(--line-hard); padding-left: 20px; } /* Die Kartenansicht ist im Juli 2026 entfallen, mit ihr .grid, .pcard, .pc-*, .mk, die Etiketten .tag/.tag-ch und der Ansichtsumschalter .seg. Geblieben ist .pth-owner: das Etikett im Tabellenkopf, gesteuert von SHOW_OWNER_TAG. Gefüllt statt umrandet — es ist ein Hinweis, keine Auszeichnung. */ .pth-owner { background: var(--ink); border-color: var(--ink); color: var(--bg); font-size: 9.5px; letter-spacing: .05em; text-transform: uppercase; font-weight: 650; padding: 2px 5px; border-radius: 3px; white-space: nowrap; flex: none; } .empty { text-align: center; padding: 70px 20px; border: 1px dashed var(--line-hard); border-radius: var(--r); background: var(--surface-2); } .empty h2 { font-size: 19px; } .empty p { color: var(--muted); max-width: 50ch; margin: 10px auto 20px; font-size: 14px; } /* ---------------------------------------------------------------- unten */ .sub { font-size: 12px; letter-spacing: .11em; text-transform: uppercase; color: var(--muted); font-weight: 650; padding-bottom: 10px; border-bottom: 1px solid var(--line-hard); margin-bottom: 20px; } /* Methodik: Kennzahlenleiste. Die Zahlen werden am Bau gezählt (methodZahlen in build.js) und stehen vor dem Text, weil «wie viel ist erhoben» die erste Frage ist, die ein Leser an eine Methodik stellt. Keine Kästen, nur eine Grundlinie — es sind Angaben, keine Kacheln zum Anklicken. */ .meth-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 18px 26px; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line-hard); } .meth-stat b { display: block; font-size: clamp(24px, 3vw, 32px); font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.05; } .meth-stat span { display: block; margin-top: 5px; font-size: 12.5px; color: var(--muted); line-height: 1.35; } /* ------------------------------------------------- Autorenseite (Variante F) Aufbau: Portrait schwimmt rechts, Überschrift und Vorspann laufen daneben — so entsteht das Kopfband ohne eine zweite Seitenhülle. Darunter zwei Spalten: Text links, gestapelte Kästen rechts. Die Leiste hat eine FESTE Breite und der Text den Rest. Umgekehrt (Leiste in fr) wüchse sie auf breiten Schirmen mit und die Kästen sähen leer aus. */ .legal-kicker { margin: 0 0 10px; font-size: 11.5px; font-weight: 750; letter-spacing: .11em; text-transform: uppercase; color: var(--accent); } /* Portrait als erster Kasten der Seitenleiste. Es schwamm vorher im Kopf nach rechts und brauchte dafür einen senkrechten Versatz, der an der Länge des Vorspanns hing — beim Kürzen des Textes lag er zweimal daneben. Als Kasten richtet es sich selbst aus: es beginnt dort, wo die Leiste beginnt. Quadratisch und nur leicht gerundet, nicht als Kreis: im weissen Kasten zeigt das Rechteck mehr vom Bild, und ein Kreis in einem Kasten sieht aus wie ein Profilbildchen in einem Formular. */ .af-bildkasten img { width: 100%; height: auto; aspect-ratio: 1; display: block; border-radius: 4px; background: var(--line); } .af-bildkasten > b { display: block; margin-top: 12px; font-size: 15px; font-weight: 650; letter-spacing: -.01em; color: var(--ink); text-transform: none; } /* Die drei Verweise in der Kachel. Die erste bekommt eine Trennlinie nach oben, damit Auskunft (Name, Rolle) und Wege (Profil, Firma, Adresse) auseinander liegen. */ .af-bildkasten a { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--ink); text-decoration: none; word-break: break-word; } .af-bildkasten a:first-of-type { margin-top: 12px; } .af-bildkasten a:last-child { padding-bottom: 0; } .af-bildkasten a:hover { color: var(--accent); } .af-bildkasten a i { font-style: normal; color: var(--accent); font-size: 12px; } .af-kern { clear: both; display: grid; gap: 34px; grid-template-columns: minmax(0, 1fr) 300px; align-items: start; margin-top: 30px; } /* Der Lesetext bekommt eine Stufe mehr Schrift als die uebrigen Rechtsseiten. Breiter allein macht nicht lesbarer: waechst die Spalte und die Schrift bleibt, stehen zu viele Zeichen in der Zeile. */ .af-haupt { min-width: 0; } .af-haupt .legal-p { font-size: 16px; line-height: 1.72; } .af-haupt .sub { font-size: 17px; } /* Die erste Überschrift trägt sonst die 30px von .legal .sub und rutscht damit um genau diesen Betrag unter den ersten Kasten der Seitenleiste. Gemessen, nicht geschätzt: der Versatz war −30px. */ .af-haupt .sub:first-child { margin-top: 0; } .af-haupt .sub:not(:first-child) { margin-top: 34px; } /* ---- die Seitenleiste ---- Sie beginnt normalerweise dort, wo das zweispaltige Feld beginnt, also auf Höhe der ersten Überschrift. Der negative Rand zieht sie auf die Höhe des Vorspanns hoch, damit die Bildkachel neben Name und Vorspann steht und nicht erst darunter. 132px sind gemessen: die Leiste beginnt ohne Rand bei 295, der Vorspann — «Ich bin Stefan Bernhard und betreibe diesen Vergleich» — bei 163. Damit stehen Vorspann und Kasten auf derselben Oberkante. Nicht die Oberzeile: sie ist nur eine Zeile hoch, der Kasten daneben mehrere hundert Punkte — der Vorspann ist der erste Absatz, der wie ein Block wirkt. DER WERT HAENGT AN DER HOEHE DES KOPFTEXTES und lag schon zweimal daneben, als der Text kuerzer wurde. Sauber waere, Kopftext und Leiste zu Geschwistern in EINEM Raster zu machen; das braucht einen Umbau von legalPage. Wer den Vorspann aendert, misst hier nach. */ .af-leiste { display: grid; gap: 14px; margin-top: -132px; } .af-kasten { background: var(--surface); border: 1px solid var(--line); border-radius: 5px; padding: 15px 16px; } .af-kasten > b { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; } .af-pos { padding: 10px 0; border-top: 1px solid var(--line); } .af-pos:nth-of-type(1) { border-top: 0; padding-top: 0; } .af-pos:last-child { padding-bottom: 0; } /* Die Jahresspanne führt den Eintrag: wer einen Werdegang prüft, liest die Jahre zuerst. Tabellenziffern, damit die Spalten stehen. */ .af-pos i { display: block; font-style: normal; font-size: 11.5px; letter-spacing: .05em; color: var(--accent); font-variant-numeric: tabular-nums; margin-bottom: 2px; } .af-pos b { display: block; font-size: 13.5px; font-weight: 650; line-height: 1.35; } .af-pos span { display: block; margin-top: 3px; font-size: 12px; line-height: 1.45; color: var(--muted); } .af-kasten a { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 13.5px; font-weight: 650; color: var(--ink); text-decoration: none; } .af-kasten a:nth-of-type(1) { border-top: 0; } .af-kasten a:hover { color: var(--accent); } .af-kasten a i { font-style: normal; color: var(--accent); font-size: 12px; } @media (max-width: 900px) { /* Einspaltig faellt die Leiste unter den Text — das Portrait stuende damit ganz unten, auf einer Autorenseite die falsche Reihenfolge. display: contents loest die Leiste als Kasten auf, ihre Kaesten werden Geschwister des Haupttextes. Erst dann greift order ueber alles hinweg, und der Bildkasten kann vor den Text. Werdegang und Ausbildung bleiben dahinter, wo sie hingehoeren. */ .af-kern { display: flex; flex-direction: column; gap: 22px; } /* Einspaltig gibt es keinen Kopftext daneben, den man einholen müsste — der negative Rand von oben muss hier weg, sonst rutscht der Bildkasten unter die Kopfzeilen. */ .af-leiste { display: contents; margin-top: 0; } /* EINSPALTIG NIMMT DER KOPFTEXT DIE GANZE BREITE ZURUECK — und diese drei Zeilen standen hier und taten es nicht. Die Grundregel setzt `max-width: calc(100% - 334px)` und steht 2000 Zeilen SPAETER; bei gleicher Spezifitaet gewinnt sie. Auf 390 Pixeln blieben Oberzeile, Name und Vorspann damit 362 - 334 = 28 Pixel breit: im Bild stand JEDES WORT in einer eigenen Zeile, ueber die ganze Autorenseite. Gefunden am 26. August 2026 im Bild — und die Messung danach fand einundzwanzig weitere Faelle derselben Art. Werte im Nachrang. */ /* Die Kachel bleibt schmal, damit das quadratische Portrait auf dem Telefon nicht den halben Bildschirm einnimmt. 190px waren zu schmal: die Adresszeile brach mitten im Wort. 260px tragen sie in einer Zeile. */ .af-bildkasten { order: -1; align-self: flex-start; max-width: 260px; } } /* Die Preisquellen unter «Warum manche Preisfelder leer bleiben». Gerendert aus vals.priceSrc, damit Erklärung und Tabellenlegende nicht auseinanderlaufen. */ .meth-list { margin: 10px 0 0; padding-left: 20px; font-size: 14px; color: var(--ink-soft); } .meth-list li { margin-top: 4px; } /* Fusszeile: schlanke Zeile am unteren Fensterrand. Sie liegt AUSSERHALB von .scroll und ist damit immer sichtbar; flex: none, damit sie ihre Höhe behält und der Scrollbereich den Rest bekommt. Nur eine Zeile — was dauernd zu sehen ist, darf keine Höhe fressen. */ /* flex: none, damit die Zeile ihre Höhe behält und nicht mitwächst. position: sticky mit left: 0 aus demselben Grund wie bei .below — scrollt eine breite Vergleichstabelle waagrecht, bleibt die Fusszeile an ihrem Platz. */ .site-foot { flex: none; position: sticky; left: 0; padding: 9px 0 10px; border-top: 1px solid var(--bar-line); background: var(--bar-bg); } /* SO SCHMAL WIE DIE KOPFLEISTE. .wrap gibt 1560px her, die Kopfleiste und die Abschnitte der Startseite laufen aber auf 1240 — die Fusszeile stand damit rund 160 Pixel je Seite weiter aussen. Marke links und Verweise rechts sassen sichtbar neben den Elementen darueber, mit denen sie fluchten sollen. Derselbe Wert wie bei .head-inner; wer einen aendert, aendert beide. */ .foot-inner { display: flex; flex-flow: row wrap; align-items: baseline; gap: 0 8px; width: 100%; max-width: 1240px; font-size: 12px; color: var(--bar-muted); line-height: 1.5; } .foot-brand { font-weight: 600; color: var(--bar-ink); } .foot-dot { color: var(--bar-line); } /* Die Verweise rechts als Gruppe an den rechten Rand: margin-left: auto nur auf dem ERSTEN. space-between würde alle Teile über die ganze Breite auseinanderziehen und Marke und Stand trennen. Alle drei tragen denselben Abstand — 8px Lücke plus 10px Rand = 18px, gleichmässig. Vorher hatte nur das Paar Impressum/Datenschutz einen Trennpunkt, was 18 · 8 · 18 ergab. */ /* ZWEI GRUPPEN, NICHT ACHT EINZELTEILE. Hier stand «.foot-nav { margin-left: 10px }» und «.foot-nav-first { margin-left: auto }»: der rechte Block entstand aus einem Rand am ERSTEN Verweis, und der musste mitwandern, sobald dieser Verweis ausgetauscht wurde. Zweimal ist er es nicht (siehe die Notizen in build.js). Jetzt traegt die GRUPPE den Rand, und der Abstand zwischen den Verweisen ist ein gap — 18 Pixel, derselbe Wert wie vorher aus 8 + 10. UND ERST DAMIT IST DIE FUSSZEILE AUF DEM TELEFON ZU ORDNEN: eine Reihe aus acht Teilen bricht um, wo der Platz endet, nicht dort, wo eine Gruppe aufhoert. Die gestapelte Fassung steht unten bei der 760er-Regel. */ .foot-meta { display: flex; align-items: baseline; gap: 8px; } .foot-links { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 18px; margin-left: auto; } /* Gestrichelt unterstrichen: die Verweise sollen als Verweise erkennbar sein, ohne dass eine durchgezogene Linie in der dunklen Leiste zu laut wird. Beim Ueberfahren wird die Linie durchgezogen — das ist die Rueckmeldung. */ .site-foot a { color: var(--bar-muted); text-decoration: none; } .site-foot a:hover { color: var(--bar-ink); text-decoration: underline; } /* ---------------------------------------------------------------- drawer */ .overlay { position: fixed; inset: 0; background: rgba(10,12,14,.5); z-index: 50; backdrop-filter: blur(2px); } .drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100%); z-index: 60; background: var(--surface); border-left: 1px solid var(--line-hard); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; animation: slideIn .2s cubic-bezier(.22,.7,.3,1); } @keyframes slideIn { from { transform: translateX(24px); opacity: .4; } to { transform: none; opacity: 1; } } .drawer-head { display: flex; align-items: flex-start; gap: 16px; padding: 22px 24px 16px; border-bottom: 1px solid var(--line); } .drawer-kicker { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 600; } .drawer-head h2 { font-size: 24px; margin-top: 4px; } .close { margin-left: auto; width: 32px; height: 32px; flex: none; border-radius: 50%; border: 1px solid var(--line-hard); background: var(--surface); cursor: pointer; font-size: 19px; line-height: 1; color: var(--muted); } .close:hover { border-color: var(--accent); color: var(--accent); } .drawer-body { overflow-y: auto; padding: 20px 24px 40px; } .dsec { margin-bottom: 24px; } .dsec > h3 { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 650; padding-bottom: 7px; border-bottom: 1px solid var(--line); margin-bottom: 11px; } .dsec p { font-size: 14.5px; color: var(--ink-soft); } .dlist { list-style: none; margin: 0; padding: 0; } .dlist li { font-size: 14px; color: var(--ink-soft); display: flex; gap: 9px; margin-bottom: 6px; } .dlist li::before { content: "+"; color: var(--good); font-weight: 700; flex: none; } .dlist.minus li::before { content: "–"; color: var(--accent); } .dtable { width: 100%; border-collapse: collapse; font-size: 13.5px; } .dtable td { padding: 7px 0; border-bottom: 1px solid var(--line); vertical-align: top; } .dtable td:first-child { color: var(--muted); width: 48%; } .dfit { display: grid; gap: 7px; } .dfit-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; font-size: 13.5px; } .dfit-row span { color: var(--ink-soft); } .drawer-cta { display: flex; gap: 10px; flex-wrap: wrap; } /* Der Zusatz ueber dem Datenblatt: er sagt, welche Zeilen darin stehen. Im Panel nur die der Kategorie, auf der Produktseite alle. Beides ist richtig, der Unterschied stand bisher nirgends. */ .dnote { margin: 0 0 9px; font-size: 12px; line-height: 1.5; color: var(--muted); } /* ---------------------------------------------------------------- responsive */ /* Hier standen zwei Regeln, die .head-meta stueckweise abgeraeumt haben: bei 1360px verschwand die zweite Angabe, bei 1180px die ganze Zeile. Beide sind mit .head-meta entfallen — was die Leiste nicht mehr traegt, muss sie auch nicht mehr abwerfen. */ @media (max-width: 1180px) { #priceRange { width: 96px; } .dd-val { max-width: 150px; } } @media (max-width: 780px) { .dd-panel-wide { min-width: 0; width: calc(100vw - 28px); grid-template-columns: 1fr; } } @media (max-width: 760px) { .wrap { padding: 0 14px; } .wrap-pad { padding: 0 14px; } th.corner, td.rowlab { width: 138px; min-width: 138px; } table.cmp thead th { min-width: 152px; padding: 10px 11px; } table.cmp td { padding: 7px 11px; } .pth-short { display: none; } .pth-name { font-size: 14.5px; } .legend-sep { border: 0; padding-left: 0; } } /* TELEFON. Die Masse sind nicht geschmackvoll gerundet, sondern gerechnet: auf den 390px eines gaengigen Geraets muessen die Kriterienspalte und ZWEI Anbieterspalten gleichzeitig sichtbar sein — 112 + 2 x 130 = 372. Warum zwei und nicht eine: mit einer sichtbaren Spalte ist die Seite kein Vergleich mehr, sondern ein Datenblatt, durch das man waagrecht blaettert. Der Leser muesste sich den Wert der ersten Spalte merken, um ihn mit der zweiten zu vergleichen — genau die Arbeit, die die Tabelle abnehmen soll. Enger als 130px geht nicht: «CHF 35–119/Mt.» ist die laengste Zelle und braucht mit Polsterung so viel. */ @media (max-width: 560px) { table.cmp { font-size: 12.5px; } table.cmp td { padding: 7px 9px; } .pth-name { font-size: 13.5px; } /* FESTE SPALTEN STATT INHALTSBREITE. Das war der eigentliche Hebel, und er lag nicht dort, wo er zu liegen schien. .table-scroll ist «width: max-content». Damit bekommt JEDE Spalte die Breite ihres laengsten Inhalts in EINER Zeile — und zwar auch dann, wenn der Inhalt umbrechen duerfte, denn max-content misst grundsaetzlich ungebrochen. Umbruch zu erlauben aendert daran nichts; gemessen blieb die bexio-Spalte auf 171px, gehalten von «bexio AG (Mobiliar-Gruppe)». Mit table-layout: fixed zaehlen nur noch die Breitenangaben der ersten Zeile, und der Inhalt richtet sich danach statt umgekehrt. 112 + 2 x 130 = 372 passen damit wirklich auf 390px. Auf breiten Schirmen bleibt es beim automatischen Layout: dort ist Inhaltsbreite die bessere Wahl, weil Platz da ist und ein unnoetiger Umbruch nur Zeilen hoeher macht. overflow-wrap: anywhere ist die Sicherung. Bei festen Spalten kann ein langes Wort ohne Trennstelle sonst ueber den Zellenrand in die Nachbarzelle laufen — ein Produktname wie «Buchhaltungssoftware» tut genau das. */ /* 112 UND NICHT 124: mit 124 ergaben Kriterienspalte und zwei Anbieter zusammen 386 von 390 Pixeln. Vom dritten Anbieter waren null Pixel zu sehen, und die Tabelle sah aus, als endete sie nach zwei Spalten — bei dreissig. Mit 112 bleiben rund 28px des dritten sichtbar. Ein angeschnittener Inhalt ist der uebliche und beste Hinweis darauf, dass es seitwaerts weitergeht: er braucht keinen Text und keinen Pfeil. Enger geht es nicht — «CHF 35–119/Mt.» misst mit Polsterung 108px. */ table.cmp td { white-space: normal; overflow-wrap: anywhere; max-width: 112px; } /* min-width MUSS hier mit weg. Bei festen Spalten gilt trotzdem die Untergrenze der Kopfzelle, und die stand aus den breiteren Stufen auf 152px — die Breitenangabe darunter blieb wirkungslos, gemessen 136px je Spalte statt der gesetzten 124. Und beide Regeln brauchen dieselbe Kraft wie «table.cmp thead th»: mit dem kuerzeren «th.corner» haette die allgemeinere Regel gewonnen und die Kriterienspalte waere so breit wie eine Anbieterspalte. */ table.cmp thead th { min-width: 0; max-width: 112px; padding: 10px 9px; overflow-wrap: anywhere; } /* Der Produktname bricht NUR an Leerzeichen. «anywhere» erbt er sonst von der Kopfzelle und wird zu «Banana Buchhaltu / ng Plus» — ein Eigenname, den man mitten im Wort trennt, liest sich wie ein Tippfehler. «break-word» greift erst, wenn ein einzelnes Wort wirklich nicht passt. UND HOECHSTENS ZWEI ZEILEN. In einer Tabelle sind alle Kopfzellen gleich hoch, also bestimmt der laengste Name die Hoehe fuer alle: «Dynamics 365 Business Central» braucht in einer 112px-Spalte vier Zeilen und zog den Kopf auf 142px — ein Sechstel des Bildschirms, auf jeder Kategorieseite, wegen eines einzigen Anbieters. Zwei Zeilen fassen rund 24 Zeichen und benennen die Spalte eindeutig; der vollstaendige Name steht in der Kopfzelle als title-Attribut und auf der Produktseite, die der Name verlinkt. */ .pth-name { overflow-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* UND EINE EIGENE ZEILE FUER DEN NAMEN. In der Kopfzeile stehen drei Dinge nebeneinander: Auswahlzeichen, Name, Kreuz zum Wegnehmen. Bei 112px Spalte blieben dem Namen nach Polsterung, Zeichen und Abstaenden noch 48px — und dann brach selbst «ClubDesk» zu «ClubDe / sk». Ein Produktname, der mitten im Wort umbricht, ist keine Beschriftung mehr. Auf einer eigenen Zeile hat er die vollen 94px. Die Zeile kostet nichts: die beiden Zeichen sind flach, und der Kopf wird dadurch nicht hoeher als mit vier gebrochenen Namenszeilen. */ .pth-row { flex-wrap: wrap; row-gap: 3px; } .pth-name { flex: 1 0 100%; order: 2; } /* Haarlinie zwischen den Kopfzellen. Das Kreuz zum Wegnehmen sitzt am rechten Rand seiner Zelle und stand damit unmittelbar neben dem Auswahlzeichen der NAECHSTEN Spalte — auf drei nebeneinanderliegenden Spalten ohne Trennung las sich die Reihe als «× ○ KLARA» statt als «○ KLARA … ×». Die Linie ordnet jedes Zeichen wieder seiner Spalte zu; auf breiten Schirmen ist der Abstand gross genug und sie bleibt weg. */ table.cmp thead th + th { border-left: 1px solid var(--line); } table.cmp thead th.corner { min-width: 0; max-width: 106px; } table.cmp tbody td.rowlab { max-width: 106px; } /* Der Zusatz unter «Preisspanne» nennt die Skala des Balkens. Er ist die laengste Beschriftung der ersten Spalte und hielt sie allein auf 151px — fuer eine Erlaeuterung des Balkens, der daneben ohnehin zu sehen ist. */ .scalenote { display: none; } /* ---- Spaltenweise einrasten ------------------------------------------- Bisher war die Bedienung der Tabelle auf dem Telefon ein einziger langer Schiebebalken ueber 3386 Pixel. Wo man loslaesst, steht man — und man steht fast immer mitten in einer Spalte: gemessen war der erste Preis nach einem Wisch als «HF 9–49/Mt.» zu lesen, weil die klebende Kriterienspalte seinen Anfang verdeckte. scroll-snap laesst jeden Wisch auf einer Spaltenkante enden. Aus dem Ziehen eines Blattes wird ein Blaettern von Anbieter zu Anbieter — und genau das ist die Bewegung, die der Leser meint. scroll-padding-left haelt dabei die Breite der klebenden Kriterienspalte frei. Ohne diese Zeile rastete die Spalte buendig am linken Rand ein und verschwaende dort unter der Kriterienspalte — das Einrasten haette den Fehler nicht behoben, sondern festgeschrieben. «proximity» und nicht «mandatory»: mandatory zwingt bei JEDER Bewegung in die naechste Rastung, auch beim senkrechten Rollen mit einer leichten Schraeglage — die Tabelle zuckte dann seitwaerts, ohne dass jemand sie seitwaerts bewegen wollte. proximity rastet nur, wenn ohnehin schon fast eine Kante erreicht ist. */ .scroll { scroll-snap-type: x proximity; scroll-padding-left: 138px; } table.cmp thead th { scroll-snap-align: start; } th.corner { scroll-snap-align: none; } } /* ------------------------------------------------------------- Tippflaechen Gemessen auf 390px: das «!» am Kriterium 18x18, das Auswahlzeichen einer Tabellenspalte 13x13, das Erklaerzeichen 15x15, eine Kriterienzeile 19px hoch. Mit der Maus trifft man das; mit dem Finger nicht zuverlaessig. ZIEL SIND 24 PIXEL und nicht die oft genannten 44. 24x24 ist das Mass, das die Zugaenglichkeitsrichtlinie WCAG 2.2 als Mindestgroesse fuehrt; 44 kommt aus Apples Gestaltungsempfehlung und waere hier teuer erkauft — vierzehn Kriterienzeilen zu je 44px sind 616px Blatthoehe fuer eine Liste, durch die man ueberblicken koennen will. ZWEI WEGE, je nach Element: — Wo Platz ist (Kriterienzeile, «!»), waechst das Element selbst. — Wo kein Platz ist, waechst nur die TREFFERFLAECHE ueber ein ::after. Das Zeichen bleibt so klein, wie es aussehen soll. Ein sichtbar vergroessertes Auswahlzeichen in dreissig Tabellenspalten waere eine Aufforderung, und genau das soll es nicht sein. Die Grenze ist 900px und nicht «(pointer: coarse)»: ein Fenster dieser Breite ist fast immer ein Telefon oder ein Tablet, und wer am Rechner sein Fenster so schmal zieht, dem schaden groessere Ziele nicht. */ @media (max-width: 900px) { .fp-row { grid-template-columns: 1fr 22px 24px; min-height: 34px; } .fp-lab { padding: 8px 0; font-size: 12.5px; } .fp-imp { width: 24px; height: 24px; font-size: 11px; } /* Unsichtbare Vergroesserung. inset ist negativ, die Flaeche ragt also ueber das Zeichen hinaus — ohne es zu verschieben, weil sie absolut liegt. */ .info { position: relative; } .info::after { content: ''; position: absolute; inset: -5px; } /* Beim Auswahlzeichen der Spalte kommt der Abstand zum Produktnamen dazu: ohne ihn griffe die vergroesserte Flaeche ueber die ersten Zeichen des Namens, und ein Tipp auf den Namen — der auf die Produktseite fuehrt — landete auf dem Auswahlzeichen. Eine groessere Trefferflaeche, die eine andere verschluckt, ist keine Verbesserung. */ /* Bei schmalen Spalten bricht der Produktname auf zwei bis drei Zeilen. Das Auswahlzeichen ist «align-self: center» und sass dann auf der MITTLEREN Zeile, waehrend das Kreuz zum Wegnehmen oben blieb — zwei Schalter derselben Spalte auf zwei Hoehen, dazwischen der Name. Beide gehoeren an den oberen Rand, zur ersten Zeile des Namens. */ .pth-row { gap: 9px; align-items: flex-start; } .pth-pick { align-self: flex-start; margin-top: 2px; } .pth-pick { position: relative; } .pth-pick::after { content: ''; position: absolute; inset: -6px; } /* Dasselbe fuer das Kreuz, das eine Spalte wegnimmt — es sitzt am rechten Ende derselben Kopfzeile. */ .pth-x { position: relative; } .pth-x::after { content: ''; position: absolute; inset: -5px; } /* Die Ausklappfelder («Ich bin», «Sortieren nach») waren 20px hoch. Sie tragen im Panel die ganze Breite, es fehlte allein die Hoehe. */ .dd > summary { min-height: 34px; display: flex; align-items: center; } .fpanel .dd > summary { padding-top: 6px; padding-bottom: 6px; } .check { min-height: 30px; } /* Der Preisschieber war 16px hoch. Ihn mit dem Finger zu fassen war Glueck. */ #priceRange { height: 24px; } /* Verweise IN der Tabelle — «öffnen ↗» in der letzten Zeile, 29 Stueck, und der Erklaerverweis an jedem Abschnittstitel. Beide waren rund 17px hoch. inline-block, damit die Polsterung ueberhaupt greift: an einem inline- Element vergroessert sie den Kasten nicht. */ table.cmp td a, tr.grouprow .grplink { display: inline-block; padding: 4px 0; } /* Fusszeile: vier Verweise, die auf dem Telefon in eine zweite Reihe fallen und dort mit 18px Zeilenhoehe dicht uebereinander lagen. Die Polsterung gibt jedem seine 24px, ohne die Leiste sichtbar aufzublaehen — die Reihen ruecken nur um wenige Pixel auseinander. */ .site-foot a { display: inline-block; padding: 4px 0; } .foot-inner { row-gap: 2px; } } /* ------------------------------------ Fusszeile auf dem Telefon: gestapelt VORHER WAR SIE EINE REIHE AUS ACHT TEILEN mit flex-wrap: Marke, Trennpunkt, Stand und sechs Verweise fielen um, wo der Platz endete. Die zweite Reihe begann irgendwo mitten in der rechten Gruppe, die dritte auch, und keine Kante lag ueber einer anderen — auf einer Leiste, die auf JEDER Seite dauernd sichtbar ist. JETZT: die Verweise als Raster mit drei Spalten und zwei Reihen, darunter Marke und Stand als eine Zeile. Gleiche Kanten, gleiche Abstaende — und keinen Pixel hoeher als das Durcheinander vorher, weil die Zahl der Zeilen dieselbe ist. DIE VERWEISE OBEN, die Auskunft darunter: das ist die Ordnung, die eine Fusszeile auf dem Telefon ueberall hat — Wege zuerst, Kleingedrucktes zuletzt. Im Quelltext steht die Marke vorn, weil sie auf dem Schirm links steht; umgestellt wird mit `order`. DIE GRENZE IST 760 UND NICHT 900 wie bei den Tippflaechen darueber: bei 900 Pixeln ist Platz fuer die eine Reihe, und ein gestapelter Fuss unter einer einzeiligen Kopfleiste waere ein Bruch. Der Block steht NACH dem 900er — `.site-foot a` kommt in beiden vor, und bei gleicher Spezifitaet gewinnt die spaetere Regel. */ @media (max-width: 760px) { .foot-inner { flex-direction: column; align-items: stretch; gap: 6px; } /* EINE ZEILE, UND ZWAR DURCH RECHNEN. Hier stand ein Raster mit drei Spalten und zwei Reihen; es war ordentlich, aber es TEILTE sechs Verweise, die zusammengehoeren, auf zwei Reihen — auf Wunsch des Betreibers stehen sie jetzt nebeneinander. GEHT DAS AUF? Gerechnet bei 11px auf einem 390er-Telefon: .wrap laesst 362 Pixel, die deutschen Woerter messen zusammen rund 255, und die fuenf Trenner kosten je 15. Macht 330 — 32 Pixel Luft. Italienisch und Englisch liegen darunter. FRANZOESISCH NICHT: «Mentions légales» und «Confidentialité» machen die Reihe rund ein Viertel laenger als die deutsche, und sie passt nicht. Darum flex-wrap und zentriert statt einer erzwungenen Zeile: wo es reicht, steht alles nebeneinander; wo nicht, bricht es in zwei ZENTRIERTE Zeilen. Das ist der Unterschied zum Zustand von heute Morgen — dort war der Umbruch nicht geordnet, weil er mitten in einer linksbuendigen Reihe aus acht Einzelteilen geschah. DER TRENNER IST EIN ::after UND KEIN ::before, und das ist der Punkt, an dem die Kopfzeile der Kategorieseite heute gescheitert ist: ein Trenner VOR dem Wort wandert beim Umbruch an den Zeilenanfang und trennt dort nichts. Hinter dem Wort bleibt er am Ende der vorigen Zeile und faellt nicht auf. */ .foot-links { order: 1; margin-left: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0; font-size: 11px; } .foot-links a:not(:last-child)::after { content: "·"; margin: 0 6px; color: var(--bar-line); } /* inline-block, damit die Polsterung ueberhaupt greift — an einem inline- Element vergroessert sie den Kasten nicht. Die 24 Pixel Tippflaeche kommen aus 11px Schrift, 1.5 Zeilenhoehe und 3 Pixeln oben und unten. */ .site-foot a { display: inline-block; padding: 3px 0; } /* Marke und Stand darunter, eine Stufe leiser: sie sind Auskunft, die Verweise sind Wege. */ .foot-meta { order: 2; justify-content: center; font-size: 11px; } } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } html { scroll-behavior: auto; } } @media print { .site-head { display: none; } /* Im Druck bleibt der Kopf: er sagt, WELCHE Kategorie das Blatt zeigt. Der Schweiz-Wähler nicht — er klappt auf Papier nichts auf. */ .cat-head .chside, .cat-head .dd { display: none; } html, body { height: auto; overflow: visible; display: block; background: #fff; } /* display zurücksetzen: .scroll ist im Bildschirmlayout eine Flex-Spalte, die die Fusszeile bei kurzem Inhalt nach unten drückt. Im Druck gibt es keine Fensterhöhe, an der sich das ausrichten liesse. */ .scroll { overflow: visible; display: block; } .site-foot { position: static; } .table-scroll { border: 0; width: auto; } table.cmp thead th, tr.grouprow td, td.rowlab, th.corner { position: static; } } /* ========================================================================= Startseite — Kategorienwahl Kompakt: dreizeilige Kacheln (Name mit Anzahl, Kurzzeile, Kriterienzeile). Die Kriterien standen vorher als Chips unter einer eigenen Überschrift — das kostete zwei Zeilen je Kachel und machte die Seite bei vierzehn Kategorien unnötig lang. ========================================================================= */ /* ============================================================================ EIN KOPF FUER DIE DREI UEBERSICHTSSEITEN Vergleichen, Marktdaten und Blog waren drei verschiedene Systeme, gemessen am 24.08.2026: Seite Breite Polsterung oben Titel Vergleichen 1240 px 30 px clamp(25, 3vw, 38) Marktdaten 1180 px 26 px clamp(24, 3vw, 34) Blog 1100 px 44 px clamp(30, 3.9vw, 46) Drei Breiten, drei Abstaende, drei Titelgroessen — beim Wechsel von einer Seite zur naechsten sprang alles. Jetzt EINE Marke fuer alle drei: --seitenbreite. Sie steht auf 1180 px, der Mitte der drei; --a-col der Artikelseiten zieht mit, damit auch der Blog dieselbe Spalte hat wie seine Nachbarn und nicht Kopf und Koerper verschieden breit sind. ============================================================================ */ :root { --seitenbreite: 1180px; /* Gewicht und Laufweite der Seitentitel. Der Blogkopf trug 690 bei -.032em, Vergleichen und Marktdaten 620 bei -.036em — im direkten Vergleich sah das nach zwei Schriften aus. */ --h1-fett: 620; --h1-lauf: -.036em; /* EIN MASS FUER ALLE SEITENTITEL. Vorher trugen die Seitenarten zehn verschiedene Groessen — von clamp(21,2.4vw,28) auf den Kriterienseiten bis clamp(30,3.9vw,46) im Blog. Beim Wechsel sprang der Titel bei jedem Klick. ZWEI AUSNAHMEN bleiben, beide begruendet: .st-hero h1 ist die Kopfzone der Startseite und darf groesser sein, und .cat-head h1 ist keine Ueberschrift im selben Sinn, sondern eine schmale Leiste ueber der Vergleichstabelle. */ --h1: clamp(26px, 3vw, 38px); /* Der Abschnittstitel: eine Stufe unter dem Seitentitel. */ --h2: clamp(23px, 2.5vw, 32px); } .start .wrap { padding-top: 40px; padding-bottom: 34px; max-width: calc(var(--seitenbreite) + 40px); } /* HIER STANDEN .start-kicker, .start h1 UND .start-lead. Mit dem Umbau der Startseite sind Kicker, Titel und Vorspann in die Kopfzone gewandert und heissen dort .st-eyebrow, .st-hero h1 und .st-lead — sie brauchen andere Groessen, weil sie jetzt eine ganze Zone tragen und nicht eine Zeile ueber einem Kachelgitter. Der Abschnitt .start ist geblieben: er ist der letzte Abschnitt der Seite und traegt Gabel, Bereichskacheln und Branchenliste. */ /* DER AUSLOESER DER ROTEN LEISTE IM VORSPANN — zwei Zustaende, und der erste sieht nach nichts aus. Ausgeliefert wird ein nackter mit .ch-open: ohne JavaScript soll die Wendung nicht wie etwas Anfassbares aussehen, denn ohne JavaScript tut sie nichts. Erst start.js setzt .ch-open-an dazu, und dann ist es eine Schaltflaeche mit allem, was dazugehoert. Der Unterstrich ist roetlich wie bei jedem Verweis der Seite (--link-line), aber GEPUNKTET und nicht durchgezogen. Die Bedeutung steht weiter oben im Blatt schon geschrieben, bei .overval: «gepunktete Unterstreichung … das ist die uebliche Form fuer ». Genau das trifft hier zu — die Wendung fuehrt nicht auf eine andere Seite, sie schlaegt eine Erklaerung neben dem Text auf. Ein durchgezogener Strich haette einen Seitenwechsel versprochen, den es nicht gibt. Gestrichelt (wie .cat-why) waere die zweite Moeglichkeit und war kurz gesetzt: deutlicher sichtbar, aber im Satz unruhiger, und .cat-why bedeutet «fuehrt zur Begruendung» — also doch ein Ziel. Auf 15px liegen die beiden ohnehin dicht beieinander; gepunktet ist das leisere und das begrifflich richtige. Die Schrift bleibt in der Farbe des Absatzes: rot heisst auf dieser Seite «von Ihnen gewaehlt» und «zwingende Anforderung», eine dritte Bedeutung braucht es nicht. */ .ch-open-an { cursor: pointer; text-decoration: underline dotted; text-decoration-color: var(--link-line); text-decoration-thickness: 1px; text-underline-offset: 3px; } .ch-open-an:hover, .ch-open-an:focus-visible { color: var(--ink); text-decoration-color: var(--accent); } .ch-open-an:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; } /* Der Schlusssatz unter der Aufzaehlung: kleiner und abgesetzt, er ist ein Nachtrag und keine weitere Besonderheit. */ .chside-more { margin-top: 18px; font-size: 13px; opacity: .82; } /* Mehr Luft nach OBEN als nach unten: eine Ueberschrift gehoert zu dem, was sie ankuendigt. Bei 20 oben gegen 14 unten stand sie fast mittig zwischen den Bloecken und schwebte. 34 gegen 14 bindet sie nach unten. */ .start-sub { margin-top: 34px; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 620; } /* GLEICHER ABSTAND ZUR UEBERSCHRIFT WIE BEI DEN GROSSEN KACHELN. Unter der Grundregel .sub standen 20px Aussenabstand, und die Raster brachten nochmals 14px mit — die kleinen Kacheln hingen damit 34px unter ihrer Linie, die zwei grossen 8px. Zwei Abstände für dieselbe Beziehung auf einer Seite. Der kleinere gewinnt: er bindet die Kacheln an ihre Überschrift, statt sie frei darunter schweben zu lassen. Der Abstand NACH OBEN (34px, zum vorigen Abschnitt) bleibt gross — er ist es, der die Abschnitte trennt, und er muss deutlich grösser sein als der nach unten, sonst gehört die Überschrift optisch nach oben statt nach unten. */ .start-sub { margin-bottom: 8px; } .start-sub + .cat-grid, .start-sub + .br-grid, .start-sub + .cat-grid-soon { margin-top: 0; } .start-omitted { margin-top: 22px; padding-top: 13px; border-top: 1px solid var(--line); } /* Vierte Ebene «selbst bauen»: eine ruhige Abschlusszeile statt eines vierten Kachelrasters. Die Gewichtung der Startseite laeuft damit abwaerts — breite Karten, Karten, Pillen, Schlusszeile — und springt nicht auf einen schweren Einzelkasten zurueck. */ /* ------------------------------------------------- Die Grundsatzfrage oben Zwei Kacheln nebeneinander: kaufen oder bauen. Links gefuellt, rechts nur umrandet — «selbst bauen» ist der Weg der Minderheit und muss gleich sichtbar sein, nicht gleich laut. Unter 720px untereinander, Kaufen zuerst: zwei gequetschte Kacheln nebeneinander sind schlechter als zwei volle untereinander. */ .fork { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 14px; } /* ZWEI DRITTEL ZU EINEM DRITTEL, nicht halbe-halbe. Links steht die Antwort für die meisten Betriebe, rechts die für die wenigen, denen nichts passt. Gleich grosse Kacheln stellten die zwei als gleichwertige Wahl hin; die Breite sagt den Rang, ohne dass ein Wort ihn behaupten muss. Erst ab 720px: darunter stehen die Kacheln ohnehin untereinander, und ein Drittel von 380px trüge die Überschrift «Software selbst bauen» nicht. GESETZTE PLAETZE, nicht der natürliche Fluss. Im Quelltext stehen die vier Teile in der Reihenfolge des schmalen Schirms: Titel, Kachel, Titel, Kachel. Ohne Zuweisung landeten sie im Raster als Titel | Kachel / Titel | Kachel — also nebeneinander statt übereinander. Die vier Regeln stellen die Spalten auf: erste zwei links, letzte zwei rechts. Die Titelzeile ist EINE Rasterzeile für beide Spalten. Damit stehen die zwei Titel auf derselben Grundlinie, auch wenn der linke umbricht und der rechte nicht — und die Kacheln beginnen darunter trotzdem auf gleicher Höhe. */ @media (min-width: 720px) { /* BREITERE RINNE ALS 8px. Solange die zwei Kacheln unter EINER Überschrift standen, war der Abstand der Kachelabstand — 8px, wie im Kachelraster darunter. Jetzt sind es zwei Abschnitte mit je eigener Überschrift und eigener Grundlinie, und zwei Linien in 8px Abstand lesen sich als EINE Linie mit einer Kerbe. 24px trennen sie zu zwei Abschnitten; mehr wäre ein Loch in der Seite. Nur waagrecht: senkrecht bleiben es 8px, sonst stünde der Titel von seiner eigenen Kachel weiter weg als von der fremden. */ .fork { grid-template-columns: 2fr 1fr; grid-template-rows: auto 1fr; column-gap: 24px; } .fork > :nth-child(1) { grid-area: 1 / 1; } .fork > :nth-child(2) { grid-area: 2 / 1; } .fork > :nth-child(3) { grid-area: 1 / 2; } .fork > :nth-child(4) { grid-area: 2 / 2; } } /* Der Aussenabstand der Ueberschrift sitzt im Raster falsch: er stammt aus der Zeit, als sie ueber dem Raster stand und ihn gegen den Text darueber brauchte. Innerhalb des Rasters trennt sie die Rasterluecke von der Kachel. Der Abstand nach oben bleibt und wandert an .fork selbst. */ /* h2 IM WAEHLER, nicht nur die zwei Klassen: weiter unten steht .start-sub:first-of-type mit margin-top: 24px, und das traf von den beiden Titeln nur den linken — er sass dadurch 24px tiefer als der rechte, zwei Ueberschriften nebeneinander auf zwei Linien. Bei gleicher Spezifitaet gewinnt die spaetere Regel; das Element im Waehler hebt diese hier darueber. Derselbe Fallstrick ist im Stilblatt schon dreimal vermerkt (.chside, .wrap-full.layout, .head-blog). */ .fork { margin-top: 34px; } .fork > h2.fork-sub { margin-top: 0; margin-bottom: 0; } /* Keine Mindesthoehe. 148px liessen unter dem kurzen Text der linken Kachel eine leere Zeile stehen — die Kachel soll so hoch sein wie ihr Inhalt. Gleich hoch werden die beiden trotzdem: das Raster streckt sie, und margin-top:auto haelt die Fusszeile beider auf derselben Linie. */ .fork-card { display: flex; flex-direction: column; gap: 3px; padding: 12px 15px 13px; border-radius: var(--r); text-decoration: none; border: 1px solid var(--line-hard); background: var(--surface); color: var(--ink); } /* WENN DER ZEIGER AUF DER MARKE STEHT, reagiert die Kachel NICHT. Der Klick trifft dort die Marke und nicht die Kachel — eine Kachel, die trotzdem aufleuchtet, verspricht eine Handlung, die nicht ausgeloest wird. Mit :not() statt Zuruecksetzen: so muss die Regel die Grundwerte nicht kennen. */ .fork-card:hover { color: inherit; border-color: var(--accent); box-shadow: var(--shadow-lg); } .fork-card { position: relative; } /* Kopfzeile der Gesamtloesungskacheln: Fahne, Name, Anzahl rechts aussen — dieselbe Anordnung wie bei den Bereichskacheln darunter. */ .fork-top { display: flex; align-items: center; gap: 8px; } .fork-h { flex: 1; font-size: 18px; font-weight: 640; letter-spacing: -.01em; } .fork-n { flex: none; font-size: 15px; font-weight: 660; color: var(--muted); font-variant-numeric: tabular-nums; } /* Auf Lesebreite umbrechen statt ueber die ganze Kachel laufen: dieselben Texte wie unten ergeben so auch hier zwei Zeilen, und eine Zeile ueber 700 Pixel liest sich ohnehin schlecht. Feste Hoehe, damit die zwei Kacheln gleich hoch bleiben, auch wenn ein Text kuerzer ist. */ /* DREI ZEILEN STATT ZWEI, und keine FESTE Höhe mehr. Die feste Höhe hielt die zwei Kacheln gleich hoch, als sie nebeneinander im Fluss standen. Seit sie gesetzte Rasterplätze in einer 1fr-Zeile haben, macht das Raster sie ohnehin gleich hoch — die Angabe schnitt nur noch Text ab. Die dritte Zeile trägt, was die grosse Kachel jetzt sagt: nicht bloss WAS in einem System steckt, sondern WARUM eines besser ist als drei. max-height bleibt als Notausgang, falls ein Text in einer Sprache länger gerät. */ .fork-p { font-size: 13px; line-height: 1.45; color: var(--ink-soft); max-height: calc(3 * 1.45em); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } /* Die uebrigen Gesamtloesungen: eine leise Zeile, keine dritte Kachel. */ .fork-also { margin-top: 10px; font-size: 12.5px; color: var(--muted); } .fork-also a { color: var(--ink-soft); } .fork-also a:hover { color: var(--accent); } .start-disc { max-width: 82ch; margin-top: 10px; font-size: 14px; color: var(--ink-soft); } .cat-grid { display: grid; gap: 8px; margin-top: 14px; grid-template-columns: repeat(auto-fill, minmax(min(224px, 100%), 1fr)); } .cat-grid-soon { margin-top: 14px; } .cat-card { display: flex; flex-direction: column; gap: 5px; padding: 9px 12px 10px; text-decoration: none; color: inherit; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-s); box-shadow: var(--shadow); transition: border-color .14s ease, box-shadow .16s ease; /* Bezug für die Ecke oben rechts (.cat-badge). */ position: relative; } /* Marken oben rechts auf der Kachel: «Demo» (erfundener Bestand) und «managed» (Dienstleistung statt Software). Beide in einer Gruppe, absolut gesetzt statt in .cat-top — dort nähmen sie der Überschrift Platz und brächen bei langen Namen um. «Demo» behält seine dunkle Fläche und steht ZUERST: es ist eine Warnung, keine Einordnung. «managed» bleibt zurückhaltend und ohne Rot — Rot heisst auf dieser Seite «von Ihnen gewählt» und in der Schweiz-Leiste «zwingende Anforderung». Eine dritte Bedeutung würde beide entwerten. */ .cat-badges { position: absolute; top: 9px; right: 11px; display: flex; align-items: center; gap: 5px; } /* AUSPROBIERT UND VERWORFEN, am 30. Juli 2026: das Etikett stand kurz als gefüllte Fläche da, erst in --ink, dann zurückgenommen in --muted. Beides war zu laut. Gefüllt zieht es den Blick vor den Namen, den es begleitet — und es benennt eine Sorte, keine Warnung. Die Warnung auf dieser Seite ist «Demo», und die hat ihre dunkle Fläche aus gutem Grund allein. Also wieder die dezente Fassung: gedämpfte Schrift, heller Grund, Rand. */ .cat-badge { font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase; font-weight: 660; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line-hard); border-radius: 3px; padding: 2px 5px; white-space: nowrap; } .cat-card:hover .cat-badge { color: var(--accent); border-color: var(--accent); } /* HIER STANDEN .cat-ico, .cat-flag UND .cat-mk — Globus, Kreuz und der Trefferbereich um sie. Alle drei sind am 17. August 2026 entfallen: die Marke sass auf 40 Kacheln und Branchenzeilen, 37 davon als Fahne, und unterschied damit nichts. Markiert wird jetzt die Ausnahme, mit einem Wort in .cat-badge. Begruendung in build.js an der Stelle von markeLink. Mit ihnen ist das «» aus allen Hover-Regeln der Kacheln und Branchenzeilen gefallen — es hielt die Kachel zurueck, solange der Zeiger auf der Marke stand, und ohne Marke gibt es nichts zurueckzuhalten. Das Kreuz der roten Leiste (.ch-mark) bleibt: es steht einmal je Seite und traegt die Marke, nicht eine Einordnung. */ .cat-why { position: relative; z-index: 2; align-self: stretch; display: flex; align-items: center; gap: 7px; margin: auto -15px 0; padding: 8px 15px 0; border-top: 1px solid var(--line); font-size: 11.5px; line-height: 1.25; color: var(--muted); text-decoration: none; } /* Gestrichelt unterstrichen — nur der Text, nicht der Pfeil: eine Linie unter dem Pfeil sieht aus wie ein Zeichensetzungsfehler. Beim Ueberfahren wird sie durchgezogen, das ist die Rueckmeldung. */ .cat-why > span { text-decoration: underline dashed; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: var(--line-hard); } .cat-why > span::after { content: " →"; text-decoration: none; } .cat-why:hover { color: var(--accent); } .cat-why:hover > span { text-decoration: underline solid; text-decoration-color: currentColor; } /* Flaechendeckender Verweis der Kachel: er liegt UNTER Marke und Verweis. */ .cat-card { position: relative; display: flex; flex-direction: column; } .cat-lnk::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 1; } .cat-lnk:focus-visible::after { outline: 2px solid var(--accent); outline-offset: 2px; } /* Nur fuer Vorlesegeraete: der Name als zugaenglicher Name des Verweises. */ .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .chside-nurch { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.22); } /* Der Schluessel unter dem Einleitungssatz: Zeichen und Bezeichnung als Paare, danach der Hinweis. Nicht als Kasten — er soll erklaeren, nicht auffallen —, aber mit Linie darueber, damit er sich vom Lead loest. */ /* HIER STANDEN .start-key, .key-item UND .key-hint — der Zeichenschluessel ueber den Kacheln. Entfallen am 17. August 2026 mit dem Schluessel selbst: die Fahne trug 37 von 40 Kacheln und unterschied damit nichts, und eine Legende vor der ersten Kachel erklaert Zeichen, die noch nicht da sind. Die drei Ausnahmen tragen jetzt das Wort «international» in .cat-badge, und das braucht keine eigene Regel. Begruendung in build.js bei markeLink. */ /* Damit der Kategoriename nicht unter die Marken läuft. Grosszügig gerechnet: zwei Marken plus Abstand brauchen mehr Platz als eine. */ .cat-card-marked .cat-top { padding-right: 118px; } .cat-card:hover { color: inherit; border-color: var(--accent); box-shadow: var(--shadow-lg); } /* Mittig statt auf der Grundlinie: die Fahne ist ein Quadrat ohne Schriftlinie und stand darum tief. Enger auch — Fahne und Name gehoeren zusammen, die Anzahl rechts wird ohnehin weggeschoben. */ .cat-top { display: flex; align-items: center; gap: 7px; } /* Der Name bricht in keiner Kachel um: eine zweizeilige Ueberschrift macht die ganze Reihe hoeher und das Raster unruhig. Wo ein Name zu lang ist, steht in den Sprachdateien ein Kurzname (cats[].kachel); die Kuerzung mit Auslassungspunkten ist nur das Netz darunter. */ .cat-card h2 { font-size: 14px; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cat-n { flex: none; font-size: 15px; font-weight: 660; color: var(--muted); font-variant-numeric: tabular-nums; } .cat-card:hover .cat-n { color: var(--accent); } /* Zwei Zeilen Beschreibung auf jeder Kachel, darunter eine Zeile Produktnamen. Feste Hoehe statt Klammerung allein: so sind alle Koerper gleich hoch, auch wenn ein Text nur eine Zeile braucht — sonst waere der Fuss von Kachel zu Kachel um eine Zeile versetzt. */ .cat-tag { font-size: 12px; color: var(--ink-soft); line-height: 1.4; height: calc(1 * 1.4em); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } /* Produktnamen statt Kriterienliste. Die schweizerischen Kriterien stehen auf der Kategorieseite — dort landet, wer über die Suche kommt, und dort haben sie den Platz, erklärt zu werden. */ .cat-names { margin-top: 1px; font-size: 12px; line-height: 1.45; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Ebene 1: eine breite Karte, die über die ganze Reihe läuft */ .cat-grid-wide { grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); } .cat-card-wide { padding: 15px 17px 16px; } .cat-card-wide h2 { font-size: 17px; } /* Ebene 3: Branchen als VERZEICHNIS, nicht als Pillenwand. Vier Spalten mit Gruppenueberschrift, in jeder eine Liste. Ein Verzeichnis darf anders aussehen als eine Kachel — es ist etwas anderes: kein Vorschlag, sondern ein Register, das man von A nach Z absucht. */ .br-grid { display: grid; grid-template-columns: 1fr; gap: 14px 28px; margin-top: 14px; } @media (min-width: 700px) { .br-grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 1040px) { .br-grid { grid-template-columns: repeat(4, 1fr); } } .br-h { font-size: 11px; font-weight: 660; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); padding-bottom: 7px; border-bottom: 1px solid var(--line); } /* Die Zeile ist der Verweis: volle Breite, damit auch die Zahl anklickbar ist und der Zeiger nicht zwischen Name und Anzahl abreisst. */ .br-row { position: relative; display: flex; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 13.5px; } /* Flaechendeckender Verweis: die ganze Zeile fuehrt in die Kategorie, auch die Zahl rechts — nur die Marke hat ihr eigenes Ziel. */ .br-lnk { flex: 1; min-width: 0; text-decoration: none; color: inherit; } .br-lnk::after { content: ""; position: absolute; inset: 0; z-index: 1; } .br-lnk:focus-visible::after { outline: 2px solid var(--accent); outline-offset: 2px; } .br-row:hover { color: var(--accent); } .br-n { flex: none; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; } .br-row:hover .br-n { color: var(--accent); } /* Kategorie ohne Bestand: KEINE eigene Kennzeichnung auf der Startseite — Entscheid des Betreibers. Die Kachel sieht aus wie jede andere, sie zeigt nur keine Anzahl. Dass noch keine Tabelle wartet, sagt erst .soon-note auf der Kategorieseite. */ /* ------------------------------------------------------------- Produktseite Das Detailpanel als Seite — aber nicht als dieselbe schmale Spalte. Eine Lesespalte von 78 Zeichen mitten in einem breiten Fenster liess links und rechts je vierhundert Pixel leer, und der Steckbrief zog die Seite darunter in die Länge. Jetzt zwei Spalten: links der Lesetext in lesbarer Breite, rechts das Zahlenwerk, das ohnehin in Zeilen steht. Beides zusammen nutzt die Breite, ohne den Fliesstext unlesbar breit zu machen. Ab 1040px zweispaltig, darunter untereinander in der Reihenfolge von assets/detail.js. */ .prog-wrap { padding-top: 26px; padding-bottom: 48px; max-width: 1180px; } .prog-grid { margin-top: 4px; } @media (min-width: 1040px) { .prog-grid { display: grid; grid-template-columns: minmax(0, 62ch) minmax(0, 1fr); gap: 0 56px; align-items: start; } } /* Die erste Überschrift einer Spalte braucht keinen Abstand nach oben — der käme sonst zum Aussenabstand des Rasters dazu. */ .prog-col > .prog-h:first-child { margin-top: 18px; } .prog-kicker { font-size: 12.5px; color: var(--muted); } /* DIE VORZEILE DER MARKTBEFUNDE. Sie teilte sich die Klasse mit der Produktseite und war darum grau — auf der Produktseite ist «Hersteller · Ort» aber ein UNTERTITEL und kein Etikett, und grau ist dort richtig. Zwei verschiedene Aufgaben, zwei Klassen; die Marktbefunde tragen jetzt dieselbe Auszeichnung wie .st-eyebrow auf der Startseite. */ .mb-kicker { font-size: 11.5px; font-weight: 750; letter-spacing: .11em; text-transform: uppercase; color: var(--accent); } .prog-wrap h1 { margin-top: 7px; font-size: var(--h1); letter-spacing: var(--h1-lauf); font-weight: var(--h1-fett); line-height: 1.1; } .prog-lead { margin-top: 7px; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); } .prog-sum { margin-top: 14px; font-size: 16px; line-height: 1.6; color: var(--ink-soft); } .prog-h { margin-top: 26px; } .prog-p { margin-top: 8px; font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); } .prog-list { margin: 8px 0 0; padding-left: 20px; } .prog-list li { font-size: 14.5px; line-height: 1.5; margin-top: 4px; color: var(--ink-soft); } .prog-list.minus { list-style: none; padding-left: 0; } .prog-list.minus li { padding-left: 20px; position: relative; } .prog-list.minus li::before { content: "–"; position: absolute; left: 4px; color: var(--muted); } /* Enger als vorher: 41 Pixel je Zeile machten aus einem Steckbrief mit zwanzig Zeilen einen Bildschirm. */ .prog-table { margin-top: 10px; border-collapse: collapse; width: 100%; } .prog-table td { padding: 5px 0; border-top: 1px solid var(--line); font-size: 13.5px; line-height: 1.45; vertical-align: top; } .prog-table td:first-child { width: 52%; color: var(--muted); padding-right: 14px; } /* Erklaervermerke: kleiner und blasser als der Fliesstext, aber OHNE Randlinie — die las sich wie ein Zitat, und zitiert wird hier niemand. Die Herkunft der Angaben steht ohnehin nicht mehr verstreut in solchen Vermerken, sondern in einem eigenen Abschnitt am Schluss der Seite. */ .prog-note { margin-top: 9px; font-size: 12px; line-height: 1.5; color: var(--muted); } /* Geänderter Stand im Preisverlauf: die Zeile bekommt ein leises Merkmal, damit man nicht die Zahlen vergleichen muss, um die Änderung zu sehen. */ .hist-neu td { color: var(--ink); } .hist-mark { margin-left: 8px; padding: 1px 7px; border-radius: 999px; font-size: 11px; letter-spacing: .03em; white-space: nowrap; border: 1px solid var(--line-hard); color: var(--muted); } /* Fundstellen: dieselben Pillen wie auf der Ergebnisseite der Suche */ .prog-cats { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; } .prog-cats a { padding: 4px 12px; border-radius: 999px; font-size: 13px; border: 1px solid var(--line-hard); text-decoration: none; color: var(--ink); } .prog-cats a:hover { border-color: var(--accent); color: var(--accent); } .prog-cta { margin-top: 34px; } /* Korrekturhinweis: leise, aber am Ort des Fundes */ .prog-fix { margin-top: 16px; font-size: 12.5px; color: var(--muted); } .prog-fix a { color: var(--muted); } .prog-fix a:hover { color: var(--accent); } /* ------------------------------------------------------------ Marktbefund Kennzahlen über den Markt einer Kategorie. Die Gestaltung folgt genau einer Regel: die ZAHL ist die Aussage, alles andere ordnet sie ein. Deshalb steht sie gross und zuerst, die Beschriftung klein darunter, und der Satz, der sie einordnet, noch kleiner darunter. Keine Farben, keine Balken, keine Ampeln — die Seite soll aussehen wie eine Erhebung und nicht wie ein Dashboard. Wer sie zitiert, zitiert Zahlen; ein grüner Balken wäre eine Bewertung, und Bewertungen gibt es hier nicht. */ .mb-wrap { padding-top: 40px; padding-bottom: 48px; max-width: calc(var(--seitenbreite) + 40px); } /* Titelgroesse wie auf den beiden Nachbarseiten — siehe --seitenbreite. */ .mb-wrap h1 { margin-top: 7px; font-size: var(--h1); letter-spacing: var(--h1-lauf); font-weight: var(--h1-fett); line-height: 1.1; } /* Eigener Rahmen je Feld statt eines durchgehenden Rasters. Ein Raster aus Fugen sah gut aus, solange die Zahl der Felder durch die Spaltenzahl teilbar war — bei sieben Feldern in vier Spalten blieb ein grauer Rest stehen, der wie ein Fehler aussieht. Einzelne Karten dürfen eine Zeile unvollständig lassen. */ /* EINE Zeile mit allen Karten, sobald der Platz reicht. Sechs nebeneinander sind schmal — darum kleinere Zahl, engere Beschriftung und ein knapperer Einordnungssatz. Unter 1080 Pixeln bricht das Raster von selbst um; eine Zeile zu erzwingen hiesse dort, sechs unlesbare Spalten zu bauen. */ .mb-grid { margin-top: 26px; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } @media (min-width: 1080px) { .mb-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } } /* OHNE KASTEN, 25.08.2026. Vier gerahmte Boxen nebeneinander sind die Sprache eines Formulars; dieselben Zahlen stehen auf der Startseite rahmenlos und wirken ruhiger. Was bleibt, ist eine feine Linie oben — sie trennt den Block vom Vorspann, ohne vier Kaesten zu bauen. */ .mb-card { background: none; border: 0; padding: 14px 0 0; border-top: 2px solid var(--accent); } .mb-grid { gap: 8px 34px !important; } .mb-num { font-size: clamp(21px, 2.3vw, 27px); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } /* Zwei Zeilen Platz, ob die Beschriftung sie braucht oder nicht. «NENNEN EINEN PREIS» ist einzeilig, «MIT SCHWEIZER RECHTSTRÄGER» zweizeilig — ohne festes Mass begann der Erklärsatz in jeder Karte auf anderer Höhe, und die Reihe sah unruhig aus, obwohl die Karten gleich hoch sind. */ .mb-lab { margin-top: 4px; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); font-weight: 600; line-height: 1.35; min-height: 2.7em; } .mb-say { margin-top: 6px; font-size: 12.5px; line-height: 1.45; color: var(--ink-soft); } .mb-h { margin-top: 34px; } .mb-list { margin: 0; padding-left: 20px; } .mb-list li { font-size: 14px; line-height: 1.55; margin-top: 4px; color: var(--ink-soft); } /* Der Quellensatz zum Kopieren: als Fläche mit fester Schrift, damit erkennbar ist, dass er wörtlich übernommen werden soll und nicht gelesen. */ /* KEINE SCHREIBMASCHINENSCHRIFT MEHR, 25.08.2026. Der Kasten sah aus wie Programmtext, obwohl er ein SATZ ZUM ZITIEREN ist — und die Aufforderung «Uebernahme mit Quellenangabe ausdruecklich erwuenscht» steht direkt darunter. Jetzt die Schrift der Seite, ein Balken in der Hausfarbe links, und weiss statt grau: er ist ein Angebot und keine Fussnote. user-select: all bleibt — ein Klick markiert den ganzen Satz. */ .mb-cite { font-size: 14px; line-height: 1.7; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--r); padding: 15px 18px; user-select: all; /* Die Adresse am Schluss ist ein Wort ohne Trennstelle und breiter als ein Telefon. Ohne diese Zeile schob sie die ganze Seite nach rechts. */ overflow-wrap: anywhere; } /* Preisgrafik: eine Zeile je Anbieter, Name links, Spur in der Mitte, Wert rechts. Kein SVG und kein Skript — die Grafik ist eine Liste mit einer Position je Zeile, und genau das kann CSS besser als eine Zeichenfläche: sie erbt die Schrift, bricht mit der Spalte um und lässt sich markieren. Das Spaltenraster steht EINMAL als Variable. Zeile, Medianstrich und Achse benutzen dasselbe — sonst zeigt die Marke «60» neben den Punkt, der 60 kostet, und das fällt niemandem auf, der die Zahlen nicht nachrechnet. */ .pp { --pp-cols: minmax(96px, 200px) 1fr auto; --pp-gap: 12px; margin-top: 20px; /* MUSS positioniert sein. Die ausgeblendeten Kästchen liegen absolut; ohne positionierten Vorfahren ist ihr Bezug der Anfangsblock — und damit entkommen sie dem overflow:hidden des body, verlängern das Dokument und legen einen ZWEITEN Rollbalken über den der Seite. Die Seite wirkt dann verschoben, oben abgeschnitten und unten leer. */ position: relative; } .pp-plot { position: relative; padding-top: 20px; } .pp-row, .pp-med, .pp-axis { display: grid; grid-template-columns: var(--pp-cols); column-gap: var(--pp-gap); } .pp-row { align-items: center; padding: 3px 0; } .pp-name { font-size: 13px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pp-track { position: relative; height: 15px; background: linear-gradient(var(--line), var(--line)) left center / 100% 1px no-repeat; } .pp-dot { position: absolute; top: 50%; width: 9px; height: 9px; border-radius: 50%; background: var(--ink); transform: translate(-50%, -50%); } /* Fünf Musterbetriebe, fünf Töne von hell nach dunkel. Eine REIHENFOLGE und keine Palette: hell ist der kleinste Betrieb, dunkel der grösste. Damit liest man ohne Nachschlagen, ob der Preis mit dem Betrieb wächst — bei fünf bunten Farben müsste man jedes Mal die Legende befragen. Der helle Rand trennt Punkte, die dicht beieinanderliegen; ohne ihn verschmelzen zwei Nachbarn zu einem Fleck. */ .pp-mf .pp-dot { width: 10px; height: 10px; box-shadow: 0 0 0 1.5px var(--surface); } .pp-mf .pp-d0 { background: var(--ton-0); } .pp-mf .pp-d1 { background: var(--ton-1); } .pp-mf .pp-d2 { background: var(--ton-2); } .pp-mf .pp-d3 { background: var(--ton-3); } .pp-mf .pp-d4 { background: var(--ton-4); } /* Der Filter. Die Kästchen selbst bleiben unsichtbar — bedient wird über die Beschriftung, und der Zustand kommt aus :checked. Kein Skript: ohne JavaScript steht hier ein Formular, das genau das tut, was draufsteht. */ .pp-cb { position: absolute; opacity: 0; pointer-events: none; } .pp-bar { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; } .pp-chip { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; padding: 4px 11px 4px 9px; border-radius: 999px; font-size: 12.5px; border: 1px solid var(--line-hard); color: var(--ink-soft); user-select: none; transition: opacity .12s, border-color .12s; } .pp-chip:hover { border-color: var(--accent); } .pp-sw { width: 10px; height: 10px; border-radius: 50%; flex: none; } /* Abgewählt: blass und durchgestrichen, damit der Unterschied auch ohne Farbe erkennbar bleibt. */ .pp-c0:not(:checked) ~ .pp-bar .pp-l0, .pp-c1:not(:checked) ~ .pp-bar .pp-l1, .pp-c2:not(:checked) ~ .pp-bar .pp-l2, .pp-c3:not(:checked) ~ .pp-bar .pp-l3, .pp-c4:not(:checked) ~ .pp-bar .pp-l4 { opacity: .45; text-decoration: line-through; border-style: dashed; } .pp-c0:not(:checked) ~ .pp-plot .pp-d0, .pp-c1:not(:checked) ~ .pp-plot .pp-d1, .pp-c2:not(:checked) ~ .pp-plot .pp-d2, .pp-c3:not(:checked) ~ .pp-plot .pp-d3, .pp-c4:not(:checked) ~ .pp-plot .pp-d4 { display: none; } /* Tastaturbedienung: das Kästchen ist ausgeblendet, der Fokusring muss darum auf der Beschriftung erscheinen. */ .pp-c0:focus-visible ~ .pp-bar .pp-l0, .pp-c1:focus-visible ~ .pp-bar .pp-l1, .pp-c2:focus-visible ~ .pp-bar .pp-l2, .pp-c3:focus-visible ~ .pp-bar .pp-l3, .pp-c4:focus-visible ~ .pp-bar .pp-l4 { outline: 2px solid var(--accent); outline-offset: 2px; } .pp-val { font-size: 12.5px; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; } /* Der Median geht durch ALLE Zeilen. Er ist die Aussage der Grafik; stünde er nur am Rand, müsste man ihn suchen. Die Beschriftung liegt OBEN — unten stünde sie im Namen der letzten Zeile. */ .pp-med { position: absolute; inset: 0; pointer-events: none; } .pp-med > span { grid-column: 2; position: relative; } .pp-med > span > i { position: absolute; top: 14px; bottom: 0; border-left: 1px dashed var(--accent); } .pp-med > span > i > b { position: absolute; top: -15px; left: 0; transform: translateX(-50%); font-size: 11px; font-weight: 600; color: var(--accent); white-space: nowrap; } .pp-axis > span { grid-column: 2; position: relative; height: 30px; } .pp-axis > span > i { position: absolute; top: 15px; transform: translateX(-50%); font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; font-style: normal; white-space: nowrap; } /* Die Schweigenden. Sie stehen als Fliesstext und nicht als leere Zeilen im Diagramm: sechzehn Zeilen ohne Punkt wären eine Wand, ein Satz mit sechzehn Namen ist eine Aussage. */ .pp-none { margin-top: 12px; font-size: 12.5px; line-height: 1.55; color: var(--muted); } .pp-none b { color: var(--ink-soft); } /* Eng: Name über die Spur legen, sonst bleibt für die Spur nichts übrig. Das Raster wechselt auf zwei Spalten — die Spur bekommt die volle Breite, und Medianstrich wie Achse folgen automatisch, weil sie dieselbe Variable lesen. */ @media (max-width: 560px) { .pp { --pp-cols: 1fr auto; } .pp-row { grid-template-areas: "name wert" "spur spur"; padding: 5px 0; } .pp-name { grid-area: name; } .pp-val { grid-area: wert; } .pp-track { grid-area: spur; margin-top: 3px; } .pp-med > span, .pp-axis > span { grid-column: 1 / -1; } } /* Preisentwicklung. Alle Linien grau, eine fett — das ist der ganze Trick bei vierzehn Reihen: bunt wären sie ein Knäuel, in dem man vierzehnmal dieselbe Farbe sucht. Wer eine bestimmte Linie sucht, fährt sie an; sie tritt hervor und nennt ihren Namen im Hinweis des Browsers. */ /* Positioniert aus demselben Grund wie .pp: die ausgeblendeten Auswahlfelder dürfen nicht am Anfangsblock hängen. */ .vl { margin-top: 18px; position: relative; } /* Auswahl der Ansicht. Alle Ansichten stehen im Quelltext, sichtbar ist die gewählte — reines CSS über :checked, kein Skript. Einfachauswahl und nicht Mehrfach wie beim Punktdiagramm: fünf Fälle mal vierzehn Anbieter wären siebzig Linien, und die Übersicht zeigt die fünf ohnehin als Median. */ .vl-rd { position: absolute; opacity: 0; pointer-events: none; } .vl-bar { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; } .vl-chip { cursor: pointer; padding: 4px 12px; border-radius: 999px; font-size: 12.5px; border: 1px solid var(--line-hard); color: var(--muted); user-select: none; } .vl-chip:hover { border-color: var(--accent); color: var(--ink-soft); } .vl-view { display: none; } .vl-r0:checked ~ .vl-stack .vl-vw0, .vl-r1:checked ~ .vl-stack .vl-vw1, .vl-r2:checked ~ .vl-stack .vl-vw2, .vl-r3:checked ~ .vl-stack .vl-vw3, .vl-r4:checked ~ .vl-stack .vl-vw4, .vl-r5:checked ~ .vl-stack .vl-vw5 { display: block; } .vl-r0:checked ~ .vl-bar .vl-cl0, .vl-r1:checked ~ .vl-bar .vl-cl1, .vl-r2:checked ~ .vl-bar .vl-cl2, .vl-r3:checked ~ .vl-bar .vl-cl3, .vl-r4:checked ~ .vl-bar .vl-cl4, .vl-r5:checked ~ .vl-bar .vl-cl5 { background: var(--ink); border-color: var(--ink); color: var(--bg); } /* Das Kästchen ist ausgeblendet, der Fokusring muss darum auf der Beschriftung erscheinen. */ .vl-r0:focus-visible ~ .vl-bar .vl-cl0, .vl-r1:focus-visible ~ .vl-bar .vl-cl1, .vl-r2:focus-visible ~ .vl-bar .vl-cl2, .vl-r3:focus-visible ~ .vl-bar .vl-cl3, .vl-r4:focus-visible ~ .vl-bar .vl-cl4, .vl-r5:focus-visible ~ .vl-bar .vl-cl5 { outline: 2px solid var(--accent); outline-offset: 2px; } /* Die fünf Musterbetriebe in der Übersicht: dieselben Töne wie im Punktdiagramm darüber, hell nach dunkel mit der Betriebsgrösse. Eine Reihenfolge und keine Palette — hier trägt sie fünf Linien statt fünf Punktsorten, und die Zuordnung bleibt dieselbe. */ /* Doppelte Klasse, damit der Ton den Akzent der Medianlinie schlaegt: beide sind einfache Klassen, und ohne diesen Kniff gewaenne schlicht die spaetere Regel — fuenf Faelle in derselben Farbe. */ .vl-med.vl-t0, .vl-swm.vl-t0 { stroke: var(--ton-0); } .vl-med.vl-t1, .vl-swm.vl-t1 { stroke: var(--ton-1); } .vl-med.vl-t2, .vl-swm.vl-t2 { stroke: var(--ton-2); } .vl-med.vl-t3, .vl-swm.vl-t3 { stroke: var(--ton-3); } .vl-med.vl-t4, .vl-swm.vl-t4 { stroke: var(--ton-4); } .vl-g:hover .vl-med.vl-t0, .vl-g:hover .vl-med.vl-t1, .vl-g:hover .vl-med.vl-t2, .vl-g:hover .vl-med.vl-t3, .vl-g:hover .vl-med.vl-t4 { stroke-width: 4.5; } .vl svg { display: block; width: 100%; height: auto; overflow: visible; } .vl-grid { stroke: var(--line); stroke-width: 1; } .vl-line { fill: none; stroke: var(--line-hard); stroke-width: 1.4; stroke-linejoin: round; transition: stroke .12s, stroke-width .12s; } /* Die ganze Gruppe ist das Ziel, nicht der 1,4 Pixel schmale Strich: sonst trifft man ihn nur mit ruhiger Hand. */ .vl svg g { cursor: default; } .vl svg g:hover .vl-line { stroke: var(--ink); stroke-width: 2.4; } .vl-med { fill: none; stroke: var(--accent); stroke-width: 2.6; stroke-linejoin: round; pointer-events: none; } /* Legende unter der Grafik. Legendeneintrag und Linie liegen in DERSELBEN Gruppe im SVG — darum reicht eine einzige Regel, um beim Ueberfahren beides hervorzuheben, und es braucht kein Skript. Eine Legende als HTML daneben koennte das nicht ohne eine eigene Regel je Eintrag. */ .vl-hit { fill: transparent; } .vl-sw { stroke: var(--line-hard); stroke-width: 2; } .vl-swm { stroke: var(--accent); stroke-width: 3; } .vl-kn { fill: var(--ink-soft); font-size: 11px; dominant-baseline: middle; } .vl-kv { fill: var(--muted); font-variant-numeric: tabular-nums; } .vl-gm .vl-kn { fill: var(--accent); font-weight: 600; } .vl-gm .vl-kv { fill: var(--accent); } .vl-g:hover .vl-kn, .vl-g:hover .vl-kv { fill: var(--ink); font-weight: 600; } .vl-g:hover .vl-sw { stroke: var(--ink); stroke-width: 3; } .vl-ty { fill: var(--muted); font-size: 11px; text-anchor: end; dominant-baseline: middle; } .vl-tx { fill: var(--muted); font-size: 11px; text-anchor: middle; } /* Der Vermerk zu angenommenen Werten steht ÜBER der Grafik und nicht darunter. Unter ihr läse man ihn, nachdem man die Zahlen schon geglaubt hat. */ .vl-sim { margin-top: 8px; font-size: 12.5px; color: var(--accent); border: 1px dashed var(--accent); border-radius: var(--r); padding: 7px 11px; display: inline-block; } /* Die Flächen für ECharts. Sie tragen ihre Höhe aus dem Skript — vorher steht hier nichts, und die Seite springt beim Zeichnen nicht. Als Karte wie die Kennzahlen darüber: dieselbe helle Fläche, derselbe Rahmen, derselbe Radius. Eine Grafik, die direkt auf dem Seitengrund liegt, wirkt neben sieben Karten wie ein Fremdkörper — und der Punkt einer Karte ist hier derselbe wie dort: sie fasst zusammen, was zusammengehört. */ .ec { width: 100%; margin-top: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 14px 10px; } .ec-bar { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 2px; } .ec-chip { cursor: pointer; padding: 4px 12px; border-radius: 999px; font-size: 12.5px; border: 1px solid var(--line-hard); background: none; color: var(--muted); font-family: inherit; line-height: 1.5; } .ec-chip:hover { border-color: var(--accent); color: var(--ink-soft); } .ec-chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); } /* Balkenreihen der Dachseite. HTML mit Breitenangabe in Prozent, keine Zeichenbibliothek: es sind sechzehn Zeilen mit je einem Wert, und dafür 647 KB nachzuladen wäre nicht zu rechtfertigen. Steht damit auch ohne Skript da. Der Anteil steht als ZAHL neben dem Balken, und dahinter die beiden Werte, aus denen er entsteht. Ein Balken allein lässt sich nicht zitieren. */ .bk { margin-top: 14px; } .bk-row { display: grid; grid-template-columns: minmax(120px, 240px) 1fr 108px; align-items: center; gap: 0 14px; padding: 4px 0; } .bk-name { font-size: 13px; color: var(--ink-soft); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-bottom: 1px dashed transparent; } .bk-name:hover { color: var(--accent); border-bottom-color: var(--accent); } .bk-track { height: 13px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 3px; overflow: hidden; display: block; } /* IN DER HAUSFARBE, 25.08.2026. Die Balken trugen --ink-soft, ein Blaugrau aus der Zeit vor dem Farbwechsel — neben einer Seite in #1D5FD1 sah das nach zwei Haeusern aus. */ .bk-track i { display: block; height: 100%; background: var(--accent); } /* GLEICH LANGE BALKEN, 25.08.2026. Die Wertspalte stand auf «auto» und war darum je Zeile verschieden breit — «5 % 1/20» gegen «100 % 12/12». Damit endete jede Spur woanders, und zwei Balken mit derselben Zahl sahen verschieden lang aus. Jetzt hat die Spalte eine feste Breite und ist innen selbst ein Raster: Prozent rechtsbündig, Bruch linksbündig. */ .bk-val { display: grid; grid-template-columns: 46px 1fr; gap: 8px; align-items: baseline; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; } .bk-val em { font-style: normal; text-align: right; } .bk-val b { color: var(--ink-soft); font-weight: 600; } /* Die schweizerischen Anforderungen sind keine Quote — sie hängen an der Kategorie und nicht an der Zahl ihrer Anbieter. Darum Gruppen mit Namen statt Balken. */ .bk-grps { margin-top: 12px; } .bk-grp { font-size: 13px; line-height: 1.55; color: var(--muted); margin-top: 8px; padding-left: 12px; border-left: 2px solid var(--line); } .bk-grp b { color: var(--ink-soft); } @media (max-width: 560px) { /* NAME UND WERTE IN EINER ZEILE, DER BALKEN DARUNTER — und genau das tat diese Regel nicht. Sie nannte die Spalten und nicht die ZEILEN, und die automatische Platzierung folgt der Reihenfolge im Quelltext: der Balken steht dort VOR den Werten, verlangt mit `1 / -1` die ganze Breite, findet sie in Zeile eins nicht (der Name sitzt schon da) und nimmt Zeile zwei — womit die Werte in Zeile DREI rutschten. Im Bild sah man es auf dem Marktbefund: 24 Kategorien, jede dreizeilig, Prozent und Bruch rechts unter ihrem eigenen Balken statt neben dem Namen. `grid-row: 1` an beiden bindet die Zeile fest; der Balken faellt dann von selbst in die zweite. */ .bk-row { grid-template-columns: 1fr auto; } .bk-name { grid-column: 1; grid-row: 1; } .bk-val { grid-column: 2; grid-row: 1; } .bk-track { grid-column: 1 / -1; grid-row: 2; margin-top: 2px; } } /* DIE KARTE DER SITZKANTONE. Die Umrisse sind erzeugt und stehen in kantone-geo.js; hier steht nur, wie sie aussieht. Die Trennlinien zwischen den Kantonen sind in --surface und nicht in --line: sie sollen die Flächen trennen und nicht als eigenes Gitter auffallen. Im Dunkelbild werden sie damit von selbst dunkel. */ /* Nebeneinander mit flex und nicht mit einem Raster: bei 1fr fuer die Karte blieb zwischen ihr und der Rangliste ein Loch von 300 Pixeln — die Spalte war breiter als die Karte, die darin steckt. */ .kmap-box { display: flex; flex-wrap: wrap; gap: 22px 40px; align-items: flex-start; margin-top: 16px; } .kmap { display: block; flex: 0 1 660px; min-width: 0; } /* Die Flächen werden über den Nachfahrenwähler eingefärbt und NICHT über eine Klasse am Pfad selbst. Das ist kein Geschmack: die obere Lage sind -Verweise auf genau diese Pfade, und eine Klasse am Pfad würde auch im Verweis greifen — die durchsichtige Trefferfläche wäre wieder gefüllt. Der Nachfahrenwähler greift dort nicht, weil der Verweis einen eigenen Elternbaum aufspannt. */ .kmap-fl path { fill: var(--accent); stroke: var(--surface); stroke-width: .7; } .kmap-fl path[data-leer] { fill: var(--surface-2); } /* Die Flächen nehmen kein Zeigen an — das erledigt die obere Lage. */ .kmap-fl, .kmap-txt { pointer-events: none; } .kmap-see { fill: var(--surface); opacity: .92; pointer-events: none; } /* Die Landesgrenze zuletzt und ohne Füllung darüber: sonst schluckt die hellste Kantonsfläche ihre eigene Aussenkante. */ .kmap-rand { fill: none; stroke: var(--ink-soft); stroke-width: 1; opacity: .5; pointer-events: none; } .kmap-ab { font-size: 9px; font-weight: 700; fill: var(--ink); pointer-events: none; } .kmap-n { font-size: 8.4px; fill: var(--muted); pointer-events: none; } /* Auf einer gut gedeckten Fläche kehrt sich die Schrift um — im Hellen wird sie weiss, im Dunkeln dunkel. Der Akzent ist im Dunkelbild ein helles Blau, und Weiss auf Hellblau ist keine Schrift mehr. Beide Regeln stehen NACH .kmap-ab und .kmap-n und müssen dort bleiben: gleich starke Wähler, und die spätere gewinnt. */ .kmap-hell { fill: #fff; } html[data-theme="dark"] .kmap-hell { fill: #0B1524; } /* Die Rangliste neben der Karte. Sie ist kein Beiwerk: eine Fläche sagt nichts über eine Zahl, und Basel-Stadt trägt auf der Karte nicht einmal ein Kürzel. Hier stehen alle Kantone mit Fundstellen ungewichtet. */ /* DIE OBERE LAGE: durchsichtig, aber anfassbar. Sie liegt über allem, darum überpinselt kein später gezeichneter Nachbar ihren Umriss. */ .kmap-hit { fill: transparent; stroke: transparent; stroke-width: 1.8; } .kmap-hit:hover { stroke: var(--ink); } /* Das Hinweisfenster folgt seinem unmittelbar — darum der Nachbar- wähler +. Ohne Zeiger (Telefon, Tastatur) bleibt es weg; die Zahlen stehen deshalb zusätzlich in der Rangliste daneben und nicht nur hier. */ .kmap-tip { opacity: 0; pointer-events: none; } .kmap-hit:hover + .kmap-tip { opacity: 1; } .kmap-tip rect { fill: var(--ink); } .kmap-tip-n { font-size: 9.5px; font-weight: 700; fill: var(--surface); } .kmap-tip-z { font-size: 8.5px; fill: var(--surface); opacity: .82; } .kmap-tip-l { font-size: 8px; fill: var(--surface); opacity: .9; } @media (prefers-reduced-motion: no-preference) { .kmap-tip { transition: opacity .12s ease; } } .kmap-rang { columns: 2; column-gap: 30px; margin: 4px 0 0; padding: 0; list-style: none; font-size: 13px; } .kmap-rang li { display: flex; gap: 12px; padding: 3px 0; break-inside: avoid; } .kmap-rang b { min-width: 26px; color: var(--ink); font-weight: 700; } .kmap-rang span { color: var(--muted); font-variant-numeric: tabular-nums; } .kmap-quelle { margin-top: 12px; font-size: 12.5px; } @media (max-width: 780px) { .kmap-box { grid-template-columns: minmax(0, 1fr); } .kmap-rang { columns: 3; } } /* IMMER NUR EIN BALKENBILD. Zwei Ranglisten zu je vierzig Zeilen untereinander sind zwei Bildschirme; wer die zweite liest, hat die erste nicht mehr daneben. Der Umschalter ist reines CSS — zwei versteckte Radioknöpfe und der Geschwisterwähler ~. Darum stehen die Knöpfe im Quelltext vor den Beschriftungen und den Tafeln: ~ wählt nur nach hinten. */ .bk-wahl { margin-top: 10px; } .bk-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; } .bk-knoepfe label { cursor: pointer; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); padding: 9px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); } .bk-knoepfe label:hover { color: var(--accent); border-color: var(--accent); } .bk-tafel { display: none; } #bkw-preis:checked ~ #bkt-preis, #bkw-dc:checked ~ #bkt-dc { display: block; } #bkw-preis:checked ~ .bk-knoepfe label[for="bkw-preis"], #bkw-dc:checked ~ .bk-knoepfe label[for="bkw-dc"] { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); } /* Der Tastaturfokus liegt auf dem versteckten Radioknopf und wäre ohne diese zwei Regeln unsichtbar. */ #bkw-preis:focus-visible ~ .bk-knoepfe label[for="bkw-preis"], #bkw-dc:focus-visible ~ .bk-knoepfe label[for="bkw-dc"] { outline: 2px solid var(--accent); outline-offset: 2px; } /* Kacheln zu den ausführlichen Befunden. Sie sind das Ziel der Dachseite — als Verweiszeile gingen sie zwischen Balken und Zitierkasten unter. Grösser und luftiger als die Kennzahlenkarten oben, damit man sie nicht für eine fünfte Zahl hält: die tragen Werte, diese führen weiter. */ .mkz-lead { max-width: 78ch; } .mkz { margin-top: 14px; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .mkz-card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px 15px; transition: border-color .12s, box-shadow .12s; } .mkz-card:hover { border-color: var(--accent); box-shadow: var(--shadow); } .mkz-card h3 { font-size: 17px; line-height: 1.25; } /* Der ganze Rahmen ist anklickbar: der Verweis spannt sich darüber. Dasselbe Muster wie bei den Kacheln der Startseite. */ .mkz-lnk { color: var(--ink); text-decoration: none; } .mkz-lnk::after { content: ""; position: absolute; inset: 0; } .mkz-card:hover .mkz-lnk { color: var(--accent); } .mkz-was { margin-top: 7px; font-size: 13px; line-height: 1.5; color: var(--ink-soft); } .mkz-meta { margin-top: 10px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; } .mb-dl { margin-top: 16px; font-size: 13.5px; } /* Der Absprung von der Kategorieseite. Er steht unter der Tabelle neben der Legende und trägt eine echte Zahl statt eines Etiketts — «Marktbefund» allein sagt niemandem, was ihn erwartet, «12 von 30 nennen einen Preis» schon. */ .mb-jump { padding: 10px 2px 0; font-size: 12.5px; } .mb-jump a { color: var(--muted); text-decoration: none; border-bottom: 1px dashed var(--line-hard); } .mb-jump a:hover { color: var(--accent); border-bottom-color: var(--accent); } /* ========================================================================= DER FUSS DER KATEGORIESEITE — Artikel und häufige Fragen ------------------------------------------------------------------------- Unter der Tabelle standen bis zum 17.08.2026 drei Dinge ohne Zusammenhang: die Legende, eine Liste von Artikeln und fünf Aufklapper. Alle drei mit eigener Schriftgrösse, alle linksbündig in einer rund 530px schmalen Spalte — während die Haarlinien darüber und daneben die vollen 1400px liefen. Das las sich nicht als Fuss, sondern als Rest. JETZT EINE ZONE, in der Sprache der Artikelseiten: ein mittig gesetzter Inhaltsbereich von 1240px, darin zwei weisse Flächen mit Rahmen und Schatten. Die Artikel als Kachelpaar, die Fragen als eine Fläche mit Haarlinien dazwischen. Beide tragen dieselbe kleine Überschrift. Die Legende bleibt, wo sie ist: Sie gehört zur Tabelle und nicht zur Redaktion — sie erklärt die Zeichen darüber. Der Fuss beginnt sichtbar darunter, mit Abstand und ohne Linie: die Flächen setzen sich vom beigen Grund selbst ab. ========================================================================= */ .kat-artikel, .kattext { max-width: 1240px; margin-left: auto; margin-right: auto; border: 0; padding: 0; } .kat-artikel { margin-top: 44px; } .kattext { margin-top: 28px; margin-bottom: 8px; } /* Die kleine Überschrift über jeder der beiden Flächen. Sie steht AUSSERHALB der Fläche, damit die Fläche selbst nur Inhalt trägt. */ .kat-artikel > h2, .kattext > .kt-h { margin: 0 0 14px; padding: 0; font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); font-weight: 650; } /* ------------------------------------------------------------ Artikel Zwei mal zwei statt einer Liste. Vier Titel untereinander in einer schmalen Spalte liessen rechts zwei Drittel leer; als Kacheln füllen dieselben vier den Raum und jeder bekommt Gewicht. Feste zwei Spalten und kein auto-fit: bei vier Einträgen ist 2x2 die einzige Aufteilung ohne Rest. */ .kat-artikel ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; } /* Trennlinien als Aussenschatten statt als Rahmen — so zeichnet die letzte Zeile keine Linie auf die Kartenkante. Dasselbe Mittel wie bei den nummerierten Punkten auf den Artikelseiten. */ .kat-artikel li { padding: 24px 26px 26px; border: 0; box-shadow: 1px 0 0 var(--line), 0 1px 0 var(--line); } .kat-artikel a { display: block; font-size: 17px; line-height: 1.28; letter-spacing: -.018em; font-weight: 660; color: var(--ink); text-decoration: none; } .kat-artikel a:hover { color: var(--accent); } .kat-artikel span { display: block; max-width: none; margin-top: 8px; font-size: 14px; line-height: 1.55; color: var(--muted); } /* --------------------------------------------------------- Häufige Fragen Eine Fläche, fünf Aufklapper, Haarlinien dazwischen. Der Fliesstext darin bleibt gebunden — 78 Zeichen je Zeile —, aber er steht nicht mehr allein auf dem Seitengrund, sondern in einer Fläche, die ihn hält. Das war der eigentliche Fehler: nicht die Breite des Textes, sondern dass nichts darunter lag. */ .kattext { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; } .kattext > .kt-h { /* Die Überschrift liegt in der Fläche und muss darum wieder Rand bekommen. */ padding: 20px 26px 0; margin-bottom: 6px; } .kt-item { border-bottom: 1px solid var(--line); } .kt-item:last-child { border-bottom: 0; } .kt-item > summary { list-style: none; cursor: pointer; position: relative; padding: 15px 26px 15px 48px; } .kt-item > summary::-webkit-details-marker { display: none; } .kt-item > summary::before { content: ""; position: absolute; left: 27px; top: 22px; width: 6px; height: 6px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(-45deg) translate(-1px, -1px); transition: transform .16s; } .kt-item[open] > summary::before { transform: rotate(45deg) translate(-1px, -1px); } .kt-item > summary:hover h2 { color: var(--accent); } .kt-item > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .kt-item > summary h2 { display: inline; font-size: 16.5px; line-height: 1.35; letter-spacing: -.014em; font-weight: 640; margin: 0; transition: color .16s; } .kt-body { padding: 0 26px 20px 48px; } /* Keine Kappung. Ein auf 78 Zeichen gebundener Absatz liess die rechte Kartenhälfte leer — dieselbe schmale Spalte wie vorher, nur jetzt innerhalb einer Fläche. Für die Artikelseiten ist die Entscheidung dieselbe: Text so breit wie die Fläche, dafür mehr Durchschuss. */ .kt-body p { font-size: 15px; line-height: 1.75; color: var(--ink-soft); margin: 0 0 14px; } .kt-body p:last-child { margin-bottom: 0; } @media (max-width: 860px) { .kat-artikel ul { grid-template-columns: 1fr; } .kat-artikel { margin-top: 32px; } .kat-artikel li { padding: 20px 20px 22px; } .kat-artikel a { font-size: 16px; } .kat-artikel span { font-size: 13.5px; } .kattext > .kt-h { padding: 18px 20px 0; } .kt-item > summary { padding: 14px 20px 14px 42px; } .kt-item > summary::before { left: 22px; top: 21px; } .kt-item > summary h2 { font-size: 15.5px; } .kt-body { padding: 0 20px 18px 42px; } .kt-body p { font-size: 14.5px; } } /* ========================================================================= ARTIKELSEITEN — eigene Gestaltung ------------------------------------------------------------------------- Diese Seiten folgen NICHT den Massen der Vergleichsseite. Übernommen sind allein die Farben aus :root. EINE BREITE FÜR ALLES: Text, Tabellen, Kennzahlen und Karten stehen auf derselben Kante, 1100px. Kein Ausbrechen der Datenblöcke, keine Schiene daneben — eine einzige Kante liest sich als Ordnung, zwei als Unruhe. 1100px bei 20px ergeben rund 110 Zeichen je Zeile; ausgeglichen wird das mit mehr Durchschuss (1.8), denn bei langen Zeilen ist der Zeilenabstand das, woran das Auge den Anfang der nächsten Zeile wiederfindet. DREI EBENEN statt einer Fläche. Vorher lag alles flach auf demselben beigen Grund: Text, Zahlen, Tabellen, Listen — nichts hob sich ab, die Seite las sich als ein langer gleichförmiger Streifen. Jetzt: 1. der Kopf als dunkles Band, das aus der Kopfleiste herauswächst 2. der Fliesstext auf dem beigen Grund 3. jeder Datenblock als weisse Fläche mit Rahmen und weichem Schatten Damit bekommt die Seite einen Takt: lesen, hinsehen, lesen. ========================================================================= */ .a-main { --a-col: min(var(--seitenbreite), 100% - 48px); /* ABSTÄNDE ADDIEREN SICH HIER, sie überlagern sich nicht: Rasterkinder kennen kein Zusammenfallen benachbarter Aussenabstände wie normale Blöcke. Ein Block mit 64 unten vor einer Überschrift mit 88 oben ergab darum 152 Pixel Loch. Die Werte sind entsprechend kleiner gewählt — die Summe ist das, was man sieht. */ --a-luft: 36px; /* Abstand zwischen zwei Blöcken */ --a-luft-gross: 34px; /* Abstand vor einer neuen Abschnittsüberschrift */ background: var(--bg); padding-bottom: 110px; } /* DREI SPALTEN: Rand, Inhalt, Rand. Die Klassen .a-col und .a-wide zeigen beide auf dieselbe Spalte — so lässt sich eine Ausnahme später wieder einführen, ohne jeden Baustein anzufassen. Die Randspalten sind minmax(…, 1fr) und NICHT min(…, 1fr): eine fr-Einheit darf in min() und calc() nicht vorkommen. Stand sie dort, war die ganze Angabe ungültig, das Raster fiel aus und der Text lief randlos über die volle Fensterbreite — ein Fehler, den kein Bau meldet, weil ungültiges CSS still übergangen wird. */ .a-hero, .a-body { display: grid; grid-template-columns: [voll-start] minmax(24px, 1fr) [text-start weit-start] var(--a-col) [text-end weit-end] minmax(24px, 1fr) [voll-end]; } .a-hero > *, .a-body > .a-col { grid-column: text; } .a-body > .a-wide { grid-column: weit; } /* min-width: 0 ist PFLICHT und nicht Kosmetik: Rasterkinder haben von sich aus min-width: auto und schrumpfen nicht unter ihren Inhalt. Die Preistabelle mit ihrer Mindestbreite sprengte auf dem Telefon ihre Spalte und schob die Seite waagrecht, statt in ihrer Hülle zu rollen. */ .a-hero > *, .a-body > * { min-width: 0; } /* ------------------------------------------------------------------ Kopf HELL SEIT DEM 24.08.2026. Hier stand ein dunkles Band, das unter der Kopfleiste ansetzte und mit ihr verschmolz. Auf Zuruf entfallen: der Blog, die Artikel und das Lexikon sollen oben aussehen wie die Marktbefunde und die Uebersichtsseite — heller Grund, blaue Vorzeile, Titel in Tinte. Eine grosse dunkle Flaeche gleich unter der ohnehin dunklen Leiste macht aus den beiden EINEN Block und schiebt den eigentlichen Inhalt nach unten; auf einer Seite, die vom Lesen lebt, ist das teuer erkaufte Wirkung. */ .a-hero { background: transparent; padding: 44px 0 26px; margin-bottom: var(--a-luft); } .a-kicker { margin: 0 0 18px; font-size: 11.5px; letter-spacing: .11em; text-transform: uppercase; font-weight: 750; } .a-kicker a { color: var(--accent); text-decoration: none; } .a-kicker a:hover { text-decoration: underline; } .a-hero h1 { margin: 0; font-size: var(--h1); line-height: 1.1; letter-spacing: var(--h1-lauf); font-weight: var(--h1-fett); color: var(--ink); /* 32ch, damit der längste Titel auf ZWEI Zeilen umbricht und nicht auf drei. Bei 20ch stand «Was kostet es, die Buchhaltung auszulagern?» dreizeilig und liess rechts die halbe Fläche leer. Die vier Titel liegen zwischen 25 und 44 Zeichen; 32ch bricht die langen einmal und lässt die kurzen einzeilig. */ text-wrap: balance; max-width: 32ch; } /* DER BLOGKOPF FOLGT DEN BEIDEN UEBERSICHTSSEITEN und nicht den Artikeln: Titelgroesse, Abstand und Vorspann wie bei Vergleichen und Marktdaten. NUR .b-main — die Artikel- und Beitragsseiten behalten ihren grossen Titel, sie sind Lesestuecke und keine Uebersichten. */ .b-main .a-hero { padding: 40px 0 26px; } /* Der Blogkopf traegt das Muster wie seine Nachbarn. .a-hero ist ein Raster; das Muster liegt darin absolut und faellt darum nicht ins Raster hinein — vorausgesetzt, die Huelle hat einen Bezugspunkt. Genau den setzt .hat-grund, und die Regel dort deckt auch .a-hero ab, weil ihr Inhalt .wrap heisst … NEIN: im Blogkopf heisst er nicht .wrap. Darum hier ausdruecklich. */ .a-hero.hat-grund > *:not(.rad-grund) { position: relative; z-index: 1; } /* DAS MUSTER UEBER DIE GANZE BREITE, nicht in der Textspalte. .a-hero ist ein Raster, und `.a-hero > *` setzt jedes Kind in die Spalte `text`. Das Muster war damit auf 1180 Pixel eingesperrt, waehrend es auf «Vergleichen» und «Marktdaten» 1359 breit ist und bis an den Fensterrand reicht. Weil das SVG mit xMaxYMid am RECHTEN Rand haengt, sass die Radarmitte auf der Blogseite mitten im Text statt am Seitenrand — dieselbe Grafik, ein anderes Bild. Im Bild verglichen. */ .a-hero > .rad-grund { grid-column: voll; } .b-main .a-hero h1 { max-width: none; } /* ---------------------------------------------- Der Kopf des BEITRAGS: dunkel Ein Band, das unter der ohnehin dunklen Kopfleiste ansetzt und mit ihr zu einem Block verschmilzt. Der Beitrag beginnt damit sichtbar, statt nach einer Leerstelle einfach anzufangen. WARUM ZURUECK. Der helle Kopf vom 24.08.2026 ist fuer die Uebersichten richtig — sie sollen oben aussehen wie die Marktbefunde. Auf dem einzelnen Beitrag hat er die Standzeile mitgerissen: .b-byline traegt eine weisse Haarlinie, .b-stand dt/dd blasse Graustufen und .b-haupt einen weissen Schleier — alles fuer einen dunklen Grund gebaut. Auf Weiss stand die Zeile fast unsichtbar da. Entweder man faerbt vier Bausteine um oder man gibt dem Beitrag seinen Grund zurueck; das Zweite ist eine Zeile und nicht vier. MIT DEN LEISTENTOKEN UND NICHT MIT #fff. Frueher standen hier feste Hexwerte, darunter ein rotes #ff5b62 aus der alten Hausfarbe. Die Leistentoken tragen die neue blaue Farbe von selbst, gelten in beiden Schemata und sind in pruefe-kontrast.js als Paar bar-ink auf bar-bg schon geprueft. */ .a-hero-dunkel { /* DIE UNTERE KANTE, gesehen und nicht gerechnet: im Dunkelmodus liegt das Band auf #0a1b33 und die Seite darunter auf #06142a — rechnerisch 1.2:1, im Bild fast dieselbe Flaeche. Der Kopf verlor damit genau die Wirkung, fuer die er wieder eingefuehrt wurde. Dieselbe Haarlinie, mit der sich schon die Kopfleiste abgrenzt; im Hellmodus trennen die Flaechen ohnehin und die Linie faellt zwischen Fastschwarz und Fastweiss nicht auf. */ border-bottom: 1px solid var(--bar-line); background: var(--bar-bg); padding: 68px 0 60px; margin-bottom: var(--a-luft-gross); } .a-hero-dunkel .a-kicker { margin: 0 0 24px; } .a-hero-dunkel .a-kicker a { color: var(--bar-nav); } .a-hero-dunkel .a-kicker a:hover { color: var(--bar-ink); } .a-hero-dunkel .b-tr { color: var(--bar-line); } .a-hero-dunkel h1 { color: var(--bar-ink); } /* GEMESSEN, nicht gerechnet: 2.46:1 stand hier. `.b-main .a-lead` steht eine Zeile weiter unten, hat dieselbe Gewichtung (0,2,0) und setzt --ink-soft — also gewann die spaetere Zeile, und der Vorspann des Beitrags stand in Dunkelblau auf Fastschwarz. Eine Klasse mehr entscheidet es zurueck. Das ist dieselbe Falle wie am 24. August: eine Farbe fuer hellen Grund, die auf dunklem landet — nur diesmal in der anderen Richtung. */ .a-hero.a-hero-dunkel .a-lead { color: var(--bar-muted); } /* DER KRUEMELPFAD IM DUNKLEN BAND. Er kommt nur auf der Begriffsseite vor; der Blogbeitrag traegt dort .a-kicker. Sonst stuende der Verweis in var(--accent) — gerechnete 3.14:1 auf dem Bandgrund, bei 11.5px zu dunkel. Dieselben drei Rollen wie in der Kopfleiste: Weg, Trenner, Standort. */ /* DERSELBE ABSTAND WIE UEBER DEM BLOGTITEL. .a-krumen bringt 12px mit, .a-kicker steht im dunklen Band auf 24 — im Bild nebeneinander gelegt lasen sich die zwei Koepfe dadurch als zwei Muster statt als eines. */ .a-hero-dunkel .a-krumen { margin: 0 0 24px; } .a-hero-dunkel .a-krumen a { color: var(--bar-nav); } .a-hero-dunkel .a-krumen a:hover { color: var(--bar-ink); } .a-hero-dunkel .a-krumen li + li::before { color: var(--bar-line); } .a-hero-dunkel .a-krumen [aria-current] { color: var(--bar-muted); } .b-main .a-lead { margin: 10px 0 0; max-width: 72ch; /* SERIFENLOS wie auf den Nachbarseiten. .a-lead erbt die Leseschrift der Artikel — auf einer Uebersichtsseite steht sie neben zwei serifenlosen Vorspannen und faellt aus dem Bild. */ font-family: "Inter", "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; font-size: 16px; line-height: 1.62; color: var(--ink-soft); font-weight: 400; } .a-lead { margin: 30px 0 0; max-width: 62ch; font-size: 16px; line-height: 1.6; color: var(--ink-soft); font-weight: 400; letter-spacing: -.012em; } /* Standzeile: was diese Seite trägt, in einer Zeile, abgesetzt durch eine Linie in der Akzentfarbe statt durch Abstand allein. */ .a-meta { margin: 38px 0 0; padding-top: 20px; border-top: 2px solid var(--accent); /* GERECHNET: #8f97a1 auf dem hellen Seitengrund sind 2.64:1 — die Zeile stammt aus der Zeit, in der dieser Kopf dunkel war. Auf hellem Grund gilt --muted (4.76:1). */ font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 600; } /* ------------------------------------------------------------------ Text */ /* KEIN ROTER STRICH MEHR über der Abschnittsüberschrift (23. August 2026, auf Wunsch entfernt). Mit ihm sind padding-top und position: relative entfallen — beide standen nur da, um ihm Platz und Bezug zu geben. */ .a-body > h2 { margin: var(--a-luft-gross) 0 16px; font-size: clamp(21px, 2vw, 26px); line-height: 1.14; letter-spacing: -.028em; font-weight: 670; color: var(--ink); text-wrap: balance; max-width: 38ch; } /* Die ERSTE Ueberschrift im hellen Bereich braucht Abstand zum dunklen Band, nur nicht den vollen Abschnittsabstand: sie folgt keinem Gedanken, sie faengt den ersten an. Ganz ohne Abstand klebte sie an der Kante des Bandes. */ .a-body > h2:first-child { margin-top: 24px; } .a-body > p { margin: 0 0 19px; font-size: 17.5px; line-height: 1.68; color: var(--ink-soft); letter-spacing: -.003em; } .a-body > h2 + p { font-size: 18.5px; color: var(--ink); } .a-body > p:last-child { margin-bottom: 0; } /* ------------------------------------------------- Datenblock als Fläche Der gemeinsame Nenner aller Blöcke, die keine Prosa sind: weisse Fläche, feiner Rahmen, weicher Schatten. Erst dadurch liest sich ein Block als Gegenstand auf der Seite und nicht als anders gesetzter Text. */ .a-zahlen, .a-figur, .a-umfang, .a-punkte, .a-faelle { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); margin: var(--a-luft) 0; } /* ---------------------------------------------------------- Kennzahlen */ .a-zahlen { display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); overflow: hidden; } .a-zahlen > div { padding: 30px 28px 32px; border-right: 1px solid var(--line); } .a-zahlen > div:last-child { border-right: 0; } .a-num { margin: 0; font-size: clamp(26px, 2.5vw, 33px); line-height: 1; letter-spacing: -.038em; font-weight: 670; color: var(--accent); font-variant-numeric: tabular-nums; } .a-lab { margin: 14px 0 0; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; font-weight: 650; color: var(--ink); } .a-say { margin: 10px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--muted); } /* ------------------------------------------------------------- Tabellen Die Kopfzeile liegt auf Tinte und nicht auf Weiss: sie trägt die Anbieternamen, und die sind die Achse, an der die ganze Tabelle gelesen wird. Zebrastreifen in einem kaum sichtbaren Ton — bei fünf Zeilen und fünf Spalten verliert man sonst die Zeile. */ .a-figur { padding: 0; overflow: hidden; } .a-scroll { overflow-x: auto; } .a-tab { border-collapse: collapse; width: 100%; min-width: 660px; } .a-tab thead th { padding: 18px 20px; text-align: right; vertical-align: bottom; font-size: 12.5px; letter-spacing: .04em; font-weight: 650; color: var(--bar-ink); background: var(--bar-bg); white-space: nowrap; } .a-tab thead th:first-child { text-align: left; padding-left: 28px; } .a-tab thead th:last-child { padding-right: 28px; } .a-tab tbody th, .a-tab tbody td { padding: 18px 20px; text-align: right; vertical-align: middle; border-bottom: 1px solid var(--line); } .a-tab tbody th { padding-left: 28px; text-align: left; font-weight: 400; } .a-tab tbody td:last-child { padding-right: 28px; } .a-tab tbody tr:nth-child(even) { background: var(--surface-2); } .a-tab tbody tr:last-child th, .a-tab tbody tr:last-child td { border-bottom: 0; } .a-tab tbody th b { display: block; font-size: 15.5px; font-weight: 650; color: var(--ink); letter-spacing: -.012em; } .a-tab tbody th span { display: block; margin-top: 3px; font-size: 13px; color: var(--muted); } .a-zahl { display: block; font-size: 16px; font-weight: 640; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.012em; white-space: nowrap; } .a-balken { display: block; margin: 9px 0 0 auto; width: 100%; max-width: 130px; height: 5px; background: var(--line); border-radius: 3px; overflow: hidden; } .a-balken i { display: block; height: 100%; background: var(--accent); border-radius: 3px; } .a-tab .a-ja { color: var(--accent); font-size: 19px; font-weight: 700; } .a-tab .a-leer { color: var(--muted); font-size: 13.5px; } .a-figur figcaption { padding: 18px 28px 22px; border-top: 1px solid var(--line); background: var(--surface-2); font-size: 13.5px; line-height: 1.55; color: var(--muted); } /* --------------------------------------------------- Die Musterbetriebe Fünf Karten in EINER Fläche, getrennt durch Haarlinien. Der Balken oben trägt die Stufe: die Reihe --ton-0 bis --ton-4, hell für den kleinsten und dunkel für den grössten Betrieb — dieselbe Reihe wie im Preisdiagramm des Marktbefunds. Sie gibt der Folge eine Richtung, ohne eine zweite Farbe. */ .a-faelle { display: grid; gap: 0; overflow: hidden; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .a-fall { padding: 26px 22px 26px; border-right: 1px solid var(--line); position: relative; } .a-fall:last-child { border-right: 0; } .a-fall::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: var(--stufe); } .a-fall-nr { margin: 8px 0 0; font-size: 11.5px; font-weight: 700; letter-spacing: .12em; color: var(--muted); font-variant-numeric: tabular-nums; } .a-fall h3 { margin: 6px 0 16px; font-size: 17px; line-height: 1.18; letter-spacing: -.022em; font-weight: 670; color: var(--ink); } .a-fall dl { margin: 0; display: grid; gap: 11px; } .a-fall dt { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); font-weight: 650; } .a-fall dd { margin: 2px 0 0; font-size: 15px; font-weight: 570; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.012em; } /* ------------------------------------------------- Leistungsumfang */ .a-umfang { padding: 0; list-style: none; display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); overflow: hidden; } .a-umfang li { display: grid; grid-template-columns: 30px 1fr; row-gap: 8px; align-items: start; padding: 28px 26px 30px; border-right: 1px solid var(--line); } .a-umfang li:last-child { border-right: 0; } .a-haken { grid-row: 1 / 3; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; font-size: 12px; font-weight: 700; margin-top: 2px; } .a-umfang b { font-size: 16.5px; font-weight: 660; color: var(--ink); letter-spacing: -.018em; } .a-umfang li > span:last-child { grid-column: 2; font-size: 14px; line-height: 1.55; color: var(--muted); } /* ---------------------------------------------------- Nummerierte Punkte Die Ziffer trägt die Gliederung und steht darum gross und in der Akzentfarbe. Alle Zellen sind gleich hoch (align-items: stretch über das Raster), damit die Reihe unten nicht ausfranst — das war vorher der unruhigste Teil der Seite. */ .a-punkte { padding: 0; list-style: none; counter-reset: pk; display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); overflow: hidden; } /* Die Trennlinien liegen als AUSSENSCHATTEN und nicht als Rahmen: bei auto-fit weiss niemand vorher, welche Zelle in der letzten Zeile oder Spalte steht, und ein echter Rahmen zeichnete dort eine Linie auf die Kartenkante. Ein Schatten nach rechts und unten wird vom overflow: hidden der Karte abgeschnitten und verschwindet an den Rändern von selbst. */ .a-punkte li { counter-increment: pk; padding: 28px 26px 32px; box-shadow: 1px 0 0 var(--line), 0 1px 0 var(--line); } .a-punkte li::before { content: counter(pk, decimal-leading-zero); display: block; margin-bottom: 16px; font-size: 13px; font-weight: 700; letter-spacing: .14em; color: var(--accent); font-variant-numeric: tabular-nums; } .a-punkte h3 { margin: 0 0 9px; font-size: 17px; line-height: 1.24; letter-spacing: -.022em; font-weight: 660; color: var(--ink); text-wrap: balance; } .a-punkte p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); } /* ------------------------------------------------------ Hinweis und Zitat Der Hinweis ist ein Kasten in gebrochenem Weiss mit Akzentkante links — er unterbricht den Lesefluss absichtlich, weil er eine Einschränkung trägt, die man nicht überlesen soll. */ .a-hinweis { margin: var(--a-luft) 0; padding: 26px 30px 28px; background: var(--surface-2); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--r); } .a-hinweis p { margin: 0; font-size: 16px; line-height: 1.65; color: var(--ink-soft); } .a-hinweis b { color: var(--ink); font-weight: 670; } /* Die herausgestellte Kernaussage. Auf Tinte, weil sie den Abschnitt abschliesst und nicht fortsetzt — ein dunkler Block zwischen zwei hellen ist der stärkste Halt, den eine lange Seite bekommen kann. */ .a-zitat { margin: var(--a-luft-gross) 0; padding: 44px 48px; background: var(--bar-bg); border: 0; border-radius: var(--r); } /* 42ch statt 24: bei 24 stand der Satz als schmale Säule in einer dunklen Fläche, von der zwei Drittel leer blieben — der Block war hoch und sagte wenig. Breiter gesetzt füllt derselbe Satz die Fläche und der Kasten wird halb so hoch. */ .a-zitat p { margin: 0; max-width: 42ch; font-size: clamp(21px, 2.2vw, 28px); line-height: 1.28; letter-spacing: -.03em; font-weight: 640; color: #fff; text-wrap: balance; } /* ------------------------------------------------------------------ Schluss */ .a-ende { margin: var(--a-luft-gross) 0 0; padding: 40px 44px 44px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); } .a-ende p { margin: 0 0 24px; max-width: 64ch; font-size: 16.5px; line-height: 1.6; color: var(--ink-soft); } .a-knopf { display: inline-block; padding: 16px 28px; border-radius: var(--r-s); background: var(--accent); color: var(--accent-ink); font-size: 15.5px; font-weight: 650; letter-spacing: -.012em; text-decoration: none; } .a-knopf:hover { background: var(--ink); } /* Die uebrigen Artikel derselben Kategorie, unter dem Knopf. Ohne sie war jeder Artikel eine Sackgasse: erreichbar nur ueber die Kategorie, und untereinander gar nicht. */ .a-weiter { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); } .a-weiter > p { margin: 0 0 12px; font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); font-weight: 650; } .a-weiter ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; } .a-weiter a { font-size: 16px; font-weight: 600; color: var(--ink); text-decoration: none; letter-spacing: -.012em; border-bottom: 1px solid var(--line-hard); } .a-weiter a:hover { color: var(--accent); border-bottom-color: var(--accent); } @media (max-width: 900px) { .a-main { --a-col: min(var(--seitenbreite), 100% - 32px); --a-luft: 30px; --a-luft-gross: 28px; padding-bottom: 72px; } .a-hero { padding: 40px 0 44px; } .a-body > p { font-size: 16.5px; line-height: 1.64; margin-bottom: 16px; } .a-body > h2 + p { font-size: 17px; } .a-lead { font-size: 17px; } .a-zahlen > div { padding: 24px 22px 26px; } .a-fall { padding: 22px 20px; } .a-umfang li { padding: 24px 22px 26px; } .a-punkte li { padding: 24px 22px 28px; } .a-hinweis { padding: 22px 24px 24px; } .a-hinweis p { font-size: 15.5px; } .a-zitat { padding: 34px 26px; } .a-ende { padding: 30px 26px 32px; } .a-tab thead th, .a-tab tbody th, .a-tab tbody td { padding: 14px 14px; } .a-tab thead th:first-child, .a-tab tbody th { padding-left: 18px; } .a-figur figcaption { padding: 16px 18px 18px; } } /* Die frühere Telefonfassung des Kategorietextes stand hier und hätte die neue überschrieben — sie kam später im Stilblatt und gewann damit. Die Telefonwerte stehen jetzt beim Block selbst, bei 860px. */ /* Querverweis auf die Gegenkategorie, über der Tabelle. «Buchhaltung» und «Buchhaltung auslagern» beantworten dieselbe Frage auf zwei Wege; wer auf der einen Seite landet, soll den anderen sehen, ohne ihn zu suchen. Als Fläche und nicht als Textzeile, damit es beim Überfliegen auffällt — aber in --good und nicht in --accent: Rot heisst auf dieser Seite «von Ihnen gewählt» und in der Schweiz-Leiste «zwingende Anforderung». Ein Wegweiser ist keines von beidem. LEISTE über die ganze Breite, oben bündig an die Bedienzeile. Kein Rahmen oben und keine runden Ecken: sie schliesst an, sie liegt nicht darauf. Nur unten eine Linie, damit sie sich von der Tabelle trennt. position: sticky mit left: 0 aus demselben Grund wie bei der Fusszeile — scrollt eine breite Vergleichstabelle waagrecht, bleibt die Leiste stehen statt mitzuwandern. */ .querband { display: block; margin: 0; padding: 0; background: color-mix(in srgb, var(--good) 9%, var(--surface)); border-bottom: 1px solid color-mix(in srgb, var(--good) 32%, transparent); font-size: 13.5px; color: var(--ink-soft); /* sticky mit left: 0 aus demselben Grund wie bei der Fusszeile — scrollt eine breite Vergleichstabelle waagrecht, bleibt die Leiste an ihrem Platz. relative wäre für das X auch genug, sticky löst beides. */ position: sticky; left: 0; } /* Der Text folgt dem seitlichen Einzug der Seite, die Fläche nicht. Rechts Platz für das X, damit ein langer Satz nicht darunter läuft. */ .querband-in { display: block; padding: 11px 20px; max-width: var(--maxw); margin: 0 auto; } .querband-in a { text-decoration: none; color: inherit; } .querband-in a:hover { color: var(--ink); } .querband-in a:hover .querband-ar { transform: translateX(2px); } .querband b { color: var(--ink); font-weight: 640; } .querband-ar { color: var(--good); font-weight: 700; display: inline-block; transition: transform .14s; } /* Schliessknopf. Setzt app.js, darum steht er ohne JavaScript nicht da. Absolut rechts und über die ganze Höhe klickbar — ein 12px-Kreuz zu treffen ist unnötig fummelig, wenn daneben Platz ist. */ .querband-x { position: absolute; top: 0; right: 0; bottom: 0; width: 44px; border: 0; background: none; cursor: pointer; padding: 0; color: var(--muted); font-size: 17px; line-height: 1; } .querband-x:hover { color: var(--ink); } .querband[hidden] { display: none; } @media (max-width: 760px) { .querband-in { padding: 10px 14px; } } /* .cat-note stand hier: eine Notiz über der Tabelle, die bei «Buchhaltung auslagern» den Referenzfall trug. Entfernt — über der Tabelle steht höchstens EIN Streifen, und das ist der Querverweis. Drei Streifen hatten das Leitprinzip «Bedienzeile, Tabelle, Fusszeile» wieder aufgeweicht. */ /* Kriterienseite: Überschrift und Erklärabsatz ÜBER der Tabelle. Auf der Kategorieseite steht dort bewusst nichts — der Vergleich ist die Seite. Hier ist der Text der Grund, warum die Seite mehr ist als ein gefilterter Ausschnitt, darum darf er Platz haben. Schmal gehalten: ein Absatz über die ganze Breite einer Vergleichstabelle wäre nicht mehr lesbar. */ /* Die Breitenschranke sitzt am TEXTBLOCK, nicht am ganzen Kopf: der Kopf ist seit dem 29. Juli 2026 eine Zeile mit dem Schweiz-Wähler rechts aussen, und 78ch am Kopf hätten den Wähler mitgeschnürt statt den Lesetext. */ .crit-head { padding-top: 22px; padding-bottom: 18px; } .crit-head .cat-head-t { max-width: 78ch; } .crit-head h1 { font-size: var(--h1); letter-spacing: var(--h1-lauf); font-weight: var(--h1-fett); line-height: 1.1; } .crit-head .cat-sub { margin-top: 11px; } .crit-lead { margin: 10px 0 0; font-size: 15px; line-height: 1.6; color: var(--ink-soft); } .crit-lead b { color: var(--ink); font-weight: 620; } .crit-back { margin: 0; font-size: 13px; } .crit-back a { color: var(--muted); } .crit-back a:hover { color: var(--accent); } .soon-wrap { padding-top: 26px; padding-bottom: 40px; max-width: 92ch; } .soon-wrap h1 { font-size: var(--h1); letter-spacing: var(--h1-lauf); font-weight: var(--h1-fett); line-height: 1.1; } .soon-lead { margin-top: 8px; font-size: 15px; color: var(--ink-soft); } .soon-note { margin-top: 16px; padding: 12px 14px; font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); background: var(--surface-2); border: 1px dashed var(--line-hard); border-radius: var(--r-s); } .soon-crit { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 0; } .soon-crit li { padding: 12px 0 13px; border-top: 1px solid var(--line); } .soon-crit b { display: block; font-size: 14px; font-weight: 620; } .soon-crit span { display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); } .cat-demo { flex: none; padding: 1px 6px; border-radius: 3px; font-size: 9.5px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; background: var(--muted); color: var(--bg); white-space: nowrap; } .cat-card-demo { border-style: dashed; } /* ------------------------------------------------------------- Impressum Reine Textseite. Die Offenlegung steht hier im Volltext; auf den Vergleichsseiten bleibt die Kurzform in der Kopfzeile. */ /* DIE HUELLE SO BREIT WIE UEBERALL, der TEXT so schmal wie bisher. Vorher war die Huelle selbst auf 760px begrenzt — dadurch sass der ganze Kopf mittig, waehrend Vergleichen, Marktdaten und Blog links bündig beginnen. Beim Wechsel sprang der Titel quer über den Bildschirm. Die Lesebreite von 760px bleibt: ein Rechtstext ueber die volle Breite waere unlesbar. Sie steht jetzt an den Kindern statt an der Huelle. */ .legal .wrap { padding-top: 40px; padding-bottom: 44px; max-width: calc(var(--seitenbreite) + 40px); } .legal .wrap > * { max-width: 760px; } /* Die Autorenseite ist die einzige zweispaltige: 760px liessen dem Text nach Abzug der Seitenleiste 448 Pixel, und das ist eine Spalte, keine Seite. 1100px ist dasselbe Mass wie auf den Artikelseiten. */ .legal-autor .wrap { max-width: 1100px; } /* Oberzeile, Name und Vorspann stehen AUSSERHALB des zweispaltigen Feldes und liefen deshalb über die ganze Breite — sobald die Seitenleiste nach oben gezogen wird, verschwindet der Vorspann unter der Bildkachel. Sie bekommen dieselbe Breite wie die Textspalte: 1100 minus Leiste (300) minus Spalte (34). Wer eines der drei Masse ändert, ändert auch dieses. */ .legal-autor .legal-kicker, .legal-autor h1, .legal-autor .legal-lead { max-width: calc(100% - 334px); } /* UND DAS ZWEISPALTIGE FELD SELBST — es fehlte, und das war der Fehler. GEMESSEN am 25. August 2026: `.legal .wrap > *` deckelt JEDES Kind der Huelle auf 760 Pixel, und .af-kern ist ein Kind. Die Ausnahme darueber hob den Deckel fuer Oberzeile, Name und Vorspann, nicht aber fuer das Feld. Folge, beides im Bild und in der Messung: die Textspalte war 426 statt 726 Pixel breit — «eine Spalte, keine Seite», genau der Zustand, den der Kommentar oben abschaffen wollte; und die Bildkachel sass bei x=610..910, waehrend der Vorspann bis 876 laeuft. Sie ist nach oben gezogen und deckend, also verschwanden rund 266 Pixel jeder Vorspannzeile dahinter — im Bild las sich das als «betreibe diesen Vergleich — kmu-sof» und dann nichts mehr. Mit dem Feld auf voller Breite steht die Kachel bei 910..1210 und der Vorspann endet bei 876: 34 Pixel Luft, dieselbe Spalte wie im Raster. */ .legal-autor .af-kern { max-width: none; } .legal h1 { font-size: var(--h1); letter-spacing: var(--h1-lauf); font-weight: var(--h1-fett); line-height: 1.1; } .legal-lead { margin-top: 10px; font-size: 16px; color: var(--ink-soft); } .legal .sub { margin-top: 30px; font-size: 16px; } .legal-p { margin-top: 9px; font-size: 15px; color: var(--ink-soft); } .legal-strong { padding: 13px 15px; background: var(--surface); border-radius: var(--r-s); border-left: 3px solid var(--accent); color: var(--ink); } .legal-list { margin: 9px 0 0; padding-left: 20px; font-size: 15px; color: var(--ink-soft); } .legal-list li { margin-top: 5px; } /* Betreiberangaben: Beschriftung und Wert nebeneinander, damit Firma, UID und MWST-Nummer auf einen Blick prüfbar sind. Auf schmalen Schirmen untereinander — eine zweispaltige Liste mit umbrechenden Nummern liest sich schlechter als zwei Zeilen. */ .legal-dl { margin: 12px 0 0; font-size: 15px; } .legal-row { display: grid; grid-template-columns: 200px 1fr; gap: 4px 18px; padding: 7px 0; border-bottom: 1px solid var(--line); } .legal-row:first-child { border-top: 1px solid var(--line); } .legal-row dt { color: var(--muted); font-size: 13.5px; padding-top: 1px; } .legal-row dd { margin: 0; color: var(--ink); } @media (max-width: 560px) { .legal-row { grid-template-columns: 1fr; gap: 2px; } } /* Offene Pflichtangaben — sichtbar unfertig, damit es nicht vergessen wird */ .legal-todo { margin-top: 12px; padding: 14px 16px; background: color-mix(in srgb, var(--accent) 7%, var(--surface)); border: 1px dashed color-mix(in srgb, var(--accent) 40%, var(--line)); border-radius: var(--r-s); } .legal-todo-h { font-size: 13px; font-weight: 650; color: var(--accent); text-transform: uppercase; letter-spacing: .06em; } .legal-todo-note { margin-top: 6px; font-size: 13.5px; color: var(--ink-soft); } .legal-todo ul { margin: 8px 0 0; padding-left: 20px; font-size: 14px; color: var(--ink-soft); } .legal-todo li { margin-top: 3px; } /* Die erste Ueberschrift folgt auf den Schluessel und braucht weniger — dort trennt schon dessen Rahmen. */ .start-sub:first-of-type { margin-top: 24px; } /* ------------------------------------------- Seitenleiste «Entscheidet in der Schweiz». Weiter ein
und keine Skript-Lösung: so öffnet die Leiste auch ohne JavaScript und die Kriterien stehen im Quelltext. Panel und Abdunklung sind fixiert, liegen also nicht im Fluss — .chside braucht darum selbst keine Grösse. Rechts aussen in der Steuerleiste, weil es keine Filtereinstellung ist, sondern Auskunft über die Kategorie. Die Wähler tragen ZWEI Klassen (.chside > .chside-btn), weil das Element auch .dd trägt und .dd > summary sonst mit höherer Spezifität gewinnt — daran ist der erste Versuch gescheitert. */ /* Der EINZIGE automatische Rand in dieser Zeile — er schiebt den Wähler an den rechten Rand und setzt ihn damit sichtbar von den Filtern ab. Das ist richtig so: er filtert nicht, er erklärt. Trägt ein zweites Element derselben Zeile ebenfalls margin-left: auto, teilen sich beide den freien Platz und das erste steht in der Mitte statt am Rand. Genau daran lag es, als die Anzahl mitten in der Leiste hing. */ .chside { position: relative; flex: none; margin-left: auto; } .chside > .chside-btn { list-style: none; cursor: pointer; user-select: none; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; padding: 5px 12px 5px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 600; /* Neutral, nicht rot: Rot ist in der Steuerleiste für «noch nicht gesetzt» reserviert. Das Schweizerkreuz trägt die Farbe, der Knopf nicht. */ color: var(--ink); background: var(--surface); border: 1px solid var(--line-hard); transition: background-color .14s, border-color .14s; } .chside > .chside-btn::-webkit-details-marker { display: none; } /* Kein Chevron: die Leiste klappt nicht auf, sie fährt ein */ .chside > .chside-btn::after { content: none; } .chside > .chside-btn:hover { background: var(--bg); border-color: var(--ink); } /* Schweizerkreuz, dieselbe Geometrie wie die Marke im Kopf, auf 14px skaliert */ .ch-mark { width: 14px; height: 14px; border-radius: 2px; position: relative; flex: none; background: var(--ch-red); } .ch-mark span { position: absolute; background: #fff; border-radius: 1px; } .ch-mark span:nth-child(1) { left: 5.9px; top: 2.6px; width: 2.2px; height: 8.8px; } .ch-mark span:nth-child(2) { left: 2.6px; top: 5.9px; width: 8.8px; height: 2.2px; } .chside-scrim { position: fixed; inset: 0; z-index: 55; background: rgba(10, 12, 14, .45); backdrop-filter: blur(2px); } .chside-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 60; width: min(430px, 100%); overflow-y: auto; padding: 28px 28px 44px; background: var(--ch-red); color: #fff; box-shadow: var(--shadow-lg); animation: chslide .2s ease-out; } @keyframes chslide { from { transform: translateX(16px); opacity: .5; } to { transform: none; opacity: 1; } } .chside-close { position: absolute; top: 14px; right: 16px; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; border: 1px solid rgba(255, 255, 255, .35); background: none; color: #fff; font-size: 22px; line-height: 1; display: grid; place-items: center; transition: background-color .14s, border-color .14s; } .chside-close:hover { background: rgba(255, 255, 255, .16); border-color: #fff; } /* Kicker mit umgekehrtem Kreuz: weisses Feld, rotes Kreuz — ein rotes Feld auf rotem Grund wäre unsichtbar. */ .chside-kicker { display: flex; align-items: center; gap: 8px; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 650; color: rgba(255, 255, 255, .82); } .chside-kicker .ch-mark { background: #fff; } .chside-kicker .ch-mark span { background: var(--ch-red); } .chside-panel h2 { margin-top: 11px; font-size: 22px; color: #fff; } .chside-lead { margin-top: 11px; font-size: 13.5px; line-height: 1.6; color: rgba(255, 255, 255, .93); } .chside-list { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 0; } .chside-list li { padding: 13px 0 14px; border-top: 1px solid rgba(255, 255, 255, .3); } .chside-list b { display: block; font-size: 14.5px; font-weight: 650; } .chside-list span { display: block; margin-top: 4px; font-size: 13px; line-height: 1.55; color: rgba(255, 255, 255, .86); } /* Die Punkte stehen in EINER Liste. Bis Juli 2026 trennte hier eine Zwischenüberschrift die Kriterien der Kategorie von den allgemeinen Punkten — eine Einteilung, die nur intern existiert: für den Leser ist «Datenstandort» keine andere Sorte Anforderung als «TARDOC». */ /* ---------------------------------------------- Belege auf der Produktseite Die Quellenliste ist bewusst schlicht: sie soll benutzbar sein, nicht schmücken. Die Adressen stehen ausgeschrieben statt hinter einem Wort wie «Quelle», damit man vor dem Klick sieht, wohin es geht. */ /* Kategorien ohne schweizerische Kriterien sagen das über der Tabelle. Neutral gehalten, nicht als Warnung: es ist eine Einordnung, kein Mangel. */ .no-edge { margin: 0; padding: 9px 20px; font-size: 12.5px; color: var(--ink-soft); background: var(--surface-2); border-bottom: 1px solid var(--line); } .no-edge b { color: var(--ink); font-weight: 620; } /* Preisquote je Kategorie. Balken UND Zahl: der Balken macht das Gefälle auf einen Blick sichtbar, die Zahl macht es nachprüfbar. Ohne Zahl wäre es Grafik, ohne Balken eine Liste, die niemand liest. */ .meth-kat { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 14px; } .meth-kat td { padding: 5px 0; border-bottom: 1px solid var(--line); vertical-align: middle; } .meth-kat td:first-child { color: var(--ink-soft); } .meth-kat-n { width: 64px; text-align: right; padding-right: 14px !important; font-variant-numeric: tabular-nums; color: var(--muted); font-size: 13px; } .meth-kat-bar { width: 40%; } .meth-kat-bar i { display: block; height: 5px; border-radius: 2px; min-width: 2px; background: color-mix(in srgb, var(--ink) 55%, var(--surface)); } /* Korrekturprotokoll. Der Leerzustand ist zurückhaltend gesetzt — er ist keine Entschuldigung, sondern eine Angabe. */ .meth-korr-leer { color: var(--muted); font-size: 14px; } .korr-von { color: var(--muted); font-size: 12.5px; } /* Das Datum braucht so viel Platz, wie ein Datum braucht — nicht die Haelfte der Seite. Solange die Liste leer war, fiel die halbleere erste Spalte nicht auf; mit Eintraegen stand dort eine 500px breite Luecke. */ .meth-korr { table-layout: fixed; } .meth-korr td:first-child { width: 8.5em; white-space: nowrap; vertical-align: top; color: var(--muted); font-variant-numeric: tabular-nums; } .meth-korr td:last-child { vertical-align: top; } /* ZURUECKSETZEN AM FUSS DES FILTERPANELS. Als stiller Text und nicht als Knopf: er raeumt eine Einstellung weg und soll nicht mit den Schaltern konkurrieren, die sie setzen. Abgesetzt durch eine Haarlinie, weil er zu keiner der Gruppen darueber gehoert, sondern zu allen. */ .fp-reset { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); } .fp-reset button { border: 0; background: none; padding: 0; cursor: pointer; font: inherit; font-size: 11.5px; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; } .fp-reset button:hover { color: var(--ink); } /* ========================================================================= BLOG ------------------------------------------------------------------------- Die Blogseiten benutzen das Artikelraster (.a-main, .a-hero, .a-body, .a-col, .a-wide) unverändert. Das ist Absicht und keine Sparmassnahme: die beiden Seitentypen sollen als dieselbe Familie erkennbar sein, und ein zweites Raster daneben wäre ein zweiter Ort, an dem eine Breite gepflegt werden muss. Neu ist nur, was ein Blogbeitrag mehr hat als ein Artikel: Verfasser und Datum im Kopf, ein Antwortblock, ein Inhaltsverzeichnis, eine Tabelle mit einem Produkt JE ZEILE, ein Frageabschnitt, die Herkunft der Zahlen, ein Verfasserkasten — und die Übersicht. ========================================================================= */ /* ---------------------------------------------------------- Kopf: Standzeile Sie steht IM dunklen Kopfband, unter dem Vorspann. Getrennt durch eine Haarlinie und nicht durch Abstand: Abstand allein liest sich im dunklen Band als Loch, die Linie als Absatz. */ .b-byline { margin-top: 34px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .14); display: flex; flex-wrap: wrap; gap: 22px 40px; align-items: center; } .b-autor { margin: 0; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; } .b-autor b { grid-column: 2; align-self: end; font-size: 15px; font-weight: 650; color: var(--bar-ink); letter-spacing: -.012em; } .b-autor > span:last-child { grid-column: 2; align-self: start; font-size: 13px; color: var(--bar-muted); } /* Die Initialen. Ein Bild wäre hier die naheliegende Lösung und die falsche: es wäre eine Datei mehr, die mit der Person veraltet, und sie sagt in 40 Pixeln nichts, was die Initialen nicht auch sagen. */ .b-ini { grid-row: 1 / 3; grid-column: 1; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); font-size: 13.5px; font-weight: 700; letter-spacing: .02em; } .b-stand { margin: 0; display: flex; flex-wrap: wrap; gap: 18px 32px; } .b-stand > div { display: grid; gap: 3px; } .b-stand dt { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--bar-muted); font-weight: 650; } .b-stand dd { margin: 0; font-size: 14px; color: var(--bar-nav); font-weight: 500; } /* Trennpunkt im Krümelpfad. Er trennt zwei Verweise und ist selbst keiner. */ .b-tr { margin: 0 .5em; color: var(--muted); } /* ------------------------------------------------------ Antwort ganz oben «Das Wichtigste in Kürze». Der wichtigste Block der Seite: er steht in den ersten 30 Prozent des Dokuments, weil dort der Teil liegt, der zitiert wird — und weil ein Leser eine Antwort sucht und keinen Spannungsbogen. Durchgezählt und nicht mit Punkten: Listenformate tragen den grössten Teil aller Zitate, und die Ziffer ordnet, was ein Punkt nur aufzählt. */ .b-kurz { margin: 0 0 var(--a-luft-gross); padding: 34px 38px 36px; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--r); box-shadow: var(--shadow); } .b-kurz h2 { margin: 0 0 22px; padding: 0; max-width: none; font-size: 12px; letter-spacing: .11em; text-transform: uppercase; font-weight: 700; color: var(--accent); } .b-kurz ol { margin: 0; padding: 0; list-style: none; counter-reset: kurz; } .b-kurz li { counter-increment: kurz; position: relative; padding-left: 38px; font-size: 16.5px; line-height: 1.62; color: var(--ink-soft); } .b-kurz li + li { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); } .b-kurz li::before { content: counter(kurz); position: absolute; left: 0; top: .1em; width: 24px; text-align: right; font-size: 14px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; } .b-kurz li + li::before { top: calc(.1em + 16px); } /* ------------------------------------------------------ Inhaltsverzeichnis Als Liste im Textfluss und nicht in der Flanke: dieselbe Entscheidung wie beim Artikel, und derselbe Grund — EINE Breite für alles. Eine Flanke verlangt eine zweite Spalte, die auf dem Telefon ohnehin wieder wegfällt. */ .b-vz { margin: 0 0 var(--a-luft-gross); padding: 26px 30px 28px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); } .b-vz h2 { margin: 0 0 16px; padding: 0; max-width: none; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 650; color: var(--muted); } .b-vz ol { margin: 0; padding: 0; list-style: none; counter-reset: vz; display: grid; gap: 9px; } .b-vz li { counter-increment: vz; display: grid; grid-template-columns: 26px 1fr; } .b-vz li::before { content: counter(vz, decimal-leading-zero); font-size: 12px; font-weight: 650; color: var(--muted); font-variant-numeric: tabular-nums; padding-top: .18em; } .b-vz a { font-size: 15.5px; line-height: 1.45; color: var(--ink); text-decoration: none; letter-spacing: -.014em; font-weight: 550; } .b-vz a:hover { color: var(--accent); } /* ---------------------------------------------- Tabelle, ein Produkt je Zeile Die maschinenlesbare Fassung derselben Daten, die die Kategorieseite transponiert zeigt. Sichtbare Bildunterschrift ÜBER der Tabelle, nicht darunter: sie nennt Einheit, Bezug und Stand, und das sind Angaben, die man vor dem Lesen braucht und nicht danach. */ .b-figur { padding: 0; } .b-tab { border-collapse: collapse; width: 100%; min-width: 720px; } .b-tab caption { caption-side: top; text-align: left; padding: 22px 28px 18px; font-size: 13.5px; line-height: 1.55; color: var(--muted); border-bottom: 1px solid var(--line); } .b-tab thead th { padding: 14px 16px; text-align: left; vertical-align: bottom; background: var(--surface-2); border-bottom: 1px solid var(--line-hard); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; font-weight: 700; color: var(--muted); white-space: nowrap; } .b-tab thead th:first-child { padding-left: 28px; } .b-tab thead th:last-child { padding-right: 28px; } .b-tab tbody th, .b-tab tbody td { padding: 14px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); font-size: 14.5px; color: var(--ink-soft); } .b-tab tbody th { padding-left: 28px; font-weight: 650; color: var(--ink); font-size: 15.5px; letter-spacing: -.014em; white-space: nowrap; } .b-tab tbody th a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--line-hard); } .b-tab tbody th a:hover { color: var(--accent); border-bottom-color: var(--accent); } .b-tab tbody td:last-child { padding-right: 28px; } .b-tab tbody tr:nth-child(even) { background: var(--surface-2); } .b-tab tbody tr:last-child th, .b-tab tbody tr:last-child td { border-bottom: 0; } /* Der Preis mit Einheit in der Zelle. Ziffern in Tabellensatz, damit die Spalte auch untereinander lesbar bleibt. */ .b-tab .b-num { font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 550; white-space: nowrap; } .b-tab .b-ja { color: var(--accent); font-size: 18px; font-weight: 700; } .b-tab .b-leer { color: var(--muted); font-size: 13px; } /* --------------------------------------------------------- Frageabschnitt SICHTBAR und nicht als Aufklapper. Was erst beim Klick erscheint, sehen die Crawler der Antwortsysteme nicht — keiner von ihnen führt JavaScript aus. Und ohne Auszeichnung: FAQPage ist abgeschaltet und war in den Messungen der schwächste Auszeichnungstyp; der sichtbare Abschnitt wirkt, das Markup nicht. */ .b-fragen { margin: var(--a-luft) 0 0; padding: 8px 0 0; border-top: 1px solid var(--line); } .b-frage { padding: 26px 0; border-bottom: 1px solid var(--line); } .b-frage:last-child { border-bottom: 0; padding-bottom: 4px; } .b-frage h3 { margin: 0 0 10px; font-size: 17.5px; line-height: 1.3; font-weight: 660; color: var(--ink); letter-spacing: -.02em; max-width: 46ch; } .b-frage p { margin: 0; font-size: 16px; line-height: 1.68; color: var(--ink-soft); max-width: 68ch; } /* ------------------------------------------------------ Herkunft der Zahlen Die Quelle NEBEN dem Wert und nicht am Seitenende. Das ist der stärkste gemessene Eingriff für eine Seite, die nicht ohnehin vorne steht — und es ist der Teil, der diesen Beitrag von einer Meinung unterscheidet. */ .b-quellen { margin: var(--a-luft) 0 0; padding: 0; border-top: 1px solid var(--line); } .b-quellen > div { display: grid; grid-template-columns: 14rem 1fr; gap: 4px 28px; padding: 20px 0; border-bottom: 1px solid var(--line); } .b-quellen > div:last-child { border-bottom: 0; } .b-quellen dt { font-size: 12px; letter-spacing: .07em; text-transform: uppercase; font-weight: 700; color: var(--ink); padding-top: .2em; } .b-quellen dd { margin: 0; font-size: 15px; line-height: 1.65; color: var(--ink-soft); } /* ----------------------------------------------------------- Kernaussage Die Quelle unter dem Zitat. Auf dem dunklen Grund des Zitatblocks, also hell und klein — sie belegt den Satz und stiehlt ihm nicht die Aufmerksamkeit. */ .a-zitat cite { display: block; margin-top: 20px; font-style: normal; font-size: 12.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--bar-muted); font-weight: 600; } /* ------------------------------------------------------- Verfasserkasten */ .b-vita { margin: var(--a-luft-gross) 0 0; padding: 30px 34px 32px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); display: grid; grid-template-columns: auto 1fr; gap: 0 22px; align-items: start; } .b-vita .b-ini { grid-row: 1; width: 48px; height: 48px; font-size: 15px; } .b-vita h2 { margin: 0 0 10px; padding: 0; max-width: none; font-size: 16.5px; font-weight: 670; color: var(--ink); letter-spacing: -.02em; } .b-vita p { margin: 0; font-size: 15.5px; line-height: 1.68; color: var(--ink-soft); max-width: 70ch; } /* -------------------------------------------------------------- Übersicht Eine Liste und sonst nichts. Kein Vorschaubild: es gäbe nichts abzubilden, was der Titel nicht besser sagt, und ein Symbolbild je Beitrag wäre eine Datei, die mit dem Text veraltet. */ .b-liste { margin: 0; padding: 0; list-style: none; } /* position: relative ist keine Kosmetik — daran haengt der Verweis, der sich mit ::after ueber die ganze Karte spannt. */ .b-karte { position: relative; padding: 34px 0; border-bottom: 1px solid var(--line); } .b-karte:first-child { padding-top: 0; } .b-karte:last-child { border-bottom: 0; } .b-karte-kopf { margin: 0 0 12px; display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; font-size: 12px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); font-weight: 650; } .b-karte-kat { color: var(--accent); text-decoration: none; } .b-karte-kat:hover { color: var(--ink); } .b-karte h2 { margin: 0 0 12px; padding: 0; max-width: 34ch; font-size: clamp(21px, 2.1vw, 27px); line-height: 1.14; letter-spacing: -.03em; font-weight: 670; text-wrap: balance; } .b-karte h2 a { color: var(--ink); text-decoration: none; } .b-karte h2 a:hover { color: var(--accent); } .b-karte-lead { margin: 0; max-width: 66ch; font-size: 16.5px; line-height: 1.62; color: var(--ink-soft); } @media (max-width: 900px) { .b-byline { margin-top: 26px; padding-top: 20px; gap: 18px 28px; } .b-stand { gap: 14px 22px; } .b-kurz { padding: 26px 24px 28px; } .b-kurz li { font-size: 15.5px; padding-left: 32px; } .b-vz { padding: 22px 22px 24px; } .b-tab caption { padding: 18px 18px 16px; } .b-tab thead th, .b-tab tbody th, .b-tab tbody td { padding: 13px 13px; } .b-tab thead th:first-child, .b-tab tbody th { padding-left: 18px; } .b-frage h3 { font-size: 16.5px; } .b-frage p { font-size: 15.5px; } /* Zwei Spalten für vierzehn Zeichen Beschriftung gehen auf dem Telefon nicht auf — untereinander gestellt bleibt beides lesbar. */ .b-quellen > div { grid-template-columns: 1fr; gap: 6px; padding: 18px 0; } .b-vita { padding: 24px 22px 26px; grid-template-columns: 1fr; gap: 16px; } .b-vita .b-ini { grid-row: auto; } .b-karte { padding: 26px 0; } } /* -------------------------------------------------- Blogband auf der Startseite Drei Karten in derselben Rasterlogik wie die Kategoriekacheln, aber mit mehr Höhe: eine Kategoriekachel trägt zwei Zeilen, eine Beitragskarte trägt Datum, Überschrift und Vorspann. Sie sind darum breiter angesetzt (300px statt 224px) — bei 224px stand die Überschrift vierzeilig. KEIN BILD auf der Karte. Es gäbe nichts abzubilden, was die Überschrift nicht besser sagt, und ein Symbolbild je Beitrag wäre eine Datei, die mit dem Text veraltet. */ .blog-band { display: grid; gap: 8px; margin-top: 0; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); } .blog-karte { display: flex; flex-direction: column; gap: 7px; padding: 14px 16px 16px; text-decoration: none; color: inherit; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-s); box-shadow: var(--shadow); transition: border-color .14s ease, box-shadow .16s ease; } .blog-karte:hover { border-color: var(--accent); box-shadow: var(--shadow-lg); } .blog-karte-kopf { margin: 0; display: flex; flex-wrap: wrap; gap: 3px 10px; align-items: baseline; font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); font-weight: 650; } .blog-kat { color: var(--accent); } .blog-karte h3 { margin: 0; font-size: 16px; line-height: 1.24; font-weight: 660; letter-spacing: -.02em; color: var(--ink); text-wrap: balance; } /* Der Vorspann auf drei Zeilen begrenzt. Ohne Begrenzung bestimmte der längste Vorspann die Höhe aller drei Karten, und das Raster bekam eine Leerzeile, die niemand füllt. */ .blog-karte-lead { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .blog-mehr { margin: 12px 0 0; font-size: 13.5px; } /* IN DER AKZENTFARBE, im Unterschied zur Quellenzeile darueber: dieser Verweis fuehrt weg von der Seite, und genau das heisst Rot hier. */ .blog-mehr a { color: var(--accent); text-decoration: none; font-weight: 620; } .blog-mehr a:hover, .blog-mehr a:focus-visible { text-decoration: underline; } /* Die drei Punkte der Kopfleiste — «Vergleichen», «Marktdaten», «Blog» — werden oben bei .head-blog gesetzt und nicht hier: sonst verloere die Regel gegen .dd > summary. Die Begruendung steht im selben Block. */ /* ------------------------------------------------------- Entwurfskennzeichnung Zweimal dasselbe Wort in zwei Grössen: im Kopf des Beitrags gross genug, um vor dem Lesen aufzufallen, auf der Karte klein genug, um die Kopfzeile nicht zu sprengen. In der Warnfarbe und nicht in der Akzentfarbe — Rot heisst auf dieser Website «von Ihnen gewählt», und ein Entwurf ist nichts, was jemand gewählt hat. */ .b-entwurf { margin: 0; padding: 4px 11px; border-radius: 3px; align-self: center; background: color-mix(in srgb, var(--warn) 22%, transparent); border: 1px solid color-mix(in srgb, var(--warn) 55%, transparent); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: #f0d488; } .b-marke { padding: 1px 7px; border-radius: 3px; background: color-mix(in srgb, var(--warn) 16%, transparent); border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent); color: color-mix(in srgb, var(--warn) 78%, var(--ink)); letter-spacing: .09em; } /* ------------------------------------------------- Blogübersicht: Themen zuerst Die Abschnittsüberschriften der Übersicht stehen IN einem section.a-col und sind damit keine direkten Kinder von .a-body — die Regel .a-body > h2 mit ihrem roten Strich greift hier nicht. Das ist gewollt: auf der Übersicht gliedern zwei Überschriften eine Seite ohne Fliesstext, und der Strich ist ein Zeichen für den Anfang eines Gedankens. Hier fängt keiner an, hier wechselt die Sorte. */ .b-themen-block, .b-neu { display: block; } .b-themen-block > h2, .b-neu > h2 { margin: 0 0 18px; padding-bottom: 12px; border-bottom: 1px solid var(--line-hard); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--muted); } .b-neu { margin-top: var(--a-luft-gross); } /* GEMESSEN: 98 Pixel zwischen dem Vorspann des Kopfes und «Die juengsten Beitraege» — der grosse Abstand ist dafuer gemacht, dass der Abschnitt NACH etwas kommt. Seit die Themenkacheln weg sind, ist er das erste im Rumpf und trug den Abstand zusaetzlich zum Rand des Kopfes. Steht er vorn, gilt der Rand des Kopfes und sonst nichts. */ .a-body > .b-neu:first-child { margin-top: 0; } /* Die Themenkacheln. Dieselbe Rasterlogik wie die Kategoriekacheln der Startseite, aber höher: eine Kachel trägt Name, Unterzeile und Beitragszahl. Die Unterzeile ist die der KATEGORIE — eine eigene Beschreibung für den Blog wäre eine zweite Wahrheit über dasselbe Thema. */ .b-themen { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); } .b-thema { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 14px; text-decoration: none; color: inherit; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-s); box-shadow: var(--shadow); transition: border-color .14s ease, box-shadow .16s ease; } .b-thema:hover { border-color: var(--accent); box-shadow: var(--shadow-lg); } .b-thema h3 { margin: 0; font-size: 16.5px; font-weight: 660; letter-spacing: -.02em; color: var(--ink); } .b-thema > p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); } /* Die Zahl unten und abgesetzt: sie ist eine Auskunft über den Umfang und nicht Teil der Beschreibung. Mit auto oben klebt sie am Kachelboden, auch wenn die Unterzeilen verschieden lang sind — sonst stünde sie in jeder Kachel auf einer anderen Höhe. */ .b-thema-n { margin: auto 0 0; padding-top: 10px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 650; color: var(--accent); } @media (max-width: 900px) { .b-thema { padding: 14px 15px 12px; } .b-neu { margin-top: var(--a-luft); } } /* ------------------------------- Beitraege auf der Kategorieseite, unter der Tabelle Zwischen Tabelle und Kategorietext. Die Karten sind dieselben wie im Band der Startseite — ein Leser, der beide Seiten sieht, soll sie wiedererkennen. Neu ist nur die Ueberschrift darueber und der Abstand: hier endet die Tabelle, und der Block muss sich von ihr loesen, ohne einen eigenen Kasten zu bauen. */ .cat-blog { display: block; margin: 34px 0 0; } .cat-blog > h2 { margin: 0 0 12px; padding-bottom: 11px; border-bottom: 1px solid var(--line-hard); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--muted); } /* Auf der Kategorieseite steht die Kategorie schon im Titel — die Kachel braucht sie nicht noch einmal. Uebrig bleiben Datum, Lesezeit und, wo noetig, die Entwurfsmarke. */ .cat-blog .blog-karte h3 { font-size: 15.5px; } @media (max-width: 900px) { .cat-blog { margin-top: 26px; } } /* ------------------------------------------------------- Sorte des Beitrags «Gesamtvergleich», «Leitfaden». Neutraler Ton, weil das Etikett die Sorte nennt und nicht warnt: Rot ist auf dieser Website dreifach belegt und der Warnton mit «Entwurf». So koennen beide Etiketten auf derselben Karte stehen, ohne um den Rang zu streiten — das eine sagt, was der Beitrag ist, das andere, dass er noch nicht fertig ist. */ /* DIE SORTE STEHT UNTEN RECHTS (25.08.2026). Erst stand sie neben dem Thema, dann oben rechts, jetzt in der Standzeile — und dort gehoert sie hin: die Standzeile fuehrt, was den Eintrag EINORDNET (Datum, Lesezeit), die Kopfzeile, worum es GEHT. Eine Sorte ordnet ein. margin-left: auto nimmt den freien Platz der Flexzeile — ein fester Abstand wuerde bei langen Kategorienamen nicht mehr reichen. align-self ist noetig, weil die Standzeile an der Schriftlinie ausrichtet: eine Marke mit Rahmen und Polsterung haengt daran schief. */ .b-karte-fuss .b-marke-tag { margin-left: auto; align-self: center; } .b-marke-tag { background: color-mix(in srgb, var(--ink) 7%, transparent); border-color: color-mix(in srgb, var(--ink) 22%, transparent); color: var(--ink-soft); font-weight: 700; } /* Dieselbe Angabe in der Standzeile des Beitrags. Sie liegt im dunklen Kopfband, also eigene Werte — die Kartenfassung waere dort unsichtbar. */ .b-haupt { margin: 0; padding: 4px 11px; border-radius: 3px; align-self: center; background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .22); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: #dfe4ea; } /* --------------------------------------------- Namenslisten aus dem Bestand Der Baustein «namen»: dieselben Lösungen wie in der Tabelle, aber nach dem Merkmal gruppiert, das die Auswahl entscheidet. Eine Tabelle mit 28 Zeilen zeigt alle; sie sagt nicht, welche zusammengehören. Als weisse Fläche wie die übrigen Datenblöcke, aber in EINER Spalte und nicht im Raster: die Gruppen haben sehr verschiedene Längen — von zwei Namen bis zu zwanzig —, und in Spalten nebeneinander stünde neben der langen Gruppe eine halbe Seite Weiss. */ .b-namen { margin: var(--a-luft) 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; } .b-namen-g { padding: 22px 28px 24px; border-bottom: 1px solid var(--line); } .b-namen-g:last-child { border-bottom: 0; } .b-namen-g h3 { margin: 0 0 6px; font-size: 16.5px; font-weight: 660; letter-spacing: -.02em; color: var(--ink); } /* Die Zahl hinter der Überschrift: kleiner, in der Akzentfarbe, in Tabellensatz. Sie sagt, wie gross die Gruppe ist, bevor man die Namen zählt. */ .b-namen-g h3 span { margin-left: 8px; font-size: 12px; font-weight: 700; color: var(--accent); letter-spacing: .06em; font-variant-numeric: tabular-nums; } .b-namen-w { margin: 0 0 10px; font-size: 14.5px; line-height: 1.6; color: var(--muted); } /* Die Namen selbst: grösser als die Erklärung darüber, weil sie der Inhalt sind. Jeder Name führt auf seine Produktseite. */ .b-namen-l { margin: 0; font-size: 15.5px; line-height: 1.75; color: var(--ink-soft); } .b-namen-l a { color: var(--ink); text-decoration: none; font-weight: 550; border-bottom: 1px solid var(--line-hard); } .b-namen-l a:hover { color: var(--accent); border-bottom-color: var(--accent); } @media (max-width: 900px) { .b-namen-g { padding: 18px 20px 20px; } .b-namen-l { font-size: 15px; } } /* ========================================================================= BLOGBEITRAG — EIGENE OPTIK ------------------------------------------------------------------------- Alles hier ist auf .b-main eingeschränkt. Die Artikelseiten benutzen dieselben Bausteine und dasselbe Raster; sie sind Datenseiten mit Text und sollen so bleiben. Ein Blogbeitrag ist das Gegenteil: ein Text mit Daten. EINE BREITE FÜR ALLES. Hier stand kurzzeitig das Gegenteil: eine schmale Lesespalte von 700px für den Fliesstext, daneben 1100px für Tabellen und Kachelraster. Das ist die Aufteilung, die eine Zeitschrift benutzt, und für die Zeilenlänge war sie richtig — für diese Seite war sie falsch. Zwei Breiten heissen zwei linke Kanten, und die sieht man: der Text begann eingerückt, die Datenblöcke sprangen darunter nach links heraus. Auf einer Seite mit zweiundzwanzig Abschnitten, in denen Prosa und Daten dauernd abwechseln, springt das Auge damit bei jedem Wechsel. Text und Daten stehen jetzt wieder in derselben Spalte und auf derselben Kante. Der Preis ist die Zeilenlänge: bei 1100px und 19px sind es rund 95 Zeichen statt der 70, die zum Lesen am angenehmsten wären. Dagegen hilft, was hier bleibt — Serifen, mehr Durchschuss, mehr Abstand zwischen den Absätzen. Die Entscheidung ist bewusst und nicht übersehen. ========================================================================= */ .b-main { --a-luft: 34px; --a-luft-gross: 38px; } /* ------------------------------------------------------------- Schrift SERIFE FÜR DEN FLIESSTEXT, Sans für alles andere. Das ist die Aufteilung, die eine Zeitschrift benutzt: der Lesetext in einer Schrift, die für lange Strecken gebaut ist, das Mobiliar — Überschriften, Etiketten, Tabellen, Standzeile — in der Schrift der Marke. KEINE WEBSCHRIFT. Die ausgelieferte Seite hat null Abhängigkeiten, und eine nachgeladene Schriftdatei wäre die erste. Die Kette nimmt, was auf dem Gerät liegt: Cambria und Iowan Old Style sind auf Windows und macOS vorhanden und beide für Bildschirmlesen gezeichnet, Georgia als Rückfall. Serifen NUR für Prosa. Zahlen in Tabellen, Etiketten und Beschriftungen bleiben Sans — dort zählt Gleichmass, nicht Leserhythmus. */ .b-main { --serif: Cambria, "Iowan Old Style", Charter, Georgia, "Times New Roman", serif; } /* .b-main .a-lead ist hier HERAUSGENOMMEN: der Vorspann der Blog- Uebersichtsseite steht serifenlos wie die Vorspanne von Vergleichen und Marktdaten. Er stand in dieser Liste und gewann gegen die Regel weiter oben allein dadurch, dass er spaeter kommt — gleiche Spezifitaet. */ .b-main .a-body > p, .b-main .b-kurz li, .b-main .b-frage p, .b-main .b-quellen dd, .b-main .b-namen-l, .b-main .a-hinweis p, .b-main .a-punkte p, .b-main .b-karte-lead, .b-main .a-zitat p, .b-main .a-ende > p { /* HIER STAND font-family: var(--serif). Entfallen am 24.08.2026: die Website fuehrt EINE Schrift. Die Serifen-Leseschrift trennte Artikel und Blogbeitraege vom Rest, und beim Wechsel von einer Tabelle in einen Beitrag wechselte die Schrift mit. --serif steht noch als Marke da, wird aber nirgends mehr benutzt. */ } /* Serifen tragen bei gleicher Punktgrösse optisch kleiner und brauchen mehr Durchschuss. 19px auf 1.78 ist die Kombination, bei der eine 70-Zeichen- Zeile ohne Nachjustieren lesbar bleibt. */ .b-main .a-body > p { font-size: 19px; line-height: 1.7; margin-bottom: 21px; color: var(--ink-soft); letter-spacing: 0; } /* Der erste Absatz nach einer Abschnittsüberschrift trägt den Gedanken an — etwas grösser und in vollem Tintenton, ohne fett zu werden. */ .b-main .a-body > h2 + p { font-size: 20px; color: var(--ink); } .b-main .a-lead { font-size: 16px; line-height: 1.6; font-weight: 400; } /* --------------------------------------------------------- Überschriften Etwas Luft nach oben, damit ein Abschnitt sichtbar anfängt — aber ohne die 30 Bildpunkte Polsterung, die hier bis zum 23. August 2026 dem roten Strich Platz machten. Ohne ihn war sie ein Loch: 34 Abstand plus 30 Polsterung plus der Abstand des Blocks darüber standen zwischen zwei Gedanken. */ .b-main .a-body > h2 { margin-top: var(--a-luft-gross); font-size: clamp(23px, 2.2vw, 30px); line-height: 1.16; max-width: 30ch; } /* Die Ueberschrift fuellt die Lesespalte, statt sich in ihr noch einmal zu verengen: zwei Begrenzungen fuer dieselbe Zeile ergeben eine schmale Saeule in einer breiten Flaeche. 40px bringen den langen Titel auf zwei Zeilen. */ /* HIER STAND EINE ZWEITE GROESSE FUER DENSELBEN TITEL: clamp(29,3.2vw,40) bei -.03em. Sie kam SPAETER in der Datei als die Regel weiter oben und gewann darum — die Korrektur des Blogtitels lief zunaechst ins Leere. Der Blogkopf traegt jetzt --h1 wie jede andere Seite; hier bleibt nur, was ihn wirklich unterscheidet. */ .b-main .a-hero h1 { max-width: none; } /* ------------------------------------------------------- Antwort und Inhalt Beide waren weisse Kästen mit Rahmen und Schatten — die Sprache der Datenblöcke. Auf einem Lesetext liest sich das als Formular. Jetzt tragen sie nur noch, was sie unterscheiden muss: die Antwort eine Linie in der Akzentfarbe, das Verzeichnis einen ruhigen Grund. Keine Schatten. */ /* KEIN ROTER STRICH LINKS. Er stand hier und markierte den Antwortblock als einen der tragenden Bloecke — dieselbe Marke, die das Absprungband und fruehr der Kopf trugen. Zwei Gruende, warum er hier weg ist: er zog eine zweite linke Kante in eine Seite, die genau eine haben soll, und der Block braucht ihn nicht. Die rote Zeile «DAS WICHTIGSTE IN KUERZE» und die roten Ziffern kennzeichnen ihn deutlich genug. */ .b-main .b-kurz { padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; margin-bottom: var(--a-luft-gross); } .b-main .b-kurz li { font-size: 18.5px; line-height: 1.7; padding-left: 34px; } .b-main .b-kurz li + li { border-top: 0; margin-top: 20px; padding-top: 0; } .b-main .b-kurz li + li::before { top: .1em; } .b-main .b-vz { padding: 20px 24px 22px; background: none; border: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 0; padding-left: 0; padding-right: 0; } /* ----------------------------------------------------------- Frageabschnitt Die Frage als Frage, gross genug, um beim Überfliegen gefunden zu werden. Sie steht in der Sans — sie ist eine Überschrift, keine Prosa. */ .b-main .b-frage h3 { font-size: 19px; line-height: 1.3; } .b-main .b-frage p { font-size: 18px; line-height: 1.72; max-width: none; } /* ---------------------------------------------------------------- Kernaussage Ohne Kasten und ohne dunklen Grund: auf einer schmalen Lesespalte ist ein ganzflächiger Block eine Wand, nicht ein Halt. Ein grosser Satz in Serifen, von zwei Haarlinien gefasst, leistet dasselbe und bleibt Text. */ .b-main .a-zitat { background: none; border-radius: 0; padding: 36px 0; border-top: 1px solid var(--line-hard); border-bottom: 1px solid var(--line-hard); margin: var(--a-luft-gross) 0; } .b-main .a-zitat p { font-size: clamp(22px, 2.2vw, 27px); line-height: 1.38; font-weight: 400; color: var(--ink); letter-spacing: -.012em; max-width: none; } .b-main .a-zitat cite { color: var(--muted); margin-top: 16px; } /* -------------------------------------------------------------- Verfasser Der Kasten am Fuss wird zur Zeile mit Haarlinie: ein Absender braucht keinen Rahmen, und ein Rahmen macht aus dem Absender einen Kasten unter dem Text. */ .b-main .b-vita { background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 26px 0 0; } .b-main .b-vita p { font-size: 16.5px; } /* ------------------------------------------------------------------ Quellen */ .b-main .b-quellen dd { font-size: 17px; line-height: 1.7; } @media (max-width: 900px) { .b-main { --a-luft-gross: 30px; } .b-main .a-body > p { font-size: 17.5px; line-height: 1.66; margin-bottom: 18px; } .b-main .a-body > h2 + p { font-size: 18px; } .b-main .b-kurz li { font-size: 17px; padding-left: 30px; } .b-main .b-frage h3 { font-size: 17.5px; } .b-main .b-frage p { font-size: 16.5px; } .b-main .a-zitat { padding: 26px 0; } } /* ------------------------------------------- Eine Lösung je Abschnitt Der Baustein «programme». 28 Abschnitte hintereinander brauchen zwei Dinge: eine erkennbare Wiederholung, damit man sich beim Scrollen orientiert, und eine klare Trennung, damit sie nicht zu einer Wand verschmelzen. Trennung durch LINIEN und nicht durch 28 Kästen: eine Folge gerahmter Blöcke liest sich als Kachelraster, und ein Kachelraster liest niemand von oben nach unten. Die Linie sagt «weiter», der Rahmen sagt «Stück». */ .b-progs { margin: var(--a-luft) 0 0; } .b-prog { padding: 34px 0 36px; border-top: 1px solid var(--line); /* scroll-margin, weil jeder Abschnitt eine Kennung traegt und aus dem Inhaltsverzeichnis oder von aussen angesprungen werden kann. Ohne sie klebt die Ueberschrift unter der Kopfleiste. */ scroll-margin-top: calc(var(--head-h) + 16px); } .b-prog:first-child { border-top: 0; padding-top: 8px; } .b-prog h3 { margin: 0 0 4px; font-size: clamp(21px, 2vw, 26px); line-height: 1.15; letter-spacing: -.026em; font-weight: 670; color: var(--ink); } .b-prog h3 a { color: inherit; text-decoration: none; } .b-prog h3 a:hover { color: var(--accent); } /* Die Kurzkennzeichnung als Unterzeile der Überschrift, nicht als Absatz: sie gehört zum Namen und ist keine Aussage für sich. */ .b-prog-kurz { margin: 0 0 14px; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; font-weight: 650; color: var(--accent); } .b-prog-sum { margin: 0 0 18px; font-size: 18px; line-height: 1.65; color: var(--ink-soft); } /* Die Daten als zweispaltige Liste: Beschriftung links, Wert rechts. Sie stehen in der Sans und nicht in Serifen — hier zählt Gleichmass. */ .b-prog-daten { margin: 0 0 20px; display: grid; gap: 0; } .b-prog-daten > div { display: grid; grid-template-columns: 9.5rem 1fr; gap: 4px 20px; padding: 9px 0; border-bottom: 1px solid var(--line-soft, var(--line)); } .b-prog-daten > div:last-child { border-bottom: 0; } .b-prog-daten dt { font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; font-weight: 700; color: var(--muted); padding-top: .18em; } .b-prog-daten dd { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-soft); } /* Stärken und Grenzen nebeneinander, solange Platz ist. Sie gehören zusammengelesen: eine Stärkenliste allein ist die Form, in der ein Anbieter über sich schreibt. */ .b-prog-sl { display: grid; gap: 18px 28px; grid-template-columns: 1fr; } @media (min-width: 760px) { .b-prog-sl { grid-template-columns: 1fr 1fr; } } .b-prog-sl h4 { margin: 0 0 8px; font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase; font-weight: 700; } .b-prog-plus h4 { color: var(--good); } .b-prog-minus h4 { color: var(--accent); } .b-prog-sl ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; } .b-prog-sl li { position: relative; padding-left: 17px; font-size: 15px; line-height: 1.55; color: var(--ink-soft); } .b-prog-sl li::before { position: absolute; left: 0; top: -.05em; font-weight: 700; font-size: 14px; } .b-prog-plus li::before { content: "+"; color: var(--good); } .b-prog-minus li::before { content: "–"; color: var(--accent); } .b-prog-mehr { margin: 18px 0 0; font-size: 13.5px; } .b-prog-mehr a { color: var(--ink-soft); text-decoration: none; font-weight: 600; border-bottom: 1px solid var(--line-hard); } .b-prog-mehr a:hover { color: var(--accent); border-bottom-color: var(--accent); } /* ------------------------------------------------------------------ Glossar Begriff und Erklärung, zweispaltig wie die Quellenangaben — dieselbe Form für dieselbe Sorte Inhalt: ein Schlüsselwort und ein Satz dazu. */ .b-glossar { margin: var(--a-luft) 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; } .b-glossar > div { display: grid; grid-template-columns: 12rem 1fr; gap: 4px 28px; padding: 18px 28px; border-bottom: 1px solid var(--line); } .b-glossar > div:last-child { border-bottom: 0; } .b-glossar dt { font-size: 15.5px; font-weight: 670; color: var(--ink); letter-spacing: -.014em; } .b-glossar dd { margin: 0; font-size: 15.5px; line-height: 1.68; color: var(--ink-soft); } @media (max-width: 900px) { .b-prog { padding: 26px 0 28px; } .b-prog-daten > div { grid-template-columns: 1fr; gap: 3px; padding: 8px 0; } .b-glossar > div { grid-template-columns: 1fr; gap: 4px; padding: 16px 20px; } } /* ============================================ ABSPRUNG AUF DIE VERGLEICHSTABELLE Dunkles Band nach dem Antwortblock: Text links, Strichzeichnung rechts, roter Knopf. Aus elf gebauten Fassungen gewaehlt und an der echten Seite verglichen — die Begruendung steht bei zurTabelle() in build.js. Der dunkle Grund ist der der Kopfleiste und der Fusszeile. Damit faellt das Band auf, ohne eine neue Farbe einzufuehren, und liest sich als Teil der Website statt als Anzeige darin. Der rote Streifen links ist dieselbe Marke, die der Antwortblock darueber traegt: erst die Antwort, dann das Werkzeug. DER GANZE BLOCK IST DER VERWEIS und nicht nur der Knopf. Eine Trefferflaeche von einer Zeile Hoehe ist auf dem Telefon eine Zumutung, und was aussieht wie ein Angebot, muss sich dort anfassen lassen, wo es so aussieht. */ .b-sprung { display: grid; grid-template-columns: 1fr minmax(0, 300px); gap: 32px; align-items: center; text-decoration: none; margin: calc(var(--a-luft-gross) * -.35) 0 var(--a-luft-gross); padding: 32px 36px 34px; border-radius: var(--r); background: var(--bar-bg); box-shadow: inset 4px 0 0 var(--accent); transition: box-shadow .16s ease; } .b-sprung:hover { box-shadow: inset 8px 0 0 var(--accent); } .b-sprung-txt { display: block; } .b-sprung-k { display: block; margin-bottom: 10px; font-size: 11.5px; letter-spacing: .11em; text-transform: uppercase; font-weight: 700; color: var(--bar-accent); } /* Die tragende Zeile: gross, weiss, mit den gerechneten Zahlen. Sie ist der Grund, warum das Band nicht uebersehen wird. */ .b-sprung-h { display: block; font-size: clamp(20px, 2.2vw, 28px); line-height: 1.16; font-weight: 670; letter-spacing: -.028em; color: var(--bar-ink); max-width: 30ch; text-wrap: balance; } .b-sprung-p { display: block; margin-top: 11px; max-width: 62ch; font-size: 15.5px; line-height: 1.6; color: var(--bar-nav); } /* Der Knopf ist ein span und kein zweiter Verweis: der Block verlinkt schon, und zwei verschachtelte Verweise waeren ungueltiges HTML. */ .b-sprung-b { display: block; width: fit-content; margin-top: 20px; padding: 13px 24px; border-radius: var(--r-s); background: var(--accent); color: var(--accent-ink); font-size: 15.5px; font-weight: 650; letter-spacing: -.012em; transition: background-color .14s ease, color .14s ease; } .b-sprung:hover .b-sprung-b { background: #fff; color: var(--bar-bg); } /* Die Zeichnung. Flaechen und Striche brauchen verschiedene Deckung, darum eigene Klassen statt currentColor. */ .b-sprung-svg { display: block; width: 100%; height: auto; } .s-kopf { fill: rgba(255,255,255,.10); } .s-zebra { fill: rgba(255,255,255,.035); } .s-spalte { fill: color-mix(in srgb, var(--bar-accent) 14%, transparent); } .s-lab { fill: rgba(255,255,255,.42); } .s-lab.s-akzent { fill: var(--bar-accent); } .s-zkopf { fill: rgba(255,255,255,.30); } .s-zelle { fill: rgba(255,255,255,.22); } .s-haken { fill: none; stroke: rgba(255,255,255,.45); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .s-haken.s-akzent-strich { stroke: var(--bar-accent); } /* Derselbe Weg unter der Kompakttabelle, dort als einzige Angabe und in der Akzentfarbe: der Vorbehalt zur Preisspanne, der hier stand, hat einen eigenen Abschnitt und nahm dem Verweis das Gewicht. */ .b-figur figcaption a { color: var(--accent); text-decoration: none; font-weight: 650; font-size: 15.5px; letter-spacing: -.012em; border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); } .b-figur figcaption a:hover { border-bottom-color: var(--accent); } @media (max-width: 760px) { /* EINE SPALTE, UND DER TEXT ZUERST. Beim Bauen stand hier order: -1 an der Zeichnung, damit sie oben bleibt — ein Reflex und falsch: auf dem Telefon schob sie die Ueberschrift unter die erste Bildschirmhoehe. Wer das Band sieht, soll zuerst lesen, worum es geht. */ .b-sprung { grid-template-columns: 1fr; gap: 22px; padding: 24px 22px 26px; } .b-sprung-b { padding: 13px 22px; font-size: 15px; } .b-sprung-p { font-size: 15px; } } /* ------------------------------------------- Portraet in den Blogbeitraegen Das Bild ersetzt die Initialen, wo der Verfasser eine eigene Seite hat. Quadratisch ausgeliefert und hier rund beschnitten: object-fit deckt den Rahmen, ohne das Bild zu verzerren, falls es einmal nicht quadratisch ist. Kein Rahmen und kein Schatten. Ein Portraet ist kein Datenblock, und ein Ring darum machte aus dem Menschen eine Kachel. */ .b-foto, .b-vita-foto { display: block; border-radius: 50%; object-fit: cover; background: color-mix(in srgb, var(--ink) 8%, transparent); } .b-foto { grid-row: 1 / 3; grid-column: 1; width: 40px; height: 40px; } .b-vita-foto { width: 56px; height: 56px; } /* Der Name in der Standzeile fuehrt auf die Autorenseite. Als Verweis erkennbar, aber leise: er steht neben Datum und Lesezeit und soll die Ueberschrift darueber nicht ueberstimmen. */ .b-autor b a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .28); } .b-autor b a:hover { border-bottom-color: var(--bar-accent); } /* Der Weg von der Kurzvita am Beitragsfuss auf die Autorenseite. */ .b-vita-mehr { margin: 12px 0 0; font-size: 14.5px; } .b-vita-mehr a { color: var(--ink-soft); text-decoration: none; font-weight: 600; border-bottom: 1px solid var(--line-hard); } .b-vita-mehr a:hover { color: var(--accent); border-bottom-color: var(--accent); } @media (max-width: 900px) { .b-vita-foto { width: 48px; height: 48px; } } /* Der Verfasser steht jetzt als erste Angabe in der Standzeile, in derselben Form wie Datum und Lesezeit. Sein Name ist der einzige Wert darin, der ein Verweis ist — darum als Verweis erkennbar, aber leise: eine Linie in der Tonlage der uebrigen Werte, kein Rot. */ .b-stand dd a { color: inherit; text-decoration: none; /* GEPUNKTET UND NICHT DURCHGEZOGEN. Eine durchgezogene Linie hat dasselbe Gewicht wie die Verweise im Fliesstext und zog den Blick auf den einen Wert, der in dieser Zeile ein Verweis ist. Gepunktet liest sich als «hier steckt mehr dahinter», ohne den Rang der Nachbarangaben zu verschieben. Etwas mehr Deckung als bei der durchgezogenen Fassung (.42 statt .30): eine gepunktete Linie ist zur Haelfte Luecke und traegt bei gleicher Deckung optisch weniger. */ border-bottom: 1px dotted rgba(255, 255, 255, .42); } .b-stand dd a:hover { color: var(--bar-ink); border-bottom-color: var(--bar-nav); } /* ==================================================================== GABEL Vier Einstiege nach dem Antwortblock, jeder mit Sprungmarke — siehe konzept-blog-buchhaltung.md, Abschnitt 5. Sie bedient vier Ankunftsarten, statt einen Durchschnittsleser zu bedienen. ALS RASTER UND NICHT ALS LISTE: vier Zeilen untereinander liest man von oben nach unten und nimmt die erste; vier Felder nebeneinander vergleicht man und nimmt die passende. Genau das ist hier die Aufgabe. Keine Flaechen, nur Linien. Der Antwortblock darueber und das Absprungband darunter tragen schon Gewicht; ein drittes gefuelltes Feld dazwischen machte aus dem Seitenanfang eine Kachelwand. */ .b-gabel { margin: 0 0 var(--a-luft-gross); } .b-gabel > h2 { margin: 0 0 14px; padding: 0; max-width: none; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--muted); } .b-gabel ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-s); overflow: hidden; } @media (min-width: 700px) { .b-gabel ul { grid-template-columns: 1fr 1fr; } } @media (min-width: 1040px) { .b-gabel ul { grid-template-columns: repeat(4, 1fr); } } .b-gabel li { background: var(--surface); } .b-gabel a { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 16px 18px 18px; text-decoration: none; transition: background-color .14s ease; } .b-gabel a:hover { background: color-mix(in srgb, var(--accent) 6%, var(--surface)); } /* Die Lage in der ersten Person, damit sie sich wiedererkennen laesst. Rot, weil sie die Wahl ist — dieselbe Bedeutung, die Rot in der Tabelle hat. */ .b-gabel b { font-size: 15px; font-weight: 660; line-height: 1.3; letter-spacing: -.014em; color: var(--accent); } .b-gabel span { font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); } @media (max-width: 700px) { .b-gabel a { padding: 14px 16px 16px; } } /* ================================================== GERECHNETE VERTEILUNG Der Baustein «diagramm»: Beschriftung, Zahl, Balken. Kein Bild und kein zweites Zeichenverfahren — der Preisauszug der Artikelseiten baut seine Balken schon so, und das ist hier dieselbe Aufgabe. Die ZAHL traegt die Aussage, der Balken ist die Zugabe. Darum steht die Zahl vor dem Balken und nicht darin: wer nur die Zahlen liest, verliert nichts. */ .b-vert { padding: 26px 30px 22px; } .b-vert dl { margin: 0; display: grid; gap: 14px; } .b-vert > dl > div { display: grid; grid-template-columns: minmax(0, 14rem) 1fr; gap: 6px 22px; align-items: baseline; } .b-vert dt { font-size: 13px; letter-spacing: .04em; text-transform: uppercase; font-weight: 650; color: var(--muted); } .b-vert dd { margin: 0; display: grid; grid-template-columns: 3.2rem 1fr; gap: 14px; align-items: center; } .b-vert dd b { font-size: 21px; font-weight: 700; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; } /* Der Balken: eine Spur in der Flaechenfarbe, darin die Fuellung in der Akzentfarbe. Bemessen am groessten Wert der Reihe und nicht an der Summe — bei der Betriebsart uebersteigt die Summe die Zahl der Loesungen, weil viele mehrere Wege anbieten, und Anteile daraus waeren erfunden. */ .b-vert-b { display: block; height: 10px; border-radius: 5px; background: color-mix(in srgb, var(--ink) 8%, transparent); overflow: hidden; } .b-vert-b i { display: block; height: 100%; border-radius: 5px; background: var(--accent); } .b-vert figcaption { padding-top: 20px; } @media (max-width: 700px) { .b-vert { padding: 20px 20px 18px; } .b-vert > dl > div { grid-template-columns: 1fr; gap: 4px; } .b-vert dd { grid-template-columns: 2.8rem 1fr; } } /* ================================================================== LEXIKON ÜBERSICHT MIT KACHELN, DAZU EINE SEITE JE BEGRIFF. Die erste Fassung war eine einzige alphabetische Seite mit allen Erklärungen im Fliesstext — auf dem Telefon 16 000 Bildpunkte hoch, mit einer klebenden Buchstabenleiste, die dauerhaft ein Siebtel des Bildes verbrauchte. Sie war zum Lesen gebaut, und ein Lexikon wird nachgeschlagen. Jetzt: zehn Themenkacheln mit Anzahl, darunter je Gruppe eine Liste, und je Begriff eine eigene Seite. Die Kacheln übernehmen die Rasterlogik der Themenkacheln des Blogs (.b-thema) — dieselbe Aufgabe, dieselbe Form, und kein zweites Kachelbild im Projekt. Die Buchstabenleiste ist damit weg und mit ihr ihr ganzer Ärger. */ .lx-main { padding-bottom: 40px; } /* EIN SCHMALES BAND STATT EINES KOPFES. Das Lexikon ist ein Verzeichnis und kein Artikel: der Vorspann ist entfallen, die Ueberschrift ist kurz, und 68 Bildpunkte Polsterung ueber einer 46px-Zeile schoben das Verzeichnis unter die erste Bildschirmhoehe. Das Band setzt jetzt direkt unter der Kopfleiste an und ist nur so hoch wie seine zwei Zeilen. */ .lx-hero { padding: 20px 0 22px; margin-bottom: 26px; } /* Der kurze Satz unter dem Titel. Im Band ist er eine Zeile und keine Einleitung: .a-lead traegt auf Artikelseiten 19px und 30px Abstand, das waere hier ein Vorspann und machte das Band wieder hoch. */ .lx-hero .a-lead { margin: 7px 0 0; max-width: 72ch; } /* Das Werk ueber dem Titel in der Akzentfarbe. Es stand vorher als Verweis auf die Startseite da und war rot, weil .a-kicker a rot ist — als reiner Text erbte es die dunkle Schriftfarbe und war auf dem dunklen Band fast weg. */ .lx-hero .a-kicker { color: var(--accent); } .lx-hero .a-kicker { margin-bottom: 9px; font-size: 11.5px; } /* Das Lexikon trug als einzige Seite noch eine eigene, deutlich kleinere Groesse (bis 27px gegen 38px ueberall sonst). Die Marken --h1, --h1-lauf und --h1-fett gelten seither ueberall; feste Werte an dieser Stelle waeren ein zweiter Ort fuer dieselbe Entscheidung. */ .lx-hero h1 { font-size: var(--h1); letter-spacing: var(--h1-lauf); font-weight: var(--h1-fett); line-height: 1.1; max-width: none; } @media (max-width: 620px) { .lx-hero { padding: 15px 0 17px; margin-bottom: 20px; } .lx-hero .a-lead { } } /* Die Regel .lx-zahl ist mit der Kopfzahl entfallen (23. August 2026). */ /* ---------------------------------------------------------------- Kacheln */ /* DREI JE REIHE, fest gesetzt und nicht gerechnet. Vorher fuellte auto-fill so viele 250px-Spalten in die Breite, wie hineinpassten — das ergab je nach Fenster vier oder fuenf schmale Kacheln und in der letzten Reihe eine einzelne. Drei Spalten tragen die laengste Zeile in drei Zeilen Text und ergeben bei zehn Gruppen ein ruhiges Gitter. */ .lx-kacheln { display: grid; gap: 10px; margin: 0 0 var(--a-luft-gross); grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 900px) { .lx-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 620px) { .lx-kacheln { grid-template-columns: 1fr; } } /* FLACH UND OHNE SCHATTEN: die Kachel ist seit dem 23. August 2026 kein Verweis mehr (siehe lexikonPage), und was nicht anklickbar ist, darf nicht wie ein Knopf aussehen. Sie sagt, was das Lexikon abdeckt und wie tief. */ .lx-kachel { display: flex; flex-direction: column; gap: 7px; padding: 15px 17px; color: inherit; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-s); } /* Kopfzeile: Name links, Zahl rechts aussen. baseline und nicht center, damit die Zahl auf der Schriftlinie des Namens sitzt und nicht in der Mitte eines zweizeiligen Namens schwebt. */ .lx-k-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .lx-k-n { font-size: 16px; font-weight: 660; letter-spacing: -.02em; color: var(--ink); } .lx-k-z { flex: none; font-size: 15px; font-weight: 660; color: var(--accent); font-variant-numeric: tabular-nums; } /* IMMER DREI ZEILEN TEXT, auch wenn der Satz nur zwei fuellt: min-height haelt die Kachel auf Hoehe, line-clamp haelt sie darunter. Ohne beides waren die Kacheln einer Reihe zwar gleich hoch (das Raster streckt sie), aber der Text endete auf drei verschiedenen Hoehen und die Reihen waren untereinander ungleich. 1.5 ist die Zeilenhoehe unten, 3 Zeilen sind 4.5em. */ .lx-k-s { font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); min-height: 4.5em; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* ------------------------------------------------------- Gruppenabschnitte */ .lx-gruppe { display: block; margin: 0 0 var(--a-luft-gross); } .lx-gruppe > h2 { margin: 0 0 4px; padding-bottom: 10px; border-bottom: 2px solid var(--ink); font-size: 20px; font-weight: 700; letter-spacing: -.022em; color: var(--ink); scroll-margin-top: 20px; } /* Die Anzahl im Zwischentitel, gedämpft: sie ist eine Auskunft über den Umfang und kein Teil des Namens. */ .lx-g-z { font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; font-weight: 650; color: var(--muted); vertical-align: 2px; margin-left: 4px; } .lx-g-s { margin: 0 0 14px; font-size: 14px; line-height: 1.55; color: var(--muted); } /* ------------------------------------------------- Namensfeld je Themengruppe Nur die Namen, fliessend gesetzt statt untereinander. Bis zum 23. August 2026 stand hier eine Liste mit Anriss je Begriff — dieselben Anrisse, die jetzt im Verzeichnis von A bis Z stehen. Als Namensfeld beantwortet der Abschnitt seine eigentliche Frage schneller: welche Begriffe gehoeren zu diesem Thema? */ .lx-feld { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 7px 8px; } .lx-feld > li { display: flex; align-items: center; } .lx-feld a { display: inline-block; padding: 5px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: 13.5px; font-weight: 560; color: var(--ink); text-decoration: none; transition: border-color .14s, color .14s; } .lx-feld a:hover, .lx-feld a:focus-visible { border-color: var(--accent); color: var(--accent); } /* IM NAMENSFELD STEHT KEINE MARKE. Ein Versuch setzte «zwingend» dort als kleinen Punkt an den Namen — er sass am Rand der Pille und sah aus wie ein Fehler im Satz, nicht wie eine Angabe. Ausgeschrieben steht die Marke im Verzeichnis darunter, wo je Zeile nur eine steht und daneben Platz ist. */ .lx-feld .lx-hart { display: none; } /* ------------------------------------------- Verzeichnis von A bis Z Die zweite Ordnung derselben Begriffe: nach Buchstabe statt nach Thema. */ /* KEINE EIGENE UEBERSCHRIFT MEHR: «Alle Begriffe von A bis Z» ist seit dem 23. August 2026 die h1 der Seite. Ein zweites Mal ueber dem Verzeichnis war derselbe Satz zweimal auf einer Bildschirmhoehe. */ /* Die Buchstabenleiste. Sie klebt nicht: eine klebende Leiste nimmt auf dem Telefon eine Zeile Hoehe fuer eine Bewegung, die man einmal macht. */ /* ---------------------------------------------------------- Kruemelpfad Bisher stand ueber jeder Begriffsseite ein einzelner Verweis «Lexikon». Der ganze Pfad steht seit dem 23. August 2026 da — siehe lexTermPage. Das Trennzeichen kommt aus CSS und nicht aus dem Quelltext: es ist Zierde und gehoert nicht in den vorgelesenen Text. */ .a-krumen { margin: 0 0 12px; } .a-krumen ol { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0; margin: 0; padding: 0; list-style: none; font-size: 11.5px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; } .a-krumen li + li::before { content: "›"; margin: 0 8px; color: var(--muted); font-weight: 500; letter-spacing: 0; } .a-krumen a { color: var(--accent); text-decoration: none; } .a-krumen a:hover, .a-krumen a:focus-visible { text-decoration: underline; } /* Die letzte Stufe ist die Seite selbst: gedaempft, damit der Pfad nicht wie drei Verweise aussieht. */ .a-krumen [aria-current] { color: var(--muted); } /* Auf dem Telefon bleibt die Schiene senkrecht — ein Sprungziel, das der Daumen trifft, ist dort mehr wert als anderswo —, aber sie wird schmaler und ruecht enger an die Karten: 62 Bildpunkte von 362 waeren ein Sechstel der Breite fuer einen Buchstaben. */ /* DIE WERTE STEHEN IM NACHRANG am Dateiende. Hier taten sie nichts: die Grundregeln von .lx-az-raster, .lx-abc a und .lx-abc-leer stehen sieben bis fuenfzig Zeilen SPAETER und gewinnen bei gleicher Spezifitaet. Die Schiene war auf dem Telefon darum 40 statt 30 Pixel breit, mit 22 statt 10 Pixeln Abstand — im Bild nachgemessen: 40 Pixel. */ /* LINKS EINE SCHIENE, RECHTS DIE KARTEN. 40px tragen zwei Ziffern oder einen Buchstaben; mehr braucht die Schiene nicht, und was sie nicht braucht, fehlt den Karten. */ .lx-az-raster { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 22px; align-items: start; margin-top: 18px; } /* SIE STEHT FEST UND REICHT VON OBEN BIS UNTEN. Zuerst klebte sie in ihrer natuerlichen Hoehe unter der Kopfleiste — sichtbar, aber als kurzer Block irgendwo oben im Fenster. Jetzt nimmt sie die ganze Fensterhoehe und verteilt die Buchstaben darauf: das Ziel liegt damit immer an derselben Stelle des Bildschirms, und der Weg zu «S» ist eine Bewegung nach unten, nicht erst eine Suche nach der Leiste. position: sticky und nicht fixed: fixed rechnet gegen das Fenster und muesste den linken Rand der Spalte kennen — die haengt an .wrap und aendert sich mit jeder Breite. Sticky bleibt in seiner Rasterspalte und tut sonst dasselbe. Ihr Bezug ist der Abschnitt: solange das Verzeichnis im Bild ist, steht sie. Da die Seite fast nur noch aus dem Verzeichnis besteht, ist das immer. overflow-y als Netz: wird das Fenster flacher als die Buchstaben hoch sind (bei 26 Zeilen unter etwa 700px), rollt die Schiene in sich statt hinaus. */ .lx-abc { display: flex; flex-direction: column; justify-content: space-between; gap: 2px; margin: 0; position: sticky; top: var(--head-h); height: calc(100vh - var(--head-h)); padding: 10px 0; overflow-y: auto; scrollbar-width: none; } .lx-abc::-webkit-scrollbar { display: none; } .lx-abc a { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 28px; padding: 0; border: 1px solid var(--line); border-radius: var(--r-s); font-size: 13px; font-weight: 650; color: var(--ink); text-decoration: none; font-variant-numeric: tabular-nums; transition: border-color .14s, color .14s, background-color .14s; } .lx-abc a:hover, .lx-abc a:focus-visible { border-color: var(--accent); color: var(--accent); } /* DER BUCHSTABE, BEI DEM MAN STEHT, ist rot hinterlegt. Gesetzt wird die Marke beim Rollen (siehe lexSchiene in app.js) und nicht ueber :target: :target haelt, was zuletzt geklickt wurde, und wer weiterrollt, sieht dann den falschen Buchstaben hervorgehoben. */ .lx-abc a.on { background: var(--accent); border-color: var(--accent); color: #fff; } /* Buchstaben ohne Eintrag: dieselbe Stufe, damit die Schiene gleichmaessig bleibt, aber ohne Rahmen und gedaempft — nichts daran sieht anklickbar aus. */ .lx-abc-leer { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 28px; border: 1px solid transparent; border-radius: var(--r-s); font-size: 13px; font-weight: 650; color: var(--muted); opacity: .42; font-variant-numeric: tabular-nums; user-select: none; } /* Der Buchstabe als Zwischentitel. scroll-margin, damit der Sprung nicht unter der klebenden Kopfleiste landet. */ .lx-abschnitt { scroll-margin-top: calc(var(--head-h) + 16px); } .lx-az-inhalt > .lx-abschnitt:first-child > h3 { margin-top: 0; } .lx-abschnitt > h3 { margin: 26px 0 0; padding-bottom: 6px; border-bottom: 1px solid var(--line-hard); font-size: 15px; font-weight: 700; letter-spacing: .06em; color: var(--accent); } /* KARTEN STATT ZEILEN MIT TRENNLINIE, wie beim Vorbild: bei 59 Eintraegen untereinander ergaben Linien ein Gitter, in dem kein Eintrag mehr auffiel. Getrennt wird jetzt durch Flaeche und Abstand. */ /* KOMPAKT GESETZT, wie beim Vorbild. Die Karten waren zuerst so gross wie die Zeilen einer Trefferliste — bei 59 Eintraegen untereinander wurde die Seite damit sechseinhalbtausend Bildpunkte hoch, und ein Verzeichnis, durch das man scrollen muss, ist kein Verzeichnis mehr. Jetzt tragen sie knappe Polsterung und eine Stufe kleinere Schrift; der Begriff bleibt die groesste Angabe der Karte. */ /* DREI KARTEN NEBEN EINANDER. Eine Spalte ueber die ganze Spaltenbreite gab jedem Begriff eine Zeile von 1038 Bildpunkten fuer ein Wort und zwei Zeilen Anriss — die Karte war dreimal so breit wie ihr Inhalt, und das Verzeichnis wurde dadurch dreimal so hoch wie noetig. Bei 1100px Spalte tragen drei Karten je 336 Bildpunkte; darunter zwei, auf dem Telefon eine. */ .lx-az-liste { margin: 13px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } @media (max-width: 980px) { .lx-az-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 620px) { .lx-az-liste { grid-template-columns: minmax(0, 1fr); gap: 8px; } } .lx-az-e { position: relative; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-s); } .lx-az-n { font-size: 14.5px; font-weight: 650; letter-spacing: -.015em; color: var(--ink); text-decoration: none; } /* DIE GANZE KARTE IST DER VERWEIS, wie die Kacheln der Startseite. Vorher trug nur das Wort den Verweis: der Zeiger stand auf der Karte, die Karte sah anklickbar aus, und der Klick daneben tat nichts. Gemacht wie bei .cat-lnk — eine Flaeche aus ::after ueber der ganzen Karte, statt den Anriss in den Verweis zu ziehen: so bleibt im Vorgelesenen der Begriff der Verweistext und nicht Begriff samt Anriss. */ .lx-az-n::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-s); z-index: 1; } .lx-az-n:focus-visible::after { outline: 2px solid var(--accent); outline-offset: 2px; } /* Rot umrandet, sobald der Zeiger irgendwo auf der Karte steht — dieselbe Antwort wie bei .fork-card. */ .lx-az-e:hover { border-color: var(--accent); box-shadow: var(--shadow-lg); } /* Das Themenwort hinter dem Begriff, gedaempft und klein: es ordnet ein, es ist nicht die Aussage. */ .lx-az-g { margin-left: 8px; font-size: 10.5px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); vertical-align: 1px; } .lx-az-s { display: block; margin-top: 2px; font-size: 13px; line-height: 1.5; color: var(--ink-soft); } /* «zwingend» als Marke am Begriff. In --warn und nicht in --accent: rot ist auf dieser Website der Absprung, und ein Kriterium ist kein Absprung. */ .lx-hart { display: inline-block; margin-left: 7px; vertical-align: 2px; padding: 1px 6px; border-radius: 3px; background: var(--warn); color: var(--warn-ink); font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; cursor: help; } .lx-fuss { margin: 30px 0 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13.5px; line-height: 1.66; color: var(--muted); } .lx-fuss a { color: var(--accent); text-decoration: none; font-weight: 620; } .lx-fuss a:hover, .lx-fuss a:focus-visible { text-decoration: underline; } /* ==================================================== SEITE JE BEGRIFF */ /* ------------------------------------------------- Der Ausbau je Begriff Ueberschriften und Absaetze brauchen keine eigenen Regeln: als direkte Kinder von .a-body tragen sie die Artikeltypografie samt rotem Strich. Eigene Regeln brauchen nur die drei Formen, die keine Prosa sind. */ /* DER WORTLAUT. Kein Anfuehrungszeichen aus CSS: der Text ist als Zitat ausgewiesen (blockquote mit cite), und ein gesetztes Zeichen davor wuerde im Vorgelesenen als Wort erscheinen. Der rote Balken links tut dieselbe Arbeit fuer das Auge. */ .lx-zitat { margin: 0 0 var(--a-luft); padding: 2px 0 2px 22px; border-left: 3px solid var(--accent); } .lx-zitat blockquote { margin: 0; font-size: clamp(17px, 1.7vw, 19.5px); line-height: 1.6; color: var(--ink); letter-spacing: -.008em; } .lx-zitat figcaption { margin-top: 11px; font-size: 13.5px; color: var(--muted); } .lx-zitat figcaption a { color: var(--accent); text-decoration: none; font-weight: 620; } .lx-zitat figcaption a:hover, .lx-zitat figcaption a:focus-visible { text-decoration: underline; } /* DIE ZAHLEN. Wert links, was er bedeutet rechts, die Stelle dahinter. Ein Raster und keine Tabelle: es sind Paare und kein Datensatz mit Kopfzeile. */ .lx-zahlen { margin: 0 0 var(--a-luft); } .lx-zahlen > div { display: grid; grid-template-columns: minmax(0, 15ch) minmax(0, 1fr); gap: 4px 22px; align-items: baseline; padding: 13px 0; border-top: 1px solid var(--line); } .lx-zahlen > div:last-child { border-bottom: 1px solid var(--line); } .lx-zahlen dt { font-size: 17px; font-weight: 700; color: var(--ink); letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .lx-zahlen dd { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--ink-soft); } /* Die Stelle, an der die Zahl steht. Gedaempft und klein, aber da: eine Frist ohne Artikel ist eine Behauptung. */ .lx-q { display: block; margin-top: 3px; font-size: 13px; color: var(--muted); } @media (max-width: 620px) { .lx-zahlen > div { grid-template-columns: minmax(0, 1fr); gap: 2px; } } /* ZUM NACHLESEN. Nur Adressen, ohne Anriss: wer hier klickt, will die Quelle und nicht ihre Zusammenfassung. */ .lx-quellen { margin: 0 0 var(--a-luft); padding: 0; list-style: none; } .lx-quellen li { padding: 9px 0; border-top: 1px solid var(--line); font-size: 15.5px; } .lx-quellen li:last-child { border-bottom: 1px solid var(--line); } .lx-quellen a { color: var(--accent); text-decoration: none; font-weight: 620; } .lx-quellen a:hover, .lx-quellen a:focus-visible { text-decoration: underline; } /* DIE PRUEFPUNKTE. Kein Punkt als Aufzaehlungszeichen, sondern ein kurzer Strich in der Akzentfarbe: die Zeilen sind Anforderungen und keine Spiegelstriche einer Praesentation. Jede Zeile traegt zuerst die Anforderung, danach nach einem Gedankenstrich, warum sie zaehlt — die Reihenfolge ist wichtig, weil beim Ueberfliegen nur der Anfang gelesen wird. */ .lx-pruefen { margin: 0 0 var(--a-luft); padding: 0; list-style: none; display: grid; gap: 11px; } .lx-pruefen li { position: relative; padding-left: 26px; font-size: 16.5px; line-height: 1.6; color: var(--ink-soft); } .lx-pruefen li::before { content: ""; position: absolute; left: 0; top: .62em; width: 13px; height: 2px; background: var(--accent); } @media (max-width: 620px) { .lx-pruefen li { padding-left: 20px; font-size: 15.5px; } .lx-pruefen li::before { width: 10px; } } /* WANN GEPRUEFT. Steht am Ende und nicht im Kopf: es ist eine Angabe ueber die Seite und nicht ueber den Begriff. */ .lx-stand { margin: 0 0 var(--a-luft); font-size: 13.5px; color: var(--muted); font-variant-numeric: tabular-nums; } /* Die Zeile unter der Einleitung sagt, ob das Kriterium hart ist. Sie steht im dunklen Kopfbereich und braucht darum eine helle Schrift — dort gilt nicht --ink-soft, sondern die Kopffarbe. */ .lx-term .lx-t-marke { margin: 16px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--bar-muted); } /* Die Kategorientabelle. Ein echtes table mit Zeilenkopf je Kategorie — die maschinenlesbare Form, aus demselben Grund wie die Kompakttabelle der Beiträge: vertauschte Achsen und fehlende Zeilenköpfe verschlechtern das Tabellenverständnis messbar. */ .lx-tab { margin: var(--a-luft) 0 0; } .lx-tab table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; } .lx-tab caption { caption-side: top; text-align: left; padding: 0 0 10px; font-size: 13px; line-height: 1.55; color: var(--muted); } .lx-tab th, .lx-tab td { padding: 8px 16px; border-bottom: 1px solid var(--line); text-align: left; font-size: 15px; } .lx-tab thead th { background: var(--surface-2); font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; font-weight: 650; color: var(--muted); } .lx-tab tbody tr:last-child th, .lx-tab tbody tr:last-child td { border-bottom: 0; } .lx-tab tbody th { font-weight: 620; } .lx-tab tbody th a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line-hard); } .lx-tab tbody th a:hover, .lx-tab tbody th a:focus-visible { color: var(--accent); border-bottom-color: var(--accent); } .lx-tab td { color: var(--ink-soft); font-variant-numeric: tabular-nums; } .lx-tab figcaption { margin-top: 9px; font-size: 12.5px; line-height: 1.55; color: var(--muted); } /* Der Absprung in die Vergleichstabelle. Dieselbe Form wie das Absprungband der Beiträge, nur schmaler: dunkler Grund, roter Streifen links, roter Knopf. Der Grund für die Wiederholung ist der Wiedererkennungswert — auf dieser Website sieht «hier geht es zur Tabelle» überall gleich aus. */ .lx-sprung { margin: var(--a-luft) 0 0; padding: 20px 24px; background: var(--bar-bg); border-left: 4px solid var(--accent); border-radius: var(--r-s); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; } .lx-s-f { flex: none; margin: 0; width: 100%; font-size: 12px; letter-spacing: .09em; text-transform: uppercase; font-weight: 700; color: var(--accent); } .lx-s-t { flex: 1 1 260px; margin: 0; font-size: 15.5px; line-height: 1.58; color: var(--bar-ink); } .lx-s-k { flex: none; padding: 10px 20px; border-radius: var(--r-s); background: var(--accent); color: var(--accent-ink); font-size: 14.5px; font-weight: 660; text-decoration: none; white-space: nowrap; } .lx-s-k:hover, .lx-s-k:focus-visible { filter: brightness(1.1); } .lx-nachbarn { display: block; margin: var(--a-luft-gross) 0 0; } .lx-nachbarn > h2 { margin: 0 0 8px; padding-bottom: 10px; border-bottom: 2px solid var(--ink); font-size: 20px; font-weight: 700; letter-spacing: -.022em; color: var(--ink); } .lx-nachbarn > p { margin: 0 0 12px; font-size: 15px; line-height: 1.66; color: var(--ink-soft); } .lx-mehr { margin: 22px 0 0; padding: 14px 18px; background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: var(--r-s); font-size: 15px; line-height: 1.6; } .lx-mehr > span { color: var(--ink-soft); } .lx-mehr a { color: var(--accent); font-weight: 650; text-decoration: none; } .lx-mehr a:hover, .lx-mehr a:focus-visible { text-decoration: underline; } @media (max-width: 760px) { .lx-kachel { padding: 13px 14px 11px; } .lx-k-n { font-size: 15px; } .lx-gruppe > h2, .lx-nachbarn > h2 { font-size: 18px; } .lx-z { padding: 12px 0; } .lx-z-n { font-size: 15.5px; } /* Die Tabelle braucht auf dem Telefon einen eigenen Rollbereich: die Seite selbst darf nie waagrecht rollen. */ .lx-tab { overflow-x: auto; } .lx-tab th, .lx-tab td { padding: 10px 12px; font-size: 14.5px; } .lx-sprung { padding: 17px 18px; } .lx-s-k { width: 100%; text-align: center; } } /* Der Begriffsname in den Suchergebnissen verweist auf seinen Lexikoneintrag. Gepunktet unterstrichen und nicht rot: rot ist auf dieser Website der Absprung, und das hier ist eine Erklärung. */ a.res-n-lex { display: inline-block; color: var(--ink); text-decoration: none; border-bottom: 1px dotted var(--line-hard); } a.res-n-lex:hover, a.res-n-lex:focus-visible { color: var(--accent); border-bottom-color: var(--accent); } /* Die Geschwister der Themengruppe, als Chips. Dieselbe Form wie die Kategorien-Chips der Suchergebnisse (.res-cats) — dieselbe Aufgabe: eine Reihe gleichrangiger Ziele, von denen keines hervorsticht. */ .lx-gr { margin: 26px 0 0; padding-top: 18px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 7px; align-items: center; } .lx-gr-h { width: 100%; margin-bottom: 3px; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; font-weight: 650; color: var(--muted); } .lx-gr a { padding: 4px 11px; border-radius: 999px; font-size: 13.5px; border: 1px solid var(--line-hard); text-decoration: none; color: var(--ink); } .lx-gr a:hover, .lx-gr a:focus-visible { border-color: var(--accent); color: var(--accent); } /* =============================================================== STARTSEITE AUFBAU NACH DER VORLAGE, FARBE NACH DIESER WEBSITE. Uebernommen ist die Gliederung: weisse Kopfzone mit zwei Spalten, dunkle Kennzahlkarte rechts, Kennzahlband, abwechselnd weisse Abschnitte mit Kopfzeile links und Knopf rechts, Kartengitter, Beitragsgitter mit breiterer erster Karte, Methodikzone. NICHT uebernommen ist die Palette. Die Vorlage arbeitet mit Blau (#1768d3) und einer navyblauen Karte; diese Website hat eine Marke, und die ist rot. Alle Farben hier kommen aus den vorhandenen Marken — --accent, --bar-bg, --surface, --line, --ton-2 bis --ton-4. Eine zweite Leitfarbe waere eine zweite Marke, und im Dunkelmodus muesste sie ein zweites Mal gestimmt werden. Auch die Radien folgen dem Haus: --r und --r-s statt der 16 und 22 Pixel der Vorlage. */ /* --st-luft ist der Abstand ueber und unter jedem Abschnitt. Von 56 auf 72 erhoeht: die Seite wirkte gedrueckt, und gedrueckt wirkt sie nicht, weil zu viel darauf steht, sondern weil zwischen den Bloecken zu wenig Ruhe war. Luft ist das billigste Mittel gegen Enge — billiger als Weglassen. */ /* 96 SEIT DEM 25.08.2026. Der Grund ist die Farbfolge: seit die Abschnitte abwechselnd weiss und blau sind, sieht man ihre Grenzen — und bei 72 Pixeln stiess der Text sichtbar an die Farbkante. Ein farbiger Abschnitt braucht mehr Innenabstand als ein unsichtbarer, sonst wirkt er wie ein zu eng gefuellter Kasten. */ .st-main { --st-luft: 96px; } /* ------------------------------------------------------------------ Kopfzone */ /* KEINE LINIE UNTER DER KOPFZONE. Sie stand hier als border-bottom und lief von Fensterkante zu Fensterkante — unmittelbar ueber den fuenf Kennzahlenkaesten, und die haben selbst einen Rahmen. Im Bild war es ein Strich, der nichts trennt: darueber weiss, darunter weiss, und die Kaesten sassen so knapp darunter, dass er wie ein verirrter Rest aussah. Getrennt wird auf dieser Seite durch den WECHSEL der Flaechenfarbe (weiss/grau), und der kommt eine Zeile weiter unten von selbst. Dafuer etwas mehr Luft nach unten: 52 Pixel trugen die Linie mit, ohne sie stehen Kopfzone und Kaesten sonst zu dicht. */ /* MEHR LUFT ZWISCHEN LEISTE UND KOPFZONE, und NUR hier: .st-hero gibt es ausschliesslich auf der Startseite. 68 Pixel waren die Zahl aus der Zeit, als darunter noch eine Trennlinie lag und darueber eine Leiste mit Suchfeld — beides ist weg, und ohne sie begann der Text zu dicht unter der Leiste. 92 Pixel sind der Wert, mit dem die Kopfzone als eigene Flaeche liest und nicht als erste Zeile der Leiste. Unten bleibt es bei 60: darunter kommen die Kennzahlenkaesten, und die haben ihren eigenen Rand. */ .st-hero { background: var(--surface); padding: 92px 0 76px; position: relative; } /* DAS RADARMUSTER HINTER DER KOPFZONE. Eigene Huelle mit overflow: hidden und NICHT overflow auf .st-hero: dort haengen die beiden schwebenden Kaertchen am Tabellenbild, die absichtlich ueber den Rand ragen — ein overflow am Abschnitt haette sie beschnitten. pointer-events: none, damit das Muster keine Klicks abfaengt. */ .st-hero-grund { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } .st-hero-grund svg { display: block; width: 100%; height: 100%; } /* DASSELBE MUSTER AUF DEN UEBRIGEN SEITEN. Unterschied zur Kopfzone: dort fuellt es den ganzen Abschnitt, hier ist es ein Band von 340 Pixeln am oberen Rand, das nach unten ausblendet. Ohne das Ausblenden liefe es in den Text hinein und muesste an jeder Seite einzeln nachgeregelt werden. Die Huelle traegt overflow: hidden und pointer-events: none aus denselben Gruenden wie bei der Kopfzone. */ .rad-grund { position: absolute; top: 0; left: 0; right: 0; height: 340px; overflow: hidden; pointer-events: none; z-index: 0; -webkit-mask-image: linear-gradient(#000 45%, transparent 100%); mask-image: linear-gradient(#000 45%, transparent 100%); } .rad-grund svg { display: block; width: 100%; height: 100%; } /* LEISER, auf Zuruf: eine gemeinsame Deckkraft ueber der ganzen Zeichnung, statt neun einzelne Werte nachzuziehen. Gilt fuer die Kopfzone der Startseite und fuer das Band der uebrigen Seiten gleichermassen. */ .rad-grund, .st-hero-grund { opacity: .5; } /* Die Abschnitte, die das Muster tragen, brauchen einen Bezugspunkt und ihren Inhalt darueber. EIGENE KLASSE und nicht .view direkt: .view traegt auch Produktseiten, Lexikon und Rechtsseiten, und dort steht kein Muster. */ /* HIER STAND EIN FEHLER, gemeldet am 24.08.2026: ueber der Ueberschrift der Uebersichtsseite und der Marktbefunde klaffte eine Luecke von rund 340 Pixeln — genau der Hoehe des Musterbandes. URSACHE: die Zeile lautete `.hat-grund > .wrap, .hat-grund > * { position: relative }`. Der Stern traf auch das Muster selbst und ueberschrieb dessen `position: absolute` — gleiche Spezifitaet (0,1,0), spaeter in der Datei, also gewinnt er. Damit stand das Muster IM FLUSS und schob alles nach unten. Die Zeile darunter korrigierte nur den z-index und nicht die Position. LEHRE, dieselbe wie schon zweimal in dieser Datei: kein Stern, wo ein Name genuegt. Der Inhalt dieser Abschnitte ist immer .wrap. */ .hat-grund { position: relative; } .hat-grund > .wrap { position: relative; z-index: 1; } .hat-grund > .rad-grund { position: absolute; z-index: 0; } .hg-ring { stroke: var(--line-hard); stroke-width: 1.1; } .hg-speiche { stroke: var(--line-hard); stroke-width: 1; stroke-opacity: .3; } .hg-strahl { stroke: var(--accent); stroke-width: 1.4; opacity: .4; } /* Der Keil traegt seinen Verlauf inline: die Kennung wird je Vorkommen gebildet, damit zwei Muster auf einer Seite nicht denselben Verlauf nehmen. */ .hg-k0 { stop-color: var(--accent); stop-opacity: 0; } .hg-k1 { stop-color: var(--accent); stop-opacity: .09; } .hg-blip { fill: var(--accent); fill-opacity: .55; } .hg-blip-still { fill: var(--line-hard); fill-opacity: .9; } /* Im Dunkeln traegt --line-hard zu wenig gegen den Grund. Dieselbe Loesung wie beim Radarabschnitt: durchscheinendes Weiss. */ html[data-theme="dark"] .hg-ring, html[data-theme="dark"] .hg-speiche { stroke: rgba(255,255,255,.14); } html[data-theme="dark"] .hg-blip-still { fill: rgba(255,255,255,.28); } html[data-theme="dark"] .hg-k1 { stop-opacity: .14; } .st-hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 54px; align-items: center; max-width: 1240px; position: relative; z-index: 1; } .st-eyebrow { margin: 0; font-size: 11.5px; font-weight: 750; letter-spacing: .11em; text-transform: uppercase; color: var(--accent); } /* DIE VERTRAUENSZEILE unter den Knoepfen der Kopfzone. Drei Pillen, leise: sie sollen unter dem Hauptknopf stehen und nicht neben ihm um Aufmerksamkeit kaempfen. Darum kein Rahmen in der Akzentfarbe, sondern die ruhige Flaeche und ein Haken davor. */ .st-trust { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 22px 0 0; padding: 0; list-style: none; } .st-trust li { font-size: 12.5px; line-height: 1.3; font-weight: 600; color: var(--ink-soft); background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px 5px 10px; } .st-trust li::before { /* Der Haken direkt als Zeichen und nicht als CSS-Escape: die Datei ist UTF-8, und eine Escape-Folge ueberlebt den Weg durch ein Skript nicht zuverlaessig — hier stand nach dem Einsetzen «¹3». Im Bild gesehen. */ content: "✓"; color: var(--accent); font-weight: 800; margin-right: 6px; } /* ----------------------------------------- Der Tabellenabschnitt Bild links, Text rechts. Das Bild ist dasselbe wie in der Kopfzone, dort aber deutlich breiter: hier steht es in einer halben Spalte und wird darum verkleinert — mit transform: scale, damit das Verhaeltnis in allen vier Sprachen dasselbe bleibt. DIE HUELLE BRAUCHT EINE HOEHE. Ein Kind mit position: absolute traegt seine Huelle nicht mehr; ohne aspect-ratio faellt der Kasten auf null zusammen und der Text steht allein. */ /* GLEICHE GROESSE UND GLEICHE PROPORTION WIE IN DER KOPFZONE, auf Zuruf. Dort steht das Bild in der rechten Spalte eines Rasters 1.1fr / .9fr und traegt seine natuerliche Groesse. Hier steht es in einer halben Spalte von .st-g2 — also in genau derselben Groessenordnung. Es braucht darum WEDER eine Verkleinerung noch eine feste Hoehe: es bringt beides selbst mit. VORHER stand hier scale(.7) mit width: 143% und aspect-ratio — drei Werte, die sich gegenseitig ausglichen und das Bild kleiner machten als in der Kopfzone. Alle drei entfallen. */ /* GAP MIT !important, und der Grund ist die Reihenfolge: .st-g2 setzt gap: 16px und steht SPAETER in der Datei als .st-tabsec — bei gleicher Spezifitaet gewinnt die spaetere Regel, und beide Erhoehungen liefen ins Leere. Dieselbe Falle wie beim Blogvorspann und beim Suchfeld. */ .st-tabsec { align-items: center; gap: 80px !important; } .st-tabsec-bild .st-aside { pointer-events: none; } @media (max-width: 900px) { /* Schmal steht das Bild oben und der Text darunter. Das Raster loest .st-g2 schon auf eine Spalte auf; hier faellt nur die feste Hoehe weg, sonst bliebe unter dem verkleinerten Bild eine Luecke. */ .st-tabsec { gap: 26px; } } /* ----------------------------------------- Die drei Einstiege, mit Bild Jede Karte: oben ein Bild, darunter Etikett, Titel, Text. Das Bild sitzt in einer Huelle mit festem Seitenverhaeltnis und overflow: hidden — sonst bestimmt der Inhalt die Hoehe, und drei Karten mit verschieden hohen Bildern stehen versetzt. DER TABELLENAUSSCHNITT ist fuer die Kopfzone gebaut und dort deutlich groesser. Er wird hier VERKLEINERT statt neu gezeichnet — zwei Zeichnungen derselben Sache laufen frueher oder spaeter auseinander. Verkleinert wird mit transform: scale und nicht ueber Schriftgroessen, damit das Bild in jeder der vier Sprachen dasselbe Verhaeltnis behaelt. */ .st-tun-karte { padding: 0; overflow: hidden; } .st-tun-karte .st-tag { margin: 16px 18px 0; } .st-tun-karte h3 { margin: 8px 18px 0; } .st-tun-karte p { margin: 6px 18px 18px; } .st-bild { display: block; position: relative; overflow: hidden; aspect-ratio: 200 / 118; background: var(--surface-2); border-bottom: 1px solid var(--line); } /* DAS TABELLENBILD OHNE GRAUEN KASTEN, auf Zuruf: es bringt seinen eigenen weissen Grund und seinen Schatten mit, und der graue Kasten dahinter machte daraus ein Bild in einem Bild. Die beiden gezeichneten Nachbarn behalten ihren Grund — sie sind Striche ohne eigene Flaeche und braeuchten sonst einen Rahmen. */ .st-bild-tab { background: transparent; border-bottom: 0; } /* DIE EIGENS GEZEICHNETE TABELLE der ersten Einstiegskarte. Schrift bei 7 Bildeinheiten in einem viewBox von 200 — auf einer Karte von rund 340 Pixeln sind das etwa 12 Pixel und damit lesbar. Der verkleinerte Kopfzonen-Ausschnitt kam auf gut 5 und war es nicht. */ .bt-feld { fill: var(--surface); stroke: var(--line); } .bt-linie { stroke: var(--line); stroke-width: 1; } .bt-t { font-size: 7px; fill: var(--ink-soft); } .bt-kopf { font-weight: 700; fill: var(--ink); } .bt-lab { fill: var(--muted); } .bt-preis { font-weight: 700; fill: var(--ink); } .bt-gratis{ font-weight: 700; fill: #1a7a4c; } /* Die Teile, die das Bild der Kopfzone ausmachen: Fensterleiste, Adresse, schwebendes Kaertchen, Filterpillen. */ .bt-punkt { fill: var(--line-hard); } .bt-url { fill: var(--surface-2); stroke: var(--line); } .bt-urltext { font-size: 4.6px; fill: var(--muted); } .bt-karte { fill: var(--surface); stroke: var(--line); filter: drop-shadow(0 2px 4px rgba(9,20,40,.12)); } .bt-marke { fill: var(--accent); } .bt-kartetitel { font-size: 6px; font-weight: 700; fill: var(--ink); } .bt-kartesub { font-size: 5px; fill: var(--muted); } .bt-pille { fill: var(--surface); stroke: var(--line-hard); } .bt-pille-an { fill: var(--accent); stroke: var(--accent); } .bt-pilletext { font-size: 4.8px; fill: var(--ink-soft); } .bt-pilletext-an { fill: #fff; font-weight: 700; } .st-bild-svg { display: block; width: 100%; height: 100%; } /* AUF EIN DRITTEL DER SEITENBREITE GERECHNET. Die Zeichnung ist fuer die Kopfzone gebaut (rund 560 Pixel breit); in einer Drittelspalte stehen ihr etwa 340 zur Verfuegung. 0.42 statt 0.5, und die Breite entsprechend groesser, damit nichts am rechten Rand abgeschnitten wird. Dazu ein Versatz nach unten: oben am Bild sitzt die Adresszeile, und die ist in dieser Groesse nicht mehr lesbar — der Ausschnitt beginnt darum bei der Kopfzeile der Tabelle. */ .st-bild-tab .st-aside { position: absolute; top: -6%; left: 0; width: 238%; transform: scale(.42); transform-origin: 0 0; pointer-events: none; } /* Die zwei schwebenden Kaertchen am Tabellenbild ragen in der Kopfzone absichtlich ueber den Rand. In der kleinen Huelle wuerden sie abgeschnitten und saehen nach Fehler aus. */ .st-bild-tab .st-mock-karte, .st-bild-tab .st-m-karte { display: none; } /* KLEINER ALS VORHER: 42 statt 50 Pixel als Obergrenze. Bei 50px lief der Titel auf 1440 Pixeln in drei Zeilen und auf schmaleren Fenstern in vier — vier Zeilen Grossschrift sind kein Titel mehr, sondern ein Absatz. Bei 42px traegt die Spalte rund 28 Zeichen je Zeile, der Satz hat 56, also zwei Zeilen; drei sind die Ausnahme und vier nicht mehr erreichbar. Mehr Zeilenabstand dazu: 1.05 war auf grosse Schrift gerechnet. */ /* MEHR LUFT ZWISCHEN DEN VIER TEILEN DER KOPFZONE. Sie standen mit 14 und 18 Pixeln so dicht, dass Etikett, Titel, Vorspann und Knoepfe als ein Block lasen — «gedrueckt» ist das richtige Wort. Jetzt 22 nach oben und 26 nach unten; der Vorspann traegt 34 zu den Knoepfen (siehe .st-actions). Die Kette ist damit 22 / 26 / 34 und wird nach unten weiter, nicht enger: so liest ein Auge eine Rangfolge. */ .st-hero h1 { margin: 22px 0 26px; font-size: clamp(28px, 3.4vw, 42px); line-height: 1.1; letter-spacing: -.036em; text-wrap: balance; } .st-lead { margin: 0; max-width: 58ch; font-size: 16px; line-height: 1.6; color: var(--ink-soft); } /* Das Suchfeld als EIN Kasten mit Feld und Knopf darin — die Form, die man von einer Suche erwartet, und dieselbe Anordnung wie in der Kopfleiste. */ /* .st-trust ist mit der Vertrauenszeile entfallen — siehe build.js. */ /* 16 statt 9 Pixel zwischen den Knoepfen. Mit 9 sassen «Jetzt vergleichen» und «Marktdaten ansehen» so dicht, dass sie als ein Bedienelement mit zwei Haelften lasen. Und 34 nach oben statt 18: die Knoepfe sind das Ende der Kette und brauchen den groessten Abstand davor. */ .st-actions { display: flex; flex-wrap: wrap; gap: 16px; margin: 34px 0 0; } .st-btn { display: inline-flex; align-items: center; justify-content: center; /* 7px hoch statt 9: die Knoepfe standen als hohe Kloetze da, seit zwei davon in der Kopfzone nebeneinander liegen. Waagrecht 16 statt 15 — ein flacherer Knopf braucht etwas mehr Breite, sonst wird er quadratisch. */ padding: 7px 16px; border-radius: var(--r-s); border: 1px solid var(--line-hard); background: var(--surface); font-size: 14.5px; font-weight: 620; color: var(--ink); text-decoration: none; white-space: nowrap; } .st-btn:hover, .st-btn:focus-visible { border-color: var(--accent); color: var(--accent); } .st-btn-p { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } .st-btn-p:hover, .st-btn-p:focus-visible { color: var(--accent-ink); filter: brightness(1.08); } /* DIE PRODUKTABBILDUNG RECHTS IN DER KOPFZONE. Eine typische SaaS-Startseite stellt links die Aussage und rechts das Produkt. Rechts steht darum kein Vorzeilchen, kein Fliesstext, kein Knopf — nur das Bild. Was IM Bild steht, gehoert zum Bild. VORHER STAND HIER EINE STRICHZEICHNUNG: graue Balken, wo Text hingehoert, Haken dazwischen. Sie erklaerte die Form der Tabelle und sonst nichts, und sie wirkte wie ein Platzhalter. Jetzt ist es ein Fenster mit echten Daten — Adresszeile, Produktnamen, Kriterien, Werte, eine gewaehlte Spalte, Filterpillen, zwei Karten, die ueber den Rand ragen. DIE TIEFE MACHEN DREI DINGE, und keines davon ist eine neue Farbe: ein weicher Schatten unter dem Fenster, ein Lichtsaum von einem Pixel oben, und die zwei Karten, die den Rand ueberlappen. Ueberlappung ist die einzige Angabe, die ein flaches Bild raeumlich macht — darum ragen sie hinaus und liegen nicht brav daneben. Der Rahmen ist der Verweis auf die Tabelle und traegt role=img samt Namen; das Innere ist aria-hidden. Fuer einen Bildschirmleser waere die Nachbildung eine zweite, nicht bedienbare Tabelle. */ .st-aside { display: block; position: relative; text-decoration: none; color: inherit; /* Platz fuer die ueberhaengenden Karten. Ohne ihn schneidet das Raster sie ab. */ padding: 18px 12px 32px 24px; } .st-mock { display: block; position: relative; } /* ------------------------------------------------------------------ Fenster */ .st-m-fenster { display: block; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 60%, transparent), 0 26px 60px -18px color-mix(in srgb, var(--ink) 30%, transparent); transition: transform .2s ease, box-shadow .2s ease; } .st-aside:hover .st-m-fenster, .st-aside:focus-visible .st-m-fenster { transform: translateY(-3px); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 60%, transparent), 0 34px 76px -18px color-mix(in srgb, var(--ink) 36%, transparent); } /* Die Adresszeile. Drei Punkte links wie in jedem Fenster, dann die ECHTE Adresse der Kategorieseite in einem Feld. */ .st-m-bar { display: flex; align-items: center; gap: 5px; padding: 9px 12px; background: var(--surface-2); border-bottom: 1px solid var(--line); } .st-m-bar i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 16%, transparent); } /* Das Adressfeld sitzt MITTIG und nicht ueber die ganze Breite. Der Grund ist die Karte oben links: sie ueberlappt die Ecke des Fensters, und mit einem Feld ueber die ganze Breite verdeckte sie den Anfang der Adresse — im Bild stand «mu-softwarevergleich.ch/…». Mittig bleibt links Platz fuer die Ueberlappung, und Platz ist der einzige Weg, ein Verdecken zu verhindern. */ .st-m-url { flex: 0 1 auto; margin: 0 auto; max-width: 64%; padding: 3px 9px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* -------------------------------------------------------------- Die Tabelle */ .st-m-tab { display: block; padding: 4px 0 0; } .st-m-zeile { display: grid; grid-template-columns: 1.35fr .85fr .85fr .85fr; align-items: center; border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); } .st-m-tab > .st-m-zeile:last-child { border-bottom: 0; } .st-m-lab { padding: 9px 6px 9px 14px; font-size: 11px; line-height: 1.25; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .st-m-z { padding: 9px 4px; text-align: center; font-size: 11px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Die Kopfzeile traegt die Produktnamen. Fett und dunkel, damit sie als Koepfe lesbar sind — im Bild ist das die Zeile, an der man erkennt, dass Produkte NEBENEINANDER stehen. */ .st-m-kopf { border-bottom: 1px solid var(--line-hard); } .st-m-kopf .st-m-z { font-size: 11px; font-weight: 700; letter-spacing: -.015em; color: var(--ink); padding-top: 7px; padding-bottom: 8px; /* Der Kopf darf UMBRECHEN, der Rumpf nicht. «SAP Business One» braucht bei 11px etwa 104 Pixel und die Spalte hat 88 — abgeschnitten stuende dort «SAP Business …», also ein halber Produktname. Zwei Zeilen sind besser als eine Auslassung, und nur die Kopfzeile ist davon betroffen. */ white-space: normal; line-height: 1.18; } /* HIER STAND EINE HERVORGEHOBENE SPALTE in der Akzentfarbe — der Zustand «von Ihnen gewaehlt» aus der echten Tabelle. Sie ist entfallen: das Bild zeigt den Zustand VOR der Auswahl, und eine rote Spalte neben drei bekannten Produktnamen liest sich als Empfehlung. Rot bleibt im Bild genau an einer Stelle, an der es keine Wertung ist — der aktiven Filterpille. */ .st-m-ja { color: var(--good); font-weight: 700; } .st-m-teil { color: var(--warn); font-weight: 700; } .st-m-nein { color: var(--muted); } .st-m-zahl { font-weight: 660; font-variant-numeric: tabular-nums; } /* «gratis» statt «CHF 0»: eine Aussage, kein Betrag, darum in --good wie der Haken und nicht in der Zahlenschrift. */ .st-m-gratis { color: var(--good); font-weight: 660; } /* Der Grund, aus dem keine Zahl steht — klein und kursiv, damit er als Auskunft und nicht als Wert gelesen wird. */ .st-m-grund { font-size: 9.5px; font-style: italic; color: var(--muted); white-space: normal; line-height: 1.2; } /* Filterpillen: der eigentliche Verkaufsgrund der Tabelle. Eine ist aktiv. */ .st-m-pillen { display: flex; flex-wrap: nowrap; gap: 5px; overflow: hidden; padding: 11px 14px 13px; border-top: 1px solid var(--line); background: var(--surface-2); } .st-m-pillen span { flex: none; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line-hard); background: var(--surface); font-size: 10px; color: var(--ink-soft); white-space: nowrap; } /* DIE AKTIVE PILLE OHNE AKZENTFARBE. Sie war rot gefuellt und zog in einer Abbildung, die als Ganzes nur zeigen soll, wie eine Tabelle aussieht, den Blick auf ein einzelnes Wort — «QR-Rechnung» las sich wie die Aussage der Startseite. Ausgewaehlt bleibt sie erkennbar, nur ueber drei ruhige Mittel statt ueber Farbe: volle Schriftfarbe statt der gedaempften, ein sichtbarer Rand und das hoehere Schriftgewicht. Das Paar ink auf surface ist in pruefungen/pruefe-kontrast.js schon geprueft; ein neues Farbtoken braucht es dafuer nicht. */ .st-m-pillen span.on { background: var(--surface); border-color: var(--ink-soft); color: var(--ink); font-weight: 650; } /* ------------------------------------------------- Die zwei ueberhaengenden Karten */ .st-m-karte { position: absolute; z-index: 2; display: flex; flex-direction: column; gap: 1px; padding: 9px 13px; border-radius: 11px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 14px 34px -10px color-mix(in srgb, var(--ink) 32%, transparent); } .st-m-karte b { font-size: 12px; font-weight: 700; letter-spacing: -.015em; color: var(--ink); white-space: nowrap; } .st-m-karte i { font-style: normal; font-size: 10.5px; color: var(--muted); white-space: nowrap; } /* Links oben ueber die Kante, rechts unten darueber — diagonal, damit sie das Fenster rahmen und nicht auf einer Seite kleben. */ /* Beide Karten liegen so, dass sie NUR Flaeche ueberlappen und keinen Text: die erste ueber der Adresszeile links, wo das mittig gesetzte Adressfeld Platz laesst; die zweite unter der Pillenreihe, ueberwiegend ausserhalb des Fensters. Der erste Anlauf legte sie mitten auf Adresse und Pillen — im Bild fehlten der Adressanfang und «Mobile App». */ .st-m-k1 { top: -16px; left: -22px; } .st-m-k2 { bottom: -24px; right: -10px; } /* Ein roter Punkt an der ersten Karte: dieselbe Marke wie im Seitenkopf, und das einzige Farbelement neben der gewaehlten Spalte. */ .st-m-k1::before { content: ""; position: absolute; top: 13px; left: -5px; width: 3px; height: calc(100% - 26px); border-radius: 2px; background: var(--accent); } @media (max-width: 1080px) { /* Kein Ueberhang mehr, wenn es schmal wird: eine Karte, die ueber den Rand des Rasters ragt, laeuft dort in die Textspalte. */ .st-aside { padding: 18px 0 30px; } .st-m-k1 { top: -10px; left: 0; } .st-m-k2 { bottom: -12px; right: 0; } } @media (max-width: 620px) { /* Auf dem Telefon traegt die Adresszeile keine Adresse mehr — 10 Pixel Text in einem 300 Pixel breiten Feld sind Zierde. Die Pillen und die zweite Karte bleiben: sie sagen etwas. */ .st-m-url { display: none; } .st-m-zeile { grid-template-columns: 1.2fr .9fr .9fr .9fr; } .st-m-lab { padding-left: 10px; font-size: 10.5px; } .st-m-karte { padding: 8px 11px; } .st-m-karte b { font-size: 11.5px; } } /* Zeilen mit Bezeichnung links und Wert rechts. Sie stehen nur noch auf der hellen Karte des Preisabschnitts — die dunkle Kennzahlkarte, fuer die sie gebaut waren, ist der Produktabbildung gewichen. */ .st-a-rows { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); } .st-a-rows > div { display: flex; justify-content: space-between; gap: 16px; padding: 5px 0; font-size: 14px; } .st-a-rows span { color: var(--muted); } .st-a-rows b { color: var(--ink); font-variant-numeric: tabular-nums; } /* -------------------------------------------------------------- Kennzahlband */ /* Das Kennzahlband sitzt auf derselben weissen Flaeche wie die Kopfzone und braucht darum eigene Luft nach unten — sonst klebt es an der Kante zum naechsten Abschnitt. */ .st-kpis { background: var(--surface); padding: 4px 0 44px; } .st-kpi-grid { display: grid; gap: 10px; max-width: 1240px; grid-template-columns: repeat(5, 1fr); } .st-kpi { padding: 17px 19px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-s); text-decoration: none; color: inherit; } a.st-kpi:hover, a.st-kpi:focus-visible { border-color: var(--accent); } a.st-kpi:hover b, a.st-kpi:focus-visible b { color: var(--accent); } .st-kpi b { display: block; font-size: 27px; font-weight: 700; letter-spacing: -.038em; color: var(--ink); font-variant-numeric: tabular-nums; } .st-kpi span { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.4; color: var(--muted); } /* ----------------------------------------------------------- Abschnittsraster */ .st-sec { padding: var(--st-luft) 0; } .st-sec .wrap, .st-kpis .wrap, .st-hero .wrap { max-width: 1240px; } .st-weiss { background: var(--surface); } /* DER FARBIGE GRUND, auf Zuruf vom 25.08.2026. Nicht --bg (das ist der graue Seitenton), sondern --accent-soft: das leise Blau der Marke. Im Dunkeln traegt dieselbe Marke einen dunklen Ton, der Wechsel gilt also in beiden Farbschemata ohne zweiten Wert. */ /* ETWAS LEISER, auf Zuruf: --accent-soft zu zwei Dritteln mit dem Seitengrund gemischt. color-mix statt eines neuen Farbwerts, damit der Ton im Dunkelmodus mitzieht — dort traegt --accent-soft #12294a. */ .st-ton { background: color-mix(in srgb, var(--accent-soft) 62%, var(--surface)); } /* Zwei weisse Abschnitte hintereinander brauchen keine doppelte Fuge. */ .st-weiss + .st-weiss { padding-top: 0; } /* ============================================================================ DER ABSCHNITTSKOPF — EINER FUER ALLE Vorher hatte jeder Abschnitt der Startseite seinen eigenen: .st-head mit h2 und Unterzeile, der Tabellenabschnitt eine Vorzeile mit .st-meth-h, die Musterbetriebe ein nacktes h2. Drei Bauarten, drei Abstaende. JETZT EINE: Vorzeile, Titel, Absaetze, rechts oben ein Knopf, wo einer hingehoert. Gebaut von abschnittKopf() in build.js. .st-head bleibt als Marke stehen, damit aeltere Aufrufe nicht kaputtgehen — sie zeigt auf dieselben Regeln. ============================================================================ */ .st-kopf, .st-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 30px; } .st-kopf h2, .st-head h2 { margin: 8px 0 0; font-size: var(--h2); font-weight: var(--h1-fett); letter-spacing: var(--h1-lauf); line-height: 1.12; color: var(--ink); } /* Der erste Absatz sitzt naeher am Titel als die folgenden aneinander. */ .st-kopf .st-sub { margin-top: 10px; } .st-kopf .st-sub + .st-sub { margin-top: 12px; } /* Der Knopf faellt schmal unter den Titel — siehe Regel im Medienblock. */ .st-kopf > .st-btn { flex: none; } .st-sub { margin: 6px 0 0; max-width: 74ch; font-size: 15px; line-height: 1.6; color: var(--muted); } .st-g2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .st-g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .st-g4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } /* ------------------------------------------------------------------- Karten */ .st-card { display: flex; flex-direction: column; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); } .st-weiss .st-card { background: var(--surface-2); } .st-card h3 { margin: 0 0 7px; font-size: 17.5px; font-weight: 660; letter-spacing: -.02em; color: var(--ink); } .st-card > p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); } .st-card b { font-size: 15.5px; font-weight: 660; color: var(--ink); } .st-link { text-decoration: none; color: inherit; transition: border-color .14s ease, box-shadow .16s ease; } .st-link:hover, .st-link:focus-visible { border-color: var(--accent); box-shadow: var(--shadow-lg); color: inherit; } /* HIER STAND: beim Zeigen wird die Ueberschrift rot. Entfallen. Der Rahmen und der Schatten sagen schon, dass die Karte anfassbar ist; die Ueberschrift zusaetzlich umzufaerben macht aus einem Hinweis eine Farbaenderung im Text — und rot heisst auf dieser Website etwas anderes als «hier ist der Zeiger». */ /* Die Marke oben auf der Karte. In --accent-soft und nicht in --accent: rot gefuellt hiesse auf dieser Website «gewaehlt» oder «zwingend», und hier ist es eine Einordnung. */ /* RUHIG UND NICHT ROT. Als rote Pille zogen die drei Etiketten der Einstiegskarten zusammen mehr Blick als der einzige rote Knopf der Seite — und sie sagten dasselbe wie die Ueberschrift darunter («VERGLEICHEN» ueber «Die passende Loesung finden»). Ein Etikett ordnet ein, es wirbt nicht: grau, ohne Fuellung, und Rot bleibt ueber der Falzlinie der Handlung vorbehalten. */ .st-tag { align-self: flex-start; margin-bottom: 10px; padding: 4px 9px; border-radius: 999px; background: transparent; border: 1px solid var(--line-hard); color: var(--muted); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } /* HIER STAND .st-count — die Bestandszahl am Kartenboden. Sie ist mit der Bestandspille oben rechts (.st-kachel-n) entfallen und beim Aufraeumen stehengeblieben: null Verwendungen in build.js. Bei der Kontrastpruefung aufgefallen, weil sie als «Akzent auf gedaempfter Flaeche» gemeldet wurde — ein Paar, das es gar nicht mehr gibt. */ .st-mini { padding: 16px 17px; } .st-mini > p { margin-top: 4px; font-size: 13.5px; } /* ---------------------------------------------------------- Preisverteilung Dieselben Balken wie im Baustein «diagramm» der Beitraege: eine Flaeche mit einer Breite in Prozent, die Zahl daneben im Text. Der Balken traegt aria-hidden, weil er nichts sagt, was die Zahl nicht sagt. *//* HIER STANDEN DIE REGELN .st-md* — der Abschnitt «Marktdaten & Research» mit den echten Zahlen. Entfallen mit ihm am 23. August 2026; die Begruendung steht in build.js an der Stelle, an der startMarktdaten() stand. Der Entwurf darunter hat seine eigenen Regeln (.ent-*) und ist davon unberuehrt. */ /* ================================ DER ENTWURF DES MARKTABSCHNITTS Er entsteht nur mit KMU_ENTWURF=1 und geht darum nie live — die Begruendung steht in build.js bei startMarktEntwurf(). Diese Regeln bleiben trotzdem im Stilblatt: sie kosten 2 KB und ohne sie waere der Entwurf beim naechsten Ansehen wieder ungestaltet. DIE FARBEN SIND FEST UND FOLGEN KEINEN VARIABLEN. Das ist hier richtig und sonst falsch: der Abschnitt ahmt die Vorlage nach, und die hat einen dunklen Grund mit einem blauen Akzent — beides gehoert NICHT zu dieser Website. Sie ueber --bar-bg oder --accent zu fuehren hiesse, ein Fremdbild an unsere Farben zu binden und beim naechsten Farbwechsel mitzuziehen. Er wechselt auch nicht mit hell/dunkel: eine Vorlage hat keinen Hellfall. */ .ent-sec { background: #0C1220; color: #E8ECF5; padding: 72px 0; } /* Die Fahne sagt, was das ist, und zwar bevor man die Zahlen liest. */ .ent-fahne { display: inline-block; margin: 0 0 26px; padding: 5px 12px; background: #E23D3D; color: #fff; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .04em; } .ent-kicker { display: flex; align-items: center; gap: 10px; margin: 0; font-family: ui-monospace, "IBM Plex Mono", Consolas, monospace; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #6A7CFF; } .ent-kicker::before { content: ""; width: 26px; height: 2px; background: #2545E8; } .ent-h2 { margin: 14px 0 0; font-size: clamp(28px, 3.4vw, 40px); font-weight: 660; letter-spacing: -.03em; line-height: 1.1; } .ent-lead { margin: 12px 0 0; max-width: 560px; font-size: 17px; color: #9AA6C4; } /* BEIDE TAFELN GLEICH HOCH. «align-items: start» stand hier und liess jede so hoch werden wie ihr Inhalt — die rechte endete auf halber Hoehe der linken, weil fuenf Balken kuerzer sind als ein Diagramm. Beim echten Abschnitt darueber ist genau das richtig (dort sind es zwei getrennte Karten); hier nicht, denn diese zwei bilden EINE Zeile mit einer Aussage, und die Vorlage zeigt sie gleich hoch. Weggelassen heisst «stretch», und das ist die Vorgabe des Rasters. */ .ent-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 20px; margin-top: 44px; } /* Flex-Spalte, damit der Verweis am Fuss der rechten Tafel unten ANSTOESST (margin-top: auto weiter unten). Ohne das haengt er unter den Balken und die gewonnene Hoehe steht als leere Flaeche darunter — gleich hoch, aber halb leer, und damit waere nichts gewonnen. */ .ent-panel { background: #121A30; border: 1px solid #222D4E; border-radius: 14px; padding: 24px; display: flex; flex-direction: column; } .ent-panel h3 { margin: 0; font-size: 16px; font-weight: 650; letter-spacing: -.01em; } .ent-sub { margin: 4px 0 0; font-size: 13px; color: #9AA6C4; } .ent-chead { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; } .ent-cval { margin: 0; font-family: ui-monospace, "IBM Plex Mono", Consolas, monospace; font-size: 26px; font-weight: 600; } .ent-cval small { margin-left: 8px; font-size: 12px; font-weight: 600; } .ent-svg { display: block; width: 100%; height: auto; margin-top: 14px; } .ent-bar { display: grid; grid-template-columns: 110px 1fr 52px; gap: 12px; align-items: center; font-size: 13.5px; margin-top: 14px; } .ent-track { height: 10px; background: #1B2544; border-radius: 99px; overflow: hidden; } .ent-track i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #2545E8, #6A7CFF); } .ent-num { font-family: ui-monospace, "IBM Plex Mono", Consolas, monospace; font-size: 12.5px; text-align: right; } .ent-dl { margin-top: auto; padding-top: 20px; color: #7C90FF; } .ent-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 20px; } .ent-stat { background: #121A30; border: 1px solid #222D4E; border-radius: 14px; padding: 20px 22px; } .ent-stat b { display: block; font-family: ui-monospace, "IBM Plex Mono", Consolas, monospace; font-size: 24px; font-weight: 600; letter-spacing: -.02em; } .ent-stat span { font-size: 13px; color: #9AA6C4; } .ent-delta { font-size: 12px; font-weight: 600; margin-left: 8px; } .ent-up { color: #0BA678; } .ent-down { color: #E23D3D; } @media (max-width: 900px) { .ent-grid { grid-template-columns: minmax(0, 1fr); } .ent-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .ent-strip { grid-template-columns: minmax(0, 1fr); } .ent-panel { padding: 18px 17px; } } .st-chart { display: flex; flex-direction: column; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); } .st-weiss .st-chart { background: var(--surface-2); } .st-chart h3 { margin: 0; font-size: 17.5px; font-weight: 660; letter-spacing: -.02em; } .st-chart-note { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); } .st-bars { margin: 18px 0 0; } .st-bars > div { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 18px; padding: 9px 0; border-bottom: 1px solid var(--line); } .st-bars > div:last-child { border-bottom: 0; } .st-bars dt { font-size: 14.5px; color: var(--ink-soft); } .st-bars dd { margin: 0; display: flex; align-items: center; gap: 10px; justify-content: flex-end; } .st-bars dd b { min-width: 2.2em; text-align: right; font-size: 15px; font-weight: 680; font-variant-numeric: tabular-nums; color: var(--ink); } .st-bar { display: block; width: 110px; height: 8px; background: var(--line); border-radius: 999px; } .st-bar i { display: block; height: 100%; background: var(--accent); border-radius: 999px; } /* -------------------------------------------------------------- Beitraege Erste Karte breiter, wie in der Vorlage. Die Deckelfarbe kommt aus der Reihe --ton-2 bis --ton-4 und ist damit keine neue Farbe, sondern dieselbe Tonleiter, die die Musterbetriebe und das Preisdiagramm benutzen. */ /* HIER STANDEN .st-arts UND .st-art* — die Beitragskarten der Startseite mit farbigem Deckel. Entfallen am 23. August 2026: die Startseite benutzt jetzt .blog-band und .blog-karte, dieselben Karten wie unter jeder Vergleichstabelle. Eine zweite Bauform fuer dieselbe Sache ist eine Form zu viel; die Begruendung steht in build.js an der Stelle, wo sie gebaut werden. */ /* --------------------------------------------------------------- Methodik */ /* ------------------------------------------------------------------ Radar Das Sinnbild auf der Startseite: Kreis, umlaufender Suchstrahl, ein paar Punkte mit Beschriftung. Kein Skript — der Strahl dreht sich mit einer Animation, die Punkte pulsieren mit einer Verzoegerung, die der Generator aus ihrem Winkel rechnet. ALLE FARBEN AUS DEN VORHANDENEN MARKEN. Ein Radar waere klassisch dunkel; eine dunkle Scheibe auf einer hellen Seite hiesse aber eine neue Farbe einfuehren, die in keinem der beiden Farbschemata geprueft ist. Der Kreis traegt darum --surface-2 wie jede andere Flaeche dieses Abschnitts. */ .st-radar { align-items: center; gap: 40px; } .rad-seite { display: flex; flex-direction: column; align-items: center; gap: 10px; } .rad-scope { position: relative; width: 100%; max-width: 420px; aspect-ratio: 1; } /* DER SCHATTEN STATT EINER WEICHEN KANTE, auf Zuruf vom 25.08.2026. Kurz lief die Scheibe am Rand aus; das nahm ihr die Form. Ein Schatten loest dasselbe Problem besser: er hebt die Scheibe vom Grund ab, statt sie in ihn hineinlaufen zu lassen — und die Kante bleibt scharf. drop-shadow UND NICHT box-shadow: die Huelle ist ein Rechteck, der Inhalt ein Kreis. box-shadow zeichnete den Schatten des Rechtecks. */ .rad-svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 14px 34px rgba(9, 20, 40, .22)) drop-shadow(0 3px 8px rgba(9, 20, 40, .12)); } /* DIE SCHEIBE UND IHR RANDVERLAUF. rad-f0 und rad-f1 sind die zwei Stufen des radialen Verlaufs: innen die volle Farbe, aussen dieselbe Farbe mit Deckkraft null. So bleibt der Uebergang weich, ohne dass eine Fassung einen zweiten Farbwert pflegen muesste — jede Fassung setzt nur rad-f0. */ .rad-feld { fill: var(--surface-2); } .rad-ring { fill: none; stroke: var(--line); stroke-width: 1; } .rad-kreuz { stroke: var(--line); stroke-width: 1; } .rad-s0 { stop-color: var(--accent); stop-opacity: 0; } .rad-s1 { stop-color: var(--accent); stop-opacity: .22; } .rad-keil { fill: url(#radStrahl); } .rad-strahl { stroke: var(--accent); stroke-width: 1.6; opacity: .75; } /* transform-box: fill-box waere hier falsch — der Dreher soll um die MITTE des Bildes drehen und nicht um die Mitte seiner eigenen Bounding-Box, und die ist beim Keil aus der Mitte heraus. Darum ausdruecklich 100px/100px im Koordinatensystem des viewBox. */ .rad-dreher { transform-origin: 100px 100px; animation: rad-dreh 6s linear infinite; } @keyframes rad-dreh { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .rad-blip { fill: var(--accent); transform-origin: center; animation: rad-auf 6s ease-out infinite backwards; } .rad-blip-still { fill: var(--muted); } /* AUFDECKEN. Punkt UND Beschriftung sind unsichtbar und werden vom Strahl aufgedeckt; danach verblassen beide wieder ganz. Das ist das Verhalten eines echten Schirms, und es sagt nebenbei etwas Richtiges: ein Fund gilt zum Zeitpunkt der Pruefung und nicht dauerhaft. Das Verblassen endet bei 62 Prozent des Umlaufs — bliebe etwas stehen, bis der Strahl wiederkommt, waere es nie ganz weg und der Effekt fiele aus. */ /* BEGINNT BEI NULL — und das ist beim ERSTEN Laden entscheidend: ohne den Startwert im Element selbst stehen alle Punkte und Beschriftungen sichtbar da, bis das Bild zum ersten Mal an ihnen vorbeikommt. Sichtbar war das als voll besetzter Schirm in der ersten Sekunde. animation-fill-mode: backwards nimmt den ersten Bildschritt schon WAEHREND der Verzoegerung vorweg. */ @keyframes rad-auf { 0% { opacity: 0; } 1.5% { opacity: 1; } 26% { opacity: 1; } 62% { opacity: 0; } 100% { opacity: 0; } } .rad-tags { list-style: none; margin: 0; padding: 0; } .rad-tag { position: absolute; top: var(--y); max-width: 44%; transform: translateY(-50%); font-size: 12px; line-height: 1.35; font-weight: 600; color: var(--ink); background: var(--surface); /* RAND UND SCHATTEN, GESEHEN UND NICHT GERECHNET (25. August 2026). Die Pille lag zur Haelfte auf der blauen Scheibe und zur Haelfte auf Weiss, und ihr Rand war --line — die feinste Haarlinie der Palette, 1.47:1 auf dem Seitengrund. Auf der blauen Haelfte hob sich die weisse Flaeche selbst ab; auf der weissen Haelfte gab es weder Flaeche noch sichtbaren Rand, und die Pille schien dort schmaler zu werden und die Form zu verlieren. Nichts war beschnitten — nachgemessen: overflow visible, scrollWidth gleich clientWidth. --line-hard traegt auf beiden Gruenden, und der leise Schatten macht aus der Pille einen Chip, der ueber dem Bild liegt statt darin. */ border: 1px solid var(--line-hard); box-shadow: 0 1px 3px rgba(8, 26, 51, .12); border-radius: 999px; padding: 3px 9px; white-space: nowrap; animation: rad-auf 6s ease-out infinite backwards; } .rad-tag-r { left: calc(var(--x) + 4%); } .rad-tag-l { right: calc(100% - var(--x) + 4%); } .rad-note { margin: 0; font-size: 11.5px; color: var(--muted); } /* DER DUNKELMODUS BEKOMMT DEN KLASSISCHEN SCHIRM. Die Marken allein reichen nicht: --line ist auf der dunklen Scheibe zu nah an ihr, die Ringe verschwaenden. Hier stehen darum die Werte aus der Entwurfsfassung 2 — durchscheinendes Weiss fuer Ringe und Kreuz, ein kraeftigerer Keil, und Beschriftungen als durchscheinende Kaesten statt weisser Pillen. Der Akzent kommt weiter aus der Palette (#ff4b52 im Dunkeln) und wird hier NICHT eigens gesetzt — sonst gaebe es einen zweiten Ort fuer dieselbe Farbe. */ /* fill steht in den Verlaufsstufen — siehe oben. */ html[data-theme="dark"] .rad-ring, html[data-theme="dark"] .rad-kreuz { stroke: rgba(255,255,255,.16); } html[data-theme="dark"] .rad-s1 { stop-opacity: .42; } html[data-theme="dark"] .rad-strahl { opacity: .95; } html[data-theme="dark"] .rad-tag { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.22); } html[data-theme="dark"] .rad-blip-still { fill: rgba(255,255,255,.4); } /* VERGLEICHSABSCHNITT: dieselbe Zeichnung, dunkel — unabhaengig davon, welches Farbschema gerade gilt. Damit stehen beide Wirkungen ohne Umschalten nebeneinander. TEST, faellt mit dem Abschnitt in build.js wieder weg. */ /* NUR DIE SCHEIBE IST DUNKEL, der Abschnitt bleibt hell. Der Abschnitt traegt also KEINE eigene Hintergrundfarbe — er ist ein gewoehnlicher grauer Abschnitt in der Folge weiss/grau. DIE BESCHRIFTUNGEN BLEIBEN HELL (weisse Pille, dunkler Text): sie ragen ueber den Scheibenrand hinaus auf den hellen Grund. Durchscheinendes Weiss wie im Dunkelmodus waere dort unlesbar — dieselbe Zeichnung, aber ein anderer Grund unter den Beschriftungen. */ .rad-dunkel .rad-feld { fill: #0f2a4d; } .rad-dunkel .rad-ring, .rad-dunkel .rad-kreuz { stroke: rgba(255,255,255,.16); } .rad-dunkel .rad-s1 { stop-color: #ff5b63; stop-opacity: .42; } .rad-dunkel .rad-s0 { stop-color: #ff5b63; } .rad-dunkel .rad-strahl { stroke: #ff5b63; opacity: .95; } .rad-dunkel .rad-blip { fill: #ff5b63; } .rad-dunkel .rad-blip-still { fill: rgba(255,255,255,.4); } /* DRITTE FASSUNG: rote Scheibe. Alles darauf ist weiss — auf Rot ist Weiss die einzige Farbe, die durchgehend traegt; ein zweiter Farbton daneben (auch ein helleres Rot) faellt gegen die Flaeche ab. Die Beschriftungen bleiben wie bei der dunklen Fassung hell mit dunklem Text, weil sie ueber den Scheibenrand auf den hellen Grund ragen. TEST, faellt mit dem Abschnitt weg. */ .rad-rot .rad-feld { fill: #c8102e; } .rad-rot .rad-ring, .rad-rot .rad-kreuz { stroke: rgba(255,255,255,.32); } .rad-rot .rad-s0 { stop-color: #fff; stop-opacity: 0; } .rad-rot .rad-s1 { stop-color: #fff; stop-opacity: .3; } .rad-rot .rad-strahl { stroke: #fff; opacity: .95; } .rad-rot .rad-blip { fill: #fff; } .rad-rot .rad-blip-still { fill: rgba(255,255,255,.45); } /* VIERTE UND FUENFTE FASSUNG: die Blautoene von BERNCON, ausgelesen aus den Folien- und Websitevorlagen (slides/_block-template.html, berncon-master.html). Die Grundfarben dort sind DIESELBEN wie hier — #06142A, #0F2444, #EAF1FB, #23426B; nur der Akzent ist ein anderer: --blue #1C6FE6 auf hellem Grund, #2A86F2 auf dunklem, --blue-l #6FB2FF. Genau diese Werte stehen unten, keine angenaeherten. TEST, faellt mit den Abschnitten weg. */ .rad-blau .rad-feld { fill: #0F2444; } .rad-blau .rad-ring, .rad-blau .rad-kreuz { stroke: rgba(255,255,255,.16); } .rad-blau .rad-s0 { stop-color: #6FB2FF; stop-opacity: 0; } .rad-blau .rad-s1 { stop-color: #6FB2FF; stop-opacity: .42; } .rad-blau .rad-strahl { stroke: #6FB2FF; opacity: .95; } .rad-blau .rad-blip { fill: #6FB2FF; } .rad-blau .rad-blip-still { fill: rgba(255,255,255,.4); } .rad-blauvoll .rad-feld { fill: #1C6FE6; } .rad-blauvoll .rad-ring, .rad-blauvoll .rad-kreuz { stroke: rgba(255,255,255,.34); } .rad-blauvoll .rad-s0 { stop-color: #fff; stop-opacity: 0; } /* .42 statt .3 — auf Zuruf etwas kraeftiger. Weiter hoch geht schlecht: ab etwa .55 frisst der Keil die Ringe darunter auf und die Scheibe zerfaellt in zwei Haelften. */ .rad-blauvoll .rad-s1 { stop-color: #fff; stop-opacity: .42; } .rad-blauvoll .rad-strahl { stroke: #fff; opacity: .95; } .rad-blauvoll .rad-blip { fill: #fff; } .rad-blauvoll .rad-blip-still { fill: rgba(255,255,255,.45); } /* DIE KOPFZONE IN BLAU. Hier wird nicht nur die Grafik umgefaerbt, sondern ALLES, was sonst den Akzent traegt: Vorzeile, gefuellter Knopf, Rahmen des zweiten Knopfs, und das Radarmuster im Grund. Erst dann laesst sich beurteilen, wie die Seite mit Blau als Hauptfarbe wirkt. TEST. */ /* DIE KOPFZONE MIT DEM OFFENEN ZEICHEN. Die Farben der Zeichnung kommen schon aus .rad-offen; hier steht nur, was die Kopfzone selbst braucht: der gefuellte Knopf in Primary Blue. */ .offen-hero { background: #fff; } .offen-hero .st-btn-p { background: #1D5FD1; border-color: #1D5FD1; color: #fff; } .offen-hero .st-btn-p:hover { background: #1750b3; border-color: #1750b3; } /* DIE KOPFZONE IN PETROL. Der gefuellte Knopf traegt #0E7490 und nicht den helleren Ton der Scheibe: ein Knopf ist Text auf Flaeche und braucht die Variante, die auf Weiss mit weisser Schrift traegt. */ .petrol-hero { background: #F7F9FC; } .petrol-hero .st-eyebrow { color: #0E7490; } .petrol-hero .st-btn-p { background: #0E7490; border-color: #0E7490; color: #fff; } .petrol-hero .st-btn-p:hover { background: #0b5f77; border-color: #0b5f77; } .blau-hero .st-eyebrow { color: #1C6FE6; } .blau-hero .st-btn-p { background: #1C6FE6; border-color: #1C6FE6; color: #fff; } .blau-hero .st-btn-p:hover { background: #1560cc; border-color: #1560cc; } .blau-hero .hg-strahl { stroke: #1C6FE6; } .blau-hero .hg-k1 { stop-color: #1C6FE6; stop-opacity: .1; } .blau-hero .hg-k0 { stop-color: #1C6FE6; } .blau-hero .hg-blip { fill: #1C6FE6; fill-opacity: .6; } /* Scheibe in #1D5FD1 — tiefer und gesaettigter als das BERNCON-Blau #1C6FE6, auf Zuruf. Alles darauf weiss, aus demselben Grund wie bei der roten Scheibe: auf einer gesaettigten Flaeche traegt kein zweiter Farbton. TEST. */ .rad-koenig .rad-feld { fill: #1D5FD1; } .rad-koenig .rad-ring, .rad-koenig .rad-kreuz { stroke: rgba(255,255,255,.34); } .rad-koenig .rad-s0 { stop-color: #fff; stop-opacity: 0; } .rad-koenig .rad-s1 { stop-color: #fff; stop-opacity: .42; } .rad-koenig .rad-strahl { stroke: #fff; opacity: .95; } .rad-koenig .rad-blip { fill: #fff; } .rad-koenig .rad-blip-still { fill: rgba(255,255,255,.45); } /* ===== DIE REDUZIERTE MARKENPALETTE ===== Primary / Radar Blue #1D5FD1 · Deep Navy #081A33 · Swiss Accent #D52B1E · Off White #F7F9FC · Light Blue #EAF2FD · Muted #5E6B7E. Alle sechs Rollen kommen im Bild vor, und jede tut GENAU eine Sache: der Grund ist Off White, die Scheibe Deep Navy, die Ringe Light Blue, der Strahl Primary — und die FUNDE tragen den Swiss Accent. Das ist die interessanteste Zuordnung der ganzen Palette: der Radar sucht in Blau, und was er findet, ist rot. Ein Bild, zwei Farben, klare Aufgabenteilung. TEST. */ .rad-marke { background: #F7F9FC; } .rad-marke .rad-feld { fill: #081A33; } .rad-marke .rad-ring, .rad-marke .rad-kreuz { stroke: rgba(234,242,253,.18); } .rad-marke .rad-s0 { stop-color: #1D5FD1; stop-opacity: 0; } .rad-marke .rad-s1 { stop-color: #1D5FD1; stop-opacity: .6; } .rad-marke .rad-strahl { stroke: #1D5FD1; opacity: 1; } .rad-marke .rad-blip { fill: #D52B1E; } .rad-marke .rad-blip-still { fill: rgba(234,242,253,.35); } .rad-marke .st-meth-h { color: #081A33; } .rad-marke .st-sub, .rad-marke .rad-note { color: #5E6B7E; } .rad-marke .st-eyebrow { color: #1D5FD1; } .rad-marke .rad-tag { background: #EAF2FD; border-color: #cfe0f8; color: #081A33; } /* ZWEITE FASSUNG: die Beschriftung traegt DIESELBE Farbe wie ihr Punkt. In der ersten Fassung ist der Fund rot und seine Beschriftung blaugrau — das Auge muss die Zuordnung ueber die Naehe herstellen, und bei vier Paaren in einem Kreis ist das Arbeit. Rot umrandet und rot beschriftet gehoeren Punkt und Wort sichtbar zusammen. Der Grund bleibt hell: gefuellt waeren vier rote Klumpen im Bild und der Fund selbst ginge darin unter. */ .rad-marke-rot .rad-tag { background: #fff; border-color: #D52B1E; color: #D52B1E; font-weight: 650; } /* ===== DAS OFFENE RADARZEICHEN ===== Die Fassung, die zum Logosystem gehoert: KEIN gefuellter Kreis. Ringe und Strahl tragen Primary Blue, der Mittelpunkt Deep Navy, der Fund Swiss Red. Damit ist die Grafik auf der Startseite dasselbe Zeichen wie die Marke, nur groesser — und der Besucher verbindet beides ohne Erklaerung. OHNE FLAECHE HEISST: die Ringe muessen kraeftiger sein als bei der dunklen Scheibe. Dort trennt der Grund die Zeichnung vom Rest der Seite; hier steht sie nackt auf Weiss, und was zu blass ist, wirkt wie ein Fehler. */ /* Die offene Fassung hat gar keine Flaeche: beide Stufen durchsichtig. */ /* DUENNER als zuerst (Ringe 1.6, Strahl 2.4): auf Zuruf. Die Zeichnung steht in einem viewBox von 200 Einheiten und wird auf rund 275 Pixel gezogen — eine Einheit ist also gut anderthalb Pixel, und was hier nach wenig aussieht, ist auf dem Schirm eine deutliche Linie. */ /* NOCH DUENNER, zweiter Schritt. Bei 0.7 Einheiten liegt die Linie auf einem 275 Pixel breiten Bild bei knapp einem Pixel — das ist die Grenze: darunter verschwindet sie auf Bildschirmen ohne doppelte Punktdichte ganz, und was auf dem Entwicklungsgeraet fein aussieht, ist beim Besucher weg. */ /* 0.5 statt 0.7 — unter einem Pixel. Damit die Ringe dabei nicht blass werden, steigt gleichzeitig die Deckkraft von .55 auf .72: eine Linie unter einem Pixel wird vom Kantenglaetter auf mehrere Pixel verteilt und verliert dabei Farbe. Duenner UND gleich hell geht nur so. Weiter runter waere unehrlich — die Linie stuende dann nur noch auf Geraeten mit doppelter Punktdichte. */ /* 0.35 — auf ausdruecklichen Wunsch unter die Grenze, die zwei Absaetze weiter oben steht. Auf dem Bild sind das rund 0,5 Pixel: die Linie existiert dann nur noch als Kantenglaettung, und die Deckkraft steht deshalb auf .85, damit ueberhaupt Farbe uebrig bleibt. Auf einem Bildschirm ohne doppelte Punktdichte kann sie stellenweise ausfallen. Wer sie zarter WIRKEN lassen will, ohne das zu riskieren, macht die Zeichnung groesser statt die Linie duenner — bei doppeltem Durchmesser traegt dieselbe Staerke optisch halb so viel. */ .rad-offen .rad-ring { stroke: #1D5FD1; stroke-opacity: .85; stroke-width: .35; } .rad-offen .rad-kreuz { stroke: #1D5FD1; stroke-opacity: .16; stroke-width: .6; } .rad-offen .rad-s0 { stop-color: #1D5FD1; stop-opacity: 0; } .rad-offen .rad-s1 { stop-color: #1D5FD1; stop-opacity: .16; } .rad-offen .rad-strahl { stroke: #1D5FD1; stroke-width: 1.1; opacity: 1; } .rad-offen .rad-blip { fill: #D52B1E; } .rad-offen .rad-blip-still { fill: #1D5FD1; fill-opacity: .3; } .rad-offen .st-eyebrow { color: #1D5FD1; } .rad-offen .st-meth-h { color: #081A33; } .rad-offen .st-sub, .rad-offen .rad-note { color: #5E6B7E; } /* BESCHRIFTUNGEN NEUTRAL, nicht rot. In dieser Fassung ist Rot dem FUND vorbehalten — dem Punkt. Traegt die Beschriftung dieselbe Farbe, gibt es plötzlich acht rote Dinge im Bild statt vier, und die Ausschliesslichkeit, die Rot hier bedeutet, ist dahin. Der Kasten ist ein Kasten, der Fund ist rot. */ .rad-offen .rad-tag { background: #fff; border-color: #D8E1EF; color: #081A33; } /* Der Mittelpunkt gehoert zum Zeichen und nicht zur Zeichnung — er steht deshalb hier und nicht in radarMuster(). */ .rad-offen .rad-mitte { fill: #081A33; } /* ===== PETROL ALS HAUPTFARBE ===== Derselbe Aufbau wie die Markenpalette, nur steht Petrol an der Stelle des Blaus: Grund Off White, Scheibe ein tiefes Petrolnavy, Ringe hell, Strahl Petrol — und die Funde weiter im Schweizer Rot. ZWEI TOENE PETROL, nicht einer: #0E7490 ist als Textfarbe auf Weiss richtig (rund 5,2:1), auf der dunklen Scheibe aber zu dunkel zum Leuchten. Dort traegt #22A5C4. Genau dieselbe Trennung wie zwischen --accent hell und dunkel im uebrigen Farbschema. */ .rad-petrol { background: #F7F9FC; } .rad-petrol .rad-feld { fill: #062A33; } .rad-petrol .rad-ring, .rad-petrol .rad-kreuz { stroke: rgba(224,247,252,.18); } .rad-petrol .rad-s0 { stop-color: #22A5C4; stop-opacity: 0; } .rad-petrol .rad-s1 { stop-color: #22A5C4; stop-opacity: .8; } .rad-petrol .rad-strahl { stroke: #22A5C4; opacity: 1; } .rad-petrol .rad-blip { fill: #D52B1E; } .rad-petrol .rad-blip-still { fill: rgba(224,247,252,.35); } .rad-petrol .st-meth-h { color: #08323D; } .rad-petrol .st-sub, .rad-petrol .rad-note { color: #5E6B7E; } .rad-petrol .st-eyebrow { color: #0E7490; } .rad-petrol .rad-tag { background: #fff; border-color: #D52B1E; color: #D52B1E; font-weight: 650; } /* ===== FARBPROBEN: vier eigene Paletten ===== TIEFSEE ist meine beste blaue Fassung und arbeitet mit ZWEI Blautoenen statt einem: der Keil traegt das gesaettigte #2A86F2, die Funde das hellere #6FB2FF. Damit hat das Bild eine Tiefe, die eine einfarbige Fassung nicht hat — der Strahl liegt hinten, die Funde liegen vorn. Die drei uebrigen sind FREI GEWAEHLT, ohne Ruecksicht auf dieses Projekt: PHOSPHOR ist die buchstaeblich richtige Radarfarbe (langnachleuchtende Leuchtstoffe waren gruen), BERNSTEIN die Farbe der spaeteren Schiffsradare, EIS die heutige Instrumentenfarbe. Jede steht auf ihrem eigenen, sehr dunklen Grund — eine Leuchtfarbe braucht Dunkelheit, sonst ist sie nur bunt. TEST, faellt mit den Abschnitten weg. */ .rad-tiefsee .rad-feld { fill: #0A1B33; } .rad-tiefsee .rad-ring, .rad-tiefsee .rad-kreuz { stroke: rgba(255,255,255,.14); } .rad-tiefsee .rad-s0 { stop-color: #2A86F2; stop-opacity: 0; } .rad-tiefsee .rad-s1 { stop-color: #2A86F2; stop-opacity: .8; } .rad-tiefsee .rad-strahl { stroke: #2A86F2; opacity: 1; } .rad-tiefsee .rad-blip { fill: #6FB2FF; } .rad-tiefsee .rad-blip-still { fill: rgba(143,199,255,.4); } /* WER BEWEGUNG ABGESTELLT HAT, bekommt dasselbe Bild ohne Bewegung: der Strahl steht schraeg, alle Punkte und Beschriftungen stehen sichtbar da. Nicht «Animation aus» allein — die Aufdeckbilder beginnen bei Deckkraft null, und ohne das opacity: 1 daneben waere der Kreis leer. */ @media (prefers-reduced-motion: reduce) { .rad-dreher { animation: none; transform: rotate(-35deg); } .rad-blip, .rad-tag { animation: none; opacity: 1; } } .st-meth { align-items: center; gap: 40px; } .st-meth-h { margin: 9px 0 12px; font-size: clamp(23px, 2.5vw, 32px); font-weight: 690; letter-spacing: -.038em; line-height: 1.12; } .st-meth-karten { gap: 12px; } /* -------------------------------------------------------------- Schmalere Fenster */ @media (max-width: 1080px) { .st-kpi-grid { grid-template-columns: repeat(3, 1fr); } .st-g4 { grid-template-columns: repeat(2, 1fr); } .st-arts { grid-template-columns: 1fr 1fr; } .st-arts > .st-art:first-child { grid-column: span 2; } } @media (max-width: 900px) { .st-main { --st-luft: 52px; } .st-hero { padding: 34px 0 30px; } .st-hero-grid { grid-template-columns: 1fr; gap: 26px; } .st-g3, .st-g2, .st-meth { grid-template-columns: 1fr; } /* SCHMAL: die Beschriftungen stehen nicht mehr am Punkt, sondern als Liste unter dem Kreis. Am Punkt haetten sie unter 560 Pixeln keinen Platz mehr — sie ragten aus dem Bild oder lagen uebereinander. Der Punkt im Kreis bleibt, die Zuordnung geht verloren; das ist der Preis und er ist kleiner als eine zerfallene Grafik. */ .st-radar { gap: 24px; } /* Die Huelle gibt ihr festes Seitenverhaeltnis ab, sonst stuende die Liste INNERHALB des Quadrats und laege ueber dem Kreis. Das SVG behaelt seine eigene Form: ein viewBox rechnet sich seine Hoehe aus der Breite selbst. */ .rad-scope { aspect-ratio: auto; } .rad-svg { height: auto; } /* DIE PILLEN BLEIBEN AN IHREM PUNKT, auch auf dem Telefon (auf Zuruf vom 26. August 2026). Hier stand eine Liste unter der Zeichnung: die Pillen wanderten aus dem Bild an den Fuss, und damit war nicht mehr zu sehen, WELCHER Punkt was bedeutet — eine Beschriftung ohne ihren Ort ist eine Aufzaehlung von vier Woertern. KLEINER UND ENGER, weil der Kreis hier rund 362 statt 420 Pixel breit ist: 10.5px Schrift und schmaleres Polster machen aus 100 Pixeln Pille etwa 74. UND DIE RECHTE HAELFTE NACH INNEN. Eine Pille am Punkt bei 75 % hat nach aussen 25 % von 362 Pixeln, also 90 — zu wenig. Nach innen hat sie 271. Die Klasse dafuer kommt aus dem Generator und aus x, damit sie mitwandert, wenn ein Punkt verschoben wird. */ .rad-tag { font-size: 10.5px; padding: 2px 7px; max-width: 52%; } .rad-tag-rechts { left: auto; right: calc(100% - var(--x) + 3%); } .st-meth { gap: 22px; } .st-meth-karten { grid-template-columns: repeat(2, 1fr); } /* Die Kopfzeile bricht: ein Knopf, der neben einer zweizeiligen Ueberschrift klebt, quetscht beides. */ .st-kopf, .st-head { flex-direction: column; align-items: flex-start; gap: 14px; } } @media (max-width: 620px) { .st-kpi-grid { grid-template-columns: repeat(2, 1fr); } .st-g4, .st-arts { grid-template-columns: 1fr; } .st-arts > .st-art:first-child { grid-column: auto; } .st-meth-karten { grid-template-columns: 1fr; } .st-suche { flex-direction: column; padding: 9px; } .st-suche button { width: 100%; padding: 12px 18px; } .st-aside { padding: 20px; } .st-bar { width: 74px; } } /* Auf der Startseite stehen jetzt ZWEI Pillen in der Kopfleiste — Vergleich und Blog. Vorher war es eine, und eine braucht keinen Abstand. */ .site-nav-start { display: flex; align-items: center; gap: 7px; } /* ---------------------------------------------------------- VERGLEICHSSEITE Titel und Vorspann. Der Abschnitt darunter traegt class="start" und damit dessen Regeln; nur der Kopf ist neu, weil die alte Startseite hier ihre h1 und ihren Vorspann NICHT mitbringt: dort war der Vorspann der Ort mit dem Ausloeser der roten Schweiz-Leiste, und der gehoert auf die Startseite. */ /* .vg-h1 und .vg-lead sind entfallen: die Vergleichsseite benutzt die gemeinsame Kopfvorlage .skopf-* am Dateiende. */ /* Beschriftung einer Kachelreihe. Sie ersetzt die Marke BEREICH/BRANCHE auf jeder einzelnen Karte — dieselbe Auskunft, zweimal statt achtmal. */ .st-reihe { margin: 0 0 9px; font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); } .st-g4 + .st-reihe { margin-top: 26px; } /* ------------------------------------------- Die acht Kacheln des Abschnitts ZWEI ZEILEN TEXT AUF ALLEN ACHT. Die Mindesthoehe fuellt die kurzen Texte auf zwei Zeilen auf; die Obergrenze in build.js (KACHEL_MAX) verhindert eine dritte. Nur beides zusammen macht die Reihe ruhig — eine Kachel, die eine Zeile hoeher ist als ihre Nachbarn, zieht den Blick auf sich, ohne etwas zu sagen. */ .st-kachel { position: relative; } .st-kachel > h3 { padding-right: 46px; } /* GENAU ZWEI ZEILEN: die Mindesthoehe fuellt kurze Texte auf, die Klammer verhindert eine dritte. Die Klammer ist der Guertel, KACHEL_MAX in build.js der Hosentraeger — dort bricht der Bau ab, bevor hier etwas abgeschnitten wuerde. Ohne beides stand im Bild eine von acht Karten eine Zeile hoeher. */ .st-kachel > p { min-height: calc(2 * 1.6em); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Die Bestandszahl als Pille oben rechts. Nackt und ohne Einheit, wie im Kachelgitter der Vergleichsseite: eine Zahl neben einem Kategorienamen heisst auf dieser Website immer der Bestand. */ .st-kachel-n { position: absolute; top: 13px; right: 13px; min-width: 26px; padding: 3px 8px; border-radius: 999px; text-align: center; /* NICHT MEHR ROT. Sie stand in der Akzentfarbe auf hellrotem Grund — auf acht Kacheln nebeneinander waren das acht rote Punkte, und Rot heisst auf dieser Website «von Ihnen gewaehlt» oder «Schweiz». Eine Bestandszahl ist keins von beiden. Jetzt gedaempft auf der Flaeche, die die Karte schon hat: die Zahl bleibt lesbar und tritt zurueck hinter den Namen, um den es auf der Kachel geht. */ background: var(--surface-2); border: 1px solid var(--line); color: var(--muted); font-size: 12.5px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; } .st-link:hover .st-kachel-n, .st-link:focus-visible .st-kachel-n { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } /* HIER STAND DIE MINIATUR DER VERGLEICHSTABELLE — ein echtes table mit drei Loesungen und vier Kriterien, dazu Fliesstext und ein roter Knopf. Sie ist am 23. August 2026 der reinen Produktabbildung gewichen: rechts in der Kopfzone steht keine Schrift mehr. Mit ihr entfallen .st-mini-tab, .st-a-bild und .st-a-k. */ /* Die Tabellenzeichnung in der Kopfkarte. Dieselbe wie im Absprungband der Beitraege (tabellenBild()) und darum ohne eigene Farben: die s-*-Klassen sind fuer dunklen Grund geschrieben, und die Kopfkarte hat denselben. */ /* ----------------------------------------------- DIE FUENF MUSTERBETRIEBE ZWEIGETEILT MIT AUSWAHL: links die fuenf Namen, rechts die Angaben zum gewaehlten. Reines CSS ueber radio und :checked — dasselbe Verfahren, das die Vergleichstabelle fuer ihre Auswahl benutzt. WARUM DAS OHNE JAVASCRIPT WICHTIG IST: alle fuenf Felder stehen im Quelltext und sind ausgeliefert, sichtbar ist eines. Eine Suchmaschine und eine Antwortmaschine lesen damit weiter alle fuenf. Eine Loesung, die den zweiten Fall erst auf Klick nachlaedt, waere fuer sie eine Seite mit einem Fall. Die Radiofelder liegen VOR beiden Spalten und sind nicht display:none, sondern aus dem Bild geschoben: ein Feld mit display:none faellt aus der Tabulatorreihenfolge, und dann ist die Auswahl ohne Maus nicht erreichbar. */ /* ZWEI GETRENNTE ELEMENTE UND NICHT EIN KASTEN MIT TRENNLINIE. Bis zum 23. August 2026 lagen Liste und Beschreibung in EINER Umrandung, und das war sichtbar falsch: das Raster streckt beide Spalten auf dieselbe Hoehe, die Beschreibung ist rund doppelt so hoch wie fuenf Namen, und unter «Etablierte AG» stand darum eine leere weisse Flaeche von ueber 300 Pixeln. Der Kasten sah aus wie ein halb gefuellter Kasten — weil er einer war. align-items: start ist der ganze Trick: jede der beiden Karten ist so hoch wie ihr Inhalt. Die Liste hoert nach dem fuenften Namen auf, und der Abstand dazwischen sagt, dass es zwei Dinge sind: eine Auswahl und das Gewaehlte. */ /* position: relative IST HIER KEINE ZIERDE, SONDERN DER BEZUGSRAHMEN DER FUENF RADIOFELDER — und ohne sie war die Seite nach einem Klick auf einen Musterbetrieb kaputt. Der Fehler ist am 23. August 2026 gemessen und nachgestellt worden, und die Kette ist lang, aber jeder Schritt ist zwingend: 1. Die Felder tragen «position: absolute», damit sie keinen Platz brauchen (im Raster waeren sie sonst Rasterfelder und zerstoerten die zwei Spalten). Sie sind NICHT display:none, weil sie sonst aus der Tabulatorreihenfolge fielen und die Auswahl ohne Maus unerreichbar waere. 2. Ein absolut gesetztes Element bezieht sich auf den naechsten POSITIONIERTEN Vorfahren. Es gab keinen — nicht .st-mb, nicht .wrap, nicht main, nicht .scroll. Der Bezugsrahmen war damit das Wurzelrechteck, also das Dokument. 3. Ihre statische Lage liegt aber rund 1850 Pixel weiter unten, im Abschnitt der Musterbetriebe. Gemessen im Fenster des Betreibers: das html-Element war 1115 Pixel hoch und hatte einen scrollHeight von 1854 — die Felder ragten unten aus dem Dokument heraus und machten es rollbar. 4. body traegt «overflow: hidden». Das nimmt dem Dokument die Bildlaufleiste, aber NICHT die Faehigkeit, gerollt zu werden: ein Programm kann es weiter rollen, ein Mensch kann es nicht zuruecknehmen. 5. Ein Klick auf eine Beschriftung setzt den Fokus auf das zugehoerige Feld, und der Browser rollt ein fokussiertes Element ins Bild. Er rollte also das DOKUMENT um rund 740 Pixel — alles verschob sich nach oben, und weil es dort keine Bildlaufleiste gibt, kam niemand zurueck. Im Nachstellen war das Bild danach vollstaendig leer. Der Bezugsrahmen behebt die ganze Kette an ihrem ersten Glied: die Felder liegen jetzt IN .st-mb, das Dokument bleibt so hoch wie das Fenster, und der Fokus rollt hoechstens den Bereich .scroll an die richtige Stelle. top/left ausdruecklich auf 0, damit es nicht von der statischen Lage abhaengt. WER EIN VERSTECKTES, FOKUSSIERBARES BEDIENELEMENT EINBAUT, braucht denselben Bezugsrahmen. Die zwei anderen Stellen mit demselben Griff sind geprueft: .vh liegt in .cat-card (position: relative), und .sr-only kommt in der Ausgabe ueberhaupt nicht vor. */ /* LINKS TEXT, RECHTS WAEHLER. Die Textspalte etwas breiter als die Tafel: sie traegt zwei Absaetze Lesetext, der Waehler eine Liste und eine Definition. Unter 900px stehen beide untereinander — der Text zuerst, weil er erklaert, was der Waehler zeigt. */ /* .st-vp ist nach dem Umbau vom 25.08.2026 nur noch die Huelle: sie traegt die Radiofelder und darunter das Raster. Das Zweispaltige steckt in .st-mb-raster — sonst waeren die Felder Rasterkinder und nachmen eine Spalte ein. */ .st-mb-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); /* MITTIG, wie im Abschnitt darueber (.st-tabsec). */ gap: 80px; align-items: center; } /* BLOCKSATZ, und darum auch Silbentrennung: ohne sie reisst der Ausgleich in einer schmalen Spalte Loecher zwischen die Woerter. Die Seite traegt lang="de-CH", der Trennalgorithmus greift also. */ .st-vp-text > .st-sub { text-align: justify; hyphens: auto; } .st-vp-text > h2 { margin: 0 0 14px; } /* KEINE ZWEITE BREITENGRENZE. Die Spalte begrenzt die Zeile schon; 56ch liessen darin 80 Bildpunkte unbenutzt, und die addierten sich zum Abstand des Rasters — sichtbar waren dann rund 105 statt der gesetzten 26. */ .st-vp-text > .st-sub + .st-sub { margin-top: 14px; } @media (max-width: 900px) { .st-mb-raster { grid-template-columns: minmax(0, 1fr); gap: 26px; } } /* NAMEN LINKS, DEFINITION RECHTS — ohne Abstand, weil es eine Kachel ist. 13rem tragen den laengsten Namen samt Unterzeile; mehr nimmt der Tafel die Breite, die sie fuer zwei Spalten braucht. */ /* .st-mb TRAEGT SEIT DEM 25.08.2026 NUR NOCH DAS PANEL — die Betriebsliste steht jetzt unter dem Text. Vorher war es ein Zweispalter (13rem Liste plus Tafel); die erste Spalte blieb danach leer und riss die Werte aus dem Kasten heraus. Am Bild gesehen. */ /* .st-mb ist wieder der Zweispalter aus Liste und Tafel — die Liste steht seit dem Zuruf vom 25.08.2026 wieder rechts. */ .st-mb { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 0; align-items: stretch; position: relative; } /* Auf dem Telefon untereinander: 13rem plus Tafel gehen in 390px nicht. Dann sind es wieder zwei Kacheln, jede mit allen vier Rundungen. */ @media (max-width: 620px) { /* .st-mb bleibt: seine Grundregel steht darueber. */ .st-mb { grid-template-columns: minmax(0, 1fr); gap: 12px; } /* Die beiden Rundungen NICHT: .st-mb-liste und .st-mb-panels setzen weiter unten `border-right: 0` und die halbseitigen Rundungen — spaetere Stelle, gleiche Spezifitaet. Untereinander gestellt fehlte den Kacheln damit je die Haelfte ihrer Rundung und der Liste ihr rechter Rand: zwei Kaesten, die aussahen wie ein zerschnittener. Werte im Nachrang. */ } .st-mb-r { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* ------------------------------------------------------------ Links: die Namen */ /* Die Liste ist eine EIGENE Karte. border-right ist entfallen: eine Trennlinie zwischen zwei Karten mit eigenem Rand waere ein dritter Strich an derselben Stelle. overflow: hidden, damit die erste und die letzte Zeile die Rundung der Karte annehmen. */ /* EINE REIHE STATT EINER SPALTE. Im zweigeteilten Abschnitt steht die Liste ueber der Tafel und nicht daneben; als Spalte waere sie fuenf Zeilen hoch und die Tafel begaenne erst darunter. Umbruch erlaubt: bei fuenf Namen sind es je nach Breite eine oder zwei Reihen. */ /* TRENNLINIEN AUS DER FUGE, nicht aus einem Rand am Feld. Mit border-right je Feld hing am Ende einer umgebrochenen Reihe eine Linie im Leeren — sie trennte nichts mehr. Jetzt liegt die Linienfarbe als Grund unter der Reihe und scheint durch die 1px-Fugen: das trennt in beide Richtungen und nur dort, wo wirklich zwei Felder aneinanderstossen. */ /* DIE LISTE HAENGT AN DER TAFEL. Sie war einmal eine eigene Karte mit Abstand daneben und einmal eine Reihe von Pillen darueber; beides ist verworfen. Nun sind es zwei Haelften EINER Kachel: links die Namen, rechts die Definition, und die gemeinsame Kante ist der linke Rand der Tafel. Darum hat die Liste keinen rechten Rand und nur links Rundungen — zwei Raender an derselben Stelle waeren ein doppelter Strich. */ /* DIE AUSWAHLSPALTE IST EINE STUFE DUNKLER ALS DIE SEITE, nicht mehr. Auf --surface-2 unterschied sie sich um zwei Nuancen und sah aus wie ein Rand der Tafel; im Ton der Kopfleiste war sie ein schwarzer Block, der den Abschnitt an sich zog. --line-hard liegt dazwischen: deutlich als Flaeche erkennbar, ohne die Aufmerksamkeit vom Text zu nehmen. Der Ton kommt aus dem Token und folgt damit dem Farbschema. */ .st-mb-liste { display: flex; flex-direction: column; /* HELLER, auf Zuruf: --surface-2 statt --line-hard. Der dunkle Grund kam aus der Zeit, als die Liste ein eigener Kasten neben der Tafel war; heute sind beide EIN Kasten, und dann trennt die Linie und nicht der Ton. Die Auswahl bleibt trotzdem sichtbar: der gewaehlte Eintrag traegt weiss und den Balken in der Akzentfarbe. */ /* EIN ZWISCHENTON, auf Zuruf: --surface-2 war zu hell, --line-hard zu dunkel. color-mix nimmt beide zu gleichen Teilen und braucht dafuer keinen neuen Farbwert — der Ton folgt damit auch im Dunkelmodus. */ background: color-mix(in srgb, var(--surface-2) 55%, var(--line)); border: 1px solid var(--line); border-right: 0; border-radius: var(--r) 0 0 var(--r); overflow: hidden; } .st-mb-name { display: flex; flex-direction: column; gap: 1px; cursor: pointer; padding: 11px 16px; border-bottom: 1px solid var(--line); border-left: 3px solid transparent; } .st-mb-liste > .st-mb-name:last-child { border-bottom: 0; } /* Zeilenhoehe ausdruecklich gesetzt: die geerbte von 1.5 machte aus zwei Zeilen Text 41 Bildpunkte, gebraucht werden 35. */ .st-mb-name b { font-size: 15.5px; font-weight: 650; letter-spacing: -.018em; color: var(--ink-soft); line-height: 1.25; } .st-mb-name span { font-size: 12px; color: var(--muted); line-height: 1.3; } /* Beim Zeigen nur eine Spur heller — der gewaehlte Zustand ist der helle, und zwei gleich helle Zustaende waeren nicht zu unterscheiden. */ .st-mb-name:hover { background: rgba(255, 255, 255, .45); } .st-mb-name:hover b { color: var(--ink); } /* Der gewaehlte Name: roter Streifen, heller Grund. Er hob die Zeile frueher in die Flaeche rechts hinein — die beiden waren ein Kasten. Jetzt sind es zwei, und die Auszeichnung tut nur noch das, was sie sagen soll: DIESER Name gehoert zu der Beschreibung daneben. */ .st-mb-r:nth-of-type(1):checked ~ .st-mb-raster .st-mb-liste > .st-mb-name:nth-child(1), .st-mb-r:nth-of-type(2):checked ~ .st-mb-raster .st-mb-liste > .st-mb-name:nth-child(2), .st-mb-r:nth-of-type(3):checked ~ .st-mb-raster .st-mb-liste > .st-mb-name:nth-child(3), .st-mb-r:nth-of-type(4):checked ~ .st-mb-raster .st-mb-liste > .st-mb-name:nth-child(4), .st-mb-r:nth-of-type(5):checked ~ .st-mb-raster .st-mb-liste > .st-mb-name:nth-child(5) { background: var(--surface); border-left-color: var(--accent); border-bottom-color: var(--line); } .st-mb-r:nth-of-type(1):checked ~ .st-mb-raster .st-mb-liste > .st-mb-name:nth-child(1) b, .st-mb-r:nth-of-type(2):checked ~ .st-mb-raster .st-mb-liste > .st-mb-name:nth-child(2) b, .st-mb-r:nth-of-type(3):checked ~ .st-mb-raster .st-mb-liste > .st-mb-name:nth-child(3) b, .st-mb-r:nth-of-type(4):checked ~ .st-mb-raster .st-mb-liste > .st-mb-name:nth-child(4) b, .st-mb-r:nth-of-type(5):checked ~ .st-mb-raster .st-mb-liste > .st-mb-name:nth-child(5) b { color: var(--ink); } .st-mb-r:nth-of-type(1):checked ~ .st-mb-raster .st-mb-liste > .st-mb-name:nth-child(1) span, .st-mb-r:nth-of-type(2):checked ~ .st-mb-raster .st-mb-liste > .st-mb-name:nth-child(2) span, .st-mb-r:nth-of-type(3):checked ~ .st-mb-raster .st-mb-liste > .st-mb-name:nth-child(3) span, .st-mb-r:nth-of-type(4):checked ~ .st-mb-raster .st-mb-liste > .st-mb-name:nth-child(4) span, .st-mb-r:nth-of-type(5):checked ~ .st-mb-raster .st-mb-liste > .st-mb-name:nth-child(5) span { color: var(--muted); } /* Sichtbarer Fokusring am LABEL, wenn das zugehoerige Feld den Fokus hat — ohne ihn waere die Tastaturbedienung blind. */ .st-mb-r:nth-of-type(1):focus-visible ~ .st-mb-raster .st-mb-liste > .st-mb-name:nth-child(1), .st-mb-r:nth-of-type(2):focus-visible ~ .st-mb-raster .st-mb-liste > .st-mb-name:nth-child(2), .st-mb-r:nth-of-type(3):focus-visible ~ .st-mb-raster .st-mb-liste > .st-mb-name:nth-child(3), .st-mb-r:nth-of-type(4):focus-visible ~ .st-mb-raster .st-mb-liste > .st-mb-name:nth-child(4), .st-mb-r:nth-of-type(5):focus-visible ~ .st-mb-raster .st-mb-liste > .st-mb-name:nth-child(5) { outline: 2px solid var(--accent); outline-offset: -2px; } /* ---------------------------------------------------------- Rechts: die Angaben */ /* Rechts dieselbe Karte wie links, nur mit dem hellen Grund: sie traegt den Inhalt, die Liste nur die Auswahl. */ .st-mb-panels { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 0 var(--r) var(--r) 0; } /* FLACHER GEBAUT (rund 12 Prozent): die Tafel ist hoeher als die Liste und bestimmt damit die Hoehe des ganzen Kastens. Gespart wird an drei Stellen, die man einzeln nicht sieht — Polsterung der Tafel, Zeilenhoehe der Angaben, Abstand unter der Liste. */ .st-mb-p { display: none; padding: 16px 22px; } .st-mb-r:nth-of-type(1):checked ~ .st-mb-raster .st-mb-panels > .st-mb-p:nth-child(1), .st-mb-r:nth-of-type(2):checked ~ .st-mb-raster .st-mb-panels > .st-mb-p:nth-child(2), .st-mb-r:nth-of-type(3):checked ~ .st-mb-raster .st-mb-panels > .st-mb-p:nth-child(3), .st-mb-r:nth-of-type(4):checked ~ .st-mb-raster .st-mb-panels > .st-mb-p:nth-child(4), .st-mb-r:nth-of-type(5):checked ~ .st-mb-raster .st-mb-panels > .st-mb-p:nth-child(5) { display: flex; flex-direction: column; flex: 1; } /* Der Name auch rechts: auf dem Telefon stehen die Spalten untereinander, und dann ist der gewaehlte Name weit weg. */ .st-mb-h { margin: 0 0 10px; font-size: 17px; font-weight: 670; letter-spacing: -.02em; color: var(--ink); } /* DIE DEFINITION ALS LISTE: Bezeichnung links, Wert rechts, eine Zeile je Angabe. Kein Kartengitter — es sind vier bis fuenf Angaben, und ein Raster aus fuenf Kaesten macht aus einer Aufzaehlung eine Anzeige. */ /* DIE BESCHRIFTUNG UEBER DER DEFINITION. Sie war beim Entfernen der Umfangliste mitgegangen — falsch: es gab ZWEI Absaetze mit dieser Klasse, und nur einer ist entfallen. «So ist dieser Betrieb definiert» stand danach als nackter Satz da. Im Bild gesehen. */ .st-mb-def { margin: 0 0 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .st-mb-werte { margin: 0; flex: 1; display: flex; flex-direction: column; } .st-mb-werte > div { display: grid; grid-template-columns: 13rem 1fr; gap: 4px 20px; align-content: center; flex: 1; min-height: 2.4em; padding: 5px 0; border-bottom: 1px solid var(--line); } .st-mb-werte > div:last-child { border-bottom: 0; } .st-mb-werte dt { font-size: 14px; color: var(--ink-soft); line-height: 1.4; } .st-mb-werte dd { margin: 0; font-size: 15px; font-weight: 620; color: var(--ink); line-height: 1.4; font-variant-numeric: tabular-nums; } /* HIER STAND DAS PREISBAND je Fall («Vergleichspreis Buchhaltungs-Abo, CHF 158–350») und daneben «noch nicht erhoben». Entfallen: der Abschnitt erklaert das VERFAHREN und fuehrt keine Preise. Im Bild gewann sonst die Bestandsmeldung — der Blick blieb an der Spanne und am «noch nicht erhoben» haengen, also am Zustand der Erhebung statt an der Sache. */ /* Was ein Vergleichspreis enthaelt: allgemein, in jedem Feld dasselbe, und darum als schlichte Aufzaehlung mit Haken. Sie gilt fuer alle fuenf Betriebe und fuer jede Kategorie gleich — genau das ist der Punkt des Verfahrens. */ /* .st-mb-fuss, .st-mb-def und .st-mb-umf sind mit ihren Texten entfallen — die Begruendungen stehen in build.js. */ @media (max-width: 760px) { /* Untereinander: die Namen als Reihe zum Wischen waere ein zweites Bedienbild. Eine Liste bleibt eine Liste, und der gewaehlte Name steht rechts ohnehin noch einmal. */ /* Uebereinander, und der Abstand des Rasters trennt sie weiter. Die Ersatz-Trennlinie von fruher ist entfallen: beide Karten haben einen Rand. */ .st-mb { grid-template-columns: minmax(0, 1fr); } .st-mb-name { padding: 12px 15px; } .st-mb-p { padding: 17px 16px; } .st-mb-werte { gap: 9px 18px; } } /* ------------------------------------------- Umschalter Hell/Dunkel Oben rechts in der Kopfleiste, nach dem Sprachwaehler. Rund und diskret wie in der Hausvorlage: er ist eine Vorliebe, keine Handlung, und soll den Blick nicht von der Suche wegnehmen. BEIDE ZEICHEN LIEGEN IM QUELLTEXT, sichtbar ist eines. Im Hellfall der Mond (der Klick fuehrt ins Dunkle), im Dunkelfall die Sonne. Ohne diese Regel waere der Knopf bis zum ersten Skriptlauf leer — und mit zwei sichtbaren Zeichen waere er unverstaendlich. */ .head-theme { flex: none; display: grid; place-items: center; cursor: pointer; width: 30px; height: 30px; padding: 0; border-radius: 50%; background: transparent; border: 1px solid var(--bar-line); color: var(--bar-muted); transition: color .14s, border-color .14s, background-color .14s; } .head-theme:hover, .head-theme:focus-visible { color: var(--bar-ink); border-color: var(--bar-muted); background: color-mix(in srgb, var(--bar-ink) 10%, transparent); } .head-theme svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .ht-sonne { display: none; } html[data-theme="dark"] .ht-mond { display: none; } html[data-theme="dark"] .ht-sonne { display: block; } /* ============================================================================ DIE FUENF ZAHLEN UNTER DEM TEXT — GANZ AM ENDE DER DATEI Und das ist kein Zufall: .st-kpi traegt weiter oben padding, Rahmen und Flaeche, und bei GLEICHER Spezifitaet gewinnt die spaetere Regel. Stand dieser Block vor .st-kpi, blieb der Innenabstand von 17 Pixeln stehen und jede Verkleinerung des Aussenabstands war wirkungslos — zweimal probiert, zweimal nichts gesehen. Dieselbe Falle wie beim Blogvorspann und beim Suchfeld. Wer hier etwas verschiebt, prueft die Stellung in der Datei. ============================================================================ */ /* DIE FUENF ZAHLEN UNTER DEM TEXT des Tabellenabschnitts. Anders als im breiten Streifen stehen hier nur rund 500 Pixel zur Verfuegung: zwei Spalten statt fuenf, und die Kacheln tragen keinen eigenen Rahmen mehr — fuenf gerahmte Kaesten unter einem Absatz sind ein Formular, keine Belege. Es bleibt eine Linie oben, die den Block vom Text trennt. */ .st-kpi-inline { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); /* NAEHER AM TEXT, auf Zuruf: 14 statt 26 Pixel Abstand und 14 statt 20 ueber der Linie. Die Zahlen belegen den Absatz darueber und sollen zu ihm gehoeren, nicht als eigener Block darunter stehen. */ /* OHNE TRENNSTRICH und dicht am Absatz, auf Zuruf: die Zahlen belegen den Text darueber und gehoeren zu ihm. Ein Strich dazwischen machte aus dem Beleg einen eigenen Block. */ /* NOCH DICHTER, zweiter Zuruf: 2 Pixel. Weiter geht schlecht — der Absatz darueber traegt selbst eine Zeilenhoehe von 1.6, seine Unterlaenge braucht Platz. Bei 0 stiessen Buchstaben und Zahlen aneinander. */ gap: 4px 22px; margin-top: 4px; } .st-kpi-inline .st-kpi { border: 0; background: none; padding: 0; box-shadow: none; } .st-kpi-inline .st-kpi b { font-size: 24px; } .st-kpi-inline .st-kpi span { font-size: 12.5px; } /* Die hervorgehobene Wendung im Musterbetriebe-Absatz. NUR Gewicht und Tinte, keine Farbe: der Absatz steht in --muted, und ein dunklerer Ton genuegt, um eine Wendung herauszuheben. Die Akzentfarbe waere hier ein Verweis, den es nicht gibt. */ /* NUR HALBFETT, auf Zuruf: 560 statt 650. Der Absatz steht in --muted, die dunklere Tinte allein hebt die Wendung schon heraus — 650 daneben las sich als zweite Ueberschrift im Absatz. */ .st-betont { font-weight: 560; color: var(--ink); } /* BLOCKSATZ IN DEN ZWEISPALTIGEN ABSCHNITTEN, auf Zuruf. Die Musterbetriebe fuehren ihn schon (.st-vp-text); der Tabellenabschnitt bekommt ihn jetzt auch, damit die beiden gleich aussehen. MIT SILBENTRENNUNG, und das ist Pflicht: ohne sie reisst der Ausgleich in einer halben Spalte Loecher zwischen die Woerter. Die Seiten tragen lang="de-CH" und die drei anderen Sprachkennungen, der Trennalgorithmus greift also in allen vier. */ .st-tabsec .st-sub { text-align: justify; hyphens: auto; } /* DIE BEREICHE DER NORMGRUPPEN ALS PILLEN — siehe gruppe() in build.js. Jede fuehrt auf ihre Kategorie. Der Rahmen ist leise: es sind bis zu fuenfundzwanzig nebeneinander, und fuenfundzwanzig kraeftige Marken waeren ein Flickenteppich. */ .bk-grp { margin-top: 22px; } .bk-grp-h { margin: 0 0 9px; font-size: 12.5px; font-weight: 700; color: var(--ink); } .bk-grp-h span { display: inline-block; margin-left: 5px; padding: 1px 7px; font-size: 11.5px; font-weight: 700; color: var(--accent); background: var(--accent-soft); border-radius: 999px; } .bk-pillen { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; } .bk-pillen a { font-size: 12.5px; line-height: 1.3; color: var(--ink-soft); text-decoration: none; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px; } .bk-pillen a:hover { border-color: var(--accent); color: var(--accent); } /* ------------------------------------------------- Blogübersicht: das Raster MEHRERE KARTEN JE ZEILE (25. August 2026, auf Zuruf). Die Liste war eine Spalte: bei sechzehn Beiträgen stand der letzte rund 4000 Pixel unter dem ersten, und wer das dritte Thema suchte, rollte daran vorbei. DIESELBE KARTENFORM WIE IM BAND DER STARTSEITE (.blog-karte) — Fläche, Rand, Radius, geklammerter Anriss. Eine zweite Kartenform für dasselbe Ding wäre ein zweiter Ort, an dem man sie pflegt. Nur die Grade sind eine Stufe grösser: hier ist die Karte der Inhalt der Seite und nicht ein Band am Fuss einer anderen. */ .b-liste.b-raster { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); } .b-raster .b-karte { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 18px; background: var(--surface); border: 1px solid var(--line-hard); border-radius: var(--r); transition: border-color .16s ease, box-shadow .16s ease; } /* Die drei Regeln der einspaltigen Liste treffen im Raster nicht mehr zu: dort trennte eine Haarlinie die Zeilen, und die erste und letzte Karte trugen darum eine Ausnahme. Im Raster trennt der Zwischenraum. */ .b-raster .b-karte:first-child { padding-top: 16px; } .b-raster .b-karte:last-child { border-bottom: 1px solid var(--line-hard); } .b-raster .b-karte:hover { border-color: var(--accent); box-shadow: var(--shadow-lg); } .b-raster .b-karte-kopf { margin: 0; gap: 3px 10px; font-size: 10.5px; } .b-raster .b-karte h2 { margin: 0; max-width: none; font-size: 18px; line-height: 1.22; letter-spacing: -.024em; } /* GEKLAMMERT AUF DREI ZEILEN, damit die Karten einer Reihe gleich hoch anfangen. Der vollständige Anriss steht im Beitrag; hier ist er ein Vorgeschmack und keine Aussage, die abgeschnitten etwas anderes behauptet. */ .b-raster .b-karte-lead { margin: 0; max-width: none; font-size: 14.5px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* OHNE DIESE ZEILE FILTERT DER FILTER NICHTS. `hidden` ist im Browser nur `display: none` mit der schwächsten Gewichtung — die Zeile darüber setzt `display: flex` und gewinnt. Eine versteckte Karte bliebe sichtbar. */ .b-raster .b-karte[hidden] { display: none; } /* --------------------------------------------------- Blogübersicht: Filter Er steht mit `hidden` im Quelltext und wird von blogfilter.js aufgedeckt: ohne Skript keine Bedienelemente, die nichts tun. Darum hier AUCH KEIN `display` auf .b-filter selbst — es würde das `hidden` überstimmen und den Kasten bei abgeschaltetem Skript sichtbar und tot stehen lassen. */ .b-filter { margin: 0 0 16px; padding: 14px 16px 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); } .b-filter:not([hidden]) { display: grid; gap: 10px; } .b-fgruppe { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; } .b-fgruppe-h { margin: 0; min-width: 84px; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--muted); } .b-fchips { display: flex; flex-wrap: wrap; gap: 6px; } .b-fchip { padding: 6px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line-hard); color: var(--ink); font: inherit; font-size: 12.5px; font-weight: 620; letter-spacing: -.005em; cursor: pointer; transition: background .14s ease, border-color .14s ease, color .14s ease; } .b-fchip b { margin-left: 6px; font-weight: 650; color: var(--muted); } .b-fchip:hover { border-color: var(--ink-soft); } /* DER GEWÄHLTE KNOPF trägt die Akzentfläche und nicht die Akzentfarbe als Fläche: Akzent auf Akzentfläche sind gemessene 5.52:1, weisse Schrift auf vollem Akzent wäre lauter als die Karten, die darunter stehen. */ .b-fchip[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); } .b-fchip[aria-pressed="true"] b { color: inherit; opacity: .72; } .b-fchip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .b-fsuche { flex: 1 1 220px; min-width: 0; max-width: 420px; padding: 7px 12px; border-radius: var(--r-s); background: var(--surface); border: 1px solid var(--line-hard); color: var(--ink); font: inherit; font-size: 13.5px; } .b-fsuche::placeholder { color: var(--muted); } .b-fsuche:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .b-filter-zahl { margin: 0; font-size: 12px; letter-spacing: .04em; color: var(--muted); font-weight: 600; } .b-filter-weg { justify-self: start; padding: 0; border: 0; background: none; color: var(--accent); font: inherit; font-size: 12.5px; font-weight: 620; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .b-filter-weg:hover { color: var(--ink); } .b-filter-leer { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-soft); } @media (max-width: 660px) { .b-liste.b-raster { gap: 8px; } .b-raster .b-karte { padding: 14px 15px 15px; } /* «.b-raster .b-karte h2 { font-size: 17px }» stand hier und verlor gegen die 19px derselben Selektorkette 40 Zeilen weiter unten. Wert im Nachrang. */ .b-filter { padding: 12px 13px 11px; } .b-fgruppe-h { min-width: 0; flex: 1 0 100%; } .b-fchip { font-size: 12px; padding: 5px 10px; } } /* ------------------------------------- Blogkarte: Eintrag statt Datenzeile GEAENDERT AM 25. AUGUST 2026. Die Kopfzeile trug Kategorie, Datum und Lesezeit in Versalien mit .07em Laufweite — genau die Form, die auf dieser Website eine Tabellenueberschrift traegt. Jetzt steht oben das Thema, unten eine Standzeile mit Verfasser, Datum, Lesezeit und dem Weg in den Beitrag. KEINE ZWEITE SCHRIFT. Die naheliegende Antwort waere eine Serifenschrift fuer den Titel; --serif ist am 24. August ausdruecklich abgeschafft worden, weil die Website EINE Schrift fuehrt. Gearbeitet wird mit Anordnung und Grad. */ .b-karte-kopf { text-transform: none; letter-spacing: 0; font-size: 12.5px; gap: 6px 10px; align-items: center; } /* DER VERWEIS UEBER DIE GANZE KARTE. Ein Pseudoelement, kein Element — darum ist das keine Verschachtelung von Verweisen, und das Kategorieetikett bleibt daneben ein eigener Verweis. Es muss sich dafuer mit z-index ueber die Flaeche heben; ein Verweis, den eine durchsichtige Schicht verschluckt, ist schlimmer als keiner. */ .b-karte-lnk::after { content: ""; position: absolute; inset: 0; } .b-karte-kat { position: relative; z-index: 1; font-weight: 650; letter-spacing: -.005em; } .b-karte-fuss { /* auto schiebt die Zeile an den Fuss der Karte: in einer Reihe stehen die Standzeilen damit auf einer Linie, auch wenn die Titel zwei oder drei Zeilen brauchen. */ margin: auto 0 0; padding-top: 12px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 12px; color: var(--muted); } /* Mittelpunkte zwischen den Angaben, nicht vor der ersten. */ .b-karte-fuss > span + time::before, .b-karte-fuss > time + span::before { content: '·'; margin-right: 8px; color: var(--line-hard); } .b-raster .b-karte h2 { font-size: 19px; } /* Der Titel faerbt sich, wenn die MAUS AUF DER KARTE steht und nicht erst auf dem Titel: die ganze Flaeche ist der Verweis, also muss die ganze Flaeche sagen, dass sie einer ist. Den Rahmen faerbt .b-raster .b-karte :hover schon. */ .b-karte:hover .b-karte-lnk { color: var(--accent); } @media (max-width: 660px) { .b-karte-fuss { font-size: 11.5px; padding-top: 10px; } .b-raster .b-karte h2 { font-size: 17.5px; } } /* ------------------------------------ Statistikabschnitt der Startseite ZURUECK AM 25. AUGUST 2026, auf Zuruf, und weiter NICHT im Livegang: der Abschnitt entsteht nur mit KMU_ENTWURF=1. Die Regeln standen bis zum 23. August hier und sind aus dem Loeschcommit zurueckgeholt, damit sie nicht zum zweiten Mal geschrieben werden und dabei abweichen. Die Balken benutzen .bk-* — dieselbe Zeichnung wie im Marktbefund. */ .st-md { display: grid; grid-template-columns: 1.35fr 1fr; gap: 18px; margin-top: 26px; align-items: start; } .st-md-panel { padding: 22px 24px 24px; } .st-md-panel h3 { margin: 0; font-size: 17px; font-weight: 660; letter-spacing: -.02em; } .st-md-sub { margin: 5px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); } .st-md-dl { margin: 18px 0 0; font-size: 13px; } .st-md-dl a { color: inherit; font-weight: 600; } .st-md-dl a:hover { color: var(--accent); } .st-md-strip-h { margin: 26px 0 0; padding-top: 20px; border-top: 1px solid var(--line); font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); } .st-md-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 14px; } .st-md-stat b { display: block; font-size: 30px; font-weight: 660; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; } .st-md-stat span { display: block; margin-top: 4px; font-size: 13px; line-height: 1.45; color: var(--muted); } /* IM BILD GEFUNDEN: diese vier Regeln standen im Original in einer Medienabfrage und sind beim Zurueckholen ohne sie angehaengt worden. Sie galten damit auf jeder Breite — die drei Kennzahlen standen untereinander statt nebeneinander und die zwei Tafeln in einer Spalte. Keine Pruefung haette das gemeldet; es steht im Bild und nur dort. 900 und nicht 660: drei 30px-Zahlen neben ihren Beschriftungen brauchen je rund 110 Pixel, und die Beschriftungen sind Saetze und keine Woerter. */ @media (max-width: 900px) { .st-md { grid-template-columns: minmax(0, 1fr); } .st-md-panel { padding: 18px 17px 20px; } .st-md-strip { grid-template-columns: minmax(0, 1fr); gap: 14px; } .st-md-stat b { font-size: 26px; } } /* -------------------------------------- Marktabschnitt: drei Nachbesserungen Alle drei stehen im Bild und in keiner Rechnung. */ /* «10 von 40» brach in zwei Zeilen — die Spalte ist fuer «27,4 %» gebaut. */ .ent-num { white-space: nowrap; } /* Der Stand neben dem gemessenen Preis: Vorbehalt und nicht Zahl, also klein und ohne die Tabellenziffern des Werts darueber. */ .ent-cval .ent-stand { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; font-variant-numeric: normal; color: var(--bar-muted); } /* Die Bildunterschrift zur gestrichelten Schiene. Sie traegt die Aussage des Diagramms und darf nicht wie eine Fussnote aussehen. */ .ent-plan { margin-top: 14px; max-width: 62ch; } /* ------------------------- Marktabschnitt: EINE SCHRIFT, auch hier Der Entwurf trug die Zahlen in einer Schreibmaschinenschrift — Teil des Aussehens der Vorlage, und solange er nie live ging, war das seine Sache. Jetzt geht er live, und damit gilt, was am 24. August fuer --serif entschieden wurde: die Website fuehrt EINE Schrift. Was die Monoschrift funktional beitrug, war die gleiche Ziffernbreite; die leistet font-variant-numeric: tabular-nums in jeder Schrift. «10 von 40» und «Stand Aug. 2026» sind ausserdem SAETZE und keine Zahlen. In einer Schreibmaschinenschrift gesetzt lasen sie sich wie Rohdaten. */ .ent-kicker, .ent-cval, .ent-num, .ent-stat b { font-family: "Inter", "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; font-variant-numeric: tabular-nums; } /* Die dritte Spalte war auf «27,4 %» gemessen. «10 von 40» braucht mehr, und mit auto nimmt sie, was der laengste Wert der Tafel verlangt. */ .ent-bar { grid-template-columns: 110px 1fr auto; } /* --------------------------- Marktabschnitt: die Kennzahlen als rechte Tafel Sie standen als Streifen unter dem Ganzen; rechts standen die Balken der Abdeckungsbreite, und die ist auf Zuruf entfallen. Zwei mal zwei statt vier nebeneinander: in einer halben Breite waeren vier Felder je 130 Pixel breit, und «Datenstandort Schweiz» braucht mehr. */ .ent-strip-tafel { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* Die Felder tragen in der Tafel keinen eigenen Rahmen mehr — sie liegen schon in einem. Ein Kasten im Kasten ist zweimal dieselbe Linie. */ .ent-strip-tafel .ent-stat { background: none; border: 0; padding: 0; } .ent-panel-zahlen { display: flex; flex-direction: column; } /* Die zwei Reihen ueber die Hoehe verteilt: die Tafel ist so hoch wie die Zeichnung daneben, und vier Felder oben liessen die untere Haelfte leer. */ .ent-panel-zahlen .ent-strip-tafel { flex: 1; align-content: space-evenly; } .ent-panel-zahlen .ent-dl { margin-top: auto; padding-top: 18px; } @media (max-width: 700px) { .ent-strip-tafel { grid-template-columns: minmax(0, 1fr); gap: 16px; } } /* ------------------------------------------- Preisindex: Farben aus dem Blatt Die Zeichnung stand mit Farben im Attribut und war damit an den dunklen Grund gebunden. Ueber Klassen traegt EINE Geometrie beide Faelle. */ .mk-svg { display: block; width: 100%; height: auto; } .mk-basis { stroke: var(--line-hard); stroke-width: 1; } /* Das Raster leiser als die Basislinie: es gibt dem Verlauf einen Raum und ist keine Skala. Eine gleich starke Linie waere die fuenfte Grundlinie. */ .mk-raster { stroke: var(--line); stroke-width: 1; } .mk-linie { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-dasharray: 7 6; stroke-linejoin: round; stroke-linecap: round; } .mk-punkt { fill: var(--accent); stroke: var(--surface); stroke-width: 3; } .mk-s0 { stop-color: var(--accent); stop-opacity: .2; } .mk-s1 { stop-color: var(--accent); stop-opacity: 0; } /* Die dunkle Fassung behaelt die Toene der Vorlage: ihr Grund ist in beiden Farbschemata dasselbe Nachtblau, also sind feste Werte hier richtig. */ .ent-sec .mk-basis { stroke: #3C4A75; } .ent-sec .mk-raster { stroke: #1B2544; } .ent-sec .mk-linie { stroke: #6A7CFF; } .ent-sec .mk-punkt { fill: #6A7CFF; stroke: #0C1220; } .ent-sec .mk-s0 { stop-color: #2545E8; stop-opacity: .28; } .ent-sec .mk-s1 { stop-color: #2545E8; stop-opacity: 0; } /* ---------------------------- Marktabschnitt in der Hausform: Bild und Text Links das Bild, rechts der Text — 1.35 zu 1, damit die Zeichnung fuehrt und die Textspalte nicht unter 34 Zeichen faellt. */ .mkh-grid { display: grid; gap: 30px 40px; align-items: start; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); margin-top: 26px; } .mkh-bild { margin: 0; } .mkh-bild figcaption { margin: 14px 0 0; font-size: 13px; line-height: 1.55; color: var(--muted); max-width: 62ch; } .mkh-text h3 { margin: 0; font-size: 17px; font-weight: 660; letter-spacing: -.02em; color: var(--ink); } .mkh-text > p { margin: 6px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); } .mkh-zahlen { margin: 20px 0 0; display: grid; gap: 14px 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); } .mkh-zahlen dt { font-size: 12px; line-height: 1.35; color: var(--muted); font-weight: 600; } .mkh-zahlen dd { margin: 2px 0 0; font-size: 24px; font-weight: 660; letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; } .mkh-dl { margin: 22px 0 0; font-size: 13px; } .mkh-dl a { color: var(--accent); text-decoration: none; font-weight: 620; } .mkh-dl a:hover { text-decoration: underline; } @media (max-width: 900px) { .mkh-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; } } /* ------------- Preisindex in der Huelle des Vergleichspreis-Abschnitts .st-vp und .st-mb-raster bringen die zwei Spalten mit; hier braucht nur die rechte Spalte eine Regel, weil dort statt der Betriebsliste ein Bild steht. Mittig zur Textspalte, weil das Bild flacher ist als der Text lang. */ .st-vp-bild { margin: 0; align-self: center; } .st-vp-bild figcaption { margin: 12px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); } .st-vp-mehr { margin: 10px 0 0; font-size: 13px; } .st-vp-mehr a { color: var(--accent); text-decoration: none; font-weight: 620; } .st-vp-mehr a:hover { text-decoration: underline; } /* DIE SPALTEN GLEICH BREIT in dieser Fassung. Das Raster kommt aus dem Musterbetriebs-Abschnitt und gibt der rechten Spalte 1.2 — dort steht eine Liste mit fuenf Namen und ein Kasten daneben. Hier steht rechts eine flache Zeichnung und links vier Absaetze; im Bild war die Textspalte 330 Pixel breit und das Bild 600. */ /* BILD LINKS, TEXT RECHTS — seit dem Tausch der Reihenfolge im Quelltext ist die erste Spalte das Bild. Die Textspalte bekommt das grosse Mass: die Zeichnung ist flach, der Text sind Titel und ein Absatz. */ .st-vp:has(.st-vp-bild) .st-mb-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } /* Das Bild mittig zur Textspalte, weil es flacher ist. */ .st-vp-bild { align-self: center; } /* Titel und Unterzeile ueber dem Bild in der Vergleichspreis-Huelle. */ /* Der Kopf DER KARTE, nicht ein Kopf ueber ihr: Titel und Unterzeile sitzen im selben Rahmen wie die Zeichnung, und die Haarlinie darunter trennt Beschriftung von Bild, ohne sie zu loesen. */ /* OHNE GRAUE FUELLUNG, auf Zuruf: die Karte haelt Titel, Unterzeile und Zeichnung zusammen, aber sie soll den Chart nicht hinterlegen. Geblieben ist der Rahmen — er leistet die Zusammengehoerigkeit, die Flaeche leistete sie nicht. Die Gewichtung ist mit drei Klassen angesetzt, damit die Regel `.st-weiss .st-card` sie nicht wieder grau macht, egal in welchem Abschnittston der Abschnitt einmal steht. */ .st-weiss .st-vp-bild.st-card, .st-ton .st-vp-bild.st-card { padding: 22px 24px 20px; gap: 0; background: none; } .st-vp-bild-h { margin: 0; font-size: 15px; font-weight: 660; letter-spacing: -.015em; color: var(--ink); } .st-vp-bild-sub { margin: 3px 0 0; padding-bottom: 14px; font-size: 12.5px; color: var(--muted); border-bottom: 1px solid var(--line); } .st-vp-bild .mk-svg { margin-top: 16px; } /* -------------------- Marktabschnitt auf Telefonbreite: eine Spalte ZWEIMAL IM BILD GEFUNDEN, und der zweite Fund war der Grund. Erst stand der Abschnitt bei 390 Pixeln zweispaltig, weil `.st-vp:has(.st-vp-bild) .st-mb-raster` drei Klassen zaehlt und die Einspalten-Regel nur eine. Dann stand er es WEITER, obwohl die Ausnahme in der Medienabfrage stand: sie stand weiter OBEN in der Datei als die Zweispalten-Regel, und bei gleicher Gewichtung gewinnt die spaetere Zeile. Eine Medienabfrage aendert daran nichts. Darum steht sie hier, am Ende, hinter allem. */ @media (max-width: 900px) { .st-vp:has(.st-vp-bild) .st-mb-raster { grid-template-columns: minmax(0, 1fr); } .st-vp-bild { align-self: stretch; } } /* --------------- Der Abstand ueber der Zahlenreihe: die 30 Pixel bleiben HIER STAND eine Ausnahme, die den Rand des Abschnittskopfs vor der Zahlenreihe auf 12 Pixel kuerzte — auf Zuruf eingesetzt und auf Zuruf wieder entfernt. Es gilt wieder der Rand, den alle Abschnittskoepfe tragen. WAS BLEIBT, IST DIE MESSUNG, und die gehoert aufgeschrieben: die Luecke ueber der Zahlenreihe kommt NICHT von .st-kpi-inline (4px), sondern vom margin-bottom von .st-kopf (30px). Zwischen Geschwistern fallen Raender zusammen, der groessere gilt. Wer die Luecke aendern will, fasst den Kopf an — an .st-kpi-inline zu drehen bleibt wirkungslos, und genau das ist mehrfach versucht worden. */ /* ------------------------------------------ Kopf der Uebersichtsseiten EINE VORLAGE FUER VERGLEICHEN, MARKTDATEN UND BLOG. Erzeugt von seitenKopf() in build.js; dort steht auch, welche drei Werte vorher auseinanderliefen und warum das schlimmer war als ein klarer Unterschied. DIESER BLOCK MUSS AM DATEIENDE BLEIBEN. Die Ueberschrift steht auf allen drei Seiten in einer Huelle, die sie schon anspricht: .a-hero h1 im Blog, .mb-wrap h1 auf dem Marktbefund. Beide sind gleich stark wie h1.skopf-h1 (eine Klasse, ein Element), und bei gleicher Staerke gewinnt die SPAETERE Regel. Wandert dieser Block nach oben, gilt wieder die alte Fassung — lautlos, denn es bricht nichts, es sieht nur wieder verschieden aus. Die Werte sind die der Vergleichsseite, weil zwei der drei Seiten sie schon trugen. */ .skopf-eyebrow { margin: 0; font-size: 11.5px; font-weight: 750; letter-spacing: .11em; text-transform: uppercase; color: var(--accent); } h1.skopf-h1 { margin: 7px 0 0; max-width: none; font-size: var(--h1); line-height: 1.1; letter-spacing: var(--h1-lauf); font-weight: var(--h1-fett); color: var(--ink); } .skopf-lead { margin: 10px 0 0; max-width: 72ch; font-size: 16px; line-height: 1.62; color: var(--ink-soft); font-weight: 400; } /* Weniger Luft zwischen Kopfzone und «Die jüngsten Beiträge» (25.08.2026). Gemessen standen dort 60 Pixel: 26 Polsterung der Kopfzone plus 34 Abstand darunter. Geändert ist NUR der Abstand darunter — die Polsterung trägt das Radarmuster, und wer sie kürzt, schneidet es an. Eine eigene Klasse und nicht .a-hero: dieselbe Hülle steht in jedem Blogbeitrag, auf jeder Themenseite, im Lexikon und bei den Artikeln. */ .b-hero { margin-bottom: 12px; } /* Die GEMESSENE Linie des Preisindex ist durchgezogen. mk-linie ist gestrichelt, weil sie bis zum zweiten Monatsstand eine Zeichnung ist; sobald zwei Staende vorliegen, ist die Linie eine Messung und sagt das auch. */ .mk-linie-gemessen { stroke-dasharray: none; } /* ------------------------------- Drei nebeneinander bleiben drei, auch mobil AUF ZURUF VOM 26. AUGUST 2026, und bei ECHTEN 390 Pixeln gemessen — im iframe, nicht ueber die Fenstergroesse: die Vertrauenspillen brachen in zwei Zeilen (Hoehe 65 statt 33), die Zahlenreihen standen zweispaltig (Hoehe 122 statt 61). Beides ist eine Dreiergruppe; sie sagt als Reihe etwas, das sie als Block verliert. DER HAKEN ENTFAELLT auf dem Telefon: er kostet je Pille rund 14 Pixel, und drei Pillen brauchen jedes davon. Die Aussage steht im Wort, nicht im Zeichen. */ @media (max-width: 660px) { .st-trust { flex-wrap: nowrap; gap: 6px; } .st-trust li { font-size: 11px; padding: 4px 8px; white-space: nowrap; } .st-trust li::before { content: none; } /* Drei Spalten, gleich breit, Beschriftung darf umbrechen: drei Zahlen nebeneinander mit zweizeiliger Beschriftung sind eine Reihe, zwei Zahlen ueber zwei Reihen sind eine Tabelle. */ .st-kpi-inline { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .st-kpi-inline .st-kpi b { font-size: 20px; } .st-kpi-inline .st-kpi span { font-size: 11px; line-height: 1.3; } } /* ------------------------------------ Kopfleiste auf dem Telefon: eine Zeile GEMESSEN VORHER, bei echten 390 Pixeln im Rahmen: die Leiste war 81 Pixel hoch, weil .head-inner umbricht — Marke und Werkzeuge oben, die vier Navigationspunkte darunter. Das sind 35 Pixel Hoehe ueber jeder Seite, und es sieht aus wie zwei Leisten. JETZT: Marke links, drei Werkzeuge und der Klappknopf rechts, die Navigation faellt darunter auf, wenn man ihn drueckt. Ohne JavaScript — das Kontrollkaestchen traegt den Zustand, und der Geschwisterwaehler blendet die Navigation ein. Dasselbe Muster wie bei den Musterbetrieben. DIE WERKZEUGE BLEIBEN SICHTBAR. Auf einem Vergleich mit 148 Programmen ist die Suche der zweite Weg nach der Navigation; sie hinter den Klappknopf zu legen waere eine Verschlechterung. */ .nav-schalter, .nav-knopf { display: none; } @media (max-width: 760px) { /* Die Leiste ist der Bezug fuer die aufgeklappte Navigation. */ .site-head { position: relative; } /* Hoehe und Polsterung stehen NICHT hier, sondern oben bei der alten Leistenregel — dort stand der Wert, der ihnen widersprach. Zwei Deklarationen desselben Masses 7400 Zeilen auseinander sind eine Falle fuer den Naechsten. */ .brand { flex: 1 1 auto; min-width: 0; } /* Der Knopf: drei Striche aus einem Element und zwei Pseudoelementen. Ein SVG waere hier mehr Bytes fuer dasselbe Bild. KEIN KREIS MEHR, auf Wunsch des Betreibers (26. August 2026). Er trug einen Rahmen und border-radius: 50% — dieselbe Form wie die drei Werkzeuge, die vorher neben ihm standen. Seit die im Klappfeld liegen, ist er der EINZIGE Knopf der Leiste, und der Kreis war die Erinnerung an eine Reihe, die es nicht mehr gibt. DIE TIPPFLAECHE BLEIBT 34 PIXEL. Sie ist jetzt unsichtbar, und das ist der Sinn: was man trifft, muss nicht gezeichnet sein. Der kleine Radius steht nur fuer den Fokusring — ein hartes Rechteck um drei Striche liest sich als Kasten, und ein Kreis darf es nicht sein. */ .nav-knopf { display: flex; order: 2; flex: none; width: 34px; height: 34px; border-radius: var(--r-s); align-items: center; justify-content: center; border: 0; background: none; cursor: pointer; } /* ETWAS BREITER ALS IM KREIS: 17 statt 15 Pixel. Ohne Rahmen traegt allein das Zeichen die Flaeche, und 15 Pixel Striche in 34 Pixeln Luft standen als kleines Zeichen mitten im Nichts. */ .nav-knopf span, .nav-knopf span::before, .nav-knopf span::after { width: 17px; } .nav-knopf span, .nav-knopf span::before, .nav-knopf span::after { display: block; width: 15px; height: 1.5px; border-radius: 2px; background: var(--bar-nav); } .nav-knopf span { position: relative; } .nav-knopf span::before, .nav-knopf span::after { content: ''; position: absolute; left: 0; } .nav-knopf span::before { top: -5px; } .nav-knopf span::after { top: 5px; } /* AUFGEKLAPPT WIRD DER KNOPF ZUM KREUZ. Ohne das sagt die Leiste nicht, was der Knopf jetzt tut, und wer das Feld schliessen will, sucht daneben. Der Mittelstrich verschwindet, die beiden aeusseren treffen sich. */ .nav-schalter:checked + .nav-knopf span { background: transparent; } .nav-schalter:checked + .nav-knopf span::before { top: 0; transform: rotate(45deg); } .nav-schalter:checked + .nav-knopf span::after { top: 0; transform: rotate(-45deg); } /* Das Kaestchen bleibt bedienbar, aber unsichtbar: aus dem Bild geschoben und nicht display: none — sonst waere die Leiste mit der Tastatur nicht mehr zu oeffnen. */ .nav-schalter { display: block; position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .nav-schalter:focus-visible + .nav-knopf { outline: 2px solid var(--bar-nav); outline-offset: 2px; } /* Zugeklappt ist zugeklappt — und aufgeklappt faellt das Feld ueber den Inhalt, nicht in die Leiste hinein: eine Leiste, die beim Oeffnen waechst, schiebt die halbe Seite nach unten. */ .head-klapp { display: none; } .nav-schalter:checked ~ .head-klapp { display: flex; flex-direction: column; position: absolute; top: var(--head-h); left: 0; right: 0; z-index: 45; padding: 4px 0 10px; background: var(--bar-bg); border-bottom: 1px solid var(--bar-line); box-shadow: 0 12px 24px -12px rgba(0, 0, 0, .5); } /* DIE WEGE ZUERST, DIE WERKZEUGE DARUNTER. Wer ein Menue oeffnet, sucht einen Weg; Sprache und Farbschema sind Vorlieben, die einmal gesetzt werden. Die Reihenfolge steht als `order` und nicht in der Reihenfolge des Quelltexts: dort muss .head-right hinten stehen, weil die Leiste sie auf dem Schirm rechts aussen zeigt. */ .head-klapp .site-nav-blog { display: flex; flex-direction: column; gap: 0; order: 1; } /* 20px waagrecht: dieselbe Polsterung, die .wrap ueber 620px traegt — die Menuespalte flucht damit mit der Wortmarke darueber und dem Text darunter. Hier stand 14, und das war unter 620px richtig und darueber um sechs Pixel daneben. Beide Werte stehen jetzt da, wo sie gelten (siehe die 620er-Regel hinter diesem Block). */ .head-klapp .head-blog { padding: 12px 20px; font-size: 14px; } /* DER LAUFENDE PUNKT BEKOMMT EINE KANTE LINKS, keinen Unterstrich: in einer Spalte liest sich ein Strich unter dem Wort als Trennlinie zum naechsten. Es bleibt bei zwei Merkmalen (Helligkeit UND Gewicht kommen aus .head-blog.on) — die Kante ist das dritte und nicht das einzige. */ .head-klapp .head-blog.on { border-bottom-color: transparent; box-shadow: inset 2px 0 0 var(--bar-ink); } /* ---- DIE DREI WERKZEUGE IM FELD, nicht mehr in der Leiste Auf Wunsch des Betreibers, 26. August 2026. Vorher standen sie rechts neben dem Klappknopf: VIER Kreise in einer Zeile von 390 Pixeln, von denen einer etwas voellig anderes tut als die drei daneben — er oeffnet die Seite, jene stellen etwas um. Gleiche Form, andere Aufgabe, und dazu 34 Pixel Wortmarke weniger. JETZT TRAEGT DIE LEISTE DIE MARKE UND EINEN KNOPF, und was der Knopf oeffnet, ist alles Uebrige. Eine Trennlinie ueber der Zeile sagt, dass Wege und Vorlieben zwei Dinge sind. */ .head-klapp .head-right { order: 2; margin: 8px 20px 0; padding-top: 12px; gap: 14px; border-top: 1px solid var(--bar-line); /* DER BEZUG FUER DIE BEIDEN AUFKLAPPFELDER, siehe die Regel darunter. */ position: relative; } /* GROESSERE KREISE ALS IN DER LEISTE. 30 Pixel sind fuer die Maus gerechnet; im Feld ist Platz, und 36 sind das Mindeste, was sich mit dem Finger sicher trifft. Alle drei zusammen, damit die Reihe eine Reihe bleibt — der Sprachwaehler hat oben in dieser Datei schon eine eigene Groesse fuer schmale Schirme, und zwei Maszahlen fuer dieselbe Form sind ein Oval. */ .head-klapp .dd-lang > summary, .head-klapp .dd-search > summary, .head-klapp .head-theme { width: 36px; height: 36px; } /* DIE FELDER VON SPRACHE UND SUCHE HAENGEN AN DER WERKZEUGZEILE und nicht am Kreis darin. Am Kreis (position: relative steht auf .dd) waeren sie 330 Pixel breit ab dessen Kante: das Suchfeld ist `right: 0` verankert, weil es auf dem Schirm am rechten Rand sitzt — bei einem Kreis am LINKEN Rand des Feldes laeuft es damit ueber die linke Fensterkante hinaus. Ein `left: 0` statt dessen verschiebt den Ueberlauf nur nach rechts. An der Zeile nehmen beide Felder die ganze Breite des Menues, und das ist auf einem Telefon ohnehin die einzige richtige Breite. Drei Klassen im Waehler, damit die Regel gegen .dd-panel-search (eine) und .dd-lang .dd-panel (zwei) gewinnt — Spezifitaet, nicht Reihenfolge. */ .head-klapp .head-right .dd { position: static; } .head-klapp .head-right .dd-panel { left: 0; right: 0; width: auto; min-width: 0; max-width: none; } } /* Ganz schmal dieselbe Kante wie .wrap: 14 statt 20 Pixel. Darueber steht der Grund; hier steht nur der zweite Wert. */ @media (max-width: 620px) { .head-klapp .head-blog { padding-left: 14px; padding-right: 14px; } .head-klapp .head-right { margin-left: 14px; margin-right: 14px; } } /* ============================================================================ NACHRANG — Telefonregeln, die SPAET stehen muessen ---------------------------------------------------------------------------- WOZU DIESER ABSCHNITT. In einem Stilblatt gewinnt bei gleicher Spezifitaet die SPAETERE Regel, und eine Medienabfrage erhoeht die Spezifitaet nicht. Eine Telefonregel, die VOR ihrer Grundregel notiert ist, tut deshalb nichts — ohne Fehler, ohne Meldung, ohne kaputtes Bild. Sie steht einfach da. Am 26. August 2026 hat pruefungen/pruefe-stilrang.js 22 solche Deklarationen gefunden. Zwei davon waren im Bild zu sehen, und beide erheblich: auf der AUTORENSEITE blieben dem Text 28 Pixel Breite, jedes Wort stand in einer eigenen Zeile; die BUCHSTABENSCHIENE des Lexikons war 40 statt 30 Pixel breit. Die uebrigen zwanzig sah man nicht — ein 480 Pixel breiter Erklaerkasten in einem 390 Pixel breiten Fenster, halbe Rundungen an gestapelten Kacheln, ein Abstand von 14 statt 7 Pixeln in der Kopfleiste, und eine Tabellenhuelle, die nie mindestens so breit war wie das Fenster. DIE REGEL FUER DIE ZUKUNFT: eine neue Telefonregel gehoert entweder hinter ihre Grundregel oder hierher. Welches von beidem, sagt der Pruefstand — `node pruefungen/pruefe-stilrang.js`, drei Sekunden, Schritt der Kette in pruefen.js. Prosa genuegt nicht: der Fallstrick war im Stilblatt an sechs Stellen als Warnung notiert, und trotzdem sind 22 Faelle entstanden. WAS NICHT HIERHER GEHOERT: alles, was an seiner Stelle wirkt. Dies ist keine Sammelstelle fuer Telefonregeln, sondern die Ausnahme fuer die, deren Grundregel spaeter steht. ========================================================================== */ @media (max-width: 900px) { /* Einspaltig steht keine Bildkachel neben dem Kopftext der Autorenseite. */ .legal-autor .legal-kicker, .legal-autor h1, .legal-autor .legal-lead { max-width: none; } } @media (max-width: 660px) { /* KEIN AUTOMATISCHER RAND IN DER TITELZEILE DER KATEGORIESEITE. Beide Bedienelemente tragen einen: .cat-fp schiebt sich an den rechten Rand, .chside rueckt hinter ihm auf. Auf dem Schirm ist das richtig; auf dem Telefon fallen sie unter den Titel, und dann ist rechts aussen die falsche Kante — Titel, Text und Tabelle beginnen alle links. BEIDE zusammen: zwei autos in einer Zeile teilen sich den freien Platz, und wer nur eines zuruecknimmt, ruckt das andere in die Mitte. */ .cat-fp { margin-left: 0; } .cat-fp ~ .chside { margin-left: 10px; } .chside { margin-left: 0; } /* Der breite Erklaerkasten darf nicht breiter sein als das Fenster. */ .info-tip-wide { max-width: calc(100vw - 40px); font-size: 12.5px; } .tip-tab { font-size: 11px; gap: 2px 8px; } /* Blogkarten im Raster: 19px Titel sind auf 390 Pixeln eine Zeile mehr je Karte. */ .b-raster .b-karte h2 { font-size: 17px; } } @media (max-width: 620px) { /* Die Buchstabenschiene des Lexikons: schmaler und enger an den Karten. 62 von 362 Pixeln waeren ein Sechstel der Breite fuer einen Buchstaben. */ .lx-az-raster { grid-template-columns: 30px minmax(0, 1fr); gap: 10px; } .lx-abc a, .lx-abc-leer { height: 26px; font-size: 12px; } /* Untereinander sind es wieder zwei Kacheln, jede mit allen vier Rundungen und ohne den Strich, der nur zwischen Nebeneinanderliegenden trennt. */ .st-mb-liste { border-right: 1px solid var(--line-hard); border-radius: var(--r); } .st-mb-panels { border-radius: var(--r); } } @media (max-width: 430px) { /* Enger, bevor etwas weicht: es weichen erst die Abstaende in der Kopfleiste, dann der Schriftgrad der Wortmarke. */ .head-inner { gap: 7px; } } /* ============================================================================ TELEFON — was am 26. August 2026 im Bild gefunden wurde ---------------------------------------------------------------------------- Fuenfundzwanzig Seiten auf 390 Pixeln gezeichnet und einzeln angesehen. Was dabei auffiel und keine Rangfolgefrage war, steht hier — jede Regel mit dem Bild, aus dem sie kommt. ========================================================================== */ /* ---- 1. DER FREISTEHENDE TRENNPUNKT --------------------------------------- Die Unterzeile der Kategorieseite traegt vier Angaben — Kurzzeile, Trefferzahl, Stand, Artikelverweis — und jede ausser der ersten bringt ihren Trennpunkt als ::before mit. Auf EINER Zeile ist das richtig, auf drei falsch: bricht die Reihe um, beginnt die neue Zeile mit einem Punkt, der nichts trennt. Im Bild stand auf jeder Kategorie- und Kriterienseite ein «· 4/4 sichtbar» am Zeilenanfang, in der franzoesischen Fassung zweimal. NICHT DURCH WEGLASSEN DER PUNKTE GELOEST, sondern durch feste Zeilen: die Kurzzeile nimmt eine eigene, der Artikelverweis auch, und was uebrig bleibt (Zahl und Stand) ist kurz genug fuer eine gemeinsame. Damit trennt der Punkt wieder zwei Angaben und steht nie vorn. */ @media (max-width: 660px) { .cat-lead { flex: 1 0 100%; } .cat-artikel { flex: 1 0 100%; white-space: normal; } .cat-sub .result-count::before, .cat-artikel::before { content: none; } } /* ---- 2. DAS RADARMUSTER RAGTE 16 PIXEL HINAUS ----------------------------- Der Sichttest meldete auf Uebersichts-, Blog-, Themen- und Marktbefundseiten neun bis elf ueberstehende Elemente: `div.rad-grund(406)` bei 390 Pixeln Fensterbreite, dazu sein svg und die Ringe darin. DIE ERSTE ERKLAERUNG WAR FALSCH, und sie steht hier, weil sie plausibel klang: «das Muster traegt overflow: hidden, und das clippt seine KINDER, nicht es selbst». Richtig — aber es erklaerte nicht, WARUM das Muster 406 Pixel breit ist. `overflow-x: clip` an der Huelle hat den Ueberstand verdeckt und die Ursache stehen lassen. DIE URSACHE, gefunden erst als der Betreiber die ungleichen Seitenraender der Blogkacheln meldete: das Raster von .a-hero und .a-body war 406 Pixel breit in einem 390 Pixel breiten Fenster. Die Randspalten verlangen je mindestens 24, die Textspalte wurde auf dem Telefon aber mit `100% - 32px` gerechnet — 24 + 358 + 24 = 406. `.rad-grund` sitzt in `grid-column: voll` und war damit genau so breit wie das Raster. Behoben ist es an der Stelle, an der die 32 stehen (siehe Fund 10 weiter unten). DIE CLIP-REGEL BLEIBT TROTZDEM, aber als Sicherung und nicht als Loesung: das Muster ist Dekoration, und wenn ein kuenftiger Wert die Rechnung wieder sprengt, soll es beschnitten werden statt die Seite zu verbreitern. Clip und nicht hidden: hidden macht aus dem Abschnitt einen Rollbereich und nimmt allem darin die Faehigkeit zu kleben. */ .hat-grund { overflow-x: clip; } /* ---- 3. DAS MUSTER LAG IM TEXT, UND DANN WAR ES EIN BOGEN OHNE MITTE ------ ERSTER SCHRITT, morgens: auf 390 Pixeln reicht das 340 Pixel hohe Band bis in den Vorspann, und die Ausblendung setzt erst bei 45 Prozent an. Im Bild lief eine Ringlinie durch «auf Basis geprüfter Daten», ein Punkt sass im Wort «BLOG». Darum kuerzer (210) und leiser (.3) — «nicht weg: es ist das Zeichen der Seite». ZWEITER SCHRITT, nach dem Zuruf des Betreibers («bei mobile wird das Radarbild oben rechts im Hintergrund nicht gut angezeigt»): es ist weg. Und der Grund ist nicht Geschmack, sondern Geometrie. Das SVG haengt mit `xMaxYMid` am RECHTEN Rand — die Radarmitte liegt also am Rand des Abschnitts. Auf einem breiten Schirm sieht man von dort ein Viertelrad nach links auslaufen, und das liest sich als Radar. Auf 390 Pixeln liegt die Mitte praktisch ausserhalb, und was bleibt, ist ein blasser Bogen mit zwei Punkten: kein Zeichen, sondern ein Kringel. Ein Zeichen, von dem man nur ein Stueck sieht, ist kein Zeichen mehr — und die Marke steht auf dem Telefon ohnehin zweimal da, als Radarzeichen in der Leiste und auf der Startseite als grosses Rad in der Kopfzone. .st-hero-grund BEHAELT die gedaempfte Deckkraft und verschwindet NICHT: es liegt in der Kopfzone der Startseite, wo das grosse Rad daneben steht und das Muster als dessen Fortsetzung gelesen wird. */ @media (max-width: 760px) { .rad-grund { display: none; } .st-hero-grund { opacity: .3; } } /* ---- 4. ZWEI KNOEPFE: NEBENEINANDER, WO ES AUFGEHT ------------------------ Die Kopfzone der Startseite traegt zwei Knoepfe. Im Bild standen sie auf Franzoesisch untereinander und verschieden breit, mit einer Treppe an der rechten Kante. Der erste Schluss war «volle Breite fuer beide, immer» — `flex: 1 0 100%`. Das war eine Zeile zu viel: auf Deutsch passen sie nebeneinander. GERECHNET bei 14.5px und 16 Pixeln Polsterung je Seite: «Software vergleichen» misst rund 172, «Marktdaten ansehen» 158 — mit der Luecke 340 von 362 verfuegbaren. Franzoesisch kommt auf 186 und 214, zusammen 410, und passt nicht. `flex: 1 1 auto` MIT `min-width: max-content` macht beides ohne Abfrage auf die Sprache: die Knoepfe teilen sich die Zeile, wenn ihr Text hineinpasst, und brechen um, wenn nicht — dann dehnt flex-grow jeden auf die ganze Breite. Das max-content ist PFLICHT und nicht Feinschliff: .st-btn traegt `white-space: nowrap`, und ohne die Untergrenze wuerden sich die Knoepfe unter ihren Text quetschen und ihn hinausschieben, statt umzubrechen. */ @media (max-width: 620px) { .st-actions { gap: 10px; } .st-actions .st-btn { flex: 1 1 auto; min-width: max-content; } } /* ---- 5. DAS SUCHFELD AUF DER ERGEBNISSEITE --------------------------------- Die Ergebnisseite sagte «Mindestens zwei Zeichen eingeben» und hatte kein Feld: das einzige der Seite liegt in der Kopfleiste, und dort seit dem 26. August 2026 hinter dem Klappknopf. Wer auf dem Telefon ueber «alle Treffer zeigen» hier landete, sah eine leere Seite mit einer Aufforderung, die er ohne Umweg ueber das Menue nicht befolgen konnte. ES IST EIN FORMULAR UND KEINE LEBENDE SUCHE: die Ergebnisliste entsteht ohnehin erst aus ?q=, und ein zweites Feld mit Vorschauliste waere ein zweites Bedienelement fuer dieselbe Sache. Abschicken laedt die Seite mit der Anfrage — derselbe Weg, den das grosse Feld der Startseite nimmt. */ .res-suche { display: flex; gap: 8px; margin: 14px 0 4px; max-width: 520px; } .res-suche input { flex: 1 1 auto; min-width: 0; min-height: 40px; padding: 0 12px; font: inherit; font-size: 15px; color: var(--ink); background: var(--surface); border: 1px solid var(--line-hard); border-radius: var(--r-s); } .res-suche input::placeholder { color: var(--muted); } .res-suche input:hover { border-color: var(--muted); } .res-suche input:focus { outline: none; border-color: var(--accent); } .res-suche button { flex: none; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; cursor: pointer; border-radius: var(--r-s); background: var(--accent); border: 1px solid var(--accent); color: var(--accent-ink); } .res-suche button:hover, .res-suche button:focus-visible { filter: brightness(1.08); } .res-suche svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; } /* ---- 6. DIE KANTONSKARTE WAR NICHT ZU LESEN ------------------------------- Die Karte ist ein SVG mit viewBox «0 0 600 404» und nimmt auf dem Telefon die ganzen 375 Pixel der Textspalte ein: Faktor 0.625. Ein Kuerzel in 9 Pixeln erscheint damit in 5.6, die Zahl darunter in 5.3 — im Bild waren «AI», «GL» und «UR» nicht mehr zu entziffern, und die Zahl, die die eigentliche Auskunft ist, schon gar nicht. GEGENGERECHNET statt geschaetzt: 14 und 13 Benutzereinheiten ergeben 8.8 und 8.1 Pixel — das ist die Groesse, in der die Karte auf dem Schirm gelesen wird. Die Kuerzel bleiben zweistellig und die Marken sitzen in den Flaechenmitten; im Bild geprueft, dass in der Innerschweiz nichts uebereinander laeuft. */ @media (max-width: 620px) { .kmap-ab { font-size: 14px; } .kmap-n { font-size: 13px; } } /* ---- 7. VIER ANGABEN IN EINER ZEILE --------------------------------------- Autor, Veroeffentlicht, Datenstand, Lesezeit. Auf 390 Pixeln passten in der Grundform drei, und «LESEZEIT» stand allein in der zweiten Zeile — eine Reihe, die aussieht wie ein Rest. Dann stand hier zwei mal zwei; ordentlich, aber es trennte vier Angaben, die eine Zeile sind. Auf Wunsch des Betreibers stehen sie nebeneinander. GERECHNET: die vier Werte messen bei 12.5px rund 88, 90, 68 und 58 Pixel, die vier Beschriftungen bei 9px hoechstens 87 («VEROEFFENTLICHT»), und keine ist breiter als ihr Wert. Vier Spalten plus drei Luecken von 14 ergeben rund 334 — die 362 Pixel der Spalte reichen. FRANZOESISCH NICHT: «ÉTAT DES DONNÉES» und «TEMPS DE LECTURE» sind je zwei Woerter. Darum flex-wrap statt vier fester Spalten: wo es reicht, steht alles in einer Zeile; wo nicht, bricht die letzte Angabe um, und zwar als ganzes Paar aus Beschriftung und Wert. */ @media (max-width: 620px) { .b-stand { display: flex; flex-wrap: wrap; gap: 12px 14px; } .b-stand dt { font-size: 9px; } .b-stand dd { font-size: 12.5px; } } /* ---- 8. DER INHALT DER BEIDEN KREISE SASS NICHT IN DER MITTE --------------- Gemessen im Bild des offenen Klappfeldes: der Kreis des Sprachwaehlers liegt bei 14..50 Pixeln, das «DE» darin bei 15..30 — seine Mitte bei 22.5 statt bei 32. Rund zehn Pixel nach links, und dieselben zehn beim Lupenkreis daneben. Der Hell/Dunkel-Knopf sitzt mittig; er ist ein