/*
 * Anfrage-Formular der Skischule Flachau (Auftrag ar). Handy zuerst.
 * Gestaltung = Design der Seite, GEMESSEN am 21.10.2026 per curl auf https://skischuleflachau.at/kontakt/
 * und die dort eingebundenen Stylesheets (Quelle je Wert im Variablenblock). Wo nichts messbar war: Enfold-Standard, vermerkt.
 * Alles unter #eap-anf.eap-anf.eap-anf (dreifach: schlaegt Enfolds #top-/#kontaktformular-Regeln, auch deren !important; Spezifitaet (1,3,x) > (1,2,x))
 * und .eap-anf-frage (Knopf auf Kursseiten ausserhalb des Formulars).
 */
.eap-anf, .eap-anf-frage {
	/* ---- Werte der Seite (Quelle: Datei · Selektor) ---------------------------------------------- */
	--eap-anf-font: "neue-haas-grotesk-text", Helvetica, Arial, sans-serif;  /* enfold-child/style.css · body (Typekit-Schrift; nur dort verfuegbar, wo die Seite Typekit laedt, sonst Helvetica/Arial) */
	--eap-anf-gewicht: 500;               /* enfold-child/style.css · body { font-weight: 500 } */
	--eap-anf-gewicht-label: 500;         /* gemessen am alten Formular 21.10.2026: Beschriftungen Gewicht 500 wie der Fliesstext (nicht fett) */
	--eap-anf-text: #000000;              /* dynamic_avia/enfold_child.css · --enfold-main-color-color */
	--eap-anf-akzent: #E42313;            /* enfold-child/style.css · div#button-red a.avia-button, h1/h2, Feldkante */
	--eap-anf-blau: #CFE0F5;              /* enfold-child/style.css · body, #main { background } (Seitenhintergrund) */
	--eap-anf-weiss: #ffffff;             /* enfold_child.css · --enfold-main-color-bg */
	--eap-anf-radius-knopf: 10px;         /* enfold-child/style.css · .avia-button { border-radius: 10px } */
	--eap-anf-radius-feld: 2px;           /* Enfold-Standard (contact.min.css · .text_input) */
	--eap-anf-feld-pad: 13px;             /* Enfold-Standard (contact.min.css · .text_input { padding: 13px }) */
	--eap-anf-feldkante: 1.67px;          /* gemessen am alten Formular (computed): Unterkante 1.67px solid #E42313 */
	--eap-anf-knopf-rand: 1.67px;         /* gemessen am alten Formular (computed): Knopf- und Pillenrand 1.67px solid #E42313 */
	--eap-anf-knopf-pad: 14px 8px 12px;   /* enfold-child/style.css · .avia-button.avia-size-large */
	--eap-anf-knopf-breite: 210px;        /* enfold-child/style.css · .avia-button { width: 210px } */
	--eap-anf-senden-pad: 9px 10px 7px;   /* gemessen am alten Formular: Absenden-Knopf padding 9px 10px 7px */
	--eap-anf-pille-pad: 6px 20px 5px;    /* gemessen am alten Formular: Kursart-Pille padding 6px 20px 5px */
	--eap-anf-pille-abstand: 0 10px 7px 0; /* gemessen am alten Formular: Pille margin 0 10px 7px 0 */
	--eap-anf-label-breite: 20%;          /* gemessen am alten Formular: Beschriftung 20 % der Spalte (181 von 905 px), Feld 80 % */
	--eap-anf-label-oben: 12px;           /* gemessen am alten Formular: Beschriftung padding-top 12px */
	--eap-anf-abstand: 11px;              /* Enfold-Standard (contact.min.css · .avia_ajax_form p { margin: 11px 0 }) */
	--eap-anf-label-abstand: 7px;         /* Enfold-Standard (contact.min.css · label { margin-bottom: 7px }) */
	--eap-anf-h: 26px;                    /* enfold-child/style.css · h1, h2 { font-size: 26px; font-weight: normal } */
	/* ---- Abweichungen von der Seite (mit Grund) ---------------------------------------------------- */
	--eap-anf-schrift: 16px;              /* Seite: 13px (Enfold-Inhaltsgroesse); hier 16 px: Auftrag (Handy, kein iOS-Zoom) */
	--eap-anf-fehler: #B71C0E;            /* Fehlertexte: dunkleres Rot (Seiten-Rot hat auf #CFE0F5 nur 3.44:1); #B71C0E: 4.91:1 auf #CFE0F5, 6.59:1 auf weiss */
	--eap-anf-fokus: #1a1a1a;             /* Fokusring: Seite hat keinen sichtbaren; 17.4:1 auf weiss */
	--eap-anf-hinweis: #E42313;           /* Auftrag 21.10.: alles in Seiten-Rot (Hilfetexte, Platzhalter) wie im alten Formular; Kontrast siehe unten */
}

/*
 * Kontraste (WCAG 2.x, gerechnet; probe/anfrage-css.py rechnet nach):
 *   Rot #E42313 auf weiss ........ 4.62:1
 *   Rot #E42313 auf Blau #CFE0F5 .. 3.44:1  <- UNTER AA (4.5:1) fuer 16-px-Text. Bewusst so, weil Emanuel (21.10.2026) das Aussehen des
 *                                   alten Formulars verlangt (dort exakt dieses Paar). Die Seite selbst hat das gleiche Problem.
 *                                   Gemildert: Schrift 16 px/500 statt 13 px, Fokusring schwarz, Fehlertexte dunkler (#B71C0E 4.91:1).
 *                                   Der Seitenhintergrund ist ein Verlauf nach unten Richtung weiss: dort steigt der Wert bis 4.62:1.
 *   weiss auf Rot (gewaehlte Pille, Hover) 4.62:1
 *   Fehlerrot #B71C0E auf Blau ... 4.91:1; auf weiss 6.59:1
 */
#eap-anf.eap-anf.eap-anf { font-family: var(--eap-anf-font); font-weight: var(--eap-anf-gewicht); font-size: var(--eap-anf-schrift); line-height: 1.5; color: var(--eap-anf-akzent); }
#eap-anf.eap-anf#eap-anf.eap-anf.eap-anf *, #eap-anf.eap-anf#eap-anf.eap-anf.eap-anf *::before, #eap-anf.eap-anf#eap-anf.eap-anf.eap-anf *::after { box-sizing: border-box; }
#eap-anf.eap-anf.eap-anf [hidden] { display: none !important; }

/* Knoepfe: weisser Grund, rote Kante, rote Schrift, Radius 10 (Absenden, schwebender Knopf, "Frage senden" auf Kursseiten); Hover = rot gefuellt */
#eap-anf.eap-anf.eap-anf .eap-anf-knopf, .eap-anf-frage {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 48px; min-width: 48px; padding: var(--eap-anf-knopf-pad);
	font-family: var(--eap-anf-font); font-size: var(--eap-anf-schrift); font-weight: var(--eap-anf-gewicht); line-height: 1.2; letter-spacing: 0; text-transform: none;
	color: var(--eap-anf-akzent) !important; background: var(--eap-anf-weiss) !important;
	border: var(--eap-anf-knopf-rand) solid var(--eap-anf-akzent) !important; border-radius: var(--eap-anf-radius-knopf); cursor: pointer;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}
#eap-anf.eap-anf.eap-anf .eap-anf-knopf:hover, .eap-anf-frage:hover { color: var(--eap-anf-weiss) !important; background: var(--eap-anf-akzent) !important; }
/* Absenden wie im alten Formular: flach (kein Schatten), 210 px, linksbuendig */
#eap-anf.eap-anf.eap-anf .eap-anf-senden { min-height: 44px; padding: var(--eap-anf-senden-pad); box-shadow: none; }

/* sichtbarer Fokusring */
#eap-anf.eap-anf.eap-anf a:focus-visible, #eap-anf.eap-anf.eap-anf button:focus-visible, #eap-anf.eap-anf.eap-anf input:focus-visible,
#eap-anf.eap-anf.eap-anf select:focus-visible, #eap-anf.eap-anf.eap-anf textarea:focus-visible, .eap-anf-frage:focus-visible {
	outline: 3px solid var(--eap-anf-fokus); outline-offset: 2px;
	box-shadow: 0 0 0 5px var(--eap-anf-weiss);
}

/* schwebender Knopf */
#eap-anf.eap-anf.eap-anf .eap-anf-fab { position: fixed; right: 16px; bottom: 16px; z-index: 99990; }
.eap-anf-seite .eap-anf-fab { display: none; }

/* Panel (nur schwebende Variante): behaelt seine weisse Flaeche; Handy = unten ausgefahren, Kopf in Seitenblau */
#eap-anf.eap-anf.eap-anf .eap-anf-panel {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 99995;
	max-height: 92vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
	background: var(--eap-anf-weiss); border-radius: 20px 20px 0 0;
	box-shadow: 0 -6px 28px rgba(0, 0, 0, .28);
}
#eap-anf.eap-anf.eap-anf .eap-anf-kopf {
	position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between;
	padding: 12px 8px 12px 20px; background: var(--eap-anf-blau); border-radius: 20px 20px 0 0;
}
#eap-anf.eap-anf.eap-anf .eap-anf-kopf h2, #eap-anf.eap-anf.eap-anf .eap-anf-seite h2 {
	margin: 0; padding: 0; font-family: var(--eap-anf-font); font-size: var(--eap-anf-schrift) !important; font-weight: var(--eap-anf-gewicht); font-style: normal; line-height: 1.3; text-transform: none;
}
#eap-anf.eap-anf.eap-anf .eap-anf-kopf h2 { color: var(--eap-anf-text) !important; }          /* im blauen Panelkopf schwarz (15.63:1) */
#eap-anf.eap-anf.eap-anf .eap-anf-seite h2 { margin: 0 0 14px; color: var(--eap-anf-akzent) !important; }  /* klein wie das alte "Kontaktformular" (16 px) */
#eap-anf.eap-anf.eap-anf .eap-anf-zu {
	min-width: 48px; min-height: 48px; font-size: 28px; line-height: 1; color: var(--eap-anf-text) !important;
	background: transparent !important; border: 0 !important; border-radius: 24px; cursor: pointer;
}
#eap-anf.eap-anf.eap-anf .eap-anf-zu:hover { background: rgba(255, 255, 255, .6) !important; }
#eap-anf.eap-anf.eap-anf .eap-anf-inhalt { padding: 16px 20px 24px; }
/* Kontaktseite: KEIN Kasten, kein eigener Hintergrund, kein Schatten - das Formular steht auf dem Seitenhintergrund */
#eap-anf.eap-anf.eap-anf .eap-anf-seite { max-width: none; margin: 0; padding: 0; background: none; box-shadow: none; }
#eap-anf.eap-anf.eap-anf .eap-anf-seite .eap-anf-inhalt { padding: 0; background: none; border-radius: 0; box-shadow: none; }

#eap-anf.eap-anf.eap-anf .eap-anf-intro { margin: 0 0 var(--eap-anf-abstand); }
#eap-anf.eap-anf.eap-anf .eap-anf-intro a { color: var(--eap-anf-akzent); text-decoration: underline; }

/* Feldzeile: Handy = Beschriftung ueber dem Feld; ab 768 px Beschriftung links 20 % (padding-top 12), Feld rechts 80 % */
#eap-anf.eap-anf.eap-anf .eap-anf-feld { margin: var(--eap-anf-abstand) 0; }
#eap-anf.eap-anf.eap-anf .eap-anf-feld > label, #eap-anf.eap-anf.eap-anf .eap-anf-lbl {
	display: block; float: none; width: auto !important; margin: 0 0 4px; padding: 0; border: 0; border-radius: 0; background: none;
	font-family: var(--eap-anf-font); font-size: var(--eap-anf-schrift); font-weight: var(--eap-anf-gewicht-label); line-height: 1.5; color: var(--eap-anf-akzent);
}
#eap-anf.eap-anf.eap-anf .eap-anf-ctl { min-width: 0; }
#eap-anf.eap-anf.eap-anf input[type="text"], #eap-anf.eap-anf.eap-anf input[type="email"], #eap-anf.eap-anf.eap-anf input[type="tel"], #eap-anf.eap-anf.eap-anf input[type="date"],
#eap-anf.eap-anf.eap-anf select, #eap-anf.eap-anf.eap-anf textarea {
	display: block; width: 100% !important; max-width: none; min-height: 46px; margin: 0; padding: var(--eap-anf-feld-pad);
	font-family: var(--eap-anf-font); font-size: var(--eap-anf-schrift); font-weight: var(--eap-anf-gewicht); line-height: 1.2;
	color: var(--eap-anf-akzent) !important; background: transparent !important;
	border: 0 !important; border-bottom: var(--eap-anf-feldkante) solid var(--eap-anf-akzent) !important; border-radius: var(--eap-anf-radius-feld);
	box-shadow: none; -webkit-appearance: none; appearance: none; float: none !important;
}
#eap-anf.eap-anf.eap-anf textarea { min-height: 112px; resize: vertical; }
#eap-anf.eap-anf.eap-anf ::placeholder { color: var(--eap-anf-akzent); opacity: 1; font-style: italic; font-weight: var(--eap-anf-gewicht); }  /* volles Rot (blasser waere 2.78:1), vom Eingabetext nur durch Kursivschrift getrennt */
#eap-anf.eap-anf.eap-anf input[type="date"] { color-scheme: light; }

/* Kursart: Knoepfe zum Antippen (echte Radios, visuell versteckt, Fokus am Knopf) */
#eap-anf.eap-anf.eap-anf .eap-anf-pillen { position: relative; display: flex; flex-wrap: wrap; padding-top: 2px; }
#eap-anf.eap-anf.eap-anf .eap-anf-pillen input[type="radio"] {
	position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; pointer-events: none;
}
#eap-anf.eap-anf.eap-anf .eap-anf-pillen label {
	display: inline-block; float: none; width: auto !important; margin: var(--eap-anf-pille-abstand); padding: var(--eap-anf-pille-pad) !important;
	font-family: var(--eap-anf-font); font-size: var(--eap-anf-schrift); font-weight: var(--eap-anf-gewicht); line-height: 1.5; text-transform: none; letter-spacing: 0;
	color: var(--eap-anf-akzent); background: transparent; border: var(--eap-anf-knopf-rand) solid var(--eap-anf-akzent); border-radius: var(--eap-anf-radius-knopf);
	cursor: pointer; box-shadow: none;
}
#eap-anf.eap-anf.eap-anf .eap-anf-pillen input[type="radio"]:checked + label { color: var(--eap-anf-weiss) !important; background: var(--eap-anf-akzent) !important; }
#eap-anf.eap-anf.eap-anf .eap-anf-pillen input[type="radio"]:focus-visible + label { outline: 3px solid var(--eap-anf-fokus); outline-offset: 2px; box-shadow: 0 0 0 5px var(--eap-anf-weiss); }
#eap-anf.eap-anf.eap-anf .eap-anf-pillen label:hover { background: rgba(228, 35, 19, .12); }
#eap-anf.eap-anf.eap-anf .eap-anf-pillen input[type="radio"]:checked + label:hover { background: var(--eap-anf-akzent) !important; }
#eap-anf.eap-anf.eap-anf [role="radiogroup"][aria-invalid="true"] .eap-anf-pillen label { border-color: var(--eap-anf-fehler); border-width: 3px; }

/* Fehler am Feld (Text + dickere Kante; aria-invalid setzt anfrage.js) */
#eap-anf.eap-anf.eap-anf .eap-anf-fe { margin: 4px 0 0; font-size: var(--eap-anf-schrift); font-weight: var(--eap-anf-gewicht); color: var(--eap-anf-fehler); }
#eap-anf.eap-anf.eap-anf input[aria-invalid="true"], #eap-anf.eap-anf.eap-anf textarea[aria-invalid="true"] { border-bottom: 4px solid var(--eap-anf-fehler) !important; color: var(--eap-anf-fehler) !important; }
#eap-anf.eap-anf.eap-anf .eap-anf-pflichthinweis { margin: 0 0 8px; font-size: var(--eap-anf-schrift); color: var(--eap-anf-hinweis); }

/* Hinweis "Das ist noch keine Buchung - lieber gleich buchen?": EINE kleine Zeile ueber dem Knopf, ohne Flaeche */
#eap-anf.eap-anf.eap-anf .eap-anf-buchen { margin: 0 0 10px; padding: 0; background: none; color: var(--eap-anf-akzent); }
#eap-anf.eap-anf.eap-anf .eap-anf-buchen a, #eap-anf.eap-anf.eap-anf .eap-anf-erfolg a { color: var(--eap-anf-akzent); font-weight: var(--eap-anf-gewicht); text-decoration: underline; }
#eap-anf.eap-anf.eap-anf .eap-anf-gross a { display: inline-block; min-height: 44px; line-height: 44px; color: var(--eap-anf-akzent); font-weight: var(--eap-anf-gewicht); text-decoration: underline; }
#eap-anf.eap-anf.eap-anf .eap-anf-gross { margin: 12px 0 0; text-align: center; }

/* Erfolgszustand: auf dem Seitenhintergrund, rote Schrift wie das ganze Formular */
#eap-anf.eap-anf.eap-anf .eap-anf-erfolg { padding: 0; background: none; color: var(--eap-anf-akzent); }
#eap-anf.eap-anf.eap-anf .eap-anf-erfolg h3 { margin: 0 0 8px; font-size: var(--eap-anf-schrift); font-weight: var(--eap-anf-gewicht); color: var(--eap-anf-akzent); }
#eap-anf.eap-anf.eap-anf .eap-anf-erfolg p { margin: 0 0 8px; }
#eap-anf.eap-anf.eap-anf .eap-anf-erfolg:focus { outline: 3px solid var(--eap-anf-fokus); outline-offset: 2px; }

/* Honigtopf: weg fuer Augen und Screenreader-Wege, nicht fuer Roboter */
#eap-anf.eap-anf.eap-anf .eap-anf-sr {
	position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
	clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Einwilligung: Haken + Text, ohne Flaeche */
#eap-anf.eap-anf.eap-anf .eap-anf-einwilligung { display: flex; gap: 12px; align-items: flex-start; margin: 14px 0 var(--eap-anf-abstand); padding: 0; background: none; }
#eap-anf.eap-anf.eap-anf .eap-anf-einwilligung input[type="checkbox"] { flex: 0 0 24px; float: none !important; width: 24px; height: 24px; margin: 3px 0 0 !important; accent-color: var(--eap-anf-akzent); }
#eap-anf.eap-anf.eap-anf .eap-anf-einwilligung label {
	display: block; float: none; width: auto !important; margin: 0; padding: 0 !important; border: 0 !important; border-radius: 0; background: none; text-align: left; font-size: var(--eap-anf-schrift) !important;  /* Enfold: input[type=checkbox] + label { border + padding !important } */
	font-weight: var(--eap-anf-gewicht); line-height: 1.5; color: var(--eap-anf-akzent);
}
#eap-anf.eap-anf.eap-anf .eap-anf-einwilligung a { color: var(--eap-anf-akzent); font-weight: var(--eap-anf-gewicht); text-decoration: underline; }

#eap-anf.eap-anf.eap-anf .eap-anf-ts { margin: 0 0 12px; min-height: 0; }

/* Fehlliste und Status: ohne Kasten, dunkleres Rot (Kontrast) */
#eap-anf.eap-anf.eap-anf .eap-anf-fehlbereich { margin: 0 0 12px; padding: 0; background: none; color: var(--eap-anf-fehler); }
#eap-anf.eap-anf.eap-anf .eap-anf-fehlbereich p { margin: 0 0 4px; font-weight: var(--eap-anf-gewicht); }
#eap-anf.eap-anf.eap-anf .eap-anf-fehlbereich ul { margin: 0; padding: 0 0 0 20px; list-style: disc; }
#eap-anf.eap-anf.eap-anf .eap-anf-fehlbereich li { margin: 0; padding: 0; }
/* Enfold setzt p {width:100% !important}; mit dem margin-left ab 768 px ragten Status, Pflichthinweis und Buchen-Zeile um die
   Labelbreite rechts aus dem Formular (gemessen 21.10.2026: 187 px). Breite folgt dem Rand, lange Adressen brechen um. */
#eap-anf.eap-anf.eap-anf p { width: auto !important; max-width: 100%; overflow-wrap: anywhere; }
#eap-anf.eap-anf.eap-anf .eap-anf-status { min-height: 24px; margin: 12px 0 0; font-weight: var(--eap-anf-gewicht); color: var(--eap-anf-akzent); }
#eap-anf.eap-anf.eap-anf .eap-anf-status[data-art="fehler"] { color: var(--eap-anf-fehler); }
#eap-anf.eap-anf.eap-anf .eap-anf-status[data-art="ok"] { color: #1d6b2f; }  /* 6.57:1 auf weiss */

/* Frage-senden-Knopf auf Kursseiten: gleicher Knopf, mindestens so breit wie die Knoepfe der Seite */
.eap-anf-knopfzeile { margin: 24px 0; text-align: center; }
.eap-anf-frage { min-width: var(--eap-anf-knopf-breite); }

/* Handy: Knopf volle Breite (grosses Daumenziel, passt zu den vollbreiten Feldern) */
#eap-anf.eap-anf.eap-anf .eap-anf-senden { width: 100%; }

/* Kontaktseite ab 768 px: zweispaltig wie das alte Formular. Das Panel bleibt gestapelt (420 px sind fuer 20/80 zu schmal). */
@media (min-width: 768px) {
	#eap-anf.eap-anf.eap-anf .eap-anf-seite .eap-anf-feld { display: flex; align-items: flex-start; }
	#eap-anf.eap-anf.eap-anf .eap-anf-seite .eap-anf-feld > label, #eap-anf.eap-anf.eap-anf .eap-anf-seite .eap-anf-lbl { flex: 0 0 var(--eap-anf-label-breite); width: var(--eap-anf-label-breite) !important; margin: 0; padding: var(--eap-anf-label-oben) 8px 0 0; }
	#eap-anf.eap-anf.eap-anf .eap-anf-seite .eap-anf-ctl { flex: 1 1 80%; }
	#eap-anf.eap-anf.eap-anf .eap-anf-seite .eap-anf-einwilligung,
	#eap-anf.eap-anf.eap-anf .eap-anf-seite .eap-anf-fe-consent,
	#eap-anf.eap-anf.eap-anf .eap-anf-seite .eap-anf-pflichthinweis,
	#eap-anf.eap-anf.eap-anf .eap-anf-seite .eap-anf-fehlbereich,
	#eap-anf.eap-anf.eap-anf .eap-anf-seite .eap-anf-buchen,
	#eap-anf.eap-anf.eap-anf .eap-anf-seite .eap-anf-ts,
	#eap-anf.eap-anf.eap-anf .eap-anf-seite .eap-anf-status,
	#eap-anf.eap-anf.eap-anf .eap-anf-seite .eap-anf-erfolg { margin-left: var(--eap-anf-label-breite); }
	#eap-anf.eap-anf.eap-anf .eap-anf-seite .eap-anf-senden { display: flex; margin-left: auto; margin-right: 0; width: var(--eap-anf-knopf-breite); }  /* rechtsbuendig unter dem Feld wie im alten Formular */
}
@media (min-width: 700px) {
	#eap-anf.eap-anf.eap-anf .eap-anf-panel { left: auto; right: 16px; bottom: 80px; width: 420px; max-height: 80vh; border-radius: 20px; }
	#eap-anf.eap-anf.eap-anf .eap-anf-panel .eap-anf-senden { width: var(--eap-anf-knopf-breite); }
}
@media (prefers-reduced-motion: no-preference) {
	#eap-anf.eap-anf.eap-anf .eap-anf-knopf, .eap-anf-frage, #eap-anf.eap-anf.eap-anf .eap-anf-pillen label { transition: background-color .15s ease, color .15s ease; }
}