/* CSS Document */

/* Styles fuer die Einbindung von Belegungskalender und Mietpreisliste auf fremden Websites.
   Zwei Nutzungsarten teilen sich diese Datei:
   - iFrame (page/integration.php, body.efewo-frame): eigenes Dokument, erbt vom Kunden
     nichts. Schrift, Farben und Hintergrund muessen deshalb HIER gesetzt werden.
   - JavaScript-Einbindung (Altbestand): unser HTML haengt direkt in der Kundenseite und
     soll deren Schrift und Textfarbe erben.
   Darum gilt: alles, was vererbt werden koennte (font-family, color, background), haengt
   ausschliesslich an body.efewo-frame. Layout und Signalfarben gelten fuer beide. */


/* ---------- Theme ---------- */

/* Hell ist der Ausgangswert. Der Hintergrund bleibt bewusst transparent, damit sich der
   Block in jede Hintergrundfarbe der Kundenseite einfuegt - wir liefern nur den Kontrast. */
body.efewo-frame {
	--efewo-text: #14212d;
	--efewo-muted: #6a7683;
	--efewo-line: #dde3e9;
	--efewo-zebra: rgba(0,0,0,.035);

	margin: 0;
	padding: 2px;
	background: transparent;
	color: var(--efewo-text);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 15px;
	line-height: 1.45;
	-webkit-text-size-adjust: 100%;
}

/* theme=auto: der Besucher hat sein System auf dunkel gestellt. */
@media (prefers-color-scheme: dark) {
	html[data-theme="auto"] body.efewo-frame {
		--efewo-text: #e8edf2;
		--efewo-muted: #9aa7b4;
		--efewo-line: rgba(255,255,255,.22);
		--efewo-zebra: rgba(255,255,255,.06);
		scrollbar-color: rgba(255,255,255,.35) transparent;
	}
}

/* theme=dark: die Kundenseite ist immer dunkel, unabhaengig vom Besucher. */
html[data-theme="dark"] body.efewo-frame {
	--efewo-text: #e8edf2;
	--efewo-muted: #9aa7b4;
	--efewo-line: rgba(255,255,255,.22);
	--efewo-zebra: rgba(255,255,255,.06);
	scrollbar-color: rgba(255,255,255,.35) transparent;
}

/* Bewusst KEIN color-scheme: die Eigenschaft gibt einem iFrame in Chrome eine deckende
   Hintergrundfarbe (hell weiss, dunkel fast schwarz) und damit einen sichtbaren Kasten auf
   der Kundenseite. Transparenz ist hier wichtiger. Farben setzen wir ohnehin selbst; nur
   der Scrollbalken (falls jemand bei fester Hoehe bleibt) braucht einen eigenen Hinweis. */
html[data-theme] { background: transparent; }

/* Die JS-Einbindung laeuft ohne body.efewo-frame, kennt die Variablen oben also nicht.
   Sie faellt unten auf neutrale Grautoene zurueck, die auf hellem wie dunklem
   Kundenhintergrund funktionieren - die Textfarbe selbst erbt sie vom Kunden. */


/* ---------- Belegungskalender ---------- */

/* Mehrere Monate: so viele Spalten wie hineinpassen. Ein Handy bekommt eine Spalte,
   ein breiter Inhaltsbereich vier - ohne eigene Breakpoints. */
.efewointegration_months {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	gap: 20px 24px;
}

/* Ein Monat ist ein 7-Spalten-Raster. Die Wochentrenner aus getCalendarHTML werden
   ausgeblendet - im Raster umbricht nach sieben Zellen ohnehin von selbst. */
/* min-width:0 ueberall: ohne das setzt die automatische Mindestgroesse von Rasterelementen
   eine Untergrenze aus dem Zelleninhalt, die Monate werden breiter als ihre Spalte und
   laufen in die Nachbarspalte. */
.efewointegration_calendar {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 2px;
	min-width: 0;
}
.efewointegration_calendar .clear { display: none; }

.efewointegration_calendar .title {
	grid-column: 1 / -1;
	text-align: left;
	text-transform: uppercase;
	letter-spacing: .04em;
	font-size: .82em;
	font-weight: 700;
	border-bottom: 1px solid var(--efewo-line, rgba(127,127,127,.35));
	padding-bottom: 4px;
	margin-bottom: 4px;
}

.efewointegration_calendar .weekday {
	text-align: center;
	font-size: .72em;
	color: var(--efewo-muted, #8a8a8a);
	opacity: .75;
}

.efewointegration_calendar .day,
.efewointegration_calendar .noday {
	aspect-ratio: 1;
	min-height: 30px;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: .82em;
	border-radius: 4px;
}

.efewointegration_calendar .day {
	color: #fff;
	font-weight: 600;
	cursor: default;
	border: none;
}

/* Signalfarben gelten in hell wie dunkel gleich: dunkel genug, dass die weisse Zahl
   darauf lesbar bleibt (die alten #5cb85c/#d9534f kamen auf rund 2,5:1 Kontrast). */
.efewointegration_calendar .avail { background-color: #40803f; }
.efewointegration_calendar .noavail { background-color: #c2453f; }

.efewointegration_calendar .change {
	background-image: linear-gradient(135deg, #c2453f 0 44%, #40803f 45% 55%, #c2453f 56% 100%);
}
.efewointegration_calendar .arrive {
	background-image: linear-gradient(135deg, #40803f 50%, #c2453f 50%);
}
.efewointegration_calendar .depart {
	background-image: linear-gradient(135deg, #c2453f 50%, #40803f 50%);
}
.efewointegration_calendar .highlight { opacity: .5; } /* Just use opacity for highlighting */


/* ---------- Mietpreisliste ---------- */

table.efewointegration_rate {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 12px;
}
table.efewointegration_rate tr.second { background-color: var(--efewo-zebra, rgba(127,127,127,.08)); }
table.efewointegration_rate td { padding: 8px; vertical-align: top; }
table.efewointegration_rate th {
	padding: 8px;
	text-align: left;
	font-size: .82em;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: var(--efewo-muted, #8a8a8a);
	border-bottom: 1px solid var(--efewo-line, rgba(127,127,127,.35));
}

/* Schmale Spalte: vier Spalten quetschen sich nicht, sie werden gestapelt. Die
   Spaltenueberschrift wandert per data-label vor den jeweiligen Wert. */
@media (max-width: 520px) {
	/* border-box, weil die Zeilen unten Rahmen und Innenabstand bekommen - sonst kommen die
	   zur vollen Breite hinzu und die Liste wird breiter als der Rahmen. */
	table.efewointegration_rate,
	table.efewointegration_rate tbody,
	table.efewointegration_rate tr,
	table.efewointegration_rate td { display: block; width: 100%; box-sizing: border-box; }

	table.efewointegration_rate tr.head { display: none; }

	table.efewointegration_rate tr {
		border: 1px solid var(--efewo-line, rgba(127,127,127,.35));
		border-radius: 8px;
		padding: 4px 10px;
		margin-bottom: 10px;
	}
	/* Raster statt Flexbox: in einer 1fr-Spalte darf der Wert umbrechen. Als Flex-Element
	   wuerde der Text nicht schrumpfen und die Zeile aus dem Rahmen schieben. */
	table.efewointegration_rate td {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		gap: 14px;
		padding: 5px 0;
		text-align: right;
		overflow-wrap: anywhere;
	}
	table.efewointegration_rate td::before {
		content: attr(data-label);
		color: var(--efewo-muted, #8a8a8a);
		text-align: left;
	}
}


/* ---------- Fehlermeldung und Absender ---------- */

.efewointegration_error {
	margin: 0 0 12px 0;
	font-size: .9em;
	color: var(--efewo-muted, #8a8a8a);
}

.efewointegration_brand {
	display: inline-block;
	margin-top: 14px;
	opacity: .55;
}
.efewointegration_brand:hover { opacity: 1; }
.efewointegration_brand img { display: block; border: 0; }

/* Das Logo ist dunkel gezeichnet und waere auf dunklem Grund unlesbar - dort als weisse
   Silhouette ausgeben. */
@media (prefers-color-scheme: dark) {
	html[data-theme="auto"] .efewointegration_brand img { filter: brightness(0) invert(1); }
}
html[data-theme="dark"] .efewointegration_brand img { filter: brightness(0) invert(1); }