/* =============================================================================
   ⚠ SPIEGEL-KOPIE für das Blog-Studio (marketing-hub/tools/).
   Source of truth = mainwebsite/personalturm.de-Main-website/assets/css/lp-blog.css.
   Basis-Komponenten = live-identisch. Der mit "NEU" markierte Block unten ist
   noch NICHT live — vor Verwendung in einem Live-Artikel synchronisieren.
   =============================================================================

   lp-blog.css — Shared component library for blog articles with layout="landingpage".
   Loaded ONLY on landingpage-layout posts (see blog-post.php).

   Design rules (must match the sanitizer + hub preview):
   - Components are styled via THESE classes (not inline styles — the blog
     ContentSanitizer strips style="" attributes, and Tailwind purges classes
     that only appear in DB content).
   - Full-bleed sections break out of the centered column using the 100vw trick;
     <main> has overflow-hidden, so this never creates a horizontal scrollbar.
   - Brand: primary #0A61BF, light #ecf5ff, ink #0e2a52. Fonts: Raleway / Roboto Condensed.
   ========================================================================== */

/* ---- Wide canvas + base typography ---------------------------------------- */
.pt-lp-wrap { max-width: 72rem; }                 /* ~1152px, vs. article 896px */
.pt-lp-article { background: transparent; padding-top: .5rem; }   /* landingpage = no white card */
.pt-lp { font-family: 'Raleway', sans-serif; color: #334155; font-size: 1.075rem; line-height: 1.7; }
.pt-lp h2 { font-family: 'Roboto Condensed', sans-serif; color: #0e2a52; font-weight: 700; font-size: 1.9rem; line-height: 1.2; margin: 2.5rem 0 1rem; scroll-margin-top: 6rem; }
.pt-lp h3 { font-family: 'Roboto Condensed', sans-serif; color: #0e2a52; font-weight: 700; font-size: 1.35rem; margin: 2rem 0 .75rem; }
.pt-lp p  { margin: 0 0 1.1rem; }
.pt-lp a  { color: #0A61BF; font-weight: 600; text-decoration: none; }
.pt-lp a:hover { text-decoration: underline; }
.pt-lp ul { margin: 1.1rem 0; padding-left: 1.25rem; }
.pt-lp li { margin: .4rem 0; }
.pt-lp strong { color: #0e2a52; }
.pt-lp table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: .98rem; }
.pt-lp th { background: #ecf5ff; color: #0e2a52; text-align: left; padding: .7rem .9rem; border: 1px solid #d6e8ff; }
.pt-lp td { padding: .7rem .9rem; border: 1px solid #e2e8f0; vertical-align: top; }

/* ---- Full-bleed sections -------------------------------------------------- */
.pt-section { margin: 2.5rem 0; padding: 2.75rem 0; }
/* Padding-independent full-bleed: centre on the viewport regardless of the
   parent's horizontal padding. <main> has overflow-hidden, so the scrollbar
   gutter overflow is clipped (no horizontal scrollbar). */
.pt-section--bleed { width: 100vw; margin-left: 50%; transform: translateX(-50%); }
.pt-section--blue  { background: linear-gradient(135deg, #094b96 0%, #0A61BF 60%, #2b7cc2 100%); color: #fff; }
.pt-section--light { background: #ecf5ff; }
.pt-section--blue h2, .pt-section--blue h3, .pt-section--blue p { color: #fff; }
.pt-container { max-width: 72rem; margin: 0 auto; padding: 0 1.25rem; }

/* ---- Card grid ------------------------------------------------------------ */
.pt-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem; margin: 1.75rem 0; }
.pt-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 1rem; padding: 1.6rem; box-shadow: 0 12px 30px -18px rgba(10,97,191,.35); }
.pt-card--highlight { border: 2px solid #0A61BF; box-shadow: 0 16px 36px -14px rgba(10,97,191,.5); }
.pt-card__label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #64748b; }
.pt-card__price { font-family: 'Roboto Condensed', sans-serif; font-size: 2rem; font-weight: 700; color: #0A61BF; line-height: 1.1; margin: .2rem 0; }
.pt-card__note { font-size: .88rem; color: #64748b; }

/* ---- Quick-answer callout (featured-snippet target) ----------------------- */
.pt-answer { background: #ecf5ff; border-left: 4px solid #0A61BF; border-radius: 0 .75rem .75rem 0; padding: 1.1rem 1.4rem; margin: 1.8rem 0; color: #0e2a52; font-size: 1.02rem; line-height: 1.55; }
.pt-answer strong { color: #094b96; }

/* ---- Price comparison (1.499 EUR -> -350 EUR) ----------------------------- */
.pt-compare { display: flex; align-items: stretch; gap: .9rem; margin: 2rem 0; flex-wrap: wrap; }
.pt-compare-col { flex: 1 1 220px; border-radius: 1rem; padding: 1.4rem 1.5rem; display: flex; flex-direction: column; gap: .25rem; }
.pt-compare-old { background: #f1f5f9; border: 1px solid #e2e8f0; }
.pt-compare-new { background: linear-gradient(135deg, #0A61BF, #2b7cc2); color: #fff; box-shadow: 0 12px 26px -10px rgba(10,97,191,.5); }
.pt-compare-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; opacity: .85; }
.pt-compare-old .pt-compare-label { color: #64748b; }
.pt-compare-price { font-family: 'Roboto Condensed', sans-serif; font-size: 2rem; font-weight: 700; line-height: 1.1; }
.pt-compare-old .pt-compare-price { color: #94a3b8; text-decoration: line-through; }
.pt-compare-new .pt-compare-price { color: #fff; }
.pt-compare-note { font-size: .85rem; opacity: .9; margin-top: .15rem; }
.pt-compare-old .pt-compare-note { color: #64748b; }
.pt-compare-arrow { display: flex; align-items: center; justify-content: center; font-size: 1.6rem; color: #0A61BF; font-weight: 800; flex: 0 0 auto; }
@media (max-width: 640px) { .pt-compare-arrow { transform: rotate(90deg); } }

/* ---- Icon advantage list -------------------------------------------------- */
.pt-checks { list-style: none; padding: 0; margin: 1.5rem 0; display: grid; gap: .7rem; }
.pt-checks li { position: relative; padding-left: 2rem; line-height: 1.5; }
.pt-checks li::before { content: ""; position: absolute; left: 0; top: .15rem; width: 1.35rem; height: 1.35rem; border-radius: .4rem; background: #0A61BF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.75l6 6 9-13.5'/%3E%3C/svg%3E") center/0.9rem no-repeat; }

/* ---- CTA band ------------------------------------------------------------- */
.pt-cta { background: linear-gradient(135deg, #094b96 0%, #0A61BF 55%, #2b7cc2 100%); border-radius: 1.25rem; padding: 2.25rem 1.5rem; margin: 2.5rem 0; text-align: center; box-shadow: 0 18px 40px -12px rgba(10,97,191,.45); }
.pt-cta .pt-cta-kicker { text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; font-weight: 700; color: #cfe3ff; margin: 0 0 .55rem; }
.pt-cta .pt-cta-headline { font-family: 'Roboto Condensed', sans-serif; font-size: 1.7rem; line-height: 1.18; font-weight: 700; color: #fff; margin: 0 0 .7rem; }
.pt-cta .pt-cta-sub { color: #eaf3ff; font-size: 1.02rem; line-height: 1.55; margin: 0 auto 1.5rem; max-width: 34rem; }
.pt-cta .pt-cta-btn { display: inline-block; background: #fff; color: #0a4a8f; font-weight: 800; font-size: 1.05rem; padding: 1rem 2.1rem; border-radius: .85rem; text-decoration: none; box-shadow: 0 6px 0 0 #b7d4ee; transition: transform .15s ease, box-shadow .15s ease; }
.pt-cta .pt-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 0 0 #b7d4ee; }
.pt-cta .pt-cta-trust { color: #cfe3ff; font-size: .82rem; margin: 1.1rem 0 0; }

/* ── Funnel-Chart (Kampagnen-Cockpit) · klassenbasiert; Inline-Styles werden vom ContentSanitizer gestrippt ── */
.pt-funnel { background: #fff; border: 1px solid #e6eef7; border-radius: 1rem; padding: 1.4rem 1.25rem 1rem; box-shadow: 0 8px 24px rgba(10,40,90,.06); margin: 1.2rem 0 .4rem; }
.pt-funnel__bars { display: grid; grid-template-columns: repeat(4,1fr); gap: .6rem; align-items: end; height: 11rem; }
.pt-funnel__col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; text-align: center; }
.pt-funnel__flag { background: #16a34a; color: #fff; font-size: .58rem; font-weight: 700; line-height: 1.15; padding: .18rem .4rem; border-radius: .55rem; margin-bottom: .3rem; }
.pt-funnel__lbl { font-size: .72rem; color: #475569; margin-bottom: .4rem; line-height: 1.2; }
.pt-funnel__bar { width: 100%; border-radius: .5rem .5rem 0 0; display: flex; align-items: flex-start; justify-content: center; padding-top: .45rem; color: #fff; font-weight: 700; font-size: .85rem; }
.pt-funnel__bar--1 { height: 100%; background: #0e1d39; }
.pt-funnel__bar--2 { height: 65%; background: #0A61BF; }
.pt-funnel__bar--3 { height: 38%; background: #3b82c4; }
.pt-funnel__bar--4 { height: 28%; background: #7bb0e0; color: #0e1d39; }
.pt-funnel__rates { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; margin-top: .9rem; }
.pt-funnel__rate { font-size: .72rem; font-weight: 600; color: #0A61BF; background: #eaf2fc; border-radius: 999px; padding: .25rem .6rem; }
.pt-funnel__note { font-size: .72rem; color: #7c8aa0; text-align: center; margin: .7rem 0 0; }
.pt-ctacenter { text-align: center; margin: 1.6rem 0 0; }
.pt-hero__updated { margin: .2rem 0 .9rem; font-size: .82rem; color: rgba(234,243,255,.7); }
@media (max-width: 640px) { .pt-funnel__bars { height: 9rem; } .pt-funnel__lbl { font-size: .6rem; } .pt-funnel__bar { font-size: .72rem; } .pt-funnel__flag { font-size: .5rem; } }

/* ===========================================================================
   NEU (in marketing-hub entworfen) — diese 3 Komponenten sind noch NICHT in der
   Live-lp-blog.css. Vor Verwendung in einem Live-Artikel synchronisieren
   (Claude kann das übernehmen: nach mainwebsite/assets/css/lp-blog.css kopieren).
   =========================================================================== */

/* ---- Stat tiles (big-number proof row) ------------------------------------ */
.pt-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1rem; margin: 2rem 0; }
.pt-stat { position: relative; background: #fff; border: 1px solid #e2e8f0; border-radius: 1.1rem; padding: 1.5rem 1.25rem; text-align: center; box-shadow: 0 14px 32px -22px rgba(10,97,191,.45); overflow: hidden; }
.pt-stat::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, #0A61BF, #2b7cc2); }
.pt-stat__num { font-family: 'Roboto Condensed', sans-serif; font-size: 2.4rem; font-weight: 700; color: #0A61BF; line-height: 1; letter-spacing: -.01em; }
.pt-stat__label { font-size: .9rem; color: #64748b; margin-top: .45rem; line-height: 1.35; }

/* ---- Numbered steps (process / how-it-works) ------------------------------ */
.pt-steps { list-style: none; counter-reset: ptstep; padding: 0; margin: 1.8rem 0; display: grid; gap: .9rem; }
.pt-steps li { counter-increment: ptstep; position: relative; padding: 1.1rem 1.3rem 1.1rem 3.8rem; background: #fff; border: 1px solid #e2e8f0; border-radius: 1rem; box-shadow: 0 12px 28px -22px rgba(10,97,191,.45); line-height: 1.55; }
.pt-steps li::before { content: counter(ptstep); position: absolute; left: 1.05rem; top: 1.05rem; width: 2rem; height: 2rem; border-radius: .65rem; background: linear-gradient(135deg, #0A61BF, #2b7cc2); color: #fff; font-family: 'Roboto Condensed', sans-serif; font-weight: 700; font-size: 1.05rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 0 #094b96; }
.pt-steps li strong { display: block; color: #0e2a52; margin-bottom: .1rem; }

/* ---- Highlight callout (premium pull statement) --------------------------- */
.pt-highlight { position: relative; margin: 2.25rem 0; padding: 1.7rem 1.8rem; border-radius: 1.2rem; background: linear-gradient(135deg, #0e2a52 0%, #0A61BF 100%); color: #fff; box-shadow: 0 22px 46px -18px rgba(10,97,191,.6); overflow: hidden; }
.pt-highlight::before { content: ""; position: absolute; right: -28px; top: -28px; width: 170px; height: 170px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 2 93 26v48L50 98 7 74V26z' fill='none' stroke='white' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat; opacity: .12; pointer-events: none; }
.pt-highlight__big { font-family: 'Roboto Condensed', sans-serif; font-size: 1.55rem; font-weight: 700; line-height: 1.2; margin: 0; color: #fff; }
.pt-highlight p { color: rgba(234,243,255,.92); margin: .45rem 0 0; }
.pt-highlight strong { color: #fff; }

/* ---- Hero (landingpage: selbst gebauter Header + Bild oben) --------------- */
/* Full-bleed (100vw) — <main> hat overflow-hidden, daher kein Horizontal-Scroll. */
.pt-hero { position: relative; width: 100vw; margin-left: 50%; transform: translateX(-50%); padding: 6.5rem 1.25rem 3.75rem; background: linear-gradient(180deg, #094b96 0%, #0A61BF 60%, #2b7cc2 100%); color: #fff; overflow: hidden; text-align: center; }  /* top: klärt den fixed Site-Header */
.pt-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='64' viewBox='0 0 56 64'%3E%3Cpath d='M28 1 53 15.5v33L28 63 3 48.5v-33z' fill='none' stroke='%23ffffff' stroke-opacity='0.06' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: repeat; }
.pt-hero > * { position: relative; z-index: 1; }
.pt-hero__eyebrow { display: inline-block; font-family: 'Roboto Condensed', sans-serif; text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; font-weight: 700; color: #cfe3ff; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.16); padding: .35rem 1rem; border-radius: 999px; margin: 0 0 1.1rem; }
.pt-hero__title, .pt-hero h1 { font-family: 'Roboto Condensed', sans-serif; font-size: clamp(1.9rem, 4vw, 3.1rem); font-weight: 700; line-height: 1.1; letter-spacing: -.01em; margin: 0 auto .9rem; max-width: 48rem; color: #fff; }
.pt-hero__sub { font-size: 1.12rem; line-height: 1.55; color: rgba(234,243,255,.92); max-width: 42rem; margin: 0 auto; }
.pt-hero__img { display: block; width: 100%; max-width: 62rem; margin: 2.2rem auto 0; border-radius: 1rem; border: 4px solid #fff; box-shadow: 0 30px 60px -24px rgba(0,0,0,.5); aspect-ratio: 21 / 9; object-fit: cover; background: #ecf5ff; }

/* ---- FAQ (immer ausgefahren: h3 Frage + p Antwort, nie Accordion) -------- */
.pt-faq { margin: 2rem 0; }
.pt-faq h3 { margin: 1.6rem 0 .4rem; padding-top: 1.6rem; border-top: 1px solid #e2e8f0; }
.pt-faq h3:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.pt-faq p { color: #475569; margin: 0 0 .4rem; }

/* ---- Lead block (dynamic form, rendered by components/lead-block.php) ------
   2-spaltig: Value-Panel (Eyebrow · Headline · Subline · Asset · Check-Stack)
   LINKS, Formular RECHTS. Stapelt < 760px. Nur Blau-CI. ----------------------- */
.pt-leadblock { margin: 2.75rem 0; padding: 2.75rem 0; }
.pt-leadblock__card { max-width: 60rem; margin: 0 auto; display: grid; grid-template-columns: 1.02fr .98fr; background: #fff; border: 1px solid #d6e8ff; border-radius: 1.4rem; overflow: hidden; box-shadow: 0 22px 50px -20px rgba(10,97,191,.4); }
.pt-leadblock--onblue .pt-leadblock__card { box-shadow: 0 22px 50px -16px rgba(0,0,0,.35); }

/* LEFT — Value-Panel (leicht abgesetzter Hintergrund) */
.pt-leadblock__value { background: linear-gradient(165deg, #f4f9ff 0%, #e9f2ff 100%); border-right: 1px solid #e2ecf8; padding: 2.4rem 2rem; text-align: left; display: flex; flex-direction: column; }
.pt-leadblock__logo { height: 32px; width: auto; margin: 0 0 1.1rem; display: block; }
.pt-leadblock__eyebrow { align-self: flex-start; font-family: 'Roboto Condensed', sans-serif; font-weight: 700; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: #0A61BF; background: #fff; border: 1px solid #cfe2fb; padding: .3rem .7rem; border-radius: 999px; margin-bottom: .85rem; }
.pt-leadblock__headline { font-family: 'Roboto Condensed', sans-serif; font-size: 1.5rem; font-weight: 700; color: #0e2a52; text-align: left; margin: 0 0 .55rem; line-height: 1.18; }
.pt-leadblock__subline { color: #475569; text-align: left; margin: 0 0 1.2rem; line-height: 1.55; }
.pt-leadblock__assetwrap { margin: 0 0 1.1rem; }
.pt-leadblock__asset { display: block; max-height: 150px; max-width: 100%; width: auto; margin: 0; border: 1px solid #e2e8f0; border-radius: .75rem; box-shadow: 0 10px 24px -14px rgba(10,97,191,.45); object-fit: contain; background: #fff; }
.pt-leadblock__trust { list-style: none; margin: auto 0 0; padding: 0; display: grid; gap: .6rem; }
.pt-leadblock__trust li { position: relative; padding-left: 2.05rem; color: #0e2a52; font-weight: 500; line-height: 1.4; }
.pt-leadblock__trust li::before { content: ""; position: absolute; left: 0; top: 0; width: 1.35rem; height: 1.35rem; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%230A61BF'/%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* RIGHT — Formular-Panel */
.pt-leadblock__form { padding: 2.4rem 2rem; display: flex; flex-direction: column; justify-content: center; }
.pt-leadblock__formhead { font-family: 'Roboto Condensed', sans-serif; font-weight: 700; color: #0e2a52; text-align: left; font-size: 1.1rem; margin: 0 0 1rem; }

/* Brand-Leiste (Logo + seit-2018-Badge + Trennlinie) — statt freischwebendem Logo */
.pt-leadblock__brand { display: flex; align-items: center; gap: .75rem; margin: 0 0 1.25rem; padding: 0 0 1rem; border-bottom: 1px solid #dbe9fb; }
.pt-leadblock__brand .pt-leadblock__logo { height: 36px; width: auto; display: block; margin: 0; }
.pt-leadblock__since { margin-left: auto; font-family: 'Roboto Condensed', sans-serif; font-size: .72rem; font-weight: 700; letter-spacing: .03em; color: #0A61BF; background: #fff; border: 1px solid #cfe2fb; border-radius: 999px; padding: .25rem .6rem; white-space: nowrap; }
/* Micro-Trust-Badges (SSL · DSGVO) am Formular-Ende — wie Astro-LP */
.pt-leadblock__badges { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.1rem; margin: .9rem 0 0; }
.pt-leadblock__badge { display: inline-flex; align-items: center; gap: .35rem; font-size: .76rem; font-weight: 600; color: #64748b; }
.pt-leadblock__badge svg { width: .95rem; height: .95rem; flex: 0 0 auto; color: #0A61BF; }
/* Social Proof: Rating + Partner-Logos im Value-Panel */
.pt-leadblock__rating { display: flex; align-items: center; gap: .5rem; margin: 1.1rem 0 0; font-size: .85rem; color: #475569; }
.pt-leadblock__stars { color: #0A61BF; letter-spacing: .08em; font-size: .95rem; line-height: 1; }
.pt-leadblock__rating strong { color: #0e2a52; }
.pt-leadblock__partners { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin: .85rem 0 0; }
.pt-leadblock__partners-lbl { font-family: 'Roboto Condensed', sans-serif; font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: #94a3b8; }
.pt-leadblock__partners img { height: 17px; width: auto; opacity: .55; filter: grayscale(1); }
.pt-leadblock__grid { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; margin-bottom: 1rem; }
.pt-leadblock__field { display: flex; flex-direction: column; gap: .3rem; }
.pt-leadblock__field--full { grid-column: 1 / -1; }
.pt-leadblock__field span { font-size: .8rem; font-weight: 600; color: #475569; }
.pt-leadblock__optional { color: #94a3b8; font-weight: 400; }
.pt-leadblock__field input { border: 1px solid #cbd5e1; border-radius: .6rem; padding: .72rem .85rem; font-size: 1rem; font-family: inherit; color: #0e2a52; width: 100%; box-sizing: border-box; }
.pt-leadblock__field input:focus { outline: none; border-color: #0A61BF; box-shadow: 0 0 0 3px rgba(10,97,191,.15); }
.pt-leadblock__btn { width: 100%; background: linear-gradient(135deg, #0A61BF, #2b7cc2); color: #fff; font-weight: 800; font-size: 1.05rem; padding: .95rem 1.5rem; border: none; border-radius: .8rem; cursor: pointer; box-shadow: 0 6px 0 0 #094b96; transition: transform .15s ease, box-shadow .15s ease; }
.pt-leadblock__btn:hover { transform: translateY(-2px); box-shadow: 0 8px 0 0 #094b96; }
.pt-leadblock__btn:disabled { opacity: .7; cursor: default; transform: none; }
.pt-leadblock__promise { text-align: center; color: #0A61BF; font-weight: 600; font-size: .9rem; margin: 1rem 0 0; }
.pt-leadblock__privacy { text-align: center; color: #94a3b8; font-size: .76rem; margin: .7rem 0 0; line-height: 1.4; }
.pt-leadblock__privacy a { color: #64748b; text-decoration: underline; }
.pt-leadblock__success { text-align: center; color: #0e7a3a; font-weight: 600; font-size: 1.05rem; padding: 1rem; }
.pt-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 760px) {
  .pt-leadblock__card { grid-template-columns: 1fr; }
  .pt-leadblock__value { border-right: none; border-bottom: 1px solid #e2ecf8; }
}
@media (max-width: 560px) {
  .pt-leadblock__grid { grid-template-columns: 1fr; }
  .pt-leadblock__value, .pt-leadblock__form { padding: 1.8rem 1.4rem; }
}

/* ===========================================================================
   NEU (Runde 2) — Landingpage-Komponenten, portiert aus der getesteten Ads-LP
   (stepstone-kosten-konzept.html). Macht aus dem Artikel-Body eine echte LP:
   Hero-Split + Preiskarte, Trust-Bar, Preis-Cards (Hexagon/Badge/Hover),
   Navy-Feature-Cards, Mythos/Realität, Reichweite-Donut, Bundles, Hexagon-
   Timeline. Interaktion via lp-blog.js (.pt-reveal/.pt-countup, degradiert).
   Vor Live-Einsatz mit mainwebsite/.../lp-blog.css + lp-blog.js synchronisieren.
   =========================================================================== */
:root {
  --pt-navy: #0e1d39; --pt-green: #0A61BF; --pt-green-d: #094b96; --pt-green-l: #ecf5ff;
  --pt-hex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='64' viewBox='0 0 56 64'%3E%3Cpath d='M28 1 53 15.5v33L28 63 3 48.5v-33z' fill='none' stroke='%23ffffff' stroke-opacity='0.06' stroke-width='1.5'/%3E%3C/svg%3E");
}

/* ---- helpers ---- */
.pt-lp .pt-tnum, .pt-lp .pt-countup { font-variant-numeric: tabular-nums; }
.pt-note { font-size: .82rem; color: #64748b; margin: .5rem 0 0; }

/* ---- reveal-on-scroll (lp-blog.js fügt .in hinzu; ohne JS sofort sichtbar) ---- */
/* Default sichtbar — erst wenn lp-blog.js läuft (.pt-js) wird ausgeblendet + animiert.
   So bleibt KEIN Inhalt hängen, falls JS fehlt/nicht feuert (z. B. Live ohne Sync). */
.pt-reveal { opacity: 1; transform: none; }
.pt-js .pt-reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.pt-js .pt-reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .pt-js .pt-reveal { opacity: 1; transform: none; } }

/* ---- section variants (full-bleed bands) ---- */
.pt-section--white { background: #fff; }
.pt-section--navy { background: linear-gradient(160deg, var(--pt-navy) 0%, #10306a 60%, #094b96 100%); color: #eaf3ff; position: relative; }
.pt-section--navy::before { content: ""; position: absolute; inset: 0; background-image: var(--pt-hex); background-repeat: repeat; pointer-events: none; }
.pt-section--navy > .pt-container { position: relative; z-index: 1; }
.pt-section--navy p, .pt-section--navy li { color: #eaf3ff; }
.pt-section--navy h2, .pt-section--navy h3, .pt-section--navy strong { color: #fff; }

/* ---- eyebrow kicker ---- */
.pt-eyebrow { font-family: 'Roboto Condensed', sans-serif; text-transform: uppercase; letter-spacing: .13em; font-size: .78rem; font-weight: 700; color: #0A61BF; display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 .6rem; }
.pt-eyebrow::before { content: ""; width: 26px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #0A61BF, transparent); }
.pt-section--navy .pt-eyebrow, .pt-eyebrow--light { color: #8dc0ff; }
.pt-section--navy .pt-eyebrow::before, .pt-eyebrow--light::before { background: linear-gradient(90deg, #8dc0ff, transparent); }

/* ---- buttons ---- */
.pt-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font-family: 'Roboto Condensed', sans-serif; font-weight: 700; font-size: 1.05rem; border: none; cursor: pointer; border-radius: 13px; padding: .95rem 1.7rem; text-decoration: none; transition: transform .1s ease, box-shadow .1s ease, filter .15s ease; }
.pt-btn--primary { color: #fff; background: linear-gradient(180deg, #1372d6, #0A61BF 60%, #094b96); box-shadow: 0 6px 0 #094b96, 0 16px 28px -12px rgba(10,97,191,.6); }
.pt-btn--primary:hover { filter: brightness(1.06); transform: translateY(-1px); }
.pt-btn--primary:active { transform: translateY(5px); box-shadow: 0 1px 0 #094b96; }
.pt-btn--ghost { color: #fff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.28); }
.pt-btn--ghost:hover { background: rgba(255,255,255,.16); }

/* ---- hero split (text + floating price card) ---- */
.pt-hero--split { text-align: left; }
.pt-hero__glow { position: absolute; top: -120px; left: -80px; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, rgba(43,124,194,.5), transparent 65%); pointer-events: none; }
.pt-hero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr .95fr; gap: 2.4rem; align-items: center; text-align: left; }
.pt-hero--split .pt-hero__title { margin: .1rem 0 1rem; max-width: none; text-align: left; }
.pt-hero__hl { color: #a9d2ff; }
.pt-hero--split .pt-hero__sub { margin: 0 0 1.5rem; max-width: 44ch; text-align: left; }
.pt-hero__cta { display: flex; gap: .8rem; flex-wrap: wrap; margin-bottom: 1.3rem; }
.pt-hero__trust { display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; list-style: none; padding: 0; margin: 0; font-size: .86rem; color: #bcd6f6; font-weight: 600; }
.pt-hero__trust li { display: flex; align-items: center; gap: .4rem; margin: 0; color: #bcd6f6; }
.pt-hero__trust li::before { content: ""; width: 16px; height: 16px; border-radius: 50%; flex: 0 0 auto; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%230A61BF' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat; }
@media (max-width: 820px) { .pt-hero__grid { grid-template-columns: 1fr; gap: 1.8rem; } }

/* ---- floating price-splitter card ---- */
.pt-pricecard { position: relative; background: linear-gradient(150deg, rgba(255,255,255,.14), rgba(255,255,255,.05)); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border: 1px solid rgba(255,255,255,.2); border-radius: 26px; padding: 1.8rem 1.7rem; box-shadow: 0 30px 60px -26px rgba(0,0,0,.6); }
.pt-pricecard__seal { position: absolute; top: -14px; left: 1.6rem; background: #fff; color: #0e2a52; font-family: 'Roboto Condensed', sans-serif; font-weight: 700; font-size: .72rem; letter-spacing: .04em; padding: .3rem .7rem; border-radius: 999px; box-shadow: 0 8px 18px -10px rgba(0,0,0,.5); }
.pt-pricecard__chip { position: absolute; top: 1.4rem; right: 1.4rem; background: #fff; color: #094b96; font-family: 'Roboto Condensed', sans-serif; font-weight: 700; font-size: .95rem; border-radius: 999px; padding: .25rem .7rem; box-shadow: 0 8px 18px -8px rgba(0,0,0,.4); }
.pt-pricecard__label { font-size: .8rem; color: #bcd6f6; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; margin: .5rem 0 .2rem; }
.pt-pricecard__old { font-family: 'Roboto Condensed', sans-serif; font-size: 1.6rem; font-weight: 700; color: #9fb6d6; text-decoration: line-through; }
.pt-pricecard__arrow { display: flex; align-items: center; gap: .5rem; margin: .5rem 0; color: #8dc0ff; font-weight: 700; font-size: .9rem; }
.pt-pricecard__newbox { background: linear-gradient(135deg, #0A61BF, #094b96); border-radius: 16px; padding: 1rem 1.2rem; box-shadow: 0 14px 30px -14px rgba(10,97,191,.7); }
.pt-pricecard__new { font-family: 'Roboto Condensed', sans-serif; font-size: 2.3rem; font-weight: 700; color: #fff; line-height: 1; }
.pt-pricecard__newlabel { color: rgba(255,255,255,.9); font-size: .82rem; margin-top: .2rem; }
.pt-pricecard__foot { margin: .9rem 0 0; font-size: .8rem; color: #bcd6f6; }

/* ---- trust bar (full-bleed white) ---- */
.pt-trustbar { width: 100vw; margin-left: 50%; transform: translateX(-50%); background: #fff; border-top: 1px solid #d6e8ff; border-bottom: 1px solid #d6e8ff; }
.pt-trustbar__in { max-width: 72rem; margin: 0 auto; padding: 1.1rem 1.25rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 2.2rem; }
.pt-trustbar span { display: flex; align-items: center; gap: .5rem; font-weight: 600; color: #0e2a52; font-size: .92rem; }
.pt-trustbar svg { width: 20px; height: 20px; color: #0A61BF; flex: 0 0 auto; }

/* ---- price cards (enhance base .pt-card) ---- */
.pt-card { position: relative; overflow: hidden; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.pt-card:hover { transform: translateY(-5px); border-color: #bcd6f6; box-shadow: 0 28px 50px -24px rgba(10,97,191,.55); }
.pt-card::after { content: ""; position: absolute; top: -22px; right: -22px; width: 70px; height: 70px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 4 89 26v48L50 96 11 74V26z' fill='none' stroke='%230A61BF' stroke-opacity='.08' stroke-width='6'/%3E%3C/svg%3E") center/contain no-repeat; pointer-events: none; }
.pt-card__pop { position: absolute; top: 0; right: 0; background: #0A61BF; color: #fff; font-family: 'Roboto Condensed', sans-serif; font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: .28rem .7rem; border-radius: 0 1rem 0 .6rem; }
.pt-card__name { font-family: 'Roboto Condensed', sans-serif; font-weight: 700; color: #0e2a52; font-size: 1.15rem; }
.pt-card__price small { font-size: .9rem; color: #64748b; font-weight: 600; }
.pt-card__term { font-size: .82rem; color: #64748b; margin: .1rem 0 .7rem; }
.pt-card__save { display: inline-block; background: var(--pt-green-l); color: var(--pt-green-d); font-weight: 700; font-size: .8rem; padding: .2rem .6rem; border-radius: 999px; }
.pt-card__incl { font-size: .84rem; color: #64748b; margin: .7rem 0 0; }

/* ---- glass feature cards (on navy) ---- */
.pt-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.2rem; margin: 2rem 0; }
.pt-feature { background: linear-gradient(150deg, rgba(255,255,255,.1), rgba(255,255,255,.03)); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.16); border-radius: 18px; padding: 1.5rem 1.4rem; }
.pt-feature__ico { width: 48px; height: 48px; display: grid; place-items: center; margin-bottom: .9rem; background: rgba(141,192,255,.14); clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%); }
.pt-feature__ico svg { width: 24px; height: 24px; color: #8dc0ff; }
.pt-feature h3 { color: #fff; margin: 0 0 .35rem; }
.pt-feature p { color: #cfe0f5; font-size: .95rem; margin: 0; }

/* ---- myth vs reality ---- */
.pt-myth { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 1.8rem 0 0; border-radius: 18px; overflow: hidden; border: 1px solid rgba(255,255,255,.16); }
.pt-myth > div { padding: 1.3rem 1.4rem; }
.pt-myth__l { background: rgba(255,255,255,.04); }
.pt-myth__r { background: rgba(43,124,194,.16); }
.pt-myth h4 { margin: 0 0 .6rem; font-family: 'Roboto Condensed', sans-serif; font-size: .95rem; letter-spacing: .04em; text-transform: uppercase; }
.pt-myth__l h4 { color: #9fb6d6; } .pt-myth__r h4 { color: #8dc0ff; }
.pt-myth ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .5rem; }
.pt-myth li { font-size: .92rem; padding-left: 1.6rem; position: relative; margin: 0; }
.pt-myth__l li { color: #9fb6d6; text-decoration: line-through; }
.pt-myth__l li::before { content: "\2715"; position: absolute; left: 0; color: #94a3b8; font-weight: 700; }
.pt-myth__r li { color: #dbe7f5; }
.pt-myth__r li::before { content: "\2713"; position: absolute; left: 0; color: #8dc0ff; font-weight: 700; }
@media (max-width: 620px) { .pt-myth { grid-template-columns: 1fr; } }

/* ---- reichweite: donut + text ---- */
.pt-reach { display: grid; grid-template-columns: .85fr 1.15fr; gap: 2.4rem; align-items: center; margin-top: 1.5rem; }
.pt-donutwrap { display: flex; align-items: center; gap: 1.4rem; }
.pt-donut { width: 170px; height: 170px; flex: 0 0 auto; }
.pt-donut circle { fill: none; stroke-width: 16; stroke-linecap: round; }
.pt-donut__bg { stroke: #d6e8ff; }
.pt-donut__fg { stroke: #0A61BF; stroke-dasharray: 440; stroke-dashoffset: 440; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset 1.3s cubic-bezier(.2,.8,.2,1); }
.pt-reach.in .pt-donut__fg { stroke-dashoffset: 308; } /* ~30% gefüllt */
.pt-donut__c { font-family: 'Roboto Condensed', sans-serif; font-weight: 700; fill: #0e2a52; }
.pt-reach__big { font-family: 'Roboto Condensed', sans-serif; font-size: 3rem; font-weight: 700; color: #0A61BF; line-height: 1; }
@media (max-width: 820px) { .pt-reach { grid-template-columns: 1fr; } .pt-donutwrap { justify-content: center; } }

/* ---- bundle cards (white on navy) — Runde 5: 3-up Grid, gleiche Höhe,
        Logo-Chips, Conversion-Hierarchie, CTA unten bündig (3 Design-Profis) ---- */
.pt-bundles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin-top: 2rem; align-items: stretch; }
.pt-bundle { position: relative; display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid #d6e8ff; border-radius: 26px; padding: 1.7rem 1.5rem 1.6rem; box-shadow: 0 20px 46px -26px rgba(14,29,82,.55); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.pt-bundle:hover { transform: translateY(-6px); border-color: #8dc0ff; box-shadow: 0 28px 56px -26px rgba(10,97,191,.45); }

/* Empfohlen-Karte gewinnt das Auge: 2px-Rand, blauer Top-Strip, leichter Tint */
.pt-bundle--hl { border: 2px solid #0A61BF; background: linear-gradient(#0A61BF,#094b96) top/100% 6px no-repeat, linear-gradient(180deg,#f4f9ff 0%, #ffffff 46%); box-shadow: 0 30px 62px -24px rgba(10,97,191,.55); }
.pt-bundle--hl:hover { transform: translateY(-9px); box-shadow: 0 38px 72px -26px rgba(10,97,191,.6); }
.pt-bundle__crown { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: linear-gradient(180deg,#0A61BF,#094b96); color: #fff; font-family: 'Roboto Condensed', sans-serif; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: .32rem .9rem; border-radius: 999px; box-shadow: 0 8px 18px -6px rgba(10,97,191,.65); white-space: nowrap; }

/* Logo-Lockup: einheitliche Chips normalisieren ungleiche Marken, dezenter Trenn-Punkt statt fettem "+" */
.pt-bundle__logos { display: flex; align-items: center; gap: .35rem; flex-wrap: nowrap; min-height: 30px; margin-bottom: 1rem; }
.pt-bundle__logos img { height: 25px; max-width: 82px; min-width: 0; width: auto; flex: 0 1 auto; object-fit: contain; object-position: center; padding: 0 .42rem; background: #f4f9ff; border: 1px solid #e4f0ff; border-radius: 8px; box-sizing: content-box; }
.pt-bundle__logos .pt-plus { align-self: center; width: 4px; height: 4px; padding: 0; border-radius: 50%; background: #b9d4f5; font-size: 0; line-height: 0; flex: 0 0 auto; }

/* ---- hexagon timeline ---- */
.pt-timeline { list-style: none; counter-reset: pttl; margin: 1.8rem 0; padding: 0; display: grid; gap: 1.1rem; max-width: 48rem; }
.pt-timeline li { counter-increment: pttl; position: relative; padding: .25rem 0 .25rem 4rem; min-height: 3rem; margin: 0; }
.pt-timeline li::before { content: counter(pttl); position: absolute; left: 0; top: 0; width: 3rem; height: 3rem; background: linear-gradient(135deg, #0A61BF, #2b7cc2); color: #fff; font-family: 'Roboto Condensed', sans-serif; font-weight: 700; font-size: 1.2rem; display: grid; place-items: center; clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%); box-shadow: 0 8px 18px -8px rgba(10,97,191,.6); }
.pt-timeline strong { display: block; color: #0e2a52; font-family: 'Roboto Condensed', sans-serif; font-size: 1.1rem; }

/* ---- Fixes (Runde 2.1) ------------------------------------------------------ */
/* Button-Text gewinnt gegen `.pt-lp a` (Spezifität) */
.pt-lp .pt-btn--primary { color: #fff; }
.pt-lp .pt-btn--ghost { color: #fff; }
.pt-lp .pt-btn--primary:hover, .pt-lp .pt-btn--ghost:hover { color: #fff; }

/* Full-Bleed-Bänder stoßen aneinander (kein Seiten-BG dazwischen) */
.pt-section--bleed { margin-top: 0; margin-bottom: 0; }
/* Erstes Band direkt unter Hero/Trust-Bar, Bänder nahtlos gestapelt */
.pt-hero + .pt-trustbar, .pt-trustbar + .pt-section--bleed { margin-top: 0; }

/* Tabelle = weiße Karte mit dunklem Header (Kontrast auf jeder Sektion) */
.pt-lp table { border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; box-shadow: 0 16px 36px -26px rgba(10,97,191,.5); }
.pt-lp thead th { background: #0e2a52; color: #fff; border-color: #0e2a52; font-family: 'Roboto Condensed', sans-serif; letter-spacing: .01em; }
.pt-lp tbody td { background: #fff; }
.pt-lp tbody tr:nth-child(even) td { background: #f6f9fe; }
/* Mobile: Tabelle horizontal scrollbar machen statt vom overflow:hidden des <main> abgeschnitten zu werden */
@media (max-width: 600px) {
  .pt-lp table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 12px; }
  .pt-lp th, .pt-lp td { min-width: 7.5rem; }
  .pt-lp td:first-child, .pt-lp th:first-child { min-width: 9rem; }
}

/* ---- Brand-Fix (Runde 2.2): KEIN Grün — Personalturm-CI ist Blau ------------ */
:root { --pt-green: #0A61BF; --pt-green-d: #094b96; --pt-green-l: #ecf5ff; }
.pt-hero__hl { color: #8dc0ff; }
.pt-hero__trust li::before { background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%230A61BF' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat; }
.pt-pricecard__chip { color: #0A61BF; }
.pt-pricecard__arrow { color: #8dc0ff; }
.pt-pricecard__newbox { background: linear-gradient(135deg, #0A61BF, #2b7cc2); box-shadow: 0 14px 30px -14px rgba(10,97,191,.7); }
.pt-card__save { background: #0A61BF; color: #fff; box-shadow: 0 6px 14px -8px rgba(10,97,191,.6); }
.pt-myth__r { background: rgba(43,124,194,.16); }
.pt-myth__r h4 { color: #8dc0ff; }
.pt-myth__r li::before { content: "\2713"; color: #8dc0ff; }
.pt-myth__l li::before { content: "\2715"; color: #94a3b8; }

/* ---- Runde 2.3: Hero-Lesbarkeit, Trust-Row (4 in einer Zeile), Navy-Kontrast ---- */
/* Hero dunkler (navy) → Weiß + Akzent poppen deutlich besser */
.pt-hero--split { background: linear-gradient(160deg, #0e1d39 0%, #10306a 55%, #094b96 100%); }
.pt-hero__hl { color: #a9d2ff; }
/* alle 4 Trust-Punkte in EINER Zeile */
.pt-hero__trust { flex-wrap: nowrap; gap: .35rem .9rem; font-size: .8rem; }
.pt-hero__trust li { white-space: nowrap; }
@media (max-width: 820px) { .pt-hero__trust { flex-wrap: wrap; } }
/* Mythos/Realität besser lesbar auf Navy */
.pt-myth__l li { color: #c2d0e6; }
.pt-myth__r li { color: #eaf3ff; }

/* ---- Runde 2.4 / 5: Bundle-Detail — Pill, Preisblock, Liste, Spar-Box, CTA -- */
/* Kategorie-Pill (reserviert gleiche Höhe → smoothes Alignment) */
.pt-bundle__pill { display: inline-block; align-self: flex-start; background: #ecf5ff; color: #0A61BF; font-weight: 600; font-size: .8rem; line-height: 1.3; padding: .34rem .75rem; border-radius: 14px; margin-bottom: .9rem; min-height: 2.1rem; }
/* Preisblock: Alt-Preis (gedämpft) + Rabatt-Badge (solides Blau), große Held-Zahl */
.pt-bundle__old { color: #94a3b8; text-decoration: line-through; text-decoration-color: #cbd5e1; font-family: 'Roboto Condensed', sans-serif; font-size: 1.05rem; font-weight: 600; vertical-align: middle; }
.pt-bundle__save { display: inline-flex; align-items: center; gap: .35rem; margin-left: .5rem; vertical-align: middle; background: #0A61BF; color: #fff; font-family: 'Roboto Condensed', sans-serif; font-weight: 700; font-size: .8rem; letter-spacing: .02em; padding: .2rem .6rem; border-radius: 999px; box-shadow: 0 6px 14px -6px rgba(10,97,191,.55); }
.pt-bundle__price { font-family: 'Roboto Condensed', sans-serif; font-size: 2.5rem; font-weight: 700; line-height: 1.04; letter-spacing: -.01em; color: #0e2a52; margin: .2rem 0 .1rem; }
.pt-bundle--hl .pt-bundle__price { font-size: 2.7rem; color: #0A61BF; }
.pt-bundle__net { font-size: .78rem; color: #94a3b8; margin-bottom: .9rem; }
/* Leistungsliste — wächst (flex:1) und drückt Spar-Box + CTA auf gleiche Baseline */
.pt-bundle__list { list-style: none; padding: 0; margin: .2rem 0 1rem; display: grid; gap: .55rem; flex: 1 1 auto; align-content: start; }
.pt-bundle__list li { position: relative; padding-left: 1.6rem; font-size: .9rem; color: #475569; line-height: 1.45; }
.pt-bundle__list li::before { content: ""; position: absolute; left: 0; top: .15rem; width: 1.05rem; height: 1.05rem; border-radius: .3rem; background: #0A61BF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/.7rem no-repeat; }
/* Spar-Box = Trust-Strip mit linkem blauen Akzent, gestapelt */
.pt-bundle__savebox { display: flex; flex-direction: column; gap: .12rem; background: #ecf5ff; border: 1px solid #d6e8ff; border-left: 4px solid #0A61BF; border-radius: 12px; padding: .7rem .9rem; margin: 0 0 1rem; }
.pt-bundle__savebox span:first-child { font-size: .92rem; color: #0e2a52; font-weight: 600; }
.pt-bundle__savebox b { font-family: 'Roboto Condensed', sans-serif; color: #0A61BF; font-size: 1.25rem; font-weight: 700; }
.pt-bundle__savebox span:last-child { font-size: .76rem; color: #64748b; }
.pt-bundle--hl .pt-bundle__savebox { background: #e2f0ff; border-color: #a9d2ff; }
/* CTA: volle Breite, unten bündig auf ALLEN Karten */
.pt-bundle .pt-btn { width: 100%; margin-top: auto; font-family: 'Roboto Condensed', sans-serif; font-size: 1.02rem; font-weight: 700; letter-spacing: .01em; padding: .9rem 1.2rem; }
.pt-bundle--hl .pt-btn--primary { font-size: 1.06rem; padding: 1rem 1.2rem; box-shadow: 0 14px 30px -10px rgba(10,97,191,.6); }
/* Tablet/eng: direkt auf 1-up (kein verwaistes 2-up, das die 3. Karte abtrennt) */
@media (max-width: 980px) { .pt-bundles { grid-template-columns: 1fr; max-width: 30rem; margin-left: auto; margin-right: auto; } }

/* Spar-Rechner (kompakt — passt ohne Scroll; PT-Satz pro Tier am Button hinterlegt) */
.pt-calc { max-width: 56rem; margin: 1.1rem auto 0; }
.pt-calc__vols { display: flex; gap: .55rem; justify-content: center; flex-wrap: wrap; }
.pt-calc__vol { font-family: 'Roboto Condensed', sans-serif; font-weight: 700; font-size: 1.15rem; color: #0e2a52; background: #fff; border: 1px solid #d6e8ff; border-radius: 13px; min-width: 3.7rem; padding: .42rem .55rem; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .02rem; line-height: 1.05; box-shadow: 0 3px 0 #e2eefc; transition: transform .12s ease, box-shadow .12s ease, background .15s ease, color .15s ease, border-color .15s ease; }
.pt-calc__vol-rate { display: block; font-size: .6rem; font-weight: 600; letter-spacing: 0; color: #64748b; }   /* PT-€/Stelle dieses Tiers */
.pt-calc__vol-rate::after { content: " €"; }
.pt-calc__vol:hover { border-color: #0A61BF; box-shadow: 0 3px 0 #8dc0ff; }
.pt-calc__vol:focus-visible { outline: 3px solid #8dc0ff; outline-offset: 2px; }
.pt-calc__vol--on { background: #0A61BF; color: #fff; border-color: #0A61BF; box-shadow: 0 5px 0 #094b96; }
.pt-calc__vol--on .pt-calc__vol-rate { color: #cfe3ff; }
.pt-calc__vol--on:active { transform: translateY(4px); box-shadow: 0 1px 0 #094b96; }
.pt-calc__vols-label { text-align: center; color: #64748b; font-size: .85rem; margin: .55rem 0 1rem; }
.pt-calc__panel { background: #fff; border: 1px solid #d6e8ff; border-radius: 18px; box-shadow: 0 22px 46px -28px rgba(10,97,191,.5); overflow: hidden; }
.pt-calc__head { background: linear-gradient(135deg, #094b96, #0A61BF); color: #fff; padding: 1rem 1.4rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.pt-calc__head-kick { display: block; font-family: 'Roboto Condensed', sans-serif; text-transform: uppercase; letter-spacing: .04em; font-size: .78rem; font-weight: 700; color: #cfe3ff; }
.pt-calc__head-sub { display: block; font-size: 1rem; font-weight: 600; color: #fff; }
.pt-calc__pct { text-align: right; line-height: 1; }
.pt-calc__pct-num { font-family: 'Roboto Condensed', sans-serif; font-size: 3rem; line-height: .9; font-weight: 700; }
.pt-calc__pct-sub { display: block; font-size: .76rem; color: #cfe3ff; margin-top: .15rem; }
.pt-calc__row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .8rem 1.4rem; border-bottom: 1px solid #eef3f9; }
.pt-calc__row strong { display: block; color: #0e2a52; font-family: 'Roboto Condensed', sans-serif; font-size: 1rem; }
.pt-calc__rate { font-size: .82rem; color: #64748b; }
.pt-calc__total { font-family: 'Roboto Condensed', sans-serif; font-size: 1.3rem; font-weight: 700; white-space: nowrap; }
.pt-calc__direkt-total { color: #94a3b8; }
.pt-calc__rahmen-total { color: #0A61BF; }
.pt-calc .pt-note { padding: .55rem 1.4rem 0; margin: 0; font-size: .76rem; }
.pt-calc__save { display: flex; justify-content: space-between; align-items: center; padding: .8rem 1.4rem; background: #ecf5ff; margin-top: .5rem; }
.pt-calc__save-label { font-family: 'Roboto Condensed', sans-serif; font-weight: 700; color: #0e2a52; }
.pt-calc__save-total { font-family: 'Roboto Condensed', sans-serif; font-size: 1.4rem; font-weight: 700; color: #0A61BF; }
.pt-calc__cta { text-align: center; margin-top: 1.1rem; }
@media (max-width: 560px) { .pt-calc__row { flex-direction: column; align-items: flex-start; gap: .3rem; } .pt-calc__head { flex-direction: column; align-items: flex-start; } .pt-calc__pct { text-align: left; } }

/* ---- Sticky Angebots-Leiste (öffnet Freebie via #angebot) ------------------- */
.pt-stickycta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; transform: translateY(130%); transition: transform .38s cubic-bezier(.2,.85,.25,1); pointer-events: none; }
.pt-stickycta--show { transform: translateY(0); pointer-events: auto; }
.pt-stickycta__inner { max-width: 64rem; margin: 0 auto .8rem; display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; background: linear-gradient(135deg, #0e2a52 0%, #0A61BF 100%); color: #fff; border: 1px solid rgba(255,255,255,.14); border-radius: 16px; padding: .75rem .85rem .75rem 1.4rem; box-shadow: 0 20px 48px -16px rgba(10,29,57,.7); }
.pt-stickycta__msg { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.pt-stickycta__lead { font-family: 'Roboto Condensed', sans-serif; font-weight: 700; font-size: 1.04rem; }
.pt-stickycta__sub { font-size: .8rem; color: #cfe3ff; }
.pt-stickycta__btn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .45rem; background: #fff; color: #0A61BF; font-family: 'Roboto Condensed', sans-serif; font-weight: 700; font-size: 1rem; letter-spacing: .01em; padding: .8rem 1.5rem; border-radius: 12px; box-shadow: 0 10px 24px -10px rgba(0,0,0,.5); transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.pt-stickycta__btn::after { content: "→"; transition: transform .15s ease; }
.pt-stickycta__btn:hover { transform: translateY(-2px); background: #ecf5ff; box-shadow: 0 18px 32px -10px rgba(0,0,0,.55); }
.pt-stickycta__btn:hover::after { transform: translateX(4px); }
.pt-stickycta__btn:active { transform: translateY(0); box-shadow: 0 8px 18px -10px rgba(0,0,0,.5); }
@media (max-width: 640px) {
  .pt-stickycta__inner { margin: 0 .5rem .5rem; padding: .65rem .7rem .65rem 1rem; gap: .7rem; border-radius: 14px; }
  .pt-stickycta__sub { display: none; }
  .pt-stickycta__lead { font-size: .9rem; }
  .pt-stickycta__btn { padding: .7rem 1rem; font-size: .9rem; }
}

/* ---- Runde 2.5: Hero zentriert + Brand-Bild + StepStone-Partner-Badge ------- */
.pt-hero { background: linear-gradient(160deg, #0e1d39 0%, #10306a 55%, #094b96 100%); }
.pt-hero__cta { justify-content: center; }
.pt-hero__trust { justify-content: center; }
.pt-hero__partner { display: inline-flex; align-items: center; gap: .55rem; background: rgba(255,255,255,.95); color: #0e2a52; font-family: 'Roboto Condensed', sans-serif; font-weight: 700; font-size: .82rem; letter-spacing: .02em; padding: .4rem .9rem; border-radius: 999px; margin: 0 0 1.2rem; box-shadow: 0 8px 20px -12px rgba(0,0,0,.5); }
.pt-hero__partner img { height: 16px; width: auto; display: block; }

/* ============================================================================
   Runde 3 — Politur (A): Hero, Cards, Bundles, Mid-Sektionen, Ablauf/Stats, A11y
   Am Dateiende → gewinnt bewusst den Cascade über die Basisregeln oben.
   Blau-only, ContentSanitizer-safe (nur .pt-*), keine inline styles.
   ============================================================================ */

/* ---- Hero: Headline sauber + ausgewogen, Highlight entfernt, Badge & CTA prominenter ---- */
.pt-hero__hl { color: inherit; background: none; padding: 0; }
.pt-hero--split .pt-hero__grid { grid-template-columns: 1.15fr .85fr; gap: 2.8rem; }
.pt-hero--split .pt-hero__title { font-size: clamp(1.85rem, 1.15rem + 2.3vw, 2.7rem); line-height: 1.12; letter-spacing: -.01em; text-wrap: balance; }
.pt-hero__titleq { display: block; margin-top: .55rem; font-size: .56em; font-weight: 600; color: #bcd6f6; letter-spacing: 0; line-height: 1.25; text-wrap: balance; }
.pt-hero__partner { font-size: .82rem; gap: .6rem; padding: .48rem 1rem .48rem .58rem; border: 1px solid rgba(141,192,255,.4); box-shadow: 0 12px 26px -14px rgba(0,0,0,.6); }
.pt-hero__partner img { height: 20px; }
.pt-hero__cta .pt-btn--primary { padding: 1.05rem 2rem; font-size: 1.12rem; box-shadow: 0 6px 0 #094b96, 0 20px 34px -12px rgba(10,97,191,.7); }
@media (max-width: 820px) { .pt-hero--split .pt-hero__grid { grid-template-columns: 1fr; } }

/* ---- Preis-Cards: festes Raster (keine Waisen), bündige Höhen, klare Highlight-Karte ---- */
.pt-cards { grid-template-columns: repeat(4, 1fr); }
.pt-card { display: flex; flex-direction: column; }
.pt-card__incl { margin-top: auto; }
.pt-card--highlight { transform: translateY(-6px); padding-top: 2.3rem; background: linear-gradient(180deg, #f4f9ff, #fff); }
.pt-card--highlight:hover { transform: translateY(-11px); }
.pt-card--highlight::after { display: none; }
.pt-card--highlight .pt-card__pop { left: 50%; right: auto; top: 0; transform: translateX(-50%); border-radius: 0 0 .6rem .6rem; }
@media (max-width: 1100px) { .pt-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .pt-cards { grid-template-columns: 1fr; } }

/* ---- Bundles: Logo-Lockup umbruchsicher (3-Logo-Karte) ---- */
.pt-bundle__logos { flex-wrap: wrap; row-gap: .4rem; }
.pt-bundle__logos img { height: 23px; max-width: 74px; padding: 0 .32rem; }

/* ---- Mid: Feature-Hover & größere Icons, Compare-Pfeil als Chip ---- */
.pt-feature { transition: transform .18s ease, border-color .18s ease, background .18s ease; }
.pt-feature:hover { transform: translateY(-4px); border-color: rgba(141,192,255,.4); }
.pt-feature__ico { background: rgba(141,192,255,.18); }
.pt-feature__ico svg { width: 26px; height: 26px; }
.pt-compare-arrow { display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28); color: #fff; font-size: 1.2rem; line-height: 1; }

/* ---- Ablauf: Timeline mit Verbindungslinie + saubere Titel/Text-Hierarchie ---- */
.pt-timeline li { padding-bottom: .7rem; color: #475569; line-height: 1.55; }
.pt-timeline li:not(:last-child)::after { content: ""; position: absolute; left: 1.5rem; top: 3rem; bottom: -.45rem; width: 2px; transform: translateX(-1px); background: linear-gradient(#0A61BF, #a9d2ff); border-radius: 2px; }
.pt-timeline strong { margin-bottom: .28rem; font-size: 1.12rem; }

/* ---- Stats: EIN hochwertiges Navy-„Zahlen"-Panel (Hexagon-Textur) statt floatender Karten ---- */
.pt-stats { grid-template-columns: repeat(4, 1fr); gap: 0; padding: 2rem 1rem; position: relative; overflow: hidden; background: linear-gradient(135deg, #0e2a52 0%, #0A61BF 100%); border: none; border-radius: 1.6rem; box-shadow: 0 28px 56px -26px rgba(10,41,82,.6); }
.pt-stats::before { content: ""; position: absolute; inset: 0; background-image: var(--pt-hex); background-repeat: repeat; opacity: .6; pointer-events: none; }
.pt-stat { position: relative; z-index: 1; background: transparent; border: none; border-radius: 0; box-shadow: none; padding: .7rem 1.25rem; overflow: visible; }
.pt-stat::before { display: none; }
.pt-stat + .pt-stat { border-left: 1px solid rgba(255,255,255,.16); }
.pt-stat__num { font-size: 2.8rem; color: #fff; }
.pt-stat__label { color: #bcd6f6; }
@media (max-width: 720px) {
  .pt-stats { grid-template-columns: 1fr 1fr; row-gap: .2rem; padding: 1.4rem .6rem; }
  .pt-stat { border-left: none !important; padding: 1rem .8rem; }
  .pt-stat:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.16); }
}
@media (max-width: 400px) { .pt-stats { grid-template-columns: 1fr; } .pt-stat:nth-child(n+2) { border-top: 1px solid rgba(255,255,255,.16); } }

/* ---- A11y / Mobile: Anker-Offset unter Sticky/Header, reduced-motion ---- */
#preise, #sparen, #reichweite, #bundles, #rechner, #faq, #angebot { scroll-margin-top: 5rem; }
@media (prefers-reduced-motion: reduce) {
  .pt-donut__fg, .pt-btn, .pt-card, .pt-bundle, .pt-feature, .pt-stickycta, .pt-stickycta__btn, .pt-calc__vol { transition: none !important; }
}

/* ============================================================================
   Runde 4 — Ablauf-Timeline horizontal (3 Schritte nebeneinander, Breite nutzen)
   Hexagon oben, Text darunter, waagerechte Verbindungslinie. Mobil → vertikal.
   ============================================================================ */
.pt-timeline { grid-template-columns: repeat(3, 1fr); gap: 1.8rem; max-width: none; margin: 2.2rem 0; }
.pt-timeline li { padding: 4.4rem 0 0 0; min-height: 0; }
.pt-timeline li::before { left: 0; top: 0; }
/* waagerechte Linie vom Hexagon zum nächsten Schritt */
.pt-timeline li:not(:last-child)::after { content: ""; position: absolute; left: 3.4rem; right: -1.8rem; top: 1.5rem; bottom: auto; width: auto; height: 2px; transform: translateY(-1px); background: linear-gradient(90deg, #0A61BF, #a9d2ff); border-radius: 2px; }
.pt-timeline strong { margin-bottom: .3rem; font-size: 1.12rem; }
@media (max-width: 760px) {
  .pt-timeline { grid-template-columns: 1fr; gap: 1.1rem; }
  .pt-timeline li { padding: .25rem 0 .8rem 4rem; }
  .pt-timeline li:not(:last-child)::after { left: 1.5rem; right: auto; top: 3rem; bottom: -.5rem; width: 2px; height: auto; transform: translateX(-1px); background: linear-gradient(#0A61BF, #a9d2ff); }
}
.pt-hero__img { margin-top: 2.6rem; }

/* ===========================================================================
   Runde 3: TRANSITION A — weiche Gradient-Fade-Übergänge + Lesbarkeits-Politur
   (aus tools/design/transition-A.html übernommen). Eyebrow-Fix: kurzer Top-Fade
   (3.5rem) + großzügiges Top-Padding (5rem) → Eyebrow sitzt UNTER dem Gradient.
   Hinweis: Navy-Bänder nutzen ::before/::after für die Fades — das dezente
   Hexagon-Overlay weicht hier dem Übergang.
   =========================================================================== */
.pt-section--bleed { position: relative; padding: 5rem 0 4.25rem; isolation: isolate; }
@media (max-width: 640px) { .pt-section--bleed { padding: 3.5rem 0 3rem; } }

/* Fade-Overlays — explizite Geometrie (überschreibt evtl. geerbtes inset:0) */
.pt-section--bleed::before, .pt-section--bleed::after { content: ""; position: absolute; left: 0; right: 0; pointer-events: none; z-index: 0; background-repeat: no-repeat; }
.pt-section--bleed::before { top: 0; bottom: auto; height: 3.5rem; }
.pt-section--bleed::after  { bottom: 0; top: auto; height: 7rem; }
.pt-section--bleed > .pt-container { position: relative; z-index: 2; }
.pt-section--navy.pt-section--bleed::before, .pt-section--navy.pt-section--bleed::after { z-index: 1; }

/* Top-Fades: Farbe des Vorgängerbandes läuft kurz ein */
.pt-section--light + .pt-section--white::before { background-image: linear-gradient(180deg, #ecf5ff 0%, rgba(236,245,255,0) 100%); }
.pt-section--navy + .pt-section--white::before { background-image: linear-gradient(180deg, rgba(14,29,57,.18) 0%, rgba(14,29,57,0) 100%); }
.pt-section--white + .pt-section--light::before, .pt-trustbar + .pt-section--light::before { background-image: linear-gradient(180deg, #ffffff 0%, rgba(255,255,255,0) 100%); }
.pt-section--navy + .pt-section--light::before { background-image: linear-gradient(180deg, rgba(14,29,57,.20) 0%, rgba(14,29,57,0) 100%); }
.pt-section--white + .pt-section--navy::before { background-image: linear-gradient(180deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,0) 100%); }
.pt-section--light + .pt-section--navy::before { background-image: linear-gradient(180deg, #ecf5ff 0%, rgba(236,245,255,.55) 38%, rgba(236,245,255,0) 100%); }

/* Bottom-Auslauf: eigene Bandfarbe transparent ausblenden */
.pt-section--navy.pt-section--bleed::after  { background-image: linear-gradient(180deg, rgba(9,75,150,0) 0%, rgba(9,75,150,.28) 100%); }
.pt-section--white.pt-section--bleed::after  { background-image: linear-gradient(180deg, rgba(255,255,255,0) 0%, #ffffff 100%); }
.pt-section--light.pt-section--bleed::after  { background-image: linear-gradient(180deg, rgba(236,245,255,0) 0%, #ecf5ff 100%); }

/* Hero → Trust-Bar: Hero-Blau läuft weich aus (Content/Bild bleibt darüber) */
.pt-hero { padding-bottom: 4.5rem; }
.pt-hero > .pt-container { position: relative; z-index: 2; }
.pt-hero::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6rem; background: linear-gradient(180deg, rgba(9,75,150,0) 0%, rgba(255,255,255,.12) 100%); pointer-events: none; z-index: 1; }
.pt-trustbar { position: relative; }
.pt-cta { margin: 3.25rem auto; max-width: 72rem; }

/* Lesbarkeits-Politur */
.pt-lp { color: #2b3a4f; }
.pt-lp p, .pt-lp li { line-height: 1.72; }
.pt-section--bleed > .pt-container > p, .pt-section--bleed > .pt-container > .pt-answer { max-width: 66rem; }
.pt-section--bleed h2 { font-size: 2.05rem; }
.pt-section--navy .pt-answer { background: rgba(255,255,255,.08); border-left-color: #8dc0ff; color: #eaf3ff; }
.pt-section--navy .pt-answer strong { color: #fff; }
.pt-section--light .pt-card { box-shadow: 0 16px 34px -20px rgba(10,97,191,.45); }
.pt-lp a:focus-visible, .pt-btn:focus-visible, .pt-cta-btn:focus-visible { outline: 3px solid #8dc0ff; outline-offset: 2px; border-radius: 6px; }
@media (max-width: 640px) { .pt-lp { font-size: 1.02rem; } .pt-section--bleed h2 { font-size: 1.65rem; } .pt-cta { margin: 2.25rem auto; } .pt-container { padding: 0 1.1rem; } }

/* ===========================================================================
   Runde 4: SPLIT-HERO (Hybrid) — Above-the-fold: H1 + Beweis-Bild nebeneinander
   Text links, gerahmtes Bild rechts mit „−70 %"-Chip. Mobil: H1 zuerst (LCP),
   Bild darunter. Nur Blau-CI.
   =========================================================================== */
.pt-hero--split { text-align: left; padding: 6.5rem 0 2.6rem; background: radial-gradient(120% 90% at 78% 18%, rgba(43,124,194,.5) 0%, rgba(43,124,194,0) 55%), linear-gradient(158deg, #0e1d39 0%, #0e2a52 38%, #094b96 78%, #0A61BF 100%); }
.pt-hero--split .pt-hero__grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.04fr .96fr; gap: 3rem; align-items: center; }
.pt-hero--split .pt-hero__copy { text-align: left; min-width: 0; }
.pt-hero--split .pt-hero__partner { margin: 0 0 1.15rem; }
.pt-hero--split .pt-hero__title { max-width: 16ch; margin: 0 0 .95rem; font-size: clamp(2rem, 3.4vw, 3.15rem); line-height: 1.05; }
.pt-hero--split .pt-hero__sub { max-width: 46ch; margin: 0 0 1.45rem; }
.pt-hero--split .pt-hero__cta { justify-content: flex-start; margin: 0 0 1.35rem; }
/* Trust: sauberes 2×2-Grid (gleiche Spaltenbreite → Checkmarks bündig untereinander) */
.pt-hero--split .pt-hero__trust { display: grid; grid-template-columns: auto auto; justify-content: flex-start; gap: .6rem 1.7rem; font-size: .88rem; }

/* Visual / Beweis-Bild rechts */
.pt-hero__visual { position: relative; }
.pt-hero--split .pt-hero__img { margin: 0; max-width: 100%; aspect-ratio: 16 / 11; object-fit: cover; border: 5px solid #fff; border-radius: 1.1rem; box-shadow: 0 34px 64px -26px rgba(0,0,0,.6); }
.pt-hero__visual::before { content: ""; position: absolute; z-index: -1; top: -26px; right: -26px; width: 120px; height: 138px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='64' viewBox='0 0 56 64'%3E%3Cpath d='M28 1 53 15.5v33L28 63 3 48.5v-33z' fill='none' stroke='%238dc0ff' stroke-opacity='0.5' stroke-width='2'/%3E%3C/svg%3E"); background-size: 60px 68px; background-repeat: repeat; }

@media (max-width: 980px) { .pt-hero--split .pt-hero__grid { gap: 2rem; } }
@media (max-width: 820px) {
  .pt-hero--split { padding: 5rem 0 2rem; }
  .pt-hero--split .pt-hero__grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .pt-hero--split .pt-hero__title, .pt-hero--split .pt-hero__sub { max-width: 100%; }
  .pt-hero--split .pt-hero__img { aspect-ratio: 16 / 9; }
}
@media (max-width: 480px) { .pt-hero--split .pt-btn { width: 100%; } .pt-hero--split .pt-hero__trust { grid-template-columns: 1fr; } }

/* =============================================================================
   Lead-Modal — #angebot-CTAs öffnen den Lead-Block als Overlay (lp-blog.js
   verschiebt den .pt-leadblock hier hinein). Nur Blau-CI.
   ========================================================================== */
.pt-leadmodal { position: fixed; inset: 0; z-index: 80; display: none; align-items: flex-start; justify-content: center; padding: 5vh 1rem; overflow-y: auto; background: rgba(14,29,57,.62); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.pt-leadmodal--open { display: flex; }
.pt-leadmodal__dialog { position: relative; width: 100%; max-width: 60rem; margin: auto; animation: pt-leadmodal-in .24s ease; }
@keyframes pt-leadmodal-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.pt-leadmodal__close { position: absolute; top: -.6rem; right: -.6rem; z-index: 2; width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; border: none; border-radius: 50%; background: #fff; color: #0e2a52; font-size: 1.7rem; line-height: 1; cursor: pointer; box-shadow: 0 10px 24px -8px rgba(0,0,0,.5); transition: background .15s ease, color .15s ease, transform .15s ease; }
.pt-leadmodal__close:hover { background: #ecf5ff; color: #0A61BF; transform: scale(1.05); }
.pt-leadmodal__close:focus-visible { outline: 2px solid #0A61BF; outline-offset: 2px; }
/* Lead-Block im Modal: kein Außenabstand, volle Dialog-Breite */
.pt-leadmodal .pt-leadblock { margin: 0; padding: 0; }
.pt-leadmodal .pt-leadblock .pt-container { max-width: none; padding: 0; }
.pt-leadmodal .pt-leadblock__card { max-width: none; margin: 0; }
body.pt-leadmodal-lock { overflow: hidden; }
@media (max-width: 600px) {
  .pt-leadmodal { padding: 0; }
  .pt-leadmodal__dialog { max-width: 100%; min-height: 100%; }
  .pt-leadmodal__close { top: .5rem; right: .5rem; box-shadow: 0 4px 12px -4px rgba(0,0,0,.5); }
}
@media (prefers-reduced-motion: reduce) { .pt-leadmodal__dialog { animation: none; } }

/* =============================================================================
   Large-screen / UHD (4K) optimization — min-width.
   lp-blog.css only loads on landingpages, so this is scoped to LP pages.
   The layout is rem-based, so we scale the root font-size AND the content
   max-width in PROPORTION (~×1.375 at 4K). Effect: the exact desktop design,
   uniformly zoomed up — bigger type/images/cards that fill ultrawide/UHD
   screens, while characters-per-line stays constant (readability preserved)
   and the huge empty side-gutters shrink by roughly half.
   ========================================================================== */
@media (min-width: 1700px) {
  html { font-size: 17px; }
  .pt-container, .pt-lp-wrap, .pt-trustbar__in { max-width: 78rem; }
  .pt-hero--split .pt-hero__grid { gap: 3.4rem; }
}
@media (min-width: 2200px) {
  html { font-size: 18.5px; }
  .pt-container, .pt-lp-wrap, .pt-trustbar__in { max-width: 84rem; }
}
@media (min-width: 2800px) {
  html { font-size: 20px; }
  .pt-container, .pt-lp-wrap, .pt-trustbar__in { max-width: 92rem; }
}
@media (min-width: 3400px) {
  html { font-size: 22px; }
  .pt-container, .pt-lp-wrap, .pt-trustbar__in { max-width: 100rem; }
}