/* =====================================================================
   mkscb.css – gemeinsame Styles für die MKSCB-Intern-Seiten
   ---------------------------------------------------------------------
   Einbinden (einmal pro Seite, am besten im RW-Head):
       <link rel="stylesheet" href="/mkscb.css?v=1">
   Nach Änderungen die Versionsnummer (?v=2, ?v=3 …) hochzählen,
   damit die Browser die neue Fassung laden.

   Alle Klassen beginnen mit "mk-", damit sie nicht mit RW kollidieren.
   Seitenspezifisches (Raster, Spaltenbreiten …) bleibt in der jeweiligen
   PHP-Datei in einem kleinen <style>-Block.
   ===================================================================== */


/* ---------------------------------------------------------------------
   1. Farben & Grundwerte  (hier zentral ändern)
   --------------------------------------------------------------------- */
:root {
	/* Braun-/Gelbtöne */
	--mk-braun-dunkel: #713f12;   /* Buttons, Rahmen dunkel        */
	--mk-braun:        #78350f;   /* Text, Rahmen                  */
	--mk-braun-mittel: #92400e;   /* Überschriften, Tabellenkopf   */
	--mk-gelb-hell:    #fefce8;   /* sehr heller Hintergrund       */
	--mk-gelb:         #fef9c3;   /* heller Hintergrund, Button-Text */
	--mk-gelb-mittel:  #fef08a;   /* Tabellenkopf hell, Summen      */
	--mk-sand:         #fef3c7;   /* Flächen / Karten               */
	--mk-sand-dunkel:  #fde68a;   /* Hover, aktive Buttons          */

	/* Signalfarben */
	--mk-gruen:        #22c55e;
	--mk-gruen-dunkel: #15803d;
	--mk-gruen-hell:   #bbf7d0;
	--mk-blau:         #3b82f6;
	--mk-blau-dunkel:  #1d4ed8;
	--mk-rot:          #ef4444;
	--mk-rot-dunkel:   #b91c1c;
	--mk-grau:         #d1d5db;
	--mk-grau-dunkel:  #6b7280;

	/* Formen */
	--mk-radius:       0.5rem;
	--mk-radius-klein: 0.25rem;
	--mk-schatten:     0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
	--mk-schatten-gross: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

	/* Standardhöhe für Scrollbereiche (pro Bereich überschreibbar) */
	--mk-scroll-hoehe: 600px;
}


/* ---------------------------------------------------------------------
   2. Bereich, Überschriften, Karten
   --------------------------------------------------------------------- */
.mk-bereich,
.mk-bereich *,
.mk-bereich *::before,
.mk-bereich *::after {
	box-sizing: border-box;
}
.mk-bereich {
	color: var(--mk-braun);
}

.mk-titel {                       /* große Seitenüberschrift */
	font-size: 1.875rem;
	line-height: 2.25rem;
	font-weight: 700;
	color: var(--mk-braun-mittel);
	text-align: center;
	margin: 0 0 1.5rem 0;
}
.mk-untertitel {                  /* Zwischenüberschrift */
	font-size: 1.25rem;
	line-height: 1.75rem;
	font-weight: 700;
	color: var(--mk-braun);
	text-align: center;
	margin: 1.5rem 0 0.5rem 0;
}

.mk-karte {                       /* helle Fläche mit Rundung + Schatten */
	background-color: var(--mk-sand);
	border-radius: var(--mk-radius);
	box-shadow: var(--mk-schatten);
	padding: 1.5rem;
}


/* ---------------------------------------------------------------------
   3. Buttons
   --------------------------------------------------------------------- */
.mk-leiste {                      /* Button-Reihe, zentriert, bricht um */
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
	margin-bottom: 1.5rem;
}

.mk-btn {                         /* Standard: braun mit gelber Schrift */
	display: inline-block;
	padding: 0.5rem 1.25rem;
	background-color: var(--mk-braun-dunkel);
	color: var(--mk-gelb);
	border: 2px solid transparent;
	border-radius: var(--mk-radius);
	font-family: inherit;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.5rem;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 150ms, color 150ms, border-color 150ms;
}
.mk-btn:hover {
	background-color: var(--mk-sand-dunkel);
	color: var(--mk-braun-dunkel);
	border-color: var(--mk-braun-dunkel);
}
.mk-btn.aktiv,
.mk-btn.aktiv:hover {             /* aktiver Filter-/Auswahl-Button */
	background-color: var(--mk-sand-dunkel);
	color: var(--mk-braun);
	border-color: var(--mk-braun);
	font-weight: 700;
	box-shadow: 0 0 0 2px var(--mk-braun);
}
.mk-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}
.mk-btn-klein {
	padding: 0.25rem 0.75rem;
	font-size: 0.875rem;
	line-height: 1.25rem;
}

/* Farb-Varianten: Speichern / Neu / Löschen / Abbrechen */
.mk-btn-gruen, .mk-btn-blau, .mk-btn-rot, .mk-btn-grau {
	color: #ffffff;
	border-color: transparent;
}
.mk-btn-gruen             { background-color: var(--mk-gruen); }
.mk-btn-gruen:hover       { background-color: var(--mk-gruen-dunkel); color: #ffffff; border-color: transparent; }
.mk-btn-blau              { background-color: var(--mk-blau); }
.mk-btn-blau:hover        { background-color: var(--mk-blau-dunkel); color: #ffffff; border-color: transparent; }
.mk-btn-rot               { background-color: var(--mk-rot); }
.mk-btn-rot:hover         { background-color: var(--mk-rot-dunkel); color: #ffffff; border-color: transparent; }
.mk-btn-grau              { background-color: var(--mk-grau); color: #1f2937; }
.mk-btn-grau:hover        { background-color: #9ca3af; color: #1f2937; border-color: transparent; }


/* ---------------------------------------------------------------------
   4. Formularfelder
   --------------------------------------------------------------------- */
.mk-label {
	display: block;
	font-weight: 600;
	color: var(--mk-braun-mittel);
	margin-bottom: 0.25rem;
}
.mk-feld {                        /* input, select, textarea */
	display: block;
	width: 100%;
	padding: 0.5rem 0.75rem;
	background-color: var(--mk-gelb-hell);
	color: var(--mk-braun);
	border: 1px solid var(--mk-braun);
	border-radius: var(--mk-radius-klein);
	font-family: inherit;
	font-size: 1rem;
}
.mk-feld:focus {
	outline: none;
	box-shadow: 0 0 0 2px var(--mk-braun);
}
.mk-feld[readonly] {
	background-color: #f9fafb;
}
select.mk-feld {
	font-weight: 700;
	background-color: var(--mk-gelb);
}


/* ---------------------------------------------------------------------
   5. Tabellen
   ---------------------------------------------------------------------
   <div class="mk-scroll">                       (optional, scrollt)
     <table class="mk-tabelle [mk-zentriert] [mk-zebra]">
       <thead class="mk-kopf-hell | mk-kopf-dunkel"> …
   --------------------------------------------------------------------- */
.mk-scroll {
	max-height: var(--mk-scroll-hoehe);
	overflow: auto;
	border-radius: var(--mk-radius);
}

.mk-tabelle {
	width: 100%;
	border-collapse: collapse;
	background-color: var(--mk-gelb);
	color: var(--mk-braun);
	border: 1px solid var(--mk-braun);
}
.mk-tabelle th,
.mk-tabelle td {
	padding: 0.5rem 1rem;
	border: 1px solid var(--mk-braun);
	text-align: left;
}
.mk-tabelle th {
	font-weight: 700;
}
.mk-zentriert th,
.mk-zentriert td {
	text-align: center;
}

/* Tabellenköpfe */
.mk-kopf-hell th {
	background-color: var(--mk-gelb-mittel);
	color: var(--mk-braun-mittel);
}
.mk-kopf-dunkel th {
	background-color: var(--mk-braun-mittel);
	color: var(--mk-gelb);
}
.mk-scroll .mk-tabelle thead th {  /* Kopf bleibt beim Scrollen stehen */
	position: sticky;
	top: 0;
	z-index: 1;
}

/* Zebrastreifen + Hover */
.mk-zebra tbody tr:nth-child(odd)  { background-color: var(--mk-sand); }
.mk-zebra tbody tr:nth-child(even) { background-color: var(--mk-sand-dunkel); }
.mk-hover tbody tr:hover           { background-color: var(--mk-gelb-hell); }

/* Status-Zeilen (Zusagen) */
.mk-tabelle tr.mk-st-ja    { background-color: var(--mk-gruen-hell); }
.mk-tabelle tr.mk-st-offen { background-color: var(--mk-gelb-mittel); color: var(--mk-braun-mittel); }
.mk-tabelle tr.mk-st-nein  { background-color: var(--mk-rot); color: #ffffff; }
.mk-tabelle tr.mk-summe td {
	background-color: var(--mk-gelb-mittel);
	color: var(--mk-braun-mittel);
	font-weight: 700;
}
.mk-fett { font-weight: 700; }


/* ---------------------------------------------------------------------
   6. Meldungen
   --------------------------------------------------------------------- */
.mk-leer {                        /* "Keine Einträge …" */
	text-align: center;
	padding: 1rem;
	color: var(--mk-braun);
}
.mk-info {
	background-color: var(--mk-sand);
	border: 1px solid var(--mk-braun-mittel);
	border-radius: var(--mk-radius);
	color: var(--mk-braun);
	padding: 1rem 1.25rem;
	margin: 1rem 0;
	text-align: center;
}
.mk-fehler {
	color: var(--mk-rot-dunkel);
	font-weight: 600;
}


/* ---------------------------------------------------------------------
   7. Modal / Lightbox
   ---------------------------------------------------------------------
   <div class="mk-modal" id="…">  → per JS Klasse "offen" setzen
     <div class="mk-modal-box"> … </div>
   </div>
   --------------------------------------------------------------------- */
.mk-modal {
	display: none;
	position: fixed;
	inset: 0;
	background-color: rgb(0 0 0 / 0.5);
	z-index: 50;
}
.mk-modal.offen {
	display: block;
}
.mk-modal-box {
	position: absolute;
	left: 50%;
	top: 150px;
	transform: translateX(-50%);
	width: calc(100% - 2rem);
	max-width: 28rem;
	max-height: calc(100vh - 200px);
	overflow-y: auto;
	background-color: #ffffff;
	border-radius: 1rem;
	box-shadow: var(--mk-schatten-gross);
	padding: 1.5rem;
	color: var(--mk-braun);
}


/* ---------------------------------------------------------------------
   8. PDF-Druckseiten (laufen außerhalb von RW)
   --------------------------------------------------------------------- */
body.mk-druck-seite {
	background-color: var(--mk-sand);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	margin: 0;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
.mk-druck-seite .mk-leiste {
	gap: 1rem;
	margin-bottom: 1rem;
}