/* =====================================================================
   FUSS · gilt für Startseite und Unterseiten (partials/footer.html)
   Liegt auf dem dunklen Tisch unter dem Blatt. Farben und Schriften kommen aus
   notizbuch.css (Startseite) beziehungsweise seiten.css (Unterseiten).
   ===================================================================== */

/* ---------- Der orange Punkt (gilt auf allen Seiten, Startseite und Unterseiten laden diese Datei) ----------
   Eine feste Größe für jeden orangen Punkt: Logo in Kopf und Fuß, Aufzählungen, Leiste, Crew, Finale,
   fliegender Punkt. Der Punkt wird nie skaliert, er bewegt sich höchstens und erscheint per Deckkraft.
   5 px entspricht dem Verhältnis im Logo (Kreis 26 von 994 Einheiten) bei --logo-breite (191 px),
   der Breite des Logos im Kopf am Desktop und im Fuß. Die Wortmarke hat keinen eigenen Kreis,
   .logo-punkt sitzt an der Stelle des Kreises vor dem „d“ (cx 33, cy 55,3 im viewBox 994 × 192). */
:root { --punkt-groesse: var(--db-punkt); --logo-breite: var(--db-logo-breite); } /* 9 px und 191 px aus designsystem/tokens.css. Punkt bewusst groesser als im Original-Logo (Wunsch Mathias, 07.10.2026), ueberall gleich gross */
.logo-anker { position: relative; }
.logo-anker > svg, .logo-anker > img { display: block; }
.logo-punkt {
  position: absolute; left: 3.32%; top: 28.82%; z-index: 1;
  width: var(--punkt-groesse); height: var(--punkt-groesse);
  margin: calc(var(--punkt-groesse) / -2) 0 0 calc(var(--punkt-groesse) / -2);
  border-radius: 50%; background: var(--filz); pointer-events: none;
}
@media (forced-colors: active) { .logo-punkt { background: CanvasText; } }

/* ---------- Externe Links (alle Seiten, setzt build.mjs) ----------
   Gezeichneter Pfeil aus dem Kasten in Linkfarbe, hängt am letzten Wort und bricht nie allein in die nächste Zeile. */
.extern-nb { white-space: nowrap; }
.extern-zeichen {
  display: inline-block; width: 0.74em; height: 0.74em; margin-left: 0.2em; vertical-align: -0.04em; overflow: visible;
  fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}

.fuss {
  max-width: 1180px; margin: 0 auto; padding: 64px 22px 84px;
  color: var(--db-tisch-text); font-family: var(--text); font-size: 0.95rem; line-height: 1.55;
}
@media (min-width: 760px) { .fuss { padding: 76px 48px 104px; } }
.fuss p { margin: 0; }
.fuss a { color: var(--db-hell); text-decoration-color: rgba(247, 244, 238, 0.45); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.fuss a:hover { text-decoration-color: var(--filz); text-decoration-thickness: 2.5px; }
.fuss :focus-visible { outline: 3px solid var(--gelb); outline-offset: 3px; }
.fuss .bewegung-knopf:focus-visible { outline-offset: 4px; }

.fuss__raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px 44px; align-items: start; }
@media (min-width: 760px) {
  .fuss__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fuss__marke, .fuss__nav { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
  .fuss__raster { grid-template-columns: minmax(0, 1.15fr) minmax(0, 2.5fr) minmax(0, 0.95fr); }
  .fuss__marke, .fuss__nav { grid-column: auto; }
}

.fuss__marke { display: grid; gap: 14px; justify-items: start; }
.fuss__logo { display: block; width: var(--logo-breite); line-height: 0; border-radius: 4px; }
/* unter 760 px genau so groß wie im Kopf (--db-logo-breite-schmal), der Punkt bleibt bei --punkt-groesse */
@media (max-width: 759px) { .fuss__logo { width: var(--db-logo-breite-schmal); } }
.fuss__logo .logo { width: 100%; height: auto; overflow: visible; }
.fuss__satz { max-width: 30em; }
.fuss__crew { max-width: 30em; color: var(--db-hell); }
.fuss__crew a { font-weight: 700; }

.fuss__titel { margin: 0 0 8px !important; font-family: var(--hand); font-size: 1.55rem; font-weight: 700; line-height: 1; color: var(--filz-hell); rotate: -1.5deg; transform-origin: 0 50%; }
.fuss__nav { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px 32px; }
@media (min-width: 560px) { .fuss__nav { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fuss__nav ul { list-style: none; margin: 0; padding: 0; }
.fuss__nav li { margin: 0; }
.fuss__nav a { display: inline-block; padding: 6px 0; line-height: 1.35; }
.fuss__nav a[aria-current='page'] { text-decoration-color: var(--filz); text-decoration-thickness: 3px; font-weight: 700; }

.fuss__kontakt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; font-style: normal; }
.fuss__kontakt a { display: inline-block; padding: 6px 0; }
.fuss__kontakt span { padding: 6px 0; color: var(--db-tisch-leise); }

.fuss__sticker { display: flex; align-items: center; gap: 12px; margin: 6px 0 0; rotate: -3deg; }
.fuss__sticker[hidden] { display: none; }
.fuss__sticker svg { width: 40px; height: 66px; flex: none; }
.fuss__sticker .hand { font-size: 1.35rem; color: var(--filz-hell); font-weight: 700; line-height: 1.1; }

.fuss__pause { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 46px; padding-top: 26px; border-top: 1px solid rgba(233, 228, 218, 0.22); }
.fuss__notiz { font-family: var(--hand); font-size: 1.35rem; font-weight: 600; line-height: 1.12; color: var(--filz-hell); max-width: 24em; rotate: -1.5deg; }
.fuss__hinweis { margin-top: 26px !important; max-width: 48em; font-size: 0.88rem; color: var(--db-tisch-leise); }
.fuss__recht { margin-top: 10px !important; font-size: 0.88rem; color: var(--db-tisch-leise); }
.fuss__recht a { display: inline-block; padding: 8px 0; }
.fuss__zeile + .fuss__zeile { white-space: nowrap; }
.fuss__zeile + .fuss__zeile::before { content: '· '; content: '· ' / ''; }
@media (max-width: 479px) { .fuss__zeile { display: block; } .fuss__zeile + .fuss__zeile::before { content: none; } }

.bewegung-aus .fuss__titel, .bewegung-aus .fuss__notiz, .bewegung-aus .fuss__sticker { rotate: none; }
@media print { .fuss { display: none; } }