/*
 * Stile der Werkseite (Abschnitt 4 des Auftrags). Werte (Farben, Groessen,
 * Abstaende) sind aus den drei Referenzentwuerfen unter
 * features/5_werkseite/referenz/ abgelesen - sie sind das Mass, nicht eine
 * Anregung. Die Referenz ist fuer 390 x 844 gezeichnet; diese Fassung folgt
 * stattdessen der Breite des Geraets (Abschnitt 0), die feste Breite der
 * Referenz ist hier als Hoechstbreite uebernommen, nicht als Sollbreite -
 * eine eigene Entscheidung dieses Kastens, siehe Bericht.
 */

:root {
	--k8sg-orange: #e25303;
	--k8sg-orange-hover: #f06a1e;
	--k8sg-bg: #f2f0e8;
	--k8sg-text: #1f1e18;
	--k8sg-text-stark: #16150f;
	--k8sg-text-gedaempft: #45433a;
	--k8sg-text-schwach: #6f6c60;
	--k8sg-haarlinie: #c9c6ba;
	--k8sg-leiste-text: #f7f6f0;
	--k8sg-feld-bg: #e9e6db;
	/*
	 * Auftrag "Das Wischen sichtbar machen", N14: Abstand zwischen den
	 * Rahmen in der Spur (6 px je Seite) - als eigene Variable, damit
	 * assets/werkseite.js dieselbe Zahl liest (getComputedStyle), statt sie
	 * ein zweites Mal im Skript zu wiederholen.
	 */
	--k8sg-abstand: 6px;
	/*
	 * Dieselbe Rolle fuer die Bildhoehe (N2): assets/werkseite.js misst den
	 * TATSAECHLICH verfuegbaren Platz (Fensterhoehe minus Leiste, Werkangabe,
	 * Blaetterhinweis, Fussbereich und deren Abstaende) und schreibt ihn
	 * hierher. Ohne JavaScript bleibt die Variable unbestimmt - der
	 * Vorgabewert unten in .k8sg-bild-wrapper laesst den Hoehenanteil der
	 * Formel dann wirkungslos (siehe dortiger Kommentar).
	 */
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

/*
 * Neuer Lauf, sperrender Befund 1 (am Bildschirm beanstandet: der
 * Stimmknopf stand neben dem Dankfeld und blieb anklickbar). Das Skript
 * setzt [hidden] korrekt, aber Klassenregeln wie .k8sg-stimmknopf mit
 * display:flex schlagen sonst die Browser-Vorgabe fuer [hidden]
 * (display:none). Eine einzige Regel mit hoher Spezifitaet, nicht je
 * Element: [hidden] gewinnt auf dieser Seite immer.
 */
[hidden] {
	display: none !important;
}

body.k8sg-werkseite-body {
	margin: 0;
	padding: 0;
	min-height: 100vh;
	background: var(--k8sg-bg);
	color: var(--k8sg-text);
	font-family: 'Hanken Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	/*
	 * Einzige freigegebene Zeile in dieser sonst unberuehrten Datei (Nutzer-
	 * Freigabe, Nachtrag S7 zum Auftrag "Die Uebersichtsseite"): Samsung
	 * Internet faerbt die Seite im Dunkelmodus um (Leiste rot statt orange,
	 * Papiergrund fast schwarz) - color-scheme:light bewirkt dort NACHWEISLICH
	 * nichts. Das ist eine gemessene Nutzererfahrung aus mehreren fruehreren
	 * Projekten, mehrere Stunden erfolglos gesucht, keine Vermutung. Die Zeile
	 * steht trotzdem: Sie kann in anderen Browsern (Chrome, iOS) wirken und
	 * kostet nichts. Keine weiteren Versuche gegen den Dunkelmodus - keine
	 * !important-Ketten, kein filter, keine Media-Query-Akrobatik, kein Umbau
	 * der Farbvariablen: das hat der Nutzer ausdruecklich ausgeschlossen.
	 */
	color-scheme: light;
}

.k8sg-seite {
	display: flex;
	flex-direction: column;
	/* Nachbesserungsrunde 3, nachrangiger Befund 2 (Gegenbeweis-Urteil, Fund
	   8): KEIN min-height:100vh hier - das war eine eigene Wahl dieses
	   Kastens, keine Vorgabe des Auftrags, und 100vh ist auf einem Telefon
	   die GROSSE Ansicht (groesser als der sichtbare Bereich, solange die
	   Adresszeile steht). Mit erzwungener Mindesthoehe wurde der Fussbereich
	   (mit dem Stimmknopf) unter den sichtbaren Rand geschoben. Ohne sie ist
	   die Seite genau so hoch wie ihr Inhalt, und der Fussbereich folgt
	   direkt auf den Blaetterhinweis. */
	max-width: 480px;
	margin: 0 auto;
	background: var(--k8sg-bg);
	position: relative;
	/*
	 * Neuer Lauf, sperrender Befund (am Bildschirm gefunden, bei 360/390/430
	 * px Fensterbreite: Werknummer, rechte Blaetterflaeche, die rechte
	 * Haelfte des Knopfes und "Alle Werke" fehlten - ohne Scrollleiste, ohne
	 * Fehler). Ursache war ein "overflow-x: hidden" genau hier: Es hatte
	 * keinen im Auftrag oder anderswo in dieser Datei benannten Zweck, und
	 * es hat einen echten Layoutfehler unsichtbar gemacht statt ihn zu
	 * zeigen - eine Zeile wie ein Waechter mit verbundenen Augen. Ohne sie
	 * meldet sich eine kuenftige Ueberbreite als sichtbare, waagerechte
	 * Scrollleiste, nicht als lautlos verschwundenes Bedienelement.
	 */
}

.k8sg-leiste {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	height: 64px;
	padding: 0 16px;
	background: var(--k8sg-orange);
	flex-shrink: 0;
}

.k8sg-leiste-logo {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.k8sg-leiste-logo img {
	width: 32px;
	height: 32px;
	display: block;
	flex-shrink: 0;
}

.k8sg-leiste-titel,
.k8sg-leiste-nr {
	font-size: 13px;
	line-height: 1.3;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--k8sg-leiste-text);
	white-space: nowrap;
}

.k8sg-leiste-titel {
	overflow: hidden;
	text-overflow: ellipsis;
}

.k8sg-inhalt {
	display: flex;
	flex-direction: column;
	align-items: center;
	/*
	 * assets/werkseite.js setzt fuer diesen Bereich eine eigene Mindesthoehe
	 * (Fensterhoehe minus Leiste und Fussbereich, siehe dortiger Kommentar
	 * an bildhoeheAnpassen()). Reicht das Bild wegen des Breitendeckels in
	 * .k8sg-bild-wrapper nicht bis zu dieser Hoehe, bleibt .k8sg-inhalt
	 * trotzdem so hoch - justify-content:center verteilt die dann uebrige
	 * Luecke zur Haelfte ueber dem Bild und zur Haelfte unter der
	 * Werkangabe, statt sie unterhalb des Fussbereichs als Loch am
	 * Fensterende stehen zu lassen.
	 */
	justify-content: center;
	/*
	 * KEINE seitliche Polsterung mehr hier - .k8sg-bildbereich muss randlos
	 * bis an den Fensterrand reichen, sonst sitzen die Tasten nicht bei
	 * x=0/x=Breite-56. Die Polsterung wandert zu .k8sg-werkangabe, dem
	 * einzigen Geschwister, das sie noch braucht.
	 *
	 * padding-bottom 10px haelt den Abstand zum Fussbereich auch dann ein,
	 * wenn .k8sg-inhalt genau so hoch wird wie sein Inhalt (kein Ueberschuss
	 * zum Verteilen) - derselbe Mindestabstand wie zwischen Bild und
	 * Werkangabe (gap, unten).
	 */
	padding: 12px 0 10px 0;
	gap: 10px;
	flex: 1 0 auto;
}

.k8sg-bildbereich {
	/*
	 * Auftrag "Das Wischen sichtbar machen", Abschnitt 4/6: Die Tasten liegen
	 * jetzt UEBER den Raendern statt daneben (position:absolute unten bei
	 * .k8sg-blaettern) - dieser Bereich braucht deshalb keine Reihe mit drei
	 * nebeneinanderliegenden Kindern mehr, sondern nur noch position:relative
	 * als Bezugsrahmen und eine Zentrierung fuer das Fenster/den Bildrahmen.
	 */
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
}

.k8sg-blaettern {
	/*
	 * Ueberlagert den Rand des Bildbereichs, mit einem weichen Verlauf zum
	 * Bild hin (::before) statt einer eigenen Spalte daneben - Abschnitt 4,
	 * zweiter Punkt, und die Ausnahme in Abschnitt 6. Masse unveraendert aus
	 * Abschnitt 4a/N14: 56 px breit, volle Hoehe der Bildflaeche, mindestens
	 * 44 px. top:0;bottom:0 auf einer absolut positionierten Flaeche
	 * spannt sie ueber die volle Hoehe ihres Bezugsrahmens
	 * (.k8sg-bildbereich, position:relative) auf - unabhaengig von
	 * align-items, das nur normale Flexkinder betrifft. Der Bezugsrahmen
	 * selbst ist genau so hoch wie sein einziges Flusskind, .k8sg-fenster,
	 * das wiederum die Hoehe von .k8sg-bild-wrapper (Seitenverhaeltnis)
	 * traegt - die Taste ist dadurch immer genau so hoch wie das Bild.
	 */
	position: absolute;
	top: 0;
	bottom: 0;
	width: 56px;
	min-height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	padding: 0;
	margin: 0;
	background: transparent;
	color: var(--k8sg-text-stark);
	text-decoration: none;
	z-index: 4;
	-webkit-tap-highlight-color: transparent;
}

.k8sg-blaettern-links {
	left: 0;
}

.k8sg-blaettern-rechts {
	right: 0;
}

.k8sg-blaettern::before {
	/*
	 * Der weiche Verlauf zum Bild hin (Abschnitt 4), damit der Pfeil auf
	 * jedem Bild lesbar bleibt. Farbwert zeichengleich aus --k8sg-bg
	 * (#f2f0e8 = rgb(242,240,232)) abgeleitet - als rgba() statt ueber
	 * color-mix() geschrieben, weil color-mix() auf aelteren, im
	 * Ausstellungsbetrieb nicht auszuschliessenden Telefonbrowsern fehlt;
	 * bei einer Aenderung von --k8sg-bg muss diese Zeile von Hand mitziehen.
	 */
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(to right, rgba(242, 240, 232, .86), rgba(242, 240, 232, 0));
}

.k8sg-blaettern-rechts::before {
	background: linear-gradient(to left, rgba(242, 240, 232, .86), rgba(242, 240, 232, 0));
}

.k8sg-blaettern svg {
	position: relative;
	z-index: 2;
}

.k8sg-blaettern:active {
	color: var(--k8sg-orange);
}

/*
 * Auftrag "Das Wischen sichtbar machen", N6: zwei neue Ebenen zwischen
 * .k8sg-bildbereich und .k8sg-bild-wrapper. .k8sg-fenster schneidet ab
 * (overflow:hidden, immer vorhanden - PHP zeichnet sie leer mit nur dem
 * eigenen Bild darin, siehe templates/single-k8sg_werk.php), .k8sg-geste
 * bewegt die einmalige Andeutung (Abschnitt 2), .k8sg-spur die Bewegung
 * beim Wischen/Blaettern (Abschnitt 3). Getrennte Ebenen, weil beide sonst
 * denselben transform ueberschreiben wuerden - der Fehler aus der
 * Entstehung der Referenz, Abschnitt 0 dieses Auftrags.
 */
.k8sg-fenster {
	width: 100%;
	overflow: hidden;
}

.k8sg-geste {
	will-change: transform;
}

@keyframes k8sg-andeutung {
	0% { transform: translateX(0); }
	28% { transform: translateX(40px); }
	64% { transform: translateX(-40px); }
	100% { transform: translateX(0); }
}

.k8sg-geste.k8sg-geste-laeuft {
	/* Abschnitt 2: Weg 40px, Dauer 1,9s, Verzoegerung 500ms, ein Mal. */
	animation: k8sg-andeutung 1900ms cubic-bezier(.4, 0, .3, 1) 500ms 1;
}

@media (prefers-reduced-motion: reduce) {
	/* N12: die Andeutung entfaellt vollstaendig, das Blaettern bleibt -
	   dessen verkuerzte Dauer setzt assets/werkseite.js inline. */
	.k8sg-geste.k8sg-geste-laeuft {
		animation: none;
	}
}

.k8sg-spur {
	display: flex;
	align-items: center;
	/*
	 * Zentriert den einzigen Rahmen, den PHP ohne JavaScript zeichnet
	 * (Abschnitt 6: "ohne JavaScript aendert sich nichts"). Sobald das
	 * Skript die beiden Nachbarrahmen ergaenzt, uebernimmt es die Position
	 * selbst per transform (dieselbe Rechnung wie in der Referenz) und
	 * schaltet diese Regel dafuer bewusst auf flex-start um - sonst wuerden
	 * sich Flexbox-Zentrierung und die Verschiebung der Andeutung/des
	 * Wischens gegenseitig verrechnen.
	 */
	justify-content: center;
	will-change: transform;
}

.k8sg-bild-wrapper {
	/*
	 * Neuer Lauf, sperrender Befund 2 (am Bildschirm beanstandet: die
	 * Flaeche sprang beim Blaettern zwischen Hoch- und Querbild, und mit
	 * ihr der Stimmknopf darunter - "eine Stimme an der falschen Arbeit").
	 * Abschnitt 4b jetzt woertlich: die Flaeche traegt FEST das Verhaeltnis
	 * 1 : Wurzel(2) hochkant, unabhaengig vom Bild darin, und aendert ihre
	 * Hoehe nie.
	 *
	 * Auftrag "Das Wischen sichtbar machen", N14/N2: die Breitenformel ist
	 * neu. 112px = 2 x 56px Tippflaeche (sie liegt jetzt UEBER dem Rand,
	 * kein Zwischenraum mehr - Abschnitt 6, die eine benannte Ausnahme).
	 * 368px = 480px Seiten-Hoechstbreite minus 112px, derselbe Deckel wie im
	 * sizes-Attribut der Vorlage. Der Hoehenanteil ersetzt die alte feste
	 * 46vh-Rechnung durch --k8sg-bildhoehe (N2: "der tatsaechlich
	 * verfuegbare Platz", per dvh/getBoundingClientRect in
	 * assets/werkseite.js gemessen, NICHT geschaetzt - vh haette hier
	 * wieder dieselbe Luecke aufgerissen, die den Abstimmknopf frueher
	 * schon einmal unter den Rand geschoben hat). Der Vorgabewert 9999px
	 * greift nur, solange kein JavaScript laeuft: Der Hoehenanteil ist dann
	 * wirkungslos, die Breite bleibt vom vw-/368px-Anteil bestimmt - eine
	 * bewusste, im Bericht genannte Vereinfachung fuer den seltenen
	 * No-JS-Fall.
	 */
	width: min(calc(100vw - 112px), calc(var(--k8sg-bildhoehe, 9999px) / 1.41421356237), 368px);
	aspect-ratio: 1 / 1.41421356237;
	/*
	 * display:flex statt des vorherigen position:relative - einzig dafuer,
	 * damit das Bild darunter per width/height:100% exakt auf diese Flaeche
	 * gestreckt werden kann (Begruendung dort). Die Vorgabe align-items:
	 * stretch reicht, kein eigenes align-items noetig.
	 *
	 * War zwischenzeitlich display:grid (gleiche Rechnung, gleiches
	 * gemessenes Ergebnis bei Breite/Hoehe von Flaeche und Bild) - GEMESSEN
	 * verworfen: Im eigenen Kopftest blieb mit display:grid das Querbild in
	 * gut der Haelfte der Laeufe ungemalt (nur die Schraffur sichtbar),
	 * obwohl Layoutmasse und geladenes Bild nachweislich korrekt waren
	 * (Belege im Bericht dieser Runde). Mit display:flex bei sonst
	 * identischer Rechnung lief derselbe Kopftest fuenfmal hintereinander
	 * mit je frischem Profil fehlerfrei durch, bei allen drei Werken. Ob
	 * allein das Strecken oder erst sein Zusammenspiel mit Grid die
	 * Ursache ist, wurde nicht weiter zerlegt - gemessen und verworfen
	 * wurde Grid, nicht das Strecken selbst.
	 */
	display: flex;
	border: 1px solid var(--k8sg-haarlinie);
	overflow: hidden;
	/*
	 * Neuer Lauf, am Bildschirm beanstandet: eine leere Flaeche mit duenner
	 * Linie liest sich wie ein fehlerhaft geladenes Bild, nicht wie
	 * absichtlicher Platz. Wert zeichengleich aus
	 * features/5_werkseite/referenz/03-werkseite-mit-token.html uebernommen,
	 * wo die leere Bildflaeche ihn als Platzhalter traegt. Sichtbar bleibt
	 * sie dort, wo das Bild die Flaeche nicht vollstaendig deckt - beim
	 * Querbild als Balken oben und unten (Abnahmezeile 27), bei fehlendem
	 * Bild ueberall (Abschnitt 4b).
	 */
	background: repeating-linear-gradient(45deg, #e9e6db 0 10px, #f2f0e8 10px 20px);
	/*
	 * Auftrag "Das Wischen sichtbar machen", N14: 6px Abstand je Seite
	 * zwischen den Rahmen in der Spur.
	 */
	margin: 0 var(--k8sg-abstand);
	/*
	 * GEAENDERT gegenueber dem vorigen Lauf: JETZT flex-shrink:0, aus einem
	 * anderen Grund, als frueher dagegen sprach. Der fruehere Befund (siehe
	 * Git-Historie dieser Datei) betraf eine gemeinsame Zeile mit den hart
	 * auf 56px angeschlagenen Blaetterflaechen - die gibt es nicht mehr, sie
	 * liegen jetzt absolut positioniert UEBER dem Rand (siehe
	 * .k8sg-blaettern), nicht mehr als Flex-Geschwister in dieser Zeile.
	 * .k8sg-bild-wrapper liegt jetzt ausschliesslich in .k8sg-spur - dort
	 * MUSS die Flaeche ihre berechnete Breite behalten, auch wenn das
	 * Skript zwei weitere Rahmen ergaenzt und die Spur dadurch breiter wird
	 * als das Fenster: Genau dieses kontrollierte Ueberstehen faengt
	 * .k8sg-fenster mit overflow:hidden ab (Abschnitt 3/N6), ein
	 * nachgebender Rahmen wuerde die Rechnung der Wisch-Bewegung verfaelschen.
	 */
	flex-shrink: 0;
}

.k8sg-bild-wrapper img {
	/*
	 * Neuer Lauf, am Bildschirm beanstandet: ein sichtbarer Innenabstand
	 * ringsum, obwohl ein A2-Hochbild dasselbe Verhaeltnis wie die Flaeche
	 * hat und sie deshalb randlos fuellen soll (Abnahmezeile 28). Ursache:
	 * max-width/max-height:100% zentriert ueber Flexbox liess bei einem
	 * Seitenverhaeltnis, das dem der Flaeche nur SEHR nahe (nicht exakt)
	 * entspricht, einen schmalen Rand. width/height:100% im Elternteil
	 * (oben) zusammen mit object-fit:contain (bleibt) streckt das Bild exakt
	 * auf die Flaeche und ueberlaesst das Einpassen ausschliesslich
	 * object-fit - ohne eigene, zusaetzliche Rechnung, die einen Rand
	 * uebrig lassen koennte.
	 *
	 * Nachbesserung (Rueckmeldung mit eigener Messung): Bei display:grid
	 * als Elternteil blieb das Querbild im Kopftest wiederholt ungemalt -
	 * siehe Begruendung und Messwerte am Elternteil. Diese Regel selbst
	 * (width/height:100%, object-fit:contain) ist unveraendert richtig;
	 * geaendert hat sich nur das display des Elternteils.
	 */
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.k8sg-werkangabe {
	width: 100%;
	max-width: 320px;
	/*
	 * .k8sg-inhalt hat seine seitliche Polsterung an .k8sg-bildbereich
	 * abgegeben (dort noetig, damit die Tasten bei x=0 sitzen) - dieses
	 * Element traegt sie seither selbst, box-sizing:border-box (global
	 * gesetzt) zaehlt sie in die obige max-width mit ein.
	 */
	padding: 0 16px;
	flex-shrink: 0;
	overflow: hidden;
	/*
	 * Person und Titel wechseln beim Wischen ihren Text, ohne dass die
	 * Seite neu geladen wird - dabei darf sich die Hoehe der Werkangabe
	 * nicht mit der Textlaenge aendern, sonst springt der Bildrahmen
	 * darueber bei jedem Wechsel (assets/werkseite.js misst dessen
	 * verfuegbare Hoehe nur einmal je Zustand, nicht bei jedem Wisch neu).
	 * Das Fach ist deshalb FEST 96px hoch: 3 Zeilen zu je 24px fuer Person
	 * und Titel zusammen, plus 4px Abstand und eine 20px-Zeile fuer die
	 * Technik. Wie sich die drei Zeilen zwischen Person und Titel
	 * aufteilen, setzt assets/werkseite.js (werkangabeZeilenAnpassen()) -
	 * diese feste Gesamthoehe aendert sich dabei nie.
	 */
	height: 96px;
}

.k8sg-werk-person,
.k8sg-werk-titel {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
	overflow-wrap: anywhere;
}

.k8sg-werk-person {
	font-size: 20px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: -0.01em;
	line-height: 24px;
	color: var(--k8sg-text-stark);
	-webkit-line-clamp: 2;
}

.k8sg-werk-titel {
	font-size: 18px;
	font-weight: 700;
	line-height: 24px;
	/*
	 * Bewusst nicht --k8sg-text-stark: Der Titel soll neben der Person
	 * zurücktreten, ein eigener, gedämpfterer Farbwert statt der starken
	 * Textfarbe der Person setzt diesen Unterschied.
	 */
	color: #555;
	/*
	 * Wie viele der drei gemeinsamen Zeilen der Titel bekommt, haengt davon
	 * ab, wie viele die Person tatsaechlich braucht - assets/werkseite.js
	 * setzt diese Eigenschaft je Werk neu (werkangabeZeilenAnpassen()); 2 ist
	 * nur der Vorgabewert, solange das Skript noch nicht gelaufen ist.
	 */
	-webkit-line-clamp: var(--k8sg-titel-zeilen, 2);
}

/*
 * -webkit-line-clamp ist trotz des Praefix inzwischen auch in Firefox und im
 * mobilen Chrome verbreitet unterstuetzt; ein Browser ohne diese Eigenschaft
 * zeigt Person und Titel ungekuerzt und behaelt trotzdem die reservierte
 * Fachhoehe (overflow:hidden am Fach greift auch dort), lediglich das
 * Abschneiden mit "..." entfaellt dann.
 */

.k8sg-werk-technik {
	display: block;
	margin-top: 4px;
	font-size: 14px;
	line-height: 20px;
	font-weight: 400;
	color: var(--k8sg-text-gedaempft);
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.k8sg-fussbereich {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 10px 16px 14px 16px;
	background: var(--k8sg-bg);
	border-top: 1px solid var(--k8sg-haarlinie);
	flex-shrink: 0;
}

.k8sg-feld {
	padding: 8px 12px;
	background: var(--k8sg-feld-bg);
	border: 1px solid var(--k8sg-haarlinie);
	font-size: 14px;
	line-height: 20px;
	color: var(--k8sg-text);
}

.k8sg-feld strong {
	color: var(--k8sg-text-stark);
	font-weight: 700;
}

.k8sg-stimmknopf {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 44px;
	padding: 15px 28px;
	background: var(--k8sg-orange);
	color: var(--k8sg-text-stark);
	border: 2px solid transparent;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1;
	font-family: inherit;
	cursor: pointer;
}

.k8sg-stimmknopf:hover {
	background: var(--k8sg-orange-hover);
}

.k8sg-stimmknopf:disabled {
	opacity: 0.6;
	cursor: default;
}

.k8sg-fusszeile {
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: 13px;
	color: var(--k8sg-text-schwach);
}

.k8sg-fusszeile-links:empty {
	display: none;
}

.k8sg-alle-werke-knopf {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	border: 2px solid var(--k8sg-text-stark);
	color: var(--k8sg-text-stark);
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.k8sg-alle-werke-knopf:hover {
	background: var(--k8sg-feld-bg);
}