/*!
 * analogclock.css v3.0.0 - © 2026 Jan Overwaul · https://playground.jan-overwaul.de/analogclock/
 * Lizenziert unter der MIT-Lizenz: https://opensource.org/licenses/MIT
*/

/* Wie bei FlipArt enthaelt diese Datei AUSSCHLIESSLICH Theme-Tokens.
 * Das Painting steckt gekapselt im Shadow Root jeder Instanz (Konstante
 * SHADOW_CSS in analogclock.js). Die Tokens hier sitzen am .analogclock-Host,
 * vererben ueber die Shadow-Grenze und bleiben von aussen ueberschreibbar.
 *
 * Konsequenz: rohe Tag-/Nachfahren-Selektoren der Seite (".panel svg",
 * ".widget *") wirken nicht mehr auf das Widget. Styling erfolgt allein
 * ueber die --ac-*-Tokens und data-clock-theme - beides am Host.
 *
 * Groessenangaben in px beziehen sich auf die SVG-viewBox: das Ziffernblatt
 * ist 100 Einheiten breit, "9px" sind also 9 % des Durchmessers. Farben und
 * Strichstaerken skalieren dadurch automatisch mit --ac-size mit.
 *
 * Nicht vorbelegt sind die Zeigerlaengen:
 *
 *     --ac-hand-hour-length     --ac-hand-hour-tail
 *     --ac-hand-minute-length   --ac-hand-minute-tail
 *     --ac-hand-second-length   --ac-hand-second-tail
 *
 * Ohne sie ergeben sich Laenge und Ueberstand aus der Blattgeometrie und
 * passen sich automatisch an, wenn z.B. eine Minutenbeschriftung das Blatt
 * nach innen ruecken laesst. Wer sie setzt, uebernimmt beides selbst.
 */

/* ============================================================
   Default: "Porzellan" - helles Blatt, Tinte, roter Sekundenzeiger
   ============================================================ */
.analogclock {
	/* Groesse */
	--ac-size: clamp(9rem, 32vw, 20rem);

	/* Blatt */
	--ac-face: #ffffff;
	--ac-bezel: #c9ced6;
	--ac-bezel-width: 0.9;

	/* Teilung */
	--ac-tick: #b3bac4;
	--ac-tick-width: 0.5;
	--ac-tick-hour: #55606f;
	--ac-tick-hour-width: 1.5;

	/* Stundenziffern */
	--ac-numeral: #2b3441;
	--ac-numeral-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--ac-numeral-size: 9px;
	--ac-numeral-weight: 500;

	/* Innerer 13-24-Ring */
	--ac-numeral-24: #93a0b1;
	--ac-numeral-24-size: 5.4px;

	/* Minutenbeschriftung */
	--ac-minute: #8b95a3;
	--ac-minute-font: ui-sans-serif, system-ui, sans-serif;
	--ac-minute-size: 3.4px;

	/* Zeiger */
	--ac-hand-hour: #1d2530;
	--ac-hand-minute: #1d2530;
	--ac-hand-second: #d4372c;
	--ac-hand-hour-width: 3.4;
	--ac-hand-minute-width: 2.2;
	--ac-hand-second-width: 0.9;
	/* Strichstaerke der Form "outline" */
	--ac-hand-outline-width: 0.9;

	/* Achse und Gegengewicht */
	--ac-cap: #1d2530;
	--ac-cap-dot: #ffffff;
	--ac-cap-r: 2.1px;
	--ac-cap-dot-r: 0.8px;
	--ac-weight-r: 1.5px;

	/* Sektoren (zones) */
	--ac-zone: #4a90c4;
	--ac-zone-opacity: 0.16;

	/* Zielzeiger (ghost) */
	--ac-ghost: #1d2530;
	--ac-ghost-opacity: 0.24;

	/* Sonstiges */
	--ac-shadow: rgba(29, 37, 48, 0.28);
	--ac-accent: #d4372c;
}

/* ============================================================
   Automatiken - reagieren auf die Konfiguration, nicht auf das Theme
   ============================================================ */

/* Roemische Ziffern brauchen eine Serifenschrift; in einer Monospace
   fallen die I-Ketten optisch auseinander. Etwas kleiner gesetzt, weil
   VIII und XXIII deutlich breiter bauen als "8" und "23". */
.analogclock[data-clock-numerals="roman"] {
	--ac-numeral-font: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
	--ac-numeral-size: 7.4px;
	--ac-numeral-weight: 400;
}

/* 24 Ziffern auf dem Vollkreis - enger, also kleiner. */
.analogclock[data-clock-dial="24"] {
	--ac-numeral-size: 6.2px;
}

.analogclock[data-clock-dial="24"][data-clock-numerals="roman"] {
	--ac-numeral-size: 4.6px;
}

/* Ausgeduennter Ziffernkranz (numeralStep > 1): weniger Ziffern, dafuer
   groesser. Steht auf dem 24er-Blatt nur noch jede zweite Stunde, ist
   wieder so viel Platz wie auf einem 12er-Blatt. */
.analogclock[data-clock-dial="24"][data-clock-numeral-step] {
	--ac-numeral-size: 8.4px;
}

.analogclock[data-clock-dial="24"][data-clock-numerals="roman"][data-clock-numeral-step] {
	--ac-numeral-size: 5.6px;
}

/* Alle 60 Minutenzahlen passen nur in Kleinstschrift. */
.analogclock[data-clock-minute-labels="all"] {
	--ac-minute-size: 2.5px;
}

/* Ostasiatische und indische Ziffernsysteme bauen quadratisch bis hoch -
   eine Spur kleiner gesetzt, damit sie nicht in die Teilung laufen. */
.analogclock[data-clock-numerals="hanidec"],
.analogclock[data-clock-numerals="deva"],
.analogclock[data-clock-numerals="beng"],
.analogclock[data-clock-numerals="thai"] {
	--ac-numeral-size: 7.6px;
}

.analogclock[data-clock-dial="24"][data-clock-numerals="hanidec"],
.analogclock[data-clock-dial="24"][data-clock-numerals="deva"],
.analogclock[data-clock-dial="24"][data-clock-numerals="beng"],
.analogclock[data-clock-dial="24"][data-clock-numerals="thai"] {
	--ac-numeral-size: 5.2px;
}

/* ============================================================
   Themes - reine Token-Overrides am Host
   ============================================================ */

/* Papier - warm, gedeckt, wie ein Schulwandbild */
.analogclock[data-clock-theme="paper"] {
	--ac-face: #f5f1e6;
	--ac-bezel: #b6a986;
	--ac-tick: #b6ac95;
	--ac-tick-hour: #6b6253;
	--ac-numeral: #2a2620;
	--ac-numeral-24: #a2977f;
	--ac-minute: #8a806c;
	--ac-hand-hour: #2a2620;
	--ac-hand-minute: #2a2620;
	--ac-hand-second: #a8462b;
	--ac-cap: #2a2620;
	--ac-cap-dot: #f5f1e6;
	--ac-zone: #a8462b;
	--ac-ghost: #2a2620;
	--ac-shadow: rgba(42, 38, 32, 0.22);
	--ac-accent: #a8462b;
}

/* Mono - streng grauwertig */
.analogclock[data-clock-theme="mono"] {
	--ac-face: #fafafa;
	--ac-bezel: #d0d0d0;
	--ac-tick: #c4c4c4;
	--ac-tick-hour: #5a5a5a;
	--ac-numeral: #1c1c1c;
	--ac-numeral-24: #9c9c9c;
	--ac-minute: #909090;
	--ac-hand-hour: #1c1c1c;
	--ac-hand-minute: #1c1c1c;
	--ac-hand-second: #6a6a6a;
	--ac-cap: #1c1c1c;
	--ac-cap-dot: #fafafa;
	--ac-zone: #1c1c1c;
	--ac-zone-opacity: 0.1;
	--ac-ghost: #1c1c1c;
	--ac-shadow: rgba(0, 0, 0, 0.22);
	--ac-accent: #6a6a6a;
}

/* Stahl - das dunkle Gegenstueck, Farbfamilie von FlipArt */
.analogclock[data-clock-theme="slate"] {
	--ac-face: #1f2731;
	--ac-bezel: #3a4655;
	--ac-tick: #4d5a6c;
	--ac-tick-hour: #93a2b6;
	--ac-numeral: #e8b964;
	--ac-numeral-24: #5f6d80;
	--ac-minute: #6b7785;
	--ac-hand-hour: #dfe6ef;
	--ac-hand-minute: #dfe6ef;
	--ac-hand-second: #e8b964;
	--ac-cap: #dfe6ef;
	--ac-cap-dot: #1f2731;
	--ac-zone: #93a2b6;
	--ac-zone-opacity: 0.2;
	--ac-ghost: #dfe6ef;
	--ac-ghost-opacity: 0.3;
	--ac-shadow: rgba(0, 0, 0, 0.6);
	--ac-accent: #e8b964;
}

/* Neon */
.analogclock[data-clock-theme="neon"] {
	--ac-face: #0e0420;
	--ac-bezel: #00f0ff;
	--ac-bezel-width: 0.7;
	--ac-tick: #3a2a6a;
	--ac-tick-hour: #00f0ff;
	--ac-numeral: #00f0ff;
	--ac-numeral-24: #7a4bb8;
	--ac-minute: #ff2b8f;
	--ac-hand-hour: #ffffff;
	--ac-hand-minute: #ffffff;
	--ac-hand-second: #ff2b8f;
	--ac-cap: #ffffff;
	--ac-cap-dot: #0e0420;
	--ac-zone: #ff2b8f;
	--ac-zone-opacity: 0.22;
	--ac-ghost: #00f0ff;
	--ac-ghost-opacity: 0.35;
	--ac-shadow: rgba(0, 240, 255, 0.55);
	--ac-accent: #ff2b8f;
}

/* Terminal */
.analogclock[data-clock-theme="terminal"] {
	--ac-face: #061008;
	--ac-bezel: #3a8050;
	--ac-tick: #24462f;
	--ac-tick-hour: #6cf48a;
	--ac-numeral: #6cf48a;
	--ac-numeral-font: ui-monospace, "SF Mono", "JetBrains Mono", Consolas, monospace;
	--ac-numeral-24: #35734a;
	--ac-minute: #4f9a66;
	--ac-hand-hour: #6cf48a;
	--ac-hand-minute: #6cf48a;
	--ac-hand-second: #b6ffc9;
	--ac-cap: #6cf48a;
	--ac-cap-dot: #061008;
	--ac-zone: #6cf48a;
	--ac-zone-opacity: 0.18;
	--ac-ghost: #6cf48a;
	--ac-ghost-opacity: 0.32;
	--ac-shadow: rgba(108, 244, 138, 0.35);
	--ac-accent: #b6ffc9;
}

/* Terminal setzt eine Monospace - roemische Ziffern holen sich
   trotzdem ihre Serifenschrift zurueck. */
.analogclock[data-clock-theme="terminal"][data-clock-numerals="roman"] {
	--ac-numeral-font: "Iowan Old Style", Georgia, "Times New Roman", serif;
}

/* ============================================================
   auto - folgt dem Systemwunsch hell/dunkel
   ============================================================

   Hell ist der Default "Porzellan", dunkel eine abgedunkelte
   Variante davon. Nur wer data-clock-theme="auto" setzt, bekommt
   den Wechsel - die Uhr aendert ihr Aussehen nie ungefragt.

   Eigene Paare baut man nach demselben Muster:

       .analogclock[data-clock-theme="auto-terminal"] { … hell … }
       @media (prefers-color-scheme: dark) {
           .analogclock[data-clock-theme="auto-terminal"] { … dunkel … }
       }
   ------------------------------------------------------------ */
@media (prefers-color-scheme: dark) {
	.analogclock[data-clock-theme="auto"] {
		--ac-face: #171c23;
		--ac-bezel: #333d4b;
		--ac-tick: #414d5e;
		--ac-tick-hour: #8a99ad;
		--ac-numeral: #e3e9f1;
		--ac-numeral-24: #5b6878;
		--ac-minute: #798695;
		--ac-hand-hour: #e3e9f1;
		--ac-hand-minute: #e3e9f1;
		--ac-hand-second: #e2604f;
		--ac-cap: #e3e9f1;
		--ac-cap-dot: #171c23;
		--ac-zone: #7fa8cc;
		--ac-zone-opacity: 0.2;
		--ac-ghost: #e3e9f1;
		--ac-ghost-opacity: 0.3;
		--ac-shadow: rgba(0, 0, 0, 0.55);
		--ac-accent: #e2604f;
	}
}

/* ============================================================
   Kontrast-Themes - fuer Sehbeeintraechtigung und schlechte
   Ansichtsbedingungen (Sonne, Beamer, grosser Betrachtungsabstand)
   ============================================================

   Drei Varianten, weil "hoher Kontrast" nicht fuer alle dasselbe ist:

     contrast          Schwarz auf Weiss - 21:1, der Maximalwert.
     contrast-dark     Weiss auf Fastschwarz - fuer Blendempfindlichkeit
                       (Katarakt, Photophobie, Migraene). Das Blatt ist
                       #0a0a0a statt #000, das daempft das Nachziehen
                       heller Kanten (Halation) etwas ab.
     contrast-yellow   Gelb auf Schwarz - die klassische Kombination der
                       Sehbehindertenarbeit, hilft besonders bei
                       Makuladegeneration und getruebten Medien.

   Gemeinsam ist ihnen mehr als nur Farbe: groesseres Blatt, fettere
   Ziffern, dickere Zeiger und Striche, kein Schlagschatten (weiche
   Kanten kosten Sehschaerfe). Alle Farbpaare liegen ueber 7:1 (WCAG AAA
   fuer Text), Nebenteilungen ueber 4,5:1.

   Zeigerfarben tragen bewusst keine Information: die Zeiger sind an
   ihrer Laenge und Dicke zu unterscheiden, nicht an der Farbe. Kein
   rotes Rot auf Weiss - #d4372c kommt nur auf 4,8:1 und faellt bei
   Rot-Gruen-Schwaeche mit Schwarz zusammen.

   Der Praefix-Selektor [data-clock-theme^="contrast"] fasst die drei
   zusammen; eigene Ableitungen (data-clock-theme="contrast-eigenes")
   erben die Geometrie damit automatisch mit.
   ------------------------------------------------------------ */

/* -- Gemeinsame Geometrie ------------------------------------ */
.analogclock[data-clock-theme^="contrast"] {
	/* Groesse ist der wirksamste Hebel ueberhaupt - deutlich groesser
	   als der Default, per --ac-size jederzeit ueberschreibbar. */
	--ac-size: clamp(11rem, 40vw, 24rem);

	--ac-bezel-width: 1.6;

	--ac-tick-width: 1;
	--ac-tick-hour-width: 2.6;

	--ac-numeral-size: 11px;
	--ac-numeral-weight: 700;
	--ac-numeral-24-size: 6.8px;
	--ac-minute-size: 4.4px;

	/* Der Stundenzeiger bleibt knapp unter der Kappe (r = 2,6), damit
	   die Achse sichtbar bleibt. */
	--ac-hand-hour-width: 4.2;
	--ac-hand-minute-width: 3;
	--ac-hand-second-width: 1.4;
	--ac-hand-outline-width: 1.6;

	--ac-cap-r: 2.6px;
	--ac-cap-dot-r: 1px;
	--ac-weight-r: 2px;

	/* Ein blasser Zielzeiger ist hier wertlos - er muss stehen. */
	--ac-ghost-opacity: 0.45;
	--ac-zone-opacity: 0.28;

	/* Kein Schlagschatten: weiche Kanten senken die Trennschaerfe. */
	--ac-shadow: transparent;
}

/* Automatiken nachziehen. Ohne diese Regeln wuerde der Block darueber
   die Verkleinerungen fuer roemisch und 24 ueberschreiben - er steht
   spaeter in der Datei und ist gleich spezifisch. */
.analogclock[data-clock-theme^="contrast"][data-clock-numerals="roman"] {
	--ac-numeral-size: 8.6px;
	--ac-numeral-weight: 600;
}

/* 24 Ziffern auf dem Vollkreis stehen nur 8,4 Einheiten auseinander -
   viel mehr als das passt hier nicht, egal wie gross man moechte.
   Fuer Sehbeeintraechtigung ist das 12er- oder 12+24-Blatt ohnehin die
   bessere Wahl. */
.analogclock[data-clock-theme^="contrast"][data-clock-dial="24"] {
	--ac-numeral-size: 6.6px;
}

.analogclock[data-clock-theme^="contrast"][data-clock-dial="24"][data-clock-numerals="roman"] {
	--ac-numeral-size: 5px;
}

/* Ausgeduennt ist wieder Luft - auch hier. */
.analogclock[data-clock-theme^="contrast"][data-clock-dial="24"][data-clock-numeral-step] {
	--ac-numeral-size: 9px;
}

.analogclock[data-clock-theme^="contrast"][data-clock-dial="24"][data-clock-numerals="roman"][data-clock-numeral-step] {
	--ac-numeral-size: 6px;
}

/* Ist der Minutenring an, rueckt das ganze Ziffernblatt nach innen:
   der Ziffernkreis schrumpft von r 34,9 auf r 27,5. Die fetten Ziffern
   muessen dann wieder auf Default-Groesse zurueck. */
.analogclock[data-clock-theme^="contrast"][data-clock-minute-labels="5"],
.analogclock[data-clock-theme^="contrast"][data-clock-minute-labels="quarter"],
.analogclock[data-clock-theme^="contrast"][data-clock-minute-labels="all"] {
	--ac-numeral-size: 9px;
	--ac-numeral-24-size: 5.6px;
}

.analogclock[data-clock-theme^="contrast"][data-clock-minute-labels="5"][data-clock-numerals="roman"],
.analogclock[data-clock-theme^="contrast"][data-clock-minute-labels="quarter"][data-clock-numerals="roman"],
.analogclock[data-clock-theme^="contrast"][data-clock-minute-labels="all"][data-clock-numerals="roman"] {
	--ac-numeral-size: 7.2px;
}

.analogclock[data-clock-theme^="contrast"][data-clock-minute-labels="all"] {
	--ac-minute-size: 3.2px;
}

/* -- contrast: Schwarz auf Weiss ----------------------------- */
.analogclock[data-clock-theme="contrast"] {
	--ac-face: #ffffff;
	--ac-bezel: #000000;
	--ac-tick: #4a4a4a;
	--ac-tick-hour: #000000;
	--ac-numeral: #000000;
	--ac-numeral-24: #333333;
	--ac-minute: #333333;
	--ac-hand-hour: #000000;
	--ac-hand-minute: #000000;
	/* Dunkelblau statt Rot: 10:1 auf Weiss und auch bei Protanopie
	   noch von Schwarz zu trennen. */
	--ac-hand-second: #0b34ac;
	--ac-cap: #000000;
	--ac-cap-dot: #ffffff;
	--ac-zone: #0b34ac;
	--ac-ghost: #000000;
	--ac-shadow: transparent;
	--ac-accent: #0b34ac;
}

/* -- contrast-dark: Weiss auf Fastschwarz -------------------- */
.analogclock[data-clock-theme="contrast-dark"] {
	--ac-face: #0a0a0a;
	--ac-bezel: #ffffff;
	--ac-tick: #9a9a9a;
	--ac-tick-hour: #ffffff;
	--ac-numeral: #ffffff;
	--ac-numeral-24: #c8c8c8;
	--ac-minute: #c8c8c8;
	--ac-hand-hour: #ffffff;
	--ac-hand-minute: #ffffff;
	--ac-hand-second: #7ad1ff;
	--ac-cap: #ffffff;
	--ac-cap-dot: #0a0a0a;
	--ac-zone: #7ad1ff;
	--ac-ghost: #ffffff;
	--ac-shadow: transparent;
	--ac-accent: #7ad1ff;
}

/* -- contrast-yellow: Gelb auf Schwarz ----------------------- */
.analogclock[data-clock-theme="contrast-yellow"] {
	--ac-face: #000000;
	--ac-bezel: #ffdd00;
	--ac-tick: #8a7400;
	--ac-tick-hour: #ffdd00;
	--ac-numeral: #ffdd00;
	--ac-numeral-24: #c9ae00;
	--ac-minute: #d9bd00;
	--ac-hand-hour: #ffdd00;
	--ac-hand-minute: #ffdd00;
	--ac-hand-second: #ffffff;
	--ac-cap: #ffdd00;
	--ac-cap-dot: #000000;
	--ac-zone: #ffdd00;
	--ac-ghost: #ffdd00;
	--ac-shadow: transparent;
	--ac-accent: #ffffff;
}

/* ------------------------------------------------------------
   Optional: Systemwunsch "mehr Kontrast" automatisch bedienen.
   Bewusst auskommentiert - die Uhr soll nicht ungefragt ihr
   Aussehen wechseln. Wer es will, nimmt die Kommentarzeichen weg;
   Instanzen mit eigenem data-clock-theme bleiben unberuehrt, weil
   der Attributselektor spezifischer ist als .analogclock allein.
   ------------------------------------------------------------ */
/*
@media (prefers-contrast: more) {
	.analogclock:not([data-clock-theme]) {
		--ac-size: clamp(11rem, 40vw, 24rem);
		--ac-face: #ffffff;
		--ac-bezel: #000000;
		--ac-bezel-width: 1.6;
		--ac-tick: #4a4a4a;
		--ac-tick-width: 1;
		--ac-tick-hour: #000000;
		--ac-tick-hour-width: 2.6;
		--ac-numeral: #000000;
		--ac-numeral-size: 11px;
		--ac-numeral-weight: 700;
		--ac-numeral-24: #333333;
		--ac-numeral-24-size: 6.8px;
		--ac-minute: #333333;
		--ac-minute-size: 4.4px;
		--ac-hand-hour: #000000;
		--ac-hand-minute: #000000;
		--ac-hand-second: #0b34ac;
		--ac-hand-hour-width: 4.2;
		--ac-hand-minute-width: 3;
		--ac-hand-second-width: 1.4;
		--ac-cap: #000000;
		--ac-cap-dot: #ffffff;
		--ac-cap-r: 2.6px;
		--ac-zone: #0b34ac;
		--ac-zone-opacity: 0.28;
		--ac-ghost: #000000;
		--ac-ghost-opacity: 0.45;
		--ac-shadow: transparent;
		--ac-accent: #0b34ac;
	}
}
*/