apps/web/src/fp.css

/* Future Planning – globales Stylesheet (UI-Redesign Etappe A, Bryan-Konzept).
 *
 * Hier lebt ALLES, was Pseudoklassen (:hover/:active), Media-Queries oder
 * Keyframes braucht – Inline-Styles in React können das nicht. Statische
 * JS-Tokens (Farben, Kartenobjekt, Pill) bleiben in theme.ts, damit
 * Inline-Reste sie weiter konsumieren. Die Klassennamen sind zusätzlich als
 * Konstanten in theme.ts (`CSS`) gespiegelt.
 *
 * Quelle/Vorgabe: Bryans UI-Konzept + Brain Corporate-Identity.md.
 */

:root {
  /* Farbrollen (Bryan-Vorgabe). Dunkelgrün = Navigation/Titel/Text/Icons/
     Rahmen/Sekundär-Buttons · Orange = die EINE Hauptaktion pro Ansicht,
     aktiver Schritt, Fortschritt, Auswahl · Salbei = inaktiv/Tags/ruhige
     Flächen. */
  --fp-primary: #243d35;
  --fp-primary-dark: #123845;
  --fp-accent: #d6914f;
  --fp-muted: #9ba494;
  --fp-soft: #f0f7f2; /* Off-White NUR für Felder, Auswahl, Infoboxen,
                         Sekundärkarten, Ladezustände – NICHT als App-Grund. */
  --fp-background: #ffffff; /* App-Body reinweiss. */
  --fp-text: #123845;

  /* Typografie. Schriftdateien werden BEWUSST NICHT eingebettet – die Lizenz
     für «Accidental Presidency» (Display) und «GeosansLight» (Body) ist laut
     Brain (Corporate-Identity.md §Offene Punkte) noch offen. Bis zur Klärung
     nur Fallback-Ketten; sobald geklärt, hier @font-face ergänzen. */
  --fp-font-display:
    "Accidental Presidency", "Arial Narrow", "Helvetica Neue Condensed", sans-serif;
  --fp-font-body: "GeosansLight", "Century Gothic", "Futura", system-ui, sans-serif;

  /* Vereinheitlichter Kartenstil: harter Schlagschatten OHNE Blur (gleiche
     Richtung/Stärke überall) + weisser Innenschein. Der Innenschein (inset)
     ist bewusst kräftiger als der Schlagschatten – Bryan: «Schein nach innen
     überall UND stärker» (2026-07-08). Rand etwas kräftiger grün eingefärbt,
     damit die CI-Farbe auch im Ruhezustand sichtbar bleibt. */
  --fp-card-border: 1px solid rgba(36, 61, 53, 0.3);
  --fp-card-radius: 12px;
  --fp-card-shadow:
    7px 7px 0 rgba(36, 61, 53, 0.18), inset 0 0 30px rgba(240, 247, 242, 0.95),
    inset 0 0 8px rgba(255, 255, 255, 0.7);
  /* Innenschein allein (für Flächen ohne Schlagschatten, z. B. .fp-card-flach,
     .fp-soft). */
  --fp-inner-glow: inset 0 0 26px rgba(240, 247, 242, 0.95), inset 0 0 8px rgba(255, 255, 255, 0.7);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--fp-background);
  color: var(--fp-text);
  font-family: var(--fp-font-body);
}

/* Display-Font nur für Titel/grosse Zahlen/kurze Aussagen (UPPERCASE +
   leichte Sperrung). Als Utility, falls Inline-`titel` nicht reicht. */
.fp-titel {
  font-family: var(--fp-font-display);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fp-primary);
  font-weight: 400;
}

/* ---------- Karten ---------- */
.fp-card {
  background: #fff;
  border: var(--fp-card-border);
  border-radius: var(--fp-card-radius);
  box-shadow: var(--fp-card-shadow);
}
/* Unterelemente flacher: Rahmen + Radius + Innenschein, aber kein
   Schlagschatten (bewusst flacher als .fp-card). */
.fp-card-flach {
  background: #fff;
  border: var(--fp-card-border);
  border-radius: var(--fp-card-radius);
  box-shadow: var(--fp-inner-glow);
}
/* Aktive/ausgewählte Karte: oranger Rand (gleiche Schattenrichtung), Innenschein
   ebenfalls verstärkt. */
.fp-card-aktiv {
  border-color: var(--fp-accent);
  box-shadow:
    7px 7px 0 rgba(214, 145, 79, 0.22),
    inset 0 0 30px rgba(240, 247, 242, 0.95),
    inset 0 0 8px rgba(255, 255, 255, 0.7);
}

/* Sekundärfläche/Infobox/Ladefläche – Off-White ist hier erlaubt. Innenschein
   in Weiss, damit er auf dem Off-White-Grund sichtbar bleibt. */
.fp-soft {
  background: var(--fp-soft);
  border-radius: var(--fp-card-radius);
  box-shadow:
    inset 0 0 22px rgba(255, 255, 255, 0.85),
    inset 0 0 0 1px rgba(36, 61, 53, 0.08);
}

/* ---------- Buttons ---------- */
/* Farbige Objekte (Buttons/Chips/Karten mit CI-Farbe) tragen die CI-Grafik-
   sprache: harter Schlagschatten (kleiner als Karten) + Schein nach innen. */
.fp-farbig {
  box-shadow:
    4px 4px 0 rgba(36, 61, 53, 0.22),
    inset 0 0 18px rgba(255, 255, 255, 0.55),
    inset 0 0 5px rgba(255, 255, 255, 0.8);
}

.fp-button {
  transition:
    transform 140ms ease,
    box-shadow 140ms ease,
    background 140ms ease;
}
.fp-button:active:not(:disabled) {
  transform: scale(0.97);
}
.fp-button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

/* Auswählbare Karte: hebt leicht an; der orange Rand kommt über
   .fp-card-aktiv dazu. Im Hover/Fokus wird der Rand kräftig CI-grün, damit
   Interaktion klar als «unsere Farbe» erkennbar ist (Bryan: mehr Grüntöne). */
.fp-auswahl {
  transition:
    transform 140ms ease,
    box-shadow 140ms ease,
    border-color 140ms ease;
}
.fp-auswahl:hover,
.fp-auswahl:focus-visible {
  transform: translateY(-2px);
  border-color: var(--fp-primary);
}
.fp-auswahl:not(.fp-card-aktiv):hover {
  box-shadow:
    7px 7px 0 rgba(36, 61, 53, 0.15),
    inset 0 0 30px rgba(240, 247, 242, 0.95),
    inset 0 0 8px rgba(255, 255, 255, 0.7),
    0 0 0 2px rgba(36, 61, 53, 0.18);
}

/* Fokus allgemein (Tastatur): grüner Ring statt Browser-Default, konsistent
   zur CI. */
.fp-button:focus-visible {
  outline: 2px solid var(--fp-primary);
  outline-offset: 2px;
}

/* ---------- Schrittwechsel-Einblendung (einmalig via CSS-Animation) ---------- */
@keyframes fp-einblenden {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.fp-schritt-neu {
  animation: fp-einblenden 200ms ease-out both;
}

/* ---------- Stil-Swipe: Karte gleitet weg (Like rechts, Dislike links) ------ */
@keyframes fp-swipe-like {
  to {
    transform: translateX(60%) rotate(4deg);
    opacity: 0;
  }
}
@keyframes fp-swipe-dislike {
  to {
    transform: translateX(-60%) rotate(-4deg);
    opacity: 0;
  }
}
/* Like = oranger Akzent, Dislike = neutrales Dunkelgrün. ~220 ms, dann kommt
   per State das nächste Bild frisch (ohne Animation). */
.fp-swipe-like {
  border-radius: 8px;
  box-shadow: 0 0 0 3px rgba(214, 145, 79, 0.9);
  animation: fp-swipe-like 220ms ease-in both;
}
.fp-swipe-dislike {
  border-radius: 8px;
  box-shadow: 0 0 0 3px rgba(36, 61, 53, 0.55);
  animation: fp-swipe-dislike 220ms ease-in both;
}

/* ---------- Ladezustand: sanft pulsierendes Piktogramm ---------- */
@keyframes fp-puls {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(0.9);
  }
}
.fp-piktogramm-puls {
  animation: fp-puls 1.4s ease-in-out infinite;
}

/* ---------- Ladezustand: Fortschrittsbalken (Ladezustand.tsx) ----------
   Standard = unbestimmt (kein bekannter Endpunkt, meist ein KI-Call);
   bestimmter Balken kommt über eine feste Füllungs-Breite (kein CSS nötig,
   nur Inline-`width` per Prop `fortschritt`). */
.fp-fortschrittsbalken {
  position: relative;
  width: min(220px, 70%);
  height: 6px;
  border-radius: 999px;
  background: rgba(36, 61, 53, 0.12);
  overflow: hidden;
}
.fp-fortschrittsbalken-fuellung {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: 999px;
  background: var(--fp-accent);
  transition: width 200ms ease;
}
@keyframes fp-balken-unbestimmt {
  0% {
    left: -45%;
    width: 40%;
  }
  50% {
    width: 55%;
  }
  100% {
    left: 100%;
    width: 40%;
  }
}
.fp-fortschrittsbalken-unbestimmt {
  width: 40%;
  transition: none;
  animation: fp-balken-unbestimmt 1.3s ease-in-out infinite;
}

/* ---------- Responsive-Helfer ---------- */
.fp-two-column {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(300px, 0.8fr);
  gap: 24px;
}
.fp-drei-karten {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 820px) {
  .fp-two-column {
    grid-template-columns: 1fr;
  }
  .fp-drei-karten {
    grid-template-columns: 1fr;
  }
}

/* Fortschrittsweg: auf kleinen Screens horizontal scrollbar statt Umbruch. */
.fp-fortschritt {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Barrierefreiheit: Bewegung reduzieren, wenn das System es wünscht. */
@media (prefers-reduced-motion: reduce) {
  .fp-schritt-neu,
  .fp-piktogramm-puls,
  .fp-swipe-like,
  .fp-swipe-dislike,
  .fp-button,
  .fp-auswahl,
  .fp-fortschrittsbalken-unbestimmt {
    animation: none;
    transition: none;
  }
}