/* AU Infobar – Individualisierung nur im Child Theme über CSS-Variablen auf .au-infobar, siehe README.md (Abschnitt «Anweisungen für KI-Assistenten»). Plugin-Regeln sind mit .au-infobar gescoped. Masse aus der DERMAarau-Vorlage: Tab 138×40, Abstand 16, erster Tab 185 px von oben, Panel 500, Innenabstand 36. */
.au-infobar {
	--au-infobar-bg: #F39993;
	--au-infobar-color: #fff;
	--au-infobar-accent: #801216;
	--au-infobar-top: 185px;
	--au-infobar-width: 500px;
	--au-infobar-tab-width: 138px;
	--au-infobar-tab-height: 40px;
	--au-infobar-tab-gap: 16px;
	--au-infobar-font: inherit;
	--au-infobar-title-font: inherit;
	--au-infobar-z: 1000; /* über Header/Menü; Site kann überschreiben */
	font-family: var(--au-infobar-font);
}

.au-infobar .au-infobar__item {
	position: fixed;
	top: 0;
	right: 0;
	width: var(--au-infobar-width);
	height: 100vh;
	height: 100dvh;
	z-index: var(--au-infobar-z);
	transform: translateX(100%);
	transition: transform .35s ease;
	pointer-events: none;
}
.au-infobar .au-infobar__item.is-open { transform: translateX(0); z-index: calc(var(--au-infobar-z) + 1); }
/* WordPress-Adminleiste (eingeloggt) nicht überdecken lassen, sonst liegt das X darunter */
body.admin-bar .au-infobar .au-infobar__item { top: 32px; height: calc(100vh - 32px); height: calc(100dvh - 32px); }
@media (max-width: 782px) { body.admin-bar .au-infobar .au-infobar__item { top: 46px; height: calc(100vh - 46px); height: calc(100dvh - 46px); } }

.au-infobar .au-infobar__tab {
	position: absolute;
	z-index: 2; /* Tab (= Schliessen-Balken) liegt über dem Panel, dessen Schatten fällt dahinter (Aorta 2026-09) */
	top: calc(var(--au-infobar-top) + var(--au-i) * (var(--au-infobar-tab-height) + var(--au-infobar-tab-gap)));
	left: calc(-1 * var(--au-infobar-tab-width));
	width: var(--au-infobar-tab-width);
	height: var(--au-infobar-tab-height);
	display: flex;
	align-items: center;
	gap: 15px;
	padding: 0 0 0 18px;
	margin: 0;
	border: 0;
	border-radius: 4px 0 0 4px;
	background: var(--au-infobar-bg);
	color: var(--au-infobar-color);
	font-family: inherit;
	font-size: 16px;
	line-height: 20px;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none;
	text-align: left;
	min-height: 0;
	box-sizing: border-box;
	cursor: pointer;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
	pointer-events: auto;
	transition: background-color .25s;
}
/* Kein Hover-/Aktiv-Farbwechsel (Vorlage kennt keinen; auf Touch bliebe die Farbe hängen). Nur Tastatur-Fokus sichtbar. */
.au-infobar .au-infobar__tab:hover, .au-infobar .au-infobar__tab:focus { background: var(--au-infobar-bg); color: var(--au-infobar-color); outline: none; }
.au-infobar .au-infobar__tab:focus-visible { box-shadow: 0 0 0 3px var(--au-infobar-color), 0 2px 6px rgba(0, 0, 0, .12); }
.au-infobar .au-infobar__chevron { width: 17px; height: 18px; flex: 0 0 17px; transition: transform .35s ease; }
.au-infobar .au-infobar__item.is-open .au-infobar__chevron { transform: rotate(180deg); }
.au-infobar .au-infobar__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative; top: 2px; } /* Axiforma sitzt in der Zeile 2 px zu hoch, optisch mittig */

/* Alert: weiches Pulsieren, JS beendet es nach 20 s oder beim Öffnen */
.au-infobar .au-infobar__tab.is-alert { animation: au-infobar-pulse 1s ease-in-out infinite alternate; }
@keyframes au-infobar-pulse { from { background-color: var(--au-infobar-bg); } to { background-color: var(--au-infobar-accent); } }
@media (prefers-reduced-motion: reduce) {
	.au-infobar .au-infobar__item, .au-infobar .au-infobar__chevron { transition: none; }
	.au-infobar .au-infobar__tab.is-alert { animation: none; background: var(--au-infobar-accent); }
}

.au-infobar .au-infobar__panel {
	position: absolute;
	z-index: 1;
	inset: 0;
	background: var(--au-infobar-bg);
	color: var(--au-infobar-color);
	box-shadow: -8px 0 24px rgba(0, 0, 0, .12);
	pointer-events: auto;
	visibility: hidden;
	transition: visibility 0s .35s;
}
.au-infobar .au-infobar__item.is-open .au-infobar__panel { visibility: visible; transition-delay: 0s; }
/* Geöffnet: Tab und Panel wirken als ein Element – Tab-Schatten an der rechten Kante abschneiden (sonst Schattenstreifen auf der Naht) */
.au-infobar .au-infobar__item.is-open .au-infobar__tab { clip-path: inset(-12px 0 -12px -12px); }
.au-infobar .au-infobar__panel:focus { outline: none; }

.au-infobar .au-infobar__close {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--au-infobar-color);
	padding: 0;
	min-height: 0;
	font-size: 32px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.au-infobar .au-infobar__close:hover, .au-infobar .au-infobar__close:focus-visible { background: rgba(255, 255, 255, .18); outline: none; }

.au-infobar .au-infobar__scroll { height: 100%; overflow-y: auto; padding: 68px 36px 60px; box-sizing: border-box; }
.au-infobar .au-infobar__title:focus { outline: none; }
.au-infobar .au-infobar__title { margin: 0 0 40px; font-family: var(--au-infobar-title-font); font-weight: 400; font-size: 36px; line-height: 40px; color: var(--au-infobar-color); padding-right: 40px; }
.au-infobar .au-infobar__content { font-size: 20px; line-height: 28px; font-weight: 300; overflow-wrap: anywhere; }
.au-infobar .au-infobar__content p { margin: 0 0 28px; }
.au-infobar .au-infobar__content > :last-child { margin-bottom: 0; }
.au-infobar .au-infobar__content strong, .au-infobar .au-infobar__content b { font-weight: 700; }
.au-infobar .au-infobar__content a { color: var(--au-infobar-color); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.au-infobar .au-infobar__content ul, .au-infobar .au-infobar__content ol { margin: 0 0 28px; padding-left: 24px; }
.au-infobar .au-infobar__content h1, .au-infobar .au-infobar__content h2, .au-infobar .au-infobar__content h3, .au-infobar .au-infobar__content h4 { color: var(--au-infobar-color); margin: 0 0 16px; }
.au-infobar .au-infobar__content img { max-width: 100%; height: auto; }

/* Menüpunkte aus «Im Mobile-Menü anhängen» nur im Burger-Menü, nicht in der Desktop-Leiste */
.elementor-nav-menu--main li.au-infobar-menu-item { display: none !important; } /* gegen Pro-Layoutregel mit höherer Spezifität */

@media (max-width: 767px) {
	.au-infobar { --au-infobar-width: 100vw; --au-infobar-tab-width: 40px; --au-infobar-tab-height: 138px; --au-infobar-tab-gap: 12px; }
	.au-infobar .au-infobar__item--no-mobile .au-infobar__tab { display: none; } /* nur der Tab, das Panel bleibt für Menülinks erreichbar */
	/* Tabs hochkant am rechten Rand: Text liest von unten nach oben, Pfeil zeigt in die Seite */
	.au-infobar .au-infobar__tab { writing-mode: vertical-rl; transform: rotate(180deg); padding: 16px 0 0; gap: 12px; border-radius: 0 4px 4px 0; justify-content: flex-start; }
	.au-infobar .au-infobar__chevron { transform: rotate(180deg); }
	.au-infobar .au-infobar__label { top: 0; left: -2px; } /* hochkant: Schrift sitzt 2 px zu weit links, Element ist um 180° gedreht */
	.au-infobar .au-infobar__item.is-open .au-infobar__tab { visibility: hidden; }
	.au-infobar .au-infobar__scroll { padding: 68px 24px 48px; }
	.au-infobar .au-infobar__title { font-size: 30px; line-height: 36px; margin-bottom: 28px; }
	.au-infobar .au-infobar__content { font-size: 18px; line-height: 27px; }
}