/*
 * EIGENE AUSGABE der Kommentare (B1). Ersetzt die Gestaltung, die bis 0.6.1
 * auf die Bausteine von wpDiscuz gezielt hat (#wpdcom ...) -- gleiche Optik,
 * eigenes, viel kuerzeres Markup.
 *
 * Farben und Masse: docs/design/golfstun-design-fundament.txt; die Variablen
 * --gsb-* setzt golfstunde-page auf .gsb (Werte hier als Rueckfall, damit der
 * Bereich auch ausserhalb des Beitrags stimmt).
 * Zielgruppe 50+: Tippziele mindestens 44 px, Text 18 px. Ohne Skript
 * vollstaendig; kommentare.js (B2) ergaenzt nur.
 */

.gsk{
	--gsk-text:var(--gsb-text,#232323);
	--gsk-grau:var(--gsb-grau,#595959);
	--gsk-linie:var(--gsb-linie,#e2e2e2);
	--gsk-link:var(--gsb-link,#2c7a86);
	--gsk-tint:var(--gsb-tint,#e7f4f6);
	--gsk-dunkel:var(--gsb-dunkel,#1d3a52);
	max-width:var(--gsb-spalte,800px);
	color:var(--gsk-text);
}

/* Ueberschrift und Satz: nur im Forum/Glossar (B5); auf Beitraegen setzt
   golfstunde-page sie selbst (.gsb-fragen__titel -- gleiche Werte). */
.gsk .gsk-titel{
	font-family:Anton,Impact,"Arial Narrow",sans-serif;
	font-weight:400;
	font-size:34px;
	line-height:1.3;
	margin:0 0 8px;
	color:var(--gsk-text);
}
.gsk .gsk-satz{
	margin:0 0 16px;
	font-size:18px;
	line-height:1.55;
	color:var(--gsk-grau);
}

.gsk .gsk-zahl{
	margin:0 0 18px;
	font-size:16px;
	font-weight:600;
	color:var(--gsk-grau);
}

/* ---------------------------------------------------------------- Liste */
.gsk .gsk-liste{
	list-style:none;
	margin:0 0 28px;
	padding:0;
}
.gsk .gsk-zweig{ margin:0 0 20px; }
/* Keine Linie an der Antwortliste: Neben der Coach-Antwort stand sie doppelt
   zur tuerkisen Kante (Projektinhaber 24.09.2026, "die Graue kann weg").
   Die Einrueckung zeigt die Antworten. */
.gsk .gsk-liste--antworten{
	margin:16px 0 0 24px;
	padding:0 0 0 20px;
}
.gsk .gsk-liste--antworten .gsk-zweig:last-child{ margin-bottom:0; }

.gsk .gsk-e{ padding:0; }
.gsk .gsk-e__kopf{
	display:flex;
	align-items:center;
	gap:12px;
	margin:0 0 8px;
}
.gsk .gsk-e__bild img,
.gsk .gsk-e__bild .gs-initialen{
	display:block;
	width:48px;
	height:48px;
	border-radius:50%;
}
/* Initialen-Kreis (Fundament 3.5). Stand bisher nur in beitrag.css unter
   .gsb -- im Forum und Glossar (B5) gibt es kein .gsb, der Kreis waere dort
   farblos geblieben. */
.gsk .gs-initialen{
	background:#58b7c4;
	color:#1d3a52;
	font-family:"Open Sans",Roboto,Arial,sans-serif;
	font-weight:700;
	text-align:center;
	letter-spacing:.02em;
	user-select:none;
}
.gsk .gsk-e__wer{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:6px 10px;
	min-width:0;
}
.gsk .gsk-e__name{
	font-size:18px;
	font-weight:700;
	color:var(--gsk-dunkel);
}
.gsk .gsk-e__marke{
	display:inline-block;
	padding:2px 8px;
	border-radius:4px;
	background:var(--gsk-link);
	color:#fff;
	font-size:13px;
	font-weight:600;
	letter-spacing:.02em;
}
.gsk .gsk-e__datum{
	font-size:15px;
	color:var(--gsk-grau);
}
.gsk .gsk-e__text{
	font-size:18px;
	line-height:1.6;
}
.gsk .gsk-e__text p{ margin:0 0 12px; }
.gsk .gsk-e__text p:last-child{ margin:0; }
.gsk .gsk-e__fuss{ margin:8px 0 0; }

/* Bilder, die ueber wpDiscuz angehaengt wurden (Q-K4): im Kommentar, nicht
   hoeher als 360 px; Antippen oeffnet das Bild gross. */
.gsk .gsk-e__anhaenge{
	display:flex;
	flex-wrap:wrap;
	gap:10px;
	margin:12px 0 0;
}
.gsk a.gsk-e__anhang{ display:block; line-height:0; }
.gsk .gsk-e__anhang-bild{
	display:block;
	width:auto;
	max-width:100%;
	height:auto;
	max-height:360px;
	border-radius:6px;
	border:1px solid var(--gsk-linie);
}
.gsk a.gsk-antworten{
	display:inline-flex;
	align-items:center;
	min-height:44px;
	padding:0 2px;
	color:var(--gsk-link);
	font-size:16px;
	font-weight:600;
	text-decoration:underline;
}

/* Antwort aus dem Team: Flaeche und Kante wie bisher bei wpDiscuz
   (gsk-kennzeichen 0.4.0), damit die Antwort des Coaches sofort auffaellt. */
.gsk .gsk-e.gs-antwort-coach,
.gsk .gsk-e.gs-antwort-team{
	background:#eef5f6;
	border-left:3px solid var(--gsk-link);
	border-radius:0 8px 8px 0;
	padding:14px 16px;
}

/* -------------------------------------------------------------- Formular */
.gsk .gsk-form-huelle{
	padding:20px;
	border:1px solid var(--gsk-linie);
	border-radius:8px;
	background:#fff;
}
.gsk .gsk-form__an{
	margin:0 0 14px;
	font-size:17px;
}
.gsk a.gsk-form__weg{
	margin-left:8px;
	font-size:16px;
	color:var(--gsk-link);
	text-decoration:underline;
}
.gsk .gsb-formhinweis{
	margin:0 0 14px;
	font-size:16px;
	line-height:1.55;
	color:var(--gsk-grau);
}
.gsk .gsk-form__zeile{
	display:block;
	margin:0 0 16px;
}
.gsk .gsk-form__paar{
	display:flex;
	flex-wrap:wrap;
	gap:0 20px;
}
.gsk .gsk-form__paar .gsk-form__zeile{ flex:1 1 240px; }
.gsk .gsk-form__marke{
	display:block;
	margin:0 0 6px;
	font-size:16px;
	font-weight:600;
	color:var(--gsk-text);
}
.gsk .gsk-form__feld{
	display:block;
	width:100%;
	min-height:48px;
	padding:12px 14px;
	border:1px solid #bdbdbd;
	border-radius:6px;
	background:#fff;
	color:var(--gsk-text);
	font-family:inherit;
	font-size:18px;
	line-height:1.5;
}
.gsk textarea.gsk-form__feld{ min-height:132px; resize:vertical; }
.gsk .gsk-form__feld:focus-visible{
	outline:2px solid var(--gsk-link);
	outline-offset:1px;
	border-color:var(--gsk-link);
}
.gsk .gsk-form__notiz{
	display:block;
	margin:6px 0 0;
	font-size:15px;
	color:var(--gsk-grau);
}
.gsk .gsk-form__wer{
	margin:0 0 16px;
	font-size:16px;
	color:var(--gsk-grau);
}
.gsk .gsk-form__fuss{ margin:18px 0 0; }
.gsk .gsk-form__fuss .gsm-btn{ min-width:200px; }

/* Abo-Haken und Anmeldegrund. Standen nur in beitrag.css unter .gsb -- im
   Forum/Glossar (B5) war der Haken dadurch zu gross und ungestaltet. */
.gsk .gsk-abo{ margin:12px 0 0; }
.gsk .gsk-abo label{
	display:inline-flex;
	align-items:center;
	gap:10px;
	min-height:44px;
	font-size:16px;
	color:var(--gsk-text);
	cursor:pointer;
}
.gsk .gsk-abo input{ width:20px; height:20px; margin:0; accent-color:var(--gsk-link); }
.gsk .gsk-anmelden{
	margin:16px 0 0;
	padding:14px 16px;
	background:var(--gsk-tint);
	border:1px solid #cfe6ea;
	border-radius:10px;
}
.gsk .gsk-anmelden__satz{ margin:0 0 10px; font-size:16px; line-height:1.55; color:var(--gsk-text); }
.gsk .gsk-anmelden__knopf{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-height:44px;
	padding:0 18px;
	border:1.5px solid var(--gsb-cta,#bb274b);
	border-radius:10px;
	background:#fff;
	color:var(--gsb-cta,#bb274b);
	font-weight:700;
	text-decoration:none;
}
.gsk .gsk-anmelden__knopf:hover,
.gsk .gsk-anmelden__knopf:focus-visible{ background:var(--gsb-cta,#bb274b); color:#fff; }

/* Honigtopf: fuer Menschen weg, fuer Maschinen im Markup. Nicht display:none
   -- manche Ausfueller ignorieren genau das. */
.gsk .gsk-honig{
	position:absolute;
	left:-9999px;
	width:1px;
	height:1px;
	overflow:hidden;
}

.gsk .gsk-zu{
	margin:0;
	padding:14px 16px;
	background:var(--gsk-tint);
	border-radius:8px;
	font-size:17px;
}

/* ------------------------------------------ B2: Absenden ohne Neuladen */
/* Formular unter einem Strang ("Antworten" mit Skript): so weit eingerueckt
   wie die Antworten, damit klar ist, wohin der Text gehoert. */
.gsk .gsk-form-huelle--antwort{ margin:16px 0 0 44px; }

.gsk .gsk-form__fuss .gsm-btn:disabled{ opacity:.7; cursor:progress; }

/* Rueckmeldungen: Banner-Varianten aus dem Fundament (Teal / Fehler). */
.gsk .gsk-meldung[hidden]{ display:none; }
.gsk .gsk-meldung{
	margin:16px 0 0;
	padding:12px 16px;
	border-radius:8px;
	font-size:17px;
	line-height:1.5;
}
.gsk .gsk-meldung p{ margin:0; }
.gsk .gsk-meldung p + p{ margin-top:8px; }
.gsk .gsk-meldung--fehler{
	background:#fdecec;
	border:1px solid #f5c7c7;
	color:#a23232;
}
.gsk .gsk-meldung--danke{
	background:var(--gsk-tint);
	border:1px solid #cfe6ea;
	color:var(--gsk-dunkel);
}
.gsk .gsk-meldung--danke:focus{ outline:none; }
.gsk .gsk-meldung--danke:focus-visible{ outline:2px solid var(--gsk-link); outline-offset:2px; }
/* Mitglied mit anderer Adresse (12.7): gleiches Banner, der Satz faellt auf. */
.gsk .gsk-meldung__abo--nein{ font-weight:600; }

/* Die eigene, gerade geschickte Karte bleibt markiert, bis neu geladen
   wird -- ohne Animation, die man abwarten muesste. */
.gsk .gsk-e--neu:not(.gs-antwort-coach):not(.gs-antwort-team){
	background:#f6fbfc;
	border-radius:8px;
	padding:12px 14px;
}

/* ------------------------------------------------------------- Handy */
@media (max-width:600px){
	.gsk .gsk-liste--antworten{ margin-left:8px; padding-left:14px; }
	.gsk .gsk-titel{ font-size:26px; }
	.gsk .gsk-e__name{ font-size:17px; }
	.gsk .gsk-e__text{ font-size:17px; }
	.gsk .gsk-form-huelle{ padding:16px; }
	.gsk .gsk-e.gs-antwort-coach,
	.gsk .gsk-e.gs-antwort-team{ padding:12px 14px; }
	.gsk .gsk-form__fuss .gsm-btn{ width:100%; }
	.gsk .gsk-form-huelle--antwort{ margin-left:22px; }
}