/* medien-partner.net – Design-System */

/* Ueberschriften: Michroma, freie Schrift (SIL Open Font License) im Stil der Hausschrift Metrostyle Extended */
@font-face { font-family: "Michroma"; src: url("../fonts/michroma-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("../fonts/instrument-sans-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("../fonts/instrument-sans-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("../fonts/instrument-sans-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  /* Farben */
  --rot: #a30000;          /* Markenfarbe aus dem Logo */
  --rot-dunkel: #7d0000;
  --nacht: #141113;        /* dunkle, filmische Flaechen */
  --nacht-2: #211c1f;
  --anthrazit: #2b2528;   /* warme dunkle Flaechen */
  --flaeche-dunkel: radial-gradient(70% 100% at 85% 0%, rgba(163,0,0,.45), transparent 60%), var(--anthrazit);
  --papier: #faf7f2;       /* warmes Weiss */
  --sand: #ebe5dd;         /* helles Grau fuer Flaechen und Linien */
  --text: #1d191b;
  --text-leise: #5f5659;
  --text-hell: #bdb3b6;
  --rot-hell: #f57070;      /* Rot fuer Schrift auf dunklem Grund, Kontrast mindestens 4,5 zu 1 */

  /* Schriften */
  --f-titel: "Michroma", "Arial", sans-serif;
  --f-text: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;

  /* Masse */
  --breite: 1180px;
  --rand: clamp(1.25rem, 4vw, 2.5rem);
  --abstand: clamp(4rem, 9vw, 7.5rem);
  --radius: 4px;
  --kopf-hoehe: 76px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--papier);
  color: var(--text);
  font-family: var(--f-text);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--f-titel); font-weight: 400; font-synthesis: none; line-height: 1.22; margin: 0 0 .7em; letter-spacing: 0; overflow-wrap: break-word; }
h1 { font-size: clamp(1.7rem, 3.1vw, 2.75rem); font-weight: 400; }
h2 { font-size: clamp(1.4rem, 2.7vw, 2.15rem); }
h3 { font-size: clamp(1rem, 1.45vw, 1.15rem); font-weight: 400; }
p { margin: 0 0 1em; }
:focus-visible { outline: 2px solid var(--rot); outline-offset: 3px; }

.huelle { width: 100%; max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sprung { position: absolute; left: 1rem; top: -4rem; background: var(--nacht); color: #fff; padding: .6rem 1rem; z-index: 100; }
.sprung:focus { top: 1rem; }

/* Kleine Ueberzeile mit roter Linie */
.dachzeile {
  display: inline-flex; align-items: center; gap: .75rem;
  font-size: .8rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--rot); margin-bottom: 1.2rem;
}
.dachzeile::before { content: ""; width: 2.25rem; height: 2px; background: currentColor; }
.dunkel .dachzeile { color: var(--rot-hell); }

.einleitung { font-size: clamp(1.1rem, 1.6vw, 1.3rem); color: var(--text-leise); max-width: 40em; }
.dunkel .einleitung { color: var(--text-hell); }

/* Knoepfe */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 48px; padding: .8rem 1.6rem;
  font: 600 1rem/1.2 var(--f-text);
  text-decoration: none; border-radius: 999px; border: 2px solid transparent;   /* Kapselform wie bei Apple */
  cursor: pointer; transition: background .25s, color .25s, border-color .25s, transform .25s, box-shadow .3s;
}
/* Hauptknopf im Liquid-Glass-Stil: klares rotes Glas mit hellem Lichtrand, Glanz an der Kante und Lichtschein unter dem Finger */
.knopf--rot {
  position: relative; isolation: isolate; color: #fff; border: 0; padding: calc(.8rem + 2px) calc(1.6rem + 2px);
  background:
    radial-gradient(110px circle at var(--lx, -300px) var(--ly, -300px), rgba(255, 255, 255, .42), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, .3) 0%, rgba(255, 255, 255, .05) 42%, rgba(255, 255, 255, 0) 56%, rgba(255, 190, 190, .14) 100%),
    rgba(150, 0, 0, .74);
  backdrop-filter: blur(14px) saturate(1.9) brightness(1.05); -webkit-backdrop-filter: blur(14px) saturate(1.9) brightness(1.05);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .22),            /* Lichtrand */
    inset 1.5px 2px 2px -1px rgba(255, 255, 255, .8),    /* Glanz oben links */
    inset -1.5px -2px 2px -1px rgba(255, 255, 255, .4),  /* Gegenlicht unten rechts */
    inset 0 -8px 14px -6px rgba(255, 200, 200, .28),
    0 0 18px rgba(255, 70, 70, .35),                     /* Leuchten */
    0 10px 26px -4px rgba(110, 0, 0, .55);
  text-shadow: 0 1px 6px rgba(0, 0, 0, .3);
}
.knopf--rot::before, .knopf--rand::before, .sozial a::before {      /* feiner Lichtkranz, oben links am hellsten */
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.25) 30%, rgba(255,255,255,0) 55%, rgba(255,190,190,.7) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
/* Glanz, der ab und zu einmal um den Rand laeuft */
@property --glanz-winkel { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.knopf--rot::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; pointer-events: none;
  background: conic-gradient(from var(--glanz-winkel), transparent 0deg, transparent 190deg, rgba(255,255,255,.08) 250deg, rgba(255,255,255,.35) 310deg, rgba(255,255,255,.8) 348deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  filter: drop-shadow(0 0 4px rgba(255,255,255,.45));
  opacity: 0;
  animation: randglanz 9s linear 1.5s infinite;
}
.kopf .knopf--rot::after { animation-delay: 4.5s; }        /* nicht gleichzeitig mit dem Knopf im Startbereich */
.handy-leiste .knopf--rot::after { animation-delay: 6s; }
@keyframes randglanz {                            /* ca. 3,5 s ein weicher Umlauf, dann Pause */
  0%        { --glanz-winkel: 0deg;   opacity: 0;   animation-timing-function: cubic-bezier(.45, .05, .55, .95); }
  12%       { opacity: .85; animation-timing-function: ease-in-out; }
  28%       { opacity: .85; animation-timing-function: ease-in-out; }
  40%       { --glanz-winkel: 360deg; opacity: 0; }
  100%      { --glanz-winkel: 360deg; opacity: 0; }
}
.knopf--rot:hover {                               /* Linse: wird leicht groesser und leuchtet staerker */
  transform: translateY(-1px) scale(1.03);
  background:
    radial-gradient(110px circle at var(--lx, -300px) var(--ly, -300px), rgba(255, 255, 255, .5), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, .34) 0%, rgba(255, 255, 255, .06) 42%, rgba(255, 255, 255, 0) 56%, rgba(255, 190, 190, .18) 100%),
    rgba(165, 0, 0, .78);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .3),
    inset 1.5px 2px 2px -1px rgba(255, 255, 255, .9),
    inset -1.5px -2px 2px -1px rgba(255, 255, 255, .5),
    inset 0 -8px 14px -6px rgba(255, 200, 200, .34),
    0 0 28px rgba(255, 80, 80, .55),
    0 14px 30px -4px rgba(110, 0, 0, .6);
}
.knopf--rot:active { transform: scale(.97); }
/* Nebenknopf: klares, farbloses Liquid Glass (gleiche Bauweise wie der rote Hauptknopf) */
.knopf--rand {
  position: relative; isolation: isolate; color: #fff; border: 0; padding: calc(.8rem + 2px) calc(1.6rem + 2px);
  background:
    radial-gradient(110px circle at var(--lx, -300px) var(--ly, -300px), rgba(255, 255, 255, .4), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, .3) 0%, rgba(255, 255, 255, .06) 45%, rgba(255, 255, 255, 0) 58%, rgba(255, 255, 255, .1) 100%),
    rgba(255, 255, 255, .1);
  backdrop-filter: blur(14px) saturate(1.8) brightness(.92); -webkit-backdrop-filter: blur(14px) saturate(1.8) brightness(.92);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .26),
    inset 1.5px 2px 2px -1px rgba(255, 255, 255, .85),
    inset -1.5px -2px 2px -1px rgba(255, 255, 255, .4),
    inset 0 -8px 14px -6px rgba(255, 255, 255, .18),
    0 10px 26px -6px rgba(0, 0, 0, .45);
  text-shadow: 0 1px 6px rgba(0, 0, 0, .35);
}
.knopf--rand:hover {
  transform: translateY(-1px) scale(1.03);
  background:
    radial-gradient(110px circle at var(--lx, -300px) var(--ly, -300px), rgba(255, 255, 255, .5), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, .36) 0%, rgba(255, 255, 255, .08) 45%, rgba(255, 255, 255, 0) 58%, rgba(255, 255, 255, .14) 100%),
    rgba(255, 255, 255, .14);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .36), inset 1.5px 2px 2px -1px #fff, inset -1.5px -2px 2px -1px rgba(255, 255, 255, .5), inset 0 -8px 14px -6px rgba(255, 255, 255, .24), 0 0 26px rgba(255, 255, 255, .22), 0 14px 30px -6px rgba(0, 0, 0, .5);
}
.knopf--rand:active { transform: scale(.97); }
.knopf .pfeil { transition: transform .25s; }
.knopf:hover .pfeil { transform: translateX(4px); }
.textlink {
  font-weight: 600; text-decoration: none; color: var(--rot);
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat;
  transition: background-size .3s; padding-bottom: 2px;
}
.textlink:hover { background-size: 100% 2px; }
.dunkel .textlink { color: #fff; }

/* Kopfbereich mit Navigation */
.kopf {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250, 247, 242, .94);
  --kopf-blur: saturate(1.4) blur(10px);
  border-bottom: 1px solid transparent; transition: border-color .3s;
}
.kopf::before {                                  /* Unschaerfe liegt auf einem eigenen Element, damit das Dropdown darin die Seite dahinter durchscheinen sieht */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  backdrop-filter: var(--kopf-blur); -webkit-backdrop-filter: var(--kopf-blur);
}
.kopf.ist-gescrollt { border-bottom-color: var(--sand); }
.kopf__innen { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; height: var(--kopf-hoehe); }
.kopf__logo img { height: 54px; width: auto; }
.nav { display: flex; align-items: center; gap: 2rem; align-self: stretch; }
.nav__liste { display: flex; align-items: stretch; align-self: stretch; gap: 1.75rem; list-style: none; margin: 0; padding: 0; }
.nav__liste > li { display: flex; align-items: center; }
.nav__liste > li > a {
  text-decoration: none; font-weight: 500; font-size: .98rem; position: relative; padding: .4rem 0;
}
.nav__liste > li > a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--rot);
  transform: scaleX(0); transform-origin: left; transition: transform .3s;
}
.nav__liste > li > a:hover::after, .nav__liste > li > a[aria-current="page"]::after, .hat-untermenue:hover > a::after, .hat-untermenue.ist-offen > a::after { transform: scaleX(1); }
.menue-knopf {
  display: none; align-items: center; gap: .55rem; min-height: 44px; padding: 0 .5rem;
  background: none; border: 0; font: 600 .95rem var(--f-text); color: var(--text); cursor: pointer;
}
.menue-knopf__striche { width: 22px; height: 12px; position: relative; }
.menue-knopf__striche::before, .menue-knopf__striche::after {
  content: ""; position: absolute; left: 0; right: 0; height: 2px; background: currentColor; transition: transform .3s, top .3s;
}
.menue-knopf__striche::before { top: 0; }
.menue-knopf__striche::after { top: 10px; }
.menue-knopf[aria-expanded="true"] .menue-knopf__striche::before { top: 5px; transform: rotate(45deg); }
.menue-knopf[aria-expanded="true"] .menue-knopf__striche::after { top: 5px; transform: rotate(-45deg); }

/* Startseite: Menueleiste liegt durchsichtig ueber dem Video */
.startseite .kopf {
  margin-bottom: calc(-1 * var(--kopf-hoehe));   /* Leiste schwebt ueber dem Startbereich */
  background: transparent; --kopf-blur: none;
  border-bottom-color: transparent; transition: background .35s, border-color .35s;
}
.startseite .kopf.ist-gescrollt, .startseite .kopf.menue-offen {
  background: rgba(20, 17, 19, .62);
  --kopf-blur: saturate(1.4) blur(14px);
  border-bottom-color: rgba(255, 255, 255, .08);
}
.startseite .nav__liste > li > a, .startseite .menue-knopf, .startseite .untermenue-knopf { color: #fff; }
.startseite .buehne--video {
  min-height: 100svh;                           /* fuellt immer den ganzen Bildschirm, auch auf grossen Monitoren */
  padding-top: calc(var(--kopf-hoehe) + clamp(3rem, 7vw, 5rem));
}

/* Dropdown unter "Leistungen": Glas-Panel, das sich von oben aufbaut */
.hat-untermenue { position: relative; display: flex; align-items: center; gap: .15rem; align-self: stretch; }   /* reicht bis zum Leistenrand, damit zwischen Menuepunkt und Panel keine Luecke entsteht */
.untermenue-knopf {
  display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--text); cursor: pointer; transition: background .25s;
}
.untermenue-knopf:hover { background: rgba(127, 127, 127, .18); }
.untermenue-knopf svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.hat-untermenue.ist-offen .untermenue-knopf svg { transform: rotate(180deg); }
.untermenue {
  position: absolute; top: calc(100% - 6px); left: -1.25rem; z-index: 70;
  width: min(540px, calc(100vw - 2rem)); margin: 0; padding: .7rem; list-style: none;
  display: grid; grid-template-columns: 1fr 1fr; gap: 3px;
  border-radius: 30px; color: #fff; isolation: isolate;
  /* Liquid Glass: klares, lichtdurchlaessiges Material mit hellem Rand und Glanz an der Kante */
  background:
    radial-gradient(60% 80% at 100% 0%, rgba(255, 70, 70, .26), transparent 70%),
    linear-gradient(135deg, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .05) 38%, rgba(255, 255, 255, .03) 62%, rgba(255, 255, 255, .13) 100%),
    rgba(34, 24, 28, .4);
  backdrop-filter: blur(18px) saturate(1.9) brightness(.52) contrast(1.05);
  -webkit-backdrop-filter: blur(18px) saturate(1.9) brightness(.52) contrast(1.05);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .22),            /* Lichtrand */
    inset 2px 3px 3px -1px rgba(255, 255, 255, .7),      /* Glanz oben links */
    inset -2px -3px 3px -1px rgba(255, 255, 255, .38),   /* Gegenlicht unten rechts */
    inset 0 -18px 30px -12px rgba(255, 255, 255, .1),
    0 2px 6px rgba(0, 0, 0, .18);
  text-shadow: 0 1px 8px rgba(0, 0, 0, .35);
  opacity: 0; visibility: hidden; transform: translateY(-10px) scale(.97); transform-origin: 20% 0;
  clip-path: inset(0 0 100% 0 round 30px);
  transition: opacity .3s ease, transform .5s cubic-bezier(.2, .8, .2, 1), clip-path .55s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .55s;
}
.untermenue::after {                                     /* Lichtschein, der der Maus folgt */
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background:
    radial-gradient(220px circle at var(--lx, 30%) var(--ly, 0%), rgba(255, 255, 255, .26), rgba(255, 255, 255, .06) 45%, transparent 70%),
    linear-gradient(115deg, rgba(255, 255, 255, .22) 0%, transparent 22%);
  mix-blend-mode: soft-light;
}
.untermenue li { opacity: 0; transform: translateY(10px); transition: opacity .25s ease, transform .25s ease; }
.untermenue a {
  position: relative; display: flex; align-items: center; gap: .85rem; padding: .8rem .95rem; border-radius: 20px;
  color: #fff; text-decoration: none; font-size: .96rem; font-weight: 500; line-height: 1.25;
  transition: background .25s, transform .3s cubic-bezier(.2, .7, .2, 1);
}
.untermenue a svg { flex: none; width: 22px; height: 22px; color: #ff8a8a; transition: transform .35s cubic-bezier(.2, .7, .2, 1), color .25s, filter .25s; }
.untermenue a:hover, .untermenue a:focus-visible {   /* Linse: kleine Glaskapsel, die leicht vergroessert */
  background: linear-gradient(135deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, .08));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3), inset 1.5px 2px 2px -1px rgba(255, 255, 255, .75), inset -1px -1.5px 2px -1px rgba(255, 255, 255, .35), 0 6px 18px rgba(0, 0, 0, .25);
  transform: scale(1.03);
}
.untermenue a:hover svg, .untermenue a:focus-visible svg { transform: scale(1.12); color: #fff; filter: drop-shadow(0 0 6px rgba(255, 110, 110, .8)); }
.untermenue a:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.untermenue .untermenue__alle { grid-column: 1 / -1; margin-top: .35rem; padding-top: .45rem; border-top: 1px solid rgba(255, 255, 255, .16); }
.untermenue__alle a { justify-content: space-between; font-size: .9rem; color: #ffd0d0; }
.untermenue__alle b { font-weight: 400; transition: transform .3s; }
.untermenue__alle a:hover b { transform: translateX(5px); }
.hat-untermenue.ist-offen > .untermenue,
.hat-untermenue:focus-within > .untermenue {
  opacity: 1; visibility: visible; transform: none; clip-path: inset(0 0 0 0 round 30px);
  transition: opacity .3s ease, transform .5s cubic-bezier(.2, .8, .2, 1), clip-path .55s cubic-bezier(.2, .8, .2, 1), visibility 0s;
}
.hat-untermenue.ist-offen > .untermenue li,
.hat-untermenue:focus-within > .untermenue li { opacity: 1; transform: none; transition-delay: calc(var(--i) * 45ms + 140ms); }
@media (hover: hover) and (min-width: 761px) {
  .untermenue {                                   /* Schliessen startet erst nach 1 Sekunde */
    transition: opacity .35s ease 1s, transform .5s cubic-bezier(.2, .8, .2, 1) 1s, clip-path .55s cubic-bezier(.2, .8, .2, 1) 1s, visibility 0s linear 1.55s;
  }
  .untermenue li { transition: opacity .25s ease 1s, transform .25s ease 1s; }
  .hat-untermenue.sofort > .untermenue { transition-delay: 0s, 0s, 0s, .55s !important; }   /* Klick oder Escape schliessen ohne Wartezeit */
  .hat-untermenue.sofort > .untermenue li { transition-delay: 0s !important; }
  .hat-untermenue:hover > .untermenue {
    opacity: 1; visibility: visible; transform: none; clip-path: inset(0 0 0 0 round 30px);
    transition: opacity .3s ease, transform .5s cubic-bezier(.2, .8, .2, 1), clip-path .55s cubic-bezier(.2, .8, .2, 1), visibility 0s;
  }
  .hat-untermenue:hover > .untermenue li { opacity: 1; transform: none; transition-delay: calc(var(--i) * 45ms + 140ms); }
  .hat-untermenue:hover .untermenue-knopf svg { transform: rotate(180deg); }
}
.leistung { scroll-margin-top: calc(var(--kopf-hoehe) + 1.5rem); }

/* Abschnitte */
.abschnitt { padding: var(--abstand) 0; }
.abschnitt--sand { background: var(--sand); }
.abschnitt--folge { padding-top: 0; }   /* folgt direkt auf einen hellen Abschnitt, der Abstand kommt von dessen Unterkante */
.dunkel { background: var(--flaeche-dunkel); color: #f3eeee; }
.abschnitt__kopf { max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.abschnitt__kopf--zeile { max-width: none; display: flex; align-items: end; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.abschnitt__kopf--zeile > div { max-width: 46rem; }

/* Startbuehne (Hero) */
.buehne { position: relative; overflow: hidden; padding: clamp(4rem, 9vw, 7rem) 0 clamp(4rem, 8vw, 6.5rem); }
.buehne h1 { max-width: 19em; font-size: clamp(1.8rem, 3.4vw, 3rem); text-wrap: balance; }
.buehne__knoepfe { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.25rem; }

/* Startbereich mit Video-Hintergrund */
.buehne--video {
  display: flex; align-items: center;
  min-height: min(calc(100svh - var(--kopf-hoehe)), 860px);
  background:
    radial-gradient(70% 90% at 80% 20%, rgba(163,0,0,.45), transparent 65%),
    linear-gradient(160deg, #2b2326, #141113 70%);
}
.buehne__video { position: absolute; inset: 0; overflow: hidden; background: #141113 url("../img/video-standbild.jpg") center / cover no-repeat; }  /* Standbild, bis das Video laeuft */
.buehne__video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s; }
.buehne__video.hat-video video { opacity: 1; }
.buehne__video::after {             /* dunkle Schicht, damit der Text lesbar bleibt */
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(55% 85% at 88% 8%, rgba(163,0,0,.55), transparent 65%),   /* Rot-Spot oben rechts wie auf den anderen Seiten */
    linear-gradient(90deg, rgba(20,17,19,.93) 0%, rgba(20,17,19,.82) 42%, rgba(20,17,19,.4) 72%, rgba(20,17,19,.28) 100%),
    linear-gradient(0deg, rgba(20,17,19,.85) 0%, transparent 35%),
    linear-gradient(180deg, rgba(20,17,19,.55) 0%, transparent 22%);   /* Menue oben bleibt lesbar */
}
.buehne__inhalt { position: relative; z-index: 1; text-shadow: 0 1px 14px rgba(0,0,0,.45); }
.buehne__inhalt .knopf { text-shadow: none; }
.buehne__drei {
  display: block; margin-top: .55em;
  font-size: .56em; letter-spacing: .04em; color: var(--rot-hell);
}
.video-pause {                                    /* nur das Pausezeichen, rechts unten, mittig auf der Linie der Kanal-Knoepfe */
  position: fixed; z-index: 55; right: 1rem; bottom: 1.4rem; width: 46px; height: 46px;
  display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer;
  color: rgba(255, 255, 255, .72); filter: drop-shadow(0 1px 5px rgba(0, 0, 0, .55));
  transition: color .25s, transform .3s cubic-bezier(.2, .7, .2, 1), opacity .4s;
}
.video-pause[hidden] { display: none; }
.video-pause.ausserhalb { opacity: 0; pointer-events: none; }   /* nur sichtbar, solange das Video im Bild ist */
.video-pause:hover { color: #fff; transform: scale(1.18); }
.video-pause:active { transform: scale(.92); }
.video-pause:focus-visible { outline: 2px solid #fff; outline-offset: 0; }
.video-pause svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.video-pause .symbol-play { display: none; fill: currentColor; stroke-width: 1.5; }
.video-pause[aria-pressed="true"] .symbol-pause { display: none; }
.video-pause[aria-pressed="true"] .symbol-play { display: block; }
@media (max-width: 1320px) { .video-pause { right: .4rem; width: 40px; height: 40px; } }
.buehne__fakten { display: none; /* VORERST AUSGEBLENDET (Bis 6K, Live, Ein Team): zum Zurueckholen "none" durch "flex" ersetzen und die beiden Zeilen ".startseite .buehne__fakten { display: none; }" weiter unten loeschen */ gap: 2.5rem; margin-top: 3rem; max-width: 34rem; padding-top: 1.75rem; border-top: 1px solid rgba(255,255,255,.12); list-style: none; padding-left: 0; }
.buehne__fakten li { font-size: .92rem; color: var(--text-hell); }
.buehne__fakten strong { display: block; font-family: var(--f-titel); font-size: 1.1rem; color: #fff; font-weight: 400; margin-bottom: .2rem; }
.seitenkopf { padding: clamp(3.5rem, 8vw, 6rem) 0 clamp(3rem, 6vw, 4.5rem); }
.seitenkopf h1 { font-size: clamp(1.7rem, 3.6vw, 2.9rem); max-width: 18em; }

/* Platzhalter fuer Bilder */
.ph {
  position: relative; display: grid; place-items: center; overflow: hidden; width: 100%;
  border-radius: var(--radius);
  background:
    radial-gradient(120% 90% at 85% 10%, rgba(163,0,0,.55), transparent 60%),
    linear-gradient(160deg, #2b2326, #141113 70%);
  color: rgba(255,255,255,.9);
}
.ph::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 36px 36px;
}
.ph svg { position: relative; width: clamp(40px, 12%, 72px); height: auto; }
.ph--hell { background: radial-gradient(120% 90% at 85% 10%, rgba(163,0,0,.22), transparent 60%), linear-gradient(160deg, #e2dad1, #d3c9bf); color: var(--rot); }
.ph--hell::before { background-image: linear-gradient(rgba(0,0,0,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,.04) 1px, transparent 1px); }
.ph--rot { background: linear-gradient(160deg, var(--rot), #5c0000); }
.ph--foto { display: block; object-fit: cover; background: var(--anthrazit); }   /* echtes Foto statt Platzhalter, gleiche Groessenregeln */
.ph--16x9 { aspect-ratio: 16 / 9; }
.ph--4x3 { aspect-ratio: 4 / 3; }
.ph--4x5 { aspect-ratio: 4 / 5; }
.ph--1x1 { aspect-ratio: 1; }
.ph--3x2 { aspect-ratio: 3 / 2; }

/* Kundenlogos in einer Linie, unten im Startbereich (weisse Fassungen) */
@keyframes kunden-rein { from { opacity: 0; } to { opacity: 1; } }
.kunden-zeile .huelle { animation: kunden-rein 1.1s ease .9s both; }   /* blendet von allein ein, unabhaengig vom Scrollen */
@media (prefers-reduced-motion: reduce) { .kunden-zeile .huelle { animation: none; } }
.kunden-zeile { position: absolute; left: 0; right: 0; bottom: clamp(1.25rem, 3.5vh, 2.5rem); z-index: 1; }
.kunden__titel { font-family: var(--f-text); font-size: .76rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; text-align: center; color: rgba(255, 255, 255, .75); margin: 0 0 clamp(.9rem, 2vh, 1.4rem); text-shadow: 0 1px 8px rgba(0, 0, 0, .5); }
.kunden__liste { --kh: clamp(12px, 2.8vw, 34px); list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 16px; }
.kunden__liste li { flex: none; display: flex; align-items: center; }
.kunden__liste img { height: calc(var(--kh) * var(--m, 1)); width: auto; max-width: none; opacity: .85; filter: drop-shadow(0 1px 6px rgba(0, 0, 0, .45)); transition: opacity .3s, transform .4s cubic-bezier(.2, .7, .2, 1); }
.kunden__liste li:hover img { opacity: 1; transform: scale(1.06); }
.kunden__liste--kopie { display: none; }
.startseite .buehne--video { padding-bottom: 9rem; }              /* Platz fuer die Logo-Zeile */
@keyframes kunden-lauf { to { transform: translateX(-50%); } }
@media (min-width: 1001px) and (max-height: 780px) {   /* flache Bildschirme: Kennzahlen weglassen, damit die Logos im ersten Bild bleiben */
  .startseite .buehne__fakten { display: none; }
  .startseite .buehne--video { padding-bottom: 7rem; }
}
@media (max-width: 1000px) {                  /* schmale Bildschirme: die Zeile laeuft langsam durch, damit alle Logos in einer Linie bleiben */
  .kunden__spur { display: flex; width: max-content; animation: kunden-lauf 40s linear infinite; }
  .kunden__spur:hover { animation-play-state: paused; }
  .kunden__liste { --kh: 25px; flex: none; gap: 44px; padding-right: 44px; justify-content: flex-start; }
  .kunden__liste--kopie { display: flex; }
  .kunden-zeile .huelle { max-width: none; padding: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
  .kunden__titel { padding: 0 var(--rand); }
}
@media (max-width: 1000px) and (prefers-reduced-motion: reduce) {
  .kunden__spur { animation: none; width: auto; overflow-x: auto; }
  .kunden__liste--kopie { display: none; }
  .kunden-zeile .huelle { overflow: visible; -webkit-mask-image: none; mask-image: none; padding: 0 var(--rand); }
}

/* Leistungskacheln: Foto oben (zwei Drittel), Text darunter auf hellem Grund */
.kacheln { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(.75rem, 1.4vw, 1.1rem); }
.kachel {
  position: relative; display: grid; grid-template-rows: minmax(0, 2fr) minmax(min-content, 1fr);
  min-height: clamp(360px, 31vw, 420px);
  border-radius: 22px; overflow: hidden; color: var(--text); text-decoration: none; background: #fff;
  border: 1px solid #e6dfd6; box-shadow: 0 16px 36px -26px rgba(40, 10, 10, .45);
  transition: transform .45s cubic-bezier(.2, .7, .2, 1), box-shadow .45s, border-color .3s;
}
.kachel__rahmen { display: block; position: relative; overflow: hidden; min-height: 0; background: var(--anthrazit); }
.kachel__bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); transition: transform 1s cubic-bezier(.2, .7, .2, 1); }
.kachel__rahmen::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 17, 19, .38) 0%, rgba(20, 17, 19, 0) 38%); pointer-events: none; }   /* nur oben etwas dunkler, damit Symbol und Nummer lesbar bleiben */
.kachel__kopf { position: absolute; top: clamp(.8rem, 1.4vw, 1.1rem); left: clamp(1rem, 1.6vw, 1.3rem); right: clamp(1rem, 1.6vw, 1.3rem); display: flex; align-items: center; justify-content: space-between; z-index: 1; }
.kachel__chip {                                /* kleines Glas-Symbol */
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: #fff;
  background: linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, .05)), rgba(34, 24, 28, .5);
  backdrop-filter: blur(12px) saturate(1.7) brightness(.85); -webkit-backdrop-filter: blur(12px) saturate(1.7) brightness(.85);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24), inset 1.5px 2px 2px -1px rgba(255, 255, 255, .8), inset -1.5px -2px 2px -1px rgba(255, 255, 255, .35);
}
.kachel__chip svg { width: 20px; height: 20px; }
.kachel__nr { font-family: var(--f-titel); font-size: .78rem; color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, .55); }
.kachel__text { display: flex; flex-direction: column; justify-content: center; gap: .3rem; padding: clamp(.9rem, 1.5vw, 1.2rem) clamp(1rem, 1.6vw, 1.3rem) clamp(1rem, 1.6vw, 1.3rem); }
.kachel h3 { font-size: clamp(.95rem, 1.25vw, 1.08rem); line-height: 1.3; margin: 0; color: var(--text); }
.kachel p { margin: 0; color: var(--text-leise); font-size: .92rem; line-height: 1.5; }
.kachel::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--rot);
  transform: scaleX(0); transform-origin: left; transition: transform .45s;
}
.kachel:hover { transform: translateY(-4px); border-color: #d9cfc4; box-shadow: 0 26px 46px -24px rgba(40, 10, 10, .55); }
.kachel:hover .kachel__bild { transform: scale(1.07); }
.kachel:hover::after { transform: scaleX(1); }
.kachel:focus-visible { outline: 2px solid var(--rot); outline-offset: 3px; }

/* Zwei Zielgruppen: im Stil der Leistungskacheln, Foto oben, Text darunter auf hellem Grund */
.zwei { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(.75rem, 1.4vw, 1.1rem); }
.zielgruppe {
  position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 22px;
  background: #fff; color: var(--text); border: 1px solid #e6dfd6; box-shadow: 0 16px 36px -26px rgba(40, 10, 10, .45);
  transition: transform .45s cubic-bezier(.2, .7, .2, 1), box-shadow .45s, border-color .3s;
}
.zielgruppe::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--rot); transform: scaleX(0); transform-origin: left; transition: transform .45s; }
.zielgruppe:hover { transform: translateY(-4px); border-color: #d9cfc4; box-shadow: 0 26px 46px -24px rgba(40, 10, 10, .55); }
.zielgruppe:hover::after { transform: scaleX(1); }
.zielgruppe__bild { position: relative; overflow: hidden; background: var(--anthrazit); }
.zielgruppe__bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 17, 19, .38) 0%, rgba(20, 17, 19, 0) 38%); pointer-events: none; }
.zielgruppe__bild .kachel__chip { position: absolute; top: clamp(.8rem, 1.4vw, 1.1rem); left: clamp(1rem, 1.6vw, 1.3rem); z-index: 1; }
.zielgruppe .ph { border-radius: 0; transition: transform 1s cubic-bezier(.2, .7, .2, 1); }
.zielgruppe:hover .ph { transform: scale(1.04); }
.zielgruppe__text { padding: clamp(1.1rem, 2vw, 1.6rem) clamp(1rem, 1.6vw, 1.3rem) clamp(1.2rem, 2vw, 1.6rem); display: flex; flex-direction: column; flex: 1; }
.zielgruppe__text h3 { font-size: clamp(.95rem, 1.25vw, 1.08rem); line-height: 1.3; margin: 0 0 .4rem; color: var(--text); }
.zielgruppe__text p { color: var(--text-leise); font-size: .92rem; line-height: 1.5; margin: 0 0 1rem; }
.liste-strich { list-style: none; padding: 0; margin: 0 0 1.5rem; columns: 2; column-gap: 1.5rem; }   /* gleiche Liste wie auf der Leistungen-Seite: roter Strich statt Rahmen */
.liste-strich li { position: relative; break-inside: avoid; padding: .3rem 0 .3rem 1.2rem; font-size: .92rem; color: var(--text); }
.liste-strich li::before { content: ""; position: absolute; left: 0; top: .95rem; width: .7rem; height: 2px; background: var(--rot); }
.zielgruppe .textlink { color: var(--rot); }
.zielgruppe__text .textlink { margin-top: auto; align-self: flex-start; }

/* Arbeitsproben und Galerie: gleiche Kacheln wie die Leistungen (Klasse "kacheln" im Gitter) */
figure { margin: 0; }
.kachel--probe { cursor: default; }
.kachel--probe .kachel__chip { margin-left: 0; }

/* Video-Kachel: Abspiel-Knopf in der Mitte des Fotos, das Video wird erst nach Klick geladen */
.kachel__abspielen { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; width: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; }
.kachel__play {
  display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%; color: #fff;
  background: linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, .05)), rgba(34, 24, 28, .5);
  backdrop-filter: blur(14px) saturate(1.7) brightness(.85); -webkit-backdrop-filter: blur(14px) saturate(1.7) brightness(.85);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28), inset 1.5px 2px 2px -1px rgba(255, 255, 255, .8), inset -1.5px -2px 2px -1px rgba(255, 255, 255, .35), 0 10px 26px rgba(0, 0, 0, .35);
  transition: transform .35s cubic-bezier(.2, .7, .2, 1);
}
.kachel__play svg { width: 26px; height: 26px; fill: currentColor; margin-left: 3px; }
.kachel__abspielen:hover .kachel__play, .kachel__abspielen:focus-visible .kachel__play { transform: scale(1.12); }
.kachel__abspielen:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }

/* Filmwand: echte Filme mit Vorschaubild, Titel darunter. Das Video laedt erst nach Klick. */
.filter { display: flex; flex-wrap: wrap; gap: 0 1.75rem; margin: 0 0 clamp(1.5rem, 3vw, 2.25rem); padding: 0; list-style: none; border-bottom: 1px solid var(--sand); }
.filter[hidden] { display: none; }
.filter button { margin: 0 0 -1px; padding: .75rem 0; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--text-leise); font: inherit; font-weight: 600; cursor: pointer; transition: color .25s, border-color .25s; }
.filter button:hover { color: var(--text); }
.filter button[aria-pressed="true"] { color: var(--text); border-bottom-color: var(--rot); }
.filter button:focus-visible { outline: 2px solid var(--rot); outline-offset: 4px; border-radius: 4px; }
.filmwand { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.75rem, 3.4vw, 2.75rem) clamp(1rem, 2vw, 1.6rem); }
.filmwand--drei { grid-template-columns: repeat(3, 1fr); }
.film[hidden] { display: none; }
.film__bild { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 18px; background: var(--anthrazit); box-shadow: 0 16px 36px -26px rgba(40, 10, 10, .55); }
.film__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.2, .7, .2, 1); }
.film__bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(20, 17, 19, .5) 0%, rgba(20, 17, 19, 0) 42%); pointer-events: none; }
.film__bild::before { content: ""; position: absolute; left: 0; bottom: 0; z-index: 3; height: 3px; width: 100%; background: var(--rot); transform: scaleX(0); transform-origin: left; transition: transform .45s; }
.film:hover .film__bild img { transform: scale(1.05); }
.film:hover .film__bild::before { transform: scaleX(1); }
.film__zahl { position: absolute; left: 1rem; bottom: .8rem; z-index: 1; color: #fff; font-size: .82rem; font-weight: 600; letter-spacing: .02em; text-shadow: 0 1px 8px rgba(0, 0, 0, .7); pointer-events: none; }
.film__text { padding: .95rem .15rem 0; }
.film h3 { margin: 0 0 .2rem; font-size: clamp(1rem, 1.4vw, 1.15rem); line-height: 1.3; color: var(--text); }
.film p { margin: 0; color: var(--text-leise); font-size: .92rem; line-height: 1.45; }
@media (max-width: 1000px) { .filmwand--drei { grid-template-columns: repeat(2, 1fr); } .filmwand--drei .film:nth-child(3) { display: none; } }
@media (max-width: 760px) {
  .filmwand, .filmwand--drei { grid-template-columns: 1fr; gap: 1.5rem; }
  .filmwand--drei .film:nth-child(3) { display: block; }
  .film__bild { border-radius: 14px; }
  .film__zahl { left: .8rem; bottom: .65rem; }
  .kachel__play { width: 58px; height: 58px; }
  .filter { flex-wrap: nowrap; overflow-x: auto; gap: 0 1.4rem; margin-inline: calc(-1 * var(--rand)); padding-inline: var(--rand); scrollbar-width: none; }
  .filter::-webkit-scrollbar { display: none; }
  .filter li { flex: none; }
}

/* Fotowand: Beispielfotos im Raster, Art des Fotos als kleine Unterschrift */
.fotowand { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(.75rem, 1.4vw, 1.1rem); }
.foto { position: relative; overflow: hidden; border-radius: 18px; background: var(--anthrazit); aspect-ratio: 3 / 2; box-shadow: 0 16px 36px -26px rgba(40, 10, 10, .55); }
.foto img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.2, .7, .2, 1); }
.foto:hover img { transform: scale(1.05); }
.foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(20, 17, 19, .5) 0%, rgba(20, 17, 19, 0) 38%); pointer-events: none; }
.foto figcaption { position: absolute; left: 1rem; bottom: .8rem; z-index: 1; color: #fff; font-size: .82rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; text-shadow: 0 1px 8px rgba(0, 0, 0, .7); }
.fotowand--fuenf .foto:first-child { grid-column: span 2; aspect-ratio: auto; }
/* bei fuenf Bildern: das erste breit, damit keine Luecke bleibt */
/* Reels: Standbilder im Hochformat, Klick oeffnet die Reels */
.reelwand { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(.75rem, 1.4vw, 1.1rem); }
.reel { position: relative; overflow: hidden; border-radius: 18px; aspect-ratio: 9 / 16; background: var(--anthrazit); box-shadow: 0 16px 36px -26px rgba(40, 10, 10, .55); }
.reel img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.2, .7, .2, 1); }
.reel:hover img { transform: scale(1.05); }
.reel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(20, 17, 19, .35) 0%, rgba(20, 17, 19, 0) 40%); pointer-events: none; }
.film__bild--hochkant img { width: calc((100% - 4px) / 3); }
.film__bild--hochkant img:nth-of-type(2) { left: calc((100% - 4px) / 3 + 2px); }
.film__bild--hochkant img:nth-of-type(3) { left: calc((100% - 4px) / 3 * 2 + 4px); }
@media (max-width: 1000px) { .reelwand { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .reelwand { gap: 2px; margin-inline: calc(-1 * var(--rand)); } .reel { border-radius: 0; box-shadow: none; } }
.foto-gruppe { margin: clamp(2.5rem, 5vw, 4rem) 0 1.25rem; font-size: clamp(1.1rem, 1.8vw, 1.35rem); }
.fotowand + p { margin-top: 1.25rem; }
@media (max-width: 1000px) { .fotowand { grid-template-columns: repeat(2, 1fr); } .fotowand--fuenf .foto:first-child { aspect-ratio: 3 / 2; } }
@media (max-width: 760px) {
  .fotowand { gap: 2px; margin-inline: calc(-1 * var(--rand)); }
  .foto { border-radius: 0; box-shadow: none; }
  .foto figcaption { left: .7rem; bottom: .55rem; font-size: .72rem; }
}

/* Fenster fuer eingebettete Videos (Glas-Stil) */
.video-fenster { padding: 0; border: 0; background: transparent; color: #fff; max-width: none; max-height: none; width: 100%; height: 100%; overflow: auto; }
.video-fenster:not([open]) { display: none; }
.video-fenster::backdrop { background: rgba(14, 10, 12, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.video-fenster__huelle { min-height: 100%; display: grid; place-items: center; padding: 1rem; }
.video-fenster__karte {
  position: relative; width: min(420px, 100%); padding: 1.1rem; border-radius: 30px; text-shadow: 0 1px 8px rgba(0, 0, 0, .35);
  background: radial-gradient(60% 80% at 100% 0%, rgba(255, 70, 70, .26), transparent 70%), linear-gradient(135deg, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .05) 38%, rgba(255, 255, 255, .03) 62%, rgba(255, 255, 255, .13) 100%), rgba(34, 24, 28, .72);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), inset 2px 3px 3px -1px rgba(255, 255, 255, .7), inset -2px -3px 3px -1px rgba(255, 255, 255, .38), 0 30px 70px -20px rgba(0, 0, 0, .7);
}
.video-fenster__zu { position: absolute; top: .7rem; right: .7rem; z-index: 2; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; color: #fff; cursor: pointer; background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); }
.video-fenster__zu:hover { background: rgba(255, 255, 255, .26); }
.video-fenster__zu svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; fill: none; }
.video-fenster h2 { font-family: var(--f-titel); font-weight: 400; font-size: 1rem; margin: .2rem 3rem .8rem 0; color: #fff; }
.video-fenster p { margin: 0 0 1rem; font-size: .92rem; line-height: 1.5; color: #e9e1e3; }
.video-fenster a { color: #ffd0d0; }
.video-fenster__rahmen { border-radius: 20px; overflow: hidden; background: #000; height: min(62vh, 600px); }
.video-fenster__rahmen iframe { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
.video-fenster__fuss { margin: .8rem 0 0; font-size: .85rem; }
.video-fenster .knopf { margin-top: .25rem; }
.video-fenster__wahl { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .8rem; }
.video-fenster__wahl button { font: inherit; font-size: .88rem; color: #fff; cursor: pointer; padding: .4rem 1rem; border: 0; border-radius: 16px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); transition: background .25s; }
.video-fenster__wahl button:hover { background: rgba(255, 255, 255, .2); }
.video-fenster__wahl button[aria-pressed="true"] { background: linear-gradient(135deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, .1)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45), inset 1.5px 2px 2px -1px rgba(255, 255, 255, .75); }
.video-fenster__wahl button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Drei Gruende */
.gruende { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 4vw, 3.5rem); counter-reset: grund; }
.grund { border-top: 2px solid var(--text); padding-top: 1.5rem; }
.dunkel .grund { border-top-color: rgba(255,255,255,.85); }
.grund h3 { display: flex; gap: .75rem; align-items: baseline; }
.grund h3::before { counter-increment: grund; content: "0" counter(grund); font-size: .75rem; color: var(--rot); }
.dunkel .grund h3::before { color: var(--rot-hell); }
.grund p { color: var(--text-leise); margin: 0; }
.dunkel .grund p { color: var(--text-hell); }

/* Team */
.team { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); }
.person { text-align: left; }
.person__bild { width: 100%; max-width: 220px; aspect-ratio: 1; border-radius: 50%; overflow: hidden; margin-bottom: 1.5rem; background: var(--sand); }
.person__bild img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); transition: transform .5s; }
.person:hover .person__bild img { transform: scale(1.04); }
.person__bild .ph { height: 100%; border-radius: 50%; }
.person h3 { margin-bottom: .25rem; }
.person__rolle { color: var(--rot); font-weight: 600; font-size: .95rem; margin-bottom: .75rem; }
.person p:last-child { color: var(--text-leise); margin: 0; }
.team--gross .person { display: grid; grid-template-columns: 220px 1fr; gap: 2.5rem; align-items: center; padding: 2.5rem 0; border-top: 1px solid var(--sand); }
.team--gross { grid-template-columns: 1fr; gap: 0; }
.team--gross .person__bild { margin: 0; }

/* Leistungen im Detail */
.leistung { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; padding: clamp(3rem, 6vw, 5rem) 0; border-top: 1px solid var(--sand); }
.leistung:first-child { border-top: 0; padding-top: 0; }
.leistung:nth-child(even) .leistung__bild { order: 2; }
.leistung__foto { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.leistung ul { padding: 0; margin: 1.25rem 0 0; list-style: none; columns: 2; column-gap: 2rem; }
.leistung li { padding: .45rem 0 .45rem 1.4rem; position: relative; break-inside: avoid; }
.leistung li::before { content: ""; position: absolute; left: 0; top: 1.05rem; width: .7rem; height: 2px; background: var(--rot); }
.leistung__fuer { font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-leise); font-weight: 600; margin-bottom: .6rem; }
.sprungleiste {                               /* Glas-Feld wie das Dropdownmenue */
  position: relative; isolation: isolate; display: grid; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); gap: 3px;
  margin: 2.25rem 0 0; padding: .7rem; list-style: none; border-radius: 30px; color: #fff;
  background:
    radial-gradient(60% 80% at 100% 0%, rgba(255, 70, 70, .26), transparent 70%),
    linear-gradient(135deg, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .05) 38%, rgba(255, 255, 255, .03) 62%, rgba(255, 255, 255, .13) 100%),
    rgba(34, 24, 28, .4);
  backdrop-filter: blur(18px) saturate(1.9) brightness(.52) contrast(1.05);
  -webkit-backdrop-filter: blur(18px) saturate(1.9) brightness(.52) contrast(1.05);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), inset 2px 3px 3px -1px rgba(255, 255, 255, .7), inset -2px -3px 3px -1px rgba(255, 255, 255, .38), inset 0 -18px 30px -12px rgba(255, 255, 255, .1), 0 2px 6px rgba(0, 0, 0, .18);
  text-shadow: 0 1px 8px rgba(0, 0, 0, .35);
}
.sprungleiste a {
  position: relative; display: flex; align-items: center; gap: .85rem; padding: .8rem .95rem; border-radius: 20px;
  color: #fff; text-decoration: none; font-size: .96rem; font-weight: 500; line-height: 1.25;
  transition: background .25s, transform .3s cubic-bezier(.2, .7, .2, 1);
}
.sprungleiste a svg { flex: none; width: 22px; height: 22px; color: #ff8a8a; transition: transform .35s cubic-bezier(.2, .7, .2, 1), color .25s, filter .25s; }
.sprungleiste a:hover, .sprungleiste a:focus-visible {   /* Linse: kleine Glaskapsel, die leicht vergroessert */
  background: linear-gradient(135deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, .08));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3), inset 1.5px 2px 2px -1px rgba(255, 255, 255, .75), inset -1px -1.5px 2px -1px rgba(255, 255, 255, .35), 0 6px 18px rgba(0, 0, 0, .25);
  transform: scale(1.03);
}
.sprungleiste a:hover svg, .sprungleiste a:focus-visible svg { transform: scale(1.12); color: #fff; filter: drop-shadow(0 0 6px rgba(255, 110, 110, .8)); }
.sprungleiste a:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }

/* Abschluss mit Handlungsaufforderung */
.abschluss { position: relative; overflow: hidden; text-align: left; }
.abschluss.dunkel { background: linear-gradient(135deg, var(--rot) 0%, #6e0000 55%, #3a0a0c 100%); }
.abschluss__innen { display: grid; grid-template-columns: 1fr auto; column-gap: 2.5rem; align-items: end; }
.abschluss__innen > div { display: contents; }   /* Ueberschrift ueber die ganze Breite, darunter Text und Knopf */
.abschluss h2 { grid-column: 1 / -1; font-size: clamp(1.5rem, 2.6vw, 2.3rem); margin: 0; }
@media (min-width: 900px) { .abschluss h2 { white-space: nowrap; } }
.abschluss p { color: rgba(255,255,255,.85); margin: 1.1rem 0 0; max-width: 34em; }
.abschluss .knopf--rot {                         /* auf Rot: helles Glas mit weisser Schrift */
  background:
    radial-gradient(110px circle at var(--lx, -300px) var(--ly, -300px), rgba(255, 255, 255, .5), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, .42) 0%, rgba(255, 255, 255, .14) 45%, rgba(255, 255, 255, .06) 100%),
    rgba(255, 255, 255, .1);
  backdrop-filter: blur(14px) saturate(1.7) brightness(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.7) brightness(1.1);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .4),
    inset 1.5px 2px 2px -1px #fff,
    inset -1.5px -2px 2px -1px rgba(255, 255, 255, .55),
    0 0 24px rgba(255, 255, 255, .25),
    0 12px 28px -4px rgba(40, 0, 0, .55);
}
.abschluss .knopf--rot:hover {
  background:
    radial-gradient(110px circle at var(--lx, -300px) var(--ly, -300px), rgba(255, 255, 255, .6), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, .2) 45%, rgba(255, 255, 255, .1) 100%),
    rgba(255, 255, 255, .14);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5), inset 1.5px 2px 2px -1px #fff, inset -1.5px -2px 2px -1px rgba(255, 255, 255, .6), 0 0 34px rgba(255, 255, 255, .4), 0 16px 32px -4px rgba(40, 0, 0, .6);
}
.abschluss :focus-visible { outline-color: #fff; }
.abschluss::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 1px; background: rgba(255,255,255,.18); }

/* Kontakt */
.kontakt-raster { display: grid; grid-template-columns: 1.4fr .9fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: start; }
.formular { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem 1.5rem; }
.feld { display: flex; flex-direction: column; gap: .45rem; }
.feld--breit { grid-column: 1 / -1; }
.feld label { font-weight: 600; font-size: .95rem; }
.feld label span { font-weight: 400; color: var(--text-leise); }
.feld { min-width: 0; }
.feld input, .feld select, .feld textarea { width: 100%; max-width: 100%; text-overflow: ellipsis;
  font: inherit; color: var(--text); background: #fff;
  border: 1px solid #cfc6bd; border-radius: var(--radius); padding: .8rem .95rem; min-height: 48px;
  transition: border-color .2s, box-shadow .2s;
}
.feld textarea { min-height: 160px; resize: vertical; }
.feld input:focus, .feld select:focus, .feld textarea:focus { outline: 2px solid var(--rot); outline-offset: 1px; border-color: var(--rot); box-shadow: 0 0 0 3px rgba(163,0,0,.15); }
.feld--honig { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.formular__hinweis { grid-column: 1 / -1; font-size: .88rem; color: var(--text-leise); margin: 0; }
.formular__fuss { grid-column: 1 / -1; display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.meldung { grid-column: 1 / -1; padding: 1rem 1.25rem; border-radius: var(--radius); border-left: 3px solid; margin-bottom: .5rem; }
.meldung--ok { background: #eef5ee; border-color: #2e7d32; }
.meldung--fehler { background: #fbeeee; border-color: var(--rot); }
.kontaktdaten { background: var(--flaeche-dunkel); color: #f3eeee; padding: clamp(1.75rem, 3vw, 2.5rem); border-radius: var(--radius); }
.kontaktdaten dl { margin: 0; }
.kontaktdaten dt { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-hell); margin-top: 1.4rem; }
.kontaktdaten dt:first-child { margin-top: 0; }
.kontaktdaten dd { margin: .3rem 0 0; font-size: 1.05rem; }
.kontaktdaten a { text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.3); transition: border-color .2s; }
.kontaktdaten a:hover { border-color: #fff; }

/* Rechtstexte */
.rechtstext { max-width: 46rem; }
.rechtstext h2 { font-size: 1.15rem; margin-top: 2.5rem; }
.rechtstext h3 { font-size: 1rem; margin-top: 1.75rem; }
.hinweis-box { background: var(--sand); border-left: 3px solid var(--rot); padding: 1rem 1.25rem; margin-bottom: 2.5rem; }

/* Soziale Netzwerke: senkrechte Glas-Knoepfe am rechten Rand */
.sozial { position: fixed; right: 1rem; top: 50%; transform: translateY(-50%); z-index: 55; }
.sozial ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sozial li { animation: sozial-rein .7s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i) * 90ms + 600ms); }
@keyframes sozial-rein { from { opacity: 0; transform: translateX(26px) scale(.85); } }
.sozial a {
  position: relative; isolation: isolate; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  color: #fff; text-decoration: none;
  background:
    radial-gradient(60px circle at var(--lx, -200px) var(--ly, -200px), rgba(255, 255, 255, .42), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, .28) 0%, rgba(255, 255, 255, .05) 45%, rgba(255, 255, 255, .08) 100%),
    rgba(34, 24, 28, .5);
  backdrop-filter: blur(14px) saturate(1.8) brightness(.85); -webkit-backdrop-filter: blur(14px) saturate(1.8) brightness(.85);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24), inset 1.5px 2px 2px -1px rgba(255, 255, 255, .8), inset -1.5px -2px 2px -1px rgba(255, 255, 255, .38), 0 8px 20px -6px rgba(0, 0, 0, .5);
  transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s, background-color .3s;
}
.sozial a::before { z-index: -1; }
.sozial svg { width: 21px; height: 21px; }
.sozial__fuell { fill: currentColor; stroke: none; }
.sozial__linie { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sozial a:hover, .sozial a:focus-visible {
  transform: scale(1.1);
  background-color: rgba(150, 0, 0, .72);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .36), inset 1.5px 2px 2px -1px #fff, inset -1.5px -2px 2px -1px rgba(255, 255, 255, .5), 0 0 22px rgba(255, 80, 80, .5), 0 10px 22px -6px rgba(110, 0, 0, .6);
}
.sozial a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.sozial a:active { transform: scale(.95); }
.sozial__name {                                  /* Namensschild, das beim Darueberfahren nach links ausfaehrt */
  position: absolute; right: calc(100% + 12px); top: 50%; transform: translate(10px, -50%) scale(.95); transform-origin: right center;
  padding: .4rem .9rem; border-radius: 999px; white-space: nowrap; pointer-events: none;
  font-size: .85rem; font-weight: 500; color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .35);
  background: linear-gradient(180deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, .06)), rgba(34, 24, 28, .62);
  backdrop-filter: blur(14px) saturate(1.8) brightness(.85); -webkit-backdrop-filter: blur(14px) saturate(1.8) brightness(.85);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), inset 1px 1.5px 1.5px -1px rgba(255, 255, 255, .7), 0 8px 20px -6px rgba(0, 0, 0, .5);
  opacity: 0; transition: opacity .25s, transform .4s cubic-bezier(.2, .8, .2, 1);
}
.sozial a:hover .sozial__name, .sozial a:focus-visible .sozial__name { opacity: 1; transform: translate(0, -50%); }
.sozial__schalter { display: none; }
@media (max-width: 1320px) { .sozial { right: .4rem; } .sozial a { width: 40px; height: 40px; } .sozial svg { width: 18px; height: 18px; } }
@media (prefers-reduced-motion: reduce) { .sozial li { animation: none; } }
.fuss__sozial a { text-decoration: underline; text-underline-offset: 3px; }

/* Hinweis zu Cookies: Liquid-Glass-Karte unten links */
.cookie-hinweis {
  position: fixed; left: 1.25rem; bottom: 1.25rem; z-index: 80; width: min(430px, calc(100vw - 2.5rem));
  padding: 1.25rem 1.4rem 1.35rem; border-radius: 28px; color: #fff; isolation: isolate;
  background:
    radial-gradient(60% 80% at 100% 0%, rgba(255, 70, 70, .26), transparent 70%),
    linear-gradient(135deg, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .05) 38%, rgba(255, 255, 255, .03) 62%, rgba(255, 255, 255, .13) 100%),
    rgba(34, 24, 28, .62);
  backdrop-filter: blur(18px) saturate(1.9) brightness(.45); -webkit-backdrop-filter: blur(18px) saturate(1.9) brightness(.45);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), inset 2px 3px 3px -1px rgba(255, 255, 255, .7), inset -2px -3px 3px -1px rgba(255, 255, 255, .38), 0 18px 40px -10px rgba(0, 0, 0, .55);
  text-shadow: 0 1px 8px rgba(0, 0, 0, .35);
  opacity: 0; transform: translateY(24px) scale(.97); transform-origin: 20% 100%;
  transition: opacity .5s ease, transform .7s cubic-bezier(.2, .8, .2, 1);
}
.cookie-hinweis[hidden] { display: none; }
.cookie-hinweis.ist-da { opacity: 1; transform: none; }
.cookie-hinweis h2 { font-family: var(--f-titel); font-size: 1rem; font-weight: 400; margin: 0 0 .55rem; color: #fff; }
.cookie-hinweis p { margin: 0 0 1rem; font-size: .92rem; line-height: 1.55; color: rgba(255, 255, 255, .88); }
.cookie-hinweis p a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.cookie-hinweis .knopf { min-height: 44px; padding: calc(.55rem + 2px) calc(1.4rem + 2px); font-size: .95rem; }
@media (prefers-reduced-motion: reduce) { .cookie-hinweis { transition: opacity .2s; transform: none; } }

.textlink-knopf { font: inherit; font-weight: 600; color: var(--rot); background: none; border: 0; padding: .4rem 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.textlink-knopf:hover { color: var(--rot-dunkel); }

.textlink-knopf { font: inherit; font-weight: 600; color: var(--rot); background: none; border: 0; padding: .4rem 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.textlink-knopf:hover { color: var(--rot-dunkel); }

/* Fussbereich */
.fuss { background: var(--anthrazit); color: var(--text-hell); padding: 4rem 0 2rem; font-size: .95rem; }
.fuss__raster { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 2.5rem; padding-bottom: 3rem; border-bottom: 1px solid rgba(255,255,255,.1); }
.fuss__logo { display: inline-block; margin-bottom: 1.25rem; }
.fuss__logo img { height: 64px; width: auto; }
.fuss h2 { font-family: var(--f-text); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: #fff; margin-bottom: 1rem; font-weight: 600; }
.fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.fuss a { text-decoration: none; transition: color .2s; }
.fuss a:hover { color: #fff; }
.fuss__unten { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-top: 1.75rem; font-size: .88rem; }
.fuss__unten ul { display: flex; gap: 1.5rem; }

/* Feste Leiste fuer das Handy */
.handy-leiste { display: none; }

/* Sanftes Einblenden beim Scrollen (nur wenn JavaScript laeuft) */
.js .zeigen { opacity: 0; transform: translateY(24px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.js .zeigen.ist-sichtbar { opacity: 1; transform: none; }
.js .zeigen-verz-1 { transition-delay: .08s; }
.js .zeigen-verz-2 { transition-delay: .16s; }
.js .zeigen-verz-3 { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .zeigen { opacity: 1; transform: none; transition: none; }
  .knopf--rot::after { animation: none; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}

/* ---------- Tablet ---------- */
@media (max-width: 1000px) {
  .kacheln { grid-template-columns: repeat(2, 1fr); }
  .kacheln .kachel:last-child:nth-child(3n + 1) { grid-column: auto; }
  .kacheln .kachel:last-child:nth-child(2n + 1) { grid-column: 1 / -1; }
  .kontakt-raster { grid-template-columns: 1fr; }
  .fuss__raster { grid-template-columns: 1fr 1fr; }
  .fuss__raster > div:first-child { grid-column: 1 / -1; }
}

/* ---------- Handy: eigener Durchgang ---------- */
@media (max-width: 760px) {
  :root { --kopf-hoehe: 64px; }
  body { font-size: 1rem; padding-bottom: 76px; }
  body.ohne-leiste { padding-bottom: 0; }
  .kopf { background: var(--papier); --kopf-blur: none; } /* sonst sitzt das Menue im Kopf fest */
  .kopf__logo img { height: 40px; }
  .menue-knopf {
    display: inline-flex; min-height: 44px; padding: 0 1.1rem 0 .95rem; border-radius: 999px; isolation: isolate;
    background:
      radial-gradient(70px circle at var(--lx, -200px) var(--ly, -200px), rgba(255, 255, 255, .7), transparent 70%),
      linear-gradient(180deg, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, .45) 100%);
    backdrop-filter: blur(14px) saturate(1.6); -webkit-backdrop-filter: blur(14px) saturate(1.6);
    box-shadow: inset 0 0 0 1px rgba(60, 20, 20, .1), inset 1.5px 2px 2px -1px #fff, inset -1.5px -2px 2px -1px rgba(60, 20, 20, .12), 0 6px 16px -4px rgba(60, 20, 20, .25);
  }
  .startseite .menue-knopf {
    background:
      radial-gradient(70px circle at var(--lx, -200px) var(--ly, -200px), rgba(255, 255, 255, .45), transparent 70%),
      linear-gradient(180deg, rgba(255, 255, 255, .3) 0%, rgba(255, 255, 255, .06) 50%, rgba(255, 255, 255, .1) 100%),
      rgba(255, 255, 255, .08);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .26), inset 1.5px 2px 2px -1px rgba(255, 255, 255, .85), inset -1.5px -2px 2px -1px rgba(255, 255, 255, .4), 0 6px 16px -4px rgba(0, 0, 0, .5);
    text-shadow: 0 1px 6px rgba(0, 0, 0, .35);
  }
  .nav { gap: 0; }
  .nav .knopf { display: none; }                  /* Knopf sitzt auf dem Handy unten in der Leiste */
  .nav__liste {
    position: fixed; left: 0; right: 0; top: var(--kopf-hoehe); bottom: 0;
    flex-direction: column; gap: 0; padding: 1.5rem var(--rand);
    background: var(--papier); border-top: 1px solid var(--sand);
    opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .25s, transform .25s, visibility .25s;
  }
  .nav__liste.ist-offen { opacity: 1; visibility: visible; transform: none; }
  .nav__liste > li > a { display: block; font-family: var(--f-titel); font-size: 1.15rem; font-weight: 400; padding: .9rem 0; border-bottom: 1px solid var(--sand); }
  .nav__liste > li > a::after { display: none; }
  .nav__liste > li > a[aria-current="page"] { color: var(--rot); }
  .nav__liste > li { display: block; }
  .nav__liste > li.hat-untermenue { display: grid; grid-template-columns: 1fr auto; gap: 0; align-items: center; border-bottom: 1px solid var(--sand); }
  .hat-untermenue > a { border-bottom: 0 !important; }
  .untermenue-knopf { width: 44px; height: 44px; align-self: center; }
  .untermenue-knopf svg { width: 16px; height: 16px; }
  .untermenue {
    position: static; grid-column: 1 / -1; width: auto; margin: 0; padding: 0; display: block; border: 0; border-radius: 0; box-shadow: none; background: none;
    backdrop-filter: none; -webkit-backdrop-filter: none; clip-path: none; color: var(--text); text-shadow: none;
    max-height: 0; overflow: hidden; opacity: 1; visibility: visible; transform: none; transition: max-height .5s cubic-bezier(.2, .8, .2, 1);
  }
  .untermenue::after { display: none; }
  .untermenue a:hover, .untermenue a:focus-visible { box-shadow: none; }
  .hat-untermenue:focus-within > .untermenue { max-height: 0; }
  .hat-untermenue.ist-offen > .untermenue { max-height: 820px; transition: max-height .6s cubic-bezier(.2, .8, .2, 1); }
  .untermenue li, .hat-untermenue:focus-within > .untermenue li { opacity: 0; transform: translateX(-12px); }
  .hat-untermenue.ist-offen > .untermenue li { opacity: 1; transform: none; }
  .untermenue a { color: var(--text-leise); font-size: 1rem; padding: .75rem .25rem .75rem 1rem; border-radius: 0; border-top: 1px solid var(--sand); }
  .untermenue a svg { color: var(--rot); width: 20px; height: 20px; }
  .untermenue a:hover, .untermenue a:focus-visible { background: none; transform: none; }
  .untermenue .untermenue__alle { margin: 0; padding: 0; border-top: 0; }
  .untermenue__alle a { color: var(--rot); font-weight: 600; }
  .startseite .hat-untermenue { border-bottom-color: rgba(255, 255, 255, .1); }
  .startseite .untermenue a { color: #d8cfd1; border-top-color: rgba(255, 255, 255, .1); }
  .startseite .untermenue a svg { color: #ff8a8a; }
  .startseite .untermenue__alle a { color: #ffd0d0; }

  .handy-leiste {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    gap: .75rem; padding: .75rem var(--rand) calc(.9rem + env(safe-area-inset-bottom));
    background: none; border: 0; pointer-events: none;           /* keine Leiste mehr: nur der Glas-Knopf schwebt */
  }
  .handy-leiste .knopf { flex: 1; pointer-events: auto; min-height: 54px; font-size: 1.05rem; }
  .handy-leiste .knopf--rot { background-color: rgba(150, 0, 0, .88); }   /* auf hellen Seiten bleibt die Schrift gut lesbar */
  .handy-leiste .knopf--rand { flex: 0 0 auto; color: #fff; padding: .8rem 1rem; }

  .buehne { padding-top: 2.75rem; }
  .buehne--video { min-height: calc(100svh - var(--kopf-hoehe) - 76px); padding-bottom: 5rem; }
  .buehne__video::after { background: radial-gradient(80% 45% at 90% 0%, rgba(163,0,0,.5), transparent 70%), linear-gradient(0deg, rgba(20,17,19,.94) 10%, rgba(20,17,19,.78) 55%, rgba(20,17,19,.6) 100%); }
  .buehne__drei { font-size: .62em; }
  .startseite .kopf { background: transparent; }
  .startseite .kopf.ist-gescrollt, .startseite .kopf.menue-offen { background: rgba(20, 17, 19, .9); --kopf-blur: none; }
  .startseite .buehne--video { min-height: 100svh; padding-top: calc(var(--kopf-hoehe) + 2.75rem); padding-bottom: 14rem; }
  .kunden-zeile { bottom: calc(9.6rem + env(safe-area-inset-bottom)); }
  .startseite .buehne__fakten { display: none; }   /* auf dem Handy ist unten Platz fuer die Kundenlogos */   /* Video fuellt den ganzen Bildschirm, der Glas-Knopf schwebt darueber */
  .startseite .nav__liste { background: var(--anthrazit); border-top-color: rgba(255, 255, 255, .1); }
  .startseite .nav__liste > li > a { border-bottom-color: rgba(255, 255, 255, .1); }
  .abschnitt__kopf--zeile { gap: .75rem; }
  .buehne__knoepfe .knopf--rand { display: none; }   /* auf dem Handy nur ein Knopf */

  .sozial { top: auto; bottom: calc(5.6rem + env(safe-area-inset-bottom)); right: .85rem; transform: none; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
  body.ohne-leiste .sozial { bottom: 1.25rem; }
  body:has(.kopf.menue-offen) .sozial { display: none; }   /* nicht ueber dem offenen Menue */
  .sozial ul { max-height: 0; overflow: hidden; padding: 0 0 0 0; transition: max-height .55s cubic-bezier(.2, .8, .2, 1); }
  .sozial.ist-offen ul { max-height: 340px; overflow: visible; }
  .sozial li { animation: none; opacity: 0; transform: translateY(14px) scale(.85); transition: opacity .3s, transform .45s cubic-bezier(.2, .8, .2, 1); }
  .sozial.ist-offen li { opacity: 1; transform: none; transition-delay: calc((4 - var(--i)) * 60ms); }
  .sozial a, .sozial__schalter { width: 46px; height: 46px; }
  .video-pause { right: calc(.85rem + 46px + 6px); bottom: calc(5.6rem + env(safe-area-inset-bottom)); width: 46px; height: 46px; }   /* links neben dem Teilen-Knopf */
  .sozial__name { display: none; }
  .cookie-hinweis { left: .85rem; right: .85rem; width: auto; bottom: calc(5.4rem + env(safe-area-inset-bottom)); }
  body.ohne-leiste .cookie-hinweis { bottom: 1rem; }
  .sozial__schalter {
    position: relative; isolation: isolate; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; cursor: pointer; color: #fff;
    background:
      radial-gradient(60px circle at var(--lx, -200px) var(--ly, -200px), rgba(255, 255, 255, .42), transparent 70%),
      linear-gradient(180deg, rgba(255, 255, 255, .28) 0%, rgba(255, 255, 255, .05) 45%, rgba(255, 255, 255, .08) 100%),
      rgba(34, 24, 28, .55);
    backdrop-filter: blur(14px) saturate(1.8) brightness(.85); -webkit-backdrop-filter: blur(14px) saturate(1.8) brightness(.85);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24), inset 1.5px 2px 2px -1px rgba(255, 255, 255, .8), inset -1.5px -2px 2px -1px rgba(255, 255, 255, .38), 0 8px 20px -6px rgba(0, 0, 0, .5);
    transition: transform .3s cubic-bezier(.2, .7, .2, 1);
  }
  .sozial__schalter svg { width: 20px; height: 20px; fill: currentColor; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; transition: transform .4s cubic-bezier(.2, .7, .2, 1); }
  .sozial__schalter circle { stroke: none; }
  .sozial__schalter path { fill: none; }
  .sozial.ist-offen .sozial__schalter { background-color: rgba(150, 0, 0, .7); }
  .sozial.ist-offen .sozial__schalter svg { transform: rotate(90deg); }
  .sozial__schalter:active { transform: scale(.94); }
  .buehne__fakten { gap: 1.25rem; justify-content: space-between; margin-top: 2.25rem; }
  .buehne__fakten strong { font-size: .95rem; }
  .nur-gross { display: none; }
  .seitenkopf h1 { font-size: clamp(1.35rem, 6.2vw, 1.75rem); hyphens: auto; -webkit-hyphens: auto; }
  h1 { font-size: clamp(1.45rem, 6.6vw, 1.85rem); }
  h2 { font-size: clamp(1.2rem, 5.4vw, 1.5rem); }

  .kacheln { grid-template-columns: 1fr; gap: .9rem; }
  .kachel { min-height: 0; grid-template-rows: auto auto; border-radius: 18px; }
  .kachel__rahmen { aspect-ratio: 16 / 10; }
  .kachel__chip { width: 36px; height: 36px; }
  .kachel__nr { display: none; }

  .zwei { grid-template-columns: 1fr; }
  .zielgruppe .ph { aspect-ratio: 16 / 9; }
  .proben .kachel:nth-child(3) { display: none; }      /* auf dem Handy reichen zwei Beispiele */

  .gruende { grid-template-columns: 1fr; gap: 1.75rem; }
  .team { grid-template-columns: 1fr; gap: 0; }
  .team .person { display: grid; grid-template-columns: 88px 1fr; column-gap: 1.25rem; align-items: center; padding: 1.25rem 0; border-top: 1px solid var(--sand); }
  .team .person__bild { width: 88px; margin: 0; grid-row: span 2; }
  .team .person h3 { align-self: end; }
  .team .person p:last-child { display: none; }
  .team .person__rolle { margin: 0; align-self: start; }
  .team--gross .person { display: block; padding: 2rem 0; }
  .team--gross .person__bild { width: 128px; margin-bottom: 1.25rem; }
  .team--gross .person p:last-child { display: block; }

  .leistung { grid-template-columns: 1fr; gap: 1.5rem; }
  .leistung:nth-child(even) .leistung__bild { order: 0; }
  .leistung .ph { aspect-ratio: 16 / 8; }
  .leistung ul { columns: 1; }

  .abschluss__innen { grid-template-columns: 1fr; row-gap: 0; }
  .abschluss .knopf { margin-top: 1.75rem; }
  .abschluss .knopf { width: 100%; }
  .formular { grid-template-columns: minmax(0, 1fr); }
  .formular__fuss .knopf { width: 100%; }
  .fuss { padding-top: 3rem; }
  .fuss__raster { grid-template-columns: 1fr; gap: 2rem; }
  .fuss__unten { flex-direction: column; }
}

/* ---------- Handy: Umbau nach dem Vorbild noxusfilm.de ----------
   schmaler Kopf mit Symbolen, ruhige Schriften, Foto-Raster statt langer Kartenliste, kein fester Knopf unten */
.kopf__aktionen { display: none; }
@media (max-width: 760px) {
  :root { --kopf-hoehe: 56px; --abstand: 2.75rem; }
  body { font-size: .9375rem; line-height: 1.55; padding-bottom: 0; }
  body.ohne-leiste { padding-bottom: 0; }

  /* Kopf: kleines Logo links, Telefon, Formular und Burger rechts */
  .kopf__innen { gap: .1rem; }
  .kopf__logo img { height: 34px; }
  .kopf__aktionen { display: flex; align-items: center; margin-left: auto; }
  .kopf__icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: var(--text); text-decoration: none; }
  .kopf__icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .startseite .kopf__icon { color: #fff; }
  .menue-knopf, .startseite .menue-knopf {
    min-height: 42px; width: 42px; padding: 0; justify-content: center; gap: 0; border-radius: 50%;
    background: none; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; text-shadow: none;
  }
  .menue-knopf__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .menue-knopf__striche { height: 2px; background: currentColor; }
  .menue-knopf__striche::before { top: -7px; }
  .menue-knopf__striche::after { top: 7px; }
  .menue-knopf[aria-expanded="true"] .menue-knopf__striche { background: transparent; }
  .menue-knopf[aria-expanded="true"] .menue-knopf__striche::before { top: 0; transform: rotate(45deg); }
  .menue-knopf[aria-expanded="true"] .menue-knopf__striche::after { top: 0; transform: rotate(-45deg); }

  /* Menue: Seite fuellend, "Projekt anfragen" nur hier unten */
  .nav__liste { z-index: 80; padding-bottom: 6rem; overflow-y: auto; }
  .nav .nav__liste.ist-offen ~ .knopf {
    display: inline-flex; position: fixed; z-index: 81; left: var(--rand); right: var(--rand);
    bottom: calc(1rem + env(safe-area-inset-bottom)); justify-content: center; min-height: 52px;
  }
  .nav__liste > li > a { font-size: 1.05rem; padding: .8rem 0; }

  /* Schriften */
  h1 { font-size: 1.4rem; }
  h2 { font-size: 1.25rem; }
  h3 { font-size: 1rem; }
  .seitenkopf h1 { font-size: 1.4rem; }
  .buehne h1 { font-size: 1.45rem; line-height: 1.25; margin-inline: auto; }
  .einleitung { font-size: 1rem; line-height: 1.55; }
  .dachzeile { font-size: .72rem; }
  .abschnitt__kopf { margin-bottom: 1.5rem; }
  .knopf { font-size: .95rem; }

  /* Startbild: mittig, zwei Knoepfe untereinander */
  .startseite .buehne--video { display: flex; flex-direction: column; justify-content: center; padding-top: calc(var(--kopf-hoehe) + 1.5rem); padding-bottom: 9.5rem; }
  .buehne__inhalt { text-align: center; }
  .buehne .dachzeile { justify-content: center; }
  .buehne .dachzeile::before { display: none; }
  .buehne .einleitung { margin-inline: auto; max-width: 22rem; }
  .buehne__knoepfe { flex-direction: column; align-items: center; gap: .7rem; margin-top: 1.5rem; }
  .buehne__knoepfe .knopf, .buehne__knoepfe .knopf--rand { display: inline-flex; justify-content: center; width: 100%; max-width: 300px; min-height: 50px; }
  .kunden-zeile { bottom: calc(1.1rem + env(safe-area-inset-bottom)); }

  /* Teilen-Knopf und Pause rechts unten, auf der Startseite ueber den Kundenlogos */
  body .sozial, body .video-pause { bottom: calc(1rem + env(safe-area-inset-bottom)); }
  body:has(.kopf.menue-offen) .video-pause { display: none; }   /* nicht ueber dem offenen Menue */
  body.startseite .sozial, body.startseite .video-pause { bottom: calc(6.75rem + env(safe-area-inset-bottom)); }

  /* Cookie-Hinweis: schmale Leiste am unteren Rand */
  body .cookie-hinweis, body.ohne-leiste .cookie-hinweis {
    left: 0; right: 0; bottom: 0; width: auto; z-index: 95; border-radius: 22px 22px 0 0;
    padding: .85rem var(--rand) calc(.85rem + env(safe-area-inset-bottom));
    display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .75rem;
  }
  .cookie-hinweis[hidden] { display: none; }
  .cookie-hinweis h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .cookie-hinweis p { margin: 0; font-size: .78rem; line-height: 1.45; }
  .cookie-hinweis .knopf { min-height: 40px; padding: .4rem 1rem; font-size: .85rem; }

  /* Die neun Leistungen und die Arbeitsproben: Foto-Raster ueber die ganze Breite, nur der Titel liegt darauf */
  .kacheln { grid-template-columns: 1fr 1fr; gap: 2px; margin-inline: calc(-1 * var(--rand)); }
  .kachel { display: block; aspect-ratio: 1 / 1; min-height: 0; border: 0; border-radius: 0; box-shadow: none; background: var(--anthrazit); }
  .kachel:hover { transform: none; box-shadow: none; border-color: transparent; }
  .kachel:hover .kachel__bild { transform: none; }
  .kachel::after { display: none; }
  .kachel__rahmen { position: absolute; inset: 0; aspect-ratio: auto; }
  .kachel__rahmen::after { background: linear-gradient(0deg, rgba(20, 17, 19, .55), rgba(20, 17, 19, .3)); }
  .kachel__kopf { display: none; }
  .kachel__text { position: absolute; inset: 0; display: grid; place-items: center; padding: .6rem; text-align: center; pointer-events: none; }
  .kachel h3 {
    margin: 0; max-width: 100%; padding: .5rem .8rem; border-radius: 14px; color: #fff; font-family: var(--f-text); font-weight: 600;
    font-size: .88rem; line-height: 1.3; hyphens: auto; -webkit-hyphens: auto; text-shadow: 0 1px 6px rgba(0, 0, 0, .45);
    background: rgba(255, 255, 255, .1); backdrop-filter: blur(8px) saturate(1.6); -webkit-backdrop-filter: blur(8px) saturate(1.6);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5), inset 1px 1.5px 2px -1px rgba(255, 255, 255, .7);
  }
  .kachel p { display: none; }
  .kacheln .kachel:last-child:nth-child(2n + 1) { grid-column: 1 / -1; aspect-ratio: 2 / 1; }
  .kachel--probe .kachel__text { place-items: end center; padding-bottom: .8rem; }
  .proben .kachel:nth-child(3) { display: block; }

  /* Zielgruppen, Gruende, Team, Leistungen, Fuss: enger */
  .zwei { gap: .9rem; }
  .zielgruppe__text { padding: 1rem 1.1rem 1.2rem; }
  .zielgruppe__text p { font-size: .9rem; margin-bottom: .8rem; }
  .liste-strich { margin-bottom: .9rem; }
  .liste-strich li { font-size: .85rem; }
  .gruende { gap: 1.25rem; }
  .grund { padding-top: 1rem; }
  .leistung { gap: .9rem; padding: 2rem 0; }
  .leistung__foto { aspect-ratio: 16 / 10; }
  .leistung p { font-size: .95rem; }
  .leistung__fuer { font-size: .72rem; margin-bottom: .3rem; }
  .leistung li { padding: .3rem 0 .3rem 1.2rem; font-size: .92rem; }
  .leistung li::before { top: .85rem; }
  .leistung ul { margin-top: .75rem; }
  .sprungleiste { grid-template-columns: 1fr 1fr; margin-top: 1.5rem; padding: .5rem; border-radius: 24px; }
  .sprungleiste li { min-width: 0; }
  .sprungleiste a { gap: .45rem; padding: .6rem .5rem; font-size: .8rem; border-radius: 16px; }
  .sprungleiste a svg { width: 17px; height: 17px; }
  .sprungleiste a span { min-width: 0; overflow-wrap: anywhere; }
  .fuss { padding: 2rem 0 1.25rem; font-size: .9rem; }
  .fuss__raster { gap: 1.5rem; padding-bottom: 1.5rem; }
  .fuss__logo { margin-bottom: .75rem; }
  .fuss__logo img { height: 48px; }
  .fuss ul { gap: .3rem; }
  .fuss__unten { padding-top: 1.25rem; }
}
@media (max-width: 360px) { .kopf__logo img { height: 30px; } }

/* ---------- Leistungsseiten: vier Schritte und Fragen zum Aufklappen ---------- */
@media (min-width: 761px) {
  .gruende--vier { grid-template-columns: repeat(4, 1fr); gap: clamp(1.25rem, 2.5vw, 2.25rem); }
}
@media (min-width: 761px) and (max-width: 1000px) {
  .gruende--vier { grid-template-columns: repeat(2, 1fr); }
}
.faq { max-width: 52rem; border-bottom: 1px solid var(--sand); }
.faq__punkt { border-top: 1px solid var(--sand); }
.faq__punkt summary {
  position: relative; list-style: none; cursor: pointer; padding: 1.1rem 2.5rem 1.1rem 0;
  font-family: var(--f-titel); font-size: clamp(.95rem, 1.3vw, 1.05rem); line-height: 1.35;
}
.faq__punkt summary::-webkit-details-marker { display: none; }
.faq__punkt summary::before, .faq__punkt summary::after {
  content: ""; position: absolute; right: .35rem; top: 50%; width: .9rem; height: 2px; background: var(--rot); transition: transform .3s;
}
.faq__punkt summary::after { transform: rotate(90deg); }
.faq__punkt[open] summary::after { transform: rotate(0); }
.faq__punkt summary:hover { color: var(--rot); }
.faq__antwort { padding: 0 2.5rem 1.25rem 0; color: var(--text-leise); }
.faq__antwort p { margin: 0; }
@media (max-width: 760px) {
  .faq__punkt summary { padding: .9rem 2rem .9rem 0; font-size: .95rem; }
  .faq__antwort { padding-right: 0; font-size: .95rem; }
}

/* ---------- Referenzen, Video auf dem Foto, breites Video-Fenster ---------- */
.gruende--ohne-nr .grund h3::before { content: none; }
.gruende--ohne-nr .grund p { margin: 0 0 .7em; font-size: .95rem; }
.gruende--ohne-nr .grund strong { font-weight: 600; }
.grund__links { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.25rem; margin-top: 1rem; }
.grund__links .textlink-knopf { padding: 0; }
.video-bild { position: relative; border-radius: var(--radius); overflow: hidden; }
.video-bild .kachel__abspielen { z-index: 2; }
.video-bild__hinweis {
  position: absolute; left: .9rem; bottom: .9rem; z-index: 1; padding: .4rem .9rem; border-radius: 999px; color: #fff; font-size: .85rem; font-weight: 600; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .25), rgba(255, 255, 255, .05)), rgba(34, 24, 28, .55);
  backdrop-filter: blur(10px) saturate(1.6); -webkit-backdrop-filter: blur(10px) saturate(1.6);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3), inset 1px 1.5px 2px -1px rgba(255, 255, 255, .7);
}
.video-fenster__karte--breit { width: min(900px, 100%); }
.video-fenster__karte--breit .video-fenster__rahmen { height: auto; aspect-ratio: 16 / 9; }
@media (max-width: 760px) {
  .video-fenster__karte--breit .video-fenster__rahmen { max-height: 60vh; }
  .video-bild { border-radius: var(--radius); }
}

/* ---------- Grosse Monitore: alles wächst mit, damit die Seite den Bildschirm füllt ---------- */
@media (min-width: 1700px) {
  html { font-size: 18px; }
  :root { --kopf-hoehe: 86px; --breite: 1327px; }
  .kopf__logo img { height: 61px; }
  .kunden__liste { --kh: clamp(34px, 1.9vw, 44px); }
}
@media (min-width: 2200px) {
  html { font-size: 20px; }
  :root { --kopf-hoehe: 96px; --breite: 1475px; }
  .kopf__logo img { height: 68px; }
}

/* ---------- Barrierefreiheit ---------- */
/* Tastaturfokus: auf dunklem Grund weiss statt rot, damit er gut zu sehen ist */
.dunkel :focus-visible, .fuss :focus-visible, .cookie-hinweis :focus-visible, .startseite .kopf :focus-visible,
.kopf.menue-offen :focus-visible, .sozial :focus-visible, .video-pause:focus-visible, .video-fenster :focus-visible { outline-color: #fff; }
/* Bewegte Kundenlogos lassen sich mit dem Pause-Knopf anhalten, auch mit Maus oder Tastatur im Lauf */
.ist-pausiert .kunden__spur, .kunden__spur:hover, .kunden__spur:focus-within { animation-play-state: paused; }

/* Mehrere Referenzen auf einer Leistungsseite */
.referenz { max-width: 52rem; padding: 1.1rem 0; border-top: 1px solid rgba(29, 25, 27, .14); }
.referenz:first-of-type { margin-top: 1.25rem; }
.referenz h3 { margin: 0 0 .4rem; }
.referenz p { margin: 0 0 .5rem; color: var(--text-leise); }

/* Preise */
.preis { margin-top: 1.25rem; padding: .9rem 1.1rem; border-left: 3px solid var(--rot); background: rgba(163, 0, 0, .06); border-radius: 0 var(--radius) var(--radius) 0; font-size: .95rem; }
.preis strong { color: var(--rot); }
.preisliste { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem 2rem; margin: 0; max-width: 60rem; }
.preisliste > div { padding: 1rem 0 0; border-top: 2px solid var(--text); }
.preisliste dt { font-family: var(--f-titel); font-size: 1rem; margin-bottom: .35rem; }
.preisliste dt a { text-decoration: none; }
.preisliste dt a:hover { color: var(--rot); }
.preisliste dd { margin: 0; font-size: 1.15rem; font-weight: 600; }
.preisliste dd span { font-size: .85rem; font-weight: 400; color: var(--text-leise); }

/* Technik */
.technik { margin-top: 1rem; font-size: .95rem; color: var(--text-leise); }
.technik strong { color: var(--text); }
.technikliste { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem 2rem; margin: 0; max-width: 64rem; }
.technikliste > div { padding: 1rem 0 0; border-top: 2px solid var(--text); }
.technikliste dt { font-family: var(--f-titel); font-size: 1rem; margin-bottom: .35rem; }
.technikliste dd { margin: 0; font-size: .95rem; color: var(--text-leise); }