/*
 * TCGW Gruppen – Darstellung nach mockup/index.html (Runde 2) und STYLEGUIDE.md.
 * Regeln: alle Klassen mit Präfix „tcgw-“, alle Werte als Variablen an einer Stelle, kein !important.
 * Schriften werden NICHT geladen – sie kommen vom Theme/Elementor (lokal). Fehlen sie, greift die Systemschrift.
 *
 * Farben (ab 1.0.1): eigene Namen „--tcgw-g-…“ mit festen Werten aus dem Styleguide, gesetzt direkt auf den Plugin-Bausteinen (.tcgw).
 * Dadurch färben weder die Elementor-Vorlage noch die Globalen Farben von Elementor die Gruppenkarten um.
 * Kein Pink im Plugin – der grüne Button ist der „Sekundär“-Button aus dem Styleguide.
 * Bewusst ändern (selten nötig): Customizer → Zusätzliches CSS, z. B.  .tcgw{--tcgw-g-gruen:#008037}
 */
.tcgw {
	--tcgw-g-gruen: #008037;
	--tcgw-g-logo: #94C11F;
	--tcgw-g-text: #000000;
	--tcgw-g-grund: #FFFFFF;
	--tcgw-g-flaeche: #EBF5EF;
	--tcgw-g-linie: #CCE6D7;
	--tcgw-g-schatten: 0 8px 24px rgba(0, 64, 28, .10);
	--tcgw-g-radius: 16px;
	--tcgw-g-luecke: 24px;
	--tcgw-g-schrift-titel: Raleway, system-ui, -apple-system, "Segoe UI", sans-serif;
	--tcgw-g-schrift-text: Poppins, system-ui, -apple-system, "Segoe UI", sans-serif;
	--tcgw-g-schrift-klein: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---------- Grundlagen (nur innerhalb der Plugin-Bausteine) ---------- */
.tcgw,
.tcgw *,
.tcgw *::before,
.tcgw *::after { box-sizing: border-box; }
.tcgw { color: var(--tcgw-g-text); font-family: var(--tcgw-g-schrift-text); font-size: 17px; line-height: 1.65; }
.tcgw .tcgw-ico { width: 20px; height: 20px; flex: none; fill: currentColor; display: inline-block; vertical-align: middle; }
.tcgw .tcgw-nur-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.tcgw a:focus-visible,
.tcgw button:focus-visible,
.tcgw summary:focus-visible { outline: 3px solid #000; outline-offset: 2px; }
.tcgw.tcgw-redaktion { font: 400 14px/1.5 var(--tcgw-g-schrift-klein); background: #fff8d6; border: 1px dashed #000; border-radius: 8px; padding: 8px 12px; }

/* ---------- Button (News „Alle News ansehen“) ---------- */
.tcgw .tcgw-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 28px; border-radius: 999px; border: 2px solid transparent; background: var(--tcgw-g-gruen); color: #fff; font: 700 19px/1 var(--tcgw-g-schrift-text); text-decoration: none; cursor: pointer; transition: transform .15s, box-shadow .15s; }
.tcgw .tcgw-btn:hover,
.tcgw .tcgw-btn:focus-visible { color: #fff; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, .18); }

/* ---------- Wegweiser ---------- */
.tcgw .tcgw-wege { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--tcgw-g-luecke); margin: 0; }
.tcgw .tcgw-weg { display: flex; flex-direction: column; gap: 8px; padding: 24px; border: 1px solid var(--tcgw-g-linie); border-radius: var(--tcgw-g-radius); background: #fff; box-shadow: var(--tcgw-g-schatten); color: #000; text-decoration: none; text-align: left; transition: transform .15s, background .15s; }
.tcgw .tcgw-weg:hover,
.tcgw .tcgw-weg:focus-visible { transform: translateY(-4px); background: var(--tcgw-g-flaeche); color: #000; text-decoration: none; }
.tcgw .tcgw-weg__sym { width: 48px; height: 48px; border-radius: 50%; background: var(--tcgw-g-logo); display: grid; place-items: center; margin-bottom: 4px; }
.tcgw .tcgw-weg__sym .tcgw-ico { width: 24px; height: 24px; fill: #000; }
.tcgw .tcgw-weg__alter { font: 800 28px/1.1 var(--tcgw-g-schrift-titel); color: var(--tcgw-g-gruen); }
.tcgw .tcgw-weg__gruppen { font-size: 16px; line-height: 1.5; }
.tcgw .tcgw-weg__los { margin-top: auto; font-weight: 600; color: var(--tcgw-g-gruen); }

/* ---------- Angebot & Zeiten: Reiter ---------- */
.tcgw .tcgw-reiter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }
.tcgw .tcgw-reiter__btn { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; margin: 0; padding: 0 20px; border: 2px solid var(--tcgw-g-gruen); border-radius: 999px; background: #fff; color: var(--tcgw-g-gruen); font: 600 17px/1 var(--tcgw-g-schrift-text); letter-spacing: 0; text-transform: none; text-decoration: none; box-shadow: none; cursor: pointer; }
.tcgw .tcgw-reiter__btn:hover,
.tcgw .tcgw-reiter__btn:focus { background: var(--tcgw-g-flaeche); color: var(--tcgw-g-gruen); border-color: var(--tcgw-g-gruen); }
.tcgw .tcgw-reiter__btn[aria-selected="true"],
.tcgw .tcgw-reiter__btn[aria-selected="true"]:hover,
.tcgw .tcgw-reiter__btn[aria-selected="true"]:focus { background: var(--tcgw-g-gruen); color: #fff; }
.tcgw .tcgw-reiter__btn .tcgw-ico { width: 18px; height: 18px; }
.tcgw .tcgw-tafel[hidden] { display: none; }
.tcgw .tcgw-tafel__intro { max-width: 720px; margin: 0 0 24px; }
.tcgw .tcgw-tafel__intro p { margin: 0 0 8px; }

/* ---------- Gruppenkarten ---------- */
.tcgw .tcgw-karten { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--tcgw-g-luecke); align-items: start; }
.tcgw .tcgw-karte { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 24px; background: #fff; border: 1px solid var(--tcgw-g-linie); border-radius: var(--tcgw-g-radius); box-shadow: var(--tcgw-g-schatten); }
.tcgw .tcgw-karte__titel { margin: 0; padding: 0; font: 700 22px/1.25 var(--tcgw-g-schrift-titel); color: var(--tcgw-g-gruen); text-transform: none; letter-spacing: 0; }
.tcgw .tcgw-karte__zusatz { margin: 0; font-size: 16px; line-height: 1.5; }
.tcgw .tcgw-schilder { display: flex; flex-wrap: wrap; gap: 6px; }
.tcgw .tcgw-schild { background: var(--tcgw-g-logo); color: #000; font: 600 14px/1 var(--tcgw-g-schrift-klein); border-radius: 999px; padding: 7px 12px; }
.tcgw .tcgw-zeiten { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.tcgw .tcgw-zeiten li { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 0; font: 600 18px/1.4 var(--tcgw-g-schrift-text); list-style: none; }
.tcgw .tcgw-zeiten li::before { content: none; }
.tcgw .tcgw-zeiten .tcgw-ico { color: var(--tcgw-g-gruen); margin-top: 3px; }
.tcgw .tcgw-zeiten__ort { display: block; font: 400 15px/1.4 var(--tcgw-g-schrift-klein); }
.tcgw .tcgw-zeiten li.tcgw-zeiten__ruht { font-weight: 500; }
.tcgw .tcgw-liga { display: flex; gap: 10px; align-items: flex-start; margin: 0; font: 400 15px/1.5 var(--tcgw-g-schrift-klein); }
.tcgw .tcgw-liga .tcgw-ico { color: var(--tcgw-g-gruen); margin-top: 2px; }
.tcgw .tcgw-liga__link,
.tcgw .tcgw-verband__link { color: var(--tcgw-g-gruen); font-weight: 600; text-decoration: none; }
.tcgw .tcgw-liga__link:hover,
.tcgw .tcgw-liga__link:focus-visible,
.tcgw .tcgw-verband__link:hover,
.tcgw .tcgw-verband__link:focus-visible { color: var(--tcgw-g-gruen); text-decoration: underline; }
.tcgw.tcgw-verband { margin: 0; }
.tcgw .tcgw-liga__link { white-space: nowrap; }
.tcgw .tcgw-verband__link { display: inline-flex; align-items: center; min-height: 48px; }
.tcgw .tcgw-trainer { display: flex; gap: 10px; align-items: flex-start; font: 400 15px/1.5 var(--tcgw-g-schrift-klein); }
.tcgw .tcgw-trainer .tcgw-ico { color: var(--tcgw-g-gruen); margin-top: 2px; }
.tcgw .tcgw-strich { height: 0; border: 0; border-top: 3px dashed var(--tcgw-g-gruen); background: none; margin: 6px 0 0; opacity: .9; }
.tcgw .tcgw-mehr { margin: 0; padding: 0; border: 0; }
.tcgw .tcgw-mehr summary { list-style: none; cursor: pointer; font-weight: 600; color: var(--tcgw-g-gruen); min-height: 48px; display: flex; align-items: center; gap: 6px; padding: 0; margin: 0; background: none; border: 0; }
.tcgw .tcgw-mehr summary::-webkit-details-marker { display: none; }
.tcgw .tcgw-mehr summary::marker { content: ""; }
.tcgw .tcgw-mehr summary::after { content: "›"; display: inline-block; transition: transform .2s; font-size: 22px; line-height: 1; }
.tcgw .tcgw-mehr[open] summary::after { transform: rotate(90deg); }
.tcgw .tcgw-mehr__text p { margin: 0 0 8px; font-size: 16px; }

/* ---------- News-Karten ---------- */
.tcgw .tcgw-news__raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--tcgw-g-luecke); }
.tcgw .tcgw-news__karte { position: relative; display: flex; flex-direction: column; margin: 0; background: #fff; border: 1px solid var(--tcgw-g-linie); border-radius: var(--tcgw-g-radius); box-shadow: var(--tcgw-g-schatten); overflow: hidden; transition: transform .15s; }
.tcgw .tcgw-news__karte:hover,
.tcgw .tcgw-news__karte:focus-within { transform: translateY(-4px); }
.tcgw .tcgw-news__bild { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: var(--tcgw-g-flaeche); }
.tcgw .tcgw-news__bild .tcgw-news__img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; margin: 0; border-radius: 0; transition: transform .3s; }
.tcgw .tcgw-news__karte:hover .tcgw-news__img { transform: scale(1.03); }
.tcgw .tcgw-news__platzhalter { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(135deg, var(--tcgw-g-gruen) 0%, var(--tcgw-g-logo) 100%); }
.tcgw .tcgw-news__platzhalter .tcgw-ico { width: 56px; height: 56px; fill: #fff; opacity: .45; }
.tcgw .tcgw-news__datum { position: absolute; left: 16px; bottom: 16px; z-index: 3; background: var(--tcgw-g-logo); color: #000; font: 600 14px/1 var(--tcgw-g-schrift-klein); padding: 8px 12px; border-radius: 999px; }
.tcgw .tcgw-news__inhalt { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 20px 24px 16px; }
.tcgw .tcgw-news__titel { margin: 0; padding: 0; font: 700 22px/1.25 var(--tcgw-g-schrift-titel); color: var(--tcgw-g-gruen); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tcgw .tcgw-news__titel a { color: inherit; text-decoration: none; }
.tcgw .tcgw-news__titel a:hover { color: inherit; text-decoration: underline; }
.tcgw .tcgw-news__titel a::after { content: ""; position: absolute; inset: 0; z-index: 4; }
.tcgw .tcgw-news__anriss { margin: 0; font-size: 16px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tcgw .tcgw-news__weiter { margin-top: auto; min-height: 40px; display: flex; align-items: center; font-weight: 600; color: var(--tcgw-g-gruen); }
.tcgw .tcgw-news__fuss { margin-top: 40px; display: flex; justify-content: center; }

/* ---------- Trainingsorte ---------- */
.tcgw .tcgw-orte__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 24px; }
.tcgw .tcgw-orte__liste li { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 0; font-size: 16px; list-style: none; }
.tcgw .tcgw-orte__liste li::before { content: none; }
.tcgw .tcgw-orte__liste .tcgw-ico { color: var(--tcgw-g-gruen); margin-top: 4px; }

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
	.tcgw .tcgw-wege,
	.tcgw .tcgw-karten,
	.tcgw .tcgw-news__raster { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Handy ---------- */
@media (max-width: 767px) {
	.tcgw { font-size: 16px; }
	.tcgw .tcgw-wege,
	.tcgw .tcgw-karten,
	.tcgw .tcgw-news__raster,
	.tcgw .tcgw-orte__liste { grid-template-columns: 1fr; gap: 16px; }
	.tcgw .tcgw-reiter { display: grid; grid-template-columns: 1fr 1fr; }
	.tcgw .tcgw-reiter__btn { justify-content: center; padding: 0 10px; font-size: 16px; }
	.tcgw .tcgw-reiter__btn:last-child:nth-child(odd) { grid-column: 1 / 3; }
	.tcgw .tcgw-karte__titel,
	.tcgw .tcgw-news__titel { font-size: 20px; }
	.tcgw .tcgw-zeiten li { font-size: 17px; }
	.tcgw .tcgw-trainer { font-size: 14px; }
	.tcgw .tcgw-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.tcgw .tcgw-weg,
	.tcgw .tcgw-btn,
	.tcgw .tcgw-news__karte,
	.tcgw .tcgw-news__img,
	.tcgw .tcgw-mehr summary::after { transition: none; }
}
/* Button auf einer Gruppenkarte (z. B. Online-Anmeldung), ab 1.1.0 */
.tcgw .tcgw-karte__aktion { margin: 16px 0 0; }
.tcgw .tcgw-btn--karte { min-height: 44px; padding: 0 22px; font-size: 16px; }