/* =============================================================================
   mariusworch.de — Stylesheet für alle Seiten (Start, Termin-Verwaltung, Recht)
   Alte Marke: Blau #365CD6 + Nachtblau-Flächen (wie „Die letzte Runde"), Systemschriften
   — bewusst keine Webfonts (schnell, keine Drittanbieter-Verbindung).
   ============================================================================= */
:root {
  --blau: #365cd6;
  --blau-tief: #2a49ae;
  --blau-hell: #9db4f5;
  --blau-nebel: #eef2ff;
  --blau-nebel-2: #e1e8fd;
  --nacht: #0c1430;
  --nacht-2: #101b3e;
  --nacht-glanz: #1d2f6b;
  --papier: #f8f9fc;
  --karte: #ffffff;
  --tinte: #161a24;
  --grau: #68708a;
  --linie: #e6e9f2;
  --dunkel-text: #eef1f9;
  --dunkel-grau: #a3adcc;
  --radius: 10px;
  --radius-gross: 22px;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --schatten-karte: 0 1px 2px rgba(12, 20, 48, .04), 0 24px 70px rgba(12, 20, 48, .13);
  --schrift: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --schrift-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--schrift);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blau); }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--blau); outline-offset: 3px; border-radius: 4px; }

.mw-wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding-inline: 24px; }

/* ---------- Kopf ---------- */
.mw-top { position: relative; z-index: 5; padding-block: 26px; }
.mw-marke {
  display: inline-flex; align-items: center; gap: 11px;
  font-family: var(--schrift-display); font-size: 17px; font-weight: 700; letter-spacing: -.01em;
  color: var(--tinte); text-decoration: none;
}
.mw-marke::before {
  content: ""; width: 9px; height: 9px; border-radius: 2px; background: var(--blau);
  box-shadow: 0 0 0 4px rgba(54, 92, 214, .16);
}
.mw-hero .mw-marke { color: #fff; }
.mw-hero .mw-marke::before { background: var(--blau-hell); box-shadow: 0 0 0 4px rgba(157, 180, 245, .16); }
.mw-marke-foto { display: none; width: 38px; height: 38px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px rgba(157, 180, 245, .35); }

/* ---------- Hero ---------- */
.mw-hero {
  position: relative; overflow: hidden;
  background: radial-gradient(1200px 620px at 78% -180px, var(--nacht-glanz) 0%, var(--nacht-2) 46%, var(--nacht) 100%);
  color: var(--dunkel-text);
  padding-bottom: 150px;
}
.mw-hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(157, 180, 245, .28), transparent);
}
.mw-hero-raster {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: 72px; align-items: center; padding-top: 44px;
}
.mw-eyebrow {
  display: inline-flex; align-items: center; gap: 12px; margin: 0 0 22px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--blau-hell);
}
.mw-eyebrow::after { content: ""; width: 40px; height: 1px; background: linear-gradient(90deg, rgba(157, 180, 245, .6), transparent); }
.mw-hero h1 {
  margin: 0; font-family: var(--schrift-display);
  font-size: clamp(40px, 5.4vw, 60px); line-height: 1.04; font-weight: 800; letter-spacing: -.03em; color: #fff;
}
.mw-hero h1 em {
  font-style: normal;
  background: linear-gradient(100deg, #c3d1fb 0%, #7d9bf2 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--blau-hell);
}
.mw-lead { margin: 26px 0 0; max-width: 540px; font-size: clamp(18px, 2vw, 20px); line-height: 1.6; color: var(--dunkel-text); }
.mw-text { margin: 16px 0 0; max-width: 540px; font-size: 16.5px; line-height: 1.7; color: var(--dunkel-grau); }
.mw-fakten { display: flex; flex-wrap: wrap; gap: 10px; margin: 30px 0 0; padding: 0; list-style: none; }
.mw-fakten li {
  display: inline-flex; align-items: center; gap: 9px; padding: 8px 14px 8px 12px;
  border: 1px solid rgba(157, 180, 245, .22); border-radius: 999px; background: rgba(255, 255, 255, .04);
  font-size: 14px; font-weight: 600; color: var(--dunkel-text);
}
.mw-fakten svg { width: 16px; height: 16px; color: var(--blau-hell); flex: 0 0 auto; }
.mw-springen {
  display: none; margin-top: 28px; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 700; color: #fff; text-decoration: none;
}
.mw-springen span { transition: transform .2s var(--ease); }
.mw-springen:hover span { transform: translateY(3px); }

.mw-foto { position: relative; margin: 0; max-width: 420px; justify-self: end; width: 100%; }
.mw-foto::before {
  content: ""; position: absolute; inset: -18px -18px 26px 26px; border-radius: 30px;
  background: linear-gradient(140deg, rgba(54, 92, 214, .55), rgba(54, 92, 214, 0) 62%);
  filter: blur(2px);
}
.mw-foto img {
  position: relative; width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: var(--radius-gross);
  box-shadow: 0 30px 80px rgba(3, 7, 22, .55), 0 0 0 1px rgba(255, 255, 255, .08);
}

/* ---------- Buchungs-Bereich ---------- */
.mw-buchung-bereich { position: relative; z-index: 2; margin-top: -96px; padding-bottom: 72px; }
.mw-karte {
  max-width: 900px; margin: 0 auto; background: var(--karte);
  border: 1px solid var(--linie); border-radius: var(--radius-gross);
  box-shadow: var(--schatten-karte); padding: 32px; scroll-margin-top: 20px;
}
.mw-unter-karte { max-width: 900px; margin: 22px auto 0; text-align: center; font-size: 14.5px; color: var(--grau); }

.ub-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); }
.ub-seite { border-right: 1px solid var(--linie); padding: 4px 28px 4px 2px; }
.ub-portrait { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.ub-seite-name { margin: 14px 0 0; font-size: 13.5px; color: var(--grau); }
.ub-seite-titel { margin: 2px 0 14px; font-family: var(--schrift-display); font-size: 21px; font-weight: 750; letter-spacing: -.015em; color: var(--tinte); }
.ub-meta { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.ub-meta li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--grau); }
.ub-meta svg { width: 17px; height: 17px; color: var(--blau); flex: 0 0 auto; }
.ub-kopfzeile { display: none; }
.ub-summary { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--linie); display: grid; gap: 8px; }
.ub-summary p { margin: 0; display: flex; align-items: baseline; gap: 8px; font-size: 15px; font-weight: 600; color: var(--tinte); font-variant-numeric: tabular-nums; animation: ubRein .24s var(--ease); }
.ub-summary p > span { flex: 1; }
@keyframes ubRein { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.ub-aendern { font: inherit; font-size: 13px; font-weight: 600; color: var(--blau); background: none; border: 0; padding: 0; cursor: pointer; }
.ub-aendern:hover { text-decoration: underline; text-underline-offset: 3px; }
.ub-buehne { padding: 0 0 0 30px; min-width: 0; }
.ub-schritt.rein { animation: ubRein .24s var(--ease); }
.ub-h { margin: 0 0 4px; font-family: var(--schrift-display); font-size: 22px; font-weight: 750; letter-spacing: -.015em; color: var(--tinte); }
.ub-unter { margin: 0 0 6px; font-size: 15px; color: var(--grau); }
.ub-zurueck { display: inline-flex; align-items: center; min-height: 40px; margin-top: -8px; font: inherit; font-size: 14px; color: var(--grau); background: none; border: 0; padding: 0; cursor: pointer; }
.ub-zurueck:hover { color: var(--tinte); }

/* Schritt 1 — Tage */
.ub-tage { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 16px; }
.ub-tagzeile {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 62px; padding: 0 18px 0 20px;
  font: inherit; text-align: left; cursor: pointer;
  background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius);
  transition: background .16s var(--ease), border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.ub-tagzeile:hover:not([disabled]) { background: var(--blau-nebel); border-color: var(--blau-hell); }
.ub-tagzeile:hover:not([disabled]) .ub-chevron { transform: translateX(3px); }
.ub-tagzeile[disabled] { opacity: .45; cursor: default; }
.ub-tag-links { flex: 1; min-width: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.ub-tag-wt { font-size: 16px; font-weight: 650; color: var(--tinte); }
.ub-tag-datum { font-size: 15px; color: var(--grau); }
.ub-chip { align-self: center; padding: 2px 8px; border-radius: 5px; background: var(--blau-nebel-2); color: var(--blau-tief); font-size: 11px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.ub-tag-frei { font-size: 13.5px; color: var(--grau); white-space: nowrap; }
.ub-frei-kurz { display: none; }
.ub-tag-frei.knapp { color: var(--blau-tief); font-weight: 600; }
.ub-chevron { font-size: 20px; line-height: 1; color: var(--blau); transition: transform .16s var(--ease); }
.ub-fuss { margin: 14px 0 0; font-size: 13.5px; color: var(--grau); }
.ub-skelett {
  height: 62px; border-radius: var(--radius);
  background: linear-gradient(90deg, var(--blau-nebel) 25%, #f7f9ff 50%, var(--blau-nebel) 75%);
  background-size: 200% 100%; animation: ubSchimmer 1.4s linear infinite;
}
@keyframes ubSchimmer { to { background-position: -200% 0; } }
.ub-ladefehler { padding: 12px 0; font-size: 15px; color: var(--grau); }
.ub-ladefehler button { font: inherit; font-size: 15px; font-weight: 650; color: var(--blau); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* Schritt 2 — Uhrzeiten */
.ub-gruppe { margin: 18px 0 0; }
.ub-gruppe-label { margin: 0 0 10px; font-size: 12px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; color: var(--grau); }
.ub-slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.ub-slot { display: flex; height: 48px; border-radius: var(--radius); }
.ub-slot-zeit {
  flex: 1; min-width: 0; font: inherit; font-size: 15.5px; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer;
  color: var(--tinte); background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius);
  transition: border-color .16s var(--ease), color .16s var(--ease), background .2s var(--ease);
}
.ub-slot-zeit:hover { border-color: var(--blau); color: var(--blau); }
.ub-slot.gewaehlt .ub-slot-zeit { background: var(--nacht); border-color: var(--nacht); color: #fff; border-radius: var(--radius) 0 0 var(--radius); }
.ub-slot-weiter {
  display: none; padding: 0 14px; font: inherit; font-size: 15px; font-weight: 700; color: #fff; cursor: pointer;
  background: var(--blau); border: 0; border-radius: 0 var(--radius) var(--radius) 0; transition: background .16s var(--ease);
}
.ub-slot.gewaehlt .ub-slot-weiter { display: block; }
.ub-slot-weiter:hover { background: var(--blau-tief); }
.ub-anderer-tag { display: inline-flex; align-items: center; min-height: 44px; margin-top: 12px; font: inherit; font-size: 14.5px; font-weight: 650; color: var(--blau); background: none; border: 0; padding: 0; cursor: pointer; }
.ub-anderer-tag:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Schritt 3 — Formular */
.ub-mobilsum { display: none; }
.ub-form { max-width: 540px; margin-top: 12px; }
.ub-feld { margin-bottom: 16px; }
.ub-feld > label { display: block; font-size: 14.5px; font-weight: 650; color: var(--tinte); }
.ub-sub { display: block; margin-top: 2px; font-size: 13.5px; font-weight: 400; color: var(--grau); }
.ub-feld input, .ub-feld textarea {
  display: block; width: 100%; margin-top: 7px; padding: 13px 15px;
  font: inherit; font-size: 16px; color: var(--tinte);
  background: var(--karte); border: 1px solid #d9deeb; border-radius: var(--radius);
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.ub-feld textarea { min-height: 104px; resize: vertical; }
.ub-feld input::placeholder, .ub-feld textarea::placeholder { color: #9aa1b5; }
.ub-feld input:focus, .ub-feld textarea:focus { outline: none; border-color: var(--blau); box-shadow: 0 0 0 4px rgba(54, 92, 214, .14); }
.ub-feld.fehlt input, .ub-feld.fehlt textarea { border-color: #c2410c; }
.ub-feldfehler { margin: 6px 0 0; font-size: 13.5px; font-weight: 550; color: #b4410f; }
.ub-feldfehler button { font: inherit; font-weight: 700; color: var(--blau); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
#ub-website { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.ub-panel { margin: 0 0 14px; padding: 14px 16px; border-radius: var(--radius); background: var(--blau-nebel); color: var(--nacht-2); font-size: 14.5px; font-weight: 550; }
.ub-panel button { display: inline-block; margin-top: 10px; padding: 9px 16px; font: inherit; font-size: 14px; font-weight: 700; color: #fff; background: var(--blau); border: 0; border-radius: 8px; cursor: pointer; }
.ub-panel button:hover { background: var(--blau-tief); }

.mw-knopf {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 56px; padding: 0 22px;
  font: inherit; font-size: 17px; font-weight: 700; color: #fff; text-decoration: none; cursor: pointer;
  background: var(--blau); border: 0; border-radius: 12px;
  box-shadow: 0 12px 30px rgba(38, 66, 166, .28), inset 0 1px 0 rgba(255, 255, 255, .16);
  transition: background .16s var(--ease), transform .16s var(--ease), box-shadow .16s var(--ease);
}
.mw-knopf:hover { background: var(--blau-tief); transform: translateY(-1px); box-shadow: 0 16px 36px rgba(38, 66, 166, .34), inset 0 1px 0 rgba(255, 255, 255, .16); color: #fff; }
.mw-knopf[disabled] { background: var(--blau-tief); transform: none; cursor: default; }
.mw-knopf .ub-spinner { display: none; }
.mw-knopf[disabled] .ub-spinner {
  display: inline-block; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .3); border-top-color: #fff; animation: ubDreh 1.1s linear infinite;
}
@keyframes ubDreh { to { transform: rotate(360deg); } }
.mw-knopf-leise {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px; width: 100%; min-height: 50px; padding: 0 18px;
  font: inherit; font-size: 15.5px; font-weight: 650; color: var(--tinte); text-decoration: none; cursor: pointer;
  background: var(--karte); border: 1px solid #d9deeb; border-radius: 12px;
  transition: border-color .16s var(--ease), color .16s var(--ease);
}
.mw-knopf-leise:hover { border-color: var(--blau); color: var(--blau); }
.mw-knopf-leise svg { width: 18px; height: 18px; }
.ub-bestaetigung { margin: 12px 0 0; text-align: center; font-size: 13.5px; color: var(--grau); }

/* Schritt 4 — gebucht */
.ub-fertig { text-align: left; }
.ub-haken {
  display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 18px; border-radius: 50%;
  background: var(--blau-nebel); color: var(--blau);
}
.ub-haken svg { width: 26px; height: 26px; }
.ub-termin-box {
  margin: 18px 0; padding: 18px 20px; border-radius: 14px; background: var(--nacht); color: #fff;
  font-variant-numeric: tabular-nums;
}
.ub-termin-box strong { display: block; font-family: var(--schrift-display); font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.ub-termin-box span { display: block; margin-top: 2px; font-size: 14px; color: var(--dunkel-grau); }
.ub-aktionen { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.ub-fertig p { margin: 10px 0 0; color: var(--grau); font-size: 15.5px; }
.ub-fertig p strong { color: var(--tinte); }
.ub-gruss { margin-top: 22px !important; color: var(--tinte) !important; font-weight: 600; }

/* ---------- Fuß ---------- */
.mw-fuss { border-top: 1px solid var(--linie); padding-block: 26px 34px; font-size: 14px; color: var(--grau); }
.mw-fuss .mw-wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; }
.mw-fuss nav { display: flex; gap: 22px; }
.mw-fuss a { color: var(--grau); text-decoration: none; }
.mw-fuss a:hover { color: var(--tinte); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Rechtstexte & Verwaltung (helle Lese-Seiten) ---------- */
.mw-legal .mw-top, .mw-schlicht .mw-top { border-bottom: 1px solid var(--linie); background: var(--karte); padding-block: 20px; }
.mw-lesen { max-width: 760px; padding-block: 56px 80px; }
.mw-lesen .mw-eyebrow { color: var(--blau); }
.mw-lesen .mw-eyebrow::after { background: linear-gradient(90deg, rgba(54, 92, 214, .5), transparent); }
.mw-lesen h1 { margin: 0; font-family: var(--schrift-display); font-size: clamp(34px, 5vw, 44px); line-height: 1.1; font-weight: 800; letter-spacing: -.025em; }
.mw-lesen h2 { margin: 44px 0 10px; font-family: var(--schrift-display); font-size: 23px; line-height: 1.25; font-weight: 750; letter-spacing: -.01em; scroll-margin-top: 20px; }
.mw-lesen h3 { margin: 26px 0 6px; font-size: 17.5px; font-weight: 700; }
.mw-lesen p, .mw-lesen li, .mw-lesen address { font-size: 16.5px; line-height: 1.75; color: #33394a; }
.mw-lesen p { margin: 0 0 12px; }
.mw-lesen ul, .mw-lesen ol { margin: 0 0 14px; padding-left: 22px; }
.mw-lesen address { font-style: normal; margin: 0 0 14px; }
.mw-stand { margin-top: 10px !important; font-size: 14px !important; color: var(--grau) !important; }
.mw-lesen .mw-inhalt { margin: 30px 0 0; padding: 20px 24px; border: 1px solid var(--linie); border-radius: 14px; background: var(--karte); }
.mw-lesen .mw-inhalt ol, .mw-lesen .mw-inhalt ul { margin: 0; }
.mw-lesen .mw-inhalt a { text-decoration: none; }
.mw-lesen .mw-inhalt a:hover { text-decoration: underline; }

.mw-verwaltung { max-width: 560px; padding-block: 56px 80px; }
.mw-verwaltung .mw-karte { padding: 32px; }
.mw-verwaltung .ub-h { font-size: 26px; }
.mw-verwaltung p { color: var(--grau); font-size: 15.5px; margin: 10px 0 0; }
.mw-verwaltung .mw-knopf, .mw-verwaltung .mw-knopf-leise { margin-top: 12px; }
.mw-leise-link { display: inline-block; margin-top: 16px; font: inherit; font-size: 14.5px; color: var(--grau); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.mw-tagwahl { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 16px; }
.mw-tagwahl button {
  padding: 8px 14px; font: inherit; font-size: 14px; font-weight: 650; cursor: pointer;
  color: var(--tinte); background: var(--karte); border: 1px solid #d9deeb; border-radius: 999px;
}
.mw-tagwahl button[aria-pressed="true"] { color: #fff; background: var(--nacht); border-color: var(--nacht); }
.mw-zeitwahl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mw-zeitwahl button {
  height: 46px; font: inherit; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer;
  color: var(--tinte); background: var(--karte); border: 1px solid #d9deeb; border-radius: var(--radius);
}
.mw-zeitwahl button:hover:not([disabled]) { border-color: var(--blau); color: var(--blau); }
.mw-meldung { margin-top: 12px !important; padding: 12px 14px; border-radius: var(--radius); background: var(--blau-nebel); color: var(--nacht-2) !important; font-weight: 550; }

/* ---------- Mobil ---------- */
@media (max-width: 900px) {
  .mw-hero-raster { grid-template-columns: 1fr; gap: 0; padding-top: 18px; }
  .mw-foto { display: none; }
  .mw-hero .mw-marke::before { display: none; }
  .mw-marke-foto { display: block; }
  .mw-springen { display: inline-flex; }
}
@media (max-width: 767px) {
  body { font-size: 16.5px; }
  .mw-wrap { padding-inline: 18px; }
  .mw-top { padding-block: 20px; }
  .mw-hero { padding-bottom: 104px; }
  .mw-eyebrow { font-size: 11.5px; letter-spacing: .16em; margin-bottom: 16px; }
  .mw-lead { margin-top: 18px; }
  .mw-fakten { margin-top: 24px; gap: 8px; }
  .mw-fakten li { font-size: 13.5px; padding: 7px 12px 7px 10px; }
  .mw-buchung-bereich { margin-top: -64px; padding-bottom: 48px; }
  .mw-karte { padding: 20px 18px 24px; border-radius: 18px; }
  .ub-layout { display: block; }
  .ub-seite { border-right: 0; padding: 0; }
  .ub-portrait, .ub-seite-name, .ub-seite-titel, .ub-meta, .ub-summary { display: none; }
  .ub-kopfzeile { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--linie); font-size: 13.5px; color: var(--grau); }
  .ub-kopfzeile img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
  .ub-kopfzeile strong { display: block; color: var(--tinte); font-weight: 650; font-size: 15px; line-height: 1.3; }
  .ub-kopfzeile span { line-height: 1.35; }
  .ub-frei-lang { display: none; }
  .ub-frei-kurz { display: inline; }
  .ub-buehne { padding-left: 0; }
  .ub-h { font-size: 20px; }
  .ub-tagzeile { min-height: 60px; gap: 8px; padding: 10px 12px 10px 16px; }
  .ub-skelett { height: 60px; }
  .ub-tag-links { display: grid; grid-template-columns: auto auto 1fr; align-items: center; column-gap: 8px; row-gap: 1px; }
  .ub-chip { justify-self: start; }
  .ub-tag-datum { grid-column: 1 / -1; order: 3; }
  .ub-slots { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .ub-slot.gewaehlt { grid-column: 1 / -1; }
  .ub-mobilsum {
    position: sticky; top: 8px; z-index: 3; display: flex; align-items: center; gap: 8px; margin: 10px 0 4px; padding: 10px 14px;
    border-radius: var(--radius); background: var(--blau-nebel); font-size: 14px; font-weight: 600; color: var(--tinte); font-variant-numeric: tabular-nums;
  }
  .ub-mobilsum > span { flex: 1; }
  .ub-aktionen { grid-template-columns: 1fr; }
  .mw-fuss .mw-wrap { flex-direction: column; align-items: flex-start; }
  .mw-lesen { padding-block: 38px 60px; }
  .mw-verwaltung { padding-block: 32px 56px; }
  .mw-verwaltung .mw-karte { padding: 24px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}