*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:26px}body{margin:0;font-family:Arial,Helvetica,sans-serif;color:#15384d;background:#fcfcf9;line-height:1.65}a{color:inherit;text-underline-offset:5px}a:focus-visible,button:focus-visible{outline:3px solid #2e8bc0;outline-offset:5px}.wrap{max-width:1160px;margin:auto;padding:0 40px}.draft{background:#15384d;color:#fff;font-size:11px;letter-spacing:.09em;text-align:center;padding:8px 18px}.header{display:flex;align-items:center;justify-content:space-between;gap:25px;padding-top:15px;padding-bottom:15px;border-bottom:1px solid #dce5e8}.brand{display:flex;align-items:center;gap:14px;text-decoration:none}.brand img{width:78px;height:75px;object-fit:contain}.brand span{font-size:12px;line-height:1.5;color:#486474;max-width:135px}.nav{display:flex;gap:28px;align-items:center;font-size:13px}.nav a{text-decoration:none}.nav a:hover{color:#247ca7}.nav .navcontact{border:1px solid #b7cad1;border-radius:5px;padding:9px 16px}.eyebrow{text-transform:uppercase;letter-spacing:.16em;font-size:11px;font-weight:700;color:#376e87;margin:0 0 23px}.hero{padding-top:76px;padding-bottom:72px;display:grid;grid-template-columns:1.23fr 1fr;gap:70px;align-items:center}h1{font-size:clamp(40px,4.25vw,62px);font-weight:500;line-height:1.09;letter-spacing:-.045em;margin:0 0 26px}h1 span{color:#2e8bc0}.intro{font-size:17px;line-height:1.8;max-width:510px;color:#49616d;margin:0 0 30px}.button{display:inline-flex;align-items:center;gap:27px;background:#123c58;color:white;text-decoration:none;padding:14px 20px;border-radius:5px;font-size:13px}.button:hover{background:#205a79}.button .arrow{font-size:20px;line-height:1}.subnote{font-size:11px;color:#5e737d;margin:19px 0 0}.heroart{position:relative;min-height:410px;border-radius:120px 120px 12px 12px;background:#e6f2f7;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;padding:45px 30px 38px}.heroart:before{content:'';position:absolute;inset:28px;border:1px solid #b8d8e7;border-radius:100px 100px 8px 8px}.heroart img{width:177px;height:auto;position:relative;mix-blend-mode:multiply}.heroart p{position:relative;text-align:center;margin:25px 0 0;font-size:22px;line-height:1.4;letter-spacing:-.025em}.artcaption{position:relative;font-size:10px;letter-spacing:.13em;color:#506e7e;text-transform:uppercase;margin-top:18px}.fundingline{border-top:1px solid #dce5e8;border-bottom:1px solid #dce5e8;display:flex;gap:20px;align-items:center;padding-top:18px;padding-bottom:18px;font-size:12px;color:#496470}.fundingline strong{color:#173f56;white-space:nowrap;font-size:11px;letter-spacing:.1em;text-transform:uppercase}.fundingline a{margin-left:auto;white-space:nowrap}.section{padding-top:75px;padding-bottom:75px}.split{display:grid;grid-template-columns:.82fr 1.3fr;gap:85px}.label{font-size:11px;color:#617b86;text-transform:uppercase;letter-spacing:.14em;margin:0 0 17px}.section h2{font-size:34px;line-height:1.25;letter-spacing:-.035em;font-weight:500;margin:0;max-width:420px}.bodycopy{font-size:16px;color:#49616d;margin:0 0 17px}.bodycopy:last-child{margin:0}.tint{background:#eff5f5;border-top:1px solid #dce5e8;border-bottom:1px solid #dce5e8}.steps{margin-top:35px;display:grid;grid-template-columns:repeat(3,1fr);gap:42px}.step{border-top:1px solid #b7cbd1;padding-top:18px}.step .num{font-size:12px;color:#287899}.step h3{font-weight:500;font-size:21px;margin:15px 0 11px}.step p{font-size:14px;color:#49616d;margin:0}.status{display:inline-flex;align-items:center;gap:8px;padding:5px 10px;background:#e5f0e9;border-radius:4px;color:#355c4b;font-size:11px;margin-bottom:18px}.status:before{content:'';width:6px;height:6px;background:#4e7b60;border-radius:50%}.statusbox{border-left:2px solid #71a5b9;padding-left:24px}.statusbox p{font-size:15px;color:#49616d;margin:0 0 15px}.funding .fundingtext{max-width:760px;font-size:15px;color:#49616d;margin:23px 0 25px}.logos{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.14fr);gap:24px;align-items:center;background:white;border:1px solid #dce5e8;border-radius:8px;padding:28px}.logos img{height:auto;max-width:100%;width:100%;display:block;object-fit:contain}.logos .funding-combination,.logos .gtm-logo{width:100%}.projectmeta{display:flex;gap:28px;flex-wrap:wrap;margin-top:19px;font-size:11px;color:#5b737e}.contact{background:#123c58;color:white;border-radius:10px;padding:43px 47px;display:grid;grid-template-columns:1fr 1fr;gap:35px;align-items:center}.contact h2{font-size:32px;margin:0 0 12px;color:white}.contact p{font-size:14px;color:#d2e4ec;margin:0;max-width:430px}.contactright{justify-self:end;max-width:350px}.contact a{font-size:22px;line-height:1.4;overflow-wrap:anywhere}.contact .medical{font-size:11px;line-height:1.7;margin-top:14px;color:#d2e4ec}.footer{padding-top:27px;padding-bottom:28px;display:flex;justify-content:space-between;gap:20px;color:#5d7380;font-size:11px}.footer div{display:flex;gap:23px}.legal{max-width:760px;min-height:64vh;padding-top:60px;padding-bottom:60px}.legal h1{font-size:43px}.legal h2{font-weight:500;margin-top:30px}.notice{background:#fff4dc;border-left:3px solid #b18b3c;padding:18px 22px;font-size:14px}.back{display:inline-block;margin-bottom:30px;font-size:13px}@media(max-width:760px){.wrap{padding-left:23px;padding-right:23px}.draft{font-size:9px;letter-spacing:.04em}.header{gap:12px;padding-top:11px;padding-bottom:11px}.brand img{width:66px;height:63px}.brand span{display:none}.nav{gap:15px;font-size:12px}.nav .navcontact{padding:7px 11px}.nav .optional{display:none}.hero{grid-template-columns:1fr;gap:33px;padding-top:45px;padding-bottom:39px}.eyebrow{font-size:10px;margin-bottom:19px}h1{font-size:42px}.intro{font-size:15px;margin-bottom:23px}.heroart{min-height:300px;border-radius:90px 90px 9px 9px;padding:33px 20px}.heroart:before{inset:21px;border-radius:73px 73px 5px 5px}.heroart img{width:128px}.heroart p{font-size:21px;margin-top:14px}.artcaption{font-size:9px;margin-top:13px}.fundingline{flex-wrap:wrap;gap:5px 14px;font-size:11px}.fundingline strong{width:100%}.fundingline a{margin-left:0}.split{grid-template-columns:1fr;gap:24px}.section{padding-top:45px;padding-bottom:45px}.section h2{font-size:29px}.bodycopy{font-size:15px}.steps{grid-template-columns:1fr;gap:25px;margin-top:29px}.step h3{margin-top:8px;margin-bottom:7px}.contact{padding:30px 25px;grid-template-columns:1fr;gap:24px}.contactright{justify-self:start}.contact h2{font-size:27px}.contact a{font-size:21px}.logos{padding:12px;gap:8px}.footer{flex-direction:column;gap:9px}.projectmeta{gap:8px 20px}.legal h1{font-size:34px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* 26.10.2026 – Unterstützerbereich und Kontaktperson; Codex auf Nutzerauftrag */
.supporter-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:27px}.supporter-slot{min-width:0}.supporter-logo{height:105px;border:1px dashed #9bb4bf;background:#fff;display:flex;align-items:center;justify-content:center;border-radius:6px;color:#627c88;font-size:12px;letter-spacing:.04em}.supporter-slot h3{font-weight:500;font-size:16px;line-height:1.5;margin:12px 0 5px}.supporter-slot p{font-size:11px;color:#5d7380;line-height:1.6;margin:0}.expert-slots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:26px}.expert-slots p{border-top:1px solid #d2dfe3;padding-top:13px;margin:0;font-size:13px}.expert-slots span{display:block;font-size:11px;color:#5d7380;margin-top:5px}.contact .contact-person{font-size:13px;margin:0 0 12px;color:#e7f1f6}.contact-person strong{font-weight:600}@media(max-width:760px){.supporter-grid,.expert-slots{grid-template-columns:1fr}.supporter-logo{height:105px}.contact .contact-person{font-size:12px}}

/* 26.10.2026 – Raum für transparente Unternehmensunterstützung */
.knowledge-support{border-top:1px solid #d2dfe3;margin-top:32px;padding-top:25px}.knowledge-support>h3{font-size:20px;line-height:1.4;font-weight:500;margin:0 0 12px}.knowledge-support .bodycopy{font-size:14px}

/* 26.10.2026 – vorläufige Illustrationsfläche für Unser Ansatz */
.approach-illustration{margin:34px 0 0;background:#fcfcf9;border:1px dashed #b4cbd3;border-radius:9px;padding:20px 24px 15px}.illustration-draft{display:block;font-size:10px;letter-spacing:.08em;color:#587381;text-transform:uppercase}.approach-illustration img{display:block;width:100%;height:auto;margin:12px auto 0}.approach-illustration figcaption{font-size:12px;color:#49616d;text-align:center;margin:8px 0 0}@media(max-width:760px){.approach-illustration{padding:16px 12px 13px;margin-top:26px}.illustration-draft{font-size:9px;letter-spacing:.04em}.approach-illustration figcaption{font-size:11px}.approach-illustration img{margin-top:18px}}

/* 02.11.2026 – Codex auf Nutzerauftrag: schlanker Expertenbeiratsentwurf mit zwei bereitgestellten Logos */
.advisory-title{font-size:20px;font-weight:500;line-height:1.4;margin:25px 0 6px}.advisory-note{font-size:11px;color:#5d7380;margin:0}.advisory-logos{display:flex;align-items:center;flex-wrap:wrap;gap:24px;margin-top:24px}.advisory-logos img{display:block;max-width:100%;height:auto;object-fit:contain}.advisory-essen{width:280px}.advisory-adp{width:185px}@media(max-width:760px){.advisory-logos{gap:16px}.advisory-essen{width:170px}.advisory-adp{width:130px}}
/* 02.11.2026 – Codex auf Nutzerauftrag: neutraler Grafikplatzhalter im Hero */
.hero-logo-placeholder{position:relative;width:177px;height:169px;border:1px dashed #8ba8b6;display:flex;align-items:center;justify-content:center;padding:16px;color:#506e7e;font-size:12px;text-align:center;background:#fcfcf9}@media(max-width:760px){.hero-logo-placeholder{width:128px;height:122px;font-size:11px}}
/* 02.11.2026 – Codex auf Nutzerauftrag: Logo-Platzhalter und eigenständige Farbflächen 01/02/04 */
.brand-name{font-size:25px;line-height:1.15;letter-spacing:-.045em;color:#171b18;font-weight:600}
#vorhaben{background:#ffe2c4;color:#171b18}
#ansatz{background:#e2f0d3;color:#171b18;border:0}
#foerderung{background:#e1eef8;color:#171b18;border:0}
#vorhaben .label,#vorhaben .bodycopy,#ansatz .label,#ansatz .step p,#ansatz .step .num,#foerderung .label,#foerderung .fundingtext,#foerderung .projectmeta{color:#242923}
#ansatz .step{border-top-color:#718354}
#ansatz .approach-illustration{background:transparent;border:1px solid #87a561;border-radius:0}
#ansatz .illustration-draft,#ansatz .approach-illustration figcaption{color:#24482f}
.advisory-placeholders{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:24px}
.logo-placeholder{min-height:108px;border:1px dashed #8b9691;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:18px;font-size:11px;color:#52615a;background:#f5f6f2}
.logo-placeholder span{font-size:12px;line-height:1.45;color:#27352d}
.funding-placeholder{border:1px dashed #75628f;padding:27px 24px;min-height:100px;display:flex;flex-direction:column;justify-content:center;color:#2c213d;font-size:15px}
.funding-placeholder span{font-size:11px;margin-top:5px}
@media(max-width:760px){.brand-name{font-size:23px}.advisory-placeholders{gap:12px}.logo-placeholder{padding:12px}.logo-placeholder span{font-size:11px}}
/* 02.11.2026 – Codex: Pastellfarben; farbigen Hintergrund der früheren Bärenlogo-Fläche entfernen */
.heroart{background:transparent;border-radius:0}
.heroart:before{display:none}
.hero-logo-placeholder{background:transparent}
/* 02.11.2026 – Codex auf Nutzerauftrag: Schriftzug aus Bild 1, Bär aus Bild 2; Originalbilder unverändert, Ausschnitt über SVG-Ansichtsfenster */
.brand{gap:12px;flex-shrink:0}.brand-bear{display:block;width:62px;height:auto;flex-shrink:0;mix-blend-mode:multiply}.brand .brand-lockup{display:flex;flex-direction:column;gap:7px;max-width:none}.brand-wordmark{display:block;width:230px;height:auto;mix-blend-mode:multiply}.hero-bear{position:relative;display:block;width:240px;height:auto;mix-blend-mode:multiply}
@media(max-width:760px){.brand{gap:8px}.brand-bear{width:40px}.brand-wordmark{width:170px}.brand .brand-lockup{gap:5px}.header{flex-wrap:wrap;row-gap:14px}.header .nav{margin-left:auto}.hero-bear{width:180px}}
@media(max-width:380px){.brand-wordmark{width:150px}}
/* 02.11.2026 – Codex auf Nutzerauftrag: Kunstpalast-Screenshot als Richtung für Farbe und Typografie, eigenständige Umsetzung */
@font-face{font-family:Montserrat;src:url("assets/fonts/Montserrat-Variable.ttf") format("truetype");font-style:normal;font-weight:100 900;font-display:swap}
body{font-family:Montserrat,"Century Gothic","Avenir Next",Arial,sans-serif;background:#fff;color:#4b4e50;font-weight:400}
h1{font-size:clamp(36px,3.7vw,52px);font-weight:500;line-height:1.16;letter-spacing:-.035em;color:#4b4e50}
h1 span{color:#4b4e50}
.section h2{font-size:30px;line-height:1.25;font-weight:650;text-transform:uppercase;letter-spacing:.015em;color:#4b4e50}
.intro,.bodycopy{color:#4b4e50;font-weight:400;line-height:1.85}
.eyebrow,.label,.artcaption,.advisory-note,.projectmeta,.footer,.fundingline,.fundingline strong{color:#505655}
.label,.eyebrow{letter-spacing:.075em;font-weight:600}
#vorhaben{background:#c0d5e5;color:#4b4e50}
#ansatz{background:#c5e2bc;color:#4b4e50}
#foerderung{background:#e8f2f3;color:#4b4e50}
#vorhaben .label,#vorhaben .bodycopy,#ansatz .label,#ansatz .step p,#ansatz .step .num,#foerderung .label,#foerderung .fundingtext,#foerderung .projectmeta{color:#4b4e50}
#ansatz .step{border-top-color:#8ca486}
#ansatz .approach-illustration{border-color:#93ac8d}
#ansatz .illustration-draft,#ansatz .approach-illustration figcaption{color:#3d5a43}
.step h3,.advisory-title{font-weight:600;letter-spacing:-.015em;color:#4b4e50}
.button{background:#f5e7da;color:#34393b;border-radius:0;font-weight:600}
.button:hover{background:#e9d5c1}
.nav a:hover{color:#3d5a43}.nav .navcontact{border-color:#bac9c2;border-radius:0}
a:focus-visible,button:focus-visible{outline-color:#466b59}
.contact{background:#edf4f1;color:#4b4e50;border-radius:0}
.contact h2{color:#4b4e50;font-size:29px}
.contact p,.contact .medical,.contact .contact-person{color:#4b4e50}
.contact .eyebrow{color:#505655!important}
.contact a{color:#344e41}
.heroart p{color:#4b4e50;font-weight:500}.artcaption{color:#505655}
.footer{background:#f0f5f2}
@media(max-width:760px){.section h2{font-size:26px}.contact h2{font-size:25px}h1{font-size:36px}.intro{font-size:15px}.bodycopy{font-size:14px}}
/* 02.11.2026 – Codex auf Nutzerauftrag: Kinderzeichnung im Einstieg; reduzierte Konsil-/Wissenssymbole ohne Rahmen */
.heroart .hero-drawing{position:relative;display:block;width:100%;max-width:483px;height:auto;mix-blend-mode:normal}
#ansatz .approach-illustration{border:0;border-radius:0;background:transparent;padding:0;margin-top:32px}
#ansatz .approach-illustration img{display:block;width:100%;max-width:900px;height:auto;margin:0 auto}
#ansatz .approach-illustration figcaption{margin-top:12px;color:#315d43}
@media(max-width:760px){.heroart{min-height:0;padding:24px 0}.heroart .hero-drawing{width:100%}#ansatz .approach-illustration{margin-top:24px}}
/* 02.11.2026 – Codex auf Nutzerwunsch: vorhandene Blumenzeichnung als dekoratives Banner unter 02 */
.approach-flower-banner{margin:36px 0 0;display:flex;justify-content:center;overflow:hidden}
.approach-flower-banner img{display:block;width:100%;max-width:483px;height:auto;mix-blend-mode:multiply}
@media(max-width:760px){.approach-flower-banner{margin-top:28px}}
/* 02.11.2026 – Codex auf Nutzerauftrag: generierte minimalistische Bärenzeichnung unter 01 und neuer Blumen-Ausschnitt unter 02 */
.anliegen-bear{margin:26px 0 0;max-width:310px}
.anliegen-bear img{display:block;width:100%;height:auto}
.approach-flower-banner img{max-width:497px}
@media(max-width:760px){.anliegen-bear{max-width:240px;margin-top:22px}}
/* 02.11.2026 – Codex auf Nutzerauftrag: vier unveränderte Einzelmotive locker verteilt, wiederholt und gedreht */
.flower-scatter{position:relative;pointer-events:none}
.flower-scatter img.flower{position:absolute;display:block;width:var(--flower-width,44px);max-width:none;height:auto;mix-blend-mode:multiply;transform:rotate(var(--flower-turn,0deg));transform-origin:50% 80%}
.heroart{min-height:290px}
.heroart .flowers-hero{position:absolute;inset:0}
.flowers-hero .flower-yellow{left:9%;top:6%;--flower-width:48px;--flower-turn:-16deg}
.flowers-hero .flower-blue{right:5%;bottom:2%;--flower-width:38px;--flower-turn:18deg}
.flowers-anliegen{height:145px;margin-top:26px}
.flowers-anliegen .flower-red{left:10%;top:40px;--flower-width:37px;--flower-turn:-13deg}
.flowers-anliegen .flower-green{left:66%;top:8px;--flower-width:50px;--flower-turn:12deg}
.flowers-ansatz{height:105px;margin-top:24px}
.flowers-ansatz .flower-green{left:14%;top:25px;--flower-width:50px;--flower-turn:-11deg}
.flowers-ansatz .flower-red{right:13%;top:4px;--flower-width:36px;--flower-turn:19deg}
.flowers-expertise{height:115px;margin-top:20px}
.flowers-expertise .flower-blue{left:60%;top:3px;--flower-width:40px;--flower-turn:-20deg}
@media(max-width:760px){.heroart{min-height:265px;padding:55px 20px}.flowers-hero .flower-yellow{left:3%;top:0}.flowers-hero .flower-blue{right:2%;bottom:0}.flowers-anliegen{height:125px;margin-top:15px}.flowers-expertise{height:100px;margin-top:15px}}
/* 02.11.2026 – Codex: gelbe Blume tiefer in 01, grüne Motive entfernt; Unterzeile in lokaler Handschrift */

.heroart .artcaption{font-family:Caveat,"Segoe Print",cursive;font-size:25px;font-weight:500;line-height:1.3;text-transform:none;letter-spacing:0;color:#4b4e50;text-align:center}
.flowers-anliegen{height:200px}
.flowers-anliegen .flower-yellow{left:55%;top:105px;--flower-width:47px;--flower-turn:-16deg}
@media(max-width:760px){.heroart .artcaption{font-size:23px}.flowers-anliegen{height:175px}.flowers-anliegen .flower-yellow{top:80px;left:58%}}
/* 02.11.2026 – Codex auf Nutzerauftrag: Montserrat einheitlich; gelbe Blume oben mit freiem Abstand zum Text */
.heroart{justify-content:flex-start;padding-top:145px;min-height:330px}
.flowers-hero .flower-yellow{left:12%;top:10px;--flower-width:46px;--flower-turn:-12deg}
.heroart .artcaption{font-family:inherit;font-size:10px;font-weight:400;line-height:1.65;text-transform:uppercase;letter-spacing:.13em;color:#505655;text-align:center}
.flowers-anliegen{height:125px}
@media(max-width:760px){.heroart{padding-top:130px;padding-bottom:65px;min-height:310px}.flowers-hero .flower-yellow{left:8%;top:6px}.heroart .artcaption{font-size:9px}.flowers-anliegen{height:110px}}
/* 02.11.2026 – Codex auf Nutzerauftrag: PaediDerm-Schriftzug einheitlich schwarz, Originalgrafik erhalten */

/* 02.11.2026 – Codex auf Nutzerauftrag: Headerbär in Schwarz-Weiß mit erhaltenen Grauabstufungen */

/* 02.11.2026 – Codex auf Nutzerwahl: dezenter Themenstempel, kein Zertifizierungssiegel */

/* 02.11.2026 – Codex auf Nutzerauftrag: Themenstempel in einem einzelnen Bärenumriss statt Kreis */
.rare-bear-stamp{width:194px;max-width:100%;margin:26px 0 10px 12px;color:#0a205b;transform:rotate(-7deg)}
.rare-bear-stamp svg{display:block;width:100%;height:auto;overflow:visible}
.rare-bear-stamp text{font-family:Montserrat,Arial,sans-serif;fill:currentColor}
.rare-bear-including{font-size:12px;font-weight:500;letter-spacing:1.1px}
.rare-bear-main{font-size:17px;font-weight:650;letter-spacing:.3px}
@media(max-width:760px){.rare-bear-stamp{width:178px;margin-top:22px;margin-left:8px}}
/* 02.11.2026 · Codex auf Rons CI-Freigabe: gemeinsame Markenfarben und Masterlogo. */
body{color:var(--pd-text)}
.brand .brand-lockup{display:flex;flex-direction:column;gap:2px;max-width:none}
.brand img.brand-logo{display:block;width:305px;height:auto;object-fit:contain;mix-blend-mode:normal;filter:none}
.button{background:var(--pd-action);color:var(--pd-on-action);border:1px solid var(--pd-action)}
.button:hover{background:var(--pd-action);color:var(--pd-on-action);text-decoration:underline;text-underline-offset:4px}
.nav a:hover,.fundingline a,.contact a,.legal a,.footer a,.back{color:var(--pd-link)}
a:focus-visible,button:focus-visible{outline:3px solid var(--pd-focus);outline-offset:3px;box-shadow:0 0 0 2px var(--pd-focus-inner)}
.intro,.bodycopy{color:var(--pd-text)}
.eyebrow,.label,.artcaption,.advisory-note,.projectmeta,.footer,.fundingline,.fundingline strong{color:var(--pd-text-secondary)}
.contact .eyebrow{color:var(--pd-text-secondary)!important}
@media(max-width:760px){.header{flex-wrap:wrap}.brand img.brand-logo{width:260px}.header .nav{margin-left:auto}}
@media(max-width:380px){.brand img.brand-logo{width:235px}}

/* 02.11.2026 · Sichtprüfung: lange Hero-Überschrift auf schmalen Geräten vollständig anzeigen. */
.hero>*{min-width:0}
@media(max-width:760px){.hero{grid-template-columns:minmax(0,1fr)}h1{font-size:clamp(26px,7.5vw,36px)}.button{max-width:100%}}
/* 02.11.2026 · Codex: Claim getrennt vom Logo; keine reguläre Header-Unterzeile. */

/* 02.11.2026 · Codex auf Rons Auftrag: Kontaktformular als lokale Vorschau; Versand separat aktivieren. */
.contact-form{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px 24px;border-top:1px solid var(--pd-border-control);padding-top:28px;margin-top:10px;min-width:0}
.contact-form .form-heading,.contact-form .form-wide{grid-column:1/-1;min-width:0}
.contact-form h3{font-size:21px;line-height:1.4;margin:0 0 8px;color:var(--pd-text);font-weight:600}
.contact-form p{max-width:none}.contact-form .form-preview{color:var(--pd-text-secondary);font-size:13px}
.contact-field{display:flex;flex-direction:column;gap:8px;min-width:0}
.contact-field label{font-size:13px;font-weight:600;line-height:1.5;color:var(--pd-text)}
.contact-field label span{font-weight:400;color:var(--pd-text-secondary);font-size:11px}
.contact-field input,.contact-field textarea{display:block;width:100%;min-width:0;border:1px solid var(--pd-border-control);border-radius:0;background:var(--pd-surface);color:var(--pd-text);font:inherit;font-size:15px;line-height:1.6;padding:10px 12px;min-height:46px}
.contact-field textarea{resize:vertical;min-height:150px}
.contact-field input:focus-visible,.contact-field textarea:focus-visible{outline:3px solid var(--pd-focus);outline-offset:3px;box-shadow:0 0 0 2px var(--pd-focus-inner)}
.contact-form .form-privacy,.contact-form .form-mode{font-size:12px;line-height:1.7;color:var(--pd-text-secondary)}
.contact-form .form-privacy a,.contact-form noscript a{font-size:inherit;line-height:inherit;color:var(--pd-link);text-decoration:underline}
.form-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px 20px}
.contact-form .button{font:inherit;font-size:13px;font-weight:600;cursor:pointer;min-height:46px}
.contact-form .button:disabled{cursor:not-allowed;opacity:.6}
.contact-trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.contact-form .form-feedback{padding:12px 15px;background:var(--pd-surface);border-left:3px solid var(--pd-brand-primary);font-size:13px;line-height:1.7;color:var(--pd-text)}
.contact-form .form-feedback[data-tone="error"]{color:var(--pd-error);border-color:var(--pd-error);background:var(--pd-error-bg)}
.contact-form .form-feedback[data-tone="success"]{color:var(--pd-success);border-color:var(--pd-success);background:var(--pd-success-bg)}
.contact-form [hidden]{display:none!important}
@media(max-width:760px){.contact-form{grid-template-columns:minmax(0,1fr);gap:20px;padding-top:24px}.contact-form h3{font-size:19px}.contact-field input,.contact-field textarea{font-size:16px}.contact .contactright{justify-self:start}}

/* 02.11.2026 – Codex auf Nutzerauftrag: kleine gezeichnete Sonne über dem Präventionsabsatz */
.step .prevention-sun{display:block;width:64px;max-width:100%;height:auto;margin:14px 0 17px 8px;transform:rotate(-8deg);mix-blend-mode:multiply}
/* 02.11.2026 · Ron: Kontaktformular ausschließlich auf eigener Unterseite. */
.contact .contact-form-entry{margin-top:20px}
.contact .contact-form-entry .button{font-size:13px;line-height:1.5;color:var(--pd-on-action)}
.contact-page{max-width:900px}
.contact-page h1{margin-bottom:24px}
.contact-page-intro{font-size:15px;line-height:1.8;color:var(--pd-text);margin-bottom:30px}
.contact-form-panel{padding:30px;background:var(--pd-surface-mint);min-width:0}
.contact-page .contact-form{border-top:0;padding-top:0;margin:0;width:100%;max-width:100%;min-width:0}
.contact-page .contact-form .contact-field{min-width:0;max-width:100%}
.contact-page .contact-form input,.contact-page .contact-form textarea{box-sizing:border-box;max-width:100%}
@media(max-width:760px){.contact-form-panel{padding:22px 18px}.contact-page h1{overflow-wrap:anywhere}.contact-page .contact-form{grid-template-columns:minmax(0,1fr)}}