/* ============================================================================ Christiane Vogel — Startseite Gebaut 25.08.2026 nach dem freigegebenen Entwurf vom 25.08.2026 (../../../02_Grundlagen/Briefing/2026-08-25-freigegebener-entwurf/). Arbeitsteilung der beiden CSS-Dateien: tokens.css bildet den Brand Guide ab. Dort steht NUR, was im Guide steht. site.css ist der Bau. Alles, was der Guide nicht kennt und der Entwurf vorgibt, steht hier — jeweils mit der Messung dazu, aus der es stammt. Keine Zahl in dieser Datei ist geraten. ============================================================================ */ /* --- Am Entwurf gemessen, nicht im Brand Guide ----------------------------- Alle Werte aus dem PDF des freigegebenen Entwurfs (1646 px breiter Bogen, Textmasse aus den PDF-Textrahmen, Flächenfarben aus Pixelproben). 1 SEKTIONSTITEL. Der Guide sagt 24 px. Der Entwurf setzt sie auf 26–32 px: „Wenn Veränderung da ist" 32, „Lassen Sie uns … sprechen." 32, „Leadership-Kompass:" 28, „Meine Leistungsräume" 28, „Gedanken, Fragen" 28, „Brücken bauen" 28, „Fragen, die potenzielle Kund:innen" 28, „Passgenaue Formate" 26. Gebaut ist der Entwurf, weil er das freigegebene Dokument ist. Der Guide bleibt in tokens.css unverändert stehen. Zwei unabhängige Gegenproben stützen die Messung: Hero misst exakt 48 px und Fliesstext exakt 14 px, also genau die beiden Zahlen des Guides. 2 FLÄCHENFARBEN. Der Entwurf benutzt drei Töne, die in der Markenpalette nicht vorkommen: gemessen #f9f8f4 warmes Band (Kompasslinie, Impulse, Abschluss-CTA) gemessen #f8f9fb kühles Band (Formate, Analyse) gemessen #0a243a Fuss Dieser Bau erfindet dafür keine Hexzahl. Das kühle Band nimmt Off-White #f8fafc aus dem Guide (Abstand zu #f8f9fb ist mit blossem Auge nicht zu sehen), der Fuss nimmt Slate 800 #1e293b, und das warme Band wird aus Warm Sand abgeleitet — der Guide weist #e7d5c7 ausdrücklich „sanften Hervorhebungen" zu. Der Fuss ist die sichtbare Abweichung: #0a243a ist spürbar dunkler und blauer als #1e293b. Entscheidung gehört der Kundin. -------------------------------------------------------------------------- */ :root { /* Sektionstitel, am Entwurf gemessen */ --cv-section-size: 28px; --cv-section-lh: 1.18; --cv-section-size-lg: 32px; --cv-section-size-sm: 26px; /* Aus Markenfarben abgeleitete Flächen, keine neuen Hexzahlen */ --cv-band-warm: color-mix(in srgb, var(--cv-sand) 18%, #ffffff); --cv-band-cool: var(--cv-off-white); --cv-footer-bg: var(--cv-slate-800); /* Raster. Der Entwurf setzt den Inhalt auf 1460 von 1646 px Bogenbreite, also 88,7 % mit 93 px Rand. Beides ist hier nachgebaut. */ --cv-gutter: clamp(20px, 5.65vw, 93px); --cv-content: 1460px; /* Verena, 01.09.2026: "we need more space (Mehr Weissraum) between the different sections." Vorher clamp(56px, 6vw, 96px), am Schreibtisch also 77 px je Seite und 153 px zwischen zwei Abschnitten. Jetzt 90 und 179. Der neue Wert ist nicht erfunden: er stand als `--cv-space-band` schon in dieser Datei und wurde nie benutzt, die Stufe war also von Anfang an vorgesehen. Sie gilt fuer die ganze Website, weil ein einzelner Abschnitt mit anderem Rhythmus wie ein Fehler aussieht. Eine Zeile zurueck. */ --cv-space-section: clamp(68px, 7vw, 112px); } /* Kontrastvariante. Standard ist der freigegebene Entwurf. Ein einziges Attribut am schaltet auf die barrierefreie Fassung um, die ausschliesslich Markenfarben benutzt: Messwerte stehen in tokens.css unter OFFEN. */ :root { --cv-btn-primary-bg: var(--cv-coral); --cv-btn-primary-fg: var(--cv-white); --cv-btn-ghost-border: var(--cv-border); } [data-kontrast="konform"] { --cv-btn-primary-fg: var(--cv-slate-800); /* 4,49:1 statt 3,26:1 */ --cv-btn-ghost-border: var(--cv-body); /* 7,58:1 statt 1,48:1 */ } /* Ians Wahl vom 29.08.2026, seither zweimal zurückgenommen. Stand 31.08.2026: dieser Schalter setzt nur noch die Schriftfarbe des ersten Knopfes. Beide Knöpfe stehen damit genau so da, wie der Brand Guide sie zeichnet (Seite 06, „Button Hierarchien & Varianten“): Primary Korall #f95738, Weiss, Radius 0, Padding 14/24 Secondary 1 px #cbd5e1, Text Slate 800 ERSTER VERSUCH, ZURÜCKGENOMMEN am 29.08.2026: statt der Farbe sollte die Schrift wachsen, weil ab 24 px die WCAG-Grenze 3,0 statt 4,5 gilt und Weiss auf Korall mit 3,26 dann besteht. Gemessen an der Vorschaudomain kostete das den Kopfknopf 268 × 44 → 450 × 62 px und den Heroknopf auf 390 px 44 → 89 px (zweizeilig). Ian hat den Balken abgelehnt. Die Rechnung stimmte, die Auswirkung auf die Seite hatte ich nicht gerendert, bevor ich sie vorschlug. ZWEITER VERSUCH, ZURÜCKGENOMMEN am 31.08.2026: Slate 800 auf Korall misst zwar 4,49 und besteht, aber Ian will Weiss auf den Korallknöpfen (Kanal Christiane Vogel, 31.08.). Weiss auf Korall misst 3,26 gegen die 4,5-Grenze für 12-px-Text — bewusster Markenentscheid, kein Versehen. DRITTER VERSUCH, ZURÜCKGENOMMEN am 31.08.2026: die Kante des zweiten Knopfes stand seit dem 29.08. auf Korall (3,26 gegen die Nichttext-Grenze 3,0). Ian hat sie am 31.08. als markenfremd zurückgewiesen — der Guide schreibt #cbd5e1. Die Kante steht damit wieder auf 1,48 gegen 3,0 aus WCAG 1.4.11. Das ist ein offener Befund am Guide selbst, den Christiane hören muss, und keine stille Abweichung: siehe tokens.css, OFFEN 2. */ [data-kontrast="korall"] { --cv-btn-primary-fg: var(--cv-white); /* Ians Wahl 31.08.: 3,26:1 */ } /* --- Grundlagen ----------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--cv-white); color: var(--cv-text); font-family: var(--cv-font-sans); font-weight: var(--cv-weight-light); font-size: var(--cv-body-size); line-height: var(--cv-body-lh); -webkit-font-smoothing: antialiased; } img, svg { display: block; max-width: 100%; } img { height: auto; } /* Muss !important sein: .cv-btn-reihe{display:flex} ist eine Autorenregel und schlägt sonst das [hidden] des Browser-Stylesheets. Genau daran blieb der Ladeknopf im Buchungsdialog stehen, nachdem der Kalender längst da war. */ [hidden] { display: none !important; } h1, h2, h3, h4 { margin: 0; font-weight: var(--cv-weight-semibold); color: var(--cv-text); letter-spacing: 0; } p { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } a { color: inherit; } :focus-visible { outline: 2px solid var(--cv-coral); outline-offset: 3px; } .cv-skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--cv-slate-800); color: #fff; padding: 12px 20px; font-weight: var(--cv-weight-medium); } .cv-skip:focus { left: 0; } .cv-nur-fuer-screenreader { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* --- Raster --------------------------------------------------------------- */ .cv-container { width: min(100% - 2 * var(--cv-gutter), var(--cv-content)); margin-inline: auto; } .cv-section { padding-block: var(--cv-space-section); } /* Der Kopf klebt oben und ist 73 px hoch. Ohne diesen Abstand landet der angesprungene Abschnitt darunter und seine Überschrift ist verdeckt. */ section[id] { scroll-margin-top: 73px; } .cv-band-warm { background: var(--cv-band-warm); } .cv-band-cool { background: var(--cv-band-cool); } .cv-band-deep { background: var(--cv-teal-dark); color: var(--cv-white); } .cv-band-deep h2, .cv-band-deep h3 { color: var(--cv-white); } /* Verena, 01.09.2026: "In general the green color is reserved for the Leadership Wirkungskompass. But maybe we can use the blue?" Dunkles Petrol trugen bisher DREI Flaechen: das Kompassband der Startseite, der Ablauf auf `/leistungen/leadership-wirkungskompass` und die Kursvorschau unter jeder Unterseite. Die ersten beiden SIND der Wirkungskompass, die dritte nicht — sie bekommt deshalb dieses Band. ZUR FARBE, und das gehoert der Kundin gesagt: der Brand Guide kennt kein Blau. Seine Palette ist Slate 800, Korall, Petrol dunkel, Petrol mittel, Sand, Off-White und ein Rahmengrau. Slate 800 #1e293b ist das, was der Guide „Primary Dark" nennt und ausdruecklich fuer dunkle Flaechen vorsieht, und es ist von allen Markenfarben die einzige, die als Blau durchgeht. Es ist also ein Ersatz und kein Treffer. Eine neue Farbe wird hier nicht angemischt. Kontrast auf #1e293b nachgerechnet, jeder Wert steigt gegenueber Petrol: Sand 10,27 (war 4,92), Weiss .92 12,59 (war 6,23), Weiss .78 9,47 (war 4,99), weisser Knopf 14,63 (war 7,01). */ .cv-band-deep--marine { background: var(--cv-slate-800); } /* --- Textbausteine -------------------------------------------------------- */ .cv-kicker { display: block; font-size: var(--cv-kicker-size); line-height: var(--cv-kicker-lh); letter-spacing: var(--cv-kicker-ls); font-weight: var(--cv-weight-semibold); text-transform: uppercase; color: var(--cv-teal-mid); margin-bottom: 16px; } .cv-kicker::before { content: "– "; } .cv-kicker--dunkel { color: var(--cv-sand); } .cv-kicker--schlicht::before { content: none; } .cv-hero-titel { font-size: clamp(32px, 3.4vw, var(--cv-hero-size)); line-height: 1.15; letter-spacing: var(--cv-hero-ls); font-weight: var(--cv-weight-light); } .cv-hero-titel strong { font-weight: var(--cv-weight-semibold); } .cv-hero-titel .cv-akzent { color: var(--cv-coral); font-weight: var(--cv-weight-semibold); } .cv-sektionstitel { font-size: var(--cv-section-size); line-height: var(--cv-section-lh); max-width: 22ch; } .cv-sektionstitel--gross { font-size: var(--cv-section-size-lg); max-width: 26ch; } .cv-sektionstitel--klein { font-size: var(--cv-section-size-sm); } .cv-sektionstitel--breit { max-width: 34ch; } .cv-lead { color: var(--cv-text-muted); max-width: 62ch; } .cv-caveat { font-family: var(--cv-font-accent); font-size: var(--cv-accent-size); line-height: 1.15; font-weight: 400; } .cv-kopf-zentriert { text-align: center; } .cv-kopf-zentriert .cv-sektionstitel, .cv-kopf-zentriert .cv-lead { margin-inline: auto; } /* --- Knöpfe --------------------------------------------------------------- */ .cv-btn { display: inline-flex; align-items: center; gap: 10px; padding: var(--cv-btn-pad-y) var(--cv-btn-pad-x); /* Guide, UI-Kapitel */ border: 1px solid transparent; border-radius: var(--cv-radius); font-size: var(--cv-btn-size); line-height: 1; letter-spacing: var(--cv-btn-ls); text-transform: uppercase; font-weight: var(--cv-weight-medium); text-decoration: none; cursor: pointer; transition: background-color .18s ease, color .18s ease, border-color .18s ease; } .cv-btn--primaer { background: var(--cv-btn-primary-bg); color: var(--cv-btn-primary-fg); } .cv-btn--primaer:hover { background: #e04527; } .cv-btn--sekundaer { background: transparent; color: var(--cv-slate-800); border-color: var(--cv-btn-ghost-border); } /* Korall wandert in den Hover-Zustand. Ian, 31.08.2026: „The on hover can have the coral outline.“ Im Ruhezustand bleibt die Kante #cbd5e1 wie im Guide; beim Überfahren geht sie auf Korall #f95738 (3,26:1 gegen Weiss, über der Nichttext-Grenze 3,0). Was das NICHT löst: auf dem Telefon gibt es keinen Hover, dort bleibt die Kante bei 1,48:1. Der Befund aus tokens.css OFFEN 2 bleibt also offen. Für die Tastatur ist er längst gedeckt — :focus-visible zeichnet einen 2 px starken Korallring, siehe oben. Nicht angefasst: .cv-btn--hell und .cv-btn--umriss stehen auf Petrol #156363, und der Guide verbietet Korall auf Petrol ausdrücklich (Kapitel 07, DON'T). Die behalten ihren weissen Hover. */ .cv-btn--sekundaer:hover { border-color: var(--cv-coral); } .cv-btn--dunkel { background: var(--cv-slate-800); color: var(--cv-white); } .cv-btn--dunkel:hover { background: #16202f; } .cv-btn--hell { background: transparent; color: var(--cv-white); border-color: rgba(255,255,255,.55); } .cv-btn--hell:hover { border-color: #fff; background: rgba(255,255,255,.08); } /* Bleibt, obwohl die 24 px zurückgenommen sind. Gefunden hat den Fehler zwar erst der grosse Knopf — „Funktionsweise entdecken" sprengte die Angebotskarte auf 390 px um 120 px —, aber die Ursache ist das nowrap auf .cv-angebot .cv-btn, und das steht dort unabhängig vom Schriftgrad. Ein längeres Etikett aus dem Panel bringt es jederzeit zurück. Der Selektor beginnt mit html[…], damit er (0,2,1) wiegt und die Angebotsregel (0,2,0) unabhängig von der Reihenfolge im Blatt schlägt. */ html[data-kontrast="korall"] .cv-btn--primaer { white-space: normal; text-align: center; line-height: 1.15; /* line-height:1 klebt die Zeilen zusammen */ } .cv-btn-reihe { display: flex; flex-wrap: wrap; gap: 16px; } .cv-link { /* min-height 24: WCAG 2.2 SC 2.5.8 verlangt 24 × 24 px. Ohne das messen diese Links 23 px, und sie stehen frei statt im Fliesstext, also greift die Ausnahme für Links innerhalb eines Satzes nicht. */ display: inline-flex; align-items: center; gap: 8px; min-height: 24px; font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; font-weight: var(--cv-weight-medium); color: var(--cv-slate-800); text-decoration: none; } .cv-link .cv-icon { width: 16px; height: 16px; transition: transform .18s ease; } .cv-link:hover .cv-icon { transform: translateX(3px); } .cv-link--normal { text-transform: none; letter-spacing: 0; font-size: var(--cv-body-size); } /* --- Icons ---------------------------------------------------------------- */ .cv-icon { width: var(--cv-icon-size); height: var(--cv-icon-size); fill: none; stroke: currentColor; stroke-width: var(--cv-icon-stroke); stroke-linecap: round; stroke-linejoin: round; flex: none; } .cv-icon--gross { width: var(--cv-icon-size-lg); height: var(--cv-icon-size-lg); } /* --- Kopf ----------------------------------------------------------------- */ .cv-header { position: sticky; top: 0; z-index: 40; background: var(--cv-white); border-bottom: 1px solid var(--cv-border); } .cv-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 73px; /* Entwurf: Kopfband misst 72,6 px */ } /* Die Höhe ist über die BREITE des Zeichens gesetzt, nicht über die Kastenhöhe. Das SVG ist 953 × 180 mit Luft ringsum; bemalt sind davon nur 859,1 × 123,3. Bei 41 px Kastenhöhe misst das Zeichen 195,7 px breit — der Entwurf misst 193,7. Mindestbreite laut Brand Guide für die Fassung ohne Tagline: 120 px. Bei den vorherigen 26 px war der Namenszug 6,1 px hoch, im Entwurf ist er 10,8. */ /* flex: none ist Pflicht, nicht Kosmetik. img trägt global max-width: 100 %; schrumpft der Flex-Kasten, staucht das Zeichen bei fester Höhe in der Breite. Gemessen bei 1024 px: 217,1 px Zeichen auf 45,7 px zusammengedrückt. Der Brand Guide verbietet Stauchen ausdrücklich. */ .cv-header__logo { flex: none; } .cv-header__logo img { height: 41px; width: auto; max-width: none; } .cv-nav { display: flex; align-items: center; gap: 30px; } .cv-nav a { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: var(--cv-weight-medium); color: var(--cv-slate-800); text-decoration: none; white-space: nowrap; } .cv-nav a:hover { color: var(--cv-coral); } .cv-nav-schalter { display: none; background: none; border: 0; padding: 8px; color: var(--cv-slate-800); cursor: pointer; } /* --- Klappmenü in der Hauptnavigation ------------------------------------- Der Link auf die Übersicht und der Schalter für das Klappmenü sind zwei getrennte Bedienelemente. Ein Link, der bei Klick aufklappt statt zu führen, nimmt «Leistungen» die Übersichtsseite weg. */ .cv-nav__gruppe { position: relative; display: flex; align-items: center; gap: 2px; } .cv-nav__auf { display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; padding: 6px 2px; margin: 0; color: var(--cv-slate-800); cursor: pointer; line-height: 0; } .cv-nav__auf:hover { color: var(--cv-coral); } .cv-nav__auf .cv-icon { width: 13px; height: 13px; transform: rotate(90deg); /* aus chevron-right wird der Pfeil nach unten */ transition: transform .18s ease; } .cv-nav__gruppe[data-offen="true"] .cv-nav__auf .cv-icon { transform: rotate(-90deg); } .cv-nav__unter { display: none; position: absolute; top: calc(100% + 14px); left: -18px; z-index: 41; margin: 0; padding: 10px 0; list-style: none; min-width: 236px; background: var(--cv-white); border: 1px solid var(--cv-border); box-shadow: 0 14px 30px rgb(30 41 59 / 12%); } .cv-nav__unter a { display: block; padding: 9px 18px; } /* Mit JavaScript entscheidet allein der Schalter. Kein :focus-within: der Fokus steht nach Escape wieder auf dem Schalter, also innerhalb der Gruppe, und das Menü klappte sofort wieder auf. Die Tastatur bedient stattdessen den Schalter selbst, das ist auch der ARIA-Weg. */ .cv-nav__gruppe[data-offen="true"] .cv-nav__unter { display: block; } /* Nur auf Geräten mit echtem Zeiger. Auf dem Telefon meldet der erste Tipp sonst hover, und das Menü klappt auf, ohne dass jemand den Schalter gedrückt hat. */ @media (hover: hover) { .cv-nav__gruppe:hover .cv-nav__unter { display: block; } /* Die 14 px Abstand über dem Kasten sind sonst eine Lücke, in der der Zeiger das Menü wieder verliert. */ .cv-nav__gruppe:hover::after, .cv-nav__gruppe[data-offen="true"]::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 14px; } } /* Ohne JavaScript schaltet den Schalter niemand, also weg damit. Auf breiten Fenstern öffnen Zeiger und Tastaturfokus das Menü auch ohne ihn — hier darf :focus-within stehen, weil es kein Escape gibt, das dagegen hält. */ html:not([data-js="an"]) .cv-nav__auf { display: none; } html:not([data-js="an"]) .cv-nav__gruppe:focus-within .cv-nav__unter { display: block; } html:not([data-js="an"]) .cv-nav__gruppe:focus-within::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 14px; } /* --- Hero ----------------------------------------------------------------- */ .cv-hero { padding-block: clamp(48px, 5.5vw, 88px) 0; } .cv-hero__raster { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 4vw, 72px); align-items: center; } .cv-hero__text { max-width: 640px; } /* Entwurf: H1-Zeile misst 573 px */ .cv-hero__text .cv-lead { margin-block: 24px 32px; } .cv-hero__bild { position: relative; } .cv-hero__bild img { width: 100%; aspect-ratio: 736 / 664; object-fit: cover; object-position: 50% 34%; } .cv-chip { position: absolute; left: 22px; bottom: 22px; display: inline-flex; align-items: center; gap: 10px; background: var(--cv-off-white); color: var(--cv-slate-800); padding: 10px 16px; font-size: 12px; margin: 0; z-index: 1; max-width: calc(100% - 44px); } .cv-chip::before { content: ""; width: 8px; height: 8px; background: var(--cv-coral); flex: none; } .cv-chip--sand { background: var(--cv-sand); } .cv-chip--sand::before { display: none; } /* --- Kompasslinie --------------------------------------------------------- */ .cv-kompasslinie { padding-block: clamp(40px, 4vw, 64px); overflow: hidden; } .cv-kompasslinie__buehne { position: relative; } .cv-kompasslinie svg { display: block; width: 100%; height: auto; } /* Die Beschriftung sass als im SVG und wurde deshalb mitskaliert: aus 11 px wurden bei 1440 px Fensterbreite 9,6 gerenderte Pixel, bei 1280 px 8,6 und bei 900 px 6,0. Als HTML über der Grafik behält sie ihren Grad. 12 px / 2,4 px ist der Kicker-Grad, der kleinste, den der Brand Guide kennt. `top` ist die PUNKTMITTE, der Abstand nach oben ist für alle fünf Wörter gleich. Zwischendurch stand hier am 01.09.2026 ein je Wort anderer Abstand, aus dem freigegebenen PDF gemessen; der ist mit den PDF-Kurven zusammen zurückgenommen (siehe Kopf von site/snippets/kompasslinie.php). Der feste Abstand ist in Pixeln und nicht in viewBox-Einheiten angegeben, damit er beim Schrumpfen der Grafik nicht mitschrumpft — die Schrift tut es auch nicht. */ /* Der Hof in Bandfarbe hinter dem Wort ist derselbe Kniff, den der freigegebene Entwurf unter seinen Punkten benutzt: er hält die Linien aus der Schrift. Ohne ihn läuft die Marinelinie durch „Entscheidung" und die Sandlinie durch „Umsetzung" — gemessen am 01.09.2026 auf jeder Breite ab 1100 px, und im Stand vom 25.08.2026 lief sogar Marine UND Korall durch „Entscheidung". Als box-shadow und nicht als padding, damit der Kasten des Wortes gleich bleibt: an ihm hängt der Abstand zum Punkt. */ .cv-kompasslinie__marke { position: absolute; transform: translate(-50%, calc(-100% - 15px)); background: var(--cv-band-warm); box-shadow: 0 0 0 .3em var(--cv-band-warm); white-space: nowrap; font-size: var(--cv-kicker-size); line-height: var(--cv-kicker-lh); letter-spacing: var(--cv-kicker-ls); font-weight: var(--cv-weight-medium); text-transform: uppercase; color: var(--cv-slate-800); } /* --- „Wenn Veränderung da ist" -------------------------------------------- */ .cv-anlass { display: grid; grid-template-columns: minmax(280px, 430px) 1fr; gap: clamp(32px, 4vw, 64px); align-items: start; } .cv-anlass__karten { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .cv-anlass-karte { background: var(--cv-white); border: 1px solid var(--cv-border); padding: 24px 20px 28px; } .cv-anlass-karte .cv-icon { color: var(--cv-teal-dark); margin-bottom: 28px; } .cv-anlass-karte h3 { font-size: 13px; letter-spacing: .8px; text-transform: uppercase; line-height: 1.35; margin-bottom: 18px; } .cv-anlass-karte p { color: var(--cv-text-muted); font-size: 13px; } /* --- Für wen ich arbeite -------------------------------------------------- */ .cv-zielgruppen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 48px; } .cv-zielgruppe { border: 1px solid var(--cv-border); background: var(--cv-white); display: flex; flex-direction: column; text-align: center; } .cv-zielgruppe__bild { position: relative; padding: 18px 18px 0; } .cv-zielgruppe__bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } .cv-zielgruppe__signet { position: absolute; left: 50%; bottom: -20px; transform: translateX(-50%); width: 40px; height: 40px; display: grid; place-items: center; background: var(--cv-teal-dark); color: var(--cv-white); } .cv-zielgruppe__signet .cv-icon { width: 18px; height: 18px; } /* Die vier Plakettenfarben, Reihenfolge aus Verenas Mail vom 01.09.2026: Beige, Grün, Koralle, Marineblau. Welche Karte welche bekommt, entscheidet cvSignetKlasse() nach Position, nicht mehr ein Schalter je Seite. Auf Beige steht das Icon in Slate 800. Gemessen: Weiss auf #e7d5c7 ist 1,42:1, Slate 800 auf #e7d5c7 ist 10,27:1. Ein Icon, das die Karte kennzeichnet, ist ein bedeutungstragendes Grafikelement und braucht 3,0 (WCAG 1.4.11). Die anderen drei Flächen tragen Weiss: Petrol 7,01:1, Koralle 3,26:1, Marineblau 14,63:1. Koralle liegt damit unter 4,5 und über 3,0 — dieselbe offene Markenentscheidung wie beim primären Knopf, siehe tokens.css OFFEN 1. */ .cv-zielgruppe__signet--sand { background: var(--cv-sand); color: var(--cv-slate-800); } .cv-zielgruppe__signet--petrol { background: var(--cv-teal-dark); color: var(--cv-white); } .cv-zielgruppe__signet--koralle { background: var(--cv-coral); color: var(--cv-white); } .cv-zielgruppe__signet--marine { background: var(--cv-slate-800); color: var(--cv-white); } .cv-zielgruppe__text { padding: 40px 22px 26px; display: flex; flex-direction: column; flex: 1; } /** * Kachelkopf ohne Bild — Stand seit dem 30.08.2026. * * WOZU: Die vier Kacheln trugen bis dahin vier Porträts derselben Person aus * demselben Nachmittag. Auf einer Seite, die „Für wen ich arbeite" heisst, sagt * das viermal „das bin ich" statt einmal „das sind Sie". Ian hat das am * 30.08. gemeldet und sich für diese Fassung entschieden (Fassung B in * 10_Reports/2026-08-30-zielgruppen-bilder/). * * Das Signet rückt dafür aus dem Bildrand in die Fläche: ohne Bild hat es * keine Kante mehr, an der es hängen könnte. Zurück zum Bild geht es über den * einen Zweig in zielgruppen.php/home.php — sobald die vier Rollenbilder da * sind, fällt dieser Block weg und nichts anderes muss angefasst werden. */ .cv-zielgruppe__bild--symbol { padding: 34px 18px 0; } .cv-zielgruppe__bild--symbol .cv-zielgruppe__signet { position: static; transform: none; margin: 0 auto; width: 56px; height: 56px; } .cv-zielgruppe__bild--symbol .cv-zielgruppe__signet .cv-icon { width: 26px; height: 26px; } .cv-zielgruppe__bild--symbol + .cv-zielgruppe__text { padding-top: 24px; } .cv-zielgruppe h3 { font-size: 13px; letter-spacing: .8px; text-transform: uppercase; margin-bottom: 14px; } .cv-zielgruppe p { color: var(--cv-text-muted); font-size: 13px; flex: 1; } .cv-zielgruppe .cv-link { margin-top: 22px; align-self: center; } /* --- Leadership-Kompass --------------------------------------------------- */ .cv-kompass { position: relative; scroll-margin-top: 73px; overflow: hidden; /* Oben 48 px mehr als unten: die Handschrift bekommt im dreispaltigen Satz ein eigenes Band über den Schritt-Tafeln, so wie im Referenzbild. Ohne das lag ihre Grundlinie auf der Oberkante von Tafel 01. */ padding-block: clamp(124px, calc(6vw + 48px), 152px) clamp(76px, 6vw, 104px); background: #2f6162; /* Pixelprobe im gelieferten Referenzbild */ } .cv-kompass__caveat { position: absolute; z-index: 2; top: -58px; /* aus .cv-kompass__visual heraus in das Band darüber */ left: 50%; width: max-content; max-width: 48vw; transform: translateX(-50%) rotate(-.3deg); color: rgba(255,255,255,.9); font-size: 26px; white-space: nowrap; } .cv-kompass__caveat::after { content: ""; display: block; height: 9px; margin-top: -2px; border-top: 2px solid rgba(255,255,255,.48); border-radius: 50%; transform: rotate(.5deg); } .cv-kompass__raster { display: grid; grid-template-columns: minmax(520px, 1.25fr) minmax(280px, .7fr) minmax(340px, .85fr); gap: clamp(24px, 2.7vw, 46px); align-items: center; } .cv-kompass__text { position: relative; z-index: 2; } .cv-kompass__text .cv-kicker { color: rgba(255,255,255,.82); margin-bottom: 24px; } .cv-kompass__text .cv-sektionstitel { max-width: 620px; font-size: 26px; line-height: 1.28; font-weight: var(--cv-weight-medium); } .cv-kompass__text .cv-lead { color: rgba(255,255,255,.7); margin-block: 22px 34px; max-width: 620px; font-size: 14px; line-height: 1.85; } .cv-kompass .cv-btn--hell { background: var(--cv-white); color: var(--cv-slate-800); border-color: var(--cv-white); padding: 19px 30px; } .cv-kompass .cv-btn--hell:hover { background: var(--cv-off-white); border-color: var(--cv-off-white); } /* Zweite Schaltfläche im Kompassband. Nicht .cv-btn--hell, weil die Regel darüber die Umrissfassung im Kompass zu Weiss ausfüllt. Rahmen gemischt ergibt #96b9b9 auf #156363, also 3,67:1 — über der Grenze von 3:1 für Bedienelemente. Polsterung gleich der Nachbarschaltfläche. */ .cv-kompass .cv-btn--umriss { background: transparent; color: var(--cv-white); border-color: rgba(255,255,255,.55); padding: 19px 30px; } .cv-kompass .cv-btn--umriss:hover { border-color: #fff; background: rgba(255,255,255,.08); } .cv-kompass__visual { position: relative; z-index: 1; min-height: 500px; display: grid; place-items: center; } .cv-kompass__grafik { width: min(100%, 500px); color: color-mix(in srgb, var(--cv-teal-mid) 30%, var(--cv-white)); } .cv-kompass__grafik svg { width: 100%; height: auto; overflow: visible; } .cv-kompass__netz { fill: none; stroke: rgba(140,211,202,.3); stroke-width: 1.4; stroke-dasharray: 3 8; } .cv-kompass__ring { stroke: rgba(140,211,202,.58); stroke-dasharray: none; } .cv-kompass__ring--aussen { stroke-width: 1.8; } .cv-kompass__ticks { fill: none; stroke: rgba(140,211,202,.72); stroke-width: 2; } .cv-kompass__richtungen { fill: rgba(255,255,255,.75); font-family: var(--cv-font-sans); font-size: 12px; font-weight: var(--cv-weight-semibold); letter-spacing: .6px; } .cv-kompass__nadel { stroke: rgba(255,255,255,.28); stroke-width: 1.2; stroke-linejoin: round; } .cv-kompass__nadel--west { fill: rgba(128,194,188,.34); } .cv-kompass__nadel--ost { fill: rgba(128,194,188,.28); } .cv-kompass__nadel--nord { fill: #e8fffb; } .cv-kompass__nadel--nordlicht { fill: #8ed9d0; } .cv-kompass__nadel--sued { fill: #121a38; } .cv-kompass__nadel--suedlicht { fill: #466f79; } .cv-kompass__nadel circle { fill: #102138; stroke: #79c5be; stroke-width: 3; } .cv-kompass__verbinder { fill: none; stroke: rgba(255,255,255,.38); stroke-width: 2; stroke-dasharray: 2 7; stroke-linecap: round; } .cv-schritte { display: grid; gap: 20px; } .cv-schritt { background: rgba(255,255,255,.07); border-left: 3px solid var(--cv-sand); padding: 20px 24px; } .cv-schritt__kopf { display: flex; align-items: baseline; gap: 14px; margin-bottom: 10px; } .cv-schritt__nr { font-size: 20px; font-weight: var(--cv-weight-semibold); color: var(--cv-sand); } /* Die Überschrift ist ein Flexkind und darf deshalb von sich aus nicht unter ihr längstes Wort schrumpfen — «Führungsidentität» auf der Kursseite ragte so 22 px über die Kachelkante (04.09.2026). min-width löst das Schrumpfen, hyphens trennt das Wort, statt es abzuschneiden. */ .cv-schritt__kopf h3 { min-width: 0; hyphens: auto; } .cv-schritt h3 { font-size: 12px; letter-spacing: 1.6px; text-transform: uppercase; } .cv-schritt p { color: rgba(255,255,255,.82); font-size: 13px; } .cv-kompass .cv-schritte { position: relative; z-index: 2; display: grid; gap: 24px; min-height: 0; } .cv-kompass .cv-schritt { position: relative; width: 100%; min-height: 132px; background: rgba(255,255,255,.075); border: 0; border-left: 4px solid #a7eee4; padding: 24px 30px; text-align: left; } .cv-kompass .cv-schritt:nth-child(2) { border-left-color: var(--cv-white); } .cv-kompass .cv-schritt:nth-child(3) { border-left-color: var(--cv-sand); } .cv-kompass .cv-schritt__kopf { display: flex; align-items: baseline; justify-content: flex-start; gap: 18px; margin-bottom: 14px; } .cv-kompass .cv-schritt__nr { font-family: var(--cv-font-sans); font-size: 23px; line-height: 1; font-weight: var(--cv-weight-semibold); color: #a7eee4; } .cv-kompass .cv-schritt:nth-child(2) .cv-schritt__nr { color: var(--cv-white); } .cv-kompass .cv-schritt:nth-child(3) .cv-schritt__nr { color: var(--cv-sand); } .cv-kompass .cv-schritt h3 { font-size: 13px; letter-spacing: .5px; text-transform: uppercase; } .cv-kompass .cv-schritt p { color: rgba(255,255,255,.66); font-size: 13px; line-height: 1.65; } /* --- Formate & Termine ---------------------------------------------------- */ .cv-abschnittskopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 40px; } .cv-termine { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .cv-termin { background: var(--cv-white); border: 1px solid var(--cv-border); padding: 26px 28px 22px; display: flex; flex-direction: column; /* Rasterkinder stehen auf min-width:auto, also wird die Spur so breit wie ihr breitester unteilbarer Inhalt. Mit dem 24-px-Knopf war die Karte auf 360 px 398,6 px breit und schob die ganze Seite auf 419. */ min-width: 0; } .cv-termin__kopf { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; } .cv-marke { font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; font-weight: var(--cv-weight-medium); padding: 6px 12px; background: color-mix(in srgb, var(--cv-teal-dark) 12%, #ffffff); color: var(--cv-teal-dark); } .cv-marke--koralle { background: color-mix(in srgb, var(--cv-coral) 14%, #ffffff); color: #b8310f; /* Korall auf hellem Korall-Grund, 4,6:1 */ } .cv-termin__notiz { font-size: 12px; color: var(--cv-text-muted); } .cv-termin h3 { font-size: var(--cv-h2-size); line-height: var(--cv-h2-lh); margin-bottom: 12px; } .cv-termin p { color: var(--cv-text-muted); } .cv-termin__fuss { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--cv-border); /* Dauer links, Knopf rechts passt nebeneinander nur, solange der Knopf schmal ist. Bei 24 px stapeln sie statt zu quetschen. */ flex-wrap: wrap; } .cv-termin__meta { font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--cv-text-muted); } .cv-termin__unterzeile { color: var(--cv-teal-dark); font-weight: var(--cv-weight-medium); margin-bottom: 10px; } /* Die Fusszeile sitzt unten, auch wenn die Karte daneben mehr Text hat. Ohne das steht der Knopf der kürzeren Karte auf halber Höhe. */ .cv-termin p:last-of-type { flex: 1; } /* --- Kursbereich der Leistungsseite (Verenas G9) --------------------------- */ .cv-kurse { display: grid; gap: 28px; margin-top: 48px; } .cv-kurse > * { min-width: 0; } .cv-kurs { background: var(--cv-white); border: 1px solid var(--cv-border); padding: clamp(26px, 3vw, 40px); } .cv-kurs__kopf { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; } .cv-kurs__termin { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: .6px; color: var(--cv-text-muted); } .cv-kurs__termin .cv-icon { width: 16px; height: 16px; color: var(--cv-teal-dark); } .cv-kurs h3 { font-size: clamp(20px, 2vw, 24px); line-height: 1.3; margin-bottom: 10px; } .cv-kurs__unterzeile { color: var(--cv-teal-dark); font-weight: var(--cv-weight-medium); font-size: 15px; margin-bottom: 20px; } .cv-kurs p { color: var(--cv-text-muted); max-width: 72ch; } .cv-kurs p + p { margin-top: 14px; } .cv-kurs__knoepfe { margin-top: 30px; } /* Text links, Bild rechts (Ian, 30.08.2026: „fill the empty spaces here"). Der Fliesstext ist auf 72 Zeichen gedeckelt, die Karte läuft über den vollen Satzspiegel — rechts stand also eine leere Fläche. Nur der OBERE Teil der Karte wird geteilt; Stimmen und Schaltflächen bleiben darunter breit. 34 % ist gemessen und nicht gegriffen: bei 1460 px Satzspiegel und 40 px Kartenpolster sind das 469 px Bild, und der Text behält 875 px, also mehr als die 72 Zeichen, die er ohnehin nur nutzt. Die Spalte wird nie breiter, weil der Satzspiegel bei 1460 stehen bleibt. `minmax(0, 1fr)` und nicht `1fr`: ein Rasterfeld ist von Haus aus mindestens so breit wie sein längstes unteilbares Wort, ein langer Kurstitel würde die Spalte sonst aufdrücken und die Karte über den Rand schieben. */ .cv-kurs__oben--mitbild { display: grid; grid-template-columns: minmax(0, 1fr) 34%; gap: clamp(24px, 2.4vw, 36px); align-items: start; } .cv-kurs__bild { margin: 0; position: relative; } .cv-kurs__bild img { display: block; width: 100%; height: auto; /* Datei und Platz sind beide 16:9, es fällt also nichts weg. Das Verhältnis steht trotzdem hier: lädt jemand später ein anders geschnittenes Bild hoch, wird es beschnitten statt verzerrt, und `object-position` aus dem Fokuspunkt der Datei bestimmt, welcher Teil bleibt. */ aspect-ratio: 16 / 9; object-fit: cover; } /* Unter 1100 px passen 34 % nicht mehr — die Spalte fiele unter 300 px und das Bild würde zur Briefmarke. Also gestapelt, Bild zuerst und randlos über die volle Karte: der negative Aussenabstand hebt genau das Kartenpolster auf, deshalb steht dort derselbe clamp() wie in `.cv-kurs`. */ @media (max-width: 1099px) { .cv-kurs__oben--mitbild { grid-template-columns: minmax(0, 1fr); gap: 24px; } .cv-kurs__bild { order: -1; margin-inline: calc(-1 * clamp(26px, 3vw, 40px)); margin-top: calc(-1 * clamp(26px, 3vw, 40px)); } } /* --- Stimmen zum Kurs (Verenas C2) --------------------------------------- Sie stehen INNERHALB der Kurskarte, abgesetzt durch Fläche und eine Kante links. Das war Verenas eigentlicher Punkt: man muss sehen, zu welchem Kurs eine Stimme gehört. Ein eigenes Band irgendwo auf der Seite hätte das nicht geleistet. */ .cv-rezensionen { margin-top: 30px; padding: 24px 26px; background: var(--cv-band-warm); } .cv-rezensionen__titel { font-size: 12px; letter-spacing: var(--cv-kicker-ls); text-transform: uppercase; font-weight: var(--cv-weight-semibold); color: var(--cv-teal-mid); margin-bottom: 20px; } .cv-rezensionen__liste { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } /* Die Karte trägt die Korall-Kante, nicht der Kasten darum. Beides zusammen ergab drei senkrechte Balken nebeneinander. Nicht mit .cv-stimme verwechseln: das ist der einzelne Zitatkasten auf «Über Christiane». */ .cv-rezension { margin: 0; padding: 22px 24px; background: var(--cv-white); border-left: 3px solid var(--cv-coral); display: flex; flex-direction: column; } .cv-rezension blockquote { margin: 0; flex: 1; color: var(--cv-slate-800); line-height: 1.8; } .cv-rezension figcaption { margin-top: 14px; } .cv-rezension__name { display: block; font-weight: var(--cv-weight-semibold); font-size: 13px; } .cv-rezension__rolle { display: block; font-size: 12px; color: var(--cv-text-muted); } /* --- Kursvorschau am Fuss der Unterseiten (Verenas G12/G14) --------------- Eine Vorschau muss als etwas anderes erkennbar sein als der Seiteninhalt. Deshalb dunkle Fläche statt weisser, eine Zeile je Kurs statt einer Karte, eine einzige Schaltfläche. Korall auf diesem Band seit 02.09.2026: das Band ist Slate 800, nicht Petrol, und Ian hat den Korallknopf freigegeben. Schrift 600 statt 500, nur hier. */ .cv-kursvorschau { padding-block: clamp(40px, 4vw, 60px); } .cv-kursvorschau__raster { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 64px); align-items: center; } .cv-kursvorschau .cv-sektionstitel { color: var(--cv-white); } .cv-kursvorschau__liste { display: grid; gap: 14px; margin-bottom: 26px; } .cv-kursvorschau__liste li { display: flex; align-items: flex-start; gap: 12px; color: rgba(255,255,255,.92); } .cv-kursvorschau__liste .cv-icon { width: 18px; height: 18px; margin-top: 2px; color: var(--cv-sand); flex: none; } .cv-kursvorschau__liste strong { font-weight: var(--cv-weight-semibold); } /* .72 ergab gemessen 4,48:1 auf #156363 und riss die Grenze von 4,5 um zwei Hundertstel - ich hatte 4,9 geschaetzt und falsch gemischt. .78 gibt 4,99:1. */ .cv-kursvorschau__termin { display: block; font-size: 12px; letter-spacing: .6px; color: rgba(255,255,255,.78); /* gemischt #ccdddd, 4,99:1 auf #156363 */ } .cv-kursvorschau .cv-btn--primaer { font-weight: var(--cv-weight-semibold); } /* --- Analyse & digitale Integration --------------------------------------- */ .cv-analyse { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 4vw, 72px); align-items: center; } .cv-analyse .cv-lead + .cv-lead { margin-top: 18px; } .cv-analyse .cv-btn-reihe { margin-top: 32px; } .cv-analyse__bild img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; } /* --- Leistungsräume ------------------------------------------------------- */ .cv-leistungsraeume { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; } .cv-leistungsraum { background: var(--cv-band-warm); border: 1px solid var(--cv-border); padding: 28px 28px 24px; display: flex; flex-direction: column; } .cv-leistungsraum > .cv-icon { color: var(--cv-teal-dark); margin-bottom: 34px; } .cv-leistungsraum > .cv-icon.cv-icon--koralle { color: var(--cv-coral); } .cv-leistungsraum h3 { font-size: 15px; letter-spacing: .8px; text-transform: uppercase; margin-bottom: 14px; } .cv-leistungsraum > p { color: var(--cv-text-muted); margin-bottom: 22px; } .cv-haken { display: grid; gap: 12px; flex: 1; } .cv-haken li { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; } .cv-haken .cv-icon { width: 15px; height: 15px; margin-top: 3px; color: var(--cv-coral); } .cv-leistungsraum .cv-link { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--cv-border); width: 100%; } /* --- Impulse -------------------------------------------------------------- */ .cv-impulse { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 44px; } .cv-impuls { background: var(--cv-white); border: 1px solid var(--cv-border); padding: 26px 28px 24px; display: flex; flex-direction: column; } .cv-impuls > .cv-icon { color: var(--cv-teal-dark); margin-bottom: 28px; } .cv-impuls h3 { font-size: 14px; letter-spacing: .8px; text-transform: uppercase; margin-bottom: 12px; } .cv-impuls p { color: var(--cv-text-muted); font-size: 13px; flex: 1; } .cv-impuls__fuss { margin-top: 24px; font-size: 13px; color: var(--cv-text-muted); } /* --- Blogbeiträge --------------------------------------------------------- */ /* Dasselbe Raster wie .cv-impulse, damit die beiden Bänder gleich sitzen. Der Unterschied ist das Bild oben statt des Symbols. */ /* Das Band der Startseite laeuft seitlich durch (Verenas G7). Die Uebersicht unter /news benutzt dieselbe Klasse als ruhiges Raster - deshalb steht das Scrollen am Elternteil .cv-lauf und nicht an .cv-beitraege selbst. */ .cv-beitraege { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 44px; } .cv-lauf { position: relative; } .cv-lauf .cv-beitraege { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: calc((100% - 48px) / 3); overflow-x: auto; scroll-snap-type: x mandatory; /* Der Umriss der Karten sitzt aussen an; ohne Polster schneidet der Ueberlauf ihn an der Kante ab. */ padding: 3px; margin-inline: -3px; /* Firefox und Safari zeigen sonst eine Leiste, die hier nichts erklaert - die Schaltflaechen darunter tun das. */ scrollbar-width: none; } .cv-lauf .cv-beitraege::-webkit-scrollbar { display: none; } .cv-lauf .cv-beitrag-karte { scroll-snap-align: start; } .cv-lauf .cv-beitraege:focus-visible { outline: 2px solid var(--cv-slate-800); outline-offset: 4px; } /* Hier standen bis zum 31.08.2026 .cv-lauf__steuerung und .cv-lauf__knopf: zwei Pfeile und eine Pause, 44 × 44 px, Kante #cbd5e1. Verena hat alle drei am 28.08. im Bild durchgestrichen (G6), Ian hat sie am 31.08. entfernen lassen. Die Regeln sind mit der Markierung weg, damit niemand später eine Steuerung sucht, die es nicht mehr gibt. Das Band läuft weiter und bleibt ein seitlicher Schieber; die Hover-Korall-Zeile von heute Mittag ist mit verschwunden, weil es kein Element mehr gibt, das sie treffen könnte. */ .cv-beitrag-karte { background: var(--cv-white); border: 1px solid var(--cv-border); } /* Die ganze Karte ist der Link. display:flex hier und nicht auf dem article, sonst bleibt der Link ein Kasten in einem Kasten und die Karten einer Reihe werden verschieden hoch. */ .cv-beitrag-karte > a { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; } .cv-beitrag-karte__bild { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; } .cv-beitrag-karte__bild--leer { display: grid; place-items: center; background: var(--cv-band-warm); color: var(--cv-teal-dark); } .cv-beitrag-karte__text { padding: 22px 28px 24px; display: flex; flex-direction: column; flex: 1; } .cv-beitrag-karte__datum { font-size: 12px; letter-spacing: .8px; text-transform: uppercase; color: var(--cv-text-muted); margin-bottom: 10px; } .cv-beitrag-karte h3 { font-size: 18px; margin-bottom: 12px; } .cv-beitrag-karte p { color: var(--cv-text-muted); font-size: 13px; flex: 1; } .cv-beitrag-karte .cv-link { margin-top: 24px; } .cv-beitrag-karte > a:hover { border-color: var(--cv-slate-800); } .cv-beitrag-karte:hover { border-color: var(--cv-slate-800); } .cv-beitrag-karte:focus-within { outline: 2px solid var(--cv-coral); outline-offset: 2px; } /* Der neueste Beitrag füllt auf /news den freien rechten Streifen des Seitenkopfs. Bis 1199 px bleiben Bild und Text getrennt. Auf grossen Bildschirmen liegt die weisse Textfläche im Bild: Die Karte wird dadurch nicht höher als ihr Inhalt verlangt, und links unter dem kurzen Intro bleibt kein kartengrosser leerer Block stehen. */ .cv-seitenkopf--aufmacher .cv-container { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, clamp(460px, 50%, 730px)); gap: clamp(28px, 3.5vw, 56px); align-items: stretch; } .cv-news-aufmacher { min-width: 0; background: var(--cv-white); border: 1px solid var(--cv-border); } .cv-news-aufmacher > a { display: grid; grid-template-rows: minmax(190px, 1fr) auto; height: 100%; color: inherit; text-decoration: none; } .cv-news-aufmacher__bild { width: 100%; height: 100%; min-height: 190px; object-fit: cover; display: block; } .cv-news-aufmacher__bild--leer { display: grid; place-items: center; background: var(--cv-off-white); color: var(--cv-teal-dark); } .cv-news-aufmacher__text { padding: 20px 24px 22px; } .cv-news-aufmacher__meta { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; color: var(--cv-text-muted); font-size: 11px; letter-spacing: .8px; text-transform: uppercase; } .cv-news-aufmacher__neu { color: var(--cv-teal-dark); font-weight: var(--cv-weight-semibold); } .cv-news-aufmacher__neu::after { content: ""; display: inline-block; width: 18px; height: 1px; margin-left: 12px; vertical-align: middle; background: var(--cv-coral); } .cv-news-aufmacher h2 { max-width: 31ch; margin-bottom: 14px; font-size: clamp(18px, 1.55vw, 23px); } .cv-news-aufmacher .cv-link { margin-top: 0; } .cv-news-aufmacher:hover { border-color: var(--cv-slate-800); } .cv-news-aufmacher:focus-within { outline: 2px solid var(--cv-coral); outline-offset: 2px; } /* Ab dieser Breite war die 3:2-Abbildung plus Textkasten in Ians 1714-px- Aufnahme 624 px hoch, während der Kopftext nach rund 280 px endete. Ein 16:9-Aufmacher mit eingeblendeter Textfläche bringt beide Spalten wieder in dieselbe visuelle Höhenordnung. Zugleich entfällt das doppelte Polster zwischen den zwei unmittelbar aufeinanderfolgenden warmen Bändern. */ @media (min-width: 1200px) { .cv-seitenkopf--aufmacher { padding-bottom: 0; } .cv-seitenkopf--aufmacher + .cv-section { padding-top: clamp(48px, 4vw, 64px); } .cv-news-aufmacher { align-self: start; } .cv-news-aufmacher > a { position: relative; display: block; height: auto; aspect-ratio: 16 / 9; overflow: hidden; } .cv-news-aufmacher__bild { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; } .cv-news-aufmacher__text { position: absolute; inset: auto 0 0; background: rgba(255, 255, 255, .94); border-top: 1px solid var(--cv-border); } } /* Der Beitrag selbst. Satzbreite begrenzt, sonst laufen die Zeilen im Container über 1100 px und das liest sich nicht mehr. */ .cv-beitrag { max-width: 720px; } /* Datum als Bildunterschrift in der linken Spalte. Das Korallquadrat davor ist dieselbe Marke, die `.cv-chip` am Foto traegt — damit liest sich die Zeile als Teil der Bildgruppe und nicht als vergessener Rest. */ .cv-beitrag__datum { display: flex; align-items: center; gap: 10px; font-size: 12px; letter-spacing: .8px; text-transform: uppercase; color: var(--cv-text-muted); margin: 18px 0 0; } .cv-beitrag__datum::before { content: ""; width: 8px; height: 8px; background: var(--cv-coral); flex: none; } /* Ohne Bild steht das Datum wieder ueber dem Text, dort braucht es Abstand nach unten statt nach oben und keine Marke. */ .cv-beitrag__datum--oben { display: block; margin: 0 0 24px; } .cv-beitrag__datum--oben::before { display: none; } .cv-beitrag__bild { margin: 0 0 32px; position: relative; } .cv-beitrag__bild img { width: 100%; height: auto; display: block; } .cv-beitrag > p, .cv-beitrag__text > p { margin-bottom: 18px; line-height: 1.8; } /* Zwischenüberschriften im Beitrag. Grad wie in .cv-prosa, damit ein Beitrag und eine Textseite gleich aussehen. */ .cv-beitrag__text h2 { font-size: var(--cv-section-size-sm); line-height: var(--cv-section-lh); margin: 34px 0 14px; } .cv-beitrag__text h2:first-child { margin-top: 0; } .cv-beitrag__text a { color: var(--cv-slate-800); text-decoration: underline; text-underline-offset: 3px; } .cv-beitrag__text a:hover { color: var(--cv-coral); } .cv-beitrag__text strong { font-weight: var(--cv-weight-semibold); color: var(--cv-slate-800); } .cv-beitrag__zurueck { margin-top: 36px; } /* Beitrag mit Bild: Bild links und mitlaufend, Text rechts — dasselbe Raster wie das Kurzprofil auf /ueber-christiane, auf das Verena am 14.09.2026 gezeigt hat. max-width faellt weg, die Satzbreite kommt jetzt aus der Rasterspalte (1fr von .62fr 1fr, bei 1440px rund 700px). Das Anzeigeverhaeltnis des Bildes steht als Inline-Stil am und kommt aus blogbeitrag.php: gedeckelt auf 1:1 bis 4:5, nicht fest gesetzt. Warum ueberhaupt geschnitten wird, steht dort. */ .cv-beitrag--neben { max-width: none; display: grid; grid-template-columns: .62fr 1fr; gap: clamp(32px, 4.5vw, 80px); align-items: start; } /* Mitlaufend ist die ganze linke Spalte, nicht mehr nur das Bild — sonst bliebe das Datum am Anfang des Beitrags stehen, waehrend das Bild wegwandert. */ .cv-beitrag--neben .cv-beitrag__rail { position: sticky; top: clamp(96px, 11vh, 132px); } .cv-beitrag--neben .cv-beitrag__bild { margin: 0; } /* 38 % statt der Mitte: auf allen vier Bildern steht Christiane im oberen Drittel, ein mittiger Zuschnitt nimmt vom Kopf und laesst Tischplatte stehen. Am 14.09.2026 fuer jedes der vier Bilder einzeln angesehen. */ /* Das Verhaeltnis kommt als Eigenschaft am Element, nicht als aspect-ratio am Element: ein Inline-`aspect-ratio` schlaegt jede Regel aus dieser Datei und die gestapelte Fassung weiter unten koennte es nicht mehr abschalten. Als Variable entscheidet weiter das Stylesheet, wo der Wert ueberhaupt gilt. */ .cv-beitrag--neben .cv-beitrag__bild img { aspect-ratio: var(--cv-bildverhaeltnis, auto); height: auto; object-fit: cover; object-position: 50% 38%; } /* Die Rasterspalte allein waere auf einem 1680px-Schirm 855px breit, also rund 100 Zeichen je Zeile. Gemessen am 14.09.2026; bei 1440px sind es 748px und die Grenze greift nicht. */ .cv-beitrag--neben .cv-beitrag__spalte { max-width: 760px; } /* --- Über Christiane ------------------------------------------------------ */ .cv-ueber { display: grid; grid-template-columns: .8fr 1fr; gap: clamp(32px, 4.5vw, 80px); align-items: center; } /* Quadrat statt Hochformat, auf Ians Wort vom 27.08.2026. Der freigegebene Entwurf zeigt hier 572 × 690, also ein stehendes Bild; nebeneinander mit der kurzen Textspalte wirkt das wie eine Säule. Ein Quadrat sitzt ruhiger und schneidet weniger weg als ein Querformat — bei 4:3 fällt bei diesem Porträt die Schulterpartie heraus und der Kopf rutscht an den oberen Rand. */ .cv-ueber__marke { position: relative; aspect-ratio: 1 / 1; display: grid; place-items: center; background: var(--cv-band-warm); overflow: visible; /* min-height: 0 ist hier das Ganze, nicht Kosmetik. Rasterkinder haben von sich aus min-height: auto, also mindestens die Höhe ihres Inhalts. Der Inhalt ist ein 1024 × 1536 grosses Bild, das bei 479 px Breite 719 px hoch werden will — und diese 719 px schlagen das aspect-ratio. Genau deshalb hat auch das ursprüngliche 572 / 690 nie gegriffen: die Fläche war immer so hoch wie das Foto. Am 27.08.2026 im Browser nachgemessen, nicht hergeleitet. */ min-height: 0; } /* object-position steuert, WAS vom Bild stehen bleibt. Bei einem stehenden Porträt in einem quadratischen Rahmen schneidet der Standard 50% 50% oben und unten gleich viel weg, und das kostet bei einem Porträt genau den Kopf. Deshalb liegt der Punkt hoch. */ .cv-ueber__foto { width: 100%; height: 100%; min-height: 0; object-fit: cover; object-position: 50% 22%; } /* Dieselbe Bildfläche auf der Unterseite „Über Christiane“. Bisher hatte sie gar keine Regel, das Bild stand also in seinem eigenen Seitenverhältnis da — 1024 × 1536, noch höher als das Band auf der Startseite. */ .cv-ueber__bild { position: relative; aspect-ratio: 1 / 1; overflow: visible; } .cv-ueber__bild img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; display: block; } .cv-ueber__zeichen { width: min(68%, 360px); aspect-ratio: 1; display: grid; place-items: center; border: 1px solid var(--cv-sand); } .cv-ueber__zeichen img { width: 58%; height: auto; } .cv-ueber__marke .cv-chip { left: auto; right: -28px; bottom: 26px; } /* Die Profilspalte auf `/ueber-christiane`, 01.09.2026. Vorher: Portraet und Kurzprofil nebeneinander mittig ausgerichtet, darunter ein zweiter Block ueber die volle Breite fuer den persoenlichen Teil. Der Text stand also zweimal an zwei verschiedenen Zeilenanfaengen, und zwischen beiden lag eine Linie. Verena am 01.09.2026 zu genau dieser Stelle: "the text does not brake as bad as it is right now". Jetzt: eine Spalte, oben angesetzt, das Portraet daneben hochkant. Das Bild ist `sticky`, weil die Textspalte laenger ist als es selbst - ohne das bleibt die linke Haelfte auf halber Hoehe leer, was derselbe Fehler an einer neuen Stelle waere. `top` liegt unter der Kopfzeile. Die Spalten stehen enger beieinander als in `.cv-ueber` (.8fr 1fr): der Fliesstext ist ohnehin auf 62 Zeichen gedeckelt, eine breitere Textspalte traegt also keine Zeile mehr, waehrend das schmalere Bild dem Text Hoehe gibt. Gemessen, nicht geschaetzt. */ .cv-ueber--profil { grid-template-columns: .62fr 1fr; align-items: start; } .cv-ueber--profil .cv-ueber__bild { aspect-ratio: 4 / 5; position: sticky; top: clamp(96px, 11vh, 132px); } /* Der persoenliche Teil, jetzt IN der Textspalte. Zeilenlaenge wie `.cv-lead` darueber, sonst springt der rechte Rand mitten im Text um sechs Zeichen. OHNE Linie darueber, Ian am 01.09.2026: "this line is useless there." Sie stammt aus dem alten Aufbau, in dem der persoenliche Teil ein eigener Block ueber die volle Breite war und eine Kante brauchte, um sich vom Kurzprofil abzusetzen. In einer Spalte trennt sie einen Text, den Christiane als ein Stueck geschrieben hat - derselbe Bruch, den Verena am selben Tag gemeldet hat, nur noch als Strich uebrig. Der Wechsel traegt sich jetzt ueber den Abstand: 34 px gegen 18 px zwischen zwei Absaetzen. */ .cv-ueber__persoenlich { margin-top: 34px; } .cv-ueber__persoenlich.cv-prosa { max-width: 62ch; } .cv-ueber__text .cv-lead + .cv-lead { margin-top: 18px; } .cv-ueber__text .cv-sektionstitel { margin-bottom: 24px; } .cv-ueber__text strong { font-weight: var(--cv-weight-semibold); color: var(--cv-slate-800); } .cv-unterschrift { width: 158px; margin: 28px 0 24px; } /* --- FAQ ------------------------------------------------------------------ */ .cv-faq-raster { display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(32px, 4vw, 72px); align-items: center; } /* Der freigegebene Entwurf enthält keinen FAQ-Abschnitt, es gibt für ihn also keine Vorlage. Diese Fassung übernimmt stattdessen die Formensprache, die im Entwurf messbar ist: 1 px Rahmen ohne Radius, der Pfeil rechts wie bei „MEHR ERFAHREN →", Sand als feiner Trenner (so steht es im Brand Guide) und Korall als einzige Markierung des offenen Eintrags. */ .cv-faq { display: grid; gap: 14px; margin-top: 36px; } .cv-faq__eintrag { border: 1px solid var(--cv-border); border-left: 3px solid transparent; background: var(--cv-white); } .cv-faq__eintrag:has([aria-expanded="true"]) { border-left-color: var(--cv-accent); } .cv-faq__frage { width: 100%; display: flex; align-items: center; gap: 24px; background: none; border: 0; padding: 20px 24px; font: inherit; font-size: var(--cv-h2-size); line-height: var(--cv-h2-lh); font-weight: var(--cv-weight-semibold); color: var(--cv-slate-800); text-align: left; cursor: pointer; } .cv-faq__frage .cv-icon { width: 20px; height: 20px; flex: none; margin-left: auto; color: var(--cv-teal-mid); transition: transform .2s ease; } .cv-faq__frage[aria-expanded="true"] .cv-icon { transform: rotate(90deg); } .cv-faq__antwort { margin-inline: 24px; padding: 16px 44px 20px 0; border-top: 1px solid var(--cv-sand); color: var(--cv-text-muted); } .cv-faq__antwort[hidden] { display: none; } .cv-markenrad { justify-self: center; max-width: 320px; } /* --- Abschluss-CTA -------------------------------------------------------- */ .cv-abschluss { text-align: center; } .cv-abschluss .cv-btn-reihe { justify-content: center; margin-block: 32px 24px; } .cv-abschluss__zusagen { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px; color: var(--cv-text-muted); font-size: 13px; } .cv-abschluss__zusagen li { display: flex; align-items: center; gap: 8px; } .cv-abschluss__zusagen .cv-icon { width: 16px; height: 16px; color: var(--cv-teal-mid); } .cv-welle { position: relative; line-height: 0; } .cv-welle svg { display: block; width: 100%; height: auto; } .cv-welle__punkt { position: absolute; left: var(--x); top: var(--y); width: var(--d); height: var(--d); border-radius: 50%; background: var(--farbe); transform: translate(-50%, -50%); } /* --- Fuss ----------------------------------------------------------------- */ .cv-footer { background: var(--cv-footer-bg); color: rgba(255,255,255,.78); padding-block: clamp(48px, 5vw, 72px) 32px; } .cv-footer__raster { display: grid; grid-template-columns: 1.5fr 1fr 1.2fr; gap: clamp(32px, 4vw, 64px); } /* Der Fuss trägt das Zeichen im Entwurf grösser als der Kopf: 210 px breit, Namenszug 10,2 px hoch, das wären 44 px Kastenhöhe. Ian hat am 25.08.2026 entschieden, es im Fuss doppelt so gross zu setzen. Doppelt heisst hier 44 -> 88 px Kastenhöhe, also 465,9 px Kastenbreite, 419,9 px bemalte Breite und ein Namenszug von 20,4 px. Bewusste Abweichung vom Entwurf. Gesteuert wird über die BREITE, nicht über die Höhe. Grund: die Fussspalte misst bei 940 px Fensterbreite nur 390 px. Mit fester Höhe und max-width: 100 % würde das Zeichen dort in der Breite gestaucht — genau der Fehler, der im Kopf schon einmal drin war und den der Brand Guide verbietet. Mit width + height: auto bleibt das Seitenverhältnis an jeder Breite. */ .cv-footer__logo img { width: min(466px, 100%); height: auto; margin-bottom: 24px; } .cv-footer p { max-width: 38ch; } .cv-footer h2 { font-size: var(--cv-kicker-size); line-height: var(--cv-kicker-lh); letter-spacing: var(--cv-kicker-ls); text-transform: uppercase; color: var(--cv-sand); margin-bottom: 20px; } .cv-footer h2::before { content: "– "; } .cv-footer__nav { display: grid; gap: 12px; } .cv-footer a { text-decoration: none; } .cv-footer__nav a:hover, .cv-footer__meta a:hover { color: #fff; } .cv-footer__kontakt { display: grid; gap: 12px; } .cv-footer__kontakt .cv-caveat { color: var(--cv-sand); margin-top: 10px; } .cv-sozial { display: flex; gap: 12px; margin-top: 24px; } .cv-sozial a { width: 36px; height: 36px; display: grid; place-items: center; background: rgba(255,255,255,.1); color: #fff; } .cv-sozial a:hover { background: var(--cv-coral); } .cv-sozial .cv-icon { width: 17px; height: 17px; } .cv-footer__meta { display: flex; flex-wrap: wrap; gap: 28px; margin-top: clamp(40px, 4vw, 64px); padding-top: 26px; border-top: 1px solid rgba(255,255,255,.14); font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; } /* --- Buchungsdialog (simplybook.me, Klick-zum-Laden) ---------------------- */ .cv-dialog { border: 0; padding: 0; width: min(920px, calc(100vw - 32px)); max-height: min(92vh, 940px); overflow: auto; background: var(--cv-white); color: var(--cv-text); } .cv-dialog::backdrop { background: rgba(30,41,59,.6); } .cv-dialog__kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 26px 28px 0; } .cv-dialog__kopf h2 { font-size: var(--cv-section-size-sm); line-height: 1.2; } .cv-dialog__schliessen { background: none; border: 1px solid var(--cv-border); width: 36px; height: 36px; display: grid; place-items: center; cursor: pointer; color: var(--cv-slate-800); flex: none; } .cv-dialog__koerper { padding: 20px 28px 28px; } .cv-dialog__hinweis { color: var(--cv-text-muted); max-width: 66ch; margin-bottom: 22px; } .cv-dialog__ziel:empty { min-height: 0; } .cv-dialog__ziel { min-height: 520px; } /* --- Offene Angaben ------------------------------------------------------- Text, der im freigegebenen Entwurf steht, aber nachweislich nicht stimmt oder noch fehlt. Im Bauzustand sichtbar markiert, damit er nicht mitläuft. Abschalten zusammen mit den Platzhaltern. -------------------------------------------------------------------------- */ [data-platzhalter="an"] .cv-offen { text-decoration: underline dotted var(--cv-coral); text-underline-offset: 4px; cursor: help; } /* --- Platzhaltermarkierung ------------------------------------------------ Jedes Bild in diesem Bau stammt aus dem Entwurfs-PDF und ist NICHT lizenziert. Der Rahmen macht das im Browser sichtbar, damit niemand die Seite für auslieferbar hält. Abschalten mit . -------------------------------------------------------------------------- */ [data-platzhalter="an"] .cv-platzhalter { position: relative; } [data-platzhalter="an"] .cv-platzhalter::after { content: "Platzhalter"; position: absolute; top: 0; left: 0; z-index: 2; background: var(--cv-coral); color: #fff; font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; padding: 4px 8px; } /* --- Unterseiten ---------------------------------------------------------- Der freigegebene Entwurf zeigt nur die Startseite. Für die Unterseiten gibt es also keine Vorlage, gegen die man messen könnte. Diese Bausteine erfinden deshalb keine eigene Formensprache, sondern übernehmen die, die im Entwurf messbar ist: Rahmen 1 px ohne Radius, warmes Band als Abschnittsfläche, Kicker über der Überschrift, Pfeil rechts am Verweis, Korall nur als Akzent. -------------------------------------------------------------------------- */ .cv-seitenkopf { background: var(--cv-band-warm); padding-block: clamp(32px, 4vw, 64px) clamp(40px, 4.5vw, 72px); } .cv-seitenkopf .cv-lead { max-width: 68ch; } /* Bild NEBEN dem Kopftext, siehe cvKopfbild() in site/plugins/cv/index.php. WOZU: Die Überschrift ist auf 24ch begrenzt und der Lead auf 68ch, damit die Zeilen lesbar bleiben. Bei 1277 px Container endet der Text je nach Seite zwischen 474 und 769 px — rechts daneben standen 589 bis 885 px leere warme Fläche, während das Bild als 1277 px breites Band darunter lag. DIE SPALTE WÄCHST MIT, SIE IST NICHT MEHR 460 PX FEST. Eine feste Breite deckte den Fleck nur dort, wo das Fenster klein ist: gemessen am 30.08.2026 auf der Vorschaudomain deckten 460 px bei 1024 px Fenster 92 % des leeren Streifens, bei 1440 px noch 78 % und bei 1660 px nur 60 %, weil der Container mitwächst und die Spalte nicht. Ian sah den Rest. `clamp(460px, 50%, 730px)` hält deshalb unten die alte Breite (unter etwa 1180 px Fenster ändert sich nichts) und lässt die Spalte darüber mit dem Container wachsen. Der Container ist auf 1460 px begrenzt, 50 % davon sind 730 px — die Obergrenze ist also erreicht, bevor die Auflösung reisst. Deckung danach: 91 / 91 / 92 % bei 1024 / 1440 / 1660 auf /leistungen. DIE UNTERGRENZE DER HÖHE IST JETZT AUCH VERHÄLTNIS UND NICHT MEHR 280 PX FEST. Die Höhe kommt weiter vom Kopftext daneben (siehe unten), aber auf den Seiten mit einer einzeiligen Überschrift greift die Untergrenze — und 280 px sind bei 460 px Breite ein 1,64:1-Ausschnitt, bei 730 px Breite ein 2,6:1-Schlitz. `clamp(280px, 30vw, 440px)` hält bei kleinem Fenster genau die alte Zahl und gibt dem breiten Bild die Höhe, die zu ihm gehört. Am Telefon fällt die Spalte unter den Text und wird 3:2 — dasselbe Format, das das Band dort hatte, aus demselben Grund: 4:3 ist auf 350 px Breite ein Klotz, 3:1 ein Schlitz. */ .cv-seitenkopf--mitbild .cv-container { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, clamp(460px, 50%, 730px)); gap: clamp(28px, 3.5vw, 56px); align-items: stretch; } /* Das Bild ist absolut gesetzt, damit die Figur KEINE eigene Höhe in die Rasterzeile einbringt. Sonst bestimmt die Datei die Zeilenhöhe: bei 460 px Spaltenbreite ist eine 4:3-Aufnahme 345 px hoch, der Kopftext von /fuer-wen/hr-people-culture aber nur 230 — und unter dem Text stünden 115 px leere warme Fläche, also genau der Fleck, den dieser Umbau schliessen soll, nur eine Spalte weiter links. So herum gibt der Text die Höhe vor und das Bild füllt sie aus, auf jeder der neun Seiten. `min-height` ist die Untergrenze: der kürzeste Kopf ist 230 px, und darunter würde das Bild zum Schlitz. Sie wächst seit dem 30.08.2026 mit der Spalte, weil die Spalte selbst mitwächst — 280 px unten, 440 px oben. Der Preis ist sichtbar und gewollt: auf den Seiten mit einer einzeiligen Überschrift steht die leere warme Fläche jetzt UNTER dem Text statt neben ihm. Christiane setzt den Fokuspunkt im Panel je Bild, cvBildausschnitt() gibt ihn als object-position aus. */ .cv-kopfbild { margin: 0; position: relative; min-height: clamp(280px, 30vw, 440px); overflow: hidden; } .cv-kopfbild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } @media (max-width: 900px) { .cv-seitenkopf--mitbild .cv-container { grid-template-columns: minmax(0, 1fr); } .cv-kopfbild { min-height: 0; margin-top: 8px; } .cv-kopfbild img { position: static; height: auto; aspect-ratio: 3 / 2; } } /* Portrait-Duo im Kopf (seit 05.09.2026, Kursseite): zwei überlappende Fotos statt einer montierten Grafik — Verena lehnte die Flächenmontage ab, Ian gab die Staffelung mit Namensschildern vor. Die Maße kommen aus dem freigegebenen Entwurf (Fläche 44:31, Portraits 51 % breit im Schnitt 235:265); der Container hat ein Seitenverhältnis statt einer Höhe, damit die Staffelung in jeder Spaltenbreite dieselbe bleibt. DIE SCHILDER SITZEN UNTEN AUF DEN PORTRAITS, nie oben: oben stünden sie im Gesicht — genau die Auflage, mit der Ian den Entwurf freigegeben hat. Das Titelschild über der Fläche ist davon ausgenommen, es steht ZWISCHEN den Köpfen auf der Fuge, wo kein Gesicht ist. */ .cv-kopfduo { position: relative; width: min(100%, 440px); aspect-ratio: 44 / 31; align-self: center; justify-self: end; } .cv-kopfduo .cv-chip { font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; padding: 7px 12px; /* Nicht umbrechen, lieber über die Fotokante auslaufen wie in der freigegebenen Vorlage: der Überhang landet unten auf Schulter und Jackett, nie im Gesicht. */ white-space: nowrap; max-width: none; } .cv-kopfduo__titel { left: 50%; bottom: auto; top: 0; transform: translate(-50%, -55%); background: var(--cv-slate-800); color: var(--cv-off-white); z-index: 3; } .cv-kopfduo__bild { position: absolute; margin: 0; width: 51%; height: 88%; box-shadow: 0 18px 40px rgba(30, 41, 59, .16); } .cv-kopfduo__bild img { width: 100%; height: 100%; object-fit: cover; } .cv-kopfduo__bild--hinten { left: 0; bottom: 0; } .cv-kopfduo__bild--vorn { right: 0; top: 0; z-index: 2; } .cv-kopfduo__bild .cv-chip { left: 10px; right: auto; bottom: 10px; } .cv-kopfduo__bild--vorn .cv-chip { left: auto; right: 10px; } @media (max-width: 900px) { .cv-kopfduo { justify-self: start; margin-top: 24px; width: min(100%, 430px); } } /* Zier im leeren Streifen rechts, für Seiten OHNE Bildfeld. Siehe site/snippets/rollenkompass.php — dort steht, warum es ein Kompass ist und keine Skala. ABSOLUT UND NICHT IM RASTER: die Zier soll dem Kopftext nichts wegnehmen. Deshalb bekommt der Container `position: relative` und die Grafik hängt sich rechts unten hinein. Nebenwirkung, die hier erwünscht ist: der Kopf dieser Seite trägt weiter keine Rasterklasse, kopfbild-probe.py prüft genau das für die Seiten ohne Bildfeld. `bottom` zieht die Grafik über das untere Polster des Seitenkopfs hinaus bis auf die Kante zwischen warmer Fläche und Weiss — der halbe Kompass soll aus dieser Kante aufsteigen und nicht ein Stück darüber schweben. Die Zahl ist dasselbe clamp wie das Polster in .cv-seitenkopf; laufen die beiden auseinander, steht die Grafik falsch. `overflow: hidden` nur auf DIESEM Kopf: der untere Teil des Kompasses liegt unter der Kante und muss weg. Auf den anderen Köpfen bleibt overflow ungesetzt, damit dieser Umbau dort nichts anfassen kann. DIE BREITE IST `100% - 760px` UND KEIN PROZENTSATZ DES CONTAINERS. Ein Prozentsatz war der erste Versuch und ging schief: der Kopftext ist auf 24ch Überschrift und 68ch Lead begrenzt, also fast breitenunabhängig 657 px breit, während der Container von 908 auf 1460 px wächst. Der leere Streifen ist deshalb bei 1024 px Fenster nur 193 px breit und bei 1660 px 803 — ein fester Prozentsatz passt auf höchstens eine dieser Breiten. Mit `clamp(360px, 42%, 620px)` lag die Grafik bei 1024 px 130 px WEIT AUF DEM TEXT; die Probe hat es gefunden, das Auge hätte es auch, aber erst später. 760 = 657 px Textbreite + rund 100 px Abstand. Der Abstand bleibt damit konstant, statt mit dem Fenster zu wandern. Deckung des leeren Streifens danach: 78 / 83 / 77 % bei 1280 / 1440 / 1660. ERST AB 1280 PX. Darunter bleibt von `100% - 760px` zu wenig übrig, und den Streifen gibt es dort ohnehin kaum: bei 1024 px Fenster sind es 193 px. Gemessen, nicht geschätzt — tools/rollenkompass-probe.py. */ .cv-seitenkopf--schmuck { overflow: hidden; } .cv-seitenkopf--schmuck .cv-container { position: relative; } .cv-rollenkompass { display: none; } @media (min-width: 1280px) { .cv-rollenkompass { display: block; position: absolute; right: 0; bottom: calc(-1 * clamp(40px, 4.5vw, 72px)); width: min(620px, calc(100% - 760px)); pointer-events: none; } .cv-rollenkompass svg { display: block; width: 100%; height: auto; } } /* Die Ringe sind Sand, also derselbe dekorative Strich wie überall sonst; nur der Ring, auf dem die vier Rollen sitzen, ist Teal und trägt damit das Zeichen. Volle Sättigung wäre hier zu laut: die Grafik steht neben einer H1 und einem Korall-Knopf und soll nicht der dritte Bewerber um dasselbe Auge sein. */ .cv-rollenkompass__netz { fill: none; stroke: var(--cv-sand); stroke-width: 1; } .cv-rollenkompass__ring { fill: none; stroke: var(--cv-teal-mid); stroke-width: 1.4; opacity: .5; } .cv-rollenkompass__nadel--nord { fill: var(--cv-teal-dark); opacity: .55; } .cv-rollenkompass__nadel--spitze { fill: var(--cv-coral); } .cv-rollenkompass__pin { fill: var(--cv-teal-dark); } .cv-rollenkompass__scheibe { fill: var(--cv-white); stroke: var(--cv-sand); stroke-width: 1; } /* Die Strichwerte stehen hier noch einmal und nicht über .cv-icon, weil die Symbole hier in einem SVG sind und kein verschachteltes : die Grössenangaben von .cv-icon sind CSS und greifen dort nicht. Die Zahlen sind dieselben Variablen, damit sie mit den anderen Symbolen mitwandern. 1,75 px werden von 24 auf 26 skaliert, also 1,9 px gezeichnet. Die vier Füllfarben sind dieselben wie .cv-zielgruppe__signet--*: Sand mit Slate-Icon (Kontrast, siehe cvSignetKlasse), die drei anderen mit Weiss. */ .cv-rollenkompass__symbol { fill: none; stroke: var(--cv-teal-dark); stroke-width: var(--cv-icon-stroke); stroke-linecap: round; stroke-linejoin: round; } .cv-rollenkompass__marke--sand .cv-rollenkompass__scheibe { fill: var(--cv-sand); stroke: var(--cv-sand); } .cv-rollenkompass__marke--sand .cv-rollenkompass__symbol { stroke: var(--cv-slate-800); } .cv-rollenkompass__marke--petrol .cv-rollenkompass__scheibe { fill: var(--cv-teal-dark); stroke: var(--cv-teal-dark); } .cv-rollenkompass__marke--petrol .cv-rollenkompass__symbol { stroke: var(--cv-white); } .cv-rollenkompass__marke--koralle .cv-rollenkompass__scheibe { fill: var(--cv-coral); stroke: var(--cv-coral); } .cv-rollenkompass__marke--koralle .cv-rollenkompass__symbol { stroke: var(--cv-white); } .cv-rollenkompass__marke--marine .cv-rollenkompass__scheibe { fill: var(--cv-slate-800); stroke: var(--cv-slate-800); } .cv-rollenkompass__marke--marine .cv-rollenkompass__symbol { stroke: var(--cv-white); } /* Einmal und dann still. WARUM KEINE SCHLEIFE: neben der H1 und dem Korall-Knopf ist ein dauernd laufendes Element ein dritter Bewerber um dasselbe Auge, und auf dieser Marke liest sich das als Zierde statt als Zeichen. Die Bewegung sagt „der Kompass hat sich eingependelt" und ist danach fertig. Der Drehpunkt ist die NADELMITTE (310 288) und nicht die Kastenmitte; sonst wandert die Nadel beim Drehen quer durch das Zeichen. Ohne die Abfrage läuft nichts: `prefers-reduced-motion: reduce` bekommt den Endzustand, nicht eine langsamere Bewegung. */ @media (prefers-reduced-motion: no-preference) { .cv-rollenkompass__nadel { transform-box: view-box; transform-origin: 310px 288px; animation: cv-kompass-einschwingen 1.5s cubic-bezier(.22, .9, .24, 1) .2s both; } .cv-rollenkompass__marke { opacity: 0; animation: cv-kompass-auftauchen .5s ease-out both; } .cv-rollenkompass__marke:nth-child(1) { animation-delay: .35s; } .cv-rollenkompass__marke:nth-child(2) { animation-delay: .50s; } .cv-rollenkompass__marke:nth-child(3) { animation-delay: .65s; } .cv-rollenkompass__marke:nth-child(4) { animation-delay: .80s; } } @keyframes cv-kompass-einschwingen { from { transform: rotate(-34deg); } to { transform: rotate(0); } } @keyframes cv-kompass-auftauchen { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } /* Das Markenrad im leeren Streifen rechts von /ueber-christiane. Siehe site/snippets/markenrad-zier.php — dort steht, warum es das Markenrad ist und keine neue Zeichnung. MASSE, GEMESSEN STATT GESCHÄTZT (Chromium, 01.09.2026): Der Kopftext dieser Seite ist auf 24ch Überschrift und 68ch Lead begrenzt und deshalb fast breitenunabhängig 685 px breit, während der Container von 1135 auf 1460 px wächst. Der leere Streifen misst 455 / 593 / 775 px bei 1280 / 1440 / 1660 px Fenster. 795 = 685 px Text + 110 px Abstand; der Abstand bleibt damit konstant, statt mit dem Fenster zu wandern. 300 PX UND KEIN PROZENTSATZ: das Rad trägt Text auf dem Ring. Unter rund 240 px werden die Versalien kleiner als 5 px und das Zeichen wird zu einem grauen Kranz. 300 px bleiben etwas kleiner als die 320 px auf der Startseite und auf /leistungen/leadership-wirkungskompass, schliessen den Streifen hier aber deutlicher als die erste Fassung mit 260 px. DIE MINDESTHÖHE IST DER GRUND FÜR DIE ZWEITE KLASSE, UND ZWAR WEGEN DES ABSTANDS ZUR BANDKANTE — nicht, weil sonst etwas abgeschnitten würde. Das habe ich zuerst behauptet und dann gemessen: der Kopf dieser Seite ist ohne Mindesthöhe 297 px hoch, davon 188 px Inhalt zwischen den Polstern, und der Kreis von 260 px bleibt auch dann noch ganz sichtbar — aber mit 15 px Luft nach oben und 22 px nach unten klebt er an beiden Kanten der warmen Fläche. Mit `min-height` bekommt er das Polster des Kopfes selbst, also 51 px oben und 58 px unten bei 1280, und der Kopf wächst auf 369 px. Damit liegt er neben den 403 px von /fuer-wen statt daneben zu wirken. Geprüft wird der ABSTAND und nicht die Sichtbarkeit — tools/markenrad-probe.py, Regel „Luft zur Bandkante". Eine Probe auf „ganz im Kopf" wäre grün geblieben, als ich die Mindesthöhe zur Gegenprobe herausnahm. SENKRECHT UND WAAGERECHT MITTIG: der Kompass steigt aus der Kante auf, das Rad steht frei. Waagerecht ist die Mitte des tatsaechlich freien Streifens gemeint: zwischen der bei allen geprueften Breiten 685 px breiten Textkante und dem rechten Containerrand. Die erste Fassung hing das Rad rechts an den Rand; bei 1660 px Fenster sammelten sich dadurch 515 px ungenutzte Flaeche zwischen Text und Rad. Ian hat diesen Fleck am 01.09.2026 markiert. */ .cv-markenrad-zier { display: none; } @media (min-width: 1280px) { .cv-seitenkopf--schmuck-markenrad-zier .cv-container { min-height: 300px; } .cv-markenrad-zier { display: block; position: absolute; left: calc((100% + 685px) / 2); top: 50%; transform: translate(-50%, -50%); width: min(300px, calc(100% - 765px)); height: auto; pointer-events: none; } } /* Bildband unter dem Seitenkopf, siehe site/snippets/seitenbild.php. Der Verlauf legt die obere Hälfte auf die warme Fläche des Seitenkopfs und die untere auf Weiss, das Bild sitzt also auf der Kante zwischen beiden. `background-color` bleibt bewusst ungesetzt: der Verlauf muss unten durchsichtig sein, sonst steht ein warmer Streifen über dem weissen Abschnitt. DIE DATEIEN SIND 16:9, ANGEZEIGT WIRD 3:1. Das ist Absicht und keine Schlamperei. 16:9 ist die breiteste Stufe, die diese Aufnahmen im Zuschnitt tragen — 24 der 28 Vitra-Haus-Bilder sind hochformatig. Angezeigt ist 16:9 aber viel zu hoch: bei 1280 px Fenster wären das 639 px Bandhöhe, das Bild drängt den Text von der ersten Ansicht. 3:1 sind 378 px und lesen sich als Kopfbild statt als Bühne. Der Rest der Dateihöhe ist Spielraum für den Fokuspunkt, den Christiane im Panel je Bild setzen kann. Nachgerechnet, nicht geschätzt: bei 3:1 bleiben 59,3 % der Dateihöhe stehen, mit `object-position` 32 % also das Fenster 13,0 % bis 72,6 %. Die Gesichter aller neun Bänder liegen zwischen 23,5 % und 51,1 %. Am knappsten sitzt die Zielgruppenkachel „Geschäftsführungen“, deren Datei 4:3 ist: dort ist das Fenster 17,8 % bis 62,2 % und der Scheitel bei 23,5 %. Mit dem sonst üblichen 50 % läge das Fenster bei 27,8 % und schnitte ihr den Kopf ab — genau deshalb steht in seitenbild.php 32 % und nicht die Mitte. Am Telefon wird 3:1 zum Schlitz (350 px breit = 117 px hoch), deshalb dort 3:2. Auch das ist durchgerechnet: 3:2 zeigt die volle Dateihöhe der 16:9- Bänder und 88,9 % der 4:3-Kacheln, alle Gesichter bleiben im Fenster. */ .cv-seitenbild { background: linear-gradient(var(--cv-band-warm) 50%, rgba(0, 0, 0, 0) 50%); } .cv-seitenbild__rahmen { margin: 0; position: relative; } .cv-seitenbild__rahmen img { display: block; width: 100%; aspect-ratio: 3 / 1; object-fit: cover; } @media (max-width: 640px) { .cv-seitenbild__rahmen img { aspect-ratio: 3 / 2; } } .cv-brotkrumen { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 22px; font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; font-weight: var(--cv-weight-medium); color: var(--cv-text-muted); } .cv-brotkrumen a { text-decoration: none; } .cv-brotkrumen a:hover { color: var(--cv-coral); } .cv-brotkrumen [aria-hidden] { color: var(--cv-sand); } .cv-brotkrumen [aria-current] { color: var(--cv-slate-800); } /* Der Entwurf setzt die Hero-Zeile auf 48 px und die Sektionstitel auf 26–32. Eine Seitenüberschrift steht dazwischen: gross genug, um Seitenanfang zu sein, kleiner als der Hero der Startseite, der einmalig bleiben soll. */ .cv-seitentitel { font-size: clamp(28px, 3vw, 40px); line-height: 1.15; letter-spacing: -.6px; font-weight: var(--cv-weight-light); max-width: 24ch; margin-bottom: 22px; } /* Text links, Karte in der verbleibenden Spalte. 68ch ist die übliche Obergrenze für angenehm lesbare Zeilenlänge; gemessen 688 px bei 14 px Grundschrift. Die erste Fassung spann die linke Spalte auf 1fr und klebte die Karte mit max. 380 px rechts an den Containerrand. Der Text blieb 688 px, der Rest der linken Spalte sammelte sich dazwischen — 392 px Loch bei 1660 px Fenster, 0 px rechts der Karte. Ian hat diesen Fleck am 01.09.2026 markiert. DIE LINKE SPALTE IST JETZT SELBST 68ch, nicht 1fr mit einem 68ch-Kind. Die ungenutzte Breite fällt damit in die rechte Spalte, und die Karte steht in deren Mitte. 420 px statt 380 px, analog zum Markenrad (260 → 300): etwas groesser, ohne die Karte zur Flaeche zu machen. DER ABSTAND BLEIBT 32 px und waechst nicht mit dem Fenster. Die alte clamp(32px, 4vw, 72px) schob die Karte weiter nach rechts, je breiter das Fenster wurde — genau die Richtung, in der das Loch wuchs. Geprueft wird die MITTE des freien Streifens, nicht nur der Mindestabstand: tools/nebenspalte-probe.py. /ueber-christiane hatte hier bis 02.09.2026 einen Sonderfall (dritte Spalte mit Ziergrafik ab 1600 px, davor ein KI-Bild). Der Abschnitt ist seitdem keine Textseite mit Karte mehr, sondern eigenstaendig gebaut — siehe .cv-arbeitsraster unten und 10_Reports/2026-09-02-arbeitsweise/. */ .cv-textseite { display: grid; grid-template-columns: minmax(0, 68ch) minmax(280px, 1fr); gap: 32px; align-items: start; } .cv-textseite > .cv-nebenspalte { width: min(420px, 100%); justify-self: center; } .cv-prosa { max-width: 68ch; display: grid; gap: 18px; color: var(--cv-text-muted); } .cv-prosa h2 { font-size: var(--cv-section-size-sm); line-height: var(--cv-section-lh); margin-top: 18px; } .cv-prosa h2:first-child { margin-top: 0; } .cv-prosa a { color: var(--cv-slate-800); text-decoration: underline; text-underline-offset: 3px; } .cv-prosa a:hover { color: var(--cv-coral); } .cv-prosa strong { font-weight: var(--cv-weight-semibold); color: var(--cv-slate-800); } .cv-prosa--recht { max-width: 74ch; } .cv-quelle { font-size: 12px; margin-top: 12px; } .cv-nowrap { white-space: nowrap; } /* „Wie ich arbeite" auf /ueber-christiane, 02.09.2026 nach Ians Wahl (Variante A). Vorgeschichte: die Zertifikate standen als Karte neben dem Text, und jede Fuellung der Restbreite (KI-Bild, Liniengrafik, Zitat daneben) blieb Dekoration — Ian: „they still not look that good design wise." Der Abschnitt oeffnet jetzt wie seine Nachbarn mit Kicker und Sektionstitel, und die rechte Spalte ist Inhalt: die Belege als Zeitschiene in derselben Behandlung wie der Werdegang direkt darueber (Schiene, Punkte, Haarlinien nur zwischen den Zeilen — Begruendung der Bauweise bei .cv-stationen). Masse eine Nummer kleiner als dort, weil die Eintraege einzeilig sind und die Spalte sonst lockerer wirkt als ihr Vorbild. Seit Ians Markierung vom 02.09.2026 liegen auch die beiden Spaltenkoepfe im Raster: „– Arbeitsweise" links und „– Zertifikate …" rechts starten auf exakt derselben y-Achse. Vorher stand der linke Kopf ausserhalb des Rasters, der rechte begann erst auf Hoehe des Fliesstexts. Eine Spalte unter 1160 px, nicht 941 wie bei .cv-textseite. Die Grenze ist gemessen, nicht geschaetzt: die Zeitschiene traegt links Einzug und 56 px Jahresmarke, und ihr laengstes unteilbares Wort („Veränderungskompetenz", ~160 px) muss rechts daneben noch stehen koennen. Bei 1100 lief es 11 px ueber den Rand, ab 1120 passt es — 1160 laesst den Eintraegen etwas Luft fuer laengere Woerter. */ .cv-arbeitsraster { display: grid; gap: 44px; align-items: start; } @media (min-width: 1160px) { .cv-arbeitsraster { grid-template-columns: minmax(0, 68ch) minmax(0, 1fr); column-gap: clamp(64px, 8vw, 140px); /* Ian, 02.09.2026: die rechte Spalte soll dieselbe Hoehe nutzen wie die linke. stretch, nicht start — die Zeichen sitzen dann unten auf der Linie des Zwischenzitats. */ align-items: stretch; } } .cv-belege__titel { margin-bottom: 6px; } .cv-prosa-spalte > .cv-sektionstitel { margin-bottom: 44px; } .cv-belegeliste { display: grid; gap: 0; list-style: none; margin: 0; --schiene: 3px; --punkt: 9px; --einzug: clamp(22px, 2.4vw, 34px); --punkt-y: 30px; padding-left: var(--einzug); } .cv-beleg { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: clamp(16px, 2vw, 32px); padding: 19px 0; } .cv-beleg + .cv-beleg { border-top: 1px solid var(--cv-border); } .cv-beleg::before, .cv-beleg::after { content: ""; position: absolute; } /* bottom: -1px ueberlappt die Trennlinie der naechsten Zeile — sonst bleibt an jeder Zeilenkante eine Luecke in der Schiene (siehe .cv-station). */ .cv-beleg::before { top: 0; bottom: -1px; left: calc(-1 * var(--einzug) - var(--schiene) / 2); width: var(--schiene); background: var(--cv-border); } .cv-beleg:first-child::before { top: var(--punkt-y); } .cv-beleg:last-child::before { bottom: auto; height: var(--punkt-y); } .cv-beleg:first-child:last-child::before { display: none; } .cv-beleg::after { top: calc(var(--punkt-y) - var(--punkt) / 2); left: calc(-1 * var(--einzug) - var(--punkt) / 2); width: var(--punkt); height: var(--punkt); border-radius: 50%; background: var(--cv-teal-dark); } .cv-beleg__jahr { font-size: 12px; letter-spacing: 1.6px; text-transform: uppercase; font-weight: var(--cv-weight-semibold); color: var(--cv-teal-mid); padding-top: 3px; } .cv-beleg ul { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; } /* break-word faengt kuenftige Eintraege ab, deren laengstes Wort die Spalte sprengt — bei den heutigen greift es nie (dafuer ist die 1160er Grenze da). */ .cv-beleg ul li { font-size: 14px; line-height: 1.6; color: var(--cv-slate-800); overflow-wrap: break-word; } /* Zeichen unter der Zeitschiene (Ians Variante E, 02.09.2026). Quadratisch, Korallpunkt wie .cv-chip, kein Fremdlogo. Ab 1160 px atmet die Jahresgruppe (32 px statt 19) und die Reihe klebt unten an der Spalte, damit beide Spalten dieselbe Hoehe nutzen. Die extra Luft sitzt IM Polster der Zeile, nicht als Luecke zwischen den Zeilen — sonst reisst die Schiene. */ .cv-belege__koerper { display: flex; flex-direction: column; min-height: 0; } .cv-siegel { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; list-style: none; margin: 0; padding: 8px 0 0; } .cv-siegel li { display: inline-flex; align-items: center; gap: 8px; background: var(--cv-white); color: var(--cv-slate-800); padding: 9px 14px; font-size: 12px; font-weight: var(--cv-weight-medium); border: 1px solid var(--cv-border); } .cv-siegel li::before { content: ""; width: 8px; height: 8px; background: var(--cv-coral); flex: none; } @media (min-width: 1160px) { .cv-belege { display: flex; flex-direction: column; min-height: 100%; } .cv-belege__koerper { flex: 1; } .cv-beleg { padding: 32px 0; --punkt-y: 41px; } .cv-siegel { margin-top: auto; padding-top: 28px; } } /* Der Schlusssatz des Textes als Zwischenzitat (Ians Variante A): dieselbe Korallkante wie die Rezensionen, damit die linke Spalte der Zeitschiene in der Hoehe begegnet und der Abschnitt eine Stimme bekommt. */ .cv-prosa-spalte { display: grid; gap: 40px; align-content: start; } .cv-zwischenzitat { margin: 0; padding: 8px 0 8px 28px; border-left: 3px solid var(--cv-coral); } .cv-zwischenzitat p { font-size: clamp(20px, 1.2vw + 8px, 26px); line-height: 1.4; font-weight: var(--cv-weight-light); color: var(--cv-teal-dark); } .cv-ergebnis { border-left: 3px solid var(--cv-coral); background: var(--cv-band-warm); padding: 20px 24px; margin-top: 8px; } /* --- Leadership-Kompass: dichter Kursrhythmus ---------------------------- */ /* Rombergers Seite lebt von kurzen, klar getrennten Etappen. Diese Kursseite uebernimmt den Rhythmus, nicht ihre Formensprache: eckige Flaechen, Petrol/Marine/Sand/Korall und die Typografie bleiben ganz Vogel. */ .cv-kursseite .cv-section { padding-block: clamp(48px, 5vw, 76px); } .cv-kursseite .cv-seitenkopf { padding-block: clamp(32px, 3.5vw, 52px); } .cv-kursseite .cv-seitenkopf--mitbild .cv-container { grid-template-columns: minmax(0, 1fr) minmax(300px, 420px); gap: clamp(28px, 3vw, 48px); align-items: center; } .cv-kursseite .cv-kopfbild { min-height: clamp(230px, 22vw, 300px); } .cv-kursintro .cv-textseite { align-items: stretch; } .cv-kursintro .cv-prosa { align-content: start; gap: 20px; } .cv-kursintro .cv-prosa > p:first-child { max-width: 34ch; margin-bottom: 4px; color: var(--cv-slate-800); font-size: clamp(20px, 1.6vw, 26px); line-height: 1.42; font-weight: var(--cv-weight-medium); } .cv-kursintro .cv-nebenspalte { width: min(460px, 100%); padding: clamp(24px, 2.4vw, 34px); border-top: 3px solid var(--cv-coral); } .cv-kursintro .cv-nebenspalte > .cv-icon { margin-bottom: 18px; } .cv-kursintro .cv-definitionen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 22px; } .cv-kursintro .cv-fakt { min-width: 0; } /* Das Programm bildet bewusst zwei grosszuegige und drei kompakte Etappen. So bleiben die langen Titel lesbar und die fuenf Wochen werden nicht zu einer Reihe schmaler, gleichfoermiger Kaestchen. */ .cv-kursseite .cv-schritte--reihe { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; margin-top: 34px; counter-reset: kurs-etappe; } .cv-kursseite .cv-schritte--reihe .cv-schritt { grid-column: span 2; position: relative; min-height: 150px; padding: 24px 26px 22px; border-left: 0; border-top: 3px solid var(--cv-sand); background: rgba(255,255,255,.075); } .cv-kursseite .cv-schritte--reihe .cv-schritt:nth-child(-n+2) { grid-column: span 3; } .cv-kursseite .cv-schritte--reihe .cv-schritt:last-child { border-top-color: var(--cv-coral); background: rgba(255,255,255,.12); } /* DREI ETAPPEN STATT FUENF — seit 15.09.2026, «Der Sandwich-Leader» Die Aufteilung darueber ist fuer die fuenf Wochen des Kompass gerechnet: zwei halbe Kacheln, dann Drittel, und die LETZTE traegt die Korallkante, weil sie dort das Bonus-Coaching ist. Auf einer Seite mit genau drei Etappen ergibt dieselbe Regel eine vollzeilige erste Reihe und darunter eine einzelne Drittelkachel, die aussieht wie ein Bonus, den es nicht gibt. Drei Etappen stehen deshalb in drei gleichen Spalten, und die dritte traegt die Sandkante wie ihre beiden Nachbarn. Nur ab 901px: darunter greifen die Regeln in den beiden Medienabfragen weiter unten, und ein :has()-Selektor waere dort der schwerere und wuerde das Stapeln aufheben. */ @media (min-width: 901px) { .cv-kursseite .cv-schritte--reihe:has(> .cv-schritt:nth-child(3):last-child) .cv-schritt, .cv-kursseite .cv-schritte--reihe:has(> .cv-schritt:nth-child(3):last-child) .cv-schritt:nth-child(-n+2) { grid-column: span 2; } .cv-kursseite .cv-schritte--reihe:has(> .cv-schritt:nth-child(3):last-child) .cv-schritt:last-child { border-top-color: var(--cv-sand); background: rgba(255,255,255,.075); } } .cv-kursseite .cv-schritt__kopf { display: block; margin-bottom: 12px; } .cv-kursseite .cv-schritt__nr { display: block; margin-bottom: 7px; font-size: 12px; line-height: 1.3; letter-spacing: 1.6px; text-transform: uppercase; } .cv-kursseite .cv-schritt h3 { font-size: 14px; line-height: 1.4; letter-spacing: .8px; } .cv-kursseite .cv-schritt p { font-size: 14px; line-height: 1.6; } /* --- Wer den Kurs gibt ---------------------------------------------------- */ .cv-personen__lead { margin-top: 18px; } .cv-personen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 30px; } /* Kompakte redaktionelle Profile statt bildschirmfuellender Portraets. Bild und Text bilden eine horizontale Einheit; die warme Flaeche gruppiert ohne Schatten oder Rundung und endet mit einer feinen Sandkante. */ .cv-person { display: grid; grid-template-columns: clamp(150px, 15vw, 210px) minmax(0, 1fr); gap: clamp(20px, 2vw, 30px); align-items: stretch; min-width: 0; background: var(--cv-band-warm); border-bottom: 1px solid var(--cv-sand); padding-right: clamp(20px, 2.2vw, 32px); } .cv-person__bild { position: relative; margin: 0; min-height: 0; aspect-ratio: 1 / 1; align-self: start; background: var(--cv-band-warm); } .cv-person__bild img { width: 100%; height: 100%; object-fit: cover; display: block; } .cv-person__text { align-self: start; padding-block: 24px; } .cv-person__chip { position: static; width: fit-content; max-width: 100%; margin: 0 0 14px; padding: 7px 10px; font-size: 12px; line-height: 1.35; } .cv-person__text > h3 { font-size: clamp(19px, 1vw + 12px, 23px); line-height: 1.3; font-weight: var(--cv-weight-semibold); color: var(--cv-text); } .cv-person__rolle { margin-top: 6px; font-size: var(--cv-kicker-size); line-height: var(--cv-kicker-lh); letter-spacing: var(--cv-kicker-ls); text-transform: uppercase; font-weight: var(--cv-weight-semibold); color: var(--cv-teal-mid); } /* Fliesstextfarbe wie ueberall sonst (`.cv-prosa`, `.cv-kurs p`, `.cv-lead`). Ohne diese Zeile erbt der Absatz Slate 800 vom Koerper und steht dann dunkler da als die Einleitung zwei Zeilen darueber. Gemessen, nicht geschaetzt: 14,63:1 gegen 7,58:1. */ .cv-person__text > p:not(.cv-person__rolle):not(.cv-person__chip) { margin-top: 12px; color: var(--cv-text-muted); font-size: 14px; line-height: 1.65; } /* Der gemeinsame Schlusssatz. Dieselbe Form wie `.cv-zwischenzitat`, aber eine Stufe kleiner: dort steht er allein in einer Textspalte, hier unter zwei Portraets und darf ihnen nicht den Rang ablaufen. */ .cv-personen__schluss { margin-top: 28px; padding: 6px 0 6px 24px; border-left: 3px solid var(--cv-coral); max-width: 52ch; font-size: clamp(18px, 1vw + 8px, 22px); line-height: 1.45; font-weight: var(--cv-weight-light); color: var(--cv-teal-dark); } @media (max-width: 1100px) { .cv-personen { grid-template-columns: minmax(0, 1fr); } .cv-person { grid-template-columns: clamp(170px, 24vw, 220px) minmax(0, 1fr); } } @media (max-width: 900px) { .cv-kursseite .cv-seitenkopf--mitbild .cv-container { grid-template-columns: minmax(0, 1fr); } .cv-kursseite .cv-kopfbild { width: min(100%, 520px); min-height: 0; } .cv-kursseite .cv-schritte--reihe .cv-schritt, .cv-kursseite .cv-schritte--reihe .cv-schritt:nth-child(-n+2) { grid-column: span 3; } .cv-kursseite .cv-schritte--reihe .cv-schritt:last-child { grid-column: span 6; } } @media (max-width: 560px) { .cv-kursintro .cv-definitionen { grid-template-columns: minmax(0, 1fr); } .cv-kursseite .cv-schritte--reihe .cv-schritt, .cv-kursseite .cv-schritte--reihe .cv-schritt:nth-child(-n+2), .cv-kursseite .cv-schritte--reihe .cv-schritt:last-child { grid-column: 1 / -1; min-height: 0; } .cv-person { grid-template-columns: minmax(0, 1fr); background: transparent; padding: 0 0 22px; } .cv-person__bild { width: min(48vw, 180px); min-height: 0; aspect-ratio: 1 / 1; } .cv-person__text { padding: 0; } } /* --- Nach dem Programm ---------------------------------------------------- */ /* Bis zum 04.09.2026 eine schmale Nebenspalte neben der Vorstellung. Die Vorstellung braucht die volle Breite, also steht die Ergebnisliste jetzt in demselben Marineband, mit dem `/ueber-christiane` auf die Kurse zeigt (`.cv-kursvorschau`) — gleiche Aufteilung, gleiche Polsterung. */ .cv-danachband { padding-block: clamp(40px, 4vw, 60px); } .cv-danachband__raster { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 3vw, 56px); align-items: start; } .cv-danachband .cv-sektionstitel { color: var(--cv-white); } .cv-danachband .cv-btn--primaer { margin-top: 26px; } /* Auf dunklem Grund erbt `.cv-haken li` die weisse Textfarbe des Bandes (14,63:1). Der Haken bleibt Korall und misst dort 4,49:1 — als Grafik braucht er 3,0 (WCAG 1.4.11), das haelt. Als TEXT waere er knapp zu wenig; er traegt hier keine Aussage, die nicht auch danebensteht. */ .cv-haken--dunkel li { font-size: 14px; line-height: 1.55; } /* Der Satz zwischen Ergebnisliste und letztem Knopf (`danach_schluss`, seit 15.09.2026). Dieselbe Form wie `.cv-personen__schluss` — Korallstrich links, leichte Schrift — aber auf dem Marineband, deshalb Weiss statt Petrol: var(--cv-white) auf Slate 800 misst 14,63:1, der Strich ist Grafik und braucht nur 3,0 (er haelt 4,49). */ .cv-danachband__schluss { margin-top: 24px; padding: 6px 0 6px 24px; border-left: 3px solid var(--cv-coral); max-width: 54ch; font-size: clamp(16px, .6vw + 12px, 19px); line-height: 1.5; font-weight: var(--cv-weight-light); color: var(--cv-white); } .cv-nebenspalte { border: 1px solid var(--cv-border); background: var(--cv-band-warm); padding: 28px; } .cv-band-cool .cv-nebenspalte, .cv-band-warm .cv-nebenspalte { background: var(--cv-white); } .cv-nebenspalte > .cv-icon { color: var(--cv-teal-dark); margin-bottom: 26px; } .cv-nebenspalte h2 { font-size: 13px; letter-spacing: 1.2px; text-transform: uppercase; margin-bottom: 18px; } .cv-nebenspalte .cv-haken li a { text-decoration: none; } .cv-nebenspalte .cv-haken li a:hover { color: var(--cv-coral); } .cv-nebenspalte .cv-btn { margin-top: 24px; width: 100%; justify-content: center; } .cv-definitionen { display: grid; gap: 16px; font-size: 13px; } .cv-definitionen dt { font-weight: var(--cv-weight-semibold); color: var(--cv-slate-800); margin-bottom: 4px; } .cv-definitionen dd { margin: 0; color: var(--cv-text-muted); } /* Die vier Ebenen der Zone „Wirkung". Vier gleiche Spalten, ab 900 px zwei, auf dem Telefon eine. Ohne Rahmen und ohne Schatten: der Brand Guide reserviert die Karte mit Kante für anklickbare Dinge, und hier führt nichts weiter — es ist eine Aufzählung, keine Navigation. */ .cv-wirkung { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin-top: 44px; } .cv-wirkung__ebene { border-top: 2px solid var(--cv-teal-mid); padding-top: 18px; } .cv-wirkung__ebene:nth-child(2) { border-top-color: var(--cv-sand); } .cv-wirkung__ebene:nth-child(3) { border-top-color: var(--cv-coral); } .cv-wirkung__ebene:nth-child(4) { border-top-color: var(--cv-slate-800); } .cv-wirkung__ebene h3 { font-size: 13px; letter-spacing: .8px; text-transform: uppercase; margin-bottom: 12px; } .cv-wirkung__ebene p { color: var(--cv-text-muted); font-size: 13px; } @media (max-width: 900px) { .cv-wirkung { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .cv-wirkung { grid-template-columns: 1fr; } } .cv-ideal { font-size: 13px; color: var(--cv-text-muted); margin-top: 16px; } .cv-ideal strong { color: var(--cv-slate-800); font-weight: var(--cv-weight-semibold); } .cv-leistungsraum .cv-ideal { margin-top: auto; padding-top: 16px; } /* Dieselbe Zeile auf der petrolfarbenen Fläche. Slate 800 auf #156363 misst 2,09:1 und wäre dort unlesbar. Weiss mit 0,82 Deckung ergibt über Petrol 5,31:1, die Auszeichnung „Ideal für:" steht in vollem Weiss (7,01:1). Gemessen wird die GEMISCHTE Farbe, nicht das Weiss: eine Deckungsangabe ohne Mischung rechnet den Kontrast zu hoch. */ .cv-ideal--dunkel { color: rgba(255,255,255,.82); } .cv-ideal--dunkel strong { color: var(--cv-white); } /* Im Kompassband steht unter dieser Zeile die Schaltflaeche. `.cv-ideal` hat keinen unteren Abstand, `.cv-btn-reihe` keinen oberen — gemessen am 14.09.2026 live auf /leistungen: genau 0 px zwischen Textkante und Knopf. Auf der Startseite faellt es nicht auf, dort gibt es keine Ideal-Zeile und der Abstand kommt aus `.cv-lead` (34 px). Ian dazu: „now it has no space … like this it looks like the design is broken." Derselbe Wert wie bei `.cv-lead`, damit der Knopf gleich weit unter dem Text steht, egal welche der beiden Zeilen zuletzt kommt. */ .cv-kompass__text .cv-ideal { margin-bottom: 34px; } /* Auf der Startseite dehnt die Hakenliste (flex: 1) die Karte, auf „Für wen" gibt es keine — dort standen die Trennlinien über „Mehr erfahren" deshalb auf vier verschiedenen Höhen. Der letzte Absatz übernimmt das Dehnen, aber nur in Karten ohne Hakenliste und ohne Ideal-für-Zeile, sonst würde er genau die Elemente nach unten schieben, die dort stehen sollen. */ .cv-leistungsraum:not(:has(.cv-haken)):not(:has(.cv-ideal)) > p:last-of-type { margin-bottom: auto; } .cv-angebot { border: 1px solid var(--cv-border); background: var(--cv-band-warm); padding: 32px; margin-top: 40px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(24px, 3vw, 48px); align-items: center; } .cv-angebot > div > .cv-icon { color: var(--cv-teal-dark); margin-bottom: 22px; } .cv-angebot h3 { font-size: var(--cv-section-size-sm); line-height: var(--cv-section-lh); max-width: 30ch; margin-bottom: 14px; } .cv-angebot p { color: var(--cv-text-muted); max-width: 62ch; } .cv-angebot .cv-btn { white-space: nowrap; } /* Fünf Schritte untereinander sind eine sehr lange Spalte. Auf breiten Fenstern laufen sie deshalb nebeneinander. minmax(220px, …) statt auto-fit ohne Untergrenze, damit keine Karte gequetscht wird. */ .cv-schritte--reihe { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-top: 44px; } /* Situation, Fassung D+ (Ian, 02.09.2026). Die weisse Zitatkarte fuellte zwar seit dem 01.09. die Breite, blieb aber gestalterisch eine einzelne Zeile in einer grossen Flaeche. D+ macht daraus drei zusammenhaengende Teile: Gedanke, Leistungsraum-Bruecke, Einordnung. Es sind dieselben drei Icons wie auf den Leistungsseiten; die Linie ist Sand, der letzte Knoten Korall. Keine drei neuen Karten: erst die Verbindung macht die Zeichen zur Grafik. */ .cv-situation { display: grid; grid-template-columns: minmax(300px, .95fr) 280px minmax(390px, 1.15fr); gap: clamp(28px, 3vw, 48px); align-items: center; margin-top: 34px; } .cv-situation__titel { margin: 0; max-width: 18ch; font-size: clamp(30px, 2.35vw, 38px); line-height: 1.3; font-weight: var(--cv-weight-medium); } .cv-situation__titel > span { display: inline; } .cv-situation__titel-akzent { color: var(--cv-coral); } .cv-situation__zeichen { min-width: 0; } .cv-situation__bruecke { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; height: 124px; } .cv-situation__bruecke::before { content: ''; position: absolute; left: 24px; right: 24px; top: 50%; height: 1px; background: var(--cv-sand); } .cv-situation__bruecke::after { content: ''; position: absolute; left: calc(50% - 3.5px); top: calc(50% - 3.5px); width: 7px; height: 7px; border-radius: 50%; background: var(--cv-coral); } .cv-situation__knoten { position: relative; z-index: 1; display: grid; place-items: center; width: 58px; height: 58px; margin-inline: auto; border: 1px solid var(--cv-sand); background: var(--cv-band-warm); color: var(--cv-teal-mid); } .cv-situation__knoten:nth-child(2) { transform: translateY(-38px); color: var(--cv-teal-dark); } .cv-situation__knoten--koralle { color: var(--cv-coral); } .cv-situation__knoten .cv-icon { width: 27px; height: 27px; } .cv-situation__zeichen-text { display: block; margin-top: 0; text-align: center; color: var(--cv-text-muted); font-size: 10px; line-height: 1.5; letter-spacing: 1.2px; text-transform: uppercase; font-weight: var(--cv-weight-medium); } .cv-situation__text { padding-left: 32px; border-left: 1px solid var(--cv-sand); color: var(--cv-text-muted); } .cv-situation__schluss { display: grid; gap: 10px; margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--cv-sand); color: var(--cv-teal-dark); font-size: 15px; line-height: 1.55; font-weight: var(--cv-weight-semibold); } /* Der Werdegang als Zeitschiene, 01.09.2026 nach Ians Vorlage („can we have the design as it is here in this section?"). Vorher standen die vier Stationen als Liste zwischen fuenf Haarlinien: eine ueber jeder Zeile und eine unter der letzten. Das las sich als Tabelle. Die Vorlage macht daraus eine Zeitachse: eine senkrechte Schiene links am Abschnittsrand, ein Punkt je Station auf der Hoehe der Jahreszahl, und die Trennlinien nur noch ZWISCHEN den Stationen. Die aeussersten beiden Linien fallen weg, weil die Schiene den Anfang und das Ende jetzt selbst zeigt. Aus der Vorlage nachgemessen (sie ist ein Entwurfsbild, kein Bauplan, also sind das Verhaeltnisse und keine Zahlen zum Abschreiben): die Schiene sitzt auf der linken Kante des Abschnitts, also senkrecht unter Kicker und Ueberschrift, der Inhalt rueckt davor ein; der Punkt hat den doppelten Durchmesser der Schienenbreite; Schiene und Trennlinie tragen dieselbe Farbe. Gebaut ist die Schiene NICHT als ein Element ueber die ganze Liste, sondern je Zeile als ein Stueck. Der Grund ist die letzte Zeile: die Schiene endet an ihrem Punkt und nicht an ihrer Unterkante, und wie hoch diese Zeile ist, haengt am Text. Ein durchgehendes Element muesste diese Hoehe kennen. Als Stueck je Zeile reicht `height` bis zum Punkt. */ .cv-stationen { display: grid; gap: 0; margin-top: 44px; --schiene: 3px; /* Breite der Achse */ --punkt: 9px; /* Durchmesser der Punkte */ --einzug: clamp(26px, 3.2vw, 42px); /* Achse bis Inhaltskante */ --punkt-y: 36px; /* Mitte des Punktes ab Zeilenkante, auf Hoehe der Jahreszahl */ padding-left: var(--einzug); } .cv-station { position: relative; display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: clamp(20px, 3vw, 48px); padding: 26px 0; } /* Nur noch zwischen zwei Stationen, nicht mehr aussen herum. Weil der Einzug auf der Liste sitzt und nicht auf der Zeile, beginnt die Linie an der Inhaltskante und laeuft nicht durch die Achse. */ .cv-station + .cv-station { border-top: 1px solid var(--cv-border); } .cv-station::before, .cv-station::after { content: ""; position: absolute; } /* Die Schiene. `bottom: -1px` ist kein Schoenheitswert: ein absolut gesetztes Kind bezieht sich auf den Polsterkasten, also OHNE die 1-px-Trennlinie der naechsten Zeile - ohne die Ueberlappung bleibt an jeder Zeilenkante eine Luecke in der Achse stehen. Im ersten Durchlauf war sie im Bild zu sehen. */ .cv-station::before { top: 0; bottom: -1px; left: calc(-1 * var(--einzug) - var(--schiene) / 2); width: var(--schiene); background: var(--cv-border); } .cv-station:first-child::before { top: var(--punkt-y); } .cv-station:last-child::before { bottom: auto; height: var(--punkt-y); } /* Eine einzige Station braucht keine Achse - sonst bliebe ein Stummel stehen. */ .cv-station:first-child:last-child::before { display: none; } /* Der Punkt */ .cv-station::after { top: calc(var(--punkt-y) - var(--punkt) / 2); left: calc(-1 * var(--einzug) - var(--punkt) / 2); width: var(--punkt); height: var(--punkt); border-radius: 50%; background: var(--cv-teal-dark); } .cv-station__zeit { font-size: 12px; letter-spacing: 1.6px; text-transform: uppercase; font-weight: var(--cv-weight-semibold); color: var(--cv-teal-mid); } .cv-station h3 { font-size: var(--cv-h2-size); line-height: var(--cv-h2-lh); margin-bottom: 10px; } .cv-station p { color: var(--cv-text-muted); } .cv-kontaktliste { display: grid; gap: 18px; font-size: 13px; } .cv-kontaktliste li { display: flex; align-items: flex-start; gap: 12px; } .cv-kontaktliste .cv-icon { width: 17px; height: 17px; margin-top: 2px; color: var(--cv-teal-dark); } .cv-kontaktliste a { color: var(--cv-slate-800); text-decoration: underline; text-underline-offset: 3px; } .cv-kontaktliste a:hover { color: var(--cv-coral); } /* Die Seite, auf der man steht, wird in der Navigation markiert. Nicht nur über Farbe: eine Linie darunter, damit es auch ohne Farbwahrnehmung trägt. */ .cv-nav a[aria-current="page"] { color: var(--cv-coral); box-shadow: 0 2px 0 var(--cv-coral); } /* --- Kontaktformular ------------------------------------------------------- */ .cv-formular-band { padding-top: 0; } .cv-formular-kasten { max-width: 720px; padding: 40px; border-radius: var(--cv-radius); background: var(--cv-surface-alt); } .cv-formular-kasten h2 { margin: 6px 0 0; font-size: var(--cv-h2-size); } .cv-formular-lead { margin: 14px 0 0; color: var(--cv-text-muted); max-width: 56ch; } .cv-formular { display: grid; gap: 20px; margin-top: 28px; } .cv-formular__paar { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .cv-feld { display: grid; gap: 8px; margin: 0; } .cv-feld label { font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; font-weight: var(--cv-weight-medium); color: var(--cv-slate-800); } .cv-feld input[type="text"], .cv-feld input[type="email"], .cv-feld textarea { width: 100%; padding: 13px 16px; border: 1px solid var(--cv-border); border-radius: var(--cv-radius); background: var(--cv-white); font-family: var(--cv-font-sans); font-size: var(--cv-body-size); color: var(--cv-text); } .cv-feld textarea { resize: vertical; min-height: 160px; line-height: 1.6; } .cv-feld input:focus-visible, .cv-feld textarea:focus-visible { outline: 2px solid var(--cv-slate-800); outline-offset: 2px; border-color: var(--cv-slate-800); } /* Häkchen: die Beschriftung ist ein ganzer Satz, steht also nicht in Grossbuchstaben wie die Feldbeschriftungen darüber. */ .cv-feld--haken { grid-template-columns: auto 1fr; align-items: start; gap: 12px; } .cv-feld--haken input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--cv-slate-800); } .cv-feld--haken label { text-transform: none; letter-spacing: 0; font-size: 15px; line-height: 1.55; font-weight: var(--cv-weight-light); color: var(--cv-text-muted); } .cv-feld--haken a { color: var(--cv-slate-800); text-decoration: underline; text-underline-offset: 3px; } .cv-formular-pflicht { margin: 0; font-size: 13px; color: var(--cv-text-muted); } /* Der Honigtopf. Nicht display:none: manche ausfüllenden Skripte überspringen genau das. Er steht ausserhalb des Sichtfelds, ist aria-hidden und per tabindex aus der Tastaturreihenfolge genommen. */ .cv-honigtopf { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; } .cv-formular-fehler { margin-top: 24px; padding: 16px 20px; border-left: 3px solid var(--cv-coral); background: var(--cv-white); border-radius: var(--cv-radius); } .cv-formular-fehler p { margin: 0; } .cv-formular-fehler ul { margin: 8px 0 0; padding-left: 20px; color: var(--cv-text-muted); } .cv-formular-hinweis { margin-top: 24px; padding: 14px 18px; border: 1px dashed var(--cv-border); border-radius: var(--cv-radius); font-size: 15px; color: var(--cv-text-muted); } .cv-formular-danke { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; margin-top: 24px; padding: 24px; background: var(--cv-white); border-radius: var(--cv-radius); } .cv-formular-danke h3 { margin: 0; font-size: 22px; } .cv-formular-danke p { margin: 8px 0 0; color: var(--cv-text-muted); } @media (max-width: 640px) { .cv-formular-kasten { padding: 28px 20px; } .cv-formular__paar { grid-template-columns: 1fr; } .cv-formular-danke { grid-template-columns: 1fr; } } /* --- Umbrüche ------------------------------------------------------------- */ /* Die vier Anlasskarten stehen neben der Sektionsüberschrift und teilen sich deshalb nur den Rest des Satzspiegels. Gemessen war die Karte bei 1440 px Fensterbreite 184 px breit, bei 1360 px 164 px und zwischen 1280 und 1181 px nur noch 124 px — bei 20 px Innenabstand bleiben 84 px Textbreite, in denen „sie beitragen," auf vier Zeilen fällt. Bei 1180 px sprang dieselbe Karte auf 514 px. Der Sprung war das Sichtbare, die Quetschung davor der Fehler. Ab hier steht die Überschrift über den Karten, damit die Karten den ganzen Satzspiegel bekommen: 205 px je Karte bei 1541 px, 265 px bei 1181 px. */ @media (max-width: 1540px) { .cv-anlass { grid-template-columns: 1fr; } } @media (max-width: 1180px) { .cv-zielgruppen { grid-template-columns: repeat(2, 1fr); } /* Einspaltig steht die Handschrift ohnehin frei über der Grafik, also zurück auf gleiches Polster oben wie unten und in die Grafik hinein. */ .cv-kompass { padding-block: clamp(76px, 6vw, 104px); } .cv-kompass__caveat { top: 20px; max-width: 100%; } .cv-kompass__raster { grid-template-columns: 1fr; } .cv-kompass__visual { width: min(100%, 620px); margin-inline: auto; margin-top: 64px; } .cv-kompass__verbinder { display: none; } .cv-kompass .cv-schritte { grid-template-columns: repeat(3, 1fr); width: 100%; } .cv-leistungsraeume { grid-template-columns: 1fr; } .cv-impulse { grid-template-columns: 1fr; } .cv-beitraege { grid-template-columns: 1fr; } .cv-footer__raster { grid-template-columns: 1fr 1fr; } } /* Die Navigation klappt früher weg als der Rest umbricht, und das hat einen gemessenen Grund. Zeichen (217 px) plus Abstand (24 px) plus Navigation (839 px) brauchen 1080 px im Satzspiegel; den gibt es erst ab 1220 px Fensterbreite. Darunter lief die Kopfzeile vorher nicht etwa über, sondern das Zeichen wurde stillschweigend gestaucht — bei 1024 px auf ein Fünftel seiner Breite. Das ist mit flex: none nicht mehr möglich, also muss die Navigation hier klappen. Auch mit dem alten 26-px-Zeichen hätte es unter 1130 px nicht gereicht; die Stauchung hat das nur verdeckt. */ @media (max-width: 1219px) { .cv-nav { display: none; position: absolute; inset: 73px 0 auto; z-index: 39; /* Kopfhöhe, siehe cv-header__inner */ flex-direction: column; align-items: stretch; gap: 0; background: var(--cv-white); border-bottom: 1px solid var(--cv-border); padding: 8px var(--cv-gutter) 20px; } .cv-nav[data-offen="true"] { display: flex; } .cv-nav a { padding: 14px 0; border-bottom: 1px solid var(--cv-border); } .cv-nav .cv-btn { margin-top: 16px; justify-content: center; } .cv-nav-schalter { display: block; } .cv-header__inner { position: relative; } /* Im Klappmenü der schmalen Fenster steht das Untermenü in der Spalte, eingerückt unter seinem Punkt, statt als schwebender Kasten. */ .cv-nav__gruppe { position: static; flex-wrap: wrap; border-bottom: 1px solid var(--cv-border); } .cv-nav__gruppe > a { flex: 1; border-bottom: 0; } .cv-nav__auf { padding: 14px 0 14px 16px; } .cv-nav__unter { position: static; width: 100%; min-width: 0; border: 0; box-shadow: none; padding: 0 0 12px 16px; } .cv-nav__unter a { padding: 10px 0; border-bottom: 0; } /* Ein Zeiger auf einem schmalen Fenster darf die Spalte nicht selbst aufklappen; hier entscheidet allein der Schalter. */ .cv-nav__gruppe:hover .cv-nav__unter { display: none; } .cv-nav__gruppe[data-offen="true"] .cv-nav__unter { display: block; } .cv-nav__gruppe:hover::after { content: none; } /* Ohne JavaScript gibt es niemanden, der das Klappmenü öffnet. Dann bleibt die Navigation als umbrechende Zeile stehen statt zu verschwinden. */ html:not([data-js="an"]) .cv-nav { display: flex; position: static; flex-direction: row; flex-wrap: wrap; gap: 20px; padding: 0 0 14px; border-bottom: 0; } html:not([data-js="an"]) .cv-nav a { padding: 0; border-bottom: 0; } html:not([data-js="an"]) .cv-nav .cv-btn { margin-top: 0; } /* Hier gibt es keinen Schalter und keinen Zeiger, auf den man bauen kann: das Untermenü steht offen neben seinem Punkt. */ html:not([data-js="an"]) .cv-nav__gruppe { border-bottom: 0; flex-wrap: wrap; gap: 8px 20px; } html:not([data-js="an"]) .cv-nav__gruppe > a { flex: none; } html:not([data-js="an"]) .cv-nav__unter { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 0; width: auto; } html:not([data-js="an"]) .cv-nav__unter a { padding: 0; } html:not([data-js="an"]) .cv-nav-schalter { display: none; } html:not([data-js="an"]) .cv-header__inner { flex-wrap: wrap; padding-top: 12px; } } /* Unterhalb der Dreispaltenbreite wird die Leistungsraum-Grafik selbst zur Bruecke zwischen Gedanke und Einordnung. Die Knoten bleiben horizontal; nur die drei grossen Inhaltsbloecke stapeln. */ @media (max-width: 1239px) { .cv-situation { grid-template-columns: 1fr; gap: 34px; } .cv-situation__titel { max-width: 22ch; } .cv-situation__zeichen { width: min(100%, 340px); } .cv-situation__text { max-width: 74ch; padding: 26px 0 0; border-left: 0; border-top: 1px solid var(--cv-sand); } } @media (max-width: 940px) { .cv-seitenkopf--aufmacher .cv-container { grid-template-columns: minmax(0, 1fr); } .cv-news-aufmacher { margin-top: 8px; } .cv-news-aufmacher > a { grid-template-rows: auto auto; } .cv-news-aufmacher__bild { height: auto; aspect-ratio: 3 / 2; } .cv-anlass__karten { grid-template-columns: repeat(2, 1fr); } .cv-lauf .cv-beitraege { grid-auto-columns: calc((100% - 24px) / 2); } .cv-textseite { grid-template-columns: 1fr; } .cv-textseite > .cv-nebenspalte { width: auto; justify-self: stretch; } .cv-angebot { grid-template-columns: 1fr; } .cv-angebot .cv-btn { width: 100%; justify-content: center; } .cv-station { grid-template-columns: 1fr; gap: 10px; } .cv-hero__raster { grid-template-columns: 1fr; } .cv-hero__bild img { aspect-ratio: 4 / 3; } .cv-kompass__raster { grid-template-columns: 1fr; } .cv-analyse { grid-template-columns: 1fr; } .cv-termine { grid-template-columns: 1fr; } .cv-ueber { grid-template-columns: 1fr; } .cv-ueber__marke, .cv-ueber__bild { aspect-ratio: 4 / 3; } /* Gestapelt gibt es keine leere Nebenspalte, also auch nichts festzuhalten - ein sticky Bild wuerde hier nur ueber dem Text kleben bleiben. ZURUECK AUF relative, NICHT static: der Chip "20+ Jahre Erfahrung" haengt als position:absolute an dieser Figur. Mit static verliert er seinen Bezugsrahmen, faellt aus dem Bild heraus und legt sich auf die erste Zeile des Kurzprofils. Genau das ist beim ersten Versuch am 01.09.2026 passiert und im 390er Screenshot aufgefallen, nicht im Ueberlaufdurchlauf. */ .cv-ueber--profil .cv-ueber__bild { position: relative; aspect-ratio: 4 / 3; } /* Beitragsbild wieder ueber den Text, sobald zwei Spalten zu eng werden. Gestapelt gibt es keine Nebenspalte zum Festhalten, also kein sticky — dieselbe Begruendung wie beim Kurzprofil darueber. Der Zuschnitt faellt hier weg: in einer Spalte ist das Bild so breit wie der Text und hat neben sich nichts, dessen Hoehe es halten muesste, also darf es sein eigenes Format zeigen. */ .cv-beitrag--neben { grid-template-columns: 1fr; max-width: 720px; } .cv-beitrag--neben .cv-beitrag__rail { position: static; margin-bottom: 32px; } .cv-beitrag--neben .cv-beitrag__bild { position: relative; margin: 0; } .cv-beitrag--neben .cv-beitrag__bild img { aspect-ratio: auto; object-fit: fill; } .cv-ueber__marke .cv-chip { right: 16px; } .cv-faq-raster { grid-template-columns: 1fr; } .cv-markenrad { max-width: 240px; } .cv-kursvorschau__raster { grid-template-columns: 1fr; } .cv-danachband__raster { grid-template-columns: 1fr; } .cv-rezensionen__liste { grid-template-columns: 1fr; } /* Die zwei Portraets bleiben hier NEBENEINANDER. Zwei Personen, die einen Kurs zusammen geben, sind eine Aussage ueber ein Paar; untereinander gestapelt liest sich das als zwei einzelne Vorstellungen. Erst wenn die Spalte fuer den Text zu eng wird, faellt es (siehe 640 px). */ .cv-personen { gap: 24px; } } /* Weil die Beschriftung nicht mehr mitschrumpft, wächst sie relativ zur Grafik, und irgendwann passt sie nicht mehr. Gemessen: „Umsetzung" sitzt bei 93,8 % der Breite und ragt unter 876 px Fensterbreite rechts aus dem Satzspiegel, „Klärung" und „Orientierung" berühren sich unter etwa 700 px. Ab hier bleibt nur die Linie mit ihren Punkten — genau das zeigt auch der freigegebene Entwurf, der die Beschriftung gar nicht kennt. */ @media (max-width: 899px) { .cv-kompasslinie__marke { display: none; } } @media (max-width: 640px) { .cv-anlass__karten { grid-template-columns: 1fr; } .cv-lauf .cv-beitraege { grid-auto-columns: 88%; } .cv-zielgruppen { grid-template-columns: 1fr; } .cv-kompass { padding-block: 64px; } .cv-kompass__visual { min-height: 0; display: grid; gap: 36px; margin-top: 72px; } .cv-kompass__caveat { top: -50px; max-width: 100%; font-size: 22px; } .cv-kompass__grafik { width: min(90vw, 420px); margin-inline: auto; } .cv-kompass .cv-schritte { min-height: 0; grid-template-columns: 1fr; gap: 18px; } .cv-kompass .cv-schritt { position: static; width: 100%; text-align: left; } .cv-kompass .cv-schritt__kopf { justify-content: flex-start; } .cv-footer__raster { grid-template-columns: 1fr; } .cv-abschnittskopf { flex-direction: column; align-items: flex-start; } .cv-btn { width: 100%; justify-content: center; } .cv-btn-reihe { width: 100%; } .cv-situation__titel { font-size: 30px; } .cv-situation__knoten { width: 52px; height: 52px; } .cv-situation__zeichen-text { letter-spacing: .8px; } .cv-kurs__kopf { gap: 10px; } .cv-rezensionen { padding: 20px; } /* Jetzt fallen die zwei Vorstellungen doch untereinander: bei 640 px Fensterbreite bleiben je Spalte rund 150 px, das traegt keine Zeile Fliesstext mehr. Bild oben, Text darunter, wie im Grundraster. */ .cv-personen { grid-template-columns: minmax(0, 1fr); gap: 40px; } .cv-personen__schluss { padding-left: 20px; } } /* --- Einwilligungsbanner -------------------------------------------------- */ /* Ein Streifen unten, kein Vorhang über der Seite. Die Seite ist ohne Antwort vollständig benutzbar, also darf das Banner sie nicht sperren — deshalb aria-modal="false" im Markup und hier kein Überzug. GLEICHES GEWICHT: beide Schaltflächen teilen sich .cv-einwilligung__knopf, also dieselbe Polsterung, Schriftgrösse, Laufweite und Kantenstärke. Nur die Füllung unterscheidet sie. „Nur notwendige" steht links und zuerst im Markup; ein Umriss neben einer Füllung wäre die Abwertung, an der die Aufsichtsbehörden Banner scheitern lassen. */ .cv-einwilligung { position: fixed; inset: auto 0 0 0; z-index: 60; background: var(--cv-white); border-top: 1px solid var(--cv-border); box-shadow: 0 -6px 24px rgba(30, 41, 59, .12); } .cv-einwilligung[hidden] { display: none; } /* Dieselbe Rechnung wie .cv-container, nicht eine zweite Zahl daneben — --cv-container gibt es nicht, die Breite steht in --cv-content. Ein var(--cv-container, 1200px) hätte lautlos auf den Rückfall gegriffen und wäre auf jeder Breite ein paar Pixel neben dem Rest der Seite gelandet. */ .cv-einwilligung__innen { width: min(100% - 2 * var(--cv-gutter), var(--cv-content)); margin-inline: auto; padding: 20px 0; display: flex; align-items: center; gap: 28px; flex-wrap: wrap; } .cv-einwilligung__text { flex: 1 1 420px; min-width: 0; } .cv-einwilligung__titel { font-size: var(--cv-body-size); line-height: 1.2; margin: 0 0 6px; color: var(--cv-text); } .cv-einwilligung__text p { margin: 0; color: var(--cv-text-muted); font-size: var(--cv-body-size); line-height: var(--cv-body-lh); max-width: 78ch; } .cv-einwilligung__text a { color: var(--cv-text); text-underline-offset: 3px; } .cv-einwilligung__knoepfe { display: flex; gap: 12px; flex: 0 0 auto; flex-wrap: wrap; } .cv-einwilligung__knopf { display: inline-flex; align-items: center; justify-content: center; padding: var(--cv-btn-pad-y) var(--cv-btn-pad-x); border: 1px solid transparent; border-radius: var(--cv-radius); font: inherit; font-size: var(--cv-btn-size); line-height: 1; letter-spacing: var(--cv-btn-ls); text-transform: uppercase; font-weight: var(--cv-weight-medium); cursor: pointer; transition: background-color .18s ease; } /* Slate 800 gegen Weiss ist 13,65:1, Korall mit weisser Schrift 3,26:1 — die Ablehnung ist also nicht die leisere, sondern die lautere der beiden. Das ist Absicht und nicht versehentlich herum. Korall bleibt trotzdem der Zustimmungsknopf, weil Korall in dieser Marke die Farbe der Handlung ist. */ .cv-einwilligung__knopf--notwendig { background: var(--cv-slate-800); color: var(--cv-white); } .cv-einwilligung__knopf--notwendig:hover { background: #16202f; } .cv-einwilligung__knopf--alle { background: var(--cv-btn-primary-bg); color: var(--cv-btn-primary-fg); } .cv-einwilligung__knopf--alle:hover { background: #e04527; } @media (max-width: 599px) { .cv-einwilligung__innen { padding: 16px 0; gap: 16px; } .cv-einwilligung__knoepfe { width: 100%; } /* Beide gleich breit. Auf dem Telefon ist die Breite das Gewicht. */ .cv-einwilligung__knopf { flex: 1 1 0; } } /* --- Druck ---------------------------------------------------------------- */ @media print { .cv-header, .cv-welle, .cv-kompasslinie, .cv-dialog, .cv-einwilligung { display: none; } body { color: #000; } } /* --- Bewegung, wenn sie gewuenscht ist ------------------------------------ */ /* Der Standard ist KEIN sanftes Gleiten. Wer Bewegung abbestellt hat, bekommt auch beim Klick auf die Pfeile einen harten Sprung statt einer Fahrt, und das automatische Weiterlaufen schaltet site.js dann gar nicht erst ein. */ @media (prefers-reduced-motion: no-preference) { .cv-lauf .cv-beitraege { scroll-behavior: smooth; } }