/* ================================================================== 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; --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; --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)} .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)} .nav-cta{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} .hero{min-height:100svh;position:relative;display:grid;align-items:end;padding:8.25rem 0 3.625rem;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%} .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%)} /* Dimensionales M als Tiefenebene in der freien Flaeche oben links. z-index -1 = ueber dem Hero-Video (-2), unter der Textspalte. */ .hero-logo{position:absolute;z-index:-1;pointer-events:none; --hero-logo-opacity:.72; left:max(1.25rem,calc((100vw - 80rem)/2)); top:clamp(6rem,14vh,10.75rem); width:clamp(13.125rem,23vw,22rem); 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-copy{max-width:47.5rem;padding-top:4.375rem;position:relative} .hero-context{display:flex;align-items:center;gap:0.625rem;color:var(--muted);font-size:0.875rem;margin-bottom:1.75rem} .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{max-width:43.125rem;margin:1.75rem 0 2rem;color:var(--lead);font-size:clamp(1.125rem,1.8vw,1.4375rem);line-height:1.52} .hero-actions{display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap} .btn{display:inline-flex;align-items:center;justify-content:center;gap:0.75rem;min-height:3.25rem;padding:0.8125rem 1.25rem;border-radius:0.375rem;border:0.0625rem solid transparent;font-weight:700;font-size:0.9375rem;cursor:pointer;transition:transform .2s ease,background .2s ease,border-color .2s ease} .btn:hover{transform:translateY(-0.125rem)} .btn-primary{background:var(--cyan);color:var(--on-cyan);box-shadow:0 0.75rem 2.5rem var(--cyan-glow)} .btn-quiet{border-color:var(--line-strong);background:var(--surface-quiet);color:var(--text)} .hero-mechanics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));max-width:58.125rem;margin-top:4.75rem;border-top:0.0625rem solid var(--line);border-bottom:0.0625rem solid var(--line)} .mechanic{padding:1.125rem 1.125rem 1.125rem 0;border-right:0.0625rem solid var(--line)} .mechanic:not(:first-child){padding-left:1.125rem} .mechanic:last-child{border-right:0} .mechanic b{display:block;font:600 0.9375rem/1.3 var(--display)} .mechanic small{display:block;color:var(--quiet);font-family:var(--mono);font-size:0.6875rem;margin-top:0.3125rem} .scroll-cue{position:absolute;right:1.75rem;bottom:2.125rem;writing-mode:vertical-rl;color:var(--quiet);font:0.6875rem var(--mono);text-transform:uppercase;letter-spacing:.1em} .atlas{background:var(--atlas-bg)} .atlas-layout{display:grid;grid-template-columns:minmax(18.75rem,.78fr) minmax(0,1.22fr);gap:5.5rem;align-items:start} .atlas-steps{display:grid;gap:0} .atlas-step{min-height:44vh;padding:2.125rem 0 2.75rem;border-top:0.0625rem solid var(--line);opacity:.42;transition:opacity .35s ease} .atlas-step.is-active{opacity:1} .atlas-step .num{font:0.75rem var(--mono);color:var(--cyan)} .atlas-step h3{margin:0.75rem 0 0.75rem;font:700 clamp(1.75rem,3.2vw,2.875rem)/1.08 var(--display)} .atlas-step p{max-width:31.25rem;margin:0;color:var(--muted);font-size:1.0625rem} .atlas-visual{position:sticky;top:6.5rem;height:min(72vh,45rem);border:0.0625rem solid var(--line);border-radius:1rem;overflow:hidden;background:var(--media-bg)} .atlas-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:var(--media-filter);transform:scale(1.03)} .atlas-visual::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(var(--scrim-atlas-rgb),.9),transparent 50%),linear-gradient(90deg,rgba(var(--scrim-atlas-rgb),.28),transparent)} .route-svg{position:absolute;inset:10% 9%;width:82%;height:80%;z-index:2;overflow:visible} .route-bg,.route-progress{fill:none;stroke-width:2} .route-bg{stroke:var(--route-track)} .route-progress{stroke:var(--cyan);stroke-linecap:round;filter:drop-shadow(0 0 0.5rem var(--route-glow));stroke-dasharray:1;stroke-dashoffset:1} .route-dot{fill:var(--media-bg);stroke:var(--route-ring);stroke-width:1.5} .route-dot.active{fill:var(--cyan);stroke:var(--cyan)} .route-label{position:absolute;left:2.125rem;bottom:1.875rem;z-index:3} .route-label small{font:0.6875rem var(--mono);color:var(--cyan);text-transform:uppercase} .route-label strong{display:block;margin-top:0.4375rem;font:700 clamp(1.5rem,2.5vw,2.375rem)/1 var(--display)} .lab-stage{position:relative;min-height:42.5rem;border:0.0625rem solid var(--line);border-radius:1.125rem;overflow:hidden;background:var(--panel)} .lab-stage>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:var(--media-filter-strong)} .lab-stage::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(var(--scrim-deep-rgb),.96) 0%,rgba(var(--scrim-deep-rgb),.8) 42%,rgba(var(--scrim-deep-rgb),.08) 78%),linear-gradient(0deg,rgba(var(--scrim-deep-rgb),.72),transparent 50%)} .lab-content{position:relative;z-index:2;width:min(32.5rem,100%);padding:3.375rem} .lab-content h2{font:700 clamp(2.375rem,5vw,4.25rem)/1 var(--display);margin:0.625rem 0 1.125rem} .lab-content>p{font-size:1.125rem;color:var(--muted);margin:0 0 1.875rem} .layer-tabs{display:grid;gap:0.5rem} .layer-tab{width:100%;display:grid;grid-template-columns:2.625rem 1fr auto;gap:0.75rem;align-items:center;text-align:left;border:0.0625rem solid var(--line);border-radius:0.5rem;background:var(--surface-soft);padding:0.875rem 1rem;cursor:pointer;min-height:3.625rem;transition:.2s ease} .layer-tab:hover,.layer-tab[aria-selected="true"]{background:var(--surface-active);border-color:var(--cyan-line)} .layer-tab .index{font:0.6875rem var(--mono);color:var(--cyan)} .layer-tab strong{font-size:0.9375rem} .layer-tab .state{font:0.6875rem var(--mono);color:var(--quiet)} .layer-tab[aria-selected="true"] .state{color:var(--mint)} .layer-detail{margin-top:1.25rem;padding:1.375rem;border-left:0.125rem solid var(--cyan);background:var(--detail-bg);color:var(--detail-text)} .layer-detail b{display:block;font:600 1.125rem var(--display);margin-bottom:0.4375rem} .episodes-shell{border-top:0.0625rem solid var(--line);border-bottom:0.0625rem solid var(--line)} .episode-tabs{display:flex;overflow-x:auto;scrollbar-width:thin} .episode-tab{flex:1 0 8.25rem;min-height:5.125rem;padding:1rem;border:0;border-right:0.0625rem solid var(--line);background:transparent;text-align:left;cursor:pointer;color:var(--quiet)} .episode-tab span{display:block;font:0.625rem var(--mono);color:var(--cyan);margin-bottom:0.3125rem} .episode-tab b{font-size:0.875rem} .episode-tab[aria-selected="true"]{background:var(--cyan-soft);color:var(--text)} .episode-detail{display:grid;grid-template-columns:1.2fr .8fr;gap:3.375rem;padding:3.25rem 0} .episode-detail h3{font:700 clamp(2rem,4vw,3.375rem)/1.05 var(--display);margin:0.5rem 0 1.125rem} .episode-detail p{max-width:43.75rem;color:var(--muted);font-size:1.125rem} .path-list{align-self:end;border-left:0.0625rem solid var(--line);padding-left:1.875rem} .path-list div{display:flex;justify-content:space-between;gap:1.125rem;padding:0.75rem 0;border-bottom:0.0625rem solid var(--line);font-size:0.875rem} .path-list span{color:var(--quiet);font-family:var(--mono);font-size:0.6875rem;text-transform:uppercase} .glossary-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:5rem} .glossary-layout h2{font:700 clamp(2.375rem,5vw,4.25rem)/1 var(--display);margin:0.625rem 0 1.25rem} .glossary-index{border-top:0.0625rem solid var(--line)} details{border-bottom:0.0625rem solid var(--line)} summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:1.25rem;padding:1.25rem 0;cursor:pointer;font:600 1.125rem var(--display)} summary::-webkit-details-marker{display:none} summary::after{content:"+";color:var(--cyan);font:1.375rem var(--mono)} details[open] summary::after{content:"–"} details p{margin:0 0 1.375rem;color:var(--muted);max-width:45rem} .bundle{display:grid;grid-template-columns:1.06fr .94fr;border:0.0625rem solid var(--line);border-radius:1.125rem;overflow:hidden;background:var(--panel)} .bundle-copy{padding:4rem} .bundle-copy h2{font:700 clamp(2.375rem,5vw,4.25rem)/1 var(--display);margin:0.625rem 0 1.25rem} .bundle-copy>p{color:var(--muted);font-size:1.125rem} .bundle-list{margin:1.875rem 0 2.125rem;padding:0;list-style:none;border-top:0.0625rem solid var(--line)} .bundle-list li{display:flex;gap:0.875rem;padding:0.75rem 0;border-bottom:0.0625rem solid var(--line);font-size:0.9375rem} .bundle-list li::before{content:"";width:0.4375rem;height:0.4375rem;margin-top:0.5625rem;border-radius:50%;background:var(--cyan);flex:0 0 auto} .bundle-media{min-height:38.75rem;position:relative;background:var(--media-bg-2)} .bundle-media video{width:100%;height:100%;object-fit:cover;filter:var(--media-filter-bundle)} .bundle-media::after{content:attr(data-caption);position:absolute;left:1.375rem;bottom:1.25rem;padding:0.4375rem 0.625rem;background:var(--chip-bg);border:0.0625rem solid var(--line);font:0.625rem var(--mono);color:var(--muted);text-transform:uppercase} .trust-optin{display:grid;grid-template-columns:23.75rem minmax(0,1fr);gap:4.5rem;align-items:stretch} .operator-media{position:relative;margin:0;min-height:35.625rem;border-radius:1rem;overflow:hidden;border:0.0625rem solid var(--line);background:var(--media-bg-3)} .operator-media video{width:100%;height:100%;object-fit:cover;object-position:50% 46%;transform:scale(1.23);filter:saturate(.7) brightness(.72)} .operator-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(var(--scrim-rgb),.45),transparent 30%,transparent 70%,rgba(var(--scrim-rgb),.5)),linear-gradient(0deg,rgba(var(--scrim-rgb),.9),transparent 46%)} .operator-caption{position:absolute;left:1.5rem;right:1.5rem;bottom:1.5rem;z-index:2} .operator-caption strong{display:block;font:700 1.5rem var(--display)} .operator-caption span{color:var(--muted);font-size:0.875rem} /* Der Hinweis steht ausserhalb von .operator-media - also ausserhalb der dunklen Insel - und nimmt damit in beiden Themes die Seitenfarben an. grid-template-rows:1fr auto haelt die bisherige Fuellhoehe der Figur: sie war Grid-Item von .trust-optin mit align-items:stretch. Zum margin:
trug bisher den Browser-Standard 1em 40px, der das Panel um 40 px pro Seite eingerueckt hat. Der Abstand wandert auf den Wrapper, die Figur steht dadurch pixelgenau wie zuvor und der Hinweis buendig darunter. Der Wert stammt aus dem Browser-Default, nicht aus diesem Stylesheet - soll das Panel spaltenbreit stehen, hier auf 0 setzen. */ .operator-block{display:grid;grid-template-rows:1fr auto;gap:0.75rem;min-width:0;margin:1em 40px} .media-credit{margin:0;color:var(--quiet);font-size:0.75rem;line-height:1.5} [data-theme="light"] .media-credit{font-size:0.8125rem} .optin{align-self:center;max-width:45rem} .optin h2{font:700 clamp(2.5rem,5vw,4.5rem)/1 var(--display);margin:0.625rem 0 1.25rem} .optin>p{font-size:1.125rem;color:var(--muted);max-width:40.625rem} .email-row{display:grid;grid-template-columns:1fr auto;gap:0.625rem;margin:1.875rem 0 1.125rem} .email-row input{min-height:3.5rem;width:100%;border:0.0625rem solid var(--line-strong);border-radius:0.375rem;background:var(--input-bg);color:var(--text);padding:0.75rem 1rem} /* align-items:center statt des Vorgabewerts stretch: sonst dehnen sich die Labels auf die Hoehe ihrer Flex-Zeile, und sobald ein Feld umbricht, sitzen die Kaestchen der Nachbarn auf anderer Hoehe. white-space:nowrap haelt jede Beschriftung einzeilig - umbrochen wird zwischen den Feldern, nicht innerhalb. */ .interest-row{display:flex;gap:0.625rem 1.375rem;flex-wrap:wrap;align-items:center;color:var(--muted);font-size:0.8125rem} .interest-row label{display:flex;align-items:center;gap:0.5rem;min-height:2rem;white-space:nowrap} .interest-row input{accent-color:var(--cyan);width:1rem;height:1rem;flex:none;margin:0} .form-status{min-height:1.5rem;margin:0.75rem 0 0;color:var(--mint);font-size:0.8125rem} /* Die Fehlermeldung stand bisher in derselben Bestaetigungsfarbe. */ .form-status[data-state="error"]{color:var(--danger)} footer{padding:2.75rem 0;border-top:0.0625rem solid var(--line);color:var(--quiet);font-size:0.75rem} .footer-grid{display:flex;justify-content:space-between;gap:1.875rem;align-items:flex-start} .footer-grid p{max-width:52.5rem;margin:0} /* Rechtstexte: eigener Block, damit die Hinweise nicht als eine Wand aus Kleingedrucktem erscheinen. Etwas hoehere Zeile und --muted statt --quiet - der Risikohinweis ist der inhaltlich schwerste Absatz der Fusszeile und sollte nicht ihr leisester sein. */ .footer-notes{display:grid;gap:0.875rem;max-width:52.5rem} .footer-about{color:var(--muted)} .footer-note{color:var(--muted);line-height:1.62;text-wrap:pretty} .footer-note strong{color:var(--text);font-weight:700} /* An den Fuss des Textblocks statt an dessen Oberkante: neben drei Absaetzen wirkten die beiden Links oben rechts abgehaengt. */ .footer-links{display:flex;gap:1rem;white-space:nowrap;align-self:end} .reveal{opacity:0;transform:translateY(1.375rem);transition:opacity .65s ease,transform .65s ease} .reveal.in{opacity:1;transform:none} @media(max-width:1372px){ .nav-links a:not(.nav-cta){display:none} .hero-media{inset:4.5rem 0 0 26%} .hero-copy{max-width:42.5rem} .hero-logo{display:none} .section-head,.atlas-layout,.glossary-layout,.bundle,.trust-optin{grid-template-columns:1fr} .section-head{gap:1.25rem} .atlas-layout{gap:2.125rem} .atlas-visual{position:relative;top:auto;height:32.5rem;order:-1} .atlas-step{min-height:auto;padding:1.75rem 0} .episode-detail{grid-template-columns:1fr} .path-list{padding-left:0;border-left:0} .bundle-media{min-height:26.25rem} .trust-optin{grid-template-columns:minmax(17.5rem,23.75rem) 1fr;gap:2.5rem} } @media(max-width:1064px){ :root{--wrap:min(100% - 2rem,80rem)} .section{padding:5.25rem 0} .hero{min-height:auto;padding-top:7.375rem;display:flex;flex-direction:column;align-items:stretch} .hero>.wrap{order:1} .hero-media{position:relative;inset:auto;width:calc(100% + 2rem);height:48vh;min-height:21.875rem;margin:2.125rem -1rem -3.625rem;order:2} .hero-media::after{background:linear-gradient(0deg,var(--bg),transparent 38%),linear-gradient(90deg,rgba(var(--hero-scrim-rgb),.3),transparent)} .hero-copy{padding-top:0} h1{font-size:clamp(3.375rem,17vw,5.25rem)} .hero-mechanics{grid-template-columns:1fr 1fr;margin-top:2.875rem} .mechanic:nth-child(2){border-right:0} .mechanic:nth-child(-n+2){border-bottom:0.0625rem solid var(--line)} .scroll-cue{display:none} .lab-stage{min-height:46.25rem} .lab-stage::after{background:linear-gradient(0deg,rgba(var(--scrim-deep-rgb),.98) 0%,rgba(var(--scrim-deep-rgb),.9) 60%,rgba(var(--scrim-deep-rgb),.2) 100%)} .lab-content{position:absolute;left:0;right:0;bottom:0;padding:1.75rem} .trust-optin{grid-template-columns:1fr} .operator-media{min-height:31.25rem;max-width:24.375rem} .email-row{grid-template-columns:1fr} .footer-grid{display:grid} .footer-links{white-space:normal} } @media(max-width:588px){ .nav-inner{height:4rem} .nav-cta{display:none} .hero{padding-top:6.25rem} .hero-actions{align-items:stretch} .btn{width:100%} .hero-mechanics{grid-template-columns:1fr} .mechanic,.mechanic:not(:first-child){padding:0.9375rem 0;border-right:0;border-bottom:0.0625rem solid var(--line)} .atlas-visual{height:26.25rem} .route-label{left:1.25rem;bottom:1.25rem} .lab-content{padding:1.375rem} .layer-tab{grid-template-columns:2.125rem 1fr} .layer-tab .state{display:none} .bundle-copy{padding:1.875rem 1.5rem} } @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important} .reveal{opacity:1;transform:none} } :root{ --ml-brand-font:"Roboto Serif",Georgia,"Times New Roman",serif; --ml-brand-weight:600; --ml-brand-weight-xl:500; --ml-brand-size:1.25rem; --ml-brand-mark-scale:.88; --ml-brand-tracking:-.01em; --ml-brand-tracking-xl:-.022em; --ml-brand-accent:var(--cyan); --ml-brand-ctx-font:var(--body); --ml-brand-ctx-color:var(--muted); } /* ================================================================ MarketLab Wordmark — kanonische Komponente v1 Eine Struktur, ein Schnitt, eine "Lab"-Auszeichnung — auf allen vier Seiten identisch. Nur die Tokens unten werden pro Seite gemappt (Akzentfarbe, Sekundaerschrift). ================================================================ */ .ml-brand{ display:inline-flex; align-items:center; gap:.42em; font-family:var(--ml-brand-font); font-weight:var(--ml-brand-weight); font-size:var(--ml-brand-size); line-height:1; letter-spacing:var(--ml-brand-tracking); white-space:nowrap; color:inherit; transition:opacity .14s ease; } .ml-brand-name{display:inline-block} .ml-lab{ font-style:normal; font-weight:inherit; color:var(--ml-brand-accent); } .ml-brand-ctx{ align-self:center; font-family:var(--ml-brand-ctx-font); font-weight:500; font-size:0.65625rem; line-height:1; letter-spacing:.16em; text-transform:uppercase; color:var(--ml-brand-ctx-color); } /* XL-Variante fuer den Hero-Wordmark. Erbt die Groesse vom h1 der Seite, ueberschreibt nur Familie, Schnitt und Laufweite. */ .ml-wordmark{ font-family:var(--ml-brand-font); font-weight:var(--ml-brand-weight-xl); letter-spacing:var(--ml-brand-tracking-xl); } .ml-wordmark .ml-lab{ display:inline; font-style:normal; font-weight:inherit; color:var(--ml-brand-accent); } @media (max-width:1204px){ .ml-brand-ctx{display:none} } .ml-brand-mark{flex:none;display:block;height:calc(var(--ml-brand-mark-scale) * 1em);width:calc(var(--ml-brand-mark-scale) * 1.0829em);overflow:visible} /* ================================================================ Nativer Massstab Alle Laengen haengen an dieser einen Zeile. 100% = Ausgangsgroesse, 140% entspricht dem Browser-Zoom von 140 %. Prozent statt px, damit eine abweichende Schriftgroesse im Browser des Nutzers erhalten bleibt. ================================================================ */ html{font-size:140%} /* ================================================================ MOBILE-OPTIMIERUNG Alles unterhalb dieser Linie greift erst ab den jeweiligen Breakpoints. Der Desktop-Zustand (140 %) bleibt unveraendert. ================================================================ */ /* 1) Gestufte Grundskala. Die 140 % sind fuer grosse Screens gedacht. Auf einem Telefon wuerde dieselbe Skala jede rem-Groesse um Faktor 1,4 aufblasen (h1 ~76 px, Buttons ~73 px hoch). Darum wird die Skala nach unten gestuft zurueckgenommen. */ @media(max-width:1372px){html{font-size:125%}} @media(max-width:1064px){html{font-size:115%}} @media(max-width:768px){html{font-size:106%}} @media(max-width:588px){html{font-size:100%}} /* 2) Mobile Navigation. Bisher waren unter 1372 px alle Links und unter 588 px auch die CTA ausgeblendet - auf dem Telefon gab es damit keine Navigation mehr. Burger-Panel statt Totalausblendung. */ .nav-toggle{display:none} @media(max-width:1372px){ .nav-toggle{display:inline-flex;align-items:center;justify-content:center; width:2.75rem;height:2.75rem;flex:0 0 auto;padding:0; border:0.0625rem solid var(--line-strong);border-radius:0.375rem; background:var(--control-bg);color:var(--text);cursor:pointer} .nav-toggle span{position:relative;display:block;width:1.125rem;height:0.09375rem;background:currentColor;transition:background .2s ease} .nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0;width:100%;height:100%;background:currentColor;transition:transform .22s ease} .nav-toggle span::before{top:-0.375rem} .nav-toggle span::after{top:0.375rem} .nav-toggle[aria-expanded="true"] span{background:transparent} .nav-toggle[aria-expanded="true"] span::before{transform:translateY(0.375rem) rotate(45deg)} .nav-toggle[aria-expanded="true"] span::after{transform:translateY(-0.375rem) rotate(-45deg)} .nav-inner{gap:1rem} .nav-links{position:absolute;left:0;right:0;top:100%;display:flex;flex-direction:column; align-items:stretch;gap:0;box-sizing:border-box; padding:0.25rem max(1.25rem,calc((100vw - var(--wrap))/2)) 1.25rem; background:var(--nav-panel-bg);border-bottom:0.0625rem solid var(--line); backdrop-filter:blur(1.125rem);font-size:1rem; opacity:0;visibility:hidden;transform:translateY(-0.5rem); transition:opacity .2s ease,transform .2s ease,visibility .2s} .site-nav.is-open .nav-links{opacity:1;visibility:visible;transform:none} .nav-links a:not(.nav-cta){display:flex;align-items:center;min-height:3.25rem; border-bottom:0.0625rem solid var(--line);color:var(--text)} .nav-cta{display:inline-flex;width:100%;margin-top:1.125rem;min-height:3rem} } /* 3) Tablet- und Telefon-Layout */ @media(max-width:1064px){ body{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)} a,button,summary,label{-webkit-tap-highlight-color:var(--cyan-tap)} h1,h2,h3{overflow-wrap:break-word} .hero-media{height:40vh;min-height:16rem} .hero-lead{margin-bottom:1.75rem} /* Lab-Stage: Bild und Text uebereinander statt Text ueber Bild. Der Overlay-Modus liess den Text auf schmalen Screens auf dem Motiv stehen und erzwang 46 rem Mindesthoehe. */ .lab-stage{min-height:0;display:grid;grid-template-rows:auto auto} .lab-stage>img{position:relative;inset:auto;height:15rem;filter:var(--media-filter-soft)} .lab-stage::after{display:none} .lab-content{position:relative;left:auto;right:auto;bottom:auto; box-sizing:border-box;width:100%;padding:2rem} /* Episode-Tabs: horizontales Scrollen mit Snap statt harter Kante */ .episodes-shell{position:relative} .episodes-shell::after{content:"";position:absolute;top:0;right:0;width:2.5rem;height:5.125rem; pointer-events:none;background:linear-gradient(90deg,rgba(var(--bg-rgb),0),rgba(var(--bg-rgb),.92))} .episode-tabs{scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none} .episode-tabs::-webkit-scrollbar{display:none} .episode-tab{flex:0 0 9rem;scroll-snap-align:start} .path-list{margin-top:0.5rem} /* Touch-Ziele auf mindestens 44 px */ summary{min-height:3rem} .footer-grid{gap:1.25rem} .footer-links{gap:1.5rem} .footer-links a{display:inline-flex;align-items:center;min-height:2.75rem} .interest-row{gap:0.25rem 1.25rem} .interest-row label{min-height:2.75rem;font-size:0.875rem} .interest-row input{width:1.25rem;height:1.25rem} .email-row input{font-size:1rem;min-height:3.25rem} .email-row .btn{width:100%} .operator-media{min-height:0;aspect-ratio:4/5;max-width:26rem;width:100%} } @media(max-width:588px){ .section{padding:3.75rem 0} .section-head{margin-bottom:2.25rem} .nav-inner{height:3.75rem} .hero{padding-top:5.75rem;padding-bottom:2.5rem} .hero-context{margin-bottom:1.25rem} .hero-media{height:34vh;min-height:13rem} /* 2x2 statt vier gestapelter Zeilen - spart rund eine Bildhoehe */ .hero-mechanics{grid-template-columns:1fr 1fr;margin-top:2.25rem} .mechanic,.mechanic:not(:first-child){padding:0.875rem 0.875rem 0.875rem 0; border-right:0.0625rem solid var(--line);border-bottom:0.0625rem solid var(--line)} .mechanic:nth-child(2n){border-right:0;padding-left:0.875rem;padding-right:0} .mechanic:nth-child(n+3){border-bottom:0} .atlas-visual{height:18rem} .atlas-layout{gap:1.5rem} .lab-stage>img{height:11rem} .lab-content{padding:1.5rem} .layer-tab{min-height:3.25rem;padding:0.75rem 0.875rem} .episode-tab{flex:0 0 8rem;min-height:4.5rem} .episode-detail{padding:2.25rem 0;gap:1.5rem} .bundle-copy{padding:1.75rem 1.375rem} .bundle-media{min-height:0;aspect-ratio:16/10} .operator-media{aspect-ratio:1/1} .operator-caption{left:1.125rem;right:1.125rem;bottom:1.125rem} .operator-caption strong{font-size:1.25rem} .glossary-layout{gap:2rem} details p{margin-bottom:1.125rem} footer{padding-bottom:max(2.125rem,env(safe-area-inset-bottom))} } /* 4) Sehr schmale Geraete (iPhone SE und aehnlich) */ @media(max-width:360px){ .hero-mechanics{grid-template-columns:1fr} .mechanic,.mechanic:not(:first-child){border-right:0;padding-left:0} .mechanic:nth-child(n+3){border-bottom:0.0625rem solid var(--line)} } /* 5) Landscape auf Telefonen: der 100svh-Hero wuerde die Copy sonst aus dem Sichtfeld schieben. */ @media(max-height:520px) and (orientation:landscape){ .hero{min-height:0;padding-top:5.5rem} .hero-media{height:52vh;min-height:0} .site-nav.is-open .nav-links{max-height:calc(100vh - 4rem);overflow-y:auto} } /* 6) Geraete ohne echten Hover: Hover-Transforms deaktivieren, damit ein Tap nicht in einem verschobenen Zustand haengen bleibt. */ @media(hover:none){ .btn:hover{transform:none} .layer-tab:hover{background:var(--surface-soft);border-color:var(--line)} .layer-tab[aria-selected="true"]{background:var(--surface-active);border-color:var(--cyan-line)} } /* ================================================================ 7) Typografie-Untergrenzen Die clamp()-Minimalwerte stammen aus dem Desktop-Entwurf. Unterhalb von rund 400 px greift nicht mehr der vw-Anteil, sondern das Minimum - dort standen h1/h2 dann breiter als die Textspalte. Die Maxima bleiben unangetastet, der Desktop-Zustand aendert sich nicht. ================================================================ */ @media(max-width:588px){ h1{font-size:clamp(2.75rem,13.5vw,4rem)} .section-head h2{font-size:clamp(1.75rem,7.4vw,2.5rem)} .lab-content h2,.glossary-layout h2,.bundle-copy h2{font-size:clamp(1.875rem,7.6vw,2.75rem)} .optin h2{font-size:clamp(1.875rem,7.6vw,2.75rem)} .atlas-step h3{font-size:clamp(1.5rem,6.2vw,2rem)} .episode-detail h3{font-size:clamp(1.625rem,6.6vw,2.25rem)} .route-label strong{font-size:clamp(1.25rem,5.4vw,1.75rem)} .hero-lead{font-size:clamp(1rem,4.4vw,1.1875rem)} } @media(max-width:360px){ h1{font-size:clamp(2.375rem,13vw,3.25rem)} .lab-content h2,.glossary-layout h2,.bundle-copy h2,.optin h2{font-size:1.625rem} } /* ================================================================ 8) Kontrast und Fokus (WCAG 2.1 AA) ================================================================ */ /* Inaktive Atlas-Schritte standen auf opacity .42. Der Fliesstext (--muted #b4bec1) landete damit effektiv bei rund 2,7:1 gegen den Sektionshintergrund und lag deutlich unter der 4,5:1-Schwelle. .72 haelt den Tiefeneffekt und erreicht rund 5,7:1. */ .atlas-step{opacity:.72} .atlas-step.is-active{opacity:1} /* Der Fokusring nutzt outline-offset .25rem. In Containern mit overflow:hidden (Episode-Tabs, Atlas-Visual, Lab-Stage) wurde er dadurch abgeschnitten - dort nach innen zeichnen. */ .episode-tab:focus-visible, .atlas-visual :focus-visible, .lab-stage :focus-visible, .nav-links a:focus-visible{outline:0.125rem solid var(--cyan);outline-offset:-0.125rem} /* ================================================================ RECHTSTEXTE (datenschutz.html) Sprachumschaltung ohne JavaScript: beide Fassungen stehen im Markup, sichtbar ist die zum lang-Attribut des passende. Das Attribut setzt das Inline-Snippet im vor dem ersten Paint. Faellt JavaScript komplett aus, bleibt lang="de" aus der Auslieferung stehen und die deutsche Fassung ist da - bei einer Pflichtinformation ist das der entscheidende Punkt. ================================================================ */ .legal-body{display:none} html[lang="de"] .legal-body[data-lang-content="de"], html[lang="en"] .legal-body[data-lang-content="en"]{display:block} /* Ohne CSS (und damit ohne diese Regel) waeren beide Fassungen sichtbar - unschoen, aber vollstaendig. Das ist die richtige Richtung fuer den Fehlerfall. */ .legal{padding:9.5rem 0 6rem} .legal-wrap{max-width:56rem} .legal-head{padding-bottom:2.5rem;border-bottom:0.0625rem solid var(--line);margin-bottom:2.5rem} .legal-head h1{margin:0.75rem 0 0;font:700 clamp(2.5rem,5.4vw,4rem)/1.05 var(--display);max-width:100%} .legal-lead{margin:1.5rem 0 0;max-width:44rem;color:var(--lead);font-size:clamp(1.0625rem,1.6vw,1.3125rem);line-height:1.55} .legal-meta{margin:1.5rem 0 0;color:var(--quiet);font-family:var(--mono);font-size:0.8125rem; text-transform:uppercase;letter-spacing:.06em} /* Hinweis auf die massgebliche Sprachfassung */ .legal-authority{margin:1.25rem 0 0;padding:0.875rem 1.125rem;border-left:0.125rem solid var(--cyan); background:var(--detail-bg);color:var(--detail-text);font-size:0.9375rem} .legal-authority a{text-decoration:underline;text-underline-offset:0.2em} .legal-toc{margin-bottom:3.5rem;padding:1.75rem 1.875rem;border:0.0625rem solid var(--line); border-radius:0.75rem;background:var(--surface-soft)} .legal-toc h2{margin:0 0 1rem;font:600 0.75rem var(--mono);text-transform:uppercase; letter-spacing:.1em;color:var(--cyan)} .legal-toc ol{margin:0;padding-left:1.5rem;columns:2;column-gap:2.5rem; color:var(--muted);font-size:0.9375rem;line-height:1.9} .legal-toc a{text-decoration:none} .legal-toc a:hover{color:var(--text);text-decoration:underline;text-underline-offset:0.2em} .legal-section{margin-bottom:3.25rem;scroll-margin-top:6.5rem} .legal-section h2{display:flex;align-items:baseline;gap:0.75rem;margin:0 0 1.25rem; font:700 clamp(1.5rem,2.6vw,2rem)/1.2 var(--display)} .legal-num{flex:none;font:0.8125rem var(--mono);color:var(--cyan); transform:translateY(-0.15em)} .legal-section h3{margin:1.75rem 0 0.75rem;font:600 1.0625rem/1.45 var(--display);color:var(--text)} .legal-section h3:first-of-type{margin-top:0} .legal-section p{margin:0 0 1rem;color:var(--muted);font-size:1rem;line-height:1.72; max-width:46rem;text-wrap:pretty} .legal-section ul{margin:0 0 1.25rem;padding-left:1.25rem;color:var(--muted); font-size:1rem;line-height:1.72;max-width:46rem} .legal-section li{margin-bottom:0.375rem} .legal-section li::marker{color:var(--cyan)} .legal-section a{color:var(--cyan);text-decoration:underline;text-underline-offset:0.2em} .legal-section a:hover{color:var(--text)} .legal-section strong{color:var(--text)} /* Der Widerspruchsabschnitt ist nach Art. 21 Abs. 4 DSGVO hervorzuheben. */ .legal-emphasis{padding:1.75rem 1.875rem;border-left:0.1875rem solid var(--cyan); background:var(--surface-soft);border-radius:0 0.5rem 0.5rem 0} .legal-emphasis p{color:var(--text)} .legal-address{margin:0 0 1.25rem;padding:1.125rem 1.375rem;border:0.0625rem solid var(--line); border-radius:0.5rem;background:var(--surface-soft);font-style:normal; color:var(--muted);font-size:0.9375rem;line-height:1.75} .legal-address strong{display:block;margin-bottom:0.25rem;color:var(--text)} .legal-address a{color:var(--cyan)} /* Roboto Serif enthaelt keine griechischen Glyphen - die Familie deckt nur latin, latin-ext, kyrillisch und vietnamesisch ab. Das galt schon fuer die Google-Fassung, ist also keine Folge der lokalen Einbindung. Damit der griechische Behoerdenname nicht zufaellig irgendeine Systemschrift erwischt, steht der Fallback hier ausdruecklich. */ [lang="el"]{font-family:Georgia,"Times New Roman",serif} /* Tabellen bekommen auf schmalen Screens einen eigenen Scrollbereich, statt das Layout zu sprengen. tabindex macht ihn per Tastatur erreichbar - sonst kaeme man ohne Maus nicht an den rechten Rand. */ .legal-table-scroll{margin:0 0 1.25rem;overflow-x:auto;-webkit-overflow-scrolling:touch} .legal-table-scroll:focus-visible{outline:0.125rem solid var(--cyan);outline-offset:0.25rem} .legal-table{width:100%;min-width:32rem;border-collapse:collapse;font-size:0.9375rem} .legal-table th,.legal-table td{padding:0.75rem 1rem;text-align:left;vertical-align:top; border-bottom:0.0625rem solid var(--line)} .legal-table thead th{color:var(--cyan);font:0.6875rem var(--mono);text-transform:uppercase; letter-spacing:.08em;border-bottom-color:var(--line-strong)} .legal-table tbody th{color:var(--text);font-weight:600;width:38%} .legal-table td{color:var(--muted);line-height:1.6} .legal-contact{margin-top:4rem;padding-top:2.5rem;border-top:0.0625rem solid var(--line)} .legal-contact h2{margin:0 0 1rem;font:700 clamp(1.5rem,2.6vw,2rem)/1.2 var(--display)} .legal-contact p{margin:0 0 1.25rem;color:var(--muted);max-width:46rem} /* Das Impressum ist kurz - eine schmalere Spalte steht ihm besser als die volle Breite der Datenschutzerklaerung. */ .legal-wrap-narrow{max-width:44rem} /* ---------------------------------------------------------------- Entwurfsmarkierungen Solange Pflichtangaben fehlen, muss das auffallen - beim Lesen wie beim Ausdrucken. Deshalb gestrichelter Rahmen und Warnfarbe statt eines dezenten Hinweises, und deshalb im Druck nicht ausgeblendet. Zum Entfernen: .legal-draft-Block loeschen, .legal-todo durch den echten Wert ersetzen, .legal-todo-hint loeschen. ---------------------------------------------------------------- */ .legal-draft{margin:0 0 2.5rem;padding:1.125rem 1.375rem; border:0.125rem dashed var(--danger);border-radius:0.5rem; color:var(--muted);font-size:0.9375rem;line-height:1.6} .legal-draft strong{display:block;margin-bottom:0.25rem;color:var(--danger)} .legal-draft code{font-family:var(--mono);font-size:0.9375em;color:var(--text)} /* Bewusst ohne Warnsymbol als ::before: Roboto Serif enthaelt kein U+26A0, das Zeichen faellt je nach System auf eine Ersatzschrift oder ein leeres Kaestchen zurueck. Gestrichelter Rahmen, Warnfarbe und der Text im Element selbst sind eindeutig genug. */ .legal-todo{display:inline-block;padding:0.0625rem 0.5rem; border:0.0625rem dashed var(--danger);border-radius:0.25rem; color:var(--danger);font-family:var(--mono);font-size:0.9375em;font-weight:700} /* Hoehere Spezifitaet statt !important - .legal-section p setzt dieselben Eigenschaften. */ .legal-section .legal-todo-hint{margin-top:-0.5rem;color:var(--quiet);font-size:0.875rem} /* Sprungmarke fuer Tastaturnutzer: sichtbar erst bei Fokus. */ .skip-link{position:absolute;left:0.75rem;top:-4rem;z-index:60; padding:0.75rem 1.125rem;border-radius:0.375rem;background:var(--cyan); color:var(--on-cyan);font-size:0.875rem;font-weight:700; transition:top .18s ease} .skip-link:focus-visible{top:0.75rem;outline:0.125rem solid var(--text);outline-offset:0.125rem} @media(max-width:1064px){ .legal{padding:7.5rem 0 4rem} .legal-toc ol{columns:1} } @media(max-width:588px){ .legal{padding:6rem 0 3rem} .legal-toc{padding:1.25rem 1.375rem} .legal-emphasis{padding:1.25rem 1.375rem} .legal-section{margin-bottom:2.5rem} .legal-address{padding:1rem 1.125rem} } /* Papierfassung: Navigation, Schalter und Fusszeilen-Marketing weg, Linkziele ausschreiben. Rechtstexte werden ausgedruckt. */ @media print{ .site-nav,.skip-link,.legal-toc,footer,.theme-toggle,.lang-switch{display:none!important} .legal{padding:0} .legal-wrap{max-width:none} .legal-section{page-break-inside:avoid} .legal-section a[href^="http"]::after{content:" (" attr(href) ")";font-size:.85em;word-break:break-all} } /* Sichtbar nur fuer Screenreader. Ersetzt die bisherige Inline-Positionierung am Formularlabel. */ .sr-only{position:absolute!important;width:0.0625rem;height:0.0625rem; padding:0;margin:-0.0625rem;overflow:hidden;white-space:nowrap; clip:rect(0 0 0 0);clip-path:inset(50%);border:0} /* ================================================================ 9) Sprachumschalter DE / EN .nav-side buendelt Navigation, Sprachschalter und Burger-Button, damit die Leiste weiterhin nur zwei Flex-Kinder hat (Marke links, Rest rechts). .nav-side bleibt bewusst unpositioniert - das Mobil-Panel von .nav-links haengt am fixierten .site-nav. ================================================================ */ .nav-side{display:flex;align-items:center;gap:1.5rem} .lang-switch{display:inline-flex;flex:0 0 auto;align-items:stretch; border:0.0625rem solid var(--line-strong);border-radius:0.375rem; overflow:hidden;background:var(--control-bg)} .lang-btn{display:inline-flex;align-items:center;justify-content:center; min-width:2.5rem;min-height:2.375rem;padding:0 0.5rem;border:0; background:transparent;color:var(--quiet);cursor:pointer; font-family:var(--mono);font-size:0.75rem;line-height:1; letter-spacing:.06em;transition:color .2s ease,background .2s ease} .lang-btn + .lang-btn{border-left:0.0625rem solid var(--line)} .lang-btn:hover{color:var(--text)} .lang-btn[aria-pressed="true"]{background:var(--cyan-soft);color:var(--cyan)} /* Der Rahmen schneidet den Fokusring mit outline-offset ab. */ .lang-btn:focus-visible{outline:0.125rem solid var(--cyan);outline-offset:-0.125rem} @media(max-width:1372px){ /* Der Schalter bleibt neben dem Burger sichtbar - Sprache waehlen soll nicht erst das Oeffnen des Menues voraussetzen. */ .nav-side{gap:0.625rem} } @media(max-width:588px){ .lang-btn{min-width:2.25rem;min-height:2.75rem;font-size:0.6875rem} } @media(hover:none){ .lang-btn:hover{color:var(--quiet)} .lang-btn[aria-pressed="true"]:hover{color:var(--cyan)} } /* ================================================================ 10) Umschalter hell / dunkel Ein Button statt eines Segmentpaars: bei vier Elementen in der Leiste (Marke, Sprache, Theme, Burger) wird es sonst auf 360 px zu eng. Der Zustand steht im aria-label, das mit der Sprache mitwandert. ================================================================ */ .theme-toggle{display:inline-flex;align-items:center;justify-content:center; flex:0 0 auto;width:2.75rem;height:2.75rem;padding:0; border:0.0625rem solid var(--line-strong);border-radius:0.375rem; background:var(--control-bg);color:var(--muted);cursor:pointer; transition:color .2s ease,border-color .2s ease} .theme-toggle:hover{color:var(--text);border-color:var(--cyan-line)} .theme-toggle:focus-visible{outline:0.125rem solid var(--cyan);outline-offset:-0.125rem} .theme-toggle svg{display:block} /* Dunkles Theme zeigt die Sonne (Ziel: hell), helles den Mond. */ .theme-toggle .icon-moon{display:none} [data-theme="light"] .theme-toggle .icon-moon{display:block} [data-theme="light"] .theme-toggle .icon-sun{display:none} @media(max-width:588px){ .theme-toggle{width:2.5rem;height:2.75rem} } @media(hover:none){ .theme-toggle:hover{color:var(--muted);border-color:var(--line-strong)} } /* Beim Wechsel nicht hart umspringen. Bei reduzierter Bewegung greift der globale Transition-Stopp weiter unten. */ body,.site-nav,.bundle,.layer-tab,.email-row input,.theme-toggle,.lang-switch{ transition:background-color .25s ease,border-color .25s ease,color .25s ease}