/* ==========================================================================
   Place To Be — Marken-Stylesheet
   Selbst gehostete Schriften (Grandstander, Nunito), Design-Tokens (--ptb-*),
   Markenmodus-Mapping auf die Cheer-up-Theme-Variablen und die
   Place-To-Be-Komponenten (.ptb-*). Wird nur geladen, wenn der Markenmodus
   aktiv ist (body.brand-placetobe) — theme.css bleibt unangetastet.
   ========================================================================== */

/* ==========================================================================
   1. Schriften: Grandstander (Display) + Nunito (Body), OFL, self-hosted
   Quelle: Google Fonts CSS2 (Grandstander 400-800, Nunito 400-800),
   Subsets latin + latin-ext. Lizenztexte: OFL-grandstander.txt, OFL-nunito.txt
   im selben Ordner wie die woff2-Dateien (assets/fonts/placetobe/).
   Google liefert beide Familien als Variable Fonts: pro Subset ist die
   Datei fuer alle Schnitte 400-800 identisch (bestaetigt per md5 + fvar-Tabelle
   via fonttools: wght-Achse deckt 400-800 ab), daher 4 Dateien mit
   font-weight: 400 800 (Bereich) statt 20 gewichts-doppelten Kopien.
   ========================================================================== */
@font-face {
  font-family: 'Grandstander';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/placetobe/grandstander-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Grandstander';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/placetobe/grandstander-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/placetobe/nunito-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/placetobe/nunito-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   2. Design-Tokens: Farben
   Quelle: docs/design/place-to-be/tokens/colors.css (unveraendert uebernommen)
   ========================================================================== */
:root{
  --ptb-sand-50:#FAF9F8;  --ptb-sand-100:#F4F3F1; --ptb-sand-200:#EDECEA; --ptb-sand-300:#E2DFDB; --ptb-sand-400:#CFC9C3;
  --ptb-taupe-200:#DED5D1; --ptb-taupe-300:#C7BAB4; --ptb-taupe-500:#A89A93; --ptb-taupe-700:#8A7B74; --ptb-taupe-900:#5E534E;
  --ptb-ink-900:#1F1D1C; --ptb-ink-700:#453F3C; --ptb-ink-500:#6E635E;
  --ptb-aqua-100:#E4F4F8; --ptb-aqua-200:#C7E9F0; --ptb-aqua-300:#A8D9E4; --ptb-aqua-500:#64CADE; --ptb-aqua-700:#2C93A9; --ptb-aqua-900:#1C6B7C;
  --ptb-lilac-100:#F1ECF8; --ptb-lilac-200:#E2D8F0; --ptb-lilac-300:#D6C7E6; --ptb-lilac-500:#B79FD8; --ptb-lilac-700:#7C5FA6; --ptb-lilac-900:#554075;
  --ptb-mint-100:#E3F7EF; --ptb-mint-200:#C6F0E0; --ptb-mint-300:#9CE4C9; --ptb-mint-500:#5AD4AF; --ptb-mint-700:#2A8F72; --ptb-mint-900:#1C6653;
  --ptb-peach-100:#FCEDE4; --ptb-peach-200:#F8DAC8; --ptb-peach-300:#F6CDB4; --ptb-peach-500:#EEB999; --ptb-peach-700:#C9764A; --ptb-peach-900:#8F5333;
  /* blush-900 ist im Kit nicht enthalten und hier ergaenzt: die 700er-Stufe
     erreicht als Fehlerfarbe auf Weiss und Sand keine 4,5:1. */
  --ptb-blush-100:#FDECEC; --ptb-blush-300:#FFCCCB; --ptb-blush-500:#F79AA0; --ptb-blush-700:#C75F6B; --ptb-blush-900:#8E3743;
  --ptb-sage-100:#EDF3EE; --ptb-sage-300:#C2D5C4; --ptb-sage-500:#9BB49F; --ptb-sage-700:#5F7A63; --ptb-sage-900:#42563F;
  --ptb-butter-100:#FAF4E0; --ptb-butter-300:#E8D8AE; --ptb-butter-500:#D9BD7C;
  --ptb-wood-200:#EADCC6; --ptb-wood-400:#D2B48C; --ptb-wood-600:#A3805A;

  --ptb-surface-page:var(--ptb-sand-200);
  --ptb-surface-card:#FFFFFF;
  --ptb-surface-muted:var(--ptb-sand-100);
  --ptb-surface-warm:#FAF7F2;
  --ptb-surface-ink:var(--ptb-taupe-900);
  --ptb-surface-overlay:rgba(94,83,78,.38);

  --ptb-text-body:var(--ptb-ink-900);
  --ptb-text-muted:var(--ptb-ink-500);
  /* Flaechentext in Markenfarbe: taupe-900 (7,4:1 auf Weiss). Display-Groessen
     ab 24 px holen sich taupe-700 weiter unten einzeln zurueck. */
  --ptb-text-brand:var(--ptb-taupe-900);
  --ptb-text-brand-soft:var(--ptb-taupe-500);
  --ptb-text-inverse:#FFFFFF;
  --ptb-text-link:var(--ptb-aqua-900);
  --ptb-text-link-hover:var(--ptb-taupe-900);

  --ptb-border-soft:var(--ptb-sand-300);
  --ptb-border-strong:var(--ptb-taupe-300);
  --ptb-border-focus:var(--ptb-aqua-700);

  /* Saeulen-Akzente: je Angebot einer */
  --ptb-accent-bewegung:var(--ptb-aqua-500);     --ptb-tint-bewegung:var(--ptb-aqua-100);     --ptb-ink-bewegung:var(--ptb-aqua-900);
  --ptb-accent-entwicklung:var(--ptb-lilac-500); --ptb-tint-entwicklung:var(--ptb-lilac-100); --ptb-ink-entwicklung:var(--ptb-lilac-900);
  --ptb-accent-gemeinschaft:var(--ptb-mint-500); --ptb-tint-gemeinschaft:var(--ptb-mint-100); --ptb-ink-gemeinschaft:var(--ptb-mint-900);
  --ptb-accent-begegnung:var(--ptb-peach-500);   --ptb-tint-begegnung:var(--ptb-peach-100);   --ptb-ink-begegnung:var(--ptb-peach-900);

  --ptb-action-primary:var(--ptb-taupe-900);
  --ptb-action-primary-hover:var(--ptb-ink-700);
  --ptb-action-secondary:var(--ptb-aqua-700);
  --ptb-action-secondary-hover:var(--ptb-aqua-900);

  /* Statusfarben tragen Text auf dem jeweiligen 100er-Tint (Pillen, Badges,
     Formfehler): dafuer reicht die 700er-Stufe nicht, daher durchgaengig 900. */
  --ptb-status-success:var(--ptb-mint-900); --ptb-status-success-tint:var(--ptb-mint-100);
  --ptb-status-info:var(--ptb-aqua-900);    --ptb-status-info-tint:var(--ptb-aqua-100);
  --ptb-status-warning:var(--ptb-peach-900);--ptb-status-warning-tint:var(--ptb-peach-100);
  --ptb-status-error:var(--ptb-blush-900);  --ptb-status-error-tint:var(--ptb-blush-100);
}

/* ==========================================================================
   3. Design-Tokens: Skala (Typografie, Abstaende, Radien, Schatten, Motion)
   Quelle: docs/design/place-to-be/tokens/scale.css (unveraendert uebernommen)
   ========================================================================== */
:root{
  --ptb-font-display:"Grandstander","Comic Sans MS",system-ui,sans-serif;
  --ptb-font-body:"Nunito","Avenir Next",system-ui,sans-serif;

  --ptb-text-display-xl:72px; --ptb-text-display-lg:56px; --ptb-text-display-md:40px; --ptb-text-display-sm:28px;
  --ptb-text-heading-lg:24px; --ptb-text-heading-md:20px; --ptb-text-heading-sm:17px;
  --ptb-text-body-lg:19px; --ptb-text-body-md:17px; --ptb-text-body-sm:15px;
  --ptb-text-caption:13px; --ptb-text-overline:12px;
  --ptb-leading-tight:1.08; --ptb-leading-display:1.15; --ptb-leading-snug:1.3; --ptb-leading-body:1.55; --ptb-leading-loose:1.75;
  --ptb-weight-regular:400; --ptb-weight-medium:500; --ptb-weight-semibold:600; --ptb-weight-bold:700; --ptb-weight-display:700;
  --ptb-tracking-display:0.005em; --ptb-tracking-overline:0.14em;

  --ptb-space-1:4px; --ptb-space-2:8px; --ptb-space-3:12px; --ptb-space-4:16px; --ptb-space-5:20px;
  --ptb-space-6:24px; --ptb-space-7:32px; --ptb-space-8:40px; --ptb-space-9:48px; --ptb-space-10:64px; --ptb-space-11:80px; --ptb-space-12:96px;
  --ptb-page-gutter:24px; --ptb-page-gutter-lg:48px;
  --ptb-section-y:80px; --ptb-section-y-lg:120px;
  --ptb-content-max:1180px; --ptb-prose-max:640px;
  --ptb-control-h-sm:36px; --ptb-control-h-md:44px; --ptb-control-h-lg:54px;

  --ptb-radius-xs:6px; --ptb-radius-sm:10px; --ptb-radius-md:16px; --ptb-radius-lg:24px; --ptb-radius-xl:32px; --ptb-radius-2xl:44px;
  --ptb-radius-pill:999px;
  --ptb-radius-blob:62% 38% 46% 54% / 55% 42% 58% 45%;
  --ptb-radius-blob-alt:44% 56% 61% 39% / 48% 62% 38% 52%;

  --ptb-shadow-soft:0 2px 8px rgba(94,83,78,.06);
  --ptb-shadow-card:0 8px 24px -8px rgba(94,83,78,.14);
  --ptb-shadow-lift:0 16px 40px -12px rgba(94,83,78,.20);
  --ptb-shadow-inset-top:inset 0 1px 0 rgba(255,255,255,.7);
  --ptb-shadow-focus:0 0 0 3px var(--ptb-aqua-200);
  /* Aeusserer Ring in aqua-900: 6,1:1 auf Weiss, 5,2:1 auf Sand (Soll 3:1). */
  --ptb-ring-focus:0 0 0 2px var(--ptb-surface-card),0 0 0 4px var(--ptb-aqua-900);

  --ptb-dur-fast:120ms; --ptb-dur-base:220ms; --ptb-dur-slow:420ms; --ptb-dur-wash:900ms;
  --ptb-ease-soft:cubic-bezier(.22,.61,.36,1); --ptb-ease-in-out:cubic-bezier(.4,0,.2,1); --ptb-ease-settle:cubic-bezier(.34,1.26,.64,1);
  --ptb-press-scale:0.98; --ptb-hover-lift:-2px;
}

/* ==========================================================================
   4. Markenmodus: Mapping auf bestehende Theme-Variablen (theme.css :root)
   Aktiv nur unter body.brand-placetobe, damit Athletics4Kids-Seiten
   pixelgleich bleiben. theme.css selbst wird nicht veraendert.
   ========================================================================== */
body.brand-placetobe {
  --bg: var(--ptb-surface-page);
  --bg-alt: var(--ptb-surface-warm);
  --surface: var(--ptb-surface-card);
  --surface-soft: var(--ptb-surface-muted);
  --surface-mint: var(--ptb-tint-gemeinschaft);
  --surface-sky: var(--ptb-tint-bewegung);
  --surface-peach: var(--ptb-tint-begegnung);
  --surface-yellow: var(--ptb-butter-100);
  --text: var(--ptb-text-body);
  --text-soft: var(--ptb-text-muted);
  --line: var(--ptb-border-soft);
  --accent: var(--ptb-action-secondary);
  --accent-dark: var(--ptb-action-secondary-hover);
  --accent-warm: var(--ptb-peach-700);
  --accent-warm-dark: var(--ptb-peach-900);
  --color-primary: var(--ptb-taupe-700);
  --color-text: var(--ptb-text-body);
  --color-on-primary: var(--ptb-text-inverse);
  --shadow-soft: var(--ptb-shadow-soft);
  --shadow-card: var(--ptb-shadow-card);
  --radius-xl: var(--ptb-radius-2xl);
  --radius-lg: var(--ptb-radius-xl);
  --radius-md: var(--ptb-radius-lg);
  --radius-sm: var(--ptb-radius-md);
  --shell: var(--ptb-content-max);
  font-family: var(--ptb-font-body);
  background: var(--bg);
  color: var(--text);
}

body.brand-placetobe h1,
body.brand-placetobe h2,
body.brand-placetobe h3 {
  font-family: var(--ptb-font-display);
  color: var(--ptb-text-brand);
}

/* ==========================================================================
   5. Formulare im Markenmodus
   Restyling der bestehenden Formular-Klassen (Templates + form-validation.js):
   .cuyl-form, .form-field, .form-field__error, .cuyl-form__consent,
   .form-honeypot. theme.css bleibt fuer den Nicht-Markenmodus unveraendert.
   ========================================================================== */
body.brand-placetobe .cuyl-form {
  display: grid;
  gap: var(--ptb-space-4);
  font-family: var(--ptb-font-body);
}

body.brand-placetobe .form-field {
  display: grid;
  gap: var(--ptb-space-2);
  /* Issues #2/#3 (Plan E12, Spec §18): eigene Absicherung gegen die
     .ptb-row-Stretch (siehe dort) - Label/Input/Hinweis/Fehler bleiben auch
     dann bei ihrer natuerlichen Hoehe, wenn dieses form-field (z. B. durch
     ein Nachbarfeld mit Hinweistext) hoeher waere als sein eigener Inhalt.
     Ohne das wuerde die uebrige Leerhoehe auf die Grid-Zeilen verteilt und
     das Input sichtbar aufgezogen. */
  align-items: start;
}

body.brand-placetobe .prose label,
body.brand-placetobe .cuyl-form label,
body.brand-placetobe .form-field label {
  display: block;
  margin-bottom: 0;
  color: var(--ptb-text-body);
  font-size: var(--ptb-text-body-sm);
  font-weight: var(--ptb-weight-bold);
}

body.brand-placetobe .cuyl-form input[type="text"],
body.brand-placetobe .cuyl-form input[type="email"],
body.brand-placetobe .cuyl-form input[type="tel"],
body.brand-placetobe .cuyl-form input[type="number"],
body.brand-placetobe .cuyl-form input[type="date"],
body.brand-placetobe .cuyl-form select,
body.brand-placetobe .form-field input[type="text"],
body.brand-placetobe .form-field input[type="email"],
body.brand-placetobe .form-field input[type="tel"],
body.brand-placetobe .form-field input[type="number"],
body.brand-placetobe .form-field input[type="date"],
body.brand-placetobe .form-field select {
  width: 100%;
  min-height: var(--ptb-control-h-md);
  padding: 0 var(--ptb-space-5);
  border: 1.5px solid var(--ptb-border-soft);
  border-radius: var(--ptb-radius-pill);
  background: var(--ptb-surface-card);
  color: var(--ptb-text-body);
  font-family: var(--ptb-font-body);
  font-size: var(--ptb-text-body-md);
  transition: border-color var(--ptb-dur-base) var(--ptb-ease-soft), box-shadow var(--ptb-dur-base) var(--ptb-ease-soft), background-color var(--ptb-dur-base) var(--ptb-ease-soft);
}

body.brand-placetobe .cuyl-form textarea,
body.brand-placetobe .form-field textarea {
  width: 100%;
  min-height: 136px;
  padding: var(--ptb-space-4) var(--ptb-space-5);
  border: 1.5px solid var(--ptb-border-soft);
  border-radius: var(--ptb-radius-md);
  background: var(--ptb-surface-card);
  color: var(--ptb-text-body);
  font-family: var(--ptb-font-body);
  font-size: var(--ptb-text-body-md);
  resize: vertical;
  transition: border-color var(--ptb-dur-base) var(--ptb-ease-soft), box-shadow var(--ptb-dur-base) var(--ptb-ease-soft);
}

body.brand-placetobe .cuyl-form input::placeholder,
body.brand-placetobe .cuyl-form textarea::placeholder,
body.brand-placetobe .form-field input::placeholder,
body.brand-placetobe .form-field textarea::placeholder {
  color: var(--ptb-text-muted);
}

/*
 * :not([type="checkbox"]):not([type="radio"]) (Fix-Runde 2, Ziffer 3): ohne
 * die Ausnahme traf diese Regel auch die Checkboxen im Formular (input:focus
 * ohne Typ-Einschraenkung) und ueberschrieb mit ihrem `background:
 * var(--ptb-surface-card)` (weiss) die Ankreuz-Farbe aus `.ptb-check:checked`
 * - hoehere Spezifitaet gewinnt unabhaengig von der Regelreihenfolge. Sichtbar
 * wurde das genau dann, wenn eine Checkbox angekreuzt UND fokussiert war (z. B.
 * direkt nach dem Anklicken): das Haekchen (`.ptb-check:checked::after`)
 * blieb gezeichnet, aber auf weissem statt dunklem Grund unsichtbar. Checkboxen
 * haben mit `.ptb-check:focus-visible` (Abschnitt 14) ohnehin einen eigenen
 * Fokusring, brauchen also weder Rahmenfarbe noch Hintergrund von hier.
 */
body.brand-placetobe .cuyl-form input:focus:not([type="checkbox"]):not([type="radio"]),
body.brand-placetobe .cuyl-form select:focus,
body.brand-placetobe .cuyl-form textarea:focus,
body.brand-placetobe .form-field input:focus:not([type="checkbox"]):not([type="radio"]),
body.brand-placetobe .form-field select:focus,
body.brand-placetobe .form-field textarea:focus {
  outline: none;
  border-color: var(--ptb-border-focus);
  box-shadow: var(--ptb-shadow-focus);
  background: var(--ptb-surface-card);
}

body.brand-placetobe .form-field__error {
  display: block;
  margin: var(--ptb-space-2) 0 0;
  padding-left: 22px;
  position: relative;
  color: var(--ptb-status-error);
  font-size: var(--ptb-text-body-sm);
  font-weight: var(--ptb-weight-bold);
  line-height: var(--ptb-leading-snug);
}

body.brand-placetobe .form-field__error::before {
  content: "!";
  position: absolute;
  left: 0;
  top: 0.12em;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--ptb-status-error);
  color: var(--ptb-text-inverse);
  font-size: 0.7rem;
  font-weight: var(--ptb-weight-bold);
  line-height: 16px;
  text-align: center;
}

body.brand-placetobe .form-field.is-invalid input,
body.brand-placetobe .form-field.is-invalid select,
body.brand-placetobe .form-field.is-invalid textarea,
body.brand-placetobe .cuyl-form [aria-invalid="true"] {
  border-color: var(--ptb-status-error);
  background: var(--ptb-status-error-tint);
}

body.brand-placetobe .form-field.is-invalid input:focus,
body.brand-placetobe .form-field.is-invalid select:focus,
body.brand-placetobe .form-field.is-invalid textarea:focus,
body.brand-placetobe .cuyl-form [aria-invalid="true"]:focus {
  border-color: var(--ptb-status-error);
  box-shadow: 0 0 0 3px var(--ptb-status-error-tint);
}

body.brand-placetobe .cuyl-form__consent {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: var(--ptb-space-3);
  align-items: start;
  padding: var(--ptb-space-4);
  border-radius: var(--ptb-radius-md);
  background: var(--ptb-surface-muted);
  border: 1px solid var(--ptb-border-soft);
}

body.brand-placetobe .cuyl-form__consent span {
  color: var(--ptb-text-muted);
  font-size: var(--ptb-text-body-sm);
  line-height: var(--ptb-leading-body);
}

body.brand-placetobe .cuyl-form__consent a {
  color: var(--ptb-text-link);
  font-weight: var(--ptb-weight-bold);
}

body.brand-placetobe .cuyl-form__consent a:hover {
  color: var(--ptb-text-link-hover);
  text-decoration: underline;
}

body.brand-placetobe .cuyl-form__consent.is-invalid {
  border-color: var(--ptb-status-error);
  background: var(--ptb-status-error-tint);
}

/* Cloudflare Turnstile in der Buchung: das Widget bringt sein eigenes
   Aussehen mit, hier zaehlen nur Abstand, reservierte Hoehe und die Typografie
   von Hinweis und Fehlermeldung. */
body.brand-placetobe .cuyl-turnstile {
  min-height: 65px;
  margin: 0;
}

body.brand-placetobe .cuyl-form__guard-note {
  margin: 0;
  color: var(--ptb-text-muted);
  font-size: var(--ptb-text-body-sm);
  line-height: var(--ptb-leading-body);
}

/* Wie in theme.css: is-info bleibt ruhig, erst is-error nimmt die Fehlerfarbe. */
body.brand-placetobe .cuyl-form__guard-message {
  margin: 0;
  padding: var(--ptb-space-3) var(--ptb-space-4);
  border-radius: var(--ptb-radius-md);
  background: var(--ptb-surface-muted);
  border: 1px solid var(--ptb-border-soft);
  color: var(--ptb-text-muted);
  font-size: var(--ptb-text-body-sm);
  font-weight: var(--ptb-weight-bold);
  line-height: var(--ptb-leading-body);
}

body.brand-placetobe .cuyl-form__guard-message.is-info {
  background: var(--ptb-surface-muted);
  border-color: var(--ptb-border-soft);
  color: var(--ptb-text-muted);
}

body.brand-placetobe .cuyl-form__guard-message.is-error {
  background: var(--ptb-status-error-tint);
  border-color: var(--ptb-status-error);
  color: var(--ptb-text-brand);
}

body.brand-placetobe .form-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ==========================================================================
   6. Buttons: .ptb-btn
   Varianten: --primary, --accent-{bewegung|entwicklung|gemeinschaft|begegnung},
   --soft, --outline, --muted, --ghost. Groessen: --sm, --md (Default), --lg.
   ========================================================================== */
.ptb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ptb-space-2);
  height: var(--ptb-control-h-md);
  padding: 0 var(--ptb-space-6);
  border: none;
  border-radius: var(--ptb-radius-pill);
  background: var(--ptb-action-primary);
  color: var(--ptb-text-inverse);
  font-family: var(--ptb-font-body);
  font-size: var(--ptb-text-body-md);
  font-weight: var(--ptb-weight-semibold);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  /* filter gehoert dazu: die Akzent-Varianten wechseln beim Hover auf
     brightness(.92) und sprangen ohne Uebergang hart um. */
  transition: transform var(--ptb-dur-base) var(--ptb-ease-soft), box-shadow var(--ptb-dur-base) var(--ptb-ease-soft), background-color var(--ptb-dur-base) var(--ptb-ease-soft), border-color var(--ptb-dur-base) var(--ptb-ease-soft), opacity var(--ptb-dur-base) var(--ptb-ease-soft), filter var(--ptb-dur-base) var(--ptb-ease-soft);
}

.ptb-btn:hover {
  background: var(--ptb-action-primary-hover);
  transform: translateY(var(--ptb-hover-lift));
  box-shadow: var(--ptb-shadow-lift);
}

.ptb-btn:active {
  transform: scale(var(--ptb-press-scale));
}

.ptb-btn:disabled,
.ptb-btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Groessen */
.ptb-btn--sm {
  height: var(--ptb-control-h-sm);
  padding: 0 var(--ptb-space-4);
  font-size: var(--ptb-text-body-sm);
}

.ptb-btn--md {
  height: var(--ptb-control-h-md);
  padding: 0 var(--ptb-space-6);
  font-size: var(--ptb-text-body-md);
}

.ptb-btn--lg {
  height: var(--ptb-control-h-lg);
  padding: 0 var(--ptb-space-7);
  font-size: var(--ptb-text-body-lg);
}

/* Primaer (Taupe) */
.ptb-btn--primary {
  background: var(--ptb-action-primary);
  color: var(--ptb-text-inverse);
}
.ptb-btn--primary:hover {
  background: var(--ptb-action-primary-hover);
}

/* Saeulen-Akzente: gefuellte Knoepfe tragen weisse Schrift, dafuer muss die
   Flaeche auf der 900-Stufe liegen (die 700er kam nur auf 3,4-5,2:1). Der
   Hover verdunkelt dieselbe Farbe, damit kein zweiter Ton noetig wird. */
.ptb-btn--accent-bewegung {
  background: var(--ptb-aqua-900);
  color: var(--ptb-text-inverse);
}
.ptb-btn--accent-bewegung:hover {
  background: var(--ptb-aqua-900);
  filter: brightness(.92);
}

.ptb-btn--accent-entwicklung {
  background: var(--ptb-lilac-900);
  color: var(--ptb-text-inverse);
}
.ptb-btn--accent-entwicklung:hover {
  background: var(--ptb-lilac-900);
  filter: brightness(.92);
}

.ptb-btn--accent-gemeinschaft {
  background: var(--ptb-mint-900);
  color: var(--ptb-text-inverse);
}
.ptb-btn--accent-gemeinschaft:hover {
  background: var(--ptb-mint-900);
  filter: brightness(.92);
}

.ptb-btn--accent-begegnung {
  background: var(--ptb-peach-900);
  color: var(--ptb-text-inverse);
}
.ptb-btn--accent-begegnung:hover {
  background: var(--ptb-peach-900);
  filter: brightness(.92);
}

/* Soft (dezenter Fuellton) */
.ptb-btn--soft {
  background: var(--ptb-taupe-200);
  color: var(--ptb-taupe-900);
}
.ptb-btn--soft:hover {
  background: var(--ptb-taupe-300);
}

/* Outline. Der Rahmen traegt die Knopfform allein, deshalb taupe-700
   (4,1:1 auf Weiss, 3,4:1 auf Sand) statt des hellen taupe-300. */
.ptb-btn--outline {
  background: transparent;
  color: var(--ptb-text-brand);
  border: 1.5px solid var(--ptb-taupe-700);
}
.ptb-btn--outline:hover {
  background: var(--ptb-surface-muted);
  border-color: var(--ptb-action-primary);
}

/* Muted: ruhiger Knopf fuer ausgebuchte Angebote. Der Link fuehrt weiterhin
   zur Kursseite, deshalb bleibt er voll deckend und normal bedienbar - kein
   `aria-disabled`, kein not-allowed-Zeiger. Taupe-900 auf Sand-100 liegt
   deutlich ueber 4,5:1. */
.ptb-btn--muted {
  background: var(--ptb-sand-100);
  color: var(--ptb-taupe-900);
  border: 1.5px solid var(--ptb-taupe-700);
}
.ptb-btn--muted:hover {
  background: var(--ptb-sand-300);
  color: var(--ptb-taupe-900);
}

/* Ghost (keine Fuellung, kein Rahmen) */
.ptb-btn--ghost {
  background: transparent;
  color: var(--ptb-text-brand);
}
.ptb-btn--ghost:hover {
  background: var(--ptb-surface-muted);
  box-shadow: none;
  transform: none;
}

/* ==========================================================================
   7. Karten: .ptb-card
   ========================================================================== */
.ptb-card {
  background: var(--ptb-surface-card);
  border: 1px solid var(--ptb-border-soft);
  border-radius: var(--ptb-radius-lg);
  padding: var(--ptb-space-6);
  box-shadow: var(--ptb-shadow-card);
}

.ptb-card__media {
  display: block;
  width: calc(100% + (2 * var(--ptb-space-6)));
  height: 168px;
  margin: calc(var(--ptb-space-6) * -1) calc(var(--ptb-space-6) * -1) var(--ptb-space-6);
  border-radius: var(--ptb-radius-lg) var(--ptb-radius-lg) 0 0;
  object-fit: cover;
  max-width: none;
}

/* Fehlt das Bild, steht eine Aquarell-Flaeche im Bildfeld - dort aber mit der
   Kartenkante oben statt der Blob-Form aus Abschnitt 11 (zwei Klassen, damit
   die spaetere .ptb-wash-Regel nicht gewinnt). */
.ptb-card__media.ptb-wash {
  border-radius: var(--ptb-radius-lg) var(--ptb-radius-lg) 0 0;
}

/* Kurskarte: Bildfeld, Badges, Titel, drei Meta-Zeilen, Preis, Knopf.
   Der Abstand kommt aus dem Grid-Gap, deshalb gibt das Bildfeld seinen
   eigenen unteren Abstand ab. */
.ptb-card--course {
  display: grid;
  gap: var(--ptb-space-4);
  align-content: start;
}

.ptb-card--course .ptb-card__media {
  margin-bottom: 0;
}

.ptb-card__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ptb-space-2);
}

.ptb-card__title {
  margin: 0;
  font-size: var(--ptb-text-heading-md);
  line-height: var(--ptb-leading-snug);
}

.ptb-card__meta {
  display: grid;
  gap: var(--ptb-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ptb-card__meta-row {
  display: flex;
  align-items: center;
  gap: var(--ptb-space-2);
  font-size: var(--ptb-text-body-sm);
  line-height: var(--ptb-leading-snug);
  color: var(--ptb-text-muted);
}

.ptb-card__meta-row .ptb-icon {
  color: var(--ptb-text-brand-soft);
}

.ptb-card__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--ptb-space-2);
  margin: 0;
  padding-top: var(--ptb-space-3);
  border-top: 1px solid var(--ptb-border-soft);
}

/* Ab hier: Display-Groessen ab 24 px. WCAG laesst fuer sie 3:1 zu, deshalb
   behalten sie taupe-700 und werden nicht mit dem Flaechentext dunkler. */
.ptb-card__price-amount {
  font-family: var(--ptb-font-display);
  font-size: var(--ptb-text-heading-lg);
  font-weight: var(--ptb-weight-bold);
  line-height: 1;
  color: var(--ptb-taupe-700);
}

.ptb-card__price-label {
  font-size: var(--ptb-text-caption);
  color: var(--ptb-text-muted);
}

.ptb-card__cta {
  justify-self: start;
}

/* Ausgebucht: die Karte bleibt lesbar, tritt aber zurueck. */
.ptb-card.is-full {
  box-shadow: var(--ptb-shadow-soft);
}

.ptb-card.is-full .ptb-card__media {
  filter: saturate(0.35);
}

/* Zurueckgenommen, aber lesbar: taupe-500 kam hier nur auf 2,72:1.
   ink-700 haelt 8,7:1 und laesst die Karte trotzdem ruhiger wirken als eine
   buchbare. */
.ptb-card.is-full .ptb-card__price-amount {
  color: var(--ptb-ink-700);
}

/* Workshop-Zeile: Datums-Chip, Titel/Zeit, rechts Status, Preis und Knopf. */
.ptb-workshop-row {
  display: flex;
  align-items: center;
  gap: var(--ptb-space-5);
  padding: var(--ptb-space-5) var(--ptb-space-6);
}

.ptb-workshop-row__body {
  display: grid;
  gap: var(--ptb-space-1);
  flex: 1 1 auto;
  min-width: 0;
}

.ptb-workshop-row__title {
  margin: 0;
  font-size: var(--ptb-text-heading-md);
  line-height: var(--ptb-leading-snug);
}

.ptb-workshop-row__leader {
  display: block;
  font-family: var(--ptb-font-body);
  font-size: var(--ptb-text-body-sm);
  font-weight: var(--ptb-weight-regular);
  color: var(--ptb-text-muted);
}

.ptb-workshop-row__time {
  display: flex;
  align-items: center;
  gap: var(--ptb-space-2);
  margin: 0;
  font-size: var(--ptb-text-body-sm);
  color: var(--ptb-text-muted);
}

.ptb-workshop-row__time .ptb-icon {
  color: var(--ptb-text-brand-soft);
}

.ptb-workshop-row__aside {
  display: flex;
  align-items: center;
  gap: var(--ptb-space-4);
  flex-shrink: 0;
}

/* Workshop-Mitgliederpreis (Spec 2026-10-01 §5, Fixwave F3/V1/V2): Preis
   und darunter "Mitglieder 25,00 €" als kleine, gedaempfte Zeile. Die Spalte
   ist genau so breit wie der Betrag (min-content, Betrag nowrap) - Karte und
   Buchungsbox werden nicht breiter als ohne Mitgliederpreis; die Zeile bricht
   notfalls nach "Mitglieder" um (Betrag und € untrennbar). Gilt fuer die
   Workshop-Karte (.ptb-card__price-amount) und die Auswahlkarte der
   Buchungsbox (.ptb-box__choice-price). */
.ptb-price {
  display: grid;
  flex: 0 0 auto;
  justify-items: end;
  gap: 2px;
  width: min-content;
}

.ptb-price > .ptb-card__price-amount,
.ptb-price > .ptb-box__choice-price {
  white-space: nowrap;
}

.ptb-price__member {
  font-family: var(--ptb-font-body);
  font-size: var(--ptb-text-body-sm);
  font-weight: var(--ptb-weight-regular);
  line-height: var(--ptb-leading-snug);
  text-align: end;
  color: var(--ptb-text-muted);
}

/* ==========================================================================
   8. Badges, Status-Pills, Datums-Chip
   ========================================================================== */
.ptb-badge,
.ptb-pill-status {
  display: inline-flex;
  align-items: center;
  gap: var(--ptb-space-1);
  padding: var(--ptb-space-1) var(--ptb-space-3);
  border-radius: var(--ptb-radius-pill);
  background: var(--ptb-surface-muted);
  color: var(--ptb-text-brand);
  font-size: var(--ptb-text-caption);
  font-weight: var(--ptb-weight-bold);
  line-height: 1.4;
  white-space: nowrap;
}

.ptb-badge--neutral { background: var(--ptb-taupe-200); color: var(--ptb-taupe-900); }
.ptb-badge--bewegung { background: var(--ptb-tint-bewegung); color: var(--ptb-ink-bewegung); }
.ptb-badge--entwicklung { background: var(--ptb-tint-entwicklung); color: var(--ptb-ink-entwicklung); }
.ptb-badge--gemeinschaft { background: var(--ptb-tint-gemeinschaft); color: var(--ptb-ink-gemeinschaft); }
.ptb-badge--begegnung { background: var(--ptb-tint-begegnung); color: var(--ptb-ink-begegnung); }
.ptb-badge--success { background: var(--ptb-status-success-tint); color: var(--ptb-status-success); }
.ptb-badge--info { background: var(--ptb-status-info-tint); color: var(--ptb-status-info); }
.ptb-badge--warning { background: var(--ptb-status-warning-tint); color: var(--ptb-status-warning); }
.ptb-badge--error { background: var(--ptb-status-error-tint); color: var(--ptb-status-error); }

/* Status-Pill: Kursplaetze frei/wenige/ausgebucht (siehe status-pill.php) */
.ptb-pill-status--frei { background: var(--ptb-status-success-tint); color: var(--ptb-status-success); }
.ptb-pill-status--wenige { background: var(--ptb-status-warning-tint); color: var(--ptb-status-warning); }
.ptb-pill-status--ausgebucht { background: var(--ptb-status-error-tint); color: var(--ptb-status-error); }
.ptb-pill-status--beendet { background: var(--ptb-taupe-200); color: var(--ptb-taupe-900); }

/* Datums-Chip: 66px Block, Tint Begegnung (Peach) */
.ptb-chip-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 66px;
  height: 66px;
  padding: var(--ptb-space-2);
  border-radius: var(--ptb-radius-md);
  background: var(--ptb-tint-begegnung);
  color: var(--ptb-ink-begegnung);
  text-align: center;
  flex-shrink: 0;
}

.ptb-chip-date__day {
  font-family: var(--ptb-font-display);
  font-size: var(--ptb-text-heading-md);
  font-weight: var(--ptb-weight-bold);
  line-height: 1;
}

.ptb-chip-date__month {
  font-size: var(--ptb-text-caption);
  font-weight: var(--ptb-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ptb-tracking-overline);
}

/* ==========================================================================
   9. Formularfelder: .ptb-input / .ptb-select / .ptb-textarea / .ptb-check
   ========================================================================== */
.ptb-input,
.ptb-select {
  width: 100%;
  height: var(--ptb-control-h-md);
  padding: 0 var(--ptb-space-5);
  border: 1.5px solid var(--ptb-border-soft);
  border-radius: var(--ptb-radius-pill);
  background: var(--ptb-surface-card);
  color: var(--ptb-text-body);
  font-family: var(--ptb-font-body);
  font-size: var(--ptb-text-body-md);
  transition: border-color var(--ptb-dur-base) var(--ptb-ease-soft), box-shadow var(--ptb-dur-base) var(--ptb-ease-soft);
}

.ptb-textarea {
  width: 100%;
  min-height: 136px;
  padding: var(--ptb-space-4) var(--ptb-space-5);
  border: 1.5px solid var(--ptb-border-soft);
  border-radius: var(--ptb-radius-md);
  background: var(--ptb-surface-card);
  color: var(--ptb-text-body);
  font-family: var(--ptb-font-body);
  font-size: var(--ptb-text-body-md);
  resize: vertical;
  transition: border-color var(--ptb-dur-base) var(--ptb-ease-soft), box-shadow var(--ptb-dur-base) var(--ptb-ease-soft);
}

.ptb-input:focus,
.ptb-select:focus,
.ptb-textarea:focus {
  outline: none;
  border-color: var(--ptb-border-focus);
  box-shadow: var(--ptb-shadow-focus);
}

/* Checkbox: 24px, 6px Radius, Taupe-Fuellung */
/* Der Rahmen ist im ungewaehlten Zustand das einzige sichtbare Element und
   muss deshalb die 3:1 fuer Bedienelemente halten - taupe-300 schaffte das
   nicht, taupe-700 schon. */
.ptb-check {
  appearance: none;
  -webkit-appearance: none;
  display: inline-grid;
  place-content: center;
  width: 24px;
  height: 24px;
  margin: 0;
  border: 1.5px solid var(--ptb-taupe-700);
  border-radius: 6px;
  background: var(--ptb-surface-card);
  cursor: pointer;
  transition: background-color var(--ptb-dur-fast) var(--ptb-ease-soft), border-color var(--ptb-dur-fast) var(--ptb-ease-soft);
}

.ptb-check:checked {
  background: var(--ptb-action-primary);
  border-color: var(--ptb-action-primary);
}

/*
 * Fix-Runde 2, Ziffer 3 (Nachtrag): theme.css traegt zusaetzlich eine eigene,
 * nicht markenmodus-gebundene Regel `.cuyl-form input:focus { background:
 * #fff; … }` (ohne Typ-Einschraenkung) - liegt ausserhalb dieser Aufgabe
 * (nur page-placetobe-booking.php + placetobe.css) und darf hier nicht
 * angefasst werden. Ihre Spezifitaet (.cuyl-form + :focus + input) schlaegt
 * `.ptb-check:checked` und ueberschrieb dessen Hintergrund auf Weiss, sobald
 * eine angekreuzte Checkbox den Fokus hatte (z. B. direkt nach dem Anklicken)
 * - das Haekchen blieb gezeichnet, aber auf weissem statt dunklem Grund
 * unsichtbar. Diese Regel schlaegt beide (hoehere Spezifitaet durch
 * `body.brand-placetobe` + `.ptb-check`) und haelt die Ankreuz-Farbe.
 */
body.brand-placetobe .ptb-check:checked:focus,
body.brand-placetobe .ptb-check:checked:focus-visible {
  background: var(--ptb-action-primary);
  border-color: var(--ptb-action-primary);
}

/*
 * Haekchen (Issue #11): das Pseudo-Element wird IMMER gerendert - feste
 * 12x7-Box, im ungewaehlten Zustand nur unsichtbar (opacity 0, scale 0) -
 * und beim Ankreuzen per opacity/scale eingeblendet. Grund: in den
 * Einwilligungs-Labels steht das Kaestchen als Inline-Element in der
 * Textzeile (das Label rechnet mit display:block, siehe
 * `body.brand-placetobe .cuyl-form label` in Abschnitt 5) und richtet sich
 * an seiner Grundlinie aus. Ein inline-grid ohne Inhalt nimmt dafuer seine
 * Unterkante, mit Inhalt die Unterkante des ::after - frueher entstand das
 * ::after erst mit :checked: beim Ankreuzen rutschte das Kaestchen
 * rechnerisch ~2,9px nach unten, und weil es ungewaehlt ueber die Zeile
 * hinausragte (Zeile waechst), der Text zugleich ~2,6px nach oben. Mit dem
 * dauerhaft vorhandenen ::after gilt in beiden Zustaenden dieselbe
 * Grundlinie (die bisherige Gewaehlt-Position: Kaestchen-Mitte etwa auf
 * halber x-Hoehe, Oberkante innerhalb der Zeile), Kaestchen und Text bleiben
 * stehen. transform/opacity beeinflussen das Layout nicht; die Groesse des
 * ::after bestimmt die Lage und bleibt deshalb fest.
 * `display: inline-grid` bleibt bewusst: ein blocklevel `grid` stuende im
 * display:block-Label in einer eigenen Zeile ueber dem Text. In Grid-/Flex-
 * Eltern wird das Kaestchen ohnehin automatisch zu `grid` (blockifiziert).
 */
.ptb-check::after {
  content: "";
  width: 12px;
  height: 7px;
  border-left: 2px solid var(--ptb-text-inverse);
  border-bottom: 2px solid var(--ptb-text-inverse);
  opacity: 0;
  transform: rotate(-45deg) translateY(-1px) scale(0);
  transform-origin: center;
  transition: opacity var(--ptb-dur-fast) var(--ptb-ease-soft), transform var(--ptb-dur-fast) var(--ptb-ease-soft);
}

.ptb-check:checked::after {
  opacity: 1;
  transform: rotate(-45deg) translateY(-1px) scale(1);
}

/* ==========================================================================
   10. Layout: Section, Shell, Section-Head, Grid, die Abschnitte der
   Landing (Hero, Werte, Workshop-Liste, Ort, FAQ) und das Kursdetail
   (Brotkrume, Hero, Fakten, Termine, Mitbringliste, Trainerin, Buchungsbox)
   ========================================================================== */
.ptb-section {
  padding: var(--ptb-space-10) var(--ptb-page-gutter);
}

.ptb-section--warm {
  background: var(--ptb-surface-warm);
}

.ptb-shell {
  max-width: var(--ptb-content-max);
  margin-inline: auto;
}

.ptb-section-head {
  display: grid;
  gap: var(--ptb-space-3);
  max-width: var(--ptb-prose-max);
  margin-bottom: var(--ptb-space-8);
}

.ptb-section-head__overline {
  font-size: var(--ptb-text-overline);
  font-weight: var(--ptb-weight-bold);
  letter-spacing: var(--ptb-tracking-overline);
  text-transform: uppercase;
  color: var(--ptb-text-brand);
}

.ptb-section-head__title {
  margin: 0;
  font-family: var(--ptb-font-display);
  font-size: var(--ptb-text-display-sm);
  line-height: var(--ptb-leading-display);
  color: var(--ptb-taupe-700);
}

.ptb-section-head__lead {
  margin: 0;
  font-size: var(--ptb-text-body-lg);
  line-height: var(--ptb-leading-body);
  color: var(--ptb-text-muted);
}

/* Filterleisten ueber dem Kursraster der Landing (Plan E13-3, zweite Gruppe
   "Standort" Plan E16-3/Spec §22.4): eine Gruppe je Kategorie/Standort,
   untereinander mit kleinem Abstand - der groessere Abstand zum Kursraster
   darunter sitzt hier am Wrapper, nicht an den einzelnen Gruppen. */
.ptb-filters {
  display: flex;
  flex-direction: column;
  gap: var(--ptb-space-3);
  margin: 0 0 var(--ptb-space-5);
}

/* Final-Fixwave E16 (R5): der Wrapper kommt verborgen vom Server und wird
   erst von assets/js/placetobe-filter.js eingeblendet - ohne JavaScript also
   auch kein Abstand ueber dem Raster (display:flex oben wuerde das
   hidden-Attribut sonst ueberstimmen). */
.ptb-filters[hidden] {
  display: none;
}

/* "Alle" als Textpille, je vorkommender Kategorie ein Icon-Button (Label nur
   als aria-label/title); die Standort-Gruppe nutzt dieselbe Textpille ohne
   Icon, auch fuer "Alle Standorte" und die Kurznamen (siehe
   page-placetobe-landing.php und assets/js/placetobe-filter.js). Aktiver
   Zustand am aria-pressed-Button wie bei den frueheren Durchgangs-Chips
   (aqua-700 auf aqua-100). */
.ptb-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ptb-space-2);
}

/* Ohne JavaScript verborgen (Final-Review R10) - display:flex oben wuerde das
   hidden-Attribut sonst ueberstimmen. */
.ptb-filter[hidden] {
  display: none;
}

.ptb-filter__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ptb-space-2);
  min-height: var(--ptb-control-h-md);
  margin: 0;
  padding: var(--ptb-space-2) var(--ptb-space-4);
  border: 1.5px solid var(--ptb-taupe-700);
  border-radius: var(--ptb-radius-pill);
  background: var(--ptb-surface-card);
  color: var(--ptb-ink-700);
  font-family: var(--ptb-font-body);
  font-size: var(--ptb-text-body-sm);
  font-weight: var(--ptb-weight-semibold);
  line-height: var(--ptb-leading-snug);
  cursor: pointer;
  transition: background-color var(--ptb-dur-fast) var(--ptb-ease-soft), border-color var(--ptb-dur-fast) var(--ptb-ease-soft), color var(--ptb-dur-fast) var(--ptb-ease-soft);
}

.ptb-filter__btn--icon {
  width: var(--ptb-control-h-md);
  padding: var(--ptb-space-2);
}

.ptb-filter__btn:hover {
  background: var(--ptb-surface-muted);
  color: var(--ptb-text-body);
}

.ptb-filter__btn[aria-pressed="true"] {
  border-color: var(--ptb-aqua-700);
  background: var(--ptb-aqua-100);
  color: var(--ptb-aqua-900);
}

/* Final-Fixwave E16 (R4): Leerzustand des kombinierten Filters - Hinweis
   (.ptb-empty) und Knopf "Filter zuruecksetzen" (.ptb-filter__btn, ohne
   aria-pressed) in einer Zeile, bei wenig Platz untereinander. Nur mit
   JavaScript sichtbar (hidden vom Server). */
.ptb-filter-empty {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ptb-space-3) var(--ptb-space-4);
}

.ptb-filter-empty[hidden] {
  display: none;
}

/* Review-Finding 1 (Critical): wie beim Durchgaenge-Skript
   (.ptb-detail [hidden] unten) ueberstimmt die Klassenregel
   .ptb-card--course { display: grid } sonst das hidden-Attribut, das
   assets/js/placetobe-filter.js beim Filtern setzt - Karten blieben trotz
   Klick sichtbar. */
[data-ptb-course-grid] > [hidden] {
  display: none !important;
}

.ptb-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ptb-space-6);
}

.ptb-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ptb-space-6);
}

/* Leerzustand einer Angebotsliste (kein Kurs, kein Workshop gepflegt). */
.ptb-empty {
  margin: 0;
  font-size: var(--ptb-text-body-lg);
  line-height: var(--ptb-leading-body);
  color: var(--ptb-text-muted);
}

/* --------------------------------------------------------------------------
   Landing: Hero
   -------------------------------------------------------------------------- */
.ptb-hero__inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--ptb-space-9);
  align-items: center;
}

.ptb-hero__text {
  display: grid;
  justify-items: start;
  gap: var(--ptb-space-5);
}

.ptb-hero__title {
  margin: 0;
  font-size: var(--ptb-text-display-lg);
  font-weight: var(--ptb-weight-display);
  line-height: var(--ptb-leading-display);
  letter-spacing: var(--ptb-tracking-display);
}

.ptb-hero__lead {
  max-width: var(--ptb-prose-max);
  margin: 0;
  font-size: var(--ptb-text-body-lg);
  line-height: var(--ptb-leading-body);
  color: var(--ptb-text-muted);
}

.ptb-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ptb-space-3);
}

.ptb-hero__media {
  display: grid;
  align-content: center;
  min-height: 340px;
  padding: var(--ptb-space-6);
}

.ptb-hero__image {
  display: block;
  width: 100%;
  max-height: 380px;
  border-radius: var(--ptb-radius-xl);
  object-fit: cover;
  box-shadow: var(--ptb-shadow-card);
}

/* --------------------------------------------------------------------------
   Landing: Werte (drei Karten mit Icon-Kreis in der Saeulenfarbe)
   -------------------------------------------------------------------------- */
.ptb-value {
  display: grid;
  justify-items: start;
  gap: var(--ptb-space-3);
  align-content: start;
}

.ptb-value-icon {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--ptb-radius-pill);
}

.ptb-value-icon--bewegung { background: var(--ptb-tint-bewegung); color: var(--ptb-ink-bewegung); }
.ptb-value-icon--entwicklung { background: var(--ptb-tint-entwicklung); color: var(--ptb-ink-entwicklung); }
.ptb-value-icon--gemeinschaft { background: var(--ptb-tint-gemeinschaft); color: var(--ptb-ink-gemeinschaft); }
.ptb-value-icon--begegnung { background: var(--ptb-tint-begegnung); color: var(--ptb-ink-begegnung); }

.ptb-value__title {
  margin: 0;
  font-size: var(--ptb-text-heading-md);
  line-height: var(--ptb-leading-snug);
}

/* Zwei Klassen, weil `body.brand-placetobe h3` (Abschnitt 4) sonst die
   Saeulenfarbe ueberschreibt. */
.ptb-value__title.ptb-value__title--bewegung { color: var(--ptb-ink-bewegung); }
.ptb-value__title.ptb-value__title--entwicklung { color: var(--ptb-ink-entwicklung); }
.ptb-value__title.ptb-value__title--gemeinschaft { color: var(--ptb-ink-gemeinschaft); }
.ptb-value__title.ptb-value__title--begegnung { color: var(--ptb-ink-begegnung); }

.ptb-value__text {
  margin: 0;
  font-size: var(--ptb-text-body-md);
  line-height: var(--ptb-leading-body);
  color: var(--ptb-text-muted);
}

/* --------------------------------------------------------------------------
   Landing: Team „Über uns“ (Spec 2026-10-03 §3) zwischen Werten und Kursen.
   Mobil zuerst: unter 720 px eine Wischreihe mit Snap (Karte ca. 82 vw, die
   naechste lugt an, keine sichtbare Scrollleiste, Karten per Tab
   erreichbar), 720-1099 px zwei Spalten, ab 1100 px eine Reihe (vier
   Karten nebeneinander; fehlt eine, teilen sich drei die Breite).
   Aquarell ohne Bilddateien: drei weich verlaufene Flecken hinter dem
   Blob-Foto und ein Hauch in der Zitatflaeche, je Karte der Akzent ihres
   Platzes (1 bewegung, 2 begegnung, 3 entwicklung, 4 gemeinschaft) plus ein
   „Echo“ aus einer zweiten Saeule. Keine Animation.
   Kontrast: Name, Pillen, Zitat-Ueberzeile in der 900er-Tinte der Saeule
   (>= 5,3:1 auf Tint/Weiss). Die zwei Haeuche der Zitatflaeche bleiben bei
   18 % bzw. 12 % Deckkraft - selbst uebereinander liegt die Ueberzeile dann
   noch bei >= 4,6:1 (schlechtester Fall bewegung). Zitat in ink-700 (>= 7:1).
   -------------------------------------------------------------------------- */
.ptb-team {
  /* Die Wischreihe laeuft bis an den Bildschirmrand: so weit wie das
     seitliche Sektions-Padding (unter 600 px kleiner, siehe unten). */
  --ptb-team-bleed: var(--ptb-page-gutter);
}

/* Sprungziel der Website-Pflege-Vorschau: wie #kurse/#workshops/#faq Luft
   unter dem klebenden Header. */
#team {
  scroll-margin-top: 40px;
}

.ptb-team__card--bewegung {
  --ptb-team-accent: var(--ptb-accent-bewegung);
  --ptb-team-tint: var(--ptb-tint-bewegung);
  --ptb-team-ink: var(--ptb-ink-bewegung);
  --ptb-team-echo: var(--ptb-accent-entwicklung);
}

.ptb-team__card--begegnung {
  --ptb-team-accent: var(--ptb-accent-begegnung);
  --ptb-team-tint: var(--ptb-tint-begegnung);
  --ptb-team-ink: var(--ptb-ink-begegnung);
  --ptb-team-echo: var(--ptb-accent-gemeinschaft);
}

.ptb-team__card--entwicklung {
  --ptb-team-accent: var(--ptb-accent-entwicklung);
  --ptb-team-tint: var(--ptb-tint-entwicklung);
  --ptb-team-ink: var(--ptb-ink-entwicklung);
  --ptb-team-echo: var(--ptb-accent-begegnung);
}

.ptb-team__card--gemeinschaft {
  --ptb-team-accent: var(--ptb-accent-gemeinschaft);
  --ptb-team-tint: var(--ptb-tint-gemeinschaft);
  --ptb-team-ink: var(--ptb-ink-gemeinschaft);
  --ptb-team-echo: var(--ptb-accent-bewegung);
}

/* Wischreihe (Basis, < 720 px). Das Padding oben/unten gibt Fokusring und
   Kartenschatten Platz (die Reihe schneidet sonst ab), der negative Rand
   nimmt es im Layout wieder zurueck. */
.ptb-team__list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(82vw, 360px);
  gap: var(--ptb-space-4);
  margin: calc(var(--ptb-space-2) * -1) calc(var(--ptb-team-bleed) * -1) calc(var(--ptb-space-6) * -1);
  padding: var(--ptb-space-2) var(--ptb-team-bleed) var(--ptb-space-6);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--ptb-team-bleed);
  scrollbar-width: none;
}

.ptb-team__list::-webkit-scrollbar {
  display: none;
}

/* Zwei Klassen: gewinnt gegen .ptb-card (Abschnitt 7 und <= 600 px). */
.ptb-card.ptb-team__card {
  position: relative;
  /* Eigener Stapelkontext: Safari schneidet verwischte, gedrehte Flecken
     sonst manchmal hart an der Rundung ab (Review L6). */
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ptb-space-3);
  min-width: 0;
  padding: var(--ptb-space-5);
  /* Die Flecken duerfen ueber das Foto hinaus, aber nicht aus der Karte
     (sonst wuerde die Wischreihe breiter). */
  overflow: hidden;
  text-align: center;
  scroll-snap-align: start;
  scroll-margin-top: 96px;
}

.ptb-card.ptb-team__card:focus-visible {
  outline: none;
  box-shadow: var(--ptb-ring-focus), var(--ptb-shadow-card);
}

/* Foto-Buehne: quadratisch, 200 px (ab 1100 px schmaler), Flecken dahinter. */
.ptb-team__media {
  position: relative;
  isolation: isolate;
  flex-shrink: 0;
  width: min(200px, 76%);
  aspect-ratio: 1;
  /* min-height: 0 und das absolut gesetzte Foto halten den Rahmen quadratisch:
     sonst zieht ein Hochformat-Foto (intrinsische Hoehe) den Flex-Kindrahmen
     in die Laenge und aus dem Kreis wird ein Oval (Sichtpruefung 03.10.). */
  min-height: 0;
  margin: var(--ptb-space-2) 0 var(--ptb-space-3);
}

.ptb-team__splash {
  position: absolute;
  z-index: -1;
  background: var(--ptb-team-accent);
  mix-blend-mode: multiply;
}

/* Grosser Fleck links oben im Akzent. */
.ptb-team__splash--a {
  inset: -10% 8% 12% -13%;
  border-radius: var(--ptb-radius-blob);
  opacity: .42;
  filter: blur(10px);
  transform: rotate(-14deg);
}

/* Echo rechts unten in der zweiten Saeulenfarbe. */
.ptb-team__splash--b {
  inset: 30% -14% -10% 34%;
  border-radius: var(--ptb-radius-blob-alt);
  background: var(--ptb-team-echo);
  opacity: .34;
  filter: blur(12px);
  transform: rotate(24deg);
}

/* Kleiner Tropfen rechts oben, kraeftiger und schaerfer. */
.ptb-team__splash--c {
  top: -6%;
  right: -2%;
  width: 26%;
  height: 24%;
  border-radius: var(--ptb-radius-blob-alt);
  opacity: .5;
  filter: blur(4px);
  transform: rotate(32deg);
}

/* Karten 2 und 4 gespiegelt, damit die Reihe nicht gestempelt wirkt. */
.ptb-team__card--begegnung .ptb-team__splash--a,
.ptb-team__card--gemeinschaft .ptb-team__splash--a {
  inset: -10% -13% 12% 8%;
  border-radius: var(--ptb-radius-blob-alt);
  transform: rotate(14deg);
}

.ptb-team__card--begegnung .ptb-team__splash--b,
.ptb-team__card--gemeinschaft .ptb-team__splash--b {
  inset: 30% 34% -10% -14%;
  border-radius: var(--ptb-radius-blob);
  transform: rotate(-24deg);
}

.ptb-team__card--begegnung .ptb-team__splash--c,
.ptb-team__card--gemeinschaft .ptb-team__splash--c {
  right: auto;
  left: -2%;
  transform: rotate(-32deg);
}

/* Foto als Blob mit weissem Rand (wie ausgeschnitten auf dem Aquarell),
   Ausschnitt mittig-oben. */
.ptb-team__photo {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: var(--ptb-radius-blob);
  background: var(--ptb-team-tint);
  box-shadow: 0 0 0 4px var(--ptb-surface-card), var(--ptb-shadow-card);
}

.ptb-team__card--begegnung .ptb-team__photo,
.ptb-team__card--gemeinschaft .ptb-team__photo {
  border-radius: var(--ptb-radius-blob-alt);
}

.ptb-team__img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 22%;
}

/* Ohne Foto: Anfangsbuchstabe im Display-Font auf der Aquarellflaeche. */
.ptb-team__photo--initial {
  background: radial-gradient(circle at 34% 30%, var(--ptb-surface-card) 0%, var(--ptb-team-tint) 62%);
  color: var(--ptb-team-ink);
  font-family: var(--ptb-font-display);
  font-size: var(--ptb-text-display-lg);
  font-weight: var(--ptb-weight-display);
  line-height: 1;
}

/* Zwei Klassen, weil `body.brand-placetobe h3` (Abschnitt 4) sonst die
   Saeulenfarbe ueberschreibt. */
.ptb-team__card .ptb-team__name {
  max-width: 100%;
  margin: 0;
  font-size: var(--ptb-text-heading-lg);
  line-height: var(--ptb-leading-snug);
  color: var(--ptb-team-ink);
  overflow-wrap: anywhere;
}

.ptb-team__roles {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--ptb-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Rollen-Pille wie .ptb-badge, aber umbrechend (lange Rollen in schmalen
   Karten ab 1100 px). */
.ptb-team__role {
  display: inline-flex;
  align-items: center;
  gap: var(--ptb-space-1);
  max-width: 100%;
  margin: 0;
  padding: var(--ptb-space-1) var(--ptb-space-3);
  border-radius: var(--ptb-radius-pill);
  background: var(--ptb-team-tint);
  color: var(--ptb-team-ink);
  font-size: var(--ptb-text-caption);
  font-weight: var(--ptb-weight-bold);
  line-height: 1.4;
  text-align: left;
  overflow-wrap: break-word;
}

/* Zitatflaeche: weiche, leicht unregelmaessige Form in der Akzent-Toenung,
   darin zwei verlaufene Flecken (Akzent unten rechts, Echo oben) - wie die
   Aquarellflaeche der Steckbriefe. Sitzt immer unten, damit die Zitate
   einer Reihe auf gleicher Hoehe beginnen. */
.ptb-team__quote {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  gap: var(--ptb-space-2);
  align-self: stretch;
  margin-top: auto;
  padding: var(--ptb-space-4);
  border-radius: var(--ptb-radius-lg) var(--ptb-radius-xl) var(--ptb-radius-md) var(--ptb-radius-xl) / var(--ptb-radius-xl) var(--ptb-radius-md) var(--ptb-radius-xl) var(--ptb-radius-lg);
  background: var(--ptb-team-tint);
  text-align: left;
}

.ptb-team__quote::before,
.ptb-team__quote::after {
  content: "";
  position: absolute;
  z-index: -1;
  aspect-ratio: 1;
  pointer-events: none;
}

.ptb-team__quote::before {
  right: -20%;
  bottom: -38%;
  width: 72%;
  border-radius: var(--ptb-radius-blob-alt);
  background: var(--ptb-team-accent);
  opacity: .18;
  filter: blur(18px);
}

.ptb-team__quote::after {
  top: -30%;
  right: 16%;
  width: 34%;
  border-radius: var(--ptb-radius-blob);
  background: var(--ptb-team-echo);
  opacity: .12;
  filter: blur(14px);
}

.ptb-team__quote-label {
  margin: 0;
  font-family: var(--ptb-font-display);
  font-size: var(--ptb-text-body-sm);
  font-weight: var(--ptb-weight-semibold);
  line-height: var(--ptb-leading-snug);
  color: var(--ptb-team-ink);
}

.ptb-team__quote-text {
  margin: 0;
}

.ptb-team__quote-text p {
  margin: 0;
  font-size: var(--ptb-text-body-sm);
  line-height: var(--ptb-leading-body);
  color: var(--ptb-ink-700);
}

/* 720-1099 px: zwei Spalten, keine Wischreihe mehr. */
@media (min-width: 720px) {
  .ptb-team__list {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ptb-space-6);
    margin: 0;
    padding: 0;
    overflow: visible;
    scroll-snap-type: none;
  }
}

/* Ab 1100 px eine Reihe: vier Karten nebeneinander, Foto etwas kleiner. */
@media (min-width: 1100px) {
  .ptb-team__list {
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    grid-template-columns: none;
  }

  .ptb-team__media {
    width: min(180px, 80%);
  }
}

@media (max-width: 600px) {
  .ptb-team {
    --ptb-team-bleed: var(--ptb-space-4);
  }
}

/* Hoher Kontrast: Flecken und Toenungen verschwinden ohnehin, Pillen,
   Zitat und Foto bekommen Kanten, der Fokus die Systemfarbe. */
@media (forced-colors: active) {
  .ptb-team__splash,
  .ptb-team__quote::before,
  .ptb-team__quote::after {
    display: none;
  }

  .ptb-team__role,
  .ptb-team__quote,
  .ptb-team__photo {
    border: 1px solid CanvasText;
  }

  .ptb-card.ptb-team__card:focus-visible {
    outline: 2px solid Highlight;
  }
}

/* --------------------------------------------------------------------------
   Landing: Workshop-Liste
   -------------------------------------------------------------------------- */
.ptb-workshop-list {
  display: grid;
  gap: var(--ptb-space-4);
  max-width: 860px;
}

/* --------------------------------------------------------------------------
   Landing: Mitgliedschafts-Infokarte am Ende des Kursbereichs (24.09., loest
   die Pille unter dem Kurs-Intro ab). Stil wie die uebrigen Landing-Karten:
   linker Akzentbalken in PTB-Taupe statt Pill/Blasen-Form, volle Breite,
   mobil unveraendert (kein eigener Media-Query-Eintrag noetig).
   -------------------------------------------------------------------------- */
.ptb-membership-info {
  display: grid;
  gap: var(--ptb-space-2);
  margin-top: var(--ptb-space-7);
  padding: var(--ptb-space-5) var(--ptb-space-6);
  background: var(--ptb-surface-card);
  border: 1px solid var(--ptb-border-soft);
  border-left: 6px solid var(--ptb-taupe-700);
  border-radius: var(--ptb-radius-lg);
  box-shadow: var(--ptb-shadow-soft);
}

.ptb-membership-info__title {
  font-size: var(--ptb-text-overline);
  font-weight: var(--ptb-weight-bold);
  letter-spacing: var(--ptb-tracking-overline);
  text-transform: uppercase;
  color: var(--ptb-text-brand);
}

.ptb-membership-info__text {
  margin: 0;
  max-width: var(--ptb-prose-max);
  font-size: var(--ptb-text-body-md);
  line-height: var(--ptb-leading-body);
  color: var(--ptb-text-body);
}

/* --------------------------------------------------------------------------
   Landing: FAQ (<details>, funktioniert ohne JavaScript)
   -------------------------------------------------------------------------- */
.ptb-faq {
  display: grid;
  gap: var(--ptb-space-3);
  max-width: 860px;
}

.ptb-faq__item {
  background: var(--ptb-surface-card);
  border: 1px solid var(--ptb-border-soft);
  border-radius: var(--ptb-radius-md);
  box-shadow: var(--ptb-shadow-soft);
}

.ptb-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ptb-space-3);
  min-height: var(--ptb-control-h-md);
  padding: var(--ptb-space-4) var(--ptb-space-5);
  border-radius: var(--ptb-radius-md);
  font-family: var(--ptb-font-display);
  font-size: var(--ptb-text-heading-sm);
  font-weight: var(--ptb-weight-semibold);
  line-height: var(--ptb-leading-snug);
  color: var(--ptb-text-brand);
  cursor: pointer;
  list-style: none;
}

.ptb-faq__question::-webkit-details-marker {
  display: none;
}

.ptb-faq__chevron {
  color: var(--ptb-text-brand-soft);
  transition: transform var(--ptb-dur-base) var(--ptb-ease-soft);
}

.ptb-faq__item[open] .ptb-faq__chevron {
  transform: rotate(90deg);
}

.ptb-faq__answer {
  margin: 0;
  padding: 0 var(--ptb-space-5) var(--ptb-space-5);
  font-size: var(--ptb-text-body-md);
  line-height: var(--ptb-leading-body);
  color: var(--ptb-text-muted);
}

.ptb-faq__contact {
  margin: var(--ptb-space-3) 0 0;
  font-size: var(--ptb-text-body-md);
  line-height: var(--ptb-leading-body);
  color: var(--ptb-text-muted);
}

/* --------------------------------------------------------------------------
   Landing: Kontaktformular unter dem FAQ (#kontaktformular, Formular
   ptb_kontakt, Auftrag 27.09.). Eine Karte ueber die volle Shell-Breite:
   links Overline, Titel und Lead, rechts Rueckmeldung und Formular. Felder,
   Haekchen, Turnstile und Rueckmeldung nutzen die Regeln der Buchungsseite
   (Abschnitt 5, .ptb-row, .ptb-label, .ptb-notice) - hier stehen nur Raster
   und Abstaende, keine neuen Farben. Mobil einspaltig (unten).
   -------------------------------------------------------------------------- */
.ptb-contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--ptb-space-8);
  align-items: start;
  margin-top: var(--ptb-space-9);
  padding: var(--ptb-space-7);
  /* Der Ruecksprung nach dem Absenden landet auf #kontaktformular: die
     Karte beginnt unter dem klebenden Header, nicht dahinter. */
  scroll-margin-top: 112px;
}

/* Anker #kontakt (Menue "Kontakt", Issue #13) liegt auf dem Rahmen um die
   Karte - derselbe Abstand zum klebenden Header wie beim Ruecksprung. */
.ptb-contact-anchor {
  scroll-margin-top: 112px;
}

/* Die drei Sektionsanker der Landing (Menue Kurse/Workshops/FAQ): ohne
   Abstand verschwindet die Ueberzeile (Sektions-Padding 64 px) hinter dem
   82 px hohen klebenden Header. 40 px lassen sie mit Luft darunter stehen,
   ohne dass viel leere Sektionsflaeche oben steht (Issue #13). */
#kurse,
#workshops,
#team,
#faq {
  scroll-margin-top: 40px;
}

.ptb-contact__intro {
  display: grid;
  gap: var(--ptb-space-3);
}

.ptb-contact__title {
  margin: 0;
  font-family: var(--ptb-font-display);
  font-size: var(--ptb-text-display-sm);
  line-height: var(--ptb-leading-display);
  color: var(--ptb-taupe-700);
}

.ptb-contact__lead {
  margin: 0;
  font-size: var(--ptb-text-body-md);
  line-height: var(--ptb-leading-body);
  color: var(--ptb-text-muted);
}

.ptb-contact__main {
  display: grid;
  gap: var(--ptb-space-4);
  min-width: 0;
}

/* Die Rueckmeldung steht in der Karte: flacher als die freistehende Karte
   der Buchungsseite, volle Spaltenbreite; die Bueroadresse im Fehlerhinweis
   bleibt im Statuston, nur unterstrichen. */
.ptb-contact .ptb-notice {
  max-width: none;
  padding: var(--ptb-space-4) var(--ptb-space-5);
  box-shadow: none;
}

.ptb-contact .ptb-notice a {
  color: inherit;
  text-decoration: underline;
}

/* Kompakt: der Knopf so breit wie sein Text (das Formular ist ein Grid und
   wuerde ihn sonst strecken); mobil wieder volle Breite. */
.ptb-contact__submit {
  justify-self: start;
}

@media (max-width: 900px) {
  .ptb-contact {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--ptb-space-5);
  }
}

@media (max-width: 600px) {
  .ptb-contact__submit {
    justify-self: stretch;
  }
}

/* --------------------------------------------------------------------------
   Kursdetail (Plan E14, Spec §20; Vorlage design-detail-desktop.webp):
   Brotkrume, Kopf (Bild, Chip, H1, Lead), "Worum es geht.", Karte "Wann und
   wo." mit Termin-Kacheln, Trainerin-Kasten und die Buchungsbox mit Segment
   "Durchgang", Radio-Karten "Buchungsart", Gesamt und Lila-Knopf
   (course-detail.php, course-when-where.php, course-dates.php,
   course-place-card.php, booking-box.php, assets/js/placetobe-detail.js).
   Die Saeule der Kursseite steht einmal als Variablenpaar am Abschnitt; die
   getoenten Teile darin lesen daraus.
   -------------------------------------------------------------------------- */
.ptb-detail {
  --ptb-detail-tint: var(--ptb-tint-bewegung);
  --ptb-detail-ink: var(--ptb-ink-bewegung);
}

.ptb-detail--entwicklung {
  --ptb-detail-tint: var(--ptb-tint-entwicklung);
  --ptb-detail-ink: var(--ptb-ink-entwicklung);
}

.ptb-detail--gemeinschaft {
  --ptb-detail-tint: var(--ptb-tint-gemeinschaft);
  --ptb-detail-ink: var(--ptb-ink-gemeinschaft);
}

.ptb-detail--begegnung {
  --ptb-detail-tint: var(--ptb-tint-begegnung);
  --ptb-detail-ink: var(--ptb-ink-begegnung);
}

/* Brotkrume "Kurse › Titel": der Rueckweg in Linkfarbe wie in der Vorlage -
   aqua-900 (--ptb-text-link) statt des helleren Vorlagen-Tuerkis, das auf dem
   Sand der Seite nur ~3:1 erreicht haette. Gilt auch fuer die Buchungsseite. */
.ptb-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--ptb-space-2);
  margin-bottom: var(--ptb-space-6);
  font-size: var(--ptb-text-body-sm);
  color: var(--ptb-text-muted);
}

.ptb-breadcrumb .ptb-icon {
  color: var(--ptb-text-brand-soft);
}

.ptb-breadcrumb__link {
  font-weight: var(--ptb-weight-semibold);
  color: var(--ptb-text-link);
  text-decoration: none;
}

.ptb-breadcrumb__link:hover {
  color: var(--ptb-text-link-hover);
  text-decoration: underline;
}

.ptb-breadcrumb__current {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ptb-detail.ptb-section {
  padding-top: var(--ptb-space-7);
  padding-bottom: var(--ptb-space-10);
}

/* Drei Teile im Markup: Kopf, Box, Rumpf - mobil genau diese Reihenfolge
   (Spec §20.7). Ab 1024 px legt das Raster die Box rechts neben Kopf und
   Rumpf; die Seitenspalte spannt beide Reihen und streckt sich auf die volle
   Hoehe, damit die Box darin sticky mitlaufen kann. Feste Spalte 22rem
   (Fix-Runde 1, B2/S1), die zweite Reihe nimmt den Rest (1fr), damit eine
   hohe Box nie Luft zwischen Lead und "Worum es geht." schiebt. */
.ptb-detail__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22rem;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "head aside"
    "body aside";
  gap: var(--ptb-space-8) var(--ptb-space-8);
}

/* Ohne buchbares Angebot gibt es keine Box: einspaltig. */
.ptb-detail__grid--solo {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto;
  grid-template-areas:
    "head"
    "body";
}

.ptb-detail__head {
  grid-area: head;
  display: grid;
  gap: var(--ptb-space-6);
  min-width: 0;
}

.ptb-detail__aside {
  grid-area: aside;
  align-self: stretch;
  min-width: 0;
}

.ptb-detail__body {
  grid-area: body;
  display: grid;
  align-content: start;
  gap: var(--ptb-space-8);
  min-width: 0;
  /* Blowout-Schutz (B1/B2): zu breiter Inhalt blutet nicht in die Box.
     Review F8: der Fokusring des buendig linken "Weiterlesen"-Knopfs braucht
     etwas Spielraum, sonst schneidet overflow-x:clip ihn links ab. */
  overflow-x: clip;
  overflow-clip-margin: 6px;
}

/* Hero: nur das Bild, abgerundet, ohne Overlay und ohne Text darauf. Ohne
   Foto die Aquarell-Flaeche der Saeule in derselben Form. */
.ptb-detail__media {
  display: block;
  width: 100%;
  max-width: none;
  height: 280px;
  object-fit: cover;
  border-radius: var(--ptb-radius-xl);
  box-shadow: var(--ptb-shadow-soft);
}

.ptb-detail__media.ptb-wash {
  border-radius: var(--ptb-radius-xl);
  background-color: var(--ptb-detail-tint);
  box-shadow: none;
}

.ptb-detail__intro {
  display: grid;
  justify-items: start;
  gap: var(--ptb-space-3);
  min-width: 0;
}

/* Go-live-Feinschliff (Spec 2026-10-02 §1/§2a): Kategorie-, Alters- und
   Mitgliedschafts-Chip nebeneinander, bei Platzmangel umbrechend. */
.ptb-detail__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ptb-space-2);
}

/* Taupe-900: 7,4:1 auf Weiss und auf dem Sand der Seite. */
.ptb-detail__title {
  margin: 0;
  font-family: var(--ptb-font-display);
  font-size: var(--ptb-text-display-md);
  font-weight: var(--ptb-weight-display);
  line-height: var(--ptb-leading-display);
  letter-spacing: var(--ptb-tracking-display);
  color: var(--ptb-taupe-900);
}

.ptb-detail__lead {
  max-width: var(--ptb-prose-max);
  margin: var(--ptb-space-1) 0 0;
  font-size: var(--ptb-text-body-lg);
  line-height: var(--ptb-leading-body);
  color: var(--ptb-ink-700);
}

.ptb-detail__lead strong,
.ptb-detail__lead b {
  font-weight: var(--ptb-weight-bold);
  color: var(--ptb-ink-900);
}

.ptb-detail__block {
  display: grid;
  gap: var(--ptb-space-4);
  min-width: 0;
}

/* "Worum es geht." / "Wann und wo.": Display-Schrift, 28 px, Taupe-700
   (3,4:1 auf Sand - Grosstext). */
.ptb-detail__heading {
  margin: 0;
  font-family: var(--ptb-font-display);
  font-size: var(--ptb-text-display-sm);
  font-weight: var(--ptb-weight-display);
  line-height: var(--ptb-leading-snug);
  color: var(--ptb-taupe-700);
}

/* Fliesstext aus dem Seiteninhalt. Linksbuendig wie in der Vorlage (vorher
   Blocksatz mit Silbentrennung, Wunsch 21.09.). */
.ptb-prose {
  max-width: var(--ptb-prose-max);
  font-size: var(--ptb-text-body-md);
  line-height: var(--ptb-leading-body);
  color: var(--ptb-ink-700);
}

.ptb-prose > :first-child {
  margin-top: 0;
}

.ptb-prose > :last-child {
  margin-bottom: 0;
}

.ptb-prose p {
  margin: 0 0 0.75em;
}

.ptb-prose ul,
.ptb-prose ol {
  margin: 0 0 var(--ptb-space-4);
}

.ptb-prose strong,
.ptb-prose b {
  font-weight: var(--ptb-weight-bold);
  color: var(--ptb-ink-900);
}

.ptb-prose a {
  color: var(--ptb-text-link);
}

.ptb-prose a:hover {
  color: var(--ptb-text-link-hover);
  text-decoration: underline;
}

/* "Weiterlesen ⌄" / "Weniger anzeigen ⌃": die Hoehe des eingeklappten Textes
   setzt placetobe-detail.js (genau unter der 6. Zeile). Ohne Skript gibt es
   is-collapsible nicht - dann ist der Knopf weg und der Text ganz da. */
.ptb-about.is-collapsed .ptb-about__text {
  overflow: hidden;
}

/* Review F3: mit Skript schon vor dem Messen ungefaehr eingeklappt (6 Zeilen
   Fliesstext), damit die Seite beim Laden nicht zusammenspringt; das Skript
   setzt danach die genaue Hoehe bzw. nimmt die Grenze bei kurzem Text weg. */
.ptb-detail.is-js:not(.is-enhanced) .ptb-about__text {
  max-height: calc(var(--ptb-leading-body) * 6em);
  overflow: hidden;
}

.ptb-readmore {
  display: none;
  align-items: center;
  gap: var(--ptb-space-1);
  justify-self: start;
  min-height: var(--ptb-control-h-sm);
  margin: calc(-1 * var(--ptb-space-2)) 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ptb-text-link);
  font-family: var(--ptb-font-body);
  font-size: var(--ptb-text-body-md);
  font-weight: var(--ptb-weight-semibold);
  line-height: var(--ptb-leading-snug);
  cursor: pointer;
}

.ptb-about.is-collapsible .ptb-readmore {
  display: inline-flex;
}

.ptb-readmore:hover {
  color: var(--ptb-text-link-hover);
  text-decoration: underline;
}

.ptb-readmore .ptb-icon {
  transition: transform var(--ptb-dur-fast) var(--ptb-ease-soft);
}

.ptb-readmore[aria-expanded="true"] .ptb-icon {
  transform: rotate(180deg);
}

/* Karte "Wann und wo." (Spec §20.3): je Durchgang zwei Spalten (Uhr / Pin)
   und die Termin-Kacheln, unten die Fusszeile "Bitte mitbringen:" in einem
   warmen Band bis an den Kartenrand. */
/* Zwei Klassen: die Mobil-Regel `.ptb-card { padding }` (<= 600 px) soll
   hier nicht greifen - die Polsterung tragen Durchgangs-Teile und Fusszeile. */
.ptb-card.ptb-when {
  display: grid;
  padding: 0;
  overflow: hidden;
  border-radius: var(--ptb-radius-xl);
}

.ptb-when__run {
  display: grid;
  gap: var(--ptb-space-6);
  padding: var(--ptb-space-6);
  min-width: 0;
}

/* Ohne Skript stehen mehrere Durchgaenge untereinander. Final-Review R2: nur
   dann - mit Skript ist der vorherige Teil nur per JS-Klasse `hidden`
   (Server-Attribut bleibt gesetzt), sonst zeigte der Nachbar-Selektor bei
   Durchgang 2/3 zusaetzlich zur Kartenlinie eine zweite Oberkante. */
.ptb-detail:not(.is-js) .ptb-when__run + .ptb-when__run {
  border-top: 1px solid var(--ptb-border-soft);
}

.ptb-when__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ptb-space-5) var(--ptb-space-7);
}

.ptb-when__grid--single {
  grid-template-columns: minmax(0, 1fr);
}

.ptb-when__col {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--ptb-space-3);
  min-width: 0;
}

.ptb-when__col > .ptb-icon {
  margin-top: 1px;
  color: var(--ptb-text-brand-soft);
}

.ptb-when__text {
  display: grid;
  justify-items: start;
  gap: var(--ptb-space-1);
  min-width: 0;
}

.ptb-when__main {
  margin: 0;
  font-size: var(--ptb-text-body-md);
  font-weight: var(--ptb-weight-bold);
  line-height: var(--ptb-leading-snug);
  color: var(--ptb-ink-900);
  overflow-wrap: anywhere;
}

.ptb-when__sub {
  margin: 0;
  font-size: var(--ptb-text-body-sm);
  line-height: var(--ptb-leading-snug);
  color: var(--ptb-text-muted);
  overflow-wrap: anywhere;
}

.ptb-when__link {
  margin-top: var(--ptb-space-1);
  font-size: var(--ptb-text-body-sm);
  font-weight: var(--ptb-weight-semibold);
  color: var(--ptb-text-link);
  text-decoration: none;
}

.ptb-when__link:hover {
  color: var(--ptb-text-link-hover);
  text-decoration: underline;
}

.ptb-when__bring {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ptb-space-2) var(--ptb-space-5);
  padding: var(--ptb-space-4) var(--ptb-space-6);
  border-top: 1px solid var(--ptb-border-soft);
  background: var(--ptb-surface-warm);
  font-size: var(--ptb-text-body-md);
  line-height: var(--ptb-leading-snug);
}

.ptb-when__bring-label {
  font-weight: var(--ptb-weight-bold);
  color: var(--ptb-ink-900);
}

.ptb-when__bring-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ptb-space-2) var(--ptb-space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ptb-when__bring-item {
  display: inline-flex;
  align-items: center;
  gap: var(--ptb-space-2);
  color: var(--ptb-ink-700);
}

.ptb-when__bring-item .ptb-icon {
  color: var(--ptb-status-success);
}

/* Termin-Kacheln (reine Anzeige, Spec §20.5 Fassung 25.09.): "1. Termin"
   klein ueber "3. Nov" fett, Lila-Ton. Das
   Raster nimmt so viele Spalten, wie hineinpassen - 128 px Mindestbreite
   statt der 150 px aus der Spec, damit fuenf Termine wie in der Vorlage in
   einer Reihe stehen (Hauptspalte ~790 px bei 1366 px Fensterbreite). */
.ptb-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  gap: var(--ptb-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ptb-tiles__item {
  display: flex;
  min-width: 0;
}

.ptb-tile {
  flex: 1 1 auto;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 2px;
  min-height: 72px;
  padding: var(--ptb-space-3) var(--ptb-space-2);
  border: 1.5px solid transparent;
  border-radius: var(--ptb-radius-md);
  background: var(--ptb-lilac-100);
  color: var(--ptb-ink-900);
  text-align: center;
}

/* Lilac-900 statt des Vorlagen-Lila (lilac-700 kaeme auf lilac-100 nur auf
   ~4,2:1 - bei 13 px zu wenig). */
.ptb-tile__label {
  font-size: var(--ptb-text-caption);
  font-weight: var(--ptb-weight-semibold);
  line-height: var(--ptb-leading-snug);
  color: var(--ptb-lilac-900);
}

.ptb-tile__date {
  font-size: var(--ptb-text-body-lg);
  font-weight: var(--ptb-weight-bold);
  line-height: 1.2;
  white-space: nowrap;
}

.ptb-tile__note {
  font-size: var(--ptb-text-caption);
  line-height: var(--ptb-leading-snug);
  color: var(--ptb-text-muted);
}

/* Spec-Luecke 1 (Final-Fixwave Punkt 16): weicht dieser Termin in Uhrzeit
   oder Standort vom Durchgang ab, steht der Zusatz klein unter dem Datum -
   in derselben Lila-Familie wie das Label, damit er nicht wie "vorbei"
   (neutral/gedaempft) wirkt. */
.ptb-tile__extra {
  font-size: var(--ptb-text-caption);
  line-height: var(--ptb-leading-snug);
  color: var(--ptb-lilac-900);
}

/* Vorbei: gedaempft (neutraler Ton, nicht blasse Schrift). */
.ptb-tile.is-past {
  background: var(--ptb-surface-muted);
}

.ptb-tile.is-past .ptb-tile__label,
.ptb-tile.is-past .ptb-tile__date,
.ptb-tile.is-past .ptb-tile__extra {
  color: var(--ptb-text-muted);
}

.ptb-tile.is-past .ptb-tile__date {
  font-weight: var(--ptb-weight-semibold);
}

/* Trainerin-Kasten: Tint Entwicklung, Name als Display-Schrift, keine Adresse. */
.ptb-trainer {
  display: flex;
  align-items: center;
  gap: var(--ptb-space-4);
  background: var(--ptb-tint-entwicklung);
  border-color: var(--ptb-lilac-200);
  box-shadow: var(--ptb-shadow-soft);
}

.ptb-trainer__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: var(--ptb-radius-pill);
  background: var(--ptb-surface-card);
  color: var(--ptb-ink-entwicklung);
}

.ptb-trainer__text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.ptb-trainer__label {
  font-size: var(--ptb-text-overline);
  font-weight: var(--ptb-weight-bold);
  letter-spacing: var(--ptb-tracking-overline);
  text-transform: uppercase;
  color: var(--ptb-ink-entwicklung);
}

.ptb-trainer__name {
  font-family: var(--ptb-font-display);
  font-size: var(--ptb-text-heading-md);
  font-weight: var(--ptb-weight-bold);
  line-height: var(--ptb-leading-snug);
  color: var(--ptb-text-brand);
}

/* Buchungsbox (Spec §20.4): sticky ab 1024 px (top ~ Headerhoehe + 16 px),
   darunter statisch (@media (max-width: 1024px) unten). Review F1: ist die
   Box hoeher als das Fenster, klebt sie mit der Unterkante 16 px ueber dem
   Fensterrand - Knopf, Plaetze und Storno bleiben erreichbar. Die Hoehe
   (--ptb-box-h) misst placetobe-detail.js; ohne Skript bleibt es bei 96 px. */
.ptb-booking-box {
  position: sticky;
  top: 96px;
  top: min(96px, calc(100vh - var(--ptb-box-h, 0px) - 16px));
  display: grid;
  gap: var(--ptb-space-5);
  padding: calc(var(--ptb-space-6) + var(--ptb-space-1));
  border-radius: var(--ptb-radius-xl);
}

.ptb-box__title {
  margin: 0;
  font-family: var(--ptb-font-display);
  font-size: var(--ptb-text-display-sm);
  font-weight: var(--ptb-weight-display);
  line-height: var(--ptb-leading-snug);
  color: var(--ptb-taupe-900);
}

/* "1 · DURCHGANG" / "2 · BUCHUNGSART": Overline in ink-500 (5,9:1 auf Weiss;
   das Taupe der Vorlage kaeme bei 12 px nur auf ~4:1). */
.ptb-box__step {
  display: grid;
  gap: var(--ptb-space-3);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.ptb-box__step-label {
  padding: 0;
  font-size: var(--ptb-text-overline);
  font-weight: var(--ptb-weight-bold);
  line-height: var(--ptb-leading-snug);
  letter-spacing: var(--ptb-tracking-overline);
  text-transform: uppercase;
  color: var(--ptb-ink-500);
}

/* Review F4: eine gerenderte <legend> gehoert nicht zur Grid-Box des
   fieldset - der gap greift dort nicht. Derselbe Abstand wie beim Segment. */
.ptb-box__modes > .ptb-box__step-label {
  margin-bottom: var(--ptb-space-3);
}

/* "Welcher Termin?" (Spec §20.5, Vorlage design-box-try-and-move.png):
   kleine Pillen je Try-and-Move-Termin, umbrechend; gewaehlt aqua-100 mit
   aqua-700-Rahmen wie die Radio-Karte, ausgebuchte gesperrt. Ohne Skript
   sind es Links (Hover-Rahmen). */
.ptb-box__which {
  display: grid;
  gap: var(--ptb-space-3);
  min-width: 0;
}

.ptb-box__which-label {
  font-size: var(--ptb-text-body-md);
  font-weight: var(--ptb-weight-bold);
  line-height: var(--ptb-leading-snug);
  color: var(--ptb-ink-900);
}

.ptb-box__pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ptb-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ptb-box__pill-item {
  display: flex;
}

.ptb-box__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 4.5rem;
  min-height: 40px;
  padding: var(--ptb-space-2) var(--ptb-space-4);
  border: 1.5px solid var(--ptb-border-strong);
  border-radius: var(--ptb-radius-pill);
  background: var(--ptb-surface-card);
  color: var(--ptb-ink-700);
  font-size: var(--ptb-text-body-sm);
  font-weight: var(--ptb-weight-bold);
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--ptb-dur-fast) var(--ptb-ease-soft), background-color var(--ptb-dur-fast) var(--ptb-ease-soft), color var(--ptb-dur-fast) var(--ptb-ease-soft);
}

.ptb-box__pill:not(.is-full):hover {
  border-color: var(--ptb-taupe-700);
  color: var(--ptb-ink-900);
}

.ptb-box__pill.is-selected {
  border-color: var(--ptb-aqua-700);
  background: var(--ptb-aqua-100);
  color: var(--ptb-aqua-900);
}

.ptb-box__pill.is-full {
  border-style: dashed;
  background: var(--ptb-surface-muted);
  color: var(--ptb-text-muted);
  text-decoration: line-through;
  cursor: not-allowed;
}

.ptb-box__pill:focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--ptb-ring-focus);
}

@media (forced-colors: active) {
  .ptb-box__pill.is-selected {
    border-color: Highlight;
    outline: 2px solid Highlight;
  }
}

/* Segment "Durchgang": Pillen-Container im Sand, die gewaehlte Pille weiss
   mit Schatten. Ohne Skript verborgen (dann stehen die Durchgaenge
   untereinander). */
.ptb-box__segment {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: var(--ptb-space-1);
  padding: var(--ptb-space-1);
  border-radius: var(--ptb-radius-pill);
  background: var(--ptb-sand-200);
}

.ptb-box__segment-tab {
  display: grid;
  justify-items: center;
  align-content: center;
  min-width: 0;
  min-height: var(--ptb-control-h-md);
  margin: 0;
  padding: var(--ptb-space-2) var(--ptb-space-3);
  border: 0;
  border-radius: var(--ptb-radius-pill);
  background: transparent;
  color: var(--ptb-ink-500);
  font-family: var(--ptb-font-body);
  font-size: var(--ptb-text-body-md);
  font-weight: var(--ptb-weight-semibold);
  line-height: var(--ptb-leading-snug);
  text-align: center;
  cursor: pointer;
  transition: background-color var(--ptb-dur-fast) var(--ptb-ease-soft), color var(--ptb-dur-fast) var(--ptb-ease-soft), box-shadow var(--ptb-dur-fast) var(--ptb-ease-soft);
}

.ptb-box__segment-tab:hover {
  color: var(--ptb-ink-900);
}

.ptb-box__segment-tab[aria-selected="true"] {
  background: var(--ptb-surface-card);
  color: var(--ptb-ink-900);
  box-shadow: 0 1px 3px rgba(94,83,78,.16), var(--ptb-shadow-soft);
}

.ptb-box__segment-date {
  max-width: 100%;
  overflow-wrap: anywhere;
}

@media (forced-colors: active) {
  .ptb-box__segment-tab[aria-selected="true"] {
    outline: 2px solid Highlight;
  }
}

/* Review F3: `is-js` setzt ein Einzeiler im Markup vor dem ersten Rendern -
   Segment, Radios und die Auswahl eines Durchgangs stehen so sofort, ohne
   dass die Ohne-Skript-Darstellung aufblitzt. */
.ptb-detail:not(.is-js) [data-ptb-run-control] {
  display: none;
}

.ptb-detail.is-js [data-ptb-run-panel]:not(.is-current) {
  display: none;
}

/* Plan E16-2 (Spec §22.2): Stufe "Standort" - Pillen im Muster der
   Terminwahl (.ptb-box__pill: gewaehlt aqua-100 mit aqua-700-Rahmen, Fokus,
   forced-colors und Bewegungsreduktion gelten mit), hier als <button>: Schrift
   und Rand zuruecksetzen; lange Standortnamen ("An der Schanze -
   Bewegungsraum 1") brechen um, statt die Box zu sprengen. */
.ptb-box__pill--location {
  flex: 1 1 auto;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding-inline: var(--ptb-space-3);
  font-family: var(--ptb-font-body);
  white-space: normal;
  overflow-wrap: anywhere;
  text-wrap: balance;
  text-align: center;
}

/* Die Standort-Pillen stehen als gleich breite Kacheln in einem Raster
   statt in der Fliesszeile der Terminwahl: sonst nimmt eine lange
   Bezeichnung ("An der Schanze - Bewegungsraum 1") zweizeilig die ganze
   Breite und die kurze ("Loft21 Tanzstudio") steht als Stummel darunter.
   Passen zwei Spalten von 11rem nicht in die Box (schmale Breiten; darunter
   braeche "Bewegungsraum" mitten im Wort), stehen
   die Pillen untereinander in voller Breite. Alle Pillen sind gleich hoch
   (Rasterzeilen 1fr, die Pille fuellt ihr Listenelement); `text-wrap:
   balance` verteilt eine umbrechende Bezeichnung auf gleich lange Zeilen
   statt eine einzelne "1" in die zweite Zeile zu setzen. */
.ptb-box__locations .ptb-box__pills {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  grid-auto-rows: 1fr;
}

.ptb-box__locations .ptb-box__pill-item {
  min-width: 0;
}

/* Ohne Skript: Stufe "Standort" verborgen (wie das Segment) und die Nummern
   der Stufen weg - dann stehen die Standorte mit Ueberschrift untereinander. */
.ptb-detail:not(.is-js) [data-ptb-location-control],
.ptb-detail:not(.is-js) .ptb-box__step-no {
  display: none;
}

/* Mit Skript nur Segment und Ueberschrift des gewaehlten Standorts
   (`is-current` setzt der Server vor, dann das Skript). */
.ptb-detail.is-js [data-ptb-run-control][data-ptb-location]:not(.is-current),
.ptb-detail.is-js [data-ptb-location-heading]:not(.is-current) {
  display: none;
}

/* Standort-Ueberschrift der Box: ohne Skript sichtbar ueber den
   Durchgaengen ihres Standorts (zwischen zwei Standorten eine kraeftigere
   Linie als zwischen zwei Durchgaengen), mit Skript nur fuer Screenreader
   (siehe .ptb-box__run-title). */
.ptb-box__location-title {
  margin: 0;
  font-family: var(--ptb-font-display);
  font-size: var(--ptb-text-heading-md);
  font-weight: var(--ptb-weight-display);
  line-height: var(--ptb-leading-snug);
  color: var(--ptb-taupe-900);
  overflow-wrap: anywhere;
}

.ptb-detail:not(.is-js) .ptb-box__run + .ptb-box__location-title {
  padding-top: var(--ptb-space-6);
  border-top: 2px solid var(--ptb-border-strong);
}

/* Ein Teil je Durchgang. Mit Skript nennt das Segment den Durchgang - die
   Ueberschrift ist dann nur noch fuer Screenreader da. */
.ptb-box__run {
  display: grid;
  gap: var(--ptb-space-5);
  min-width: 0;
}

.ptb-box__run-title {
  margin: 0;
  font-family: var(--ptb-font-body);
  font-size: var(--ptb-text-body-sm);
  font-weight: var(--ptb-weight-bold);
  line-height: var(--ptb-leading-snug);
  color: var(--ptb-taupe-900);
}

.ptb-detail.is-js .ptb-box__run-title,
.ptb-detail.is-js .ptb-box__location-title {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

/* Ohne Skript stehen mehrere Durchgaenge untereinander. */
.ptb-detail:not(.is-js) .ptb-box__run + .ptb-box__run {
  padding-top: var(--ptb-space-5);
  border-top: 1px solid var(--ptb-border-soft);
}

/* Radio-Karten "Ganzer Kurs" / "Try and Move": gewaehlt aqua-700-Rahmen auf
   aqua-100. Ohne Buchungsart-Wahl steht "Ganzer Kurs" (bzw. der Workshop)
   als statische Karte im gewaehlten Look. */
.ptb-box__choice {
  display: flex;
  align-items: center;
  gap: var(--ptb-space-3);
  min-width: 0;
  margin: 0;
  padding: var(--ptb-space-4);
  border: 1.5px solid var(--ptb-border-soft);
  border-radius: calc(var(--ptb-radius-md) + 4px);
  background: var(--ptb-surface-card);
  cursor: pointer;
  transition: border-color var(--ptb-dur-fast) var(--ptb-ease-soft), background-color var(--ptb-dur-fast) var(--ptb-ease-soft);
}

.ptb-box__choice:hover {
  border-color: var(--ptb-taupe-300);
}

.ptb-box__choice:has(.ptb-box__radio:checked),
.ptb-box__choice--static {
  border-color: var(--ptb-aqua-700);
  background: var(--ptb-aqua-100);
}

.ptb-box__choice--static {
  cursor: default;
}

.ptb-box__choice:has(.ptb-box__radio:disabled) {
  cursor: not-allowed;
  border-color: var(--ptb-border-soft);
  background: var(--ptb-surface-muted);
}

.ptb-box__choice:has(.ptb-box__radio:focus-visible) {
  box-shadow: var(--ptb-ring-focus);
}

/* Radio: 22 px, Taupe-Rahmen (3:1), gewaehlt aqua-700 mit Punkt. */
.ptb-box__radio {
  appearance: none;
  -webkit-appearance: none;
  display: inline-grid;
  place-content: center;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin: 0;
  border: 1.5px solid var(--ptb-taupe-700);
  border-radius: 50%;
  background: var(--ptb-surface-card);
  cursor: inherit;
}

.ptb-box__radio::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ptb-aqua-700);
  transform: scale(0);
  transition: transform var(--ptb-dur-fast) var(--ptb-ease-soft);
}

.ptb-box__radio:checked {
  border: 2px solid var(--ptb-aqua-700);
}

.ptb-box__radio:checked::after {
  transform: scale(1);
}

.ptb-box__radio:focus-visible {
  outline: 2px solid transparent;
}

.ptb-box__radio:disabled {
  border-color: var(--ptb-taupe-300);
}

@media (forced-colors: active) {
  .ptb-box__radio {
    border-color: CanvasText;
  }

  .ptb-box__radio:checked {
    border-color: Highlight;
  }

  .ptb-box__radio:checked::after {
    background: Highlight;
  }
}

/* Ohne Skript haette eine andere Wahl keine Wirkung (der Knopf bucht den
   ganzen Kurs, Try and Move laeuft ueber die Termin-Pillen): Radios
   verborgen, Karten nicht klickbar. */
.ptb-detail:not(.is-js) .ptb-box__radio {
  display: none;
}

.ptb-detail:not(.is-js) .ptb-box__choice {
  pointer-events: none;
  cursor: default;
}

.ptb-box__choice-body {
  display: grid;
  flex: 1 1 auto;
  gap: 2px;
  min-width: 0;
}

.ptb-box__choice-title {
  font-size: var(--ptb-text-body-md);
  font-weight: var(--ptb-weight-bold);
  line-height: var(--ptb-leading-snug);
  color: var(--ptb-ink-900);
}

.ptb-box__choice-hint {
  font-size: var(--ptb-text-body-sm);
  line-height: var(--ptb-leading-snug);
  color: var(--ptb-text-muted);
}

.ptb-box__choice-price {
  flex: 0 0 auto;
  font-size: var(--ptb-text-body-lg);
  font-weight: var(--ptb-weight-bold);
  line-height: 1.2;
  white-space: nowrap;
  color: var(--ptb-ink-900);
}

/* Trennlinie, dann "Gesamt 90,00 €". */
.ptb-box__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ptb-space-3);
  margin: 0;
  padding-top: var(--ptb-space-5);
  border-top: 1px solid var(--ptb-border-soft);
}

.ptb-box__total-label {
  font-size: var(--ptb-text-body-md);
  font-weight: var(--ptb-weight-bold);
  color: var(--ptb-ink-900);
}

.ptb-box__total-amount {
  font-family: var(--ptb-font-display);
  font-size: var(--ptb-text-display-sm);
  font-weight: var(--ptb-weight-bold);
  line-height: 1;
  white-space: nowrap;
  color: var(--ptb-taupe-900);
}

.ptb-box__note {
  margin: calc(-1 * var(--ptb-space-2)) 0 0;
  font-size: var(--ptb-text-caption);
  line-height: var(--ptb-leading-body);
  color: var(--ptb-text-muted);
}

/* Spec 2026-10-02 §2a: Kernsatz "wessen Mitgliedschaft zaehlt" - eng am
   Beitrags-Hinweis, eine Stufe dunkler, weil er eine Entscheidung erklaert. */
.ptb-box__note + .ptb-box__note--explain {
  margin-top: calc(-1 * var(--ptb-space-4));
}

.ptb-box__note--explain {
  color: var(--ptb-ink-700);
}

/* Spec 2026-10-02 §2e: Workshop-Mitgliederpreis - welche Mitgliedschaft
   zaehlt, rechtsbuendig unter der Preisspalte der Auswahlkarte. */
.ptb-box__note--member {
  text-align: end;
}

.ptb-box__actions {
  display: grid;
}

.ptb-box__cta {
  width: 100%;
}

/* Lila-Knopf der Vorlage: lilac-700, weisse Schrift 4,9:1. */
.ptb-btn--accent-lila {
  background: var(--ptb-lilac-700);
  color: var(--ptb-text-inverse);
}

.ptb-btn--accent-lila:hover {
  background: var(--ptb-lilac-700);
  filter: brightness(.92);
}

/* "✓ 8 von 8 Plätzen frei" - Ton und Icon wie die Status-Pille. Bei Try and
   Move ("5 Plätze frei am 3. November") stehen Haken und Uhr im Markup; der
   Zustand der gewaehlten Pille entscheidet, welches zu sehen ist. */
.ptb-box__places .ptb-box__places-icon--few,
.ptb-box__places--wenige .ptb-box__places-icon--ok {
  display: none;
}

.ptb-box__places--wenige .ptb-box__places-icon--few {
  display: inline-block;
}

.ptb-box__places {
  display: flex;
  align-items: center;
  gap: var(--ptb-space-2);
  margin: 0;
  font-size: var(--ptb-text-body-md);
  font-weight: var(--ptb-weight-semibold);
  line-height: var(--ptb-leading-snug);
  color: var(--ptb-status-success);
}

.ptb-box__places--wenige {
  color: var(--ptb-status-warning);
}

.ptb-box__places--ausgebucht {
  color: var(--ptb-status-error);
}

.ptb-box__storno {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--ptb-space-2);
  margin: calc(-1 * var(--ptb-space-2)) 0 0;
  font-size: var(--ptb-text-caption);
  line-height: var(--ptb-leading-body);
  color: var(--ptb-text-muted);
}

.ptb-box__storno .ptb-icon {
  margin-top: 2px;
  color: var(--ptb-text-brand-soft);
}

.ptb-box__pay {
  display: grid;
  gap: var(--ptb-space-2);
}

.ptb-box__secure {
  display: flex;
  align-items: center;
  gap: var(--ptb-space-2);
  margin: 0;
  font-size: var(--ptb-text-caption);
  color: var(--ptb-status-success);
}

/* Zahlarten-Marken: ruhige Kaertchen im Sandton statt bunter Fremdlogos. */
.ptb-paymarks {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ptb-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ptb-paymark {
  display: inline-flex;
  align-items: center;
  gap: var(--ptb-space-1);
  min-height: 24px;
  padding: 2px var(--ptb-space-2);
  border: 1px solid var(--ptb-border-soft);
  border-radius: var(--ptb-radius-xs);
  background: var(--ptb-surface-muted);
  font-size: var(--ptb-text-overline);
  font-weight: var(--ptb-weight-bold);
  letter-spacing: .04em;
  color: var(--ptb-text-brand);
}

/* 12 px kleine Wortmarke: zu klein fuer die 3:1-Ausnahme grosser Schrift,
   deshalb taupe-900 (7,4:1) statt taupe-700. */
.ptb-paymark__mark {
  display: block;
  color: var(--ptb-taupe-900);
}

/* --------------------------------------------------------------------------
   Buchungsart und Durchgang (placetobe-detail.js)
   - Buchungsart: Box-Teil und Mobil-Leiste eines Durchgangs tragen
     data-ptb-mode-scope; Teile mit data-ptb-for="block"/"event" gelten nur
     fuer diese Buchungsart. Die Klasse is-mode-event setzt der Server
     (vorgewaehlt) bzw. das Skript. data-ptb-for-js="event" (Terminwahl)
     blendet erst mit JavaScript aus - ohne Skript sind die Pillen der Weg zu
     Try and Move.
   - Durchgang: das Skript setzt `hidden` an den Teilen der anderen
     Durchgaenge; die Klassenregeln (display: grid/flex) duerfen das nicht
     ueberschreiben.
   -------------------------------------------------------------------------- */
.ptb-detail [data-ptb-mode-scope]:not(.is-mode-event) [data-ptb-for="event"],
.ptb-detail [data-ptb-mode-scope].is-mode-event [data-ptb-for="block"],
.ptb-detail.is-js [data-ptb-mode-scope]:not(.is-mode-event) [data-ptb-for-js="event"] {
  display: none;
}

.ptb-detail [hidden] {
  display: none !important;
}

/* Ohne Skript stehen mehrere Buchungsbox-Teile untereinander: die Box ist
   nicht sticky (sie waere hoeher als der Schirm), jeder Teil traegt seinen
   eigenen Knopf - auch mobil, wo ihn sonst die feste Leiste uebernimmt -, und
   die festen Leisten entfallen (sonst waere nur der vorausgewaehlte
   Durchgang buchbar, Review E13-2 Q1). */
.ptb-detail[data-ptb-runs]:not(.is-js) .ptb-booking-box {
  position: static;
}

.ptb-detail[data-ptb-runs]:not(.is-js) .ptb-box__actions {
  display: grid;
}

.ptb-detail[data-ptb-runs]:not(.is-js) .ptb-booking-bar {
  display: none;
}

/* --------------------------------------------------------------------------
   Buchung (page-placetobe-booking.php): links die Zusammenfassung des
   gewaehlten Umfangs, rechts die Formularkarte. Die Formularklassen selbst
   (.cuyl-form, .form-field, .cuyl-form__consent) sind in Abschnitt 5 gestylt;
   hier stehen nur Raster, Zusammenfassung und die Zeilen unter dem Knopf.
   -------------------------------------------------------------------------- */
.ptb-checkout__grid {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: var(--ptb-space-8);
  align-items: start;
}

/* Die Zusammenfassung bleibt beim Ausfuellen sichtbar - wie die Buchungsbox
   der Kursseite unter der Kopfzeile. */
.ptb-summary {
  position: sticky;
  top: 96px;
  display: grid;
  gap: var(--ptb-space-4);
  align-content: start;
}

/* Flacher als das Bildfeld der Kurskarte; den unteren Abstand gibt das Bild
   ab, er kommt aus dem Grid-Gap. */
.ptb-summary__media {
  height: 120px;
  margin-bottom: 0;
}

.ptb-summary__title {
  margin: 0;
  font-family: var(--ptb-font-display);
  font-size: var(--ptb-text-heading-md);
  line-height: var(--ptb-leading-snug);
  color: var(--ptb-text-brand);
}

/* Gewaehlter Durchgang unter dem Kurstitel (Plan E13-2), nur bei Kursen mit
   mehreren Durchgaengen oder nach einem Rueckfall auf den aktuellen. */
.ptb-summary__run {
  margin: calc(-1 * var(--ptb-space-2)) 0 0;
  font-size: var(--ptb-text-body-sm);
  font-weight: var(--ptb-weight-semibold);
  line-height: var(--ptb-leading-snug);
  color: var(--ptb-text-brand);
}

.ptb-summary__meta {
  display: grid;
  gap: var(--ptb-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ptb-summary__row {
  display: flex;
  align-items: flex-start;
  gap: var(--ptb-space-2);
  font-size: var(--ptb-text-body-sm);
  line-height: var(--ptb-leading-snug);
  color: var(--ptb-text-muted);
}

.ptb-summary__row .ptb-icon {
  margin-top: 1px;
  color: var(--ptb-text-brand-soft);
}

.ptb-summary__price {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ptb-space-3);
  padding-top: var(--ptb-space-4);
  border-top: 1px solid var(--ptb-border-soft);
}

.ptb-summary__price-label {
  font-size: var(--ptb-text-body-sm);
  font-weight: var(--ptb-weight-semibold);
  line-height: var(--ptb-leading-snug);
  color: var(--ptb-text-muted);
}

.ptb-summary__price-amount {
  font-family: var(--ptb-font-display);
  font-size: var(--ptb-text-heading-lg);
  font-weight: var(--ptb-weight-bold);
  line-height: 1;
  white-space: nowrap;
  color: var(--ptb-taupe-700);
}

.ptb-checkout__main {
  display: grid;
  gap: var(--ptb-space-5);
  min-width: 0;
}

.ptb-checkout__card {
  display: grid;
  gap: var(--ptb-space-4);
  max-width: 640px;
  padding: var(--ptb-space-7);
}

.ptb-checkout__title {
  margin: 0;
  font-family: var(--ptb-font-display);
  font-size: var(--ptb-text-display-sm);
  line-height: var(--ptb-leading-display);
  color: var(--ptb-taupe-700);
}

.ptb-checkout__lead {
  margin: 0;
  font-size: var(--ptb-text-body-lg);
  line-height: var(--ptb-leading-body);
  color: var(--ptb-text-muted);
}

.ptb-checkout__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ptb-space-3);
  margin: 0;
}

/* Rueckmeldung des Servers (cuyl_get_form_notice): eine Karte im Statuston,
   nicht der graue Kasten aus theme.css. */
.ptb-notice {
  max-width: 640px;
  margin: 0;
  font-size: var(--ptb-text-body-md);
  font-weight: var(--ptb-weight-semibold);
  line-height: var(--ptb-leading-body);
}

.ptb-notice--error {
  border-color: var(--ptb-status-error);
  background: var(--ptb-status-error-tint);
  color: var(--ptb-status-error);
}

.ptb-notice--success {
  border-color: var(--ptb-status-success);
  background: var(--ptb-status-success-tint);
  color: var(--ptb-status-success);
}

/* Hinweis ohne Fehler, z. B. "Der gewünschte Durchgang ist nicht (mehr)
   buchbar …" (Plan E13-2): aqua-900 auf aqua-100 (5,4:1). */
.ptb-notice--info {
  border-color: var(--ptb-status-info);
  background: var(--ptb-status-info-tint);
  color: var(--ptb-status-info);
}

/* Feldreihen: Vorname/Nachname und E-Mail/Telefon zweispaltig, PLZ schmal. */
.ptb-row {
  display: grid;
  gap: var(--ptb-space-4);
  /* Issues #2/#3 (Plan E12, Spec §18): Feldgruppen oben ausrichten statt
     stretch. Ohne das dehnt sich ein .form-field mit weniger eigenem Inhalt
     (z. B. E-Mail ohne Feldhilfe) auf die Hoehe des Nachbarfelds
     (z. B. Telefon MIT Feldhilfe "Für kurzfristige Änderungen ...") -
     sichtbar an einem hoeher gezogenen Input, das im Fehlerzustand noch
     staerker auffaellt (unterschiedliche Fehlertext-Zeilen je Feld). */
  align-items: start;
}

.ptb-row > .form-field {
  min-width: 0;
}

.ptb-row--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ptb-row--zip {
  grid-template-columns: 140px minmax(0, 1fr);
}

/* Drei Klassen, damit die Blockregel fuer Labels aus Abschnitt 5 nicht
   gewinnt - das Icon steht neben dem Text, nicht darunter.
   Issue #3 (Plan E12, Spec §18): inline-flex statt flex (das Label bleibt
   damit so breit wie sein Inhalt, nicht die volle .form-field-Breite) und
   ein min-height, damit ein Label MIT Icon (z. B. „E-Mail“) exakt so hoch
   ist wie eines OHNE (z. B. „Telefon“) - sonst sitzt der Text neben dem
   Icon minimal tiefer/hoeher als der reine Text daneben. */
body.brand-placetobe .form-field .ptb-label {
  display: inline-flex;
  align-items: center;
  gap: var(--ptb-space-2);
  min-height: 20px;
}

.ptb-label__icon {
  color: var(--ptb-text-brand-soft);
}

/* Steht im Grid des .form-field - der Abstand kommt aus dessen Gap. */
.ptb-hint {
  display: block;
  margin: 0;
  font-size: var(--ptb-text-caption);
  line-height: var(--ptb-leading-snug);
  color: var(--ptb-text-muted);
}

.ptb-consent {
  display: grid;
  gap: var(--ptb-space-3);
}

.ptb-consent__hint {
  display: block;
  margin-top: var(--ptb-space-1);
  font-size: var(--ptb-text-caption);
  line-height: var(--ptb-leading-snug);
  color: var(--ptb-text-brand-soft);
}

/* form-validation.js haengt die Meldung ans Label an; im Zweispalten-Raster
   des Haekchens gehoert sie in die Textspalte, nicht unter das Kaestchen. */
body.brand-placetobe .cuyl-form__consent .form-field__error {
  grid-column: 2;
}

.ptb-checkout__cta {
  width: 100%;
}

.ptb-checkout__secure {
  display: flex;
  align-items: center;
  gap: var(--ptb-space-2);
  margin: 0;
  font-size: var(--ptb-text-caption);
  color: var(--ptb-status-success);
}

/* Preiszeile der Zusammenfassung (Modus "enrollment"): Kurspreis + Beitrag,
   steht unter .ptb-summary__price. */
.ptb-summary__fee-note {
  margin: calc(-1 * var(--ptb-space-2)) 0 0;
  font-size: var(--ptb-text-caption);
  line-height: var(--ptb-leading-snug);
  color: var(--ptb-text-muted);
}

/* --------------------------------------------------------------------------
   Anmeldeformular (page-placetobe-booking.php, Modus "enrollment"): Kindfelder
   und Mitgliedschaftsblock. Feldreihen, Checkboxen und Fehlerbox teilt es sich
   mit dem Stripe-Formular (.ptb-row, .form-field, .cuyl-form__consent,
   .ptb-check, .ptb-notice - alle oben in diesem Abschnitt); hier stehen nur
   die Teile, die es sonst nirgends gibt.
   -------------------------------------------------------------------------- */
.ptb-child-fields {
  display: grid;
  gap: var(--ptb-space-4);
  margin: 0;
  padding: 0;
  border: none;
}

.ptb-child-fields > .ptb-label {
  padding: 0;
  font-family: var(--ptb-font-display);
  font-size: var(--ptb-text-body-lg);
  font-weight: var(--ptb-weight-semibold);
  color: var(--ptb-text-brand);
}

/* --------------------------------------------------------------------------
   Anmelde-Wizard (page-placetobe-booking.php, Modus "enrollment", Spec §16):
   Fortschrittsleiste, drei Schritte, Mitgliedschaftsauswahl, Zusammenfassung
   mit Positionen, Weiter/Zurueck. Visuelles Vorbild ist der A4K-Wizard
   (.signup-wizard* in theme.css), hier in der Place-To-Be-Palette.
   Ohne JavaScript bleiben Fortschritt, Navigation und Zusammenfassung
   `hidden` und alle drei Schritte stehen untereinander - die Klassenregeln
   unten duerfen dieses hidden nicht ueberschreiben.
   -------------------------------------------------------------------------- */
.ptb-wizard [hidden] {
  display: none !important;
}

/* Workshop-Mitgliederpreis (Spec 2026-10-01 §4): der Mitgliedsblock im
   Stripe-Formular nutzt die Optionskarten des Wizards (.ptb-choice*), steht
   aber ausserhalb von .ptb-wizard - dieselbe Regel, damit Panel, Pruefknopf
   und Meldungen per `hidden` wirklich verschwinden. */
.ptb-member-choice [hidden] {
  display: none !important;
}

/* Fixwave F7: Knopf "Mitgliedschaft prüfen" als normaler kleiner
   Ghost-Knopf (ohne die unterstrichene Ausweichlink-Optik), linksbuendig
   statt ueber die ganze Panelbreite gezogen. */
.ptb-member-choice .ptb-choice__check {
  justify-self: start;
}

/* Beim Schrittwechsel scrollt das Skript die Karte nach oben - unter die
   feste Kopfzeile, nicht dahinter (gleicher Abstand wie .ptb-summary). */
.ptb-wizard {
  scroll-margin-top: 96px;
}

/* Fortschritt: Marker, Kurzbeschriftung, Linie ... als Flexreihe; die Linien
   teilen sich den freien Platz (flex: 1). Die li sind display: contents, ihre
   Teile (Linie als ::before, Marker, Beschriftung) stehen direkt in der Reihe.
   Kurzbeschriftungen (ptb_form_step_*_short) statt der langen Titel, und sie
   duerfen umbrechen - abgeschnitten ("Wer meldet si…") wird nichts. */
.ptb-wizard__progress {
  display: flex;
  align-items: center;
  gap: var(--ptb-space-2);
  margin: 0;
  padding: var(--ptb-space-3) var(--ptb-space-4);
  list-style: none;
  border: 1px solid var(--ptb-border-soft);
  border-radius: var(--ptb-radius-lg);
  background: var(--ptb-surface-muted);
}

.ptb-wizard__progress-item {
  display: contents;
  color: var(--ptb-text-muted);
  font-size: var(--ptb-text-body-sm);
  font-weight: var(--ptb-weight-bold);
}

.ptb-wizard__progress-item + .ptb-wizard__progress-item::before {
  content: "";
  display: block;
  flex: 1 1 16px;
  min-width: 12px;
  height: 2px;
  border-radius: var(--ptb-radius-pill);
  background: var(--ptb-border-strong);
}

.ptb-wizard__progress-item.is-done::before,
.ptb-wizard__progress-item.is-current::before {
  background: var(--ptb-taupe-700);
}

.ptb-wizard__marker {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1.5px solid var(--ptb-taupe-700);
  border-radius: var(--ptb-radius-pill);
  background: var(--ptb-surface-card);
  color: var(--ptb-text-brand);
  font-family: var(--ptb-font-display);
  font-size: var(--ptb-text-body-sm);
  line-height: 1;
}

.ptb-wizard__progress-item.is-current {
  color: var(--ptb-text-brand);
}

.ptb-wizard__progress-item.is-current .ptb-wizard__marker {
  border-color: var(--ptb-action-primary);
  background: var(--ptb-action-primary);
  color: var(--ptb-text-inverse);
}

.ptb-wizard__progress-item.is-done {
  color: var(--ptb-text-body);
}

.ptb-wizard__check {
  display: none;
  width: 14px;
  height: 14px;
  fill: none;
  stroke: var(--ptb-text-brand);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ptb-wizard__progress-item.is-done .ptb-wizard__number {
  display: none;
}

.ptb-wizard__progress-item.is-done .ptb-wizard__check {
  display: block;
}

.ptb-wizard__progress-label {
  flex: 0 1 auto;
  min-width: 0;
  line-height: var(--ptb-leading-snug);
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Schritte: ohne JavaScript untereinander, mit Trennlinie dazwischen. Mit
   Skript (.is-enhanced) steht immer nur einer da - die Linie entfaellt, sonst
   saesse sie ueber jedem Schritt nach dem ersten (der Vorgaenger ist dann nur
   hidden, aber weiter Geschwister im Markup). */
.ptb-wizard__step {
  display: grid;
  gap: var(--ptb-space-4);
  min-width: 0;
}

.ptb-wizard:not(.is-enhanced) .ptb-wizard__step + .ptb-wizard__step {
  padding-top: var(--ptb-space-5);
  border-top: 1px solid var(--ptb-border-soft);
}

.ptb-wizard__title {
  display: grid;
  gap: var(--ptb-space-1);
  margin: 0;
  font-family: var(--ptb-font-display);
  font-size: var(--ptb-text-heading-md);
  font-weight: var(--ptb-weight-semibold);
  line-height: var(--ptb-leading-snug);
  color: var(--ptb-text-brand);
}

/* Programmatischer Fokus (Schrittwechsel) ohne Ring - der Fokus soll nur die
   Vorleseposition setzen; per Tastatur ist die Ueberschrift nicht erreichbar. */
.ptb-wizard__title:focus {
  outline: none;
}

.ptb-wizard__count {
  font-family: var(--ptb-font-body);
  font-size: var(--ptb-text-overline);
  font-weight: var(--ptb-weight-bold);
  letter-spacing: var(--ptb-tracking-overline);
  text-transform: uppercase;
  color: var(--ptb-text-muted);
}

/* Go-live-Feinschliff (Spec 2026-10-02 §2b): Lead ueber der
   Mitgliedschaftsauswahl - wessen Mitgliedschaft zaehlt. Ruhige Flaeche,
   damit der Satz vor der Auswahl gelesen wird. */
.ptb-wizard__lead {
  margin: 0;
  padding: var(--ptb-space-3) var(--ptb-space-4);
  border-radius: var(--ptb-radius-sm);
  background: var(--ptb-surface-muted);
  font-size: var(--ptb-text-body-sm);
  line-height: var(--ptb-leading-body);
  color: var(--ptb-ink-700);
}

/* Mitgliedschaftsauswahl: zwei Optionskarten, darunter jeweils die Felder
   der gewaehlten Option. */
.ptb-wizard__choices {
  display: grid;
  gap: var(--ptb-space-3);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: none;
}

.ptb-choice {
  display: grid;
  gap: var(--ptb-space-4);
  padding: var(--ptb-space-4);
  border: 1.5px solid var(--ptb-border-soft);
  border-radius: var(--ptb-radius-md);
  background: var(--ptb-surface-card);
  transition: border-color var(--ptb-dur-base) var(--ptb-ease-soft), background-color var(--ptb-dur-base) var(--ptb-ease-soft);
}

.ptb-choice:has(.ptb-radio:checked) {
  border-color: var(--ptb-action-primary);
  background: var(--ptb-surface-warm);
}

/* Drei Klassen, damit die Blockregel fuer Labels aus Abschnitt 5 nicht
   gewinnt: Kreis und Text stehen nebeneinander. */
body.brand-placetobe .cuyl-form .ptb-choice__option {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: var(--ptb-space-3);
  align-items: center;
  margin: 0;
  color: var(--ptb-text-brand);
  font-size: var(--ptb-text-body-md);
  font-weight: var(--ptb-weight-semibold);
  line-height: var(--ptb-leading-snug);
  cursor: pointer;
}

.ptb-choice__panel {
  display: grid;
  gap: var(--ptb-space-3);
  padding-left: calc(24px + var(--ptb-space-3));
}

.ptb-choice__note {
  margin: 0;
  font-size: var(--ptb-text-body-sm);
  line-height: var(--ptb-leading-body);
  color: var(--ptb-text-muted);
}

/* Ergaenzung E12-3 (Issue #6): Hinweis + Ausweichlink, wenn die Live-Pruefung
   der Mitgliedsnummer technisch scheitert (Netzfehler/Ratenlimit) - eigener
   Block, damit er sich vom inhaltlichen Feldfehler (form-field__error direkt
   am Nummernfeld) unterscheidet. Der Knopf nutzt .ptb-btn--ghost unveraendert,
   nur linksbuendig statt zentriert und ohne die 44px-Mindesthoehe einer
   Hauptaktion. */
.ptb-choice__check-message {
  display: grid;
  gap: var(--ptb-space-2);
  justify-items: start;
}

.ptb-choice__check-bypass {
  height: auto;
  padding: var(--ptb-space-1) var(--ptb-space-2);
  text-decoration: underline;
}

/* form-validation.js haengt die Meldung der Radiogruppe ans fieldset. */
body.brand-placetobe .ptb-wizard__choices > .form-field__error,
body.brand-placetobe .ptb-radio-group > .form-field__error {
  margin-top: 0;
}

/* Radio: 24px Kreis, Rahmen wie .ptb-check (3:1 fuer Bedienelemente),
   gewaehlt mit Taupe-Punkt. Der Punkt ist ein eigenes Pseudo-Element, damit
   die Fokusregel aus theme.css (background: #fff) ihn nicht ueberdeckt. */
.ptb-radio {
  appearance: none;
  -webkit-appearance: none;
  display: inline-grid;
  place-content: center;
  width: 24px;
  height: 24px;
  margin: 0;
  border: 1.5px solid var(--ptb-taupe-700);
  border-radius: var(--ptb-radius-pill);
  background: var(--ptb-surface-card);
  cursor: pointer;
  transition: border-color var(--ptb-dur-fast) var(--ptb-ease-soft);
}

.ptb-radio:checked {
  border-color: var(--ptb-action-primary);
}

.ptb-radio::after {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: var(--ptb-radius-pill);
  background: var(--ptb-action-primary);
  transform: scale(0);
  transition: transform var(--ptb-dur-fast) var(--ptb-ease-soft);
}

.ptb-radio:checked::after {
  transform: scale(1);
}

/* Foto-Einverstaendnis (alle Kurse, Spec 2026-10-03 Datenblatt §2): Ja/Nein
   nebeneinander in einer Box. */
.ptb-radio-group {
  min-width: 0;
  margin: 0;
  padding: var(--ptb-space-4);
  border: 1px solid var(--ptb-border-soft);
  border-radius: var(--ptb-radius-md);
  background: var(--ptb-surface-muted);
}

/* Die <legend> setzt der Browser sonst in die Rahmenlinie der Box (Go-live
   04.10., Matthias): als Float ueber volle Breite rueckt sie in den Inhalt,
   die Optionen (Flex-Container = eigener Formatierungskontext) stehen darunter. */
.ptb-radio-group > .ptb-label {
  float: left;
  width: 100%;
  padding: 0;
  margin-bottom: var(--ptb-space-3);
  font-size: var(--ptb-text-body-sm);
  font-weight: var(--ptb-weight-bold);
  color: var(--ptb-text-body);
}

.ptb-radio-group__options {
  display: flex;
  flex-wrap: wrap;
  clear: both;
  gap: var(--ptb-space-3) var(--ptb-space-6);
}

body.brand-placetobe .cuyl-form .ptb-radio-group__option {
  display: inline-flex;
  align-items: center;
  gap: var(--ptb-space-2);
  min-height: var(--ptb-control-h-md);
  margin: 0;
  font-size: var(--ptb-text-body-md);
  font-weight: var(--ptb-weight-semibold);
  cursor: pointer;
}

body.brand-placetobe .ptb-radio-group.is-invalid {
  border-color: var(--ptb-status-error);
  background: var(--ptb-status-error-tint);
}

/* Zusammenfassung: Kurs, Person, Kind, Mitgliedschaft, Positionen. */
.ptb-wizard__summary {
  display: grid;
  gap: var(--ptb-space-3);
}

.ptb-wizard__group {
  display: grid;
  gap: var(--ptb-space-2);
  padding: var(--ptb-space-4);
  border: 1px solid var(--ptb-border-soft);
  border-radius: var(--ptb-radius-md);
  background: var(--ptb-surface-muted);
}

.ptb-wizard__group-title {
  margin: 0;
  font-size: var(--ptb-text-overline);
  font-weight: var(--ptb-weight-bold);
  letter-spacing: var(--ptb-tracking-overline);
  text-transform: uppercase;
  color: var(--ptb-text-brand);
}

.ptb-wizard__group-text {
  margin: 0;
  font-size: var(--ptb-text-body-sm);
  font-weight: var(--ptb-weight-semibold);
  line-height: var(--ptb-leading-snug);
  color: var(--ptb-text-body);
}

.ptb-wizard__list {
  display: grid;
  gap: var(--ptb-space-1);
  margin: 0;
}

.ptb-wizard__row {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
  gap: var(--ptb-space-4);
}

.ptb-wizard__row dt,
.ptb-wizard__row dd {
  margin: 0;
  font-size: var(--ptb-text-body-sm);
  line-height: var(--ptb-leading-snug);
}

.ptb-wizard__row dt {
  color: var(--ptb-text-muted);
}

.ptb-wizard__row dd {
  font-weight: var(--ptb-weight-bold);
  color: var(--ptb-text-body);
  overflow-wrap: anywhere;
}

.ptb-wizard__fees {
  margin: 0;
  padding: var(--ptb-space-3) var(--ptb-space-4);
  border: 1.5px solid var(--ptb-action-primary);
  border-radius: var(--ptb-radius-md);
  background: var(--ptb-surface-card);
}

.ptb-wizard__fee {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ptb-space-4);
  padding: var(--ptb-space-1) 0;
}

.ptb-wizard__fee dt,
.ptb-wizard__fee dd {
  margin: 0;
}

.ptb-wizard__fee dt {
  font-size: var(--ptb-text-body-sm);
  color: var(--ptb-text-muted);
}

.ptb-wizard__fee dd {
  font-size: var(--ptb-text-body-md);
  font-weight: var(--ptb-weight-bold);
  white-space: nowrap;
  color: var(--ptb-text-body);
}

.ptb-wizard__fee--total {
  margin-top: var(--ptb-space-1);
  padding-top: var(--ptb-space-3);
  border-top: 1px solid var(--ptb-border-soft);
}

.ptb-wizard__fee--total dt {
  font-weight: var(--ptb-weight-bold);
  color: var(--ptb-text-body);
}

.ptb-wizard__fee--total dd {
  font-family: var(--ptb-font-display);
  font-size: var(--ptb-text-heading-lg);
  line-height: 1;
  color: var(--ptb-text-brand);
}

/* Weiter/Zurueck/Absenden: Zurueck links, die Hauptaktion rechts. */
.ptb-wizard__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--ptb-space-3);
  padding-top: var(--ptb-space-2);
}

.ptb-wizard__back {
  margin-right: auto;
}

/* Der Absendeknopf nimmt den Rest der Zeile: neben "Zurueck" in Schritt 3
   und ohne JavaScript (Weiter/Zurueck hidden) in voller Breite wie bisher der
   Knopf des Anmeldeformulars. */
.ptb-wizard__submit {
  flex: 1 1 auto;
}

/* Knoepfe gegen theme.css: dort bekommt JEDER <button> in .cuyl-form den
   Cheer-up-Verlauf (linear-gradient(135deg, var(--accent), #64d2d8) - im
   Markenmodus #2c93a9 -> #64d2d8), 52 px Mindesthoehe, eigenen Innenabstand,
   border: 0, Schrift 800 und einen tuerkisen Schatten (.cuyl-form button,
   Spezifitaet 0,1,1; :hover/:focus-visible 0,2,1). Die .ptb-btn-Regeln
   (0,1,0/0,2,0) verloren dagegen - auf jeder Breite, sichtbar geworden mobil:
   "Verbindlich anmelden" und "Weiter" im Verlauf statt in der Saeulenfarbe
   (weisse Schrift auf #64d2d8 nur ~1,8:1), "Zurueck" ohne Rahmen im Verlauf.
   Hier bekommen die Knoepfe des Wizards ihre PTB-Werte mit hoeherer
   Spezifitaet (0,3,1 bzw. 0,4,1) zurueck; Varianten stehen nach der Basis. */
body.brand-placetobe .ptb-wizard .ptb-btn {
  min-height: 0;
  height: var(--ptb-control-h-lg);
  padding: 0 var(--ptb-space-7);
  border: none;
  background: var(--ptb-action-primary);
  color: var(--ptb-text-inverse);
  font-size: var(--ptb-text-body-lg);
  font-weight: var(--ptb-weight-semibold);
  box-shadow: none;
  filter: none;
}

body.brand-placetobe .ptb-wizard .ptb-btn:hover {
  background: var(--ptb-action-primary-hover);
  box-shadow: var(--ptb-shadow-lift);
  transform: translateY(var(--ptb-hover-lift));
  filter: none;
}

body.brand-placetobe .ptb-wizard .ptb-btn:focus-visible {
  outline: none;
  box-shadow: var(--ptb-ring-focus);
}

body.brand-placetobe .ptb-wizard .ptb-btn--accent-bewegung,
body.brand-placetobe .ptb-wizard .ptb-btn--accent-bewegung:hover {
  background: var(--ptb-aqua-900);
}

body.brand-placetobe .ptb-wizard .ptb-btn--accent-entwicklung,
body.brand-placetobe .ptb-wizard .ptb-btn--accent-entwicklung:hover {
  background: var(--ptb-lilac-900);
}

body.brand-placetobe .ptb-wizard .ptb-btn--accent-gemeinschaft,
body.brand-placetobe .ptb-wizard .ptb-btn--accent-gemeinschaft:hover {
  background: var(--ptb-mint-900);
}

body.brand-placetobe .ptb-wizard .ptb-btn--accent-begegnung,
body.brand-placetobe .ptb-wizard .ptb-btn--accent-begegnung:hover {
  background: var(--ptb-peach-900);
}

body.brand-placetobe .ptb-wizard .ptb-btn[class*="ptb-btn--accent-"]:hover {
  filter: brightness(.92);
}

body.brand-placetobe .ptb-wizard .ptb-btn--outline {
  border: 1.5px solid var(--ptb-taupe-700);
  background: transparent;
  color: var(--ptb-text-brand);
}

body.brand-placetobe .ptb-wizard .ptb-btn--outline:hover {
  border-color: var(--ptb-action-primary);
  background: var(--ptb-surface-muted);
  color: var(--ptb-text-brand);
}

/* Fokus an Radios und Haekchen gegen theme.css: `.cuyl-form input:focus`
   (0,2,1) setzt dort einen hellen tuerkisen Rand (rgba(26,165,176,.65), ~2:1
   auf Weiss), einen fast unsichtbaren Schatten und weissen Grund - das schlug
   `.ptb-radio:focus-visible`/`.ptb-check:focus-visible` (0,2,0), der
   PTB-Ring erschien nicht, und ein gewaehltes Radio wurde beim Fokus
   hellblau umrandet. Die PTB-Regeln hier liegen bei 0,4,1 bzw. 0,5,1:
   Rand bleibt Taupe (gewaehlt Taupe-900), Grund bleibt, Tastaturfokus zeigt
   den PTB-Ring (--ptb-ring-focus: 2 px Weiss + 2 px Aqua-900). */
body.brand-placetobe .cuyl-form .ptb-radio:focus,
body.brand-placetobe .cuyl-form .ptb-check:focus {
  outline: none;
  border-color: var(--ptb-taupe-700);
  background: var(--ptb-surface-card);
  box-shadow: none;
}

body.brand-placetobe .cuyl-form .ptb-radio:checked:focus {
  border-color: var(--ptb-action-primary);
}

body.brand-placetobe .cuyl-form .ptb-check:checked:focus {
  border-color: var(--ptb-action-primary);
  background: var(--ptb-action-primary);
}

body.brand-placetobe .cuyl-form .ptb-radio[aria-invalid="true"]:focus,
body.brand-placetobe .cuyl-form .ptb-check[aria-invalid="true"]:focus {
  border-color: var(--ptb-status-error);
}

body.brand-placetobe .cuyl-form .ptb-radio:focus-visible,
body.brand-placetobe .cuyl-form .ptb-check:focus-visible {
  /* Final-Review M3: "outline: none" liesse den Tastaturfokus im
     Windows-Kontrastmodus (forced-colors) ganz verschwinden, weil dort auch
     der box-shadow-Ring entfaellt. "transparent" bleibt hier unsichtbar (der
     Ring kommt weiter aus box-shadow), erzwingt im Kontrastmodus aber einen
     Systemrahmen (gleiche Spezifitaet wie die :focus-Regel oben, aber spaeter
     im Stylesheet, gewinnt also fuer "outline"). */
  outline: 2px solid transparent;
  box-shadow: var(--ptb-ring-focus);
}

/* Final-Review M3: Im Windows-Kontrastmodus (forced-colors) zwingt der
   Browser Hintergrund- und Rahmenfarben von appearance:none-Feldern auf
   Systemfarben - der Taupe-Rahmen und der Taupe-/Aqua-Punkt/Haken werden
   dabei unsichtbar, weil beide ungewaehlt und gewaehlt gleich aussehen.
   CanvasText zeichnet den Rahmen, Highlight den gewaehlten Zustand (Punkt
   bzw. Haken), beides sind vom System bereitgestellte Kontrastfarben. */
@media (forced-colors: active) {
  .ptb-radio,
  .ptb-check {
    border-color: CanvasText;
  }

  .ptb-radio:checked,
  .ptb-check:checked {
    border-color: Highlight;
  }

  .ptb-radio:checked::after {
    background: Highlight;
  }

  .ptb-check:checked::after {
    border-color: Highlight;
  }
}

/* --------------------------------------------------------------------------
   Danke (page-placetobe-thanks.php): eine zentrierte Spalte, Statuskreis,
   Zusammenfassung und die Karten je Zustand.
   -------------------------------------------------------------------------- */
.ptb-thanks__inner {
  display: grid;
  justify-items: center;
  gap: var(--ptb-space-5);
  max-width: 560px;
  text-align: center;
}

.ptb-status-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
}

.ptb-status-circle--paid { background: var(--ptb-mint-100); color: var(--ptb-mint-700); }
.ptb-status-circle--waiting { background: var(--ptb-aqua-100); color: var(--ptb-aqua-700); }
.ptb-status-circle--aborted { background: var(--ptb-peach-100); color: var(--ptb-peach-700); }
.ptb-status-circle--closed { background: var(--ptb-sand-100); color: var(--ptb-taupe-900); }

.ptb-thanks__title {
  margin: 0;
  font-family: var(--ptb-font-display);
  font-size: var(--ptb-text-display-sm);
  line-height: var(--ptb-leading-display);
  color: var(--ptb-taupe-700);
}

.ptb-thanks__lead {
  margin: 0;
  font-size: var(--ptb-text-body-lg);
  line-height: var(--ptb-leading-body);
  color: var(--ptb-text-muted);
}

/* Die Karten stehen in der zentrierten Spalte, ihr Inhalt bleibt linksbuendig. */
.ptb-thanks__summary,
.ptb-next,
.ptb-roadmap,
.ptb-hold {
  width: 100%;
  text-align: left;
}

.ptb-thanks__summary {
  display: grid;
  gap: var(--ptb-space-3);
}

.ptb-thanks__course {
  margin: 0;
  font-family: var(--ptb-font-display);
  font-size: var(--ptb-text-heading-md);
  font-weight: var(--ptb-weight-bold);
  line-height: var(--ptb-leading-snug);
  color: var(--ptb-text-brand);
}

/* Go-live-Feinschliff (Spec 2026-10-02 §2c): fuer wen die Mitgliedschaft
   gilt, darunter (nur vor der Unterschrift eines Beitritts) der naechste
   Schritt. */
.ptb-thanks__membership {
  margin: 0;
  font-size: var(--ptb-text-body-md);
  font-weight: var(--ptb-weight-semibold);
  line-height: var(--ptb-leading-snug);
  color: var(--ptb-ink-700);
}

.ptb-thanks__next-step {
  margin: 0;
  font-size: var(--ptb-text-body-sm);
  line-height: var(--ptb-leading-body);
  color: var(--ptb-text-muted);
}

.ptb-thanks__scope {
  margin: 0;
  font-size: var(--ptb-text-caption);
  color: var(--ptb-text-muted);
}

.ptb-thanks__rows {
  display: grid;
  gap: var(--ptb-space-2);
  margin: 0;
}

.ptb-thanks__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ptb-space-4);
  padding-top: var(--ptb-space-2);
  border-top: 1px solid var(--ptb-border-soft);
}

.ptb-thanks__label {
  margin: 0;
  font-size: var(--ptb-text-caption);
  color: var(--ptb-text-muted);
}

.ptb-thanks__value {
  margin: 0;
  font-size: var(--ptb-text-body-sm);
  font-weight: var(--ptb-weight-semibold);
  line-height: var(--ptb-leading-snug);
  text-align: right;
  color: var(--ptb-text-body);
}

.ptb-next {
  display: grid;
  gap: var(--ptb-space-4);
}

.ptb-next__title {
  margin: 0;
  font-family: var(--ptb-font-display);
  font-size: var(--ptb-text-heading-md);
  line-height: var(--ptb-leading-snug);
  color: var(--ptb-text-brand);
}

.ptb-next__list {
  display: grid;
  gap: var(--ptb-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ptb-next__row {
  display: flex;
  align-items: flex-start;
  gap: var(--ptb-space-3);
  font-size: var(--ptb-text-body-sm);
  line-height: var(--ptb-leading-body);
  color: var(--ptb-text-body);
}

.ptb-next__row .ptb-icon {
  margin-top: 2px;
  color: var(--ptb-text-brand-soft);
}

.ptb-next__mail {
  display: block;
  font-size: var(--ptb-text-caption);
  color: var(--ptb-text-muted);
}

/* Stufen-Roadmap der Kursanmeldung (Plan E15-2, Spec §21.4,
   template-parts/placetobe/roadmap.php). Aufbau wie .form-done__steps bei
   Athletics4Kids - senkrechte Schiene, Marker mit Haken / Ring / Nummer,
   Statuswort als Pille -, hier in den Place-To-Be-Tokens: erledigt Aqua,
   als Naechstes Ring auf Aqua-Tint mit warmer Pille, offen Sand. */
.ptb-roadmap {
  display: grid;
  gap: var(--ptb-space-4);
}

.ptb-roadmap__title {
  margin: 0;
  font-family: var(--ptb-font-display);
  font-size: var(--ptb-text-heading-md);
  line-height: var(--ptb-leading-snug);
  color: var(--ptb-text-brand);
}

.ptb-roadmap__steps {
  display: grid;
  gap: var(--ptb-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ptb-roadmap__step {
  position: relative;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: var(--ptb-space-3);
  align-items: start;
  min-width: 0;
}

/* Schiene vom Marker bis zum naechsten (32px Marker, 12px Abstand):
   bis zum erreichten Schritt in Aqua, danach Sand. */
.ptb-roadmap__step:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 32px;
  left: 15px;
  width: 2px;
  height: calc(100% - 20px);
  border-radius: var(--ptb-radius-pill);
  background: var(--ptb-sand-300);
}

.ptb-roadmap__step--done:not(:last-child)::before {
  background: var(--ptb-aqua-300);
}

.ptb-roadmap__marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 2px solid var(--ptb-aqua-700);
  border-radius: 50%;
  background: var(--ptb-aqua-100);
  color: var(--ptb-aqua-900);
  font-family: var(--ptb-font-display);
  font-size: var(--ptb-text-body-sm);
  font-weight: var(--ptb-weight-bold);
  line-height: 1;
}

.ptb-roadmap__step--done .ptb-roadmap__marker {
  border-color: var(--ptb-aqua-700);
  background: var(--ptb-aqua-700);
  color: var(--ptb-text-inverse);
}

/* Offene Nummer in --ptb-text-muted (Kontrast AA, Review E15-2 F5). */
.ptb-roadmap__step--open .ptb-roadmap__marker {
  border-color: var(--ptb-sand-300);
  background: var(--ptb-surface-card);
  color: var(--ptb-text-muted);
}

.ptb-roadmap__body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ptb-space-1) var(--ptb-space-2);
  min-width: 0;
  min-height: 32px;
  margin: 0;
}

.ptb-roadmap__label {
  font-family: var(--ptb-font-display);
  font-size: var(--ptb-text-heading-sm);
  font-weight: var(--ptb-weight-bold);
  line-height: var(--ptb-leading-snug);
  color: var(--ptb-text-brand);
}

.ptb-roadmap__step--open .ptb-roadmap__label {
  color: var(--ptb-text-muted);
}

.ptb-roadmap__status {
  display: inline-block;
  padding: 2px var(--ptb-space-2);
  border-radius: var(--ptb-radius-pill);
  font-family: var(--ptb-font-body);
  font-size: var(--ptb-text-caption);
  font-weight: var(--ptb-weight-bold);
  line-height: var(--ptb-leading-snug);
}

.ptb-roadmap__status--done {
  background: var(--ptb-status-info-tint);
  color: var(--ptb-status-info);
}

.ptb-roadmap__status--next {
  background: var(--ptb-status-warning-tint);
  color: var(--ptb-status-warning);
}

.ptb-roadmap__status--open {
  background: var(--ptb-surface-muted);
  color: var(--ptb-text-muted);
}

/* Kontrastmodus: die Hintergruende fallen weg - Pille und Schiene brauchen
   eine eigene Kante (der Marker hat seinen Rahmen schon). */
@media (forced-colors: active) {
  .ptb-roadmap__status {
    border: 1px solid CanvasText;
  }

  .ptb-roadmap__step:not(:last-child)::before {
    background: CanvasText;
  }
}

/* Reservierungshinweis nach einem Abbruch: Tint der Saeule Begegnung. */
.ptb-hold {
  display: grid;
  gap: var(--ptb-space-2);
  border-color: var(--ptb-peach-300);
  background: var(--ptb-tint-begegnung);
}

.ptb-hold__title {
  display: flex;
  align-items: flex-start;
  gap: var(--ptb-space-2);
  margin: 0;
  font-size: var(--ptb-text-body-md);
  font-weight: var(--ptb-weight-bold);
  line-height: var(--ptb-leading-snug);
  color: var(--ptb-ink-begegnung);
}

.ptb-hold__note {
  margin: 0;
  font-size: var(--ptb-text-caption);
  line-height: var(--ptb-leading-body);
  color: var(--ptb-ink-begegnung);
}

.ptb-thanks__note {
  margin: 0;
  font-size: var(--ptb-text-caption);
  color: var(--ptb-text-muted);
}

.ptb-thanks__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--ptb-space-3);
}

/* Storno-Ansicht (?b=&st=): Regel, Rechenzeile und Formular in einer Karte,
   linksbuendig wie die Zusammenfassung; der Fehlerhinweis in voller
   Spaltenbreite darueber. Das Grund-Feld ist optional und bleibt flacher als
   die Anmerkung der Buchungsseite. */
.ptb-cancel,
.ptb-cancel__notice {
  width: 100%;
  text-align: left;
}

.ptb-cancel {
  display: grid;
  gap: var(--ptb-space-4);
}

.ptb-cancel__rule {
  margin: 0;
  font-size: var(--ptb-text-body-sm);
  line-height: var(--ptb-leading-body);
  color: var(--ptb-text-muted);
}

.ptb-cancel__refund {
  margin: 0;
  font-size: var(--ptb-text-body-md);
  font-weight: var(--ptb-weight-bold);
  line-height: var(--ptb-leading-snug);
  color: var(--ptb-text-brand);
}

body.brand-placetobe .ptb-cancel__form textarea {
  min-height: 96px;
}

.ptb-cancel__submit {
  justify-self: start;
}

@media (max-width: 600px) {
  .ptb-cancel__submit {
    justify-self: stretch;
  }
}

/* ==========================================================================
   11. Wash-Panels: .ptb-wash
   Weicher Aquarell-Blob-Hintergrund je Saeule. Jede Regel nennt zwei Ebenen:
   oben das Aquarell-PNG, darunter der radial-gradient. Fehlt die Datei noch,
   laeuft ihr Request ins Leere (404, ohne sichtbare Folge) und der Browser
   malt nur den Verlauf. Die PNGs koennen damit ohne Codeaenderung nachgereicht
   werden - es genuegt, sie unter den unten genannten Namen abzulegen.
   ========================================================================== */
.ptb-wash {
  position: relative;
  border-radius: var(--ptb-radius-blob);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.ptb-wash--bewegung {
  background-image: url("../img/placetobe/wash-blue.png"), radial-gradient(circle at 32% 32%, var(--ptb-aqua-200), transparent 70%);
  background-size: cover, auto;
  background-repeat: no-repeat;
}
.ptb-wash--entwicklung {
  background-image: url("../img/placetobe/wash-lilac.png"), radial-gradient(circle at 32% 32%, var(--ptb-lilac-200), transparent 70%);
  background-size: cover, auto;
  background-repeat: no-repeat;
}
.ptb-wash--gemeinschaft {
  background-image: url("../img/placetobe/wash-green.png"), radial-gradient(circle at 32% 32%, var(--ptb-mint-200), transparent 70%);
  background-size: cover, auto;
  background-repeat: no-repeat;
}
.ptb-wash--begegnung {
  background-image: url("../img/placetobe/wash-peach.png"), radial-gradient(circle at 32% 32%, var(--ptb-peach-200), transparent 70%);
  background-size: cover, auto;
  background-repeat: no-repeat;
}

/* ==========================================================================
   12. Header, Footer, Return-Bar, Buchungsleiste
   ========================================================================== */
.ptb-header {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ptb-space-4);
  padding: var(--ptb-space-4) var(--ptb-page-gutter);
  background: rgba(237, 236, 234, .88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--ptb-border-soft);
}

/* Shell als Flex-Kind: fuellt die Leiste, bleibt aber auf --ptb-content-max. */
.ptb-header > .ptb-shell,
.ptb-return-bar > .ptb-shell {
  flex: 1 1 auto;
  min-width: 0;
}

.ptb-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ptb-space-4);
}

.ptb-header__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--ptb-space-3);
  text-decoration: none;
  color: var(--ptb-text-brand);
}

.ptb-header__mark {
  display: block;
  height: 40px;
  width: auto;
}

.ptb-header__wordmark-img {
  display: block;
  height: 24px;
  width: auto;
}

.ptb-header__brand-text {
  display: grid;
  gap: 2px;
}

/* Text-Wortmarke, solange logo-mark.png/wordmark.png fehlen. */
.ptb-wordmark {
  font-family: var(--ptb-font-display);
  font-weight: var(--ptb-weight-bold);
  font-size: var(--ptb-text-heading-md);
  line-height: var(--ptb-leading-snug);
  color: var(--ptb-text-brand);
}

.ptb-tagline {
  display: block;
  font-size: var(--ptb-text-caption);
  line-height: var(--ptb-leading-snug);
  color: var(--ptb-text-brand-soft);
}

.ptb-header__nav {
  display: flex;
  align-items: center;
  gap: var(--ptb-space-1);
}

/* Nav-Pills sind Links, keine Buttons - die 44-px-Regel gilt fuer sie nicht.
   40 px sind bewusst gewaehlt: gross genug zum Treffen, aber flacher als der
   44 px hohe CTA daneben, damit die Kopfzeile nicht wie zwei Buttonreihen wirkt.
   Auf Touch-Breiten (<= 900 px) gehen sie unten ohnehin auf 44 px hoch. */
.ptb-header__link {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: var(--ptb-space-3) var(--ptb-space-4);
  border-radius: var(--ptb-radius-pill);
  font-size: var(--ptb-text-body-sm);
  font-weight: var(--ptb-weight-semibold);
  color: var(--ptb-text-brand);
  text-decoration: none;
  /* Fuenf Menuepunkte seit 03.10. ("Ueber uns"): ein Pill-Text darf nicht
     umbrechen, sonst steht "Über / uns" knapp ueber 900 px zweizeilig. */
  white-space: nowrap;
  transition: background-color var(--ptb-dur-fast) var(--ptb-ease-soft),
              color var(--ptb-dur-fast) var(--ptb-ease-soft);
}

.ptb-header__link:hover {
  background: var(--ptb-sand-100);
  color: var(--ptb-taupe-900);
}

/* .ptb-btn--sm waere 36 px hoch; min-height hebt den CTA auf die geforderten
   44 px an (Buttons >= 44 px), ohne die Pill-Optik der kleinen Groesse zu verlieren. */
.ptb-header__cta {
  margin-left: var(--ptb-space-2);
  min-height: var(--ptb-control-h-md);
}

/* Menue-Button: erst mit JavaScript sichtbar (das Skript nimmt hidden weg),
   damit die Navigation ohne JavaScript offen statt unerreichbar bleibt. */
.ptb-header__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--ptb-control-h-md);
  height: var(--ptb-control-h-md);
  padding: 0;
  /* Wie beim Kontrollkaestchen: der Rahmen traegt die Umrissform des
     Bedienelements und braucht 3:1. */
  border: 1px solid var(--ptb-taupe-700);
  border-radius: var(--ptb-radius-pill);
  background: var(--ptb-surface-card);
  color: var(--ptb-text-brand);
  cursor: pointer;
}

.ptb-header__toggle .ptb-header__toggle-icon--close {
  display: none;
}

.ptb-header__toggle[aria-expanded="true"] .ptb-header__toggle-icon--menu {
  display: none;
}

.ptb-header__toggle[aria-expanded="true"] .ptb-header__toggle-icon--close {
  display: block;
}

/* Herkunftszeile (Go-live-Feinschliff, Spec 2026-10-02 §4): dezent statt
   Aqua - warme Flaeche, kleine gedaempfte Schrift, niedrige Hoehe. Place To
   Be wirkt als eigene Seite, die Herkunft bleibt sichtbar. (Ein Token
   --ptb-text-body-xs gibt es nicht; --ptb-text-caption ist die kleine Stufe.) */
.ptb-return-bar {
  display: flex;
  align-items: center;
  gap: var(--ptb-space-2);
  padding: var(--ptb-space-2) var(--ptb-page-gutter);
  background: var(--ptb-surface-warm);
  color: var(--ptb-text-muted);
  font-size: var(--ptb-text-caption);
  line-height: var(--ptb-leading-snug);
  border-bottom: 1px solid var(--ptb-border-soft);
}

.ptb-return-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ptb-space-3);
}

.ptb-return-bar__link,
.ptb-return-bar__aside {
  display: inline-flex;
  align-items: center;
  gap: var(--ptb-space-2);
  min-width: 0;
  color: var(--ptb-text-muted);
  text-decoration: none;
}

.ptb-return-bar__aside {
  flex: 0 0 auto;
}

.ptb-return-bar__link:hover,
.ptb-return-bar__aside:hover {
  color: var(--ptb-ink-700);
  text-decoration: underline;
}

.ptb-return-bar__logo {
  display: block;
  flex: 0 0 auto;
  width: auto;
  height: 18px;
  max-width: 72px;
  object-fit: contain;
}

.ptb-return-bar__note {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Mobil (bis 600 px, max-width-Regel unten) statt des Hinweises nur der
   Vereinsname. */
.ptb-return-bar__short {
  display: none;
}

.ptb-footer {
  padding: var(--ptb-space-9) var(--ptb-page-gutter) var(--ptb-space-7);
  background: var(--ptb-surface-warm);
  color: var(--ptb-text-muted);
}

.ptb-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--ptb-space-8);
}

.ptb-footer__col {
  display: grid;
  align-content: start;
  gap: var(--ptb-space-2);
}

.ptb-footer__brand {
  display: grid;
  gap: 2px;
  margin-bottom: var(--ptb-space-2);
}

.ptb-footer__wordmark-img {
  display: block;
  height: 24px;
  width: auto;
}

.ptb-footer__title {
  margin: 0 0 var(--ptb-space-1);
  font-family: var(--ptb-font-display);
  font-size: var(--ptb-text-heading-sm);
  line-height: var(--ptb-leading-snug);
  color: var(--ptb-text-brand);
}

.ptb-footer__address {
  margin: 0;
  font-size: var(--ptb-text-body-sm);
  line-height: var(--ptb-leading-body);
  color: var(--ptb-text-muted);
}

.ptb-footer__link {
  font-size: var(--ptb-text-body-sm);
  color: var(--ptb-text-muted);
  text-decoration: none;
}

.ptb-footer__link:hover {
  color: var(--ptb-text-brand);
  text-decoration: underline;
}

.ptb-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ptb-space-3);
  margin-top: var(--ptb-space-8);
  padding-top: var(--ptb-space-5);
  border-top: 1px solid var(--ptb-border-soft);
  font-size: var(--ptb-text-caption);
}

/* Copyright links, alles Weitere (Instagram, Credits) rechts aussen. */
.ptb-footer__copyright {
  margin: 0;
  margin-right: auto;
}

/* "Website made by metzbit.at" - der Link wie der Instagram-Eintrag in der
   Markenfarbe, Unterstreichung nur beim Zeigen. */
.ptb-footer__credits {
  margin: 0;
}

.ptb-footer__credits a {
  color: var(--ptb-text-brand);
  font-weight: var(--ptb-weight-semibold);
  text-decoration: none;
}

.ptb-footer__credits a:hover,
.ptb-footer__credits a:focus-visible {
  color: var(--ptb-taupe-900);
  text-decoration: underline;
}

.ptb-footer__social {
  display: inline-flex;
  align-items: center;
  gap: var(--ptb-space-2);
  font-weight: var(--ptb-weight-semibold);
  color: var(--ptb-text-brand);
  text-decoration: none;
}

.ptb-footer__social:hover {
  color: var(--ptb-taupe-900);
  text-decoration: underline;
}

/* Buchungsleiste: die Mobil-Ansicht der Buchungsbox. Auf breiten Schirmen
   steht die Box selbst in der rechten Spalte, dann bleibt die Leiste weg;
   ab 900 px abwaerts kehrt sich das um (siehe 16.). Beide kommen aus
   booking-box.php, sichtbar ist immer genau eine. */
.ptb-booking-bar {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--ptb-space-3);
  padding: var(--ptb-space-4) var(--ptb-space-6);
  background: var(--ptb-surface-card);
  border-top: 1px solid var(--ptb-border-soft);
  box-shadow: var(--ptb-shadow-lift);
}

.ptb-booking-bar__info {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.ptb-booking-bar__price {
  font-family: var(--ptb-font-display);
  font-size: var(--ptb-text-heading-md);
  font-weight: var(--ptb-weight-bold);
  line-height: 1;
  color: var(--ptb-text-brand);
}

.ptb-booking-bar__state {
  font-size: var(--ptb-text-caption);
  color: var(--ptb-text-muted);
}

/* ==========================================================================
   13. Icons: .ptb-icon
   ========================================================================== */
.ptb-icon {
  display: inline-block;
  flex-shrink: 0;
  vertical-align: middle;
}

/* ==========================================================================
   14. Fokus-Stile
   ========================================================================== */
.ptb-btn:focus-visible,
.ptb-check:focus-visible,
.ptb-radio:focus-visible,
.ptb-faq__question:focus-visible,
body.brand-placetobe a:focus-visible,
body.brand-placetobe button:focus-visible {
  outline: none;
  box-shadow: var(--ptb-ring-focus);
}

.ptb-input:focus-visible,
.ptb-select:focus-visible,
.ptb-textarea:focus-visible {
  outline: none;
  box-shadow: var(--ptb-shadow-focus);
}

/* ==========================================================================
   15. Bewegungsreduktion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .ptb-btn,
  .ptb-input,
  .ptb-select,
  .ptb-textarea,
  .ptb-check,
  .ptb-check::after,
  .ptb-radio,
  .ptb-radio::after,
  .ptb-choice,
  .ptb-wash,
  .ptb-faq__chevron,
  .ptb-box__segment-tab,
  .ptb-box__choice,
  .ptb-box__radio::after,
  .ptb-box__pill,
  .ptb-readmore .ptb-icon {
    transition: none !important;
  }

  .ptb-btn:hover {
    transform: none;
  }

  /* Haekchen ohne Skalierung: steht immer in voller Groesse und wird nur
     ein-/ausgeblendet (Issue #11). */
  .ptb-check::after {
    transform: rotate(-45deg) translateY(-1px);
  }
}

/* ==========================================================================
   16. Responsive ≤ 900px
   Grid 3 -> 2 Spalten, Header kompakter, Buchungsleiste wird fixe Leiste unten.
   ========================================================================== */
@media (max-width: 900px) {
  .ptb-grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Hero wird einspaltig: erst Text, dann die Aquarell-Flaeche. */
  .ptb-hero__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--ptb-space-7);
  }

  .ptb-hero__title {
    font-size: var(--ptb-text-display-md);
  }

  .ptb-hero__media {
    min-height: 240px;
  }

  /* Die Workshop-Zeile bricht um: Chip und Text oben, Status/Preis/Knopf
     darunter in einer eigenen Reihe. */
  .ptb-workshop-row {
    flex-wrap: wrap;
  }

  .ptb-workshop-row__aside {
    width: 100%;
    justify-content: space-between;
  }

  .ptb-header {
    padding: var(--ptb-space-3) var(--ptb-page-gutter);
  }

  /* :not([hidden]) — ohne JavaScript bleibt der Button weg und die Navigation
     offen (das Skript nimmt hidden weg und setzt is-collapsible auf die Nav). */
  .ptb-header__toggle:not([hidden]) {
    display: inline-flex;
  }

  /* Ohne JavaScript fehlt is-collapsible und die Navigation bleibt eine Reihe.
     Damit sie bei 390 px nicht breiter wird als der Schirm, darf sie umbrechen. */
  .ptb-header__inner {
    flex-wrap: wrap;
  }

  .ptb-header__nav:not(.is-collapsible) {
    flex-wrap: wrap;
    width: 100%;
  }

  .ptb-header__nav.is-collapsible {
    display: none;
    position: absolute;
    top: calc(100% + var(--ptb-space-3));
    left: 0;
    right: 0;
    z-index: 45;
    flex-direction: column;
    align-items: stretch;
    gap: var(--ptb-space-1);
    padding: var(--ptb-space-3);
    background: var(--ptb-surface-card);
    border: 1px solid var(--ptb-border-soft);
    border-radius: var(--ptb-radius-lg);
    box-shadow: var(--ptb-shadow-lift);
  }

  .ptb-header__nav.is-collapsible.ptb-nav--open {
    display: flex;
  }

  .ptb-header__nav.is-collapsible .ptb-header__link {
    justify-content: flex-start;
    min-height: var(--ptb-control-h-md);
  }

  .ptb-header__nav.is-collapsible .ptb-header__cta {
    margin-left: 0;
    justify-content: center;
  }

  .ptb-footer__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--ptb-space-7);
  }

  /* Buchung einspaltig: die Zusammenfassung steht als kompakte Karte ueber
     dem Formular und laeuft dort mit. Wizard/Buchungsseite - Breakpoint
     bleibt bei 900 px, nicht Teil von Fix-Runde 1 (B1/B2 betreffen nur die
     Kursdetailseite, siehe eigener @media (max-width: 1024px) unten). */
  .ptb-checkout__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--ptb-space-6);
  }

  .ptb-summary {
    position: static;
  }

  .ptb-checkout__card,
  .ptb-notice {
    max-width: none;
  }
}

/* Fix-Runde 1 (B2/S1, Review-Befund): die sticky Buchungsbox ueberlappte bei
   1024 px die Textspalte, weil beide Spalten dort noch nebeneinander
   standen. Ruling: Kursdetail-Grid + Buchungsbox/-leiste brechen jetzt
   eigenstaendig bei 1024 px um (nicht laenger im gemeinsamen 900px-Breakpoint
   oben - der bleibt fuer Header/Footer/Landing/Buchungsseite unveraendert).
   Sidebar ist dadurch nur noch >= 1024.01 px sticky (die Basisregel
   .ptb-booking-box { position: sticky } greift per Default, hier wird sie
   darunter wieder auf static gesetzt - dasselbe Muster wie vorher bei
   900px). */
@media (max-width: 1024px) {
  /* Plan E14 (Spec §20.7): eine Spalte in Markup-Reihenfolge - Kopf (Bild,
     Chip, H1, Lead), Buchungsbox (nicht sticky), Rumpf (Worum es geht, Wann
     und wo). */
  .ptb-detail__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas:
      "head"
      "aside"
      "body";
    gap: var(--ptb-space-7);
  }

  /* Review F9: ohne Angebot gibt es keine "aside" (Box) - ohne diese
     Ueberschreibung erbt .ptb-detail__grid--solo die Zeile "aside" von oben
     und liesse eine leere Gitterzeile (doppelte Luecke) stehen. */
  .ptb-detail__grid--solo {
    grid-template-areas:
      "head"
      "body";
  }

  .ptb-detail__media {
    height: 240px;
  }

  .ptb-booking-box {
    position: static;
  }

  .ptb-box__actions {
    display: none;
  }

  .ptb-booking-bar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    padding-bottom: calc(var(--ptb-space-4) + env(safe-area-inset-bottom));
  }

  /* Templates setzen body.has-booking-bar, sobald sie booking-box.php mit der
     fixen Mobil-Leiste rendern (siehe Task B5) — reserviert Platz, damit die
     Leiste nichts am Seitenende verdeckt. */
  body.brand-placetobe.has-booking-bar {
    padding-bottom: calc(var(--ptb-control-h-lg) + var(--ptb-space-8) + env(safe-area-inset-bottom));
  }

  /* Issue #8/S4 (Fix-Runde 1): das theme-weite Cookie-Symbol
     (.cuyl-cookie-settings, class-cuyl-cookie-module.php) sitzt fest unten
     links - auf Kursdetailseiten mit aktiver mobiler Buchungsleiste
     (body.has-booking-bar) ueberdeckt es sonst den Preis links in der
     Leiste, weil beide denselben Eckbereich beanspruchen. Bevorzugte Ruling-
     Variante: Button ueber die Leiste heben statt die Leiste zugunsten des
     Buttons umzubauen. --ptb-booking-bar-h ist die gerechnete Leistenhoehe:
     44px Inhalt (.ptb-booking-bar__cta ist ein .ptb-btn ohne
     Groessen-Modifier = --ptb-control-h-md) + 2 x 16px vertikales Padding
     (--ptb-space-4) = 76px; + 12px Luft (Ruling) + Safe-Area-Inset fuer
     Geraete mit Home-Indicator. */
  body.brand-placetobe.has-booking-bar {
    --ptb-booking-bar-h: 76px;
  }

  body.brand-placetobe.has-booking-bar .cuyl-cookie-settings {
    bottom: calc(var(--ptb-booking-bar-h) + env(safe-area-inset-bottom) + 12px);
  }
}

/* Anmelde-Wizard: unter 540 px reicht die Breite auch fuer die
   Kurzbeschriftungen nicht mehr - dann steht nur die des aktuellen Schritts
   da (wie .signup-progress in theme.css); die Marker zeigen die Position. */
@media (max-width: 540px) {
  .ptb-wizard__progress {
    padding: var(--ptb-space-2) var(--ptb-space-3);
  }

  .ptb-wizard__progress-item:not(.is-current) .ptb-wizard__progress-label {
    display: none;
  }
}

/* ==========================================================================
   17. Responsive ≤ 600px
   Grid 2/3 -> 1 Spalte, kein horizontales Scrollen bei 390px.
   ========================================================================== */
@media (max-width: 600px) {
  .ptb-grid-3,
  .ptb-grid-2 {
    grid-template-columns: minmax(0, 1fr);
  }

  .ptb-section {
    padding: var(--ptb-space-8) var(--ptb-space-4);
  }

  /* Herkunftszeile (Spec 2026-10-02 §4): mobil Logo + "Cheer up your
     life", der kurze Link rechts erst ueber 600 px. */
  .ptb-return-bar__note,
  .ptb-return-bar__aside {
    display: none;
  }

  .ptb-return-bar__short {
    display: inline;
  }

  .ptb-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .ptb-section-head__title {
    font-size: var(--ptb-text-heading-lg);
  }

  .ptb-card {
    padding: var(--ptb-space-5);
  }

  .ptb-card__media {
    width: calc(100% + (2 * var(--ptb-space-5)));
    margin: calc(var(--ptb-space-5) * -1) calc(var(--ptb-space-5) * -1) var(--ptb-space-5);
  }

  .ptb-card--course .ptb-card__media {
    margin-bottom: 0;
  }

  .ptb-hero__title {
    font-size: var(--ptb-text-display-sm);
  }

  .ptb-hero__actions .ptb-btn {
    width: 100%;
  }

  /* Eigene Polsterung, weil die .ptb-card-Regel oben sonst greift. */
  .ptb-workshop-row {
    gap: var(--ptb-space-4);
    padding: var(--ptb-space-5);
  }

  .ptb-workshop-row__aside {
    flex-wrap: wrap;
    gap: var(--ptb-space-3);
  }

  /* Kursdetail bei 390 px: Bild flacher, Ueberschriften kleiner, "Wann und
     wo." einspaltig, drei Termin-Kacheln je Reihe, Box enger gepolstert. */
  .ptb-detail__media {
    height: 200px;
    border-radius: var(--ptb-radius-lg);
  }

  .ptb-detail__title {
    font-size: var(--ptb-text-display-sm);
  }

  .ptb-detail__lead {
    font-size: var(--ptb-text-body-md);
  }

  .ptb-detail__heading,
  .ptb-box__title {
    font-size: var(--ptb-text-heading-lg);
  }

  .ptb-detail__grid,
  .ptb-detail__body {
    gap: var(--ptb-space-7);
  }

  .ptb-card.ptb-when {
    border-radius: var(--ptb-radius-lg);
  }

  .ptb-when__run {
    padding: var(--ptb-space-5);
  }

  .ptb-when__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .ptb-when__bring {
    padding: var(--ptb-space-4) var(--ptb-space-5);
  }

  .ptb-tiles {
    grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  }

  .ptb-tile {
    min-height: 64px;
    padding: var(--ptb-space-2);
  }

  .ptb-tile__date {
    font-size: var(--ptb-text-body-md);
  }

  .ptb-booking-box {
    padding: var(--ptb-space-5);
    border-radius: var(--ptb-radius-lg);
  }

  .ptb-box__choice {
    padding: var(--ptb-space-3);
  }

  .ptb-trainer {
    padding: var(--ptb-space-5);
  }

  .ptb-booking-bar {
    padding-inline: var(--ptb-space-4);
  }

  /* Buchung bei 390 px: jedes Feld eine Zeile, Zusammenfassung und
     Danke-Zeilen untereinander statt nebeneinander. */
  .ptb-row--2,
  .ptb-row--zip {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Wizard bei 390 px: nur das Label des aktuellen Schritts, Felder unter
     der Option ohne Einzug, Zusammenfassung einspaltig, Knoepfe gestapelt
     (Hauptaktion oben). */
  .ptb-choice__panel {
    padding-left: 0;
  }

  .ptb-wizard__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .ptb-wizard__row + .ptb-wizard__row {
    margin-top: var(--ptb-space-1);
  }

  .ptb-wizard__nav {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .ptb-wizard__nav .ptb-btn {
    flex: 0 0 auto;
    width: 100%;
  }

  .ptb-wizard__back {
    margin-right: 0;
  }

  .ptb-thanks__row {
    flex-direction: column;
    gap: var(--ptb-space-1);
  }

  .ptb-thanks__value {
    text-align: left;
  }

  .ptb-thanks__actions .ptb-btn {
    width: 100%;
  }
}