@charset "UTF-8";

/* ===========================================================================
   weinberglingnerschloss.de - Annaeherung an das frueher eingesetzte
   Template "bizblue".

   ⛔ WICHTIG: weinberg lief NICHT auf demselben Template wie
   rembrandulrich.de. Laut alter Datenbank (template_styles, client_id=0,
   home=1) war hier "bizblue - Standard" aktiv, bei ulrich dagegen
   "biz_blue_ii_j25 - Default". Die beiden Templates haben voellig
   verschiedene Farbwelten:

       weinberg (bizblue)          BLAU   - #4B6B94, #3B5576, #546B88
       ulrich   (biz_blue_ii_j25)  GRUEN  - #225725

   Eine gemeinsame Optik-Datei fuer beide Seiten waere also falsch. Deshalb
   gibt es zwei: custom-weinberg.css (diese) und custom-ulrich.css.

   ALLE Werte hier stammen aus templates/bizblue/css/template.css des alten
   Baums - abgelesen, nicht geschaetzt. Die Datei wurde zuletzt am
   25.11.2020 geaendert, war also die gepflegte Fassung.

   Belegte Werte im Einzelnen:
     Grundschrift        Arial 12px, Textfarbe #000000
     Seitenhintergrund   #ffffff + bg_top.gif (1x42), waagerecht wiederholt
     h1  17px #546B88
     h2  14px fett #3B5576, Unterkante 1px #3B5576, Zeilenhoehe 16px
     h3  13px #3B5576
     Verweise            #4B6B94, beruehrt #999999
     Obere Navigation    42px hoch, Verweise 11px #000033, beruehrt #999999
     Modul-Ueberschrift
       in den Spalten    mod_lr.gif auf #6D8DB5, Text #F6F7F9,
                         Tahoma 12px fett ZENTRIERT, Zeilenhoehe 22px,
                         Unterkante 1px #D2D5D8
       im Inhalt         mod.gif auf #E7EAEC, Text #536570
     Menue in der Spalte 12px normal #666666 auf #ECF0F3,
                         beruehrt #4B6B94 auf #E2E5EA, Einzug 10px
     Fusszeile           11px #4B6B94, Oberkante 1px #cccccc
     Kopfgrafik          header.jpg 1920x135 - in BEIDEN Templates dieselbe
                         Datei (gleiche Pruefsumme), zentriert, 140px hoch

   Eingebunden ueber Cassiopeias Einstellung "colorName": index.php laedt
   global/<colorName>.css NACH der Template-CSS. Kein Kernbestandteil wird
   veraendert; zum Zurueckdrehen genuegt colorName = colors_standard.
   =========================================================================== */

/* :root:root statt :root - Cassiopeia gibt einige dieser Werte in einem
   inline-<style> aus, der NACH dieser Datei im Kopf steht. Bei gleicher
   Spezifitaet gewinnt der spaetere Block; die doppelte Angabe setzt sich
   ueber die hoehere Spezifitaet durch, ohne !important. */
:root:root {
	--twd-blau: #4B6B94;
	--twd-blau-dunkel: #3B5576;
	--twd-blau-kopf: #546B88;
	--twd-blau-band: #6D8DB5;
	--twd-grau: #999999;
	--twd-spalte-bg: #ECF0F3;
	--twd-spalte-bg-hover: #E2E5EA;

	--cassiopeia-color-primary: #4B6B94;
	--cassiopeia-color-link: #4B6B94;
	--link-color: #4B6B94;
	--link-color-rgb: 75, 107, 148;
	--cassiopeia-color-hover: #999999;
	--link-hover-color: #999999;
	--link-hover-color-rgb: 153, 153, 153;

	/* Cassiopeia leitet aus --hue Flaechen, Rahmen und Schaltflaechen ab.
	   214 ist der Farbton von #4B6B94 - und zugleich Cassiopeias Vorgabe,
	   die hier also zufaellig schon passt. */
	--hue: 214;
	--template-bg-light: #ECF0F3;
	--template-text-dark: #000000;
	--template-special-color: #3B5576;

	/* Das Original stand auf 12px - fuer heutige Bildschirme sehr klein,
	   deshalb hier 13px. Wer es anders will, aendert NUR diese Zahl. */
	--twd-grundschrift: 13px;
}

/* --- Grundschrift und Flaechen ------------------------------------------- */
body.site {
	background-color: #ffffff;
	background-image: url("/images/twd-bgtop.gif");
	background-repeat: repeat-x;
	background-position: left top;
	font-family: Arial, Verdana, Tahoma, Helvetica, sans-serif;
	font-size: var(--twd-grundschrift);
	color: #000000;
}

.container-component,
.container-sidebar-left,
.container-sidebar-right,
.container-top-a,
.container-bottom-a,
.container-bottom-b {
	background-color: #ffffff;
}

/* --- Ueberschriften: die Groessen und Farben des Originals --------------- */
main h1,
.page-header h1,
.com-content-article__title {
	font-size: 17px;
	color: var(--twd-blau-kopf);
	margin: 5px 0;
	font-weight: 700;
}

/* h2 hatte im Original eine durchgehende Unterkante - das ist das
   auffaelligste Gestaltungsmerkmal der Beitragslisten. */
main h2,
.page-header h2,
.com-content-category-blog__item h2 {
	font-size: 14px;
	font-weight: 700;
	line-height: 16px;
	color: var(--twd-blau-dunkel);
	border-block-end: 1px solid var(--twd-blau-dunkel);
	padding: 1px;
	margin: 3px 0;
	width: 100%;
	text-align: start;
}

main h3 {
	font-size: 13px;
	color: var(--twd-blau-dunkel);
	margin: 5px 0;
	font-weight: 700;
}

main h4,
main h5,
main h6 {
	font-size: 12px;
	color: var(--twd-blau-dunkel);
	margin: 5px 0;
}

main h2 a,
.com-content-category-blog__item h2 a,
.com-content-article__title a {
	color: var(--twd-blau-dunkel);
	font-weight: 700;
}

/* --- Verweise: blau, beruehrt grau --------------------------------------- */
main a:link,
main a:visited,
.container-sidebar-left a:link,
.container-sidebar-right a:link,
.container-sidebar-left a:visited,
.container-sidebar-right a:visited {
	color: var(--twd-blau);
	text-decoration: none;
}

main a:hover,
.container-sidebar-left a:hover,
.container-sidebar-right a:hover {
	color: var(--twd-grau);
	text-decoration: none;
}

/* --- Kopfbereich: die Panoramagrafik in natuerlicher Groesse ------------- */
/* Im Original war die Grafik der gesamte Kopf. "cover" wuerde die 1920x135
   breite Grafik hochziehen und beschneiden - sie laeuft an den Raendern
   ohnehin weiss aus und ist fuer die natuerliche Groesse gemacht. */
.container-header {
	background-color: #ffffff;
	background-image: url("/images/twd-kopfgrafik.jpg");
	background-repeat: no-repeat;
	background-position: center top;
	background-size: auto;
	padding-block: 0;
}

.container-header .navbar-brand {
	align-items: flex-end;
	min-height: 140px;
	padding-block: 0;
}

.container-header .brand-logo span,
.container-header .site-title {
	color: var(--twd-blau-dunkel);
	font-weight: 700;
	font-size: 17px;
	line-height: 1.2;
	text-shadow: 0 0 6px #ffffff, 0 0 12px #ffffff, 0 0 20px #ffffff;
}

.container-header .navbar-brand,
.container-header .brand-logo {
	padding-block-end: .4rem;
}

/* --- Obere Navigation: 42px hoch, Verlauf, dunkelblaue Verweise ---------- */
.container-header > .grid-child.container-nav,
.container-nav {
	background-color: #ffffff;
	background-image: url("/images/twd-bgtop.gif");
	background-repeat: repeat-x;
	background-position: left top;
	min-height: 42px;
	padding-block: 0;
}

.container-nav .mod-menu > li > a,
.container-header .mod-menu > li > a {
	color: #000033;
	font-size: 11px;
	font-weight: 400;
	line-height: 40px;
	padding: 0 10px;
	text-decoration: none;
	background-color: transparent;
}

.container-nav .mod-menu > li > a:hover,
.container-nav .mod-menu > li.active > a,
.container-header .mod-menu > li > a:hover {
	color: var(--twd-grau);
	background-color: transparent;
	text-decoration: none;
}

/* --- Modul-Ueberschriften in den Seitenspalten: blaues Band -------------- */
.container-sidebar-left .card-header,
.container-sidebar-right .card-header,
.container-sidebar-left .card > h3,
.container-sidebar-right .card > h3,
.container-sidebar-left .moduletable > h3,
.container-sidebar-right .moduletable > h3 {
	/* Kontrast: #F6F7F9 auf #6D8DB5 ergibt 3,20:1 und verfehlt die
	   Mindestanforderung von 4,5:1 fuer 12px-Text. Mit #4B6B94 als Band
	   steht weisser Text bei 5,48:1 - dieselbe Farbfamilie, nur eine Stufe
	   dunkler, und damit auch fuer aeltere Augen lesbar. */
	/* ⛔ Der Verlauf ist ein CSS-Verlauf, KEINE Grafik mehr.
	   Das alte mod_lr.gif ist vollstaendig deckend (gemessen: 29 von 29
	   Pixeln undurchsichtig) und liegt ueber der Hintergrundfarbe - eine
	   Aenderung der Farbe darunter bewirkt deshalb GAR NICHTS. Gemessen am
	   gerenderten Band: 3,45:1 am hellsten Pixel, erforderlich sind 4,5:1.
	   Dieser Verlauf hat denselben Charakter, nur eine Stufe dunkler:
	   #F6F7F9 darauf ergibt 6,41:1 oben und 5,12:1 unten. */
	background-color: var(--twd-blau);
	background-image: linear-gradient(to bottom, #3F5C80 0%, #4B6B94 100%);
	border: 0;
	border-block-end: 1px solid #D2D5D8;
	border-radius: 0;
	color: #F6F7F9;
	font-family: Tahoma, Arial, Verdana, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: 700;
	line-height: 22px;
	padding: 2px;
	margin-block-end: 4px;
	text-align: center;
}

/* --- Modul-Ueberschriften im Inhaltsbereich: heller Verlauf -------------- */
.container-top-a .card-header,
.container-bottom-a .card-header,
.container-bottom-b .card-header,
.container-main-top .card-header,
.container-main-bottom .card-header {
	background-color: #E7EAEC;
	background-image: url("/images/twd-modulkopf-inhalt.gif");
	background-repeat: repeat-x;
	background-position: left top;
	border: 0;
	border-block-end: 1px solid #D2D5D8;
	border-radius: 0;
	/* Originalfarbe war #536570 - auf dem hellen Verlauf gemessen nur
	   4,11:1 am DUNKELSTEN Pixel (das ist der bindende Fall, nicht der
	   hellste). #3B5576 ist dieselbe Farbfamilie wie die Ueberschriften und
	   ergibt dort 5,18:1 - erfuellt AA mit Reserve. Der Verlauf bleibt hier
	   als Grafik, weil er hell genug ist; nur der Text wurde dunkler. */
	color: #3B5576;
	font-family: Tahoma, Arial, Verdana, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: 700;
	line-height: 22px;
	padding: 2px;
	margin-block-end: 4px;
	text-align: center;
}

/* --- Menues in den Seitenspalten ---------------------------------------- */
/* Im Original: 12px normal #666666 auf #ECF0F3, beruehrt #4B6B94 auf
   #E2E5EA, Einzug 10px, KEIN Fettdruck. */
.container-sidebar-left .mod-menu a,
.container-sidebar-right .mod-menu a {
	display: block;
	font-size: 12px;
	font-weight: 400;
	color: #666666;
	background-color: var(--twd-spalte-bg);
	padding: 2px 0 2px 10px;
	text-decoration: none;
	border: 0;
}

.container-sidebar-left .mod-menu a:hover,
.container-sidebar-right .mod-menu a:hover,
.container-sidebar-left .mod-menu .active > a,
.container-sidebar-right .mod-menu .active > a {
	background-color: var(--twd-spalte-bg-hover);
	color: var(--twd-blau);
}

/* --- Fusszeile ----------------------------------------------------------- */
.container-footer,
.container-footer .footer {
	background-color: #ffffff;
	border-block-start: 1px solid #cccccc;
	color: var(--twd-blau);
	font-size: 11px;
}

.container-footer a {
	color: var(--twd-blau);
	text-decoration: none;
}

/* --- Bildunterschriften -------------------------------------------------- */
main figcaption,
div.caption p {
	font-size: .9em;
	color: #666666;
	text-align: center;
}

/* --- Kleinere Bildschirme ------------------------------------------------ */
/* Kopfhoehe (90px) und Menue-Tippflaechen stehen im gespiegelten
   Feinschliff-Block weiter unten und wuerden die Werte hier ohnehin
   ueberschreiben. Hier bleibt nur, was sonst nirgends gesetzt ist. */
@media (max-width: 640px) {
	.container-nav .mod-menu > li {
		border-inline-start: 0;
	}
}



/* ⚠ GESPIEGELTER ABSCHNITT ---------------------------------------------------
   Alles ab hier steht in BEIDEN Optik-Dateien (custom-weinberg.css und
   custom-ulrich.css) inhaltlich gleich - nur die Farbwerte unterscheiden
   sich. Eine gemeinsame dritte Datei waere eine zweite Optik-Quelle neben
   Cassiopeias colorName und wurde bewusst nicht gebaut.
   ⛔ AENDERUNGEN HIER IMMER IN BEIDEN DATEIEN NACHZIEHEN.
   --------------------------------------------------------------------------- */

/* ===========================================================================
   FEINSCHLIFF - nicht aus dem alten Template abgeleitet, sondern aus dem
   Augenschein am fertigen Ergebnis. Ziel ist nicht 1:1-Treue um jeden Preis,
   sondern eine Seite, die gut aussieht und sich gut bedienen laesst.
   =========================================================================== */

/* --- Kopf: Titel nicht als Aufkleber auf das Foto legen ------------------- */
/* Im Original stand im Kopf KEIN Text - die Panoramagrafik war der Kopf.
   Ein Schriftzug mit weissem Schein darueber wirkt wie ein aufgeklebtes
   Etikett. Der Titel bleibt deshalb im Quelltext (fuer Suchmaschinen und
   Vorleseprogramme), verschwindet aber aus der Ansicht. Dafuer wird die
   ganze Kopfgrafik anklickbar und fuehrt zur Startseite - das ersetzt den
   Verweis, den der Schriftzug vorher getragen hat. */
.container-header .brand-logo span,
.container-header .site-title {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	text-shadow: none;
}

.container-header .navbar-brand {
	position: relative;
	align-items: stretch;
}

.container-header .navbar-brand {
	margin: 0;
	padding: 0;
	width: 100%;
}

.container-header .brand-logo {
	display: block;
	width: 100%;
	min-height: 140px;
	padding: 0;
}

/* --- Seitenspalten: Eintraege als zusammenhaengende Liste ----------------- */
/* Cassiopeia setzt 16px Innenabstand um den Modulkoerper und 3,25px je
   Listenpunkt. Dadurch stehen die Eintraege schmaler als ihr
   Ueberschriftenband und sind durch weisse Luecken getrennt - sie wirken wie
   einzeln herumliegende Kacheln. Im Original war es eine durchgehende Liste
   unter dem Band. */
/* NUR Menue-Module. Die Regel galt vorher fuer JEDES Modul in den Spalten -
   bei Werbebannern, Kontakttexten und freiem HTML klebte der Inhalt dadurch
   ohne jeden Abstand an der Kante.
   ⛔ Festgemacht wird an der STRUKTUR (enthaelt eine <ul class="mod-menu">),
   nicht an der Klasse "_menu". Die stammt naemlich aus dem Feld
   "Modul-Klassensuffix" und ist ein Ueberbleibsel aus der Joomla-3-Zeit -
   jeder kann sie im Backend loeschen, und ein neu angelegtes Menue-Modul
   hat sie gar nicht. mod_menu erzeugt die Liste dagegen immer. */
.container-sidebar-left .card-body:has(.mod-menu),
.container-sidebar-right .card-body:has(.mod-menu) {
	padding: 0;
}

.container-sidebar-left .card-body:not(:has(.mod-menu)),
.container-sidebar-right .card-body:not(:has(.mod-menu)) {
	padding: 8px 10px;
}

.container-sidebar-left .card,
.container-sidebar-right .card {
	border: 0;
	margin-block-end: 14px;
}

.container-sidebar-left .mod-menu,
.container-sidebar-right .mod-menu {
	flex-direction: column;
	gap: 0;
	margin: 0;
	padding: 0;
}

.container-sidebar-left .mod-menu > li,
.container-sidebar-right .mod-menu > li {
	margin: 0;
	padding: 0;
	width: 100%;
}

/* Trennstrich statt Luecke - die Reihen beruehren sich. */
.container-sidebar-left .mod-menu > li + li > a,
.container-sidebar-right .mod-menu > li + li > a {
	border-block-start: 1px solid #ffffff;
}

/* Untermenues eingerueckt, damit die Ebene erkennbar bleibt. */
.container-sidebar-left .mod-menu ul a,
.container-sidebar-right .mod-menu ul a {
	padding-inline-start: 22px;
	font-size: 12px;
}

/* --- "Weiterlesen" als Textverweis statt als grosse Schaltflaeche -------- */
/* Cassiopeia macht daraus eine 158x45 Pixel grosse Schaltflaeche. Bei einer
   Beitragsliste mit einem Dutzend Teasern nimmt das mehr Platz ein als der
   Text selbst. Im Original war es ein kleiner Verweis mit Pfeil. */
main .readmore .btn,
main a.btn-secondary,
main .com-content-article__readmore .btn {
	background: none;
	border: 0;
	padding: 0;
	margin: 2px 0 8px 0;
	font-size: 12px;
	font-weight: 700;
	min-height: 0;
	line-height: 1.4;
	text-align: start;
	box-shadow: none;
}

main .readmore .btn:hover,
main a.btn-secondary:hover {
	background: none;
	text-decoration: underline;
}

/* --- Anmeldeformular in der Spalte kompakter ----------------------------- */
.container-sidebar-left .mod-login,
.container-sidebar-right .mod-login {
	padding: 8px;
}

.container-sidebar-left .mod-login input,
.container-sidebar-right .mod-login input,
.container-sidebar-left .mod-login .btn,
.container-sidebar-right .mod-login .btn {
	font-size: 12px;
	min-height: 0;
	padding: 5px 8px;
}

/* NUR die Absende-Schaltflaeche ueber die volle Breite. Das Augensymbol
   neben dem Passwortfeld ("Passwort anzeigen") ist ebenfalls ein .btn und
   wuerde sonst zu einem breiten Balken - es gehoert an das Feld. */
.container-sidebar-left .mod-login button[type="submit"],
.container-sidebar-right .mod-login button[type="submit"],
.container-sidebar-left .mod-login .btn-primary,
.container-sidebar-right .mod-login .btn-primary {
	width: 100%;
}

.container-sidebar-left .mod-login .input-group .btn,
.container-sidebar-right .mod-login .input-group .btn {
	width: auto;
	background-color: #ffffff;
	border: 1px solid #ced4da;
	color: #495057;
}

.container-sidebar-left .mod-login ul,
.container-sidebar-right .mod-login ul {
	margin: 6px 0 0 0;
	padding: 0;
	list-style: none;
	font-size: 11px;
}

/* --- Beitragslisten etwas luftiger trennen ------------------------------- */
main .com-content-category-blog__item {
	margin-block-end: 14px;
}


/* --- Tabellen aus den Altbeitraegen ------------------------------------- */
/* Viele Beitraege stammen aus einer Zeit mit breiterem Inhaltsbereich und
   enthalten Tabellen mit festen Spaltenbreiten. In einer schmalen Spalte
   bricht darin jedes Wort einzeln um. Die Tabelle darf deshalb ihre
   natuerliche Breite behalten und der Bereich bei Bedarf seitlich
   rollen - lesbar schlaegt buendig. */
main table {
	max-width: 100%;
	border-collapse: collapse;
}

main table td,
main table th {
	padding: 2px 6px;
	vertical-align: top;
}

/* KEIN overflow-x auf dem Artikelkoerper. Das war ein Irrweg: es erzeugt
   einen verschachtelten Rollbereich, der Mausrad-Gesten abfaengt und Inhalt
   am Rand abschneidet - im Test liess sich die Bildergalerie dadurch seitlich
   wegschieben. Das eigentliche Problem (zerquetschte Tabellen bei ulrich)
   war eine ZWEIspaltige Beitragsanordnung und ist dort an der Wurzel
   behoben. Lange Zellinhalte duerfen stattdessen umbrechen. */
main table td,
main table th {
	/* break-word statt anywhere: "anywhere" geht in die min-content-Breite
	   ein und erlaubt der Tabelle, schmaler zu werden als ihr laengstes Wort -
	   also genau den Effekt, den diese Regel verhindern soll. */
	overflow-wrap: break-word;
}

/* --- Bilder in Beitraegen nie ueber den Rand hinaus ---------------------- */
main img {
	max-width: 100%;
	height: auto;
}


/* --- Zaehler-Plaketten in der Hausfarbe ---------------------------------- */
/* Joomla setzt bei Unterkategorien eine Plakette mit der Beitragsanzahl.
   Cassiopeias Vorgabefarbe passt nicht zur Hausfarbe der Seite. */
main .badge,
main .badge.bg-info,
main .badge.bg-secondary {
	background-color: var(--twd-blau);
	color: #ffffff;
	font-weight: 400;
	font-size: 10px;
	vertical-align: middle;
}


/* --- Bilder im Fliesstext: Abstand zum Text ------------------------------ */
/* Ohne das klebt der Text direkt an umflossenen Logos und Produktbildern.
   Die Galerie-Bilder sind ausgenommen, die bringen ihr eigenes Raster mit. */
main .com-content-article__body img:not(.twd-galerie img),
main .com-content-category-blog__item img:not(.twd-galerie img) {
	margin: 0 12px 8px 0;
}

main .twd-galerie img {
	margin: 0;
}


/* --- Handy: groessere Tippflaechen und flacherer Kopf -------------------- */
/* Cassiopeia stapelt die Menuepunkte auf kleinen Geraeten untereinander -
   das ist richtig. Nur waren die Tippflaechen 12px hoch; mit dem Finger
   trifft man das nicht zuverlaessig. Jetzt volle Zeilenhoehe mit
   Trennstrich, also eine richtige Menueliste. */
@media (max-width: 640px) {
	/* Cassiopeia stapelt die Punkte untereinander. Bei sechs Eintraegen sind
	   das 277px Navigation, bevor der erste Inhalt beginnt - auf einem
	   812px-Bildschirm fast die Haelfte. Nebeneinander mit Umbruch bringt
	   dieselben Eintraege auf rund ein Drittel der Hoehe, ohne die
	   Tippflaeche zu verkleinern. */
	.container-nav .mod-menu,
	.container-header .mod-menu {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
	}

	.container-nav .mod-menu > li,
	.container-header .mod-menu > li {
		flex: 0 0 auto;
		border-inline-start: 0;
	}

	.container-nav .mod-menu > li > a,
	.container-header .mod-menu > li > a {
		display: block;
		padding: 10px 12px;
		line-height: 1.3;
		font-size: 13px;
	}

	/* Die Kopfgrafik ist 1920px breit; auf einem 375px-Bildschirm sieht man
	   ohnehin nur ihre Mitte. 140px Hoehe dafuer sind zu viel Platz, bevor
	   der Inhalt beginnt. */
	.container-header .brand-logo,
	.container-header .navbar-brand {
		min-height: 90px;
	}
}


/* --- Nachbesserungen aus der Pruefung ------------------------------------ */

/* ⛔ Der Fokus-Rahmen darf NICHT verschwinden.
   Mein "box-shadow: none" auf den Weiterlesen-Verweisen schlaegt Bootstraps
   .btn:focus-visible, und das setzt seinerseits "outline: 0". Ergebnis: wer
   mit der Tab-Taste durch eine Beitragsliste geht, sieht nicht mehr, wo er
   steht. Gemessen: outline war "none 3px". Hier ausdruecklich zurueckgeholt. */
main .readmore .btn:focus-visible,
main a.btn-secondary:focus-visible,
main .com-content-article__readmore .btn:focus-visible,
main a:focus-visible,
.container-nav a:focus-visible,
.container-sidebar-left a:focus-visible,
.container-sidebar-right a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Verweise im Beitragstext bekommen beim Beruehren zusaetzlich eine
   Unterstreichung. Im Original war der einzige Hinweis ein Farbwechsel -
   bei weinberg sogar zu einem HELLEREN Grau, was fuer aeltere Augen ein
   Rueckschritt ist. Die Farbe bleibt originalgetreu, das zweite Signal
   kommt dazu. Menues und Spalten bleiben ausgenommen, dort waere es unruhig. */
main .com-content-article__body a:hover,
main .com-content-category-blog__item a:hover,
main p a:hover,
main li a:hover {
	text-decoration: underline;
}


/* ⛔ Beschriftung von Schaltflaechen schuetzen.
   "main a:link" hat die Spezifitaet (0,1,2) und schlaegt damit JEDE
   .btn-Regel (0,1,0) - auch die Schriftfarbe. Bei einem
   <a class="btn btn-primary"> im Inhaltsbereich stuende die Beschriftung
   dadurch in der Hausfarbe auf der Hausfarbe: Kontrast 1:1, unlesbar.
   Ueber Spezifitaet geloest, nicht ueber !important. */
/* Der TRAGENDE Eintrag ist die :link-Variante mit (0,2,1) - sie schlaegt
   sowohl "main a:link" als auch ".container-sidebar-* a:link" (beide 0,1,2)
   echt auf Spezifitaet, unabhaengig von der Reihenfolge. Ohne Bereichs-
   praefix gilt sie zugleich fuer Schaltflaechen in den Seitenspalten.
   Wer die :link/:visited-Varianten als "redundant" kuerzt, bricht das. */
a.btn-primary:link,
a.btn-primary:visited,
a.btn-primary:hover,
a.btn-primary:focus,
.btn-primary {
	color: #ffffff;
}





/* ===========================================================================
   ANPASSUNGEN 03.08.2026 (Wuensche Thomas)
   Diese stehen NICHT im gespiegelten Abschnitt - sie betreffen nur
   weinberglingnerschloss.de. rembrandulrich.de wird per 301 hierher
   umgeleitet und braucht keine Optik mehr.
   =========================================================================== */

/* --- 1) Seitenspalten schmaler ------------------------------------------ */
/* Cassiopeia teilt den Inhaltsbereich in vier gleich breite Spalten zu je
   19,875rem: eine fuer die linke Spalte, zwei fuer den Inhalt, eine fuer die
   rechte. Die Seitenspalten waren damit rund 318px breit - fuer Menuelisten
   viel. Die Gesamtbreite bleibt gleich (79,5rem), nur die Aufteilung
   aendert sich: 14 + 25,75 + 25,75 + 14. Die Spalten sind damit rund 224px
   breit, der Inhalt bekommt den gewonnenen Platz. */
@media (width >= 992px) {
	.site-grid {
		grid-template-columns:
			[full-start] minmax(0, 1fr)
			[main-start] minmax(0, 14rem) minmax(0, 25.75rem) minmax(0, 25.75rem) minmax(0, 14rem)
			[main-end] minmax(0, 1fr) [full-end];
	}
}

/* --- 2) Oberes Menue rechtsbuendig und in umgekehrter Reihenfolge -------- */
/* "row-reverse" dreht die Laufrichtung um: der erste Menuepunkt steht dann
   ganz rechts, gelesen von links nach rechts erscheint die Reihenfolge
   umgekehrt. Genau so hat es das alte Template gemacht (dort ueber
   "float: right").

   ⚠ BEWUSST AKZEPTIERTE ABWEICHUNG von WCAG 2.4.3: Seh- und Fokusreihenfolge
   fallen dadurch auseinander - die Tab-Taste laeuft sichtbar von rechts nach
   links. Das ist der Preis, kein Vorteil. Sauber waere, die Reihenfolge im
   Menue-Manager umzudrehen und hier nur "justify-content: flex-end" zu setzen.
   Dagegen spricht, dass das die lft/rgt-Werte des verschachtelten Menuebaums
   auf einer Live-Kundenseite anfasst (drei Unterpunkte unter "Historie") -
   bei sechs gleichzeitig sichtbaren Punkten in EINER Zeile ist das Risiko
   hoeher als der Gewinn. NICHT ohne Kenntnis dieses Risikos "reparieren".
   Erst ab 641px, darunter bleibt der Umbruch von links nach rechts. */
@media (width >= 641px) {
	.container-nav .mod-menu {
		flex-direction: row-reverse;
		justify-content: flex-start;
	}
}

/* --- 3) Untermenue oeffnet beim Zeigen, nicht erst nach einem Klick ------ */
/* Das Menuemodul gibt seit dieser Anpassung alle Unterpunkte aus
   (showAllChildren=1). Bisher erschien der Pfeil nur auf der Historie-Seite
   und musste angeklickt werden - das ist die Bedienung, die Thomas als
   gewoehnungsbeduerftig bezeichnet hat.
   Nur dort, wo es echtes Zeigen gibt (@media hover): auf Tastgeraeten bleibt
   die Schaltflaeche, sonst kaeme man an die Unterpunkte nicht heran.
   Die Tastatur bedient menue-verhalten.js selbst (focusin/focusout); ohne
   Skript steht das Untermenue dauerhaft offen (dritte Regel weiter unten). */
.container-nav .mod-menu > li {
	position: relative;
}

.container-nav .mod-menu__sub {
	margin: 0;
	padding: 4px 0;
	list-style: none;
	min-width: 13rem;
}

/* ⛔ SICHTBARKEIT AUSSERHALB von @media (hover: hover).
   Ein frueherer Entwurf hatte alle twd-auf-Regeln INNERHALB der
   hover-Abfrage. Folge: Auf einem Telefon war der Umschaltknopf zwar da, das
   Skript setzte brav twd-auf - und kein Stylesheet reagierte darauf. Der Knopf
   tat aus Sicht des Nutzers nichts. Zu- und Aufklappen gehoert deshalb hier
   heraus; nur die SCHWEBENDE Darstellung bleibt der Maus vorbehalten.

   ⛔ UND: Ausgeblendet wird NUR, wenn das Skript laeuft (.twd-js).
   Sonst entstuende eine Falle - ohne Skript kann NICHTS mehr twd-auf setzen,
   und die drei Historie-Unterpunkte waeren per Maus gar nicht erreichbar.
   Genau das behauptet die README als harmlosen Notausstieg ("Modul 132
   unveroeffentlichen").

   ⛔⛔ HIER STAND EINE DRITTE REGEL - SIE WAR EIN FEHLER, BITTE NICHT WIEDER
   EINSETZEN. Der Gedanke war: Joomla liefert das Untermenue mit
   aria-hidden="true" aus und versteckt es ueber die eigene Regel
   :where(.mod-menu__sub[aria-hidden="true"]) { display: none }; faellt unser
   Skript weg, greife sie mangels Gegenspieler doch und nehme der Seite die
   drei Historie-Unterpunkte. Also eine bedingungslose Gegenregel
   ":not(.twd-js) > li > .mod-menu__sub { display: block }".

   Die Annahme dahinter war falsch, weil ungemessen: Joomla laedt
   media/system/js/menu.min.js und haengt einen eigenen Zuhoerer an die
   MENUELEISTE. Der pflegt aria-hidden und aria-expanded selbst. Ohne unser
   Skript funktioniert der Pfeil also einwandfrei - live nachgemessen, indem
   nur das <li> geklont wurde (das nimmt unsere Zuhoerer mit, laesst Joomlas
   Zuhoerer an der Leiste aber intakt):
     Ausgangszustand   display:none,  0/3 sichtbar
     Klick auf Pfeil   display:block, 3/3 sichtbar, aria-hidden -> false
     zweiter Klick     display:none,  0/3 sichtbar
   MIT der Gegenregel dagegen stand das Untermenue dauerhaft offen und der
   Pfeil konnte es NICHT MEHR SCHLIESSEN. Die "Rueckfallebene" war also
   schlechter als gar keine.

   Merksatz: Ein frueherer Messwert schien das Gegenteil zu zeigen - dort war
   aber die ganze Menueleiste geklont und damit Joomlas Zuhoerer mit entfernt.
   Wer das hier nachmisst: NUR das <li> ersetzen, nie die Leiste. */
.container-nav .mod-menu.twd-js > li > .mod-menu__sub {
	display: none;
}

.container-nav .mod-menu.twd-js > li.twd-auf > .mod-menu__sub {
	display: block;
}

@media (hover: hover) {
	/* Den Umschaltknopf nur ausblenden, wenn das Skript laeuft (es setzt
	   .twd-js NACH dem Verdrahten). Ohne JavaScript bleibt er sichtbar. */
	.container-nav .mod-menu.twd-js > li > .mod-menu__toggle-sub {
		display: none;
	}

	/* Mit Maus schwebt das Untermenue ueber dem Inhalt. Auf Tastgeraeten
	   klappt es stattdessen im normalen Fluss auf - dort waere ein
	   schwebender Kasten neben einer umbrechenden Menueleiste unbrauchbar.
	   Ebenfalls an .twd-js gebunden: ohne Skript ist der Kasten dauerhaft
	   sichtbar (s. o.), und ein dauerhaft SCHWEBENDER Kasten laege staendig
	   ueber dem Seiteninhalt. Im Fluss stoert er nur die Optik. */
	.container-nav .mod-menu.twd-js > li > .mod-menu__sub {
		position: absolute;
		inset-block-start: 100%;
		inset-inline-end: 0;
		z-index: 60;
		background-color: #ffffff;
		border: 1px solid #cccccc;
		border-block-start: 2px solid var(--twd-blau);
		box-shadow: 0 4px 10px rgba(0, 0, 0, .16);
		/* Deckel, damit ein langer Eintrag den Kasten nicht ueber den linken
		   Bildrand hinauswachsen laesst. */
		max-inline-size: min(90vw, 24rem);
	}
}

.container-nav .mod-menu__sub > li > a {
	display: block;
	padding: 6px 14px;
	font-size: 12px;
	line-height: 1.4;
	color: var(--twd-blau);
	/* normal statt nowrap: der Deckel weiter oben begrenzt den KASTEN. Duerfte
	   der Text nicht umbrechen, waechse ein langer Eintrag stattdessen aus dem
	   weissen Kasten heraus - Schrift ueber der Umrandung, ohne Rollbalken.
	   Kurze Eintraege bleiben trotzdem einzeilig. */
	white-space: normal;
	text-decoration: none;
}

/* ⛔ Hybridgeraete: Ein Touch-Notebook oder ein iPad mit Tastatur meldet
   "hover: hover" UND hat einen Bildschirm zum Antippen. Dort waere der
   Umschaltknopf oben ausgeblendet, echtes Zeigen gibt es aber nicht - der
   Fingertipp auf "Historie" navigiert weg, die Unterpunkte waeren per Tipp
   nicht erreichbar. "any-pointer: coarse" trifft genau diese Geraete und
   holt den Knopf zurueck. */
@media (any-pointer: coarse) {
	/* ⛔ Der erste Selektor MUSS die Klasse twd-js mitfuehren. Ohne sie hat
	   diese Regel (0,3,1) und verliert gegen das Ausblenden weiter oben
	   (0,4,1) - @media erhoeht die Spezifitaet nicht. Auf einem
	   Touch-Notebook, das BEIDE Abfragen erfuellt, blieb der Knopf deshalb
	   verborgen, und die Unterpunkte waren per Fingertipp unerreichbar.
	   Bei gleicher Spezifitaet gewinnt diese Regel, weil sie spaeter steht. */
	.container-nav .mod-menu.twd-js > li > .mod-menu__toggle-sub,
	.container-nav .mod-menu > li > .mod-menu__toggle-sub {
		display: inline-flex;
	}
}

.container-nav .mod-menu__sub > li > a:hover,
.container-nav .mod-menu__sub > li > a:focus-visible {
	background-color: var(--twd-spalte-bg);
	color: var(--twd-blau-dunkel);
}

/* --- 4) Fusszeile: schmaler Streifen in der Hausfarbe, ohne Verweise ----- */
/* Pfad-Anzeige und Feed-Verweis sind unveroeffentlicht; uebrig bleibt eine
   Zeile mit dem Seitennamen. Sollte doch einmal ein Verweis dort landen,
   faellt er nicht auf - deshalb ist er hier mit abgedeckt. */
.container-footer,
.container-footer .footer {
	background-color: var(--twd-blau);
	border: 0;
	color: #ffffff;
	font-size: 11px;
	padding-block: 0;
	min-height: 0;
}

.container-footer > .grid-child {
	display: flex;
	flex-direction: column;
	/* ⛔ "stretch" MUSS ausdruecklich dastehen. Es ist zwar die Vorgabe der
	   Flexbox, Cassiopeia setzt hier aber "align-items: center" - nachgemessen
	   am gerenderten Ergebnis. Genau deshalb schrumpfte das Modul auf 198px
	   seiner Inhaltsbreite zusammen, obwohl der Container 1265px breit ist. */
	align-items: stretch;
	padding-block: 5px;
	min-height: 0;
}

/* Cassiopeia liess das Modul in der Fusszeile nur so breit werden wie sein
   Inhalt - gemessen 198px von 1265. Die Zentrierung im Absatz griff dadurch
   innerhalb eines schmalen Kastens am linken Rand und sah aus, als waere sie
   wirkungslos.
   Geloest ueber den CONTAINER (siehe oben), nicht ueber die Kinder:
   "align-items: stretch" ist die Vorgabe und macht jedes Kind von allein voll
   breit - fuer ein Modul wie fuer fuenf. Ein Universalselektor auf die Kinder
   haette bei einem zweiten Modul dazu gefuehrt, dass beide sich die Zeile
   teilen und auf dem Handy zu zwei schmalen Spalten zusammenschrumpfen. */

.container-footer p,
.container-footer .twd-fuss {
	margin: 0;
	text-align: center;
	color: #ffffff;
	font-size: 11px;
	line-height: 1.5;
}

.container-footer a,
.container-footer a:link,
.container-footer a:visited {
	color: #ffffff;
	text-decoration: underline;
}

/* --- Suchfeld in der rechten Spalte -------------------------------------- */
.container-sidebar-right .mod-finder {
	padding: 8px 10px;
}

.container-sidebar-right .mod-finder input[type="search"],
.container-sidebar-right .mod-finder input[type="text"] {
	font-size: 12px;
	min-height: 0;
	padding: 5px 8px;
}

.container-sidebar-right .mod-finder .btn {
	font-size: 12px;
	min-height: 0;
	padding: 5px 10px;
}


/* ===========================================================================
   ⛔ DER DRUCKBLOCK MUSS ALS LETZTES STEHEN.
   @media erhoeht die Spezifitaet NICHT. Die Druckregeln haben dieselbe
   Spezifitaet wie ihre Bildschirm-Gegenstuecke - bei Gleichstand entscheidet
   allein die Reihenfolge im Dokument. Stand dieser Block weiter oben, gewann
   z. B. die Fusszeilen-Farbe "weiss" gegen das "schwarz" von hier, und die
   Fusszeile war auf dem Blatt weiss auf weiss.
   Wer hier etwas ergaenzt: NICHTS darunter setzen.
   =========================================================================== */
/* --- Druckansicht -------------------------------------------------------- */
/* ⛔ Ohne diesen Block traegt ein Ausdruck KEINE Absenderkennung mehr:
   die Kopfgrafik ist ein Hintergrundbild (drucken Browser nicht), und der
   Seitentitel ist per CSS ausgeblendet. Vor der Umstellung stand dort ein
   Schriftzug. Beim Drucken wird der Titel deshalb wieder sichtbar. */
@media print {
	.container-header .brand-logo span,
	.container-header .site-title {
		position: static;
		width: auto;
		height: auto;
		overflow: visible;
		clip-path: none;
		color: #000000;
		font-size: 14pt;
		text-shadow: none;
	}

	.container-header,
	.container-header .navbar-brand,
	.container-header .brand-logo {
		min-height: 0;
		background-image: none;
	}

	.container-nav,
	.container-sidebar-left,
	.container-sidebar-right,
	.mod-login,
	.readmore {
		display: none;
	}

		/* main a hat (0,0,2) und verliert gegen main a:link (0,1,2) - @media
	   erhoeht die Spezifitaet nicht. Deshalb ausdruecklich mit :link. */
	main a:link,
	main a:visited {
		color: #000000;
		text-decoration: underline;
	}

	/* ⛔ Die Fusszeile ist weisse Schrift auf blauem Grund. Hintergrundfarben
	   druckt kein Browser standardmaessig - auf dem Blatt waere sie weiss auf
	   weiss und damit unsichtbar. Derselbe Fehler wie beim Seitentitel in §14
	   der Nachpruefung, nur eine Ebene tiefer. */
	.container-footer,
	.container-footer .footer,
	.container-footer p,
	.container-footer .twd-fuss {
		background: none;
		background-color: transparent;
		color: #000000;
		border-block-start: 1px solid #cccccc;
	}

	.container-footer a:link,
	.container-footer a:visited {
		color: #000000;
	}
}