/* seite.css - alles unterhalb der Falte. Tokens und Reset stehen im kritischen CSS im . */ /* ==================================================== Abschnitte allgemein */ .abschnitt{padding-block:var(--raum-6)} .abschnitt__titel{ font-size:var(--typ-s);font-weight:700; font-variation-settings:'wdth' 118; text-transform:uppercase;letter-spacing:.16em; color:var(--stahl);margin:0 0 var(--raum-4); } .platte .abschnitt__titel{color:var(--stahl-hell)} .fliess{max-width:58ch} .fliess p + p{margin-top:0} /* Trennlinie aus Rasterpunkten. Die Dichte faellt von links nach rechts. */ .trenner{ height:10px;margin-block:var(--raum-4); --punkt:1.5px; background-image:radial-gradient(circle at center,var(--raster-farbe) var(--punkt),transparent calc(var(--punkt) + .5px)); background-size:var(--gitter) 10px; -webkit-mask-image:linear-gradient(to right,#000 8%,transparent 92%); mask-image:linear-gradient(to right,#000 8%,transparent 92%); } /* ==================================================== Platte mit Porträt */ .platte{ background:var(--platte);color:var(--papier); --schrift-farbe:var(--papier); --raster-farbe:var(--stahl-hell); margin-block:var(--raum-6) 0; } .platte__bahn{ max-width:var(--breite);margin-inline:auto; padding:var(--raum-6) var(--rand); display:grid;gap:var(--raum-5);align-items:center; } @media (min-width:52rem){ .platte__bahn{grid-template-columns:minmax(0,.82fr) minmax(0,1fr);gap:var(--raum-6)} } .portraet{ position:relative;margin:0;isolation:isolate; background:var(--platte); max-width:26rem; } .portraet img{ width:100%;display:block; filter:grayscale(1) contrast(1.32) brightness(1.06); } /* Das Punktraster, das im Porträt zum Bild wird. */ .portraet__raster{ position:absolute;inset:0;pointer-events:none; --punkt:.95px; background-image:radial-gradient(circle at center,var(--platte) var(--punkt),transparent calc(var(--punkt) + .55px)); background-size:4px 4px; mix-blend-mode:color-burn; opacity:.62; } /* Leichte Einfaerbung in der Identitaetsfarbe. */ .portraet::after{ content:"";position:absolute;inset:0;pointer-events:none; background:var(--reseda);mix-blend-mode:soft-light;opacity:.34; } /* Ohne Mischmodi bleibt das unbehandelte Foto stehen - das ist der Fallback. */ @supports not (mix-blend-mode:color-burn){ .portraet__raster,.portraet::after{display:none} .portraet img{filter:grayscale(.35) contrast(1.05)} } .platte__text > p:first-of-type{ font-size:var(--typ-l);line-height:1.4; font-family:var(--display);font-weight:400;font-variation-settings:'wdth' 100; } /* ==================================================== Werdegang */ .stationen{list-style:none;margin:0;padding:0} .station{ display:grid;gap:.15rem var(--raum-4); padding-block:var(--raum-3); border-bottom:1px solid color-mix(in srgb,var(--stahl) 35%,transparent); } @supports not (color:color-mix(in srgb,red,blue)){ .station{border-bottom-color:rgba(99,101,95,.35)} } .station:last-child{border-bottom:0} @media (min-width:40rem){ .station{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:baseline} } .station__rolle{ font-family:var(--display);font-weight:600;font-variation-settings:'wdth' 106; font-size:var(--typ-m); } .station__ort{color:var(--stahl);font-size:var(--typ-s)} .gruppe + .gruppe{margin-top:var(--raum-5)} .gruppe__marke{ display:block;font-size:var(--typ-xs);text-transform:uppercase;letter-spacing:.16em; color:var(--reseda);font-weight:500;margin-bottom:var(--raum-2); } /* ==================================================== Schwerpunkte */ .felder{ list-style:none;margin:0;padding:0; display:grid;gap:var(--raum-4); } @media (min-width:40rem){.felder{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--raum-5) var(--raum-6)}} .feld__titel{ font-family:var(--display);font-weight:600;font-variation-settings:'wdth' 108; font-size:var(--typ-m);margin:0 0 var(--raum-1); } .feld p{font-size:var(--typ-s);color:var(--stahl);margin:0} /* ==================================================== Kontakt */ .kontakt{padding-block:var(--raum-6) var(--raum-7)} .kontakt__adresse{ display:inline-block; font-family:var(--display);font-weight:700;font-variation-settings:'wdth' 112; font-size:clamp(1.35rem,.7rem + 3.1vw,3rem); letter-spacing:-.02em;line-height:1.1; text-decoration:none; box-shadow:inset 0 -.08em 0 color-mix(in srgb,var(--stahl) 45%,transparent); transition:box-shadow var(--dauer) var(--kurve),color var(--dauer) var(--kurve); word-break:break-word; } .kontakt__adresse:hover,.kontakt__adresse:focus-visible{ color:var(--signal);box-shadow:inset 0 -.08em 0 var(--signal); } /* ==================================================== Fußzeile */ .fusszeile{margin-top:var(--raum-6)} .fusszeile__raster{ height:56px; --punkt:1.8px; background-image:radial-gradient(circle at center,var(--raster-farbe) var(--punkt),transparent calc(var(--punkt) + .5px)); background-size:var(--gitter) var(--gitter); -webkit-mask-image:linear-gradient(to bottom,transparent,#000); mask-image:linear-gradient(to bottom,transparent,#000); } .fusszeile__zeile{ max-width:var(--breite);margin-inline:auto; padding:var(--raum-3) var(--rand) var(--raum-5); display:flex;flex-wrap:wrap;gap:var(--raum-3);justify-content:space-between; font-size:var(--typ-xs);color:var(--stahl); } .fusszeile__zeile a{text-decoration-color:color-mix(in srgb,var(--stahl) 50%,transparent)} /* ==================================================== Rechtstexte */ .rechtstext{max-width:62ch;padding-block:var(--raum-5) var(--raum-6)} .rechtstext h1{font-size:var(--typ-xl);margin-bottom:var(--raum-4)} .rechtstext h2{font-size:var(--typ-m);text-transform:uppercase;letter-spacing:.1em; font-variation-settings:'wdth' 112;margin:var(--raum-5) 0 var(--raum-2)} .rechtstext p,.rechtstext li{font-size:var(--typ-s)} /* ==================================================== Bewegung */ /* Ein einziger orchestrierter Moment: Das Raster loest sich ins Porträt auf. */ @keyframes portraet-aufloesen{ from{--punkt:2.5px;opacity:.94} to {--punkt:.95px;opacity:.62} } .portraet__raster{animation:portraet-aufloesen 1000ms var(--kurve) 150ms both} /* Umgebungssystem: Beim Scrollen aendert sich die Dichte der Trennlinien. */ @keyframes dichte-fallen{ from{--punkt:2.2px} to {--punkt:.8px} } @supports (animation-timeline:view()){ .trenner{ animation:dichte-fallen linear both; animation-timeline:view(); animation-range:entry 10% cover 45%; } } @media (prefers-reduced-motion:reduce){ .portraet__raster{animation:none;--punkt:.95px;opacity:.62} .trenner{animation:none} *,*::before,*::after{transition-duration:1ms !important;animation-duration:1ms !important;animation-iteration-count:1 !important} } /* ==================================================== Sonderdarstellungen */ @media (forced-colors:active){ .hero__raster,.fusszeile__raster,.trenner,.portraet__raster{display:none} .portraet::after{display:none} .portraet img{filter:none} .platte{background:Canvas;color:CanvasText;border-block:1px solid CanvasText} .kontakt__adresse{box-shadow:none;text-decoration:underline} } @media print{ .kopfzeile,.nav,.hero__raster,.fusszeile__raster,.trenner,.sprungmarke{display:none} body{background:#fff;color:#000;font-size:11pt} .platte{background:#fff;color:#000;--schrift-farbe:#000} .portraet__raster,.portraet::after{display:none} .portraet img{filter:grayscale(1)} .abschnitt{padding-block:1.2rem;break-inside:avoid} }