/* Öffentliche Formulare (Anmeldung, Newsletter, Absage) – im Stil der Webseite.
   Farben aus der Markenfarbe: --cta (Fläche), --on-cta (Schrift darauf), --brand-ink (grüne Schrift), --brand-tint (helle Fläche). */
@font-face { font-family: "Bricolage"; src: url("../fonts/bricolage-grotesque.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

body.public-page { font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; color: #111418; background: #f8f7f3; font-size: 16px; }
body.public-page.is-embed { background: transparent; }
.public .pubwrap { max-width: 760px; padding: 32px 16px 48px; }
.public.is-embed .pubwrap { padding: 0; }
.public .pubcard { border: 0; border-radius: 28px; padding: 40px; box-shadow: 0 1px 2px rgba(17, 20, 24, .05), 0 24px 60px -32px rgba(17, 20, 24, .35); }
.public.is-embed .pubcard { box-shadow: none; padding: 32px; border-radius: 24px; }
.public .pubcard h1 { font-family: "Bricolage", "Inter", sans-serif; font-weight: 800; font-size: clamp(1.8rem, 4vw, 2.4rem); letter-spacing: -0.03em; line-height: 1.05; margin-bottom: 8px; }
.public .pubcard .lead { font-size: 1.02rem; color: #4d535c; margin-bottom: 28px; max-width: 52ch; }
.public a { color: var(--brand-ink); }
/* Telefonnummern nie mitten in der Nummer umbrechen */
a[href^="tel:"] { white-space: nowrap; }
.public .skip { color: #fff; background: #111418; }
.public .notice { border-radius: 16px; margin-bottom: 22px; }

/* Felder */
.public .field > label, .public .field .label { font-weight: 600; font-size: .92rem; color: #111418; }
.public .field { margin-top: 16px; }
.public .field:first-of-type { margin-top: 0; }
.public .field-row { gap: 14px; margin-top: 16px; }
.public .field-row .field { margin-top: 0; }
.public .input, .public .textarea, .public .select { border: 1.5px solid #8a9099; border-radius: 14px; padding: 13px 15px; font-size: 1rem; background: #fff; transition: border-color .15s, box-shadow .15s; }
.public .input:hover, .public .textarea:hover { border-color: #5a616b; }
.public .pubcard .input:focus, .public .pubcard .textarea:focus, .public .pubcard .select:focus { border-color: var(--brand-ink); box-shadow: 0 0 0 4px var(--brand-tint); outline: none; }
.public .help { color: #5a616b; font-size: .84rem; margin-top: 6px; }
.public .opt { font-weight: 400; color: #5a616b; }
.public .req { color: #b3261e; }
.public .check { gap: 12px; font-size: .92rem; line-height: 1.5; color: #2b3038; }
.public .check input[type=checkbox] { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--brand-ink); flex: none; }

/* Schritte */
.step { border: 0; padding: 0; margin: 0; min-width: 0; }
.step__sep { border: 0; border-top: 1.5px dashed #dcdfe3; margin: 32px 0 28px; }
.step__title { float: left; width: 100%; display: flex; align-items: center; gap: 12px; font-family: "Bricolage", "Inter", sans-serif; font-weight: 700; font-size: 1.3rem; letter-spacing: -0.015em; margin-bottom: 16px; padding: 0; }
.step__num { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--cta); color: var(--on-cta); font-family: "Inter", sans-serif; font-size: .95rem; font-weight: 800; flex: none; }
.step__title .req { margin-left: -6px; }
.step__title + * { clear: both; }
.step > .field:first-of-type, .step > .kw, .step > .kw__chosen { margin-top: 0; clear: both; }

/* Kurswahl: ein Block mit Suche, Gruppen links und Kursen rechts */
.kw { border: 1.5px solid #8a9099; border-radius: 20px; overflow: hidden; background: #fff; }
.step.has-error .kw { border-color: #b3261e; }
.kw__head { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 16px; border-bottom: 1.5px solid #eceee9; }
.kw__search { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; }
.kw__search svg { width: 19px; height: 19px; fill: none; stroke: #5a616b; stroke-width: 2.2; stroke-linecap: round; flex: none; }
.kw__search input { flex: 1; min-width: 0; border: 0; outline: none; font: inherit; font-size: 1rem; padding: 10px 0; background: none; color: #111418; }
.kw__search input::placeholder { color: #6b7179; }
.kw:focus-within { border-color: var(--brand-ink); box-shadow: 0 0 0 4px var(--brand-tint); }
.kw__free { display: inline-flex; align-items: center; gap: 9px; padding: 8px 12px; border-radius: 999px; background: #f4f5f2; font-size: .86rem; font-weight: 600; cursor: pointer; white-space: nowrap; flex: none; }
.kw__free input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.kw__switch { position: relative; width: 34px; height: 20px; border-radius: 999px; background: #767b83; transition: background .15s; flex: none; }
.kw__switch::after { content: ""; position: absolute; left: 3px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .18s; }
.kw__free input:checked + .kw__switch { background: var(--brand-ink); }
.kw__free input:checked + .kw__switch::after { transform: translateX(14px); }
.kw__free:has(input:focus-visible) { outline: 3px solid #111418; outline-offset: 2px; }
.kw__body { display: grid; grid-template-columns: 236px minmax(0, 1fr); height: clamp(400px, calc(var(--cats, 10) * 33px + 24px), 500px); }
/* Schatten am Rand zeigen, dass es weitergeht (verschwinden am Ende der Liste) */
.kw__cats, .kw__list { --sb: #fff; background:
    linear-gradient(var(--sb) 30%, transparent) top / 100% 36px no-repeat local,
    linear-gradient(transparent, var(--sb) 70%) bottom / 100% 36px no-repeat local,
    radial-gradient(farthest-side at 50% 0, rgba(17, 20, 24, .22), transparent) top / 100% 14px no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%, rgba(17, 20, 24, .22), transparent) bottom / 100% 14px no-repeat scroll,
    var(--sb); }
.kw__cats { --sb: #f8f7f3; }
.kw__cats { overflow-y: auto; padding: 6px; border-right: 1.5px solid #eceee9; display: flex; flex-direction: column; gap: 2px; scrollbar-width: thin; }
.kw__cat { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; text-align: left; border: 0; background: none; border-radius: 9px; padding: 6px 10px; font: inherit; font-size: .86rem; font-weight: 550; color: #2b3038; cursor: pointer; line-height: 1.25; }
.kw__cat small { font-size: .75rem; font-weight: 700; color: #5a616b; background: #fff; border-radius: 999px; padding: 1px 8px; flex: none; }
.kw__cat:hover { background: #eeefea; }
.kw__cat.is-on { background: #111418; color: #fff; }
.kw__cat.is-on small { background: rgba(255, 255, 255, .18); color: #fff; }
.kw__list { overflow-y: auto; padding: 6px 10px 12px; overscroll-behavior: contain; scrollbar-width: thin; }
.kw__count { margin: 6px 6px 2px; font-size: .78rem; font-weight: 700; color: #5a616b; text-transform: uppercase; letter-spacing: .06em; }
.kw__group-title { position: sticky; top: -6px; z-index: 1; margin: 0; padding: 12px 6px 6px; background: #fff; font-family: "Bricolage", "Inter", sans-serif; font-weight: 700; font-size: 1rem; color: #111418; }
.kw__item { position: relative; display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 14px; cursor: pointer; transition: background .12s; }
.kw__item:hover { background: #f4f5f2; }
.kw__item input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.kw__dot { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #7d838b; flex: none; display: grid; place-items: center; transition: border-color .12s, background .12s; }
.kw__dot::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--on-cta); transform: scale(0); transition: transform .15s; }
.kw__item input:checked ~ .kw__dot { border-color: var(--cta); background: var(--cta); }
.kw__item input:checked ~ .kw__dot::after { transform: scale(1); }
.kw__item:has(input:checked) { background: var(--brand-tint); }
.kw__item:has(input:focus-visible) { outline: 3px solid #111418; outline-offset: -3px; }
.kw__text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.kw__title { font-weight: 650; font-size: .97rem; line-height: 1.3; }
.kw__when { font-size: .85rem; color: #5a616b; overflow-wrap: anywhere; }
.kw__facts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.kw__fact { font-size: .76rem; font-weight: 600; line-height: 1.45; padding: 1px 8px; border-radius: 999px; background: #fff; border: 1px solid #d9dbd6; color: #2b3038; white-space: nowrap; }
.kw__fact--age { color: var(--brand-ink); border-color: currentColor; }
.kw__desc { font-size: .82rem; color: #5a616b; margin-top: 2px; }
.kw__tag { flex: none; font-size: .72rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: #fff0cf; color: #7a4800; white-space: nowrap; }
.kw__tag--full { background: #efefed; color: #4f5359; }
.kw__item.is-full .kw__title { color: #5a616b; }
.kw__more { position: sticky; bottom: 6px; z-index: 2; display: flex; align-items: center; gap: 6px; margin: 8px auto 0; padding: 7px 14px 7px 11px; border: 0; border-radius: 999px;
  background: #111418; color: #fff; font: inherit; font-size: .82rem; font-weight: 650; cursor: pointer; box-shadow: 0 8px 20px -8px rgba(17, 20, 24, .6); animation: kw-bob 1.6s ease-in-out infinite; }
.kw__more svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.kw__more:hover { background: var(--brand-ink); }
@keyframes kw-bob { 50% { transform: translateY(3px); } }
.kw__empty { text-align: center; color: #5a616b; padding: 40px 12px; margin: 0; }
.kw [hidden], .step [hidden] { display: none !important; }

.kw__chosen { display: flex; align-items: center; gap: 16px; padding: 16px 18px; border-radius: 20px; background: var(--brand-tint); border: 1.5px solid var(--brand-ink); }
.kw__chosen-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.kw__chosen-cat { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--brand-ink); }
.kw__chosen-body .kw__title { font-family: "Bricolage", "Inter", sans-serif; font-size: 1.2rem; font-weight: 700; }
.kw__chosen-body .kw__when { color: #3d434b; }
.kw__chosen-body .kw__tag { align-self: flex-start; margin-top: 6px; }
.kw__change { flex: none; border: 1.5px solid #111418; background: #fff; color: #111418; border-radius: 999px; padding: 8px 16px; font: inherit; font-weight: 650; font-size: .9rem; cursor: pointer; }
.kw__change:hover { background: #111418; color: #fff; }
.public .coursehint { border-radius: 12px; margin-top: 10px; }

@media (max-width: 620px) {
  .kw__head { gap: 6px; padding: 6px 6px 6px 12px; }
  .kw__search input { font-size: 16px; }  /* 16px: iPhone zoomt sonst beim Antippen hinein */
  .kw__free { padding: 7px 10px; font-size: .8rem; gap: 7px; }
  .kw__free .kw__switch { width: 30px; height: 18px; }
  .kw__free .kw__switch::after { width: 12px; height: 12px; }
  .kw__free input:checked + .kw__switch::after { transform: translateX(12px); }
  .kw__body { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); height: 400px; }
  .kw__cats { flex-direction: row; overflow-x: auto; overflow-y: hidden; border-right: 0; border-bottom: 1.5px solid #eceee9; padding: 8px; gap: 6px; background:
      linear-gradient(90deg, var(--sb) 30%, transparent) left / 36px 100% no-repeat local,
      linear-gradient(90deg, transparent, var(--sb) 70%) right / 36px 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, rgba(17, 20, 24, .22), transparent) left / 14px 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, rgba(17, 20, 24, .22), transparent) right / 14px 100% no-repeat scroll,
      var(--sb); }
  .kw__cat { width: auto; flex: none; white-space: nowrap; border-radius: 999px; background: #fff; border: 1.5px solid #e3e5e1; padding: 6px 12px; }
  .kw__cat.is-on { border-color: #111418; }
  .kw__chosen { flex-wrap: wrap; }
}

/* Abschluss */
.regform__end { margin-top: 34px; padding-top: 28px; border-top: 1.5px dashed #e3e5e1; display: grid; gap: 14px; }
.regform__submit { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; margin-top: 10px; padding: 17px 24px; border: 0; border-radius: 999px;
  background: var(--cta); color: var(--on-cta); font: inherit; font-weight: 750; font-size: 1.08rem; cursor: pointer; transition: transform .15s, background .15s, color .15s, box-shadow .15s; }
.regform__submit svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.regform__submit:hover { background: #111418; color: #fff; transform: translateY(-1px); box-shadow: 0 14px 30px -16px rgba(17, 20, 24, .5); }
.regform__submit:hover svg { transform: translateX(3px); }
.regform__submit:focus-visible { outline: 3px solid #111418; outline-offset: 3px; }
.regform__note { text-align: center; color: #5a616b; font-size: .84rem; margin: 0; }

/* Newsletter, Danke, Absage im gleichen Stil */
.public .btn--brand { background: var(--cta); border-color: var(--cta); color: var(--on-cta); border-radius: 999px; font-weight: 700; padding: 14px 30px; }
.public .btn--brand:hover { background: #111418; border-color: #111418; color: #fff; filter: none; }
.public .thanks .tick { background: var(--brand-tint); color: var(--brand-ink); }
.public .form-actions .btn { border-radius: 999px; }

@media (max-width: 560px) {
  .public .pubcard, .public.is-embed .pubcard { padding: 24px 18px; border-radius: 22px; }
  .step__title { font-size: 1.15rem; }
}
@media (prefers-reduced-motion: reduce) { .public * { transition: none !important; } }