/**
 * ALBOMED Partner Portal – Stylesheet
 *
 * EINE Datei für das gesamte Portal (Login-Seite + Dashboard). Wird über
 * Assets::enqueue_portal_style() eingereiht – von Assets::enqueue (Dashboard)
 * und Login::enqueue (Login-Seite).
 *
 * Farben, Abstände, Radien und Schriftgrößen kommen als `--albo-*`-Tokens aus
 * dem ALBOMED Design System (https://dev.4plex.de/ui-library/). Die Tokens
 * liegen im Elementor-Kit-CSS und laden global auf allen Seiten; die Fallbacks
 * in `var(…, fallback)` greifen nur, falls das Kit-CSS einmal fehlt.
 *
 * Aufbau:
 *   01  Gemeinsame Komponenten (Buttons, Eingabefelder, Selects)
 *   02  Login-Seite
 *   03  Dashboard: vertikale Tabs als Sidebar
 *   04  Kontaktformular (acf_form)
 *   05  Produktliste [albomed_products]
 *   06  Sidebar-Bausteine (Logo, Nav-Icons, User-Box)
 *   07  Notifications [albomed_notifications] + Badge
 */

/* =========================================================================
 * 01  GEMEINSAME KOMPONENTEN
 *
 * Alles, was Login-Seite und Dashboard teilen. Seitenspezifische Regeln weiter
 * unten überschreiben hier nur noch, was sich wirklich unterscheidet
 * (z. B. Hintergrundfarbe der Buttons, Innenabstand der Felder).
 * ===================================================================== */

/* ---------- Buttons ----------------------------------------------------
 * Geteilt vom Download-/Link-Button (Products-Tab), dem Submit-Button der
 * Login-Karte und den Save-/Bestätigen-Buttons des Kontaktformulars.
 * Hier steht alles AUSSER der Hintergrundfarbe – die setzt der jeweilige
 * Abschnitt weiter unten.
 *
 * Zwei Eigenheiten, die KEINE Aufräum-Kandidaten sind:
 *
 * 1. Die doppelte Klasse `.albomed-btn.albomed-btn` erzeugt Spezifität (0,2,0).
 *    Das Theme stylet alle echten Buttons via `.elementor-kit-6 button` (0,1,1)
 *    als grüne CI-Pille – ein einfaches `.albomed-btn` (0,1,0) würde dagegen
 *    VERLIEREN, trotz !important (bei !important auf beiden Seiten entscheidet
 *    weiterhin die Spezifität).
 * 2. `!important` auf Darstellung/Abstand, weil das Theme dieselben
 *    Eigenschaften ebenfalls mit !important setzt.
 * Für die <a>-Varianten (Download/Link) ist beides wirkungslos, schadet dort
 * aber nicht.
 * -------------------------------------------------------------------- */

.albomed-btn.albomed-btn {
	display: inline-block !important;
	box-sizing: border-box;
	padding: 0.9rem 1.4rem !important;
	border: 0 !important;
	border-radius: var(--albo-radius-pill, 999px) !important;
	color: var(--albo-white, #ffffff) !important;
	font-size: 15px !important;
	font-weight: var(--albo-weight-medium, 500) !important;
	line-height: 1.2 !important;
	text-align: center;
	text-decoration: none !important;
	text-transform: none !important;
	white-space: nowrap;
	box-shadow: none !important;
	cursor: pointer;
	transition: background-color var(--albo-transition-fast, 0.3s ease);
}

.albomed-btn.albomed-btn:hover,
.albomed-btn.albomed-btn:focus {
	color: var(--albo-white, #ffffff) !important;
	text-decoration: none !important;
}

/* ---------- Eingabefelder ----------------------------------------------
 * Ein Look für Login-Karte und Kontaktformular: Hintergrund und Rahmen wie
 * bisher auf der Login-Karte, Radius wie im Kontaktformular.
 * Der Innenabstand bleibt bewusst pro Kontext (Login großzügig auf der Karte,
 * Kontaktformular kompakt im zweispaltigen Raster) – siehe Abschnitte 02/04.
 *
 * ACF rendert die Felder des Kontaktformulars selbst, dort kann keine eigene
 * Klasse gesetzt werden → Selektorliste statt gemeinsamer Klasse.
 * -------------------------------------------------------------------- */

.albomed-login__field input,
#albomed-contact-form .acf-input input[type="text"],
#albomed-contact-form .acf-input input[type="email"],
#albomed-contact-form .acf-input input[type="url"],
#albomed-contact-form .acf-input input[type="tel"],
#albomed-contact-form .acf-input input[type="number"],
#albomed-contact-form .acf-input input[type="password"],
#albomed-contact-form .acf-input textarea {
	box-sizing: border-box;
	width: 100%;
	background: rgba(255, 255, 255, 0.9);
	border: 1px solid var(--albo-grey-200, #e4ebf0);
	border-radius: var(--albo-radius-small, 14px);
	color: var(--albo-blue-dark, #1b3244);
	font-size: var(--albo-size-body, 16px);
	line-height: 1.3;
	box-shadow: none;
}

.albomed-login__field input::placeholder,
#albomed-contact-form .acf-input input::placeholder,
#albomed-contact-form .acf-input textarea::placeholder {
	color: var(--albo-blue-light, #95b1c4);
}

.albomed-login__field input:focus,
#albomed-contact-form .acf-input input:focus,
#albomed-contact-form .acf-input textarea:focus,
#albomed-contact-form .acf-input select:focus,
.albomed-portal .albomed-filter select:focus {
	outline: none;
	border-color: var(--albo-blue-dark, #1b3244);
	box-shadow: 0 0 0 3px rgba(27, 50, 68, 0.12);
}

/* ---------- Selects ----------------------------------------------------
 * Durchgehend im Stil der Filter-Dropdowns des Products-Tabs: weiß, gerundet,
 * eigenes Chevron (das native Pfeil-Widget wird per appearance:none entfernt).
 * -------------------------------------------------------------------- */

:root {
	--albomed-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6872' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

.albomed-portal .albomed-filter select,
#albomed-contact-form .acf-input select {
	box-sizing: border-box;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-color: var(--albo-white, #ffffff);
	background-image: var(--albomed-chevron);
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	background-size: 0.9rem;
	border: 1px solid var(--albo-grey-200, #e4ebf0);
	border-radius: var(--albo-radius-small, 14px);
	padding: 0.6rem 2.25rem 0.6rem 0.85rem;
	color: var(--albo-blue-dark, #1b3244);
	font-size: var(--albo-size-body, 16px);
	box-shadow: none;
	cursor: pointer;
}

#albomed-contact-form .acf-input select {
	width: 100%;
}

/* =========================================================================
 * 02  LOGIN-SEITE – Vorlage: screenshots/login.png
 *
 * Das Hintergrundbild kommt als Inline-Style aus Login::enqueue
 * (Filter `albomed_login_background_url`).
 * ===================================================================== */

/* Seitentitel des Themes ("Partner Portal") ausblenden – die Karte trägt den Titel.
   Über `body:has(.albomed-login)` auf die Login-Seite eingegrenzt: seit der
   Zusammenführung lädt dieses Stylesheet auch auf dem Dashboard, wo der
   Seitentitel NICHT verschwinden darf. */
body:has(.albomed-login) .page-header,
body:has(.albomed-login) .entry-header .entry-title {
	display: none;
}

/* =========================================================================
 * Bühne (full-bleed aus dem eingeschränkten Content-Container ausbrechen)
 * ===================================================================== */

.albomed-login {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	padding: 5rem 1.25rem;
	min-height: 42rem;
	background-color: var(--albo-grey-200, #e4ebf0);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

/* =========================================================================
 * Karte (Glas-Effekt)
 * ===================================================================== */

.albomed-login__card {
	box-sizing: border-box;
	width: 100%;
	max-width: 41rem;
	padding: 3rem 3.5rem 2.5rem;
	border-radius: var(--albo-radius-small, 14px);
	background: rgba(255, 255, 255, 0.62);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: var(--albo-shadow-glass, 0 20px 50px rgba(27, 50, 68, 0.18));
	text-align: center;
}

.albomed-login__logo {
	display: block;
	width: 100%;
	max-width: 17rem;
	height: auto;
	margin: 0 auto 1.5rem;
}

/* Kartentitel folgt .albo-h3 des Design-Systems: light (300), negatives Tracking. */
.albomed-login__title {
	margin: 0 0 1.75rem;
	color: var(--albo-blue-dark, #1b3244);
	font-size: var(--albo-size-h3, clamp(28px, 2.2vw, 34px));
	font-weight: var(--albo-weight-light, 300);
	letter-spacing: var(--albo-track-heading, -0.025em);
	line-height: 1.2;
}

/* =========================================================================
 * Hinweise
 * ===================================================================== */

.albomed-login__notice {
	margin: 0 0 1.25rem;
	padding: 0.7rem 1rem;
	border-radius: var(--albo-radius-small, 14px);
	background: rgba(255, 255, 255, 0.75);
	color: var(--albo-grey-500, #5b6872);
	font-size: var(--albo-size-body, 16px);
	text-align: left;
}

.albomed-login__notice--error {
	background: #fdecec;
	color: #a3272a;
}

.albomed-login__notice--success {
	background: #f1f6e4;
	color: #4d6114;
}

/* Erklärtext über dem Formular (Reset-Ansichten) */
.albomed-login__intro {
	margin: -0.75rem 0 1.5rem;
	color: var(--albo-grey-500, #5b6872);
	font-size: var(--albo-size-body, 16px);
	line-height: var(--albo-line-body, 1.7);
}

/* Kleiner Hinweis unter den Feldern (z. B. Mindestlänge) */
.albomed-login__hint {
	margin: -0.25rem 0 1.25rem;
	color: var(--albo-grey-500, #5b6872);
	font-size: var(--albo-size-small, 14px);
}

/* =========================================================================
 * Felder
 * ===================================================================== */

.albomed-login__field {
	position: relative;
	margin: 0 0 1rem;
}

/* Aussehen kommt aus Abschnitt 01 – hier nur der großzügigere Innenabstand
   der Login-Karte. */
.albomed-login__field input {
	padding: 1.05rem 1.5rem;
}

/* =========================================================================
 * Remember me / Forgot Password
 * ===================================================================== */

.albomed-login__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin: 1.25rem 0 1.75rem;
}

.albomed-login__remember {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0;
	color: var(--albo-grey-500, #5b6872);
	font-size: var(--albo-size-body, 16px);
	cursor: pointer;
}

.albomed-login__remember input {
	width: 1.15rem;
	height: 1.15rem;
	margin: 0;
	accent-color: var(--albo-blue-dark, #1b3244);
}

.albomed-login__lost {
	color: var(--albo-grey-500, #5b6872);
	font-size: var(--albo-size-body, 16px);
	text-decoration: underline;
}

.albomed-login__lost:hover,
.albomed-login__lost:focus {
	color: var(--albo-blue-dark, #1b3244);
}

/* =========================================================================
 * Login-Button
 *
 * Form/Typo/Radius kommen aus der gemeinsamen Basis `.albomed-btn` (button.css,
 * geteilt mit dem Download-Button des Products-Tabs) – hier stehen nur
 * Hintergrund und Mindestbreite.
 *
 * `background` MIT !important und als Kurzform: das ALBOMED-Theme stylet alle
 * echten <button> als grüne CI-Pille (!important auf Hintergrund/Padding/Display)
 * und legt zusätzlich ein `background-image`-Gradient darüber – die Kurzform
 * setzt das Gradient mit zurück, `background-color` allein nicht. Nicht
 * "aufräumen": ohne das gewinnt das Theme und der Button wird grün.
 * ===================================================================== */

.albomed-login .albomed-login__card .albomed-login__submit,
.albomed-login .albomed-login__card button.albomed-login__submit {
	min-width: 11rem;
	background: var(--albo-blue, #306387) !important;
}

.albomed-login .albomed-login__card .albomed-login__submit:hover,
.albomed-login .albomed-login__card .albomed-login__submit:focus {
	background: #25526f !important;
}

/* =========================================================================
 * Request Access
 * ===================================================================== */

.albomed-login__request {
	display: inline-block;
	margin-top: 1.25rem;
	color: var(--albo-blue-dark, #1b3244);
	font-size: var(--albo-size-body, 16px);
	text-decoration: underline;
}

.albomed-login__request:hover,
.albomed-login__request:focus {
	color: var(--albo-green, #b0c14c);
}

/* Login-Seite: schmale Viewports */

@media (max-width: 640px) {
	.albomed-login {
		padding: 3rem 1rem;
		min-height: 0;
	}

	.albomed-login__card {
		padding: 2rem 1.5rem;
	}

	.albomed-login__title {
		font-size: 1.75rem;
	}

	.albomed-login__meta {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* =========================================================================
 * 03  DASHBOARD: vertikale Tabs als Sidebar (Desktop)
 * Vorlage: contact information.png
 * Scope: .elementor-element-albtb01 (das Tabs-Widget des Dashboards)
 * ===================================================================== */

@media (min-width: 1024px) {
	.elementor-element-albtb01 .elementor-tabs {
		display: flex;
		align-items: flex-start;
		gap: 2rem;
	}

	.elementor-element-albtb01 .elementor-tabs-wrapper {
		flex: 0 0 280px;
		display: flex;
		flex-direction: column;
		gap: 0.15rem;
		padding: 0.75rem 0.6rem;
		min-height: 34rem;
		background: var(--albo-grey-100, #f3f7fa);
		border-radius: var(--albo-radius-small, 14px);
	}

	.elementor-element-albtb01 .elementor-tabs-content-wrapper {
		flex: 1 1 auto;
		min-width: 0;
	}
}

/* Tab-Buttons (Sidebar-Einträge) */
.elementor-element-albtb01 .elementor-tab-title {
	border: 0 !important;
	border-radius: var(--albo-radius-small, 14px);
	padding: 0.65rem 0.9rem;
	margin: 0;
	color: var(--albo-blue-dark, #1b3244);
	font-weight: var(--albo-weight-medium, 500);
	line-height: 1.3;
	cursor: pointer;
	transition: background-color var(--albo-transition-fast, 0.3s ease);
}

.elementor-element-albtb01 .elementor-tab-title:hover {
	background: var(--albo-grey-100, #f3f7fa);
}

.elementor-element-albtb01 .elementor-tab-title.elementor-active {
	background: var(--albo-grey-200, #e4ebf0);
	color: var(--albo-blue-dark, #1b3244);
	font-weight: var(--albo-weight-semibold, 600);
}

/* Inhaltsbereich: Rahmen der Default-Tabs entfernen */
.elementor-element-albtb01 .elementor-tab-content {
	border: 0 !important;
	padding: 0;
}

/* Feine Default-Borders/Shadows entfernen, die Elementor um das Tabs-Widget,
   die Sidebar (Tabs-Wrapper) und den Inhaltsbereich zeichnet.
   Inkl. Section/Column-Wrapper und der Tab-Titles selbst – bei vertikalen Tabs
   setzt Elementor border-right/Pseudo-Elemente auf die Titles ("Seitenlinie"). */
.elementor-element-albsc01,
.elementor-element-albcl01,
.elementor-element-albtb01,
.elementor-element-albtb01 .elementor-widget-container,
.elementor-element-albtb01 .elementor-tabs,
.elementor-element-albtb01 .elementor-tabs-wrapper,
.elementor-element-albtb01 .elementor-tabs-content-wrapper,
.elementor-element-albtb01 .elementor-tab-title,
.elementor-element-albtb01 .elementor-tab-title.elementor-active,
.elementor-element-albtb01 .elementor-tab-mobile-title {
	border: 0 !important;
	box-shadow: none !important;
}

/* Etwaige Trenn-/Verbindungslinien als Pseudo-Elemente der Tab-Titles entfernen.
   NUR ::after – ::before wird weiter unten für die Nav-Icons genutzt! */
.elementor-element-albtb01 .elementor-tab-title::after {
	display: none !important;
}

/* =========================================================================
 * 04  KONTAKTFORMULAR (acf_form) – Vorlage: contact information.png
 * ===================================================================== */

/* Aufforderung bei fälliger Bestätigung – steht VOR den Feldern (contact.php)
   und soll auffallen: getönte Fläche mit kräftiger Akzentkante links.
   Navy statt Rot/Grün gewählt: es ist eine Aufgabe, kein Fehler und kein Erfolg. */
/* Mit dem Wrapper gescoped (0,2,0) statt nur Klasse (0,1,0): schlägt so
   Theme-Regeln auf `p` (.elementor-kit-6 p = 0,1,1) ohne !important. */
.albomed-contact-form .albomed-contact-notice {
	margin: 0 0 1.5rem;
	padding: 1rem 1.25rem;
	border-left: 4px solid var(--albo-blue, #306387);
	border-radius: var(--albo-radius-small, 14px);
	background: rgba(48, 99, 135, 0.09);
	color: var(--albo-blue-dark, #1b3244);
	font-size: var(--albo-size-body, 16px);
	font-weight: var(--albo-weight-medium, 500);
	line-height: 1.5;
}

/* Top-Gruppe „User Contact Data“ – eigenes Label ausblenden (nicht im Screenshot).
   Wrapper-gescoped: greift nur mit aktueller contact.php (die auch Platzhalter setzt). */
.albomed-contact-form .acf-field-group[data-key="field_6a26be3482b20"] > .acf-label {
	display: none;
}

/* ACF-Trennlinien zwischen Feldern entfernen (Screenshot ist randlos) */
#albomed-contact-form .acf-fields > .acf-field {
	border-top: 0 !important;
}

/* Box-Rahmen, die ACF um seine Feld-Container zeichnet, entfernen
   (umrandet sonst jede Abteilungs-Gruppe – im Screenshot randlos).
   Nur Frontend (dieses CSS lädt nur auf der Dashboard-Seite) → Backend bleibt umrandet.
   Greift NICHT die Eingabefelder selbst (input/textarea/select behalten ihren Rahmen). */
#albomed-contact-form .acf-fields,
#albomed-contact-form .acf-field-group > .acf-input > .acf-fields {
	border: 0 !important;
	border-radius: 0 !important;
}

/* Gruppen-Container ohne ACF-Innenabstand (bündig links) */
#albomed-contact-form .acf-field-group > .acf-input > .acf-fields > .acf-field {
	padding: 0;
}

/* Zweite Ebene: Abteilungs-/Gruppenüberschriften (Customer information general, Ordering, …) */
#albomed-contact-form .acf-field-group .acf-field-group > .acf-label {
	margin: 1.75rem 0 0.75rem;
}

#albomed-contact-form .acf-field-group .acf-field-group > .acf-label label {
	font-size: 1.05rem;
	font-weight: var(--albo-weight-medium, 500);
	color: var(--albo-blue-dark, #1b3244);
}

/* Phone-Feld behält die volle Feldbreite wie die anderen Eingabefelder; der
   Entfernen-Button sitzt absolut RECHTS daneben (außerhalb der 300px-Grid-Zelle,
   im freien Raum rechts des Formulars). contact.js markiert das Phone-Feld mit
   `.albomed-has-remove` und hängt den Button in dessen `.acf-input`. */
#albomed-contact-form .albomed-has-remove > .acf-input {
	position: relative;
}

/* Entfernen-Button je Abteilung: rote Schaltfläche mit Mülltonnen-Icon, direkt
   rechts neben dem Telefon-Eingabefeld und exakt so hoch wie das Feld (top/bottom).
   Bewusst als <a role="button"> (kein <button> – Theme-Pill-Gotcha, s. contact.js). */
.albomed-remove-contact {
	position: absolute;
	left: 100%;
	top: 0;
	bottom: 0;
	margin-left: 0.6rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.4rem;
	padding: 0;
	background: #c0392b;
	color: var(--albo-white, #ffffff);
	border: 0;
	border-radius: var(--albo-radius-small, 14px);
	cursor: pointer;
	text-decoration: none;
	box-shadow: none;
	transition: background-color var(--albo-transition-fast, 0.3s ease);
}

.albomed-remove-contact:hover,
.albomed-remove-contact:focus {
	background: #a5281b;
	color: var(--albo-white, #ffffff);
	outline: none;
}

.albomed-remove-contact svg {
	display: block;
	width: 1.05rem;
	height: 1.05rem;
	stroke: var(--albo-white, #ffffff);
}

/* Einzel-Labels (First Name, Email, …) visuell ausblenden – Platzhalter übernehmen.
   Nicht display:none, damit Screenreader sie weiterhin lesen.
   Wrapper-gescoped: greift nur mit aktueller contact.php (die die Platzhalter setzt),
   damit ohne Platzhalter nicht leere Felder ohne Beschriftung entstehen. */
.albomed-contact-form .acf-field-group .acf-field-group .acf-field > .acf-label {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Leaf-Felder einer Gruppe zweispaltig anordnen.
   Feste Spaltenbreite + max-width: das Formular füllt NICHT die volle Breite,
   sondern bleibt links kompakt (Vorlage: contact information.png). */
#albomed-contact-form .acf-field-group .acf-field-group > .acf-input > .acf-fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 300px));
	gap: 0.9rem 1.5rem;
	max-width: 640px;
}

/* ACF-eigene Float-/Border-/Padding-Logik der Leaf-Felder zurücksetzen */
#albomed-contact-form .acf-field-group .acf-field-group > .acf-input > .acf-fields > .acf-field {
	width: auto;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	float: none;
}

/* Eingabefelder: Aussehen kommt aus Abschnitt 01 – hier nur der kompakte
   Innenabstand für das zweispaltige Raster. */
#albomed-contact-form .acf-input input[type="text"],
#albomed-contact-form .acf-input input[type="email"],
#albomed-contact-form .acf-input input[type="url"],
#albomed-contact-form .acf-input input[type="tel"],
#albomed-contact-form .acf-input input[type="number"],
#albomed-contact-form .acf-input input[type="password"],
#albomed-contact-form .acf-input textarea {
	padding: 0.6rem 0.75rem;
}

/* Aktions-Buttons (Save + Bestätigen): Form/Typo aus `.albomed-btn`
   (Abschnitt 01), hier nur der grüne Hintergrund. */
.albomed-actions .albomed-confirm-button,
.albomed-contact-form .albomed-confirm-button,
.albomed-contact-confirm .albomed-confirm-button {
	background: var(--albo-green, #b0c14c) !important;
}

.albomed-actions .albomed-confirm-button:hover,
.albomed-actions .albomed-confirm-button:focus,
.albomed-contact-form .albomed-confirm-button:hover,
.albomed-contact-form .albomed-confirm-button:focus,
.albomed-contact-confirm .albomed-confirm-button:hover,
.albomed-contact-confirm .albomed-confirm-button:focus {
	background: var(--albo-green-dark, #9aab3f) !important;
}

/* Aktionsleiste: Save-Button, Bestätigen-Button und Status-Text nebeneinander.
   Wird von contact.js befüllt (Elemente aus ACF-Formular + Confirm-Block). */
.albomed-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin-top: 1.75rem;
}

.albomed-actions form,
.albomed-actions .acf-form-submit {
	margin: 0;
}

.albomed-actions p {
	margin: 0;
	color: var(--albo-grey-500, #5b6872);
	font-size: var(--albo-size-small, 14px);
}

/* Einspaltig auf schmalen Viewports */
@media (max-width: 640px) {
	#albomed-contact-form .acf-field-group .acf-field-group > .acf-input > .acf-fields {
		grid-template-columns: 1fr;
	}

	/* Einspaltig ist rechts kein Platz mehr → Button in den Fluss legen, das
	   Telefon-Feld schrumpft (verhindert horizontalen Überlauf). */
	#albomed-contact-form .albomed-has-remove > .acf-input {
		display: flex;
		align-items: center;
		gap: 0.5rem;
	}

	.albomed-remove-contact {
		position: static;
		margin-left: 0;
		flex: 0 0 auto;
		height: 2.4rem;
	}
}

/* =========================================================================
 * 05  PRODUKTLISTE [albomed_products] – Vorlage: screenshots/Products.png
 * Flache Dokumentliste: Titel · Produktname · Download-Button.
 * Überschreibt die funktionale Inline-Basis aus Products_Shortcode::print_assets()
 * via höherer Spezifität (.albomed-portal <selector>).
 * ===================================================================== */

/* Überschrift + Untertitel */
/* Überschrift folgt .albo-h3 des Design-Systems: light (300), negatives Tracking. */
.albomed-portal .albomed-portal__title {
	margin: 0 0 0.4rem;
	font-size: var(--albo-size-h3, clamp(28px, 2.2vw, 34px));
	font-weight: var(--albo-weight-light, 300);
	line-height: 1.2;
	letter-spacing: var(--albo-track-heading, -0.025em);
	color: var(--albo-blue-dark, #1b3244);
}

/* Untertitel folgt .albo-intro */
.albomed-portal .albomed-portal__subtitle {
	margin: 0 0 1.75rem;
	font-size: var(--albo-size-intro, 19px);
	line-height: var(--albo-line-body, 1.7);
	color: var(--albo-grey-500, #5b6872);
}

/* Filter-Dropdowns – Optik kommt aus Abschnitt 01 (Selects) */
.albomed-portal .albomed-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-bottom: 1.75rem;
}

.albomed-portal .albomed-filter {
	margin: 0;
}

.albomed-portal .albomed-filter select {
	min-width: 240px;
}

/* Dokumentliste: flache Zeilen mit feiner Trennlinie */
.albomed-portal .albomed-doc-rows {
	border-top: 1px solid var(--albo-grey-200, #e4ebf0);
}

.albomed-portal .albomed-doc-row {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto;
	align-items: center;
	gap: 1rem;
	padding: 1rem 0.25rem;
	border-bottom: 1px solid var(--albo-grey-200, #e4ebf0);
}

.albomed-portal .albomed-doc-row__title {
	color: var(--albo-blue-dark, #1b3244);
	font-weight: var(--albo-weight-medium, 500);
}

.albomed-portal .albomed-doc-row__product {
	color: var(--albo-grey-500, #5b6872);
	font-size: var(--albo-size-small, 14px);
}

/* Grüner Download-/Link-Button (ALBOMED-Akzent).
   Form/Typo/Radius kommen aus der gemeinsamen Basis `.albomed-btn` (button.css,
   geteilt mit dem Login-Button) – hier stehen nur Hintergrund und Layout.
   Feste Mindestbreite, damit „Download" und „Link" gleich breit sind und die
   Button-Spalte (Grid `auto`) zeilenübergreifend nicht verrutscht. */
.albomed-portal .albomed-doc-row__download {
	justify-self: end;
	min-width: 8rem;
	background: var(--albo-green, #b0c14c);
}

.albomed-portal .albomed-doc-row__download:hover,
.albomed-portal .albomed-doc-row__download:focus {
	background: var(--albo-green-dark, #9aab3f);
}

/* Keine Dokumente */
.albomed-portal .albomed-empty {
	margin: 1rem 0.25rem;
	color: var(--albo-blue-light, #95b1c4);
	font-style: italic;
	font-size: var(--albo-size-small, 14px);
}

/* Hinweisboxen (kein Zugriff / nicht eingeloggt) */
.albomed-portal.albomed-notice {
	padding: 1rem 1.25rem;
	background: var(--albo-grey-100, #f3f7fa);
	border: 0;
	border-radius: var(--albo-radius-small, 14px);
	color: var(--albo-blue-dark, #1b3244);
}

/* Schmale Viewports: Filter & Zeilen stapeln */
@media (max-width: 640px) {
	.albomed-portal .albomed-filter select {
		min-width: 0;
		width: 100%;
	}

	.albomed-portal .albomed-doc-row {
		grid-template-columns: 1fr auto;
		row-gap: 0.35rem;
	}

	.albomed-portal .albomed-doc-row__product {
		grid-column: 1 / -1;
		order: 3;
	}
}

/* =========================================================================
 * 06  SIDEBAR-BAUSTEINE (per JS injiziert: Logo oben, User-Box unten) + Nav-Icons
 * Vorlage: contact information.png / Products.png
 * Die Sidebar ist die Tab-Titel-Spalte (.elementor-tabs-wrapper) des Widgets
 * albtb01. Logo/User-Box hängt sidebar.js ein; Icons liefert reines CSS
 * (Match über data-tab – stabil gegenüber dem injizierten Logo-/User-Knoten).
 * ===================================================================== */

/* --- Logo-Header (oben): Logo | PARTNERS nebeneinander (Vorlage) --- */
.albomed-sb-logo {
	display: flex;
	align-items: stretch;
	gap: 0.85rem;
	padding: 0.35rem 0.4rem 1rem;
	margin-bottom: 0.5rem;
	border-bottom: 1px solid var(--albo-grey-200, #e4ebf0);
}

.albomed-sb-logo__link {
	flex: 0 1 auto;
	display: flex;
	align-items: center;
	line-height: 0;
	min-width: 0;
}

.albomed-sb-logo__img {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: 42px;
}

.albomed-sb-logo__partners {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	padding-left: 0.9rem;
	border-left: 1px solid var(--albo-grey-200, #e4ebf0);
	font-size: var(--albo-size-small, 14px);
	font-weight: var(--albo-weight-medium, 500);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--albo-grey-500, #5b6872);
}

/* --- Nav-Einträge: Icon vor dem Label --- */
.elementor-element-albtb01 .elementor-tab-title {
	display: flex;
	align-items: center;
	gap: 0.65rem;
}

.elementor-element-albtb01 .elementor-tab-title::before {
	content: "" !important;
	display: inline-block !important;
	flex: 0 0 auto;
	width: 1.15em;
	height: 1.15em;
	background: no-repeat center / contain;
	opacity: 0.85;
}

.elementor-element-albtb01 .elementor-tab-title[data-tab="1"]::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b3244' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpolyline points='9 22 9 12 15 12 15 22'/%3E%3C/svg%3E");
}

.elementor-element-albtb01 .elementor-tab-title[data-tab="2"]::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b3244' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9'/%3E%3Cpath d='M13.73 21a2 2 0 0 1-3.46 0'/%3E%3C/svg%3E");
}

.elementor-element-albtb01 .elementor-tab-title[data-tab="3"]::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b3244' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4 12.5-12.5z'/%3E%3C/svg%3E");
}

.elementor-element-albtb01 .elementor-tab-title[data-tab="4"]::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b3244' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
}

.elementor-element-albtb01 .elementor-tab-title[data-tab="5"]::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b3244' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Ccircle cx='8' cy='11' r='2'/%3E%3Cpath d='M5 17c0-1.7 1.3-3 3-3s3 1.3 3 3'/%3E%3Cline x1='14' y1='10' x2='19' y2='10'/%3E%3Cline x1='14' y1='14' x2='19' y2='14'/%3E%3C/svg%3E");
}

/* --- Tab „Training" bis auf Weiteres ausgeblendet (2026-07-28, User) ---
   Bewusst per CSS statt per _elementor_data-Edit: der Tab bleibt samt Inhalt
   erhalten und ist durch Löschen dieses Blocks wieder da. Ausgeblendet werden
   Desktop- UND Mobile-Titel plus das Panel, damit der Bereich auch nicht per
   Tastatur erreichbar ist. Die data-tab-Nummern der übrigen Tabs ändern sich
   dadurch nicht – die Icon-Zuordnung oben bleibt gültig. */
.elementor-element-albtb01 .elementor-tab-title[data-tab="4"],
.elementor-element-albtb01 .elementor-tab-content[data-tab="4"] {
	display: none !important;
}

/* Notification-Badge sitzt rechts im Notifications-Eintrag */
.elementor-element-albtb01 .elementor-tab-title .albomed-notifications-badge {
	margin-left: auto;
}

/* --- User-Box (unten): abgerundete Karte (Vorlage) --- */
.albomed-sb-user {
	margin-top: auto;
	padding-top: 1rem;
}

.albomed-sb-user__toggle {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	width: 100%;
	padding: 0.7rem 0.85rem;
	background: var(--albo-white, #ffffff);
	border: 0;
	border-radius: var(--albo-radius-small, 14px);
	box-shadow: var(--albo-shadow-soft, 0 12px 32px rgba(27, 50, 68, 0.1));
	text-align: left;
	cursor: pointer;
	transition: box-shadow var(--albo-transition-fast, 0.3s ease);
}

.albomed-sb-user__toggle:hover {
	box-shadow: var(--albo-shadow-hover, 0 18px 42px rgba(27, 50, 68, 0.16));
}

.albomed-sb-user__avatar {
	flex: 0 0 auto;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	object-fit: cover;
}

.albomed-sb-user__meta {
	display: flex;
	flex-direction: column;
	min-width: 0;
	line-height: 1.25;
}

.albomed-sb-user__name {
	font-weight: var(--albo-weight-medium, 500);
	font-size: var(--albo-size-body, 16px);
	color: var(--albo-blue-dark, #1b3244);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.albomed-sb-user__email {
	font-size: var(--albo-size-small, 14px);
	color: var(--albo-grey-500, #5b6872);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.albomed-sb-user__chevron {
	display: flex;
	flex: 0 0 auto;
	margin-left: auto;
	color: var(--albo-blue-dark, #1b3244);
	transition: transform 0.15s ease;
}

.albomed-sb-user__chevron svg {
	width: 20px;
	height: 20px;
}

.albomed-sb-user.is-open .albomed-sb-user__chevron {
	transform: rotate(180deg);
}

.albomed-sb-user__menu {
	margin-top: 0.4rem;
}

.albomed-sb-user__logout {
	display: block;
	padding: 0.55rem 0.75rem;
	background: var(--albo-white, #ffffff);
	border: 1px solid var(--albo-grey-200, #e4ebf0);
	border-radius: var(--albo-radius-small, 14px);
	color: var(--albo-blue-dark, #1b3244);
	font-size: var(--albo-size-small, 14px);
	text-decoration: none;
}

.albomed-sb-user__logout:hover {
	background: var(--albo-grey-100, #f3f7fa);
}

/* =========================================================================
 * 07  NOTIFICATIONS [albomed_notifications] + Badge
 *
 * Aufklappbare Liste aus nativen <details>/<summary>: zugeklappt Betreff ·
 * Datum · gekürzte Vorschau, aufgeklappt der volle Editor-Inhalt. Das native
 * Element spart JavaScript (wichtig, weil die Liste in einem anfangs
 * ausgeblendeten Elementor-Tab liegt) und vermeidet ein <button>, das vom
 * Theme als grüne CI-Pille überschrieben würde.
 *
 * Kopfzeile und Zeilen teilen sich dasselbe Grid, damit die Datumsspalte
 * durchgehend fluchtet.
 * ===================================================================== */

.albomed-portal .albomed-notifications-list {
	border-top: 1px solid var(--albo-grey-200, #e4ebf0);
}

.albomed-portal .albomed-notifications-list__head,
.albomed-portal .albomed-notification__summary {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: baseline;
	gap: 0.3rem 1rem;
	padding: 1rem 0.25rem;
}

.albomed-portal .albomed-notifications-list__head {
	padding-top: 0.6rem;
	padding-bottom: 0.6rem;
	border-bottom: 1px solid var(--albo-grey-200, #e4ebf0);
	color: var(--albo-grey-500, #5b6872);
	font-size: var(--albo-size-small, 14px);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.albomed-portal .albomed-notification {
	border-bottom: 1px solid var(--albo-grey-200, #e4ebf0);
}

/* Klickfläche. Das Standard-Dreieck wird entfernt (drei Schreibweisen für
   Firefox / WebKit / Standard), das eigene Chevron sitzt am Betreff. */
.albomed-portal .albomed-notification__summary {
	cursor: pointer;
	list-style: none;
}

.albomed-portal .albomed-notification__summary::-webkit-details-marker {
	display: none;
}

.albomed-portal .albomed-notification__summary::marker {
	content: "";
}

.albomed-portal .albomed-notification:not(.albomed-notification--static) .albomed-notification__summary:hover .albomed-notification__subject {
	color: var(--albo-blue, #306387);
}

.albomed-portal .albomed-notification__subject {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-width: 0;
	color: var(--albo-blue-dark, #1b3244);
	transition: color var(--albo-transition-fast, 0.3s ease);
}

/* Chevron: zugeklappt nach rechts, aufgeklappt nach unten. */
.albomed-portal .albomed-notification__subject::before {
	content: "";
	flex: none;
	width: 0.7rem;
	height: 0.7rem;
	background: var(--albomed-chevron) no-repeat center / contain;
	transform: rotate(-90deg);
	transition: transform var(--albo-transition-fast, 0.3s ease);
}

.albomed-portal .albomed-notification[open] .albomed-notification__subject::before {
	transform: rotate(0deg);
}

/* Ohne Inhalt und ohne Link gibt es nichts aufzuklappen – kein Chevron, kein
   Klick-Affordance (Markup kommt dann ohne <details> aus). */
.albomed-portal .albomed-notification--static .albomed-notification__summary {
	cursor: default;
}

.albomed-portal .albomed-notification--static .albomed-notification__subject::before {
	display: none;
}

.albomed-portal .albomed-notification--new .albomed-notification__subject {
	font-weight: var(--albo-weight-medium, 500);
}

.albomed-portal .albomed-notification__dot {
	flex: none;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: #d63638;
}

.albomed-portal .albomed-notification__date {
	color: var(--albo-grey-500, #5b6872);
	font-size: var(--albo-size-small, 14px);
	white-space: nowrap;
}

/* Vorschau: eigene Zeile über die volle Breite, eingerückt auf Höhe des
   Betreffs (Chevron-Breite + Gap). Aufgeklappt überflüssig → ausgeblendet. */
.albomed-portal .albomed-notification__excerpt {
	grid-column: 1 / -1;
	padding-left: 1.2rem;
	color: var(--albo-grey-500, #5b6872);
	font-size: var(--albo-size-small, 14px);
	line-height: 1.5;
}

.albomed-portal .albomed-notification[open] .albomed-notification__excerpt {
	display: none;
}

.albomed-portal .albomed-notification__content {
	padding: 0 0.25rem 1.5rem 1.45rem;
	line-height: var(--albo-line-body, 1.75);
}

.albomed-portal .albomed-notification__content > :first-child {
	margin-top: 0;
}

.albomed-portal .albomed-notification__content > :last-child {
	margin-bottom: 0;
}

/* Grüner Link-Button wie im Products-Tab; Form/Typo kommen aus .albomed-btn. */
.albomed-portal .albomed-notification__link {
	margin-top: 1.25rem;
	background: var(--albo-green, #b0c14c);
}

.albomed-portal .albomed-notification__link:hover,
.albomed-portal .albomed-notification__link:focus {
	background: var(--albo-green-dark, #9aab3f);
}

/* Rote Badge. BEWUSST nicht auf .albomed-portal gescopt: sidebar.js hängt eine
   zweite Badge in den Notifications-Tab-Titel, der außerhalb liegt (die
   Positionierung dort steht in Abschnitt 06). */
.albomed-notifications-badge {
	display: inline-block;
	min-width: 1.4em;
	padding: 0 0.4em;
	border-radius: var(--albo-radius-pill, 999px);
	background: #d63638;
	color: var(--albo-white, #ffffff);
	font-size: 0.75rem;
	line-height: 1.4em;
	text-align: center;
}

/* Schmale Viewports: Datum unter den Betreff statt daneben. */
@media (max-width: 640px) {
	.albomed-portal .albomed-notifications-list__head,
	.albomed-portal .albomed-notification__summary {
		grid-template-columns: 1fr;
	}

	.albomed-portal .albomed-notifications-list__head span:last-child {
		display: none;
	}

	.albomed-portal .albomed-notification__date {
		padding-left: 1.2rem;
	}
}

/* =========================================================================
 * 08  DASHBOARD-KARTEN – Vorlage: screenshots/Screendesign_Dashboard.png
 *
 * Zwei Bausteine: die Ansprechpartner-Karte [albomed_contact_card] und die
 * Kennzahlen-Zeile [albomed_overview]. Beide bewusst NICHT auf `.albomed-portal`
 * gescoped – sie stehen als eigene Shortcodes im Dashboard-Tab und liegen damit
 * nicht zwangsläufig in einem Portal-Wrapper.
 *
 * Die Kartenoptik (weiße Fläche, Rahmen, Radius, weicher Schatten) teilen sich
 * beide über eine gemeinsame Selektorliste – kommen weitere Blöcke dazu (News,
 * Useful Resources), dort ergänzen statt kopieren.
 * ===================================================================== */

/* Zwei Blöcke nebeneinander ([albomed_dashboard_row]). Verhältnis 2:3 wie im
   Screendesign – der Ansprechpartner braucht weniger Breite als die vier
   Quick-Action-Kacheln. Gleiche Höhe entsteht durch das Grid-Default `stretch`.
   Unter 1024px untereinander; die Kacheln im rechten Block brechen dort ohnehin
   auf zwei Spalten. */
.albomed-dashboard-row {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
	gap: 1.5rem;
	margin: 0 0 1.5rem;
}

/* Den Abstand nach unten trägt die Zeile, nicht die Blöcke darin – sonst käme
   unter der Zeile 1.5rem doppelt zusammen.
   Die Blöcke sind hier EINZELN benannt (0,2,0): ein `> *` hätte nur 0,1,0 und
   würde von der margin-Regel der Blöcke gleich darunter überschrieben, weil die
   später in der Datei steht. */
.albomed-dashboard-row > .albomed-contact-card,
.albomed-dashboard-row > .albomed-quick-actions,
.albomed-dashboard-row > .albomed-overview {
	margin-bottom: 0;
}

@media (max-width: 1024px) {
	.albomed-dashboard-row {
		grid-template-columns: 1fr;
	}
}

/* Jeder Block trägt seinen Abstand nach UNTEN. Die Blöcke sind eigene
   Shortcodes im Elementor-Tab und stehen als direkte Geschwister im selben
   Container – ohne margin klebten sie aneinander. Der Abstand am letzten Block
   ist bewusst in Kauf genommen: welcher das ist, weiß das CSS nicht (Elementor
   kann eigene Elemente dahinter setzen).
   KEIN box-shadow – Vorgabe User 30.07. („lass erstmal weg"). */
.albomed-contact-card,
.albomed-overview,
.albomed-quick-actions {
	margin: 0 0 1.5rem;
	padding: 1.5rem 1.75rem;
	background: var(--albo-white, #ffffff);
	border: 1px solid var(--albo-grey-200, #e4ebf0);
	border-radius: var(--albo-radius-small, 14px);
}

.albomed-contact-card__title,
.albomed-overview__title,
.albomed-quick-actions__title {
	margin: 0 0 1.25rem;
	color: var(--albo-blue-dark, #1b3244);
	font-size: var(--albo-size-h4, 20px);
	font-weight: var(--albo-weight-medium, 500);
	line-height: 1.3;
}

/* --- Ansprechpartner ---------------------------------------------------- */

.albomed-contact-card__body {
	display: flex;
	align-items: center;
	gap: 1.5rem;
}

.albomed-contact-card__photo {
	flex: 0 0 auto;
}

/* Runder Zuschnitt unabhängig vom Seitenverhältnis des hochgeladenen Bildes. */
.albomed-contact-card__img {
	display: block;
	width: 104px;
	height: 104px;
	border-radius: 50%;
	object-fit: cover;
}

.albomed-contact-card__name {
	margin: 0;
	color: var(--albo-blue-dark, #1b3244);
	font-size: var(--albo-size-body, 16px);
	font-weight: var(--albo-weight-medium, 500);
}

.albomed-contact-card__role {
	margin: 0 0 0.75rem;
	color: var(--albo-grey-500, #6b7480);
	font-size: var(--albo-size-small, 14px);
}

.albomed-contact-card__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.albomed-contact-card__list li {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0 0 0.4rem;
	font-size: var(--albo-size-small, 14px);
	line-height: 1.4;
}

.albomed-contact-card__list li:last-child {
	margin-bottom: 0;
}

.albomed-contact-card__icon {
	flex: 0 0 auto;
	width: 1.05rem;
	height: 1.05rem;
	color: var(--albo-blue, #306387);
}

.albomed-contact-card__list a {
	color: var(--albo-blue-dark, #1b3244);
	text-decoration: none;
}

.albomed-contact-card__list a:hover,
.albomed-contact-card__list a:focus {
	text-decoration: underline;
}

.albomed-contact-card__message a {
	color: var(--albo-blue, #306387);
}

/* „Send a message" ohne Ziel: sieht wie ein Link aus, ist aber keiner (das <a>
   trägt kein href). Cursor bleibt Text, damit kein Klick erwartet wird. */
.albomed-contact-card__message-link {
	cursor: default;
}

/* --- Quick Actions ----------------------------------------------------- */

.albomed-quick-actions__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1rem;
}

.albomed-quick-action {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.65rem;
	padding: 1.25rem 0.75rem;
	background: var(--albo-white, #ffffff);
	border: 1px solid var(--albo-grey-200, #e4ebf0);
	border-radius: var(--albo-radius-small, 14px);
	color: var(--albo-blue-dark, #1b3244);
	font-size: var(--albo-size-small, 14px);
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	transition: background var(--albo-transition-fast, 0.3s ease),
		border-color var(--albo-transition-fast, 0.3s ease);
}

.albomed-quick-action:hover,
.albomed-quick-action:focus {
	background: var(--albo-grey-100, #f3f7fa);
	border-color: var(--albo-blue-light, #95b1c4);
	text-decoration: none;
}

.albomed-quick-action__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	background: rgba(48, 99, 135, 0.09);
	border-radius: var(--albo-radius-small, 14px);
	color: var(--albo-blue, #306387);
}

.albomed-quick-action__icon .albomed-icon {
	width: 1.35rem;
	height: 1.35rem;
}

/* --- Kennzahlen -------------------------------------------------------- */

.albomed-overview__tiles {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1rem;
}

.albomed-tile {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	padding: 1.1rem 1.25rem;
	border-radius: var(--albo-radius-small, 14px);
}

.albomed-tile__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 2.75rem;
	height: 2.75rem;
	background: var(--albo-white, #ffffff);
	border-radius: var(--albo-radius-small, 14px);
}

.albomed-tile__icon .albomed-icon {
	width: 1.35rem;
	height: 1.35rem;
}

.albomed-tile__body {
	display: block;
	min-width: 0;
}

.albomed-tile__value {
	display: block;
	color: var(--albo-blue-dark, #1b3244);
	font-size: 1.75rem;
	font-weight: var(--albo-weight-medium, 500);
	line-height: 1.15;
}

/* Die Bestätigungs-Kachel zeigt ein Datum statt einer Zahl – in Zahlengröße
   würde die Zeile brechen. */
.albomed-tile__value--text {
	font-size: var(--albo-size-body, 16px);
	line-height: 1.35;
}

.albomed-tile__label {
	display: block;
	margin-top: 0.15rem;
	color: var(--albo-grey-700, #4a5560);
	font-size: var(--albo-size-small, 14px);
	line-height: 1.3;
}

/* Farbtöne der Kacheln – flächig getönt wie im Screendesign. Rot/Amber sind
   Roh-Hex: für Statusfarben gibt es im Design-System keine Tokens. */
.albomed-tile--blue {
	background: rgba(48, 99, 135, 0.09);
}

.albomed-tile--blue .albomed-icon {
	color: var(--albo-blue, #306387);
}

.albomed-tile--green {
	background: rgba(176, 193, 76, 0.18);
}

.albomed-tile--green .albomed-icon {
	color: #6f7d2a;
}

.albomed-tile--red {
	background: rgba(192, 57, 43, 0.09);
}

.albomed-tile--red .albomed-icon {
	color: #c0392b;
}

.albomed-tile--amber {
	background: rgba(214, 158, 46, 0.14);
}

.albomed-tile--amber .albomed-icon {
	color: #a86e12;
}

@media (max-width: 1024px) {
	.albomed-overview__tiles,
	.albomed-quick-actions__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.albomed-overview__tiles {
		grid-template-columns: 1fr;
	}

	.albomed-contact-card__body {
		flex-direction: column;
		align-items: flex-start;
	}
}