/* =========================================================================
   user.css – Cassiopeia (Joomla 6)
   Look angelehnt an die alte JP-Flexible-Seite (Kultur im Kloster)
   Nutzt AUSSCHLIESSLICH Cassiopeia-eigene Klassen/Variablen – kein
   Child-Template, keine eigene index.php nötig.

   Datei ablegen unter: media/templates/site/cassiopeia/css/user.css
   (System -> Website-Vorlagen: Stile -> Cassiopeia -> Details und Dateien)
   ========================================================================= */

/* -------------------------------------------------------------------------
   0) HINWEIS: Damit die Sidebar wirklich am linken Bildschirmrand klebt
   (keine graue/weiße Lücke links), muss im Template-Stil unter
   System -> Website-Vorlagen: Stile -> [dein Stil] -> Tab "Erweitert"
   das Feld "Layout" von "Statisch" auf "Fluid" gestellt werden.
   Das ist eine offizielle Cassiopeia-Option, keine CSS-Änderung nötig.
   ------------------------------------------------------------------------- */
body {
	overflow-x: hidden; /* verhindert horizontalen Scrollbalken durch den Full-Bleed-Trick weiter unten */
	--cassiopeia-color-primary: #9c2b2a;   /* Rotton wie im alten Template */
	--cassiopeia-color-hover:   #7a2120;
	--cassiopeia-color-link:    #2a5d84;
}

a {
	color: var(--cassiopeia-color-link);
}
a:hover {
	color: var(--cassiopeia-color-hover);
}

/* -------------------------------------------------------------------------
   2) Linke Sidebar (Position "sidebar-left")
   Dort ordnest du im Backend zu: Suchfeld-Modul, Hauptmenü-Modul,
   ggf. ein Custom-HTML-Modul für den "Karten online kaufen"-Button.
   ------------------------------------------------------------------------- */
.container-sidebar-left {
	position: relative;
	background: linear-gradient(180deg, rgba(109, 157, 192, 0.86) 0%, rgba(60, 111, 150, 0.86) 100%);
	color: #ffffff;
	padding: 1.5rem 1rem;
	z-index: 1;
}

/* Füllt NUR den Hintergrund bis zum linken Viewport-Rand auf,
   ohne die Box selbst (und damit Logo/Menü-Inhalt) zu verschieben. */
.container-sidebar-left::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	right: 100%;
	width: 100vw;
	background: inherit;
	z-index: -1;
}

.container-sidebar-left a {
	color: #ffffff;
	text-decoration: none;
}

.container-sidebar-left a:hover {
	background-color: rgba(255, 255, 255, 0.15);
}

/* Falls einzelne Module trotzdem noch als "Card" gerendert werden
   (z.B. weil der Modul-Stil noch nicht auf "Kein" umgestellt wurde),
   hier zur Sicherheit die Card-Optik entfernen: */
.container-sidebar-left .card {
	background: transparent;
	border: none;
	margin: 0;
	box-shadow: none;
}

/* Suchfeld */
.container-sidebar-left input[type="text"],
.container-sidebar-left input[type="search"] {
	border: none;
	border-radius: 20px;
	padding: 0.4rem 1rem;
	width: 100%;
	margin-bottom: 1rem;
}

/* Menü - deckt sowohl <ul class="menu"> als auch Bootstrap-Nav-Varianten ab */
.container-sidebar-left ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.container-sidebar-left ul li {
	border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.container-sidebar-left ul li:last-child {
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.container-sidebar-left ul li a {
	display: block;
	padding: 0.75rem 0.5rem;
	text-transform: uppercase;
	font-size: 0.9rem;
	letter-spacing: 0.03em;
}

/* CTA-Button, z.B. "Karten online kaufen" (Custom-HTML-Modul mit
   einem Link/Button in der Sidebar-Position) */
.container-sidebar-left .btn,
.container-sidebar-left .cta-button {
	display: block;
	background-color: var(--cassiopeia-color-primary);
	color: #ffffff;
	text-align: center;
	padding: 0.8rem 1rem;
	margin-top: 1rem;
	text-transform: uppercase;
	font-size: 0.9rem;
	border-radius: 2px;
}

.container-sidebar-left .btn:hover,
.container-sidebar-left .cta-button:hover {
	background-color: var(--cassiopeia-color-hover);
}

/* -------------------------------------------------------------------------
   3) Logo-Bereich in der Sidebar (eigenes Custom-HTML-Modul, über dem Menü)
   ------------------------------------------------------------------------- */
.sidebar-logo {
	text-align: center;
	margin-bottom: 1.5rem;
}

.sidebar-logo img {
	max-width: 80%;
	height: auto;
}

/* Falls stattdessen Cassiopeias eingebautes Logo (Template-Optionen -> Brand)
   im normalen Header verwendet wird: */
.navbar-brand,
.site-title {
	font-weight: 700;
	color: var(--cassiopeia-color-primary);
}

/* -------------------------------------------------------------------------
   4) Überschriften im Content-Bereich
   ------------------------------------------------------------------------- */
h1, h2 {
	border-bottom: 2px solid var(--cassiopeia-color-primary);
	padding-bottom: 0.5rem;
}

/* -------------------------------------------------------------------------
   5) Footer
   ------------------------------------------------------------------------- */
.footer {
	background: #222222;
	color: #cccccc;
}

.footer a {
	color: #cccccc;
}

/* -------------------------------------------------------------------------
   7b) Desktop: Sidebar fixieren (volle Höhe, feste Breite, kein Mitscrollen)
   ------------------------------------------------------------------------- */
@media (min-width: 992px) {
	.site-grid {
		display: block; /* Cassiopeia-Grid für diesen Bereich deaktivieren */
	}

	.container-sidebar-left {
		position: fixed !important;
		top: 0;
		left: 0;
		right: auto !important;
		bottom: 0;
		width: 320px !important;
		max-width: 320px !important;
		flex: none !important;
		overflow-y: auto;
		z-index: 1000;
	}

	.container-component {
		margin-left: calc(320px + 2rem) !important;
		max-width: 75vw !important;
		width: auto !important;
		flex: none !important;
	}

	.container-footer,
	.footer {
		margin-left: 320px;
	}
}

/* -------------------------------------------------------------------------
   7c) Mobile: Menü als Dropdown (Button + kleines JavaScript im Toggle-Modul,
   siehe "toggle-modul-inhalt.html" - das steuert das Ein-/Ausblenden direkt
   über die eindeutige ID #mod-menu1, keine CSS-Selektor-Tricks mehr nötig)
   ------------------------------------------------------------------------- */
.jp-menu-toggle-label {
	display: none; /* wird per JS bei Bedarf auf "block" gesetzt */
	width: 100%;
	cursor: pointer;
	background-color: rgba(255, 255, 255, 0.15);
	color: #ffffff;
	border: none;
	padding: 0.7rem 1rem;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	border-radius: 4px;
	margin: 0.5rem 0;
}


/* -------------------------------------------------------------------------
   7) Mobile: Reihenfolge erzwingen, damit die Sidebar (Logo+Menü) VOR
   dem Beitragsbereich erscheint, statt danach.
   ------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
	.site-grid {
		display: flex;
		flex-direction: column;
	}

	.container-sidebar-left {
		order: 1;
	}

	.container-component {
		order: 2;
	}

	.container-footer,
	.footer {
		order: 3;
	}
}
/* -------------------------------------------------------------------------
   6) Seitenhintergrund-Foto wie im alten Template
   ------------------------------------------------------------------------- */
body {
	background: #222222 url('/images/headers/Hintergrund.jpg') no-repeat center center fixed;
	background-size: cover;
}

/* Damit der Seiteninhalt trotz Hintergrundfoto gut lesbar bleibt, bekommt
   NUR der Beitragsbereich (nicht die ganze Breite/Sidebar) einen weißen
   Kasten - siehe .container-component weiter unten. */

/* Der Bereich, in dem die Beiträge/Artikel selbst erscheinen
   (Cassiopeia-Klasse "container-component") - explizit weiß: */
.container-component {
	background-color: #ffffff;
	padding: 1.5rem;
}