/* Gestaltungsbausteine für Premium-Profiltexte (A–Z).
   Der Profiltext lässt nur Klassen und wenige Inline-Stile durch, deshalb stecken Abstände und Raster hier.
   Akzentfarbe je Profil über eine Klasse am äußeren Block: pb-orange, pb-gruen, pb-blau, pb-rot. */
@font-face{font-family:Anton;src:url('anton-400.woff2') format('woff2');font-display:swap}

.pb{--pb-akzent:#1F3E79;--pb-dunkel:#0b0b0b;--pb-text:#334b67;margin:0 0 34px;color:var(--pb-text)}
.pb-orange{--pb-akzent:#FF9700}.pb-gruen{--pb-akzent:#65A32D}.pb-blau{--pb-akzent:#1F3E79}.pb-rot{--pb-akzent:#D9342B}
.pb *{box-sizing:border-box}
.pb p{margin:0 0 12px}
.pb img{display:block;max-width:100%;height:auto;border-radius:0}

/* Schriften */
.pb-kicker{display:block;font-size:12px;font-weight:800;letter-spacing:.24em;text-transform:uppercase;color:var(--pb-akzent);margin:0 0 10px}
.pb-titel{font-family:Anton,Impact,'Arial Narrow',sans-serif;font-weight:400;text-transform:uppercase;line-height:.95;letter-spacing:.01em;font-size:clamp(34px,6vw,58px);margin:0 0 14px;color:inherit}
.pb .pb-titel{color:#0b0b0b}
.pb-buehne .pb-titel,.pb-aktion .pb-titel{color:#fff}
.pb-titel span,.pb-akzent{color:var(--pb-akzent)}
.pb .pb-titel .pb-schild{color:#0b0b0b}
.pb-schild{display:inline-block;background:var(--pb-akzent);color:#0b0b0b;padding:.04em .2em .08em;transform:rotate(-2deg);margin-top:.08em}
.pb-lead{font-size:19px;line-height:1.55;font-weight:600}

/* Bühne: dunkler Einstieg mit Bild rechts */
.pb-buehne{position:relative;overflow:hidden;background:var(--pb-dunkel);color:#fff;border-radius:18px;padding:34px 34px 0;display:grid;grid-template-columns:1.25fr .9fr;gap:10px;align-items:end;
 background-image:radial-gradient(circle at 85% 30%,rgba(255,255,255,.08),transparent 55%)}
.pb-buehne>div:first-child{padding-bottom:34px;position:relative;z-index:1}
.pb-buehne p{color:#d6d6d6}
.pb-buehne img{width:100%;max-height:420px;object-fit:contain;object-position:bottom;filter:drop-shadow(0 18px 40px rgba(0,0,0,.5))}
.pb-buehne::after{content:"";position:absolute;left:-10%;right:-10%;bottom:-14px;height:44px;background:var(--pb-akzent);transform:rotate(-4deg);z-index:0}
.pb-buehne>div:last-child{position:relative;z-index:1}

/* Zahlenreihe */
.pb-zahlen{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px}
.pb-zahlen>div{background:#fff;border:1px solid #e0e6ef;border-radius:12px;padding:16px 16px 14px}
.pb-zahlen>div::before{content:"";display:block;width:28px;height:4px;border-radius:2px;background:var(--pb-akzent);margin-bottom:12px}
.pb-zahlen b{display:block;font-family:Anton,Impact,sans-serif;font-weight:400;font-size:34px;line-height:1;color:#0b0b0b}
.pb-zahlen span{display:block;font-size:14px;line-height:1.35;margin-top:6px}

/* Karten */
.pb-karten{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.pb-karte{grid-column:span 2}
.pb-karte:nth-child(4):nth-last-child(2),.pb-karte:nth-child(5):last-child{grid-column:span 3}
.pb-karte{position:relative;background:#fff;border:1px solid #e0e6ef;border-radius:14px;padding:20px 20px 16px;box-shadow:0 10px 30px rgba(20,39,70,.05)}
.pb-karte b{display:block;font-family:Anton,Impact,sans-serif;font-weight:400;text-transform:uppercase;font-size:24px;line-height:1.05;color:#0b0b0b;margin-bottom:6px}
.pb-karte .pb-nr{display:block;font-size:12px;font-weight:800;letter-spacing:.2em;color:var(--pb-akzent);margin-bottom:8px}
.pb-karte p{font-size:15px;line-height:1.55;margin:0}

/* Zwei Spalten: Bild und Text */
.pb-zweier{display:grid;grid-template-columns:.8fr 1.2fr;gap:28px;align-items:center}
.pb-zweier img{border-radius:14px}

/* Video im Hochformat, z. B. Reels */
.pb video{display:block;width:100%;max-width:300px;aspect-ratio:9/16;object-fit:cover;margin:0 auto;border-radius:18px;background:#0b0b0b;box-shadow:0 18px 40px rgba(11,11,11,.22)}

/* Referenzen */
.pb-galerie{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.pb-galerie figure{margin:0!important;background:#fff;border:1px solid #e0e6ef;border-radius:12px;overflow:hidden}
.pb-galerie img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:0!important}
.pb-galerie figcaption{padding:8px 12px 10px;margin:0!important;font-size:13px;line-height:1.3;color:#334b67}
.pb-galerie figcaption b{display:block;color:#0b0b0b}

/* Zitat */
.pb-zitat{position:relative;margin:0;padding:26px 28px 24px 74px;background:#f6f6f4;border-radius:14px;font-size:21px;line-height:1.45;font-weight:700;color:#0b0b0b}
.pb-zitat::before{content:"„";position:absolute;left:22px;top:-38px;font-family:Anton,Impact,sans-serif;font-size:96px;line-height:1;color:var(--pb-akzent)}
.pb-zitat .pb-quelle{display:block;margin-top:8px;font-size:14px;font-weight:600;color:#66778c}

/* Ablauf in Schritten */
.pb-ablauf{list-style:none;counter-reset:pb;margin:0;padding:0;display:grid;gap:10px}
.pb-ablauf li{counter-increment:pb;position:relative;padding:14px 16px 14px 66px;background:#fff;border:1px solid #e0e6ef;border-radius:12px;margin:0;line-height:1.5}
.pb-ablauf li::before{content:counter(pb,decimal-leading-zero);position:absolute;left:16px;top:12px;font-family:Anton,Impact,sans-serif;font-size:28px;line-height:1;color:var(--pb-akzent)}
.pb-ablauf b{color:#0b0b0b}

/* Laufband aus Stichworten */
.pb-band{background:var(--pb-akzent);color:#0b0b0b;font-family:Anton,Impact,sans-serif;text-transform:uppercase;letter-spacing:.06em;font-size:20px;line-height:1.3;padding:12px 18px;border-radius:10px;transform:rotate(-1deg);text-align:center}

/* Abschluss mit Knöpfen */
.pb-aktion{background:var(--pb-dunkel);color:#fff;border-radius:18px;padding:30px 32px}
.pb-aktion p{color:#d6d6d6}
.pb-knoepfe{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.pb a.pb-knopf{display:inline-block;padding:12px 18px;border-radius:9px;background:var(--pb-akzent);color:#0b0b0b;font-weight:800;text-decoration:none;line-height:1.2}
.pb a.pb-knopf.pb-hell{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.5)}

@media(max-width:640px){
 .pb-buehne{grid-template-columns:1fr;padding:26px 22px 0}
 .pb-buehne>div:first-child{padding-bottom:0}
 .pb-buehne img{max-height:300px;margin:0 auto}
 .pb-zweier{grid-template-columns:1fr}
 .pb-karten{grid-template-columns:1fr}
 .pb-karte,.pb-karte:nth-child(n){grid-column:auto}
 .pb-galerie{grid-template-columns:1fr 1fr}
 .pb-zitat{padding:22px 20px 20px 58px;font-size:18px}
 .pb-zitat::before{left:14px;top:-30px;font-size:80px}
 .pb-aktion{padding:24px 20px}
}
