/* ============================================================================
   UNTER DER BAVARIA — gemeinsames Design-System
   Pop-Art-Wiesn: Gold, Bayernblau, Türkis, Beere.
   Anton für alles Laute, Inter für Fließtext.
   Signatur: harte Schatten ohne Blur + leichte Rotation.
   Diese Datei gilt für Startseite und alle Unterseiten.
   ========================================================================== */

:root {
  /* Kernfarben */
  --gold:        #f2993a;
  --gold-warm:   #f7b366;
  --gold-hell:   #fdf3d5;
  --dunkel:      #1450a6;
  --dunkel-tief: #0f3b7d;
  --tuerkis:      #7cf3e6;
  --tuerkis-tief: #0e9c8a;
  --tuerkis-nacht:#0f2e2b;
  --beere:        #b20f91;
  --beere-tief:   #7d0b68;

  /* Flächen */
  --weiss:      #ffffff;
  --creme:      #faf7f2;
  --creme-mid:  #f2ede4;
  --creme-rand: #e8e0d0;

  /* Schrift */
  --tinte:      #14202e;
  --tinte-mid:  #55657a;
  --tinte-hell: #8a9aae;

  /* System */
  --radius:    10px;
  --radius-sm: 7px;
  --radius-lg: 18px;
  --schatten:      5px 6px 0 rgba(20,20,30,.14);
  --schatten-tief: 7px 9px 0 rgba(20,20,30,.18);
  --schatten-hell: 5px 6px 0 rgba(255,255,255,.16);

  --raster: 1180px;
  --partnerleiste-h: 64px;

  /* Halbton-Punkte, das wiederkehrende Pop-Art-Muster */
  --punkte: radial-gradient(rgba(14,156,138,.16) 1.6px, transparent 1.6px);
  --punkte-gold: radial-gradient(rgba(242,153,58,.22) 1.6px, transparent 1.6px);
  --punkte-hell: radial-gradient(rgba(255,255,255,.16) 1.6px, transparent 1.6px);
}

/* ============================================================ RESET */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth; font-size: 16px; -webkit-text-size-adjust: 100%;
  /* Sprungmarken landen unter dem Kopf, nicht dahinter. */
  /* Sprungmarken landen unter der schwebenden Insel: 10px Abstand oben,
     62px Insel, 14px Luft. Die Partnerleiste zaehlt nicht mit, die ist beim
     Springen laengst durchgelaufen. */
  scroll-padding-top: 86px;
}
body {
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--tinte);
  background: var(--weiss);
  line-height: 1.6;
  /* clip statt hidden: hidden macht aus dem Body einen Scroll-Container und
     bringt in Chrome den klebenden Kopf durcheinander, die Partnerleiste
     verschwindet dann hinter dem oberen Rand. clip schneidet nur ab. */
  overflow-x: clip;
}
@supports not (overflow: clip) {
  body { overflow-x: hidden; }
}
a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; }
img { display: block; height: auto; }
button { cursor: pointer; border: none; background: none; font-family: inherit; color: inherit; }
ul { list-style: none; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* ============================================================ LAYOUT */
.container { max-width: var(--raster); margin: 0 auto; padding: 0 28px; }

.band { padding: 82px 0; position: relative; }
.band--weiss  { background: var(--weiss); }
.band--creme  { background: var(--creme); }
.band--tuerkis{ background: var(--tuerkis-tief); color: #fff; }
.band--nacht  { background: var(--tuerkis-nacht); color: #fff; }
.band--beere  { background: var(--beere-tief); color: #fff; }
.band--blau   { background: var(--dunkel); color: #fff; }
.band--schmal { padding: 52px 0; }
.band--dots::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--punkte); background-size: 15px 15px;
  -webkit-mask-image: radial-gradient(ellipse 70% 65% at 85% 12%, #000 0%, transparent 75%);
          mask-image: radial-gradient(ellipse 70% 65% at 85% 12%, #000 0%, transparent 75%);
}
.band--dots-hell::before { background-image: var(--punkte-hell); }
.band--dots-gold::before { background-image: var(--punkte-gold); }
.band > .container { position: relative; z-index: 1; }

/* Zackenkante als Bandtrenner statt gerader Linie */
.zack { height: 16px; line-height: 0; display: block; }
.zack svg { width: 100%; height: 16px; display: block; }

/* ============================================================ TYPOGRAFIE */
.h-xl, .h-l, .h-m, .h-s {
  font-family: 'Anton', 'Arial Narrow', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .005em;
  line-height: 1.05;
  color: inherit;
}
.h-xl { font-size: clamp(2.1rem, 6vw, 3.6rem); }
.h-l  { font-size: clamp(1.75rem, 4.2vw, 2.7rem); }
.h-m  { font-size: clamp(1.3rem, 2.8vw, 1.75rem); line-height: 1.12; }
.h-s  { font-size: clamp(1.02rem, 1.8vw, 1.18rem); line-height: 1.2; text-transform: none; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: 'Anton', sans-serif;
  font-size: .7rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--beere); margin-bottom: .75rem;
}
.eyebrow::before { content: ''; width: 22px; height: 3px; background: currentColor; flex-shrink: 0; }
.eyebrow--gold { color: var(--gold); }
.eyebrow--tuerkis { color: var(--tuerkis-tief); }
.on-dark .eyebrow, .band--tuerkis .eyebrow, .band--nacht .eyebrow,
.band--beere .eyebrow, .band--blau .eyebrow, .seitenkopf .eyebrow { color: var(--gold); }

.lead {
  font-size: 1.02rem; color: var(--tinte-mid);
  max-width: 640px; margin-top: .9rem; line-height: 1.65;
}
.band--tuerkis .lead, .band--nacht .lead, .band--beere .lead, .band--blau .lead,
.seitenkopf .lead {
  color: rgba(255,255,255,.78);
}
.band-head { margin-bottom: 2.8rem; max-width: 760px; }
.band-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.band-head--center .eyebrow { justify-content: center; }

/* ============================================================ BUTTONS */
.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: 'Anton', sans-serif; font-size: .82rem;
  letter-spacing: .07em; text-transform: uppercase;
  padding: 13px 26px 11px; border-radius: 6px;
  box-shadow: 4px 5px 0 rgba(20,20,30,.2);
  transform: rotate(-1deg);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover { transform: rotate(-1deg) translate(-1px,-2px); box-shadow: 6px 8px 0 rgba(20,20,30,.24); }
.btn:active { transform: rotate(-1deg) translate(1px,2px); box-shadow: 2px 3px 0 rgba(20,20,30,.2); }
.btn + .btn { transform: rotate(1deg); }
.btn + .btn:hover { transform: rotate(1deg) translate(-1px,-2px); }
.btn + .btn:active { transform: rotate(1deg) translate(1px,2px); }
.btn--gold   { background: var(--gold); color: #241300; }
.btn--beere  { background: var(--beere); color: #fff; }
.btn--blau   { background: var(--dunkel); color: #fff; }
.btn--weiss  { background: #fff; color: var(--dunkel); }
.btn--nacht  { background: var(--tuerkis-nacht); color: var(--gold); }
.btn--linie  { background: transparent; color: currentColor; box-shadow: none; border: 2px solid currentColor; }
.btn--linie:hover { box-shadow: 4px 5px 0 rgba(20,20,30,.18); }
.btn .icon { width: 1.15em; height: 1.15em; }
.btn-row { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.6rem; }

.textlink {
  font-family: 'Anton', sans-serif; font-size: .8rem;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--beere); border-bottom: 3px solid var(--gold);
  padding-bottom: 2px; display: inline-block;
  transition: color .15s;
}
.textlink:hover { color: var(--tuerkis-tief); }
.band--tuerkis .textlink, .band--nacht .textlink,
.band--beere .textlink, .band--blau .textlink { color: var(--gold); border-color: #fff; }

/* ============================================================ STICKER / TAGS */
.sticker {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: 'Anton', sans-serif;
  font-size: .64rem; letter-spacing: .12em; text-transform: uppercase;
  padding: 6px 13px 5px; border-radius: 5px;
  background: var(--beere); color: #fff;
  box-shadow: 3px 4px 0 rgba(20,20,30,.18);
  transform: rotate(-2deg);
}
.sticker--gold    { background: var(--gold); color: #241300; }
.sticker--tuerkis { background: var(--tuerkis-tief); color: #fff; }
.sticker--blau    { background: var(--dunkel); color: #fff; }
.sticker--weiss   { background: #fff; color: var(--dunkel); }
.sticker--gerade  { transform: none; }
.sticker .punkt {
  width: 7px; height: 7px; border-radius: 50%; background: currentColor;
  animation: udb-puls 1.6s ease-in-out infinite;
}
@keyframes udb-puls { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

/* Eckfahne, sitzt bündig in der linken oberen Kartenecke */
.fahne {
  align-self: flex-start;
  font-family: 'Anton', sans-serif;
  font-size: .62rem; letter-spacing: .11em; text-transform: uppercase;
  padding: 7px 14px 6px; border-radius: 0 0 8px 0;
  background: var(--gold); color: #241300;
  position: relative; z-index: 2;
}
.fahne--beere   { background: var(--beere); color: #fff; }
.fahne--tuerkis { background: var(--tuerkis-tief); color: #fff; }
.fahne--blau    { background: var(--dunkel); color: #fff; }

.chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .78rem; font-weight: 600;
  background: rgba(255,255,255,.12); border: 2px solid rgba(255,255,255,.22);
  border-radius: 40px; padding: 7px 15px; color: inherit;
}
.chip b { color: var(--gold); font-weight: 700; }
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 1.6rem; }

/* ============================================================ KARTEN */
.karten { display: grid; gap: 24px; }
.karten--2 { grid-template-columns: repeat(2, 1fr); }
.karten--3 { grid-template-columns: repeat(3, 1fr); }
.karten--4 { grid-template-columns: repeat(4, 1fr); }
.karten--auto { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.karte {
  background: #fff; color: var(--tinte);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: 26px 24px 28px;
  display: flex; flex-direction: column;
  position: relative;
  transition: transform .15s ease, box-shadow .15s ease;
}
.karte--flush { padding: 0; overflow: hidden; }
.karte--dreh   { transform: rotate(-.7deg); }
.karte--dreh2  { transform: rotate(.6deg); }
a.karte:hover, .karte--hover:hover {
  transform: translate(-1px,-3px) rotate(0deg);
  box-shadow: var(--schatten-tief);
}
a.karte--dreh:hover  { transform: translate(-1px,-3px) rotate(-.7deg); }
a.karte--dreh2:hover { transform: translate(-1px,-3px) rotate(.6deg); }
.karte--dunkel {
  background: rgba(255,255,255,.07); color: #fff;
  border: 2px solid rgba(255,255,255,.16);
  box-shadow: var(--schatten-hell);
}
.karte-titel {
  font-family: 'Anton', sans-serif; font-size: 1.08rem;
  line-height: 1.25; margin-bottom: .5rem;
}
.karte-text { font-size: .89rem; color: var(--tinte-mid); line-height: 1.62; }
.karte--dunkel .karte-text { color: rgba(255,255,255,.7); }
.karte-meta {
  font-family: 'Anton', sans-serif; font-size: .7rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--beere);
}
.karte-body { padding: 20px 22px 24px; }

/* Icon-Plakette oben in der Karte */
.plakette {
  width: 46px; height: 46px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.1rem; color: #fff; flex-shrink: 0;
  box-shadow: 3px 4px 0 rgba(20,20,30,.16);
  transform: rotate(-3deg);
}
.plakette svg { width: 1.45em; height: 1.45em; }
.plakette--gold    { background: var(--gold); color: #241300; }
.plakette--beere   { background: var(--beere); }
.plakette--tuerkis { background: var(--tuerkis-tief); }
.plakette--blau    { background: var(--dunkel); }

/* Zahlenkarten */
.zahlen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.zahl {
  background: #fff; border-radius: var(--radius);
  box-shadow: var(--schatten); padding: 24px 24px 26px;
  border-top: 6px solid var(--gold);
}
.zahl:nth-child(2) { border-top-color: var(--beere); }
.zahl:nth-child(3) { border-top-color: var(--tuerkis-tief); }
.zahl:nth-child(4) { border-top-color: var(--dunkel); }
.zahl .n {
  font-family: 'Anton', sans-serif; font-size: 2.6rem;
  line-height: 1; color: var(--dunkel);
}
.zahl .t { font-family: 'Anton', sans-serif; font-size: 1rem; margin: .5rem 0 .35rem; }
.zahl .d { font-size: .86rem; color: var(--tinte-mid); line-height: 1.55; }

/* Listenkarte mit Punkten */
.punktliste li {
  position: relative; padding-left: 20px; margin-bottom: 9px;
  font-size: .89rem; line-height: 1.6; color: var(--tinte);
}
.punktliste li::before {
  content: ''; position: absolute; left: 0; top: .62em;
  width: 8px; height: 8px; background: var(--gold);
  transform: rotate(45deg);
}
.karte--dunkel .punktliste li { color: rgba(255,255,255,.78); }

/* ============================================================ ABLAUF-TREPPE */
.treppe { max-width: 860px; }
.stufe {
  display: grid; grid-template-columns: 52px 1fr; gap: 20px;
  padding: 18px 0; border-top: 2px solid var(--creme-rand);
}
.stufe:first-child { border-top: none; padding-top: 0; }
.band--tuerkis .stufe, .band--nacht .stufe, .band--beere .stufe, .band--blau .stufe {
  border-top-color: rgba(255,255,255,.16);
}
.stufe-nr {
  width: 52px; height: 52px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Anton', sans-serif; font-size: 1.35rem;
  background: var(--dunkel); color: #fff;
  box-shadow: 3px 4px 0 rgba(20,20,30,.18);
  transform: rotate(-3deg); flex-shrink: 0;
}
.stufe:nth-child(even) .stufe-nr { transform: rotate(3deg); }
.stufe-nr--gold { background: var(--gold); color: #241300; }
.stufe-nr--beere { background: var(--beere); color: #fff; }
.stufe-kopf { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.stufe-titel { font-family: 'Anton', sans-serif; font-size: 1.08rem; }
.stufe-dauer {
  font-family: 'Anton', sans-serif; font-size: .68rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--beere);
}
.band--tuerkis .stufe-dauer, .band--nacht .stufe-dauer,
.band--beere .stufe-dauer, .band--blau .stufe-dauer { color: var(--gold); }
.stufe-text { font-size: .9rem; color: var(--tinte-mid); margin-top: .3rem; line-height: 1.6; }
.band--tuerkis .stufe-text, .band--nacht .stufe-text,
.band--beere .stufe-text, .band--blau .stufe-text { color: rgba(255,255,255,.7); }

/* Waagrechte Ablaufkette (Partner- und Gästeseite) */
.kette { display: flex; align-items: stretch; gap: 0; }
.kette-glied {
  flex: 1 1 0; min-width: 0; padding: 0 6px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.kette-nr {
  width: 38px; height: 38px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Anton', sans-serif; font-size: 1rem;
  background: #cfe0ef; color: var(--dunkel);
  margin-bottom: 11px; flex-shrink: 0;
  box-shadow: 2px 3px 0 rgba(20,20,30,.12);
  transform: rotate(-3deg);
}
.kette-glied--hi .kette-nr { background: var(--gold); color: #241300; transform: rotate(3deg); }
.kette-label { font-family: 'Anton', sans-serif; font-size: .8rem; line-height: 1.25; }
.kette-tag { font-size: .7rem; color: var(--tinte-mid); margin-top: 4px; }
.kette-pfeil {
  flex: 0 0 22px; display: flex; align-items: center; justify-content: center;
  color: var(--gold); font-size: 1rem; transform: translateY(-16px);
}
.legende { display: flex; gap: 18px; flex-wrap: wrap; font-size: .78rem; color: var(--tinte-mid); }
.legende span { display: inline-flex; align-items: center; gap: 7px; }
.legende i { width: 10px; height: 10px; transform: rotate(45deg); display: inline-block; }
.legende .lg-hi i { background: var(--gold); }
.legende .lg-normal i { background: #cfe0ef; }

/* ============================================================ NOTIZ / HINWEIS */
.notiz {
  margin-top: 26px; padding: 20px 24px;
  background: var(--gold-hell); border-left: 6px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: #4a3410; font-size: .89rem; line-height: 1.65;
}
.notiz a { color: var(--beere); font-weight: 700; border-bottom: 2px solid var(--gold); }
.band--tuerkis .notiz, .band--nacht .notiz, .band--beere .notiz, .band--blau .notiz {
  background: rgba(255,255,255,.1); border-left-color: var(--gold); color: rgba(255,255,255,.8);
}
.band--tuerkis .notiz a, .band--nacht .notiz a, .band--beere .notiz a, .band--blau .notiz a { color: var(--gold); }

/* ============================================================ HEADER */
/* Der Kopf besteht aus zwei Teilen: der dunklen Partnerleiste ganz oben und
   darunter der Navigation, die als eigene abgerundete Leiste über dem Inhalt
   schwebt. Gesamthöhe bleibt Partnerleiste + 78px, darauf rechnet der Hero. */
/* Der Kopf steht ganz normal im Fluss und scrollt mit. Nichts klebt, damit
   kann die Partnerleiste am Seitenanfang auch von nichts verdeckt werden.
   Erst ab einem Scrollweg heftet header-footer.js die Klasse "gescrollt" an,
   und dann wird allein die Navigationsinsel zu einem festen Element mit
   eigenem Abstand nach oben. Ein halb angeschnittener Kopf ist damit
   unmoeglich: entweder steht er im Fluss oder die Insel schwebt frei.
   min-height haelt die Hoehe, wenn die Insel aus dem Fluss geht, sonst
   springt die Seite im Moment des Umschaltens. */
header.udb-header {
  background: transparent;
  position: relative; z-index: 900;
  padding-bottom: 8px;
  min-height: calc(var(--partnerleiste-h) + 78px);
}
header.udb-header.gescrollt .udb-nav {
  position: fixed; top: 10px; left: 50%; transform: translateX(-50%);
  margin: 0; z-index: 901; transition: top .28s ease;
}

.udb-partnerleiste { background: var(--tuerkis-nacht); }

/* Wer nach oben scrollt, sucht Orientierung. Genau dann faehrt die
   Partnerleiste wieder ein und der Partner ist wieder im Bild. Beim
   Weiterscrollen nach unten geht sie zurueck. Die Navigationsinsel rutscht
   um die Hoehe der Leiste nach unten, damit sich beide nicht ueberlagern. */
header.udb-header.gescrollt .udb-partnerleiste {
  position: fixed; top: 0; left: 0; right: 0; z-index: 902;
  transform: translateY(-100%); transition: transform .28s ease;
  box-shadow: 0 6px 18px rgba(0,0,0,.22);
}
header.udb-header.gescrollt.hoch .udb-partnerleiste { transform: translateY(0); }
header.udb-header.gescrollt.hoch .udb-nav { top: calc(var(--partnerleiste-h) + 10px); }
@media (prefers-reduced-motion: reduce) {
  header.udb-header.gescrollt .udb-partnerleiste,
  header.udb-header.gescrollt .udb-nav { transition: none; }
}
.udb-partnerleiste-inner {
  max-width: var(--raster); margin: 0 auto; padding: 0 28px;
  height: var(--partnerleiste-h);
  display: flex; align-items: center; justify-content: center; gap: 20px;
}
.udb-partnerleiste .lbl {
  font-family: 'Anton', sans-serif; font-size: 1.05rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--gold); white-space: nowrap;
}
.udb-partnerleiste .strich { width: 44px; height: 3px; background: var(--gold); flex-shrink: 0; }
.udb-partnerleiste img { height: 40px; width: auto; display: block; }
.udb-partnerleiste .fallback {
  font-family: 'Anton', sans-serif; font-size: 1.75rem; line-height: 1;
  text-transform: uppercase; color: #fff; white-space: nowrap;
}

/* Die schwebende Leiste */
.udb-nav {
  position: relative;
  /* Die Leiste ist nur so breit wie ihr Inhalt und schwebt als Insel mittig */
  width: fit-content; max-width: calc(100% - 36px);
  margin: 8px auto 0;
  padding: 0 10px 0 20px;
  height: 62px;
  display: flex; align-items: center; gap: 1.4rem;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  border: 2px solid rgba(20,20,30,.08);
  border-radius: 999px;
  box-shadow: 0 12px 28px rgba(20,20,30,.16);
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.udb-nav-logo { display: flex; flex-direction: column; gap: 2px; flex-shrink: 0; }
.udb-nav-logo .site-name {
  font-family: 'Anton', sans-serif; font-size: 1.28rem; line-height: 1;
  color: var(--dunkel); text-transform: uppercase; letter-spacing: -.005em;
}
.udb-nav-logo .site-claim {
  font-family: 'Anton', sans-serif; font-size: .54rem; letter-spacing: .24em;
  text-transform: uppercase; color: var(--beere); line-height: 1;
}
.udb-nav-links {
  position: relative;
  display: flex; align-items: center; gap: .1rem;
}
.udb-nav-links a {
  position: relative; z-index: 1;
  font-family: 'Anton', sans-serif; font-size: .72rem;
  letter-spacing: .11em; text-transform: uppercase; color: var(--dunkel);
  padding: 9px 13px; border-radius: 999px; white-space: nowrap;
  transition: color .18s ease;
}
.udb-nav-links > li > a.active { color: var(--beere); }
.udb-nav-links > li > a:hover { color: var(--beere); }

/* Die Pille liegt hinter den Links und gleitet zum überfahrenen Punkt */
.udb-nav-pille {
  position: absolute; top: 50%; left: 0; width: 0; height: 34px;
  transform: translateY(-50%);
  border-radius: 999px; background: var(--gold-hell);
  box-shadow: inset 0 0 0 2px rgba(242,153,58,.35);
  opacity: 0; pointer-events: none; z-index: 0;
}
.udb-nav-pille.bereit {
  transition: left .3s cubic-bezier(.45,.9,.3,1), width .3s cubic-bezier(.45,.9,.3,1), opacity .2s ease;
}

/* ── Untermenü "Wiesn-Service" ─────────────────────────────────── */
.udb-hat-unter { position: relative; }
.udb-unter-schalter .pfeil {
  display: inline-block; width: 0; height: 0; margin-left: 7px; vertical-align: 2px;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid currentColor; opacity: .6;
  transition: transform .2s ease;
}
.udb-hat-unter:hover .udb-unter-schalter .pfeil,
.udb-hat-unter.offen .udb-unter-schalter .pfeil { transform: rotate(180deg); opacity: 1; }
/* Das Polster oben ist die Brücke zwischen Schalter und Karte */
.udb-unter {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(6px);
  padding-top: 18px; z-index: 10;
  opacity: 0; visibility: hidden;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.udb-hat-unter:hover .udb-unter,
.udb-hat-unter:focus-within .udb-unter,
.udb-hat-unter.offen .udb-unter {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.udb-unter ul {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 216px; padding: 10px;
  background: #fff; border: 2px solid rgba(20,20,30,.07); border-radius: 18px;
  box-shadow: 0 18px 34px rgba(20,20,30,.18);
}
.udb-unter a {
  display: block; padding: 10px 13px; border-radius: 12px;
  font-size: .7rem; color: var(--dunkel); white-space: nowrap;
  transition: background .16s ease, color .16s ease;
}
.udb-nav-links .udb-unter a { color: var(--dunkel); }
.udb-nav-links .udb-unter a:hover { background: var(--gold-hell); color: var(--beere); }
.udb-nav-links .udb-unter a.active { background: var(--gold-hell); color: var(--beere); }

.udb-nav-cta {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Anton', sans-serif; font-size: .72rem;
  letter-spacing: .09em; text-transform: uppercase;
  background: var(--beere); color: #fff;
  padding: 11px 18px 9px; border-radius: 999px;
  box-shadow: 3px 4px 0 rgba(20,20,30,.2);
  transform: rotate(-1.5deg); flex-shrink: 0;
  transition: transform .15s, box-shadow .15s, background .2s;
}
.udb-nav-cta .play {
  display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; border-radius: 50%;
  background: rgba(255,255,255,.22); flex-shrink: 0;
}
.udb-nav-cta .play svg { width: 9px; height: 9px; display: block; margin-left: 1px; }
.udb-nav-cta:hover { transform: rotate(-1.5deg) translate(-1px,-2px); box-shadow: 4px 6px 0 rgba(20,20,30,.24); }
.udb-nav-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
/* Der Hör-Button steckt auf schmalen Geräten im Menü statt in der Leiste */
.udb-nav-links li.nur-mobil { display: none; }
.udb-burger { display: none; flex-direction: column; gap: 5px; padding: 8px; }
.udb-burger span { width: 26px; height: 3px; background: var(--dunkel); border-radius: 2px; display: block; transition: transform .2s, opacity .2s; }
.udb-burger.offen span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.udb-burger.offen span:nth-child(2) { opacity: 0; }
.udb-burger.offen span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Über dem Hero der Startseite schwebt die Leiste als dunkles Glas */
body.udb-home header.udb-header:not(.gescrollt) .udb-nav {
  background: rgba(15,46,43,.78);
  backdrop-filter: blur(8px) saturate(130%);
  -webkit-backdrop-filter: blur(8px) saturate(130%);
  border-color: rgba(242,153,58,.55);
  box-shadow: 0 16px 34px rgba(8,20,18,.42);
}
body.udb-home header.udb-header:not(.gescrollt) .udb-nav-links > li > a,
body.udb-home header.udb-header:not(.gescrollt) .udb-nav-logo .site-name { color: #fff; }
body.udb-home header.udb-header:not(.gescrollt) .udb-nav-links > li > a.active,
body.udb-home header.udb-header:not(.gescrollt) .udb-nav-links > li > a:hover { color: var(--gold); }
body.udb-home header.udb-header:not(.gescrollt) .udb-nav-pille {
  background: rgba(255,255,255,.16); box-shadow: inset 0 0 0 2px rgba(255,255,255,.3);
}
body.udb-home header.udb-header:not(.gescrollt) .udb-nav-logo .site-claim { color: var(--gold); }
body.udb-home header.udb-header:not(.gescrollt) .udb-nav-cta { background: var(--gold); color: #241300; }
body.udb-home header.udb-header:not(.gescrollt) .udb-nav-cta .play { background: rgba(36,19,0,.18); }
body.udb-home header.udb-header:not(.gescrollt) .udb-burger span { background: #fff; }
/* Das Logo steht in der Insel immer, sonst klafft links ein leeres Feld */
.udb-nav-logo { white-space: nowrap; }

/* Seitenkopf der Unterseiten folgt dem Hero der Startseite:
   Inhalt sitzt links am Rand statt mittig im 1180er-Raster */
.seitenkopf > .container {
  max-width: none; width: 100%;
  padding-left: clamp(28px, 6vw, 110px); padding-right: 28px;
}
.seitenkopf > .container > * { max-width: 1060px; }
.seitenkopf .lead, .seitenkopf p { max-width: 560px; }
@media (max-width: 640px) {
  .seitenkopf > .container { padding-left: 20px; padding-right: 20px; }
}

/* ============================================================ FOOTER */
footer.udb-footer {
  background: var(--tuerkis-nacht); color: #fff;
  padding: 62px 0 26px; position: relative; overflow: hidden;
}
footer.udb-footer::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--punkte-hell); background-size: 16px 16px;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 90% 10%, #000 0%, transparent 70%);
          mask-image: radial-gradient(ellipse 60% 70% at 90% 10%, #000 0%, transparent 70%);
}
.udb-footer-inner { max-width: var(--raster); margin: 0 auto; padding: 0 28px; position: relative; z-index: 1; }
.udb-footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.2fr; gap: 40px; margin-bottom: 42px; }
.udb-footer-brand .site-name {
  font-family: 'Anton', sans-serif; font-size: 1.45rem;
  text-transform: uppercase; margin-bottom: .3rem;
}
.udb-footer-brand .site-claim {
  font-family: 'Anton', sans-serif; font-size: .62rem; letter-spacing: .26em;
  text-transform: uppercase; color: var(--gold);
}
.udb-footer-brand p { font-size: .84rem; color: rgba(255,255,255,.6); line-height: 1.65; margin-top: .9rem; max-width: 320px; }
.udb-footer-col h4 {
  font-family: 'Anton', sans-serif; font-size: .72rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 1rem;
}
.udb-footer-col ul { display: flex; flex-direction: column; gap: 9px; }
.udb-footer-col a { font-size: .84rem; color: rgba(255,255,255,.62); transition: color .15s; }
.udb-footer-col a:hover { color: var(--gold); }
.udb-social { display: flex; gap: 9px; margin-top: 1.1rem; }
.udb-social a {
  width: 38px; height: 38px; border-radius: 8px;
  background: rgba(255,255,255,.09); border: 2px solid rgba(255,255,255,.14);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.75); transition: all .15s;
}
.udb-social a:hover { background: var(--gold); border-color: var(--gold); color: #241300; transform: translateY(-2px); }
.udb-social svg { width: 1.15rem; height: 1.15rem; }
.udb-partnerbox {
  margin-top: 1.2rem; padding: 15px 16px;
  background: rgba(255,255,255,.07); border: 2px solid rgba(255,255,255,.14);
  border-radius: var(--radius);
}
.udb-partnerbox .lbl {
  font-family: 'Anton', sans-serif; font-size: .6rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold); margin-bottom: .6rem;
}
.udb-partnerbox img { max-width: 170px; filter: brightness(0) invert(1); }

/* Partnerreihe über der Fußzeile: Präsentator, Mobilität, Herausgeber.
   Keine Kästen, nur eine offene Reihe mit dünnen Trennern. Alle Logos
   werden auf Weiß gezogen, damit sie als eine Gruppe wirken. */
.udb-partnerreihe {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 20px 44px; margin-bottom: 34px;
}
.udb-partner {
  display: flex; align-items: center; gap: 16px;
  padding-left: 44px; border-left: 1px solid rgba(255,255,255,.16);
}
.udb-partner:first-child { padding-left: 0; border-left: 0; }
.udb-partner .lbl {
  font-family: 'Anton', sans-serif; font-size: .58rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold);
  max-width: 84px; line-height: 1.3;
}
.udb-partner img {
  max-width: 148px; max-height: 38px; width: auto;
  object-fit: contain; object-position: left center;
  filter: brightness(0) invert(1); opacity: .88;
  transition: opacity .15s ease;
}
.udb-partner a:hover img { opacity: 1; }
.udb-partner .fallback {
  font-family: 'Anton', sans-serif; font-size: .95rem;
  color: rgba(255,255,255,.82); line-height: 1.15;
}
.udb-footer-bottom {
  border-top: 2px solid rgba(255,255,255,.12); padding-top: 22px;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 14px;
}
.udb-footer-bottom span { font-size: .76rem; color: rgba(255,255,255,.45); }
.udb-footer-legal { display: flex; gap: 18px; flex-wrap: wrap; }
.udb-footer-legal a { font-size: .76rem; color: rgba(255,255,255,.55); }
.udb-footer-legal a:hover { color: var(--gold); }

/* ============================================================ ICONS */
.icon { display: inline-block; width: 1em; height: 1em; stroke: currentColor; fill: none; vertical-align: -.15em; }

/* ============================================================ RECHTSSEITEN */
.rechts-wrap { max-width: 860px; margin: 0 auto; padding: 0 24px 90px; }
.rechts-kopf {
  background: var(--tuerkis-nacht); color: #fff;
  border-radius: var(--radius-lg); padding: 44px 42px;
  margin-top: 44px; box-shadow: var(--schatten-tief);
  position: relative; overflow: hidden;
}
.rechts-kopf::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--punkte-hell); background-size: 15px 15px;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 88% 15%, #000 0%, transparent 72%);
          mask-image: radial-gradient(ellipse 60% 70% at 88% 15%, #000 0%, transparent 72%);
}
.rechts-kopf > * { position: relative; z-index: 1; }
.rechts-kopf p { color: rgba(255,255,255,.75); margin-top: .8rem; font-size: .98rem; }
.rechts-block {
  background: #fff; border-radius: var(--radius-lg);
  padding: 32px 38px; margin-top: 22px;
  box-shadow: var(--schatten); border-left: 6px solid var(--gold);
}
.rechts-block:nth-of-type(even) { border-left-color: var(--tuerkis-tief); }
.rechts-block h2 {
  font-family: 'Anton', sans-serif; font-weight: 400; text-transform: uppercase;
  font-size: 1.2rem; color: var(--dunkel); margin-bottom: .9rem; line-height: 1.15;
}
.rechts-block h3 { font-size: .98rem; color: var(--dunkel); margin: 1.3rem 0 .5rem; font-weight: 700; }
.rechts-block p { font-size: .94rem; margin-bottom: .8rem; line-height: 1.7; }
.rechts-block p:last-child { margin-bottom: 0; }
.rechts-block ul { margin: 0 0 .8rem 0; }
.rechts-block ul li { font-size: .94rem; padding-left: 20px; position: relative; margin-bottom: .45rem; }
.rechts-block ul li::before {
  content: ''; position: absolute; left: 0; top: .6em;
  width: 8px; height: 8px; background: var(--tuerkis-tief); transform: rotate(45deg);
}
.rechts-block a { color: var(--beere); font-weight: 600; border-bottom: 2px solid var(--gold); }
.rechts-block strong { color: var(--dunkel); }
.kontaktbox {
  border: 2px dashed var(--creme-rand); border-radius: var(--radius);
  padding: 20px 22px; margin: 14px 0; font-size: .94rem; background: var(--creme);
}
.kontaktbox div { margin-bottom: 4px; }
.tabelle { width: 100%; border-collapse: collapse; font-size: .88rem; }
.tabelle th {
  text-align: left; font-family: 'Anton', sans-serif; font-weight: 400;
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--dunkel); padding: 10px 12px; border-bottom: 3px solid var(--gold);
}
.tabelle td { padding: 12px; border-bottom: 1px solid var(--creme-rand); vertical-align: top; }
.tabelle tr:last-child td { border-bottom: none; }

/* ============================================================ RESPONSIVE */
@media (max-width: 1024px) {
  .karten--4 { grid-template-columns: repeat(2, 1fr); }
  .karten--3 { grid-template-columns: repeat(2, 1fr); }
  .udb-nav { padding-left: 18px; gap: .9rem; }
  .udb-nav-links { gap: 0; }
  .udb-nav-links > li > a { font-size: .65rem; letter-spacing: .05em; padding: 9px 9px; }
  .udb-nav-logo .site-name { font-size: 1.14rem; }
  .udb-nav-logo .site-claim { font-size: .48rem; letter-spacing: .18em; }
  .udb-nav-cta { padding: 10px 14px 8px; font-size: .66rem; gap: 6px; }
}
@media (max-width: 900px) {
  .zahlen { grid-template-columns: 1fr; }
  .kette { flex-direction: column; align-items: stretch; }
  .kette-glied { flex-direction: row; align-items: center; text-align: left; gap: 14px; padding: 10px 0; }
  .kette-nr { margin-bottom: 0; }
  .kette-pfeil { transform: none; justify-content: flex-start; padding-left: 12px; flex-basis: auto; height: 14px; }
  .kette-pfeil span { display: none; }
  .kette-pfeil::before { content: '↓'; }
}
@media (max-width: 860px) {
  :root { --partnerleiste-h: 46px; }
  .udb-partnerleiste-inner { gap: 14px; }
  .udb-partnerleiste .lbl { font-size: .78rem; letter-spacing: .16em; }
  .udb-partnerleiste .strich { width: 30px; height: 2px; }
  .udb-partnerleiste img { height: 28px; }
  .udb-partnerleiste .fallback { font-size: 1.2rem; }
  .udb-burger { display: flex; }
  .udb-nav {
    width: min(var(--raster), calc(100% - 36px)); max-width: none;
    height: 58px; padding: 0 8px 0 18px; justify-content: space-between;
  }
  /* Das Menü klappt als eigene abgerundete Tafel unter der Leiste auf */
  .udb-nav-links {
    position: absolute; top: calc(100% + 10px); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border: 2px solid rgba(20,20,30,.07); border-radius: 22px;
    padding: 10px 20px 16px; display: none;
    box-shadow: 0 18px 34px rgba(20,20,30,.18);
  }
  .udb-nav-links.offen { display: flex; }
  .udb-nav-links > li > a { display: block; font-size: .84rem; padding: 13px 4px; border-radius: 0; border-bottom: 1px solid var(--creme-rand); }
  .udb-nav-links > li:last-child > a { border-bottom: none; }
  .udb-nav-pille { display: none; }
  /* Das Untermenü steht im Mobilmenü offen und eingerückt darunter */
  .udb-hat-unter { position: static; }
  .udb-unter-schalter .pfeil { display: none; }
  .udb-unter {
    position: static; transform: none; padding-top: 0;
    opacity: 1; visibility: visible;
  }
  .udb-unter ul {
    min-width: 0; padding: 4px 0 10px 16px; gap: 0;
    background: none; border: 0; border-radius: 0; box-shadow: none;
    border-bottom: 1px solid var(--creme-rand);
  }
  .udb-unter a { font-size: .74rem; padding: 10px 6px; border-radius: 8px; }
  /* Auf schmalen Geräten steht der Kopf nicht mehr auf dem Bild, also wieder dunkle Schrift */
  body.udb-home header.udb-header:not(.gescrollt) .udb-nav {
    background: rgba(255,255,255,.94); border-color: rgba(20,20,30,.07);
    box-shadow: 0 10px 26px rgba(20,20,30,.16);
  }
  body.udb-home header.udb-header:not(.gescrollt) .udb-nav-links > li > a,
  body.udb-home header.udb-header:not(.gescrollt) .udb-nav-logo .site-name { color: var(--dunkel); }
  body.udb-home header.udb-header:not(.gescrollt) .udb-nav-links > li > a.active { color: var(--beere); }
  body.udb-home header.udb-header:not(.gescrollt) .udb-nav-logo .site-claim { color: var(--beere); }
  body.udb-home header.udb-header:not(.gescrollt) .udb-burger span { background: var(--dunkel); }
  body.udb-home header.udb-header:not(.gescrollt) .udb-nav-cta { background: var(--beere); color: #fff; }
  body.udb-home header.udb-header:not(.gescrollt) .udb-nav-cta .play { background: rgba(255,255,255,.22); }
  body.udb-home header.udb-header:not(.gescrollt) .udb-nav-links > li.nur-mobil > a { color: var(--beere); }
  .karten--2, .karten--3, .karten--4 { grid-template-columns: 1fr; }
  .band { padding: 58px 0; }
  .band--schmal { padding: 40px 0; }
  .udb-footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
  .udb-partnerreihe { gap: 18px 30px; }
  .udb-partner { padding-left: 30px; }
}
@media (max-width: 600px) {
  .udb-nav-cta { display: none; }
  .udb-nav-links li.nur-mobil { display: block; }
  .udb-nav-links li.nur-mobil a { color: var(--beere); }
  .udb-nav-logo .site-name { font-size: 1.16rem; }
}
@media (max-width: 640px) {
  :root { --partnerleiste-h: 40px; }
  .container, .udb-nav, .udb-footer-inner { padding-left: 20px; padding-right: 20px; }
  .udb-partnerleiste-inner { padding-left: 20px; padding-right: 20px; gap: 11px; }
  .udb-partnerleiste .lbl { font-size: .66rem; letter-spacing: .14em; }
  .udb-partnerleiste .strich { width: 22px; }
  .udb-partnerleiste img { height: 24px; }
  .udb-partnerleiste .fallback { font-size: 1rem; }
  .rechts-wrap { padding-left: 16px; padding-right: 16px; }
  .rechts-kopf { padding: 30px 24px; margin-top: 28px; }
  .rechts-block { padding: 26px 24px; }
  .udb-footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .udb-partnerreihe { flex-direction: column; align-items: center; gap: 16px; }
  .udb-partner { padding-left: 0; border-left: 0; }
  /* Feste Labelbreite, damit die Logos untereinander bündig stehen */
  .udb-partner .lbl { width: 92px; max-width: none; flex-shrink: 0; }
  .stufe { grid-template-columns: 42px 1fr; gap: 14px; }
  .stufe-nr { width: 42px; height: 42px; font-size: 1.1rem; }
  .btn { padding: 12px 20px 10px; font-size: .78rem; }
  .btn-row { gap: .7rem; }
  .notiz { padding: 16px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ============================================================ FOLGT-UNS-TAFEL
   Ein großer Aufkleber über dem Footer: dunkle Fläche, drehendes Riesenrad,
   Lichterkette, Wortmarke, Knöpfe zu Instagram, TikTok und den Podcast-Apps.
   Markup siehe index-vorschau.html, Abschnitt #folgt.
   ========================================================================== */
.tafel {
  position: relative; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(ellipse 90% 120% at 88% 20%, rgba(14,156,138,.55), transparent 62%),
    linear-gradient(135deg, var(--tuerkis-nacht) 0%, #10393a 52%, var(--dunkel-tief) 100%);
  border: 9px solid #fff;
  border-radius: 22px;
  box-shadow: 10px 12px 0 rgba(20,20,30,.22);
  transform: rotate(-1.2deg);
  padding: clamp(34px, 4.4vw, 58px) clamp(24px, 4.4vw, 60px) clamp(30px, 4vw, 50px);
  color: #fff;
}
.tafel::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: var(--punkte-hell); background-size: 15px 15px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 12% 90%, #000 0%, transparent 72%);
          mask-image: radial-gradient(ellipse 80% 70% at 12% 90%, #000 0%, transparent 72%);
}
.tafel > * { position: relative; z-index: 2; }

/* Riesenrad, sitzt angeschnitten in der rechten Hälfte */
.tafel-rad {
  position: absolute; z-index: 1; pointer-events: none;
  right: clamp(-90px, -4vw, -30px); top: 50%;
  width: clamp(300px, 34vw, 460px); height: auto;
  transform: translateY(-50%);
  color: var(--gold-warm); opacity: .34;
}
.tafel-rad .felge  { fill: none; stroke: currentColor; stroke-width: 3; }
.tafel-rad .felge2 { fill: none; stroke: currentColor; stroke-width: 1.4; opacity: .55; }
.tafel-rad .speichen line { stroke: currentColor; stroke-width: 1.8; opacity: .8; }
.tafel-rad .gondeln circle { fill: none; stroke: currentColor; stroke-width: 2.6; }
.tafel-rad .nabe { fill: currentColor; }
.tafel-rad .streben { fill: none; stroke: currentColor; stroke-width: 3.4; }
.tafel-rad .rad-dreh { transform-origin: 100px 100px; animation: tafel-rad-dreht 22s linear infinite; }
@keyframes tafel-rad-dreht { to { transform: rotate(360deg); } }

/* Lichterkette am oberen Rand */
.tafel-kette {
  position: absolute; z-index: 1; pointer-events: none;
  left: -10px; right: -10px; top: 0; height: 26px;
  display: flex; justify-content: space-between; align-items: flex-start;
}
.tafel-kette i {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--gold-warm);
  box-shadow: 0 0 10px 3px rgba(247,179,102,.55);
  margin-top: 9px;
  animation: tafel-birne 7s ease-in-out infinite;
}
.tafel-kette i:nth-child(even) { margin-top: 15px; background: var(--tuerkis); box-shadow: 0 0 10px 3px rgba(124,243,230,.45); }
.tafel-kette i:nth-child(3n)   { animation-delay: 2.4s; }
.tafel-kette i:nth-child(4n)   { animation-delay: 4.1s; }
@keyframes tafel-birne { 0%, 92%, 100% { opacity: 1; } 94% { opacity: .25; } 96% { opacity: 1; } 98% { opacity: .4; } }

/* Inhalt */
.tafel-inner { max-width: 660px; }
.tafel .sticker { margin-bottom: 1.5rem; }
.tafel-wortmarke { width: clamp(190px, 22vw, 275px); margin-bottom: 1.4rem; }
.tafel-titel {
  font-family: 'Anton', sans-serif; line-height: 1.02;
  font-size: clamp(2rem, 4.6vw, 3.1rem);
  text-transform: uppercase; letter-spacing: .01em;
}
.tafel-titel b { color: var(--gold); font-weight: inherit; }
.tafel-text { margin-top: 1rem; font-size: 1.02rem; color: rgba(255,255,255,.86); max-width: 46ch; }
.tafel-handle {
  display: block; font-family: 'Inter', sans-serif; font-size: .68rem;
  letter-spacing: .1em; opacity: .72; text-transform: none; margin-top: 2px;
}
.tafel .btn-row { margin-top: 1.9rem; }
.tafel .btn { padding: 15px 28px 13px; font-size: .92rem; align-items: flex-start; }
.tafel .btn .icon { width: 1.35em; height: 1.35em; margin-top: 1px; }

/* Zeile mit den Podcast-Apps */
.tafel-apps {
  margin-top: 2.1rem; padding-top: 1.5rem;
  border-top: 2px dashed rgba(255,255,255,.28);
  display: flex; align-items: center; gap: 1rem 1.4rem; flex-wrap: wrap;
}
.tafel-apps-lbl {
  flex-basis: 100%;
  font-family: 'Anton', sans-serif; font-size: .74rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--gold);
}
.tafel-app {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: 'Anton', sans-serif; font-size: .78rem;
  letter-spacing: .07em; text-transform: uppercase;
  padding: 8px 14px 7px; border-radius: 6px;
  border: 2px solid rgba(255,255,255,.42); color: #fff;
  transition: background .15s, border-color .15s, transform .15s;
}
.tafel-app .icon { width: 1.15em; height: 1.15em; }
.tafel-app:hover { background: #fff; border-color: #fff; color: var(--tuerkis-nacht); transform: translateY(-2px); }

@media (max-width: 860px) {
  .tafel-rad { opacity: .16; right: -110px; width: 340px; }
  .tafel-inner { max-width: none; }
}
@media (max-width: 640px) {
  .tafel { border-width: 7px; border-radius: 16px; transform: rotate(-.8deg); box-shadow: 7px 8px 0 rgba(20,20,30,.22); }
  .tafel .btn-row { gap: .6rem; }
  .tafel .btn { width: 100%; justify-content: center; }
  .tafel-apps { gap: .6rem .8rem; }
}