/* ================================================================== SCHRIFT - lokal ausgeliefert Roboto Serif lag bisher als Google-Fonts-Link im . Damit ging bei jedem Seitenaufruf die IP des Besuchers an Google - was der Datenschutzerklaerung widersprach, die lokale Auslieferung zusagt. Die Dateien liegen jetzt in assets/fonts/ (SIL Open Font License, Lizenztext liegt daneben). Variante "wght": voller Gewichtsbereich 100-900 bei 120 KB fuer latin + latin-ext. Die Achse "opsz" der Google-Fassung entfaellt - sie haette allein fuer optische Feinabstimmung die Dateigroesse verachtfacht. Kursive Schnitte werden nicht geladen, die Seite nutzt keine. unicode-range sorgt dafuer, dass latin-ext nur geladen wird, wenn ein Zeichen daraus tatsaechlich vorkommt. ================================================================== */ @font-face{ font-family:"Roboto Serif"; font-style:normal; font-weight:100 900; font-display:swap; src:url(assets/fonts/roboto-serif-latin-wght-normal.woff2) format("woff2-variations"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:"Roboto Serif"; font-style:normal; font-weight:100 900; font-display:swap; src:url(assets/fonts/roboto-serif-latin-ext-wght-normal.woff2) format("woff2-variations"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } /* ================================================================== FARBSYSTEM Alle Farben laufen ueber Tokens. :root traegt die dunkle Fassung (Markenzustand, Standard), [data-theme="light"] weiter unten ueberschreibt nur die Werte - keine Regel wird dort dupliziert. Zwei Tokens brauchen Erklaerung: --bg-rgb / --scrim-rgb Kanaele ohne rgb(), damit sich in Verlaeufen rgba(var(--bg-rgb),.94) schreiben laesst. --scrim bleibt in beiden Themes dunkel: die Verlaufe liegen ueber Bild- und Videoflaechen, die bewusst dunkel bleiben. Bild- und Videopanels behalten im hellen Theme ihre dunkle Token-Umgebung (siehe "Dunkle Inseln" weiter unten). Dadurch funktionieren Verlaeufe, heller Text und Chips darin unveraendert, ohne dass eine einzige Regel doppelt gepflegt werden muss. ================================================================== */ :root{ color-scheme:dark; --bg:#07090a; --bg-rgb:7,9,10; --bg-2:#0b0e10; --panel:#101417; --panel-2:#151a1d; --text:#f2f4f3; --lead:#d4dcde; --muted:#b4bec1; --quiet:#7f8a8e; --line:rgba(229,239,241,.13); --line-strong:rgba(229,239,241,.24); --cyan:#35d4ef; --cyan-soft:rgba(53,212,239,.13); --cyan-line:rgba(53,212,239,.45); --cyan-glow:rgba(53,212,239,.16); --cyan-tap:rgba(53,212,239,.18); --on-cyan:#041013; --mint:#9ce2c3; --mint-glow:rgba(156,226,195,.65); --danger:#efb8a8; /* Flaechen */ --grid-line:rgba(255,255,255,.018); --nav-bg:rgba(7,9,10,.78); --nav-panel-bg:rgba(7,9,10,.97); --atlas-bg:linear-gradient(180deg,#080a0b,#0b0f11 45%,#080a0b); --surface-soft:rgba(9,12,14,.62); --surface-active:rgba(14,25,28,.88); --surface-quiet:rgba(7,9,10,.5); --detail-bg:rgba(7,9,10,.75); --detail-text:#d7dddf; --input-bg:#0c1012; /* Hinweisplakette der gesperrten Eintragung, siehe .optin-lock */ --optin-lock-bg:rgba(10,14,16,.93); --optin-lock-ring:rgba(53,212,239,.14); --control-bg:rgba(10,14,16,.6); --chip-bg:rgba(6,8,9,.8); /* Medienflaechen: bleiben in beiden Themes dunkel */ --media-bg:#080b0d; --media-bg-2:#060809; --media-bg-3:#090c0e; --hero-scrim-rgb:7,9,10; --scrim-rgb:7,9,10; --scrim-deep-rgb:5,8,9; --scrim-atlas-rgb:6,8,9; --media-filter:saturate(.74) brightness(.54); --media-filter-strong:saturate(.7) brightness(.46); --media-filter-soft:saturate(.7) brightness(.5); --hero-video-filter:saturate(.78) brightness(.68); --media-filter-bundle:saturate(.72) brightness(.7); --route-glow:rgba(53,212,239,.6); --route-track:rgba(255,255,255,.14); --route-ring:rgba(255,255,255,.28); --logo-shadow:rgba(0,0,0,.72); /* Das dimensionale M im Hero. Die Verlaufsstopps stehen im SVG als var() - sonst waere das helle Metall auf hellem Grund unsichtbar. */ --logo-face-1:#ced2d6; --logo-face-2:#e3e6e9; --logo-face-3:#f1f4f6; --logo-face-4:#fafcfd; --logo-edge-1:#6f7478; --logo-edge-2:#a2a7ab; --logo-accent-1:#76e6ff; --logo-accent-2:#45cbf0; --logo-accent-3:#0fa3d9; --logo-accent-edge-1:#0d6685; --logo-accent-edge-2:#1d8fb4; --wrap:min(80rem,calc(100% - 2.5rem)); --display:"Roboto Serif",Georgia,"Times New Roman",serif; --body:"Roboto Serif",Georgia,"Times New Roman",serif; --mono:"Roboto Serif",Georgia,"Times New Roman",serif; } /* ================================================================== HELLE FASSUNG Nur Token-Werte, keine dupliziertem Regeln. Der Grundton ist ein warmes Off-White statt reinem Weiss - die Roboto Serif steht darauf ruhiger, und die dunklen Medienpanels wirken weniger wie Loecher. Der Akzent wandert von #35d4ef auf ein dunkles Teal. Das Cyan des dunklen Themes hat auf hellem Grund nur rund 1,7:1 und waere als Textfarbe (Eyebrows, Links, Route-Label) unlesbar. ================================================================== */ [data-theme="light"]{ color-scheme:light; --bg:#f6f6f3; --bg-rgb:246,246,243; --bg-2:#efefea; --panel:#ffffff; --panel-2:#f2f2ee; --text:#12171a; --lead:#39434a; /* Eine Stufe kraeftiger als der direkte Gegenpart zum dunklen Theme. Auf dem hellen Grund wirkten die gedaempften Toene zu zurueckhaltend; --muted steigt damit von 6,95:1 auf 8,95:1, --quiet von 4,82:1 auf 6,65:1. */ --muted:#3c464b; --quiet:#4f595e; --line:rgba(18,23,26,.14); --line-strong:rgba(18,23,26,.28); --cyan:#0a6f83; --cyan-soft:rgba(10,111,131,.10); --cyan-line:rgba(10,111,131,.42); --cyan-glow:rgba(10,111,131,.18); --cyan-tap:rgba(10,111,131,.14); --on-cyan:#ffffff; --mint:#1d7a56; --mint-glow:rgba(29,122,86,.32); --danger:#a63a1d; --grid-line:rgba(18,23,26,.035); /* .82 liess auf hellem Grund zu viel durchscheinen - die Leiste stand unruhig ueber dem Inhalt. Der Backdrop-Blur bleibt erhalten. */ --nav-bg:rgba(246,246,243,.93); --nav-panel-bg:rgba(246,246,243,.98); --atlas-bg:linear-gradient(180deg,#f1f1ec,#f8f8f5 45%,#f1f1ec); --surface-soft:rgba(255,255,255,.72); --surface-active:#ffffff; --surface-quiet:rgba(255,255,255,.62); --detail-bg:rgba(255,255,255,.82); --detail-text:#2b3438; --input-bg:#ffffff; --optin-lock-bg:rgba(255,255,255,.95); --optin-lock-ring:rgba(10,111,131,.16); --control-bg:rgba(255,255,255,.7); /* Der Hero-Verlauf blendet in die Seitenfarbe aus, nicht in den dunklen Medien-Scrim - sonst entsteht ein grauer Schleier. */ --hero-scrim-rgb:246,246,243; --logo-shadow:rgba(18,23,26,.16); /* Medien bleiben dunkel, aber eine Spur weniger gedrueckt: auf hellem Grund faellt Tiefenzeichnung staerker auf. */ --media-filter:saturate(.8) brightness(.6); --media-filter-strong:saturate(.76) brightness(.52); --media-filter-soft:saturate(.76) brightness(.56); --media-filter-bundle:saturate(.78) brightness(.74); --hero-video-filter:saturate(.84) brightness(.76); --logo-face-1:#8f979c; --logo-face-2:#a8b0b4; --logo-face-3:#c2c9cd; --logo-face-4:#d8dee1; --logo-edge-1:#4a5155; --logo-edge-2:#6d7478; --logo-accent-1:#3fb6d4; --logo-accent-2:#1a95b5; --logo-accent-3:#0a6f83; --logo-accent-edge-1:#064a5a; --logo-accent-edge-2:#0d6b80; } /* ------------------------------------------------------------------ Dunkle Inseln Bild- und Videopanels bleiben in beiden Themes dunkel. Statt jede Regel darin zu ueberschreiben, bekommen die vier Container die Token des dunklen Themes zurueck. Alles was darin liegt - Text, Chips, Layer-Tabs, Trennlinien, Verlaeufe - rendert damit automatisch wie gehabt. Wichtig: --bg und --panel gehoeren dazu. Im mobilen Layout rutscht .lab-content unter das Bild statt darauf; die Karte bleibt dann als Ganzes dunkel, statt hellen Text auf hellem Grund zu erzeugen. Ebenso wichtig - und beim ersten Anlauf uebersehen: die Insel muss color SELBST setzen, nicht nur das Token. color wird vererbt, und vererbt wird der bereits berechnete Wert von body, nicht die Variable. Ohne die Zeile unten blieb jedes Element ohne eigene color-Regel (h2, strong, die Tab-Beschriftungen) dunkel auf dunkel. ------------------------------------------------------------------ */ [data-theme="light"] .atlas-visual, [data-theme="light"] .lab-stage, [data-theme="light"] .bundle-media, [data-theme="light"] .operator-media{ --bg:#07090a; --bg-rgb:7,9,10; --panel:#101417; --panel-2:#151a1d; --text:#f2f4f3; --lead:#d4dcde; --muted:#b4bec1; --quiet:#7f8a8e; --line:rgba(229,239,241,.13); --line-strong:rgba(229,239,241,.24); --cyan:#35d4ef; --cyan-soft:rgba(53,212,239,.13); --cyan-line:rgba(53,212,239,.45); --on-cyan:#041013; --mint:#9ce2c3; --surface-soft:rgba(9,12,14,.62); --surface-active:rgba(14,25,28,.88); --surface-quiet:rgba(7,9,10,.5); --detail-bg:rgba(7,9,10,.75); --detail-text:#d7dddf; --chip-bg:rgba(6,8,9,.8); color:var(--text); } /* ------------------------------------------------------------------ Typografische Untergrenze der hellen Fassung Auf dem hellen Grund fallen die kleinsten Beschriftungen gegen die grosse Display-Schrift stark ab. Angehoben werden nur die wirklich kleinen Elemente (Eyebrows, Kicker, Listenlabels, Fusszeile) - der Fliesstext bleibt, damit der bewusste Sprung zwischen Headline und Beitext als Gestaltungsmittel erhalten bleibt. Die dunklen Medienpanels sind ausgenommen: sie sehen in beiden Themes gleich aus und sollen es auch bleiben. ------------------------------------------------------------------ */ [data-theme="light"] .eyebrow{font-size:0.875rem} [data-theme="light"] .lab-stage .eyebrow{font-size:0.75rem} /* Insel unveraendert */ [data-theme="light"] .hero-context{font-size:0.9375rem} [data-theme="light"] .mechanic small{font-size:0.8125rem} [data-theme="light"] .atlas-step .num{font-size:0.875rem} /* Nur die Desktop-Leiste. Im mobilen Drawer stehen die Links bereits auf 1rem - dieser Block haette das mit hoeherer Spezifitaet wieder heruntergezogen. Aus demselben Grund bleibt .lang-btn unangetastet: dort greift unter 588 px eine bewusste Verkleinerung. */ @media(min-width:1373px){ [data-theme="light"] .nav-links{font-size:0.9375rem} } [data-theme="light"] .episode-tab span{font-size:0.75rem} [data-theme="light"] .path-list span{font-size:0.8125rem} [data-theme="light"] .path-list div{font-size:0.9375rem} [data-theme="light"] summary{font-size:1.1875rem} /* .interest-row bleibt bewusst bei der Groesse des dunklen Themes. Mit 0.875rem und fuenf Feldern reichte die Zeilenbreite nicht mehr - "Webinar-Updates" rutschte in eine zweite Zeile, waehrend dunkel einzeilig blieb. Gleiche Groesse heisst gleicher Umbruchpunkt in beiden Themes, auf jeder Viewportbreite. */ [data-theme="light"] .form-status{font-size:0.875rem} [data-theme="light"] footer{font-size:0.875rem} /* .episode-tab b bleibt bei 0.875rem: bei 8.25rem Spaltenbreite bricht "0DTE-Szenarien" sonst um. */ /* Der Tiefeneffekt der inaktiven Atlas-Schritte muss im hellen Theme flacher ausfallen. .72 ergibt dort nur rund 3,6:1 gegen das Off-White; .85 landet mit der kraeftigeren --muted bei rund 5,9:1. */ [data-theme="light"] .atlas-step{opacity:.85} [data-theme="light"] .atlas-step.is-active{opacity:1} /* Die Panels heben sich auf hellem Grund sonst nur ueber den Farbwechsel ab. Eine weiche Kante gibt ihnen Halt. */ [data-theme="light"] .atlas-visual, [data-theme="light"] .lab-stage, [data-theme="light"] .operator-media{ box-shadow:0 1.25rem 3rem rgba(18,23,26,.14); } /* .bundle-media sitzt buendig neben .bundle-copy, dort wuerde ein Schatten die gemeinsame Kante aufbrechen. */ [data-theme="light"] .bundle{ box-shadow:0 1.25rem 3rem rgba(18,23,26,.10); } html.font-fallback{--display:Georgia,"Times New Roman",serif;--body:Georgia,"Times New Roman",serif;--mono:Georgia,"Times New Roman",serif;--head:Georgia,"Times New Roman",serif} body{margin:0;background:var(--bg);color:var(--text);font-family:var(--body);font-size:1rem;line-height:1.65;overflow-x:hidden} body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;background:linear-gradient(var(--grid-line) 0.0625rem,transparent 0.0625rem),linear-gradient(90deg,var(--grid-line) 0.0625rem,transparent 0.0625rem);background-size:4rem 4rem;mask-image:linear-gradient(to bottom,black,transparent 75%)} a{color:inherit;text-decoration:none} button,input{font:inherit} button{color:inherit} img,video{display:block;max-width:100%} :focus-visible{outline:0.125rem solid var(--cyan);outline-offset:0.25rem} .wrap{width:var(--wrap);margin-inline:auto} .eyebrow{font-family:var(--mono);font-size:0.75rem;line-height:1.4;text-transform:uppercase;letter-spacing:.08em;color:var(--cyan)} .muted{color:var(--muted)} .section{padding:7.5rem 0;border-top:0.0625rem solid var(--line)} /* Abstand zwischen Zugang-Block und Footer halbiert (7.5rem -> 3.75rem). */ #zugang{padding-bottom:3.75rem} .section-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(17.5rem,32.5rem);gap:3.5rem;align-items:end;margin-bottom:3.5rem} .section-head h2{margin:0.5rem 0 0;font:700 clamp(2.125rem,4.4vw,4rem)/1.03 var(--display);letter-spacing:0} .section-head p{margin:0;color:var(--muted);font-size:1.125rem;line-height:1.65} .site-nav{position:fixed;left:0;right:0;top:0;z-index:40;background:var(--nav-bg);border-bottom:0.0625rem solid var(--line);backdrop-filter:blur(1.125rem)} .nav-inner{width:var(--wrap);height:4.5rem;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:1.5rem} .nav-links{display:flex;align-items:center;gap:1.5rem;font-size:0.875rem;color:var(--muted)} .nav-links a:hover{color:var(--text)} /* Stillgelegter Menueeintrag (Research Lab waehrend der Ueberarbeitung). Sitzt auf derselben Grundlinie wie die Links daneben, traegt aber keinen Hover, keinen Fokus und keine Zeigerhand. Der Punkt davor markiert den Zustand auch dort, wo Farbe allein nicht reicht. ZUM AUFHEBEN: diese Regeln koennen stehen bleiben - sie greifen nur, solange irgendwo ein .nav-disabled im Markup steht. */ .nav-disabled{display:inline-flex;align-items:center;gap:0.4em; color:var(--muted);opacity:.55;cursor:default;white-space:nowrap} .nav-disabled::before{content:"";width:0.375rem;height:0.375rem;border-radius:50%; background:currentColor;opacity:.8;flex:none} /* ===== Platz fuer die Consent-Leiste ===== consent.js setzt am die Klasse mlc-open und meldet die gemessene Hoehe der Leiste als --mlc-h. Die Leiste liegt fix am unteren Rand; ohne die beiden Regeln hier deckt sie genau das zu, was unten steht - im Hero die Lead-Copy und die beiden Primaerbuttons, am Seitenende den Fuss. scroll-padding sorgt zusaetzlich dafuer, dass Sprungmarken nicht hinter der Leiste landen. */ html.mlc-open{scroll-padding-bottom:calc(var(--mlc-h,0px) + 1rem)} html.mlc-open body{padding-bottom:var(--mlc-h,0px)} /* Ab 1065px ist der Hero ein Raster mit bodenbuendiger Textspalte. Die Hoehe zu kuerzen reicht nicht - ist der Inhalt hoeher als das gekuerzte Mass, waechst der Hero wieder und die Spalte landet erneut unter der Leiste. Stattdessen waechst das untere Innenmass um die Leistenhoehe: die Spalte wird dann unabhaengig von der Inhaltshoehe immer genau um diesen Betrag nach oben geschoben. */ /* Ab 1065px liegt die Leiste als schmale Karte in der rechten unteren Ecke (siehe consent.js). Die Textspalte des Hero ist linksbuendig und auf 42.5-47.5rem begrenzt - Karte und Spalte beruehren sich dort nicht, der Hero bleibt deshalb voellig unveraendert. Nur der Seitenfuss, der ueber die volle Breite laeuft, bekommt unten Platz. */ .nav-cta{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;min-height:2.625rem;padding:0.5625rem 1rem;border:0.0625rem solid var(--cyan);border-radius:0.375rem;background:var(--cyan);color:var(--on-cyan)!important;font-weight:600} /* Der Hero stapelt jetzt auf jeder Breite im Fluss: Markenzeile (M-Logo + Portrait) -> Textspalte -> Scroll-Hinweis. Frueher lagen Logo und Portrait absolut hinter der Textspalte und waren ueber --wm-gap (ein fest eingetragener Messwert der damaligen Spaltenhoehe) von der Hero-Unterkante her verankert. Sobald sich die Hoehe der Textspalte aenderte, stimmte dieser Messwert nicht mehr und Wortmarke und Text liefen ueber Logo und Foto. Im Fluss kann das konstruktionsbedingt nicht mehr passieren - kein Messwert, kein z-index-Stapel, keine Ueberlagerung. */ .hero{min-height:100svh;position:relative; display:flex;flex-direction:column;justify-content:flex-end; padding:calc(7rem - 19px) 0 calc(2.75rem + 19px);isolation:isolate; border-bottom:0.0625rem solid var(--line)} .hero-media{position:absolute;z-index:-2;inset:4.5rem 0 0 38%;overflow:hidden} .hero-media video,.hero-media img{width:100%;height:100%;object-fit:cover;object-position:54% 50%;will-change:transform} .hero-media video{filter:var(--hero-video-filter)} .hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--bg) 0%,rgba(var(--bg-rgb),.94) 14%,rgba(var(--hero-scrim-rgb),.34) 54%,rgba(var(--hero-scrim-rgb),.22) 100%),linear-gradient(0deg,var(--bg) 0%,transparent 28%,rgba(var(--hero-scrim-rgb),.22) 100%)} /* Markenzeile: M-Logo links, Portrait rechts daneben, gemeinsame Unterkante - auf jeder Breite eine echte Flex-Zeile im Fluss. Sie laeuft auf derselben Achse wie .wrap, damit Logo, Wortmarke, Text und Buttons buendig links stehen. Der Abstand nach unten ist der Freiraum zwischen Visual und Wortmarke. */ .hero-brandrow{display:flex;align-items:flex-end;justify-content:flex-start; width:var(--wrap);margin:0 auto clamp(2rem,3.4vw,3.5rem); /* Originalabstand zwischen Logo und Foto aus der absoluten Fassung: dort war er als left-Offset des Portraits notiert. */ gap:clamp(0.75rem,1.6vw,2rem)} /* Dimensionales M als Tiefenebene in der freien Flaeche oben links. z-index -1 = ueber dem Hero-Video (-2), unter der Textspalte. */ .hero-logo{position:static;z-index:auto;pointer-events:none;flex:0 0 auto; --hero-logo-opacity:.72; /* Originalgroesse aus V1.1 wiederhergestellt (war zwischenzeitlich auf 13.5vw zurueckgenommen). Logo und Foto stehen jetzt im Fluss, der Hero waechst dadurch nach oben - der Textblock darunter bleibt von der Hero-Unterkante aus gemessen unveraendert. */ --hlogo-w:clamp(12.5rem,23vw,21rem); --hlogo-h:calc(var(--hlogo-w) * .947); width:var(--hlogo-w); opacity:var(--hero-logo-opacity); filter:drop-shadow(0 1.625rem 3.25rem var(--logo-shadow)) saturate(1.06); -webkit-mask-image:radial-gradient(135% 125% at 38% 34%,#000 74%,rgba(0,0,0,.82) 90%,transparent 100%); mask-image:radial-gradient(135% 125% at 38% 34%,#000 74%,rgba(0,0,0,.82) 90%,transparent 100%); will-change:transform} .hero-logo svg{display:block;width:100%;height:auto} /* Hero-Portrait (Markus & Bjoern). Liegt auf derselben Tiefenebene wie das M-Logo (z-index -1: ueber dem Hero-Video, unter der Textspalte) und spiegelt dessen Geometrie: --hlogo-left/--hlogo-w wiederholen die Werte aus .hero-logo, damit das Foto exakt rechts daneben startet. Die Hoehe ist die Logo-Hoehe (SVG-Seitenverhaeltnis 114:108 -> Faktor .947), also stehen beide auf derselben Unterkante - direkt ueber der Wortmarke. Das Motiv ist freigestellt (Alphakanal), deshalb braucht es keine Hintergrundflaeche - nur eine weiche Abblendung der Huftlinie unten, damit der Beschnitt in den Hero auslaeuft. */ /* position:relative statt absolut: das Foto steht als Flex-Element in der Markenzeile, bleibt aber Bezugsrahmen fuer Bildlink, Namenszug, CTA und Bogen - die liegen weiterhin absolut IM Portrait, nicht ueber fremden Elementen. Die Hoehe ist die Logo-Hoehe, dadurch stehen Logo und Foto wie bisher auf einer gemeinsamen Unterkante. */ .hero-portrait{position:relative;z-index:auto;pointer-events:none;flex:0 0 auto; --hlogo-w:clamp(12.5rem,23vw,21rem); --hportrait-h:calc(var(--hlogo-w) * .947); height:var(--hportrait-h); aspect-ratio:955 / 1187; opacity:.96; filter:drop-shadow(0 1.375rem 2.75rem var(--logo-shadow)); -webkit-mask-image:linear-gradient(0deg,transparent 0%,rgba(0,0,0,.55) 9%,#000 22%); mask-image:linear-gradient(0deg,transparent 0%,rgba(0,0,0,.55) 9%,#000 22%)} /* Tiefstand des Fotos: das Duo stand urspruenglich deutlich tiefer als das M-Logo, seine Unterkante lief knapp oberhalb der Wortmarke aus. Ein einzelner Versatz am Portrait-Container holt das zurueck - Motiv, Namenszug, "Lerne uns kennen!" und Bogen liegen darin und wandern deshalb als Gruppe mit. Bewusst transform statt margin/top: der Versatz bleibt ausserhalb des Layoutflusses, Markenzeile, Wortmarke und der gesamte Textblock darunter behalten ihre Position exakt. 22% beziehen sich auf die Portraithoehe, der Versatz skaliert damit ueber alle Breakpoints mit (~92px bei 1920px); die 0,5cm sind ein nachtraeglicher, auf jeder Breite gleich grosser Feinversatz. Unterhalb 1065px steht das Foto in der gestapelten Markenzeile, dort bleibt es ohne Versatz. */ @media(min-width:1065px){ .hero-portrait{transform:translateY(calc(22% + 1cm))} } .hero-portrait picture{display:block;height:100%} .hero-portrait img{display:block;width:100%;height:100%;object-fit:contain;object-position:50% 100%} /* Auf hellem Grund wirkt das dunkle Motiv sonst zu hart - minimal zurueckgenommen, damit es sich in die helle Flaeche einfuegt. */ [data-theme="light"] .hero-portrait{opacity:.88} /* ===== Namen auf dem Duo-Portrait ===== Beschriftung auf Bauchhoehe (Prozentwerte beziehen sich auf den Portrait-Container; der hat dieselbe aspect-ratio wie das Motiv, das Bild fuellt ihn also deckungsgleich). Die Schrift skaliert ueber clamp() mit der Viewportbreite, analog zur Portraitgroesse selbst. Die weiche Ausblendung des Bildes setzt erst im untersten Fuenftel an, die Beschriftung bleibt daher praktisch voll deckend. */ .hero-portrait-names{position:absolute;inset:0;pointer-events:none;color:#fff; text-shadow:0 0.0625rem 0.125rem rgba(0,0,0,.55),0 0.25rem 1rem rgba(0,0,0,.6)} /* Die Hoehenwerte sind bewusst prozentual: der Block sitzt dadurch auf jeder Portraitgroesse an derselben Stelle des Motivs (Bauchhoehe, unterhalb der verschraenkten Arme) - ein fester cm-Wert waere bei schmalen Fenstern mit kleinerem Foto zu weit nach unten gerutscht. */ .hero-portrait-names .hpn-name{position:absolute;top:74%;width:46%; transform:translateX(-50%);text-align:center; font:700 clamp(0.8125rem,1.05vw,1.1875rem)/1.2 var(--display);letter-spacing:.005em} .hero-portrait-names .hpn-left{left:27%} .hero-portrait-names .hpn-right{left:73%} /* Verbindet die beiden Namen mittig zwischen den Personen. */ .hero-portrait-names .hpn-amp{left:50%;width:8%;color:rgba(255,255,255,.8)} .hero-portrait-names .hpn-role{position:absolute;top:82%;left:50%;width:100%; transform:translateX(-50%);text-align:center;color:rgba(255,255,255,.88); font:500 clamp(0.6875rem,0.82vw,0.9375rem)/1.2 var(--body);letter-spacing:.05em} /* Helles Theme: die Schrift bleibt weiss - sie liegt auf der dunklen Kleidung der beiden, nicht auf der hellen Seitenflaeche. Nur der Schatten wird fester, damit die Kanten dort nicht ausfransen. */ [data-theme="light"] .hero-portrait-names{ text-shadow:0 0.0625rem 0.125rem rgba(0,0,0,.72),0 0.25rem 1rem rgba(0,0,0,.5)} .hero-copy{max-width:calc(47.5rem + 221px);padding-top:1.25rem;position:relative} .hero-context{display:none} .hero-context i{width:0.4375rem;height:0.4375rem;border-radius:50%;background:var(--mint);box-shadow:0 0 1.125rem var(--mint-glow)} h1{margin:0;font:800 clamp(3.625rem,8.6vw,7.75rem)/.88 var(--display);letter-spacing:0;max-width:56.25rem;transition:opacity .14s ease} h1 span{display:block;color:var(--cyan)} /* Hero-Lead: zwei Absaetze mit klarer Hierarchie statt einem Fliesstext- block. Der Container gibt nur noch Grundfarbe, Schriftgroesse und den Abstand nach unten vor - die Textbreiten sitzen an den Absaetzen selbst, damit Intro und Note unterschiedliche Zeilenlaengen haben. Alle Laengen in rem, weil html{font-size:140%} die gesamte Skala traegt (siehe "Nativer Massstab"): 1rem = 22,4 px auf Desktop. 46rem ~ 1030 px Intro (vier Zeilen), 44rem ~ 985 px Note (drei Zeilen) - gemessen bei 1920 px Viewport. */ .hero-lead{max-width:100%;margin:1.125rem 0 2rem;color:var(--lead);font-size:clamp(0.9375rem,1.02vw,1.0625rem);line-height:1.58} .hero-lead p{margin:0 0 0.75rem} .hero-lead p:last-child{margin-bottom:0} /* Intro: breitere Spalte, eine Spur groesser und heller (--text statt --lead) - der Unterschied bleibt bewusst klein, keine Ueberschrift. */ .hero-lead .hero-intro{max-width:46rem;margin-bottom:0;color:var(--text); font-size:clamp(1rem,1.06vw,1.125rem);line-height:1.5} /* Note: nur eine Spur schmaler als das Intro und bewusst schwach eingerueckt (0.75rem ~ 17 px) - der Absatz soll mit dem Intro einen Block bilden, die Hierarchie tragen Abstand und Cyan-Haarlinie. Die Linie sitzt auf x=0 und fluchtet mit Headline, Intro und Buttons; der Einzug liegt im Padding, damit .hero-actions links stehen bleibt. */ .hero-lead .hero-note{box-sizing:border-box;position:relative; max-width:calc(44rem + 0.75rem);margin:1.0625rem 0 0;padding-left:0.75rem} .hero-note::before{content:"";position:absolute;left:0;top:0.34em;bottom:0.34em; width:0.0625rem;border-radius:0.0625rem; background:linear-gradient(180deg,var(--cyan-line) 0%,var(--cyan-line) 38%,transparent 100%)} /* Hinweis zur Spezifitaet: .hero-lead p (0,1,1) wuerde eine reine .hero-intro / .hero-note-Regel (0,1,0) bei margin ueberstimmen - darum sind beide Regeln oben an .hero-lead gebunden. */ .hero-actions{display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap} /* box-sizing:border-box ist noetig, weil .btn auch auf -Elementen sitzt (Hero-CTAs, ATAS-Link, Bundle-CTA) - anders als