/* ==========================================================================
   Hypnose MegaPack — Workbook, Online-Fassung

   Das gedruckte Heft ist A4 und in Millimetern gesetzt (workbook/workbook.css).
   Diese Datei setzt denselben Inhalt fuer den Bildschirm: fliessend, mobil
   zuerst, mit echten Eingabefeldern. Erzeugt wird das Markup von
   workbook/online.py.

   Farben und Schriften sind unveraendert die der Website.
   ========================================================================== */

:root {
  --cream:     #f6f4ec;
  --cream2:    #fbfaf3;
  --card:      #ffffff;
  --sage:      #8aa88f;
  --green:     #4e7a5e;
  --green2:    #3f6b50;
  --forest:    #2f3e34;
  --muted:     #6f7d70;
  --peach:     #eaa07f;
  --peachsoft: #f3c9b3;
  --linie:     rgba(138, 168, 143, .55);
  --rahmen:    rgba(78, 122, 94, .18);
  --kopf-hoehe: 56px;
}

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

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

body {
  margin: 0;
  background: var(--cream);
  color: var(--forest);
  font-family: Nunito, system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.62;
}

h1, h2, h3, h4 { font-family: Fraunces, Georgia, serif; font-weight: 600; line-height: 1.18; margin: 0 0 .5em; }
h1 { font-size: clamp(1.7rem, 5vw, 2.3rem); }
h2 { font-size: clamp(1.35rem, 4vw, 1.7rem); }
h3 { font-size: 1.15rem; }
h4 { font-size: 1rem; margin-bottom: .3em; }
p  { margin: 0 0 .85em; }
a  { color: var(--green); }
img { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0 0 .9em; padding-left: 1.25em; }
li { margin-bottom: .35em; }

.eyebrow {
  font-size: .72rem; font-weight: 800; letter-spacing: .2em;
  text-transform: uppercase; color: var(--peach); margin-bottom: .6em;
}
.lede { font-size: 1.08rem; color: var(--muted); }
.klein { font-size: .88rem; color: var(--muted); }
.akzent { color: var(--peach); }
.hairline { height: 2px; margin: 1.4em 0; background: linear-gradient(90deg, transparent, rgba(234,160,127,.55), transparent); }
/* Traegt im Druck den Kolumnentitel, auf dem Bildschirm nichts. */
.runner { display: none; }

/* --- Kopfleiste ----------------------------------------------------------- */

.wb-kopf {
  position: sticky; top: 0; z-index: 20;
  background: rgba(251, 250, 243, .94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rahmen);
}
/* Umbrechend: auf 390 px passen Marke, Fortschritt und zwei Knoepfe nicht in
   eine Zeile — ohne Umbruch schoebe die Leiste die ganze Seite nach rechts. */
.wb-kopf__innen {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px 12px;
  max-width: 52rem; margin: 0 auto; padding: 10px 16px;
  min-height: var(--kopf-hoehe);
}
.wb-marke { font-family: Fraunces, serif; font-size: 1.05rem; font-weight: 600; text-decoration: none; color: var(--forest); white-space: nowrap; }
.wb-marke span { color: var(--green); }
.wb-kopf__rechts { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.wb-fortschritt { font-size: .74rem; font-weight: 700; color: var(--muted); white-space: nowrap; }
.wb-knopf {
  border: 1px solid var(--rahmen); border-radius: 999px;
  background: var(--card); color: var(--green); cursor: pointer;
  font: 700 .78rem/1 Nunito, sans-serif; padding: 8px 14px;
  min-height: 36px;
}
.wb-knopf:hover { border-color: var(--green); }
.wb-knopf--still { color: var(--muted); }
/* Zurueck geht einen Schritt in der Browser-Historie (assets/zurueck.js),
   nicht auf ein festes Ziel — vorher musste man dafuer die Marke anklicken. */
.wb-zurueck { display: inline-flex; align-items: center; gap: 6px; }
.wb-zurueck::before { content: "←"; font-size: 1rem; line-height: 1; }

.wb-nav { border-top: 1px solid var(--rahmen); }
.wb-nav > summary {
  max-width: 52rem; margin: 0 auto; padding: 10px 16px;
  cursor: pointer; font-weight: 800; font-size: .85rem; color: var(--green);
  list-style: none;
}
.wb-nav > summary::-webkit-details-marker { display: none; }
.wb-nav > summary::after { content: " ▾"; }
.wb-nav[open] > summary::after { content: " ▴"; }
.wb-nav__liste {
  max-width: 52rem; margin: 0 auto; padding: 0 16px 14px;
  list-style: none; max-height: 60vh; overflow-y: auto;
}
.wb-nav__liste a { text-decoration: none; display: block; padding: 7px 0; }
.wb-nav__teil a { font-family: Fraunces, serif; font-weight: 600; color: var(--forest); margin-top: 8px; }
.wb-nav__kapitel a { font-size: .9rem; color: var(--muted); padding-left: 14px; }
.wb-nav__kapitel a:hover, .wb-nav__teil a:hover { color: var(--green); }

/* --- Auszugsbanner -------------------------------------------------------- */

.wb-banner {
  max-width: 52rem; margin: 18px auto 0; padding: 16px 18px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px;
  background: var(--peachsoft); border-radius: 18px;
}
.wb-banner p { margin: 0; flex: 1 1 16rem; font-size: .92rem; }
.wb-banner__cta {
  background: linear-gradient(100deg, #5c9a72, #4e7a5e);
  color: #fff; text-decoration: none; font-weight: 800; font-size: .9rem;
  padding: 12px 22px; border-radius: 999px; white-space: nowrap;
}

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

.wb-blatt { max-width: 52rem; margin: 0 auto; padding: 8px 16px 64px; }

.wb-seite {
  background: var(--card);
  border: 1px solid var(--rahmen);
  border-radius: 20px;
  padding: 26px 20px;
  margin: 18px 0;
  scroll-margin-top: calc(var(--kopf-hoehe) + 12px);
}
.wb-seite--voll { padding: 0; overflow: hidden; border: 0; }
.wb-seite > :last-child { margin-bottom: 0; }

/* --- Titelseite und Teiltrenner ------------------------------------------- */

.cover { position: relative; }
.cover__bild { width: 100%; }
.cover__text { padding: 24px 20px 8px; }
.cover__marke { font-family: Fraunces, serif; font-weight: 700; color: var(--green); display: block; margin-bottom: 10px; }
.cover h1 { font-size: clamp(2rem, 7vw, 3rem); }
.cover__fuss { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 0 20px 22px; font-size: .8rem; color: var(--muted); }

.trenner {
  position: relative; min-height: 58vh;
  background-size: cover; background-position: center;
  display: flex; align-items: flex-end;
}
.trenner::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(47,62,52,.15), rgba(47,62,52,.82));
}
.trenner__inhalt { position: relative; z-index: 1; padding: 28px 22px; color: #fff; }
.trenner__inhalt h1 { color: #fff; }
.trenner__nr { font-family: Fraunces, serif; font-size: .85rem; letter-spacing: .2em; text-transform: uppercase; opacity: .85; }
.trenner__unter { font-size: 1.02rem; opacity: .92; }
.trenner__frage { font-style: italic; opacity: .9; margin: 0; }

/* --- Kapitelauftakt ------------------------------------------------------- */

.auftakt__bild { width: 100%; border-radius: 14px; margin-bottom: 18px; }
.auftakt__titel { margin-bottom: .35em; }
.auftakt__punkte { background: var(--cream2); border-radius: 14px; padding: 16px 18px; margin-top: 18px; }
.auftakt__label { font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--green); margin-bottom: .5em; }
.auftakt__motto { margin-top: 18px; font-family: Fraunces, serif; font-size: 1.05rem; color: var(--green); }

/* --- Bausteine ------------------------------------------------------------ */

.hinweis {
  background: var(--cream2); border-left: 4px solid var(--sage);
  border-radius: 0 14px 14px 0; padding: 14px 16px; margin: 16px 0;
}
.hinweis__titel { font-weight: 800; color: var(--green); margin-bottom: .3em; }
.hinweis p:last-child { margin-bottom: 0; }

.sicherheit {
  background: rgba(234, 160, 127, .16); border: 1px solid rgba(234, 160, 127, .5);
  border-radius: 16px; padding: 16px 18px; margin: 18px 0;
}
.sicherheit__titel { font-weight: 800; color: #b4602f; margin-bottom: .4em; }
.sicherheit__fuss { font-size: .88rem; color: var(--muted); margin-bottom: 0; }

.baustein__label {
  display: inline-block; font-size: .7rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--green);
  background: rgba(78, 122, 94, .1); border-radius: 999px; padding: 4px 11px; margin-bottom: .6em;
}
.baustein__intro { color: var(--muted); }

.uebung, .checkliste, .arbeitsliste, .blatt, .sessionverweis, .glossar, .karte {
  background: var(--cream2); border: 1px solid var(--rahmen);
  border-radius: 16px; padding: 18px; margin: 18px 0;
}
.uebung__teil { margin-bottom: 14px; }
.uebung__marke { font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--sage); margin-bottom: .3em; }

.sessionverweis ul { list-style: none; padding: 0; margin: 0; }
.sessionverweis li { display: flex; align-items: baseline; gap: 10px; padding: 7px 0; border-top: 1px solid var(--rahmen); }
.sv__kopf { font-weight: 800; color: var(--green); margin-bottom: .2em; }
.sv__nr { font-family: Fraunces, serif; color: var(--green); font-weight: 600; min-width: 2.2em; }
.sv__titel { flex: 1; }
.sv__paket { font-size: .72rem; font-weight: 800; color: var(--muted); border: 1px solid var(--rahmen); border-radius: 999px; padding: 2px 8px; }

.schritte { padding-left: 1.1em; }
.schritt__kopf { font-weight: 800; }

.zwei, .drei { display: grid; gap: 16px; }
@media (min-width: 640px) {
  .zwei { grid-template-columns: 1fr 1fr; }
  .drei { grid-template-columns: repeat(3, 1fr); }
}
.karte h4 { color: var(--green); }
.karte p { color: var(--muted); font-size: .92rem; margin-bottom: 0; }

.welt { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 20px; }
.welt__bild { flex: none; width: 68px; height: 68px; border-radius: 12px; object-fit: cover; }
.welt__text { flex: 1; min-width: 0; }
.welt__kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; }
.welt__meta { font-size: .76rem; color: var(--muted); white-space: nowrap; }
.welt p { font-size: .92rem; color: var(--muted); margin-bottom: .4em; }
.welt__frage { font-size: .78rem; color: var(--sage); }

.uebung__kopf { margin-bottom: 12px; }
.blatt--woche { background: rgba(138, 168, 143, .1); }
.blatt__reihe { margin-bottom: 10px; }
.inhalt__titel { color: var(--forest); }
.katalog__spalte { min-width: 0; }
.wb-seite--auftakt { background: linear-gradient(180deg, var(--cream2), var(--card)); }

.glossar__eintrag { padding: 9px 0; border-top: 1px solid var(--rahmen); }
.glossar__wort { font-weight: 800; color: var(--green); }
.glossar__text { color: var(--muted); }

.inhalt__zeile { display: flex; align-items: baseline; gap: 8px; padding: 5px 0; }
.inhalt__nr { font-family: Fraunces, serif; color: var(--green); font-weight: 600; min-width: 1.8em; }
.inhalt__punkte { flex: 1; border-bottom: 1px dotted var(--linie); }
.inhalt__seite { font-family: Fraunces, serif; color: var(--muted); font-size: .9rem; }
.inhalt__teil { font-family: Fraunces, serif; font-weight: 600; color: var(--forest); margin-top: 16px; }

.katalog { display: grid; gap: 8px 24px; }
@media (min-width: 640px) { .katalog { grid-template-columns: 1fr 1fr; } }
.katalog__welt { font-weight: 800; color: var(--green); margin-top: 12px; font-size: .9rem; }
.katalog__zeile { display: flex; align-items: baseline; gap: 8px; font-size: .88rem; padding: 2px 0; }
.katalog__nr { font-family: Fraunces, serif; color: var(--sage); min-width: 2.2em; text-align: right; }
.katalog__titel { flex: 1; }
.katalog__paket { font-size: .7rem; font-weight: 800; color: var(--muted); }

.anbieter, .schluss { color: var(--muted); }
.kopfgruppe { margin-bottom: 8px; }

/* --- Tabellen ------------------------------------------------------------- */

/* Der Themenkompass ist die wichtigste Tabelle des Hefts (Situation → Welt →
   drei Sessions). Auf schmalen Bildschirmen wird aus jeder Zeile eine Karte,
   statt drei Spalten in 420 px zu quetschen. */
.kompass { width: 100%; border-collapse: collapse; font-size: .92rem; }
.kompass th {
  text-align: left; font-size: .74rem; font-weight: 800; letter-spacing: .04em;
  color: #fff; background: var(--green); padding: 8px 10px;
}
.kompass td { padding: 9px 10px; vertical-align: top; border-bottom: 1px solid var(--rahmen); }
.kompass__situation { font-weight: 700; }
.kompass__welt { color: var(--green); }
.kompass__sessions { color: var(--muted); font-size: .88rem; }

@media (max-width: 640px) {
  .kompass, .kompass tbody, .kompass tr, .kompass td { display: block; width: 100%; }
  .kompass thead { display: none; }
  .kompass tr {
    background: var(--card); border: 1px solid var(--rahmen);
    border-radius: 14px; padding: 12px 14px; margin-bottom: 10px;
  }
  .kompass td { border: 0; padding: 2px 0; }
  .kompass__welt::before { content: "Themenwelt: "; color: var(--muted); font-weight: 700; }
  .kompass__sessions::before { content: "Fang damit an: "; color: var(--muted); font-weight: 700; display: block; margin-top: 4px; }
}

.arbeitsliste { overflow-x: auto; }
.tabelle { width: 100%; min-width: 30rem; border-collapse: collapse; font-size: .9rem; }
.tabelle th {
  text-align: left; font-size: .76rem; font-weight: 800; letter-spacing: .04em;
  color: #fff; background: var(--green); padding: 8px 10px;
}
.tabelle th:first-child { border-radius: 10px 0 0 0; }
.tabelle th:last-child { border-radius: 0 10px 0 0; }
.tabelle td { border-bottom: 1px solid var(--rahmen); padding: 4px 8px; vertical-align: middle; }

/* --- Eintragsflaechen ----------------------------------------------------- */

.frage { font-weight: 700; margin: 0 0 .35em; }
.frage--klein { font-size: .92rem; }
.nachfrage { margin-top: 18px; }

.wb-feld {
  display: block; width: 100%;
  font: inherit; color: var(--forest);
  background: var(--card);
  border: 1px solid var(--rahmen); border-radius: 12px;
  padding: 10px 12px; margin-bottom: 14px;
  resize: vertical; overflow: hidden;
  line-height: 1.6;
}
.wb-feld:focus, .wb-zeile:focus, .wb-zelle:focus {
  outline: 0; border-color: var(--green); box-shadow: 0 0 0 3px rgba(78, 122, 94, .16);
}
.wb-zeile {
  font: inherit; color: var(--forest); background: transparent;
  border: 0; border-bottom: 1px solid var(--linie);
  padding: 4px 2px; min-width: 6rem; width: 100%;
}
.blatt__zeile .wb-zeile { width: 7rem; }
.blatt__zeile .wb-zeile--kurz { width: 4.5rem; }
.wb-zelle {
  font: inherit; font-size: .9rem; color: var(--forest); background: transparent;
  border: 0; border-bottom: 1px solid var(--linie); width: 100%; padding: 6px 2px;
}

.blatt__kopf {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline;
  gap: 8px 16px; margin-bottom: 14px;
}
.blatt__marke { font-family: Fraunces, serif; font-weight: 600; font-size: 1.1rem; color: var(--forest); }
.blatt__zeile { font-size: .82rem; color: var(--muted); display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.blatt__feld { margin-bottom: 12px; }
.blatt__feld span { display: block; font-weight: 700; font-size: .92rem; margin-bottom: .2em; }

/* Kontrollkaestchen und Skalen: grosse Trefferflaechen fuer den Daumen. */
.wahl { margin-bottom: 14px; }
.wahl > div { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.wahl__opt, .wb-haken { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: .94rem; min-height: 32px; }
.wb-haken { align-items: flex-start; }
.checkliste ul { list-style: none; padding: 0; margin: 0; }
.checkliste li { padding: 6px 0; border-top: 1px solid var(--rahmen); }

input[type="checkbox"], input[type="radio"] {
  appearance: none; -webkit-appearance: none;
  width: 22px; height: 22px; flex: none; margin: 0;
  border: 1.5px solid var(--sage); border-radius: 6px;
  background: var(--card); cursor: pointer; position: relative;
}
input[type="radio"] { border-radius: 999px; }
input[type="checkbox"]:checked, input[type="radio"]:checked { background: var(--green); border-color: var(--green); }
input[type="checkbox"]:checked::after {
  content: ""; position: absolute; left: 7px; top: 3px;
  width: 6px; height: 11px; border: 2px solid #fff; border-top: 0; border-left: 0;
  transform: rotate(40deg);
}
input[type="radio"]:checked::after {
  content: ""; position: absolute; inset: 5px; border-radius: 999px; background: #fff;
}
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible {
  outline: 2px solid var(--green); outline-offset: 2px;
}

.skala { margin-bottom: 14px; }
.skala__reihe { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.skala__pol { font-size: .8rem; color: var(--muted); }
.skala__feld { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer; }
.skala__feld span { font-size: .78rem; color: var(--muted); }

.tracker { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin: 14px 0; }
.tracker__tag { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.tracker__nr { font-size: .72rem; color: var(--muted); }
.tracker__box { width: 26px; height: 26px; }

/* --- Fuss ----------------------------------------------------------------- */

.wb-fuss {
  max-width: 52rem; margin: 0 auto; padding: 24px 16px 60px;
  color: var(--muted); font-size: .84rem; border-top: 1px solid var(--rahmen);
}
.wb-fuss__meta { color: var(--sage); }
.wb-fuss__nav { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 14px; font-weight: 700; }
.wb-fuss__nav a { text-decoration: none; }
.wb-fuss__nav a:hover { text-decoration: underline; }
.wb-verweis { font-weight: 700; }

/* --- Drucken --------------------------------------------------------------
   Wer doch drucken will, bekommt die Eingaben mit aufs Papier. Die Bedienung
   verschwindet. Die Seiten bleiben Bloecke, kein A4-Nachbau — dafuer gibt es
   das PDF. */

@media print {
  .wb-kopf, .wb-banner, .wb-knopf { display: none !important; }
  body { background: #fff; }
  .wb-blatt { max-width: none; padding: 0; }
  .wb-seite { border: 0; border-radius: 0; margin: 0 0 12mm; padding: 0; break-inside: auto; }
  .wb-seite--voll { display: none; }
  .wb-feld, .wb-zeile, .wb-zelle { border-color: #999; background: transparent; }
  .wb-feld { overflow: visible; }
  a { color: inherit; text-decoration: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}