/* Tokens aus impacto/layouts/tokens/impacto-theme.css */
/*
  Impacto – Gestaltungswerte (Tokens) für Tailwind CSS 4, Richtung B „Rahmen in Marineblau“ (E-96, E-97).
  Eine Quelle für Layouts und Code: Der Code bindet diese Datei ein (@import) statt eigene Werte zu setzen.
  Stufen von Marineblau und Orange unverändert kopiert aus impuls apps/web/src/index.css, Stand 5.11.2026
  (gemessen aus dem Original-Logo IMPACTO-Logo.png). Rollen für Impacto ergänzt.

  Kontrastregeln (E-97), geprüft mit werkzeuge/kontrast-pruefen.py:
  - Fließtext mindestens 7 : 1, jede andere Schrift mindestens 4,5 : 1,
  - Rahmen von Bedienelementen und Fokusring mindestens 3 : 1 zum Grund,
  - Farbe nie allein: jeder Stand mit Zeichen und Text (E-25, E-31, E-88).
  Orange trägt keine Schrift auf Weiß (CLAUDE.md, E-15); Schrift auf Orange ist marineblau.
*/
:root {
  --font-sans: "Montserrat Variable", ui-sans-serif, system-ui, sans-serif;

  /* Marineblau aus der Wortmarke; 900 ist die Markenfarbe (aus Impuls) */
  --color-marine-50: #f2f6f9;
  --color-marine-100: #e3eaf1;
  --color-marine-200: #c6d4e1;
  --color-marine-300: #9db3c8;
  --color-marine-400: #6d8aa7;
  --color-marine-500: #4a6888;
  --color-marine-600: #34506e;
  --color-marine-700: #233c57;
  --color-marine-800: #152c42;
  --color-marine-900: #0a1f31;
  --color-marine-950: #06131f;

  /* Orange aus den drei Strahlen; 400 ist die Markenfarbe (aus Impuls) */
  --color-orange-50: #fff8ed;
  --color-orange-100: #ffefd4;
  --color-orange-200: #fedcaa;
  --color-orange-300: #fdc574;
  --color-orange-400: #fda736;
  --color-orange-500: #f98f14;
  --color-orange-600: #dd700a;
  --color-orange-700: #b7520c;
  --color-orange-800: #924011;

  /* Rollen: Flächen und Schrift auf Hell */
  --color-grund: #ffffff;                          /* Karten, Kopf */
  --color-grund-seite: var(--color-marine-50);     /* Hintergrund der Arbeitsfläche */
  --color-grund-leise: var(--color-marine-100);    /* Kästen in Karten (Vorgabe, Auftragsvorschau) */
  --color-schrift: var(--color-marine-900);        /* Fließtext */
  --color-leise: var(--color-marine-600);          /* Nebentext, Zeitangaben */
  --color-linie: var(--color-marine-200);          /* Trennlinien, nur Zierde */
  --color-rand: var(--color-marine-400);           /* Rand von Eingabefeldern und Knöpfen */
  --color-fokus: var(--color-marine-900);          /* Fokusring auf Hell, mit 2 px Abstand */

  /* Akzent: nur Hauptaktion, aktuelle Phase, aktiver Menüpunkt (E-96) */
  --color-akzent: var(--color-orange-400);
  --color-akzent-flaeche: var(--color-orange-100);
  --color-auf-akzent: var(--color-marine-900);
  --color-akzent-schrift: var(--color-orange-700); /* nur große Schrift oder Zeichen, nie Fließtext */

  /* Rahmen in Marineblau: Seitenleiste (E-96) */
  --color-rahmen: var(--color-marine-900);
  --color-rahmen-aktiv: var(--color-marine-800);
  --color-rahmen-schrift: var(--color-marine-50);
  --color-rahmen-leise: var(--color-marine-300);
  --color-rahmen-fokus: var(--color-orange-400);

  /* Stände (E-31, E-88): je Fläche und Schrift; immer mit Zeichen und Text */
  --color-erfolg: #067647;                          /* ✓ Bereit, Gesichert, Erledigt */
  --color-erfolg-flaeche: #ecfdf3;
  --color-achtung: #5c4600;                         /* ! Prüfen, △ möglicherweise veraltet; gelblicher als die Marke */
  --color-achtung-flaeche: #fdf5c4;
  --color-achtung-rand: #c9a400;
  --color-fehler: #b42318;                          /* ✕ Fehler */
  --color-fehler-flaeche: #fef3f2;
  --color-neutral: var(--color-marine-700);         /* ↻ wird verarbeitet, In Arbeit, ○ Offen */
  --color-neutral-flaeche: var(--color-marine-100);

  /* Der rote Punkt der Aufnahme, wie überall üblich; nicht die Marke (aus Impuls) */
  --color-aufnahme: #d92d20;

  /* Form */
  --radius-feld: 0.625rem;   /* 10 px: Felder, Knöpfe */
  --radius-karte: 0.75rem;   /* 12 px: Karten im Arbeitsplatz */
  --radius-marke: 0.375rem;  /* 6 px: Stand-Marken */
  --shadow-karte: 0 1px 2px rgb(10 31 49 / 0.06), 0 4px 16px rgb(10 31 49 / 0.06);
  --shadow-schwebend: 0 8px 30px rgb(10 31 49 / 0.18);

  /* Schrift: Grundgröße 16 px (UX-Leitlinien; Impuls hat 15 px), Zeilenhöhe 1,5 bis 1,75; 12 px nur für Nebentext */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.75rem;
  --leading-normal: 1.55;
  --container-lesen: 42rem; /* höchstens etwa 70 Zeichen je Zeile für Abschriften und Ergebnisse */

  /* Bedienung: Zielfläche mindestens 44 px (A-11.11) */
  --spacing-ziel: 2.75rem;
}

/*
  impacto.rocks – Pre-Launch-Seite „Tag und Nacht“ (Philipp, 6.11.2026).
  Farben, Schrift, Radien und Schatten kommen nur aus den Tokens der Hauptsession (impacto-theme.css, E-15/E-91/E-97);
  build.py setzt sie als :root davor. Hier stehen nur Anordnung und Bewegung.
  Oben hell mit dem Logo (E-96), unten die dunkle Bühne in den Rahmen-Tokens (--color-rahmen*).
  Die Kante ist der Horizont; das Wechselwort steht darauf, mit einem orangefarbenen Strich als Marke.
  Orange nur als Fläche und Strich, nie als Schrift auf Weiß (E-15).
*/

@font-face {
  font-family: "Montserrat Variable";
  src: url("/assets/fonts/montserrat-latin-wght-normal.06b16db7a9.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --wort-groesse: clamp(2.75rem, 1.4rem + 5.5vw, 5rem);   /* Überschriftengröße, laut Hauptsession frei */
}

/* ---------- Grundlagen ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--color-grund);
  color: var(--color-schrift);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--color-fokus);
  outline-offset: 2px;
  border-radius: 2px;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Bühne: ein Bildschirm, oben Tag, unten Nacht ---------- */

.buehne {
  display: grid;
  grid-template-rows: minmax(0, 1fr) minmax(16rem, 42vh);
  min-height: 100vh;
  min-height: 100dvh;
  overflow: clip;
}

/* ---------- Tag ---------- */

.tag {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(1.25rem, 4vh, 2.25rem);
  padding:
    max(2rem, env(safe-area-inset-top))
    max(1rem, env(safe-area-inset-right))
    0
    max(1rem, env(safe-area-inset-left));
  background: var(--color-grund);
  text-align: center;
  overflow: clip;
}

/* Logo: Original-PNG, Ausschnitt mit Claim (x 91, y 203, b 1621, h 451 von 1774 × 887), nur per CSS */

.kopf { position: relative; width: min(100%, 44rem); }

.logo {
  position: relative;
  width: min(100%, 23rem);
  margin-inline: auto;
  aspect-ratio: 1621 / 451;
  overflow: clip;
}

.logo img {
  position: absolute;
  width: calc(100% * 1774 / 1621);
  height: auto;
  max-width: none;
  left: calc(-100% * 91 / 1621);
  top: calc(-100% * 203 / 451);
  /* Der Grund der Datei ist #fdfdfd statt Weiß; der Unterschied ist unsichtbar und in der App genauso. */
}

/* Satz: fester Teil leise, das Wechselwort darunter trägt die Seite */

.satz {
  margin: 0;
  font-size: clamp(1.125rem, 0.85rem + 1.4vw, 1.625rem);
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.satz__fest {
  display: block;
  max-width: 24em;
  margin-inline: auto;
  text-wrap: balance;
  color: var(--color-leise);
}
.satz__fest > span { display: inline-block; }

.wort {
  position: relative;
  display: grid;
  justify-items: center;
  width: max-content;
  max-width: 100%;
  margin: 0.25em auto 0;
  font-size: var(--wort-groesse);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--color-schrift);
}

.wort__ebene {
  grid-area: 1 / 1;
  padding-bottom: 0.06em;
  border-bottom: 0.08em solid var(--color-akzent);   /* liegt genau auf der Kante */
  visibility: hidden;
  white-space: nowrap;
}
.wort__ebene.ist-aktiv { visibility: visible; }

/* ---------- Nacht ---------- */

.nacht {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;   /* Knopf allein auf der Bühne, Fuß unten */
  justify-items: center;
  gap: 1rem;
  padding:
    clamp(2.5rem, 6vh, 3.5rem)
    max(1rem, env(safe-area-inset-right))
    max(1rem, env(safe-area-inset-bottom))
    max(1rem, env(safe-area-inset-left));
  background: var(--color-rahmen);
  color: var(--color-rahmen-schrift);
}

.nacht :focus-visible { outline-color: var(--color-rahmen-fokus); }

.aktion { margin: 0; align-self: center; }

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--spacing-ziel);
  padding: 0.875rem 1.75rem;
  border-radius: var(--radius-feld);
  background: var(--color-akzent);
  color: var(--color-auf-akzent);
  font-weight: 700;
  font-size: var(--text-lg);
  text-decoration: none;
  transition: transform 150ms cubic-bezier(0.2, 0, 0, 1), background-color 150ms cubic-bezier(0.2, 0, 0, 1);
}
.knopf:hover { background: var(--color-orange-500); transform: translateY(-1px); }
.knopf:active { transform: scale(0.98); transition-duration: 100ms; }

.fuss {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  width: min(100%, 44rem);
  font-size: var(--text-sm);
  color: var(--color-rahmen-leise);
}
.fuss__links { display: flex; gap: 1.25rem; }
.fuss__links a { text-underline-offset: 0.2em; }
.fuss__links a:hover { color: var(--color-rahmen-schrift); }

.pause {
  display: inline-grid;
  place-items: center;
  width: var(--spacing-ziel);
  height: var(--spacing-ziel);
  padding: 0;
  border: 1px solid var(--color-rahmen-leise);
  border-radius: 50%;
  background: transparent;
  color: var(--color-rahmen-schrift);
  cursor: pointer;
}
.pause:hover { background: var(--color-rahmen-aktiv); }
.pause[hidden] { display: none; }
.pause__zeichen { width: 1rem; height: 1rem; fill: currentColor; }
.pause__zeichen--weiter, .pause[aria-pressed="true"] .pause__zeichen--pause { display: none; }
.pause[aria-pressed="true"] .pause__zeichen--weiter { display: block; }

@media (max-width: 40rem) {
  .buehne { grid-template-rows: minmax(0, 1fr) minmax(14rem, 40vh); }
}

/* ---------- Intro (nur mit JavaScript; ohne steht alles sofort) ---------- */

@keyframes einblenden {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@keyframes einblenden-text {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.js .intro { opacity: 0; }
.js.los .intro { animation: einblenden 500ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.js.los .intro--logo { animation-delay: 0ms; }
.js.los .intro--wort { animation-name: einblenden-text; animation-duration: 350ms; }
.js.los .intro--wort:nth-child(1) { animation-delay: 700ms; }
.js.los .intro--wort:nth-child(2) { animation-delay: 745ms; }
.js.los .intro--wort:nth-child(3) { animation-delay: 790ms; }
.js.los .intro--wort:nth-child(4) { animation-delay: 835ms; }
.js.los .intro--wort:nth-child(5) { animation-delay: 880ms; }
.js.los .intro--wort:nth-child(6) { animation-delay: 925ms; }
.js.los .intro--wort:nth-child(7) { animation-delay: 970ms; }
.js.los .intro--wort:nth-child(8) { animation-delay: 1015ms; }
.js.los .intro--wort:nth-child(9) { animation-delay: 1060ms; }
/* Das Wechselwort selbst kommt per JavaScript mit der Landung; die Hülle ist nur sofort da. */
.js.los .intro--wechsel { animation: none; opacity: 1; }
.js.los .intro--knopf { animation-delay: 1700ms; animation-duration: 400ms; }
.js.los .intro--fuss { animation-name: einblenden-text; animation-delay: 2000ms; animation-duration: 300ms; }

/* ---------- Ruhig: keine Bewegung, alle Wörter sichtbar (Vorgabe Hauptsession, WCAG 2.2.2/2.3.3) ---------- */

@media (prefers-reduced-motion: reduce) {
  .js .intro, .js.los .intro { opacity: 1; animation: none; }
  .knopf { transition: none; }
  .knopf:hover { transform: none; }
  .wort { display: block; width: auto; font-size: clamp(1.75rem, 1rem + 3vw, 2.75rem); }
  .wort__ebene { display: inline; visibility: visible; padding: 0; border-bottom: 0; white-space: normal; }
  .wort__ebene:not(:last-child)::after { content: ","; }
  .wort__ebene:last-child::before { content: "and "; }
  .wort__ebene:last-child::after { content: "."; }
}

/* ---------- Rechtliche Seiten ---------- */

.rechtlich { background: var(--color-grund); }

.text {
  width: min(100% - 2rem, var(--container-lesen));
  margin: 0 auto;
  padding: 3rem 0 4rem;
}
.text h1 { font-size: var(--text-2xl); line-height: 1.2; margin: 1.5rem 0 2rem; font-weight: 800; }
.text h2 { font-size: var(--text-lg); margin: 2rem 0 0.5rem; font-weight: 700; }
.text p { margin: 0 0 1rem; }
.text .zurueck { color: var(--color-leise); text-underline-offset: 0.2em; }
.text .stand, .text .fuss-links { color: var(--color-leise); font-size: var(--text-sm); margin-top: 2.5rem; }