/* ════════════════════════════════════════════════════════════════════
   EXPERT — Preisseite und Dankeseite
   Designsprache „Hauptbuch & Beleg".

   EIGENE TOKENS MIT RÜCKFALL, wie in aufgabengenerator.css. Diese Seite
   lädt keine der grossen Hüllen (dashboard-hb.css, exercise-hb-shell.css),
   in denen die --hb-Werte definiert sind. Ohne Rückfall stünde sie
   farblos da — derselbe Fehler, der die kompakte Form auf der Landeseite
   einmal weiss auf undefiniert gezeichnet hat.
   ════════════════════════════════════════════════════════════════════ */

.expert-body {
    --ex-papier:     var(--hb-paper, #F4F1E8);
    --ex-flaeche:    var(--hb-card, #FCFAF4);
    --ex-tinte:      var(--hb-ink, #23201B);
    --ex-tinte-mitte: var(--hb-ink-mid, #6E6757);
    --ex-grau:       #736B5B;   /* nicht --hb-ink-muted: siehe unten */
    --ex-linie:      var(--hb-border, #DAD3C2);
    --ex-rot:        var(--hb-terra, #B0492C);
    --ex-ocker:      var(--hb-ocker, #A8744D);
    --ex-oliv:       var(--hb-oliv, #5E7A4F);
    --ex-serif:      var(--hb-serif, 'Lora', Georgia, serif);
    --ex-mono:       var(--hb-mono, 'JetBrains Mono', monospace);

    min-height: 100vh;
    margin: 0;
    background-color: var(--ex-papier);
    /* Das Raster liegt LEISE im Hintergrund und läuft unter allem durch —
       nicht als Rahmen um jeden Absatz. Erste Kernregel der Designsprache. */
    background-image:
        linear-gradient(to right, rgba(120,110,85,0.035) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(120,110,85,0.035) 1px, transparent 1px);
    background-size: 32px 32px;
    color: var(--ex-tinte);
    font-family: var(--ex-serif);
}

/* ZWEI TÖNE, DIE AUF DIESEM PAPIER NICHT REICHEN.
   ─────────────────────────────────────────────────────────────────────
   Die Hauspalette führt --hb-ink-muted (#8A8273) für Labels und
   --hb-ocker (#A8744D) als Aktiv-Farbe. Auf dem warmen Papier #F4F1E8
   kommen sie auf 3.37 und 3.53 — beides unter den 4.5, die WCAG AA für
   Text unter 18px verlangt, und die Mono-Labels hier sind 10 bis 11px.

   Die Tokens werden deshalb nicht benutzt, sondern für diese Seiten
   nachgedunkelt. Geändert wird nur der TEXT-Gebrauch: Wo Ocker als Kante
   steht (.ex-lage, .re-merke), bleibt der Hauston, denn eine Linie trägt
   keinen Text und fällt nicht unter die Regel.

   #736B5B kommt auf 4.67 auf Papier und 5.05 auf der Karte.
   #8F5F3C kommt auf 4.80 und bleibt erkennbar Ocker. */


/* ── Kopf ────────────────────────────────────────────────────────── */

.ex-kopf {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 24px;
    align-items: center;
    justify-content: space-between;
    max-width: 1040px;
    margin: 0 auto;
    padding: 20px 24px;
    border-bottom: 1px solid var(--ex-linie);
}
.ex-marke img { height: 30px; width: auto; }
.ex-kopf-wege { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.ex-kopf-weg {
    font-family: var(--ex-mono);
    font-size: 11px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--ex-tinte-mitte);
    border-bottom: 1px solid transparent;
}
.ex-kopf-weg:hover { color: var(--ex-rot); border-bottom-color: var(--ex-rot); }

/* ── Seite ───────────────────────────────────────────────────────── */

.ex-seite { max-width: 1040px; margin: 0 auto; padding: 34px 24px 80px; }

.ex-marke-zeile {
    margin: 0 0 8px;
    font-family: var(--ex-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: var(--ex-rot);
}
.ex-titel {
    margin: 0;
    font-family: var(--ex-serif);
    font-size: clamp(30px, 4.4vw, 46px);
    font-weight: 600;
    line-height: 1.16;
    letter-spacing: -0.01em;
}
/* EINE kräftige Linie unter dem Titel. Die Hierarchie kommt aus drei
   Linienstärken, nicht aus zwanzig Rahmen. */
.ex-titel-linie {
    margin: 18px 0 22px;
    border: 0;
    border-top: 2px solid var(--ex-tinte);
}
.ex-vorspann {
    max-width: 62ch;
    margin: 0 0 30px;
    font-size: 17px;
    line-height: 1.65;
    color: var(--ex-tinte-mitte);
}

/* ── Der Kaufkasten ──────────────────────────────────────────────── */

.ex-kauf {
    display: grid;
    gap: 26px;
    align-items: start;
    margin: 0 0 40px;
}
@media (min-width: 880px) {
    .ex-kauf { grid-template-columns: minmax(0, 1fr) minmax(320px, 380px); }
}

/* Was drin ist — offene Liste, kein Kasten. Zweite Kernregel:
   entschachteln. Die Aufzählung braucht Platz, keinen Rahmen. */
.ex-was { margin: 0; }
.ex-was-marke {
    margin: 0 0 14px;
    font-family: var(--ex-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--ex-grau);
}
.ex-liste { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.ex-liste li {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 14px;
    padding: 15px 0;
    border-bottom: 1px solid var(--ex-linie);
}
.ex-liste li:first-child { border-top: 1px solid var(--ex-linie); }
.ex-liste-nr {
    font-family: var(--ex-mono);
    font-size: 11px;
    color: #8F5F3C;   /* Ocker als TEXT, nachgedunkelt */
    padding-top: 3px;
}
.ex-liste-was { font-size: 15.5px; line-height: 1.6; }
.ex-liste-was strong { font-weight: 600; }
.ex-liste-was span {
    display: block;
    margin-top: 3px;
    font-size: 14px;
    color: var(--ex-tinte-mitte);
}
.ex-liste-was a { color: var(--ex-rot); border-bottom: 1px solid currentColor; }
.ex-liste-was a:hover { color: #9C4027; }

/* Der Preiskasten IST die eine Ebene Verschachtelung, die sich lohnt —
   er trägt die Handlung. Deshalb bekommt er als einziges Element auf
   dieser Seite den harten Druckschatten. */
.ex-preis {
    /* Ziel von expert.html#kaufen (Expert-Angebot in der Navbar). */
    scroll-margin-top: 16px;
    padding: 26px 24px;
    border: 2px solid var(--ex-tinte);
    background: var(--ex-flaeche);
    box-shadow: 6px 6px 0 var(--ex-tinte);
}
.ex-preis-marke {
    margin: 0 0 10px;
    font-family: var(--ex-mono);
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--ex-grau);
}
/* Zahl links, Hörnchen rechts. `align-items: center` und nicht baseline:
   Das Bild hat keine Schriftlinie, an der sich etwas ausrichten liesse. */
.ex-preis-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
/* DAS WAPPEN SITZT BEIM PREIS, ohne Rahmen.

   Kein Rahmen ist die konsequentere Lösung, als ich zuerst dachte: Der
   Preiskasten trägt bereits 2px und den Druckschatten, und jede weitere
   Kante darin wäre eine Schachtelungsebene mehr. Das Bild bringt seine
   eigene dunkle Fläche mit und grenzt sich dadurch schon ab — es braucht
   keinen Strich, der ihm sagt, wo es aufhört.

   110px ist die Untergrenze für die Lesbarkeit: Das Schriftband „EXPERT"
   nimmt rund drei Viertel der Bildbreite ein, hier also gut 80px für sieben
   Versalien. Kleiner wird es zum grauen Fleck. */
.ex-siegel {
    flex: 0 0 auto;
    width: 110px;
    height: auto;
}

.ex-preis-zahl {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 9px;
    margin: 0;
    font-family: var(--ex-mono);
    font-size: 40px;
    font-weight: 500;
    letter-spacing: -0.02em;
}
.ex-preis-dauer {
    font-family: var(--ex-serif);
    font-size: 15px;
    font-weight: 400;
    color: var(--ex-tinte-mitte);
}
.ex-preis-fuss {
    margin: 10px 0 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--ex-tinte-mitte);
}
.ex-preis-strich {
    margin: 20px 0;
    border: 0;
    border-top: 1px solid var(--ex-linie);
}

/* Die Zustimmung nach § 18 FAGG. Sie steht ÜBER dem Knopf und nicht
   darunter: Wer sie erst nach dem Kauf liest, hat ihr nicht zugestimmt. */
.ex-zustimmung {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 11px;
    margin: 0 0 18px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--ex-tinte-mitte);
}
.ex-zustimmung input {
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    accent-color: var(--ex-rot);
}
.ex-zustimmung a { color: var(--ex-rot); border-bottom: 1px solid currentColor; }

.ex-knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    padding: 14px 20px;
    border: 1px solid var(--ex-tinte);
    background: var(--ex-rot);
    color: #FFF;
    font-family: var(--ex-mono);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    cursor: pointer;
}
.ex-knopf:hover { background: #9C4027; }
.ex-knopf:disabled { background: var(--ex-grau); cursor: not-allowed; }

.ex-knopf-zweit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 12px 20px;
    border: 1px solid var(--ex-tinte);
    background: transparent;
    color: var(--ex-tinte);
    font-family: var(--ex-mono);
    font-size: 12px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}
.ex-knopf-zweit:hover { background: rgba(35,32,27,0.06); }
.ex-knopf + .ex-knopf-zweit { margin-top: 10px; }

/* Zustandsmeldung über dem Knopf: nicht angemeldet, E-Mail offen,
   bereits Expert, noch nicht buchbar. Eine Fläche, keine zweite Kante. */
.ex-lage {
    margin: 0 0 16px;
    padding: 13px 15px;
    border-left: 2px solid var(--ex-ocker);
    background: var(--ex-papier);
    font-size: 13.5px;
    line-height: 1.6;
}
.ex-lage.ist-gut { border-left-color: var(--ex-oliv); }
.ex-lage.ist-fehler { border-left-color: var(--ex-rot); }
.ex-lage a { color: var(--ex-rot); border-bottom: 1px solid currentColor; }
.ex-lage strong { font-weight: 600; color: var(--ex-tinte); }

/* ── Was frei bleibt ─────────────────────────────────────────────── */

.ex-frei {
    margin: 0 0 38px;
    padding: 22px 24px;
    border: 1px solid var(--ex-linie);
    background: var(--ex-flaeche);
}
.ex-frei h2 {
    margin: 0 0 8px;
    font-size: 19px;
    font-weight: 600;
}
.ex-frei p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--ex-tinte-mitte); }
.ex-frei a { color: var(--ex-rot); border-bottom: 1px solid currentColor; }

/* ── Fragen ──────────────────────────────────────────────────────── */

.ex-fragen { margin: 0 0 40px; }
.ex-fragen h2 {
    margin: 0 0 4px;
    font-size: 22px;
    font-weight: 600;
}
/* Die Fragen klappen auf. <details> bringt das Verhalten mit; hier steht
   nur, wie es aussieht.

   DAS PLUS ZEICHNET CSS, es ist kein Zeichen aus einer Schriftart: Zwei
   Striche in einem 12px-Feld, der senkrechte dreht sich beim Öffnen weg.
   Ein „+" aus dem Zeichensatz sässe je nach Schrift anders in der Zeile
   und liesse sich nicht drehen. */
.ex-frage {
    border-bottom: 1px solid var(--ex-linie);
}
.ex-frage:first-of-type { border-top: 1px solid var(--ex-linie); }

.ex-frage summary {
    position: relative;   /* Bezug für den senkrechten Strich des Plus */
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 16px 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    list-style: none;
}
/* Das Dreieck der Browser weg — Safari braucht die zweite Zeile. */
.ex-frage summary::-webkit-details-marker { display: none; }

/* Das Plus: zwei Striche, die sich kreuzen.

   Der waagrechte läuft in der ersten Rasterspalte mit, der senkrechte liegt
   absolut darüber — deshalb `position: relative` am summary. Beide Zahlen
   sind aufeinander abgestimmt: Der waagrechte sitzt bei 16px Polster plus
   8px Versatz, seine Mitte also auf 25px; der senkrechte ist 12px hoch und
   beginnt folglich bei 19px. Die Spalte ist 14px breit, der waagrechte
   12px — Mitte bei 6px, der 2px breite senkrechte also bei 5px. */
.ex-frage summary::before {
    content: "";
    position: relative;
    top: 8px;
    width: 12px;
    height: 2px;
    background: var(--ex-rot);
}
.ex-frage summary::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 19px;
    width: 2px;
    height: 12px;
    background: var(--ex-rot);
    transition: transform 0.18s ease, opacity 0.18s ease;
    transform-origin: center;
}
.ex-frage[open] summary::after { transform: rotate(90deg); opacity: 0; }

.ex-frage summary:focus-visible {
    outline: 2px solid var(--ex-rot);
    outline-offset: 2px;
}
.ex-frage summary:hover { color: var(--ex-rot); }

.ex-frage p {
    margin: 0 0 18px;
    padding-left: 26px;
    font-size: 15px;
    line-height: 1.65;
    color: var(--ex-tinte-mitte);
}
.ex-frage a { color: var(--ex-rot); border-bottom: 1px solid currentColor; }

/* ── Fuss ────────────────────────────────────────────────────────── */

.ex-fuss {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    padding-top: 22px;
    border-top: 1px solid var(--ex-linie);
    font-family: var(--ex-mono);
    font-size: 11px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}
.ex-fuss a { color: var(--ex-tinte-mitte); }
.ex-fuss a:hover { color: var(--ex-rot); }

/* ── Dankeseite ──────────────────────────────────────────────────── */

.ex-danke {
    max-width: 640px;
    margin: 0 auto;
    padding: 60px 24px 90px;
    text-align: center;
}
.ex-danke-kasten {
    padding: 34px 28px;
    border: 2px solid var(--ex-tinte);
    background: var(--ex-flaeche);
    box-shadow: 6px 6px 0 var(--ex-tinte);
}
.ex-danke h1 { margin: 0 0 12px; font-size: 28px; font-weight: 600; }
.ex-danke p { margin: 0 0 8px; font-size: 15.5px; line-height: 1.65; color: var(--ex-tinte-mitte); }
.ex-danke .ex-knopf { margin-top: 22px; }

/* Der Stempel — Beleg-Layer, und nur hier: ein echter Belohnungsmoment.
   Leicht schräg, Mono, farbiger Rahmen, sparsam. */
.ex-stempel {
    display: inline-block;
    margin: 0 0 20px;
    padding: 8px 16px;
    border: 2px solid var(--ex-oliv);
    border-radius: 3px;
    color: var(--ex-oliv);
    font-family: var(--ex-mono);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    transform: rotate(-4deg);
}

/* Der Wartezustand trägt keinen Stempel — es ist noch nichts geschafft. */
.ex-warte {
    margin: 0 0 18px;
    font-family: var(--ex-mono);
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--ex-grau);
}

@media (max-width: 620px) {
    .ex-preis { padding: 20px 18px; box-shadow: 4px 4px 0 var(--ex-tinte); }
    .ex-danke-kasten { padding: 26px 20px; box-shadow: 4px 4px 0 var(--ex-tinte); }
    .ex-preis-zahl { font-size: 34px; }
}