/*
 * TaskMonkey Produkt-Landing — gemeinsames Layout fuer Self-Service-Produkte.
 * Vorlage: webroot/_product-landing/index.html (Inhalt = Platzhalter).
 *
 * Markenwerte = App-Tokens (src/scss/_theme_tokens.scss, Palette taskmonkey):
 * Akzent #ED6A3D mit dunkler Schrift #1A0F0A, Orange als Text #A8411B /
 * dark #F59A78. Schriften selbst gehostet (keine Google-Fonts-Abrufe):
 * Source Serif 4 fuer Ueberschriften (wie die Chat-Antworten der App),
 * Source Sans fuer Text (wie das Backend).
 */
@font-face { font-family: "TM Serif"; src: url("fonts/source-serif-4-latin-var.woff2") format("woff2"); font-weight: 500 600; font-display: swap; }
@font-face { font-family: "TM Sans"; src: url("fonts/source-sans-pro-latin-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "TM Sans"; src: url("fonts/source-sans-pro-latin-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "TM Sans"; src: url("fonts/source-sans-pro-latin-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  color-scheme: light dark;
  --pl-bg: #F2F4F5;
  --pl-surface: #FFFFFF;
  --pl-sunken: #E9EDEE;
  --pl-text: #19272C;
  --pl-muted: #4A5659;
  --pl-border: #D1D9DC;
  --pl-accent: #ED6A3D;
  --pl-on-accent: #1A0F0A;
  --pl-accent-text: #A8411B;
  --pl-accent-soft: #FBE3D9;
  --pl-success: #1D6B3A;
  --pl-frame: #19272C;
  --pl-shadow: 0 1px 2px rgba(25, 39, 44, .06), 0 24px 48px -24px rgba(25, 39, 44, .35);
  --pl-radius: 14px;
  --pl-grid-gap: 20px; /* ein Abstand fuer Karten-Raster: horizontal = vertikal */
  --pl-wrap: 1180px;
  --pl-serif: "TM Serif", "Iowan Old Style", Georgia, serif;
  --pl-sans: "TM Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --pl-bg: #0A0E10;
    --pl-surface: #101518;
    --pl-sunken: #151C21;
    --pl-text: #ECEDEE;
    --pl-muted: #A2AAAF;
    --pl-border: #202B32;
    --pl-accent-text: #F59A78;
    --pl-accent-soft: rgba(237, 106, 61, .18);
    --pl-success: #6FD39A;
    --pl-frame: #2A363D;
    --pl-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 24px 48px -24px rgba(0, 0, 0, .8);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--pl-bg);
  color: var(--pl-text);
  font-family: var(--pl-sans);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--pl-accent-text); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--pl-accent); outline-offset: 3px; border-radius: 6px; }

.pl-wrap { width: min(var(--pl-wrap), 100% - 40px); margin-inline: auto; }
.pl-eyebrow {
  display: inline-block;
  font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--pl-accent-text);
}
.pl-h2 {
  font-family: var(--pl-serif); font-weight: 600;
  font-size: clamp(30px, 3.6vw, 44px); line-height: 1.12; letter-spacing: -.01em;
  margin: 10px 0 14px;
}
.pl-lead { font-size: clamp(18px, 1.6vw, 21px); color: var(--pl-muted); max-width: 38em; margin: 0; }
.pl-section { padding-block: clamp(64px, 9vw, 120px); }
.pl-section + .pl-section { border-top: 1px solid var(--pl-border); }

/* Buttons */
.pl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px;
  border-radius: 999px; border: 0;
  background: var(--pl-accent); color: var(--pl-on-accent);
  font: 700 17px/1 var(--pl-sans); text-decoration: none;
  transition: transform .15s, box-shadow .15s;
}
.pl-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -12px rgba(237, 106, 61, .9); }
.pl-btn-quiet {
  display: inline-flex; align-items: center; min-height: 52px; padding: 0 6px;
  color: var(--pl-text); font-weight: 600; text-decoration: underline; text-underline-offset: 5px;
  text-decoration-color: var(--pl-border);
}
.pl-btn-quiet:hover { text-decoration-color: var(--pl-accent); }

/* Header */
.pl-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
  background: color-mix(in srgb, var(--pl-bg) 86%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--pl-border);
}
.pl-header-row { display: flex; align-items: center; gap: 28px; min-height: 68px; }
.pl-logo img { height: 28px; width: auto; }
.pl-logo .pl-logo-dark { display: none; }
@media (prefers-color-scheme: dark) { .pl-logo .pl-logo-light { display: none; } .pl-logo .pl-logo-dark { display: block; } }
.pl-nav { display: flex; gap: 24px; margin-left: auto; font-size: 16px; }
.pl-nav a { color: var(--pl-muted); text-decoration: none; }
.pl-nav a:hover { color: var(--pl-text); }
.pl-header .pl-btn { min-height: 44px; padding: 0 20px; font-size: 15px; white-space: nowrap; }
@media (max-width: 820px) { .pl-nav { display: none; } .pl-header .pl-btn { margin-left: auto; } }
@media (max-width: 420px) { .pl-logo img { height: 24px; } .pl-header .pl-btn { padding: 0 16px; font-size: 14px; } }

/* Hero */
.pl-hero { padding-block: clamp(48px, 7vw, 96px) clamp(56px, 8vw, 110px); overflow: hidden; }
.pl-hero-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.pl-h1 {
  font-family: var(--pl-serif); font-weight: 600;
  font-size: clamp(40px, 4.8vw, 60px); line-height: 1.05; letter-spacing: -.02em;
  margin: 14px 0 22px;
}
.pl-h1 em { font-style: italic; color: var(--pl-accent-text); }
.pl-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin: 30px 0 26px; }
.pl-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 15px; color: var(--pl-muted); }
.pl-facts li { display: inline-flex; align-items: center; gap: 8px; }
.pl-facts svg { color: var(--pl-success); flex: none; }
.pl-hero-visual { position: relative; padding: 0 22% 64px 0; }
.pl-hero-visual .pl-phone { position: absolute; right: 0; bottom: 0; width: 34%; }
@media (max-width: 900px) {
  .pl-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .pl-hero-visual { padding: 0 18% 40px 0; }
  .pl-hero-visual .pl-phone { width: 40%; }
}

/* Geraete-Rahmen: echte Produkt-Aufnahmen, kein nachgebautes UI */
.pl-browser {
  margin: 0; border-radius: var(--pl-radius); overflow: hidden;
  background: var(--pl-surface); border: 1px solid var(--pl-border); box-shadow: var(--pl-shadow);
}
.pl-browser-bar {
  display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 14px;
  background: var(--pl-sunken); border-bottom: 1px solid var(--pl-border);
}
.pl-browser-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--pl-border); }
.pl-browser-url {
  margin-left: 8px; flex: 1; max-width: 340px; height: 22px; border-radius: 6px;
  background: var(--pl-surface); color: var(--pl-muted); font-size: 12px; line-height: 22px; padding-inline: 10px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pl-phone {
  margin: 0; aspect-ratio: 390 / 800; padding: 10px;
  border-radius: 38px; background: var(--pl-frame);
  box-shadow: var(--pl-shadow), inset 0 0 0 1px rgba(255, 255, 255, .06);
}
/* Bildschirm = weisse Flaeche mit Innenabstand; die Aufnahme (390x760) wird
   ganz gezeigt (contain), nichts laeuft unter den Rahmen oder die Rundung. */
.pl-phone img {
  width: 100%; height: 100%; object-fit: contain; object-position: center;
  padding: 5% 4.5%; background: #FFFFFF; border-radius: 29px;
}
.pl-caption { margin-top: 12px; font-size: 14px; color: var(--pl-muted); }

/* Zwei Seiten: Kunde / Team */
.pl-duo { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 56px); margin-top: 48px; align-items: start; }
.pl-duo-card h3 { font-family: var(--pl-serif); font-weight: 600; font-size: 24px; line-height: 1.2; margin: 18px 0 8px; }
.pl-duo-card p { margin: 0; color: var(--pl-muted); }
.pl-duo-card .pl-phone { max-width: 320px; }
@media (max-width: 900px) {
  .pl-duo { grid-template-columns: minmax(0, 1fr); }
  /* Mobil steht das Widget schon im Hero — hier nur der Text */
  .pl-duo-card .pl-phone { display: none; }
  .pl-duo-card:first-child h3 { margin-top: 0; }
}

/* Kann / kann bewusst nicht */
.pl-scope { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pl-grid-gap); margin-top: 40px; }
.pl-cards + .pl-scope { margin-top: var(--pl-grid-gap); }
.pl-scope-col { padding: 26px 28px; border-radius: var(--pl-radius); background: var(--pl-surface); border: 1px solid var(--pl-border); }
.pl-scope-col h3 { margin: 0 0 12px; font-size: 18px; }
.pl-scope-col ul { margin: 0; padding-left: 20px; color: var(--pl-muted); }
.pl-scope-col li + li { margin-top: 8px; }
@media (max-width: 720px) { .pl-scope { grid-template-columns: minmax(0, 1fr); } }

/* Einrichtung in Schritten */
.pl-steps { list-style: none; margin: 44px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; counter-reset: step; }
.pl-step { position: relative; padding-top: 22px; border-top: 2px solid var(--pl-text); }
.pl-step::before {
  counter-increment: step; content: counter(step);
  display: block; font-family: var(--pl-serif); font-weight: 600; font-size: 44px; line-height: 1; color: var(--pl-accent-text);
}
.pl-step h3 { margin: 14px 0 6px; font-size: 20px; }
.pl-step p { margin: 0; color: var(--pl-muted); font-size: 16px; }
.pl-step-time { display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 700; color: var(--pl-muted); letter-spacing: .04em; text-transform: uppercase; }
.pl-steps-visual { margin-top: 48px; }
@media (max-width: 820px) { .pl-steps { grid-template-columns: minmax(0, 1fr); } }

/* Datenschutz */
.pl-trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 36px; margin-top: 44px; }
.pl-trust-item svg { color: var(--pl-accent-text); }
.pl-trust-item h3 { margin: 10px 0 4px; font-size: 18px; }
.pl-trust-item p { margin: 0; color: var(--pl-muted); font-size: 16px; }
@media (max-width: 900px) { .pl-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .pl-trust { grid-template-columns: minmax(0, 1fr); } }

/* Preis */
.pl-price { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.pl-price-card { padding: 34px; border-radius: 20px; background: var(--pl-surface); border: 1px solid var(--pl-border); box-shadow: var(--pl-shadow); }
.pl-price-amount { font-family: var(--pl-serif); font-weight: 600; font-size: 64px; line-height: 1; letter-spacing: -.02em; }
.pl-price-amount small { font-family: var(--pl-sans); font-size: 17px; font-weight: 600; color: var(--pl-muted); letter-spacing: 0; }
.pl-price-card ul { list-style: none; padding: 0; margin: 22px 0 26px; }
.pl-price-card li { display: flex; gap: 10px; padding: 8px 0; border-top: 1px solid var(--pl-border); font-size: 16px; }
.pl-price-card li svg { color: var(--pl-success); flex: none; margin-top: 4px; }
.pl-price-card .pl-btn { width: 100%; }
@media (max-width: 820px) { .pl-price { grid-template-columns: minmax(0, 1fr); } }

/* FAQ */
.pl-faq { margin-top: 36px; border-top: 1px solid var(--pl-border); }
.pl-faq details { border-bottom: 1px solid var(--pl-border); }
.pl-faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; align-items: center;
  padding: 20px 0; font-weight: 600; font-size: 18px;
}
.pl-faq summary::-webkit-details-marker { display: none; }
.pl-faq summary::after { content: "+"; font-family: var(--pl-serif); font-size: 26px; color: var(--pl-accent-text); line-height: 1; }
.pl-faq details[open] summary::after { content: "–"; }
.pl-faq details p { margin: 0 0 20px; color: var(--pl-muted); max-width: 48em; }

/* Abschluss + Footer */
.pl-final { text-align: center; }
.pl-final .pl-lead { margin-inline: auto; }
.pl-final .pl-cta-row { justify-content: center; }
.pl-footer { padding-block: 34px; border-top: 1px solid var(--pl-border); font-size: 14px; color: var(--pl-muted); }
.pl-footer .pl-wrap { display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: space-between; }
.pl-footer a { color: var(--pl-muted); }

/* Nur in der Vorlage: markiert Bausteine, deren Inhalt noch zu klaeren ist */
.pl-template-note {
  margin-top: 18px; padding: 10px 14px; border: 1px dashed var(--pl-accent-text); border-radius: 10px;
  font-size: 14px; color: var(--pl-accent-text); background: var(--pl-accent-soft);
}

/* Faehigkeiten als Karten (Produkt mit mehreren Aufgaben) */
.pl-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--pl-grid-gap); margin-top: 44px; }
.pl-card { padding: 24px 22px; border-radius: var(--pl-radius); background: var(--pl-surface); border: 1px solid var(--pl-border); }
.pl-card svg { color: var(--pl-accent-text); }
.pl-card h3 { margin: 12px 0 6px; font-size: 19px; line-height: 1.25; }
.pl-card p { margin: 0; color: var(--pl-muted); font-size: 16px; }
.pl-card-source { display: block; margin-top: 12px; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--pl-muted); }
@media (max-width: 1020px) { .pl-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .pl-cards { grid-template-columns: minmax(0, 1fr); } }

/* Zusatzmodul: Text + Aufnahme nebeneinander */
.pl-module { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 64px); align-items: center; margin-top: 8px; }
.pl-module-tag {
  display: inline-block; padding: 4px 12px; border-radius: 999px;
  background: var(--pl-accent-soft); color: var(--pl-accent-text); font-size: 14px; font-weight: 700;
}
.pl-module ul { margin: 22px 0 0; padding-left: 20px; color: var(--pl-muted); }
.pl-module li + li { margin-top: 8px; }
@media (max-width: 900px) { .pl-module { grid-template-columns: minmax(0, 1fr); } }

/* Preis mit Zusatzmodul */
.pl-price-addon { margin: 0 0 22px; padding: 14px 16px; border-radius: 12px; background: var(--pl-sunken); font-size: 16px; }
.pl-price-addon strong { display: block; }
.pl-price-addon span { color: var(--pl-muted); }

/* Startseite: Systeme, in denen TaskMonkey arbeitet */
.pl-systems { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 0; padding: 0; list-style: none; }
.pl-systems li {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px;
  background: var(--pl-surface); border: 1px solid var(--pl-border); font-size: 15px; font-weight: 600;
}
.pl-systems li span { font-weight: 400; color: var(--pl-muted); }

/* Startseite: Produkte (erstes hervorgehoben) */
.pl-products { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 44px; }
.pl-product {
  display: flex; flex-direction: column; gap: 8px; padding: 24px 22px; border-radius: var(--pl-radius);
  background: var(--pl-surface); border: 1px solid var(--pl-border); color: inherit; text-decoration: none;
  transition: border-color .15s, transform .15s;
}
.pl-product:hover { border-color: var(--pl-accent); transform: translateY(-2px); }
.pl-product h3 { margin: 0; font-size: 20px; line-height: 1.25; }
.pl-product p { margin: 0; color: var(--pl-muted); font-size: 16px; flex: 1; }
.pl-product-more { font-weight: 700; color: var(--pl-accent-text); font-size: 16px; }
.pl-product-status { align-self: flex-start; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--pl-muted); }
.pl-product.is-featured {
  grid-column: span 2; grid-row: span 2; padding: 30px;
  background: linear-gradient(160deg, var(--pl-accent-soft), var(--pl-surface) 60%);
  border-color: color-mix(in srgb, var(--pl-accent) 45%, var(--pl-border));
}
.pl-product.is-featured h3 { font-family: var(--pl-serif); font-size: clamp(26px, 2.6vw, 34px); font-weight: 600; }
.pl-product.is-featured p { font-size: 18px; }
.pl-product.is-featured .pl-product-status { color: var(--pl-success); }
.pl-product.is-featured ul { margin: 6px 0 10px; padding-left: 20px; color: var(--pl-muted); }
.pl-product.is-featured .pl-phone { display: block; width: 44%; max-width: 200px; margin: 10px 0 0 auto; }
@media (max-width: 1020px) { .pl-products { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) {
  .pl-products { grid-template-columns: minmax(0, 1fr); }
  .pl-product.is-featured { grid-column: auto; grid-row: auto; }
}

/* Startseite: Belege aus dem Betrieb (Kunde, Ablaeufe) */
.pl-proof { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 4vw, 64px); align-items: start; margin-top: 40px; }
.pl-proof-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--pl-border); }
.pl-proof-list li { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--pl-border); font-size: 16px; }
.pl-proof-list b { min-width: 0; flex: 1; font-weight: 600; }
.pl-proof-list span { flex: 1; color: var(--pl-muted); }
@media (max-width: 900px) { .pl-proof { grid-template-columns: minmax(0, 1fr); } }

/* Zwei Wege: selbst starten / mit Einrichtung */
.pl-paths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 40px; }
.pl-path { display: flex; flex-direction: column; padding: 30px; border-radius: 20px; background: var(--pl-surface); border: 1px solid var(--pl-border); }
.pl-path h3 { font-family: var(--pl-serif); font-weight: 600; font-size: 26px; margin: 8px 0 6px; }
.pl-path p { margin: 0 0 18px; color: var(--pl-muted); flex: 1; }
.pl-path .pl-btn { align-self: flex-start; }
.pl-path-price { font-weight: 700; margin-bottom: 18px; }
.pl-path-price small { font-weight: 400; color: var(--pl-muted); }
.pl-btn-outline { background: transparent; color: var(--pl-text); box-shadow: inset 0 0 0 2px var(--pl-border); }
.pl-btn-outline:hover { box-shadow: inset 0 0 0 2px var(--pl-accent); }
@media (max-width: 820px) { .pl-paths { grid-template-columns: minmax(0, 1fr); } }

/* Person hinter dem Produkt */
.pl-about { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; align-items: center; }
.pl-about blockquote { margin: 0; padding: 26px 28px; border-left: 4px solid var(--pl-accent); background: var(--pl-surface); border-radius: 0 var(--pl-radius) var(--pl-radius) 0; font-family: var(--pl-serif); font-size: 21px; line-height: 1.45; }
.pl-about cite { display: block; margin-top: 12px; font: 600 15px var(--pl-sans); font-style: normal; color: var(--pl-muted); }
@media (max-width: 820px) { .pl-about { grid-template-columns: minmax(0, 1fr); } }

/* Unterseiten: Brotkrumen ueber der H1 */
.pl-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--pl-muted); }
.pl-crumbs a { color: var(--pl-accent-text); text-decoration: none; }
.pl-crumbs a:hover { text-decoration: underline; }
.pl-crumbs .pl-module-tag { text-transform: none; letter-spacing: 0; }

/* Liste der Shopsysteme (live / bald) */
.pl-shops { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--pl-grid-gap); margin-top: 36px; }
.pl-shop {
  display: flex; flex-direction: column; gap: 6px; padding: 20px 22px; border-radius: var(--pl-radius);
  background: var(--pl-surface); border: 1px solid var(--pl-border); color: inherit; text-decoration: none;
  transition: border-color .15s;
}
.pl-shop:hover { border-color: var(--pl-accent); }
.pl-shop strong { font-size: 19px; }
.pl-shop span { font-size: 15px; color: var(--pl-muted); }
.pl-shop-state { align-self: flex-start; padding: 2px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; }
.pl-shop-state.is-live { background: color-mix(in srgb, var(--pl-success) 14%, transparent); color: var(--pl-success); }
.pl-shop-state.is-soon { background: var(--pl-sunken); color: var(--pl-muted); }
.pl-shops-note { margin: 18px 0 0; color: var(--pl-muted); }
.pl-shops-more { margin-top: var(--pl-grid-gap); padding: 24px 26px; border-radius: var(--pl-radius); border: 1px dashed var(--pl-border); }
.pl-shops-more h3 { margin: 0 0 6px; font-size: 18px; }
.pl-shops-more p { margin: 0; color: var(--pl-muted); font-size: 16px; max-width: 46em; }
.pl-shops-more .pl-systems { margin-top: 16px; }
.pl-shops-more .pl-systems li { font-weight: 600; color: var(--pl-muted); background: transparent; }
@media (max-width: 900px) { .pl-shops { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .pl-shops { grid-template-columns: minmax(0, 1fr); } }

/* Live-Demo: echtes Widget, laedt erst auf Klick. Desktop: gleiches Telefon
   wie im Hero (9:19,5, Dynamic Island, Statusleiste). Ab 900px abwaerts
   (einspaltig) ohne Telefonrahmen als Karte in voller Breite, damit nie zwei
   Telefone direkt uebereinander stehen. Das Widget erbt Schrift (--tmw-font)
   und im Dunkelmodus die Farben (--tm-*) von hier ins Shadow-DOM. */
.pl-live { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.pl-live-frame {
  position: relative; margin: 0 auto; width: 340px; max-width: 100%; aspect-ratio: 9 / 19.5;
  padding: 6px; border-radius: 52px; background: var(--pl-frame);
  box-shadow: var(--pl-shadow), inset 0 0 0 1px rgba(255, 255, 255, .08), inset 0 0 0 2px rgba(0, 0, 0, .25);
}
.pl-live-frame::before {
  content: ""; position: absolute; z-index: 3; top: 17px; left: 50%; transform: translateX(-50%);
  width: 29%; height: 26px; border-radius: 999px; background: #0B0F11;
}
.pl-live-screen {
  --tmw-font: var(--pl-sans);
  --tm-surface: #FFFFFF; --tm-surface-2: #F2F4F5; --tm-border: #D1D9DC; --tm-border-strong: #788E97;
  --tm-text: #19272C; --tm-text-muted: #3E494D; --tm-text-subtle: #4A5659; --tm-accent-text: #A8411B;
  --tm-accent-soft: rgba(237, 106, 61, .12); --tm-bubble-user: #FCE9E1; --tm-success: #16703F; --tm-success-soft: rgba(22, 112, 63, .12);
  --tm-shadow-md: 0 8px 24px rgba(16, 24, 40, .12);
  position: relative; height: 100%; border-radius: 46px; overflow: hidden; padding-top: 50px;
  background: var(--tm-surface); color: var(--tm-text); font-family: var(--pl-sans); font-size: 16px;
}
.pl-live-screen::before { content: "9:41"; position: absolute; top: 17px; left: 12%; font-weight: 600; font-size: 14px; color: currentColor; }
.pl-live-start {
  position: absolute; inset: 50px 0 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: 28px; text-align: center; background: linear-gradient(180deg, var(--pl-accent-soft), var(--tm-surface) 60%); color: var(--tm-text);
}
@media (prefers-color-scheme: dark) { .pl-live-screen::after { filter: invert(1); } }
.pl-live-start strong { font-family: var(--pl-serif); font-size: 22px; font-weight: 600; }
.pl-live-start p { margin: 0; font-size: 15px; color: var(--tm-text-muted); }
@media (prefers-color-scheme: dark) {
  .pl-live-screen {
    --tm-surface: #101518; --tm-surface-2: #151C21; --tm-border: #202B32; --tm-border-strong: #547183;
    --tm-text: #ECEDEE; --tm-text-muted: #A2AAAF; --tm-text-subtle: #949EA3; --tm-accent-text: #F59A78;
    --tm-accent-soft: rgba(237, 106, 61, .2); --tm-bubble-user: #2A1F1A; --tm-success: #3ECF8E; --tm-success-soft: rgba(62, 207, 142, .16);
    --tm-shadow-md: 0 8px 24px rgba(0, 0, 0, .55);
  }
}
.pl-live-note { display: inline-block; margin-top: 16px; padding: 4px 12px; border-radius: 999px; background: var(--pl-accent-soft); color: var(--pl-accent-text); font-size: 14px; font-weight: 700; }
.pl-live ul { margin: 18px 0 0; padding-left: 20px; color: var(--pl-muted); }
.pl-live li + li { margin-top: 6px; }
@media (max-width: 900px) {
  .pl-live-frame {
    width: 100%; aspect-ratio: auto; height: min(600px, 78svh); padding: 0;
    border-radius: var(--pl-radius); background: var(--pl-surface); border: 1px solid var(--pl-border); box-shadow: var(--pl-shadow);
  }
  .pl-live-frame::before, .pl-live-screen::before, .pl-live-screen::after { content: none; }
  .pl-live-screen { border-radius: inherit; padding-top: 0; }
  .pl-live-start { inset: 0; }
}
@media (max-width: 900px) { .pl-live { grid-template-columns: minmax(0, 1fr); } }

/* Hero "Allgemeine KI kann das nicht": Frage + Antwort mit echten Daten im
   Telefon (HTML statt Screenshot: scharf, uebersetzbar, Texte pflegbar). */
.pl-h1-mark { text-decoration: underline; text-decoration-color: var(--pl-accent); text-decoration-thickness: .07em; text-underline-offset: .14em; text-decoration-skip-ink: none; }
.pl-cta-note { font-size: 14px; color: var(--pl-muted); }
.pl-btn-2nd {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 22px;
  border-radius: 999px; border: 2px solid var(--pl-border); color: var(--pl-text); font: 700 17px/1 var(--pl-sans); text-decoration: none;
}
.pl-btn-2nd:hover { border-color: var(--pl-accent); }
.pl-kicker-row { display: grid; grid-template-columns: auto 1fr; gap: 6px 24px; align-items: baseline; margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--pl-border); }
.pl-kicker-row strong { font-family: var(--pl-serif); font-size: 21px; font-weight: 600; }
.pl-kicker-row span { color: var(--pl-muted); font-size: 16px; }
@media (max-width: 560px) { .pl-kicker-row { grid-template-columns: minmax(0, 1fr); } }

/* Telefon im echten Format (ca. 9:19,5): schmaler Rahmen, Dynamic Island,
   Statusleiste. Alles per CSS, damit alle Seiten mit .pl-chatphone gleich
   aussehen, ohne zusaetzliches Markup. */
.pl-chatphone {
  --cp-w: 300px;
  position: relative; margin: 0 auto; width: var(--cp-w); max-width: 100%; aspect-ratio: 9 / 19.5;
  padding: 6px; border-radius: 48px; background: var(--pl-frame);
  box-shadow: var(--pl-shadow), inset 0 0 0 1px rgba(255, 255, 255, .08), inset 0 0 0 2px rgba(0, 0, 0, .25);
}
.pl-chatphone::before {
  content: ""; position: absolute; z-index: 3; top: 16px; left: 50%; transform: translateX(-50%);
  width: 29%; height: 24px; border-radius: 999px; background: #0B0F11;
}
.pl-chatphone-screen {
  position: relative; height: 100%; border-radius: 42px; overflow: hidden; background: #FFFFFF; color: #19272C;
  font: 400 13px/1.42 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  display: flex; flex-direction: column; padding-top: 46px;
}
.pl-chatphone-screen::before {
  content: "9:41"; position: absolute; top: 15px; left: 11%; font-weight: 600; font-size: 13px; letter-spacing: -.01em; color: #0B0F11;
}
.pl-chatphone-screen::after, .pl-live-screen::after {
  content: ""; position: absolute; top: 18px; right: 9%; width: 52px; height: 11px;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 11'%3E%3Cg fill='%230B0F11'%3E%3Crect x='0' y='7' width='3' height='4' rx='.8'/%3E%3Crect x='4.5' y='5' width='3' height='6' rx='.8'/%3E%3Crect x='9' y='3' width='3' height='8' rx='.8'/%3E%3Crect x='13.5' y='0.5' width='3' height='10.5' rx='.8'/%3E%3Cpath d='M26 3.2a8 8 0 0 1 5.6 2.3l1-1a9.5 9.5 0 0 0-13.2 0l1 1A8 8 0 0 1 26 3.2zm0 3a5 5 0 0 1 3.5 1.4l1-1a6.5 6.5 0 0 0-9 0l1 1A5 5 0 0 1 26 6.2zm0 3a2 2 0 0 1 1.4.6L26 11.2l-1.4-1.4A2 2 0 0 1 26 9.2z'/%3E%3Crect x='36.5' y='.5' width='13' height='10' rx='2.6' fill='none' stroke='%230B0F11' stroke-opacity='.45'/%3E%3Crect x='38' y='2' width='10' height='7' rx='1.5'/%3E%3Crect x='50.3' y='3.7' width='1.4' height='3.6' rx='.7' fill-opacity='.45'/%3E%3C/g%3E%3C/svg%3E");
}
.pl-chatphone-top { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 4px 12px 8px; border-bottom: 1px solid #E7EBEC; font-weight: 600; font-size: 12px; }
.pl-chatphone-top i { width: 18px; height: 18px; border-radius: 5px; background: #ED6A3D; display: inline-block; }
.pl-chatphone-body { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 9px; padding: 12px 11px; }
.pl-cp-user { align-self: flex-end; max-width: 88%; padding: 7px 11px; border-radius: 13px 13px 4px 13px; background: #FCE9E1; }
.pl-cp-bot { max-width: 96%; }
.pl-cp-from { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: #4A5659; margin-bottom: 3px; }
.pl-cp-from i { width: 11px; height: 11px; border-radius: 3px; background: #ED6A3D; display: inline-block; }
.pl-cp-steps { margin: 0 0 6px; padding: 6px 8px; list-style: none; border: 1px solid #E1E6E8; border-radius: 9px; font-size: 11.5px; line-height: 1.45; color: #3E494D; }
.pl-cp-steps li { display: flex; gap: 5px; }
.pl-cp-steps li::before { content: "✓"; color: #1D6B3A; font-weight: 700; }
.pl-cp-steps .pl-cp-steps-h { color: #4A5659; }
.pl-cp-steps .pl-cp-steps-h::before { content: none; }
.pl-cp-card { margin: 6px 0; border: 1px solid #E1E6E8; border-radius: 9px; overflow: hidden; }
.pl-cp-card-h { padding: 6px 8px; font-weight: 600; font-size: 12px; border-bottom: 1px solid #E1E6E8; }
.pl-cp-card dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
.pl-cp-card dl > div { padding: 5px 7px; border-left: 1px solid #E1E6E8; min-width: 0; }
.pl-cp-card dl > div:first-child { border-left: 0; }
.pl-cp-card dt { font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: #4A5659; }
.pl-cp-card dd { margin: 1px 0 0; font-weight: 700; font-size: 12px; line-height: 1.3; color: #A8411B; overflow-wrap: anywhere; }
.pl-cp-input { margin: 2px 10px 22px; padding: 6px 6px 6px 11px; border: 1px solid #D1D9DC; border-radius: 999px; color: #4A5659; font-size: 12px; display: flex; align-items: center; justify-content: space-between; }
.pl-cp-input b { width: 18px; height: 18px; border-radius: 50%; background: #ED6A3D; display: inline-block; }
@media (max-width: 520px) {
  .pl-chatphone { --cp-w: 260px; padding: 5px; border-radius: 42px; }
  .pl-chatphone::before { top: 13px; height: 21px; }
  .pl-chatphone-screen { border-radius: 37px; padding-top: 40px; font-size: 11px; }
  .pl-chatphone-screen::before { top: 12px; font-size: 12px; }
  .pl-chatphone-screen::after { top: 15px; width: 46px; height: 10px; }
  .pl-chatphone-top { font-size: 10.5px; padding-bottom: 6px; }
  .pl-chatphone-body { gap: 6px; padding: 8px 9px; }
  .pl-cp-from, .pl-cp-steps { font-size: 9.5px; }
  .pl-cp-card-h, .pl-cp-card dd { font-size: 10px; }
  .pl-cp-card dt { font-size: 7.5px; }
  .pl-cp-input { margin-bottom: 18px; font-size: 10px; }
}
.pl-hero-visual-phone { padding: 0; }

/* Shop-Telefon (Hero Shop-Kundenservice + Systemseiten, Markup aus
   docs/design/shop-systeme/chatphone.html): echte Produktseite des
   Demo-Shops "Lumino", darueber der geoeffnete Chat als Bottom-Sheet.
   Alle Masse in em, skaliert ueber die Bildschirmbreite (cqi).
   Zeigt nur, was das Produkt kann: Bestellstatus lesen, Versand + Link zur
   Sendungsverfolgung, Ruecksendung anmelden (landet als Entwurf beim Team). */
.pl-chatphone--shop {
  --cp-w: 310px;
  --sp-page: #FBF8F5; --sp-surface: #FFFFFF; --sp-text: #19272C; --sp-muted: #5B676B; --sp-line: #E4E8EA;
  --sp-bot: #F1F3F4; --sp-user: #ED6A3D; --sp-on-user: #1A0F0A; --sp-accent-text: #A8411B; --sp-soft: #FDEEE7;
  --sp-hero-a: #F4E9DF; --sp-hero-b: #E9D8C9; --sp-scrim: rgba(10, 14, 16, .32);
}
.pl-chatphone--shop .pl-chatphone-screen { container-type: inline-size; background: var(--sp-page); color: var(--sp-text); }
.pl-sp {
  position: relative; flex: 1; min-height: 0; overflow: hidden;
  font: 400 4.25cqi/1.38 var(--pl-sans); letter-spacing: -.003em;
}
.pl-sp i, .pl-sp s, .pl-sp u { font-style: normal; text-decoration: none; }
.pl-sp-page { padding: 0 1.1em; }
.pl-sp-nav { display: flex; align-items: center; justify-content: space-between; height: 2.7em; }
.pl-sp-nav b { font-family: var(--pl-serif); font-weight: 600; font-size: 1.15em; letter-spacing: .28em; margin-right: -.28em; }
.pl-sp-burger { width: 1.25em; height: .8em; background: linear-gradient(currentColor 0 0) top / 100% 1.5px no-repeat, linear-gradient(currentColor 0 0) center / 100% 1.5px no-repeat, linear-gradient(currentColor 0 0) bottom / 70% 1.5px no-repeat; }
.pl-sp-bag { position: relative; width: 1.15em; height: 1.2em; border: 1.5px solid currentColor; border-radius: .2em .2em .3em .3em; }
.pl-sp-bag s { position: absolute; top: -.6em; right: -.7em; min-width: 1.3em; height: 1.3em; border-radius: 999px; background: var(--sp-user); color: var(--sp-on-user); font-size: .72em; font-weight: 700; line-height: 1.3em; text-align: center; }
.pl-sp-hero { border-radius: 1em; background: linear-gradient(160deg, var(--sp-hero-a), var(--sp-hero-b)); aspect-ratio: 1 / .92; display: grid; place-items: center; }
.pl-sp-lamp { width: 86%; height: auto; }
.pl-sp-info { display: flex; justify-content: space-between; margin-top: .7em; font-weight: 600; }
.pl-sp-scrim { position: absolute; inset: 0; background: var(--sp-scrim); }
.pl-sp-sheet {
  position: absolute; left: 0; right: 0; top: 33%; bottom: 0; display: flex; flex-direction: column;
  background: var(--sp-surface); border-radius: 1.5em 1.5em 0 0; box-shadow: 0 -.6em 2em rgba(10, 14, 16, .18);
}
.pl-sp-handle { display: block; width: 2.6em; height: .3em; margin: .5em auto .1em; border-radius: 999px; background: var(--sp-line); }
.pl-sp-head { display: flex; align-items: center; gap: .6em; padding: .35em 1em .65em; border-bottom: 1px solid var(--sp-line); }
.pl-sp-avatar { flex: none; width: 2.3em; height: 2.3em; border-radius: 50%; display: grid; place-items: center; background: var(--sp-user); color: var(--sp-on-user); font-family: var(--pl-serif); font-weight: 600; }
.pl-sp-title { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.pl-sp-title b { font-weight: 700; }
.pl-sp-title small { font-size: .82em; color: var(--sp-muted); display: flex; align-items: center; gap: .35em; }
.pl-sp-title small::before { content: ""; width: .55em; height: .55em; border-radius: 50%; background: #2FB36B; }
.pl-sp-close { flex: none; width: 1.9em; height: 1.9em; border-radius: 50%; background: var(--sp-bot) no-repeat center / .8em .8em; background-image: linear-gradient(45deg, transparent 44%, var(--sp-muted) 44% 56%, transparent 56%), linear-gradient(-45deg, transparent 44%, var(--sp-muted) 44% 56%, transparent 56%); }
.pl-sp-log { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: .55em; padding: .7em .9em .5em; }
.pl-sp-msg { max-width: 86%; padding: .55em .85em; border-radius: 1.15em; }
.pl-sp-msg.is-user { align-self: flex-end; background: var(--sp-user); color: var(--sp-on-user); border-bottom-right-radius: .35em; font-weight: 600; }
.pl-sp-msg.is-bot { background: var(--sp-bot); border-bottom-left-radius: .35em; }
.pl-sp-reply { display: grid; }
.pl-sp-reply > * { grid-area: 1 / 1; min-width: 0; }
.pl-sp-typing { align-self: start; justify-self: start; display: inline-flex; gap: .3em; padding: .8em .9em; border-radius: 1.15em 1.15em 1.15em .35em; background: var(--sp-bot); opacity: 0; }
.pl-sp-typing i { width: .45em; height: .45em; border-radius: 50%; background: var(--sp-muted); }
.pl-sp-answer { display: flex; flex-direction: column; gap: .55em; }
.pl-sp-order { border: 1px solid var(--sp-line); border-radius: 1em; padding: .7em .75em .6em; background: var(--sp-surface); box-shadow: 0 .15em .6em rgba(10, 14, 16, .06); }
.pl-sp-order-top { display: flex; align-items: center; gap: .6em; }
.pl-sp-thumb { flex: none; width: 2.5em; height: 2.5em; border-radius: .6em; background: linear-gradient(160deg, var(--sp-hero-a), var(--sp-hero-b)); display: grid; place-items: center; }
.pl-sp-thumb svg { width: 88%; height: 88%; }
.pl-sp-order-t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.pl-sp-order-t small { font-size: .82em; color: var(--sp-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-sp-pill { flex: none; padding: .2em .55em; border-radius: 999px; background: var(--sp-soft); color: var(--sp-accent-text); font-size: .78em; font-weight: 700; }
.pl-sp-track { position: relative; display: flex; justify-content: space-between; margin: .85em .1em .15em; padding: 0; list-style: none; font-size: .78em; color: var(--sp-muted); }
.pl-sp-track::before, .pl-sp-track::after { content: ""; position: absolute; top: .39em; left: .5em; height: .22em; border-radius: 999px; }
.pl-sp-track::before { right: .5em; background: var(--sp-line); }
.pl-sp-track::after { width: calc(50% - .5em); background: var(--sp-user); transform-origin: left; }
.pl-sp-track li { position: relative; display: flex; flex-direction: column; gap: .35em; align-items: center; }
.pl-sp-track li:first-child { align-items: flex-start; }
.pl-sp-track li:last-child { align-items: flex-end; }
.pl-sp-track li::before { content: ""; position: relative; z-index: 1; width: 1em; height: 1em; border-radius: 50%; background: var(--sp-surface); border: .22em solid var(--sp-line); }
.pl-sp-track li.is-done::before, .pl-sp-track li.is-now::before { border-color: var(--sp-user); background: var(--sp-user); }
.pl-sp-track li.is-now { color: var(--sp-text); font-weight: 700; }
.pl-sp-track li.is-now::before { box-shadow: 0 0 0 .3em color-mix(in srgb, var(--sp-user) 25%, transparent); }
.pl-sp-carrier { display: flex; justify-content: space-between; align-items: center; gap: .5em; margin-top: .6em; padding-top: .55em; border-top: 1px dashed var(--sp-line); font-size: .85em; color: var(--sp-muted); white-space: nowrap; }
.pl-sp-carrier b { color: #D40511; font-weight: 800; letter-spacing: .02em; margin-right: .2em; }
.pl-sp-carrier u { color: var(--sp-accent-text); font-weight: 700; }
.pl-sp-chips { display: flex; flex-wrap: wrap; gap: .4em; }
.pl-sp-chips span { padding: .38em .8em; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--sp-user) 55%, transparent); color: var(--sp-accent-text); font-weight: 600; font-size: .92em; background: var(--sp-surface); }
.pl-sp-input { display: flex; align-items: center; justify-content: space-between; gap: .5em; margin: .2em .8em 1.9em; padding: .35em .35em .35em 1em; border-radius: 999px; background: var(--sp-bot); color: var(--sp-muted); }
.pl-sp-input b { width: 2em; height: 2em; border-radius: 50%; background: var(--sp-user) no-repeat center / 1em url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A0F0A' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M5 12l7-7 7 7'/%3E%3C/svg%3E"); }
@media (prefers-color-scheme: dark) {
  .pl-chatphone--shop {
    --sp-page: #121719; --sp-surface: #171E22; --sp-text: #ECEDEE; --sp-muted: #A2AAAF; --sp-line: #2A363D;
    --sp-bot: #222B31; --sp-accent-text: #F59A78; --sp-soft: rgba(237, 106, 61, .2);
    --sp-hero-a: #2B2622; --sp-hero-b: #1F1B18; --sp-scrim: rgba(0, 0, 0, .5);
  }
  .pl-chatphone--shop .pl-chatphone-screen::before { color: #ECEDEE; }
  .pl-chatphone--shop .pl-chatphone-screen::after { filter: invert(1); }
}
@media (max-width: 520px) { .pl-chatphone--shop { --cp-w: 300px; } }

/* Auftritt: Sheet faehrt hoch, Frage, Tipp-Anzeige, Antwort mit Karte.
   Ohne Bewegung (prefers-reduced-motion) steht alles sofort da. */
@media (prefers-reduced-motion: no-preference) {
  .pl-sp-sheet { animation: pl-sp-up .6s cubic-bezier(.2, .8, .2, 1) .3s both; }
  .pl-sp-scrim { animation: pl-sp-fade .5s ease .2s both; }
  .pl-sp-msg.is-user { animation: pl-sp-in .35s ease-out 1s both; }
  .pl-sp-typing { animation: pl-sp-typing 1.5s ease 1.5s both; }
  .pl-sp-typing i { animation: pl-sp-dot 1s ease-in-out infinite; }
  .pl-sp-typing i:nth-child(2) { animation-delay: .15s; }
  .pl-sp-typing i:nth-child(3) { animation-delay: .3s; }
  .pl-sp-answer > * { animation: pl-sp-in .4s ease-out both; }
  .pl-sp-answer > :nth-child(1) { animation-delay: 3s; }
  .pl-sp-answer > :nth-child(2) { animation-delay: 3.35s; }
  .pl-sp-answer > :nth-child(3) { animation-delay: 3.8s; }
  .pl-sp-track::after { animation: pl-sp-grow .7s ease-out 3.6s both; }
  .pl-sp-track li.is-now::before { animation: pl-sp-pulse 2s ease-in-out 4.3s infinite; }
}
@keyframes pl-sp-up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes pl-sp-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pl-sp-in { from { opacity: 0; transform: translateY(.6em) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes pl-sp-typing { 0% { opacity: 0; } 12%, 85% { opacity: 1; } 100% { opacity: 0; } }
@keyframes pl-sp-dot { 0%, 60%, 100% { transform: none; opacity: .45; } 30% { transform: translateY(-.25em); opacity: 1; } }
@keyframes pl-sp-grow { from { transform: scaleX(0); } to { transform: none; } }
@keyframes pl-sp-pulse { 0%, 100% { box-shadow: 0 0 0 .3em color-mix(in srgb, var(--sp-user) 25%, transparent); } 50% { box-shadow: 0 0 0 .55em color-mix(in srgb, var(--sp-user) 8%, transparent); } }

/* Gastro: Gast-Chat im Telefon + Freigabe-Karte fuer den Betrieb, Pakete */
.pl-gastro-visual { position: relative; }
.pl-cp-actions { display: flex; gap: 6px; margin-top: 10px; }
.pl-cp-actions span { padding: 5px 12px; border-radius: 999px; border: 1px solid #D1D9DC; color: #19272C; font-size: 12px; font-weight: 600; }
.pl-cp-actions span.is-primary { border-color: #ED6A3D; background: #ED6A3D; color: #1A0F0A; }
/* Was beim Betrieb ankommt: ueberlappt das Telefon unten links leicht */
.pl-owner-note {
  position: absolute; z-index: 4; left: calc(50% - 250px); bottom: 84px; width: 250px; margin: 0; padding: 12px 14px;
  border-radius: var(--pl-radius); background: #FFFFFF; color: #19272C; border: 1px solid #E1E6E8; box-shadow: var(--pl-shadow);
  font: 400 12px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
@media (max-width: 520px) {
  .pl-gastro-visual { padding-bottom: 84px; }
  .pl-owner-note { left: 0; bottom: 0; width: 250px; padding: 10px 12px; }
}
.pl-owner-note-h { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #4A5659; }
.pl-owner-note-h i { width: 8px; height: 8px; border-radius: 50%; background: #ED6A3D; display: inline-block; }
.pl-owner-note strong { display: block; margin-top: 5px; font-size: 13px; }
.pl-cards-note { margin-top: 28px; }
.pl-card-plus { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--pl-accent-soft); color: var(--pl-accent-text); font-size: 12px; font-weight: 700; vertical-align: 2px; }
.pl-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 40px; }
.pl-plan { display: flex; flex-direction: column; padding: 30px; border-radius: 20px; background: var(--pl-surface); border: 1px solid var(--pl-border); }
.pl-plan.is-plus { border: 2px solid var(--pl-accent); }
.pl-plan h3 { font-family: var(--pl-serif); font-weight: 600; font-size: 26px; margin: 6px 0 4px; }
.pl-plan .pl-price-amount { margin: 10px 0 2px; }
.pl-plan-year { color: var(--pl-muted); font-size: 15px; }
.pl-plan ul { list-style: none; padding: 0; margin: 18px 0 24px; flex: 1; }
.pl-plan li { display: flex; gap: 10px; padding: 7px 0; border-top: 1px solid var(--pl-border); font-size: 16px; }
.pl-plan li svg { color: var(--pl-success); flex: none; margin-top: 4px; }
.pl-plan .pl-btn { align-self: stretch; }
@media (max-width: 820px) { .pl-plans { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 420px) { .pl-plan { padding: 24px 20px; } }
.pl-faq-cta { margin-top: 40px; }

/* Plattform-Ueberblick (Startseite #plattform): Kanaele, Tools, API, Sicherheit */
.pl-more-link { margin: 22px 0 0; font-weight: 600; }
.pl-more-link a { text-decoration: none; }
.pl-more-link a:hover { text-decoration: underline; text-underline-offset: 4px; }
.pl-platform .pl-h2 { max-width: 22em; }
.pl-platform-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 26px 0 0; padding: 0; font-size: 15px; color: var(--pl-muted); }
.pl-platform-legend li { display: inline-flex; align-items: center; gap: 8px; }
.pl-avail {
  display: inline-block; padding: 3px 10px; border-radius: 999px; white-space: nowrap;
  font-size: 13px; font-weight: 700; line-height: 1.5; letter-spacing: .01em;
  border: 1px solid var(--pl-border); color: var(--pl-muted); background: var(--pl-surface);
}
.pl-avail.is-self { background: var(--pl-accent-soft); border-color: transparent; color: var(--pl-accent-text); }
.pl-avail.is-setup { background: var(--pl-sunken); border-color: transparent; color: var(--pl-text); }
.pl-avail.is-ask { background: transparent; border-style: dashed; }
.pl-platform-h3 {
  margin: 56px 0 18px; padding-top: 22px; border-top: 1px solid var(--pl-border);
  font-family: var(--pl-serif); font-weight: 600; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.2;
}
.pl-platform-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pl-grid-gap); }
.pl-feature {
  display: flex; flex-direction: column; gap: 10px;
  padding: 24px 22px; border-radius: var(--pl-radius); background: var(--pl-surface); border: 1px solid var(--pl-border);
}
.pl-feature h4 { margin: 0; font-size: 19px; line-height: 1.25; }
.pl-feature p { margin: 0; color: var(--pl-muted); font-size: 16px; }
.pl-feature .pl-feature-meta { margin-top: auto; padding-top: 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 14px; }
.pl-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.pl-chips li { padding: 3px 10px; border-radius: 8px; background: var(--pl-sunken); font-size: 14px; font-weight: 600; color: var(--pl-text); }
.pl-feature-wide { grid-column: span 2; }
.pl-tech { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.pl-tech-list { display: grid; gap: 22px; }
.pl-tech-list article h4 { margin: 0 0 4px; font-size: 18px; }
.pl-tech-list article p { margin: 0; color: var(--pl-muted); font-size: 16px; }
.pl-tech-list a { font-weight: 600; white-space: nowrap; }
.pl-tech-list .pl-feature-meta { margin: 0; }
.pl-platform code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .88em; }
.pl-tech-list code { white-space: nowrap; padding: 1px 5px; border-radius: 5px; background: var(--pl-sunken); color: var(--pl-text); }
.pl-code { margin: 0; border-radius: var(--pl-radius); background: #0F1619; color: #D7DEE1; overflow: hidden; box-shadow: var(--pl-shadow); border: 1px solid #22303A; }
.pl-code figcaption { padding: 12px 18px; border-bottom: 1px solid #22303A; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #9AA6AC; }
.pl-code pre { margin: 0; padding: 18px; overflow-x: auto; font-size: 14px; line-height: 1.6; }
.pl-code pre code { font-size: inherit; white-space: pre; color: inherit; }
.pl-code .c { color: #F59A78; }
.pl-code-note { margin: 0; padding: 0 18px 14px; font-size: 13px; color: #9AA6AC; }
.pl-code-note code { color: #D7DEE1; }
.pl-safety { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--pl-grid-gap); margin: 0; padding: 0; }
.pl-safety li { padding-top: 14px; border-top: 3px solid var(--pl-accent); }
.pl-safety b { display: block; font-size: 17px; line-height: 1.3; margin-bottom: 6px; }
.pl-safety span { display: block; color: var(--pl-muted); font-size: 16px; }
.pl-platform > .pl-wrap > .pl-cta-row { margin: 48px 0 0; }
@media (max-width: 1020px) {
  .pl-platform-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pl-safety { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pl-tech { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .pl-platform-grid, .pl-safety { grid-template-columns: minmax(0, 1fr); }
  .pl-feature-wide { grid-column: auto; }
  .pl-code pre { font-size: 12.5px; }
}

/* Demo per WhatsApp: sekundaer neben dem Haupt-CTA, mobil volle Breite.
   Markup: docs/design/site-chrome/wa_demo.py (Event wa_demo_click). */
.pl-btn-wa {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 52px; padding: 0 22px; border-radius: 999px;
  border: 2px solid var(--pl-border); background: transparent; color: var(--pl-text);
  font: 700 17px/1 var(--pl-sans); text-decoration: none; transition: border-color .15s;
}
.pl-btn-wa svg { flex: none; color: #1A8F4A; }
.pl-btn-wa:hover { border-color: #25D366; }
@media (prefers-color-scheme: dark) { .pl-btn-wa svg { color: #25D366; } }
@media (max-width: 700px) {
  .pl-btn-wa { width: 100%; border-color: color-mix(in srgb, #25D366 55%, var(--pl-border)); background: color-mix(in srgb, #25D366 9%, var(--pl-surface)); }
}

/* Gruender-Kachel (Startseite, Shop-Landing) */
.pl-about--founder { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
@media (max-width: 820px) { .pl-about--founder { grid-template-columns: minmax(0, 1fr); } }
.pl-founder { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 22px; align-items: start; margin: 0; padding: 26px 28px; background: var(--pl-surface); border: 1px solid var(--pl-border); border-radius: 20px; }
.pl-founder img { grid-row: 1 / span 2; width: 132px; height: 165px; object-fit: cover; border-radius: var(--pl-radius); }
.pl-founder blockquote, .pl-about .pl-founder blockquote { grid-column: 2; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; font-family: var(--pl-serif); font-size: 19px; line-height: 1.5; }
.pl-founder blockquote p { margin: 0; }
.pl-founder blockquote p + p { margin-top: 10px; }
.pl-founder figcaption { grid-column: 2; font-size: 15px; color: var(--pl-muted); }
.pl-founder figcaption b { display: block; color: var(--pl-text); font-size: 16px; }
.pl-founder figcaption a { font-weight: 600; overflow-wrap: anywhere; }
@media (max-width: 520px) {
  .pl-founder { grid-template-columns: 84px minmax(0, 1fr); gap: 14px 16px; padding: 20px; }
  .pl-founder img { grid-row: 1; width: 84px; height: 105px; }
  .pl-founder blockquote, .pl-about .pl-founder blockquote { grid-column: 1 / -1; grid-row: 2; font-size: 17px; }
  .pl-founder figcaption { grid-column: 2; grid-row: 1; align-self: center; }
}

/* Logo-Leiste "Im Einsatz bei" (graustufig, webroot/img/referenzen/) */
.pl-refs { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 40px; margin: 28px 0 0; padding: 0; list-style: none; }
.pl-refs-label { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pl-muted); }
.pl-refs img { display: block; height: 30px; width: auto; opacity: .62; }
.pl-refs .pl-ref-tall img { height: 40px; }
@media (prefers-color-scheme: dark) { .pl-refs img { filter: invert(1); opacity: .7; } }
@media (max-width: 520px) { .pl-refs { gap: 12px 26px; } .pl-refs-label { flex-basis: 100%; } .pl-refs img { height: 24px; } .pl-refs .pl-ref-tall img { height: 32px; } }

/* Kundenstimmen: erst nach Freigabe sichtbar (docs/design/site-chrome/testimonials.py, ENABLED) */
.pl-quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pl-grid-gap); margin-top: 32px; }
.pl-quote { margin: 0; padding: 24px 26px; background: var(--pl-surface); border: 1px solid var(--pl-border); border-radius: var(--pl-radius); }
.pl-quote blockquote { margin: 0; font-family: var(--pl-serif); font-size: 18px; line-height: 1.5; }
.pl-quote figcaption { margin-top: 12px; font-size: 15px; color: var(--pl-muted); }
.pl-quote figcaption b { color: var(--pl-text); }
@media (max-width: 900px) { .pl-quotes { grid-template-columns: minmax(0, 1fr); } }