/*
 * stehle bewegt: Übungskatalog. Nur Aufbau (Raster, Abstände, Karten).
 * Schriften und Farben kommen aus Avada. Farben lassen sich über die Variablen
 * unten anpassen, z. B. in Avada › Optionen › Eigenes CSS.
 */
.stehle-bewegt {
	--sbu-akzent: var(--primary_color, #1f5252);
	--sbu-text-akzent: var(--sbu-akzent);
	--sbu-flaeche: rgba(65, 149, 149, .10);
	--sbu-rahmen: rgba(0, 0, 0, .12);
	--sbu-warnung: #9a5a1a;
	--sbu-warnung-flaeche: #fbf1e6;
	--sbu-rund: 18px;
	--sbu-abstand: 1.5rem;
}

/* Knöpfe */
.stehle-bewegt .sbu-knopf { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: .55em 1.5em; border-radius: 999px; background: var(--sbu-akzent); color: #fff; border: 2px solid var(--sbu-akzent); font-weight: 700; text-decoration: none; cursor: pointer; font: inherit; font-weight: 700; line-height: 1.2; }
.stehle-bewegt .sbu-knopf:hover, .stehle-bewegt .sbu-knopf:focus-visible { filter: brightness(.9); color: #fff; }
.stehle-bewegt .sbu-knopf--zweitrangig { background: transparent; color: var(--sbu-text-akzent); }
.stehle-bewegt .sbu-knopf--zweitrangig:hover { color: var(--sbu-text-akzent); background: var(--sbu-flaeche); filter: none; }

/* Schilder */
.stehle-bewegt .sbu-schilder { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.stehle-bewegt .sbu-schild { display: inline-block; margin: 0; padding: .2em .9em; border-radius: 999px; background: var(--sbu-flaeche); color: var(--sbu-text-akzent); font-size: .85em; font-weight: 700; line-height: 1.5; }
.stehle-bewegt .sbu-schild--phase { background: var(--sbu-akzent); color: #fff; }
.stehle-bewegt .sbu-geprueft { color: var(--sbu-text-akzent); font-weight: 700; margin: 0 0 1rem; }

/* Filter */
.stehle-bewegt .sbu-filter { border: 1px solid var(--sbu-rahmen); border-radius: var(--sbu-rund); padding: 1.25rem; margin: 0 0 var(--sbu-abstand); }
.stehle-bewegt .sbu-filter label { display: block; font-weight: 700; margin-bottom: .3em; }
.stehle-bewegt .sbu-filter input[type="search"],
.stehle-bewegt .sbu-filter select { width: 100%; box-sizing: border-box; min-height: 44px; }
.stehle-bewegt .sbu-filter p { margin: 0; }
.stehle-bewegt .sbu-filter-suche { margin-bottom: 1rem !important; }
.stehle-bewegt .sbu-filter-felder { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; }
.stehle-bewegt .sbu-filter-knoepfe { margin-top: 1rem !important; display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.stehle-bewegt .sbu-anzahl { font-weight: 700; margin: 0 0 1rem; }
.stehle-bewegt .sbu-leer { padding: 1.5rem; border-radius: var(--sbu-rund); background: var(--sbu-flaeche); }

/* Karten */
.stehle-bewegt .sbu-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.4rem; margin: 0 0 var(--sbu-abstand); }
.stehle-bewegt .sbu-karte { position: relative; display: flex; flex-direction: column; border: 1px solid var(--sbu-rahmen); border-radius: var(--sbu-rund); overflow: hidden; background: #fff; transition: box-shadow .15s, transform .15s; }
.stehle-bewegt .sbu-karte:hover { box-shadow: 0 6px 20px rgba(0, 0, 0, .12); transform: translateY(-2px); }
.stehle-bewegt .sbu-karte-link { display: block; text-decoration: none; color: inherit; }
.stehle-bewegt .sbu-karte-link::after { content: ""; position: absolute; inset: 0; } /* ganze Karte klickbar */
.stehle-bewegt .sbu-karte-link:focus-visible { outline: none; }
.stehle-bewegt .sbu-karte:focus-within { outline: 3px solid var(--sbu-akzent); outline-offset: 2px; }
.stehle-bewegt .sbu-karte-bild { position: relative; display: block; aspect-ratio: 3 / 2; background: var(--sbu-flaeche); }
.stehle-bewegt .sbu-karte-bild img { width: 100%; height: 100%; object-fit: contain; display: block; }
.stehle-bewegt .sbu-karte-bild .sbu-schild { position: absolute; top: .75rem; left: .75rem; }
.stehle-bewegt .sbu-karte-geprueft { position: absolute; top: .65rem; right: .65rem; width: 1.8em; height: 1.8em; border-radius: 50%; background: #fff; color: var(--sbu-text-akzent); display: flex; align-items: center; justify-content: center; font-weight: 700; box-shadow: 0 1px 4px rgba(0, 0, 0, .2); }
.stehle-bewegt .sbu-karte-ohne-bild { display: block; width: 100%; height: 100%; min-height: 120px; }
.stehle-bewegt .sbu-karte-titel { margin: 1rem 1.1rem .3rem !important; font-size: 1.25em; line-height: 1.2; color: var(--sbu-text-akzent); }
.stehle-bewegt .sbu-karte-meta, .stehle-bewegt .sbu-karte-muskel { margin: 0 1.1rem .3rem !important; font-size: .92em; }
.stehle-bewegt .sbu-karte-muskel { color: var(--sbu-warnung); font-weight: 700; }
.stehle-bewegt .sbu-karte > p:last-child { margin-bottom: 1.1rem !important; }

/* Seitenzahlen */
.stehle-bewegt .sbu-seiten ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.stehle-bewegt .sbu-seiten a, .stehle-bewegt .sbu-seiten span { display: inline-flex; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid var(--sbu-rahmen); text-decoration: none; }
.stehle-bewegt .sbu-seiten span[aria-current] { background: var(--sbu-akzent); color: #fff; border-color: var(--sbu-akzent); font-weight: 700; }

/* Übungsseite: links Bild und Varianten, rechts Text */
.stehle-bewegt.sb-sb-uebung { container-type: inline-size; }
.stehle-bewegt .sb-uebung-ansicht { display: flex; flex-direction: column; gap: 1.25rem; }
.stehle-bewegt .sb-uebung-ansicht p, .stehle-bewegt .sb-uebung-ansicht h2, .stehle-bewegt .sb-uebung-ansicht h3, .stehle-bewegt .sb-uebung-ansicht dl, .stehle-bewegt .sb-uebung-ansicht ul { margin-top: 0; }
.stehle-bewegt .sbu-banner { display: flex; align-items: center; gap: .7rem; margin: 0; padding: .9rem 1.25rem; border: 2px solid #e8b878; border-radius: 14px; background: var(--sbu-warnung-flaeche); color: #4a2c0c; font-weight: 700; }
.stehle-bewegt .sbu-banner-zeichen { flex: none; width: 1.5em; height: 1.5em; border-radius: 50%; background: var(--sbu-warnung); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: .85em; }
.stehle-bewegt .sbu-raster { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@container (min-width: 720px) { .stehle-bewegt .sbu-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.stehle-bewegt .sbu-spalte { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.stehle-bewegt .sbu-spalte > * { margin-bottom: 0 !important; }
.stehle-bewegt .sbu-hauptbild { margin: 0; border: 1px solid var(--sbu-rahmen); border-radius: var(--sbu-rund); overflow: hidden; background: #fff; }
.stehle-bewegt .sbu-hauptbild img { width: 100%; height: auto; display: block; }
.stehle-bewegt .sbu-hauptbild--leer { aspect-ratio: 16 / 10; background: var(--sbu-flaeche); display: flex; align-items: center; justify-content: center; }
.stehle-bewegt .sbu-figur { width: 64px; height: 96px; opacity: .35; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 60' fill='none' stroke='%231f5252' stroke-width='4' stroke-linecap='round'%3E%3Ccircle cx='20' cy='9' r='6'/%3E%3Cpath d='M20 15v22M8 24h24M20 37 10 56M20 37l10 19'/%3E%3C/svg%3E"); }
.stehle-bewegt .sbu-varianten { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .75rem; }
.stehle-bewegt .sbu-variante { border: 1px solid var(--sbu-rahmen); border-radius: 14px; overflow: hidden; background: #fff; }
.stehle-bewegt .sbu-variante h3 { margin: 0; padding: .45rem .9rem; font-size: .95em; text-transform: uppercase; letter-spacing: .04em; }
.stehle-bewegt .sbu-variante--leichter h3 { background: #e3eef9; color: #1d4a72; }
.stehle-bewegt .sbu-variante--schwerer h3 { background: var(--sbu-warnung-flaeche); color: #7a4210; }
.stehle-bewegt .sbu-variante-text { padding: .75rem .9rem; }
.stehle-bewegt .sbu-variante-text p { margin: 0; }
.stehle-bewegt .sbu-variante-bild { display: block; width: 100%; height: auto; border-radius: 10px; margin-bottom: .6rem; }
.stehle-bewegt .sbu-merkmale { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; }
.stehle-bewegt .sbu-merkmale li { margin: 0; padding: .2em .8em; border: 1px solid #e8b878; border-radius: 999px; background: var(--sbu-warnung-flaeche); color: #7a4210; font-size: .88em; font-weight: 700; }
.stehle-bewegt .sbu-kopfzeile { display: flex; flex-wrap: wrap; gap: .3rem .9rem; align-items: center; font-size: .92em; }
.stehle-bewegt .sbu-kopfzeile strong { color: var(--sbu-warnung); }
.stehle-bewegt .sbu-geprueft { padding: .1em .7em; border-radius: 999px; background: var(--sbu-flaeche); color: var(--sbu-text-akzent); font-weight: 700; }
.stehle-bewegt .sbu-kasten { border: 1px solid var(--sbu-rahmen); border-radius: 16px; padding: 1rem 1.25rem; background: #fff; }
.stehle-bewegt .sbu-kasten h2 { font-size: 1.25em; margin: 0 0 .4rem; }
.stehle-bewegt .sbu-kasten p:last-child { margin-bottom: 0; }
.stehle-bewegt .sbu-warnung { border: 2px solid #e8b878; background: var(--sbu-warnung-flaeche); color: #4a2c0c; }
.stehle-bewegt .sbu-warnung h2 { color: var(--sbu-warnung); }
.stehle-bewegt .sbu-fakten { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .5rem; }
.stehle-bewegt .sbu-fakten > div { border-radius: 12px; padding: .7rem .9rem; background: var(--sbu-flaeche); }
.stehle-bewegt .sbu-fakten dt { font-size: .75em; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; opacity: .8; }
.stehle-bewegt .sbu-fakten dd { margin: .2rem 0 0; }
.stehle-bewegt .sbu-zeilen > div { display: grid; grid-template-columns: 9.5rem 1fr; gap: .5rem; padding: .7rem 0; border-top: 1px solid var(--sbu-rahmen); }
.stehle-bewegt .sbu-zeilen > div:last-child { border-bottom: 1px solid var(--sbu-rahmen); }
.stehle-bewegt .sbu-zeilen dt { font-weight: 700; }
.stehle-bewegt .sbu-zeilen dd { margin: 0; }
.stehle-bewegt .sbu-geeignet summary { cursor: pointer; color: var(--sbu-text-akzent); min-height: 28px; }
.stehle-bewegt .sbu-geeignet .sbu-merkmale { margin-top: .5rem; }
.stehle-bewegt .sbu-geeignet .sbu-merkmale li { border-color: var(--sbu-rahmen); background: #fff; color: inherit; font-weight: 400; }
.stehle-bewegt .sbu-punkte { letter-spacing: 2px; }
.stehle-bewegt .sbu-video iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; }
.stehle-bewegt .sbu-aktionen { display: flex; flex-wrap: wrap; gap: .75rem; }
@media (max-width: 520px) { .stehle-bewegt .sbu-zeilen > div { grid-template-columns: 1fr; gap: .15rem; } }

/* Übung der Woche */
.stehle-bewegt .sbu-woche { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; align-items: center; border: 1px solid var(--sbu-rahmen); border-radius: var(--sbu-rund); overflow: hidden; }
.stehle-bewegt .sbu-woche-bild { display: block; aspect-ratio: 3 / 2; background: var(--sbu-flaeche); }
.stehle-bewegt .sbu-woche-bild img { width: 100%; height: 100%; object-fit: contain; display: block; }
.stehle-bewegt .sbu-woche-text { padding: 1.25rem 1.5rem; }
.stehle-bewegt .sbu-woche-label { text-transform: uppercase; letter-spacing: .06em; font-size: .8em; font-weight: 700; color: var(--sbu-warnung); margin: 0 0 .3rem; }
.stehle-bewegt .sbu-woche-titel { margin: 0 0 .5rem; }

/* Avada: Autor und Datum über der Übung ausblenden (gehören zu Blogbeiträgen) */
.single-sb_uebung .fusion-meta-info,
.single-sb_uebung .fusion-post-title-meta-wrap .fusion-meta-info { display: none; }
.stehle-bewegt .sbu-karte-ohne-bild { background: no-repeat center / 44px 66px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 60' fill='none' stroke='%231f5252' stroke-opacity='.35' stroke-width='4' stroke-linecap='round'%3E%3Ccircle cx='20' cy='9' r='6'/%3E%3Cpath d='M20 15v22M8 24h24M20 37 10 56M20 37l10 19'/%3E%3C/svg%3E"); }
