/* Variante A (30.10.): linke Spalte Anthrazit mit dem Ablauf, Rot nur als Akzent.
   Überschrift und Einleitung stehen rechts über der Frage (Elemente liegen jetzt in .c-pa-haupt). */
body .elementor .c-pa-leiste.c-pa-leiste.c-pa-leiste{background:#232528 !important}
body .elementor .c-pa-leiste.c-pa-leiste.c-pa-leiste::after{display:none}
body .elementor .c-pa-leiste .c-pa-kopftel{border-top-color:rgba(255,255,255,.1) !important}
body .elementor .c-pa-leiste .c-pa-kopftel::before{background-color:#d2202c !important;border-radius:0 !important}
.c-pa-schritte.cpa-an{background:none !important;border:0 !important;padding:0 !important;margin-top:0 !important}
.cpa-vs-kopf{margin:0 !important;gap:0 12px;align-items:center !important}
/* „Ihr Fortschritt“ und „Schritt x von 7“ auf exakt gleicher Höhe: gleiche Schrift, gleiche Zeilenhöhe */
.cpa-vs-kopf span,.cpa-vs-kopf b{font:600 12.5px/16px Inter,system-ui,sans-serif !important;display:block}
.cpa-vs-kopf span{letter-spacing:.12em;color:rgba(255,255,255,.55)}
.cpa-vs-kopf b{color:#fff}
.cpa-vs-kopf i{height:4px;margin:10px 0 18px;background:linear-gradient(#d2202c,#d2202c) 0 0/var(--w,0%) 100% no-repeat,rgba(255,255,255,.12)}
.c-pa-schritte .cpa-vs li,.c-pa-schritte .cpa-vs li:has(.cpa-v.j){margin:0;padding:9px 0;background:none;border-top:1px solid rgba(255,255,255,.08)}
.c-pa-schritte .cpa-vs li::after{display:none !important}
.c-pa-schritte .cpa-vs li:has(.cpa-v.j){border-top-color:#d2202c}
.c-pa-schritte button.cpa-v{grid-template-columns:22px 1fr auto;gap:14px;align-items:baseline}
.c-pa-schritte .cpa-v .p,.c-pa-schritte .cpa-v.f .p,.c-pa-schritte .cpa-v.j .p{width:auto;height:auto;display:block;border:0;background:none;box-shadow:none;font:700 15px/1 "Barlow Condensed",sans-serif;color:rgba(255,255,255,.35)}
.c-pa-schritte .cpa-v .p::before{content:"0"}
.c-pa-schritte .cpa-v.f .p{color:#d2202c}
.c-pa-schritte .cpa-v.j .p{color:#fff}
.c-pa-schritte .cpa-v .t b{padding-top:0;font-size:16px;line-height:1.15;color:rgba(255,255,255,.45)}
.c-pa-schritte .cpa-v.f .t b,.c-pa-schritte .cpa-v.j .t b{color:#fff}
.c-pa-schritte .cpa-v.j .t b::after{content:"";display:inline-block;width:6px;height:6px;margin-left:8px;background:#d2202c;vertical-align:middle}
/* Antworten vollständig – die Spalte ist zugleich die Zusammenfassung der Anfrage */
.c-pa-schritte .cpa-v .t small{color:rgba(255,255,255,.6);display:block}
.c-pa-schritte .cpa-v .e{padding-top:0;color:rgba(255,255,255,.5)}
.c-pa-schritte button.cpa-v.f:hover .e{color:#fff}

/* Überschrift und Einleitung rechts über der Frage, schlicht und klein */
body .elementor .c-pa-haupt>.c-pa-hero-eyebrow,body .elementor .c-pa-haupt>.c-pa-hero-h1,body .elementor .c-pa-haupt>.c-pa-hero-lead{order:-1 !important;grid-column:auto !important}
body .elementor .c-pa-haupt>.c-pa-hero-eyebrow{display:none !important}
body .elementor .c-pa-haupt>.c-pa-hero-h1.c-pa-hero-h1{margin:0 !important;font-size:1.6rem !important;line-height:1 !important;color:#25272a !important}
body .elementor .c-pa-haupt>.c-pa-hero-h1 br{display:none}
body .elementor .c-pa-haupt>.c-pa-hero-lead.c-pa-hero-lead{margin:6px 0 0 !important;padding-bottom:18px;border-bottom:1px solid #e1e3e6;font-size:14.5px !important;line-height:1.5 !important;color:#5a5f66 !important;max-width:none !important}
@media(min-width:1025px){
body .elementor .c-pa-inhalt>.c-pa-haupt.c-pa-haupt.c-pa-haupt{justify-content:flex-start !important}
/* Frage oben bündig, damit „Schritt x von 7“ in jedem Schritt auf derselben Höhe steht */
body .elementor .c-pa-haupt>.c-pa-form{margin-top:0 !important;margin-bottom:auto !important;padding-top:24px}
/* Frage kompakter, damit auch der längste Schritt ohne Scrollen passt */
.cpa-app h2{font-size:clamp(2rem,3.2vw,2.9rem)}
.cpa-hilfe{margin-top:8px;font-size:15px}
.cpa-antw{margin-top:20px}
.cpa-app button.cpa-kachel{padding:14px 16px 13px;gap:10px}
.cpa-kachel svg{width:28px;height:28px}
.cpa-kachel b{font-size:1.2rem}
.cpa-kachel small{margin-top:-6px}
.cpa-app button.cpa-kachel.zeile{padding:11px 16px}
.cpa-nav{margin-top:20px}
.cpa-unter{margin:18px 0 8px}
.cpa-gross input{padding:12px 16px !important}
.cpa-felder2{margin-top:12px}
.cpa-ds{margin-top:14px}
}
.cpa-kachel small .cpa-lph{display:block;margin-top:4px}

@media(max-width:1024px){
 .c-pa-schritte .cpa-vs li,.c-pa-schritte .cpa-vs li:has(.cpa-v.j){padding:0;border:0}
 .c-pa-schritte .cpa-v .p,.c-pa-schritte .cpa-v.f .p,.c-pa-schritte .cpa-v.j .p{width:100%;height:4px;font-size:0;background:rgba(255,255,255,.14)}
 .c-pa-schritte .cpa-v .p::before{content:none}
 .c-pa-schritte .cpa-v.f .p,.c-pa-schritte .cpa-v.j .p{background:#d2202c}
 .cpa-vs-kopf i{display:none}
 .cpa-vs-kopf{margin-bottom:12px !important}
 body .elementor .c-pa-leiste.c-pa-leiste.c-pa-leiste{padding-top:100px !important}
}

/* „Weiter“ bzw. „Anfrage senden“ bleibt immer im Bild: die Knopfzeile klebt am unteren Rand, solange die Frage länger ist */
.cpa-schritt .cpa-nav{position:sticky;bottom:0;z-index:5;padding:14px 0 18px;background:linear-gradient(rgba(243,244,245,0),#f3f4f5 30%)}
/* der Kontaktknopf unten rechts ist hier überflüssig und würde die Knopfzeile verdecken */
.c-kk,.c-kk-schatten{display:none !important}
/* Hinweistext neben den Knöpfen statt darunter, damit die Knopfzeile flach bleibt */
.cpa-schritt .cpa-nav{flex-wrap:nowrap;padding:12px 0 14px}
.cpa-schritt .cpa-nav .cpa-fehlt{flex:1 1 auto;min-width:0;font-size:13.5px;line-height:1.35}
.cpa-schritt .cpa-nav>button,.cpa-schritt .cpa-nav .c-form-submit{flex:none;white-space:nowrap}
@media(max-width:767px){.cpa-schritt .cpa-nav{flex-wrap:wrap}}
/* niedrige Bildschirme: linke Spalte enger, Antworten einzeilig, damit alles ohne Scrollen sichtbar bleibt */
@media(min-width:1025px) and (max-height:820px){
body .elementor .c-pa-leiste.c-pa-leiste.c-pa-leiste{padding-top:100px !important;padding-bottom:24px !important}
.c-pa-schritte .cpa-vs li,.c-pa-schritte .cpa-vs li:has(.cpa-v.j){padding:6px 0}
.c-pa-schritte .cpa-v .t small{font-size:12.5px}
.cpa-vs-kopf i{margin:8px 0 12px}
body .elementor .c-pa-leiste .c-pa-kopftel{margin-top:14px !important;padding-top:14px !important}
body .elementor .c-pa-inhalt>.c-pa-haupt.c-pa-haupt.c-pa-haupt{padding-top:100px !important}
body .elementor .c-pa-haupt>.c-pa-hero-lead.c-pa-hero-lead{padding-bottom:12px}
body .elementor .c-pa-haupt>.c-pa-form{padding-top:14px}
.cpa-app h2{font-size:clamp(1.8rem,2.8vw,2.4rem)}
}

/* hochgeladene Dateien nebeneinander als kleine Karten statt untereinander */
.cpa-app .cpa-upload .c-datei-liste{display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px !important;margin-top:10px}
.cpa-app .cpa-upload .c-datei-karte{display:flex !important;align-items:center;gap:10px !important;min-width:0;margin:0 !important;padding:8px 10px !important}
.cpa-app .cpa-upload .c-datei-bild{width:40px !important;height:40px !important;flex:none}
.cpa-app .cpa-upload .c-datei-bild img{width:100% !important;height:100% !important;object-fit:cover}
.cpa-app .cpa-upload .c-datei-text{min-width:0;flex:1}
.cpa-app .cpa-upload .c-datei-name{display:block;font-size:13px !important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cpa-app .cpa-upload .c-datei-info{font-size:12px !important}
.cpa-app .cpa-upload .c-datei-weg{flex:none}
@media(max-width:767px){.cpa-app .cpa-upload .c-datei-liste{grid-template-columns:1fr 1fr}}
.cpa-kachel small .cpa-lph{margin-top:0}
/* acht Schritte: „Für wen“ ist jetzt Schritt 7 (data-s 6), die Beschreibung Schritt 6 (data-s 5) */
.cpa-schritt[data-s="6"] .cpa-kachel b{white-space:nowrap}
.cpa-schritt[data-s="6"] .cpa-fehlt:not(.rot){display:none}
.cpa-schritt[data-s="5"] .cpa-kachel b{white-space:normal}
.cpa-schritt[data-s="5"] .cpa-fehlt:not(.rot){display:inline}
.cpa-schritt[data-s="5"] .cpa-beschr textarea{min-height:220px}
/* „Fragen?“-Feld: auch ein Klick auf den Hörer ruft an (der Link deckt das ganze Feld ab) */
body .elementor .c-pa-leiste .c-pa-kopftel{position:relative}
body .elementor .c-pa-leiste .c-pa-kopftel a{color:inherit;text-decoration:none}
body .elementor .c-pa-leiste .c-pa-kopftel a::after{content:"";position:absolute;inset:0;z-index:1}
/* sehr große Bildschirme: Inhalt rechts auf lesbare Breite begrenzen und mittig setzen, oben etwas mehr Luft */
@media(min-width:1700px){
html body .elementor .c-pa-haupt>.c-pa-hero-h1.c-pa-hero-h1,html body .elementor .c-pa-haupt>.c-pa-hero-lead.c-pa-hero-lead,html body .elementor .c-pa-haupt>.c-pa-form.c-pa-form{width:100% !important;max-width:1180px !important;margin-left:auto !important;margin-right:auto !important}
body .elementor .c-pa-inhalt>.c-pa-haupt.c-pa-haupt.c-pa-haupt{padding-top:max(118px,calc((100svh - 820px) / 2)) !important}
.cpa-felder,.cpa-tipps,.cpa-upload,.cpa-ds,.cpa-kacheln.cpa-weg{max-width:none !important}
.cpa-app h2{font-size:3.2rem}
}
@media(min-width:2200px){
html body .elementor .c-pa-haupt>.c-pa-hero-h1.c-pa-hero-h1,html body .elementor .c-pa-haupt>.c-pa-hero-lead.c-pa-hero-lead,html body .elementor .c-pa-haupt>.c-pa-form.c-pa-form{max-width:1400px !important}
.cpa-app{font-size:18px}
.cpa-app h2{font-size:3.8rem}
.cpa-hilfe{font-size:17px}
.cpa-app button.cpa-kachel{padding:20px 22px 19px}
.cpa-kachel b{font-size:1.45rem}
.cpa-kachel svg{width:34px;height:34px}
}
/* Bewerbung: zwei Kacheln je Zeile für die Stellenauswahl */
.cpa-sp2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:767px){.cpa-sp2{grid-template-columns:1fr}}
/* Bewerbung: zwei Upload-Felder nebeneinander – Lebenslauf (Pflicht) und Zeugnisse (freiwillig) */
.cpa-upload2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.cpa-up{min-width:0;display:flex;flex-direction:column}
.cpa-up-t{display:flex;align-items:center;gap:10px;margin:0 0 10px;font-size:15px;color:#25272a}
.cpa-up-t svg{width:22px;height:22px;flex:none;color:#d2202c}
.cpa-up-t b{font-weight:700}
.cpa-up-t small{font-size:13px;color:#5a5f66}
.cpa-up > .cpa-feld{flex:1}
.cpa-app .cpa-upload2 .c-datei-liste{grid-template-columns:1fr}
@media(max-width:767px){.cpa-upload2{grid-template-columns:1fr}}
/* Überschrift („Projekt anfragen“ / „Ihre Bewerbung“) groß oben auf Höhe der Kopfzeile, damit klar ist, wo man ist */
@media(min-width:1025px){
html body .elementor .c-pa-inhalt>.c-pa-haupt.c-pa-haupt.c-pa-haupt{padding-top:12px !important}
html body .elementor .c-pa-haupt>.c-pa-hero-h1.c-pa-hero-h1.c-pa-hero-h1{font-size:2.9rem !important;line-height:48px !important;padding-right:90px}
html body .elementor .c-pa-haupt>.c-pa-hero-lead.c-pa-hero-lead.c-pa-hero-lead{margin-top:8px !important}
}
@media(max-width:1024px){html body .elementor .c-pa-haupt>.c-pa-hero-h1.c-pa-hero-h1.c-pa-hero-h1{font-size:2.2rem !important}}
/* „Fragen?“-Feld: zwei Zeilen mit eigenem Symbol – Hörer vor der Nummer, Briefumschlag vor der E-Mail-Adresse */
body .elementor .c-pa-leiste .c-pa-kopftel.c-pa-kopftel{padding-left:0 !important}
body .elementor .c-pa-leiste .c-pa-kopftel.c-pa-kopftel::before{display:none !important}
body .elementor .c-pa-leiste .c-pa-kopftel a{position:relative;z-index:2;display:flex !important;align-items:center;gap:12px;margin-top:10px}
body .elementor .c-pa-leiste .c-pa-kopftel a::after{content:none !important}
body .elementor .c-pa-leiste .c-pa-kopftel a::before{content:"";flex:none;width:36px;height:36px;background:#d2202c center/18px no-repeat}
body .elementor .c-pa-leiste .c-pa-kopftel a[href^="tel"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3h4l2 5-2.5 1.5a11 11 0 0 0 6 6L16 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 5a2 2 0 0 1 2-2'/%3E%3C/svg%3E")}
body .elementor .c-pa-leiste .c-pa-kopftel a[href^="mailto"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='1'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E")}
body .elementor .c-pa-leiste .c-pa-kopftel a[href^="mailto"]{font-size:15px;font-weight:600;color:#fff}
body .elementor .c-pa-leiste .c-pa-kopftel a:hover b,body .elementor .c-pa-leiste .c-pa-kopftel a[href^="mailto"]:hover{text-decoration:underline}