@charset "UTF-8";

/* ==========================================================================
   Dimension Platzstatus: Frontend Stylesheet
   Datei: assets/css/platzstatus.css
   Gestaltet ausschließlich den Inhalt innerhalb der vier Avada Kacheln.
   Die Kachel selbst, also Rahmen, Schatten, Überschrift und Icon, kommt vom
   Theme und wird hier bewusst nicht angefasst.

   Aufbau der Datei
   1.  Anpassbare Variablen
   2.  Grundgerüst der Box
   3.  Statuszeilen mit Label und Pille (Box 1 und Box 2)
   4.  Die Pille
   5.  Sekretariat (Box 3)
   6.  Kontakt (Box 4)
   7.  Buttons und Links
   8.  Fokus und Tastaturbedienung
   9.  Hilfsklassen
   10. Enge Kacheln und kleine Bildschirme
   11. Reduzierte Bewegung
   12. Erzwungene Farben, Kontrastmodus von Windows
   13. Druckausgabe

   Grundregeln dieser Datei
   Jeder Selektor beginnt mit .dps, damit nichts in das Theme ausblutet.
   Es wird keine Schriftfamilie gesetzt, die Typografie bleibt beim Theme.
   Es wird kein !important verwendet.
   ========================================================================== */


/* ==========================================================================
   1. Anpassbare Variablen

   Alle Farben, Abstände, Radien und Schriftgrößen stehen hier an einer
   Stelle. Wer die Optik ändern will, ändert nur diesen Block. Ein einzelner
   Wert lässt sich auch pro Box überschreiben, zum Beispiel so:

       .dps--sekretariat { --dps-abstand-block: 1.25rem; }

   Kontrastwerte nach WCAG 2.1, gerechnet auf die tatsächlich verwendete
   Kombination aus Textfarbe und Hintergrund, unabhängig zweimal nachgerechnet:

       Pille grün    #155D33 auf #E3F1E7 = 6,81 zu 1   (Anforderung 4,5)
       Pille rot      #8C1C1C auf #FBE7E7 = 7,70 zu 1   (Anforderung 4,5)
       Link Weinrot   #7B1E2B auf #FFFFFF = 10,18 zu 1
       Link überfahren #5C1622 auf #FFFFFF = 13,18 zu 1
       Link gefüllt  #FFFFFF auf #7B1E2B = 10,18 zu 1
       Hinweistext    #5F6B66 auf #FFFFFF = 5,55 zu 1
       Fokusring      #1F4E3D auf #FFFFFF = 9,48 zu 1   (Grafik, Anforderung 3)
       Punkt grün    #2E7D4F auf #FFFFFF = 5,05 zu 1   (Grafik, Anforderung 3)
       Punkt rot      #B02A2A auf #FFFFFF = 6,54 zu 1   (Grafik, Anforderung 3)

   Beide Pillenfarben liegen deutlich über der Anforderung. Der Puffer ist
   Absicht, damit ein später geänderter Kachelhintergrund die Lesbarkeit
   nicht sofort kippt. Die Pillenfläche selbst deckt den Kachelgrund voll ab,
   ein anderer Kachelhintergrund ändert die Textkontraste also nicht.

   Bewusste Entscheidung zu den Randlinien der Pillen: Sie erreichen die
   3 zu 1 Regel nicht (grün 1,94 zu 1, rot 2,61 zu 1 gegen Weiß). Das ist
   zulässig, weil die Randlinie hier reine Dekoration ist. Den Zustand trägt
   allein das Wort in der Pille, und dieses Wort liegt mit 6,81
   beziehungsweise 7,70 zu 1 weit über der Anforderung. Wer die Ränder
   trotzdem auf 3 zu 1 heben möchte, setzt --dps-pille-gruen-rand auf #529E70
   (3,24 zu 1) und --dps-pille-rot-rand auf #CA7373 (3,38 zu 1). Die Pillen
   wirken dann deutlich kräftiger.
   ========================================================================== */

.dps {
	/* Farben: neutrale Töne */
	--dps-farbe-gedaempft: #5f6b66;      /* Hinweistexte und Nebeninformationen */
	--dps-farbe-trennlinie: #e8ebe9;     /* feine Linie zwischen den Zeilen */
	--dps-farbe-aktiv-bg: #f3f7f4;       /* zarter Grund der laufenden Saison */

	/* Farben: Aktion, passend zu den vorhandenen Links der Seite */
	--dps-farbe-akzent: #7b1e2b;         /* dunkles Weinrot */
	--dps-farbe-akzent-dunkel: #5c1622;  /* Weinrot beim Überfahren */
	--dps-farbe-akzent-kontrast: #ffffff;/* Text auf gefüllter Fläche */
	--dps-farbe-fokus: #1f4e3d;          /* Fokusring, dunkles Grün */

	/* Farben: Pille geöffnet */
	--dps-pille-gruen-bg: #e3f1e7;
	--dps-pille-gruen-text: #155d33;
	--dps-pille-gruen-rand: #95c5a8;

	/* Farben: Pille geschlossen */
	--dps-pille-rot-bg: #fbe7e7;
	--dps-pille-rot-text: #8c1c1c;
	--dps-pille-rot-rand: #d68d8d;

	/* Farben: Statuspunkt im Sekretariat */
	--dps-punkt-gruen: #2e7d4f;
	/* Dieselbe Farbe noch einmal als Zahlentripel, weil der Pulsring sie mit
	   wechselnder Deckkraft braucht und rgba() keine Hexfarbe entgegennimmt.
	   Wer --dps-punkt-gruen ändert, passt diesen Wert bitte mit an. */
	--dps-punkt-gruen-rgb: 46, 125, 79;
	--dps-punkt-rot: #b02a2a;

	/* Schrift: skaliert stufenlos zwischen 320 und 1200 Pixeln Fensterbreite */
	--dps-schrift-groesse: clamp(0.875rem, 0.83rem + 0.23vw, 1rem);   /* 14 bis 16 Pixel */
	--dps-schrift-klein: clamp(0.75rem, 0.705rem + 0.227vw, 0.875rem);/* 12 bis 14 Pixel */
	--dps-schrift-pille: clamp(0.75rem, 0.7275rem + 0.114vw, 0.8125rem); /* 12 bis 13 Pixel */
	--dps-schrift-halbfett: 600;
	--dps-zeilenhoehe: 1.45;

	/* Schreibweise der Pille: none oder uppercase.
	   Bei uppercase wird die Pille breiter, in sehr schmalen Kacheln rutscht
	   sie dann früher in die zweite Zeile. Gemessen: "geschlossen" wächst von
	   105 auf 124 Pixel. Ab einer Kachel unter 180 Pixeln ist die Pille damit
	   breiter als die Kachel innen und reicht in den Innenabstand hinein, weil
	   sie selbst nie umbricht. */
	--dps-pille-schreibweise: none;
	--dps-pille-laufweite: 0.01em;

	/* Abstände */
	--dps-abstand-block: 1rem;           /* zwischen den Blöcken einer Box */
	--dps-abstand-spalten: 0.75rem;      /* zwischen Label und Pille */
	--dps-zeile-padding: 0.5rem;         /* oben und unten je Statuszeile */
	--dps-pille-padding-x: 0.7rem;       /* großzügig, damit die Pille atmet */
	--dps-pille-padding-y: 0.28rem;

	/* Umbruch der Statuszeilen
	   Ausgangsbreite der Beschriftung und damit der Punkt, an dem die Pille
	   umbricht: auto rechnet mit der vollen Textbreite, die Pille rutscht also
	   genau dann unter die Beschriftung, wenn beide zusammen nicht mehr in eine
	   Zeile passen. Zwei Alternativen stehen ohne Codeänderung bereit.
	   min-content rechnet nur mit dem längsten Textstück, hält die Pille damit
	   länger oben und lässt die Beschriftung daneben mehrzeilig werden, nimmt in
	   schmalen Kacheln aber einen Bindestrich als Trennstelle in Kauf. Eine feste
	   Länge wie 7rem löst den Umbruch immer bei derselben Breite aus, unabhängig
	   vom Text. Mehr dazu in Abschnitt 3. */
	--dps-label-basis: auto;

	/* Radien */
	--dps-radius-pille: 999px;           /* voller Eckenradius */
	--dps-radius-weich: 8px;             /* Flächen, passend zur Kachel */

	/* Linien, Punkt und Bewegung */
	--dps-rand-staerke: 1px;
	--dps-punkt-groesse: 0.6rem;         /* Statuspunkt im Sekretariat */
	--dps-fokus-staerke: 2px;
	--dps-fokus-abstand: 3px;
	--dps-tempo: 160ms;
	--dps-pfeil: "\2192";                /* Pfeil nach rechts am Textlink */

	font-size: var(--dps-schrift-groesse);
	line-height: var(--dps-zeilenhoehe);
}


/* ==========================================================================
   2. Grundgerüst der Box

   Farbe und Schriftfamilie werden geerbt. Gesetzt wird nur, was das Theme
   sonst mit eigenen Listenstilen stören würde.

   Bewusst ohne eigene Regel bleiben die Klassen dps--platz, dps--info,
   dps--sekretariat, dps--kontakt sowie dps-kontakt-zeile--mail und
   dps-kontakt-zeile--adresse. Sie kommen aus dem Markup und stehen als
   Ansatzpunkte bereit, falls später eine einzelne Box abweichen soll. Ein
   Beispiel: .dps--kontakt { --dps-zeile-padding: 0.65rem; } lockert nur die
   Kontaktbox auf, ohne die anderen drei anzufassen.
   ========================================================================== */

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

.dps > *:first-child {
	margin-top: 0;
}

.dps > *:last-child {
	margin-bottom: 0;
}

.dps .dps-liste,
.dps .dps-zeiten,
.dps .dps-kontakt-liste {
	list-style: none;
	margin: 0;
	padding: 0;
}

.dps .dps-liste > li,
.dps .dps-zeiten > li,
.dps .dps-kontakt-liste > li {
	list-style: none;
	margin: 0;
}

.dps .dps-liste > li::before,
.dps .dps-zeiten > li::before,
.dps .dps-kontakt-liste > li::before {
	content: none;
}


/* ==========================================================================
   3. Statuszeilen mit Label und Pille (Box 1 Platzstatus, Box 2 Informationen)

   Links steht das Label, rechts die Pille, dazwischen liegt der Abstand. Das
   Label darf umbrechen, die Pille niemals. Sie behält ihre Breite und rutscht
   als Ganzes in die nächste Zeile, wenn es wirklich zu eng wird.
   ========================================================================== */

.dps .dps-zeile {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	column-gap: var(--dps-abstand-spalten);
	row-gap: 0.3rem;
	padding-top: var(--dps-zeile-padding);
	padding-bottom: var(--dps-zeile-padding);
}

/* Die Trennlinie sitzt oben an jeder Zeile außer der ersten. Dadurch gibt es
   weder eine Linie über der ersten noch unter der letzten Zeile. */
.dps .dps-zeile + .dps-zeile {
	border-top: var(--dps-rand-staerke) solid var(--dps-farbe-trennlinie);
}

.dps .dps-liste > .dps-zeile:first-child {
	padding-top: 0;
}

.dps .dps-liste > .dps-zeile:last-child {
	padding-bottom: 0;
}

/* Den Zeilenumbruch entscheidet Flexbox an der Ausgangsbreite der Elemente und
   nicht an ihrer geschrumpften Breite. Genau hier lag der Fehler: Die
   Beschriftung hatte als Ausgangsbreite einen festen Wert von 7rem. Damit
   musste die Pille auch dann nach unten, wenn die Beschriftung in Wahrheit viel
   kürzer war. Die Beschriftung selbst wurde dabei in eine Spalte von 7rem
   gedrückt, in der sie mitten im Wort brach.

   Jetzt zählt die natürliche Textbreite. Daraus ergibt sich die gewünschte
   Reihenfolge von allein: Beschriftung und Pille stehen so lange nebeneinander,
   wie sie zusammen in die Zeile passen. Passen sie nicht mehr, wandert die
   Pille als Ganzes nach unten und bleibt dort über margin-left: auto
   rechtsbündig. Die Beschriftung bekommt dann die volle Zeilenbreite und bricht
   höchstens am Leerzeichen. Wer die Pille länger oben halten will, stellt
   --dps-label-basis auf min-content, siehe Abschnitt 1.

   word-break, overflow-wrap und hyphens stehen ausdrücklich auf ihren ruhigen
   Werten, damit die Beschriftung nicht innerhalb eines Wortes bricht. Themes
   setzen diese Eigenschaften gern auf Elternelementen und ein geerbter Wert
   verliert gegen jede eigene Angabe am Element selbst. Deshalb reicht der
   einfache Selektor und ein !important ist nicht nötig. Gemessen im Browser:
   Gegen geerbtes hyphens: auto, word-break: break-word und overflow-wrap:
   anywhere setzt sich dieser Block durch. Nur ein Themeselektor mit ID würde
   ihn schlagen. Dann wäre .dps um die Kachelklasse zu erweitern, statt
   !important zu setzen.

   Eine gemessene Grenze bleibt: Chromium trennt an einem echten Bindestrich
   auch dann, wenn hyphens und word-break es verbieten. Das greift erst, wenn
   ein einzelnes Wort breiter ist als die ganze Zeile, also unterhalb von rund
   180 Pixeln Kachelbreite. Wer das auch dort ausschließen muss, schreibt im
   Adminfeld einen geschützten Bindestrich U+2011 statt des normalen. */
.dps .dps-label {
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: var(--dps-label-basis);
	word-break: keep-all;
	overflow-wrap: normal;
	-webkit-hyphens: none;
	hyphens: none;
	/* Der gierige Zeilenumbruch füllt die erste Zeile sonst bis zum Bindestrich
	   und trennt "Bahnen 11-13, 15-18" zu "15-" und "18". Mit pretty wählt der
	   Browser die ruhigere Aufteilung am Leerzeichen, gemessen bei 180 Pixeln
	   Kachelbreite. Browser ohne diese Eigenschaft ignorieren die Zeile. */
	text-wrap: pretty;
}

.dps .dps-pille {
	/* Flexelemente werden zu Blockelementen, die Grundlinie der Pille bleibt
	   dabei die Grundlinie ihres Textes. Sie sitzt also auf derselben Linie
	   wie das Label. */
	flex: 0 0 auto;
	margin-left: auto;
}


/* ==========================================================================
   4. Die Pille

   In der Pille steht nur das Wort, also geöffnet oder geschlossen. Die Farbe
   verstärkt diese Aussage, sie trägt sie nicht.

   Hinweis zur Barrierefreiheit für spätere Prüfungen: Der Zustand wird
   ausschließlich über das Wort in der Pille getragen, nicht über die Farbe.
   Das ist zulässig und erfüllt die Anforderung, weil die Information im Text
   steht und nicht allein farblich kodiert ist. Ein zusätzlicher Formmarker
   ist deshalb nicht nötig. Hier fehlt nichts.
   ========================================================================== */

.dps .dps-pille {
	display: inline-block;
	white-space: nowrap;
	padding: var(--dps-pille-padding-y) var(--dps-pille-padding-x);
	border: var(--dps-rand-staerke) solid transparent;
	border-radius: var(--dps-radius-pille);
	font-size: var(--dps-schrift-pille);
	font-weight: var(--dps-schrift-halbfett);
	line-height: 1.3;
	letter-spacing: var(--dps-pille-laufweite);
	text-transform: var(--dps-pille-schreibweise);
}

/* Geöffnet: hellgrüner Grund, dunkelgrüne Schrift. */
.dps .dps-pille--gruen {
	background-color: var(--dps-pille-gruen-bg);
	border-color: var(--dps-pille-gruen-rand);
	color: var(--dps-pille-gruen-text);
}

/* Geschlossen: hellroter Grund, dunkelrote Schrift. Die Randlinie ist reine
   Dekoration und gibt der Pille auf der weißen Kachel eine Kante. */
.dps .dps-pille--rot {
	background-color: var(--dps-pille-rot-bg);
	border-color: var(--dps-pille-rot-rand);
	color: var(--dps-pille-rot-text);
}


/* ==========================================================================
   5. Sekretariat (Box 3)

   Oben die Livezeile mit Punkt und Text, darunter die Zeiten je Saison,
   darunter der Hinweis in gedämpfter Farbe, ganz unten der Anruflink.
   ========================================================================== */

.dps .dps-live {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	margin: 0 0 var(--dps-abstand-block) 0;
	font-weight: var(--dps-schrift-halbfett);
}

.dps .dps-punkt {
	flex: 0 0 auto;
	width: var(--dps-punkt-groesse);
	height: var(--dps-punkt-groesse);
	border-radius: 50%;
	background-color: var(--dps-farbe-gedaempft);
	/* hält den Punkt optisch auf der Grundlinie des Textes */
	transform: translateY(0.05em);
}

.dps .dps-punkt--gruen {
	background-color: var(--dps-punkt-gruen);
	/* Der Puls ist bewusst sehr zurückhaltend: ein weicher Ring, der einmal
	   alle drei Sekunden nach außen läuft. Er zeigt, dass die Anzeige lebt,
	   ohne den Blick zu ziehen. */
	animation: dps-puls 3s ease-out infinite;
}

.dps .dps-punkt--rot {
	background-color: var(--dps-punkt-rot);
}

@keyframes dps-puls {
	0% {
		box-shadow: 0 0 0 0 rgba(var(--dps-punkt-gruen-rgb), 0.35);
	}
	70% {
		box-shadow: 0 0 0 0.5rem rgba(var(--dps-punkt-gruen-rgb), 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(var(--dps-punkt-gruen-rgb), 0);
	}
}

.dps .dps-live-text {
	min-width: 0;
}

.dps .dps-zeiten {
	margin-bottom: var(--dps-abstand-block);
}

/* Der negative Außenabstand zieht die Zeile genau so weit nach außen, wie der
   Innenabstand sie einrückt. Der Text der Zeitzeilen steht damit auf einer
   Flucht mit dem übrigen Boxeninhalt, und der zarte Grund der laufenden
   Saison reicht trotzdem etwas über den Text hinaus. */
.dps .dps-zeit {
	padding: 0.3rem 0.5rem;
	margin-left: -0.5rem;
	margin-right: -0.5rem;
	border-radius: var(--dps-radius-weich);
}

.dps .dps-zeit-label {
	font-weight: var(--dps-schrift-halbfett);
	margin-right: 0.15em;
}

.dps .dps-zeit-wert {
	white-space: nowrap;
}

/* Die laufende Saison bekommt einen zarten Grund und einen halbfetten Wert.
   Zusammen mit dem Kontrast zum weißen Kachelgrund reicht das aus, ohne die
   Zeile wie eine Schaltfläche wirken zu lassen. */
.dps .dps-zeit--aktiv {
	background-color: var(--dps-farbe-aktiv-bg);
}

.dps .dps-zeit--aktiv .dps-zeit-wert {
	font-weight: var(--dps-schrift-halbfett);
}

.dps .dps-hinweis {
	margin: 0 0 var(--dps-abstand-block) 0;
	color: var(--dps-farbe-gedaempft);
	font-size: var(--dps-schrift-klein);
}


/* ==========================================================================
   6. Kontakt (Box 4)

   Eine ruhige Liste aus Telefon, E-Mail und Anschrift. Telefon und E-Mail
   sind Links im Weinrot der Seite, die Anschrift bleibt Fließtext.
   ========================================================================== */

.dps .dps-kontakt-liste {
	margin-bottom: var(--dps-abstand-block);
}

.dps .dps-kontakt-zeile {
	padding-top: var(--dps-zeile-padding);
	padding-bottom: var(--dps-zeile-padding);
	overflow-wrap: break-word;
}

.dps .dps-kontakt-zeile + .dps-kontakt-zeile {
	border-top: var(--dps-rand-staerke) solid var(--dps-farbe-trennlinie);
}

.dps .dps-kontakt-liste > .dps-kontakt-zeile:first-child {
	padding-top: 0;
}

.dps .dps-kontakt-liste > .dps-kontakt-zeile:last-child {
	padding-bottom: 0;
}

/* Der Selektor ist bewusst zweistufig, damit die Linkfarbe sicher gegen die
   allgemeinen Linkregeln des Themes greift, ohne !important zu verwenden. */
.dps .dps-kontakt-zeile a {
	color: var(--dps-farbe-akzent);
	text-decoration: none;
	transition: color var(--dps-tempo) ease;
}

.dps .dps-kontakt-zeile a:hover {
	color: var(--dps-farbe-akzent-dunkel);
	text-decoration: underline;
}

/* Die Telefonnummer ist die wichtigste Angabe der Box und darf etwas
   kräftiger stehen als die übrigen Zeilen. Die Adresszeile bekommt bewusst
   keine eigene Regel, sie erbt Farbe und Schrift vom Theme. */
.dps .dps-kontakt-zeile--telefon a {
	font-weight: var(--dps-schrift-halbfett);
}


/* ==========================================================================
   7. Buttons und Links

   Standard ist der Textlink mit Pfeil, so wie die vorhandenen Links der Seite.
   Der Pfeil kommt aus dem CSS und wandert beim Überfahren drei Pixel nach
   rechts. Wer lieber eine Schaltfläche möchte, ergänzt im Markup die Klasse
   dps-button--flaeche.
   ========================================================================== */

.dps a.dps-button {
	display: inline-block;
	margin-top: 0.25rem;
	color: var(--dps-farbe-akzent);
	font-weight: var(--dps-schrift-halbfett);
	text-decoration: none;
	transition: color var(--dps-tempo) ease;
}

.dps a.dps-button::after {
	content: var(--dps-pfeil);
	display: inline-block;
	margin-left: 0.4em;
	transform: translateX(0);
	transition: transform var(--dps-tempo) ease;
}

.dps a.dps-button:hover {
	color: var(--dps-farbe-akzent-dunkel);
	text-decoration: none;
}

.dps a.dps-button:hover::after,
.dps a.dps-button:focus::after {
	transform: translateX(3px);
}

/* Gefüllte Variante, falls die Schaltfläche gewünscht ist. */
.dps a.dps-button--flaeche {
	padding: 0.5rem 1rem;
	border-radius: var(--dps-radius-weich);
	background-color: var(--dps-farbe-akzent);
	color: var(--dps-farbe-akzent-kontrast);
	transition: background-color var(--dps-tempo) ease;
}

.dps a.dps-button--flaeche:hover {
	background-color: var(--dps-farbe-akzent-dunkel);
	color: var(--dps-farbe-akzent-kontrast);
}


/* ==========================================================================
   8. Fokus und Tastaturbedienung

   Der Fokusring ist zwei Pixel stark und hält Abstand zum Element, damit er
   auch auf der Pillenrundung und auf der gefüllten Schaltfläche sichtbar
   bleibt. Wer mit der Tastatur bedient, sieht dasselbe wie mit der Maus.
   ========================================================================== */

.dps a:focus {
	outline: var(--dps-fokus-staerke) solid var(--dps-farbe-fokus);
	outline-offset: var(--dps-fokus-abstand);
}

/* Ältere Browser ohne :focus-visible ignorieren diese Regel als Ganzes und
   behalten den Ring auch bei Mausklick. Das ist der sichere Weg herum. */
.dps a:focus:not(:focus-visible) {
	outline: none;
}

.dps a:focus-visible {
	outline: var(--dps-fokus-staerke) solid var(--dps-farbe-fokus);
	outline-offset: var(--dps-fokus-abstand);
}


/* ==========================================================================
   9. Hilfsklassen
   ========================================================================== */

/* Inhalt bleibt für Screenreader lesbar, ist aber optisch nicht vorhanden. */
.dps .dps-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}


/* ==========================================================================
   10. Enge Kacheln und kleine Bildschirme

   Die Statuszeilen brauchen hier keine eigene Regel mehr. Ihr Umbruch
   entscheidet sich in Abschnitt 3 an der tatsächlichen Textbreite und stellt
   sich damit auf jede Kachelbreite von allein ein.

   Gemessen in Chromium bei 16 Pixeln Basisschrift und der Systemschrift eines
   Themes, Kachel mit 24 Pixeln Innenabstand:
       Pille "geöffnet" 79,7, "geschlossen" 105,1, "erlaubt" 70,4,
       "verboten" 82,0 Pixel breit
       Beschriftung "Bahnen 1-10" 90,1, "Rasenabschläge" 118,9,
       "6-Loch-Kurzplatz" 127,9, "Bahnen 11-13, 15-18" 146,2 Pixel breit
       Spaltenabstand 12 Pixel

   Die Pille rutscht nach unten, sobald Beschriftung plus Spaltenabstand plus
   Pille breiter sind als die Kachel innen. In der echten Kachel des Kunden,
   270 Pixel außen und 220 Pixel innen, bleiben damit sieben der zehn Zeilen
   einzeilig, drei setzen die Pille darunter. Kein Wort bricht und nichts läuft
   über. Unterhalb von rund 180 Pixeln Kachelbreite ist ein einzelnes langes
   Wort breiter als die ganze Zeile. Dann bricht es am Bindestrich oder reicht,
   wenn es keinen hat, in den Innenabstand der Kachel hinein.

   Eine Warnung zu container-type, die diese Datei teuer bezahlt hat: Früher
   stand container-type: inline-size auf .dps selbst. Diese Eigenschaft schottet
   die eigene Breite gegen den Inhalt ab. Steht .dps in einem Umfeld, das seine
   Breite aus dem Inhalt zieht, dann fällt die Box damit auf null Breite. Im
   Browser nachgemessen sind das ein Flexkind ohne flex-grow, ein umflossenes
   Element, ein inline-block und eine Tabellenzelle in einer Tabelle mit
   automatischer Breite. In allen vier Fällen misst .dps 0 statt 220 Pixel,
   ohne diese Eigenschaft sind es überall 220 Pixel. Genau das ist beim Einbau
   in die Kachel passiert. Jede Zeile ist danach in drei
   Zeilen zerfallen, die Beschriftung mitten im Wort und die Pille linksbündig
   darunter. Der Container sitzt deshalb jetzt auf der Liste der Öffnungszeiten.
   Sie ist immer ein Blockelement im normalen Fluss und zieht ihre Breite nie
   aus dem Inhalt, kann also nicht zusammenfallen.
   ========================================================================== */

/* Sehr schmale Telefone: etwas weniger Innenabstand in der Pille und ein
   kleinerer Spaltenabstand, damit Beschriftung und Pille auch dort in einer
   Zeile bleiben. */
@media (max-width: 400px) {
	.dps {
		--dps-pille-padding-x: 0.6rem;
		--dps-abstand-spalten: 0.5rem;
	}
}

/* Die Öffnungszeit steht bewusst auf einer Zeile, sonst zerfällt eine Spanne
   wie "Di bis So, 9 bis 17 Uhr". In einer schmalen Kachel wäre sie damit breiter
   als die Kachel, dort darf sie deshalb umbrechen. Gefragt wird die Breite der
   Liste selbst und nicht die des Fensters, weil eine Kachel im Vierer Raster
   auch auf einem breiten Bildschirm schmal ist. Browser ohne Containerabfragen
   überspringen den Block und behalten die Zeile ohne Umbruch. */
@supports (container-type: inline-size) {
	.dps .dps-zeiten {
		container-type: inline-size;
		container-name: dpszeiten;
	}

	@container dpszeiten (max-width: 260px) {
		.dps .dps-zeit-wert {
			white-space: normal;
		}
	}
}


/* ==========================================================================
   11. Reduzierte Bewegung

   Wer im Betriebssystem weniger Bewegung eingestellt hat, bekommt keinen Puls
   und keine Übergänge. Die Anzeige bleibt inhaltlich vollständig.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.dps .dps-punkt--gruen {
		animation: none;
	}

	.dps a.dps-button,
	.dps a.dps-button::after,
	.dps a.dps-button--flaeche,
	.dps .dps-kontakt-zeile a {
		transition: none;
	}

	.dps a.dps-button:hover::after,
	.dps a.dps-button:focus::after {
		transform: none;
	}
}


/* ==========================================================================
   12. Erzwungene Farben

   Windows kennt einen Kontrastmodus, der eigene Farben durchsetzt. Flächen
   und Textfarben werden dann ersetzt, ein Element aus reiner Hintergrundfarbe
   wäre unsichtbar. Deshalb werden Punkt und Kanten hier ausdrücklich auf die
   Systemfarbe gelegt. Die Pille verliert in diesem Modus ihre Farbfläche und
   behält eine sichtbare Kante. Der Zustand bleibt lesbar, weil er im Wort
   steht.
   ========================================================================== */

@media (forced-colors: active) {
	.dps .dps-pille {
		border-color: CanvasText;
	}

	.dps .dps-punkt {
		border: 1px solid CanvasText;
	}

	.dps .dps-punkt--rot {
		background-color: CanvasText;
		forced-color-adjust: none;
	}

	.dps .dps-zeit--aktiv {
		border-left: 3px solid CanvasText;
		margin-left: 0;
		padding-left: 0.35rem;
	}
}


/* ==========================================================================
   13. Druckausgabe

   Auf Papier trägt Farbe nicht. Die Pillen werden deshalb zu Text mit
   Rahmen. Das Wort in der Pille sagt den Zustand auch in Schwarzweiß.
   ========================================================================== */

@media print {
	.dps .dps-pille {
		background-color: transparent;
		border: 1px solid #000000;
		color: #000000;
	}

	.dps .dps-punkt {
		background-color: transparent;
		border: 1px solid #000000;
		animation: none;
	}

	.dps .dps-punkt--rot {
		background-color: #000000;
	}

	.dps .dps-zeit--aktiv {
		background-color: transparent;
		border-left: 3px solid #000000;
		padding-left: 0.35rem;
		margin-left: 0;
	}

	.dps .dps-hinweis {
		color: #000000;
	}

	.dps a.dps-button,
	.dps a.dps-button--flaeche,
	.dps .dps-kontakt-zeile a {
		background-color: transparent;
		color: #000000;
		text-decoration: underline;
	}
}