/* Allura — self-hosted (was Google Fonts @import which gets blocked by theme override) */
@font-face {
font-family: 'Allura';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('fonts/allura-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Allura';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('fonts/allura-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/**
* Karriere-Unterseite: Kontakt & Ansprechpartner (Post 999642)
* URL: /karriere/kontakt/
* Sections: HERO / SIGNATURE / FAQ / KONTAKT
*
* Refactored: All styling lives here. Module bodies contain only basic HTML
* (h1/h2/h3/h4/p/strong/em/a). Icons & decorations injected via ::before/::after
* with SVG data-URIs.
*/
/* =====================================================
HERO
===================================================== */
.picard-kontakt-hero .picard-hero-eyebrow p {
margin: 0 0 10px 0;
font: 700 13px/1 "Roboto", sans-serif;
letter-spacing: 3px;
text-transform: uppercase;
color: #C6041F;
}
.picard-kontakt-hero .picard-hero-h1 h1 {
margin: 0 0 16px 0;
font: 700 52px/1.1em "Roboto", sans-serif;
color: #ffffff;
}
.picard-kontakt-hero .picard-hero-intro p {
margin: 0 0 32px 0;
max-width: 720px;
font: 400 18px/1.6em "Roboto", sans-serif;
color: rgba(255, 255, 255, 0.85);
}
@media (max-width: 980px) {
.picard-kontakt-hero .picard-hero-h1 h1 { font-size: 42px; }
}
@media (max-width: 600px) {
.picard-kontakt-hero .picard-hero-h1 h1 { font-size: 32px; }
}
/* HERO CTA Button — Divi-icon hard-disabled */
.picard-kontakt-hero .et_pb_button.picard-hero-cta::after,
.picard-kontakt-hero .et_pb_button.picard-hero-cta::before,
.picard-kontakt-hero .et_pb_button.picard-hero-cta:hover::after,
.picard-kontakt-hero .et_pb_button.picard-hero-cta:hover::before {
display: none !important;
content: none !important;
opacity: 0 !important;
width: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
/* Hero CTA — pixel-perfect Picard-Pattern (matches Startseiten-Button + alle Karriere-CTAs) */
.picard-kontakt-hero .et_pb_button.picard-hero-cta,
.picard-kontakt-hero .et_pb_button.picard-hero-cta:visited {
background-color: #C6041F !important;
color: #ffffff !important;
border: 0 !important;
padding: 0.3em 1em !important;
font: 600 16px/1.7em Roboto, sans-serif !important;
border-radius: 3px !important;
letter-spacing: 0 !important;
transition: background-color 300ms !important;
}
.picard-kontakt-hero .et_pb_button.picard-hero-cta:hover {
background-color: #f80527 !important;
padding: 0.3em 1em !important;
color: #ffffff !important;
}
/* =====================================================
SIGNATURE — Editorial Intro (single-column stack)
===================================================== */
.picard-kontakt-signature {
position: relative;
overflow: hidden;
padding-top: 120px !important;
padding-bottom: 110px !important;
background: #ffffff;
}
.picard-kontakt-signature > .et_pb_row { position: relative; z-index: 1; }
/* Intro row — single column, 720px max */
.picard-kontakt-signature .picard-sig-intro {
position: relative;
text-align: left !important;
padding-left: 0 !important;
}
.picard-kontakt-signature .picard-sig-intro > .et_pb_column {
display: flex;
flex-direction: column;
gap: 20px;
max-width: 100%;
}
.picard-kontakt-signature .picard-sig-intro > .et_pb_column > .et_pb_module {
margin: 0 !important;
}
/* Eyebrow (red dot bullet + label) */
.picard-kontakt-signature .picard-sig-eyebrow p {
display: inline-flex;
align-items: center;
gap: 14px;
margin: 0;
font: 700 13px/1 "Roboto", sans-serif;
letter-spacing: 0.32em;
text-transform: uppercase;
color: #C6041F;
}
/* H2 — Roboto base + Roboto strong red */
.picard-kontakt-signature .picard-sig-h2 { margin: 4px 0 0 0 !important; }
.picard-kontakt-signature .picard-sig-h2 h2 {
margin: 0;
font: 400 clamp(34px, 4.4vw, 52px)/1.12em "Roboto", sans-serif !important;
letter-spacing: -0.5px;
color: #0B0B0B;
max-width: 22ch;
}
.picard-kontakt-signature .picard-sig-h2 h2 strong {
font-weight: 900;
color: #C6041F;
}
/* Lead */
.picard-kontakt-signature .picard-sig-leadp { margin: 14px 0 0 0 !important; }
.picard-kontakt-signature .picard-sig-leadp p {
margin: 0;
font: 400 17px/1.75em "Roboto", sans-serif;
color: #475569;
}
.picard-kontakt-signature .picard-sig-leadp em {
font-style: italic;
color: inherit;
font-weight: 400;
}
/* =====================================================
SIGNATURE — 2-Col Persons row (Nele + Antonia)
===================================================== */
.picard-kontakt-signature .picard-sig-persons-row {
display: flex;
position: relative;
margin-top: 20px;
}
.picard-kontakt-signature .picard-sig-persons-row .picard-sig-pcol {
display: flex;
flex-direction: column;
position: relative;
}
.picard-kontakt-signature .picard-sig-persons-row .picard-sig-pcol::before {
content: "\201E";
position: absolute;
top: -78px;
left: -28px;
font-family: "Roboto", sans-serif;
font-weight: 900;
font-size: 180px;
line-height: 1;
color: rgba(198, 4, 31, 0.14);
z-index: 0;
pointer-events: none;
user-select: none;
}
.picard-kontakt-signature .picard-sig-pcol > .et_pb_module { position: relative; z-index: 1; }
/* Rolle */
.picard-kontakt-signature .picard-sig-role { margin-bottom: 18px !important; }
.picard-kontakt-signature .picard-sig-role p {
margin: 0;
font: 700 12px/1 "Roboto", sans-serif;
letter-spacing: 3px;
text-transform: uppercase;
color: #C6041F;
}
/* Statement H2 */
.picard-kontakt-signature .picard-sig-statement { margin-bottom: 20px !important; }
.picard-kontakt-signature .picard-sig-statement h2 {
font-family: "Roboto", sans-serif !important;
font-weight: 400 !important;
font-size: 34px;
line-height: 1.18em;
letter-spacing: -0.4px;
color: #0B0B0B;
margin: 0;
}
.picard-kontakt-signature .picard-sig-statement h2 strong {
font-weight: 900 !important;
color: #C6041F !important;
}
/* Lead */
.picard-kontakt-signature .picard-sig-lead { margin-bottom: 32px !important; }
.picard-kontakt-signature .picard-sig-lead p {
margin: 0;
color: #475569;
font-size: 16px;
line-height: 1.75em;
font-family: "Roboto", sans-serif;
}
/* Portrait Placeholder — pure CSS reproduction */
.picard-kontakt-signature .picard-sig-placeholder-wrap {
margin-bottom: 32px !important;
}
.picard-kontakt-signature .picard-sig-placeholder-wrap .et_pb_text_inner {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
max-width: 220px;
aspect-ratio: 4 / 5;
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%23C6041F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 4-6 8-6s8 2 8 6'/%3E%3C/svg%3E") center 28% / 28px no-repeat,
radial-gradient(circle at center 28%, rgba(198, 4, 31, 0.07) 0 28px, transparent 28px),
#fdfcfa;
border: 1.5px dashed #d1d5db;
border-radius: 12px;
padding: 76px 16px 16px;
transition: border-color 250ms ease, color 250ms ease, box-shadow 250ms ease;
}
.picard-kontakt-signature .picard-sig-placeholder-wrap:hover .et_pb_text_inner {
border-color: #C6041F;
box-shadow: 0 8px 20px rgba(198, 4, 31, 0.08);
}
.picard-kontakt-signature .picard-sig-placeholder-wrap p {
margin: 0;
text-align: center;
font-family: "Roboto", sans-serif;
}
.picard-kontakt-signature .picard-sig-placeholder-wrap p:nth-of-type(1) {
font-weight: 600;
font-size: 13px;
line-height: 1.2;
color: #6b7280;
}
.picard-kontakt-signature .picard-sig-placeholder-wrap p:nth-of-type(2) {
font-weight: 400;
font-size: 10px;
line-height: 1.2;
color: #9ca3af;
letter-spacing: 1.5px;
text-transform: uppercase;
}
/* Sigrow — handwriting + motto, 2 stacked p tags */
.picard-kontakt-signature .picard-sig-sigrow { margin-top: auto; }
.picard-kontakt-signature .picard-sig-sigrow .et_pb_text_inner {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
padding-top: 22px;
border-top: 1px solid #e5e7eb;
}
.picard-kontakt-signature .picard-sig-sigrow p { margin: 0; }
.picard-kontakt-signature .picard-sig-sigrow p:nth-of-type(1) {
font-family: "Allura", cursive !important;
font-weight: 400 !important;
font-size: 54px;
line-height: 1;
color: #0B0B0B;
letter-spacing: 0.5px;
}
.picard-kontakt-signature .picard-sig-sigrow p:nth-of-type(2) {
font-family: "Roboto", sans-serif;
font-weight: 700;
font-size: 12px;
letter-spacing: 3px;
text-transform: uppercase;
color: #C6041F;
}
/* Persons row mobile */
@media (max-width: 980px) {
.picard-kontakt-signature .picard-sig-persons-row { flex-direction: column !important; }
.picard-kontakt-signature .picard-sig-pcol { margin-bottom: 60px !important; }
.picard-kontakt-signature .picard-sig-pcol:last-child { margin-bottom: 0 !important; }
.picard-kontakt-signature .picard-sig-statement h2 { font-size: 28px; }
}
@media (max-width: 600px) {
.picard-kontakt-signature .picard-sig-statement h2 { font-size: 26px; }
.picard-kontakt-signature .picard-sig-sigrow p:nth-of-type(1) { font-size: 46px; }
.picard-kontakt-signature .picard-sig-sigrow p:nth-of-type(2) { font-size: 11px; letter-spacing: 2.5px; }
.picard-kontakt-signature .picard-sig-placeholder-wrap .et_pb_text_inner { max-width: 200px; }
}
/* =====================================================
FAQ
===================================================== */
.picard-kontakt-faq {
position: relative;
overflow: hidden;
}
/* "?" decoration — Allura, consolidated 2026-04-29 (only the last of 3 redeclarations was effective) */
.picard-kontakt-faq::before {
content: "?";
position: absolute;
top: 30px;
right: 280px;
font-family: "Allura", cursive;
font-weight: 400;
font-size: 140px;
line-height: 1;
color: rgba(198, 4, 31, 0.10);
pointer-events: none;
user-select: none;
z-index: 0;
transform: rotate(-6deg);
}
.picard-kontakt-faq::after {
content: "?";
position: absolute;
top: 60px;
right: 150px;
font-family: "Allura", cursive;
font-weight: 400;
font-size: 220px;
line-height: 1;
color: rgba(198, 4, 31, 0.12);
pointer-events: none;
user-select: none;
z-index: 0;
transform: rotate(-4deg);
}
/* Third (largest) ?: attach to inner row that has its own ::before slot? Use the row ::after */
.picard-kontakt-faq > .et_pb_row:first-child::after {
content: "?";
position: absolute;
top: -20px;
right: -30px;
font-family: "Allura", cursive;
font-weight: 400;
font-size: 340px;
line-height: 1;
color: rgba(198, 4, 31, 0.14);
pointer-events: none;
user-select: none;
z-index: 0;
transform: rotate(-2deg);
/* override Divi clearfix defaults */
visibility: visible !important;
width: auto !important;
height: auto !important;
display: block !important;
clear: none !important;
}
.picard-kontakt-faq > .et_pb_row:first-child { position: relative; }
.picard-kontakt-faq > .et_pb_row { position: relative; z-index: 1; }
.picard-kontakt-faq .picard-faq-eyebrow p {
margin: 0 0 14px 0;
text-align: center;
font: 700 13px/1 "Roboto", sans-serif;
letter-spacing: 3px;
text-transform: uppercase;
color: #C6041F;
}
.picard-kontakt-faq .picard-faq-h2 h2 {
margin: 0;
text-align: center;
font: 700 32px/1.2em "Roboto", sans-serif;
letter-spacing: -0.5px;
color: #111827;
}
.picard-kontakt-faq .picard-faq-intro {
margin-bottom: 56px !important;
}
.picard-kontakt-faq .picard-faq-intro p {
margin: 14px auto 0;
text-align: center;
max-width: 640px;
font: 400 17px/1.6em "Roboto", sans-serif;
color: #475569;
}
/* CSS counter for accordion items (auto-numbered 01, 02, ...) */
.picard-kontakt-faq .et_pb_row:nth-of-type(2) {
counter-reset: faqitem;
}
.picard-kontakt-faq .picard-faq-accordion .et_pb_toggle {
counter-increment: faqitem;
padding-left: 70px !important;
}
.picard-kontakt-faq .picard-faq-accordion .et_pb_toggle::before {
content: counter(faqitem, decimal-leading-zero);
position: absolute;
left: 22px;
/* pin chip to the question line - top:50% centered it on the whole card,
which put it mid-answer when the toggle is open (overlap on mobile) */
top: 26px;
font: 700 13px/1 "Roboto", sans-serif;
letter-spacing: 0.1em;
color: #C6041F;
background: rgba(198, 4, 31, 0.08);
padding: 4px 8px;
border-radius: 4px;
transition: background .25s, color .25s;
}
.picard-kontakt-faq .picard-faq-accordion .et_pb_toggle:hover::before,
.picard-kontakt-faq .picard-faq-accordion .et_pb_toggle.et_pb_toggle_open::before {
background: #C6041F;
color: #ffffff;
}
.picard-kontakt-faq .picard-faq-accordion.et_pb_accordion {
background: transparent; border: 0; box-shadow: none; padding: 0;
}
.picard-kontakt-faq .picard-faq-accordion .et_pb_toggle {
background: #ffffff !important;
border: 1px solid #e5e7eb !important;
border-radius: 12px !important;
padding: 22px 60px 22px 70px !important;
margin-bottom: 10px !important;
transition: border-color 200ms ease, box-shadow 200ms ease;
position: relative !important;
}
.picard-kontakt-faq .picard-faq-accordion .et_pb_toggle:hover {
border-color: #C6041F !important;
box-shadow: 0 6px 18px rgba(198, 4, 31, 0.08);
}
.picard-kontakt-faq .picard-faq-accordion .et_pb_toggle.et_pb_toggle_open {
background: #ffffff !important;
border-color: #C6041F !important;
box-shadow: 0 8px 22px rgba(198, 4, 31, 0.10);
}
.picard-kontakt-faq .picard-faq-accordion .et_pb_toggle_title {
margin: 0 !important; padding-right: 0 !important;
font: 600 18px/1.4 "Roboto", sans-serif !important;
color: #111827 !important; cursor: pointer;
transition: color 200ms ease;
position: static !important;
}
.picard-kontakt-faq .picard-faq-accordion .et_pb_toggle:hover .et_pb_toggle_title,
.picard-kontakt-faq .picard-faq-accordion .et_pb_toggle_open .et_pb_toggle_title {
color: #C6041F !important;
}
.picard-kontakt-faq .picard-faq-accordion .et_pb_toggle_title::before {
position: absolute !important;
right: 26px !important;
top: 50% !important;
margin-top: 0 !important;
transform: translateY(-50%) !important;
color: #C6041F !important;
font-size: 24px !important;
line-height: 1 !important;
transition: transform 250ms ease, color 200ms ease;
}
.picard-kontakt-faq .picard-faq-accordion .et_pb_toggle_open .et_pb_toggle_title::before {
transform: translateY(-50%) rotate(180deg) !important;
}
.picard-kontakt-faq .picard-faq-accordion .et_pb_toggle_content { padding-top: 18px !important; color: #374151 !important; }
.picard-kontakt-faq .picard-faq-accordion .et_pb_toggle_content p { margin: 0 !important; font-size: 16px !important; line-height: 1.75em !important; }
.picard-kontakt-faq .picard-faq-accordion .et_pb_toggle_content a { color: #C6041F; text-decoration: underline; }
.picard-kontakt-faq .picard-faq-accordion .et_pb_toggle_content a:hover { color: #f80527; }
@media (max-width: 980px) {
.picard-kontakt-faq .picard-faq-accordion .et_pb_toggle { padding: 18px 52px 18px 62px !important; }
.picard-kontakt-faq .picard-faq-accordion .et_pb_toggle_title { font-size: 16px !important; }
.picard-kontakt-faq .picard-faq-accordion .et_pb_toggle::before { top: 19px; }
}
/* =====================================================
KONTAKT (bottom) — Personen + Form
===================================================== */
.picard-karriere-kontakt-row { display: flex !important; align-items: stretch !important; }
.picard-karriere-kontakt-row .et_pb_column { display: flex !important; flex-direction: column !important; }
/* Left column: 2-col grid for the 2 person cards (eyebrow/h2/intro span both) */
/* Override Divi column flex with grid (specificity .row .col beats .col-flex) */
.picard-karriere-kontakt-row .picard-karriere-kontakt-left {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
flex-direction: row !important;
gap: 20px;
align-content: start;
align-items: stretch !important;
}
.picard-karriere-kontakt-row .picard-karriere-kontakt-left > .picard-karriere-person {
align-self: stretch;
display: flex;
flex-direction: column;
height: 100%;
}
.picard-karriere-kontakt-row .picard-karriere-kontakt-left > .picard-karriere-person > .et_pb_text_inner {
display: flex;
flex-direction: column;
flex: 1 1 auto;
}
.picard-karriere-kontakt-row .picard-karriere-kontakt-left > .et_pb_module:not(.picard-karriere-person) {
grid-column: 1 / -1;
}
/* Bottom Eyebrow / H2 / Intro */
/* Override Divi default text-module bottom margin for tight vertical rhythm */
.picard-karriere-kontakt-left > .picard-kontakt-bottom-eyebrow,
.picard-karriere-kontakt-left > .picard-kontakt-bottom-h2,
.picard-karriere-kontakt-left > .picard-kontakt-bottom-intro {
margin-bottom: 0 !important;
}
.picard-karriere-kontakt-left .picard-kontakt-bottom-eyebrow p {
margin: 0 0 8px 0;
font: 700 13px/1 "Roboto", sans-serif;
letter-spacing: 3px;
text-transform: uppercase;
color: #C6041F;
}
.picard-karriere-kontakt-left .picard-kontakt-bottom-h2 h2 {
margin: 0 0 12px 0;
font: 700 28px/1.15em "Roboto", sans-serif;
letter-spacing: -0.5px;
color: #0F172A;
}
.picard-karriere-kontakt-left .picard-kontakt-bottom-intro p {
margin: 0 0 28px 0;
font: 400 16px/1.7em "Roboto", sans-serif;
color: #3f4756;
max-width: 48ch;
}
/* Person card */
.picard-karriere-kontakt-left .picard-karriere-person {
background: #F8FAFC;
padding: 28px 22px 24px;
border: 1px solid #E5E7EB;
text-align: center;
position: relative;
transition: transform .3s, box-shadow .3s, border-color .3s;
overflow: hidden;
}
.picard-karriere-kontakt-left .picard-karriere-person::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: 0;
height: 3px;
background: #C6041F;
transform: scaleX(0);
transform-origin: left;
transition: transform .4s;
}
.picard-karriere-kontakt-left .picard-karriere-person:hover {
transform: translateY(-4px);
box-shadow: 0 16px 32px -16px rgba(15, 23, 42, .16);
border-color: #fff;
}
.picard-karriere-kontakt-left .picard-karriere-person:hover::after { transform: scaleX(1); }
/* Avatar circle (CSS-only, replaces former SVG-in-HTML) */
.picard-karriere-kontakt-left .picard-karriere-person .et_pb_text_inner::before {
content: "";
display: block;
width: 96px;
height: 96px;
border-radius: 50%;
margin: 0 auto 16px;
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.85)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") center/40px no-repeat,
linear-gradient(135deg, #cbd2d9 0%, #8a94a0 100%);
}
/* Card content (h4, role p, links) */
.picard-karriere-kontakt-left .picard-karriere-person h4 {
margin: 0 0 6px 0;
font: 700 17px/1.2 "Roboto", sans-serif;
color: #0F172A;
}
.picard-karriere-kontakt-left .picard-karriere-person p {
margin: 0 0 8px 0;
font-family: "Roboto", sans-serif;
line-height: 1.4;
}
/* Role (1st p) */
.picard-karriere-kontakt-left .picard-karriere-person p:nth-of-type(1) {
margin-bottom: 16px;
font: 700 11px/1 "Roboto", sans-serif;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #C6041F;
}
/* Tel + Mail (links) */
.picard-karriere-kontakt-left .picard-karriere-person p:nth-of-type(2),
.picard-karriere-kontakt-left .picard-karriere-person p:nth-of-type(3) {
margin: 0;
}
.picard-karriere-kontakt-left .picard-karriere-person p a {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: #3f4756;
line-height: 1.25;
text-decoration: none;
transition: color .25s;
}
.picard-karriere-kontakt-left .picard-karriere-person p a:hover { color: #C6041F; }
/* Phone icon (2nd p, before ) */
.picard-karriere-kontakt-left .picard-karriere-person p:nth-of-type(2) a::before {
content: "";
flex-shrink: 0;
width: 14px;
height: 14px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C6041F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center/contain no-repeat;
}
/* Mail icon (3rd p, before ) */
.picard-karriere-kontakt-left .picard-karriere-person p:nth-of-type(3) a::before {
content: "";
flex-shrink: 0;
width: 14px;
height: 14px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C6041F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='16' x='2' y='4' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E") center/contain no-repeat;
}
/* Right column: Form Eyebrow + H3 + CF7 */
.picard-karriere-kontakt-right .picard-kontakt-form-eyebrow p {
margin: 0 0 6px 0;
font: 700 13px/1 "Roboto", sans-serif;
letter-spacing: 3px;
text-transform: uppercase;
color: #C6041F;
}
.picard-karriere-kontakt-right .picard-kontakt-form-h3 h3 {
margin: -9px 0 0 0;
font: 700 22px/1.25em "Roboto", sans-serif;
color: #0F172A;
padding-top: 0px;
}
/* CF7 form styling (unchanged from before) */
.picard-karriere-kontakt .wpcf7 { margin-top: 18px; }
.picard-karriere-kontakt .wpcf7-form > p { margin: 0 0 10px; }
.picard-karriere-kontakt .wpcf7-form > p:last-of-type { margin-bottom: 0; }
.picard-karriere-kontakt .wpcf7-form br { display: none; }
.picard-karriere-kontakt .form-cell { display: block; }
.picard-karriere-kontakt .form-control,
.picard-karriere-kontakt input[type="text"].wpcf7-form-control,
.picard-karriere-kontakt input[type="email"].wpcf7-form-control,
.picard-karriere-kontakt input[type="tel"].wpcf7-form-control,
.picard-karriere-kontakt textarea.wpcf7-form-control {
width: 100%;
padding: 13px 16px;
border: 1px solid #D1D5DB;
border-radius: 0;
background: #fff;
font-family: 'Roboto', sans-serif;
font-size: 15px;
color: #0F172A;
transition: border-color .25s, box-shadow .25s;
box-sizing: border-box;
line-height: 1.4;
display: block;
}
.picard-karriere-kontakt .form-control::placeholder,
.picard-karriere-kontakt .wpcf7-form-control::placeholder {
color: #9CA3AF;
opacity: 1;
font-family: 'Roboto', sans-serif;
font-size: 15px;
}
.picard-karriere-kontakt .form-control:focus,
.picard-karriere-kontakt .wpcf7-form-control:focus {
outline: none;
border-color: #C6041F;
box-shadow: 0 0 0 3px rgba(198, 4, 31, .12);
}
.picard-karriere-kontakt textarea.form-control,
.picard-karriere-kontakt textarea.wpcf7-form-control {
min-height: 60px;
resize: vertical;
}
.picard-karriere-kontakt .karriere-form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin: 0 0 10px;
}
.picard-karriere-kontakt .karriere-form-grid > p { display: contents; margin: 0; }
.picard-karriere-kontakt .karriere-form-grid .form-cell { display: block; margin: 0; }
.picard-karriere-kontakt .form-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
flex-wrap: wrap;
margin: 12px 0 4px;
}
.picard-karriere-kontakt .form-footer > p { display: contents; }
.picard-karriere-kontakt .akzeptieren-form { margin: 0; flex: 1 1 auto; text-align: left; }
.picard-karriere-kontakt .akzeptieren-form > p { margin: 0; display: inline; }
.picard-karriere-kontakt .akzeptieren-form .wpcf7-form-control-wrap,
.picard-karriere-kontakt .akzeptieren-form .wpcf7-acceptance,
.picard-karriere-kontakt .akzeptieren-form .wpcf7-list-item { display: inline; margin: 0; }
.picard-karriere-kontakt .akzeptieren-form .wpcf7-list-item label {
display: inline-flex;
align-items: flex-start;
gap: 8px;
cursor: pointer;
font-size: 13px;
color: #3f4756;
line-height: 1.4;
text-align: left;
}
.picard-karriere-kontakt .akzeptieren-form .wpcf7-list-item-label { display: inline; }
.picard-karriere-kontakt .akzeptieren-form input[type="checkbox"] {
width: 16px;
height: 16px;
flex-shrink: 0;
accent-color: #C6041F;
cursor: pointer;
margin: 1px 0 0;
}
.picard-karriere-kontakt .akzeptieren-form a { color: #C6041F; text-decoration: underline; }
.picard-karriere-kontakt .akzeptieren-form a:hover { color: #f80527; }
.picard-karriere-kontakt .form-hint {
font-size: 12px;
color: #9CA3AF;
font-weight: 400;
margin: 0;
flex: 1 1 200px;
}
.picard-karriere-kontakt .wpcf7-submit {
background: #C6041F !important;
color: #fff !important;
border: 0 !important;
border-radius: 0 !important;
padding: 13px 28px !important;
font-family: 'Roboto', sans-serif !important;
font-weight: 600 !important;
font-size: 16px !important;
cursor: pointer;
transition: background .3s;
letter-spacing: 0 !important;
text-transform: none !important;
line-height: 1.4em !important;
margin-top: 14px;
background-image: none !important;
}
.picard-karriere-kontakt .wpcf7-submit:hover {
background: #f80527 !important;
color: #fff !important;
padding: 13px 28px !important;
border: 0 !important;
background-image: none !important;
}
.picard-karriere-kontakt .wpcf7-submit::before,
.picard-karriere-kontakt .wpcf7-submit::after,
.picard-karriere-kontakt .wpcf7-submit:hover::before,
.picard-karriere-kontakt .wpcf7-submit:hover::after {
display: none !important;
content: none !important;
}
.picard-karriere-kontakt .wpcf7-not-valid-tip {
color: #C6041F !important;
font-size: 12px !important;
font-weight: 600;
margin-top: 4px;
}
.picard-karriere-kontakt .wpcf7-response-output {
margin: 18px 0 0 !important;
border: 1px solid #D1D5DB !important;
padding: 12px 14px !important;
font-size: 14px;
}
.picard-karriere-kontakt .wpcf7 form.sent .wpcf7-response-output {
border-color: #22C55E !important;
background: #F0FDF4;
color: #15803D;
}
.picard-karriere-kontakt .wpcf7 form.invalid .wpcf7-response-output,
.picard-karriere-kontakt .wpcf7 form.failed .wpcf7-response-output {
border-color: #C6041F !important;
background: #FEF2F2;
color: #991B1B;
}
.picard-karriere-kontakt .wpcf7-spinner { margin: 0 0 0 12px; }
/* KONTAKT mobile */
@media (max-width: 980px) {
.picard-karriere-kontakt-row { flex-direction: column !important; }
.picard-karriere-kontakt-left { padding: 0 !important; margin-bottom: 48px !important; }
}
@media (max-width: 480px) {
.picard-karriere-kontakt-left { grid-template-columns: 1fr; }
.picard-karriere-kontakt .karriere-form-grid { grid-template-columns: 1fr; }
}
/* ============================================================================
NELE-BATCH 2026-06-24 Runde 2 — Kontakt-Seite Signature + Ansprechpartner
============================================================================ */
/* #2/#3 — dekoratives Anfuehrungszeichen entfernen (passte nicht mehr + verschob Absatz-Alignment) */
.picard-kontakt-signature .picard-sig-persons-row .picard-sig-pcol::before{content:none !important;}
/* #4 — Signatur + leichte Linie direkt nach dem Text (nicht ans Spalten-Ende schieben) */
.picard-kontakt-signature .picard-sig-sigrow{margin-top:24px !important;}
/* #5 — Placeholder oben: Abstand nach unten zum Statement */
.picard-kontakt-signature .picard-sig-placeholder-wrap{margin:8px 0 36px 0 !important;}
/* #6 — Bottom-Ansprechpartner: kombinierte Team-Kachel statt 2 Personen-Karten (analog andere Seiten, ohne Tel/Mail) */
.picard-karriere-kontakt-row .picard-karriere-kontakt-left{display:flex !important;flex-direction:column !important;grid-template-columns:none !important;gap:0 !important;align-content:start;}
.kontakt-team-card{background:#F8FAFC;border:1px solid #E5E7EB;border-radius:12px;overflow:hidden;position:relative;transition:box-shadow .3s,border-color .3s;margin-top:4px;}
.kontakt-team-card:hover{box-shadow:0 18px 36px -18px rgba(15,23,42,.18);border-color:#fff;}
.kontakt-team-card::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:#C6041F;z-index:2;}
.ktc-photo-ph{aspect-ratio:16/9;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;color:#fff;text-align:center;background:linear-gradient(135deg,#cbd2d9 0%,#8a94a0 100%);}
.ktc-photo-ph svg{width:46px;height:46px;opacity:.92;}
.ktc-photo-ph span{font:600 11px/1 "Roboto",sans-serif;letter-spacing:.16em;text-transform:uppercase;opacity:.92;}
.ktc-people{display:grid;grid-template-columns:1fr 1fr;}
.ktc-person{padding:22px 18px;text-align:center;}
.ktc-person + .ktc-person{border-left:1px solid #E5E7EB;}
.ktc-person h4{margin:0 0 6px;font:700 16px/1.2 "Roboto",sans-serif;color:#0F172A;}
.ktc-person .ktc-role{display:block;margin:0;font:700 11px/1.3 "Roboto",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#C6041F;}
@media(max-width:600px){.ktc-people{grid-template-columns:1fr;}.ktc-person + .ktc-person{border-left:0;border-top:1px solid #E5E7EB;}}
/* === ENDE NELE-BATCH 2026-06-24 R2 === */
/* ============================================================================
NELE-BATCH 2026-06-24 Runde 3 — Bild+Signatur als ein Block, breites Teamfoto
============================================================================ */
/* Placeholder = breites 16:9 Teamfoto (analog Bottom-Team-Kachel), statt schmalem Hochformat */
.picard-kontakt-signature .picard-sig-placeholder-wrap{margin:8px 0 0 0 !important;}
.picard-kontakt-signature .picard-sig-placeholder-wrap .et_pb_text_inner{
max-width:640px !important; width:100% !important; aspect-ratio:16/9 !important;
display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; gap:10px !important;
background:linear-gradient(135deg,#cbd2d9 0%,#8a94a0 100%) !important;
border:0 !important; border-radius:12px 12px 0 0 !important; padding:0 !important;
}
.picard-kontakt-signature .picard-sig-placeholder-wrap .et_pb_text_inner::before{
content:""; width:52px; height:52px; opacity:.92;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E") center/contain no-repeat;
}
.picard-kontakt-signature .picard-sig-placeholder-wrap p:nth-of-type(1){
color:#fff !important; font:600 11px/1 "Roboto",sans-serif !important; letter-spacing:.16em !important; text-transform:uppercase !important; opacity:.92;
}
/* Signatur direkt unter dem Bild = ein Block (gleiche Breite, leichte Trennlinie oben) */
.picard-kontakt-signature .picard-sig-sigrow{margin-top:0 !important;}
.picard-kontakt-signature .picard-sig-sigrow .et_pb_text_inner{
max-width:640px !important; width:100% !important; box-sizing:border-box !important;
padding:16px 22px 18px !important; gap:4px !important;
background:#F8FAFC !important; border:1px solid #E5E7EB !important; border-top:0 !important; border-radius:0 0 12px 12px !important;
}
.picard-kontakt-signature .picard-sig-sigrow p:nth-of-type(1){ font-size:44px !important; }
/* Abstand vom Bild+Signatur-Block zum Statement-Text */
.picard-kontakt-signature .picard-sig-statement{margin-top:44px !important;}
/* === ENDE R3 === */
/* ============================================================================
NELE-BATCH 2026-06-24 Runde 4 — einheitliche vertikale Abstaende (Signature)
Rhythmus: Label->Ueberschrift 12px, Ueberschrift->Text 16px, Block-Abstand 44px, Absatz 16px
============================================================================ */
.picard-kontakt-signature .picard-sig-intro{margin-bottom:0 !important;}
.picard-kontakt-signature .picard-sig-eyebrow{margin:0 !important;}
.picard-kontakt-signature .picard-sig-eyebrow p{margin:0 0 12px 0 !important;}
.picard-kontakt-signature .picard-sig-h2{margin:0 !important;}
.picard-kontakt-signature .picard-sig-leadp{margin:16px 0 0 0 !important;}
.picard-kontakt-signature .picard-sig-leadp p{margin:0 !important;}
.picard-kontakt-signature .picard-sig-persons-row{margin-top:44px !important;}
.picard-kontakt-signature .picard-sig-placeholder-wrap{margin:0 !important;}
.picard-kontakt-signature .picard-sig-sigrow{margin:0 0 44px 0 !important;}
.picard-kontakt-signature .picard-sig-statement{margin:0 0 16px 0 !important;}
.picard-kontakt-signature .picard-sig-lead p{margin:0 0 16px 0 !important;}
.picard-kontakt-signature .picard-sig-lead p:last-child{margin-bottom:0 !important;}
/* === ENDE R4 === */
/* R5: Intro->Teamfoto-Abstand sauber auf 44px (Divi-Row-margin/padding mit .et_pb_row-Spezifitaet schlagen) */
.picard-kontakt-signature .et_pb_row.picard-sig-intro{margin-bottom:0 !important; padding-bottom:0 !important;}
.picard-kontakt-signature .et_pb_row.picard-sig-persons-row{margin-top:0 !important; padding-top:44px !important;}
/* === ENDE R5 === */
/* ============================================================================
NELE-BATCH 2026-06-24 Runde 6 — Texte im Hero + Signature-Kopf enger (Nele)
============================================================================ */
/* Hero: Eyebrow / H1 / Intro / Button enger zusammen */
.picard-kontakt-hero .picard-hero-eyebrow{margin:0 !important;}
.picard-kontakt-hero .picard-hero-eyebrow p{margin:0 0 6px 0 !important;}
.picard-kontakt-hero .picard-hero-h1{margin:0 !important;}
.picard-kontakt-hero .picard-hero-h1 h1{margin:0 0 14px 0 !important;}
.picard-kontakt-hero .picard-hero-intro{margin:0 !important;}
.picard-kontakt-hero .picard-hero-intro p{margin:0 0 22px 0 !important;}
/* Signature-Kopf: Eyebrow / H2 / Intro enger */
.picard-kontakt-signature .picard-sig-eyebrow p{margin:0 0 6px 0 !important;}
.picard-kontakt-signature .picard-sig-leadp{margin:8px 0 0 0 !important;}
/* === ENDE R6 === */
/* R7: Signature-H2 Zeilenhoehe straffen (1.12->1.02) -> Eyebrow/H2/Intro ruecken zusammen */
.picard-kontakt-signature .picard-sig-h2 h2{line-height:1.02em !important;}
.picard-kontakt-signature .picard-sig-eyebrow p{margin:0 0 6px 0 !important;}
.picard-kontakt-signature .picard-sig-leadp{margin:12px 0 0 0 !important;}
/* === ENDE R7 === */
/* R8: Signature-Kopf Abstaende = der Flex-GAP der Intro-Spalte (20px) war die echte Ursache -> auf 12px */
.picard-kontakt-signature .picard-sig-intro > .et_pb_column{gap:12px !important;}
/* === ENDE R8 === */
/* ============================================================================
NELE-BATCH 2026-06-24 Runde 9 — Signatur UNTER den Text (Nele), nur duenne Linie
============================================================================ */
/* Teamfoto wieder voll abgerundet (Signatur haengt nicht mehr dran) */
.picard-kontakt-signature .picard-sig-placeholder-wrap .et_pb_text_inner{border-radius:12px !important;}
.picard-kontakt-signature .picard-sig-placeholder-wrap{margin:8px 0 0 0 !important;}
/* Signatur: Karten-Stil weg -> nur duenne Trennlinie oben, linksbuendig, volle Breite, am Ende */
.picard-kontakt-signature .picard-sig-sigrow{margin:40px 0 0 0 !important;}
.picard-kontakt-signature .picard-sig-sigrow .et_pb_text_inner{
max-width:100% !important; width:100% !important; box-sizing:border-box !important;
background:transparent !important; border:0 !important; border-top:1px solid #e5e7eb !important; border-radius:0 !important;
padding:22px 0 0 0 !important; align-items:flex-start !important; gap:6px !important;
}
.picard-kontakt-signature .picard-sig-sigrow p:nth-of-type(1){font-size:54px !important;}
/* === ENDE R9 === */
/* R10 (David/Nele): Foto auch ans Textende, direkt ueber die Signatur (Foto+Signatur als Block unten) */
.picard-kontakt-signature .picard-sig-placeholder-wrap{margin:44px 0 0 0 !important;}
.picard-kontakt-signature .picard-sig-sigrow{margin:18px 0 0 0 !important;}
/* === ENDE R10 === */
/* R11 (David): Trennlinie nicht volle Breite -> nur Foto-Breite (640px); Signatur passend */
.picard-kontakt-signature .picard-sig-sigrow .et_pb_text_inner{max-width:640px !important;}
.picard-kontakt-signature .picard-sig-sigrow p:nth-of-type(1){font-size:44px !important;}
/* === ENDE R11 === */
/* R12 (David): rotes "Ihr HR-Team bei C.A.Picard." auf eine Zeile (kein Umbruch nach "bei") */
.picard-kontakt-signature .picard-sig-h2 h2{max-width:none !important;}
@media(min-width:981px){
.picard-kontakt-signature .picard-sig-h2 h2 strong{white-space:nowrap !important;}
}
/* === ENDE R12 === */
/* R13 (David): Reihenfolge zurueck = Foto oben -> Text -> Signatur unten */
.picard-kontakt-signature .picard-sig-placeholder-wrap{margin:8px 0 0 0 !important;}
.picard-kontakt-signature .picard-sig-sigrow{margin:40px 0 0 0 !important;}
/* === ENDE R13 === */
/* R14 (David): Fliesstext einheitlich + etwas groesser (Intro 17px + Absaetze 16px -> beide 18px) */
.picard-kontakt-signature .picard-sig-leadp p,
.picard-kontakt-signature .picard-sig-leadp div{font-size:18px !important;}
.picard-kontakt-signature .picard-sig-lead p{font-size:18px !important;}
/* === ENDE R14 === */
/* ============================================================================
NELE-BATCH 2026-06-24 Runde 15 (David) — Signature-Kopf: ruhiger, einheitlicher Rhythmus
Untangle: flex-gap + ad-hoc inner margins + mysterious H2 padding collided -> uneven 18/22.
Now explicit: eyebrow->H2 12px, H2->subtitle 20px, headline leading 1.06 (2 lines less cramped).
============================================================================ */
.picard-kontakt-signature .picard-sig-intro > .et_pb_column{gap:0 !important;}
.picard-kontakt-signature .picard-sig-eyebrow p{margin:0 0 12px 0 !important;}
.picard-kontakt-signature .picard-sig-h2 h2{line-height:1.06em !important; padding:0 !important; margin:0 0 20px 0 !important;}
.picard-kontakt-signature .picard-sig-leadp{margin:0 !important;}
.picard-kontakt-signature .picard-sig-leadp p{margin:0 !important;}
/* === ENDE R15 === */
/* signature spacing tweak 2026-06-30 : image->heading more space (was 0), lead->signature half the gap (72->36px) */
.picard-kontakt-signature .picard-sig-statement{margin-top:32px !important;}
.picard-kontakt-signature .picard-sig-lead{margin-bottom:16px !important;}
.picard-kontakt-signature .picard-sig-sigrow{margin-top:20px !important;}