/* ─────────────────────────────────────────────────────────────────────────
   Haus Kulturimpuls · Webauftritt
   Setzt System B voraus: tokens.css (Grade, Raum, Mass) und base.css
   (.seite, .seite-rand, .block, .haupt, .apparat, .balken, .nur-hoerbar).
   Hier steht nur, was diese eine Seite braucht — nichts, was ins System
   gehört. Was sich hier zweimal bewährt, wandert nach base.css.

   Drei Schriftrollen: --schrift (Text), --schrift-titel (h1, h2) und
   --schrift-amt (was informiert: Konto, Adresse, Randspalte, Fuss). Seit
   dem 18. 10. 2026 gibt es keine Schriftsets mehr (Inclusive Sans für
   alles, haus-sks.css); Titel und Amt fallen auf --schrift zurück, die
   Rollen bleiben als Reserve.
   ───────────────────────────────────────────────────────────────────────── */

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--schrift);
  font-weight:var(--w-ruhig);
  /* Über dem Grund des Systems: Die Seite hat kein Bild, die Schrift ist
     das Bild (Entscheid des Inhabers, 15. 10. 2026: ‹Text deutlich
     grösser›). Am 16. 10. 2026 wieder zurückgenommen — am Schreibtisch
     ‹insgesamt doch zu gross› (vorher 20 bis 28 px). Jetzt 18 px auf dem
     Telefon, 21 px auf dem grossen Schirm; alles Weitere der Seite steht
     in em und wächst mit. */
  font-size:clamp(1.125rem, 1rem + 0.35vw, 1.3125rem);
  line-height:var(--zeile);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-variant-numeric:oldstyle-nums;   /* Jahreszahlen im Satz, nicht im Kasten */
}

/* Das Band ist die einzige Stelle, an der der Akzent in voller Stärke steht. */
.balken{background:var(--accent)}

/* Das Mass bleibt 52 Zeichen — aber die Zeichen dieser Seite, nicht die
   des Systems: --measure ist in tokens.css an der Wurzel gerechnet (ch der
   Grundschrift 16 px, also rund 430 px) und bliebe sonst stehen, während
   der Text wächst; bei 28 px trüge die Spalte dann 30 Zeichen. Hier neu
   bewertet, wo die Schrift grösser ist — derselbe Ausdruck, dieselben 52
   Zeichen, K10 misst sie weiter. Kein Fork: Das Haus (haus-sks.css) fasst
   --measure nicht an, die Seite bewertet es an ihrer eigenen Grundschrift. */
.seite{padding-block:var(--r16) var(--r16); --measure:min(52ch, 100%)}

/* ── Kopf ─────────────────────────────────────────────────────────────────
   Der Titel hebt allein über die Grösse ab, nicht über das Gewicht —
   dasselbe Ruhig wie der Fliesstext (System B R07). */
h1{
  font-family:var(--schrift-titel, var(--schrift));
  font-size:calc(clamp(1.9rem, 1.4rem + 2.2vw, 3rem) * var(--titel-faktor, 1));
  font-weight:var(--w-ruhig);
  line-height:1.08;
  letter-spacing:-0.012em;
  margin:0;
  text-wrap:balance;
}
.kopf{margin-bottom:var(--r16)}
/* Die Wortmarke: seit dem 15. 10. 2026 auf drei Zeilen (Stiftung /
   Kulturimpuls / Schweiz) — ‹Die Schrift ist das Bild› (Entscheid des
   Inhabers). Bis zum 16. 10. 2026 so gross, wie die Seite breit war (bis
   136 px), dann ‹zu gross› am Schreibtisch: jetzt höchstens 88 px, auf dem
   Telefon 40 px. Der Kopf verlässt das zweispaltige Raster. Der
   Titelfaktor eines Sets hebt den Kopf nicht weiter an. */
.kopf.block{display:block}
/* Die Sprachwahl (seit 16. 10. 2026): fest oben rechts, gezeichnet wie die
   Leisten unten links — ein Knopf auf hellem Grund, in jedem Farbklima
   lesbar. Ein Verweis, kein Schalter: Er führt auf die andere Seite. */
.sprachwahl{position:fixed; z-index:75;
            top:calc(var(--r3) + env(safe-area-inset-top));
            right:calc(var(--r3) + env(safe-area-inset-right))}
.sprachwahl a{display:inline-flex; align-items:center;
              min-height:var(--ziel-min); padding:0 var(--r3);
              background:var(--paper-hoch); color:var(--ink);
              border:var(--linie) solid var(--rule); border-radius:var(--radius);
              box-shadow:0 1px 6px rgb(0 0 0 / 0.10);
              font-family:var(--schrift); font-size:var(--grad-grund);
              text-decoration:none}
.sprachwahl a:hover{background:var(--rule-soft)}
.sprachwahl a:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.kopf .apparat{margin-top:var(--r6)}
.kopf h1{font-size:clamp(2.5rem, 1rem + 5vw, 5.5rem); line-height:1.04; letter-spacing:-0.015em}

h2{
  font-family:var(--schrift-titel, var(--schrift));
  font-size:calc(1em * var(--titel-faktor, 1));   /* mit dem Text, nicht mit der Wurzel */
  font-weight:var(--w-deutlich);
  line-height:var(--zeile-eng);
  margin:0 0 var(--r3);
}

/* ── Satz ─────────────────────────────────────────────────────────────────
   Der erste Titel (seit 17. 10. 2026) steht im Grad der übrigen Titel
   (‹Spenden›, ‹Stiftungsrat›), die Geschichte darunter als Fliesstext —
   Wunsch des Inhabers, nachdem beide zuerst grösser gesetzt waren. Der
   Eingang (.lede, eine Stufe grösser) ist damit entfallen. */
.auftakt{text-wrap:balance; max-width:var(--measure)}   /* ein Satz, darum das Mass des Fliesstexts (K10) */

p{margin:0 0 var(--r4)}
p:last-child{margin-bottom:0}

/* Die Felder, die der Stiftungsrat selbst ändert (www/seite-inhalt.mjs),
   stehen in einem Rahmen, der im Satz nicht vorkommt: display:contents.
   Nur der Spendentext läuft danach weiter ins Konto, sein letzter Absatz
   behält darum den Abstand. */
.text-feld{display:contents}
[data-feld="spenden"] > p:last-child{margin-bottom:var(--r4)}

section.block{
  padding-block:var(--r8);
  border-top:var(--linie, 1px) solid var(--rule-soft);
}
section.block:first-of-type{border-top:0; padding-top:0}

/* ── Stiftungsrat ─────────────────────────────────────────────────────────
   Name und Amt auf einer Zeile, das Amt eine Stufe leiser. Zwei Merkmale
   trennen sie — Farbe und Grösse — aber sie stehen an verschiedenen
   Elementen, nicht übereinander am selben. Die Spaltenlücke ist so breit,
   dass der längste Name (‹Katharina Serafimova›) nicht ins Amt läuft
   (Befund des Inhabers, 16. 10. 2026). */
.rat{margin:0; display:grid; gap:var(--r2) var(--r8);
     grid-template-columns:max-content 1fr; align-items:baseline}
.rat dt{font-weight:var(--w-klar)}
.rat dd{margin:0; color:var(--ink-soft); font-size:0.9em}
/* Sehr schmal (unter 23 rem, etwa 320 px) passen Name und Amt nicht mehr
   nebeneinander, und die ungebrochene IBAN ist breiter als die Spalte: Die
   Liste lief 37 px, das Konto 8 px über den Rand, und die Seite liess sich
   seitlich schieben (gemessen 17. 10. 2026). Dort steht das Amt unter dem
   Namen, und die Nummern stehen eine Spur kleiner — sie zerfallen nicht. */
@media (max-width:23rem){
  .rat{grid-template-columns:1fr; row-gap:0}
  .rat dd{margin-bottom:var(--r3)}
  .konto-zahlen dd{font-size:0.92em}
}

/* ── Spenden ──────────────────────────────────────────────────────────────
   Das Zahlwerk bekommt Tabellenziffern. Der Kontoblock darf nicht
   umbrechen, wo eine Nummer zerfällt. */
.konto{font-style:normal; margin:var(--r6) 0 var(--r4);
       font-family:var(--schrift-amt, var(--schrift));
       display:flex; flex-direction:column}
.konto .zeile{display:block}

.konto-zahlen{
  margin:0;
  display:grid; gap:var(--r1) var(--r4);
  grid-template-columns:max-content 1fr; align-items:baseline;
  font-family:var(--schrift-amt, var(--schrift));
  font-variant-numeric:tabular-nums lining-nums;
}
/* Kein text-transform, keine Sperrung: PC, IBAN und SWIFT stehen schon als
   Abkürzung in der Auszeichnung. Versalien und Sperren zur Betonung verbietet
   System B (DS05/K8) — und das Haus selbst, das Betonung allein dem Gewicht
   überlässt (CLAUDE.md, Einfachauszeichnung). */
.konto-zahlen dt{color:var(--ink-soft); font-size:0.8em}
.konto-zahlen dd{margin:0; white-space:nowrap}

/* Der QR-Code zum Spenden (Wunsch des Inhabers, 16. 10. 2026) steht neben
   dem Konto — und nur am grossen Schirm: Auf dem Telefon liest niemand den
   eigenen Bildschirm ein. Schwarz auf Weiss mit Ruhezone (im SVG selbst),
   wie die SIX es verlangt; die Unterschrift trägt die Grösse des Apparats. */
.konto-feld{display:flex; flex-wrap:wrap; align-items:flex-end; gap:var(--r6) var(--r12)}
.spenden-qr{display:none; margin:0}
.spenden-qr img{display:block; width:11rem; height:auto}
.spenden-qr figcaption{margin-top:var(--r2); font-family:var(--schrift-amt, var(--schrift));
                       font-size:0.7em; color:var(--ink-soft)}
@media (min-width:60rem){ .spenden-qr{display:block} }

/* Der einzige Verweis, der allein in seiner Zeile steht — und damit das
   einzige Fingerziel der Seite. Gemessen wurde er bei 390 px auf 257 × 22 px:
   zwei Pixel unter dem Mindestmass der WCAG 2.2 (2.5.8, 24 × 24). Die Ausnahme
   für Verweise ‹im Satz› greift hier nicht, weil er in keinem Satz steht. Also
   ein Polster statt eines grösseren Grades — die Zeile soll nicht lauter
   werden, nur besser zu treffen sein. */
/* Der Hinweis unter der Adresse (seit 25. 10. 2026 dort, in Klammern; bis
   dahin davor) soll niemand übersehen, der schreiben will. Er hebt sich
   allein über das Gewicht ab (R04: ein Merkmal). Nicht
   ‹.hinweis›: Den Namen führt base.css schon, klein und blass. */
.keine-gesuche{font-weight:var(--w-deutlich)}

.kontakt{font-size:1.15em}
.kontakt a{display:inline-block; padding-block:3px}

/* ── Verweise ─────────────────────────────────────────────────────────────
   Farbe allein darf keine Auskunft sein (WCAG 1.4.1) — deshalb bleibt der
   Unterstrich. Ein Akzent, nicht zwei: kein eigener Ton für Besuchtes. */
a{color:var(--accent);
  text-decoration-line:underline;
  text-decoration-thickness:.06em;
  text-underline-offset:.18em;
  text-decoration-color:color-mix(in srgb, var(--accent) 42%, transparent)}
a:hover,a:focus-visible{text-decoration-color:var(--accent)}
a:focus-visible{outline:2px solid var(--accent); outline-offset:3px;
                border-radius:2px}

/* Die Randspalte und der Fuss nehmen ihren Grad aus base.css in rem — hier
   in em, damit sie mit dem Text wachsen und nicht auf 14 px stehen bleiben,
   während der Satz 21 px trägt. Seit dem 16. 10. 2026 eine Stufe kleiner
   (‹Anmerkung kleiner›): 0,7 em sind auf dem Telefon 12,6 px, über dem
   Mindestgrad (K4, 12 px). */
.seite .apparat{font-size:0.7em}

/* ── Randspalte ───────────────────────────────────────────────────────────
   Der Apparat trägt, was daneben gehört: Herkunft, Rechtsstand, Datum.
   Das Laute (--schrift-laut) erscheint hier und nur hier — kursiv, klein,
   als Gewürz; seit dem 18. 10. 2026 die Inclusive selbst, nicht mehr die Mono. */
.apparat{color:var(--ink-soft); font-family:var(--schrift-amt, var(--schrift))}
.apparat.stand{font-family:var(--schrift-laut); font-style:italic;
               font-size:0.7em; color:var(--ink-faint)}

/* ── Fuss ─────────────────────────────────────────────────────────────────
   Pflichtangaben nach Art. 3 Abs. 1 lit. s UWG und Informationspflicht
   nach revDSG. Klein, aber nicht versteckt — und über dem Mass gehalten. */
.fuss{margin-top:var(--r16); padding-top:var(--r8);
      border-top:var(--linie, 1px) solid var(--rule)}
.fein{font-family:var(--schrift-amt, var(--schrift));
      font-size:0.78em; line-height:1.5; color:var(--ink-soft);
      margin-bottom:var(--r2)}
/* Der Fuss bricht ausgeglichen und nur zwischen Einheiten: Name, Adresse,
   UID und Aufsicht halten mit .ganz oder geschützten Leerzeichen zusammen
   (Wunsch des Inhabers, 25. 10. 2026: ‹Umbrüche im Footer schöner machen›). */
.fuss .fein{text-wrap:balance}

/* ── Druck ────────────────────────────────────────────────────────────────
   Vier Griffe: Format setzen, Bildschirmregeln kapseln, feste Masse
   statt vw, Umbrüche sichern (System B R27). */
@page{size:A4; margin:20mm 22mm 18mm}
@media print{
  body{background:#fff; color:var(--print-tinte); font-size:10pt; line-height:14pt}
  .balken{display:none}
  .sprachwahl{display:none}
  .seite{max-width:none; padding:0}
  .block{display:block}
  .apparat{margin-top:4pt; font-size:8pt}
  h1{font-size:22pt}
  a{color:var(--print-tinte); text-decoration:none}
  section.block{break-inside:avoid; padding-block:10pt}
  .spenden-qr{display:block}   /* auf Papier liest man ihn ein */
  .spenden-qr img{width:30mm}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;
    animation-iteration-count:1 !important; transition-duration:.01ms !important}
}

/* ── Einladungen (Newsletter) ─────────────────────────────────────────────
   Ein Feld, ein Knopf, eine Zeile Hinweis. Das Honigfeld bleibt für
   Menschen unsichtbar und für Hilfstechnik verborgen. */
.einladung{margin-top:var(--r4); max-width:32rem}
.einladung > label{display:block; margin-bottom:var(--r2); font-size:var(--grad-fein); color:var(--ink-soft)}
.einladung-zeile{display:flex; flex-wrap:wrap; gap:var(--r2)}
.einladung-zeile input{flex:1 1 14rem; min-width:0; padding:var(--r2) var(--r3);
  border:var(--linie) solid var(--rule); border-radius:var(--radius-s);
  font:inherit; background:var(--paper-hoch); color:var(--ink)}
.einladung-zeile input:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
.einladung-zeile .knopf{min-height:44px}
.einladung .apparat{margin-top:var(--r3)}
.einladung-antwort{margin-top:var(--r3); font-weight:var(--w-deutlich)}
.einladung-antwort:empty{display:none}
.honig{position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden}