/* SehlenReise – statische Seite zum Kartenset
   Layout: Ein tintenblaues Register mit allen 59 Kartennamen öffnet die Seite wie der Deckel der Schachtel;
   darunter eine ruhige Lesespalte, in der jede Karte in einem Goldrahmen steht. */

@font-face { font-family: "Literata"; src: url("../fonts/literata.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Literata"; src: url("../fonts/literata-italic.woff2") format("woff2"); font-weight: 200 900; font-style: italic; font-display: swap; }

:root {
  /* Farben */
  --tinte: #1D2050;        /* Indigo der Schachtel-Konturen: Kopfbereich, Text */
  --tinte-2: #2A2E6B;      /* Flächen auf Tinte */
  --butter: #F6E38A;       /* Gelb des Schriftzugs auf der Schachtel */
  --papier: #F4F4F8;       /* Seitenhintergrund, leicht zum Indigo hin gestimmt */
  --flaeche: #FFFFFF;      /* Eingabefeld, Video-Hülle */
  --text: #1D2050;
  --text-leise: #4A4E72;
  --linie: #DADBE7;
  --gold: #B48A22;         /* Goldrand der Karten */
  --gold-text: #7E6111;    /* Gold als Schriftfarbe, lesbar auf Papier */
  --herz: #E2457F;         /* Herz der Schachtel: Fokus, Hover im Register */
  --kopf-text: #E9EAF7;
  --kopf-leise: #B7B9DA;
  /* Schlagwörter: vier Seiten derselben Medaille */
  --positiv: #1E7A54;
  --negativ: #B0285D;
  --chance: #2551B3;
  --schwaeche: #A2540A;

  /* Schrift */
  --serif: "Literata", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --s-klein: 0.875rem;
  --s-text: 1.0625rem;
  --s-mittel: 1.3rem;
  --s-gross: clamp(1.6rem, 1.2rem + 1.6vw, 2.1rem);
  --s-karte: clamp(2.1rem, 1.5rem + 3vw, 3.3rem);
  --s-marke: clamp(3.1rem, 1.6rem + 7.5vw, 6.8rem);

  --spalte: 42rem;
  --breit: 72rem;
  --rand: max(16px, env(safe-area-inset-left, 0px));
  --rand-r: max(16px, env(safe-area-inset-right, 0px));
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tinte: #20235A; --tinte-2: #2C3070; --butter: #F6E38A;
    --papier: #14163A; --flaeche: #1C1F4A; --text: #E6E7F2; --text-leise: #A9ACCB;
    --linie: #33366A; --gold: #D4AD4A; --gold-text: #E2C26A; --herz: #F06A9B; --kopf-text: #E9EAF7; --kopf-leise: #B7B9DA;
    --positiv: #5FCB9C; --negativ: #F17DAA; --chance: #8EABF6; --schwaeche: #F2A85E;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --tinte: #20235A; --tinte-2: #2C3070; --butter: #F6E38A;
  --papier: #14163A; --flaeche: #1C1F4A; --text: #E6E7F2; --text-leise: #A9ACCB;
  --linie: #33366A; --gold: #D4AD4A; --gold-text: #E2C26A; --herz: #F06A9B; --kopf-text: #E9EAF7; --kopf-leise: #B7B9DA;
  --positiv: #5FCB9C; --negativ: #F17DAA; --chance: #8EABF6; --schwaeche: #F2A85E;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 1rem; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--papier);
  color: var(--text);
  font-family: var(--serif);
  font-size: var(--s-text);
  line-height: 1.68;
  font-optical-sizing: auto;
  hyphens: auto;
  -webkit-hyphens: auto;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--herz); outline-offset: 3px; border-radius: 3px; }
h1, h2, h3, h4 { line-height: 1.15; text-wrap: balance; margin: 0; font-weight: 750; letter-spacing: -0.01em; hyphens: manual; }
p { margin: 0; }
.nur-vorleser { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { max-width: var(--breit); margin-inline: auto; padding-left: var(--rand); padding-right: var(--rand); }
.spalte { max-width: calc(var(--spalte) + 32px); margin-inline: auto; padding-left: var(--rand); padding-right: var(--rand); }

/* ---------- Kopf ---------- */
.kopf { background: var(--tinte); color: var(--kopf-text); }
.kopf .wrap { padding-block: 1.1rem 2.6rem; }
.kopf-leiste { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.marke-klein { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; font-weight: 700; font-size: 1.05rem; color: var(--butter); }
.marke-klein img { width: 2rem; height: 2rem; flex: none; }
.kopf-nav { display: flex; gap: 0.4rem 1.2rem; flex-wrap: wrap; font-size: var(--s-klein); }
.kopf-nav a { color: var(--kopf-leise); text-decoration: none; }
.kopf-nav a:hover, .kopf-nav a[aria-current] { color: var(--butter); }

.kopf-oben { display: grid; gap: 2rem; align-items: end; }
.schachtel { display: none; }
@media (min-width: 760px) {
  .kopf-oben { grid-template-columns: minmax(0, 1fr) auto; }
  .schachtel { display: block; width: 13rem; margin: 0 1.5rem 0 0; transform: rotate(4deg); }
  .schachtel img { border-radius: 4px; box-shadow: 0 22px 40px -18px rgb(0 0 0 / 0.7); }
}
.marke { font-size: var(--s-marke); font-weight: 800; font-style: italic; color: var(--butter); letter-spacing: -0.03em; line-height: 0.95; margin-top: 2.2rem; }
.marke-unter { max-width: 34rem; color: var(--kopf-text); font-size: var(--s-mittel); line-height: 1.45; margin-top: 1rem; }

.suche { margin-top: 2.2rem; display: grid; gap: 0.5rem; max-width: 30rem; }
.suche label { font-weight: 650; font-size: var(--s-text); color: var(--butter); }
.suche input {
  font: inherit; font-size: 1.1rem; width: 100%;
  padding: 0.7rem 0.9rem; border-radius: 6px;
  border: 1px solid transparent; background: var(--flaeche); color: var(--text);
}
.suche input::placeholder { color: var(--text-leise); }
.suche-hinweis { font-size: var(--s-klein); color: var(--kopf-leise); min-height: 1.4em; }

.register { margin-top: 1.6rem; }
.register ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 1.05rem; }
.register a {
  font-size: clamp(1.18rem, 0.95rem + 1.1vw, 1.65rem); font-weight: 450; font-style: italic;
  color: var(--kopf-text); text-decoration: none; letter-spacing: -0.005em;
  border-bottom: 2px solid transparent; padding-bottom: 0.05em;
}
.register a:hover { color: var(--butter); border-bottom-color: var(--herz); }
.register li { white-space: nowrap; }
.register .buchstabe {
  font-weight: 800; font-size: clamp(1.18rem, 0.95rem + 1.1vw, 1.65rem); color: var(--butter);
  display: inline-block; min-width: 1.15em; margin-left: 0.7rem; margin-right: 0.35rem;
}
.register li:first-child .buchstabe { margin-left: 0; }
.register.gefiltert .buchstabe { display: none; }

.neu-hier { margin-top: 2rem; font-size: var(--s-klein); color: var(--kopf-leise); }
.neu-hier a { color: var(--butter); }

.kopf-schmal .wrap { padding-block: 1.1rem 2.2rem; }
.kopf-schmal h1 { font-size: var(--s-karte); color: var(--butter); font-style: italic; font-weight: 800; margin-top: 2rem; }
.kopf-schmal .unterzeile { color: var(--kopf-text); margin-top: 0.8rem; max-width: 38rem; font-size: var(--s-mittel); line-height: 1.45; }

/* ---------- Abschnitte ---------- */
main { display: block; }
.abschnitt { padding-block: 3.5rem 1rem; }
.abschnitt > .spalte { display: grid; gap: 1.1rem; }
.abschnitt h2 { font-size: var(--s-gross); margin-top: 1.4rem; }
.abschnitt h2:first-child { margin-top: 0; }
.abschnitt h3 { font-size: var(--s-mittel); margin-top: 1rem; }
.leise { color: var(--text-leise); }
.klein { font-size: var(--s-klein); }
ol, ul { margin: 0; padding-left: 1.3rem; display: grid; gap: 0.35rem; }

.video { position: relative; aspect-ratio: 16 / 9; max-width: 100%; border-radius: 8px; overflow: hidden; background: var(--tinte); }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-start {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 0.6rem;
  padding: 1rem; text-align: center; color: var(--kopf-text); text-decoration: none; background: var(--tinte);
  border: 0; font: inherit; cursor: pointer; width: 100%;
}
.video-start .play {
  width: 4.2rem; height: 4.2rem; border-radius: 50%; background: var(--butter); position: relative;
  transition: transform .2s ease;
}
.video-start .play::after {
  content: ""; position: absolute; left: 54%; top: 50%; transform: translate(-50%, -50%);
  border-style: solid; border-width: 0.75rem 0 0.75rem 1.2rem; border-color: transparent transparent transparent var(--tinte);
}
.video-start:hover .play { transform: scale(1.06); }
.video-start strong { font-size: var(--s-mittel); font-weight: 650; }
.video-start small { font-size: 0.8rem; color: var(--kopf-leise); max-width: 26rem; line-height: 1.4; }
figcaption { font-size: var(--s-klein); color: var(--text-leise); margin-top: 0.5rem; }

.knopf {
  display: inline-flex; align-items: center; gap: 0.55rem; justify-self: start;
  background: var(--tinte); color: var(--butter); text-decoration: none; font-weight: 650;
  padding: 0.65rem 1.05rem; border-radius: 6px; line-height: 1.3;
}
.knopf:hover { background: var(--tinte-2); }
.knopf small { font-weight: 400; color: var(--kopf-leise); }
.knoepfe { display: flex; flex-wrap: wrap; gap: 0.6rem; }

.beispiel { display: grid; grid-template-columns: max-content 1fr; gap: 0.4rem 1rem; margin: 0; padding: 1rem 0 1rem 1.1rem; border-left: 3px solid var(--gold); }
.beispiel dt { font-weight: 700; }
.beispiel dd { margin: 0; min-width: 0; }

.legeplaene { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem; }
.legeplaene a { display: block; border: 2px solid var(--gold); border-radius: 6px; overflow: hidden; background: var(--flaeche); }
.legeplaene img { width: 100%; aspect-ratio: 210 / 297; object-fit: cover; }

/* ---------- Karten ---------- */
.karten-kopf { display: grid; gap: 1rem; }
.karte { padding-block: 3.2rem; border-top: 1px solid var(--linie); }
.karte:first-of-type { border-top: 0; }
.karte > .spalte { display: grid; gap: 1.15rem; }
.karte-bild {
  margin: 0; border: 3px solid var(--gold); border-radius: 12px; overflow: hidden; background: var(--tinte);
  aspect-ratio: 1024 / 609; max-width: 100%;
}
.karte-bild img { width: 100%; height: 100%; object-fit: cover; }
.karte h3 { font-size: var(--s-karte); font-weight: 800; letter-spacing: -0.02em; margin-top: 0.4rem; scroll-margin-top: 1rem; }
.anhoeren { display: grid; gap: 0.35rem; }
.anhoeren span { font-size: var(--s-klein); color: var(--text-leise); }
.anhoeren audio { width: 100%; height: 2.6rem; }
.platzhalter { font-size: var(--s-klein); color: var(--text-leise); border: 1px dashed var(--linie); border-radius: 6px; padding: 0.6rem 0.8rem; }

.erklaerung { display: grid; gap: 0.9rem; }

details { border-top: 1px solid var(--linie); }
details:last-of-type { border-bottom: 1px solid var(--linie); }
summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-block: 0.8rem; font-weight: 650; font-size: 1.12rem;
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: ""; flex: none; width: 0.6rem; height: 0.6rem; margin-right: 0.3rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-0.15rem);
  transition: transform .2s ease;
}
details[open] > summary::after { transform: rotate(-135deg) translateY(-0.1rem); }
summary:hover { color: var(--gold-text); }
.aufgeklappt { display: grid; gap: 0.9rem; padding-bottom: 1.4rem; }
.erklaerung details.weiter { border: 0; }
.erklaerung details.weiter summary { font-size: var(--s-klein); font-weight: 600; color: var(--text-leise); justify-content: flex-start; padding-block: 0.2rem; }
.erklaerung details.weiter[open] summary { display: none; }
.erklaerung details.weiter .aufgeklappt { padding-bottom: 0; }

@media (prefers-reduced-motion: no-preference) {
  details { interpolate-size: allow-keywords; }
  details::details-content { height: 0; overflow: clip; transition: height .28s ease, content-visibility .28s allow-discrete; }
  details[open]::details-content { height: auto; }
}

.seiten { display: grid; gap: 1.4rem 1.6rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.seite { border-top: 3px solid var(--farbe); padding-top: 0.7rem; min-width: 0; }
.seite h4 { font-size: 1rem; color: var(--farbe); font-weight: 750; margin-bottom: 0.5rem; letter-spacing: 0; }
.seite ul { list-style: none; padding: 0; gap: 0.55rem; font-size: 0.98rem; line-height: 1.55; }
.seite b { font-weight: 700; }
.seite-positiv { --farbe: var(--positiv); }
.seite-negativ { --farbe: var(--negativ); }
.seite-chance { --farbe: var(--chance); }
.seite-schwaeche { --farbe: var(--schwaeche); }

.fragen { list-style: none; padding: 0; gap: 0.6rem; }
.fragen li { padding-left: 1.4rem; position: relative; }
.fragen li::before { content: "?"; position: absolute; left: 0; font-weight: 800; color: var(--gold); }

.zitat { margin: 0.6rem 0 0; padding: 0 0 0 2.4rem; position: relative; }
.zitat::before { content: "„"; position: absolute; left: 0; top: -1.4rem; font-size: 4.2rem; line-height: 1; color: var(--gold); font-weight: 800; }
.zitat p { font-style: italic; font-size: var(--s-mittel); line-height: 1.45; }
.zitat footer { margin-top: 0.5rem; color: var(--text-leise); font-size: var(--s-klein); }

.zurueck { font-size: var(--s-klein); color: var(--text-leise); justify-self: start; }

/* ---------- Bücher & Tools ---------- */
.buecher { display: grid; gap: 1.6rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.buch { display: grid; grid-template-columns: 6.5rem 1fr; gap: 1rem; align-items: start; }
.buch img { width: 6.5rem; border-radius: 3px; box-shadow: 0 6px 18px -8px rgb(20 22 58 / 0.55); }
.buch > div { display: grid; gap: 0.4rem; min-width: 0; }
.buch h3 { font-size: 1.25rem; margin: 0; }
.buch .autor { font-size: var(--s-klein); color: var(--text-leise); }

.hinweis-hilfe { border: 2px solid var(--herz); border-radius: 8px; padding: 1rem 1.1rem; display: grid; gap: 0.4rem; }
.hinweis-hilfe strong { font-size: 1.05rem; }

.tools h2 { font-size: var(--s-gross); margin-top: 2.2rem; }
.tools h3 { font-size: 1.05rem; margin-top: 0.4rem; color: var(--gold-text); }

/* ---------- Fuß ---------- */
.fuss { background: var(--tinte); color: var(--kopf-leise); margin-top: 4rem; font-size: var(--s-klein); }
.fuss .wrap { padding-block: 2.2rem 2.6rem; display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; align-items: baseline; }
.fuss nav { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; }
.fuss a { color: var(--kopf-text); }

.alle-karten {
  position: fixed; z-index: 5;
  right: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  background: var(--tinte); color: var(--butter); text-decoration: none; font-weight: 650; font-size: var(--s-klein);
  padding: 0.6rem 1rem; border-radius: 6px; box-shadow: 0 8px 24px -10px rgb(20 22 58 / 0.6);
  border: 1px solid var(--tinte-2);
}

/* Rechtstexte */
.recht h2 { font-size: 1.3rem; margin-top: 1.6rem; }
.recht address { font-style: normal; }

@media (min-width: 900px) {
  .kopf .wrap { padding-block: 1.4rem 3.4rem; }
  .karte-bild { margin-inline: -2.5rem; max-width: calc(100% + 5rem); }
}

/* Nur Vorschau: Platzhalter, bis die Kartenbilder da sind */
.bild-platzhalter {
  width: 100%; height: 100%; display: grid; place-items: end start; padding: 1rem;
  background:
    radial-gradient(circle at 22% 30%, var(--herz) 0 12%, transparent 13%),
    radial-gradient(circle at 70% 64%, var(--butter) 0 10%, transparent 11%),
    radial-gradient(circle at 82% 20%, var(--positiv) 0 14%, transparent 15%),
    repeating-radial-gradient(circle at 45% 55%, var(--chance) 0 9px, var(--tinte-2) 9px 18px);
}
.bild-platzhalter span { background: var(--tinte); color: var(--butter); font-size: var(--s-klein); padding: 0.25rem 0.6rem; border-radius: 4px; }
.vorschau-band { background: var(--butter); color: var(--tinte); font-size: var(--s-klein); }
.vorschau-band .wrap { padding-block: 0.5rem; }