/* =========================================================================== * Schachmich — die Farbtafel „Turnierhalle" und das ganze Vokabular. * * WARUM DIESE DATEI IN public/ LIEGT UND NICHT IN src/styles/ * * Sie wird als `` eingebunden, also als eigene * Datei ausgeliefert und nicht mitgebündelt. Die CSP dieses Hauses erlaubt `style-src * 'unsafe-inline'`, aber `assetsInlineLimit: 0` in `astro.config.mjs` verbietet jedes * Einbetten — und eine gebündelte Stilvorlage, die nirgends eingebettet werden darf, ist * am Ende auch nur eine Datei. Dann lieber eine, deren Adresse feststeht. * * NICHTS VON WOANDERS. Keine Schrift, kein Bild, kein Skript von einem fremden Wirt. Das * ist nicht Sparsamkeit: die CSP lässt es nicht zu (`default-src 'self'`), und der * Datenschutztext sagt es dem Kunden zu. * * ═══ EINE TAFEL, NICHT ZWEI ═══ * * Schachmich ist dunkel — immer, auf jeder Seite, unabhängig von der Einstellung des * Browsers. Das ist eine Entscheidung und kein vergessener Zweig: * * Kalio folgt `prefers-color-scheme`, PW-Keeper schaltet über `class="hell"` am `` * zwischen zwei Tafeln. Beide Wege kosten die doppelte Prüffläche — jede Komponente muss * in zwei Zuständen richtig aussehen, und die Bezahlseite, die in einem fremden Rahmen * steckt, kann dem Umschalter ohnehin nicht folgen. * * Ein Schachbrett ist ausserdem sein eigener Hell-Dunkel-Kontrast. Eine helle Fassung * müsste das Brett entweder mitdrehen (dann sitzen Weiss und Schwarz falsch) oder es * stehen lassen (dann schwimmt eine dunkle Kachel in einer hellen Seite). * * ═══ DIE KONTRASTE SIND NACHGERECHNET, NICHT GESCHÄTZT ═══ * * Jeder Textton gegen `--grund-erhoben` (#312e2b), den HELLSTEN Untergrund — wer gegen den * bestehen will, besteht auch gegen die beiden dunkleren: * * --text #f0ece6 11,47:1 * --text-leise #b3aca4 6,01:1 Fliesstext * --text-still #a49c93 4,98:1 Kleingedrucktes * --akzent #c8a24a 5,60:1 * --sieg #8fba5c 6,01:1 * --warnung #e8806b 4,97:1 * * `components/gestalt.test.ts` rechnet sie nach. Wer einen Wert ändert, ohne den Kontrast * zu prüfen, bekommt einen roten Lauf — eine Farbe, die nur „gut aussieht", ist für * jemanden mit schwachem Sehvermögen keine. * =========================================================================== */ :root { /* --- Die Halle ------------------------------------------------------- */ --grund: #262421; /* Anthrazit-Nussbaum — der Seitengrund */ --grund-erhoben: #312e2b; /* Karten, Panel, Formularblöcke */ --grund-tief: #1c1a18; /* Kopf, Fuss, Eingabefelder */ --rand: #3d3935; --rand-leise: #ffffff12; /* --- Die Schrift ------------------------------------------------------ */ --text: #f0ece6; --text-leise: #b3aca4; --text-still: #a49c93; /* --- Das Gold --------------------------------------------------------- */ --akzent: #c8a24a; --akzent-hell: #dcb85f; --akzent-tief: #a8842f; --akzent-text: #1c1a18; /* Text AUF Gold — 7,21:1 */ /* --- Die Meldungen ---------------------------------------------------- */ --sieg: #8fba5c; --warnung: #e8806b; --warnung-grund: #e8806b1a; --hinweis-grund: #c8a24a14; /* --- Das Brett ------------------------------------------------------- * Die klassischen Turnierfarben. Sie stehen HIER und nicht im Brett-Bauteil, * weil auch die Verkaufsseite, die Lektionen und die Illustrationen sie * brauchen — und ein zweiter Grünton wäre sofort sichtbar. */ --feld-hell: #eeeed2; --feld-dunkel: #769656; --feld-zug: #f6f669; /* der zuletzt gezogene Zug */ --feld-ziel: #1c1a1859; /* mögliche Ziele — ein Punkt, keine Farbe */ --feld-schlag: #e2483d; /* * Die beiden Schleier liegen ÜBER dem Feld und müssen deshalb durchscheinen: ein deckender * Ton nähme dem Brett an dieser Stelle seine Farbe, und der Spieler verlöre die Orientierung * genau dort, wo er hinsieht. */ --feld-zug-schleier: #f6f66947; --feld-wahl-schleier: #f6f6692e; --figur-weiss: #f8f6f0; --figur-schwarz: #2a2724; /* --- Mass und Rhythmus ------------------------------------------------ */ --radius: 8px; --radius-gross: 14px; --spalte: 70rem; --spalte-eng: 36rem; --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2.5rem; --s7: 4rem; --s8: 6rem; /* * DIE SCHRIFT IST DER ZWEITE UNTERSCHIED ZU DEN SCHWESTERMARKEN. * * Überschriften in einer Serifenschrift — das ist der Ton eines Turniersaals und nicht * der einer App. Beide Schwesterprodukte setzen durchgehend den System-Sans; hier trennt * sich die Überschrift sichtbar vom Fliesstext. * * OHNE WEBFONT: `ui-serif` nimmt auf Apple-Geräten New York, Georgia deckt Windows und * Android ab, und darunter steht immer noch eine Serifenschrift. Eine geladene Schrift * wäre ein weiterer Abruf, ein Sprung beim Aufbau der Seite — und bei einem fremden Wirt * ausserdem ein Empfänger im Datenschutztext. */ --schrift: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --schrift-titel: ui-serif, Georgia, "Iowan Old Style", "Times New Roman", serif; --schrift-fest: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; } /* =========================================================================== * Grundlagen * =========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { color-scheme: dark; /* Formularfelder und Rollbalken folgen mit */ scroll-behavior: smooth; scroll-padding-top: 5rem; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--grund); color: var(--text-leise); font-family: var(--schrift); font-size: 1rem; line-height: 1.65; /* * DIE MASERUNG. Zwei sehr flache Verläufe über dem Grundton — sie geben der Fläche eine * Richtung, ohne ein Bild zu laden. Bei 0.5 % Deckkraft sieht man sie nicht bewusst; man * sieht nur, dass die Seite nicht aus Pappe ist. */ background-image: repeating-linear-gradient(92deg, #ffffff06 0 1px, transparent 1px 7px), repeating-linear-gradient(178deg, #00000010 0 1px, transparent 1px 13px); background-attachment: fixed; } h1, h2, h3, h4 { font-family: var(--schrift-titel); color: var(--text); line-height: 1.15; letter-spacing: -.015em; font-weight: 600; text-wrap: balance; margin: 0 0 var(--s3); } h1 { font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.6rem); } h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.5rem); } h3 { font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem); } h4 { font-size: 1.05rem; } p, li { text-wrap: pretty; } p { margin: 0 0 var(--s4); } a { color: var(--akzent-hell); text-decoration-thickness: 1px; text-underline-offset: 3px; } a:hover { color: var(--akzent); } strong, b { color: var(--text); font-weight: 600; } hr { border: 0; border-top: 1px solid var(--rand); margin: var(--s6) 0; } :focus-visible { outline: 2px solid var(--akzent-hell); outline-offset: 2px; border-radius: 3px; } /* =========================================================================== * Gerüst * =========================================================================== */ .bahn { width: min(100% - 2.5rem, var(--spalte)); margin-inline: auto; } .bahn.eng { max-width: var(--spalte-eng); } .reihe { padding-block: clamp(var(--s6), 5vw, var(--s8)); } .reihe.tief { background: var(--grund-tief); } .reihe + .reihe { border-top: 1px solid var(--rand-leise); } .raster { display: grid; gap: var(--s4); } .raster.zwei { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); } .raster.drei { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); } .raster.vier { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); } /* =========================================================================== * Bauteile * =========================================================================== */ .tafel { background: var(--grund-erhoben); border: 1px solid var(--rand); border-radius: var(--radius-gross); padding: clamp(1.1rem, .9rem + .7vw, 1.6rem); } .tafel.still { background: transparent; } .tafel.gold { border-color: #c8a24a4d; background: linear-gradient(180deg, #c8a24a0f, transparent 60%), var(--grund-erhoben); } /* * DIE AUGENBRAUE — die kleine Zeile über einer Überschrift. Gold, gesperrt, versal. * Sie benennt den ABSCHNITT, nicht das Produkt; wer sie als Werbezeile benutzt, macht aus * einer Orientierungshilfe ein Geräusch. */ .augenbraue { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--akzent); margin-bottom: var(--s2); font-family: var(--schrift); } .anriss { font-size: clamp(1.02rem, .98rem + .3vw, 1.2rem); color: var(--text-leise); max-width: 46ch; } .leise { color: var(--text-still); } .klein { font-size: .86rem; line-height: 1.55; } .fest { font-family: var(--schrift-fest); font-variant-numeric: tabular-nums; } .zahl { font-variant-numeric: tabular-nums; } /* --- Knöpfe --------------------------------------------------------------- * Ein Knopf ist ein Knopf, ein Verweis ist ein Verweis. Beide tragen dieselbe Klasse, weil * beide dasselbe tun sollen: einen Schritt auslösen. Die Unterscheidung liegt im Element, * nicht im Aussehen — ein ``, der wie ein Knopf aussieht, aber in einem neuen Tab * öffnet, ist die Überraschung, die niemand braucht. */ .knopf { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); padding: .68rem 1.25rem; border: 1px solid var(--rand); border-radius: var(--radius); background: var(--grund-erhoben); color: var(--text); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; transition: transform .12s ease, background-color .15s ease, border-color .15s ease; } .knopf:hover { background: #3a3733; border-color: #4a453f; color: var(--text); } .knopf:active { transform: translateY(1px); } .knopf[disabled], .knopf[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; } .knopf.gold { background: var(--akzent); border-color: var(--akzent); color: var(--akzent-text); } .knopf.gold:hover { background: var(--akzent-hell); border-color: var(--akzent-hell); color: var(--akzent-text); } .knopf.still { background: transparent; } .knopf.still:hover { background: #ffffff0a; } .knopf.gross { padding: .9rem 1.7rem; font-size: 1.05rem; } .knopf.breit { width: 100%; } .knopfreihe { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; } /* --- Plaketten und Marken ------------------------------------------------- */ .plakette { display: inline-flex; align-items: center; gap: var(--s2); padding: .28rem .7rem; border: 1px solid #c8a24a40; border-radius: 999px; background: var(--hinweis-grund); color: var(--akzent-hell); font-size: .78rem; font-weight: 600; letter-spacing: .02em; } /* * DIE WERTUNGSZAHL. Sie steht überall gleich — auf der Gegnerkarte, in der Galerie, im * Partieverlauf. Feste Ziffernbreite, damit eine Liste von Gegnern nicht flimmert. */ .elo { display: inline-block; padding: .12rem .5rem; border-radius: 4px; background: var(--grund-tief); border: 1px solid var(--rand); color: var(--text-leise); font-family: var(--schrift-fest); font-variant-numeric: tabular-nums; font-size: .8rem; } /* --- Formulare ------------------------------------------------------------ */ label { display: block; font-size: .88rem; font-weight: 600; color: var(--text); margin-bottom: var(--s1); } input[type="text"], input[type="email"], input[type="password"], input[type="number"], select, textarea { width: 100%; padding: .62rem .8rem; background: var(--grund-tief); border: 1px solid var(--rand); border-radius: var(--radius); color: var(--text); font: inherit; } input::placeholder, textarea::placeholder { color: var(--text-still); } input:focus, select:focus, textarea:focus { border-color: var(--akzent); } .feld + .feld { margin-top: var(--s4); } .feld-hinweis { font-size: .82rem; color: var(--text-still); margin-top: var(--s1); } .haken { display: grid; grid-template-columns: auto 1fr; gap: var(--s3); align-items: start; } .haken input[type="checkbox"] { margin-top: .3rem; width: 1.05rem; height: 1.05rem; accent-color: var(--akzent); } .haken label { font-weight: 400; font-size: .9rem; color: var(--text-leise); margin: 0; } /* --- Meldungen ------------------------------------------------------------ */ .meldung { border: 1px solid var(--rand); border-left-width: 3px; border-radius: var(--radius); padding: var(--s3) var(--s4); margin-bottom: var(--s4); } .meldung.fehler { border-left-color: var(--warnung); background: var(--warnung-grund); color: var(--text); } .meldung.gut { border-left-color: var(--sieg); background: #8fba5c14; color: var(--text); } .meldung.hinweis { border-left-color: var(--akzent); background: var(--hinweis-grund); color: var(--text); } /* --- Tabellen ------------------------------------------------------------- */ .tabelle-huelle { overflow-x: auto; } table { border-collapse: collapse; width: 100%; font-size: .92rem; } th, td { text-align: left; padding: .55rem .7rem; border-bottom: 1px solid var(--rand); } th { color: var(--text); font-weight: 600; font-size: .82rem; letter-spacing: .03em; text-transform: uppercase; } td.zahl, th.zahl { text-align: right; font-variant-numeric: tabular-nums; } /* =========================================================================== * Kopf und Fuss * =========================================================================== */ .kopf { position: sticky; top: 0; z-index: 20; background: #1c1a18e6; backdrop-filter: blur(10px); border-bottom: 1px solid var(--rand); } .kopf-innen { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); min-height: 4rem; } .kopf nav { display: flex; gap: var(--s4); align-items: center; } .kopf nav a { color: var(--text-leise); text-decoration: none; font-size: .92rem; font-weight: 500; } .kopf nav a:hover { color: var(--text); } /* * DAS MARKENZEICHEN — der Springer im Goldrahmen. Als Verweis auf die Startseite, und * deshalb mit einem Text daneben: ein Bild allein ist für jemanden mit Vorleseprogramm * kein Weg nach Hause. */ .marke { display: inline-flex; align-items: center; gap: var(--s2); text-decoration: none; color: var(--text); } .marke-zeichen { width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 6px; background: linear-gradient(150deg, var(--akzent-hell), var(--akzent-tief)); color: var(--akzent-text); } .marke-name { font-family: var(--schrift-titel); font-size: 1.2rem; font-weight: 600; letter-spacing: -.01em; } .fuss { background: var(--grund-tief); border-top: 1px solid var(--rand); padding-block: var(--s6); font-size: .9rem; } .fuss a { color: var(--text-leise); text-decoration: none; } .fuss a:hover { color: var(--akzent-hell); text-decoration: underline; } .fuss-spalten { display: grid; gap: var(--s5); grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); } .fuss h4 { font-family: var(--schrift); font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-still); margin-bottom: var(--s3); } .fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); } .fuss-unten { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--rand); color: var(--text-still); font-size: .84rem; } /* =========================================================================== * Bewegung — ausschliesslich `transform` und `opacity` * * Alles andere lässt den Browser die Seite neu vermessen, und zwar in jedem Einzelbild. * Was hier steht, wird unten NAMENTLICH stillgelegt; `components/gestalt.test.ts` zählt * nach, dass keine Animation fehlt. * =========================================================================== */ @keyframes aufblenden { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @keyframes pulsen { 0%, 100% { opacity: 1; } 50% { opacity: .45; } } @media (prefers-reduced-motion: no-preference) { .aufblende { animation: aufblenden .5s ease both; } .verzug-1 { animation-delay: .08s; } .verzug-2 { animation-delay: .16s; } .verzug-3 { animation-delay: .24s; } .pulst { animation: pulsen 1.4s ease-in-out infinite; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .aufblende { animation: none; } .pulst { animation: none; } .knopf { transition: none; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } /* =========================================================================== * Nur für Vorleseprogramme * =========================================================================== */ .nur-vorlesen { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* =========================================================================== * Druck — die Rechtsseiten und Belege werden ausgedruckt * =========================================================================== */ @media print { body { background: #fff; color: #000; background-image: none; } h1, h2, h3, h4 { color: #000; } .kopf, .fuss, .knopf { display: none; } .tafel { border-color: #bbb; background: #fff; } a { color: #000; } } /* =========================================================================== * Das Brett * * ═══ WARUM DIE FELDER EINE EIGENE FLÄCHE HABEN UND NICHT DIE DER SEITE ═══ * * Ein Schachbrett ist sein eigener Hell-Dunkel-Kontrast. Es folgt deshalb NICHT der Farbtafel * der Seite, sondern trägt die klassischen Turnierfarben — und das ist zugleich der Grund, * warum dieses Produkt nur EINE Farbtafel hat: ein helles Thema müsste das Brett entweder * mitdrehen (dann sitzen Weiss und Schwarz falsch) oder stehen lassen (dann schwimmt eine * dunkle Kachel in einer hellen Seite). * * ═══ DIE GRÖSSE HÄNGT AN DER BREITE, NICHT AN EINER ZAHL ═══ * * `aspect-ratio: 1` und eine Breite in `min()` — damit ist das Brett auf einem Telefon so * breit wie der Bildschirm und auf einem Schreibtisch so hoch, dass es neben den Zugverlauf * passt, ohne dass irgendwo eine Pixelzahl steht. * =========================================================================== */ .brett-huelle { position: relative; width: min(100%, 34rem); /* Platz für die Beschriftung am linken und unteren Rand. */ padding: 0 0 1.1rem 1.1rem; } .brett { display: grid; grid-template-rows: repeat(8, 1fr); aspect-ratio: 1; width: 100%; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--rand); /* Der Schatten setzt das Brett vom Grund ab — es liegt auf dem Tisch, nicht darin. */ box-shadow: 0 24px 60px -30px #000; /* Ein angefangener Zug soll keine Textauswahl erzeugen. */ user-select: none; touch-action: manipulation; } .brett-reihe { display: grid; grid-template-columns: repeat(8, 1fr); } .feld { position: relative; display: grid; place-items: center; padding: 0; border: 0; border-radius: 0; background: var(--feld-hell); cursor: default; /* Ein Knopf erbt die Schrift nicht von selbst — und ohne sie stünde hier die des Browsers. */ font: inherit; color: inherit; } .feld.dunkel { background: var(--feld-dunkel); } /* * DIE FIGUR FÜLLT DAS FELD NICHT GANZ. Bei 100 % berühren sich die Figuren zweier * Nachbarfelder, und ein Brett sieht dann aus wie eine Wand. */ .feld-figur { display: block; width: 88%; aspect-ratio: 1; pointer-events: none; } .feld-figur svg { width: 100%; height: 100%; display: block; } /* * DIE FIGURENFARBEN — hier und nicht in der Zeichnung. * * Füllung und Kontur sind vertauschte Rollen: eine weisse Figur trägt eine dunkle Kontur, eine * schwarze eine helle. Ohne das verschwände die weisse Dame auf dem hellen Feld und der * schwarze Turm auf dem dunklen. */ .figur { display: block; fill: currentColor; stroke: var(--figur-kontur); stroke-width: .7; stroke-linejoin: round; } .figur-weiss { color: var(--figur-weiss); --figur-kontur: var(--figur-schwarz); } .figur-schwarz { color: var(--figur-schwarz); --figur-kontur: var(--figur-weiss); } /* ── Was das Brett anzeigt ──────────────────────────────────────────────── */ /* * DER LETZTE ZUG. Ohne ihn sucht ein Mensch nach jedem Zug des Gegners das halbe Brett ab — * und auf dem Telefon, wo er zwischendurch weggesehen hat, findet er ihn gar nicht. */ .feld[data-letzter] { background-image: linear-gradient(var(--feld-zug-schleier), var(--feld-zug-schleier)); } /* Das angefasste Feld. */ .feld[data-gewaehlt] { background-image: linear-gradient(var(--feld-wahl-schleier), var(--feld-wahl-schleier)); } /* * MÖGLICHE ZIELE ALS PUNKT, GESCHLAGENE ALS RING. * * Ein Punkt mitten auf dem Feld ist frei; ein Ring um die gegnerische Figur herum lässt sie * sichtbar. Beide als `::after`, damit sie über der Figur liegen und kein zweites Element * brauchen. */ .feld[data-ziel]::after { content: ""; position: absolute; width: 30%; aspect-ratio: 1; border-radius: 50%; background: var(--feld-ziel); pointer-events: none; } .feld[data-ziel="schlag"]::after { width: 88%; background: none; border: .35rem solid var(--feld-ziel); } /* Der König im Schach. */ .feld[data-schach] { background-image: radial-gradient(circle, var(--feld-schlag) 0%, transparent 72%); } .feld:disabled { cursor: default; } .feld:not(:disabled) { cursor: pointer; } /* ── Die Beschriftung am Rand ───────────────────────────────────────────── */ .brett-spalten, .brett-reihen { position: absolute; display: grid; color: var(--text-still); font-size: .68rem; font-variant-numeric: tabular-nums; } .brett-spalten { left: 1.1rem; right: 0; bottom: 0; grid-template-columns: repeat(8, 1fr); text-align: center; } .brett-reihen { left: 0; top: 0; bottom: 1.1rem; grid-template-rows: repeat(8, 1fr); width: 1.1rem; align-items: center; justify-items: center; } /* * GEDREHT: Schwarz führt von unten. * * Das Brett wird als Ganzes gedreht und jede Figur wieder zurück — sonst stünden alle Figuren * auf dem Kopf. Zwei Drehungen statt einer Neuberechnung der 64 Felder: die Reihenfolge im * Dokument bleibt dieselbe, und damit bleibt auch die Tastaturreihenfolge nachvollziehbar. */ .brett[data-gedreht], .brett[data-gedreht] ~ .brett-spalten, .brett[data-gedreht] ~ .brett-reihen { transform: rotate(180deg); } .brett[data-gedreht] .feld-figur, .brett[data-gedreht] ~ .brett-spalten span, .brett[data-gedreht] ~ .brett-reihen span { transform: rotate(180deg); } /* ── Die Umwandlung ─────────────────────────────────────────────────────── */ /* * SIE IST KEIN DIALOG DES BROWSERS. * * `prompt()` wäre eine Zeile und auf dem Telefon unbedienbar; ausserdem stünde dort Text statt * Figuren, und „q" ist für die meisten Menschen keine Dame. Hier stehen die vier Figuren zum * Antippen — und der Abbruch nimmt den Zug zurück, statt heimlich eine Dame zu setzen. */ .umwandlung { position: absolute; inset: 0; display: grid; place-items: center; background: #0009; backdrop-filter: blur(2px); z-index: 5; } .umwandlung-karte { background: var(--grund-erhoben); border: 1px solid var(--akzent); border-radius: var(--radius-gross); padding: 1rem; text-align: center; } .umwandlung-karte p { margin: 0 0 .75rem; font-size: .85rem; color: var(--text-leise); } .umwandlung-wahl { display: flex; gap: .5rem; } .umwandlung-wahl button { width: 3.4rem; height: 3.4rem; display: grid; place-items: center; background: var(--grund-tief); border: 1px solid var(--rand); border-radius: var(--radius); cursor: pointer; } .umwandlung-wahl button:hover { border-color: var(--akzent); } .umwandlung-wahl svg { width: 2.6rem; height: 2.6rem; } /* * DIE FIGUR AM ZEIGER. * * Sie hängt am `` und nicht im Brett: ein Kind des Bretts wäre an dessen `overflow: hidden` * abgeschnitten, sobald der Finger über den Rand hinausgeht — und genau das tut er beim Ziehen * vom Rand aus. `translate(-50%, -50%)` setzt ihre Mitte unter den Zeiger, nicht ihre Ecke. */ .figur-schwebend { position: fixed; left: 0; top: 0; transform: translate(-50%, -50%); pointer-events: none; z-index: 60; /* Ein Hauch Vergrösserung, damit sie über dem Brett schwebt statt darauf zu kleben. */ filter: drop-shadow(0 6px 10px #0008); } .figur-schwebend svg { width: 100%; height: 100%; display: block; } /* * DER SCHACH-PULS. * * Nur `box-shadow` über eine Pseudo-Fläche — kein `background`-Wechsel, der bei jedem Schlag das * Feld neu zeichnen liesse. Zwei Durchläufe, dann steht er: ein dauerhaft pulsierendes Feld zieht * den Blick für den Rest der Partie von dort weg, wo der Spieler rechnen muss. */ @keyframes schach-puls { 0%, 100% { opacity: .55; } 50% { opacity: 1; } } .feld[data-schach] { animation: schach-puls 900ms ease-in-out 2; } @media (prefers-reduced-motion: reduce) { .feld[data-schach] { animation: none; } .figur-schwebend { transition: none; } }