/* 150 – Litfaßsäule · Anton + Lora
   html.rot (JS, ≥ 900 px): drehbare Säule in CSS 3D. Sonst: Plakate als Liste. */

:root {
  --wall: #e6e3dc;
  --sky: #eef0ec;
  --green: #2c4b3b;
  --green-d: #1d3528;
  --green-l: #46705a;
  --cream: #f4eddc;
  --yellow: #f2c230;
  --red: #c8372a;
  --teal: #0a7a63;
  --blue: #243f78;
  --ink: #1b1a18;
  --ink-2: #4a4640;
  --display: 'Anton', 'Impact', 'Haettenschweiler', 'Arial Narrow Bold', sans-serif;
  --serif: 'Lora', Georgia, 'Times New Roman', serif;
  --pad: clamp(16px, 4vw, 56px);
  --paste: linear-gradient(100deg, transparent 0 18%, rgba(255,255,255,.12) 19%, transparent 23% 61%, rgba(255,255,255,.1) 62%, transparent 66%), linear-gradient(180deg, rgba(255,255,255,.16), transparent 5% 95%, rgba(255,255,255,.14));
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' seed='5'/%3E%3CfeColorMatrix values='0 0 0 0 .2  0 0 0 0 .2  0 0 0 0 .18  0 0 0 .08 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23f)'/%3E%3C/svg%3E");
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--wall) var(--grain); color: var(--ink); font: 400 18px/1.6 var(--serif); overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: 1px; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
h1, h2, h3, p, figure, dl, dd { margin: 0; }
h1, h2 { font-family: var(--display); font-weight: 400; text-transform: uppercase; line-height: .98; letter-spacing: .005em; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--ink); color: #fff; padding: 8px 14px; }
.skip:focus { top: 12px; }
.kicker { font: 600 13px/1.4 var(--serif); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 12px; }

/* ---------- Kopf ---------- */
.top { position: relative; z-index: 30; background: var(--sky); border-bottom: 1px solid rgba(0,0,0,.08); }
.top__in { max-width: 1320px; margin: 0 auto; padding: 14px var(--pad); display: flex; align-items: center; gap: 34px; }
.logo img { width: 74px; aspect-ratio: 1510 / 1300; }
.nav { flex: 1; display: flex; align-items: center; gap: 26px; }
.nav__list { list-style: none; margin: 0 auto 0 0; padding: 0; display: flex; gap: 6px; }
.nav__list a { display: block; padding: 8px 14px; font: 400 18px/1 var(--display); text-transform: uppercase; letter-spacing: .04em; text-decoration: none; }
.nav__list a:hover { background: var(--yellow); }
.nav__end { display: flex; align-items: center; gap: 16px; }
.tel { font: 400 20px var(--display); letter-spacing: .03em; text-decoration: none; }
.lang { display: inline-grid; place-items: center; width: 44px; height: 44px; background: var(--green); color: var(--cream); border-radius: 50%; text-decoration: none; font: 400 15px var(--display); letter-spacing: .06em; }
.lang:hover { background: var(--red); }
.menu { display: none; }

/* ---------- Szene ---------- */
.scene {
  position: relative;
  padding: 26px var(--pad) 0;
  background: linear-gradient(180deg, var(--sky) 0, #e9ebe5 72%, #d9d7cf 72.2%, #cfccc3 100%);
  overflow: hidden;
}
.scene::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 28%; background: repeating-linear-gradient(90deg, transparent 0 58px, rgba(0,0,0,.06) 58px 60px), repeating-linear-gradient(0deg, transparent 0 28px, rgba(0,0,0,.05) 28px 30px); pointer-events: none; }
.saule { position: relative; z-index: 1; --ph: clamp(440px, calc(100vh - 372px), 600px); --pw: calc(var(--ph) * .69); --R: calc(var(--pw) * 1.2071); --vis: calc(var(--R) * 1.68); }

/* Kuppel */
.saule__dome { position: relative; width: calc(var(--vis) * 1.08); max-width: 100%; margin: 0 auto; height: 118px; z-index: 5; }
.saule__finial { position: absolute; left: 50%; top: 0; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #c9a23a, #7b5d14); box-shadow: 0 2px 2px rgba(0,0,0,.3); }
.saule__finial::after { content: ''; position: absolute; left: 6px; top: 16px; width: 6px; height: 14px; background: linear-gradient(90deg, #5a4410, #b38f2c, #5a4410); }
.saule__cap { position: absolute; left: 12%; right: 12%; top: 26px; height: 74px; border-radius: 50% 50% 6px 6px / 100% 100% 6px 6px; background: repeating-linear-gradient(90deg, rgba(0,0,0,.12) 0 2px, transparent 2px 7.6%), radial-gradient(ellipse at 36% 10%, var(--green-l), var(--green) 45%, var(--green-d) 100%); box-shadow: inset 0 -8px 10px rgba(0,0,0,.25); }
.saule__cornice { position: absolute; left: 0; right: 0; bottom: -56px; height: 92px; background: linear-gradient(180deg, #3f6550 0, var(--green) 18%, #23402f 30%, #4b735c 34%, var(--green) 44%, var(--green-d) 100%); border-radius: 10px 10px 0 0; -webkit-mask: radial-gradient(ellipse 50% 62px at 50% 100%, transparent 97%, #000 100%); mask: radial-gradient(ellipse 50% 62px at 50% 100%, transparent 97%, #000 100%); box-shadow: 0 8px 10px rgba(0,0,0,.2); }
.saule__base { position: relative; width: calc(var(--vis) * 1.06); max-width: 100%; margin: -56px auto 0; height: 104px; z-index: 5; }
.saule__plinth { position: absolute; inset: 0; background: linear-gradient(180deg, var(--green-d), var(--green) 30%, #23402f 62%, #4b735c 66%, var(--green-d) 100%); border-radius: 0 0 6px 6px; -webkit-mask: radial-gradient(ellipse 50% 62px at 50% 0, transparent 97%, #000 100%); mask: radial-gradient(ellipse 50% 62px at 50% 0, transparent 97%, #000 100%); }
.saule__base::after { content: ''; position: absolute; left: -4%; right: -4%; bottom: -14px; height: 26px; border-radius: 50%; background: radial-gradient(ellipse, rgba(0,0,0,.32), transparent 70%); z-index: -1; }

/* Plakate: gemeinsame Gestaltung */
.poster { position: relative; overflow: hidden; container-type: inline-size; background: var(--cream); color: var(--ink); }
.poster::before { content: ''; position: absolute; inset: 0; z-index: 3; background: var(--paste); pointer-events: none; mix-blend-mode: screen; }
.poster::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12), inset 6px 0 0 -3px rgba(255,255,255,.25); }
.poster__in { position: relative; z-index: 2; height: 100%; padding: 8cqw 8cqw 7cqw; display: flex; flex-direction: column; }
.p-kick { font: 600 clamp(11px, 3.4cqw, 14px)/1.3 var(--serif); letter-spacing: .16em; text-transform: uppercase; margin-bottom: 4cqw; }
.p-big { font: 400 clamp(26px, 13cqw, 62px)/.95 var(--display); text-transform: uppercase; }
.p-sub { font: italic 400 clamp(13px, 4.2cqw, 18px)/1.4 var(--serif); }
.p-brand { margin-top: auto; font: 400 clamp(12px, 4cqw, 18px)/1 var(--display); letter-spacing: .08em; text-transform: uppercase; }
.p-link { margin-top: auto; align-self: flex-start; font: 400 clamp(13px, 4.6cqw, 20px)/1 var(--display); text-transform: uppercase; letter-spacing: .06em; text-decoration: none; padding: 3cqw 4cqw; border: 2px solid currentColor; }
.p-link::after { content: ' »'; }

/* 0 Hero */
.poster--hero { background: var(--yellow); }
.poster--hero .poster__in { padding: 6.6cqw 7cqw 9cqw; }
.poster--hero .kicker { font-size: clamp(11px, 3.3cqw, 14px); margin-bottom: 3.6cqw; color: var(--ink); border-bottom: 2px solid var(--ink); padding-bottom: 2.6cqw; }
h1 { font-size: clamp(36px, 13.2cqw, 62px); margin-bottom: 3.6cqw; letter-spacing: 0; }
.lead { font-size: clamp(13.5px, 3.75cqw, 17px); line-height: 1.48; }
.ctas { display: flex; flex-wrap: wrap; gap: 2.4cqw; margin-top: 4.2cqw; }
.btn { display: inline-flex; align-items: center; min-height: max(44px, 11cqw); padding: 0 5cqw; background: var(--ink); color: var(--yellow); text-decoration: none; font: 400 clamp(14px, 4.4cqw, 19px)/1 var(--display); letter-spacing: .05em; text-transform: uppercase; border: 2px solid var(--ink); }
.btn:hover { background: var(--red); border-color: var(--red); color: #fff; }
.btn--line { background: transparent; color: var(--ink); }
.btn--line:hover { background: var(--ink); color: var(--yellow); border-color: var(--ink); }
.poster__foot { margin-top: auto; padding-top: 4cqw; display: flex; justify-content: space-between; gap: 10px; font: 400 clamp(11px, 3.4cqw, 15px)/1.2 var(--display); text-transform: uppercase; letter-spacing: .06em; border-top: 2px solid var(--ink); }

/* 1 Schwerpunkt: rot */
.poster--focus { background: var(--red); color: #fff; }
.poster--focus .p-big { font-size: clamp(30px, 17cqw, 76px); margin-bottom: 6cqw; }
.p-list { list-style: none; padding: 0; margin: 0; border-top: 2px solid rgba(255,255,255,.7); }
.p-list li { font: 400 clamp(13px, 4.6cqw, 20px)/1.2 var(--display); text-transform: uppercase; letter-spacing: .03em; padding: 2.2cqw 0; border-bottom: 1px solid rgba(255,255,255,.45); }

/* 2 Foto: Küste */
.poster--photo { background: var(--blue); color: #fff; }
.poster--photo .poster__in { padding: 0; }
.poster--photo img { width: 100%; height: 58%; object-fit: cover; filter: grayscale(1) contrast(1.2) brightness(1.18); mix-blend-mode: multiply; }
.poster--photo .p-big { padding: 6cqw 7cqw 2cqw; font-size: clamp(26px, 12cqw, 56px); color: var(--yellow); }
.poster--photo .p-sub { padding: 0 7cqw; }
.poster--photo .p-brand { padding: 0 7cqw 7cqw; }

/* 3 Leistungen: Holzlettern */
.poster--svc { background: #efe7d3; }
.p-stack { list-style: none; padding: 0; margin: 0; }
.p-stack li { font: 400 clamp(18px, 8.6cqw, 40px)/1.02 var(--display); text-transform: uppercase; letter-spacing: -.005em; color: var(--blue); }
.p-stack li:nth-child(even) { color: var(--red); }
.poster--svc .p-kick { color: var(--blue); }
.poster--svc .p-link { color: var(--blue); }

/* 4 Route */
.poster--route { background: #fff; }
.p-codes { list-style: none; padding: 0; margin: 0 0 4cqw; display: grid; gap: 0; }
.p-codes li { font: 400 clamp(30px, 21cqw, 96px)/.92 var(--display); letter-spacing: .02em; position: relative; padding-left: 14cqw; }
.p-codes li::before { content: ''; position: absolute; left: 4cqw; top: 50%; width: 4.5cqw; height: 4.5cqw; margin-top: -2.25cqw; border-radius: 50%; border: 3px solid var(--red); background: #fff; }
.p-codes li::after { content: ''; position: absolute; left: calc(6.25cqw - 1.5px); top: 50%; height: 100%; border-left: 3px dashed var(--red); }
.p-codes li:last-child::after { display: none; }
.p-codes li:first-child::before, .p-codes li:last-child::before { background: var(--red); }
.poster--route .p-sub { margin-top: auto; }

/* 5 Kontakt: grün */
.poster--contact { background: var(--teal); color: #fff; }
.poster--contact .p-big { font-size: clamp(30px, 17cqw, 78px); margin-bottom: 5cqw; }
.p-tel { font: 400 clamp(22px, 10.5cqw, 48px)/1 var(--display); color: var(--yellow); margin-bottom: 4cqw; letter-spacing: .01em; }

/* 6 Über uns */
.poster--about { background: var(--cream); }
.poster--about .poster__in { padding: 7cqw; }
.poster--about img { width: 100%; aspect-ratio: 1; object-fit: cover; filter: grayscale(1) contrast(1.1); margin-bottom: 5cqw; }
.poster--about .p-big { font: italic 600 clamp(20px, 8.4cqw, 38px)/1.1 var(--serif); text-transform: none; margin-bottom: 3cqw; }

/* 7 Ablauf */
.poster--steps { background: var(--ink); color: var(--cream); }
.poster--steps .p-kick { color: var(--yellow); }
.p-steps { list-style: none; padding: 0; margin: 0; counter-reset: s; }
.p-steps li { counter-increment: s; font: 400 clamp(22px, 12cqw, 56px)/1.05 var(--display); text-transform: uppercase; display: flex; gap: 4cqw; align-items: baseline; padding: 1.6cqw 0; border-bottom: 1px solid rgba(255,255,255,.25); }
.p-steps li::before { content: counter(s); font: italic 400 clamp(14px, 6cqw, 28px) var(--serif); color: var(--yellow); }

/* Steuerung */
.saule__ctrl { display: flex; justify-content: center; align-items: center; gap: 18px; padding: 18px 0 26px; position: relative; z-index: 6; }
.saule__ctrl[hidden] { display: none; }
.turn { width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--ink); background: var(--cream); color: var(--ink); font: 400 30px/1 var(--display); cursor: pointer; display: grid; place-items: center; padding-bottom: 4px; }
.turn:hover { background: var(--yellow); }
.saule__hint { font: italic 400 15px var(--serif); color: var(--ink-2); }

/* ---------- Liste (Standard: ohne JS, mobil) ---------- */
html:not(.rot) .saule__dome { width: min(100%, 520px); }
html:not(.rot) .saule__base { width: min(100%, 500px); margin-top: -40px; height: 90px; }
html:not(.rot) .saule__cornice { bottom: -40px; height: 70px; -webkit-mask: none; mask: none; border-radius: 10px 10px 4px 4px; }
html:not(.rot) .saule__plinth { -webkit-mask: none; mask: none; border-radius: 4px 4px 6px 6px; }
html:not(.rot) .saule__stage { position: relative; z-index: 4; max-width: 1180px; margin: 0 auto; background: var(--green); padding: 52px 14px 52px; border-radius: 2px; box-shadow: inset 12px 0 20px -8px rgba(0,0,0,.35), inset -12px 0 20px -8px rgba(0,0,0,.35); }
html:not(.rot) .saule__drum { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: thin; }
html:not(.rot) .poster { flex: 0 0 min(300px, 78%); scroll-snap-align: start; aspect-ratio: .69; }
html:not(.rot) .poster--hero { flex-basis: min(460px, 100%); aspect-ratio: auto; min-height: 560px; }
html:not(.rot) .saule__shade { display: none; }

/* ---------- 3D (JS, breite Fenster) ---------- */
html.rot .saule__stage { position: relative; height: var(--ph); margin-top: 0; perspective: 2400px; perspective-origin: 50% 50%; z-index: 4; cursor: grab; touch-action: pan-y; outline: none; }
html.rot .saule__stage:focus-visible .saule__shade { box-shadow: 0 0 0 3px var(--blue); }
html.rot .saule__stage.drag { cursor: grabbing; }
html.rot .saule__drum { position: absolute; inset: 0; transform-style: preserve-3d; transform: translateZ(calc(-1 * var(--R))) rotateY(var(--rot, 0deg)); transition: transform .8s cubic-bezier(.2, .75, .25, 1); }
html.rot .saule__stage.drag .saule__drum { transition: none; }
html.rot .poster { position: absolute; top: 0; left: 50%; width: calc(var(--pw) + 1px); height: var(--ph); margin-left: calc(var(--pw) / -2); backface-visibility: hidden; -webkit-backface-visibility: hidden; transform: rotateY(calc(var(--i) * 45deg)) translateZ(var(--R)); }
html.rot .poster[data-i="0"] { --i: 0; } html.rot .poster[data-i="1"] { --i: 1; } html.rot .poster[data-i="2"] { --i: 2; } html.rot .poster[data-i="3"] { --i: 3; }
html.rot .poster[data-i="4"] { --i: 4; } html.rot .poster[data-i="5"] { --i: 5; } html.rot .poster[data-i="6"] { --i: 6; } html.rot .poster[data-i="7"] { --i: 7; }
html.rot .saule__shade { position: absolute; top: 0; bottom: 0; left: 50%; width: var(--vis); margin-left: calc(var(--vis) / -2); pointer-events: none; z-index: 2; background: linear-gradient(90deg, rgba(10,20,14,.72) 0, rgba(10,20,14,.38) 7%, rgba(10,20,14,.1) 20%, rgba(255,255,255,.07) 33%, rgba(255,255,255,0) 44%, rgba(10,20,14,.06) 60%, rgba(10,20,14,.3) 82%, rgba(10,20,14,.62) 94%, rgba(10,20,14,.82) 100%); }
@media (prefers-reduced-motion: reduce) { html.rot .saule__drum { transition: none; } }

/* ---------- Sektionen: Plakate an der Wand ---------- */
.sec { padding: clamp(70px, 9vw, 130px) var(--pad) 0; }
.sec__in { position: relative; max-width: 1180px; margin: 0 auto; padding: clamp(28px, 5vw, 72px); background: var(--cream) var(--grain); box-shadow: 0 1px 0 rgba(0,0,0,.08), 0 18px 30px -22px rgba(0,0,0,.45); }
.sec__in::before { content: ''; position: absolute; inset: 0; background: var(--paste); pointer-events: none; mix-blend-mode: screen; }
.sec__in::after { content: ''; position: absolute; left: 6%; right: 6%; top: -6px; height: 12px; background: rgba(255,255,255,.45); filter: blur(.5px); clip-path: polygon(0 40%, 8% 10%, 21% 50%, 36% 20%, 48% 60%, 63% 15%, 77% 45%, 90% 10%, 100% 40%, 100% 70%, 0 80%); }
.sec__head { position: relative; max-width: 50em; margin-bottom: clamp(28px, 4vw, 48px); }
h2 { font-size: clamp(42px, 6.2vw, 94px); margin-bottom: 18px; }
.intro { font-size: clamp(17px, 1.3vw, 19.5px); max-width: 38em; }
h3 { font: 400 clamp(22px, 1.9vw, 28px)/1.05 var(--display); text-transform: uppercase; letter-spacing: .02em; margin-bottom: 8px; }

.sec--focus .sec__in { transform: rotate(-.4deg); }
.sec--focus h2 { color: var(--red); }
.cases { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; counter-reset: c; }
.cases li { counter-increment: c; padding: 18px 0 24px; border-top: 3px solid var(--ink); position: relative; }
.cases li::before { content: counter(c, decimal-leading-zero); display: block; font: 400 40px/1 var(--display); color: var(--red); margin-bottom: 8px; }
.cases p { font-size: 16.5px; color: var(--ink-2); hyphens: auto; }
.focus__bottom { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 70px); margin-top: clamp(30px, 4vw, 50px); position: relative; }
.stats { display: grid; gap: 0; align-content: start; }
.stats div { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: baseline; padding: 12px 0; border-top: 1px solid rgba(0,0,0,.25); }
.stats dd { font: 400 clamp(48px, 5vw, 76px)/1 var(--display); color: var(--ink); min-width: 2.4em; white-space: nowrap; }
.stats dt { font-size: 16px; }
.route { background: var(--ink); color: var(--cream); padding: clamp(22px, 3vw, 34px); }
.route__label { font: 600 13px var(--serif); letter-spacing: .16em; text-transform: uppercase; color: var(--yellow); }
.route__codes { font: 400 clamp(28px, 3vw, 44px)/1.05 var(--display); letter-spacing: .04em; margin: 6px 0 4px; }
.route__map { width: 100%; height: auto; margin: 6px 0; }
.rf { fill: none; stroke: var(--cream); stroke-width: 2; stroke-dasharray: 7 6; }
.rc { fill: none; stroke: var(--yellow); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1 8; }
.rp circle { fill: var(--ink); stroke: var(--yellow); stroke-width: 3; }
.route__text { font-style: italic; font-size: 16.5px; }
.route__note { font-size: 14.5px; opacity: .85; margin-top: 6px; }

.sec--svc .sec__in { background-color: var(--yellow); transform: rotate(.35deg); }
.svc { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 40px; }
.svc li { border-top: 3px solid var(--ink); padding-top: 16px; }
.svc p { font-size: 16.5px; hyphens: auto; }

.sec--steps .sec__in { background-color: #fff; transform: rotate(-.25deg); }
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; }
.steps li { position: relative; padding-top: 10px; }
.steps__n { display: block; font: 400 clamp(70px, 8vw, 120px)/.9 var(--display); color: var(--blue); margin-bottom: 8px; }
.steps p { font-size: 16.5px; color: var(--ink-2); }

.sec--about .sec__in { background-color: var(--teal); color: #fff; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(30px, 5vw, 70px); align-items: center; transform: rotate(.3deg); }
.about__img img { width: 100%; aspect-ratio: 1; object-fit: cover; filter: grayscale(.2) contrast(1.05); box-shadow: 0 0 0 10px #fff; }
.sec--about h2 { color: var(--yellow); }
.feats { list-style: none; padding: 0; margin: 26px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
.feats li { font: 400 19px/1.2 var(--display); text-transform: uppercase; letter-spacing: .03em; padding: 12px 0; border-top: 1px solid rgba(255,255,255,.5); }

.sec--contact .sec__in { background-color: var(--red); color: #fff; transform: rotate(-.3deg); }
.sec--contact h2 { color: #fff; }
.contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 50px; }
.contact__tel, .contact__mail { display: grid; text-decoration: none; font: 400 clamp(30px, 3.6vw, 56px)/1.05 var(--display); letter-spacing: .01em; color: var(--yellow); overflow-wrap: anywhere; }
.contact__tel span, .contact__mail span { font: 600 13px/1.6 var(--serif); letter-spacing: .16em; text-transform: uppercase; color: #fff; }
.contact__tel:hover, .contact__mail:hover { color: #fff; }
.contact__dl { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; border-top: 2px solid rgba(255,255,255,.7); padding-top: 22px; margin-top: 10px; }
.contact__dl dt { font: 600 13px var(--serif); letter-spacing: .14em; text-transform: uppercase; opacity: .9; margin-bottom: 6px; }
.contact__dl dd { font-size: 16.5px; }
.sec--contact :focus-visible, .sec--about :focus-visible { outline-color: #fff; }

/* ---------- Fuß ---------- */
.foot { padding: clamp(70px, 9vw, 120px) var(--pad) 90px; }
.foot__in { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: auto 1fr auto; gap: 18px 36px; align-items: center; border-top: 4px solid var(--green); padding-top: 26px; }
.foot__logo img { width: 96px; }
.foot__addr { font-size: 15.5px; }
.foot__nav { display: flex; flex-wrap: wrap; gap: 4px 20px; font: 400 17px var(--display); text-transform: uppercase; letter-spacing: .04em; }
.foot__nav a { padding: 6px 0; text-decoration: none; border-bottom: 2px solid var(--yellow); }
.foot__copy { grid-column: 1 / -1; font-size: 13.5px; color: var(--ink-2); }

/* ---------- Rechtsseiten ---------- */
.legal { padding: 50px var(--pad) 0; }
.legal .sec__in { max-width: 980px; }
.back { display: inline-block; font: 400 17px var(--display); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 26px; }
.legal h1 { font-size: clamp(40px, 6vw, 84px); color: var(--red); hyphens: auto; overflow-wrap: anywhere; margin-bottom: 30px; }
.legal-body { position: relative; max-width: 68ch; font-size: 17.5px; }
.legal-body h2 { font-size: clamp(24px, 2.4vw, 32px); margin: 40px 0 10px; color: var(--ink); }
.legal-body p, .legal-body ul { margin: 0 0 14px; }
.legal-body ul { padding-left: 1.2em; }
.legal-body li { margin-bottom: 6px; }
.legal-body a { overflow-wrap: anywhere; }
.legal-note { background: var(--yellow); padding: 14px 18px; font-style: italic; }
.legal-address { font-style: italic; padding-left: 16px; border-left: 4px solid var(--red); }

/* ---------- 1024 ---------- */
@media (max-width: 1180px) {
  .nav__list a { padding: 8px 9px; font-size: 17px; }
  .top__in { gap: 20px; }
  .cases, .svc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact__dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Mobil ---------- */
@media (max-width: 860px) {
  .top__in { justify-content: space-between; }
  .logo img { width: 60px; }
  .js .menu { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; background: var(--ink); color: var(--yellow); border: 0; font: 400 18px var(--display); text-transform: uppercase; letter-spacing: .06em; cursor: pointer; }
  .js .open .menu { background: var(--red); color: #fff; }
  .js .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; background: var(--yellow); padding: 10px var(--pad) 22px; box-shadow: 0 20px 30px -16px rgba(0,0,0,.4); }
  .js .open .nav { display: flex; }
  .nav { flex-wrap: wrap; }
  .nav__list { flex-direction: column; margin: 0; gap: 0; }
  .js .nav__list a { padding: 14px 0; font-size: 26px; border-bottom: 2px solid var(--ink); }
  .nav__list a:hover { background: none; }
  .nav__end { justify-content: space-between; padding-top: 16px; }
  html:not(.js) .nav__list { flex-wrap: wrap; flex-direction: row; }

  .scene { padding-top: 18px; padding-left: 10px; padding-right: 10px; }
  .saule__dome { height: 100px; }
  html:not(.rot) .saule__stage { padding: 46px 10px 44px; }
  html:not(.rot) .poster--hero { flex-basis: 100%; min-height: 0; }
  .poster--hero .poster__in { padding: 22px 20px 20px; }
  h1 { font-size: clamp(42px, 13vw, 54px); }
  .lead { font-size: 16.5px; }
  .ctas { gap: 10px; margin-top: 20px; }
  .btn { padding: 0 16px; font-size: 17px; }
  .poster--hero .kicker { font-size: 12.5px; }
  .poster__foot { font-size: 13px; padding-top: 14px; margin-top: 20px; }
  .sec { padding-top: 56px; padding-left: 12px; padding-right: 12px; }
  .sec__in, .sec--about .sec__in { padding: 26px 20px; transform: none !important; }
  .cases, .svc, .steps, .focus__bottom, .feats, .contact, .contact__dl { grid-template-columns: 1fr; }
  .sec--about .sec__in { grid-template-columns: 1fr; }
  .about__img { max-width: 320px; margin: 10px 10px 0; }
  .foot__in { grid-template-columns: 1fr; }
}
.stats div { grid-template-columns: minmax(2.2em, auto) 1fr; }
.stats dd { order: -1; }
@media (max-width: 860px) {
  html:not(.rot) .poster--hero { flex-basis: 86%; }
  html:not(.rot) .poster { flex-basis: 72%; }
}