/* * Reach. * * Zwei Oberflächen in einer Datei, und das ist Absicht: die Redaktion rendert * die öffentliche Seite in ihrer Leinwand, also müssen beide Regelsätze * nebeneinander bestehen können, ohne sich zu stören. Die Trennlinie ist der * GELTUNGSBEREICH — alles Redaktionelle hängt an `.ui` (gesetzt am der * Redaktionslayouts), die Website hängt an `.site`. * * Die Palette ist die workforceOS-CI (documentation/specification/ui_guidelines.md * §1.1), die Form die der Pulse-Apps: dunkle Seitenleiste, ruhige Fläche daneben. */ /* --- Marken und Masse --------------------------------------------------- */ :root { --deep-purple: #341539; --midnight: #0c061e; --grey: #f4f2f4; --purple: #a020f0; --fuchsia: #ff00ff; --emerald: #10b981; --amber: #e0a020; --crimson: #d5453f; --sidebar-w: 268px; --radius: 14px; --radius-sm: 9px; --radius-lg: 20px; /* EIN Abstandsmass, davon abgeleitet. Vorher standen im Stylesheet acht verschiedene Werte zwischen 8 und 24 Pixeln, und darum sass nichts auf einer Linie. */ --gap: 20px; --gap-sm: 12px; --gap-lg: 28px; } /* --- Die Farben der Redaktion ------------------------------------------- * * ⚠️ NUR UNTER `.ui`. Ein dunkles Erscheinungsbild ist die Vorliebe der * REDAKTEURIN — die Website daneben gehört dem Kunden und hat ihre eigenen * Farben. Läge das an `:root`, färbte die Systemeinstellung eines Besuchers * die Seite eines fremden Unternehmens um. */ .ui { color-scheme: light; --bg: #f6f4f7; --surface: #ffffff; --surface-2: #fbfafb; --surface-3: #f1eef2; --line: #e6e2e8; --line-strong: #d4ced8; --ink: #1b1420; --ink-soft: #6b6472; --ink-faint: #948e9b; --accent: var(--purple); --accent-ink: #ffffff; --accent-wash: rgba(160, 32, 240, .1); /* ⚠️ SECHS FARBEN FUER ANTEILE, IN FESTER REIHENFOLGE — siehe die Ringe der Zugriffe (Editor::StatsHelper). Geprueft mit dem Rechner der dataviz- Anleitung gegen DIESEN Grund: Helligkeit, Buntheit, Farbsehschwaeche (schlechtestes Nachbarpaar ΔE 9.1, Ziel ≥ 8) und Normalsicht (19.6, Grenze 15). Wer eine tauscht, laesst ihn neu laufen — fuer BEIDE Erscheinungsbilder, die dunklen Werte sind dieselben Farbtoene, auf den dunklen Grund gestuft, und keine zweite Palette. */ --series-1: #2a78d6; --series-2: #eb6834; --series-3: #1baf7a; --series-4: #eda100; --series-5: #e87ba4; --series-6: #4a3aa7; /* ⚠️ DIE MARKENFARBEN DER APPS, NICHT DIE ROHEN CI-WERTE. `--fuchsia` ist #ff00ff und `--purple` #a020f0 — dieselben Namen wie in `DesignSystem`, aber nicht dieselben Farben: dort steht CONNECT auf #D93389 und MOVE auf #944DD9. Wer zwischen App und Redaktion wechselt, sieht sonst zweimal „dasselbe" Pink in zwei Toenen. Die rohen Werte bleiben fuer die Website daneben, die Redaktion nimmt diese hier. */ --brand-fuchsia: #d93389; --brand-purple: #944dd9; --brand-deep: #5c33b8; --brand-glow: rgba(217, 51, 137, .3); /* ⚠️ DAS SIGNET BEKOMMT EIGENE TOKEN. Gemeldet: „das reachlogo in der ganz ursprünglichen fassung war ein deep purple punkt, aber es braucht etwas optimiertes, der aktuelle ausgewaschene punkt ist sicher nichts, weder im menü noch im login." Der ausgewaschene Punkt kam aus `--brand-fuchsia`/`--brand-purple` (#d93389/#944dd9). Die sind ABSICHTLICH an CONNECT und MOVE in den workforceOS-Apps angeglichen — sie hier umzufaerben, faerbte die halbe Redaktion mit um. Das Signet trägt darum eigene Werte, und zwar die der Marke: Deep Purple als Grund, Fuchsia als Signal. */ --mark-ground: #341539; --mark-signal: #ff00ff; /* ⚠️ HELLER ALS DER INHALT, nicht dunkler — wie `DS.sidebarBg` in den Apps. Ohne Helligkeitsunterschied steht die Navigation nicht NEBEN dem Inhalt, sondern verschwimmt mit ihm; mit einer dunklen Wand rahmt sie ihn. */ --rail-bg: #ffffff; --shadow-sm: 0 1px 2px rgba(20, 8, 30, .05); --shadow: 0 2px 8px rgba(20, 8, 30, .06), 0 1px 2px rgba(20, 8, 30, .04); --shadow-lg: 0 12px 32px rgba(20, 8, 30, .14); } /* Ein Satz Werte, zweimal angewandt: einmal für „richte dich nach dem System“, einmal für die ausdrückliche Wahl. Doppelt geschrieben, weil CSS keine Variablen-Gruppen kennt — und lieber doppelt als über eine Klasse, die irgendwo vergessen wird. */ @media (prefers-color-scheme: dark) { .ui:not([data-theme="light"]) { color-scheme: dark; --bg: #120c1c; --surface: #1a1327; --surface-2: #1f1730; --surface-3: #271d3a; --line: #2e2440; --line-strong: #40334f; --ink: #f2eef7; --ink-soft: #a79fb5; --ink-faint: #7d7489; --accent: #c05cff; --accent-ink: #14091d; --accent-wash: rgba(192, 92, 255, .16); --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500; --series-5: #d55181; --series-6: #9085e9; /* ⚠️ AUFGEHELLT, WIE `readableAccent` IN DEN APPS. #5C33B8 auf #120c1c ist dunkel auf dunkel — genau der Fehler, der dort am 2026-09-02 gemeldet wurde: WORK und die aktiven Symbole der iPad-Leiste verschwanden. */ --brand-fuchsia: #f06ab0; --brand-purple: #b98bea; --brand-deep: #9b7be8; --brand-glow: rgba(240, 106, 176, .28); /* Auf dunklem Grund verschwaende #341539 — aufgehellt, wie die brand-Token darueber und aus demselben Grund. */ --mark-ground: #6b2c78; --mark-signal: #ff5cff; /* Heller als --bg (#120c1c), damit die Schiene sich abhebt. */ --rail-bg: #1c1429; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --shadow: 0 2px 10px rgba(0, 0, 0, .45); --shadow-lg: 0 16px 40px rgba(0, 0, 0, .55); } } .ui[data-theme="dark"] { color-scheme: dark; --bg: #120c1c; --surface: #1a1327; --surface-2: #1f1730; --surface-3: #271d3a; --line: #2e2440; --line-strong: #40334f; --ink: #f2eef7; --ink-soft: #a79fb5; --ink-faint: #7d7489; --accent: #c05cff; --accent-ink: #14091d; --accent-wash: rgba(192, 92, 255, .16); --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500; --series-5: #d55181; --series-6: #9085e9; /* ⚠️ AUFGEHELLT, WIE `readableAccent` IN DEN APPS. #5C33B8 auf #120c1c ist dunkel auf dunkel — genau der Fehler, der dort am 2026-09-02 gemeldet wurde: WORK und die aktiven Symbole der iPad-Leiste verschwanden. */ --brand-fuchsia: #f06ab0; --brand-purple: #b98bea; --brand-deep: #9b7be8; --brand-glow: rgba(240, 106, 176, .28); /* Auf dunklem Grund verschwaende #341539 — aufgehellt, wie die brand-Token darueber und aus demselben Grund. */ --mark-ground: #6b2c78; --mark-signal: #ff5cff; --rail-bg: #1c1429; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --shadow: 0 2px 10px rgba(0, 0, 0, .45); --shadow-lg: 0 16px 40px rgba(0, 0, 0, .55); } /* --- Grundlage ---------------------------------------------------------- */ * { box-sizing: border-box; } body { margin: 0; font-family: "Suisse Int'l", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; font-size: 15px; line-height: 1.5; color: var(--ink); background: var(--canvas, var(--grey)); -webkit-font-smoothing: antialiased; } .ui body { background: var(--bg); } h1, h2, h3 { font-family: "Neue Regrade", "Suisse Int'l", Arial, sans-serif; font-weight: 600; } [hidden] { display: none !important; } /* Ein sichtbarer Fokus, überall und in einer Farbe. Wer mit der Tastatur arbeitet, muss sehen, wo er steht — und `:focus-visible` zeigt ihn nur dort, wo er gebraucht wird, statt bei jedem Mausklick. */ .ui :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } /* --- Der Rahmen --------------------------------------------------------- */ .shell { display: flex; min-height: 100vh; } /* ⚠️ EINE SCHIENE, KEINE BREITE LEISTE — und sie ist HELLER als der Inhalt, nicht dunkler. Beides ist aus den Apps übernommen (`IPadRootView.sidebar`, `DS.sidebarBg`): dort steht das Zeichen über dem Wort auf 84 Punkten Breite, und die Navigationsfläche hebt sich vom Inhalt ab, statt ihn zu rahmen. Die Redaktion hatte stattdessen eine 268 Pixel breite, dunkelviolette Wand — hübsch für sich und in nichts wie die Anwendung daneben. */ .rail { width: 86px; flex: 0 0 86px; background: var(--rail-bg); color: var(--ink); border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; padding-bottom: 12px; position: sticky; top: 0; height: 100vh; /* ⚠️ UND DIE SCHIENE LIEGT ÜBER DEM INHALT. `sticky` macht sie zu einem eigenen Stapel: das `z-index: 40` des Kontomenüs galt nur IN ihr, und jedes positionierte Element des Inhalts (Vorschau der Startseite, Kacheln der Medien) malte später darüber. Gemeldet: „das callout vom user in der seitenleiste liegt hinter der vorschau startseite und den media assets" — auf reinen Textseiten gab es nichts Positioniertes, dort stand es vorne. */ z-index: 50; /* ⚠️ HIER DARF NICHTS GESCHNITTEN WERDEN. Die Schiene trug `overflow-y: auto`, und damit klippte sie alles, was ueber ihre 86 Pixel hinausragt — das Aufklapp-Menue des Kontos steht bei `left: 100%` und war deshalb weg, mitsamt Abmelden, Sprache und Erscheinungsbild. Ein Menue, das keiner sieht, ist kein Menue. Gescrollt wird die Navigation, nicht die Schiene. */ overflow: visible; } /* ⚠️ DAS ZEICHEN TRAEGT DIE FARBE, NICHT DAS BAND DAHINTER. Kurz stand hier ein violettes Band mit einem weissen Quadrat darauf — dieselbe Marke wie ueberall sonst, nur ohne ihre Farben, und in nichts wie die Leiste der Apps. */ .rail__brand { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 13px 0 9px; flex: none; } /* ⚠️ EINE MARKE, EINE REGEL. Die Schiene und der Anmeldebildschirm trugen `.rail__mark` und `.sidebar__mark` — zwei Namen fuer dasselbe Zeichen. Als die Schiene neu gebaut wurde, verschwand die zweite Regel und niemandem fiel es auf: der Punkt auf dem Anmeldebildschirm war danach ein leeres Element ohne Groesse und ohne Farbe. Wer sich nicht anmelden kann, sieht genau diesen Bildschirm. */ /* ⚠️ EIN PUNKT IST KEIN ZEICHEN. Hier stand ein Farbverlauf in einem abgerundeten Quadrat — bei 26px ein rosa Fleck, der nichts sagt und nichts wiedererkennbar macht. Neu die Handschrift des Hauses in klein: der Grund in Deep Purple, oben links die grosse gekappte Ecke, unten rechts scharf — genau die Kappung, die auf der Website jede erste Karte am Bild und jede dritte an der weissen Flaeche traegt. Darin der Signalpunkt, so wie „Pixel Pink" im Fuss von netsuisse.com steht. ⚠️ OHNE BILDDATEI. Das Zeichen steht in der Schiene UND auf dem Anmeldebildschirm — und wer sich nicht anmelden kann, sieht genau den. Eine Datei, die nicht laedt, waere dort ein leeres Kaestchen; zwei Regeln laden immer. */ .brand-mark { --mark-size: 26px; width: var(--mark-size); height: var(--mark-size); flex: none; display: block; position: relative; background: var(--mark-ground); border-radius: calc(var(--mark-size) / 2) calc(var(--mark-size) / 3.6) calc(var(--mark-size) / 3.6) 0; box-shadow: 0 3px 10px var(--brand-glow); } /* Der Punkt sitzt in der scharfen Ecke: dort, wo das Auge nach der grossen Rundung ohnehin hinlaeuft. */ .brand-mark::after { content: ""; position: absolute; right: calc(var(--mark-size) / 6.5); bottom: calc(var(--mark-size) / 6.5); width: calc(var(--mark-size) / 3.7); height: calc(var(--mark-size) / 3.7); border-radius: 50%; background: var(--mark-signal); } .brand-mark--lg { --mark-size: 32px; } .rail__wordmark { font-size: 8px; font-weight: 800; letter-spacing: .15em; color: var(--ink-faint); } /* --- Woran gerade gearbeitet wird ---------------------------------------- */ /* Sichtbarer Zustand mit dem Wechsel im selben Griff — wie der Kontowechsler in den Apps. Ohne ihn war die getroffene Wahl nach dem Klick unsichtbar und nur ueber einen Menuepunkt zu revidieren. */ .rail__site { position: relative; display: flex; justify-content: center; padding: 6px 6px 2px; } .sitepin { width: 100%; border: 0; background: none; cursor: pointer; font: inherit; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 2px; border-radius: var(--radius-sm); } .sitepin:hover { background: var(--surface-3); } .sitepin__badge { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--accent-wash); color: var(--accent); font-size: 11.5px; font-weight: 700; letter-spacing: .02em; line-height: 1; } /* Ein langer Titel darf die 86 Pixel nicht sprengen — der ganze Name steht im `title` und im Aufklapp-Menue. */ .sitepin__name { max-width: 100%; font-size: 10px; color: var(--ink-soft); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* --- Das Konto und was daran hängt -------------------------------------- */ .rail__account { position: relative; display: flex; justify-content: center; padding: 12px 0 8px; } .account { border: 0; background: none; padding: 0; cursor: pointer; line-height: 0; } .account__face { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; display: block; box-shadow: 0 0 0 2.5px var(--rail-bg), 0 0 0 4px var(--accent); } .account__face--letters { display: grid; place-items: center; background: var(--accent); color: #fff; font-size: 14px; font-weight: 700; letter-spacing: .02em; line-height: 1; } .account:hover .account__face { box-shadow: 0 0 0 2.5px var(--rail-bg), 0 0 0 4px var(--ink); } /* Das Aufklapp-Menü. Es hängt an der Schiene und klappt nach RECHTS auf — bei einer Leiste am linken Rand führte die andere Richtung aus dem Bild. */ .callout { position: absolute; top: 8px; left: calc(100% + 8px); z-index: 40; min-width: 250px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 8px; display: flex; flex-direction: column; gap: 2px; } .callout__who { padding: 6px 10px 8px; display: flex; flex-direction: column; gap: 1px; } .callout__who strong { font-size: 14px; } .callout__who small { font-size: 11.5px; color: var(--ink-faint); } .callout__rule { border: 0; border-top: 1px solid var(--line); margin: 6px 0; } .callout__head { font-size: 9.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-faint); padding: 2px 10px 4px; } .callout__row { display: block; width: 100%; text-align: left; padding: 7px 10px; border: 0; background: none; border-radius: var(--radius-sm); font: inherit; font-size: 13.5px; color: var(--ink); text-decoration: none; cursor: pointer; } .callout__row:hover { background: var(--surface-3); } .callout__row--on { font-weight: 600; color: var(--accent); cursor: default; } .callout__row--on:hover { background: none; } .callout__row--quiet { color: var(--ink-soft); } /* `button_to` baut ein Formular um den Knopf; ohne das stünde jede Zeile auf einer eigenen. */ .callout form { margin: 0; display: contents; } .callout__field { padding: 4px 10px 8px; display: flex; flex-direction: column; gap: 5px; } .callout__label { font-size: 12px; color: var(--ink-soft); } .callout__select { width: 100%; padding: 7px 9px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; } .callout__build { font-size: 10.5px; color: var(--ink-faint); padding: 6px 10px 2px; letter-spacing: .02em; } /* Drei Segmente statt eines Umschalters — „wie das System" ist ein eigener Zustand und kein Zwischending. */ .segmented { display: flex; gap: 2px; padding: 2px; background: var(--surface-3); border-radius: var(--radius-sm); } .segmented__option { flex: 1; padding: 6px 4px; border: 0; background: none; border-radius: 6px; font: inherit; font-size: 12px; color: var(--ink-soft); cursor: pointer; } .segmented__option:hover { color: var(--ink); } .segmented__option--on { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: var(--shadow-sm); } /* --- Die Navigation ----------------------------------------------------- */ .rail__nav { display: flex; flex-direction: column; gap: 1px; padding: 4px 0; flex: 1 1 auto; min-height: 0; overflow-y: auto; } /* Winzige Versalien in der Bereichsfarbe, feine Linie darunter, KEINE Fläche: ein vollflächiger Balken liest sich wie eine Warnung und streitet mit den Einträgen, die er gliedern soll. */ .rail__group { font-size: 8.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--tint, var(--ink-faint)); text-align: center; margin: 12px 10px 3px; padding-bottom: 4px; border-bottom: 1px solid color-mix(in srgb, var(--tint, var(--line)) 30%, transparent); } .rail__nav > .rail__group:first-child { margin-top: 4px; } .rail__item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 9px 4px; margin: 0 6px; border-radius: var(--radius-sm); text-decoration: none; color: var(--ink-soft); } .rail__item:hover { background: var(--surface-3); color: var(--ink); } .rail__word { font-size: 9px; font-weight: 500; line-height: 1.1; text-align: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nav__icon { width: 20px; height: 20px; flex: 0 0 20px; } /* Fläche in der Bereichsfarbe plus ein Streifen an der Kante — beides aus `sidebarSelectionChrome` in der iPad-App. */ .rail__item--active { background: color-mix(in srgb, var(--tint, var(--accent)) 15%, transparent); color: var(--tint, var(--accent)); } .rail__item--active .rail__word { font-weight: 700; } .rail__item--active::before { content: ""; position: absolute; left: -6px; top: 50%; transform: translateY(-50%); width: 3px; height: 24px; border-radius: 2px; background: var(--tint, var(--accent)); } .rail__badge { position: absolute; top: 4px; right: 12px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--crimson); color: #fff; font-size: 10px; font-weight: 700; display: grid; place-items: center; } .content { flex: 1; min-width: 0; display: flex; flex-direction: column; } .topbar { background: var(--surface); border-bottom: 1px solid var(--line); padding: 14px var(--gap-lg); display: flex; align-items: center; gap: 16px; position: sticky; top: 0; z-index: 20; } .topbar__head { min-width: 0; } .topbar__title { font-size: 19px; margin: 0; line-height: 1.25; } .topbar__meta { color: var(--ink-soft); font-size: 12.5px; display: block; margin-top: 1px; } .topbar__actions { margin-left: auto; display: flex; gap: 8px; align-items: center; } /* ⚠️ EINE GRUPPE TRAEGT IHR WORT. Gemeldet am Medienbildschirm: „verschieben neben dropdown ist nicht intuitiv man versteht nicht wozu welcher button gehört, sind auch nicht einheitlich gross." Dort standen fuenf Bedienelemente in einer Reihe, die zu zwei ganz verschiedenen Vorgaengen gehoeren — Dateien hochladen, und mit dem Angekreuzten etwas tun. */ .topbar__group { display: inline-flex; align-items: center; gap: 8px; } .topbar__group + .topbar__group { padding-left: 12px; border-left: 1px solid var(--line); } .topbar__group-label { font-size: 10.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-faint); white-space: nowrap; } /* Die Klappliste steht IN ihrer Beschriftung: „nach [Ordner]" sagt, wozu sie gehoert — daneben stehend sagte sie gar nichts. */ .topbar__inline { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-soft); white-space: nowrap; } /* ⚠️ EINE LEISTE, EINE GROESSE — wie in der Studioleiste. Das Hochladen war ein `.btn` (14px/8px), die Stapelaktionen `.iconbtn` (13px/7px), und der Dateiwaehler daneben brachte seine eigene Hoehe mit. */ .topbar__actions .iconbtn, .topbar__actions .btn, .topbar__actions .field__input { height: 32px; font-size: 13px; box-sizing: border-box; } .topbar__actions .field__input { padding-block: 0; } /* Speichern und Löschen in der Kopfzeile — siehe Editor::ActionBarHelper. Das Wort steht NEBEN dem Symbol (in der Schiene darunter, dort ist kein Platz) und fällt auf schmalen Schirmen weg; `title` trägt es dann. */ .iconbtn { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer; line-height: 1; } .iconbtn:hover { border-color: var(--accent); } .iconbtn__icon { width: 17px; height: 17px; flex: 0 0 17px; } .iconbtn__form { display: inline; margin: 0; } .iconbtn--primary { background: var(--accent); border-color: var(--accent); color: #fff; } .iconbtn--primary:hover { filter: brightness(1.06); border-color: var(--accent); } .iconbtn--danger { color: var(--crimson); border-color: color-mix(in srgb, var(--crimson) 40%, var(--line)); } .iconbtn--danger:hover { background: color-mix(in srgb, var(--crimson) 10%, transparent); border-color: var(--crimson); } .iconbtn--quiet { color: var(--ink-soft); } @media (max-width: 720px) { .iconbtn { padding: 7px 9px; } .iconbtn__word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } } /* ⚠️ DER ABSTAND GEHÖRT DEM BEHÄLTER, NICHT DEN GESCHWISTERN. Vorher stand `\.card + .card { margin-top }` — was zwischen zwei Karten wirkt und nirgends sonst. Auf dem Websites-Bildschirm folgte auf ein Raster von Karten eine breite Karte, und die klebte ohne jeden Abstand darunter. */ .main { padding: var(--gap) var(--gap-lg) 48px; display: flex; flex-direction: column; gap: var(--gap); max-width: 1400px; width: 100%; } /* --- Was gerade laeuft -------------------------------------------------- */ /* Ein dezenter Streifen direkt unter der Kopfzeile, sichtbar auf JEDEM Schirm, solange etwas im Hintergrund arbeitet. Siehe Editor::ActivityController. ⚠️ KEIN `position: fixed` UND KEIN EIGENES `z-index`. Der Streifen soll den Inhalt nach unten SCHIEBEN, nicht ueber ihm liegen: er erscheint und verschwindet von selbst, und ein Ding, das sich unangekuendigt ueber einen Knopf legt, laesst jemanden ins Leere klicken. Der leere Rahmen daneben nimmt keinen Platz — darum steht die Flaeche an `.working`, nicht am Rahmen. */ #activity { display: block; } .working { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; padding: 9px var(--gap-lg); background: color-mix(in srgb, var(--accent) 9%, var(--surface)); border-bottom: 1px solid color-mix(in srgb, var(--accent) 26%, var(--line)); font-size: 12.5px; } .working__ring { width: 12px; height: 12px; flex: 0 0 12px; align-self: center; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--accent) 28%, transparent); border-top-color: var(--accent); animation: spin 1s linear infinite; } .working__word { font-weight: 600; color: var(--ink); } .working__list { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding: 0; list-style: none; } .working__row { color: var(--ink-soft); text-decoration: none; } .working__row:hover { color: var(--accent); text-decoration: underline; } @media (prefers-reduced-motion: reduce) { .working__ring { animation: none; } } /* --- Karten und Abschnitte ---------------------------------------------- */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--gap); box-shadow: var(--shadow-sm); } .card__title { margin: 0 0 4px; font-size: 15px; } .card__hint { color: var(--ink-soft); font-size: 13px; margin: 0; } .card__hint + .table, .card__hint + .actions { margin-top: 14px; } .card--danger { border-color: color-mix(in srgb, var(--crimson) 35%, var(--line)); } /* Ein Kasten, der etwas MELDET statt etwas anzubieten: die Kante trägt die Akzentfarbe, damit er im Stapel auffällt, ohne rot zu drohen — es ist ein Rückläufer, kein Löschknopf. */ .card--flag { border-left: 3px solid var(--accent); } .card--form { max-width: 560px; } /* Eine Überschrift über etwas, das keine Karte ist — eine Tabelle, ein Raster. */ .section-block { display: flex; flex-direction: column; gap: var(--gap-sm); } .section-block__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; } .section-block__title { font-size: 15px; margin: 0; } .section-block__hint { margin: 2px 0 0; font-size: 12.5px; color: var(--ink-soft); } .stack { display: flex; flex-direction: column; gap: var(--gap); } /* Ein Vorspann. ⚠️ KEIN ZWEITES

: der Titel steht in der Kopfzeile, und zwei Überschriften erster Ordnung sagen einem Screenreader, die Seite fange zweimal an. / .lede { color: var(--ink-soft); font-size: 14px; max-width: 68ch; margin: 0; line-height: 1.6; } .lede--quiet { margin-top: 10px; } .lede--quiet a { color: var(--accent); } .actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .card .actions, .pane .actions { margin-top: 14px; } .inline-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .inline-form .fieldinput { width: auto; min-width: 180px; } / Eine Minutenzahl braucht keine 180px — sie steht neben ihrem Knopf. / .inline-form .fieldinput--narrow { min-width: 5em; width: 5em; } / Zwei Spalten, wo eine Seite einen Hauptteil und Beiwerk hat. Unter 1000px fällt das Beiwerk unter den Hauptteil — nebeneinander wäre dort beides zu schmal, um gelesen zu werden. / .split { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--gap); align-items: start; } .split > { min-width: 0; } /* Das Fehlerprotokoll: schmale Liste links, breite Einzelheit rechts — bei `.split` ist es umgekehrt, und eine Ablaufspur in 320 Pixeln ist unlesbar. / .split--log { grid-template-columns: 300px minmax(0, 1fr); } / Zwei gleich schwere Spalten: „Was wartet" und „Zuletzt bearbeitet" sind zwei Fragen desselben Rangs, keine Sache mit Beiwerk daneben. / .split--even { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); } / Eine Spalte: was darunter steht, ist eine Liste und braucht die Breite. / .split--full { grid-template-columns: minmax(0, 1fr); } .logrow { display: grid; grid-template-columns: 1fr auto; gap: 1px 8px; padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: 6px; text-decoration: none; color: var(--ink); } .logrow:hover { border-color: var(--accent); } .logrow--on { border-color: var(--accent); background: var(--accent-wash); } .logrowwhen { font-size: 11px; color: var(--ink-soft); } .logrowref { font-size: 10.5px; color: var(--ink-faint); font-family: ui-monospace, monospace; justify-self: end; align-self: center; grid-row: 1 / 3; } .logrowwhat { grid-column: 1; font-size: 13px; font-weight: 600; word-break: break-word; } .logrowwhere { grid-column: 1; font-size: 11px; color: var(--ink-soft); word-break: break-all; } .logmessage { margin: 14px 0 0; padding: 10px 12px; border-left: 3px solid var(--accent); background: var(--accent-wash); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: 13px; word-break: break-word; } .logtrace { margin-top: 12px; } .logtrace summary { cursor: pointer; font-size: 12px; color: var(--ink-soft); } .logtrace pre { margin: 8px 0 0; padding: 10px 12px; overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 11.5px; line-height: 1.5; } @media (max-width: 1000px) { .split { grid-template-columns: minmax(0, 1fr); } } / --- Knöpfe ------------------------------------------------------------- / .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 14px; border-radius: var(--radius-sm); border: 1px solid transparent; font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background-color .12s, border-color .12s, color .12s; } .btn--primary { background: var(--accent); color: var(--accent-ink); } .btn--primary:hover { background: color-mix(in srgb, var(--accent) 85%, #000); } .btn--secondary { background: var(--surface-3); color: var(--ink); border-color: var(--line); } .btn--secondary:hover { border-color: var(--line-strong); } .btn--quiet { background: transparent; border-color: var(--line); color: var(--ink-soft); } .btn--quiet:hover { border-color: var(--line-strong); color: var(--ink); background: var(--surface-2); } .btn--danger { background: var(--crimson); border-color: var(--crimson); color: #fff; } .btn--danger:hover { background: color-mix(in srgb, var(--crimson) 85%, #000); } .btn[disabled] { opacity: .5; cursor: not-allowed; } / --- Felder ------------------------------------------------------------- / .field { display: block; margin-bottom: 14px; } .field:last-child { margin-bottom: 0; } .fieldlabel { display: block; font-size: 12.5px; margin-bottom: 5px; color: var(--ink-soft); font-weight: 500; } .fieldinput { width: 100%; padding: 9px 12px; font: inherit; color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); } .fieldinput:hover { border-color: var(--line-strong); } .fieldinput:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; } .fieldinput--mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; } .field--narrow { width: auto; min-width: 150px; max-width: 220px; } select.fieldinput { appearance: none; padding-right: 34px; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 17px) 17px, calc(100% - 12px) 17px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; } .check { display: flex; gap: 8px; align-items: flex-start; margin-top: 8px; font-size: 14px; } / Mehrere Kaestchen nebeneinander statt untereinander: eine Auswahl aus zwoelf Firmen ist sonst eine Liste, durch die man scrollt, um zu sehen, was angekreuzt ist. / .checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 18px; } .check small { color: var(--ink-soft); } .check input { margin-top: 3px; } / Ein Schalter und sein Knopf auf einer Zeile — Einstellungen › Sprachen. / .field--row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .field--row .check { margin-top: 0; } / --- Meldungen und Zustände --------------------------------------------- / .flash { padding: 11px 14px; border-radius: var(--radius-sm); font-size: 14px; border: 1px solid transparent; } .flash--alert { background: color-mix(in srgb, var(--crimson) 12%, var(--surface)); border-color: color-mix(in srgb, var(--crimson) 30%, transparent); color: color-mix(in srgb, var(--crimson) 70%, var(--ink)); } .flash--notice { background: color-mix(in srgb, var(--emerald) 12%, var(--surface)); border-color: color-mix(in srgb, var(--emerald) 30%, transparent); color: color-mix(in srgb, var(--emerald) 65%, var(--ink)); } / Ein leerer Bildschirm ist die erste Seite, die jemand sieht — sie soll sagen, was hier hingehört und wie man anfängt, nicht bloss „nichts da". / .empty { text-align: center; padding: 40px 24px; color: var(--ink-soft); font-size: 14px; background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--radius); } .empty a { color: var(--accent); } .pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 500; background: var(--surface-3); color: var(--ink-soft); } .pill--published, .pill--granted { background: color-mix(in srgb, var(--emerald) 16%, transparent); color: color-mix(in srgb, var(--emerald) 75%, var(--ink)); } .pill--scheduled { background: var(--accent-wash); color: var(--accent); } .pill--review, .pill--pending { background: color-mix(in srgb, var(--amber) 20%, transparent); color: color-mix(in srgb, var(--amber) 75%, var(--ink)); } .pill--archived, .pill--revoked, .pill--draft { background: var(--surface-3); color: var(--ink-faint); } / ⚠️ NICHT GRAU WIE „archiviert". Hier geht etwas verloren, das jemand veroeffentlicht hat — das ist eine Warnung, kein Zustand. / .pill--warn { background: color-mix(in srgb, var(--amber) 16%, transparent); color: var(--amber); } .table__hint { margin: 4px 0 0; font-size: 11.5px; color: var(--ink-soft); max-width: 46rem; } .pill--new, .pill--pending_approval { background: var(--accent-wash); color: var(--accent); } .pill--read, .pill--skipped { background: var(--surface-3); color: var(--ink-faint); } .pill--done, .pill--imported { background: color-mix(in srgb, var(--emerald) 16%, transparent); color: color-mix(in srgb, var(--emerald) 75%, var(--ink)); } .pill--failed { background: color-mix(in srgb, var(--crimson) 14%, transparent); color: color-mix(in srgb, var(--crimson) 80%, var(--ink)); } .pill--running { background: color-mix(in srgb, var(--amber) 20%, transparent); color: color-mix(in srgb, var(--amber) 70%, var(--ink)); } / Die Zustände einer Aussendung und einer einzelnen Zustellung. „sent" ist grün, „queued"/„sending" bernstein (unterwegs, noch nicht entschieden), „cancelled" grau. Ein Zustand ohne eigene Farbe wäre grau wie „übersprungen" — und genau die Unterscheidung ist auf diesem Schirm die Arbeit. / .pill--sent { background: color-mix(in srgb, var(--emerald) 16%, transparent); color: color-mix(in srgb, var(--emerald) 75%, var(--ink)); } .pill--queued, .pill--sending, .pill--in_progress { background: color-mix(in srgb, var(--amber) 20%, transparent); color: color-mix(in srgb, var(--amber) 75%, var(--ink)); } .pill--cancelled { background: var(--surface-3); color: var(--ink-faint); } / Ein Vorschlag ist noch keine Korrektur: Akzentfarbe, nicht grün. / .pill--correction_proposed { background: var(--accent-wash); color: var(--accent); } .pill--corrected { background: color-mix(in srgb, var(--emerald) 16%, transparent); color: color-mix(in srgb, var(--emerald) 75%, var(--ink)); } .pill--invalid { background: color-mix(in srgb, var(--crimson) 14%, transparent); color: color-mix(in srgb, var(--crimson) 80%, var(--ink)); } .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } / Der Rückläufer im Wortlaut. Klein, einfarbig, umbruchfähig — es ist ein SMTP-Protokoll und kein Satz, und es steht hinter einer Klappe, weil man es nur beim Nachsehen braucht. / .transcript { margin: 6px 0 0; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--surface-3); color: var(--ink-soft); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; } / Der Vorschlag der KI. Er sieht bewusst NICHT wie ein Ergebnis aus, sondern wie ein Zettel daneben: die Adresse ändert erst ein Mensch. / .suggest { margin: 8px 0 0; padding: 10px 12px; border-left: 3px solid var(--accent); background: var(--accent-wash); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; } .suggestmail { font-weight: 600; } .suggestnote { margin: 4px 0 0; font-size: 12.5px; color: var(--ink-soft); } / Ungelesen wird durch eine Kante links markiert, nicht durch Fettschrift: fett gesetzte Zeilen lesen sich als wichtiger, nicht als neuer. / .table tr.is-unread td:first-child { box-shadow: inset 3px 0 0 var(--accent); } .table tr.is-unread .tablelink { font-weight: 600; } .lang { display: inline-block; margin-right: 3px; padding: 1px 6px; border-radius: 5px; font-size: 10.5px; font-weight: 600; letter-spacing: .04em; background: var(--surface-3); color: var(--ink-faint); } .lang--on { background: var(--accent-wash); color: var(--accent); } a.lang { text-decoration: none; } .lang--draft { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--amber) 55%, transparent); } .lang--failed { box-shadow: inset 0 0 0 1px var(--crimson); color: var(--crimson); } .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); margin-right: 6px; vertical-align: middle; } .dot--active { background: var(--emerald); } .dot--pending, .dot--validating { background: var(--amber); } .dot--failed { background: var(--crimson); } .filters { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .filterssep { width: 1px; height: 18px; background: var(--line); margin: 0 4px; } .chip { padding: 5px 12px; border-radius: 999px; font-size: 13px; text-decoration: none; color: var(--ink-soft); background: var(--surface); border: 1px solid var(--line); } .chip:hover { border-color: var(--line-strong); color: var(--ink); } .chip--active { background: var(--ink); border-color: var(--ink); color: var(--surface); } / Eine Reihe Kaestchen, die als Marken lesbar bleibt: zwoelf Ressorts untereinander sind eine Liste, durch die man sucht. / .tagpick { display: flex; flex-wrap: wrap; gap: 6px 14px; } .tagpickitem { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; } / Die genauere Auswahl steht zugeklappt da: sie ist der zweite Griff, nicht der erste, und offen waere die Liste unter dem Filter nicht mehr zu sehen. / .filter-more { flex-basis: 100%; margin-top: 8px; } .filter-more > summary { cursor: pointer; font-size: 13px; color: var(--ink-soft); } .filter-more[open] > summary { margin-bottom: 10px; } / Ein Gruppenkopf in einer Tabelle: eine Zeile, die keine Daten traegt, sondern sagt, wessen Zeilen jetzt kommen — und wie viele. / .tablegroup th { background: var(--surface-2); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); text-align: left; padding-top: 14px; } .tablegroup th small { text-transform: none; letter-spacing: normal; margin-left: 8px; } / --- Tabellen ----------------------------------------------------------- / .table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); } .table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); font-weight: 600; padding: 9px 16px; background: var(--surface-2); border-bottom: 1px solid var(--line); } .table td { padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 14px; vertical-align: middle; } .table tr:last-child td { border-bottom: 0; } .table tbody tr:hover td { background: var(--surface-2); } .table small { display: block; color: var(--ink-faint); font-size: 12px; margin-top: 2px; } .tablelink { color: var(--ink); font-weight: 500; text-decoration: none; } / --- Die Probe eines Adress-Imports -------------------------------------- Eine Datei aus einem fremden Programm hat beliebig viele Spalten, und die Probe muss ALLE zeigen — sonst prueft man die Zuordnung genau der Spalten nicht, die man nicht sieht. Also scrollt der Kasten, nicht die Seite. / .table-scroll { overflow-x: auto; } .table-scroll .table { min-width: 100%; } .tablehead { font-weight: 600; margin-bottom: 6px; white-space: nowrap; } .tableactions { text-align: right; white-space: nowrap; } .fieldinput--small { padding: 5px 7px; font-size: 12.5px; font-weight: 400; } .btn--small { padding: 5px 10px; font-size: 12.5px; } .tablelink:hover { color: var(--accent); } .tableright { text-align: right; white-space: nowrap; } / --- Übersicht: Kennzahlen ---------------------------------------------- / .tiles { display: grid; gap: var(--gap-sm); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } .tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow-sm); text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 2px; } a.tile:hover { border-color: var(--line-strong); box-shadow: var(--shadow); } .tilevalue { font-family: "Neue Regrade", inherit; font-size: 30px; font-weight: 600; line-height: 1.1; } .tilelabel { font-size: 12.5px; color: var(--ink-soft); } .tilenote { font-size: 11.5px; color: var(--ink-faint); } / --- Übersicht: auf einen Blick — siehe SiteOverview ------------------- / .glance { margin-block: var(--gap); } .glancegrid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } .glancegrid--contacts { margin-top: 4px; } .glancecard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px 12px; box-shadow: var(--shadow-sm); text-decoration: none; color: inherit; display: grid; gap: 2px; align-content: start; min-width: 0; } a.glancecard:hover { border-color: var(--line-strong); box-shadow: var(--shadow); } .glancecard--note { border-color: var(--accent); } .glancekind { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); } .glancetitle { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .glancefigure { display: flex; align-items: baseline; gap: 6px; margin-top: 6px; } .glancevalue { font-family: "Neue Regrade", inherit; font-size: 30px; font-weight: 600; line-height: 1.1; } .glancevalue--date { font-size: 18px; line-height: 1.6; } .glanceword { font-size: 12.5px; color: var(--ink-soft); } .glancemeta { font-size: 11.5px; color: var(--ink-faint); min-height: 1.4em; } / --- Struktur: Menü, Sektionen und Fusszeile auf einer Karte ------------- Siehe Editor::StructureController. Links die Karte in der Reihenfolge, in der ein Besucher die Teile sieht, rechts die Einstellungen des angeklickten Stücks. / .structure { display: grid; gap: var(--gap); margin-top: var(--gap); align-items: start; } .structure--open { grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); } .structuremap { display: grid; gap: var(--gap); min-width: 0; } .structurepanel { min-width: 0; } .structure--open .structurepanel { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; } .structure:not(.structure--open) .structurepanel { max-width: 720px; } / ⚠️ SPEICHERN BLEIBT IM BILD. Gemeldet: „die buttons in den seitenleisten z.b. bei sektionen sind wieder zuunterst" — die Sektionskarte ist lang geworden (Sprachen, Ansprechpartner, Partner, Anmeldung), und der Knopf stand hinter allem. Er klebt jetzt unten an der Seitenleiste, solange sein Formular weiterläuft; ein breiter Schatten in der Kartenfarbe deckt, was darunter durchrollt. / .structurepanel form > button[type="submit"].btn--primary:last-child { position: sticky; bottom: 12px; z-index: 5; width: 100%; box-shadow: 0 0 0 12px var(--surface), 0 -10px 18px 10px var(--surface); } .zone { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px 16px; box-shadow: var(--shadow-sm); min-width: 0; } .zone--sections { background: var(--surface-2); } .zonehead { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; } .zonetitle { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); } .zonewhere { font-size: 12px; color: var(--ink-faint); } .zonesub { margin: 4px 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); } .zonenote { margin: 10px 0 0; font-size: 12.5px; color: var(--ink-soft); } .zonerow { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; } .zone.is-target, .is-target { outline: 2px dashed var(--accent); outline-offset: 3px; border-radius: var(--radius-sm); } .node { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; } .nodechildren { list-style: none; margin: 0 0 0 12px; padding: 0 0 0 8px; border-left: 2px solid var(--accent-wash); display: flex; flex-direction: column; gap: 4px; } / Ein Verweis: Name, Ziel, und ob er ankommt. / .chip { display: inline-flex; align-items: baseline; gap: 6px; max-width: 100%; padding: 6px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); text-decoration: none; font-size: 13px; line-height: 1.3; cursor: pointer; user-select: none; } a.chip:hover { border-color: var(--line-strong); box-shadow: var(--shadow-sm); } .chiplabel { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .chiptarget { font-size: 11px; color: var(--ink-faint); white-space: nowrap; } .chipflag { font-size: 10px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; } .chipflag--dead { color: var(--crimson); } .chip--sub { font-size: 12.5px; padding: 4px 10px; } .chip--dead { border-style: dashed; border-color: color-mix(in srgb, var(--crimson) 55%, var(--line)); } .chip--dead .chiplabel { color: var(--ink-soft); } .chip--home { background: var(--accent-wash); border-color: transparent; } .chip--add { border-style: dashed; color: var(--ink-soft); background: none; } .chip--add:hover { color: var(--accent); border-color: var(--accent); } .chip--page { cursor: grab; font-size: 12.5px; padding: 3px 9px; background: var(--surface); } .chip--draft { border-style: dashed; } .chip.is-open, .scard.is-open, .fcol.is-open, .fstrip.is-open { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); } / Zeigen verbindet: Menüpunkt und Ziel leuchten gemeinsam auf. / .is-linked { border-color: var(--accent) !important; background: var(--accent-wash) !important; } [draggable="true"].is-dragging { opacity: .4; } .structuremarker { flex: 0 0 auto; width: 3px; min-height: 26px; align-self: stretch; border-radius: 2px; background: var(--accent); } .fcollinks > .structuremarker, .nodechildren > .structuremarker { width: auto; min-height: 3px; height: 3px; } / Die Sektionen. / .scards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } .scard { position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; box-shadow: var(--shadow-sm); cursor: grab; } .scard--off { opacity: .7; border-style: dashed; } .scardopen { display: grid; gap: 1px; text-decoration: none; color: inherit; cursor: pointer; } .scardopen:hover .scardtitle { color: var(--accent); } .scardkind { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); } .scardtitle { font-size: 15px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .scardaddress { font-size: 12px; color: var(--ink-soft); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .scardwarn { color: var(--crimson); font-family: inherit; } .scardfigures { margin: 0; font-size: 12px; color: var(--ink-soft); } .scardpages { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; } .scardmore { font-size: 12px; align-self: center; } .scardmore a { color: var(--ink-soft); } .scardlinks { margin: 0; display: flex; flex-wrap: wrap; gap: 4px; } .scardnote { margin: 0; font-size: 12px; color: var(--crimson); line-height: 1.4; } .scardactions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; } .scardform { display: inline; } .scard--add, .fcol--add { align-items: center; justify-content: center; flex-direction: row; gap: 8px; border-style: dashed; box-shadow: none; background: none; color: var(--ink-soft); text-decoration: none; cursor: pointer; min-height: 88px; } .scard--add:hover, .fcol--add:hover { color: var(--accent); border-color: var(--accent); } .scardplus { font-size: 20px; line-height: 1; } .structure .tag { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; background: var(--surface-3); color: var(--ink-faint); } .structure .tag--on { background: var(--accent-wash); color: var(--accent); } / Die Fusszeile. / .fcols { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } .fcol { display: flex; flex-direction: column; gap: 6px; min-width: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; background: var(--surface-2); cursor: grab; } .fcol--empty { border-style: dashed; } .fcolhead { display: grid; text-decoration: none; color: inherit; cursor: pointer; } .fcolhead:hover .fcoltitle { color: var(--accent); } .fcoltitle { font-weight: 650; font-size: 13.5px; } .fcolcount { font-size: 11.5px; color: var(--ink-faint); } .fcol--empty .fcolcount { color: var(--crimson); } .fcollinks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; min-height: 8px; } .fcol .chip { align-self: flex-start; flex-wrap: wrap; row-gap: 0; } .fcol .chiplabel { white-space: normal; } .fstrips { display: grid; gap: 8px; margin-top: 12px; } .fstrip { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 12px; text-decoration: none; color: inherit; background: var(--surface-2); } a.fstrip:hover { border-color: var(--line-strong); } .fstripname { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); min-width: 110px; text-decoration: none; } a.fstripname:hover { color: var(--accent); } .fstripvalue { font-size: 13px; color: var(--ink-soft); } .fstripoff { color: var(--ink-faint); font-style: italic; } .fstripchips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; } / Die Karte rechts: Fragen statt Felder. / .pcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px 18px; box-shadow: var(--shadow); display: grid; gap: 14px; } .pcard--help { box-shadow: var(--shadow-sm); } .pcardhead { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; } .pcardkind { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); } .pcardtitle { margin: 2px 0 0; font-size: 18px; line-height: 1.25; } .pcardclose { color: var(--ink-faint); text-decoration: none; font-size: 15px; padding: 2px 6px; border-radius: 6px; } .pcardclose:hover { background: var(--surface-3); color: var(--ink); } .pcardsteps { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); } .pcardhint { margin: 0; font-size: 12.5px; color: var(--ink-faint); line-height: 1.5; } .pcardstatus { margin: 0; font-size: 13px; line-height: 1.5; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--surface-3); color: var(--ink-soft); } .pcardstatus--ok { background: color-mix(in srgb, var(--emerald) 10%, var(--surface)); } .pcardstatus--dead { background: color-mix(in srgb, var(--crimson) 10%, var(--surface)); color: var(--ink); } .pcardlinks { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .pcardform { display: grid; gap: 14px; } .pcardform > .btn { justify-self: start; } .pcardmore { display: grid; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); } .pcardmore > .btn, .pcardmore > .pcardinline { justify-self: start; } .pcardrow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .pcardrow .fieldinput { width: auto; flex: 1 1 140px; } .pcardinline { display: inline; } .pcardlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; } .ask { border: 0; margin: 0; padding: 0; display: grid; gap: 6px; min-width: 0; } .askq { font-weight: 650; font-size: 14px; padding: 0; margin: 0 0 2px; } details.ask > summary.askq { cursor: pointer; color: var(--ink-soft); } .asksub { font-size: 12px; color: var(--ink-soft); margin-top: 4px; } .askhint { margin: 0; font-size: 12px; color: var(--ink-faint); line-height: 1.5; } .askchoice { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; line-height: 1.45; cursor: pointer; } .askchoice input { margin-top: 3px; flex: 0 0 auto; } .askchoice--off { color: var(--ink-faint); cursor: default; } .askchoice--card { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 10px; } .askchoice--card:has(input:checked) { border-color: var(--accent); background: var(--accent-wash); } .askchoice--card span { display: grid; } .askchoice--card small { color: var(--ink-soft); font-size: 12px; } .askchoice code, .askhint code { font-size: 12px; } .askoff { color: var(--ink-faint); margin-left: 4px; } .askon { color: var(--emerald); } .asknet { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 6px 10px; } .asknet > summary { cursor: pointer; font-size: 13.5px; } .asknet[open] { display: grid; gap: 6px; padding-bottom: 10px; } .askmore > summary { cursor: pointer; font-size: 12.5px; color: var(--ink-soft); margin-top: 6px; } .askmore[open] { display: grid; gap: 6px; } .pcard .langtabspanel { gap: 6px; } .prefixed { display: flex; align-items: stretch; } .prefixedfix { display: grid; place-items: center; padding: 0 8px; font-size: 12.5px; color: var(--ink-faint); white-space: nowrap; border: 1px solid var(--line); border-right: 0; border-radius: var(--radius-sm) 0 0 var(--radius-sm); background: var(--surface-3); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } .prefixed .fieldinput { border-top-left-radius: 0; border-bottom-left-radius: 0; } @media (max-width: 1100px) { .structure--open { grid-template-columns: minmax(0, 1fr); } / Schmal steht die Karte VOR der Übersicht — sonst öffnet ein Klick etwas weit unten, das niemand sieht. / .structure--open .structurepanel { order: -1; position: static; max-height: none; } } / --- Websites ----------------------------------------------------------- / .sites { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); } .site-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 14px; } .site-card--current { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow); } .site-cardhead { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; } .site-cardname { font-size: 17px; margin: 0 0 2px; } .site-cardhost { font-size: 13px; color: var(--ink-soft); text-decoration: none; } .site-cardhost:hover { color: var(--accent); } .site-cardfacts { display: flex; gap: 22px; margin: 0; flex-wrap: wrap; } .site-cardfacts div { margin: 0; min-width: 0; } .site-cardfacts dt { font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-faint); } .site-cardfacts dd { margin: 2px 0 0; font-size: 14px; } .site-carddomains { list-style: none; padding: 12px 0 0; margin: 0; font-size: 13px; border-top: 1px solid var(--line); } .site-carddomains li { padding: 3px 0; display: flex; align-items: center; gap: 2px; } .site-carddomains small { color: var(--ink-faint); margin-left: auto; } .site-card .actions { margin-top: auto; } / Eine Liste aus Begriff und Wert, untereinander. `site-cardfacts` steht nebeneinander und passt darum nur in eine breite Karte. / .facts { margin: 0; display: flex; flex-direction: column; gap: 10px; } .facts div { margin: 0; } .facts dt { font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-faint); } .facts dd { margin: 2px 0 0; font-size: 14px; word-break: break-word; } .facts a { color: var(--accent); text-decoration: none; } / --- Inhalt: der Seitenbaum --------------------------------------------- / .tree { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); } .treerow { display: flex; align-items: center; gap: 10px; / Die Tiefe ist eine Zahl am Element — siehe den Kommentar in _branch. / padding: 9px 16px 9px calc(16px + var(--level, 0) 24px); border-top: 1px solid var(--line); position: relative; } .treerow:first-child { border-top: 0; } .treerow:hover { background: var(--surface-2); } .treerow--dim { opacity: .5; } .treerow--dragging { opacity: .35; } .treehandle { color: var(--ink-faint); cursor: grab; font-size: 13px; line-height: 1; } .treerow:active .treehandle { cursor: grabbing; } .treelink { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 10px; text-decoration: none; color: inherit; } .treetitle { font-size: 14px; font-weight: 500; } .treelink:hover .treetitle { color: var(--accent); } .treepath { font-size: 12px; color: var(--ink-faint); font-family: ui-monospace, monospace; } .treelangs { display: flex; gap: 2px; } .treetools { opacity: 0; transition: opacity .1s; } .treerow:hover .treetools, .treerow:focus-within .treetools { opacity: 1; } /* Zwei Linien und eine Fläche sagen, was das Ablegen bewirkt: darüber, darunter, oder hinein. / .treerow--above::before, .treerow--below::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: var(--accent); } .treerow--above::before { top: -1px; } .treerow--below::after { bottom: -1px; } .treerow--into { background: var(--accent-wash); box-shadow: inset 3px 0 0 var(--accent); } / --- Mediathek ---------------------------------------------------------- / .media { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--gap-sm); } .mediaitem { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; text-decoration: none; color: var(--ink); font-size: 13px; display: block; box-shadow: var(--shadow-sm); } .mediaitem:hover { border-color: var(--line-strong); } .mediaitem small { display: block; color: var(--ink-faint); font-size: 11px; } .mediathumb { height: 118px; display: flex; align-items: center; justify-content: center; background: var(--surface-3); border-radius: var(--radius-sm); overflow: hidden; margin-bottom: 8px; / Traegt die Plakette und das Overlay. / position: relative; } / ⚠️ `contain`, NICHT `cover`. Ein Logo ist breit und oft durchsichtig; wer es füllend zuschneidet, zeigt einen Ausschnitt davon — und ein Ausschnitt eines Logos ist unbrauchbar zum Wiedererkennen. In einer Mediathek soll man die Datei ERKENNEN, nicht bewundern. / .mediathumb img { max-width: 100%; max-height: 100%; object-fit: contain; } / Und der Grund darunter: ein weisses Logo auf hellem Grund ist unsichtbar, ein dunkles auf dunklem ebenso. Ein leises Karo zeigt die Durchsichtigkeit an und trägt beide Fälle. / .mediathumb:has(img) { background-color: #fdfdfd; background-image: linear-gradient(45deg, rgba(0, 0, 0, .05) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, .05) 75%), linear-gradient(45deg, rgba(0, 0, 0, .05) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, .05) 75%); background-size: 16px 16px; background-position: 0 0, 8px 8px; } .mediaext { font-weight: 600; color: var(--ink-faint); } / Auswahl im Raster. ⚠️ DAS BILD IST DIE SCHALTFLAECHE, nicht ein Kaestchen von 16 Pixeln in einer Ecke. Zwanzig Bilder auszuwaehlen heisst sonst zwanzigmal ein kleines Ziel treffen. Das Kaestchen bleibt sichtbar, weil es sagt, WAS der Klick tut — es ist nur nicht die Trefferflaeche. / .mediapick { display: block; position: relative; cursor: pointer; } .mediabox { position: absolute; top: 8px; left: 8px; z-index: 1; width: 18px; height: 18px; } .medianame { display: block; text-decoration: none; color: var(--ink); } .medianame:hover { color: var(--accent); text-decoration: underline; } / Zu welchem Beitrag ein Quelldokument gehört (Medien › Importierte Dokumente). / .mediaowner { display: block; margin-top: 2px; font-size: 12px; color: var(--accent); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mediaowner:hover { text-decoration: underline; } / Die Freigabe des Presseverteilers (Editor::ApprovalsController). / .approvalfacts { flex-direction: row; flex-wrap: wrap; gap: 10px 28px; margin-block: 10px; } .approvalfacts dd { margin: 2px 0 0; } .approvalsignal { margin: 4px 0 12px; font-size: 13px; padding-left: 10px; border-left: 3px solid var(--line-strong, #ccc); } .approvalsignal--matches { border-color: var(--emerald); } .approvalsignal--freemail, .approvalsignal--other { border-color: var(--amber); } .approvallists { border: 0; padding: 0; margin: 0 0 10px; display: flex; flex-wrap: wrap; gap: 6px 18px; } .approvallists legend { width: 100%; margin-bottom: 6px; } / Menü, Fusszeile & Sektionen übersetzen (Strukturkarte). / .chrome-translate { display: grid; gap: 10px; } .chrome-translatehead { display: grid; gap: 2px; } .chrome-translateform { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; } .chrome-translatereplace { margin-left: auto; } .chrome-translateruns { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; font-size: 13px; } .chrome-translateruns .is-failed { color: var(--crimson); } .chrome-translateruns .is-done { color: var(--emerald); } .approvalform .actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .mediaowner--none { color: var(--muted); font-style: italic; } / Ausgewaehlt: eine Kante, keine Deckschicht — was ausgewaehlt ist, muss man weiterhin sehen koennen. / .mediaitem:has(.mediabox:checked) { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-wash), var(--shadow-sm); } .preview { max-width: 100%; border-radius: var(--radius-sm); } / ⚠️ HIER STAND EIN TOTER EDITOR-BAUSTEIN, UND ER GESTALTETE DIE WEBSITE. `.block` war die Zeile der alten Bausteinliste — graue Flaeche, Rahmen, 16px Polster, 12px Abstand. Die Liste heisst seit dem Studio `.section-block`, die Regel blieb liegen; und weil JEDER oeffentliche Baustein `class="block block--…"` traegt, bekam die fertige Website sie: jeder Abschnitt ein graues Kaestchen mit Rahmen, unabhaengig vom gewaehlten Seitenaufbau. Die Aufbauten unterschieden sich danach nur noch in der Position der Kaestchen. Ein Baustein, der eine Flaeche haben soll, sagt es selbst (`.block--cta`, `.block--form`). / /* Die Palette ist eine Reihe von Gruppen, das Raster sitzt IN der Gruppe — sonst reisst eine Ueberschrift das Raster ihrer Nachbarn auseinander. / .palette { display: flex; flex-direction: column; gap: 18px; } .palettegroup { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; } .palettegroup-title { grid-column: 1 / -1; margin: 0; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); } .paletteitem { text-align: left; padding: 11px 12px; border-radius: var(--radius-sm); cursor: pointer; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); font: inherit; } .paletteitem:hover { border-color: var(--accent); background: var(--accent-wash); } .paletteitem strong { font-size: 13px; } .paletteitem small { display: block; color: var(--ink-soft); font-size: 11.5px; margin-top: 2px; } / Die Palette als Modal — sie gehoert nicht mehr in die rechte Spalte. ⚠️ WARUM. „heute muss ich oben einen button drücken und links auswählen": die Wahl eines Bausteins ist ein eigener Vorgang mit einem Anfang und einem Ende, kein Feld neben den Eigenschaften eines anderen Bausteins. / .palettemodal { border: 0; border-radius: var(--radius-lg); padding: 0; width: min(760px, 92vw); max-height: 82vh; overflow: auto; background: var(--surface); color: var(--ink); box-shadow: 0 24px 60px rgba(0, 0, 0, .28); } .palettemodal::backdrop { background: rgba(12, 6, 30, .48); } .palettehead { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px 0; } .palettehead h2 { margin: 0; font-size: 17px; } .palettemodal .palette { padding: 18px 22px 22px; } / --- Mehrfachauswahl in einer Liste --------------------------------------- Die Leiste steht UEBER der Liste: was man ankreuzt, sieht man darunter, und der Knopf wandert nicht mit der Laenge der Liste nach unten aus dem Bild. / .bulk { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 10px 14px; margin-bottom: 6px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); } .bulkall { display: flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; } .bulkcount { font-size: 13px; color: var(--ink-soft); font-variant-numeric: tabular-nums; } .bulkspacer { flex: 1; } .bulkto { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-soft); } .bulkselect { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 5px 8px; font: inherit; font-size: 13px; background: var(--canvas); color: var(--ink); } .bulkhint { margin: 0 0 16px; font-size: 11.5px; color: var(--ink-faint); } .bulk [disabled] { opacity: .5; cursor: not-allowed; } .tablepick { width: 28px; } .tablepick input, .treepick { accent-color: var(--accent, var(--purple)); } .treepick { flex: none; margin-right: 2px; } / --- Aufklappbare Abschnitte (Layoutpaket) ------------------------------ / .panepart { border-top: 1px solid var(--line); } .panepart:last-of-type { border-bottom: 1px solid var(--line); } .panepart-title { padding: 10px 2px; cursor: pointer; list-style: none; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); font-weight: 600; } .panepart-title::-webkit-details-marker { display: none; } / Ein Dreieck, das sagt, ob zu oder auf — sonst sieht ein zugeklappter Abschnitt aus wie eine Ueberschrift ohne Inhalt. / .panepart-title::before { content: "▸"; display: inline-block; width: 14px; color: var(--ink-faint); transition: transform .12s ease; } .panepart[open] > .panepart-title::before { transform: rotate(90deg); } .panepart-title:hover { color: var(--ink); } .panepart > .pane { padding-bottom: 12px; } .panerule { border: 0; border-top: 1px solid var(--line); margin: 16px 0; } / `.panel` steht weiter unten beim Rahmen um die Leinwand — eine Stelle. / /* --- Anmelden ----------------------------------------------------------- / .auth { min-height: 100vh; display: grid; place-items: center; padding: 20px; background: radial-gradient(120% 120% at 20% 0%, #4a1d52 0%, var(--midnight) 60%); } .authbox { width: 100%; max-width: 400px; background: var(--surface); border-radius: var(--radius-lg); padding: 32px; box-shadow: var(--shadow-lg); border: 1px solid var(--line); } .authbrand { display: flex; align-items: center; gap: 11px; margin-bottom: 24px; } .authtitle { margin: 0 0 6px; font-size: 20px; } .authhint { color: var(--ink-soft); font-size: 13px; margin: 0 0 20px; } .authbuild { margin: 18px 0 0; text-align: center; font-size: 11px; color: var(--ink-faint); letter-spacing: .02em; } .pulse-wait { text-align: center; } .pulse-waitring { width: 62px; height: 62px; margin: 6px auto 18px; border-radius: 50%; border: 3px solid var(--surface-3); border-top-color: var(--accent); animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .pulse-waitring { animation: none; } } / --- Schmale Bildschirme ------------------------------------------------ / @media (max-width: 900px) { .shell { flex-direction: column; } .sidebar { width: 100%; flex: none; height: auto; position: static; flex-direction: row; align-items: center; gap: 12px; padding: 10px 14px; overflow-x: auto; } .sidebarfoot, .navgroup, .sitepicklabel { display: none; } .sitepick { flex: 0 0 auto; } .nav { flex-direction: row; gap: 4px; } .navitem span { display: none; } .navitem { padding: 8px; } .main { padding: var(--gap-sm) 16px 40px; } .topbar { padding: 12px 16px; } } / --- Der Rahmen um die Leinwand ----------------------------------------- / .studio { margin: 0; height: 100vh; overflow: hidden; } .studioshell { display: flex; flex-direction: column; height: 100vh; } / ⚠️ DIE LEISTE BRICHT UM, STATT HINAUSZULAUFEN. Sie traegt inzwischen den Weg zurueck, den Titel, die Sprachen, das Uebersetzen, den Lauf, den Zustand, drei Breiten, die Besucheransicht, den Baustein und vier Zustandsknoepfe. Ohne Umbruch schob der naechste Zuwachs den letzten Knopf aus dem Bild — und der letzte ist „Seite löschen", also genau der, dessen Verschwinden niemand bemerkt, bis er gebraucht wird. / .studiobar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 9px 14px; border-bottom: 1px solid var(--line); background: var(--surface); flex: none; color: var(--ink); } / ⚠️ DER WEG ZURUECK SCHRUMPFT NICHT. In der Leiste stehen sieben Knoepfe; als erstes Flexkind gab „‹ Inhalt" nach und brach auf zwei Zeilen um, von denen die zweite unter der Leistenkante verschwand — der Ausgang sah aus wie ein Pfeil ohne Wort. / .studioback { text-decoration: none; color: var(--ink-soft); font-size: 13px; font-weight: 500; padding: 6px 10px; border-radius: var(--radius-sm); border: 1px solid var(--line); flex: none; white-space: nowrap; } .studioback:hover { color: var(--ink); border-color: var(--line-strong); } / ⚠️ DER TITEL DARF NICHT AUF NULL SCHRUMPFEN. Mit `min-width: 0` allein verschwand er vollstaendig, sobald die Leiste eng wurde — die Seite, an der man arbeitet, war dann die einzige Angabe, die fehlte. / .studiotitle { font-weight: 600; font-size: 14px; min-width: 140px; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } / Loeschen bringt sein eigenes Formular mit (DELETE braucht eines). `contents` nimmt es aus dem Flexfluss, damit der Knopf in der Reihe steht wie die anderen und nicht als eigener Kasten daneben. / .studiodeleteform { display: contents; } / ⚠️ EINE LEISTE, EINE GROESSE. Gemeldet: „nicht beliebige buttons in beliebigen grössen oben (z.b. ist der löschbutton grösser als andere)." Hier standen `.studioback` (13px/6px), `.btn` (14px/8px) und eine Pille nebeneinander — drei Massstäbe in einer Zeile, und der lauteste davon war der, der loescht. Die Masse setzt jetzt die Leiste, nicht der einzelne Knopf. / .studiobar .btn, .studiobar .studioback { font-size: 13px; font-weight: 500; padding: 0 12px; height: 30px; line-height: 30px; border-radius: var(--radius-sm); } .studiobar .pill { height: 30px; padding-inline: 11px; } / Zwei Gruppen: was die Seite weiterbringt, und was sie aus dem Weg räumt. Der Trenner steht dazwischen, damit „Löschen" nicht der siebte Knopf in einer Reihe von sieben gleich lauten ist. / .studiogroup { display: inline-flex; align-items: center; gap: 8px; } .studiogroup--away { padding-left: 12px; margin-left: 4px; border-left: 1px solid var(--line); } .studiodelete { color: var(--crimson); } .studiodelete:hover { color: var(--crimson); background: color-mix(in srgb, var(--crimson) 10%, transparent); border-color: var(--crimson); } / Eine Bewerbungsfrage: Wortlaut, Art, Bedingung, Pflicht — in einer Zeile, weil fuenf davon uebereinander sonst das ganze Feld fuellen. Auf schmalen Feldern bricht sie um. / .qrow { display: grid; gap: 6px; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line); grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } .qrow > .fieldinput:first-child { grid-column: 1 / -1; } .qrow .check { grid-column: 1 / -1; font-size: 12px; } .qrow:last-of-type { border-bottom: none; } / Eine Sprachanforderung im Panel: Sprache, Mindestniveau, Pflicht. / .lrow { display: grid; grid-template-columns: 7.5em minmax(0, 1fr) auto; gap: 6px 8px; align-items: center; margin-bottom: 6px; } .lrowname { font-size: 13px; white-space: nowrap; } .lrow .check { font-size: 12px; } / Die Antworten einer Bewerbung: erfuellt, nicht erfuellt, und woran. / .answer { display: flex; align-items: baseline; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); } .answer:last-child { border-bottom: none; } .answermark { flex: none; width: 1.2em; font-weight: 700; } .answer--met .answermark { color: #1c7c3f; } .answer--missed .answermark { color: #c02a2a; } .answerlabel { flex: 1 1 auto; min-width: 0; } .answervalue { font-weight: 600; } .answercond { color: var(--ink-soft); font-size: 12px; } .pill--rejected { background: rgba(192, 42, 42, .12); color: #c02a2a; } .pill--passed { background: rgba(28, 124, 63, .12); color: #1c7c3f; } / Die Sprachen sind ein Segmentwähler, kein Textlink-Trio: sie schalten dieselbe Seite um, und das soll man sehen, ohne zu lesen. / .studiolangs { display: flex; gap: 2px; padding: 2px; background: var(--surface-3); border-radius: var(--radius-sm); } .studiolang { text-decoration: none; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; padding: 4px 8px; border-radius: 5px; color: var(--ink-faint); } .studiolang:hover { color: var(--ink); } .studiolang.is-current { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); } / Der Zustand je Sprache als Punkt unter dem Kürzel: freigegeben grün, Entwurf gelb, fehlt leer, gescheitert rot. / .studiolang { position: relative; } .studiolang::after { content: ""; position: absolute; left: 50%; bottom: 1px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; } .studiolang.is-live::after { background: var(--emerald); } .studiolang.is-draft::after { background: var(--amber); } .studiolang.is-failed::after { background: var(--crimson); } / Der Zustand steht immer da und wechselt nur die Farbe. Ein Hinweis, der auftaucht und wieder verschwindet, wird genau dann uebersehen, wenn er „nicht gespeichert" sagt. / .studiostate { margin-left: auto; font-size: 12px; color: var(--ink-faint); display: inline-flex; align-items: center; gap: 6px; } .studiostate::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .studiostate.is-dirty { color: var(--amber); } .studiostate.is-ok { color: var(--emerald); } .studiostate.is-error { color: var(--crimson); font-weight: 600; } / ⚠️ ÜBERSETZEN NEBEN DEN SPRACHEN, NICHT AM ENDE DER SPALTE. Es stand ganz unten im Panel, hinter Zustand, Datum, Autor, Adresse, Titel, Anriss und zwei SEO-Feldern — „ich klicke in der sidebar zuunterst umständlich auf übersetzen". Ein Klappmenü, weil die Leiste schon voll ist und eine Sprache pro Knopf sie sprengen würde. / .studiodrop { position: relative; flex: none; } .studiodrop-head { list-style: none; cursor: pointer; user-select: none; font-size: 13px; font-weight: 500; padding: 0 12px; height: 30px; line-height: 30px; border-radius: var(--radius-sm); border: 1px solid var(--line); color: var(--ink-soft); white-space: nowrap; } .studiodrop-head::-webkit-details-marker { display: none; } .studiodrop-head::after { content: " ▾"; opacity: .6; } .studiodrop-head:hover { color: var(--ink); border-color: var(--line-strong); } .studiodrop[open] .studiodrop-head { color: var(--ink); border-color: var(--accent); } .studiodrop-body { position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; min-width: 240px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; padding: 10px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface-2); box-shadow: var(--shadow-md, 0 10px 30px rgba(0, 0, 0, .3)); } .studiodrop-body .panelhint { margin: 2px 0 0; } / Rechts in der Leiste klappt nach links auf, sonst hängt der Kasten über den Rand. / .studiodrop--end .studiodrop-body { left: auto; right: 0; } .studiodrop-body--wide { width: min(380px, 90vw); align-items: stretch; } .studiodrop-body--wide .stack-form { display: flex; flex-direction: column; gap: 6px; } .studiodrop-body--wide .fieldinput { width: 100%; } .studiodrop-body--wide .flash { margin: 0; } .studiodrop-list { margin: 0; padding-left: 16px; font-size: 12px; color: var(--ink-soft); } / Was läuft, steht oben und dreht sich — sonst weiss niemand, dass noch etwas passiert, und ein Ende sieht man nur beim Neuladen. / .studiorun { display: inline-flex; align-items: center; gap: 8px; flex: none; font-size: 12px; color: var(--ink-soft); max-width: 380px; } .studiorun-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .studiorun-ring { display: none; width: 12px; height: 12px; flex: 0 0 12px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--accent) 28%, transparent); border-top-color: var(--accent); animation: spin 1s linear infinite; } .studiorun.is-running .studiorun-ring { display: block; } .studiorun.is-done { color: var(--emerald); } .studiorun.is-failed { color: var(--crimson); font-weight: 600; } .studiorun-link { color: var(--accent); text-decoration: none; font-weight: 600; white-space: nowrap; } .studiorun-link:hover { text-decoration: underline; } @media (prefers-reduced-motion: reduce) { .studiorun-ring { animation: none; } } .studiobody { display: flex; flex: 1; min-height: 0; } / ⚠️ Die Leinwand bleibt WEISS, auch im dunklen Erscheinungsbild: dort steht die Website des Kunden, und die hat ihre eigenen Farben. Die Redaktion dunkel zu schalten heisst nicht, fremde Seiten umzufärben. / .studiocanvas { flex: 1; border: 0; height: 100%; background: #fff; } / --- Die Breite der Leinwand ---------------------------------------------- ⚠️ DIE LEINWAND IST DIE SEITE, ALSO IST DIE BREITE DIE WAHRHEIT. Kein Telefonrahmen als Bild drumherum: was hier 390px breit ist, ist auf einem Telefon 390px breit, mitsamt Medienabfragen. / .studiocanvas[data-width="tablet"], .studiocanvas[data-width="phone"] { flex: 0 0 auto; margin: 0 auto; align-self: stretch; border-left: 1px solid var(--line); border-right: 1px solid var(--line); } / ⚠️ VERKLEINERT, NICHT VERSCHMAELERT — siehe Studio-Controller `fitDesk`. Die Ecke oben links ist der Ursprung, damit der Rahmen dort bleibt, wo er ohne Massstab auch saesse. / .studiocanvas.is-scaled { flex: 0 0 auto; transform-origin: top left; align-self: start; } .studiocanvas[data-width="tablet"] { width: 768px; max-width: 100%; } .studiocanvas[data-width="phone"] { width: 390px; max-width: 100%; } .studiobody:has(.studiocanvas:not([data-width="desk"])) { background: var(--surface-2); } .studiowidths { display: inline-flex; gap: 2px; } .studiowidth { border: 1px solid transparent; background: none; border-radius: 99px; padding: 5px 10px; font: inherit; font-size: 13px; color: var(--ink-soft); cursor: pointer; } .studiowidth:hover { color: var(--ink); background: var(--surface-2); } .studio__width.is-current { color: var(--accent); border-color: var(--accent); background: var(--accent-wash); } / --- Bauformen zum Ansehen ------------------------------------------------- ⚠️ EINE KACHEL IST EIN RAHMEN MIT DER ECHTEN SEITE DARIN, verkleinert. Die Seite rendert in 1200px Breite und wird auf ein Viertel gestellt — so stimmen Proportionen, Schriftgrad und Umbruch mit dem ueberein, was spaeter dasteht. Ein Bildschirmfoto waere am Tag der naechsten Aenderung falsch, und niemand merkt es. ⚠️ `pointer-events: none` AM RAHMEN: der Klick gehoert dem Knopf bzw. dem Auswahlfeld darunter, nicht der Seite darin. / / ⚠️ FESTE SPALTEN UND KEINE MITWACHSENDEN. Der Massstab der Kachel ist eine ZAHL (`scale`), und CSS kann keine Zahl aus einer Breite rechnen: `calc(100cqw / 1200)` ist eine Länge, kein Faktor, und wird verworfen — die Kachel zeigte dann die linke obere Ecke in Originalgrösse. Also steht die Breite fest und der Faktor steht daneben. Wer sie ändert, ändert beide; `shape_choosing_test` hält das zusammen. / / ⚠️ 232PX WAREN MASSSTAB 0.19 — DIE SCHRIFT ZWEI PIXEL HOCH. Auf einer 1200px breiten Vorschau heisst das: man sieht, DASS da ein Baustein ist, und sonst Weissraum. Gemeldet als „bauformen sehe ich alle nicht wirklich, mehrheitlich weisse flaechen". Jetzt fuellt die Kachel die Spalte, und die Hoehe kommt gemessen aus dem Rahmen (shapes_controller.js) statt aus einem Seitenmass, das fuer einen Trenner und eine Buehne gleichzeitig gelten muesste. / .shapes { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; } .shapessets { display: grid; gap: 20px; margin-bottom: 12px; } .shapesset { border: 0; padding: 0; margin: 0 0 6px; } .shape-tile { display: grid; gap: 6px; padding: 6px; cursor: pointer; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); font: inherit; color: var(--ink); } .shape-tile:hover { border-color: var(--line-strong); } .shape-tile.is-chosen, .shape-tile:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); } .shape-tile input { position: absolute; opacity: 0; pointer-events: none; } / ⚠️ EIN RAND IST KEINE ANTWORT AUF „WELCHE GILT?". Zwanzig fast gleiche Kacheln, eine davon mit einem farbigen Rand — das sieht man erst, wenn man es sucht, und wer es nicht sieht, haelt den Schirm fuer eine Galerie. / .shape-tilepick { display: none; position: absolute; top: 10px; right: 10px; z-index: 2; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; background: var(--accent); color: #fff; } .shape-tile { position: relative; } .shape-tile:has(input:checked) .shape-tilepick, .shape-tile.is-chosen .shape-tilepick { display: block; } / Die Leiste erscheint beim ersten Klick und bleibt unten stehen: die Wahl und das Festhalten der Wahl gehoeren zusammen. Oben rechts in der Werkzeugleiste steht derselbe Knopf — der aber ist beim Klicken ausser Sicht. / .savebar { position: sticky; bottom: 0; z-index: 30; display: flex; align-items: center; gap: 14px; justify-content: flex-end; padding: 12px 16px; border-radius: var(--radius); border: 1px solid var(--accent); background: var(--surface-2); box-shadow: 0 -6px 24px rgba(0, 0, 0, .18); } .savebarword { font-size: 13px; font-weight: 600; margin-right: auto; } / Die vier Masse, die ein Paket an die eigene Marke nachziehen — siehe CmsChrome::FEINSCHLIFF. Sie stehen im Aufbau-Kasten und nicht in einem eigenen Schirm: wer die Proportionen verstellt, will das Paket dabei sehen. / .fine { display: grid; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); } .fine .field { margin: 0; } .fine__reset { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; } / Die Masse eines eigenen Pakets werden als Zeilen getippt, nicht in hundert Feldern — siehe Editor::PackagesController.masse_lesen. / .fieldinput--code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12.5px; line-height: 1.6; white-space: pre; overflow-x: auto; } .tokenlist { list-style: none; margin: 8px 0 0; padding: 0; columns: 2; font-size: 12px; color: var(--ink-soft); } .tokenlist code { font-size: 11.5px; } / ⚠️ DER MASSSTAB RECHNET SICH AUS DER KACHEL, ER STEHT NICHT FEST. Hier stand `scale(.25)`: 1200px auf 300px — und die Kachel ist je nach Schirm, Panel und Dialog 150 oder 220 breit. Das halbe Bild lag ausserhalb, rechts abgeschnitten, und im Panel sah man von jeder Bauform nur die linke Haelfte. `cqw` misst die Kachel selbst; `container-type` macht sie messbar. / / 232px Spalte minus 2x6px Polster der Kachel = 220px Rahmen. / .shape-tilehit { display: grid; gap: 6px; cursor: pointer; } .shape-tileframe { display: block; position: relative; overflow: hidden; width: 100%; height: var(--shot-h, 140px); border-radius: 4px; background: #fff; } .shape-tileframe iframe { position: absolute; top: 0; left: 0; width: 1200px; height: var(--shot-raw, 520px); border: 0; transform: scale(var(--shot-scale, .27)); transform-origin: top left; pointer-events: none; } / Die Lupe liegt AUF der Kachel und ausserhalb des Labels — „ansehen" darf nicht „nehmen" heissen. Sichtbar wird sie beim Darueberfahren; auf einem Tastgeraet steht sie immer da, weil es dort kein Darueberfahren gibt. / .shape-tilezoom { / Oben LINKS: oben rechts steht „Gewaehlt", unten steht der Name der Bauform — dazwischen ist die freie Ecke. / position: absolute; left: 12px; top: 12px; z-index: 3; padding: 4px 10px; border-radius: 999px; font: inherit; font-size: 12px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); cursor: pointer; opacity: 0; } .shape-tile:hover .shape-tilezoom, .shape-tilezoom:focus-visible { opacity: 1; } @media (hover: none) { .shape-tilezoom { opacity: 1; } } / Die Bauform in voller Breite. Kein zweiter Reiter: der Vergleich mit der Kachel daneben ist der ganze Zweck, und der geht nur, wenn man zurueck ist, bevor man vergessen hat, was man verglichen hat. / .shape-modal { border: 0; border-radius: var(--radius-lg); padding: 0; width: min(1280px, 96vw); max-height: 92vh; overflow: auto; background: var(--surface); color: var(--ink); box-shadow: 0 24px 60px rgba(0, 0, 0, .28); } .shape-modal::backdrop { background: rgba(12, 6, 30, .48); } .shape-modalhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px 10px; } .shape-modalhead h2 { margin: 0; font-size: 17px; } .shape-modalframe { background: #fff; } .shape-modalframe iframe { display: block; width: 100%; height: 600px; border: 0; } .shape-modalfoot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px; } .shape-tilename { font-size: 12px; color: var(--ink-soft); } .shape-tilename small { color: var(--accent); } .shape-previewnote { margin: 0; padding: 24px; color: var(--ink-soft); font-size: 15px; } / --- Die Sektionsbibliothek ------------------------------------------------ ⚠️ EINE SEKTION IST BREIT, EIN BAUSTEIN NICHT. Die Kachel zeigt darum ein ganzes Band (1200x900 auf ein Drittel) und nicht den Ausschnitt, den eine Bauform braucht — an einem Kontaktband erkennt man das Band und nicht die Schriftgroesse. Siehe CmsSection. / .palettelibraries { display: flex; gap: 6px; margin: 0 0 12px; } .palettesearch { display: block; margin: 0 0 12px; } .palettesearch input { width: 100%; box-sizing: border-box; height: 40px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface, #f4f2f4); font: inherit; } .palettesearch input:focus { outline: 2px solid var(--accent, var(--purple)); outline-offset: 1px; } .palettenothing { margin: 8px 0; color: var(--ink-soft); } .palettelibrary { border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft); border-radius: 999px; padding: 5px 14px; font: inherit; font-size: 13px; cursor: pointer; } .palettelibrary.is-chosen { border-color: var(--accent); color: var(--ink); font-weight: 600; } .sections { display: grid; grid-template-columns: repeat(auto-fill, 232px); gap: 12px; } .section-tile { display: grid; gap: 4px; padding: 8px; cursor: pointer; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); font: inherit; color: var(--ink); } .section-tile:hover { border-color: var(--accent); } .section-tile strong { font-size: 14px; } .section-tile small { font-size: 12px; color: var(--ink-soft); } / 232px Spalte minus 2x8px Polster = 216px Rahmen — siehe `.shape-tileframe`. / .section-tileframe { display: block; position: relative; overflow: hidden; width: 216px; aspect-ratio: 1200 / 900; border-radius: 4px; background: #fff; } .section-tileframe iframe { position: absolute; top: 0; left: 0; width: 1200px; height: 900px; border: 0; transform: scale(calc(216 / 1200)); transform-origin: top left; pointer-events: none; } / --- Die Seite als Besucherin ----------------------------------------------- ⚠️ UEBER ALLEM, NICHT IN EINEM ZWEITEN REITER. Ein zweiter Reiter ist ein zweiter Ort mit eigenem Zustand; nach dem dritten Hinsehen liegen drei davon offen und keiner weiss mehr, welcher der aktuelle ist. / .studiovisit { position: fixed; inset: 0; z-index: 60; background: var(--canvas, #fff); } .studiovisit iframe { width: 100%; height: 100%; border: 0; display: block; } .studiovisit-back { position: fixed; right: 20px; bottom: 20px; z-index: 61; border: 0; border-radius: 999px; padding: 11px 20px; cursor: pointer; font: inherit; font-size: 14px; font-weight: 600; background: var(--accent, var(--purple)); color: #fff; box-shadow: 0 6px 24px rgba(0, 0, 0, .28); } .studiovisit-back:hover { filter: brightness(1.08); } / --- Callout und Schublade ---------------------------------------------- ⚠️ UEBER DER LEINWAND, NICHT DANEBEN. Die lange Leiste nahm der Leinwand 330px und zeigte alles untereinander; gemeldet als „sehr unübersichtlich". Der Callout steht am gewaehlten Baustein (Position rechnet studio_controller `placeCallout`), die Schublade kommt von rechts. ⚠️ DIE KLASSE HEISST `inspector`: `.callout` ist das Kontomenue an der Schiene, und beide Regelsaetze verbogen sich gegenseitig. / .studiobody { position: relative; } .inspector { position: absolute; top: 0; left: 0; z-index: 20; width: 380px; max-width: calc(100% - 24px); max-height: min(640px, calc(100% - 24px)); display: flex; flex-direction: column; background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: 0 12px 40px rgba(20, 10, 30, .18), 0 2px 8px rgba(20, 10, 30, .08); } .inspector[hidden], .drawer[hidden] { display: none; } / Ein Zeiger zur Seite des Bausteins — nur wenn der Callout neben ihm steht. / .inspector[data-side="right"]::before, .inspector[data-side="left"]::before { content: ""; position: absolute; top: 18px; width: 12px; height: 12px; background: var(--surface); border: 1px solid var(--line-strong); transform: rotate(45deg); } .inspector[data-side="right"]::before { left: -7px; border-top: 0; border-right: 0; } .inspector[data-side="left"]::before { right: -7px; border-bottom: 0; border-left: 0; } .inspectorhead { display: flex; align-items: center; gap: 8px; padding: 10px 10px 8px 16px; cursor: grab; user-select: none; border-bottom: 1px solid var(--line); } .inspectorhead:active { cursor: grabbing; } .inspectortitle { flex: 1; font-size: 13px; font-weight: 600; letter-spacing: .02em; } .inspectorclose { flex: none; width: 28px; height: 28px; border: 0; border-radius: 8px; background: none; color: var(--ink-soft); font: inherit; cursor: pointer; } .inspectorclose:hover { background: var(--surface-3); color: var(--ink); } .inspectortabs, .drawertabs { display: flex; gap: 2px; padding: 6px 10px 0; border-bottom: 1px solid var(--line); } .inspectortabs[hidden] { display: none; } .inspectortab { border: 0; background: none; font: inherit; font-size: 13px; color: var(--ink-soft); padding: 8px 10px; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; } .inspectortab:hover { color: var(--ink); } .inspectortab.is-current { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; } .inspectortab[hidden] { display: none; } .inspectorbody { overflow-y: auto; padding: 14px 16px 16px; min-height: 0; border-radius: 0 0 11px 11px; } .inspectorbody .paneltab[hidden] { display: none; } .inspectorbody .shapes { grid-template-columns: 1fr; } .inspectorapply { position: sticky; bottom: -16px; margin: 14px -16px -16px; padding: 10px 16px; background: var(--surface); border-top: 1px solid var(--line); } .inspectorapply .btn, .drawerfoot .btn { width: 100%; } .drawer { position: absolute; top: 0; right: 0; bottom: 0; z-index: 21; width: 420px; max-width: 100%; display: flex; flex-direction: column; background: var(--surface); color: var(--ink); border-left: 1px solid var(--line-strong); box-shadow: -12px 0 40px rgba(20, 10, 30, .14); } .drawerhead { display: flex; align-items: center; gap: 8px; padding: 12px 10px 6px 18px; } .drawertitle { flex: 1; font-size: 15px; font-weight: 600; } .drawertabs { padding-inline: 12px; } .drawerbody { flex: 1; overflow-y: auto; padding: 16px 18px; min-height: 0; } .drawertab[hidden] { display: none; } .drawerfoot { padding: 12px 18px; border-top: 1px solid var(--line); background: var(--surface-2); } .studiobar .btn.is-current { color: var(--accent); border-color: var(--accent); background: var(--accent-wash); } @media (max-width: 720px) { / Schmal: beides als Blatt von unten. / .inspector { width: auto; left: 0; right: 0; top: auto; bottom: 0; transform: none !important; max-width: none; max-height: 70%; border-radius: 14px 14px 0 0; } .inspector::before { display: none; } .drawer { width: 100%; top: auto; height: 80%; border-left: 0; border-top: 1px solid var(--line-strong); border-radius: 14px 14px 0 0; } } .panel { display: block; } .paneltitle { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 12px; color: var(--ink-soft); } .panelhint { font-size: 12px; color: var(--ink-soft); margin: 8px 0; } / Ein Hinweis, der ein ERGEBNIS meldet und keine Erklaerung: gruen, wenn etwas herauskam, rot, wenn nicht. Ohne diesen Unterschied liest sich „gescheitert" wie eine Fussnote. / .panelhint--ok { color: var(--emerald, #0a7d55); } .panelhint--bad { color: #b00020; } / Ein Schieber und die Zahl daneben. Eine Zahl ohne Anzeige ist ein Schieber, der nichts sagt — und die Zahl gehoert an die Beschriftung, nicht unter das Feld, damit man sie beim Ziehen im Blick hat. / .fieldvalue { float: right; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; } .fieldrange { width: 100%; accent-color: var(--accent, var(--purple)); } / Eine Zwischenueberschrift IM Panel. Ohne sie stehen zusammengehoerige Felder („Knopf": Ziel, Adresse, Beschriftung) als drei lose Zeilen zwischen fremden, und die Frage, die sie gemeinsam beantworten, wird nirgends gestellt. / .panelgroup { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-faint); margin: 20px 0 8px; padding-top: 14px; border-top: 1px solid var(--line); font-weight: 600; } .panelgroup:first-child { margin-top: 0; padding-top: 0; border-top: 0; } .paneltools { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; } / Eine Spalte im Panel ist ein eigener Kasten: bei sechs Spalten stehen sonst achtzehn Felder ohne Grenze untereinander und man weiss nicht, welches Bild zu welchem Titel gehoert. / / Zwei kurze Felder nebeneinander — Jahr und Art eines Berichts. / .panelpair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .panelcell { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin: 12px 0; min-inline-size: 0; } .panelcell-title { font-size: 12px; font-weight: 600; color: var(--ink-soft); padding: 0 4px; } .picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; max-height: 240px; overflow-y: auto; } .pickeritem { border: 2px solid var(--line); border-radius: 8px; background: var(--surface); padding: 0; cursor: pointer; aspect-ratio: 1; overflow: hidden; } .pickeritem img { width: 100%; height: 100%; object-fit: cover; display: block; } / Radios hinter Vorschaubildern: ein Bild waehlt man an seinem Aussehen, und ohne Skript geht das nur so. Das Kaestchen selbst ist unsichtbar, die Kontur der Kachel sagt, was gewaehlt ist. / .picker--radio .pickeritem { display: block; position: relative; } .picker--radio input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; } .picker--radio .pickeritem:has(input:checked) { border-color: var(--accent); } .picker--radio input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .pickeritem.is-chosen { border-color: var(--accent, #a020f0); } .pickernone, .pickername { font-size: 11px; display: grid; place-items: center; padding: 4px; } / --- Public website ---------------------------------------------------- * * Its own, narrow set. A press release is read, printed and quoted — so the * measure is a reading measure and the colours stay out of the way. / / The tenant's values arrive as --accent/--canvas/--font-* from the layout (CmsChrome#css_variables) and are only DEFAULTED here, so a site that has configured nothing looks exactly as it did before. / / ⚠️ GROSSE TITEL TRENNEN SELBST. Gemeldet: „ich musste das - bei Technologieunternehmen einfügen weil er es im titel nicht korrekt umgebrochen hat … aber in der liste darf das natürlich nicht sein". Ein deutsches Kompositum in 70px passt nicht in eine Zeile; von Hand getrennt stand der Strich danach in der Liste, im Feed und in der Vorschau bei LinkedIn. Der Browser trennt nach der Sprache der Seite (``), und nur lange Wörter (`hyphenate-limit-chars`), damit „vernetzen" ganz bleibt. Nur die Titel: Fliesstext mit Trennstrichen liest sich schlechter. / body.site :is(.entryhead h1, .section-head h1, .block--heading .headingtext, .block--hero h1, .block--hero h2, .formtitle, .splittitle) { -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 12 5 5; overflow-wrap: break-word; } body.site { background: var(--canvas, #fff); color: var(--ink); font-family: var(--font-body, inherit); } body.site h1, body.site h2, body.site h3 { font-family: var(--font-head, inherit); } / ⚠️ DIESE MERKMALE GAB ES AUF DER WEBSITE NICHT — UND 108 REGELN BENUTZTEN SIE TROTZDEM. `--line`, `--ink-soft`, `--ink-faint`, `--surface-2/3`, `--shadow`, `--accent-wash` stehen mit gutem Grund nur unter `.ui`: ein dunkles Erscheinungsbild ist die Vorliebe der Redakteurin und darf die Website eines Kunden nicht umfaerben. Die Regeln der WEBSITE griffen aber genauso darauf zu — und ein `var()` ohne Wert macht die ganze Deklaration ungueltig. Also: `border-bottom: 2px solid var(--line)` zeichnete GAR KEINE Linie. Das war nicht kosmetisch, es hat ganze Bauformen ununterscheidbar gemacht: „Unterstrichen" sah aus wie „Standard", „Karte" wie „Standard", „Ruhig" wie „Band" — pixelgleich, nachgemessen. Gemeldet als „die mehrheit der bauformen scheint auch nicht so designed wie die quellseite". Hergeleitet wird alles aus den Farben DES MANDANTEN, nie aus denen der Redaktion: eine Linie ist sein Textton mit wenig Deckung, kein Grauwert aus unserer Palette. / body.site { / ⚠️ UND DAS SIGNET GEHOERT DAZU — es steht seit 1.2.6 auch in der Fusszeile jeder Website, und `.brand-mark` liest `--mark-ground`/`--mark-signal`. Ohne diese beiden Zeilen waere es dort ein durchsichtiges Viereck: derselbe Fall wie bei `--line`, nur eine Datei weiter. Die Werte sind FEST und nicht aus dem Thema gemischt — es ist die Marke des Produkts und nicht die der Kundin. / --mark-ground: #341539; --mark-signal: #ff00ff; --brand-glow: transparent; --line: color-mix(in srgb, var(--ink, #1b1420) 14%, transparent); --line-strong: color-mix(in srgb, var(--ink, #1b1420) 28%, transparent); --ink-soft: color-mix(in srgb, var(--ink, #1b1420) 68%, transparent); --ink-faint: color-mix(in srgb, var(--ink, #1b1420) 46%, transparent); --surface-2: color-mix(in srgb, var(--ink, #1b1420) 4%, var(--surface, #f4f2f4)); --surface-3: color-mix(in srgb, var(--ink, #1b1420) 8%, var(--surface, #f4f2f4)); --accent-wash: color-mix(in srgb, var(--accent, #a020f0) 10%, var(--canvas, #fff)); --shadow: 0 2px 12px color-mix(in srgb, var(--ink, #1b1420) 10%, transparent); --shadow-sm: 0 1px 4px color-mix(in srgb, var(--ink, #1b1420) 8%, transparent); } / ⚠️ DIE PROPORTIONEN SIND VARIABLEN, damit ein Seitenaufbau sie setzen kann. Vorher standen sie als Zahlen hier — und Gestaltung ist genau das: wie breit der Satzspiegel ist, wie gross der Sprung von der Überschrift zum Fliesstext ausfällt, wie viel Luft zwischen den Abschnitten steht. Wer nur Farben tauschen kann, bekommt dieselbe Seite in einer anderen Farbe. / body.site { --head-max: 900px; / ⚠️ MITWACHSEND UND NICHT PER MEDIENABFRAGE. Die Telefonwerte standen als Ueberschreibung ganz unten an `body.site .sitehead` — und erreichten JEDES Paket nicht, das diese Merkmale selbst setzt: die Werte des Pakets kommen inline im Kopf der Seite und gewinnen bei gleicher Spezifitaet. Auf einem 390px-Telefon stand darum die 50px-Leiste des Schreibtischs. Ein `clamp` braucht keine Spezifitaet. / --head-pad-top: clamp(14px, 2.2vw, 28px); --head-pad-x: clamp(20px, 2vw, 24px); --head-pad-bot: clamp(12px, 1.4vw, 16px); / ⚠️ EIN EINZIGER SEITENRAND, UND ER HIESS DREIMAL ANDERS. `max(50px, calc(50% - 720px))` stand woertlich an der Kopfzeile und an der Fusszeile, die Buehne nahm 32px und der Fliesstext wieder etwas anderes — also stand der Buehnentitel WEITER LINKS als das Logo darueber. Gemeldet: „auf der bühne ist der text weiter links als das logo". Hergeleitet und nicht gesetzt: die 720 sind die halbe `--head-max`, also folgt der Rand dem Paket, statt eine zweite Zahl zu sein, die man beim Wechsel vergisst. Und er steht an `body.site` und nicht je Aufbau — die MASSE gehoeren ins Manifest, ihre Herleitung in die Stilvorlage. / --page-gutter: max(var(--head-pad-x), calc(50% - var(--head-max) / 2)); / ⚠️ MITTIG, NICHT AUF DER SCHRIFTLINIE. `baseline` richtete das Menue an der Grundlinie der Wortmarke aus; sobald ein Logo im Spiel war, hing es an dessen UNTERKANTE und stand umso schiefer, je hoeher man es stellte. Die Logohoehe ist eine Einstellung — dann muss die Kopfzeile ihr folgen. / --head-align: center; --head-dir: row; --main-max: 760px; --main-wide-max: 1100px; --rhythm: 56px; --brand-size: 20px; --nav-size: 15px; --nav-gap: 16px; --nav-transform: none; --nav-spacing: normal; --nav-weight: 400; --hero-pad: 56px 40px; --hero-title: clamp(28px, 4vw, 46px); --btn-radius: 999px; --head-sticky: static; / ⚠️ DIE FUSSZEILE GEHÖRTE NICHT DAZU, und darum sah sie in allen fünf Aufbauten gleich aus: `900px` und `32px 24px` standen als Zahlen in der Regel, wo Kopfzeile und Satzspiegel längst Variablen hatten. Eine Gestaltung endet nicht am letzten Baustein — der Fuss ist die Kante, auf der die Seite steht. / --foot-top: 64px; --foot-max: 900px; --foot-pad: 32px 24px 40px; --foot-ground: var(--surface, transparent); --foot-line: 1px solid var(--line); --foot-gap: 40px; --foot-size: 13px; --foot-title-size: 13px; --foot-title-transform: uppercase; --foot-title-spacing: .06em; --foot-legal-gap: 28px; --foot-legal-line: var(--foot-line); --foot-align: flex-start; --foot-justify: flex-start; --foot-text-align: left; } .sitehead { display: flex; align-items: var(--head-align); gap: 24px; flex-wrap: wrap; flex-direction: var(--head-dir); max-width: var(--head-max); margin: 0 auto; / ⚠️ DIE HOEHE DER LEISTE IST EINE EINSTELLUNG. Gefragt wurde „hat es oberhalb der buehne im haustemplate heute eine sehr hohe menuezeile?" — ja, mit Absicht (131px, an www.netsuisse.com gemessen), nur konnte niemand etwas daran aendern. `--head-pad-scale` kommt aus dem Erscheinungsbild (CmsChrome::HEAD_DENSITIES) und rechnet auf dem, was der Aufbau vorgibt: die Proportionen des Aufbaus bleiben, die Leiste wird schmaler oder luftiger. / padding: calc(var(--head-pad-top) var(--head-pad-scale, 1)) var(--head-pad-x) calc(var(--head-pad-bot) * var(--head-pad-scale, 1)); border-bottom: 1px solid var(--line); position: var(--head-sticky); top: 0; z-index: 30; background: var(--canvas, #fff); } /* ⚠️ DIE MARKE IST EINE ZEILE ODER EIN BILD, und beide muessen sich zum Menue verhalten. Als reiner Inline-Link sass ein hohes Logo auf der Schriftlinie: je groesser man es stellte, desto weiter rutschte das Menue nach unten aus der Mitte — die Hoehe war einstellbar, aber nichts richtete sich danach. / .sitebrand { display: flex; align-items: center; font-size: var(--brand-size); font-weight: 600; text-decoration: none; color: var(--ink); line-height: 1; } / ⚠️ RECHTS, NICHT NEBEN DER MARKE. Ohne `margin-left: auto` klebte das Menue am Logo und der ganze rechte Teil der Leiste blieb leer — auf netsuisse.com steht es rechts, zusammen mit der Sprachwahl. `align-items: center` haelt es auf der Mittelachse des Logos: ein hohes Logo zog es sonst nach unten. Gemeldet: „das menü ist nicht vertikal zentriert zum logo wie im original, auch nicht nach rechts aligniert". / .sitenav { display: flex; align-items: center; gap: var(--nav-gap); margin-left: auto; } / ⚠️ NACHGEMESSEN AN www.netsuisse.com, NICHT GESCHAETZT (das war hier schon einmal der Fehler). Dort steht das Menue in `color: inherit` auf `#0c061e`, also der VOLLEN Textfarbe — mager (300), in Versalien, 0.08em gesperrt und 14–18px mitwachsend. Grau war es hier: `--ink-soft` ist #6b6472 auf Weiss, und genau so wurde es gemeldet („hellgrau auf weiss"). Ein Menue ist die Navigation der Website und nicht ihr Kleingedrucktes — die Textfarbe ist deshalb die Vorgabe in JEDEM Aufbau, nicht nur im Hausaufbau. / .site__nav a { color: var(--nav-ink, var(--ink)); text-decoration: none; / ⚠️ EIN FAKTOR AUF DAS MITWACHSENDE MASS DES AUFBAUS, keine Pixelzahl. `--nav-size` ist im Haus `clamp(14px, 1.15vw, 18px)` — an netsuisse.com abgelesen; eine feste Zahl naehme das Mitwachsen weg. Siehe CmsChrome::NAV_SCALES. / font-size: calc(var(--nav-size) var(--nav-scale, 1)); text-transform: var(--nav-transform); letter-spacing: var(--nav-spacing); /* ⚠️ AUS DEM ERSCHEINUNGSBILD, mit dem Wert des Aufbaus als Rueckfall. Gemeldet: „die schrift selber kann man nicht einstellen und ob bold oder nicht". Abgelesen an www.netsuisse.com (2026-09-10): `header .header-nav .menu a { font-weight: 300; line-height: 1 }`. / font-weight: var(--nav-weight, 300); font-family: var(--nav-font, var(--font-body)); line-height: 1; } .sitenav a:hover { color: var(--accent, var(--purple)); } / ⚠️ DIE HÖHE IST EINE EINSTELLUNG, KEINE KONSTANTE. Hier stand 34px fest: ein breiter Schriftzug war damit winzig, ein quadratisches Signet erschlug die Kopfzeile, und dagegen tun konnte man nur eines — die Datei ausserhalb beschneiden und neu hochladen. / / ⚠️ `flex-shrink: 0` UND EIN MINDESTMASS: EIN SVG HAT UNTER UMSTAENDEN KEINE EIGENGROESSE. Die Datei traegt sie jetzt selbst (Media::SvgScrub#bemassen), und das ist die eigentliche Reparatur — hier steht das Netz darunter. In einem Flex-Kasten rechnet ein `` ohne Eigenbreite die Breite null und zeigt nichts an: kein Fehler, keine Meldung, eine leere Stelle. / / ⚠️ `height` UND NICHT `max-height`, UND DAS IST EINE KORREKTUR. Solange ein SVG keine Eigengroesse hatte, war der Unterschied unsichtbar. Seit die Datei ihr Mass mittraegt (Media::SvgScrub#bemassen), DECKELT `max-height` nur noch: ein 60px hohes Logo blieb bei der Einstellung 118 genau 60px hoch. Gemeldet als „ich kann jetzt bis 118 gehen, damit ist das logo per se aber eigentlich zu klein" — der Regler war nicht zu klein, er war ein Deckel. ⚠️ UND DIE BREITE IST DIE ANDERE ACHSE. Abgelesen an www.netsuisse.com (2026-09-10): `header .header-logo-wrapper svg { width: clamp(150px, 275 / 1520 * var(--container-width), 275px) }` — ein Schriftzug wird dort ueber die BREITE bemessen und die Hoehe folgt. Ist eine Breite gesetzt, gewinnt sie; sonst gilt die Hoehe. / .sitelogo { height: var(--logo-height, 34px); width: auto; display: block; max-width: 100%; flex: 0 0 auto; min-width: 1px; } .sitehead:has(.sitelogo) { --logo-basis: var(--logo-height, 34px); } .sitelogo--wide { width: var(--logo-width); height: auto; max-height: none; } / Und die Leiste waechst mit: das Polster ist ein Mindestmass, die Hoehe ergibt sich aus dem, was drinsteht. Ein 120px-Logo in einer Leiste mit festen 20px oben und unten waere abgeschnitten. / .sitehead { min-height: calc(var(--logo-height, 34px) + 2 20px * var(--head-pad-scale, 1)); } .nav-list { list-style: none; display: flex; gap: var(--nav-gap); margin: 0; padding: 0; } .nav-list > li { position: relative; } .nav-sub { position: absolute; left: 0; top: 100%; z-index: 20; list-style: none; margin: 0; padding: 8px 0; min-width: 12rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 12px 28px rgba(0, 0, 0, .09); display: none; } .nav-sub li a { display: block; padding: 6px 16px; } /* Hover AND focus-within: a submenu that only opens on hover cannot be reached with a keyboard, and does not exist at all on a touch screen. / .nav-list > li:hover > .nav-sub, .nav-list > li:focus-within > .nav-sub { display: block; } @media (max-width: 720px) { / No hover on a phone: the submenu is simply always visible, indented. / .nav-list { flex-wrap: wrap; } .nav-sub { position: static; display: block; border: 0; box-shadow: none; padding: 0 0 0 14px; min-width: 0; } } / Der Sprachumschalter: ein Klappmenue aus
, ohne eine Zeile Skript. / / ⚠️ KEIN ZWEITES `margin-left: auto`. Seit das Menue selbst nach rechts rueckt, teilten sich zwei automatische Raender den freien Platz — und das Menue landete in der MITTE der Leiste statt rechts. Die Sprachwahl folgt dem Menue; auf dem Telefon setzt die Medienabfrage sie wieder selbst nach rechts, weil das Menue dort im Burger steckt. / .sitelangs { position: relative; font-size: 12px; } .sitelangs-current { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-soft); cursor: pointer; list-style: none; user-select: none; } .sitelangs-current::-webkit-details-marker { display: none; } .sitelangs-current:hover { color: var(--ink); } .sitelangs[open] .sitelangs-caret { transform: rotate(180deg); } .sitelangs-caret { transition: transform .12s ease; } @media (prefers-reduced-motion: reduce) { .sitelangs-caret { transition: none; } } .sitelangs-list { position: absolute; top: calc(100% + 6px); right: 0; z-index: 40; display: flex; flex-direction: column; min-width: 84px; padding: 5px; border: 1px solid var(--line); border-radius: 10px; background: var(--canvas, #fff); box-shadow: 0 8px 24px rgba(0, 0, 0, .12); } .sitelangs-list a { padding: 6px 10px; border-radius: 7px; color: var(--ink-soft); text-decoration: none; } .sitelangs-list a:hover { background: var(--surface); color: var(--ink); } .sitelangs-list a.is-current { color: var(--accent, var(--purple)); font-weight: 600; } .sitemain { max-width: var(--main-max); margin: 0 auto; padding: 32px 24px 64px; } / A landing page. Wider, and its blocks may reach past the measure — a hero at 760px is not a hero. / .sitemain--wide { max-width: var(--main-wide-max); padding-top: 0; } .sitemain--wide .block--wide { max-width: none; } .sitemain--wide .block--full { margin-left: calc(-1 clamp(0px, 4vw, 60px)); margin-right: calc(-1 * clamp(0px, 4vw, 60px)); } /* Der Abstand zwischen Bausteinen steht bei `.entrybody` — siehe „Der Fluss einer Seite". / / --- Die vier Seitenaufbauten ------------------------------------------- ⚠️ VIER SÄTZE VARIABLEN, KEINE VIER VORLAGEN. Eigene Vorlagen je Aufbau hiessen, jede spätere Änderung an einer Seite viermal zu machen — und drei davon würde man beim ersten Mal vergessen. `klassisch` ist die Vorgabe und steht darum nicht hier: es sind genau die Werte oben. Was sie unterscheidet, sind Proportionen und nicht Farben: Satzspiegel, Typosprung, Abstand zwischen Abschnitten, Charakter der Kopfzeile. / / Breit, gross, Versalien im Menü. Für Seiten, die von Bildern leben — ein Beitragsraster in einer 760er-Spalte ist eine Liste, kein Raster. / / Die Masse von „magazin" stehen in config/layouts/magazin.yml und kommen als Eigenschaften aus CmsLayout — hier bleibt nur die Struktur. / body.site[data-layout="magazin"] .block--hero:not([data-corner]) { border-radius: 0; } body.site[data-layout="magazin"] .sitehead { border-bottom-width: 2px; border-bottom-color: var(--ink); } body.site[data-layout="magazin"] h1, body.site[data-layout="magazin"] h2 { letter-spacing: -.02em; } / Viel Luft, Logo ÜBER dem Menü, weiche Formen. Für Marken mit wenig Text — die Kopfzeile ist hier selbst ein Gestaltungselement und keine Leiste. / / Die Masse von „studio" stehen in config/layouts/studio.yml und kommen als Eigenschaften aus CmsLayout — hier bleibt nur die Struktur. / body.site[data-layout="studio"] .sitehead { border-bottom: 0; text-align: center; } body.site[data-layout="studio"] .sitelangs { margin: 0; } body.site[data-layout="studio"] .block--hero { border-radius: 28px; } / Mittig heisst auch: das Signet und die Aufzählungen stehen mittig, nicht linksbündig in einer mittig gesetzten Spalte. / body.site[data-layout="studio"] .footmark { margin-left: auto; margin-right: auto; } body.site[data-layout="studio"] .footsocial { justify-content: center; } body.site[data-layout="studio"] .footlegal { justify-content: center; } / Dicht und sachlich, mitlaufende Kopfzeile. Für Seiten mit viel Inhalt, wo das Menü nach dem dritten Bildschirm noch erreichbar sein muss. / / Die Masse von „kompakt" stehen in config/layouts/kompakt.yml und kommen als Eigenschaften aus CmsLayout — hier bleibt nur die Struktur. / body.site[data-layout="kompakt"] .sitehead { box-shadow: 0 1px 0 var(--line); } body.site[data-layout="kompakt"] .sitemain { padding-top: 24px; } / Die Handschrift von netsuisse.com. ⚠️ ABGELESEN, NICHT ERFUNDEN: die Werte stammen aus der Seite selbst. Was sie ausmacht, ist nicht die Farbe — der Akzent #a020f0 und die Schriftpaarung Neue Regrade / Suisse Int'l sind ohnehin die Vorgabe — sondern die Anordnung: alles mittig, sehr grosse Titel, ein grosszügiger Fliesstext, Knöpfe als Kontur statt als Fläche, und EINE gekappte Ecke, die einen Abschnitt vom nächsten trennt. / / Die Masse von „haus" stehen in config/layouts/haus.yml und kommen als Eigenschaften aus CmsLayout — hier bleibt nur die Struktur. / body.site[data-layout="haus"] .sitehead { border-bottom: 0; } / ⚠️ NACHGEMESSEN AN EINER MELDUNG VON www.netsuisse.com, nicht erfunden: `.single-blog` legt das Bild mit der gekappten Ecke nach oben (`clip-path: inset(… round 0% 0% var(--curve-size) 0%)`, 150–350px), darunter `.single-blog-heading` — eine Bahn in #341539 mit 60px Polster, dem Datum in #a020f0 und dem Titel in WEISS bei `clamp(28px, 70/1520 * container, 70px)`. Der Fliesstext steht danach in Lesebreite, Zeilenabstand 1.4. Der tiefe Grund wird wie bei der Buehne aus dem Akzent gerechnet: eine gruene Website bekaeme sonst eine violette Bahn. / / ⚠️ DAS BILD LIEGT AUF DEM FARBIGEN GRUND, ES LIEGT NICHT DANEBEN. Gemeldet: „heute liegen die bilder z.b. im blog separat zum farbigen hintergrund, das ist auf der bisherigen seite gematcht und das bild folgt den runden ecken." Beim ersten Messen hatte ich nur die gekappte Ecke abgelesen und den Rest der Bahn uebersehen. Vollstaendig steht dort (netsuisse.com, `themes/netsuisse/build/css/style.css`): .single-blog .banner-section { background-color: #341539 } .banner-section .bg-image { position: absolute; background: #341539 } .banner-section .bg-image img { opacity: 0.5 } .single-blog .banner-section .bg-image { clip-path: inset(… round 0 0 curve 0) } Also: das Bild liegt HALBDURCHSICHTIG auf demselben tiefen Grund wie die Titelbahn darunter — beides zusammen ist EIN farbiger Block, und genau das heisst „gematcht". Bei uns lag ein Foto in voller Deckung auf weissem Papier und darunter, als zweites Ding, die dunkle Bahn; durch die gekappte Ecke sah man das Papier. ⚠️ DER GRUND STEHT AN EINER STELLE. Vorher rechnete ihn die Kopfbahn selbst aus; jetzt tragen ihn beide aus `--band`, sonst driften sie beim naechsten Mal auseinander und die Naht wird wieder sichtbar. / / Die Masse von „haus" stehen in config/layouts/haus.yml und kommen als Eigenschaften aus CmsLayout — hier bleibt nur die Struktur. / body.site[data-layout="haus"] .entrycover { margin: 0; background: var(--band); line-height: 0; } body.site[data-layout="haus"] .entrycover img { opacity: var(--cover-tint); } / ⚠️ EINE HOEHE, NICHT DIE DES FOTOS. Das Bild lief ueber die ganze Breite in seinem eigenen Seitenverhaeltnis — ein Querformat von 2560px stand auf einem Schreibtisch 960px hoch, bevor der Titel kam. Gemeldet: „die bilder … sind oben einfach zu gross, das darf etwas kleiner sein". netsuisse.com nimmt 80–90vh fuer das Titelband; bei uns ist es ein Band ueber dem Titel, also hoechstens 520px und nie mehr als 60 % des Fensters. `object-fit: cover` schneidet zu, statt zu verzerren. / body.site[data-layout="haus"] .entrycover img { width: 100%; height: min(clamp(240px, 38vw, 520px), 60vh); object-fit: cover; } / ⚠️ DER KNOPF LIEGT AUF DEM BILD, ALSO BRAUCHT DIE HUELLE EINEN BEZUG. Abgelesen an netsuisse.com (2026-09-10): `.single-blog .banner-section .back-button { position: absolute; left: 60px; top: 60px; gap: 20px }`. Auf einem schmalen Schirm rueckt er naeher an die Ecke, sonst stuende er mitten im Bild. / .entrycover { position: relative; } .entryback { position: absolute; top: clamp(16px, 4vw, 60px); left: clamp(16px, 4vw, 60px); display: inline-flex; align-items: center; gap: 10px; padding: 9px 20px; border-radius: 999px; background: rgba(255, 255, 255, .9); color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 600; } .entryback::before { content: "\2190"; font-size: 17px; line-height: 1; } / Der Knopf liegt auf dem Bild, nicht IM Bild: die Daempfung gilt dem Foto. / body.site[data-layout="haus"] .entryback { opacity: 1; line-height: 1; } .entryback:hover { background: #fff; } / ⚠️ DIE GEKAPPTE ECKE SCHLIESST DEN GANZEN BLOCK AB, NICHT NUR DAS BILD. Hier stand `.entryhead--covered { border-radius: 0 }`: mit Titelbild endete die dunkle Bahn also eckig, und die Kappung sass mitten drin. Die Vorlage macht es andersherum — die Bahn UNTER dem Bild traegt sie (`.banner-section-generic { clip-path: inset(… round 0 0 curve 0) }`), das Bild traegt sie zusaetzlich. Auf gemeinsamem Grund faellt die obere nicht auf, die untere schliesst den Block. / body.site[data-layout="haus"] .entrycover img { border-radius: 0 0 clamp(90px, 12vw, 200px) 0; } / ⚠️ AUCH DIE KOPFBAHN GEHOERT NICHT INS LESEMASS. Dieselbe Meldung wie bei der Liste: „das ist in der mitte gequetscht, das original nicht." Hier standen -24px — genau das Polster von `.sitemain` und keinen Millimeter mehr. Die dunkle Bahn endete damit auf 880px in der Mitte des Schirms, waehrend sie auf netsuisse.com eine Sektion ueber die ganze Breite ist (`.banner-section`, `.banner-section-generic`). Der Text darin steht im Behaelter (hoechstens 1480px), so wie dort `.banner-content > .container`. ⚠️ DER FLIESSTEXT BLEIBT IM LESEMASS. Die Vorlage laesst ihn auf 1480px einspaltig laufen (`.generic-text.blog-content .body { column-count: 1 }`); das sind ueber 200 Zeichen je Zeile, und wer dort einen laengeren Beitrag liest, verliert die Zeile. Die BAHN wird breit, der Absatz nicht. / body.site[data-layout="haus"] .entrycover, body.site[data-layout="haus"] .entryhead { margin-inline: calc(50% - 50vw); } / ⚠️ DER TITEL STEHT AUF DER KANTE DES TEXTES, NICHT AUF DER DES BEHAELTERS. Hier stand `calc(50vw - 740px)`, der Satzspiegel von netsuisse.com (1480px). Dort laeuft aber auch der Fliesstext auf 1480px; bei uns steht er im Lesemass. Auf 1440px begann der Titel damit bei 24px und der Text bei 334px — gemeldet: „titel und content sind versetzt". `50vw - 50%` hebt den negativen Rand der Bahn genau auf: die Prozente beziehen sich auf die Breite des Inhalts darunter, also steht der Titel auf dessen Kante — im Lesemass einer Meldung wie auf einer breiten Seite, und ein Rollbalken verschiebt beides gleich. / body.site[data-layout="haus"] .entryhead { padding-inline: max(24px, calc(50vw - 50%)); } body.site[data-layout="haus"] .entryhead { background: var(--band); color: #fff; padding-block: 60px; border-radius: 0 0 clamp(90px, 12vw, 200px) 0; margin-bottom: 40px; } body.site[data-layout="haus"] .entryhead time { font-size: 15px; color: var(--accent, var(--purple)); } body.site[data-layout="haus"] .entryhead h1 { color: #fff; font-weight: 600; line-height: 1.2; font-size: clamp(28px, 4.6vw, 70px); margin: 30px 0 0; / Auch in der breiten Bahn bricht der Titel dort, wo ihn die Vorlage bricht: `.banner-heading { max-width: clamp(450px, 750/1520container, 750px) }`. Ohne das liefe eine Schlagzeile ueber 1480px. / max-width: clamp(450px, 49vw, 750px); } body.site[data-layout="haus"] .entryhead .lead { color: rgba(255, 255, 255, .82); } /* ⚠️ EINE SEITE IST KEINE MELDUNG, UND DAS KOPFBAND SAGT DAS. Abgelesen an netsuisse.com (2026-09-10): dieselbe dunkle Bahn mit derselben gekappten Ecke, aber die generische SEITE traegt ein hohes Band (`padding-block: clamp(100px, 200/1520container, 200px)`) mit dem Titel in der Signalfarbe und auf 450–750px Breite gebrochen; die MELDUNG ein flaches (`padding-block: 60px`) mit weissem Titel und farbigem Datum. Bei uns bekam beides die Meldungsfassung — genau deshalb sah die Datenschutzseite „überhaupt nicht so aus". ⚠️ DIE FARBE KOMMT AUS DEM AKZENT, NICHT AUS #ff00ff. Dort stehen zwei verschiedene Violett nebeneinander (#a020f0 als Akzent, #ff00ff im Titel); festgeschrieben stuende das Magenta auch auf einer gruenen Website. / body.site[data-layout="haus"] .entryhead--page { padding-top: clamp(100px, 13vw, 200px); padding-bottom: clamp(100px, 13vw, 200px); } body.site[data-layout="haus"] .entryhead--page h1 { color: var(--accent, var(--purple)); margin: 0; } body.site[data-layout="haus"] :is(.entrybody, .page) { line-height: 1.4; } /* ⚠️ DIE LEISTE GEHT ÜBER DIE GANZE BREITE, DER INHALT NICHT. `.sitehead` ist zugleich Leiste und Satzspiegel: mit `max-width` zentriert stand die weisse Fläche nur in der Mitte, und links und rechts davon schob sich die randlose Bühne bis an den oberen Rand — der Kopf sass in einem Loch. Die Breite wandert darum ins Polster. / / ⚠️ EIN EINZIGER SEITENRAND, UND ER HIESS DREIMAL ANDERS. `max(50px, calc(50% - 720px))` stand woertlich an der Kopfzeile und an der Fusszeile, die Buehne nahm 32px, und der Fliesstext wieder etwas anderes — also stand der Buehnentitel WEITER LINKS als das Logo darueber. Gemeldet: „auf der bühne ist der text weiter links als das logo". Ein Wert, drei Benutzer; und die 720 sind jetzt die halbe `--head-max` statt einer zweiten Zahl, die man beim Wechsel des Pakets vergisst. / body.site[data-layout="haus"] .sitehead { max-width: none; background: var(--canvas, #fff); padding-left: var(--page-gutter); padding-right: var(--page-gutter); } / Die Rechtszeile ist eine Zeile, kein zweiter Block: keine Linie darüber, nur Abstand, und das Kleingedruckte in derselben Grösse wie die Links. / / --- Die Schlusszeile des Hausaufbaus ------------------------------------ Drei Zonen in EINER Zeile: links das Kleingedruckte, in der Mitte das Signet, rechts der Weg nach draussen. `1fr auto 1fr` und nicht drei gleiche Spalten — nur so steht das Signet in der Mitte der SEITE und nicht in der Mitte des Platzes, der übrig bleibt. / .sitefoot--haus .footbar { display: grid; grid-template-columns: 1fr auto 1fr; / Gemessen: die drei Teile sitzen auf EINER Unterkante (`flex-end`), nicht auf einer Mittelachse. Bei einzeiligem Inhalt sieht das gleich aus; sobald links zwei Zeilen stehen, wandert das Signet nach unten statt in die Mitte des Textblocks. / align-items: end; gap: 30px; margin-top: var(--foot-legal-gap); font-size: 14px; } .sitefoot--haus .footzone { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; } .sitefoot--haus .footzone--mid { flex-direction: column; gap: 6px; text-align: center; } .sitefoot--haus .footzone--end { justify-content: flex-end; } / Das Signet steht hier für sich und braucht keinen Abstand nach unten. / .sitefoot--haus .footmark { margin: 0; } .sitefoot--haus .footnote { margin: 0; font-size: 12.5px; } / ⚠️ `margin-left: auto` schiebt in der Grundanordnung die Herkunftsangabe ans rechte Ende EINER Zeile. Hier ist sie schon rechts, und der Schub risse die Zone auseinander. / / Die Sitemap darüber, wenn es eine gibt. ⚠️ NICHT MEHR MITTIG IN WINZIGEN VERSALIEN. Gemeldet: „wenn da müsste die spalte ein etwas schöneres layout haben". Drei zentrierte Wortstapel mit 11px-Überschriften schwebten über der Schlusszeile und gehörten zu nichts. Jetzt dieselbe Handschrift wie die Standorte darunter (`.footplace`): eine Zeile von links, jede Spalte mit der feinen Linie in der Akzentfarbe, die Überschrift in derselben Farbe und lesbar gross. Eine Spalte ohne Titel (im Studio: „+ Spalte") trägt keine Linie. / .sitefoot--haus .footgrid { justify-content: flex-start; text-align: left; gap: 32px clamp(48px, 7vw, 120px); margin-bottom: 8px; } .sitefoot--haus .footcol { flex: 0 1 auto; min-width: 150px; } .sitefoot--haus .footcol:has(> .foottitle) { padding-left: clamp(16px, 2vw, 28px); border-left: 1px solid var(--accent, var(--purple)); } .sitefoot--haus .foottitle { font-size: 15px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--accent, var(--purple)); margin: 0 0 12px; } .sitefoot--haus .footcol ul { gap: 8px; font-size: 14.5px; } @media (max-width: 720px) { / Untereinander und mittig — drei Zonen nebeneinander sind auf 360px keine Zeile, sondern drei unlesbare Spalten. / .sitefoot--haus .footbar { grid-template-columns: 1fr; justify-items: center; text-align: center; } .sitefoot--haus .footzone { justify-content: center; } } body.site[data-layout="haus"] .sitefoot { padding-left: var(--page-gutter); padding-right: var(--page-gutter); } / Der Sprachwechsler ist dort ein Knopf mit Kontur, kein Kleingedrucktes — dieselbe Pille wie überall auf der Seite, nur klein. / / ⚠️ DIESE REGELN GALTEN DEN ALTEN PILLEN. Als der Umschalter ein Klappmenue wurde, trafen sie die Eintraege DARIN: jeder Menuepunkt bekam eine Kontur und eine 50px-Rundung, also drei Pillen uebereinander in einem Kasten. Jetzt traegt die Kontur der Knopf, und die Liste ist eine Liste. / / ⚠️ NACHGEMESSEN, NICHT GESCHAETZT. Gemeldet: „im hauslayout ist der sprachdropdown oval eingefasst, siehe hier: netsuisse.com/de/ und auch grösser." Dort steht (2026-09-10): header .pll-switcher-select { font-size: 16px; text-transform: uppercase; padding: .6em .8em; padding-right: 30px; border-radius: 30px; border: 2px solid #000000 } Bei uns: 12px, 1px Kontur, 5px/12px Polster — eine kleine graue Pille statt eines Ovals. Die Masse stehen als Variablen am Aufbau, damit ein anderes Layout sie setzt, statt diese Regel zu ueberschreiben. / body.site[data-layout="haus"] .sitelangs { --langs-size: 16px; --langs-border: 2px; --langs-color: var(--ink); } body.site[data-layout="haus"] .sitelangs-current { font-size: var(--langs-size); border: var(--langs-border) solid var(--langs-color); border-radius: 30px; padding: .6em .8em; color: var(--langs-color); text-transform: uppercase; letter-spacing: .08em; line-height: 1; } body.site[data-layout="haus"] .sitelangs-list a { text-transform: uppercase; letter-spacing: .06em; } / ⚠️ NICHT ALLES MITTIG. Erster Anlauf: `text-align: center` auf die ganze Seite. Auf netsuisse.com ist die BUEHNE linksbuendig — der Titel steht in der linken Haelfte eines randlosen dunklen Feldes — und mittig sind erst die ABSCHNITTE darunter. Beides zu mitteln nahm der Seite genau die Spannung, von der sie lebt. / body.site[data-layout="haus"] .page { text-align: center; } body.site[data-layout="haus"] .page p { max-width: 34rem; margin-left: auto; margin-right: auto; } body.site[data-layout="haus"] h1, body.site[data-layout="haus"] h2 { font-weight: 600; line-height: 1.2; } / ⚠️ AUSSER IM FLIESSTEXT EINES BEITRAGS. Eine Pressemitteilung mittig zu setzen macht sie unlesbar; die Handschrift gilt der Gestaltung, nicht dem Lesen. / / ⚠️ AUSSER DIE BAUFORM SAGT ES AUSDRUECKLICH. Wer „Zentriert" waehlt, meint es — eine Layoutvorgabe darf eine ausgesprochene Entscheidung nicht ueberstimmen, sonst tut der Knopf im Panel sichtbar nichts. / body.site[data-layout="haus"] .block--paragraph:not([data-variant="centered"]), body.site[data-layout="haus"] .block--quote:not([data-variant="centered"]) { text-align: left; } / ⚠️ IM LESEMASS STEHT AUCH EIN ZWISCHENTITEL LINKS. Das Haus stellt Titel mittig — auf einer Landingpage, ueber Abschnitten. In einer Meldung stand damit jeder Zwischentitel mittig ueber linksbuendigem Text, und die Seite sah verrutscht aus. Die Bauform `centered` ist dort die VORGABE des Pakets, nicht eine Wahl; eine breite Seite behaelt sie. / body.site[data-layout="haus"] .sitemain:not(.sitemain--wide) .entrybody .block--heading { text-align: left; } / ⚠️ `none` HIESS 1192px BREIT — rund 180 Zeichen pro Zeile. Die mittige Regel darueber setzt 34rem, was fuer Fliesstext zu schmal ist; das Gegenmittel war „gar kein Mass", und damit lief der Text ueber die volle Seitenbreite. netsuisse.com fuehrt seinen Fliesstext in einer Spalte um 720px. / body.site[data-layout="haus"] .block--paragraph p { max-width: 46rem; } / Knöpfe als Kontur: 2px in der Akzentfarbe, Versalien, gesperrt. / body.site[data-layout="haus"] .block--hero .herocta, body.site[data-layout="haus"] .block--cta:not([data-ground]) .ctabutton { background: transparent; color: var(--accent, var(--purple)); border: 2px solid var(--accent, var(--purple)); font-weight: 400; text-transform: uppercase; letter-spacing: .08em; font-size: 14px; padding: 12px 34px; } body.site[data-layout="haus"] .block--hero .herocta:hover, body.site[data-layout="haus"] .block--cta:not([data-ground]) .ctabutton:hover { filter: none; background: var(--accent, var(--purple)); color: var(--canvas, #fff); } / ⚠️ DIE BUEHNE GEHT UEBER DIE GANZE BREITE. Eingerueckt in den Satzspiegel war sie ein grosses Kaestchen mit abgeschnittener Ecke; auf netsuisse.com reicht sie von Kante zu Kante und die gekappte Ecke schneidet in den Fensterrand. Das ist der Unterschied zwischen „hat eine Ecke" und „ist die Geste". Die grosse gekappte Ecke — das Erkennungszeichen. Nur unten rechts, und nur an der Bühne: an jedem Kasten wiederholt wäre es ein Muster statt einer Geste. / body.site[data-layout="haus"] .block--hero { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } / Die grosse Kappung ist die Handschrift — bis jemand selbst eine waehlt. / body.site[data-layout="haus"] .block--hero:not([data-corner]) { border-radius: 0 0 200px 0; } / Randlos heisst 100vw, und 100vw zaehlt den Rollbalken mit. Ohne diese Zeile bekommt jede Seite einen waagerechten Rollbalken von ein paar Pixeln. ⚠️ AN JEDEM AUFBAU, NICHT NUR AM HAUS. Der Ausbruch war einmal die Handschrift EINES Aufbaus; seit es die Bauformen „Randlos" und „Band" gibt, kann ihn jeder Auftritt an jedem Baustein ausloesen — und ein Aufbau ohne diese Zeile bekaeme dann genau den Rollbalken, den sie verhindert. / body.site { overflow-x: hidden; } / Bündig unter der Kopfzeile — dazwischen steht auf netsuisse.com nichts. / body.site[data-layout="haus"] .sitemain { padding-top: 0; } body.site[data-layout="haus"] .page > :first-child:not(.block--hero) { margin-top: 32px; } / ⚠️ NULL PIXEL NACH DER BUEHNE. Der Aufbau fuehrt einen Rhythmus von 88px, und er griff ueberall ausser an der einen Stelle, an der er am meisten auffaellt: der erste Baustein sass auf der Unterkante der randlosen Buehne, an der rechts die grosse gekappte Ecke ausschwingt. Gemessen, nicht vermutet — `abstandNachHero: 0`. / body.site[data-layout="haus"] .block--hero + { margin-top: var(--rhythm); } /* Der Buehnentext steht LINKS, im selben Satzspiegel wie die Kopfzeile, und der Fliesstext darunter bleibt schmal: vier kurze Zeilen Titel, zwei Absaetze von je einer halben Spalte. Abgelesen, nicht erfunden. / body.site[data-layout="haus"] .block--hero .herobody { max-width: var(--head-max); margin: 0 auto; / ⚠️ DERSELBE RAND WIE DIE KOPFZEILE, nicht 32px. Der Kasten ist auf `--head-max` gedeckelt und mittig, die Kopfzeile laeuft durch und polstert — ueber 1440px ergibt beides denselben linken Rand, darunter auch. / padding: 112px var(--head-pad-x) 128px; text-align: left; } / 15ch ergaben 695px; auf netsuisse.com laeuft der Titel ueber 827px und bricht in vier Zeilen statt in drei. / body.site[data-layout="haus"] .block--hero .herotitle { max-width: 18ch; } / ⚠️ UND ER STEHT UNTER DEM TITEL, NICHT DANEBEN. Die mittige Regel für den Fliesstext (`.page p { margin-left: auto }`) griff auch hier und schob den Absatz in die rechte Hälfte der Bühne — links ausgerichtet, aber zentriert platziert. / / ⚠️ UND ER IST NICHT KLEINGEDRUCKTES. Hier standen 15px auf 1.5 — der Satz unter einem 68px-Titel sah aus wie eine Bildunterschrift. Auf netsuisse.com sind es 24px auf 1.3 ueber 592px Breite: der Titel behauptet, dieser Absatz erklaert, und dafuer muss man ihn lesen koennen, ohne naeher zu ruecken. Als clamp, weil 24px auf einem Telefon die halbe Seite fuellen. / body.site[data-layout="haus"] .block--hero .herotext { max-width: 37rem; font-size: calc(clamp(17px, 1.5vw, 24px) var(--hero-bs, 1)); line-height: 1.3; margin-left: 0; margin-right: 0; } body.site[data-layout="haus"] .block--hero-split .herobody { padding: 64px 32px; } @media (max-width: 720px) { body.site[data-layout="haus"] .block--hero { border-radius: 0 0 90px 0; } body.site[data-layout="haus"] .block--hero .herobody { padding: 56px var(--head-pad-x) 72px; } } /* ⚠️ DER TIEFE GRUND WIRD AUS DEM AKZENT GERECHNET, nicht festgeschrieben. Auf netsuisse.com ist er #341539 zu einem violetten Akzent; festgeschrieben stünde er auch auf einer grünen Website violett da. Gemischt folgt er der Farbe, die der Kunde gewählt hat. / body.site[data-layout="haus"] .block--hero-plain, body.site[data-layout="haus"] .block--hero-cover.block--hero-imageless { background: color-mix(in srgb, var(--accent, var(--purple)) 26%, #17081c); } body.site[data-layout="haus"] .block--hero-plain .herotitle, body.site[data-layout="haus"] .block--hero-imageless .herotitle { color: var(--accent, var(--purple)); } body.site[data-layout="haus"] .block--hero-plain .herobody, body.site[data-layout="haus"] .block--hero-imageless .herobody { color: #fff; } body.site[data-layout="haus"] .block--hero-plain .herocta, body.site[data-layout="haus"] .block--hero-imageless .herocta { color: #fff; border-color: #fff; } / Die Spalten von netsuisse.com stehen auf der blanken Seite: mittig, der Titel in der Akzentfarbe und deutlich groesser als der Text, darunter ein kleiner Konturknopf. Kein Kasten — die Luft zwischen ihnen ist die Gliederung. / body.site[data-layout="haus"] .block--columns { gap: 48px; } body.site[data-layout="haus"] .cell { text-align: center; } body.site[data-layout="haus"] .celltitle { font-size: 26px; font-weight: 600; margin-bottom: 14px; color: var(--accent, var(--purple)); } body.site[data-layout="haus"] .celltitle a { color: inherit; } body.site[data-layout="haus"] .celltext { font-size: 15px; line-height: 1.5; margin-bottom: 16px; } body.site[data-layout="haus"] .celllink { display: inline-block; border: 1px solid var(--accent, var(--purple)); border-radius: 50px; padding: 7px 20px; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .09em; } body.site[data-layout="haus"] .celllink:hover { background: var(--accent, var(--purple)); color: var(--canvas, #fff); } / Der Aufruf ist ein BAND ueber die ganze Breite in einem Hauch der Akzentfarbe, kein abgerundeter Kasten in der Spalte — dasselbe Wechselspiel heller Baender wie auf netsuisse.com. / / ⚠️ WER DEN GRUND UMMALT, MUSS DIE SCHRIFT MITNEHMEN. Ohne die Zeile `color` blieb das Weiss der tiefen Bauform stehen — heller Hauch, weisse Schrift: „Reden wir darueber." war auf der Startseite in beiden Breiten unsichtbar. Die Bauform `band` steht tief in `--accent-3` und faerbt entsprechend; das Haus malt sie hell und muss deshalb auch die Tinte setzen. Gesehen am 2026-09-12 im ersten Lauf von `rake visual:shots` — in keiner Zusicherung, aber im ersten Bild. / / ⚠️ DIE GESTALT GILT IMMER, DIE FLAECHE NUR OHNE GEWAEHLTE. Dieselbe Falle wie beim Formular eine Regel weiter unten: diese Auswahl wiegt (0,3,1), eine gewaehlte Flaeche (`.block[data-ground]`) nur (0,2,0) — also gewann das Paket, und ein Aufrufband auf tiefem Violett blieb blassgrau. Gemeldet als „den deep purple hinterlegten block mit kontaktieren sie uns … diese blöcke gibt es aktuell nicht richtig?" — es gab ihn, er war nur nicht zu faerben. / body.site[data-layout="haus"] .block--cta { flex-direction: column; justify-content: center; text-align: center; gap: 24px; padding: 80px 32px; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } body.site[data-layout="haus"] .block--cta:not([data-ground]) { background: color-mix(in srgb, var(--accent, var(--purple)) 7%, var(--canvas, #fff)); color: var(--ink); } / ⚠️ UND DIE ECKE GENAUSO. `border-radius: 0` stand oben in der Gestalt und schlug damit eine GEWAEHLTE Kappung (`[data-corner]`, 0,2,0) — das Band war dann tief violett und rechteckig, waehrend im Panel „oben links" stand. / body.site[data-layout="haus"] .block--cta:not([data-corner]) { border-radius: 0; } body.site[data-layout="haus"] .block--cta .ctatitle { font-size: 34px; font-weight: 600; } body.site[data-layout="haus"] .block--cta .ctatext { max-width: 34rem; margin: 0 auto; font-size: 15px; } / ⚠️ NUR SOLANGE NIEMAND EINE FLAECHE GEWAEHLT HAT. Ohne `:not` schlaegt diese Regel (0,3,1) die gewaehlte Flaeche (0,2,0) — im Kontaktband stand mitten im tiefen Violett ein weisser Block, und darin unsichtbare Felder. Dieselbe Falle wie beim Aufrufband: wer im Layout einen Grund setzt, muss es dem ueberlassen, der ihn ausdruecklich WAEHLT. / / ⚠️ NICHT FUER DEN KONTAKTABSCHNITT. Diese Regel (0,4,1) schlug dessen eigenen Grund (0,3,0) — im Haus stand das tiefe Band weiss auf weiss, und die Sektion „Kontakt" musste sich mit gewaehlten Flaechen behelfen. / body.site[data-layout="haus"] .block--form:not([data-ground]):not([data-variant="contact"]) { background: none; padding: 0; } / --- Die Uebersicht einer Sektion: das Blograster von netsuisse.com -------- ⚠️ NACHGEMESSEN AN DEREN STILVORLAGE, nicht am Eindruck: `.blog-section` steht auf #f4f2f4 und ist mittig, das Polster laeuft von 90px auf `clamp(90px, 200/1520 * container, 150px)`. Das Raster ist 1 / 2 / 3 Spalten (768px, 1300px). Eine Karte ist ein Bild mit `aspect-ratio: 1.3` und darunter eine WEISSE Fläche mit ~50–60px Polster, mittig, 20px Zeilenabstand; das Datum darueber steht in #a020f0 mit 30px Abstand. Und die Handschrift: jede ERSTE Karte einer Dreiergruppe traegt die grosse Ecke oben links am BILD, jede DRITTE unten rechts an der weissen Fläche (150px, ab 768px 200px). Genau deshalb sieht die Liste dort nicht wie eine Liste aus. / / ⚠️ DER TITEL KLEBTE AN DER LEISTE. Gemeldet mit /de/management: „titel … weiter weg von der menüleiste, siehe original netsuisse.com/de/#blog". Abgelesen dort: `.blog-section { padding-block: clamp(90px, …, 150px) }` und zwischen Titel und Liste `gap: clamp(30px, …, 70px)`. Unser Hauptteil bringt schon rund 30px mit; das hier ergaenzt den Rest. / body.site[data-layout="haus"] .section-head { text-align: center; padding-top: clamp(40px, 7vw, 110px); padding-bottom: clamp(10px, 2.5vw, 40px); } body.site[data-layout="haus"] .section-head h1 { font-size: clamp(28px, 4.6vw, 70px); } body.site[data-layout="haus"] .section-head .lead { margin-inline: auto; max-width: 50ch; } / ⚠️ DAS BAND IST EINE EIGENE HUELLE. Die Liste gehoert nicht ins Lesemass (gemeldet: „das ist in der mitte gequetscht, das original nicht"): `.sitemain` ist im Haus 720–880px breit, richtig fuer Fliesstext, falsch fuer ein dreispaltiges Bildraster. Die graue Bahn laeuft darum ueber die ganze Breite (`calc(50% - 50vw)`), das Raster darin in hoechstens 1480px. Bis 1.2.1 trug die LEISTE selbst dieses Polster. Sie rollt waagerecht, und eine rollende Leiste zeichnet ihren Inhalt in ihr eigenes Polster: die vierte Karte stand als weisser Streifen am rechten Rand. Aussen das Band, innen die Leiste — `.stream-band` in collections/show und pages/home. / body.site[data-layout="haus"] .stream-band, body.site[data-layout="haus"] .companies-page { margin-inline: calc(50% - 50vw); padding-block: clamp(48px, 6vw, 90px); padding-inline: max(24px, calc(50vw - 740px)); background: var(--surface, #f4f2f4); } / ⚠️ AUF DER EIGENEN UEBERSICHTSSEITE KEIN GRAU. Zweimal gefragt: „der graue hintergrund blog kommt von wo?" und „was soll weiter der graue hintergrund hier" (2026-09-11, /de/blog). Das Grau gehoert auf netsuisse.com dem BLOGABSCHNITT DER STARTSEITE (`.blog-section`); eine eigene Blogseite hat die Vorlage gar nicht. Auf der Startseite bleibt das Band grau, auf der Uebersicht steht die Liste auf dem Grund der Seite. / body.site[data-layout="haus"] .stream-band--page { background: none; } / ⚠️ OHNE BILD HAT EINE WEISSE KARTE AUF WEISSER SEITE KEINE KANTE. Gemeldet mit /de/gruppe (drei Firmen ohne Logo): „hier braucht es ein sauberes blog ähnliches design". Name, Kontakt und Anschrift schwebten als mittige Zeilen im Leeren, und die grosse Ecke der ersten Karte war unsichtbar. Auf der eigenen Uebersicht traegt eine Karte ohne Bild darum das Grau, das bei einer Firma mit Logo die Bildflaeche traegt. / body.site[data-layout="haus"] .stream-band--page .teaser--textonly .teaserbody { background: var(--surface, #f4f2f4); } / ⚠️ 30px ZWISCHEN DEN KARTEN, abgelesen an `initBlog()` in deren main.js: `spaceBetween: 30`. Der Swiper setzt das als Rand an jede Karte, darum stand es in keiner Stilvorlage — und hier stand `gap: 0`, die Karten klebten aneinander. / body.site[data-layout="haus"] .stream { display: grid; grid-template-columns: 1fr; gap: 30px; } / Die Karte: oben das Bild, darunter EINE weisse Flaeche. ⚠️ NICHT EINE WEISSE FLAECHE JE KIND. So stand es bis 1.2.1 (`.teaser > :not(.teaserimage)`), und mit dem Bild vor Augen sieht man, was daraus wurde: streckt das Raster eine Karte auf die Hoehe der hoechsten, bleibt zwischen Anriss und „Mehr" ein grauer Spalt, und die Karte zerfaellt in Streifen. Die Vorlage hat genau diese eine Huelle (`.blog-item .content-block`: weiss, 50–60px Polster, mittig, 20px Zeilenabstand, der Knopf mit `margin-top: auto` am Fuss). ⚠️ UND OHNE ANRISS. Die Karte der Vorlage traegt Datum, Titel und Knopf — sonst nichts. Der Anriss machte die Karten ungleich hoch und endete mitten im Satz auf „…". Er steht weiter im Markup (andere Aufbauten zeigen ihn), das Haus blendet ihn aus. / body.site[data-layout="haus"] .stream .teaser { display: flex; flex-direction: column; text-align: center; height: 100%; margin: 0; } body.site[data-layout="haus"] .stream .teaserimage { margin: 0; display: block; } body.site[data-layout="haus"] .stream .teaserimage img { width: 100%; border-radius: 0; aspect-ratio: 1.3; object-fit: cover; } / Eine Firma in derselben Leiste: das Logo steht GANZ in der Bildflaeche, mit Luft rundherum — ein beschnittenes Logo ist keins mehr. Die Flaeche bleibt gleich hoch wie das Titelbild einer Meldung, damit die Karten auf einer Linie stehen. Auf dem GRAU der Seitenflaeche und nicht auf Weiss: auf der weissen Seite haette die Karte sonst keine Kante, und die grosse Ecke waere unsichtbar. / body.site[data-layout="haus"] .stream .teaserimage--logo img { object-fit: contain; box-sizing: border-box; padding: clamp(28px, 4vw, 60px); background: var(--surface, #f4f2f4); } body.site[data-layout="haus"] .stream .teaser--company .firmcontact, body.site[data-layout="haus"] .stream .teaser--company .firmplaces { list-style: none; padding: 0; display: grid; justify-items: center; gap: 6px; } body.site[data-layout="haus"] .stream .teaser--company .firmplaces { gap: 18px; } body.site[data-layout="haus"] .stream .teaser--company .place { border: 0; padding: 0; text-align: center; font-style: normal; } body.site[data-layout="haus"] .stream .teaser--company .placetitle { color: var(--ink); font-size: 14px; font-weight: 600; } body.site[data-layout="haus"] .stream .teaser--company .placelines { margin: 0; white-space: pre-line; } body.site[data-layout="haus"] .stream .teaserbody { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 20px; background: var(--canvas, #fff); padding: clamp(40px, 4vw, 60px) clamp(30px, 4vw, 60px); overflow: hidden; } body.site[data-layout="haus"] .stream .teaserbody > { margin: 0; } body.site[data-layout="haus"] .stream .teaserbody > time { color: var(--accent, var(--purple)); text-transform: capitalize; font-size: 14px; } /* ⚠️ DER TITEL STEHT IN DER SIGNALFARBE, NICHT IN DER TEXTFARBE — abgelesen an `.blog-item .content-top { color: #a020f0 }`. Aus dem Akzent, nicht als Zahl: festgeschrieben stuende sie auch auf einer gruenen Website. / / ⚠️ `.heading.text-lg` DER VORLAGE, NICHT GESCHAETZT: Neue Regrade, 600, Zeilenhoehe 1.2, ausgeglichener Umbruch, 22–38px (38/1520 der Satzbreite). Mit 400 stand der Titel duenn wie eine Bildunterschrift. / body.site[data-layout="haus"] .stream .teaserbody h2 { font-family: var(--font-head, inherit); font-size: clamp(22px, 2.5vw, 38px); font-weight: 600; line-height: 1.2; text-wrap: balance; } body.site[data-layout="haus"] .stream .teaserbody h2 a { color: var(--accent, var(--purple)); } / Ein Firmenname ist kein Meldungstitel: „Netsuisse International (Schweiz) AG" in 38px brach in drei Zeilen und drueckte Kontakt und Anschrift auseinander. / body.site[data-layout="haus"] .stream .teaser--company .teaserbody h2 { font-size: clamp(20px, 1.8vw, 28px); } body.site[data-layout="haus"] .stream .teaserexcerpt { display: none; } / Der Knopf der Vorlage (`.button`): Konturpille, 2px, ganz rund. / body.site[data-layout="haus"] .stream .teaserbody > .teaser__more { margin-top: auto; padding-top: 10px; } / Bereiche und Firma sitzen mit dem Knopf am Fuss — siehe entries/_teaser. / body.site[data-layout="haus"] .stream .teaserbody > .teasermeta { margin-top: auto; } body.site[data-layout="haus"] .stream .teaserbody > .teasermeta + .teasermore { margin-top: 0; } body.site[data-layout="haus"] .stream .teasermore a { display: inline-block; padding: 0.75em 2em; border-radius: 50px; border: 2px solid var(--accent, var(--purple)); color: var(--accent, var(--purple)); font-size: 15px; font-weight: 400; letter-spacing: 0; text-transform: none; text-decoration: none; transition: background-color .2s, color .2s; } body.site[data-layout="haus"] .stream .teasermore a:hover { background: var(--accent, var(--purple)); color: #ffffff; } / Die Stellenkarte hat kein Bild und keine eigene Huelle: SIE ist die weisse Flaeche. Datum hat sie mit Absicht keines („ausgeschrieben vor drei Monaten" ist der eine Satz, der eine Bewerbung verhindert). / body.site[data-layout="haus"] .stream .teaser--job { display: flex; flex-direction: column; align-items: center; gap: 12px; background: var(--canvas, #fff); padding: clamp(40px, 4vw, 60px) clamp(30px, 4vw, 60px); overflow: hidden; } body.site[data-layout="haus"] .stream .teaser--job > { margin: 0; } body.site[data-layout="haus"] .stream .teaser--job > h2 { font-weight: 600; } body.site[data-layout="haus"] .stream .teaser--job > h2 a { color: var(--ink); } /* Eine Stellenkarte trägt Firma und Bereiche am Fuss, wie die Meldung. / body.site[data-layout="haus"] .stream .teaser--job > .teasermeta { margin-top: auto; } .job-card .teasermeta { margin-top: 12px; } / Die Eckdaten einer Stelle stehen da, wo bei einer Meldung das Datum steht, und in derselben Farbe: sie sind das, wonach jemand die Liste ueberfliegt. / body.site[data-layout="haus"] .stream .teaser--job .teaserfacts { color: var(--accent, var(--purple)); font-size: 14px; } / ⚠️ DIE HANDSCHRIFT: die ERSTE Karte traegt die grosse Ecke oben links, die LETZTE unten rechts (150px, ab 768px 200px), dazwischen keine. Oben links am Bild — und wo keines ist, an der weissen Flaeche, sonst verloere eine Meldung ohne Titelbild die Ecke stillschweigend. ⚠️ ANFANG UND ENDE DER LISTE, NICHT JEDE DRITTE KARTE. Hier stand `nth-child(3n+1)` und `(3n+3)`, abgelesen an netsuisse.com, wo das STATISCH so gebaut ist. Gemeldet: „nach der 3. kachel fix abgerundet und bei der 4. kachel geht es von vorne los, hier wirklich dynamisch rechnen start kachel abgerundet, endkachel abgerundet dazwischen nicht und wenn nur eine speziallösung". Eine einzige Karte ist erste UND letzte und traegt damit beide Ecken — die Sonderloesung ergibt sich, sie braucht keine Regel. Dasselbe gilt fuer Menschen, Firmen und Stellen. / @media (min-width: 768px) { body.site[data-layout="haus"] .stream { grid-template-columns: repeat(2, 1fr); } body.site[data-layout="haus"] .stream .teaser:first-child .teaserimage img, body.site[data-layout="haus"] .stream .teaser--textonly:first-child .teaserbody, body.site[data-layout="haus"] .stream .teaser--job:first-child { border-top-left-radius: 200px; } body.site[data-layout="haus"] .stream .teaser:last-child .teaserbody, body.site[data-layout="haus"] .stream .teaser--job:last-child { border-bottom-right-radius: 200px; } } @media (min-width: 1100px) { body.site[data-layout="haus"] .stream { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 767px) { body.site[data-layout="haus"] .stream .teaser:first-child .teaserimage img, body.site[data-layout="haus"] .stream .teaser--textonly:first-child .teaserbody, body.site[data-layout="haus"] .stream .teaser--job:first-child { border-top-left-radius: 150px; } body.site[data-layout="haus"] .stream .teaser:last-child .teaserbody, body.site[data-layout="haus"] .stream .teaser--job:last-child { border-bottom-right-radius: 150px; } } / --- Die Gruppenseite: dieselbe Handschrift wie die Blogliste --------------- ⚠️ GEMELDET MIT „immer noch katastrophale layouts": drei schmale Textspalten im Lesemass, ohne Flaeche und ohne Karte, und darunter wiederholte die Fusszeile dieselben drei Firmen. Jetzt steht die Gruppe auf dem Band der Blogliste, jede Firma als weisse Karte mit derselben grossen Ecke — eine Website, eine Handschrift. Die Standorte der Fusszeile entfallen auf dieser Seite (collections/show). Die Spezifitaet schlaegt die Bauform `ruled` samt ihrer Telefonregel am Dateiende; beides mit Absicht. / body.site[data-layout="haus"] .companies-page .block--companies { max-width: none; margin: 0; } body.site[data-layout="haus"] .companies-page .companiesgrid { grid-template-columns: 1fr; gap: 0; } body.site[data-layout="haus"] .companies-page .firm { background: var(--canvas, #fff); border: 0; padding: clamp(40px, 4vw, 60px) clamp(30px, 4vw, 60px); align-items: center; text-align: center; gap: 20px; overflow: hidden; } body.site[data-layout="haus"] .companies-page .firmlogo { justify-content: center; } body.site[data-layout="haus"] .companies-page .firmname { font-family: var(--font-head, inherit); font-size: clamp(22px, 2.5vw, 38px); font-weight: 600; line-height: 1.2; text-wrap: balance; color: var(--accent, var(--purple)); } body.site[data-layout="haus"] .companies-page .firmcontact, body.site[data-layout="haus"] .companies-page .firmplaces { justify-items: center; } body.site[data-layout="haus"] .companies-page .firmplaces { gap: 20px; } body.site[data-layout="haus"] .companies-page .placetitle { color: var(--ink); font-size: 14px; } / Die Anschrift steht mittig wie der Rest der Karte — ohne die Linie der Bauform `ruled`: die Linie trennt Spalten, und hier trennt die Karte. / body.site[data-layout="haus"] .companies-page .place { border: 0; padding: 0; text-align: center; } @media (min-width: 768px) { body.site[data-layout="haus"] .companies-page .companiesgrid { grid-template-columns: repeat(2, 1fr); } body.site[data-layout="haus"] .companies-page .firm:first-child { border-top-left-radius: 200px; } body.site[data-layout="haus"] .companies-page .firm:last-child { border-bottom-right-radius: 200px; } } @media (min-width: 1100px) { body.site[data-layout="haus"] .companies-page .companiesgrid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 767px) { body.site[data-layout="haus"] .companies-page .firm:first-child { border-top-left-radius: 150px; } body.site[data-layout="haus"] .companies-page .firm:last-child { border-bottom-right-radius: 150px; } } / Der Aktuelles-Baustein spricht dieselbe Sprache: Bild ohne Radius, Datum in der Akzentfarbe. Er steht aber IM Satzspiegel und bekommt darum keine graue Flaeche unter sich. / body.site[data-layout="haus"] .teasersgrid .teaserimage img { border-radius: 0; aspect-ratio: 1.3; object-fit: cover; } body.site[data-layout="haus"] .teasersgrid .cell > time { color: var(--accent, var(--purple)); text-transform: capitalize; } body.site[data-layout="haus"] .teasersgrid .cell:first-child .teaserimage img { border-top-left-radius: clamp(90px, 12vw, 200px); } / --- Zugriffszahlen ------------------------------------------------------ ⚠️ OHNE DIAGRAMM-BIBLIOTHEK. Eine Tageskurve ist eine Reihe Balken; dafuer ein Paket zu laden hiesse, die Redaktion 90 KB fuer 30 Rechtecke zahlen zu lassen. Die Hoehe kommt als Prozentwert aus der Vorlage. / .tabs { display: flex; gap: 4px; margin-bottom: var(--gap); } .tabstab { padding: 7px 14px; border-radius: 99px; font-size: 13px; font-weight: 600; color: var(--ink-soft); text-decoration: none; border: 1px solid transparent; } .tabstab:hover { background: var(--surface-2); } .tabstab.is-on { background: var(--accent-wash); color: var(--accent); border-color: var(--accent); } / Ein Reiter fuer etwas, das es noch nicht gibt: gestrichelt und in der Akzentfarbe, damit er sich von den vorhandenen unterscheidet und trotzdem DORT steht, wo gesucht wird. Ein leiser Satz unter der Leiste wurde dreimal nicht gefunden. / .tabstab--new { border: 1px dashed var(--line-strong); color: var(--accent); font-weight: 500; } .tabstab--new:hover { border-color: var(--accent); background: var(--accent-wash); } .tabs { flex-wrap: wrap; } .bars { display: flex; align-items: flex-end; gap: 2px; height: 120px; margin-bottom: 10px; } / Kurven der Maschine: Flaeche mit Linie, eine gestrichelte Warngrenze. / .chart { display: block; width: 100%; height: 140px; margin-bottom: 8px; overflow: visible; } .chartarea { fill: var(--accent-wash); stroke: none; } .chartline { fill: none; stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; } .chartlimit { stroke: var(--crimson); stroke-width: 1; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; opacity: .7; } .tile--warn { border-color: color-mix(in srgb, var(--crimson) 45%, var(--line)); } .tile--warn .tilevalue { color: var(--crimson); } .cardhint--warn { color: var(--crimson); } / Anteile: Name, Balken, Zahl — eine Zeile je Wert. / .facet-grid { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .facet-grid > .card { margin: 0; } .shares { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .sharesrow { / Feste Spalten: sonst misst jede Zeile ihre eigenen, und Punkt, Wort und Zahl stehen in jeder Zeile woanders. / display: grid; grid-template-columns: 9px minmax(0, 1fr) 7.5em; align-items: center; gap: 8px; font-size: 13px; } / ⚠️ DIE FARBE IST NIE DIE EINZIGE AUSKUNFT. Der Punkt zeigt, welches Stueck des Rings gemeint ist; daneben stehen Wort, Zahl und Prozent. / .sharesdot { width: 9px; height: 9px; border-radius: 3px; background: var(--c, var(--accent)); } .shareslabel { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } / --- Der Ring ----------------------------------------------------------- ⚠️ EIN RING, KEINE BIBLIOTHEK. Der Kreis hat den Umfang 100 (r = 15.915), also ist ein Prozent eine Einheit des Strichmusters — die Masse rechnet Editor::StatsHelper, gezeichnet wird mit zwei Attributen je Stueck. Zwischen den Stuecken eine Luecke, sonst verschmelzen zwei Farben zu einer Flaeche. / .shares-chart { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .shares-chart .shares { flex: 1 1 190px; } .donut { position: relative; flex: 0 0 auto; width: 132px; height: 132px; } .donut svg { width: 100%; height: 100%; display: block; } .donut circle { fill: none; stroke-width: 5; } .donuttrack { stroke: var(--surface-3); } .donutseg { stroke: var(--c, var(--accent)); } / Die Gesamtzahl steht IM Ring: das Ganze, von dem die Stuecke Teile sind. / .donuthole { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; } .donuttotal { font-size: 19px; font-weight: 600; font-variant-numeric: tabular-nums; } .donutlabel { font-size: 11px; color: var(--ink-soft); } .sharesnum { font-variant-numeric: tabular-nums; color: var(--ink-soft); white-space: nowrap; font-size: 12px; text-align: right; } .sharestag { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 99px; font-size: 10.5px; line-height: 17px; background: var(--surface-3); color: var(--ink-soft); } .sharestag--search { background: color-mix(in srgb, var(--emerald) 16%, transparent); color: var(--emerald); } .sharestag--ai { background: var(--accent-wash); color: var(--accent); } .sharestag--social { background: color-mix(in srgb, var(--amber) 18%, transparent); color: var(--amber); } .barsbar { flex: 1 1 0; min-width: 2px; / Ein Tag mit null Zugriffen bekommt einen sichtbaren Sockel: eine Luecke im Balkenfeld sieht aus wie ein fehlender Tag, nicht wie eine Null. / height: max(2px, var(--h, 0%)); background: var(--accent); opacity: .75; border-radius: 2px 2px 0 0; } .barsbar:hover { opacity: 1; } / --- Die Übersicht ------------------------------------------------------ ⚠️ SIE ZEIGT ZUERST DIE WEBSITE. Gemeldet: „diese seite sehr technisch viele listen boxen text, keine visuelle übersicht wie man es von einem dashboard erwarten würde." / .board { display: grid; gap: var(--gap); align-items: start; grid-template-columns: minmax(0, 642px) minmax(0, 1fr); margin-bottom: var(--gap); } @media (max-width: 1080px) { .board { grid-template-columns: 1fr; } } / Das Bild ist die echte Startseite in einem Rahmen, verkleinert — kein Bildschirmfoto, das ab dem Tag seiner Aufnahme altert. ⚠️ DER MASSSTAB IST EINE ZAHL UND KEINE LÄNGE. `calc(100cqw / 1280)` sieht richtig aus und ist eine LÄNGE; `scale()` wirft sie weg und zeichnet die Seite in voller Grösse. Deshalb steht die Breite des Kastens fest (640) und der Rahmen ist genau doppelt so breit (1280). Dieselbe Falle wie bei den Bauformkacheln, und sie hat dort eine Runde gekostet. / .preview { display: block; text-decoration: none; color: inherit; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); } .preview:hover { border-color: var(--accent); box-shadow: var(--shadow); } .previewframe { display: block; position: relative; width: 100%; height: 360px; overflow: hidden; background: #fff; } .previewframe iframe { position: absolute; top: 0; left: 0; width: 1280px; height: 720px; border: 0; transform: scale(.5); transform-origin: 0 0; / Der Rahmen ist ein BILD, kein Bedienfeld: ein Klick darin öffnete sonst eine fremde Seite im verkleinerten Rahmen statt der Website. / pointer-events: none; } .previewfoot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--line); } .previewhost { font-size: 13px; font-weight: 600; } .previewlangs { display: inline-flex; gap: 4px; } .boardside { display: flex; flex-direction: column; gap: var(--gap-sm); } / Die Kurve: wird die Website überhaupt gelesen? / .panel--traffic { display: block; text-decoration: none; color: inherit; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow-sm); } .panel--traffic:hover { border-color: var(--line-strong); box-shadow: var(--shadow); } .panelhead { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; } .panelbig { font-family: "Neue Regrade", inherit; font-size: 30px; font-weight: 600; line-height: 1.1; } .panelword { font-size: 12.5px; color: var(--ink-soft); } .trend { margin-left: auto; font-size: 12.5px; font-weight: 600; } .trend--up { color: var(--emerald); } .trend--down { color: var(--amber); } .bars--flat { height: 64px; margin-bottom: 0; } .tiles--tight { gap: 10px; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); } .tiles--tight .tile { padding: 12px 14px; } .tiles--tight .tilevalue { font-size: 24px; } .tile--good .tilevalue { color: var(--emerald); } .tile--note .tilevalue { color: var(--amber); } / ⚠️ JEDE ZEILE IST EINE ENTSCHEIDUNG MIT EINEM WEG DORTHIN. Eine Liste, in der neun Zeilen „alles in Ordnung" sagen, verdeckt die zehnte — deshalb steht hier nur, wozu es etwas zu tun gibt. / .todo { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .todorow { display: flex; align-items: center; gap: 10px; padding: 11px 2px; border-top: 1px solid var(--line); } .todorow:first-child { border-top: 0; } .todorow::before { content: ""; width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: var(--ink-faint); } .todorow--note::before { background: var(--amber); } .todorow--bad::before { background: var(--crimson); } .todolink { color: inherit; text-decoration: none; font-size: 13.5px; } .todolink:hover { color: var(--accent); text-decoration: underline; } .todoclear { color: var(--ink-soft); font-size: 13.5px; margin: 0; } .tablenum { text-align: right; font-variant-numeric: tabular-nums; } / --- Neue Bausteine ------------------------------------------------------ Titel mit Kicker, Abstandshalter, Personen, Logowand, Standorte, Verweis. Abgelesen an netsuisse.com, nicht erfunden. / / Der Kicker gehoert zum Titel: klein, in Versalien, gesperrt, in der Akzentfarbe — und mit wenig Abstand darunter, sonst sind es zwei Zeilen statt einer Ueberschrift mit Vorspann. / .headingkicker { margin: 0 0 6px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .09em; color: var(--accent, var(--purple)); } .block--heading .headingtext { margin: 0; } .block--heading-1 .headingtext { font-size: clamp(30px, 4.5vw, 52px); line-height: 1.15; } .block--heading-2 .headingtext { font-size: clamp(22px, 2.6vw, 32px); } .block--heading-3 .headingtext { font-size: 20px; } / Ein Titel in der Akzentfarbe des Themas — nicht in einer frei gewaehlten: die Marke bringt ihr Fuchsia mit (#a020f0 in der Vorgabe), und eine Seite mit zwanzig Violett-Toenen hat keine Gestaltung, sondern eine Historie. / .block--heading-accent .headingtext { color: var(--accent, var(--purple)); } / Die weiteren Titeltoene — siehe CmsBlock::HEADING_TONES. Die Farben stehen in der Palette des Erscheinungsbilds, hier steht nur die Zuordnung. / .block--heading-accent2 .headingtext { color: var(--accent-2); } .block--heading-accent3 .headingtext { color: var(--accent-3); } .block--heading-accent4 .headingtext { color: var(--accent-4); } .block--heading-accent5 .headingtext { color: var(--accent-5); } .block--heading-accent6 .headingtext { color: var(--accent-6); } .block--spacer { height: var(--spacer, 48px); } / Im Editor ist leerer Raum sonst nicht anfassbar — man saehe nichts und koennte nichts anklicken. / .site--editing .block--spacer { display: grid; place-items: center; border: 1px dashed var(--line); border-radius: 8px; } .spacermark { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); } .block--people { display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: 32px; } .person { margin: 0; text-align: center; } .personface { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; border-radius: var(--radius); margin-bottom: 12px; } .personface--empty { background: var(--surface); } .personname { font-size: 18px; margin: 0 0 2px; } .personrole { margin: 0; color: var(--ink-soft); font-size: 14px; } .personlink { color: var(--accent, var(--purple)); text-decoration: none; font-size: 13px; } / ⚠️ FREMDE MARKEN: `contain` und eine feste Zeilenhoehe. Zugeschnitten oder verzerrt ist ein Partnerlogo schlechter dargestellt als gar nicht — und es gehoert jemandem, der das nicht will. / .block--logos { display: grid; grid-template-columns: repeat(var(--cols, 4), 1fr); gap: 28px; align-items: center; } .logo-tile { display: grid; place-items: center; height: 56px; } .logo-tile img { max-height: 100%; max-width: 100%; width: auto; object-fit: contain; } .block--locations { display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: 28px; } .place { font-style: normal; } .placetitle { font-size: 16px; margin: 0 0 6px; } / Eine Anschrift ist keine Prosa — die Zeilen, die jemand getippt hat, sind die Zeilen, die dastehen sollen. / .placelines { margin: 0; white-space: pre-line; color: var(--ink-soft); font-size: 14px; } .placelink { color: var(--accent, var(--purple)); text-decoration: none; font-size: 14px; } / Bild neben Textspalte. ABGELESEN AN netsuisse.com („Über uns", `.curved-content`): ein Raster aus zwei gleichen Spalten, das Bild quadratisch und in voller Hoehe der Zeile, die Textspalte auf hellem Grund, ihr Satz linksbuendig und auf 580px begrenzt — nicht auf die halbe Seitenbreite. Die grosse gekappte Ecke liegt dort am Bild oben links und an der Textspalte unten rechts; bei uns kommt sie aus `--block-corner`, damit sie mit dem Aufbau wandert. / .block--split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; overflow: hidden; } / ⚠️ KEIN EIGENER GRUND. Die gekappte Ecke schneidet das Bild — was DAHINTER liegt, muss die Seite sein und nicht ein graues Feld, sonst steht neben der Rundung ein Winkel in einer anderen Farbe. Im ersten Bild war genau das zu sehen. / .splitmedia { position: relative; min-height: 100%; } .splitmedia img { width: 100%; height: 100%; object-fit: cover; display: block; border-top-left-radius: var(--block-corner); } .splitbody { background: var(--surface); display: flex; align-items: center; justify-content: center; padding: clamp(32px, 5vw, 90px) clamp(20px, 3vw, 48px); border-bottom-right-radius: var(--block-corner); } .splitinner { display: flex; flex-direction: column; gap: 18px; max-width: 580px; } .splittitle { margin: 0; color: var(--accent-2, var(--accent, var(--purple))); } .splittext { margin: 0; white-space: pre-line; } .splitbutton { align-self: start; text-decoration: none; color: inherit; border: 1px solid currentColor; border-radius: 999px; padding: 10px 22px; } .splitbutton:hover { background: var(--accent, var(--purple)); color: #fff; border-color: transparent; } / Bild rechts: dieselbe Gestaltung, gespiegelt — auch die Ecken wandern mit, sonst zeigte die Kappung ins Leere. / .block--split[data-variant="image-right"] .splitmedia { order: 2; } .block--split[data-variant="image-right"] .splitmedia img { border-top-left-radius: 0; border-top-right-radius: var(--block-corner); } .block--split[data-variant="image-right"] .splitbody { border-bottom-right-radius: 0; border-bottom-left-radius: var(--block-corner); } .block--split[data-variant="stacked"] { grid-template-columns: 1fr; } .block--split[data-variant="stacked"] .splitmedia { aspect-ratio: 16 / 9; min-height: 0; } .splitlead { margin: 0; font-weight: 600; white-space: pre-line; } / Flaeche mit Band — `.curved-content` von netsuisse.com, nachgemessen: * das Band: Grund #341539 (bei uns Palettenstelle 3), Rundung NUR oben links (`--curve-size: clamp(100px, 10vw, 200px)`), 90px Polster, mittig ein Titel in der zweiten Akzentfarbe (`text-lg`, 22–38px) und darunter eine weisse Konturpille in Grossbuchstaben; * das Bild: bis an den linken Rand, quadratisch neben der Spalte, auf dem Grund des Bandes, oben links gerundet — die Rundung zeigt den Grund; * die Textspalte: #f4f2f4, unten rechts gerundet, Titel `text-xxl` (28–70px) in der zweiten Akzentfarbe, Text linksbuendig auf 580px. ⚠️ VOLLE BREITE, OHNE SPALT ZUM NAECHSTEN BAUSTEIN IM BAND: die Flaeche ist ein Stueck, genau darum ist sie ein Baustein. / .block--split[data-variant="curved"] { --curve: clamp(100px, 10vw, 200px); --curve-ground: var(--accent-3, #341539); grid-template-columns: repeat(2, minmax(0, 1fr)); margin-inline: calc(50% - 50vw); max-width: none; border-radius: 0; overflow: hidden; } .splitband { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 30px; padding: 90px 24px; text-align: center; background: var(--curve-ground); color: var(--on-accent-3, #ffffff); border-top-left-radius: var(--curve); } .splitband-title { margin: 0; font-family: var(--font-head, inherit); font-weight: 600; line-height: 1.2; font-size: clamp(22px, 2.5vw, 38px); text-wrap: balance; color: var(--accent-2, var(--accent, var(--purple))); } .splitband-button { display: inline-block; padding: 0.75em 2em; border: 2px solid currentColor; border-radius: 50px; color: inherit; text-decoration: none; text-transform: uppercase; letter-spacing: .08em; font-size: clamp(14px, 1.2vw, 18px); transition: background-color .2s, color .2s, border-color .2s; } .splitband-button:hover { background: var(--accent, var(--purple)); border-color: var(--accent, var(--purple)); color: #ffffff; } / ⚠️ KEIN `aspect-ratio` AN DER ZELLE, SOLANGE SIE `min-height: 100%` TRAEGT. Beides zusammen laesst den Browser die BREITE aus der Hoehe rechnen: auf einem iPad wurde das Bild 904px breit in einer 512px-Spalte und lag ueber dem Text. Und `max-height` deckelte auf grossen Schirmen die Hoehe, worauf dasselbe Verhaeltnis die Breite mitnahm — das Bild wurde schmaler als seine Spalte, und daneben stand weisses Papier. Beides gemeldet: „bleibt es in grösseren screens links mit hässlichem freiraum weiss zur überuns spalte, in kleineren formaten liegt das bild teilweise gar über dem text". Stattdessen: ein Platzhalter gibt die MINDESThoehe (quadratisch, auf 720px gedeckelt), das Bild liegt darueber und deckt die ganze Zelle — wird die Textspalte hoeher, waechst das Bild mit, wie auf netsuisse.com. Der Platzhalter nur, WENN ein Bild da ist: sonst stuende in der Redaktion ein leerer Kasten von 720px vor dem Hinweis. / .block--split[data-variant="curved"] .splitmedia { background: var(--curve-ground); } .block--split[data-variant="curved"] .splitmedia:has(img)::before { content: ""; display: block; padding-top: min(100%, 720px); } .block--split[data-variant="curved"] .splitmedia img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-top-left-radius: var(--curve); } .block--split[data-variant="curved"] .splitbody { justify-content: center; align-items: center; padding: clamp(90px, 10.8vw, 165px) clamp(24px, 4vw, 60px); border-bottom-right-radius: var(--curve); color: var(--ink); } .block--split[data-variant="curved"] .splitinner { gap: 30px; max-width: clamp(300px, 38vw, 580px); } .block--split[data-variant="curved"] .splittitle { font-family: var(--font-head, inherit); font-weight: 600; line-height: 1.1; font-size: clamp(28px, 4.6vw, 70px); } @media (max-width: 991px) { .block--split[data-variant="curved"] { grid-template-columns: 1fr; } .block--split[data-variant="curved"] .splitmedia:has(img)::before { padding-top: 71.5%; } .block--split[data-variant="curved"] .splitinner { text-align: center; max-width: 42rem; } } / Mitarbeitende. Ein Mensch ist ein Beitrag (Sektion vom Typ „Menschen"), und diese Karte ist ueberall dieselbe: im Baustein und auf der eigenen Seite. ⚠️ DIESELBE KARTE WIE `.person`, ABER EIN ANDERER BAUSTEIN. `.person` traegt seinen Inhalt selbst (drei getippte Namen), `.person-card` holt ihn aus der Sektion. Gleich aussehen sollen sie trotzdem — darum stehen die Masse hier beieinander und nicht zweimal. / .block--team { display: grid; gap: 20px; } .teamtitle { margin: 0 0 4px; } .teamgrid { display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: clamp(24px, 3vw, 48px); } .person-card { margin: 0; text-align: center; min-width: 0; } .person-cardface { width: 100%; aspect-ratio: 1 / 1; border-radius: var(--radius); margin-bottom: 12px; overflow: hidden; background: var(--surface); } .person-cardface img { width: 100%; height: 100%; object-fit: cover; display: block; } .person-cardbody { min-width: 0; } .person-cardname { font-size: 18px; margin: 0 0 2px; } .person-cardname a { color: inherit; text-decoration: none; } .person-cardname a:hover { color: var(--accent, var(--purple)); } .person-cardrole { margin: 0 0 6px; color: var(--accent, var(--purple)); font-size: 14px; } .person-cardvita { margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.5; } .person-cardcontact { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 2px; font-size: 13px; } .person-cardcontact a { color: var(--accent, var(--purple)); text-decoration: none; } / Firmen einer Gruppe. Eine Firma ist ein Beitrag (Sektion vom Typ „Firmen"), und diese Karte ist ueberall dieselbe: im Baustein, auf der Gruppenseite und — in schmaler Fassung — unten in der Fusszeile. / .block--companies { display: grid; gap: 20px; } .companiestitle { margin: 0 0 4px; } .companiesgrid { display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: clamp(24px, 3vw, 48px); } .firm { display: flex; flex-direction: column; gap: 10px; min-width: 0; } / ⚠️ EINE FESTE HOEHE UND `contain`, KEINE BREITE. Firmenlogos kommen in jedem Seitenverhaeltnis; auf Breite gesetzt steht ein breites Signet winzig neben einem hohen, das die halbe Spalte fuellt. / .firmlogo { height: 52px; display: flex; align-items: center; } .firmlogo img { max-height: 100%; max-width: 100%; width: auto; object-fit: contain; } .firmname { margin: 0; font-size: 18px; } .firmname a { color: inherit; text-decoration: none; } .firmname a:hover { color: var(--accent, var(--purple)); } .firmlede { margin: 0; color: var(--ink-soft); font-size: 14px; } .firmcountry { margin: 0; color: var(--ink-soft); font-size: 13px; letter-spacing: .02em; } .firmcontact-name { margin: 0; font-weight: 600; font-size: 14px; } .firmcontact { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: 14px; } .firmcontact a { color: var(--accent, var(--purple)); text-decoration: none; } .firmcontact a:hover { text-decoration: underline; } .firmplaces { display: grid; gap: 12px; } .firmplaces .placetitle { font-size: 13px; font-weight: 600; } .socialbutton { display: inline-flex; align-items: center; gap: 10px; padding: 10px 20px; border-radius: var(--btn-radius, 999px); border: 1px solid var(--accent, var(--purple)); color: var(--accent, var(--purple)); text-decoration: none; font-size: 14px; } .socialbutton:hover { background: var(--accent, var(--purple)); color: var(--canvas, #fff); } .socialnet { font-weight: 600; } @media (max-width: 720px) { .block--people, .block--locations { grid-template-columns: 1fr; } .teamgrid { grid-template-columns: 1fr; } / Auf dem Telefon steht das Bild ueber dem Text — nebeneinander waeren es zwei Spalten von 170px. / .block--split { grid-template-columns: 1fr; } .block--split .splitmedia { aspect-ratio: 16 / 10; min-height: 0; } .block--split[data-variant="image-right"] .splitmedia { order: 0; } .companiesgrid { grid-template-columns: 1fr; } .block--logos { grid-template-columns: repeat(2, 1fr); } } / Der Hausaufbau: Spalten mit Symbol statt Foto, mittig — das „Angebot" von netsuisse.com. Gilt fuer jeden Aufbau, weil `style` am Baustein haengt. / .block--columns-icons .cell { text-align: center; } .block--columns-icons .cell img { width: auto; height: 56px; margin: 0 auto 14px; object-fit: contain; border-radius: 0; } .block--columns-cards .cell { background: var(--surface); border-radius: var(--radius); padding: 24px; } / ⚠️ HIER STAND `text-align: center` FUER JEDE UEBERSCHRIFT — und damit war die Bauform „Zentriert" in diesem Paket wirkungslos: „Standard", „Zentriert" und „Unterstrichen" sahen pixelgleich aus. Ein Paket sagt seine Vorgabe ueber `default:` im Manifest (Haus: `centered`), nicht ueber eine Regel, die jede Wahl uebergeht. Der Kicker folgt der Ausrichtung des Blocks, statt sie noch einmal zu behaupten. / body.site[data-layout="haus"] .headingkicker { text-align: inherit; } body.site[data-layout="haus"] .personname { font-size: 20px; } body.site[data-layout="haus"] .placetitle { color: var(--accent, var(--purple)); } / Die Akzentkante links an jeder Anschrift — von netsuisse.com abgelesen. / body.site[data-layout="haus"] .place { text-align: left; border-left: 2px solid var(--accent, var(--purple)); padding-left: 16px; } / --- Marketing blocks --------------------------------------------------- Five shapes, not fifty. Each one is a decision an editor can make in a form; everything beyond them is design work, and design work half-done in a settings form looks worse than the plain page it replaced. / .block--hero { position: relative; border-radius: var(--radius); overflow: hidden; } .block--hero .herobody { padding: var(--hero-pad); max-width: 46rem; } / ⚠️ DIE GROESSE IST EIN FAKTOR AUF DAS THEMA, keine Pixelzahl im Baustein. `--hero-title` reicht je Erscheinungsbild von 46px bis 72px; wer im Baustein Pixel setzt, ueberschreibt die Handschrift des Themas und zerbricht sie auf dem Telefon. Siehe CmsBlock::HERO_SCALES. / .block--hero .herotitle { font-size: calc(var(--hero-title) var(--hero-ts, 1)); line-height: 1.1; margin: 0 0 12px; } .block--hero .herotext { font-size: calc(18px * var(--hero-bs, 1)); margin: 0 0 24px; } .block--hero .herocta, .block--cta .ctabutton { display: inline-block; text-decoration: none; font-weight: 600; padding: 12px 22px; border-radius: var(--btn-radius, 999px); background: var(--accent, var(--purple)); color: #fff; } .block--hero .herocta:hover, .block--cta .ctabutton:hover { filter: brightness(1.08); } .block--hero-cover { display: grid; } /* Image and text share one grid cell: the text sits ON the image, and the image keeps its alt, its print and its lazy loading — which a CSS background-image would all have thrown away. / .block--hero-cover > { grid-area: 1 / 1; } /* ⚠️ DAS BILD DARF DIE HOEHE NICHT BESTIMMEN. Als Rasterelement mit `height: 100%` in einer Zeile, deren Hoehe erst der Inhalt ergibt, faellt der Wert auf die EIGENHOEHE des Bildes zurueck — die Zeile ist dann so hoch wie die hochgeladene Datei. Auf www.netsuisse.group ergab das eine Buehne von 1981px in einem 1452px hohen Fenster: der Titel stand bei y=1255, also unter dem Falz, und ein Besucher sah ausschliesslich das Bild. `object-fit: cover` beschnitt nie etwas, weil der Kasten immer schon so gross war wie das Bild. Gemessen, nicht vermutet. Aus dem Fluss genommen entscheidet der TEXT, wie hoch die Buehne ist, und das Bild fuellt sie — was die Variante „cover" immer behauptet hat. / .block--hero-cover .herobg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } / ⚠️ UND DER TEXT MUSS DARUEBER. Ein absolut positioniertes Element malt ueber statischen Inhalt derselben Ebene — das Bild aus dem Fluss zu nehmen legte es also prompt UEBER die Schrift. Die Buehne war richtig hoch und vollstaendig leer. Gesehen, nicht errechnet: die Masse stimmten alle. / / ⚠️ DER ABDUNKLER GEHOERT DER BUEHNE, NICHT DEM TEXTBLOCK. Er hing als Hintergrund am `herobody` — und sobald ein Aufbau diesen Block schmaler macht als die Buehne (im „Haus" ist er auf den Satzspiegel begrenzt, die Buehne aber randlos), stand ein dunkles Rechteck mitten in einer helleren Flaeche. Als eigene Ebene ueber dem Bild deckt er die ganze Buehne. / .block--hero-cover::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(transparent, rgba(0, 0, 0, .72)); } .block--hero-cover .herobody { position: relative; z-index: 1; align-self: end; color: #fff; max-width: none; width: 100%; } / Ohne Bild gibt es nichts abzudunkeln — dort traegt die Flaeche selbst die Farbe, und ein Verlauf darueber machte sie unten nur schmutzig. / .block--hero-cover.block--hero-imageless::after { display: none; } .block--hero-split { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 24px; background: var(--surface); } .block--hero-split .heroaside img { width: 100%; height: 100%; object-fit: cover; display: block; } / A cover hero without an image is white text on the canvas. It falls back to the plain treatment rather than disappearing. / .block--hero-imageless .herobody { color: var(--ink); background: none; } .block--hero-cover.block--hero-imageless { background: var(--surface); } .block--hero-plain { background: var(--surface); text-align: center; } .block--hero-plain .herobody { margin: 0 auto; } .block--columns, .teasersgrid { display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: 28px; } .cell img { width: 100%; border-radius: var(--radius); display: block; margin-bottom: 12px; } .celltitle { font-size: 19px; margin: 0 0 6px; } .celltitle a { color: inherit; text-decoration: none; } .celltitle a:hover { color: var(--accent, var(--purple)); } .celltext { margin: 0 0 10px; color: var(--ink-soft); } .celllink { color: var(--accent, var(--purple)); text-decoration: none; font-weight: 600; } .cell time { font-size: 13px; color: var(--ink-soft); } .block--cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; background: var(--surface); border-radius: var(--radius); padding: 32px 36px; } .ctatitle { margin: 0 0 6px; font-size: 24px; } .ctatext { margin: 0; color: var(--ink-soft); } .teaserstitle { font-size: 26px; margin: 0 0 20px; } .teasersmore { margin-top: 20px; } / Der Verweis am Fuss einer Karte. Ein Wort, kein Kasten — die Vorlage setzt ihn in Kapitaelchen mit Sperrung (`.spaced-caps, .button`). / .teasermore { margin: 12px 0 0; } .teasermore a { color: var(--accent, var(--purple)); text-decoration: none; font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; } .teasermore a:hover { text-decoration: underline; } .teasersmore a { color: var(--accent, var(--purple)); text-decoration: none; font-weight: 600; } tr.is-unread td { font-weight: 600; } tr.is-unread td:first-child { border-left: 3px solid var(--accent, var(--purple)); } .block--form { background: var(--surface); border-radius: var(--radius); padding: 32px 36px; } .formtitle { margin: 0 0 8px; font-size: 26px; } .formtext { margin: 0 0 20px; color: var(--ink-soft); } .block--form .field { margin-bottom: 14px; } .block--form .fieldlabel { display: block; font-size: 13px; color: var(--ink-soft); margin-bottom: 4px; } .block--form .fieldinput { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; font: inherit; background: #fff; } / Off-screen rather than display:none — a bot that skips hidden fields is a bot that gets through. / .formtrap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .formok { color: var(--emerald); font-weight: 600; } / Der Hinweis nach dem Abschicken — siehe `site/form_submit.js`. Halb durchsichtig ueber dem Formular, damit man sieht, wo man war; die Karte darin traegt ihre eigenen Farben, weil das Formular auf hellem wie auf dunklem Grund stehen kann. / form.form[data-form-submit] { position: relative; } form.form.is-sending { opacity: .7; } .formoverlay { position: absolute; inset: -12px; z-index: 5; display: grid; place-items: center; padding: 16px; border-radius: 14px; background: rgba(12, 6, 30, .45); backdrop-filter: blur(3px); animation: form-overlay-in .2s ease-out; } .formoverlay.is-leaving { opacity: 0; transition: opacity .25s ease; } .formoverlay-card { max-width: 26rem; padding: 22px 24px; border-radius: 12px; text-align: center; background: #ffffff; color: #1b1420; box-shadow: 0 12px 40px rgba(12, 6, 30, .25); display: grid; gap: 14px; justify-items: center; } .formoverlay-card p { margin: 0; font-size: 16px; line-height: 1.45; } .formoverlay.is-ok .formoverlay-card p::before { content: "✓"; display: block; margin: 0 auto 8px; width: 36px; height: 36px; line-height: 36px; border-radius: 50%; background: #1f9d55; color: #ffffff; font-weight: 700; } .formoverlay.is-error .formoverlay-card p { color: #b00020; font-weight: 600; } .formoverlay-close { font: inherit; font-size: 14px; padding: 8px 18px; border-radius: 999px; cursor: pointer; border: 1px solid rgba(27, 20, 32, .2); background: #ffffff; color: #1b1420; } .formoverlay-close:hover { background: #f4f2f4; } @keyframes form-overlay-in { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .formoverlay { animation: none; } } .formerror { color: #b00020; font-weight: 600; } / Bestätigen, wer sich bewirbt — siehe Applications::Verification. Zwei Schritte: erst der Kasten, dann das Formular. / / ⚠️ ALLE FARBEN AUS `currentColor`. Der Kasten steht auf hellem Papier UND im dunklen Kontaktband; ein fester Grund (`#fff`) oder ein Ton aus `--ink` zeichnete dort weiss auf weiss bzw. dunkel auf dunkel. / .apply-steps { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 4px 0 16px; padding: 0; list-style: none; counter-reset: schritt; font-size: 14px; color: inherit; } .apply-stepsstep:not(.is-current) { opacity: .7; } .apply-stepsstep { display: flex; align-items: center; gap: 8px; counter-increment: schritt; } .apply-stepsstep::before { content: counter(schritt); display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid color-mix(in srgb, currentColor 35%, transparent); font-weight: 600; font-size: 13px; } .apply-stepsstep.is-current { color: inherit; font-weight: 600; } .apply-stepsstep.is-current::before { background: var(--accent, var(--purple)); border-color: transparent; color: #fff; } .apply-stepsstep.is-done::before { content: "✓"; background: var(--emerald); border-color: transparent; color: #fff; } .verify-box { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; margin-block: 8px 24px; padding: clamp(18px, 3vw, 28px); color: inherit; text-align: left; border: 1px solid color-mix(in srgb, currentColor 18%, transparent); border-radius: var(--radius, 12px); background: color-mix(in srgb, currentColor 5%, transparent); } .verify-box :is(p, form) { margin: 0; } .verify-box--done { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding-block: 14px; } .verify-donemark { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: color-mix(in srgb, currentColor 8%, transparent); } .verify-donemark .id-icon { width: 24px; height: 24px; } .verify-donemark--linkedin { background: #0a66c2; } .verify-donemark--pulse_id { background: none; } .verify-done__mark--pulse_id .id-icon { width: 40px; height: 40px; } .verify-box .verify-boxlinked { display: grid; gap: 1px; font-weight: 400; } .verify-donetitle { font-weight: 600; } .verify-donewho { opacity: .85; overflow-wrap: break-word; } / Die Adresse ist ein Link (MailGuard) und stand im Band Browser-Blau auf Nachtblau. / .verify-donewho a { color: inherit; } .verify-donewho > span + span::before { content: " · "; } .verify-donenext { font-size: 13px; opacity: .7; } @media (max-width: 480px) { .verify-box--done { grid-template-columns: auto minmax(0, 1fr); align-items: start; } .verify-doneforget { grid-column: 2; } .verify-donewho { font-size: 15px; } .verify-donewho > span { display: block; } .verify-donewho > span + span::before { content: none; } } .verify-boxhead { display: grid; gap: 4px; } .verify-boxtitle { margin: 0; font-size: 19px; line-height: 1.25; color: inherit; } .verify-boxlead { opacity: .8; } .verify-box .fieldlabel { display: block; margin: 0 0 6px; font-size: 14px; font-weight: 600; color: inherit; } .verify-box .formhint { margin: 0; padding-top: 14px; color: inherit; opacity: .75; border-top: 1px solid color-mix(in srgb, currentColor 15%, transparent); } / ⚠️ MELDUNGEN OHNE EIGENE SCHRIFTFARBE. Das Kontaktband färbt jeden Absatz in seine Schrift (`:is(h2, p, label)` mit höherer Spezifität) — ein hellgrüner oder rosa Grund stand dort mit WEISSER Schrift da. Gemeldet: „weisser text auf hässlicher grüner box". Die Farbe trägt jetzt nur der Strich links. / .verify-box :is(.formerror, .formok) { padding: 8px 12px; border-radius: 8px; font-weight: 600; background: color-mix(in srgb, currentColor 6%, transparent); border-left: 3px solid #e5484d; } .verify-box .formok { border-left-color: #30a46c; } .verify-boxrow { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; } / Die Wege: gleiche Spalte, Knöpfe gleich breit, auf dem Telefon untereinander. / .verify-way { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; } .verify-box .btn--primary { background: var(--accent, var(--purple)); color: #fff; } .verify-wayrow, .pulse-startrow { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; } .verify-wayrow .fieldinput, .pulse-startrow .fieldinput { flex: 1 1 15rem; min-width: 0; width: auto; margin: 0; } .verify-wayrow .btn, .pulse-startrow .btn { flex: 1 0 13.5rem; max-width: 100%; } @media (min-width: 560px) { .verify-wayrow .btn, .pulse-startrow .btn { flex-grow: 0; } } .verify-waysingle .btn { width: 100%; } .verify-box .btn { padding-block: 11px; font-size: 15px; } .verify-boxor { display: flex; align-items: center; gap: 12px; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; } .verify-boxor::before, .verify-boxor::after { content: ""; flex: 1; height: 1px; background: color-mix(in srgb, currentColor 18%, transparent); } .verify-boxor span { opacity: .7; } .verify-box .verifymore { margin-top: 0; gap: 8px 16px; } .verify-boxlink { background: none; border: 0; padding: 0; font: inherit; font-size: 14px; color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; opacity: .85; } .verify-boxlink:hover { opacity: 1; } / Hinweise unter Feldern — Voraussetzung einer Frage, Grenzen der Unterlagen, was nach der Bestätigung kommt. Sie standen ungestaltet in Textgrösse da. / .block--form .formhint { margin: 4px 0 0; font-size: 13px; line-height: 1.4; color: var(--ink-soft); } .formgroup { border: 0; margin: 0 0 18px; padding: 0; min-width: 0; } .formlegend { padding: 0; margin-bottom: 10px; font-size: 17px; font-weight: 600; } .verify-boxlinked { margin: 0; font-weight: 600; } .verify-boxforget { background: none; border: 0; padding: 0; font: inherit; font-size: 13px; color: inherit; opacity: .8; text-decoration: underline; cursor: pointer; } .btn--linkedin { background: #0a66c2; color: #fff; } .btn--linkedin:hover { background: #004182; } .verifycode { font-size: 22px; letter-spacing: .3em; text-align: center; } .verifymore { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; } .verify__note { font-size: 13px; opacity: .75; margin-top: 18px; } / Die Anmeldung zum Verteiler unter einer Meldungssektion — CmsCollection#signup_block. / .section-signup { margin-block: 56px 32px; } / Mit Pulse ID bestätigen — das kleine Formular und die Warteseite. / .pulse-start { display: grid; gap: 10px; width: 100%; } .pulse-starttitle { display: flex; align-items: center; gap: 10px; font-weight: 600; } .pulse-starttitle .id-icon { width: 28px; height: 28px; } .pulse-startfields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: 10px; } .pulse-startfields .fieldinput { width: 100%; margin: 0; } .verify-box .pulse-starthint { font-size: 13px; opacity: .75; } .pulse-start .btn--pulse-id { width: 100%; } .btn .id-icon { flex: none; } .btn--pulse-id { background: var(--accent, var(--purple)); color: #fff; } .pulse-waitlabel { margin-bottom: 4px; font-weight: 600; } .pulse-waitnumber { margin: 0; font-size: clamp(56px, 12vw, 88px); font-weight: 700; line-height: 1; letter-spacing: .08em; font-variant-numeric: tabular-nums; } .block--facts { display: grid; grid-template-columns: repeat(var(--cols, 4), 1fr); gap: 20px; text-align: center; } .factvalue { display: block; font-family: var(--font-head, inherit); font-size: clamp(28px, 4vw, 42px); font-weight: 700; color: var(--accent, var(--purple)); } .facttext { color: var(--ink-soft); } @media (max-width: 720px) { / One column on a phone, for every grid. A three-column grid squeezed into 360px is not a layout, it is three unreadable columns. / .block--columns, .teasersgrid, .block--facts, .block--hero-split { grid-template-columns: 1fr; } .block--hero .herobody { padding: 32px 24px; } } .sitefoot { margin-top: var(--foot-top); padding: var(--foot-pad); border-top: var(--foot-line); color: var(--ink-soft); font-size: var(--foot-size); background: var(--foot-ground); } .sitefoot a { color: var(--ink-soft); text-decoration: none; } .sitefoot a:hover { color: var(--accent, var(--purple)); } .footgrid { max-width: var(--foot-max); margin: 0 auto; display: flex; flex-wrap: wrap; gap: var(--foot-gap); align-items: var(--foot-align); justify-content: var(--foot-justify); text-align: var(--foot-text-align); } .footbrand { flex: 1 1 240px; max-width: 320px; } .footmark { max-height: var(--mark-height, 40px); width: auto; display: block; margin-bottom: 10px; } .footwordmark { font-family: var(--font-head, inherit); font-size: 18px; color: var(--ink); } .footnote { margin: 8px 0 12px; } .footsocial { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 12px; } .footsocial-link { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; } .foot__social-link svg { flex: none; } / ⚠️ DAS NETZWERKLOGO KOMMT AUS DER MEDIATHEK, UND ES STEHT WAHLWEISE NEBEN ODER UEBER DEM WORT. Verlangt: „logo rechts daneben ein text, kann man aber auch logo oben, text unten machen." Abgelesen an netsuisse.com (2026-09-10): `footer .social-icon { width: 40px; aspect-ratio: 1 }`, der Link unterhalb 768px `flex-direction: column; gap: 12px`, darueber `row; gap: 15px`. ⚠️ HOEHE STATT BREITE. Ein Signet ist quadratisch, ein Schriftzug breit; auf die Breite bemessen wuerde das eine winzig und das andere riesig. Die Hoehe ist die Einstellung (siehe SOCIAL_LOGO_HEIGHTS), die Breite folgt. / .footsocial-logo { height: var(--social-logo-height, 40px); width: auto; max-width: 100%; flex: 0 0 auto; display: block; } .footsocial--row .footsocial-link { flex-direction: row; align-items: center; gap: 15px; } .footsocial--stack .footsocial-link { flex-direction: column; align-items: center; gap: 12px; text-align: center; } @media (max-width: 767px) { .footsocial--row .footsocial-link { flex-direction: column; align-items: center; gap: 12px; } } / ⚠️ IM „HAUS" FAELLT DAS ZEICHEN WEG, NICHT DER NAME — die Regel hier war genau verkehrt. Auf www.netsuisse.com steht in der Fusszeile ein Textlink („Follow us on LinkedIn", Schnitt 300, kein SVG); versteckt war bei uns aber der Name und sichtbar das Zeichen. Nachgemessen 2026-09-08. / / ⚠️ NUR DAS EINGEBAUTE ZEICHEN VERSCHWINDET, NICHT DAS HOCHGELADENE LOGO. Im Hausaufbau ist die Fusszeile eine schmale Zeile, in der ein fremdes Markenzeichen fehl am Platz waere — ein Logo, das jemand selbst dorthin gelegt hat, ist dagegen genau das, was verlangt wurde. / .sitefoot--haus .footsocial-link svg { display: none; } / ⚠️ HIER STAND `gap: 0`. Das war richtig, solange im Haus NUR das Wort dastand — mit einem Logo daneben klebt es daran. Gemeldet: „abstand ist sowieso 0 also katastrophal." Der Abstand kommt jetzt aus der Anordnung (siehe `.footsocial--row` / `--stack`), diese Zeile regelt nur noch den Schriftschnitt. / .sitefoot--haus .footsocial-link { font-weight: 300; } .sitefoot--haus .footsocial { gap: 22px; } .footcol { flex: 0 1 160px; } .footcol ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; } .foot__title { font-size: var(--foot-title-size); text-transform: var(--foot-title-transform); letter-spacing: var(--foot-title-spacing); color: var(--ink); margin: 0 0 10px; } / Die Standorte der Gruppe, auf jeder Seite unten. Ausgewaehlt bei der Firma oder im Schirm „Fusszeile", geholt bei den Firmen — siehe CmsChrome#footer_places. ⚠️ ABGELESEN VON netsuisse.com (`.contact-section .locations`), nicht erfunden: ab 768px eine Flex-ZEILE, jede Spalte so breit wie ihr Inhalt, 180/1520 der Satzbreite Abstand (mindestens 80px), eine 1px-Linie LINKS in der Akzentfarbe, 40/1520 Einzug. Name und Anschrift stehen eng (0.2em), der Kontakt 20px darunter. Die Ueberschrift „Standorte" in derselben Farbe wie die Linie. ⚠️ UND ALS EIGENE REGEL AM ZEILENANFANG. Hier stand der Block einmal hinter `body.site[data-layout="studio"] ` — beim Einfuegen war das erste Vorkommen von `.footlegal {` der Anker, und das war das ENDE jenes Selektors. Damit wirkte `.footplaces` nur noch im Aufbau „Studio", auf netsuisse.group standen die Firmen untereinander, und die Zentrierung der Rechtszeile galt ploetzlich allen Aufbauten. `stylesheet_integrity_test.rb` sucht seither nach genau dieser Form. / .footplaces { display: grid; gap: 28px; margin: 36px 0 8px; } .footplaces-heading { margin: 0; font-size: clamp(20px, 2vw, 28px); font-weight: 400; color: var(--accent, var(--purple)); } .footplaces-list { display: flex; flex-direction: row; flex-wrap: wrap; gap: 32px clamp(80px, 11.8vw, 180px); } .footplace { display: grid; gap: 20px; align-content: start; flex: 0 1 auto; min-width: 0; padding-left: clamp(20px, 2.6vw, 40px); border-left: 1px solid var(--accent, var(--purple)); } .footplace-top { display: grid; gap: 0.2em; } .footplace-name { font-weight: 600; } .footplace-name a { color: inherit; } .footplace-address { font-style: normal; white-space: pre-line; font-size: 13.5px; color: var(--ink-soft); } .footplace-label { display: block; font-weight: 600; color: inherit; } .footplace-contact { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: 13.5px; } .footplace-contact a { color: inherit; } / Das tiefe Band — dieselben Farben wie der Kontaktabschnitt (`.block--form[data-variant="contact"]`), ueber die volle Breite. / .footplaces--deep { --contact-ground: var(--accent-4, color-mix(in srgb, var(--accent, var(--purple)) 10%, #07030f)); --contact-ink: var(--on-accent-4, #ffffff); --contact-mark: var(--accent-2, var(--accent, var(--purple))); margin-inline: calc(50% - 50vw); padding: clamp(60px, 8vw, 120px) max(var(--page-gutter, 24px), calc(50vw - 740px)); background: var(--contact-ground); color: var(--contact-ink); border-top-left-radius: var(--block-corner, 0); text-align: left; } .footplaces--deep .footplaces-heading { color: var(--contact-mark); font-weight: 600; } .footplaces--deep .footplace { border-color: var(--contact-mark); } .footplaces--deep .footplace-address { color: inherit; opacity: .85; } .footplaces--deep a, .sitefoot .footplaces--deep a { color: inherit; } .footplaces--deep a:hover, .sitefoot .footplaces--deep a:hover { color: var(--contact-mark); } .footlegal { max-width: var(--foot-max); margin: var(--foot-legal-gap) auto 0; padding-top: 16px; border-top: var(--foot-legal-line); display: flex; flex-wrap: wrap; gap: 16px; align-items: baseline; } / Steht als Letztes vor der Redaktionstür und traegt sich leise: es ist eine Herkunftsangabe, keine Werbung. / / ⚠️ ZWEI WOERTER OHNE FORM SIND KEINE SCHLUSSZEILE. Gemeldet: „das redaktion und powered by gehören schon irgendwo dahin, aber jetzt einfach grauenhafter text und nichts schönes, keine icons, nicht." Sie standen als blosse Woerter in derselben Groesse wie alles daneben und drehten sich damit in den Vordergrund, obwohl sie das Kleingedruckte sind. Jetzt: eine eigene Zeile, kleiner, ruhiger, jedes mit einem Zeichen davor — und `Redaktion` als Knopf erkennbar, weil es das einzige davon ist, worauf jemand klickt. / / ⚠️ UND DANN WAR SIE ZU LAUT. „Redaktion" trug eine Pille mit Kontur, also den einzigen Knopf im ganzen Fuss — das Kleingedruckte des PRODUKTS war das auffaelligste Element in der Gestaltung der KUNDIN. Gemeldet: „fusszeile mit reach ist hässlich, das muss sehr dezent sein und nicht das gestaltungsbild des footers dominieren". Also: keine Kontur, 11px, halb durchsichtig, und der Verweis zeigt sich erst beim Darueberfahren. / / ⚠️ DAS ZEICHEN IST NICHT KLEINGEDRUCKT. Gemeldet: „das reachlogo zuunterst darf übrigens schon farbig sein." Die Blaesse hing an der ganzen Zeile und nahm dem Zeichen seine Farben mit; jetzt traegt nur der Satz sie. / .footorigin { display: inline-flex; align-items: center; gap: 12px; font-size: 11px; letter-spacing: .02em; } .footorigin .footpowered { opacity: .42; } .footorigin .footpowered:hover { opacity: .7; } .footorigin svg { flex: none; opacity: .7; width: 11px; height: 11px; } .footpowered { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; } / Das Zeichen IST der Weg in die Redaktion — siehe `_footer_origin`. / .footdoor { display: inline-flex; align-items: center; text-decoration: none; padding: 0; border: 0; } .footdoor .brand-mark { --mark-size: 16px; box-shadow: none; transition: transform .15s ease; } .footdoor:hover .brand-mark, .footdoor:focus-visible .brand-mark { transform: scale(1.12); } / Der Satz fuehrt zur Produktseite, wenn es eine gibt. / a.footpowered { color: inherit; text-decoration: none; } a.footpowered:hover { text-decoration: underline; } / Ein Wort nur fuer Vorleseprogramme — dasselbe Mittel wie `.iconbtnword`. / .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } / Eine verdeckte Adresse (MailGuard): das @ steht nur hier, nie im Quelltext. / .mailat::before { content: "@"; } / Eine Anschrift als Verweis auf die Karte: sieht aus wie eine Anschrift, bis man darauf zeigt. / a.placemap { color: inherit; text-decoration: none; } a.placemap:hover { text-decoration: underline; color: var(--accent, var(--purple)); } / In der Liste liegt die ganze Zeile unter dem Namen als Verweis; die Anschrift muss darueber liegen, sonst traefe jeder Klick den Namen. / .finder-rowplaces a.placemap { position: relative; z-index: 1; } / Steuer- und Registernummern einer Firma: klein, eine Zeile je Nummer. / .firmnumbers { margin: 0; display: grid; gap: 2px; font-size: 13px; color: var(--ink-soft); } .firmnumbers > div { display: flex; flex-wrap: wrap; gap: 0 6px; justify-content: inherit; } .firmnumbers dt { font-weight: 600; } .firmnumbers dd { margin: 0; } .stream .teaser--company .firmnumbers > div, .companies-page .firmnumbers > div { justify-content: center; } / Bereiche in Karten: dieselben Pillen wie in der Liste. / .firmareas, .teaserareas { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; justify-content: inherit; } body.site[data-layout="haus"] .stream .teaserareas { justify-content: center; } / Auf der grauen Karte ohne Bild waere eine graue Pille unsichtbar. / body.site[data-layout="haus"] .stream-band--page .teaser--textonly .teaserareastag { background: var(--canvas, #fff); } .firmareastag, .teaserareastag { padding: 3px 10px; border-radius: 50px; background: var(--surface-3, #ebe7ec); color: var(--ink); font-size: 13px; } .entrybody + .firmnumbers, .entry > .firmnumbers { margin-block: 12px; } / Ansprechpartner unten an einer Meldung. / / Ansprechpartner als Visitenkarte — `public/_contacts`. Eine Fläche aus dem Textton des Mandanten, rundes Portrait links, daneben Name, Funktion in der Akzentfarbe und die Kontaktzeilen. Zwei nebeneinander, sobald Platz ist. / .contacts { display: grid; gap: 16px; } .contactstitle { margin: 0; font-size: clamp(20px, 2.2vw, 26px); } .contactslist { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 12px; } .contact-card { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 18px; align-items: center; padding: 16px 18px; border-radius: var(--radius, 12px); background: color-mix(in srgb, currentColor 4%, transparent); border: 1px solid color-mix(in srgb, currentColor 10%, transparent); } .contact-cardface { width: 96px; height: 96px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; font-weight: 600; font-size: 28px; background: var(--accent-wash, color-mix(in srgb, currentColor 8%, transparent)); color: var(--accent, var(--purple)); } .contact-cardface img { width: 100%; height: 100%; object-fit: cover; display: block; } .contact-cardbody { min-width: 0; } .contact-cardname { margin: 0; font-size: 17px; line-height: 1.25; } .contact-cardname a { color: inherit; text-decoration: none; } .contact-cardname a:hover { color: var(--accent, var(--purple)); } .contact-cardrole { margin: 2px 0 6px; font-size: 14px; color: var(--accent, var(--purple)); } .contact-cardlines { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-size: 14px; line-height: 1.5; } .contact-cardlines a { color: inherit; text-decoration: none; overflow-wrap: anywhere; } .contact-cardlines a:hover { color: var(--accent, var(--purple)); text-decoration: underline; } .entry__contacts { margin-block: clamp(32px, 5vw, 64px); } .collection-contacts { margin-block: clamp(24px, 3vw, 40px) clamp(32px, 4vw, 56px); } / Eine Kontaktzeile — `public/_contact_line`: Zeichen in der Schriftfarbe, daneben der Text. Die Farbe des Texts bestimmt die umgebende Liste. / .cline { display: inline-flex; align-items: center; gap: .5em; } .clineicon { width: 1.05em; height: 1.05em; flex: none; opacity: .75; } .clineplain { display: block; } body.site[data-layout="haus"] .collection-contacts { margin-inline: calc(50% - 50vw); padding-inline: max(24px, calc(50vw - 640px)); } / Bewerbungsfragen ab der sechsten: zugeklappt. / .qrow__more > summary { cursor: pointer; margin: 8px 0; color: var(--accent, var(--purple)); font-size: 13px; } / Zustand der Virenpruefung in Mediathek und Eingang. / .scan-badge { display: inline-block; padding: 1px 8px; border-radius: 50px; font-size: 11px; font-weight: 600; } .scan-badge--pending { background: #fff4d6; color: #7a5600; } .scan-badge--infected, .scan-badge--too_large { background: #fde2e1; color: #9b1c1c; } .mediathumb .scan-badge { position: absolute; left: 6px; bottom: 6px; } / Der Hinweis vor einer fremden Website. / .leaveactions { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; margin-top: 28px; } .leavego { display: inline-block; padding: 0.75em 2em; border-radius: 50px; text-decoration: none; background: var(--accent, var(--purple)); color: #ffffff; } .leaveback { color: var(--accent, var(--purple)); } / ⚠️ EINE EIGENE ZEILE GANZ UNTEN, MITTIG. Vorher stand die Zeile rechts in der Schlusszeile — das Kleingedruckte des PRODUKTS neben den Verweisen der KUNDIN, und es sah aus wie einer davon. Gemeldet: „müsste ganz zuunterst sein nicht bei social media … zentriert fusszeile." / .footorigin-row { display: flex; justify-content: center; margin-top: 28px; padding-top: 14px; border-top: 1px solid color-mix(in srgb, currentColor 7%, transparent); } / Rows in the chrome editor: a list that is edited without JavaScript needs to stay readable at ten rows, which is what the framing does. / / --- Der Gestaltungs-Bildschirm ------------------------------------------ ⚠️ EINE FARBE IST KEIN TEXT UND EINE SCHRIFT KEIN NAME. Vier Eingabefelder fuer `#a020f0` hiessen: den Wert vorher kennen, ihn nicht sehen, und erst nach dem Speichern auf der oeffentlichen Website erfahren, ob er passt. Die Probe steht deshalb NEBEN dem Formular und nicht darunter. / .look { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: var(--gap); align-items: start; } .lookform { min-width: 0; } @media (max-width: 1000px) { .look { grid-template-columns: 1fr; } } / Die Sprungleiste ueber dem Formular: sie sagt, was hier alles zu entscheiden ist, und fuehrt hin. Sie bleibt beim Rollen stehen — sonst fuehrt sie nur beim ersten Blick. / .looknav { position: sticky; top: 0; z-index: 3; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 var(--gap); padding: 8px 0; background: var(--bg); } .lookjump { text-decoration: none; color: var(--ink-soft); font-size: 13px; border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; background: var(--surface); } .lookjump:hover { color: var(--ink); border-color: var(--line-strong); } / Damit der Anker nicht unter der Leiste landet. / .lookform > .card { scroll-margin-top: 56px; } .lookaside { color: var(--ink-soft); font-size: 13px; margin: 4px 2px 0; } .swatches { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; } .swatchrow { display: flex; align-items: center; gap: 8px; } / Der Wähler ist ein Feld ohne Namen im Formular — die Groesse macht ihn zur Farbflaeche, die er sein soll, statt zum Systemknopf. / .swatchpick { width: 38px; height: 38px; flex: none; padding: 0; cursor: pointer; border: 1px solid var(--line); border-radius: var(--radius-sm); background: none; } .swatchpick::-webkit-color-swatch-wrapper { padding: 3px; } .swatchpick::-webkit-color-swatch { border: 0; border-radius: 6px; } .swatchpick::-moz-color-swatch { border: 0; border-radius: 6px; } .swatchhex { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; } / Die Probe traegt die gewaehlten Werte als eigene Eigenschaften, damit ein Tastendruck sie aendern kann, ohne dass irgendwo Stil zusammengesetzt wird. / .probe { position: sticky; top: 84px; --probe-accent: #a020f0; --probe-ink: #1b1420; --probe-canvas: #ffffff; --probe-surface: #f4f2f4; --probe-radius: 12px; --probe-font-head: Arial, sans-serif; --probe-font-body: Arial, sans-serif; } .probecaption { display: block; font-size: 9.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 8px; } .probepage { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--probe-canvas); color: var(--probe-ink); box-shadow: var(--shadow); } .probebar { display: flex; align-items: center; justify-content: space-between; gap: 12px; / Die Hoehe der Kopfzeile ist eine Einstellung — die Probe muss sie zeigen, sonst sieht die Wahl aus, als taete sie nichts. / padding: calc(12px var(--head-pad-scale, 1)) 14px; background: var(--probe-surface); } .probewordmark { font-family: var(--probe-font-head); font-size: 15px; font-weight: 600; } /* Die Probe spricht dieselbe Sprache wie die Kopfzeile: Groesse, Fettgrad und Schnitt kommen aus denselben Variablen — sonst waehlt man etwas, das man erst nach dem Speichern sieht. / .probenav { display: flex; gap: 10px; opacity: .75; font-family: var(--nav-font, var(--probe-font-body)); font-size: calc(11px var(--nav-scale, 1)); font-weight: var(--nav-weight, 300); } .probesheet { padding: 16px 14px 18px; font-family: var(--probe-font-body); } .probehead { font-family: var(--probe-font-head); font-size: 19px; margin: 0 0 8px; color: var(--probe-ink); } .probebody { font-size: 12.5px; line-height: 1.55; margin: 0 0 14px; opacity: .82; } .probebutton { display: inline-block; padding: 8px 14px; border-radius: var(--probe-radius); background: var(--probe-accent); color: #fff; font-size: 12.5px; font-weight: 600; } /* Felder nebeneinander, so viele die Breite hergibt. / .row-cardgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 12px; } .section-head h1 { font-size: 32px; margin: 0 0 8px; } .lead { color: var(--ink-soft); font-size: 18px; margin: 0 0 16px; } .stream { display: flex; flex-direction: column; gap: 32px; } / Das Titelbild in einer Vorschau. Zurueckhaltend im Grundzustand — ein Bildraster ist eine Gestaltungsentscheidung und gehoert dem Aufbau. / .teaserimage { display: block; margin: 0 0 12px; } .teaserimage img { width: 100%; height: auto; display: block; border-radius: 10px; } .teasersgrid .teaserimage { margin-bottom: 10px; } .teaser time { font-size: 13px; color: var(--ink-soft); } .teaser h2 { font-size: 22px; margin: 4px 0 6px; } .teaser h2 a { color: var(--ink); text-decoration: none; } .teaser h2 a:hover { color: var(--accent, var(--purple)); } .teasersub { color: var(--ink-soft); margin: 0 0 6px; } .teasermeta { display: grid; gap: 8px; justify-items: inherit; margin: 10px 0 0; } .teasercompany { margin: 0; font-size: 14px; color: var(--ink-soft); } .teaser--job h2 { margin-top: 0; } .teaserfacts, .entryfacts { color: var(--ink-soft); font-size: 14px; margin: 0 0 8px; } / ⚠️ DAS TITELBILD EINER MELDUNG. Es stand nirgends — die Rolle `hero` gab es am Modell, gezeigt wurde sie nie. Auf netsuisse.com beginnt jede Meldung damit, und zwar VOR dem Titel. / .entrycover { margin: 0 0 20px; } .entrycover img { width: 100%; height: auto; display: block; border-radius: 10px; } .entryhead time { font-size: 13px; color: var(--ink-soft); } .entryhead h1 { font-size: 34px; line-height: 1.2; margin: 6px 0 10px; } .entryteaser { font-size: 18px; font-weight: 500; } / ⚠️ AUCH DIE STARTSEITE (`.page`): dort stand der Absatz in 15px, in der Leinwand des Editors — die dieselbe Seite als `.entrybody` zeigt — in 17px. / :is(.entrybody, .page) { font-size: 17px; line-height: 1.65; } .entrybody .block--paragraph { margin: 0 0 18px; } .entrybody .block--heading { margin: 32px 0 10px; } .entrybody figure { margin: 24px 0; } .entrybody figure img { max-width: 100%; border-radius: 8px; } .entrybody figcaption { font-size: 13px; color: var(--ink-soft); margin-top: 6px; } .entrybody figcaption .credit { display: block; font-style: italic; } / --- Der Fluss einer Seite ---------------------------------------------- ⚠️ EINE GRAMMATIK FUER DREI ORTE. Die Startseite legte ihre Bausteine in `.page` und trennte JEDEN vom naechsten mit dem Rhythmus (88px im Haus); eine Unterseite und die Leinwand des Editors legen sie in `.entrybody`, und dort galten 32px vor einem Titel, 10px danach und 18px nach einem Absatz — und zwischen Spalten und einem Band gar nichts. Dieselbe Seite sah im Editor anders aus als beim Besucher: „die vertikalen abstände sind bei lösungen für die intelligente belegschaft … einfach nicht identisch". Abgelesen an netsuisse.com (#what-we-offer, 1440px): Titel → Untertitel 60px, Untertitel → Text 20px, Text → Spalten 60px; zwischen Abschnitten der Rhythmus. Also: der Rhythmus trennt ABSCHNITTE, und was nach einem Titel oder einem Absatz zum selben Abschnitt gehoert, rueckt heran. Nur auf der BREITEN Seite (`sitemain--wide`, also mit Marketingbausteinen) — eine Pressemitteilung behaelt ihren Satz oben. / :is(.page, .sitemain--wide .entrybody) { --flow-inner: min(clamp(40px, 6vw, 60px), calc(var(--rhythm) .7)); --flow-tight: min(20px, calc(var(--rhythm) * .5)); } :is(.page, .sitemain--wide .entrybody) > * { margin-block: 0; } :is(.page, .sitemain--wide .entrybody) > * + * { margin-top: var(--rhythm); } :is(.page, .sitemain--wide .entrybody) > .block--heading + * { margin-top: var(--flow-inner); } :is(.page, .sitemain--wide .entrybody) > :is(.block--heading-2, .block--heading-3) + .block--paragraph { margin-top: var(--flow-tight); } /* ⚠️ ZWEI ABSAETZE SIND KEIN ABSCHNITTSWECHSEL — zwischen zwei Saetzen desselben Gedankens standen 88px, und ein dreiteiliger Text zerfiel in drei Texte. Wer wirklich Luft will, hat dafuer den Abstandhalter. / :is(.page, .sitemain--wide .entrybody) > .block--paragraph + .block--paragraph { margin-top: var(--flow-tight); } / Was nach einem Absatz ZUM ABSCHNITT gehoert: Spalten, Bild, Zitat. Ein Band, eine Flaeche, eine Buehne oder ein neuer Titel sind der naechste Abschnitt und behalten den Rhythmus. / :is(.page, .sitemain--wide .entrybody) > .block--paragraph + :is(.block--columns, .block--image, .block--gallery, .block--quote, .block--facts, .block--logos, .block--people, .block--download, .block--embed, .block--social, .block--links, .block--reports, .block--calendar, .block--figures):not([data-ground]) { margin-top: var(--flow-inner); } / Eine Linie IST schon eine Trennung; der volle Rhythmus davor UND danach waere doppelt. / :is(.page, .sitemain--wide .entrybody) > + .block--divider, :is(.page, .sitemain--wide .entry__body) > .block--divider + * { margin-top: calc(var(--rhythm) / 2); } .block--wide, .block--full { max-width: none; } .block--gallery { display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: 12px; } /* Anhänge einer Seite. Eine Zeile je Datei, mit Typ und Grösse — siehe public/blocks/_download.html.erb für das Warum. Ohne Skript, ohne Symbolsatz: das Kürzel IST das Symbol. / .attach { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .attachlink { display: flex; align-items: center; gap: 14px; padding: 12px 14px; text-decoration: none; color: inherit; border: 1px solid var(--line, rgba(0, 0, 0, .12)); border-radius: 8px; background: var(--surface, transparent); } .attachlink:hover { border-color: var(--accent); } .attachtype { flex: 0 0 auto; min-width: 3.4em; padding: 5px 7px; text-align: center; font-size: 11px; font-weight: 700; letter-spacing: .06em; border-radius: 5px; background: var(--accent); color: #fff; } .attachthumb { flex: 0 0 auto; width: 56px; height: 56px; object-fit: cover; margin-left: auto; border-radius: 5px; background: var(--surface-2, rgba(0, 0, 0, .05)); } / In der Karte steht das Bild oben — dort ist nichts, womit es fluchten müsste. / .block--download[data-variant="cards"] .attachthumb { order: -1; margin-left: 0; width: 100%; height: auto; aspect-ratio: 4 / 3; } .attachbody { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .attachname { font-weight: 600; word-break: break-word; } .attachmeta { font-size: 12px; opacity: .7; } / Der Wähler im Panel — Kästchen statt ` mit der Kennung ab, und `nth-child` zählte es mit: der zweite Reiter zeigte das versteckte Feld (also nichts), der dritte die zweite Tafel. Gemeldet: „beim englischen tab etwas anderes und beim spanischen dann das englische". / .langtabsradio:nth-of-type(1):checked ~ .langtabspanels > .langtabspanel:nth-of-type(1), .langtabsradio:nth-of-type(2):checked ~ .langtabspanels > .langtabspanel:nth-of-type(2), .langtabsradio:nth-of-type(3):checked ~ .langtabspanels > .langtabspanel:nth-of-type(3), .langtabsradio:nth-of-type(4):checked ~ .langtabspanels > .langtabspanel:nth-of-type(4), .langtabsradio:nth-of-type(5):checked ~ .langtabspanels > .langtabspanel:nth-of-type(5) { display: flex; flex-direction: column; gap: var(--gap-sm); } / Mit der Tastatur sichtbar: der Radioknopf liegt unsichtbar da, den Fokus trägt sein Reiter. / .langtabsradio:focus-visible ~ .langtabsbar .langtabstab { outline: 2px solid var(--purple); outline-offset: -2px; } / Autor und Datum einer Meldung — eine Zeile, oben. / .entrybyline { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; align-items: baseline; } .entryauthor { font-size: 15px; } body.site[data-layout="haus"] .entryhead .entrybyline time, body.site[data-layout="haus"] .entryhead .entryauthor, body.site[data-layout="haus"] .entryhead .entrydateline { color: var(--accent, var(--purple)); } .entry__dateline { font-size: 15px; } / --- Flaeche und Ecke eines Bausteins --------------------------------------- ⚠️ WARUM ES DAS GIBT. Gemeldet: „wenn ich das richtig sehe haben die bausteine immer noch keine fähigkeit ein layout auszusuchen?" — und konkret: „schau dir bitte hier diesen abschnitt kontakt mit deep purple abgerundet und über uns unten eingefasst an, das müssen wir auch können." Konnte man nicht: Flaeche und gekappte Ecke waren die Handschrift des AUFBAUS, fest verdrahtet an bestimmten Stellen (Kopfband, Liste) und sonst nirgends. Ein Abschnitt „Kontakt" auf tiefem Violett war damit unmoeglich. ⚠️ DIE FARBEN KOMMEN AUS DER PALETTE, NICHT AUS DIESER DATEI. Sechs Akzentplaetze stehen am Erscheinungsbild (siehe CmsChrome::PALETTE); hier stehen nur die Zuordnungen. Deshalb faerbt „deep purple" eine Netsuisse-Seite violett und eine andere Marke in deren eigener dritter Farbe. ⚠️ UND DIE SCHRIFTFARBE IST EIN EIGENES TOKEN. Ob auf einer Flaeche helle oder dunkle Schrift steht, kann keine Regel ausrechnen — `color-contrast()` gibt es noch nicht ueberall. Ein Layout, das eine Palette umstellt, setzt `--on-accent-N` mit um. / :root { --on-accent: #ffffff; --on-accent-2: #ffffff; --on-accent-3: #ffffff; --on-accent-4: #ffffff; --on-accent-5: var(--ink); --on-accent-6: var(--ink); --block-corner: clamp(60px, 9vw, 200px); --block-ground-pad: clamp(32px, 5vw, 90px); } / --- Bauformen ----------------------------------------------------------- ⚠️ HIER LIEGT DIE GESTALTUNGSARBEIT, NICHT IN EINEM FORMULAR. Gemeldet: „genau im wesentlich styled man blocklayouts und verwendet sie x-fach." Genau das steht hier: je Baustein ein paar fertige Bauformen, jede eine Entscheidung ueber Satzbreite, Ausrichtung, Abstaende und Schriftsprung. Welche davon ein Auftritt anbietet und womit ein neuer Baustein anfaengt, sagt sein Layoutpaket in `config/layouts/.yml` (siehe CmsLayout). Der Schluessel steht als `data-variant` am Baustein — gesetzt in `block_frame` und darum an JEDEM, ohne dass eine der neunzehn Teilansichten davon weiss. ⚠️ DIESER ABSCHNITT STEHT VOR FLAECHE UND ECKE. Beides ist eine EINZELNE Entscheidung der Redaktion an genau diesem Baustein; sie muss die Bauform uebersteuern koennen und nicht umgekehrt. Bei gleicher Spezifitaet gewinnt, was spaeter steht. / /* Absatz — Satzbreite und Ausrichtung, nicht Schriftgroessen von Hand. / .block--paragraph[data-variant="lead"] { font-size: 1.2em; line-height: 1.5; } .block--paragraph[data-variant="centered"] { text-align: center; max-width: 40rem; margin-inline: auto; } .block--paragraph[data-variant="narrow"] { max-width: 34rem; } @media (min-width: 760px) { .block--paragraph[data-variant="duo"] { columns: 2; column-gap: 40px; } .block--paragraph[data-variant="duo"] > :first-child { margin-top: 0; } } / Titel. / .block--heading[data-variant="centered"] { text-align: center; } .block--heading[data-variant="display"] .heading__text { font-size: clamp(34px, 6vw, 68px); line-height: 1.08; letter-spacing: -.02em; } .block--heading[data-variant="underlined"] { padding-bottom: 12px; border-bottom: 2px solid var(--line); } / Bild. `bleed` ist dieselbe Ausbruchsrechnung wie bei einer Flaeche. / .block--image[data-variant="wide"] { max-width: 100%; } .block--image[data-variant="bleed"] { max-width: none; margin-inline: calc(50% - 50vw); border-radius: 0; } .block--image[data-variant="bleed"] img { border-radius: 0; } .block--image[data-variant="framed"] { padding: 14px; background: var(--surface); border-radius: var(--radius); } / Galerie. / .block--gallery[data-variant="mosaic"] { grid-auto-flow: dense; } .block--gallery[data-variant="mosaic"] > :nth-child(4n+1) { grid-column: span 2; grid-row: span 2; } .block--gallery[data-variant="strip"] { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding-bottom: 8px; } .block--gallery[data-variant="strip"] > { flex: 0 0 clamp(220px, 40%, 340px); scroll-snap-align: start; } /* Zitat. / .block--quote[data-variant="large"] { font-size: clamp(21px, 3vw, 32px); line-height: 1.3; } / „Zitat": gesetzt wie der Anriss, links ein Strich in einer Farbe des Erscheinungsbilds (`--quote-rule`, siehe `public/blocks/_quote`). / .block--paragraph[data-variant="quote"], .block--quote[data-variant="rule"] { font-size: 1.2em; line-height: 1.5; font-style: normal; padding-left: clamp(16px, 2vw, 24px); border-left: 4px solid var(--quote-rule, var(--accent, var(--purple))); } .block--quote[data-variant="rule"] p { margin: 0; } .block--paragraph[data-variant="quote"] > :first-child { margin-top: 0; } .block--paragraph[data-variant="quote"] > :last-child { margin-bottom: 0; } .block--quote[data-variant="card"] { background: var(--surface); border-left: 0; border-radius: var(--radius); padding: 28px 32px; } / Anhaenge. / .block--download[data-variant="cards"] .attach { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } .block--download[data-variant="cards"] .attachlink { flex-direction: column; align-items: flex-start; gap: 10px; } / Einbettung. / .block--embed[data-variant="wide"] { margin-inline: calc(50% - 50vw); padding-inline: max(24px, calc(50vw - 740px)); } / Trenner — eine Linie, nur Luft, oder ein Punkt. / .block--divider[data-variant="space"] { border-top-color: transparent; } .block--divider[data-variant="dot"] { border-top: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--accent, var(--purple)); margin-inline: auto; } / Buehne. Die drei Grundrisse stehen weiter oben; hier nur, was ein Layoutpaket auf einen Grundriss draufsetzt. / .block--hero[data-variant="band"] { background: var(--accent-3, var(--accent, var(--purple))); color: var(--on-accent-3, #fff); } .block--hero[data-variant="band"] :is(.herotitle, .herotext) { color: inherit; } .block--hero[data-variant="band"] .herocta { border-color: currentColor; color: inherit; background: transparent; } / Spalten. Flex statt Raster: ein Gewicht auf der ersten oder letzten Spalte funktioniert so bei zwei Zellen genauso wie bei vier. / .block--columns[data-variant="wide_left"], .block--columns[data-variant="wide_right"] { display: flex; flex-wrap: wrap; } .block--columns[data-variant="wide_left"] > , .block--columns[data-variant="wide_right"] > * { flex: 1 1 220px; } .block--columns[data-variant="wide_left"] > :first-child, .block--columns[data-variant="wide_right"] > :last-child { flex: 1.8 1 320px; } /* Verweisband. / .block--cta[data-variant="band"] { margin-inline: calc(50% - 50vw); padding-inline: max(24px, calc(50vw - 740px)); background: var(--accent-3, var(--accent, var(--purple))); color: var(--on-accent-3, #fff); border-radius: 0; } .block--cta[data-variant="band"] :is(.ctatitle, .ctatext) { color: inherit; } .block--cta[data-variant="band"] .ctabutton { border-color: currentColor; } / ⚠️ AUF EINER GEWAEHLTEN FLAECHE IST DER KNOPF EINE KONTUR IN DER SCHRIFTFARBE. Sonst stuende auf tiefem Violett ein Knopf in der Akzentfarbe, die dort kaum zu sehen ist — netsuisse.com setzt genau hier einen weissen Konturknopf. / .block--cta[data-ground]:not([data-ground="surface"]) .ctabutton { background: transparent; color: inherit; border: 2px solid currentColor; text-transform: uppercase; letter-spacing: .08em; font-size: 14px; padding: 12px 34px; } .block--cta[data-ground]:not([data-ground="surface"]) .ctabutton:hover { background: currentColor; color: var(--accent-3, #341539); filter: none; } .block--cta[data-variant="quiet"] { background: none; padding: 24px 0 0; border-top: 1px solid var(--line); border-radius: 0; } / Beitragsliste — der Baustein, an dem der Unterschied am meisten auffaellt. ⚠️ DAS KARUSSELL IST CSS UND KEIN SKRIPT. Die oeffentliche Seite laedt keines; `scroll-snap` macht aus einer Reihe Karten eine, die man wischt. / / ⚠️ MIT SICHTBAREM ROLLBALKEN, aus demselben Grund wie bei der Liste: auf einem Schreibtisch ist er das einzige Bedienelement einer waagerechten Leiste. / .block--teasers[data-variant="carousel"] .teasersgrid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(min(300px, 78%), 1fr); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; scrollbar-width: thin; scrollbar-color: var(--accent, var(--purple)) transparent; } .block--teasers[data-variant="carousel"] .teasersgrid::-webkit-scrollbar { height: 8px; } .block--teasers[data-variant="carousel"] .teasersgrid::-webkit-scrollbar-track { background: transparent; } .block--teasers[data-variant="carousel"] .teasersgrid::-webkit-scrollbar-thumb { background: var(--accent, var(--purple)); border-radius: 99px; } .block--teasers[data-variant="carousel"] .teasersgrid > .cell { scroll-snap-align: start; } .block--teasers[data-variant="list"] .teasersgrid { grid-template-columns: 1fr; gap: 22px; } .block--teasers[data-variant="list"] .cell { display: grid; grid-template-columns: minmax(0, 220px) 1fr; gap: 22px; align-items: start; } .block--teasers[data-variant="list"] .cell img { margin-bottom: 0; } .block--teasers[data-variant="feature"] .teasersgrid > .cell:first-child { grid-column: 1 / -1; } .block--teasers[data-variant="feature"] .teasersgrid > .cell:first-child .celltitle { font-size: clamp(24px, 3.4vw, 34px); } .block--teasers[data-variant="feature"] .teasersgrid > .cell:first-child .celltext { font-size: 17px; } / Zahlen. / .block--facts[data-variant="row"] { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } / `grid` ist nicht dasselbe in weniger: breitere Felder, mehr Luft, links ausgerichtet — eine Tafel statt einer Zeile. / .block--facts[data-variant="grid"] { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 36px; text-align: left; } .block--facts[data-variant="band"] { margin-inline: calc(50% - 50vw); padding: clamp(32px, 5vw, 72px) max(24px, calc(50vw - 740px)); background: var(--surface); } / Formular. / .block--form[data-variant="card"] { border: 1px solid var(--line); } .block--form[data-variant="narrow"] { max-width: 34rem; margin-inline: auto; } / ⚠️ ABGELESEN VON netsuisse.com — `#contact.contact-section` unten auf der Startseite (themes/netsuisse/build/css/style.css), VOLLSTAENDIG: ein Band ueber die ganze Breite auf TIEFEM Grund (#0c061e, weisse Schrift), oben links die grosse runde Ecke, 90–200px Polster; darin eine Spalte von 750px; der Titel mittig in der ZWEITEN Akzentfarbe (#ff00ff); Beschriftung ueber dem Feld (10px); Felder ohne Rahmen auf 7% Weiss mit 26px-Enden, das Nachrichtenfeld 150px hoch; darunter der Knopf mittig als Konturpille in derselben zweiten Akzentfarbe. ⚠️ DER TIEFE GRUND GEHOERT ZUR BAUFORM. Beim ersten Ablesen hatte ich nur die Felder uebernommen und die Flaeche dem Schalter „Fläche" ueberlassen — gemeldet: „das deep purple hinterlegte kontaktformular … hast du auch übernommen?" Nein: auf netsuisse.group/de/kontakt stand es hell, weil dort niemand eine Flaeche gewaehlt hatte. Jetzt bringt die Bauform ihren Grund selbst mit, gerechnet wie `--band`: die Palettenfarbe (Stelle 4 — auf netsuisse.group genau #0c061e), sonst tief aus dem Akzent gemischt, damit eine gruene Website kein violettes Band bekommt. Wer eine Flaeche WAEHLT, bekommt sie: alles Folgende gilt nur `:not([data-ground])`. / .block--form[data-variant="contact"] { --contact-ground: var(--accent-4, color-mix(in srgb, var(--accent, var(--purple)) 10%, #07030f)); --contact-ink: var(--on-accent-4, #ffffff); --contact-mark: var(--accent-2, var(--accent, var(--purple))); / ⚠️ SPALTE UND SCHRIFT WACHSEN MIT. Gemeldet: „kontaktformular sehr klein die fragen kann man so nicht richtig erfassen". Der Titel wächst mit dem Fenster bis 70px, die Spalte stand fest auf 750px und die Schrift auf 14–17px — auf einem breiten Bildschirm ein Streifen Kleingedrucktes unter einer riesigen Überschrift. / / ⚠️ UND ZWEITENS BREITER ALS DER TEXT DARÜBER. Gemeldet, nach 750–980px: „kontaktformular callout ist nach wie vor nicht sehr breit" — bei 1440px stand das Band mit 750px schmaler als die Stellenanzeige über ihm (≈880px). Jetzt 960–1280px, und die Felder stehen ab 900px zu zweit nebeneinander. / --contact-col: clamp(960px, 70vw, 1280px); font-size: clamp(17px, 0.35vw + 13px, 21px); background: none; padding: 0; max-width: 46rem; margin-inline: auto; } .block--form[data-variant="contact"]:not([data-ground]) { max-width: none; margin-inline: calc(50% - 50vw); padding: clamp(90px, 13.2vw, 200px) max(24px, calc(50vw - var(--contact-col) / 2)); background: var(--contact-ground); color: var(--contact-ink); / NUR oben links, wie die Vorlage — die Ecke des Grundbausteins (`--radius`) rundete sonst auch die drei anderen ein wenig. / border-top-left-radius: var(--block-corner); border-top-right-radius: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .block--form[data-variant="contact"]:not([data-ground]) :is(h2, p, label, .fieldlabel) { color: inherit; } / ⚠️ UND MIT GEWAEHLTER FLAECHE GEHOERT DAS BAND DER FLAECHE. Die Regel darueber gibt dem Formular eine Satzbreite und `margin-inline: auto` — mit einem gewaehlten Grund schnitt das den Grund auf 46rem zu: links das tiefe Band, rechts das Papier der Seite. Der Grund laeuft ueber die volle Breite (siehe `.block[data-ground]`), die FELDER bleiben in ihrer Spalte. / .block--form[data-variant="contact"][data-ground] { max-width: none; margin-inline: calc(50% - 50vw); padding-inline: max(24px, calc(50vw - var(--contact-col) / 2)); } / ⚠️ `text-xxl` DER VORLAGE: 28–70px. Hier stand 30–46px mit 400 — der Titel stand duenn und klein ueber einem Band, das ihn tragen sollte. / .block--form[data-variant="contact"] .formtitle { text-align: center; color: var(--contact-mark); font-family: var(--font-head, inherit); font-size: clamp(28px, 4.6vw, 70px); font-weight: 600; line-height: 1.1; margin-bottom: clamp(40px, 5.3vw, 80px); } .block--form[data-variant="contact"]:not([data-ground]) .formtitle { color: var(--contact-mark); } .block--form[data-variant="contact"] .formtext { text-align: center; } .block--form[data-variant="contact"] .form { display: grid; row-gap: 20px; } / ⚠️ DIE BESCHRIFTUNG GEHÖRT ZU IHREM FELD. Die Felder stehen in einem `fieldset`, nicht direkt im Raster von `.form` — `row-gap` griff dort nicht, und „E-Mail" stand 10px unter dem Namensfeld und 21px über dem eigenen. / .block--form[data-variant="contact"] .field { margin-bottom: 0; display: grid; gap: .4em; } .block--form[data-variant="contact"] .field + .field { margin-top: 1.3em; } .block--form[data-variant="contact"] .fieldlabel { margin: 0; font-size: inherit; font-weight: 400; } / Zwei Spalten, wenn Platz ist: kurze Felder nebeneinander, Nachricht, Datei und alles, was kein Feld ist, über die ganze Breite. / @media (min-width: 900px) { .block--form[data-variant="contact"] :is(.form, .formgroup) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.2em; row-gap: 1.3em; } .block--form[data-variant="contact"] :is(.form, .formgroup) > :not(.field), .block--form[data-variant="contact"] .field:has(textarea, input[type="file"]) { grid-column: 1 / -1; } .block--form[data-variant="contact"] :is(.form, .formgroup) > .field + .field { margin-top: 0; } .block--form[data-variant="contact"] .formgroup > legend { margin-bottom: .2em; } } .block--form[data-variant="contact"] .fieldinput { background: color-mix(in srgb, currentColor 7%, transparent); border: 0; border-radius: 26px; padding: 0.6em 1em; color: inherit; line-height: 1.2; } .block--form[data-variant="contact"] textarea.fieldinput { height: 150px; resize: none; padding-block: 1em; } .block--form[data-variant="contact"] .fieldinput:focus { outline: 1px solid var(--contact-mark); outline-offset: 0; } .block--form[data-variant="contact"] .actions { display: grid; justify-content: center; margin-top: 20px; } .block--form[data-variant="contact"] .actions .btn { padding: 0.75em 2em; border-radius: 50px; font-size: inherit; font-weight: 400; background: transparent; color: var(--contact-mark); border: 2px solid var(--contact-mark); text-transform: uppercase; } .block--form[data-variant="contact"] .actions .btn:hover { background: var(--contact-mark); color: #ffffff; } / Das Kleingedruckte im Band in `em`: es wächst mit der Schrift oben. / .block--form[data-variant="contact"] :is(.apply-steps, .formhint, .verify-donenext, .verify-boxforget, .verifynote, .pulse-starthint) { font-size: .82em; } .block--form[data-variant="contact"] .formlegend { font-size: 1.1em; } .block--form[data-variant="contact"] :is(.fieldinput, input[type="file"], .verify-box .btn) { font-size: inherit; } .block--form[data-variant="contact"] .verify-boxtitle { font-size: 1.15em; } / Die Standorte im Band — `.contact-locations` der Vorlage: Ueberschrift in der zweiten Akzentfarbe, Spalten mit einer feinen Linie links, Name fett, dann Anschrift und Webadresse. Breiter als die Formularspalte: die Vorlage laesst sie ueber die ganze Satzbreite laufen. / .contact-places { display: grid; gap: 40px; text-align: center; margin-top: clamp(80px, 6.6vw, 100px); / Ueber die Formularspalte hinaus bis zur Satzbreite — nie schmaler als sie. / margin-inline: min(0px, calc(var(--contact-col) / 2 - min(565px, 50vw - 24px))); } .contact-placesheading { margin: 0; color: var(--contact-mark); font-family: var(--font-head, inherit); font-size: clamp(22px, 2.5vw, 38px); font-weight: 600; } .contact-placeslist { display: grid; gap: 0; } / ⚠️ DREI STANDORTE BRACHEN NACH DEM ZWEITEN UM. Gemeldet mit /de#kontakt. Die Zeile war eine Flex-Reihe mit Inhaltsbreite und 180px Abstand — bei drei Anschriften von je rund 300px passte das nicht in die 1130px des Bandes. Jetzt gleich breite Spalten, so viele wie hineinpassen. / .contact-place { display: grid; gap: 4px; padding-block: 30px; border-top: 1px solid var(--contact-mark); } .contact-place:first-child { padding-top: 0; border-top: 0; } .contact-placename { font-weight: 600; } .contact-placelines { font-style: normal; white-space: pre-line; } .contact-placeurl { color: inherit; margin-top: 16px; } @media (min-width: 768px) { .contact-places { text-align: left; } .contact-placeslist { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 40px clamp(24px, 3vw, 48px); } .contact-place { padding: 0 0 0 clamp(20px, 2.6vw, 40px); border-top: 0; border-left: 1px solid var(--contact-mark); } } / Personen. / .block--people[data-variant="list"] { grid-template-columns: 1fr; gap: 18px; } .block--people[data-variant="list"] .person { display: grid; grid-template-columns: 72px 1fr; gap: 18px; text-align: left; align-items: center; } .block--people[data-variant="list"] .person__face { margin-bottom: 0; } .block--people[data-variant="cards"] .person { background: var(--surface); border-radius: var(--radius); padding: 20px; } / Logowand. / .block--logos[data-variant="row"] { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); } .block--logos[data-variant="grid"] { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 40px; } .block--logos[data-variant="grid"] .logo-tile { height: 76px; } .block--logos[data-variant="quiet"] .logo-tile img { filter: grayscale(1); opacity: .55; } .block--logos[data-variant="quiet"] .logo-tile img:hover { filter: none; opacity: 1; } / ⚠️ EINE ZEILE, DIE MAN ZUR SEITE SCHIEBT — und ohne eine Zeile Skript, weil die oeffentliche Seite keines laedt. Wischen auf dem Telefon, waagrecht scrollen am Rollrad oder Trackpad, und die Leiste ist sichtbar gemacht, damit man ueberhaupt sieht, dass es weitergeht. Mit einer Maus die Bilder ANZUFASSEN und zu ziehen braucht Skript: das ergaenzt `site/drag_scroll.js` (eigener Code, kein fremder), und erst dann faellt der Rollbalken weg — siehe `.is-draggable` weiter unten. / .block--logos[data-variant="strip"] { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(140px, 1fr); overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 10px; scrollbar-width: thin; scrollbar-color: var(--accent, var(--purple)) transparent; } .block--logos[data-variant="strip"] .logo-tile { scroll-snap-align: start; } .block--logos[data-variant="strip"]::-webkit-scrollbar { height: 8px; } .block--logos[data-variant="strip"]::-webkit-scrollbar-track { background: transparent; } .block--logos[data-variant="strip"]::-webkit-scrollbar-thumb { background: var(--accent, var(--purple)); border-radius: 99px; } / Dasselbe fuer die Galerie: der Streifen gab es, die Leiste fehlte. / .block--gallery[data-variant="strip"] { scrollbar-width: thin; scrollbar-color: var(--accent, var(--purple)) transparent; } .block--gallery[data-variant="strip"]::-webkit-scrollbar { height: 8px; } .block--gallery[data-variant="strip"]::-webkit-scrollbar-track { background: transparent; } .block--gallery[data-variant="strip"]::-webkit-scrollbar-thumb { background: var(--accent, var(--purple)); border-radius: 99px; } / ⚠️ ZIEHEN STATT ROLLBALKEN — ABER NUR, WENN DAS SKRIPT LAEUFT. Gewuenscht: „ich will ein bild packen und die ganze blogliste nach links oder rechts schieben können … mit dem rollbalken (der übrigens weg sollte)." `is-draggable` setzt `site/drag_scroll.js`. Ohne Skript fehlt die Klasse, und der Rollbalken bleibt das Bedienelement, das er vorher war. / body.site[data-layout="haus"] .stream.is-draggable, .block--logos[data-variant="strip"].is-draggable, .block--gallery[data-variant="strip"].is-draggable, .block--teasers[data-variant="carousel"] .teasersgrid.is-draggable { scrollbar-width: none; padding-bottom: 0; cursor: grab; } body.site[data-layout="haus"] .stream.is-draggable::-webkit-scrollbar, .block--logos[data-variant="strip"].is-draggable::-webkit-scrollbar, .block--gallery[data-variant="strip"].is-draggable::-webkit-scrollbar, .block--teasers[data-variant="carousel"] .teasersgrid.is-draggable::-webkit-scrollbar { display: none; } / Waehrend des Ziehens rastet nichts ein, und kein Text wird markiert. / .is-draggable.is-dragging { scroll-snap-type: none !important; cursor: grabbing; user-select: none; } .is-draggable img { -webkit-user-drag: none; } / Standorte. / .block--locations[data-variant="list"] { grid-template-columns: 1fr; gap: 18px; } / ⚠️ ABGELESEN, NICHT ERFUNDEN — netsuisse.com setzt die Standorte als Spalten mit einer feinen Linie in der Akzentfarbe LINKS und dem Namen in derselben Farbe darueber. Auf dem Telefon wandert die Linie nach OBEN; genau so macht es die Vorlage, und genau so steht es unten im Telefonabschnitt. / .block--locations[data-variant="ruled"] { gap: clamp(28px, 5vw, 80px); } .block--locations[data-variant="ruled"] .place { padding-left: clamp(16px, 2vw, 32px); border-left: 1px solid var(--accent, var(--purple)); } .block--locations[data-variant="ruled"] .placetitle { color: var(--accent, var(--purple)); } / Firmen. / .block--companies[data-variant="cards"] .firm { background: var(--surface); border-radius: var(--radius); padding: 22px 24px; } / Dieselbe Linie wie bei den Standorten — es ist dasselbe Bild. / .block--companies[data-variant="ruled"] .companiesgrid { gap: clamp(28px, 5vw, 80px); } .block--companies[data-variant="ruled"] .firm { padding-left: clamp(16px, 2vw, 32px); border-left: 1px solid var(--accent, var(--purple)); } .block--companies[data-variant="ruled"] .firmname { color: var(--accent, var(--purple)); } .block--companies[data-variant="list"] .companiesgrid { grid-template-columns: 1fr; gap: 22px; } .block--companies[data-variant="list"] .firm { display: grid; grid-template-columns: 140px 1fr; gap: 24px; align-items: start; padding-top: 22px; border-top: 1px solid var(--line); } .block--companies[data-variant="list"] .firm:first-child { padding-top: 0; border-top: 0; } .block--companies[data-variant="list"] .firmlogo { grid-row: span 4; } / Mitarbeitende, dieselben drei Bauformen wie die Firmen — und jede muss sich von den anderen UNTERSCHEIDEN. Eine Bauform, die nichts aendert, ist keine: im Bauformschirm standen einmal neun Paare pixelgleich nebeneinander. / .block--team[data-variant="cards"] .person-card { background: var(--surface); border-radius: var(--radius); padding: 0 0 20px; overflow: hidden; } .block--team[data-variant="cards"] .person-cardbody { padding-inline: 20px; } .block--team[data-variant="cards"] .person-cardface { margin-bottom: 16px; border-radius: 0; } / Die Linie in der Akzentfarbe, wie bei Standorten und Firmen — und das Bild klein daneben statt gross darueber: sonst ist es dieselbe Karte mit Strich. / .block--team[data-variant="ruled"] .teamgrid { gap: clamp(28px, 4vw, 56px); } .block--team[data-variant="ruled"] .person-card { display: grid; grid-template-columns: 72px 1fr; gap: 16px; text-align: left; padding-left: clamp(14px, 1.6vw, 24px); border-left: 1px solid var(--accent, var(--purple)); } .block--team[data-variant="ruled"] .person-cardface { margin: 0; border-radius: 50%; } .block--team[data-variant="ruled"] .person-cardbody { align-self: center; } / Eine Zeile je Mensch: fuer eine Geschaeftsleitung mit langer Vita. / .block--team[data-variant="list"] .teamgrid { grid-template-columns: 1fr; gap: 0; } .block--team[data-variant="list"] .person-card { display: grid; grid-template-columns: 140px 1fr; gap: 24px; align-items: start; text-align: left; padding: 22px 0; border-top: 1px solid var(--line); } .block--team[data-variant="list"] .person-card:first-child { padding-top: 0; border-top: 0; } .block--team[data-variant="list"] .person-cardface { margin: 0; } / Kacheln — die Handschrift der Blogliste (`.stream .teaser` im Haus). ⚠️ ABGELESEN, NICHT NACHEMPFUNDEN: auf netsuisse.com teilen `.team-item` und `.blog-item` dasselbe Muster. Bild im Format 1.3 (`.image-block { aspect-ratio: 1.3 }`), darunter EINE Flaeche in `#f4f2f4` mit 50–60px Polster, Name und Funktion in der Signalfarbe (`.content-top { color: #a020f0 }`, die Funktion mit 400), die Vita darunter. Zwischen 768 und 1300px steht das Bild links auf 40 % neben dem Text (`flex: 0 0 40%`), darueber drei Spalten. Die grosse Ecke wie in der Blogliste: jede erste Karte einer Dreiergruppe oben links am Bild, jede dritte unten rechts an der Flaeche. Farben aus den Merkmalen der Website, nie als Zahl. / .block--team[data-variant="tiles"] .teamgrid { gap: 30px; } .block--team[data-variant="tiles"] .person-card { display: flex; flex-direction: column; text-align: center; } .block--team[data-variant="tiles"] .person-cardface { aspect-ratio: 1.3; margin: 0; border-radius: 0; background: var(--surface, #f4f2f4); } .block--team[data-variant="tiles"] .person-cardbody { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; background: var(--surface, #f4f2f4); padding: clamp(40px, 4vw, 50px) clamp(30px, 4vw, 60px); overflow: hidden; } .block--team[data-variant="tiles"] .person-cardbody > { margin: 0; } .block--team[data-variant="tiles"] .person-cardname { font-family: var(--font-head, inherit); font-size: clamp(22px, 2.2vw, 32px); font-weight: 600; line-height: 1.2; text-wrap: balance; color: var(--accent, var(--purple)); } .block--team[data-variant="tiles"] .person-cardrole { font-family: var(--font-head, inherit); font-size: clamp(18px, 1.6vw, 24px); font-weight: 400; line-height: 1.25; margin-bottom: 10px; } .block--team[data-variant="tiles"] .person-cardvita { color: var(--ink); font-size: clamp(16px, 1.2vw, 18px); line-height: 1.55; } .block--team[data-variant="tiles"] .person-card:first-child .person-cardface { border-top-left-radius: 150px; } .block--team[data-variant="tiles"] .person-card:last-child .person-cardbody { border-bottom-right-radius: 150px; } @media (min-width: 768px) { .block--team[data-variant="tiles"] .person-card:first-child .person-cardface { border-top-left-radius: 200px; } .block--team[data-variant="tiles"] .person-card:last-child .person-cardbody { border-bottom-right-radius: 200px; } } /* ⚠️ EINE ODER ZWEI KARTEN STEHEN IN DER MITTE. Gemeldet fuer das Management mit einer Person: die Karte klebte links in einem Raster fuer drei. Die Karten behalten die Breite, die sie im Dreierraster haetten — eine einzelne Karte ueber die ganze Seite waere ein Plakat. / @media (min-width: 1100px) { .block--team[data-variant="tiles"] .teamgrid:has(> .person-card:only-child) { grid-template-columns: minmax(0, calc((100% - 60px) / 3)); justify-content: center; } .block--team[data-variant="tiles"] .teamgrid:has(> .person-card:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, calc((100% - 60px) / 3))); justify-content: center; } } @media (min-width: 768px) and (max-width: 1099px) { .block--team[data-variant="tiles"] .teamgrid { grid-template-columns: 1fr; } .block--team[data-variant="tiles"] .person-card { flex-direction: row; text-align: left; } .block--team[data-variant="tiles"] .person-cardface { flex: 0 0 40%; aspect-ratio: auto; min-height: 280px; } .block--team[data-variant="tiles"] .person-cardbody { align-items: flex-start; justify-content: center; } } / Stellen als Karten. Dieselbe Handschrift wie Blogliste und Kacheln: EINE Flaeche je Karte, Titel in der Signalfarbe, die grosse Ecke an jeder ersten und dritten Karte einer Dreiergruppe. Die Eckdaten stehen als kleine Beschriftung ueber ihrem Wert — so liest man drei Stellen quer. / .jobs-page { margin-block: clamp(24px, 4vw, 60px); } body.site[data-layout="haus"] .jobs-page { margin-inline: calc(50% - 50vw); padding-inline: max(24px, calc(50vw - 740px)); } .jobsgrid { display: grid; grid-template-columns: 1fr; gap: 30px; } @media (min-width: 768px) { .jobsgrid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1100px) { .jobsgrid { grid-template-columns: repeat(3, 1fr); } } .job-card { display: flex; flex-direction: column; gap: 18px; min-width: 0; background: var(--surface, #f4f2f4); padding: clamp(32px, 4vw, 56px) clamp(26px, 3.5vw, 50px); overflow: hidden; } .job-card > { margin: 0; } .job-cardtitle { font-family: var(--font-head, inherit); font-size: clamp(22px, 2.2vw, 32px); font-weight: 600; line-height: 1.2; text-wrap: balance; } .job-cardtitle a { color: var(--accent, var(--purple)); text-decoration: none; } .job-cardtitle a:hover { text-decoration: underline; } .job-cardfacts { display: flex; flex-wrap: wrap; gap: 12px 28px; margin: 0; } .job-cardfact { display: grid; gap: 2px; } .job-cardfact dt { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); } .job-cardfact dd { margin: 0; font-weight: 600; color: var(--ink); } .job-cardteaser { color: var(--ink); line-height: 1.55; } .job-cardmore { margin-top: auto; padding-top: 6px; } .job-cardmore a { display: inline-block; padding: 0.75em 2em; border-radius: 50px; border: 2px solid var(--accent, var(--purple)); color: var(--accent, var(--purple)); font-size: 15px; text-decoration: none; transition: background-color .2s, color .2s; } .job-cardmore a:hover { background: var(--accent, var(--purple)); color: #ffffff; } .job-card:first-child { border-top-left-radius: 150px; } .job-card:last-child { border-bottom-right-radius: 150px; } .job-card:first-child { padding-top: clamp(70px, 8vw, 110px); } @media (min-width: 768px) { .job-card:first-child { border-top-left-radius: 200px; } .job-card:last-child { border-bottom-right-radius: 200px; } } /* Die eigene Seite einer Menschensektion: ueber die ganze Breite wie die Gruppenseite, aber ohne Grau — die Flaechen der Karten sind das Grau. / .team-page { margin-block: clamp(24px, 4vw, 60px); } body.site[data-layout="haus"] .team-page { margin-inline: calc(50% - 50vw); padding-inline: max(24px, calc(50vw - 740px)); } .team-page .block--team { max-width: none; margin: 0; } / Nur Signets: eine Logowand aus Firmen. Name als Bildunterschrift, sonst nichts — was der Baustein sonst noch traegt, blendet diese Bauform aus. / .block--companies[data-variant="marks"] .companiesgrid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); align-items: center; } .block--companies[data-variant="marks"] .firm { align-items: center; text-align: center; gap: 6px; } .block--companies[data-variant="marks"] .firmlogo { height: 64px; justify-content: center; } .block--companies[data-variant="marks"] .firmname { font-size: 14px; } .block--companies[data-variant="marks"] .firmlede, .block--companies[data-variant="marks"] .firmcontact, .block--companies[data-variant="marks"] .firmcontact-name, .block--companies[data-variant="marks"] .firmplaces { display: none; } / Verweis auf ein Netzwerk. / .block--social[data-variant="solid"] .socialbutton { background: var(--accent, var(--purple)); color: var(--canvas, #fff); } .block--social[data-variant="quiet"] .social__button { border: 0; padding-inline: 0; border-radius: 0; } / ⚠️ JEDE BAUFORM MUSS AUF EINEM TELEFON FUNKTIONIEREN — sonst ist sie keine Bauform, sondern eine Falle. Mehrspaltiges wird einspaltig, Ausbrueche bleiben (sie sind auf einem schmalen Schirm genau richtig). / @media (max-width: 720px) { .block--paragraph[data-variant="duo"] { columns: auto; } .block--gallery[data-variant="mosaic"] > :nth-child(4n+1) { grid-column: auto; grid-row: auto; } .block--teasers[data-variant="list"] .cell { grid-template-columns: 1fr; gap: 12px; } .block--people[data-variant="list"] .person { grid-template-columns: 56px 1fr; gap: 14px; } .block--columns[data-variant="wide_left"] > , .block--columns[data-variant="wide_right"] > , .block--columns[data-variant="wide_left"] > :first-child, .block--columns[data-variant="wide_right"] > :last-child { flex: 1 1 100%; } .block--quote[data-variant="card"] { padding: 20px 22px; } .block--cta[data-variant="band"] { padding-block: 32px; } } / Eine Flaeche ist ein ABSCHNITT und kein Absatz: sie laeuft ueber die ganze Breite und stellt ihren Inhalt in denselben Behaelter wie die Liste. / .block[data-ground] { margin-inline: calc(50% - 50vw); padding-block: var(--block-ground-pad); padding-inline: max(24px, calc(50vw - 740px)); / ⚠️ UND OHNE DEN RADIUS, DEN DER BAUSTEIN SELBST MITBRINGT. Ein Formular ist ein Kasten mit 12px Ecke; auf einer Flaeche nagte die vier weisse Kerben ins Band, jede genau dort, wo zwei Bausteine stossen. Welche Ecke gekappt wird, sagt `[data-corner]` — und das steht weiter unten. / border-radius: 0; } .block[data-ground="surface"] { background: var(--surface); color: var(--ink); } .block[data-ground="accent"] { background: var(--accent, var(--purple)); color: var(--on-accent); } .block[data-ground="accent2"] { background: var(--accent-2); color: var(--on-accent-2); } .block[data-ground="accent3"] { background: var(--accent-3); color: var(--on-accent-3); } .block[data-ground="accent4"] { background: var(--accent-4); color: var(--on-accent-4); } .block[data-ground="accent5"] { background: var(--accent-5); color: var(--on-accent-5); } .block[data-ground="accent6"] { background: var(--accent-6); color: var(--on-accent-6); } / Auf einer Flaeche traegt der Text ihre Farbe, auch wenn er sonst dem Thema gehoert — sonst stuende dunkler Fliesstext auf tiefem Violett. / / ⚠️ EINE BESCHRIFTUNG IST AUCH TEXT. Hier standen nur Ueberschriften, Absaetze und Listen — ein Formular auf tiefem Violett zeigte damit dunkle Feldnamen auf dunklem Grund, also gar keine. / .block[data-ground]:not([data-ground="surface"]) :is(h1, h2, h3, h4, p, li, dt, dd, label, .field__label, legend) { color: inherit; } / ⚠️ ZWEI BAUSTEINE AUF DERSELBEN FLAECHE SIND EIN BAND. Ohne das hier trennt sie der Rhythmus (`.page > * + `) und jeder traegt sein eigenes Polster — aus einem Kontaktabschnitt auf tiefem Violett wurden drei Streifen mit dem Papier der Seite dazwischen. Genau daran scheitert sonst jede Sektion, die aus mehr als einem Baustein besteht (CmsSection). Acht einzelne Regeln und keine allgemeine: CSS kann den Wert zweier Geschwister nicht vergleichen. Wer einen Grund ergaenzt, ergaenzt hier eine Zeile — `sections_test.rb` haelt das fest. / .block[data-ground="surface"] + .block[data-ground="surface"] { margin-top: 0; padding-block-start: 0; } .block[data-ground="accent"] + .block[data-ground="accent"] { margin-top: 0; padding-block-start: 0; } .block[data-ground="accent2"] + .block[data-ground="accent2"] { margin-top: 0; padding-block-start: 0; } .block[data-ground="accent3"] + .block[data-ground="accent3"] { margin-top: 0; padding-block-start: 0; } .block[data-ground="accent4"] + .block[data-ground="accent4"] { margin-top: 0; padding-block-start: 0; } .block[data-ground="accent5"] + .block[data-ground="accent5"] { margin-top: 0; padding-block-start: 0; } .block[data-ground="accent6"] + .block[data-ground="accent6"] { margin-top: 0; padding-block-start: 0; } /* Die gekappte Ecke. `overflow: hidden`, damit ein Bild darin ihr folgt. / .block[data-corner] { overflow: hidden; } .block[data-corner="tl"] { border-top-left-radius: var(--block-corner); } .block[data-corner="tr"] { border-top-right-radius: var(--block-corner); } .block[data-corner="bl"] { border-bottom-left-radius: var(--block-corner); } .block[data-corner="br"] { border-bottom-right-radius: var(--block-corner); } .block[data-corner="t"] { border-top-left-radius: var(--block-corner); border-top-right-radius: var(--block-corner); } .block[data-corner="b"] { border-bottom-left-radius: var(--block-corner); border-bottom-right-radius: var(--block-corner); } / --- Karussell-Knoepfe unter einer Liste ------------------------------------ ⚠️ OHNE SKRIPT, UND DESHALB EINE LEISTE MIT ANKERN. Verlangt: „und mit karussel buttons untendran auch noch" — netsuisse.com setzt dort einen Swiper (`.blog-section .swiper-pagination { position: relative; margin-top: 100px }`), also JavaScript. Die oeffentliche Seite von Reach laedt keines: das ist die Zusage, dass eine Pressemitteilung auch dort lesbar ist, wo Skripte blockiert sind. `scroll-snap` und ein Anker je Karte tun dasselbe — springen, wischen, tasten — und tun es auch dann, wenn nichts laedt. ⚠️ NUR IM HAUS UND NUR AB DER BREITE, AB DER MEHRERE KARTEN NEBENEINANDER STEHEN. Auf einem Telefon ist die Liste eine Liste; dort waeren zwanzig Punkte unter einer Spalte eine Zumutung. / .streamdots { display: none; } @media (min-width: 768px) { body.site[data-layout="haus"] .stream { grid-auto-flow: column; / ⚠️ WENIGER KARTEN ALS SPALTEN HEISST NICHT LEERE SPALTEN. Gefragt: „der graue hintergrund blog kommt von wo? … da ist nix hintergrund grau." Der Grauton kommt aus deren eigener Stilvorlage — `.blog-section { background-color: #f4f2f4 }`, nachgemessen. Auf netsuisse.com sieht man ihn kaum, weil dort IMMER drei weisse Karten nebeneinander stehen und ihn zudecken. Bei uns steht auf `/de/blog` genau EIN Beitrag: eine Karte auf einem Drittel, zwei Drittel Grau daneben. `minmax(…, 1fr)` loest beides: eine einzelne Karte nimmt die ganze Breite, vier rasten bei einem Drittel ein und die Leiste scrollt. / / Abzueglich des Abstands: sonst ragt die letzte sichtbare Karte um genau diesen Abstand aus der Leiste. / grid-auto-columns: minmax(calc((100% - 30px) / 2), 1fr); grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; / ⚠️ DER ROLLBALKEN WAR AUSGEBLENDET, UND DAMIT GAB ES KEIN ROLLEN. Gemeldet: „das karrusell - ich kann nicht horizontal scrollen, ich kann zwar unten auf einen punkt klicken und dann springt es mir irgendwo hin aber scrollen geht nicht." Hier stand `scrollbar-width: none` samt `::-webkit-scrollbar { display: none }`. Auf einem Telefon ist das richtig — dort wischt man. Auf einem Schreibtisch mit einer Maus ist der Rollbalken das EINZIGE Bedienelement einer waagerechten Leiste: ohne ihn bleiben Umschalt+Rad und Tastatur, und beides muss man wissen. Ein verstecktes Bedienelement ist keines. Also sichtbar, aber schmal und in der Akzentfarbe — er gehoert zur Gestaltung und nicht daneben. / scrollbar-width: thin; scrollbar-color: var(--accent, var(--purple)) transparent; padding-bottom: 10px; } body.site[data-layout="haus"] .stream::-webkit-scrollbar { height: 8px; } body.site[data-layout="haus"] .stream::-webkit-scrollbar-track { background: transparent; } body.site[data-layout="haus"] .stream::-webkit-scrollbar-thumb { background: var(--accent, var(--purple)); border-radius: 99px; } / ⚠️ EIN SPRUNG DARF DIE KARTE NICHT UNTER DIE KOPFZEILE SCHIEBEN. Ein Anker rollt sein Ziel an den oberen Rand des Fensters — bei einer mitlaufenden Kopfzeile liegt die Karte dann darunter. Das ist das „springt mir irgendwo hin", soweit es ohne Skript zu beheben ist. / body.site[data-layout="haus"] .stream > .teaser { scroll-snap-align: start; scroll-margin-top: calc(var(--logo-height, 34px) + 60px); } body.site[data-layout="haus"] .streamdots { display: flex; justify-content: center; gap: 8px; margin-top: clamp(40px, 7vw, 100px); } .streamdot { display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); opacity: .2; transition: opacity .15s ease; } .streamdot:hover, .streamdot:focus-visible, .streamdot[aria-current="true"] { opacity: 1; } .streamdot[aria-current="true"] { background: var(--accent, var(--purple)); } @media (prefers-reduced-motion: reduce) { .streamdot { transition: none; } } } @media (min-width: 1100px) { body.site[data-layout="haus"] .stream { grid-auto-columns: minmax(calc((100% - 60px) / 3), 1fr); } } / Die filterbare Liste — Stellen und Pressemitteilungen (siehe EntryFinder). Oben EINE Leiste: Suche, Firma/Standort, Jahr; darunter die Bereiche als Knoepfe. Die Zeilen sind ruhig: Ortszeile oder Eckdaten klein darueber, der Titel in der Signalfarbe, Anriss, Bereiche als Marken. Die ganze Zeile ist klickbar (der Titel spannt seinen Verweis ueber sie), die Marken sind es nicht — sonst waeren es zwei Ziele in einem. / .finder-page { margin-block: clamp(24px, 4vw, 60px); } body.site[data-layout="haus"] .finder-page { margin-inline: calc(50% - 50vw); padding-inline: max(24px, calc(50vw - 640px)); } .finder { display: grid; gap: 18px; } .finderbar { display: grid; gap: 14px; margin: 0; } .finderfields { display: flex; flex-wrap: wrap; gap: 10px; } .findersearch { position: relative; flex: 1 1 280px; display: flex; align-items: center; } .findericon { position: absolute; left: 18px; width: 20px; height: 20px; pointer-events: none; fill: none; stroke: var(--ink-soft); stroke-width: 2; stroke-linecap: round; } .findersearch input, .finderselect select { width: 100%; min-height: 52px; font: inherit; font-size: 16px; color: var(--ink); background: var(--surface, #f4f2f4); border: 2px solid transparent; border-radius: 50px; transition: border-color .15s, background-color .15s; } .findersearch input { padding: 0 22px 0 50px; } .finderselect { flex: 0 1 290px; min-width: 0; } .finderselect:has(select[name=year]) { flex-basis: 170px; } .finderselect select { appearance: none; padding: 0 44px 0 22px; cursor: pointer; text-overflow: ellipsis; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 24px) 50%, calc(100% - 19px) 50%; background-size: 5px 5px; background-repeat: no-repeat; } .findersearch input:focus, .finderselect select:focus { outline: none; border-color: var(--accent, var(--purple)); background-color: var(--canvas, #fff); } .findersubmit { min-height: 52px; padding: 0 28px; border-radius: 50px; font: inherit; font-size: 15px; cursor: pointer; border: 2px solid var(--accent, var(--purple)); background: var(--accent, var(--purple)); color: #fff; } .finder.is-live .findersubmit { display: none; } .finderchips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; } .finderchip { position: relative; } .finderchip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; } .finderchip span { display: inline-flex; align-items: center; min-height: 38px; padding: 0 16px; border-radius: 50px; font-size: 14px; color: var(--ink); border: 1.5px solid var(--line-strong); transition: background-color .15s, color .15s, border-color .15s; } .finderchip:hover span { border-color: var(--accent, var(--purple)); } .finderchip input:checked + span { background: var(--accent, var(--purple)); border-color: var(--accent, var(--purple)); color: #fff; } .finderchip input:focus-visible + span { outline: 2px solid var(--accent, var(--purple)); outline-offset: 2px; } .findercount { margin: 6px 0 0; font-size: 14px; color: var(--ink-soft); } .finderlist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); } .finderlist > .finder-row { position: relative; display: flex; align-items: center; gap: 24px; padding: clamp(20px, 2.4vw, 30px) clamp(4px, 1vw, 12px); border-bottom: 1px solid var(--line); transition: background-color .15s; } .finderlist > .finder-row:hover { background: var(--accent-wash); } .finder-rowmain { flex: 1; min-width: 0; display: grid; gap: 8px; } .finder-rowmain > { margin: 0; } .finder-rowmeta { font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); } .finder-rowtitle { font-family: var(--font-head, inherit); font-size: clamp(19px, 1.8vw, 24px); font-weight: 600; line-height: 1.25; text-wrap: balance; } .finder-rowtitle a { color: var(--accent, var(--purple)); text-decoration: none; } .finder-rowtitle a::after { content: ""; position: absolute; inset: 0; } .finder-rowtitle a:focus-visible { outline: none; } .finderlist > .finder-row:has(.finder-rowtitle a:focus-visible) { outline: 2px solid var(--accent, var(--purple)); outline-offset: -2px; } .finder-rowteaser { color: var(--ink); line-height: 1.55; max-width: 72ch; } .finder-rowtags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13px; } .finder-rowtag { padding: 3px 10px; border-radius: 50px; background: var(--surface-3); color: var(--ink); } .finder-rowcompany { color: var(--ink-soft); } /* Eine Firma in der Liste: Logo rechts in einer festen Spalte, damit die Namen untereinander bündig bleiben, egal wie breit ein Logo ist. / .finder-rowlogo-box { flex: 0 0 clamp(96px, 14vw, 180px); align-self: center; display: flex; align-items: center; justify-content: center; } .finder-rowlogo { display: block; max-height: 64px; max-width: 100%; width: auto; object-fit: contain; } .finder-rowplaces { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 14px; color: var(--ink-soft); line-height: 1.5; } .finder-rowplaces strong { color: var(--ink); font-weight: 600; margin-right: 8px; } .finder-rowarrow { flex: 0 0 auto; width: 26px; height: 26px; fill: none; stroke: var(--accent, var(--purple)); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; } .finderlist > .finder-row:hover .finder-rowarrow { transform: translateX(4px); } .finderempty { margin: 0; padding: 24px 0; color: var(--ink-soft); } .finderempty a { color: var(--accent, var(--purple)); } .finderempty--none { padding: 32px 0; font-size: 17px; } / Eine leere Sektion ohne Liste: derselbe ruhige Satz, keine Box. / .collection-empty { margin-block: clamp(24px, 4vw, 60px); padding: 32px 0; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 17px; } @media (max-width: 600px) { .finderselect { flex: 1 1 100%; } .finder-rowarrow { display: none; } .finder-rowlogo-box { flex-basis: 72px; align-self: flex-start; } .finder-rowlogo { max-height: 40px; } } / Bereiche und Firma oben auf einer Stelle oder Meldung. / .entrytags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 12px 0 0; font-size: 14px; } .entrytag { padding: 4px 12px; border-radius: 50px; background: var(--surface-3); color: var(--ink); text-decoration: none; } a.entrytag:hover { background: var(--accent, var(--purple)); color: #fff; } .entrycompany { color: var(--ink-soft); } .entrycompany a { color: inherit; } / Die Sitemap — Gruppen nebeneinander, Seiten als Baum mit feiner Linie. / .block--sitemap { display: grid; gap: 24px; } .sitemaptitle { margin: 0; } .sitemap { display: grid; gap: 28px; } .sitemapgroups { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 40px 48px; align-items: start; } @media (max-width: 900px) { .sitemapgroups { grid-template-columns: repeat(min(var(--cols, 3), 2), minmax(0, 1fr)); } } @media (max-width: 600px) { .sitemapgroups { grid-template-columns: 1fr; } } .sitemapgroup-title { margin: 0 0 14px; padding-bottom: 10px; border-bottom: 2px solid var(--accent, var(--purple)); font-size: 14px; letter-spacing: .06em; text-transform: uppercase; } .sitemapgroup-title a { color: var(--accent, var(--purple)); text-decoration: none; } .sitemapgroup-title a:hover { text-decoration: underline; } .sitemaplist, .sitemaplist ul { list-style: none; margin: 0; padding: 0; } .sitemaplist ul { margin: 4px 0 6px 4px; padding-left: 14px; border-left: 1px solid var(--line); } .sitemapitem > a { display: block; padding: 5px 0; color: var(--ink); text-decoration: none; line-height: 1.4; } .sitemapitem > a:hover { color: var(--accent, var(--purple)); } .sitemaplist ul .sitemapitem > a { font-size: .94em; color: var(--ink-soft); } .sitemaplist ul .sitemapitem > a:hover { color: var(--accent, var(--purple)); } / Die Linkliste — Zeilen mit Linie (Vorgabe) oder Karten. Die ganze Zeile ist klickbar wie in der filterbaren Liste; ein Pfeil fuehrt auf eine eigene Seite, das Fenstersymbol auf eine fremde. / .block--links { display: grid; gap: 18px; } .linkstitle, .linksintro { margin: 0; } .linksintro { color: var(--ink-soft); max-width: 72ch; } .links { display: grid; gap: 18px; } .linkslist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr)); column-gap: 40px; } @media (max-width: 800px) { .linkslist { grid-template-columns: 1fr; } } .link-row { position: relative; display: flex; align-items: center; gap: 20px; padding: 18px 4px; border-bottom: 1px solid var(--line); transition: background-color .15s; } .link-row:hover { background: var(--accent-wash); } .link-rowmain { flex: 1; min-width: 0; display: grid; gap: 4px; } .link-rowmain > { margin: 0; } .link-rowgroup { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); } .link-rowtitle { font-size: 18px; font-weight: 600; line-height: 1.3; } .link-rowtitle a { color: var(--accent, var(--purple)); text-decoration: none; } .link-rowtitle a::after { content: ""; position: absolute; inset: 0; } .link-rowtitle a:focus-visible { outline: none; } .link-row:has(.link-rowtitle a:focus-visible) { outline: 2px solid var(--accent, var(--purple)); outline-offset: -2px; } .link-rowtext { color: var(--ink); line-height: 1.5; } .link-rowicon { flex: 0 0 auto; width: 22px; height: 22px; fill: none; stroke: var(--accent, var(--purple)); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; } .link-row:hover .link-rowicon { transform: translateX(3px); } .block--links[data-variant="cards"] .linkslist { gap: 20px; } .block--links[data-variant="cards"] .link-row { align-items: flex-start; padding: 28px 30px; border: 0; background: var(--surface, #f4f2f4); } .block--links[data-variant="cards"] .link-row:hover { background: var(--surface-3); } .block--links[data-variant="cards"] .link-row:first-child { border-top-left-radius: 60px; padding-top: 40px; } .block--links[data-variant="cards"] .link-row:last-child { border-bottom-right-radius: 60px; } /* Die Karte über der Gruppe — siehe public/_company_map. Kacheln und Nadeln stehen in Prozent, der Rahmen hält das Seitenverhältnis von Geo::StaticMap: so schrumpft die Karte mit der Seite und jede Nadel bleibt auf ihrem Ort. / .company-map { margin: 0 calc(50% - 50vw) clamp(24px, 4vw, 48px); padding-inline: max(24px, calc(50vw - 740px)); } .company-mapframe { position: relative; overflow: hidden; aspect-ratio: 1200 / 520; max-width: 100%; border-radius: var(--radius, 12px); background: #e8e4e0; } .company-maptile { position: absolute; display: block; max-width: none; user-select: none; -webkit-user-drag: none; } / Ein Ort: eine Nadel, und am Ort mehrerer Firmen eine Zahl und eine Liste. Ohne Skript ist der Ort ein
, mit Skript ein Knopf. / .company-mapplace { position: absolute; width: 0; height: 0; z-index: 1; } .company-mapplace[open], .company-mapplace.is-open { z-index: 3; } .company-mappin { position: absolute; left: -9px; top: -18px; width: 18px; height: 18px; padding: 0; border: 0; list-style: none; cursor: pointer; font: inherit; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--accent, #a020f0); box-shadow: 0 0 0 3px #fff, 0 3px 10px rgba(0, 0, 0, .35); } .company-mappin::-webkit-details-marker { display: none; } .company-mappin::marker { content: ""; } .company-mappin:focus-visible { outline: 3px solid var(--ink, #1b1420); outline-offset: 3px; } .company-mapcount { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(45deg); font-size: 10px; font-weight: 700; line-height: 1; color: #fff; } .company-mapplace:has(.company-mapcount) .company-mappin { left: -12px; top: -24px; width: 24px; height: 24px; } .company-maplabel { position: absolute; left: 22px; top: -4px; transform: rotate(45deg); transform-origin: left top; white-space: nowrap; font-size: 12px; font-weight: 600; line-height: 1; color: var(--ink, #1b1420); background: rgba(255, 255, 255, .92); padding: 4px 7px; border-radius: 6px; opacity: 0; pointer-events: none; transition: opacity .15s; } .company-map--few .company-maplabel, .company-mappin:hover .company-maplabel { opacity: 1; } .company-mapplace[open] .company-maplabel, .company-mapplace.is-open .company-maplabel { opacity: 0; } .company-mapcallout { position: absolute; left: 16px; top: 6px; margin: 0; padding: 8px 0; list-style: none; min-width: 200px; max-width: min(300px, 70vw); max-height: 220px; overflow: auto; background: #fff; color: var(--ink, #1b1420); border-radius: 10px; box-shadow: 0 8px 28px rgba(0, 0, 0, .22); font-size: 14px; line-height: 1.3; cursor: auto; } .company-mapplace--left .company-mapcallout { left: auto; right: 16px; } .company-mapplace--up .company-mapcallout { top: auto; bottom: 24px; } .company-mapcallout li { display: grid; gap: 2px; padding: 7px 14px; } .company-mapcallout li + li { border-top: 1px solid rgba(0, 0, 0, .08); } .company-mapname { font-weight: 600; color: inherit; } a.company-mapname { text-decoration: underline; text-underline-offset: 2px; } .company-mapwhere { font-size: 12px; color: var(--ink-soft, #6b6470); } / Mit Skript: verschiebbar, zoombar, auf dem Telefon höher. / .company-map.is-live .company-mapframe { cursor: grab; touch-action: none; user-select: none; } .company-map.is-live .company-mapframe.is-dragging { cursor: grabbing; } .company-maptiles, .company-mappins { position: absolute; inset: 0; } / Eigene Ebenen: die Kacheln ordnen sich darin nach Zoomstufe, und keine davon liegt je über einer Nadel. / .company-maptiles { z-index: 0; } .company-mappins { z-index: 1; } .company-mapcontrols { position: absolute; right: 12px; top: 12px; z-index: 4; display: grid; gap: 1px; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 10px rgba(0, 0, 0, .2); } .company-mapcontrol { width: 36px; height: 36px; border: 0; padding: 0; background: #fff; color: var(--ink, #1b1420); font: 600 20px/1 system-ui, sans-serif; cursor: pointer; } .company-mapcontrol:hover { background: #f1eef2; } .company-mapcontrol:focus-visible { outline: 3px solid var(--accent, #a020f0); outline-offset: -3px; } .company-maphint { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 24px; background: rgba(20, 16, 24, .45); color: #fff; font-size: 16px; font-weight: 600; text-align: center; opacity: 0; pointer-events: none; transition: opacity .2s; } .company-maphint.is-visible { opacity: 1; } @media (max-width: 700px) { .company-map.is-live .company-mapframe { aspect-ratio: 4 / 3; } / Auf dem Telefon decken sich die Beschriftungen gegenseitig und die Knöpfe zu; ein Tipp auf die Nadel zeigt den Ort. / .company-map--few .company-maplabel { opacity: 0; } } .company-mapcredit { margin-top: 6px; font-size: 11px; color: var(--ink-soft); text-align: right; } .company-mapcredit a { color: inherit; } / --- Das Telefon -------------------------------------------------------- ⚠️ GANZ AM SCHLUSS, UND ZWAR ABSICHTLICH. Die Aufbauten setzen ihre Masse an `body.site[data-layout="…"]` — dieselbe Spezifitaet wie `body.site` hier. Bei gleicher Spezifitaet gewinnt, was spaeter steht, und eine Medienabfrage zaehlt dafuer nicht mit. Stuende dieser Abschnitt weiter oben, behielte das Haus auf einem 360px-Schirm seine 50px Seitenpolster. / / ⚠️ DIE KOPFZEILE HATTE AUF DEM TELEFON GAR KEINE EIGENEN REGELN. Gemeldet: „die höhe der menübar ist immer noch nicht genügend feingranular einstellbar, unnd mobile sieht es ganz miserabel aus." Auf 360px standen Marke, Menü und Sprachwahl in EINER umbrechenden Zeile, mit dem Polster, das der Aufbau für einen Bildschirm gedacht hat — im Haus 44px oben und 50px an jeder Seite, also 260px Restbreite für ein Menü mit sieben Punkten. Das Ergebnis war eine halbe Bildschirmhöhe Kopfzeile, bevor der erste Satz kam. ⚠️ `body.site` DAVOR, sonst verliert die Regel. Die Polsterwerte stehen je Aufbau an `body.site[data-layout=…]` (Spezifität 0,2,0); eine Regel auf `.sitehead` allein (0,1,0) käme gar nicht an — auch nicht in einer Medienabfrage, die zählt für die Spezifität nicht mit. / @media (max-width: 720px) { / ⚠️ HIER STEHEN KEINE POLSTERWERTE MEHR. Sie standen an `body.site .sitehead` und erreichten jedes Paket nicht, das sie selbst setzt — die Werte des Pakets kommen inline im Seitenkopf und gewinnen bei gleicher Spezifitaet. Auf einem Telefon galt darum die Leiste des Schreibtischs. Jetzt sind die Werte selbst mitwachsend (`clamp`), in der Stilvorlage wie in jedem Paket, und diese Regel kuemmert sich nur noch um das, was wirklich von der Breite abhaengt. / body.site .sitehead { gap: 10px; row-gap: 10px; min-height: 0; } / Die Marke bleibt in der ersten Zeile, das Menü bekommt die zweite: ein Menü, das sich um das Logo herumwickelt, ist keine Zeile. / body.site .sitebrand { flex: 0 1 auto; min-width: 0; } body.site .sitenav { order: 3; flex-basis: 100%; flex-wrap: wrap; row-gap: 6px; } / Die Sprachwahl bleibt oben rechts neben der Marke — sie ist ein Knopf und keine Liste, und unten stünde sie unter dem Menü wie ein Menüpunkt. / body.site .sitelangs { margin-left: auto; order: 2; } / ⚠️ EIN LOGO MIT FESTER HÖHE KANN BREITER SEIN ALS DAS TELEFON. Die Höhe ist eingestellt, die Breite ergibt sich — bei einem langen Schriftzug sind das schnell 400px, und die Seite scrollt seitwärts. / / ⚠️ UND NEBEN SPRACHKNOPF UND BURGER. Seit dem Burger teilen sich Marke, Sprachwahl und Burger EINE Zeile; 60vw liessen auf 390px keinen Platz fuer beide Knoepfe. netsuisse.com misst sein Logo dort ab 150px Breite. / body.site .sitelogo { max-width: min(42vw, 170px); height: auto; } } / Die Bausteine. ⚠️ WAS MEHRSPALTIG IST, WIRD EINSPALTIG — ausser einer Galerie: die lebt vom Nebeneinander, und ein Bild pro Zeile ist ein Stapel, kein Raster. Zwei Spalten sind auf 360px noch ein Blick und schon eine Uebersicht. / @media (max-width: 720px) { .block--gallery { grid-template-columns: repeat(2, 1fr); } / Ein Formular mit 36px Innenpolster laesst auf 360px 288px fuer die Eingabefelder — und die Beschriftung darueber bricht dann um. / .block--form { padding: 22px 18px; } .block--cta { padding: 24px 20px; gap: 14px; } / Ein Titel von 34px auf 360px sind rund neun Zeichen pro Zeile. / .entryhead h1 { font-size: clamp(24px, 7vw, 34px); } / Eine Tabelle im Fliesstext bekommt ihren eigenen Rollbereich, statt die ganze Seite seitwaerts zu schieben. / .entrybody table { display: block; overflow-x: auto; max-width: 100%; } } / ⚠️ DIE LINIE WANDERT NACH OBEN. Eine Spalte mit einer Linie links ist auf einem Telefon eine Zeile mit einem Strich davor; die Vorlage macht aus `border-left` unter 720px ein `border-top`, und sonst saehe die Gruppe aus wie eine eingerueckte Liste. ⚠️ STEHT GANZ AM SCHLUSS DER DATEI: eine Medienabfrage zaehlt fuer die Spezifitaet NICHT mit, und die Regel daneben hat dieselbe. / @media (max-width: 720px) { .block--locations[data-variant="ruled"] .place, .block--companies[data-variant="ruled"] .firm { padding-left: 0; padding-top: 18px; border-left: 0; border-top: 1px solid var(--accent, var(--purple)); } .block--companies[data-variant="list"] .firm { grid-template-columns: 1fr; gap: 12px; } .block--companies[data-variant="list"] .firmlogo { grid-row: auto; } } / Die Standorte auf dem Telefon — abgelesen wie oben: unter 768px eine SPALTE, die Linie wandert nach OBEN, 30px Luft je Standort, der erste ohne Linie. ⚠️ GANZ AM SCHLUSS, wie jede Telefonregel dieser Datei — eine Medienabfrage zaehlt fuer die Spezifitaet nicht mit. / @media (max-width: 767px) { .footplaces-list { flex-direction: column; gap: 0; } .footplace { padding: 30px 0; border-left: 0; border-top: 1px solid var(--accent, var(--purple)); } .footplace:first-child { padding-top: 0; border-top: 0; } .footplace:last-child { padding-bottom: 0; } } / --- Das Menue auf dem Telefon: ein Burger -------------------------------- ⚠️ ABGELESEN VON netsuisse.com (`.main-menu`, `header .burger-menu`): unter der Telefonbreite verschwindet das Menue hinter drei Strichen; offen liegt es als Vollbild auf dem tiefen Grund (#341539 — bei uns Palettenstelle 3, sonst tief aus dem Akzent gemischt wie `--band`), weisse Schrift, 18px, duenn (300), die Punkte linksbuendig untereinander; aus dem Burger wird ein Kreuz in der Akzentfarbe. Gemeldet war das Gegenteil: auf 390px brach das Menue unter dem Sprachknopf in zwei Zeilen um und klebte am Seitentitel. ⚠️ GANZ AM SCHLUSS, wie jede Telefonregel dieser Datei, und mit `body.site` davor — die Aufbauten setzen ihre Kopfzeile an `body.site[data-layout=…]`. ⚠️ AUCH IM EDITOR. Hier stand `:not(.site--editing)`, mit dem Grund „im Editor ist die Navigation das, was man bearbeitet" — richtig gedacht, aber die Leinwand hat seit 1.2.2 einen Geraeteschalter, und der ist genau dafuer da, die Seite so zu sehen, wie sie beim Besucher ankommt. Auf „Tablet" und „Telefon" zeigte sie dann als einzige Stelle der Welt ein offenes Menue. Gefragt: „wenn ich auf tablet und telefon klicke sehe ich leider kein burgermenü ist das in der vorschau ein bug?" — es war Absicht, und die Absicht war falsch. Bearbeitet wird das Menue auf der vollen Breite; darunter wird geschaut. / .sitemenu { display: none; } / ⚠️ 1024px UND NICHT 720px. Der Burger kam erst auf dem Telefon; auf einem Tablet stand das ganze Menue in der Leiste, waehrend netsuisse.com dort laengst aufklappt. Gemeldet: „tablet und phone sollten burger menü zeigen, machen sie auf netsuisse.com aber nicht auf netsuisse.group". 1024 ist die Querkante eines Tablets — darunter ist kein Platz fuer sechs Punkte in 17.5px mit 40px Abstand. / @media (max-width: 1024px) { body.site .sitenav { display: none; } body.site .sitemenu { display: block; order: 3; } body.site .sitehead { flex-wrap: nowrap; align-items: center; } body.site .sitelangs { order: 2; margin-left: auto; } .siteburger { list-style: none; cursor: pointer; position: relative; z-index: 102; width: 30px; height: 22px; display: block; } .siteburger::-webkit-details-marker { display: none; } .siteburger span { position: absolute; left: 0; width: 100%; height: 2px; border-radius: 10px; background: var(--accent-3, var(--ink)); transition: transform .25s ease, top .25s ease, opacity .2s ease; } .siteburger span:nth-child(1) { top: 0; } .siteburger span:nth-child(2) { top: 10px; } .siteburger span:nth-child(3) { top: 20px; } .sitemenu[open] .siteburger span { background: var(--accent, var(--purple)); } .sitemenu[open] .siteburger span:nth-child(1) { top: 10px; transform: rotate(45deg); } .sitemenu[open] .siteburger span:nth-child(2) { opacity: 0; } .sitemenu[open] .siteburger span:nth-child(3) { top: 10px; transform: rotate(-45deg); } @media (prefers-reduced-motion: reduce) { .siteburger span { transition: none; } } .sitemenu-panel { position: fixed; inset: 0; z-index: 101; overflow-y: auto; padding: 96px 24px 40px; background: var(--accent-3, color-mix(in srgb, var(--accent, var(--purple)) 26%, #17081c)); color: #ffffff; } .sitemenu-panel { display: flex; flex-direction: column; gap: 28px; } .sitemenu-langs { display: flex; gap: 6px; margin: 0; } .sitemenu-panel .sitemenu-langs a { display: inline-block; padding: .25em .6em; border: 1px solid rgb(255 255 255 / .35); border-radius: 999px; font-size: 13px; font-weight: 500; letter-spacing: .04em; } .sitemenu-panel .sitemenu-langs a.is-current { background: #ffffff; color: var(--accent-3, #17081c); border-color: #ffffff; } / Die Wortmarke steht unten: auf der dunklen Fläche weiss, auch als Logo. / .sitemenu-panel .sitemenu-brand { margin-top: auto; padding-top: 24px; border-top: 1px solid rgb(255 255 255 / .18); font-size: 22px; font-weight: 600; } .sitemenu-logo { display: block; max-height: 36px; max-width: 60%; width: auto; filter: brightness(0) invert(1); } .sitemenu-panel ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .sitemenu-panel ul ul { padding: 4px 0 4px 16px; gap: 4px; } .sitemenu-panel a { display: block; padding-block: .3em; color: inherit; text-decoration: none; font-size: 18px; font-weight: 300; } .sitemenu-panel ul ul a { font-size: 16px; opacity: .85; } .sitemenu-panel a:hover, .sitemenu-panel a:focus-visible { color: var(--accent-2, var(--accent, var(--purple))); } / Offen rollt nur das Menue, nicht die Seite dahinter. / body.site:has(.sitemenu[open]) { overflow: hidden; } / Der Seitentitel klebte am Kopf: das Haus nimmt der Hauptspalte das Polster oben (die Buehne soll bis an den Kopf reichen) — ein Sektionskopf ist aber keine Buehne. / body.site[data-layout="haus"] .section-head { padding-top: 24px; } } / Zwei kleine Felder nebeneinander — Pensum von/bis. / .fieldpair { display: flex; align-items: center; gap: 8px; } .fieldpair .field__input { flex: 1 1 0; min-width: 0; } / Reihenfolge von Hand (Firmen, Menschen) — siehe editor/entries/_table. / .order-arrows { display: inline-flex; gap: 2px; margin-right: 6px; vertical-align: middle; } .order-arrows .inline-form { display: inline; margin: 0; } .order-arrows .btn[disabled] { opacity: .3; cursor: default; } / ⚠️ DIE ANGABEN SIND EIN FORMULAR, KEIN BAUSTEIN-CALLOUT. Gemeldet an einer Firma: „hat viele felder ist aber vertikal sehr klein das ist mühsam". Der Callout war 380px breit und höchstens 640px hoch — für Logo, Kontakt, Nummern, Anschriften und Bereiche ein Guckloch. Hier: so hoch wie der Arbeitsbereich, breiter, und kurze Felder zu zweit nebeneinander. / .inspector[data-panel="profile"] { width: min(640px, calc(100% - 24px)); max-height: calc(100% - 24px); } @media (min-width: 900px) { .inspector[data-panel="profile"] .paneltab[data-tab="content"]:not([hidden]) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; align-content: start; } .inspector[data-panel="profile"] .paneltab[data-tab="content"] > { grid-column: 1 / -1; } .inspector[data-panel="profile"] .paneltab[data-tab="content"] > .field:has(> input.fieldinput:not([type="checkbox"])), .inspector[data-panel="profile"] .paneltab[data-tab="content"] > .field:has(> select.fieldinput) { grid-column: auto; } } /* Hochladen und Suchen über dem Bildwähler — siehe studio/_cover_picker. / .pickertools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; } .pickerupload { cursor: pointer; } .pickersearch { flex: 1 1 160px; min-width: 0; } .pickeritem[hidden] { display: none; } / --- Investor Relations: Berichtsarchiv, Termine, Kennzahlentabelle ------ Siehe CmsBlock::REPORT_KINDS. Alles Listen und Tabellen, ohne Skript vollständig; Filterknöpfe am Archiv sind eine Ergänzung. / .block--reports, .block--calendar, .block--figures { display: grid; gap: 14px; } .reportstitle, .calendartitle, .figures__title { margin: 0; } / Titel und Einleitung über den Anhängen — `blocks/_download`. / .downloadtitle { margin: 0 0 6px; font-size: clamp(20px, 2.2vw, 26px); } .downloadintro { margin: 0 0 14px; color: var(--ink-soft); } .reportsintro, .calendarintro { margin: 0; color: var(--ink-soft); } .reports { display: grid; gap: 22px; } .reportsyear { display: grid; gap: 8px; } .reportsyear-title { margin: 0; padding-bottom: 6px; border-bottom: 1px solid var(--line); font-size: 15px; font-variant-numeric: tabular-nums; letter-spacing: .02em; } .reportslist { margin: 0; } .calendarlist { list-style: none; margin: 0; padding: 0; display: grid; } .date-row { display: grid; grid-template-columns: 5.5rem 1fr auto; gap: 18px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); } .date-row:first-child { border-top: 1px solid var(--line); } .date-rowdate { display: grid; justify-items: start; line-height: 1.1; font-variant-numeric: tabular-nums; } .date-rowday { font-size: 30px; font-weight: 700; color: var(--accent, var(--purple)); } .date-rowmonth { font-size: 13px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; } .date-rowdate--missing { color: var(--ink-soft); } .date-rowmain { min-width: 0; } .date-rowtitle { margin: 0; font-size: 17px; } .date-rowtitle a { color: inherit; } .date-rowtext { margin: 2px 0 0; color: var(--ink-soft); font-size: 14px; } .date-rowics { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; white-space: nowrap; color: var(--accent, var(--purple)); text-decoration: none; } .date-rowics svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; } .date-rowics:hover span { text-decoration: underline; } .date-row.is-past .date-rowday { color: var(--ink-soft); font-weight: 600; } .calendarnone { margin: 0; color: var(--ink-soft); } .calendarpast { margin-top: 6px; } .calendarpast > summary { cursor: pointer; font-size: 14px; color: var(--ink-soft); padding: 8px 0; } @media (max-width: 560px) { .date-row { grid-template-columns: 4.2rem 1fr; } .date-rowics { grid-column: 2; } .date-rowics span { display: none; } .date-rowics::after { content: attr(title); } } .figuresscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .figuresscroll:focus-visible { outline: 2px solid var(--accent, var(--purple)); outline-offset: 2px; } .figures { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; } .figures th, .figures td { padding: 10px 14px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; } .figures thead th { font-size: 13px; color: var(--ink-soft); font-weight: 600; } .figures tbody th { text-align: left; font-weight: 600; white-space: normal; min-width: 9rem; } .figures th[scope="row"], .figurescorner { position: sticky; left: 0; background: var(--canvas, #fff); } .figuresunit { display: block; font-weight: 400; font-size: 13px; color: var(--ink-soft); } .figures .is-latest { font-weight: 700; } .figures thead .is-latest { color: inherit; } .figuresnote { margin: 0; font-size: 13px; color: var(--ink-soft); } / Auf dem Telefon müssen drei Jahre OHNE Rollen passen — sonst ist ausgerechnet das neueste Jahr, um das es geht, abgeschnitten. / @media (max-width: 560px) { .figures th, .figures td { padding: 9px 6px; font-size: 15px; } .figures tbody th { min-width: 0; padding-left: 0; } .figurescorner { padding-left: 0; } .figures td:last-child, .figures thead th:last-child { padding-right: 0; } } / Auf einer Fläche bleibt die Beschriftung nicht stehen: ihr Grund wäre weiss. / .block[data-ground] .figures th[scope="row"], .block[data-ground] .figures__corner { position: static; background: none; } / Partner — Baustein, Streifen unter einem Beitrag, Seite der Sektion. Siehe public/_partner. Die Logokachel ist hell und hat eine feste Höhe: Partnerlogos kommen in jedem Seitenverhältnis (wie `.logo-tile`). / .block--partners, .partners { display: grid; gap: 20px; } .partners { margin-block: clamp(32px, 5vw, 64px) 0; } .partnerstitle { margin: 0; } .partnerslede { margin: 0; max-width: 68ch; color: var(--ink-soft); line-height: 1.55; } .partnersgrid { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 32px); } .partner-card { display: flex; flex-direction: column; gap: 12px; min-width: 0; margin: 0; } .partner-cardlogo { display: grid; place-items: center; height: clamp(88px, 8vw, 116px); padding: 18px 22px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius, 14px); color: var(--ink); text-decoration: none; transition: border-color .15s, box-shadow .15s; } a.partner-cardlogo:hover { border-color: var(--accent, var(--purple)); box-shadow: 0 6px 18px rgb(0 0 0 / .06); } .partner-cardlogo img { max-height: 100%; max-width: 100%; width: auto; object-fit: contain; } .partner-cardwordmark { font-weight: 600; font-size: 17px; text-align: center; color: #1a1a1a; } .partner-cardbody { display: grid; gap: 4px; } .partner-cardbody > { margin: 0; } .partner-cardname { font-size: 17px; } .partner-cardname a { color: inherit; text-decoration: none; } .partner-cardname a:hover { color: var(--accent, var(--purple)); } .partner-cardfield { color: var(--accent, var(--purple)); font-size: 14px; } .partner-cardtext { color: var(--ink-soft); font-size: 14px; line-height: 1.5; } /* Ein helles Logo (CmsAsset#light_logo?) auf dunkler Kachel — weiss auf weiss war unsichtbar. / .partner-cardlogo.is-light-logo, .finder-rowlogo-box.is-light-logo { background: #17141a; border-color: #17141a; } .finder-rowlogo-box.is-light-logo { border-radius: 10px; padding: 8px 10px; } / ⚠️ UNGLEICH LANGE TEXTE. Gemeldet: „unterschiedlich lange texte führen zu eigenartigem layout". Die Karten einer Reihe sind gleich hoch, der Name steht immer auf derselben Höhe, und ein langer Kurzbeschrieb endet nach vier Zeilen. / .partnersgrid { align-items: stretch; } .partner-card { height: 100%; } .partner-cardbody { align-content: start; } .partner-cardtext { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; } .partner-cardfield { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .partners-page { margin-block: clamp(24px, 4vw, 48px); } / Nur Logos: die Kacheln ohne Name und Text darunter. / .block--partners[data-variant="marks"] .partner-cardbody { display: none; } / Zurückhaltend: graue Logos, farbig beim Überfahren. / .block--partners[data-variant="quiet"] .partner-cardlogo img { filter: grayscale(1); opacity: .6; transition: filter .2s, opacity .2s; } .block--partners[data-variant="quiet"] .partner-card:hover .partner-cardlogo img { filter: none; opacity: 1; } @media (max-width: 900px) { .partnersgrid:not([style="--cols: 2"]), .block--partners:not([style="--cols: 2"]) .partnersgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 600px) { / Dieselben Wähler wie darüber, damit die spätere Regel gewinnt. / .partnersgrid, .partnersgrid:not([style="--cols: 2"]), .block--partners:not([style="--cols: 2"]) .partnersgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } / Sprachanforderungen einer Bewerbung — Fahne, Sprache, verlangtes Niveau. / .lang-reqlabel { display: flex; flex-wrap: wrap; align-items: center; gap: .15em .5em; } .lang-flag { width: 1.4em; height: auto; border-radius: 2px; box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 18%, transparent); flex: none; } .lang-req__need { font-size: .8em; opacity: .75; } / Der Stand je Sprache eines Dokumentlaufs — Editor › Dokument einlesen. */ .document-languages { list-style: none; margin: 8px 0 12px; padding: 0; display: grid; gap: 6px; } .document-languages li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; font-size: 14px; } .document-languages strong { min-width: 2.2em; }