/* pimp your profile · Schriften. Urbanist variabel (SIL OFL 1.1), lokal, keine Anfrage nach draußen. */
@font-face {
  font-family: "Urbanist";
  src: url("/assets/fonts/urbanist-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  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: "Urbanist";
  src: url("/assets/fonts/urbanist-latin-ext-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  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;
}

/* ==========================================================================
   pimp your profile · Tokens
   Einzige Quelle für Farben, Schrift, Abstände, Formen, Ebenen und Bewegung.
   Die Website lädt diese Datei zuerst; ihr Build bricht ab, wenn sie ein Token benutzt, das es hier nicht gibt.
   tokens.json wird daraus erzeugt (_werkzeuge/tokens-json.mjs), nie von Hand bearbeiten.
   ========================================================================== */

:root {
  /* Farbrollen */
  --c-paper: #ffffff;
  --c-paper-2: #f7f5f0;          /* warmes Off-White für ruhige Flächen */
  --c-paper-3: #efebe3;
  --c-ink: #141414;              /* Text, dunkle Buttons */
  --c-ink-2: #4f4b45;            /* Sekundärtext, 8,66:1 auf Weiß */
  --c-ink-3: #6b665e;            /* Meta, 5,70:1 auf Weiß */
  --c-line: #e6e1d7;             /* nur Trennlinien, nie als einziger Rand eines Bedienelements */
  --c-line-strong: #857f75;      /* Rand von Feldern und Auswahl, 4:1 auf Weiß (WCAG 1.4.11) */
  --c-sun: #fec53e;              /* Kronen-Gelb aus dem Logo, nur Akzent */
  --c-sun-2: #f5b31a;            /* Hover auf Gelb */
  --c-sun-soft: #fff4d6;
  --c-focus: #141414;
  --c-error: #b3261e;            /* Fehlertext und Fehlerrand, 6,5:1 auf Weiß */
  --c-error-soft: #fdecec;
  --c-error-ink: #8a1c14;        /* Text auf --c-error-soft, 8,2:1 */
  --c-todo: #fff0b3;             /* Platzhalter, die vor dem Launch ersetzt werden */
  --c-todo-ink: #5c4400;         /* Text auf --c-todo, 8:1 */

  /* Schrift */
  --font: "Urbanist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;            /* nur Meta: Brotkrumen, Bildunterschrift, Tabellen. Nie für Menü, Knöpfe, Fließtext */
  --fs-base: clamp(1.0625rem, 0.99rem + 0.25vw, 1.1875rem);
  --fs-lead: clamp(1.1875rem, 1.05rem + 0.6vw, 1.5rem);
  --fs-h4: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
  --fs-h3: clamp(1.5rem, 1.3rem + 0.9vw, 2.125rem);
  --fs-h2: clamp(2.125rem, 1.6rem + 2.4vw, 3.75rem);
  --fs-h1: clamp(2.5rem, 1.5rem + 3.4vw, 4.5rem);
  --fs-h1-article: clamp(2.125rem, 1.45rem + 2.4vw, 3.5rem);   /* Artikel-Titel: lang, darf nicht über Lead und Bild dominieren */
  --fs-display: clamp(3rem, 1.6rem + 6.4vw, 8.5rem);
  --lh-tight: 1.02;
  --lh-head: 1.1;
  --lh-body: 1.6;
  --fw-regular: 420;
  --fw-medium: 560;
  --fw-bold: 720;
  --fw-black: 820;
  --ls-head: -0.025em;
  --ls-kicker: 0.14em;

  /* Abstände (8er-Raster, fluid) */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  --sp-8: clamp(3.5rem, 2.5rem + 4vw, 6rem);
  --sp-9: clamp(5rem, 3rem + 8vw, 10rem);
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
  --maxw: 82rem;
  --maxw-text: 42rem;
  --article-inset: clamp(0rem, 6vw - 1.5rem, 4rem);  /* Artikel: Kopf und Text-Raster links und rechts eingerückt gegenüber dem Titelbild, mobil 0 */

  /* Formen */
  --r-sm: 0.5rem;
  --r-md: 1rem;
  --r-lg: 1.5rem;
  --r-pill: 999px;

  /* Logo in Kopf und Fuß gleich groß. Am Handy groß: 168 px bei 320 px (gemessen mit sichtbarer Scrollleiste, 305 px Platz:
     Logo, 12 px Lücke und Menü-Knopf passen), ab 375 px schon die vollen 190 px wie am Desktop.
     Vorher 140 px bis rund 800 px, wirkte mobil zu klein (Mathias, 14.10.2026). */
  --logo-w: clamp(168px, 40vw + 40px, 190px);

  /* Ebenen */
  --z-content: 1;
  --z-deco: 2;
  --z-bar: 40;          /* Schnellkontakt unten (mobil), unter Kopf und Menü */
  --z-header: 50;
  --z-menu: 60;
  --z-skip: 100;

  /* Bewegung */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 180ms;
  --t-base: 380ms;
  --t-slow: 700ms;

  --header-h: 4.5rem;
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t-base: 0ms; --t-slow: 0ms; }
}
html.is-motion-paused { --t-fast: 0ms; --t-base: 0ms; --t-slow: 0ms; }

/* ==========================================================================
   Base · Reset, Typografie, Hilfsklassen
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + var(--sp-4));
}
@media (prefers-reduced-motion: no-preference) {
  html:not(.is-motion-paused) { scroll-behavior: smooth; }
}
body {
  margin: 0;
  background: var(--c-paper);
  color: var(--c-ink);
  font-family: var(--font);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
/* Browser rücken figure um 40 px ein, dann sind Bild und Karte daneben ungleich breit */
figure { margin: 0; }
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
/* Ausschnitt folgt dem Fokuspunkt des Bildes (--fokus setzt der Build am <img>, Werte aus der Gesichtserkennung) */
img { object-position: var(--fokus, 50% 50%); }
picture img { width: 100%; }
h1, h2, h3, h4 {
  margin: 0;
  font-weight: var(--fw-bold);
  line-height: var(--lh-head);
  letter-spacing: var(--ls-head);
  text-wrap: balance;
  /* Überschriften trennen nie automatisch („Einla-dung“ wirkt zerrissen). Wo ein Wort auf 320 px nicht passt,
     steht im Text ein weiches Trennzeichen (&shy;). overflow-wrap ist nur das Netz gegen Querscrollen. */
  overflow-wrap: break-word;
  hyphens: manual;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); font-weight: var(--fw-black); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
p { margin: 0 0 var(--sp-4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
strong { font-weight: var(--fw-bold); }
ul, ol { margin: 0; padding: 0; }
button { font: inherit; color: inherit; }
::selection { background: var(--c-sun); color: var(--c-ink); }

:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Hilfsklassen */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.container {
  width: 100%;
  max-width: calc(var(--maxw) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.kicker {
  display: inline-block;
  margin-bottom: var(--sp-5);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  color: var(--c-ink-2);
}
.kicker::before {
  content: "";
  display: inline-block;
  vertical-align: 0.12em;
  margin-right: var(--sp-2);
  width: 0.55em; height: 0.55em;
  border-radius: 50%;
  background: var(--c-sun);
}
.lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--c-ink-2); max-width: var(--maxw-text); }
.mark { background: linear-gradient(transparent 62%, var(--c-sun) 62%, var(--c-sun) 92%, transparent 92%); padding-inline: 0.05em; }

/* Skip-Link */
.skip-link {
  position: fixed;
  top: var(--sp-3); left: var(--sp-3);
  z-index: var(--z-skip);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-pill);
  background: var(--c-ink); color: var(--c-paper);
  font-weight: var(--fw-bold);
  text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus-visible { transform: none; outline-color: var(--c-sun); }

main:focus { outline: none; }

/* ==========================================================================
   Components
   ========================================================================== */

/* ---------- Button mit Scroll-Text (Referenz: Evoto Cookie-Banner) ----------
   Zwei identische Textebenen im selben Grid-Feld. Beim Hover rollt die obere
   nach oben weg, die Kopie kommt von unten nach, gleichzeitig wechselt die Fläche. */
.btn {
  --btn-bg: var(--c-ink);
  --btn-fg: var(--c-paper);
  --btn-bg-hover: var(--c-sun);
  --btn-fg-hover: var(--c-ink);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: 0 var(--sp-6);
  border: 1.5px solid var(--btn-bg);
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  isolation: isolate;
  overflow: hidden;
  transition: color var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out);
}
/* Füllung wächst von unten, damit der Farbwechsel mit dem Text mitrollt */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--btn-bg-hover);
  transform: translateY(101%);
  transition: transform var(--t-base) var(--ease-out);
}
.btn__roll { display: grid; overflow: hidden; line-height: 1.3; }
.btn__text {
  grid-area: 1 / 1;
  white-space: nowrap;
  transition: transform var(--t-base) var(--ease-out);
}
.btn__text--clone { transform: translateY(105%); }
.btn:hover, .btn:focus-visible { color: var(--btn-fg-hover); border-color: var(--btn-bg-hover); text-decoration: none; }
.btn:hover::before, .btn:focus-visible::before { transform: translateY(0); }
.btn:hover .btn__text:not(.btn__text--clone),
.btn:focus-visible .btn__text:not(.btn__text--clone) { transform: translateY(-105%); }
.btn:hover .btn__text--clone,
.btn:focus-visible .btn__text--clone { transform: translateY(0); }
.btn:active { transform: scale(0.98); }

.btn--sun { --btn-bg: var(--c-sun); --btn-fg: var(--c-ink); --btn-bg-hover: var(--c-ink); --btn-fg-hover: var(--c-paper); }
.btn--ink { --btn-bg: var(--c-ink); --btn-fg: var(--c-paper); --btn-bg-hover: var(--c-sun); --btn-fg-hover: var(--c-ink); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--c-ink); --btn-bg-hover: var(--c-ink); --btn-fg-hover: var(--c-paper); border-color: var(--c-ink); }
.btn--sm { min-height: 2.75rem; padding: 0 var(--sp-5); }

@media (prefers-reduced-motion: reduce) {
  .btn__text, .btn::before { transition: none; }
  .btn:hover .btn__text:not(.btn__text--clone), .btn:focus-visible .btn__text:not(.btn__text--clone) { transform: none; }
  .btn:hover .btn__text--clone, .btn:focus-visible .btn__text--clone { visibility: hidden; }
}

/* Externer Link: Icon "Pfeil aus dem Kasten" hinter jedem Link auf eine fremde Domain.
   Klasse setzt der Build automatisch. Farbe folgt dem Text (Maske auf currentColor). */
.link-ext::after {
  content: "";
  display: inline-block;
  flex: 0 0 auto;
  width: 0.72em;
  height: 0.72em;
  margin-left: 0.3em;
  vertical-align: -0.02em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6'/%3E%3Cpath d='M20 4 10.5 13.5'/%3E%3Cpath d='M18 14v4.5a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 4 18.5v-11A1.5 1.5 0 0 1 5.5 6H10'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6'/%3E%3Cpath d='M20 4 10.5 13.5'/%3E%3Cpath d='M18 14v4.5a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 4 18.5v-11A1.5 1.5 0 0 1 5.5 6H10'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0.8;
}

/* Hover-Unterlinie wie in der Hauptnavigation: gelbe Linie wächst von links ein, beim aktiven Punkt bleibt sie.
   ::before statt ::after, damit das Extern-Icon (::after) daneben Platz hat. Die Linie sitzt unter der Schrift,
   auch wenn der Link für die 44-px-Tippfläche höher ist. */
.breadcrumb a,
.footer__list a:not(.footer__review),
.footer__legal a,
.menu__contact a,
.contact__card a:not(.rating) {
  position: relative;
  text-decoration: none;
}
.breadcrumb a::before,
.footer__list a:not(.footer__review)::before,
.footer__legal a::before,
.menu__contact a::before,
.contact__card a:not(.rating)::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(50% - 0.8em);
  height: 2px;
  background: var(--c-sun);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--t-base) var(--ease-out);
}
.breadcrumb a.link-ext::before,
.footer__list a.link-ext:not(.footer__review)::before,
.footer__legal a.link-ext::before { right: 1.05em; }
.breadcrumb a:hover::before, .breadcrumb a:focus-visible::before,
.footer__list a:not(.footer__review):hover::before, .footer__list a:not(.footer__review):focus-visible::before,
.footer__legal a:hover::before, .footer__legal a:focus-visible::before,
.menu__contact a:hover::before, .menu__contact a:focus-visible::before,
.contact__card a:not(.rating):hover::before, .contact__card a:not(.rating):focus-visible::before,
.footer__list a[aria-current="page"]::before {
  transform: scaleX(1);
  transform-origin: left;
}
.footer__list a:hover, .footer__legal a:hover, .breadcrumb a:hover { text-decoration: none; }

/* In Flex-Elementen mit gap (Bewertungs-Badge, Pills) den Abstand zum Text angleichen */
.rating.link-ext::after { margin-left: calc(0.3em - var(--sp-3)); }
.footer__review.link-ext::after { margin-left: calc(0.3em - var(--sp-2)); }

/* Textlink mit Pfeil */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  font-weight: var(--fw-bold);
  text-decoration: none;
}
.link-arrow::after {
  content: "→";
  transition: transform var(--t-base) var(--ease-out);
}
.link-arrow:hover::after { transform: translateX(4px); }
.link-arrow span { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; transition: background-size var(--t-base) var(--ease-out); }
.link-arrow:hover span { background-size: 100% 1.5px; }

/* ---------- Header ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  height: var(--header-h);
  background: color-mix(in srgb, var(--c-paper) 0%, transparent);
  transition: background-color var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out), translate var(--t-base) var(--ease-out);
}
.header.is-scrolled {
  background: color-mix(in srgb, var(--c-paper) 82%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: 0 1px 0 var(--c-line);
}
.header.is-hidden { translate: 0 -100%; }
.header__inner {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  /* Am Handy kleinere Mindestlücke, damit das größere Logo neben dem Menü-Knopf Platz hat */
  gap: clamp(var(--sp-3), 2vw + 4px, var(--sp-5));
  height: 100%;
}
.header__logo { flex: 0 0 auto; width: var(--logo-w); min-height: 44px; display: flex; align-items: center; color: var(--c-ink); }
.pyp-logo { display: block; width: 100%; height: auto; overflow: visible; }
/* Im Kopf die Grundlinie der Wortmarke auf die Grundlinie der Menütexte legen.
   Die Krone macht die Logo-Box oben höher, zentriert säße die Schrift sonst rund 6 px zu tief (gemessen bei 190 px). */
.header__logo .pyp-logo { translate: 0 calc(var(--logo-w) * -0.032); }
/* Intro: Krone erst zeigen, wenn GSAP sie auf die Startposition gesetzt hat */
@media (prefers-reduced-motion: no-preference) {
  html.js:not(.is-motion-paused):not(.anim-off):not(.logo-seen) .header__logo .pyp-logo__crown-inner,
  html.js:not(.is-motion-paused):not(.anim-off):not(.logo-seen) .header__logo .pyp-logo__ball { opacity: 0; }
}
.header__actions { display: flex; align-items: center; gap: var(--sp-3); flex: 0 0 auto; }

.nav { display: none; }
.nav__list { display: flex; gap: clamp(var(--sp-3), 1.4vw, var(--sp-6)); list-style: none; }
.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  text-decoration: none;
  white-space: nowrap;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 8px;
  height: 2px;
  background: var(--c-sun);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--t-base) var(--ease-out);
}
.nav__link:hover::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }

.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  padding: 0 var(--sp-4);
  border: 1.5px solid var(--c-ink);
  border-radius: var(--r-pill);
  background: transparent;
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  cursor: pointer;
}
.menu-toggle__icon { position: relative; width: 16px; height: 10px; }
.menu-toggle__icon::before, .menu-toggle__icon::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor;
  transition: transform var(--t-base) var(--ease-out), top var(--t-base) var(--ease-out);
}
.menu-toggle__icon::before { top: 0; }
.menu-toggle__icon::after { top: 8.5px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon::before { top: 4.25px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon::after { top: 4.25px; transform: rotate(-45deg); }

.header .btn--cta { display: none; }

/* Ohne JavaScript ersetzt ein Link zur Seitenliste im Fuß den Menüknopf */
.menu-toggle--nojs { text-decoration: none; }
.js .menu-toggle--nojs, html:not(.js) [data-menu-toggle] { display: none; }

/* Menü ausgeklappt erst, wenn es in Basisgröße (19 px) mit Logo und Knopf in eine Zeile passt: gemessen rund 1.255 px */
@media (min-width: 1280px) {
  .nav { display: block; }
  .menu-toggle { display: none; }
  .header .btn--cta { display: inline-flex; }
}

/* Mobiles Menü */
.menu {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  z-index: var(--z-menu);
  display: flex;
  flex-direction: column;
  padding: var(--sp-6) var(--gutter) var(--sp-7);
  background: var(--c-paper);
  overflow-y: auto;
}
.menu[hidden] { display: none; }
.menu__list { list-style: none; display: grid; gap: var(--sp-1); }
.menu__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  border-bottom: 1px solid var(--c-line);
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  text-decoration: none;
}
.menu__link::after {
  content: "→";
  position: static;
  height: auto;
  background: none;
  transform: none;
  color: var(--c-ink-3);
}
.menu__link[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--c-sun); text-decoration-thickness: 3px; text-underline-offset: 0.25em; }
.menu__footer { margin-top: auto; padding-top: var(--sp-6); display: grid; gap: var(--sp-4); }
.menu__footer .btn { width: 100%; }
.menu__contact { color: var(--c-ink-2); font-size: var(--fs-base); }
body.is-menu-open { overflow: hidden; }
/* Offenes Menü: Kopf deckend, sonst schimmert der Seitentext durch das Glas */
body.is-menu-open .header { background: var(--c-paper); box-shadow: 0 1px 0 var(--c-line); }

/* ---------- Info-Sprechblase (Toggletip) ----------
   details/summary: funktioniert ohne JavaScript und per Tastatur, Screenreader sagen „ausgeklappt/eingeklappt“.
   Icon 1,25 rem, Tippfläche 44 px. Die Blase schwebt über dem Icon und reicht nach rechts, ein Pfeil verbindet sie mit dem „i“.
   main.js hält sie im Bildschirm (--tip-shift verschiebt die Blase, --tip-arrow den Pfeil), schließt mit Escape
   und bei Klick daneben, immer nur eine offen. */
.tip { position: relative; display: inline-block; vertical-align: middle; --tip-shift: 0px; --tip-arrow: 1.4rem; }
.tip__toggle {
  display: grid; place-items: center;
  width: 44px; height: 44px; margin: -10px -8px -10px -6px;
  border-radius: 50%;
  color: var(--c-ink-2);
  list-style: none;
  cursor: pointer;
}
.tip__toggle::-webkit-details-marker { display: none; }
.tip__toggle .pyp-icon { width: 1.25rem; height: 1.25rem; }
.tip__toggle:hover, .tip[open] .tip__toggle { color: var(--c-ink); }
.tip__toggle:focus-visible { outline: 3px solid var(--c-focus); outline-offset: -6px; }
.tip__bubble {
  position: absolute; z-index: var(--z-deco);
  bottom: calc(100% + 4px);
  left: calc(50% - var(--tip-arrow) + var(--tip-shift));
  width: min(22rem, calc(100vw - 2rem));
  margin: 0;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-sm);
  background: var(--c-ink); color: var(--c-paper);
  font-size: var(--fs-sm); line-height: 1.45; font-weight: var(--fw-regular);
  box-shadow: 0 14px 30px -14px rgb(20 20 20 / 0.5);
}
/* Pfeil unten, zeigt auf das Icon */
.tip__bubble::after {
  content: "";
  position: absolute; top: 100%; left: calc(var(--tip-arrow) - var(--tip-shift) - 7px);
  border: 7px solid transparent; border-top-color: var(--c-ink);
}
/* Kein Platz oben: Blase unter dem Icon, Pfeil oben (setzt main.js) */
.tip--unten .tip__bubble { bottom: auto; top: calc(100% + 4px); }
.tip--unten .tip__bubble::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--c-ink); }

/* ---------- Bewertungs-Badge ---------- */
.rating {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 44px;
  font-size: var(--fs-base);
  color: var(--c-ink-2);
  text-decoration: none;
}
.rating__stars { color: var(--c-sun-2); letter-spacing: 0.08em; font-size: 1rem; }
.rating strong { color: var(--c-ink); }
.rating:hover strong { text-decoration: underline; }

/* ---------- Karten ---------- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--r-lg);
  background: var(--c-paper-2);
  overflow: hidden;
  text-decoration: none;
}
.card__media { aspect-ratio: 4 / 5; overflow: hidden; }
.card__media picture { height: 100%; }
.card__media img { height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease-out); }
.card:hover .card__media img { transform: scale(1.04); }
.card__body { display: grid; gap: var(--sp-2); padding: var(--sp-5) var(--sp-5) var(--sp-6); }
.card__title { font-size: var(--fs-h4); }
.card__text { color: var(--c-ink-2); font-size: var(--fs-base); }
.card__link { text-decoration: none; }
.card__link::after { content: ""; position: absolute; inset: 0; }
.card:hover .card__link { text-decoration: underline; text-decoration-thickness: 2px; }
.card:focus-within { outline: 3px solid var(--c-focus); outline-offset: 3px; }
.card__link:focus-visible { outline: none; }

/* ---------- FAQ ---------- */
.faq { display: grid; border-top: 1px solid var(--c-line); }
.faq__item { border-bottom: 1px solid var(--c-line); }
.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  min-height: 64px;
  padding: var(--sp-4) 0;
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  line-height: 1.3;
  cursor: pointer;
  list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+";
  flex: 0 0 2.25rem;
  display: grid; place-items: center;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--c-paper-2);
  font-weight: var(--fw-medium);
  transition: transform var(--t-base) var(--ease-out), background-color var(--t-base) var(--ease-out);
}
.faq__item[open] summary::after { transform: rotate(45deg); background: var(--c-sun); }
/* Beim Schließen dreht das Plus sofort zurück, während die Höhe noch animiert */
.faq__item.is-closing summary::after { transform: none; background: var(--c-paper-2); }
.faq__item { overflow: hidden; }
.faq__answer { max-width: var(--maxw-text); padding-bottom: var(--sp-6); color: var(--c-ink-2); }

/* ---------- Footer ---------- */
.footer { background: var(--c-ink); color: var(--c-paper); padding-block: var(--sp-8) var(--sp-6); }
.footer a { color: inherit; }
.footer__top { display: grid; gap: var(--sp-7); padding-bottom: var(--sp-7); border-bottom: 1px solid rgb(255 255 255 / 0.14); }
.footer__logo { display: flex; align-items: center; min-height: 44px; width: var(--logo-w); color: var(--c-paper); }
.footer__claim { max-width: 22ch; margin-top: var(--sp-5); font-size: var(--fs-h3); font-weight: var(--fw-bold); line-height: 1.15; letter-spacing: var(--ls-head); }
.footer__cols { display: grid; gap: var(--sp-6); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.footer__heading { margin-bottom: var(--sp-3); font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-kicker); text-transform: uppercase; color: rgb(255 255 255 / 0.66); }
.footer__list { list-style: none; display: grid; gap: var(--sp-1); }
.footer__list a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
/* Bewertungs-CTA: Knopf mit Scroll-Text wie alle Knöpfe, gelber Rand auf Dunkel, öffnet direkt das Google-Bewertungsfenster */
.btn--review { --btn-bg: transparent; --btn-fg: var(--c-paper); --btn-bg-hover: var(--c-sun); --btn-fg-hover: var(--c-ink); border-color: var(--c-sun); gap: var(--sp-2); padding-inline: var(--sp-4); }
.footer__list .footer__review { margin-top: var(--sp-2); }
.footer__review-stars { color: var(--c-sun); transition: color var(--t-base) var(--ease-out); }
.footer__review:hover .footer__review-stars, .footer__review:focus-visible .footer__review-stars { color: var(--c-ink); }
.footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-4); padding-top: var(--sp-5); font-size: var(--fs-xs); color: rgb(255 255 255 / 0.72); }
.footer__legal { display: flex; flex-wrap: wrap; gap: var(--sp-4); list-style: none; }
.footer__legal a { display: inline-flex; align-items: center; min-height: 44px; }
.footer :focus-visible { outline-color: var(--c-sun); }
@media (min-width: 960px) {
  .footer__top { grid-template-columns: 1.1fr 2fr; }
}

/* Bewegungs-Schalter */
.motion-toggle {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: 44px; padding: 0 var(--sp-4);
  border: 1px solid rgb(255 255 255 / 0.3); border-radius: var(--r-pill);
  background: transparent; color: inherit; font-size: var(--fs-base); cursor: pointer;
}
.motion-toggle.is-paused { background: var(--c-sun); color: var(--c-ink); border-color: var(--c-sun); }

/* Gesperrter Knopf: blass, kein Hover, Zustand bleibt für Screenreader über disabled bzw. aria-disabled */
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; pointer-events: none; }

/* ==========================================================================
   Sections · wiederverwendbare Seitenabschnitte
   ========================================================================== */
.section { padding-block: var(--sp-9); }
.section--soft { background: var(--c-paper-2); }
.section-head { max-width: 46rem; margin-bottom: var(--sp-7); }
.section-head h2 + .lead, .section-head h2 + p { margin-top: var(--sp-5); }
/* Im Abschnittskopf begrenzt der Kopf selbst (46 rem), der Lead darf die ganze Breite nutzen und läuft so meist zweizeilig */
.section-head .lead { max-width: none; }
.section-head--row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sp-5); max-width: none; }

/* Häkchen-Liste */
.checklist { list-style: none; display: grid; gap: var(--sp-4); margin-block: var(--sp-6); }
.checklist li { position: relative; padding-left: 2.25rem; color: var(--c-ink-2); }
.checklist li strong { display: block; color: var(--c-ink); }
.checklist li::before {
  content: "";
  position: absolute; left: 0; top: 0.2em;
  width: 1.4rem; height: 1.4rem;
  border-radius: 50%;
  background: var(--c-sun) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141414' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 62% no-repeat;
}

/* ---------- Hero ---------- */
/* Nur seitlich abschneiden: Der Bildbogen dreht und skaliert beim Scrollen und braucht nach unten Luft.
   Der Hero liegt über dem Folgeabschnitt, damit keine Kante die Karten anschneidet. */
.hero { position: relative; z-index: var(--z-deco); padding-top: clamp(var(--sp-5), 3.5vw, var(--sp-7)); padding-bottom: var(--sp-6); overflow-x: clip; overflow-y: visible; }
.hero__head { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero__kicker { margin-bottom: var(--sp-4); }
.hero__title { max-width: 21ch; font-size: clamp(2.625rem, 1.5rem + 3.6vw, 4.75rem); }
.hero__lead { margin: var(--sp-4) auto 0; max-width: 44rem; }
.hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3); margin-top: var(--sp-5); }
/* Auf schmalen Bildschirmen passen Sterne, Text und Extern-Zeichen nicht in eine Zeile: sauber umbrechen statt den Text im Block zu zerreißen */
.hero__rating { margin-top: var(--sp-2); flex-wrap: wrap; justify-content: center; column-gap: var(--sp-3); row-gap: var(--sp-1); }

.hero__stage { margin-top: clamp(var(--sp-6), 4vw, var(--sp-7)); }
.hero__strip {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(0.5rem, 1.1vw, 1.25rem);
  list-style: none;
  padding-inline: var(--sp-3);
}
.hero__card {
  flex: 0 0 auto;
  border-radius: clamp(0.75rem, 1.2vw, 1.25rem);
  overflow: hidden;
  background: var(--c-paper-3);
  transform-origin: 50% 100%;
  will-change: transform;
}
.hero__card picture, .hero__card img { height: 100%; }
.hero__card img { object-fit: cover; }
/* Bogenform: Mitte am höchsten, außen flacher */
.hero__card--4 { width: 46vw; height: 60vw; }
.hero__card--3, .hero__card--5 { width: 34vw; height: 46vw; }
.hero__card--2, .hero__card--6 { width: 26vw; height: 34vw; }
.hero__card--1, .hero__card--7 { display: none; }
@media (min-width: 760px) {
  .hero__card--1, .hero__card--7 { display: block; width: 13vw; height: 17vw; }
  .hero__card--2, .hero__card--6 { width: 14.5vw; height: 21vw; }
  .hero__card--3, .hero__card--5 { width: 16vw; height: 25vw; }
  .hero__card--4 { width: 21vw; height: 30vw; }
}
@media (min-width: 1600px) {
  .hero__card--1, .hero__card--7 { width: 208px; height: 272px; }
  .hero__card--2, .hero__card--6 { width: 232px; height: 336px; }
  .hero__card--3, .hero__card--5 { width: 256px; height: 400px; }
  .hero__card--4 { width: 336px; height: 480px; }
}
.hero__card--2 img { object-position: var(--fokus, 50% 30%); }

/* ---------- Statement ---------- */
.statement { position: relative; z-index: var(--z-content); padding-block: var(--sp-8); }
.statement__text {
  max-width: 24em;
  margin-inline: auto;
  font-size: clamp(1.625rem, 1.1rem + 2.2vw, 3.25rem);
  font-weight: var(--fw-bold);
  line-height: 1.22;
  letter-spacing: var(--ls-head);
  text-align: center;
  text-wrap: balance;
}
.statement__text strong { font-weight: var(--fw-black); }

/* ---------- Angebot ---------- */
.offer__grid { display: grid; gap: var(--sp-8); align-items: center; }
.offer__media { position: relative; min-height: clamp(26rem, 60vw, 44rem); }
.offer__img { position: absolute; margin: 0; border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 30px 60px -30px rgb(20 20 20 / 0.35); }
.offer__img picture, .offer__img img { height: 100%; }
.offer__img img { object-fit: cover; }
.offer__img--a { left: 0; top: 4%; width: 62%; aspect-ratio: 4 / 5; }
.offer__img--b { right: 0; top: 0; width: 42%; aspect-ratio: 3 / 4; }
.offer__img--c { right: 6%; bottom: 0; width: 40%; aspect-ratio: 4 / 5; }
.offer__cta { margin-top: var(--sp-6); }
.offer__text h2 { margin-bottom: var(--sp-5); }
@media (min-width: 960px) {
  .offer__grid { grid-template-columns: 1fr 1.05fr; }
}

/* ---------- Arbeiten ---------- */
.works__grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: clamp(11rem, 26vw, 22rem);
  grid-auto-flow: dense;
  gap: clamp(0.5rem, 1.2vw, 1.25rem);
}
.works__item { border-radius: var(--r-md); overflow: hidden; background: var(--c-paper-3); }
.works__item picture, .works__item img { height: 100%; }
.works__item img { object-fit: cover; object-position: var(--fokus, 50% 22%); transition: transform var(--t-slow) var(--ease-out); }
.works__item:hover img { transform: scale(1.03); }
.works__item--tall { grid-row: span 2; }
.works__item--wide { grid-column: span 2; }
.works__more { margin-top: var(--sp-6); text-align: center; }
@media (min-width: 900px) {
  .works__grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: clamp(14rem, 20vw, 22rem); }
}

/* ---------- Leistungen ---------- */
.services__grid { list-style: none; display: grid; gap: var(--sp-5); }
.services__grid .card { background: var(--c-paper); }
@media (min-width: 640px) { .services__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1120px) { .services__grid { grid-template-columns: repeat(4, 1fr); } }

/* ---------- Pakete ----------
   Drei Karten aus site.json (website/tools/build.mjs, Platzhalter {{pakete}}): Name, wofür, Häkchen wie .checklist.
   Keine Preise auf der Website (Bianca, 13.10.2026). Unter den Karten einmal fett „Alle Nutzungsrechte inklusive.“
   mit Info-Sprechblase (.tip) im Hinweis .packages__note.
   Das Hauptpaket (--featured) trägt einen Rand in Tinte und oben einen gelben Streifen. */
.packages__list { list-style: none; display: grid; gap: var(--sp-5); }
.package {
  display: grid; align-content: start; gap: var(--sp-3);
  padding: var(--sp-6) var(--sp-5);
  border: 1px solid var(--c-line); border-radius: var(--r-lg);
  background: var(--c-paper);
}
.package--featured { border: 1.5px solid var(--c-ink); box-shadow: inset 0 6px 0 var(--c-sun); }
.package__name { font-size: var(--fs-h3); }
.package__for { color: var(--c-ink-2); }
.package__points { list-style: none; display: grid; gap: var(--sp-3); margin-top: var(--sp-2); padding-top: var(--sp-4); border-top: 1px solid var(--c-line); }
.package__points li { position: relative; padding-left: 2rem; }
.package__points li::before {
  content: "";
  position: absolute; left: 0; top: 0.2em;
  width: 1.3rem; height: 1.3rem;
  border-radius: 50%;
  background: var(--c-sun) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141414' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 62% no-repeat;
}
.packages__note { margin-top: var(--sp-5); color: var(--c-ink-2); }
.packages__note strong { color: var(--c-ink); }
.packages__cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4) var(--sp-6); margin-top: var(--sp-5); }
@media (min-width: 900px) { .packages__list { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Keep it real ---------- */
.real__grid { display: grid; gap: var(--sp-7); align-items: end; }
.real__title { font-size: var(--fs-display); line-height: 0.98; font-weight: var(--fw-black); max-width: 11ch; }
.real__text { display: grid; gap: var(--sp-4); max-width: 34rem; }
@media (min-width: 960px) { .real__grid { grid-template-columns: 1.3fr 1fr; } }

/* ---------- Ablauf ---------- */
.steps__list { list-style: none; display: grid; gap: var(--sp-6); counter-reset: step; }
.steps__item { display: grid; gap: var(--sp-3); align-content: start; padding-top: var(--sp-5); border-top: 1.5px solid var(--c-ink); }
.steps__item p { color: var(--c-ink-2); }
.steps__num { font-size: var(--fs-h2); font-weight: var(--fw-black); line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--c-ink); }
.steps__title { font-size: var(--fs-h4); }
.steps__more { margin-top: var(--sp-6); }
@media (min-width: 720px) { .steps__list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1120px) { .steps__list { grid-template-columns: repeat(4, 1fr); } }

/* ---------- Stimmen ----------
   Ohne Bewegung: Raster mit allen Stimmen. Mit Bewegung (Klasse is-running per JS):
   Endlos-Band, Liste wird einmal dupliziert und um die halbe Breite verschoben. */
.voices__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-5); }
.marquee-toggle {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: 44px; padding: 0 var(--sp-4);
  border: 1.5px solid var(--c-line); border-radius: var(--r-pill);
  background: var(--c-paper); font-size: var(--fs-base); font-weight: var(--fw-bold); cursor: pointer;
}
.marquee-toggle[hidden] { display: none; }
.marquee-toggle:hover { border-color: var(--c-ink); }
.marquee-toggle::before { content: ""; width: 8px; height: 10px; border-inline: 2.5px solid currentColor; }
.marquee-toggle.is-paused::before { width: 0; height: 0; border-inline: 0; border-block: 5px solid transparent; border-left: 8px solid currentColor; }
.voices__marquee { padding-inline: var(--gutter); }
.voices__list {
  list-style: none;
  display: grid;
  gap: var(--sp-5);
  max-width: var(--maxw);
  margin-inline: auto;
}
@media (min-width: 720px) { .voices__list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1120px) { .voices__list { grid-template-columns: repeat(3, 1fr); } }

.voices__marquee.is-running {
  padding-inline: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.voices__marquee.is-running .voices__list {
  display: flex;
  width: max-content;
  max-width: none;
  margin: 0;
  will-change: transform;
}
.voices__marquee.is-running .quote { width: min(82vw, 26rem); flex: 0 0 auto; }
.quote {
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--sp-6);
  padding: var(--sp-6);
  border-radius: var(--r-lg);
  background: var(--c-paper-2);
}
.quote__text { margin: 0; font-size: var(--fs-lead); line-height: 1.45; font-weight: var(--fw-medium); }
.quote__by { color: var(--c-ink-2); font-size: var(--fs-sm); }
.quote__by strong { display: block; color: var(--c-ink); }

/* ---------- Über ---------- */
.about__grid { display: grid; gap: var(--sp-7); align-items: center; }
.about__img { margin: 0; border-radius: var(--r-lg); overflow: hidden; }
.about__text { display: grid; gap: var(--sp-4); justify-items: start; }
.about__text h2 { margin-bottom: var(--sp-2); }
@media (min-width: 960px) { .about__grid { grid-template-columns: 1fr 1.1fr; gap: var(--sp-9); } }

/* ---------- FAQ-Abschnitt ---------- */
.faq-section__grid { display: grid; gap: var(--sp-6); }
@media (min-width: 960px) { .faq-section__grid { grid-template-columns: 1fr 1.6fr; gap: var(--sp-8); } }

/* ---------- CTA-Band ---------- */
.cta-band { padding-block: var(--sp-9); background: var(--c-sun); }
.cta-band__inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-5); }
.cta-band__title { font-size: var(--fs-h1); font-weight: var(--fw-black); line-height: var(--lh-tight); max-width: 14ch; }
.cta-band .lead { color: var(--c-ink); }
.cta-band .btn--ink { --btn-bg-hover: var(--c-paper); --btn-fg-hover: var(--c-ink); }
.cta-band .btn--ghost { --btn-bg-hover: var(--c-ink); }
.cta-band :focus-visible { outline-color: var(--c-ink); }

/* ---------- Text-Split (GSAP) ---------- */
.split-mask { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.split-word { display: inline-block; }
.split-inline { display: inline; }
.split-inline .split-word { display: inline; }
/* Wort mit weichem Trennzeichen: bleibt inline, damit es umbrechen kann, und blendet nur ein (main.js) */
.split-mask.split-weich, .split-weich > .split-word { display: inline; overflow: visible; }

/* Kein Aufblitzen vor dem Start der Hero-Animation. Fällt GSAP aus, setzt das Inline-Skript anim-off. */
@media (prefers-reduced-motion: no-preference) {
  html.js:not(.is-motion-paused):not(.anim-off) .hero__title,
  html.js:not(.is-motion-paused):not(.anim-off) .hero [data-reveal],
  html.js:not(.is-motion-paused):not(.anim-off) .hero__card { opacity: 0; }
}

/* ==========================================================================
   Muster für Unterseiten · Name mit Krone, Brotkrumen, Seitenkopf, Leistungsseite,
   Kacheln, Artikel mit Inhaltsverzeichnis, Tabelle, Galerie, Formular
   ========================================================================== */

/* ---------- Name mit Krone ({{brand}}) ---------- */
.brand-name { white-space: nowrap; }
.brand-name__p { position: relative; display: inline-block; }
.brand-name__crown {
  position: absolute;
  left: -0.18em;
  bottom: 0.66em;
  width: 0.62em;
  height: auto;
  transform: rotate(-14deg);
  transform-origin: 50% 100%;
  overflow: visible;
  pointer-events: none;
}

/* ---------- Brotkrumen ---------- */
.breadcrumb { margin-bottom: var(--sp-5); font-size: var(--fs-xs); color: var(--c-ink-3); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; }
.breadcrumb li { display: inline-flex; align-items: center; gap: var(--sp-2); }
.breadcrumb li + li::before { content: "/"; color: var(--c-line); }
.breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; }
.breadcrumb [aria-current] { color: var(--c-ink-2); }

/* ---------- Seitenkopf ---------- */
.page-head { padding-block: var(--sp-6) var(--sp-7); }
.page-head h1 { max-width: 20ch; }
.page-head .lead { margin-top: var(--sp-5); }
.page-head__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }

/* Leistungsseite: Text links, Bild rechts */
.service-hero { display: grid; gap: var(--sp-7); align-items: center; padding-block: var(--sp-5) var(--sp-8); }
.service-hero__text h1 { max-width: 18ch; }
.service-hero__text .lead { margin-top: var(--sp-5); }
.service-hero__media { position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 5; }
.service-hero__media picture, .service-hero__media img { height: 100%; }
.service-hero__media img { object-fit: cover; object-position: var(--fokus, 50% 25%); }
.service-hero__badge {
  position: absolute; left: var(--sp-4); bottom: var(--sp-4);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-pill);
  background: var(--c-paper);
  font-size: var(--fs-xs); font-weight: var(--fw-bold);
}
@media (min-width: 960px) {
  .service-hero { grid-template-columns: 1.1fr 0.9fr; gap: var(--sp-8); }
}

/* Inhaltsblock zweispaltig (Überschrift links, Text rechts) */
.split { display: grid; gap: var(--sp-6); }
.split__text { display: grid; gap: var(--sp-4); max-width: var(--maxw-text); }
.split__text p { color: var(--c-ink-2); }
@media (min-width: 960px) { .split { grid-template-columns: 1fr 1.3fr; gap: var(--sp-8); } }
/* Zwei Blöcke hintereinander in einem Abschnitt (z. B. Zweispalter, dann Bildraster): Abstand wie nach .section-head */
.section > .container + .container { margin-top: var(--sp-7); }

/* Kacheln mit Nummer oder Stichwort */
.tiles { list-style: none; display: grid; gap: var(--sp-5); }
.tile { display: grid; gap: var(--sp-3); align-content: start; padding: var(--sp-6); border-radius: var(--r-lg); background: var(--c-paper); }
.section--soft .tile { background: var(--c-paper); }
.section:not(.section--soft) .tile { background: var(--c-paper-2); }
.tile__title { font-size: var(--fs-h4); }
.tile p { color: var(--c-ink-2); }
.tile__icon { width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--c-sun); display: grid; place-items: center; font-weight: var(--fw-black); }
@media (min-width: 720px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1120px) { .tiles--3 { grid-template-columns: repeat(3, 1fr); } .tiles--4 { grid-template-columns: repeat(4, 1fr); } }

/* Bildpaar */
.duo { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(0.5rem, 1.2vw, 1.25rem); align-items: end; }
.duo figure { margin: 0; border-radius: var(--r-lg); overflow: hidden; }
.duo figure:first-child { aspect-ratio: 4 / 5; }
.duo figure:last-child { aspect-ratio: 3 / 4; margin-bottom: 12%; }
.duo picture, .duo img { height: 100%; }
.duo img { object-fit: cover; }

/* ---------- Ratgeber-Übersicht ---------- */
/* Artikelraster ohne einsame Karte: bleibt in der letzten Reihe eine Karte übrig, wird sie zur breiten Querkarte
   (Bild links, Text rechts), bei zwei übrigen Karten teilen sie sich die Reihe. Kein Masonry: die Lesereihenfolge
   bleibt zeilenweise, wie Tastatur und Screenreader sie gehen. */
.article-list { list-style: none; display: grid; gap: var(--sp-6) var(--sp-5); }
@media (min-width: 640px) and (max-width: 1119.98px) {
  .article-list { grid-template-columns: repeat(2, 1fr); }
  .article-list > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 1120px) {
  .article-list { grid-template-columns: repeat(6, 1fr); }
  .article-list > li { grid-column: span 2; }
  .article-list > li:last-child:nth-child(3n+1) { grid-column: 1 / -1; }
  .article-list > li:nth-last-child(2):nth-child(3n+1), .article-list > li:last-child:nth-child(3n+2) { grid-column: span 3; }
}
/* Querkarte für die übrige Karte über die ganze Breite */
@media (min-width: 640px) and (max-width: 1119.98px) {
  .article-list > li:last-child:nth-child(odd) { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); align-items: center; }
  .article-list > li:last-child:nth-child(odd) .card__body { padding: 0; }
}
@media (min-width: 1120px) {
  .article-list > li:last-child:nth-child(3n+1) { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); align-items: center; }
  .article-list > li:last-child:nth-child(3n+1) .card__body { padding: 0; }
}
/* Hervorgehobener Artikel oben in der Übersicht (Meta "featured": true) */
.card--feature { margin-bottom: var(--sp-8); }
.card--feature .card__media { aspect-ratio: 3 / 2; }
.card--feature .card__title { font-size: var(--fs-h2); line-height: var(--lh-tight); }
.card--feature .card__body { gap: var(--sp-3); }
@media (min-width: 900px) {
  .card--feature { display: grid; grid-template-columns: 1.25fr 1fr; gap: var(--sp-7); align-items: center; }
  .card--feature .card__body { padding: 0; }
}
.card--article { background: transparent; border-radius: var(--r-lg); overflow: visible; }
/* Fokusring folgt dem Radius des Bildes und hält Abstand zum Text, der ohne Fläche bis an den Rand läuft */
.card--article:focus-within { outline-offset: var(--sp-2); }
.card--article .card__media { aspect-ratio: 4 / 3; border-radius: var(--r-lg); }
.card--article .card__body { padding: var(--sp-5) 0 var(--sp-2); }
.card__meta { font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-kicker); text-transform: uppercase; color: var(--c-ink-3); }

/* ---------- Artikel ---------- */
/* Artikel: Kopf und Text-Raster sind um --article-inset eingerückt, das Titelbild nutzt die volle Inhaltsbreite und steht
   links und rechts etwas über. Titel, Lead und Trennlinie laufen über die ganze Kopfbreite.
   Desktop ab 1040 px: links der Text, rechts das Inhaltsverzeichnis (16 rem), Abstand --sp-7.
   Nach dem Artikel folgen „Passt dazu“ (.related) und das CTA-Band wie auf allen Seiten. */
.page-head--article,
.article__layout { padding-inline: calc(var(--gutter) + var(--article-inset)); }
.page-head--article { padding-block: var(--sp-5) var(--sp-6); }
.page-head--article h1 { max-width: none; font-size: var(--fs-h1-article); line-height: 1.08; }
.page-head--article .lead { margin-top: var(--sp-5); max-width: none; font-size: var(--fs-lead); }
.page-head--article .kicker { margin-bottom: var(--sp-4); }
.article__meta {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-line);
  font-size: var(--fs-sm);
  color: var(--c-ink-3);
}
.article__hero { margin-block: 0 var(--sp-8); }
.article__hero picture { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 16 / 9; }
.article__hero img { height: 100%; object-fit: cover; object-position: var(--fokus, 50% 28%); }
.article__layout { display: grid; gap: var(--sp-6); padding-bottom: var(--sp-8); }
/* Kopf, Titelbild und Raster nutzen die volle Inhaltsbreite. Ab 1040 px: Text links, Inhaltsverzeichnis rechts
   (im Quelltext steht es vorne, damit es mobil über dem Text liegt) */
@media (min-width: 1040px) {
  .article__layout {
    grid-template-columns: minmax(0, 1fr) 16rem;
    column-gap: var(--sp-7);
  }
  .article__layout > .toc { grid-column: 2; grid-row: 1; position: sticky; top: calc(var(--header-h) + var(--sp-5)); align-self: start; }
  .article__layout > .prose { grid-column: 1; grid-row: 1; }
}
.toc { font-size: var(--fs-sm); }
.toc__title { margin-bottom: var(--sp-3); font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-kicker); text-transform: uppercase; color: var(--c-ink-3); }
.toc ol { list-style: none; display: grid; gap: var(--sp-1); border-left: 1.5px solid var(--c-line); }
.toc a { display: block; padding: var(--sp-2) 0 var(--sp-2) var(--sp-4); margin-left: -1.5px; border-left: 1.5px solid transparent; color: var(--c-ink-2); text-decoration: none; line-height: 1.35; }
.toc a:hover, .toc a.is-active { color: var(--c-ink); border-left-color: var(--c-sun-2); }

/* Fließtext */
.prose { min-width: 0; }
.prose > * + * { margin-top: var(--sp-5); }
.prose h2 { margin-top: var(--sp-8); font-size: var(--fs-h3); scroll-margin-top: calc(var(--header-h) + var(--sp-5)); }
.prose h3 { margin-top: var(--sp-6); font-size: var(--fs-h4); }
.prose h2 + *, .prose h3 + * { margin-top: var(--sp-4); }
/* Erste Überschrift beginnt bündig mit dem Inhaltsverzeichnis daneben */
.prose > :first-child { margin-top: 0; }
.prose p, .prose li { color: var(--c-ink-2); }
.prose strong { color: var(--c-ink); }
.prose ul, .prose ol { padding-left: 1.25em; display: grid; gap: var(--sp-2); }
.prose li::marker { color: var(--c-sun-2); font-weight: var(--fw-bold); }
/* Ziffern sind Text: 4,5:1 nötig, Gelb schafft auf Weiß nur 1,85:1. Punkte bleiben gelb (Schmuck). */
.prose ol > li::marker { color: var(--c-ink-2); }
.prose a:not(.btn) { color: var(--c-ink); text-decoration-color: var(--c-sun-2); text-decoration-thickness: 2px; }
.prose .faq { margin-top: var(--sp-5); }
.prose .faq__item summary { min-height: 56px; font-size: var(--fs-base); font-weight: var(--fw-bold); line-height: 1.35; }
.prose .faq__item summary::after { flex-basis: 2rem; height: 2rem; }
.prose .faq__answer { padding-bottom: var(--sp-5); }
.prose .faq p { color: var(--c-ink-2); }
.callout { padding: var(--sp-5) var(--sp-6); border-radius: var(--r-md); background: var(--c-sun-soft); border-left: 4px solid var(--c-sun); }
.callout p { color: var(--c-ink); }
.prose__figure { margin-inline: 0; }
.prose__figure picture { border-radius: var(--r-md); overflow: hidden; aspect-ratio: 4 / 3; }
.prose__figure picture img { height: 100%; object-fit: cover; object-position: var(--fokus, 50% 25%); }
.prose__figure figcaption { margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--c-ink-3); }

/* Tabellen scrollen im eigenen Container, nie die Seite */
.table-wrap { overflow-x: auto; border: 1px solid var(--c-line); border-radius: var(--r-md); }
.table-wrap:focus-visible { outline-offset: 2px; }
.prose table { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: var(--fs-sm); }
.prose caption { padding: var(--sp-3) var(--sp-4); text-align: left; font-weight: var(--fw-bold); color: var(--c-ink); }
.prose th, .prose td { padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--c-line); text-align: left; vertical-align: top; }
.prose thead th { background: var(--c-paper-2); color: var(--c-ink); font-weight: var(--fw-bold); }
.prose tbody th { color: var(--c-ink); font-weight: var(--fw-bold); }
.prose td { color: var(--c-ink-2); }

/* Artikel-CTA: gleiche Breite wie das Artikel-Raster, Titel in Größe der Zwischenüberschrift */
/* „Passt dazu“ am Ende eines Artikels: drei Ratgeber-Karten auf Off-White */
.related .article-list { margin-top: 0; }

/* ---------- Referenzen-Galerie ---------- */
.gallery { columns: 2; column-gap: clamp(0.5rem, 1.2vw, 1.25rem); }
.gallery__item { break-inside: avoid; margin: 0 0 clamp(0.5rem, 1.2vw, 1.25rem); border-radius: var(--r-md); overflow: hidden; background: var(--c-paper-3); }
.gallery__item img { transition: transform var(--t-slow) var(--ease-out); }
.gallery__item:hover img { transform: scale(1.03); }
@media (min-width: 760px) { .gallery { columns: 3; } }
@media (min-width: 1200px) { .gallery { columns: 4; } }
.gallery-nav { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-6); list-style: none; }
.gallery-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--sp-4); border: 1.5px solid var(--c-line-strong); border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: var(--fw-bold); text-decoration: none; }
.gallery-nav a:hover { border-color: var(--c-ink); }
.gallery-group + .gallery-group { margin-top: var(--sp-8); }
.gallery-group h2 { margin-bottom: var(--sp-5); font-size: var(--fs-h3); }

/* Kundenlogos (nur mit Freigabe sichtbar) */
.logos { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--sp-6) clamp(var(--sp-6), 5vw, var(--sp-9)); }
/* Höhe je Logo optisch angeglichen (kompakte Bildmarken kleiner, schmale Schriftzüge größer), Standard 2,25 rem */
.logos__item { --logo-h: 2.25rem; display: flex; }
.logos img { width: auto; height: var(--logo-h); filter: grayscale(1); opacity: 0.75; transition: filter var(--t-base) var(--ease-out), opacity var(--t-base) var(--ease-out); }
.logos img:hover { filter: none; opacity: 1; }
.logos__item--orf2 { --logo-h: 2rem; }
.logos__item--puls24 { --logo-h: 2rem; }
.logos__item--wienerin { --logo-h: 1.85rem; }
.logos__item--schweizerhaus { --logo-h: 2.1rem; }
/* Kenny S.: feine Linienschrift, etwas größer und kräftiger, sonst verblasst sie neben den anderen */
.logos__item--kennys { --logo-h: 1.7rem; }
.logos__item--kennys img { opacity: 0.85; }
/* Band „Gebucht von“: ruhige Zeile zwischen zwei Abschnitten */
.logos-band { padding-block: var(--sp-7); border-block: 1px solid var(--c-line); }
.logos-band__titel { display: block; margin: 0 0 var(--sp-5); text-align: center; }
@media (max-width: 599.98px) { .logos { gap: var(--sp-5) var(--sp-6); } .logos__item { --logo-h: 1.75rem; } .logos__item--wienerin { --logo-h: 1.5rem; } .logos__item--kennys { --logo-h: 1.4rem; } }

/* ---------- Formular ---------- */
.form { display: grid; gap: var(--sp-5); }
.form__row { display: grid; gap: var(--sp-5); }
@media (min-width: 640px) { .form__row--2 { grid-template-columns: 1fr 1fr; } }
/* Gruppen mit Überschrift („Über dich“, „Dein Shooting“), getrennt durch eine Linie */
.form__group { display: grid; gap: var(--sp-5); margin: 0; padding: 0; border: 0; min-width: 0; }
.form__group + .form__group { padding-top: var(--sp-6); border-top: 1px solid var(--c-line); }
/* float löst die Legende aus dem Rahmen des fieldset, sonst läuft die Trennlinie neben der Überschrift weiter */
.form__legend { float: left; width: 100%; margin-bottom: var(--sp-1); padding: 0; font-size: var(--fs-h4); font-weight: var(--fw-bold); }
/* align-content: start, sonst streckt ein höheres Nachbarfeld (zum Beispiel mit Hinweis darunter) das Eingabefeld */
.field { display: grid; gap: var(--sp-2); align-content: start; }
.field label, .field legend { font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.field__hint { font-size: var(--fs-xs); color: var(--c-ink-3); font-weight: var(--fw-regular); }
/* Pflichtfeld: sichtbares Sternchen, für Screenreader ausgeblendet (sie sagen „erforderlich“ über required an).
   Die Erklärung steht einmal oben im Formular (.form__required). */
.field__req { margin-left: 0.15em; color: var(--c-error); font-weight: var(--fw-bold); }
.form__required { font-size: var(--fs-sm); color: var(--c-ink-2); }
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 3.25rem;
  padding: var(--sp-3) var(--sp-4);
  border: 1.5px solid var(--c-line-strong);
  border-radius: var(--r-md);
  background: var(--c-paper);
  font: inherit;
  color: var(--c-ink);
}
.field textarea { min-height: 9rem; resize: vertical; }
/* Auswahl gleich hoch und gleich gestaltet wie die Eingabefelder, Pfeil in Tinte */
.field select {
  appearance: none;
  padding-right: 3rem;
  background: var(--c-paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141414' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right var(--sp-4) center / 1.15rem no-repeat;
  cursor: pointer;
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--c-ink); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; border-color: var(--c-ink); }
.field [aria-invalid="true"] { border-color: var(--c-error); }
.field__error { font-size: var(--fs-sm); color: var(--c-error); font-weight: var(--fw-medium); }
.field__error:empty { display: none; }
.choices { display: flex; flex-wrap: wrap; gap: var(--sp-2); border: 0; margin: 0; padding: 0; }
.choices legend { margin-bottom: var(--sp-2); }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--sp-4); border: 1.5px solid var(--c-line-strong); border-radius: var(--r-pill); font-size: var(--fs-base); font-weight: var(--fw-medium); cursor: pointer; }
.choice input:checked + span { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-paper); }
.choice input:focus-visible + span { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__note { font-size: var(--fs-xs); color: var(--c-ink-3); }
.form__status { padding: var(--sp-4) var(--sp-5); border-radius: var(--r-md); font-weight: var(--fw-medium); }
.form__status:empty { display: none; }
.form__status--ok { background: var(--c-sun-soft); }
.form__status--error { background: var(--c-error-soft); color: var(--c-error-ink); }

/* ---------- Eckdaten (Fakten-Seite, Steckbriefe) ----------
   Definitionsliste statt Tabelle: liest sich ruhiger und bricht auf schmalen Bildschirmen sauber um. */
.facts { margin: 0; border-top: 1px solid var(--c-line); }
.facts__row { display: grid; gap: var(--sp-1) var(--sp-6); padding-block: var(--sp-4); border-bottom: 1px solid var(--c-line); }
.facts dt { font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-kicker); text-transform: uppercase; color: var(--c-ink-3); padding-top: 0.2em; }
.facts dd { margin: 0; color: var(--c-ink); }
.facts__stand { font-size: var(--fs-sm); color: var(--c-ink-3); }
@media (min-width: 720px) { .facts__row { grid-template-columns: 11rem 1fr; } }

/* Schnellkontakt unten, nur auf schmalen Bildschirmen (unter 960 px): Anrufen und Shooting anfragen.
   Blendet ab 500 px Scrolltiefe weich ein und wieder aus, sobald der Fuß oder das Kontaktformular ins Bild kommt (main.js).
   Versteckt per visibility, damit die Knöpfe dann auch für Tastatur und Screenreader weg sind. Ohne JavaScript nie sichtbar. */
.quickbar { display: none; }
@media (max-width: 959.98px) {
  .js .quickbar {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-bar);
    padding: 0 var(--gutter) calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
    pointer-events: none;
    opacity: 0;
    translate: 0 1rem;
    visibility: hidden;
    transition: opacity var(--t-slow) var(--ease-out), translate var(--t-slow) var(--ease-out), visibility 0s linear var(--t-slow);
  }
  .js .quickbar.is-visible {
    opacity: 1;
    translate: 0 0;
    visibility: visible;
    transition: opacity var(--t-slow) var(--ease-out), translate var(--t-slow) var(--ease-out), visibility 0s;
  }
  /* Offenes Menü schlägt is-visible (höhere Spezifität), sonst bleibt die Leiste über dem Menü stehen */
  html.js body.is-menu-open .quickbar.is-visible { opacity: 0; visibility: hidden; transition: none; }
  .quickbar__inner {
    display: flex;
    gap: var(--sp-2);
    max-width: 30rem;
    margin: 0 auto;
    padding: var(--sp-2);
    border-radius: var(--r-pill);
    background: rgb(255 255 255 / 0.94);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 0 0 1px var(--c-line), 0 14px 34px -14px rgb(20 20 20 / 0.4);
    pointer-events: auto;
  }
  .quickbar__btn { flex: 1 1 auto; min-height: 3rem; padding-inline: var(--sp-4); }
  .quickbar__btn--tel { flex: 0 1 auto; gap: var(--sp-2); }
}

/* pimp your profile · Icons
   Gezeichnete Linien-Icons (24 × 24, Strich 2,2, runde Enden) in assets/icons/.
   Zwei Wege: als Inline-SVG (Farbe currentColor) oder als Maske über .pyp-icon--name (Farbe folgt dem Text). */
.pyp-icon {
  display: inline-block;
  flex: 0 0 auto;
  width: 1em;
  height: 1em;
  vertical-align: -0.12em;
  background-color: currentColor;
  -webkit-mask: var(--pyp-icon) center / contain no-repeat;
  mask: var(--pyp-icon) center / contain no-repeat;
}
.pyp-icon--extern { --pyp-icon: url("/designsystem/assets/icons/extern.svg"); }
.pyp-icon--pfeil-rechts { --pyp-icon: url("/designsystem/assets/icons/pfeil-rechts.svg"); }
.pyp-icon--menue { --pyp-icon: url("/designsystem/assets/icons/menue.svg"); }
.pyp-icon--schliessen { --pyp-icon: url("/designsystem/assets/icons/schliessen.svg"); }
.pyp-icon--pause { --pyp-icon: url("/designsystem/assets/icons/pause.svg"); }
.pyp-icon--play { --pyp-icon: url("/designsystem/assets/icons/play.svg"); }
.pyp-icon--haken { --pyp-icon: url("/designsystem/assets/icons/haken.svg"); }
.pyp-icon--stern { --pyp-icon: url("/designsystem/assets/icons/stern.svg"); }
.pyp-icon--plus { --pyp-icon: url("/designsystem/assets/icons/plus.svg"); }
.pyp-icon--telefon { --pyp-icon: url("/designsystem/assets/icons/telefon.svg"); }
.pyp-icon--mail { --pyp-icon: url("/designsystem/assets/icons/mail.svg"); }
.pyp-icon--kamera { --pyp-icon: url("/designsystem/assets/icons/kamera.svg"); }
.pyp-icon--info { --pyp-icon: url("/designsystem/assets/icons/info.svg"); }

/* pimp your profile · Bewegung
   Bewegung ist eine Schicht obendrauf. Ohne sie steht jeder Inhalt sichtbar im Endzustand.
   Ruhige Fassung: prefers-reduced-motion oder Klasse is-motion-paused auf <html> (Schalter im Fuß, gespeichert).
   Die Dauern kommen aus tokens.css (--t-fast, --t-base, --t-slow) und gehen dort in der ruhigen Fassung auf 0.
   Ablauf und API: BEWEGUNG.md. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}
html.is-motion-paused *, html.is-motion-paused *::before, html.is-motion-paused *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
}

/* ==========================================================================
   Website · nur was es ausschließlich auf pimpyourprofile.com gibt
   Alle Bausteine und Muster kommen aus ../designsystem (components.css, patterns.css).
   ========================================================================== */

/* ---------- Kontakt-Seite ---------- */
.contact { display: grid; gap: var(--sp-8); padding-bottom: var(--sp-9); }
@media (min-width: 1000px) { .contact { grid-template-columns: 1.4fr 1fr; } }
.contact__aside { display: grid; gap: var(--sp-5); align-content: start; }
.contact__card { padding: var(--sp-6); border-radius: var(--r-lg); background: var(--c-paper-2); display: grid; gap: var(--sp-3); }
.contact__card a { font-weight: var(--fw-bold); }
.contact__img { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 1; }
.contact__img picture, .contact__img img { height: 100%; }
.contact__img img { object-fit: cover; }

/* ---------- Rechtstexte ---------- */
.legal { padding-bottom: var(--sp-9); }
.legal .prose h2 { margin-top: var(--sp-7); font-size: var(--fs-h4); }
.legal .prose > h2:first-child { margin-top: 0; }
.todo { padding: 0 0.3em; border-radius: 4px; background: var(--c-todo); color: var(--c-todo-ink); font-weight: var(--fw-bold); }

/* ---------- 404 ---------- */
.notfound { min-height: 60vh; display: grid; place-content: center; justify-items: center; gap: var(--sp-5); text-align: center; padding-block: var(--sp-9); }
.notfound__crown { width: 6rem; transform: rotate(-14deg); }