/* Voulgaris Schlüsseldienst · Schlüsselnotdienst Hamburg-Wandsbek
   Tokens und Regeln: siehe DESIGN.md im Projektordner. Mobile first. */

/* ---------- Schrift (lokal, keine Dritt-Server) ---------- */
@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo-var.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo Display";
  src: url("/assets/fonts/archivo-italic-display.woff2") format("woff2");
  font-weight: 700 900;
  font-stretch: 62% 75%;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Archivo Fallback";
  src: local("Arial");
  size-adjust: 101%;
  ascent-override: 87%;
  descent-override: 21%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Display Fallback";
  src: local("Arial Narrow Bold"), local("Arial Narrow"), local("Arial");
  size-adjust: 92%;
  ascent-override: 95%;
  descent-override: 23%;
}

/* ---------- Tokens ---------- */
:root {
  --asphalt: oklch(0.165 0.010 50);
  --asphalt-2: oklch(0.215 0.012 50);
  --asphalt-3: oklch(0.27 0.014 50);
  --line-dark: oklch(0.36 0.015 50);
  --paper: oklch(0.955 0.008 70);
  --paper-muted: oklch(0.79 0.016 60);
  --signal: oklch(0.705 0.195 45);
  --signal-text: oklch(0.47 0.15 40);
  --signal-hi: oklch(0.77 0.165 52);
  --signal-deep: oklch(0.64 0.19 42);
  --signal-ink: oklch(0.47 0.15 40);
  --kupfer: oklch(0.62 0.12 58);
  --kupfer-deep: oklch(0.48 0.10 52);
  --beton: oklch(0.945 0.006 75);
  --beton-2: oklch(0.895 0.009 72);
  --beton-3: oklch(0.83 0.011 70);
  --ink: oklch(0.20 0.012 50);
  --ink-muted: oklch(0.42 0.015 55);
  --tinte: oklch(0.24 0.055 258);
  --tinte-2: oklch(0.32 0.055 258);
  --tinte-3: oklch(0.42 0.05 258);
  --tinte-muted: oklch(0.83 0.03 252);
  --stahl: oklch(0.55 0.115 252);
  --stahl-deep: oklch(0.42 0.095 254);
  --stahl-ink: oklch(0.36 0.09 254);
  --stahl-hell: oklch(0.88 0.035 250);
  --papier: oklch(0.975 0.005 80);
  --messing: oklch(0.80 0.115 82);
  --messing-hi: oklch(0.86 0.10 85);
  --messing-deep: oklch(0.46 0.10 75);
  --bernstein-hi: oklch(0.89 0.12 88);
  --bernstein: oklch(0.81 0.155 72);
  --bernstein-lo: oklch(0.73 0.175 57);
  --wa: oklch(0.77 0.19 150);
  --wa-ink: oklch(0.56 0.15 152);

  /* Semantische Rollen: helles Theme */
  --bg: var(--papier);
  --bg-2: var(--beton);
  --bg-3: var(--beton-2);
  --text: var(--ink);
  --text-muted: var(--ink-muted);
  --line: var(--beton-3);
  --hairline: oklch(0.2 0.012 50 / 0.12);
  /* Fokusring: auf hell dunkles Orange (5,3:1), dunkle Inseln setzen Signalorange */
  --focus: var(--signal-ink);

  --font: "Archivo", "Archivo Fallback", system-ui, sans-serif;
  --font-display: "Archivo Display", "Display Fallback", "Archivo", sans-serif;

  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1.0625rem;
  --fs-lg: 1.3rem;
  --fs-xl: clamp(1.6rem, 1.25rem + 1.4vw, 2.3rem);
  --fs-2xl: clamp(2.5rem, 1.5rem + 4.4vw, 5rem);
  --fs-hero: clamp(3rem, 0.4rem + 11.6vw, 4.5rem);

  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-24: 6rem;
  --section: clamp(4.5rem, 3rem + 7vw, 9rem);
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
  --maxw: 1320px;
  --measure: 66ch;
  --radius-s: 6px;
  --radius-m: 12px;
  --cut: clamp(28px, 5vw, 84px);
  --slant: 18px;
  --header-h: 68px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 140ms;
  --dur-2: 260ms;
  --dur-3: 520ms;
  --dur-4: 900ms;

  --z-rail: 10;
  --z-header: 50;
  --z-actionbar: 60;
  --z-skip: 100;
}

/* ---------- Basis ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  color-scheme: light;
  scroll-padding-top: calc(var(--header-h) + 1rem);
  hanging-punctuation: first;
}
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-base);
  font-weight: 400;
  font-stretch: 100%;
  line-height: 1.65;
  letter-spacing: 0.006em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-kerning: normal;
  overflow-x: clip;
}
img,
svg,
picture,
video {
  display: block;
  max-width: 100%;
}
img {
  height: auto;
}
h1,
h2,
h3,
h4 {
  margin: 0;
  line-height: 1.08;
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: auto;
}
p,
figure,
dl,
dd,
blockquote,
address {
  margin: 0;
}
address {
  font-style: normal;
}
p {
  text-wrap: pretty;
}
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
a {
  color: inherit;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}
em {
  font-style: normal;
  font-weight: 650;
}
strong {
  font-weight: 700;
}
small {
  font-size: var(--fs-xs);
}
button {
  font: inherit;
  color: inherit;
}
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 3px;
}
::selection {
  background: var(--signal);
  color: var(--asphalt);
}
[hidden] {
  display: none !important;
}
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: currentColor;
}
.icon--wa {
  color: var(--wa);
}

.skip {
  position: absolute;
  left: var(--gutter);
  top: -200px;
  z-index: var(--z-skip);
  padding: 0.8rem 1.1rem;
  background: var(--signal);
  color: var(--asphalt);
  font-weight: 700;
  text-decoration: none;
  border-radius: var(--radius-s);
}
.skip:focus {
  top: 0.75rem;
}

.wrap {
  width: min(100% - 2 * var(--gutter), var(--maxw));
  margin-inline: auto;
}

/* ---------- Überschriften: Breite = Dringlichkeit ---------- */
.h-urgent {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 880;
  font-stretch: 66%;
  font-size: var(--fs-2xl);
  line-height: 0.94;
  letter-spacing: -0.004em;
}
.h-calm {
  font-family: var(--font);
  font-weight: 640;
  font-stretch: 116%;
  font-size: clamp(2rem, 1.3rem + 2.8vw, 3.6rem);
  line-height: 1.04;
  letter-spacing: -0.018em;
}
.h-section {
  font-weight: 780;
  font-stretch: 80%;
  font-size: var(--fs-xl);
  line-height: 1.05;
}

/* ---------- Buttons und Links ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 52px;
  padding: 0.75rem 1.3rem;
  border: 2px solid transparent;
  border-radius: var(--radius-s);
  font-weight: 720;
  font-stretch: 90%;
  font-size: var(--fs-base);
  line-height: 1.15;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--dur-1) ease-out,
    border-color var(--dur-1) ease-out,
    color var(--dur-1) ease-out,
    transform var(--dur-1) var(--ease-out);
}
.btn:active {
  transform: translateY(1px);
}
.btn--ghost {
  background: transparent;
  border-color: currentColor;
  color: inherit;
}
.btn--ghost:hover {
  background: oklch(0.6 0.02 60 / 0.12);
}
.btn--dark {
  background: var(--ink);
  color: var(--papier);
}
.btn--dark:hover {
  background: var(--tinte);
}
.btn--signal {
  background: var(--signal);
  color: var(--bg);
}
.btn--signal:hover {
  background: var(--signal-hi);
}
.btn--ink {
  background: var(--ink);
  color: var(--beton);
}
.btn--ink:hover {
  background: var(--asphalt-3);
}
.btn--brass {
  background: var(--messing);
  color: var(--tinte);
}
.btn--brass:hover {
  background: var(--messing-hi);
}
.btn .icon:last-child:not(:first-child) {
  transition: transform var(--dur-2) var(--ease-out);
}
.btn:hover .icon:last-child:not(:first-child) {
  transform: translateX(3px);
}

/* Großer Anruf-Button in Aufkleber-Form */
.btn-call {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: stretch;
  min-height: 76px;
  padding-right: calc(var(--slant) + 1.25rem);
  color: var(--bg);
  text-decoration: none;
  border-radius: var(--radius-s);
}
.btn-call::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--signal);
  border-radius: var(--radius-s) 0 0 var(--radius-s);
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%);
  transition: background-color var(--dur-1) ease-out;
}
.btn-call:hover::before {
  background: var(--signal-hi);
}
.btn-call:active {
  transform: translateY(1px);
}
.btn-call__icon {
  display: grid;
  place-items: center;
  width: 64px;
  border-right: 2px solid var(--bg);
}
.btn-call__icon .icon {
  width: 30px;
  height: 30px;
}
@media (prefers-reduced-motion: no-preference) {
  .btn-call__icon .icon {
    animation: ring 3.6s var(--ease-io) 2s infinite;
    transform-origin: 50% 60%;
  }
}
.btn-call__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.15rem;
  padding: 0.55rem 0 0.55rem 0.95rem;
  line-height: 1;
}
.btn-call__label {
  font-size: var(--fs-xs);
  font-weight: 760;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.btn-call__num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  font-stretch: 66%;
  font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.005em;
  white-space: nowrap;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: 48px;
  font-weight: 700;
  font-stretch: 92%;
  color: var(--signal-text);
  text-decoration: none;
}
.link-arrow .icon {
  transition: transform var(--dur-2) var(--ease-out);
}
.link-arrow:hover {
  text-decoration: underline;
}
.link-arrow:hover .icon {
  transform: translateX(4px);
}
.link-arrow--ink {
  color: var(--signal-text);
}
.link-arrow--brass {
  color: var(--messing);
}

/* ---------- Kopfzeile ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--bg);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-2) ease-out;
}
.site-header.is-scrolled {
  border-bottom-color: var(--bg-3);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  width: min(100% - 2 * var(--gutter), var(--maxw));
  min-height: var(--header-h);
  margin-inline: auto;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 48px;
  margin-right: auto;
  text-decoration: none;
}
.brand__mark {
  flex: none;
  width: 42px;
  height: 42px;
}
.brand__ring {
  fill: none;
  stroke-width: 5;
  transform: rotate(-90deg);
  transform-origin: 24px 24px;
}
.brand__ring--day {
  stroke: var(--signal);
  stroke-dasharray: 13 11;
  stroke-dashoffset: -7;
}
.brand__ring--night {
  stroke: var(--kupfer);
  stroke-dasharray: 11 13;
  stroke-dashoffset: -20;
}
.brand__hole {
  fill: var(--text);
}
.brand__text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.brand__name {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  font-stretch: 70%;
  font-size: 1.7rem;
  line-height: 0.9;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.brand__sub {
  margin-top: 0.2rem;
  font-size: 0.6875rem;
  font-weight: 650;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.nav__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 48px;
  min-width: 48px;
  padding: 0 0.9rem;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  font-weight: 700;
  font-size: var(--fs-sm);
  cursor: pointer;
}
.nav__toggle[aria-expanded="true"] {
  background: var(--bg-3);
  border-color: var(--text-muted);
}
.nav__list {
  position: absolute;
  inset: 100% 0 auto 0;
  display: flex;
  flex-direction: column;
  padding: var(--sp-2) var(--gutter) var(--sp-8);
  background: var(--bg);
  border-bottom: 2px solid var(--signal);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-6px);
  transition:
    opacity var(--dur-2) var(--ease-out),
    transform var(--dur-2) var(--ease-out),
    visibility 0s linear var(--dur-2);
}
.nav__list.is-open {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition:
    opacity var(--dur-2) var(--ease-out),
    transform var(--dur-2) var(--ease-out),
    visibility 0s;
}
.nav__link {
  display: flex;
  align-items: center;
  min-height: 56px;
  font-weight: 760;
  font-stretch: 80%;
  font-size: 1.45rem;
  text-decoration: none;
  border-bottom: 1px solid var(--bg-3);
}
.nav__link[aria-current="page"] {
  color: var(--signal-text);
}
@media (scripting: none) {
  .nav__toggle {
    display: none;
  }
  .site-header__inner {
    flex-wrap: wrap;
  }
  .nav {
    order: 3;
    width: 100%;
  }
  .nav__list {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0 1rem;
    padding: 0 0 0.5rem;
    visibility: visible;
    opacity: 1;
    transform: none;
    border: 0;
  }
  .nav__link {
    min-height: 44px;
    font-size: var(--fs-sm);
    border: 0;
  }
}

.header-call {
  display: none;
  align-items: center;
  gap: 0.6rem;
  min-height: 48px;
  padding: 0.35rem 1rem 0.35rem 0.8rem;
  background: var(--signal);
  color: var(--bg);
  text-decoration: none;
  border-radius: var(--radius-s);
  transition: background-color var(--dur-1) ease-out;
}
.header-call:hover {
  background: var(--signal-hi);
}
.header-call .icon {
  width: 22px;
  height: 22px;
}
.header-call__text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.header-call__label {
  font-size: 0.6875rem;
  font-weight: 760;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.header-call__num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  font-stretch: 68%;
  font-size: 1.45rem;
  font-variant-numeric: tabular-nums;
}
@media (min-width: 768px) {
  .header-call {
    display: inline-flex;
  }
}
@media (min-width: 1280px) {
  :root {
    --header-h: 80px;
  }
  .nav__toggle {
    display: none;
  }
  .nav__list {
    position: static;
    flex-direction: row;
    gap: 0.15rem;
    padding: 0;
    background: none;
    border: 0;
    visibility: visible;
    opacity: 1;
    transform: none;
  }
  .nav__link {
    position: relative;
    min-height: 44px;
    padding: 0 0.7rem;
    font-size: 0.9688rem;
    font-weight: 620;
    font-stretch: 94%;
    border: 0;
    border-radius: var(--radius-s);
    transition: background-color var(--dur-1) ease-out;
  }
  .nav__link:hover {
    background: var(--bg-2);
  }
  .nav__link[aria-current="page"] {
    color: var(--text);
  }
  .nav__link[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: 0.7rem;
    right: 0.7rem;
    bottom: 4px;
    height: 3px;
    background: var(--signal);
    transform: skewX(-18deg);
  }
  .nav {
    margin-right: var(--sp-2);
  }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(2.25rem, 1rem + 5vw, 5.5rem) calc(var(--cut) + clamp(2.5rem, 1rem + 5vw, 5rem));
  background: var(--bg);
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 40%;
}
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, oklch(0.165 0.01 50 / 0.55) 0%, oklch(0.165 0.01 50 / 0.8) 45%, var(--bg) 92%);
}
.hero__inner {
  display: grid;
  gap: var(--sp-12);
  width: min(100% - 2 * var(--gutter), var(--maxw));
  margin-inline: auto;
}
.hero__title {
  display: flex;
  flex-direction: column;
}
.hero__line {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  font-stretch: 62%;
  font-size: var(--fs-hero);
  line-height: 0.88;
  letter-spacing: -0.004em;
  text-transform: uppercase;
  white-space: nowrap;
}
.hero__line--signal {
  color: var(--signal-text);
}
.hero__sub {
  display: block;
  margin-top: 1rem;
  font-size: clamp(1.15rem, 0.95rem + 0.8vw, 1.55rem);
  font-weight: 700;
  font-stretch: 88%;
  line-height: 1.2;
}
.hero__lead {
  max-width: 44ch;
  margin-top: var(--sp-6);
  color: var(--text-muted);
  font-size: var(--fs-lg);
  line-height: 1.5;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-4);
  margin-top: var(--sp-8);
}
.hero__facts {
  display: grid;
  gap: 0.55rem;
  margin-top: var(--sp-8);
  font-size: var(--fs-sm);
  font-weight: 560;
}
.hero__facts li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
}
.hero__facts .icon {
  width: 1.1em;
  height: 1.1em;
  margin-top: 0.22em;
  color: var(--signal-text);
}
@media (min-width: 900px) {
  .hero {
    min-height: min(92vh, 900px);
    display: grid;
    align-items: center;
  }
  .hero__media {
    left: 34%;
    clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%);
  }
  .hero__media img {
    filter: saturate(0.95) brightness(1.02) contrast(1.02);
  }
  .hero__media::after {
    background:
      linear-gradient(to right, var(--bg) 0%, oklch(0.165 0.01 50 / 0.82) 24%, oklch(0.165 0.01 50 / 0.35) 50%, oklch(0.165 0.01 50 / 0.06) 74%, oklch(0.165 0.01 50 / 0.3) 100%),
      linear-gradient(to top, var(--bg) 0%, transparent 32%);
  }
  .hero__inner {
    grid-template-columns: auto minmax(260px, 1fr);
    align-items: end;
    gap: var(--sp-8);
  }
  .hero__line {
    font-size: min(9vw, 8.5rem);
  }
  .hero__facts {
    grid-template-columns: repeat(3, auto);
    gap: 0.5rem 1.5rem;
  }
}

/* Zweite Titelzeile in Orange, "auf." springt wie eine Tür, die aufgeht */
.hero__line--orange {
  color: var(--signal);
  text-shadow: 0 0.03em 0.18em oklch(0.165 0.01 50 / 0.6);
}
.hero__jump {
  display: inline-block;
  transform-origin: 50% 100%;
}
@media (prefers-reduced-motion: no-preference) {
  .hero .hero__line--orange[data-load] {
    animation-fill-mode: backwards;
  }
  .hero__jump {
    animation: hop 3.8s var(--ease-io) 1.1s infinite;
  }
}
@keyframes hop {
  0%, 32%, 100% { transform: translateY(0) scale(1); }
  4% { transform: translateY(0) scale(1.08, 0.86); }
  12% { transform: translateY(-0.24em) rotate(-3deg) scale(0.96, 1.07); }
  20% { transform: translateY(0) scale(1.07, 0.9); }
  25% { transform: translateY(-0.05em) scale(0.99, 1.02); }
}

/* Hero-Aktionen: Das Signalorange liegt im selben Ton wie das Foto und geht darin unter.
   Der Anruf leuchtet deshalb in Bernstein wie das Licht am Schloss, WhatsApp sitzt als
   Rauchglas daneben. Beide gleich hoch, gleicher Aufbau: Symbol, kleine Zeile, große Zeile. */
.hero .hero__actions {
  align-items: stretch;
}
.hero .btn-call {
  min-height: 80px;
  padding-right: calc(var(--slant) + 1.5rem);
  filter: drop-shadow(0 12px 26px oklch(0.73 0.175 57 / 0.3));
  transition:
    filter var(--dur-2) var(--ease-out),
    transform var(--dur-1) var(--ease-out);
}
.hero .btn-call::before {
  background:
    linear-gradient(to bottom, oklch(1 0 0 / 0.5) 0 1px, transparent 1px),
    linear-gradient(105deg, var(--bernstein-hi) 0%, var(--bernstein) 46%, var(--bernstein-lo) 100%);
  transition: filter var(--dur-2) var(--ease-out);
}
.hero .btn-call:hover {
  filter: drop-shadow(0 16px 34px oklch(0.81 0.155 72 / 0.42));
}
.hero .btn-call:hover::before {
  filter: brightness(1.06) saturate(1.05);
}
.hero .btn-call__icon {
  align-self: center;
  width: 52px;
  height: 52px;
  margin-left: 0.9rem;
  border: 0;
  border-radius: 50%;
  background: var(--asphalt);
  color: var(--bernstein-hi);
}
.hero .btn-call__icon .icon {
  width: 26px;
  height: 26px;
}
.hero .btn-call__label {
  color: var(--asphalt-2);
}
/* Einsatzgebiet: derselbe Bernstein-Anruf wie im Startseiten-Hero */
.page-area .btn-call {
  min-height: 80px;
  padding-right: calc(var(--slant) + 1.5rem);
  filter: drop-shadow(0 12px 24px oklch(0.73 0.175 57 / 0.28));
  transition:
    filter var(--dur-2) var(--ease-out),
    transform var(--dur-1) var(--ease-out);
}
.page-area .btn-call::before {
  background:
    linear-gradient(to bottom, oklch(1 0 0 / 0.5) 0 1px, transparent 1px),
    linear-gradient(105deg, var(--bernstein-hi) 0%, var(--bernstein) 46%, var(--bernstein-lo) 100%);
  transition: filter var(--dur-2) var(--ease-out);
}
.page-area .btn-call:hover {
  filter: drop-shadow(0 16px 30px oklch(0.81 0.155 72 / 0.4));
}
.page-area .btn-call:hover::before {
  filter: brightness(1.06) saturate(1.05);
}
.page-area .btn-call__icon {
  align-self: center;
  width: 52px;
  height: 52px;
  margin-left: 0.9rem;
  border: 0;
  border-radius: 50%;
  background: var(--asphalt);
  color: var(--bernstein-hi);
}
.page-area .btn-call__icon .icon {
  width: 26px;
  height: 26px;
}
.page-area .btn-call__label {
  color: var(--asphalt-2);
}
@media (max-width: 559.98px) {
  .page-area .hero__actions {
    display: grid;
    justify-content: stretch;
  }
  .page-area .btn-call {
    width: 100%;
  }
}

/* WhatsApp im Hero: blaues Gegenstück zum Bernstein-Anruf, gleiche Aufkleber-Schräge.
   Kompakt gehalten, damit der hängende Schlüssel im Foto frei bleibt. */
.btn-wa {
  --blau-hi: oklch(0.58 0.14 248);
  --blau: oklch(0.5 0.15 254);
  --blau-lo: oklch(0.41 0.14 260);
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  min-height: 80px;
  padding: 0.6rem calc(var(--slant) + 1.2rem) 0.6rem 0.9rem;
  color: oklch(0.99 0.005 250);
  text-decoration: none;
  filter: drop-shadow(0 12px 24px oklch(0.45 0.15 256 / 0.35));
  transition:
    filter var(--dur-2) var(--ease-out),
    transform var(--dur-1) var(--ease-out);
}
.btn-wa::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: var(--radius-s) 0 0 var(--radius-s);
  background:
    linear-gradient(to bottom, oklch(1 0 0 / 0.35) 0 1px, transparent 1px),
    linear-gradient(105deg, var(--blau-hi) 0%, var(--blau) 50%, var(--blau-lo) 100%);
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%);
  transition: filter var(--dur-2) var(--ease-out);
}
.btn-wa:hover {
  filter: drop-shadow(0 16px 30px oklch(0.5 0.15 254 / 0.5));
}
.btn-wa:hover::before {
  filter: brightness(1.08);
}
.btn-wa:active {
  transform: translateY(1px);
}
.btn-wa__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: oklch(0.995 0.003 250);
  box-shadow: 0 4px 10px -4px oklch(0.25 0.1 258 / 0.6);
  color: var(--wa-ink);
  transition: transform var(--dur-2) var(--ease-out);
}
.btn-wa__icon .icon {
  width: 28px;
  height: 28px;
}
.btn-wa:hover .btn-wa__icon {
  transform: rotate(-8deg) scale(1.04);
}
.btn-wa__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.2rem;
  line-height: 1;
}
.btn-wa__label {
  color: oklch(0.93 0.035 250);
  font-size: var(--fs-xs);
  font-weight: 760;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
}
.btn-wa__name {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  font-stretch: 66%;
  font-size: clamp(1.8rem, 1.4rem + 1.2vw, 2.3rem);
  letter-spacing: 0.005em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* Unter 1440px liegt der Schlüssel im Foto hinter den Buttons: WhatsApp dann unter den Anruf */
@media (max-width: 1439.98px) {
  .hero .hero__actions {
    display: grid;
    justify-content: start;
  }
}
@media (max-width: 559.98px) {
  .hero .hero__actions {
    justify-content: stretch;
  }
  .hero .btn-call,
  .btn-wa {
    width: 100%;
  }
}

/* Hero-Fakten: Rauchglas-Leiste mit eigenen Symbolen, Bernstein wie der Anruf-Button */
.hero .hero__facts {
  gap: 0;
  width: 100%;
  max-width: 1080px;
  border-radius: var(--radius-m);
  background: oklch(0.165 0.01 50 / 0.55);
  box-shadow: inset 0 0 0 1px oklch(0.95 0.02 75 / 0.12);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  backdrop-filter: blur(12px) saturate(1.2);
  font-size: var(--fs-sm);
  font-weight: 500;
}
.hero .hero__fact {
  align-items: center;
  gap: 0.85rem;
  padding: 0.95rem 1.15rem;
}
.hero .hero__fact + .hero__fact {
  border-top: 1px solid oklch(0.95 0.02 75 / 0.1);
}
.hero__fact-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: oklch(0.81 0.155 72 / 0.1);
  box-shadow: inset 0 0 0 1px oklch(0.81 0.155 72 / 0.32);
  color: var(--bernstein);
}
.hero .hero__fact-icon .icon {
  width: 24px;
  height: 24px;
  margin: 0;
  color: inherit;
}
.hero__fact-text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  color: var(--paper-muted);
  line-height: 1.3;
}
.hero__fact-text strong {
  color: var(--paper);
  font-size: 1rem;
  font-weight: 720;
}
/* Die Leiste bleibt in der linken Textspalte, rechts hängt der Schlüssel im Foto */
@media (min-width: 900px) {
  .hero .hero__facts {
    grid-template-columns: 1fr;
    gap: 0;
    max-width: 26rem;
  }
  .hero .hero__fact {
    padding: 0.75rem 1rem;
  }
}
/* Linke Spalte als ein Block: Buttons (gestapelt), Tarif-Box und Fakten gleich breit */
@media (min-width: 900px) {
  .hero .hero__status {
    max-width: 26rem;
  }
}
@media (min-width: 900px) and (max-width: 1439.98px) {
  .hero .hero__actions {
    justify-content: stretch;
    max-width: 26rem;
  }
}
@media (min-width: 560px) and (max-width: 899.98px) {
  .hero .hero__actions {
    justify-content: stretch;
  }
  .hero .hero__actions,
  .hero .hero__status,
  .hero .hero__facts {
    max-width: 30rem;
  }
}
@media (min-width: 1280px) {
  .hero .hero__facts,
  .hero .hero__status {
    max-width: 30rem;
  }
}
@media (min-width: 1280px) and (max-width: 1439.98px) {
  .hero .hero__actions {
    max-width: 30rem;
  }
}

/* Feinschliff: Wortabstand im schmalen Titel, Kernaussage im Einleiter, ruhiger Umbruch */
.hero__line {
  word-spacing: 0.07em;
}
.hero__lead {
  text-wrap: pretty;
}
.hero__lead strong {
  color: var(--paper);
  font-weight: 650;
}

/* Tarif-Status und Fakten als ein Paneel: Live-Zeile oben, drei Fakten darunter.
   Ring und Symbole stehen in derselben Spalte, die Texte beginnen auf derselben Kante. */
.hero .tarifstatus {
  column-gap: 0.85rem;
  padding: 0.8rem 1.15rem;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
@media (min-width: 900px) {
  .hero .tarifstatus {
    padding-inline: 1rem;
  }
}
.hero .hero__facts {
  margin-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  box-shadow:
    inset 1px 0 0 oklch(0.95 0.02 75 / 0.12),
    inset -1px 0 0 oklch(0.95 0.02 75 / 0.12),
    inset 0 -1px 0 oklch(0.95 0.02 75 / 0.12);
}

/* Handy: kürzerer Weg zu den Buttons */
@media (max-width: 599.98px) {
  .hero__lead {
    margin-top: var(--sp-4);
    font-size: 1.125rem;
  }
  .hero__actions {
    margin-top: var(--sp-6);
  }
}

/* Desktop mit wenig Höhe (z. B. 1440 × 900): alles im ersten Bildschirm */
@media (min-width: 900px) and (max-height: 960px) {
  .hero {
    padding-top: clamp(2rem, 0.5rem + 3vw, 3.5rem);
  }
  .hero__line {
    font-size: min(8.2vw, 7.6rem);
  }
  .hero__lead {
    margin-top: var(--sp-4);
  }
  .hero__actions {
    margin-top: var(--sp-6);
  }
  .hero .hero__fact {
    padding-block: 0.6rem;
  }
}
@media (min-width: 900px) and (max-height: 880px) {
  .hero {
    padding-top: 2.25rem;
  }
  .hero__line {
    font-size: min(7.6vw, 7rem);
  }
  .hero__sub {
    margin-top: 0.75rem;
  }
}

/* Foto setzt sich beim Laden langsam, einmalig */
@media (prefers-reduced-motion: no-preference) {
  .hero__media img {
    animation: hero-settle 9s cubic-bezier(0.2, 0.6, 0.2, 1) both;
  }
}
@keyframes hero-settle {
  from {
    transform: scale(1.08);
  }
  to {
    transform: scale(1);
  }
}

.edge-bitting {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  width: 100%;
  height: var(--cut);
  fill: var(--bg-2);
}
.edge-bitting .edge-bitting__line {
  fill: none;
  stroke: var(--signal);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

/* ---------- Zifferblatt (Signature) ---------- */
.dial {
  display: grid;
  justify-items: center;
  gap: var(--sp-4);
}
.dial__svg {
  width: min(76vw, 340px);
  height: auto;
  overflow: visible;
}
@media (min-width: 900px) {
  .dial__svg {
    width: clamp(260px, 26vw, 380px);
  }
}
.dial__face {
  fill: var(--bg-2);
  stroke: var(--line);
  stroke-width: 1;
}
.dial__arc {
  fill: none;
  stroke-width: 12;
}
.dial__arc--day {
  stroke: var(--signal);
  stroke-dasharray: 13 11;
  stroke-dashoffset: -7;
}
.dial__arc--night {
  stroke: var(--kupfer);
  stroke-dasharray: 11 13;
  stroke-dashoffset: -20;
}
.dial__ticks {
  fill: none;
}
.dial__ticks--minor {
  stroke: var(--text-muted);
  stroke-width: 8;
  stroke-dasharray: 0.08 0.92;
  stroke-dashoffset: 0.04;
}
.dial__ticks--major {
  stroke: var(--text);
  stroke-width: 16;
  stroke-dasharray: 0.035 0.965;
  stroke-dashoffset: 0.0175;
}
.dial__hours text {
  fill: var(--text-muted);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 650;
  text-anchor: middle;
}
.dial__big {
  fill: var(--signal);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  font-stretch: 64%;
  font-size: 78px;
  text-anchor: middle;
}
.dial__small {
  fill: var(--text);
  font-family: var(--font);
  font-weight: 800;
  font-stretch: 84%;
  font-size: 13px;
  letter-spacing: 0.24em;
  text-anchor: middle;
}
.dial__hand {
  display: none;
  transform-box: view-box;
  transform-origin: 120px 120px;
}
.dial.is-live .dial__hand {
  display: block;
}
.dial__hand line {
  stroke: var(--text);
  stroke-width: 3;
  stroke-linecap: round;
}
.dial__hand circle {
  fill: var(--text);
  stroke: var(--bg);
  stroke-width: 3;
}
.dial__caption {
  display: grid;
  gap: 0.25rem;
  max-width: 32ch;
}
.dial__now {
  font-weight: 780;
  font-stretch: 84%;
  font-size: 1.2rem;
  line-height: 1.25;
}
.dial__now strong {
  color: var(--signal-text);
}
.dial__status {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: 1.45;
}

/* ---------- Festpreise ---------- */
.prices {
  padding-block: var(--sp-12) var(--section);
  background: var(--bg-2);
}
.prices__head {
  display: grid;
  gap: var(--sp-4);
  max-width: 900px;
}
.prices__intro {
  max-width: 52ch;
  color: var(--text-muted);
  font-size: var(--fs-lg);
  line-height: 1.5;
}
.tariff-head {
  display: none;
}
.tariffs {
  display: grid;
  gap: var(--sp-4);
  margin-top: var(--sp-12);
}
.tariff {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: var(--sp-4);
  align-items: center;
  padding: var(--sp-6) var(--sp-4) var(--sp-4);
  background: var(--bg);
  border-left: 3px solid var(--line);
}
.tariff:has(.is-active) {
  border-left-color: var(--signal-text);
}
.tariff__icon {
  flex: none;
  width: 64px;
  height: 64px;
}
.tariff__title {
  font-weight: 780;
  font-stretch: 82%;
  font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.75rem);
  line-height: 1.1;
}
.tariff__detail {
  margin-top: 0.25rem;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}
.tariff__prices {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2);
}
.tariff__price {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: 0.2rem;
  padding: 0.8rem 1rem 0.9rem;
  color: var(--text);
}
.tariff__price::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--bg-2);
  border-radius: var(--radius-s);
  transition: background-color var(--dur-3) var(--ease-out);
}
.tariff__price dt {
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.3;
}
.tariff__price dd {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  font-stretch: 66%;
  font-size: clamp(2.3rem, 1.6rem + 3vw, 4.2rem);
  line-height: 0.95;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tariff__price.is-active {
  color: var(--bg);
}
.tariff__price.is-active::before {
  background: var(--signal);
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
}
.tariff__price.is-active dt {
  color: var(--bg);
}
.prices__foot {
  display: grid;
  gap: var(--sp-4);
  margin-top: var(--sp-8);
}
.prices__rule {
  display: flex;
  gap: 0.7rem;
  max-width: 70ch;
  color: var(--text-muted);
}
.prices__rule .icon {
  margin-top: 0.2em;
  color: var(--kupfer);
}
/* Zahlungsarten immer unter der Tarifregel, der Link bleibt rechts daneben */
.prices__rule--pay {
  grid-column: 1;
}
.prices__live {
  display: block;
  margin-top: 0.35rem;
  color: var(--text);
}
@media (min-width: 760px) {
  .tariff-head,
  .tariff {
    grid-template-columns: 96px minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr);
  }
  .tariff-head {
    display: grid;
    gap: var(--sp-6);
    margin-top: var(--sp-12);
    padding-inline: var(--sp-6);
    color: var(--text-muted);
    font-size: var(--fs-sm);
    font-weight: 650;
  }
  .tariff-head__col {
    padding-inline: 1.1rem;
  }
  .tariff-head__col.is-active {
    color: var(--signal-text);
  }
  .tariff-head span:first-child {
    grid-column: 1 / 3;
  }
  .tariffs {
    margin-top: var(--sp-3);
  }
  .tariff {
    gap: var(--sp-6);
    padding: var(--sp-4) var(--sp-6);
  }
  .tariff__icon {
    width: 88px;
    height: 88px;
  }
  .tariff__prices {
    grid-column: 3 / 5;
    gap: var(--sp-6);
  }
  .tariff__price {
    padding: 1rem 1.1rem;
  }
  .tariff__price dt {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .prices__foot {
    grid-template-columns: 1fr auto;
    align-items: center;
  }
}

/* ---------- Schlüsselloch-Reveal ---------- */
/* Das Foto öffnet sich aus einem Schlüsselloch. Der Text steht immer unter dem Foto, nie auf dem Auto.
   Ab 900 px füllt das Bild den Schirm und das Textband folgt. Schmaler sitzt das Bild oben unter
   dem Kopf, der Text schiebt sich beim Scrollen darunter und rastet an der Bildkante ein. */
.keyhole {
  --kh-img: min(52svh, 106vw);
  position: relative;
  padding-bottom: clamp(3.5rem, 2rem + 5vw, 6rem);
  background: var(--bg);
}
/* Die Spur trägt den Scroll-Fortschritt */
.keyhole__track {
  --p: 0;
  position: relative;
  height: 185vh;
}
.keyhole__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  background:
    radial-gradient(70% 55% at 50% 42%, oklch(0.36 0.08 48) 0%, oklch(0.22 0.04 45) 45%, var(--bg) 78%);
}
.keyhole__media {
  grid-area: 1 / 1;
}
.keyhole__media {
  -webkit-mask-image: url("/assets/svg/keyhole.svg");
  mask-image: url("/assets/svg/keyhole.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 50% 42%;
  mask-position: 50% 42%;
  -webkit-mask-size: max(var(--mask, 32vmin), 28vmin);
  mask-size: max(var(--mask, 32vmin), 28vmin);
}
.keyhole__media.is-open {
  -webkit-mask-image: none;
  mask-image: none;
}
.keyhole__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 45% 60%;
  transform: scale(calc(1.18 - var(--p) * 0.18));
}
.keyhole__stage::before {
  content: "";
  grid-area: 1 / 1;
  z-index: 1;
  background: var(--signal);
  -webkit-mask: url("/assets/svg/keyhole-kontur.svg") 50% 42% / max(var(--mask, 32vmin), 28vmin) no-repeat;
  mask: url("/assets/svg/keyhole-kontur.svg") 50% 42% / max(var(--mask, 32vmin), 28vmin) no-repeat;
  opacity: clamp(0, (0.45 - var(--p, 0)) * 3, 1);
  pointer-events: none;
}
/* Nur ein weicher Übergang am unteren Bildrand, das Auto bleibt unverdeckt */
.keyhole__stage::after {
  content: "";
  grid-area: 1 / 1;
  align-self: end;
  height: 24%;
  background: linear-gradient(to top, var(--bg) 0%, oklch(0.165 0.01 50 / 0.5) 35%, transparent 100%);
  opacity: clamp(0, (var(--p) - 0.28) * 4, 1);
  pointer-events: none;
}
@media (max-width: 899px) {
  .keyhole__stage {
    grid-template-rows: var(--kh-img) 1fr;
    padding-top: var(--header-h);
    background:
      radial-gradient(90% 38% at 50% calc(var(--header-h) + var(--kh-img) * 0.42), oklch(0.36 0.08 48) 0%, oklch(0.22 0.04 45) 50%, var(--bg) 100%);
  }
  .keyhole__media img {
    object-position: 50% 55%;
  }
  .keyhole__stage::after {
    height: 20%;
  }
}

/* Textband unter dem Foto */
.keyhole__copy {
  position: relative;
  z-index: 1;
  width: min(100% - 2 * var(--gutter), var(--maxw));
  margin: clamp(1.5rem, 1rem + 2vw, 3rem) auto 0;
  color: oklch(0.97 0.006 70);
}
@media (max-width: 899px) {
  /* rastet beim Ende der Spur direkt unter dem Bild ein */
  .keyhole__copy {
    margin-top: calc(var(--header-h) + var(--kh-img) + 1rem - 100svh);
  }
}
.keyhole__title {
  font-size: clamp(2.1rem, 1.1rem + 4.2vw, 4.6rem);
  line-height: 0.92;
  color: oklch(0.97 0.006 70);
}
.keyhole__orange {
  color: var(--signal);
}
.keyhole__then {
  display: block;
}
.keyhole__text > p:first-child {
  max-width: 46ch;
  margin-top: var(--sp-4);
  color: oklch(0.88 0.012 65);
  font-size: var(--fs-base);
  line-height: 1.55;
}
.keyhole__text em {
  color: var(--signal);
  font-weight: 700;
}
/* Nummer wie der Streifen auf der Fahrzeugfolie: Orange, schwarze Kursive, schräges Ende */
.keyhole__foil {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-4);
  margin-top: var(--sp-6);
}
.keyhole__tel {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 3.25rem;
  padding: 0.5rem 2.1rem 0.5rem 1rem;
  color: var(--asphalt);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 880;
  font-stretch: 66%;
  font-size: clamp(1.45rem, 1.15rem + 1.1vw, 1.95rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-decoration: none;
}
.keyhole__tel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--signal);
  clip-path: polygon(0 0, 100% 0, calc(100% - 1.1rem) 100%, 0 100%);
  transition: background-color var(--dur-2) var(--ease-out);
}
.keyhole__tel:hover::before {
  background: var(--signal-hi);
}
.keyhole__tel .icon {
  width: 0.8em;
  height: 0.8em;
  flex: none;
}
.keyhole__tel-label {
  text-transform: uppercase;
}
.keyhole__foil-note {
  color: oklch(0.8 0.016 60);
  font-size: var(--fs-sm);
}
@media (min-width: 900px) {
  .keyhole__copy {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: end;
    gap: var(--sp-6) clamp(2rem, 5vw, 5rem);
  }
  .keyhole__text > p:first-child {
    margin-top: 0;
    font-size: var(--fs-lg);
    line-height: 1.5;
  }
}

/* Ohne Bewegung und ohne JS: Bild offen, Text normal darunter */
@media (prefers-reduced-motion: reduce) {
  .keyhole__track {
    height: auto;
  }
  .keyhole__stage {
    position: relative;
    height: 80vh;
    padding-top: 0;
  }
  .keyhole__media {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .keyhole__media img {
    transform: none;
  }
  .keyhole__stage::before {
    display: none;
  }
  .keyhole__stage::after {
    opacity: 1;
  }
  .keyhole__copy {
    margin-top: clamp(1.5rem, 1rem + 2vw, 3rem);
  }
}
@media (prefers-reduced-motion: reduce) and (max-width: 899px) {
  .keyhole__stage {
    height: auto;
  }
}
@media (scripting: none) {
  .keyhole__track {
    height: auto;
  }
  .keyhole__stage {
    position: relative;
    height: 80vh;
    padding-top: 0;
  }
  .keyhole__media {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .keyhole__stage::before {
    display: none;
  }
  .keyhole__stage::after {
    opacity: 1;
  }
  .keyhole__copy {
    margin-top: clamp(1.5rem, 1rem + 2vw, 3rem);
  }
}
@media (scripting: none) and (max-width: 899px) {
  .keyhole__stage {
    height: auto;
  }
}

/* ---------- Leistungen Notdienst ---------- */
.services {
  padding-block: var(--section);
}
.services__grid {
  display: grid;
  gap: var(--sp-12);
}
.services__intro {
  max-width: 40ch;
  margin-top: var(--sp-4);
  color: var(--text-muted);
  font-size: var(--fs-lg);
  line-height: 1.5;
}
.services__media {
  display: none;
}
.mask-slant {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), 0 100%);
}
/* Hierarchie statt Kachelraster: die Türöffnung vorn als Tafel wie die Fahrzeugfolie,
   darunter ein Verzeichnis der übrigen Fälle, der Nachtaufschlag als blaues Band
   wie die Nachtspalte der Preise. Beide Tafeln tragen dieselbe Schräge. */
.service-list {
  --cut-x: clamp(1.25rem, 3.5vw, 3rem);
  display: grid;
}
/* Verzeichniszeile */
.service {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: start;
  padding-block: var(--sp-6);
  border-top: 1px solid var(--line);
}
.service__icon {
  flex: none;
  width: 48px;
  height: 48px;
  transition: transform var(--dur-3) var(--ease-out);
}
.service:hover .service__icon {
  transform: rotate(-8deg) scale(1.08);
}
.service__title {
  margin-bottom: 0.35rem;
  font-weight: 780;
  font-stretch: 82%;
  font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem);
  line-height: 1.1;
}
.service p {
  max-width: 50ch;
  color: var(--text-muted);
}
.service strong {
  color: var(--text);
  font-weight: 760;
  font-variant-numeric: tabular-nums;
}

/* Hauptleistung */
.service--lead {
  --text: oklch(0.955 0.008 70);
  --text-muted: oklch(0.8 0.016 60);
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-4) clamp(1rem, 0.5rem + 2vw, 2rem);
  align-items: center;
  margin-bottom: var(--sp-6);
  padding: clamp(1.5rem, 1rem + 2.4vw, 2.75rem) calc(var(--cut-x) + clamp(0.75rem, 2vw, 2rem)) clamp(1.25rem, 1rem + 1.6vw, 2.25rem) clamp(1.25rem, 1rem + 2vw, 2.5rem);
  border: 0;
  background:
    radial-gradient(90% 120% at 0% 0%, oklch(0.31 0.06 50) 0%, transparent 62%),
    var(--asphalt);
  color: var(--text);
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--cut-x)) 100%, 0 100%);
}
.service--lead .service__icon {
  width: clamp(64px, 40px + 4vw, 104px);
  height: clamp(64px, 40px + 4vw, 104px);
}
.service--lead .service__title {
  margin-bottom: var(--sp-3);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 880;
  font-stretch: 66%;
  font-size: clamp(2.1rem, 1.3rem + 2.8vw, 3.5rem);
  line-height: 0.94;
}
.service--lead p {
  font-size: var(--fs-lg);
  line-height: 1.45;
}
.service__tag {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-4);
  margin-top: var(--sp-2);
}
.service p.service__tag {
  max-width: none;
}
/* Preis als Streifen wie die Telefonzeile auf der Folie */
.service__price {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  padding: 0.4rem 1.9rem 0.45rem 0.9rem;
  color: var(--asphalt);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 880;
  font-stretch: 66%;
  font-size: clamp(2rem, 1.5rem + 1.6vw, 2.9rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.service__price::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--signal);
  clip-path: polygon(0 0, 100% 0, calc(100% - 1rem) 100%, 0 100%);
}
.service__price-when {
  font-size: 0.46em;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.service__price-more {
  max-width: 26ch;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: 1.35;
}
.service--lead .service__more {
  justify-self: start;
  margin-top: calc(var(--sp-2) * -1);
  color: var(--signal);
}

/* Nachtaufschlag */
.service--night {
  --text: oklch(0.97 0.006 250);
  --text-muted: var(--tinte-muted);
  grid-template-columns: 48px minmax(0, 1fr);
  grid-template-areas: "body body" "icon plus";
  align-items: center;
  margin-top: var(--sp-6);
  padding: clamp(1.25rem, 1rem + 1.4vw, 2rem) calc(var(--cut-x) + clamp(0.75rem, 1.5vw, 1.5rem)) clamp(1.25rem, 1rem + 1.4vw, 2rem) clamp(1.25rem, 1rem + 2vw, 2.5rem);
  border: 0;
  background:
    radial-gradient(80% 160% at 100% 0%, oklch(0.36 0.085 254) 0%, transparent 62%),
    var(--tinte);
  color: var(--text);
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--cut-x)) 100%, 0 100%);
}
.service--night .service__title {
  margin-bottom: 0.25rem;
}
.service--night .service__icon {
  grid-area: icon;
}
.service--night .service__body {
  grid-area: body;
}
.service p.service__surcharge {
  grid-area: plus;
  color: var(--stahl-hell);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 880;
  font-stretch: 66%;
  font-size: clamp(2.6rem, 1.9rem + 2.4vw, 4.2rem);
  line-height: 0.9;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
@media (min-width: 600px) {
  .service--lead {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .service__tag,
  .service--lead .service__more {
    grid-column: 1 / -1;
  }
  .service--night {
    grid-template-columns: 56px minmax(0, 1fr) auto;
    grid-template-areas: "icon body plus";
  }
  .service--night .service__icon {
    width: 56px;
    height: 56px;
  }
}
@media (min-width: 960px) {
  .services__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--sp-16);
    align-items: start;
  }
  .services__aside {
    position: sticky;
    top: calc(var(--header-h) + 2rem);
  }
  .services__media {
    display: block;
    margin-top: var(--sp-8);
    max-width: 440px;
  }
  .services__media img {
    width: 100%;
    aspect-ratio: 4 / 4.4;
    object-fit: cover;
  }
  .service:not(.service--lead, .service--night) {
    grid-template-columns: 56px minmax(0, 1fr);
    gap: var(--sp-6);
  }
  .service:not(.service--lead) .service__icon {
    width: 56px;
    height: 56px;
  }
}
@media (min-width: 960px) and (max-width: 1199px) {
  /* schmale rechte Spalte: Nachtband wieder zweizeilig */
  .service--night {
    grid-template-columns: 56px minmax(0, 1fr);
    grid-template-areas: "body body" "icon plus";
  }
}
@media (min-width: 1200px) {
  /* Verzeichnis: Titel links, Text rechts */
  .service:not(.service--lead, .service--night) .service__body {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
    gap: var(--sp-6);
    align-items: baseline;
  }
}

/* ---------- Akademie-Teaser (Tinte-Welt) ---------- */
.academy-teaser {
  position: relative;
  padding-block: calc(var(--section) + 1rem) var(--section);
  background: var(--tinte);
  color: var(--text);
}
.academy-teaser::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 26px;
  background:
    repeating-linear-gradient(90deg, var(--messing) 0 3px, transparent 3px 144px),
    repeating-linear-gradient(90deg, var(--messing-deep) 0 2px, transparent 2px 24px);
  background-size: 100% 26px, 100% 12px;
  background-repeat: no-repeat;
}
.academy-teaser :focus-visible {
  outline-color: var(--messing);
}
.academy-teaser__grid {
  display: grid;
  gap: var(--sp-12);
  align-items: center;
}
.academy-teaser__mark {
  position: relative;
  display: grid;
  place-items: center;
  max-width: 520px;
  width: 100%;
  justify-self: center;
  padding: clamp(1.75rem, 1rem + 3vw, 3.25rem) clamp(1.25rem, 0.8rem + 2.5vw, 2.5rem);
  background: var(--beton);
  border-radius: var(--radius-m);
  box-shadow: 0 18px 40px -24px oklch(0.05 0.02 258 / 0.9);
  transform: rotate(-1.5deg);
}
.academy-teaser__mark img {
  width: 100%;
}
.h-calm--brass {
  color: var(--messing);
}
.academy-teaser__claim {
  margin-top: var(--sp-3);
  font-weight: 560;
  font-stretch: 122%;
  font-size: var(--fs-lg);
  letter-spacing: 0.02em;
}
.academy-teaser__copy > p:not(.academy-teaser__claim) {
  max-width: 54ch;
  margin-top: var(--sp-6);
  color: var(--tinte-muted);
}
.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1px;
  margin-top: var(--sp-8);
  background: var(--tinte-3);
  border: 1px solid var(--tinte-3);
  border-radius: var(--radius-m);
  overflow: hidden;
}
.facts__item {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: 0.2rem;
  padding: 1.1rem 1.25rem 1.2rem;
  background: var(--tinte-2);
}
.facts dt {
  color: var(--tinte-muted);
  font-size: var(--fs-sm);
}
.facts dd {
  font-weight: 700;
  font-stretch: 112%;
  font-size: 1.6rem;
  line-height: 1.15;
  color: var(--messing);
  font-variant-numeric: tabular-nums;
}
.facts dd small {
  display: block;
  margin-top: 0.2rem;
  color: var(--text);
  font-weight: 450;
  font-stretch: 100%;
  font-size: var(--fs-sm);
}
.academy-teaser__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4) var(--sp-8);
  margin-top: var(--sp-8);
}
@media (min-width: 960px) {
  .academy-teaser__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--sp-16);
  }
}

/* ---------- Einsatzgebiet ---------- */
.area {
  padding-block: var(--section);
}
.area__grid {
  display: grid;
  gap: var(--sp-12);
}
.area__copy > p {
  max-width: 44ch;
  margin-top: var(--sp-4);
  color: var(--text-muted);
  font-size: var(--fs-lg);
  line-height: 1.5;
}
/* Stadtteile als Register wie im Stadtplan: alphabetisch in Spalten, Haarlinie je Zeile */
.area__grid > * {
  min-width: 0;
}
.area__list {
  columns: 2;
  column-gap: var(--sp-6);
  margin-top: var(--sp-8);
}
.area__list li {
  break-inside: avoid;
}
.area__list a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 46px;
  padding: 0 0.5rem 0 0.7rem;
  border-bottom: 1px solid var(--line);
  border-left: 3px solid transparent;
  font-size: var(--fs-base);
  font-weight: 600;
  font-stretch: 92%;
  text-decoration: none;
  transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) ease-out, border-color var(--dur-2) ease-out;
}
.area__home {
  margin-left: auto;
  padding: 0.15rem 0.45rem;
  background: var(--signal);
  color: var(--asphalt);
  font-size: 0.6875rem;
  font-weight: 760;
  font-stretch: 100%;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
@media (min-width: 600px) and (max-width: 959.98px), (min-width: 1200px) {
  .area__list {
    columns: 3;
  }
}
.area__map {
  position: relative;
  justify-self: center;
  width: min(100%, 560px);
}
.map svg {
  width: 100%;
  height: auto;
  overflow: visible;
}
.map path {
  fill: var(--bg-2);
  stroke: var(--line);
  stroke-width: 1.4;
  stroke-linejoin: round;
  transition: fill var(--dur-2) ease-out;
}
.map a:hover path,
.map a:focus-visible path,
.map path.is-hot {
  fill: var(--signal);
}
.map a:focus-visible {
  outline: none;
}
.map a:focus-visible path {
  stroke: var(--text);
  stroke-width: 3;
}
.map #st-bramfeld {
  fill: var(--bg-3);
}
.map text {
  fill: var(--text-muted);
  font-family: var(--font);
  font-size: 15px;
  font-weight: 650;
  font-stretch: 84%;
  text-anchor: middle;
  pointer-events: none;
}
.map .is-hot-label {
  fill: var(--bg);
}
/* Zonennamen, Nordpfeil und Maßstab zeigt nur die Einsatzgebiet-Seite */
.map .map__extra {
  display: none;
}
.map #standort {
  fill: var(--signal);
  stroke: var(--bg);
  stroke-width: 3;
}
.map .standort-ring {
  fill: none;
  stroke: var(--signal);
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
}
@media (prefers-reduced-motion: no-preference) {
  .map .standort-ring {
    animation: ping 2.8s var(--ease-out) infinite;
  }
}
.map__legend {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: var(--sp-3);
  color: var(--text-muted);
  font-size: var(--fs-sm);
}
.map__legend::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--signal);
  margin-inline: 4px;
}
@media (max-width: 599px) {
  .map text {
    display: none;
  }
}
@media (min-width: 960px) {
  .area__grid {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    align-items: center;
    gap: var(--sp-16);
  }
}

/* ---------- Vertrauen ---------- */
/* Warm-dunkle Insel mit Kupferschein: links Klingelschild mit echter Adresse, rechts die Prüfliste */
.trust {
  position: relative;
  padding-block: calc(var(--section) + var(--cut)) var(--section);
  background:
    radial-gradient(60% 70% at 0% 8%, oklch(0.38 0.08 52 / 0.6) 0%, transparent 62%),
    radial-gradient(50% 60% at 100% 100%, oklch(0.3 0.06 45 / 0.55) 0%, transparent 66%),
    var(--asphalt);
  clip-path: polygon(0 0, 100% var(--cut), 100% 100%, 0 100%);
  /* schiebt sich über das Kartenblatt, damit im Keil die Skyline weiterläuft statt Papier */
  margin-top: calc(-1 * var(--cut));
}
.trust__grid {
  display: grid;
  gap: var(--sp-12);
}
.trust__title {
  max-width: 13ch;
  font-size: clamp(2.5rem, 1.6rem + 3vw, 4.25rem);
}
/* Klingelschild: graviertes Schild mit zwei Schrauben */
.trust__plate {
  position: relative;
  display: grid;
  gap: 0.3rem;
  width: fit-content;
  max-width: 100%;
  margin-top: var(--sp-8);
  padding: 1.35rem 2.6rem 1.3rem;
  background: linear-gradient(165deg, oklch(0.97 0.006 80) 0%, oklch(0.91 0.01 75) 100%);
  border-radius: 3px;
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.8),
    inset 0 -2px 0 oklch(0.78 0.012 70),
    0 20px 34px -20px oklch(0.05 0.01 50 / 0.95);
  color: var(--ink);
  font-style: normal;
  text-shadow: 0 1px 0 oklch(1 0 0 / 0.7);
}
.trust__plate::before,
.trust__plate::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  border-radius: 50%;
  background:
    linear-gradient(45deg, transparent 43%, oklch(0.5 0.01 70) 43% 57%, transparent 57%),
    radial-gradient(circle at 35% 30%, oklch(0.96 0.004 80), oklch(0.66 0.01 70));
  box-shadow: 0 0 0 1px oklch(0.6 0.01 70 / 0.8);
}
.trust__plate::before {
  left: 0.95rem;
}
.trust__plate::after {
  right: 0.95rem;
}
.trust__plate-firm {
  color: var(--ink-muted);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
@media (max-width: 479.98px) {
  .trust__plate {
    padding-inline: 2.1rem;
  }
  .trust__plate-firm {
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
  }
  .trust__plate-name {
    font-stretch: 104%;
    font-size: 1.25rem;
  }
}
.trust__plate-name {
  font-weight: 700;
  font-stretch: 118%;
  font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.8rem);
  line-height: 1.1;
  letter-spacing: 0.005em;
}
.trust__plate-addr {
  color: var(--ink-muted);
  font-size: var(--fs-sm);
  font-weight: 500;
}
/* Prüfliste: abgehakte Punkte als Zeilen mit Haarlinie */
.trust__list {
  display: grid;
  border-top: 1px solid oklch(0.955 0.008 70 / 0.16);
}
.trust__item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 0.4rem var(--sp-4);
  align-items: start;
  padding-block: var(--sp-6);
  border-bottom: 1px solid oklch(0.955 0.008 70 / 0.16);
}
.trust__tick {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  background: var(--signal);
  color: var(--asphalt);
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}
.trust__tick .icon {
  width: 26px;
  height: 26px;
}
.trust__item h3 {
  align-self: center;
  font-weight: 800;
  font-stretch: 80%;
  font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.85rem);
  line-height: 1.1;
}
.trust__item p {
  color: var(--text-muted);
  max-width: 46ch;
}
.trust__more {
  justify-self: start;
  margin-top: calc(-1 * var(--sp-4));
}
@media (min-width: 1000px) {
  .trust__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--sp-16);
    align-items: start;
  }
  .trust__side {
    position: sticky;
    top: calc(var(--header-h) + 2rem);
  }
  .trust__more {
    grid-column: 2;
  }
}
@media (min-width: 1200px) {
  /* Titel und Erklärung nebeneinander wie auf einem Prüfprotokoll */
  .trust__item {
    grid-template-columns: 52px minmax(0, 0.95fr) minmax(0, 1.05fr);
    column-gap: var(--sp-6);
    padding-block: var(--sp-8);
  }
  .trust__tick {
    grid-row: auto;
    width: 52px;
    height: 52px;
  }
  .trust__item h3 {
    align-self: start;
    padding-top: 0.35rem;
  }
  .trust__item p {
    padding-top: 0.35rem;
  }
}

/* ---------- Ratgeber-Teaser ---------- */
.journal {
  padding-block: var(--section);
}
.journal__head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--sp-4);
}
.posts {
  display: grid;
  gap: var(--sp-8);
  margin-top: var(--sp-12);
}
.post {
  position: relative;
  display: grid;
  gap: var(--sp-4);
  align-content: start;
}
.post__media {
  overflow: hidden;
  border-radius: var(--radius-s);
}
.post__media img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  filter: brightness(1.1) contrast(1.04);
  transition: transform var(--dur-4) var(--ease-out);
}
.post:hover .post__media img {
  transform: scale(1.04);
}
.post__meta {
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.post__title {
  font-weight: 780;
  font-stretch: 84%;
  font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem);
  line-height: 1.12;
}
.post__title a {
  text-decoration: none;
}
.post__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.post:hover .post__title a {
  color: var(--signal-text);
}
.post__title a:focus-visible {
  outline: none;
}
.post:has(a:focus-visible) {
  outline: 3px solid var(--signal);
  outline-offset: 6px;
  border-radius: var(--radius-s);
}
.post__excerpt {
  color: var(--text-muted);
}
@media (min-width: 760px) {
  .posts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .posts--home .post:first-child {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: center;
    gap: var(--sp-8);
  }
  .posts--home .post:first-child .post__title {
    font-size: clamp(1.8rem, 1.2rem + 1.6vw, 2.6rem);
  }
}
@media (min-width: 1080px) {
  .posts--all {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Startseite: ein Aufmacher, zwei kurze Zeilen daneben statt dreier gleicher Bildkarten */
.page-home .journal::before {
  content: none;
}
.posts--home .post:first-child .post__media {
  border-radius: 0;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), 0 100%);
}
.posts--home .post:not(:first-child) {
  grid-template-columns: minmax(96px, 30%) minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-2) var(--sp-4);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line);
}
.posts--home .post:not(:first-child) .post__media img {
  aspect-ratio: 1;
}
.posts--home .post:not(:first-child) .post__body {
  display: grid;
  gap: var(--sp-2);
}
.posts--home .post:not(:first-child) .post__title {
  font-size: clamp(1.15rem, 1rem + 0.5vw, 1.45rem);
}
.posts--home .post:not(:first-child) .post__excerpt {
  display: none;
}
@media (min-width: 760px) {
  .posts--home .post:not(:first-child) .post__media img {
    aspect-ratio: 4 / 3;
  }
}
@media (min-width: 1080px) {
  .posts--home {
    column-gap: var(--sp-12);
  }
  .posts--home .post:first-child {
    gap: var(--sp-12);
  }
  .posts--home .post:first-child .post__excerpt {
    font-size: var(--fs-lg);
    line-height: 1.5;
  }
  .posts--home .post:not(:first-child) {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: var(--sp-6);
  }
}

/* Ratgeber-Übersicht: Aufmacher plus Inhaltsverzeichnis statt Kartenraster.
   Nur CSS, das Markup kommt unverändert aus tools/build-content.py (post_card). */
.page-journal .page-hero {
  padding-bottom: clamp(2rem, 1rem + 3vw, 3.5rem);
}
.page-journal .page-hero__title {
  max-width: 20ch;
  hyphens: manual;
  text-wrap: balance;
}
.page-journal .page-hero__lead {
  max-width: 42ch;
  color: var(--text);
}
.page-journal .journal--hub {
  padding-block: 0 clamp(3.5rem, 2rem + 5vw, 6.5rem);
}
.page-journal .journal::before {
  display: none;
}
.page-journal .posts--all {
  counter-reset: post;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin-top: 0;
  border-top: 3px solid var(--text);
}
.page-journal .posts--all .post {
  counter-increment: post;
  grid-template-columns: 3.4rem minmax(0, 1fr);
  grid-template-areas: "num body";
  gap: var(--sp-4) var(--sp-4);
  padding-block: var(--sp-8);
  border-bottom: 1px solid var(--hairline);
}
.page-journal .posts--all .post::before {
  content: counter(post, decimal-leading-zero);
  content: counter(post, decimal-leading-zero) / "";
  grid-area: num;
  align-self: start;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  font-stretch: 66%;
  font-size: clamp(3rem, 2.2rem + 2.6vw, 4.4rem);
  line-height: 0.82;
  font-variant-numeric: tabular-nums;
  color: transparent;
  -webkit-text-stroke: 2px var(--signal-text);
}
.page-journal .posts--all .post:hover::before {
  color: var(--signal);
  -webkit-text-stroke-color: var(--signal);
}
.page-journal .posts--all .post__media {
  grid-area: media;
  align-self: start;
  border-radius: 0;
}
.page-journal .posts--all .post__media img {
  aspect-ratio: 3 / 2;
}
/* Mobil: Inhaltsverzeichnis mit hängenden Ziffern, Bild nur beim Aufmacher */
@media (max-width: 759px) {
  .page-journal .posts--all .post:not(:first-child) .post__media {
    display: none;
  }
}
.page-journal .posts--all .post__body {
  grid-area: body;
  display: grid;
  gap: var(--sp-2);
  align-content: start;
}
.page-journal .posts--all .post__title {
  max-width: 26ch;
  hyphens: manual;
  font-size: clamp(1.4rem, 1rem + 1.4vw, 2.3rem);
  line-height: 1.06;
  text-wrap: balance;
}
.page-journal .posts--all .post__excerpt {
  max-width: 60ch;
  line-height: 1.55;
}
/* Aufmacher: neuester Artikel groß, Titel in der Notruf-Schrift */
.page-journal .posts--all .post:first-child {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "media" "num" "body";
  padding-top: var(--sp-6);
}
.page-journal .posts--all .post:first-child::before {
  margin-top: var(--sp-2);
}
.page-journal .posts--all .post:first-child .post__media img {
  aspect-ratio: 3 / 2;
}
.page-journal .posts--all .post:first-child .post__title {
  max-width: 17ch;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 880;
  font-stretch: 66%;
  font-size: clamp(2.3rem, 1.3rem + 3.4vw, 4.2rem);
  line-height: 0.95;
}
.page-journal .posts--all .post:first-child .post__excerpt {
  max-width: 44ch;
  color: var(--text);
  font-size: var(--fs-lg);
  line-height: 1.5;
}
@media (min-width: 760px) {
  .page-journal .posts--all .post:not(:first-child) {
    grid-template-columns: 6rem minmax(0, 1fr) minmax(0, 15rem);
    grid-template-areas: "num body media";
    column-gap: clamp(1.5rem, 0.5rem + 2.5vw, 3.5rem);
  }
}
@media (min-width: 900px) {
  .page-journal .posts--all .post:first-child {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "media num" "media body";
    column-gap: clamp(2rem, 0.5rem + 3.5vw, 4.5rem);
    padding-block: var(--sp-12);
  }
  .page-journal .posts--all .post:first-child .post__media {
    clip-path: polygon(0 0, 100% 0, calc(100% - var(--cut)) 100%, 0 100%);
  }
  .page-journal .posts--all .post:first-child .post__media img {
    aspect-ratio: 4 / 3;
  }
  .page-journal .posts--all .post:first-child::before {
    margin-top: 0;
    font-size: clamp(4.5rem, 2rem + 5vw, 7.5rem);
  }
  .page-journal .posts--all .post:first-child .post__body {
    align-self: end;
    gap: var(--sp-4);
  }
}
@media (min-width: 1080px) {
  .page-journal .page-hero .wrap {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: clamp(2rem, 0.5rem + 3.5vw, 4.5rem);
    align-items: end;
  }
  .page-journal .page-hero .breadcrumb {
    grid-column: 1 / -1;
  }
  .page-journal .page-hero__lead {
    margin-top: 0;
    padding-bottom: 0.35em;
  }
  .page-journal .posts--all .post:not(:first-child) {
    grid-template-columns: 7.5rem minmax(0, 1fr) minmax(0, 21rem);
  }
}

/* ---------- FAQ ---------- */
.faq {
  padding-block: 0 var(--section);
}
.faq__grid {
  display: grid;
  gap: var(--sp-8);
}
.faq__list {
  border-top: 1px solid var(--bg-3);
}
.faq-item {
  border-bottom: 1px solid var(--bg-3);
}
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: 64px;
  padding-block: var(--sp-4);
  font-weight: 700;
  font-stretch: 90%;
  font-size: 1.2rem;
  line-height: 1.3;
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary::after {
  content: "";
  flex: none;
  width: 28px;
  height: 28px;
  background: var(--signal);
  -webkit-mask: url("/assets/svg/plus.svg") center / 18px no-repeat;
  mask: url("/assets/svg/plus.svg") center / 18px no-repeat;
  transition: transform var(--dur-2) var(--ease-out);
}
.faq-item[open] summary::after {
  transform: rotate(45deg);
}
.faq-item summary:hover {
  color: var(--signal-text);
}
.faq-item__body {
  padding-bottom: var(--sp-6);
  color: var(--text-muted);
  max-width: var(--measure);
}
@supports (interpolate-size: allow-keywords) {
  .faq-item {
    interpolate-size: allow-keywords;
  }
  .faq-item::details-content {
    block-size: 0;
    overflow: clip;
    transition: block-size var(--dur-3) var(--ease-out), content-visibility var(--dur-3) allow-discrete;
  }
  .faq-item[open]::details-content {
    block-size: auto;
  }
}
@media (min-width: 960px) {
  .faq__grid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: var(--sp-16);
  }
}
/* Startseite: Fragen auf Beton, orange Kante an der Schräge, Titel bleibt beim Lesen stehen */
.page-home .faq {
  background: var(--beton);
}
.page-home .faq-item summary {
  font-stretch: 86%;
  font-size: clamp(1.15rem, 1rem + 0.45vw, 1.4rem);
}
.page-home .faq::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: calc(var(--cut) + 5px);
  background: var(--signal);
  clip-path: polygon(0 0, 100% var(--cut), 100% calc(var(--cut) + 5px), 0 5px);
  pointer-events: none;
}
@media (min-width: 960px) {
  .page-home .faq__grid > h2 {
    position: sticky;
    top: calc(var(--header-h) + 2rem);
    align-self: start;
  }
}

/* ---------- Abschluss-Band (Aufkleber) ---------- */
.cta-band {
  padding-block: var(--sp-16);
  background:
    radial-gradient(80% 120% at 12% 0%, oklch(0.42 0.095 254) 0%, transparent 62%),
    linear-gradient(115deg, oklch(0.3 0.07 256) 0%, oklch(0.22 0.05 258) 58%, oklch(0.33 0.075 254) 100%);
  overflow: hidden;
}
.cta-band__inner {
  border-top: 3px solid var(--signal);
}
.cta-band__inner {
  position: relative;
  width: min(100% - 2 * var(--gutter), var(--maxw));
  margin-inline: auto;
  padding: var(--sp-8) var(--sp-6) 0;
  background: var(--bg);
  border-radius: var(--radius-m);
}
.cta-band__title {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.3em;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  font-stretch: 64%;
  font-size: clamp(2.6rem, 1.4rem + 5vw, 6rem);
  line-height: 0.92;
  text-transform: uppercase;
}
.cta-band__title span:last-child {
  color: var(--signal-text);
}
.cta-band__text {
  max-width: 48ch;
  margin-top: var(--sp-4);
  color: var(--text-muted);
}
.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
  margin: var(--sp-8) calc(-1 * var(--sp-6)) 0;
  padding: var(--sp-4) var(--sp-6);
  background: var(--signal);
  border-radius: 0 0 var(--radius-m) var(--radius-m);
}
.cta-band__num {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  min-height: 56px;
  color: var(--bg);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  font-stretch: 64%;
  font-size: clamp(2.4rem, 1rem + 7vw, 6.5rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  white-space: nowrap;
}
.cta-band__num .icon {
  width: 0.62em;
  height: 0.62em;
}
.cta-band__num:hover {
  text-decoration: underline;
  text-decoration-thickness: 4px;
}
.cta-band :focus-visible {
  outline-color: var(--bg);
}
@media (min-width: 900px) {
  .cta-band__inner {
    padding: var(--sp-12) var(--sp-12) 0;
    clip-path: polygon(0 0, 100% 0, calc(100% - 60px) 100%, 0 100%);
    border-radius: var(--radius-m) 0 0 var(--radius-m);
  }
  .cta-band__actions {
    margin-inline: calc(-1 * var(--sp-12));
    padding: var(--sp-4) calc(var(--sp-12) + 60px) var(--sp-4) var(--sp-12);
    justify-content: space-between;
    border-radius: 0 0 0 var(--radius-m);
  }
}
.cta-band__text strong {
  color: oklch(0.955 0.008 70);
  font-weight: 700;
}
.world-papier .cta-band__text strong {
  color: var(--tinte);
}
/* Breite Ansicht: Zusatztext mit Preis neben den Titel, damit die schwarze Fläche nicht leer läuft.
   Nur beim Standard-Band, die langen Titel der Varianten brauchen die ganze Breite. */
@media (min-width: 1320px) {
  .cta-band:not(.cta-band--academy) .cta-band__inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: end;
    column-gap: var(--sp-12);
  }
  .cta-band:not(.cta-band--academy) .cta-band__text {
    max-width: 30ch;
    margin: 0 0 0.35rem;
    padding-left: var(--sp-6);
    border-left: 3px solid var(--signal);
    font-size: var(--fs-lg);
    line-height: 1.4;
  }
  .cta-band:not(.cta-band--academy) .cta-band__actions {
    grid-column: 1 / -1;
  }
}

/* WhatsApp im Abschluss-Band: groß wie die Nummer daneben, gleicher Aufbau wie im Hero */
.cta-wa {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  min-height: 92px;
  padding: 0.75rem 2rem 0.75rem 0.85rem;
  border-radius: var(--radius-m);
  background: var(--asphalt);
  box-shadow:
    0 16px 30px -18px oklch(0.12 0.01 50 / 0.8),
    inset 0 1px 0 oklch(1 0 0 / 0.08);
  color: var(--papier);
  text-decoration: none;
  transition:
    background-color var(--dur-2) var(--ease-out),
    transform var(--dur-2) var(--ease-out),
    box-shadow var(--dur-2) var(--ease-out);
}
.cta-wa:hover {
  background: var(--asphalt-3);
  transform: translateY(-2px);
  box-shadow:
    0 22px 36px -18px oklch(0.12 0.01 50 / 0.85),
    inset 0 1px 0 oklch(1 0 0 / 0.1);
}
.cta-wa:active {
  transform: translateY(0);
}
.cta-wa__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: oklch(0.77 0.19 150 / 0.14);
  box-shadow: inset 0 0 0 1.5px oklch(0.77 0.19 150 / 0.5);
  color: var(--wa);
  transition:
    background-color var(--dur-2) var(--ease-out),
    color var(--dur-2) var(--ease-out),
    transform var(--dur-2) var(--ease-out);
}
.cta-wa__icon .icon {
  width: 34px;
  height: 34px;
}
.cta-wa:hover .cta-wa__icon {
  background: var(--wa);
  color: var(--asphalt);
  transform: rotate(-8deg);
}
.cta-wa__text {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  line-height: 1;
}
.cta-wa__label {
  color: var(--paper-muted);
  font-size: var(--fs-xs);
  font-weight: 760;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
}
.cta-wa__name {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  font-stretch: 64%;
  font-size: clamp(2.2rem, 1.4rem + 2.4vw, 3.4rem);
  line-height: 0.9;
  text-transform: uppercase;
}
.world-papier .cta-wa {
  background: var(--tinte);
}
.world-papier .cta-wa:hover {
  background: var(--tinte-2);
}
.world-papier .cta-wa__label {
  color: var(--tinte-muted);
}
@media (max-width: 599.98px) {
  .cta-wa {
    width: 100%;
  }
}
/* 320 px: Beschriftung passt sonst nicht neben das Symbol */
@media (max-width: 379.98px) {
  .cta-wa {
    gap: 0.75rem;
    min-height: 80px;
    padding: 0.7rem 1rem 0.7rem 0.7rem;
  }
  .cta-wa__icon {
    width: 52px;
    height: 52px;
  }
  .cta-wa__icon .icon {
    width: 28px;
    height: 28px;
  }
  .cta-wa__label {
    font-size: 0.6875rem;
    letter-spacing: 0.05em;
    white-space: normal;
  }
  .cta-band--academy .cta-band__title {
    font-size: 2.1rem;
  }
}

/* ---------- Footer ---------- */
/* Aufbau: Silhouette auf einer Horizontlinie, darunter Absender und Notrufnummer als
   Folienstreifen wie auf dem Ranger, unter einer zweiten Linie Anschrift, Kontakt, Seiten. */
.site-footer {
  --sky-pad: clamp(2.5rem, 1.5rem + 3vw, 4rem);
  --sky-h: clamp(44px, 10vw, 150px);
  position: relative;
  padding-top: var(--sky-pad);
  background: var(--asphalt);
  border-top: 4px solid var(--signal);
  color: var(--text-muted);
  font-size: var(--fs-sm);
}
.site-footer::before {
  content: "";
  position: absolute;
  inset: calc(var(--sky-pad) + var(--sky-h)) 0 auto;
  height: 1px;
  background: oklch(0.34 0.018 52);
}
.site-footer__skyline {
  height: var(--sky-h);
  background: linear-gradient(to top, oklch(0.3 0.02 55), oklch(0.235 0.014 52));
  /* einmal die ganze Stadt, nicht gekachelt: die Elbphilharmonie gibt es nur einmal */
  -webkit-mask: url("/assets/svg/skyline-hamburg.svg") center bottom / auto 100% no-repeat;
  mask: url("/assets/svg/skyline-hamburg.svg") center bottom / auto 100% no-repeat;
}
.site-footer__inner {
  display: grid;
  gap: var(--sp-8);
  width: min(100% - 2 * var(--gutter), var(--maxw));
  margin-inline: auto;
  padding-block: var(--sp-12);
}
.site-footer__name {
  margin-bottom: var(--sp-3);
  color: var(--text);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  font-stretch: 68%;
  font-size: clamp(1.7rem, 1.4rem + 1.2vw, 2.3rem);
  line-height: 0.95;
  text-transform: uppercase;
}
.site-footer__brand p:not(.site-footer__name) {
  max-width: 36ch;
}
.site-footer strong {
  color: var(--text);
}
.site-footer__note {
  margin-top: var(--sp-2);
}
.site-footer__label {
  display: block;
  font-size: var(--fs-xs);
}
/* Notrufnummer als oranger Streifen mit Schrägkanten, Vorbild: Fahrzeugfolie */
.site-footer__hotline {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-2);
  justify-self: start;
  color: inherit;
  text-decoration: none;
}
.site-footer__strip {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 60px;
  padding: 0.5rem 2.1rem 0.5rem 1.5rem;
  background: var(--signal);
  color: var(--asphalt);
  clip-path: polygon(16px 0, 100% 0, calc(100% - 16px) 100%, 0 100%);
  transition: background-color var(--dur-1) ease-out;
}
.site-footer__strip .icon {
  width: 24px;
  height: 24px;
}
.site-footer__hotline:hover .site-footer__strip {
  background: var(--signal-hi);
}
.site-footer__num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  font-stretch: 66%;
  font-size: clamp(1.9rem, 1.5rem + 1.6vw, 2.6rem);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
}
.site-footer__contact {
  display: grid;
  gap: var(--sp-3);
}
.site-footer__contact a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text);
  font-weight: 700;
  font-size: 1.15rem;
  text-decoration: none;
}
.site-footer__contact a:hover {
  color: var(--signal-text);
}
.site-footer__nav ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--sp-6);
}
.site-footer__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text);
  font-size: var(--fs-base);
  font-weight: 560;
  text-decoration: none;
}
.site-footer__nav a:hover {
  color: var(--signal-text);
  text-decoration: underline;
}
/* Zahlungsarten als Kacheln im Format einer Bankkarte (85,6 × 54 mm), Logos einfarbig */
/* Zwei Reihen à drei, eine Reihe erst, wenn alle sechs sicher nebeneinander passen */
.pay-marks {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  padding: 0;
  list-style: none;
}
.pay-mark {
  display: grid;
  place-items: center;
  width: 3.9rem;
  aspect-ratio: 85.6 / 54;
  border-radius: 5px;
  background: linear-gradient(160deg, oklch(0.27 0.014 50), oklch(0.22 0.012 50));
  box-shadow: inset 0 0 0 1px oklch(0.36 0.015 50);
  color: var(--text);
}
.pay-mark svg {
  width: 68%;
  height: 46%;
}
/* Kreise und Quadrat brauchen mehr Höhe, um neben den Schriftzügen gleich groß zu wirken */
.pay-mark--mc svg {
  height: 62%;
}
.pay-mark--amex svg {
  height: 78%;
}
.pay-mark--bar {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  font-stretch: 68%;
  font-size: 1.15rem;
  line-height: 1;
  text-transform: uppercase;
}
@media (min-width: 1400px) {
  .pay-marks {
    grid-template-columns: repeat(6, max-content);
  }
}
.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-6);
  width: min(100% - 2 * var(--gutter), var(--maxw));
  margin-inline: auto;
  padding-block: var(--sp-4);
  border-top: 1px solid oklch(0.3 0.015 50);
  font-size: var(--fs-xs);
}
.site-footer__legal ul {
  display: flex;
  gap: var(--sp-6);
}
.site-footer__legal a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.site-footer__legal a:hover {
  color: var(--text);
}
@media (min-width: 760px) {
  .site-footer__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--sp-12);
  }
  .site-footer__hotline {
    align-self: end;
  }
  .site-footer__nav {
    grid-column: 1 / -1;
  }
  .site-footer__nav ul {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1080px) {
  .site-footer__inner {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--sp-8);
    row-gap: var(--sp-8);
  }
  /* zweite Linie trennt Absender und Details über die ganze Breite */
  .site-footer__inner::after {
    content: "";
    grid-row: 2;
    grid-column: 1 / -1;
    height: 1px;
    background: oklch(0.3 0.015 50);
  }
  .site-footer__brand {
    grid-row: 1;
    grid-column: 1 / span 6;
  }
  .site-footer__hotline {
    grid-row: 1;
    grid-column: 8 / -1;
    justify-self: end;
  }
  .site-footer__nap {
    grid-row: 3;
    grid-column: 1 / span 4;
  }
  .site-footer__contact {
    grid-row: 3 / span 2;
    grid-column: 5 / span 3;
    align-content: start;
  }
  /* Zahlungsarten füllen die Lücke unter der Adresse */
  .site-footer__pay {
    grid-row: 4;
    grid-column: 1 / span 4;
  }
  .site-footer__nav {
    grid-row: 3 / span 2;
    grid-column: 8 / -1;
  }
  .site-footer__nav ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: -0.6rem;
  }
}

/* ---------- Mobile Aktionsleiste ---------- */
/* Anruf als oranger Streifen mit Schrägkante, WhatsApp auf dem dunklen Grund daneben */
.actionbar {
  position: fixed;
  z-index: var(--z-actionbar);
  inset: auto 0 0 0;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  padding-bottom: env(safe-area-inset-bottom);
  background: oklch(0.22 0.014 50);
  border-top: 1px solid oklch(0.3 0.015 50);
  transition:
    transform var(--dur-3) var(--ease-out),
    visibility 0s linear 0s;
}
/* Solange die Buttons im Hero zu sehen sind, bleibt die Leiste unten weg (kein doppelter Anruf) */
.hero-cta-visible .actionbar {
  transform: translateY(110%);
  visibility: hidden;
  transition:
    transform var(--dur-3) var(--ease-out),
    visibility 0s linear var(--dur-3);
}
.actionbar__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 64px;
  font-weight: 800;
  font-stretch: 86%;
  font-size: 1.1rem;
  text-decoration: none;
}
.actionbar__btn .icon {
  width: 24px;
  height: 24px;
}
.actionbar__btn--call {
  position: relative;
  isolation: isolate;
  padding-right: 14px;
  color: var(--asphalt);
}
.actionbar__btn--call::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--signal);
  clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 100%, 0 100%);
}
.actionbar__btn--call:active::before {
  background: var(--signal-deep);
}
.actionbar__text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  line-height: 1;
}
.actionbar__label {
  font-size: 0.6875rem;
  font-weight: 780;
  font-stretch: 100%;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.actionbar__num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  font-stretch: 66%;
  font-size: 1.45rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.actionbar__btn--wa {
  color: var(--papier);
}
.actionbar__btn--wa .icon {
  color: var(--wa);
}
.actionbar :focus-visible {
  outline-offset: -5px;
}
.actionbar__btn--call:focus-visible {
  outline-color: var(--asphalt);
}
.actionbar__btn--mail {
  color: var(--papier);
}
.actionbar__btn--mail .icon {
  color: var(--signal);
}
@media (max-width: 340px) {
  .actionbar__btn {
    gap: 0.45rem;
  }
  .actionbar__num {
    font-size: 1.3rem;
  }
  .actionbar__label {
    letter-spacing: 0.04em;
  }
}
body {
  padding-bottom: calc(65px + env(safe-area-inset-bottom));
}
@media (min-width: 900px) {
  .actionbar {
    display: none;
  }
  body {
    padding-bottom: 0;
  }
}

/* ---------- Unterseiten ---------- */
.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(2rem, 1rem + 4vw, 4.5rem) calc(var(--cut) + clamp(2rem, 1rem + 4vw, 4rem));
}
.page-hero__inner {
  display: grid;
  gap: var(--sp-8);
}
.page-hero__title {
  max-width: 16ch;
}
/* Breite Ruhe-Schrift: auch ein langes Wort muss in eine Zeile passen */
.page-hero__title.h-calm {
  max-width: 13em;
  font-size: clamp(2rem, 1.2rem + 2.6vw, 3.2rem);
}
.page-hero__lead {
  max-width: 56ch;
  margin-top: var(--sp-6);
  color: var(--text-muted);
  font-size: var(--fs-lg);
  line-height: 1.5;
}
.page-hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.page-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.page-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, oklch(0.165 0.01 50 / 0.8), oklch(0.165 0.01 50 / 0.9) 60%, var(--bg));
}
.page-hero .hero__actions {
  margin-top: var(--sp-8);
}
@media (min-width: 900px) {
  .page-hero__media {
    left: 45%;
    clip-path: polygon(16% 0, 100% 0, 100% 100%, 0 100%);
  }
  .page-hero__media::after {
    background:
      linear-gradient(to right, var(--bg) 0%, oklch(0.165 0.01 50 / 0.45) 45%, oklch(0.165 0.01 50 / 0.15)),
      linear-gradient(to top, var(--bg), transparent 40%);
  }
  .page-hero__inner--dial {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
}
/* Flacher Kopf (Ratgeber, Rechtstexte): kein Bild, also trägt die Schrift. Am Desktop steht
   der Einleiter rechts unten auf der Grundlinie des Titels. Den Übergang nach unten setzt
   die jeweilige Seite (Ratgeber: Linie über der Liste, Recht: Blatt auf Beton). */
.page-hero--flat {
  padding-block: clamp(1.75rem, 1rem + 3vw, 3.5rem) clamp(2rem, 1.25rem + 2.5vw, 3.5rem);
}
.page-hero--flat h1 {
  max-width: 18ch;
  font-size: clamp(2.6rem, 1.4rem + 5vw, 5.6rem);
}
@media (min-width: 1080px) {
  .page-hero--flat > .wrap {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: var(--sp-16);
    align-items: end;
  }
  .page-hero--flat .breadcrumb {
    grid-column: 1 / -1;
  }
  .page-hero--flat .page-hero__lead {
    margin-top: 0;
    padding-bottom: 0.35em;
  }
}
.edge-slant {
  position: absolute;
  inset: auto 0 -1px 0;
  height: var(--cut);
  background: var(--next, var(--bg-2));
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}

.breadcrumb {
  margin-bottom: var(--sp-6);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.breadcrumb li + li::before {
  content: "/";
  margin-right: 0.35rem;
  color: var(--line);
}
.breadcrumb a {
  text-decoration: none;
}
.breadcrumb a:hover {
  color: var(--text);
  text-decoration: underline;
}
.breadcrumb [aria-current] {
  color: var(--text);
}
/* Artikel: der Titel steht darunter als H1, in der Brotkrume reicht eine Zeile */
.page-article .breadcrumb ol {
  flex-wrap: nowrap;
}
.page-article .breadcrumb li {
  flex: none;
  white-space: nowrap;
}
.page-article .breadcrumb li:last-child {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.band {
  padding-block: var(--section);
}
.band--raised {
  background: var(--bg-2);
}
.band__head {
  display: grid;
  gap: var(--sp-4);
  max-width: 820px;
  margin-bottom: var(--sp-12);
}
.band__head p {
  color: var(--text-muted);
  font-size: var(--fs-lg);
  line-height: 1.5;
}
.split {
  display: grid;
  gap: var(--sp-12);
}
@media (min-width: 960px) {
  .split {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--sp-16);
    align-items: start;
  }
  .split--flip {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }
  .split__sticky {
    position: sticky;
    top: calc(var(--header-h) + 2rem);
  }
}

/* Fließtext (Ratgeber, Rechtstexte, Detailseiten) */
.prose {
  max-width: var(--measure);
  font-size: 1.125rem;
  line-height: 1.72;
}
.prose > * + * {
  margin-top: 1.1em;
}
.prose h2 {
  margin-top: 2.2em;
  font-weight: 780;
  font-stretch: 82%;
  font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem);
  line-height: 1.1;
}
.prose h3 {
  margin-top: 1.8em;
  font-weight: 740;
  font-stretch: 88%;
  font-size: 1.3rem;
  line-height: 1.2;
}
.prose h2 + *,
.prose h3 + * {
  margin-top: 0.6em;
}
.prose ul,
.prose ol {
  display: grid;
  gap: 0.5em;
  padding-left: 1.4em;
}
.prose ul {
  list-style: none;
  padding-left: 0;
}
.prose ul > li {
  position: relative;
  padding-left: 1.5em;
}
.prose ul > li::before {
  content: "";
  position: absolute;
  left: 0.1em;
  top: 0.62em;
  width: 0.62em;
  height: 0.42em;
  background: var(--signal);
  clip-path: polygon(25% 0, 100% 0, 75% 100%, 0 100%);
}
.prose ol {
  list-style: decimal;
}
.prose ol > li::marker {
  color: var(--signal-text);
  font-weight: 800;
}
.prose a {
  color: var(--signal-text);
  text-decoration: underline;
}
.prose a:hover {
  text-decoration-thickness: 2px;
}
.prose strong {
  color: var(--text);
}
.prose blockquote {
  padding: var(--sp-4) var(--sp-6);
  background: var(--bg-2);
  border-radius: var(--radius-s);
  font-size: 1.2rem;
  font-weight: 560;
}
.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}
.prose .table-wrap {
  overflow-x: auto;
}
.prose th,
.prose td {
  padding: 0.7rem 0.8rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--bg-3);
}
.prose th {
  color: var(--text);
  background: var(--bg-2);
  font-weight: 700;
}
.prose [data-faq],
.prose [data-quellen] {
  margin-top: 3em;
  padding-top: 2em;
  border-top: 1px solid var(--bg-3);
}
.prose [data-faq] h2,
.prose [data-quellen] h2 {
  margin-top: 0;
}
.prose [data-quellen] {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.prose [data-quellen] a {
  word-break: break-word;
}
.prose--light {
  color: var(--ink);
}
.prose--light strong {
  color: var(--ink);
}
.prose--light a {
  color: var(--signal-text);
}

/* Ratgeber-Artikel: Lesetypografie wie im Fachmagazin */
.page-article .prose {
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  line-height: 1.7;
}
.page-article .prose p,
.page-article .prose li {
  text-wrap: pretty;
}
.page-article .prose > p:first-child {
  font-size: 1.14em;
  line-height: 1.6;
}
.page-article .prose > p:first-child::first-letter {
  float: left;
  margin: 0.07em 0.1em 0 -0.03em;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  font-stretch: 66%;
  font-size: 3.4em;
  line-height: 0.8;
  color: var(--signal-text);
}
@supports (initial-letter: 3) {
  .page-article .prose > p:first-child::first-letter {
    float: none;
    margin: 0 0.12em 0 0;
    font-size: inherit;
    line-height: inherit;
    initial-letter: 3;
  }
}
/* Kurzantwort am Anfang jedes Artikels */
.page-article .prose blockquote {
  position: relative;
  margin-block: 2em 0.4em;
  padding: 1.35em 1.5em 1.45em 1.9em;
  background: var(--bg-2);
  border-radius: 0;
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
  font-size: 1.1em;
  font-weight: 560;
  line-height: 1.55;
}
.page-article .prose blockquote::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: var(--signal);
}
@media (max-width: 599px) {
  .page-article .prose blockquote {
    padding: 1.1em 1.1em 1.2em 1.35em;
    font-size: 1.04em;
  }
}
.page-article .prose > h2 {
  margin-top: 2.3em;
  hyphens: manual;
  font-size: clamp(1.65rem, 1.25rem + 1.3vw, 2.35rem);
  line-height: 1.06;
  letter-spacing: -0.008em;
  text-wrap: balance;
}
.page-article .prose h2 + * {
  margin-top: 0.75em;
}
.page-article .prose a {
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.page-article .prose a:hover {
  text-decoration-thickness: 2px;
}
/* Checkliste: Schritte mit großen Ziffern und Haarlinien */
.page-article .prose ol {
  counter-reset: schritt;
  gap: 0;
  padding-left: 0;
  list-style: none;
  border-top: 2px solid var(--text);
}
.page-article .prose ol > li {
  counter-increment: schritt;
  position: relative;
  padding: 0.8em 0 0.8em 3.4em;
  border-bottom: 1px solid var(--hairline);
}
.page-article .prose ol > li::before {
  content: counter(schritt);
  position: absolute;
  left: 0;
  top: 0.2em;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  font-stretch: 66%;
  font-size: 2.3em;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--signal-text);
  font-variant-numeric: tabular-nums;
}
/* Tabellen: Kopf mit kräftiger Linie, Zeilen mit Haarlinien */
.page-article .prose .table-wrap {
  margin-block: 1.6em;
}
.page-article .prose table {
  font-size: 0.92em;
}
.page-article .prose th {
  padding-top: 0;
  vertical-align: bottom;
  background: none;
  border-bottom: 2px solid var(--text);
  font-weight: 750;
}
.page-article .prose th:first-child,
.page-article .prose td:first-child {
  padding-left: 0;
}
.page-article .prose td {
  padding-block: 0.85rem;
  border-bottom-color: var(--hairline);
}
.page-article .prose table:has(th:nth-child(3)) td:not(:first-child) {
  font-weight: 700;
  white-space: nowrap;
}
@media (min-width: 760px) {
  .page-article .prose th {
    white-space: nowrap;
  }
}
/* Häufige Fragen und Quellen am Artikelende */
.page-article .prose [data-faq] {
  margin-top: 3.5em;
  padding-top: 1.6em;
  border-top: 3px solid var(--text);
}
.page-article .prose [data-faq] h3 {
  margin-top: 1.3em;
  padding-top: 1.2em;
  border-top: 1px solid var(--hairline);
  font-size: 1.1em;
  font-stretch: 90%;
  line-height: 1.3;
}
.page-article .prose [data-faq] h2 + h3 {
  margin-top: 1em;
  padding-top: 0;
  border-top: 0;
}
.page-article .prose [data-faq] h3 + p {
  margin-top: 0.45em;
}
.page-article .prose [data-quellen] {
  margin-top: 3em;
  padding-top: 1.4em;
  border-top: 1px solid var(--hairline);
}
.page-article .prose [data-quellen] h2 {
  font-size: 1.05rem;
  font-stretch: 100%;
  font-weight: 720;
  color: var(--text);
}
.page-article .prose [data-quellen] ul {
  gap: 0.35em;
}

.placeholder-note {
  padding: var(--sp-4) var(--sp-6);
  border: 2px dashed var(--signal);
  border-radius: var(--radius-s);
  color: var(--text);
  font-weight: 600;
}

/* Artikel */
.article-head {
  padding-block: clamp(2rem, 1rem + 4vw, 4rem) var(--sp-8);
}
.article-head__title {
  max-width: 20ch;
  font-size: clamp(2.3rem, 1.4rem + 4vw, 4.4rem);
}
.article-head__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  margin-top: var(--sp-6);
  color: var(--text-muted);
  font-size: var(--fs-sm);
}
.article-hero {
  width: min(100% - 2 * var(--gutter), 1100px);
  margin-inline: auto;
}
.article-hero img {
  width: 100%;
  aspect-ratio: 16 / 8;
  object-fit: cover;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), 0 100%);
}
.article-body {
  display: grid;
  gap: var(--sp-12);
  padding-block: var(--sp-12) var(--section);
}
/* align-self: start, sonst streckt das Grid die Box auf die volle Artikelhöhe und sticky greift nie */
.article-aside {
  display: grid;
  gap: var(--sp-4);
  align-content: start;
  align-self: start;
  padding: var(--sp-6);
  background: var(--bg-2);
  border-radius: var(--radius-m);
}
.article-aside p {
  color: var(--text-muted);
  font-size: var(--fs-sm);
}
.article-aside .article-aside__title {
  color: var(--text);
  font-weight: 780;
  font-stretch: 84%;
  font-size: 1.35rem;
  line-height: 1.15;
}
.article-aside .btn--ghost {
  background: var(--papier);
  border-color: var(--beton-3);
  color: var(--ink);
}
.article-aside .btn--ghost .icon--wa {
  color: var(--wa-ink);
}
.article-aside .btn--ghost:hover {
  background: var(--papier);
  border-color: var(--wa-ink);
}
@media (min-width: 1080px) {
  .article-body {
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: var(--sp-16);
  }
  .article-aside {
    position: sticky;
    top: calc(var(--header-h) + 2rem);
  }
}

/* Artikelkopf: Titel links, Vorspann und Autorzeile rechts, gleiches Raster wie der Text darunter */
.page-article .article-head {
  padding-block: clamp(1.5rem, 0.5rem + 3.5vw, 3.5rem) clamp(2rem, 1rem + 3vw, 3.5rem);
}
.page-article .article-head__title {
  max-width: 20ch;
  font-size: clamp(2.4rem, 1.2rem + 4.8vw, 5.2rem);
  hyphens: manual;
  text-wrap: balance;
}
.page-article .article-head__excerpt {
  max-width: 42ch;
  margin-top: var(--sp-6);
  color: var(--text);
  font-size: clamp(1.18rem, 1.05rem + 0.45vw, 1.4rem);
  line-height: 1.45;
}
.page-article .article-head__meta {
  gap: 0.2rem 1.25rem;
  max-width: 42rem;
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
  border-top: 3px solid var(--signal);
  font-variant-numeric: tabular-nums;
}
.page-article .article-head__meta span:first-child {
  flex-basis: 100%;
  color: var(--text);
  font-weight: 650;
}
.page-article .article-hero {
  width: min(100% - 2 * var(--gutter), var(--maxw));
}
.page-article .article-hero img {
  aspect-ratio: 3 / 2;
}
.page-article .article-body {
  padding-block: clamp(2.5rem, 1.5rem + 3vw, 4.5rem) clamp(3.5rem, 2rem + 5vw, 6.5rem);
}
/* Schnelle Hilfe als dunkle Insel mit dem echten Einsatzfahrzeug */
.page-article .article-aside {
  gap: var(--sp-4);
  padding: 0 0 var(--sp-6);
  background: var(--asphalt);
  color: var(--paper);
  border-radius: 0;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%);
}
.page-article .article-aside > :not(img) {
  margin-inline: var(--sp-6);
}
.page-article .article-aside > img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  margin-bottom: var(--sp-2);
}
.page-article .article-aside p {
  color: var(--paper-muted);
}
.page-article .article-aside .article-aside__title {
  color: var(--paper);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 880;
  font-stretch: 66%;
  font-size: clamp(2rem, 1.6rem + 1.2vw, 2.5rem);
  line-height: 0.95;
}
.page-article .article-aside .btn--ghost {
  background: transparent;
  border-color: oklch(0.955 0.008 70 / 0.35);
  color: var(--paper);
}
.page-article .article-aside .btn--ghost .icon--wa {
  color: var(--wa);
}
.page-article .article-aside .btn--ghost:hover {
  background: oklch(0.955 0.008 70 / 0.08);
  border-color: var(--wa);
}
.page-article .article-aside .link-arrow {
  justify-self: start;
  color: var(--signal);
}
.page-article .article-aside .link-arrow:hover {
  color: var(--paper);
}
@media (min-width: 760px) {
  .page-article .article-hero img {
    aspect-ratio: 16 / 7;
  }
}
@media (min-width: 1080px) {
  .page-article .article-head {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-rows: auto 1fr auto;
    column-gap: clamp(2.5rem, 0.5rem + 4vw, 5.5rem);
  }
  .page-article .article-head .breadcrumb {
    grid-column: 1 / -1;
  }
  .page-article .article-head__title {
    grid-column: 1;
    grid-row: 2 / 4;
    align-self: end;
  }
  .page-article .article-head__excerpt {
    grid-column: 2;
    grid-row: 2;
    align-self: end;
  }
  .page-article .article-head__meta {
    grid-column: 2;
    grid-row: 3;
  }
  .page-article .article-body {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: clamp(2.5rem, 0.5rem + 4vw, 5.5rem);
  }
  .page-article .article-aside {
    width: min(100%, 24rem);
  }
}

/* Weiterlesen: kompakte Zeilen auf Beton statt zweier großer Karten */
.page-article .journal--related {
  padding-block: clamp(3rem, 2rem + 4vw, 5.5rem);
  background: var(--bg-2);
}
.page-article .journal::before {
  display: none;
}
.page-article .journal--related .journal__head .h-urgent {
  font-size: var(--fs-xl);
}
.page-article .journal--related .posts {
  gap: var(--sp-6) clamp(2rem, 1rem + 3vw, 4.5rem);
  margin-top: var(--sp-6);
}
.page-article .journal--related .post {
  grid-template-columns: minmax(0, 7rem) minmax(0, 1fr);
  gap: var(--sp-4) var(--sp-6);
  align-items: start;
  padding-top: var(--sp-6);
  border-top: 2px solid var(--text);
}
.page-article .journal--related .post__media {
  border-radius: 0;
}
.page-article .journal--related .post__media img {
  aspect-ratio: 1;
}
.page-article .journal--related .post__body {
  display: grid;
  gap: var(--sp-2);
}
.page-article .journal--related .post__title {
  hyphens: manual;
  font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.5rem);
  text-wrap: balance;
}
.page-article .journal--related .post__excerpt {
  font-size: var(--fs-sm);
  line-height: 1.55;
}
@media (max-width: 599px) {
  .page-article .journal--related .post {
    grid-template-columns: minmax(0, 5.5rem) minmax(0, 1fr);
    gap: var(--sp-4);
  }
  .page-article .journal--related .post__excerpt {
    display: none;
  }
}
@media (min-width: 1080px) {
  .page-article .journal--related .post {
    grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
  }
  .page-article .journal--related .post__media img {
    aspect-ratio: 4 / 3;
  }
}

/* Detailblöcke Unterseiten */
.checklist {
  display: grid;
  gap: 0.7rem;
}
.checklist li {
  display: flex;
  gap: 0.65rem;
}
.checklist .icon {
  margin-top: 0.25em;
  color: var(--signal-text);
}
.feature-rows {
  display: grid;
}
.feature-row {
  display: grid;
  gap: var(--sp-6);
  padding-block: var(--sp-12);
}
.feature-row__media {
  overflow: hidden;
}
.feature-row__media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  filter: brightness(1.08) contrast(1.03);
}
.feature-row:nth-child(odd) .feature-row__media {
  clip-path: polygon(0 0, 100% var(--cut), 100% 100%, 0 calc(100% - var(--cut)));
}
.feature-row:nth-child(even) .feature-row__media {
  clip-path: polygon(0 var(--cut), 100% 0, 100% calc(100% - var(--cut)), 0 100%);
}
.feature-row__title {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.feature-row__title img {
  width: 64px;
  height: 64px;
  flex: none;
}
.feature-row p {
  max-width: 54ch;
  margin-top: var(--sp-4);
}
.feature-row .checklist {
  margin-top: var(--sp-6);
}
@media (min-width: 960px) {
  .feature-row {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: var(--sp-16);
    align-items: center;
  }
  .feature-row:nth-child(even) {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  }
  .feature-row:nth-child(even) .feature-row__media {
    order: 2;
  }
}

/* ---------- Türöffnung: Detailblöcke ohne Icon-Titel ---------- */
.page-service .feature-row__title {
  display: block;
}
@media (min-width: 960px) {
  .page-service .feature-row__title {
    max-width: 18ch;
  }
  .page-service .svc-unterschied,
  .page-service .svc-ausweis {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  }
  /* Zylinder: Foto links, damit Zeichnung und Foto nicht auf derselben Seite stehen */
  .page-service .feature-row:nth-child(even) {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  }
  .page-service .feature-row:nth-child(even) .feature-row__media {
    order: 0;
  }
  .page-service .svc-ausweis {
    align-items: start;
  }
}

/* Zugefallen oder abgeschlossen: Schnitt durch Türkante und Zarge wie eine Werkstattskizze.
   Orange ist das, was die Tür hält. */
.schlossbild {
  display: grid;
  gap: var(--sp-8);
}
/* Nebeneinander erst, wenn "Falle" und "Riegel" in der Zeichnung lesbar bleiben */
@media (min-width: 560px) {
  .schlossbild {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(0.75rem, 0.5rem + 1.2vw, 1.5rem);
  }
}
.schlossbild__fall {
  display: grid;
  align-content: start;
  gap: var(--sp-3);
  margin: 0;
}
.schlossbild__svg {
  width: 100%;
  height: auto;
  background: var(--beton);
  border-top: 3px solid var(--ink);
}
.schlossbild figcaption {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: 1.45;
}
.schlossbild figcaption strong {
  display: block;
  margin-bottom: 0.15rem;
  color: var(--text);
  font-weight: 780;
  font-stretch: 84%;
  font-size: 1.2rem;
}
.sb-zarge {
  fill: var(--beton-2);
}
.sb-blech {
  fill: var(--beton-3);
}
.sb-loch {
  fill: oklch(0.7 0.012 65);
}
.sb-blatt {
  fill: var(--papier);
  stroke: var(--ink);
  stroke-width: 1.5;
}
.sb-kasten {
  fill: none;
  stroke: var(--ink-muted);
  stroke-width: 1.2;
  stroke-dasharray: 4 3;
}
.sb-rosette,
.sb-zylinder {
  fill: var(--ink);
}
.sb-stulp {
  fill: var(--ink-muted);
}
.sb-druecker {
  fill: none;
  stroke: var(--ink);
  stroke-width: 8;
  stroke-linecap: round;
}
.sb-falle,
.sb-riegel {
  fill: var(--signal);
  stroke: var(--ink);
  stroke-width: 1.2;
}
.sb-riegel--ein {
  fill: none;
  stroke: var(--ink-muted);
  stroke-dasharray: 4 3;
}
.sb-label {
  fill: var(--ink);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
}
.sb-label--leer {
  fill: var(--ink-muted);
  font-weight: 500;
}
/* Beim Einblenden fährt der Riegel aus */
@media (prefers-reduced-motion: no-preference) {
  .reveal-ready .schlossbild .sb-riegel:not(.sb-riegel--ein) {
    transform: translateX(-44px);
    transition: transform 700ms var(--ease-out) 450ms;
  }
  .reveal-ready .schlossbild.is-in .sb-riegel:not(.sb-riegel--ein) {
    transform: none;
  }
}

/* Was Sie bereithalten sollten: Liste mit Haarlinien statt Foto */
.page-service .svc-ausweis__list {
  gap: 0;
  margin-top: 0;
  border-top: 3px solid var(--ink);
}
.page-service .svc-ausweis__list li {
  padding-block: 1rem;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 960px) {
  .page-service .svc-ausweis__list li {
    font-size: var(--fs-lg);
    line-height: 1.4;
  }
}

/* Helle Unterseiten-Welt (Sichtbeton) */
.world-beton {
  --bg: var(--beton);
  --bg-2: var(--beton-2);
  --bg-3: var(--beton-3);
  --line: oklch(0.78 0.012 70);
  --text: var(--ink);
  --text-muted: var(--ink-muted);
  background: var(--beton);
  color: var(--ink);
  color-scheme: light;
}
.world-beton .link-arrow,
.world-beton .prose a {
  color: var(--signal-text);
}
.world-beton .breadcrumb li + li::before {
  color: var(--ink-muted);
}
.world-beton .page-hero__media::after {
  background: linear-gradient(to bottom, oklch(0.945 0.006 75 / 0.86), oklch(0.945 0.006 75 / 0.94) 60%, var(--beton));
}
@media (min-width: 900px) {
  .world-beton .page-hero__media::after {
    background:
      linear-gradient(to right, var(--beton) 0%, oklch(0.945 0.006 75 / 0.3) 40%, transparent),
      linear-gradient(to top, var(--beton), transparent 30%);
  }
}
.world-beton .btn--ghost {
  background: var(--beton);
  border-color: var(--ink);
}
.world-beton .btn--ghost:hover {
  background: var(--beton-2);
}
.world-beton .h-urgent {
  font-family: var(--font);
  font-style: normal;
  font-weight: 640;
  font-stretch: 116%;
  font-size: clamp(2rem, 1.3rem + 2.8vw, 3.6rem);
  line-height: 1.04;
  letter-spacing: -0.018em;
}
.world-beton .side-note,
.world-beton .notice--calm {
  background: var(--beton-2);
}
.world-beton .checklist .icon {
  color: var(--signal-text);
}
.world-beton .feature-row {
  border-top-color: var(--beton-3);
}
.world-beton .feature-row p,
.world-beton .band__head p {
  color: var(--ink-muted);
}
.world-beton .checklist .icon {
  color: var(--signal-text);
}
.world-beton :focus-visible {
  outline-color: var(--signal-text);
}

/* Tinte-Welt (Akademie) */
.world-papier {
  --bg: var(--papier);
  --bg-2: var(--beton);
  --bg-3: var(--beton-2);
  --line: var(--beton-3);
  --text: var(--tinte);
  --text-muted: oklch(0.46 0.035 256);
  --signal: var(--stahl-deep);
  --signal-hi: var(--stahl);
  --signal-deep: var(--stahl-ink);
  --kupfer: var(--messing-deep);
  background: var(--papier);
  color: var(--tinte);
  color-scheme: light;
}
.world-papier .h-urgent {
  font-family: var(--font);
  font-style: normal;
  font-weight: 650;
  font-stretch: 116%;
  font-size: clamp(2rem, 1.3rem + 2.8vw, 3.6rem);
  line-height: 1.04;
  letter-spacing: -0.018em;
}
.world-papier .hero__line {
  font-family: var(--font);
  font-style: normal;
  font-weight: 700;
  font-stretch: 118%;
  text-transform: none;
  letter-spacing: -0.03em;
  white-space: normal;
}

.world-papier .hero__line {
  font-family: var(--font);
  font-style: normal;
  font-weight: 700;
  font-stretch: 104%;
  font-size: clamp(2.3rem, 1rem + 4.4vw, 4.6rem);
  line-height: 1;
  letter-spacing: -0.025em;
  text-transform: none;
  white-space: normal;
  color: var(--tinte);
}
.world-papier .hero__line--signal {
  color: var(--messing-deep);
}
.world-papier .page-hero__lead,
.world-papier .lead-muted {
  color: oklch(0.44 0.035 256);
}
.world-papier .breadcrumb {
  color: oklch(0.5 0.03 256);
}
.world-papier .btn--ghost {
  background: transparent;
  border-color: var(--tinte);
  color: var(--tinte);
}
.world-papier .btn--ghost:hover {
  background: var(--beton-2);
}
.world-papier .side-note,
.world-papier .audience li,
.world-papier .module,
.world-papier .plan {
  background: var(--beton);
  border-color: var(--beton-3);
}
.world-papier .certificate img {
  filter: none;
}
.world-papier .notice {
  border-color: var(--messing-deep);
  background: oklch(0.96 0.03 85);
}
.world-papier .notice h3 {
  color: var(--messing-deep);
}
.world-papier .notice--calm {
  background: var(--beton);
  border-color: var(--beton-3);
}
.world-papier .notice--calm h3 {
  color: var(--tinte);
}
.world-papier .rule h3::before {
  border-color: var(--stahl);
  color: var(--stahl-deep);
}
.world-papier .schedule time {
  color: var(--stahl-deep);
}
.world-papier .facts {
  background: var(--beton-3);
  border-color: var(--beton-3);
}
.world-papier .facts__item {
  background: var(--papier);
}
.world-papier .facts dd {
  color: var(--tinte);
}
.world-papier .facts dd small,
.world-papier .facts dt {
  color: oklch(0.46 0.035 256);
}
.world-papier .plan--feature {
  background: var(--tinte);
  color: var(--papier);
  border-color: var(--tinte);
}
.world-papier .plan--feature .plan__price,
.world-papier .plan--feature .plan__name {
  color: var(--messing);
}
.world-papier .plan--feature .btn {
  background: var(--messing);
  color: var(--tinte);
}
.world-papier .plan .btn--ghost {
  background: var(--tinte);
  border-color: var(--tinte);
  color: var(--papier);
}
.world-papier .plan .btn--ghost:hover {
  background: var(--tinte-2);
  border-color: var(--tinte-2);
}
.world-papier .module summary::before {
  color: var(--stahl-deep);
}
/* Nur die Farbe setzen: Plus/Minus und Ring zeichnet die Akkordeon-Regel mit currentColor.
   Eine Hintergrundfarbe hier füllte den Ring zu einem grauen Punkt. */
.world-papier .module summary::after,
.world-papier .faq-item summary::after {
  color: var(--stahl-deep);
}
.world-papier .module__body li::before {
  background: var(--messing-deep);
}
.world-papier .medallion {
  box-shadow: 0 0 0 1px var(--beton-3), 0 24px 50px -30px oklch(0.24 0.055 258 / 0.6);
}
.world-papier .cta-band {
  background:
    radial-gradient(80% 120% at 15% 0%, oklch(0.36 0.07 256) 0%, transparent 60%),
    linear-gradient(115deg, var(--tinte) 0%, oklch(0.2 0.05 258) 60%, var(--tinte-2) 100%);
}
.world-papier .cta-band__inner {
  background: var(--papier);
  border-top-color: var(--messing);
}
.world-papier .cta-band__title {
  color: var(--tinte);
}
.world-papier .cta-band__text {
  color: oklch(0.44 0.035 256);
}
.world-papier .cta-band__actions {
  background: var(--messing);
}
.world-papier .cta-band__num {
  color: var(--tinte);
}
.world-papier .cta-band__title {
  font-family: var(--font);
  font-style: normal;
  font-weight: 700;
  font-stretch: 112%;
  text-transform: none;
  letter-spacing: -0.02em;
}
.world-papier .btn--dark {
  background: var(--tinte);
  color: var(--papier);
}
.world-papier .edge-bitting {
  fill: var(--tinte-2);
}
.world-papier ::selection {
  background: var(--messing);
  color: var(--tinte);
}

.page-hero__inner--split {
  align-items: center;
}
@media (min-width: 960px) {
  .page-hero__inner--split {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--sp-16);
  }
}
/* Emaille-Schild mit Messing-Maßband */
.medallion {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 520px);
  justify-self: center;
  padding: clamp(1.5rem, 1rem + 3vw, 3rem) clamp(1.25rem, 0.8rem + 2.5vw, 2.5rem) calc(clamp(1.5rem, 1rem + 3vw, 3rem) + 18px);
  background: var(--beton);
  border-radius: var(--radius-m);
  box-shadow:
    0 0 0 8px var(--tinte),
    0 0 0 10px var(--messing-deep),
    0 30px 60px -20px oklch(0.1 0.04 258 / 0.8);
  transform: rotate(-2deg);
}
.medallion::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 14px;
  height: 14px;
  background:
    repeating-linear-gradient(90deg, var(--messing-deep) 0 2px, transparent 2px 60px),
    repeating-linear-gradient(90deg, var(--messing-deep) 0 1px, transparent 1px 12px);
  background-size: 100% 14px, 100% 7px;
  background-repeat: no-repeat;
}
.medallion img {
  width: 100%;
}
.facts--hero {
  margin-top: var(--sp-12);
}
.lead-muted {
  max-width: 44ch;
  margin-top: var(--sp-4);
  color: var(--text-muted);
  font-size: var(--fs-lg);
  line-height: 1.5;
}
.audience {
  display: grid;
  gap: var(--sp-2);
}
.audience li {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg);
  border-radius: var(--radius-m);
  font-weight: 650;
  font-stretch: 104%;
  font-size: 1.15rem;
  line-height: 1.3;
}
.audience img {
  width: 56px;
  height: 56px;
  flex: none;
}
.audience__media {
  display: block;
  margin-top: var(--sp-8);
}
.audience__media img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.side-note {
  display: grid;
  gap: var(--sp-3);
  align-content: start;
  padding: var(--sp-8);
  background: var(--bg-2);
  border-radius: var(--radius-m);
}
.side-note img {
  flex: none;
  width: 88px;
  height: 88px;
}
.side-note h3 {
  font-weight: 700;
  font-stretch: 110%;
  font-size: 1.4rem;
  line-height: 1.2;
}
.side-note p {
  color: var(--text-muted);
}
.module__note {
  margin-top: var(--sp-4);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.module__body .module__steps {
  display: grid;
  gap: 0.35rem;
  padding-left: 1.6em;
  list-style: decimal;
}
.module__steps li {
  padding-left: 0.3em;
}
.module__steps li::before {
  display: none;
}
.module__steps li::marker {
  color: var(--signal-text);
  font-weight: 700;
}
.academy-notes {
  display: grid;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}
@media (min-width: 760px) {
  .academy-notes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.notice--calm {
  border-color: var(--bg-3);
  background: var(--bg-2);
}
.notice--calm h3 {
  color: var(--text);
}
.certificate {
  display: grid;
  gap: var(--sp-4);
  align-content: start;
  container-type: inline-size;
}
/* "Teilnahmebescheinigung" ist ein einziges langes Wort und lief unter die Hinweis-Box
   daneben. Es trennt jetzt an der Wortfuge (­ im HTML), die Größe ist zusätzlich an die
   Spaltenbreite gebunden, damit "bescheinigung" immer in die Spalte passt. */
.certificate .h-urgent {
  font-size: min(clamp(2rem, 1.3rem + 2.8vw, 3.6rem), 12cqi);
  hyphens: manual;
}
.certificate img {
  width: 120px;
  height: 120px;
}
.certificate p {
  max-width: 44ch;
  color: var(--text-muted);
  font-size: var(--fs-lg);
  line-height: 1.5;
}

.schedule {
  display: grid;
  border-top: 1px solid var(--bg-3);
}
.schedule li {
  display: grid;
  grid-template-columns: 9.5rem 1fr;
  gap: var(--sp-4);
  padding-block: var(--sp-4);
  border-bottom: 1px solid var(--bg-3);
}
.schedule time {
  color: var(--signal-text);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.schedule .is-break {
  color: var(--text-muted);
}
.modules {
  display: grid;
  gap: var(--sp-4);
  counter-reset: mod;
}
.module {
  border: 1px solid var(--bg-3);
  border-radius: var(--radius-m);
  background: var(--bg-2);
}
.module summary {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-height: 72px;
  padding: var(--sp-4) var(--sp-6);
  font-weight: 700;
  font-stretch: 108%;
  font-size: 1.2rem;
  cursor: pointer;
  list-style: none;
}
.module summary::-webkit-details-marker {
  display: none;
}
.module summary::before {
  counter-increment: mod;
  content: counter(mod, decimal-leading-zero);
  color: var(--signal-text);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  min-width: 2ch;
}
.module summary::after {
  content: "";
  margin-left: auto;
  flex: none;
  width: 24px;
  height: 24px;
  background: var(--signal);
  -webkit-mask: url("/assets/svg/plus.svg") center / 16px no-repeat;
  mask: url("/assets/svg/plus.svg") center / 16px no-repeat;
  transition: transform var(--dur-2) var(--ease-out);
}
.module[open] summary::after {
  transform: rotate(45deg);
}
.module__body {
  padding: 0 var(--sp-6) var(--sp-6) calc(var(--sp-6) + 2ch + var(--sp-4));
  color: var(--text-muted);
}
.module__body ul {
  display: grid;
  gap: 0.35rem;
}
.module__body li {
  position: relative;
  padding-left: 1.2em;
}
.module__body li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 0.5em;
  height: 2px;
  background: var(--signal);
}
.plans {
  display: grid;
  gap: var(--sp-6);
}
.plan {
  position: relative;
  display: grid;
  gap: var(--sp-4);
  align-content: start;
  padding: var(--sp-8);
  background: var(--bg-2);
  border: 1px solid var(--bg-3);
  border-radius: var(--radius-m);
}
.plan--feature {
  background: var(--signal);
  color: var(--bg);
  border-color: var(--signal-text);
}
.plan__name {
  font-weight: 700;
  font-stretch: 116%;
  font-size: 1.5rem;
}
.plan__price {
  font-weight: 800;
  font-stretch: 100%;
  font-size: clamp(3rem, 2rem + 4vw, 4.5rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}
.plan__price small {
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0;
}
.plan .checklist .icon {
  color: currentColor;
}
.plan--feature .btn {
  background: var(--tinte);
  color: var(--text);
}
.plan .btn--ghost {
  background: var(--messing);
  border-color: var(--messing);
  color: var(--tinte);
}
.plan .btn--ghost:hover {
  background: var(--messing-hi);
  border-color: var(--messing-hi);
}
@media (min-width: 760px) {
  .plans {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.rules {
  display: grid;
  gap: var(--sp-6) var(--sp-8);
  counter-reset: rule;
}
.rule h3 {
  display: flex;
  gap: 0.6rem;
  font-weight: 700;
  font-stretch: 108%;
  font-size: 1.15rem;
  line-height: 1.3;
}
.rule h3::before {
  counter-increment: rule;
  content: counter(rule);
  display: grid;
  place-items: center;
  flex: none;
  width: 1.8rem;
  height: 1.8rem;
  border: 1.5px solid var(--signal);
  border-radius: 50%;
  color: var(--signal-text);
  font-size: 0.9rem;
}
.rule p {
  margin-top: 0.5rem;
  padding-left: 2.4rem;
  color: var(--text-muted);
}
@media (min-width: 760px) {
  .rules {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.notice {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-6);
  border: 1px solid var(--signal);
  border-radius: var(--radius-m);
}
.notice h3 {
  color: var(--signal-text);
  font-weight: 700;
  font-size: 1.15rem;
}
.notice p {
  color: var(--text-muted);
}

/* ---------- Akademie-Seite: Auftritt einer Fachschule in Tinte und Messing ----------
   Alles hier ist mit .page-academy gescopet, damit der Akademie-Teaser der Startseite
   unberührt bleibt. */

/* Kopf: Titel über die volle Breite, Maßband als Trennlinie, darunter Text und Emaille-Schild */
.page-academy .academy-hero {
  padding-bottom: clamp(3rem, 2rem + 4vw, 5.5rem);
}
.page-academy .academy-hero__title .hero__line {
  font-weight: 680;
  font-stretch: 112%;
  font-size: clamp(2.1rem, 0.9rem + 5.4vw, 6rem);
  line-height: 0.98;
  letter-spacing: -0.032em;
}
.page-academy .academy-hero .btn .nowrap {
  white-space: nowrap;
}
.page-academy .academy-hero__title .hero__sub {
  max-width: 44ch;
  margin-top: clamp(1rem, 0.6rem + 1vw, 1.5rem);
  color: var(--tinte);
  font-weight: 600;
  font-stretch: 104%;
  font-size: clamp(1.05rem, 0.9rem + 0.6vw, 1.4rem);
  line-height: 1.3;
}
.page-academy .academy-hero__rule {
  height: 16px;
  margin-block: clamp(1.75rem, 1rem + 2.5vw, 3rem);
  background:
    linear-gradient(var(--messing-deep), var(--messing-deep)) left top / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, var(--messing-deep) 0 1px, transparent 1px 80px) left top / 100% 16px no-repeat,
    repeating-linear-gradient(90deg, var(--messing-deep) 0 1px, transparent 1px 16px) left top / 100% 8px no-repeat;
  transform-origin: left center;
}
@media (prefers-reduced-motion: no-preference) {
  .page-academy .academy-hero__rule {
    animation: academy-rule-in 1.2s var(--ease-out) 0.35s both;
  }
}
@keyframes academy-rule-in {
  from {
    transform: scaleX(0);
  }
}
.page-academy .academy-hero__body {
  display: grid;
  gap: var(--sp-12);
  align-items: center;
}
.page-academy .academy-hero .page-hero__lead {
  margin-top: 0;
}
@media (min-width: 960px) {
  .page-academy .academy-hero__body {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--sp-16);
  }
  .page-academy .academy-hero .medallion {
    justify-self: end;
    width: min(100%, 470px);
  }
}

/* Kursdaten als Tinte-Leiste mit Messing-Kante, Beschriftung über dem Wert wie im Formular */
.page-academy .facts--hero {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem);
  background: var(--tinte-3);
  border: 0;
  border-top: 3px solid var(--messing);
  border-radius: 0 0 var(--radius-s) var(--radius-s);
}
.page-academy .facts--hero .facts__item {
  flex-direction: column;
  justify-content: flex-start;
  gap: 0.3rem;
  padding: 1.1rem clamp(0.85rem, 0.5rem + 1.2vw, 1.5rem) 1.3rem;
  background: var(--tinte);
}
.page-academy .facts--hero dt {
  color: var(--tinte-muted);
  font-size: var(--fs-sm);
  font-weight: 500;
}
.page-academy .facts--hero dd {
  color: var(--messing);
  font-weight: 700;
  font-stretch: 112%;
  font-size: clamp(1.3rem, 0.9rem + 1.4vw, 2.1rem);
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.page-academy .facts--hero dd small {
  margin-top: 0.4rem;
  color: oklch(0.88 0.02 252);
  font-size: var(--fs-sm);
  letter-spacing: 0;
  line-height: 1.4;
}
@media (min-width: 1100px) {
  .page-academy .facts--hero {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Zielgruppe: Liste mit Haarlinien statt Kästchen */
.page-academy .audience {
  gap: 0;
  border-top: 1px solid var(--tinte);
}
.page-academy .audience li {
  gap: var(--sp-6);
  padding: 1.15rem 0.25rem;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--beton-3);
  border-radius: 0;
  font-weight: 600;
  font-stretch: 108%;
  font-size: clamp(1.05rem, 0.95rem + 0.45vw, 1.3rem);
  line-height: 1.3;
}
.page-academy .audience img {
  width: 44px;
  height: 44px;
}
.page-academy .audience__media {
  margin-top: var(--sp-12);
}

/* Seminartag als Stundenplan: Zeilenhöhe folgt der Dauer, Messing-Balken markieren die Praxis */
.page-academy .schedule {
  --per-min: 0.09rem;
  margin-top: var(--sp-8);
  border-top: 1px solid var(--tinte);
}
.page-academy .schedule li {
  grid-template-columns: 6px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  column-gap: var(--sp-4);
  row-gap: 0.2rem;
  min-height: calc(var(--dur, 30) * var(--per-min));
  padding-block: 0.8rem;
  border-bottom-color: var(--beton-2);
}
.page-academy .schedule .is-30 {
  --dur: 30;
}
.page-academy .schedule .is-60 {
  --dur: 60;
}
.page-academy .schedule .is-90 {
  --dur: 90;
}
.page-academy .schedule li::before {
  content: "";
  grid-column: 1;
  grid-row: 1 / span 2;
  margin-block: calc(-0.8rem + 3px) calc(-0.8rem + 2px);
  border-radius: 1px;
  background: var(--tinte-3);
}
.page-academy .schedule .is-practice::before {
  background: var(--messing);
}
.page-academy .schedule .is-break::before {
  background: repeating-linear-gradient(-45deg, var(--beton-3) 0 2px, transparent 2px 5px);
}
.page-academy .schedule time {
  grid-column: 2;
  color: var(--tinte);
  font-size: var(--fs-sm);
  font-weight: 700;
  font-stretch: 104%;
  letter-spacing: 0.01em;
}
.page-academy .schedule li > span {
  grid-column: 2;
  color: var(--tinte);
  font-size: var(--fs-base);
  line-height: 1.4;
}
.page-academy .schedule .is-practice > span {
  font-weight: 650;
}
.page-academy .schedule .is-break > span,
.page-academy .schedule .is-break time {
  color: var(--text-muted);
}
.page-academy .schedule__key {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: var(--sp-4);
  color: var(--text-muted);
  font-size: var(--fs-sm);
}
.page-academy .schedule__swatch {
  flex: none;
  width: 6px;
  height: 1.1rem;
  border-radius: 1px;
  background: var(--messing);
}
@media (min-width: 600px) {
  .page-academy .schedule {
    --per-min: 0.105rem;
  }
  .page-academy .schedule li {
    grid-template-columns: 7.5rem 6px minmax(0, 1fr);
    grid-template-rows: 1fr;
    column-gap: var(--sp-6);
  }
  .page-academy .schedule li::before {
    grid-column: 2;
    grid-row: 1;
  }
  .page-academy .schedule time {
    grid-column: 1;
    grid-row: 1;
    font-size: var(--fs-base);
    white-space: nowrap;
  }
  .page-academy .schedule li > span {
    grid-column: 3;
    grid-row: 1;
  }
}

/* Randnotiz statt Kasten: Tagesspanne groß gesetzt, Messing-Linie links */
.page-academy .side-note {
  gap: var(--sp-4);
  padding: var(--sp-2) 0 var(--sp-2) clamp(1.25rem, 0.8rem + 1.5vw, 2rem);
  background: transparent;
  border: 0;
  border-left: 2px solid var(--messing-deep);
  border-radius: 0;
}
.page-academy .side-note .side-note__span {
  display: grid;
  justify-items: start;
  color: var(--tinte);
  font-weight: 700;
  font-stretch: 112%;
  font-size: clamp(2.6rem, 1.6rem + 3vw, 4.2rem);
  line-height: 0.95;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}
.page-academy .side-note__span span:first-child::after {
  content: "";
  display: block;
  width: 2px;
  height: clamp(1.25rem, 0.8rem + 1.5vw, 2.25rem);
  margin: 0.55rem 0 0.5rem 0.18em;
  background: var(--messing);
}
.page-academy .side-note__span span + span {
  color: var(--messing-deep);
}
.page-academy .side-note h3 {
  margin-top: var(--sp-2);
  font-stretch: 112%;
  font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.55rem);
}
.page-academy .side-note p {
  max-width: 42ch;
  color: var(--text-muted);
}

/* Seminarinhalte als Lehrplan: Zeilen mit Haarlinie, große Modulnummer, Messing-Kante beim Öffnen */
@media (min-width: 1200px) {
  .page-academy .academy-curriculum {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--sp-16);
    align-items: start;
  }
  .page-academy .academy-curriculum .band__head {
    position: sticky;
    top: calc(var(--header-h) + 2rem);
    margin-bottom: 0;
  }
  .page-academy .academy-curriculum .h-urgent {
    font-size: clamp(2rem, 1rem + 2.2vw, 3.2rem);
  }
}
.page-academy .modules {
  gap: 0;
  border-top: 1px solid var(--tinte);
}
.page-academy .module {
  min-width: 0;
  border: 0;
  border-bottom: 1px solid var(--beton-3);
  border-radius: 0;
  background: transparent;
  transition: background-color var(--dur-2) ease-out, box-shadow var(--dur-2) ease-out;
}
.page-academy .module[open] {
  background: var(--papier);
  border-color: var(--beton-3);
  box-shadow: inset 3px 0 0 var(--messing);
}
.page-academy .module summary {
  gap: var(--sp-6);
  min-height: 80px;
  padding: 1.1rem 0.75rem 1.1rem 1.25rem;
  color: var(--tinte);
  font-weight: 650;
  font-stretch: 108%;
  font-size: clamp(1.1rem, 0.95rem + 0.5vw, 1.35rem);
  line-height: 1.2;
}
.page-academy .module summary::before {
  min-width: 2.1ch;
  color: var(--messing-deep);
  font-weight: 700;
  font-stretch: 100%;
}
.page-academy .module summary:hover .module__title {
  color: var(--stahl-deep);
}
.page-academy .module__title {
  min-width: 0;
  overflow-wrap: break-word;
  transition: color var(--dur-2) ease-out;
}
.page-academy .module__body {
  padding: 0 1.25rem 1.75rem calc(1.25rem + 2.1ch + var(--sp-6));
  color: oklch(0.4 0.035 256);
}
.page-academy .module__steps li::marker {
  color: var(--messing-deep);
}
@media (min-width: 760px) {
  .page-academy .module__body ul,
  .page-academy .module__body .module__steps {
    display: block;
    columns: 2;
    column-gap: var(--sp-8);
  }
  .page-academy .module__body li {
    break-inside: avoid;
    margin-bottom: 0.45rem;
  }
}
@media (max-width: 599px) {
  .page-academy .module summary {
    gap: var(--sp-4);
    min-height: 68px;
    padding: 0.95rem 0.25rem 0.95rem 0.75rem;
    font-size: 1.05rem;
  }
  .page-academy .module__body {
    padding: 0 0.75rem 1.5rem 0.75rem;
  }
}

/* Preise: zwei Tarife wie ein Gebührenblatt, Preis groß und in der breiten Ruhe-Schrift */
.page-academy .plan {
  grid-template-rows: auto auto 1fr auto;
  align-content: stretch;
  gap: var(--sp-6);
  padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  border: 1px solid var(--beton-3);
  border-top: 4px solid var(--tinte);
  border-radius: 0 0 var(--radius-s) var(--radius-s);
}
.page-academy .plan--feature {
  border-color: var(--tinte);
  border-top-color: var(--messing);
}
.page-academy .plan__name {
  font-weight: 650;
  font-stretch: 116%;
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.55rem);
}
.page-academy .plan__price {
  display: grid;
  justify-items: start;
  padding-bottom: var(--sp-6);
  border-bottom: 1px solid var(--beton-3);
  font-weight: 700;
  font-stretch: 112%;
  font-size: clamp(3.4rem, 2.2rem + 4vw, 5.6rem);
  letter-spacing: -0.04em;
  line-height: 0.95;
}
.page-academy .plan__price small {
  margin-top: 0.7rem;
  color: var(--text-muted);
  font-size: 1rem;
  font-weight: 600;
  font-stretch: 104%;
  letter-spacing: 0;
}
.page-academy .plan--feature .plan__price {
  border-bottom-color: var(--tinte-3);
}
.page-academy .plan--feature .plan__price small {
  color: var(--tinte-muted);
}
.page-academy .plan .checklist {
  align-self: start;
  font-size: var(--fs-base);
}
.page-academy .plan .checklist .icon {
  color: var(--messing-deep);
}
.page-academy .plan--feature .checklist .icon {
  color: var(--messing);
}
.page-academy .plan .btn {
  justify-content: center;
  width: 100%;
}
.page-academy .academy-notes {
  gap: var(--sp-8);
  margin-top: var(--sp-12);
}
.page-academy .academy-notes .notice--calm {
  gap: var(--sp-2);
  padding: var(--sp-4) 0 0;
  background: transparent;
  border: 0;
  border-top: 2px solid var(--tinte);
  border-radius: 0;
}
.page-academy .academy-notes .notice--calm h3 {
  font-stretch: 110%;
  font-size: 1.2rem;
}
.page-academy .academy-notes .notice--calm p {
  max-width: 52ch;
}

/* Teilnahmebescheinigung: Muster-Blatt statt Symbolbild, Hinweis gut lesbar daneben */
.page-academy .academy-cert__grid {
  display: grid;
  gap: var(--sp-12);
  grid-template-areas: "text" "doc" "notice";
}
.page-academy .academy-cert .certificate {
  grid-area: text;
}
.page-academy .cert-doc {
  grid-area: doc;
  justify-self: center;
  width: min(100%, 460px);
  container-type: inline-size;
}
.page-academy .academy-cert .notice {
  grid-area: notice;
}
@media (min-width: 960px) {
  .page-academy .academy-cert__grid {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "text doc" "notice doc";
    column-gap: var(--sp-16);
    row-gap: var(--sp-8);
    align-items: start;
  }
  .page-academy .cert-doc {
    justify-self: end;
  }
}
.page-academy .cert-doc__sheet {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  aspect-ratio: 210 / 297;
  padding: 11cqi 10cqi 9cqi;
  background: oklch(0.99 0.004 85);
  color: var(--tinte);
  text-align: center;
  box-shadow:
    0 1px 0 var(--beton-3),
    0 2px 6px -2px oklch(0.24 0.055 258 / 0.18),
    0 34px 60px -30px oklch(0.24 0.055 258 / 0.5);
  transform: rotate(1.6deg);
  transition: transform var(--dur-3) var(--ease-out);
}
.page-academy .cert-doc__sheet::before,
.page-academy .cert-doc__sheet::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.page-academy .cert-doc__sheet::before {
  inset: 3.2cqi;
  border: 1.5px solid var(--messing-deep);
}
.page-academy .cert-doc__sheet::after {
  inset: 4.4cqi;
  border: 1px solid oklch(0.46 0.1 75 / 0.45);
}
@media (hover: hover) {
  .page-academy .cert-doc:hover .cert-doc__sheet {
    transform: rotate(0deg) translateY(-4px);
  }
}
.page-academy .cert-doc__stamp {
  position: absolute;
  top: 8cqi;
  right: 7cqi;
  padding: 0.6cqi 2cqi;
  border: 2px solid var(--stahl);
  border-radius: 3px;
  color: var(--stahl-deep);
  font-size: 3cqi;
  font-weight: 700;
  font-stretch: 112%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transform: rotate(-8deg);
  opacity: 0.8;
}
.page-academy .cert-doc__signet {
  width: 56%;
  height: auto;
  margin-top: 2cqi;
}
.page-academy .cert-doc__issuer {
  margin-top: 3cqi;
  color: var(--messing-deep);
  font-size: 2.6cqi;
  font-weight: 650;
  font-stretch: 112%;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.page-academy .cert-doc__title {
  margin-top: 4cqi;
  font-size: 6.2cqi;
  font-weight: 700;
  font-stretch: 112%;
  letter-spacing: -0.02em;
  line-height: 1;
}
.page-academy .cert-doc__field {
  display: grid;
  justify-items: center;
  gap: 1cqi;
  width: 72%;
  margin-top: 7cqi;
}
.page-academy .cert-doc__line {
  width: 100%;
  height: 1px;
  background: var(--tinte);
}
.page-academy .cert-doc__label {
  color: oklch(0.44 0.035 256);
  font-size: 2.3cqi;
}
.page-academy .cert-doc__text {
  max-width: 34ch;
  margin-top: 4.5cqi;
  font-size: 2.7cqi;
  line-height: 1.45;
}
.page-academy .cert-doc__list {
  width: 88%;
  margin-top: 3cqi;
  columns: 2;
  column-gap: 5cqi;
  color: oklch(0.36 0.04 256);
  font-size: 2.35cqi;
  line-height: 1.5;
  text-align: left;
  counter-reset: cert;
}
.page-academy .cert-doc__list li {
  break-inside: avoid;
  padding-left: 4.2cqi;
  text-indent: -4.2cqi;
}
.page-academy .cert-doc__list li::before {
  counter-increment: cert;
  content: counter(cert, decimal-leading-zero);
  display: inline-block;
  width: 4.2cqi;
  text-indent: 0;
  color: var(--messing-deep);
  font-weight: 700;
}
.page-academy .cert-doc__sign {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7cqi;
  width: 100%;
  margin-top: auto;
}
.page-academy .cert-doc__sign .cert-doc__field {
  width: 100%;
  margin-top: 0;
}
.page-academy .academy-cert .notice {
  gap: var(--sp-3);
  padding: var(--sp-6) var(--sp-6) var(--sp-6) calc(var(--sp-6) + 2px);
  background: var(--papier);
  border: 1px solid var(--beton-3);
  border-left: 4px solid var(--messing-deep);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
}
.page-academy .academy-cert .notice h3 {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--tinte);
  font-stretch: 110%;
  font-size: 1.2rem;
}
.page-academy .academy-cert .notice h3::before {
  content: "i" / "";
  display: grid;
  place-items: center;
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--messing-deep);
  color: var(--papier);
  font-size: 0.95rem;
  font-weight: 800;
  font-stretch: 100%;
}
.page-academy .academy-cert .notice p {
  max-width: 62ch;
  color: var(--tinte);
  font-size: var(--fs-base);
  line-height: 1.65;
}

/* Sicherheits- und Verhaltensregeln: dunkle Tinte-Insel, Regeln als nummerierte Zeilen */
.page-academy .academy-rules {
  --text: var(--papier);
  --text-muted: var(--tinte-muted);
  --bg-3: var(--tinte-3);
  --line: var(--tinte-3);
  background:
    radial-gradient(60% 80% at 100% 0%, oklch(0.31 0.07 256) 0%, transparent 62%),
    var(--tinte);
  color: var(--papier);
  color-scheme: dark;
}
/* Die FAQ hat oben kein eigenes Polster (sonst teilt sie es mit der hellen Sektion davor) */
.page-academy .academy-rules + .faq {
  padding-top: var(--section);
}
.page-academy .academy-rules .h-urgent {
  color: var(--papier);
}
.page-academy .academy-rules .band__head p {
  color: var(--tinte-muted);
}
.page-academy .academy-rules ::selection {
  background: var(--messing);
  color: var(--tinte);
}
.page-academy .rules {
  gap: 0 var(--sp-12);
}
.page-academy .rule {
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1fr);
  align-content: start;
  padding-block: var(--sp-6) var(--sp-8);
  border-top: 1px solid var(--tinte-3);
}
.page-academy .rule::before {
  counter-increment: rule;
  content: counter(rule, decimal-leading-zero);
  grid-row: 1 / span 2;
  color: var(--messing);
  font-weight: 700;
  font-stretch: 112%;
  font-size: 1.55rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.page-academy .rule h3 {
  display: block;
  color: var(--papier);
  font-weight: 650;
  font-stretch: 110%;
  font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem);
}
.page-academy .rule h3::before {
  content: none;
}
.page-academy .rule p {
  max-width: 56ch;
  margin-top: 0.6rem;
  padding-left: 0;
  color: var(--tinte-muted);
}
@media (max-width: 599px) {
  .page-academy .rule {
    grid-template-columns: 2.6rem minmax(0, 1fr);
  }
  .page-academy .rule::before {
    font-size: 1.25rem;
    line-height: 1.15;
  }
}

/* Fragen: breite Ruhe-Schrift, offene Frage in Stahlblau statt Signal-Braun */
.page-academy .faq-item summary {
  font-weight: 650;
  font-stretch: 108%;
}
.page-academy .faq-item summary:hover,
.page-academy .faq-item[open] summary {
  color: var(--stahl-deep);
}

/* Einsatzgebiet-Seite */
.districts {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--bg-3);
}
.district {
  display: grid;
  gap: var(--sp-2);
  padding-block: var(--sp-6);
  border-bottom: 1px solid var(--bg-3);
  scroll-margin-top: calc(var(--header-h) + 1rem);
}
.district h3 {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.3rem 0.8rem;
  font-weight: 780;
  font-stretch: 82%;
  font-size: 1.5rem;
}
.district h3 small {
  color: var(--text-muted);
  font-weight: 500;
  font-stretch: 100%;
}
.district p {
  max-width: 62ch;
  color: var(--text-muted);
}
.district:target {
  background: linear-gradient(90deg, var(--bg-2), transparent 80%);
}
.district:target h3 {
  color: var(--signal-text);
}
.map-credit {
  margin-top: var(--sp-4);
  color: var(--text-muted);
  font-size: var(--fs-xs);
}

/* Kontakt */
.contact-cards {
  display: grid;
  gap: var(--sp-4);
}
.contact-card {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-6);
  background: var(--bg-2);
  border-radius: var(--radius-m);
}
.contact-card--signal {
  background: var(--signal);
  color: var(--bg);
}
.contact-card__label {
  font-size: var(--fs-sm);
  font-weight: 650;
}
.contact-card__value {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  font-stretch: 66%;
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.2rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.contact-card__value--text {
  font-family: var(--font);
  font-style: normal;
  font-weight: 700;
  font-stretch: 94%;
  font-size: 1.35rem;
}
.contact-card a:hover {
  text-decoration: underline;
}
.contact-card--signal :focus-visible {
  outline-color: var(--bg);
}
@media (min-width: 760px) {
  .contact-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .contact-card--signal {
    grid-column: 1 / -1;
  }
}

/* 404: nächtliches Treppenhaus. Eine verschlossene Tür mit Hausnummer 404,
   durch Schlüsselloch und Türspalt fällt Bernsteinlicht. Der Drücker ruckelt ab und zu. */
.lost {
  --bg: var(--asphalt);
  --text: var(--paper);
  --text-muted: var(--paper-muted);
  --signal-text: var(--signal);
  position: relative;
  isolation: isolate;
  overflow: clip;
  min-height: calc(100svh - var(--header-h));
  display: grid;
  align-items: center;
  padding-block: clamp(2rem, 1rem + 4vw, 5rem);
  background:
    radial-gradient(55% 60% at 78% 42%, oklch(0.34 0.07 60 / 0.75) 0%, transparent 70%),
    radial-gradient(60% 50% at 0% 100%, oklch(0.24 0.03 50) 0%, transparent 70%),
    var(--asphalt);
  color: var(--text);
  color-scheme: dark;
}
.lost__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-8);
  align-items: center;
}
.lost__tuer {
  order: -1;
  justify-self: start;
  width: min(40vw, 150px);
}
.lost__title {
  max-width: 12ch;
  color: var(--paper);
}
.lost__lead {
  max-width: 42ch;
  margin-top: var(--sp-6);
  color: var(--paper-muted);
  font-size: var(--fs-lg);
  line-height: 1.5;
}
.lost .lost__actions {
  align-items: stretch;
}
@media (max-width: 559.98px) {
  .lost .lost__actions {
    display: grid;
  }
  .lost .btn-call,
  .lost .btn-wa {
    width: 100%;
  }
}
.lost__wege {
  margin-top: var(--sp-12);
  max-width: 560px;
}
.lost__wege-title {
  margin-bottom: var(--sp-2);
  color: var(--paper-muted);
  font-size: 1rem;
  font-weight: 700;
  font-stretch: 100%;
}
.lost__wege ul {
  display: grid;
  border-top: 1px solid oklch(0.95 0.02 75 / 0.16);
}
.lost__wege li {
  border-bottom: 1px solid oklch(0.95 0.02 75 / 0.16);
}
.lost__wege a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: 52px;
  color: var(--paper);
  font-weight: 650;
  font-stretch: 104%;
  font-size: 1.05rem;
  text-decoration: none;
}
.lost__wege a .icon {
  width: 1.15em;
  height: 1.15em;
  color: var(--signal);
  transition: transform var(--dur-2) var(--ease-out);
}
.lost__wege a:hover {
  color: var(--signal);
}
.lost__wege a:hover .icon {
  transform: translateX(4px);
}
.tuer {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.tuer__blatt-hi {
  stop-color: oklch(0.34 0.03 55);
}
.tuer__blatt-lo {
  stop-color: oklch(0.22 0.014 50);
}
.tuer__metall-hi {
  stop-color: oklch(0.9 0.012 70);
}
.tuer__metall-lo {
  stop-color: oklch(0.58 0.014 60);
}
.tuer__licht-in {
  stop-color: var(--bernstein);
  stop-opacity: 0.42;
}
.tuer__licht-out {
  stop-color: var(--bernstein);
  stop-opacity: 0;
}
.tuer__zarge {
  fill: oklch(0.4 0.02 55);
}
.tuer__nut {
  fill: oklch(0.14 0.01 50 / 0.7);
}
.tuer__spalt {
  fill: var(--bernstein-hi);
}
.tuer__boden {
  fill: oklch(0.36 0.015 50);
}
.tuer__schild-flaeche {
  fill: var(--signal);
}
.tuer__nummer {
  fill: var(--asphalt);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  font-stretch: 64%;
  font-size: 50px;
  letter-spacing: 0.01em;
}
.tuer__glut {
  fill: var(--bernstein);
  opacity: 0.3;
  filter: blur(4px);
}
.tuer__spion {
  fill: oklch(0.14 0.01 50);
}
.tuer__loch {
  fill: var(--bernstein-hi);
}
.tuer__druecker {
  transform-box: view-box;
  transform-origin: 273px 283px;
}
@media (prefers-reduced-motion: no-preference) {
  .lost [data-load] {
    animation: rise-in var(--dur-3) var(--ease-out) both;
  }
  .lost__lead[data-load] {
    animation-delay: 100ms;
  }
  .lost__actions[data-load] {
    animation-delay: 180ms;
  }
  .lost__wege[data-load] {
    animation-delay: 260ms;
  }
  .tuer__druecker {
    animation: druecker 5.2s var(--ease-io) 1.2s infinite;
  }
  .tuer__glut {
    animation: glut 5.2s ease-in-out 1.2s infinite;
  }
}
@keyframes druecker {
  0%, 30%, 100% { transform: rotate(0); }
  5% { transform: rotate(-24deg); }
  9% { transform: rotate(-4deg); }
  13% { transform: rotate(-22deg); }
  18% { transform: rotate(0); }
}
@keyframes glut {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.14; }
}
@media (min-width: 600px) {
  .lost__tuer {
    width: 220px;
  }
}
@media (min-width: 960px) {
  .lost__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: var(--sp-16);
  }
  .lost__tuer {
    order: 0;
    justify-self: center;
    width: min(100%, 360px);
  }
}

/* ---------- Bewegung ---------- */
@keyframes line-in {
  from {
    clip-path: inset(-20% -10% 100% -10%);
    transform: translateY(45%);
  }
  to {
    clip-path: inset(-20% -10% -20% -10%);
    transform: none;
  }
}
@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes dial-in {
  from {
    opacity: 0;
    transform: rotate(-24deg) scale(0.92);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes ring {
  0%, 84%, 100% { transform: rotate(0); }
  86% { transform: rotate(-14deg); }
  89% { transform: rotate(12deg); }
  92% { transform: rotate(-9deg); }
  95% { transform: rotate(5deg); }
}
@keyframes ping {
  from {
    opacity: 0.9;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(3.2);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .hero__line[data-load] {
    animation: line-in var(--dur-4) var(--ease-out) both;
  }
  .hero__line[data-load]:nth-child(2) {
    animation-delay: 110ms;
  }
  .hero__sub[data-load] {
    animation: rise-in var(--dur-3) var(--ease-out) 240ms both;
  }
  .hero__lead[data-load] {
    animation: rise-in var(--dur-3) var(--ease-out) 320ms both;
  }
  .hero__actions[data-load] {
    animation: rise-in var(--dur-3) var(--ease-out) 400ms both;
  }
  .hero__facts[data-load] {
    animation: rise-in var(--dur-3) var(--ease-out) 480ms both;
  }
  .hero__dial[data-load] .dial__svg {
    animation: dial-in 1.1s var(--ease-out) 150ms both;
  }
  .hero__dial[data-load] .dial__caption {
    animation: rise-in var(--dur-3) var(--ease-out) 560ms both;
  }
  .dial__hand {
    transition: transform 1.6s var(--ease-out);
  }

  .reveal-ready [data-reveal] {
    opacity: 0;
    transform: translateY(26px);
    transition:
      opacity 0.7s var(--ease-out),
      transform 0.9s var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
  }
  .reveal-ready [data-reveal].is-in {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Druck ---------- */
@media print {
  .site-header,
  .actionbar,
  .rail,
  .cta-band,
  .site-footer__skyline {
    display: none !important;
  }
  body {
    background: #fff;
    color: #111;
    padding: 0;
  }
}

.world-beton .h-section {
  font-weight: 680;
  font-stretch: 112%;
  letter-spacing: -0.012em;
}
.contact-card__note {
  color: var(--text-muted);
  font-size: var(--fs-sm);
}
.checklist--large {
  gap: var(--sp-4);
  font-size: 1.15rem;
}
.legal h2 {
  font-size: 1.5rem;
}

/* Rechtsseiten: ruhiges Dokument. Eine Lesespalte, das Blatt liegt auf Beton,
   Überschrift in der breiten Ruhe-Schrift statt Notruf-Kursiv. */
.page-legal main {
  background: var(--beton);
}
.page-legal main .wrap {
  width: min(100% - 2 * var(--gutter), 920px);
}
.page-legal .page-hero {
  padding-block: clamp(2rem, 1rem + 4vw, 4.5rem) var(--sp-8);
}
.page-legal .page-hero .h-urgent {
  font-family: var(--font);
  font-style: normal;
  font-weight: 680;
  font-stretch: 100%;
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.6rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
}
.page-legal .band {
  padding-block: 0 var(--section);
  background: transparent;
}
.page-legal .legal {
  max-width: none;
  margin-inline: calc(-1 * var(--gutter));
  padding: var(--sp-8) var(--gutter) var(--sp-12);
  background: var(--papier);
  border-top: 4px solid var(--signal);
  font-size: 1.0625rem;
  line-height: 1.7;
}
.page-legal .legal > * {
  max-width: var(--measure);
}
.page-legal .legal h2 {
  margin-top: 2.2em;
  padding-top: 1.3em;
  border-top: 1px solid var(--hairline);
  font-weight: 700;
  font-stretch: 104%;
  font-size: 1.3rem;
  line-height: 1.25;
  letter-spacing: -0.008em;
}
.page-legal .legal > h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.page-legal .legal h2 + * {
  margin-top: 0.7em;
}
.page-legal .legal a {
  text-underline-offset: 0.2em;
  overflow-wrap: anywhere;
}
@media (min-width: 700px) {
  .page-legal .page-hero .h-urgent {
    font-stretch: 112%;
  }
  .page-legal .legal {
    margin-inline: 0;
    padding: clamp(2rem, 1rem + 3vw, 4rem);
    border-radius: 0 0 var(--radius-s) var(--radius-s);
    box-shadow: 0 1px 0 var(--hairline), 0 30px 60px -44px oklch(0.2 0.02 50 / 0.55);
    font-size: 1.125rem;
    line-height: 1.72;
  }
}

/* Einsatzgebiet: Karte bleibt stehen, Liste scrollt */
.area-page__grid {
  display: grid;
  gap: var(--sp-12);
}
.area-page__map .map {
  max-width: 520px;
  margin-inline: auto;
}
.district-group + .district-group {
  margin-top: var(--sp-16);
}
.district-group__title {
  margin-bottom: var(--sp-4);
  color: var(--signal-text);
}
.district-group .lead-muted {
  margin-bottom: var(--sp-4);
}
.district {
  transition: background-color var(--dur-3) ease-out;
}
.district.is-current h3 {
  color: var(--signal-text);
}
@media (min-width: 960px) {
  .area-page__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: var(--sp-16);
    align-items: start;
  }
  .area-page__sticky {
    position: sticky;
    top: calc(var(--header-h) + 1.5rem);
  }
  .area-page__map .map svg {
    max-height: calc(100vh - var(--header-h) - 9rem);
  }
}
@media (max-width: 959px) {
  .area-page__map .map {
    max-width: 380px;
  }
}

/* Korrekturen nach Browser-Check */
.map text {
  font-size: 21px;
  font-weight: 700;
}
.academy-teaser .facts {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 1100px) {
  .facts--hero {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 420px) {
  .academy-teaser .facts {
    grid-template-columns: 1fr;
  }
}
.brand__sub {
  white-space: nowrap;
}
@media (max-width: 380px) {
  .brand__name {
    font-size: 1.45rem;
  }
  .brand__sub {
    font-size: 0.625rem;
  }
}

/* ---------- Farbrhythmus: helle Blöcke im dunklen Lauf ---------- */
.prices.world-beton {
  background:
    linear-gradient(180deg, oklch(0.87 0.04 58) 0%, oklch(0.9 0.02 66) 10%, var(--beton-2) 30%);
}
.prices.world-beton .tariff {
  background: var(--beton);
  border-left-color: var(--beton-3);
}
.prices.world-beton .tariff:has(.is-active) {
  border-left-color: var(--signal-text);
}
.prices.world-beton .tariff__price::before {
  background: var(--beton-3);
}
.prices.world-beton .tariff-head__col.is-active,
.world-beton .prices__rule .icon {
  color: var(--signal-text);
}
.prices.world-beton .tariff__price.is-active::before {
  background: var(--signal);
}
.prices.world-beton .prices__live {
  color: var(--ink);
}
.trust.world-beton {
  background:
    linear-gradient(180deg, oklch(0.86 0.045 58) 0%, oklch(0.9 0.022 66) 14%, var(--beton-2) 36%);
}
.trust.world-beton .trust__item p {
  color: var(--ink-muted);
}

/* Dunkle Sektion schneidet in den hellen Block */
.cut-top {
  position: relative;
  padding-top: calc(var(--section) + var(--cut));
  clip-path: polygon(0 0, 100% var(--cut), 100% 100%, 0 100%);
}
.cut-top--left {
  clip-path: polygon(0 var(--cut), 100% 0, 100% 100%, 0 100%);
}

/* Maßband: schmaler Orangestreifen als Sektionskante */
.ruler {
  height: 22px;
  background:
    repeating-linear-gradient(90deg, var(--bg) 0 3px, transparent 3px 120px),
    repeating-linear-gradient(90deg, oklch(0.165 0.01 50 / 0.55) 0 2px, transparent 2px 20px),
    linear-gradient(var(--signal), var(--signal));
  background-size: 100% 22px, 100% 10px, 100% 100%;
  background-repeat: no-repeat;
}
.ruler--copper {
  background:
    repeating-linear-gradient(90deg, var(--bg) 0 3px, transparent 3px 120px),
    repeating-linear-gradient(90deg, oklch(0.165 0.01 50 / 0.5) 0 2px, transparent 2px 20px),
    linear-gradient(90deg, var(--kupfer), var(--signal) 45%, var(--kupfer));
  background-size: 100% 22px, 100% 10px, 100% 100%;
  background-repeat: no-repeat;
}

/* Karte: Kupfertöne statt Einheitsgrau */
.map path {
  fill: var(--bg-3);
}
.map path:nth-of-type(3n) {
  fill: oklch(0.32 0.045 55);
}
.map path:nth-of-type(3n + 1) {
  fill: oklch(0.38 0.06 50);
}
.map path:nth-of-type(4n) {
  fill: oklch(0.44 0.075 52);
}
.map #st-bramfeld {
  fill: var(--kupfer);
}
.map a:hover path,
.map a:focus-visible path,
.map path.is-hot {
  fill: var(--signal);
}
.world-beton .map path {
  fill: var(--beton-3);
}
.world-beton .map path:nth-of-type(3n) {
  fill: oklch(0.86 0.02 60);
}
.world-beton .map path:nth-of-type(4n) {
  fill: oklch(0.8 0.035 55);
}

/* Leistungen: ruhiger Papiergrund, die Tafeln tragen die Farbe */
.services {
  position: relative;
  isolation: isolate;
}
.journal {
  position: relative;
  isolation: isolate;
}
.journal::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: -8%;
  top: 0;
  width: 46%;
  aspect-ratio: 1;
  background: radial-gradient(circle, oklch(0.91 0.05 70 / 0.6), transparent 60%);
  pointer-events: none;
}

.edge-bitting--light {
  fill: var(--beton-2);
}
.edge-slant--light {
  --next: var(--beton-2);
}
.cut-top--none {
  clip-path: none;
}

.faq.world-beton {
  padding-block: calc(var(--section) + var(--cut)) var(--section);
  background:
    linear-gradient(180deg, oklch(0.86 0.045 60) 0%, oklch(0.91 0.025 66) 14%, var(--beton) 38%);
  filter: drop-shadow(0 -3px 0 var(--signal));
}
.faq.world-beton .faq__grid {
  position: relative;
}
.faq.world-beton .faq__list {
  border-top-color: var(--beton-3);
}
.faq.world-beton .faq-item {
  border-bottom-color: var(--beton-3);
}
.faq.world-beton .faq-item summary:hover {
  color: var(--signal-text);
}
.faq.world-beton .faq-item summary::after {
  background: var(--signal-ink);
}

/* ---------- Tarif-Status im Hero (schmal, verdeckt das Foto nicht) ---------- */
.hero__status {
  margin-top: var(--sp-6);
}
.hero__facts {
  margin-top: var(--sp-6);
}
@media (min-width: 900px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1fr);
  }
}
.tarifstatus {
  display: inline-grid;
  grid-template-columns: 44px 1fr;
  align-items: center;
  gap: var(--sp-3);
  max-width: 34rem;
  padding: 0.75rem 1.2rem 0.75rem 0.85rem;
  background: oklch(0.22 0.014 50 / 0.9);
  border-left: 3px solid var(--signal);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
}
.tarifstatus__ring {
  width: 44px;
  height: 44px;
  overflow: visible;
}
.tarifstatus__arc {
  fill: none;
  stroke-width: 5;
}
.tarifstatus__arc--day {
  stroke: var(--signal);
  stroke-dasharray: 13 11;
  stroke-dashoffset: -7;
}
.tarifstatus__arc--night {
  stroke: var(--kupfer);
  stroke-dasharray: 11 13;
  stroke-dashoffset: -20;
}
.tarifstatus__hand {
  display: none;
  transform-box: view-box;
  transform-origin: 24px 24px;
  transition: transform 1.2s var(--ease-out);
}
.tarifstatus__hand circle {
  fill: var(--text);
  stroke: var(--bg);
  stroke-width: 2;
}
.is-live .tarifstatus__hand {
  display: block;
}
.tarifstatus__text {
  display: grid;
  gap: 0.1rem;
  line-height: 1.35;
}
.tarifstatus__now {
  font-weight: 760;
  font-stretch: 86%;
  font-size: 1.05rem;
}
.tarifstatus__now strong {
  color: var(--signal-text);
}
.tarifstatus__status {
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

/* Zifferblatt sitzt jetzt im Kopf der Preis-Sektion */
.prices__head {
  position: relative;
}
/* Zifferblatt und Live-Tarif als eine Einheit nebeneinander, auch mobil kompakt */
.prices__dial {
  margin-top: var(--sp-6);
}
.prices__dial .dial {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  align-items: center;
  gap: 1.1rem;
}
.prices__dial .dial__svg {
  width: 100%;
}
.prices__dial .dial__caption {
  max-width: 30ch;
  text-align: left;
}
/* Die Live-Zeile im Fuß wiederholt nur, was am Zifferblatt steht */
.prices:has(.prices__dial) .prices__live {
  display: none;
}
.prices.world-beton .dial__face {
  fill: var(--beton);
  stroke: var(--beton-3);
}
.prices.world-beton .dial__ticks--minor {
  stroke: var(--ink-muted);
}
.prices.world-beton .dial__ticks--major {
  stroke: var(--ink);
}
.prices.world-beton .dial__hours text {
  fill: var(--ink-muted);
}
.prices.world-beton .dial__big {
  fill: var(--signal-ink);
}
.prices.world-beton .dial__small {
  fill: var(--ink);
}
.prices.world-beton .dial__hand line {
  stroke: var(--ink);
}
.prices.world-beton .dial__hand circle {
  fill: var(--ink);
  stroke: var(--beton);
}
.prices.world-beton .dial__now strong {
  color: var(--signal-text);
}
@media (min-width: 900px) {
  .prices__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--sp-12);
    row-gap: var(--sp-4);
    align-items: end;
    max-width: none;
  }
  .prices__head > :not(.prices__dial) {
    grid-column: 1;
  }
  .prices__dial {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    margin-top: 0;
    padding-left: var(--sp-8);
    border-left: 1px solid var(--line);
  }
  .prices__dial .dial {
    grid-template-columns: 168px minmax(0, 15rem);
    gap: 1.5rem;
  }
}

/* ---------- Akademie: Ticket statt Bilderrahmen ---------- */
/* Dunkle Tinte-Insel zwischen Beton und Kartenblatt: Marineblau und Messing wie im Signet */
.academy {
  position: relative;
  padding-block: calc(var(--section) + 1rem) var(--section);
  background:
    radial-gradient(46% 70% at 84% 52%, oklch(0.8 0.115 82 / 0.13) 0%, transparent 70%),
    radial-gradient(80% 90% at 6% 0%, oklch(0.33 0.065 256) 0%, transparent 62%),
    var(--tinte);
  color: oklch(0.97 0.006 250);
  color-scheme: dark;
}
.academy::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 16px;
  background:
    repeating-linear-gradient(90deg, var(--tinte) 0 3px, transparent 3px 132px),
    linear-gradient(90deg, var(--messing-deep), var(--messing) 50%, var(--messing-deep));
  background-size: 100% 16px, 100% 100%;
  background-repeat: no-repeat;
}
.academy ::selection {
  background: var(--messing);
  color: var(--tinte);
}
.academy :focus-visible {
  outline-color: var(--messing);
}
.academy__grid {
  display: grid;
  gap: var(--sp-16);
  align-items: center;
}
.academy__title {
  color: oklch(0.97 0.006 250);
}
.academy__claim {
  margin-top: var(--sp-4);
  color: var(--messing);
  font-weight: 560;
  font-stretch: 122%;
  font-size: var(--fs-lg);
  letter-spacing: 0.02em;
}
.academy__text {
  max-width: 52ch;
  margin-top: var(--sp-6);
  color: var(--tinte-muted);
}
.academy__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4) var(--sp-8);
  margin-top: var(--sp-8);
}
.academy .link-arrow--brass {
  color: var(--messing);
}
.academy .link-arrow--brass:hover {
  color: var(--messing-hi);
}
.academy .btn--brass {
  background: var(--messing);
  color: var(--tinte);
}
.academy .btn--brass:hover {
  background: var(--messing-hi);
}
/* Eintrittskarte aus Papier: Stanzkerben an der Perforation, leicht schräg abgelegt */
.ticket {
  position: relative;
  display: grid;
  gap: 0;
  width: 100%;
  max-width: 500px;
  color: var(--ink);
  color-scheme: light;
  filter: drop-shadow(0 26px 30px oklch(0.1 0.04 258 / 0.55)) drop-shadow(0 2px 3px oklch(0.1 0.04 258 / 0.4));
}
.ticket > * {
  background: var(--papier);
}
.ticket__head {
  position: relative;
  display: grid;
  place-items: center;
  padding: var(--sp-8) var(--sp-6) var(--sp-6);
  border-radius: var(--radius-s) var(--radius-s) 0 0;
  border-bottom: 2px dashed var(--beton-3);
  -webkit-mask:
    radial-gradient(circle at 0 100%, transparent 13px, #000 13.5px) 0 0 / 51% 100% no-repeat,
    radial-gradient(circle at 100% 100%, transparent 13px, #000 13.5px) 100% 0 / 51% 100% no-repeat;
  mask:
    radial-gradient(circle at 0 100%, transparent 13px, #000 13.5px) 0 0 / 51% 100% no-repeat,
    radial-gradient(circle at 100% 100%, transparent 13px, #000 13.5px) 100% 0 / 51% 100% no-repeat;
}
.ticket__facts {
  -webkit-mask:
    radial-gradient(circle at 0 0, transparent 13px, #000 13.5px) 0 0 / 51% 100% no-repeat,
    radial-gradient(circle at 100% 0, transparent 13px, #000 13.5px) 100% 0 / 51% 100% no-repeat;
  mask:
    radial-gradient(circle at 0 0, transparent 13px, #000 13.5px) 0 0 / 51% 100% no-repeat,
    radial-gradient(circle at 100% 0, transparent 13px, #000 13.5px) 100% 0 / 51% 100% no-repeat;
}
.ticket__note {
  border-radius: 0 0 var(--radius-s) var(--radius-s);
}
@media (min-width: 960px) {
  .ticket {
    rotate: 2deg;
  }
}
.ticket__head img {
  width: min(100%, 340px);
}
.ticket__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ticket__facts > div {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: var(--sp-4) var(--sp-5, 1.25rem);
  border-bottom: 1px solid var(--beton-2);
}
.ticket__facts > div:nth-child(odd) {
  border-right: 1px solid var(--beton-2);
}
.ticket__facts dt {
  color: var(--ink-muted);
  font-size: var(--fs-xs);
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ticket__facts dd {
  font-weight: 800;
  font-stretch: 104%;
  font-size: 1.5rem;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.ticket__facts dd small {
  display: block;
  margin-top: 0.2rem;
  color: var(--ink-muted);
  font-weight: 450;
  font-stretch: 100%;
  font-size: var(--fs-sm);
}
.ticket__note {
  padding: var(--sp-4) 1.25rem var(--sp-6);
  color: var(--ink-muted);
  font-size: var(--fs-sm);
  text-align: center;
}
@media (min-width: 960px) {
  .academy__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--sp-16);
  }
}

/* ---------- Lesefortschritt: nur in den Ratgeber-Artikeln ---------- */
.rail {
  display: none;
}
@media (min-width: 1480px) {
  .page-article .rail {
    --page-p: 0;
    position: fixed;
    z-index: var(--z-rail);
    top: calc(var(--header-h) + 3rem);
    bottom: 3rem;
    left: max(16px, calc((100vw - var(--maxw)) / 2 - 56px));
    display: block;
    width: 26px;
    padding-block: 10px;
    background: oklch(0.13 0.008 50 / 0.6);
    border: 1px solid oklch(0.45 0.02 55 / 0.45);
    border-radius: 999px;
    pointer-events: none;
  }
  .page-article .rail__track {
    position: absolute;
    left: 9px;
    top: 10px;
    bottom: 10px;
    width: 8px;
    background:
      repeating-linear-gradient(to bottom, var(--line) 0 2px, transparent 2px 28px),
      linear-gradient(var(--bg-3), var(--bg-3));
    background-position: 0 0, 3px 0;
    background-size: 8px 100%, 2px 100%;
    background-repeat: no-repeat;
  }
  .page-article .rail__fill {
    position: absolute;
    left: 12px;
    top: 10px;
    bottom: 58px;
    width: 2px;
    background: var(--signal);
    transform-origin: top;
    transform: scaleY(var(--key-p, 0));
  }
  .page-article .rail__track {
    bottom: 58px;
  }

  /* Schloss am Ende der Leiste. Stapelung: Bügel hinter dem Schlüssel, Körper davor,
     damit der Bart im Schloss verschwindet. Der Ablauf beim Aufschließen läuft in main.js. */
  .page-article .rail__shackle,
  .page-article .rail__lock,
  .page-article .rail__sparks {
    position: absolute;
    max-width: none;
    overflow: visible;
  }
  .page-article .rail__shackle,
  .page-article .rail__lock {
    left: -5px;
    width: 36px;
  }
  .page-article .rail__shackle {
    z-index: 1;
    bottom: 28px;
    height: 28px;
    fill: none;
    stroke: var(--kupfer);
    stroke-width: 3.5;
    transform-origin: 6px 100%;
    transition: stroke var(--dur-2) ease-out;
  }
  .page-article .rail__lock {
    z-index: 3;
    bottom: 8px;
    height: 26px;
    transition: filter var(--dur-3) var(--ease-out);
  }
  .rail__lock-body {
    fill: var(--asphalt-2);
    stroke: var(--kupfer);
    stroke-width: 1.5;
    transition: fill var(--dur-2) ease-out, stroke var(--dur-2) ease-out;
  }
  .rail__lock-band {
    fill: none;
    stroke: oklch(0.36 0.015 50);
    stroke-width: 1.2;
    transition: stroke var(--dur-2) ease-out;
  }
  .rail__lock-slot {
    fill: var(--asphalt);
  }
  .page-article .rail__burst {
    position: absolute;
    z-index: 0;
    left: -7px;
    bottom: 1px;
    width: 40px;
    height: 40px;
    border: 2px solid var(--signal-hi);
    border-radius: 50%;
    opacity: 0;
  }
  .page-article .rail__sparks {
    z-index: 0;
    left: -19px;
    bottom: -11px;
    width: 64px;
    height: 64px;
    fill: none;
    stroke: var(--signal-hi);
    stroke-width: 2;
    stroke-linecap: round;
    opacity: 0;
  }

  .page-article .rail__key {
    position: absolute;
    z-index: 2;
    left: 4px;
    top: 2px;
    width: 18px;
    height: 48px;
    fill: var(--signal);
    filter: drop-shadow(0 0 3px oklch(0.12 0.01 50)) drop-shadow(0 0 1px oklch(0.12 0.01 50));
    translate: 0 calc(var(--key-p, 0) * (100vh - var(--header-h) - 6rem - 72px));
  }

  /* Offen: Bügel und Körper in Signalorange, Schloss glüht */
  .page-article .rail.is-open .rail__shackle {
    stroke: var(--signal-hi);
  }
  .page-article .rail.is-open .rail__lock {
    filter: drop-shadow(0 0 9px oklch(0.705 0.195 45 / 0.8));
  }
  .rail.is-open .rail__lock-body {
    fill: var(--signal);
    stroke: var(--signal-hi);
  }
  .rail.is-open .rail__lock-band {
    stroke: oklch(0.47 0.15 40);
  }
}

/* ---------- Stahlblau als Gegenpol ---------- */
.world-beton {
  --stahl-akzent: var(--stahl-deep);
}
.world-beton .h-section {
  color: var(--tinte);
}
.world-beton .feature-row__title img {
  filter: none;
}
.audience li {
  border-left: 3px solid var(--stahl);
}
.side-note {
  border-left: 3px solid var(--stahl);
}

/* ---------- Einsatzgebiet: ein Kartenblatt, Karte steht, Stadtteile laufen daneben ---------- */
.page-area {
  /* Zonenfarben: hell für die Kartenfläche, tief für Kanten und Striche */
  --z-sueden: oklch(0.85 0.06 48);
  --z-sueden-deep: oklch(0.6 0.11 45);
  --z-mitte: oklch(0.8 0.105 60);
  --z-mitte-deep: oklch(0.6 0.13 55);
  --z-alstertal: oklch(0.85 0.06 238);
  --z-alstertal-deep: oklch(0.55 0.11 245);
  --z-walddoerfer: oklch(0.86 0.055 152);
  --z-walddoerfer-deep: oklch(0.52 0.08 152);
  --z-osten: oklch(0.88 0.075 88);
  --z-osten-deep: oklch(0.6 0.1 80);
  --area-rule: oklch(0.2 0.012 50 / 0.16);
}
.page-area [data-zone="sueden"] {
  --zone: var(--z-sueden);
  --zone-deep: var(--z-sueden-deep);
}
.page-area [data-zone="mitte"] {
  --zone: var(--z-mitte);
  --zone-deep: var(--z-mitte-deep);
}
.page-area [data-zone="alstertal"] {
  --zone: var(--z-alstertal);
  --zone-deep: var(--z-alstertal-deep);
}
.page-area [data-zone="walddoerfer"] {
  --zone: var(--z-walddoerfer);
  --zone-deep: var(--z-walddoerfer-deep);
}
.page-area [data-zone="osten"] {
  --zone: var(--z-osten);
  --zone-deep: var(--z-osten-deep);
}

/* Das Blatt: Papier, Planraster hinter der Karte, Hamburger Kante unten */
.area-sheet {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-bottom: clamp(96px, 14vw, 180px);
  background:
    radial-gradient(1000px 760px at 82% 260px, oklch(0.935 0.04 245) 0%, transparent 70%),
    radial-gradient(760px 620px at 0% 820px, oklch(0.955 0.035 72) 0%, transparent 70%),
    var(--papier);
}
.area-sheet::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(oklch(0.45 0.05 250 / 0.08) 1px, transparent 1px),
    linear-gradient(90deg, oklch(0.45 0.05 250 / 0.08) 1px, transparent 1px),
    linear-gradient(oklch(0.45 0.05 250 / 0.04) 1px, transparent 1px),
    linear-gradient(90deg, oklch(0.45 0.05 250 / 0.04) 1px, transparent 1px);
  background-size: 168px 168px, 168px 168px, 28px 28px, 28px 28px;
  -webkit-mask-image: radial-gradient(1300px 1000px at 72% 380px, #000 0%, transparent 72%);
  mask-image: radial-gradient(1300px 1000px at 72% 380px, #000 0%, transparent 72%);
  pointer-events: none;
}
.area-sheet::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(64px, 10vw, 130px);
  background: oklch(0.84 0.024 250);
  -webkit-mask: url("/assets/svg/skyline-hamburg.svg") left bottom / auto 100% repeat-x;
  mask: url("/assets/svg/skyline-hamburg.svg") left bottom / auto 100% repeat-x;
  opacity: 0.5;
  pointer-events: none;
}
.area-atlas {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding-top: clamp(1.5rem, 0.75rem + 3vw, 3.5rem);
}

/* Kopf: Titel, Anruf, drei Eckdaten */
.page-area .area-hero {
  position: relative;
  padding: 0;
  background: none;
  overflow: visible;
}
.page-area .area-hero__title {
  max-width: 12ch;
}
.page-area .area-hero .page-hero__lead {
  max-width: 50ch;
}
.page-area .area-hero .hero__actions {
  margin-top: var(--sp-8);
}
.area-hero__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, auto));
  justify-content: start;
  margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
  border-top: 2px solid var(--ink);
}
.area-hero__facts li {
  display: grid;
  align-content: start;
  gap: 0.35rem;
  padding: 0.9rem clamp(1rem, 0.5rem + 2vw, 2.25rem) 0 0;
}
.area-hero__facts li + li {
  padding-left: clamp(1rem, 0.5rem + 2vw, 2.25rem);
  border-left: 1px solid var(--area-rule);
}
.area-hero__facts strong {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  font-stretch: 66%;
  font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.area-hero__facts span {
  color: var(--text-muted);
  font-size: var(--fs-sm);
}
@media (max-width: 459px) {
  .area-hero__facts li {
    padding-right: 0.7rem;
  }
  .area-hero__facts li + li {
    padding-left: 0.7rem;
  }
  .area-hero__facts strong {
    font-size: 1.7rem;
    white-space: nowrap;
  }
  .area-hero__facts span {
    font-size: var(--fs-xs);
  }
}
@media (max-width: 359px) {
  .area-hero__facts li {
    padding-right: 0.5rem;
  }
  .area-hero__facts li + li {
    padding-left: 0.5rem;
  }
  .area-hero__facts strong {
    font-size: 1.45rem;
  }
}

/* Karte: auf dem Blatt statt in einer Box */
.page-area .area-hero__map {
  margin-top: clamp(2.5rem, 2rem + 3vw, 4rem);
}
.page-area .area-hero__map .map {
  max-width: 520px;
  margin-inline: auto;
}
@media (min-width: 960px) {
  .area-atlas {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "hero map"
      "list map";
    column-gap: clamp(2.5rem, 5vw, 6rem);
  }
  .page-area .area-hero {
    grid-area: hero;
    padding-top: clamp(0.5rem, 3vh, 2.5rem);
  }
  .page-area .area-list {
    grid-area: list;
  }
  .page-area .area-hero__map {
    grid-area: map;
    margin-top: 0;
  }
  /* Die Karte bleibt stehen, während die Stadtteile vorbeilaufen */
  .page-area .area-hero__map .map {
    position: sticky;
    top: calc(var(--header-h) + 1.25rem);
    width: min(100%, calc((100vh - var(--header-h) - 6.5rem) / 1.4695));
    max-width: none;
  }
}

/* Zonenfarben in der Karte */
.map path[data-zone="sueden"] {
  fill: oklch(0.42 0.075 52);
}
.map path[data-zone="mitte"] {
  fill: var(--kupfer);
}
.map path[data-zone="alstertal"] {
  fill: oklch(0.44 0.075 250);
}
.map path[data-zone="walddoerfer"] {
  fill: oklch(0.36 0.05 150);
}
.map path[data-zone="osten"] {
  fill: oklch(0.5 0.09 70);
}
.map a:hover path,
.map a:focus-visible path,
.map path.is-hot {
  fill: var(--signal);
}
.world-beton .map path[data-zone="sueden"] {
  fill: oklch(0.82 0.05 52);
}
.world-beton .map path[data-zone="mitte"] {
  fill: oklch(0.76 0.09 55);
}
.world-beton .map path[data-zone="alstertal"] {
  fill: oklch(0.82 0.05 250);
}
.world-beton .map path[data-zone="walddoerfer"] {
  fill: oklch(0.82 0.045 150);
}
.world-beton .map path[data-zone="osten"] {
  fill: oklch(0.86 0.06 75);
}

/* Karte auf der Einsatzgebiet-Seite: Zonenfarben, dunkle Markierung, Kartenrand-Details */
.page-area .map svg {
  display: block;
  width: 100%;
  height: auto;
}
.page-area .map path[data-zone],
.page-area .map #st-bramfeld {
  fill: var(--zone);
  stroke: var(--papier);
  stroke-width: 2;
  stroke-linejoin: round;
  transition: fill var(--dur-2) var(--ease-out);
}
.page-area .map a:hover path[data-zone],
.page-area .map a:focus-visible path[data-zone],
.page-area .map path[data-zone].is-hot,
.page-area .map a:hover #st-bramfeld,
.page-area .map a:focus-visible #st-bramfeld,
.page-area .map #st-bramfeld.is-hot {
  fill: var(--ink);
  stroke: var(--papier);
  stroke-width: 2;
}
.page-area .map a:focus-visible path[data-zone],
.page-area .map a:focus-visible #st-bramfeld {
  stroke: var(--signal);
  stroke-width: 6;
}
/* Zone aus dem Register: ganze Zone in ihrer tiefen Farbe, Namen bleiben lesbar */
.page-area .map path[data-zone].is-zone:not(.is-hot),
.page-area .map #st-bramfeld.is-zone:not(.is-hot) {
  fill: var(--zone-deep);
}
.page-area .map text {
  fill: var(--ink);
  font-size: 23px;
  font-weight: 700;
  font-stretch: 80%;
  paint-order: stroke;
  stroke: oklch(0.975 0.005 80 / 0.9);
  stroke-width: 4px;
  stroke-linejoin: round;
  transition: fill var(--dur-2) ease-out;
}
.page-area .map .is-hot-label {
  fill: var(--papier);
  stroke: var(--ink);
  font-size: 23px;
}
.page-area .map #standort {
  fill: var(--signal);
  stroke: var(--papier);
  stroke-width: 3.5;
}
.page-area .map .standort-ring {
  stroke: var(--signal-ink);
  stroke-width: 2.5;
}
.page-area .map .map__extra {
  display: inline;
}
.page-area .map .map__zone {
  display: none;
  font-size: 36px;
  font-weight: 850;
  font-stretch: 72%;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  stroke-width: 7px;
}
.page-area .map__north path {
  fill: var(--papier);
  stroke: var(--ink);
  stroke-width: 2;
  stroke-linejoin: round;
}
.page-area .map__north .map__north-fill {
  fill: var(--ink);
}
.page-area .map__north text {
  font-size: 22px;
  font-weight: 800;
  font-stretch: 100%;
  stroke: none;
}
.page-area .map__scale rect {
  fill: var(--ink);
  stroke: var(--ink);
  stroke-width: 2;
}
.page-area .map__scale .map__scale-alt {
  fill: var(--papier);
}
.page-area .map__scale text {
  fill: var(--ink-muted);
  font-size: 19px;
  font-weight: 650;
  font-stretch: 100%;
  font-variant-numeric: tabular-nums;
  stroke: none;
}
.page-area .map__legend {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: var(--sp-3) 0 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  color: var(--ink);
  font-size: var(--fs-sm);
  font-weight: 650;
}
/* Schmale Kartenspalte neben der Liste: Namen etwas größer */
@media (min-width: 960px) and (max-width: 1199px) {
  .page-area .map text[data-for] {
    font-size: 25px;
  }
}
/* Handy: 18 Namen wären zu klein, dort stehen die fünf Zonen auf der Karte */
@media (max-width: 599px) {
  .page-area .map .map__zone {
    display: inline;
  }
  .page-area .map__north text,
  .page-area .map__scale text {
    font-size: 28px;
  }
}

/* Register: Zonen und Stadtteile auf einen Blick, führt zur Karte und zur Zeile */
.area-list__head {
  display: grid;
  gap: var(--sp-6);
  margin-bottom: var(--sp-12);
}
.area-index {
  border-top: 2px solid var(--ink);
}
.area-index__row {
  display: grid;
  gap: 0.15rem 1.5rem;
  padding-block: 0.6rem;
  border-bottom: 1px solid var(--area-rule);
}
.area-index__zone {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 44px;
  color: var(--ink);
  font-weight: 800;
  font-stretch: 82%;
  font-size: 1.15rem;
  text-decoration: none;
}
.area-index__zone:hover,
.area-index__zone.is-active {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}
.area-index__swatch,
.page-area .zone__dot {
  flex: none;
  width: 26px;
  height: 16px;
  border-radius: 0;
  background: var(--zone);
  box-shadow: inset 0 0 0 2px var(--zone-deep);
  clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
}
.area-index__places {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.35rem;
}
.area-index__places a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 0.4rem;
  color: var(--ink);
  font-weight: 560;
  text-decoration: underline;
  text-decoration-color: var(--zone-deep);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
  transition: background-color var(--dur-1) ease-out;
}
.area-index__places a:hover,
.area-index__places a.is-hot {
  background: var(--zone);
  text-decoration-color: var(--ink);
}
@media (min-width: 600px) {
  .area-index__row {
    grid-template-columns: 11rem minmax(0, 1fr);
    align-items: start;
  }
}

/* Zonen und Stadtteile: Zeilen mit Haarlinie statt Kartenraster */
.page-area .area-list {
  margin-top: clamp(4.5rem, 3rem + 5vw, 8rem);
}
.area-list__zones {
  display: grid;
  gap: clamp(3.5rem, 2.5rem + 3vw, 6rem);
}
/* html hat schon scroll-padding in Kopfhöhe, hier nur etwas Luft */
.page-area .zone {
  scroll-margin-top: 0.5rem;
}
.page-area .zone__head {
  display: grid;
  gap: var(--sp-3);
  margin: 0;
  padding: 1.1rem 0 1.4rem;
  border-top: 2px solid var(--ink);
  border-bottom: 0;
}
.page-area .zone__title {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-weight: 800;
  font-stretch: 76%;
  font-size: clamp(2rem, 1.5rem + 1.8vw, 3rem);
  line-height: 1;
  letter-spacing: -0.01em;
}
.page-area .zone__title .zone__dot {
  width: 34px;
  height: 22px;
  clip-path: polygon(7px 0, 100% 0, calc(100% - 7px) 100%, 0 100%);
}
.page-area .zone__lead {
  max-width: 58ch;
  margin: 0;
  color: var(--text-muted);
}
.page-area .zone .districts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  border-top: 1px solid var(--area-rule);
}
.page-area .district {
  position: relative;
  display: grid;
  gap: 0.6rem;
  align-content: start;
  padding: 1.5rem 1rem 1.6rem 1.35rem;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--area-rule);
  box-shadow: none;
  transform: none;
  scroll-margin-top: 0.5rem;
  transition: background-color var(--dur-3) var(--ease-out);
}
/* Zonenkante links, wird zur Markierung, wenn der Stadtteil auf der Karte leuchtet */
.page-area .district::before {
  content: "";
  position: absolute;
  top: 1.5rem;
  bottom: 1.6rem;
  left: 0;
  width: 4px;
  background: var(--zone-deep);
  transform-origin: left center;
  transition: transform var(--dur-2) var(--ease-out), background-color var(--dur-2) ease-out;
}
.page-area .district.is-current,
.page-area .district.is-hot,
.page-area .district:target {
  background: color-mix(in oklch, var(--zone) 42%, transparent);
  transform: none;
}
.page-area .district.is-current::before,
.page-area .district.is-hot::before,
.page-area .district:target::before {
  background: var(--ink);
  transform: scaleX(1.5);
}
.page-area .district h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.75rem;
  color: var(--ink);
  font-weight: 800;
  font-stretch: 78%;
  font-size: clamp(1.55rem, 1.35rem + 0.6vw, 1.85rem);
  line-height: 1.05;
}
.page-area .district.is-current h3,
.page-area .district:target h3 {
  color: var(--ink);
}
.page-area .district__home {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.85rem 0.3rem 0.55rem;
  background: var(--signal);
  color: var(--asphalt);
  font-size: var(--fs-xs);
  font-weight: 800;
  font-stretch: 100%;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
  clip-path: polygon(0 0, 100% 0, calc(100% - 7px) 100%, 0 100%);
}
.page-area .district__home::before {
  content: "";
  width: 12px;
  height: 12px;
  background: currentColor;
  -webkit-mask: url("/assets/svg/pin.svg") center / contain no-repeat;
  mask: url("/assets/svg/pin.svg") center / contain no-repeat;
}
.page-area .district__data {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 1.4rem;
  font-size: var(--fs-sm);
}
.page-area .district__data > div {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}
.page-area .district__data dt {
  color: var(--text-muted);
}
.page-area .district__data dd {
  color: var(--ink);
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}
.page-area .district p {
  max-width: 62ch;
  color: var(--text-muted);
}
.page-area .district__call {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 0.65rem;
  min-height: 48px;
  color: var(--ink);
  font-weight: 750;
  font-size: var(--fs-sm);
  text-decoration: none;
}
.page-area .district__call .icon {
  box-sizing: content-box;
  width: 16px;
  height: 16px;
  padding: 8px;
  border-radius: 50%;
  background: var(--signal);
  color: var(--asphalt);
  transition: transform var(--dur-2) var(--ease-out);
}
.page-area .district__call:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.page-area .district__call:hover .icon {
  transform: rotate(-12deg);
}
/* Breite Liste: Name und Zahlen links, Text rechts */
@media (min-width: 1200px) {
  .page-area .district {
    grid-template-columns: minmax(0, 11.5rem) minmax(0, 1fr);
    column-gap: 2rem;
    row-gap: 0.5rem;
  }
  .page-area .district h3 {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
  }
  .page-area .district__data {
    grid-column: 1;
    grid-row: 2;
    flex-direction: column;
    align-self: start;
  }
  .page-area .district p {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
  .page-area .district__call {
    grid-column: 2;
    grid-row: 3;
  }
}

/* Abschluss der Liste: derselbe Festpreis überall */
.page-area .zone--preis .zone__head {
  border-top-color: var(--signal);
  border-top-width: 4px;
}
.area-prices {
  display: grid;
  gap: 0.5rem;
}
.area-prices li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 64px;
  padding: 0.6rem 1.6rem 0.6rem 1.1rem;
  background: var(--signal);
  color: var(--asphalt);
  font-weight: 700;
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
}
.area-prices strong {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  font-stretch: 66%;
  font-size: clamp(2rem, 1.7rem + 1.2vw, 2.75rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.area-prices__night {
  margin-top: var(--sp-4);
  color: var(--ink);
  font-weight: 600;
  line-height: 1.5;
}
.area-prices__night strong {
  display: inline-block;
  margin-right: 0.6rem;
  vertical-align: middle;
  padding: 0.35rem 0.8rem 0.35rem 0.7rem;
  background: var(--papier);
  box-shadow: inset 0 0 0 1px var(--area-rule);
  color: oklch(0.46 0.13 252);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  font-stretch: 66%;
  font-size: 1.6rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.page-area .zone--preis .link-arrow {
  margin-top: var(--sp-6);
}
@media (min-width: 700px) {
  .area-prices {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .area-prices li {
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    min-height: 128px;
    padding: 1rem 1.6rem 1.1rem 1.1rem;
  }
}
.area-list .map-credit {
  max-width: 70ch;
  margin-top: clamp(3rem, 2rem + 3vw, 5rem);
}

/* Enge Handys: Kopfzeile und Seminarplan brechen sauber um */
@media (max-width: 430px) {
  .brand__sub {
    white-space: normal;
    max-width: 8.5rem;
    line-height: 1.15;
  }
  .brand__mark {
    width: 34px;
    height: 34px;
  }
  .nav__toggle {
    padding: 0 0.6rem;
  }
  .nav__toggle-label {
    display: none;
  }
}
@media (max-width: 599px) {
  .schedule li {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.15rem;
  }
  .schedule time {
    font-size: var(--fs-sm);
  }
}/* Kein seitliches Überlaufen durch Deko-Verläufe und lange Wörter */
.services,
.journal,
.academy,
.area-hero,
.cta-band,
.keyhole{
  overflow: clip;
}
@media (max-width: 599px) {
  .module__body {
    padding-left: var(--sp-6);
    padding-right: var(--sp-4);
  }
  .module summary {
    padding-inline: var(--sp-4);
    font-size: 1.05rem;
  }
  .module__body ul,
  .module__steps {
    padding-left: 0;
  }
  .module__steps {
    padding-left: 1.2em;
  }
}

/* Lange deutsche Wörter dürfen umbrechen, Grid-Kinder dürfen schrumpfen */
p,
li,
dd,
dt,
figcaption,
.audience span,
.district p {
  overflow-wrap: break-word;
}
.split > *,
.audience > li,
.districts > *,
.area-list__zones > * {
  min-width: 0;
}

@media (max-width: 480px) {
  .audience li {
    gap: var(--sp-3);
    padding: 0.6rem 0.8rem;
    font-size: 1.02rem;
  }
  .audience img {
    width: 44px;
    height: 44px;
  }
  .audience span {
    hyphens: auto;
    overflow-wrap: anywhere;
  }
}

/* ---------- Dunkle Inseln im hellen Theme ---------- */
.world-nacht {
  --bg: var(--asphalt);
  --bg-2: oklch(0.215 0.012 50);
  --bg-3: oklch(0.27 0.014 50);
  --line: oklch(0.36 0.015 50);
  --text: oklch(0.955 0.008 70);
  --text-muted: oklch(0.79 0.016 60);
  background: var(--asphalt);
  color: var(--text);
  color-scheme: dark;
}
.world-tiefblau {
  --bg: var(--tinte);
  --bg-2: var(--tinte-2);
  --bg-3: var(--tinte-3);
  --line: var(--tinte-3);
  --text: oklch(0.97 0.006 250);
  --text-muted: var(--tinte-muted);
  --signal: var(--signal);
  background: var(--tinte);
  color: var(--text);
  color-scheme: dark;
}

/* ---------- Mix: dunkle Inseln behalten ihre Werte ---------- */
.hero,
.keyhole,
.trust,
.cta-band,
.site-footer,
.actionbar {
  --bg: var(--asphalt);
  --bg-2: oklch(0.215 0.012 50);
  --bg-3: oklch(0.27 0.014 50);
  --line: oklch(0.36 0.015 50);
  --text: oklch(0.955 0.008 70);
  --text-muted: oklch(0.79 0.016 60);
  --signal-text: var(--signal);
  --focus: var(--signal);
  color: var(--text);
  color-scheme: dark;
}
.trust.world-beton {
  --bg: var(--tinte);
  --bg-2: var(--tinte-2);
  --bg-3: var(--tinte-3);
  --line: var(--tinte-3);
  --text: oklch(0.97 0.006 250);
  --text-muted: var(--tinte-muted);
  background:
    radial-gradient(80% 90% at 10% 0%, oklch(0.3 0.06 256) 0%, transparent 62%),
    var(--tinte);
}
.trust.world-beton .trust__item p {
  color: var(--tinte-muted);
}
.cta-band {
  background:
    radial-gradient(80% 120% at 12% 0%, oklch(0.42 0.095 254) 0%, transparent 62%),
    linear-gradient(115deg, oklch(0.3 0.07 256) 0%, oklch(0.22 0.05 258) 58%, oklch(0.33 0.075 254) 100%);
}
/* Footer und Aktionsleiste: Farben stehen im jeweiligen Komponentenblock */

/* Helle Sektionen zwischen den dunklen Inseln */
.prices,
.faq.world-beton {
  background: var(--papier);
}
.prices .tariff {
  background: var(--beton);
  border-left-color: var(--beton-3);
}
.prices .tariff__price::before {
  background: var(--beton-2);
}
.band--raised {
  background: var(--beton);
}
.area {
  background: var(--beton);
}

/* ---------- Runde 6 ---------- */

/* 1. Große Schrift trennt nicht */
.h-urgent,
.h-calm,
.hero__line,
.cta-band__title,
.area-hero__title,
.zone__title,
.plan__price,
.district h3 {
  hyphens: manual;
}
.h-urgent,
.hero__line,
.cta-band__title {
  overflow-wrap: break-word;
}
@media (max-width: 700px) {
  .h-urgent,
  .h-calm {
    hyphens: auto;
  }
}

/* 3. Schlüsselloch: gebündelt im Block "Schlüsselloch-Reveal" */

/* 4. Akkordeon: weiches Auf und Zu, neues Zeichen */
.faq-item summary::after,
.module summary::after {
  -webkit-mask: none;
  mask: none;
  position: relative;
  background: transparent;
  border: 2px solid currentColor;
  border-radius: 50%;
  opacity: 0.5;
  transition: transform var(--dur-3) var(--ease-out), opacity var(--dur-2) ease-out, background-color var(--dur-2) ease-out;
}
.faq-item summary::before,
.module summary::before {
  pointer-events: none;
}
.faq-item summary,
.module summary {
  position: relative;
}
.faq-item summary .marker,
.module summary .marker {
  position: absolute;
}
.faq-item summary:hover::after,
.module summary:hover::after {
  opacity: 1;
}
.faq-item[open] summary::after,
.module[open] summary::after {
  transform: rotate(135deg);
  opacity: 1;
}
.faq-item summary::after {
  content: "";
  width: 30px;
  height: 30px;
  background:
    linear-gradient(currentColor, currentColor) center / 12px 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 12px no-repeat;
}
.module summary::after {
  content: "";
  width: 28px;
  height: 28px;
  background:
    linear-gradient(currentColor, currentColor) center / 11px 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 11px no-repeat;
}
.faq-item[open] summary::after,
.module[open] summary::after {
  background:
    linear-gradient(currentColor, currentColor) center / 12px 2px no-repeat;
  transform: rotate(180deg);
}
@supports (interpolate-size: allow-keywords) {
  .module {
    interpolate-size: allow-keywords;
  }
  .module::details-content {
    block-size: 0;
    overflow: clip;
    opacity: 0;
    transition:
      block-size var(--dur-3) var(--ease-out),
      opacity var(--dur-2) ease-out,
      content-visibility var(--dur-3) allow-discrete;
  }
  .module[open]::details-content {
    block-size: auto;
    opacity: 1;
  }
  .faq-item::details-content {
    opacity: 0;
    transition:
      block-size var(--dur-3) var(--ease-out),
      opacity var(--dur-2) ease-out,
      content-visibility var(--dur-3) allow-discrete;
  }
  .faq-item[open]::details-content {
    opacity: 1;
  }
}
.faq-item,
.module {
  transition: background-color var(--dur-2) ease-out;
}
.module[open] {
  background: var(--papier);
  border-color: var(--signal-text);
}
.faq-item[open] summary {
  color: var(--signal-text);
}

/* 5. Karte: hellblaue Markierung, weiche Übergänge, neue Legende */
.map path {
  transition: fill var(--dur-3) var(--ease-out), stroke var(--dur-2) ease-out;
}
.map a:hover path,
.map a:focus-visible path,
.map path.is-hot {
  fill: var(--map-hot, oklch(0.72 0.12 245));
  stroke: oklch(0.45 0.12 250);
  stroke-width: 2.4;
}
.map text {
  transition: fill var(--dur-2) ease-out, font-size var(--dur-2) var(--ease-out);
}
.map .is-hot-label {
  fill: oklch(0.28 0.09 252);
  font-size: 23px;
}
.area__list a.is-hot,
.district.is-current {
  background: oklch(0.88 0.06 245);
  border-left-color: oklch(0.45 0.12 250);
  color: var(--tinte);
}
.area__list a {
  transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) ease-out, border-color var(--dur-2) ease-out, transform var(--dur-2) var(--ease-out);
}
.district {
  transition: background-color var(--dur-3) var(--ease-out), border-color var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out);
}
.district.is-current {
  transform: translateX(4px);
}
.map__legend {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: var(--sp-4);
  padding: 0.45rem 0.9rem 0.45rem 0.6rem;
  background: var(--papier);
  border: 1px solid var(--beton-3);
  border-radius: 999px;
  color: var(--ink-muted);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.map__legend::before {
  content: "";
  width: 22px;
  height: 22px;
  flex: none;
  margin-inline: 0;
  border-radius: 0;
  background: var(--signal);
  box-shadow: none;
  -webkit-mask: url("/assets/svg/pin.svg") center / contain no-repeat;
  mask: url("/assets/svg/pin.svg") center / contain no-repeat;
}

/* ---------- Kopfzeile neu ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  /* Deckend statt Milchglas: wie ein Schild, nicht wie ein App-Overlay */
  background: var(--papier);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-2) ease-out, box-shadow var(--dur-2) ease-out;
}
.site-header.is-scrolled {
  border-bottom-color: var(--beton-2);
  box-shadow: 0 16px 28px -26px oklch(0.2 0.02 50 / 0.7);
}
.site-header__inner {
  gap: var(--sp-4);
  min-height: var(--header-h);
  color: var(--ink);
}
.brand {
  gap: 0.7rem;
}
.brand__badge {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: none;
  background: var(--asphalt);
  border-radius: 12px;
  box-shadow: 0 8px 18px -12px oklch(0.2 0.02 50 / 0.9);
}
.brand__mark {
  width: 34px;
  height: 34px;
}
.brand__name {
  color: var(--ink);
  font-size: 1.55rem;
}
.brand__sub {
  color: var(--ink-muted);
  letter-spacing: 0.08em;
}
.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.header-wa {
  display: none;
  place-items: center;
  width: 48px;
  height: 48px;
  background: var(--beton);
  border: 1px solid var(--beton-3);
  border-radius: 12px;
  transition: background-color var(--dur-1) ease-out, transform var(--dur-1) var(--ease-out);
}
.header-wa:hover {
  background: var(--papier);
  transform: translateY(-1px);
}
.header-wa .icon {
  width: 24px;
  height: 24px;
}
.header-call {
  position: relative;
  display: none;
  align-items: center;
  gap: 0.65rem;
  min-height: 52px;
  padding: 0.4rem 1.15rem 0.4rem 0.9rem;
  background: var(--signal);
  color: var(--asphalt);
  border-radius: 12px;
  box-shadow: 0 12px 26px -16px oklch(0.6 0.19 45 / 0.95);
  transition: transform var(--dur-1) var(--ease-out), background-color var(--dur-1) ease-out;
}
.header-call:hover {
  background: var(--signal-hi);
  transform: translateY(-1px);
}
.header-call__label {
  color: oklch(0.25 0.06 45);
}
.header-call__pulse {
  position: absolute;
  left: 1.05rem;
  top: 50%;
  width: 26px;
  height: 26px;
  margin-top: -13px;
  border-radius: 50%;
  border: 2px solid var(--asphalt);
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .header-call__pulse {
    animation: pulse 3.2s var(--ease-out) 1.5s infinite;
  }
}
@keyframes pulse {
  0% { opacity: 0.55; transform: scale(0.7); }
  70% { opacity: 0; transform: scale(1.8); }
  100% { opacity: 0; transform: scale(1.8); }
}
@media (min-width: 768px) {
  .header-call {
    display: inline-flex;
  }
}
@media (min-width: 900px) {
  .header-wa {
    display: grid;
  }
}
.nav__toggle {
  gap: 0.55rem;
  background: var(--papier);
  border: 1px solid var(--beton-3);
  border-radius: 12px;
  color: var(--ink);
}
.nav__toggle[aria-expanded="true"] {
  background: var(--beton);
  border-color: var(--ink-muted);
}
.nav__burger {
  display: grid;
  gap: 4px;
  width: 20px;
}
.nav__burger span {
  display: block;
  height: 2px;
  background: currentColor;
  transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-1) ease-out;
}
.nav__toggle[aria-expanded="true"] .nav__burger span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.nav__toggle[aria-expanded="true"] .nav__burger span:nth-child(2) {
  opacity: 0;
}
.nav__toggle[aria-expanded="true"] .nav__burger span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}
.nav__link {
  color: var(--ink);
  border-bottom-color: var(--beton-2);
}
.nav__toggle-label {
  font-weight: 720;
  font-stretch: 88%;
}
@media (min-width: 360px) and (max-width: 430px) {
  .nav__toggle {
    padding: 0 0.8rem 0 0.7rem;
  }
  .nav__toggle-label {
    display: inline;
  }
}

/* Menü unter 1280 px: eine Tafel bis zum Bildschirmrand, Einträge in der schmalen Kursiv
   der Fahrzeugbeschriftung. Ohne JS greift weiter die offene Linkzeile aus dem Basisblock. */
@media (scripting: enabled) and (max-width: 1279.98px) {
  html:has(.nav__list.is-open) {
    overflow: hidden;
  }
  .nav__list {
    height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--sp-2) var(--gutter) calc(var(--sp-6) + 65px + env(safe-area-inset-bottom));
    background: var(--papier);
    border-top: 1px solid var(--beton-2);
    border-bottom: 0;
  }
  .nav__list li {
    opacity: 0;
    transform: translateY(10px);
    transition:
      opacity var(--dur-2) var(--ease-out),
      transform var(--dur-3) var(--ease-out);
  }
  .nav__list.is-open li {
    opacity: 1;
    transform: none;
  }
  .nav__list.is-open li:nth-child(2) { transition-delay: 30ms; }
  .nav__list.is-open li:nth-child(3) { transition-delay: 60ms; }
  .nav__list.is-open li:nth-child(4) { transition-delay: 90ms; }
  .nav__list.is-open li:nth-child(5) { transition-delay: 120ms; }
  .nav__list.is-open li:nth-child(6) { transition-delay: 150ms; }
  .nav__link {
    position: relative;
    justify-content: space-between;
    gap: var(--sp-4);
    min-height: 68px;
    padding-block: 0.4rem;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 880;
    font-stretch: 68%;
    font-size: clamp(2rem, 1.55rem + 2vw, 2.6rem);
    line-height: 1;
    color: var(--ink);
    border-bottom: 1px solid var(--beton-2);
  }
  .nav__link::after {
    content: "";
    flex: none;
    width: 11px;
    height: 11px;
    margin-right: 6px;
    border-top: 2.5px solid currentColor;
    border-right: 2.5px solid currentColor;
    transform: rotate(45deg);
    opacity: 0.3;
    transition:
      opacity var(--dur-1) ease-out,
      transform var(--dur-2) var(--ease-out);
  }
  .nav__link:hover::after {
    opacity: 1;
    transform: translateX(3px) rotate(45deg);
  }
  .nav__link[aria-current="page"] {
    color: var(--signal-ink);
  }
  .nav__link[aria-current="page"]::after {
    opacity: 1;
  }
  /* Aktive Seite: oranger Folienstreifen, der aus dem Rand kommt */
  .nav__link[aria-current="page"]::before {
    content: "";
    position: absolute;
    left: calc(-1 * var(--gutter));
    top: 50%;
    width: calc(var(--gutter) - 0.35rem);
    height: 34px;
    margin-top: -17px;
    background: var(--signal);
    clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
  }
  /* Hamburger Silhouette schließt die Tafel unten ab, wie im Footer */
  .nav__list::after {
    content: "";
    flex: none;
    height: 64px;
    margin: auto calc(-1 * var(--gutter)) 0;
    background: var(--beton-2);
    -webkit-mask: url("/assets/svg/skyline-hamburg.svg") left bottom / auto 64px repeat-x;
    mask: url("/assets/svg/skyline-hamburg.svg") left bottom / auto 64px repeat-x;
  }
}
@media (scripting: enabled) and (max-width: 1279.98px) and (prefers-reduced-motion: reduce) {
  .nav__list li {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
@media (scripting: enabled) and (min-width: 900px) and (max-width: 1279.98px) {
  .nav__list {
    padding-bottom: var(--sp-6);
  }
}
/* Ab Tablet: Tafel nur so hoch wie nötig, zwei Spalten, Seite dahinter abgedunkelt */
@media (scripting: enabled) and (min-width: 768px) and (max-width: 1279.98px) {
  html:has(.nav__list.is-open) {
    overflow: visible;
  }
  .nav__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, auto);
    grid-auto-flow: column;
    column-gap: var(--sp-12);
    height: auto;
    max-height: calc(100dvh - var(--header-h));
    padding-top: var(--sp-4);
    box-shadow: 0 40px 60px -40px oklch(0.2 0.02 50 / 0.55);
  }
  .nav__list::after {
    grid-row: 4;
    grid-column: 1 / -1;
    margin-top: var(--sp-8);
  }
  .site-header::after {
    content: "";
    position: absolute;
    inset: 100% 0 auto;
    z-index: -1;
    height: 100vh;
    background: oklch(0.17 0.012 50 / 0.5);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      opacity var(--dur-2) var(--ease-out),
      visibility 0s linear var(--dur-2);
  }
  .site-header:has(.nav__list.is-open)::after {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity var(--dur-2) var(--ease-out);
  }
}
@media (min-width: 1280px) {
  .nav__link {
    color: var(--ink-muted);
  }
  .nav__link:hover {
    background: transparent;
    color: var(--ink);
  }
  .nav__link::before {
    content: "";
    position: absolute;
    left: 0.7rem;
    right: 0.7rem;
    bottom: 6px;
    height: 2px;
    background: var(--signal);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--dur-2) var(--ease-out);
  }
  .nav__link:hover::before {
    transform: scaleX(1);
  }
  .nav__link[aria-current="page"] {
    color: var(--ink);
    font-weight: 700;
  }
  .nav__link[aria-current="page"]::after {
    bottom: 6px;
    height: 3px;
  }
}

/* ---------- Sanfter Seitenwechsel ---------- */
@view-transition {
  navigation: auto;
}
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) {
    animation: vt-out 200ms var(--ease-io) both;
  }
  ::view-transition-new(root) {
    animation: vt-in 320ms var(--ease-out) both;
  }
}
@keyframes vt-out {
  to {
    opacity: 0;
    transform: translateY(-8px);
  }
}
@keyframes vt-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

@media (min-width: 1280px) {
  .nav__link {
    white-space: nowrap;
  }
  .nav__list {
    gap: 0.1rem;
  }
}
@media (min-width: 1280px) and (max-width: 1439.98px) {
  .nav__link {
    padding-inline: 0.5rem;
    font-size: 0.9rem;
  }
  .header-call__label,
  .brand__sub {
    display: none;
  }
}

/* ---------- Kontaktseite ---------- */
.kontakt-hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-block: clamp(1.5rem, 1rem + 3vw, 4rem) clamp(3rem, 2rem + 4vw, 6rem);
  background:
    radial-gradient(75% 85% at 8% 0%, oklch(0.95 0.04 250) 0%, transparent 62%),
    radial-gradient(60% 70% at 95% 20%, oklch(0.95 0.04 70) 0%, transparent 60%),
    var(--papier);
}
/* Mobil steht die Ruf-Tafel direkt unter der Überschrift, der Rest folgt danach */
.kontakt-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "head" "karte" "copy";
  gap: var(--sp-8);
}
.kontakt-hero__head {
  grid-area: head;
}
.kontakt-hero__karte {
  grid-area: karte;
  filter: drop-shadow(0 28px 34px oklch(0.2 0.02 50 / 0.34));
}
.kontakt-hero__copy {
  grid-area: copy;
}
.kontakt-hero__head .breadcrumb {
  margin-bottom: var(--sp-4);
}
.kontakt-hero__title {
  max-width: 13ch;
  font-size: clamp(3.4rem, 2rem + 6.2vw, 7.4rem);
  line-height: 0.88;
}
.kontakt-hero__title-2 {
  display: block;
  margin-top: 0.22em;
  font-size: 0.5em;
  line-height: 0.98;
}
.kontakt-hero__lead {
  max-width: 44ch;
  color: var(--ink-muted);
  font-size: var(--fs-lg);
  line-height: 1.5;
}
.kontakt-hero__status {
  margin-top: var(--sp-6);
}
.kontakt-hero .tarifstatus {
  background: var(--papier);
  box-shadow: 0 16px 34px -24px oklch(0.2 0.02 50 / 0.6), 0 0 0 1px var(--hairline);
}
.kontakt-hero .tarifstatus__now {
  color: var(--ink);
}
.kontakt-hero .tarifstatus__now strong {
  color: var(--signal-text);
}
.kontakt-hero .tarifstatus__status {
  color: var(--ink-muted);
}
.kontakt-hero .tarifstatus__hand circle {
  fill: var(--ink);
  stroke: var(--papier);
}
/* Ruf-Tafel: dunkle Insel wie der Hero der Startseite, gleiche Bernstein- und Blau-Knöpfe.
   Kopf zitiert die Fahrertür: großes oranges "24" über "Stunden". */
.kontakt-karte {
  position: relative;
  display: grid;
  gap: var(--sp-6);
  padding: clamp(1.25rem, 0.8rem + 2vw, 2.25rem);
  background:
    radial-gradient(85% 70% at 100% 0%, oklch(0.36 0.075 58 / 0.7) 0%, transparent 62%),
    radial-gradient(70% 60% at 0% 100%, oklch(0.26 0.04 52 / 0.8) 0%, transparent 70%),
    var(--asphalt);
  color: var(--paper);
  border-radius: var(--radius-m);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%);
}
.kontakt-karte__kopf {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-4);
  padding-bottom: var(--sp-6);
  border-bottom: 1px solid oklch(0.95 0.02 75 / 0.14);
}
.kontakt-karte__uhr {
  display: grid;
  justify-items: center;
  padding-right: var(--sp-4);
  border-right: 1px solid oklch(0.95 0.02 75 / 0.14);
  color: var(--signal);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  font-stretch: 64%;
  font-size: 0.8rem;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.kontakt-karte__uhr span {
  font-size: 3.6rem;
  line-height: 0.86;
  letter-spacing: -0.01em;
}
.kontakt-karte__dienst {
  display: grid;
  gap: 0.35rem;
  font-weight: 700;
  font-stretch: 112%;
  font-size: clamp(1.2rem, 1rem + 0.8vw, 1.5rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.kontakt-karte__dienst span {
  color: var(--paper-muted);
  font-weight: 420;
  font-stretch: 100%;
  font-size: var(--fs-sm);
  line-height: 1.4;
  letter-spacing: 0;
}
.kontakt-karte__note {
  color: var(--paper-muted);
  font-size: var(--fs-sm);
}
.kontakt-karte__note a {
  color: var(--signal);
  white-space: nowrap;
  font-weight: 700;
  text-underline-offset: 0.2em;
}
.kontakt-karte__actions {
  display: grid;
  gap: var(--sp-3);
}
.kontakt-karte .btn-call,
.kontakt-karte .btn-wa {
  width: 100%;
}
/* Die Nummer wächst mit der Breite der Knopfreihe und passt so auch bei 320px in eine Zeile */
.kontakt-karte__actions,
.lost .lost__actions {
  container-type: inline-size;
}
.kontakt-karte .btn-call__num,
.lost .btn-call__num {
  font-size: clamp(1.25rem, 17.2cqi - 22px, 2.75rem);
}
.kontakt-karte .btn-wa__name,
.lost .btn-wa__name {
  font-size: clamp(1.3rem, 12cqi - 6px, 2.3rem);
}

/* Bernstein-Anruf außerhalb der Startseite: gleiche Gestalt wie .hero .btn-call */
.kontakt-karte .btn-call,
.lost .btn-call {
  min-height: 80px;
  padding-right: calc(var(--slant) + 1.5rem);
  color: var(--asphalt);
  filter: drop-shadow(0 12px 26px oklch(0.73 0.175 57 / 0.3));
  transition:
    filter var(--dur-2) var(--ease-out),
    transform var(--dur-1) var(--ease-out);
}
.kontakt-karte .btn-call::before,
.lost .btn-call::before {
  background:
    linear-gradient(to bottom, oklch(1 0 0 / 0.5) 0 1px, transparent 1px),
    linear-gradient(105deg, var(--bernstein-hi) 0%, var(--bernstein) 46%, var(--bernstein-lo) 100%);
  transition: filter var(--dur-2) var(--ease-out);
}
.kontakt-karte .btn-call:hover,
.lost .btn-call:hover {
  filter: drop-shadow(0 16px 34px oklch(0.81 0.155 72 / 0.42));
}
.kontakt-karte .btn-call:hover::before,
.lost .btn-call:hover::before {
  filter: brightness(1.06) saturate(1.05);
}
.kontakt-karte .btn-call__icon,
.lost .btn-call__icon {
  align-self: center;
  width: 52px;
  height: 52px;
  margin-left: 0.9rem;
  border: 0;
  border-radius: 50%;
  background: var(--asphalt);
  color: var(--bernstein-hi);
}
.kontakt-karte .btn-call__icon .icon,
.lost .btn-call__icon .icon {
  width: 26px;
  height: 26px;
}
.kontakt-karte .btn-call__label,
.lost .btn-call__label {
  color: var(--asphalt-2);
}
.btn--wa {
  background: oklch(0.27 0.014 50);
  color: oklch(0.955 0.008 70);
}
.btn--wa:hover {
  background: oklch(0.33 0.016 50);
}
.btn--wa .icon {
  color: var(--wa);
}
.kontakt-karte :focus-visible {
  outline-color: var(--signal);
}
/* Mobil läuft die Tafel von Kante zu Kante: mehr Platz für Nummer und Daumen */
@media (max-width: 599.98px) {
  .kontakt-hero__karte {
    margin-inline: calc(-1 * var(--gutter));
  }
  .kontakt-karte {
    padding: var(--sp-6) var(--gutter) var(--sp-8);
    border-radius: 0;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .kontakt-hero [data-load] {
    animation: rise-in var(--dur-3) var(--ease-out) both;
  }
  .kontakt-hero__karte[data-load] {
    animation-delay: 120ms;
  }
  .kontakt-hero__lead[data-load] {
    animation-delay: 220ms;
  }
  .kontakt-hero__status[data-load] {
    animation-delay: 300ms;
  }
}
@media (min-width: 960px) {
  .kontakt-hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "head karte" "copy karte";
    grid-template-rows: auto 1fr;
    column-gap: var(--sp-8);
    row-gap: var(--sp-8);
  }
  .kontakt-hero__karte {
    align-self: center;
  }
}
@media (min-width: 1280px) {
  .kontakt-hero__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: var(--sp-16);
  }
}

/* Alle Wege: Verzeichnis mit Linien statt Kartenraster, daneben der echte Wagen */
.kontakt-wege {
  padding-top: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
}
.kontakt-wege__grid {
  display: grid;
  gap: var(--sp-12);
}
.kontakt-wege__liste {
  container: wege / inline-size;
}
.kontakt-wege__title {
  margin-bottom: var(--sp-8);
}
.wege {
  display: grid;
  border-top: 3px solid var(--ink);
}
.weg {
  display: grid;
  grid-template-areas: "title" "text" "value";
  gap: var(--sp-2);
  padding-block: var(--sp-6);
  border-bottom: 1px solid oklch(0.2 0.012 50 / 0.16);
}
.weg__title {
  grid-area: title;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 680;
  font-stretch: 112%;
  font-size: 1.25rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.weg__title::before {
  content: "";
  flex: none;
  width: 0.75rem;
  height: 0.5rem;
  background: var(--signal);
  clip-path: polygon(25% 0, 100% 0, 75% 100%, 0 100%);
}
.weg--brass .weg__title::before {
  background: var(--messing);
}
.weg__text {
  grid-area: text;
  max-width: 46ch;
  color: var(--ink-muted);
  font-size: 0.95rem;
  line-height: 1.5;
}
.weg__adresse {
  grid-area: value;
  font-style: normal;
  font-weight: 650;
  line-height: 1.4;
}
.weg__value {
  grid-area: value;
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  min-height: 48px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  font-stretch: 66%;
  font-size: clamp(2rem, 1.6rem + 1.2vw, 2.5rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  text-decoration: none;
  overflow-wrap: normal;
}
.weg__value:hover {
  color: var(--signal-text);
}
.weg__value--text {
  font-family: var(--font);
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-size: 1.1rem;
  color: var(--stahl-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  overflow-wrap: anywhere;
}
.weg__value--text:hover {
  text-decoration-thickness: 2px;
}
.weg--brass .weg__value {
  color: var(--messing-deep);
  text-decoration: none;
}
.weg__value .icon {
  width: 1.1em;
  height: 1.1em;
  transition: transform var(--dur-2) var(--ease-out);
}
.weg__value:hover .icon {
  transform: translateX(4px);
}
.kontakt-wege__foto {
  display: grid;
  gap: var(--sp-3);
  margin: 0;
}
.kontakt-wege__foto img {
  width: 100%;
  aspect-ratio: 16 / 11;
  object-fit: cover;
  object-position: 50% 68%;
  border-radius: var(--radius-m);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%);
}
.kontakt-wege__foto figcaption {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--ink-muted);
  font-size: var(--fs-sm);
  font-weight: 560;
}
.kontakt-wege__foto figcaption::before {
  content: "";
  flex: none;
  width: 1.6rem;
  height: 3px;
  background: var(--signal);
}
/* Wert rechts neben dem Text erst, wenn die Liste selbst breit genug ist */
@container wege (min-width: 600px) {
  .weg {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "title value" "text value";
    column-gap: var(--sp-8);
    align-items: center;
  }
  .weg__value,
  .weg__adresse {
    justify-self: end;
    text-align: right;
  }
}
@media (min-width: 960px) {
  .kontakt-wege__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--sp-16);
    align-items: center;
  }
  .kontakt-wege__foto {
    grid-column: 1;
    grid-row: 1;
  }
  .kontakt-wege__foto img {
    aspect-ratio: 4 / 5;
    object-position: 50% 58%;
  }
}

/* Telefon-Checkliste: offene Konturziffern wie im Ablauf der Startseite, Linien statt Boxen */
.kontakt-tipps__head {
  display: grid;
  gap: var(--sp-4);
  margin-bottom: var(--sp-8);
}
.kontakt-tipps__intro .lead-muted {
  margin-top: 0;
}
.kontakt-tipps__intro .link-arrow {
  margin-top: var(--sp-2);
}
.tipps {
  display: grid;
}
.tipps li {
  display: grid;
  grid-template-columns: 3.2rem minmax(0, 1fr);
  align-items: baseline;
  gap: var(--sp-4);
  padding-block: var(--sp-6);
  border-top: 2px solid var(--ink);
}
.tipps .tipps__num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  font-stretch: 64%;
  font-size: 3.4rem;
  line-height: 0.8;
  color: var(--signal-text);
}
@supports (-webkit-text-stroke: 2px red) {
  .tipps .tipps__num {
    color: transparent;
    -webkit-text-stroke: 2px var(--signal-text);
  }
}
.tipps__text {
  font-size: 1.125rem;
  font-weight: 560;
  line-height: 1.4;
}
@media (min-width: 700px) {
  .tipps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--sp-8);
  }
}
@media (min-width: 960px) {
  .kontakt-tipps__head {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: var(--sp-16);
    align-items: end;
    margin-bottom: var(--sp-12);
  }
}
@media (min-width: 1100px) {
  .tipps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .tipps li {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: var(--sp-6);
    padding-top: var(--sp-8);
  }
  .tipps .tipps__num {
    font-size: 5.6rem;
  }
}

/* ---------- Karte: helle Zonenfarben als Standard, Beschriftung lesbar ---------- */
.map path {
  stroke: var(--papier);
  stroke-width: 1.6;
}
.map path[data-zone="sueden"] {
  fill: oklch(0.86 0.055 55);
}
.map path[data-zone="mitte"] {
  fill: oklch(0.82 0.105 62);
}
.map path[data-zone="alstertal"] {
  fill: oklch(0.86 0.06 240);
}
.map path[data-zone="walddoerfer"] {
  fill: oklch(0.87 0.05 158);
}
.map path[data-zone="osten"] {
  fill: oklch(0.88 0.075 88);
}
.map #st-bramfeld {
  fill: oklch(0.76 0.14 58);
}
.map a:hover path,
.map a:focus-visible path,
.map path.is-hot {
  fill: oklch(0.7 0.13 245);
  stroke: oklch(0.42 0.12 250);
  stroke-width: 2.4;
}
.map text {
  fill: oklch(0.28 0.02 60);
  font-size: 22px;
  font-weight: 700;
  paint-order: stroke;
  stroke: oklch(0.99 0.004 80);
  stroke-width: 3.5px;
  stroke-linejoin: round;
}
.map .is-hot-label {
  fill: oklch(0.25 0.1 252);
  stroke: oklch(0.99 0.004 80);
}
.map #standort {
  fill: var(--signal);
  stroke: var(--papier);
  stroke-width: 4;
}
.map .standort-ring {
  stroke: var(--signal-ink);
}
/* Orange-Flächen tragen immer dunkle Schrift */
.btn--signal,
.btn-call,
.cta-band__actions .cta-band__num,
.tipps__num,
.header-call{
  color: var(--asphalt);
}
.btn--signal .icon,
.header-call .icon {
  color: inherit;
}

/* Tarif-Status: hell, im dunklen Hero dunkel */
.tarifstatus {
  background: var(--papier);
  box-shadow: 0 14px 30px -22px oklch(0.2 0.02 50 / 0.55), 0 0 0 1px var(--hairline);
}
.tarifstatus__now {
  color: var(--ink);
}
.tarifstatus__now strong {
  color: var(--signal-text);
}
.tarifstatus__status {
  color: var(--ink-muted);
}
.tarifstatus__hand circle {
  fill: var(--ink);
  stroke: var(--papier);
}
/* Im Hero gleiches Rauchglas wie die Fakten-Liste darunter, Orange nur als Kante */
.hero .tarifstatus {
  display: grid;
  width: 100%;
  max-width: none;
  background: oklch(0.165 0.01 50 / 0.55);
  border-left: 0;
  border-radius: var(--radius-m);
  box-shadow:
    inset 0 0 0 1px oklch(0.95 0.02 75 / 0.12),
    inset 3px 0 0 var(--signal);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  backdrop-filter: blur(12px) saturate(1.2);
}
.hero .tarifstatus__now {
  color: oklch(0.96 0.008 70);
}
.hero .tarifstatus__now strong {
  color: var(--signal);
}
.hero .tarifstatus__status {
  color: oklch(0.79 0.016 60);
}
.hero .tarifstatus__hand circle {
  fill: oklch(0.96 0.008 70);
  stroke: var(--asphalt);
}

/* Zifferblatt in der hellen Preis-Sektion */
.prices .dial__face {
  fill: var(--beton);
  stroke: var(--beton-3);
}
.prices .dial__ticks--minor {
  stroke: var(--ink-muted);
}
.prices .dial__ticks--major {
  stroke: var(--ink);
}
.prices .dial__hours text {
  fill: var(--ink-muted);
}
.prices .dial__big {
  fill: var(--signal-text);
}
.prices .dial__small {
  fill: var(--ink);
}
.prices .dial__hand line {
  stroke: var(--ink);
}
.prices .dial__hand circle {
  fill: var(--ink);
  stroke: var(--beton);
}
.prices .dial__now {
  color: var(--ink);
}
.prices .dial__status {
  color: var(--ink-muted);
}

/* ---------- Videoblöcke ---------- */
.videoblock {
  position: relative;
  overflow: hidden;
  margin: 0;
  background: var(--bg-2);
}
.videoblock__video,
.videoblock video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 16 / 10;
}
.videoblock__hint {
  position: absolute;
  left: 0.9rem;
  bottom: 0.9rem;
  padding: 0.25rem 0.6rem;
  background: oklch(0.14 0.01 50 / 0.72);
  color: oklch(0.96 0.008 70);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
}
.services__video {
  display: none;
}
@media (min-width: 960px) {
  .services__video {
    display: block;
    max-width: 440px;
    margin-top: var(--sp-4);
    clip-path: polygon(0 0, 100% var(--cut), 100% 100%, 0 100%);
  }
}
.feature-row .videoblock {
  background: transparent;
}
.feature-row .videoblock video {
  aspect-ratio: 3 / 2;
}
.audience__media.videoblock video {
  aspect-ratio: 16 / 9;
}
.page-hero__media--video {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}
.page-hero__media--video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.02) brightness(1.02);
}
.page-hero__media--video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, oklch(0.975 0.005 80 / 0.86), oklch(0.975 0.005 80 / 0.94) 60%, var(--bg));
}
/* Desktop: Video beginnt erst hinter der Textspalte (Preistafel max. 42rem), damit Buttons
   und Tafel nichts verdecken. Griff und Hand liegen im Clip links, deshalb der Ausschnitt
   nach links verschoben und nur ein schmaler Übergang statt Schleier. */
@media (min-width: 900px) {
  .page-hero__media--video {
    left: calc(max(var(--gutter), (100% - var(--maxw)) / 2) + 44rem);
    clip-path: polygon(16% 0, 100% 0, 100% 100%, 0 100%);
  }
  .page-hero__media--video video {
    object-position: 26% 50%;
  }
  .page-hero__media--video::after {
    background:
      linear-gradient(to right, var(--bg) 0%, oklch(0.975 0.005 80 / 0) 20%),
      linear-gradient(to top, var(--bg), transparent 22%);
  }
}
@media (min-width: 1440px) {
  .page-hero__media--video video {
    object-position: 15% 50%;
  }
}
/* Schmaler Desktop: Textspalte enger, sonst bleibt fürs Video nur ein Streifen */
@media (min-width: 900px) and (max-width: 1199.98px) {
  .page-service .page-hero__inner > div {
    max-width: 34rem;
  }
  .page-hero__media--video {
    left: calc(var(--gutter) + 36rem);
  }
}

/* ---------- Türöffnung: Kopf ---------- */
/* Statt des Clips (lief meist als unscharfer Anzug durchs Bild, wie der aussortierte
   "geht durch die Tür"-Clip) ein Standbild daraus: Hand am Drücker. Warm-schwarzweiß,
   damit Anruf, WhatsApp und Preistafel die einzigen Farben im Kopf sind.
   Mobil lag das Motiv hinter 90 % Weiß: dort ausgeblendet, lädt dann auch nicht. */
.page-service .page-hero__media--still {
  display: none;
}
@media (min-width: 900px) {
  .page-service .page-hero__media--still {
    display: block;
  }
  .page-service .page-hero__media--still img {
    object-position: 60% 50%;
    filter: grayscale(1) sepia(0.18) contrast(1.1) brightness(1.02);
  }
}
/* Schmaler Desktop: Bild weiter nach rechts, sonst liegen Buttons und Tafel auf dem Drücker */
@media (min-width: 900px) and (max-width: 1199.98px) {
  .page-service .page-hero__media--still {
    left: 60%;
  }
}
@media (min-width: 1200px) {
  .page-service .page-hero__media--still {
    left: 50%;
  }
  .page-service .page-hero__media--still::after {
    background:
      linear-gradient(to right, var(--bg) 0%, oklch(0.975 0.005 80 / 0.55) 12%, transparent 34%),
      linear-gradient(to top, var(--bg), transparent 24%);
  }
}
@media (max-width: 599.98px) {
  .page-service .page-hero__lead {
    margin-top: var(--sp-4);
    font-size: 1.125rem;
  }
  .page-service .page-hero .hero__actions {
    margin-top: var(--sp-6);
  }
}

/* Anruf wie auf der Startseite: Bernstein mit dunklem Symbolkreis. Auf hellem Grund
   hält ein feiner dunkler Schatten die Schrägkante zusammen. */
.page-service .page-hero .hero__actions {
  align-items: stretch;
}
.page-service .page-hero .btn-call {
  min-height: 80px;
  padding-right: calc(var(--slant) + 1.5rem);
  filter:
    drop-shadow(0 1px 0 oklch(0.55 0.13 60 / 0.5))
    drop-shadow(0 14px 22px oklch(0.73 0.175 57 / 0.3));
  transition:
    filter var(--dur-2) var(--ease-out),
    transform var(--dur-1) var(--ease-out);
}
.page-service .page-hero .btn-call::before {
  background:
    linear-gradient(to bottom, oklch(1 0 0 / 0.5) 0 1px, transparent 1px),
    linear-gradient(105deg, var(--bernstein-hi) 0%, var(--bernstein) 46%, var(--bernstein-lo) 100%);
  transition: filter var(--dur-2) var(--ease-out);
}
.page-service .page-hero .btn-call:hover {
  filter:
    drop-shadow(0 1px 0 oklch(0.55 0.13 60 / 0.5))
    drop-shadow(0 18px 30px oklch(0.73 0.175 57 / 0.42));
}
.page-service .page-hero .btn-call:hover::before {
  filter: brightness(1.05) saturate(1.05);
}
.page-service .page-hero .btn-call__icon {
  align-self: center;
  width: 52px;
  height: 52px;
  margin-left: 0.9rem;
  border: 0;
  border-radius: 50%;
  background: var(--asphalt);
  color: var(--bernstein-hi);
}
.page-service .page-hero .btn-call__icon .icon {
  width: 26px;
  height: 26px;
}
.page-service .page-hero .btn-call__label {
  color: var(--asphalt-2);
}
/* Mobil steht WhatsApp zusätzlich in der Leiste unten: hier flacher, damit die Preise
   noch auf den ersten Bildschirm passen */
@media (max-width: 559.98px) {
  .page-service .page-hero .hero__actions {
    display: grid;
  }
  .page-service .page-hero .btn-call {
    width: 100%;
  }
  .page-service .page-hero .btn-wa {
    min-height: 60px;
  }
  .page-service .page-hero .btn-wa__icon {
    width: 40px;
    height: 40px;
  }
  .page-service .page-hero .btn-wa__icon .icon {
    width: 22px;
    height: 22px;
  }
  .page-service .page-hero .btn-wa__name {
    font-size: 1.6rem;
  }
}

/* Preistafel: die drei Festpreise stehen schon im Kopf und folgen live dem Tarif.
   Schwarz mit oranger Preiszeile wie die Folie am Ranger, nachts weiß mit blauen Zahlen
   wie die Nachtspalte der Tabelle darunter. */
.preistafel {
  --focus: var(--signal);
  max-width: 42rem;
  margin-top: var(--sp-6);
  overflow: hidden;
  background:
    radial-gradient(90% 150% at 100% 0%, oklch(0.32 0.06 55 / 0.6) 0%, transparent 62%),
    var(--asphalt);
  color: var(--paper);
  border-radius: var(--radius-s);
  box-shadow: 0 26px 44px -30px oklch(0.2 0.02 50 / 0.8);
}
.preistafel .tarifstatus {
  display: grid;
  grid-template-columns: 40px 1fr;
  width: 100%;
  max-width: none;
  padding: 0.8rem 1.1rem;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.preistafel .tarifstatus__ring {
  width: 40px;
  height: 40px;
}
.preistafel .tarifstatus__now {
  color: var(--paper);
}
.preistafel .tarifstatus__now strong {
  color: var(--signal);
}
.preistafel .tarifstatus__status {
  color: var(--paper-muted);
}
/* Live steht der Preis ohnehin darunter, der Statussatz wäre doppelt */
.preistafel .tarifstatus.is-live .tarifstatus__status {
  display: none;
}
.preistafel .tarifstatus__hand circle {
  fill: var(--paper);
  stroke: var(--asphalt);
}
.preistafel__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  background: var(--signal);
  color: var(--asphalt);
}
.preistafel__item {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.45rem;
  padding: 0.8rem 0.7rem 0.85rem 1.1rem;
}
.preistafel__item + .preistafel__item::before {
  content: "";
  position: absolute;
  top: 0.75rem;
  bottom: 0.75rem;
  left: 0;
  width: 2px;
  background: currentColor;
  opacity: 0.3;
  transform: skewX(-14deg);
}
.preistafel__label {
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.2;
}
.preistafel__val {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  font-stretch: 66%;
  font-size: clamp(1.45rem, 0.9rem + 2.4vw, 2.6rem);
  line-height: 0.9;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.preistafel__val[data-tariff-col="night"] {
  display: none;
}
.preistafel__val[data-tariff-col="night"].is-active {
  display: block;
}
.preistafel__val[data-tariff-col="night"].is-active + .preistafel__val {
  display: none;
}
.preistafel:has(.is-active[data-tariff-col="night"]) .preistafel__list {
  background: oklch(0.995 0.003 250);
  color: oklch(0.42 0.16 258);
}
.preistafel__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 1rem;
  padding: 0.15rem 1.1rem;
  color: var(--paper-muted);
  font-size: var(--fs-xs);
}
.preistafel__foot a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 44px;
  color: var(--signal);
  font-weight: 700;
  text-decoration: none;
}
.preistafel__foot a:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.preistafel__foot .icon {
  width: 1em;
  height: 1em;
  transform: rotate(90deg);
}
@media (max-width: 599.98px) {
  .preistafel {
    margin-top: var(--sp-4);
  }
  .preistafel .tarifstatus {
    grid-template-columns: 32px 1fr;
    padding-block: 0.6rem;
  }
  .preistafel .tarifstatus__ring {
    width: 32px;
    height: 32px;
  }
}
@media (max-width: 419.98px) {
  .preistafel__item {
    padding-inline: 0.8rem 0.5rem;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .preistafel[data-load] {
    animation: rise-in var(--dur-3) var(--ease-out) 480ms both;
  }
}
@media (prefers-reduced-motion: reduce) {
  .videoblock__hint {
    display: none;
  }
}

/* ---------- Preiszellen: beide farbig, die gültige voll orange ---------- */
.prices .tariff__price::before {
  background: oklch(0.94 0.035 62);
}
.prices .tariff__price dt {
  color: oklch(0.45 0.06 50);
}
.prices .tariff__price dd {
  color: var(--signal-text);
}
.prices .tariff__price.is-active::before {
  background: var(--signal);
}
.prices .tariff__price.is-active dd,
.prices .tariff__price.is-active dt {
  color: var(--asphalt);
}
.prices .tariff:has(.is-active) {
  border-left-color: var(--signal);
}

/* ---------- Kopfzeile: Logo kräftig, Aktionen als Paar ---------- */
.brand__badge {
  width: 48px;
  height: 48px;
  background: var(--signal);
  border-radius: 12px;
  /* flach wie ein Schild, kein Leuchtschatten */
  box-shadow: inset 0 -2px 0 oklch(0.55 0.17 42 / 0.55);
}
.brand__mark {
  width: 36px;
  height: 36px;
}
.brand__ring--day {
  stroke: var(--asphalt);
}
.brand__ring--night {
  stroke: oklch(0.32 0.05 45);
}
.brand__hole {
  fill: var(--asphalt);
}
.brand:hover .brand__badge {
  background: var(--signal-hi);
}
/* Kontakt oben rechts: eine helle Kapsel auf dem weißen Header. WhatsApp als weißer Knopf,
   Anruf als dunkle Fläche, Orange nur im Telefon-Feld (gleiche Eckform wie das Logo). */
.site-header__actions {
  gap: 4px;
}
@media (min-width: 768px) {
  .site-header__actions {
    padding: 4px;
    background: var(--beton);
    border-radius: 16px;
    box-shadow: inset 0 0 0 1px var(--beton-3);
  }
}
@media (min-width: 1280px) {
  .site-header__inner {
    gap: var(--sp-3);
  }
}
.header-wa {
  width: 48px;
  height: 48px;
  background: var(--wa);
  border: 0;
  border-radius: 12px;
  box-shadow: 0 6px 16px -8px oklch(0.6 0.16 152 / 0.7);
  transition:
    background-color var(--dur-2) var(--ease-out),
    box-shadow var(--dur-2) var(--ease-out);
}
.header-wa .icon {
  width: 25px;
  height: 25px;
  color: oklch(0.99 0 0);
  transition: color var(--dur-2) var(--ease-out);
}
.header-wa:hover {
  background: var(--papier);
  box-shadow:
    0 1px 2px oklch(0.2 0.02 50 / 0.12),
    inset 0 0 0 1px var(--hairline);
  transform: none;
}
.header-wa:hover .icon {
  color: var(--wa-ink);
}
.header-call {
  gap: 0.7rem;
  min-height: 48px;
  padding: 4px 1.15rem 4px 4px;
  background: var(--asphalt);
  color: var(--papier);
  border-radius: 12px;
  box-shadow: 0 8px 18px -12px oklch(0.2 0.02 50 / 0.75);
  transition: background-color var(--dur-2) var(--ease-out);
}
.header-call:hover {
  background: var(--asphalt-3);
  transform: none;
}
.header-call__icon {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 9px;
  background: var(--signal);
  color: var(--asphalt);
}
.header-call .header-call__icon .icon {
  width: 21px;
  height: 21px;
}
.header-call__pulse {
  inset: 0;
  left: 0;
  top: 0;
  width: auto;
  height: auto;
  margin: 0;
  border: 2px solid var(--signal);
  border-radius: inherit;
}
@media (prefers-reduced-motion: no-preference) {
  .header-call__pulse {
    animation-name: header-pulse;
  }
}
@keyframes header-pulse {
  0% { opacity: 0.7; transform: scale(1); }
  70%, 100% { opacity: 0; transform: scale(1.45); }
}
.header-call__label {
  color: var(--paper-muted);
  font-weight: 760;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.header-call__num {
  color: var(--papier);
  white-space: nowrap;
}

/* ---------- Einsatzgebiet auf der Startseite: eigener Hintergrund ---------- */
.area {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background:
    radial-gradient(70% 80% at 85% 10%, oklch(0.94 0.04 245) 0%, transparent 60%),
    radial-gradient(60% 70% at 5% 85%, oklch(0.95 0.035 70) 0%, transparent 62%),
    var(--beton);
}
.area::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(70px, 12vw, 150px);
  background: oklch(0.86 0.02 250);
  -webkit-mask: url("/assets/svg/skyline-hamburg.svg") left bottom / auto 100% repeat-x;
  mask: url("/assets/svg/skyline-hamburg.svg") left bottom / auto 100% repeat-x;
  opacity: 0.55;
  pointer-events: none;
}
.area .wrap {
  position: relative;
  z-index: 1;
}
/* Kartenblatt wie auf /einsatzgebiet: Papier mit zwei Gitterrastern, Passermarken an den Ecken */
.area__map .map {
  position: relative;
  padding: var(--sp-6) var(--sp-4) var(--sp-4);
  background:
    linear-gradient(oklch(0.55 0.08 250 / 0.13) 1px, transparent 1px) 0 0 / 120px 120px,
    linear-gradient(90deg, oklch(0.55 0.08 250 / 0.13) 1px, transparent 1px) 0 0 / 120px 120px,
    linear-gradient(oklch(0.55 0.08 250 / 0.06) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, oklch(0.55 0.08 250 / 0.06) 1px, transparent 1px) 0 0 / 24px 24px,
    var(--papier);
  border-radius: 2px;
  box-shadow: 0 30px 60px -40px oklch(0.2 0.03 250 / 0.7), 0 0 0 1px oklch(0.55 0.08 250 / 0.18);
}
.area__map::before,
.area__map::after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 22px;
  height: 22px;
  border: 0 solid oklch(0.42 0.12 250);
  pointer-events: none;
}
.area__map::before {
  top: -9px;
  left: -9px;
  border-width: 2px 0 0 2px;
}
.area__map::after {
  right: -9px;
  bottom: -9px;
  border-width: 0 2px 2px 0;
}

/* Stadtteil-Chips heben sich vom Abschnitt ab */
.area__list a {
  border-bottom-color: oklch(0.2 0.012 50 / 0.16);
  color: var(--ink);
}
.area__list a:hover,
.area__list a.is-hot {
  background: oklch(0.9 0.05 245);
  border-left-color: oklch(0.42 0.12 250);
  color: var(--tinte);
}

/* ---------- Nachttarif: weiße Zelle, blaue Zahlen ---------- */
.prices .tariff__price[data-tariff-col="night"]::before {
  background: oklch(0.995 0.003 250);
  box-shadow: inset 0 0 0 1px oklch(0.87 0.035 250);
}
.prices .tariff__price[data-tariff-col="night"] dt {
  color: oklch(0.45 0.07 254);
}
.prices .tariff__price[data-tariff-col="night"] dd {
  color: oklch(0.45 0.14 256);
}
/* Gilt gerade: gleiche Schrägkante wie Orange, blauer Rand und Schatten statt Füllung */
.prices .tariff__price.is-active[data-tariff-col="night"] {
  filter:
    drop-shadow(0 0 0.6px oklch(0.5 0.14 255))
    drop-shadow(0 0 0.6px oklch(0.5 0.14 255))
    drop-shadow(0 12px 18px oklch(0.45 0.14 256 / 0.22));
}
.prices .tariff__price.is-active[data-tariff-col="night"]::before {
  background: oklch(0.995 0.003 250);
  box-shadow: none;
}
.prices .tariff__price.is-active[data-tariff-col="night"] dd {
  color: oklch(0.42 0.16 258);
}
.prices .tariff__price.is-active[data-tariff-col="night"] dt {
  color: oklch(0.42 0.12 258);
}
.prices .tariff:has(.is-active[data-tariff-col="night"]) {
  border-left-color: oklch(0.54 0.125 250);
}

/* Hero: zweite Zeile hell statt orange */
.hero__line--hell {
  color: oklch(0.98 0.006 70);
}

/* Vertrauen: Ratgeber-Link in Signalorange (Notdienst-Stimme, Messing bleibt der Akademie) */
.trust .trust__more,
.trust .trust__more .icon {
  color: var(--signal);
}
.trust .trust__more:hover,
.trust .trust__more:hover .icon {
  color: var(--signal-hi);
}

/* ---------- Ablauf: blaue Insel, Schlüssel als Fortschritt ---------- */
.ablauf {
  /* ohne JS und bei reduzierter Bewegung ist der Schlüssel voll gefüllt */
  --p: 1;
  --bg: oklch(0.285 0.05 258);
  --bg-2: oklch(0.335 0.055 258);
  --bg-3: oklch(0.385 0.058 258);
  --line: oklch(0.44 0.045 258);
  --text: oklch(0.97 0.008 250);
  --text-muted: oklch(0.845 0.022 250);
  --signal-text: var(--signal);
  position: relative;
  isolation: isolate;
  padding-block: var(--section);
  color: var(--text);
  color-scheme: dark;
  background:
    radial-gradient(85% 65% at 86% 6%, oklch(0.4 0.075 254) 0%, transparent 62%),
    radial-gradient(70% 55% at 4% 96%, oklch(0.235 0.045 262) 0%, transparent 70%),
    var(--bg);
}
.ablauf::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(oklch(1 0 0 / 0.05) 1px, transparent 1px),
    linear-gradient(90deg, oklch(1 0 0 / 0.05) 1px, transparent 1px);
  background-size: 92px 92px;
  -webkit-mask-image: radial-gradient(130% 95% at 50% 0%, #000 0%, transparent 72%);
  mask-image: radial-gradient(130% 95% at 50% 0%, #000 0%, transparent 72%);
}
.ablauf__title {
  max-width: 14ch;
}
.ablauf__lead {
  max-width: 44ch;
  color: var(--text-muted);
  font-size: var(--fs-lg);
}
.ablauf__head {
  display: grid;
  gap: var(--sp-4);
}
@media (min-width: 900px) {
  .ablauf__head {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: end;
    gap: var(--sp-12);
    padding-bottom: var(--sp-6);
    border-bottom: 1px solid var(--line);
  }
}
/* Schmal: Messing-Leiste links an den Schritten, der Schlüssel schließt die Liste ab
   und ist voll, wenn der letzte Schritt gelesen ist. Ab 1000 px steht er mitlaufend daneben. */
.ablauf__track {
  position: relative;
  display: flex;
  flex-direction: column;
  margin-top: var(--sp-6);
}
.ablauf__key {
  position: relative;
  order: 2;
  width: min(100%, 26rem);
  margin-top: var(--sp-8);
}
.ablauf__key-svg {
  position: relative;
  width: 100%;
  height: auto;
  overflow: visible;
}
.ablauf__key-base {
  fill: oklch(0.42 0.028 258);
  stroke: oklch(0.56 0.04 258);
  stroke-width: 6;
}
.ablauf__key-fill {
  fill: var(--messing);
}
.ablauf__key-rect {
  width: 2731.1914px;
  transform: scaleX(var(--p, 0));
  transform-box: view-box;
  transform-origin: 0 0;
  transition: transform 220ms linear;
}
.ablauf__list {
  position: relative;
  display: grid;
  padding-left: 2rem;
}
/* Leiste und Füllung */
.ablauf__list::before,
.ablauf__list::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 2.5rem;
  bottom: 1.5rem;
  width: 3px;
  border-radius: 2px;
  background: var(--line);
  pointer-events: none;
}
.ablauf__list::after {
  background: var(--messing);
  transform: scaleY(var(--p, 0));
  transform-origin: 50% 0;
  transition: transform 220ms linear;
}
.ablauf__step {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-3) var(--sp-4);
  align-items: baseline;
  padding-block: var(--sp-6);
  border-top: 1px solid var(--line);
}
.ablauf__step:first-child {
  border-top: 0;
}
@media (max-width: 599px) {
  .ablauf__step {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-2);
  }
}
@media (min-width: 600px) {
  .ablauf__step {
    column-gap: clamp(1.1rem, 3.5vw, 2.5rem);
  }
}
/* genau ein Schritt ist aktiv: Zeile hell, Ziffer orange */
.ablauf__step::before {
  content: "";
  position: absolute;
  inset: 0 calc(var(--sp-4) * -1);
  z-index: -1;
  background: oklch(1 0 0 / 0.055);
  opacity: 0;
  transition: opacity var(--dur-3) var(--ease-out);
}
.ablauf__step.is-current::before {
  opacity: 1;
}
.ablauf__num {
  position: relative;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  font-stretch: 66%;
  font-size: clamp(2.3rem, 6.5vw, 3.2rem);
  line-height: 0.82;
  color: transparent;
  -webkit-text-stroke: 2px oklch(0.64 0.05 258);
  transition: color var(--dur-2) ease-out, -webkit-text-stroke-color var(--dur-2) ease-out;
}
/* Haltepunkt auf der Leiste */
.ablauf__num::before {
  content: "";
  position: absolute;
  left: calc(-2rem + 2px);
  top: calc(50% - 7px);
  width: 14px;
  height: 14px;
  border: 3px solid var(--line);
  border-radius: 50%;
  background: var(--bg);
  transition: border-color var(--dur-2) ease-out, background-color var(--dur-2) ease-out;
}
.ablauf__step.is-current .ablauf__num {
  color: var(--signal);
  -webkit-text-stroke-color: var(--signal);
}
.ablauf__step.is-current .ablauf__num::before {
  border-color: var(--messing);
  background: var(--messing);
}
.ablauf__step-title {
  margin-bottom: 0.35rem;
  font-weight: 780;
  font-stretch: 84%;
  font-size: clamp(1.25rem, 0.95rem + 1.1vw, 1.85rem);
  line-height: 1.12;
}
.ablauf__body p {
  max-width: 56ch;
  color: var(--text-muted);
}
/* Schritt 1 lässt sich gleich hier erledigen */
.ablauf__body .ablauf__reach {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--sp-6);
  margin-top: var(--sp-2);
}
.ablauf__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 48px;
  color: var(--text);
  font-weight: 760;
  font-variant-numeric: tabular-nums;
  text-decoration: underline;
  text-decoration-color: oklch(1 0 0 / 0.35);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.25em;
  transition: text-decoration-color var(--dur-2) ease-out;
}
.ablauf__link:hover {
  text-decoration-color: var(--signal);
}
.ablauf__link .icon {
  width: 1.2em;
  height: 1.2em;
  flex: none;
  color: var(--signal);
}
.ablauf__link[data-wa] .icon {
  color: var(--wa);
}
@media (min-width: 1000px) {
  .ablauf__track {
    --keyh: clamp(440px, 62vh, 660px);
    display: grid;
    grid-template-columns: calc(var(--keyh) / 2.853) minmax(0, 1fr);
    gap: clamp(var(--sp-8), 6vw, var(--sp-16));
    align-items: start;
    margin-top: var(--sp-8);
  }
  /* Schlüssel läuft mittig im Bild mit und füllt sich Schritt für Schritt */
  .ablauf__key {
    position: sticky;
    top: max(calc(var(--header-h) + 1.5rem), calc((100vh + var(--header-h) - var(--keyh)) / 2));
    order: 0;
    display: block;
    width: calc(var(--keyh) / 2.853);
    height: var(--keyh);
    margin-top: 0;
  }
  .ablauf__key-svg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--keyh);
    max-width: none;
    height: auto;
    transform: translate(-50%, -50%) rotate(90deg);
  }
  .ablauf__list {
    padding-left: 0;
  }
  .ablauf__list::before,
  .ablauf__list::after,
  .ablauf__num::before {
    display: none;
  }
  .ablauf__step {
    grid-template-columns: 6.5rem minmax(0, 1fr);
    gap: var(--sp-3) var(--sp-6);
    padding-block: var(--sp-8);
  }
  .ablauf__num {
    font-size: clamp(3.4rem, 1.6rem + 3vw, 5.2rem);
    -webkit-text-stroke-width: 2.5px;
  }
}
@media (min-width: 1200px) {
  /* Titel und Text nebeneinander, die Zeile liest sich wie ein Fahrplan */
  .ablauf__step {
    align-items: start;
  }
  .ablauf__body {
    display: grid;
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
    gap: 0 var(--sp-8);
    align-items: baseline;
    padding-top: 0.2rem;
  }
  .ablauf__body > * {
    grid-column: 2;
  }
  .ablauf__body > .ablauf__step-title {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ablauf__key-rect,
  .ablauf__list::after,
  .ablauf__step::before,
  .ablauf__num,
  .ablauf__num::before {
    transition: none;
  }
}

/* Rechtstexte der Kanzlei: Inhaltsverzeichnis, Stand-Zeile, Copyright-Logo.
   Streng auf .page-legal .legal begrenzt, damit nichts in den Rest der Seite läuft. */
.page-legal .legal__toc {
  margin-bottom: var(--sp-8);
  padding: var(--sp-6);
  background: oklch(0.2 0.012 50 / 0.035);
  border-left: 3px solid var(--signal);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
}
.page-legal .legal .legal__toc h2 {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  font-size: 0.95rem;
  font-weight: 700;
  font-stretch: 110%;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.page-legal .legal .legal__toc-list {
  display: grid;
  gap: 0.35em;
  margin-top: 0.9em;
  padding-left: 0;
  list-style: none;
  font-size: 0.97em;
  line-height: 1.45;
}
.page-legal .legal .legal__toc-list > li::before {
  content: none;
}
.page-legal .legal .legal__toc-list a {
  text-decoration-color: var(--hairline);
}
.page-legal .legal .legal__toc-list a:hover,
.page-legal .legal .legal__toc-list a:focus-visible {
  text-decoration-color: currentColor;
}
.page-legal .legal :target {
  scroll-margin-top: 6rem;
}
.page-legal .legal .legal__stand {
  margin-top: var(--sp-12);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--hairline);
  font-size: 0.85rem;
  color: var(--ink-muted);
}
.page-legal .legal .legal__copyright {
  margin-top: var(--sp-6);
}
.page-legal .legal .legal__copyright img {
  display: block;
  width: 340px;
  max-width: 100%;
  height: auto;
}
/* "Datenschutzerklärung" ist breiter als die Standard-Maxbreite der Notruf-Überschrift
   und wurde deshalb mitten im Wort umbrochen. Auf den Rechtsseiten darf die Zeile die
   volle Spalte nutzen, und wenn es doch eng wird, trennt der Browser sauber mit Bindestrich. */
.page-legal .page-hero .h-urgent {
  max-width: none;
  overflow-wrap: normal;
  hyphens: auto;
}