/* style.css - Mechanik-Prototyp der neuen Startseite, zweiter Wurf.
   Eine Seite, die waechst: Antwort-Zeilen bleiben oben stehen, die Kacheln
   sortieren sich sichtbar um und die gewaehlte entfaltet sich.
   Eigenstaendig, haengt nicht an shared.css. Farben aus dem Sandton-Spektrum. */

:root {
  --bg: #faf7f2;
  --bg-warm: #f3ede4;
  --text: #2d2a26;
  --text-soft: #7a746b;
  --accent: #d4845a;
  --accent-soft: rgba(212, 132, 90, 0.12);
  --accent-dark: #b8693f;
  --card-bg: #ffffff;
  --card-border: rgba(0, 0, 0, 0.06);

  /* Seitenfarbe, wird je Thema ueberschrieben */
  --page-bg: var(--bg);
  --page-accent: var(--accent);
  --page-accent-dark: var(--accent-dark);
  --page-accent-soft: var(--accent-soft);
}

/* Fuenf Farbtoene, einer je Frage, alle im Sandton-Spektrum */
body[data-thema="staerken"] {
  --page-bg: #f6e3d3;
  --page-accent: #c9713f;
  --page-accent-dark: #a95a2e;
  --page-accent-soft: rgba(201, 113, 63, 0.14);
}
body[data-thema="werte"] {
  --page-bg: #f6ecd4;
  --page-accent: #b08a3c;
  --page-accent-dark: #91702e;
  --page-accent-soft: rgba(176, 138, 60, 0.14);
}
body[data-thema="bild"] {
  --page-bg: #eeeadb;
  --page-accent: #8f8450;
  --page-accent-dark: #746a3e;
  --page-accent-soft: rgba(143, 132, 80, 0.14);
}
body[data-thema="druck"] {
  --page-bg: #f3e2dc;
  --page-accent: #b56a55;
  --page-accent-dark: #955241;
  --page-accent-soft: rgba(181, 106, 85, 0.14);
}
body[data-thema="neugier"] {
  --page-bg: #f3ede4;
  --page-accent: #a58a68;
  --page-accent-dark: #857052;
  --page-accent-soft: rgba(165, 138, 104, 0.14);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { font-size: 17px; }

body {
  background: var(--page-bg);
  color: var(--text);
  font-family: 'Nunito', sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  transition: background 0.6s ease;
  min-height: 100vh;
  min-height: 100dvh;
}

button {
  font-family: 'Nunito', sans-serif;
  cursor: pointer;
}

/* Zentrale Spalte, mobil ganzflaechig, auf dem Desktop begrenzt */
.shell {
  max-width: 560px;
  margin: 0 auto;
  padding: 0 1.1rem;
}

.stapel {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  padding-top: 0.8rem;
  padding-bottom: 1.2rem;
}

[hidden] { display: none !important; }

/* --- Marke --- */
.marke { flex-shrink: 0; }

.marke-name {
  display: block;
  font-family: 'Lora', serif;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--text-soft);
}

.marke-claim {
  display: block;
  font-family: 'Lora', serif;
  font-style: italic;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--page-accent-dark);
}

/* --- Antwort-Zeilen: bleiben stehen, sind der Rueckweg --- */
.antwort-zeile {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--card-bg);
  border: 1.5px solid var(--page-accent);
  border-radius: 14px;
  padding: 0.5rem 0.9rem 0.6rem;
  margin-top: 0.7rem;
  min-height: 48px;
  transition: background 0.2s, transform 0.15s;
  animation: blockUp 0.4s ease both;
}

.antwort-zeile:hover, .antwort-zeile:focus-visible {
  background: var(--page-accent-soft);
}

.antwort-zeile:active { transform: scale(0.99); }

/* Beide Antwort-Zeilen gleichwertig: beide Fragen sind beantwortet */

.zeile-kopf {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--page-accent-dark);
}

.zeile-aendern {
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  text-decoration: underline;
  color: var(--text-soft);
}

.zeile-text {
  display: block;
  font-family: 'Lora', serif;
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.3;
  color: var(--text);
}

.antwort-zeile.duenn .zeile-text {
  font-size: 0.98rem;
}

.wiederkommer-hinweis {
  font-size: 0.82rem;
  color: var(--text-soft);
  margin-top: 0.6rem;
}

/* --- Kommentar und Verbindungszeile --- */
.kommentar, .verbindung {
  font-family: 'Lora', serif;
  font-style: italic;
  font-size: 1rem;
  line-height: 1.55;
  border-left: 3px solid var(--page-accent);
  border-radius: 0 12px 12px 0;
  background: rgba(255, 255, 255, 0.55);
  padding: 0.7rem 0.9rem;
  margin-top: 0.8rem;
  animation: blockUp 0.45s ease 0.15s both;
}

/* --- Schritt 1: Einstieg --- */
#schritt-frage1 {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Der Benefit darf praesent sein, mit Luft darueber und darunter */
.ankuendigung {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.5;
  margin-top: 2.4rem;
  padding-left: 0.9rem;
  border-left: 3px solid var(--accent);
}

/* Kleines Nummern-Label ueber beiden Fragen, mit deutlich Luft darueber */
.schritt-label {
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--page-accent-dark);
  margin-top: 3.6rem;
}

/* Die eigentliche Frage ist der Star des Einstiegs */
.frage1-titel {
  font-family: 'Lora', serif;
  font-weight: 600;
  font-size: 1.7rem;
  line-height: 1.3;
  margin-top: 0.3rem;
}

.fragen-liste {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-top: 1.2rem;
}

.frage-btn {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--card-bg);
  border: 1.5px solid var(--card-border);
  border-radius: 16px;
  padding: 0.8rem 1.1rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  min-height: 52px;
  transition: border-color 0.2s, background 0.2s, transform 0.15s;
}

.frage-btn:hover, .frage-btn:focus-visible {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.frage-btn:active { transform: scale(0.98); }

.frage-btn.neugier {
  background: rgba(255, 255, 255, 0.55);
  border-style: dashed;
  border-color: rgba(0, 0, 0, 0.14);
  font-weight: 600;
  color: var(--text);
}

.ausgaenge {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.2rem 1rem;
  margin-top: auto;
  padding-top: 0.9rem;
}

/* Die getippte Frage fliegt in die Antwort-Zeile oben */
.frage-flug {
  position: fixed;
  z-index: 60;
  pointer-events: none;
  background: var(--card-bg);
  border: 1.5px solid var(--page-accent);
  border-radius: 16px;
  padding: 0.8rem 1.1rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  transition: transform 0.4s cubic-bezier(0.3, 0.8, 0.3, 1), opacity 0.4s ease;
  opacity: 1;
}

.ausgang-link {
  background: none;
  border: none;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-soft);
  text-decoration: underline;
  text-decoration-color: rgba(122, 116, 107, 0.35);
  padding: 0.4rem 0.2rem;
  transition: color 0.2s;
}

.ausgang-link:hover { color: var(--accent-dark); }

/* --- Schritt 2: mit Luft nach dem Kommentar, klar als zweite Frage erkennbar --- */
#schritt-frage2 .schritt-label {
  margin-top: 4.4rem;
  animation: blockUp 0.4s ease 0.3s both;
}

.frage2-titel {
  font-family: 'Lora', serif;
  font-weight: 600;
  font-size: 1.45rem;
  line-height: 1.35;
  margin-top: 0.3rem;
  animation: blockUp 0.4s ease 0.3s both;
}

/* Standardseite: Ueberschrift mit Luft, darunter der Rueckweg */
.standard-titel {
  font-family: 'Lora', serif;
  font-weight: 600;
  font-size: 1.45rem;
  line-height: 1.35;
  margin-top: 3rem;
}

.standard-zurueck {
  margin-top: 0.4rem;
}

.standard-zurueck button {
  background: none;
  border: none;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--page-accent-dark);
  text-decoration: underline;
  padding: 0.3rem 0;
}

/* --- Kacheln --- */
.kacheln {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-top: 0.8rem;
}

.kachel {
  background: var(--card-bg);
  border: 1.5px solid var(--card-border);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color 0.3s, box-shadow 0.3s;
  animation: blockUp 0.4s ease both;
}

/* Gestaffeltes Erscheinen in Schritt 2 */
.kacheln.erscheint .kachel:nth-child(1) { animation-delay: 0.4s; }
.kacheln.erscheint .kachel:nth-child(2) { animation-delay: 0.48s; }
.kacheln.erscheint .kachel:nth-child(3) { animation-delay: 0.56s; }
.kacheln.erscheint .kachel:nth-child(4) { animation-delay: 0.64s; }
.kacheln.erscheint .kachel:nth-child(5) { animation-delay: 0.72s; }
.kacheln.erscheint .kachel:nth-child(6) { animation-delay: 0.8s; }

/* Beim Umsortieren uebernimmt JS die Bewegung, keine Einblend-Animation */
.kacheln.sortiert .kachel { animation: none; }

.kachel-kopf {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 0.75rem 1.1rem;
  min-height: 52px;
}

.kachel:hover, .kachel:focus-within {
  border-color: var(--page-accent);
}

.kachel-label {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
}

.kachel-sub {
  display: block;
  font-size: 0.82rem;
  color: var(--text-soft);
}

/* Die gewaehlte Kachel entfaltet sich */
.kachel.offen {
  border-color: var(--page-accent);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
}

.kachel.offen .kachel-kopf {
  padding-bottom: 0.2rem;
}

.kachel.offen .kachel-label { color: var(--page-accent-dark); }

.kachel-inhalt {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.7s cubic-bezier(0.3, 0.8, 0.3, 1);
}

.kachel.offen .kachel-inhalt { grid-template-rows: 1fr; }

.kachel-inhalt-innen {
  overflow: hidden;
  padding: 0 1.1rem;
}

.kachel.offen .kachel-inhalt-innen { padding-bottom: 1.1rem; }

.kachel-inhalt-innen > * {
  opacity: 0;
  transition: opacity 0.4s ease 0.5s;
}

.kachel.offen .kachel-inhalt-innen > * { opacity: 1; }

.inhalt-titel {
  font-family: 'Lora', serif;
  font-weight: 700;
  font-size: 1.1rem;
  margin-top: 0.4rem;
}

.inhalt-text {
  font-size: 0.92rem;
  color: var(--text-soft);
  margin-top: 0.25rem;
}

.inhalt-bild {
  display: block;
  margin-top: 0.8rem;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--card-border);
  position: relative;
}

.inhalt-bild img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 340px;
  object-fit: cover;
  object-position: top;
}

/* Laufende Video-Vorschau in der Zuschauen-Kachel: bewusst klein,
   wie ein Video-Kaertchen, nur zum Erkennen dass hier Coaching laeuft */
.inhalt-bild.vorschau-klein {
  max-width: 160px;
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

.inhalt-bild.vorschau-klein video {
  display: block;
  width: 100%;
  max-height: 250px;
  object-fit: cover;
  background: #2d2a26;
}

.vorschau-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.vorschau-overlay .video-play {
  width: 40px;
  height: 40px;
}

.vorschau-overlay .video-play::after {
  border-width: 7px 0 7px 12px;
  margin-left: 3px;
}

/* Tool-Teaser: scharfe Karte nach unten-rechts versetzt, dahinter
   dasselbe Bild geblurrt, das oben und links hervorschaut */
.inhalt-bild.tool-teaser {
  position: relative;
  padding: 26px 0 0 26px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg);
}

.tool-teaser-blur {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: top left;
  filter: blur(9px) brightness(0.97);
  transform: scale(1.04);
}

.tool-teaser-front {
  position: relative;
  display: block;
  width: 100%;
  max-height: 300px;
  object-fit: cover;
  object-position: top;
  border-radius: 8px;
  transform: rotate(-1.4deg);
  box-shadow: 0 8px 22px rgba(45, 42, 38, 0.22);
}

.inhalt-bild-hinweis {
  font-size: 0.78rem;
  color: var(--text-soft);
  margin-top: 0.4rem;
}

.inhalt-cta {
  display: inline-block;
  background: var(--page-accent);
  color: #fff;
  text-decoration: none;
  border: none;
  border-radius: 100px;
  padding: 0.7rem 1.5rem;
  font-size: 0.95rem;
  font-weight: 700;
  margin-top: 0.8rem;
  transition: background 0.2s;
}

.inhalt-cta:hover { background: var(--page-accent-dark); }

.inhalt-cta.sekundaer {
  background: transparent;
  color: var(--page-accent-dark);
  border: 1.5px solid var(--page-accent);
  margin-left: 0.5rem;
}

.inhalt-cta.sekundaer:hover { background: var(--page-accent-soft); }

/* Sofort-Modus: Wiederkommer und Rueckkehr von Unterseiten bauen
   die Seite ohne Animation auf */
.kacheln.sofort .kachel,
.kacheln.sofort .andere-titel {
  animation: none;
}

.kacheln.sofort .kachel.gleitet { transition: none; }
.kacheln.sofort .kachel-inhalt { transition: none; }
.kacheln.sofort .kachel-inhalt-innen > * { transition: none; }

/* Videoplatzhalter fuer Zuschauen, als Link antippbar */
a.inhalt-video { text-decoration: none; }

.inhalt-video {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  margin-top: 0.8rem;
  background:
    radial-gradient(ellipse at 30% 30%, rgba(255, 255, 255, 0.14), transparent 55%),
    linear-gradient(160deg, #4a443d 0%, #2d2a26 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-play {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-play::after {
  content: "";
  border-style: solid;
  border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent #fff;
  margin-left: 4px;
}

.video-dauer {
  position: absolute;
  right: 0.7rem;
  bottom: 0.6rem;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: 6px;
  padding: 0.1rem 0.45rem;
}

/* Ueberschrift zwischen geoeffneter Kachel und den uebrigen */
.andere-titel {
  font-family: 'Lora', serif;
  font-weight: 600;
  font-size: 1.05rem;
  margin: 0.9rem 0 0.1rem;
  animation: blockUp 0.4s ease both;
}

/* --- Ruhiger Ausgang --- */
.ziel-ausgang {
  margin-top: 1.8rem;
  text-align: center;
  font-size: 0.88rem;
  color: var(--text-soft);
  animation: blockUp 0.4s ease both;
}

.ziel-ausgang a {
  color: var(--page-accent-dark);
  font-weight: 700;
}

.ziel-footer {
  margin-top: 1.2rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--card-border);
  text-align: center;
  font-size: 0.75rem;
}

.ziel-footer a {
  color: var(--text-soft);
  text-decoration: none;
  margin: 0 0.7rem;
}

.ziel-footer a:hover { color: var(--page-accent-dark); }

/* --- Animationen --- */
@keyframes blockUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

/* JS setzt beim Umsortieren transform-Startwerte, diese Klasse laesst sie ausgleiten */
.kachel.gleitet {
  transition: transform 0.65s cubic-bezier(0.3, 0.8, 0.3, 1);
}

/* --- Neugier-Seite --- */
.neugier-hero { padding: 2.4rem 0 1.6rem; }

.neugier-hero h1 {
  font-family: 'Lora', serif;
  font-weight: 700;
  font-size: 1.8rem;
  line-height: 1.25;
}

.neugier-hero p { margin-top: 0.8rem; color: var(--text-soft); }

.neugier-block {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 18px;
  padding: 1.2rem 1.1rem;
  margin-bottom: 0.9rem;
}

.neugier-block h2 {
  font-family: 'Lora', serif;
  font-weight: 600;
  font-size: 1.15rem;
  margin-bottom: 0.4rem;
}

.neugier-block p { font-size: 0.95rem; color: var(--text-soft); }

.neugier-absprung {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin: 1.3rem 0;
}

.neugier-absprung a {
  display: inline-block;
  text-decoration: none;
  border-radius: 100px;
  padding: 0.65rem 1.3rem;
  font-size: 0.9rem;
  font-weight: 700;
  min-height: 44px;
}

.neugier-absprung a.primaer { background: var(--page-accent); color: #fff; }

.neugier-absprung a.sekundaer {
  border: 1.5px solid var(--card-border);
  color: var(--text);
  background: var(--card-bg);
}

/* --- Reduzierte Bewegung: Einblendung ohne Bewegung --- */
@media (prefers-reduced-motion: reduce) {
  body { transition: none; }

  @keyframes blockUp {
    from { opacity: 0; transform: none; }
    to { opacity: 1; transform: none; }
  }

  .kachel.gleitet { transition: none; }
  .kachel-inhalt { transition: none; }
  .kachel-inhalt-innen > * { transition: opacity 0.3s ease; }
  .frage-btn:active, .antwort-zeile:active { transform: none; }
}

/* --- Kleine Hoehen: Einstieg bleibt ohne Scrollen sichtbar --- */
@media (max-height: 700px) {
  .ankuendigung { margin-top: 1.2rem; }
  #schritt-frage1 .schritt-label { margin-top: 1.6rem; }
  .frage1-titel { font-size: 1.35rem; }
  .fragen-liste { gap: 0.4rem; margin-top: 0.8rem; }
  .frage-btn { min-height: 46px; padding: 0.6rem 1rem; }
}

:focus-visible {
  outline: 2px solid var(--page-accent);
  outline-offset: 2px;
}

/* Social-Kanaele unter dem Fuss der fertigen Seite. Klein und ruhig,
   sie sollen den Aufbau nicht stoeren (Alex 18.08.: ohne Twitch). */
.ziel-social {
  display: flex;
  justify-content: center;
  gap: 22px;
  margin: 18px 0 34px;
}
.ziel-social a {
  color: var(--text-soft);
  display: inline-flex;
  transition: color .2s ease, transform .2s ease;
}
.ziel-social a:hover,
.ziel-social a:focus-visible { color: var(--page-accent-dark); transform: translateY(-1px); }
.ziel-social svg { width: 22px; height: 22px; display: block; }

/* Kontaktweg in einem Neugier-Block (Schulen und Entscheider) */
.neugier-kontakt { margin-top: 10px; }
.neugier-kontakt a { color: var(--page-accent-dark); font-weight: 700; }