/* * Statischer Teil des Website-Stilblatts (oeffentliche Seite UND Editor- * Canvas). Wird auf der oeffentlichen Seite als eigene, dauerhaft * zwischenspeicherbare Datei ausgeliefert (Route websitebuilder.site.stylesheet, * Code-/Perf-Audit P4, Fund 4) — vorher standen die rund 80 KB inline in * JEDER Antwort. Alles, was vom Design der Website abhaengt (Token, Seiten- * hintergrund, body/html-Regeln), steht weiter in styles.blade.php. * * KEINE Blade-Syntax in dieser Datei: sie wird roh ausgeliefert. */ /* Abgeleitete Toene: tiefe Variante fuer Baender, Tint fuer Flaechen, farbiger Schatten fuer Karten — alles aus den zwei Markenfarben. */ :root { --wsb-primary-deep: color-mix(in srgb, var(--wsb-primary) 68%, #0b1120); --wsb-tint: color-mix(in srgb, var(--wsb-primary) 7%, var(--wsb-bg)); --wsb-tint-strong: color-mix(in srgb, var(--wsb-primary) 13%, var(--wsb-bg)); --wsb-accent-tint: color-mix(in srgb, var(--wsb-accent) 14%, var(--wsb-bg)); --wsb-card-shadow: 0 12px 32px -16px color-mix(in srgb, var(--wsb-primary) 38%, transparent); } /* Ueberschriften nutzen die Heading-Schrift der Design-Tokens. */ h1, h2, h3, h4, h5, h6 { font-family: var(--wsb-font-heading); letter-spacing: -0.015em; text-wrap: balance; } /* Bildplatz im EDITOR: flach, gestrichelt, mit Klartext. Bewusst nuechtern — eine huebsch gestaltete Flaeche wuerde als fertige Deko gelesen und nie durch ein echtes Foto ersetzt. Auf der oeffentlichen Seite erscheinen Bildbloecke ohne Bild gar nicht. */ .wsb-platzhalter-editor { display: flex; align-items: center; justify-content: center; text-align: center; padding: 1rem; font-size: .8125rem; line-height: 1.4; color: color-mix(in srgb, var(--wsb-text) 55%, transparent); background: color-mix(in srgb, var(--wsb-primary) 4%, var(--wsb-bg)); border: 1px dashed color-mix(in srgb, var(--wsb-primary) 28%, transparent); border-radius: var(--wsb-radius); } /* Sprung-Link fuer Tastatur und Screenreader: unsichtbar, bis er den Fokus bekommt — dann als Schaltflaeche oben links. */ .wsb-skip { position: absolute; left: -9999px; top: 0; z-index: 100; padding: .6rem 1rem; font-weight: 600; border-radius: 0 0 var(--wsb-radius) 0; background: var(--wsb-primary); color: var(--wsb-primary-contrast); } .wsb-skip:focus { left: 0; } /* Einheitliche Schaltflaechen-Geste: Tiefe + sanfter Lift. */ .wsb-btn { display: inline-block; font-weight: 600; border-radius: var(--wsb-radius); box-shadow: 0 8px 22px -10px color-mix(in srgb, var(--wsb-primary) 55%, transparent); transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease; } .wsb-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -12px color-mix(in srgb, var(--wsb-primary) 60%, transparent); } /* Buehnen-Varianten. Die Komposition gehoert zur Vorlage, nicht zum Baustein — vorher rendete jede Vorlage denselben zentrierten Text auf einer Flaeche, weshalb acht Vorlagen wie eine wirkten. */ .wsb-hero--left .wsb-hero-text { max-width: 62ch; } .wsb-hero--editorial .wsb-hero-text h1 { letter-spacing: -0.035em; } .wsb-hero--editorial .wsb-hero-text > :not(h1) { max-width: 52ch; margin-left: auto; } .wsb-hero-split { display: grid; gap: 2.5rem; align-items: center; } @media (min-width: 900px) { .wsb-hero-split { grid-template-columns: 1.5fr 1fr; gap: 4rem; } } /* Ruhige Flaeche als zweite Haelfte — kein leerer Bildkasten. */ .wsb-hero-flaeche { display: none; min-height: 18rem; border-radius: calc(var(--wsb-radius) + 6px); background: radial-gradient(75% 85% at 25% 20%, color-mix(in srgb, var(--wsb-accent) 40%, transparent), transparent 62%), radial-gradient(70% 80% at 85% 80%, color-mix(in srgb, var(--wsb-primary) 45%, transparent), transparent 60%), color-mix(in srgb, var(--wsb-primary) 14%, var(--wsb-bg)); } @media (min-width: 900px) { .wsb-hero-flaeche { display: block; min-height: 22rem; } } /* Auf dunklen Baendern hellt die Flaeche auf statt abzudunkeln. */ /* Auf dunklen Baendern muss die Flaeche deutlich aufhellen, sonst verschwindet sie im Band und der geteilte Aufbau ist nicht lesbar. */ .wsb-on-dark .wsb-hero-flaeche { background: radial-gradient(75% 85% at 25% 20%, color-mix(in srgb, var(--wsb-accent) 62%, transparent), transparent 62%), radial-gradient(70% 80% at 82% 82%, rgba(255,255,255,.34), transparent 60%), rgba(255,255,255,.13); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); } /* Deko-Ebenen des Hero: leuchtende Farbinseln + feines Punktraster, funktionieren auf jedem Band-Hintergrund der Vorlagen. */ .wsb-hero-glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(38rem 22rem at 82% 8%, color-mix(in srgb, var(--wsb-accent) 30%, transparent), transparent 62%), radial-gradient(30rem 20rem at 8% 92%, rgba(255,255,255,.14), transparent 60%); } /* Kennzahlen auf dunklen Baendern in der Akzentfarbe — die Markenfarbe selbst kann dort im Kontrast absaufen. */ .wsb-on-dark .wsb-stat-value { color: var(--wsb-accent) !important; } .wsb-hero-grid { position: absolute; inset: 0; pointer-events: none; opacity: .5; background-image: radial-gradient(rgba(255,255,255,.18) 1px, transparent 1px); background-size: 26px 26px; -webkit-mask-image: radial-gradient(60% 60% at 50% 42%, #000, transparent); mask-image: radial-gradient(60% 60% at 50% 42%, #000, transparent); } .wsb-on-light { --wsb-text: var(--wsb-text-light); --wsb-heading: var(--wsb-heading-light); --wsb-btn-bg: var(--wsb-primary); --wsb-btn-fg: var(--wsb-primary-contrast); } .wsb-on-dark { --wsb-text: var(--wsb-text-dark); --wsb-heading: var(--wsb-heading-dark); --wsb-btn-bg: #ffffff; --wsb-btn-fg: var(--wsb-primary); } /* EIN Seitencontainer fuer alle Bloecke — eine gemeinsame linke Kante. Vorher brachte jeder Blocktyp seine eigene Breite mit (1152/1024/ 768/672px), was auf einer Seite bis zu vier verschiedene linke Kanten ergab; untereinander stehende Abschnitte sprangen sichtbar gegeneinander. Die Breite kommt aus den Design-Tokens und ist damit pro Website einstellbar. */ .wsb-container { width: 100%; max-width: var(--wsb-content-width); margin-inline: auto; padding-inline: 1.5rem; } /* Lesebreite fuer Fliesstext: begrenzt die Zeilenlaenge auf ~65 Zeichen, bleibt aber an der Kante des Seitencontainers stehen statt sich eigenstaendig zu zentrieren. */ .wsb-lesebreite { max-width: 65ch; } /* Zentrierte Baender (Hero, Handlungsaufforderung) duerfen mittig stehen — dort gibt es keine Kante, an der etwas ausreissen koennte. */ .wsb-container.ist-zentriert .wsb-lesebreite { margin-inline: auto; } /* Spalten-Layout-Engine: Reihen als Grid, auf Mobil gestapelt. */ /* Reihen sitzen im selben Raster wie einspaltige Bloecke. Ohne diese Begrenzung liefen mehrspaltige Reihen ueber die ganze Fensterbreite, waehrend die Bloecke darueber und darunter im Container standen — auf einer Seite entstanden so bis zu vier verschiedene linke Kanten. */ /* Echtes 12-Spuren-Raster. Vorher standen hier fr-Anteile aus den Spans (`3fr 3fr`), die den Platz IMMER restlos unter sich aufteilen — zwei Spalten zu je einem Viertel wurden dadurch zu Haelften. Auf Spuren belegt eine Spalte genau ihre Breite; Rest bleibt Rest. Die Startspur setzt ColumnGrid je Spalte inline. */ .wsb-row { display: grid; gap: 1.5rem; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: stretch; width: 100%; max-width: var(--wsb-content-width); margin-inline: auto; padding-inline: 1.5rem; } /* Kacheln mit eigener Flaeche schliessen nebeneinander auf gleicher Hoehe ab. Bei align-items:start endete jede Flaeche dort, wo ihr Text aufhoerte — drei verschieden hohe Kaesten in einer Reihe. Text bleibt trotzdem oben, gestreckt wird nur die Flaeche. */ .wsb-col { min-width: 0; } .wsb-col > .wsb-block-style { height: 100%; } /* Bloecke innerhalb einer Reihe fuellen ihre Spalte — ihr eigener Seitenabstand wuerde den Inhalt ein zweites Mal einruecken. */ .wsb-row .wsb-container { padding-inline: 0; max-width: none; } .wsb-col { display: flex; flex-direction: column; } /* Button-Baustein «Senkrecht in der Reihe»: der automatische obere Rand am Button-Kasten schiebt ihn ans Spaltenende. Das greift nur, wenn jeder Kasten zwischen Spalte und Button eine Flex-Saeule ist, die den Restplatz nimmt — der Stil-Wrapper auf der Seite, der Bausteinrahmen im Editor. Dank :has() bleibt jeder andere Baustein unberuehrt. */ .wsb-col > :has(> [data-wsb-valign]), .wsb-editor-col > :has(> [data-wsb-valign]), .wsb-col > :has(> .wsb-block-style > [data-wsb-valign]), .wsb-editor-col > :has(> .wsb-block-style > [data-wsb-valign]), .wsb-block-style:has(> [data-wsb-valign]) { display: flex; flex-direction: column; flex: 1 1 auto; } .wsb-editor-col:has([data-wsb-valign]) { display: flex; flex-direction: column; } /* Aufzaehlungen im zentrierten Aufruf-Band: der Kasten steht mittig, die Punkte darin links — zentrierte Punkte lesen sich nicht. */ .wsb-cta-text ul, .wsb-cta-text ol { display: inline-block; text-align: left; } /* Volle Breite: der Hintergrund fuellt den Elternkasten (main/header/ footer sind randlos), der Inhalt bleibt durch das kompensierende Padding im Inhaltsraster stehen. Bewusst 100% statt 50vw: vw zaehlt die Scrollleiste mit — die Reihe ragte ~8px ueber die Seite hinaus (Quer-Scrollen), und im Editor-Vorschau-Canvas (kein Viewport) stimmte die Rechnung gar nicht. */ .wsb-row-full { max-width: none; margin-inline: 0; padding-inline: max(1.5rem, calc((100% - var(--wsb-content-width)) / 2)); } /* Fixierte Kopfzeile. Das Kleben sitzt HIER und nicht im Navigations- Block: sticky klebt nur innerhalb seines Elternelements, und der Block weiss nicht, ob der BlockRenderer ihn in eine Reihe/Spalte verpackt hat (dann waere der Bezugsrahmen kopfzeilenhoch = wirkungslos). Dieser Wrapper ist immer ein direktes body-Kind. z-index-Korridor: Baender < 40 < Cookie-Hinweis (50) < Lightbox (60). An html/body NIE overflow ergaenzen — das setzt sticky lautlos ausser Kraft. */ .wsb-header-sticky { position: sticky; top: 0; z-index: 40; } /* Ohne eigenen Navigations-Block hat die Kopfzeile nur eine Linie — ohne Flaeche scrollt der Inhalt sichtbar hindurch. */ .wsb-header-plain.wsb-header-sticky { background-color: var(--wsb-bg); } .wsb-header-shadow.wsb-header-sticky { box-shadow: 0 6px 20px -14px rgba(0,0,0,.5); } /* Sprungmarken (Reihen-Anker) landen sonst unter der Kopfzeile. Die Hoehe misst website.js zur Laufzeit. */ @media (max-width: 640px) { .wsb-header-sticky:not(.wsb-header-sticky-mobile) { position: static; } } @media print { .wsb-header-sticky { position: static; box-shadow: none; } } /* Tablet und Handy. `!important` ist zwingend: die Platzierung steht als Inline-Stil am Element und wuerde sonst gewinnen. Die Variablen tragen die ganze Platzierung, nicht nur die Breite — sonst fiele hier jede Ausrichtung und jeder Einzug weg. ColumnGrid schreibt sie immer mit: Tablet behaelt die Desktop-Stellung, das Handy stapelt. */ @media (max-width: 1024px) { .wsb-col { grid-column: var(--wsb-col-md, auto / span 12) !important; } } @media (max-width: 768px) { .wsb-col { grid-column: var(--wsb-col-sm, auto / span 12) !important; } } /* Seitenbalken rutscht auf Mobil unter den Inhalt. */ @media (max-width: 900px) { .wsb-with-sidebar { grid-template-columns: 1fr !important; } .wsb-with-sidebar > aside { order: 2 !important; } } /* Lesbare Zeilenlaenge. Seit Bild-Text-Bloecke ohne Bild ueber die volle Breite laufen, kamen sonst 120 bis 135 Zeichen pro Zeile zusammen — bei 60 bis 75 verliert das Auge den Zeilenanfang nicht. In schmalen Spalten greift die Begrenzung ohnehin nicht, dort ist die Spalte das Mass. */ /* 58ch statt 68ch: die ch-Einheit misst die Ziffernbreite (0.60 em bei Inter), der mittlere Kleinbuchstabe liegt bei 0.50 em — 68ch ergaben real 78 bis 82 Zeichen pro Zeile statt der angestrebten 66. */ .wsb-prose { line-height: 1.7; max-width: 58ch; } /* Der Formular-Vorspann lief auf max-w-2xl (672 px) — bei der kleinen Schrift des Formulars rund 91 Zeichen pro Zeile. Zeichenbasiert passt er sich der jeweiligen Schrift an. */ .wsb-formular-vorspann { max-width: 56ch; } /* In zentrierten Baendern bleibt der Textblock mittig. */ .ist-zentriert .wsb-prose, .wsb-prose.ist-zentriert { margin-inline: auto; } /* Lesebreite aufheben: in Rasterspalten (Text fuellt die Zelle) und wenn Block oder Spalte «Maximale Breite: Voll» tragen. Die Regel steht am Dateiende noch einmal, damit sie auch die engeren Vorlagen-Masse (Praxis 46ch, Digital 48ch) schlaegt. */ .wsb-prose.wsb-prose--zelle, .wsb-block-style.ist-vollbreit .wsb-prose, .wsb-col.ist-vollbreit .wsb-prose { max-width: none; } .wsb-prose h2 { font-size: 1.5rem; font-weight: 700; margin: 1.5rem 0 .6rem; } .wsb-prose h3 { font-size: 1.25rem; font-weight: 600; margin: 1.1rem 0 .5rem; } .wsb-prose h2:first-child, .wsb-prose h3:first-child { margin-top: 0; } .wsb-prose p { margin: .65rem 0; } .wsb-prose ul { list-style: disc; padding-left: 1.5rem; margin: .65rem 0; } .wsb-prose ol { list-style: decimal; padding-left: 1.5rem; margin: .65rem 0; } .wsb-prose li { margin: .25rem 0; } .wsb-prose a { color: var(--wsb-link); text-decoration: underline; text-underline-offset: 3px; } /* Auf dunklen Baendern (Fusszeile, CTA) waere die Markenfarbe als Linkfarbe unlesbar — dort laufen Links in der hellen Textfarbe, der Unterstrich unterscheidet sie vom Fliesstext. */ .wsb-on-dark .wsb-prose a { color: var(--wsb-text-dark); } .wsb-prose blockquote { border-left: 3px solid var(--wsb-accent); padding-left: 1rem; opacity: .9; font-style: italic; margin: 1rem 0; } /* --- Kundenstimmen, Ablauf, Preisliste --------------------------- Die drei Bausteine, die eine Seite ohne ein einziges Foto tragen. Bewusst ohne Portraitbild bzw. Bildslot: sonst waeren es wieder Bildbloecke, die ohne hochgeladene Datei leer bleiben. */ /* Leistungskarten: feste Spaltenzahl statt umbrechendem Flex mit justify-content:center, das die letzte Karte allein mittig liess. Flaeche aus Tokens — bg-white war auf Cremegrund und auf dunklen Baendern schlicht falsch. */ .wsb-karten { display: grid; gap: 1.5rem; align-items: stretch; grid-template-columns: repeat(var(--wsb-karten-spalten, 3), minmax(0, 1fr)); } .wsb-karte { background: var(--wsb-bg); border: 1px solid color-mix(in srgb, var(--wsb-text) 13%, transparent); } .wsb-on-dark .wsb-karte { background: color-mix(in srgb, #fff 7%, transparent); border-color: color-mix(in srgb, #fff 18%, transparent); } @media (max-width: 900px) { .wsb-karten { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 620px) { .wsb-karten { grid-template-columns: 1fr; } } .wsb-zitate { display: grid; gap: 1.25rem; } .wsb-zitate--cards { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } /* Untereinander: Zitat links, Zuschreibung rechts — fuellt die Reihe, statt eine schmale Spalte mit halb leerer Zeile daneben zu lassen. */ .wsb-zitate--stacked { grid-template-columns: 1fr; } .wsb-zitate--stacked .wsb-zitat { flex-direction: row; align-items: baseline; gap: 2.5rem; } .wsb-zitate--stacked .wsb-zitat blockquote { flex: 1 1 auto; max-width: 62ch; } .wsb-zitate--stacked .wsb-zitat figcaption { flex: 0 0 13rem; margin: 0 0 0 auto; } .wsb-zitat { margin: 0; padding: 1.5rem 1.6rem; border-radius: var(--wsb-radius); background: color-mix(in srgb, var(--wsb-text) 4%, transparent); border: 1px solid color-mix(in srgb, var(--wsb-text) 9%, transparent); display: flex; flex-direction: column; gap: 1rem; } .wsb-zitat blockquote { margin: 0; font-size: 1.02rem; line-height: 1.65; } .wsb-zitat blockquote::before { content: '\201C'; color: var(--wsb-accent); font-size: 2.4rem; line-height: 0; vertical-align: -.35em; margin-right: .12em; } .wsb-zitat figcaption, .wsb-zitat-gross figcaption { display: flex; flex-direction: column; gap: .1rem; margin-top: auto; } .wsb-zitat-name { font-weight: 650; font-size: .92rem; } .wsb-zitat-rolle { font-size: .82rem; opacity: .62; } .wsb-zitat-gross { margin: 0; max-width: 42rem; } .ist-zentriert .wsb-zitat-gross { margin-inline: auto; text-align: center; } .wsb-zitat-gross blockquote { margin: 0 0 1.25rem; font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.28; font-weight: 600; letter-spacing: -.015em; text-wrap: balance; } .wsb-zitat-gross blockquote::before { content: '\201C'; color: var(--wsb-accent); } .wsb-schritte { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.75rem; counter-reset: none; } .wsb-schritte--row { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .wsb-schritte--list { grid-template-columns: 1fr; max-width: 62ch; gap: 1.4rem; } .ist-zentriert .wsb-schritte--list { margin-inline: auto; } .wsb-schritt { display: flex; gap: 1rem; align-items: flex-start; } .wsb-schritte--row .wsb-schritt { flex-direction: column; gap: .9rem; } .wsb-schritt-nr { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border-radius: 999px; font-weight: 700; font-size: .95rem; font-variant-numeric: tabular-nums; background: color-mix(in srgb, var(--wsb-primary) 12%, transparent); color: var(--wsb-primary); border: 1px solid color-mix(in srgb, var(--wsb-primary) 26%, transparent); } .wsb-schritt-text h3 { font-size: 1.05rem; font-weight: 650; margin: 0 0 .35rem; } .wsb-schritt-text p { margin: 0; font-size: .94rem; line-height: 1.6; opacity: .78; } .wsb-preise-gruppen { display: grid; gap: 2.5rem 3.5rem; grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); align-items: start; } .wsb-preise-gruppen .wsb-preise { max-width: none; } .wsb-preise-titel { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .16em; opacity: .55; margin: 0 0 1rem; } .wsb-preise-vorspann { margin: 0 0 1rem; font-size: .92rem; opacity: .72; max-width: 60ch; line-height: 1.6; } .ist-zentriert .wsb-preise-vorspann { margin-inline: auto; } .wsb-preise { margin: 0; max-width: 46rem; } .ist-zentriert .wsb-preise, .ist-zentriert .wsb-preise-titel, .ist-zentriert .wsb-preise-hinweis { margin-inline: auto; } .wsb-preis-zeile { display: flex; align-items: baseline; gap: 1rem; padding: .85rem 0; border-bottom: 1px solid color-mix(in srgb, var(--wsb-text) 11%, transparent); } .wsb-preis-zeile:last-child { border-bottom: 0; } .wsb-preis-zeile dt { display: flex; flex-direction: column; gap: .15rem; flex: 1 1 auto; min-width: 0; } .wsb-preis-name { font-weight: 600; } .wsb-preis-text { font-size: .88rem; opacity: .68; line-height: 1.5; } .wsb-preis-wert { margin: 0; flex: none; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--wsb-primary); } .wsb-preise-hinweis { margin: 1.25rem 0 0; font-size: .82rem; opacity: .6; max-width: 46rem; } /* Auf dunklen Baendern tragen die zarten Flaechen nicht. */ .wsb-on-dark .wsb-zitat { background: color-mix(in srgb, #fff 8%, transparent); border-color: color-mix(in srgb, #fff 16%, transparent); } .wsb-on-dark .wsb-schritt-nr { background: color-mix(in srgb, #fff 12%, transparent); color: #fff; border-color: color-mix(in srgb, #fff 28%, transparent); } .wsb-on-dark .wsb-preis-zeile { border-bottom-color: color-mix(in srgb, #fff 16%, transparent); } .wsb-on-dark .wsb-preis-wert { color: inherit; } @media (max-width: 640px) { .wsb-zitate--cards { grid-template-columns: 1fr; } .wsb-zitate--stacked .wsb-zitat { flex-direction: column; gap: 1rem; } .wsb-zitate--stacked .wsb-zitat figcaption { flex: none; } .wsb-preis-zeile { flex-direction: column; gap: .3rem; } } /* --- Typografische Haltung ------------------------------------- Displaygroessen brauchen negative Laufweite und einen engen Zeilenabstand, sonst wirken sie aufgeblasen statt gross. */ .wsb-hero-titel { line-height: 1.04; letter-spacing: -0.025em; text-wrap: balance; } .wsb-titel { line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; } /* Ein Takt statt fuenf: die Blockansichten brachten je eigene Hoehen mit (py-6 bis py-16), die sich beim Stapeln addierten. Mobil bewusst kleiner — dort standen sonst 144 px Luft zwischen zwei Abschnitten. */ :root { --wsb-abschnitt: clamp(3rem, 6vw, 5.5rem); } .wsb-abschnitt-titel { padding-top: var(--wsb-abschnitt); padding-bottom: .6rem; } /* --- «Modern»: das Planblatt ----------------------------------- Ein Generalist hat kein Branchenthema, also wird das System selbst zum Thema: alles auf eine sichtbare linke Kante registriert, jeder Abschnitt eine Position, jede Trennung eine Linie statt eines Kastens. Keine gefuellte Karte, kein Icon-Kaestchen, kein weicher Schatten, kein zentrierter Text. */ /* ---- Neue Bausteine ------------------------------------------------ Alle beziehen ihre Farben und Radien aus den Tokens der Vorlage; keiner bringt eigene Hex-Werte mit, sonst erreichte die Farbwahl der Firma sie nicht (derselbe Fehler wie frueher in den Vorlagen). */ /* Abstandhalter: eigene Hoehe fuers Handy, sonst wirkt derselbe Abstand dort schnell wie ein Loch. */ @media (max-width: 640px) { .wsb-abstand { height: var(--wsb-abstand-sm, inherit) !important; } } /* Zitat: der Strich links traegt die Aussage, kein Anfuehrungszeichen als Grafik — das laesst sich nicht markieren und nicht vorlesen. Heisst «spruch» und nicht «zitat»: `.wsb-zitat` gehoert seit jeher dem Kundenstimmen-Baustein, und alle acht Vorlagen stylen ihn. Unter demselben Namen haette dieser Baustein deren Karten-Aussehen stillschweigend geerbt — im Browser genau so passiert. */ .wsb-spruch { margin: 0; padding-left: 1.25rem; border-left: 3px solid var(--wsb-primary); } .wsb-spruch blockquote { margin: 0; font-weight: 500; line-height: 1.45; text-wrap: balance; } .wsb-spruch figcaption { margin-top: .75rem; font-size: .9rem; color: var(--wsb-text); opacity: .75; } .wsb-spruch-autor { font-weight: 600; } .wsb-spruch-rolle::before { content: " · "; opacity: .6; } .wsb-spruch--mittig { padding-left: 0; border-left: 0; text-align: center; max-width: 46rem; margin-inline: auto; } /* Icon-Liste. Das Zeichen sitzt auf der ersten Zeile, nicht mittig zum ganzen Punkt — bei zweizeiligen Eintraegen rutscht es sonst ab. */ .wsb-iconliste { list-style: none; margin: 0; padding: 0; } .wsb-iconliste li { display: grid; grid-template-columns: 1.5rem 1fr; gap: .75rem; align-items: start; line-height: 1.55; } .wsb-iconliste svg { width: 1.25rem; height: 1.25rem; margin-top: .2rem; color: var(--wsb-primary); } /* Oeffnungszeiten: Tag links, Zeit rechts, dazwischen eine Fuehrung — ohne sie ordnet das Auge bei mehreren Zeilen falsch zu. */ .wsb-zeiten { margin: 1rem 0 0; } .wsb-zeit-zeile { display: grid; grid-template-columns: 1fr auto; gap: .75rem; align-items: baseline; padding: .55rem 0; border-bottom: 1px solid var(--wsb-line, rgba(0,0,0,.08)); } .wsb-zeit-zeile:last-child { border-bottom: 0; } .wsb-zeit-zeile dt { margin: 0; } .wsb-zeit-zeile dd { margin: 0; font-variant-numeric: tabular-nums; text-align: right; } .wsb-zeit-zeile.ist-geschlossen dd { opacity: .6; font-style: italic; } .wsb-zeiten-notiz { margin-top: 1rem; font-size: .9rem; opacity: .75; } /* Tabelle. Der Rahmen scrollt, nicht die Seite. */ .wsb-tabelle-rahmen { overflow-x: auto; border-radius: var(--wsb-radius); border: 1px solid var(--wsb-line, rgba(0,0,0,.1)); } .wsb-tabelle-rahmen:focus-visible { outline: 2px solid var(--wsb-primary); outline-offset: 2px; } .wsb-tabelle { width: 100%; border-collapse: collapse; font-size: .95rem; } .wsb-tabelle caption { caption-side: top; padding: .75rem 1rem; text-align: left; font-weight: 600; color: var(--wsb-heading, var(--wsb-text)); } .wsb-tabelle th, .wsb-tabelle td { padding: .7rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--wsb-line, rgba(0,0,0,.08)); } .wsb-tabelle thead th { font-weight: 600; color: var(--wsb-heading, var(--wsb-text)); background: var(--wsb-tint); white-space: nowrap; } .wsb-tabelle tbody tr:last-child td { border-bottom: 0; } .wsb-tabelle.ist-gestreift tbody tr:nth-child(even) { background: color-mix(in srgb, var(--wsb-tint) 55%, transparent); } /* Download: Endung als Marke links, Groesse rechts. */ .wsb-downloads { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .6rem; } .wsb-downloads a { display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: center; padding: .85rem 1rem; text-decoration: none; color: inherit; border: 1px solid var(--wsb-line, rgba(0,0,0,.1)); border-radius: var(--wsb-radius); transition: border-color .15s, background-color .15s; } .wsb-downloads a:hover { border-color: var(--wsb-primary); background: var(--wsb-tint); } .wsb-download-typ { display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; padding: .35rem .5rem; font-size: .7rem; font-weight: 700; letter-spacing: .04em; border-radius: calc(var(--wsb-radius) * .6); background: var(--wsb-primary); color: #fff; } .wsb-download-text { display: grid; gap: .15rem; min-width: 0; } .wsb-download-text small { opacity: .75; } .wsb-download-meta { font-size: .8rem; opacity: .7; white-space: nowrap; } /* Kacheln: dieselbe Karte, nur gestapelt und nebeneinander. */ .wsb-downloads.ist-kacheln { grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); } .wsb-downloads.ist-kacheln a { grid-template-columns: 1fr; justify-items: start; align-content: start; gap: .5rem; padding: 1.1rem; } /* Fortschritt. */ .wsb-balken-liste { display: grid; gap: 1.1rem; } .wsb-balken-kopf { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .4rem; font-size: .95rem; } .wsb-balken-wert { font-variant-numeric: tabular-nums; opacity: .75; } .wsb-balken-spur { height: .6rem; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--wsb-primary) 14%, transparent); } .wsb-balken-fuellung { height: 100%; border-radius: inherit; background: var(--wsb-primary); } /* Countdown. Die Zahlen brauchen Ziffern gleicher Breite, sonst zappelt die Zeile im Sekundentakt. */ .wsb-countdown-felder { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.25rem; margin-top: 1.25rem; } .wsb-countdown-feld { min-width: 4.5rem; } .wsb-countdown-zahl { display: block; font-size: clamp(2rem, 5vw, 3rem); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; color: var(--wsb-primary); } .wsb-countdown-wort { display: block; margin-top: .35rem; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; opacity: .7; } .wsb-countdown-vorbei { margin-top: 1rem; font-weight: 600; color: var(--wsb-heading, var(--wsb-text)); } [x-cloak] { display: none !important; } /* Reiter ohne JavaScript: Radiofelder schalten die Inhalte. Das Raster haelt Knoepfe und Inhalte auseinander — ohne es stuende jeder Inhalt direkt hinter seinem Knopf. */ .wsb-reiter { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, max-content)); border-bottom: 1px solid var(--wsb-line, rgba(0,0,0,.12)); } .wsb-reiter-schalter { position: absolute; opacity: 0; pointer-events: none; } .wsb-reiter-knopf { grid-row: 1; padding: .7rem 1.1rem; cursor: pointer; white-space: nowrap; font-weight: 600; color: var(--wsb-text); opacity: .65; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: opacity .15s, border-color .15s; } .wsb-reiter-knopf:hover { opacity: .9; } .wsb-reiter-inhalt { grid-row: 2; grid-column: 1 / -1; display: none; padding: 1.25rem 0 .25rem; } .wsb-reiter-schalter:checked + .wsb-reiter-knopf { opacity: 1; color: var(--wsb-primary); border-bottom-color: var(--wsb-primary); } .wsb-reiter-schalter:checked + .wsb-reiter-knopf + .wsb-reiter-inhalt { display: block; } /* Tastatur: der Fokus sitzt am unsichtbaren Radiofeld, sichtbar wird er am Knopf daneben. */ .wsb-reiter-schalter:focus-visible + .wsb-reiter-knopf { outline: 2px solid var(--wsb-primary); outline-offset: -2px; } [data-wsb-vorlage="modern"] { --wsb-linie: color-mix(in srgb, var(--wsb-text) 32%, transparent); --wsb-linie-stark: color-mix(in srgb, var(--wsb-text) 55%, transparent); --wsb-marke: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace; counter-reset: wsb-position; } [data-wsb-vorlage="modern"] .wsb-abschnitt-titel { position: relative; padding-top: var(--wsb-abschnitt); } [data-wsb-vorlage="modern"] .wsb-abschnitt-titel::before { counter-increment: wsb-position; content: counter(wsb-position, decimal-leading-zero); position: absolute; top: calc(var(--wsb-abschnitt) - 1.9rem); left: 1.5rem; font-family: var(--wsb-marke); font-size: .8125rem; font-weight: 600; letter-spacing: .08em; color: var(--wsb-primary); } [data-wsb-vorlage="modern"] .wsb-abschnitt-titel::after { content: ""; position: absolute; left: 1.5rem; right: 1.5rem; top: calc(var(--wsb-abschnitt) - .75rem); border-top: 1px solid var(--wsb-linie); } /* Karten verlieren den Kasten: es bleibt die Linie oben. */ [data-wsb-vorlage="modern"] .wsb-karte { background: none; border: 0; border-top: 2px solid var(--wsb-linie-stark); border-radius: 0 !important; padding: 1.25rem 0 0; box-shadow: none !important; } [data-wsb-vorlage="modern"] .wsb-karte:hover { transform: none; } [data-wsb-vorlage="modern"] .wsb-karten { gap: 2rem 2.5rem; } /* Das getoente Piktogramm-Kaestchen lag auf allen acht Vorlagen gleich — hier tritt die Positionsnummer an seine Stelle. */ [data-wsb-vorlage="modern"] .wsb-karte > div:first-child { display: none; } [data-wsb-vorlage="modern"] .wsb-zitat { background: none; border: 0; border-top: 1px solid var(--wsb-linie); border-radius: 0; padding: 1.25rem 0 0; } [data-wsb-vorlage="modern"] .wsb-zitat blockquote::before { content: none; } [data-wsb-vorlage="modern"] .wsb-schritt-nr { background: none; border: 0; border-radius: 0; width: auto; min-width: 2.25rem; height: auto; font-family: var(--wsb-marke); font-size: .8125rem; letter-spacing: .08em; justify-content: flex-start; padding-top: .15rem; } /* Die Marke wiederholt sich eine Ebene tiefer: auf jeder Karte und jeder Stimme. Eine Signatur, die nur einmal auf der Seite auftaucht, liest sich als Zufall, nicht als System. */ [data-wsb-vorlage="modern"] .wsb-karten { counter-reset: wsb-karte; } [data-wsb-vorlage="modern"] .wsb-karte::before { counter-increment: wsb-karte; content: counter(wsb-karte, decimal-leading-zero); } [data-wsb-vorlage="modern"] .wsb-zitate { counter-reset: wsb-stimme; } [data-wsb-vorlage="modern"] .wsb-zitat::before { counter-increment: wsb-stimme; content: counter(wsb-stimme, decimal-leading-zero); } [data-wsb-vorlage="modern"] .wsb-karte::before, [data-wsb-vorlage="modern"] .wsb-zitat::before { display: block; margin-bottom: .7rem; font-family: var(--wsb-marke); font-size: .75rem; font-weight: 600; letter-spacing: .08em; color: var(--wsb-primary); } [data-wsb-vorlage="modern"] .wsb-on-dark .wsb-karte::before, [data-wsb-vorlage="modern"] .wsb-on-dark .wsb-zitat::before { color: inherit; opacity: .75; } /* Auch das Kennzahlenband registriert auf die linke Kante — verteilt ueber die volle Breite war es das einzige Element ohne Bezug dazu. */ .wsb-kennzahlen { justify-content: center; } .wsb-kennzahl { text-align: center; } [data-wsb-vorlage="modern"] .wsb-kennzahlen { justify-content: flex-start; } [data-wsb-vorlage="modern"] .wsb-kennzahl { text-align: left; } [data-wsb-vorlage="modern"] .wsb-preis-zeile { border-bottom-color: var(--wsb-linie); } /* Das Konstruktionsraster der Buehne: keine weiche Vignette, sondern zwoelf Haarlinien auf der Inhaltsbreite — das Raster IST das Layout, und man sieht, wo geteilt wurde. */ [data-wsb-vorlage="modern"] .wsb-hero-glow { display: none; } [data-wsb-vorlage="modern"] .wsb-hero-grid { opacity: 1; inset: 0 auto 0 50%; width: min(100% - 3rem, var(--wsb-content-width)); transform: translateX(-50%); background-image: repeating-linear-gradient(to right, color-mix(in srgb, #fff 16%, transparent) 0 1px, transparent 1px calc(100% / 12)); background-size: 100% 100%; -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent); mask-image: linear-gradient(to bottom, #000 55%, transparent); } /* Statt zweier Radial-Gradients, die ein Bild vortaeuschen: ein gezeichnetes Feld mit Passermarken. */ [data-wsb-vorlage="modern"] .wsb-hero-flaeche { background: color-mix(in srgb, #fff 7%, transparent); border-radius: 0; position: relative; } [data-wsb-vorlage="modern"] .wsb-hero-flaeche::before, [data-wsb-vorlage="modern"] .wsb-hero-flaeche::after { content: ""; position: absolute; width: 1.25rem; height: 1.25rem; border: 1px solid color-mix(in srgb, #fff 45%, transparent); } [data-wsb-vorlage="modern"] .wsb-hero-flaeche::before { top: .75rem; left: .75rem; border-right: 0; border-bottom: 0; } [data-wsb-vorlage="modern"] .wsb-hero-flaeche::after { bottom: .75rem; right: .75rem; border-left: 0; border-top: 0; } /* Eine linke Kante: das Abschluss-Band zentrierte als einziges. */ [data-wsb-vorlage="modern"] .wsb-container.ist-zentriert { text-align: left; } [data-wsb-vorlage="modern"] .wsb-container.ist-zentriert > *, [data-wsb-vorlage="modern"] .wsb-container.ist-zentriert .wsb-prose, [data-wsb-vorlage="modern"] .wsb-container.ist-zentriert .wsb-lesebreite { margin-inline: 0; } /* --- «Handwerk»: Material statt Zeichnung ---------------------- Bewusst das Gegenteil von «Modern»: wo dort 1px-Haarlinien und viel Weissraum eine Zeichnung ergeben, stossen hier Flaechen stumpf aneinander. Dicke Kanten, kein Radius, kein Schatten, dichter Takt — eine Werkstatt ist voll, nicht luftig. Keine Positionsnummern und kein Monospace: das ist Moderns Handschrift. */ [data-wsb-vorlage="handwerk"] { --wsb-kante: 2px solid var(--wsb-primary); --wsb-abschnitt: clamp(2.75rem, 4.5vw, 4rem); } /* Karten sind ausgeschnittene Bretter: durchgehende Kante, kein Radius, kein Schweben. */ [data-wsb-vorlage="handwerk"] .wsb-karte { border: var(--wsb-kante); border-radius: 0 !important; background: var(--wsb-bg); box-shadow: none !important; padding: 1.6rem 1.5rem; } [data-wsb-vorlage="handwerk"] .wsb-karte:hover { transform: none; } [data-wsb-vorlage="handwerk"] .wsb-karten { gap: 1rem; } /* Das Piktogramm sitzt kantig statt in einer getoenten Pille. */ [data-wsb-vorlage="handwerk"] .wsb-karte > div:first-child { border-radius: 0; border: 1px solid var(--wsb-primary); background: none; } /* Der Abschnittstitel bekommt einen Balken, keine Linie. */ [data-wsb-vorlage="handwerk"] .wsb-abschnitt-titel { position: relative; padding-left: 2.6rem; } [data-wsb-vorlage="handwerk"] .wsb-abschnitt-titel::before { content: ""; position: absolute; left: 1.5rem; top: calc(var(--wsb-abschnitt) + .1em); bottom: .9rem; width: 6px; background: var(--wsb-primary); } [data-wsb-vorlage="handwerk"] .wsb-zitat { border: var(--wsb-kante); border-radius: 0; background: none; } [data-wsb-vorlage="handwerk"] .wsb-zitat blockquote::before { content: none; } [data-wsb-vorlage="handwerk"] .wsb-schritt-nr { border-radius: 0; border: var(--wsb-kante); background: none; color: var(--wsb-primary); } /* Lamellen statt weicher Verlaufsflaeche: harte Stufen, wie aufgereihte Latten. Laeuft rechts aus dem Feld heraus. */ [data-wsb-vorlage="handwerk"] .wsb-hero-glow { display: none; } [data-wsb-vorlage="handwerk"] .wsb-hero-grid { opacity: .9; background-image: repeating-linear-gradient(90deg, color-mix(in srgb, #fff 9%, transparent) 0 3px, transparent 3px 22px); -webkit-mask-image: linear-gradient(to left, #000, transparent 62%); mask-image: linear-gradient(to left, #000, transparent 62%); } [data-wsb-vorlage="handwerk"] .wsb-hero-flaeche { border-radius: 0; background: repeating-linear-gradient(180deg, color-mix(in srgb, #fff 13%, transparent) 0 14px, color-mix(in srgb, #000 6%, transparent) 14px 28px); border: 1px solid color-mix(in srgb, #fff 30%, transparent); } /* Kennzahlenband: Vollflaeche, Zahlen gross und dicht. */ [data-wsb-vorlage="handwerk"] .wsb-stat-value { letter-spacing: -0.03em; } /* Auch Textkacheln mit eigener Flaeche bekommen die Kante — eine flaechige Kachel ohne Rand mitten unter umrandeten Karten liest sich als vergessen. */ [data-wsb-vorlage="handwerk"] .wsb-col > .wsb-block-style { border: var(--wsb-kante); } [data-wsb-vorlage="handwerk"] .wsb-col > .wsb-block-style .wsb-container { padding-inline: 1.5rem; } [data-wsb-vorlage="handwerk"] .wsb-preis-zeile { border-bottom: 1px solid var(--wsb-primary); } /* --- «Gastro»: die gesetzte Karte ------------------------------- Weder Moderns Haarlinien noch Handwerks Vollkanten: hier traegt die Schrift. Fraunces laeuft leicht statt fett — eine Displayserife im mageren Schnitt bei 68 px ist der Auftritt, den die Vorlage als zentrierte Einladung auf Farbband nie hatte. Das Weinrot steht nicht mehr hinter dem Titel, sondern dort, wo es hingehoert: unter der Speisekarte. */ [data-wsb-vorlage="gastro"] { --wsb-abschnitt: clamp(3.5rem, 6.5vw, 6rem); } [data-wsb-vorlage="gastro"] .wsb-hero-titel { font-weight: 400; letter-spacing: -0.015em; line-height: 1.02; } [data-wsb-vorlage="gastro"] .wsb-hero-glow { display: none; } /* Materialitaet statt Foto: feines Korn wie bedrucktes Papier. Bei 8 Prozent waere es ein No-op — auf einem Screenshot unsichtbar und von jeder Kompression gefressen. */ [data-wsb-vorlage="gastro"] .wsb-hero-grid { opacity: .22; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23k)' opacity='0.5'/%3E%3C/svg%3E"); -webkit-mask-image: none; mask-image: none; } /* Die Punktlinie — das Leaderraster einer gedruckten Speisekarte. Bewusst nur unter dem Buehnentitel und den Abschnittstiteln: unter jeder einzelnen Preiszeile waere sie von einer Volllinie nicht zu unterscheiden und damit blosser Aufwand. */ [data-wsb-vorlage="gastro"] .wsb-hero-text::after, [data-wsb-vorlage="gastro"] .wsb-abschnitt-titel::after { content: ""; display: block; margin-top: 1.1rem; height: 5px; background: linear-gradient(var(--wsb-primary), var(--wsb-primary)) top left / 100% 1px no-repeat, radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--wsb-accent) 85%, transparent) 1px, transparent 1.5px) bottom left / 9px 4px repeat-x; } [data-wsb-vorlage="gastro"] .wsb-abschnitt-titel { padding-bottom: .2rem; } /* Karten und Stimmen ohne Kasten: eine Karte wird gesetzt, nicht gerahmt. Der Grund traegt, die Serife traegt. */ [data-wsb-vorlage="gastro"] .wsb-karte, [data-wsb-vorlage="gastro"] .wsb-zitat { background: none; border: 0; box-shadow: none !important; padding: 0; } [data-wsb-vorlage="gastro"] .wsb-karte:hover { transform: none; } [data-wsb-vorlage="gastro"] .wsb-karten { gap: 2.25rem 3rem; } [data-wsb-vorlage="gastro"] .wsb-zitate { gap: 2rem 3rem; } /* Gruppentitel der Speisekarte in der Displayserife statt als gesperrtes Kleinversal-Etikett — das ist eine Karte, kein Formular. */ [data-wsb-vorlage="gastro"] .wsb-preise-titel { font-family: var(--wsb-font-heading); font-size: 1.5rem; font-weight: 400; text-transform: none; letter-spacing: -0.01em; opacity: 1; color: var(--wsb-heading); } /* Speisekarten-Typografie: das Gericht ist die Hauptsache, nicht eine Tabellenzeile. Name und Preis gross und in der Displayserife, die Beschreibung klein darunter — so ist eine gedruckte Karte gesetzt, und genau das fehlte, damit Gastro nach Gastro aussieht. */ [data-wsb-vorlage="gastro"] .wsb-preis-name { font-family: var(--wsb-font-heading); font-weight: 400; font-size: 1.2rem; letter-spacing: -0.01em; color: var(--wsb-heading); } [data-wsb-vorlage="gastro"] .wsb-preis-wert { font-family: var(--wsb-font-heading); font-weight: 400; font-size: 1.2rem; letter-spacing: -0.01em; } [data-wsb-vorlage="gastro"] .wsb-preis-text { font-size: .9rem; opacity: .75; } [data-wsb-vorlage="gastro"] .wsb-preis-zeile { padding: 1.05rem 0; } [data-wsb-vorlage="gastro"] .wsb-preise-titel { font-size: 1.75rem; margin-bottom: .5rem; } [data-wsb-vorlage="gastro"] .wsb-preise-vorspann { font-size: .95rem; margin-bottom: 1.4rem; } /* Die editorial-Variante rueckt alles ausser dem Titel nach rechts (Zeile 96). Fuer Digital ist das die Haltung; hier ergab es drei Kanten — Titel 244, Vorspann 534, Knopf 667. Eine gesetzte Karte hat eine Kante. */ [data-wsb-vorlage="gastro"] .wsb-hero--editorial .wsb-hero-text > :not(h1) { margin-left: 0; max-width: 46ch; } /* --- «Classic»: die gesetzte Zeitungsseite --------------------- Ihr Mittel ist die Schrift selbst, nicht Flaeche und nicht Farbe. Source Serif im LEICHTEN Schnitt bei 68 px mit engem Durchschuss — eine Zeitungsschlagzeile, kein Werbeslogan. Das war bis eben technisch gesperrt: die @font-face-Deklaration liess nur 400 bis 700 zu, obwohl die Datei 200 bis 900 traegt. Bewusst KEINE Positionsnummern (Modern), keine Vollkanten (Handwerk), keine Punktlinie (Gastro). */ [data-wsb-vorlage="classic"] { --wsb-abschnitt: clamp(3rem, 5.5vw, 4.5rem); --wsb-linie: color-mix(in srgb, var(--wsb-text) 38%, transparent); } [data-wsb-vorlage="classic"] .wsb-hero-titel { font-weight: 300; letter-spacing: -0.018em; line-height: 1.02; } [data-wsb-vorlage="classic"] .wsb-titel { font-weight: 400; letter-spacing: -0.012em; } [data-wsb-vorlage="classic"] .wsb-hero-glow, [data-wsb-vorlage="classic"] .wsb-hero-grid { display: none; } /* Der Doppelstrich unter dem Buehnentext: die Trennung, mit der eine Zeitung den Kopf vom Satzspiegel loest. Kraeftig genug, um sichtbar zu sein — die Gegenpruefung mass die alte Linie bei 1.52:1. */ [data-wsb-vorlage="classic"] .wsb-hero-text::after { content: ""; display: block; margin-top: 2rem; height: 4px; border-top: 1px solid currentColor; border-bottom: 3px double currentColor; opacity: .5; } /* Zwischentitel als Kolumnentitel: gesperrte Versalien in Messing, klein ueber dem grossen Titel — die Ordnung eines Geschaeftsberichts. */ [data-wsb-vorlage="classic"] .wsb-abschnitt-titel h2, [data-wsb-vorlage="classic"] .wsb-abschnitt-titel h3 { margin-top: .35rem; } [data-wsb-vorlage="classic"] .wsb-prose h2, [data-wsb-vorlage="classic"] .wsb-prose h3 { font-weight: 600; letter-spacing: .01em; } /* Aufzaehlungen mit Messing-Punkt statt Browser-Disc. */ [data-wsb-vorlage="classic"] .wsb-prose ul { list-style: none; padding-left: 1.2rem; } [data-wsb-vorlage="classic"] .wsb-prose ul li { position: relative; } [data-wsb-vorlage="classic"] .wsb-prose ul li::before { content: "—"; position: absolute; left: -1.2rem; color: var(--wsb-accent); font-weight: 600; } /* Stimmen ohne Kasten: ein Zitat wird in einer Zeitung eingerueckt, nicht eingerahmt. */ [data-wsb-vorlage="classic"] .wsb-zitat { background: none; border: 0; border-left: 3px solid var(--wsb-accent); border-radius: 0; padding: .2rem 0 .2rem 1.4rem; } [data-wsb-vorlage="classic"] .wsb-zitat blockquote::before { content: none; } [data-wsb-vorlage="classic"] .wsb-zitat-gross blockquote { font-weight: 300; letter-spacing: -0.015em; } [data-wsb-vorlage="classic"] .wsb-zitat-gross blockquote::before { color: var(--wsb-accent); } /* --- «Praxis»: Mut durch Reduktion ------------------------------ Die einzige der acht, deren Haltung das Weglassen ist. Keine Linie (Modern), keine Kante (Handwerk), kein Ornament (Gastro), kein Doppelstrich (Classic) — sondern die groesste Grundschrift der acht, weiche Formen und viel Luft. Fuer eine Hausarztpraxis ist das keine Zurueckhaltung, sondern Zugaenglichkeit: die Kundschaft ist im Schnitt aelter als bei jeder anderen Vorlage. Nunito Sans traegt bis 1000 — bis eben war die Achse auf 700 gekappt. */ [data-wsb-vorlage="praxis"] { --wsb-abschnitt: clamp(3.5rem, 7vw, 6.5rem); font-size: 1.0625rem; } [data-wsb-vorlage="praxis"] .wsb-hero-titel { font-weight: 700; letter-spacing: -0.022em; line-height: 1.08; } /* Lesebreite enger als die systemweiten 58ch: die ch-Einheit misst die Ziffernbreite, und die ist bei Nunito Sans breit — gemessen kamen so bis zu 91 Zeichen pro Zeile heraus, weit ueber dem Zielbereich 45 bis 75. */ [data-wsb-vorlage="praxis"] .wsb-prose, [data-wsb-vorlage="praxis"] .wsb-prose p { font-size: 1.0625rem; line-height: 1.75; } [data-wsb-vorlage="praxis"] .wsb-prose { max-width: 46ch; } [data-wsb-vorlage="praxis"] .wsb-col > .wsb-block-style .wsb-prose { max-width: none; } /* Kacheln: weiche Flaeche, keine Kante. Grosszuegig gepolstert, damit die Ruhe nicht aus Leere entsteht, sondern aus Raum um den Inhalt. */ [data-wsb-vorlage="praxis"] .wsb-col > .wsb-block-style { border-radius: var(--wsb-radius); overflow: hidden; } [data-wsb-vorlage="praxis"] .wsb-col > .wsb-block-style .wsb-container { padding: 1.9rem 1.75rem; } [data-wsb-vorlage="praxis"] .wsb-karte, [data-wsb-vorlage="praxis"] .wsb-zitat { border: 0; border-radius: var(--wsb-radius); background: color-mix(in srgb, var(--wsb-primary) 6%, var(--wsb-bg)); box-shadow: none !important; padding: 1.75rem; } [data-wsb-vorlage="praxis"] .wsb-karte:hover { transform: none; } [data-wsb-vorlage="praxis"] .wsb-zitat blockquote::before { content: none; } /* Die Ablaufnummern bleiben Kreise — die einzige Vorlage, in der die runde Form die Haltung IST statt eine Verzierung. */ [data-wsb-vorlage="praxis"] .wsb-schritt-nr { width: 3rem; height: 3rem; font-size: 1.05rem; background: color-mix(in srgb, var(--wsb-primary) 12%, var(--wsb-bg)); border: 0; } [data-wsb-vorlage="praxis"] .wsb-schritte--row { gap: 2.5rem 2rem; } [data-wsb-vorlage="praxis"] .wsb-schritt-text h3 { font-size: 1.15rem; } [data-wsb-vorlage="praxis"] .wsb-schritt-text p { font-size: 1rem; opacity: .82; } /* Keine Deko-Ebenen: eine Praxisseite hat nichts zu verbergen und nichts zu behaupten. */ [data-wsb-vorlage="praxis"] .wsb-hero-glow, [data-wsb-vorlage="praxis"] .wsb-hero-grid { display: none; } [data-wsb-vorlage="praxis"] .wsb-hero-flaeche { background: color-mix(in srgb, var(--wsb-primary) 8%, transparent); border-radius: var(--wsb-radius); } /* Akkordeon und Formular grosszuegiger — beides wird hier wirklich benutzt, nicht nur angeschaut. */ [data-wsb-vorlage="praxis"] details > summary { padding: 1.15rem 1.25rem; font-size: 1.05rem; } /* --- «Startup»: das Bento-Raster ------------------------------- Kacheln mit Flaeche statt Rand, bewusst UNGLEICH gross. Drei gleiche Kacheln sind ein Raster; Bento lebt von der Asymmetrie. Das ist das etablierte Mittel, um ohne Foto Flaeche zu fuellen — und es ist weder Moderns Linie noch Handwerks Kante noch Praxis' Weichheit. Space Grotesk traegt bis 700, die Achse war bis eben auf 400..700 gekappt. */ [data-wsb-vorlage="startup"] { --wsb-abschnitt: clamp(3rem, 5.5vw, 5rem); --wsb-kachel: color-mix(in srgb, var(--wsb-primary) 7%, var(--wsb-bg)); } [data-wsb-vorlage="startup"] .wsb-hero-titel { font-weight: 700; letter-spacing: -0.032em; line-height: 1.02; } /* Die Arbeitsproben und alle Textkacheln werden zu Bento-Feldern: Flaeche, grosszuegiger Radius, kein Rand, kein Schatten. */ [data-wsb-vorlage="startup"] .wsb-col > .wsb-block-style { border-radius: calc(var(--wsb-radius) * 1.6); overflow: hidden; } [data-wsb-vorlage="startup"] .wsb-col > .wsb-block-style .wsb-container { padding: 1.9rem 1.75rem; } [data-wsb-vorlage="startup"] .wsb-karte, [data-wsb-vorlage="startup"] .wsb-zitat { background: var(--wsb-kachel); border: 0; border-radius: calc(var(--wsb-radius) * 1.6); box-shadow: none !important; padding: 1.75rem; } [data-wsb-vorlage="startup"] .wsb-karte:hover { transform: none; } [data-wsb-vorlage="startup"] .wsb-zitat blockquote::before { content: none; } /* Das Piktogramm sitzt als eigenes kleines Feld in der Akzentfarbe — der eine leuchtende Punkt je Kachel. */ [data-wsb-vorlage="startup"] .wsb-karte > div:first-child { border-radius: calc(var(--wsb-radius) * 1.2); background: color-mix(in srgb, var(--wsb-accent) 22%, var(--wsb-bg)); color: var(--wsb-primary); } /* Die Ablaufschritte als Bento-Reihe statt als Liste mit Kreisen. */ [data-wsb-vorlage="startup"] .wsb-schritt { background: var(--wsb-kachel); padding: 1.5rem; border-radius: calc(var(--wsb-radius) * 1.6); flex-direction: column; gap: .9rem; } [data-wsb-vorlage="startup"] .wsb-schritt-nr { background: color-mix(in srgb, var(--wsb-accent) 25%, var(--wsb-bg)); color: var(--wsb-primary); border: 0; border-radius: calc(var(--wsb-radius) * 1.2); } [data-wsb-vorlage="startup"] .wsb-schritte--list { max-width: none; } [data-wsb-vorlage="startup"] .wsb-schritte--list, [data-wsb-vorlage="startup"] .wsb-schritte--row { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; } /* Keine Deko-Ebenen: die Flaechen sind der Auftritt. */ [data-wsb-vorlage="startup"] .wsb-hero-glow, [data-wsb-vorlage="startup"] .wsb-hero-grid { display: none; } [data-wsb-vorlage="startup"] .wsb-hero-flaeche { border-radius: calc(var(--wsb-radius) * 1.6); background: color-mix(in srgb, var(--wsb-accent) 16%, transparent); border: 1px solid color-mix(in srgb, var(--wsb-accent) 30%, transparent); } [data-wsb-vorlage="startup"] .wsb-kennzahl { background: var(--wsb-kachel); padding: 1.4rem 1.5rem; border-radius: calc(var(--wsb-radius) * 1.6); } [data-wsb-vorlage="startup"] .wsb-on-dark .wsb-kennzahl { background: color-mix(in srgb, #fff 8%, transparent); } [data-wsb-vorlage="startup"] .wsb-kennzahlen { gap: 1rem; } /* --- «Digital»: der Wortblock ----------------------------------- Ein Studio verkauft Gestaltung und liefert kein Foto — also traegt die Schrift allein, und zwar nicht als Zierde, sondern als Bild. Der eine Entscheid: es gibt ZWEI Grade und nichts dazwischen. Alles aus wenigen Worten — Buehne, Abschnittstitel, Seitentitel, Fallbeispiel, Leistung, Kennzahl — steht im Wortblock: Bricolage 800, eng, mit knappem Durchschuss, so gross, dass zwei bis drei Zeilen eine Masse ergeben. Alles aus Saetzen steht klein und leicht an der RECHTEN Kante. Neu ist nicht die grosse Buehne (die haben alle sieben), sondern dass der ABSCHNITTSTITEL denselben Grad hat. Keine Linie (Modern), keine Kante (Handwerk), keine Punktlinie (Gastro), kein Doppelstrich (Classic), keine Flaeche (Praxis, Startup): diese Vorlage zeichnet nichts. Die einzige Flaeche, die bleibt, ist der Knopf — Bedienelement, kein Schmuck. */ [data-wsb-vorlage="digital"] { --wsb-abschnitt: clamp(3.5rem, 7vw, 6rem); --wsb-wortblock: clamp(2.25rem, 7.2vw, 5rem); --wsb-leise: color-mix(in srgb, var(--wsb-text-light) 76%, transparent); } /* --wsb-leise MUSS je Farbmodus neu deklariert werden: ein var() in einem Custom Property wird auf dem DEKLARIERENDEN Element ersetzt, nicht beim Gebrauch. Nur auf dem body deklariert, truege das Kennzahlenband #171717 bei 76 % auf #0a0a0a — gemessen 1,71:1. Getrennt deklariert: 8,19:1 auf Weiss, 10,54:1 auf #0a0a0a. Die -light/-dark-Token stehen auf :root und gelten auch im Editor-Canvas, wo die body-Regel bedingt uebersprungen wird. */ [data-wsb-vorlage="digital"] .wsb-on-light { --wsb-leise: color-mix(in srgb, var(--wsb-text-light) 76%, transparent); } [data-wsb-vorlage="digital"] .wsb-on-dark { --wsb-leise: color-mix(in srgb, var(--wsb-text-dark) 76%, transparent); } /* Erster Grad — der Wortblock. font-size mit !important, weil hero/heading/cta die Groesse inline schreiben; der Selektor .wsb-hero .wsb-hero-titel (0,3,0) schlaegt die bestehende Regel .wsb-hero--editorial .wsb-hero-text h1 (0,2,1). Die Buehne steht eine Stufe ueber den Abschnittstiteln (6,5 gegen 5 rem): bei gleichem Grad liefe «Datenschutzerklaerung» mit gemessenen 1073 px exakt aus dem 1072-px-Satzspiegel. */ [data-wsb-vorlage="digital"] .wsb-hero .wsb-hero-titel { font-size: clamp(2.75rem, 9vw, 6.5rem) !important; } [data-wsb-vorlage="digital"] .wsb-abschnitt-titel h1, [data-wsb-vorlage="digital"] .wsb-abschnitt-titel h2, [data-wsb-vorlage="digital"] .wsb-container.ist-zentriert > h2 { font-size: var(--wsb-wortblock) !important; } [data-wsb-vorlage="digital"] .wsb-abschnitt-titel h3 { font-size: clamp(1.75rem, 3.6vw, 2.5rem) !important; } /* Durchschuss 1.06 statt 1.02: an Bricolage 800 gemessen reicht der Ae-Punkt bis 0,874 em und das g bis -0,185 em — unter 1,059 ueberlappen sie. Laufweite -0,035 em statt -0,05: das engste real vorkommende Paar (f+t) hat 0,025 em Luft, r+s hat 0,041 em; bei -0,05 em beruehren sich 11 von 85 Paaren des Beispieltextes, bei -0,035 em nur noch die f/r/t-Paare, die eine Grotesk ohnehin eng setzt. Trennung immer, nicht erst unter 640 px: «Markenauftritte» laeuft sonst auch im Desktop-Satzspiegel an. */ [data-wsb-vorlage="digital"] .wsb-hero-titel, [data-wsb-vorlage="digital"] .wsb-titel, [data-wsb-vorlage="digital"] .wsb-container.ist-zentriert > h2 { font-weight: 800; letter-spacing: -0.035em; line-height: 1.06; overflow-wrap: break-word; hyphens: auto; } /* Den Grad eine Stufe tiefer weiterreichen, damit es ein System und kein Einzelstueck ist: die zwei Arbeitsproben der Startseite und die drei Leistungen werden zu Schlagzeilen mit Fussnote. */ [data-wsb-vorlage="digital"] .wsb-prose h2, [data-wsb-vorlage="digital"] .wsb-prose h3, [data-wsb-vorlage="digital"] .wsb-karte h3, [data-wsb-vorlage="digital"] .wsb-schritt-text h3 { font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; color: var(--wsb-heading); } [data-wsb-vorlage="digital"] .wsb-prose h2 { font-size: clamp(1.9rem, 3.6vw, 2.6rem); } [data-wsb-vorlage="digital"] .wsb-prose h3, [data-wsb-vorlage="digital"] .wsb-karte h3 { font-size: clamp(1.6rem, 3vw, 2.25rem); } [data-wsb-vorlage="digital"] .wsb-schritt-text h3 { font-size: 1.35rem; } /* Zweiter Grad — die Kleinschrift. Je groesser, desto leichter: der optische Ausgleich, den Archivos Achse 100–900 erlaubt. Auf schwarzem Band eine Spur schwerer, weil helle Schrift auf dunklem Grund duenner wirkt. Zeilenlaengen an der Schrift gemessen: Archivo misst 0,573 em je Ziffer, aber 0,445 em mittleren Vorschub im deutschen Satz — 1 ch sind 1,29 Zeichen. 48ch = 62 Zeichen, 44ch = 57, 52ch = 67. Die gemeinsamen 58ch waeren 75. */ [data-wsb-vorlage="digital"] .wsb-hero-text > p { font-size: clamp(1.05rem, 1.6vw, 1.25rem); font-weight: 300; line-height: 1.55; max-width: 44ch; } [data-wsb-vorlage="digital"] .wsb-on-dark .wsb-hero-text > p { font-weight: 350; } /* Sonst haette die Buehne DREI Kanten — Titel links, Vorspann rechts, Knopf wieder links. Genau der Fehler, den der Gastro-Block oben abstellt; hier wandert der Knopf ins rechte Register. */ [data-wsb-vorlage="digital"] .wsb-hero--editorial .wsb-hero-text > div { width: fit-content; margin-left: auto; } [data-wsb-vorlage="digital"] .wsb-prose { line-height: 1.65; text-wrap: pretty; } [data-wsb-vorlage="digital"] .wsb-prose p, [data-wsb-vorlage="digital"] .wsb-prose li { color: var(--wsb-leise); } [data-wsb-vorlage="digital"] .wsb-prose strong { font-weight: 700; color: var(--wsb-heading); } /* Der Gruppentitel der Preisliste misst bei opacity .55 real 4,0:1 und liegt damit unter 4,5:1. Sonst bleibt die Preisliste unangetastet: grosser Gerichtname plus Preis in der Titelschrift ist Gastro. */ [data-wsb-vorlage="digital"] .wsb-preise-titel { opacity: 1; color: var(--wsb-leise); } /* Die zweite Kante: die Grossform laeuft ueber die volle Breite, die Kleinschrift haengt rechts. Das ist die Anlage, die die Buehne («editorial») schon hat — hier fuer die ganze Seite, und bewusst NICHT Moderns eine linke Kante, sondern zwei. Nur DIREKTE Kinder des Containers: im Bild-Text-Block und im Spalten-Block liegt .wsb-prose zwei Ebenen tiefer und wuerde sonst in seiner halben Spalte noch einmal nach rechts rutschen. Unter 900 px faellt das Register weg — der Versatz braucht Breite, sonst stehen zwei Bloecke unverbunden uebereinander. */ [data-wsb-vorlage="digital"] .wsb-container > .wsb-prose { max-width: 48ch; } [data-wsb-vorlage="digital"] .wsb-schritte--list { max-width: 52ch; } [data-wsb-vorlage="digital"] .wsb-row .wsb-container > .wsb-prose, [data-wsb-vorlage="digital"] .wsb-col .wsb-container > .wsb-prose { max-width: none; margin-left: 0; } @media (min-width: 900px) { [data-wsb-vorlage="digital"] .wsb-container > .wsb-prose, [data-wsb-vorlage="digital"] .wsb-schritte--list { margin-left: auto; } [data-wsb-vorlage="digital"] .wsb-row .wsb-container > .wsb-prose, [data-wsb-vorlage="digital"] .wsb-col .wsb-container > .wsb-prose { margin-left: 0; } } /* Auch das Abschlussband folgt dem Gesetz: Wortblock links, Fussnote rechts. Zentriert waere es das einzige zentrierte Element der Seite. */ [data-wsb-vorlage="digital"] .wsb-container.ist-zentriert { text-align: left; } [data-wsb-vorlage="digital"] .wsb-container.ist-zentriert > h2 { margin-inline: 0; } [data-wsb-vorlage="digital"] .wsb-container.ist-zentriert > p { max-width: 48ch; } @media (min-width: 900px) { [data-wsb-vorlage="digital"] .wsb-container.ist-zentriert > p { margin-left: auto; margin-right: 0; } [data-wsb-vorlage="digital"] .wsb-container.ist-zentriert > .wsb-btn { display: block; width: fit-content; margin-left: auto; } } /* Die Kennzahlen sind der zweite Wortblock. gap mit !important, weil der Baustein «gap:2rem 3.5rem» inline schreibt. Deckel 4,75 rem statt 6: Bricolage 800 misst 0,67 em je Ziffer (nicht Archivos 0,573) — bei 96 px braucht «2017» 238 px in einer 226-px-Spalte und laeuft in den Zwischenraum; bei 76 px sind es 193 px in 220 px. Limette auf #0a0a0a misst 10,0:1, das Etikett 10,5:1. */ [data-wsb-vorlage="digital"] .wsb-kennzahlen { gap: 2.5rem 4rem !important; } [data-wsb-vorlage="digital"] .wsb-kennzahl { text-align: left; } [data-wsb-vorlage="digital"] .wsb-stat-value { font-family: var(--wsb-font-heading); font-weight: 800; font-size: clamp(3rem, 6.5vw, 4.75rem); letter-spacing: -0.035em; line-height: .96; } [data-wsb-vorlage="digital"] .wsb-kennzahl > div + div { font-size: .7rem; font-weight: 600; letter-spacing: .16em; opacity: 1 !important; color: var(--wsb-leise) !important; } /* Keine Flaeche, keine Kante, kein Kaestchen: die Karte ist ein Titel mit Fussnote, die Stimme ein Absatz. Kein Radius setzen — ohne Flaeche ist er unsichtbar, und «Radius 0» gehoert Handwerk. box-shadow mit !important, weil feature_cards ihn inline UND per onmouseover setzt. translate zusaetzlich zu transform: Tailwind 4 hebt die Karte ueber die translate-Eigenschaft, transform: none allein laeuft dort ins Leere. */ [data-wsb-vorlage="digital"] .wsb-karte, [data-wsb-vorlage="digital"] .wsb-zitat { background: none; border: 0; padding: 0; box-shadow: none !important; } [data-wsb-vorlage="digital"] .wsb-karte:hover { transform: none; translate: none; } /* Trifft nur, wenn wirklich ein Piktogramm da ist — sonst ist das erste Kind das h3 und der Selektor greift nicht. */ [data-wsb-vorlage="digital"] .wsb-karte > div:first-child { display: none; } [data-wsb-vorlage="digital"] .wsb-karten { gap: 2.75rem 3rem; } [data-wsb-vorlage="digital"] .wsb-zitat blockquote::before { content: none; } [data-wsb-vorlage="digital"] .wsb-zitat blockquote { font-size: clamp(1.05rem, 1.5vw, 1.2rem); font-weight: 300; line-height: 1.6; max-width: 48ch; color: var(--wsb-leise); } /* Ohne diese Zeile bliebe im gestapelten Layout die Grundregel .wsb-zitate--stacked .wsb-zitat blockquote (0,4,0) mit 62ch stehen — gemessen 80 Zeichen pro Zeile. */ [data-wsb-vorlage="digital"] .wsb-zitate--stacked .wsb-zitat blockquote { max-width: 48ch; } [data-wsb-vorlage="digital"] .wsb-zitate--stacked .wsb-zitat { gap: 3rem; } [data-wsb-vorlage="digital"] .wsb-zitat-gross blockquote { font-weight: 300; letter-spacing: -0.012em; } [data-wsb-vorlage="digital"] .wsb-zitat-name { font-family: var(--wsb-font-heading); font-weight: 800; letter-spacing: -0.02em; font-size: 1rem; } /* Die Ablaufziffer ist kein Kreis, sondern ein Schriftgrad. Ohne fuehrende Null, ohne Monospace, ohne durchlaufenden Zaehler — das ist Moderns Handschrift. Die Farbe bewusst NICHT setzen, damit auf dunklen Baendern .wsb-on-dark .wsb-schritt-nr weiter Weiss liefert (21:1) statt Blau bei 4,06:1. */ [data-wsb-vorlage="digital"] .wsb-schritt-nr { background: none; border: 0; border-radius: 0; width: auto; min-width: 2.75rem; height: auto; font-family: var(--wsb-font-heading); font-weight: 800; font-size: clamp(1.75rem, 3vw, 2.25rem); letter-spacing: -0.035em; line-height: 1; justify-content: flex-start; padding-top: .1rem; } /* Der Knopf bleibt Flaeche — er ist Bedienelement, kein Schmuck. Ohne Schatten, Beschriftung im Wortblock-Schnitt. Weiss auf Blau bzw. Blau auf Weiss messen beide 5,17:1. */ [data-wsb-vorlage="digital"] .wsb-btn { font-family: var(--wsb-font-heading); font-weight: 800; letter-spacing: -0.02em; box-shadow: none !important; } [data-wsb-vorlage="digital"] .wsb-btn:hover { transform: translateY(-1px); } /* Der Namenszug in der Leiste ist derselbe Wortblock, nur klein. */ [data-wsb-vorlage="digital"] .wsb-nav a > span { font-family: var(--wsb-font-heading); letter-spacing: -0.05em; } /* Keine Deko-Ebene, keine Ersatzflaeche: die Buehne ist Schrift auf Grund. Und die zwei Haarlinien, die das Geruest mitbringt, fallen mit — eine Vorlage, die nichts zeichnet, darf auch die nicht haben. */ [data-wsb-vorlage="digital"] .wsb-hero-glow, [data-wsb-vorlage="digital"] .wsb-hero-grid, [data-wsb-vorlage="digital"] .wsb-hero-flaeche { display: none; } [data-wsb-vorlage="digital"] footer, [data-wsb-vorlage="digital"] header { border-top: 0; border-bottom: 0; } /* --- «Nature»: die Titelspalte ---------------------------------- Das einzige Mittel ist die Schrift. Keine Flaeche, keine Form, kein Muster: Takt (--wsb-abschnitt), Radius und Farbe bleiben, wo sie sind. Die Vorlage wirkte freundlich, aber weich, und der Grund war typografisch — alle Ueberschriften lagen im selben Mittelfeld zwischen 1.25 und 2.4 rem, die Seite hatte kein Gefaelle. Die Haltung: zwei Stimmen und keine dazwischen. Jede Ueberschrift ist ein Block — Manrope 800, Durchschuss unter 1, Laufweite bis -0.04em, begrenzt auf eine Titelspalte von 10ch. Weil ch gegen die EIGENE Schriftgroesse aufloest, bricht jede Stufe nach derselben Zeilenlaenge um: an manrope.woff2 gemessen betraegt die Ziffer bei Schnitt 800 0.674em, der mittlere Vorschub im deutschen Satz 0.5112em — abzueglich Laufweite sind das 14.3 Zeichen pro Titelzeile, von 112 px bis 23 px. Alles andere ist Gegenstimme: Schnitt 400, offen durchschossen, auf 50ch (= 64 Zeichen). Bewusst NICHT: Positionsnummern und Monospace (Modern), Vollkanten und Lattenmuster (Handwerk), Punktlinie und grosse Preistypografie (Gastro), Doppelstrich und Messingstriche (Classic), weiche Flaechen (Praxis), Kacheln (Startup). */ [data-wsb-vorlage="nature"] { --wsb-titelspalte: 10ch; } /* Die Titelstimme. hero, heading, imagetext, cta und die Kopfzeile setzen ihre font-size INLINE im Blade — dort ist !important zwingend, sonst greift keine Groesse. font-family und text-wrap kommen schon aus der h1-h6-Regel des gemeinsamen Blattes. Die 10ch sind ein Umbruchmass ZWISCHEN Woertern, kein Schnittmass DURCH sie. hyphens trennt sauber, wo der Browser deutsche Muster hat — dieses Chromium hat keine, viele Chrome-Profile ohne Component-Updater auch nicht. Ohne Netz brach «Gartenplanung» darum zu «Gartenplanun/g». Deshalb waechst der Kasten mit min-content auf das laengste Wort; der Rhythmus bleibt exakt gleich (gemessen: 5-14 Zeichen je Zeile, mit und ohne Regel), weil min-content nur greift, wenn ein einzelnes Wort ihn sprengt. overflow-wrap bleibt als letztes Netz stehen. */ [data-wsb-vorlage="nature"] .wsb-hero-titel, [data-wsb-vorlage="nature"] .wsb-abschnitt-titel > .wsb-titel, [data-wsb-vorlage="nature"] .wsb-container > h2, [data-wsb-vorlage="nature"] .grid.items-center > div > h2, [data-wsb-vorlage="nature"] .wsb-prose h2, [data-wsb-vorlage="nature"] .wsb-prose h3, [data-wsb-vorlage="nature"] .wsb-preise-titel { font-weight: 800; max-width: var(--wsb-titelspalte); -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 8 4 3; overflow-wrap: break-word; } /* min-content schlaegt max-width — der Kasten waechst also ueber die Titelspalte hinaus, wenn ein Wort es verlangt. Das ist in diesen Spalten gedeckt (Zickzack rund 570 px, Karten rund 400 px, das Abschlussband die volle Containerbreite): «Sanitaerinstallationen» misst dort 451 px und passt. NICHT fuer die Buehne: die klemmt mit overflow-hidden, ihre Schrift laeuft bis 112 px, und ein langes Wort waere dort nicht umgebrochen, sondern lautlos abgeschnitten — siehe die eigene Regel weiter unten. */ [data-wsb-vorlage="nature"] .wsb-abschnitt-titel > .wsb-titel, [data-wsb-vorlage="nature"] .wsb-container > h2, [data-wsb-vorlage="nature"] .grid.items-center > div > h2, [data-wsb-vorlage="nature"] .wsb-prose h2, [data-wsb-vorlage="nature"] .wsb-prose h3, [data-wsb-vorlage="nature"] .wsb-preise-titel { min-width: min-content; } /* Buehne. Die 62ch aus dem gemeinsamen Blatt kappen den Titel sonst bei rund 595 px — der Block wuerde zur Saeule. Die Breite regelt ab hier die Titelspalte, nicht der Textrahmen. */ [data-wsb-vorlage="nature"] .wsb-hero--left .wsb-hero-text { max-width: none; } /* Die Buehne behaelt bewusst den harten Deckel aus der Regel oben: kein min-content. Sie klemmt mit overflow-hidden, und ihre Schrift laeuft bis 112 px — ein Wort, das die Spalte sprengt, waere hier nicht umgebrochen, sondern lautlos abgeschnitten (gemessen: «Sanitaerinstallationen» faellt auf dem Handy um 109 px aus dem Bild, ein 32-Zeichen-Wort um 375 px). Ein sichtbarer Umbruch ist das kleinere Uebel als ein Titel, dem stumm das Ende fehlt. Der laengste Titelbegriff aller acht Vorlagen misst 17 Zeichen. */ [data-wsb-vorlage="nature"] .wsb-hero-titel { font-size: clamp(2.75rem, 9vw, 7rem) !important; line-height: .9; letter-spacing: -.04em; } /* Die Gegenstimme direkt darunter: gross, aber mager und weit durchschossen. Untergrenze 20.8 px — darunter traegt Manrope 300 die Zeile nicht mehr. 40ch ergeben rund 51 Zeichen. */ [data-wsb-vorlage="nature"] .wsb-hero-text > p { font-size: clamp(1.3rem, 2.2vw, 1.7rem); font-weight: 300; line-height: 1.5; letter-spacing: 0; max-width: 40ch; } /* Die Deko-Ebenen der Buehne fallen weg. Auf dem hellen Band der Vorlage messen Punktraster und Schleier 1.03:1 gegen ihren Grund (nach dem Vertiefen 1.09:1) — auf einem Screenshot unsichtbar und von jeder Kompression gefressen. Genau der Effekt ohne Aussage, an dem der erste Entwurf gescheitert ist. */ [data-wsb-vorlage="nature"] .wsb-hero-glow, [data-wsb-vorlage="nature"] .wsb-hero-grid { display: none; } /* Fuenf Stufen darunter, alle in derselben Titelspalte. */ [data-wsb-vorlage="nature"] .wsb-abschnitt-titel > .wsb-titel, [data-wsb-vorlage="nature"] .wsb-container > h2 { font-size: clamp(2.1rem, 4.4vw, 3rem) !important; line-height: .92; letter-spacing: -.035em; } [data-wsb-vorlage="nature"] .wsb-abschnitt-titel > h1.wsb-titel { font-size: clamp(2.6rem, 6vw, 4rem) !important; line-height: .9; letter-spacing: -.04em; } /* Zickzack-Bloecke. «items-center» sitzt am Raster nur im imagetext-Baustein — die uebrigen Vorkommen sind flex/inline-flex. Greift mit und ohne hochgeladenes Foto. */ [data-wsb-vorlage="nature"] .grid.items-center > div > h2 { font-size: clamp(1.9rem, 3.6vw, 2.6rem) !important; line-height: .95; letter-spacing: -.03em; } /* Abschlussband: mittig, aber in derselben Titelspalte — auch zentriert bleibt der Titel ein gestapelter Block. */ [data-wsb-vorlage="nature"] .wsb-container.ist-zentriert > h2 { margin-inline: auto; } /* Galerie, Partner und Beitragsliste setzen ihre Ueberschrift per Tailwind mittig. In einem 323 px breiten Block, der an der linken Kante haengt, liest sich das als Fehler. */ [data-wsb-vorlage="nature"] .wsb-container > h2.text-center { text-align: left; } /* Kachel-Ueberschriften im Fliesstext (Einsatzgebiet, Saison). */ [data-wsb-vorlage="nature"] .wsb-prose h2 { font-size: 2.2rem; line-height: .95; letter-spacing: -.03em; margin: 0 0 1rem; } [data-wsb-vorlage="nature"] .wsb-prose h3 { font-size: 1.85rem; line-height: .98; letter-spacing: -.025em; margin: 0 0 .9rem; } [data-wsb-vorlage="nature"] .wsb-prose h2:not(:first-child), [data-wsb-vorlage="nature"] .wsb-prose h3:not(:first-child) { margin-top: 2rem; } /* Die Gegenstimme. 50ch: die Ziffer misst bei Schnitt 400 0.610em, der mittlere Vorschub im deutschen Satz 0.4779em — macht 64 Zeichen. Die systemweiten 58ch ergaeben in Manrope 74 und damit eine Spalte, die neben dem Titelblock ausfranst. */ [data-wsb-vorlage="nature"] .wsb-prose { max-width: 50ch; line-height: 1.8; font-weight: 400; } [data-wsb-vorlage="nature"] .wsb-prose p { margin: .95rem 0; } [data-wsb-vorlage="nature"] .wsb-col > .wsb-block-style .wsb-prose { max-width: none; } /* In einer Reihe setzt das gemeinsame Blatt padding-inline auf 0 — ohne diese Zeile klebt der Kacheltext auf der Tonflaeche. Faellt erst auf, seit die Kacheln kraeftig genug getoent sind. */ [data-wsb-vorlage="nature"] .wsb-col > .wsb-block-style .wsb-container { padding: 1.9rem 1.75rem; } /* Der Kalendarium-Anlauf: ein fettes Wort am Absatzanfang ist in den Vorlagentexten immer eine Marke («März bis Mai — Schnitt, Ansaat»), im Fussbereich «Kontakt» und «Gärtnerei & Hofladen». Bewusst inline und nicht als Block: sonst faellt der Gedankenstrich in die naechste Zeile. */ [data-wsb-vorlage="nature"] .wsb-prose p > strong:first-child { font-weight: 800; letter-spacing: -.01em; color: var(--wsb-heading); } /* Hofladen: der Gruppentitel bekommt die unterste Stufe der Leiter, die Zeilen bleiben leise. Grosse Ware mit grossem Preis gehoert Gastro und wird hier nicht wiederholt. */ [data-wsb-vorlage="nature"] .wsb-preise-titel { font-size: 1.45rem; line-height: 1; letter-spacing: -.025em; text-transform: none; opacity: 1; color: var(--wsb-heading); margin-bottom: .8rem; } [data-wsb-vorlage="nature"] .wsb-preis-name, [data-wsb-vorlage="nature"] .wsb-preis-wert { font-weight: 400; } /* Das Hofschild: der Name traegt dieselbe Laufweite, damit die Signatur schon in der obersten Zeile des Screenshots beginnt. */ [data-wsb-vorlage="nature"] .wsb-nav > div > a > span { font-size: 1.5rem !important; letter-spacing: -.03em; } /* Der Knopf verliert den farbigen Schlagschatten und den Hover-Lift: beides ist die weichste Geste der Seite und arbeitet gegen einen hart gesetzten Schriftblock. Der Zustandswechsel bleibt sichtbar. */ [data-wsb-vorlage="nature"] .wsb-btn { box-shadow: none; } [data-wsb-vorlage="nature"] .wsb-btn:hover { transform: none; box-shadow: none; opacity: .85; } /* --- Fliesstext-Felder der Bausteine (Rich-Text seit 1.101) --- Abstaende nur ZWISCHEN Absaetzen und Listen: so behalten Karten, Schritte und Zitate ihre bisherigen Aussenabstaende, und Baustein-Regeln wie «.wsb-schritt-text p { margin: 0 }» greifen weiter. Listen brauchen ihre Punkte zurueck (Tailwind setzt sie ab). */ .wsb-richtext p, .wsb-richtext ul, .wsb-richtext ol { margin: 0; } .wsb-richtext > :is(p, ul, ol) + :is(p, ul, ol) { margin-top: .6em; } .wsb-richtext ul { list-style: disc; padding-left: 1.25rem; } .wsb-richtext ol { list-style: decimal; padding-left: 1.25rem; } .wsb-richtext li + li { margin-top: .15em; } .wsb-richtext a { color: var(--wsb-link, var(--wsb-primary)); text-decoration: underline; text-underline-offset: 2px; } .wsb-on-dark .wsb-richtext a, .wsb-richtext--hell a { color: inherit; } /* --- Breiten-Freigabe (zuletzt, damit sie Vorlagen-Overrides schlaegt) --- */ .wsb-prose.wsb-prose--zelle, .wsb-block-style.ist-vollbreit .wsb-prose, .wsb-col.ist-vollbreit .wsb-prose { max-width: none; }