/* ==========================================================================
   bsg1995.css – eigene Styles für die selbst geschriebenen PHP-Dateien
   --------------------------------------------------------------------------
   Unabhängig von Tailwind / RapidWeaver Elements:
   - alle Klassen beginnen mit "bsg-"  -> keine Namenskonflikte mit RW
   - keine globalen Element-Resets      -> RW-Layout bleibt unberührt
   Einbinden (geschieht automatisch über bsg_css()):
     <link rel="stylesheet" href="/bsg1995.css">
   ========================================================================== */

:root {
	--bsg-blau-900: #1e3a8a;
	--bsg-blau-800: #1e40af;
	--bsg-blau-700: #1d4ed8;
	--bsg-blau-600: #2563eb;
	--bsg-blau-500: #3b82f6;
	--bsg-blau-400: #60a5fa;
	--bsg-blau-200: #bfdbfe;
	--bsg-blau-100: #dbeafe;
	--bsg-grau-800: #1f2937;
	--bsg-grau-700: #374151;
	--bsg-grau-500: #6b7280;
	--bsg-grau-400: #9ca3af;
	--bsg-grau-300: #d1d5db;
	--bsg-grau-200: #e5e7eb;
	--bsg-grau-100: #f3f4f6;
	--bsg-gelb-100: #fef9c3;
	--bsg-gelb-300: #fde047;
	--bsg-gelb-800: #854d0e;
	--bsg-gelb-900: #713f12;
	--bsg-amber-200: #fde68a;
	--bsg-amber-900: #78350f;
	--bsg-orange-400: #fb923c;
	--bsg-gruen-100: #dcfce7;
	--bsg-gruen-400: #4ade80;
	--bsg-gruen-600: #16a34a;
	--bsg-gruen-700: #15803d;
	--bsg-rot-100: #fee2e2;
	--bsg-rot-600: #dc2626;
	--bsg-rot-700: #b91c1c;
	--bsg-radius: 0.5rem;
	--bsg-schatten: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
	--bsg-fokus: 0 0 0 3px rgb(59 130 246 / 0.45);
}

/* ---------- Grundcontainer --------------------------------------------- */
.bsg {
	color: var(--bsg-grau-800);
	line-height: 1.5;
}
.bsg *,
.bsg *::before,
.bsg *::after {
	box-sizing: border-box;
}

.bsg-wrap      { width: 100%; max-width: 64rem; margin: 0 auto; padding: 1rem; }
.bsg-wrap--sm  { max-width: 24rem; }
.bsg-wrap--md  { max-width: 28rem; }
.bsg-wrap--lg  { max-width: 36rem; }
.bsg-wrap--xl  { max-width: 56rem; }

.bsg-card {
	background: var(--bsg-grau-100);
	border-radius: var(--bsg-radius);
	box-shadow: var(--bsg-schatten);
	padding: 2rem;
	margin: 1rem auto 2rem;
}
.bsg-card--weiss { background: #fff; }
.bsg-card--flach { box-shadow: none; padding: 1rem; }

.bsg-panel {
	background: #fff;
	border: 1px solid var(--bsg-grau-200);
	border-radius: 0.375rem;
	box-shadow: 0 1px 3px rgb(0 0 0 / 0.1);
	padding: 1rem;
}

/* ---------- Überschriften / Text --------------------------------------- */
.bsg-h1 { font-size: 1.5rem; font-weight: 700; color: var(--bsg-grau-800); margin: 0 0 1.5rem; text-align: center; }
.bsg-h2 { font-size: 1.125rem; font-weight: 600; color: var(--bsg-blau-800); margin: 0 0 0.75rem; }
.bsg-text-center { text-align: center; }
.bsg-text-right  { text-align: right; }
.bsg-muted       { color: var(--bsg-grau-500); }
.bsg-fett        { font-weight: 700; }
.bsg-nowrap      { white-space: nowrap; }
.bsg-error-text  { color: var(--bsg-rot-600); font-weight: 600; text-align: center; }
.bsg-hidden      { display: none !important; }
.bsg-block       { display: block; }
.bsg-mitte       { margin-left: auto; margin-right: auto; }
.bsg-ohne-rand   { margin-left: 0; padding: 0; }

.bsg-mt   { margin-top: 1rem; }
.bsg-mb   { margin-bottom: 1rem; }
.bsg-mb-lg{ margin-bottom: 1.5rem; }

/* ---------- Formulare -------------------------------------------------- */
.bsg-field { margin-bottom: 1rem; }

.bsg-label {
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--bsg-grau-700);
	margin-bottom: 0.4rem;
}

.bsg-input,
.bsg-select,
.bsg-textarea {
	display: block;
	width: 100%;
	min-width: 0;
	padding: 0.5rem 0.75rem;
	font: inherit;
	font-size: 1rem;
	line-height: 1.4;
	color: var(--bsg-grau-700);
	background: var(--bsg-grau-200);
	border: 1px solid var(--bsg-grau-400);
	border-radius: 0.375rem;
	box-shadow: none;
}
.bsg-select { cursor: pointer; }
.bsg-textarea { min-height: 5rem; resize: vertical; }
.bsg-input:focus,
.bsg-select:focus,
.bsg-textarea:focus {
	outline: none;
	border-color: var(--bsg-blau-500);
	box-shadow: var(--bsg-fokus);
}
.bsg-input[readonly] { background: var(--bsg-grau-200); cursor: default; }

/* Auswahlfelder in blauen Tabellen */
.bsg-select--blau {
	border-color: var(--bsg-blau-800);
	color: var(--bsg-blau-800);
	background: #fff;
}
.bsg-select--schmal { width: 5rem; padding: 0.25rem 0.5rem; }

.bsg-grid-2 {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
}
.bsg-grid-3 {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
}
.bsg-grid-responsive {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1rem;
}
@media (min-width: 768px) {
	.bsg-grid-responsive { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.bsg-span-2 { grid-column: 1 / -1; }

/* ---------- Buttons ---------------------------------------------------- */
.bsg-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0.5rem 1rem;
	font: inherit;
	font-weight: 600;
	line-height: 1.4;
	color: #fff;
	background: var(--bsg-blau-600);
	border: 2px solid transparent;
	border-radius: var(--bsg-radius);
	cursor: pointer;
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.bsg-btn:hover        { background: var(--bsg-blau-700); }
.bsg-btn:focus-visible{ outline: none; box-shadow: 0 0 0 3px rgb(74 222 128 / 0.75); }
.bsg-btn img,
.bsg-icon             { width: 1.25rem; height: 1.25rem; flex: none; }

/* Haupt-Button (Login, Speichern im Passwortformular) */
.bsg-btn--haupt {
	font-family: 'Exo', inherit;
	background: linear-gradient(to bottom, var(--bsg-blau-700), var(--bsg-blau-500));
	box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}
.bsg-btn--haupt:hover {
	background: linear-gradient(to bottom, var(--bsg-blau-500), var(--bsg-blau-700));
	color: var(--bsg-gelb-100);
}

.bsg-btn--gruen        { background: var(--bsg-gruen-600); }
.bsg-btn--gruen:hover  { background: var(--bsg-gruen-700); }
.bsg-btn--rot          { background: var(--bsg-rot-600); }
.bsg-btn--rot:hover    { background: var(--bsg-rot-700); }
.bsg-btn--grau         { background: var(--bsg-grau-300); color: var(--bsg-grau-800); }
.bsg-btn--grau:hover   { background: var(--bsg-grau-400); }
.bsg-btn--braun        { background: var(--bsg-gelb-800); }
.bsg-btn--braun:hover  { background: #ca8a04; }
.bsg-btn--hell         { background: transparent; color: var(--bsg-grau-700); border-color: var(--bsg-grau-400); font-weight: 400; }
.bsg-btn--hell:hover   { background: var(--bsg-grau-100); }

/* Filter-Buttons (Termine / Zusagen) */
.bsg-btn--filter {
	background: var(--bsg-blau-700);
	color: var(--bsg-gelb-100);
	margin: 0.25rem;
}
.bsg-btn--filter:hover,
.bsg-btn--filter.bsg-aktiv {
	background: var(--bsg-blau-200);
	color: var(--bsg-gelb-900);
	border-color: var(--bsg-gelb-900);
}

.bsg-btn--block { display: flex; width: 100%; }

.bsg-btnbar {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
	margin-bottom: 1rem;
}
.bsg-btnbar--stapel { flex-direction: column; }
.bsg-btnbar--rechts { justify-content: flex-end; }

/* ---------- Meldungen -------------------------------------------------- */
.bsg-info {
	margin: 0.75rem 0;
	padding: 0.5rem;
	border-radius: 0.375rem;
	text-align: center;
	font-weight: 600;
}
.bsg-info--ok   { background: var(--bsg-gruen-100); color: var(--bsg-gruen-700); }
.bsg-info--err  { background: var(--bsg-rot-100);   color: var(--bsg-rot-700); }
.bsg-info--blau { background: var(--bsg-blau-100); color: var(--bsg-blau-800); }

/* ---------- Tabellen --------------------------------------------------- */
.bsg-table-wrap {
	max-height: 600px;
	overflow: auto;
	padding: 0.75rem 0;
}
.bsg-table-wrap--frei { max-height: none; }

.bsg-table {
	width: 100%;
	border-collapse: collapse;
	background: var(--bsg-blau-100);
	color: var(--bsg-blau-800);
	font-size: 0.95rem;
}
.bsg-table th,
.bsg-table td {
	padding: 0.5rem;
	border: 1px solid var(--bsg-blau-800);
	text-align: left;
	vertical-align: middle;
}
.bsg-table thead th {
	background: var(--bsg-blau-500);
	color: var(--bsg-blau-800);
	font-weight: 700;
	text-align: center;
	position: sticky;
	top: 0;
	z-index: 1;
}
.bsg-table tbody td  { background: var(--bsg-grau-100); }
.bsg-table tfoot td  { background: var(--bsg-grau-100); font-weight: 600; text-align: center; }
.bsg-table td.bsg-zentriert { text-align: center; }

/* Graue Variante (Mitgliederliste, Geburtstage) */
.bsg-table--grau { background: #fff; color: #000; }
.bsg-table--grau th,
.bsg-table--grau td { border-color: var(--bsg-grau-700); }
.bsg-table--grau thead th { background: var(--bsg-blau-700); color: #fff; }
.bsg-table--grau tbody td { background: var(--bsg-grau-200); }

/* Klickbare Zeilen */
.bsg-table--klick tbody tr { cursor: pointer; }
.bsg-table--klick tbody tr:hover td { background: var(--bsg-grau-100); }

/* Statusfarben (Zusagen / Wer ist dabei) */
.bsg-table td.bsg-st-ja          { background: var(--bsg-gruen-700); color: #fff; }
.bsg-table td.bsg-st-offen       { background: var(--bsg-amber-200); color: #000; }
.bsg-table td.bsg-st-nein        { background: var(--bsg-rot-600);   color: #fff; }
.bsg-table td.bsg-st-zugesagt    { background: var(--bsg-gruen-400); color: var(--bsg-blau-800); }
.bsg-table td.bsg-st-unbestaetigt{ background: var(--bsg-orange-400);color: var(--bsg-blau-800); }

/* Zeilenfarben (Unsere Termine) */
.bsg-table tr.bsg-row-vergangen td { background: var(--bsg-grau-800); color: #fff; }
.bsg-table tr.bsg-row-neu td       { background: var(--bsg-gelb-300); color: var(--bsg-amber-900); }

/* ---------- Modal ------------------------------------------------------ */
.bsg-modal {
	position: fixed;
	inset: 0;
	z-index: 60;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	background: rgb(0 0 0 / 0.5);
}
.bsg-modal__box {
	width: 100%;
	max-width: 36rem;
	max-height: 90vh;
	overflow: auto;
	padding: 1.5rem;
	background: var(--bsg-grau-100);
	border-radius: var(--bsg-radius);
	box-shadow: var(--bsg-schatten);
}

.bsg-modal__box--klein { max-width: 28rem; }

/* ---------- Cookie-Banner ---------------------------------------------- */
.bsg-cookie {
	position: fixed;
	left: 1rem;
	right: 1rem;
	bottom: 1rem;
	z-index: 50;
	max-width: 36rem;
	margin: 0 auto;
	padding: 1.5rem;
	font-size: 0.875rem;
	color: var(--bsg-grau-700);
	background: #fff;
	border: 1px solid var(--bsg-grau-200);
	border-radius: 0.75rem;
	box-shadow: var(--bsg-schatten);
}
.bsg-cookie a { color: var(--bsg-blau-600); text-decoration: underline; }
.bsg-cookie__buttons {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-top: 1rem;
}
@media (min-width: 640px) {
	.bsg-cookie__buttons { flex-direction: row; justify-content: flex-end; }
}
.bsg-check {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.5rem;
}

/* ---------- Druckseite (Liedfolge) ------------------------------------- */
.bsg-druckseite {
	margin: 0;
	padding: 1rem;
	background: var(--bsg-gelb-100);
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.bsg-druckseite iframe {
	display: block;
	width: 100%;
	height: 1000px;
	border: 0;
	background: #fff;
}

/* ---------- kleine Bildschirme ----------------------------------------- */
@media (max-width: 480px) {
	.bsg-card { padding: 1.25rem; }
	.bsg-grid-2,
	.bsg-grid-3 { grid-template-columns: minmax(0, 1fr); }
	.bsg-table { font-size: 0.85rem; }
	.bsg-table th,
	.bsg-table td { padding: 0.35rem; }
}