@font-face {
font-family: "Instrument Sans";
src: url("../fonts/instrument-sans-var.woff2") format("woff2");
font-weight: 400 700;
font-stretch: 75% 100%;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00B1, U+00B4-00B8, U+00BA-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: "Instrument Sans";
src: url("../fonts/instrument-sans-var-ext.woff2") format("woff2");
font-weight: 400 700;
font-stretch: 75% 100%;
font-style: normal;
font-display: swap;
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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;
}
@font-face {
font-family: "Instrument Sans";
src: url("../fonts/instrument-sans-var-italic.woff2") format("woff2");
font-weight: 400 700;
font-stretch: 75% 100%;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Instrument Sans";
src: url("../fonts/hochzahlen.woff2") format("woff2");
font-weight: 400 700;
font-display: swap;
unicode-range: U+00B2-00B3, U+00B9;
}
:root {
color-scheme: dark;
--nacht: #0d0f10;
--nacht-2: #141719;
--nacht-3: #1c2023;
--nacht-4: #262b2e;
--licht: #f2f0eb;
--licht-2: #d2cfc8;
--nebel: #959c9f;
--linie: rgba(242, 240, 235, .13);
--linie-stark: rgba(242, 240, 235, .3);
--papier: #ecebe6;
--tinte: #16191b;
--gruen: #188859;
--gruen-hell: #45c08b;
--gruen-tief: #11653f;
--fehler: #f07a74;
--sans: "Instrument Sans", "Helvetica Neue", Arial, system-ui, sans-serif;
--max: 1720px;
--rand: clamp(1.15rem, 4vw, 4.75rem);
--innen: max(var(--rand), calc((100% - var(--max)) / 2));
--spalt: clamp(1rem, 2.2vw, 2.25rem);
--abstand-xl: clamp(7rem, 15vw, 14rem);
--abstand-l: clamp(5rem, 10vw, 9.5rem);
--abstand-m: clamp(2.75rem, 5.5vw, 5rem);
--kopf-hoehe: 5rem;
--ease-zeichnen: cubic-bezier(.55, .08, .3, 1);
--ease-raus: cubic-bezier(.16, 1, .3, 1);
--ease-sanft: cubic-bezier(.4, 0, .2, 1);
--ease-fluss: cubic-bezier(.77, 0, .18, 1);
--korn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .95 0 0 0 0 .94 0 0 0 0 .92 0 0 0 .035 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E");
--korn-hell: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .11 0 0 0 0 .1 0 0 0 .055 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E");
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--kopf-hoehe) + 1rem); background: var(--nacht); }
body {
margin: 0;
min-height: 100vh;
background: var(--nacht) var(--korn);
color: var(--licht-2);
font-family: var(--sans);
font-size: 1.0625rem;
font-weight: 400;
line-height: 1.65;
font-kerning: normal;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img, svg, video { max-width: 100%; }
img { height: auto; display: block; }
picture { display: block; }
h1, h2, h3, h4 { margin: 0; color: var(--licht); font-weight: 450; line-height: 1.1; text-wrap: balance; }
p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; }
figure { margin: 0; }
address { font-style: normal; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }
button { font: inherit; color: inherit; }
main { display: block; }
main:focus { outline: none; }
strong { color: var(--licht); font-weight: 600; }
::selection { background: var(--gruen); color: #fff; }
:focus-visible { outline: 2px solid var(--gruen-hell); outline-offset: 3px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: var(--rand); top: -5rem; z-index: 200; background: var(--licht); color: var(--nacht); padding: .8rem 1.1rem; text-decoration: none; }
.skip:focus { top: .75rem; }
.etikett, .krumen ol, .bildtext, .karte__meta, .beitragskarte__meta, .schritt__team, .phase__nr, .seitenkopf__meta,
.filter button, .ansicht button, .fuss__spalte h2, .naechstes__label, .kote__text, .auftakt__massstab,
.fragenhub__inhaltstitel, .stellenzeile__meta, .ort__zahl, .galerieabschnitt__zahl, .plankopf dt, .plankopf__titel, .plankopf__fuss,
.abschnittkopf__marke, .bauaufgabenleiste__titel, .fuss__unten, .lichtkasten__zahl {
font-size: .75rem;
font-weight: 500;
line-height: 1.5;
letter-spacing: .14em;
text-transform: uppercase;
}
.t-mega, .t-1, .t-2 { font-weight: 450; --ls: -.035em; letter-spacing: var(--ls); }
.t-1 { font-size: clamp(2.8rem, 7.6vw, 8.6rem); line-height: .93; }
.t-2 { font-size: clamp(2.1rem, 4.6vw, 5rem); line-height: .98; }
.t-3 { font-size: clamp(1.45rem, 2.2vw, 2.1rem); line-height: 1.12; font-weight: 450; letter-spacing: -.02em; }
.t-4 { font-size: 1.1875rem; line-height: 1.3; font-weight: 500; letter-spacing: -.005em; }
h1, h2, h3, .t-1, .t-2 { hyphens: manual; overflow-wrap: break-word; }
.seitenkopf__titel, .t-1, .t-2, .einladung__titel, .projektbuehne__titel, .kapitel__titel, .leistungszeile__titel, .naechstes__titel {
container-type: inline-size;
-webkit-hyphens: none;
hyphens: none;
overflow-wrap: normal;
text-wrap: balance;
}
.titel { display: block; font-size: min(1em, 100cqi / var(--wort, .01)); letter-spacing: var(--ls); }
@supports not (width: 1cqi) { .titel { overflow-wrap: break-word; } }
.lede { font-size: clamp(1.28rem, 1.85vw, 1.72rem); line-height: 1.4; font-weight: 400; color: var(--licht); max-width: 34em; letter-spacing: -.01em; }
.klein { font-size: .9375rem; line-height: 1.55; color: var(--nebel); }
.bildtext { margin-top: .9rem; color: var(--nebel); }
.prose { font-size: 1.125rem; line-height: 1.72; max-width: 40em; color: var(--licht-2); }
.prose h2 { font-size: clamp(1.55rem, 2.3vw, 2.15rem); font-weight: 450; letter-spacing: -.02em; margin: 2.2em 0 .8em; line-height: 1.15; }
.prose h3 { font-size: 1.25rem; font-weight: 500; line-height: 1.3; margin: 1.8em 0 .6em; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose p, .prose ul, .prose ol { margin: 0 0 1.1em; }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose li { margin-bottom: .4em; }
.prose li::marker { color: var(--nebel); }
.prose a:not(.knopf) { color: var(--gruen-hell); text-decoration-color: rgba(69, 192, 139, .45); }
.prose a:not(.knopf):hover { text-decoration-color: currentColor; }
.prose table { width: 100%; border-collapse: collapse; font-size: 1rem; margin: 1.6em 0; }
.prose th, .prose td { text-align: left; padding: .7rem .8rem .7rem 0; border-bottom: 1px solid var(--linie); vertical-align: top; hyphens: auto; overflow-wrap: break-word; }
.prose th { color: var(--licht); font-weight: 500; }
@media (max-width: 30rem) {
.prose table { font-size: .875rem; }
.prose th, .prose td { padding-right: .55rem; }
}
.prose mark, .prose .todo { background: #ffe58f; color: var(--tinte); padding: 0 .2em; }
.prose blockquote { margin: 1.6em 0; padding-left: 1.25em; border-left: 1px solid var(--gruen-hell); color: var(--licht); font-size: 1.2em; line-height: 1.5; }
.textlink {
display: inline-flex;
align-items: center;
gap: .9rem;
color: var(--licht);
text-decoration: none;
font-size: .75rem;
font-weight: 500;
letter-spacing: .14em;
text-transform: uppercase;
padding: .55rem 0;
}
.textlink::before { content: ""; flex: none; width: 2.25rem; height: 1px; background: currentColor; transition: width .55s var(--ease-raus), background-color .3s; }
.textlink:hover::before, .textlink:focus-visible::before { width: 3.75rem; background: var(--gruen-hell); }
.knopfreihe { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0; }
.knopf {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: .7rem;
min-height: 3.25rem;
padding: .95rem 1.7rem;
border: 1px solid var(--licht);
border-radius: 999px;
background: var(--licht);
color: var(--nacht);
font-size: .75rem;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
line-height: 1.2;
text-decoration: none;
cursor: pointer;
overflow: hidden;
isolation: isolate;
transition: color .35s var(--ease-sanft), border-color .35s var(--ease-sanft);
}
.knopf::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--gruen); transform: translateY(101%); transition: transform .5s var(--ease-raus); border-radius: inherit; }
.knopf:hover { color: #fff; border-color: var(--gruen); }
.knopf:hover::after { transform: none; }
.knopf--rahmen, .knopf--rahmen-hell { background: transparent; color: var(--licht); border-color: var(--linie-stark); }
.knopf--hell { background: var(--licht); color: var(--nacht); }
.knopf[disabled] { opacity: .55; cursor: progress; }
.abschnitt { padding: var(--abstand-l) var(--innen); }
.abschnitt--folgt { padding-top: clamp(2rem, 4vw, 3.5rem); }
.papier2 { background: var(--nacht-2); }
.raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalt); }
.abschnittkopf { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalt); row-gap: 1.4rem; align-items: end; margin-bottom: clamp(2.75rem, 5.5vw, 5rem); }
.abschnittkopf > h2 { grid-column: 1 / span 8; }
.abschnittkopf__text { grid-column: 1 / span 6; margin: 0; color: var(--nebel); font-size: 1.125rem; max-width: 34em; }
.abschnittkopf__link { grid-column: 9 / -1; grid-row: 1; justify-self: end; }
@media (max-width: 56rem) {
.abschnittkopf > h2, .abschnittkopf__text { grid-column: 1 / -1; }
.abschnittkopf__link { grid-column: 1 / -1; grid-row: auto; justify-self: start; }
}
.bezugslinie { position: relative; height: 1px; background: currentColor; transform-origin: left center; }
.bezugslinie__kote { position: absolute; left: 0; bottom: .6rem; padding-left: 1.15rem; font-size: .75rem; letter-spacing: .1em; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bezugslinie__kote::before { content: ""; position: absolute; left: 0; bottom: -.6rem; border-left: .36rem solid transparent; border-right: .36rem solid transparent; border-top: .6rem solid currentColor; }
.zeile { display: block; clip-path: inset(-.2em -.6em -.26em -.6em); }
.zeile__text { display: block; }
.js .zeilen-geteilt .zeile__text { transform: translateY(calc(100% + .6em)); transition: transform 1.25s var(--ease-raus); transition-delay: calc(var(--i, 0) * 90ms); }
.js .zeilen-geteilt.ist-sichtbar .zeile__text { transform: none; }
@media (prefers-reduced-motion: no-preference) {
.js .seitenkopf__titel:not(.zeilen-geteilt):not(.zeilen-fertig), .js .projektbuehne__titel:not(.zeilen-geteilt):not(.zeilen-fertig) { opacity: 0; animation: notfall-sichtbar 0s linear 2.5s forwards; }
.lader-start .seitenkopf__titel:not(.zeilen-geteilt), .lader-wechsel .seitenkopf__titel:not(.zeilen-geteilt),
.lader-wechsel .projektbuehne__titel:not(.zeilen-geteilt) { opacity: 1; animation: none; }
}
@keyframes notfall-sichtbar { to { opacity: 1; } }
.wort { transition: opacity .3s linear; }
.js .enthuellen > * { overflow: hidden; clip-path: inset(100% 0 0 0); transition: clip-path 1.4s var(--ease-fluss); }
.js .enthuellen > * img { transform: scale(1.18); transition: transform 2.2s var(--ease-raus); }
.js .enthuellen.ist-sichtbar > * { clip-path: inset(0 0 0 0); }
.js .enthuellen.ist-sichtbar > * img { transform: none; }
.ohne-uebergang, .ohne-uebergang * { transition: none !important; }
.js .enthuellen { background-color: transparent; }
.js .mitglied__bild.enthuellen img { transform: scale(var(--z, 1)); }
.js .linienliste .linie-zieht { border-top-color: transparent; background-image: linear-gradient(var(--linie), var(--linie)); background-repeat: no-repeat; background-origin: border-box; background-position: 0 0; background-size: 0 1px; }
.js .linienliste.ist-sichtbar .linie-zieht { background-size: 100% 1px; transition: background-size 1.3s var(--ease-zeichnen); transition-delay: calc(var(--i, 0) * 90ms); }
.zeiger { position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none; display: none; }
.mit-zeiger .zeiger { display: block; }
.zeiger span { display: block; transform: translate(-50%, -150%) scale(0); background: var(--licht); color: var(--nacht); font-size: .6875rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; padding: .6rem .95rem; border-radius: 999px; white-space: nowrap; transition: transform .45s var(--ease-raus); }
.zeiger.ist-an span { transform: translate(-50%, -150%) scale(1); }
.kopf {
position: fixed;
inset: 0 0 auto 0;
z-index: 60;
height: var(--kopf-hoehe);
display: flex;
align-items: center;
gap: 2rem;
padding-inline: var(--innen);
color: var(--licht);
}
.kopf::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: var(--nacht);
border-bottom: 1px solid var(--linie);
opacity: 0;
transition: opacity .45s var(--ease-sanft);
}
.kopf.ist-gescrollt::before { opacity: 1; }
.marke { display: block; color: inherit; flex: none; }
.marke svg { display: block; height: 1.1rem; width: auto; overflow: visible; }
.marke .marke__gruen { fill: var(--gruen-hell); transition: fill .35s var(--ease-sanft); }
.js .kopf-hell .kopf:not(.ist-gescrollt) .marke__gruen { fill: currentColor; }
.nav { --nav-abstand: clamp(1.25rem, 6.4vw - 3.6rem, 2.75rem); margin-left: auto; display: flex; align-items: center; gap: var(--nav-abstand); }
.nav__liste { display: flex; gap: clamp(1.1rem, 5.7vw - 3.2rem, 2.3rem); list-style: none; }
.nav__liste a { position: relative; display: inline-block; text-decoration: none; font-size: .75rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; padding-block: .6rem; white-space: nowrap; }
.nav__liste a::after { content: ""; position: absolute; left: 0; right: 0; bottom: .3rem; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right center; transition: transform .5s var(--ease-raus); }
.nav__liste a:hover::after, .nav__liste a[aria-current]::after, .nav__liste a.ist-bereich::after { transform: scaleX(1); transform-origin: left center; }
.nav__punkt { position: relative; display: flex; align-items: center; }
.nav__aufklapper { display: inline-grid; place-items: center; width: 1.5rem; height: 2.25rem; margin: 0 -.35rem 0 .1rem; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
.nav__aufklapper::before { content: ""; width: .36rem; height: .36rem; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateY(-22%) rotate(45deg); transition: transform .35s var(--ease-raus); }
.untermenue { list-style: none; margin: 0; padding: 0; }
@media (min-width: 75.0625rem) {
.untermenue {
position: fixed;
z-index: -1;
top: 0;
left: 0;
right: 0;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
column-gap: var(--spalt);
padding: calc(var(--kopf-hoehe) + 1.5rem) var(--innen) 2.25rem;
background: rgba(13, 15, 16, .72);
-webkit-backdrop-filter: blur(24px) saturate(140%) brightness(.3);
backdrop-filter: blur(24px) saturate(140%) brightness(.3);
border-bottom: 1px solid var(--linie);
visibility: hidden;
clip-path: inset(0 0 100% 0);
transition: clip-path .4s var(--ease-fluss) .18s, visibility 0s linear .58s;
}
.hat-unter:hover > .untermenue, .hat-unter.ist-offen > .untermenue, .no-js .hat-unter:focus-within > .untermenue {
visibility: visible;
clip-path: inset(0 0 0 0);
transition: clip-path .5s var(--ease-raus), visibility 0s;
}
.hat-unter.ist-zu:not(.ist-offen) > .untermenue { visibility: hidden; clip-path: inset(0 0 100% 0); transition: clip-path .3s var(--ease-fluss), visibility 0s linear .3s; }
.hat-unter:hover::after, .hat-unter.ist-offen::after { content: ""; position: absolute; left: -1rem; right: -1rem; top: 100%; height: calc(var(--kopf-hoehe) / 2 - 50% + 1.5rem); }
.hat-unter:hover > a::after, .hat-unter.ist-offen > a::after { transform: scaleX(1); transform-origin: left center; }
.hat-unter:hover > .nav__aufklapper::before, .hat-unter.ist-offen > .nav__aufklapper::before { transform: translateY(18%) rotate(225deg); }
.hat-unter.ist-zu:not(.ist-offen) > .nav__aufklapper::before { transform: translateY(-22%) rotate(45deg); }
.nav__liste .untermenue li { min-width: 0; }
.nav__liste .untermenue a {
display: grid;
gap: .55rem;
align-content: start;
height: 100%;
padding: 1.15rem 1rem .25rem 0;
font-size: 1rem;
font-weight: 400;
letter-spacing: 0;
text-transform: none;
white-space: normal;
color: var(--licht);
}
.nav__liste .untermenue a::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--linie-stark); }
.nav__liste .untermenue a::after { top: 0; bottom: auto; height: 2px; background: var(--gruen-hell); transform: scaleX(0); transform-origin: left center; transition: transform .75s var(--ease-zeichnen); }
.nav__liste .untermenue a:hover::after, .nav__liste .untermenue a:focus-visible::after,
.nav__liste .untermenue a[aria-current]::after, .nav__liste .untermenue a.ist-bereich::after { transform: scaleX(1); }
.nav__liste .untermenue a:focus-visible { outline-offset: 6px; }
.untermenue__titel { font-size: clamp(1.4rem, 1.15rem + .6vw, 1.85rem); font-weight: 450; line-height: 1.1; letter-spacing: -.02em; text-wrap: balance; }
.untermenue__text { font-size: .875rem; line-height: 1.45; color: var(--nebel); transition: color .3s; }
.nav__liste .untermenue a:hover .untermenue__text, .nav__liste .untermenue a:focus-visible .untermenue__text,
.nav__liste .untermenue a[aria-current] .untermenue__text, .nav__liste .untermenue a.ist-bereich .untermenue__text { color: var(--licht-2); }
.hat-unter:hover > .untermenue li, .hat-unter.ist-offen > .untermenue li { animation: band-ein .7s var(--ease-raus) .08s both; }
.hat-unter:hover > .untermenue li:nth-child(2), .hat-unter.ist-offen > .untermenue li:nth-child(2) { animation-delay: .13s; }
.hat-unter:hover > .untermenue li:nth-child(3), .hat-unter.ist-offen > .untermenue li:nth-child(3) { animation-delay: .18s; }
.hat-unter:hover > .untermenue li:nth-child(4), .hat-unter.ist-offen > .untermenue li:nth-child(4) { animation-delay: .23s; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.untermenue { background: rgba(13, 15, 16, .97); }
}
@media (prefers-reduced-transparency: reduce) {
.untermenue { background: var(--nacht); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
}
@keyframes band-ein { from { opacity: 0; transform: translateY(.75rem); } }
.nav__kontakt { position: relative; display: inline-flex; align-items: center; min-height: 2.6rem; padding: .55rem 1.2rem; border: 1px solid var(--linie-stark); border-radius: 999px; text-decoration: none; font-size: .75rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; transition: background-color .3s, color .3s, border-color .3s; }
.nav__kontakt:hover, .nav__kontakt[aria-current] { background: var(--licht); border-color: var(--licht); color: var(--nacht); }
.sprachen { display: flex; align-items: center; list-style: none; margin: 0 -.4rem 0 calc(-.5 * var(--nav-abstand)); padding: 0; }
.sprachen__wahl { position: relative; display: inline-flex; align-items: center; min-height: 2.6rem; padding: 0 .4rem; font-size: .75rem; font-weight: 500; letter-spacing: .14em; line-height: 1; text-decoration: none; color: inherit; white-space: nowrap; }
.sprachen__wahl::after { content: ""; position: absolute; left: .4rem; right: calc(.4rem + .14em); bottom: .7rem; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right center; transition: transform .5s var(--ease-raus); }
a.sprachen__wahl:hover::after, a.sprachen__wahl:focus-visible::after, .sprachen__wahl[aria-current]::after { transform: scaleX(1); transform-origin: left center; }
@media (min-width: 75.0625rem) {
.sprachen__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.nav__direkt { display: none; }
.menueknopf { display: none; }
@media (max-width: 75rem) {
.menueknopf {
display: inline-flex;
align-items: center;
gap: .85rem;
margin-left: auto;
min-height: 2.75rem;
padding: .5rem 0 .5rem .75rem;
border: 0;
background: none;
cursor: pointer;
font-size: .75rem;
font-weight: 600;
letter-spacing: .16em;
text-transform: uppercase;
}
.menueknopf__striche { position: relative; width: 1.7rem; height: .65rem; }
.menueknopf__striche::before, .menueknopf__striche::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: currentColor; transition: transform .45s var(--ease-raus), top .45s var(--ease-raus); }
.menueknopf__striche::before { top: 0; }
.menueknopf__striche::after { top: calc(100% - 1px); }
.menue-offen .menueknopf__striche::before { top: 50%; transform: rotate(35deg) scaleX(.8); }
.menue-offen .menueknopf__striche::after { top: 50%; transform: rotate(-35deg) scaleX(.8); }
.nav {
position: fixed;
inset: 0;
z-index: -1;
margin: 0;
padding: calc(var(--kopf-hoehe) + 1.5rem) var(--rand) 2rem;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0;
overflow-y: auto;
background: var(--nacht) var(--korn);
color: var(--licht);
visibility: hidden;
clip-path: inset(0 0 100% 0);
transition: clip-path .75s var(--ease-fluss), visibility 0s linear .75s;
}
.menue-offen .nav { visibility: visible; clip-path: inset(0 0 0 0); transition: clip-path .75s var(--ease-fluss), visibility 0s; }
.menue-offen .kopf::before { opacity: 0; }
.nav__liste { flex-direction: column; gap: 0; border-top: 1px solid var(--linie); }
.nav__liste li { border-bottom: 1px solid var(--linie); overflow: hidden; }
.nav__liste a { display: block; padding: .45rem 0; font-size: clamp(2rem, 9vw, 3.4rem); font-weight: 450; letter-spacing: -.03em; text-transform: none; }
.nav__liste a::after { bottom: .55rem; right: auto; width: 2.5rem; }
.nav__punkt { display: block; }
.nav__aufklapper { display: none; }
.untermenue { display: flex; flex-wrap: wrap; gap: 0 1.4rem; margin: -.3rem 0 .9rem; }
.nav__liste .untermenue li { border: 0; }
.nav__liste .untermenue a { padding: .3rem 0; font-size: 1.0625rem; letter-spacing: 0; color: var(--nebel); }
.untermenue__text { display: none; }
.nav__liste .untermenue a[aria-current], .nav__liste .untermenue a.ist-bereich { color: var(--licht); }
.nav__liste .untermenue a::after { bottom: .2rem; right: 0; width: auto; }
.nav__kontakt { align-self: flex-start; margin-top: 1.75rem; padding: .85rem 1.4rem; }
.sprachen { margin: 1.25rem 0 0 -.6rem; flex-wrap: wrap; }
.sprachen__wahl { min-height: 2.75rem; padding: 0 .6rem; font-size: 1rem; letter-spacing: 0; color: var(--nebel); transition: color .3s; }
.sprachen__wahl[aria-current], a.sprachen__wahl:hover { color: var(--licht); }
.sprachen__wahl::after { left: .6rem; right: .6rem; bottom: .6rem; }
.sprachen__kurz { display: none; }
.nav__direkt { display: block; margin-top: auto; padding-top: 2.5rem; font-size: .9375rem; color: var(--nebel); }
.nav__direkt p { margin: 0 0 .75rem; }
.nav__direkt a { color: var(--licht); }
.menue-offen .nav__liste a { animation: menue-ein .8s var(--ease-raus) both; }
.menue-offen .nav__liste li:nth-child(2) a { animation-delay: .05s; }
.menue-offen .nav__liste li:nth-child(3) a { animation-delay: .1s; }
.menue-offen .nav__liste li:nth-child(4) a { animation-delay: .15s; }
.menue-offen .nav__liste li:nth-child(5) a { animation-delay: .2s; }
.menue-offen .nav__liste li:nth-child(6) a { animation-delay: .25s; }
.menue-offen .nav__liste li:nth-child(7) a { animation-delay: .3s; }
.menue-offen .nav__liste .untermenue li a { animation-delay: .1s; }
}
@keyframes menue-ein { from { transform: translateY(105%); } }
@media (max-width: 75rem) {
.menue-offen .menueknopf__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 24rem) {
.kopf { gap: 1rem; }
.menueknopf__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.no-js .menueknopf { display: none; }
.no-js .kopf::before { opacity: 1; }
@media (max-width: 75rem) {
.no-js .kopf { position: static; height: auto; flex-wrap: wrap; padding-block: 1rem; }
.no-js .nav { position: static; visibility: visible; clip-path: none; z-index: auto; padding: 1rem 0 0; background: none; width: 100%; }
.no-js .nav__liste a { font-size: 1.25rem; }
.no-js .nav__direkt { display: none; }
}
.bau { position: relative; overflow: hidden; background: var(--nacht-3); container-type: size; }
.bau__box {
position: absolute;
width: max(100cqw, 100cqh * var(--r));
height: max(100cqh, 100cqw / var(--r));
left: calc((100cqw - max(100cqw, 100cqh * var(--r))) * var(--fx));
top: calc((100cqh - max(100cqh, 100cqw / var(--r))) * var(--fy));
}
.bau__bild, .bau__bild img { display: block; width: 100%; height: 100%; }
@media (max-aspect-ratio: 11/20) {
.bau--hoch .bau__bild img, .bau--hoch .bau__grauton { position: absolute; top: 0; left: calc(var(--hx) * 100%); width: calc(var(--hw) * 100%); height: 100%; }
}
.bau__bild img { object-fit: cover; transition: transform 1.4s var(--ease-raus), filter .7s var(--ease-sanft), opacity .7s var(--ease-sanft); }
.bau__papier { position: absolute; inset: -1px; background: var(--nacht-2) var(--korn); opacity: 0; pointer-events: none; }
.bau__linien {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
fill: none;
stroke: var(--strichfarbe, var(--licht));
stroke-linecap: butt;
pointer-events: none;
opacity: 0;
overflow: visible;
--w: 1.2;
}
.bau__linien path { stroke-dasharray: 1 2; stroke-dashoffset: 0; }
.bau__linien .z0 { stroke-width: calc(var(--w) * var(--skala, 1.6)); }
.bau__linien .z1 { stroke-width: calc(var(--w) * .78 * var(--skala, 1.6)); opacity: .8; }
.bau__linien .z2 { stroke-width: calc(var(--w) * .6 * var(--skala, 1.6)); opacity: .55; }
@supports not (width: 1cqw) {
.bau__box { inset: 0; width: auto; height: auto; }
.bau__papier, .bau__linien { display: none !important; }
}
.js [data-bau="karte"]:not(.ist-fertig) .bau__papier,
.mit-auftakt [data-bau="buehne"] .bau__papier { opacity: 1; }
.js [data-bau].ist-zeichnend .bau__papier { opacity: 1; }
.js [data-bau].ist-zeichnend .bau__linien { opacity: 1; }
.js [data-bau].ist-entwickelt .bau__papier { opacity: 0; transition: opacity 1.2s var(--ease-sanft); }
.js [data-bau].ist-entwickelt .bau__linien { opacity: 0; transition: opacity 1.5s var(--ease-sanft) .5s; }
.bau__grauton { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(.95) brightness(.72); pointer-events: none; will-change: opacity; }
.js [data-bau].ist-entwickelt .bau__grauton { opacity: 0; transition: opacity 1.9s var(--ease-sanft) .15s; }
@media (hover: hover) and (pointer: fine) {
.js .karte:hover .bau.ist-fertig .bau__bild img,
.js .naechstes__link:hover .bau.ist-fertig .bau__bild img { filter: brightness(.45) saturate(.75); transform: scale(1.04); }
.js .karte:hover .bau.ist-fertig .bau__linien,
.js .naechstes__link:hover .bau.ist-fertig .bau__linien { opacity: 1; transition: opacity .2s; }
}
.auftakt { display: none; }
.mit-auftakt .auftakt { display: block; position: fixed; inset: 0; z-index: 55; pointer-events: none; }
.auftakt__papier { position: absolute; inset: 0; background: var(--nacht-2) var(--korn); }
.hat-bauhero .auftakt__papier { display: none; }
.auftakt__massstab { position: absolute; left: var(--innen); bottom: clamp(1.25rem, 3.5vh, 2.25rem); margin: 0; display: flex; gap: .9rem; align-items: baseline; color: var(--nebel); font-variant-numeric: tabular-nums; }
.auftakt__wert { color: var(--licht); min-width: 3.6em; }
.mit-auftakt .auftakt { animation: auftakt-notfall .5s ease 7s forwards; }
.mit-auftakt.auftakt-hebt .auftakt__papier { transform: translateY(-100%); transition: transform 1.1s var(--ease-fluss); }
.mit-auftakt.auftakt-hebt .auftakt__massstab { opacity: 0; transition: opacity .4s; }
.auftakt-fertig .auftakt { display: none; }
@keyframes auftakt-notfall { to { opacity: 0; visibility: hidden; } }
.lader-start body:not(.hat-bauhero) .auftakt { display: none; }
.lader-start:not(.lader-sofort) .nav, .lader-start:not(.lader-sofort) .menueknopf { animation: nav-ein .6s var(--ease-sanft) calc(var(--l-auf) + .3s) both; }
@keyframes nav-ein { from { opacity: 0; } }
.menue-offen .nav, .menue-offen .menueknopf { opacity: 1 !important; transition-property: clip-path, visibility !important; }
@keyframes linie-zeichnen { to { stroke-dashoffset: 0; } }
@keyframes einblenden { to { opacity: 1; } }
:root {
--l-linie: .15s;
--l-linie-dauer: .55s;
--l-wort1: .5s;
--l-wort2: .64s;
--l-wisch1: .45s;
--l-wisch2: .55s;
--l-auf: 1.4s;
--l-auf-dauer: .9s;
--l-flug-dauer: .85s;
--l-fertig: calc(var(--l-auf) + var(--l-flug-dauer));
--l-ende: calc(var(--l-auf) + var(--l-auf-dauer));
--marke-h: 1.1rem;
--marke-b: calc(var(--marke-h) * 508 / 42);
}
html.lader-wechsel { --l-linie: .05s; --l-linie-dauer: .42s; --l-wort1: .28s; --l-wort2: .38s; --l-wisch1: .4s; --l-wisch2: .45s; --l-auf: .95s; --l-auf-dauer: .8s; --l-flug-dauer: .75s; }
html.lader-vt { --l-linie: .3s; --l-wort1: .52s; --l-wort2: .62s; --l-auf: 1.2s; }
html.lader-pause *, html.lader-pause *::before, html.lader-pause *::after { animation-play-state: paused !important; }
.lader { display: none; }
@media (prefers-reduced-motion: no-preference) {
.lader-start .lader, .lader-wechsel .lader {
display: block;
position: fixed;
inset: 0;
z-index: 200;
container-type: size;
pointer-events: none;
animation: lader-weg 0s linear var(--l-ende) forwards;
}
.lader__halb { position: absolute; left: 0; right: 0; height: calc(50% + 1px); background: var(--nacht) var(--korn); pointer-events: auto; }
.lader__halb--oben { top: 0; }
.lader__halb--unten { bottom: 0; }
.lader__halb::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--linie-stark); opacity: 0; }
.lader__halb--oben::after { bottom: 0; }
.lader__halb--unten::after { top: 0; }
.lader-start .lader__halb::after, .lader-wechsel .lader__halb::after { animation: einblenden .2s linear var(--l-auf) forwards; }
.lader-vt .lader__halb::after { animation: kante-zu .36s linear both, einblenden .2s linear var(--l-auf) forwards; }
.lader-start .lader__halb--oben, .lader-wechsel .lader__halb--oben { animation: lader-auf-oben var(--l-auf-dauer) var(--ease-fluss) var(--l-auf) forwards; }
.lader-start .lader__halb--unten, .lader-wechsel .lader__halb--unten { animation: lader-auf-unten var(--l-auf-dauer) var(--ease-fluss) var(--l-auf) forwards; }
.lader-vt .lader__halb--oben { animation: lader-zu-oben .36s var(--ease-fluss) both, lader-auf-oben var(--l-auf-dauer) var(--ease-fluss) var(--l-auf) forwards; }
.lader-vt .lader__halb--unten { animation: lader-zu-unten .36s var(--ease-fluss) both, lader-auf-unten var(--l-auf-dauer) var(--ease-fluss) var(--l-auf) forwards; }
.lader__marke {
--ls: 1.15;
position: absolute;
left: var(--innen);
top: calc((var(--kopf-hoehe) - var(--marke-h)) / 2);
color: var(--licht);
transform-origin: 0 0;
transform:
translate(calc(50vw - var(--ls) * var(--marke-b) / 2 - max(var(--rand), calc((100vw - var(--max)) / 2))),
calc(50vh - var(--ls) * var(--marke-h) / 2 - (var(--kopf-hoehe) - var(--marke-h)) / 2))
scale(var(--ls));
}
@supports (width: 1cqw) {
.lader__marke {
transform:
translate(calc(50cqw - var(--ls) * var(--marke-b) / 2 - max(var(--rand), calc((100cqw - var(--max)) / 2))),
calc(50cqh - var(--ls) * var(--marke-h) / 2 - (var(--kopf-hoehe) - var(--marke-h)) / 2))
scale(var(--ls));
}
}
.lader__marke svg { display: block; height: var(--marke-h); width: auto; overflow: visible; }
.lader .marke__linie { stroke-dasharray: 1 2; stroke-dashoffset: 1; }
.lader .marke__gruen { fill: var(--gruen-hell); }
.lader .marke__gruen, .lader .marke__wort { clip-path: inset(-25% 102% -25% -2%); }
.lader-start .lader .marke__linie, .lader-wechsel .lader .marke__linie { animation: linie-zeichnen var(--l-linie-dauer) var(--ease-zeichnen) var(--l-linie) forwards; }
.lader-start .lader .marke__gruen, .lader-wechsel .lader .marke__gruen { animation: lader-wisch var(--l-wisch1) var(--ease-raus) var(--l-wort1) forwards; }
.lader-start .lader .marke__wort, .lader-wechsel .lader .marke__wort { animation: lader-wisch var(--l-wisch2) var(--ease-raus) var(--l-wort2) forwards; }
.lader-start .kopf-hell:has(> .kopf:not(.ist-gescrollt)) .lader .marke__gruen,
.lader-wechsel .kopf-hell:has(> .kopf:not(.ist-gescrollt)) .lader .marke__gruen { animation: lader-wisch var(--l-wisch1) var(--ease-raus) var(--l-wort1) forwards, lader-hell .5s var(--ease-sanft) calc(var(--l-auf) + .25s) forwards; }
.lader-start .lader__marke, .lader-wechsel .lader__marke { animation: lader-flug var(--l-flug-dauer) var(--ease-fluss) var(--l-auf) forwards, lader-weg 0s linear var(--l-fertig) forwards; }
.lader-start .kopf .marke, .lader-wechsel .kopf .marke { opacity: 0; animation: lader-da 0s linear var(--l-fertig) forwards; }
.lader-sofort .lader { animation: lader-sofort .35s var(--ease-sanft) forwards; }
.lader-sofort .kopf .marke { opacity: 1; animation: none; }
@media (min-width: 26rem) { .lader__marke { --ls: 1.3; } }
@media (min-width: 48rem) { .lader__marke { --ls: 1.6; } }
}
@keyframes lader-auf-oben { from { transform: none; } to { transform: translateY(-100%); } }
@keyframes lader-auf-unten { from { transform: none; } to { transform: translateY(100%); } }
@keyframes lader-zu-oben { from { transform: translateY(-100%); } to { transform: none; } }
@keyframes lader-zu-unten { from { transform: translateY(100%); } to { transform: none; } }
@keyframes lader-wisch { to { clip-path: inset(-25% -2% -25% -2%); } }
@keyframes lader-hell { to { fill: var(--licht); } }
@keyframes lader-flug { to { transform: none; } }
@keyframes lader-weg { to { visibility: hidden; } }
@keyframes lader-da { to { opacity: 1; } }
@keyframes lader-sofort { to { opacity: 0; visibility: hidden; } }
@keyframes kante-zu { from, 75% { opacity: 1; } to { opacity: 0; } }
.buehne { position: relative; height: 100vh; height: 100svh; min-height: 36rem; overflow: hidden; background: var(--nacht); color: var(--licht); }
.buehne__folien, .buehne__folie { position: absolute; inset: 0; margin: 0; }
.buehne__folie { z-index: 1; }
.buehne__folie.ist-oben { z-index: 2; }
.buehne__bau { position: absolute; inset: 0; background: transparent; }
.buehne__bau .bau__linien { --w: 1.05; }
@media (prefers-reduced-motion: no-preference) {
.js .buehne__folie.ist-aktiv .bau__box, .js .buehne__folie.ist-oben .bau__box { animation: kamerafahrt 16s cubic-bezier(.25, .1, .25, 1) both; }
}
@keyframes kamerafahrt { from { transform: scale(1.09); } to { transform: scale(1); } }
.bau.ist-hell .bau__linien { --strichfarbe: var(--licht); }
.bau.ist-skizze .bau__linien { opacity: 1; transition: opacity .25s; }
.bau.ist-skizze-weg .bau__linien { opacity: 0; transition: opacity 1.4s var(--ease-sanft); }
.bau.ist-gedimmt .bau__bild img { filter: brightness(.3) saturate(.6); transition: filter 1s var(--ease-sanft); }
.bau.ist-angedeutet .bau__bild img { filter: brightness(.45) saturate(.75); transition: filter .8s var(--ease-sanft); }
.buehne__bau.ist-hell .bau__linien, .projektbuehne__bau.ist-hell .bau__linien { --w: 1.35; }
.bau.ist-wartend .bau__bild img { opacity: 0; filter: brightness(.3) saturate(.6); transition: none; }
.bau.ist-erscheinend .bau__bild img { opacity: 1; filter: none; transition: opacity 1.6s var(--ease-sanft), filter 2s var(--ease-sanft); }
.buehne__verlauf {
position: absolute;
inset: 0;
z-index: 3;
pointer-events: none;
background:
linear-gradient(to top, rgba(8, 10, 11, .8) 0%, rgba(8, 10, 11, .36) 22%, rgba(8, 10, 11, 0) 44%),
linear-gradient(to bottom, rgba(8, 10, 11, .55) 0%, rgba(8, 10, 11, 0) 22%);
transition: opacity 1.2s var(--ease-sanft);
}
.buehne__inhalt { position: absolute; z-index: 4; inset: auto 0 0 0; display: grid; justify-items: center; gap: clamp(1.1rem, 2.8vh, 1.9rem); padding: 0 var(--innen) clamp(.75rem, 2.2vh, 1.5rem); text-align: center; }
.buehne__inhalt, .projektbuehne__inhalt { opacity: calc(1 - var(--weg, 0)); transform: translate3d(0, calc(var(--weg, 0) * 16vh), 0); }
.buehne__projekt { display: grid; justify-items: center; gap: .7rem; max-width: 40rem; color: var(--licht); text-decoration: none; text-shadow: 0 1px 14px rgba(8, 10, 11, .45); transition: opacity .8s var(--ease-sanft), transform 1s var(--ease-raus); }
.buehne__projekt.ist-wechsel { opacity: 0; transform: translateY(.4rem); transition-duration: .35s; }
.buehne__name { font-size: .8125rem; font-weight: 500; line-height: 1.4; letter-spacing: .2em; text-transform: uppercase; padding-bottom: .35rem; background: linear-gradient(currentColor, currentColor) 50% 100% / 0 1px no-repeat; transition: background-size .5s var(--ease-raus); }
.buehne__projekt:hover .buehne__name, .buehne__projekt:focus-visible .buehne__name { background-size: 100% 1px; }
.buehne__text { font-size: .9375rem; line-height: 1.6; color: rgba(242, 240, 235, .88); text-wrap: balance; }
.buehne__steuerung { position: relative; display: flex; align-items: center; }
.no-js .buehne__steuerung { display: none; }
.buehne__pause { position: absolute; left: calc(100% + .6rem); top: 50%; margin-top: -1.125rem; width: 2.25rem; height: 2.25rem; padding: 0; border: 1px solid var(--linie-stark); border-radius: 50%; background: transparent; color: var(--licht); cursor: pointer; transition: border-color .3s; }
.buehne__pause::before, .buehne__pause::after { content: ""; position: absolute; top: 50%; width: 1.5px; height: .6rem; margin-top: -.3rem; background: currentColor; }
.buehne__pause::before { left: calc(50% - 3px); }
.buehne__pause::after { left: calc(50% + 1.5px); }
.buehne__pause[aria-pressed="true"]::before { left: calc(50% - 1.5px); width: 0; height: 0; margin-top: -.33rem; background: none; border-left: .55rem solid currentColor; border-top: .33rem solid transparent; border-bottom: .33rem solid transparent; }
.buehne__pause[aria-pressed="true"]::after { display: none; }
.buehne__pause:hover { border-color: var(--licht); }
.buehne__marken { display: flex; gap: .3rem; margin: 0; padding: 0; list-style: none; }
.buehne__marke { position: relative; display: block; width: 2.25rem; height: 2.25rem; padding: 0; border: 0; background: none; cursor: pointer; }
.buehne__marke::before, .buehne__marke::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; }
.buehne__marke::before { background: rgba(242, 240, 235, .38); transition: background-color .3s; }
.buehne__marke:hover::before, .buehne__marke[aria-current="true"]::before { background: rgba(242, 240, 235, .75); }
.buehne__marke::after { background: var(--licht); transform: scaleX(0); transform-origin: left center; }
.buehne__marke[aria-current="true"]::after { animation: marke-lauf var(--dauer, 8s) linear forwards; }
.buehne--pausiert .buehne__marke[aria-current="true"]::after { animation-play-state: paused; }
.buehne--wartet .buehne__marke[aria-current="true"]::after { animation: none; }
@keyframes marke-lauf { to { transform: scaleX(1); } }
.buehne--still .buehne__pause { display: none; }
.buehne--still .buehne__marke[aria-current="true"]::after { animation: none; transform: none; }
.mit-auftakt:not(.auftakt-fertig) .projektbuehne__verlauf { opacity: 0; }
.mit-auftakt:not(.auftakt-fertig) .buehne__steuerung,
.mit-auftakt:not(.auftakt-fertig) .projektbuehne__inhalt > :not(.projektbuehne__titel) { opacity: 0; }
.mit-auftakt .buehne__steuerung, .mit-auftakt .projektbuehne__inhalt > :not(.projektbuehne__titel) { transition: opacity 1s var(--ease-sanft) .5s; }
html.mit-auftakt .buehne__projekt,
html.mit-auftakt .projektbuehne .projektbuehne__titel:not(.zeilen-geteilt) { opacity: 1; animation: titel-ein 1.4s var(--ease-raus) calc(var(--l-auf) + .15s) both; }
@keyframes titel-ein { from { opacity: .2; transform: translateY(.25em); } }
@media (max-width: 40rem) {
.buehne { min-height: 32rem; }
.buehne__inhalt { gap: 1rem; }
.buehne__projekt { gap: .55rem; }
.buehne__text { font-size: .875rem; line-height: 1.55; }
.buehne__marke { width: 1.6rem; }
}
@media (max-width: 24rem) {
.buehne__marke { width: 1.25rem; }
}
.seitenkopf { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalt); align-items: start; padding: calc(var(--kopf-hoehe) + clamp(2.75rem, 7vw, 6.5rem)) var(--innen) 0; }
.seitenkopf > .krumen { grid-column: 1 / -1; align-self: start; }
.krumen ol { display: flex; flex-wrap: wrap; gap: .25rem .75rem; list-style: none; color: var(--nebel); }
.krumen li + li::before { content: ""; display: inline-block; width: 1.1rem; height: 1px; margin-right: .75rem; vertical-align: .3em; background: var(--linie-stark); }
.krumen a { text-decoration: none; }
.krumen a:hover { color: var(--licht); }
.seitenkopf .krumen { margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.seitenkopf__titel { grid-column: 1 / span 7; margin: 0; font-size: clamp(2.5rem, 4.8vw, 5.5rem); font-weight: 450; line-height: 1; --ls: -.035em; letter-spacing: var(--ls); }
.seitenkopf__zusatz { display: block; margin-top: 1.25rem; font-size: clamp(1.1rem, 1.6vw, 1.45rem); font-weight: 400; line-height: 1.3; letter-spacing: -.005em; color: var(--nebel); }
.seitenkopf__unten { grid-column: 8 / -1; display: grid; row-gap: 1.5rem; padding-top: .5rem; }
.seitenkopf__lede { margin: 0; max-width: 34em; font-size: clamp(1.0625rem, 1.25vw, 1.25rem); line-height: 1.55; color: var(--licht-2); letter-spacing: 0; }
.seitenkopf__extra > * + * { margin-top: 1.5rem; }
.seitenkopf__meta { margin: 0; color: var(--nebel); }
.seitenkopf > .bezugslinie { grid-column: 1 / -1; margin-top: clamp(3rem, 6vw, 5rem); color: var(--linie-stark); }
.js .seitenkopf > .bezugslinie { animation: bezug-ziehen 1.8s var(--ease-zeichnen) .3s both; }
@keyframes bezug-ziehen { from { transform: scaleX(0); } }
.seitenkopf--klein .seitenkopf__titel { font-size: clamp(2.3rem, 4.2vw, 4.75rem); }
.seitenkopf--beitrag .seitenkopf__titel { font-size: clamp(2.1rem, 3.9vw, 4.4rem); line-height: 1.04; }
.seitenkopf--beitrag .seitenkopf__extra { grid-row: 1; }
@media (max-width: 56rem) {
.seitenkopf__titel, .seitenkopf__unten { grid-column: 1 / -1; }
.seitenkopf__unten { margin-top: 1.75rem; padding-top: 0; }
}
.einleitung { padding: var(--abstand-xl) var(--innen) var(--abstand-l); }
.einleitung__aussage { margin: 0 0 clamp(4rem, 9vw, 8rem); max-width: 23ch; color: var(--licht); font-size: clamp(2.1rem, 4.8vw, 5.2rem); font-weight: 450; line-height: 1.02; letter-spacing: -.035em; text-wrap: balance; }
.aussage__link { color: inherit; text-decoration: none; background: linear-gradient(var(--linie-stark), var(--linie-stark)) 0 92% / 100% 2px no-repeat; transition: background-size .5s var(--ease-raus), color .3s; }
.aussage__link:hover, .aussage__link:focus-visible { color: var(--gruen-hell); background-image: linear-gradient(var(--gruen-hell), var(--gruen-hell)); }
.koten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: clamp(4.5rem, 10vw, 9rem); }
.kote { margin: 0; }
.kote__wert { position: relative; display: block; padding: 0 1rem 1.1rem 1.7rem; border-bottom: 1px solid var(--linie-stark); color: var(--licht); font-size: clamp(2.2rem, 4.6vw, 4.8rem); font-weight: 400; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kote__wert::before { content: ""; position: absolute; left: 0; bottom: 0; border-left: .5rem solid transparent; border-right: .5rem solid transparent; border-top: .8rem solid var(--gruen-hell); }
.kote__text { display: block; padding: .95rem 1rem 0 1.7rem; color: var(--nebel); }
.js .koten .kote__wert { border-bottom-color: transparent; background: linear-gradient(var(--linie-stark), var(--linie-stark)) left bottom / 0 1px no-repeat; }
.js .koten.ist-sichtbar .kote__wert { background-size: 100% 1px; transition: background-size 1.3s var(--ease-zeichnen); }
.js .koten.ist-sichtbar .kote:nth-child(2) .kote__wert { transition-delay: .25s; }
.js .koten.ist-sichtbar .kote:nth-child(3) .kote__wert { transition-delay: .5s; }
.zaehler { display: inline-block; white-space: nowrap; }
.ziffer, .zeichen { display: inline-block; height: 1em; line-height: 1; vertical-align: top; }
.ziffer { overflow: hidden; }
.ziffer__band { display: block; }
.ziffer__band > span { display: block; height: 1em; }
.ist-zaehlwerk.ist-sichtbar .ziffer__band { transform: translateY(calc(var(--z) * -1em)); transition: transform 2.1s cubic-bezier(.2, .75, .1, 1); transition-delay: calc(var(--k, 0) * .25s + var(--n, 0) * 70ms); }
.ist-zaehlwerk .zeichen { opacity: 0; transition: opacity .8s var(--ease-sanft); transition-delay: calc(var(--k, 0) * .25s + .9s); }
.ist-zaehlwerk.ist-sichtbar .zeichen { opacity: 1; }
.einleitung__raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalt); align-items: end; }
.einleitung__bild { grid-column: 1 / span 5; }
.einleitung__bild picture { overflow: hidden; }
.einleitung__bild img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.einleitung__text { grid-column: 7 / span 5; color: var(--licht-2); font-size: clamp(1.15rem, 1.5vw, 1.4rem); line-height: 1.55; }
@media (max-width: 56rem) {
.koten { grid-template-columns: 1fr; gap: 2.25rem; }
.einleitung__bild { grid-column: 1 / span 10; margin-bottom: 2.5rem; }
.einleitung__text { grid-column: 1 / -1; }
}
.geschichte { position: relative; padding: var(--abstand-l) var(--innen); background: var(--nacht-2); }
.geschichte__buehne { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalt); row-gap: 2.5rem; }
.geschichte__kopf { grid-column: 1 / span 7; }
.geschichte__titel { margin-bottom: 1.1rem; }
.geschichte__intro { margin: 0; color: var(--nebel); font-size: 1.125rem; max-width: 30em; }
.geschichte__bild { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spalt); align-items: start; }
.geschichte__ebene img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.geschichte__ebene--bau img { object-position: 50% 30%; }
.geschichte__plan { position: relative; aspect-ratio: 16 / 10; background: var(--papier) var(--korn-hell); display: grid; place-items: center; overflow: hidden; box-shadow: 0 2.5rem 5rem -2rem rgba(0, 0, 0, .6); }
.geschichte__plan .geschichte__planbild { width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; }
.geschichte__linien { position: absolute; left: 0; width: 100%; height: auto; top: 50%; transform: translateY(-50%); fill: none; stroke: var(--tinte); --w: 1.3; stroke-width: calc(var(--w) * var(--skala, 1)); display: none; }
.geschichte__linien .z1 { opacity: .86; }
.geschichte__linien .z2 { opacity: .66; stroke-width: calc(var(--w) * .75 * var(--skala, 1)); }
.geschichte__schritte { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spalt); list-style: none; }
.schritt__team { margin: 0 0 .7rem; color: var(--nebel); }
.schritt__nr { display: inline-block; margin-right: .9rem; color: var(--gruen-hell); }
.schritt__titel { font-size: clamp(1.7rem, 2.8vw, 2.7rem); font-weight: 450; letter-spacing: -.03em; margin-bottom: .9rem; }
.schritt__text { font-size: 1.125rem; line-height: 1.6; color: var(--licht-2); }
.schritt__phasen { margin-top: 1rem; font-size: .875rem; color: var(--nebel); }
.geschichte__fortschritt { display: none; }
.geschichte__links { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .5rem 2.25rem; margin: 0; }
@media (max-width: 56rem) {
.geschichte__bild, .geschichte__schritte { grid-template-columns: 1fr; }
.geschichte__kopf { grid-column: 1 / -1; }
}
.geschichte.ist-aktiv { height: 360vh; padding: 0; }
.geschichte.ist-aktiv .geschichte__buehne {
position: sticky;
top: 0;
height: 100vh;
height: 100svh;
padding: calc(var(--kopf-hoehe) + clamp(1rem, 3vh, 2.5rem)) var(--innen) clamp(1.25rem, 3.5vh, 2.5rem);
grid-template-rows: auto minmax(0, 1fr) auto;
row-gap: clamp(1rem, 3vh, 2rem);
overflow: hidden;
}
.geschichte.ist-aktiv .geschichte__kopf { grid-column: 1 / span 4; grid-row: 1; align-self: start; }
.geschichte.ist-aktiv .geschichte__schritte { grid-column: 1 / span 4; grid-row: 2; display: block; position: relative; align-self: center; min-height: 18rem; }
.geschichte.ist-aktiv .schritt { position: absolute; inset: 0 0 auto 0; opacity: 0; transform: translateY(1.25rem); transition: opacity .28s var(--ease-sanft), transform 0s linear .3s; pointer-events: none; }
.geschichte.ist-aktiv .schritt.ist-aktiv { opacity: 1; transform: none; pointer-events: auto; transition: opacity .6s var(--ease-sanft) .24s, transform .9s var(--ease-raus) .24s; }
.geschichte.ist-aktiv .geschichte__bild { grid-column: 5 / -1; grid-row: 1 / 4; display: block; position: relative; container-type: size; min-height: 0; }
.geschichte.ist-aktiv .geschichte__ebene { position: absolute; left: 50%; top: 50%; width: min(100cqw, 100cqh * 1.6); height: min(100cqh, 100cqw / 1.6); transform: translate(-50%, -50%); opacity: 0; transition: opacity .25s linear; overflow: hidden; }
.geschichte.ist-aktiv .geschichte__ebene--plan { opacity: 1; }
.geschichte.ist-aktiv .geschichte__ebene picture { height: 100%; }
.geschichte.ist-aktiv .geschichte__ebene img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; }
.geschichte.ist-aktiv .geschichte__plan .geschichte__planbild { height: auto; object-fit: contain; }
.geschichte.ist-aktiv .geschichte__plan { height: 100%; aspect-ratio: auto; }
.geschichte.ist-aktiv .geschichte__planbild { opacity: 0; transition: opacity .6s linear; }
.geschichte.ist-aktiv .geschichte__linien { display: block; }
.geschichte.ist-aktiv .geschichte__linien path { stroke-dasharray: 1 2; stroke-dashoffset: 1; }
.geschichte.ist-aktiv .bildtext { position: absolute; left: .9rem; top: .9rem; margin: 0; padding: .35rem .7rem; background: rgba(13, 15, 16, .82); color: var(--licht); opacity: 0; transition: opacity .4s; }
.geschichte.ist-aktiv .geschichte__ebene.ist-oben .bildtext { opacity: 1; }
.geschichte.ist-aktiv .geschichte__fortschritt { display: block; grid-column: 1 / span 4; grid-row: 3; position: relative; height: 1px; background: var(--linie-stark); align-self: end; }
.geschichte__fortschritt span { position: absolute; inset: 0; background: var(--gruen-hell); transform-origin: left center; transform: scaleX(0); }
.geschichte.ist-aktiv .geschichte__links { grid-column: 1 / span 4; grid-row: 3; align-self: end; margin-bottom: 1.25rem; }
@media (max-width: 56rem) {
.geschichte.ist-aktiv { height: 330vh; }
.geschichte.ist-aktiv .geschichte__buehne { grid-template-rows: auto minmax(0, 1fr) auto auto; row-gap: 1rem; }
.geschichte.ist-aktiv .geschichte__kopf { grid-column: 1 / -1; }
.geschichte.ist-aktiv .geschichte__titel { font-size: clamp(1.9rem, 8vw, 2.6rem); margin-bottom: .4rem; }
.geschichte.ist-aktiv .geschichte__intro { font-size: 1rem; }
.geschichte.ist-aktiv .geschichte__bild { grid-column: 1 / -1; grid-row: 2; }
.geschichte.ist-aktiv .geschichte__schritte { grid-column: 1 / -1; grid-row: 3; min-height: 11.5rem; }
.geschichte.ist-aktiv .schritt__titel { font-size: 1.5rem; margin-bottom: .4rem; }
.geschichte.ist-aktiv .schritt__text { font-size: 1rem; line-height: 1.5; }
.geschichte.ist-aktiv .schritt__phasen { display: none; }
.geschichte.ist-aktiv .geschichte__fortschritt { grid-column: 1 / -1; grid-row: 4; }
.geschichte.ist-aktiv .geschichte__links { display: none; }
}
.karte { display: block; color: inherit; text-decoration: none; }
.karte__bild { aspect-ratio: 4 / 3; }
.karte__text { display: flex; justify-content: space-between; align-items: baseline; gap: .4rem 1.5rem; flex-wrap: wrap; padding-top: 1.1rem; }
.karte__titel { font-size: clamp(1.2rem, 1.6vw, 1.55rem); font-weight: 450; line-height: 1.2; letter-spacing: -.015em; transition: color .3s; }
.karte__meta { display: block; margin: 0; color: var(--nebel); }
.karte__status { display: inline-block; margin-left: .7rem; padding: .05rem .5rem; border: 1px solid var(--linie-stark); border-radius: 999px; }
.karte:hover .karte__titel { color: var(--gruen-hell); }
.auswahl { position: relative; }
.auswahl__liste { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalt); row-gap: clamp(3.5rem, 8vw, 7rem); list-style: none; align-items: start; }
.auswahl__eintrag:nth-child(1) { grid-column: 1 / span 7; }
.auswahl__eintrag:nth-child(2) { grid-column: 9 / span 4; margin-top: clamp(4rem, 11vw, 11rem); }
.auswahl__eintrag:nth-child(3) { grid-column: 2 / span 4; }
.auswahl__eintrag:nth-child(4) { grid-column: 7 / span 6; margin-top: clamp(3rem, 8vw, 8rem); }
.auswahl__eintrag:nth-child(5) { grid-column: 1 / span 6; }
.auswahl__eintrag:nth-child(6) { grid-column: 8 / span 5; margin-top: clamp(4rem, 10vw, 10rem); }
.auswahl__eintrag:nth-child(1) .karte__bild, .auswahl__eintrag:nth-child(4) .karte__bild, .auswahl__eintrag:nth-child(5) .karte__bild { aspect-ratio: 3 / 2; }
.auswahl__eintrag:nth-child(2) .karte__bild, .auswahl__eintrag:nth-child(3) .karte__bild, .auswahl__eintrag:nth-child(6) .karte__bild { aspect-ratio: 4 / 5; }
.auswahl__stand { display: none; }
.auswahl__schluss { display: none; }
.auswahl.ist-quer { --qh: min(48vh, 34vw, calc(100vh - 27rem)); padding: 0; }
.auswahl.ist-quer .karte__text { flex-direction: column; flex-wrap: nowrap; gap: .3rem; }
.auswahl.ist-quer .auswahl__pin { position: sticky; top: 0; height: 100vh; overflow: hidden; overflow: clip; display: flex; flex-direction: column; justify-content: center; gap: clamp(1.5rem, 4.5vh, 3rem); padding-top: var(--kopf-hoehe); }
.auswahl.ist-quer .abschnittkopf { margin: 0; padding: 0 var(--innen); }
.auswahl.ist-quer .auswahl__liste { display: flex; flex-wrap: nowrap; gap: clamp(1.75rem, 3.6vw, 4.5rem); align-items: flex-start; width: max-content; padding: 0 var(--innen); will-change: transform; }
.auswahl.ist-quer .auswahl__eintrag { flex: none; width: calc(var(--qh) * var(--q, 1.5)); margin: 0; }
.auswahl.ist-quer .auswahl__eintrag .karte__bild { aspect-ratio: auto; height: var(--qh); }
.auswahl.ist-quer .auswahl__eintrag:nth-child(even) { margin-top: clamp(1.25rem, 4.5vh, 2.5rem); }
.auswahl.ist-quer .auswahl__schluss { display: block; flex: none; }
.auswahl__ende { display: flex; flex-direction: column; justify-content: space-between; gap: 1.5rem; width: calc(var(--qh) * .8); height: var(--qh); padding: clamp(1.25rem, 2vw, 2rem); border: 1px solid var(--linie-stark); color: var(--licht); text-decoration: none; transition: background-color .45s, color .45s, border-color .45s; }
.auswahl__ende:hover { background: var(--licht); color: var(--nacht); border-color: var(--licht); }
.auswahl__ende strong { color: inherit; font-size: clamp(2rem, 3.2vw, 3.4rem); font-weight: 450; letter-spacing: -.035em; line-height: 1; }
.auswahl__ende .textlink { color: inherit; }
.auswahl.ist-quer .auswahl__stand { display: block; position: relative; height: 1px; margin: 0 var(--innen); background: var(--linie); }
.auswahl.ist-quer .auswahl__stand::after { content: ""; position: absolute; inset: 0; background: var(--licht); transform-origin: left center; transform: scaleX(var(--p, 0)); }
@media (max-width: 56rem) {
.auswahl__liste { grid-template-columns: 1fr; }
.auswahl__eintrag:nth-child(n) { grid-column: 1 / -1; margin-top: 0; }
.auswahl__eintrag:nth-child(n) .karte__bild { aspect-ratio: 4 / 3; }
}
.filterleiste { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem 2rem; margin-bottom: clamp(2.75rem, 5.5vw, 4.5rem); }
.filter, .ansicht { display: flex; flex-wrap: wrap; gap: .5rem; }
.filter[hidden], .ansicht[hidden] { display: none; }
.js .filter[hidden], .js .ansicht[hidden] { display: flex; visibility: hidden; }
.filter button, .ansicht button { position: relative; min-height: 2.6rem; padding: .55rem 1.1rem; border: 1px solid var(--linie-stark); border-radius: 999px; background: none; cursor: pointer; color: var(--licht-2); transition: background-color .3s, color .3s, border-color .3s; }
.filter button:hover, .ansicht button:hover { border-color: var(--licht); color: var(--licht); }
.filter button[aria-pressed="true"], .ansicht button[aria-pressed="true"] { background: var(--licht); border-color: var(--licht); color: var(--nacht); }
.filter__zahl { margin-left: .35rem; opacity: .6; }
.projektraster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalt); row-gap: clamp(3rem, 6vw, 6rem); list-style: none; align-items: start; }
.projektraster > li { grid-column: span 6; min-width: 0; }
.projektraster > li[hidden] { display: none; }
@media (min-width: 64rem) {
.projektraster > li[data-spalten="7"] { grid-column: span 7; }
.projektraster > li[data-spalten="5"] { grid-column: span 5; }
.projektraster > li[data-spalten="4"] { grid-column: span 4; }
.projektraster > li[data-spalten="6"] { grid-column: span 6; }
.projektraster > li[data-spalten="12"] { grid-column: span 12; }
.projektraster > li[data-spalten="7"] .karte__bild { aspect-ratio: 3 / 2; }
.projektraster > li[data-spalten="5"] .karte__bild { aspect-ratio: 21 / 20; }
.projektraster > li[data-spalten="4"] .karte__bild { aspect-ratio: 4 / 3; }
.projektraster > li[data-spalten="6"] .karte__bild { aspect-ratio: 3 / 2; }
.projektraster > li[data-spalten="12"] .karte__bild { aspect-ratio: 21 / 9; }
}
@media (min-width: 40rem) and (max-width: 63.99rem) {
.projektraster > li[data-spalten="12"] { grid-column: span 12; }
.projektraster > li[data-spalten="12"] .karte__bild { aspect-ratio: 16 / 9; }
}
@media (max-width: 39.99rem) {
.projektraster { grid-template-columns: 1fr; }
.projektraster > li { grid-column: 1 / -1; }
}
.projektraster.ist-liste { display: block; border-bottom: 1px solid var(--linie); }
.projektraster.ist-liste > li { border-top: 1px solid var(--linie); }
.projektraster.ist-liste .karte__bild { display: none; }
.projektraster.ist-liste .karte { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: clamp(.9rem, 1.6vw, 1.35rem) 0; transition: opacity .35s, padding .5s var(--ease-raus); }
.projektraster.ist-liste .karte__text { display: contents; }
.projektraster.ist-liste .karte__titel { font-size: clamp(1.4rem, 2.6vw, 2.6rem); letter-spacing: -.03em; transition: transform .55s var(--ease-raus), color .3s; }
.projektraster.ist-liste .karte__meta { text-align: right; padding-left: 2rem; }
@media (hover: hover) {
.projektraster.ist-liste:hover .karte { opacity: .35; }
.projektraster.ist-liste .karte:hover { opacity: 1; }
.projektraster.ist-liste .karte:hover .karte__titel { transform: translateX(1.25rem); color: var(--licht); }
}
.projektraster.ist-wechsel > li { animation: eintrag-setzt .8s var(--ease-raus) both; animation-delay: calc(var(--i, 0) * 35ms); }
@keyframes eintrag-setzt { from { opacity: 0; transform: translateY(1.25rem); } }
.listenvorschau { position: fixed; left: 0; top: 0; z-index: 30; pointer-events: none; display: none; }
.mit-zeiger .listenvorschau { display: block; }
.listenvorschau > div { --vx: 2rem; width: min(26vw, 380px); aspect-ratio: 4 / 3; overflow: hidden; transform: translate(var(--vx), -50%) scale(.82); transform-origin: left center; opacity: 0; transition: opacity .35s, transform .6s var(--ease-raus); }
.listenvorschau.ist-links > div { --vx: calc(-100% - 2rem); transform-origin: right center; }
.listenvorschau.ist-an > div { opacity: 1; transform: translate(var(--vx), -50%) scale(1); }
.listenvorschau img { width: 100%; height: 100%; object-fit: cover; }
.listenvorschau.wechsel img { animation: vorschau-ein .7s var(--ease-raus); }
@keyframes vorschau-ein { from { clip-path: inset(100% 0 0 0); transform: scale(1.2); } to { clip-path: inset(0); transform: none; } }
.kartenreihe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2.75rem, 4.5vw, 4rem) var(--spalt); list-style: none; }
@media (max-width: 64rem) { .kartenreihe { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .kartenreihe { grid-template-columns: 1fr; } }
.leistungskurz { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalt); row-gap: 3rem; }
.leistungskurz__kopf { grid-column: 1 / span 4; align-self: start; position: sticky; top: calc(var(--kopf-hoehe) + 2rem); }
.leistungskurz__kopf h2 { margin-bottom: 1.6rem; }
.leistungskurz__kopf p { max-width: 28em; }
.leistungsliste { grid-column: 6 / -1; list-style: none; border-bottom: 1px solid var(--linie); }
.leistungsliste--voll { grid-column: 1 / -1; }
.leistungszeile { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 13rem; gap: .5rem 2.5rem; padding: clamp(1.6rem, 2.8vw, 2.5rem) 0; border-top: 1px solid var(--linie); color: inherit; text-decoration: none; }
.leistungszeile::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--gruen-hell); transform: scaleX(0); transform-origin: left center; transition: transform .8s var(--ease-zeichnen); }
.leistungszeile:hover::before, .leistungszeile:focus-visible::before { transform: scaleX(1); }
.leistungszeile__titel { grid-column: 1; font-size: clamp(2rem, 4vw, 4rem); font-weight: 450; line-height: 1; --ls: -.035em; letter-spacing: var(--ls); transition: transform .65s var(--ease-raus); }
.leistungszeile__text { grid-column: 1; margin: 0; color: var(--nebel); max-width: 34em; transition: transform .65s var(--ease-raus) .03s; }
.leistungszeile__bild { grid-column: 2; grid-row: 1 / span 2; align-self: center; opacity: 0; clip-path: inset(0 0 100% 0); transition: clip-path .8s var(--ease-raus), opacity .3s; }
.leistungszeile__bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (hover: hover) {
.leistungszeile:hover .leistungszeile__titel, .leistungszeile:hover .leistungszeile__text { transform: translateX(1rem); }
.leistungszeile:hover .leistungszeile__bild { opacity: 1; clip-path: inset(0 0 0 0); }
}
@media (max-width: 56rem) {
.leistungskurz__kopf { grid-column: 1 / -1; position: static; }
.leistungsliste { grid-column: 1 / -1; }
.leistungszeile { grid-template-columns: 1fr; }
.leistungszeile__bild { display: none; }
}
.kapitelliste { display: grid; row-gap: clamp(5rem, 10vw, 9rem); }
.kapitel { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalt); row-gap: 2rem; align-items: center; }
.kapitel__bild { grid-column: 1 / span 7; display: block; overflow: hidden; }
.kapitel__bild img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform 1.4s var(--ease-raus); }
.kapitel__bild:hover img { transform: scale(1.03); }
.kapitel__text { grid-column: 9 / -1; }
.kapitel--gespiegelt .kapitel__bild { grid-column: 6 / -1; grid-row: 1; }
.kapitel--gespiegelt .kapitel__text { grid-column: 1 / span 4; grid-row: 1; }
.kapitel__titel { margin-bottom: 1.25rem; }
.kapitel__titel a { text-decoration: none; }
.kapitel__titel a:hover { color: var(--gruen-hell); }
.kapitel__kurz { font-size: 1.125rem; font-weight: 500; color: var(--licht); }
.kapitel__lede { font-size: 1.0625rem; line-height: 1.65; color: var(--licht-2); }
@media (max-width: 56rem) {
.kapitel__bild, .kapitel__text, .kapitel--gespiegelt .kapitel__bild, .kapitel--gespiegelt .kapitel__text { grid-column: 1 / -1; grid-row: auto; }
}
.zielgruppen__titel { grid-column: 1 / span 4; margin-bottom: 2rem; }
.zielgruppen__liste { grid-column: 6 / -1; }
.zeilenliste { list-style: none; border-bottom: 1px solid var(--linie); }
.zeilenliste__eintrag { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 1rem 2.25rem; padding: 2rem 0; border-top: 1px solid var(--linie); }
.zeilenliste__titel { font-size: clamp(1.4rem, 2vw, 1.85rem); font-weight: 450; letter-spacing: -.02em; }
.zeilenliste__titel a { text-decoration: none; }
.zeilenliste__titel a:hover { color: var(--gruen-hell); }
.zeilenliste__text p { margin-bottom: .6rem; }
.zeilenliste__text a { color: var(--gruen-hell); }
@media (max-width: 56rem) {
.zielgruppen__titel, .zielgruppen__liste { grid-column: 1 / -1; }
.zeilenliste__eintrag { grid-template-columns: 1fr; }
}
.kacheln { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem var(--spalt); list-style: none; counter-reset: kachel; }
.kacheln--vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kacheln li { position: relative; padding-top: 1.5rem; border-top: 1px solid var(--linie-stark); }
.kacheln li::before { content: ""; position: absolute; left: 0; top: -1px; width: 2.5rem; height: 1px; background: var(--gruen-hell); }
.kacheln h3 { font-size: 1.3rem; font-weight: 500; line-height: 1.3; letter-spacing: -.01em; margin-bottom: .7rem; }
.kacheln p { color: var(--licht-2); }
@media (max-width: 64rem) { .kacheln, .kacheln--vier { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .kacheln, .kacheln--vier { grid-template-columns: 1fr; } }
.phasenplan__kopf { margin-bottom: clamp(2.75rem, 4.5vw, 4rem); }
.phasenplan__teams { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); column-gap: 0; margin-bottom: 1rem; }
.phasenplan__team { grid-column: calc(var(--von) + 1) / span var(--anzahl); position: relative; padding: 0 .75rem 1rem 0; font-size: .75rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; line-height: 1.3; color: var(--licht); }
.phasenplan__team::after { content: ""; position: absolute; left: 0; right: .6rem; bottom: 0; height: .5rem; border: 1px solid var(--linie-stark); border-bottom: 0; }
.phasenplan__achse { position: relative; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); border-bottom: 1px solid var(--linie); }
.phasenplan__strich { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--gruen-hell); transform-origin: left center; }
.js .phasenplan__strich { transform: scaleX(0); transition: transform 2.4s var(--ease-zeichnen); }
.js .phasenplan.ist-sichtbar .phasenplan__strich { transform: scaleX(1); }
.phasenplan__marke { position: relative; padding: 0 0 .7rem; color: var(--licht); font-size: clamp(1.6rem, 3vw, 2.8rem); font-weight: 400; line-height: 1; letter-spacing: -.03em; font-variant-numeric: lining-nums; }
.phasenplan__marke::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 1px; height: .6rem; background: var(--licht); }
.phasen { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3rem var(--spalt); list-style: none; }
.phase__nr { margin: 0 0 .5rem; color: var(--nebel); }
.phase__team { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.phase__titel { font-size: 1.25rem; font-weight: 500; line-height: 1.3; margin-bottom: .6rem; }
.phase__text { color: var(--licht-2); font-size: 1rem; }
.phasenplan--kompakt .phase__text { color: var(--nebel); }
.phasenplan__hinweis { margin-top: 2.75rem; font-size: .875rem; color: var(--nebel); max-width: 46em; }
@media (max-width: 64rem) { .phasen { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 48rem) {
.phasenplan__teams { display: none; }
.phase__team { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
.phasen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 30rem) { .phasen { grid-template-columns: 1fr; } }
.fragen__titel { grid-column: 1 / span 4; margin-bottom: 2rem; }
.fragen__liste { grid-column: 6 / -1; border-bottom: 1px solid var(--linie); }
.frage { border-top: 1px solid var(--linie); }
.frage summary { position: relative; display: block; padding: 1.5rem 3.5rem 1.5rem 0; cursor: pointer; list-style: none; color: var(--licht); font-size: clamp(1.15rem, 1.6vw, 1.4rem); font-weight: 450; line-height: 1.35; letter-spacing: -.01em; }
.frage summary::-webkit-details-marker { display: none; }
.frage summary::before, .frage summary::after { content: ""; position: absolute; right: .3rem; top: 50%; width: 1.1rem; height: 1px; background: currentColor; transition: transform .45s var(--ease-raus); }
.frage summary::after { transform: rotate(90deg); }
.frage[open] summary::after { transform: rotate(0deg); }
.frage summary:hover { color: var(--gruen-hell); }
.frage__antwort { padding: 0 0 1.9rem; }
@media (max-width: 56rem) { .fragen__titel, .fragen__liste { grid-column: 1 / -1; } }
.filmabschnitt { padding: var(--abstand-l) var(--innen); background: var(--nacht-2); }
.filmabschnitt__kopf { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalt); row-gap: 1rem; margin-bottom: clamp(2.25rem, 4.5vw, 4rem); align-items: end; }
.filmabschnitt__kopf h2 { grid-column: 1 / span 7; }
.filmabschnitt__kopf p { grid-column: 9 / -1; margin: 0; color: var(--nebel); }
@media (max-width: 56rem) { .filmabschnitt__kopf h2, .filmabschnitt__kopf p { grid-column: 1 / -1; } }
.film { position: relative; aspect-ratio: 16 / 9; background: #000; overflow: hidden; }
.film > picture img { width: 100%; height: 100%; object-fit: cover; opacity: .58; transition: transform 1.6s var(--ease-raus), opacity .6s; }
.film:hover > picture img { transform: scale(1.03); opacity: .7; }
.film__einwilligung { position: absolute; inset: auto 0 0 0; padding: clamp(1.25rem, 3.5vw, 3rem); display: grid; gap: 1.1rem; justify-items: start; background: linear-gradient(to top, rgba(0, 0, 0, .8), rgba(0, 0, 0, 0)); }
.film__hinweis { margin: 0; max-width: 44rem; font-size: .875rem; line-height: 1.55; color: rgba(255, 255, 255, .82); }
.film__hinweis a { color: #fff; }
.knopf__play { width: 0; height: 0; border-left: .62rem solid currentColor; border-top: .4rem solid transparent; border-bottom: .4rem solid transparent; }
.film iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.seitenkopf--film > .bezugslinie { margin-top: clamp(2rem, 4vw, 3.25rem); }
.filmseite { padding: clamp(1.75rem, 3.5vw, 3rem) var(--innen) var(--abstand-l); }
.filmseite__weiter { margin-top: clamp(1.75rem, 3vw, 2.5rem); }
@media (min-width: 40.0625rem) {
.film--gross .film__einwilligung { inset: 0; align-content: center; justify-items: center; text-align: center; background: radial-gradient(ellipse at center, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .2) 75%); }
.film--gross .film__hinweis { max-width: 36rem; }
}
@media (max-width: 40rem) {
.film { aspect-ratio: auto; display: grid; }
.film > picture { grid-area: 1 / 1; aspect-ratio: 16 / 9; }
.film__einwilligung { position: static; background: var(--nacht-3); padding: 1.25rem; }
.film.ist-geladen { aspect-ratio: 16 / 9; }
}
.teamband { padding-bottom: var(--abstand-l); }
.teamband__bild { overflow: hidden; }
.teamband__bild img { width: 100%; height: auto; max-height: clamp(22rem, 76vh, 56rem); object-fit: cover; object-position: 50% 30%; }
.teamband__text { padding: clamp(2.75rem, 5.5vw, 5rem) var(--innen) 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalt); row-gap: 2rem; }
.teamband__text h2 { grid-column: 1 / span 5; }
.teamband__spalten { grid-column: 7 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.teamband__links { display: flex; flex-wrap: wrap; gap: .25rem 2rem; }
@media (max-width: 64rem) { .teamband__text h2, .teamband__spalten { grid-column: 1 / -1; } }
@media (max-width: 40rem) { .teamband__spalten { grid-template-columns: 1fr; } }
.beitragsliste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2.75rem, 4.5vw, 4rem) var(--spalt); list-style: none; }
.beitragskarte { display: block; color: inherit; text-decoration: none; }
.beitragskarte__bild { overflow: hidden; margin-bottom: 1.25rem; background: var(--nacht-3); }
.beitragskarte__bild img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform 1.4s var(--ease-raus), filter .6s; }
.beitragskarte:hover .beitragskarte__bild img { transform: scale(1.04); }
.beitragskarte__meta { margin: 0 0 .6rem; color: var(--nebel); }
.beitragskarte__titel { font-size: clamp(1.25rem, 1.55vw, 1.5rem); font-weight: 450; line-height: 1.25; letter-spacing: -.015em; margin-bottom: .7rem; transition: color .3s; }
.beitragskarte:hover .beitragskarte__titel { color: var(--gruen-hell); }
.beitragskarte__text { font-size: 1rem; line-height: 1.6; color: var(--licht-2); }
@media (max-width: 64rem) { .beitragsliste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .beitragsliste { grid-template-columns: 1fr; } }
.projektbuehne { position: relative; height: 100vh; height: 100svh; min-height: 34rem; color: var(--licht); background: var(--nacht); overflow: hidden; }
.projektbuehne__bau { position: absolute; inset: 0; background: var(--nacht); }
.projektbuehne__bau .bau__linien { --w: 1.05; }
.projektbuehne__verlauf { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(8, 10, 11, .88) 0%, rgba(8, 10, 11, .38) 34%, rgba(8, 10, 11, 0) 60%), radial-gradient(90% 70% at 0% 100%, rgba(8, 10, 11, .5) 0%, rgba(8, 10, 11, 0) 70%), linear-gradient(to bottom, rgba(8, 10, 11, .5) 0%, rgba(8, 10, 11, 0) 22%); transition: opacity 1.2s var(--ease-sanft); }
.projektbuehne__inhalt { position: absolute; inset: auto 0 0 0; padding: 0 var(--innen) clamp(1.6rem, 4vh, 2.9rem); }
.projektbuehne__inhalt .krumen { margin-bottom: 1.6rem; }
.projektbuehne__inhalt .krumen ol { color: rgba(242, 240, 235, .78); }
.projektbuehne__titel { font-size: clamp(2.6rem, 5.6vw, 6.4rem); font-weight: 450; line-height: .96; --ls: -.04em; letter-spacing: var(--ls); max-width: 16ch; margin-bottom: 1.25rem; }
.projektbuehne__untertitel { margin: 0 0 clamp(2.2rem, 5.5vh, 3.25rem); color: var(--licht-2); font-size: clamp(1.05rem, 1.45vw, 1.35rem); max-width: 40em; }
.projektbuehne__linie { color: var(--licht); opacity: .7; }
.projekt__haupt { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalt); row-gap: 3.5rem; padding: var(--abstand-l) var(--innen); }
.projekt__text { grid-column: 1 / span 7; }
.projekt__text > .lede { margin-bottom: 2.75rem; font-size: clamp(1.5rem, 2.3vw, 2.25rem); line-height: 1.3; letter-spacing: -.02em; }
.projekt__anfrage { margin-top: 3.25rem; }
.projekt__fakten { grid-column: 9 / -1; align-self: start; position: sticky; top: calc(var(--kopf-hoehe) + 1.75rem); }
.projekt__fotos { margin-top: 1.1rem; font-size: .875rem; color: var(--nebel); }
@media (max-width: 64rem) {
.projekt__text, .projekt__fakten { grid-column: 1 / -1; position: static; }
}
.plankopf { border-top: 1px solid var(--linie-stark); font-size: .9375rem; }
.plankopf__titel { display: flex; justify-content: space-between; gap: 1rem; margin: 0; padding: 1rem 0; border-bottom: 1px solid var(--linie); color: var(--licht); }
.plankopf__titel span:last-child { color: var(--nebel); text-align: right; }
.plankopf__text { margin: 0; padding: 1rem 0; border-bottom: 1px solid var(--linie); }
.plankopf dl { display: grid; grid-template-columns: minmax(7rem, auto) 1fr; margin: 0; }
.plankopf dt, .plankopf dd { margin: 0; padding: .85rem 0; border-bottom: 1px solid var(--linie); }
.plankopf dt { color: var(--nebel); padding-right: 1rem; padding-top: 1.05rem; }
.plankopf dd { color: var(--licht); overflow-wrap: anywhere; }
.plankopf__fuss { margin: 0; padding: .9rem 0 0; color: var(--nebel); }
.plankopf a { color: var(--gruen-hell); }
.galerieabschnitt { padding: 0 var(--innen) var(--abstand-l); }
.galerieabschnitt__titel { margin-bottom: 2.25rem; padding-top: 1.4rem; border-top: 1px solid var(--linie-stark); display: flex; justify-content: space-between; align-items: baseline; }
.galerieabschnitt__zahl { color: var(--nebel); }
.galerie { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--spalt); list-style: none; }
.galerie__trenner { grid-column: 1 / -1; padding-top: 2.25rem; }
.galerie__eintrag a { display: block; overflow: hidden; cursor: zoom-in; background: var(--nacht-3); }
.galerie__eintrag img { width: 100%; object-fit: cover; transition: transform 1.4s var(--ease-raus); }
.galerie__eintrag a:hover img { transform: scale(1.03); }
.galerie__eintrag--voll, .galerie__eintrag--plan { grid-column: span 6; }
.galerie__eintrag--breit { grid-column: span 4; }
.galerie__eintrag--fuellt { grid-column: span 2; }
.galerie__eintrag--halb { grid-column: span 3; }
.galerie__eintrag--drittel { grid-column: span 2; }
.galerie__eintrag--voll img { aspect-ratio: 16 / 9; }
.galerie__eintrag--breit img, .galerie__eintrag--fuellt img { aspect-ratio: auto; height: clamp(16rem, 36vw, 40rem); }
.galerie__eintrag--halb img { aspect-ratio: 4 / 3; }
.galerie__eintrag--drittel img { aspect-ratio: 4 / 5; }
.galerie__eintrag--plan a { background: var(--papier) var(--korn-hell); padding: clamp(1rem, 3vw, 3rem); }
.galerie__eintrag--plan img { object-fit: contain; aspect-ratio: auto; max-height: 80vh; margin: 0 auto; width: auto; }
.js .galerie__eintrag > a { clip-path: inset(100% 0 0 0); transition: clip-path 1.35s var(--ease-fluss); }
.js .galerie__eintrag > a img { transform: scale(1.15); transition: transform 2.2s var(--ease-raus); }
.js .galerie__eintrag.ist-sichtbar > a { clip-path: inset(0 0 0 0); }
.js .galerie__eintrag.ist-sichtbar > a img { transform: none; }
.js .galerie__eintrag.ist-sichtbar > a:hover img { transform: scale(1.03); transition-duration: 1.4s; }
@media (max-width: 56rem) {
.galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.galerie__eintrag--voll, .galerie__eintrag--plan, .galerie__eintrag--breit { grid-column: 1 / -1; }
.galerie__eintrag--fuellt, .galerie__eintrag--halb, .galerie__eintrag--drittel { grid-column: span 1; }
.galerie__eintrag--breit img, .galerie__eintrag--fuellt img { height: auto; aspect-ratio: 4 / 3; }
}
@media (max-width: 30rem) {
.galerie { grid-template-columns: 1fr; }
.galerie__eintrag--fuellt, .galerie__eintrag--halb, .galerie__eintrag--drittel { grid-column: 1 / -1; }
}
.naechstes { padding: 0; }
.naechstes__link { position: relative; display: block; color: var(--licht); text-decoration: none; }
.naechstes__bau { height: clamp(24rem, 82vh, 54rem); }
.naechstes__bau::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8, 10, 11, .78), rgba(8, 10, 11, .05) 60%); pointer-events: none; }
.naechstes__text { position: absolute; z-index: 2; left: var(--innen); right: var(--innen); bottom: clamp(1.75rem, 6vh, 3.5rem); display: grid; gap: .6rem; }
.naechstes__label { color: var(--licht-2); }
.naechstes__titel { font-size: clamp(2.6rem, 5.6vw, 6.4rem); font-weight: 450; line-height: .96; --ls: -.04em; letter-spacing: var(--ls); }
.naechstes__ort { font-size: 1rem; color: var(--licht-2); }
.naechstes__zurueck { margin: 0; padding: 1.4rem var(--innen); font-size: .9375rem; border-bottom: 1px solid var(--linie); }
.naechstes__zurueck a { color: var(--nebel); text-decoration: none; }
.naechstes__zurueck a:hover { color: var(--licht); }
.leistungskopf { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalt); row-gap: 2.75rem; padding: calc(var(--kopf-hoehe) + clamp(2.5rem, 6vw, 5.5rem)) var(--innen) 0; align-items: end; }
.leistungskopf__text { grid-column: 1 / span 6; }
.leistungskopf__text .krumen { margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); }
.leistungskopf__text .seitenkopf__titel { font-size: clamp(2.4rem, 4.4vw, 4.9rem); margin-bottom: 2.25rem; }
.leistungskopf__text .lede { margin-bottom: 2.25rem; }
.leistungskopf__bild { grid-column: 8 / -1; overflow: hidden; }
.leistungskopf__bild img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.leistungskopf__linie { grid-column: 1 / -1; margin-top: clamp(1rem, 3vw, 2rem); color: var(--linie-stark); }
@media (max-width: 56rem) {
.leistungskopf__text, .leistungskopf__bild { grid-column: 1 / -1; }
.leistungskopf__bild img { aspect-ratio: 4 / 3; }
}
.zweispaltig { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalt); row-gap: 3rem; }
.zweispaltig__haupt { grid-column: 1 / span 7; }
.zweispaltig__neben { grid-column: 9 / -1; align-self: start; }
.zweispaltig__neben > * + * { margin-top: 1.6rem; }
.zweispaltig__haupt > h2 { margin-bottom: 1.9rem; }
.zweispaltig__titel { grid-column: 1 / -1; margin: 0; }
.zweispaltig--buendig .chronik { margin-top: 0; }
.zweispaltig--buendig .chronik__eintrag:first-child { border-top-color: var(--linie-stark); }
@media (max-width: 64rem) { .zweispaltig__haupt, .zweispaltig__neben { grid-column: 1 / -1; } }
.ansprechperson { display: grid; grid-template-columns: 4.75rem 1fr; gap: 1.1rem; align-items: start; padding-top: 1.4rem; border-top: 1px solid var(--linie); }
.ansprechperson img { width: 4.75rem; aspect-ratio: 1; object-fit: cover; border-radius: 50%; }
.ansprechperson h3 { font-size: 1.125rem; font-weight: 500; line-height: 1.3; margin-bottom: .1rem; }
.ansprechperson .klein { margin-bottom: .55rem; }
.ansprechperson--buero { grid-template-columns: 1fr; }
.kontaktzeilen { display: grid; gap: .35rem; justify-items: start; }
.kontaktzeilen a { color: var(--gruen-hell); text-decoration: none; min-height: 1.5rem; max-width: 100%; overflow-wrap: anywhere; }
.kontaktzeilen a:hover { text-decoration: underline; }
.kontaktzeilen--gross { font-size: clamp(1.35rem, 2vw, 1.85rem); font-weight: 450; letter-spacing: -.015em; gap: .6rem; }
.kontaktzeilen--gross a { color: var(--licht); }
.kontaktzeilen--gross a:hover { color: var(--gruen-hell); text-decoration: none; }
.kontaktzeilen--gross span { font-size: 1.0625rem; letter-spacing: 0; color: var(--nebel); margin-top: .5rem; }
.kontaktzeilen--hell a { color: var(--licht); text-decoration: underline; text-decoration-color: var(--linie-stark); }
.umfang__kopf { grid-column: 1 / span 4; }
.umfang__kopf h2 { margin-bottom: 1rem; }
.umfang { grid-column: 6 / -1; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.75rem var(--spalt); }
.umfang__gruppe { padding-top: 1.4rem; border-top: 1px solid var(--linie-stark); }
.umfang__gruppe h3 { font-size: 1.2rem; font-weight: 500; line-height: 1.3; margin-bottom: 1rem; }
.umfang__gruppe ul { list-style: none; display: grid; gap: .6rem; }
.umfang__gruppe li { position: relative; padding-left: 1.4rem; color: var(--licht-2); }
.umfang__gruppe li::before { content: ""; position: absolute; left: 0; top: .82em; width: .75rem; height: 1px; background: var(--gruen-hell); }
@media (max-width: 64rem) {
.umfang__kopf, .umfang { grid-column: 1 / -1; }
.umfang__kopf { margin-bottom: 2rem; }
}
@media (max-width: 40rem) { .umfang { grid-template-columns: 1fr; } }
.vollbild { height: clamp(22rem, 84vh, 60rem); overflow: hidden; }
.vollbild picture, .vollbild img { width: 100%; height: 100%; }
.vollbild img { object-fit: cover; }
.vollbild--hoch { margin-top: clamp(3rem, 6vw, 5rem); }
.vollbild--oben img { object-position: 50% 25%; }
.vollbild--personen { height: auto; }
.vollbild--personen picture { height: auto; }
.vollbild--personen img { height: auto; max-height: clamp(22rem, 82vh, 60rem); }
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
.vollbild img, .teamband__bild img, .kapitel__bild img, .leistungskopf__bild img { animation: tiefe linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; transform-origin: center; }
@keyframes tiefe { from { transform: scale(1.14) translateY(-3.5%); } to { transform: scale(1.14) translateY(3.5%); } }
.buehne__folien, .projektbuehne__bau { animation: zurueckbleiben linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
@keyframes zurueckbleiben { to { transform: translateY(24%); } }
}
}
.brief { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalt); row-gap: 2.75rem; align-items: start; }
.brief__bild { grid-column: 1 / span 4; position: sticky; top: calc(var(--kopf-hoehe) + 1.75rem); }
.brief__bild img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.brief__text { grid-column: 6 / span 7; }
.brief__text > h2 { margin-bottom: 2.25rem; }
.brief__text > .lede { margin-bottom: 2.75rem; }
.brief__text > * + .ansprechperson, .brief__text > * + .knopfreihe { margin-top: 2.75rem; }
.unterschrift { margin-top: 2.75rem; display: grid; gap: .2rem; color: var(--nebel); }
.unterschrift strong { color: var(--licht); font-weight: 500; font-size: 1.125rem; }
@media (max-width: 56rem) {
.brief__bild { grid-column: 1 / span 9; position: static; }
.brief__text { grid-column: 1 / -1; }
}
.chronik { list-style: none; margin-top: 2.75rem; border-bottom: 1px solid var(--linie); }
.chronik__eintrag { display: grid; grid-template-columns: 9rem 1fr; gap: 1.5rem; padding: 1.4rem 0; border-top: 1px solid var(--linie); }
.chronik__jahr { color: var(--licht); font-size: clamp(1.7rem, 2.6vw, 2.4rem); font-weight: 400; line-height: 1.05; letter-spacing: -.03em; font-variant-numeric: lining-nums; }
.chronik__eintrag p { padding-top: .4rem; }
@media (max-width: 30rem) { .chronik__eintrag { grid-template-columns: 1fr; gap: .4rem; } }
.werte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2.75rem, 5.5vw, 5rem) var(--spalt); list-style: none; }
.wert { position: relative; padding-top: 1.6rem; border-top: 1px solid var(--linie-stark); }
.wert::before { content: ""; position: absolute; left: 0; top: -1px; width: 3rem; height: 1px; background: var(--gruen-hell); }
.wert__titel { font-size: clamp(1.6rem, 2.6vw, 2.5rem); font-weight: 450; letter-spacing: -.03em; margin-bottom: 1rem; max-width: 18ch; }
.wert p { font-size: 1.0625rem; line-height: 1.65; max-width: 32em; }
@media (max-width: 48rem) { .werte { grid-template-columns: 1fr; } }
.bildreihe__liste { display: flex; align-items: flex-start; gap: var(--spalt); list-style: none; }
.bildreihe__liste > li { flex: var(--r, 1) 1 0; min-width: 0; overflow: hidden; }
.bildreihe__liste img { width: 100%; height: auto; }
@media (max-width: 48rem) {
.bildreihe__liste { display: block; columns: 2; column-gap: var(--spalt); }
.bildreihe__liste > li { break-inside: avoid; margin-bottom: var(--spalt); }
}
.partner { display: flex; flex-wrap: wrap; gap: 2rem 4rem; align-items: center; list-style: none; }
.partner img { max-height: 3rem; width: auto; filter: grayscale(1) invert(1) brightness(1.6); opacity: .75; mix-blend-mode: screen; }
.teamgruppen { display: grid; row-gap: clamp(4.5rem, 9vw, 8rem); }
.teamgruppe { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalt); row-gap: 2.25rem; padding-top: 1.6rem; border-top: 1px solid var(--linie-stark); }
.teamgruppe__kopf { grid-column: 1 / span 3; }
.teamgruppe__kopf h2 { margin-bottom: 1rem; }
.teamgruppe__kopf p { color: var(--nebel); }
.teamraster { grid-column: 4 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.75rem var(--spalt); list-style: none; }
.mitglied__bild { overflow: hidden; background: var(--nacht-3); margin-bottom: 1rem; }
.mitglied__bild img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transform: scale(var(--z, 1)); transform-origin: var(--ox, 50%) var(--oy, 50%); filter: grayscale(.25); transition: filter .6s; }
.mitglied:hover .mitglied__bild img { filter: none; }
.mitglied h3 { font-size: 1.125rem; font-weight: 500; line-height: 1.3; margin-bottom: .1rem; }
.mitglied h3 a { text-decoration-thickness: 1px; }
.mitglied .klein { margin: 0; }
.mitglied .kontaktzeilen { margin-top: .55rem; font-size: .9375rem; }
.mitglied--gross { grid-column: span 2; }
.mitglied--gross .mitglied__bild img { aspect-ratio: 3 / 2; object-position: 50% 0%; }
@media (max-width: 64rem) {
.teamgruppe__kopf, .teamraster { grid-column: 1 / -1; }
.teamraster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 44rem) {
.teamraster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mitglied--gross { grid-column: 1 / -1; }
}
.rollen { list-style: none; margin-top: 2.25rem; border-bottom: 1px solid var(--linie); }
.rollen li { padding: 1rem 0; border-top: 1px solid var(--linie); color: var(--licht); font-size: clamp(1.15rem, 1.6vw, 1.4rem); letter-spacing: -.01em; }
.stellenliste { list-style: none; border-bottom: 1px solid var(--linie); }
.stellenzeile { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) auto; gap: .5rem 2.25rem; align-items: baseline; padding: 2rem 0; border-top: 1px solid var(--linie); color: inherit; text-decoration: none; transition: background-color .4s; }
.stellenzeile__titel { grid-row: 1 / span 2; font-size: clamp(1.5rem, 2.4vw, 2.3rem); font-weight: 450; line-height: 1.08; letter-spacing: -.03em; transition: color .3s; }
.stellenzeile__meta { margin: 0; color: var(--nebel); }
.stellenzeile__text { grid-column: 2; margin: 0; }
.stellenzeile__mehr { grid-column: 3; grid-row: 1; display: inline-flex; align-items: center; gap: .8rem; font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--licht); }
.stellenzeile__mehr::before { content: ""; width: 2rem; height: 1px; background: currentColor; transition: width .5s var(--ease-raus); }
.stellenzeile:hover .stellenzeile__titel { color: var(--gruen-hell); }
.stellenzeile:hover .stellenzeile__mehr::before { width: 3.25rem; }
@media (max-width: 56rem) {
.stellenzeile { grid-template-columns: 1fr; }
.stellenzeile__titel, .stellenzeile__text, .stellenzeile__mehr { grid-column: 1; grid-row: auto; }
.stellenzeile__mehr { justify-self: start; }
}
.haken { list-style: none; display: grid; gap: .75rem; margin-bottom: 2.75rem; font-size: 1.0625rem; }
.haken li { position: relative; padding-left: 1.75rem; color: var(--licht-2); }
.haken li::before { content: ""; position: absolute; left: 0; top: .55em; width: .75rem; height: .4rem; border-left: 1.5px solid var(--gruen-hell); border-bottom: 1.5px solid var(--gruen-hell); transform: rotate(-45deg); }
.stelle__zwischen { margin: 3rem 0 1.4rem; }
.hinweis { padding: 1.1rem 1.35rem; border: 1px solid var(--linie-stark); background: var(--nacht-2); }
.beitrag__bild { padding: clamp(2.75rem, 5.5vw, 4.5rem) var(--innen) 0; }
.beitrag__bild picture { overflow: hidden; }
.beitrag__bild img { width: 100%; max-height: 84vh; object-fit: cover; }
.beitrag__raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalt); row-gap: 3rem; }
.beitrag__text { grid-column: 1 / span 7; }
.beitrag__bezug { grid-column: 9 / -1; display: grid; gap: 1.1rem; align-content: start; }
@media (max-width: 64rem) { .beitrag__text, .beitrag__bezug { grid-column: 1 / -1; } }
.kontaktseite { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalt); row-gap: 3.75rem; }
.kontaktseite__formular { grid-column: 1 / span 7; }
.kontaktseite__formular > h2 { margin-bottom: 2rem; }
.kontaktseite__daten { grid-column: 9 / -1; display: grid; gap: 3.25rem; align-content: start; }
.kontaktseite__daten h2 { margin-bottom: 1.4rem; }
@media (max-width: 64rem) { .kontaktseite__formular, .kontaktseite__daten { grid-column: 1 / -1; } }
.schrittliste { list-style: none; counter-reset: schritt; display: grid; gap: 1.4rem; }
.schrittliste li { counter-increment: schritt; position: relative; padding: 1.1rem 0 0 2.75rem; border-top: 1px solid var(--linie); }
.schrittliste li::before { content: counter(schritt); position: absolute; left: 0; top: 1rem; color: var(--gruen-hell); font-size: 1.5rem; font-weight: 400; line-height: 1; }
.schrittliste h3 { font-size: 1.125rem; font-weight: 500; margin-bottom: .4rem; }
.schrittliste p { color: var(--nebel); }
.anfahrt__adresse { color: var(--licht); font-size: clamp(1.35rem, 2vw, 1.8rem); font-weight: 450; letter-spacing: -.015em; margin: 1.6rem 0 1.9rem; }
.routen { display: flex; flex-wrap: wrap; gap: .25rem 2rem; }
.anfahrt__bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.formular { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem var(--spalt); }
.feld { display: grid; gap: .55rem; align-content: start; }
.feld--breit { grid-column: 1 / -1; }
.feld label { color: var(--licht); font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.feld .optional { font-weight: 400; color: var(--nebel); letter-spacing: .08em; }
.feld input, .feld select, .feld textarea {
width: 100%;
min-height: 3.4rem;
padding: .9rem 0;
border: 0;
border-bottom: 1px solid var(--linie-stark);
border-radius: 0;
background: transparent;
color: var(--licht);
font-family: var(--sans);
font-size: 1.125rem;
line-height: 1.4;
-webkit-appearance: none;
appearance: none;
transition: border-color .25s, box-shadow .25s;
}
.feld select { background-image: linear-gradient(45deg, transparent 50%, var(--licht) 50%), linear-gradient(135deg, var(--licht) 50%, transparent 50%); background-position: calc(100% - .9rem) 1.55rem, calc(100% - .55rem) 1.55rem; background-size: .35rem .35rem; background-repeat: no-repeat; padding-right: 2.5rem; }
.feld select option { background: var(--nacht-2); color: var(--licht); }
.feld textarea { min-height: 11rem; resize: vertical; border: 1px solid var(--linie-stark); padding: 1rem; }
.feld input:hover, .feld select:hover, .feld textarea:hover { border-color: var(--licht); }
.feld input:focus, .feld select:focus, .feld textarea:focus { outline: none; border-color: var(--gruen-hell); box-shadow: 0 1px 0 0 var(--gruen-hell); }
.feld textarea:focus { box-shadow: 0 0 0 1px var(--gruen-hell); }
.feld [aria-invalid="true"] { border-color: var(--fehler); box-shadow: 0 1px 0 0 var(--fehler); }
.feld__fehler { margin: 0; font-size: .9375rem; color: var(--fehler); }
.feld__fehler:empty { display: none; }
.honig { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.formular__fuss { grid-column: 1 / -1; display: grid; gap: 1.4rem; }
.formular__hinweis { margin: 0; font-size: .9375rem; line-height: 1.55; color: var(--nebel); max-width: 40rem; }
.formular__hinweis a { color: var(--gruen-hell); }
.formular__status { margin: 0; padding: 1.1rem 1.35rem; border: 1px solid var(--linie-stark); }
.formular__status:empty { display: none; }
.formular__status:focus { outline: none; }
.mailblock { container-type: inline-size; }
.mailblock > h2 { margin-bottom: 1.25rem; }
.mailblock__text { max-width: 36rem; margin: 0 0 2.75rem; color: var(--nebel); font-size: 1.0625rem; line-height: 1.6; }
.mailblock__adresse { margin: 0 0 2.25rem; font-size: clamp(1.05rem, 7.1cqi, 3.4rem); font-weight: 450; letter-spacing: -.025em; line-height: 1.15; }
.mailblock__adresse a { position: relative; display: inline-block; padding-bottom: .2em; color: var(--licht); text-decoration: none; white-space: nowrap; transition: color .35s var(--ease-sanft); }
.mailblock__adresse a::before, .mailblock__adresse a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; }
.mailblock__adresse a::before { height: 1px; background: var(--linie-stark); }
.mailblock__adresse a::after { height: 2px; background: var(--gruen-hell); transform: scaleX(0); transform-origin: left center; transition: transform .75s var(--ease-zeichnen); }
.mailblock__adresse a:hover, .mailblock__adresse a:focus-visible { color: var(--gruen-hell); }
.mailblock__adresse a:hover::after, .mailblock__adresse a:focus-visible::after { transform: scaleX(1); }
.mailblock__aktionen { display: flex; flex-wrap: wrap; gap: .75rem; }
.mailblock__aktionen [hidden] { display: none; }
@container (max-width: 27rem) { .mailblock__aktionen { flex-direction: column; } .mailblock__aktionen .knopf { width: 100%; } }
.mailblock__status { min-height: 1.5em; margin: 1rem 0 0; color: var(--gruen-hell); font-size: .9375rem; }
.mailblock__telefon { margin: 2rem 0 0; padding-top: 1.4rem; border-top: 1px solid var(--linie); color: var(--nebel); font-size: clamp(1.05rem, 1rem + .4vw, 1.3rem); }
.mailblock__telefon a { margin-left: .35em; color: var(--licht); text-decoration: none; white-space: nowrap; }
.mailblock__telefon a:hover, .mailblock__telefon a:focus-visible { color: var(--gruen-hell); }
.mailblock .formular__hinweis { margin-top: 1.75rem; }
.kontaktadresse { margin-bottom: .9rem; color: var(--licht-2); font-size: 1.125rem; line-height: 1.6; }
@media (prefers-reduced-motion: reduce) { .mailblock__adresse a::after { transition: none; } }
.formular__status.ist-erfolg { border-color: var(--gruen-hell); background: rgba(69, 192, 139, .1); color: var(--licht); }
.formular__status.ist-fehler { border-color: var(--fehler); background: rgba(240, 122, 116, .08); color: var(--licht); }
@media (max-width: 40rem) { .formular { grid-template-columns: 1fr; } }
.fehlerseite { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalt); row-gap: 3rem; padding: calc(var(--kopf-hoehe) + clamp(2.75rem, 7vw, 6rem)) var(--innen) 0; align-items: end; }
.fehlerseite__text { grid-column: 1 / span 6; }
.fehlerseite__zahl { margin: 0 0 1.1rem; color: var(--gruen-hell); font-size: .75rem; font-weight: 600; letter-spacing: .14em; }
.fehlerseite__text .seitenkopf__titel { font-size: clamp(2.4rem, 4.4vw, 4.9rem); margin-bottom: 2.25rem; }
.fehlerseite__text .lede { margin-bottom: 2.25rem; }
.fehlerseite__skizze { grid-column: 7 / -1; position: relative; }
.fehlerseite__skizze svg { display: block; width: 100%; height: auto; fill: none; stroke: var(--licht); }
.skizze { --w: 1.5; }
.skizze .z0 { stroke-width: calc(var(--w) * var(--skala, 1)); }
.skizze .z1 { stroke-width: calc(var(--w) * .78 * var(--skala, 1)); opacity: .8; }
.skizze .z2 { stroke-width: calc(var(--w) * .6 * var(--skala, 1)); opacity: .55; }
.js .skizze path { stroke-dasharray: 1 2; stroke-dashoffset: 1; }
.fehlerseite__skizze figcaption { margin-top: .6rem; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--nebel); }
.fehlerseite > .bezugslinie { grid-column: 1 / -1; color: var(--linie-stark); }
@media (max-width: 56rem) { .fehlerseite__text, .fehlerseite__skizze { grid-column: 1 / -1; } }
.fuss { position: relative; background: var(--nacht-2) var(--korn); color: var(--licht-2); padding: 0 var(--innen); border-top: 1px solid var(--linie); }
.fuss a:not(.knopf) { color: inherit; }
.einladung { padding: var(--abstand-l) 0 var(--abstand-m); border-bottom: 1px solid var(--linie); }
.einladung__titel { margin-bottom: clamp(2.25rem, 4.5vw, 4rem); font-size: clamp(2.6rem, 6.6vw, 7.5rem); font-weight: 450; line-height: .94; --ls: -.04em; letter-spacing: var(--ls); max-width: 12ch; }
.einladung__unten { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalt); row-gap: 2rem; align-items: end; }
.einladung__text { grid-column: 1 / span 6; margin: 0; color: var(--licht-2); font-size: clamp(1.15rem, 1.6vw, 1.4rem); line-height: 1.5; }
.einladung__text.kontaktzeilen { font-size: 1.0625rem; gap: .6rem; }
.einladung__text .klein { color: var(--nebel); }
.einladung__text .klein a { color: var(--licht); }
.einladung .knopfreihe { grid-column: 8 / -1; justify-content: flex-end; }
.einladung__prosa h2 { margin-bottom: 2.25rem; font-size: clamp(2.8rem, 8vw, 9rem); font-weight: 450; line-height: .92; letter-spacing: -.045em; }
.einladung__prosa p { max-width: 38em; font-size: clamp(1.15rem, 1.5vw, 1.35rem); line-height: 1.55; margin-bottom: 2.75rem; }
@media (max-width: 64rem) {
.einladung__text, .einladung .knopfreihe { grid-column: 1 / -1; justify-content: flex-start; }
}
.fuss__info { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2.75rem var(--spalt); padding: clamp(3.25rem, 6.5vw, 5.5rem) 0 2.75rem; }
@media (max-width: 72rem) { .fuss__info { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fuss__spalte h2 { margin-bottom: 1.1rem; color: var(--nebel); }
.fuss__spalte ul { list-style: none; display: grid; gap: .5rem; }
.fuss__spalte a { text-decoration: none; transition: color .3s; }
.fuss__spalte a:hover { color: var(--licht); }
.fuss__spalte address { margin-bottom: .8rem; }
@media (max-width: 56rem) { .fuss__info { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 30rem) { .fuss__info { grid-template-columns: 1fr; } }
.fuss__region { margin: 0 0 clamp(2.75rem, 6.5vw, 5.5rem); max-width: 52em; font-size: .9375rem; color: var(--nebel); }
.fuss__region a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.fuss__unten { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2rem; padding: 1.6rem 0 2.25rem; border-top: 1px solid var(--linie); color: var(--nebel); }
.fuss__unten p { margin: 0; }
.fuss__logo { display: inline-block; margin-left: .8rem; vertical-align: calc(-1rem * 9 / 42); color: var(--licht); }
.fuss__logo svg { display: block; height: 1rem; width: auto; overflow: visible; }
.fuss__logo .marke__gruen { fill: var(--gruen-hell); }
.fuss__unten ul { display: flex; flex-wrap: wrap; gap: .5rem 2rem; list-style: none; }
.fuss__unten a { text-decoration: none; display: inline-block; min-height: 1.5rem; }
.fuss__unten a:hover, .fuss__unten a[aria-current] { color: var(--licht); }
.lichtkasten { width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #08090a; color: var(--licht); overflow: hidden; }
.lichtkasten::backdrop { background: rgba(8, 9, 10, .97); }
.lichtkasten[open] { animation: einblenden-schnell .35s var(--ease-sanft); }
@keyframes einblenden-schnell { from { opacity: 0; } }
.lichtkasten__buehne { position: absolute; inset: 4.5rem 5rem 5rem; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; }
.lichtkasten__buehne picture { display: contents; }
.lichtkasten__buehne img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.lichtkasten__leiste { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; gap: 1.5rem; align-items: center; padding: 1rem 1.5rem 1.25rem; font-size: .9375rem; line-height: 1.45; color: var(--licht-2); }
.lichtkasten__leiste p { margin: 0; }
.lichtkasten__text { max-width: 60rem; }
.lichtkasten__zahl { white-space: nowrap; font-variant-numeric: tabular-nums; }
.lichtkasten button { position: absolute; display: grid; place-items: center; width: 3.25rem; height: 3.25rem; padding: 0; border: 1px solid var(--linie-stark); border-radius: 50%; background: rgba(0, 0, 0, .45); color: #fff; cursor: pointer; font-size: 1.5rem; line-height: 1; transition: border-color .3s, background-color .3s; }
.lichtkasten button:hover { border-color: #fff; background: rgba(255, 255, 255, .08); }
.lichtkasten__zu { top: 1rem; right: 1rem; }
.lichtkasten__zurueck { left: 1rem; top: 50%; transform: translateY(-50%); }
.lichtkasten__vor { right: 1rem; top: 50%; transform: translateY(-50%); }
@media (max-width: 40rem) {
.lichtkasten__buehne { inset: 4.25rem .5rem 8rem; }
.lichtkasten__zurueck, .lichtkasten__vor { top: calc(50% - 1.75rem); }
.lichtkasten__zurueck { left: .5rem; }
.lichtkasten__vor { right: .5rem; }
.lichtkasten__leiste { flex-direction: column; align-items: flex-start; gap: .25rem; }
}
@media (prefers-reduced-motion: no-preference) {
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: seite-aus .4s var(--ease-sanft) both; }
::view-transition-new(root) { animation: seite-ein .8s var(--ease-raus) both; }
::view-transition-group(*) { animation-duration: .75s; animation-timing-function: var(--ease-raus); }
}
.vt-auswahl .kopf { view-transition-name: kopf; }
.vt-auswahl a [data-vt]:not(.vt-behalten) { view-transition-name: none !important; }
::view-transition-old(kopf), ::view-transition-new(kopf) { animation: none; mix-blend-mode: normal; }
@media (prefers-reduced-motion: no-preference) {
.lader-vt .lader { view-transition-name: lader; }
.lader-vt [data-vt], .lader-geht [data-vt] { view-transition-name: none !important; }
html.lader-vt::view-transition-group(*) { animation: none; }
html.lader-vt::view-transition-old(root) { animation: lader-halten .4s linear both; }
html.lader-vt::view-transition-new(root) { animation: lader-warten .4s linear both; }
html.lader-vt::view-transition-old(lader), html.lader-vt::view-transition-new(lader) { animation: none; }
html.lader-vt::view-transition-old(lader) { opacity: 0; }
}
@keyframes lader-halten { from, to { opacity: 1; } }
@keyframes lader-warten { from, to { opacity: 0; } }
@keyframes seite-aus { to { opacity: 0; transform: translateY(-1.5rem); } }
@keyframes seite-ein { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
.js .galerie__eintrag > a, .js .enthuellen > * { clip-path: none; }
.js .enthuellen > * img, .js .galerie__eintrag > a img { transform: none; }
.js .zeilen-geteilt .zeile__text { transform: none; }
.js [data-bau] .bau__papier, .js [data-bau] .bau__linien { display: none; }
}
@media print {
.kopf, .auftakt, .filter, .ansicht, .film, .knopfreihe, .lichtkasten, .naechstes, .skip, .einladung, .lader, .buehne__steuerung, .bau__linien, .bau__papier, .zeiger, .listenvorschau { display: none !important; }
html, body { background: #fff !important; color: #111 !important; font-size: 11pt; }
h1, h2, h3, h4, .lede, strong, .prose, .klein { color: #111 !important; }
.buehne, .projektbuehne { height: auto; min-height: 0; color: #111; }
.fuss { background: #fff; color: #111; }
.fuss__logo { color: #111; }
.fuss__logo .marke__gruen { fill: #188859; }
a { text-decoration: none; }
}
.bauaufgabekopf__bau { aspect-ratio: 4 / 5; }
.bauaufgabekopf__bild .bau__bild img { aspect-ratio: auto; height: 100%; }
.bauaufgabekopf__bild .bildtext a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
@media (max-width: 56rem) { .bauaufgabekopf__bau { aspect-ratio: 4 / 3; } }
@media (min-width: 64rem) { .bauaufgabe__neben { position: sticky; top: 7rem; } }
.bauaufgabe__neben .plankopf + .ansprechperson { margin-top: 2.25rem; }
.quellenabschnitt__titel { grid-column: 1 / span 4; margin-bottom: 1rem; }
.quellen { grid-column: 6 / -1; list-style: none; display: grid; gap: .6rem; margin: 0; padding: 0; font-size: .9375rem; line-height: 1.5; }
.quellen a { color: var(--gruen-hell); text-decoration-color: rgba(69, 192, 139, .45); }
.beitrag__quellentitel { margin: 2.75rem 0 1rem; }
@media (max-width: 64rem) { .quellenabschnitt__titel, .quellen { grid-column: 1 / -1; } }
.bauaufgabenleiste { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.75rem; margin: 0; }
.bauaufgabenleiste__titel { color: var(--nebel); }
.fragenhub { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalt); align-items: start; }
.fragenhub__inhalt { grid-column: 1 / span 3; position: sticky; top: 7rem; }
.fragenhub__inhaltstitel { margin: 0 0 1rem; color: var(--nebel); }
.fragenhub__inhalt ol { list-style: none; display: grid; gap: .6rem; margin: 0; padding: 0; }
.fragenhub__inhalt a { text-decoration: none; color: var(--licht-2); transition: color .3s; }
.fragenhub__inhalt a:hover { color: var(--gruen-hell); }
.fragenhub__liste { grid-column: 5 / -1; }
.fragengruppe + .fragengruppe { margin-top: clamp(4rem, 8vw, 7rem); }
.fragengruppe__titel { padding-top: 1.4rem; border-top: 1px solid var(--linie-stark); margin-bottom: .6rem; }
.antwort { padding: 1.9rem 0; border-top: 1px solid var(--linie); }
.fragengruppe__titel + .antwort { border-top: 0; }
.antwort__frage { max-width: 32em; margin: 0 0 1.1rem; font-size: clamp(1.3rem, 1.8vw, 1.6rem); font-weight: 450; line-height: 1.28; letter-spacing: -.015em; }
.antwort__text { font-size: 1.125rem; }
.antwort__text table { max-width: 34rem; }
.antwort__text th:last-child, .antwort__text td.zahl { text-align: right; padding-right: 0; font-variant-numeric: tabular-nums; }
.antwort__quellen { max-width: 46em; margin: .3rem 0 0; font-size: .875rem; line-height: 1.55; color: var(--nebel); }
.antwort__quellen a { color: var(--gruen-hell); text-decoration-color: rgba(69, 192, 139, .45); }
.antwort:target .antwort__frage { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; text-decoration-color: var(--gruen-hell); }
.fragenhub__hinweis { max-width: 46em; margin: 3.25rem 0 0; font-size: .875rem; color: var(--nebel); }
@media (max-width: 64rem) {
.fragenhub__inhalt { grid-column: 1 / -1; position: static; margin-bottom: 2.75rem; }
.fragenhub__inhalt ol { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.fragenhub__liste { grid-column: 1 / -1; }
}
.region { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalt); row-gap: 3rem; align-items: start; }
.region__karte { grid-column: 1 / span 7; margin: 0; position: sticky; top: 7rem; }
.region__orte { grid-column: 9 / -1; }
.region__karte svg { display: block; width: 100%; height: auto; overflow: visible; }
.region__karte path { fill: none; stroke: var(--licht-2); stroke-width: calc(var(--w, 1.2) * var(--skala, 1)); stroke-linecap: round; stroke-linejoin: round; }
.region__karte .karte__ringe path { --w: 1; opacity: .4; }
.region__karte .karte__linien path { --w: 1; opacity: .7; }
.region__karte .karte__marken path { --w: 1.5; }
.region__karte .karte__marken path.karte__neben { --w: 1; opacity: .5; }
.region__karte text { font-family: var(--sans); font-size: calc(12.5px * min(var(--skala, 1), 1.6)); fill: var(--licht); }
.region__karte text.karte__neben, .region__karte .karte__ring, .region__karte .karte__mass, .region__karte .karte__fern { fill: var(--nebel); font-size: calc(11.5px * min(var(--skala, 1), 1.6)); }
.region__karte .karte__nord { font-weight: 500; }
.region__karte .karte__punkt { fill: var(--licht-2); }
.region__karte .karte__buero { fill: var(--gruen-hell); }
.region__karte .karte__bueroname { fill: var(--gruen-hell); font-weight: 500; }
.js .region__karte path { stroke-dasharray: 1 2; stroke-dashoffset: 1; }
.js .region__karte.ist-gezeichnet path { stroke-dashoffset: 0; }
.js .region__karte .karte__beschriftung { opacity: 0; transition: opacity 1.2s var(--ease-sanft); }
.js .region__karte.ist-beschriftet .karte__beschriftung { opacity: 1; }
.orte { list-style: none; margin: 2.25rem 0 0; padding: 0; border-bottom: 1px solid var(--linie); }
.ort { padding: 1.4rem 0; border-top: 1px solid var(--linie); }
.ort__name { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .45rem; font-size: 1.3rem; font-weight: 450; letter-spacing: -.01em; }
.ort__zahl { flex: none; color: var(--nebel); }
.ort__text { margin: 0 0 .5rem; color: var(--licht-2); }
.ort__projekte { margin: 0; font-size: .9375rem; line-height: 1.55; }
.ort__projekte a { color: var(--gruen-hell); text-decoration-color: rgba(69, 192, 139, .45); }
@media (max-width: 64rem) {
.region__karte, .region__orte { grid-column: 1 / -1; }
.region__karte { position: static; }
}
@media (max-width: 40rem) { .region__karte text.karte__neben, .region__karte .karte__ring { display: none; } }
@media (prefers-reduced-motion: reduce) {
.js .region__karte path { stroke-dashoffset: 0; }
.js .region__karte .karte__beschriftung { opacity: 1; transition: none; }
}