/* ==========================================================================
   PIXEL+MORE — „Im Aufbau"-Seite (temporär). Nur Tokens + Systemklassen.
   Akzent, Eyebrows, Icons und Buttons kommen aus dem globalen Teal-System.
   ========================================================================== */

/* Hinweis-Band ganz oben: macht den Aufbau-Charakter sofort sichtbar */
.uc-notice {
  background: var(--teal-700);
  color: #fff;
  border-bottom: 1px solid var(--teal-600);
}
.uc-notice__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding-block: var(--space-3);
  text-align: center;
  font-size: var(--fs-note);
  font-weight: var(--fw-medium);
}
.uc-notice__inner svg { width: 20px; height: 20px; flex: none; color: var(--teal-100); }

/* Coming-Soon-Bühne: Hero + Säulen unter einer Aurora */
.uc {
  padding-block: var(--space-3xl);
  display: flex;
  align-items: center;
}
.uc-hero { max-width: 64ch; margin-inline: auto; text-align: center; }
.uc-hero h1 { font-size: var(--fs-hero-fluid); }
.uc-hero .lead { max-width: 58ch; margin-inline: auto; }
.uc-hero .note { margin-top: var(--space-md); }

/* Sekundär-Button (E-Mail schreiben): nur leichter Rand wie die Karten,
   keine gefüllte Glasfläche */
.uc .btn--secondary {
  background: transparent;
  border-color: var(--stage-border-strong);
  color: var(--stage-text-strong);
}
.uc .btn--secondary:hover {
  background: var(--surface-on-dark);
  border-color: var(--teal-300);
}

.uc-pillars { margin-top: var(--space-4xl); }
.uc-pillars__head { max-width: 48ch; margin-inline: auto; text-align: center; margin-bottom: var(--space-2xl); }

/* Säulenkarte auf der Bühne (Nummer + Icon + Kurztext) */
.uc-card { display: flex; flex-direction: column; gap: var(--space-3); }
.uc-card__top { display: flex; align-items: center; justify-content: space-between; }
.uc-card__num { font-size: var(--fs-small); font-weight: var(--fw-bold); letter-spacing: 0.08em; color: var(--stage-text-muted); }
/* Ofira.app-Säule: identische Glasfläche wie die anderen Karten, nur ein
   1px-Verlaufsring als Rand (über eine Masken-Technik, damit die Fläche
   unberührt bleibt). Kein Glow, kein Extra-Schatten. */
.uc-card--flag { position: relative; }
.uc-card--flag::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(140% 140% at 5% 34%, var(--teal-400) 0%, var(--teal-600) 18%, rgba(23, 163, 146, 0.20) 65%, rgba(23, 163, 146, 0.14) 100%);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

/* Schlanker Footer */
.site-footer--minimal { padding-block: var(--space-2xl); }
.uc-footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2xl);
  flex-wrap: wrap;
  padding-bottom: var(--space-xl);
  margin-bottom: var(--space-lg);
  border-bottom: 1px solid var(--stage-border);
}
.uc-footer__meta { text-align: right; }
.uc-footer__meta .note { color: var(--stage-text-muted); }
.uc-footer__meta a { color: var(--stage-text); }
@media (max-width: 575px) { .uc-footer__meta { text-align: left; } }