/*
 * SUBWAY „GEFÄLLT MIR AUCH!“ – drei Designstudien (Stefan 14.10.2026), nur bestehende Tokens und Schriften.
 * Steht als Kind von .a2-text in der Lesespalte (Spalten 3–10, max. 700 px). Zahl/Zustand laden nach – feste Mindestbreiten
 * verhindern Layoutsprünge. Aktiv/inaktiv nie nur über Farbe: Beschriftung („Gefällt dir auch!“) und gefüllter Daumen wechseln.
 */
.sw-gma { --gma-gelb: #F5C83C; margin-top: var(--sw-s-xl); font-family: var(--sw-font-ui); color: var(--sw-ink); }
.a2-text > .sw-gma { grid-column: 3 / 11; max-width: var(--lese, 700px); }
.sw-gma__frage { margin: 0; }
.sw-gma__aktion { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sw-s-s); }
.sw-gma button.sw-gma__knopf { margin: 0; flex-direction: row; white-space: nowrap; line-height: 1; display: inline-flex; align-items: center; gap: 10px; min-height: var(--sw-touch); padding: 0 18px; border: 0; border-radius: 0; text-decoration: none; cursor: pointer; font-family: var(--sw-font-ui); font-stretch: 75%; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; transition: background-color var(--sw-t-fast) var(--sw-ease), color var(--sw-t-fast) var(--sw-ease); }
button.sw-gma__knopf:disabled { cursor: progress; opacity: .6; }
button.sw-gma__knopf[aria-busy="true"] { cursor: progress; }
.sw-gma__daumen { display: block; width: 22px; height: 22px; fill: currentColor; }
.sw-gma__icon { display: inline-flex; }
.sw-gma__icon--an { display: none; }
.sw-gma.ist-an .sw-gma__icon--an { display: inline-flex; }
.sw-gma.ist-an .sw-gma__icon--aus { display: none; }
.sw-gma__zahl { display: inline-flex; align-items: baseline; gap: 6px; min-width: 7.5em; font-family: var(--sw-font-ui); }
.sw-gma__zahl b { font-family: var(--sw-font-display); font-weight: 400; line-height: 1; font-variant-numeric: tabular-nums; }
.sw-gma__zahl-l { font-stretch: 75%; font-weight: 700; font-size: var(--sw-fs-meta); letter-spacing: .1em; text-transform: uppercase; color: var(--sw-text-2); }
.sw-gma__status { margin: 0; min-height: 0; font-size: var(--sw-fs-meta); font-weight: 600; color: var(--sw-text-2); }
.sw-gma__status:not(:empty) { margin-top: var(--sw-s-xs); }
.sw-gma.hat-fehler .sw-gma__status { color: var(--sw-danger); }
.sw-gma__vorschau { display: inline-block; margin: 0 0 var(--sw-s-s); padding: 3px 8px; border: 1px dashed var(--sw-ink); background: color-mix(in srgb, #F5C83C 30%, transparent); font-stretch: 75%; font-weight: 800; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }

/* ---------- A · Editorial Minimal: feine Linien, Ruhe, Akzentschrift ---------- */
.sw-gma--a { padding: var(--sw-s-m) 0; border-top: var(--sw-line-content); border-bottom: var(--sw-line-micro); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--sw-s-s) var(--sw-s-l); }
.sw-gma--a .sw-gma__vorschau, .sw-gma--a .sw-gma__status { grid-column: 1 / -1; justify-self: start; }
.sw-gma--a .sw-gma__frage { font-family: var(--sw-font-accent); font-style: italic; font-weight: 500; font-size: var(--sw-fs-c-m); line-height: 1.25; }
.sw-gma--a button.sw-gma__knopf { background: transparent; color: var(--sw-ink); box-shadow: inset 0 0 0 1.5px var(--sw-ink); font-size: var(--sw-fs-label); }
.sw-gma--a button.sw-gma__knopf:hover { background: color-mix(in srgb, #F5C83C 30%, transparent); }
.sw-gma--a.ist-an button.sw-gma__knopf { background: var(--sw-ink); color: var(--sw-paper); }
.sw-gma--a .sw-gma__daumen { width: 18px; height: 18px; }
.sw-gma--a .sw-gma__zahl b { font-size: var(--sw-fs-c-m); }
.sw-gma--a .sw-gma__zahl { min-width: 6.5em; }

/* ---------- B · SUBWAY Statement: Gelb, Anton, markanter Daumen ---------- */
.sw-gma--b { padding: var(--sw-s-l); background: var(--gma-gelb); }
.sw-gma--b .sw-gma__frage { font-family: var(--sw-font-display); font-weight: 400; font-size: var(--sw-fs-c-xl); line-height: 1; text-transform: uppercase; }
.sw-gma--b .sw-gma__aktion { margin-top: var(--sw-s-m); gap: var(--sw-s-m); }
.sw-gma--b button.sw-gma__knopf { min-height: 56px; padding: 0 22px 0 18px; background: var(--sw-ink); color: var(--gma-gelb); font-size: var(--sw-fs-btn); box-shadow: none; }
.sw-gma--b button.sw-gma__knopf:hover { background: var(--sw-ink-3); }
.sw-gma--b.ist-an button.sw-gma__knopf { background: var(--sw-paper); color: var(--sw-ink); box-shadow: 4px 4px 0 var(--sw-ink); }
.sw-gma--b .sw-gma__daumen { width: 30px; height: 30px; }
.sw-gma--b .sw-gma__zahl b { font-size: var(--sw-fs-d-s); }
.sw-gma--b .sw-gma__zahl-l { color: var(--sw-ink); }
.sw-gma--b .sw-gma__status { color: var(--sw-ink); }
.sw-gma--b .sw-gma__vorschau { background: var(--sw-paper); }
.sw-gma--b button.sw-gma__knopf:focus-visible { outline-color: var(--sw-ink); }

/* ---------- C · Reader Verdict: kleiner Dialog SUBWAY ↔ Leserschaft ---------- */
.sw-gma--c { padding: var(--sw-s-l) 0 var(--sw-s-m); border-top: var(--sw-line-content); }
.sw-gma--c .sw-gma__kopf { margin-bottom: var(--sw-s-s); }
.sw-gma--c .sw-gma__kicker { display: inline-block; padding: 4px 8px 3px; background: var(--sw-ink); color: var(--sw-paper); font-stretch: 75%; font-weight: 800; font-size: var(--sw-fs-meta); letter-spacing: .14em; text-transform: uppercase; }
.sw-gma--c .sw-gma__frage { position: relative; display: inline-block; max-width: 30em; padding: var(--sw-s-s) var(--sw-s-m); background: var(--sw-paper-2); font-family: var(--sw-font-accent); font-style: italic; font-weight: 500; font-size: var(--sw-fs-c-l); line-height: 1.2; }
.sw-gma--c .sw-gma__frage::after { content: ""; position: absolute; left: 24px; bottom: -12px; border-width: 12px 14px 0 0; border-style: solid; border-color: var(--sw-paper-2) transparent transparent; }
.sw-gma--c .sw-gma__aktion { justify-content: flex-end; margin-top: var(--sw-s-m); }
.sw-gma--c button.sw-gma__knopf { position: relative; order: 2; background: var(--sw-surface); color: var(--sw-ink); box-shadow: inset 0 0 0 1.5px var(--sw-ink); font-size: var(--sw-fs-label); }
.sw-gma--c:not(.ist-an) button.sw-gma__knopf:hover { /* Hover nur, solange noch nicht abgestimmt (Stefan 14.10.2026) */ background: color-mix(in srgb, #F5C83C 30%, var(--sw-surface)); }
.sw-gma--c.ist-an button.sw-gma__knopf { background: var(--sw-accent); color: var(--sw-on-accent); box-shadow: inset 0 0 0 1.5px var(--sw-accent); } /* aktiv in der Farbwahl-Farbe (Stefan 14.10.2026) */
.sw-gma--c .sw-gma__zahl { order: 1; flex-direction: row; align-items: center; gap: 10px; min-width: 0; padding-right: var(--sw-s-s); border-right: var(--sw-line-micro); }
.sw-gma--c .sw-gma__zahl b { font-size: var(--sw-fs-c-xl); color: var(--sw-ink); background: linear-gradient(transparent 58%, var(--gma-gelb) 58%, var(--gma-gelb) 92%, transparent 92%); padding: 0 2px; }
.sw-gma--c .sw-gma__zahl-l { max-width: 6em; line-height: 1.2; }
.sw-gma--c .sw-gma__status { text-align: right; }

/* ---------- Daumen-Varianten (Studie C, Stefan 14.10.2026) ---------- */
.sw-gma__icon--v { display: inline-flex; }
.sw-gma__daumen--1 { width: 22px; height: 22px; fill: none; }
.sw-gma__daumen--1 .linie { fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.sw-gma__daumen--1 .flaeche { fill: transparent; transition: fill var(--sw-t-fast) var(--sw-ease); }
.sw-gma.ist-an .sw-gma__daumen--1 .flaeche { fill: currentColor; }
.sw-gma__daumen--2 { width: 30px; height: 30px; fill: none; }
.sw-gma__daumen--2 .ring { fill: none; stroke: currentColor; stroke-width: 1.5; }
.sw-gma__daumen--2 .linie { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sw-gma.ist-an .sw-gma__daumen--2 .ring { fill: var(--gma-gelb); stroke: var(--gma-gelb); }
.sw-gma.ist-an .sw-gma__daumen--2 .linie { stroke: var(--sw-ink); }
.sw-gma__daumen--3 { width: 30px; height: 30px; fill: currentColor; overflow: visible; }
.sw-gma__daumen--3 .voll, .sw-gma__daumen--3 .strahlen { display: none; }
.sw-gma__daumen--3 .strahlen path { fill: none; stroke: currentColor; stroke-width: 70; stroke-linecap: square; } /* Strahlen in der Schriftfarbe auf der Akzentfläche */
.sw-gma.ist-an .sw-gma__daumen--3 .voll, .sw-gma.ist-an .sw-gma__daumen--3 .strahlen { display: inline; }
.sw-gma.ist-an .sw-gma__daumen--3 .leer { display: none; }

@media (max-width: 767px) {
	.sw-gma--a { grid-template-columns: 1fr; }
	.sw-gma--b { padding: var(--sw-s-m); }
	.sw-gma--b button.sw-gma__knopf { flex: 1 1 100%; justify-content: center; }
	.sw-gma--c .sw-gma__frage { font-size: var(--sw-fs-c-m); }
	.sw-gma--c .sw-gma__aktion { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) { button.sw-gma__knopf { transition: none; } }