@charset "utf-8";
/* Wegweiser „Wonach suchst du?“ (Template wegweiser.php, Markup inc/wegweiser.php).
   Abgenommener Entwurf Version 5, Handy-Ablauf A (Betreiber 29.09.); seit dem Einbau ist DIESE
   Datei die Quelle der Gestalt (bonsai/build/entwurf_wegweiser_vorlage.html ist abgeloest).
   Farben und Schriften aus kopf.css (dunkel ueber data-theme wie die ganze Seite). Die
   Schaltregeln je Lage/Frage stehen nicht hier: btm_ww_regeln() leitet sie aus den Daten ab. */

/* ---- Rahmen: GeneratePress-Innenabstand weg (kopf.css .site-main), Buehne wie .ew-standard ---- */
.page-template-wegweiser .site-main { padding: 0; }
.ww-buehne { container: ww / inline-size; max-width: 1188px; margin-inline: auto; padding-inline: 30px; padding-block: 0 96px; box-sizing: content-box; }
@media (max-width: 900px) {
  .ww-buehne { padding-inline: 16px; }
}

/* ---- Grundmasse des Entwurfs, nur hier (Seite: line-height 1.6) ---- */
.ww-seite { --st-rinne: 15px; --tinte-kopf: color-mix(in oklab, var(--tinte) 80%, var(--papier));
  --kopf: 40px; --abstand: 132px; --zeichen: 185px;
  position: relative; z-index: 0; padding-top: var(--abstand); font-size: 17px; line-height: 1.45; }
.ww-seite .st-marke { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gedaempft); margin: 0; }
.ww-seite .st-zahl { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ---- Kopf wie die Sektionen der Startseite (ew-sektionskopf + ew-ziffer) ---- */
.ww-kopf { text-align: center; margin: 0; font-family: var(--sans); font-size: var(--kopf); font-weight: 500; line-height: 1.1; letter-spacing: -0.01em; color: var(--tinte-kopf); text-wrap: balance; }
.ww-zeichen { position: absolute; left: 0; top: calc(var(--abstand) + var(--kopf) * 1.1 / 2 - var(--zeichen) * 5 / 6); z-index: -1;
  font-family: var(--sans-ja); font-size: var(--zeichen); line-height: 1; font-weight: 400; color: color-mix(in srgb, var(--rinde) 12%, transparent); pointer-events: none; user-select: none; }
/* Parallax wie die Themenzeichen der Startseite (startseite.css ziffer-treiben, Betreiber 29.09.):
   Der Titel ist die Zeitleiste; das Zeichen wandert beim Rollen um +-0,5 em (schmal +-0,25 em) und
   steht bei Titel in Fenstermitte genau an seiner Stelle. Nur wo der Browser scrollgebundene
   Animationen kann und keine reduzierte Bewegung gewuenscht ist - sonst steht es still. */
.ww-seite { --zeichen-hub: 0.5em; timeline-scope: --ww-kopfzeit; }
.ww-kopf { view-timeline: --ww-kopfzeit block; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .ww-zeichen { animation: ww-zeichen-treiben linear both; animation-timeline: --ww-kopfzeit; }
    @keyframes ww-zeichen-treiben { from { transform: translateY(calc(var(--zeichen-hub) * -1)); } to { transform: translateY(var(--zeichen-hub)); } }
  }
}

/* ---- Zwei Spalten: links das Akkordeon (5 von 12), rechts die Beitraege (7 von 12) ---- */
/* Rollt das Skript die Stufe in Sicht, steht sie unter dem festen Kopf (kopf.css --kopfhoehe). */
#ww { margin-top: 56px; scroll-margin-top: var(--kopfhoehe, 147px); }
.ww-raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto 1fr;
  column-gap: calc(var(--st-rinne) * 2); align-items: start; }
.ww-raster fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.ww-raster legend, .ww-sp3-marke { padding: 0; margin: 0 0 0.6rem; }
.ww-sp1, .ww-wahlkopf { grid-column: 1 / 6; grid-row: 1; }
.ww-sp2, .ww-fragen-zu { grid-column: 1 / 6; grid-row: 2; }
.ww-sp3, .ww-start { grid-column: 6 / -1; grid-row: 1 / -1; min-width: 0; }
/* Zwischen den zwei Teilen des Akkordeons eine Haarlinie (nur zwischen, nie oben und unten). Sie
   haengt am zugeklappten Kopf bzw. am zugeklappten Fragen-Kopf, nicht am fieldset: dort liefe sie
   durch die legend, und `.ww-raster fieldset` setzt Rand und Aussenabstand ohnehin auf 0. */
.ww-wahlkopf { padding-bottom: 1.4rem; border-bottom: 1px solid var(--linie); }
.ww-raster .ww-sp2 { margin-top: 1.4rem; }
.ww-fragen-zu { border-top: 1px solid var(--linie); margin-top: 1.4rem; padding-top: 1.4rem; }
.ww-lagen, .ww-fragen, .tu-zeilen { list-style: none; margin: 0; padding: 0; }
/* relative wie .st-leiste: die verborgenen Radios bleiben in ihrer Liste, sonst dehnen sie die
   Seite, sobald die Liste mobil zur wischbaren Leiste wird (gemessen 29.09.: 466 px bei 390). */
.ww-lagen, .ww-fragen { position: relative; }
/* Haarlinien nur zwischen den Beitraegen - links keine zwischen den Einzelzeilen (Betreiber 29.09.). */
.tu-zeilen li + li { border-top: 1px solid var(--linie); }

/* Lage und Frage: eine Zeile mit Text (Zahl) und Pfeil; gewaehlt wie die Wahlleiste (Moos, Strich). */
.ww-lage, .ww-frage { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 0.6rem; align-items: baseline;
  padding: 14px 0; min-height: 48px; cursor: pointer; color: var(--an, var(--tinte-kopf)); transition: color 200ms; }
.ww-lage .ww-text, .ww-frage .ww-text { text-decoration: underline 1px var(--strich, transparent); text-underline-offset: 0.3em; transition: text-decoration-color 200ms; }
.ww-lage { font-size: 20px; line-height: 1.25; }
.ww-frage { font-size: 17px; line-height: 1.35; }
.ww-frage .st-zahl { font-size: 12px; color: var(--gedaempft); }
.ww-lage svg, .ww-frage svg { width: 15px; height: 15px; align-self: center; display: none; }
.ww-lage:has(:checked), .ww-frage:has(:checked) { --an: var(--moos); --strich: var(--moos); }
.ww-lage:has(:focus-visible), .ww-frage:has(:focus-visible) { outline: 2px solid var(--moos); outline-offset: 3px; }
@media (hover: hover) { .ww-lage:hover, .ww-frage:hover { --an: var(--moos); } }

/* „Wo stehst du?“ zugeklappt: Marke, darunter die gewaehlte Aussage, rechts der Pfeil zum Aufklappen. */
.ww-wahlkopf { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 0.6rem; row-gap: 0.6rem; cursor: pointer; }
.ww-wahlkopf .st-marke { grid-column: 1; }
.ww-antwort { grid-column: 1; font-size: 20px; line-height: 1.25; color: var(--moos); }
.ww-wahlkopf svg { grid-column: 2; grid-row: 1 / span 2; align-self: center; width: 15px; height: 15px; color: var(--gedaempft); transition: color 200ms; }
@media (hover: hover) { .ww-wahlkopf:hover svg, .ww-wahlkopf:hover .st-marke { color: var(--moos); } }
.ww-wahlkopf:focus-visible { outline: 2px solid var(--moos); outline-offset: 3px; }
/* „Was interessiert dich?“ zugeklappt, solange keine Lage gewaehlt ist - nicht bedienbar. */
.ww-fragen-zu { opacity: 0.55; }
/* Rechts vor der ersten Wahl keine Liste, nur ein blasser Hinweis nach links (Betreiber 29.09.:
   „wenn noch garnichts geklickt wurde, darf rechts nichts stehen … in transparent grau darauf
   hinweisen“). Erste Zeile auf Hoehe der ersten Lage (Marke + ihr Abstand wie links). */
.ww-start { margin: calc(12px * 1.45 + 0.6rem + 14px) 0 0; display: flex; gap: 0.6rem; align-items: baseline; max-width: 30ch;
  font-size: 24px; line-height: 1.25; color: color-mix(in srgb, var(--gedaempft) 55%, transparent); text-wrap: balance; }
.ww-start svg { flex: 0 0 auto; width: 18px; height: 18px; align-self: center; }

/* Beitraege: die Titelzeilen von „Wonach suchst du?“ (tu-zeilen) und die Wegzeile. */
.tu-zeilen li { padding: 14px 0; }
.ww-seite .st-titel { margin: 0; font-family: var(--sans); font-size: 24px; font-weight: 400; line-height: 1.2; color: var(--tinte-kopf); text-wrap: pretty; }
.ww-seite .st-titel a { color: inherit; text-decoration: none; transition: color 200ms; }
@media (hover: hover) { .ww-seite .st-titel a:hover { color: var(--moos); } }
.ww-seite .st-titel a:active, .ww-seite .ew-wege a:active { color: var(--tinte); transition: none; }
.ww-seite .ew-wege { list-style: none; padding: 0; margin: 40px 0 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; }
.ww-seite .ew-wege a { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gedaempft); text-decoration: none; display: inline-block; line-height: 16px; padding-block: 16px; margin-block: -16px; }
.ww-seite .ew-wege a:hover { color: var(--moos); }

/* Umschalten: Radios + positives :has() + display (bewaehrt, Lehre 29.09.). Eine Lage gewaehlt:
   die Lagen und der Hinweis weichen, Kopf, Fragen und Liste der Lage erscheinen. */
.ww-stufe, .ww-liste, .ww-stufenkopf { display: none; }
#ww:not(:has(#l-keine:checked)) :is(.ww-sp1, .ww-fragen-zu, .ww-start) { display: none; }
@container ww (min-width: 901px) {
  .ww-stufe { --stufe-an: contents; }
}

/* ---- Uebergang (Betreiber 29.09.: „smooth“): View Transition ueber der Schaltmechanik. Je Teil
   ein Name, den Vorgaenger und Nachfolger teilen (nie zwei zugleich sichtbar): der Block verwandelt
   sich in den naechsten, statt zu springen. Die Bilder werden oben links angeschlagen und im
   wachsenden/schrumpfenden Rahmen beschnitten, nicht gestaucht. Ohne API oder mit weniger
   Bewegung schaltet alles sofort (assets/js/wegweiser.js ruft den Uebergang dann nicht auf). */
.ww-sp1, .ww-wahlkopf { view-transition-name: ww-wahl; }
.ww-sp2, .ww-fragen-zu { view-transition-name: ww-fragen; }
.ww-sp3, .ww-start { view-transition-name: ww-liste; }
/* Die Seite blendet bei Seitenwechseln die ganze Wurzel aus und ein (kopf.css, ::view-transition-
   old/new(root)). Beim Wechsel IN dieser Seite (html.ww-uebergang, Skript) darf nichts dimmen: das
   alte Bild der Wurzel entfaellt, das neue steht sofort - bewegt werden nur die drei Teile. */
html.ww-uebergang::view-transition-old(root) { display: none; }
html.ww-uebergang::view-transition-new(root) { animation: none; }
html.ww-uebergang::view-transition-group(ww-wahl),
html.ww-uebergang::view-transition-group(ww-fragen),
html.ww-uebergang::view-transition-group(ww-liste) { animation-duration: 320ms; animation-timing-function: var(--kurve); overflow: clip; }
html.ww-uebergang::view-transition-old(ww-wahl), html.ww-uebergang::view-transition-new(ww-wahl),
html.ww-uebergang::view-transition-old(ww-fragen), html.ww-uebergang::view-transition-new(ww-fragen),
html.ww-uebergang::view-transition-old(ww-liste), html.ww-uebergang::view-transition-new(ww-liste) {
  animation-duration: 320ms; height: 100%; object-fit: none; object-position: left top; }
/* Der Fokus wandert nach jedem Wechsel mit (Tastatur, Vorleser). Nach Zeiger/Finger zeigt Chrome
   ihn trotzdem als Tastaturfokus (der Klick wird fuer den Uebergang abgefangen, gemessen 29.09.) -
   solange zuletzt ein Zeiger bediente (data-zeiger, Skript), kein Fokusrahmen. */
#ww[data-zeiger] :is(.ww-lage, .ww-frage, .ww-wahlkopf, .ww-zurueck svg, .ww-stufenkopf h2) { outline: none; }

/* ---- Schmal: eine Stufe nach der anderen, an derselben Stelle ---- */
.ww-zurueck { flex: 0 0 48px; width: 48px; height: 48px; margin-left: -7px; display: grid; place-items: center; cursor: pointer; color: var(--tinte); }
.ww-zurueck svg { box-sizing: content-box; width: 15px; height: 15px; padding: 9px; border: 1px solid var(--gedaempft); border-radius: var(--radius-knopf); transition: background 200ms, color 200ms, border-color 200ms; }
@media (hover: hover) { .ww-zurueck:hover svg { background: var(--tinte); color: var(--papier); border-color: var(--tinte); } }
.ww-zurueck:focus-visible { outline: none; }
.ww-zurueck:focus-visible svg { outline: 2px solid var(--moos); outline-offset: 3px; }
.ww-stufenkopf h2 { margin: 0; font-family: var(--sans); font-weight: 400; line-height: 1.2; color: var(--tinte-kopf); text-wrap: balance; }
.ww-stufenkopf h2:focus { outline: none; }
.ww-stufenkopf h2:focus-visible { outline: 2px solid var(--moos); outline-offset: 3px; }

@container ww (max-width: 900px) {
  .ww-seite { --kopf: 1.75rem; --abstand: 88px; --zeichen: 120px; --zeichen-hub: 0.25em; }
  #ww { margin-top: 40px; }
  .ww-raster { display: block; }
  .ww-stufe { --stufe-an: block; }
  /* Schmal kein Akkordeon und kein Hinweis: erst nur die Aussagen (Betreiber 29.09.). */
  :is(.ww-wahlkopf, .ww-fragen-zu, .ww-start) { display: none; }
  .ww-raster .ww-sp2 { margin-top: 0; }
  .ww-lage svg { display: block; color: var(--gedaempft); }
  /* Schmal sind die Aussagen die ganze erste Stufe: dort bleiben die Linien zwischen den Zeilen. */
  .ww-lagen li + li { border-top: 1px solid var(--linie); }
  .ww-stufenkopf { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 1rem; }
  .ww-stufenkopf h2 { font-size: 24px; }
  .ww-sp3-marke { display: none; }
  .ww-seite .st-titel { font-size: 20px; }

  /* Fragen als Laufleiste ueber der Liste (Ablauf A, wie die Wahlleiste der Startseite). */
  .ww-sp2 legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ww-fragen { display: flex; gap: 0 1.25rem; overflow-x: auto; scrollbar-width: none; margin: 0 0 1rem;
    padding-right: 48px; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent); }
  .ww-fragen::-webkit-scrollbar { display: none; }
  .ww-fragen li { flex: 0 0 auto; }
  .ww-frage { display: inline-flex; gap: 0.35em; min-height: 0; padding: 0.55rem 0; white-space: nowrap;
    font-size: 13px; letter-spacing: 0.04em; color: var(--an, var(--gedaempft)); border-bottom: 1px solid var(--strich, transparent); }
  .ww-frage .ww-text { text-decoration: none; }
  .ww-frage .st-zahl { color: inherit; }
}

@media (prefers-reduced-motion: reduce) {
  .ww-seite *, .ww-seite *::before, .ww-seite *::after { transition-duration: 0.01ms !important; }
}