/* ==========================================================================
   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);
}

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);
}

body.brand-placetobe .cuyl-form input:focus,
body.brand-placetobe .cuyl-form select:focus,
body.brand-placetobe .cuyl-form textarea:focus,
body.brand-placetobe .form-field input:focus,
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);
}

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;
}

/* ==========================================================================
   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); }

/* 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);
}

.ptb-check:checked::after {
  content: "";
  width: 12px;
  height: 7px;
  border-left: 2px solid var(--ptb-text-inverse);
  border-bottom: 2px solid var(--ptb-text-inverse);
  transform: rotate(-45deg) translateY(-1px);
}

/* ==========================================================================
   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);
}

.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: Workshop-Liste
   -------------------------------------------------------------------------- */
.ptb-workshop-list {
  display: grid;
  gap: var(--ptb-space-4);
  max-width: 860px;
}

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

.ptb-location__media {
  min-height: 320px;
}

.ptb-location__text .ptb-section-head {
  margin-bottom: var(--ptb-space-6);
}

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

.ptb-location-list__item {
  display: flex;
  align-items: center;
  gap: var(--ptb-space-3);
  font-size: var(--ptb-text-body-md);
  line-height: var(--ptb-leading-snug);
  color: var(--ptb-text-body);
}

.ptb-location-list__item .ptb-icon {
  color: var(--ptb-text-brand);
}

/* --------------------------------------------------------------------------
   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);
}

/* --------------------------------------------------------------------------
   Kursdetail: Brotkrume, Hero, Faktenleiste, Terminliste, Mitbringliste,
   Trainerin-Kasten und die Buchungsbox (course-detail.php, booking-box.php)
   Die Saeule der Kursseite steht einmal als Variablenpaar am Abschnitt; die
   getoenten Teile darin lesen daraus, statt je vier Modifier zu fuehren.
   -------------------------------------------------------------------------- */
.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);
}

.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-brand);
  text-decoration: none;
}

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

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

.ptb-detail__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: var(--ptb-space-8);
  align-items: start;
}

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

/* Hero: Foto formatfuellend, Titel unten links darauf. */
.ptb-detail__hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 340px;
  padding: var(--ptb-space-7);
  border-radius: var(--ptb-radius-2xl);
  overflow: hidden;
}

.ptb-detail__hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

/* Der Verlauf ist kein Markenmittel, sondern Lesbarkeit: ohne ihn stuende
   weisser Text auf einem beliebigen Foto. ::after statt ::before, damit er
   ueber dem Bild liegt. */
.ptb-detail__hero:not(.ptb-detail__hero--wash)::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(94, 83, 78, .80) 0%, rgba(94, 83, 78, .34) 48%, rgba(94, 83, 78, 0) 80%);
}

/* Ohne Foto: Aquarell-Flaeche der Saeule, aber mit der Kartenkante statt der
   Blob-Form aus Abschnitt 11 (zwei Klassen, damit die spaetere Regel dort
   nicht gewinnt). */
.ptb-detail__hero--wash.ptb-wash {
  border-radius: var(--ptb-radius-2xl);
  background-color: var(--ptb-detail-tint);
}

.ptb-detail__hero-body {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: start;
  gap: var(--ptb-space-3);
  min-width: 0;
}

.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-text-inverse);
}

.ptb-detail__hero--wash .ptb-detail__title {
  color: var(--ptb-taupe-700);
}

/* Faktenleiste: sechs Angaben, so viele je Reihe wie hineinpassen. */
.ptb-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--ptb-space-5);
}

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

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

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

.ptb-fact__value {
  font-size: var(--ptb-text-body-md);
  font-weight: var(--ptb-weight-semibold);
  line-height: var(--ptb-leading-snug);
  color: var(--ptb-text-body);
}

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

.ptb-detail__heading {
  margin: 0;
  font-family: var(--ptb-font-display);
  font-size: var(--ptb-text-heading-lg);
  line-height: var(--ptb-leading-snug);
  color: var(--ptb-taupe-700);
}

/* Fliesstext aus dem Seiteninhalt (the_content): schmale Spalte, ruhige Masse. */
.ptb-prose {
  max-width: var(--ptb-prose-max);
  font-size: var(--ptb-text-body-md);
  line-height: var(--ptb-leading-body);
  color: var(--ptb-text-muted);
}

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

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

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

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

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

/* Terminliste: Nummer in der Saeulenfarbe, Datum, Uhrzeit, rechts Try and Move. */
.ptb-dates {
  display: grid;
  margin: 0;
  padding: var(--ptb-space-2) var(--ptb-space-6);
  list-style: none;
}

.ptb-dates__row {
  display: flex;
  align-items: center;
  gap: var(--ptb-space-4);
  padding: var(--ptb-space-4) 0;
}

.ptb-dates__row + .ptb-dates__row {
  border-top: 1px solid var(--ptb-border-soft);
}

.ptb-dates__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: var(--ptb-radius-pill);
  background: var(--ptb-detail-tint);
  color: var(--ptb-detail-ink);
  font-family: var(--ptb-font-display);
  font-size: var(--ptb-text-body-sm);
  font-weight: var(--ptb-weight-bold);
  line-height: 1;
}

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

.ptb-dates__day {
  font-size: var(--ptb-text-body-md);
  font-weight: var(--ptb-weight-semibold);
  line-height: var(--ptb-leading-snug);
}

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

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

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

/* Vergangene Termine bleiben lesbar, treten aber zurueck - gedaempft heisst
   hier neutraler Ton, nicht blasser Text. */
.ptb-dates__row.is-past .ptb-dates__num {
  background: var(--ptb-surface-muted);
  color: var(--ptb-text-brand);
}

.ptb-dates__row.is-past .ptb-dates__day {
  font-weight: var(--ptb-weight-regular);
  color: var(--ptb-text-muted);
}

/* "Was du mitbringst" */
.ptb-bring {
  display: grid;
  gap: var(--ptb-space-2);
  max-width: var(--ptb-prose-max);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ptb-bring__row {
  display: flex;
  align-items: center;
  gap: var(--ptb-space-3);
  font-size: var(--ptb-text-body-md);
  line-height: var(--ptb-leading-snug);
}

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

/* 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: rechte Spalte, bleibt beim Scrollen unter der Kopfzeile stehen. */
.ptb-detail__aside {
  min-width: 0;
}

.ptb-booking-box {
  position: sticky;
  top: 96px;
  display: grid;
  gap: var(--ptb-space-4);
}

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

.ptb-booking-box__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-booking-box__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ptb-space-3);
  padding: var(--ptb-space-4);
  border: 1.5px solid var(--ptb-aqua-700);
  border-radius: var(--ptb-radius-md);
  background: var(--ptb-aqua-100);
}

.ptb-booking-box__option-label {
  font-size: var(--ptb-text-body-sm);
  font-weight: var(--ptb-weight-semibold);
  line-height: var(--ptb-leading-snug);
  color: var(--ptb-aqua-900);
}

.ptb-booking-box__option-price {
  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-aqua-900);
}

.ptb-booking-box__hint {
  display: grid;
  gap: 2px;
  margin: 0;
  font-size: var(--ptb-text-caption);
  line-height: var(--ptb-leading-snug);
  color: var(--ptb-text-muted);
}

.ptb-booking-box__hint-link {
  justify-self: start;
  font-weight: var(--ptb-weight-bold);
  color: var(--ptb-text-link);
}

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

.ptb-booking-box__actions {
  display: grid;
}

.ptb-booking-box__cta {
  width: 100%;
}

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

.ptb-booking-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);
}

/* --------------------------------------------------------------------------
   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);
}

.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);
}

/* Feldreihen: Vorname/Nachname und E-Mail/Telefon zweispaltig, PLZ schmal. */
.ptb-row {
  display: grid;
  gap: var(--ptb-space-4);
}

.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. */
body.brand-placetobe .form-field .ptb-label {
  display: flex;
  align-items: center;
  gap: var(--ptb-space-2);
}

.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);
}

/* --------------------------------------------------------------------------
   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-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);
}

.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);
}

/* 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;
  justify-content: center;
  gap: var(--ptb-space-3);
}

/* ==========================================================================
   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;
  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;
}

.ptb-return-bar {
  display: flex;
  align-items: center;
  gap: var(--ptb-space-2);
  padding: var(--ptb-space-3) var(--ptb-page-gutter);
  background: var(--ptb-aqua-100);
  color: var(--ptb-ink-bewegung);
  font-size: var(--ptb-text-body-sm);
  border-bottom: 1px solid var(--ptb-aqua-200);
}

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

.ptb-return-bar__link {
  display: inline-flex;
  align-items: center;
  gap: var(--ptb-space-1);
  font-weight: var(--ptb-weight-semibold);
  color: var(--ptb-ink-bewegung);
  text-decoration: none;
}

.ptb-return-bar__link:hover {
  text-decoration: underline;
}

.ptb-return-bar__note {
  margin: 0;
  color: var(--ptb-aqua-700);
}

.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);
}

.ptb-footer__copyright {
  margin: 0;
}

.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-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-wash,
  .ptb-faq__chevron {
    transition: none !important;
  }

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

/* ==========================================================================
   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 und Ort werden einspaltig: erst Text, dann die Aquarell-Flaeche. */
  .ptb-hero__inner,
  .ptb-location {
    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;
  }

  .ptb-location__media {
    min-height: 220px;
  }

  /* 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);
  }

  /* Kursdetail einspaltig: die Buchungsbox wandert unter den Text, steht dort
     still und gibt ihren Knopf an die feste Leiste ab. */
  .ptb-detail__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--ptb-space-7);
  }

  .ptb-detail__hero {
    min-height: 280px;
  }

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

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

  /* Buchung einspaltig: die Zusammenfassung steht als kompakte Karte ueber
     dem Formular und laeuft dort mit. */
  .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;
  }

  .ptb-booking-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));
  }
}

/* ==========================================================================
   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);
  }

  /* Traegerhinweis weicht auf schmalen Schirmen dem Rueckweg. */
  .ptb-return-bar__note {
    display: none;
  }

  .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: Hero flacher, Fakten zweispaltig, und die
     Terminzeile bricht um - Badge, Status und Knopf stehen dann unter dem
     Datum statt daneben. */
  .ptb-detail__hero {
    min-height: 220px;
    padding: var(--ptb-space-5);
  }

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

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

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

  .ptb-dates__row {
    flex-wrap: wrap;
  }

  .ptb-dates__aside {
    justify-content: flex-start;
    width: 100%;
    padding-left: calc(34px + var(--ptb-space-4));
  }

  /* Der Try-and-Move-Knopf ist 44 px hoch und mit Preis recht breit - auf
     schmalen Schirmen steht er deshalb ueber die ganze Zeile unter dem Datum,
     statt neben Badge und Pille zu quetschen. */
  .ptb-dates__aside .ptb-btn {
    width: 100%;
  }

  .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);
  }

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

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

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