/* GETEILT — Single Source of Truth fuer .pb-*-Sektions-Regeln. Konsumenten:
   PageRenderer::renderPage() (Public, cmpages.de) + editor_new.php Canvas
   (#pbCanvasContent, eingebunden ueber denselben <link> in editor_new.php:544).
   NICHT direkt editieren ohne Editor+Public-Paritaets-Check.

   K-R25 (2026-08-26) — Sechs Hebel, einzeln von Joern freigegeben:
     1. fliessende Schriftgroessen (clamp + Container-Abfragen)
     2. Laufweite bei grossen Ueberschriften
     3. Zeilenlaenge begrenzen
     4. Flaechen mit Tiefe statt Farbbloecken
     5. groessere Tippziele bei Knoepfen
     6. sichtbarer Tastatur-Fokus

   Gemessen vor dem Umbau: clamp() 0 Vorkommen, letter-spacing 0,
   :focus-visible 0, box-shadow 4, transition 3. Fuer .pb-solution-text gab es
   ueberhaupt keine Regel — der Absatz lief mit 147 Zeichen pro Zeile ueber die
   volle Breite des 1100er-Rahmens.

   KEINE Kundenfarbe wird angefasst. Hintergrund-, Text- und Markenfarbe kommen
   aus den Seiten- bzw. Sektions-Einstellungen und bleiben unberuehrt; geaendert
   werden nur die drei fest verdrahteten Systemflaechen (Mintgruen, Rosa, Beige).

   Warum cqi und nicht vw: Die Sektion soll sich am eigenen Rahmen messen, nicht
   am Fensterrand. Auf der Live-Seite ist .pb-container auf 1100px gedeckelt —
   mit vw waechst die Schrift auf einem 2560er-Bildschirm weiter, waehrend der
   Rahmen laengst steht. Im Editor ist der Rahmen 800px (bzw. 768/375 ueber den
   Geraete-Umschalter); dadurch zeigt die Editor-Vorschau die Mobil-Groessen
   erstmals ueberhaupt an. Bisher konnte sie das nicht: die Mobil-Regeln hingen
   an @media, also am FENSTER — in einem 1440px breiten Editorfenster griffen
   sie nie, egal welches Geraet im Umschalter stand. */

/* Bezugsrahmen fuer alle cqi-Werte. Beide Konsumenten in einer Regel, damit
   Editor und Live nicht auseinanderlaufen koennen. */
.pb-container,
#pbCanvasContent { container-type: inline-size; }

/* ANKER (Variante A): sanftes Scrollen zu Sektions-Ankern (#sec-...). Greift auf
   der Live-Seite (PageRenderer-<html>); der Editor-Canvas scrollt in #pbCanvasContent
   und ist von der html-Regel nicht betroffen (Editor==Live-Render bleibt identisch). */
html { scroll-behavior: smooth; }

/* Hebel 6: wer Bewegung im Betriebssystem reduziert hat, bekommt keine. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pb-btn-primary, .pb-btn-cta, .pb-faq-q, .pb-faq-q svg, .pb-logo-img { transition: none !important; }
  .pb-btn-primary:hover, .pb-btn-cta:hover { transform: none; }
}

/* Sections */
.pb-section { max-width:100%; overflow:hidden; position:relative; }
/* Hebel 1 — nur die WAAGERECHTE Polsterung wird fliessend. Die senkrechte
   kommt als Inline-Style aus settings.padding_top/-bottom
   (section-renderer.php:390) und ist damit Nutzerdaten. Der frueher hier
   stehende Mobil-Block hat sie mit !important ueberschrieben und die
   Einstellung des Kunden auf dem Handy stillschweigend verworfen — das
   passiert jetzt nicht mehr. */
.pb-section { padding-left: clamp(20px, 5.5px + 3.86cqi, 48px) !important;
              padding-right: clamp(20px, 5.5px + 3.86cqi, 48px) !important; }

/* K-R26 (27.08.2026) — Rhythmus: tragende Abschnitte bekommen einen leisen Ton.
   Vorher war die ganze Seite eine einzige weisse Bahn; beim Scrollen passierte
   optisch nichts.

   WARUM NACH TYP UND NICHT „jeder zweite":
   Der naheliegende Weg waere :nth-of-type(even). Der ist hier aber NICHT
   paritaetssicher: Der Live-Renderer laesst unsichtbare Abschnitte ganz weg
   (section-renderer.php:381), der Editor-Canvas zeichnet sie mit und dimmt sie
   nur (editor_new.php:1941, .pb-vis-hidden). Sobald EIN Abschnitt ausgeblendet
   ist, zaehlen beide Seiten verschieden — und die Toenung saesse im Editor auf
   anderen Abschnitten als auf der Live-Seite. Genau solche ausgeblendeten
   Bloecke fuehrt diese Karte mit den Vorlagen ein.
   Eine Toenung nach Typ ist dagegen an beiden Orten identisch, unabhaengig von
   Reihenfolge und Sichtbarkeit. Strikte Abwechslung ginge nur mit einer
   serverseitig vergebenen Marker-Klasse — das waere ein Renderer-Eingriff.

   Getoent werden die STUETZENDEN Bloecke (Beleg, Einordnung, Eintragung), nicht
   die tragenden (Problem, Vorteile). Ausgenommen bleibt alles, was eine eigene
   Kundenfarbe oder ein Bild traegt: die Marker-Klassen .pb-has-bg-color /
   .pb-has-bg-image kommen aus section-renderer.php:411/423. */
.pb-sec-solution:not(.pb-has-bg-color):not(.pb-has-bg-image),
.pb-sec-testimonials:not(.pb-has-bg-color):not(.pb-has-bg-image),
.pb-sec-image_text:not(.pb-has-bg-color):not(.pb-has-bg-image),
.pb-sec-social_proof:not(.pb-has-bg-color):not(.pb-has-bg-image),
.pb-sec-logos:not(.pb-has-bg-color):not(.pb-has-bg-image),
.pb-sec-freebie_form:not(.pb-has-bg-color):not(.pb-has-bg-image),
.pb-sec-newsletter_form:not(.pb-has-bg-color):not(.pb-has-bg-image) { background:#faf9f7; }

/* K-R26 — Bild fuellt seine Spalte. Der Renderer gibt dem Bild inline nur
   max-width:100% mit (section-renderer.php:889). Ein 342 px breites Original
   blieb dadurch in einer 408 px breiten Spalte klein stehen und wirkte verloren.
   Beim Vermessen des Bild-Entwurfs aufgefallen.
   Bewusst NUR fuer image_text: .pb-columns benutzen auch die Mehrspalter
   (:881), dort soll ein kleines Logo klein bleiben duerfen. */
.pb-sec-image_text .pb-columns img { width:100%; height:auto; }
/* M3-Scrim — identisch zum Editor-Mirror (editor_new.php .pb-canvas-section.pb-has-bg-image::before).
   Lesbarkeits-Overlay nur bei bg-Bild-Sektionen; Staerke via --pb-scrim (bg_overlay/100, Default .35).
   Content liegt per z-index ueber dem Scrim. Marker-Klasse + --pb-scrim setzt section-renderer.php:151-152. */
.pb-section.pb-has-bg-image::before { content:""; position:absolute; inset:0; background:rgba(0,0,0,var(--pb-scrim,.35)); z-index:0; pointer-events:none; }
.pb-section.pb-has-bg-image > * { position:relative; z-index:1; }
/* B1 (Stufe 5) — Wrapper-bg/-Bild/Scrim systemisch sichtbar machen: die drei voll-opaken Karten
   (.pb-benefit-item, .pb-testi-card, .pb-ba-before/.pb-ba-after) bei gesetztem bg-Bild ODER bg-Farbe
   auf halbtransparentes Weiss umstellen, sodass die Sektions-Hintergrundfarbe/das -Bild durchscheint.
   Default-State (ohne bg) behaelt die opaken Farben. Scrim/z-index bleiben unangetastet. Editor==Live
   (Canvas-Mirror + Live-Patch fuehren pb-has-bg-color mit). problem (6% Tint), pricing/bonus (nur
   Border), cta (intendiert opak) brauchen nichts. */
.pb-section.pb-has-bg-image .pb-benefit-item,
.pb-section.pb-has-bg-image .pb-testi-card,
.pb-section.pb-has-bg-image .pb-ba-before,
.pb-section.pb-has-bg-image .pb-ba-after,
.pb-section.pb-has-bg-color .pb-benefit-item,
.pb-section.pb-has-bg-color .pb-testi-card,
.pb-section.pb-has-bg-color .pb-ba-before,
.pb-section.pb-has-bg-color .pb-ba-after { background:rgba(255,255,255,0.85); }
/* Hebel 1 + 2: 24px bei 375, 36px bei 1100. */
.pb-sec-headline { font-family:var(--font-heading); font-size:clamp(24px, 17.8px + 1.66cqi, 36px); font-weight:800; line-height:1.14; letter-spacing:-0.021em; text-wrap:balance; margin-bottom:1.05em; text-align:center; color:var(--pb-text,var(--text-1)); }

/* Hero — default transparent, Hintergrund kommt von section.settings */
.pb-sec-hero { text-align:center; }
/* Hebel 3: 880px statt 760px. Die Ueberschrift ist deutlich groesser geworden
   und braucht Platz, sonst bricht sie auf fuenf Zeilen. */
.pb-hero-inner { max-width:min(880px, 100%); margin:0 auto; padding:20px 0; }
/* Hebel 1 + 2: 30px bei 375, 54px bei 1100. */
.pb-hero-headline { font-family:var(--font-heading); font-size:clamp(30px, 17.6px + 3.3cqi, 54px); font-weight:800; line-height:1.06; letter-spacing:-0.028em; text-wrap:balance; margin-bottom:0.5em; }
.pb-hero-sub { font-size:clamp(16px, 13.9px + 0.55cqi, 20px); opacity:0.78; max-width:min(48ch, 100%); margin:0 auto 1.7em; line-height:1.55; text-wrap:pretty; }
.pb-hero-proof { font-size:13px; opacity:0.55; margin-top:14px; }

/* Buttons — Hebel 5: Tippziel 52px statt 46px (verbreitete Empfehlung: 48). */
.pb-btn-primary { display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:0 clamp(26px, 4cqi, 40px); background:var(--pb-btn-bg, var(--primary)); color:var(--pb-btn-text, #fff); border-radius:12px; font-weight:700; font-size:clamp(15px, 1.7cqi, 17px); letter-spacing:-0.005em; text-decoration:none; font-family:var(--font-heading); transition:transform 0.18s cubic-bezier(.2,.7,.3,1), box-shadow 0.18s ease, background 0.18s ease; border:none; cursor:pointer; box-shadow:0 1px 2px rgba(0,0,0,0.16), 0 10px 26px -10px rgba(0,0,0,0.38); box-shadow:0 1px 2px color-mix(in srgb, var(--pb-btn-bg, var(--primary)) 28%, transparent), 0 10px 26px -10px color-mix(in srgb, var(--pb-btn-bg, var(--primary)) 62%, transparent); }
/* K-LPV-3 (21.09.2026): der Schein folgt der Farbe des Buttons (--pb-btn-bg, vom Renderer gesetzt, sonst Markenfarbe der Seite) —
   vorher stand hier fest CM-Pink, auch auf Kundenseiten in Orange oder Blau. Die erste box-shadow-Zeile ist der neutrale Rueckfall
   fuer Browser ohne color-mix(). Das !important am Hover-Hintergrund schlaegt die Inline-Farbe des Renderers — sonst bliebe ein
   Button mit eigener Farbe beim Ueberfahren unveraendert. Ohne eigene Farbe dunkelt der Hover die Markenfarbe ab (86 %);
   --primary-dark traegt in Wahrheit die ZWEITfarbe der Marke bzw. den Standard #c2185b — eine blaue Seite ohne Zweitfarbe
   wurde beim Ueberfahren pink. --primary-dark bleibt nur Rueckfall fuer Browser ohne color-mix(). */
.pb-btn-primary:hover { background:var(--pb-btn-bg-hover, var(--primary-dark)); background:var(--pb-btn-bg-hover, color-mix(in srgb, var(--primary) 86%, #000)); transform:translateY(-2px); box-shadow:0 2px 4px rgba(0,0,0,0.18), 0 18px 38px -12px rgba(0,0,0,0.45); box-shadow:0 2px 4px color-mix(in srgb, var(--pb-btn-bg, var(--primary)) 30%, transparent), 0 18px 38px -12px color-mix(in srgb, var(--pb-btn-bg, var(--primary)) 72%, transparent); color:var(--pb-btn-text-hover, var(--pb-btn-text, #fff)); }
.pb-btn-primary[style*="--pb-btn-bg"]:hover { background:var(--pb-btn-bg-hover) !important; }
/* K-LPV-11 (161 A, 01.10.2026): !important nur noch fuer Knoepfe mit im Baukasten gewaehlter
   Farbe. Deren Farbe steht inline (pbButtonStyleAttr, aus Cache-Gruenden seit K-LPV-3) —
   ohne !important wuerde der Hover sie nie schlagen. Die allgemeine Hover-Regel darueber
   traegt es NICHT mehr: sonst schlug sie auch das eigene CSS einer Seite (custom_css),
   dessen Schriftfarbe aber gewann — auf Seite 340 dunkel auf dunkel, 1,99:1. */
/* K-LPV-9 (Entscheidung 161 A): Knopfschrift aus --pb-btn-text / --pb-btn-text-hover
   (pbKnopfSchrift, nach Lesbarkeit). Ohne Wert bleibt sie weiss wie bisher. Die Hover-
   Schrift traegt bewusst KEIN !important: die Regel fuer Seiten ohne Marke auf dunklem
   Grund (K-LPV-8, hoehere Spezifitaet) muss weiter gewinnen, sonst stuende weisse Schrift
   auf dem hellen Hover-Knopf. */
.pb-btn-cta { display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:0 clamp(30px, 4.6cqi, 44px); background:#fff; color:var(--pb-cta-text, var(--primary)); border-radius:12px; font-weight:700; font-size:clamp(15px, 1.8cqi, 17px); letter-spacing:-0.005em; text-decoration:none; font-family:var(--font-heading); transition:transform 0.18s cubic-bezier(.2,.7,.3,1), box-shadow 0.18s ease; box-shadow:0 1px 2px rgba(0,0,0,0.12), 0 10px 26px -12px rgba(0,0,0,0.40); }
/* K-LPV-8 (Entscheidung 158 A, 30.09.2026): Seite OHNE Marke. --primary ist dort
   neutral #1a1a1a (PageRenderer / Canvas), .pb-btn-primary also dunkel mit weisser
   Schrift. Auf dunklem Grund (.pb-bg-dunkel, section-renderer) waere er unsichtbar —
   dort wird er hell. Seiten MIT Marke haben .pb-ohne-marke nicht und bleiben, wie
   sie sind. Eine im Baukasten gewaehlte Knopffarbe steht inline mit --pb-btn-bg und
   ist ausgenommen — die Wahl des Kunden gewinnt. */
.pb-ohne-marke .pb-bg-dunkel .pb-btn-primary:not([style*="--pb-btn-bg"]) { background:#fff; color:#1a1a1a; }
.pb-ohne-marke .pb-bg-dunkel .pb-btn-primary:not([style*="--pb-btn-bg"]):hover { background:#e9e9ee !important; }
/* K-LPV-10 (Entscheidung 161 A): Schrift des weissen Aufruf-Knopfes aus --pb-cta-text
   (pbStyleRootVars: Markenfarbe nur bei >= 4,5:1 auf Weiss). Traegt der Knopf eine im
   Baukasten gewaehlte Farbe, richtet sich die Schrift nach DIESER Farbe — pbButtonStyleAttr
   schreibt dafuer seit K-LPV-9 --pb-btn-text inline. Eine eigene Schriftfarbe steht inline
   als color und gewinnt ohnehin. */
.pb-btn-cta[style*="--pb-btn-bg"] { color:var(--pb-btn-text, var(--pb-cta-text, var(--primary))); }
.pb-btn-cta:hover { transform:translateY(-2px); box-shadow:0 2px 6px rgba(0,0,0,0.16), 0 20px 40px -14px rgba(0,0,0,0.50); }

/* Hebel 6 — sichtbarer Tastatur-Fokus. Gab es im ganzen Stylesheet nicht;
   wer sich mit der Tabulatortaste bewegte, sah nicht, wo er steht. Doppelter
   Ring (dunkel auf hell), damit er auf jedem Kundenhintergrund traegt. */
.pb-section a:focus-visible,
.pb-section button:focus-visible,
.pb-btn-primary:focus-visible,
.pb-btn-cta:focus-visible,
.pb-faq-q:focus-visible,
.pb-lead-input:focus-visible { outline:3px solid #fff; outline-offset:2px; box-shadow:0 0 0 6px rgba(17,17,27,0.55); border-radius:8px; }

/* Problem — Hebel 4: weisse Karte mit feiner Kante statt rosa Flaeche,
   linksbuendig (zentrierte Fliesstexte lesen sich schlechter). */
.pb-problem-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,215px),1fr)); gap:clamp(12px, 1.8cqi, 18px); }
.pb-problem-card { background:#fff; border:1px solid #ecdfe4; border-radius:16px; padding:clamp(20px, 3cqi, 28px); text-align:left; box-shadow:0 1px 2px rgba(28,28,40,0.03), 0 12px 26px -18px rgba(28,28,40,0.28); }
.pb-problem-icon { color:var(--primary); margin-bottom:14px; display:flex; }
.pb-problem-card h4 { font-size:clamp(15px, 1.85cqi, 17px); line-height:1.32; letter-spacing:-0.01em; margin-bottom:6px; }
.pb-problem-card p { font-size:14px; color:#5b5b6b; line-height:1.6; }

/* Solution — Hebel 3. Fuer diesen Absatz gab es bisher KEINE Regel: er lief
   ueber die volle Breite, im Browser gemessen 147 Zeichen in der laengsten
   Zeile. Angenehm lesbar sind 60 bis 75; 46ch ergeben gemessene 65. */
.pb-solution-text { font-size:clamp(15.5px, 14.5px + 0.28cqi, 17.5px); line-height:1.68; max-width:min(46ch, 100%); margin:0 auto; color:#3a3a4a; text-wrap:pretty; }

/* Benefits — Hebel 4: Mintgruen raus. Das Haken-Gruen bleibt (es traegt
   Bedeutung), nur etwas dunkler fuer den Kontrast auf Weiss. */
.pb-benefits-list { display:flex; flex-direction:column; gap:10px; max-width:min(52ch, 100%); margin:0 auto; }
.pb-benefit-item { display:flex; gap:14px; padding:clamp(14px, 2cqi, 18px) clamp(16px, 2.2cqi, 20px); background:#fbfbfa; border:1px solid #ececea; border-radius:12px; align-items:center; }
.pb-benefit-check { width:24px; height:24px; border-radius:50%; background:#16a34a; color:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.pb-benefit-item h4 { font-size:clamp(14.5px, 1.8cqi, 16.5px); line-height:1.4; letter-spacing:-0.008em; margin-bottom:2px; }
.pb-benefit-item p { font-size:13px; color:#5b5b6b; }

/* Steps */
.pb-steps { display:flex; flex-direction:column; gap:16px; max-width:min(52ch, 100%); margin:0 auto; }
.pb-step { display:flex; gap:16px; align-items:start; }
/* K-LPV-50: Ziffer auf der Markenfarbe schreibt wie der Knopf (K-LPV-9, --pb-btn-text nach Lesbarkeit). Ohne die
   Variable — jede Marke, auf der Weiss lesbar ist — bleibt sie weiss. */
.pb-step-num { width:32px; height:32px; border-radius:50%; background:var(--primary); color:var(--pb-btn-text, #fff); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; flex-shrink:0; font-family:var(--font-heading); }
.pb-step h4 { font-size:clamp(14.5px, 1.8cqi, 16.5px); line-height:1.4; margin-bottom:4px; }
.pb-step p { font-size:14px; color:#5b5b6b; line-height:1.6; }

/* Testimonials — Hebel 4: Beige raus, Karte rein. Kursiv bei 13px war schwer
   zu lesen; ein Zitat darf gross und aufrecht stehen. */
.pb-testi-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:clamp(14px, 2cqi, 20px); }
.pb-testi-card { background:#fff; border:1px solid #ebe9e4; border-radius:16px; padding:clamp(20px, 2.8cqi, 28px); box-shadow:0 1px 2px rgba(28,28,40,0.03), 0 12px 26px -18px rgba(28,28,40,0.28); }
/* K-LPV-58: Sterne sind Grafik — WCAG 3:1 gegen ihren Grund (die Karte). Vorher #f59e0b: 2,15:1 auf Weiss, 1,58:1 auf
   der Karte ueber dunklem Abschnitt. Weisse Karte: #d97706 (3,19:1). Auf Abschnitten mit Farbe/Bild ist die Karte 85 %
   Weiss ueber dem Grund (B1, oben) — schlimmstenfalls #d9d9d9 —, dort #c06109 (3,00:1). Nirgends dunkler als noetig. */
.pb-testi-stars { color:#d97706; font-size:13px; letter-spacing:0.14em; margin-bottom:12px; }
.pb-section.pb-has-bg-color .pb-testi-stars,
.pb-section.pb-has-bg-image .pb-testi-stars { color:#c06109; }
.pb-testi-text { font-size:clamp(15px, 1.85cqi, 17px); font-style:normal; line-height:1.58; letter-spacing:-0.008em; margin-bottom:18px; text-wrap:pretty; }
.pb-testi-author { display:flex; align-items:center; gap:11px; font-size:13.5px; }
.pb-testi-avatar { width:36px; height:36px; border-radius:50%; background:linear-gradient(145deg,#eceae5,#dedbd4); flex-shrink:0; }

/* Lead Form */
.pb-lead-box { background:#fff; border:1px solid #ecdfe4; border-radius:18px; padding:clamp(24px, 3.4cqi, 36px); text-align:center; max-width:min(460px, 100%); margin:0 auto; box-shadow:0 1px 2px rgba(28,28,40,0.04), 0 18px 40px -22px rgba(28,28,40,0.36); }
.pb-lead-box h3 { font-size:clamp(19px, 2.4cqi, 23px); font-weight:800; line-height:1.2; letter-spacing:-0.018em; text-wrap:balance; margin-bottom:8px; }
.pb-lead-box p { font-size:14.5px; color:#5b5b6b; line-height:1.55; margin-bottom:18px; }
.pb-lead-input { width:100%; min-height:48px; padding:12px 14px; border:1.5px solid #e5e5e0; border-radius:10px; font-size:16px; font-family:var(--font-body); margin-bottom:10px; }
/* 16px ist Absicht: darunter zoomt iOS beim Antippen in das Feld hinein. */
.pb-lead-input:focus { border-color:var(--primary); }
.pb-lead-hint { font-size:12px; color:#8b8b96; margin-top:12px; line-height:1.5; }

/* CTA Section */
.pb-sec-cta { background:var(--primary); color:#fff; text-align:center; }
/* K-LPV-57: Ohne eigenen Grund steht der Schluss auf der Markenfarbe — Text UND Ueberschrift schreiben dort wie
   der Knopf (K-LPV-9, --pb-btn-text nach Lesbarkeit; ohne die Variable weiss). Vorher: Text fest weiss (helle Marke
   1,31:1), Ueberschrift dunkel ueber die globale h2-Regel (dunkle Marke 2,77:1). Eigene Schriftfarbe steht inline
   am Abschnitt und gewinnt; mit eigener Farbe oder Bild greift die Regel nicht. */
.pb-sec-cta:not(.pb-has-bg-color):not(.pb-has-bg-image) { color:var(--pb-btn-text, #fff); --pb-text:var(--pb-btn-text, #fff); }
.pb-cta-inner { max-width:min(640px, 100%); margin:0 auto; }
.pb-cta-inner h2 { font-size:clamp(24px, 15.7px + 2.2cqi, 40px); font-weight:800; line-height:1.1; letter-spacing:-0.026em; text-wrap:balance; margin-bottom:0.4em; }
.pb-cta-inner p { font-size:clamp(15px, 13.9px + 0.28cqi, 18px); opacity:0.88; line-height:1.55; text-wrap:pretty; margin-bottom:1.6em; }

/* VSL Hero */
.pb-vsl-inner { text-align:center; }
.pb-vsl-inner h1 { font-size:clamp(24px, 13.7px + 2.76cqi, 44px); font-weight:800; line-height:1.08; letter-spacing:-0.026em; text-wrap:balance; margin-bottom:0.35em; }
.pb-vsl-sub { font-size:clamp(15px, 13.9px + 0.28cqi, 18px); color:#5b5b6b; line-height:1.55; margin-bottom:1.3em; }
.pb-video-wrap { position:relative; width:100%; aspect-ratio:16/9; border-radius:12px; overflow:hidden; }
.pb-video-wrap iframe { width:100%; height:100%; }
.pb-video-placeholder { background:#f0efeb; border-radius:12px; aspect-ratio:16/9; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#999; gap:8px; }

/* Pricing */
.pb-pricing-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr)); gap:clamp(16px, 2.2cqi, 22px); }
.pb-pricing-card { background:#fff; border:1px solid #e5e5e0; border-radius:18px; padding:clamp(24px, 3.2cqi, 32px); text-align:center; box-shadow:0 1px 2px rgba(28,28,40,0.03), 0 14px 30px -20px rgba(28,28,40,0.30); }
.pb-pricing-card h3 { font-size:clamp(17px, 2cqi, 19px); letter-spacing:-0.012em; margin-bottom:8px; }
.pb-pricing-price { font-size:clamp(30px, 3.6cqi, 40px); font-weight:800; line-height:1.05; letter-spacing:-0.024em; color:var(--primary); margin-bottom:16px; font-family:var(--font-heading); }
.pb-pricing-card ul { list-style:none; padding:0; margin-bottom:20px; text-align:left; }
.pb-pricing-card li { padding:8px 0; font-size:14px; line-height:1.5; border-bottom:1px solid #f0efeb; }

/* Guarantee */
.pb-guarantee { text-align:center; }
.pb-guarantee-icon { color:var(--primary); margin-bottom:12px; }
.pb-guarantee h3 { font-size:clamp(18px, 2.2cqi, 22px); letter-spacing:-0.016em; text-wrap:balance; margin-bottom:8px; }
.pb-guarantee p, .pb-guarantee-text { font-size:15px; color:#5b5b6b; line-height:1.6; max-width:min(46ch, 100%); margin:0 auto; }
/* K-LPV-44: Formatierung im Garantie-Text (Liste bleibt im mittigen Block linksbündig) */
.pb-guarantee-text ul, .pb-guarantee-text ol { display:block; width:fit-content; max-width:100%; text-align:left; margin:8px auto; padding-left:20px; }

/* Countdown */
.pb-countdown { text-align:center; }
.pb-countdown h3 { font-size:clamp(18px, 2.2cqi, 22px); letter-spacing:-0.016em; margin-bottom:16px; }
.pb-countdown-timer, .pb-countdown-fest { display:flex; justify-content:center; flex-wrap:wrap; gap:8px; }
.pb-cd-block { background:#1a1a1a; color:#fff; border-radius:12px; padding:12px 16px; text-align:center; }
.pb-cd-num { display:block; font-size:clamp(24px, 2.9cqi, 32px); font-weight:800; line-height:1.05; font-variant-numeric:tabular-nums; font-family:var(--font-heading); }
.pb-cd-block small { font-size:10px; text-transform:uppercase; letter-spacing:0.08em; opacity:0.6; }
.pb-cd-sep { font-size:24px; font-weight:800; padding-top:10px; color:#666; }
/* K-LPV-44: fester Countdown mit Tagen — vier Kästchen passen auch bei 320 px in eine Zeile */
.pb-countdown-fest { gap:6px; }
.pb-countdown-fest .pb-cd-block { padding:12px 10px; min-width:56px; }
.pb-countdown-fest .pb-cd-sep { font-size:20px; }

/* Before/After */
.pb-ba-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:clamp(16px, 2.4cqi, 24px); }
.pb-ba-col { padding:clamp(18px, 2.6cqi, 24px); border-radius:16px; }
.pb-ba-before { background:#fef2f2; }
.pb-ba-after { background:#f0fdf4; }
.pb-ba-col h4 { font-size:clamp(15px, 1.85cqi, 17px); letter-spacing:-0.01em; margin-bottom:12px; }
.pb-ba-col ul { list-style:none; padding:0; }
.pb-ba-col li { padding:7px 0; font-size:14px; line-height:1.55; }

/* FAQ — Hebel 3: 58ch statt fester 600px, damit die Spalte mit der Schrift mitgeht. */
.pb-faq-list { max-width:min(58ch, 100%); margin:0 auto; }
.pb-faq-item { border-bottom:1px solid #ebe9e4; }
.pb-faq-q { display:flex; justify-content:space-between; align-items:center; gap:14px; padding:clamp(16px, 2.2cqi, 20px) 0; cursor:pointer; font-weight:600; font-size:clamp(15px, 1.85cqi, 17px); line-height:1.4; letter-spacing:-0.01em; transition:color 0.18s ease; }
.pb-faq-q:hover { color:var(--primary); }
.pb-faq-q svg { transition:transform 0.22s cubic-bezier(.2,.7,.3,1); flex-shrink:0; color:#9a97a2; }
.pb-faq-item.open .pb-faq-q svg { transform:rotate(180deg); color:var(--primary); }
.pb-faq-a { display:none; padding-bottom:clamp(16px, 2.2cqi, 20px); font-size:clamp(14px, 1.75cqi, 16px); color:#5b5b6b; line-height:1.65; }
.pb-faq-item.open .pb-faq-a { display:block; }

/* Image */
.pb-image-wrap { text-align:center; }
.pb-image-placeholder { background:#f0efeb; border-radius:12px; padding:40px; text-align:center; color:#999; display:flex; flex-direction:column; align-items:center; gap:8px; }

/* Divider */
.pb-divider-line { border:none; border-top:1px solid #e5e5e0; }

/* HTML Preview */
.pb-html-preview { background:#f8f7f4; border:1px solid #e5e5e0; border-radius:10px; padding:16px; font-size:12px; overflow:auto; }

/* Bonus */
.pb-bonus-list { display:flex; flex-direction:column; gap:12px; max-width:min(56ch, 100%); margin:0 auto; }
.pb-bonus-item { background:#fff; border:1px solid #e5e5e0; border-radius:16px; padding:clamp(18px, 2.6cqi, 24px); box-shadow:0 1px 2px rgba(28,28,40,0.03), 0 12px 26px -18px rgba(28,28,40,0.28); }
.pb-bonus-item h4 { font-size:clamp(15px, 1.85cqi, 17px); letter-spacing:-0.01em; margin-bottom:4px; }
.pb-bonus-item p { font-size:14px; color:#5b5b6b; line-height:1.6; }
.pb-bonus-value { display:inline-block; margin-top:8px; font-size:12px; font-weight:600; letter-spacing:0.02em; color:var(--primary); }

/* Column Empty */
.pb-col-empty { background:#f0efeb; border:2px dashed #e5e5e0; border-radius:10px; padding:20px; text-align:center; font-size:12px; color:#999; min-height:60px; display:flex; align-items:center; justify-content:center; }
/* P2-Fix 2026-06-09: Grid-Items haben Default min-width:auto -> ein breites Kind
   (Video-iframe 16:9, grosses Bild) sprengt die 1fr-Spur -> Overflow ueber den Rand.
   min-width:0 zwingt die Spalte in ihre Spur; Medien deckeln auf Spaltenbreite. */
.pb-column { min-width:0; }
.pb-column img, .pb-column iframe { max-width:100%; }
.pb-column iframe { width:100%; }

/* Agitation */
.pb-agitation-list { list-style:none; padding:0; max-width:min(52ch, 100%); margin:0 auto; }
.pb-agitation-list li { padding:9px 0; font-size:15px; line-height:1.55; display:flex; gap:10px; align-items:center; }
.pb-agitation-list li::before { content:"✗"; color:#e24b4a; font-weight:700; }

/* BUILD-RENDER (C): Social Proof / Logos */
.pb-logos-row { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:28px 40px; opacity:0.75; }
.pb-logo-img { max-height:48px; width:auto; object-fit:contain; filter:grayscale(1); opacity:0.8; transition:filter 0.2s,opacity 0.2s; }
.pb-logo-img:hover { filter:grayscale(0); opacity:1; }
.pb-logo-text { font-family:var(--font-heading); font-weight:700; font-size:18px; color:var(--text-2); opacity:0.8; }
.pb-stats-row { display:flex; flex-wrap:wrap; justify-content:center; gap:32px; margin-top:24px; }
.pb-stat { text-align:center; }
.pb-stat-value { font-family:var(--font-heading); font-weight:800; font-size:clamp(26px, 3.2cqi, 36px); line-height:1.05; letter-spacing:-0.024em; font-variant-numeric:tabular-nums; color:var(--primary); }
.pb-stat-label { font-size:13px; color:var(--text-2); margin-top:4px; }

/* BUILD-RENDER (C/D/E): geraetespezifische Sichtbarkeit (vis_desktop/vis_mobile).
   Bewusst @media und NICHT @container: "auf dem Handy ausblenden" meint das
   Geraet des Besuchers, nicht die Breite des Rahmens. */
@media (min-width:769px) { .pb-hide-desktop { display:none !important; } }
@media (max-width:768px) { .pb-hide-mobile  { display:none !important; } }

/* Schmaler Rahmen — nur noch, was sich nicht fliessend loesen laesst.
   Die frueheren zwei Bloecke (@media 640 und 600) widersprachen sich bei der
   Hero-Groesse (28px gegen 24px, der spaetere gewann); beide Bloecke sind in
   den clamp()-Werten aufgegangen. Uebrig bleibt der Spalten-Umbruch, weil
   .pb-columns seine Spuren als Inline-Style vom Renderer bekommt. */
@container (max-width: 640px) {
  .pb-columns { grid-template-columns:1fr !important; }
}

/* Sticky Buy Bar (Salespage Mobile) */
.pb-sticky-bar { display:none; position:fixed; bottom:0; left:0; right:0; background:#fff; border-top:1px solid #e5e5e0; padding:12px 16px; z-index:100; box-shadow:0 -4px 16px rgba(0,0,0,0.08); }
.pb-sticky-bar-inner { display:flex; align-items:center; justify-content:space-between; max-width:800px; margin:0 auto; }
.pb-sticky-bar-text { font-size:13px; font-weight:600; }
.pb-sticky-bar-price { font-size:11px; color:#666; }

@media (max-width:768px) {
    .pb-sticky-bar.active { display:block; }
}

/* ── Abo-Baustein (K-PAY-11) ─────────────────────────────────────────
   Erbt bewusst .pb-lead-box: fuer den Besucher ist es dieselbe Geste wie
   beim Freebie — Adresse eintragen, Knopf druecken. Nur das Ziel ist ein
   anderes. */
.pb-abo-form { display:flex; flex-direction:column; gap:10px; }
.pb-abo-form input[type="email"] { width:100%; }
.pb-abo-warn { background:#fff4f6; border:1px solid #f3c9d4; color:#a3223c;
  border-radius:10px; padding:10px 12px; font-size:13px; margin-bottom:14px; }
.pb-abo-hinweis { max-width:min(460px,100%); margin:0 auto 14px; background:#fff4f6;
  border:1px solid #f3c9d4; color:#a3223c; border-radius:12px; padding:12px 14px;
  font-size:14px; text-align:center; }

/* ── K-LPV-46: Design-Looks — Schrift und Form (Joern 11.10.2026, Zeile 303) ──
   Gilt NUR unter .pb-look (Klasse am <body> bzw. am Editor-Canvas, gesetzt nur bei
   gewaehltem Look in content.settings.look). Ohne Look greift keine dieser Regeln.
   Die Schrift gibt der Look ueber --font-heading/--font-body vor (pb-style-shared.php),
   die Farben bleiben aus der Marke. Hintergruende der Abschnitte: K-LPV-47. */
.pb-look-klar       { --pb-l-radius:6px;  --pb-l-knopf:6px;   --pb-l-schatten:none; --pb-l-rand:1px solid #e3e6ea; }
.pb-look-warm       { --pb-l-radius:18px; --pb-l-knopf:999px; --pb-l-schatten:0 10px 30px rgba(91,70,54,0.10); --pb-l-rand:1px solid transparent; }
.pb-look-kraeftig   { --pb-l-radius:0;    --pb-l-knopf:0;     --pb-l-schatten:none; --pb-l-rand:1px solid #d9d9d9; }
.pb-look-elegant    { --pb-l-radius:2px;  --pb-l-knopf:2px;   --pb-l-schatten:none; --pb-l-rand:1px solid #e8e6e1; }
.pb-look-freundlich { --pb-l-radius:24px; --pb-l-knopf:999px; --pb-l-schatten:0 6px 18px rgba(0,0,0,0.05); --pb-l-rand:1px solid transparent; }
.pb-look :is(.pb-problem-card,.pb-benefit-item,.pb-testi-card,.pb-lead-box,.pb-pricing-card,.pb-bonus-item,.pb-faq-item) {
  border-radius:var(--pb-l-radius); box-shadow:var(--pb-l-schatten); border:var(--pb-l-rand); }
.pb-look :is(.pb-ba-col,.pb-cd-block,.pb-video-wrap,.pb-video-placeholder,.pb-image-placeholder) { border-radius:var(--pb-l-radius); }
.pb-look :is(.pb-btn-primary,.pb-btn-cta) { border-radius:var(--pb-l-knopf); }
/* Klar: sachlich, feine Linien statt Schatten */
.pb-look-klar :is(.pb-btn-primary,.pb-btn-cta) { box-shadow:none; }
.pb-look-klar :is(.pb-hero-headline,.pb-sec-headline) { letter-spacing:-0.01em; }
/* Warm und Freundlich: weich, Pillen-Knoepfe */
.pb-look-warm :is(.pb-hero-headline,.pb-sec-headline),
.pb-look-freundlich :is(.pb-hero-headline,.pb-sec-headline) { font-weight:700; }
.pb-look-freundlich .pb-problem-icon { background:color-mix(in srgb, var(--primary) 14%, #fff); border-radius:50%; padding:8px; display:inline-flex; }
/* Kraeftig: eckig, Grossbuchstaben */
.pb-look-kraeftig :is(.pb-hero-headline,.pb-sec-headline) { text-transform:uppercase; letter-spacing:0.03em; font-weight:900; }
.pb-look-kraeftig :is(.pb-btn-primary,.pb-btn-cta) { text-transform:uppercase; letter-spacing:0.06em; font-weight:800; box-shadow:none; }
/* Elegant: feine Schrift, umrandete Knoepfe. Die Schrift des Knopfs rechnet der Server
   (--pb-look-rand-text, pb-looks.php): Hauptfarbe nur bei >= 4,5:1 zum Grund, sonst lesbar.
   Eigene Knopffarbe (inline --pb-btn-bg) und Abschnitte mit Bild behalten den gefuellten Knopf. */
.pb-look-elegant .pb-hero-headline { font-weight:500; font-style:italic; }
.pb-look-elegant .pb-sec-headline { font-weight:500; }
.pb-look-elegant .pb-btn-primary:not([style*="--pb-btn-bg"]) { background:transparent; color:var(--pb-look-rand-text, #111318); border:1.5px solid var(--primary); box-shadow:none; }
.pb-look-elegant .pb-btn-primary:not([style*="--pb-btn-bg"]):hover { background:var(--primary); color:var(--pb-btn-text, #fff); }
.pb-look-elegant :is(.pb-has-bg-image, .pb-look-knopf-voll) .pb-btn-primary:not([style*="--pb-btn-bg"]) { background:var(--primary); color:var(--pb-btn-text, #fff); border-color:transparent; }

/* K-LPV-48: Auf DUNKLEM Abschnitt (.pb-bg-dunkel, section-renderer seit K-LPV-8) uebernimmt der
   Fliesstext dieser fuenf Typen die Schrift des Abschnitts. Vorher blieb er fest grau (#5b5b6b /
   #3a3a4a) und kam auf Schwarz nur auf 2,84:1. Ohne eigene Abschnittsschrift: Weiss (pbIstDunkel
   setzt den Marker genau dann, wenn Weiss besser lesbar ist). Helle Abschnitte und Karten: unveraendert. */
.pb-bg-dunkel :is(.pb-step p, .pb-solution-text, .pb-vsl-sub, .pb-guarantee p, .pb-guarantee-text, .pb-faq-a) { color:var(--pb-text, #ffffff); }

/* K-LPV-47: Design-Looks — Hintergrund-Rhythmus. Den Grund, die Schrift (>= 4,5:1) und diese Klassen
   setzt der Server (pb-looks.php, nur bei gewaehltem Look und nur fuer Abschnitte ohne eigene Farbe).
   Verschwindet der Knopf in der Hauptfarbe auf dem Grund (Kontrast < 1,5:1, z. B. Kopf in der
   Markenfarbe bei „Kraeftig“), wird er hell bzw. dunkel nach Lesbarkeit. */
.pb-look .pb-look-knopf-kontrast .pb-btn-primary:not([style*="--pb-btn-bg"]),
.pb-look .pb-look-knopf-kontrast .pb-btn-primary:not([style*="--pb-btn-bg"]):hover { background:var(--pb-look-knopf-bg); color:var(--pb-look-knopf-text); border-color:transparent; }
/* Karten behalten auf einem dunklen Look-Grund ihren hellen Grund — ihre Schrift darf deshalb nicht
   die helle Abschnittsschrift erben (sonst Weiss auf Hell). */
.pb-look .pb-look-grund.pb-bg-dunkel :is(.pb-problem-card,.pb-benefit-item,.pb-testi-card,.pb-lead-box,.pb-pricing-card,.pb-bonus-item,.pb-ba-col) { color:#111318; --pb-text:#111318; }
/* K-LPV-62: dasselbe ohne Look — Abschnitt mit eigener DUNKLER Farbe (.pb-bg-dunkel, section-renderer). Die Karten
   dieser Liste haben einen hellen eigenen Grund (Weiss bzw. 85 % Weiss, Vorher/Nachher hell), erbten aber die weisse
   Abschnittsschrift (1,36:1). Ohne problem-card: die wird in der Gestaltung 2026 durchsichtig (K-LPV-53). */
.pb-bg-dunkel :is(.pb-benefit-item,.pb-testi-card,.pb-lead-box,.pb-pricing-card,.pb-bonus-item,.pb-ba-col) { color:#111318; --pb-text:#111318; }

/* K-LPV-52: Gestaltung 2026, Schnitt 2 — Mass (GO Joern 12.10.2026, Zeile 309; Messung K-LPV-49).
   Greift NUR unter .pb-gestaltung-2026 (body live, #pbCanvasContent im Editor). Ziel aus dem Vergleich
   mit 13 Spitzenseiten: Ueberschrift 44 → 82 px, Abschnittsueberschrift 34 → 58 px, Fliesstext 17 → 18 px.
   Gemessen am eigenen Rahmen (cqi), wie alle Groessen dieser Datei. Die Luft zwischen den Abschnitten
   kommt nicht von hier, sondern aus section-renderer.php (Abstand des Kunden auf der 2026-Skala). */
.pb-gestaltung-2026 .pb-hero-headline { font-size:clamp(42px, 24px + 5.2cqi, 82px); line-height:1.04; }
.pb-gestaltung-2026 .pb-hero-sub { font-size:clamp(18px, 15.5px + 0.6cqi, 22px); }
.pb-gestaltung-2026 .pb-sec-headline { font-size:clamp(32px, 21px + 3.4cqi, 58px); line-height:1.08; margin-bottom:0.9em; }
.pb-gestaltung-2026 .pb-cta-inner h2 { font-size:clamp(36px, 22px + 4.4cqi, 72px); line-height:1.05; }
.pb-gestaltung-2026 .pb-vsl-inner h1 { font-size:clamp(36px, 20px + 4.4cqi, 72px); line-height:1.05; }
.pb-gestaltung-2026 .pb-section :is(h4, .pb-lead-box h3) { font-size:clamp(17px, 15px + 0.6cqi, 21px); }
.pb-gestaltung-2026 .pb-section :is(p, li, .pb-faq-a, .pb-solution-text, .pb-testi-text):not(.pb-hero-sub, .pb-hero-proof, .pb-lead-hint) { font-size:clamp(17px, 15.6px + 0.4cqi, 18px); line-height:1.6; }
.pb-gestaltung-2026 .pb-section :is(.pb-solution-text, .pb-hero-sub) { max-width:min(58ch, 100%); }

/* K-LPV-53: Gestaltung 2026, Schnitt 3 — Abschnitte neu dargestellt, gleiche Felder, gleiches Markup
   (GO Joern 12.10.2026, Zeile 309; Entwurf K-LPV-49). Nur unter .pb-gestaltung-2026. Breite Anordnung
   ueber @container (Rahmen .pb-container / #pbCanvasContent), damit Editor und live gleich umbrechen.
   Farben: Text nie in der Markenfarbe; auf der Markenfarbe schreibt --pb-btn-text (K-LPV-9).
   Zwischenueberschriften mit .pb-section, damit sie die Fliesstext-Regel aus K-LPV-52 (:is(h4, …)) schlagen. */
/* Problem: Ziffer und Linie statt Warnsymbol und Karte */
.pb-gestaltung-2026 .pb-problem-grid { counter-reset:pb-g26-problem; gap:clamp(24px, 3cqi, 48px); grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); }
.pb-gestaltung-2026 .pb-problem-card { counter-increment:pb-g26-problem; background:transparent; border:0; border-top:1px solid color-mix(in srgb, currentColor 22%, transparent); border-radius:0; box-shadow:none; padding:clamp(20px, 2.4cqi, 28px) 0 0; }
.pb-gestaltung-2026 .pb-problem-card::before { content:counter(pb-g26-problem, decimal-leading-zero); display:block; font-family:var(--font-heading); font-size:clamp(18px, 1.6cqi, 22px); margin-bottom:clamp(16px, 2cqi, 28px); opacity:.8; }
.pb-gestaltung-2026 .pb-problem-icon { display:none; }
.pb-gestaltung-2026 .pb-section .pb-problem-card h4 { font-size:clamp(19px, 15.5px + 0.9cqi, 26px); line-height:1.22; margin-bottom:10px; }
.pb-gestaltung-2026 .pb-section.pb-bg-dunkel .pb-problem-card,
.pb-gestaltung-2026 .pb-section.pb-has-bg-color .pb-problem-card { color:inherit; --pb-text:inherit; background:transparent; }
.pb-gestaltung-2026 .pb-section.pb-bg-dunkel .pb-problem-card p { color:inherit; }
/* Vorteile: Kacheln (Bento). Bei genau drei Punkten wird der zweite eine hohe, dunkle Kachel im Markenton:
   35 % Markenfarbe auf #111318. Weiss darauf liegt bei JEDER Markenfarbe ueber 4,5:1 (heller Grenzfall
   Weiss als Marke: Mischung #646568, Weiss 5,8:1). Die reine Markenfarbe ging nicht: auf CM-Pink erreicht
   weder Weiss (4,35) noch Dunkel (4,25) die 4,5. */
.pb-gestaltung-2026 .pb-benefits-list { display:grid; grid-template-columns:1fr; gap:clamp(12px, 1.6cqi, 20px); max-width:min(1100px, 100%); }
.pb-gestaltung-2026 .pb-benefit-item { flex-direction:column; align-items:flex-start; gap:14px; padding:clamp(24px, 3cqi, 40px); border-radius:clamp(18px, 2.2cqi, 28px); background:#fff; border:1px solid #e7e7e2; }
.pb-gestaltung-2026 .pb-section .pb-benefit-item h4 { font-size:clamp(19px, 15.5px + 0.9cqi, 26px); line-height:1.22; }
.pb-gestaltung-2026 .pb-benefit-item p { color:#4a4a57; }
@container (min-width: 700px) {
  .pb-gestaltung-2026 .pb-benefits-list { grid-template-columns:1.25fr 1fr; grid-auto-flow:row dense; }
  .pb-gestaltung-2026 .pb-benefit-item:only-child { grid-column:1 / -1; }
  .pb-gestaltung-2026 .pb-benefit-item:nth-child(2):nth-last-child(2) { grid-column:2; grid-row:span 2; }
}
.pb-gestaltung-2026 .pb-benefit-item:nth-child(2):nth-last-child(2) { background:#2b2e33; background:color-mix(in srgb, var(--primary) 35%, #111318); border-color:transparent; color:#fff; --pb-text:#fff; justify-content:space-between; }
.pb-gestaltung-2026 .pb-benefit-item:nth-child(2):nth-last-child(2) p { color:inherit; }
.pb-gestaltung-2026 .pb-benefit-item:nth-child(2):nth-last-child(2) .pb-benefit-check { background:#fff; color:#111318; }
/* Schritte: Zeitleiste mit grosser Ziffer */
.pb-gestaltung-2026 .pb-steps { display:grid; grid-template-columns:1fr; gap:clamp(24px, 3cqi, 48px); max-width:min(1100px, 100%); }
.pb-gestaltung-2026 .pb-step { flex-direction:column; gap:clamp(12px, 1.6cqi, 20px); position:relative; }
.pb-gestaltung-2026 .pb-step-num { width:auto; height:auto; background:transparent; color:inherit; border-radius:0; font-size:clamp(44px, 30px + 3cqi, 64px); font-weight:500; line-height:1; justify-content:flex-start; }
.pb-gestaltung-2026 .pb-section .pb-step h4 { font-size:clamp(19px, 15.5px + 0.9cqi, 26px); line-height:1.22; }
@container (min-width: 700px) {
  .pb-gestaltung-2026 .pb-steps { grid-template-columns:repeat(auto-fit, minmax(0, 1fr)); }
  .pb-gestaltung-2026 .pb-step::after { content:""; position:absolute; top:clamp(22px, 15px + 1.5cqi, 32px); left:clamp(56px, 40px + 3cqi, 80px); right:calc(-1 * clamp(24px, 3cqi, 48px) + 8px); height:1px; background:color-mix(in srgb, currentColor 22%, transparent); }
  .pb-gestaltung-2026 .pb-step:last-child::after { display:none; }
}
/* Formular: am breiten Rahmen zweispaltig — links Ueberschrift und Text, rechts die Felder */
.pb-gestaltung-2026 .pb-lead-box { border-radius:clamp(20px, 2.4cqi, 28px); padding:clamp(28px, 4cqi, 56px); }
.pb-gestaltung-2026 .pb-section .pb-lead-box h3 { font-size:clamp(26px, 18px + 2.2cqi, 44px); line-height:1.1; }
.pb-gestaltung-2026 .pb-lead-input { min-height:56px; border-radius:12px; }
@container (min-width: 760px) {
  .pb-gestaltung-2026 .pb-lead-box { display:grid; grid-template-columns:1fr minmax(0, 400px); column-gap:clamp(32px, 6cqi, 80px); grid-auto-flow:row dense; align-items:start; text-align:left; max-width:min(1000px, 100%); }
  .pb-gestaltung-2026 .pb-lead-box > * { grid-column:2; }
  .pb-gestaltung-2026 .pb-lead-box > h3 { grid-column:1; grid-row:1 / span 2; align-self:end; margin-bottom:12px; }
  .pb-gestaltung-2026 .pb-lead-box > h3 + p:not(.pb-lead-hint) { grid-column:1; grid-row:3 / span 3; margin-bottom:0; }
  /* Formular mit Hüllen (K-LPV-69) — Überschrift-Spalte anteilig (≥ 240 px), Felder in eigener Zelle (keine Lücken mehr) */
  .pb-gestaltung-2026 .pb-lead-box.pb-g26-form { grid-template-columns:minmax(240px, 1fr) minmax(280px, 400px); align-items:center; }
  .pb-gestaltung-2026 .pb-lead-box.pb-g26-form > .pb-g26-formkopf { grid-column:1; }
  .pb-gestaltung-2026 .pb-lead-box.pb-g26-form > .pb-g26-formfelder { grid-column:2; }
  .pb-gestaltung-2026 .pb-g26-formkopf > p:last-child { margin-bottom:0; }
}
/* E-Mail → Knopf (K-LPV-69) wie Name → E-Mail 16 px (Knopf trägt inline margin-top:8px) */
.pb-gestaltung-2026 .pb-g26-formfelder .pb-lead-input[type="email"] { margin-bottom:8px; }
/* Fragen: am breiten Rahmen links Ueberschrift, rechts die Liste */
.pb-gestaltung-2026 .pb-faq-q { font-size:clamp(17px, 15px + 0.6cqi, 21px); }
@container (min-width: 760px) {
  .pb-gestaltung-2026 .pb-sec-faq { display:grid; grid-template-columns:.8fr 1.2fr; column-gap:clamp(32px, 6cqi, 96px); align-items:start; }
  .pb-gestaltung-2026 .pb-sec-faq > .pb-sec-headline { text-align:left; margin:0; }
  .pb-gestaltung-2026 .pb-sec-faq > .pb-faq-list { max-width:none; margin:0; border-top:1px solid #ebe9e4; }
}

/* K-LPV-54: Gestaltung 2026, Schnitt 4 — Kopf mit Bild und Beleg (GO Joern 12.10.2026, Zeile 309).
   Markup .pb-g26-kopf setzt section-renderer.php nur mit Gestaltung. Ohne eigenes Bild: das Angebot als
   gezeichnete Karte (weisses Blatt, Schrift fest #111318 — unabhaengig vom Abschnittsgrund lesbar). */
.pb-gestaltung-2026 .pb-g26-kopf { display:grid; gap:clamp(32px, 5cqi, 72px); max-width:min(1100px, 100%); text-align:left; align-items:center; padding:0; }
.pb-gestaltung-2026 .pb-g26-kopf .pb-hero-sub { margin-left:0; margin-right:0; }
.pb-gestaltung-2026 .pb-g26-beleg { display:flex; align-items:center; gap:12px; margin-top:24px; font-size:15px; opacity:.85; }
.pb-gestaltung-2026 .pb-g26-punkte { display:inline-flex; flex:none; }
.pb-gestaltung-2026 .pb-g26-punkte i { width:26px; height:26px; border-radius:50%; margin-left:-8px; border:2px solid currentColor; background:color-mix(in srgb, var(--primary) 55%, #fff); }
.pb-gestaltung-2026 .pb-g26-punkte i:first-child { margin-left:0; background:color-mix(in srgb, var(--primary) 30%, #fff); }
.pb-gestaltung-2026 .pb-g26-punkte i:last-child { background:var(--primary); }
.pb-gestaltung-2026 .pb-g26-bild { margin:0; border-radius:clamp(20px, 2.4cqi, 28px); overflow:hidden; aspect-ratio:4 / 5; max-height:640px; width:100%; justify-self:center; }
.pb-gestaltung-2026 .pb-g26-bild img { width:100%; height:100%; object-fit:cover; display:block; }
.pb-gestaltung-2026 .pb-g26-karte { position:relative; width:min(100%, 420px); justify-self:center; padding:6% 6% 10%; }
.pb-gestaltung-2026 .pb-g26-karte::before { content:""; position:absolute; inset:0 -2% 0 4%; border-radius:48% 52% 44% 56% / 52% 44% 56% 48%; background:color-mix(in srgb, var(--primary) 26%, transparent); }
.pb-gestaltung-2026 .pb-g26-blatt { position:relative; display:block; background:#fff; color:#111318; --pb-text:#111318; border-radius:24px; padding:clamp(22px, 3cqi, 30px); transform:rotate(-3deg); box-shadow:0 40px 80px -30px rgba(17,19,24,.45), 0 2px 6px rgba(17,19,24,.08); text-align:left; }
.pb-gestaltung-2026 .pb-g26-blatt strong { display:block; font-family:var(--font-heading); font-size:clamp(20px, 15px + 1.2cqi, 28px); line-height:1.15; margin-bottom:16px; color:#111318; }
.pb-gestaltung-2026 .pb-g26-zeile { display:flex; align-items:center; gap:10px; padding:10px 0; border-top:1px solid rgba(17,19,24,.1); }
.pb-gestaltung-2026 .pb-g26-zeile i { height:8px; border-radius:4px; background:#ecebe6; flex:1; }
.pb-gestaltung-2026 .pb-g26-zeile i + i { flex:.5; }
.pb-gestaltung-2026 .pb-g26-zeile b { width:20px; height:20px; border-radius:50%; border:2px solid #d5d7d0; flex:none; }
.pb-gestaltung-2026 .pb-g26-fertig b { background:color-mix(in srgb, var(--primary) 75%, #111318); border-color:transparent; }
@container (min-width: 760px) {
  .pb-gestaltung-2026 .pb-g26-kopf { grid-template-columns:1.15fr .85fr; }
}

/* K-LPV-85: Kopf der Gestaltung 2026 am Handy. Ohne Spaltenangabe war die einzige Spalte so breit wie das
   längste Wort der Überschrift (43,5 px Schrift → 377 px bei 375 px Bildschirm); der Abschnitt (overflow-x:hidden)
   schnitt rechts ab. minmax(0, 1fr) hält die Spalte in der Breite, lange Wörter brechen um. Nur einspaltig —
   ab 760 px (zwei Spalten, oben) wächst die Textspalte wie bisher aufs längste Wort. */
@container (max-width: 759px) {
  .pb-gestaltung-2026 .pb-g26-kopf { grid-template-columns:minmax(0, 1fr); }
  .pb-gestaltung-2026 .pb-g26-kopf .pb-hero-headline,
  .pb-gestaltung-2026 .pb-g26-kopf .pb-hero-sub { overflow-wrap:break-word; hyphens:auto; }
}

/* K-LPV-55: Gestaltung 2026, Schnitt 5 — Takt, Bewegung, Knopfleiste am Handy (GO Joern 12.10.2026, Zeile 309).
   Takt: Gruende setzt der Server (pb-gestaltung.php, nur ohne Look und nur ohne eigene Farbe). Karten auf
   einem dunklen Grund behalten ihren hellen Grund und damit dunkle Schrift (wie bei den Looks, K-LPV-47).
   Bewegung: Klasse pb-g26-bewegt setzt erst das Skript (PageRenderer) — ohne Skript und bei „weniger
   Bewegung“ ist alles sofort sichtbar. Leiste: nur schmales Fenster (fixe Leiste misst am Fenster, nicht
   am Rahmen — daher hier @media), sichtbar erst nach dem Kopf und nicht ueber dem Formular. */
.pb-gestaltung-2026 .pb-g26-grund.pb-bg-dunkel :is(.pb-benefit-item:not(:nth-child(2):nth-last-child(2)), .pb-testi-card, .pb-lead-box, .pb-pricing-card, .pb-bonus-item, .pb-ba-col) { color:#111318; --pb-text:#111318; }
.pb-gestaltung-2026 .pb-look-knopf-kontrast .pb-btn-primary:not([style*="--pb-btn-bg"]),
.pb-gestaltung-2026 .pb-look-knopf-kontrast .pb-btn-primary:not([style*="--pb-btn-bg"]):hover { background:var(--pb-look-knopf-bg); color:var(--pb-look-knopf-text); }
.pb-gestaltung-2026.pb-g26-bewegt .pb-section > * { opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.pb-gestaltung-2026.pb-g26-bewegt .pb-section > .pb-g26-da { opacity:1; transform:none; }
.pb-gestaltung-2026 .pb-g26-blatt { animation:pb-g26-schweben 7s ease-in-out infinite; }
.pb-gestaltung-2026 .pb-g26-leiste { display:none; }
@keyframes pb-g26-schweben { 0%, 100% { transform:rotate(-3deg) translateY(0); } 50% { transform:rotate(-3deg) translateY(-8px); } }
@media (max-width: 767px) {
  .pb-gestaltung-2026 .pb-g26-leiste { display:block; position:fixed; left:0; right:0; bottom:0; z-index:90; padding:12px 16px calc(12px + env(safe-area-inset-bottom)); background:rgba(255,255,255,.94); border-top:1px solid #e5e5e0; transform:translateY(110%); transition:transform .3s ease; }
  .pb-gestaltung-2026 .pb-g26-leiste.pb-g26-zeigen { transform:none; }
  .pb-gestaltung-2026 .pb-g26-leiste .pb-btn-primary { width:100%; }
  .pb-gestaltung-2026:has(.pb-g26-leiste) .pb-container { padding-bottom:84px; }
}
@media (prefers-reduced-motion: reduce) {
  .pb-gestaltung-2026.pb-g26-bewegt .pb-section > * { opacity:1; transform:none; transition:none; }
  .pb-gestaltung-2026 .pb-g26-blatt { animation:none; }
  .pb-gestaltung-2026 .pb-g26-leiste { transition:none; }
}

/* K-LPV-63: Gestaltung 2026 — der Kopf ist linksbuendig (text-align:left, K-LPV-54). Bricht ein langer Knopftext
   um, erbten die Zeilen im Knopf dieses left: die zweite Zeile stand links im breiten Knopf (Handy, gemessen
   26 px links / 178 px rechts). Knoepfe zentrieren ihre Zeilen selbst — nur unter .pb-gestaltung-2026. */
.pb-gestaltung-2026 :is(.pb-btn-primary, .pb-btn-cta) { text-align:center; }