/* Schachnews auf schachcoach.com (seit 05.10.2026), Layout A „Titelseite".
   Die Grundwerte, Kopfleiste, Menü, Knöpfe und der Fuß sind aus der Startseite
   (entwuerfe/seite.html) übernommen, damit beide Teile gleich aussehen und die
   vier Farbwelten auch hier gelten. Wer dort etwas an diesen Teilen ändert,
   zieht es hier nach. */
:root{
  --nacht:#071226;--navy:#0C1F3D;--navy-2:#122A50;--navy-3:#1B3A6B;--gold:#C9A227;--gold-hell:#E8CF7A;
  --elfenbein:#F3EFE6;--nebel:#A3AEC3;
  --linie:rgb(var(--gold-rgb) / .22);--linie-leise:rgb(var(--hell-rgb) / .07);
  --feld-hell:#E6DCC4;--feld-dunkel:#2C4A7A;
  --display:'Gloock',Georgia,'Times New Roman',serif;
  --text:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Consolas,monospace;
  --kurve:cubic-bezier(.2,.7,.2,1);
  color-scheme:dark;
}
:root{--gold-rgb:201 162 39;--goldhell-rgb:232 207 122;--nacht-rgb:7 18 38;--navy2-rgb:18 42 80;--navy3-rgb:27 58 107;--hell-rgb:255 255 255;--fliess:#C9D1DF}
:root[data-farbe="holz"]{--nacht:#140E09;--navy:#21170F;--navy-2:#2C1F14;--navy-3:#4A3320;--gold:#D08A3C;--gold-hell:#EDB872;--elfenbein:#F4ECE1;
  --nebel:#B9A894;--fliess:#DCCFC0;--feld-hell:#E9D3B0;--feld-dunkel:#8B5A33;
  --gold-rgb:208 138 60;--goldhell-rgb:237 184 114;--nacht-rgb:20 14 9;--navy2-rgb:44 31 20;--navy3-rgb:74 51 32}
:root[data-farbe="gruen"]{--nacht:#08160F;--navy:#0E2419;--navy-2:#143223;--navy-3:#1E4A33;--gold:#C9A227;--gold-hell:#E8CF7A;--elfenbein:#EEF2EA;
  --nebel:#9FB3A6;--fliess:#C8D5CB;--feld-hell:#E6E2C8;--feld-dunkel:#2F6B4A;
  --nacht-rgb:8 22 15;--navy2-rgb:20 50 35;--navy3-rgb:30 74 51}
:root[data-farbe="papier"]{--nacht:#F6F2EA;--navy:#EDE6D8;--navy-2:#E4DBC9;--navy-3:#D8CBB2;--gold:#8C2F39;--gold-hell:#A8434E;--elfenbein:#1B2333;
  --nebel:#5E6676;--fliess:#333B4A;--feld-hell:#F0E6D2;--feld-dunkel:#9A7553;
  --gold-rgb:140 47 57;--goldhell-rgb:168 67 78;--nacht-rgb:246 242 234;--navy2-rgb:228 219 201;--navy3-rgb:216 203 178;--hell-rgb:20 25 40;color-scheme:light}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--nacht)}
body{margin:0;background:var(--nacht);color:var(--elfenbein);font-family:var(--text);font-weight:300;
  font-size:18px;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:200;opacity:.06;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
a{color:inherit}
img{display:block;max-width:100%}
h1,h2,h3,h4{font-family:var(--display);font-weight:400;line-height:1.1;margin:0;text-wrap:balance}
p,ul,figure,blockquote{margin:0;padding:0}
ul{list-style:none}
.wrap{max-width:1240px;margin:0 auto;padding:0 32px}
@media(max-width:820px){.wrap{padding:0 20px}}
:focus-visible{outline:2px solid var(--gold-hell);outline-offset:3px;border-radius:4px}

/* ---------- Knöpfe, Kopf, Menü, Farbwahl, Fuß: wie auf der Startseite ---------- */
.knopf{position:relative;display:inline-flex;align-items:center;gap:12px;padding:17px 30px;border-radius:999px;text-decoration:none;
  font-weight:500;font-size:16px;letter-spacing:.01em;overflow:hidden;transition:transform .3s var(--kurve),background .3s,border-color .3s,color .3s;
  border:0;cursor:pointer;font-family:var(--text)}
.knopf.gold{background:var(--gold);color:var(--nacht)}
.knopf.gold::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgb(var(--hell-rgb) / .55) 50%,transparent 70%);
  transform:translateX(-120%);transition:transform .8s var(--kurve)}
.knopf.gold:hover::after{transform:translateX(120%)}
.knopf.gold:hover{transform:translateY(-2px);background:var(--gold-hell)}
.knopf .pfeil{transition:transform .3s var(--kurve)}
.knopf:hover .pfeil{transform:translateX(4px)}
header{position:fixed;top:0;left:0;right:0;z-index:50;transition:background .4s,border-color .4s,backdrop-filter .4s;border-bottom:1px solid transparent}
header.fest{background:rgb(var(--nacht-rgb) / .78);backdrop-filter:blur(16px) saturate(1.2);border-color:var(--linie-leise)}
.kopf{display:flex;align-items:center;justify-content:space-between;height:84px}
.marke{display:flex;align-items:center;gap:12px;text-decoration:none}
.marke img{height:40px;width:auto}
.marke span{font-family:var(--display);font-size:27px}
.marke b{font-weight:400;color:var(--gold)}
nav{display:flex;gap:4px}
nav a{text-decoration:none;font-size:15px;color:var(--nebel);padding:9px 14px;border-radius:999px;transition:color .25s,background .25s}
nav a:hover{color:var(--elfenbein);background:rgb(var(--hell-rgb) / .05)}
nav a.frei{color:var(--gold-hell)}
nav a.hier{color:var(--elfenbein);background:rgb(var(--gold-rgb) / .14)}
.kopf .knopf{padding:12px 22px;font-size:15px}
@media(max-width:1180px){nav{display:none}}
.menue-knopf{display:none;align-items:center;gap:10px;height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--linie);
  background:rgb(var(--hell-rgb) / .03);color:var(--elfenbein);font:500 15px var(--text);cursor:pointer}
.menue-knopf i{display:block;width:18px;height:2px;background:currentColor;box-shadow:0 -6px 0 currentColor,0 6px 0 currentColor;border-radius:2px}
.kopf-rechts{display:flex;align-items:center;gap:10px}
@media(max-width:1180px){.menue-knopf{display:inline-flex}}
@media(max-width:520px){.menue-knopf span{display:none}.menue-knopf{padding:0 13px}.kopf .knopf{display:none}}
.menue{position:fixed;inset:0;z-index:150;background:rgb(var(--nacht-rgb) / .97);backdrop-filter:blur(10px);display:flex;flex-direction:column;
  padding:24px 24px 40px;opacity:0;visibility:hidden;transition:opacity .3s var(--kurve),visibility 0s .3s}
.menue.offen{opacity:1;visibility:visible;transition:opacity .3s var(--kurve)}
.menue-kopf{display:flex;justify-content:space-between;align-items:center;height:60px}
.menue-zu{width:46px;height:46px;border-radius:50%;border:1px solid var(--linie);background:none;color:var(--elfenbein);font-size:22px;cursor:pointer}
.menue ul{margin:auto 0;display:flex;flex-direction:column;gap:6px}
.menue li a{display:flex;align-items:baseline;gap:16px;padding:10px 0;text-decoration:none;font-family:var(--display);font-size:clamp(28px,7.4vw,42px);
  color:var(--elfenbein);border-bottom:1px solid var(--linie-leise)}
.menue li a small{font-family:var(--mono);font-size:12px;color:var(--gold);letter-spacing:.1em}
.menue li a.frei{color:var(--gold-hell)}
.menue .knopf{align-self:flex-start;margin-top:28px}
.farbwahl{display:flex;gap:7px;align-items:center;padding:6px 10px;border-radius:999px;border:1px solid var(--linie-leise)}
.farbwahl button{width:20px;height:20px;border-radius:50%;padding:0;cursor:pointer;border:2px solid transparent;
  background:linear-gradient(135deg,var(--a) 0 50%,var(--b) 50% 100%);transition:transform .2s,border-color .2s}
.farbwahl button:hover{transform:scale(1.15)}
.farbwahl button[aria-pressed="true"]{border-color:var(--elfenbein)}
@media(max-width:1280px){.kopf .farbwahl{display:none}}
.menue .farbwahl{align-self:flex-start;margin-top:22px;padding:10px 14px}
.menue .farbwahl button{width:30px;height:30px}
footer{padding:50px 0;border-top:1px solid var(--linie-leise);color:var(--nebel);font-size:14px;margin-top:90px}
footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
footer a{text-decoration:none}
footer a:hover{color:var(--elfenbein)}

/* Schachnews: eigener Knopf neben dem Menü (eingesetzt von news\\news_bauen.py) */
.news-knopf{display:inline-flex;align-items:center;gap:9px;height:40px;padding:0 16px;border-radius:999px;text-decoration:none;
  font:500 14.5px var(--text);color:var(--gold-hell);border:1px solid rgb(var(--gold-rgb) / .55);background:rgb(var(--gold-rgb) / .08);
  transition:background .3s,border-color .3s,transform .3s var(--kurve);white-space:nowrap}
.news-knopf:hover{background:rgb(var(--gold-rgb) / .18);border-color:var(--gold);transform:translateY(-2px)}
.news-knopf i{width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 0 rgb(var(--gold-rgb) / .6);animation:news-puls 2.4s ease-out infinite}
.news-knopf.hier{background:rgb(var(--gold-rgb) / .2);border-color:var(--gold)}
.news-knopf.gross{align-self:flex-start;height:auto;max-width:100%;flex-wrap:wrap;row-gap:4px;white-space:normal;padding:14px 22px;font:400 clamp(24px,6.4vw,34px) var(--display);color:var(--elfenbein);margin:10px 0 4px}
.news-knopf.gross span{font:400 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-left:6px}
@keyframes news-puls{0%{box-shadow:0 0 0 0 rgb(var(--gold-rgb) / .6)}70%,100%{box-shadow:0 0 0 9px rgb(var(--gold-rgb) / 0)}}
@media(max-width:760px){.kopf .news-knopf{display:none}}
@media(prefers-reduced-motion:reduce){.news-knopf i{animation:none}}

/* ---------- Gemeinsames der Schachnews ---------- */
main{padding-top:84px}
.kicker{font-family:var(--mono);font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);font-weight:400}
.leise{color:var(--nebel);font-size:15px}
.weiter{font-weight:500;font-size:15px;color:var(--gold-hell);text-decoration:none}
.foto{object-fit:cover;object-position:50% 20%;border-radius:12px;border:1px solid var(--linie);background:var(--navy-2)}
.js .zeige{opacity:0;transform:translateY(22px);transition:opacity .8s var(--kurve),transform .8s var(--kurve)}
.js .zeige.da{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.js .zeige{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}

/* ---------- Einleitung „Vorhang auf" mit dem Namen „Matt am Montag" (05.10.2026) ----------
   Auf dem geschlossenen Vorhang steht ein König, der Name erscheint Wort für Wort, der König fällt
   um, dann fahren die beiden Hälften zur Seite. 3,8 Sekunden. Läuft nur, wenn der Kopf der Seite
   die Klasse gesetzt hat; ohne sie gibt es die Schicht nicht. Sie fängt keine Klicks, damit die
   Seite auch dann bedienbar ist, wenn das Skript danach ausfällt. Die Dauer steht auch in news.js. */
.einleitung-b{display:none}
html.einleitung .einleitung-b{display:block;position:fixed;inset:0;z-index:300;pointer-events:none;overflow:hidden;--k:clamp(84px,9vw,124px)}
.einleitung-b .vorhang{position:absolute;top:0;bottom:0;width:50%;background:linear-gradient(180deg,var(--navy),var(--nacht))}
.einleitung-b .vorhang.l{left:0;border-right:1px solid var(--linie);animation:vorhang-l 3.8s var(--kurve) both}
.einleitung-b .vorhang.r{right:0;animation:vorhang-r 3.8s var(--kurve) both}
.einleitung-b .ansage{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:0 16px;animation:ansage 3.8s var(--kurve) both}
.einleitung-b .koenig{display:block;width:var(--k);height:var(--k);margin:0 auto 18px;transform-origin:50% 100%;animation:koenig 3.8s cubic-bezier(.5,0,.3,1) both}
.einleitung-b .ansage span{display:block;font:400 13px var(--mono);letter-spacing:.3em;text-transform:uppercase;color:var(--gold);animation:wort .6s var(--kurve) .15s both}
.einleitung-b .ansage b{display:block;font:400 clamp(44px,9.4vw,124px)/1.02 var(--display);color:var(--elfenbein);letter-spacing:-.02em;margin:16px 0 14px}
.einleitung-b .ansage b i{display:inline-block;font-style:normal;animation:wort .6s var(--kurve) both}
.einleitung-b .ansage b i:nth-child(1){animation-delay:.45s}
.einleitung-b .ansage b i:nth-child(2){animation-delay:.7s}
.einleitung-b .ansage b i:nth-child(3){animation-delay:.95s}
.einleitung-b .ansage b em{font-style:normal;color:var(--gold)}
.einleitung-b .ansage small{display:block;font:300 clamp(15px,1.6vw,18px) var(--text);color:var(--fliess);animation:wort .6s var(--kurve) 1.9s both}
html.einleitung main{animation:naeher 1.2s var(--kurve) 2.7s both}
@keyframes vorhang-l{0%,72%{transform:none}100%{transform:translateX(-101%)}}
@keyframes vorhang-r{0%,72%{transform:none}100%{transform:translateX(101%)}}
@keyframes ansage{0%,70%{opacity:1;transform:none}84%,100%{opacity:0;transform:scale(1.05)}}
@keyframes wort{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes koenig{0%{opacity:0;transform:translateY(-14px)}10%,34%{opacity:1;transform:none}
  44%{transform:translate(calc(var(--k)/2),calc(var(--k)/-2)) rotate(-96deg)}
  49%{transform:translate(calc(var(--k)/2),calc(var(--k)/-2)) rotate(-84deg)}
  54%,100%{opacity:1;transform:translate(calc(var(--k)/2),calc(var(--k)/-2)) rotate(-90deg)}}
@keyframes naeher{from{transform:scale(1.035);opacity:.4}to{transform:none;opacity:1}}

/* ---------- Titelseite ---------- */
.buehne{padding:74px 0 40px;position:relative;
  background:radial-gradient(900px 420px at 82% 0%,rgb(var(--navy3-rgb) / .55),transparent 70%),
             radial-gradient(520px 300px at 88% 10%,rgb(var(--gold-rgb) / .10),transparent 65%)}
.t-kopf{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;flex-wrap:wrap}
.t-kopf h1{font-size:clamp(46px,6.2vw,84px);letter-spacing:-.015em;margin-top:14px}
.t-kopf h1 em{font-style:normal;color:var(--gold)}
.t-kopf .lead{color:var(--fliess);max-width:34em;margin-top:16px;font-size:19px}
.t-woche{display:flex;align-items:center;gap:12px;font:400 14px var(--mono);color:var(--nebel);letter-spacing:.04em}
.t-woche a,.t-woche span.aus{width:40px;height:40px;border-radius:50%;border:1px solid var(--linie);display:grid;place-items:center;
  color:var(--gold-hell);text-decoration:none;font-size:18px;transition:border-color .25s,transform .25s var(--kurve)}
.t-woche a:hover{border-color:var(--gold);transform:translateY(-2px)}
.t-woche span.aus{opacity:.28}
.reiter{display:flex;gap:6px;border-bottom:1px solid var(--linie-leise);margin:44px 0 34px}
.reiter button{font:400 clamp(20px,2.3vw,27px) var(--display);color:var(--nebel);background:none;border:0;border-bottom:3px solid transparent;
  padding:12px 20px 14px;cursor:pointer;transition:color .25s,border-color .25s}
.reiter button small{font:400 13px var(--mono);margin-left:9px;color:var(--nebel)}
.reiter button[aria-selected="true"]{color:var(--elfenbein);border-bottom-color:var(--gold)}
.reiter button:hover{color:var(--elfenbein)}
@media(max-width:520px){.reiter{margin:34px 0 26px}.reiter button{padding:10px 10px 12px;font-size:19px}.reiter button small{margin-left:6px;font-size:12px}}
.t-raster{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:44px;align-items:start}
@media(max-width:1080px){.t-raster{grid-template-columns:minmax(0,1fr)}}
/* Ohne Skript stehen beide Rubriken untereinander, mit Skript nur die gewählte */
.js .rubrik[hidden]{display:none}
.rubrik + .rubrik{margin-top:60px}
.js .rubrik + .rubrik{margin-top:0}
.rubrik > h2{font-size:34px;margin-bottom:22px}
.js .rubrik > h2{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
/* Themen je Rubrik: kleine Knöpfe unter den Reitern, wie im Programm. Ohne Skript gibt es sie nicht,
   dann stehen einfach alle Artikel da. */
.themen{display:none}
.js .themen{display:flex;flex-wrap:wrap;gap:8px;margin:-10px 0 28px}
.themen button{font:500 12.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--nebel);background:none;cursor:pointer;
  border:1px solid var(--linie-leise);border-radius:999px;padding:8px 14px;transition:color .2s,border-color .2s,background .2s}
.themen button small{font:400 11.5px var(--mono);margin-left:7px;opacity:.7}
.themen button:hover{color:var(--elfenbein);border-color:var(--linie)}
.themen button[aria-pressed="true"]{color:var(--gold-hell);border-color:var(--gold);background:rgb(var(--gold-rgb) / .14)}
.auf[hidden],.karte[hidden]{display:none}

.auf{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:34px;align-items:start;text-decoration:none;
  background:linear-gradient(140deg,var(--navy) 0%,rgb(var(--navy2-rgb) / .55) 100%);border:1px solid var(--linie);border-radius:22px;
  padding:38px 40px;margin-bottom:22px;position:relative;overflow:hidden;transition:transform .45s var(--kurve),border-color .3s,box-shadow .45s}
.auf::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(var(--gold),transparent)}
.auf:hover{transform:translateY(-4px);border-color:rgb(var(--gold-rgb) / .55);box-shadow:0 30px 60px -30px rgb(0 0 0 / .7)}
.auf .txt{display:flex;flex-direction:column;gap:16px;min-width:0}
.auf h2{font-size:clamp(30px,3.5vw,46px);line-height:1.1;overflow-wrap:break-word;hyphens:auto}
.auf p{color:var(--fliess);font-size:19px;line-height:1.6;max-width:36em}
.auf .bilder{display:grid;grid-template-columns:repeat(2,132px);gap:10px}
.auf .bilder .foto{width:132px;height:132px}
.auf .bilder.eins{grid-template-columns:200px}
.auf .bilder.eins .foto{width:200px;height:200px}
@media(max-width:820px){.auf{grid-template-columns:minmax(0,1fr);padding:28px 24px}.auf .bilder{grid-template-columns:repeat(4,minmax(0,1fr));order:-1}
  .auf .bilder .foto,.auf .bilder.eins .foto{width:100%;height:auto;aspect-ratio:1}.auf .bilder.eins{grid-template-columns:120px}}
.karten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media(max-width:900px){.karten{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.karten{grid-template-columns:minmax(0,1fr)}}
.karte{display:flex;flex-direction:column;gap:10px;min-width:0;padding:22px 24px 24px;border-radius:16px;border:1px solid var(--linie-leise);text-decoration:none;
  background:rgb(var(--navy2-rgb) / .28);transition:transform .4s var(--kurve),border-color .3s,background .3s}
.karte:hover{transform:translateY(-4px);border-color:var(--linie);background:rgb(var(--navy2-rgb) / .5)}
.karte h3{font-size:22px;line-height:1.2;overflow-wrap:break-word;hyphens:auto}
.karte p{font-size:15.5px;line-height:1.55;color:var(--nebel)}
.karte .kopfzeile{display:flex;justify-content:space-between;gap:12px;align-items:center}
.karte .kopfzeile .foto{width:46px;height:46px;border-radius:50%;flex:none}
.karte .kicker{font-size:11.5px;letter-spacing:.14em}
.t-rand{display:flex;flex-direction:column;gap:38px;border-left:1px solid var(--linie-leise);padding-left:34px;position:sticky;top:110px}
@media(max-width:1080px){.t-rand{border-left:0;padding-left:0;border-top:1px solid var(--linie-leise);padding-top:34px;position:static}}
.t-rand h4{margin-bottom:12px}
.t-rand q{display:block;quotes:none;font:400 25px/1.32 var(--display);color:var(--elfenbein);margin-bottom:10px}
.t-rand .naechstes{display:block;font:400 22px/1.25 var(--display);color:var(--elfenbein);text-decoration:none;margin-bottom:8px}
.t-rand .naechstes:hover{color:var(--gold-hell)}
.t-rand li{border-top:1px solid var(--linie-leise)}
.t-rand li:first-child{border-top:0}
.t-rand li a{display:flex;justify-content:space-between;gap:12px;padding:10px 0;text-decoration:none;font-size:15.5px;color:var(--fliess);transition:color .25s}
.t-rand li a:hover{color:var(--gold-hell)}
.t-rand li a span{color:var(--nebel);font:400 12.5px var(--mono);white-space:nowrap;padding-top:4px}
.t-rand li.video a{flex-direction:column;gap:2px}
.t-rand li.video a span{padding-top:0}
.hinweis{margin-top:70px;padding-top:26px;border-top:1px solid var(--linie-leise);color:var(--nebel);font-size:14px;line-height:1.65}
.hinweis h4{font:400 12.5px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.hinweis p + p{margin-top:8px}
.hinweis a{color:var(--fliess)}

/* ---------- Artikelseite ---------- */
.fortschritt{position:fixed;top:0;left:0;height:2px;width:0;background:var(--gold);z-index:60}
.a-buehne{padding:60px 0 0}
.pfad{font:400 13px var(--mono);color:var(--nebel);letter-spacing:.03em;margin-bottom:26px}
.pfad a{text-decoration:none}
.pfad a:hover{color:var(--elfenbein)}
.pfad b{color:var(--gold);font-weight:400}
.a-raster{display:grid;grid-template-columns:minmax(0,760px) 310px;gap:64px;justify-content:space-between;align-items:start}
@media(max-width:1080px){.a-raster{grid-template-columns:minmax(0,760px);justify-content:start}}
.a-text{display:flex;flex-direction:column;gap:20px;min-width:0;overflow-wrap:break-word}
.a-text h1{font-size:clamp(36px,4.8vw,62px);line-height:1.06;letter-spacing:-.01em;hyphens:auto}
.a-text .vorspann{font-weight:400;font-size:clamp(19px,2vw,23px);line-height:1.55;color:var(--elfenbein)}
.a-text .angaben{display:flex;gap:10px 18px;flex-wrap:wrap;padding:14px 0;border-top:1px solid var(--linie-leise);border-bottom:1px solid var(--linie-leise)}
.a-text p{color:var(--fliess);font-size:19px;line-height:1.75}
.a-text h2{font-size:clamp(25px,2.6vw,31px);line-height:1.18;margin-top:18px}
.zitat{display:grid;grid-template-columns:50px minmax(0,1fr);gap:0 8px;margin:12px 0}
.zitat::before{content:"„";font:400 96px/.5 var(--display);color:var(--gold);margin-top:-16px}
.zitat q{quotes:none;font:400 clamp(24px,2.6vw,30px)/1.32 var(--display);color:var(--elfenbein)}
.zitat small{grid-column:2;color:var(--nebel);font-size:14.5px;margin-top:8px}
.quellen{display:flex;gap:8px 16px;flex-wrap:wrap;padding-top:18px;margin-top:10px;border-top:1px solid var(--linie-leise);font-size:15px;color:var(--nebel)}
.quellen a{color:var(--gold-hell);text-decoration:none}
.quellen a:hover{text-decoration:underline}
.a-rand{display:flex;flex-direction:column;gap:34px;border-left:1px solid var(--linie-leise);padding-left:30px;margin-top:8px}
@media(max-width:1080px){.a-rand{border-left:0;padding-left:0;border-top:1px solid var(--linie-leise);padding-top:30px;max-width:760px}}
.a-rand h4{margin-bottom:10px}
.fotos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px}
@media(max-width:1080px){.fotos{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:560px){.fotos{grid-template-columns:repeat(2,minmax(0,1fr))}}
.fotos .foto{width:100%;height:auto;aspect-ratio:1}
.fotos figcaption{font-size:14px;line-height:1.3;color:var(--fliess);margin-top:7px}
.nachweis{display:block;font-size:11px;line-height:1.35;color:var(--nebel);margin-top:3px}
.nachweis a{text-decoration:none}
.nachweis a:hover{color:var(--fliess)}
.kasten table{width:100%;border-collapse:collapse;font:300 15px/1.45 var(--text);color:var(--fliess)}
.kasten td{padding:7px 4px;border-top:1px solid var(--linie-leise);vertical-align:top}
.kasten tr:first-child td{border-top:0}
.kasten td.pl{color:var(--nebel);width:1.9em;white-space:nowrap;font-variant-numeric:tabular-nums}
.kasten td.z{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.kasten td.lang{text-align:right;overflow-wrap:anywhere}
.kasten tr.hervor td{color:var(--gold-hell);font-weight:500}
/* Das Brett: Felder als Muster, Figuren frei gesetzt (damit sie beim Abspielen gleiten können),
   Koordinaten wie auf der Startseite: Zahlen links in der a-Linie, Buchstaben unten rechts. */
.brett{position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;border:1px solid var(--linie);
  background:conic-gradient(var(--feld-dunkel) 90deg,var(--feld-hell) 0 180deg,var(--feld-dunkel) 0 270deg,var(--feld-hell) 0) 0 0/25% 25%;
  box-shadow:0 24px 50px -28px rgb(0 0 0 / .8)}
.brett .figuren{position:absolute;inset:0}
.brett .figuren img{position:absolute;width:12.5%;height:12.5%;max-width:none;will-change:left,top}
.brett .figuren img.zieht{z-index:2;filter:drop-shadow(0 6px 8px rgb(0 0 0 / .35));
  transition:left 1.5s cubic-bezier(.45,0,.55,1),top 1.5s cubic-bezier(.45,0,.55,1)}
.brett .zahl,.brett .buchstabe{position:absolute;font:500 10px/1 var(--mono);pointer-events:none;opacity:.75}
.brett .zahl{left:3px;margin-top:3px}
.brett .buchstabe{bottom:3px;margin-left:calc(12.5% - 10px)}
/* Die Farbe der Beschriftung ist die des Nachbarfelds: auf Hell dunkel, auf Dunkel hell */
.brett .zahl:nth-of-type(odd){color:var(--feld-dunkel)}
.brett .zahl:nth-of-type(even){color:var(--feld-hell)}
.brett .buchstabe:nth-of-type(odd){color:var(--feld-hell)}
.brett .buchstabe:nth-of-type(even){color:var(--feld-dunkel)}
.unterbrett{font-size:14px;color:var(--nebel);margin-top:8px;line-height:1.4}
.unterbrett b{color:var(--elfenbein);font-weight:500}
/* Diagramm mitten im Text, mit der Zugfolge zum Abspielen */
.imtext{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:26px;align-items:center;margin:10px 0 14px;
  padding:22px;border-radius:18px;border:1px solid var(--linie-leise);background:rgb(var(--navy2-rgb) / .28)}
.imtext[data-folge] .brett{cursor:pointer}
.imtext .unterbrett{margin:0;font-size:15.5px;line-height:1.5;display:flex;flex-direction:column;gap:6px;color:var(--fliess)}
.imtext .unterbrett b{font:400 23px/1.2 var(--display)}
.abspiel{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-top:12px}
.zugzeile{font:500 22px/1 var(--mono);color:var(--gold-hell);min-height:22px;letter-spacing:.02em}
.knopf.linie{border:1px solid var(--linie);color:var(--elfenbein);background:rgb(var(--hell-rgb) / .02)}
.knopf.linie:hover{border-color:var(--gold);transform:translateY(-2px)}
.knopf.klein{padding:11px 20px;font-size:15px}
@media(max-width:640px){.imtext{grid-template-columns:minmax(0,1fr);padding:16px;gap:16px}}
.a-text a.textlink{color:var(--gold-hell);text-decoration:underline;text-decoration-color:rgb(var(--goldhell-rgb) / .4);text-underline-offset:3px}
.a-text a.textlink:hover{text-decoration-color:var(--gold-hell)}
.kasten td.haupt{font-weight:500;color:var(--elfenbein)}
.kasten td.neben{color:var(--nebel);width:3.2em}
.kasten th{font:400 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--nebel);text-align:left;padding:0 4px 6px}
.kasten th.z{text-align:right}
.kasten tr.hervor td.neben{color:var(--gold-hell)}
.hin li{border-top:1px solid var(--linie-leise)}
.hin li:first-child{border-top:0}
.hin li a{display:flex;justify-content:space-between;gap:12px;padding:9px 0;text-decoration:none;font-size:15px;color:var(--fliess);transition:color .25s}
.hin li a:hover{color:var(--gold-hell)}
.hin li a span{color:var(--nebel);font:400 12px var(--mono);white-space:nowrap;padding-top:4px}
.ruf{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;margin-top:70px;padding:34px 40px;border-radius:22px;
  border:1px solid var(--linie);background:linear-gradient(120deg,var(--navy),rgb(var(--navy2-rgb) / .5))}
.ruf h3{font-size:clamp(30px,3.4vw,42px);margin:8px 0 6px}
.ruf p{color:var(--fliess)}
.mehr{margin-top:64px}
.mehr > h4{margin-bottom:18px}
.blaettern{display:flex;justify-content:space-between;gap:20px;margin-top:34px;flex-wrap:wrap}
.blaettern a{text-decoration:none;color:var(--fliess);font-size:15.5px;max-width:46%}
.blaettern a:hover{color:var(--gold-hell)}
.blaettern a small{display:block;font:400 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:4px}
.blaettern a.rechts{text-align:right;margin-left:auto}