/* ==========================================================
   WAIS Immobilien GmbH - verbindliches Design
   ==========================================================

   Diese Datei ist die EINE Quelle fuer Farben, Schrift und
   Abstaende. Bisher lagen diese Werte verstreut im Programmcode
   des Mietvertrag-Generators und der Intranet-Seiten, mit
   Abweichungen. Hier sind sie vereinheitlicht.

   Vereinheitlicht wurden:
     Seitenhintergrund  #ffffff  (statt #f3f6f5 im Generator)
     Fehlerfarbe        #b42318  (statt #a3271e im Generator)

   Die Begleitbeschreibung steht in Designvorgaben.md.
   ========================================================== */

:root {
	/* --- Marke --------------------------------------------- */
	--marke:          #199480;   /* Hauptfarbe WAIS */
	--akzent:         #147a69;   /* Flaechen, Schaltflaechen */
	--akzent-stark:   #0f5f52;   /* gedrueckt, Hover */
	--akzent-zart:    #d0e8e2;   /* Hinterlegung */

	/* --- Flaechen und Linien ------------------------------- */
	--grund:          #ffffff;
	--flaeche:        #f5f8f7;
	--linie:          #dfe5e3;
	--linie-zart:     #e3e8e6;

	/* --- Schriftfarben ------------------------------------- */
	--text:           #1f1f1f;
	--text-leise:     #5f5e5e;

	/* --- Zustaende ----------------------------------------- */
	--fehler:         #b42318;
	--fehler-grund:   #fde8e6;
	--warnung:        #8a5a00;
	--warnung-grund:  #fcefcf;
	--gut:            #147a69;
	--fokus:          #199480;

	/* --- Schrift ------------------------------------------- */
	/* Bewusst systemeigene Schriften: keine Google Fonts,
	   damit keine Daten an Dritte gehen und nichts nachlaedt. */
	--schrift: Arial, Helvetica, "Liberation Sans", sans-serif;

	/* --- Masse --------------------------------------------- */
	--radius-klein:   6px;
	--radius:         10px;
	--radius-gross:   12px;
	--inhalt-breite:  1120px;
	--lesebreite:     72ch;
}

/* Dunkelmodus: nur die Farbwerte werden ersetzt. */
@media (prefers-color-scheme: dark) {
	:root:not([data-thema="hell"]) {
		--marke:         #3fb59f;
		--akzent:        #6fcdb9;
		--akzent-stark:  #acd8ce;
		--akzent-zart:   #1f3b35;
		--grund:         #141817;
		--flaeche:       #1c2220;
		--linie:         #2e3734;
		--linie-zart:    #25302c;
		--text:          #ecefee;
		--text-leise:    #a6adab;
		--fehler:        #ff8a7a;
		--fehler-grund:  #3d1f1b;
		--warnung:       #f2c25b;
		--warnung-grund: #3a2f16;
		--gut:           #6fcdb9;
		--fokus:         #6fcdb9;
		color-scheme: dark;
	}
}

:root[data-thema="dunkel"] {
	--marke:         #3fb59f;
	--akzent:        #6fcdb9;
	--akzent-stark:  #acd8ce;
	--akzent-zart:   #1f3b35;
	--grund:         #141817;
	--flaeche:       #1c2220;
	--linie:         #2e3734;
	--linie-zart:    #25302c;
	--text:          #ecefee;
	--text-leise:    #a6adab;
	--fehler:        #ff8a7a;
	--fehler-grund:  #3d1f1b;
	--warnung:       #f2c25b;
	--warnung-grund: #3a2f16;
	--gut:           #6fcdb9;
	--fokus:         #6fcdb9;
	color-scheme: dark;
}

/* --- Grundgeruest ------------------------------------------ */

* { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--grund);
	color: var(--text);
	font-family: var(--schrift);
	font-size: 15px;
	line-height: 1.5;
}

h1, h2, h3 { margin: 0 0 .5em; text-wrap: balance; }
h1 { font-size: 1.7rem; }
h2 { font-size: 1.3rem; color: var(--akzent); }
h3 { font-size: 1.05rem; }

a { color: var(--akzent); }

:focus-visible {
	outline: 2px solid var(--fokus);
	outline-offset: 2px;
}

.huelle {
	max-width: var(--inhalt-breite);
	margin: 0 auto;
	padding-inline: 20px;
	padding-block: 20px;
}

/* --- Kopf- und Fusszeile ----------------------------------- */

.kopf {
	border-bottom: 1px solid var(--linie);
	background: var(--grund);
}
.kopf .huelle {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}
.kopf img { width: 290px; max-width: 60vw; height: auto; }

.fuss {
	margin-top: 48px;
	border-top: 1px solid var(--linie);
	color: var(--text-leise);
	font-size: .8rem;
}
.fuss p { margin: .2em 0; }

/* --- Kacheln ------------------------------------------------ */

.kacheln {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 16px;
}

.kachel {
	display: block;
	padding: 18px;
	border: 1px solid var(--linie);
	border-radius: var(--radius-gross);
	background: var(--flaeche);
	color: inherit;
	text-decoration: none;
	transition: border-color .15s, transform .15s;
}
.kachel:hover { border-color: var(--marke); transform: translateY(-2px); }
.kachel h3 { color: var(--akzent); }
.kachel p { margin: 0; color: var(--text-leise); font-size: .9rem; }

/* --- Ampel und Hinweise ------------------------------------- */

.marke {
	display: inline-block;
	padding: 2px 9px;
	border-radius: 999px;
	font-size: .78rem;
	font-weight: bold;
}
.marke.rot   { background: var(--fehler-grund);  color: var(--fehler); }
.marke.gelb  { background: var(--warnung-grund); color: var(--warnung); }
.marke.gruen { background: var(--akzent-zart);   color: var(--gut); }

.hinweis {
	padding: 12px 16px;
	border-radius: var(--radius);
	background: var(--akzent-zart);
	border: 1px solid var(--linie);
}

/* --- Tabellen ----------------------------------------------- */

.tabelle-huelle { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; }
th, td {
	text-align: left;
	padding: 8px 10px;
	border-bottom: 1px solid var(--linie-zart);
}
th { color: var(--text-leise); font-weight: bold; font-size: .85rem; }
td.zahl { text-align: right; font-variant-numeric: tabular-nums; }

/* --- Schaltflaechen ----------------------------------------- */

.knopf {
	display: inline-block;
	padding: 9px 16px;
	border: 0;
	border-radius: var(--radius-klein);
	background: var(--akzent);
	color: #fff;
	font: inherit;
	cursor: pointer;
	text-decoration: none;
}
.knopf:hover { background: var(--akzent-stark); }

/* --- Lesetext ------------------------------------------------ */

.lesetext { max-width: var(--lesebreite); }

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; animation: none !important; }
}