/* pt-theme.css — Component-System place to be (Pilot), zusammengezogen aus core.b3e240c9.css + page-start.c03a84a9.css am 2026-09-10. Font-URLs auf Pack-relative Pfade umgeschrieben. */
/* ===========================================================================
   Schicht 1 — Tokens · place to be Locations (Pilot)
   Drei Ebenen: Primitive (Rohwerte) → Semantic (Zweck) → Kontext (je Fläche).
   Komponenten- und Block-CSS lesen AUSSCHLIESSLICH die Semantic-Ebene.

   Quelle der Primitive: Claude-Design-Paket
   clients/place-to-be/relaunch/2-designsystem/tokens/{colors,spacing,borders,
   elevation,motion}.css — Werte unverändert, Zuordnung auf die Kit-Semantic
   in dev/csw-html-pilot/designsystem/MAPPING.md.
   =========================================================================== */

/* --- Ebene 1: Primitive ----------------------------------------------------- */
:root {
  /* Marke (Paket: „Base — exact values from the Forty Four landing page“) */
  --ptb-ink:              #4C453D;
  --ptb-ink-soft:         #6B6258;
  --ptb-muted:            #8C8377;
  --ptb-paper:            #FBF7F2;
  --ptb-paper-2:          #F3ECE1;
  --ptb-paper-3:          #EFE6D9;
  --ptb-white:            #ffffff;
  --ptb-dark:             #15120F;
  --ptb-dark-warm:        #26231f;
  --ptb-espresso:         #3C322A;
  --ptb-gold:             #D6B692;
  --ptb-gold-deep:        #8f7c67;
  --ptb-gold-kicker:      #B59C82;
  --ptb-gold-pale:        #EFDAC6;
  --ptb-gold-soft:        rgba(214,182,146,.30);
  --ptb-sand:             #BFB8A8;
  --ptb-line:             rgba(191,184,168,.54);   /* Paket: #BFB8A88A — 8-stellige Hex-Notation aufgelöst */
  --ptb-line-hair:        rgba(76,69,61,.12);
  --ptb-line-hair-strong: rgba(76,69,61,.25);
  --ptb-paper-soft:       rgba(251,247,242,.78);
  --ptb-paper-faint:      rgba(251,247,242,.52);
  --ptb-paper-frame:      rgba(251,247,242,.10);
  --ptb-paper-line:       rgba(251,247,242,.16);
  --ptb-ink-frame:        rgba(76,69,61,.04);
  --ptb-ink-frame-line:   rgba(76,69,61,.09);
  --ptb-shadow-ink:       #0a0806;                 /* Schattenfarbe der schwebenden Karte auf Fotografie */

  /* Status — das Paket kennt keinen Fehlerton; Pilot-Entscheid: Warm-Rot aus
     der Paket-Familie (Kundenlücke, siehe MAPPING.md) */
  --status-danger-raw:  #A53E2A;
  --status-success-raw: #6B7A3D;

  /* Bildschutz (Paket: scrims) */
  --scrim-flat:    rgba(38,35,31,.8);
  --scrim-caption: linear-gradient(to top, rgba(21,18,15,.72), rgba(21,18,15,0));

  /* Abstands-Skala (Paket in px → rem; Namen des Kits, Werte des Kunden) */
  --space-0: 0;        --space-1: .25rem;   --space-2: .5rem;     --space-3: .875rem;
  --space-4: 1.375rem; --space-5: 1.875rem; --space-6: 2.75rem;   --space-7: 3.5rem;
  --space-8: 5rem;     --space-10: 6rem;    --space-12: 7.5rem;   --space-14: 8.125rem;

  /* Radien: zwei Familien — weiche Rahmen (30/22/16/14/12) und 0 für Fotografie */
  --radius-none: 0; --radius-sm: 12px; --radius-md: 14px; --radius-lg: 22px;
  --radius-xl: 30px; --radius-pill: 999px;

  /* Elevation — breit, warm, braun; nie neutral schwarz */
  --elevation-1: 0 14px 26px -18px rgba(76,69,61,.5);
  --elevation-2: 0 28px 60px -24px rgba(76,69,61,.45);
  --elevation-frame: 0 34px 70px -44px rgba(76,69,61,.5);
  --elevation-frame-dark: 0 42px 90px -40px rgba(10,8,6,.62);
  --elevation-inset: inset 0 1px 1px rgba(255,255,255,.7);
  --frame-pad: 8px;
  --card-pad: 2.125rem;

  /* Bewegung (Paket: house ease, keine Federn, nichts seitlich) */
  --ease: cubic-bezier(.32,.72,0,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur-fast: 250ms; --dur-base: 400ms; --dur-slow: 500ms;
  --dur-underline: 700ms; --dur-arrow: 600ms; --dur-reveal: 900ms; --dur-image: 1200ms;
  --arrow-shift: 4px; --press-scale: .98;

  /* Maße */
  --container-max: 1300px;
  --container-pad: 20px;
  --bleed-pad: max(var(--container-pad), calc((100vw - var(--container-max)) / 2));
  --content-measure: 56ch;
  --tap-min: 44px;
}

/* --- Ebene 2: Semantic — Namen fest (Kit), Zuordnung projektspezifisch ------ */
:root {
  /* Text */
  --text-strong:     var(--ptb-ink);
  --text-body:       var(--ptb-ink);
  --text-muted:      var(--ptb-ink-soft);   /* Paket-Muted #8C8377 ist als Fließtext nicht AA-fähig → ink-soft */
  --text-on-brand:   var(--ptb-paper);
  --text-link:       var(--ptb-ink);
  --text-link-hover: var(--ptb-gold-deep);
  --text-accent:     var(--ptb-gold);       /* Schreibschrift-Zeile, Kicker — dekorativ, nie Fließtext */
  --text-highlight:  var(--ptb-gold-pale);  /* hervorgehobenes Wort im Hero-Titel */

  /* Flächen */
  --surface-page:   var(--ptb-white);
  --surface-card:   var(--ptb-white);
  --surface-muted:  var(--ptb-paper);
  --surface-hover:  var(--ptb-paper-2);
  --surface-brand:  var(--ptb-espresso);
  --surface-frame:  var(--ptb-ink-frame);

  /* Linien */
  --border-default:     var(--ptb-line-hair);
  --border-strong:      var(--ptb-ink);
  --border-interactive: var(--ptb-gold-deep);
  --border-frame:       var(--ptb-ink-frame-line);

  /* Interaktion — der Akzent trägt Unterstrich, Ring und Füllungen */
  --interactive:       var(--ptb-gold);
  --interactive-hover: var(--ptb-gold-deep);
  --interactive-press: var(--ptb-gold-deep);
  --interactive-fg:    var(--ptb-ink);
  --disabled-bg:       var(--ptb-paper-3);
  --disabled-fg:       var(--ptb-muted);

  /* Fokus */
  --focus-ring:        var(--ptb-gold-deep);
  --focus-ring-width:  2px;
  --focus-ring-offset: 4px;

  /* Status */
  --status-danger:  var(--status-danger-raw);
  --status-success: var(--status-success-raw);
}

/* --- Ebene 3: Kontext-Tokens je Fläche ------------------------------------
   Eine Fläche belegt Tokens um, nie Kindregeln. Immer das Endtoken setzen. */

/* Papier — der zweite Grund, streng im Wechsel mit Weiß */
.pt-section--muted {
  --surface-page:  var(--surface-muted);
  --surface-card:  var(--ptb-white);
  --surface-hover: var(--ptb-paper-3);
  --border-default: var(--ptb-line);
}

/* Marke — Espresso hinter Fotografie (Hero, Abbinder-Bild) */
.pt-section--brand {
  /* Flächen */
  --surface-page:   var(--surface-brand);
  --surface-card:   var(--ptb-paper-frame);
  --surface-hover:  var(--ptb-paper-line);
  --surface-frame:  var(--ptb-paper-frame);
  /* Text */
  --text-strong:     var(--text-on-brand);
  --text-body:       var(--text-on-brand);
  --text-muted:      var(--ptb-paper-soft);
  --text-link:       var(--text-on-brand);
  --text-link-hover: var(--ptb-gold);
  /* Linien */
  --border-default:     var(--ptb-paper-line);
  --border-strong:      var(--text-on-brand);
  --border-interactive: var(--ptb-gold);
  --border-frame:       var(--ptb-paper-line);
  /* Interaktion */
  --interactive:       var(--ptb-gold);
  --interactive-hover: var(--ptb-gold-pale);
  --interactive-press: var(--ptb-gold-deep);
  --interactive-fg:    var(--ptb-dark);
  --disabled-bg:       var(--ptb-paper-frame);
  --disabled-fg:       var(--ptb-paper-faint);
  /* Fokus */
  --focus-ring:      var(--ptb-gold);
}

/* ===========================================================================
   Schicht 2 — Schriften · place to be Locations
   Kunden-Webfonts aus dem Claude-Design-Paket (assets/fonts), self-hosted.
   Brand Stylist Display/Script: Breakdance-Uploads des Kunden.
   Outfit: Google Fonts (OFL). ballinger-x-condensed, aw-conqueror-didot:
   Typekit-Schnitte des Kunden — Self-Hosting-Lizenz offen (siehe MAPPING.md).
   =========================================================================== */

@font-face { font-family: "Brand Stylist Display"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/BrandStylistDisplay.woff2) format("woff2"); }
@font-face { font-family: "Brand Stylist Script";  font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/BrandStylistScript.woff2)  format("woff2"); }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 200 600; font-display: swap; src: url(../fonts/Outfit-Variable.woff2) format("woff2"); }
@font-face { font-family: "ballinger-x-condensed"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/ballinger-x-condensed-400.woff2) format("woff2"); }
@font-face { font-family: "aw-conqueror-didot"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/awconqueror-400.woff2) format("woff2"); }

:root {
  /* Fünf Schnitte, jeder mit genau einer Aufgabe (Paket-Readme) */
  --font-display:   "Brand Stylist Display", "Didot", Georgia, serif;   /* erste Zeile jeder Überschrift, Gewicht 100 */
  --font-script:    "Brand Stylist Script", "Snell Roundhand", cursive; /* zweite Zeile, immer Gold */
  --font-body:      "Outfit", ui-sans-serif, system-ui, sans-serif;     /* alles Funktionale, Gewicht 200 */
  --font-condensed: "ballinger-x-condensed", var(--font-body);           /* Telefon, Mail, gerahmter Button */
  --font-didot:     "aw-conqueror-didot", "Didot", Georgia, serif;       /* die benannte Ansprechpartnerin */

  /* Typo-Skala — Werte aus dem Paket (150/85/35 Desktop, 57/50 Mobil), Namen fest */
  --h1-size: clamp(3.5625rem, 1.5rem + 8.5vw, 9.375rem); --h1-lh: .9;  --h1-weight: 100; --h1-tracking: 0;
  --h2-size: clamp(3.125rem, 2rem + 3.6vw, 5.3125rem);   --h2-lh: .9;  --h2-weight: 100; --h2-tracking: 0;
  --h3-size: 2.1875rem;  --h3-lh: 1.2; --h3-weight: 400; --h3-tracking: 0;
  --h4-size: 1.75rem;    --h4-lh: 1.2; --h4-weight: 400; --h4-tracking: 0;
  --h5-size: 1.3125rem;  --h5-lh: 1.3; --h5-weight: 400; --h5-tracking: 0;
  --h6-size: 1.125rem;   --h6-lh: 1.4; --h6-weight: 400; --h6-tracking: .01em;
  --body-size: 1.1875rem; --body-lh: 1.6; --body-weight: 200;
  --caption-size: .8125rem; --caption-lh: 1.45; --caption-weight: 300; --caption-tracking: .1em;

  /* Schreibschrift-Zeile des Überschriften-Paars (80 Desktop / 42 Mobil; Hero 64) */
  --script-size:      clamp(2.625rem, 1.5rem + 3.5vw, 5rem);
  --script-hero-size: clamp(2.625rem, 1.5rem + 3vw, 4rem);
  --slide-title-size: 2.5rem;
  --name-size: 1.5625rem;

  /* Buttons — Versalien Outfit 18/.06em, gerahmt Ballinger 22, Textlink 26 */
  --btn-size: 1.125rem; --btn-size-sm: .9375rem; --btn-size-lg: 1.375rem;
  --btn-size-boxed: 1.375rem; --btn-size-link: 1.625rem;
  --btn-weight: 400; --btn-tracking: .06em;
}

/* ===========================================================================
   Schicht 3 — Basis
   Element-Defaults, Typo-Skala als Klassen, globaler Fokus, Container.
   Liest nur Tokens. Kein Farbwert, kein Radius, kein Schatten als Literal.
   =========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--body-size);
  line-height: var(--body-lh);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; }
img { height: auto; }

/* --- Typo-Skala als Klassen -----------------------------------------------
   Die HTML-Ebene (h1…h6) folgt der BEDEUTUNG, die Klasse der Größe.
   Eine Überschrift wird nie zu h3 gemacht, weil sie kleiner aussehen soll.
   -------------------------------------------------------------------------- */
.pt-h1, .pt-h2, .pt-h3, .pt-h4, .pt-h5, .pt-h6 {
  margin: 0;
  color: var(--text-strong);
  font-family: var(--font-display);
  text-wrap: balance;
  hyphens: auto; overflow-wrap: anywhere; /* 57-px-Display bricht lange Einzelwörter (Datenschutz) bei 320 px sonst aus dem Viewport */
}
.pt-h1 { font-size: var(--h1-size); line-height: var(--h1-lh); letter-spacing: var(--h1-tracking); font-weight: var(--h1-weight); }
.pt-h2 { font-size: var(--h2-size); line-height: var(--h2-lh); letter-spacing: var(--h2-tracking); font-weight: var(--h2-weight); }
.pt-h3 { font-size: var(--h3-size); line-height: var(--h3-lh); letter-spacing: var(--h3-tracking); font-weight: var(--h3-weight); }
.pt-h4 { font-size: var(--h4-size); line-height: var(--h4-lh); letter-spacing: var(--h4-tracking); font-weight: var(--h4-weight); }
.pt-h5 { font-size: var(--h5-size); line-height: var(--h5-lh); letter-spacing: var(--h5-tracking); font-weight: var(--h5-weight); }
.pt-h6 { font-size: var(--h6-size); line-height: var(--h6-lh); letter-spacing: var(--h6-tracking); font-weight: var(--h6-weight); }

.pt-body    { font-size: var(--body-size); line-height: var(--body-lh); font-weight: var(--body-weight); }
.pt-caption { font-size: var(--caption-size); line-height: var(--caption-lh); letter-spacing: var(--caption-tracking); color: var(--text-muted); }
.pt-measure { max-width: var(--content-measure); }

/* Überschriften-Paar: eine Display-Zeile, darunter die Schreibschrift in Gold.
   Die Schreibschrift ist Teil der Überschrift (Zeus: eigenes Control), nie Fließtext. */
.pt-script {
  display: block;
  font-family: var(--font-script); font-weight: 400;
  font-size: var(--script-size); line-height: 1; letter-spacing: 0;
  color: var(--text-accent);
  text-wrap: balance;
}
.pt-h1 .pt-script, .pt-h2 .pt-script { margin-block-start: var(--space-1); }

/* --- Fließtext-Rhythmus ---------------------------------------------------
   Abstände entstehen NUR zwischen Geschwistern, nie als Eigenschaft des
   Elements. Sonst schleppt jedes Element seinen Abstand in jeden Kontext mit.
   -------------------------------------------------------------------------- */
/* Absätze tragen keinen eigenen Außenabstand — Rhythmus kommt aus .pt-flow oder dem Gap des Elternteils.
   Ohne diese Regel bleibt der UA-Default (1em) im Prototyp stehen und verschwindet im Zeus-Preflight
   (:where(.zeus-section) :where(p){margin:0}) — Pilot 10.09.2026: 38 px und 26 px Sektionsdrift bei 390 px. */
p { margin-block: 0; }
.pt-flow > * + * { margin-block-start: var(--space-3); }
.pt-flow > * { margin-block: 0; }

/* --- Links ---------------------------------------------------------------- */
.pt-link {
  color: var(--text-link);
  text-decoration: none;
  border-radius: var(--radius-sm);
}
.pt-link:hover { color: var(--text-link-hover); text-decoration: underline; text-underline-offset: 2px; }

/* --- Globaler Tastatur-Fokus ---------------------------------------------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-sm);
}

/* --- Layout --------------------------------------------------------------- */
.pt-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
/* Die Section löst Farbe UND Fläche selbst auf. Ohne das eigene color hier erben
   Kinder den am <body> festgeschriebenen Wert — die Kontext-Umbelegung wirkt dann
   nur auf Elemente mit eigener color-Regel (Überschriften), nicht auf Fließtext.
   Grund: color ist eine geerbte Eigenschaft — sie wird am <body> berechnet und als
   fertiger Wert vererbt, nicht als Token weitergereicht. */
.pt-section {
  padding-block: var(--space-12) var(--space-14);
  background: var(--surface-page);
  color: var(--text-body);
}

/* --- Icon-Sprite: liegt im DOM, nimmt keinen Platz --- */
.pt-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* --- Nur für Screenreader ------------------------------------------------- */
.pt-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* --- Bewegungsreduktion --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===========================================================================
   Schicht 4 — Basis-Komponenten
   Jede Komponente liefert vollständig: Struktur, Größen, Zustände
   (hover / focus-visible / active / disabled+aria-disabled). Kontextflächen
   brauchen KEINE Komponentenvariante: die Fläche belegt die Tokens um
   (tokens.css, Ebene 3), die Komponente liest sie. Ein fehlender Zustand wird
   später in einem Block nachgebaut — so laufen Systeme auseinander.

   Regel: kein Farbwert, kein Schatten, kein Radius als Literal. Nur Tokens.
   =========================================================================== */

/* --- Button ---------------------------------------------------------------
   Vier Varianten = exakt die Zeus-Schlüssel primary | secondary | ghost | link.
   Kanon des Kunden-CD (Paket-Readme „Buttons“): KEINE Box — Versalien Outfit,
   Pfeil, Unterstrich, der bei Hover in --interactive von 0 auf 100 % nachzieht.
   Anatomie: .pt-btn > .pt-btn__t (Text mit Unterstrich) + .pt-btn__icon (Pfeil).
   primary   = der Kanon (Text in --text-strong)
   secondary = die gerahmte Bestandsform (1 px Rahmen, schmale Versalien)
   ghost     = der leise Kanon (gedämpfter Text, kein Pfeilversatz)
   link      = der Textlink des CD (schmale Versalien, Unterkante im Akzent)
   -------------------------------------------------------------------------- */
.pt-btn {
  display: inline-flex; align-items: center; gap: var(--space-3);
  min-height: var(--tap-min);
  padding: 0; border: 1px solid transparent; border-radius: var(--radius-none);
  background: transparent; color: var(--text-strong);
  font-family: var(--font-body); font-size: var(--btn-size); font-weight: var(--btn-weight);
  line-height: 1.45; letter-spacing: var(--btn-tracking); text-transform: uppercase;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: color var(--dur-slow) var(--ease), transform var(--dur-fast) var(--ease);
}
.pt-btn--sm   { font-size: var(--btn-size-sm); } /* min-height bleibt --tap-min (44 px) */
.pt-btn--lg   { font-size: var(--btn-size-lg); }
.pt-btn--full { width: 100%; justify-content: space-between; }
.pt-btn__t {
  display: inline-block; padding-block-end: var(--space-1);
  background-image: linear-gradient(var(--interactive), var(--interactive)), linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat; background-position: left bottom, left bottom;
  background-size: 0 1px, 100% 1px;
  transition: background-size var(--dur-underline) var(--ease);
}
.pt-btn__icon { display: inline-flex; flex: none; transition: transform var(--dur-arrow) var(--ease); }
.pt-btn__icon svg { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.pt-btn__icon--solid svg { fill: currentColor; stroke: none; width: .9em; height: .9em; }
.pt-btn:hover .pt-btn__t, .pt-btn:focus-visible .pt-btn__t { background-size: 100% 1px, 100% 1px; }
.pt-btn:hover .pt-btn__icon { transform: translateX(var(--arrow-shift)); }
.pt-btn:active { transform: scale(var(--press-scale)); }

.pt-btn--primary { color: var(--text-strong); }
.pt-btn--primary:hover  { color: var(--text-strong); }
.pt-btn--primary:active { color: var(--text-strong); }

.pt-btn--secondary {
  padding: var(--space-3) var(--space-4); border-color: currentColor;
  font-family: var(--font-condensed); font-size: var(--btn-size-boxed); letter-spacing: 0; line-height: 1;
  transition: transform var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.pt-btn--secondary .pt-btn__t { background-image: none; padding: 0; }
.pt-btn--secondary:hover  { transform: scale(1.05); }
.pt-btn--secondary:hover .pt-btn__icon { transform: none; }
.pt-btn--secondary:active { transform: scale(1); }

.pt-btn--ghost { color: var(--text-muted); }
.pt-btn--ghost:hover, .pt-btn--ghost:active { color: var(--text-strong); }
.pt-btn--ghost:hover .pt-btn__icon { transform: none; }

.pt-btn--link {
  min-height: auto; gap: var(--space-2); padding-block-end: var(--space-1);
  border: 0; border-block-end: 1px solid var(--interactive-hover);
  font-family: var(--font-condensed); font-size: var(--btn-size-link); letter-spacing: .03em; line-height: 1;
}
.pt-btn--link .pt-btn__t { background-image: none; padding: 0; }
.pt-btn--link:hover  { color: var(--interactive-hover); border-block-end-color: currentColor; }
.pt-btn--link:hover .pt-btn__icon { transform: none; }
.pt-btn--link:active { color: var(--interactive-press); }

/* Auf Kontextflächen gibt es KEINE Variante: .pt-section--brand belegt
   --text-*, --interactive*, --border-* um — jede Variante wechselt damit von
   selbst auf den Flächen-Ton. Eine Kombinationsregel hier wäre ein Befund (Bauplan §e). */

.pt-btn:disabled, .pt-btn[aria-disabled="true"] {
  color: var(--disabled-fg); cursor: default; pointer-events: none;
}
.pt-btn:disabled .pt-btn__t, .pt-btn[aria-disabled="true"] .pt-btn__t { background-image: none; }

/* --- Icon-Button ---------------------------------------------------------- */
.pt-iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--tap-min); height: var(--tap-min); flex: none;
  border: 1px solid transparent; border-radius: var(--radius-pill);
  background: transparent; color: currentColor; cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.pt-iconbtn svg { width: 1.5em; height: 1.5em; fill: currentColor; }
.pt-iconbtn--solid   { background: var(--interactive); color: var(--interactive-fg); }
.pt-iconbtn--solid:hover { background: var(--interactive-hover); }
.pt-iconbtn--outline { border-color: var(--border-default); }
.pt-iconbtn--outline:hover { border-color: var(--border-strong); background: var(--surface-hover); }
.pt-iconbtn:disabled, .pt-iconbtn[aria-disabled="true"] {
  opacity: .35; cursor: default; pointer-events: none;
}

/* --- Karte ----------------------------------------------------------------
   Anatomie: media? > body > (title, text, meta?). Die verlinkte Variante ist
   ein <a>, damit die ganze Karte eine einzige Fokus- und Trefferfläche ist.
   -------------------------------------------------------------------------- */
.pt-card {
  display: flex; flex-direction: column;
  background: var(--surface-card);
  color: var(--text-body);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.pt-card__media { aspect-ratio: 16 / 10; overflow: hidden; }
.pt-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pt-card__body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); }
.pt-card__title { color: var(--text-strong); }
.pt-card__text  { color: var(--text-muted); margin: 0; }
.pt-card--link  { text-decoration: none; color: inherit; transition: border-color var(--dur-base) var(--ease); }
.pt-card--link:hover { border-color: var(--border-strong); }

/* --- Tag und Badge -------------------------------------------------------- */
.pt-tag {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border-default); border-radius: var(--radius-pill);
  background: transparent; font: inherit;
  font-size: var(--caption-size); line-height: 1.3; color: var(--text-body);
}
.pt-tag--strong { background: var(--interactive); border-color: transparent; color: var(--interactive-fg); }
.pt-tag--clickable { cursor: pointer; text-decoration: none; }
.pt-tag--clickable:hover { border-color: var(--border-strong); }
.pt-tag[aria-pressed="true"] { background: var(--interactive); border-color: transparent; color: var(--interactive-fg); }

.pt-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.5rem; padding: 0 var(--space-1);
  border-radius: var(--radius-pill);
  background: var(--surface-muted); color: var(--text-body);
  font-size: var(--caption-size); font-weight: 600;
}

/* --- Formularfeld ---------------------------------------------------------
   Anatomie: field > label + control + (hint | error). Der Fehlertext wird per
   aria-describedby verknüpft, aria-invalid steuert die Darstellung.
   -------------------------------------------------------------------------- */
.pt-field { display: flex; flex-direction: column; gap: var(--space-1); }
.pt-field__label { font-weight: 600; color: var(--text-strong); }
.pt-field__hint  { font-size: var(--caption-size); color: var(--text-muted); }
.pt-field__error { font-size: var(--caption-size); color: var(--status-danger); }

.pt-input, .pt-textarea, .pt-select {
  width: 100%; min-height: var(--tap-min);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-default); border-radius: var(--radius-md);
  background: var(--surface-card); color: var(--text-body);
  font: inherit;
  transition: border-color var(--dur-fast) var(--ease);
}
.pt-textarea { min-height: 8rem; resize: vertical; }
.pt-input::placeholder, .pt-textarea::placeholder { color: var(--text-muted); }
.pt-input:hover, .pt-textarea:hover, .pt-select:hover { border-color: var(--border-strong); }
.pt-input:focus, .pt-textarea:focus, .pt-select:focus { border-color: var(--border-interactive); }
.pt-input[aria-invalid="true"], .pt-textarea[aria-invalid="true"], .pt-select[aria-invalid="true"] {
  border-color: var(--status-danger);
}
.pt-input:disabled, .pt-textarea:disabled, .pt-select:disabled {
  background: var(--disabled-bg); color: var(--disabled-fg); cursor: default;
}

/* --- Auswahl (Checkbox und Radio) -----------------------------------------
   Das echte Input bleibt im DOM und fokussierbar; sichtbar ist die Box.
   -------------------------------------------------------------------------- */
.pt-choice { position: relative; display: inline-flex; align-items: flex-start; gap: var(--space-2); cursor: pointer; }
.pt-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pt-choice__box {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.375rem; height: 1.375rem; flex: none; margin-top: .125rem;
  border: 1px solid var(--border-strong); background: var(--surface-card);
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.pt-choice__box--check { border-radius: var(--radius-sm); }
.pt-choice__box--radio { border-radius: var(--radius-pill); }
.pt-choice__box svg { width: 1rem; height: 1rem; fill: var(--interactive-fg); opacity: 0; }
.pt-choice input:checked + .pt-choice__box { background: var(--interactive); border-color: var(--interactive); }
.pt-choice input:checked + .pt-choice__box svg { opacity: 1; }
.pt-choice input:focus-visible + .pt-choice__box {
  outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: var(--focus-ring-offset);
}
.pt-choice input:disabled + .pt-choice__box { background: var(--disabled-bg); border-color: var(--border-default); }
.pt-choice input[aria-invalid="true"] + .pt-choice__box { border-color: var(--status-danger); }

/* Kopfzeile — Struktur und Zustände, kein Look. Farben aus Tokens. */
.pt-skip {
  position: absolute; left: var(--space-3); top: var(--space-3); z-index: 100;
  transform: translateY(-200%);
  padding: var(--space-2) var(--space-3);
  background: var(--surface-card); color: var(--text-strong);
  border: 1px solid var(--border-strong); border-radius: var(--radius-md);
}
.pt-skip:focus-visible { transform: translateY(0); }

.pt-header { border-block-end: 1px solid var(--border-default); background: var(--surface-page); color: var(--text-body); }
.pt-header__inner { display: flex; align-items: center; gap: var(--space-4); min-height: 72px; }
.pt-header__marke { display: inline-flex; align-items: center; min-height: var(--tap-min); color: var(--text-strong); text-decoration: none; }
.pt-header__logo { display: block; height: 28px; width: auto; }
.pt-header__nav { margin-inline-start: auto; }
.pt-header__liste { display: flex; gap: var(--space-4); list-style: none; margin: 0; padding: 0; }
.pt-header__link { display: inline-flex; align-items: center; min-height: var(--tap-min); color: var(--text-body); text-decoration: none; }
.pt-header__link:hover { color: var(--text-link-hover); text-decoration: underline; text-underline-offset: 4px; }
.pt-header__link[aria-current="page"] { font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 767px) {
  .pt-header__nav { margin-inline-start: 0; width: 100%; }
  .pt-header__inner { flex-wrap: wrap; padding-block: var(--space-2); }
}

.pt-header__cta { flex: none; }

/* Fusszeile — Struktur und Zustände, kein Look. */
.pt-footer { border-block-start: 1px solid var(--border-default); padding-block: var(--space-5); background: var(--surface-page); color: var(--text-body); }
.pt-footer__inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); justify-content: space-between; }
.pt-footer__zeile { margin: 0; }
.pt-footer__liste { display: flex; gap: var(--space-4); list-style: none; margin: 0; padding: 0; }
.pt-footer__liste a { display: inline-flex; align-items: center; min-height: var(--tap-min); }

.pt-footer__nav { margin-inline-start: auto; }

/* cb01 · Hero — Vollbild-Foto hinter einem flachen warmen Schleier, das
   Überschriften-Paar mittig, Kanon-Buttons darunter. Nur Layout; Farben aus Tokens. */
.pt-hero {
  position: relative; isolation: isolate;
  display: grid; align-items: center;
  min-height: 100dvh;
  padding-block: var(--space-8);
  overflow: clip;
}
.pt-hero__bild { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.pt-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--scrim-flat); }
.pt-hero__inhalt { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-5); }
.pt-hero__titel { display: flex; flex-direction: column; align-items: center; }
.pt-hero__script { font-size: var(--script-hero-size); margin-block-end: var(--space-1); }
.pt-hero__hervor { font-style: normal; color: var(--text-highlight); }
.pt-hero__aktionen { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4) var(--space-7); margin-block-start: var(--space-4); }

/* cb02 · Anlässe — Überschriften-Paar links, Einleitung rechts unten, darunter die
   Kartenreihe, die aus der Shell herausläuft (bleed) und per Scroll-Snap läuft. */
.pt-anlaesse { overflow: clip; }
.pt-anlaesse__kopf { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-4) var(--space-6); }
.pt-anlaesse__vor { max-width: 52ch; }
.pt-anlaesse__band { margin-block-start: var(--space-7); }
.pt-anlaesse__spur {
  display: flex; gap: var(--space-3);
  margin: 0; padding: 0 var(--bleed-pad); list-style: none;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--bleed-pad);
  scrollbar-width: none;
}
.pt-anlaesse__spur::-webkit-scrollbar { display: none; }
.pt-anlaesse__karte { flex: 0 0 min(80vw, 380px); scroll-snap-align: start; }
.pt-anlaesse__figur { position: relative; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: var(--surface-muted); }
.pt-anlaesse__figur img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-image) var(--ease); }
.pt-anlaesse__karte:hover img { transform: scale(1.04); }
.pt-anlaesse__cap {
  position: absolute; inset-inline: 0; bottom: 0;
  display: flex; flex-direction: column; gap: var(--space-1);
  padding: var(--space-12) var(--space-5) var(--space-5);
  background: var(--scrim-caption); color: var(--text-on-brand);
}
.pt-anlaesse__titel { font-family: var(--font-display); font-size: var(--slide-title-size); font-weight: 400; line-height: 1; }
.pt-anlaesse__sub { font-size: var(--caption-size); font-weight: var(--caption-weight); letter-spacing: var(--caption-tracking); text-transform: uppercase; color: var(--ptb-paper-soft); }

/* cb03 · Abbinder — zweispaltig (.9fr / 1.1fr), links Paar + Ansprechpartnerin +
   Aktionen, rechts das Anfrageformular im Rahmen-im-Rahmen-Motiv des CD. */
.pt-abbinder { overflow: clip; }
.pt-abbinder__info { min-width: 0; }
.pt-form { display: block; }
.pt-abbinder__raster { display: grid; grid-template-columns: .9fr 1.1fr; gap: var(--space-8); align-items: start; }
.pt-abbinder__kontakt { display: flex; flex-wrap: wrap; gap: var(--space-5); align-items: flex-start; margin-block-start: var(--space-6); }
.pt-abbinder__person { flex: 1 1 16rem; min-width: 0; }
.pt-abbinder__portraet { flex: none; width: 120px; height: 160px; object-fit: cover; border-radius: var(--radius-none); }
.pt-abbinder__name { margin: 0; font-family: var(--font-didot); font-size: var(--name-size); line-height: 1.1; color: var(--text-strong); }
.pt-abbinder__rolle { text-transform: uppercase; }
.pt-abbinder__person > * + * { margin-block-start: var(--space-2); }
.pt-abbinder__aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-6); margin-block-start: var(--space-6); }

/* Rahmen im Rahmen: 30-px-Schale mit 8 px Luft um die 22-px-Karte mit Innenlicht */
.pt-abbinder__rahmen {
  padding: var(--frame-pad);
  border: 1px solid var(--border-frame); border-radius: var(--radius-xl);
  background: var(--surface-frame); box-shadow: var(--elevation-frame);
}
.pt-abbinder__karte { padding: var(--card-pad); border-radius: var(--radius-lg); background: var(--surface-card); box-shadow: var(--elevation-inset); }
.pt-form__kicker { color: var(--text-accent); text-transform: uppercase; }
.pt-form__fuss { display: flex; justify-content: flex-end; }

@media (max-width: 1023px) {
  .pt-abbinder__raster { grid-template-columns: 1fr; gap: var(--space-7); }
  .pt-abbinder__karte { padding: var(--space-5); }
}