/* TG Buchung Demo */
:root {
	--tgbd-green: #1f5f4a;
	--tgbd-green-dark: #134e3a;
	--tgbd-soft: #eef6f2;
	--tgbd-text: #1d2320;
	--tgbd-line: #cfd6d2;
}

body { padding-bottom: 56px; }

/* ---------- Hinweisleiste ---------- */
.tgbd-bar {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 99990;
	background: var(--tgbd-green-dark); color: #fff;
	font: 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	box-shadow: 0 -2px 10px rgba(0, 0, 0, .15);
}
.tgbd-bar-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; max-width: 1200px; margin: 0 auto; padding: 10px 16px; }
.tgbd-badge { background: #fff; color: var(--tgbd-green-dark); font-weight: 700; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; }
.tgbd-bar-text { flex: 1 1 260px; }
.tgbd-bar-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.tgbd-bar .tgbd-link, .tgbd-bar button.tgbd-link { color: #fff; text-decoration: underline; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.tgbd-bar .tgbd-link:hover, .tgbd-bar .tgbd-link:focus { color: #d9efe5; }
.tgbd-inline { display: inline; margin: 0; }
.tgbd-mail-btn { background: #fff; color: var(--tgbd-green-dark); border: 0; border-radius: 999px; padding: 6px 12px; font: inherit; font-weight: 600; cursor: pointer; }
.tgbd-mail-btn:focus-visible, .tgbd-bar .tgbd-link:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.tgbd-count { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--tgbd-soft); text-align: center; }
.tgbd-count.is-new { background: #d63638; color: #fff; }

/* ---------- Mail-Vorschau ---------- */
.tgbd-panel {
	position: fixed; right: 16px; bottom: 64px; z-index: 99991;
	width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 100px);
	display: flex; flex-direction: column;
	background: #fff; color: var(--tgbd-text); border: 1px solid var(--tgbd-line); border-radius: 10px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .2);
	font: 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.tgbd-panel[hidden] { display: none; }
.tgbd-panel-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--tgbd-line); }
.tgbd-close { background: none; border: 0; font-size: 24px; line-height: 1; cursor: pointer; color: var(--tgbd-text); padding: 0 4px; }
.tgbd-panel-hint { margin: 0; padding: 8px 16px; background: var(--tgbd-soft); font-size: 13px; }
.tgbd-panel-body { overflow: auto; padding: 8px 16px 16px; }
.tgbd-empty { color: #555; }
.tgbd-mail { border: 1px solid var(--tgbd-line); border-radius: 8px; margin: 8px 0; background: #fff; }
.tgbd-mail summary { cursor: pointer; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.tgbd-mail-subject { font-weight: 600; }
.tgbd-mail-meta, .tgbd-mail-files { font-size: 12px; color: #555; }
.tgbd-mail-files { margin: 0 12px 6px; }
.tgbd-mail-frame { display: block; width: 100%; height: 320px; border: 0; border-top: 1px solid var(--tgbd-line); border-radius: 0 0 8px 8px; background: #fff; }

/* ---------- Hinweis ---------- */
.tgbd-toast {
	position: fixed; right: 16px; bottom: 64px; z-index: 99992; max-width: min(460px, calc(100vw - 32px));
	display: flex; align-items: center; gap: 12px;
	background: #1d2320; color: #fff; padding: 12px 14px; border-radius: 8px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
	font: 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.tgbd-toast[hidden] { display: none; }
.tgbd-toast-btn { flex: none; background: #fff; color: #1d2320; border: 0; border-radius: 6px; padding: 6px 10px; font: inherit; font-weight: 600; cursor: pointer; }

/* ---------- Startseite ---------- */
.tgbd-start { font-size: 16px; }
.tgbd-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin: 16px 0; }
.tgbd-card { border: 1px solid var(--tgbd-line); border-radius: 12px; padding: 20px; background: #fff; display: flex; flex-direction: column; }
.tgbd-card.is-current { border-color: var(--tgbd-green); box-shadow: 0 0 0 2px var(--tgbd-green) inset; }
.tgbd-card h3 { margin: 0 0 8px; }
.tgbd-card ul { margin: 0 0 16px 1.1em; padding: 0; flex: 1; }
.tgbd-card form { margin: 0; }
.tgbd-button, a.tgbd-button {
	display: inline-block; background: var(--tgbd-green); color: #fff; border: 2px solid var(--tgbd-green);
	border-radius: 8px; padding: 10px 16px; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
}
.tgbd-button:hover, .tgbd-button:focus { background: var(--tgbd-green-dark); border-color: var(--tgbd-green-dark); color: #fff; }
.tgbd-button.is-secondary { background: #fff; color: var(--tgbd-green); }
.tgbd-button.is-secondary:hover, .tgbd-button.is-secondary:focus { background: var(--tgbd-soft); color: var(--tgbd-green-dark); }
.tgbd-button.is-link { background: none; border-color: transparent; color: var(--tgbd-green); text-decoration: underline; padding-left: 0; }
.tgbd-current { border: 1px solid var(--tgbd-green); background: var(--tgbd-soft); border-radius: 12px; padding: 16px 20px; margin: 0 0 16px; }
.tgbd-current p { margin: 0 0 10px; }
.tgbd-links { display: flex; flex-wrap: wrap; gap: 8px; }
.tgbd-note { background: var(--tgbd-soft); border-left: 4px solid var(--tgbd-green); padding: 10px 14px; }
.tgbd-note.is-warning { background: #fcf6e5; border-left-color: #dba617; }
.tgbd-facts { color: #444; font-size: 15px; }

/* ---------- Backend ---------- */
.wp-admin .tgbd-bar { left: 160px; }
.wp-admin.folded .tgbd-bar { left: 36px; }
@media (max-width: 960px) { .wp-admin.auto-fold .tgbd-bar { left: 36px; } }
@media (max-width: 782px) { .wp-admin .tgbd-bar, .wp-admin.auto-fold .tgbd-bar { left: 0; } }
.wp-admin #wpfooter { display: none; }
.tgbd-locked { opacity: .75; }
.tgbd-locked button[disabled], .tgbd-locked input[disabled], .tgbd-locked select[disabled], .tgbd-locked textarea[disabled] { cursor: not-allowed; }

@media (max-width: 600px) {
	body { padding-bottom: 96px; }
	.tgbd-bar-inner { padding: 8px 12px; font-size: 13px; }
	.tgbd-panel, .tgbd-toast { right: 8px; bottom: 104px; width: calc(100vw - 16px); max-width: none; }
}
.tgb-phone-change { display: none !important; } /* Demo: Telefonnummer der Testkonten ist fest. */
