/* av-gratis-kurs.css — Karte 1931 (14.11.2026): Gratis-Kurs APL-Basis nach Martins Entwurf
   (design/bilder/orig/k1931/image_20261114_084849.jpg). Eingebunden per <link> aus build_pages.py::gk_assets(). */

/* ── Kopf: Bild rechts, weißer Verlauf links (im Bild), Text darüber ── */
.av-gk-kopf .uk-container { max-width: none; padding-left: 0; padding-right: 0; }
/* das Theme gibt der ersten Sektion 70 px Abstand oben (auch bei padding remove) — hier soll das Bild direkt unter dem Kopf stehen */
section.av-gk-kopf.uk-section { padding-top: 0 !important; padding-bottom: 0 !important; }
.av-gk-hero { position: relative; background: #FDF8F1; overflow: hidden; }
.av-gk-hero-bild img { display: block; width: 100%; height: auto; }
/* Karte 1933: Handy-Bild 900×827 in voller Höhe (ohne eigenes Seitenverhältnis nahm der Browser 16:9 und schnitt den Kopf ab) */
@media (max-width: 959px) { .av-gk-hero-bild img { aspect-ratio: 900 / 827; object-fit: cover; object-position: 50% 0; } }
.av-gk-hero-text { padding: 24px 20px 28px; }
.av-gk-h1 { margin: 0; font-size: clamp(30px, 4vw, 50px); line-height: 1.02; font-weight: 800; color: #1A2A6C;
  text-transform: uppercase; letter-spacing: -.01em; hyphens: manual; }
.av-gk-kicker { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: clamp(18px, 2vw, 24px);
  letter-spacing: .04em; color: #C2560C; font-weight: 700; }
.av-gk-kicker::before, .av-gk-kicker::after { content: ""; width: 34px; height: 2px; background: #E8731A; }
.av-gk-claim { margin: 14px 0 0; font-size: clamp(20px, 2.3vw, 30px); line-height: 1.2; font-weight: 700; color: #E8731A; }
.av-gk-sub { margin: 10px 0 0; font-size: clamp(18px, 1.8vw, 24px); font-weight: 700; color: #1A2A6C; }
.av-gk-fakten { margin: 10px 0 0; font-size: 16px; line-height: 1.5; color: #2B2F3A; max-width: 30em; }
.av-gk-knoepfe { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 22px; }
.av-gk-btn-rand.uk-button { border: 2px solid #E8731A; color: #B05A0A; background: #fff; border-radius: 8px; }
.av-gk-btn-rand.uk-button:hover { background: #FDF1E4; color: #7C3F05; }
@media (min-width: 960px) {
  .av-gk-hero { min-height: 500px; }
  .av-gk-hero-bild img { position: absolute; inset: 0; height: 100%; object-fit: cover; object-position: 70% 22%; }
  .av-gk-hero-text { position: relative; z-index: 1; max-width: 640px; padding: 34px 0 40px 44px; }
}
@media (min-width: 1400px) { .av-gk-hero-text { padding-left: calc((100vw - 1400px) / 2 + 44px); max-width: calc((100vw - 1400px) / 2 + 680px); } }

/* Leiste mit vier Kennzahlen */
.av-gk-leiste { list-style: none; margin: 0; padding: 18px 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 12px;
  background: #fff; border-bottom: 1px solid #F0E3D2; }
.av-gk-leiste li { display: flex; align-items: center; gap: 12px; margin: 0; }
.av-gk-leiste img { width: 40px; height: 40px; flex: none; }
.av-gk-leiste span { line-height: 1.25; color: #2B2F3A; }
.av-gk-leiste strong { display: block; color: #1A2A6C; font-size: 18px; }
@media (min-width: 960px) {
  .av-gk-leiste { grid-template-columns: repeat(4, 1fr); max-width: 1200px; margin: 0 auto; padding: 22px 30px; }
  .av-gk-leiste li { justify-content: center; }
  .av-gk-leiste li + li { border-left: 1px solid #F0E3D2; }
}

/* ── Videos ── */
.av-gk-video { margin: 0; }
.av-gk-video video { display: block; width: 100%; height: auto; border-radius: 12px; background: #1A2A6C;
  box-shadow: 0 8px 24px rgba(26, 42, 108, .18); }
.av-gk-h2 { color: #1A2A6C; }
.av-gk-checks li { margin-top: 8px; }

/* ── Kacheln „Das lernst Du in APL-Basis“ ── */
.av-gk-unterzeile { color: #5B6070; }
.av-gk-kacheln { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 640px) { .av-gk-kacheln { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .av-gk-kacheln { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
.av-gk-kachel { display: flex; align-items: center; gap: 16px; padding: 10px; background: #fff; border-radius: 12px;
  box-shadow: 0 4px 16px rgba(26, 42, 108, .08); color: inherit; text-decoration: none; transition: box-shadow .15s, transform .15s; }
.av-gk-kachel:hover { box-shadow: 0 8px 22px rgba(176, 90, 10, .18); transform: translateY(-2px); text-decoration: none; }
.av-gk-kachel img { width: 112px; height: 84px; object-fit: cover; border-radius: 8px; flex: none; }
.av-gk-kachel-text strong { display: block; font-size: 19px; color: #1A2A6C; line-height: 1.25; }
.av-gk-kachel-text span { display: block; margin-top: 4px; font-size: 15px; line-height: 1.4; color: #3A3F4C; }

/* ── Band „tiefer einsteigen“ ── */
.av-gk-tiefer { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 26px; padding: 22px 26px; border-radius: 14px;
  background: #FDF1E4; }
.av-gk-tiefer-icon { width: 56px; height: 56px; flex: none; }
.av-gk-tiefer-text { flex: 1 1 320px; }
.av-gk-tiefer-text h2 { margin: 0; font-size: 23px; color: #1A2A6C; }
.av-gk-tiefer-text p { margin: 4px 0 0; color: #3A3F4C; }
/* Karte 1933: als rechte Spalte neben „Dein erster Schritt“ — untereinander statt nebeneinander */
.av-gk-tiefer-spalte { flex-direction: column; align-items: flex-start; gap: 14px; padding: 28px 30px; }
.av-gk-tiefer-spalte .av-gk-tiefer-text { flex: none; }
.av-gk-tiefer-spalte .av-gk-tiefer-text h2 { font-size: 24px; }

/* ── Folgenliste ── */
.av-gk-sprung a { display: inline-block; margin: 4px 6px 4px 0; padding: 4px 12px; border-radius: 999px; background: #FDF1E4;
  color: #7C3F05; font-size: 15px; }
.av-gk-kapitel { display: flex; align-items: center; gap: 18px; scroll-margin-top: 90px; }
.av-gk-kapitel img { width: 96px; height: 72px; object-fit: cover; border-radius: 8px; flex: none; }
.av-gk-kapitel h2 { margin: 0; color: #1A2A6C; }
.av-gk-kapitel p { margin: 2px 0 0; color: #5B6070; }
.av-gk-hinweis { margin-top: 14px; padding: 10px 14px; border-left: 4px solid #E8731A; background: #FDF8F1; }
.av-gk-liste { list-style: none; margin: 18px 0 0; padding: 0; columns: 1; column-gap: 40px; }
@media (min-width: 960px) { .av-gk-liste { columns: 2; } }
.av-gk-liste li { break-inside: avoid; margin: 0; border-bottom: 1px solid #ECE4D8; }
.av-gk-liste li > a, .av-gk-liste li > span { display: flex; align-items: baseline; gap: 12px; padding: 9px 2px; color: #1A2A6C; }
.av-gk-liste li > a:hover { color: #B05A0A; text-decoration: none; }
.av-gk-zu > span { color: #6B7080 !important; }
.av-gk-nr { flex: none; min-width: 2.2em; font-weight: 800; color: #C2560C; }
.av-gk-zu .av-gk-nr { color: #9A8E80; }
.av-gk-titel { flex: 1; }
.av-gk-dauer, .av-gk-schloss { flex: none; font-size: 14px; color: #6B7080; white-space: nowrap; }
.av-gk-lehr { margin-top: 14px; font-size: 15px; }

/* ── Folge-Seite ── */
.av-gk-folge-h1 { color: #1A2A6C; }
/* Karte 1933 (Martin: Überschriften „APL-Basis: alle Folgen“ / „Folge n: …“ zu groß) — statt @av-h1-groesse (bis 3.05rem) */
.av-h1.av-gk-folge-h1 { font-size: clamp(1.55rem, 2.4vw, 2.1rem) !important; line-height: 1.2; }
.av-gk-lead { font-size: 17px; line-height: 1.6; color: #2B2F3A; }
.av-gk-meta { color: #5B6070; font-size: 15px; }

/* ── Paket 3b (Karte 1929, 14.11.2026): Sperre ab Folge 51 + Feedback-Formular ── */
.av-gk-frei .av-gk-schloss, .av-gk-frei .av-gk-nur-zu { display: none !important; }
.av-gk-sperre { position: relative; border-radius: 12px; overflow: hidden; background: #1A2A6C; aspect-ratio: 16 / 9;
  box-shadow: 0 8px 24px rgba(26, 42, 108, .18); }
.av-gk-sperre-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .2; filter: blur(4px); }
.av-gk-sperre-box { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 6px; padding: 18px; text-align: center; color: #fff; }
.av-gk-sperre-icon { color: #F4A259; }
.av-gk-sperre-titel { margin: 0; font-size: clamp(18px, 2.4vw, 26px); font-weight: 700; line-height: 1.25; color: #fff; }
.av-gk-sperre-text { margin: 0 0 8px; max-width: 30em; font-size: 15px; line-height: 1.45; color: #E9ECF5; }
@media (max-width: 639px) {
  .av-gk-sperre { aspect-ratio: auto; }
  .av-gk-sperre-box { padding: 26px 16px; }
  .av-gk-sperre-text { font-size: 14px; }
}
.av-gk-folgt { display: flex; align-items: center; gap: 16px; padding: 22px 24px; border-radius: 12px; background: #FDF1E4;
  color: #3A3F4C; }
.av-gk-folgt p { margin: 0; }
.av-gk-folgt [uk-icon] { color: #C2560C; flex: none; }

.av-gk-fb { background: #fff; border-radius: 14px; padding: 22px 20px; box-shadow: 0 4px 16px rgba(26, 42, 108, .08); }
@media (min-width: 960px) { .av-gk-fb { padding: 32px 38px; } }
.av-gk-fb-frage { border: 0; margin: 0 0 22px; padding: 0; min-width: 0; }
.av-gk-fb-frage legend, .av-gk-fb-label { display: block; margin-bottom: 8px; font-weight: 700; color: #1A2A6C; font-size: 17px; }
.av-gk-fb-hinweis { font-weight: 400; color: #5B6070; font-size: 14px; }
.av-gk-fb-pflicht { color: #C2560C; }
.av-gk-fb-optionen { display: flex; flex-wrap: wrap; gap: 8px 10px; }
.av-gk-fb-optionen label { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border: 1px solid #E3D6C4;
  border-radius: 999px; background: #FDF8F1; cursor: pointer; line-height: 1.3; }
.av-gk-fb-optionen label:has(input:checked) { border-color: #E8731A; background: #FDF1E4; }
.av-gk-fb-optionen input { margin: 0; }
.av-gk-fb-fehlt legend { color: #B3261E; }
.av-gk-fb-fehlt .av-gk-fb-optionen label { border-color: #E5A39E; }
.av-gk-fb-zwei { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 640px) { .av-gk-fb-zwei { grid-template-columns: 1fr 1fr; } }
.av-gk-fb-falle { position: absolute; left: -9999px; }
.av-gk-fb-ds { font-size: 14px; color: #5B6070; }
.av-gk-fb-info { margin: 10px 0 0; }
.av-gk-fb-danke, .av-gk-fb-schon { background: #fff; border-radius: 14px; padding: 26px; box-shadow: 0 4px 16px rgba(26, 42, 108, .08); }
.av-gk-fb-danke { text-align: center; }
.av-gk-fb-danke [uk-icon] { color: #2E8B57; }
.av-gk-fb-danke h2 { margin: 8px 0; color: #1A2A6C; }
.av-gk-fb-danke .av-gk-knoepfe { justify-content: center; }
.av-gk-fb-schon { margin-bottom: 16px; padding: 14px 18px; border-left: 4px solid #2E8B57; }
[hidden] { display: none !important; }

/* Karte 1934: Kopf der Folgenübersicht /gratis-kurs/folgen mit Martins Kopfbild (gleicher Aufbau wie .av-gk-hero oben) */
.av-gk-hero-folgen .av-crumb { margin-bottom: 10px; }
.av-gk-hero-folgen .av-gk-folge-h1 { margin: 0 0 12px; }
.av-gk-hero-folgen .av-gk-lead { margin: 0; }
.av-gk-hero-folgen .av-gk-sprung { margin: 14px 0 0; }
@media (min-width: 960px) {
  .av-gk-hero-folgen .av-gk-hero-bild img { object-position: 75% 30%; }
  .av-gk-hero-folgen .av-gk-hero-text { max-width: 600px; }
  .av-gk-hero-folgen .av-gk-sprung a { background: rgba(255, 255, 255, .85); }
}
@media (min-width: 1400px) { .av-gk-hero-folgen .av-gk-hero-text { max-width: calc((100vw - 1400px) / 2 + 640px); } }

/* Karte 1935 (14.11.2026): Passwort-Knopf/-Feld im Sperrbild und auf /freischalten, Termin-Sperre ab Folge 150 */
.av-gk-sperre.av-gk-vor-termin .av-gk-sperre-fb, .av-gk-sperre:not(.av-gk-vor-termin) .av-gk-sperre-termin { display: none; }
.av-gk-sperre-knoepfe { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.av-gk-btn-hell { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .7); border-radius: 500px; }
.av-gk-btn-hell:hover, .av-gk-btn-hell:focus { background: rgba(255, 255, 255, .12); color: #fff; }
.av-gk-pw { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; width: 100%; max-width: 420px; margin: 4px auto 0; }
.av-gk-pw .av-gk-pw-feld { flex: 1 1 180px; width: auto; border-radius: 500px; padding: 0 18px; }
.av-gk-pw .av-gk-pw-info { flex-basis: 100%; margin: 0; min-height: 0; font-size: 15px; }
.av-gk-pw-sperre .av-gk-pw-info { color: #fff; }
.av-gk-pw-sperre .av-gk-pw-fehler { color: #FFD2A8; font-weight: 700; }
.av-gk-pw-box { margin-bottom: 18px; padding: 16px 20px; background: #fff; border-radius: 14px; border-left: 4px solid #1A2A6C;
  box-shadow: 0 4px 16px rgba(26, 42, 108, .08); }
.av-gk-pw-box .av-gk-pw-frage { margin: 0 0 10px; }
.av-gk-pw-box .av-gk-pw { justify-content: flex-start; margin: 0; max-width: 520px; }
.av-gk-pw-box .av-gk-pw-fehler { color: #B3261E; font-weight: 700; }
.av-gk-pw-ok { margin: 0 0 10px; color: #1A2A6C; }
.av-gk-pw-ok [uk-icon] { color: #2E8B57; }
.av-gk-fb-pw { font-size: 18px; margin: 14px 0 4px; }
.av-gk-fb-pw-wert { font-size: 22px; letter-spacing: .04em; color: #C2560C; }
.av-gk-termin { flex: none; font-size: 13px; color: #8A5A1E; white-space: nowrap; }
.av-gk-hinweis-termin { border-left-color: #1A2A6C; background: #F2F4FA; }
@media (max-width: 639px) { .av-gk-sperre-knoepfe .uk-button { width: 100%; } }
@media (max-width: 639px) {
  .av-gk-liste li > a:has(.av-gk-termin) { flex-wrap: wrap; row-gap: 0; }
  .av-gk-liste .av-gk-termin { order: 10; flex-basis: 100%; padding-left: calc(2.2em + 12px); margin-top: -4px; }
}

/* Karte 1936 (14.11.2026): Kopf von /gratis-kurs/freischalten mit Martins Schlüssel-Bild — der Schlüssel bleibt immer sichtbar.
   Handy: rechter Ausschnitt 900×730 in voller Höhe; ab 960 px siehe Karte 1938 unten. */
.av-gk-hero-fs { background: #FCEFDF; }
@media (max-width: 959px) { .av-gk-hero-fs .av-gk-hero-bild img { aspect-ratio: 900 / 730; object-position: 50% 50%; } }
/* Karte 1938 (Martin 14.11. 17:15): Kopf am Desktop viel niedriger.
   Karte 1939 (Martin 14.11. 18:38): wie auf allen anderen Seiten — Bild randlos vom oberen bis zum unteren Rand des Kopfes,
   rechts bis an den Bildschirmrand, links weicher Übergang in den Hintergrund und teilweise unter dem Text (kein Rahmen,
   keine Rundung). Das Bild bleibt ganz sichtbar (16:9, Schlüssel frei); die Kopfhöhe ergibt sich aus der Bildbreite
   (--fs-bild) und bleibt damit niedrig (1920 px ≈ 430 px). Wird der Text höher, füllt das Bild per cover die Höhe. */
@media (min-width: 960px) {
  .av-gk-hero-fs { --fs-bild: clamp(480px, 40vw, 780px); min-height: calc(var(--fs-bild) * 9 / 16); display: flex;
    align-items: center; padding: 28px 0 28px 44px; }
  .av-gk-hero-fs .av-gk-hero-bild { position: absolute; top: 0; right: 0; bottom: 0; width: var(--fs-bild); }
  .av-gk-hero-fs .av-gk-hero-bild img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto;
    object-fit: cover; object-position: 30% 50%; }
  .av-gk-hero-fs .av-gk-hero-bild::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 45%; z-index: 1;
    background: linear-gradient(90deg, #FCEFDF 0%, rgba(252, 239, 223, .85) 25%, rgba(252, 239, 223, 0) 100%); }
  .av-gk-hero-fs .av-gk-hero-text { position: relative; z-index: 2; flex: none; max-width: calc(100% - var(--fs-bild) + 90px);
    padding: 0; }
}
@media (min-width: 1400px) { .av-gk-hero-fs { padding-left: calc((100vw - 1400px) / 2 + 44px); }
  .av-gk-hero-fs .av-gk-hero-text { max-width: min(640px, calc(100vw - (100vw - 1400px) / 2 - 44px - var(--fs-bild) + 90px)); } }