/* =========================================================
   Click2Date – gemeinsames Design-System
   Wird auf login.php, index.php und availability.php geladen
   und sorgt für ein einheitliches Erscheinungsbild (vor allem
   bei Buttons) über alle Seiten hinweg.
   ========================================================= */

:root {
	--c-green:        #03732E;
	--c-green-dark:   #025b25;
	--c-green-soft:   #e8f3ec;
	--c-danger:       #b42318;
	--c-danger-soft:  #fdf3f2;
	--c-muted:        #9aa39b;
	--c-border:       #c8d0c5;
	--radius:         9px;

	--c-ink:          #1c2622;
	--c-text-muted:   #5d6b62;
	--c-line:         #e4e9e4;
	--c-bg:           #eef1ee;
	--radius-lg:      14px;
	--shadow:         0 1px 2px rgba(20,40,30,.05), 0 10px 26px rgba(20,40,30,.07);
	--font:           -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Helvetica, Arial, sans-serif;
}

/* ----------------------------------------------------------
   Einheitliches Button-System
   Gilt sowohl für die neuen .btn-Klassen als auch – zur
   Vereinheitlichung – für die bestehenden Button-Klassen.
   ---------------------------------------------------------- */
.btn,
.btn-primary,
.btn-secondary,
.btn-danger,
.secondary-button,
.primary-button,
.choice-link,
.choice-link-disabled,
.delete-button,
.back-link {
	align-items: center;
	border: 1px solid transparent;
	border-radius: var(--radius);
	cursor: pointer;
	display: inline-flex;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11.5pt;
	font-weight: bold;
	gap: 8px;
	justify-content: center;
	line-height: 1.2;
	margin: 0;
	min-height: 42px;
	padding: 10px 18px;
	text-align: center;
	text-decoration: none;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
	white-space: nowrap;
}

/* Primär – grün gefüllt */
.btn-primary,
.primary-button,
.choice-link {
	background: var(--c-green);
	border-color: var(--c-green);
	color: var(--brand-ink, #fff);
}
.btn-primary:hover,
.primary-button:hover,
.choice-link:hover {
	background: var(--c-green-dark);
	border-color: var(--c-green-dark);
	color: var(--brand-ink, #fff);
}

/* Sekundär – grüner Rahmen, weiß */
.btn-secondary,
.secondary-button,
.back-link {
	background: #fff;
	border-color: var(--c-green);
	color: var(--c-green);
}
.btn-secondary:hover,
.secondary-button:hover,
.back-link:hover {
	background: var(--c-green-soft);
	border-color: var(--c-green-dark);
	color: var(--c-green-dark);
	text-decoration: none;
}

/* Datei-Auswahl – der native Knopf des Browsers bekommt das Aussehen eines
   Sekundär-Buttons. Der Dateiname daneben bleibt normaler Fließtext.
   Die beiden Pseudoelemente stehen bewusst in getrennten Regeln: kennt ein
   Browser eines davon nicht, verwirft er sonst die gesamte Regel. */
.file-input {
	color: #4c584f;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10.5pt;
	/* Ohne Mindestbreite schneidet der Browser den Dateinamen hinter dem
	   Knopf ab; max-width hält das Feld auf schmalen Schirmen im Rahmen. */
	max-width: 100%;
	min-width: 340px;
}

.file-input::file-selector-button {
	background: #fff;
	border: 1px solid var(--c-green);
	border-radius: var(--radius);
	color: var(--c-green);
	cursor: pointer;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11.5pt;
	font-weight: bold;
	line-height: 1.2;
	margin: 0 12px 0 0;
	min-height: 42px;
	padding: 10px 18px;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.file-input::-webkit-file-upload-button {
	background: #fff;
	border: 1px solid var(--c-green);
	border-radius: var(--radius);
	color: var(--c-green);
	cursor: pointer;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11.5pt;
	font-weight: bold;
	line-height: 1.2;
	margin: 0 12px 0 0;
	min-height: 42px;
	padding: 10px 18px;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.file-input::file-selector-button:hover {
	background: var(--c-green-soft);
	border-color: var(--c-green-dark);
	color: var(--c-green-dark);
}

.file-input::-webkit-file-upload-button:hover {
	background: var(--c-green-soft);
	border-color: var(--c-green-dark);
	color: var(--c-green-dark);
}

/* Gefahr/Löschen – roter Rahmen, weiß */
.btn-danger,
.delete-button {
	background: #fff;
	border-color: var(--c-danger);
	color: var(--c-danger);
}
.btn-danger:hover,
.delete-button:hover {
	background: var(--c-danger-soft);
	border-color: var(--c-danger);
	color: var(--c-danger);
}

/* Deaktiviert */
.choice-link-disabled,
.btn[disabled],
.btn-primary[disabled],
.btn-secondary[disabled] {
	background: #edf0eb;
	border-color: var(--c-border);
	color: var(--c-muted);
	cursor: not-allowed;
	text-decoration: line-through;
}

/* Volle Breite – für die öffentlichen Auswahl-/CTA-Buttons */
.btn-block,
.primary-button,
.choice-link,
.choice-link-disabled {
	width: 100%;
}

/* Button-Reihe mit einheitlichem Abstand */
.btn-row {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* Eingabefelder in „Link kopieren"-Reihen auf Button-Höhe ausrichten */
.share-link-row input,
.appt-share-input {
	min-height: 42px;
}

@media (max-width: 700px) {
	.btn,
	.btn-primary,
	.btn-secondary,
	.btn-danger,
	.secondary-button,
	.delete-button {
		width: 100%;
	}
}

/* =========================================================
   Modernes Theme (Typografie, Hintergrund, Karten, Header,
   Navigation, Eingabefelder) – lädt nach den Inline-Styles
   und überschreibt diese.
   ========================================================= */

body {
	font-family: var(--font);
	background: var(--c-bg);
	color: var(--c-ink);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Backend bekommt einen zentrierten Dashboard-Container */
body.backend {
	max-width: 1180px;
	margin: 0 auto;
	padding: 22px 22px 64px;
}
body.backend h1 {
	font-size: 18pt;
	font-weight: 700;
	letter-spacing: -0.015em;
	margin: 6px 2px 16px;
}

h2 { letter-spacing: -0.01em; }
h3 { letter-spacing: -0.01em; }

/* Modernere Schrift- und Button-Abrundung */
.btn, .btn-primary, .btn-secondary, .btn-danger,
.secondary-button, .primary-button, .choice-link, .choice-link-disabled,
.delete-button, .back-link {
	border-radius: var(--radius);
	font-weight: 600;
}
.btn-primary, .primary-button, .choice-link { box-shadow: 0 1px 2px rgba(3,115,46,.22); }
.btn-primary:hover, .primary-button:hover, .choice-link:hover { box-shadow: 0 5px 14px rgba(3,115,46,.26); }
.btn:active, .btn-primary:active, .btn-secondary:active,
.secondary-button:active, .primary-button:active, .choice-link:active,
.delete-button:active { transform: translateY(1px); }

/* Karten weicher und moderner */
.panel, .form-panel, .message-panel, .template-panel, .calendar-shell, .appt-card {
	border-color: var(--c-line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow);
}

/* Eingabefelder */
input[type="text"], input[type="password"], input[type="email"], textarea {
	border: 1px solid #d6ddd6;
	border-radius: var(--radius);
	background: #fff;
}
input[type="text"]:focus, input[type="password"]:focus,
input[type="email"]:focus, textarea:focus, select:focus, .template-editor:focus {
	border-color: var(--c-green);
	box-shadow: 0 0 0 3px rgba(3,115,46,.13);
	outline: none;
}
select { border-radius: var(--radius) !important; border-color: #d6ddd6 !important; }

/* Badges runder */
.appt-badge { border-radius: 999px; }

/* ---------- App-Header (Benutzer-Chip + Navigation) ---------- */
.appbar {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	background: #fff;
	border: 1px solid var(--c-line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow);
	padding: 9px 12px;
	margin-bottom: 22px;
}
.appbar-user { display: flex; align-items: center; gap: 10px; }

/* Konto-Menü hinter dem Avatar: Profil und Abmelden liegen hier, damit die
   Hauptnavigation kurz genug für eine Zeile bleibt. */
.appbar-account { position: relative; flex: 0 0 auto; }
.appbar-account-btn {
	align-items: center;
	background: transparent;
	/* Farbe ausdrücklich setzen: <button> erbt sonst die weiße Schrift der
	   globalen Button-Regel, und der Name wäre unsichtbar. */
	color: var(--c-ink);
	border: 1px solid transparent;
	border-radius: 999px;
	cursor: pointer;
	display: flex;
	font-family: inherit;
	gap: 10px;
	margin: 0;
	padding: 3px 10px 3px 3px;
	text-align: left;
	transition: background .15s ease, border-color .15s ease;
}
.appbar-account-btn:hover { background: var(--c-green-soft); }
.appbar-account-btn[aria-expanded="true"] { background: var(--c-green-soft); border-color: #bcdcc7; }
.appbar-caret {
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid var(--c-text-muted);
	flex: 0 0 auto;
	margin-left: 2px;
	transition: transform .15s ease;
}
.appbar-account-btn[aria-expanded="true"] .appbar-caret { transform: rotate(180deg); }

.appbar-menu {
	background: #fff;
	border: 1px solid var(--c-line);
	border-radius: 10px;
	box-shadow: 0 8px 28px rgba(20, 40, 30, .16);
	left: 0;
	min-width: 190px;
	padding: 6px;
	position: absolute;
	top: calc(100% + 8px);
	z-index: 60;
}
.appbar-menu[hidden] { display: none; }
.appbar-menu-item {
	border-radius: 7px;
	color: #46544b;
	display: block;
	font-size: 10.5pt;
	font-weight: 600;
	padding: 9px 12px;
	text-decoration: none;
	white-space: nowrap;
}
.appbar-menu-item:hover { background: var(--c-green-soft); color: var(--c-green); }
.appbar-menu-item.active { background: var(--c-green); color: #fff; }
.appbar-menu-logout { border-top: 1px solid var(--c-line); border-radius: 0 0 7px 7px; margin-top: 4px; padding-top: 11px; }
.appbar-menu-logout:hover { background: var(--c-danger-soft); color: var(--c-danger); }
.avatar {
	width: 38px; height: 38px; border-radius: 50%;
	background: linear-gradient(135deg, #0a9b40, #03732E);
	color: #fff; font-weight: 700; font-size: 11pt;
	display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.appbar-user-meta { display: flex; flex-direction: column; line-height: 1.2; }
.appbar-name { font-weight: 700; font-size: 11pt; color: var(--c-ink); }
.appbar-role { color: var(--c-text-muted); font-size: 8.5pt; }

.nav { display: flex; flex-wrap: wrap; gap: 3px; flex: 1 1 auto; justify-content: flex-end; }
.nav-link {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 8px 14px; border-radius: 999px;
	color: #46544b; font-weight: 600; font-size: 10.5pt;
	text-decoration: none; white-space: nowrap;
	transition: background .15s ease, color .15s ease;
}
.nav-link:hover { background: var(--c-green-soft); color: var(--c-green); }
.nav-link.active { background: var(--c-green); color: #fff; }
.nav-alert {
	display: inline-flex; align-items: center; justify-content: center;
	width: 18px; height: 18px; border-radius: 50%;
	background: var(--c-danger, #b42318); color: #fff;
	font-size: 11px; font-weight: 700; line-height: 1;
	flex: 0 0 auto;
}
.nav-logout {
	display: inline-flex; align-items: center;
	padding: 8px 14px; border-radius: 999px;
	color: var(--c-text-muted); font-weight: 600; font-size: 10.5pt;
	text-decoration: none; border: 1px solid var(--c-line); white-space: nowrap;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.nav-logout:hover { background: var(--c-danger-soft); color: var(--c-danger); border-color: #f1d6d3; }

/* ---------- Moderne Login-Karte ---------- */
.login-wrap {
	min-height: 78vh;
	display: flex;
	align-items: center;
	justify-content: center;
}
.login-card {
	background: #fff;
	border: 1px solid var(--c-line);
	border-radius: 18px;
	box-shadow: var(--shadow);
	padding: 32px 30px;
	width: 100%;
	max-width: 380px;
}
.login-card h1 { font-size: 17pt; font-weight: 700; margin: 0 0 4px; letter-spacing: -0.01em; }
.login-card .login-sub { color: var(--c-text-muted); margin: 0 0 22px; font-size: 10pt; }
.login-card label { display: block; font-weight: 600; font-size: 10.5pt; margin-bottom: 16px; color: var(--c-ink); }
.login-card input[type="text"], .login-card input[type="password"] {
	display: block; width: 100%; max-width: none; margin-top: 7px;
	padding: 11px 12px; font-size: 11pt;
}
.login-card .btn-primary { width: 100%; margin-top: 6px; }
.login-error {
	background: var(--c-danger-soft); color: var(--c-danger);
	border-radius: 9px; padding: 11px 13px;
	font-size: 10pt; font-weight: 600; margin-bottom: 18px;
}

/* Anmelde-Hinweis / Erfolgsmeldung */
.alert-success {
	background: var(--c-green-soft); color: var(--c-green);
	border-radius: 10px; padding: 10px 14px;
	font-weight: 600; font-size: 10.5pt; margin-bottom: 16px; display: inline-block;
}

@media (max-width: 700px) {
	body.backend { padding: 14px 14px 48px; }
	.appbar { gap: 10px; }
	.nav { width: 100%; }
	.nav-link, .nav-logout { flex: 1 1 auto; justify-content: center; }
}

/* =========================================================
   Öffentliche Buchungsseiten (index.php / availability.php)
   – an den modernen Backend-Look angeglichen.
   ========================================================= */

.header-image {
	display: block;
	width: auto;
	max-width: 380px;
	height: auto;
	margin: 10px auto 24px;
}

.page .panel,
main.page .panel {
	padding: 28px 30px;
}

/* Terminart-Auswahl / Buchungsbestätigung: etwas Luft */
.choice-grid { gap: 10px; }

/* Vorschlags-Liste (index.php) als moderne Karten */
.proposal-link {
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	box-shadow: 0 1px 2px rgba(20,40,30,.05);
	font-weight: 600;
	padding: 15px 18px;
	transition: border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.proposal-link:hover {
	border-color: var(--c-green);
	box-shadow: 0 6px 16px rgba(3,115,46,.12);
}
.proposal-link:active { transform: translateY(1px); }

/* Öffentlicher Verfügbarkeits-Kalender: kalendarisch nach Wochentag ausgerichtet.
   Jede Zeile ist eine Woche – Montag ganz links, Freitag ganz rechts. Feste 5
   Spalten (Mo–Fr), damit gleiche Wochentage exakt untereinander stehen. */
.avail-public-grid {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}
/* Auf schmalen Screens horizontal scrollen, statt die Wochentags-Ausrichtung
   aufzugeben. */
.avail-public-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
@media (max-width: 680px) {
	.avail-public-grid { min-width: 640px; }
}

/* ============================================================
   GEMEINSAME SLOT-OPTIK – einzige Quelle der Wahrheit.
   Gilt für beide Kalender, damit nicht parallel gepflegt werden muss:
   - Öffentliche Buchung (availability.php): .slot-link / .slot-empty
   - Backend-Editor (login.php, "Verfügbare Zeiten markieren"): .avail-slot
   Die Mitarbeiter-Übersicht (.staff-overview ...) baut darauf auf und
   überschreibt nur ihre abweichende Größe (siehe availability.php inline).
   Zustandslogik (welcher Slot welche Klasse bekommt) bleibt pro Seite.
   ============================================================ */

/* Box-Grundform – für alle Slot-Typen identisch */
.avail-slot,
.slot-link,
.slot-empty {
	border: 1px solid;
	border-radius: 6px;
	font-size: 10.5pt;
	font-weight: bold;
	padding: 6px 4px;
	text-align: center;
}
.slot-link,
.slot-empty { display: block; }
.slot-link { text-decoration: none; }

/* Markierbarer Default – nur Editor */
.avail-slot { background: #fff; border-color: #cbd5c7; cursor: pointer; }

/* Langes Halten auf einem Slot öffnet das eigene Blockieren-Menü. Diese drei
   Eigenschaften sollen verhindern, dass iOS daneben seine Textlupe und sein
   eigenes Menü einblendet. Sie gelten ausdrücklich auch für alle Kindelemente,
   damit keine spätere Regel sie dort wieder aufhebt. Verlassen darf man sich
   auf -webkit-touch-callout allerdings nicht: Apple setzt es auf neueren
   iOS-Versionen nicht mehr zuverlässig um. */
.avail-slot,
.avail-slot * {
	-webkit-touch-callout: none;
	-webkit-tap-highlight-color: transparent;
	-webkit-user-select: none;
	user-select: none;
}

/* Grün – verfügbar / ausgewählt */
.slot-link,
.avail-slot.selected { background: #eef7f1; border-color: var(--brand, #03732E); color: var(--brand, #03732E); }
.slot-link { cursor: pointer; }
.slot-link:hover { background: var(--brand, #03732E); border-color: var(--brand, #03732E); color: var(--brand-ink, #fff); }
.slot-link.can-block { cursor: context-menu; }

/* Orange – belegt / manuell blockiert */
.avail-slot.booked,
.avail-slot.manually-blocked,
.slot-link.manually-blocked,
.slot-link.manually-blocked:hover { background: #fff3e0; border-color: #e8920a; color: #8a5200; text-decoration: line-through; }
.avail-slot.booked,
.avail-slot.manually-blocked { cursor: not-allowed; }
.slot-link.manually-blocked,
.slot-link.manually-blocked:hover { cursor: context-menu; }

/* Rot – feste Sperrzeit (nur Editor) */
.avail-slot.recurring-blocked { background: #fdecea; border-color: #e7a39c; color: #b42318; cursor: not-allowed; text-decoration: line-through; }

/* Grau – nicht buchbar (keine Orte / zu kurzfristig / leer/vergeben) */
.avail-slot.no-locations,
.slot-empty,
.slot-link.slot-too-soon,
.slot-link.slot-too-soon:hover { background: #edf0eb; border-color: #d8ded4; color: #9aa39b; cursor: not-allowed; }
.avail-slot.no-locations,
.slot-link.slot-too-soon,
.slot-link.slot-too-soon:hover { text-decoration: line-through; }
.slot-empty.profile-blocked { color: #9b6a18; text-decoration: line-through; }

/* Orange – Abwesenheit (Urlaub, Krankheit …) sperrt den ganzen Tag. */
.avail-slot.absence-blocked,
.slot-empty.absence-blocked,
.slot-link.absence-blocked,
.slot-link.absence-blocked:hover {
	background: #fdf3e3;
	border-color: #e3bc80;
	color: #8a5a00;
	cursor: help;
	text-decoration: line-through;
}

/* Jeder Slot mit Detail-Box zeigt den Hilfe-Zeiger – so ist erkennbar,
   dass sich beim Überfahren der Grund einblendet. */
.has-tooltip { cursor: help; }

/* Blau – für den Zeitpunkt ist ein Terminvorschlag unterwegs. Bewusst eine
   eigene Farbe: der Slot ist weder frei noch fest vergeben, sondern wartet auf
   die Entscheidung des Mandanten und wird nach 24 Stunden von selbst frei. */
.avail-slot.proposal-blocked,
.slot-empty.proposal-blocked,
.slot-link.proposal-blocked,
.slot-link.proposal-blocked:hover {
	background: #eaf1fb;
	border-color: #9db9e0;
	color: #24507f;
	cursor: not-allowed;
	text-decoration: none;
}

/* Spaltenlayout, wenn Standort-Badges mitlaufen (öffentlich, eingeloggt) */
.calendar-slots .slot-link.has-locs,
.calendar-slots .slot-empty.has-locs { flex-direction: column; }
.calendar-slots .slot-link.has-locs:hover { background: #eef7f1; border-color: var(--brand, #03732E); color: var(--brand, #03732E); }

/* Uhrzeit */
.avail-slot-time,
.slot-time { font-size: 10.5pt; font-weight: bold; }
.slot-time { display: block; }

/* Standort-Badges */
.avail-loc-row { display: flex; gap: 4px; justify-content: center; margin-top: 6px; }
.avail-slot .avail-loc-row { visibility: hidden; }          /* Editor: nur bei Auswahl sichtbar */
.avail-slot.selected .avail-loc-row { visibility: visible; }
.avail-loc-row.placeholder { visibility: hidden; }          /* öffentlich: reiner Platzhalter */
.avail-loc { background: #fff; border: 1px solid #cdebd9; border-radius: 3px; color: var(--brand, #03732E); font-size: 8.5pt; font-weight: bold; line-height: 1; padding: 3px 6px; }
.avail-slot .avail-loc { cursor: pointer; }
.avail-loc.off { background: #f3f5f1; border-color: #dde3d8; color: #9aa39b; text-decoration: line-through; }

/* Mitarbeiter-Übersicht (availability.php, .staff-overview): baut auf der
   gemeinsamen Slot-Basis auf, nur etwas kompakter und nicht klickbar. */
.staff-overview .slot-link { cursor: default; padding: 8px 5px; }
.staff-overview .slot-link:hover { background: #eef7f1; border-color: var(--brand, #03732E); color: var(--brand, #03732E); }
.staff-overview .slot-link.manually-blocked,
.staff-overview .slot-link.manually-blocked:hover,
.staff-overview .slot-link.staff-booked,
.staff-overview .slot-link.staff-booked:hover { background: #fff3e0; border-color: #e8920a; color: #8a5200; cursor: default; text-decoration: line-through; }
.staff-overview .slot-empty { background: transparent; border: 0; color: #9aa39b; font-weight: normal; padding: 8px 5px; }

/* Hover-Detailbox für gebuchte Slots in der Mitarbeiter-Übersicht.
   position:fixed (per JS platziert), damit sie nicht vom overflow:hidden
   der Tageskarte abgeschnitten wird. */
.staff-overview .slot-link.staff-booked.has-tooltip { cursor: help; }
.slot-tooltip {
	display: none;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 10000;
	width: 272px;
	max-width: 82vw;
	background: #fff;
	color: var(--c-ink);
	text-align: left;
	text-decoration: none;
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	padding: 0;
	overflow: hidden;
	box-shadow: 0 8px 24px rgba(20,40,30,.16);
	font-family: var(--font);
	font-size: 10pt;
	font-weight: normal;
	line-height: 1.45;
	white-space: normal;
	pointer-events: auto;
}
.slot-tooltip.is-visible { display: block; }
.slot-tooltip-link {
	color: var(--c-green);
	font-weight: 700;
	text-decoration: none;
}
.slot-tooltip-link:hover { text-decoration: underline; }
.slot-tooltip-title {
	display: block;
	background: var(--c-green-soft);
	color: var(--c-green);
	font-weight: 700;
	font-size: 10.5pt;
	padding: 9px 13px;
	border-bottom: 1px solid var(--c-line);
}
.slot-tooltip-row {
	display: flex;
	gap: 10px;
	justify-content: space-between;
	padding: 5px 13px;
}
.slot-tooltip-row + .slot-tooltip-row { border-top: 1px solid #f0f3ef; }
.slot-tooltip-row span { color: var(--c-text-muted); flex: 0 0 auto; }
.slot-tooltip-row b { color: var(--c-ink); font-weight: 600; text-align: right; word-break: break-word; }

/* Kalender-Tageskarten (öffentlich + Backend) etwas weicher */
.calendar-day { border-color: var(--c-line); }
.calendar-day-header { background: var(--c-green-soft); border-color: var(--c-line); }

/* Buchungsformular modern und mit System-Schrift */
.booking-form label { font-size: 11.5pt; font-weight: 600; }
.booking-form input,
.booking-form textarea {
	font-family: var(--font);
	font-size: 11pt;
	border: 1px solid #d6ddd6;
	border-radius: var(--radius);
	padding: 11px 12px;
}
.booking-form input:focus,
.booking-form textarea:focus {
	border-color: var(--c-green);
	box-shadow: 0 0 0 3px rgba(3,115,46,.13);
	outline: none;
}

/* Profil-Avatar auf der Verfügbarkeitsseite an Backend angleichen */
.availability-avatar {
	background: linear-gradient(135deg, var(--brand, #0a9b40), var(--brand-dark, #03732E));
	border: 0;
	color: var(--brand-ink, #fff);
	width: 64px;
	height: 64px;
	font-size: 17pt;
}

.fee-notice { color: var(--c-text-muted); }
.success-title { letter-spacing: -0.01em; }

/* ---------- Aufklappbares Element (z. B. „Neuen Mitarbeiter anlegen") ---------- */
details.collapse-card {
	border: 1px solid var(--c-line);
	border-radius: var(--radius-lg);
	background: #fbfcfb;
	margin-bottom: 18px;
	overflow: hidden;
}
.collapse-summary {
	cursor: pointer;
	user-select: none;
	list-style: none;
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 14px 18px;
	font-weight: 700;
	font-size: 11.5pt;
	color: var(--c-ink);
	transition: background .15s ease;
}
.collapse-summary::-webkit-details-marker { display: none; }
.collapse-summary::before {
	content: "+";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--c-green-soft);
	color: var(--c-green);
	font-size: 15pt;
	font-weight: 700;
	line-height: 1;
}
details.collapse-card[open] .collapse-summary::before { content: "\2212"; }
.collapse-summary:hover { background: #f4f8f4; }
.collapse-body { padding: 4px 18px 20px; }

/* ---------- Wochenraster feste Sperrzeiten ---------- */
.recurring-grid {
	display: grid;
	grid-template-columns: 56px repeat(5, 1fr);
	gap: 4px;
	margin-top: 8px;
	max-width: 520px;
}
.rec-wd {
	text-align: center;
	font-weight: 700;
	font-size: 9.5pt;
	color: #46544b;
	padding: 2px 0 4px;
}
.rec-time {
	display: flex;
	align-items: center;
	font-size: 9.5pt;
	color: var(--c-text-muted);
	font-weight: 600;
}
.rec-cell {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 30px;
	border: 1px solid #d6ddd6;
	border-radius: 7px;
	background: #fff;
	cursor: pointer;
	transition: background .12s ease, border-color .12s ease;
}
.rec-cell:hover { background: #f6f9f6; }
.rec-cell input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.rec-cell.on { background: #fdecea; border-color: #e7a39c; }
.rec-cell.on::after { content: "\2715"; color: var(--c-danger); font-weight: 700; font-size: 10pt; }
.rec-cell-na { background: #f3f5f3; border: 1px solid #eef2ec; cursor: default; }
.rec-cell-na:hover { background: #f3f5f3; }

/* =========================================================
   Mobile-/iPhone-Optimierung (Backend + öffentliche Seiten).
   Lädt zuletzt und überschreibt gezielt für schmale Screens.
   ========================================================= */
@media (max-width: 640px) {
	/* iOS zoomt beim Fokussieren, wenn die Schrift < 16px ist – global anheben.
	   Behebt das lästige „Reinzoomen“ auf jedem Eingabefeld. */
	input[type="text"], input[type="password"], input[type="email"],
	input[type="url"], input[type="tel"], input[type="number"],
	input[type="date"], input[type="search"], select, textarea,
	.template-editor {
		font-size: 16px !important;
	}

	/* Mehr nutzbare Breite, weniger Rand */
	body { padding: 12px; }
	body.backend { padding: 12px 12px 40px; }
	h1 { font-size: 17pt; }
	h2 { font-size: 14pt; }
	body.backend h1 { font-size: 16pt; }

	/* Karten/Panels schlanker */
	.form-panel, .template-panel, .calendar-shell, .panel,
	.page .panel, main.page .panel, .login-card, .collapse-card {
		padding: 16px 14px !important;
		border-radius: 12px;
	}
	.calendar-shell { padding: 14px !important; }
	.collapse-body { padding: 4px 14px 18px; }

	/* Größere, fingerfreundliche Tap-Ziele */
	button, input[type="submit"], .btn, .btn-primary, .btn-secondary,
	.btn-danger, .secondary-button, .delete-button,
	.nav-link, .nav-logout {
		min-height: 44px;
	}
	button, input[type="submit"] {
		padding-top: 11px;
		padding-bottom: 11px;
	}
	.nav-link, .nav-logout { padding-top: 11px; padding-bottom: 11px; }

	/* Primär-/Sekundär-Buttons volle Breite (leichter zu treffen) */
	.btn, .btn-primary, .btn-secondary, .btn-danger,
	.secondary-button, .delete-button {
		width: 100%;
		justify-content: center;
	}

	/* Formulare einspaltig, Felder volle Breite */
	.form-grid { grid-template-columns: 1fr !important; }
	input[type="text"], input[type="password"], input[type="email"],
	input[type="url"], input[type="tel"], input[type="number"], textarea {
		max-width: none;
	}

	/* Verfügbarkeits-Raster: Tage untereinander stapeln statt horizontal scrollen.
	   (Die Tageskarten setzen grid-column inline – hier per !important auflösen.) */
	.avail-edit-scroll, .avail-public-scroll { overflow-x: visible; }
	#kalenderGrid, .avail-public-grid, .calendar-grid {
		grid-template-columns: 1fr !important;
		min-width: 0 !important;
	}
	.calendar-day { grid-column: auto !important; }

	/* Zeit-Slots je Tag in 3 gut tippbaren Spalten */
	.calendar-slots {
		grid-template-columns: repeat(3, 1fr) !important;
	}
	.time-slot, .avail-slot, .slot-link, .slot-empty {
		min-height: 44px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	/* Link-Zeilen (Buchungslink kopieren/öffnen) untereinander */
	.share-link-row, .appt-share-row, .branding-link-row {
		flex-direction: column;
		align-items: stretch;
	}
	.share-link-row input, .appt-share-input, .branding-link-row input {
		min-width: 0;
		width: 100%;
	}

	/* Farbwähler-Zeile umbrechen */
	.branding-color-row { flex-direction: column; gap: 10px; }

	/* Sperrzeiten-Raster etwas kompakter, damit es sicher passt */
	.recurring-grid { grid-template-columns: 44px repeat(5, 1fr); gap: 3px; }

	/* Nichts soll horizontal überlaufen */
	img { max-width: 100%; height: auto; }
	table { display: block; max-width: 100%; overflow-x: auto; }
}