/* =========================================================================== viceversa.swiss (Neubau) · Startseite Angelegt 16.09.2026. Kein Hex-Wert; alle Farben aus farben.css. =========================================================================== */ /* --- Slider ------------------------------------------------------------ Aufbau, Masse und Zeiten sind aus der Slider-Revolution-Vorlage der Live-Seite abgeschrieben (rev_slider_28_1). Die Positionen der Ebenen erzeugt _lib/slider-bau.php aus _lib/slider.php — hier steht nur, was für alle Ebenen gilt. Das Original legt KEINEN Schleier über das Bild. Weisse Schrift auf hellem Himmel trägt dort ein TEXTSCHATTEN (data-tsh: 3/3/2 bei der fetten, 2/2/1 bei der leichten Zeile). Das ist die bessere Lösung als mein früherer Schleier: Das Motiv bleibt unangetastet. */ .vv-slider { position: relative; display: flex; flex-direction: column; } /* Reiter: unter dem Bild, linksbündig hintereinander — Markus am 30.09.2026: «mach die caption auf der Titelseite linksbündig: 01 / Strategie und Positionierung. Danach mit vernünftigem Abstand 02 … Danach mit gleichem Abstand 03». Bis dahin drei gleiche Spalten über die ganze Breite. Nummer ÜBER dem Titel, wie im Menü. 64px Abstand: deutlich mehr als zwischen den Menüpunkten (30px), damit die drei als eigene Punkte lesbar bleiben, aber weit weg von der alten Drittelung. */ .vv-slider-reiter { display: flex; flex-wrap: wrap; column-gap: 64px; row-gap: 18px; order: 2; padding-block: 26px 0; /* width: 100%: Der Slider ist eine Flex-Spalte; ohne volle Breite schrumpft die Zeile auf ihren Inhalt und wird von margin: auto mittig gesetzt (gemessen 30.09.2026: erster Reiter bei 312 statt 100px). */ width: 100%; } /* Auf dem Telefon bleiben die drei Bezeichnungen ganz weg. Markus am 17.09.2026: «sie zu dominant». Untereinander gestapelt nahmen sie dort drei Zeilen ein und wogen schwerer als das Bild darüber. Die Folien wechseln von selbst weiter; es geht nur die Handauswahl verloren. */ @media (max-width: 767px) { .vv-slider-reiter { display: none; } } .vv-reiter { appearance: none; background: none; border: 0; cursor: pointer; font: inherit; text-align: left; padding: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; font-size: var(--vv-klein); font-weight: 400; color: var(--vv-text); transition: color .2s; } .vv-reiter:hover { color: var(--vv-rot); } .vv-reiter.vv-hier { color: var(--vv-rot); } .vv-reiter-nr { font-size: 12px; letter-spacing: .18em; opacity: .75; } /* Die Linie sitzt am TEXT, nicht am ganzen Knopf — sie beginnt darum an der linken Textkante und nicht unter der Ziffer (Markus, 17.09.2026). flex: 1 zieht sie bis an die rechte Kante der Spalte. Und sie ist halb so stark wie vorher: 1.5 statt 3px, ganz fein. */ /* Die Linie ist halb so breit wie die Spalte — Markus am 18.09.2026: «underline tabs des header sliders um 50% in der breite reduzieren». Sie hängt darum an einem ::after und nicht mehr am border-bottom: Ein Rahmen ist immer so breit wie sein Element, und das Element muss die volle Spaltenbreite behalten, damit der Text umbrechen kann. Vorher 290px bei 1440px Fenster, jetzt 145px — linksbündig an der Textkante wie zuvor. */ .vv-reiter-text { line-height: 1.3; flex: 1 1 auto; padding-bottom: 14px; position: relative; } .vv-reiter-text::after { content: ""; position: absolute; left: 0; bottom: 0; width: 50%; height: 1.5px; background: transparent; transition: background-color .2s; } .vv-reiter.vv-hier .vv-reiter-text::after { background: var(--vv-rot); } /* --- Der Schirm --------------------------------------------------------- Verfahren D der Textprobe, ohne Haarlinie und NUR AM UNTEREN RAND. Der Grund wird entsättigt und abgedunkelt — nicht mit einer Farbe überzogen und nicht unscharf gemacht. Das Foto bleibt scharf; es wird unten nur ruhiger. Nach oben blendet der Schirm bis zur Bildmitte aus und ist dort ganz weg. Vorher hatte ich zwei Bänder (oben UND unten) je Folie aus den Textlagen gerechnet. Das deckte fast das ganze Bild und war nicht, was gewünscht war. Jetzt ein Verlauf, für alle drei Folien derselbe. */ .vv-folie-schirm { position: absolute; z-index: 0; pointer-events: none; /* So hoch wie der Textblock, plus ein Auslauf nach oben und ein Stück über den unteren Bildrand hinaus. 100vw, weil der Textblock die Satzbreite hat, der Schirm aber über das ganze Bild laufen muss. */ left: 50%; transform: translateX(-50%); width: 100vw; /* 70px statt 56px über dem Textblock — Markus am 25.09.2026, nachdem der Text 58px tiefer gerückt ist. Die oberste Zeile sass danach mitten im Auslauf und hielt auf keiner Folie mehr (2.05 bis 2.60, nötig 3.0). Mit 70px oben und 70px Auslauf endet der Verlauf genau dort, wo die Zeile beginnt — dieselbe Beziehung wie auf «Leistungen» und «Sparks». */ top: -70px; bottom: -80px; backdrop-filter: saturate(.25) brightness(.52) contrast(1.05); -webkit-backdrop-filter: saturate(.25) brightness(.52) contrast(1.05); /* Ausblendend in den obersten 90px — als LÄNGE, nicht in Prozent: Ein Prozentwert verschöbe den Übergang mit der Schriftgrösse und liesse die oberste Zeile bei grossen Breiten in den Auslauf rutschen. Markus, 25.09.2026, nach demselben Eingriff am Kopfbild: «ja! genau so. bitte auch auf den slides der homepage. so sieht es viel natürlicher aus.» Der Auslauf beginnt damit schon in der oberen Zeile und läuft weit nach oben aus. Der Auslauf war 90px, solange der Text 78px über der Unterkante stand. Seit er auf 20px gerückt ist (Angleichung an «Leistungen»), gilt neu gemessen — die oberste Zeile liegt jetzt über anderen Bildpunkten. Schlechtester Bildpunkt der obersten Zeile je Folie, bei 1920px Fensterbreite: top -56px, Auslauf 90px 2.60 / 2.08 / 2.05 alle drei ✗ top -70px, Auslauf 70px 4.34 / 3.54 / 3.50 alle drei ✓ top -90px, Auslauf 70px 4.39 / 3.84 / 3.79 ✓, aber 20px mehr Abdunklung ohne Gewinn Nötig sind 3.0. Gewählt ist der kleinste Schirm, der trägt. */ mask-image: linear-gradient(to top, #000 0, #000 calc(100% - 70px), transparent 100%); -webkit-mask-image: linear-gradient(to top, #000 0, #000 calc(100% - 70px), transparent 100%); } .vv-folie-ebene { position: relative; z-index: 1; } /* Wo backdrop-filter fehlt, tritt eine schlichte Abdunklung an seine Stelle — sonst stünde die Schrift ungeschützt. */ @supports not (backdrop-filter: saturate(1)) { .vv-folie-schirm { background: color-mix(in srgb, var(--vv-schwarzrot) 48%, transparent); } } /* Der Stapel trägt die Höhe (je Umbruchstufe aus slider-bau.php). */ .vv-folien { position: relative; order: 1; overflow: hidden; } .vv-folie { position: absolute; inset: 0; overflow: hidden; background-size: cover; background-position: center; } /* Ohne Skript liegen die Folien untereinander und sind alle lesbar. */ .vv-slider:not(.vv-slider-aktiv) .vv-folien { height: auto !important; } .vv-slider:not(.vv-slider-aktiv) .vv-folie { position: relative; inset: auto; min-height: 60vh; } /* Das Raster der Vorlage: 1320px breit, mittig. Die Ebenen sitzen absolut darin; ihre Werte kommen aus slider-bau.php. */ /* z-index 3 — ÜBER dem Schirm (der hat 2). Ohne das lag der Text darunter, und backdrop-filter wirkt auf ALLES dahinter: Die weisse Schrift bekam brightness(.52) mit ab und wurde zu #848484, einem mittleren Grau. BREITE: Der Text folgt jetzt dem Seitencontainer, nicht dem Raster der Vorlage. Das Raster ist je Umbruchstufe 1320/1024/778/480 breit und mittig — bei 900px Fensterbreite begann der Text dadurch 85px vom Rand, während der Seitentext bei 24px stand (gemessen 17.09.2026). Da die Ebenen nicht mehr absolut sitzen, braucht es das Raster hier nicht: dieselben Regeln wie .vv-breite, und alles fluchtet. */ /* Text und Schirm stehen so tief wie auf «Leistungen» --------------------- Markus am 25.09.2026: «bei den 3 Bildern des Headersliders der Homepage, setze die Text- und Schattenelemente etwas weiter nach unten, dass sie sich den Leistungen angleichen». Auf «Leistungen» endet der Text 20px über der Unterkante des Bandes (padding-block: 184px 20px in leistung.css). Hier waren es 78px bei 1920px Fensterbreite — der Text stand also 58px höher als dort. Der Schirm zieht mit: er hängt am Textblock (top: -56px, bottom: -80px) und wandert darum von selbst mit nach unten, ohne seine Höhe zu ändern. */ .vv-folie-raster { position: absolute; inset: 0; z-index: 3; transform: none; padding-bottom: 20px; } .vv-folie-ebene { position: absolute; margin: 0; color: var(--vv-weiss); font-family: var(--vv-schrift); } /* Einblendung: 1000ms, wie in der Vorlage. Der Zeitpunkt je Ebene steht im data-st-Attribut und wird vom Skript gesetzt. */ .vv-slider-aktiv .vv-folie-ebene { opacity: 0; transition: opacity 1000ms ease-out; } .vv-slider-aktiv .vv-folie-ebene.vv-ebene-da { opacity: 1; } @media (prefers-reduced-motion: reduce) { .vv-slider-aktiv .vv-folie-ebene { transition: none; } } /* ÜBERBLENDUNG — «Bild 1 fadet aus, dann fadet Bild 2 langsam ein». Darum zwei verschiedene Zeiten: Das abgehende Bild geht in 800 ms weg, das kommende braucht 1600 ms und beginnt 500 ms später. Dazwischen steht kurz keines von beiden voll — genau der gewünschte Eindruck. */ .vv-slider-aktiv .vv-folie { opacity: 0; pointer-events: none; transition: opacity 800ms ease-in; } .vv-slider-aktiv .vv-folie.vv-folie-hier { opacity: 1; pointer-events: auto; transition: opacity 1600ms ease-out 500ms; } @media (prefers-reduced-motion: reduce) { .vv-slider-aktiv .vv-folie { transition: none; } } /* --- Abschnitt A: das Problem ------------------------------------------- */ /* Im Original steht hier nur Text, über die ganze Spaltenbreite (gemessen 17.09.2026 bei 1440px: 1190px breit, 21px Grad). Kein Bild — das Porträt bewegt sich eine Etage tiefer. */ .vv-start-a { padding-block: 70px 50px; } .vv-start-a h2 { margin: 12px 0 24px; } /* Titel → Text 24px, 30.09.2026 */ .vv-start-a p { line-height: var(--vv-zeile); margin: 0 0 16px; } .vv-dreiklang { font-size: 1.56rem; font-weight: 500; color: var(--vv-rot); margin: 22px 0 22px !important; } /* Die drei Teile blenden nacheinander ein — das Skript setzt `vv-spricht` auf die Zeile und dann `vv-gesagt` je Wort. Ohne Skript greift keine der beiden Regeln, und alles steht sofort da. Der Aufwärtsgang ist bewusst klein (.22em): Das Wort soll ankommen, nicht hereinfliegen. */ .vv-dreiklang span { display: inline-block; } .vv-dreiklang.vv-spricht span { opacity: 0; transform: translateY(.22em); } .vv-dreiklang.vv-spricht span.vv-gesagt { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s cubic-bezier(.22, .61, .36, 1); } /* Variante in Versalien — gesperrt, weil Grossbuchstaben ohne Sperrung zu eng laufen, und eine Spur kleiner, weil Versalien optisch grösser wirken als Gemeine. */ .vv-dreiklang.vv-versal { text-transform: uppercase; letter-spacing: .08em; font-size: 1.4rem; } /* --- Abschnitt B: Text und bewegtes Bild -------------------------------- Nachgebaut nach «Das viceversa Prinzip / Die andere Perspektive», am 17.09.2026 am Original bei 1440px vermessen: Abschnitt volle Breite, 1085px hoch Hintergrund B0021519 (dasselbe Studioporträt), cover, mittig Parallaxe data-parallax-speed 0.2 Spalten links 720px (50 %) leer — dort steht Markus im Bild rechts 576px (40 %), Text bei x = 760, 436px breit Caption 80px unter der Oberkante Titel 114px, 42px/50.4px, Schnitt 500 erster Absatz 189px, 20px/34px Absatzabstand 88px unten 140px Polster Die Rechnung für die Höhe der Bildebene stammt Zeile für Zeile aus dem Theme (goodlayers-core/include/js/page-builder.js, Z. 660): Ebenenhöhe = Abschnitthöhe + (Fensterhöhe − Abschnitthöhe) × Tempo Versatz = (Scrollstand − Abschnittsoberkante) × Tempo Gegenprobe an zwei Abschnitten des Originals: 605 + (900−605)×0.2 = 664 (gemessen 663.8) und 1085 + (900−1085)×0.2 = 1048 (gemessen 1048). Die Formel ist so gebaut, dass die Ebene den sichtbaren Ausschnitt immer deckt — auch wenn sie kürzer ist als der Abschnitt. */ .vv-parallax { position: relative; overflow: hidden; } /* --- Das Bild liegt hinter dem ganzen Abschnitt ------------------------- So wie im Original: Das Foto füllt den Abschnitt, der Text steht in der rechten Spalte darüber. Ausschnitt und Lage wie dort — background-size: cover, mittig, ohne Zoom und ohne Beschnitt. Zur Lesbarkeit steht weiter unten, was gemessen ist. Kurz: Das Foto wird nach unten dunkel, und mein Text ist länger als der des Originals. Markus hat sich am 17.09.2026 ausdrücklich für die Original-Anlage entschieden — kein Schleier, kein Beschnitt. */ .vv-parallax-bild { position: absolute; top: 0; left: 0; right: 0; background-image: var(--vv-foto); background-size: cover; background-position: center center; background-repeat: no-repeat; /* Rückfall, solange das Skript die Höhe noch nicht gesetzt hat. */ height: 100%; } .vv-parallax-raster { position: relative; z-index: 2; display: grid; grid-template-columns: 50% 1fr; } /* 526px ist die Inhaltsbreite der rechten Spalte im Original (gdlr-core-pbf-column-content, gemessen bei 1440px); mit 40 + 50 Polster steht der Text dann genau auf 760px und ist 436px breit. */ .vv-parallax-text { padding: 80px 50px 140px 40px; max-width: 526px; } /* Der Titel im Original: 42px auf 50.4px Zeile, Schnitt 500. Mit dem grösseren Hausgrad (45px) brach «Die andere Perspektive» auf zwei Zeilen um und schob alles darunter um 59px nach unten. */ /* 10px unter der Caption — so das Original (margin-bottom der gdlr-core-title-item-caption). Damit steht der Titel auf 114px. */ .vv-parallax-text .vv-caption { margin-bottom: 10px; } .vv-parallax-text h2 { font-size: 42px; line-height: 1.2; font-weight: 500; margin: 0 0 24px; } .vv-parallax-text p { font-size: 20px; line-height: 1.7; margin: 0 0 88px; } .vv-parallax-text p:last-child { margin-bottom: 0; } /* Abschnitt C (rotes Band «Teile wirken») ist am 30.09.2026 weggefallen; seine drei Sätze stehen im Schlussblock, seit 30.09. als Zitat (.vv-start-zitat). */ /* --- Abschnitt D: die Trilogie ------------------------------------------ */ .vv-start-d { padding-block: 40px 40px; } /* --- Die Trilogie-Kacheln ------------------------------------------------ Aufbau, Masse und Bewegung stammen aus dem Theme selbst — nicht nachgemessen, sondern abgelesen: die Feature-Box von Goodlayers (`gdlr-core-feature-content` in page-builder.css, dazu die Inline-Werte aus dem HTML der Live-Seite und die Überschreibung in corzo-style-custom.css). Behälter position: relative; overflow: hidden Bild 700 × 870 Schleier #000, Deckung 0.01; beim Überfahren 0.8, 300ms Textkasten absolut unten, Polster 30 / 50 / 40 / 55px Nummer 13px / 500, #a5a5a5 Titel 29px / 600, weiss, 1px Linie darunter, margin-bottom 22px (im Theme 18, vom Kunden auf 22) Aufklappteil max-height 0 → 250px, 550ms ease-out Fliesstext 18px / 400, weiss, Absätze 5px Abstand «Mehr» 18px / 400, Pfeil 31px, 10px Abstand, mittig Zwei Abweichungen, beide begründet: 1. Das Theme setzt den Strich unter dem Titel in #d32525 — seiner eigenen Akzentfarbe, nicht der des Hauses. Hier steht --vv-rot. 2. Statt #a5a5a5 für die Nummer ein Weiss mit 70 % Deckung, und statt reinem Schwarz für den Schleier das Schwarzrot des Hauses. Feste Grau- und Schwarzwerte wären zwei weitere Farben in der Palette; die Wirkung ist dieselbe. Ohne Zeigegerät bliebe der Fliesstext unerreichbar. Darum klappt er auch bei Tastaturfokus auf, und wer weniger Bewegung wünscht, sieht ihn dauerhaft. */ /* Markus, 20.09.2026: «auf der website sollten die kacheln direkt aneinander andocken, ohne zwischenräume.» — Darum gap: 0, breit wie schmal. Die drei Bilder bilden damit eine durchgehende Fläche; bei der Wortwolke (siehe _werkzeuge/wolke/) laufen die Wörter auf den Schnittkanten ohne Bruch von einer Kachel in die nächste. */ .vv-trilogie { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; } .vv-kachel { position: relative; display: block; overflow: hidden; text-decoration: none; color: var(--vv-weiss); } .vv-kachel-bild { aspect-ratio: 700 / 870; } .vv-kachel-bild img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; } /* --- Die Wortwolke ------------------------------------------------------- Seit dem 20.09.2026 steht in den drei Kacheln kein Foto mehr, sondern ein Ausschnitt EINER Zeichnung über alle drei. Der dunkle Grund gehört dazu: Die Wolke ist Schrift auf Schwarzrot, kein Bild mit eigenem Hintergrund. Die Bewegung (wachsen, schrumpfen, auswechseln, wandern) steuert _lib/wolke.php. Hier stehen nur die Übergänge — ohne sie springen die Änderungen, statt zu fliessen. transform-box: fill-box heisst, dass ein Wort um seine EIGENE Mitte wächst und nicht um den Nullpunkt der Zeichnung. */ /* Markus, 20.09.2026: «Das Violett der Hintergründe Trilogie ist sehr dunkel. verwende bitte das viceversa-rot wie im Logo.» — Also --vv-rot (#8e172c) statt --vv-schwarzrot (#30001b). Weisse Schrift darauf: 8.07:1, laut Palettentabelle. */ .vv-kachel { background: var(--vv-rot); } .vv-wolke { display: block; width: 100%; height: 100%; } .vv-wolke text { transform-box: fill-box; transform-origin: 50% 50%; /* 01.10.2026 schneller (vorher 1500 / 4200 / 1100 / 700ms): «bewege die Begriffe schneller, lasse sie sichtbarer wandern» (Markus). */ transition: font-size 1000ms cubic-bezier(.3, 0, .2, 1), transform 2200ms cubic-bezier(.35, 0, .25, 1), fill-opacity 800ms ease, opacity 500ms ease; } @media (prefers-reduced-motion: reduce) { .vv-wolke text { transition: none; } } /* Das Theme legt reines Schwarz darüber. Hier das Schwarzrot des Hauses — es gibt kein reines Schwarz in dieser Palette, und der Unterschied ist bei 80 % Deckung ein Hauch Wärme statt Neutralgrau. */ .vv-kachel-schleier { position: absolute; inset: 0; background: var(--vv-schwarzrot); opacity: .01; transition: opacity 300ms; } .vv-kachel:hover .vv-kachel-schleier, .vv-kachel:focus-visible .vv-kachel-schleier { opacity: .8; } /* Die Abdunklung hängt am TEXTKASTEN, nicht am Bild. Markus, 19.09.2026: «die Bilder sollten original hell dargestellt, für die Lesbarkeit erst mit aufgeschaltetem Text abgedunkelt werden.» Bis zum 19.09.2026 lag ein Verlauf über der unteren Bildhälfte — ab 40 % der Höhe, dauerhaft, auch dort, wo gar kein Text steht. Jetzt ist der Verlauf so hoch wie der Textkasten selbst: Er beginnt an dessen Oberkante bei null Deckung, ist nach 22 % bei 62 % und am unteren Rand bei 82 %. Das Bild bleibt auf rund 70 % seiner Höhe unberührt. Warum am Kasten und nicht am Bildrand: Jeder Verlauf, der unten hängt, ist genau dort am schwächsten, wo die NUMMER steht — sie sitzt zuoberst im Kasten. Vier Anläufe mit Bildverläufen (Werkzeug _werkzeuge/kacheln/) sind daran gescheitert; der Kastenverlauf löst es, weil er mit dem Text wandert statt mit dem Bildrand. Die Nummer steht jetzt in vollem Weiss statt zu 70 % durchscheinend. Das war der letzte Wert unter der Schwelle (3.82:1 auf Kachel 2, deren Foto genau dort hell ist). Das Theme setzt hier #a5a5a5 — auf dieses Zitat wird verzichtet, es kostet Lesbarkeit. Am 19.09.2026 am gezeichneten Bild gemessen, Kachel 393 × 489 px, Zeilenkästen (Range.getClientRects), schlechtester Punkt je Zeile: Kachel Ruhe: Nr / Titel Überfahren: Nr / Titel / Text 1 Strategie 19.14 / 16.43 18.11 / 17.04 / 17.62 2 Story 5.87 / 14.25 18.73 / 15.30 / 16.27 3 Leadership 11.39 / 9.40 15.09 / 15.54 / 16.63 Nötig sind 4.5:1 für Nummer und Fliesstext, 3:1 für den Titel (29px fett = grosse Schrift). Zum Vergleich der alte Stand: Kachel 2 kam im Ruhezustand auf 3.99:1 bei der Nummer — er lag durch. */ /* Markus, 20.09.2026: «die Titel sollten nah an den unteren Rand gesetzt werden, vielleicht auch kleiner, damit sie die Wortwolke nicht konkurrenzieren.» Drei Schrauben, bewusst gegen die Vorlage: Das Corzo-Theme setzt 29px und 40px Polster unten. Hier 23px und 24px — der Titel benennt die Kachel, er soll sie nicht anführen. Der Abstand unter dem roten Strich lag bei 62px (22px Titelabstand + 40px Polster). Jetzt 31px. Die Luft, die der Fliesstext beim Aufklappen braucht, sitzt nicht mehr am Titel, sondern am Absatz darunter — dort ist sie im Ruhezustand weggeschnitten und kostet nichts. */ .vv-kachel-kasten { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 50px 24px 55px; /* 20.09.2026 in Hausrot statt Schwarzrot — Markus: «auch der Hintergrund hinter den Titeln soll in derselben Farbe #8e172c». Die Deckung musste dabei STEIGEN: Schwarzrot verdunkelt ein weisses Wort viel stärker als Rot. Mit den alten 62/82 % kam die Nummer im schlechtesten Fall — ein voll weisses Wort genau dahinter — auf 3.97:1. Mit 78/92 % sind es 5.81:1, gerechnet und unten gemessen. */ background: linear-gradient(to bottom, color-mix(in srgb, var(--vv-rot) 0%, transparent) 0%, color-mix(in srgb, var(--vv-rot) 78%, transparent) 22%, color-mix(in srgb, var(--vv-rot) 92%, transparent) 100%); } .vv-kachel-nr { display: block; font-size: 12px; font-weight: 500; color: var(--vv-weiss); } /* Der Strich unter dem Titel war rot — auf rotem Grund wäre er unsichtbar. Markus: «Die Underlines … dann weiss.» */ .vv-kachel-titel { display: inline-block; font-size: 23px; font-weight: 600; line-height: 1.25; color: var(--vv-weiss); margin: 0 0 7px; border-bottom: 1px solid var(--vv-weiss); } .vv-kachel-auf { max-height: 0; overflow: hidden; transition: max-height 550ms ease-out; } .vv-kachel:hover .vv-kachel-auf, .vv-kachel:focus-visible .vv-kachel-auf { max-height: 250px; } /* Der Abstand zum Titel sitzt hier, nicht am Titel: Im Ruhezustand ist dieser Block auf max-height 0 gestellt und überlaufsicher — der Rand wird also weggeschnitten und drückt den Titel nicht vom Rand weg. */ .vv-kachel-auf p { font-size: 18px; font-weight: 400; line-height: 1.55; color: var(--vv-weiss); margin: 14px 0 5px; } .vv-kachel-mehr { display: inline-block; font-size: 18px; font-weight: 400; color: var(--vv-weiss); margin-top: 10px; } .vv-kachel-mehr i { font-style: normal; font-size: 31px; margin-left: 10px; vertical-align: middle; line-height: 1; } @media (prefers-reduced-motion: reduce) { .vv-kachel-schleier { opacity: .55; transition: none; } .vv-kachel-auf { max-height: none; transition: none; } } /* --- Die Lagen — jetzt im Schlussblock ----------------------------------- */ /* Bis zum 19.09.2026 ein eigener Abschnitt auf hellem Grund. Seither stehen die Lagen IM Schlussblock auf der Netzpunkte-Grafik; die Farbangaben unten gelten für hellen Grund und werden weiter unten für den dunklen überschrieben. Der Regelsatz bleibt getrennt, weil die Lagen auch anderswo stehen könnten. */ /* «Wo steht Ihr gerade?» — drei Lagen, drei Leistungsbereiche. Umgebaut am 18.09.2026: vorher vier Sätze nebeneinander mit einem 12 × 1px-Strich davor, ohne erkennbare Ordnung. Jetzt trägt jede Lage den Namen ihres Bereichs und führt dorthin. Die Haarlinie oben ist 1.5px — dasselbe Mass wie im Menü, bei den Slider-Reitern und im Fuss. Beim Überfahren färbt sich der Name und die Linie wird kräftiger; mehr Bewegung braucht es nicht, der ganze Block ist anklickbar. */ .vv-lage { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 34px; } .vv-lage a { display: block; text-decoration: none; color: inherit; padding-top: 16px; border-top: 1.5px solid var(--vv-rot); transition: border-color .2s; } /* Titel und Text liegen in ZWEI GETEILTEN ZEILEN (Subgrid): Bricht ein Titel um, rücken alle drei Texte gleich tief. Seit die Titel 1.3rem gross sind (29.09.2026), bricht der dritte auf Französisch auf jeder Breite um, auf Deutsch und Englisch um 1000px — der dritte Text stand dann 26px tiefer als die beiden anderen. Einspaltig (unter 1000px) gilt das nicht, siehe unten. Ohne Subgrid-Unterstützung bleibt es beim alten Verhalten. */ .vv-lage li { display: grid; grid-row: span 2; grid-template-rows: subgrid; } .vv-lage a { display: grid; grid-row: span 2; grid-template-rows: subgrid; } /* Der Bereichsname ist der TITEL der Lage — Markus am 29.09.2026: «'strategie und positionierung' und die anderen titel sind immer noch gleich klein», sie sollen grösser sein als der Text darunter, «gleich wie 'Interne Fachpersonen befähigen'» (Leistungsseiten, 1.3rem). Bis dahin 14px mit 1px Sperrung — das Mass einer Beschriftung, nicht eines Titels. Die Sperrung fällt mit der Grösse weg. */ .vv-lage-bereich { display: block; font-size: 1.3rem; font-weight: 500; line-height: 1.25; color: var(--vv-rot); margin-bottom: 10px; transition: color .2s; } .vv-lage-text { display: block; font-size: 19px; font-weight: 300; line-height: 1.55; color: var(--vv-text); } .vv-lage a:hover { border-top-color: var(--vv-rot-dunkel); } .vv-lage a:hover .vv-lage-bereich { color: var(--vv-rot-dunkel); } /* Die frühere Schlusszeile (.vv-lage-schluss) ist seit 30.09.2026 der Schlusssatz des Zitats (.vv-start-zitat-schluss). */ /* --- Schlussblock -------------------------------------------------------- */ /* Das Kontaktfeld trägt seit dem 18.09.2026 die Netzpunkte-Grafik (Hintergrund Netzpunkte rot.jpg, 2000 × 1200, aus der Dropbox). Die Hausfarbe bleibt darunter liegen: Wo das Bild nicht reicht — bei sehr breiten oder sehr hohen Fenstern —, steht weiter --vv-schwarzrot und nicht Weiss. Das Bild selbst ist dunkel, seine hellsten Stellen sind die Knotenpunkte des Netzes; die Kontrastwerte der Textelemente stehen in der Gegenprobe darunter. */ /* 20.09.2026: Hausrot statt Schwarzrot, wie die Kacheln darüber. */ .vv-start-schluss { position: relative; isolation: isolate; background: var(--vv-rot) url('/assets/bilder/hintergrund/netzpunkte-rot.jpg') center / cover no-repeat; color: var(--vv-grund); padding-block: 62px; } /* Der Schleier über der Grafik — nötig, nicht schmückend. Gemessen am 18.09.2026: Das Bild ist im Mittel sehr dunkel (0.034), trägt aber helle Knotenpunkte bis 0.609 — heller Text darauf käme im schlechtesten Fall auf 1.05:1. Nötig sind 4.5:1. Der hellste Punkt des Bildes ist rgb(229,197,202). Gemessen wurde je Deckung der schlechteste Wert über alle fünf Textelemente: 30 % → 10 % 2.70:1 fällt durch 40 % → 12 % 3.47:1 fällt durch 50 % → 15 % 4.50:1 genau an der Grenze, keine Reserve 58 % → 15 % 5.25:1 gesetzt 72 % → 18 % 6.80:1 unnötig dunkel, das Netz verschwindet Nach rechts läuft der Schleier auf 15 % aus — aber erst ab 70 % der Breite. Der Fliesstext ist bis 640px breit; bei 1000px Fenster reicht er bis 68 % der Breite. Mit dem früheren Knick bei 46 % lag er dort teilweise im dünnen Teil und kam auf 4.53:1 — knapp über der Grenze, ohne Reserve. Ab 70 % steht rechts kein Text mehr, dort darf das Netz atmen. ACHTUNG beim Nachmessen: Gemessen werden die ZEILENKÄSTEN des Textes (Range.getClientRects), nicht die Blöcke. Ein h2 ist so breit wie die Spalte — 1240px —, die Schrift darin nur 396px. Über den Block gemessen fällt der helle Bildteil rechts mit ins Ergebnis, und die Messung meldet 3.33:1 statt der wahren 8.53:1. Genau dieser Fehler hat mich am 18.09.2026 fast dazu gebracht, den Schleier unnötig auf 72 % hochzudrehen. */ /* 19.09.2026: Der Schleier ist FLACH, nicht mehr nach rechts auslaufend. Der Verlauf hatte einen guten Grund: Solange nur die Einladung hier stand, war der Text nie breiter als 640px, und rechts durfte das Netz sichtbar bleiben. Seit die drei Lagen im selben Abschnitt stehen, reicht der Text über die volle Breite von 1240px — und die dritte Spalte lag genau im hellen Teil. Gemessen mit dem alten Verlauf: Lage 3 kam auf 2.82:1, Lage 1 und 2 auf 4.17 und 4.23 — alle drei unter den nötigen 4.5:1 für 19px. */ .vv-start-schluss::before { content: ""; position: absolute; inset: 0; z-index: -1; /* 58 % reichten über Schwarzrot. Über Hausrot nicht: Der hellste Punkt der Netzpunkte-Grafik ist rgb(229,197,202), und ein roter Schleier dämpft ihn weniger als ein schwarzroter — gerechnet 4.40:1 statt der nötigen 4.5. Darum 72 %. */ background: color-mix(in srgb, var(--vv-rot) 72%, transparent); } .vv-start-schluss h2 { margin: 12px 0 14px; color: var(--vv-grund); } .vv-start-schluss p { line-height: 1.7; margin: 0 0 12px; max-width: 640px; } /* Die Lagen auf dem dunklen Grund ---------------------------------------- Auf hellem Grund trägt der Bereichsname die Hausfarbe und die Haarlinie ist rot. Beides fällt hier aus: #8e172c auf #30001b ist 1.4:1 — als Text unlesbar und als Linie kaum zu sehen. Darum hell. Der Fliesstext der Lagen steht in --vv-hell-gedaempft, der Bereichsname in vollem --vv-grund: So bleibt die Rangfolge (Name vor Satz) erhalten, die auf hellem Grund die Farbe leistete. */ .vv-start-schluss .vv-lage a { border-top-color: color-mix(in srgb, var(--vv-grund) 55%, transparent); } .vv-start-schluss .vv-lage a:hover { border-top-color: var(--vv-grund); } .vv-start-schluss .vv-lage-bereich { color: var(--vv-grund); } .vv-start-schluss .vv-lage a:hover .vv-lage-bereich { color: var(--vv-hell-gedaempft); } .vv-start-schluss .vv-lage-text { color: var(--vv-grund); } .vv-start-mitte { width: 62%; margin-inline: auto; } /* Mittelspalte, 30.09.2026 */ /* DAS ZITAT unter den Lagen (30.09.2026). Bauart des Lorenz-Zitats (leistung.css, .vv-zitat): 3px-Linie links, kursiv, grösser als der Fliesstext. Auf dem dunkelroten Grund ist die Linie hell. Zwei Klassen im Selektor, weil «.vv-start-schluss p» sonst Rand und Breite setzt — derselbe Fehler, an dem hier schon zweimal ein Abstand verloren ging. */ .vv-start-schluss .vv-start-zitat { margin: 64px 0 0; padding-left: 28px; border-left: 3px solid var(--vv-grund); } .vv-start-schluss .vv-start-zitat p { font-size: clamp(21px, 1.8vw, 25px); font-style: italic; font-weight: 300; line-height: 1.45; color: var(--vv-grund); margin: 0 0 6px; max-width: none; text-wrap: pretty; } /* Drei Ebenen (30.09.2026): Feststellung, dann der Dreischritt als Block (Zeilen dicht, ohne Absatzabstand), dann das Angebot mit dem grössten Abstand. 18px < 24px: Der Schritt zum Angebot bleibt der deutlichste. */ .vv-start-schluss .vv-start-zitat .vv-start-zitat-fest { margin: 0 0 18px; } .vv-start-schluss .vv-start-zitat .vv-start-zitat-drei { margin: 0; } .vv-start-zitat-drei span { display: block; } /* Der Schlusssatz beantwortet die Überschrift: abgesetzt, kräftiger. */ .vv-start-schluss .vv-start-zitat .vv-start-zitat-schluss { margin: 24px 0 0; font-weight: 500; } /* Die Einladung schliesst an den Schlusssatz an, sie eröffnet nichts Neues — darum ein sichtbarer Abstand davor, aber keine zweite Caption-Zeile und kein zweites h2-Mass. */ .vv-einladung { margin: 52px 0 12px; } .vv-start-schluss .vv-einladung + p { margin-bottom: 22px; } @media (max-width: 999px) { /* Der frühere Sonderfall für schmale Fenster (Schleier flach statt auslaufend) ist seit dem 19.09.2026 die Regel — er steht oben. */ /* Schmal: Text unter das Bild statt darüber — sonst stünde er über Markus' Gesicht. Die Bildebene wird zur festen Fläche oben. */ .vv-parallax-raster { grid-template-columns: 1fr; } .vv-parallax-leer { height: 62vw; max-height: 420px; } .vv-parallax-text { padding: 40px 24px 60px; max-width: none; background: var(--vv-grund); } .vv-parallax-text p { margin-bottom: 30px; } /* Schmal gibt es kein Überfahren. Bliebe der Aufklappteil zu, wäre der Fliesstext auf dem Telefon unerreichbar — er steht darum offen, und der Schleier liegt dauerhaft auf 55 %. Gemessen mit diesem Wert: der schlechteste der zwölf Textpunkte kommt auf 6.52:1. */ .vv-kachel-auf { max-height: none; } .vv-kachel-schleier { opacity: .55; } .vv-kachel-kasten { padding: 24px 28px 20px; } .vv-trilogie { grid-template-columns: 1fr; gap: 0; } /* Markus, 27.09.2026: «die Wortwolken-Kacheln … sehen auf dem Handy unschön aus, sie nehmen den ganzen Screen ein.» Untereinander gestapelt ergab das Hochformat 700:870 bei 375px Fensterbreite drei Kacheln von je 406px (zusammen 1218px), bei 768px je rund 900px. Darum hier eine flache Kachel mit fester Höhe statt des Seitenverhältnisses. Die Wolke steht im SVG mit «slice» und wird mittig beschnitten. Nachtrag am selben Tag: «viel besser. mach die wortwolkenkacheln noch etwas höher und trenne die drei durch eine feine linie in hintergrundfarbe.» Darum 80vw statt 68vw (bei 375px 300 statt 255px) und eine Linie in --vv-grund zwischen den Kacheln. Nebeneinander (breit) bleiben sie nahtlos, dort läuft die Wolke über die Kanten. */ .vv-kachel-bild { aspect-ratio: auto; height: clamp(280px, 80vw, 360px); } .vv-kachel + .vv-kachel { border-top: 1px solid var(--vv-grund); } .vv-lage { grid-template-columns: 1fr; gap: 26px; } .vv-lage li, .vv-lage a { display: block; grid-row: auto; } .vv-start-mitte { width: auto; } .vv-start-schluss .vv-start-zitat { margin-top: 48px; padding-left: 20px; } .vv-start-schluss .vv-start-zitat p { font-size: 20px; } } /* Die Bilder sind Hochformate aus Markus' Archiv (Mood Pics / «Leistungsbereich …») — dieselben, die das Original benutzt. Sie werden auf 700 × 870 beschnitten wie dort. */ /* --- Das Logoband ------------------------------------------------------- Markus am 18.09.2026: «füge die Logos im Sinne eines Bandes … ein, ebenfalls auf zwei Reihen». 46 Logos, hälftig geteilt. Die obere Reihe wandert nach links, die untere nach rechts — zwei Gegenläufe lesen sich als Band, zwei Gleichläufe als Fehler. Die Spur steht zweimal im Markup und wandert um genau 50 % ihrer Breite; danach steht der Anfang wieder an derselben Stelle, und die Bewegung springt nicht. Tempo: 96 Sekunden je Umlauf, das sind rund 48px in der Sekunde. Bewusst langsam — ein Band soll nebenherlaufen, nicht ziehen. Beim Überfahren hält es an, damit man ein Logo ansehen kann. Wer weniger Bewegung wünscht, sieht es stillstehen (prefers-reduced-motion). Die Ränder blenden über eine Maske aus, damit die Logos nicht abgeschnitten an der Fensterkante kleben. GRÖSSE seit 29.09.2026 wie auf viceversa.swiss. Rückmeldung: «Logo Herzstiftung muss etwas grösser dargestellt werden. Ebenso das Logo Schweizerische Eidgenossenschaft ist so nicht lesbar.» Gemessen: Die alte Seite zeigt jede Logodatei (280 × 140, mit Rand) mit 207 × 103px, hier waren es 92 × 46 — weniger als die Hälfte. Die Grösse der alten Seite war zu viel — Markus nach dem Einbau: «die logos sind jetzt riesig!» Darum die Mitte: Fächer 150 × 75, gut 1.6-mal die ursprüngliche Grösse. Abstand 20px, weil jede Datei ihren Rand schon mitbringt. Tempo wie vorher, rund 48px in der Sekunde: eine halbe Spur (24 Fächer à 170px, dazu die breiteren) — gemessen 4080 bzw. 4215px in 88s, also 46–48px in der Sekunde. Nochmals angepasst am selben Tag — Markus: «Logos 15% kleiner und die Abstände 15% zwischen den Logos vergrössern.» Fächer 128 × 64, Abstand 23px; gemessen 3624 bzw. 3739px je halbe Spur, in 77s also 47–49px in der Sekunde, wie vorher. Seit dem Umbau auf gleiche Abstände (66px, siehe unten) gemessen 4061 bzw. 4136px je halbe Spur — in 85s also wieder 48–49px in der Sekunde. */ .vv-logoband { margin-top: 34px; overflow: hidden; mask-image: linear-gradient(to right, transparent 0, #000 90px, #000 calc(100% - 90px), transparent 100%); -webkit-mask-image: linear-gradient(to right, transparent 0, #000 90px, #000 calc(100% - 90px), transparent 100%); } .vv-logoband-reihe { overflow: hidden; } .vv-logoband-reihe + .vv-logoband-reihe { margin-top: 8px; } .vv-logoband-spur { display: flex; align-items: center; gap: 0; list-style: none; margin: 0; padding: 0; width: max-content; animation: vv-band 85s linear infinite; } .vv-logoband-zurueck .vv-logoband-spur { animation-direction: reverse; } .vv-logoband:hover .vv-logoband-spur { animation-play-state: paused; } /* FESTE Fächer, nicht bildbreite. Sonst wächst die Spur, während die Logos nachladen — und `translateX(-50%)` rechnet je Bild neu. Am 18.09.2026 genau so gemessen: Die Spur war erst 2880px breit, nach dem Nachladen 3472px, und das Band sprang. Mit festem Fach steht die Breite vom ersten Bildaufbau an fest, und der Umlauf schliesst lückenlos. */ /* Der Abstand als Rand AN JEDEM Fach, nicht als gap: Mit gap fehlt nach dem letzten Fach ein Zwischenraum, die halbe Spur ist dann um einen halben Abstand kürzer als ein Durchgang — und beim Neustart springt das Band (gemessen 29.09.2026: 5344 statt 5352px, vorher mit 56px-gap ein Sprung von 28px). Mit Rand sind beide Hälften exakt gleich lang. */ /* Jedes Fach so breit wie sein Logo (--vv-logobreite setzt die Seite, start-seite.php), dazwischen überall 66px — der Abstand zwischen UZB und MSD, den Markus als Mass gesetzt hat. */ .vv-logoband-spur li { flex: 0 0 auto; display: flex; margin-right: 66px; align-items: center; justify-content: center; height: 64px; } .vv-logoband-spur img { display: block; height: auto; width: calc(var(--vv-logobreite) * 1px); max-width: none; } @keyframes vv-band { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .vv-logoband-spur { animation: none; } } /* Am Handy trägt die flache Kachel den Fliesstext nicht mehr: Der Kasten allein war 275–359px hoch und hätte die Wolke ganz zugedeckt. Es bleiben Nummer, Titel und «Mehr». Der Text steht auf der Zielseite, und die ganze Kachel ist der Link dorthin. */ @media (max-width: 599px) { .vv-kachel-auf p { display: none; } .vv-kachel-mehr { margin-top: 4px; } } @media (max-width: 767px) { /* Am Handy alles im Verhältnis 102/128 — Logos und Abstand. */ .vv-logoband-spur li { height: 51px; margin-right: 53px; } .vv-logoband-spur img { width: calc(var(--vv-logobreite) * 0.797px); } .vv-logoband { mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%); -webkit-mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%); } } /* --- Die vier Zähler: Gestaltung wie auf viceversa.swiss ------------------ Markus am 29.09.2026: «bitte setze die Gestaltung der bewegten Zahlen wie auf der bisherigen Site viceversa.swiss.» Abgelesen am 29.09.2026 im Browser auf viceversa.swiss (berechnete Werte, nicht das Backend), Fensterbreite 1440px: Nummer Jost 13px / 500, #a5a5a5 Zahl Jost 48px / 600, #393939, Zeilenhöhe 48px Beschriftung Jost 14px / 500, Versalien, Sperrung 2px, #8e172c Strich 110 × 3px, #8e172c Abstände Nummer → Zahl 25px, Zahl → Beschriftung 9px, Beschriftung → Strich 55px; Spalten je 30px oben/unten EINE Abweichung: die Nummer. #a5a5a5 auf --vv-grund sind 2.2:1 — bei 13px nötig sind 4.5:1. Hier stand schon einmal ein Grau, das niemand nachgemessen hatte (siehe viceversa.css, «Vier Zähler»). Genommen ist das hellste Grau des Hauses, das trägt: 75 % Text auf Grund, 4.79:1 (dieselbe Mischung wie im Netz-Abschnitt). Die Zahl in --vv-text (#3d3d3d) statt #393939 — dieselbe Wirkung, keine neue Farbe; 9.64:1. Beschriftung und Strich in --vv-rot, 8.07:1. Seit dem 29.09.2026 auch auf der viceversa-Seite (Markus: «an das bestehende Layout angepasst»). Beide rufen _lib/mandate.php auf; die Klasse .vv-zaehler trägt die Gestaltung. */ .vv-zaehler { gap: 0 30px; margin-top: 30px; } .vv-zaehler .vv-zahl { gap: 0; padding-block: 30px; } .vv-zaehler .vv-zahl-nr { font-size: 13px; font-weight: 500; letter-spacing: 0; line-height: 1.2; margin-bottom: 25px; color: color-mix(in srgb, var(--vv-text) 75%, var(--vv-grund)); } .vv-zaehler .vv-zahl-wert { font-size: 48px; font-weight: 600; line-height: 1; color: var(--vv-text); margin-bottom: 9px; } .vv-zaehler .vv-zahl-lbl { font-size: 14px; font-weight: 500; line-height: 1.2; letter-spacing: 2px; text-transform: uppercase; color: var(--vv-rot); } .vv-zaehler .vv-zahl::after { content: ""; display: block; width: 110px; height: 3px; margin-top: 55px; background: var(--vv-rot); } @media (max-width: 599px) { .vv-zaehler .vv-zahl { padding-block: 18px; } .vv-zaehler .vv-zahl::after { margin-top: 28px; } }