/* 161 – Diagramm: handgemalte statistische Schautafeln um 1900 */
:root {
  --card: #ece0c4;
  --card-2: #e4d5b5;
  --board: #c7b28b;
  --ink: #1d1a16;
  --ink-2: #4a3f33;
  --red: #c22a3a;
  --red-d: #a51f30;
  --rose: #e7a39b;
  --gold: #dda12e;
  --green: #3e6a49;
  --brown: #7a5034;
  --black: #1d1a16;
  --disp: 'Jost', 'Futura', 'Century Gothic', 'Avenir Next', system-ui, sans-serif;
  --text: 'Libre Franklin', 'Franklin Gothic Book', 'Helvetica Neue', Arial, sans-serif;
  --gut: clamp(16px, 4vw, 56px);
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .22 0 0 0 0 .1 0 0 0 .2 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--board) var(--noise);
  color: var(--ink);
  font: 400 17px/1.62 var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, .h2 { font-family: var(--disp); font-weight: 500; margin: 0; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--ink); color: var(--card); padding: 8px 14px; font-family: var(--disp); text-transform: uppercase; letter-spacing: .1em; font-size: 13px; }
.skip:focus { top: 12px; }

/* Farbmuster (Legenden) – leicht unregelmäßig wie gemalt */
.sw { display: inline-block; width: 14px; height: 14px; background: var(--c, var(--ink)); flex: none; filter: url(#r161); vertical-align: -1px; }
.sw--red { --c: var(--red); }
.sw--gold { --c: var(--gold); }
.sw--green { --c: var(--green); }
.sw--rose { --c: var(--rose); }
.sw--brown { --c: var(--brown); }
.sw--black { --c: var(--black); }
.sw--car { background: repeating-linear-gradient(-55deg, var(--green) 0 3px, var(--card) 3px 5px); }

/* ---------------------------------------------------------------- Kopf */
.top {
  position: sticky; top: 0; z-index: 30;
  background: var(--card) var(--noise);
  border-bottom: 1.5px solid var(--ink);
  box-shadow: 0 3px 0 -1.5px var(--card), 0 4.5px 0 -1.5px var(--ink);
}
.top__in { max-width: 1320px; margin: 0 auto; padding: 10px var(--gut); display: flex; align-items: center; gap: 28px; min-height: 72px; }
.logo img { width: 62px; height: auto; aspect-ratio: 1510 / 1300; }
.nav { display: flex; align-items: center; flex: 1; gap: 28px; }
.nav__list { display: flex; gap: clamp(16px, 2.4vw, 36px); margin: 0 auto; }
.nav__list a, .tel, .lang {
  font-family: var(--disp); font-weight: 500; font-size: 13.5px; letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none; display: inline-flex; align-items: center; gap: 9px; padding: 6px 0;
}
.nav__list a { border-bottom: 1.5px solid transparent; }
.nav__list a:hover { border-bottom-color: var(--ink); }
.nav__list .sw { width: 10px; height: 10px; }
.nav__end { display: flex; align-items: center; gap: 18px; }
.tel { letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.lang { border: 1.5px solid var(--ink); padding: 4px 9px; letter-spacing: .12em; }
.lang:hover { background: var(--ink); color: var(--card); }
.menu { display: none; }

/* ---------------------------------------------------------------- Tafel */
main { padding: clamp(14px, 2.2vw, 30px) clamp(10px, 2.4vw, 32px) 8px; }
.plate, .group > .plate {
  position: relative;
  max-width: 1280px; margin: 0 auto clamp(18px, 3vw, 40px);
  padding: clamp(46px, 6vw, 84px) clamp(18px, 6vw, 88px) clamp(48px, 6vw, 88px);
  background:
    radial-gradient(ellipse 120% 90% at 50% 45%, transparent 58%, rgba(122, 80, 40, .16) 100%),
    radial-gradient(circle at var(--s1, 8% 88%), rgba(150, 100, 40, .06) 0 3%, transparent 9%),
    radial-gradient(circle at var(--s2, 92% 14%), rgba(150, 100, 40, .05) 0 2%, transparent 7%),
    radial-gradient(circle at var(--s3, 70% 78%), rgba(150, 100, 40, .06) 0 1.2%, transparent 4%),
    var(--noise), var(--card);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 2px 2px rgba(60, 40, 15, .18), 0 18px 34px -18px rgba(60, 40, 15, .45);
}
.group { display: block; }
.plate--focus { --s1: 90% 92%; --s2: 6% 30%; --s3: 40% 8%; }
.plate--route { --s1: 20% 12%; --s2: 96% 70%; --s3: 62% 94%; }
.plate--svc { --s1: 4% 60%; --s2: 70% 6%; --s3: 88% 88%; }
.plate--steps { --s1: 96% 20%; --s2: 30% 90%; --s3: 8% 10%; }
.plate--about { --s1: 50% 96%; --s2: 3% 8%; --s3: 94% 50%; }
.plate--contact { --s1: 12% 40%; --s2: 84% 90%; --s3: 60% 4%; }
.plate__corner {
  position: absolute; top: clamp(16px, 2vw, 26px);
  font-family: var(--disp); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2);
}
.plate__corner--l { left: clamp(18px, 3vw, 34px); }
.plate__corner--r { right: clamp(18px, 3vw, 34px); text-align: right; }
.plate__head { text-align: center; max-width: 900px; margin: 0 auto; }
.kicker {
  font-family: var(--disp); font-weight: 500; font-size: 13px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-2); margin-bottom: 14px;
}
h1, h2, .h2 {
  text-transform: uppercase; letter-spacing: .1em; line-height: 1.18; text-wrap: balance;
  font-size: clamp(26px, 3.3vw, 44px); font-weight: 500;
}
h2, .h2 { font-size: clamp(22px, 2.6vw, 34px); }
.plate__head h1::after, .plate__head h2::after, .plate__head .h2::after {
  content: ''; display: block; width: 92px; height: 7px; margin: 18px auto 0;
  border-top: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink);
}
.intro { margin: 22px auto 0; max-width: 64ch; color: var(--ink-2); }

/* ---------------------------------------------------------------- Knöpfe */
.ctas { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.ctas--center { flex-direction: row; justify-content: center; flex-wrap: wrap; margin-top: 44px; }
.btn {
  position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 12px;
  padding: 13px 22px 12px; min-height: 48px;
  font-family: var(--disp); font-weight: 500; font-size: 14px; letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none; color: var(--card);
}
.btn::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--b, var(--ink)); filter: url(#r161); transition: background .2s; }
.btn::after { content: ''; width: 18px; height: 8px; background: currentColor; clip-path: polygon(0 40%, 70% 40%, 70% 0, 100% 50%, 70% 100%, 70% 60%, 0 60%); }
.btn--ink:hover { --b: var(--red); }
.btn--line { color: var(--ink); }
.btn--line::before { background: transparent; border: 1.6px solid var(--ink); }
.btn--line:hover::before { background: var(--gold); }

/* ---------------------------------------------------------------- Hero */
.plate--hero { padding-top: clamp(50px, 4vw, 54px); padding-bottom: clamp(30px, 3vw, 40px); }
.plate--hero h1 { max-width: 720px; margin: 0 auto; font-size: clamp(28px, 3.4vw, 48px); }
.hero__grid {
  display: grid; grid-template-columns: 1fr 37.5% 1fr; align-items: center; margin-top: clamp(10px, 1.4vw, 18px);
}
.hero__text { grid-column: 1; grid-row: 1; align-self: center; padding: 70px 28px 0 0; }
.hero__text .lead { font-size: 17px; line-height: 1.64; max-width: 33ch; hyphens: auto; }
.hero__text .lead::first-letter { font-family: var(--disp); font-weight: 600; font-size: 3.1em; float: left; line-height: .9; margin: 6px 8px 0 0; color: var(--red); }
.hero__chart { grid-column: 1 / -1; grid-row: 1; margin: 0; position: relative; }
.hero__chart svg { width: 100%; height: auto; display: block; }
.hero__chart figcaption { position: absolute; left: 50%; top: 51.06%; transform: translate(-50%, -50%); width: 26%; display: grid; justify-items: center; gap: 8px; text-align: center; font-family: var(--disp); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; line-height: 1.35; }
.hero__chart figcaption b { font-weight: 500; font-size: clamp(40px, 4.6vw, 66px); line-height: 1; letter-spacing: .02em; }
.hero__side { grid-column: 3; grid-row: 1; justify-self: end; padding-top: 40px; display: flex; flex-direction: column; gap: 26px; }
.key { display: flex; flex-direction: column; gap: 8px; font-family: var(--disp); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }
.key li { display: flex; align-items: center; gap: 10px; }
.hero__avail { font-family: var(--disp); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; border-top: 1.5px solid var(--ink); padding-top: 12px; max-width: 260px; }
.hero__avail span { display: block; color: var(--ink-2); }
.sp-t { font-family: var(--disp); font-size: 13px; letter-spacing: .1em; fill: var(--ink); }
@media (prefers-reduced-motion: no-preference) {
  .js .sp-u { animation: paint .5s cubic-bezier(.3, .6, .3, 1) both; animation-delay: calc(var(--i) * 45ms + .2s); }
}
@keyframes paint { from { opacity: 0; } }

/* ---------------------------------------------------------------- Schwerpunkt */
.focus__grid { position: relative; margin-top: clamp(40px, 5vw, 64px); }
.focus__ring { position: absolute; left: 50%; top: 50%; width: 340px; margin: 0; transform: translate(-50%, -50%); }
.focus__ring svg { width: 100%; height: auto; display: block; }
.rg-n { font-family: var(--disp); font-weight: 500; font-size: 22px; letter-spacing: .06em; }
.seg { transition: opacity .25s; }
.cases {
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, auto); grid-auto-flow: column;
  column-gap: 420px; row-gap: 26px; min-height: 380px; align-content: center;
}
.cases li { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: baseline; max-width: 36ch; }
.cases li:nth-child(-n+3) { text-align: right; grid-template-columns: 1fr auto; justify-self: end; }
.cases li:nth-child(-n+3) h3 { grid-column: 1; grid-row: 1; }
.cases li:nth-child(-n+3) .sw { grid-column: 2; grid-row: 1; }
.cases li:nth-child(-n+3) p { grid-column: 1; }
.cases .no { display: none; }
.cases .sw { grid-row: 1; align-self: center; width: 16px; height: 16px; }
.cases h3 { font-size: 16px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; line-height: 1.3; }
.cases p { grid-column: 2; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); margin-top: 4px; hyphens: auto; }
.focus__grid:has(.cases li:hover) .seg { opacity: .35; }
.focus__grid:has(li[data-i="1"]:hover) .seg-1, .focus__grid:has(li[data-i="2"]:hover) .seg-2,
.focus__grid:has(li[data-i="3"]:hover) .seg-3, .focus__grid:has(li[data-i="4"]:hover) .seg-4,
.focus__grid:has(li[data-i="5"]:hover) .seg-5, .focus__grid:has(li[data-i="6"]:hover) .seg-6 { opacity: 1; }

.stats {
  display: grid; grid-template-columns: repeat(3, 1fr); margin-top: clamp(48px, 6vw, 80px);
  border-top: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink);
}
.stat { padding: 28px 24px 26px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; }
.stat + .stat { border-left: 1.5px solid var(--ink); }
.stat p b { display: block; font-family: var(--disp); font-weight: 500; font-size: 34px; letter-spacing: .06em; line-height: 1.1; }
.stat p span { display: block; font-family: var(--disp); font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); margin-top: 6px; }
.stat__fig { height: 72px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.units { display: grid; grid-template-columns: repeat(10, 13px); gap: 4px; filter: url(#r161); }
.units i { width: 13px; height: 13px; background: var(--red); }
.units i:nth-child(10n) { background: var(--red-d); }
.units__plus { font-family: var(--disp); font-size: 34px; line-height: 1; color: var(--red); align-self: flex-start; margin-top: -4px; }
.disc { width: 68px; height: 68px; border-radius: 50%; background: var(--gold); filter: url(#r161); box-shadow: 0 0 0 5px var(--card), 0 0 0 6.5px var(--ink); }
.week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; font-family: var(--disp); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.week i { font-style: normal; width: 36px; padding: 18px 0 4px; text-align: center; border: 1.2px solid var(--ink); position: relative; }
.week i.on { background: var(--green); color: var(--card); border-color: var(--green); }
.week--lg i { width: 44px; padding-top: 22px; font-size: 12px; }

/* ---------------------------------------------------------------- Route */
.route { margin: clamp(30px, 4vw, 52px) 0 0; }
.route svg { width: 100%; height: auto; display: block; max-width: 980px; margin: 0 auto; }
.rt-c { font-family: var(--disp); font-weight: 500; font-size: 21px; letter-spacing: .14em; fill: var(--ink); }
.route figcaption { display: grid; grid-template-columns: auto 1fr; gap: 10px 48px; align-items: start; max-width: 980px; margin: 26px auto 0; border-top: 1.5px solid var(--ink); padding-top: 20px; }
.key--route { grid-row: span 2; }
.key--route li { gap: 6px; }
.key--route li .sw:last-of-type { margin-right: 6px; }
.route__text { font-size: 16.5px; }
.route__note { font-size: 15px; color: var(--ink-2); font-style: italic; }

/* ---------------------------------------------------------------- Leistungen */
.svc__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(28px, 4vw, 64px); align-items: center; margin-top: clamp(36px, 5vw, 60px); }
.svc__map { margin: 0; }
.svc__map svg { width: 100%; height: auto; display: block; }
.mp-n { font-family: var(--disp); font-weight: 500; font-size: 30px; }
.reg { transition: opacity .25s; }
.svc__grid:has(.svc li:hover) .reg { opacity: .3; }
.svc__grid:has(li[data-i="1"]:hover) .reg-1, .svc__grid:has(li[data-i="2"]:hover) .reg-2,
.svc__grid:has(li[data-i="3"]:hover) .reg-3, .svc__grid:has(li[data-i="4"]:hover) .reg-4,
.svc__grid:has(li[data-i="5"]:hover) .reg-5, .svc__grid:has(li[data-i="6"]:hover) .reg-6 { opacity: 1; }
.svc { display: grid; gap: 0; }
.svc li { display: grid; grid-template-columns: 54px 1fr; gap: 14px; padding: 14px 0; border-top: 1px solid rgba(29, 26, 22, .45); }
.svc li:last-child { border-bottom: 1px solid rgba(29, 26, 22, .45); }
.svc .no { display: flex; align-items: center; gap: 8px; font-family: var(--disp); font-size: 22px; font-weight: 500; line-height: 1.2; }
.svc .no .sw { width: 16px; height: 16px; }
.svc h3 { font-size: 15.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; line-height: 1.35; }
.svc p { font-size: 15.5px; line-height: 1.55; color: var(--ink-2); margin-top: 3px; hyphens: auto; }

/* ---------------------------------------------------------------- Ablauf */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: clamp(40px, 5vw, 60px); }
.steps li { padding-right: 22px; }
.steps__bar { display: flex; align-items: center; justify-content: center; height: 86px; margin-right: -22px; position: relative; isolation: isolate; color: var(--card); }
.steps__bar::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--c); filter: url(#r161); }
.steps li:nth-child(1) .steps__bar { --c: var(--red); }
.steps li:nth-child(2) .steps__bar { --c: var(--gold); color: var(--ink); }
.steps li:nth-child(3) .steps__bar { --c: var(--green); }
.steps li:nth-child(4) .steps__bar { --c: var(--black); }
.steps li:not(:last-child) .steps__bar::after { content: ''; position: absolute; right: -1px; top: -10px; bottom: -10px; border-right: 1.5px solid var(--card); }
.steps__bar b { font-family: var(--disp); font-weight: 500; font-size: 30px; letter-spacing: .08em; }
.steps h3 { margin-top: 22px; font-size: 16px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; padding-top: 12px; border-top: 1.5px solid var(--ink); }
.steps p { margin-top: 8px; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); hyphens: auto; }

/* ---------------------------------------------------------------- Über uns */
.about__grid { display: grid; grid-template-columns: minmax(280px, 420px) 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; margin-top: clamp(36px, 5vw, 60px); max-width: 1040px; margin-inline: auto; }
.about__fig { position: relative; margin: 0; aspect-ratio: 1; padding: 30px; }
.about__ring {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(var(--red) 0 89deg, transparent 89deg 91deg, var(--gold) 91deg 179deg, transparent 179deg 181deg, var(--green) 181deg 269deg, transparent 269deg 271deg, var(--brown) 271deg 359deg, transparent 359deg);
  -webkit-mask: radial-gradient(circle, transparent 0 calc(50% - 22px), #000 calc(50% - 21px));
  mask: radial-gradient(circle, transparent 0 calc(50% - 22px), #000 calc(50% - 21px));
  filter: url(#r161);
}
.about__fig img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; filter: sepia(.38) saturate(.85) contrast(1.04); box-shadow: 0 0 0 1.5px var(--ink); }
.about__text > p { font-size: 17.5px; max-width: 54ch; }
.feats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; margin-top: 30px; padding-top: 22px; border-top: 1.5px solid var(--ink); }
.feats li { display: flex; align-items: center; gap: 12px; font-family: var(--disp); font-size: 14px; letter-spacing: .12em; text-transform: uppercase; line-height: 1.35; }
.feats .sw { width: 16px; height: 16px; }

/* ---------------------------------------------------------------- Kontakt */
.contact__grid { display: grid; grid-template-columns: auto 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; margin: clamp(36px, 5vw, 60px) auto 0; max-width: 1000px; }
.clock { margin: 0; display: grid; justify-items: center; gap: 20px; }
.clock__ring { position: relative; width: 300px; }
.clock__ring svg { width: 100%; height: auto; display: block; }
.hr-t { font-family: var(--disp); font-size: 13px; fill: var(--ink); letter-spacing: .06em; }
.clock__c { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--disp); font-weight: 500; font-size: 17px; letter-spacing: .08em; text-transform: uppercase; text-align: center; padding: 0 92px; line-height: 1.25; }
.clock figcaption { display: grid; justify-items: center; gap: 4px; text-align: center; }
.clock figcaption .week { margin-bottom: 12px; }
.clock__lbl { font-family: var(--disp); font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2); }
.clock__x { color: var(--ink-2); font-size: 15px; }
.cdata { margin: 0; }
.cdata div { display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding: 14px 0; border-top: 1px solid rgba(29, 26, 22, .45); align-items: baseline; }
.cdata div:last-child { border-bottom: 1px solid rgba(29, 26, 22, .45); }
.cdata dt { font-family: var(--disp); font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); }
.cdata dd { margin: 0; font-size: 18px; }
.cdata a { text-decoration-thickness: 1px; text-underline-offset: 3px; }
.cdata a:hover { color: var(--red); }

/* ---------------------------------------------------------------- Fuß */
.foot { border-top: 1.5px solid var(--ink); background: var(--card) var(--noise); margin-top: clamp(20px, 3vw, 40px); }
.foot__in { max-width: 1320px; margin: 0 auto; padding: 34px var(--gut) 90px; display: grid; grid-template-columns: auto 1fr auto; gap: 14px 36px; align-items: center; }
.logo--foot img { width: 74px; }
.foot__brand { font-family: var(--disp); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; font-size: 14px; }
.foot__addr p:last-child { font-size: 15px; color: var(--ink-2); }
.foot__nav { display: flex; flex-wrap: wrap; gap: 6px 22px; font-family: var(--disp); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }
.foot__nav a { text-decoration: none; border-bottom: 1px solid currentColor; }
.foot__nav a:hover { color: var(--red); }
.foot__copy { grid-column: 2 / -1; font-size: 13px; color: var(--ink-2); }

/* ---------------------------------------------------------------- Rechtsseiten */
.plate--legal { max-width: 980px; }
.back { display: inline-block; font-family: var(--disp); font-size: 13px; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid currentColor; margin-bottom: 30px; }
.back:hover { color: var(--red); }
.plate--legal h1 { font-size: clamp(24px, 3vw, 38px); hyphens: auto; overflow-wrap: break-word; }
.rule { display: flex; justify-content: center; gap: 6px; margin: 30px 0 10px; }
.rule .sw { width: 22px; height: 10px; }
.legal-body { max-width: 68ch; margin: 0 auto; font-size: 16.5px; }
.legal-body h2 { font-size: 17px; letter-spacing: .14em; margin: 2.2em 0 .7em; padding-top: 14px; border-top: 1.5px solid var(--ink); line-height: 1.35; hyphens: auto; }
.legal-body h2::after { display: none; }
.legal-body p, .legal-body ul { margin: 0 0 1em; }
.legal-body ul { padding-left: 0; }
.legal-body li { position: relative; padding-left: 24px; margin-bottom: .45em; }
.legal-body li::before { content: ''; position: absolute; left: 0; top: .5em; width: 10px; height: 10px; background: var(--red); filter: url(#r161); }
.legal-body a { overflow-wrap: anywhere; text-underline-offset: 3px; }
.legal-body a:hover { color: var(--red); }
.legal-note { font-style: italic; color: var(--ink-2); border-left: 6px solid var(--gold); padding: 6px 0 6px 16px; }
.legal-address { font-family: var(--disp); letter-spacing: .06em; padding: 16px 20px; border: 1.5px solid var(--ink); display: inline-block; }

/* ---------------------------------------------------------------- 1024 */
@media (max-width: 1180px) {
  .hero__text { padding-right: 18px; }
  .hero__text .lead { font-size: 15.5px; line-height: 1.58; }
  .hero__text .lead::first-letter { font-size: 2.6em; }
  .hero__side { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px 32px; padding-top: 26px; }
  .ctas { flex-direction: row; flex-wrap: wrap; }
  .hero__avail { border-top: 0; border-left: 1.5px solid var(--ink); padding: 2px 0 2px 16px; }
  .hero__side .key { display: none; }
  .cases { column-gap: 340px; }
  .focus__ring { width: 290px; }
  .cases li { max-width: 30ch; }
}

/* ---------------------------------------------------------------- Mobil */
@media (max-width: 860px) {
  .menu {
    display: inline-flex; align-items: center; gap: 10px; margin-left: auto;
    font: 500 13px/1 var(--disp); letter-spacing: .16em; text-transform: uppercase;
    background: none; color: var(--ink); border: 1.5px solid var(--ink); padding: 10px 14px; cursor: pointer;
  }
  .menu__ico { display: grid; gap: 3px; }
  .menu__ico i { display: block; width: 16px; height: 2px; background: currentColor; }
  .menu__ico i:nth-child(1) { background: var(--red); }
  .menu__ico i:nth-child(2) { background: var(--gold); }
  .top.open .menu { background: var(--ink); color: var(--card); }
  .nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--card) var(--noise); border-bottom: 1.5px solid var(--ink);
    flex-direction: column; align-items: stretch; padding: 8px var(--gut) 24px; gap: 14px;
    box-shadow: 0 16px 24px -16px rgba(40, 25, 10, .5);
  }
  .js .top.open .nav { display: flex; }
  html:not(.js) .nav { display: flex; position: static; box-shadow: none; border: 0; padding: 0 0 12px; }
  html:not(.js) .top__in { flex-wrap: wrap; }
  .nav__list { flex-direction: column; gap: 0; margin: 0; }
  .nav__list a { padding: 14px 0; border-bottom: 1px solid rgba(29, 26, 22, .35); width: 100%; font-size: 15px; }
  .nav__end { justify-content: space-between; }
  .top__in { min-height: 64px; }
  .logo img { width: 54px; }

  .hero__grid { grid-template-columns: 1fr; gap: 22px; }
  .hero__text, .hero__chart, .hero__side { grid-column: 1; grid-row: auto; }
  .hero__chart { order: -1; overflow: hidden; margin: 0 calc(-1 * clamp(18px, 6vw, 88px)); }
  .hero__chart svg { width: 250%; margin-left: -75%; }
  .hero__chart figcaption { width: 50%; }
  .hero__text { padding: 0; }
  .hero__text .lead { max-width: none; font-size: 16.5px; }
  .hero__side { justify-content: flex-start; padding-top: 0; }
  .hero__avail { border-left: 0; border-top: 1.5px solid var(--ink); padding: 12px 0 0; }

  .focus__grid { display: grid; gap: 28px; }
  .focus__ring { position: static; transform: none; width: min(300px, 80vw); margin: 0 auto; }
  .cases { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none; column-gap: 0; min-height: 0; }
  .cases li, .cases li:nth-child(-n+3) { text-align: left; grid-template-columns: auto 1fr; justify-self: stretch; max-width: none; }
  .cases li:nth-child(-n+3) h3, .cases li:nth-child(-n+3) p { grid-column: 2; }
  .cases li:nth-child(-n+3) .sw { grid-column: 1; }
  .stats { grid-template-columns: 1fr; }
  .stat + .stat { border-left: 0; border-top: 1.5px solid var(--ink); }

  .route figcaption { grid-template-columns: 1fr; gap: 12px; }
  .route svg { width: calc(100% + 24px); margin: 0 -12px; }
  .rt-c { font-size: 32px; letter-spacing: .04em; }
  .plate--route .h2 { letter-spacing: .05em; font-size: 21px; }
  .key--route { grid-row: auto; flex-direction: row; flex-wrap: wrap; gap: 8px 24px; }

  .svc__grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; gap: 0; }
  .steps li { display: grid; grid-template-columns: 64px 1fr; column-gap: 18px; padding: 0; }
  .steps__bar { grid-row: span 2; height: auto; margin: 0; min-height: 100%; }
  .steps li:not(:last-child) .steps__bar::after { top: auto; left: -8px; right: -8px; bottom: -1px; border-right: 0; border-bottom: 1.5px solid var(--card); }
  .steps h3 { margin-top: 0; border-top: 0; padding-top: 14px; }
  .steps p { margin: 4px 0 18px; }

  .about__grid { grid-template-columns: 1fr; }
  .about__fig { width: min(320px, 82vw); margin: 0 auto; padding: 24px; }
  .feats { grid-template-columns: 1fr; }

  .contact__grid { grid-template-columns: 1fr; }
  .cdata div { grid-template-columns: 1fr; gap: 2px; }
  .foot__in { grid-template-columns: 1fr; }
  .foot__copy { grid-column: 1; }
}
@media (max-width: 420px) {
  .plate__corner { font-size: 10.5px; letter-spacing: .14em; }
  .week i { width: 34px; }
  .week--lg i { width: 38px; }
  .clock__ring { width: 270px; }
  .clock__c { padding: 0 58px; font-size: 14.5px; }
  .units { grid-template-columns: repeat(10, 11px); gap: 3px; }
  .units i { width: 11px; height: 11px; }
}