/* ============================================================
   Handreichung «Makerorientiertes Lernen» · zITBOx / PHSG
   Auslieferungsstand 2026-09-29 · erzeugt von tools/build-dist.py
   shared/css/zitbox.css + apps/einstieg/einstieg.css

   Schriften werden NICHT geladen: zitbox.ch bindet Cairo und Roboto
   bereits ein. Die Variablen erben von den Brizy-Globalwerten und
   fallen sonst auf die CI-Werte zurueck.
   ============================================================ */

/* ============================================================
   zITBOx-Theme · Überlagerung für die Einbettung auf zitbox.ch

   Die Live-Seite definiert ihre Markenfarben selbst:
     --custom-color-green  #4B8021   (erkunden | entdecken)
     --custom-color-orange #B7580D   (anwenden | adaptieren)
     --custom-color-berry  #aa4c7d   (verbessern | innovieren)
     --custom-color-sand   #986C39
     --custom-color-blue   #2077C2
     --custom-color-grey   #f0f0f0
   Schriften: Cairo (Titel), Roboto (Fliesstext).

   Diese Datei bindet unsere semantischen Variablen an genau diese Werte –
   jeweils MIT Fallback. Inline auf zitbox.ch eingebettet erbt das Band damit
   automatisch die echten Seitenwerte; standalone (lokal, Vorschau) greifen die
   Fallbacks. Wird die Seitenpalette angepasst, zieht das Band mit.

   HAND-GEPFLEGT – im Gegensatz zu tokens.css nicht generiert.
   ============================================================ */

.hr-band,
.hr-dialog,
.wp-seite {
  /* ---------- Markenfarben (erben, sonst Fallback) ---------- */
  --zb-green:  var(--custom-color-green,  #4B8021);
  --zb-orange: var(--custom-color-orange, #B7580D);
  --zb-berry:  var(--custom-color-berry,  #aa4c7d);
  --zb-sand:   var(--custom-color-sand,   #986C39);
  --zb-blue:   var(--custom-color-blue,   #2077C2);
  --zb-grey:   var(--custom-color-grey,   #f0f0f0);

  --zb-ink:    #12151c;   /* Brizy global-color1 */
  --zb-text:   #666666;   /* Brizy global-color7 */
  --zb-line:   #e3e5e4;
  --zb-white:  #ffffff;

  /* ---------- Schriften ---------- */
  /* Cairo/Roboto liegen auf der Seite bereits; hier nur referenziert,
     damit standalone dieselbe Anmutung entsteht. */
  --zb-font-head: var(--brz-heading3fontfamily, 'Cairo', helvetica, arial, sans-serif);
  --zb-font-body: var(--brz-paragraphfontfamily, 'Roboto', helvetica, arial, sans-serif);

  /* ---------- Vier Etappen, acht Wegpunkte ----------
     Etappen: eigene Farben aus der zITBOx-Palette, bewusst keine
     Niveau-Farbe - eine Etappe ist kein Niveau. */
  --et-1: var(--zb-blue, #2077C2);                            /* Orientieren  */
  --et-2: var(--zb-sand, #986C39);                            /* Aufbauen     */
  --et-3: #1B5A8D;  /* Unterrichten: zITBOx-Blau abgedunkelt; fest, weil ältere Browser color-mix() verwerfen */
  --et-4: #1E2132;                                            /* Verankern    */

  /* Kapitel: die Kompetenzstufe, die jede Kapitelseite auf zitbox.ch trägt
     (Taxonomie "kompetenzstufe", Stand 29.09.2026). Damit hat der Punkt im
     Band dieselbe Farbe wie der Header der Seite, auf die er führt.
     Ändert sich eine Stufe auf der Seite, hier nachziehen. */
  --niveau-erkunden:   var(--zb-green,  #4B8021);  /* erkunden | entdecken     */
  --niveau-anwenden:   var(--zb-orange, #B7580D);  /* anwenden | adaptieren    */
  --niveau-verbessern: var(--zb-berry,  #aa4c7d);  /* verbessern | innovieren  */

  --wp-1: var(--niveau-erkunden);    /* W1 Making verstehen     */
  --wp-2: var(--niveau-anwenden);    /* W2 Vision entwickeln    */
  --wp-3: var(--niveau-anwenden);    /* W3 Gemeinsam planen     */
  --wp-4: var(--niveau-anwenden);    /* W4 Räume und Tools      */
  --wp-5: var(--niveau-anwenden);    /* W5 Unterricht gestalten */
  --wp-6: var(--niveau-anwenden);    /* W6 Lernen begleiten     */
  --wp-7: var(--niveau-verbessern);  /* W7 Making verankern     */
  --wp-8: var(--niveau-verbessern);  /* W8 Weiterentwickeln     */

  /* Akzent, wo kein Wegpunkt aktiv ist - bewusst kein Niveau-Grün. */
  --hr-akzent: var(--zb-ink);

  --zb-radius: 10px;
  --zb-radius-sm: 6px;
  --zb-shadow: 0 2px 16px rgba(18, 21, 28, .09);
  --zb-shadow-lg: 0 18px 56px rgba(18, 21, 28, .26);
}


/* ============================================================
   Handreichungs-Band · kompakter Einstieg für zitbox.ch/making/
   Setzt shared/css/zitbox.css voraus.

   Gestaltungsprinzip: progressive Offenlegung. Auf der Seite steht nur ein
   flaches Band (rund 230 px hoch), das den Making-Navigator nicht nach unten
   drückt. Die gesamte Handreichung liegt dahinter in einem Dialog.
   ============================================================ */

.hr-band {
  font-family: var(--zb-font-body);
  color: var(--zb-text);
  background: var(--zb-white);
  border: 1px solid var(--zb-line);
  border-radius: var(--zb-radius);
  box-shadow: var(--zb-shadow);
  padding: 26px 28px 22px;
  margin: 8px 0 34px;
  container-type: inline-size;
}

/* Die Seite drumherum setzt ihr eigenes box-sizing; hier gilt border-box fuer
   alles, was zur Handreichung gehoert. Ohne die Dialog-Zeile war der Absprung
   um seine Innenabstaende zu breit und ragte aus dem Dialog heraus. */
/* ------------------------------------------------------------------
   Abschirmung gegen das Theme

   Eingebettet laeuft die Komponente in BuddyBoss und Brizy. Beide setzen
   globale Regeln auf button, ul, li, p und Ueberschriften. Das Ziel steht
   in :where(), der Vorfahre nicht: Spezifitaet (0,1,0). Damit schlaegt der
   Block Theme-Regeln auf Elementebene wie "button {...}", liegt aber
   gleichauf mit den eigenen Ein-Klassen-Regeln - und verliert dort ueber
   die Quellreihenfolge, weil er ganz oben steht.

   Nicht abwehrbar sind Theme-Regeln mit !important. Falls auf zitbox.ch
   welche auf button oder a liegen, muss das an der echten Seite geprueft
   werden - siehe dist/README.md.
   ------------------------------------------------------------------ */
.hr-band :where(button), .hr-dialog :where(button) {
  margin: 0; padding: 0; width: auto; min-width: 0; min-height: 0; height: auto;
  font: inherit; color: inherit; text-align: inherit; text-transform: none;
  letter-spacing: normal; line-height: inherit; background: none; border: 0;
  border-radius: 0; box-shadow: none; text-shadow: none; -webkit-appearance: none;
  appearance: none; transition: none;
}
.hr-band :where(a), .hr-dialog :where(a) {
  color: inherit; text-decoration: none; box-shadow: none; border: 0;
}
.hr-band :where(ul, ol), .hr-dialog :where(ul, ol) {
  margin: 0; padding: 0; list-style: none;
}
.hr-band :where(li), .hr-dialog :where(li) { margin: 0; padding: 0; }
.hr-band :where(li)::before, .hr-dialog :where(li)::before,
.hr-band :where(li)::after,  .hr-dialog :where(li)::after { content: none; }
.hr-band :where(p, figure, blockquote, dl, dd), .hr-dialog :where(p, figure, blockquote, dl, dd) { margin: 0; }
.hr-band :where(h2, h3, h4, h5, h6), .hr-dialog :where(h2, h3, h4, h5, h6) {
  margin: 0; font-size: inherit; font-weight: inherit; color: inherit;
  line-height: inherit; letter-spacing: normal; text-transform: none;
}
.hr-band :where(img, svg), .hr-dialog :where(img, svg) { max-width: 100%; }
.hr-band :where(details, summary), .hr-dialog :where(details, summary) { margin: 0; }
.hr-band :where(summary)::-webkit-details-marker,
.hr-dialog :where(summary)::-webkit-details-marker { display: none; }

/* Zustaende. BuddyBoss faerbt mit "button:hover, button:focus, button:active"
   jeden Knopf in der Primaerfarbe ein - Spezifitaet (0,1,1), also staerker als
   der Block oben. Diese Regel liegt mit (0,1,2) knapp darueber, aber unter
   den eigenen Hover-Regeln (0,2,0). Knoepfe mit eigener Flaeche geben ihre
   Werte ueber --hr-btn-bg/-fg/-bd mit, sonst waeren sie im Fokus leer. */
section.hr-band button:where(:hover, :focus, :active),
div.hr-dialog button:where(:hover, :focus, :active) {
  background-color: var(--hr-btn-bg, transparent);
  color: var(--hr-btn-fg, inherit);
  border-color: var(--hr-btn-bd, transparent);
  text-decoration: none;
}

.hr-band, .hr-band *, .hr-band *::before, .hr-band *::after,
.hr-dialog, .hr-dialog *, .hr-dialog *::before, .hr-dialog *::after { box-sizing: border-box; }

/* ---------- Kopf ---------- */
.hr-band__head { margin-bottom: 20px; }
.hr-band__kicker {
  font-family: var(--zb-font-body);
  font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--hr-akzent); margin: 0 0 4px;
}
.hr-band__title {
  font-family: var(--zb-font-head); font-weight: 600;
  font-size: clamp(1.25rem, 2.2vw, 1.6rem); line-height: 1.2;
  color: var(--zb-ink); margin: 0 0 6px;
}
.hr-band__lead { font-size: .95rem; line-height: 1.55; margin: 0; max-width: 72ch; }

/* ---------- Der Weg: acht Wegpunkte ----------
   Die Verbindungslinie liegt als ::before hinter den Knoten und macht aus der
   Reihe einen Weg statt acht Einzelbuttons. Die Hauptverbindung ist
   W1–W2–…–W8; Querverbindungen stehen im Dialogfuss, nicht auf dem Band. */
.hr-weg {
  list-style: none; margin: 0 0 20px; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}

/* Etappe: Kopf in Etappenfarbe, darunter ihre zwei Wegpunkte auf einer Linie. */
.hr-etappe-band { display: flex; flex-direction: column; min-width: 0; }
.hr-etappe-band__kopf {
  display: flex; align-items: center; gap: 7px;
  margin: 0 0 12px; padding: 0 2px 7px;
  border-bottom: 3px solid var(--hr-c);
  font-family: var(--zb-font-head); font-weight: 700; font-size: .8rem;
  letter-spacing: .07em; text-transform: uppercase; color: var(--hr-c);
}
.hr-etappe-band__kopf > span {
  width: 19px; height: 19px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--hr-c); color: #fff; font-size: .68rem; letter-spacing: 0;
}
.hr-etappe-band__wps {
  list-style: none; margin: 0; padding: 0; position: relative;
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
}
.hr-etappe-band__wps::before {
  content: ""; position: absolute; left: 25%; right: 25%; top: 26px;
  height: 2px; background: color-mix(in srgb, var(--hr-c) 30%, white); z-index: 0;
}

.hr-phase {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: 100%; padding: 0 4px 10px;
  background: none; border: 0; cursor: pointer; font: inherit; text-align: center;
  border-radius: var(--zb-radius-sm);
  transition: transform .14s ease;
}
.hr-phase:hover .hr-phase__name { color: var(--hr-c, var(--hr-akzent)); }
.hr-phase:focus-visible { outline: 3px solid var(--zb-blue); outline-offset: 3px; }

/* Hexagon – greift die Icon-Sprache der zITBOx auf. Von den Niveau-Icons
   unterscheidet es sich über die Farbe: nie Grün, Orange oder Beere.
   Flaechig gefuellt: ein `box-shadow: inset` wuerde vom clip-path
   weggeschnitten. */
.hr-phase__punkt {
  width: 46px; height: 46px; flex-shrink: 0;
  clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  display: grid; place-items: center;
  background: var(--hr-c, var(--hr-akzent));
  color: var(--zb-white);
  font-family: var(--zb-font-head); font-size: 1.05rem; font-weight: 700;
  font-variant-numeric: tabular-nums; line-height: 1;
  transition: transform .16s ease, filter .16s ease;
}
.hr-phase:hover .hr-phase__punkt { transform: scale(1.12); }
.hr-phase[aria-expanded="true"] .hr-phase__punkt { transform: scale(1.12); filter: brightness(.88); }

/* Weisser Saum, damit die Linie dahinter nicht an die Kante stoesst */
.hr-phase__ring {
  display: grid; place-items: center; padding: 4px; border-radius: 50%;
  background: var(--zb-white); transition: transform .16s ease;
}
.hr-phase:hover .hr-phase__ring { transform: translateY(-1px); }

/* Themenlabel: das Wichtigste am Knoten – es sagt, worum es geht. */
.hr-phase__name {
  font-family: var(--zb-font-head); font-weight: 600; font-size: .86rem;
  color: var(--zb-ink); line-height: 1.22; transition: color .16s ease;
  text-wrap: balance;
}
.hr-phase[aria-expanded="true"] .hr-phase__name { color: var(--hr-c, var(--hr-akzent)); }

/* Ortsname: die Metapher, zurückhaltend. */
.hr-phase__meta {
  font-size: .71rem; color: var(--zb-text); line-height: 1.25;
  opacity: .78; letter-spacing: .01em;
}

/* ---------- Fusszeile: Rollen-Einstieg ---------- */
.hr-band__foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  border-top: 1px solid var(--zb-line); padding-top: 16px;
}
.hr-band__foot > span { font-size: .88rem; margin-right: 2px; }

.hr-pill {
  --hr-btn-bg: var(--zb-white); --hr-btn-fg: var(--zb-ink); --hr-btn-bd: var(--zb-line);
  font: inherit; font-size: .87rem; cursor: pointer;
  padding: 7px 15px; border-radius: 999px;
  border: 1px solid var(--zb-line); background: var(--zb-white); color: var(--zb-ink);
  transition: background .14s ease, border-color .14s ease;
}
.hr-pill:hover { background: var(--zb-grey); border-color: #d2d5d4; }
.hr-pill:focus-visible { outline: 3px solid var(--zb-blue); outline-offset: 2px; }
.hr-pill--stark { background: var(--hr-akzent); border-color: var(--hr-akzent); color: #fff; margin-left: auto;
  --hr-btn-bg: var(--hr-akzent); --hr-btn-fg: #fff; --hr-btn-bd: var(--hr-akzent); }
.hr-pill--stark:hover { background: #2f3446; border-color: #2f3446; }

/* ---------- Schmale Breiten ---------- */
@container (max-width: 900px) {
  .hr-weg { grid-template-columns: repeat(2, 1fr); row-gap: 20px; }

}
@container (max-width: 460px) {
  .hr-weg { grid-template-columns: 1fr; }
  .hr-pill--stark { margin-left: 0; }
}
/* Fallback für Browser ohne Container-Queries */
@supports not (container-type: inline-size) {
  @media (max-width: 940px) { .hr-weg { grid-template-columns: repeat(2, 1fr); row-gap: 20px; } }
  @media (max-width: 500px) { .hr-weg { grid-template-columns: 1fr; } }
}

/* ============================================================
   Dialog · WAI-ARIA APG «Dialog (Modal)»
   ============================================================ */

.hr-dialog[hidden] { display: none !important; }
.hr-dialog {
  position: fixed; inset: 0; z-index: 99999;
  font-family: var(--zb-font-body); color: var(--zb-text);
  display: grid; place-items: center; padding: 24px;
}
.hr-dialog__backdrop {
  position: absolute; inset: 0; background: rgba(18, 21, 28, .55);
  animation: hr-fade .18s ease;
}
.hr-dialog__panel {
  position: relative; z-index: 1;
  width: min(940px, 100%); max-height: min(86vh, 900px);
  background: var(--zb-white); border-radius: var(--zb-radius);
  box-shadow: var(--zb-shadow-lg);
  display: flex; flex-direction: column; overflow: hidden;
  animation: hr-rise .22s cubic-bezier(.2, .7, .3, 1);
}
@keyframes hr-fade { from { opacity: 0 } }
@keyframes hr-rise { from { opacity: 0; transform: translateY(14px) } }

/* ---------- Dialogkopf ---------- */
.hr-dialog__head {
  padding: 22px 26px 0; border-top: 5px solid var(--hr-c, var(--hr-akzent));
  flex-shrink: 0;
}
.hr-dialog__eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--hr-c, var(--hr-akzent)); margin: 0 0 6px;
}
.hr-dialog__title {
  font-family: var(--zb-font-head); font-weight: 600;
  font-size: clamp(1.3rem, 2.4vw, 1.75rem); line-height: 1.22;
  color: var(--zb-ink); margin: 0 0 8px; padding-right: 44px;
}
.hr-dialog__sub { font-size: .95rem; line-height: 1.55; margin: 0 0 16px; max-width: 74ch; }

.hr-dialog__close {
  --hr-btn-bg: var(--zb-white); --hr-btn-fg: var(--zb-ink); --hr-btn-bd: var(--zb-line);
  position: absolute; top: 16px; right: 16px;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--zb-line); background: var(--zb-white); color: var(--zb-ink);
  font-size: 1.35rem; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
}
.hr-dialog__close:hover { background: var(--zb-grey); }
.hr-dialog__close:focus-visible { outline: 3px solid var(--zb-blue); outline-offset: 2px; }

/* ---------- Inhaltsfläche ---------- */
.hr-panel { padding: 22px 26px 26px; overflow-y: auto; flex: 1; scroll-behavior: smooth; }
.hr-panel:focus-visible { outline: 3px solid var(--zb-blue); outline-offset: -3px; }
.hr-panel h4 {
  font-family: var(--zb-font-head); font-weight: 600; font-size: 1.02rem;
  color: var(--zb-ink); margin: 22px 0 8px;
}
.hr-panel h4:first-child { margin-top: 0; }
.hr-panel p { margin: 0 0 12px; font-size: .95rem; line-height: 1.6; }
.hr-panel a { color: var(--hr-c, var(--hr-akzent)); }

.hr-def {
  background: var(--zb-grey); border-radius: var(--zb-radius-sm);
  padding: 14px 18px; margin: 0 0 20px; font-size: .95rem; line-height: 1.6;
}

/* ---------- Kapitel-Akkordeon ---------- */
.hr-kapitel { border: 1px solid var(--zb-line); border-radius: var(--zb-radius-sm); margin-bottom: 8px; overflow: hidden; }
.hr-kapitel__btn {
  --hr-btn-bg: var(--zb-white);
  width: 100%; display: flex; align-items: flex-start; gap: 12px; text-align: left;
  font: inherit; cursor: pointer; padding: 14px 16px; background: var(--zb-white); border: 0;
}
.hr-kapitel__btn:hover { background: #fafbfa; }
.hr-kapitel__btn:focus-visible { outline: 3px solid var(--zb-blue); outline-offset: -3px; }
.hr-kapitel__nr {
  font-family: var(--zb-font-head); font-weight: 700; font-size: .95rem;
  color: var(--hr-c, var(--hr-akzent)); min-width: 2.2ch; flex-shrink: 0; padding-top: 1px;
}
.hr-kapitel__frage { font-size: .95rem; font-weight: 500; color: var(--zb-ink); line-height: 1.45; flex: 1; }
.hr-kapitel__chev { flex-shrink: 0; transition: transform .18s ease; color: var(--zb-text); }
.hr-kapitel__btn[aria-expanded="true"] .hr-kapitel__chev { transform: rotate(180deg); }
.hr-kapitel__body { padding: 0 16px 16px 44px; border-top: 1px solid var(--zb-line); padding-top: 14px; }
.hr-kapitel__body[hidden] { display: none; }

.hr-block { margin-bottom: 16px; }
.hr-block__label {
  font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--zb-text); margin: 0 0 5px;
}
.hr-offen {
  font-size: .88rem; font-style: italic; color: var(--zb-ink);
  background: var(--zb-grey); border-left: 3px dashed #8a8f9c; padding: 8px 12px; border-radius: 0 4px 4px 0;
}

/* ---------- Trefferlisten im Dialog ---------- */
.hr-liste { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.hr-item {
  border: 1px solid var(--zb-line); border-radius: var(--zb-radius-sm);
  padding: 13px 15px;
}
.hr-item__titel { font-size: .95rem; font-weight: 600; color: var(--zb-ink); margin: 0 0 4px; }
.hr-item__titel a { color: inherit; text-decoration: none; }
.hr-item__titel a:hover { text-decoration: underline; color: var(--hr-c, var(--hr-akzent)); }
.hr-item__text { font-size: .88rem; line-height: 1.5; margin: 0 0 8px; }
.hr-item__meta { display: flex; flex-wrap: wrap; gap: 5px; }

.hr-tag {
  font-size: .74rem; padding: 2px 9px; border-radius: 999px;
  background: var(--zb-grey); color: var(--zb-ink); white-space: nowrap;
}
.hr-tag--phase { background: color-mix(in srgb, var(--hr-c, var(--hr-akzent)) 13%, white); color: var(--hr-c, var(--hr-akzent)); }

.hr-leer { padding: 28px; text-align: center; font-size: .92rem; border: 1px dashed var(--zb-line); border-radius: var(--zb-radius-sm); }


@media (max-width: 640px) {
  .hr-dialog { padding: 0; }
  .hr-dialog__panel { max-height: 100vh; height: 100%; width: 100%; border-radius: 0; }
  .hr-band { padding: 20px 18px 18px; }
  .hr-panel { padding: 18px; }
  .hr-dialog__head { padding: 18px 18px 0; }
  .hr-dialog__foot { padding: 10px 18px; }
  .hr-kapitel__body { padding-left: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .hr-dialog__panel, .hr-dialog__backdrop { animation: none; }
  .hr-phase, .hr-kapitel__chev { transition: none; }
  .hr-panel { scroll-behavior: auto; }
}

/* Kein Scrollen des Hintergrunds, solange der Dialog offen ist */
body.hr-dialog-offen { overflow: hidden; }


/* ============================================================
   Sammelbeitrag: die neun Abschnitte im Dialog
   ============================================================ */

/* Auf einen Blick – drei Angaben nebeneinander */
.hr-blick {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1px;
  background: var(--zb-line); border: 1px solid var(--zb-line);
  border-radius: var(--zb-radius-sm); overflow: hidden; margin: 0 0 20px;
}
.hr-blick > div { background: var(--zb-white); padding: 13px 16px; }
.hr-blick dt {
  font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--zb-text); margin-bottom: 4px;
}
.hr-blick dd { margin: 0; font-size: .89rem; line-height: 1.5; color: var(--zb-ink); }

/* Leitfragen – als Fragenliste, nicht als Aufzählung */
.hr-fragen { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 7px; }
.hr-fragen li {
  font-size: .94rem; line-height: 1.5; color: var(--zb-ink);
  padding-left: 22px; position: relative;
}
.hr-fragen li::before {
  content: "?"; position: absolute; left: 0; top: 0;
  font-family: var(--zb-font-head); font-weight: 700; color: var(--hr-c, var(--hr-akzent));
}

/* Vorgehen – nummerierte Schritte mit Zwischenergebnis */
.hr-schritte { list-style: none; margin: 0; padding: 0; counter-reset: s; display: grid; gap: 14px; }
.hr-schritte li { counter-increment: s; display: grid; grid-template-columns: 30px 1fr; gap: 12px; }
.hr-schritte li::before {
  content: counter(s); grid-row: 1 / span 3;
  width: 28px; height: 28px; border-radius: 50%;
  background: color-mix(in srgb, var(--hr-c, var(--hr-akzent)) 14%, white);
  color: var(--hr-c, var(--hr-akzent));
  font-family: var(--zb-font-head); font-weight: 700; font-size: .85rem;
  display: grid; place-items: center;
}
.hr-schritte b { font-size: .95rem; color: var(--zb-ink); font-weight: 600; display: block; margin-bottom: 3px; }
.hr-schritte p { font-size: .9rem; line-height: 1.55; margin: 0 0 5px; }
.hr-ergebnis {
  font-size: .85rem; color: var(--zb-ink);
  background: color-mix(in srgb, var(--hr-c, var(--hr-akzent)) 7%, white);
  border-left: 3px solid var(--hr-c, var(--hr-akzent));
  padding: 6px 11px; border-radius: 0 4px 4px 0; display: block;
}

/* Fachlich eingeordnet – Belegart sichtbar */
.hr-beleg { border: 1px solid var(--zb-line); border-radius: var(--zb-radius-sm); padding: 13px 15px; }
.hr-beleg + .hr-beleg { margin-top: 10px; }
.hr-beleg p { font-size: .91rem; line-height: 1.55; margin: 0 0 7px; color: var(--zb-ink); }
.hr-beleg cite { font-style: normal; font-size: .82rem; color: var(--zb-text); display: block; }
.hr-art {
  display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; padding: 2px 8px; border-radius: 3px; margin-bottom: 7px;
}
.hr-art--konzept { background: #e8eef6; color: #1a4d7a; }
.hr-art--praxiserfahrung { background: #f3ece3; color: #6b4a24; }
.hr-art--forschungsbefund { background: #e6e7ec; color: #1E2132; }

/* Nächster Schritt – der Abschluss jedes Beitrags */
.hr-naechster {
  background: color-mix(in srgb, var(--hr-c, var(--hr-akzent)) 8%, white);
  border-radius: var(--zb-radius-sm); padding: 16px 18px; margin-top: 4px;
}
.hr-naechster p { font-size: .94rem; line-height: 1.55; margin: 0 0 12px; color: var(--zb-ink); }
.hr-weiter { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.hr-weiter > span { font-size: .84rem; color: var(--zb-text); }
.hr-sprung {
  --hr-btn-bg: var(--zb-white); --hr-btn-fg: var(--zb-ink); --hr-btn-bd: var(--zb-line);
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: .84rem; cursor: pointer; padding: 4px 12px 4px 5px;
  border-radius: 999px; border: 1px solid var(--zb-line); background: var(--zb-white); color: var(--zb-ink);
  transition: background .15s ease, border-color .15s ease;
}
.hr-sprung > span {
  width: 19px; height: 19px; display: grid; place-items: center; border-radius: 50%;
  background: var(--hr-c, var(--hr-akzent)); color: #fff; font-size: .7rem; font-weight: 700;
}
.hr-sprung:hover {
  background: color-mix(in srgb, var(--hr-c, var(--hr-akzent)) 6%, white);
  border-color: color-mix(in srgb, var(--hr-c, var(--hr-akzent)) 45%, white);
}
.hr-sprung:focus-visible { outline: 3px solid var(--zb-blue); outline-offset: 2px; }

/* Redaktionsstand – nur solange Abschnitte offen sind */
.hr-stand {
  font-size: .82rem; color: var(--zb-ink); background: var(--zb-grey);
  border: 1px dashed #b9bdc6; border-radius: var(--zb-radius-sm);
  padding: 8px 12px; margin: 0 0 18px;
}


/* Szene aus der Projektillustration – gibt jedem Wegpunkt ein Gesicht.
   Schmal gehalten, damit der Text darunter sofort sichtbar bleibt. */

/* ============================================================
   Praxisfall, Vertiefung, Aufklapper
   ============================================================ */

/* Ein eingeordnetes Praxisbeispiel: Kontext, Vorgehen, Idee, Grenze.
   Die Definitionsliste hält die vier Teile in fester Reihenfolge - so sind
   Beispiele über Wegpunkte hinweg vergleichbar. */
.hr-fall {
  border: 1px solid var(--zb-line); border-left: 4px solid var(--hr-c, var(--hr-akzent));
  border-radius: 0 var(--zb-radius-sm) var(--zb-radius-sm) 0;
  padding: 15px 17px; margin-bottom: 14px;
}
.hr-fall h4 { margin: 0 0 8px; font-size: 1rem; }
.hr-fall h4 a { color: var(--zb-ink); text-decoration: none; }
.hr-fall h4 a:hover { color: var(--hr-c, var(--hr-akzent)); text-decoration: underline; }
.hr-fall__kern { font-size: .91rem; line-height: 1.55; margin: 0 0 8px; }
.hr-fall__kern b { color: var(--hr-c, var(--hr-akzent)); font-weight: 600; }
.hr-fall dl { margin: 10px 0 0; display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; }
.hr-fall dt {
  font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--zb-text); padding-top: 2px; white-space: nowrap;
}
.hr-fall dd { margin: 0; font-size: .89rem; line-height: 1.55; }
.hr-fall__idee { color: var(--hr-c, var(--hr-akzent)) !important; }
.hr-fall__grenze { color: #4a4f5c !important; }

@media (max-width: 560px) {
  .hr-fall dl { grid-template-columns: 1fr; gap: 2px; }
  .hr-fall dd { margin-bottom: 8px; }
}

/* Vertiefung: nur W5 und W8 haben welche. Zugeklappt eine Zeile,
   damit die vier Vertiefungen von W5 auf einen Blick passen. */
.hr-vertiefung {
  background: var(--zb-grey); border-radius: var(--zb-radius-sm);
  padding: 11px 16px; margin-bottom: 7px;
}
.hr-vertiefung > summary {
  cursor: pointer; font-size: .95rem; color: var(--zb-ink); font-weight: 500;
  list-style: none; display: flex; align-items: center; gap: 7px;
}
.hr-vertiefung > summary::-webkit-details-marker { display: none; }
.hr-vertiefung > summary::before {
  content: "▸"; color: var(--hr-c, var(--hr-akzent)); transition: transform .15s ease;
}
.hr-vertiefung[open] > summary::before { transform: rotate(90deg); }
.hr-vertiefung > summary:focus-visible { outline: 3px solid var(--zb-blue); outline-offset: 2px; }
.hr-vertiefung[open] > summary { margin-bottom: 8px; }
.hr-vertiefung p { font-size: .89rem; line-height: 1.55; margin: 0 0 7px; }
.hr-vertiefung cite { font-style: normal; font-size: .79rem; color: var(--zb-text); }

/* Aufklapper für Angaben, die nicht jede Person braucht */
.hr-mehr { margin-top: 6px; }
.hr-mehr summary {
  cursor: pointer; font-size: .82rem; color: var(--zb-text);
  list-style: none; display: inline-flex; align-items: center; gap: 5px;
}
.hr-mehr summary::-webkit-details-marker { display: none; }
.hr-mehr summary::before { content: "▸"; font-size: .8em; transition: transform .15s ease; }
.hr-mehr[open] summary::before { transform: rotate(90deg); }
.hr-mehr summary:hover { color: var(--zb-ink); }
.hr-mehr summary:focus-visible { outline: 3px solid var(--zb-blue); outline-offset: 2px; }
.hr-mehr p { margin: 6px 0 0; }

/* ============================================================
   Modal: Aufhänger, Kapitelblick, Absprung

   Der Weg ist ein Trichter – Navigator, Band, Modal, Kapitelseite –, und
   jeder Schritt wird konkreter. Im Modal heisst das: zuerst der Aufhänger
   des Kapitels, dann was drinsteht, dann der Weg hinein. Der Weg hinein ist
   das grösste Element; Vor und Zurück bleiben klein.
   ============================================================ */

/* ---------- Aufhänger: Szene und Kurzclaim ---------- */
.hr-aufhaenger {
  display: grid; grid-template-columns: 184px 1fr; gap: 20px; align-items: center;
  margin-bottom: 20px;
}
/* Festes 4:3 mit cover: die Fotos haben 3:2, 4:3 und 16:9. So bleibt die
   Kachel bei jedem Kapitel gleich gross und der Claim steht daneben. */
.hr-aufhaenger__bild {
  margin: 0; border-radius: var(--zb-radius-sm); overflow: hidden;
  aspect-ratio: 4 / 3;
  background: color-mix(in srgb, var(--hr-c, var(--hr-akzent)) 8%, white);
}
.hr-aufhaenger__bild img {
  display: block; width: 100%; height: 100%; object-fit: cover;
}
.hr-aufhaenger__claim {
  margin: 0; font-family: var(--zb-font-head); font-weight: 600;
  font-size: clamp(1.05rem, 1.9vw, 1.3rem); line-height: 1.35;
  color: var(--hr-c, var(--hr-akzent)); text-wrap: balance;
}

/* ---------- Der Aufhängertext aus «Darum geht es» ---------- */
.hr-hook p { font-size: .97rem; line-height: 1.65; margin: 0 0 12px; color: var(--zb-ink); }
.hr-hook p:last-child { margin-bottom: 0; }

/* ---------- Was im Kapitel steckt ---------- */
.hr-imkapitel {
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--zb-line);
}
.hr-imkapitel h4 {
  font-family: var(--zb-font-body); font-size: .72rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--zb-text);
  margin: 0 0 12px;
}
.hr-zahlen { display: flex; flex-wrap: wrap; gap: 8px 26px; margin-bottom: 14px; }
.hr-zahlen span { display: flex; align-items: baseline; gap: 7px; font-size: .85rem; color: var(--zb-text); }
.hr-zahlen b {
  font-family: var(--zb-font-head); font-size: 1.45rem; font-weight: 700;
  color: var(--hr-c, var(--hr-akzent)); font-variant-numeric: tabular-nums;
}

.hr-schrittchen {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 6px 22px;
}
.hr-schrittchen li {
  position: relative; padding-left: 16px;
  font-size: .9rem; line-height: 1.45; color: var(--zb-ink);
}
.hr-band .hr-schrittchen li::before, .hr-dialog .hr-schrittchen li::before {
  content: ""; position: absolute; left: 0; top: .5em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--hr-c, var(--hr-akzent));
}

/* ---------- Dialogfuss: der Weg ins Kapitel ---------- */
.hr-dialog__foot {
  display: block; flex-shrink: 0; background: #fafbfa;
  border-top: 1px solid var(--zb-line); padding: 14px 26px 12px;
}

.hr-kapitel-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 100%; text-decoration: none; text-align: left;
  background: var(--hr-c, var(--hr-akzent)); color: var(--zb-white);
  border-radius: var(--zb-radius-sm); padding: 13px 20px;
  transition: filter .14s ease, transform .14s ease;
}
.hr-kapitel-cta:hover { filter: brightness(1.08); transform: translateY(-1px); color: var(--zb-white); }
.hr-kapitel-cta:focus-visible { outline: 3px solid var(--zb-blue); outline-offset: 2px; }
.hr-kapitel-cta > span {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
  font-family: var(--zb-font-head); font-weight: 600; font-size: 1.02rem;
}
.hr-kapitel-cta b {
  font-family: var(--zb-font-body); font-weight: 400; font-size: .84rem;
  opacity: .82; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hr-kapitel-cta svg { flex-shrink: 0; }

/* Solange die Seite nicht publiziert ist: gleiche Grösse und Form, aber
   erkennbar kein Link. Der Weg bleibt sichtbar, auch wenn er noch zu ist. */
.hr-kapitel-cta--offen {
  background: repeating-linear-gradient(135deg,
    var(--zb-grey), var(--zb-grey) 9px,
    color-mix(in srgb, var(--hr-c, var(--hr-akzent)) 7%, var(--zb-grey)) 9px,
    color-mix(in srgb, var(--hr-c, var(--hr-akzent)) 7%, var(--zb-grey)) 18px);
  color: var(--zb-text);
  border: 1px dashed color-mix(in srgb, var(--hr-c, var(--hr-akzent)) 40%, var(--zb-line));
}
.hr-kapitel-cta--offen > span { color: var(--zb-ink); }
.hr-kapitel-cta--offen b { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; opacity: .7; }

/* ---------- Nachbarn: klein, unter dem Hauptweg ---------- */
.hr-nachbarn {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: 6px;
}
.hr-nav {
  --hr-btn-fg: var(--zb-text);
  font: inherit; font-size: .84rem; cursor: pointer; background: none; border: 0;
  color: var(--zb-text); padding: 6px 8px; border-radius: var(--zb-radius-sm);
  display: inline-flex; align-items: center; gap: 6px;
}
.hr-nav:hover:not(:disabled) { background: var(--zb-grey); color: var(--zb-ink); }
.hr-nav:focus-visible { outline: 3px solid var(--zb-blue); outline-offset: 2px; }

.hr-fussnote { margin: 0; font-size: .87rem; color: var(--zb-text); }

@media (max-width: 560px) {
  .hr-aufhaenger { grid-template-columns: 120px 1fr; gap: 14px; }
  .hr-dialog__foot { padding-inline: 18px; }
  .hr-kapitel-cta { padding: 12px 15px; }
  .hr-kapitel-cta > span { font-size: .94rem; }
}


/* Entwurfsfassung: voll klickbar, aber als Entwurf gekennzeichnet.
   Der Weg bleibt der Hauptweg - nur die Beschriftung sagt, wo man landet. */
.hr-kapitel-cta--entwurf { position: relative; }
.hr-kapitel-cta--entwurf::after {
  content: "Entwurf"; position: absolute; top: -9px; right: 14px;
  font-family: var(--zb-font-body); font-size: .7rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  background: var(--zb-white); color: var(--hr-c, var(--hr-akzent));
  border: 1px solid currentColor; border-radius: 999px; padding: 1px 8px;
}


/* Seite im Aufbau: der Link steht schon, die Seite noch nicht. Sichtbar
   gemacht, damit ein 404 nicht als Fehler der Handreichung gelesen wird. */
.hr-kapitel-cta--aufbau { position: relative; }
.hr-kapitel-cta--aufbau::after {
  content: "Seite im Aufbau"; position: absolute; top: -9px; right: 14px;
  font-family: var(--zb-font-body); font-size: .7rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  background: var(--zb-white); color: var(--hr-c, var(--hr-akzent));
  border: 1px solid currentColor; border-radius: 999px; padding: 1px 9px;
}


/* ============================================================
   Übersicht und Rollensicht: kompakte Zeilen statt Kästen
   ============================================================ */

.hr-vorspann {
  margin: 0 0 22px; font-size: .97rem; line-height: 1.6; color: var(--zb-ink);
}
.hr-vorspann strong { font-weight: 600; }

/* ---------- Etappe: die Gliederung der Übersicht ---------- */
.hr-etappe { margin: 0 0 22px; }
.hr-etappe:last-child { margin-bottom: 0; }
.hr-etappe__kopf {
  display: flex; align-items: center; gap: 10px; margin: 0 0 9px;
  padding-bottom: 7px; border-bottom: 3px solid var(--hr-c, var(--zb-line));
}
.hr-etappe__nr {
  flex: none; width: 21px; height: 21px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--hr-c, var(--zb-ink)); color: #fff;
  font-family: var(--zb-font-body); font-size: .7rem; font-weight: 700;
}
.hr-etappe__wort { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 9px; }
.hr-etappe__wort b {
  font-family: var(--zb-font-head); font-size: .95rem; font-weight: 600;
  color: var(--hr-c, var(--zb-ink)); letter-spacing: .01em;
}
.hr-etappe__wort span { font-size: .82rem; color: var(--zb-text); }

/* ---------- Die Zeile ---------- */
.hr-zeilen { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.hr-zeilen--paar { grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); }

/* Nebeneinander stehende Kapitel sollen gleich hoch sein, auch wenn die
   Leitfrage im einen zwei und im anderen drei Zeilen braucht. */
.hr-zeile { margin: 0; display: flex; }
.hr-zeile__btn {
  --hr-btn-bg: var(--zb-white); --hr-btn-bd: var(--zb-line);
  width: 100%; display: flex; align-items: flex-start; gap: 11px;
  text-align: left; cursor: pointer; font: inherit;
  padding: 11px 12px 11px 11px;
  background: var(--zb-white);
  border: 1px solid var(--zb-line);
  border-left: 3px solid var(--hr-c, var(--hr-akzent));
  border-radius: var(--zb-radius-sm);
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.hr-zeile__btn:hover {
  background: color-mix(in srgb, var(--hr-c, var(--hr-akzent)) 5%, white);
  border-color: color-mix(in srgb, var(--hr-c, var(--hr-akzent)) 40%, white);
  border-left-color: var(--hr-c, var(--hr-akzent));
}
.hr-zeile__btn:is(:focus, :active) { border-left-color: var(--hr-c, var(--hr-akzent)); }
.hr-zeile__btn:focus-visible {
  outline: 2px solid var(--hr-c, var(--hr-akzent)); outline-offset: 2px;
}

.hr-zeile__nr {
  flex: none; width: 26px; height: 26px; margin-top: 1px;
  display: grid; place-items: center;
  background: var(--hr-c, var(--hr-akzent)); color: #fff;
  font-family: var(--zb-font-body); font-size: .8rem; font-weight: 700;
  clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
}

.hr-zeile__text { flex: 1 1 auto; min-width: 0; display: block; }
.hr-zeile__kopf {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px;
  margin-bottom: 2px;
}
.hr-zeile__label {
  font-family: var(--zb-font-head); font-size: .93rem; font-weight: 600;
  color: var(--hr-c, var(--hr-akzent)); line-height: 1.25;
}
.hr-zeile__marke {
  font-family: var(--zb-font-body); font-size: .7rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--hr-c, var(--hr-akzent));
  border: 1px solid currentColor; border-radius: 999px; padding: 1px 7px;
}
.hr-zeile__frage {
  display: block; font-size: .87rem; line-height: 1.45; color: var(--zb-ink);
}
.hr-zeile__fuss {
  display: block; margin-top: 4px; font-size: .74rem; color: var(--zb-text);
  opacity: .8;
}
.hr-zeile__pfeil {
  flex: none; align-self: center; color: var(--hr-c, var(--hr-akzent));
  opacity: .5; transition: opacity .15s ease, transform .15s ease;
}
.hr-zeile__btn:hover .hr-zeile__pfeil { opacity: 1; transform: translateX(2px); }

/* ---------- Die übrigen Kapitel in der Rollensicht ---------- */
.hr-rest {
  margin-top: 20px; padding-top: 15px;
  border-top: 1px solid var(--zb-line);
}
.hr-rest__kopf {
  margin: 0 0 4px; font-family: var(--zb-font-head); font-size: .88rem;
  font-weight: 600; color: var(--zb-ink);
}
.hr-rest__text { margin: 0 0 9px; font-size: .84rem; color: var(--zb-text); }
.hr-rest__liste {
  display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none;
}
.hr-rest__btn {
  --hr-btn-bg: var(--zb-white); --hr-btn-fg: var(--zb-ink); --hr-btn-bd: var(--zb-line);
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font: inherit; font-size: .82rem; color: var(--zb-ink);
  background: var(--zb-white);
  border: 1px solid var(--zb-line); border-radius: 999px;
  padding: 4px 12px 4px 5px; transition: border-color .15s ease, background .15s ease;
}
.hr-rest__btn span {
  width: 19px; height: 19px; display: grid; place-items: center;
  background: var(--hr-c, var(--hr-akzent)); color: #fff;
  font-size: .7rem; font-weight: 700; border-radius: 50%;
}
.hr-rest__btn:hover {
  background: color-mix(in srgb, var(--hr-c, var(--hr-akzent)) 6%, white);
  border-color: color-mix(in srgb, var(--hr-c, var(--hr-akzent)) 45%, white);
}
.hr-rest__btn:focus-visible {
  outline: 2px solid var(--hr-c, var(--hr-akzent)); outline-offset: 2px;
}

@media (max-width: 560px) {
  .hr-zeilen--paar { grid-template-columns: 1fr; }
  .hr-etappe__wort span { flex: 1 0 100%; }
}