/* ProExpert · Basis-CSS für alle HTML-Blöcke
Werte aus der Live-Seite: Roboto, Abschnittsfarbe #F3F4F8, blaue Buttons.
EINMAL einbinden: Elementor → Website-Einstellungen → Benutzerdefiniertes CSS */
.px,.px *,.px *::before,.px *::after{box-sizing:border-box}
.px{
max-width:100%;overflow-x:hidden;
--blau:#123a6b; /* Überschriften, dunkle Flächen */
--blau-hell:#1a6fc4; /* Buttons, Links, Akzente */
--text:#37373a;
--flaeche:#F3F4F8; /* heller Abschnittshintergrund, wie auf der Seite */
--rand:#e3e6ea;
--r:8px;
--max:1140px;
font-family:"Roboto",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
color:var(--text);font-size:17px;line-height:1.75;
}
/* Abschnitte: volle Breite, Inhalt zentriert. Jeder zweite mit hellem Grund. */
.px-sec{padding:64px 22px}
.px-sec>*{max-width:var(--max);margin-left:auto;margin-right:auto}
.px-sec--grau{background:var(--flaeche)}
.px-sec--blau{background:var(--blau);color:#fff}
.px h2{font-size:clamp(24px,3.2vw,32px);line-height:1.3;color:var(--blau);
margin:0 0 .7em;font-weight:700}
.px h3{font-size:clamp(18px,2.2vw,21px);line-height:1.35;color:var(--blau);
margin:1.5em 0 .4em;font-weight:700}
.px-sec h2:first-child{margin-top:0}
.px .px-sec--blau h2,.px .px-sec--blau h3,.px .px-sec--blau p,
.px .px-sec--blau li,.px-sec--blau h2,.px-sec--blau h3{color:#fff}
.px img{max-width:100%;height:auto}
.px p{margin:0 0 1.1em;text-align:justify;text-justify:inter-word;
hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
.px-hero p,.px-zitat,.px-leiste,.px-cta p,.px-card p,.px-badge{text-align:left;hyphens:manual}
.px-hero p,.px-zitat,.px-leiste{text-align:center}
.px-check li,.px-steps li,.px-faq details>div{hyphens:auto;-webkit-hyphens:auto}
.px-faq details>div{text-align:justify}
.px a{color:var(--blau-hell)}
.px-lead{font-size:1.1em}
.px-zentriert{text-align:center}
.px-zentriert .px-check{display:inline-block;text-align:left}
/* Bild-Text-Blöcke, abwechselnd wie auf der Seite */
.px-split{display:grid;gap:44px;grid-template-columns:1fr 1fr;align-items:center}
.px-split--rechts .px-split__bild{order:2}
.px-split__bild{position:relative;border-radius:var(--r);overflow:hidden;isolation:isolate}
.px-split__bild img{width:100%;height:auto;display:block}
.px-badge{position:absolute;left:18px;bottom:18px;z-index:2;background:var(--blau);color:#fff;
font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;line-height:1.3;
padding:12px 20px;border-radius:var(--r);box-shadow:0 8px 22px rgba(10,30,60,.34);
max-width:calc(100% - 36px)}
/* Häkchenlisten */
.px-check{list-style:none;padding:0;margin:1.2em auto}
.px-check li{position:relative;padding:0 0 0 30px;margin-bottom:.7em}
.px-check li::before{content:"";position:absolute;left:4px;top:.5em;width:9px;height:5px;
border-left:2.5px solid var(--blau-hell);border-bottom:2.5px solid var(--blau-hell);
transform:rotate(-45deg)}
.px-sec--blau .px-check li::before{border-color:#fff}
.px-check--zwei{columns:2;column-gap:36px}
@media(max-width:700px){.px-check--zwei{columns:1}}
/* Karten */
.px-grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
align-items:stretch;margin:1.6em auto}
.px-card{border:1px solid var(--rand);border-radius:var(--r);padding:24px 26px;background:#fff;
display:flex;flex-direction:column}
.px-card h3{margin:0 0 .4em;font-size:18px}
.px-card p{margin:0;font-size:.94em;line-height:1.6}
/* Vorteilsleiste mit Icons, wie das blaue Band auf der Seite */
.px-leiste{display:grid;gap:28px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
text-align:center}
.px-leiste b{display:block;font-size:16px;margin-bottom:.15em}
.px-leiste span{font-size:14px;opacity:.85}
/* Tabelle */
.px-table{width:100%;border-collapse:collapse;margin:1.4em auto;font-size:.96em;background:#fff}
.px-table th{text-align:left;background:var(--flaeche);color:var(--blau);font-weight:700;
padding:13px 16px;border-bottom:2px solid #dde4ec}
.px-table td{padding:13px 16px;border-bottom:1px solid #eceff3;vertical-align:top}
/* Ablaufschritte */
.px-steps{counter-reset:s;list-style:none;padding:0;margin:1.4em auto}
.px-steps li{counter-increment:s;position:relative;padding:0 0 0 54px;margin-bottom:1.4em}
.px-steps li::before{content:counter(s);position:absolute;left:0;top:-3px;width:36px;height:36px;
border-radius:50%;background:var(--blau-hell);color:#fff;font-weight:700;font-size:15px;
display:flex;align-items:center;justify-content:center}
.px-steps strong{display:block;color:var(--blau);margin-bottom:.15em}
/* Buttons: blau mit weißer Schrift, wie auf der Seite */
.px a.px-btn,.px .px-btn{display:inline-block;background:var(--blau-hell);color:#fff;
font-weight:700;text-decoration:none;padding:15px 30px;border-radius:30px;font-size:15px;
box-shadow:0 6px 18px rgba(26,111,196,.28)}
.px a.px-btn:hover,.px .px-btn:hover{background:#155ba3;color:#fff}
.px .px-sec--blau a.px-btn,.px-sec--blau a.px-btn,.px-hero a.px-btn{background:#fff;
color:var(--blau);box-shadow:0 6px 18px rgba(0,0,0,.18)}
.px .px-sec--blau a.px-btn:hover,.px-sec--blau a.px-btn:hover,.px-hero a.px-btn:hover{
background:#eef3fa;color:var(--blau)}
/* CTA-Band */
.px-sec--bild{position:relative;background-size:cover;background-position:center;
background-repeat:no-repeat}
.px-sec--bild::before{content:"";position:absolute;inset:0;
background:linear-gradient(rgba(14,45,85,.9),rgba(18,58,107,.93))}
.px-sec--bild>*{position:relative;z-index:1}
.px-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px}
.px-cta h2{margin:0 0 .2em}
.px-cta p{margin:0;opacity:.9}
/* FAQ */
.px-faq{border-top:1px solid var(--rand);background:#fff}
.px-faq details{border-bottom:1px solid var(--rand)}
.px-faq summary{cursor:pointer;padding:18px 40px 18px 20px;font-weight:700;color:var(--blau);
position:relative;list-style:none;font-size:15.5px}
.px-faq summary::-webkit-details-marker{display:none}
.px-faq summary::after{content:"+";position:absolute;right:18px;top:50%;
transform:translateY(-50%);font-size:24px;line-height:1;font-weight:400;color:var(--blau-hell)}
.px-faq details[open] summary::after{content:"\2013"}
.px-faq details>div{padding:0 20px 20px;font-size:.97em}
/* Linkleiste */
.px-links{display:flex;flex-wrap:wrap;gap:10px;margin:1.6em auto 0;justify-content:center}
.px .px-links a{border:1px solid #dde2e8;border-radius:30px;padding:9px 18px;background:#fff;
text-decoration:none;color:var(--text);font-size:.93em}
.px-links a:hover{border-color:var(--blau-hell);color:var(--blau-hell)}
/* Zitatband */
.px-zitat{text-align:center;margin-left:auto;margin-right:auto;
font-size:clamp(19px,2.6vw,25px);line-height:1.5;
font-weight:700;max-width:820px}
/* Siegel */
.px-siegel{display:flex;flex-wrap:wrap;gap:28px;align-items:center;justify-content:center}
.px-siegel img{height:60px;width:auto}
@media(max-width:820px){
.px-split{grid-template-columns:1fr;gap:28px}
/* Auf schmalen Schirmen steht immer erst der Text, dann das Bild. */
.px-split--rechts .px-split__bild{order:2}
.px-split--rechts>div:not(.px-split__bild){order:1}
.px-badge{left:12px;bottom:12px;font-size:11.5px;padding:9px 14px}
}
@media(max-width:600px){
.px{font-size:16px}
.px-sec{padding:40px 16px}
.px a.px-btn,.px .px-btn{display:block;text-align:center;padding:15px 18px;font-size:14.5px}
.px-table,.px-table tbody,.px-table tr,.px-table td{display:block;width:100%}
.px-table thead{display:none}
.px-table tr{border:1px solid var(--rand);border-radius:var(--r);background:#fff;
margin-bottom:12px;padding:6px 0;max-width:100%;overflow:hidden}
.px-table td{border:0;padding:8px 16px;font-size:15px}
.px-table td:first-child{font-weight:700;color:var(--blau);padding-bottom:2px}
.px-table td:last-child{padding-top:0}
.px-grid{gap:14px}
.px-card{padding:20px 22px}
.px-steps li{padding-left:46px;margin-bottom:1.2em}
.px-steps li::before{width:32px;height:32px;font-size:14px}
.px-split{gap:22px}
.px-links{gap:9px;flex-direction:column;align-items:stretch}
.px .px-links a{padding:12px 16px;font-size:14.5px;text-align:center;width:100%}
.px-faq summary{padding:15px 36px 15px 16px;font-size:15px}
.px-faq details>div{padding:0 16px 17px}
.px-leiste{gap:22px}
.px-zitat{font-size:19px}
.px-cta{flex-direction:column;text-align:center;gap:18px}
.px-cta>div{width:100%}
.px-cta h2,.px-cta p{text-align:center}
/* Blocksatz braucht Breite. Auf schmalen Schirmen reisst er Loecher. */
.px p,.px-faq details>div,.px-table td{text-align:left}
.px-hero p,.px-zitat,.px-leiste{text-align:center}
.px-table td{word-break:normal;overflow-wrap:anywhere}
.px-split__bild{min-height:0}
.px-hero__punkte{gap:8px}
.px h2{font-size:22px}
.px h3{font-size:17.5px}
}
/* ---------------------------------------------------------------------
Bewegung · reines CSS
------------------------------------------------------------------ */
.px a,.px-links a{transition:color .18s ease,border-color .18s ease,transform .18s ease}
.px-links a:hover{transform:translateY(-2px)}
.px-card{transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.px-card:hover{transform:translateY(-4px);border-color:#c5d5e8;
box-shadow:0 10px 26px rgba(18,58,107,.10)}
.px-split__bild img{transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.px-split__bild:hover img{transform:scale(1.04)}
.px-btn{transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
.px-btn:hover{transform:translateY(-2px)}
.px-faq summary{transition:color .18s ease}
.px-faq summary:hover{color:var(--blau-hell)}
.px-faq summary::after{transition:transform .25s ease}
.px-faq details[open] summary::after{transform:translateY(-50%) rotate(180deg)}
.px-table tbody tr{transition:background .18s ease}
.px-table tbody tr:hover{background:#fafbfd}
.px-steps li::before{transition:transform .2s ease}
.px-steps li:hover::before{transform:scale(1.08)}
@supports (animation-timeline: view()){
/* Sicherheitsnetz: der letzte Abschnitt einer Seite wird nie animiert,
weil er den Endpunkt der Zeitleiste sonst nicht erreicht. */
.px>section:last-child,.px>section:nth-last-child(2){animation:none !important;opacity:1 !important}
@keyframes px-in{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.px-split,.px-grid,.px-table,.px-steps,.px-faq,.px-leiste,.px-zitat,.px-cta{
animation:px-in linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
}
@media (prefers-reduced-motion: reduce){
.px *,.px *::before,.px *::after{animation:none !important;transition:none !important}
.px-card:hover,.px-btn:hover,.px-links a:hover{transform:none}
.px-split__bild:hover img{transform:none}
}
/* ---------------------------------------------------------------------
Logo-Laufband · reines CSS, kein Swiper, kein JavaScript
Die Liste wird im HTML zweimal ausgegeben, damit der Lauf nahtlos wirkt.
------------------------------------------------------------------ */
.px-band{background:#fff;padding:34px 0;overflow:hidden;position:relative}
.px-band::before,.px-band::after{content:"";position:absolute;top:0;bottom:0;width:90px;z-index:2;
pointer-events:none}
.px-band::before{left:0;background:linear-gradient(90deg,#fff,rgba(255,255,255,0))}
.px-band::after{right:0;background:linear-gradient(270deg,#fff,rgba(255,255,255,0))}
.px-band--grau{background:var(--flaeche)}
.px-band--grau::before{background:linear-gradient(90deg,var(--flaeche),rgba(243,244,248,0))}
.px-band--grau::after{background:linear-gradient(270deg,var(--flaeche),rgba(243,244,248,0))}
.px-band__spur{display:flex;width:max-content;animation:px-lauf 160s linear infinite}
.px-band:hover .px-band__spur{animation-play-state:paused}
.px-band__spur img{height:52px;width:auto;margin:0 42px;flex:none;
filter:grayscale(1);opacity:.62;transition:filter .3s ease,opacity .3s ease}
.px-band__spur img:hover{filter:none;opacity:1}
@keyframes px-lauf{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* Siegelreihe, statisch */
.px-siegel{display:flex;flex-wrap:wrap;gap:32px;align-items:center;justify-content:center;
padding:8px 0}
.px-siegel img{height:74px;width:auto}
@media(max-width:600px){
.px-band__spur img{height:38px;margin:0 26px}
.px-siegel img{height:56px}
.px-band::before,.px-band::after{width:40px}
}
@media (prefers-reduced-motion: reduce){
.px-band__spur{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
.px-band__spur img{margin:10px 20px}
}
/* ---------------------------------------------------------------------
Hero · volle Breite, Hintergrundbild mit blauem Schleier
------------------------------------------------------------------ */
.px-hero{position:relative;padding:86px 22px 76px;color:#fff;text-align:center;
background-size:cover;background-position:center;background-repeat:no-repeat}
.px-hero::before{content:"";position:absolute;inset:0;
background:linear-gradient(rgba(14,45,85,.86),rgba(18,58,107,.9))}
.px-hero__inner{position:relative;z-index:1;max-width:var(--max);margin:0 auto}
.px-hero h1{margin:0;color:#fff;font-size:clamp(28px,4.8vw,44px);line-height:1.18;font-weight:700}
.px-hero p{margin:.8em auto 0;max-width:720px;font-size:clamp(16px,2vw,19px);opacity:.92}
.px-hero__punkte{list-style:none;padding:0;margin:1.5em 0 0;display:flex;flex-wrap:wrap;
gap:10px 30px;justify-content:center;font-size:15.5px}
.px-hero__punkte li{position:relative;padding-left:26px}
.px-hero__punkte li::before{content:"";position:absolute;left:2px;top:.5em;width:9px;height:5px;
border-left:2.5px solid #7fb4ec;border-bottom:2.5px solid #7fb4ec;transform:rotate(-45deg)}
.px-hero a.px-btn{margin-top:1.8em}
.px-hero__siegel{display:flex;flex-wrap:wrap;gap:22px;justify-content:center;margin-top:2.4em}
.px-hero__siegel img{height:78px;width:auto;background:#fff;border-radius:6px;padding:8px 12px}
@media(max-width:600px){
.px-hero{padding:56px 18px 50px}
.px-hero__punkte{flex-direction:column;align-items:flex-start;text-align:left;max-width:320px;
margin-left:auto;margin-right:auto}
.px-hero__siegel img{height:56px}
}
/* ---------------------------------------------------------------------
Rechtstexte · Impressum und Datenschutz
Schmaler Hero ohne Button, engere Lesespalte, kein Blocksatz.
Juristische Absaetze sind lang und verschachtelt, Blocksatz reisst sie auf.
------------------------------------------------------------------ */
.px-hero--schmal{padding:58px 22px 50px}
.px-hero--schmal h1{font-size:clamp(26px,3.6vw,36px)}
.px-hero--schmal p{margin-top:.6em;font-size:clamp(15px,1.8vw,17px)}
@media(max-width:600px){.px-hero--schmal{padding:42px 18px 38px}}
.px-recht{max-width:840px}
.px-sec>.px-recht{margin-left:auto;margin-right:auto}
.px-recht p,.px-recht li{text-align:left;hyphens:manual;-webkit-hyphens:manual}
.px-recht p{margin:0 0 1em}
.px-recht h2{font-size:clamp(20px,2.6vw,25px);margin:2.2em 0 .6em;padding-top:1.1em;
border-top:1px solid var(--rand)}
.px-recht h2:first-child{margin-top:0;padding-top:0;border-top:0}
.px-recht h3{font-size:clamp(17px,2vw,19px);margin:1.7em 0 .35em}
.px-recht h4{font-size:16px;color:var(--blau);margin:1.3em 0 .3em;font-weight:700}
.px-recht address{font-style:normal;line-height:1.85}
.px-recht a{overflow-wrap:anywhere}
.px-recht ul{margin:0 0 1em;padding-left:22px}
.px-recht li{margin-bottom:.3em}
.px-recht--daten{background:#fff;border:1px solid var(--rand);border-radius:var(--r);
padding:26px 28px;margin:0 0 1.8em}
.px-recht--daten p:last-child{margin-bottom:0}
@media(max-width:600px){.px-recht--daten{padding:20px 18px}}
/* Inhaltsverzeichnis fuer lange Rechtstexte */
.px-inhalt{background:var(--flaeche);border-radius:var(--r);padding:22px 26px;margin:0 0 2em}
.px-inhalt b{display:block;color:var(--blau);margin-bottom:.5em;font-size:15px}
.px-inhalt ol{margin:0;padding-left:20px;font-size:15.5px}
.px-inhalt li{margin-bottom:.3em}
.px-inhalt a{text-decoration:none}
.px-inhalt a:hover{text-decoration:underline}
/* ---------------------------------------------------------------------
Durchsetzung
Elementor und Themes bringen eigene Bildregeln mit, die je nach
Ladereihenfolge die Hoehen hier ueberschreiben. Die folgenden Zeilen
sind der einzige Ort in dieser Datei mit !important, und sie wirken
ausschliesslich innerhalb von .px.
------------------------------------------------------------------ */
.px .px-hero__siegel img{height:78px!important;width:auto!important;max-width:none!important}
.px .px-siegel img{height:74px!important;width:auto!important;max-width:none!important}
.px .px-band__spur img{height:52px!important;width:auto!important;max-width:none!important}
.px .px-split__bild img{width:100%!important;height:auto!important;max-width:100%!important}
.px .px-band{overflow:hidden!important}
.px .px-band__spur{display:flex!important;width:max-content!important;flex-wrap:nowrap!important}
@media(max-width:600px){
.px .px-hero__siegel img{height:56px!important}
.px .px-siegel img{height:56px!important}
.px .px-band__spur img{height:38px!important;margin:0 26px!important}
}
/* ---------------------------------------------------------------------
Zentrierung festschreiben
Kurzschreibweisen wie margin:1.6em 0 setzen die Seitenraender auf 0 und
heben damit die Zentrierung aus .px-sec>* auf. Diese Zeilen stehen am
Ende der Datei und stellen sie wieder her.
------------------------------------------------------------------ */
.px-sec>.px-grid,.px-sec>.px-table,.px-sec>.px-steps,.px-sec>.px-check,
.px-sec>.px-links,.px-sec>.px-zitat,.px-sec>.px-faq,.px-sec>.px-leiste,
.px-sec>.px-split,.px-sec>.px-cta,.px-sec>p,.px-sec>h2,.px-sec>h3,
.px-sec>ul,.px-sec>ol,.px-sec>div{margin-left:auto;margin-right:auto}