/* Magic UI (magicui.design) - Komponenten als Vanilla-CSS portiert, da die Seite kein
   React/Tailwind/Build-Step hat. Animationen und Keyframes entsprechen den Originalen
   (Marquee, Border Beam, Shimmer Button, Magic Card, Number Ticker, Aurora Text,
   Dot Pattern, Blur Fade), Farben auf die Terracotta/Creme-Palette aus style.css
   abgestimmt. Interaktive Teile (Ticker, Magic-Card-Cursor, Blur Fade beim Scrollen)
   in public/js/magic-ui.js. Im Einsatz auf Startseite, Ranking (inkl. /ranking/:key),
   Karte, Ueber mich und Kontakt - bewusst nicht in Login-/Account-/Admin-Bereichen. */

:root {
  --mu-gold: #f2a65a;
  --mu-rose: #e8829c;
  --mu-dot: rgba(58, 43, 34, 0.16);
  --mu-shimmer: #ffc98a;
  --mu-spot: rgba(212, 99, 47, 0.07);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --mu-dot: rgba(240, 230, 216, 0.13);
    --mu-shimmer: #d4632f;
    --mu-spot: rgba(232, 121, 74, 0.1);
  }
}
:root[data-theme="dark"] {
  --mu-dot: rgba(240, 230, 216, 0.13);
  --mu-shimmer: #d4632f;
  --mu-spot: rgba(232, 121, 74, 0.1);
}

/* ---------- Dot Pattern (Hero-Hintergrund) ---------- */
.mu-hero { position: relative; isolation: isolate; }
.mu-dot-pattern {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(var(--mu-dot) 1.2px, transparent 1.2px);
  background-size: 18px 18px;
  -webkit-mask-image: radial-gradient(ellipse 55% 70% at 72% 45%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 55% 70% at 72% 45%, #000 20%, transparent 75%);
}

/* ---------- Blur Fade (Hero-Slides) ---------- */
.mu-slide .hero-feature__content > * { opacity: 0; }
.mu-slide.is-current .hero-feature__content > * {
  animation: mu-blur-fade 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.mu-slide.is-current .hero-feature__content > :nth-child(2) { animation-delay: 0.08s; }
.mu-slide.is-current .hero-feature__content > :nth-child(3) { animation-delay: 0.16s; }
.mu-slide.is-current .hero-feature__content > :nth-child(4) { animation-delay: 0.24s; }
@keyframes mu-blur-fade {
  from { opacity: 0; filter: blur(6px); transform: translateY(10px); }
  to { opacity: 1; filter: blur(0); transform: none; }
}

/* Blur Fade beim Scrollen (Statistik-Leiste, Karten) - nur wenn JS laeuft, sonst sofort sichtbar */
.mu-js .mu-fade {
  opacity: 0;
  filter: blur(6px);
  transform: translateY(14px);
  transition: opacity 0.7s ease, filter 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.mu-js .mu-fade.is-visible { opacity: 1; filter: none; transform: none; }

/* ---------- Border Beam (Hero-Foto) ---------- */
.hero-feature__photo { position: relative; border-radius: 14px; }
.mu-border-beam {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid transparent;
  pointer-events: none;
  /* nur den Rahmen-Ring sichtbar lassen (Innenflaeche ausgestanzt) */
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0) border-box;
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) padding-box exclude, linear-gradient(#000 0 0) border-box;
}
.mu-border-beam > span {
  position: absolute;
  width: 140px;
  aspect-ratio: 1;
  background: linear-gradient(to left, var(--mu-gold), var(--terracotta), transparent);
  offset-path: rect(0 auto auto 0 round 140px);
  animation: mu-border-beam 8s linear infinite;
}
@keyframes mu-border-beam {
  from { offset-distance: 0%; }
  to { offset-distance: 100%; }
}

/* ---------- Shimmer Button ---------- */
.mu-shimmer {
  --mu-bg: var(--brown);
  --mu-fg: var(--cream);
  --mu-speed: 3s;
  --mu-cut: 0.08em;
  position: relative;
  z-index: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: var(--mu-bg);
  color: var(--mu-fg);
  padding: 13px 24px;
  white-space: nowrap;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  box-shadow: inset 0 -8px 10px rgba(255, 255, 255, 0.12);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.mu-shimmer:hover {
  text-decoration: none;
  background: var(--mu-bg);
  box-shadow: inset 0 -6px 10px rgba(255, 255, 255, 0.25);
  transform: translateY(-1px);
}
.mu-shimmer:active { transform: translateY(1px); box-shadow: inset 0 -10px 10px rgba(255, 255, 255, 0.25); }
.mu-shimmer--accent { --mu-bg: var(--terracotta); --mu-fg: #fff; --mu-shimmer: #fff3e0; }
/* Backdrop: deckt die Mitte ab, sodass nur am Rand ein schmaler Lichtstreifen sichtbar bleibt */
.mu-shimmer::after {
  content: "";
  position: absolute;
  inset: var(--mu-cut);
  z-index: -2;
  border-radius: inherit;
  background: var(--mu-bg);
}
.mu-shimmer__spark {
  position: absolute;
  inset: 0;
  z-index: -3;
  overflow: visible;
  filter: blur(2px);
  container-type: size;
}
.mu-shimmer__spark > span {
  position: absolute;
  inset: 0;
  height: 100cqh;
  aspect-ratio: 1;
  animation: mu-shimmer-slide var(--mu-speed) ease-in-out infinite alternate;
}
.mu-shimmer__spark > span::before {
  content: "";
  position: absolute;
  inset: -100%;
  background: conic-gradient(from 225deg, transparent 0, var(--mu-shimmer) 90deg, transparent 90deg);
  animation: mu-spin-around calc(var(--mu-speed) * 2) infinite linear;
}
.mu-shimmer__label { position: relative; }
@keyframes mu-shimmer-slide {
  to { transform: translate(calc(100cqw - 100%), 0); }
}
@keyframes mu-spin-around {
  0% { transform: translateZ(0) rotate(0); }
  15%, 35% { transform: translateZ(0) rotate(90deg); }
  65%, 85% { transform: translateZ(0) rotate(270deg); }
  100% { transform: translateZ(0) rotate(360deg); }
}

.mu-ghost-button {
  display: inline-flex;
  align-items: center;
  padding: 12px 22px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--brown);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.mu-ghost-button:hover { text-decoration: none; border-color: var(--terracotta); background: var(--cream-dark); }

/* ---------- Aurora Text ---------- */
.mu-aurora {
  display: inline-block;
  background-image: linear-gradient(135deg, var(--terracotta), var(--mu-gold), var(--mu-rose), var(--terracotta-dark), var(--terracotta));
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: mu-aurora 10s ease-in-out infinite alternate;
}
@keyframes mu-aurora {
  0% { background-position: 0% 50%; }
  25% { background-position: 50% 100%; }
  50% { background-position: 100% 50%; }
  75% { background-position: 50% 0%; }
  100% { background-position: 0% 50%; }
}

/* ---------- Statistik-Leiste mit Number Ticker ---------- */
.mu-stats {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 40px;
  align-items: center;
  margin: 48px 0 8px;
  padding: 36px 40px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 20px;
}
.mu-stats__title { font-size: 2.2rem; line-height: 1.1; font-weight: 500; margin: 10px 0 22px; }
.mu-stats__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.mu-stats__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 0;
}
.mu-stats__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 18px;
  border-left: 1px solid var(--border);
}
.mu-stats__item dt { font-size: 0.85rem; color: var(--brown-light); font-weight: 600; }
.mu-ticker {
  order: -1; /* Zahl oben, Label (dt) darunter - Zahlen bleiben auf einer Linie, auch wenn ein Label umbricht */
  margin: 0;
  font-family: var(--serif);
  font-size: 2.8rem;
  line-height: 1;
  font-weight: 500;
  color: var(--brown);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* ---------- Marquee (Kategorien) ---------- */
.mu-marquee-section { margin: 40px 0 36px; }
.mu-marquee {
  --gap: 12px;
  --duration: 40s;
  display: flex;
  gap: var(--gap);
  overflow: hidden;
  padding: 6px 0;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.mu-marquee__row {
  display: flex;
  flex-shrink: 0;
  justify-content: space-around;
  gap: var(--gap);
  animation: mu-marquee var(--duration) linear infinite;
}
.mu-marquee:hover .mu-marquee__row,
.mu-marquee:focus-within .mu-marquee__row { animation-play-state: paused; }
.mu-marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--white);
  color: var(--brown);
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
  transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.mu-marquee__item:hover { text-decoration: none; border-color: var(--terracotta); color: var(--terracotta-dark); transform: translateY(-1px); }
.mu-marquee__icon { font-size: 1.1rem; }
@keyframes mu-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-100% - var(--gap))); }
}

/* ---------- Magic Card ----------
   .mu-spot = Spotlight-Rahmen + Lichtkegel, der dem Cursor folgt (Position via JS in
   --mx/--my). Genutzt von Beitragskarten (.mu-card), Ranking-Zeilen, Reichweite-Kacheln
   und Kontakt-Karten. .mu-card-pad = Standard-Innenabstand fuer Inhaltskarten. */
.mu-card,
.mu-spot {
  --mx: -300px;
  --my: -300px;
  position: relative;
  isolation: isolate;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--white) 0 0) padding-box,
    radial-gradient(240px circle at var(--mx) var(--my), var(--terracotta), var(--mu-gold), var(--border) 100%) border-box;
}
.mu-card::after,
.mu-spot::after {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(240px circle at var(--mx) var(--my), var(--mu-spot), transparent 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.mu-card:hover::after,
.mu-spot:hover::after { opacity: 1; }
.mu-card-pad { padding: 26px 28px; border-radius: 20px; }

.grid--magic { gap: 32px 28px; }
.mu-card { padding: 10px; border-radius: 18px; }
.mu-card .card__image-link { border-radius: 10px; }
.mu-card .card__body { padding: 16px 8px 6px; }
.mu-card.mu-fade.is-visible:hover { transform: translateY(-2px); }

/* ---------- Seitenkopf (partials/pageHero.ejs) ---------- */
.mu-page-hero {
  position: relative;
  isolation: isolate;
  padding: 48px 0 28px;
}
.mu-dot-pattern--page {
  inset: 0 -24px;
  -webkit-mask-image: radial-gradient(ellipse 60% 85% at 85% 30%, #000 10%, transparent 70%);
  mask-image: radial-gradient(ellipse 60% 85% at 85% 30%, #000 10%, transparent 70%);
}
.mu-page-hero .back-link { display: inline-block; margin-bottom: 18px; }
.mu-page-hero__title {
  font-size: 3.2rem;
  line-height: 1.05;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 12px 0 16px;
  max-width: 820px;
}
.mu-page-hero__subtitle {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1.55;
  color: var(--brown-light);
  max-width: 640px;
  margin: 0;
}
.mu-page-hero__note { margin: 14px 0 0; font-size: 0.9rem; font-weight: 600; color: var(--brown-light); }
.mu-page-hero__stats { display: flex; flex-wrap: wrap; gap: 14px 36px; margin: 26px 0 0; }
.mu-page-hero__stats > div { display: flex; align-items: baseline; gap: 10px; }
.mu-page-hero__stats dd { margin: 0; order: -1; font-size: 2.2rem; }
.mu-page-hero__stats dt { font-size: 0.85rem; font-weight: 600; color: var(--brown-light); }

/* Blur Fade beim Laden, gestaffelt */
.mu-hero-in { animation: mu-blur-fade 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; }
.mu-hero-in:nth-child(3) { animation-delay: 0.06s; }
.mu-hero-in:nth-child(4) { animation-delay: 0.12s; }
.mu-hero-in:nth-child(5) { animation-delay: 0.18s; }
.mu-hero-in:nth-child(6) { animation-delay: 0.24s; }
.mu-hero-in:nth-child(7) { animation-delay: 0.3s; }

/* Panel fuer Filter-/Werkzeugleisten */
.mu-panel {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 20px 22px 6px;
  margin-bottom: 20px;
}

/* Gemeinsamer Feinschliff fuer Suche und Filter-Pills (Ranking + Karte) */
.ranking-search input,
.map-search input { padding: 12px 18px; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.ranking-search input:focus,
.map-search input:focus { outline: none; border-color: var(--terracotta); box-shadow: 0 0 0 4px rgba(212, 99, 47, 0.15); }
.ranking-nav button,
.map-filter { transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; }
.ranking-nav button:hover,
.map-filter:hover { transform: translateY(-1px); }
.ranking-nav button.is-active,
.map-filter.is-active {
  background: linear-gradient(135deg, var(--terracotta), var(--mu-gold));
  border-color: transparent;
  color: #fff;
  box-shadow: inset 0 -6px 10px rgba(255, 255, 255, 0.18), 0 6px 14px rgba(212, 99, 47, 0.25);
}

/* ---------- Ranking ---------- */
.ranking-controls { padding-top: 14px; }
.ranking-category { padding-top: 40px; }
.ranking-category__head { margin-bottom: 6px; }
.ranking-category__head .section-title { font-size: 1.7rem; font-weight: 500; }
.ranking-category__emoji { font-size: 1.4rem; }
.ranking-list { gap: 10px; }
.ranking-row.mu-spot { border-radius: 16px; padding: 12px 18px; }
/* Hover aus style.css (Creme-Hintergrund) durch den Spotlight-Rahmen ersetzen */
a.ranking-row.mu-spot:hover {
  background:
    linear-gradient(var(--white) 0 0) padding-box,
    radial-gradient(240px circle at var(--mx) var(--my), var(--terracotta), var(--mu-gold), var(--border) 100%) border-box;
  border-color: transparent;
  transform: translateX(3px);
}
.ranking-row--top1 { padding-top: 16px; padding-bottom: 16px; }
.ranking-row--top1 .ranking-name { font-size: 1.08rem; }
.ranking-rank { transition: transform 0.2s ease; }
.ranking-row:hover .ranking-rank { transform: scale(1.08); }
.ranking-rank--medal {
  position: relative;
  overflow: hidden;
  width: 32px;
  height: 32px;
  color: #3a2b22;
  font-size: 0.9rem;
  box-shadow: inset 0 -3px 6px rgba(0, 0, 0, 0.12);
}
.ranking-rank--1 { background: linear-gradient(135deg, #ffe08a, #f2b53a 55%, #d99a1e); }
.ranking-rank--2 { background: linear-gradient(135deg, #f4f4f4, #c9cdd2 55%, #a7adb5); }
.ranking-rank--3 { background: linear-gradient(135deg, #f3c39a, #d48b52 55%, #b06a34); }
/* Glanzstreifen ueber die Medaille */
.ranking-rank--medal::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, 0.75) 50%, transparent 65%);
  background-size: 250% 100%;
  animation: mu-shine 4s ease-in-out infinite;
}
.ranking-rank--2::after { animation-delay: 0.3s; }
.ranking-rank--3::after { animation-delay: 0.6s; }
@keyframes mu-shine {
  0%, 60% { background-position: 150% 0; }
  100% { background-position: -100% 0; }
}

/* ---------- Karte ---------- */
.map-toolbar .map-search,
.map-toolbar .map-controls,
.map-toolbar .map-rating-filter { padding-bottom: 14px; }
.mu-map-frame {
  position: relative;
  border-radius: 20px;
  box-shadow: 0 18px 40px rgba(58, 43, 34, 0.1);
}
.mu-map-frame .map-container { border-radius: 20px; }
.mu-map-frame .mu-border-beam { z-index: 2; }
.map-hint {
  margin: 16px 0 48px;
  padding: 14px 18px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
}

/* ---------- Ueber mich ---------- */
.mu-about-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
  padding: 48px 0 36px;
}
.mu-about-hero__intro { font-size: 1.05rem; line-height: 1.7; margin: 0 0 8px; max-width: 560px; }
.mu-about-hero__follow { font-size: 1.15rem; font-weight: 500; margin: 26px 0 12px; }
.social-link { transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease; }
.social-link:hover { transform: translateY(-1px); }

/* Orbiting Circles */
.mu-orbit {
  --mu-orbit-size: 380px;
  --mu-orbit-outer: 170;
  --mu-orbit-inner: 112;
  position: relative;
  width: var(--mu-orbit-size);
  height: var(--mu-orbit-size);
  justify-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mu-orbit__paths { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.mu-orbit__path { fill: none; stroke: var(--border); stroke-width: 1; }
.mu-orbit__path--outer { r: calc(var(--mu-orbit-outer) * 1px); }
.mu-orbit__path--inner { r: calc(var(--mu-orbit-inner) * 1px); stroke-dasharray: 4 6; }
.mu-orbit__photo {
  position: relative;
  z-index: 1;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--white);
  box-shadow: 0 0 0 1px var(--border), 0 14px 36px rgba(212, 99, 47, 0.25);
}
.mu-orbit__item {
  --radius: var(--mu-orbit-outer);
  --duration: 24;
  position: absolute;
  z-index: 2;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  animation: mu-orbit calc(var(--duration) * 1s) linear infinite;
}
.mu-orbit__item svg { width: 100%; height: 100%; filter: drop-shadow(0 4px 10px rgba(58, 43, 34, 0.2)); }
/* feiner Ring, damit das schwarze TikTok-Logo im Darkmode nicht im Hintergrund verschwindet */
.mu-orbit__item--outer { box-shadow: 0 0 0 1px var(--border); }
.mu-orbit__item--inner {
  --radius: var(--mu-orbit-inner);
  --duration: 18;
  width: 38px;
  height: 38px;
  font-size: 1.25rem;
  background: var(--white);
  border: 1px solid var(--border);
  animation-direction: reverse;
}
@keyframes mu-orbit {
  0% { transform: rotate(calc(var(--angle) * 1deg)) translateY(calc(var(--radius) * 1px)) rotate(calc(var(--angle) * -1deg)); }
  100% { transform: rotate(calc(var(--angle) * 1deg + 360deg)) translateY(calc(var(--radius) * 1px)) rotate(calc((var(--angle) * -1deg) - 360deg)); }
}

.mu-about-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 20px;
  margin: 8px 0 48px;
}
.about-rating h2 { font-size: 1.5rem; font-weight: 500; margin: 0 0 10px; }
.about-rating p { margin: 0 0 20px; color: var(--brown-light); }
.mu-scale { display: flex; align-items: center; gap: 12px; font-family: var(--serif); font-size: 1.3rem; color: var(--brown); }
.mu-scale__bar {
  flex: 1;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, #8a8a8a, var(--mu-gold), var(--terracotta));
}
.about-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px 18px;
  margin: 0;
  align-content: center;
}
.about-stats .stat { padding-left: 14px; border-left: 1px solid var(--border); }
.about-stats dd { margin: 0; font-size: 2.2rem; line-height: 1.1; }
.about-stats dt { font-size: 0.85rem; color: var(--brown-light); font-weight: 600; }

/* Reichweite-Dashboard */
.reach__title { font-size: 2.2rem; font-weight: 500; }
.reach__kpi.mu-spot,
.reach__platform.mu-spot { border-radius: 18px; }
.reach__kpi-value,
.reach__platform-stat-value { font-family: var(--serif); font-weight: 500; font-variant-numeric: tabular-nums; }
.reach__kpi-value { font-size: 2.2rem; color: var(--brown); }
/* Balken wachsen beim Einblenden von links auf (ausgeloest durch Blur Fade des Containers) */
.mu-js .reach__demo .reach__bar-fill,
.mu-js .reach__demo .reach__gender-bar > div {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
}
.mu-js .reach__demo.is-visible .reach__bar-fill,
.mu-js .reach__demo.is-visible .reach__gender-bar > div { transform: none; }

/* ---------- Kontakt ---------- */
.mu-contact {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 24px;
  align-items: start;
  margin: 8px 0 64px;
}
.mu-contact__info { display: flex; flex-direction: column; gap: 20px; }
.mu-contact__email { display: flex; align-items: center; gap: 16px; color: var(--brown); }
.mu-contact__email:hover { text-decoration: none; }
.mu-contact__email-icon {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--cream-dark);
  font-size: 1.5rem;
}
.mu-contact__email-address { display: block; font-weight: 700; font-size: 1.05rem; word-break: break-all; margin-top: 2px; }
.mu-contact__subtitle { font-size: 1.4rem; font-weight: 500; margin: 0 0 16px; }
.mu-contact__form-card { padding: 30px 32px; }
.mu-contact__form-card .mu-border-beam { z-index: 1; }
.mu-contact__form-card .form input[type="text"],
.mu-contact__form-card .form textarea { background: var(--cream); }
.mu-contact__form-card .form input[type="text"]:focus,
.mu-contact__form-card .form textarea:focus { outline: none; box-shadow: 0 0 0 4px rgba(212, 99, 47, 0.15); }

/* Shimmer Button als <button> im Formular: generische .form-button-Styles aus style.css ueberschreiben */
button.mu-shimmer { font: inherit; cursor: pointer; }
.form button.mu-shimmer,
.form button.mu-shimmer:hover {
  align-self: flex-start;
  background: var(--mu-bg);
  color: var(--mu-fg);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 14px 26px;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
}

@media (max-width: 860px) {
  .mu-stats { grid-template-columns: 1fr; gap: 28px; padding: 28px 24px; }
  .mu-about-hero { grid-template-columns: 1fr; gap: 24px; }
  .mu-orbit { order: -1; }
  .mu-about-grid,
  .mu-contact { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .mu-stats__title { font-size: 1.8rem; }
  .mu-stats__list { gap: 10px; }
  .mu-stats__item { padding-left: 12px; }
  .mu-ticker { font-size: 2rem; }
  .mu-page-hero { padding-top: 32px; }
  .mu-page-hero__title { font-size: 2.3rem; }
  .mu-page-hero__subtitle { font-size: 1.05rem; }
  .mu-page-hero__stats dd,
  .about-stats dd { font-size: 1.8rem; }
  .mu-card-pad,
  .mu-contact__form-card { padding: 22px 20px; }
  .mu-panel { padding: 16px 16px 4px; }
  /* Filter-Pills einzeilig wischbar statt mehrzeilig - spart Hoehe in der Sticky-Leiste */
  .ranking-nav,
  .map-controls { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .ranking-nav::-webkit-scrollbar,
  .map-controls::-webkit-scrollbar { display: none; }
  .ranking-nav button,
  .map-filter { flex-shrink: 0; white-space: nowrap; }
  /* Ranking-Zeilen kompakter, damit der Name genug Platz hat und lange Woerter nicht unter
     die Rating-Pill laufen */
  .ranking-row.mu-spot { padding: 10px 12px; gap: 10px; }
  .ranking-row--top1 { padding-top: 12px; padding-bottom: 12px; }
  .ranking-thumb { width: 44px; height: 44px; }
  .ranking-rank--medal { width: 28px; height: 28px; font-size: 0.82rem; }
  .ranking-name,
  .ranking-row--top1 .ranking-name { font-size: 0.95rem; line-height: 1.3; overflow-wrap: anywhere; }
  .ranking-score,
  .ranking-price { padding: 4px 9px; font-size: 0.78rem; }
  .ranking-fav { width: 30px; height: 30px; font-size: 1rem; }
  .mu-orbit { --mu-orbit-size: 300px; --mu-orbit-outer: 132; --mu-orbit-inner: 86; }
  .mu-orbit__photo { width: 120px; height: 120px; }
  .mu-orbit__item { width: 38px; height: 38px; }
  .mu-orbit__item--inner { width: 32px; height: 32px; font-size: 1.05rem; }
}

@media (prefers-reduced-motion: reduce) {
  .mu-slide .hero-feature__content > *,
  .mu-hero-in,
  .mu-js .mu-fade { opacity: 1; filter: none; transform: none; animation: none; transition: none; }
  .mu-orbit__item,
  .ranking-rank--medal::after { animation: none; }
  .mu-orbit__item { transform: rotate(calc(var(--angle) * 1deg)) translateY(calc(var(--radius) * 1px)) rotate(calc(var(--angle) * -1deg)); }
  .mu-js .reach__demo .reach__bar-fill,
  .mu-js .reach__demo .reach__gender-bar > div { transform: none; transition: none; }
  .mu-border-beam,
  .mu-shimmer__spark { display: none; }
  .mu-aurora,
  .mu-marquee__row { animation: none; }
  .mu-marquee { overflow-x: auto; }
}