/* sebastian-knorr.com — Seite „Analysen“, Fassung vom 30.10.2026, enger gesetzt und für sechs Fragen und Englisch erweitert am 03.11.
   Ergänzt seite.css. Bild und Nebel der Startseite (G1, G2), ein kursiver Bruch (G4), Rostrot als einziger
   kräftiger Ton (G5). Die Fragen liegen auf Lichtungen, einem hellen Dunst hinter jeder Zeile. Er hält den
   Kontrast auch dort, wo der Wald dunkel ist (gemessen, siehe README).
   Ohne JavaScript: Liste mit <details>, Formular darunter. Mit JavaScript: Klasse .js am <html>. */

/* ---------- Dichte, 03.11.2026 ----------
   Sebastians Urteil zum Entwurf vom 30.10.: alles stand etwas zu weit auseinander. Die vertikalen Abstände sind um rund
   10 % enger gesetzt, hier und in seite.css für alle Seiten. Schriftgrößen und Zeilenhöhe bleiben. Nur die Hero dieser
   Seite rückt ebenfalls zusammen, die Hero der Startseite bleibt. */
.analysen .hero-text { padding-top: clamp(101px, 14.4vh, 153px); }
.analysen .kicker { margin-bottom: 23px; }
.analysen .vorspann { margin-top: clamp(18px, 2.2vw, 25px); }

/* ---------- A · Das Nebelfeld ---------- */
.nebelfeld { position: relative; isolation: isolate; min-height: 100svh; padding-bottom: clamp(58px, 8.1vw, 108px); overflow: hidden; }
.nebelfeld .hero-bild { position: absolute; inset: 0; z-index: -2; background: #C9CEC6; }
.nebelfeld .hero-bild img, .nebelfeld .hero-bild canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.nebelfeld .hero-bild img { object-fit: cover; object-position: center bottom; }
.nebelfeld .hero-bild canvas { opacity: 0; }
.nebelfeld .hero-bild canvas.da { opacity: 1; }
.nebelfeld .schleier { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(242, 240, 234, .7), rgba(242, 240, 234, .42) 55%, rgba(242, 240, 234, .08)); }
/* unten geht der Nebel in den Grund über, darunter steht das Formular */
.nebelfeld::after { content: ""; position: absolute; inset: auto 0 0 0; height: 30%; z-index: -1; pointer-events: none;
  background: linear-gradient(rgba(242, 240, 234, 0), var(--grund)); }
@media (max-width: 760px) { .nebelfeld .schleier { background: rgba(242, 240, 234, .5); } }

.analysen h1 { font-size: clamp(2.7rem, min(5.6vw, 9vh), 5.4rem); max-width: 14ch; }
@media (min-width: 900px) { .analysen h1 { max-width: none; } }

/* ---------- Ohne JavaScript: die Liste ---------- */
.fragenliste { margin-top: clamp(27px, 4vh, 47px); max-width: 44rem; display: grid; gap: 12px; }
.frage { background: rgba(242, 240, 234, .86); box-shadow: 0 0 22px 16px rgba(242, 240, 234, .86); }
.frage summary { list-style: none; cursor: pointer; padding: 11px 18px; font-family: var(--serif); font-size: clamp(22px, 2.3vw, 30px); line-height: 1.2; }
.frage summary::-webkit-details-marker { display: none; }
.frage summary::after { content: " +"; color: var(--rost); }
.frage[open] summary::after { content: " –"; }
.frage .antwort { padding: 4px 18px 18px; }

/* ---------- Mit JavaScript: die Fragen im Nebel ---------- */
/* Bis analysen.js die Knöpfe baut, hält die Liste unsichtbar genau deren Maße. So rutscht beim Tausch nichts nach
   (Layout-Sprung CLS 0,18 bis 0,23 am Handy, gemessen 03.11.). */
.js .fragenliste { visibility: hidden; max-width: 46rem; gap: clamp(14px, 2.2vh, 22px); justify-items: start; }
.js .frage { background: none; box-shadow: none; max-width: 100%; }
.js .frage summary { padding: 6px 14px; font-size: clamp(22px, 2.2vw, 30px); }
.js .frage summary::after { content: none; }
.js .frage .antwort { display: none; }
.js .frage:nth-child(2) { margin-left: clamp(18px, 7vw, 130px); }
.js .frage:nth-child(3) { margin-left: clamp(6px, 2.5vw, 44px); }
.js .frage:nth-child(4) { margin-left: clamp(26px, 10vw, 190px); }
.js .frage:nth-child(5) { margin-left: clamp(10px, 4.5vw, 86px); }
.js .frage:nth-child(6) { margin-left: clamp(22px, 8.5vw, 160px); }
.lichtungen { list-style: none; margin-top: clamp(27px, 4vh, 47px); max-width: 46rem; display: grid; gap: clamp(14px, 2.2vh, 22px); justify-items: start; }
.frage-knopf { position: relative; display: block; max-width: 100%; padding: 6px 14px; text-align: left; cursor: pointer;
  font-family: var(--serif); font-size: clamp(22px, 2.2vw, 30px); line-height: 1.2; color: var(--text); border: 0; border-radius: 0;
  background: none;
  transition: opacity .7s ease, filter .7s ease, transform .7s ease, color .25s; }
.frage-knopf::after { content: "→"; position: absolute; margin-left: .35em; color: var(--rost); opacity: 0; transform: translateX(-4px); transition: opacity .25s, transform .25s; }
.frage-knopf:hover, .frage-knopf:focus-visible { color: var(--foehre); }
.frage-knopf:hover::after, .frage-knopf:focus-visible::after { opacity: 1; transform: none; }
/* versetzt wie Lichtungen im Dunst */
.lichtungen li:nth-child(2) { margin-left: clamp(18px, 7vw, 130px); }
.lichtungen li:nth-child(3) { margin-left: clamp(6px, 2.5vw, 44px); }
.lichtungen li:nth-child(4) { margin-left: clamp(26px, 10vw, 190px); }
.lichtungen li:nth-child(5) { margin-left: clamp(10px, 4.5vw, 86px); }
.lichtungen li:nth-child(6) { margin-left: clamp(22px, 8.5vw, 160px); }

/* Die Nebelbank: ein heller Dunst hinter Fragen und Antwort, ohne Kante. Volle Deckung beginnt außerhalb der Textfläche. */
.lichtungen, .eigene-frage, .lichtung { position: relative; }
.lichtungen::before, .eigene-frage::before, .lichtung::before { content: ""; position: absolute; inset: -46px -120px; z-index: -1; pointer-events: none;
  background: rgba(242, 240, 234, .84);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 110px, #000 calc(100% - 110px), transparent), linear-gradient(transparent, #000 40px, #000 calc(100% - 40px), transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 110px, #000 calc(100% - 110px), transparent), linear-gradient(transparent, #000 40px, #000 calc(100% - 40px), transparent);
  mask-composite: intersect; }
.eigene-frage { display: table; }
/* display: grid und table heben [hidden] auf. Ohne diese Zeile hielten die ausgeblendeten Fragen ihren Platz (Fehler bis 03.11.) */
.lichtungen[hidden], .eigene-frage[hidden] { display: none; }
.eigene-frage::before { inset: -26px -60px; }
.lichtung::before { background: rgba(242, 240, 234, .92); }

/* Auftauchen: nur vor dem Start gehalten (backwards), danach gilt wieder der Zustand */
@keyframes auftauchen { from { opacity: 0; filter: blur(10px); transform: translateY(10px); } to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes einblenden { from { opacity: 0; } to { opacity: 1; } }
.lichtungen.zeigt .frage-knopf { animation: auftauchen 1.6s cubic-bezier(.2, .6, .2, 1) backwards; }
.lichtungen.zeigt li:nth-child(1) .frage-knopf { animation-delay: .15s; }
.lichtungen.zeigt li:nth-child(2) .frage-knopf { animation-delay: .7s; }
.lichtungen.zeigt li:nth-child(3) .frage-knopf { animation-delay: .4s; }
.lichtungen.zeigt li:nth-child(4) .frage-knopf { animation-delay: .95s; }
.lichtungen.zeigt li:nth-child(5) .frage-knopf { animation-delay: .55s; }
.lichtungen.zeigt li:nth-child(6) .frage-knopf { animation-delay: .8s; }

/* Wahl: die übrigen sinken in den Nebel, die gewählte löst sich auf */
.waehlt .frage-knopf { pointer-events: none; }
.waehlt .frage-knopf:not(.gewaehlt) { opacity: 0; filter: blur(8px); transform: translateY(18px); }
.waehlt .frage-knopf.gewaehlt { opacity: 0; filter: blur(14px); transform: scale(1.03); transition-duration: .9s; }

.eigene-frage { margin-top: clamp(23px, 3.6vh, 36px); font-size: 15px; }
.eigene-frage a { display: inline-block; padding: 6px 0; text-decoration: none; border-bottom: 1px solid var(--rost); }
.js .waehlt .eigene-frage { opacity: 0; transition: opacity .5s; }

/* Die Antwort an der Stelle der Frage */
.lichtung { margin-top: clamp(27px, 4vh, 47px); max-width: 42rem; padding: clamp(20px, 2.7vw, 34px);
  scroll-margin-top: 28px; }
.lichtung.kommt { animation: auftauchen 1.1s cubic-bezier(.2, .6, .2, 1) backwards; }
.zurueck { display: inline-flex; align-items: center; min-height: 44px; padding: 0; font: inherit; font-size: 14px; color: var(--text); background: none; border: 0; border-bottom: 1px solid var(--rost); cursor: pointer; }
.zurueck:hover { color: var(--foehre); }
.antwort-frage { margin: 16px 0; font-size: clamp(28px, 3.4vw, 44px); line-height: 1.1; max-width: none; outline: none; }
.antwort p { font-size: 17px; line-height: 1.6; color: var(--text); text-wrap: pretty; }
.antwort p + p { margin-top: .8em; }
.antwort .daten-titel { margin-top: 23px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--leise); }
.antwort .daten { list-style: none; margin-top: 8px; border-top: 1px solid var(--linie); }
.antwort .daten li { position: relative; padding: .55em 0 .55em 18px; border-bottom: 1px solid var(--linie); font-size: 15px; line-height: 1.45; }
.antwort .daten li::before { content: ""; position: absolute; left: 0; top: 1.15em; width: 7px; height: 1px; background: var(--rost); }
.antwort .grenze { margin-top: 18px; padding-left: 14px; border-left: 2px solid var(--salbei); font-size: 15px; color: var(--leise); }
.antwort .daten-satz { margin-top: 8px; padding: .55em 0 .55em 18px; position: relative; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); font-size: 15px; line-height: 1.45; }
.antwort .daten-satz::before { content: ""; position: absolute; left: 0; top: 1.15em; width: 7px; height: 1px; background: var(--rost); }
.antwort .beispiel-titel { margin-top: 23px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--leise); }
.antwort .beispiel { margin-top: 6px; font-family: var(--serif); font-size: 20px; line-height: 1.35; color: var(--foehre); }
.zur-anfrage { margin-top: 23px; }

/* Rückweg, solange der obere aus dem Blick ist */
.rueckweg-fest { position: fixed; left: 16px; bottom: 16px; z-index: 10; min-height: 44px; padding: 0 16px; font: inherit; font-size: 14px; color: var(--text);
  background: var(--grund); border: 1px solid var(--foehre); border-radius: 0; cursor: pointer; box-shadow: 0 6px 22px rgba(31, 38, 33, .14); }
.rueckweg-fest:hover { background: var(--foehre); color: var(--grund); }

/* ---------- Anfrage ---------- */
.js .anfrage-analysen:not(.offen) { display: none; }
.anfrage-analysen .rahmen { border-top: 0; padding-top: 0; }
.js .anfrage-analysen.offen { padding-bottom: calc(var(--abstand) + 60px); }   /* Platz für den festen Rückweg */
.anfrage-analysen.offen { animation: einblenden .6s ease backwards; }
.formular input[type=tel] { width: 100%; min-height: 48px; padding: 12px 14px; font: inherit; font-size: 16px; color: var(--text); background: transparent; border: 1px solid var(--salbei); border-radius: 0; outline: none; transition: border-color .2s, box-shadow .2s; }
.formular input[type=tel]:focus { border-color: var(--foehre); box-shadow: 0 0 0 1px var(--foehre); }

/* ---------- B · Arbeitsweise ---------- */
.arbeitsweise h2 { max-width: 16ch; }
.punkte { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 47px; border-top: 1px solid var(--linie); background: var(--linie); }
.punkte article { padding: 27px 40px 31px 0; background: var(--grund); }
.punkte article:nth-child(even) { padding: 27px 0 31px 40px; }
.punkte h3 { font-size: clamp(24px, 2.2vw, 30px); line-height: 1.15; margin-bottom: 11px; }
.punkte p { font-size: 16px; color: var(--leise); max-width: 34em; text-wrap: pretty; }
@media (max-width: 820px) { .punkte { grid-template-columns: 1fr; } .punkte article, .punkte article:nth-child(even) { padding: 25px 0; } }

/* ---------- C · Muster (auskommentiert bis zur Freigabe) ---------- */
.muster-frage { font-family: var(--serif); font-size: clamp(24px, 2.4vw, 32px); line-height: 1.2; color: var(--foehre); }
.muster-text p + p { margin-top: .8em; color: var(--leise); }
.muster-text .knopf { margin-top: 23px; }

/* ---------- Bewegung reduziert: Überblendung statt Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  .nebelfeld .frage-knopf, .nebelfeld .eigene-frage { transition: opacity .35s ease !important; filter: none !important; transform: none !important; }
  .nebelfeld .frage-knopf::after { transition: none !important; }
  .lichtungen.zeigt .frage-knopf { animation: einblenden .6s ease backwards !important; }
  .nebelfeld .lichtung.kommt, .anfrage-analysen.offen { animation: einblenden .4s ease backwards !important; }
}