/*
 * Zugang: gemeinsame Registrierungs- und Login-Seite fuer die drei Zugangsarten.
 *
 * Zwei Zustaende teilen sich dieselben Bausteine: die Auswahl (drei Karten) und
 * die Strecke (ein Formular in Schritten). Ohne JavaScript ist alles sichtbar —
 * die Karten sind dann Sprungmarken, die Schritte stehen untereinander. Erst
 * das JS blendet aus; deshalb steht hier kein einziges display:none auf einem
 * Baustein, den es ohne JS braucht (die is-*-Klassen setzt ausschliesslich JS).
 */

/* Pflicht, nicht Geschmack: Karten und Eingabefelder stehen auf width:100% und
   tragen eigenes Padding. Ohne border-box addiert sich beides und die Seite
   laeuft bei 375 px seitlich aus dem Bild (gemessen, nicht vermutet). Das
   Theme setzt es zwar meist selbst — verlassen duerfen wir uns darauf nicht. */
.zwcl-zugang,.zwcl-zugang *,.zwcl-zugang *::before,.zwcl-zugang *::after{box-sizing:border-box}

.zwcl-zugang{
	--zwcl-ink:var(--zcf-ink,#1e252d);
	--zwcl-petrol:var(--zcf-petrol,#23434a);
	--zwcl-camel:var(--zcf-camel,#b88a5b);
	--zwcl-cream:var(--zcf-cream,#fcfaf5);
	--zwcl-sand:var(--zcf-sand,#f6f1e8);
	--zwcl-border:var(--zcf-border,#e2d9cc);
	--zwcl-muted:#64717a;
	max-width:880px;margin:0 auto;color:var(--zwcl-ink)
}

/* ---------- Kopf ---------- */
.zwcl-zugang__eyebrow{margin:0 0 .4rem;color:var(--zwcl-camel);font-size:.78rem;font-weight:750;letter-spacing:.14em;text-transform:uppercase}
.zwcl-zugang__titel{margin:0 0 .5rem}
.zwcl-zugang__lead{margin:0 0 2rem;max-width:62ch;color:var(--zwcl-muted);font-size:1.02rem;line-height:1.55}

/* ---------- Auswahl (Schritt 1) ---------- */
.zwcl-zugang__wahl{margin:0 0 1rem}
.zwcl-zugang__karten{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem;margin:0;padding:0;list-style:none}
.zwcl-zugang__karte{display:flex;min-width:0}
.zwcl-zugang__karte>a{
	display:flex;flex-direction:column;gap:.55rem;width:100%;min-width:0;
	padding:1.35rem 1.25rem 1.15rem;
	border:1px solid var(--zwcl-border);border-radius:16px;background:var(--zwcl-cream);
	color:inherit;text-decoration:none
}
.zwcl-zugang__karte>a:hover,.zwcl-zugang__karte>a:focus-visible{border-color:var(--zwcl-camel);background:#fff}
.zwcl-zugang__karte>a:focus-visible{outline:3px solid var(--zwcl-camel);outline-offset:2px}
.zwcl-zugang__karte-icon{display:block;width:34px;height:34px;color:var(--zwcl-petrol)}
.zwcl-zugang__karte-titel{font-size:1.06rem;font-weight:750;color:var(--zwcl-petrol);line-height:1.3}
/* Der eine erklaerende Satz — er traegt die ganze Entscheidung, deshalb nicht kleiner als der Fliesstext ringsum. */
.zwcl-zugang__karte-satz{margin:0;font-size:.95rem;line-height:1.5}
.zwcl-zugang__karte-liste{margin:.1rem 0 0;padding:0;list-style:none;font-size:.86rem;color:var(--zwcl-muted);line-height:1.55}
/* Haken haengend: bricht die Zeile um, soll der Folgetext unter dem Text
   stehen, nicht unter dem Haken. */
.zwcl-zugang__karte-liste li{display:flex;gap:.45rem;margin:0 0 .3rem}
.zwcl-zugang__karte-liste li::before{content:"✓";flex:0 0 auto;color:var(--zwcl-camel);font-weight:750}
.zwcl-zugang__karte-cta{margin-top:auto;padding-top:.5rem;font-weight:750;color:var(--zwcl-petrol)}
.zwcl-zugang__karte-cta::after{content:" →"}

/* Login-Karten ohne Merkmalsliste: der Anmelde-Satz allein traegt die Wahl.
   Schmaler Mindestbreite, damit die drei Karten frueher nebeneinander stehen —
   sonst schiebt sich das Formular auf mittleren Breiten unter die Falz. */
.zwcl-zugang__karten--knapp{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.zwcl-zugang__karten--knapp .zwcl-zugang__karte>a{padding:1.15rem 1.1rem 1rem;gap:.45rem}

/* ---------- Emblem ueber dem Anmeldeformular ---------- */
/* Bildhoehe fest, Breite frei: die beiden Embleme haben verschiedene
   Seitenverhaeltnisse (Club hochkant, Haus quer) und wuerden sich bei fester
   Breite unterschiedlich gross anfuehlen. */
.zwcl-zugang__marke{display:block;margin:0 0 .9rem;line-height:0}
.zwcl-zugang__marke img{width:auto;height:30px;max-width:100%}
.zwcl-zugang__marke--club img{height:64px}

/* Der Club fuehrt mit eigener Farbe — dasselbe Sandbett wie im Clubkopf.
   Das ist kein Schmuck: Wer aus einer Clubmail kommt, soll ohne Lesen sehen,
   dass er im richtigen der drei Formulare steht. */
.zwcl-zugang__strecke--club{background:var(--zwcl-sand);border-color:var(--zwcl-camel)}

/* ---------- Strecke (Formular in Schritten) ---------- */
.zwcl-zugang__strecke{
	padding:clamp(18px,4vw,32px);
	border:1px solid var(--zwcl-border);border-radius:18px;background:var(--zwcl-cream)
}
.zwcl-zugang__strecke+.zwcl-zugang__strecke{margin-top:1.25rem}
.zwcl-zugang__strecke-kopf{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:baseline;justify-content:space-between;margin:0 0 1rem}
.zwcl-zugang__strecke-titel{margin:0;font-size:1.15rem;color:var(--zwcl-petrol)}
.zwcl-zugang__zurueck-wahl{
	min-height:44px;display:inline-flex;align-items:center;gap:.3rem;
	border:0;padding:0;background:none;color:var(--zwcl-petrol);font:inherit;font-size:.9rem;
	text-decoration:underline;cursor:pointer
}

/* Fortschritt: Zahl UND Balken. Die Zahl sagt, wann es geschafft ist,
   der Balken zeigt es auf einen Blick. Das JS fuellt beide. */
.zwcl-zugang__fortschritt{margin:0 0 1.25rem}
.zwcl-zugang__fortschritt-text{display:block;margin:0 0 .4rem;font-size:.86rem;font-weight:750;letter-spacing:.04em;color:var(--zwcl-muted)}
.zwcl-zugang__fortschritt-bahn{height:6px;border-radius:999px;background:var(--zwcl-border);overflow:hidden}
.zwcl-zugang__fortschritt-fuellung{display:block;height:100%;width:0;border-radius:999px;background:var(--zwcl-petrol);transition:width .25s ease}

.zwcl-zugang__schritt{border:0;padding:0;margin:0 0 1.25rem;min-width:0}
.zwcl-zugang__schritt legend{padding:0;margin:0 0 .2rem;font-size:1.02rem;font-weight:750;color:var(--zwcl-petrol)}
.zwcl-zugang__schritt-hinweis{margin:0 0 1rem;font-size:.9rem;color:var(--zwcl-muted);line-height:1.5}

.zwcl-zugang__gitter{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.zwcl-zugang__feld{display:grid;gap:.35rem;min-width:0;margin:0 0 1rem;font-weight:700}
.zwcl-zugang__gitter .zwcl-zugang__feld{margin:0}
.zwcl-zugang__feld--voll{grid-column:1/-1}
.zwcl-zugang__feld input,.zwcl-zugang__feld select{
	width:100%;min-width:0;min-height:48px;padding:.7rem .8rem;
	border:1px solid var(--zwcl-border);border-radius:10px;background:#fff;color:var(--zwcl-ink);font:inherit;font-weight:400
}
.zwcl-zugang__feld input:focus-visible,.zwcl-zugang__feld select:focus-visible,.zwcl-zugang button:focus-visible{outline:3px solid var(--zwcl-camel);outline-offset:2px}
.zwcl-zugang__feldhinweis{font-size:.84rem;font-weight:400;color:var(--zwcl-muted);line-height:1.45}

.zwcl-zugang__wahlzeile{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;margin:0 0 1rem}
.zwcl-zugang__wahlzeile label{display:flex;gap:.45rem;align-items:center;min-height:44px;font-weight:400}

/* Einwilligungen: der Text MUSS in einem eigenen <span> liegen — das Label ist
   ein Flex-Container, sonst wird jeder Textknoten rings um einen Link zum
   eigenen Flex-Item und bekommt den gap dazwischen (Befund aus skc/antrag.php). */
.zwcl-zugang__consent{display:flex;gap:.6rem;align-items:flex-start;margin:0 0 .9rem;font-size:.9rem;line-height:1.5}
.zwcl-zugang__consent input{flex:0 0 auto;margin-top:.25rem;width:20px;height:20px}
.zwcl-zugang__consent>span{flex:1 1 auto;min-width:0}
.zwcl-zugang__consent a{text-decoration:underline}

.zwcl-zugang__hp{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}

.zwcl-zugang__nav{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;margin-top:1.5rem}
.zwcl-zugang__btn{
	display:inline-flex;align-items:center;justify-content:center;
	min-height:48px;padding:.75rem 1.4rem;border-radius:999px;
	border:1px solid var(--zwcl-petrol);background:var(--zwcl-petrol);color:#fff;
	font:inherit;font-weight:750;text-decoration:none;cursor:pointer
}
.zwcl-zugang__btn--still{background:#fff;color:var(--zwcl-petrol)}
.zwcl-zugang__btn:disabled{opacity:.5;cursor:not-allowed}

/* ---------- Meldungen ---------- */
.zwcl-zugang__meldung{margin:0 0 1.25rem;padding:.9rem 1.1rem;border-radius:10px;border-left:4px solid;font-size:.95rem;line-height:1.5}
.zwcl-zugang__meldung--ok{border-color:#2f6b45;background:#eef5ef;color:#1e5c34}
.zwcl-zugang__meldung--warn{border-color:var(--zwcl-camel);background:#fdf6ec;color:#7d5322}

.zwcl-zugang__fuss{margin:1.75rem 0 0;padding-top:1.25rem;border-top:1px solid var(--zwcl-border);font-size:.92rem;color:var(--zwcl-muted);line-height:1.6}
.zwcl-zugang__fuss a{color:var(--zwcl-petrol);text-decoration:underline}

/* ---------- JS-Zustaende ---------- */
/* Alles hier drin wirkt erst, wenn das JS die Klasse gesetzt hat. */
.zwcl-zugang.is-bereit .zwcl-zugang__verborgen{display:none}
.zwcl-zugang.is-bereit .zwcl-zugang__strecke-titel{font-size:1.3rem}

@media(max-width:620px){
	.zwcl-zugang__gitter{grid-template-columns:1fr}
	.zwcl-zugang__nav{flex-direction:column-reverse;align-items:stretch}
	.zwcl-zugang__nav .zwcl-zugang__btn{width:100%}
}