/**
 * alumni.css – Ergaenzungen fuer page-alumni.php
 *
 * Baut auf assets/startseite.css auf (wird davor geladen, liefert alle
 * Design-Tokens und Komponenten wie .btn, .live-card, .feature-card,
 * .cta-band, .faq-item). Hier nur, was die Alumni-Seite zusaetzlich braucht.
 *
 * Wegweiser-Ton des Bereichs "Alumni" = Ocker (uebersetzt das Gelb des Flyers).
 * Ocker #8a6a2e: 5,0:1 gegen Weiss, 4,6:1 gegen --bg -> texttauglich.
 */

.thr-alumni {
	--area: var(--accent-ochre);
	--ochre-100: #f4ecdb;   /* helle Flaechen-Tinte, nur Hintergrund */
	--ochre-ring: #d2ad5c;  /* dekorativer Ring (Flyer-Zitat), nie Text */
}

.thr-alumni .eyebrow { --dot: var(--area); }

/* ---------- Hero ---------- */
.thr-alumni .alumni-hero { padding: 48px 0 30px; }
.thr-alumni .alumni-title { font-size: clamp(2.1rem, 4.2vw, 3.4rem); line-height: 1.06; margin-bottom: .35em; }
.thr-alumni .alumni-title .soft { display: block; color: var(--green-700); }
.thr-alumni .alumni-hero .lede { font-size: 1.1rem; color: var(--ink-soft); max-width: 52ch; margin-bottom: 1.5em; }

.thr-alumni .alumni-photo { position: relative; padding: 0 0 40px 40px; }
.thr-alumni .alumni-photo-img {
	width: 100%; height: auto; aspect-ratio: 5 / 3; object-fit: cover;
	border-radius: var(--radius-l); box-shadow: var(--shadow);
}
.thr-alumni .date-badge {
	position: absolute; left: 0; bottom: 0; width: 180px; height: 180px; border-radius: 50%;
	background: var(--brand-green); color: var(--green-950); border: 10px solid var(--ochre-ring);
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	text-align: center; box-shadow: var(--shadow); line-height: 1.1; padding: 8px;
}
.thr-alumni .date-badge span { display: block; }
.thr-alumni .date-badge .k { font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.thr-alumni .date-badge .d { font-weight: 700; font-size: 2.8rem; line-height: 1; margin: 4px 0 2px; }
.thr-alumni .date-badge .m { font-weight: 700; font-size: 1rem; }
.thr-alumni .date-badge .e { font-size: .72rem; font-weight: 700; margin-top: 6px; }

/* ---------- Termin + Countdown ---------- */
.thr-alumni .alumni-event { padding-top: 20px; }
.thr-alumni .event-band { display: grid; grid-template-columns: 1fr 1.3fr; gap: 22px; }
.thr-alumni .event-band > .live-card:first-child { display: flex; flex-direction: column; justify-content: center; }
.thr-alumni .live-card .live-dot { background: var(--area); }
.thr-alumni .countdown-num { margin: 0 0 6px; }
.thr-alumni .event-title { font-size: 1.3rem; }
.thr-alumni .event-facts { display: grid; grid-template-columns: auto 1fr; gap: 10px 16px; margin: 0 0 18px; font-size: .95rem; }
.thr-alumni .event-facts dt { font-weight: 700; color: var(--green-800); }
.thr-alumni .event-facts dd { margin: 0; color: var(--ink); }
.thr-alumni .event-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.thr-alumni .alumni-link { font-weight: 700; font-size: .9rem; color: var(--green-700); }

/* ---------- Warum mitmachen ---------- */
.thr-alumni .feature-card .feature-icon { background: var(--ochre-100); color: var(--area); }
.thr-alumni .feature-card:hover { transform: none; } /* Karten sind keine Links */

/* ---------- Umfrage ---------- */
.thr-alumni .alumni-survey:focus { outline: none; }
.thr-alumni .survey { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; }
.thr-alumni .survey .cta-actions { margin-top: 22px; }
.thr-alumni .privacy-note { margin-top: 18px; font-size: .86rem; color: rgba(255,255,255,.88); max-width: 60ch; }
.thr-alumni .privacy-note a { color: #fff; font-weight: 700; text-decoration: underline; }
.thr-alumni .qr-box { background: #fff; border-radius: var(--radius-m); padding: 16px; text-align: center; width: 212px; }
.thr-alumni .qr-box img { width: 180px; height: 180px; margin: 0 auto 10px; image-rendering: pixelated; }
.thr-alumni .qr-box p { margin: 0; font-size: .8rem; color: var(--ink-soft); text-align: center; }

/* ---------- FAQ ---------- */
.thr-alumni .faq-item p a { color: var(--green-700); font-weight: 700; }

/* ---------- Kontakt ---------- */
.thr-alumni .contact-card {
	background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-l);
	padding: 34px; box-shadow: var(--shadow);
	display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: center;
}
.thr-alumni .contact-card h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.thr-alumni .contact-intro { color: var(--ink-soft); margin: 0; }
.thr-alumni .contact-line a { color: var(--green-700); font-weight: 700; overflow-wrap: anywhere; }

/* ---------- Responsiv ---------- */
@media (max-width: 980px) {
	.thr-alumni .event-band { grid-template-columns: 1fr; }
	.thr-alumni .alumni-photo { max-width: 560px; margin: 10px auto 0; }
}
@media (max-width: 720px) {
	.thr-alumni .survey { grid-template-columns: 1fr; }
	.thr-alumni .qr-box { display: none; } /* QR nur sinnvoll, wenn man nicht schon am Handy ist */
	.thr-alumni .contact-card { grid-template-columns: 1fr; padding: 24px; }
	.thr-alumni .alumni-photo { padding: 0 0 30px 24px; }
	.thr-alumni .date-badge { width: 140px; height: 140px; border-width: 8px; }
	.thr-alumni .date-badge .d { font-size: 2.1rem; }
	.thr-alumni .date-badge .e { display: none; }
}

/* ---------- Kontrastmodus (sitewide Toolbar, html.thr-contrast) ----------
   a11y-toolbar.css faerbt Texte/Links schwarz - auf dunklen oder farbigen
   Flaechen waere das unlesbar, daher diese Flaechen hier auf Weiss stellen. */
html.thr-contrast .thr-alumni .cta-band,
html.thr-contrast .thr-alumni .date-badge,
html.thr-contrast .thr-alumni .feature-icon,
html.thr-contrast .thr-alumni .contact-card,
html.thr-contrast .thr-alumni .live-card,
html.thr-contrast .thr-alumni .feature-card {
	background: #fff !important;
	border: 2px solid #000 !important;
	color: #000 !important;
	box-shadow: none !important;
}
html.thr-contrast .thr-alumni .privacy-note { color: #000 !important; }
html.thr-contrast .thr-alumni a.btn-primary {
	background: #000 !important;
	color: #fff !important;
	border-color: #000 !important;
}
html.thr-contrast .thr-alumni a.btn-ghost {
	background: #fff !important;
	border-color: #000 !important;
}
html.thr-contrast .thr-alumni .alumni-title .soft,
html.thr-contrast .thr-alumni .event-facts dt,
html.thr-contrast .thr-alumni .event-facts dd,
html.thr-contrast .thr-alumni .countdown-num .n { color: #000 !important; }