/*
 * Alemannia Matchcenter – Tabs + Karussell.
 * Optik in :where() (Spezifität 0) + CSS-Variablen → Elementor-Einstellungen gewinnen immer.
 * Funktionale Regeln (Karussell, Sichtbarkeit, Animation) bleiben normal gewichtet.
 */
:root {
	--amc-ink: #0b0b0b;
	--amc-muted: #5a5a5a;
	--amc-gap: 20px;
	--amc-ease: cubic-bezier(.65, 0, .35, 1); /* weiches Ease-in-out */
	--amc-dur: .65s;
}
:where(.amc) { margin: 0 0 2rem; }
:where(.amc) *, :where(.amc) *::before, :where(.amc) *::after { box-sizing: border-box; }

:where(.amc__head) { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 24px; }
.amc .amc__title { letter-spacing: .01em; margin: 0; font-family: var(--e-global-typography-primary-font-family, "Barlow Condensed"), "Arial Narrow", sans-serif; font-size: clamp(32px, 4vw, 44px); font-weight: 800; line-height: 1; text-transform: uppercase; }

:where(.amc__tabs) { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; max-width: 100%; padding: 3px; margin: -3px; }
.amc .amc__tab {
	min-height: 44px; padding: 0 16px; border-radius: 4px; white-space: nowrap; cursor: pointer;
	font: 600 14px/1 inherit; text-transform: none; letter-spacing: 0;
	background: var(--amc-tab-bg, #fff); color: var(--amc-tab-fg, var(--amc-ink)); border: 1px solid var(--amc-tab-line, #cfcfcf);
	transition: background-color .35s var(--amc-ease), color .35s var(--amc-ease), border-color .35s var(--amc-ease);
}
.amc .amc__tab:hover, .amc .amc__tab:focus { border-color: var(--amc-tab-active-bg, var(--amc-ink)); }
.amc .amc__tab[aria-selected="true"], .amc .amc__tab[aria-selected="true"]:hover { background: var(--amc-tab-active-bg, var(--amc-ink)); color: var(--amc-tab-active-fg, #fff); border-color: var(--amc-tab-active-bg, var(--amc-ink)); }
.amc__tab:focus-visible, .amc__panel:focus-visible { outline: 3px solid #1f6feb; outline-offset: 2px; }

.amc__viewport { overflow: hidden; transition: height var(--amc-dur, .65s) var(--amc-ease, ease); padding: 4px; margin: -4px; }
.amc__track { display: flex; align-items: flex-start; transition: transform var(--amc-dur, .65s) var(--amc-ease, ease); will-change: transform; }
.amc__panel { flex: 0 0 100%; min-width: 0; }

/* Mit JS: nur der aktive Panel ist sichtbar/erreichbar – bleibt aber im Layout (volle Breite), damit Widgets richtig messen. */
.amc.is-ready .amc__panel { visibility: hidden; transition: visibility 0s linear var(--amc-dur, .65s); }
.amc.is-ready .amc__panel.is-active { visibility: visible; transition: visibility 0s; }

/* Ohne JS: Teams untereinander, keine Tabs. */
.amc:not(.is-ready) .amc__tabs { display: none; }
.amc:not(.is-ready) .amc__track { display: block; }
.amc:not(.is-ready) .amc__panel + .amc__panel { margin-top: 32px; }

:where(.amc__grid) { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: var(--amc-gap); align-items: start; }
:where(.amc__grid--matches) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); align-items: stretch; }
:where(.amc__grid + .amc__grid) { margin-top: var(--amc-gap); }
:where(.amc__block) { background: #fff; border: 1px solid #e0e0e0; border-radius: 6px; padding: 20px; }
:where(.amc__block--item) { background: none; border: 0; padding: 0; display: flex; flex-direction: column; }
:where(.amc__block--item > .amc-table) { background: #fff; border-radius: 6px; }
.amc .amc__more { display: inline-block; margin-top: 10px; font-size: 14px; font-weight: 600; color: inherit; }
:where(.amc__block-title) { margin: 0 0 12px; font-size: 12px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--amc-muted); }
:where(.amc__widget iframe) { display: block; width: 100%; min-height: 200px; border: 0; }
:where(.amc__notice p) { margin: 0 0 8px; }
:where(.amc__notice p:last-child) { margin-bottom: 0; }

/* Blöcke faden beim Tab-Wechsel nacheinander von unten ein. */
.amc__panel.is-entering .amc__block { animation: amc-rise .55s var(--amc-ease, ease) both; animation-delay: calc(var(--amc-i, 0) * 110ms + 140ms); }
@keyframes amc-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
	.amc__viewport, .amc__track, .amc__tab { transition: none; }
	.amc.is-ready .amc__panel, .amc.is-ready .amc__panel.is-active { transition: none; }
	.amc__panel.is-entering .amc__block { animation: none; }
}