/*
 * Schnuppern-Anmeldung 2026/27 — nur auf Anmelde- und Danke-Seite geladen.
 * Farben: Primär #014a99 (Blau, bestehender Submit-Button), Akzent #97bf0d (Grün).
 *
 * Die Selektoren greifen nur, wo die jeweiligen Klassen gesetzt sind (WPBakery-Zeilen bzw.
 * CF7-Tags mit class:…). Ohne diese Klassen ändert das Stylesheet nichts am Layout.
 */

/* Kopfzeile (WPBakery-Zeile mit Klasse htk-kopf, eine Spalte, ein Textblock — HTML-Vorlage in Doku 12 §L1):
   links Kontaktblock (Icon, Hinweis, Telefonnummer als tel:-Link), rechts Logo; auch mobil nebeneinander. */
.htk-schnuppern .htk-kopf { padding: 10px 0; border-bottom: 1px solid #e6e6e6; background: #fff; }
.htk-schnuppern .htk-kopf__inner {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.htk-schnuppern .htk-kopf__inner br { display: none; }   /* wpautop-Umbrüche unschädlich machen */
.htk-schnuppern .htk-kopf__tel {
    display: flex; align-items: center; gap: 12px; min-height: 44px;
    text-decoration: none; color: #014a99 !important;   /* !important: Jupiter-Textblock-Regeln überstimmen */
}
.htk-schnuppern .htk-kopf__tel:hover { text-decoration: none; color: #013a78 !important; }
/* Telefon-Icon als CSS-Hintergrund (Inline-SVG im Textblock filtert WordPress heraus) */
.htk-schnuppern .htk-kopf__tel::before {
    content: ""; flex: none; width: 42px; height: 42px; border-radius: 50%;
    background: #e8f0fa url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23014a99'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 0 1 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1L6.6 10.8z'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
}
.htk-schnuppern .htk-kopf__tel-icon { display: none; }   /* alte Markup-Variante, falls noch vorhanden */
.htk-schnuppern .htk-kopf__tel-text { display: flex; flex-direction: column; line-height: 1.25; }
.htk-schnuppern .htk-kopf__tel-text small { font-size: 13px; color: #555; font-weight: 400; }
.htk-schnuppern .htk-kopf__tel-text strong { font-size: 18px; font-weight: 700; white-space: nowrap; color: #014a99 !important; }
.htk-schnuppern .htk-kopf__logo { display: block; line-height: 0; flex: none; }
.htk-schnuppern .htk-kopf__logo img { display: block; height: 64px; width: auto; }
@media (max-width: 480px) {
    .htk-schnuppern .htk-kopf__tel-text small { display: none; }
    .htk-schnuppern .htk-kopf__tel-text strong { font-size: 16px; }
    .htk-schnuppern .htk-kopf__logo img { height: 48px; }
}

/* Hero (WPBakery-Zeile mit Klasse htk-hero, Hintergrundbild über die Zeilen-Design-Optionen „Cover“,
   eine Spalte, ein Textblock — HTML-Vorlage in Doku 12 §L2). Ersetzt den Slider-Revolution-Slide (Plan 12 §L2).
   Variante 3 (Entscheidung Owner 23.09.2026, nach kurzem Wechsel zu 4 wieder zurück): Bild unverändert hell, Text in halbtransparenter dunkler Box. */
.htk-schnuppern .htk-hero {
    position: relative; min-height: 560px; display: flex; align-items: center;
    background-position: center; background-size: cover;
    /* Randlos per CSS statt per Jupiter-„Full width“-Skript: das Skript setzt inline width/left und
       kommt auf schmalen Viewports auf 500 px (Überlauf rechts). !important überstimmt die Inline-Werte. */
    width: 100vw !important; left: calc(50% - 50vw) !important; right: auto !important;
    margin-left: 0 !important; margin-right: 0 !important; max-width: none !important; overflow: hidden;
}
.htk-schnuppern .htk-hero > .wpb_column {
    position: relative; display: flex; align-items: center; min-height: inherit; width: 100%; box-sizing: border-box;
}
.htk-schnuppern .htk-hero > .wpb_column > * { width: 100%; min-width: 0; box-sizing: border-box; }
/* Inhalt auf Rasterbreite des Themes (1100 px + 20 px Rand) begrenzen und zentrieren — unabhängig davon,
   ob die Zeile mit „Full width“ und gestrecktem Inhalt gesetzt ist */
.htk-schnuppern .htk-hero .mk-text-block { max-width: 1140px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; width: 100%; }
.htk-schnuppern .htk-hero .htk-hero__inner {
    max-width: 620px; margin: 48px 0; padding: 36px 40px; box-sizing: border-box;
    background: rgba(0, 20, 50, .66); border-radius: 10px; color: #fff;
    /* kein backdrop-filter: Chrome rendert Text auf solchen Ebenen ohne Subpixel-Glättung (wirkt unscharf) */
}
.htk-schnuppern .htk-hero .htk-hero__inner p:last-child { margin-bottom: 0; }
.htk-schnuppern .htk-hero h1 {
    color: #fff; font-size: 44px; line-height: 1.1; font-weight: 700; margin: 0 0 16px;
    text-transform: none; letter-spacing: 0; text-shadow: none;
}
.htk-schnuppern .htk-hero p { color: #fff; font-size: 18px; line-height: 1.5; margin: 0 0 12px; text-shadow: none; }
.htk-schnuppern .htk-hero p.htk-hero__sub { font-weight: 700; margin-bottom: 24px; }
.htk-schnuppern .htk-hero .htk-hero__cta {
    display: inline-block; background: #ffcc00; color: #14213d !important; font-weight: 700; font-size: 17px;
    padding: 0 28px; line-height: 50px; border-radius: 6px; text-decoration: none !important;
    text-shadow: none;   /* erbt sonst den Schatten des umgebenden Absatzes — Schrift wirkt unscharf */
}
.htk-schnuppern .htk-hero .htk-hero__cta:hover { background: #ffd83a; }
@media (max-width: 767px) {
    .htk-schnuppern .htk-hero { min-height: 60vh; }
    .htk-schnuppern .htk-hero .mk-text-block { padding: 0 16px; }
    .htk-schnuppern .htk-hero .htk-hero__inner { margin: 24px 0; padding: 24px 20px; }
    .htk-schnuppern .htk-hero h1 { font-size: 32px; }
    .htk-schnuppern .htk-hero p { font-size: 16px; }
    .htk-schnuppern .htk-hero .htk-hero__cta { display: block; text-align: center; }
}

/* Mini-Footer (WPBakery-Zeile mit Klasse htk-fuss): Firmierung, Impressum, Datenschutz */
.htk-schnuppern .htk-fuss { padding: 24px 0; font-size: 14px; opacity: .85; text-align: center; }
.htk-schnuppern .htk-fuss .mk-text-block,
.htk-schnuppern .htk-fuss p { text-align: center !important; margin: 0; font-size: 14px !important; line-height: 1.6; }   /* Jupiter setzt Textblöcke sonst linksbündig */
.htk-schnuppern .htk-fuss a { margin: 0 8px; white-space: nowrap; }

/* Formular: Grundlagen */
.htk-schnuppern .wpcf7 input[type="text"],
.htk-schnuppern .wpcf7 input[type="email"],
.htk-schnuppern .wpcf7 input[type="tel"],
.htk-schnuppern .wpcf7 select,
.htk-schnuppern .wpcf7 textarea { font-size: 16px; min-height: 44px; }   /* 16px: kein Auto-Zoom auf iOS */
.htk-schnuppern .wpcf7-submit { min-height: 48px; }
.htk-schnuppern .htk-hinweis { font-size: 14px; opacity: .8; margin-top: 8px; }

/*
 * Angebots-Auswahl als zwei Karten (CF7-Checkbox-Tags mit class:htk-angebot-karte).
 * Die Checkbox bleibt technisch eine Checkbox (Feldname, Mail, Zähler unverändert); das
 * vorhandene Skript "angebot-exklusiv" macht die beiden gegenseitig ausschließend. Die Karte
 * zeigt einen runden Auswahlpunkt, damit die Entweder-oder-Wahl auf den ersten Blick klar ist.
 */
.htk-schnuppern .htk-angebot-karte .wpcf7-list-item { display: block; margin: 0 0 16px; }
.htk-schnuppern .htk-angebot-karte .wpcf7-list-item label {
    display: flex; align-items: center; gap: 16px; cursor: pointer;
    padding: 16px 20px; min-height: 0;
    border: 2px solid #d5dce4; border-radius: 8px; background: #fff;
    font-size: 20px; font-weight: 600; line-height: 1.35; color: #14213d;
    transition: border-color .15s, box-shadow .15s;
}
.htk-schnuppern .htk-angebot-karte .wpcf7-list-item-label { flex: 1 1 auto; }
.htk-schnuppern .htk-angebot-karte .wpcf7-list-item label:hover { border-color: #014a99; }
.htk-schnuppern .htk-angebot-karte input[type="checkbox"] {
    appearance: none; -webkit-appearance: none;
    flex: 0 0 auto; width: 26px; height: 26px; margin: 0;
    border: 2px solid #8a96a3; border-radius: 50%; background: #fff;
    position: relative; cursor: pointer;
}
.htk-schnuppern .htk-angebot-karte input[type="checkbox"]:checked {
    border-color: #014a99; background: #014a99;
    box-shadow: inset 0 0 0 4px #fff;
}
.htk-schnuppern .htk-angebot-karte input[type="checkbox"]:focus-visible { outline: 3px solid #97bf0d; outline-offset: 2px; }
.htk-schnuppern .htk-angebot-karte .wpcf7-list-item label:has(input:checked) {
    border-color: #014a99; box-shadow: 0 0 0 3px rgba(1, 74, 153, .15); background: #f3f7fc;
}

/* Bedingte Angebots-Gruppen (Termin + Eltern-Block) leicht eingerückt unter die Karte */
/* Die Termin-Gruppe hängt sich als unterer Teil an die gewählte Karte: gleicher Rahmen, unten abgerundet,
   kein Abstand — Karte + Termin + Schulführung wirken als ein Element (Entscheidung Owner 23.09.). */
.htk-schnuppern .wpcf7cf_group,
.htk-schnuppern [data-class="wpcf7cf_group"] {
    margin: 0 0 24px 0; padding: 16px 20px 8px;
    border: 2px solid #014a99; border-top: 0; border-radius: 0 0 8px 8px; background: #f3f7fc;
}
.htk-schnuppern p:has(.htk-angebot-karte input:checked) { margin-bottom: 0 !important; padding-bottom: 0 !important; }
.htk-schnuppern .htk-angebot-karte .wpcf7-list-item label:has(input:checked) {
    border-radius: 8px 8px 0 0; box-shadow: none; margin-bottom: 0;
}
.htk-schnuppern .htk-angebot-karte .wpcf7-list-item:has(input:checked) { margin-bottom: 0; }
.htk-schnuppern [data-class="wpcf7cf_group"] > p > label,
.htk-schnuppern [data-class="wpcf7cf_group"] > label { font-weight: 600; }
.htk-schnuppern [data-class="wpcf7cf_group"] select { width: 100%; max-width: 520px; font-size: 16px; min-height: 44px; }

/* Block "Schulführung für Eltern (optional)" innerhalb der Angebots-Gruppe (Plan 12 §L4) */
.htk-schnuppern .htk-eltern-option { margin: 8px 0 12px; padding: 14px 16px; background: #fff; border: 1px solid #d5dce4; border-radius: 8px; }
.htk-schnuppern .htk-eltern-option h4 { margin: 0 0 6px; font-size: 18px; font-weight: 700; color: #14213d; }
.htk-schnuppern .htk-eltern-option p { margin: 0 0 10px; font-size: 16px; line-height: 1.5; }
.htk-schnuppern .htk-eltern-option .wpcf7-list-item { margin: 0; }
.htk-schnuppern .htk-eltern-option .wpcf7-list-item label { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 17px; color: #14213d; }
.htk-schnuppern .htk-eltern-option .wpcf7-list-item-label,
.htk-schnuppern .htk-eltern-option .mit-schulfuehrung .wpcf7-list-item-label { color: #14213d !important; }
.htk-schnuppern .htk-eltern-option input[type="checkbox"] { width: 22px; height: 22px; margin: 0; accent-color: #014a99; }
.htk-schnuppern .htk-eltern-option p { margin: 0 0 8px; font-size: 14px; }
.htk-schnuppern .htk-eltern-option .wpcf7-list-item { margin: 0; }
.htk-schnuppern .htk-eltern-option .wpcf7-list-item label { display: flex; gap: 10px; align-items: flex-start; min-height: 44px; }
.htk-schnuppern .htk-eltern-option input[type="checkbox"] { width: 22px; height: 22px; margin-top: 2px; }

/* Danke-Seite: typspezifische Blöcke (WPBakery-Zeilen mit Klasse htk-nur-2tage / htk-nur-1tag) */
body.htk-schnuppern-danke .htk-nur-2tage, body.htk-schnuppern-danke .htk-nur-1tag { display: none; }
body.htk-typ-2tage .htk-nur-2tage { display: block; }
body.htk-typ-1tag  .htk-nur-1tag  { display: block; }

/*
 * Plan 12 §M2 (2026-09-24): FontAwesome-Ersatz auf den Kampagnenseiten.
 * Das Team-Showcase-Plugin lädt dort das komplette FontAwesome 6 (all.min.css + v4-shims + Webfonts,
 * ≈ 175 KB) für genau drei Icons. functions.php dequeued 'fontawesome'/'fontawesomev4' nur auf Landing-
 * und Danke-Seite; diese Regeln zeichnen die drei Icons als SVG-Maske in Textfarbe (FA Free 6.3.0,
 * Lizenz CC BY 4.0). Taucht auf den Seiten ein weiteres fa-Icon auf, hier ergänzen (svgs/… im Child-Theme).
 */
.htk-schnuppern .fa { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em;
    background-color: currentColor; -webkit-mask: var(--htk-fa) center / contain no-repeat; mask: var(--htk-fa) center / contain no-repeat;
    font-style: normal; }
.htk-schnuppern .fa::before { content: none !important; }
.htk-schnuppern .fa.fa-phone { --htk-fa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M164.9 24.6c-7.7-18.6-28-28.5-47.4-23.2l-88 24C12.1 30.2 0 46 0 64C0 311.4 200.6 512 448 512c18 0 33.8-12.1 38.6-29.5l24-88c5.3-19.4-4.6-39.7-23.2-47.4l-96-40c-16.3-6.8-35.2-2.1-46.3 11.6L304.7 368C234.3 334.7 177.3 277.7 144 207.3L193.3 167c13.7-11.2 18.4-30 11.6-46.3l-40-96z'/%3E%3C/svg%3E"); }
.htk-schnuppern .fa.fa-envelope-o { --htk-fa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M64 112c-8.8 0-16 7.2-16 16v22.1L220.5 291.7c20.7 17 50.4 17 71.1 0L464 150.1V128c0-8.8-7.2-16-16-16H64zM48 212.2V384c0 8.8 7.2 16 16 16H448c8.8 0 16-7.2 16-16V212.2L322 328.8c-38.4 31.5-93.7 31.5-132 0L48 212.2zM0 128C0 92.7 28.7 64 64 64H448c35.3 0 64 28.7 64 64V384c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V128z'/%3E%3C/svg%3E"); }
.htk-schnuppern .fa.fa-info { --htk-fa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 192 512'%3E%3Cpath d='M48 80a48 48 0 1 1 96 0A48 48 0 1 1 48 80zM0 224c0-17.7 14.3-32 32-32H96c17.7 0 32 14.3 32 32V448h32c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H64V256H32c-17.7 0-32-14.3-32-32z'/%3E%3C/svg%3E"); }