/* =========================================================================== viceversa.swiss (Neubau) · Das Prinzip «Drei Räume» auf jeder Seite Angelegt 08.10.2026. Lädt als LETZTES Stylesheet auf jeder Seite. Markus am 08.10.2026, nachdem er «Drei Räume» auf Leistungen online gesehen hatte: «Das sieht gut aus. Gefällt mir sehr. Sehr viel frischer. Und moderner … Wende dieses Prinzip bitte auf jede Seite an.» Auf Nachfrage am selben Tag: · ALLE Titel in Fraunces — Seitentitel in den Kopfbildern, Abschnitts- titel, Titel im Slider, Zitate und Kernsätze. Fliesstext, Menü, Rubriken und Fuss bleiben in Jost, die Wortwolken in Kreide. · Rubriken beginnen mit einem Gedankenstrich statt dem senkrechten Balken; die rote LEISTE trägt nur noch Hauptaussagen und Zitate (Auftakt und «Aus einem Grund» auf der Startseite, die Zitate, der Kernsatz von «Drei Räume»). Ersetzt den Entscheid vom Mittag desselben Tages («Fraunces vorerst nur in Drei Räume») — siehe ENTSCHEIDE.md. Warum eine eigene Datei: Das Prinzip greift in fast jedes Stylesheet ein. Stünde es verteilt in den einzelnen Regeln, wäre es nicht mehr als Ganzes zu sehen — und nicht mehr als Ganzes zurückzunehmen. =========================================================================== */ /* --- 1 · Titelschrift --------------------------------------------------- */ /* Seit 08.10.2026 abends zwei Serifen: Playfair Display für die grossen Titel, Newsreader «daneben» für kleinere Titel, Zitate und Kernsätze. */ h1, h2, .vv-folie-ebene { font-family: var(--vv-schrift-titel); font-variant-numeric: lining-nums; /* Playfair setzt sonst Mediävalziffern */ } h3, h4, blockquote p, .vv-zitat-kette, .vv-dreiklang, .vv-einordnung-stark { font-family: var(--vv-schrift-neben); font-optical-sizing: auto; } /* Die Überschriften im Fuss sind Etiketten («Navigation», «Kontakt»). */ .vv-fuss h2, .vv-fuss h3 { font-family: var(--vv-schrift); } /* Gewichte wie bei «Drei Räume»: Fraunces wirkt im gleichen Schnitt schwerer als Jost. Die Grundregeln aus gestaltung.css (500) werden leichter; eigene Gewichte einzelner Bausteine bleiben, wie sie sind. */ h2 { font-weight: 420; letter-spacing: -.01em; } h3, h4 { font-weight: 450; letter-spacing: -.005em; } /* --- 2 · Seitentitel: gemischt statt Versalien --------------------------- Wie «Drei Räume»: grosse Serife in gemischter Schreibung. Die Sperrung war für Versalien gedacht (Markus 24.09.2026: «feiner, eleganter» — damals über Schnitt und Sperrung); bei gemischter Schrift reisst sie die Wörter auseinander und fällt darum weg. */ .vv-seitentitel, .vv-seitenkopf h1, .vv-bildkopf h1, .vv-bildkopf.vv-bildkopf-schatten h1 { text-transform: none; letter-spacing: -.01em; } /* --- 3 · Rubrik mit Gedankenstrich --------------------------------------- Statt des senkrechten Balkens in Versalhöhe ein waagrechter Strich auf der Mittellinie der Versalien, 34px lang — wie über «Drei Räume». */ .vv-caption::before { width: 34px; height: 1.5px; vertical-align: .32em; margin-right: 14px; } /* «Am Schluss» unter jedem Angebot: keine Leiste mehr, die Beschriftung bekommt den Gedankenstrich wie eine Rubrik. */ .vv-ergebnis { border-left: 0; padding-left: 0; } .vv-ergebnis b::before { content: ""; display: inline-block; width: 34px; height: 1.5px; margin-right: 14px; vertical-align: .32em; background: var(--vv-rot); } /* Die vier Phasen (Analyse, Konzeption …) sind Zwischentitel, keine Hauptaussage: ohne Leiste. */ .vv-phase h4 { border-left: 0; padding-left: 0; } /* Die vier Punkte auf der Seite viceversa («Vier Gedanken, ein Prinzip»): Aufzählung, keine Hauptaussage — ohne die Seitenlinie. Der Text rückt an die Kante, wo vorher Linie und Abstand standen. */ .vv-kapitel-punkt { grid-template-columns: 0 1fr; column-gap: 0; } .vv-kapitel-punkt::before { content: none; } /* --- 4 · Lesetext: drei Stufen statt zehn Grössen ------------------------ Markus, 08.10.2026: «die Copy-Texte in Normalschrift müssen nun auch deutlich grösser werden. Das Ganze homogener … Zeitweise in den einzelnen Angeboten … ist die Schrift winzig klein. Das Ganze muss lesefreundlicher sein.» Die Stufen stehen in gestaltung.css (--vv-body 22, --vv-klein 19, --vv-angabe 17; Tablet und Handy je eine Stufe kleiner). Hier wird jede bisher fest gesetzte Grösse einer Stufe zugeordnet. */ /* Lesetext — alles, was man von Anfang bis Ende liest. */ .vv-einordnung p, .vv-claim, .vv-prozess-stark, .vv-prozess-intro, .vv-abschluss-text p, .vv-person-zitat p, .vv-spark-text p, .vv-spark-text .vv-spark-lead, .vv-dt-band-text, .vv-parallax-text p, .vv-lage-text { font-size: var(--vv-body); } /* Kleiner Lesetext — Kartentexte, Listen, Zweitrangiges. */ .vv-symptom, .vv-dt-buehne, .vv-netz-punkt p, .vv-kachel-auf p, .vv-dazu-felder .vv-kachel-auf p, .vv-ergebnis, .vv-phase p, .vv-stimme p, .vv-profi p, .vv-vita-kontakt p, .vv-fakten-block li, .vv-plaetze-liste li, .vv-tuer-satz, .vv-buch-inhalt li, .vv-spark-zwischentitel { font-size: var(--vv-klein); line-height: 1.6; } /* Angaben — wer, wo, woher. */ .vv-sprachhinweis, .vv-buch-angabe, .vv-buch-ohne, .vv-stimme footer, .vv-haus-erfahrung, .vv-profi-firma, .vv-zitat-name, .vv-zitat-rolle, .vv-lorenz-name, .vv-lorenz-rolle, .vv-vita-bild figcaption, .vv-abschluss-text .vv-abschluss-adresse, .vv-hinweis { font-size: var(--vv-angabe); } /* Der Auftakt der Startseite steht fest auf zwei Zeilen (nowrap, Auftrag 07.10.2026). In Fraunces ist «La story devient mouvement.» breiter als in Jost: bei 390px lief die Zeile 18px über den Rand (gemessen 08.10.2026). Darum wächst die Schrift am Handy mit der Fensterbreite: Die längste Zeile (französisch) braucht 13.2 × Schriftgrösse, verfügbar sind Fenster minus 2 × 24px Rand minus 17px Titelstrich. 13.4 lässt etwas Luft für Safari. */ .vv-auftakt-satz { font-size: max(18px, min(44px, max(3.2vw, 23px), calc((100vw - 65px) / 13.4))); } /* --- 5 · Versalien nie unter 14px ---------------------------------------- Lieferung der Fachsession vom 08.10.2026 auf Markus' Befund («FÜR MITARBEITENDE & TEAMS und fünf angebote ist deutlich zu klein»): Versal- schrift mit Sperrung fällt nie unter 14px — bei Grossbuchstaben fehlen die Kleinbuchstaben als Bezugsgrösse, 11px lesen sich wie 8. Die Elemente von «Drei Räume» stehen in drei-tueren.css; hier die übrigen der Website. */ .vv-ergebnis b, .vv-tuer-kicker, .vv-rundgang-ort, .vv-partner-name { font-size: 14px; letter-spacing: 1.4px; } /* Schluss der Startseite (08.10.2026, Markus: «normale Typo»): die Antwort unter «Und jetzt?» und «Unterhalten wir uns.» stehen im Lesetext wie der Absatz danach — Jost, Lesegrösse, normaler Schnitt. «Und jetzt?» bleibt Titel. */ .vv-start-schluss .vv-schluss-antwort, .vv-start-schluss .vv-einladung { font-family: var(--vv-schrift); font-size: var(--vv-body); font-weight: 400; font-style: normal; letter-spacing: normal; line-height: var(--vv-zeile); } /* --- 6 · Rubrik links, Titel und Text rechts ------------------------------ Markus, 08.10.2026, mit zwei Bildern («Wo es hakt» und Luminous «Confidentiality»): «Bitte gestalte kurze Texte gleich wie das Luminous tut … Mit der Caption links und dem Strich rübergezogen. Elegante Sache.» Für Abschnitte aus Rubrik, Titel und kurzem Text (Klasse .vv-zweiteilig): links eine feine Linie über die ganze Spalte, die Rubrik darunter; rechts Titel und Text. Die lange Linie ersetzt den kurzen Strich vor der Rubrik. Verhältnis .82 : 1.18 wie die Angebote der Leistungsseiten — so stehen Rubrik und Titel über deren Spalten. Raster und Phasen darunter laufen über beide Spalten. Bis 860px eine Spalte: Linie, Rubrik, Titel, Text. */ .vv-zweiteilig { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); column-gap: 56px; align-items: start; } .vv-zweiteilig > * { grid-column: 2; } .vv-zweiteilig > .vv-caption { grid-column: 1; grid-row: 1 / span 12; align-self: start; padding-top: 22px; border-top: 1px solid var(--vv-feld); margin: 10px 0 0; } .vv-zweiteilig > .vv-caption::before { content: none; } .vv-zweiteilig > h2 { margin-top: 0; } .vv-zweiteilig > .vv-phasen { grid-column: 1 / -1; } /* «Wo es hakt»: die Textblöcke laufen jetzt auf der Containerbreite, damit ihre rechte Spalte mit den übrigen Abschnitten fluchtet. */ .vv-hakt .vv-hakt-text.vv-zweiteilig { max-width: var(--vv-container); padding: 0 calc(var(--vv-container-pad) * 2); } .vv-angebote-kopf.vv-zweiteilig { max-width: none; } @media (max-width: 860px) { .vv-zweiteilig { grid-template-columns: minmax(0, 1fr); } .vv-zweiteilig > *, .vv-zweiteilig > .vv-caption { grid-column: 1; grid-row: auto; } .vv-zweiteilig > .vv-caption { margin: 0 0 18px; padding-top: 16px; } } @media (max-width: 767px) { .vv-hakt .vv-hakt-text.vv-zweiteilig { padding: 0 24px; } } .vv-zweiteilig > h2 { text-wrap: balance; } /* --- Unten: Verlauf auf den Kopfbildern, ruhiges Band im Slider ---------- 08.10.2026. Auf den Kopfbildern bleibt es, wie Markus es online gesehen und gutgeheissen hat («Die Themenseiten zeigen, dass dies möglich ist»): der Schirm hinter dem Text (leistung.css) plus ein feiner Verlauf von unten. Im Slider der Startseite lagen das abdunkelnde Band (start.css, backdrop-filter) und ein Verlauf übereinander — Markus: «extrem dunkel … über die ganze Bildbreite … Bitte helle den unteren Bildrand auf.» Jetzt nur noch eine Abdunklung auf der Höhe des Textes: oben weich einlaufend, zum unteren Bildrand hin heller, nach rechts auslaufend. Gemessen: die Slider-Schrift (gross, 3:1 nötig) trägt auf allen drei Folien. Steht HIER, weil start.css und leistung.css nach seite.css laden. */ .vv-bildkopf.vv-bildkopf-schatten::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 72%; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(0, 0, 0, .48) 0%, rgba(0, 0, 0, .26) 40%, rgba(0, 0, 0, 0) 100%); } .vv-folie-schirm { backdrop-filter: none; -webkit-backdrop-filter: none; top: -150px; bottom: -40px; background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, var(--slider-schleier, .54)) 50%, rgba(0, 0, 0, var(--slider-schleier, .54)) 72%, rgba(0, 0, 0, .12) 100%); -webkit-mask-image: linear-gradient(to right, #000 0%, #000 55%, transparent 100%); mask-image: linear-gradient(to right, #000 0%, #000 55%, transparent 100%); } /* --- Sprachwahl: positiv statt rot (08.10.2026) --------------------------- Markus: «die Sprachwahl soll nicht rot sein, sondern positiv mit weissem Hintergrund und dunkler Typo viceversa-black 3d3d3d». Die gewählte Sprache: weisse Fläche, Schrift und Rand in der Textfarbe. Gilt im hellen Kopf wie auf dem Bild. */ .vv-sprache.vv-hier, body .vv-kopf .vv-sprache.vv-hier { background: var(--vv-weiss); color: var(--vv-text); border-color: var(--vv-text); } @media (min-width: 1280px) { body:has(#vv-slider, .vv-bildkopf:not(.vv-bildkopf-ohne)) .vv-kopf:not(.vv-kopf-eng) .vv-sprache.vv-hier { background: var(--vv-weiss); color: var(--vv-text); border-color: var(--vv-weiss); text-shadow: none; } } @media (min-width: 1280px) { body.vv-kopf-hell:has(#vv-slider, .vv-bildkopf:not(.vv-bildkopf-ohne)) .vv-kopf:not(.vv-kopf-eng) .vv-sprache.vv-hier { border-color: var(--vv-text); } } /* Nunito Sans läuft etwas breiter als Jost: Bei 320px ragte die Mail-Pille im Schluss der Startseite 6px über den Rand (08.10.2026). Auf sehr schmalen Handys darum weniger Polster. */ @media (max-width: 380px) { .vv-knopf-gross { padding-inline: 24px; } }