/* =========================================================================== viceversa.swiss (Neubau) · Seite «viceversa» Angelegt 16.09.2026. Kein einziger Hex-Wert. Alle Farben kommen aus farben.css; die Abstufungen entstehen mit color-mix aus den Variablen, damit ein Palettenwechsel überall durchschlägt. =========================================================================== */ /* --- Vier Kapitel ------------------------------------------------------- */ .vv-kapitel { padding-block: 70px 20px; } .vv-kapitel-kopf { margin-bottom: 44px; } .vv-kapitel-kopf h2 { margin: 12px 0 0; } .vv-kapitel-raster { display: grid; grid-template-columns: repeat(2, 1fr); gap: 44px 56px; } /* Senkrechter Strich wie beim Zitat unter «Markus Aerni» (.vv-person-zitat): 3px Hausrot, 24px Abstand zum Text. Markus am 29.09.2026: «setze den vertikalen Strich bei den vier Punkten genau so ab wie weiter unten bei Markus Aerni.» */ /* Die Linie beginnt erst beim Titel, die Nummer steht frei darüber — Markus am 29.09.2026: «ziehe die Linien erst von der Titelzeile her runter. die Nummerierung bleibt allein.» Darum kein Rand mehr am ganzen Block, sondern eine eigene Spalte von 3px, in der die Linie über die Zeilen Titel und Text läuft. Abstand zum Text unverändert 24px; der Text steht exakt dort, wo er mit Rand und Innenabstand stand. */ /* Zeilen auto auto 1fr: Ist der Nachbar im Raster höher, wächst nur die Textzeile — sonst verteilte das Raster die Höhe auf alle drei, und Nummer und Titel rutschten nach unten (gemessen 24px). So reicht die Linie wie früher der Rand bis zum unteren Blockende. */ .vv-kapitel-punkt { display: grid; grid-template-columns: 3px 1fr; grid-template-rows: auto auto 1fr; column-gap: 24px; } .vv-kapitel-punkt > * { grid-column: 2; } .vv-kapitel-punkt::before { content: ""; grid-column: 1; grid-row: 2 / 4; background: var(--vv-rot); } .vv-kapitel-punkt .vv-nummer { display: block; font-size: 13px; font-weight: 500; letter-spacing: .16em; color: var(--vv-rot); margin-bottom: 10px; } .vv-kapitel-punkt h3 { margin: 0 0 12px; } .vv-kapitel-punkt p { margin: 0; line-height: var(--vv-zeile); } /* --- Das «Warum» -------------------------------------------------------- */ /* Abstand Absatz → nächste Caption: 74px wie auf der Seite viceversa (Vorspann → «Was viceversa bewegt»). Markus am 30.09.2026: «auch die Abstände eines vorgängigen Absatzes zum nächsten Block Caption/Titel muss immer gleich gross sein». Gemessen Textunterkante → Caption-Oberkante. */ .vv-warum { padding-block: 50px 60px; } /* war 60px: 84 → 74 */ /* Seit 29.09.2026 ein breites Teambild (1959 × 803, «30 Consulting 07 retuschiert»). Markus: «passe das Layout der Seite dem Bildformat an.» In der alten rechten Spalte (531px) wäre es nur 218px hoch gewesen, neben 768px Text. Darum jetzt: Text oben, in zwei Spalten (Warum | Wer), das Bild darunter über die ganze Inhaltsbreite. */ .vv-warum-inhalt { display: grid; grid-template-columns: 1fr; gap: 44px; align-items: start; } .vv-warum-text { column-count: 2; column-gap: 60px; } .vv-warum-text > .vv-caption, .vv-warum-text > h2 { column-span: all; } .vv-warum-text h3 { break-after: avoid; } .vv-warum-text p { break-inside: avoid; } .vv-warum-text h2 { margin: 12px 0 24px; } /* Titel → Text 24px, 30.09.2026 */ .vv-warum-text h3 { margin: 34px 0 12px; } .vv-warum-text p { line-height: 1.7; margin: 0 0 16px; } .vv-warum-bild img { width: 100%; height: auto; display: block; } /* --- Markus Aerni ------------------------------------------------------- */ .vv-person { display: grid; grid-template-columns: .8fr 1.2fr; gap: 56px; align-items: start; padding-block: 40px 34px; } /* unten war 70: 110 → 74 */ .vv-person-bild img { width: 100%; height: auto; display: block; } .vv-person-text h2 { margin: 12px 0 24px; } /* Titel → Text 24px, 30.09.2026 */ .vv-person-text > p { line-height: 1.7; margin: 0 0 22px; } .vv-person-zitat { margin: 0; padding-left: 24px; border-left: 3px solid var(--vv-rot); } .vv-person-zitat p { font-size: 18px; line-height: var(--vv-zeile); font-weight: 300; margin: 0 0 14px; } .vv-person-schluss { font-weight: 500; } /* --- Spezialisten-Netzwerk ---------------------------------------------- */ .vv-netzwerk { padding-block: 20px 2px; } /* unten war 70: 142 → 74 */ .vv-netz-raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px 30px; } .vv-netz-punkt .vv-strich { width: 40px; height: 2px; background: var(--vv-rot); margin-bottom: 14px; } .vv-netz-punkt h3 { margin: 0 0 6px; } .vv-netz-punkt h3 a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; } .vv-netz-punkt h3 a:hover { color: var(--vv-rot); border-bottom-color: var(--vv-rot); } /* 75 % Text auf Grund = 4.79:1. 72 % wären 4.45:1 und damit zu wenig. */ .vv-netz-punkt p { margin: 0; font-size: 14px; line-height: 1.55; color: color-mix(in srgb, var(--vv-text) 75%, var(--vv-grund)); } /* --- Vier Zähler, seit dem 20.09.2026 auf HELLEM Grund ------------------ Sie sitzen jetzt im Mandate-Block unter dem Logoband, und der muss hell sein: Die Partnerlogos sind einfarbige Grafiken für hellen Untergrund. Gemessen auf --vv-grund (#f4f1ec): Wert --vv-rot 8.07:1 Nr --vv-rot 8.07:1 Text --vv-text 9.64:1 Die Nummer stand zuerst in --vv-kundenlogo (#908f8f). Ich hatte dafür 4.55:1 in diesen Kommentar geschrieben, OHNE zu messen — nachgerechnet sind es 2.83:1, bei 12px also klar zu wenig. Diese Farbe heisst in der Palette wörtlich «Kundenlogos» und ist für Grafiken gedacht, nicht für Schrift. Genau die Sorte Zahl, die man nicht schätzen darf. Bis dahin standen sie weiss auf Schwarzrot in einem eigenen dunklen Band; die Werte dazu: 16.3 / 11.0 / 10.0. */ .vv-zahlen-raster { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; margin-top: 54px; } .vv-zahl { display: flex; flex-direction: column; gap: 6px; } .vv-zahl-nr { font-size: 12px; letter-spacing: .2em; color: var(--vv-rot); } .vv-zahl-wert { font-size: 2.4rem; font-weight: 300; line-height: 1; color: var(--vv-rot); font-variant-numeric: tabular-nums; } .vv-zahl-lbl { font-size: 14px; line-height: 1.45; color: var(--vv-text); } /* --- Dieselben Zähler auf DUNKLEM Grund -------------------------------- Die viceversa-Seite trägt ihren Zahlenblock weiter als dunkles Band (_lib/viceversa-seite.php). Beim Umbau der Startseite am 20.09.2026 hatte ich die dunklen Regeln gelöscht — die Seite zeigte danach rote Zahlen auf Schwarzrot, 1.4:1. Gefunden, weil ich nach dem Umbau nach übrig gebliebenen Selektoren gesucht habe, nicht weil ich hingeschaut hätte. Das ganze Bild prüfen heisst auch: die anderen Seiten. Gemessen auf --vv-schwarzrot: Grund 16.33:1, Beschriftung 11.0:1. */ .vv-zahlen { background: var(--vv-schwarzrot); color: var(--vv-grund); padding-block: 64px; } .vv-zahlen h2 { margin: 12px 0 40px; color: var(--vv-grund); } .vv-zahlen .vv-zahlen-raster { margin-top: 0; } .vv-zahlen .vv-zahl-nr { color: var(--vv-hell-gedaempft); } .vv-zahlen .vv-zahl-wert { color: var(--vv-grund); } .vv-zahlen .vv-zahl-lbl { color: color-mix(in srgb, var(--vv-grund) 82%, var(--vv-schwarzrot)); } /* --- Partnerwand -------------------------------------------------------- Am Original nachgemessen (16.09.2026): Logos 150px breit, IN FARBE (kein Graufilter, volle Deckung), und darunter steht der Name in gesperrten Versalien. Ich hatte die Logos entfärbt und auf 72 % gesetzt und die Namen nur als title-Attribut geführt — beides falsch. Die Farbe für die Namen steht in der Palette und heisst dort wörtlich «Kundenlogos». */ /* Auf der STARTSEITE ist .vv-partner am 20.09.2026 im Mandate-Block aufgegangen; die viceversa-Seite führt ihn weiter. */ .vv-partner { padding-block: 60px 80px; } .vv-mandate { padding-block: 70px 86px; } .vv-partner-wand { list-style: none; margin: 34px 0 0; padding: 0; display: grid; gap: 40px 24px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } .vv-partner-wand li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; } .vv-partner-wand img { max-width: 150px; max-height: 64px; width: auto; height: auto; object-fit: contain; display: block; } .vv-partner-name { font-size: 11px; font-weight: 500; letter-spacing: 2px; line-height: 1.5; text-transform: uppercase; color: var(--vv-kundenlogo); } @media (max-width: 999px) { .vv-kapitel-raster { grid-template-columns: 1fr; gap: 34px; } .vv-warum-inhalt { grid-template-columns: 1fr; gap: 36px; } .vv-warum-text { column-count: 1; } .vv-person { grid-template-columns: 1fr; gap: 28px; } /* Einspaltig läuft das Porträt sonst über die ganze Spalte — bei 692px sind das 610px Höhe für ein Brustbild, direkt unter dem ebenso breiten Teambild (gemessen 16.09.2026). Ein Porträt braucht diese Fläche nicht. */ .vv-person-bild { max-width: 340px; } .vv-netz-raster { grid-template-columns: 1fr 1fr; gap: 28px 24px; } .vv-zahlen-raster { grid-template-columns: 1fr 1fr; gap: 28px; } } @media (max-width: 599px) { .vv-netz-raster { grid-template-columns: 1fr; } .vv-zahlen-raster { grid-template-columns: 1fr; } .vv-partner-wand { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); } } /* =========================================================================== Die persönliche Seite (Markus Aerni) — angelegt 23.09.2026 Vorbild: viceversa.swiss/de/personnel/markus_aerni/, bei 1400px nachgemessen: linke Spalte 280px, rechte 790px, Rinne 40px. Hier 300px / Rest bei 64px Rinne — dieselbe Rinne wie im Zitatblock, damit die Seite im Rhythmus der übrigen bleibt. =========================================================================== */ .vv-vita-raster { display: grid; grid-template-columns: 1fr; gap: 64px; align-items: start; padding-bottom: 20px; } /* KEIN position: sticky. Naheliegend wäre es — die Spalte ist kürzer als der Text daneben. Sie ist aber 1401px hoch und damit höher als jeder Bildschirm: Klebte sie, bliebe ihr unteres Drittel samt dem dritten Bild unerreichbar, solange sie klebt. Gemessen am 23.09.2026. */ .vv-vita-spalte { } .vv-vita-portraet { display: block; width: 100%; height: auto; } .vv-vita-kontakt { margin-top: 30px; } .vv-vita-kontakt h2 { font-size: var(--vv-titel-unter); margin: 0 0 10px; color: var(--vv-rot); } .vv-vita-kontakt p { font-size: 17px; line-height: 1.6; margin: 14px 0 0; color: var(--vv-text); } .vv-vita-kontakt a { color: var(--vv-text); text-decoration: none; } .vv-vita-kontakt a:hover, .vv-vita-kontakt a:focus-visible { text-decoration: underline; } /* Die drei Bilder der Spalte. Legende klein und ruhig — sie erklärt, sie wirbt nicht. */ .vv-vita-bild { margin: 34px 0 0; } .vv-vita-bild img { display: block; width: 100%; height: auto; } .vv-vita-bild figcaption { font-size: 14px; line-height: 1.45; margin-top: 10px; color: var(--vv-text); } /* --------------------------------------------------------------------- Person und Zeitleiste, Stand 29.09.2026. LINKSAUSRICHTUNG (Markus, 29.09.2026: «Mass ist das Profilfoto»): Titel, Vorspann, Foto, Zeitleiste und «Die Fakten» beginnen alle an der linken Kante des Profilfotos. Die linke Spalte der Zeitleiste ist so breit wie das Foto (300px), die Rinne daneben dieselbe — Kontakt und Stationstexte stehen auf einer Kante. TAKT: Person, Zeitleiste und Fakten sind durch je eine Haarlinie getrennt, mit 34px Luft auf beiden Seiten. ZEITLEISTE statt Wortwolken (Markus, 29.09.2026: «eher als Timeline, Typolösung anstelle aussageloser Grafiken»). Links je Station die Marke in grosser, leichter Schrift — eine Tatsache aus dem Text, rot. In der Rinne eine Haarlinie mit einem Punkt je Station, auf der Mitte der ersten Markenzeile. Das Stück Linie hängt an der Station und reicht bis zum Punkt der nächsten: Es beginnt 0.55 Markenhöhe unter der Oberkante und endet ebenso tief in der nächsten Station (die Marke hat Zeile 1.1, ihre Mitte liegt also bei 0.55 ihrer Grösse). --------------------------------------------------------------------- */ /* Kontakt steht auf der Textkante der Zeitleiste: Foto 300px, dann so viel Rinne, dass die Kante bei «Spalte + 52px» liegt. */ .vv-vita-person { display: grid; grid-template-columns: 300px 1fr; column-gap: calc(var(--vv-zeit-spalte) - 300px + 52px); align-items: start; margin-top: 56px; padding-bottom: 34px; } .vv-vita-belege span { display: block; } .vv-vita-bleibt { margin-top: 22px; } .vv-vita-zeit { padding-block: 34px; border-top: 1px solid var(--vv-kundenlogo); border-bottom: 1px solid var(--vv-kundenlogo); } .vv-vita-zeit > h2 { font-size: var(--vv-titel-abschnitt); margin: 0 0 40px; } .vv-zeit { list-style: none; margin: 0; padding: 0; } /* ZEITLEISTE NACH RECHTS — Markus am 29.09.2026: «Timeline nach rechts, bis die Titel auf einer Zeile Raum finden. Zumindest in Deutsch und Englisch. In Französisch wohl nicht möglich.» Die Spalte wächst mit der Markenschrift (gestaltung.css). Gemessen in Markenhöhen, längste Marke: de «3 Olympische Spiele» 8.55, en «100 years Cancer League» 10.56, fr «100 ans Ligue contre le cancer» 12.77 — Französisch bricht dort weiterhin um; die Spalte dafür wäre bei 1440px 485px breit. */ :lang(en) .vv-vita, :lang(fr) .vv-vita { --vv-zeit-spalte: max(300px, calc(10.65 * var(--vv-zeit-marke))); } .vv-zeit-station { position: relative; display: grid; grid-template-columns: var(--vv-zeit-spalte) 1fr; column-gap: 52px; align-items: start; padding-bottom: 56px; } .vv-zeit-station:last-child { padding-bottom: 0; } .vv-zeit-marke { margin: 0; font-size: var(--vv-zeit-marke); font-weight: 300; line-height: 1.1; color: var(--vv-rot); text-wrap: balance; } .vv-zeit-station::after { content: ""; position: absolute; left: calc(var(--vv-zeit-spalte) + 21.5px); top: calc(.55 * var(--vv-zeit-marke) - 4.5px); width: 9px; height: 9px; border-radius: 50%; background: var(--vv-rot); } .vv-zeit-station:not(:last-child)::before { content: ""; position: absolute; left: calc(var(--vv-zeit-spalte) + 25.5px); top: calc(.55 * var(--vv-zeit-marke)); bottom: calc(-.55 * var(--vv-zeit-marke)); width: 1px; background: color-mix(in srgb, var(--vv-rot) 45%, transparent); } .vv-zeit-text h3 { font-size: 26px; font-weight: 500; line-height: 1.25; margin: 0 0 10px; color: var(--vv-text); } /* Die Nummer über dem Titel ist die Hausklasse .vv-nummer (leistung.css), rot wie überall. Bis 29.09.2026 stand hier eine eigene, graue Nummer neben dem Titel. */ .vv-zeit-text p { font-size: var(--vv-body); line-height: var(--vv-zeile); margin: 0 0 14px; max-width: 64ch; } .vv-zeit-text > :last-child { margin-bottom: 0; } /* Schlussblock: die Adresse unter dem Knopf, lesbar und markierbar. */ /* Zwei Klassen: «.vv-abschluss-text p» (leistung.css) ist sonst stärker. */ .vv-abschluss-text .vv-abschluss-adresse { margin: 14px 0 0; font-size: 16px; color: var(--vv-hell-gedaempft); } /* --- Die Fakten ---------------------------------------------------------- Fünf Listen. Ohne Skript stehen alle offen (die Reiterleiste trägt hidden und der Block bekommt seine Klasse erst im Skript); mit Skript wird geblättert. */ /* 39 statt 34: gleicht den Durchschuss über der Überschrift aus, damit «Die Fakten» im selben sichtbaren Abstand steht wie jedes Kapitel. */ .vv-fakten { margin-top: 39px; } .vv-fakten > h2 { font-size: var(--vv-titel-abschnitt); margin: 0 0 20px; } .vv-fakten-reiter { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-bottom: 26px; } .vv-fakten-reiter button { appearance: none; background: none; border: 0; padding: 0 0 8px; font: inherit; font-size: 15px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; color: var(--vv-text); cursor: pointer; border-bottom: 1.5px solid transparent; transition: color .2s, border-color .2s; } .vv-fakten-reiter button[aria-selected="true"] { color: var(--vv-rot); border-bottom-color: var(--vv-rot); } .vv-fakten-reiter button:hover { color: var(--vv-rot); } .vv-fakten-block h3 { font-size: var(--vv-titel-unter); margin: 0 0 12px; color: var(--vv-rot); } /* Mit Skript trägt die Reiterleiste den Namen des Blocks — die Zwischenüberschrift wäre dann doppelt. */ .vv-fakten-blaettert .vv-fakten-block h3 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .vv-fakten-block + .vv-fakten-block { margin-top: 34px; } .vv-fakten-blaettert .vv-fakten-block + .vv-fakten-block { margin-top: 0; } .vv-fakten-block ul { list-style: none; margin: 0; padding: 0; } .vv-fakten-block li { position: relative; padding-left: 16px; margin-bottom: 14px; font-size: 17px; line-height: 1.5; color: var(--vv-text); max-width: 64ch; } /* Der Strich sitzt auf der ERSTEN Zeile, nicht auf dem Listenpunkt. Markus, 23.09.2026: «darauf achten, dass die vertikalen Caption-Striche exakt auf die Zeilen ausgerichtet sind. und einen Punkt fetter». Zwei Fehler steckten in den alten Werten: 1. `top: .52em` war geraten. Die Mitte der ersten Zeile liegt beim halben Durchschuss — hier 1.5 / 2 = .75em ab Oberkante. Mit .52em stand der Strich rund 4px zu hoch; auf dem Bildschirmfoto sieht man ihn über der Versalhöhe schweben. `top: 50%` wäre noch falscher: Das wäre die Mitte des ganzen Punkts, und mehrzeilige Punkte gibt es hier. 2. 1px ist das Mass der Fussnavigation, wo der Strich «sehr fein» sein soll. In dieser Liste steht er vor einem fetten Namen und darf einen Punkt kräftiger sein: 2px. Gerade Zahl, also kein Rundungsproblem. */ .vv-fakten-block li::before { content: ""; position: absolute; left: 0; top: .75em; width: 2px; height: .74em; margin-top: -.37em; background: var(--vv-rot); } .vv-fakten-block li strong { font-weight: 500; color: var(--vv-rot-dunkel); } @media (max-width: 999px) { .vv-vita-raster { grid-template-columns: 1fr; gap: 40px; } .vv-vita-person { grid-template-columns: 1fr; gap: 20px; margin-top: 40px; padding-bottom: 26px; } .vv-fakten { margin-top: 29px; } /* Schmal: Marke über dem Titel, keine Linie — eine Spalte trägt keine Rinne. Die Stationen trennt der Abstand. */ .vv-vita-zeit { padding-block: 26px; } .vv-vita-zeit > h2 { margin-bottom: 26px; } .vv-zeit-station { grid-template-columns: 1fr; row-gap: 8px; padding-bottom: 40px; } .vv-zeit-station::before, .vv-zeit-station::after { display: none; } .vv-zeit-text h3 { font-size: 22px; } .vv-vita-portraet { max-width: 340px; } .vv-vita-bild img { max-width: 480px; } } /* Der Weg von der viceversa-Seite zur persönlichen Seite. */ .vv-person-mehr { margin: 22px 0 0; } .vv-person-mehr a { font-size: 19px; color: var(--vv-rot); text-decoration: none; } .vv-person-mehr a:hover, .vv-person-mehr a:focus-visible { text-decoration: underline; } .vv-person-mehr i { font-style: normal; font-size: 26px; margin-left: 10px; vertical-align: middle; line-height: 1; } /* Schmal: dieses Kopfbild mittig statt links. Die allgemeine Regel richtet Kopfbilder auf dem Telefon links aus, weil dort die Aufhellung sitzt. Hier steht Markus aber RECHTS im Bild — links ausgerichtet zeigte das Telefon nur den leeren Raum. Gemessen bei 390px: links Titel 4.44 Caption 4.22 (Caption unter den nötigen 4.5) mittig Titel 4.81 Caption 5.13 Mittig ist also nicht nur das bessere Bild, sondern auch der bessere Wert. */ @media (max-width: 767px) { .vv-vita .vv-bildkopf { background-position: center; } } /* --- Kopfbild: weisser Titel, Schirm hinter dem Text ------------------ Den Schirm beschreibt leistung.css («Der Schirm»); hier steht nur, wie dunkel er auf diesem Bild sein muss. Gemessen am 27.09.2026, «Welcome on Stage 01», weisse Schrift, schlechtester Bildpunkt, Titel / Kicker: 375px 768px 1024px 1440px 1920px .45 5.64/5.31 5.25/5.53 4.95/5.71 4.88/5.56 4.96/6.17 <- gewählt .50 4.66/4.41✗ 4.42/4.59 4.12/4.72 4.06/4.60 4.12/5.08 ACHTUNG: Wird das Kopfbild ersetzt, muss erneut gemessen werden (_werkzeuge/schirmprobe.js). */ .vv-vv { --vv-schirm-hell: .45; } /* 30.09.2026 neu gemessen: am Handy braucht der französische Kicker .40. */ @media (max-width: 999px) { .vv-vv { --vv-schirm-hell: .40; } } /* --- Kopfband im Bildverhältnis, wie «Publikationen» --------------------- Markus am 27.09.2026: «Verwende nun das Bild Welcome on Stage … Wähle den exakten Bildausschnitt bis es exakt die Dimensionen des Bildes Publikationen hat. Drehe das Bild ganz leicht im Gegenuhrzeigersinn bis die Bühne exakt null Grad waagrecht ist.» Das Bild: «00 Welcome on Stage 01.png» (1536 × 1024, schärfere Fassung, von Markus am selben Tag nachgeliefert; anderer Bildaufbau als die erste), um 0.232° gegen den Uhrzeigersinn gedreht, 1526 × 552 ab (5, 342) ausgeschnitten und auf 2084 × 754 gebracht. Gemessen an der Oberkante der weissen Bühnenfront, Verbindung der beiden äusseren Ecken: vorher +0.232° (rechts 4.1px tiefer), im fertigen Bild −0.010°. Die Kante ist durch das Objektiv leicht gewölbt; waagrecht steht darum die Sehne, nicht jedes Stück. Damit der Ausschnitt auch ankommt, trägt das Band das Bildverhältnis. Im Hausband (538px) hätte der Browser das Bild wieder beschnitten. Schleier am neuen Bild nachgemessen, Titel / Kicker, schlechtester Bildpunkt. Mit dem bisherigen .50 hielt der Kicker bei 375px NICHT (4.41, nötig 4.5) — die schärfere Fassung hat mehr helle Einzelheiten hinter der Schrift. Darum .45 (oben gesetzt), wie Sparks: .50 .45 <- gewählt 375px 4.66 / 4.41 ✗ 5.64 / 5.31 768px 4.42 / 4.59 5.25 / 5.53 1024px 4.12 / 4.72 4.95 / 5.71 1440px 4.06 / 4.60 4.88 / 5.56 1920px 4.12 / 5.08 4.96 / 6.17 Damit gelten die Zahlen oben (Generationenhaus, .50) nicht mehr. Seit dem 27.09.2026 ist der Schirm schmaler (hinter dem Text); die gültigen Zahlen stehen oben beim Kopfbild. */ .vv-vv .vv-bildkopf { width: 100%; min-height: 0; aspect-ratio: 2084 / 754; } @media (max-width: 767px) { .vv-vv .vv-bildkopf { min-height: 300px; background-position: center; } } /* --- Kopfbild «Markus Aerni» ---------------------------------------------- Markus am 29.09.2026: «passe das Titelbild den anderen Titelbildern an: Textpositionen anpassen, Unterlinie weg, Schleier nur minimal, damit der Text lesbar ist — nicht mehr!» Seitdem vv-bildkopf-schatten (vita-seite.php) und dasselbe Band wie viceversa, Leistungen und Publikationen. DAS BILD (29.09.2026, zweiter Schritt): Markus: «das Bild darf dann aber nicht mehr blass sein!» Die bisherige Datei trug den weissen Schleier der alten Seite fest eingerechnet. Jetzt neu aus dem Original «markus_aerni_0566.jpg» (Shooting 19.11.2023, 1500 × 1000): volle Breite, 750 Zeilen ab Zeile 70 — über dem Kopf Luft (die alte Datei schnitt im Band die Haare an). Nicht hochgerechnet: 1500px ist die Auflösung des Originals. FORMAT 2:1, nicht 2.76:1 wie die anderen Bänder — Markus, gleich danach: «nutze die gesamte Bildbreite, damit man noch etwas von der Gitarre sieht.» Die Gitarre liegt im Original tief unter dem Gesicht; im flachen Band fiel sie ganz weg. Das Band ist darum höher (bei 1440px 718 statt 520px) — wie bei Sparks, das ebenfalls höher steht. Schirm so hell wie möglich — gemessen am 29.09.2026 im fertigen 2:1-Band, neues Bild, weisse Schrift, schlechtester Bildpunkt, Titel / Kicker (nötig 3.0 / 4.5), Breiten 320–1920px; hier die knappsten: 320–500px 768px 1024px 1440px 1920px .64 5.02/4.95 5.24/8.66 4.74/8.40 5.01/8.40 4.94/15.4 .66 4.76/4.67 5.00/8.28 4.49/8.00 4.80/8.14 4.68/15.1 .67 4.67/4.54 4.87/8.15 4.41/7.87 4.66/7.96 4.55/15.0 <- gewählt .68 4.54/4.42✗ 4.74/7.97 4.29/7.72 4.53/7.75 4.42/14.8 Heller geht nicht: Ab .68 fällt der Kicker auf dem Telefon unter 4.5. (Mit der alten, blassen Datei brauchte es .52, im flachen Band .64.) ACHTUNG: Wird das Kopfbild ersetzt, neu messen (_werkzeuge/schirmprobe.js). */ .vv-vita { --vv-schirm-hell: .80; } /* 30.09.2026 neu gemessen (Kicker ≥ 4.5, Titel ≥ 3.0): Desktop hält bis .80, am Handy braucht es .60 — .67 lag dort knapp darunter. */ @media (max-width: 767px) { .vv-vita { --vv-schirm-hell: .60; } } .vv-vita .vv-bildkopf { width: 100%; min-height: 0; aspect-ratio: 2 / 1; } /* Telefon: Das Haus richtet Kopfbilder dort links aus. Hier sässe das Gesicht (bei 57 % der Bildbreite) dann am rechten Rand; 62 % holt es in die Mitte. */ @media (max-width: 767px) { .vv-vita .vv-bildkopf { min-height: 300px; background-position: 62% center; } }