/* * Nexxus Familienbausteine · familie.css · Stand 0.33 (2026-09-16) * * Die gemeinsamen Teile aller Marketingseiten: Kopf, Fuß, Schriftskala, * Knöpfe, Hero mit Bühne, Kennzahlenzeile, Objekte, Abschnitte, Blattzeilen, * Preismatrix, Aufruf. Entschieden am 12.09.2026 (Richtung C „Bühne" mit der * Kennzahlenzeile aus D, siehe brand/web/README.md). * * Voraussetzungen, in dieser Reihenfolge laden: * 1. tokens.css (Farbsystem v3, Schriftnamen) * 2. produkte.css (setzt --p-* je Produkt über data-produkt am ) * 3. familie.css (diese Datei) * Dazu die Schriften: Baloo Chettan 2 Regular aus der reparierten Datei und * Manrope (variabel oder 400/500/600), jeweils selbst gehostet. * * Kein Framework, keine Präprozessoren. Alle Klassen tragen das Präfix nx-, * damit nichts mit bestehendem CSS eines Projekts kollidiert. Das Projekt * setzt und . * * Diese Datei wird nicht im Projekt geändert. Was fehlt oder stört, geht als * Rückmeldung an den Group-Chat; scripts/marke-verteilen.py bringt die * nächste Fassung in alle Projekte. */ /* ------------------------------------------------------------------ Grund */ :root { /* Neutraltöne mit leichtem Farbstich aus der Produktfarbe. Hell ist Standard (Entscheidung Phil, 2026-09-07), dunkel nur per Schalter. */ /* Schrift in Dunkelanthrazit, nicht Schwarz (Phil, 13.09.2026): #1a1d21 wirkte auf Weiß wie Schwarz. #2c3037 hält 12,6:1 und bleibt im kühlen Grau der Neutraltöne. */ --nx-schrift: #4b535e; /* Graphit (Phil, 13.09.2026, Fassung C): 7,8:1 auf Weiß; davor #2c3037, wirkte wie Schwarz */ --nx-gedaempft: #6b7380; /* 4,8:1 auf Weiß, 4,2:1 auf --nx-flaeche-2 (bewusst, Phil) */ --nx-flaeche: #ffffff; --nx-flaeche-2: color-mix(in srgb, var(--nx-gedaempft) 9%, #ffffff); /* zweite Fläche, z. B. Kundenblase */ --nx-grund: color-mix(in srgb, var(--p-light) 6%, #ffffff); color-scheme: light; --nx-tint: color-mix(in srgb, var(--p-light) 20%, #ffffff); --nx-tint-2: color-mix(in srgb, var(--p-light) 34%, #ffffff); --nx-rand: color-mix(in srgb, var(--p-light) 30%, #e2e5e9); /* Rand für Bedienelemente (Zweitknopf, Eingabefelder, Kästchen): 3:1 auf Weiß, wie WCAG 1.4.11 für Nicht-Text verlangt. --nx-rand bleibt für Trennlinien (Nutria, 15.09.2026: 1,35:1). */ --nx-rand-stark: #8a919b; --nx-schatten: 0 1px 2px rgb(20 40 40 / 0.04), 0 16px 40px -28px rgb(20 40 40 / 0.25); --nx-gut: #2f6b3e; /* steigt, ok (connect-ink, 6,4:1 auf Weiß) */ --nx-warn: #b04a2e; /* fällt, Achtung (Karat „teuer", 5,3:1) */ --nx-huelle: 72rem; } :root[data-theme='dark'] { --nx-schrift: #e8eaed; --nx-gedaempft: #9aa1ab; --nx-flaeche: #16191e; --nx-flaeche-2: color-mix(in srgb, #ffffff 7%, #16191e); --nx-grund: #0d0f12; color-scheme: dark !important; /* next-themes mit forcedTheme setzt color-scheme: light inline am html, sonst bleibt die Scrollleiste im Dunkeln hell (Pilot, 15.09.2026) */ --nx-tint: color-mix(in srgb, var(--p-light) 12%, #0d0f12); --nx-tint-2: color-mix(in srgb, var(--p-light) 22%, #0d0f12); --nx-rand: color-mix(in srgb, var(--p-light) 18%, #2a2f37); --nx-rand-stark: #667080; --nx-schatten: 0 1px 2px rgb(0 0 0 / 0.4), 0 16px 40px -28px rgb(0 0 0 / 0.7); --nx-gut: #78c489; --nx-warn: #f29159; /* Auf dunklem Grund trägt base den Kontrast, nicht ink (tokens.css). Gilt auch für den großen Akzent: ohne diese Zeile stand Nutrias H1 dunkel bei 2,58:1 statt 9,71:1 (Nutria-Chat, 13.09.2026). */ --p-ink: var(--p-base); --p-akzent: var(--p-base); } .nx-seite { margin: 0; background: var(--nx-flaeche); color: var(--nx-schrift); font-family: var(--nx-font-body); /* Manrope 500 statt 400 (Phil, 13.09.2026, Fassung B aus sieben): 400 war zu dünn, der Text kaum lesbar. Zwei Manrope-Schnitte in der Familie: 500 für Text, 600 für Knöpfe und Hervorhebungen. Wer statische Dateien lädt, braucht jetzt 500 und 600 (Karat, Nutria). */ font-weight: 500; font-size: 1rem; line-height: 1.55; font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; } .nx-seite *, .nx-seite *::before, .nx-seite *::after { box-sizing: border-box; } .nx-seite a:not(.nx-knopf) { color: inherit; } .nx-seite :focus-visible { outline: 2px solid var(--p-ink); outline-offset: 3px; } .nx-huelle { max-width: var(--nx-huelle); margin-inline: auto; padding-inline: 1rem; } /* ------------------------------------------------------------- Schrift */ /* Baloo Chettan 2 trägt Wortmarke und alle Überschriften, immer Regular 400. Manrope alles andere. Neun Größen, mehr braucht keine Seite: 0,85 (klein) · 0,95 (Navigation, Fakt, Tabelle) · 1 (Text) · 1,2 (Vorspann, Produktname) · 1,35 (H3, Stufe, Zeilensatz) · 1,6 (Betrag) · 2,6 (Kennzahl) · H2 · H1. Tyrion zählt sie (konsistenz.md). */ .nx-seite h1, .nx-seite h2, .nx-seite h3 { font-family: var(--nx-font-display); font-weight: 400; line-height: 1.1; letter-spacing: -0.01em; margin: 0; text-wrap: balance; overflow-wrap: anywhere; /* ein Wort, das breiter ist als die Zeile, bricht statt aus der Seite zu ragen; anywhere statt break-word, sonst wächst ein umgebendes Raster auf die Wortbreite (Karat, Rechtsseiten) */ } /* Lange deutsche Wörter in Überschriften am Telefon: „Datenschutzerklärung" (H1, 359 px) und „Verbraucherstreitbeilegung" (H2, 318 px) ragten bei 320 px aus der Seite (Karat, 15.09.2026). Unter 30 rem trennen Überschriften deshalb mit Trennstrich, aber nur Wörter ab etwa zwölf Zeichen (Safari über die -webkit-Grenzen je fünf Zeichen vor und nach der Trennung). Ohne Trenndaten greift der Umbruch oben ohne Strich. */ @media (max-width: 30rem) { .nx-seite h1, .nx-seite h2, .nx-seite h3 { -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 12 5 5; -webkit-hyphenate-limit-before: 5; -webkit-hyphenate-limit-after: 5; } } /* Die H1 steht ganz in der Logofarbe (Phil, 13.09.2026): Hauptaussage in wenigen Worten, kein Satz mit Komma. Darunter optional die Teilüberschrift .nx-hero__unter in der Schriftfarbe, dann der Vorspann. Der frühere Akzentteil entfällt; wo er noch steht, erbt er die Farbe. */ .nx-seite h1 { font-size: clamp(2.4rem, 4.6vw, 3.8rem); color: var(--p-akzent, var(--p-ink)); } .nx-seite h2 { font-size: clamp(1.7rem, 2.8vw, 2.3rem); } .nx-seite h3 { font-size: 1.35rem; } /* Übergang: in der H1 war bis 0.16 der farbige Teil; seit 0.17 ist die ganze Zeile farbig, das em bleibt nur für altes Markup ohne Wirkung. */ .nx-seite h1 em { font-style: normal; color: inherit; } /* Beizeilen der H1, beide optional, beide Baloo in H2-Größe und in der Schriftfarbe: .nx-hero__ueber steht über der H1 (kurze Einordnung), .nx-hero__unter darunter (ein kurzer Satz ohne Komma). Die Farbe trägt allein die H1 (Phil, 13.09.2026). Danach folgt der Vorspann .nx-lead. */ /* Die Überzeile steht IN der H1 ( vor dem Haupttext), damit Vorleser beim Sprung von Überschrift zu Überschrift den Gegenstand mithören (Karat, 14.09.2026). Sie trägt die Schriftfarbe, die Logofarbe bleibt beim Haupttext. */ .nx-seite .nx-hero__ueber { display: block; font-size: clamp(1.7rem, 2.8vw, 2.3rem); line-height: 1.15; color: var(--nx-schrift); margin: 0 0 0.35rem; text-wrap: balance; } .nx-seite .nx-hero__unter { font-family: var(--nx-font-display); font-weight: 400; font-size: clamp(1.7rem, 2.8vw, 2.3rem); line-height: 1.15; color: var(--nx-schrift); max-width: 26ch; /* Der Rand zieht die Zeile an die H1 heran (Rastergap 1,2 rem minus 0,6 rem); mit .nx-seite davor, sonst gewinnt .nx-seite p { margin: 0 } (Tyrion). */ margin: -0.6rem 0 0; text-wrap: balance; } /* Chinesisch, Japanisch, Koreanisch brechen an jedem Zeichen: Der Akzent bekommt dort eine eigene Zeile, sonst beginnt er mitten im Satz. */ :lang(zh) .nx-seite h1 em, :lang(ja) .nx-seite h1 em, :lang(ko) .nx-seite h1 em { display: block; } .nx-seite p { margin: 0; } /* Fett heißt in der Familie Manrope 600, nie der Browser-Default 700. */ .nx-seite b, .nx-seite strong { font-weight: 600; } .nx-lead { font-size: 1.2rem; color: var(--nx-gedaempft); max-width: 54ch; } .nx-klein { font-size: 0.85rem; color: var(--nx-gedaempft); } .nx-fakt { font-size: 0.95rem; color: var(--nx-gedaempft); } /* Beträge und Kennzahlen: Manrope 600 mit Tabellenziffern, nie Baloo. */ .nx-zahl { font-weight: 600; letter-spacing: -0.02em; line-height: 1; } /* --------------------------------------------------------------- Knöpfe */ .nx-knopf { display: inline-flex; align-items: center; gap: 0.5rem; flex-shrink: 0; /* ein Knopf wird im Kopf nie schmaler als seine Schrift */ min-height: 2.75rem; /* 44 px Trefferfläche, auch beim kleinen Knopf */ padding: 0.85rem 1.5rem; border-radius: var(--nx-radius-sm); /* 10 px statt Pille (Phil, 16.09.2026) */ border: 1px solid transparent; font: inherit; font-weight: 600; font-size: 1rem; line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer; } .nx-knopf--haupt { background: var(--p-fill); background-origin: border-box; /* ein Verlauf wiederholte sich unter dem durchsichtigen Rand: rechts ein blauer, links ein pinker Streifen (Group, Phil 16.09.2026) */ color: var(--p-auf-fill); } .nx-knopf--haupt:hover { filter: brightness(1.08); } .nx-knopf--zweit { background: var(--nx-flaeche); color: var(--p-ink); border-color: var(--nx-rand-stark); } .nx-knopf--zweit:hover { border-color: var(--p-ink); } .nx-knopf--klein { padding: 0.6rem 1.1rem; font-size: 0.95rem; } .nx-knoepfe { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; } /* ----------------------------------------------------------------- Kopf */ /* In jedem Produkt gleich: Wortmarke links (48 px, als Datei), Navigation mit höchstens drei Punkten, Anmelden als Textlink, genau ein Hauptknopf, Sprachwahl. Höhe 5 rem. Kein Sprachband darüber (Phil, 12.09.2026). */ .nx-kopf { border-bottom: 1px solid var(--nx-rand); } .nx-kopf__innen { display: flex; align-items: center; gap: 2rem; min-height: 5rem; } .nx-marke { display: flex; align-items: center; text-decoration: none; } .nx-marke img { display: block; height: 48px; width: auto; } /* Zwei Dateien, hell und dunkel, umgeschaltet über data-theme am Wurzelelement. */ :root:not([data-theme='dark']) .nx-marke .nx-marke__dunkel, :root[data-theme='dark'] .nx-marke .nx-marke__hell { display: none; } .nx-nav { margin-left: auto; display: flex; align-items: center; gap: 1.25rem; font-weight: 600; font-size: 0.95rem; } .nx-nav a { text-decoration: none; display: inline-flex; align-items: center; min-height: 2.75rem; } .nx-nav a:hover:not(.nx-knopf) { color: var(--p-ink); } /* der Hauptknopf behält seine Schrift (Phil, 13.09.) */ /* Die aktuelle Seite trägt einen Strich; der Hauptknopf nicht, er bleibt ein Knopf (auf /id stand sonst violette Schrift auf dem Verlauf). */ .nx-nav a[aria-current='page']:not(.nx-knopf) { color: var(--p-ink); box-shadow: inset 0 -2px 0 var(--p-base); padding-bottom: 0.1rem; } /* Sprachwahl als details-Element: klappt ohne JavaScript auf, Tastatur bedienbar. Nur die aktive Sprache ist markiert (kein Hinweis auf die Browsersprache mehr, 0.18). Namen bleiben unübersetzt: „Deutsch", nicht „German". */ .nx-sprache { position: relative; } .nx-sprache summary { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.75rem; padding: 0.35rem 0.6rem; border: 1px solid var(--nx-rand); border-radius: var(--nx-radius-sm); /* ein Knopf wie der Hauptknopf daneben, 10 px (Nutria, 16.09.2026) */ font-size: 0.95rem; font-weight: 600; letter-spacing: 0.04em; cursor: pointer; list-style: none; } .nx-sprache summary::-webkit-details-marker { display: none; } .nx-sprache ul { position: absolute; right: 0; top: calc(100% + 0.5rem); z-index: 30; min-width: 12rem; margin: 0; padding: 0.35rem; list-style: none; background: var(--nx-flaeche); border: 1px solid var(--nx-rand); border-radius: var(--nx-radius-sm); box-shadow: var(--nx-schatten); } .nx-sprache li a { display: flex; align-items: center; gap: 0.55rem; min-height: 2.75rem; padding: 0.45rem 0.6rem; border-radius: var(--nx-radius-xs); text-decoration: none; white-space: nowrap; } .nx-sprache li a:hover { background: var(--nx-tint); } /* Nur die aktive Sprache ist markiert. Bis 0.17 war zusätzlich die Browsersprache getönt und mit Punkt versehen; das sah aus wie eine zweite aktive Sprache (Phil, 13.09.2026). Der Hinweis auf die Browsersprache entfällt ersatzlos. */ /* Die aktive Sprache trägt die Hover-Tönung dauerhaft: Farbe allein war je nach Produktfarbe kaum zu erkennen (Phil, 13.09.2026). */ .nx-sprache li a[aria-current] { background: var(--nx-tint); color: var(--p-ink); font-weight: 600; } @media (max-width: 47.5rem) { .nx-nav { gap: 0.9rem; font-size: 0.95rem; } .nx-nav .nx-nav__breit { display: none; } } /* Unter 600 px wird der Kopf zweizeilig (Wortmarke oben, Navigation darunter, zusammen höchstens 130 px). Die Marketing-Links (.nx-nav__link) weichen, Anmelden (.nx-nav__anmelden), Hauptknopf und Sprachwahl bleiben: Ein Kunde muss auf dem Telefon an sein Konto kommen (Butler, 12.09.2026). */ /* Die Marketing-Links weichen schon ab 768 px: Mit drei Ankerlinks plus Hauptknopf brachen sie zwischen 605 und 770 px auf zwei bis drei Zeilen und bis 645 px scrollte die Seite seitlich (Karat, 14.09.2026). */ @media (max-width: 48rem) { .nx-nav .nx-nav__link { display: none; } /* Ohne die Textlinks darf der kleine Hauptknopf schrumpfen und zweizeilig werden, wenn der Platz nicht reicht: Mit flex-shrink: 0 aus .nx-knopf griff der Umbruch nie, „Kostenlos starten" schob bei Pilot und Nutria die Sprachwahl bei 320 px 5 px aus der Seite (0.28). Nur bis 48 rem: Darüber stehen die Textlinks, sie brechen zuerst; schrumpfte der Knopf mit, brach Karats „App Store" zwischen 769 und 802 px unnötig um (Karat, 0.29). Senkrecht knapper und enge Zeilenhöhe, damit der Kopf zweizeilig unter 130 px bleibt; einzeilig hält min-height den Knopf bei 44 px. */ .nx-nav { min-width: 0; line-height: 1.15; } .nx-nav .nx-knopf--klein { flex-shrink: 1; white-space: normal; text-align: center; padding-block: 0.25rem; line-height: 1.15; } } @media (max-width: 37.5rem) { .nx-kopf__innen { flex-wrap: wrap; gap: 0.6rem 1rem; padding-block: 0.8rem; } .nx-nav { margin-left: 0; width: 100%; justify-content: space-between; min-width: 0; } .nx-knopf--klein { white-space: normal; text-align: center; } } /* ----------------------------------------------------------------- Hero */ /* Überschrift mittig, darunter die Bühne mit dem Objekt des Produkts und der präsentierenden Figur. Die Bühne ist ein weicher Verlauf aus der Tönung, der Boden eine Linie. */ .nx-hero { padding-block: 3.5rem 0; text-align: center; display: grid; justify-items: center; gap: 1.2rem; } /* width: fit-content, damit der Verlauf als Schriftfüllung über die Tinte läuft und nicht über einen breiteren Kasten: Bei zweizeiliger H1 fehlte sonst das Rosa am Ende (Tyrion, 13.09.2026). */ .nx-hero h1 { max-width: 20ch; width: fit-content; } .nx-hero .nx-lead { max-width: 54ch; } .nx-hero .nx-knoepfe { justify-content: center; margin-top: 0.4rem; } .nx-buehne { position: relative; margin-top: 1.5rem; padding: 1rem 1rem 0; background: radial-gradient(ellipse 70% 100% at 50% 100%, var(--nx-tint) 0%, var(--nx-tint) 45%, transparent 100%); border-bottom: 1px solid var(--nx-rand); } .nx-buehne__innen { position: relative; max-width: 66rem; margin-inline: auto; display: grid; /* Objekt in der Achse des mittigen Heros, Figur in der rechten Spalte; unter 64 rem als Paar mittig, unter 50 rem untereinander (Karat, 14.09.2026: das Objekt am rechten Rand stand unter dem mittigen Hero schief). */ grid-template-columns: minmax(0, 1fr) minmax(0, 36rem) minmax(0, 1fr); gap: 2rem; align-items: end; } .nx-buehne__innen > .nx-objekt { grid-column: 2; } .nx-buehne__innen > .nx-buehne__figur { grid-column: 3; justify-self: start; } .nx-buehne .nx-objekt { text-align: left; box-shadow: none; /* der weiche Schatten lief über die Bodenlinie (Phil, 12.09.) */ margin-bottom: -1px; border-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .nx-buehne__figur { display: block; /* Höhe als Obergrenze, Breite an die Spalte gebunden: mit fester Höhe ragte die Figur zwischen 64 und 68 rem über den Rand (Nutria, 15.09.2026). */ height: auto; width: auto; max-height: 22rem; max-width: 100%; position: relative; z-index: 1; /* Die Figur ragt nach oben in den Raum neben dem Vorspann, statt die Bühne auf ihre Höhe zu zwingen: Bei einem kleinen Objekt (Karats Preiskarte) blieb sonst eine Leere über dem Objekt (Phil, 12.09.). */ margin-top: -6rem; } /* Kleines Objekt auf der Bühne (Preiskarte, Meldung): nicht in die Breite ziehen, rechts an die Figur rücken. */ .nx-buehne .nx-objekt--karte { max-width: 30rem; justify-self: center; } @media (max-width: 64rem) { /* fit-content statt fester 36 rem: bei einer 30-rem-Karte stand das Paar sonst rund 29 px rechts der Mitte (Pilot, 15.09.2026). */ .nx-buehne__innen { grid-template-columns: fit-content(36rem) auto; justify-content: center; } .nx-buehne__innen > .nx-objekt { grid-column: auto; } .nx-buehne__innen > .nx-buehne__figur { grid-column: auto; margin-top: 0; } } @media (max-width: 50rem) { .nx-buehne__innen { grid-template-columns: 1fr; } .nx-buehne__innen > .nx-buehne__figur { max-height: 12rem; justify-self: center; margin-top: 0; } .nx-buehne .nx-objekt--karte { max-width: none; justify-self: stretch; } .nx-buehne .nx-objekt { border-radius: var(--nx-radius); border-bottom: 1px solid var(--nx-rand); margin-bottom: 1.5rem; } } /* Gespräch: Blasen von Kunde und Assistent, ein Treffer aus dem Katalog. Für Butler, Guide, Scout und jede Seite, die einen Dialog zeigt. */ .nx-gespraech { display: grid; gap: 0.7rem; font-size: 0.95rem; } .nx-blase { max-width: 78%; padding: 0.7rem 0.95rem; line-height: 1.45; border-radius: var(--nx-radius); } .nx-blase--kunde { justify-self: end; background: var(--nx-flaeche-2); border-top-right-radius: var(--nx-radius-xs); } .nx-blase--assistent { justify-self: start; background: var(--nx-tint); border-bottom-left-radius: var(--nx-radius-xs); } .nx-treffer { justify-self: start; max-width: 78%; display: flex; gap: 0.9rem; align-items: center; border: 1px solid var(--nx-rand); border-radius: var(--nx-radius-sm); padding: 0.7rem 0.9rem; } .nx-treffer__bild { width: 2.6rem; height: 2.6rem; border-radius: var(--nx-radius-xs); background: var(--nx-tint-2); flex: none; } .nx-treffer b { display: block; font-weight: 600; } /* Ein lebendiges Detail je Hero, sonst keine Bewegung. Die Punkte sind Kreise: eine Form, kein Radius (tokens.css). */ .nx-tippt { display: inline-flex; gap: 0.25rem; justify-self: start; padding: 0.7rem 0.9rem; background: var(--nx-tint); border-radius: var(--nx-radius); border-bottom-left-radius: var(--nx-radius-xs); } .nx-tippt i { width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--p-ink); opacity: 0.35; animation: nx-tippt 1.2s infinite; } .nx-tippt i:nth-child(2) { animation-delay: 0.2s; } .nx-tippt i:nth-child(3) { animation-delay: 0.4s; } @keyframes nx-tippt { 0%, 60%, 100% { opacity: 0.35; } 30% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .nx-tippt i { animation: none; opacity: 0.7; } } /* ----------------------------------------------------------- Kennzahlen */ /* Vier Werte, die man in drei Sekunden liest. Jede Zahl hat eine Quelle (Übergabedatei je Produkt); Platzhalter sind hier nicht erlaubt. */ /* Kennzahlen ohne Linien, mittig, mit Luft (Phil, 16.09.2026, Fassung A aus fünf Entwürfen): Die Tabellenform mit Linien oben und unten, Trennern und linksbündigem Text wirkte nicht mehr zeitgemäß. Die vier Werte stehen als Gruppe in der Mitte, jede Zahl trägt allein; am Telefon zwei Spalten. */ .nx-kennzahlen { display: grid; grid-template-columns: repeat(4, auto); justify-content: center; gap: 1rem 5rem; margin-top: 2.8rem; margin-bottom: 1.5rem; /* ersetzt das Polster der alten Zellen; ohne es stieß die Group-H2 an die Beschriftung (Tyrion, 0.33) */ text-align: center; } .nx-kennzahlen > div { display: grid; gap: 0.35rem; align-content: start; } .nx-kennzahlen b { justify-self: center; /* so breit wie die Ziffern: Der Group-Verlauf lag sonst über der ganzen Zelle, die Ziffer stand einfarbig in der Mitte (Tyrion, 0.33) */ font-size: 2.8rem; font-weight: 600; letter-spacing: -0.025em; line-height: 1; color: var(--p-akzent, var(--p-ink)); white-space: nowrap; font-variant-numeric: tabular-nums; } .nx-kennzahlen span { color: var(--nx-gedaempft); font-size: 0.85rem; } /* Tablet: eine Reihe mit engerem Abstand (die gewählte Vorschau zeigte bei 768 px vier Werte nebeneinander); Telefon: zwei Spalten. */ @media (max-width: 50rem) { .nx-kennzahlen { gap: 1rem 2.5rem; } } @media (max-width: 40rem) { .nx-kennzahlen { grid-template-columns: 1fr 1fr; gap: 1.6rem 1rem; } .nx-kennzahlen b { font-size: 2.4rem; } } /* --------------------------------------------------------------- Objekte */ /* Einen Kasten bekommt nur, was ein Objekt ist: Bericht, Tabelle, Rechner, Gespräch, Kurve, Preiskarte, Vorrat. Fließtext bekommt keinen. */ .nx-objekt { background: var(--nx-flaeche); border: 1px solid var(--nx-rand); border-radius: var(--nx-radius); padding: 1.3rem 1.4rem; box-shadow: var(--nx-schatten); } .nx-objekt__kopfzeile { display: flex; justify-content: space-between; align-items: baseline; gap: 0.2rem 1rem; flex-wrap: wrap; /* lange Ländernamen mit Plakette bei 320 px (Karat, 14.09.2026) */ font-size: 0.85rem; font-weight: 600; color: var(--nx-gedaempft); margin-bottom: 0.9rem; } /* Zustandsmarke im Objekt: „Example", „Live", „Germany". Trägt Information, ist deshalb erlaubt; über Überschriften gibt es keine Marken. */ .nx-marke-zustand { font-style: normal; font-weight: 600; color: var(--p-ink); border: 1px solid var(--nx-rand); border-radius: var(--nx-radius-xs); padding: 0.05rem 0.5rem; font-size: 0.85rem; white-space: nowrap; } .nx-kv { display: grid; gap: 0.55rem; } .nx-kv > div { display: flex; justify-content: space-between; gap: 1rem; } .nx-kv b { font-weight: 600; } .nx-balken { height: 0.45rem; border-radius: var(--nx-radius-pill); background: var(--nx-tint-2); margin-top: 1rem; overflow: hidden; } .nx-balken i { display: block; height: 100%; background: var(--p-base); } /* Punktliste ohne Kasten */ .nx-liste { display: grid; gap: 0.5rem; padding: 0; margin: 0; list-style: none; } .nx-liste li { display: flex; gap: 0.7rem; align-items: flex-start; line-height: 1.45; } .nx-liste li::before { content: ''; flex: none; width: 0.55rem; height: 0.55rem; border-radius: 50%; /* Akzent statt base: base erreicht auf Weiß bei Karat 1,98:1 (Karat, 14.09.2026) */ background: var(--p-akzent, var(--p-ink)); margin-top: 0.5rem; } /* ------------------------------------------------------------ Abschnitte */ /* Jeder Abschnitt ist ein Objekt mit kurzem Text daneben, abwechselnd links und rechts. Wichtigkeit zeigt sich an der Größe des Objekts. */ .nx-abschnitt { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2.5rem 4rem; align-items: center; padding-block: 3rem; } .nx-abschnitt--rechts { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } .nx-abschnitt--rechts > .nx-abschnitt__text { order: 2; } .nx-abschnitt h2 { max-width: 18ch; } .nx-abschnitt__text p { color: var(--nx-gedaempft); margin-top: 0.9rem; max-width: 44ch; } .nx-abschnitt__text .nx-knopf { margin-top: 1.4rem; } .nx-abschnitt + .nx-abschnitt, .nx-breit { border-top: 1px solid var(--nx-rand); } /* Rasterkinder dürfen schmaler werden als ihr Inhalt, sonst schiebt ein Eingabefeld oder eine Tabelle die Spalte über den Rand (400 px, 12.09.). */ .nx-abschnitt > *, .nx-breit > *, .nx-buehne__innen > *, .nx-objekt { min-width: 0; } /* Ein Objekt über die volle Breite, Überschrift und Satz mittig darüber. */ .nx-breit { padding-block: 3rem; display: grid; gap: 1.4rem; justify-items: center; text-align: center; } .nx-breit > p { color: var(--nx-gedaempft); max-width: 56ch; } .nx-breit .nx-objekt { width: 100%; text-align: left; } .nx-breit .nx-objekt--schmal { max-width: 52rem; } @media (max-width: 50rem) { .nx-abschnitt, .nx-abschnitt--rechts { grid-template-columns: 1fr; } .nx-abschnitt--rechts > .nx-abschnitt__text { order: 0; } } /* -------------------------------------------------------------- Blatt */ /* Für lange Seiten (Funktionen, Preise): feste Zeilen, Begriff links in Baloo, Inhalt rechts. Jede Zeile beginnt mit einem Satz. Keine Karten. */ .nx-blatt { border-left: 3px solid var(--p-ink); margin-top: 2rem; } .nx-zeile { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: 1rem 3rem; padding: 2.2rem 0 2.2rem 2rem; border-bottom: 1px solid var(--nx-rand); } .nx-zeile:last-child { border-bottom: 0; } .nx-zeile > h2 { font-size: 1.35rem; padding-top: 0.15rem; } .nx-zeile__inhalt { display: grid; gap: 1rem; align-content: start; } .nx-zeile__satz { font-size: 1.35rem; font-weight: 600; max-width: 36ch; letter-spacing: -0.005em; line-height: 1.3; } .nx-zeile p { color: var(--nx-gedaempft); max-width: 62ch; } @media (max-width: 50rem) { .nx-zeile { grid-template-columns: 1fr; padding-left: 1.2rem; } } /* ------------------------------------------------------------- Matrix */ /* Preise als Tabelle: Stufen als Spalten, Merkmale als Zeilen, der Betrag groß in Manrope 600, die empfohlene Spalte getönt. Häkchen als SVG, nicht als Zeichen (U+2713 fehlt in beiden Schriften). Kopfregel (Phil, 12./13.09.2026): Der Kopf hat drei Zeilen, Marke, Name, Preis. Marke und Preis ohne Umbruch; der Name bricht nur, wenn die Spalte zu schmal ist (Phil, 15.09.2026, nach Karat: „Plus monatlich" lief am Telefon in die Nachbarspalte). Kein Text neben der Zahl. Die Einheit steht einmal in der Ecke oben links (.nx-matrix__einheit, "per month") oder im Spaltennamen, wenn sie je Spalte verschieden ist (Karat: "Plus monthly", "Plus yearly", "Plus once"). Keine Zeile "Best for": Wer eine Stufe braucht, sagen die Merkmale, nicht ein Etikett (Phil, 13.09.). Alle Wertespalten sind gleich breit; unter 40 rem scrollt die Tabelle im Objekt. Textregel: Stufenname ein Wort oder Name plus Abrechnung, Marke höchstens zwei kurze Wörter. */ /* Auf dem Telefon geht die Matrix seitlich weiter: Schatten an den Kanten, die nur erscheinen, wo noch Inhalt liegt. Rechts liegt er auf dem Grund der Hülle und wird am Ende vom mitscrollenden Deckstreifen verdeckt (background-attachment: local); die Tönung der empfohlenen Spalte ist deshalb durchscheinend. Links lag er unter der stehenden ersten Spalte und war nie zu sehen: Dort trägt jetzt jede Zelle der Spalte einen Streifen, der mit dem Scrollen einblendet (Karat, 15.09.2026: nach dem Scrollen auf keiner Seite ein Schatten). */ /* Der waagerechte Innenabstand liegt in den Randzellen, nicht in der Hülle: sticky klebt am Inhaltsrand des Scrollcontainers, und im Innenabstand liefen gescrollte Zellen sichtbar durch (Butler, 15.09.2026). Tastaturzugang: tabindex="0" role="region" aria-label am Element (referenz.html). */ .nx-matrix-huelle { overflow-x: auto; padding-inline: 0; container-type: inline-size; /* 100cqi = sichtbare Breite, für die Fußzeile */ background: linear-gradient(270deg, var(--nx-flaeche) 40%, transparent) right / 2.5rem 100% no-repeat local, linear-gradient(270deg, var(--nx-scrollschatten), transparent) right / 1.25rem 100% no-repeat scroll, var(--nx-flaeche); /* Aus dem Rand für Bedienelemente statt Schwarz: Schwarz mit 0,3 trug hell 2,1:1, auf dunklem Grund aber nur 1,06:1 (Pilot, 0.22 bis 0.25). So trägt die Kante in beiden Modi gut 2:1, ohne eigenen Dunkel-Wert. background-origin: content-box: Der Streifen rechts beginnt wie der linke an der Tabelle, nicht im Innenabstand darüber (Tyrion, 0.27). */ background-origin: content-box; --nx-scrollschatten: color-mix(in srgb, var(--nx-rand-stark) 80%, transparent); /* 80 statt 70 %: über der getönten Spalte trug die Kante hell nur 1,83:1 (Tyrion, 0.27) */ } .nx-matrix { width: 100%; min-width: 40rem; table-layout: fixed; border-collapse: collapse; font-size: 0.95rem; } .nx-matrix th:first-child { width: 26%; } /* Beim seitlichen Scrollen bleibt die Beschriftung stehen, sonst sieht man am Ende nur Häkchen (Pilot, 15.09.2026). Der Zellgrund deckt die Spalten darunter. */ .nx-matrix th:first-child, .nx-matrix td:first-child { position: sticky; left: 0; z-index: 1; background: var(--nx-flaeche); padding-left: 1.4rem; } .nx-matrix th:last-child, .nx-matrix td:last-child { padding-right: 1.4rem; } .nx-matrix-huelle:focus-visible { outline: 2px solid var(--p-ink); outline-offset: 2px; } .nx-matrix thead th:first-child::after, .nx-matrix tbody td:first-child::after { content: ''; position: absolute; top: 0; bottom: -1px; left: 100%; width: 1.25rem; background: linear-gradient(90deg, var(--nx-scrollschatten), transparent); pointer-events: none; opacity: 0; } /* Einblenden mit dem Scrollen (Chrome, Edge, Safari ab 26). Wo der Browser animation-timeline nicht kennt (Firefox), setzt familie.js data-gescrollt an der Hülle. Das Einblenden folgt dem Finger, es ist keine Bewegung und bleibt bei prefers-reduced-motion. */ .nx-matrix-huelle[data-gescrollt] .nx-matrix thead th:first-child::after, .nx-matrix-huelle[data-gescrollt] .nx-matrix tbody td:first-child::after { opacity: 1; } @supports (animation-timeline: scroll()) { .nx-matrix-huelle { scroll-timeline: --nx-matrix x; } .nx-matrix thead th:first-child::after, .nx-matrix tbody td:first-child::after { animation: nx-matrix-links linear both; animation-timeline: --nx-matrix; animation-range: 0 1.5rem; } } @keyframes nx-matrix-links { to { opacity: 1; } } .nx-matrix th, .nx-matrix td { padding: 0.65rem 0.8rem; text-align: left; border-bottom: 1px solid var(--nx-rand); vertical-align: top; } .nx-matrix th { font-weight: 500; color: var(--nx-gedaempft); font-size: 0.85rem; } /* Unten ausgerichtet: Bricht ein Name in einer Spalte um, stehen die Preise trotzdem auf einer Höhe. */ .nx-matrix thead th { vertical-align: bottom; color: var(--nx-schrift); } /* Kopfzellen der inneren Wertespalten mit schmalerem Innenabstand: Karats „monatlich" war am Telefon 92,9 px breit bei 92,8 px Platz und brach mitten im Wort (Tyrion, 0.27). Text steht mittig, der Unterschied zur Zelle darunter ist nicht zu sehen. */ .nx-matrix thead th:not(:first-child):not(:last-child) { padding-inline: 0.5rem; } /* Die Ecke oben links trägt die Einheit, einmal für alle Spalten. */ .nx-matrix .nx-matrix__einheit { vertical-align: bottom; text-align: left; font-weight: 500; font-size: 0.95rem; /* Währungscodes sind Versalien: nicht unter 14 px (Karat, 14.09.2026) */ color: var(--nx-gedaempft); } .nx-matrix .nx-stufe { text-wrap: balance; hyphens: auto; overflow-wrap: anywhere; /* letzter Ausweg für ein Wort, das auch getrennt nicht passt */ font-family: var(--nx-font-display); font-weight: 400; font-size: 1.35rem; display: block; } /* Die Zeile für die Marke (Recommended) gibt es in jeder Spalte, gefüllt nur bei der empfohlenen. So stehen Name und Preis in allen Spalten auf gleicher Höhe, statt je nach Marke und Beschreibung zu springen (Phil, 12.09.). */ .nx-matrix .nx-stufe::before { content: attr(data-empfohlen); display: block; height: 1.4em; line-height: 1.4; /* feste Höhe: mit min-height stand der Preis der markierten Spalte 2 px tiefer (Karat) */ font-family: var(--nx-font-body); font-size: 0.85rem; font-weight: 600; color: var(--nx-schrift); /* auf der Tönung trug --p-ink bei Pilot nur 4,38:1 (15.09.2026) */ white-space: nowrap; } /* Der Preis steht ruhig: Manrope 400, 1,6 rem, normale Laufweite (Phil, 13.09.2026, Fassung B; kurz davor D mit 1,35 rem und 600). Bis 0.12 war er 2 rem in 600 mit enger Laufweite, vier fette Zahlen in einer Reihe wirkten wie Warnungen. Beträge bleiben in der Textschrift (Tabellenziffern), nie in Baloo. */ .nx-matrix .nx-preis { display: block; font-size: 1.6rem; font-weight: 500; line-height: 1; margin: 0.35rem 0 0.2rem; letter-spacing: 0; white-space: nowrap; } /* Wertespalten mittig: Haken, Striche und Zahlen stehen untereinander in der Spaltenmitte; die Merkmalspalte bleibt links (Phil, 12.09.). */ .nx-matrix td:not(:first-child), .nx-matrix th:not(:first-child) { text-align: center; } .nx-matrix .nx-ja { color: var(--p-ink); } .nx-matrix .nx-ja svg, .nx-matrix .nx-nein svg { width: 0.95rem; height: 0.95rem; vertical-align: -0.1em; } .nx-matrix .nx-nein { color: var(--nx-gedaempft); } .nx-matrix .nx-empf.nx-nein, .nx-matrix th.nx-empf { color: var(--nx-schrift); } /* auf der Tönung trägt gedämpft keine 4,5:1 (Karat, 14.09.2026) */ /* Durchscheinend, damit der Scrollschatten rechts auch über dieser Spalte sichtbar bleibt. Hell exakt --nx-tint auf Weiß, dunkel 10 % statt 12 % auf dem helleren Flächengrau, nahe an der alten Tönung (L* +2,4 bis +2,8). */ .nx-matrix { --nx-empf-grund: color-mix(in srgb, var(--p-light) 20%, transparent); } :root[data-theme='dark'] .nx-matrix { --nx-empf-grund: color-mix(in srgb, var(--p-light) 10%, transparent); } .nx-matrix .nx-empf { background: var(--nx-empf-grund); } .nx-matrix tfoot td { border-bottom: 0; padding-top: 1rem; color: var(--nx-gedaempft); } /* Die Fußzeile ist so breit wie die Tabelle (mindestens 40 rem). Am Telefon war ihr Satz rechts abgeschnitten und lief beim Scrollen links hinaus (Karat, 15.09.2026). Der Satz steht deshalb in einem span, der in der sichtbaren Breite umbricht und stehen bleibt. */ .nx-matrix tfoot td:first-child { position: static; background: none; } .nx-matrix tfoot td > span { display: block; position: sticky; left: 1.4rem; max-width: calc(100cqi - 2.8rem); } /* Aufklappbare Erklärungen (Begriff und Antwort), ein details je Paar. Fallen aus Butlers Eigenbau (15.09.2026): kein display: flex am summary, sonst fehlt das Aufklappzeichen; das offene Element wächst nur nach unten, die Zeile springt nicht; jede Frage ist eine eigene Gruppe. */ .nx-erklaerungen { display: grid; width: 100%; border-top: 1px solid var(--nx-rand); text-align: left; max-width: 52rem; margin-inline: auto; } /* width: im mittigen Abschnitt schrumpfte der Block auf seinen Inhalt und sprang beim Aufklappen (Butler, 15.09.2026) */ .nx-erklaerung { border-bottom: 1px solid var(--nx-rand); padding-block: 0.2rem; } .nx-erklaerung summary { cursor: pointer; font-weight: 600; padding: 0.6rem 0.2rem; min-height: 2.75rem; box-sizing: border-box; color: var(--nx-schrift); } .nx-erklaerung summary::marker { color: var(--p-akzent, var(--p-ink)); } .nx-erklaerung summary:hover { color: var(--p-ink); } .nx-erklaerung > :not(summary) { margin: 0 0 0.8rem 1.2rem; max-width: 62ch; } /* Erklärung an einer Matrixzeile: der ganze Zeilenname ist ein Knopf mit ⓘ, die Erklärung öffnet als popover des Browsers (Butler, 15.09.2026, Fassung D aus vier gebauten Ansätzen; davor standen 15 Erklärungen als Block unter der Matrix, 775 px länger). Fallen, die der Baustein abfängt: - kein Tooltip: am Telefon nicht erreichbar, in der scrollenden Matrix abgeschnitten; das popover liegt über allem - der ganze Name ist der Knopf, das ⓘ steht darin: sonst heißen alle Knöpfe gleich oder die Zelle liest den Namen doppelt vor - das ⓘ hängt am letzten Wortteil (nach Leerzeichen oder Bindestrich), sonst lief „Barrierefreiheits-Befund" 73 px aus der stehenden Spalte - ohne familie.js steht die Erklärung als Blatt am unteren Rand; mit Skript rechts neben der ganzen ersten Spalte (unter dem Knopf deckte sie die ⓘ der nächsten Zeilen und fing deren Klicks ab) Markup in referenz.html, Zeilen „Conversations per month" und „(MCP)". */ .nx-info { display: inline-block; /* Chrome rechnet bei button ohnehin so; die senkrechten Ränder gelten nur damit */ font: inherit; line-height: inherit; color: inherit; text-align: left; background: none; border: 0; margin: -0.65rem -0.5rem; padding: 0.65rem 0.5rem; /* Trefferfläche 44 px (einzeilig so hoch wie die Zelle), ohne sie höher zu machen; waagerecht Platz für den Fokusring */ cursor: pointer; border-radius: var(--nx-radius-xs); } .nx-info__ende { white-space: nowrap; } .nx-info__symbol { display: inline-block; width: 1rem; height: 1rem; margin-left: 0.35rem; vertical-align: -0.2em; color: var(--nx-gedaempft); border-radius: 50%; box-shadow: 0 0 0 0.3rem transparent; } .nx-info:hover .nx-info__symbol, .nx-info[data-offen] .nx-info__symbol { color: var(--p-ink); background: var(--nx-tint); box-shadow: 0 0 0 0.3rem var(--nx-tint); } /* Fokusring nach innen: nach außen lag seine Unterkante in der nächsten Zeile, deren stehende erste Zelle mit deckendem Grund darübermalt (Butler, 15.09.2026, 15 von 15 Stichproben). */ .nx-seite .nx-info:focus-visible { outline-offset: -2px; } .nx-info__pop { position: fixed; inset: auto 12px 12px 12px; margin: 0; width: auto; max-width: none; padding: 0.8rem 1rem; border: 1px solid var(--nx-rand-stark); border-radius: var(--nx-radius-sm); background: var(--nx-flaeche); color: var(--nx-schrift); box-shadow: var(--nx-schatten); font-size: 0.95rem; /* Größe der Matrix, keine zehnte Stufe (Tyrion, 15.09.2026) */ line-height: 1.5; text-align: left; } @media (min-width: 37.5rem) { .nx-info__pop { inset: auto 0 12px 0; margin-inline: auto; width: min(36rem, calc(100vw - 24px)); } } .nx-info__pop[data-neben] { width: min(22rem, calc(100vw - 24px)); margin: 0; } .nx-info__pop b { display: block; margin-bottom: 0.25rem; font-weight: 600; } /* für Vorleser aria-hidden: wäre die dritte Nennung des Namens */ .nx-info__pop p { margin: 0; color: var(--nx-gedaempft); } /* Kleine Zahlen-Kacheln neben der Matrix (Nachkauf, Pakete) */ .nx-zahlen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; width: 100%; max-width: 52rem; } .nx-zahlen > div { display: grid; gap: 0.25rem; padding: 1rem 1.2rem; border: 1px solid var(--nx-rand); border-radius: var(--nx-radius); } .nx-zahlen b { font-size: 2rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1; } .nx-zahlen span { color: var(--nx-gedaempft); font-size: 0.85rem; } /* Überschrift über einer Zahlenreihe (Butler: „Gespräche nachkaufen") */ .nx-zahlen__titel { width: 100%; max-width: 52rem; text-align: left; margin-top: 1rem; } @media (max-width: 50rem) { .nx-zahlen { grid-template-columns: 1fr; } } /* -------------------------------------------------------------- Aufruf */ .nx-aufruf { margin-top: 1rem; background: var(--nx-tint); border-radius: var(--nx-radius); padding: 2.5rem 3rem; display: grid; grid-template-columns: auto 1fr; gap: 3rem; align-items: center; } .nx-aufruf img { height: 13rem; width: auto; display: block; } .nx-aufruf p { color: var(--nx-schrift); margin: 0.7rem 0 1.3rem; max-width: 50ch; } /* auf --nx-tint erreicht gedämpft nur 4,1 bis 4,4:1 */ @media (max-width: 50rem) { .nx-aufruf { grid-template-columns: 1fr; padding: 2rem 1.5rem; } .nx-aufruf img { height: 9rem; } } /* ------------------------------------------------------------------ Fuß */ /* Hier steht die Familie: Produkte mit eigener Seite und die Group, die eigene Marke hervorgehoben. Zweite Zeile: Hosting, Rechtliches, Schalter. */ .nx-fuss { border-top: 1px solid var(--nx-rand); margin-top: 3rem; padding-block: 2.2rem 2.6rem; font-size: 0.95rem; color: var(--nx-gedaempft); } .nx-fuss__zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.6rem; } .nx-fuss__zeile + .nx-fuss__zeile { margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid var(--nx-rand); } .nx-familie { display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; align-items: center; margin: 0; padding: 0; list-style: none; } .nx-familie a { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.75rem; text-decoration: none; color: var(--nx-schrift); font-weight: 600; } .nx-familie img { width: 1.1rem; height: 1.1rem; display: block; } /* Das eigene Produkt steht in der Reihe wie alle anderen, ohne Hervorhebung: Sichtbar und zugleich markiert wirkte wie eine Auswahl (Phil, 13.09.2026). aria-current bleibt im Markup für Vorleser. */ .nx-fuss__rechts { margin-left: auto; display: flex; flex-wrap: wrap; gap: 1.2rem; } .nx-fuss__rechts a, .nx-fuss__rechts button { display: inline-flex; align-items: center; min-height: 2.75rem; text-decoration: none; font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } /* Der Schalter für Dunkel ist ein Knopf, kein Link: Rahmen wie die Sprachwahl. */ .nx-fuss__rechts button { border: 1px solid var(--nx-rand); border-radius: var(--nx-radius-sm); /* Knöpfe 10 px (Phil, 16.09.2026) */ padding: 0.25rem 0.75rem; font-weight: 600; } /* --------------------------------------------------- Group-Bausteine */ /* Familienporträt: die Figuren nebeneinander, leicht überlappend. */ .nx-portrait { display: flex; align-items: flex-end; justify-content: center; grid-column: 1 / -1; } /* Jede Figur trägt ihre Höhe aus der Zeichnung als --h (Anteil an der Leinwand, 0,85 bis 0,93); alle stehen im selben Maßstab auf der Linie. Bis zum 13.09. war jede zweite Figur kleiner und zwei Pixel tiefer gesetzt, dadurch wirkten Pilot, Nutria und Scout wie eine andere Größe (Phil). */ .nx-portrait img { height: calc(20rem * var(--h, 1)); width: auto; margin-inline: -0.9rem; } @media (max-width: 43.75rem) { .nx-portrait img { height: calc(7.5rem * var(--h, 1)); margin-inline: -0.45rem; } } /* Produktliste: Bildmarke, Name, ein Satz, Status rechts. Keine Karten. */ .nx-produktliste { display: grid; margin: 0; padding: 0; list-style: none; } .nx-produktliste li > a, .nx-produktliste li > div { display: grid; grid-template-columns: 2.2rem 10rem 1fr auto; gap: 1.2rem; align-items: center; padding: 0.9rem 0; border-bottom: 1px solid var(--nx-rand); text-decoration: none; } .nx-produktliste li:first-child > * { border-top: 1px solid var(--nx-rand); } .nx-produktliste img { width: 1.7rem; height: 1.7rem; display: block; border-radius: 22%; } .nx-produktliste b { font-family: var(--nx-font-display); font-weight: 400; font-size: 1.2rem; } .nx-produktliste span { color: var(--nx-gedaempft); font-size: 0.95rem; } .nx-produktliste em { justify-self: end; font-style: normal; font-size: 0.85rem; font-weight: 600; padding: 0.15rem 0.55rem; border-radius: var(--nx-radius-xs); border: 1px solid var(--nx-rand); color: var(--nx-gedaempft); white-space: nowrap; } .nx-produktliste em.nx-live { color: var(--nx-gut); border-color: color-mix(in srgb, var(--nx-gut) 35%, transparent); } @media (max-width: 43.75rem) { .nx-produktliste li > a, .nx-produktliste li > div { grid-template-columns: 2rem 1fr auto; } .nx-produktliste span { display: none; } }