/* Scoped bridge to Philip Tok's design system (werkzeuge.goetheanum.ch, 2026-10-30).
   Pixel equivalents of rem tokens preserve the reference scale on Craft's 10px root. */
@font-face{font-family:AccordionMeta;src:url(fonts/SourceSans3-Regular.woff2) format('woff2');font-weight:400;font-display:swap}
.goetheanum-accordion{--blue:#0061a9;--gold:#d7ab68;--gold-deep:#94702e;--gold-ink:#8a6728;--ink:#23272b;--muted:#6b7177;--paper:#fff;--line:rgba(20,24,28,.10);--line-soft:rgba(20,24,28,.055);--on-accent:#fff;
--font-display:GoetheanumAccordion,'Helvetica Neue',Arial,sans-serif;--w-text:440;--w-deutlich:580;
--t-small:clamp(15px,14.4px + .18vw,16px);--t-body:clamp(18px,16.96px + .3vw,20px);--t-h3:clamp(20px,18.4px + .45vw,23.2px);
--s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:24px;--r-control:10px;--r-card:14px;--r-pill:999px;--tap:44px;--shadow-card:0 10px 30px rgba(20,24,28,.06);
font-family:var(--font-display);font-weight:var(--w-text);font-size:var(--t-body);line-height:1.66;color:var(--ink);margin-block:32px;overflow-wrap:anywhere;text-align:left;letter-spacing:.02em;font-kerning:normal;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;text-wrap:pretty;hyphens:auto}
.goetheanum-accordion,.goetheanum-accordion *{box-sizing:border-box}
.goetheanum-accordion [hidden]{display:none!important}
.goetheanum-accordion details{margin:0;padding:0}
.goetheanum-accordion summary{margin:0;color:inherit;font:inherit;text-transform:none}
.goetheanum-accordion summary::before,.goetheanum-accordion summary::after{content:none}
.goetheanum-accordion .btn{display:inline-flex;align-items:center;justify-content:center;font:inherit;font-size:var(--t-small);line-height:1.2;font-weight:var(--w-deutlich);min-height:var(--tap);padding:10px 16px;border-radius:var(--r-control);border:1px solid transparent;background:none;color:var(--muted);text-align:center;cursor:pointer;transition:.15s;text-transform:none;letter-spacing:inherit;box-shadow:none}
.goetheanum-accordion .btn:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.goetheanum-accordion .meta{font-family:AccordionMeta,'Helvetica Neue',Arial,sans-serif;font-weight:400;font-size:var(--t-small);color:var(--muted);line-height:1.5}
.goetheanum-accordion .num{font-variant-numeric:tabular-nums lining-nums;font-feature-settings:'tnum','lnum'}
.goetheanum-accordion .acc-inner{font:inherit}
.goetheanum-accordion .acc-inner p,.goetheanum-accordion .acc-inner li{font:inherit;color:inherit}
.goetheanum-accordion .acc-inner h2,.goetheanum-accordion .acc-inner h3,.goetheanum-accordion .acc-inner h4{font-family:var(--font-display);font-size:var(--t-h3);font-weight:580;line-height:1.25;margin:24px 0 12px;color:inherit}
.goetheanum-accordion .acc-inner>:first-child{margin-top:0}
.goetheanum-accordion .acc-inner a{color:var(--blue);text-decoration:underline;text-underline-offset:.15em}
.goetheanum-accordion .acc-inner img{max-width:100%;height:auto}
.goetheanum-accordion .acc-inner table{display:block;max-width:100%;overflow-x:auto}
.goetheanum-accordion .acc-kopf .alle{margin-left:auto}
.goetheanum-accordion .acc{scroll-margin-top:120px}
.goetheanum-accordion[data-sek="aas"]{--ton:#a24f8a;--ton-dunkel:#7c3d6a;--ton-hell:#feeef8;--ton-ink:#6d2f5c}
.goetheanum-accordion[data-sek="ps"]{--ton:#3b4881;--ton-dunkel:#394471;--ton-hell:#eff3ff;--ton-ink:#2d3762}
.goetheanum-accordion[data-sek="ms"]{--ton:#5f5599;--ton-dunkel:#4f477c;--ton-hell:#f3f2ff;--ton-ink:#413a6d}
.goetheanum-accordion[data-sek="nws"]{--ton:#1e7b6e;--ton-dunkel:#1d6157;--ton-hell:#e8f7f4;--ton-ink:#075349}
.goetheanum-accordion[data-sek="lws"]{--ton:#63b145;--ton-dunkel:#3e7826;--ton-hell:#ecf7e9;--ton-ink:#2f6a14}
.goetheanum-accordion[data-sek="sbk"]{--ton:#d072a0;--ton-dunkel:#914b6e;--ton-hell:#ffeef5;--ton-ink:#813d5f}
.goetheanum-accordion[data-sek="ssw"]{--ton:#5168c0;--ton-dunkel:#3f5194;--ton-hell:#eff3ff;--ton-ink:#324384}
.goetheanum-accordion[data-sek="szw"]{--ton:#df4164;--ton-dunkel:#a32c46;--ton-hell:#ffeff0;--ton-ink:#921939}
.goetheanum-accordion[data-sek="js"]{--ton:#ff675d;--ton-dunkel:#bd2525;--ton-hell:#ffefed;--ton-ink:#ab0815}
.goetheanum-accordion[data-sek="srmk"]{--ton:#598ddc;--ton-dunkel:#3b629e;--ton-hell:#edf4ff;--ton-ink:#2d548e}
.goetheanum-accordion[data-sek="mas"]{--ton:#2e54a4;--ton-dunkel:#2c4a88;--ton-hell:#eef4ff;--ton-ink:#1f3c78}
.goetheanum-accordion[data-sek="hpise"]{--ton:#f98a3c;--ton-dunkel:#af5400;--ton-hell:#fff0e7;--ton-ink:#9a4900}

/* =============================================================================
   Goetheanum CI – Akkordeon (Modul)
   -----------------------------------------------------------------------------
   Drei Kleider auf EINER Mechanik: .bluete · .faden · .kapsel (Klasse an .acc-liste).
   Setzt design-system/tokens.css und base.css voraus (Rollen .btn, .meta).
   Markup: <div class="acc-liste faden" data-sek="hpise"> mit .acc-kopf und
   <details class="acc"> je Frage; Skript: design-system/akkordeon.js.
   Vorbild der Bewegung: das aufblühende Klappmenü von goetheanum.ch
   (cubic-bezier(.32,.08,.24,1)) – die Bloom-Kurve.
   Farbe: vier Rollen – --ak Linie/Marke · --ak-ink Text · --ak-dunkel Fläche
   für Weiss · --ak-hell Hauch. Hausfall Gold; data-sek="<sektion>" nimmt die
   Sektionsfarben (Basis · -ink · -dunkel · -hell, Sektionsfarben 1.14.0).
   Regeln: Frage = Titelrolle Deutlich, Antwort = Fliesstext Klar – beide in der
   Hausschrift, eine Stimme. Die Nummer (.nr) ist OPTIONAL – ohne sie wird die
   Zeile einreihig; sie steht nur, wo auf Fragen verwiesen wird (G03). Ziffern
   tabellarisch (G25); Fingerziel = ganze Zeile
   ≥44 px (B04); Anwahl = dunkle Fläche + Weiss (B01); Winkel als Zeichen (das
   gelernte der Webfamilie); keine Versalien, kein Unterstreichen (G05).
   ============================================================================= */
.goetheanum-accordion{--acc-kurve:cubic-bezier(.32,.08,.24,1);--acc-dauer:.28s}
@media(prefers-reduced-motion:reduce){.goetheanum-accordion{--acc-dauer:0s}}

/* --- Farbrollen ------------------------------------------------------------
   Kommen seit 1.20.0 aus dem Fundament: ein data-sek IRGENDWO darüber setzt
   --ton (Linie/Marke), --ton-dunkel (Fläche für Weiss), --ton-hell (Hauch),
   --ton-ink (die Farbe als Schrift). Ohne data-sek greift der Hausfall Gold.
   Die kurzen Namen hier sind nur Lesehilfe für die Regeln darunter. */
.goetheanum-accordion.acc-liste{--ak:var(--ton,var(--gold));--ak-ink:var(--ton-ink,var(--gold-ink));
  --ak-dunkel:var(--ton-dunkel,var(--gold-deep));
  --ak-hell:var(--ton-hell,color-mix(in srgb,var(--gold) 14%,var(--paper)));
  max-width:780px}

/* --- Gemeinsame Anatomie ---------------------------------------------------- */
.goetheanum-accordion .acc-kopf{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  margin-bottom:var(--s3);min-height:var(--tap)}
.goetheanum-accordion .acc-kopf .alle{color:var(--ak-ink);border-color:transparent;padding-inline:var(--s3)}
.goetheanum-accordion .acc-kopf .alle:hover{border-color:var(--ak)}
.goetheanum-accordion .acc summary{list-style:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.goetheanum-accordion .acc summary::-webkit-details-marker{display:none}
.goetheanum-accordion .acc summary:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
/* Frage: Titelrolle, mehrzeilig in einer Liste – darum 1.25 statt 1.15 Durchschuss.
   Schmal eine Stufe kleiner (--t-body, 18 px) und ohne Ausgleich. */
.goetheanum-accordion .acc .frage{font-family:var(--font-display);font-weight:var(--w-deutlich);font-size:var(--t-h3);
  line-height:1.25;letter-spacing:0;text-wrap:balance;hyphens:manual}
@media(max-width:560px){.goetheanum-accordion .acc .frage{font-size:var(--t-body);text-wrap:pretty}}
/* Die Nummer ist eine MARKE, kein Datum – darum die Hausschrift (wie .step-num in
   base.css), nicht die Lese-Grotesk. Kleine Hausschrift nie Leise: Klar ist das
   Minimum. Ziffern bleiben dicktengleich und untereinander (G25). */
.goetheanum-accordion .acc .nr{font-family:var(--font-display);font-weight:var(--w-text);
  font-variant-numeric:tabular-nums lining-nums;font-feature-settings:"tnum","lnum";
  font-size:var(--t-small);color:var(--muted);line-height:1.2}
/* Der Knopf ist nur das Zeichen (Winkel); das Fingerziel ist die ganze Zeile. */
.goetheanum-accordion .acc .knopf{flex:0 0 auto;display:grid;place-items:center;width:24px;height:24px;
  border-radius:var(--r-pill);color:var(--ak-ink);
  transition:transform var(--acc-dauer) var(--acc-kurve),background var(--acc-dauer),color var(--acc-dauer),border-color var(--acc-dauer)}
.goetheanum-accordion .acc .knopf .ic{width:20px;height:20px;display:block}
.goetheanum-accordion .acc .acc-body{overflow:hidden}
/* Antwort in der Hausschrift (erbt den Körper, folgt damit auch dem Lesemodus) –
   eine Stimme mit der Frage. Mass 48ch ≈ 63 Zeichen (G10); Durchschuss 1.6 breit,
   1.5 schmal, weil kurze Zeilen enger stehen (G11). */
.goetheanum-accordion .acc .acc-inner{max-width:min(48ch,100%);line-height:1.6}
@media(max-width:560px){.goetheanum-accordion .acc .acc-inner{line-height:1.5}}
.goetheanum-accordion .acc .acc-inner p{margin:0 0 .75em}
.goetheanum-accordion .acc .acc-inner p:last-child{margin-bottom:0}
/* ‹Link kopieren› – die Adresse dieser einen Antwort. Leise am Fuss, damit sie
   den Lesefluss nicht unterbricht; erscheint nur mit der geöffneten Antwort. */
.goetheanum-accordion .acc .teilen{margin-top:var(--s4);color:var(--ak-ink);border-color:transparent;
  padding-inline:0;font-size:var(--t-small)}
.goetheanum-accordion .acc .teilen:hover{border-color:transparent;text-decoration:underline;text-underline-offset:.2em}
/* Schmal: Karten nutzen fast das ganze Blatt (12 px Rand statt 22). */
@media(max-width:560px){.goetheanum-accordion.bluete,.goetheanum-accordion.kapsel{margin-inline:-10px}}

/* --- Kleid 1 · Blüte: runde Karten; die offene blüht auf ---------------------- */
.goetheanum-accordion.bluete .acc{background:var(--paper);border:1px solid var(--line-soft);border-radius:var(--r-card);
  transition:border-color var(--acc-dauer),box-shadow var(--acc-dauer)}
.goetheanum-accordion.bluete .acc+.acc{margin-top:var(--s3)}
.goetheanum-accordion.bluete .acc:hover{border-color:var(--ak)}
.goetheanum-accordion.bluete .acc:is(.is-open, :not([data-acc-ready])[open]){border-color:var(--ak);box-shadow:var(--shadow-card)}
/* Die Zahl folgt dem Rahmen: mit ihm grau, mit ihm farbig – aber in der TINTE
   (--ak-ink, ≥4.5:1 auf Papier), nicht in der Basisfarbe: die trägt als Linie,
   nicht als Schrift (B02). Ein Merkmal wechselt, die Farbe (G01). */
.goetheanum-accordion.bluete .acc:hover .nr,.goetheanum-accordion.bluete .acc:is(.is-open, :not([data-acc-ready])[open]) .nr{color:var(--ak-ink)}
/* Nummer als eigene Zeile über der Frage (wie im Faden): Frage und Antwort laufen
   bündig, die Zahl bleibt leise. Zeilenabstand nach der Zahl aus --s2, damit sie
   atmet und nicht am Fragentext klebt. */
.goetheanum-accordion.bluete summary{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"nr knopf" "frage knopf";
  column-gap:var(--s4);row-gap:var(--s2);align-items:center;padding:var(--s4) var(--s4) var(--s4) var(--s6)}
.goetheanum-accordion.bluete .nr{grid-area:nr}
.goetheanum-accordion.bluete summary:not(:has(.nr)){grid-template-areas:"frage knopf"}
.goetheanum-accordion.bluete .frage{grid-area:frage}
.goetheanum-accordion.bluete .knopf{grid-area:knopf}
.goetheanum-accordion.bluete .knopf{width:40px;height:40px;border:1px solid var(--line);background:var(--paper)}
.goetheanum-accordion.bluete .acc:hover .knopf{border-color:var(--ak)}
.goetheanum-accordion.bluete .acc:is(.is-open, :not([data-acc-ready])[open]) .knopf{background:var(--ak-dunkel);border-color:var(--ak-dunkel);color:var(--on-accent);transform:rotate(180deg)}
.goetheanum-accordion.bluete .acc-inner{position:relative;margin:0 var(--s4) 0 var(--s6);padding:var(--s5) 0 var(--s6);
  border-top:1px solid var(--line-soft)}
.goetheanum-accordion.bluete .acc-inner::before{content:"";position:absolute;top:-6px;right:15px;width:10px;height:10px;
  background:var(--paper);border-left:1px solid var(--line-soft);border-top:1px solid var(--line-soft);transform:rotate(45deg)}
@media(max-width:560px){
  .goetheanum-accordion.bluete summary{column-gap:var(--s3);padding:var(--s5) var(--s4)}
  .goetheanum-accordion.bluete .knopf{width:32px;height:32px}
  .goetheanum-accordion.bluete .acc-inner{margin:0 var(--s4);padding:var(--s5) 0 var(--s6)}
  .goetheanum-accordion.bluete .acc-inner::before{right:11px}
}

/* --- Kleid 2 · Faden: ein durchgehender Faden links an der ganzen Liste ------- */
/* Die Nummer steht als eigene Zeile über der Frage (leise, in der Sektionstinte);
   Frage und Antwort laufen bündig in derselben Einrückung – keine Spalte, keine
   Kluft zwischen Zahl und Text. */
.goetheanum-accordion.faden{border-left:2px solid var(--line)}
.goetheanum-accordion.faden .acc-kopf{padding-left:var(--s4);margin-bottom:0}
.goetheanum-accordion.faden .acc{border-top:1px solid var(--line-soft);transition:box-shadow var(--acc-dauer)}
.goetheanum-accordion.faden .acc:last-child{border-bottom:1px solid var(--line-soft)}
.goetheanum-accordion.faden .acc:is(.is-open, :not([data-acc-ready])[open]){box-shadow:-2px 0 0 var(--ak)}   /* das gefärbte Stück des Fadens */
.goetheanum-accordion.faden summary{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"nr knopf" "frage knopf";
  column-gap:var(--s4);row-gap:var(--s2);align-items:center;padding:var(--s4) 0 var(--s4) var(--s4);min-height:var(--tap)}
.goetheanum-accordion.faden .nr{grid-area:nr;color:var(--ak-ink)}
.goetheanum-accordion.faden summary:not(:has(.nr)){grid-template-areas:"frage knopf"}
.goetheanum-accordion.faden .frage{grid-area:frage;transition:color var(--acc-dauer)}
/* Hover: ein Hauch Fläche zeigt, dass die ganze Zeile das Ziel ist – nicht nur
   der Winkel. Sehr zurückhaltend (7 % Ton auf Papier), Fokus bleibt der Ring. */
.goetheanum-accordion.faden summary:hover{background:color-mix(in srgb,var(--ak) 7%,var(--paper))}
.goetheanum-accordion.faden summary:hover .frage,.goetheanum-accordion.faden .acc:is(.is-open, :not([data-acc-ready])[open]) .frage{color:var(--ak-ink)}
.goetheanum-accordion.faden .knopf{grid-area:knopf;color:var(--muted)}
.goetheanum-accordion.faden summary:hover .knopf,.goetheanum-accordion.faden .acc:is(.is-open, :not([data-acc-ready])[open]) .knopf{color:var(--ak-ink)}
.goetheanum-accordion.faden .acc:is(.is-open, :not([data-acc-ready])[open]) .knopf{transform:rotate(180deg)}
.goetheanum-accordion.faden .acc-inner{margin:var(--s6) 0 var(--s6) var(--s4)}
@media(max-width:560px){
  .goetheanum-accordion.faden summary{padding-left:var(--s3)}
  .goetheanum-accordion.faden .acc-kopf{padding-left:var(--s3)}
  .goetheanum-accordion.faden .acc-inner{margin-left:var(--s3);padding-right:var(--s2)}
}

/* --- Kleid 3 · Kapsel: ruhige Felder auf dem Farbhauch; die offene trägt ein Band
   -----------------------------------------------------------------------------
   Radius bewusst DEZENT (--r-card, 14 px): die frühere Kapselform lief auf halbe
   Zeilenhöhe und drückte den Text in die Mitte – runde Ecken fressen Satzspiegel.
   Nach dem Vorbild der Blüte wird die Fläche unter dem Text LEICHTER, statt zu
   verschwinden: geschlossen liegt die Kapsel auf dem vollen Farbhauch, offen
   wird die Frage zum Band (oben gerundet, unten bündig) und die Antwort steht
   auf einem halben Hauch – eine gefüllte Fläche wiegt schwerer als eine
   umrissene, und Mengentext braucht den ruhigeren Grund. Einzug wie in der
   Blüte (--s6), Frage und Antwort auf derselben Kante. */
.goetheanum-accordion.kapsel{display:grid;gap:var(--s4)}
.goetheanum-accordion.kapsel .acc{background:var(--ak-hell);border-radius:var(--r-card);overflow:hidden;
  transition:background var(--acc-dauer)}
/* Offen liegt der Text auf einem HAUCH – nicht auf Papier und nicht auf der
   vollen Fläche: 55 % des ohnehin sehr leisen --ton-hell über Papier. Genug,
   dass die Antwort als eigenes Feld liest, wenig genug, dass der Satz nicht
   trägt, was er nicht muss. Geschlossen bleibt die volle Fläche – so ist der
   offene Grund immer der ruhigere von beiden. */
.goetheanum-accordion.kapsel .acc:is(.is-open, :not([data-acc-ready])[open]){background:color-mix(in srgb,var(--ak-hell) 55%,var(--paper));
  box-shadow:inset 0 0 0 1px var(--line-soft)}
.goetheanum-accordion.kapsel summary{display:flex;align-items:center;gap:var(--s4);padding:var(--s4) var(--s5) var(--s4) var(--s6);
  border-radius:var(--r-card);transition:background var(--acc-dauer),color var(--acc-dauer)}
.goetheanum-accordion.kapsel summary:hover{background:color-mix(in srgb,var(--ak) 10%,var(--ak-hell))}
.goetheanum-accordion.kapsel .acc:is(.is-open, :not([data-acc-ready])[open]) summary{background:var(--ak-dunkel);color:var(--on-accent);
  border-end-start-radius:0;border-end-end-radius:0}
.goetheanum-accordion.kapsel .nr{flex:0 0 auto;display:grid;place-items:center;width:2.2em;height:2.2em;border-radius:var(--r-pill);
  background:var(--paper);color:var(--ak-ink);font-weight:var(--w-deutlich);
  transition:background var(--acc-dauer),color var(--acc-dauer)}
/* 8% ist der am Goetheanum-Schnitt vermessene optische Sitz der Ziffer im Kreis
   (base.css .step-num) – reine Zentrierung setzt die Tinte zu hoch. */
.goetheanum-accordion.kapsel .nr>span{display:block;line-height:1;transform:translateY(8%)}
.goetheanum-accordion.kapsel .frage{flex:1 1 auto}
.goetheanum-accordion.kapsel .knopf{color:var(--ak-ink)}
.goetheanum-accordion.kapsel .acc:is(.is-open, :not([data-acc-ready])[open]) .knopf{color:var(--on-accent);transform:rotate(180deg)}
.goetheanum-accordion.kapsel .acc-inner{padding:var(--s5) var(--s5) var(--s6) var(--s6)}
@media(max-width:560px){
  .goetheanum-accordion.kapsel summary{gap:var(--s3);padding:var(--s4)}
  .goetheanum-accordion.kapsel .acc-inner{padding:var(--s5) var(--s4) var(--s6)}
}

@media print{
  .goetheanum-accordion .acc-kopf .alle{display:none}
  .goetheanum-accordion .acc .acc-body{overflow:visible}
}

/* Editorial layout applies to the whole module, independently of its skin.
   Keep every width inside its column, including the mobile card variants. */
.goetheanum-accordion.acc-liste{width:100%;max-width:min(100%,var(--accordion-width,780px))}
.goetheanum-accordion.accordion-width-narrow{--accordion-width:560px}
.goetheanum-accordion.accordion-width-standard{--accordion-width:780px}
.goetheanum-accordion.accordion-width-wide{--accordion-width:1040px}
.goetheanum-accordion.accordion-width-full{--accordion-width:100%}
.goetheanum-accordion.accordion-align-left{margin-inline:0 auto}
.goetheanum-accordion.accordion-align-center{margin-inline:auto}
.goetheanum-accordion.accordion-align-right{margin-inline:auto 0}