/* ============================================================
   Digital Hub Rhein-Neckar — Landingpage
   Zwei Welten: Papier/Archiv (Stiche, Beige) & Datenraum (Navy, Pixel)
   Figma-Referenzen: Menü "Group 1686553129", Gradient "4866"/"56",
   Cards "Card 3", Glas-Logo "Group 1686553126"
   ============================================================ */

@font-face { font-family: 'Almarena'; src: url('../assets/fonts/alm-regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Almarena'; src: url('../assets/fonts/alm-medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Almarena Display'; src: url('../assets/fonts/alm-dsbold.woff2') format('woff2'); font-weight: 700; font-display: swap; }

:root {
  --navy: #000330;
  --navy-2: #070d46;
  --navy-panel: #0a1152;
  --ink: #131347;
  --blue: #466DFF;
  /* Aktiver Filter-Chip: --blue leicht abgedunkelt (gleicher Farbton, Helligkeit
     63.7% -> 62.0%). #fff auf --blue ergibt nur 4.29:1, auf diesem Wert 4.66:1 —
     WCAG 2.2 AA verlangt 4.5:1 fuer normalen Text. Eigenes Token statt --blue zu
     aendern: --blue traegt weiterhin Text auf .card__tag, .tcard .tag und
     .btn--primary, die in der site-weiten Token-Entscheidung nachgezogen werden. */
  --chip-active-bg: #3D65FF;
  --blue-royal: #294DEB;
  --blue-bright: #9DB4FF;
  --paper: #F4F3EE;
  --paper-dim: #E9E7DE;
  --gold: #FFE5AA;
  --navy-deep: #000448;
  --ice: #F0F5FF;
  --line-dark: rgba(157, 180, 255, .16);
  --line-paper: rgba(19, 19, 71, .14);
  --dim-on-dark: rgba(244, 243, 238, .62);
  --dim-on-paper: rgba(19, 19, 71, .64);
  --display: 'Almarena Display', 'Outfit', sans-serif;
  --ui: 'Almarena', 'Outfit', sans-serif;
  --body: 'Outfit', sans-serif;
  --card-font: 'Archivo', 'Outfit', sans-serif;
  /* Figma Frame 4866 */
  --grad-figma: linear-gradient(180deg, #F0F5FF 0%, #D1DEF7 25%, #294DEB 50%, #000448 75%, #000000 100%);
  /* Figma Frame 56 */
  --grad-figma-2: linear-gradient(168deg, #F0F5FF 0%, #D1DEF7 25%, #294DEB 50%, #050D2E 75%, #000000 100%);
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --wrap: 100%;
  --gutter: clamp(20px, 4.5vw, 72px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  background: var(--navy);
  color: var(--paper);
  font-family: var(--body);
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

::selection { background: var(--blue); color: var(--paper); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

.skip-link { position: absolute; left: -9999px; z-index: 300; }
.skip-link:focus { left: 16px; top: 16px; background: var(--gold); color: var(--navy); padding: 10px 16px; border-radius: 8px; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ============ Glas-Logo (Figma GLASS-Effekt, via Maske) ============ */
.glass-mark {
  display: inline-block; width: 38px; height: 38px; flex: none;
  -webkit-mask: url('../assets/img/logo-mark.png') center / contain no-repeat;
  mask: url('../assets/img/logo-mark.png') center / contain no-repeat;
  background: rgba(255, 255, 255, .34);
  -webkit-backdrop-filter: blur(9px) saturate(1.3) brightness(1.25);
  backdrop-filter: blur(9px) saturate(1.3) brightness(1.25);
}

/* ============ Cursor ============ */
.cursor { position: fixed; top: 0; left: 0; z-index: 250; pointer-events: none; }
.cursor__dot {
  position: fixed; width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold); transform: translate(-50%, -50%);
}
.cursor__ring {
  position: fixed; width: 38px; height: 38px; border-radius: 50%;
  border: 1.4px solid rgba(255, 229, 170, .55);
  transform: translate(-50%, -50%) scale(1);
  transition: width .3s var(--ease), height .3s var(--ease), background .3s, border-color .3s;
  display: flex; align-items: center; justify-content: center;
}
.cursor--active .cursor__ring { width: 58px; height: 58px; background: rgba(255, 229, 170, .12); border-color: var(--gold); }
.cursor--label .cursor__ring { width: 96px; height: 96px; background: var(--gold); border-color: var(--gold); }
.cursor--label .cursor__dot { opacity: 0; }
.cursor__label { font-family: var(--ui); font-weight: 500; font-size: 11.5px; letter-spacing: .04em; color: var(--navy); opacity: 0; text-align: center; line-height: 1.2; padding: 0 8px; }
.cursor--label .cursor__label { opacity: 1; }
@media (pointer: coarse) { .cursor { display: none; } }

/* ============ Liquid Glass (Design-System aus Referenz-Prompt) ============ */
.liquid-glass {
  background: rgba(255, 255, 255, 0.01);
  background-blend-mode: luminosity;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: none;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}
.liquid-glass::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1.4px;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.45) 0%,
    rgba(255, 255, 255, 0.15) 20%,
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 255, 255, 0) 60%,
    rgba(255, 255, 255, 0.15) 80%,
    rgba(255, 255, 255, 0.45) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.liquid-glass-strong {
  background: rgba(255, 255, 255, 0.01);
  background-blend-mode: luminosity;
  backdrop-filter: blur(50px);
  -webkit-backdrop-filter: blur(50px);
  border: none;
  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.05), inset 0 1px 1px rgba(255, 255, 255, 0.15);
  position: relative;
  overflow: hidden;
}
.liquid-glass-strong::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1.4px;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.5) 0%,
    rgba(255, 255, 255, 0.2) 20%,
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 255, 255, 0) 60%,
    rgba(255, 255, 255, 0.2) 80%,
    rgba(255, 255, 255, 0.5) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* ============ Navigation — Glass-Pill links, Logo mittig ============ */
.nav {
  position: fixed; top: 22px; left: 0; right: 0; z-index: 100;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 0 clamp(20px, 4vw, 64px);
  pointer-events: none;
}
.nav > * { pointer-events: auto; }
.nav__pill:not(.nav__pill--cta) { grid-column: 1; justify-self: start; }
.nav__pill--cta { grid-column: 3; justify-self: end; }
.nav__burger { grid-column: 3; justify-self: end; }
.nav__pill {
  flex: 0 0 auto; display: flex; align-items: center; gap: 4px;
  padding: 8px; border-radius: 9999px;
  background: rgba(5, 9, 52, .34);
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
  backdrop-filter: blur(16px) saturate(1.25);
}
.nav__group { display: flex; align-items: center; gap: 2px; }
.nav__pill a {
  font-family: var(--ui); font-weight: 500; font-size: 15px; letter-spacing: .02em;
  color: rgba(255, 255, 255, .9); text-decoration: none;
  padding: 14px 18px; border-radius: 9999px;
  white-space: nowrap;
  transition: color .3s, background .3s;
  position: relative; z-index: 1;
}
.nav__pill a:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.nav__cta {
  font-family: var(--ui); font-weight: 500; font-size: 17px; letter-spacing: .02em;
  background: #fff; color: var(--navy-deep); text-decoration: none;
  padding: 14px 26px; border-radius: 9999px; white-space: nowrap;
  transition: background .3s, color .3s;
  position: relative; z-index: 1;
}
.nav__cta:hover { background: var(--gold); color: var(--navy-deep); }
.nav__brand {
  grid-column: 2; grid-row: 1;
  display: inline-flex; text-decoration: none;
}
.glogo { position: relative; display: block; aspect-ratio: 338 / 204; }
.glogo__edge {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; overflow: visible; display: block;
}
.glogo__edge g { stroke: url(#gw-edge); }
.nav__brand { z-index: 5; }
.nav__brand .glogo { width: 152px; }
.nav__brand .gw {
  background: rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: blur(12px) saturate(1.3) brightness(1.08);
  backdrop-filter: blur(12px) saturate(1.3) brightness(1.08);
}
body[data-nav="dark"]:not(.menu-open) .nav .gw {
  background: linear-gradient(115deg, rgba(0, 4, 72, .14) 0%, rgba(0, 4, 72, .05) 50%, rgba(0, 4, 72, .1) 100%);
  -webkit-backdrop-filter: blur(14px) saturate(1.3) brightness(.96);
  backdrop-filter: blur(14px) saturate(1.3) brightness(.96);
}
body[data-nav="dark"]:not(.menu-open) .nav .glogo__edge g { stroke: url(#gw-edge-dark); }
/* Textfarbe/Glass folgt der Sektion darunter (data-nav am body) */
body[data-nav="dark"]:not(.menu-open) .nav__pill a { color: var(--ink); }
body[data-nav="dark"]:not(.menu-open) .nav__pill a:hover { background: rgba(0, 4, 72, .08); color: var(--ink); }
.nav .nav__pill a.nav__cta { background: #fff; color: var(--navy-deep); }
.nav .nav__pill a.nav__cta:hover { background: var(--gold); color: var(--navy-deep); }
body[data-nav="dark"]:not(.menu-open) .nav .nav__pill a.nav__cta { background: var(--navy-deep); color: #fff; }
body[data-nav="dark"]:not(.menu-open) .nav .nav__pill a.nav__cta:hover { background: var(--blue-royal); color: #fff; }
body[data-nav="dark"]:not(.menu-open) .nav__pill { background: rgba(255, 255, 255, .55); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .6); }
body[data-nav="dark"]:not(.menu-open) .nav__burger { color: var(--ink); }
.nav__burger {
  display: none; position: relative; z-index: 130;
  width: 46px; height: 46px; border-radius: 50%;
  color: var(--paper);
}
.nav__burger span { position: absolute; left: 13px; right: 13px; height: 1.6px; background: currentColor; transition: transform .35s var(--ease), top .35s; z-index: 1; }
.nav__burger span:nth-child(1) { top: 18px; }
.nav__burger span:nth-child(2) { top: 26px; }
.nav__burger[aria-expanded="true"] span:nth-child(1) { top: 22px; transform: rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { top: 22px; transform: rotate(-45deg); }
body.menu-open .nav__burger { color: var(--paper); }

/* Footer nutzt weiterhin Brand + Wortmarke */
.footer .nav__brand { position: static; transform: none; display: inline-flex; align-items: center; gap: 13px; }

@media (max-width: 1100px) {
  .nav__pill, .nav__cta { display: none; }
  .nav__burger { display: block; margin-left: auto; }
}

.mmenu {
  position: fixed; inset: 0; z-index: 95; background: var(--navy);
  display: flex; flex-direction: column; justify-content: center; gap: 40px;
  padding: 0 var(--gutter) max(30px, calc(env(safe-area-inset-bottom, 0px) + 22px));
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path .65s var(--ease-out), visibility 0s .65s;
}
.mmenu--open { clip-path: inset(0 0 0% 0); visibility: visible; transition: clip-path .65s var(--ease-out), visibility 0s; }
.mmenu__links { display: flex; flex-direction: column; gap: 6px; }
.mmenu__links a {
  font-family: var(--display); font-weight: 700; font-size: clamp(32px, 9vw, 48px);
  color: var(--paper); text-decoration: none; line-height: 1.16;
  opacity: 0; transform: translateY(24px);
  transition: opacity .5s var(--ease), transform .5s var(--ease), color .3s;
}
.mmenu--open .mmenu__links a { opacity: 1; transform: none; }
.mmenu__links a:hover { color: var(--blue-bright); }
.footer__badge--mobile { display: none; }

/* Touch: grosse Anker-Kacheln nicht antippbar — verhindert versehentliche
   Spruenge zu anderen Sektionen beim Scrollen (Bento, News-Cards, Partner-Wall);
   .card--post (News-Overlay-Buttons) bleiben antippbar */
@media (pointer: coarse) {
  .hbento .hb,
  #news-grid .card,
  .pwall .pcard { pointer-events: none; }
  #news-grid .card--post { pointer-events: auto; }
}

/* Links mittig, Copyright + Badge unten angepinnt */
.mmenu__links { margin-top: auto; }
.mmenu__foot { margin-top: auto; font-size: 13px; color: var(--dim-on-dark); letter-spacing: .08em; text-align: center; }
.mmenu__badge { display: block; width: fit-content; margin: 4px auto 0; opacity: .8; transition: opacity .3s; }
.mmenu__badge:hover { opacity: 1; }
.mmenu__badge img { width: 108px; height: auto; display: block; }

/* ============ Buttons ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--ui); font-weight: 500; font-size: 14.5px; letter-spacing: .03em;
  padding: 15px 30px; border-radius: 14px; text-decoration: none;
  position: relative; overflow: hidden;
  transition: background-color .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease), transform .22s var(--ease);
  will-change: transform;
  z-index: 0;
}
/* Einheitliches Hover-System: Flaeche und Textfarbe wechseln synchron (immer lesbar) + dezenter Lift */
.btn--pill { border-radius: 999px; }
.btn > * { position: relative; z-index: 1; }
.btn:hover { background: var(--gold) !important; border-color: var(--gold) !important; color: var(--navy) !important; transform: translateY(-2px) scale(1.02); }
.btn:active { transform: translateY(0) scale(.98); transition-duration: .1s; }
.btn--primary { background: var(--blue); color: #fff; }
.btn--ghost { border: 1.4px solid rgba(244, 243, 238, .4); color: var(--paper); }
.sec--paper .btn--ghost { border-color: rgba(0, 4, 72, .4); color: var(--ink); }
.btn--gold { background: var(--gold); color: var(--navy); }
.btn--gold:hover { background: var(--paper) !important; border-color: var(--paper) !important; }
.btn--ink { border: 1.4px solid var(--ink); color: var(--ink); }
/* Hover „Zum Matching“: Gold mit dunklem Text (vorher dunkelblau + heller Text,
   auf hellem Grund schlecht ablesbar). Auf Kundenwunsch wie der Let's-match-CTA. */
.btn--ink:hover { background: var(--gold) !important; border-color: var(--gold) !important; color: var(--navy-deep) !important; }
.btn--nav { padding: 11px 22px; font-size: 13px; background: var(--blue); color: #fff; }
.btn--big { padding: 20px 44px; font-size: 16.5px; }

/* ============ Sections base ============ */
.sec { position: relative; padding: clamp(90px, 12vw, 170px) 0; }
.sec--paper { background: var(--paper); color: var(--ink); }
.sec--navy { background: var(--navy); color: var(--paper); }
/* Grosse Sektions-Ueberschrift (frueher Eyebrow) */
.sec__title {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(44px, 6.4vw, 96px); line-height: .98; letter-spacing: -.015em;
}
.sec__title em { font-style: normal; color: var(--blue); }
.sec--navy .sec__title em { color: var(--blue-bright); }
/* Subline (frueher grosse Zeile) */
.sec__sub {
  font-family: var(--ui); font-weight: 400;
  font-size: clamp(17px, 1.9vw, 24px); line-height: 1.35;
  margin-top: 18px; max-width: 34ch;
  color: var(--dim-on-paper);
}
.sec--navy .sec__sub, .themen .sec__sub { color: inherit; }
.sec--navy .sec__sub { color: var(--blue-bright); }
.sec--paper .sec__sub, .themen__head .sec__sub { color: var(--ink); opacity: .8; }
.sec__lede { font-size: clamp(15.5px, 1.35vw, 18px); max-width: 46ch; color: var(--dim-on-paper); }
.sec--navy .sec__lede { color: var(--dim-on-dark); }
.sec__lede--dim { opacity: .75; margin-top: 14px; }
.sec__head {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 30px 70px; align-items: end;
  margin-bottom: clamp(44px, 6vw, 90px);
}
.sec__head > .sec__lede { justify-self: end; }
.sec__head .sec__lede { padding-bottom: 8px; }
.sec__more { margin-top: clamp(40px, 5vw, 70px); display: flex; justify-content: center; }

/* Reveal-Grundzustand (JS animiert) */
.hline { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.hline > span { display: inline-block; transform: translateY(112%); }

/* ============ Hero — zweigeteilt: Gradient links, Bild rechts ============ */
.hero {
  position: relative; min-height: 100svh; overflow: clip;
  display: flex; flex-direction: column; align-items: center;
  background: var(--grad-figma);
}

.hero__canvas { position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: screen; }
.hero__canvas canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero__content {
  position: relative; z-index: 2; width: 100%;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: max(15vh, 120px) var(--gutter) 0;
}
.hero__title {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(46px, 6.6vw, 108px);
  line-height: .98; letter-spacing: -.015em;
  color: var(--navy-deep);
}
.hero__title em { font-style: normal; color: var(--blue-royal); }
.hero__strap {
  font-family: var(--ui); font-weight: 500;
  font-size: clamp(16px, 1.7vw, 24px); letter-spacing: .01em;
  color: var(--navy-deep);
  margin-top: 3vh;
}
.hero__ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 4.5vh; }
/* CTAs auf hellem Verlaufsbereich: kraeftig absetzen; eckig mit leichter Rundung (Figma) */

.hero .btn--primary { background: var(--navy-deep); color: #fff; box-shadow: 0 14px 34px -12px rgba(0, 4, 72, .45); }
.hero .btn--ghost { border-color: #fff; color: #fff; }
.hero__matchbtn {
  position: absolute;
  left: 19%; right: 19%;
  top: 59.5%; height: 16.5%;
  border-radius: 999px;
  cursor: pointer;
  transition: transform .3s var(--ease);
}
/* Pulse als perfekter Kreis aus der Button-Mitte */
.hero__matchbtn::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  height: 115%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  animation: matchpulse 2.6s var(--ease) infinite;
  pointer-events: none;
}
.hero__matchbtn:hover { transform: scale(1.045); }
.hero__matchbtn:hover::after { animation-play-state: paused; }
@keyframes matchpulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(70, 109, 255, .55); }
  55% { box-shadow: 0 0 0 22px rgba(70, 109, 255, 0); }
}
@media (prefers-reduced-motion: reduce) { .hero__matchbtn::after { animation: none; } }

/* ============ Worum gehts — 3 Varianten ============ */
.statement {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(26px, 3.4vw, 48px); line-height: 1.18; letter-spacing: -.005em;
  max-width: 24ch;
}
.statement em { font-style: normal; color: var(--blue); }
.statement--s { font-size: clamp(22px, 2.4vw, 34px); max-width: 26ch; }
.statement .w { opacity: .12; display: inline-block; transition: opacity .5s var(--ease); transition-delay: calc(var(--i, 0) * 36ms); }
.statement.in .w { opacity: 1; }

.vm { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 60px); margin-top: clamp(50px, 6vw, 90px); }
.vm--stack { grid-template-columns: 1fr; gap: 26px; margin-top: clamp(34px, 4vw, 54px); }
.vm__item { border-top: 1.6px solid var(--ink); padding-top: 24px; }
.vm__label {
  font-family: var(--ui); font-weight: 500; font-size: 12.5px; letter-spacing: .26em;
  text-transform: uppercase; color: var(--blue); display: block; margin-bottom: 14px;
}
.vm__item p { font-family: var(--ui); font-weight: 400; font-size: clamp(17px, 1.6vw, 22px); line-height: 1.42; color: var(--ink); max-width: 34ch; }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 60px); margin-top: clamp(50px, 7vw, 100px); }
.stats__num {
  font-family: var(--display); font-weight: 700; font-size: clamp(40px, 4.8vw, 72px);
  line-height: 1; color: var(--blue); display: block; margin-bottom: 12px;
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.stats__label { font-size: 14px; color: var(--dim-on-paper); max-width: 30ch; display: block; }
.stats--gold .stats__num { color: var(--gold); }
.stats--gold .stats__label { color: var(--dim-on-dark); }
.stats--compact { gap: 18px; margin-top: clamp(30px, 4vw, 50px); }
.stats--compact .stats__num { font-size: clamp(30px, 3vw, 46px); margin-bottom: 4px; }

/* Variante A: Editorial */
.worum__grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(36px, 6vw, 100px); align-items: start; }
.worum__side { position: sticky; top: 12vh; }
.worum__side .sec__lede { margin-top: 26px; }
.worum__etchcard {
  margin-top: clamp(30px, 4vw, 50px);
  background: #fff; padding: 14px 14px 12px;
  box-shadow: 0 20px 50px -24px rgba(19, 19, 71, .35);
  max-width: 320px;
}
.worum__etchcard img { width: 100%; mix-blend-mode: multiply; }
.worum__etchcard figcaption {
  font-family: var(--ui); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--dim-on-paper); margin-top: 10px;
}

/* ============ Matching ============ */
.matching { background: linear-gradient(180deg, #000000 0%, #030848 55%, var(--navy) 100%); }
.matching__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 110px); align-items: start; }
.matching__intro { position: sticky; top: 16vh; }
.matching__intro .btn { margin-top: 36px; }
.matching__intro .sec__lede { margin-top: 22px; }
.steps { list-style: none; display: flex; flex-direction: column; }
.step {
  position: relative; display: flex; gap: clamp(20px, 3vw, 44px); align-items: flex-start;
  padding: clamp(34px, 4vw, 56px) 0;
}
.step + .step { border-top: 1px solid var(--line-dark); }
.step__no {
  font-family: var(--display); font-weight: 700; font-size: clamp(64px, 8vw, 128px); line-height: .9;
  color: transparent; -webkit-text-stroke: 1.4px var(--blue-bright);
  flex: none; min-width: 1.2ch;
}
.step.is-active .step__no { color: var(--blue-bright); -webkit-text-stroke-color: transparent; text-shadow: 0 0 40px rgba(70, 109, 255, .5); }
.step__body h3 { font-family: var(--display); font-weight: 700; font-size: clamp(22px, 2.4vw, 32px); margin-bottom: 10px; }
.step__body p { color: var(--dim-on-dark); max-width: 40ch; font-size: 15.5px; }
.step__flow { position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%; background: linear-gradient(90deg, var(--blue), transparent); transform: scaleX(0); transform-origin: left; }

/* ============ Aktuelles — Filter-Pills + Cards nach Figma ============ */
/* Layout der Filterzeile: die verbindliche Regel steht weiter unten unter
   #news-filter (hoehere Spezifitaet) — hier nur der Aussenabstand. */
.filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(30px, 4vw, 50px); }
.chip {
  font-family: var(--card-font); font-weight: 400; font-size: 14px;
  padding: 7px 16px; border-radius: 200px;
  background: rgba(244, 243, 238, .16); color: #fff;
  transition: all .3s var(--ease);
}
.chip:hover { background: rgba(244, 243, 238, .3); }
.chip[aria-pressed="true"] { background: var(--chip-active-bg); color: #fff; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
/* Card nach Figma "Card 3": weiss, Bild auf Blau, Tag-Pill, Logo + Linie + Titel */
.card {
  position: relative; background: #fff; text-decoration: none;
  padding: 10px; display: flex; flex-direction: column;
  font-family: var(--card-font);
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out);
  overflow: hidden;
}
.card:hover { transform: translateY(-6px); box-shadow: 0 24px 50px -22px rgba(0, 3, 48, .55); }
.card--hidden { display: none; }
.card__media {
  position: relative; background: var(--blue); overflow: hidden;
  /* 16:9 auf Kundenwunsch (30.07.2026) — vorher 332/317, also nahezu quadratisch.
     Die Klasse gehoert ausschliesslich den News-Karten, andere Kartentypen
     bringen ihr eigenes Seitenverhaeltnis mit. */
  aspect-ratio: 16 / 9;
}
.card__media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  /* Die fuenf Themen-Motive sind quadratisch (664x664); im 16:9-Rahmen faellt
     oben und unten je gut ein Fuenftel weg. Der Bildinhalt sitzt bei allen
     Motiven zwischen etwa 25% und 70% der Hoehe, deshalb der leichte Versatz
     nach oben statt mittig — so bleiben Koepfe und Gesichter im Ausschnitt.
     Gilt genauso fuer gehotlinkte Partnerbilder, wo das Motiv ueblicherweise
     ebenfalls in der oberen Bildhaelfte liegt. */
  object-position: center 45%;
  transition: transform .7s var(--ease-out);
}
.card:hover .card__media img { transform: scale(1.05); }
.card__tag {
  position: absolute; left: 10px; top: 10px; z-index: 2;
  font-family: var(--card-font); font-weight: 400; font-size: 12px;
  background: var(--blue); color: var(--paper);
  padding: 5px 12px; border-radius: 200px;
  box-shadow: 0 2px 8px rgba(0, 4, 72, .25);
}
.card__foot { padding: 14px 6px 8px; display: flex; flex-direction: column; gap: 10px; }
.card__logo { height: 18px; width: auto; max-width: 110px; object-fit: contain; object-position: left; }
.card__brand { font-family: var(--ui); font-weight: 500; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--navy-deep); }
.card__line { display: block; height: 1px; background: rgba(0, 4, 72, .18); }
.card__prov {
  align-self: flex-start;
  font-family: var(--card-font); font-weight: 400; font-size: 12px;
  color: var(--navy-deep);
  background: rgba(70, 109, 255, .12);
  padding: 5px 12px; border-radius: 200px;
}
.card__excerpt {
  font-family: var(--card-font); font-weight: 400; font-size: 13.5px; line-height: 1.55;
  color: rgba(0, 4, 72, .62);
}
.card__foot h3 {
  font-family: var(--card-font); font-weight: 400; font-size: 16px; line-height: 1.3;
  color: var(--navy-deep);
}
.card__cta { font-family: var(--card-font); font-size: 13px; color: var(--blue); display: inline-flex; gap: 7px; align-items: center; }
.card__cta i { font-style: normal; transition: transform .3s var(--ease); }
.card:hover .card__cta i { transform: translateX(5px); }

/* ============ Karte ============ */
/* overflow-x clip: Karten-Canvas ragt seitlich ueber die Stage hinaus —
   ohne Clip an der Sektion weitet iOS Safari das gesamte Layout-Viewport auf
   (Seite wirkt nach links verschoben, rechts fehlt der Rand) */
/* overflow: clip auf beiden Achsen. Bisher stand hier nur overflow-x — die
   Pin- und Beschriftungsebenen ragen absichtlich 140px nach oben und unten und
   620px nach rechts ueber die Buehne hinaus (die Karte laeuft hinter der Liste
   weiter). Vertikal wurde das nicht abgeschnitten: beim Scrollen blieben
   Kartenreste ueber und unter der Sektion stehen, in Corinnas Screenshot der
   Schriftzug "Walldorf". Auf Sektionsebene abschneiden statt an der Buehne,
   sonst endet die Karte vor der Liste statt dahinter. */
.karte { background: radial-gradient(130% 110% at 50% -8%, var(--navy-2), var(--navy) 68%); overflow: clip; }
@supports not (overflow: clip) {
  .karte { overflow-x: hidden; }
}
.map__layout {
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(320px, .6fr);
  gap: clamp(20px, 2.6vw, 40px); align-items: stretch;
}
.map__stage {
  position: relative; border: none; border-radius: 0; overflow: visible;
  background: transparent;
  height: clamp(520px, 74vh, 780px); touch-action: none;
}
.map__stage canvas { display: block; }
.map__hint { position: absolute; left: 18px; bottom: 15px; font-size: 12px; letter-spacing: .04em; color: var(--dim-on-dark); pointer-events: none; z-index: 5; }
.map__legend {
  position: absolute; right: 16px; top: 14px; z-index: 5; display: flex; gap: 14px;
  font-size: 11px; color: var(--dim-on-dark);
  background: rgba(0, 4, 40, .4); border: 1px solid var(--line-dark); border-radius: 10px;
  padding: 8px 12px; backdrop-filter: blur(6px);
}
.map__legend span { display: inline-flex; align-items: center; gap: 6px; }
.lg { width: 9px; height: 9px; border-radius: 2px; background: var(--blue); }
.lg--gold { background: var(--gold); border-radius: 50%; }
.lg--line { width: 14px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--blue), var(--blue-bright)); }

.map__panel {
  display: flex; flex-direction: column; gap: 14px;
  height: clamp(520px, 74vh, 780px);
  min-width: 0;
}
.map__tabs { display: flex; gap: 8px; }
.mtab {
  flex: 1 1 0; min-width: 0; font-family: var(--ui); font-weight: 500; font-size: 12.5px; letter-spacing: .02em;
  padding: 11px 8px; border-radius: 12px; border: 1px solid var(--line-dark);
  color: var(--dim-on-dark); display: flex; align-items: center; justify-content: center; gap: 8px;
  white-space: nowrap;
  transition: all .3s var(--ease);
}
@media (max-width: 560px) {
  .mtab { gap: 5px; padding: 11px 4px; font-size: 12px; letter-spacing: 0; }
  .map__tabs { gap: 2px; padding: 6px; }
}
.mtab .sw { width: 12px; height: 12px; border-radius: 999px; background: var(--gold); flex: none; border: 1px solid rgba(255, 229, 170, .4); }
.mtab[data-layer="raeume"] .sw { background: var(--blue); border-color: rgba(157, 180, 255, .3); }
.mtab[data-layer="industrie"] .sw { background: rgba(244, 243, 238, .85); border-color: rgba(244, 243, 238, .4); }
.mtab .ct { font-size: 11px; opacity: .7; font-variant-numeric: tabular-nums; }
.mtab:hover { border-color: var(--blue); color: var(--paper); }
.mtab[aria-selected="true"] { background: rgba(70, 109, 255, .13); border-color: var(--blue); color: var(--paper); }
.map__list {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  border: 1px solid var(--line-dark); border-radius: 16px;
  padding: 8px; display: flex; flex-direction: column; gap: 2px;
  scrollbar-width: thin; scrollbar-color: rgba(157, 180, 255, .35) transparent;
  background: rgba(157, 180, 255, .08);
  background-blend-mode: luminosity;
  -webkit-backdrop-filter: blur(14px) saturate(1.35) brightness(1.12);
  backdrop-filter: blur(14px) saturate(1.35) brightness(1.12);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .14);
}
.mrow {
  display: flex; align-items: center; gap: 12px; text-align: left;
  padding: 11px 12px; border-radius: 11px; border: 1px solid transparent;
  transition: background .25s, border-color .25s;
}
.mrow:hover { background: rgba(70, 109, 255, .09); }
.mrow.is-active { background: rgba(70, 109, 255, .16); border-color: rgba(70, 109, 255, .55); }
.mrow__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--gold); flex: none; box-shadow: 0 0 0 3px rgba(255, 229, 170, .18); }
.mrow--raeume .mrow__dot { background: var(--blue); box-shadow: 0 0 0 3px rgba(70, 109, 255, .18); }
.mrow--industrie .mrow__dot { background: transparent; border: 1.4px solid var(--paper); }
.mrow__name { font-family: var(--ui); font-weight: 500; font-size: 13.5px; color: var(--paper); line-height: 1.25; }
.mrow__city { margin-left: auto; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim-on-dark); flex: none; }
.mrow.is-active .mrow__city { color: var(--gold); }
.map__card {
  border: 1px solid var(--line-dark); border-radius: 16px; padding: 20px 22px;
  min-height: 132px; position: relative; overflow: hidden; flex: none;
  background: rgba(157, 180, 255, .08);
  background-blend-mode: luminosity;
  -webkit-backdrop-filter: blur(14px) saturate(1.35) brightness(1.12);
  backdrop-filter: blur(14px) saturate(1.35) brightness(1.12);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .14);
}
.map__cardph { color: var(--dim-on-dark); font-size: 13.5px; }
.map__card h4 { font-family: var(--display); font-size: 20px; margin-bottom: 4px; }
.map__card .city { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; display: block; }
.map__card p { font-size: 13.5px; color: var(--dim-on-dark); margin-bottom: 12px; }
.map__card a.go { font-family: var(--ui); font-weight: 500; font-size: 13.5px; color: var(--blue-bright); display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.map__cardanim { opacity: 0; transform: translateY(12px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.map__card.show .map__cardanim { opacity: 1; transform: none; }

/* ============ Angebote (Rows + Hover-Preview) ============ */
.angebote__kicker {
  font-family: var(--ui); font-weight: 500; font-size: 12.5px; letter-spacing: .26em;
  text-transform: uppercase; color: var(--dim-on-paper); margin-bottom: 8px;
}
.rows { list-style: none; border-top: 1.6px solid var(--ink); }
.row {
  position: relative; display: grid;
  grid-template-columns: minmax(50px, 90px) minmax(0, 1.1fr) minmax(0, 1fr) 60px;
  align-items: center; gap: clamp(14px, 3vw, 44px);
  padding: clamp(24px, 3.2vw, 42px) 0;
  border-bottom: 1.3px solid var(--line-paper);
  cursor: pointer; transition: padding-left .4s var(--ease);
}
.row:hover { padding-left: 18px; }
.row__no {
  font-family: var(--display); font-weight: 700; font-size: clamp(26px, 3vw, 44px);
  color: transparent; -webkit-text-stroke: 1.2px var(--blue); transition: color .3s var(--ease);
}
.row:hover .row__no { color: var(--blue); }
.row h3 { font-family: var(--display); font-weight: 700; font-size: clamp(22px, 2.6vw, 36px); line-height: 1.1; }
.row p { font-size: 15px; color: var(--dim-on-paper); max-width: 42ch; }
.row__arrow { font-size: 26px; color: var(--blue); justify-self: end; transition: transform .35s var(--ease); }
.row:hover .row__arrow { transform: translateX(8px); }
.row-preview {
  position: fixed; z-index: 90; width: 260px; aspect-ratio: 5 / 4; pointer-events: none;
  border-radius: 14px; overflow: hidden; background: #fff;
  box-shadow: 0 30px 70px -20px rgba(19, 19, 71, .45);
  opacity: 0; transform: scale(.85) rotate(-3deg);
}
.row-preview img { width: 100%; height: 100%; object-fit: cover; }

/* ============ Themen Showcase — Figma-Komposition ============ */
.themen { background: var(--paper); color: var(--ink); position: relative; }

/* ============ Räume ============ */
.rooms { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.room { text-decoration: none; display: block; }
.room__media { border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 5; }
.room__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out), filter .6s; filter: saturate(.85); }
.room:hover .room__media img { transform: scale(1.06); filter: saturate(1.05); }
.room__body { padding: 20px 4px 0; }
.room__body h3 { font-family: var(--display); font-weight: 700; font-size: clamp(20px, 2vw, 27px); margin-bottom: 6px; }
.room__body p { font-size: 14px; color: var(--dim-on-dark); }

/* ============ Partner ============ */
.marquee { overflow: hidden; padding: clamp(10px, 2vw, 26px) 0 clamp(40px, 5vw, 70px); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; gap: clamp(40px, 6vw, 90px); width: max-content; align-items: center; }
.marquee__item { flex: none; display: flex; align-items: center; gap: 16px; }
.marquee__item img { height: clamp(30px, 3.4vw, 46px); width: auto; max-width: 190px; object-fit: contain; filter: grayscale(1) brightness(.35) sepia(1) hue-rotate(200deg) saturate(2.4); opacity: .8; transition: filter .35s, opacity .35s; }
.marquee__item:hover img { filter: none; opacity: 1; }
.marquee__item span { font-family: var(--ui); font-weight: 500; font-size: 15px; color: var(--dim-on-paper); white-space: nowrap; }
.pnames { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 0; border-top: 1.6px solid var(--ink); padding-top: 28px; }
.pnames li {
  font-family: var(--ui); font-weight: 400; font-size: clamp(15px, 1.5vw, 19px); color: var(--ink);
  display: inline-flex; align-items: center;
}
.pnames li::after { content: '·'; margin: 0 14px; color: var(--blue); }
.pnames li:last-child::after { content: ''; margin: 0; }

/* ============ Finale ============ */
.finale { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: clip; background: var(--navy); }
.finale__bg { position: absolute; inset: -12% 0; z-index: 0; }

.finale__content { position: relative; z-index: 2; width: 100%; padding-top: 14vh; padding-bottom: 14vh; }
.finale__title { font-family: var(--display); font-weight: 700; font-size: clamp(48px, 8.4vw, 128px); line-height: .98; letter-spacing: -.015em; margin-bottom: 4vh; }
.finale__title em { font-style: normal; color: var(--blue-royal); }
.finale__copy { max-width: 56ch; color: var(--dim-on-dark); font-size: clamp(15px, 1.35vw, 18px); margin-bottom: 14px; }
.finale__copy--strong { color: var(--paper); font-weight: 400; }
.finale .btn { margin-top: 26px; }

/* ============ Footer ============ */
.footer { background: #01021c; padding: 60px 0 30px; border-top: 1px solid var(--line-dark); }
.footer .nav__word, .footer .nav__links a { color: var(--paper); }
.footer__grid { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px 40px; margin-bottom: 40px; }
.footer__badges { display: flex; align-items: center; gap: 16px; }
.footer__links { display: flex; gap: 26px; }
.footer__links a { font-size: 13.5px; color: var(--dim-on-dark); text-decoration: none; }
.footer__links a:hover { color: var(--paper); }
.footer__meta { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px 40px; font-size: 12px; color: rgba(244, 243, 238, .38); letter-spacing: .06em; }
.footer__meta > span { justify-self: start; }
.footer__meta .footer__links { justify-self: center; }


/* ============ Liquid Glass auf Sektions-Komponenten ============ */
.mtab, .map__legend {
  background: rgba(255, 255, 255, 0.02);
  background-blend-mode: luminosity;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: none;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}
.map__card {
  background: rgba(157, 180, 255, .08);
  background-blend-mode: luminosity;
  backdrop-filter: blur(14px) saturate(1.35) brightness(1.12);
  -webkit-backdrop-filter: blur(14px) saturate(1.35) brightness(1.12);
  border: none;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .14);
  position: relative;
  overflow: hidden;
}
.mtab::before, .map__card::before, .map__legend::before,
.chip[aria-pressed="false"]::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1.4px;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.45) 0%,
    rgba(255, 255, 255, 0.15) 20%,
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 255, 255, 0) 60%,
    rgba(255, 255, 255, 0.15) 80%,
    rgba(255, 255, 255, 0.45) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.mtab > *, .map__card > * { position: relative; z-index: 1; }
.mtab:hover { background: rgba(255, 255, 255, 0.06); color: var(--paper); }
.mtab[aria-selected="true"] { background: rgba(70, 109, 255, .2); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.18); }
.map__list {
  background: rgba(157, 180, 255, .08);
  background-blend-mode: luminosity;
  backdrop-filter: blur(14px) saturate(1.35) brightness(1.12);
  -webkit-backdrop-filter: blur(14px) saturate(1.35) brightness(1.12);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .14);
}
.chip[aria-pressed="false"] {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
  position: relative; overflow: hidden;
}


/* ============ Bento-Karten (Layout-Referenz NexusSci) ============ */
.bento { display: grid; gap: 16px; margin-top: 16px; }
.bento:first-of-type { margin-top: clamp(30px, 4vw, 50px); }
.bento--3 { grid-template-columns: 1.25fr 1fr 1fr; }
.bento--3 + .bento--3 { grid-template-columns: 1.25fr 1fr 1fr; }
.bento--2 { grid-template-columns: 1.2fr 1fr; }
.bcard {
  position: relative; border-radius: 28px; overflow: hidden;
  min-height: 340px; padding: clamp(22px, 2.4vw, 32px);
  display: flex; flex-direction: column; gap: 18px;
  font-family: var(--card-font);
}
.bcard h3 { font-family: var(--display); font-weight: 700; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.1; letter-spacing: -.01em; }
.bcard p { font-size: clamp(14.5px, 1.15vw, 16.5px); line-height: 1.5; max-width: 40ch; }
.bcard__body { margin-top: auto; display: flex; flex-direction: column; gap: 10px; position: relative; z-index: 2; }
.bcard__label {
  font-family: var(--ui); font-weight: 500; font-size: 12.5px; letter-spacing: .26em;
  text-transform: uppercase;
}
.bcard__icon {
  width: 46px; height: 46px; border-radius: 14px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .2); color: #fff;
  position: relative; z-index: 2;
}
.bcard__icon--ink { background: rgba(0, 4, 72, .08); color: var(--navy-deep); }
.bcard__btn {
  position: relative; z-index: 2;
  display: inline-flex; align-items: center; gap: 10px; width: fit-content;
  background: #fff; color: var(--navy-deep); text-decoration: none;
  font-family: var(--ui); font-weight: 500; font-size: 14px; letter-spacing: .04em;
  padding: 13px 22px; border-radius: 9999px;
  transition: background .3s, transform .3s;
}
.bcard__btn:hover { background: var(--gold); transform: translateY(-2px); }
.bcard__btn i { font-style: normal; font-size: 17px; line-height: 1; }
.bcard__chip {
  position: relative; z-index: 2;
  background: #fff; color: var(--navy-deep);
  border-radius: 18px; padding: 14px 20px; width: fit-content; max-width: 92%;
  font-family: var(--card-font); font-weight: 500;
  font-size: clamp(15px, 1.3vw, 19px); line-height: 1.3;
  box-shadow: 0 10px 30px -18px rgba(0, 4, 72, .4);
}
.bcard__chip--sub { font-weight: 400; font-size: clamp(13px, 1vw, 15px); color: var(--dim-on-paper); padding: 10px 16px; }
.bcard__num {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(46px, 4.8vw, 78px); line-height: .95; letter-spacing: -.02em;
  position: relative; z-index: 2;
}
.bcard__num--step { font-size: clamp(48px, 5vw, 80px); }
.bcard__num .stats__num { font-size: inherit; color: inherit; margin: 0; display: inline; }
.bcard__text { position: relative; z-index: 2; }
.bcard__chips { display: flex; flex-wrap: wrap; gap: 8px; position: relative; z-index: 2; }
.bcard__minichip {
  background: #fff; color: var(--navy-deep); border-radius: 9999px;
  padding: 8px 16px; font-size: 13.5px; font-weight: 500;
  box-shadow: 0 6px 18px -12px rgba(0, 4, 72, .4);
}
.bcard__minichip--line { background: none; border: 1.3px solid var(--line-paper); box-shadow: none; color: var(--dim-on-paper); }
.bcard__chip strong { display: block; font-weight: 600; }
.bcard__chip small { display: block; font-weight: 400; font-size: .78em; color: var(--dim-on-paper); margin-top: 3px; }

/* Split-Layout: Bild-Kachel links, Inhalt rechts (Referenz-Muster) */
.bcard--split { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 16px; padding: 12px; }
.bcard__tile {
  border-radius: 20px; background: var(--paper);
  overflow: hidden; display: flex; align-items: center; justify-content: center;
  min-height: 100%;
}
.bcard__tile img { width: 100%; height: 100%; object-fit: cover; }
.bcard__side { display: flex; flex-direction: column; padding: 14px 14px 12px 6px; min-width: 0; }
.bcard__side .bcard__body { margin-top: auto; }
.bcard__side .bcard__btn { margin-top: 18px; }

/* Varianten */
.bcard--blue { background: var(--navy-deep); color: #fff; }
.bcard--blue .bcard__label { color: rgba(255, 255, 255, .8); }
.bcard--blue .bcard__etch { mix-blend-mode: multiply; opacity: .9; }
.bcard__etch {
  position: absolute; left: -6%; bottom: -8%; width: 72%; max-height: 70%;
  object-fit: contain; object-position: bottom left;
  pointer-events: none; z-index: 1;
}
.bcard__etch--multiply { mix-blend-mode: multiply; opacity: .5; right: -10%; left: auto; width: 60%; }
.bcard--stat {
  background: linear-gradient(150deg, var(--ice) 0%, #D9E6F5 55%, #CFE3DC 100%);
  color: var(--navy-deep); justify-content: space-between;
}
.bcard--stat2 { background: linear-gradient(150deg, var(--paper) 0%, #E4E9F5 60%, #D1DEF7 100%); }
.bcard--navy { background: var(--navy-2); color: var(--paper); justify-content: space-between; }
.bcard--navy .bcard__num { color: var(--gold); }
.bcard--line { background: #fff; color: var(--ink); border: 1.3px solid var(--line-paper); }
.bcard--line .bcard__label { color: var(--blue); }
.bcard--line .bcard__text { margin-top: auto; font-family: var(--ui); font-weight: 400; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.45; color: var(--ink); }
.bcard--photo { padding: 0; justify-content: flex-end; }
.bcard--photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform .8s var(--ease-out); }
.bcard--photo:hover > img { transform: scale(1.04); }
.bcard--photo .bcard__chip { margin: 0 0 18px 18px; }
.bcard--photo .bcard__chip--sub { margin-top: -8px; }
.bcard--glass {
  background: rgba(255, 255, 255, 0.03);
  background-blend-mode: luminosity;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.12);
  color: var(--paper);
}
.bcard--glass::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1.4px;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.45) 0%,
    rgba(255, 255, 255, 0.15) 20%,
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 255, 255, 0) 60%,
    rgba(255, 255, 255, 0.15) 80%,
    rgba(255, 255, 255, 0.45) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.bcard--glass .bcard__num { color: var(--blue-bright); }
.matching .bcard--blue .bcard__num { color: #fff; }
.matching .bcard--stat h3, .matching .bcard--stat p { color: var(--navy-deep); }
.matching .bcard { min-height: 300px; }
.matching__note { margin-top: 26px; color: var(--dim-on-dark); font-size: clamp(14.5px, 1.2vw, 17px); text-align: center; }

/* ============ Responsive ============ */
@media (max-width: 1080px) {
  .bento--3, .bento--2 { grid-template-columns: 1fr 1fr; }
  .bento--3 .bcard--blue, .bento--2 .bcard--blue { grid-column: 1 / -1; }
  .matching__grid { grid-template-columns: 1fr; }
  .matching__intro { position: static; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .map__layout { grid-template-columns: 1fr; }
  .map__stage { height: clamp(420px, 58vh, 600px); }
  .map__panel { height: auto; }
  .map__list { max-height: 320px; }
  .themen__head { grid-template-columns: 1fr; align-items: start; }
  .marke__content { grid-template-columns: 1fr; }
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero__content { padding-top: 16vh; min-height: 62svh; }
  .hero__half--right { min-height: 46svh; }
  .worum__grid { grid-template-columns: 1fr; }
  .worum__side { position: static; }
}
@media (max-width: 760px) {
  .hero__title { font-size: clamp(42px, 12vw, 72px); }
  .bento--3, .bento--2 { grid-template-columns: 1fr; }
  .bcard { min-height: 280px; }
  .bcard--split { grid-template-columns: 1fr; }
  .bcard__tile { min-height: 220px; }
  .sec__head { grid-template-columns: 1fr; }
  .sec__head > .sec__lede { justify-self: start; }
  .stats--compact { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .cards { grid-template-columns: 1fr; }
  .row { grid-template-columns: 44px 1fr 34px; grid-template-areas: "no h arrow" "no p arrow"; }
  .row__no { grid-area: no; }
  .row h3 { grid-area: h; }
  .row p { grid-area: p; margin-top: 6px; }
  .row__arrow { grid-area: arrow; }
  .row-preview { display: none; }
  .rooms { grid-template-columns: 1fr; }
  .map__legend { display: none; }
  .footer__grid { justify-content: center; gap: 24px; }
  .footer__badges { flex-wrap: wrap; justify-content: center; }
}


/* ============ Technologien — Logo-Stage (Quadrat in der Marke) ============ */
.tstage {
  position: relative; min-height: 100svh;
  background: var(--navy); overflow: clip;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(26px, 4vh, 44px);
  padding: clamp(100px, 13vh, 140px) var(--gutter) clamp(70px, 9vh, 110px);
}
.tstage__title {
  position: relative; z-index: 4;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(30px, 3.4vw, 56px); line-height: 1.04;
  color: var(--paper); text-align: center; max-width: 20ch;
}
.tstage__logo {
  position: relative;
  width: min(62vw, 92svh);
  aspect-ratio: 338 / 204;
}
/* Glas-Wellen (Figma "final"/4858): echtes Liquid-Glass wie das Menü —
   clip-path-Flaechen mit Backdrop-Blur, ohne Kontur. Koordinatenraum 338x204,
   per --ls auf die Logo-Box skaliert (JS/ResizeObserver). */
.tstage__glassmark {
  position: absolute; inset: 0;
  z-index: 2; pointer-events: none;
}
.gw {
  position: absolute; inset: 0; display: block;
  background: rgba(255, 255, 255, 0.09);
  background-blend-mode: luminosity;
  -webkit-backdrop-filter: blur(var(--gwblur, 4px)) saturate(1.2) brightness(1.07);
  backdrop-filter: blur(var(--gwblur, 4px)) saturate(1.2) brightness(1.07);
}
.tstage__glassmark { --gwblur: 22px; }
.tstage__glassmark .gw {
  background: linear-gradient(115deg, rgba(255, 255, 255, .11) 0%, rgba(255, 255, 255, .03) 45%, rgba(255, 255, 255, .08) 100%);
  background-blend-mode: luminosity;
  -webkit-backdrop-filter: blur(var(--gwblur)) saturate(1.35) brightness(1.05);
  backdrop-filter: blur(var(--gwblur)) saturate(1.35) brightness(1.05);
}
.tstage__edge { opacity: .55; }
.tstage__edge {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 3; pointer-events: none; overflow: visible; display: block;
}
.gw--1 { clip-path: url(#gw-1); }
.gw--2 { clip-path: url(#gw-2); }
.gw--3 { clip-path: url(#gw-3); }
.gw--4 { clip-path: url(#gw-4); }

/* Perfektes Quadrat der Marke: 200x200 zwischen den Aussenkanten (x 68.57-268.57, y 2-202) */
.tstage__square {
  position: absolute; left: 20.29%; top: .98%; width: 59.17%; height: 98.04%;
  overflow: hidden; z-index: 1;
  background: var(--grad-figma);
}
.tstage__bg { position: absolute; inset: 0; z-index: 0; opacity: .45; pointer-events: none; }
.tstage__bg canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Foerderband (Tastelabs-Prinzip): Karten laufen ueber die volle Breite hinter dem Glas */
.tstage__belt {
  position: absolute; left: 0; right: 0; top: 50%;
  transform: translateY(-54%);
  height: min(46svh, 30vw); z-index: 1;
  cursor: grab; touch-action: pan-y;
}
.tstage__belt:active { cursor: grabbing; }
.tstage__track { position: absolute; left: 0; top: 0; height: 100%; display: flex; align-items: center; gap: clamp(14px, 1.6vw, 26px); will-change: transform; }
.tcard {
  transition: transform .6s var(--ease), opacity .6s var(--ease), box-shadow .6s var(--ease);
  position: relative; flex: none;
  height: 100%; aspect-ratio: 1 / 1;
  transform: scale(.9); opacity: .72;
  border-radius: 0; overflow: hidden;
  background: var(--grad-figma);
  transform: translateZ(0);
}
.tcard--alt { background: var(--grad-figma-2); }
.tcard.is-center { transform: scale(1); opacity: 1; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .55); }
.tcard img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  pointer-events: none;
}
.tcard .tag {
  position: absolute; left: 50%; bottom: 7%; transform: translateX(-50%);
  font-family: var(--card-font); font-size: clamp(10px, .95vw, 14px); font-weight: 500;
  background: var(--blue); color: var(--paper);
  padding: .45em 1.1em; border-radius: 200px; white-space: nowrap;
  max-width: 90%; overflow: hidden; text-overflow: ellipsis;
}
.tcard .idx {
  position: absolute; left: 9%; top: 6%;
  font-family: 'Azeret Mono', monospace; font-weight: 300;
  font-size: clamp(11px, 1vw, 14px); color: rgba(244, 243, 238, .85);
  text-shadow: 0 1px 8px rgba(0, 4, 72, .6);
}
.tstage__kicker {
  position: absolute; top: clamp(96px, 12vh, 130px); left: var(--gutter);
  font-family: 'Azeret Mono', monospace; font-weight: 300;
  font-size: 13px; letter-spacing: .08em; color: var(--blue-bright);
}
.tstage__line {
  position: absolute; left: var(--gutter); bottom: clamp(34px, 6vh, 60px);
  font-family: var(--display); font-weight: 700;
  font-size: clamp(19px, 1.9vw, 29px); line-height: 1.24;
  color: var(--paper); max-width: 24ch;
}
.tstage__meta {
  position: relative; z-index: 4;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-family: 'Azeret Mono', monospace; font-weight: 300; font-size: 13px;
  color: var(--dim-on-dark); text-align: center;
}
.tstage__name {
  color: var(--paper);
  font-family: var(--display); font-weight: 700;
  font-size: clamp(20px, 2vw, 30px);
}
.tstage__count b { font-weight: 400; color: var(--blue-bright); }
@media (max-width: 1460px) {
  .nav__pill a { font-size: 13.5px; padding: 12px 14px; }
  .nav__cta { font-size: 13.5px; padding: 12px 20px; }
  .nav__brand .glogo { width: 118px; }
}
@media (max-width: 1370px) {
  .nav__pill a { font-size: 12.5px; padding: 11px 12px; }
  .nav__pill { padding: 6px; }
  .nav__cta { font-size: 12.5px; padding: 11px 16px; }
  .nav__brand .glogo { width: 100px; }
}
@media (max-width: 900px) {
  .tstage__logo { width: min(94vw, 80svh); }
}

/* ============ Static-Modus (?static=1 — Screenshots/Tests, ohne JS lauffaehig) ============ */
html.static .cursor { display: none !important; }
html.static .hline > span { transform: none; }
html.static .statement .w { opacity: 1 !important; }

/* ============ Reduced Motion ============ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001s !important; transition-duration: .001s !important; }
  .hline > span { transform: none; }
  .manifest__statement .w { opacity: 1; }
  .cursor { display: none; }
  .marke__pixels span { animation: none; }
}

/* ============ Mixed Bento (Apple-M1-Prinzip): 12 Spalten, gemischte Spans ============ */
.mbento {
  display: grid; grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(118px, auto);
  grid-auto-flow: dense;
  gap: 12px; margin-top: clamp(30px, 4vw, 50px);
}
.c-2 { grid-column: span 2; } .c-3 { grid-column: span 3; } .c-4 { grid-column: span 4; }
.c-6 { grid-column: span 6; } .r-2 { grid-row: span 2; }
.cell {
  background: #fff; border-radius: 22px;
  padding: clamp(16px, 1.6vw, 24px);
  display: flex; flex-direction: column; gap: 10px; justify-content: center;
  font-family: var(--card-font); color: var(--ink);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
  position: relative; overflow: hidden; min-width: 0;
}
.cell:hover { transform: translateY(-3px); box-shadow: 0 18px 44px -24px rgba(0, 4, 72, .35); }
.cell__pill {
  width: fit-content; font-weight: 500; font-size: 14px;
  border: 1.4px solid var(--blue); color: var(--blue);
  padding: 5px 14px; border-radius: 9999px;
}
.cell__pill--label { border-color: var(--line-paper); color: var(--dim-on-paper); text-transform: uppercase; font-size: 11px; letter-spacing: .18em; }
.cell__small { font-size: clamp(13px, 1vw, 15px); line-height: 1.45; color: var(--ink); }
.cell__small b { font-weight: 600; }
.cell__tiny { font-size: 12px; color: var(--dim-on-paper); }
.cell__text { font-size: clamp(14px, 1.15vw, 17px); line-height: 1.5; color: var(--ink); max-width: 56ch; }
.cell--icon { align-items: flex-start; }
.cell--icon svg { color: var(--blue); flex: none; }
.cell--stat { justify-content: center; }
.cell__over { font-size: 12px; color: var(--dim-on-paper); }
.cell__num {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(34px, 3.1vw, 52px); line-height: 1; letter-spacing: -.01em;
  color: var(--ink);
}
.cell__num .stats__num { font-size: inherit; color: inherit; margin: 0; display: inline; }
.cell__num--blue { color: var(--blue); font-size: clamp(44px, 4vw, 66px); }
.cell__label { font-size: 13px; color: var(--dim-on-paper); line-height: 1.35; }
.cell__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.cell__chips span { font-size: 11.5px; font-weight: 500; color: var(--dim-on-paper); border: 1.2px solid var(--line-paper); border-radius: 9999px; padding: 3px 10px; }
.cell--feature { background: linear-gradient(160deg, #F4F6FE 0%, #E8EDFB 100%); }
.cell__grad {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(28px, 2.6vw, 44px); line-height: 1;
  background: linear-gradient(92deg, var(--blue) 0%, var(--blue-royal) 55%, #7D97F2 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  width: fit-content;
}
/* Zentrum: der "Chip"-Moment mit Glas-Logo auf Figma-Gradient */
.cell--hub {
  background: var(--grad-figma);
  align-items: center; justify-content: center; gap: 18px;
  min-height: 260px;
}
.glogo--cell { width: min(62%, 340px); }
.cell__hubword {
  font-family: var(--display); font-weight: 700; font-size: clamp(15px, 1.3vw, 19px);
  line-height: 1.1; letter-spacing: .06em; text-transform: uppercase;
  color: #fff; text-align: center;
}
.cell--media { padding: 10px; justify-content: flex-end; }
.cell--media img { position: absolute; inset: 8% 8% 22% 8%; width: 84%; height: 66%; object-fit: contain; mix-blend-mode: multiply; }
.cell__caption { position: relative; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim-on-paper); text-align: center; }
.cell--photo { padding: 0; justify-content: flex-end; }
.cell--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cell__chipfloat {
  position: relative; margin: 0 14px 14px; width: fit-content;
  background: #fff; color: var(--navy-deep); border-radius: 14px; padding: 10px 16px;
  font-weight: 500; font-size: clamp(13px, 1.05vw, 16px);
  box-shadow: 0 10px 30px -18px rgba(0, 4, 72, .4);
}
.cell--cta { background: var(--navy-2); color: var(--paper); }
.cell--cta .cell__small { color: var(--dim-on-dark); }
.cell--cta .bcard__btn { margin-top: 4px; }
@media (max-width: 1080px) {
  .mbento { grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(104px, auto); }
  .mbento .c-2 { grid-column: span 2; } .mbento .c-3 { grid-column: span 2; }
  .mbento .c-4, .mbento .c-6 { grid-column: span 4; }
  .mbento .cell--hub { grid-column: span 4; }
}
@media (max-width: 560px) {
  .mbento { grid-template-columns: repeat(2, 1fr); }
  .mbento .c-2, .mbento .c-3 { grid-column: span 2; }
}


/* ===== Worum: zentriertes Antigravity-Intro ===== */
.worum__intro { max-width: 1100px; margin: 0 auto clamp(48px, 6vw, 84px); text-align: center; }
.worum__intro-text {
  font-family: var(--display);
  font-size: clamp(30px, 3.6vw, 58px);
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: balance;
}
.worum__intro-text em { font-style: normal; color: var(--blue); }
@media (max-width: 560px) {
  .worum__intro { margin-bottom: 36px; }
}

/* ===== Let's match — Vollbild-Prompt ===== */
.lmatch {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: clamp(110px, 16vh, 170px) var(--gutter) clamp(70px, 10vh, 120px);
  background: var(--paper);
}
.lmatch { background: var(--ice); }
.lmatch__inner { width: min(720px, 100%); text-align: center; }
.lmatch__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(54px, 7.5vw, 118px);
  line-height: .98;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.lmatch__title em { font-style: normal; color: var(--blue); }
.lmatch__sub {
  margin: 18px auto 40px;
  max-width: 46ch;
  font-size: clamp(15.5px, 1.35vw, 18px);
  color: rgba(19, 19, 71, .72);
}
.lmatch__hint {
  margin-top: 22px;
  font-family: 'Azeret Mono', monospace;
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(19, 19, 71, .55);
}

/* Prompt-Box */
.pbox {
  position: relative;
  text-align: left;
  background: rgba(5, 8, 46, .92);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border: 1px solid rgba(157, 180, 255, .28);
  border-radius: 24px;
  padding: 10px;
  box-shadow: 0 12px 44px rgba(0, 3, 48, .38), 0 2px 10px rgba(0, 3, 48, .28);
  transition: border-color .3s var(--ease);
}
.pbox.is-rec { border-color: rgba(255, 92, 92, .7); }
.pbox__ta {
  display: block;
  width: 100%;
  min-height: 200px;
  max-height: 380px;
  padding: 10px 12px;
  background: transparent;
  border: 0;
  resize: none;
  font: inherit;
  font-size: 16px;
  line-height: 1.5;
  color: var(--paper);
  outline: none;
}
.pbox__ta::placeholder { color: rgba(244, 243, 238, .42); }
.pbox__ta::-webkit-scrollbar { width: 6px; }
.pbox__ta::-webkit-scrollbar-thumb { background: rgba(157, 180, 255, .35); border-radius: 3px; }
.pbox__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 8px; }
.pbox__tools { display: flex; align-items: center; gap: 2px; min-width: 0; }
.pbox__icon, .pbox__send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: rgba(244, 243, 238, .55);
  cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease), transform .2s var(--ease);
}
.pbox__icon:hover { background: rgba(157, 180, 255, .14); color: var(--paper); }
.pbox__chip {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: rgba(244, 243, 238, .55);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  white-space: nowrap;
  transition: color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}
.pbox__chip:hover { color: var(--paper); }
.pbox__chip svg { flex: 0 0 auto; transition: transform .3s var(--ease); }
.pbox__chip:hover svg { transform: rotate(12deg) scale(1.08); }
.pbox__chip span {
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  margin-left: 0;
  transition: max-width .28s var(--ease), opacity .28s var(--ease), margin-left .28s var(--ease);
}
.pbox__chip.is-on span { max-width: 110px; opacity: 1; margin-left: 6px; }
.pbox__chip.is-on svg { transform: rotate(360deg) scale(1.08); }
.pbox__chip.is-on[data-mode="tech"]    { color: var(--blue-bright); border-color: var(--blue); background: rgba(70, 109, 255, .16); }
.pbox__chip.is-on[data-mode="partner"] { color: #C9B8FF; border-color: #8B5CF6; background: rgba(139, 92, 246, .16); }
.pbox__chip.is-on[data-mode="angebot"] { color: var(--gold); border-color: rgba(255, 229, 170, .8); background: rgba(255, 229, 170, .12); }
.pbox__div {
  width: 1.5px;
  height: 22px;
  margin: 0 5px;
  border-radius: 999px;
  background: linear-gradient(to top, transparent, rgba(157, 180, 255, .55), transparent);
}
.pbox__send.has-content { background: var(--paper); color: var(--navy); }
.pbox__send.has-content:hover { transform: translateY(-1px); background: #fff; }
.pbox__send:not(.has-content):hover { background: rgba(157, 180, 255, .14); color: var(--paper); }
.pbox__send.is-rec { color: #ff5c5c; }
/* Voice-Recording entfernt: immer Pfeil statt Mikrofon */
.pbox__send .pbox__ic-mic, .pbox__send .pbox__ic-stop { display: none; }
.pbox__send .pbox__ic-up { display: block; }

/* Anhang-Vorschau */
.pbox__previews { display: flex; gap: 8px; padding: 2px 2px 8px; }
.pbox__thumb { position: relative; width: 64px; height: 64px; border-radius: 14px; overflow: hidden; }
.pbox__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pbox__thumb button {
  position: absolute; top: 4px; right: 4px;
  width: 18px; height: 18px;
  display: grid; place-items: center;
  border: 0; border-radius: 999px;
  background: rgba(0, 3, 48, .72);
  color: #fff; font-size: 11px; line-height: 1;
  cursor: pointer;
}

/* Aufnahme-Ansicht */
.pbox__rec { padding: 12px 8px 4px; }
.pbox__recmeta { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 12px; }
.pbox__recdot { width: 8px; height: 8px; border-radius: 999px; background: #ff5c5c; animation: pbox-pulse 1s ease-in-out infinite; }
.pbox__rectime { font-family: 'Azeret Mono', monospace; font-size: 12.5px; color: rgba(244, 243, 238, .8); }
.pbox__bars { display: flex; align-items: center; justify-content: center; gap: 3px; height: 40px; padding: 0 12px; }
.pbox__bars i { width: 2px; border-radius: 999px; background: rgba(244, 243, 238, .55); animation: pbox-bar .7s ease-in-out infinite alternate; }
@keyframes pbox-pulse { 50% { opacity: .35; } }
@keyframes pbox-bar { from { transform: scaleY(.35); } to { transform: scaleY(1); } }

/* Erfolg */
.pbox__done {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  border-radius: 24px;
  background: rgba(5, 8, 46, .96);
  color: var(--gold);
  font-size: 15px;
  opacity: 0;
  transition: opacity .3s var(--ease);
  pointer-events: none;
}
.pbox__done.is-in { opacity: 1; }

@media (max-width: 640px) {
  .pbox__chip span { display: none; }
  .pbox__div { margin: 0 3px; }
  .lmatch__sub { margin-bottom: 30px; }
}
html.static .lmatch .pbox { opacity: 1 !important; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Kontakt-Pflichtfelder in der Prompt-Box */
.pbox__contact {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .45s var(--ease), opacity .35s var(--ease);
}
.pbox.is-open .pbox__contact { max-height: 220px; opacity: 1; }
.pbox__cgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 6px 2px 2px;
}
/* "Ich suche"-Auswahl: Pills im Stil der Kontaktfelder */
.pbox__mtype {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  padding: 8px 2px 2px;
}
.pbox__mtype-label {
  font-family: var(--ui); font-weight: 500; font-size: 13px;
  color: rgba(244, 243, 238, .55); margin-right: 4px;
}
.pbox__mtypebtn {
  height: 36px; padding: 0 16px;
  font: inherit; font-size: 13.5px; color: var(--paper);
  background: rgba(157, 180, 255, .08);
  border: 1px solid rgba(157, 180, 255, .22);
  border-radius: 999px; cursor: pointer;
  transition: border-color .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
}
.pbox__mtypebtn:hover { border-color: rgba(157, 180, 255, .5); }
.pbox__mtypebtn[aria-pressed="true"] { background: var(--blue-bright); border-color: var(--blue-bright); color: var(--navy-deep); }
.pbox__mtype.is-err .pbox__mtypebtn[aria-pressed="false"] { border-color: rgba(255, 92, 92, .85); }
/* Honeypot: unsichtbar fuer Menschen */
.pbox__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.pbox__send.is-busy { opacity: .55; pointer-events: none; }
.pbox__cfield input {
  width: 100%;
  height: 40px;
  padding: 0 14px;
  font: inherit;
  font-size: 14px;
  color: var(--paper);
  background: rgba(157, 180, 255, .08);
  border: 1px solid rgba(157, 180, 255, .22);
  border-radius: 12px;
  outline: none;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.pbox__cfield input::placeholder { color: rgba(244, 243, 238, .45); }
.pbox__cfield input:focus { border-color: rgba(157, 180, 255, .65); background: rgba(157, 180, 255, .12); }
.pbox__cfield input.is-err { border-color: rgba(255, 92, 92, .85); background: rgba(255, 92, 92, .08); }
.pbox__cerr {
  padding: 8px 4px 2px;
  font-size: 12.5px;
  color: #ff8a8a;
}
@media (max-width: 560px) {
  .pbox__cgrid { grid-template-columns: 1fr; }
  .pbox.is-open .pbox__contact { max-height: 420px; }
}
html.static .pbox__contact { max-height: none; opacity: 1; }

/* ===== Let's match: Aurora-Hintergrund (Aceternity-Original) ===== */
.lmatch { position: relative; overflow: hidden; }
.lmatch__inner { position: relative; z-index: 1; }
.lmatch__aurora {
  --white: #fff;
  --transparent: transparent;
  --white-gradient: repeating-linear-gradient(100deg,
    var(--white) 0%, var(--white) 7%, var(--transparent) 10%,
    var(--transparent) 12%, var(--white) 16%);
  --aurora: repeating-linear-gradient(100deg,
    var(--blue-royal) 10%, var(--blue-bright) 15%, var(--blue) 20%, #D1DEF7 25%, var(--blue-royal) 30%);
  position: absolute;
  inset: -70px -10px -10px;
  z-index: 0;
  pointer-events: none;
  opacity: .62;
  background-image: var(--white-gradient), var(--aurora);
  background-size: 300%, 200%;
  background-position: 50% 50%, 50% 50%;
  filter: blur(12px) saturate(1.1);
  will-change: transform;
  mask-image: radial-gradient(ellipse at 100% 0%, black 10%, var(--transparent) 70%);
  -webkit-mask-image: radial-gradient(ellipse at 100% 0%, black 10%, var(--transparent) 70%);
}
.lmatch__aurora::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--white-gradient), var(--aurora);
  background-size: 200%, 100%;
  background-attachment: fixed;
  mix-blend-mode: soft-light;
  animation: lmatch-aurora 60s linear infinite;
}
@keyframes lmatch-aurora {
  from { background-position: 50% 50%, 50% 50%; }
  to   { background-position: 350% 50%, 350% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .lmatch__aurora::after { animation: none; }
}
html.static .lmatch__aurora::after { animation: none; }

/* ===== Partner-Logo Download (Aurora-Card-Prinzip) ===== */
.dlsec {
  padding-top: clamp(90px, 12vh, 150px);
  padding-bottom: clamp(90px, 12vh, 150px);
  background: var(--navy);
  transition: background .7s var(--ease);
}
.dlsec[data-dltheme="dunkel"] { background: var(--paper); }
.dlsec__wrap { display: flex; flex-direction: column; align-items: center; gap: 34px; }
.dlsec__head { text-align: center; }
.dlsec__title {
  font-family: var(--display);
  font-size: clamp(34px, 4vw, 64px);
  line-height: 1.04;
  color: var(--paper);
  transition: color .7s var(--ease);
}
.dlsec__title em { font-style: normal; color: var(--blue-bright); transition: color .7s var(--ease); }
.dlsec__sub {
  margin: 14px auto 0;
  max-width: 52ch;
  font-size: clamp(15px, 1.3vw, 17.5px);
  color: var(--dim-on-dark);
  transition: color .7s var(--ease);
}
.dlsec[data-dltheme="dunkel"] .dlsec__title { color: var(--ink); }
.dlsec[data-dltheme="dunkel"] .dlsec__title em { color: var(--blue); }
.dlsec[data-dltheme="dunkel"] .dlsec__sub { color: var(--dim-on-paper); }

/* Farb-Swatches */
.dlsec__swatches { display: flex; gap: 10px; padding: 8px; border-radius: 999px; }
.dlswatch {
  width: 46px; height: 46px;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.dlswatch:hover { transform: scale(1.1); }
.dlswatch.is-on { transform: scale(1.08); border-color: rgba(255, 255, 255, .65); }
.dlsec[data-dltheme="dunkel"] .dlswatch.is-on { border-color: rgba(0, 4, 72, .5); }
.dlswatch--hell { background: var(--navy); border: 1px solid rgba(157, 180, 255, .3); }
.dlswatch--dunkel { background: var(--paper); border: 1px solid rgba(0, 3, 48, .14); }

/* Aurora-Karte */
.dlcard {
  position: relative;
  transform-style: preserve-3d;
  will-change: transform;
  width: min(660px, 100%);
  border-radius: 40px;
  padding: clamp(36px, 5vw, 64px) clamp(26px, 4vw, 60px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  background: radial-gradient(100% 100% at 100% 0%, rgba(255, 255, 255, .4) 0%, rgba(255, 255, 255, 0) 100%);
  backdrop-filter: blur(21px);
  -webkit-backdrop-filter: blur(21px);
  transition: background .7s var(--ease);
}
.dlsec[data-dltheme="dunkel"] .dlcard {
  background: radial-gradient(100% 100% at 100% 0%, rgba(0, 3, 48, .10) 0%, rgba(0, 3, 48, 0) 100%);
}
.dlcard__border {
  position: absolute;
  inset: 0;
  border-radius: 40px;
  padding: 3px;
  opacity: .8;
  background: linear-gradient(90deg,
    rgba(41, 77, 235, .5) 0%, rgba(70, 109, 255, .4) 25%,
    rgba(157, 180, 255, .3) 50%, rgba(255, 255, 255, .6) 100%);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  pointer-events: none;
  transition: background .7s var(--ease);
}
.dlsec[data-dltheme="dunkel"] .dlcard__border {
  background: linear-gradient(90deg,
    rgba(41, 77, 235, .45) 0%, rgba(70, 109, 255, .35) 25%,
    rgba(255, 229, 170, .5) 50%, rgba(0, 3, 48, .5) 100%);
}
.dlcard__logo { width: min(440px, 82%); height: auto; transform: translateZ(46px); }
.dlcard__meta, .dlcard__btn { transform: translateZ(28px); }
.dlsec__stage { perspective: 1100px; width: min(660px, 100%); }
.dlcard__meta { text-align: center; }
.dlcard__name { font-size: 15.5px; font-weight: 600; color: var(--paper); transition: color .7s var(--ease); }
.dlcard__spec {
  margin-top: 4px;
  font-family: 'Azeret Mono', monospace;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dim-on-dark);
  transition: color .7s var(--ease);
}
.dlsec[data-dltheme="dunkel"] .dlcard__name { color: var(--ink); }
.dlsec[data-dltheme="dunkel"] .dlcard__spec { color: var(--dim-on-paper); }
.dlcard__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  background: var(--paper);
  color: var(--navy);
  transition: background .7s var(--ease), color .7s var(--ease), transform .25s var(--ease);
}
.dlcard__btn:hover { transform: translateY(-2px); }
.dlsec[data-dltheme="dunkel"] .dlcard__btn { background: var(--navy); color: var(--paper); }
@media (max-width: 560px) {
  .dlcard { border-radius: 28px; }
  .dlcard__border { border-radius: 28px; }
}

/* ===== Let's match: Mini-Schritte ===== */
.lmatch__steps {
  margin-top: 26px;
  width: 100%;
}
.lstep {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 16px 8px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .6);
  border: 1px solid rgba(41, 77, 235, .16);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.lstep__num {
  display: grid;
  place-items: center;
  width: 28px;
  font-family: var(--ui);
  color: var(--blue);
  font-size: 13.5px;
  font-weight: 500;
}
.lstep__txt { font-size: 13.5px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.lstep__arrow { font-style: normal; color: rgba(19, 19, 71, .4); font-size: 15px; }
@media (max-width: 560px) { .lstep__arrow { display: none; } }

/* ===== Partner: Logo-Wall ===== */
.pwall {
  margin-top: 26px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.pcard {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: 190px;
  padding: 26px 20px 20px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(0, 3, 48, .06);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}

.pcard__logo {
  flex: 1;
  display: grid;
  place-items: center;
  width: 100%;
}
.pcard__logo img {
  /* alle Logos liegen auf identischen 1600x1000-Canvases -> einheitliche Skalierung */
  width: min(230px, 88%);
  height: auto;
  filter: grayscale(1);
  opacity: .75;
  transition: filter .35s var(--ease), opacity .35s var(--ease);
}

.pcard__mono {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(70, 109, 255, .1);
  color: var(--blue-royal);
  font-family: var(--display);
  font-size: 22px;
}
.pcard__name {
  font-size: 13.5px;
  line-height: 1.35;
  font-weight: 600;
  color: var(--ink);
  text-align: center;
}
.pcard__city {
  margin-top: 2px;
  font-family: 'Azeret Mono', monospace;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dim-on-paper);
  text-align: center;
}
@media (max-width: 1080px) { .pwall { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .pwall { grid-template-columns: repeat(2, 1fr); } .pcard { min-height: 160px; } }

/* ===== Finale: Farbwelt + Partikel + Logo ===== */
.finale { background: linear-gradient(180deg,
  var(--ice) 0%, #C9D7F6 14%, #7D97F2 28%, #3D5BEC 40%,
  var(--blue-royal) 54%, #101D8F 70%, var(--navy-deep) 86%, #000106 100%); }
.partner { background: var(--ice); }
.finale__bg { position: absolute; inset: 0; overflow: hidden; }
.finale__bg canvas { width: 100%; height: 100%; display: block; }
.finale__logo {
  position: absolute;
  right: clamp(20px, 8vw, 140px);
  top: 50%;
  transform: translateY(-50%);
  width: clamp(220px, 30vw, 480px);
  pointer-events: none;
}
.glogo--finale { display: block; width: 100%; }
@media (max-width: 900px) {
  .finale__logo { right: 50%; transform: translate(50%, -50%); opacity: .45; }
}

/* ===== Footer: Berger-Badge ===== */
.footer__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(157, 180, 255, .3);
  background: rgba(157, 180, 255, .08);
  color: var(--dim-on-dark);
  font-size: 12.5px;
  text-decoration: none;
  transition: border-color .3s var(--ease), color .3s var(--ease), background .3s var(--ease);
}
.footer__badge b { font-weight: 700; color: var(--paper); }
.footer__badge:hover { border-color: var(--gold); background: rgba(255, 229, 170, .1); color: var(--paper); }
.pcard__name, .pcard__city { display: block; }

/* ===== Worum: Hero-Bento nach Referenz (1 Feature + 1 breit + 2 klein) ===== */
.hbento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(230px, auto);
  gap: 16px;
}
.hb--feature { grid-column: span 2; }
.hb--wide { grid-column: span 2; }
.hb {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 3vw, 44px);
  border-radius: 26px;
  text-decoration: none;
  overflow: hidden;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}

.hb__kicker {
  font-family: 'Azeret Mono', monospace;
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
  opacity: .7;
  margin-bottom: 14px;
}
.hb__title {
  font-family: var(--display);
  font-size: clamp(24px, 2.6vw, 42px);
  line-height: 1.06;
  max-width: 16ch;
}
.hb__title--s { font-size: clamp(21px, 2vw, 32px); margin-top: auto; max-width: 18ch; }
.hb__arrow {
  position: absolute;
  right: clamp(20px, 2.4vw, 36px);
  top: clamp(18px, 2.2vw, 32px);
  font-size: 24px;
  line-height: 1;
  transition: transform .3s var(--ease);
}
.hb__arrow .arr { animation: arrbob 2.2s var(--ease) infinite; }
@keyframes arrbob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .hb__arrow .arr { animation: none; } }
.hb--feature {
  grid-row: span 2;
  background: linear-gradient(160deg, #070d46 0%, var(--navy) 70%);
  color: var(--paper);
}
.hb--feature .hb__copy {
  margin-top: 16px;
  max-width: 44ch;
  font-size: clamp(14.5px, 1.2vw, 17px);
  color: var(--dim-on-dark);
}
.hb__stats { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 26px; }
.hb__stats span { font-size: 13.5px; color: var(--dim-on-dark); }
.hb__stats b { display: block; font-family: var(--display); font-size: clamp(22px, 2vw, 32px); color: var(--paper); }
.hb__btn {
  display: inline-flex;
  width: fit-content;
  margin-top: 28px;
  padding: 13px 24px;
  border-radius: 999px;
  background: var(--paper);
  color: var(--navy);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition: background .3s var(--ease), transform .25s var(--ease);
  position: relative;
  z-index: 2;
}
.hb__btn:hover { background: var(--gold); transform: translateY(-2px); }
.hb__img {
  position: absolute;
  right: -12%;
  bottom: -30%;
  width: 62%;
  opacity: .9;
  pointer-events: none;
}
.hb--wide { background: rgba(0, 3, 48, .05); color: var(--ink); }
.hb--blue { background: var(--blue); color: #fff; }
.hb--gold { background: var(--gold); color: var(--navy-deep); }
@media (max-width: 900px) {
  .hbento { grid-template-columns: 1fr; }
  .hb--feature, .hb--wide { grid-column: auto; }
  .hb--feature { grid-row: auto; }
  .hb__img { display: none; }
}

/* ===== Let's match: Maus-Pixel ===== */
.lmatch__pixels { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.lmatch__pixels i {
  position: absolute;
  display: block;
  background: var(--navy);
  opacity: 0;
  animation: pxfall 1.5s ease-out forwards;
}
.lmatch__pixels i.b { background: var(--blue); }
@keyframes pxfall {
  0% { opacity: .32; transform: translate(0, 0); }
  100% { opacity: 0; transform: translate(var(--drift, 0px), 74px); }
}

/* Schritte: mit Kontextzeile */

.lstep__body { display: flex; flex-direction: column; gap: 2px; }
.lstep__body b { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.lstep__body small { font-size: 12px; color: rgba(19, 19, 71, .6); }

/* ===== News-Cards: runder, groesseres Logo, Anbieterzeile, Chip-Reihen ===== */
.card { border-radius: 18px; }
.card__media { border-radius: 10px; }
.card__byline { display: flex; align-items: center; gap: 10px; }
.card__logo { height: 30px; max-width: 150px; }
.card__by { font-family: var(--ui); font-weight: 500; font-size: 12.5px; color: rgba(0, 4, 72, .65); }
.chiprow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.chiprow + .chiprow { margin-top: 10px; }
.chiprow__label {
  font-family: 'Azeret Mono', monospace;
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dim-on-dark);
  margin-right: 4px;
}
.chiprow--by .chip { font-size: 12px; padding: 6px 13px; }

/* ===== CTA: zwei Zielgruppen + Logo mittig (Antigravity-Prinzip) ===== */
.ctasec { position: relative; background: var(--paper); padding-top: clamp(80px, 11vh, 140px); padding-bottom: clamp(80px, 11vh, 140px); }
.ctasec__dots {
  position: absolute;
  inset: clamp(20px, 4vw, 60px) var(--gutter);
  background-image: radial-gradient(rgba(0, 3, 48, .22) 1.2px, transparent 1.2px);
  background-size: 20px 20px;
  mask-image: radial-gradient(ellipse 70% 90% at 50% 50%, black 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 70% 90% at 50% 50%, black 30%, transparent 78%);
  pointer-events: none;
}
.ctasec__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(30px, 5vw, 80px);
}
.ctasec__col { text-align: center; }
.ctasec__pill {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(0, 3, 48, .12);
  font-size: 12px;
  font-weight: 600;
  color: rgba(0, 4, 72, .7);
  box-shadow: 0 2px 8px rgba(0, 3, 48, .06);
}
.ctasec__title {
  margin-top: 16px;
  font-family: var(--display);
  font-size: clamp(30px, 3.2vw, 52px);
  line-height: 1.02;
  color: var(--ink);
}
.ctasec__sub { margin-top: 8px; font-size: clamp(15px, 1.4vw, 19px); color: rgba(19, 19, 71, .62); }
.ctasec__btn {
  display: inline-flex;
  margin-top: 24px;
  padding: 13px 28px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition: transform .25s var(--ease), background .3s var(--ease), color .3s var(--ease);
}
.ctasec__btn:hover { transform: translateY(-2px); }
.ctasec__btn--dark { background: var(--navy); color: #fff; }
.ctasec__btn--dark:hover { background: var(--blue-royal); }
.ctasec__btn--ghost { background: #fff; color: var(--ink); border: 1px solid rgba(0, 3, 48, .18); }
.ctasec__btn--ghost:hover { border-color: var(--blue); color: var(--blue-royal); }
.ctasec__logo { width: clamp(120px, 14vw, 220px); }
.ctasec__logo img { width: 100%; height: auto; display: block; }
@media (max-width: 900px) {
  .ctasec__grid { grid-template-columns: 1fr; }
  .ctasec__logo { margin: 0 auto; order: 0; }
}

/* Partner-Logos farbig */
.pcard__logo img { filter: none; opacity: 1; }

/* ===== Nachtrag: Systematisierung & neue Elemente ===== */

/* Pfeil-Icon (Mockup-Stil) */
.arr { width: 1em; height: 1em; }
.hb__arrow .arr { width: 26px; height: 26px; }

/* Nav: CTA in eigener Glass-Pill */
.nav__pill--cta { padding: 8px; }


/* News: Anbieter-Dropdown */
.byfilter {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  max-width: 100%;
}
.byfilter span {
  font-family: 'Azeret Mono', monospace;
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dim-on-dark);
}
.byfilter select {
  appearance: none;
  -webkit-appearance: none;
  /* Die Auswahl listet seit dem 30.07.2026 ALLE Partner, auch die ohne
     Beitraege ("… (keine Beiträge)"). Der laengste Eintrag bestimmt sonst die
     Breite und schob das Feld auf schmalen Schirmen aus dem Bild. */
  max-width: 100%;
  text-overflow: ellipsis;
  font: inherit;
  font-size: 13.5px;
  color: var(--paper);
  background: rgba(157, 180, 255, .1) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239DB4FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;
  border: 1px solid rgba(157, 180, 255, .3);
  border-radius: 999px;
  padding: 9px 38px 9px 16px;
  cursor: pointer;
  transition: border-color .3s var(--ease);
}
.byfilter select:hover, .byfilter select:focus { border-color: var(--blue-bright); outline: none; }
.byfilter select option { color: #000; }

/* News-Logos nochmal groesser */
.card__logo { height: 42px; max-width: 190px; }
.card__by { font-size: 13px; }

/* Finale: Inhalt zentriert + eingebettete Zielgruppen-CTAs */
.finale__content { text-align: center; }
.finale__title { margin-inline: auto; }
.finale__copy { margin-inline: auto; }
.finale .ctasec__grid {
  margin-top: clamp(44px, 6vh, 72px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(30px, 5vw, 80px);
}
.finale .ctasec__pill {
  background: rgba(157, 180, 255, .1);
  border-color: rgba(157, 180, 255, .3);
  color: var(--paper);
  box-shadow: none;
}
.finale .ctasec__title { color: var(--paper); }
.finale .ctasec__sub { color: var(--dim-on-dark); }
.ctasec__btn--paper { background: var(--paper); color: var(--navy); border-radius: 14px; }
.ctasec__btn--paper:hover { background: var(--gold); color: var(--navy); }
.ctasec__btn--line { border: 1.4px solid rgba(244, 243, 238, .5); color: var(--paper); border-radius: 14px; }
.ctasec__btn--line:hover { border-color: var(--gold); color: var(--gold); }
.finale .ctasec__logo img { opacity: .9; }
@media (max-width: 900px) {
  .finale .ctasec__grid { grid-template-columns: 1fr; }
}

/* Buttons: Content-CTAs eckig-abgerundet (Mockup-System) */
.hb__btn, .ctasec__btn, .dlcard__btn, .bcard__btn { border-radius: 14px; }

/* ===== Konsistenz-Runde ===== */

/* Map-Tabs als Glass-Pills */
.mtab {
  border-radius: 999px;
  background: rgba(255, 255, 255, .05);
  background-blend-mode: luminosity;
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);
  border: 1px solid rgba(157, 180, 255, .18);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .12);
}
.mtab:hover { border-color: rgba(157, 180, 255, .5); background: rgba(157, 180, 255, .12); }
.mtab[aria-selected="true"] { background: rgba(157, 180, 255, .16); border-color: var(--blue-bright); color: var(--paper); }
.map__card a.go .arr { transition: transform .3s var(--ease); }
.map__card a.go:hover .arr { transform: translateX(4px); }

/* Hover-System: Gold-Flaeche + Navy-Text ueberall, auch Chips */
.chip:hover { background: var(--gold) !important; border-color: var(--gold) !important; color: var(--navy) !important; }

/* Let's-match-Schritte: Liquid-Glass-Pill mit Progress-Indicator */
.lmatch__steps {
  display: block;
  border-radius: 24px;
  padding: 16px 22px 18px;
  background: rgba(255, 255, 255, .34);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 10px 34px rgba(0, 3, 48, .1);
}
.lstep {
  position: relative;
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 0 12px;
  padding: 10px 8px;
  text-align: left;
}

.lstep__title { font-size: 14px; font-weight: 500; color: rgba(19, 19, 71, .8); }
.lstep__hint { font-size: 12.5px; color: rgba(19, 19, 71, .48); text-align: right; white-space: nowrap; }
@media (max-width: 640px) {
  .lstep { grid-template-columns: 36px 1fr; }
  .lstep__hint { grid-column: 2; text-align: left; white-space: normal; }
}
.lstep {
  background: transparent; border: none; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.lstep__num { background: none; width: auto; justify-self: start; place-items: center start; }
.lstep__body b { color: var(--ink); }
.lstep__body small { color: rgba(19, 19, 71, .58); }

/* Kicker-Laufweite konsistent */
.angebote__kicker, .chiprow__label, .byfilter span, .cell__pill--label { letter-spacing: .07em; }

/* News-Filter: eine Zeile, sauber ausgerichtet */
/* Eine Zeile: Typ-Chips, dann die beiden Auswahlfelder. Am 30.07. stand hier
   flex-direction: column, weil zwei Chipreihen untereinander gehoerten — die
   Themenreihe ist seit dem 31.07. ein Auswahlfeld, damit passt wieder eine
   Zeile. flex-wrap laesst die Felder auf schmalen Schirmen umbrechen. */
#news-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
#news-filter .chiprow { margin: 0; max-width: 100%; }
#news-filter .byfilter { margin: 0; }

/* News-Karten: mehr Luft, groesserer Text */
.card__foot { padding: 20px 12px 14px; gap: 14px; }
.card__foot h3 { font-size: 18px; line-height: 1.35; }
.card__byline { gap: 12px; }

/* Partner-Wall: nur Name, keine Unterstreichung */
a.pcard, a.pcard * { text-decoration: none; }
.pcard__name { border-bottom: none; }

/* Finale: Titel wie andere Headlines, Glas-Logo */
.finale__title { font-size: clamp(30px, 3.4vw, 56px); line-height: 1.04; }
.glogo--finale { display: block; width: clamp(180px, 16vw, 280px); aspect-ratio: 338 / 204; }
.glogo--finale .gw { background: rgba(255, 255, 255, .12); }
.finale .ctasec__pill { background: rgba(255, 255, 255, .06); border: none; }

/* Zwei Buttons nebeneinander */
.sec__more--duo { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }

/* Mobile-Menue: Claim zentriert */
.mmenu__foot { text-align: center; width: 100%; }

/* Berger-Badge: Original aus Figma (Frame 4878, Group 162) */
.footer__badge {
  border: none;
  background: none;
  padding: 0;
  border-radius: 0;
  display: inline-block;
  transition: transform .25s var(--ease), filter .25s var(--ease);
}
/* kein border-radius/box-shadow auf dem img: wuerde die SVG-Karte seitlich anschneiden —
   drop-shadow folgt der Kartenform */
.footer__badge img { display: block; width: 172px; height: auto; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .28)); }
.footer__badge:hover { transform: translateY(-2px); filter: brightness(1.04); background: none; }
/* Mobil-Duplikat der Badge: nur unter 760px sichtbar — hohe Spezifitaet,
   da .footer__badge oben display:inline-block setzt und sonst gewinnt */
.footer__badge.footer__badge--mobile { display: none; }
@media (max-width: 760px) {
  .footer__badge.footer__badge--mobile { display: inline-block; margin-top: 10px; }
  .footer__grid .footer__badge:not(.footer__badge--mobile) { display: none; }
}

/* tstage: Glanzlichter fuer Liquid-Glass */
.gws {
  position: absolute; inset: 0; display: block;
  pointer-events: none;
  background:
    linear-gradient(118deg, rgba(255, 255, 255, .34) 0%, rgba(255, 255, 255, 0) 22%, rgba(255, 255, 255, 0) 66%, rgba(255, 255, 255, .18) 88%, rgba(255, 255, 255, .3) 100%);
  mix-blend-mode: screen;
  opacity: .8;
}
.tstage__glassmark .gws.gw--1 { clip-path: url(#gw-1); }
.tstage__glassmark .gws.gw--2 { clip-path: url(#gw-2); }
.tstage__glassmark .gws.gw--3 { clip-path: url(#gw-3); }
.tstage__glassmark .gws.gw--4 { clip-path: url(#gw-4); }
.gws { -webkit-backdrop-filter: none; backdrop-filter: none; }

/* Pixel-Farben auf dunkler Download-Sektion */
.dlsec .lmatch__pixels i { background: var(--blue-bright); }
.dlsec .lmatch__pixels i.b { background: var(--blue); }
.dlsec[data-dltheme="dunkel"] .lmatch__pixels i { background: var(--navy); }
.dlsec[data-dltheme="dunkel"] .lmatch__pixels i.b { background: var(--blue); }

/* Karte: keine Text-Selektion beim Ziehen; Panel liegt ueber dem Karten-Ueberhang */
.map__stage, .map__stage * { user-select: none; -webkit-user-select: none; }
.map__panel { position: relative; z-index: 4; }


/* Karte: Sektionskopf liegt ueber dem Karten-Ueberhang */
.karte > .wrap:first-child { position: relative; z-index: 5; pointer-events: none; }
.karte > .wrap:first-child a, .karte > .wrap:first-child button { pointer-events: auto; }

/* Hub-Sektion: gleiche Flaeche wie die Logo-Wall */
.worum { background: var(--ice); }


/* Bento: Pixel-Farben je Kartenhintergrund */
.hb .lmatch__pixels i { background: var(--navy); }
.hb .lmatch__pixels i.b { background: var(--blue); }
.hb--feature .lmatch__pixels i { background: var(--blue-bright); }
.hb--feature .lmatch__pixels i.b { background: var(--blue); }
.hb--blue .lmatch__pixels i { background: rgba(255, 255, 255, .9); }
.hb--blue .lmatch__pixels i.b { background: var(--gold); }


/* Technologien: Beschreibung zwischen Name und Zaehler */
.tstage__desc {
  max-width: 56ch;
  font-family: var(--ui);
  font-size: clamp(13.5px, 1.15vw, 16px);
  line-height: 1.5;
  color: var(--dim-on-dark);
}


/* ===== Angebote: Farbwelt statt Weiss, ohne Konturen ===== */
.angebote { background: var(--ice); }
.angebote .bcard { border: none; }
.angebote .bcard--line { background: #DCE6FA; border: none; }
.angebote .bcard--line .bcard__minichip--line { border-color: rgba(0, 4, 72, .18); }

/* Buttons: fette Schrift ueberall */
.btn { font-weight: 700; }

/* Partner-Wall: keine Kontur */
.pcard { border: none; }

/* Sektionsnaht-Hairline schliessen */
.lmatch, .finale { margin-top: -1px; }

/* Nav: aktiver Punkt wie der Let's-match-Button, helles Blau */
.nav__pill a.is-active,
body[data-nav="dark"]:not(.menu-open) .nav__pill a.is-active {
  background: var(--blue-bright);
  color: var(--navy-deep);
}

/* Karte: aktiver Tab nach demselben Prinzip */
.mtab[aria-selected="true"] {
  background: var(--blue-bright) !important;
  border-color: var(--blue-bright) !important;
  color: var(--navy-deep) !important;
  box-shadow: none !important;
}
.mtab[aria-selected="true"] .ct { opacity: .8; }

/* ===== Finale-Split: zwei Sektionen mit durchlaufendem Verlauf ===== */
.finale {
  min-height: 72svh;
  background: linear-gradient(180deg, var(--ice) 0%, #C9D7F6 34%, #7D97F2 72%, #3D5BEC 100%);
}
.finale2 {
  position: relative;
  overflow: clip;
  display: flex;
  align-items: center;
  min-height: 78svh;
  background: linear-gradient(180deg, #3D5BEC 0%, var(--blue-royal) 28%, #101D8F 58%, var(--navy-deep) 84%, #000106 100%);
  margin-top: -1px;
}
.finale2 .finale__content { text-align: center; width: 100%; }
.finale2 .ctasec__grid { margin-top: 0; }
/* Finale-Titel auf hellerem Bereich: Royal-Blau bleibt lesbar */
.finale .lmatch__pixels i { background: var(--navy); }
.finale .lmatch__pixels i.b { background: #fff; }
.finale2 .lmatch__pixels i { background: var(--blue-bright); }
.finale2 .lmatch__pixels i.b { background: var(--gold); }

/* Footer: Wortbildmarke + Claim mittig */
.footer__brand img { width: clamp(220px, 22vw, 320px); height: auto; display: block; }
.footer__grid { align-items: center; }

/* Chips (Workshops, KI, ...) immer im Glass-Design */
.bcard__minichip, .bcard__minichip--line {
  background: rgba(255, 255, 255, .28);
  background-blend-mode: luminosity;
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);
  border: 1px solid rgba(0, 4, 72, .1) !important;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .5);
}

/* Karten-Tabs: exakt wie der aktive Nav-Punkt */
.mtab[aria-selected="true"] {
  background: var(--blue-bright) !important;
  border: none !important;
  color: var(--navy-deep) !important;
  font-weight: 500;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.mtab[aria-selected="true"]::before { display: none; }
.mtab[aria-selected="true"] .ct { color: rgba(0, 4, 72, .6); opacity: 1; }

/* Angebote: zweiter Blauton fuer die Start-up-Karte */
.angebote .bcard--line:has(.bcard__minichip:not(.bcard__minichip--line)) { background: #C7D8F9; }


/* Finale (hell): dunkle Typo */
.finale .finale__title { color: var(--ink); }
.finale .finale__title em { color: var(--blue); }
.finale .finale__copy { color: rgba(19, 19, 71, .72); }

/* Finale2: Glass-Pills, weisse Sublines, gefuellter Partner-Button */
.finale2 .ctasec__pill {
  background: rgba(255, 255, 255, .08);
  background-blend-mode: luminosity;
  -webkit-backdrop-filter: blur(12px) saturate(1.25);
  backdrop-filter: blur(12px) saturate(1.25);
  border: 1px solid rgba(157, 180, 255, .3);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .14);
  color: #fff;
}
.finale2 .ctasec__sub { color: rgba(255, 255, 255, .85); }
.finale2 .ctasec__btn--line {
  background: var(--paper);
  color: var(--navy);
  border: none;
}
.finale2 .ctasec__btn--line:hover { background: var(--gold); color: var(--navy); }

/* Finale2: Logo exakt mittig */
.finale2 .ctasec__logo { width: auto; display: flex; justify-content: center; }
.finale2 .glogo--finale { margin: 0 auto; }

/* Finale (hell): kompakter */
.finale { min-height: 0; padding-top: clamp(50px, 6vh, 76px); padding-bottom: clamp(36px, 5vh, 60px); }
.finale .finale__title { margin-bottom: 20px; }
.finale .finale__copy { margin-bottom: 6px; }
.finale .finale__content { padding-top: 0; padding-bottom: 0; }

/* Logo-Download: Pixel nur ueber der Karte, sauber beschnitten */
.dlcard .lmatch__pixels { border-radius: 40px; overflow: hidden; }

/* Karten-Tabs wie Nav-Menue: inaktiv nur Text, aktiv gefuellte Pill */
.mtab {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  color: rgba(244, 243, 238, .85);
  font-size: 15px;
  padding: 13px 18px;
}
.mtab::before { display: none !important; }
.mtab:hover { background: rgba(255, 255, 255, .1) !important; color: var(--paper); }
.mtab[aria-selected="true"] {
  background: var(--blue-bright) !important;
  color: var(--navy-deep) !important;
}
.mtab[aria-selected="true"] .ct { color: rgba(0, 4, 72, .6); }
.finale2 .ctasec__title { color: var(--paper); }
.finale2 .ctasec__sub { color: rgba(255, 255, 255, .88); }


/* ===== Mobile-Politur ===== */
@media (max-width: 760px) {
  /* Karte der Region: Kopf zentriert */
  .karte .sec__head { text-align: center; }
  .karte .sec__head > .sec__lede { justify-self: center; text-align: center; }
  .karte .sec__title, .karte .sec__sub { margin-inline: auto; }
  /* Technologien: Kontur des Logos schlanker */
  .tstage__edge g { stroke-width: 6; }
  /* Footer: Badge + Meta zentriert */
  .footer__meta { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 12px; }
  .footer__meta > span { justify-self: center; }
  /* Berger-Badge mobil als allerletztes Element */
  .footer__grid .footer__badge { display: none; }
  .footer__badge--mobile { display: block; margin-top: 10px; }
  .footer { padding-bottom: calc(30px + env(safe-area-inset-bottom, 0px)); }
}
/* Mitmachen: Abstand zum Logo, mobil gestapelt mit Luft */
.finale2 .ctasec__grid { gap: clamp(40px, 6vw, 90px); }
@media (max-width: 900px) {
  .finale2 .ctasec__grid { gap: 56px; }
  .finale2 .ctasec__logo { margin: 8px auto; }
  .glogo--finale { width: clamp(150px, 40vw, 220px); }
}

/* Horizontalen Overflow (Karten-Bleed etc.) nie die Seite verbreitern lassen */
html, body { overflow-x: clip; }
/* Safari < 16 kennt overflow:clip nicht -> Karten-Ueberhang wuerde die Seite
   seitlich verschieben (Mockup/Boxen wirken unzentriert) */
@supports not (overflow: clip) {
  html, body { overflow-x: hidden; }
}


/* ===== BW-Badge (Vertrauensanker) ===== */
.bwbadge {
  display: inline-flex;
  align-items: center;
  padding: 12px 18px;
  border-radius: 14px;
  background: #FFFC00;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(0, 4, 72, .18);
  transition: transform .25s var(--ease);
  width: fit-content;
}
.bwbadge:hover { transform: translateY(-2px); }
.bwbadge img { width: 200px; height: auto; display: block; }
.bwbadge--footer { margin-top: 0; }
@media (max-width: 560px) {
  .bwbadge img { width: 170px; }
}

/* Karten-Tabs: Gruppe in einer Glass-Pill (wie die Nav) */
.map__tabs {
  display: flex;
  gap: 4px;
  padding: 8px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, .05);
  background-blend-mode: luminosity;
  -webkit-backdrop-filter: blur(14px) saturate(1.25);
  backdrop-filter: blur(14px) saturate(1.25);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .12);
  position: relative;
  overflow: hidden;
}
.map__tabs::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1.4px;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.45) 0%,
    rgba(255, 255, 255, 0.15) 20%,
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 255, 255, 0) 60%,
    rgba(255, 255, 255, 0.15) 80%,
    rgba(255, 255, 255, 0.45) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.mtab { border-radius: 9999px !important; }

/* Karten-Liste scrollt: masked-gradient Rahmen (::before) wuerde mitscrollen
   und als "zweite Box" erscheinen — plain Border reicht hier */
.map__list.liquid-glass::before { content: none; }

/* TH-Mannheim-Karte: Box im Logo-Blau, Logo verschmilzt mit der Flaeche */
.pcard--thblue { background: var(--blue); border-color: var(--blue); }
.pcard--thblue .pcard__name { color: #fff; }

/* Finale: Mockup unter dem Text */
.finale__phone {
  position: relative;
  width: min(480px, 80vw);
  margin: clamp(18px, 3vh, 32px) auto 0;
}
.finale__phone img { width: 100%; height: auto; display: block; }

/* ===== Automatisierte News: Post-Karte (Button) + Overlay (natives dialog) ===== */
/* Post-Karte: Button optisch identisch zur <a>-Karte machen */
.card--post {
  width: 100%; margin: 0; border: 0;
  font: inherit; font-family: var(--card-font);
  color: inherit; text-align: inherit; cursor: pointer;
  background: #fff; -webkit-appearance: none; appearance: none;
}
.card--post:focus-visible { outline: 2px solid var(--blue-bright); outline-offset: 3px; }
.card__date {
  font-family: var(--card-font); font-size: 11px; letter-spacing: .06em;
  /* Token statt rgba-Literal: 11px Versalien bei .5 Alpha lagen unter 4.5:1, und
     der Kontrastschalter der Seite fasst nur Tokens an. --dim-on-paper misst
     5,34:1 auf Papier. */
  text-transform: uppercase; color: var(--dim-on-paper);
}

.newsmodal {
  width: min(640px, calc(100vw - 32px)); max-height: 82vh; padding: 0;
  border: 0; border-radius: 20px; background: var(--paper); color: var(--ink);
  font-family: var(--body);
  box-shadow: 0 40px 120px -30px rgba(0, 3, 48, .7);
}
.newsmodal::backdrop { background: rgba(0, 3, 48, .62); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.newsmodal__inner { position: relative; max-height: 82vh; overflow-y: auto; padding: clamp(24px, 4vw, 40px); }
.newsmodal__close {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-paper); border-radius: 999px; background: #fff; color: var(--ink);
  cursor: pointer; transition: background .3s var(--ease), border-color .3s var(--ease);
}
.newsmodal__close:hover { background: var(--paper-dim); border-color: var(--blue); }
.newsmodal__byline { display: flex; align-items: center; gap: 10px; font-family: var(--ui); font-weight: 500; font-size: 13px; color: rgba(19, 19, 71, .7); padding-right: 48px; }
/* Farbe als Token, nicht als rgba-Literal: bei .5 Alpha blieb die 11px-Versalzeile
   unter 4.5:1, und nur Tokens werden vom Kontrastschalter der Seite mitgezogen.
   --dim-on-paper misst hier 5,14:1. */
.newsmodal__date { display: block; margin-top: 12px; font-family: var(--ui); font-weight: 500; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim-on-paper); }
/* Ohne Datum (Partner-Overlay, Beitrag ohne Termin) faellt die Zeile ganz weg.
   Das display: block darueber schlaegt sonst die UA-Regel [hidden] und liesse
   ueber margin-top eine 12px hohe tote Luecke stehen. main.js setzt das
   hidden-Attribut in setDialogDate. */
.newsmodal__date[hidden] { display: none; }
.newsmodal__title { margin-top: 8px; font-family: var(--display); font-weight: 700; font-size: clamp(22px, 3vw, 32px); line-height: 1.1; color: var(--ink); }
.newsmodal__body { margin-top: 20px; font-family: var(--body); font-size: 15.5px; line-height: 1.6; color: rgba(19, 19, 71, .86); }
.newsmodal__body p { margin: 0 0 14px; }
/* Leistungslisten der festen Angebots-Beitraege. Der globale Reset nimmt Listen
   ihre Marker, deshalb hier wieder gesetzt — mit Einzug ueber padding, damit
   umbrechende Zeilen unter dem Text und nicht unter dem Punkt weiterlaufen. */
.newsmodal__body ul { list-style: disc; padding-left: 20px; margin: 0 0 14px; }
.newsmodal__body li { margin-bottom: 8px; }
.newsmodal__body li::marker { color: var(--blue-royal); }
.newsmodal__body a { color: var(--blue-royal); text-decoration: underline; word-break: break-word; }
.newsmodal__sources { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line-paper); }
.newsmodal__sources h3 { font-family: var(--ui); font-weight: 500; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim-on-paper); margin-bottom: 10px; }
.newsmodal__sources ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.newsmodal__sources a { color: var(--blue-royal); font-size: 14px; text-decoration: none; word-break: break-word; }
.newsmodal__sources a:hover { text-decoration: underline; }
@media (prefers-reduced-motion: no-preference) {
  .newsmodal[open] { animation: newsmodal-in .34s var(--ease-out); }
}
@keyframes newsmodal-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ================================================================
   OVERRIDES — Corinnas Aenderungsliste (22.07.2026)
   Entstanden auf der Vorschau /v2/, seit 28.07.2026 die Startseite.
   ================================================================ */

/* --- Kontrast & Lesbarkeit global --- */
:root {
  --navy: #0A0F35;
  --navy-deep: #0A1150;
  --dim-on-dark: rgba(244, 243, 238, .82);
}
body { font-size: 17px; }
.sec__lede, .worum__intro-text, .finale__copy, .card__excerpt, .lmatch__sub { font-weight: 400; }
.card__excerpt { color: rgba(0, 4, 72, .78); font-size: 14.5px; }
.lstep__hint { color: rgba(19, 19, 71, .62); }
.pbox__cfield input { background: rgba(157, 180, 255, .14); border-color: rgba(157, 180, 255, .38); font-size: 15px; }
.pbox__cfield input::placeholder { color: rgba(244, 243, 238, .72); }
.pbox__ta { font-size: 16.5px; }
.pbox__ta::placeholder { color: rgba(244, 243, 238, .68); }
.pbox__mtypebtn { border-color: rgba(157, 180, 255, .4); }
.pbox__mtype-label { color: rgba(244, 243, 238, .75); }
.mtab { color: rgba(244, 243, 238, .82); font-size: 13px; }
.mrow { color: rgba(244, 243, 238, .88); }
.map__cardph { color: rgba(244, 243, 238, .7); }

/* --- Navigationsleiste: feste, deckende Leiste (wie innowerft.com) --- */
.nav {
  top: 0; padding-top: 10px; padding-bottom: 10px;
  background: rgba(244, 247, 255, .97);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0, 4, 72, .08);
  box-shadow: 0 2px 18px rgba(0, 3, 48, .06);
}
.nav__pill, body[data-nav] .nav__pill, body[data-nav="dark"]:not(.menu-open) .nav__pill { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.nav__pill::before { display: none; }
.nav__pill a, body[data-nav="dark"]:not(.menu-open) .nav__pill a { color: var(--ink); }
.nav__pill a:hover, body[data-nav="dark"]:not(.menu-open) .nav__pill a:hover { background: rgba(0, 4, 72, .07); color: var(--ink); }
.nav__burger, body[data-nav="dark"]:not(.menu-open) .nav__burger { color: var(--ink); }
body.menu-open .nav__burger { color: var(--paper); }
body[data-nav="dark"]:not(.menu-open) .nav .gw,
.nav .gw {
  background: linear-gradient(115deg, rgba(0, 4, 72, .16) 0%, rgba(0, 4, 72, .06) 50%, rgba(0, 4, 72, .12) 100%);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.nav .glogo__edge g, body[data-nav="dark"]:not(.menu-open) .nav .glogo__edge g { stroke: url(#gw-edge-dark); }

/* Logo mit Schriftzug */
.nav__brand { display: inline-flex; align-items: center; gap: 12px; }
.nav__brand .glogo { width: 74px; }
.nav__wordmark {
  order: 2;
  font-family: var(--display); font-weight: 700; font-size: 14px; line-height: 1.05;
  letter-spacing: .02em; text-transform: uppercase; color: var(--navy-deep);
  white-space: nowrap;
}
@media (max-width: 1370px) { .nav__brand .glogo { width: 64px; } .nav__wordmark { font-size: 12.5px; } }

/* CTA: blau + pulsierender Ring */
.nav .nav__pill a.nav__cta, body[data-nav="dark"]:not(.menu-open) .nav .nav__pill a.nav__cta {
  position: relative; background: var(--blue); color: #fff;
}
.nav .nav__pill a.nav__cta:hover, body[data-nav="dark"]:not(.menu-open) .nav .nav__pill a.nav__cta:hover { background: var(--blue-royal); color: #fff; }
.nav__pill--cta { overflow: visible; }
.nav .nav__pill a.nav__cta::after {
  content: ''; position: absolute; inset: -3px; border-radius: 9999px;
  border: 2px solid rgba(70, 109, 255, .55);
  animation: ctapulse 2.4s var(--ease) infinite;
  pointer-events: none;
}
@keyframes ctapulse {
  0%, 100% { transform: scale(1); opacity: .8; }
  55% { transform: scale(1.14); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .nav .nav__pill a.nav__cta::after { animation: none; } }

/* --- Bento: Smartphone in der "Projekt starten"-Kachel --- */
.hb--blue { position: relative; overflow: hidden; }
.hb__img--phone {
  position: absolute; right: -12%; bottom: -34%;
  width: 62%; max-width: 300px; height: auto;
  pointer-events: none;
}
.hb--blue .hb__title, .hb--blue .hb__kicker { position: relative; z-index: 1; }

/* --- Partner-Wall: 3 Spalten, Hierarchie, nur Logos, groesser --- */
.pwall { grid-template-columns: repeat(3, 1fr); }
.pcard { min-height: 210px; padding: 30px 24px; }
/* Die Groesse der Wall-Logos steht weiter unten an einer Stelle (Suche nach
   "Einheitliches optisches Band"). Hier bewusst keine zweite Regel: es gab
   schon mehrere konkurrierende, von denen die spaetere gewann. */
.pcard--tier1 { border: 1.4px solid rgba(70, 109, 255, .35); position: relative; }
.pcard--tier1::before {
  content: 'Hub-Partner';
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  font-family: var(--ui); font-weight: 500; font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--blue);
}
.pcard__namefallback {
  font-family: var(--display); font-weight: 700; font-size: clamp(20px, 2vw, 26px);
  color: var(--navy-deep); text-align: center; line-height: 1.15;
}
@media (max-width: 900px) { .pwall { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .pwall { grid-template-columns: 1fr; } .pcard { min-height: 170px; } }

/* --- Barrierefreiheit-Panel im Footer --- */
.footer__a11ybtn {
  font: inherit; font-size: 13.5px; color: var(--dim-on-dark);
  background: none; border: none; cursor: pointer; padding: 0;
}
.footer__a11ybtn:hover { color: var(--paper); }
.a11y { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; padding: 14px 0 6px; }
.a11y__title { font-size: 13px; color: var(--dim-on-dark); }
.a11y__opt { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--paper); cursor: pointer; }
.a11y__opt input { accent-color: var(--blue-bright); width: 16px; height: 16px; }
body.a11y-font { font-size: 19px; }
body.a11y-font .sec__lede, body.a11y-font .card__excerpt, body.a11y-font .mrow, body.a11y-font .lstep__hint { font-size: 1.05em; }
body.a11y-contrast { --dim-on-dark: rgba(255, 255, 255, .95); --ink: #000222; }
body.a11y-contrast .card__excerpt { color: #000448; }
body.a11y-contrast .pbox__cfield input::placeholder, body.a11y-contrast .pbox__ta::placeholder { color: rgba(255, 255, 255, .85); }

/* --- Nav-Logo im Stil des Partner-Badges: Navy-Quadrat + weisses Zeichen --- */
.nav__brand .glogo[hidden] { display: none; }
.nav__mark {
  width: 46px; height: 46px; flex: none;
  background: var(--navy-deep); border-radius: 10px;
  display: grid; place-items: center;
}
.nav__mark svg { width: 72%; height: auto; display: block; }
.nav__wordmark { order: 0; }
.nav__brand { gap: 11px; }

/* --- Let's-match-Felder: Lesbarkeit weiter erhoeht --- */
.pbox__cfield input {
  background: rgba(157, 180, 255, .2);
  border-color: rgba(157, 180, 255, .55);
  color: #fff; font-size: 15.5px; height: 44px;
}
.pbox__cfield input::placeholder { color: rgba(255, 255, 255, .85); }
.pbox__ta { color: #fff; }
.pbox__ta::placeholder { color: rgba(255, 255, 255, .8); }
.pbox__mtype-label { color: rgba(255, 255, 255, .88); }
.pbox__mtypebtn { color: #fff; border-color: rgba(157, 180, 255, .55); background: rgba(157, 180, 255, .14); }

/* --- News-Overlay: zentriert (globaler Reset killt dialog margin:auto), scrollbar, Button im System-Stil --- */
dialog.newsmodal { margin: auto; }
.newsmodal__inner { max-height: min(82vh, 82svh); overscroll-behavior: contain; }
.newsmodal__body { overflow-wrap: anywhere; }
.newsmodal__close {
  background: var(--navy-deep); color: #fff; border: none;
  transition: background .22s var(--ease), color .22s var(--ease), transform .22s var(--ease);
}
.newsmodal__close:hover { background: var(--gold); color: var(--navy-deep); transform: translateY(-1px); }

/* --- News-Pagination --- */
.newspage {
  display: flex; justify-content: center; align-items: center; gap: 8px;
  margin-top: 34px;
}
.newspage__btn {
  min-width: 42px; height: 42px; padding: 0 12px;
  font: inherit; font-family: var(--ui); font-weight: 500; font-size: 14px;
  color: var(--dim-on-dark); background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(157, 180, 255, .3); border-radius: 999px; cursor: pointer;
  transition: background .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease);
}
.newspage__btn:hover:not(:disabled) { background: var(--gold); border-color: var(--gold); color: var(--navy-deep); }
.newspage__btn[aria-current="true"] { background: var(--blue-bright); border-color: var(--blue-bright); color: var(--navy-deep); }
.newspage__btn:disabled { opacity: .35; cursor: default; }

/* --- Logo: Glaseffekt zurueck, Proportionen wie im Partner-Badge --- */
.nav__mark { display: none; }
.nav__brand .glogo { width: 66px; }
.nav__brand .glogo[hidden] { display: block; }
.nav__wordmark { font-size: 13.5px; }
@media (max-width: 1370px) { .nav__brand .glogo { width: 58px; } .nav__wordmark { font-size: 12px; } }

/* --- Barrierefreiheit: schwebender Button + Pop-up --- */
.a11y-fab {
  position: fixed; left: 20px; bottom: 20px; z-index: 140;
  width: 52px; height: 52px; border-radius: 999px; border: none; cursor: pointer;
  background: var(--navy-deep); color: #fff;
  box-shadow: 0 10px 30px rgba(0, 3, 48, .35);
  display: grid; place-items: center;
  transition: background .22s var(--ease), color .22s var(--ease), transform .22s var(--ease);
}
.a11y-fab:hover { background: var(--gold); color: var(--navy-deep); transform: translateY(-2px); }
.a11y-fab:focus-visible { outline: 2px solid var(--blue-bright); outline-offset: 3px; }
.a11y {
  position: fixed; left: 20px; bottom: 84px; z-index: 140;
  width: min(300px, calc(100vw - 40px));
  display: flex; flex-direction: column; gap: 12px; padding: 18px 20px;
  background: var(--navy-deep); color: var(--paper);
  border: 1px solid rgba(157, 180, 255, .3); border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0, 3, 48, .45);
}
.a11y__title { font-family: var(--ui); font-weight: 500; font-size: 13px; color: rgba(255, 255, 255, .8); }
.a11y__opt { font-size: 14.5px; }
.nav__wordmark { order: 2; }
.a11y[hidden] { display: none; }

/* Partner-Kacheln als Buttons (Overlay) */
.pwall .pcard { cursor: pointer; font: inherit; text-align: center; }
@media (pointer: coarse) { .pwall .pcard { pointer-events: auto; } }

/* Ministeriums-Logos im Footer (Reihenfolge fix) */
.ministry { display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center; }
.ministry img { height: 54px; width: auto; background: #fff; border-radius: 10px; padding: 7px 12px; }

/* Partner-Info nur ueber das Info-Icon */
.pwall .pcard { cursor: default; position: relative; }
.pcard__info {
  position: absolute; top: 12px; right: 12px;
  width: 30px; height: 30px; border-radius: 999px; border: 1px solid rgba(0, 4, 72, .2);
  background: #fff; color: rgba(0, 4, 72, .65); cursor: pointer;
  display: grid; place-items: center;
  transition: background .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease);
}
.pcard__info:hover { background: var(--gold); border-color: var(--gold); color: var(--navy-deep); }
.pcard__info:focus-visible { outline: 2px solid var(--blue-bright); outline-offset: 2px; }
.pcard--tier1 .pcard__info { top: 10px; right: 10px; }
@media (pointer: coarse) { .pwall .pcard { pointer-events: auto; } }

/* Popup-Feinschliff: lesbarer Website-Button + X im Look der Info-Icons */
.newsmodal__sources a.btn { color: #fff; text-decoration: none; font-size: 14.5px; }
.newsmodal__sources a.btn:hover { text-decoration: none; }
.newsmodal__close {
  background: #fff; color: rgba(0, 4, 72, .65);
  border: 1px solid rgba(0, 4, 72, .2);
}
.newsmodal__close:hover { background: var(--gold); border-color: var(--gold); color: var(--navy-deep); }

/* ================================================================
   V2 — Feedback-Runde 25.07.
   ================================================================ */

/* --- Navigationsleiste: durchgehende Glas-Pill mit Abstand zum Rand --- */
.nav {
  top: 14px; left: 14px; right: 14px;
  padding: 10px 18px;
  border-radius: 22px;
  background: rgba(244, 247, 255, .72);
  background-blend-mode: luminosity;
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  backdrop-filter: blur(18px) saturate(1.6);
  border: none;
  box-shadow: 0 10px 34px rgba(0, 3, 48, .1), inset 0 1px 1px rgba(255, 255, 255, .7);
  overflow: hidden;
}
/* masked-gradient Kontur wie bei den anderen Glasflaechen */
.nav::before {
  content: ''; position: absolute; inset: 0;
  border-radius: inherit; padding: 1.4px;
  background: linear-gradient(180deg, rgba(255,255,255,.85) 0%, rgba(255,255,255,.3) 22%, rgba(255,255,255,0) 45%, rgba(255,255,255,0) 58%, rgba(255,255,255,.3) 80%, rgba(255,255,255,.85) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
@media (max-width: 560px) { .nav { top: 10px; left: 10px; right: 10px; border-radius: 18px; padding: 8px 12px; } }

/* --- Logo: Proportionen exakt aus partner-logo.svg (Zeichen 155 : Text 310,
       Gap 30 — also Text = 2x Zeichenbreite, Gap = 0.19x) --- */
.nav__brand { gap: 0; align-items: center; }
.nav__brand .glogo { width: 62px; margin-right: 11.8px; }   /* 62 * 0.19 = 11.8 */
.nav__wordmark {
  order: 2;
  width: 124px;                                              /* 62 * 2 */
  font-family: var(--display); font-weight: 700;
  font-size: 15px; line-height: 1.06; letter-spacing: -.005em;
  text-transform: uppercase; color: var(--navy-deep);
  white-space: nowrap;
}
@media (max-width: 1370px) {
  .nav__brand .glogo { width: 52px; margin-right: 9.9px; }
  .nav__wordmark { width: 104px; font-size: 12.6px; }
}

/* --- Hero: sicherer Abstand unter der Leiste (kleine Viewports) --- */
.hero__content { padding-top: max(20vh, 148px); }
@media (max-width: 1080px) { .hero__content { padding-top: max(18vh, 132px); } }

/* --- Verlinkte Angebote-Kachel darf nicht wie ein Textlink aussehen --- */
a.bcard, a.bcard:hover, a.bcard * { text-decoration: none; }
a.bcard { color: inherit; display: flex; }

/* --- "Partner fuer Innovationsprojekte": Textabstand wie bei den Bubble-Karten --- */
.bcard--split .bcard__side { padding: clamp(22px, 2.4vw, 32px) clamp(22px, 2.4vw, 32px) clamp(22px, 2.4vw, 32px) 10px; }
@media (max-width: 900px) { .bcard--split .bcard__side { padding: 18px clamp(20px, 5vw, 28px) clamp(20px, 5vw, 28px); } }

/* --- Partner-Wall: Konsortialpartner als Bubble, keine Sonderkontur --- */
.pcard--tier1 { border: 1px solid rgba(0, 3, 48, .06); }
.pcard--tier1::before {
  content: 'Hub-Partner';
  top: 14px; left: 14px; transform: none;
  padding: 5px 12px; border-radius: 200px;
  background: rgba(70, 109, 255, .12); color: var(--navy-deep);
  font-family: var(--card-font); font-weight: 400; font-size: 11.5px;
  letter-spacing: .02em; text-transform: none;
}
.pcard--tier1 .pcard__info { top: 12px; right: 12px; }

/* --- Popup-Buttons: Glaslook statt Gold-Kontur --- */
.newsmodal__sources a.btn,
.newsmodal .btn {
  background: rgba(70, 109, 255, .14);
  border: 1px solid rgba(70, 109, 255, .3);
  color: var(--navy-deep) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
  backdrop-filter: blur(10px) saturate(1.3);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .55);
}
.newsmodal__sources a.btn:hover,
.newsmodal .btn:hover {
  background: rgba(70, 109, 255, .26) !important;
  border-color: rgba(70, 109, 255, .5) !important;
  color: var(--navy-deep) !important;
  transform: translateY(-1px);
}
.newsmodal__close {
  background: rgba(255, 255, 255, .7);
  border: 1px solid rgba(0, 4, 72, .14);
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
  backdrop-filter: blur(10px) saturate(1.3);
}
.newsmodal__close:hover { background: rgba(70, 109, 255, .18); border-color: rgba(70, 109, 255, .4); color: var(--navy-deep); }
/* Info-Icons in den Kacheln ebenfalls im Glaslook */
.pcard__info { background: rgba(70, 109, 255, .1); border-color: rgba(70, 109, 255, .25); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.pcard__info:hover { background: rgba(70, 109, 255, .24); border-color: rgba(70, 109, 255, .45); color: var(--navy-deep); }

/* --- Footer: Ministeriums-Logos verlinkt --- */
.ministry a { display: inline-flex; transition: transform .22s var(--ease); }
.ministry a:hover { transform: translateY(-2px); }
.news-empty { text-align: center; color: var(--dim-on-dark); font-size: 15px; padding: 40px 0 10px; }
/* Website-Feld ueber die volle Breite */
.pbox__cfield--wide { grid-column: 1 / -1; }

/* --- Hero: Scroll-Hinweis (Feedback Corinna: Scrollen kenntlich machen) --- */
.hero__scroll {
  position: relative; z-index: 3;
  display: inline-flex; flex-direction: column; align-items: center; gap: 6px;
  margin: clamp(14px, 2.4vh, 26px) auto 0;
  font-family: var(--ui); font-weight: 500; font-size: 13px; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(0, 4, 72, .62); text-decoration: none;
  transition: color .25s var(--ease);
}
.hero__scroll:hover { color: var(--navy-deep); }
.hero__scroll svg { animation: scrollnudge 2.2s var(--ease) infinite; }
@keyframes scrollnudge {
  0%, 100% { transform: translateY(0); opacity: .75; }
  50% { transform: translateY(6px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .hero__scroll svg { animation: none; } }

/* --- Schluesseltechnologien: Logo-Kontur duenner + oberer Teil sichtbar --- */
.tstage__edge g { stroke-width: 5.5; }
.tstage__edge { opacity: .72; overflow: visible; }
.tstage__glassmark { --gwblur: 18px; }
.tstage__glassmark .gw { background: rgba(255, 255, 255, .2); }
@media (max-width: 900px) { .tstage__edge g { stroke-width: 4; } }
@media (max-width: 560px) { .tstage__edge g { stroke-width: 3.2; } }

/* --- Karten-Detailbox: Partnerlogo + Info-Icon --- */
.map__cardanim { position: relative; }
.map__cardlogo {
  display: block; margin-top: 16px; padding: 12px 16px;
  background: #fff; border-radius: 12px; width: fit-content;
}
.map__cardlogo img { display: block; height: 34px; width: auto; max-width: 190px; object-fit: contain; }
.map__cardinfo {
  position: absolute; top: 0; right: 0;
  width: 30px; height: 30px; border-radius: 999px; cursor: pointer;
  background: rgba(157, 180, 255, .14); border: 1px solid rgba(157, 180, 255, .32);
  color: var(--blue-bright); display: grid; place-items: center;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: background .22s var(--ease), border-color .22s var(--ease), color .22s var(--ease);
}
.map__cardinfo:hover { background: rgba(157, 180, 255, .3); border-color: var(--blue-bright); color: #fff; }
.map__card h4 { padding-right: 40px; }

/* ================= Multi-Step-Formular ================= */
.pstep { display: flex; align-items: center; gap: 0; list-style: none; padding: 4px 2px 14px; }
.pstep__i { display: flex; align-items: center; gap: 9px; flex: 1; color: rgba(255, 255, 255, .5); font-family: var(--ui); font-size: 13px; }
.pstep__i + .pstep__i::before {
  content: ''; flex: 1; height: 1px; margin-right: 10px;
  background: rgba(157, 180, 255, .28);
}
.pstep__n {
  width: 26px; height: 26px; flex: none; border-radius: 999px;
  display: grid; place-items: center; font-size: 12.5px; font-weight: 500;
  background: rgba(157, 180, 255, .14); border: 1px solid rgba(157, 180, 255, .3); color: rgba(255, 255, 255, .7);
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.pstep__i.is-on { color: #fff; }
.pstep__i.is-on .pstep__n { background: var(--blue-bright); border-color: var(--blue-bright); color: var(--navy-deep); }
.pstep__i.is-done .pstep__n { background: rgba(157, 180, 255, .35); border-color: rgba(157, 180, 255, .5); color: #fff; }
.pstep__i.is-done { color: rgba(255, 255, 255, .8); }
@media (max-width: 620px) { .pstep__l { display: none; } .pstep__i { flex: 0 0 auto; } .pstep__i + .pstep__i::before { width: 28px; flex: none; } }

.pform { animation: pformin .32s var(--ease-out) both; }
@keyframes pformin { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.pform__hint { margin-top: 10px; font-family: var(--ui); font-size: 12.5px; color: rgba(255, 255, 255, .6); }

/* Zusammenfassung */
.psum { display: flex; flex-direction: column; gap: 2px; padding: 4px 2px; }
.psum__row { display: grid; grid-template-columns: 108px 1fr; gap: 12px; padding: 9px 0; border-bottom: 1px solid rgba(157, 180, 255, .16); }
.psum__row:last-child { border-bottom: none; }
.psum dt { font-family: var(--ui); font-size: 12.5px; color: rgba(255, 255, 255, .55); }
.psum dd { font-size: 14.5px; color: #fff; overflow-wrap: anywhere; }

/* Navigation */
.pbox__nav { display: flex; align-items: center; gap: 8px; }
.pnav {
  height: 38px; padding: 0 18px; border-radius: 999px; cursor: pointer;
  font: inherit; font-family: var(--ui); font-weight: 500; font-size: 14px;
  background: rgba(157, 180, 255, .16); border: 1px solid rgba(157, 180, 255, .34); color: #fff;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: background .22s var(--ease), border-color .22s var(--ease), transform .22s var(--ease);
}
.pnav:hover { background: rgba(157, 180, 255, .3); border-color: var(--blue-bright); transform: translateY(-1px); }
.pnav--next { background: var(--blue-bright); border-color: var(--blue-bright); color: var(--navy-deep); }
.pnav--next:hover { background: #fff; border-color: #fff; }

/* Anhang */
.pbox__filehint { font-family: var(--ui); font-size: 11.5px; color: rgba(255, 255, 255, .48); margin-left: 2px; }
@media (max-width: 620px) { .pbox__filehint { display: none; } }
.pfile {
  display: inline-flex; align-items: center; gap: 9px; max-width: 100%;
  padding: 7px 9px 7px 11px; margin: 0 0 10px;
  background: rgba(157, 180, 255, .16); border: 1px solid rgba(157, 180, 255, .3);
  border-radius: 12px; color: #fff; font-family: var(--ui); font-size: 13px;
}
.pfile img { width: 26px; height: 26px; object-fit: cover; border-radius: 6px; }
.pfile > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.pfile__x {
  width: 22px; height: 22px; flex: none; border-radius: 999px; cursor: pointer;
  background: rgba(255, 255, 255, .12); border: none; color: #fff; font-size: 16px; line-height: 1;
}
.pfile__x:hover { background: rgba(255, 92, 92, .5); }

/* ================= Barrierefreiheit: modernes Panel ================= */
.a11y {
  position: fixed; left: 20px; bottom: 84px; z-index: 150;
  width: min(340px, calc(100vw - 40px));
  padding: 16px; gap: 0;
  display: block;
  background: rgba(10, 17, 80, .92);
  -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5);
  border: 1px solid rgba(157, 180, 255, .28); border-radius: 20px;
  box-shadow: 0 24px 60px rgba(0, 3, 48, .5);
  animation: a11yin .24s var(--ease-out) both;
}
@keyframes a11yin { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
.a11y[hidden] { display: none; }
.a11y__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.a11y__title { font-family: var(--ui); font-weight: 500; font-size: 14px; color: #fff; }
.a11y__close {
  width: 28px; height: 28px; border-radius: 999px; cursor: pointer; line-height: 1;
  background: rgba(157, 180, 255, .14); border: 1px solid rgba(157, 180, 255, .28);
  color: rgba(255, 255, 255, .8); font-size: 18px;
}
.a11y__close:hover { background: rgba(157, 180, 255, .3); color: #fff; }
.a11y__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.a11y__card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  padding: 12px; border-radius: 14px; cursor: pointer;
  background: rgba(157, 180, 255, .08); border: 1px solid rgba(157, 180, 255, .18);
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.a11y__card:hover { background: rgba(157, 180, 255, .16); }
.a11y__card input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.a11y__ico { color: rgba(255, 255, 255, .7); display: block; }
.a11y__lbl { font-family: var(--ui); font-size: 12.5px; line-height: 1.3; color: rgba(255, 255, 255, .82); }
.a11y__card:has(input:checked) { background: var(--blue-bright); border-color: var(--blue-bright); }
.a11y__card:has(input:checked) .a11y__ico, .a11y__card:has(input:checked) .a11y__lbl { color: var(--navy-deep); }
.a11y__card:has(input:focus-visible) { outline: 2px solid #fff; outline-offset: 2px; }
.a11y__reset {
  width: 100%; margin-top: 10px; padding: 9px; border-radius: 12px; cursor: pointer;
  background: none; border: 1px solid rgba(157, 180, 255, .22);
  color: rgba(255, 255, 255, .65); font: inherit; font-family: var(--ui); font-size: 12.5px;
}
.a11y__reset:hover { color: #fff; border-color: rgba(157, 180, 255, .45); }
@media (max-width: 560px) { .a11y { left: 10px; right: 10px; width: auto; bottom: 78px; } }

/* Wirkung der Optionen */
body.a11y-font { font-size: 19px; }
body.a11y-font .sec__lede, body.a11y-font .card__excerpt, body.a11y-font .mrow, body.a11y-font .lstep__hint { font-size: 1.06em; }
body.a11y-contrast { --dim-on-dark: rgba(255,255,255,.97); --dim-on-paper: rgba(0,4,72,.92); --ink: #000222; }
body.a11y-contrast .card__excerpt, body.a11y-contrast .sub__prose p { color: #000448; }
body.a11y-contrast .pbox__cfield input::placeholder, body.a11y-contrast .pbox__ta::placeholder { color: rgba(255,255,255,.92); }
body.a11y-contrast .sec__lede, body.a11y-contrast .lstep__hint, body.a11y-contrast .mrow { color: inherit; }
body.a11y-links a:not(.btn):not(.pcard):not(.card):not(.nav__brand) { text-decoration: underline; text-underline-offset: 3px; }
body.a11y-motion *, body.a11y-motion *::before, body.a11y-motion *::after {
  animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important;
}
body.a11y-spacing { line-height: 1.85; letter-spacing: .012em; }
body.a11y-spacing p, body.a11y-spacing li { margin-bottom: .85em; }
body.a11y-focus :focus-visible { outline: 3px solid #FFE5AA !important; outline-offset: 3px !important; border-radius: 4px; }

/* ================= Unterseiten ================= */
body.subpage { background: var(--ice); }
.sub { padding-top: 96px; }
.sub__hero { padding: clamp(40px, 7vh, 90px) 0 clamp(24px, 4vh, 44px); }
.sub__kicker { font-family: var(--ui); font-weight: 500; font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); margin-bottom: 12px; }
.sub__title { font-family: var(--display); font-weight: 700; font-size: clamp(38px, 6vw, 76px); line-height: 1.02; letter-spacing: -.02em; color: var(--navy-deep); }
.sub__title em { font-style: normal; color: var(--blue); }
.sub__lede { margin-top: 18px; max-width: 62ch; font-size: clamp(16px, 1.5vw, 19px); line-height: 1.6; color: rgba(19, 19, 71, .75); }
.sub__body { padding-bottom: clamp(60px, 10vh, 120px); }
.sub__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, .8fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
@media (max-width: 900px) { .sub__grid { grid-template-columns: 1fr; } }
.sub__prose { max-width: 78ch; }
.sub__prose h2 { font-family: var(--display); font-weight: 700; font-size: clamp(19px, 1.9vw, 24px); color: var(--navy-deep); margin: 34px 0 10px; }
.sub__prose p { color: rgba(19, 19, 71, .8); line-height: 1.7; margin-bottom: 12px; }
.sub__prose a { color: var(--blue-royal); }
.sub__meta { margin-top: 34px; font-size: 13px; color: rgba(19, 19, 71, .5); }

/* Kontaktformular */
.cform { background: #fff; border-radius: 24px; padding: clamp(22px, 3vw, 38px); box-shadow: 0 20px 60px -30px rgba(0, 3, 48, .3); }
.cform__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 620px) { .cform__grid { grid-template-columns: 1fr; } }
.cform__field { display: flex; flex-direction: column; gap: 6px; }
.cform__field--wide { grid-column: 1 / -1; }
.cform__field span { font-family: var(--ui); font-size: 13px; color: rgba(19, 19, 71, .7); }
.cform__field input, .cform__field textarea {
  font: inherit; font-size: 15px; color: var(--ink);
  padding: 12px 14px; border-radius: 12px;
  border: 1.4px solid rgba(0, 4, 72, .16); background: var(--ice);
  outline: none; transition: border-color .2s var(--ease), background .2s var(--ease);
}
.cform__field input:focus, .cform__field textarea:focus { border-color: var(--blue); background: #fff; }
.cform__field textarea { resize: vertical; min-height: 130px; }
.cform__err { margin-top: 14px; color: #C22; font-size: 14px; }
.cform__note { margin: 16px 0 18px; font-size: 12.5px; color: rgba(19, 19, 71, .6); }
.cform__note a { color: var(--blue-royal); }
.cform__done { margin-top: 10px; font-size: 16px; color: var(--navy-deep); font-weight: 500; }
.cinfo { background: rgba(70, 109, 255, .07); border-radius: 24px; padding: clamp(20px, 2.6vw, 30px); }
.cinfo h2 { font-family: var(--display); font-weight: 700; font-size: 19px; color: var(--navy-deep); margin-bottom: 10px; }
.cinfo h3 { font-family: var(--display); font-weight: 700; font-size: 16px; color: var(--navy-deep); margin-bottom: 8px; }
.cinfo p { font-size: 15px; line-height: 1.6; color: rgba(19, 19, 71, .8); margin-bottom: 14px; }
.cinfo a { color: var(--blue-royal); }
.cinfo hr { border: none; border-top: 1px solid rgba(0, 4, 72, .12); margin: 20px 0; }

/* ================= Feedback-Runde 26.07. ================= */

/* --- Navigation: kraeftigeres Glas, volle Pill-Rundung, Sektions-Padding --- */
.nav {
  left: var(--gutter); right: var(--gutter);
  top: 16px;
  padding: 9px 10px 9px 22px;
  border-radius: 999px;
  background: rgba(240, 245, 255, .86);
  -webkit-backdrop-filter: blur(26px) saturate(1.9) brightness(1.04);
  backdrop-filter: blur(26px) saturate(1.9) brightness(1.04);
  box-shadow: 0 14px 40px rgba(0, 3, 48, .14), inset 0 1px 2px rgba(255, 255, 255, .9);
}
.nav::before { border-radius: 999px; }
@media (max-width: 560px) { .nav { left: 14px; right: 14px; top: 12px; padding: 8px 10px 8px 16px; } }

/* --- Logo: Schriftzug fuellt exakt die Icon-Hoehe (62 x 37.4) --- */
.nav__brand .glogo { width: 62px; margin-right: 12px; }
.nav__wordmark {
  width: auto; height: 37.4px;
  display: flex; flex-direction: column; justify-content: center;
  font-size: 17.6px; line-height: 1.06; letter-spacing: -.012em;
}
@media (max-width: 1370px) {
  .nav__brand .glogo { width: 52px; margin-right: 10px; }
  .nav__wordmark { height: 31.4px; font-size: 14.8px; }
}

/* --- News-/Partner-Popup: garantiert scrollbar, Luft unten --- */
.newsmodal { max-height: min(86vh, 86svh); display: flex; }
.newsmodal__inner {
  max-height: min(86vh, 86svh);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding-bottom: clamp(32px, 5vw, 52px);
  width: 100%;
}
.newsmodal__sources { padding-bottom: 6px; }

/* --- X-Button: keine gelbe Kontur, Glaslook --- */
.newsmodal__close,
.newsmodal__close:hover,
.newsmodal__close:focus {
  background: rgba(70, 109, 255, .12) !important;
  border: 1px solid rgba(70, 109, 255, .26) !important;
  color: var(--navy-deep) !important;
  box-shadow: none !important;
}
.newsmodal__close:hover { background: rgba(70, 109, 255, .24) !important; border-color: rgba(70, 109, 255, .45) !important; }

/* --- Partner-Logos groesser --- */
.pcard { min-height: 230px; padding: 34px 26px; }
.pcard__logo img { width: min(330px, 96%); }
.map__cardlogo img { height: 40px; max-width: 210px; }

/* --- Info-Icon: nur ein Kreis --- */
.pcard__info svg, .map__cardinfo svg { width: 15px; height: 15px; }

/* --- Footer: Berger-Badge zentriert, Ministeriums-Logos mehr Luft --- */
.footer__grid { justify-content: space-between; }
.footer__badges { justify-content: center; flex: 1; }
.ministry img { padding: 12px 18px; height: 58px; }
.ministry { gap: 16px; }
@media (max-width: 760px) { .ministry img { height: 48px; padding: 10px 14px; } }

/* Nav: mehr Links (inkl. Kontakt) -> kompakter, damit nichts das Logo beruehrt */
.nav__pill a { padding: 11px 12px; font-size: 14.2px; }
.nav__group { gap: 0; }
.nav .nav__pill a.nav__cta { padding: 12px 20px; font-size: 15px; }
@media (max-width: 1500px) { .nav__pill a { padding: 10px 9px; font-size: 13.4px; } }
@media (max-width: 1320px) { .nav__pill a { padding: 9px 7px; font-size: 12.6px; } .nav__wordmark { display: none; } }

/* --- Karten-Detailbox: Logo frei auf dunklem Grund, weiss eingefaerbt, gross --- */
.map__cardlogo {
  display: block; margin-top: 20px; padding: 0;
  background: none; width: 100%;
}
.map__cardlogo img {
  height: auto; width: min(200px, 74%); max-width: none;
  /* dunkle Partner-Logos auf Navy sichtbar machen */
  filter: brightness(0) invert(1);
  opacity: .92;
}

/* --- Schluesseltechnologien: Logo deutlich sichtbarer --- */
.tstage__glassmark { --gwblur: 14px; }
.tstage__glassmark .gw {
  background: rgba(255, 255, 255, .3);
  -webkit-backdrop-filter: blur(var(--gwblur)) saturate(1.4) brightness(1.35);
  backdrop-filter: blur(var(--gwblur)) saturate(1.4) brightness(1.35);
}
/* Kontur: gleichmaessig hell statt in der Mitte auslaufend */
.tstage__edge g { stroke: rgba(255, 255, 255, .8); stroke-width: 4.5; }
.tstage__edge { opacity: 1; filter: drop-shadow(0 0 18px rgba(157, 180, 255, .45)); }
@media (max-width: 900px) { .tstage__edge g { stroke-width: 3.4; } }
@media (max-width: 560px) { .tstage__edge g { stroke-width: 2.8; } }
/* Glanzkanten etwas kraeftiger */
.tstage__glassmark .gws { opacity: .9; }

/* ================= Formular-Feinschliff ================= */

/* Statusindikator: zentriert, mehr Luft, klarere Verbindung */
.pstep {
  justify-content: center;
  gap: 0;
  padding: 14px 4px 22px;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(157, 180, 255, .14);
}
.pstep__i { flex: 0 1 auto; gap: 10px; padding-right: 0; }
.pstep__i + .pstep__i { margin-left: 0; }
.pstep__i + .pstep__i::before { flex: 0 0 auto; width: clamp(24px, 5vw, 56px); margin: 0 14px 0 14px; }
.pstep__n { width: 30px; height: 30px; font-size: 13px; }
.pstep__l { font-size: 13.5px; white-space: nowrap; }
.pstep__i.is-on .pstep__n { box-shadow: 0 0 0 4px rgba(157, 180, 255, .18); }
@media (max-width: 620px) {
  .pstep { padding: 12px 2px 18px; }
  .pstep__i + .pstep__i::before { width: 22px; margin: 0 9px; }
  .pstep__i.is-on .pstep__l { display: block; }   /* aktiven Schritt benennen */
}

/* Absenden-Button: auffaellig mit Text */
.pbox__send {
  width: auto; height: 42px; padding: 0 22px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--blue-bright); border: none; color: var(--navy-deep);
  font: inherit; font-family: var(--ui); font-weight: 500; font-size: 14.5px;
  cursor: pointer; box-shadow: 0 8px 24px rgba(157, 180, 255, .3);
  transition: background .22s var(--ease), transform .22s var(--ease), box-shadow .22s var(--ease);
}
.pbox__send:hover { background: #fff; transform: translateY(-2px); box-shadow: 0 12px 30px rgba(157, 180, 255, .42); }
.pbox__send svg { transition: transform .22s var(--ease); }
.pbox__send:hover svg { transform: translateX(3px); }
.pbox__send.is-busy { opacity: .6; pointer-events: none; }

/* i-Icon: groesser im Kreis */
.pcard__info { width: 34px; height: 34px; }
.map__cardinfo { width: 34px; height: 34px; }
/* hidden-Attribut muss die display-Regeln schlagen */
.pbox__send[hidden], .pnav[hidden], .pform[hidden] { display: none !important; }

/* ================= Feedback-Runde 27.07. ================= */

/* --- Nav: gleichmaessiges Innen-Padding rundum --- */
.nav { padding: 12px; }
.nav__pill { padding: 0; }
.nav__pill a { padding: 10px 12px; }
.nav .nav__pill a.nav__cta { padding: 11px 20px; }
@media (max-width: 560px) { .nav { padding: 10px; } }

/* --- Logo: Schriftzug fuellt die Icon-Hoehe, duennere Icon-Kontur --- */
.nav__brand .glogo { width: 58px; margin-right: 11px; }
.nav__brand .glogo__edge g { stroke-width: 2; }
.nav__wordmark {
  height: 35px; font-size: 20px; line-height: 0.88;
  letter-spacing: -.02em; display: flex; flex-direction: column; justify-content: center;
}
@media (max-width: 1370px) {
  .nav__brand .glogo { width: 50px; margin-right: 9px; }
  .nav__wordmark { height: 30px; font-size: 17px; }
}

/* --- Match-Formular: mehr Innenabstand --- */
.pbox { padding: clamp(20px, 2.6vw, 34px); }
.pbox__row { margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(157, 180, 255, .14); }
.pstep { padding: 2px 4px 22px; }
.pform { padding: 4px 2px; }

/* --- Karten-Detailbox: Logo wieder auf heller Flaeche (sonst unsichtbar), gross --- */
.map__cardlogo {
  display: block; width: fit-content; margin-top: 20px;
  padding: 14px 20px; border-radius: 16px;
  background: #fff;
}
.map__cardlogo img { filter: none; opacity: 1; height: 46px; width: auto; max-width: 230px; }

/* --- Info-Button in der Karten-Detailbox: mit Text --- */
.map__cardinfo {
  position: static; width: auto; height: auto;
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: 16px; padding: 11px 18px; border-radius: 999px;
  background: rgba(157, 180, 255, .16); border: 1px solid rgba(157, 180, 255, .36);
  color: #fff; font: inherit; font-family: var(--ui); font-weight: 500; font-size: 13.5px;
}
.map__cardinfo:hover { background: var(--blue-bright); border-color: var(--blue-bright); color: var(--navy-deep); }
.map__card h4 { padding-right: 0; }

/* --- tstage: Glaskontur statt Volltonlinie --- */
.tstage__edge g { stroke: url(#gw-edge-strong); stroke-width: 5; }
.tstage__edge { opacity: 1; filter: drop-shadow(0 0 14px rgba(157, 180, 255, .5)); }

/* --- Dialog: hidden-Zustand darf nicht von display:flex ueberschrieben werden --- */
dialog.newsmodal:not([open]) { display: none !important; }
/* Sicherheitsabstand zwischen Menuepunkten und mittigem Logo */
.nav__pill:not(.nav__pill--cta) { padding-right: 18px; }
.nav__brand { padding-left: 6px; }

/* --- Nav: aktive Pill exakt so hoch wie der CTA-Button rechts --- */
.nav__pill a,
.nav .nav__pill a.nav__cta {
  height: 40px;
  display: inline-flex; align-items: center;
  padding-top: 0; padding-bottom: 0;
}
@media (max-width: 1320px) {
  .nav__pill a, .nav .nav__pill a.nav__cta { height: 36px; }
}

/* ================= Feedback-Runde 27.07. (2) =================
   Ein gemeinsames Glas-Rezept fuer alle Glasflaechen, damit der Look
   konsistent ist: Tint + Blur + Innen-Highlight + masked-gradient Kontur.
   Die Kontur ist in der Mitte nicht mehr voll transparent, sonst "reisst"
   sie an den Seiten ab (Nav, Karten-Liste, Status-Pill).                  */

:root {
  --glass-edge: linear-gradient(180deg,
    rgba(255, 255, 255, .62) 0%, rgba(255, 255, 255, .26) 20%,
    rgba(255, 255, 255, .09) 44%, rgba(255, 255, 255, .09) 56%,
    rgba(255, 255, 255, .26) 80%, rgba(255, 255, 255, .62) 100%);
  --glass-edge-strong: linear-gradient(180deg,
    rgba(255, 255, 255, .98) 0%, rgba(255, 255, 255, .5) 20%,
    rgba(255, 255, 255, .2) 44%, rgba(255, 255, 255, .2) 56%,
    rgba(255, 255, 255, .5) 80%, rgba(255, 255, 255, .98) 100%);
}
.liquid-glass::before, .liquid-glass-strong::before { background: var(--glass-edge); }

/* --- 1) Fokus-Ring blau statt gold: Ursache der "gelben Kontur" an den
   X-Buttons. Der Dialog fokussiert beim Oeffnen den Close-Button, dadurch
   greift :focus-visible — Hintergrund/Border zu ueberschreiben half nicht,
   weil die Kontur ein outline ist. --- */
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
[data-section="navy"] :focus-visible,
.newsmodal :focus-visible, .a11y :focus-visible { outline-color: var(--blue-royal); }
.newsmodal__close:focus-visible { outline-color: var(--blue-royal); }
/* Der bewusst goldene, extra-starke Ring bleibt der Barrierefreiheits-Option */
body.a11y-focus :focus-visible { outline: 3px solid #FFE5AA !important; outline-offset: 3px !important; border-radius: 4px; }

/* --- 2) Menue: konsistentes Glas (gleiches Rezept wie die Karten-Boxen) --- */
.nav {
  background: rgba(240, 245, 255, .82);
  background-blend-mode: luminosity;
  -webkit-backdrop-filter: blur(28px) saturate(2) brightness(1.05);
  backdrop-filter: blur(28px) saturate(2) brightness(1.05);
  box-shadow: 0 16px 44px rgba(0, 3, 48, .16), inset 0 1px 2px rgba(255, 255, 255, .95);
}
.nav::before { background: var(--glass-edge-strong); }

/* --- 3) Wortmarke als Originalpfad aus der Lockup-SVG.
   Gemessen: Icon-Ink 100.1, Text-Ink 100.8 -> Verhaeltnis 1.007, also
   gleiche Hoehe. Icon 58px breit => Ink-Hoehe 58*202/338 = 34.7px.       --- */
.nav__wordmark {
  display: block; width: auto; height: 34.9px;
  font-size: 0; line-height: 0; letter-spacing: normal;
}
@media (max-width: 1370px) { .nav__wordmark { height: 30.1px; } }
/* Zwischen 1100 und 1320px ist die Linkliste noch da -> Schriftzug weglassen */
@media (min-width: 1101px) and (max-width: 1320px) { .nav__wordmark { display: none; } }

/* --- 4) Mobil: Logo linksbuendig, Burger rechts --- */
@media (max-width: 1100px) {
  .nav { grid-template-columns: auto 1fr; }
  .nav__brand { grid-column: 1; grid-row: 1; justify-self: start; padding-left: 2px; }
  .nav__burger { grid-column: 2; grid-row: 1; justify-self: end; }
  .nav__wordmark { display: block; }
}
@media (max-width: 420px) { .nav__brand .glogo { width: 44px; margin-right: 8px; } .nav__wordmark { height: 26.3px; } }

/* --- 5) Mobiles Menue: Leiste bleibt hell -> Burger dunkel, sonst unsichtbar.
   Ausserdem darf die Liste auf niedrigen Viewports nicht abgeschnitten
   werden: flex-start + auto-Margins zentrieren, brechen aber nicht aus dem
   Scrollbereich aus (justify-content:center wuerde oben abschneiden).   --- */
body.menu-open .nav__burger { color: var(--ink); }
.mmenu {
  justify-content: flex-start;
  overflow-y: auto; overscroll-behavior: contain;
  padding-top: 96px; gap: 24px;
}
.mmenu__links { margin-top: auto; }
.mmenu__foot { margin-top: auto; }
@media (max-width: 560px) { .mmenu { padding-top: 86px; } }
@media (max-height: 720px) {
  .mmenu__links a { font-size: clamp(22px, 5.6vh, 34px); }
  .mmenu__links { gap: 2px; }
  .mmenu { gap: 14px; }
}
@media (max-height: 520px) {
  .mmenu__links a { font-size: clamp(19px, 6.4vh, 27px); }
  .mmenu__badge img { width: 84px; }
}

/* --- 6) Hero passt immer auf genau einen Bildschirm.
   Titel/Subline/Mockup zusaetzlich an die Viewport-HOEHE gekoppelt, damit
   nichts ueberlaeuft; das Mockup bleibt quadratisch, damit die Prozent-
   Position des Match-Buttons darin weiter stimmt.                        --- */
.hero { height: 100svh; min-height: 100svh; max-height: 100svh; }
.hero__content { padding-top: clamp(92px, 12.5vh, 156px); }
.hero__title { font-size: clamp(32px, min(6.6vw, 9vh), 96px); }
.hero__strap { font-size: clamp(14px, min(1.7vw, 2.2vh), 21px); margin-top: clamp(10px, 1.8vh, 22px); }
@media (max-width: 900px) {
  .hero { height: 100svh; min-height: 100svh; }
  .hero__content { padding-top: clamp(84px, 11vh, 130px); min-height: 0; }
}

/* --- 7) Scroll-Hinweis: nur der animierte Pfeil, am unteren Rand --- */
.hero__scroll {
  position: absolute; left: 50%; bottom: clamp(8px, 1.4vh, 18px);
  transform: translateX(-50%);
  margin: 0; gap: 0; width: 46px; height: 46px;
  align-items: center; justify-content: center;
  font-size: 0;
}
.hero__scroll svg { width: 28px; height: 28px; }

/* --- 8) Status-Pill hinter den drei Schritten (Glas wie die Navbar) --- */
.pstep {
  position: relative;
  width: fit-content; max-width: 100%;
  margin: 0 auto clamp(20px, 2.8vh, 30px);
  padding: 9px 22px; border-radius: 999px;
  background: rgba(157, 180, 255, .13);
  background-blend-mode: luminosity;
  -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .2);
}
.pstep::before {
  content: ''; position: absolute; inset: 0;
  border-radius: inherit; padding: 1.4px;
  background: var(--glass-edge);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
@media (max-width: 620px) { .pstep { padding: 8px 14px; } }

/* --- 9) Eingabefelder deutlich hervorgehoben --- */
.pbox__cfield input, .pbox__ta {
  background: rgba(157, 180, 255, .26);
  border: 1.5px solid rgba(157, 180, 255, .62);
  box-shadow: inset 0 2px 6px rgba(0, 3, 48, .22);
  color: #fff;
}
.pbox__cfield input::placeholder, .pbox__ta::placeholder { color: rgba(244, 243, 238, .78); }
.pbox__cfield input:focus, .pbox__ta:focus {
  background: rgba(157, 180, 255, .38);
  border-color: var(--blue-bright);
  box-shadow: inset 0 2px 6px rgba(0, 3, 48, .16), 0 0 0 4px rgba(157, 180, 255, .26);
}
.pbox__cfield label, .pbox__ta-label { color: rgba(255, 255, 255, .9); }

/* --- 10) Karten-Liste: Glas-Kontur auf den nicht scrollenden Wrapper.
   Vorher lag die ::before-Kontur im Scroll-Container und wanderte mit dem
   Inhalt mit — deshalb war sie ganz entfernt und die Box wirkte flach.  --- */
.map__listwrap { position: relative; flex: 1 1 auto; min-height: 0; display: flex; border-radius: 16px; }
.map__list {
  flex: 1 1 auto; min-height: 0; margin: 0;
  border: none; border-radius: 14px;
  background: transparent; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
@media (max-width: 900px) { .map__listwrap { max-height: 320px; } .map__list { max-height: none; } }

/* --- 11) Zweiter Blauton fuer eine der beiden hellen Kacheln --- */
.angebote .bcard--line-alt { background: var(--blue-bright); }
.angebote .bcard--line-alt .bcard__minichip--line { border-color: rgba(0, 4, 72, .26); }

/* --- 12) Karten-Detailbox: eng zugeschnittene Logos, dadurch keine leeren
   Flaechen mehr ueber/unter dem Zeichen (die als graue Streifen gelesen
   wurden) und das Logo wird bei gleicher Boxhoehe deutlich groesser.   --- */
.map__cardlogo { padding: 12px 16px; }
.map__cardlogo img { height: auto; width: auto; max-height: 44px; max-width: 212px; object-fit: contain; }

/* --- 13) Footer: Berger-Badge zentriert, Ministeriums-Logos rechts --- */
.footer__grid {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 24px 32px;
}
.footer__brand { grid-column: 1; justify-self: start; }
.footer__badges { display: contents; }
.footer__grid .footer__badge:not(.footer__badge--mobile) { grid-column: 2; justify-self: center; }
.footer__grid .ministry { grid-column: 3; justify-self: end; }
@media (max-width: 1080px) {
  .footer__grid { grid-template-columns: 1fr; justify-items: center; gap: 22px; }
  .footer__brand, .footer__grid .ministry { grid-column: 1; justify-self: center; }
}

/* Abstand Icon <-> Schriftzug ebenfalls aus der Lockup-SVG:
   63.3 / 100.1 Ink-Hoehe = 0.632. (Ein spaeteres gap:0 auf .nav__brand hat
   den Abstand vorher auf die halbe Distanz reduziert.) */
.nav__brand { column-gap: 0; }
.nav__brand .glogo { margin-right: 21.9px; }
@media (max-width: 1370px) { .nav__brand .glogo { margin-right: 18.9px; } }
@media (max-width: 420px) { .nav__brand .glogo { margin-right: 16.6px; } }

/* Der Pfeil sitzt jetzt am unteren Rand, wo der Hero-Verlauf dunkel ist —
   also hell einfaerben statt navy, plus dezente Glasscheibe als Traeger. */
.hero__scroll { color: rgba(255, 255, 255, .82); border-radius: 999px; }
.hero__scroll:hover { color: #fff; background: rgba(255, 255, 255, .14); }

/* Formularfelder haben mit dem 4px-Ring + Border-Wechsel eine eigene, klar
   sichtbare Fokus-Anzeige — der globale outline-Ring wuerde als dritter
   Rahmen darueber liegen. Der Barrierefreiheits-Modus setzt ihn wieder. */
.pbox__cfield input:focus-visible, .pbox__ta:focus-visible { outline: none; }
body.a11y-focus .pbox__cfield input:focus-visible,
body.a11y-focus .pbox__ta:focus-visible { outline: 3px solid #FFE5AA !important; }

/* Tabs-Pill, Liste und Detailbox hatten drei unterschiedliche Glas-Rezepte
   (Tint .05/.01/.08, Blur 14/4/14). Jetzt alle drei identisch. */
.map__tabs, .map__listwrap, .map__card {
  background: rgba(157, 180, 255, .08);
  background-blend-mode: luminosity;
  -webkit-backdrop-filter: blur(14px) saturate(1.35) brightness(1.12);
  backdrop-filter: blur(14px) saturate(1.35) brightness(1.12);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .14);
}

/* Der X-Button hatte outline:none aus einem frueheren Block — damit war die
   gelbe Kontur weg, aber auch jede Fokus-Anzeige. Jetzt ein blauer Ring. */
.newsmodal__close:focus-visible {
  outline: 2px solid var(--blue-royal) !important;
  outline-offset: 3px !important;
}

/* Der Hero fuellt genau einen Bildschirm — dabei darf die Headline nie unter
   die Leiste rutschen. Leiste unten: 16px Abstand + 12+12 Padding + 40px
   Inhalt = 96px, deshalb 116px als Untergrenze (20px Luft). */
.hero__content { padding-top: max(116px, min(13vh, 156px)); }
@media (max-width: 560px) { .hero__content { padding-top: max(96px, min(12vh, 130px)); } }
/* Sehr flache Viewports (Handy quer, kleine Fenster): kompakter, damit der
   Hero weiterhin ohne Beschnitt auf einen Schirm passt. */
@media (max-height: 620px) {
  .hero__content { padding-top: 104px; }
}

/* ==========================================================================
   VEREINHEITLICHUNG 27.07. — ein Glas-Rezept, ein Aktiv-Zustand, ein Radius
   Vorher: 33 verschiedene backdrop-filter-Werte (blur 4/6/8/9/10/12/14/16/
   18/21/26/28/50px) und drei konkurrierende Aktiv-Stile.
   ========================================================================== */

:root {
  /* Glas — drei Groessen, ein Rezept */
  --glass-s: blur(12px) saturate(1.4);          /* Chips, Icon-Buttons, Tabs */
  --glass-m: blur(18px) saturate(1.5);          /* Boxen, Karten, Listen     */
  --glass-l: blur(28px) saturate(1.8);          /* Menue, Overlays           */
  --glass-tint: rgba(157, 180, 255, .10);       /* auf dunklem Grund         */
  --glass-tint-strong: rgba(157, 180, 255, .18);
  --glass-tint-light: rgba(240, 245, 255, .82); /* auf hellem Grund          */
  --glass-inset: inset 0 1px 1px rgba(255, 255, 255, .16);
  /* Radien */
  --r-pill: 999px;
  --r-box: 16px;
  --r-card: 24px;
  /* Aktiv-Zustand (Menuepunkt, Karten-Tab, Formular-Schritt, Slider) */
  --active-bg: var(--blue-bright);
  --active-fg: var(--navy-deep);
}

/* --- 1) Alle Glasflaechen auf die drei Groessen --- */
.liquid-glass, .bcard--glass, .lstep, .map__legend, .dlcard, .pbox,
.map__tabs, .map__listwrap, .map__card, .pstep, .lmatch__steps,
.finale2 .ctasec__pill, .newsmodal__sources a.btn, .newsmodal .btn {
  -webkit-backdrop-filter: var(--glass-m); backdrop-filter: var(--glass-m);
}
.chip, .mtab, .pcard__info, .map__cardinfo, .bcard__minichip,
.bcard__minichip--line, .newsmodal__close, .pnav {
  -webkit-backdrop-filter: var(--glass-s); backdrop-filter: var(--glass-s);
}
.nav, .a11y, .liquid-glass-strong {
  -webkit-backdrop-filter: var(--glass-l); backdrop-filter: var(--glass-l);
}
/* Tint + Innenkante ebenfalls aus einer Quelle */
.map__tabs, .map__listwrap, .map__card, .pstep, .lmatch__steps, .lstep,
.bcard--glass, .dlcard, .map__legend {
  background: var(--glass-tint);
  background-blend-mode: luminosity;
  box-shadow: var(--glass-inset);
}
.nav { background: var(--glass-tint-light); }
/* Die maskierte Verlaufskontur liegt auf allen Glasflaechen gleich */
.liquid-glass::before, .liquid-glass-strong::before, .nav::before,
.pstep::before, .map__tabs::before, .map__listwrap::before, .map__card::before {
  background: var(--glass-edge);
}
.nav::before { background: var(--glass-edge-strong); }

/* --- 2) Aktiv-Zustand: eine Regel fuer alle Schritt-/Tab-/Menue-Punkte --- */
.nav__pill a.is-active,
body[data-nav="dark"]:not(.menu-open) .nav__pill a.is-active,
.mtab[aria-selected="true"],
.pstep__i.is-on .pstep__n,
.newspage__btn[aria-current="true"] {
  background: var(--active-bg) !important;
  border-color: var(--active-bg) !important;
  color: var(--active-fg) !important;
}

/* --- 3) Menue: flaches Original-SVG, links; Punkte mittig; Buttons rechts --- */
.nav {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: clamp(12px, 2vw, 32px);
  padding: 12px;
}
.nav__brand { grid-column: 1; grid-row: 1; justify-self: start; padding: 0; }
.nav__logo { display: block; height: 34px; width: auto; }
.nav__pill:not(.nav__pill--cta) { grid-column: 2; grid-row: 1; justify-self: center; padding: 0; }
.nav__pill--cta { grid-column: 3; grid-row: 1; justify-self: end; padding: 0; display: flex; gap: 6px; }
.nav__burger { grid-column: 3; grid-row: 1; justify-self: end; }
/* Innen-Padding nach demselben Prinzip: 12px Rahmen, 10px je Punkt */
.nav__group { display: flex; align-items: center; gap: 2px; }
.nav__pill a { height: 40px; padding: 0 12px; display: inline-flex; align-items: center; font-size: 14.2px; }
.nav .nav__pill a.nav__cta { height: 40px; padding: 0 20px; font-size: 14.6px; }
/* Zweiter Button: gleiche Form, ruhigere Farbe */
.nav .nav__pill a.nav__cta--ghost,
body[data-nav="dark"]:not(.menu-open) .nav .nav__pill a.nav__cta--ghost {
  background: rgba(10, 17, 80, .07); color: var(--navy-deep);
}
.nav .nav__pill a.nav__cta--ghost:hover { background: rgba(10, 17, 80, .14); color: var(--navy-deep); }
.nav .nav__pill a.nav__cta--ghost::after { content: none; }   /* Puls nur am Haupt-CTA */
/* Skalierung, damit das Logo nie in die Punkte laeuft */
@media (max-width: 1500px) {
  .nav__logo { height: 31px; }
  .nav__pill a { padding: 0 9px; font-size: 13.4px; }
  .nav .nav__pill a.nav__cta { padding: 0 15px; font-size: 13.6px; }
}
@media (max-width: 1280px) {
  .nav__logo { height: 28px; }
  .nav__pill a { padding: 0 7px; font-size: 12.6px; }
  .nav .nav__pill a.nav__cta { padding: 0 12px; font-size: 12.8px; }
  .nav__pill a, .nav .nav__pill a.nav__cta { height: 36px; }
}
@media (max-width: 1100px) {
  .nav { grid-template-columns: auto 1fr; }
  .nav__logo { height: 30px; }
}
@media (max-width: 420px) { .nav__logo { height: 26px; } }

/* --- 4) Formular: Statusleiste ueber die volle Inhaltsbreite --- */
.pstep {
  width: 100%; max-width: none;
  margin: 0 0 clamp(18px, 2.4vh, 26px);
  padding: 8px 12px; border-radius: var(--r-pill);
  display: flex; align-items: center; justify-content: space-between; gap: 0;
}
.pstep__i { flex: 0 1 auto; gap: 10px; padding: 0 8px; }
.pstep__i + .pstep__i::before { flex: 1 1 auto; width: auto; min-width: 18px; margin: 0 6px; }
.pstep__n { width: 32px; height: 32px; border-radius: var(--r-pill); }

/* --- 5) Technologie-Slider: derselbe Indikator --- */
.tstage__steps {
  width: min(560px, 92%); margin: 18px auto 0;
  justify-content: space-between;
}
.tstage__steps .pstep__n {
  border: none; cursor: pointer; font: inherit; font-size: 12.5px;
  background: rgba(157, 180, 255, .16); color: rgba(255, 255, 255, .8);
  transition: background .25s var(--ease), color .25s var(--ease);
}
.tstage__steps .pstep__i.is-on .pstep__n { box-shadow: 0 0 0 4px rgba(157, 180, 255, .18); }
.tstage__steps .pstep__i:not(.is-on) .pstep__n:hover { background: rgba(157, 180, 255, .3); color: #fff; }

/* --- 6) Eingabefelder: kein Schlagschatten, klar abgerundet --- */
.pbox__cfield input, .pbox__ta {
  border-radius: 14px;
  box-shadow: none;
  background: rgba(157, 180, 255, .22);
  border: 1.5px solid rgba(157, 180, 255, .55);
}
.pbox__ta { border-radius: var(--r-box); }
.pbox__cfield input:focus, .pbox__ta:focus {
  background: rgba(157, 180, 255, .34);
  border-color: var(--blue-bright);
  box-shadow: 0 0 0 4px rgba(157, 180, 255, .22);
}

/* --- 7) Zuruecksetzen-Button hebt sich ab --- */
.a11y__reset {
  background: rgba(157, 180, 255, .2);
  border: 1.4px solid rgba(157, 180, 255, .5);
  color: #fff; font-weight: 500;
  border-radius: var(--r-pill); padding: 11px 18px;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.a11y__reset:hover { background: rgba(157, 180, 255, .34); border-color: var(--blue-bright); }

/* --- 8) Hoher Kontrast: bisher nur ein paar Textfarben, praktisch unsichtbar.
   Jetzt echte Wirkung — Glas wird deckend, Text auf Maximalkontrast.     --- */
body.a11y-contrast {
  --glass-tint: rgba(6, 10, 45, .96);
  --glass-tint-light: #fff;
  --dim-on-dark: #fff;
  --dim-on-paper: #000226;
  --ink: #000226;
}
body.a11y-contrast .liquid-glass, body.a11y-contrast .liquid-glass-strong,
body.a11y-contrast .nav, body.a11y-contrast .a11y, body.a11y-contrast .pbox,
body.a11y-contrast .map__tabs, body.a11y-contrast .map__listwrap,
body.a11y-contrast .map__card, body.a11y-contrast .pstep,
body.a11y-contrast .chip, body.a11y-contrast .mtab {
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
body.a11y-contrast [data-section="navy"], body.a11y-contrast .pbox { background: #060A2D; }
body.a11y-contrast .sec--paper, body.a11y-contrast .bcard--line { background: #fff; }
body.a11y-contrast .bcard--line, body.a11y-contrast .pcard, body.a11y-contrast .card {
  border: 1.6px solid #000226;
}
body.a11y-contrast p, body.a11y-contrast li, body.a11y-contrast .sec__lede,
body.a11y-contrast .card__excerpt, body.a11y-contrast .sub__prose p { color: #000226; }
body.a11y-contrast [data-section="navy"] p, body.a11y-contrast [data-section="navy"] li,
body.a11y-contrast .pbox p, body.a11y-contrast .pbox label, body.a11y-contrast .mrow,
body.a11y-contrast .pstep__i, body.a11y-contrast .tstage__desc { color: #fff; }
body.a11y-contrast .pbox__cfield input, body.a11y-contrast .pbox__ta {
  background: #0A1150; border-color: #fff; color: #fff;
}
body.a11y-contrast .pbox__cfield input::placeholder,
body.a11y-contrast .pbox__ta::placeholder { color: rgba(255, 255, 255, .8); }

/* --- 9) Letzte Sektion vor dem Footer: mehr Luft nach unten --- */
.finale2, .finale { padding-bottom: clamp(60px, 9vh, 130px); }

/* --- 10) Aufgeloest: das Glas-Logo im Menue wird nicht mehr gebraucht --- */
.nav .glogo, .nav__wordmark, .nav__mark { display: none; }

/* Mobil: nur Logo + Burger. Mein display:flex auf .nav__pill--cta hat das
   alte display:none der Media-Query ueberschrieben, wodurch CTA-Pille und
   Burger uebereinander in Spalte 3 lagen. */
@media (max-width: 1100px) {
  .nav { grid-template-columns: auto 1fr; }
  .nav__pill--cta, .nav__pill:not(.nav__pill--cta) { display: none; }
  .nav__burger { grid-column: 2; grid-row: 1; justify-self: end; display: block; }
  .nav__brand { grid-column: 1; grid-row: 1; justify-self: start; }
}

/* Aktiver Slider-Schritt: eigene Regel, damit die Grundfarbe der Ziffern
   (.tstage__steps .pstep__n) sie nicht ueberholt. */
.tstage__steps .pstep__i.is-on .pstep__n {
  background: var(--active-bg); color: var(--active-fg);
}
.tstage__steps .pstep__i.is-done .pstep__n { background: rgba(157, 180, 255, .32); color: #fff; }

/* --- Mobil/Safari: Partner-Kacheln wurden abgeschnitten ---------------------
   .pcard ist ein Grid-Item und hat damit min-width:auto — es kann nicht
   schmaler werden als sein Inhalt. Der Inhalt ist das Logo mit
   width: min(330px, 96%). Beim Berechnen der min-content-Breite loest
   WebKit den Prozentanteil nicht auf und rechnet mit den 330px. Auf einem
   375px-iPhone braucht die Kachel dann 330 + 52 Padding = 382px, also mehr
   als die Spalte hergibt — die Kachel laeuft raus und wird am Rand
   beschnitten. Chrome rechnet mit den 96% und zeigt das Problem nicht.
   Loesung: kein Prozentwert mehr in min(), und die Kacheln duerfen
   schrumpfen. Die gerenderten Groessen bleiben identisch.              --- */
.pwall, .pcard, .pcard__logo { min-width: 0; }
.pcard__logo img {
  width: 96%; max-width: 330px;
  height: auto; display: block; margin-inline: auto;
}

/* iOS Safari vergroessert Text in Bloecken, die es fuer schmale Spalten haelt
   ("text autosizing"). Das verbreitert Elemente unvorhersehbar und ist eine
   haeufige Ursache dafuer, dass eine Seite nur auf dem iPhone anders bricht. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* Feste Masse an den Wall-Logos: Seitenverhaeltnis steht vor dem Laden fest */
.pcard__logo img { aspect-ratio: 720 / 450; object-fit: contain; }

/* ==========================================================================
   Feedback-Runde 27.07. (3)
   ========================================================================== */

/* --- 1) Eingabefelder im selben Glaslook wie die uebrigen Flaechen --- */
.pbox__cfield input, .pbox__ta {
  background: var(--glass-tint-strong);
  background-blend-mode: luminosity;
  -webkit-backdrop-filter: var(--glass-m); backdrop-filter: var(--glass-m);
  border: 1px solid rgba(157, 180, 255, .42);
  box-shadow: var(--glass-inset);
  border-radius: 14px;
}
.pbox__ta { border-radius: var(--r-box); }
.pbox__cfield input:focus, .pbox__ta:focus {
  background: rgba(157, 180, 255, .3);
  border-color: var(--blue-bright);
  box-shadow: var(--glass-inset), 0 0 0 4px rgba(157, 180, 255, .22);
}

/* --- 2) Statusleiste: ein Hintergrund wie im Menue, rundum gleiches
   Padding, und die Verbindungslinie laeuft durch statt in Stuecken.    --- */
.pstep { padding: 8px; gap: 0; }
/* Kein eigenes Padding an den Punkten: der erste Punkt hat damit links
   exakt denselben Abstand zum Rand wie oben und unten (8px). */
.pstep__i { position: relative; z-index: 1; gap: 9px; padding: 0; background: none; }
/* Nur der aktive Punkt ist gefuellt — genau wie im Menue */
.pstep__n {
  background: none; border: none; box-shadow: none;
  color: rgba(255, 255, 255, .62); width: 30px; height: 30px;
}
.pstep__i.is-done .pstep__n { background: none; color: rgba(255, 255, 255, .8); }
.pstep__i.is-on .pstep__n { background: var(--active-bg); color: var(--active-fg); }
/* Durchgezogene Linie hinter allen Schritten statt Teilstuecken */
.pstep__i + .pstep__i::before { content: none; }
.pstep { position: relative; }
.pstep::after {
  content: ''; position: absolute; left: 23px; right: 23px; top: 50%;
  height: 1px; background: rgba(157, 180, 255, .26); z-index: 0;
}
.pstep__l { position: relative; z-index: 1; }
@media (max-width: 620px) { .pstep::after { left: 21px; right: 21px; } }

/* --- 3) Puls am CTA: gleichmaessiger Abstand rundum.
   Ein skalierter Ring waechst bei einer breiten Pille seitlich staerker als
   oben/unten. Ein aufgehender box-shadow-Ring haelt ueberall denselben
   Abstand.                                                              --- */
.nav .nav__pill a.nav__cta::after {
  inset: 0; border: none; animation: none;
  box-shadow: 0 0 0 0 rgba(70, 109, 255, .5);
  animation: ctaring 2.4s var(--ease) infinite;
}
@keyframes ctaring {
  0%   { box-shadow: 0 0 0 0 rgba(70, 109, 255, .55); }
  70%  { box-shadow: 0 0 0 9px rgba(70, 109, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(70, 109, 255, 0); }
}
@media (prefers-reduced-motion: reduce) { .nav .nav__pill a.nav__cta::after { animation: none; } }

/* --- 4) Menueleiste laeuft mobil so breit wie die Sektionsinhalte --- */
.nav { left: var(--gutter); right: var(--gutter); }
@media (max-width: 560px) { .nav { left: var(--gutter); right: var(--gutter); top: 12px; padding: 10px; } }

/* --- 5) "So funktioniert's": keine blauen Flaechen hinter 1-3 --- */
.lstep {
  background: none; border: none; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.lstep + .lstep { border-top: 1px solid rgba(0, 4, 72, .08); }

/* --- 6) Chips auf der kraeftigen Kachel: gleiche Lesbarkeit wie darunter --- */
.angebote .bcard--line-alt .bcard__minichip,
.angebote .bcard--line-alt .bcard__minichip--line {
  background: rgba(255, 255, 255, .62);
  border-color: rgba(0, 4, 72, .16) !important;
  color: var(--navy-deep);
}

/* --- 7) Kompakter Zaehler: Slider und News-Pagination gleich --- */
.tcount, .newspage {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px; border-radius: var(--r-pill);
  background: var(--glass-tint);
  background-blend-mode: luminosity;
  -webkit-backdrop-filter: var(--glass-s); backdrop-filter: var(--glass-s);
  box-shadow: var(--glass-inset);
}
.tcount { margin: 18px auto 0; }
.tcount__btn, .newspage__btn {
  width: 34px; height: 34px; border-radius: var(--r-pill);
  display: grid; place-items: center;
  border: none; background: none; cursor: pointer;
  font-family: var(--ui); font-size: 17px; line-height: 1;
  color: rgba(255, 255, 255, .78);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.tcount__btn:hover, .newspage__btn:hover:not(:disabled) {
  background: rgba(157, 180, 255, .24); color: #fff;
}
.tcount__val, .newspage__val {
  display: inline-flex; align-items: baseline; gap: 3px;
  padding: 0 8px; font-family: 'Azeret Mono', monospace; font-size: 13px;
  color: rgba(255, 255, 255, .7); letter-spacing: .04em;
}
.tcount__val b, .newspage__val b { font-weight: 400; color: var(--blue-bright); }
.newspage__btn:disabled { opacity: .3; cursor: default; }

/* Menueleiste mit Box-Rundung statt voller Pille — wie .pbox und .cform (24px).
   Die Elemente darin (Menuepunkte, Buttons, Burger) bleiben Pillen. */
.nav, .nav::before { border-radius: var(--r-card); }
@media (max-width: 560px) { .nav, .nav::before { border-radius: 20px; } }

/* Statusleiste vereinfacht: der aktive Punkt ist nur noch die gefuellte
   Pille — der zusaetzliche Ring (box-shadow) war der zweite Hintergrund.
   Die durchgezogene Linie faellt weg, die Leiste traegt die Verbindung. */
.pstep__i.is-on .pstep__n { box-shadow: none; }
.pstep::after { content: none; }

/* Menue: Buttons mit Box-Rundung statt voller Pille. 24px Leiste minus 12px
   Innenabstand = 12px, damit die Rundungen konzentrisch sind. */
:root { --r-btn: 12px; }
.nav__pill a,
.nav .nav__pill a.nav__cta,
.nav .nav__pill a.nav__cta--ghost,
.nav__burger,
.nav .nav__pill a.nav__cta::after { border-radius: var(--r-btn); }
.nav__pill, .nav__pill--cta { border-radius: var(--r-btn); }

/* "So funktioniert's": reiner Text, keine Flaechen und keine Trennlinien.
   Die Linie folgte der 999px-Rundung und sah dadurch wie ein Button-Umriss aus. */
.lstep { border-radius: 0; border: none; }
.lstep + .lstep { border-top: none; }

/* --- Anhang-Chip: gleiche Kontur und gleicher Glaslook wie die Eingabefelder --- */
.pfile {
  background: var(--glass-tint-strong);
  background-blend-mode: luminosity;
  -webkit-backdrop-filter: var(--glass-m); backdrop-filter: var(--glass-m);
  border: 1px solid rgba(157, 180, 255, .42);
  box-shadow: var(--glass-inset);
  border-radius: 14px;
  padding: 7px 8px 7px 11px;
}
/* X war per line-height ausgerichtet und sass dadurch nicht mittig */
.pfile__x {
  display: grid; place-items: center;
  width: 24px; height: 24px; line-height: 0; font-size: 17px;
  background: var(--gold);
  color: var(--navy-deep);
  transition: filter .2s var(--ease);
}
.pfile__x:hover { background: var(--gold); color: var(--navy-deep); filter: brightness(.92); }

/* --- Statusleiste: "Pruefen" braucht rechts optisch denselben Abstand wie
   oben und unten. Bei einer Pille frisst die Rundung den Rand auf, deshalb
   mehr horizontales Padding als vertikales. --- */
.pstep { padding: 8px 20px; }

/* --- X im Pop-up: nur eine Kontur.
   Der Dialog hat beim Oeffnen den Button fokussiert, dadurch lag der
   Fokusring zusaetzlich um die Border. Der Fokus liegt jetzt auf dem Dialog;
   fuer echte Tastaturbedienung ersetzt der Ring die Border, statt sie zu
   verdoppeln.                                                            --- */
.newsmodal:focus, .newsmodal:focus-visible { outline: none; }
.newsmodal__close:focus-visible {
  outline: 2px solid var(--blue-royal) !important;
  outline-offset: 0 !important;
  border-color: transparent !important;
}

/* --- "Zur Website" wie die uebrigen Buttons --- */
.newsmodal__sources a.btn, .newsmodal .btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 22px; border-radius: var(--r-btn);
  font-family: var(--ui); font-weight: 500; font-size: 15px;
  background: var(--blue); color: #fff; border: none; text-decoration: none;
  box-shadow: none;
  transition: background .22s var(--ease), transform .22s var(--ease);
}
.newsmodal__sources a.btn:hover, .newsmodal .btn:hover {
  background: var(--blue-royal); color: #fff; transform: translateY(-2px);
}

/* --- Trennlinie im Formular raus --- */
.pbox__row { border-top: none !important; }

/* --- Info-Knopf auf gleicher Hoehe wie das "Konsortialpartner"-Label --- */
.pcard__info { width: 30px; height: 30px; top: 26px; right: 26px; }
.pcard--tier1 .pcard__info { top: 26px; right: 26px; }
.pcard__badge, .pcard__tier { min-height: 30px; display: inline-flex; align-items: center; }

/* --- Berger-Badge mobil deutlich kleiner --- */
@media (max-width: 760px) { .footer__badge img { width: 96px; } }

/* --- Menue mobil: Logo links mit demselben Abstand wie oben/unten --- */
@media (max-width: 1100px) { .nav__brand { padding-left: 0; margin-left: 0; } }

/* --- Statusleiste mobil: der mittlere Schritt sitzt mittig --- */
@media (max-width: 620px) {
  .pstep { justify-content: space-between; padding: 8px 14px; }
  .pstep__i { flex: 1 1 0; justify-content: center; }
  .pstep__i:first-child { justify-content: flex-start; }
  .pstep__i:last-child { justify-content: flex-end; }
}

/* --- Zaehler: kein umschliessender Balken mehr, jede Zahl und jeder Pfeil
   sitzt auf einer exakt runden Flaeche.                                 --- */
.tcount, .newspage {
  background: none; box-shadow: none; padding: 0; gap: 8px;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.tcount__btn, .newspage__btn,
.pcount__now, .pcount__all {
  width: 38px; height: 38px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;                    /* exakt rund, nicht 999px auf breiter Box */
  font-family: 'Azeret Mono', monospace; font-size: 13px; font-weight: 400;
  line-height: 1; padding: 0; border: none;
}
.tcount__btn, .newspage__btn {
  cursor: pointer; font-family: var(--ui); font-size: 18px;
  background: var(--glass-tint);
  background-blend-mode: luminosity;
  -webkit-backdrop-filter: var(--glass-s); backdrop-filter: var(--glass-s);
  box-shadow: var(--glass-inset);
  color: rgba(255, 255, 255, .8);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.tcount__btn:hover, .newspage__btn:hover:not(:disabled) { background: rgba(157, 180, 255, .3); color: #fff; }
.pcount__now { background: var(--active-bg); color: var(--active-fg); }
.pcount__all {
  background: var(--glass-tint);
  background-blend-mode: luminosity;
  -webkit-backdrop-filter: var(--glass-s); backdrop-filter: var(--glass-s);
  box-shadow: var(--glass-inset);
  color: rgba(255, 255, 255, .7);
}
.pcount__sep { color: rgba(255, 255, 255, .35); font-family: 'Azeret Mono', monospace; font-size: 13px; }

/* Menue mobil: der Burger bestimmt die Zeilenhoehe, dadurch stand das
   mittig ausgerichtete Logo weiter von oben/unten entfernt als vom linken
   Rand. Horizontales Padding entsprechend angehoben. */
@media (max-width: 1100px) { .nav { padding: 10px 20px; } }

/* min-width: 42px aus der alten Pagination hat die Pfeile breiter als hoch
   gemacht — sie waren damit nicht exakt rund. */
.tcount__btn, .newspage__btn, .pcount__now, .pcount__all {
  min-width: 38px; max-width: 38px; padding: 0; box-sizing: border-box;
}

/* ==========================================================================
   Feedback-Runde 27.07. (4)
   ========================================================================== */

/* --- 1) Kartenbox-Logos: feste Hoehe statt max-height.
   Ein SVG ohne intrinsische Masse bekommt mit max-height keine definierte
   Groesse und kollabiert auf 0 — dann bleibt nur die weisse Box stehen.
   Mit fester Hoehe rendert es unabhaengig davon, welche Fassung der Datei
   im Cache liegt.                                                       --- */
.map__cardlogo img {
  height: 44px; width: auto;
  max-width: 212px; max-height: none;
  object-fit: contain; object-position: left center;
}

/* --- 2) Kontakt-Button in Gold --- */
.nav .nav__pill a.nav__cta--ghost,
body[data-nav="dark"]:not(.menu-open) .nav .nav__pill a.nav__cta--ghost {
  background: var(--gold); color: var(--navy-deep);
}
.nav .nav__pill a.nav__cta--ghost:hover { background: #FFD98A; color: var(--navy-deep); }

/* --- 3) Footer: Marke und die drei Foerderlogos in einer Reihe,
   Berger-Badge zentriert in der letzten Zeile.                          --- */
.footer__grid { grid-template-columns: auto 1fr; gap: 24px 40px; }
.footer__brand { grid-column: 1; justify-self: start; }
.footer__badges { display: contents; }
.footer__grid .ministry { grid-column: 2; justify-self: end; }
.footer__meta { grid-template-columns: 1fr auto 1fr; }
.footer__meta .footer__badge--mobile {
  grid-column: 1 / -1; justify-self: center; display: inline-block;
  margin-top: 18px;
}
.footer__meta .footer__badge--mobile img { width: 128px; }
@media (max-width: 1080px) {
  .footer__grid { grid-template-columns: 1fr; justify-items: center; }
  .footer__brand, .footer__grid .ministry { grid-column: 1; justify-self: center; }
}
@media (max-width: 760px) { .footer__meta .footer__badge--mobile img { width: 96px; } }

/* --- 4) Menue-Logo: links derselbe Abstand wie oben und unten.
   Die Zeilenhoehe kommt vom hoechsten Element (CTA bzw. Burger), das
   mittig gesetzte Logo steht dadurch weiter von oben/unten weg als vom
   Rand. Horizontales Padding entsprechend.                              --- */
.nav { padding: 12px 22px; }
@media (max-width: 1500px) { .nav { padding: 12px 20px; } }
@media (max-width: 1280px) { .nav { padding: 10px 18px; } }

/* --- 5) Statusleiste: gleichmaessige Abstaende.
   01 links wie oben/unten, 02 exakt mittig, 03 spiegelbildlich.         --- */
.pstep { display: grid; grid-template-columns: 1fr auto 1fr; padding: 10px; }
.pstep__i { display: inline-flex; align-items: center; gap: 9px; }
.pstep__i:nth-child(1) { grid-column: 1; justify-self: start; }
.pstep__i:nth-child(2) { grid-column: 2; justify-self: center; }
.pstep__i:nth-child(3) { grid-column: 3; justify-self: end; }
@media (max-width: 620px) { .pstep { padding: 10px; } }

/* --- 6) Hero: mehr Luft zwischen Headline und Leiste --- */
.hero__content { padding-top: max(150px, min(16vh, 190px)); }
@media (max-width: 560px) { .hero__content { padding-top: max(126px, min(15vh, 160px)); } }
@media (max-height: 620px) { .hero__content { padding-top: 118px; } }

/* --- 7) Slider-Zaehler: Glaspille als Traeger, kein Schraegstrich --- */
.tcount, .newspage {
  padding: 6px; gap: 6px;
  background: var(--glass-tint);
  background-blend-mode: luminosity;
  -webkit-backdrop-filter: var(--glass-s); backdrop-filter: var(--glass-s);
  box-shadow: var(--glass-inset);
  border-radius: var(--r-pill);
  position: relative;
}
.tcount::before, .newspage::before {
  content: ''; position: absolute; inset: 0;
  border-radius: inherit; padding: 1.4px;
  background: var(--glass-edge);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.pcount__sep { display: none; }

/* --- 8) Kontaktformular in der Optik des Matching-Formulars --- */
.cform {
  background: rgba(5, 8, 46, .92);
  -webkit-backdrop-filter: var(--glass-m); backdrop-filter: var(--glass-m);
  border: 1px solid rgba(157, 180, 255, .28);
  border-radius: var(--r-card);
  padding: clamp(22px, 3vw, 34px);
  box-shadow: 0 12px 44px rgba(0, 3, 48, .38), 0 2px 10px rgba(0, 3, 48, .28);
}
.cform__field span { color: rgba(255, 255, 255, .82); font-size: 13px; }
.cform__field input, .cform__field textarea {
  background: var(--glass-tint-strong);
  background-blend-mode: luminosity;
  -webkit-backdrop-filter: var(--glass-m); backdrop-filter: var(--glass-m);
  border: 1px solid rgba(157, 180, 255, .42);
  box-shadow: var(--glass-inset);
  border-radius: 14px;
  color: #fff; font-size: 15px; padding: 12px 14px;
}
.cform__field textarea { border-radius: var(--r-box); min-height: 150px; }
.cform__field input::placeholder, .cform__field textarea::placeholder { color: rgba(244, 243, 238, .6); }
.cform__field input:focus, .cform__field textarea:focus {
  background: rgba(157, 180, 255, .3);
  border-color: var(--blue-bright);
  box-shadow: var(--glass-inset), 0 0 0 4px rgba(157, 180, 255, .22);
}
.cform__field input:focus-visible, .cform__field textarea:focus-visible { outline: none; }
body.a11y-focus .cform__field input:focus-visible,
body.a11y-focus .cform__field textarea:focus-visible { outline: 3px solid #FFE5AA !important; }
.cform__note { color: rgba(244, 243, 238, .62); }
.cform__note a { color: var(--blue-bright); }
.cform__done { color: #fff; }
.cform__err { color: #FF9C9C; }
/* Absenden wie "Weiter"/"Senden" im Matching-Formular */
.cform__send {
  height: 44px; padding: 0 24px; border-radius: var(--r-btn);
  background: var(--blue-bright); color: var(--navy-deep); border: none;
  font-family: var(--ui); font-weight: 500; font-size: 15px;
}
.cform__send:hover { background: #B6C7FF; color: var(--navy-deep); }
/* Infobox daneben in derselben Sprache — dunkel, sonst waere der helle
   Text darauf unlesbar. */
.cinfo {
  background: rgba(5, 8, 46, .86);
  background-blend-mode: luminosity;
  -webkit-backdrop-filter: var(--glass-m); backdrop-filter: var(--glass-m);
  border: 1px solid rgba(157, 180, 255, .22);
  box-shadow: var(--glass-inset);
  border-radius: var(--r-card);
}
.cinfo h2, .cinfo h3 { color: #fff; }
.cinfo p { color: rgba(244, 243, 238, .8); }
.cinfo a { color: var(--blue-bright); }
.cinfo hr { border-top-color: rgba(157, 180, 255, .2); }

/* ==========================================================================
   Feedback-Runde 27.07. (5)
   ========================================================================== */

/* --- 1) Scroll-Hinweis zurueck in den Fluss, zwischen Subline und Mockup --- */
.hero__scroll {
  position: static; transform: none;
  display: inline-flex; flex-direction: column; align-items: center; gap: 6px;
  width: auto; height: auto; margin: clamp(16px, 2.6vh, 30px) auto 0;
  font-family: var(--ui); font-weight: 500; font-size: 12px;
  letter-spacing: .16em; text-transform: uppercase;
  color: rgba(10, 17, 80, .55); background: none;
}
.hero__scroll:hover { color: var(--navy-deep); background: none; }
.hero__scroll svg { width: 20px; height: 20px; }

/* --- 2) Ein Glasrezept fuer alles, auch fuer die Glas-Wortmarke.
   Die Marke lief bisher auf eigenen Werten (blur 4/12/14/22px, eigene
   Saettigung und Helligkeit) und passte dadurch nicht zu den Flaechen.  --- */
.gw {
  background: var(--glass-tint);
  background-blend-mode: luminosity;
  -webkit-backdrop-filter: var(--glass-m); backdrop-filter: var(--glass-m);
}
.tstage__glassmark .gw,
.nav__brand .gw,
body[data-nav="dark"]:not(.menu-open) .nav .gw {
  background: rgba(255, 255, 255, .16);
  background-blend-mode: luminosity;
  -webkit-backdrop-filter: var(--glass-m); backdrop-filter: var(--glass-m);
}
/* Die Kontur der Marke folgt derselben maskierten Verlaufslogik */
.tstage__edge g { stroke: rgba(255, 255, 255, .72); }

/* --- 3) Kontakt-Button: eigener Blauton mit Kontur statt Gold --- */
.nav .nav__pill a.nav__cta--ghost,
body[data-nav="dark"]:not(.menu-open) .nav .nav__pill a.nav__cta--ghost {
  background: rgba(70, 109, 255, .1);
  border: 1.4px solid rgba(70, 109, 255, .45);
  color: var(--blue-royal);
}
.nav .nav__pill a.nav__cta--ghost:hover {
  background: rgba(70, 109, 255, .2);
  border-color: var(--blue); color: var(--blue-royal);
}

/* ==========================================================================
   Feedback-Runde 27.07. (6)
   ========================================================================== */

/* --- 1) Hero-Headline mobil groesser --- */
@media (max-width: 560px) {
  .hero__title { font-size: clamp(38px, min(11vw, 8.4vh), 62px); }
  .hero__strap { font-size: clamp(15px, 4vw, 18px); }
}

/* --- 2) "Scroll" lesbarer --- */
.hero__scroll { color: rgba(10, 17, 80, .8); font-size: 12.5px; font-weight: 600; }
.hero__scroll:hover { color: var(--navy-deep); }

/* --- 3) Menue: gleiche Abstaende rundum.
   Das geht nur, wenn alle Elemente dieselbe Hoehe haben — sonst zentriert
   sich das kleinere Element und steht oben/unten weiter weg als am Rand.
   Logo, Buttons und Burger sind deshalb gleich hoch; der Burger behaelt
   ueber eine unsichtbare Flaeche seine 44px Tippflaeche.                --- */
.nav { padding: 14px; }
.nav__logo { height: 40px; }
.nav__pill a, .nav .nav__pill a.nav__cta { height: 40px; }
.nav__burger { width: 40px; height: 40px; position: relative; }
.nav__burger::after { content: ''; position: absolute; inset: -4px; }
@media (max-width: 1500px) { .nav { padding: 13px; } .nav__logo { height: 38px; }
  .nav__pill a, .nav .nav__pill a.nav__cta { height: 38px; } }
@media (max-width: 1280px) { .nav { padding: 12px; } .nav__logo { height: 36px; }
  .nav__pill a, .nav .nav__pill a.nav__cta { height: 36px; } .nav__burger { width: 36px; height: 36px; } }
@media (max-width: 1100px) { .nav { padding: 12px; } .nav__logo { height: 34px; }
  .nav__burger { width: 34px; height: 34px; } .nav__burger::after { inset: -6px; } }
@media (max-width: 420px) { .nav { padding: 10px; } .nav__logo { height: 30px; }
  .nav__burger { width: 30px; height: 30px; } .nav__burger::after { inset: -8px; } }

/* --- 4) Formular: erstes Element oben genauso weit weg wie seitlich.
   Die Statusleiste stand 10px tiefer als sie seitlich Abstand hat.      --- */
.pbox .pstep { margin-top: 0; }
.pbox > form, .pform { padding-top: 0; margin-top: 0; }

/* --- 5) Drei Schritte: gleichmaessige Luecken, rechts mehr Luft --- */
.pstep {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 26px 10px 12px;
}
.pstep__i { flex: 0 0 auto; }

/* --- 6) News-Pagination zentriert --- */
.newspage { display: flex; justify-content: center; width: fit-content; margin-inline: auto; }

/* --- 7) Foerderlogos im Footer mit mehr Luft --- */
.ministry img { padding: 14px 20px; }
@media (max-width: 760px) { .ministry img { padding: 12px 16px; } }

/* --- 8) Info-Knopf mit denselben Innenabstaenden wie das Partner-Label --- */
.pcard__info, .pcard--tier1 .pcard__info { top: 34px; right: 26px; }
@media (max-width: 560px) { .pcard__info, .pcard--tier1 .pcard__info { top: 26px; right: 20px; } }

/* Das hidden-Attribut muss immer gewinnen. In dieser Datei haben schon
   fuenfmal explizite display-Regeln (.pbox__send, .pnav, .pform,
   dialog.newsmodal, .pbox__previews) versteckte Elemente sichtbar gelassen
   oder Platz belegen lassen. Diese eine Regel schliesst die Klasse ab. */
[hidden] { display: none !important; }

/* ==========================================================================
   Feedback-Runde 27.07. (7) — Menue wie die Alternative, adaptives Glas
   ========================================================================== */

/* --- 1) Leiste: nur Hintergrund-Blur, keine Kontur --- */
.nav::before { content: none !important; }
.nav { border: none; box-shadow: 0 12px 34px rgba(0, 3, 48, .12); }

/* --- 2) Marke: immer Glas, Tonwert dreht mit dem Hintergrund (positiv/negativ),
   damit sie auf hellen wie dunklen Sektionen lesbar bleibt. Kontur duenn. --- */
.nav .glogo--nav { display: block; width: 62px; margin-right: 23.4px; flex: none; }
.nav__brand { display: inline-flex; align-items: center; gap: 0; }
.glogo--nav .glogo__edge g { stroke-width: 1.6; }
/* Wortmarke als Maske, damit sie die Farbe mitdreht */
.nav__wordmark2 {
  display: block; width: 147px; height: 37.1px; flex: none;
  -webkit-mask: url(/assets/img/wordmark-text.svg) no-repeat center / contain;
  mask: url(/assets/img/wordmark-text.svg) no-repeat center / contain;
  background: var(--navy-deep);
}
/* heller Untergrund -> dunkles Glas */
body[data-nav="dark"]:not(.menu-open) .nav { background: rgba(240, 245, 255, .72); }
body[data-nav="dark"]:not(.menu-open) .glogo--nav .gw {
  background: rgba(10, 17, 80, .34); background-blend-mode: luminosity;
  -webkit-backdrop-filter: var(--glass-m); backdrop-filter: var(--glass-m);
}
body[data-nav="dark"]:not(.menu-open) .glogo--nav .glogo__edge g { stroke: rgba(10, 17, 80, .8); }
body[data-nav="dark"]:not(.menu-open) .nav__wordmark2 { background: var(--navy-deep); }
/* dunkler Untergrund -> helles Glas */
body[data-nav="light"]:not(.menu-open) .nav { background: rgba(38, 54, 122, .5); box-shadow: 0 12px 34px rgba(0, 3, 48, .3); }
body[data-nav="light"]:not(.menu-open) .glogo--nav .gw {
  background: rgba(255, 255, 255, .26); background-blend-mode: luminosity;
  -webkit-backdrop-filter: var(--glass-m); backdrop-filter: var(--glass-m);
}
body[data-nav="light"]:not(.menu-open) .glogo--nav .glogo__edge g { stroke: rgba(255, 255, 255, .72); }
body[data-nav="light"]:not(.menu-open) .nav__wordmark2 { background: var(--paper); }
body[data-nav="light"]:not(.menu-open) .nav__pill a { color: rgba(255, 255, 255, .9); }
body[data-nav="light"]:not(.menu-open) .nav__pill a:hover { background: rgba(255, 255, 255, .12); color: #fff; }
body[data-nav="light"]:not(.menu-open) .nav__burger { color: var(--paper); }
body[data-nav="light"]:not(.menu-open) .nav .nav__pill a.nav__cta--ghost {
  background: rgba(157, 180, 255, .16); border-color: rgba(157, 180, 255, .5); color: #fff;
}
@media (max-width: 1280px) { .nav .glogo--nav { width: 56px; margin-right: 21.2px; }
  .nav__wordmark2 { width: 133px; height: 33.5px; } }
@media (max-width: 1100px) { .nav .glogo--nav { width: 54px; margin-right: 20.4px; }
  .nav__wordmark2 { width: 128px; height: 32.3px; } }
@media (max-width: 420px)  { .nav .glogo--nav { width: 46px; margin-right: 17.4px; }
  .nav__wordmark2 { width: 109px; height: 27.5px; } }

/* --- 3) Marke bei den Schluesseltechnologien: gleiches Glas wie die Pills,
   Kontur mobil duenner.                                                  --- */
.tstage__glassmark .gw {
  background: rgba(255, 255, 255, .16);
  background-blend-mode: luminosity;
  -webkit-backdrop-filter: var(--glass-m); backdrop-filter: var(--glass-m);
}
.tstage__edge g { stroke: rgba(255, 255, 255, .7); stroke-width: 3.2; }
@media (max-width: 900px) { .tstage__edge g { stroke-width: 2.2; } }
@media (max-width: 560px) { .tstage__edge g { stroke-width: 1.6; } }

/* --- 4) Eingabefelder ohne Innenschein — ueberall gleich --- */
.pbox__cfield input, .pbox__ta, .cform__field input, .cform__field textarea {
  box-shadow: none;
}
.pbox__cfield input:focus, .pbox__ta:focus,
.cform__field input:focus, .cform__field textarea:focus {
  box-shadow: 0 0 0 4px rgba(157, 180, 255, .22);
}

/* --- 5) Kontaktseite: Infobox in einem anderen Blau, Button deutlicher --- */
.cinfo { background: rgba(41, 77, 235, .18); border-color: rgba(157, 180, 255, .34); }
.cinfo .btn, .cinfo a.btn {
  display: inline-flex; align-items: center; height: 44px; padding: 0 22px;
  border-radius: var(--r-btn); background: var(--blue-bright); color: var(--navy-deep);
  border: none; font-weight: 500; text-decoration: none;
}
.cinfo .btn:hover { background: #fff; color: var(--navy-deep); }

/* --- 6) Footer mobil: Copyright in einer Zeile ueber dem Badge, Badge groesser --- */
@media (max-width: 760px) {
  .footer__meta > span { grid-column: 1 / -1; justify-self: center; white-space: nowrap; font-size: 11.5px; }
  .footer__meta .footer__badge--mobile img { width: 168px; }
}

/* --- 7) Seite laesst sich mobil nicht mehr seitlich ziehen --- */
html, body { overscroll-behavior-x: none; }
body { touch-action: pan-y pinch-zoom; }
#map-stage, .tstage__belt { touch-action: none; }

/* ==========================================================================
   Feedback-Runde 27.07. (8)
   ========================================================================== */

/* --- 1) Menueleiste auf allen Seiten hell mit dunkler Schrift.
   Die adaptive Umschaltung auf dunkles Glas entfaellt wieder; die Marke
   bleibt Glas, aber immer im dunklen Tonwert.                           --- */
.nav,
body[data-nav="dark"]:not(.menu-open) .nav,
body[data-nav="light"]:not(.menu-open) .nav {
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 12px 34px rgba(0, 3, 48, .14);
}
.glogo--nav .gw,
body[data-nav="dark"]:not(.menu-open) .glogo--nav .gw,
body[data-nav="light"]:not(.menu-open) .glogo--nav .gw {
  background: rgba(10, 17, 80, .34); background-blend-mode: luminosity;
  -webkit-backdrop-filter: var(--glass-m); backdrop-filter: var(--glass-m);
}
.glogo--nav .glogo__edge g,
body[data-nav="light"]:not(.menu-open) .glogo--nav .glogo__edge g { stroke: rgba(10, 17, 80, .8); }
.nav__wordmark2,
body[data-nav="light"]:not(.menu-open) .nav__wordmark2 { background: var(--navy-deep); }
.nav__pill a,
body[data-nav="light"]:not(.menu-open) .nav__pill a { color: var(--ink); }
.nav__pill a:hover,
body[data-nav="light"]:not(.menu-open) .nav__pill a:hover { background: rgba(0, 4, 72, .07); color: var(--ink); }
.nav__burger,
body[data-nav="light"]:not(.menu-open) .nav__burger { color: var(--ink); }
body[data-nav="light"]:not(.menu-open) .nav .nav__pill a.nav__cta--ghost {
  background: rgba(70, 109, 255, .1); border-color: rgba(70, 109, 255, .45); color: var(--blue-royal);
}

/* --- 2) Info-Knopf: Zeichen fuellt den Kreis besser aus --- */
.pcard__info { width: 28px; height: 28px; }
.pcard__info svg { width: 19px; height: 19px; }

/* --- 3) Kontaktseite: Formular ohne umschliessende Box.
   Die Felder behalten dasselbe Prinzip wie auf der Startseite
   (Beschriftung im Feld, gleicher Radius, gleiche Kontur), sind aber auf
   die helle Flaeche umgestellt — dunkle Glasfelder waeren dort unlesbar. --- */
.cform {
  background: none; border: none; box-shadow: none; padding: 0;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.cform__field input, .cform__field textarea {
  background: rgba(70, 109, 255, .07);
  border: 1px solid rgba(0, 4, 72, .16);
  color: var(--ink);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: none;
}
.cform__field input::placeholder, .cform__field textarea::placeholder { color: rgba(19, 19, 71, .58); }
.cform__field input:focus, .cform__field textarea:focus {
  background: rgba(70, 109, 255, .12);
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(70, 109, 255, .16);
}
.cform__note { color: rgba(19, 19, 71, .66); }
.cform__note a { color: var(--blue-royal); }
.cform__done { color: var(--navy-deep); }
.cform__err { color: #C22; }
.cform__send { background: var(--blue); color: #fff; }
.cform__send:hover { background: var(--blue-royal); color: #fff; }

/* --- 4) Kontaktbox: keine Kontur, dunkle Schrift wie in den hellen
   Kacheln der Startseite.                                              --- */
.cinfo {
  background: rgba(70, 109, 255, .08);
  border: none; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.cinfo h2, .cinfo h3 { color: var(--navy-deep); }
.cinfo p { color: rgba(19, 19, 71, .8); }
.cinfo a { color: var(--blue-royal); }
.cinfo hr { border-top-color: rgba(0, 4, 72, .12); }
.cinfo .btn, .cinfo a.btn { background: var(--blue); color: #fff; }
.cinfo .btn:hover { background: var(--blue-royal); color: #fff; }

/* ==========================================================================
   Feedback-Runde 27.07. (9)
   ========================================================================== */

/* --- Info-Knopf exakt so weit von der Kachelkante wie das Partner-Label
   (das sitzt bei 14px). Vorher standen 34px/26px im Weg.               --- */
.pcard__info,
.pcard--tier1 .pcard__info { top: 14px; right: 14px; }
@media (max-width: 560px) { .pcard__info, .pcard--tier1 .pcard__info { top: 12px; right: 12px; } }

/* --- Nur die Marke schaltet mit dem Hintergrund um; die Leiste bleibt
   auf allen Seiten hell. Damit die helle Variante auf der hellen Leiste
   lesbar bleibt, bekommt sie dort einen dunklen Traeger — sonst waere
   Weiss auf Weiss unsichtbar.                                           --- */
/* heller Abschnitt: dunkles Glas, kein Traeger */
body[data-nav="dark"]:not(.menu-open) body[data-nav="dark"]:not(.menu-open) .glogo--nav .gw {
  background: rgba(10, 17, 80, .34); background-blend-mode: luminosity;
}
body[data-nav="dark"]:not(.menu-open) .glogo--nav .glogo__edge g { stroke: rgba(10, 17, 80, .8); }
body[data-nav="dark"]:not(.menu-open) .nav__wordmark2 { background: var(--navy-deep); }
/* dunkler Abschnitt: helles Glas auf dunklem Traeger */
body[data-nav="light"]:not(.menu-open) body[data-nav="light"]:not(.menu-open) .glogo--nav .gw {
  background: rgba(255, 255, 255, .28); background-blend-mode: luminosity;
}
body[data-nav="light"]:not(.menu-open) .glogo--nav .glogo__edge g { stroke: rgba(255, 255, 255, .78); }
body[data-nav="light"]:not(.menu-open) .nav__wordmark2 { background: var(--paper); }

/* "Scroll" als Button, damit es sich klar vom Verlauf abhebt */
.hero__scroll {
  flex-direction: row; gap: 8px;
  padding: 9px 18px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .55);
  background-blend-mode: luminosity;
  -webkit-backdrop-filter: var(--glass-s); backdrop-filter: var(--glass-s);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .8), 0 6px 20px rgba(0, 3, 48, .1);
  border: 1px solid rgba(10, 17, 80, .12);
  color: var(--navy-deep);
}
.hero__scroll:hover { background: rgba(255, 255, 255, .8); color: var(--navy-deep); }
.hero__scroll svg { width: 17px; height: 17px; }


/* Marke ohne Traegerflaeche: sie wechselt nur den Farbton mit dem Abschnitt
   darunter. Weiss scheidet aus, weil die Leiste durchgehend hell ist —
   auf dunklen Abschnitten geht die Marke deshalb auf Brandblau statt Navy,
   das bleibt auf Weiss lesbar und ist als Wechsel klar sichtbar. */
body[data-nav="dark"]:not(.menu-open) .glogo--nav .gw {
  background: rgba(10, 17, 80, .34); background-blend-mode: luminosity;
}
body[data-nav="dark"]:not(.menu-open) .glogo--nav .glogo__edge g { stroke: rgba(10, 17, 80, .8); }
body[data-nav="dark"]:not(.menu-open) .nav__wordmark2 { background: var(--navy-deep); }
body[data-nav="light"]:not(.menu-open) .glogo--nav .gw {
  background: rgba(41, 77, 235, .3); background-blend-mode: luminosity;
}
body[data-nav="light"]:not(.menu-open) .glogo--nav .glogo__edge g { stroke: rgba(41, 77, 235, .85); }
body[data-nav="light"]:not(.menu-open) .nav__wordmark2 { background: var(--blue-royal); }

/* ==========================================================================
   Menue transparenter — dadurch dunkelt die Leiste ueber dunklen Abschnitten
   mit und die Marke kann echt ins Helle wechseln (positiv/negativ).
   ========================================================================== */
.nav,
body[data-nav="dark"]:not(.menu-open) .nav,
body[data-nav="light"]:not(.menu-open) .nav {
  background: rgba(255, 255, 255, .46);
  -webkit-backdrop-filter: blur(30px) saturate(1.9); backdrop-filter: blur(30px) saturate(1.9);
  box-shadow: 0 12px 34px rgba(0, 3, 48, .16), inset 0 1px 1px rgba(255, 255, 255, .5);
}
/* heller Abschnitt: dunkle Schrift, Marke in Navy */
body[data-nav="dark"]:not(.menu-open) .nav__pill a { color: var(--ink); }
body[data-nav="dark"]:not(.menu-open) .nav__burger { color: var(--ink); }
body[data-nav="dark"]:not(.menu-open) .glogo--nav .gw {
  background: rgba(10, 17, 80, .34); background-blend-mode: luminosity;
}
body[data-nav="dark"]:not(.menu-open) .glogo--nav .glogo__edge g { stroke: rgba(10, 17, 80, .8); }
body[data-nav="dark"]:not(.menu-open) .nav__wordmark2 { background: var(--navy-deep); }
/* dunkler Abschnitt: helle Schrift, Marke in Weiss */
body[data-nav="light"]:not(.menu-open) .nav__pill a { color: rgba(255, 255, 255, .92); }
body[data-nav="light"]:not(.menu-open) .nav__pill a:hover { background: rgba(255, 255, 255, .16); color: #fff; }
body[data-nav="light"]:not(.menu-open) .nav__burger { color: var(--paper); }
body[data-nav="light"]:not(.menu-open) .glogo--nav .gw {
  background: rgba(255, 255, 255, .3); background-blend-mode: luminosity;
}
body[data-nav="light"]:not(.menu-open) .glogo--nav .glogo__edge g { stroke: rgba(255, 255, 255, .8); }
body[data-nav="light"]:not(.menu-open) .nav__wordmark2 { background: var(--paper); }
body[data-nav="light"]:not(.menu-open) .nav .nav__pill a.nav__cta--ghost {
  background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .45); color: #fff;
}

/* ==========================================================================
   Hero-Variante "Marke" (?hero=marke) — Aufbau 1:1 wie die
   Schluesseltechnologien: gleiche Groessenformel, gleicher Verlauf im
   Quadrat, gleiche Glasflaechen und Konturstaerke. Die Marke sitzt
   buendig an der unteren Bildschirmkante.
   ========================================================================== */
/* Scroll-Pfeil bleibt wie in der Mockup-Fassung */
/* Headline sitzt direkt ueber der Marke statt dicht unter der Leiste */
body.hero--marke .hero__content {
  margin-top: auto; padding-top: 0;
  padding-bottom: clamp(14px, 2.4vh, 34px);
}
.heromark {
  position: relative; z-index: 2;
  width: min(62vw, 92svh, calc((100svh - 470px) * 1.6569));
  aspect-ratio: 338 / 204;
  /* buendig zur unteren Kante, horizontal mittig */
  margin: 0 auto;
}
/* Quadrat mit demselben Verlauf wie bei den Schluesseltechnologien */
.heromark__square {
  position: absolute; left: 20.29%; top: .98%; width: 59.17%; height: 98.04%;
  z-index: 1; background: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(6px, 1.1vh, 14px);
}
.heromark__glass { position: absolute; inset: 0; z-index: 2; pointer-events: none; --gwblur: 22px; }
.heromark__glass .gw {
  background: linear-gradient(115deg, rgba(255, 255, 255, .11) 0%, rgba(255, 255, 255, .03) 45%, rgba(255, 255, 255, .08) 100%);
  background-blend-mode: luminosity;
  -webkit-backdrop-filter: blur(var(--gwblur)) saturate(1.35) brightness(1.05);
  backdrop-filter: blur(var(--gwblur)) saturate(1.35) brightness(1.05);
}
.heromark__glass .gws.gw--1 { clip-path: url(#gw-1); }
.heromark__glass .gws.gw--2 { clip-path: url(#gw-2); }
.heromark__glass .gws.gw--3 { clip-path: url(#gw-3); }
.heromark__glass .gws.gw--4 { clip-path: url(#gw-4); }
.heromark__edge {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 3; pointer-events: none; overflow: visible;
}
/* Die vier Schlagwoerter im Quadrat */
.heromark__word {
  position: relative; z-index: 2; padding: 0 6%;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(20px, 2.6vw, 44px); line-height: 1.05; letter-spacing: -.01em;
  color: var(--paper); text-align: center; white-space: nowrap;
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.heromark__sub {
  position: relative; z-index: 2; padding: 0 8%;
  font-family: var(--ui); font-weight: 400;
  font-size: clamp(11px, 1.05vw, 15px); line-height: 1.35;
  color: rgba(244, 243, 238, .78); text-align: center; max-width: 100%;
}
@media (max-width: 560px) { .heromark__sub { font-size: 10.5px; } }
@media (max-width: 900px) {
  .heromark { width: min(84vw, calc((100svh - 400px) * 1.6569)); }
}
@media (max-width: 560px) {
  .heromark { width: min(92vw, calc((100svh - 330px) * 1.6569)); }
  .heromark__word { font-size: clamp(15px, 5vw, 24px); }
}

/* ==========================================================================
   Feedback-Runde 27.07. (10)
   ========================================================================== */

/* --- 1) Burger repariert: die Striche waren fuer eine 46px-Box fixiert
   (top 18/26px) — in den kleineren Boxen sassen sie voellig schief.
   Jetzt relativ zur Boxmitte, und die Box mobil wieder groesser.        --- */
.nav__burger span { left: 24%; right: 24%; }
.nav__burger span:nth-child(1) { top: calc(50% - 4.8px); }
.nav__burger span:nth-child(2) { top: calc(50% + 3.2px); }
.nav__burger[aria-expanded="true"] span:nth-child(1) { top: calc(50% - 0.8px); transform: rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { top: calc(50% - 0.8px); transform: rotate(-45deg); }
@media (max-width: 1100px) { .nav__burger { width: 42px; height: 42px; } .nav__burger::after { inset: -2px; } }
@media (max-width: 420px)  { .nav__burger { width: 40px; height: 40px; } .nav__burger::after { inset: -3px; } }

/* --- 2) Leiste noch transparenter --- */
.nav,
body[data-nav="dark"]:not(.menu-open) .nav,
body[data-nav="light"]:not(.menu-open) .nav {
  background: rgba(255, 255, 255, .3);
  -webkit-backdrop-filter: blur(32px) saturate(1.9); backdrop-filter: blur(32px) saturate(1.9);
}

/* --- 3) Ton haengt an der gemessenen Farbe (body[data-navtone]),
   nicht mehr an den Sektions-Attributen. Alles folgt: Marke, Punkte,
   Burger-Striche und die Kontur der Burger-Box.                         --- */
body[data-nav="light"]:not(.menu-open) .nav__pill a,
body[data-nav="dark"]:not(.menu-open) .nav__pill a,
body[data-navtone="light"]:not(.menu-open) .nav__pill a { color: var(--ink); }
body[data-navtone="light"]:not(.menu-open) .nav__pill a:hover { background: rgba(0, 4, 72, .07); color: var(--ink); }
body[data-navtone="dark"]:not(.menu-open) .nav__pill a { color: rgba(255, 255, 255, .92) !important; }
body[data-navtone="dark"]:not(.menu-open) .nav__pill a:hover { background: rgba(255, 255, 255, .16) !important; color: #fff !important; }

body[data-nav="light"]:not(.menu-open) .glogo--nav .gw,
body[data-nav="dark"]:not(.menu-open) .glogo--nav .gw,
body[data-navtone="light"]:not(.menu-open) .glogo--nav .gw {
  background: rgba(10, 17, 80, .34); background-blend-mode: luminosity;
}
body[data-nav="light"]:not(.menu-open) .glogo--nav .glogo__edge g,
body[data-nav="dark"]:not(.menu-open) .glogo--nav .glogo__edge g,
body[data-navtone="light"]:not(.menu-open) .glogo--nav .glogo__edge g { stroke: rgba(10, 17, 80, .8); }
body[data-nav="light"]:not(.menu-open) .nav__wordmark2,
body[data-nav="dark"]:not(.menu-open) .nav__wordmark2,
body[data-navtone="light"]:not(.menu-open) .nav__wordmark2 { background: var(--navy-deep); }
body[data-navtone="dark"]:not(.menu-open) .glogo--nav .gw {
  background: rgba(255, 255, 255, .3) !important; background-blend-mode: luminosity;
}
body[data-navtone="dark"]:not(.menu-open) .glogo--nav .glogo__edge g { stroke: rgba(255, 255, 255, .8) !important; }
body[data-navtone="dark"]:not(.menu-open) .nav__wordmark2 { background: var(--paper) !important; }

body[data-nav="light"]:not(.menu-open) .nav__burger,
body[data-nav="dark"]:not(.menu-open) .nav__burger,
body[data-navtone="light"]:not(.menu-open) .nav__burger { color: var(--ink); }
body[data-navtone="dark"]:not(.menu-open) .nav__burger { color: var(--paper) !important; }
/* Kontur der Burger-Box dreht mit */
body[data-navtone="light"]:not(.menu-open) .nav__burger::before {
  background: linear-gradient(180deg, rgba(10, 17, 80, .4) 0%, rgba(10, 17, 80, .12) 40%,
    rgba(10, 17, 80, .12) 60%, rgba(10, 17, 80, .4) 100%);
}
body[data-navtone="dark"]:not(.menu-open) .nav__burger::before { background: var(--glass-edge); }

body[data-nav="light"]:not(.menu-open) .nav .nav__pill a.nav__cta--ghost,
body[data-navtone="light"]:not(.menu-open) .nav .nav__pill a.nav__cta--ghost {
  background: rgba(70, 109, 255, .1); border-color: rgba(70, 109, 255, .45); color: var(--blue-royal);
}
body[data-navtone="dark"]:not(.menu-open) .nav .nav__pill a.nav__cta--ghost {
  background: rgba(255, 255, 255, .14) !important; border-color: rgba(255, 255, 255, .45) !important; color: #fff !important;
}
/* Offenes Vollbildmenue (navy): alles hell */
body.menu-open .nav__burger { color: var(--paper); }
body.menu-open .glogo--nav .gw { background: rgba(255, 255, 255, .3); }
body.menu-open .glogo--nav .glogo__edge g { stroke: rgba(255, 255, 255, .8); }
body.menu-open .nav__wordmark2 { background: var(--paper); }

/* --- 4) Scroll-Hinweis: unten am Bildschirmrand, ohne Button --- */
.hero__scroll {
  position: absolute; left: 50%; bottom: clamp(10px, 1.8vh, 22px);
  transform: translateX(-50%);
  flex-direction: column; gap: 4px; margin: 0;
  padding: 0; border: none; border-radius: 0;
  background: none; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  color: rgba(255, 255, 255, .85);
  font-size: 11.5px; letter-spacing: .18em;
}
.hero__scroll:hover { background: none; color: #fff; }

/* --- 5) Marke zentriert, Headline + Subline im Quadrat --- */
/* Inhalt ist in der Marke-Variante leer (Titel wandert ins Quadrat) */

/* --- 6) Berger-Badge mobil wieder etwas kleiner --- */
@media (max-width: 760px) { .footer__meta .footer__badge--mobile img { width: 128px; } }

/* Scroll-Hinweis liegt jetzt direkt in der Sektion, z-index ueber dem Canvas */
.hero > .hero__scroll { z-index: 4; }

/* Footer mobil: Reihenfolge Menuelinks -> Copyright -> Berger-Badge.
   Im Markup steht das Copyright zuerst; im einspaltigen Raster sortiert
   order die drei Zeilen um, ohne die Lesereihenfolge fuer Screenreader
   zu verdrehen. */
@media (max-width: 900px) {
  .footer__meta .footer__links { order: 1; }
  .footer__meta > span { order: 2; margin-top: 4px; }
  .footer__meta .footer__badge--mobile { order: 3; margin-top: 10px; }
}

/* Die Subline des letzten Schlagworts fuehrt zur Standortkarte */
.heromark__sub.is-link {
  cursor: pointer; text-decoration: underline;
  text-underline-offset: 4px; text-decoration-thickness: 1px;
  text-decoration-color: rgba(244, 243, 238, .45);
  color: rgba(244, 243, 238, .92);
}
.heromark__sub.is-link:hover { text-decoration-color: rgba(244, 243, 238, .9); }

/* ==========================================================================
   Feedback-Runde 27.07. (11)
   ========================================================================== */

/* --- Nav-Logo: dieselbe Verlaufskontur wie die Marke bei den
   Schluesseltechnologien. Auf hellem Grund die dunkle Variante des
   Verlaufs, auf dunklem die helle — die flache Volltonlinie entfaellt. --- */
/* Flache Kontur mit derselben Deckkraft wie die grossen Marken (.7/.8),
   nur in der Staerke an die kleine Groesse angepasst. */
body[data-navtone="light"]:not(.menu-open) .glogo--nav .glogo__edge g,
body[data-nav="dark"]:not(.menu-open) .glogo--nav .glogo__edge g {
  stroke: rgba(10, 17, 80, .7) !important; stroke-width: 1.6;
}
body[data-navtone="dark"]:not(.menu-open) .glogo--nav .glogo__edge g,
body.menu-open .glogo--nav .glogo__edge g {
  stroke: rgba(255, 255, 255, .7) !important; stroke-width: 1.6;
}

/* Bildmarke in der Leiste deckend zeichnen (07.08.).
   Sie war als ~30%-Flaeche angelegt und holte ihren Kontrast aus
   `backdrop-filter: var(--glass-m)`. In Chromium (Arc, Chrome, Edge) ist der
   Filter hier wirkungslos — nachgemessen: mit transparenter Fuellung bleibt
   trotz aktivem Filter NICHTS sichtbar, die Leiste bildet einen Backdrop-Root.
   Uebrig blieben blasse Kaesten statt der Marke; Safari zeigte sie korrekt.
   Deshalb solide Farbe wie in Favicon und Lockup (dort sind dieselben Pfade
   flaechig in --paper bzw. --navy-deep gefuellt) — engine-unabhaengig.
   Gilt NUR fuer .glogo--nav; die grossen Glasmarken (Finale, Hero, Themen)
   behalten ihren Glascharakter, dort traegt der Filter sichtbar. */
.glogo--nav .gw,
body[data-nav="light"]:not(.menu-open) .glogo--nav .gw,
body[data-nav="dark"]:not(.menu-open) .glogo--nav .gw,
body[data-navtone="light"]:not(.menu-open) .glogo--nav .gw,
body[data-navtone="dark"]:not(.menu-open) .glogo--nav .gw,
body.menu-open .glogo--nav .gw {
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  background-blend-mode: normal !important;
}
body[data-nav="light"]:not(.menu-open) .glogo--nav .gw,
body[data-nav="dark"]:not(.menu-open) .glogo--nav .gw,
body[data-navtone="light"]:not(.menu-open) .glogo--nav .gw { background: var(--navy-deep) !important; }
body[data-navtone="dark"]:not(.menu-open) .glogo--nav .gw,
body.menu-open .glogo--nav .gw { background: var(--paper) !important; }

/* --- Mehr Luft zwischen Headline und Marke --- */
body.hero--marke .hero__content { padding-bottom: clamp(30px, 5vh, 74px); }
.heromark { width: min(62vw, 92svh, calc((100svh - 530px) * 1.6569)); }

/* --- Mobil: Headline wieder weit oben, Scroll klein dazwischen --- */
@media (max-width: 760px) {
  body.hero--marke .hero__content {
    margin-top: 0; padding-top: max(104px, min(13vh, 140px));
    padding-bottom: clamp(14px, 2.2vh, 26px);
  }
  .heromark { width: min(92vw, calc((100svh - 330px) * 1.6569)); margin-top: 0; }
  /* Mobil nur der Pfeil, und zwar unter der Marke: Marke rueckt nach oben,
     der Pfeil sitzt buendig an der unteren Kante. */
  .hero > .hero__scroll span { display: none; }
  body.hero--marke .hero > .hero__scroll {
    position: static; transform: none;
    order: 3; margin: 0 auto clamp(10px, 1.8vh, 20px); gap: 0;
  }
  body.hero--marke .hero > .hero__scroll svg { width: 22px; height: 22px; }
  body.hero--marke .heromark { order: 2; margin-top: auto; margin-bottom: clamp(8px, 1.4vh, 16px); }
}

/* --- Hero-Marke: exakt dieselbe Kontur wie die Marke bei den
   Schluesseltechnologien. Vorher lief sie auf den SVG-Attributen
   (Verlauf, 5.5) statt auf den CSS-Werten (flach .7, 3.2/2.2/1.6).  --- */
.heromark__edge g { stroke: rgba(255, 255, 255, .7); stroke-width: 3.2; }
@media (max-width: 900px) { .heromark__edge g { stroke-width: 2.2; } }
@media (max-width: 560px) { .heromark__edge g { stroke-width: 1.6; } }

/* --- Partikel nach oben ausblenden, damit Headline und Subline gut
   lesbar bleiben. --- */
.hero__canvas {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.16) 22%, rgba(0,0,0,.55) 38%, #000 56%);
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.16) 22%, rgba(0,0,0,.55) 38%, #000 56%);
}
@media (max-width: 760px) {
  .hero__canvas {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.12) 26%, rgba(0,0,0,.5) 44%, #000 62%);
    mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.12) 26%, rgba(0,0,0,.5) 44%, #000 62%);
  }
  /* Headline etwas weiter nach unten */
  body.hero--marke .hero__content { padding-top: max(128px, min(16vh, 168px)); }
  .hero__content { padding-top: max(128px, min(16vh, 168px)); }
}

/* ==========================================================================
   Feedback-Runde 27.07. (12)
   ========================================================================== */

/* --- Kontakt ist jetzt ein Textlink in der Liste; die rechte Pille traegt
   nur noch den einen CTA. --- */
.nav__pill--cta { gap: 0; }

/* --- Kontaktseite: Infobox im dunklen Blau --- */
.cinfo {
  background: var(--navy-deep);
  border: none; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.cinfo h2, .cinfo h3 { color: #fff; }
.cinfo p { color: rgba(244, 243, 238, .82); }
.cinfo a { color: var(--blue-bright); }
.cinfo hr { border-top-color: rgba(157, 180, 255, .22); }
.cinfo .btn, .cinfo a.btn { background: var(--blue-bright); color: var(--navy-deep); }
.cinfo .btn:hover { background: #fff; color: var(--navy-deep); }

/* --- Mobil: beide grossen Marken mit kraeftigerer Kontur --- */
@media (max-width: 900px) {
  .tstage__edge g, .heromark__edge g { stroke-width: 3; }
}
@media (max-width: 560px) {
  .tstage__edge g, .heromark__edge g { stroke-width: 2.4; }
}

/* --- Mobil: Textanimation weiter unten im Quadrat --- */
@media (max-width: 760px) {
  /* Prozent-Padding rechnet gegen die Breite und war dadurch viel zu gross */
  .heromark__square { justify-content: flex-end; padding-bottom: clamp(10px, 2.6vh, 26px); }
}

/* Mobil sass der Text der Split-Kachel 32px vom Rand, in den uebrigen
   Kacheln 22px: die Kachel hat 12px Padding, das innere .bcard__side
   legte auf schmalen Schirmen 20px drauf. Jetzt ergeben beide zusammen
   dieselben 22px wie nebenan. */
@media (max-width: 900px) {
  .bcard--split .bcard__side { padding: 10px 10px 12px; }
}

/* Beide grossen Marken mit kraeftigerer Kontur — Hero und
   Schluesseltechnologien bleiben dabei auf identischen Werten. */
.tstage__edge g, .heromark__edge g { stroke: rgba(255, 255, 255, .82); stroke-width: 4.4; }
@media (max-width: 900px) { .tstage__edge g, .heromark__edge g { stroke-width: 3.8; } }
@media (max-width: 560px) { .tstage__edge g, .heromark__edge g { stroke-width: 3.2; } }

/* --- News-Pagination: jede Seitenzahl ist ein Sprungziel ---
   Vorher trug nur der Pfeil einen Klick, die Zahlen waren Text (.pcount__now /
   .pcount__all). Jetzt rendert jede Seite ihren eigenen .newspage__btn — die
   runde Form, das Glas und die Einfaerbung der aktuellen Seite ueber
   [aria-current] gelten dadurch unveraendert weiter.
   Die Auslassung sitzt zwischen den Zahlen, sobald das Fenster nicht alle
   Seiten zeigt. Gleiche Breite wie ein Knopf, damit die Leiste beim
   Seitenwechsel nicht springt, aber ohne Flaeche und ohne Zeiger. */
.newspage__gap {
  width: 38px; min-width: 38px; max-width: 38px; height: 38px; flex: none;
  display: grid; place-items: center;
  font-family: 'Azeret Mono', monospace; font-size: 13px; line-height: 1;
  color: rgba(255, 255, 255, .35);
  user-select: none;
}

/* --- Hero-Marke: Headline lief zwischen 901 und 1080 px Breite unter die Leiste ---
   Ursache war ein Zusammenspiel zweier Regeln: .hero__content bekommt unter
   1080px eine min-height von 62svh (stammt aus der Mockup-Fassung, wo der
   Textblock OBEN sitzt und die Hoehe echten Platz reserviert). Unter 900px hebt
   eine spaetere Regel sie wieder auf — dazwischen blieb sie stehen.
   In der Marken-Fassung ist der Block aber per margin-top:auto UNTEN verankert.
   Dort wirkt eine grosse min-height nicht als reservierter Platz, sondern
   schiebt den Text nach oben aus dem Bild: bei 1024x768 sass die Oberkante der
   Headline auf 54px, die Leiste endet bei 82px.
   Deshalb hier ausdruecklich abschalten — in dieser Fassung hat sie keinen Zweck. */
body.hero--marke .hero__content { min-height: 0; }

/* Die Headline hing per margin-top:auto unten an der Marke. Damit wanderte sie
   mit jeder Bildschirmhoehe an eine andere Stelle des Farbverlaufs: bei 1024x600
   landete sie im dunkelblauen Bereich und erreichte gegen den Hintergrund nur
   noch 1,4:1 — WCAG 2.2 verlangt 3:1 fuer grosse Schrift. Jetzt haengt sie an
   einem festen Anteil der Hoehe, dadurch sitzt sie auf jeder Groesse an
   derselben Stelle im Verlauf und bleibt lesbar. Die Marke uebernimmt das
   margin-top:auto und bleibt unten buendig, der Abstand dazwischen atmet.
   20vh ist gemessen: darueber faellt der Kontrast bei kurzen Fenstern unter 3:1. */
@media (min-width: 761px) {
  body.hero--marke .hero__content {
    margin-top: 0;
    /* 14vh: gemessenes Optimum. Der Wert bestimmt beides zugleich — wie hoch die
       Headline im Verlauf sitzt (hoeher = heller = lesbarer) und wieviel Platz
       darunter fuer die Marke bleibt. Bei 20vh kam die Marke nur auf 87% der
       Tech-Marke und der Kontrast auf 8,4:1; bei 14vh sind es 98-101% und
       10,6:1. Untergrenze 116px, damit auf flachen Fenstern nicht nur 14px
       Abstand zur Leiste bleiben. */
    padding-top: clamp(116px, 14vh, 260px);
  }
  body.hero--marke .heromark { margin-top: auto; }
}

/* --- Hero-Marke: so gross wie die Marke bei den Schluesseltechnologien ---
   Bisher zog die Breite einen festen Betrag von der Viewport-Hoehe ab:
   min(62vw, 92svh, (100svh - 530px) * 1.6569). Der dritte Term war eine
   Schaetzung fuer den Platz, den Headline, Subline und Scroll-Pfeil brauchen —
   und er griff viel zu frueh. Gemessen war die Hero-Marke auf einem MacBook Air
   13" nur 74% der Tech-Marke, bei 1280x800 noch 61%, bei 1366x768 nur 56%.

   Jetzt nimmt sie als Flex-Element den tatsaechlich uebrigen Platz der Spalte
   (flex: 1 1 0) und ist nach oben auf denselben Wert gedeckelt wie
   .tstage__logo: min(62vw, 92svh). Damit ist sie auf grossen Schirmen exakt so
   gross wie unten und schrumpft auf flachen nur so weit, wie es der Platz
   wirklich verlangt — statt nach einer festen Formel.

   max-height muss mitlaufen: sonst bliebe bei greifendem max-width die per Flex
   gesetzte Hoehe stehen, das Seitenverhaeltnis kippt und die prozentual
   positionierten Innenteile (Quadrat, Glas, Kontur) sitzen falsch.
   1.6569 = 338/204, das Seitenverhaeltnis der Marke. */
@media (min-width: 761px) {
  body.hero--marke .heromark {
    flex: 1 1 0;
    min-height: 0;
    width: auto;
    max-width: min(62vw, 92svh);
    max-height: calc(min(62vw, 92svh) / 1.6569);
    aspect-ratio: 338 / 204;
    margin-inline: auto;
  }
}

/* --- Partnerliste neben der Karte: Scrollbar dauerhaft sichtbar ---
   macOS blendet Overlay-Scrollbars aus, solange nicht gescrollt wird
   ("Automatisch" ist die Voreinstellung unter Systemeinstellungen >
   Darstellung) — auf dem Mac der Kundin war deshalb nicht erkennbar, dass die
   Liste ueberhaupt scrollt.

   Entscheidend ist scrollbar-color: eine gesetzte Farbe schaltet auf eine
   gezeichnete, dauerhaft sichtbare Leiste um, die auch Platz belegt. Die Spur
   stand bisher auf transparent, damit blieb es beim Overlay-Verhalten.
   Die ::-webkit-Regeln darunter sind der Rueckfall fuer Safari vor 18.2, das
   scrollbar-color noch nicht kennt. Sie greifen nur dort: neuere Engines
   bevorzugen die Standard-Eigenschaften und ignorieren die Pseudo-Elemente,
   sobald scrollbar-width gesetzt ist. */
/* Die native Leiste bleibt ausgeblendet — der eigene Balken uebernimmt.
   scrollbar-width: none verhindert, dass auf Windows und Linux beide
   nebeneinander stehen. */
.map__list { scrollbar-width: none; padding-right: 16px; }
.map__list::-webkit-scrollbar { width: 0; height: 0; }

.mscroll {
  position: absolute; top: 10px; bottom: 10px; right: 7px; width: 4px;
  border-radius: 999px; background: rgba(157, 180, 255, .12);
  z-index: 3; cursor: pointer;   /* ziehbar, siehe map.js */
}
/* Schlanker Balken: der Griff war ueber inset-inline: -4px auf 14px verbreitert
   und wirkte dadurch klobig. Jetzt liegt er buendig im 4px-Gleis, die
   Greiffläche kommt unsichtbar ueber ::after dazu — dezent im Bild, aber
   weiterhin gut zu fassen, auch mit dem Finger. */
.mscroll__thumb {
  position: absolute; inset-inline: 0; top: 0;
  cursor: grab;
  border-radius: 999px; background: rgba(157, 180, 255, .5);
  will-change: transform;
}
.mscroll__thumb::after { content: ''; position: absolute; inset: -8px -11px; }
@media (prefers-reduced-motion: no-preference) {
  .mscroll__thumb { transition: height .15s linear; }
}

/* --- Partner-Logos groesser in den Kacheln ---
   Vorher deckelte max-width: 330px die Logos auf rund 77% der Kachelbreite.
   Jetzt fuellt das Logo die Innenflaeche aus; der Deckel greift erst auf sehr
   breiten Kacheln. Zusaetzlich das Kachel-Padding von 34/26 auf 22/16
   reduziert — es stammt aus der Zeit, als unter dem Logo noch der Partnername
   stand. Der ist raus, der Platz war ungenutzt. */
.pcard { padding: 22px 16px; }
/* Die -tight-Dateien haben je eigenes Seitenverhaeltnis. Das feste 720/450 von
   weiter oben wuerde sie in eine fremde Box zwingen und wieder verkleinern —
   deshalb hier aufheben und stattdessen die Flaeche fuellen lassen. Der
   Innenabstand haelt gleichmaessig Luft zum Kachelrand, sonst stossen breite
   Wortmarken direkt an die Kante. */
/* Feste Proportion der Logoflaeche statt "fuellt die Kachel": die -tight-Dateien
   haben je eigenes Seitenverhaeltnis. Wuerde jedes die volle Flaeche fuellen,
   raeche ein kompaktes Quadrat (Stadt Mannheim) die ganze Kachel ein, waehrend
   eine breite Wortmarke flach bliebe — optisch voellig ungleich. In einer Box
   von 3.2:1 wird ein Quadrat ueber die Hoehe begrenzt und eine Wortmarke ueber
   die Breite; alle Logos bekommen dadurch ein aehnliches optisches Gewicht. */
/* Feste Hoehe statt fester Container-Proportion: die -tight-Dateien haben je
   eigenes Seitenverhaeltnis, und ein kompaktes Quadrat (Verband Region
   Rhein-Neckar) hat ueber die Container-Proportion die ganze Kachel eingenommen,
   waehrend Wortmarken flach blieben. Mit fester Hoehe und object-fit: contain
   bekommt jedes Logo dasselbe optische Band: Quadrate werden ueber die Hoehe
   begrenzt, breite Wortmarken ueber die Breite. */
/* Einheitliches optisches Band — DIE eine Stelle fuer die Logogroesse auf der
   Wall. Vergroessert am 05.08.: Die Originaldateien liegen auf 720x450, also
   im Verhaeltnis 1,6:1 — breiter als das Band hoch ist. Deshalb begrenzt die
   HOEHE jedes Logo, nicht die Breite, und die Hoehe ist hier der einzige
   Hebel. Von 86px auf 126px gehoben; weil object-fit: contain proportional
   skaliert und alle Dateien dieselbe Flaeche haben, wachsen damit alle
   gleichmaessig — ohne Sonderregel je Logo. */
.pcard__logo { width: 100%; padding: 0 3%; }
/* Das Band uebernimmt das Seitenverhaeltnis der Dateien (720x450). Damit ist die
   Logogroesse allein an die Kachelbreite gekoppelt: ein Hebel, der auf jeder
   Bildschirmgroesse gleich wirkt — kein clamp, keine Sonderregel je Logo, kein
   Leerraum in der Kachel. Feste Bandhoehen hatten mobil eine hohe weisse Kachel
   mit winzigem Logo erzeugt, weil vw dort klein ist, die Kachel aber ihre
   Mindesthoehe behielt.
   Kundenwunsch 11.08.: Kacheln rund 25% flacher. Weil das Band ueber
   aspect-ratio die Hoehe TREIBT, ist seine Breite der einzige wirksame Hebel —
   die min-height-Werte unten sind an keinem Breakpoint bindend. 100% -> 71%
   nimmt der Kachel bei 1440px etwa 271px -> 203px Hoehe. Unvermeidliche Folge
   und bewusst akzeptiert: die Logos werden im selben Mass kleiner. */
.pcard__logo img {
  width: 71%; height: auto; max-width: none; margin-inline: auto;
  aspect-ratio: 720 / 450; object-fit: contain; object-position: center;
}
/* Die Kachel ergibt sich aus ihrem Inhalt statt aus einer festen Mindesthoehe. */
.pcard { min-height: 0; }


/* --- Partner-Kacheln: "Hub-Partner"-Label raus, Kacheln kompakter ---
   Corinna 30.7.: "Bei den Kacheln der drei Konsortialpartner steht Hub-Partner
   drueber -> rausnehmen" und "Kacheln kleiner darstellen, sehr viel weisser
   Platz drumrum". Das Pseudo-Element traegt den Text, deshalb hier abschalten
   statt im Markup. Die farbige Kontur der drei bleibt als leiser Hinweis. */
.pcard--tier1::before { content: none; }
/* Die beiden wirksamen min-height-Werte der Kaskade (die frueheren 190/210/230
   weiter oben sind laengst ueberschrieben). Sie sind an keinem Breakpoint
   bindend — die Hoehe kommt vom Logo-Band — und ziehen 11.08. nur als Guertel
   um dieselben 25% mit, damit sie eine kuenftige Verkleinerung nicht doch noch
   von unten blockieren. Der wirksame Hebel steht oben bei .pcard__logo img. */
.pcard { min-height: 130px; padding: 18px 14px; }
@media (max-width: 700px) { .pcard { min-height: 113px; } }
/* Ohne das Label sitzt der Info-Knopf bei allen Kacheln gleich */
.pcard--tier1 .pcard__info { top: 14px; right: 14px; }
.pcard__info { top: 14px; right: 14px; }

/* --- Partner-Popup scrollbar ---
   Corinna 30.7.: die Partnertexte sind teils lang. Sie bleiben wie sie sind, das
   Overlay bekommt aber einen eigenen sichtbaren Balken — dieselbe Begruendung wie
   bei der Kartenliste: macOS zeichnet Overlay-Scrollbars nur beim Scrollen, und
   ohne Hinweis wirkt ein abgeschnittener Text wie das Ende des Texts. */
.newsmodal__inner { scrollbar-width: thin; scrollbar-color: rgba(19, 19, 71, .38) rgba(19, 19, 71, .10); }
.newsmodal__inner::-webkit-scrollbar { width: 10px; }
.newsmodal__inner::-webkit-scrollbar-track { background: rgba(19, 19, 71, .08); border-radius: 999px; margin: 10px 0; }
.newsmodal__inner::-webkit-scrollbar-thumb {
  background: rgba(19, 19, 71, .34); border-radius: 999px;
  border: 2px solid transparent; background-clip: content-box;
}

/* --- Standortkarte: nur Punkte, keine Beschriftung ---
   Corinna 30.7.: "nur Punkte in der Karte ohne Bezeichnung". Der Name steht
   weiter im aria-label des Pins, damit Screenreader ihn vorlesen, und in der
   Liste rechts. Ausgeblendet statt entfernt, damit die Beschriftung ohne
   Markup-Aenderung zurueckkommen kann (Schalter ZEIGE_LABELS in map.js). */
/* Im Standard ruht die Karte ohne Beschriftung (Corinna 30.7.: "nur Punkte in
   der Karte ohne Bezeichnung"). Der Name erscheint aber, sobald man einen Punkt
   beruehrt, anwaehlt oder in der Liste rechts darueberfaehrt — sonst waeren die
   dicht beieinander liegenden Punkte um Mannheim und Heidelberg nicht
   auseinanderzuhalten. Die 3D-Betriebsart zeigt alle dauerhaft. */
.map__stage:not(.is-3d) .mp__lab { display: none; }
.map__stage:not(.is-3d) .mp:hover .mp__lab,
.map__stage:not(.is-3d) .mp:focus-visible .mp__lab,
.map__stage:not(.is-3d) .mp.hov .mp__lab,
.map__stage:not(.is-3d) .mp.active .mp__lab { display: block; }
/* Der beruehrte Punkt liegt ueber den anderen, damit sein Name nicht
   von einem benachbarten Punkt ueberdeckt wird. */
.map__stage:not(.is-3d) .mp:hover,
.map__stage:not(.is-3d) .mp.hov,
.map__stage:not(.is-3d) .mp.active { z-index: 4; }
/* Ohne Label ist der Punkt selbst das Ziel — Trefferflaeche vergroessern,
   damit er mit dem Finger sicher zu treffen ist (44px nach Apple HIG). */
.mp { padding: 12px; margin: -12px; }



/* --- Hinweis unter dem Matching-Formular (Platzhalter bis Bettinas Text) --- */
.pbox__note {
  margin-top: 14px;
  font-family: var(--ui); font-size: 13px; line-height: 1.5;
  color: var(--dim-on-dark);
}
.pbox__note a { color: var(--blue-bright); text-decoration: underline; text-underline-offset: 2px; }


/* --- Leistungen im Partner-Popup ---
   Corinna 30.7. wollte die Leistungen der Partner strukturiert dargestellt
   sehen. Die Punkte stehen sowohl hier als auch als Karten in "Angebote &
   Events" — dieselbe Quelle (news-Array, verknuepft ueber partnerId), damit
   beide Darstellungen nicht auseinanderlaufen. Zwei Stellen zeigen dieses
   Popup: die Detailbox der Karte und die Logo-Wall.
   Punkte und Farbe kommen aus .newsmodal__body ul/li::marker weiter oben —
   ein eigenes ::before hatte dort einen zweiten Punkt daneben gesetzt. */
.newsmodal__bullets { margin-top: 18px; }
.newsmodal__bullets li { margin-bottom: 11px; line-height: 1.5; }

/* --- Umschalter Karte / 3D-Karte ---
   Bauform der Ebenen-Reiter darueber (.map__tabs) und der Navigationsleiste:
   Glaspille mit Innenkante, aktives Segment in --active-bg. Damit spricht die
   Karte dieselbe Sprache wie der Rest der Seite, statt einen Sonderknopf zu
   zeigen. */
.map__modes {
  position: absolute; right: 16px; bottom: 15px; z-index: 6;
  display: flex; gap: 4px; padding: 5px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .05);
  background-blend-mode: luminosity;
  -webkit-backdrop-filter: blur(14px) saturate(1.25);
  backdrop-filter: blur(14px) saturate(1.25);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .12);
}
.map__modes::before {
  content: ''; position: absolute; inset: 0;
  border-radius: inherit; padding: 1.4px;
  background: var(--glass-edge);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.mmode {
  font-family: var(--ui); font-weight: 500; font-size: 12.5px; letter-spacing: .02em;
  padding: 8px 15px; border: none; border-radius: var(--r-pill);
  color: var(--dim-on-dark); background: none; cursor: pointer; white-space: nowrap;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.mmode:hover { background: rgba(157, 180, 255, .16); color: #fff; }
.mmode[aria-pressed="true"] { background: var(--active-bg); color: var(--active-fg); }
/* Mobil die beiden Auswahlfelder nebeneinander statt untereinander: drei
   gestapelte Zeilen kosteten 140px Hoehe, nebeneinander sind es 93px. Die
   Chipreihe bleibt darueber, sie braucht die volle Breite. */
@media (max-width: 700px) {
  #news-filter .chiprow { flex: 1 0 100%; }
  #news-filter .byfilter { flex: 1 1 0; min-width: 0; }
  #news-filter .byfilter select { width: 100%; min-width: 0; }
}

@media (max-width: 700px) {
  /* Der Hinweis sitzt in der freien Flaeche LINKS neben dem Umschalter
     (Wunsch Max 05.08.). Vorher stand er oben links und lag dort ueber den
     Orts- und Staedtenamen der Karte — schwer lesbar, beides ging unter.
     Er endet vor dem Umschalter (right) und beginnt rechts des
     Barrierefreiheits-Knopfs, der am Viewport unten links klebt (56px + Luft):
     so kollidiert er mit keinem von beiden. */
  .map__hint {
    top: auto; bottom: 15px; left: 14px; right: 164px;
    max-width: none; line-height: 1.3; text-align: left;
    text-shadow: 0 1px 6px rgba(0, 4, 72, .9);
  }
  .map__modes { right: 12px; bottom: 12px; padding: 4px; }
  .mmode { padding: 7px 12px; font-size: 12px; }

  /* Mehr Luft zwischen Kopftext und Karte (Wunsch Max 05.08.): 44 -> 96px.
     Der Wert haengt mit FADE_OBEN in map.js zusammen: der Ueberhang des Canvas
     ist die obersten 44px transparent und blendet darunter weich ein — bei
     96px Abstand endet der Text also im vollstaendig transparenten Bereich. */
  .karte .sec__head { margin-bottom: 96px; }
}

/* Mobilmenue: Zeilenhoehe allein ergab 41px hohe Tippziele, die Mindestgroesse
   fuer Beruehrung liegt bei 44px. Die Schriftgroesse bleibt unveraendert,
   nur die Trefferflaeche waechst. */
.mmenu__links a {
  display: flex; align-items: center;
  min-height: 44px;
}

/* Bestaetigung nach dem Absenden: bleibt stehen, bis sie weggeklickt wird.
   Deshalb braucht die Flaeche Zeigerereignisse — vorher war sie rein
   dekorativ und liess Klicks durch. */
.pbox__done {
  flex-direction: column;
  gap: 12px;
  padding: 28px 32px;
  text-align: center;
}
.pbox__done.is-in { pointer-events: auto; }
.pbox__donetitle {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(20px, 2.4vw, 26px); line-height: 1.2;
  color: var(--gold);
}
.pbox__donetext {
  max-width: 34ch;
  font-family: var(--ui); font-size: 14.5px; line-height: 1.55;
  color: rgba(244, 243, 238, .78);
}
/* Der Knopf steht allein in der Flaeche, deshalb darf er die 44px der
   Beruehrungsmindestgroesse erreichen, ohne neben den 38px hohen
   Schrittknoepfen aus der Reihe zu fallen. */
.pbox__donex { margin-top: 6px; height: 44px; padding: 0 24px; }

/* Angebots-Karten: Logo-Kachel statt Motivbild (Corinna 04.08.). Heller Grund,
   Logo mittig und vollstaendig sichtbar (contain) mit Luft ringsum — anders als
   die Motivbilder, die den Rahmen fuellen. Das 16:9 der News-Karten bleibt, damit
   die Kachel neben den uebrigen Karten gleich hoch ist. Kein Zoom beim Hover:
   ein formatfuellendes Foto vertraegt das, ein freigestelltes Logo nicht. */
.card__media--logo {
  background: var(--paper);
  display: grid; place-items: center;
}
.card__media--logo .card__logo {
  position: static; inset: auto;
  width: auto; height: auto;
  max-width: 66%; max-height: 60%;
  object-fit: contain;
  transition: transform .5s var(--ease-out);
}
.card:hover .card__media--logo .card__logo { transform: scale(1.04); }
/* Der Typ-Chip liegt sonst hell auf hell; auf der Logo-Kachel bekommt er einen
   dunklen Grund, damit „Angebote“ lesbar bleibt. */
.card__media--logo .card__tag {
  background: var(--navy); color: var(--paper);
}

/* Let's-match-CTA: Hover einheitlich Gold + dunkler Text, in JEDEM Nav-Kontext.
   Vorher gewann eine generische Regel (body[data-nav="light"] .nav__pill a:hover
   -> weiss auf transparent), auf der hellen Kontaktseite praktisch unsichtbar.
   Die Selektoren tragen den data-nav/navtone-Vorsatz, damit sie diese generische
   Regel an Spezifitaet schlagen; !important sichert es gegen die uebrigen
   verstreuten CTA-Overrides ab. */
.nav .nav__pill a.nav__cta:hover,
body[data-nav="light"]:not(.menu-open) .nav .nav__pill a.nav__cta:hover,
body[data-nav="dark"]:not(.menu-open) .nav .nav__pill a.nav__cta:hover,
body[data-navtone="light"]:not(.menu-open) .nav .nav__pill a.nav__cta:hover,
body[data-navtone="dark"]:not(.menu-open) .nav .nav__pill a.nav__cta:hover {
  background: var(--gold) !important;
  color: var(--navy-deep) !important;
}

/* Website-Link in der Karten-Detailbox (Raeume). Ruhige Glas-Pille im Duktus
   des Info-Knopfes daneben, damit sie die Box nicht dominiert. */
.map__cardlink {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 12px; padding: 8px 14px;
  border-radius: var(--r-pill, 999px);
  background: rgba(157, 180, 255, .14);
  border: 1px solid rgba(157, 180, 255, .32);
  color: var(--blue-bright);
  font-family: var(--ui); font-size: 13px; font-weight: 500;
  text-decoration: none;
  transition: background .22s var(--ease), border-color .22s var(--ease), color .22s var(--ease);
}
.map__cardlink:hover {
  background: var(--gold); border-color: var(--gold); color: var(--navy-deep);
}
.map__cardlink svg { flex: none; }