/* ==========================================================
   style.css – Ragdolls de la Buena Estrella
   Gemeinsame Formatvorlage für alle Seiten.
   Hinweis: Kein Flexbox/Grid, damit Expression Web 4 die Seiten anzeigt.
   Die Handy-Regeln stehen ganz unten (Media Queries, nur im Browser testbar).
   Farben:  Blau #65859E  |  Dunkelblau #000066  |  Grau #DEDEDE  |  Dunkelrot #800000
   ========================================================== */

html, html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; padding: 0; }

body {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 10pt;
	line-height: 1.5;
	color: #000000;
	background-color: #ffffff;
}

/* Fotos so zeigen, wie sie gespeichert sind: manche alte Fotos tragen eine veraltete Dreh-Angabe (EXIF),
   die moderne Browser sonst ausführen – die Bilder stünden dann quer */
img { border: 0; image-orientation: none; }
#inhalt img { max-width: 100%; height: auto; }
.paar { text-align: center; }
/* im Tagebuch behalten die Fotos ihre Größe aus der Seite (width/height) */
.paar img { max-width: 450px; margin: 0 0.5% 6px 0.5%; }
.paar img:not(.tagebuch img) { width: 48.5%; }
p { margin: 0 0 1em 0; }
hr { border: 0; border-top: 1px solid #cccccc; margin: 18px 0; }

a { color: #4d6a82; }  /* dunkleres Blau für Textlinks (Kontrast 5,7:1, 14.11.2026) */
a:hover, a:focus { color: #000066; }

/* Überschriften: Verdana 12 pt fett in Blau */
h1, h2 {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12pt;
	font-weight: bold;
	color: #65859E;
	margin: 0 0 0.6em 0;
}
h2 { margin-top: 1.4em; }
h3 { font-family: Verdana, Geneva, sans-serif; font-size: 10pt; font-weight: bold; color: #65859E; margin: 1.2em 0 0.4em 0; }
.klein { font-size: 9pt; }

.zentriert { text-align: center; }
.grau { color: #6B6B6B; font-weight: bold; }
.hinweis { color: #6B6B6B; font-style: italic; }
.zeile:after, .wuerfe:after { content: ""; display: block; clear: both; }

/* ---------- Seitenrahmen ---------- */
#seite { max-width: 960px; margin: 0 auto; padding: 0 10px; }
#inhalt { padding: 22px 0 10px 0; }

#fuss {
	clear: both;
	text-align: center;
	font-size: 9pt;
	padding: 16px 0 26px 0;
	margin-top: 26px;
	border-top: 1px solid #DEDEDE;
}
#fuss .klein { margin-top: 6px; }
#fuss a { color: #4d6a82; text-decoration: none; }
#fuss a:hover { text-decoration: underline; }

/* ---------- Kopf mit Banner und Menü ---------- */
#kopf { padding-top: 10px; }
#kopf .banner { text-align: center; margin-bottom: 8px; }
#kopf .banner img { max-width: 100%; height: auto; }

.menue-schalter { position: absolute; left: -9999px; }
.menue-knopf, .menue-overlay, .menue-zu, .pfeil { display: none; }
.uschalter { position: absolute; left: -9999px; }
.knopftext { position: absolute; left: -9999px; }

#menue { list-style: none; margin: 0; padding: 0; background-color: #ffffff; border-bottom: 1px solid #DEDEDE; }
#menue:after { content: ""; display: block; clear: both; }
#menue li { margin: 0; padding: 0; position: relative; }
#menue > li { float: left; width: 14.28%; text-align: center; }

/* Hauptpunkte: nur Text, Großbuchstaben, goldene Linie beim Überfahren */
#menue > li > a {
	display: block;
	padding: 14px 4px 11px 4px;
	color: #4d6a82;
	font-size: 9.5pt;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	border-bottom: 3px solid transparent;
}
#menue > li:hover > a, #menue > li > a:focus { color: #000066; border-bottom-color: #CEA027; }

/* Untermenüs: am Desktop beim Überfahren (oder Tab-Taste) */
#menue ul {
	display: none;
	list-style: none;
	margin: 0;
	padding: 6px 0;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 240px;
	text-align: left;
	background-color: #ffffff;
	border-top: 3px solid #CEA027;
	border-left: 1px solid #DEDEDE;
	border-right: 1px solid #DEDEDE;
	border-bottom: 1px solid #DEDEDE;
	z-index: 50;
}
#menue li.rechts ul { left: auto; right: 0; }
#menue li:hover > ul { display: block; }
#menue li:focus-within > ul { display: block; }
#menue ul li { float: none; width: auto; text-align: left; }
#menue ul li a {
	display: block;
	color: #333333;
	padding: 8px 18px;
	text-decoration: none;
}
#menue ul li a:hover, #menue ul li a:focus { background-color: #f3f3f3; color: #000066; }

/* ---------- Startseite ---------- */
.spalte-text { float: left; width: 63%; text-align: center; }
.spalte-kacheln { float: right; width: 33%; text-align: center; }
.spalte-text img { max-width: 100%; height: auto; }
.kachel { margin: 0 0 18px 0; text-align: center; }
.kachel img { max-width: 100%; height: auto; }
.dreier { margin-top: 10px; }
.dreier:after { content: ""; display: block; clear: both; }
.dreier .kachel { float: left; width: 32%; margin: 0 2% 18px 0; }
.dreier .kachel:last-child { margin-right: 0; }
.aktuell {
	font-size: 12pt;
	font-weight: bold;
	font-style: italic;
	color: #CEA027;
	text-decoration: none;
}
.aktuell:hover { color: #800000; }

/* ---------- Kopfbild und Würfe-Listen ---------- */
.kopfbild { text-align: center; margin: 0 0 20px 0; }
.kopfbild img { max-width: 100%; height: auto; }

.kasten { border: 1px solid #bbbbbb; padding: 6px; margin: 0 0 26px 0; }
.kasten-kopf {
	background-color: #65859E;
	color: #ffffff;
	font-weight: bold;
	text-align: center;
	padding: 10px 8px 8px 8px;
	margin-bottom: 6px;
}
.kasten-kopf span { display: block; font-weight: normal; font-size: 9pt; margin-top: 2px; }

.wuerfe { list-style: none; margin: 0; padding: 0; }
.wuerfe li { float: left; width: 11.3%; margin: 0.6%; background-color: #DEDEDE; text-align: center; }
.wuerfe li a { display: block; padding: 6px 2px; color: #000000; text-decoration: underline; }
.wuerfe li a:hover { color: #800000; }

/* ---------- Eingangsseite ---------- */
.eingang { text-align: center; padding: 20px 10px; }
.eingang img { max-width: 100%; height: auto; }
.eingang .klein { font-size: 9pt; }

/* ==========================================================
   Handy und kleine Fenster
   ========================================================== */
@media (max-width: 800px) {

	/* Menüknopf: nur Symbol mit drei Strichen */
	.menue-knopf {
		display: block;
		width: 30px;
		padding: 16px 4px 22px 4px;
		cursor: pointer;
	}
	.balken {
		display: block;
		width: 28px;
		height: 3px;
		border-radius: 2px;
		background-color: #4d6a82;
		box-shadow: 0 9px 0 #4d6a82, 0 18px 0 #4d6a82;
	}
	.menue-schalter:focus + .menue-knopf { outline: 2px solid #CEA027; }

	/* Abdunkelung hinter dem Menü */
	.menue-overlay {
		display: none;
		position: fixed;
		top: 0; left: 0; right: 0; bottom: 0;
		background-color: rgba(0, 0, 0, 0.45);
		z-index: 90;
	}
	.menue-schalter:checked ~ .menue-overlay { display: block; }

	/* Schließen-Kreuz oben rechts im Menü */
	.menue-zu {
		display: none;
		position: fixed;
		top: 14px;
		right: 14px;
		width: 40px;
		height: 40px;
		cursor: pointer;
		z-index: 110;
	}
	.menue-zu:before, .menue-zu:after {
		content: "";
		position: absolute;
		top: 18px; left: 5px;
		width: 30px; height: 3px;
		background-color: #333333;
	}
	.menue-zu:before { transform: rotate(45deg); }
	.menue-zu:after { transform: rotate(-45deg); }
	.menue-schalter:checked ~ .menue-zu { display: block; }

	/* Menü fährt von rechts herein */
	#menue {
		display: block;
		position: fixed;
		top: 0; right: 0; bottom: 0;
		width: 82%;
		max-width: 340px;
		margin: 0;
		padding: 70px 0 30px 0;
		overflow-y: auto;
		background-color: #ffffff;
		border: 0;
		z-index: 100;
		visibility: hidden;
		transform: translateX(105%);
		transition: transform 0.25s ease, visibility 0.25s;
	}
	.menue-schalter:checked ~ #menue { visibility: visible; transform: translateX(0); }

	#menue > li { float: none; width: auto; text-align: left; position: relative; }
	#menue > li > a { padding: 15px 60px 15px 28px; font-size: 11pt; border-bottom: 0; }
	#menue > li:hover > a, #menue > li > a:focus { border-bottom: 0; }

	/* Pfeil zum Auf- und Zuklappen der Untermenüs */
	.pfeil { display: block; position: absolute; top: 0; right: 0; width: 56px; height: 52px; cursor: pointer; }
	.pfeil:after {
		content: "";
		position: absolute;
		top: 17px; left: 20px;
		width: 9px; height: 9px;
		border-right: 2px solid #333333;
		border-bottom: 2px solid #333333;
		transform: rotate(45deg);
	}
	.uschalter:checked + .pfeil:after { transform: rotate(-135deg); top: 22px; }

	#menue ul {
		display: none;
		position: static;
		min-width: 0;
		margin: 0 0 8px 28px;
		padding: 0;
		border: 0;
		border-left: 3px solid #CEA027;
	}
	#menue li:hover > ul { display: none; }
	#menue li > .uschalter:checked ~ ul { display: block; }
	#menue li.rechts ul { right: auto; }
	#menue ul li a { padding: 10px 14px; }

	.spalte-text, .spalte-kacheln { float: none; width: auto; }
	.dreier .kachel { float: none; width: auto; margin: 0 0 18px 0; }

	.wuerfe li { width: 22.8%; margin: 1.1%; }
}

@media (max-width: 420px) {
	.wuerfe li { width: 30.1%; margin: 1.6%; }
}

/* ---------- Seiten mit Bild und Text (Über uns, Kontakt, Hinweise) ---------- */
h1.kopfbild { margin: 0 0 20px 0; }
.bildtext { margin: 0 0 1em 0; }
.bildtext:after { content: ""; display: block; clear: both; }
.bildtext .bild { float: left; width: 44%; margin: 0; text-align: center; }
.bildtext .text { float: right; width: 53%; }
.bildtext.textlinks .bild { float: right; }
.bildtext.textlinks .text { float: left; }
.bildtext .bild img { max-width: 100%; height: auto; }
.bildtext .text p { margin-bottom: 1em; }

.hinweise { margin: 0 0 20px 0; }
.hzeile { display: table; table-layout: fixed; border-collapse: separate; border-spacing: 14px 0; width: calc(100% + 28px); margin: 0 -14px 14px -14px; }
.hkachel { display: table-cell; vertical-align: top; width: 50%; padding: 8px 8px 4px 8px; background-color: #F9E3C4; text-align: center; }
.hkachel img { max-width: 100%; height: auto; }
.hkachel p { margin: 6px 0 8px 0; }

@media (max-width: 800px) {
	.bildtext .bild, .bildtext .text,
	.bildtext.textlinks .bild, .bildtext.textlinks .text { float: none; width: 100%; }
	.bildtext .bild { margin-bottom: 1em; }
	.hzeile { display: block; width: auto; margin: 0; }
	.hkachel { display: block; width: auto; margin: 0 0 12px 0; }
}

.kursiv { font-style: italic; }
.anmerkung { font-size: 8pt; }

/* ---------- Bildergalerien und Bannerlisten (Paket 2) ---------- */
.galerie { text-align: center; margin: 0 0 12px 0; }
.galerie .karte { display: inline-block; vertical-align: top; width: 47.5%; margin: 0 0.5% 20px 0.5%; text-align: center; }
.galerie.drei .karte { width: 31%; }
.linkliste { text-align: center; margin: 0 0 12px 0; }
.linkliste a, .linkliste img { display: inline-block; vertical-align: middle; margin: 8px 10px; }
.linkliste a img { margin: 0; }

@media (max-width: 800px) {
	.galerie.drei .karte { width: 47.5%; }
	.linkliste a, .linkliste img { margin: 8px 0; }
}

/* Korrektur 3: Expression Web 4 stapelt die Karten sonst falsch (line-height aus body) */
.galerie, .linkliste { line-height: normal; }

/* Korrektur 4: Fotopaare wie im Original höchstens 450 px breit */
#inhalt .paar img { max-width: 450px; }

/* ---------- Steckbrief: Bild links, Daten rechts (Tabelle, in Expression Web bearbeitbar) ---------- */
.steckbrief { width: 100%; border-collapse: collapse; margin: 0 0 1em 0; }
.steckbrief td { padding: 4px 6px; text-align: left; vertical-align: top; }
.steckbrief td.bild { width: 50%; padding: 0 14px 0 0; text-align: center; }
.steckbrief td.feld { width: 120px; }
.steckbrief td.feld, .steckbrief td.feld strong { color: #65859E; }
.steckbrief p { margin: 0; }
.steckbrief td.gedicht { width: 50%; padding: 0 14px 0 0; text-align: center; vertical-align: middle; }
.steckbrief td.gedicht p, .steckbrief td.bemerkung p { margin: 0 0 1em 0; }

@media (max-width: 600px) {
	.steckbrief, .steckbrief tbody, .steckbrief tr { display: block; width: auto; }
	.steckbrief td { display: block; width: auto; }
	.steckbrief td.bild, .steckbrief td.gedicht { width: auto; padding: 0 0 10px 0; }
	.steckbrief td.feld { display: inline-block; width: 36%; padding-right: 0; }
	.steckbrief td.wert { display: inline-block; width: 58%; }
}

/* ---------- Sternchenkino (Videoarchiv) ---------- */
.kinoliste { display: table; margin: 0 auto; }
.kino { margin: 0 0 8px 0; line-height: normal; }
.kino .wurf { display: inline-block; width: 150px; font-weight: bold; color: #65859E; }
.kino a, .kino .ohne { display: inline-block; width: 2.2em; margin: 2px 0; padding: 3px 0; text-align: center; font-weight: bold; color: #FFFFFF; background: #65859E; text-decoration: none; }
.kino a:hover { background: #000066; }
@media (max-width: 600px) {
	.kino .wurf { display: block; width: auto; }
}

/* ---------- Sitemap ---------- */
.sitemap ul { margin: 0 0 1em 0; }
.sitemap ul ul { margin: 0.3em 0 0.5em 0; }
.sitemap li { margin: 0 0 0.2em 0; }

/* ---------- Zweispaltige Tabelle (z. B. Kurzstandard auf ragdoll.htm) ---------- */
.standard { width: 100%; border-collapse: collapse; margin: 0 0 1em 0; }
.standard td { padding: 4px 6px; text-align: left; vertical-align: top; }
.standard td.feld { width: 140px; }
.standard td.feld, .standard td.feld strong { color: #65859E; }
.standard td.wert p { margin: 0 0 0.5em 0; }
@media (max-width: 600px) {
	.standard, .standard tbody, .standard tr, .standard td { display: block; width: auto; }
	.standard td.feld { width: auto; padding-bottom: 0; }
}

/* ---------- Ausstellungsergebnisse (Sites/Ausstellungen) ---------- */
.ergebnis { width: 100%; border-collapse: collapse; margin: 0 0 1em 0; }
.ergebnis td { border: 1px solid #808080; padding: 5px 8px; text-align: left; vertical-align: top; }
.ergebnis td p { margin: 0; }
.ergebnis td p.zentriert, .ergebnis td p.paar { text-align: center; margin: 4px 0; }
.ergebnis .paar img { width: auto; max-width: 48%; margin: 0 1%; }
@media (max-width: 600px) {
	.ergebnis, .ergebnis tbody, .ergebnis tr, .ergebnis td { display: block; width: auto; }
	.ergebnis tr { border: 1px solid #808080; margin: 0 0 10px 0; }
	.ergebnis td { border: 0; padding: 3px 8px; }
}

/* ---------- Lange Wörter in schmalen Spalten umbrechen (Handy) ---------- */
#inhalt .karte, #inhalt .ergebnis td, #inhalt .bildtext .text { overflow-wrap: anywhere; }

/* ---------- Kachel-Leisten (Ehemalige Würfe, Besitzergalerie): Originalgröße 125 x 28 ---------- */
#inhalt .kacheln { text-align: center; margin: 0 0 6px 0; }
#inhalt .kacheln img { width: 125px; max-width: 125px; height: auto; margin: 2px 4px; }

/* ---------- Kachel-Raster (Ehemalige Würfe, Besitzergalerie): am PC 7 Spalten wie im Original ---------- */
.kacheltabelle { margin: 0 auto 1em auto; border-collapse: separate; border-spacing: 8px; }
.kacheltabelle td { padding: 2px; height: 29px; text-align: left; vertical-align: middle; }
#inhalt .kacheltabelle img { width: 125px; max-width: 125px; height: auto; }
/* schmaler (Tablet, Handy quer): Kacheln fortlaufend linksbündig, Lücke zwischen den Generationen */
@media (max-width: 980px) {
	.kacheltabelle, .kacheltabelle tbody { display: block; text-align: left; border-spacing: 0; font-size: 0; }
	.kacheltabelle tr { display: contents; }
	.kacheltabelle tr.trenner { display: block; height: 10px; }
	.kacheltabelle td { display: inline-block; width: 133px; height: auto; padding: 0 4px 6px 4px; box-sizing: border-box; }
	.kacheltabelle td:empty { display: none; }
	/* Block mittig, Kacheln darin linksbündig: 5 je Zeile */
	.kacheltabelle { width: 665px; margin: 0 auto 1em auto; }
}
@media (max-width: 720px) {
	.kacheltabelle { width: 532px; }
}
/* Handy hoch: 3 Kacheln je Zeile */
@media (max-width: 600px) {
	.kacheltabelle { width: auto; }
	.kacheltabelle td { width: 33.33%; padding: 0 1% 6px 1%; box-sizing: border-box; }
	#inhalt .kacheltabelle img { width: 100%; max-width: none; }
}

/* ---------- Schaltflächen-Tabelle (1. bis 12. Woche, Sternchenkino) ---------- */
.schaltflaechen { margin: 0 auto 1.2em auto; border-collapse: separate; border-spacing: 14px 12px; }
.schaltflaechen td { background-color: #EAEAEA; padding: 10px 18px; text-align: center; font-weight: bold; white-space: nowrap; }
.schaltflaechen td.leer { background: none; }
.schaltflaechen td.breit { padding: 6px 40px; font-size: 12pt; }
.schaltflaechen a { color: #4d6a82; }
@media (max-width: 980px) {
	.schaltflaechen, .schaltflaechen tbody { display: block; text-align: center; border-spacing: 0; font-size: 0; }
	.schaltflaechen td { font-size: 10pt; white-space: normal; }
	.schaltflaechen tr { display: contents; }
	.schaltflaechen td { display: inline-block; width: 15%; margin: 0 0.5% 10px 0.5%; padding: 10px 0; box-sizing: border-box; }
	.schaltflaechen td.leer { display: none; }
	.schaltflaechen td.breit { display: block; width: 50%; margin: 4px auto 10px auto; }
}
@media (max-width: 600px) {
	.schaltflaechen td { width: 31%; margin: 0 1% 10px 1%; }
	.schaltflaechen td.breit { width: 64%; }
}

/* ---------- Kitten-Seiten: einheitliches Aussehen (Inhalt steht in <div class="wurf">) ---------- */
.wurf { color: #65859E; text-align: center; }
.wurf p { font-size: 10pt; line-height: 1.5; margin: 0 0 0.8em 0; }
.wurf h1 { font-size: 14pt; text-align: center; margin: 0 0 0.8em 0; }
.wurf h2 { font-size: 12pt; text-align: center; margin: 0 0 0.6em 0; }
.wurf .galerie .karte p { margin: 4px 0; }
.wurf:not(.tagebuch) .galerie .karte p { font-weight: bold; }
.wurf:not(.tagebuch) .galerie .karte img { width: 100%; max-width: 100%; height: auto; }
.wurf:not(.tagebuch) .bildtext .bild img { width: 100%; }
.wurf .bildtext .text { text-align: center; }
.wurf:not(.tagebuch) .bildtext .text p { margin: 0; }
.wurf .bildtext .text h2 { margin: 0 0 0.6em 0; }
.wurf:not(.tagebuch) .bildtext .text p strong, .wurf:not(.tagebuch) .bildtext .text p b { font-weight: normal; }

/* ---------- Farbige Balken (z. B. Sternchenkino-Liste) ---------- */
.kinobalken { padding: 4px 10px; margin: 0 0 12px 0; text-align: center; }
.kinobalken p, .kinobalken h2 { margin: 0; line-height: 1.6; }

/* ---------- Kitten-Seiten: alle Fotos gleich groß (je halbe Inhaltsbreite, bündig mit der Trennlinie) ---------- */
.wurf .bildtext .bild, .wurf .bildtext .text { width: 49.25%; }
.wurf .paar, .wurf .galerie { font-size: 0; text-align: center; }
#inhalt .wurf .paar img { height: auto; margin: 0 0 1.5% 0; vertical-align: top; }
#inhalt .wurf:not(.tagebuch) .paar img { width: 49.25%; max-width: none; }
#inhalt .wurf.tagebuch .paar img { max-width: 49.25%; }
#inhalt .wurf .paar img + img { margin-left: 1.5%; }
.wurf .galerie .karte { width: 49.25%; margin: 0 0 20px 0; }
.wurf .galerie .karte + .karte { margin-left: 1.5%; }
.wurf .galerie .karte p { font-size: 10pt; }
/* Tablet / Handy quer: Text über dem Foto, Fotos weiter halbe Breite */
@media (max-width: 800px) {
	.wurf .bildtext .text { width: 100%; }
	.wurf .bildtext .bild { width: 49.25%; margin: 0 auto 1.5% auto; }
}
/* Handy hoch: alle Fotos volle Breite untereinander */
@media (max-width: 600px) {
	.wurf .bildtext .bild, .wurf .bildtext .text { width: 100%; }
	.wurf .galerie .karte, .wurf .galerie .karte + .karte { display: block; width: auto; margin: 0 0 14px 0; }
	#inhalt .wurf:not(.tagebuch) .paar img, #inhalt .wurf.tagebuch .paar img, #inhalt .wurf .paar img + img { display: block; width: 100%; max-width: 100%; margin: 0 0 14px 0; }
	.wurf .bildtext .bild { margin-bottom: 14px; }
}

/* ---------- Kitten-Seiten: Tabellen ohne Rahmen ---------- */
.wurf .ergebnis td { border: 0; vertical-align: middle; text-align: center; }
.wurf .ergebnis td img { max-width: 100%; height: auto; }
.schaltflaechen .klein { font-size: 8pt; font-weight: normal; color: #000000; }
@media (max-width: 600px) {
	/* Fototabellen: Fotos volle Breite untereinander */
	.wurf .ergebnis tr { border: 0; }
	#inhalt .wurf .ergebnis td img { width: 100%; }
	/* Rosetten/Pokale neben dem Text (Klasse "schmal"): nebeneinander lassen */
	.wurf .ergebnis.schmal { display: table; width: 100%; }
	.wurf .ergebnis.schmal tbody { display: table-row-group; }
	.wurf .ergebnis.schmal tr { display: table-row; }
	.wurf .ergebnis.schmal td { display: table-cell; padding: 3px 2px; }
	#inhalt .wurf .ergebnis.schmal td img { width: 50px; max-width: none; }
}

/* ---------- Tagebuch: wie Kitten-Seiten, aber Text schwarz und Fotos neben dem Text in Originalgröße ---------- */
.wurf.tagebuch { color: #000000; text-align: left; }
.wurf.tagebuch h1, .wurf.tagebuch h2 { color: #65859E; }
.wurf.tagebuch h1 { font-size: 12pt; }
.wurf.tagebuch h2 { font-size: 10pt; }
.wurf.tagebuch .galerie .karte p { margin: 0 0 1em 0; }
.wurf.tagebuch .bildtext .text { text-align: left; }
/* Absatz, der im Original ohne Abstand weitergeht */
.wurf.tagebuch p.eng, .wurf.tagebuch h1.eng, .wurf.tagebuch h2.eng { margin-bottom: 0; }
/* Handy hoch: Fotos auch im Tagebuch volle Breite */
@media (max-width: 600px) {
	#inhalt .wurf.tagebuch .karte img, #inhalt .wurf.tagebuch .bildtext .bild img { width: 100%; }
}

/* Handy und Tablet hochkant: Foto immer über dem Text, auch wenn es am PC rechts steht (ohne Flexbox) */
@media (max-width: 800px) {
	.wurf .bildtext.textlinks { display: table; width: 100%; }
	.wurf .bildtext.textlinks .bild { display: table-header-group; }
	.wurf .bildtext.textlinks .text { display: table-row-group; }
}
@media (min-width: 601px) and (max-width: 800px) {
	#inhalt .wurf:not(.tagebuch) .bildtext.textlinks .bild img { width: 49.25%; }
}

/* Tagebuch: Überschriften blau und fett, Text schwarz, „Weiterlesen“ schwarz und fett */
.wurf.tagebuch h1, .wurf.tagebuch h2, .wurf.tagebuch .ueberschrift { color: #65859E; font-weight: bold; }
.wurf.tagebuch a.weiter { color: #000000; font-weight: bold; text-decoration: none; }
.wurf.tagebuch a.weiter:hover, .wurf.tagebuch a.weiter:focus { text-decoration: underline; }

/* ==========================================================
   Barrierefreiheit (14.11.2026)
   Greift nur, wenn Besucher es im Gerät eingestellt haben – sonst ändert sich nichts.
   ========================================================== */

/* "Bewegung reduzieren": die Handy-Schublade erscheint ohne Gleiten */
@media (prefers-reduced-motion: reduce) {
	#menue { transition: none !important; }
}

/* "Mehr Kontrast": dunkleres Blau, unterstrichene Links, dunklere Linien */
@media (prefers-contrast: more) {
	a, #fuss a, .schaltflaechen a { color: #1F3A57; text-decoration: underline; }
	a:hover, a:focus { color: #000033; }
	h1, h2, h3, .wurf, .kino .wurf, .steckbrief td.feld, .steckbrief td.feld strong,
	.standard td.feld, .standard td.feld strong,
	.wurf.tagebuch h1, .wurf.tagebuch h2, .wurf.tagebuch .ueberschrift { color: #1F3A57; }
	[style*="65859E" i] { color: #1F3A57 !important; }
	#menue > li > a { color: #1F3A57; }
	.kino a, .kino .ohne { background: #1F3A57; }
	hr { border-top-color: #555555; }
	#menue > li > a:focus, a:focus { outline: 2px solid #000000; outline-offset: 2px; }
}

/* Unsichtbar für das Auge, lesbar für Google und Screenreader (z. B. Hauptüberschrift der Startseite) */
.unsichtbar {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}