/*
Theme Name:   Storefront Pomperlbuam
Theme URI:    https://www.fcb-pomperlbuam.de
Description:  Child-Theme von Storefront für den Bayernfanclub "Pomperlbuam" Bad Griesbach. Enthält Branding-Anpassungen (Vereinsfarben) sowie Anpassungen für Barrierefreiheit/einfache Bedienbarkeit (teils ältere Zielgruppe laut Projektdokumentation).
Author:       Pomperlbuam Bad Griesbach
Template:     storefront
Version:      0.13.0
Text Domain:  storefront-pomperlbuam

Warum ein Child-Theme statt Storefront direkt anzupassen: Storefront-Updates
überschreiben sonst jede manuelle Änderung. Ein Child-Theme bleibt von
Updates des Eltern-Themes unberührt - Pflicht laut WordPress-Codex bei
jeder nicht-trivialen Theme-Anpassung.
*/

/* -----------------------------------------------------------------------
   1. Barrierefreiheit / einfache Bedienbarkeit
   -----------------------------------------------------------------------
   Zielgruppe ist laut Projektdokumentation teils älter - größere
   Schrift und deutlichere Buttons helfen hier spürbar, ohne das
   Storefront-Layout grundlegend zu verändern.
*/
body {
	font-size: 17px; /* Storefront-Standard ist kleiner, hier bewusst angehoben. */
	line-height: 1.6;
}

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	font-size: 1.05em;
	padding: 0.8em 1.6em;
}

/* Größere Klickfläche für Formularfelder (Registrierung, Begleiter-Formular) */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.pb-begleiter-formular input,
.pb-begleiter-formular select {
	min-height: 44px; /* Empfohlene Mindestgröße für Touch-Ziele. */
	font-size: 1em;
}

/* -----------------------------------------------------------------------
   2. Vereinsfarben (Pomperlbuam: Rot-Weiß, Bayern-Blau im Abzeichen)
   -----------------------------------------------------------------------
   Werte direkt aus den bereitgestellten Logo-Dateien gemessen (Pins Kopie
   - Kopie.jpg / Pomperlbuam_Logo.jpg): reines Rot #FF0000 für die Haube,
   reines Blau #0000FF im Rautenmuster-Kreis des Abzeichens. Die
   Basis-Akzentfarbe lässt sich zusätzlich (und einfacher) über
   Design > Customizer > Farben einstellen, ohne Code anzufassen - dort
   ebenfalls #FF0000 setzen, dann greift es auch auf Buttons/Links, die
   Storefront selbst rendert. Diese Regeln hier sind für Stellen gedacht,
   die der Customizer nicht abdeckt.
*/
:root {
	--pb-rot: #ff0000;
	--pb-blau: #0000ff;
	--pb-weiss: #ffffff;
}

/* Kopfzeile/Seitenleiste dezent an die Vereinsfarbe angleichen, ohne die
   Storefront-Struktur zu verändern. */
a {
	color: var(--pb-rot);
}

a:hover,
a:focus {
	color: #cc0000;
}

.site-header {
	border-bottom: 3px solid var(--pb-rot);
}

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	background-color: var(--pb-rot);
	border-color: var(--pb-rot);
	color: var(--pb-weiss);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
	background-color: #cc0000;
	border-color: #cc0000;
}

.pb-hinweis.woocommerce-info {
	border-left: 4px solid var(--pb-rot);
}

.pb-zahlungsstatus--offen {
	color: var(--pb-rot);
	font-weight: 600;
}

.pb-zahlungsstatus--erledigt {
	color: #1a7f37;
	font-weight: 600;
}

/* -----------------------------------------------------------------------
   3. Begleiter-Formular (Modul 3) - visuell aufwerten
   -----------------------------------------------------------------------
   Ohne diese Regeln rendert WooCommerce die Felder als unstrukturierte
   graue Kästen direkt untereinander (Standard-Theme-Look). Hier bekommt
   jede Begleitung eine eigene, klar abgegrenzte Karte, "Entfernen" wird
   zum dezenten Textlink statt vollem Button (weniger visuelles Gewicht
   als "Begleitung hinzufügen"), und die Handling-Checkbox bekommt einen
   eigenen, auffälligen Rahmen, weil sie ein Pflichtfeld ist.
*/
.pb-begleiter-formular {
	margin: 28px 0;
	padding: 20px 24px;
	background: #fafafa;
	border: 1px solid #e5e5e5;
	border-radius: 10px;
}

.pb-begleiter-formular h4 {
	margin-top: 0;
	color: var(--pb-rot);
	font-size: 1.15em;
}

.pb-begleiter-zeile {
	background: #ffffff;
	border: 1px solid #dcdcdc;
	border-radius: 8px;
	padding: 18px 20px 8px;
	margin-bottom: 18px;
}

/* Die im PHP-Template enthaltene <hr> wird durch den Karten-Rahmen
   ersetzt und deshalb hier ausgeblendet, statt das Template anzufassen. */
.pb-begleiter-zeile hr {
	display: none;
}

.pb-begleiter-entfernen {
	background: none;
	border: none;
	color: #b32d2e;
	font-size: 0.9em;
	text-decoration: underline;
	cursor: pointer;
	padding: 0 0 12px;
	display: inline-block;
}

.pb-begleiter-entfernen:hover {
	color: #7a1e1e;
}

.pb-begleiter-hinzufuegen {
	margin-top: 6px;
}

.pb-handling-checkbox {
	background: #fff5f5;
	border-left: 3px solid var(--pb-rot);
	border-radius: 4px;
	padding: 14px 18px;
	margin-top: 20px;
}

.pb-hinweis {
	font-size: 0.9em;
	color: #555;
}

/* Erklärender Hinweis an der Warenkorb-Zeilensumme, wenn Begleiter-
   Gebühren dazukommen (siehe Modul 3, pb_begleiter_hinweis_an_zeilensumme). */
.pb-begleiter-preishinweis {
	color: #777;
	font-style: italic;
}

/* -----------------------------------------------------------------------
   4. Code-Login (Modul 9) auf der "Mein Konto"-Seite
   -----------------------------------------------------------------------
   Eigener, dezent abgegrenzter Kasten VOR dem normalen Passwort-Login,
   damit die Alternative klar erkennbar, aber nicht dominanter als das
   gewohnte Passwort-Formular wirkt. */
.pb-code-login {
	margin-bottom: 24px;
	padding: 18px 20px;
	background: #fafafa;
	border: 1px solid #e5e5e5;
	border-radius: 10px;
}

.pb-code-login h3 {
	margin-top: 0;
	color: var(--pb-rot);
}

.pb-code-login .pb-hinweis {
	margin-top: -6px;
}

.pb-code-formular input#pb_code_eingabe {
	letter-spacing: 0.3em;
	font-size: 1.3em;
	text-align: center;
	max-width: 160px;
}

.pb-code-login-trenner {
	margin: 24px 0;
	border: none;
	border-top: 1px solid #e5e5e5;
}

/* -----------------------------------------------------------------------
   5. "Wohin möchtest du?"-Buttons auf der Mein-Konto-Startseite (Modul 1)
   ----------------------------------------------------------------------- */
.pb-konto-kategorie-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 12px 0 28px;
}

.pb-konto-kategorie-button.button {
	flex: 1 1 180px;
	text-align: center;
}

/* -----------------------------------------------------------------------
   6. Kopfzeile umbauen: Logo mittig, schmaler, Menü/Suche/Warenkorb
   -----------------------------------------------------------------------
   Baut auf der Umsortierung in functions.php auf (pb_theme_header_layout_
   umbauen): links landet das Hauptmenü ("primary"), rechts eine
   gemeinsame Gruppe aus optionalem zweiten Menü ("secondary", unter
   Design > Menüs zuweisbar), Suche und Warenkorb - dazwischen mittig das
   Logo. Storefronts EIGENES CSS arbeitet an dieser Stelle noch mit
   Float/Breiten-Prozenten aus der Zeit vor CSS Grid (u. a.
   ".woocommerce-active .site-header .main-navigation{width:73.9%;
   float:left}" und "clear:both") - deshalb hier bewusst mit !important
   auf den strukturellen Grid-Eigenschaften, damit unsere Zeilen-Aufteilung
   zuverlässig gewinnt, unabhängig von Storefronts eigenen, ebenfalls sehr
   spezifischen Regeln.
*/
:root {
	--pb-header-hoehe: 72px;
}

.site-header {
	position: relative;
	border-bottom: 3px solid var(--pb-rot);
}

/* Kundenwunsch 16.08.: die Kopfzeile wirkte auf breiten Bildschirmen wie
   "abgeschnitten" bzw. mit seltsamen Lücken, weil Storefronts Standard-
   Container (".col-full") auch in der Kopfzeile auf eine feste Boxed-
   Breite (Storefront-Standard: 1190px) begrenzt ist. Die Kopfzeile bekommt
   deshalb hier - UND NUR HIER, der Rest der Seite bleibt boxed - die volle
   Bildschirmbreite mit eigenem seitlichem Innenabstand statt der zentrierten
   Box. */
.site-header .col-full {
	display: grid !important;
	grid-template-columns: 44px 1fr 44px;
	align-items: center;
	gap: 4px 10px;
	min-height: var(--pb-header-hoehe);
	padding-top: 8px;
	padding-bottom: 8px;
	max-width: none !important;
	width: 100% !important;
	padding-left: 20px;
	padding-right: 20px;
	box-sizing: border-box;
}

@media (min-width: 768px) {
	.site-header .col-full {
		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
		padding-left: 36px;
		padding-right: 36px;
	}
}

/* Logo etwas kleiner als im Original, aber nicht zu klein - so bleibt die
   Kopfzeile insgesamt schlank, ohne das Logo zu sehr zu schrumpfen. */
.site-branding {
	margin: 0 !important;
	grid-column: 2 !important;
	justify-self: center !important;
	text-align: center;
	width: auto !important;
	float: none !important;
}

.site-branding img,
.site-branding .custom-logo {
	max-height: 58px !important;
	max-width: 200px;
	width: auto;
	height: auto;
	display: block;
	margin: 0 auto;
}

.site-branding .site-title,
.site-branding .site-description {
	margin: 0;
	line-height: 1.2;
	font-size: 1.1em;
}

/* Hauptmenü links vom Logo - "justify-self: stretch" (statt "start") ist
   hier der entscheidende Unterschied: das Menü bekommt dadurch die VOLLE
   Breite seiner Grid-Spalte zugewiesen, statt sich (wie bei "start") nur
   auf die eigene Inhaltsbreite zusammenzuziehen und dadurch vorzeitig
   umzubrechen, obwohl daneben noch reichlich Platz frei wäre. */
.site-header nav#site-navigation.main-navigation {
	grid-column: 1 !important;
	justify-self: stretch !important;
	display: flex !important;
	align-items: center;
	position: static;
	width: 100% !important;
	float: none !important;
	clear: none !important;
	margin: 0 !important;
}

.site-header .primary-navigation {
	display: block;
	width: 100%;
	flex: 1 1 auto;
}

.site-header .primary-navigation > ul.menu {
	display: flex !important;
	flex-wrap: wrap;
	justify-content: flex-end; /* Menüpunkte rücken ans Logo heran statt eine
	                              Lücke mittig zwischen Menü und Logo zu lassen -
	                              übrig bleibender Freiraum wandert dadurch an
	                              den (jetzt unauffälligen) äußeren Rand. */
	gap: 4px 18px;
	margin: 0 !important;
	padding: 0;
	list-style: none;
	max-height: none !important;
	overflow: visible !important;
	width: 100%;
}

.site-header .primary-navigation > ul.menu > li {
	margin: 0;
	display: block !important;
}

.site-header .primary-navigation > ul.menu > li > a {
	display: block;
	padding: 8px 2px !important;
	color: #222;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.site-header .primary-navigation > ul.menu > li > a:hover,
.site-header .primary-navigation > ul.menu > li.current-menu-item > a {
	color: var(--pb-rot);
}

/* Rechte Gruppe: optionales zweites Menü ("secondary", direkt neben dem
   Logo - spiegelbildlich zum Hauptmenü links) + eine separate innere
   Gruppe aus Suche + Warenkorb, die per "margin-left:auto" an den
   rechten Rand gedrückt wird. Auch hier "justify-self: stretch" aus
   demselben Grund wie beim Hauptmenü oben. Ein zweites Menü erscheint
   nur, wenn unter Design > Menüs eine Struktur der Position "Sekundäres
   Menü" zugewiesen ist - ansonsten bleibt die Gruppe bei Suche +
   Warenkorb, ganz rechts, wie bisher. */
.pb-header-rechts {
	grid-column: 3 !important;
	justify-self: stretch !important;
	display: flex !important;
	align-items: center;
	justify-content: flex-end; /* Sekundärmenü + Suche/Warenkorb bilden EINE
	                              zusammenhängende Gruppe, die geschlossen an
	                              den rechten Rand rückt - vorher lag zwischen
	                              Menü und Icons eine auffällige Lücke. */
	gap: 20px;
	width: 100% !important;
	float: none !important;
	clear: none !important;
	margin: 0 !important;
}

.pb-header-rechts .secondary-navigation {
	margin: 0 !important;
	width: auto !important;
	float: none !important;
	clear: none !important;
	line-height: normal;
}

.pb-header-rechts .secondary-navigation .menu {
	display: flex !important;
	flex-wrap: wrap;
	gap: 4px 14px;
	margin: 0 !important;
	padding: 0;
	list-style: none;
	font-size: 1em !important;
	float: none !important;
}

.pb-header-rechts .secondary-navigation .menu a {
	padding: 8px 2px !important;
	color: #222 !important;
	font-weight: 600 !important;
	text-decoration: none;
	white-space: nowrap;
}

.pb-header-rechts .secondary-navigation .menu a:hover {
	color: var(--pb-rot) !important;
}

/* Innere Icon-Gruppe (Suche + Warenkorb) - "margin-left:auto" drückt sie
   an den rechten Rand, unabhängig davon, ob links davon ein zweites Menü
   steht oder nicht (siehe pb_theme_icon_gruppe_innen_oeffnen() im Theme). */
.pb-header-icons-innen {
	display: flex !important;
	align-items: center;
	gap: 10px; /* War 2px - Lupe und Warenkorb-Icon saßen dadurch praktisch
	              aneinander/wirkten überlappend. margin-left:auto entfernt
	              (siehe .pb-header-rechts oben): sonst hätte es die Gruppe
	              wieder auseinandergerissen und die alte Lücke zurückgebracht. */
	flex-shrink: 0;
}

/* Fund vom 16.08. (echter Seitenquelltext geprüft): die beiden Icon-Kreise
   überlappten nicht nur "eng", sondern lagen fast komplett übereinander.
   Ursache: der Such-Wrapper trug zusätzlich Storefronts EIGENE Klasse
   "site-search" (jetzt entfernt, siehe pb_theme_produktsuche_mit_icon() in
   functions.php) - Storefronts eigenes CSS positioniert Elemente mit
   dieser Klasse für SEIN eigenes Suchfeld-Icon, u.a. vermutlich mit
   position:absolute, wodurch unser Wrapper aus dem Flex-Fluss gerissen
   wurde. Diese Regel hier ist ein zusätzliches Sicherheitsnetz, falls
   irgendeine andere Storefront-Regel noch über Struktur/andere Selektoren
   dasselbe versucht - erzwingt normalen Fluss unabhängig davon. */
.pb-header-icons-innen > * {
	position: static !important;
	float: none !important;
	margin: 0 !important;
}

/* Menü-Toggle-Button (Hamburger) - nur am Handy sichtbar, siehe Media
   Query weiter unten. Storefronts eigenes Skript übernimmt weiterhin das
   Auf-/Zuklappen (Klasse "toggled" auf #site-navigation), hier nur die
   Optik. */
.site-header .menu-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: none;
	background: transparent;
	cursor: pointer;
	float: none;
	max-width: none;
}

.site-header .menu-toggle span {
	font-size: 0; /* Text "Menu" ausblenden, Icon kommt über ::before. */
}

/* Drei Balken per einzelnem Pseudo-Element (box-shadow für Balken 2 und 3)
   - robuster als mehrere Pseudo-Elemente, die mit Storefronts eigenen
   ::before/::after-Regeln für ".menu-toggle" kollidieren könnten. */
.site-header .menu-toggle::before {
	content: "";
	display: block;
	width: 24px;
	height: 2px;
	background: #222;
	position: static;
	transform: none !important;
	box-shadow: 0 7px 0 #222, 0 -7px 0 #222;
}

.site-header .menu-toggle::after {
	content: none !important;
}

/* Suche als Icon-Button, Formular klappt per Klick darunter auf (siehe
   pb_theme_suche_toggle_script() im Theme). */
.pb-search-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: none;
	background: #f7f7f7; /* dezenter, immer sichtbarer Kreis statt reinem
	                        Transparent - macht Lupe und Warenkorb-Icon auch
	                        ohne Hover klar als zwei getrennte Buttons erkennbar. */
	color: #222;
	cursor: pointer;
	border-radius: 50%;
	position: static !important; /* siehe Fund in .pb-header-icons-innen > *
	                                 weiter oben - Storefronts eigene
	                                 "site-search"-Klasse ist jetzt zwar aus
	                                 dem Markup entfernt, dieser Wert bleibt
	                                 trotzdem als explizite Absicherung. */
	flex: 0 0 44px;
}

.pb-search-toggle:hover,
.pb-search-toggle:focus {
	background: #f2f2f2;
	color: var(--pb-rot);
}

.pb-such-formular {
	display: none;
	position: absolute;
	top: var(--pb-header-hoehe);
	right: 0;
	left: 0;
	background: #fff;
	padding: 14px 20px;
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
	z-index: 50;
}

.pb-such-offen .pb-such-formular {
	display: block;
}

.pb-such-formular .woocommerce-product-search {
	display: flex;
	max-width: 480px;
	margin: 0 auto;
}

.pb-such-formular input.search-field {
	flex: 1 1 auto;
	min-height: 44px;
}

/* Warenkorb als Icon mit Mengen-Badge statt Preistext in der Kopfzeile -
   der genaue Betrag steht weiterhin im aufklappenden Mini-Warenkorb
   (WC_Widget_Cart, unverändert von Storefront übernommen, erscheint beim
   Hover/Fokus direkt neben dem Icon). */
#site-header-cart {
	list-style: none;
	margin: 0 !important;
	padding: 0;
	position: relative;
	width: auto !important;
	float: none !important;
	flex-shrink: 0;
}

#site-header-cart > li {
	margin: 0;
}

#site-header-cart .cart-contents {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	position: relative;
	color: #222;
	text-decoration: none;
	background: #f7f7f7; /* siehe .pb-search-toggle - gleiche dezente Kreisfläche,
	                        damit beide Icons als klar getrennte Buttons wirken. */
	overflow: hidden; /* Sicherheitsnetz: verhindert, dass die (eigentlich
	                      ausgeblendete) Preisangabe oder sonstiger Inhalt
	                      optisch über den 44px-Kreis hinaus in Richtung
	                      Such-Icon "ausläuft". */
}

#site-header-cart .cart-contents:hover {
	background: #f2f2f2;
	color: var(--pb-rot);
}

#site-header-cart .pb-cart-total {
	display: none !important;
}

#site-header-cart .cart-contents::before {
	content: "";
	display: block;
	width: 24px;
	height: 22px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23222' d='M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12L8.1 13h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49A.996.996 0 0020 4H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
}

#site-header-cart .count {
	position: absolute;
	top: 2px;
	right: 2px;
	min-width: 16px;
	height: 16px;
	padding: 0 3px;
	border-radius: 8px;
	background: var(--pb-rot);
	color: #fff;
	font-size: 11px;
	line-height: 16px;
	text-align: center;
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
}

/* Mini-Warenkorb (Hover-Widget): fester, ausreichend breiter Kasten -
   OHNE feste Breite würde er die Breite seines jetzt schmalen
   positionierten Elternelements (des 44px breiten Warenkorb-Icons)
   erben und Wörter wie "Zwischensumme" dadurch buchstabenweise
   umbrechen. */
#site-header-cart .widget_shopping_cart {
	position: absolute;
	top: 100%;
	right: 0;
	z-index: 50;
	width: 300px !important;
	max-width: 90vw !important;
	background: #fff;
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
	padding: 16px;
}

#site-header-cart .widget_shopping_cart_content,
#site-header-cart .woocommerce-mini-cart {
	width: 100%;
}

/* Kundenwunsch 16.08.: der Mini-Warenkorb zeigt falsche Summen (WooCommerce-
   Kern berechnet die Zwischensumme/MwSt.-Zeile dort - wie im Kommentar oben
   bei pb_theme_cart_link_mit_gesamtsumme() erklärt - bewusst OHNE die als
   Warenkorb-Gebühr hinterlegten Begleiter-Preise, siehe Modul 3 im Plugin).
   Statt die Rechenlogik im Mini-Cart-Widget selbst nachzubauen, werden die
   Summenzeilen hier komplett entfernt - der tatsächliche, korrekte
   Gesamtbetrag bleibt weiterhin auf der echten Warenkorb-/Kassenseite
   sichtbar. Der Preis je Position wird ebenfalls ausgeblendet (auch der
   "1 ×"-Text, sonst hinge er ohne Preis dahinter). Siehe zusätzlich
   pb_theme_mini_cart_zwischensumme_entfernen() in functions.php, das die
   Zwischensummen-Zeile bereits serverseitig gar nicht erst ausgibt - die
   CSS-Regel hier ist nur das Sicherheitsnetz für alles, was trotzdem noch
   gedruckt wird (z. B. eine zusätzliche MwSt.-Zeile von Germanized). */
#site-header-cart .woocommerce-mini-cart-item .quantity,
#site-header-cart .woocommerce-mini-cart__total,
#site-header-cart .widget_shopping_cart_content > p:not(.woocommerce-mini-cart__buttons) {
	display: none !important;
}

/* -----------------------------------------------------------------------
   6a. Handy (< 768px): Logo mittig, Menü-Icon direkt daneben
   -----------------------------------------------------------------------
   Das sekundäre Menü (rechts neben Logo am Desktop) wird am Handy per
   JavaScript (pb_theme_suche_toggle_script() im Theme, Funktion
   "pbMobilesMenueAnordnen") tatsächlich in #site-navigation UMGEHÄNGT -
   direkt hinter das Hauptmenü. Dadurch erscheint es beim Aufklappen ganz
   normal ALS TEIL desselben aufklappenden Menüs, direkt darunter, statt
   in einer eigenen, unabhängig positionierten Box (die sonst über das
   Hauptmenü drüber gerendert hätte, weil beide sonst unabhängig
   voneinander "position: fixed" bräuchten).
*/
@media (max-width: 767px) {
	.site-header .menu-toggle {
		display: flex !important;
	}

	.site-header .primary-navigation,
	.site-header .handheld-navigation,
	.site-header #site-navigation .secondary-navigation {
		display: none !important;
	}

	.site-header nav#site-navigation.main-navigation.toggled {
		display: block !important;
		position: fixed;
		top: var(--pb-header-hoehe);
		left: 0;
		right: 0;
		bottom: 0;
		background: #fff;
		overflow-y: auto;
		padding: 20px;
		z-index: 100;
	}

	.site-header nav#site-navigation.main-navigation.toggled .primary-navigation,
	.site-header nav#site-navigation.main-navigation.toggled .handheld-navigation,
	.site-header nav#site-navigation.main-navigation.toggled .secondary-navigation {
		display: block !important;
	}

	.site-header .primary-navigation > ul.menu,
	.site-header #site-navigation .secondary-navigation .menu {
		flex-direction: column;
		justify-content: flex-start !important; /* "flex-end" von oben ist nur
		                                            für die einzeilige Desktop-
		                                            Ausrichtung gedacht - in der
		                                            aufgeklappten mobilen Spalte
		                                            sollen die Punkte oben
		                                            beginnen, nicht unten. */
		gap: 0;
	}

	.site-header .primary-navigation > ul.menu > li > a,
	.site-header #site-navigation .secondary-navigation .menu a {
		padding: 14px 4px !important;
		border-bottom: 1px solid #eee;
	}

	.site-header #site-navigation .secondary-navigation {
		margin-top: 20px !important;
		padding-top: 8px;
		border-top: 2px solid var(--pb-rot);
	}

	.pb-such-formular {
		top: var(--pb-header-hoehe);
	}
}

/* -----------------------------------------------------------------------
   6b. Ab Tablet-Breite (>= 768px): Hamburger aus, normales Menü sichtbar
   ----------------------------------------------------------------------- */
@media (min-width: 768px) {
	.site-header .menu-toggle {
		display: none !important;
	}

	.site-header .primary-navigation,
	.pb-header-rechts .secondary-navigation {
		display: block !important;
	}

	.site-header nav#site-navigation.main-navigation.toggled {
		position: static;
		background: none;
		padding: 0;
	}
}

/* -----------------------------------------------------------------------
   7. Produktbild als breites "Hero"-Bild auf der Produktseite
   ----------------------------------------------------------------------- */
.woocommerce div.product {
	display: block;
}

.woocommerce div.product div.images,
.woocommerce div.product div.summary {
	width: 100% !important;
	float: none !important;
	margin: 0 0 28px !important;
}

.woocommerce div.product div.images {
	border-radius: 12px;
	overflow: hidden;
}

.woocommerce div.product div.images img {
	width: 100%;
	height: 420px;
	object-fit: cover;
	display: block;
}

@media (max-width: 600px) {
	.woocommerce div.product div.images img {
		height: 220px;
	}
}

/* -----------------------------------------------------------------------
   8. "Team vs. Team"-Spielkarte (Fußballfahrten mit gepflegter Heim-/
      Auswärtsmannschaft, siehe Modul 2 im Buchungs-Plugin)
   ----------------------------------------------------------------------- */
.pb-spielkarte {
	margin: 0 0 18px;
}

.pb-spielkarte-teams {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	flex-wrap: wrap;
	text-align: center;
}

/* Auf der Produktseite bewusst deutlich kleiner als ursprünglich (war zu
   dominant/groß) - hier nur noch ein moderater Aufschlag gegenüber der
   Übersichts-Kachel, kein "Hero"-Format mehr. */
.pb-spielkarte--produktseite .pb-spielkarte-teams {
	gap: 16px;
}

.pb-team {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	min-width: 90px;
}

.pb-team-icon {
	font-size: 1.6em;
}

.pb-spielkarte--produktseite .pb-team-icon {
	font-size: 1.8em;
}

.pb-team-name {
	font-weight: 700;
	font-size: 1.05em;
	line-height: 1.2;
}

.pb-spielkarte--produktseite .pb-team-name {
	font-size: 1.15em;
}

.pb-vs {
	font-weight: 700;
	color: var(--pb-rot);
	font-size: 1.1em;
	text-transform: uppercase;
}

.pb-spielkarte-datum,
.pb-spielkarte-spieltag {
	margin: 4px 0 0;
	text-align: center;
	color: #444;
	font-weight: 600;
	font-size: 0.95em;
}

.pb-spielkarte--produktseite .pb-spielkarte-datum {
	margin-top: 10px;
}

.pb-spielkarte-spieltag {
	color: #777;
	font-weight: 500;
}

.pb-spielkarte-ort {
	margin: 6px 0 0;
	text-align: center;
	color: #666;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	flex-wrap: wrap;
}

.pb-platzart-badge {
	display: inline-block;
	background: var(--pb-rot);
	color: #fff;
	font-size: 0.8em;
	font-weight: 700;
	padding: 2px 10px;
	border-radius: 12px;
}

/* "Ausgebucht"-Abzeichen (Besprechung 24.08.) - bewusst dunkles Grau statt
   Vereinsrot, damit es sich klar von den positiven/neutralen Badges
   (Platzart, Status) abhebt und sofort als "nicht mehr buchbar" lesbar
   ist. Sitzt oben in der Spielkarte (siehe pb_spielkarte_zusatz-Hook in
   Modul 2), text-transform statt hart geschriebener Großbuchstaben im
   PHP-String - so bleibt der Quelltext für Screenreader normal lesbar. */
.pb-ausgebucht-badge {
	display: inline-block;
	background: #333;
	color: #fff;
	font-size: 0.85em;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 4px 14px;
	border-radius: 12px;
	margin: 0 0 8px;
}

/* Mitglieder-Werbe-Abzeichen (27.08., Rückmeldung Lukas: Veranstaltungen
   nur für Mitglieder) - bewusst in Vereinsrot statt Grau wie das
   Ausgebucht-Abzeichen: hier geht es nicht um "nicht mehr verfügbar",
   sondern um eine positive Einladung ("werde Mitglied"), soll deshalb
   freundlicher/einladender wirken statt wie eine Sperre. Sitzt wie das
   Ausgebucht-Abzeichen oben in der Spielkarte/Veranstaltungskarte (siehe
   pb_spielkarte_zusatz-Hook in Modul 2). */
.pb-mitglieder-badge {
	display: inline-block;
	background: var(--pb-rot);
	color: #fff;
	font-size: 0.85em;
	font-weight: 700;
	letter-spacing: 0.02em;
	padding: 4px 14px;
	border-radius: 12px;
	margin: 0 8px 8px 0;
}

.pb-mitglieder-badge--warten {
	background: #fff;
	color: var(--pb-rot);
	border: 2px solid var(--pb-rot);
}

/* Werbehinweis auf der Einzelproduktseite direkt unter der Sperr-/Warte-
   Meldung (siehe pb_render_mitglieder_werbehinweis() in Modul 2). */
.pb-mitglieder-werbung {
	border-left: 4px solid var(--pb-rot);
	padding-left: 12px;
}

.pb-mitglieder-werbung a {
	font-weight: 700;
	white-space: nowrap;
}

/* Gleicher Wortlaut auf der Einzelproduktseite (siehe pb_bestand_html_anpassen()
   in Modul 2, Ersatz für WooCommerces Standard-Bestandstext). */
.pb-ausgebucht-hinweis {
	display: inline-block;
	background: #333;
	color: #fff;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 6px 16px;
	border-radius: 12px;
	margin: 12px 0;
}

.pb-spielkarte--archiv {
	padding: 4px 0;
}

/* Mobil-Optimierung: nochmal kleiner + engerer Abstand, damit die Karte
   auf schmalen Bildschirmen nicht die Hälfte des sichtbaren Bereichs
   einnimmt. */
@media (max-width: 480px) {
	.pb-spielkarte--produktseite .pb-spielkarte-teams {
		gap: 10px;
	}

	.pb-team {
		min-width: 72px;
	}

	.pb-spielkarte--produktseite .pb-team-icon {
		font-size: 1.3em;
	}

	.pb-spielkarte--produktseite .pb-team-name {
		font-size: 0.95em;
	}

	.pb-vs {
		font-size: 0.9em;
	}

	.pb-spielkarte-datum,
	.pb-spielkarte-spieltag {
		font-size: 0.85em;
	}

	.pb-platzart-badge {
		font-size: 0.75em;
		padding: 2px 8px;
	}
}

/* -----------------------------------------------------------------------
   8b. "Veranstaltungskarte" - wie die Spielkarte oben, aber für Fahrten/
   Veranstaltungen OHNE Fußball-Spieldaten (Oktoberfest, Werksbesichtigung,
   Weihnachtsmarkt ...), damit sie optisch zur selben Familie gehören statt
   wie ein nackter Standardtitel zu wirken (Feedback 27.08.). Bewusst
   eigene, einfachere Klassen statt die Spielkarten-Klassen wiederzuverwenden
   - kein Heim-/Auswärts-Layout nötig, nur Name + Termin. */
.pb-veranstaltungskarte {
	margin: 0 0 18px;
	text-align: center;
}

.pb-veranstaltungskarte-name {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-weight: 700;
	font-size: 1.15em;
	line-height: 1.3;
	margin: 0;
}

.pb-veranstaltungskarte--produktseite .pb-veranstaltungskarte-name {
	font-size: 1.3em;
}

.pb-veranstaltungskarte-icon {
	font-size: 1.3em;
}

.pb-veranstaltungskarte-datum {
	margin: 6px 0 0;
	color: #444;
	font-weight: 600;
	font-size: 0.95em;
}

.pb-veranstaltungskarte--produktseite .pb-veranstaltungskarte-datum {
	margin-top: 10px;
	font-size: 1em;
}

.pb-veranstaltungskarte--archiv {
	padding: 4px 0;
}

@media (max-width: 480px) {
	.pb-veranstaltungskarte--produktseite .pb-veranstaltungskarte-name {
		font-size: 1.1em;
	}

	.pb-veranstaltungskarte-datum {
		font-size: 0.85em;
	}
}

/* -----------------------------------------------------------------------
   9. Personalisierte Status-Anzeige & Frage-Formular (17.08.)
   -----------------------------------------------------------------------
   Kundenwunsch: Zielgruppe teils wenig digital-affin - überall soll
   erkennbar sein, wer eingeloggt ist und woran der Account gerade hängt
   (Kopfzeile, site-weites Banner, Mein-Konto-Hinweis, siehe Modul 1
   Abschnitt 12 im Buchungs-Plugin) sowie ein präsentes Kontaktformular
   für Fragen (Modul 11).
*/

/* Personalisierter Status/Login-Link in der Kopfzeile (siehe
   pb_theme_status_anzeige_im_header() in functions.php) - sitzt in
   derselben Icon-Gruppe wie Suche/Warenkorb, deshalb bewusst kompakt und
   ohne eigenen Kreis-Hintergrund (würde neben den runden Icons unruhig
   wirken). */
.pb-header-status {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	font-size: 0.85em;
	font-weight: 600;
	padding: 6px 12px;
	border-radius: 20px;
	text-decoration: none;
	background: #f7f7f7;
	color: #222;
}

.pb-header-status:hover {
	background: #eee;
	color: var(--pb-rot);
}

.pb-header-status--login,
.pb-header-status--aktiv {
	background: var(--pb-rot);
	color: var(--pb-weiss) !important;
}

.pb-header-status--login:hover,
.pb-header-status--aktiv:hover {
	background: #a30000;
	color: var(--pb-weiss) !important;
}

.pb-header-status--warnung {
	background: #fff3cd;
	color: #7a5b00;
}

.pb-header-status--info {
	background: #e7f3ff;
	color: #0a4a7a;
}

@media (max-width: 767px) {
	/* Auf sehr schmalen Bildschirmen bleibt nur Platz für den kurzen Teil -
	   der Name bleibt trotzdem im Markup (Screenreader/Tablet), wird hier
	   nur visuell verkürzt, kein Inhaltsverlust. */
	.pb-header-status {
		max-width: 46vw;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}

/* Site-weites Status-Banner (siehe pb_theme_status_banner(), Hook
   "wp_body_open") - läuft über die volle Breite direkt unter der
   Kopfzeile, damit eine offene Aktion (E-Mail bestätigen) oder ein
   laufender Prüfstatus nicht übersehen werden kann, egal auf welcher
   Unterseite man gerade ist. */
.pb-status-banner {
	width: 100%;
	text-align: center;
	padding: 12px 20px;
	font-size: 1em;
	line-height: 1.5;
	box-sizing: border-box;
}

.pb-status-banner-inner {
	max-width: 900px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	align-items: center;
	justify-content: center;
}

.pb-status-banner-inner a {
	font-weight: 700;
	text-decoration: underline;
	white-space: nowrap;
}

.pb-status-banner--warnung {
	background: #fff3cd;
	color: #7a5b00;
	border-bottom: 2px solid #f0c14b;
}

.pb-status-banner--warnung a {
	color: #7a5b00;
}

.pb-status-banner--info {
	background: #e7f3ff;
	color: #0a4a7a;
	border-bottom: 2px solid #a9d3f5;
}

.pb-status-banner--info a {
	color: #0a4a7a;
}

/* Status-Hinweis auf der Mein-Konto-Startseite (siehe
   pb_render_status_hinweis_im_konto() im Buchungs-Plugin) - nutzt die
   WooCommerce-Klasse "woocommerce-info" als Basis (passt automatisch zum
   restlichen Theme), Farbvariante nur beim Rahmen. */
.pb-status-hinweis {
	font-size: 1.05em;
}

.pb-status-hinweis--warnung {
	border-top-color: #f0c14b !important;
}

.pb-status-hinweis--info {
	border-top-color: #a9d3f5 !important;
}

/* "Du hast eine Frage?"-Hinweis unter den Mein-Konto-Buttons (siehe
   pb_render_navigations_hilfe_block() im Buchungs-Plugin) - dezenter als
   die großen Buttons, aber trotzdem gut lesbar. */
.pb-frage-hinweis {
	margin-top: 4px;
	font-size: 1.05em;
}

/* Frage-Kontaktformular (Modul 11) - selbes Feld-Design wie das
   Registrierungsformular (siehe Abschnitt 1: größere Schrift/Klickflächen
   für die teils ältere Zielgruppe), deshalb hier bewusst schlank gehalten. */
.pb-frage-formular .form-row {
	margin-bottom: 16px;
}

.pb-frage-formular textarea.woocommerce-Input {
	width: 100%;
	box-sizing: border-box;
}

.pb-datenschutz-label {
	display: block;
	font-weight: normal;
	line-height: 1.5;
}

/* IBAN-Änderung-Block im Checkout (Modul 5, Feedback Armin 25.08.) -
   dezent von der Rechnungsadresse abgesetzt, nutzt sonst dieselben
   .form-row/.pb-feld-hinweis-Klassen wie überall im Shop. */
.pb-iban-aenderung-block {
	margin: 20px 0;
	padding-top: 16px;
	border-top: 1px solid #e2e2e2;
}

.pb-iban-feld-wrapper {
	margin-top: 8px;
}

/* Honeypot-Feld gegen Spam-Bots (siehe pb_frage_formular_shortcode()) -
   für echte Nutzer unsichtbar, aber weiterhin Teil des normalen
   Dokumentflusses statt display:none (manche Screenreader/Bots ignorieren
   display:none gezielt beim Ausfüllen, "position:absolute + weit
   außerhalb" ist die robustere Methode). */
.pb-honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}