/* 1888a · Die Karte einer Spielweise: eine Gestalt für Startseite und Foyer (HTML aus shared/spielweisen/karte.js, Entwurf 1888E, Fassung A).
   Beide Seiten laden genau diese Datei. Was je Seite anders ist, steht dort als Variable am Abschnitt (Schriften, Farben, Grundgröße);
   alle Maße der Karte hängen an der Grundgröße (em), darum ist die Karte im Foyer dieselbe, nur kleiner.
     --spw-basis   Grundgröße (Satz)          --spw-serif / --spw-sans   Schriften      --spw-tinte / --spw-leise / --spw-akzent   Farben
     --spw-papier  Fläche der Karte           --spw-rand / --spw-linie   Rand, Trennlinie --spw-haken   Farbe der Haken
     --spw-film-max  höchste Höhe des Films (Foyer: damit „Weiter“ im Bild bleibt)
   Satz, Zeichen und Zeile stehen über die Karten hinweg auf einer Linie (Unterraster); ohne Unterraster stehen die Teile untereinander.
   Schmal (der Abschnitt unter 700 px): die Karten untereinander, die drei Zeichen in einer Zeile. */
.spw-buehne{container-type:inline-size;--spw-basis:15px;--spw-serif:Georgia,serif;--spw-sans:system-ui,-apple-system,sans-serif;--spw-tinte:#2c4a41;--spw-leise:#55655c;--spw-akzent:#7d6248;--spw-papier:#fffaf1;--spw-rand:#efe5d6;--spw-linie:#2c4a411f;--spw-haken:#476952;--spw-film-max:none}
.spw-buehne .spw-raster{display:grid;grid-template-columns:repeat(var(--spw-n,3),minmax(0,1fr));column-gap:1.6em;row-gap:1.1em;font-size:var(--spw-basis);align-items:stretch}
.spw-buehne .spw-karte{display:flex;flex-direction:column;align-items:stretch;min-width:0;margin:0;padding:.7em .7em 1.25em;border:1px solid var(--spw-rand);border-radius:1.6em;background:var(--spw-papier);box-shadow:0 1.4em 2.9em -2.1em #1c3a3266;color:var(--spw-tinte);font:400 1em/1.5 var(--spw-sans);text-align:left}
.spw-buehne .spw-karte>*{display:block;margin:0 calc(var(--spw-basis) * .8)}
.spw-buehne .spw-karte>.spw-film{position:relative;margin:0;aspect-ratio:16/10;max-height:var(--spw-film-max);border-radius:1.05em;overflow:hidden;background:#c9d9d1;isolation:isolate;line-height:0}
.spw-buehne .spw-film>video{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.8s cubic-bezier(.3,.7,.2,1)}
.spw-buehne .spw-karte:hover .spw-film>video{transform:scale(1.025)}
.spw-buehne .spw-wer{margin-top:calc(var(--spw-basis) * .85);font:600 max(12px,.72em)/1.4 var(--spw-sans);letter-spacing:.09em;text-transform:uppercase;color:var(--spw-akzent);text-wrap:balance}
.spw-buehne .spw-name{margin-top:calc(var(--spw-basis) * .3);font:400 1.95em/1.12 var(--spw-serif);letter-spacing:-.005em;color:var(--spw-tinte);text-wrap:balance}
.spw-buehne .spw-satz{margin-top:calc(var(--spw-basis) * .6);font-size:1em;line-height:1.5;color:var(--spw-leise);text-wrap:pretty}
.spw-buehne .spw-drei{margin-top:calc(var(--spw-basis) * .95);padding:0;list-style:none;display:grid;gap:.4em;font-size:.97em;font-weight:500}
.spw-buehne .spw-drei>*{display:flex;align-items:center;gap:.6em;margin:0}
.spw-buehne .spw-drei>*::before{content:'';flex:none;width:.9em;height:.9em;background:var(--spw-haken);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.8 8.6l3.3 3.1 7.1-7.4' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.8 8.6l3.3 3.1 7.1-7.4' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.spw-buehne .spw-zeile{display:flex;flex-wrap:wrap;column-gap:1.6em;overflow:hidden;margin-top:calc(var(--spw-basis) * 1.05);padding-top:calc(var(--spw-basis) * .7);border-top:1px solid var(--spw-linie);font:600 max(12px,.79em)/1.5 var(--spw-sans);letter-spacing:.05em;color:var(--spw-tinte)}
/* ◀ 1917 · Bricht die Zeile um (die längere Zeile von „Inseln erobern“), beginnt die neue Zeile ohne Punkt: Der Punkt steht mitten in der Lücke zwischen zwei Teilen,
   am Anfang einer Zeile läge er links außerhalb und wird abgeschnitten (overflow). Abstand wie vorher (0,65em · Punkt · 0,65em). */
.spw-buehne .spw-zeile>span{position:relative}
.spw-buehne .spw-zeile>span+span::before{content:'·';position:absolute;left:-.8em;transform:translateX(-50%);color:#93a096}
.spw-buehne .spw-demo{display:grid;gap:.45em;margin-top:calc(var(--spw-basis) * .75);font-size:.85em;line-height:1.35;color:var(--spw-leise);align-self:start}
.spw-buehne .spw-demo:empty{margin-top:0}
.spw-buehne .spw-demo-teil{display:flex;align-items:center;flex-wrap:wrap;gap:.6em}
.spw-buehne .spw-pl{display:inline-flex;align-items:center;border-radius:999px;padding:.2em .85em;font:600 max(12px,.87em)/1.35 var(--spw-sans);letter-spacing:.02em;white-space:nowrap}
.spw-buehne .spw-pl.voll{background:#efe9f8;color:#6a55a0;box-shadow:inset 0 0 0 1px #ddd2f0}
/* Im Foyer ist die Karte ein Knopf: die Wahl. Gewählt = Salbei-Rand wie alle Karten des Foyers. */
.spw-buehne button.spw-karte{height:auto;min-height:0;cursor:pointer;transform:none;font-weight:400;transition:box-shadow .2s,border-color .2s}
.spw-buehne button.spw-karte:hover{border-color:#d9ccb3;background:var(--spw-papier)}
.spw-buehne button.spw-karte[aria-pressed="true"]{border-color:#63755a;box-shadow:0 0 0 2px #63755a}
.spw-buehne button.spw-karte:focus-visible{outline:3px solid #e48a71;outline-offset:3px}
@supports (grid-template-rows:subgrid){
 .spw-buehne .spw-raster{grid-template-rows:repeat(7,auto)}
 .spw-buehne .spw-karte{display:grid;grid-row:span 7;grid-template-rows:subgrid;row-gap:0}
}
@container (max-width:700px){
 .spw-buehne .spw-raster{grid-template-columns:minmax(0,1fr);grid-template-rows:none;row-gap:1em}
 .spw-buehne .spw-karte{display:flex;grid-row:auto;border-radius:1.4em;padding:.6em .6em 1.1em}
 .spw-buehne .spw-karte>*{margin-inline:calc(var(--spw-basis) * .6)}
 .spw-buehne .spw-karte>.spw-film{aspect-ratio:16/9;border-radius:.95em}
 .spw-buehne .spw-wer{margin-top:calc(var(--spw-basis) * .8)}
 .spw-buehne .spw-drei{display:flex;flex-wrap:wrap;gap:.3em 1.1em}
 .spw-buehne .spw-zeile{font-size:max(12px,.76em);letter-spacing:.03em;column-gap:1.1em}
 .spw-buehne .spw-zeile>span+span::before{left:-.55em}
}
@media (prefers-reduced-motion:reduce){.spw-film>video{transition:none}.spw-karte:hover .spw-film>video{transform:none}}