.contact-intro{margin-bottom:28px}.contact-intro h2{font-size:clamp(26px,3vw,36px);line-height:1.15;letter-spacing:-.035em;margin:0 0 12px}.contact-intro p{color:#b7b7ad;line-height:1.6;margin:0 0 12px}.contact-intro a{color:#c7aa71;font-size:13px}.contact-assurance{display:flex;gap:12px;align-items:flex-start;margin:24px 0 18px;padding:16px;border:1px solid rgba(199,170,113,.35);border-radius:12px}.contact-assurance>span{color:#c7aa71;font-size:22px}.contact-assurance p{margin:5px 0 0;color:#b7b7ad;font-size:14px;line-height:1.5}#kontaktformular input:not([type=radio]):not([type=checkbox]),#kontaktformular textarea{font-size:16px}@media(max-width:700px){.contact-intro{margin-bottom:22px}.contact-assurance{margin:20px 0 16px}}
.contact-google-rating{display:inline-flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 18px;color:#e8e8e0;text-decoration:none;font-size:14px;line-height:1.4}.contact-google-rating:hover,.contact-google-rating:focus-visible{color:#c7aa71}.contact-google-rating:focus-visible{outline:2px solid #c7aa71;outline-offset:4px}.contact-google-stars{color:#c7aa71;font-size:22px;letter-spacing:2px;white-space:nowrap}

#kontaktformular .choices label{cursor:pointer;min-height:44px}#kontaktformular .choices label:has(input:checked){border-color:#c7aa71;background:rgba(199,170,113,.14);color:#f4eee0}#kontaktformular .choices label:has(input:focus-visible){outline:2px solid #c7aa71;outline-offset:3px}

.hero-services{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px}.hero-services a{display:inline-flex;align-items:center;padding:8px 11px;border:1px solid rgba(199,170,113,.35);border-radius:8px;color:#e8e8e0;font-size:12px;line-height:1.3;text-decoration:none}.hero-services a:hover,.hero-services a:focus-visible{border-color:#c7aa71;color:#c7aa71}.hero-services a:focus-visible{outline:2px solid #c7aa71;outline-offset:2px}@media(max-width:700px){.hero-services{gap:7px;margin-bottom:20px}.hero-services a{font-size:12px;padding:8px 10px}}

/* Die Leistungen erscheinen einmalig und bleiben danach sichtbar. */
@media (prefers-reduced-motion: no-preference){
 .hero-services a{animation:hero-service-appear .7s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(.12s + var(--hero-order, 0) * .12s)}
 .hero-services a:nth-child(2){--hero-order:1}.hero-services a:nth-child(3){--hero-order:2}.hero-services a:nth-child(4){--hero-order:3}.hero-services a:nth-child(5){--hero-order:4}
 .hero-services a:focus-visible{animation:none;opacity:1;transform:none;filter:none}
 @keyframes hero-service-appear{from{opacity:0;transform:translateY(14px) scale(.96);filter:blur(4px)}to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}
}

@media (prefers-reduced-motion: no-preference){
 .hero-services a{animation:none}
 .hero{position:relative}
 .hero>.hero-intro-animation{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;padding:24px;pointer-events:none;animation:hero-intro-exit .7s ease 3.5s forwards}
 .hero-intro-grid{position:relative;width:min(100%,360px);height:310px}
 .hero-intro-grid span{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%) scale(.85);padding:9px 12px;border:1px solid rgba(199,170,113,.65);border-radius:8px;background:#1a1b18;color:#eae8df;white-space:nowrap;font-size:clamp(11px,1.2vw,14px);opacity:0;animation:hero-s-appear .55s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:var(--delay)}
 .hero-intro-grid span:nth-of-type(1){--x:70%;--y:10%;--delay:.15s}.hero-intro-grid span:nth-of-type(2){--x:28%;--y:27%;--delay:.5s}.hero-intro-grid span:nth-of-type(3){--x:50%;--y:50%;--delay:.85s}.hero-intro-grid span:nth-of-type(4){--x:72%;--y:73%;--delay:1.2s}.hero-intro-grid span:nth-of-type(5){--x:30%;--y:90%;--delay:1.55s}
 .hero> :not(.hero-intro-animation){animation:hero-content-enter .8s ease 3.5s both}
 .hero:focus-within> :not(.hero-intro-animation){animation:none;opacity:1;transform:none}.hero:focus-within>.hero-intro-animation{display:none}
 @keyframes hero-s-appear{to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
 @keyframes hero-intro-exit{to{opacity:0;visibility:hidden;transform:scale(1.06)}}
 @keyframes hero-content-enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
}
@media (prefers-reduced-motion: reduce){.hero-intro-animation{display:none}}

/* Räumliches Intro: fünf Leistungen formen nacheinander das S. */
@media (prefers-reduced-motion: no-preference){
 .hero>.hero-intro-animation{overflow:hidden;perspective:850px;animation:hero-film-fade .85s ease 5.3s forwards}
 .hero-intro-animation::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 48%,rgba(199,170,113,.16),transparent 58%);animation:hero-film-light 5.9s ease both}
 .hero-intro-grid{transform-style:preserve-3d;animation:hero-film-camera 5.9s cubic-bezier(.2,.65,.25,1) both}
 .hero-intro-grid span{transform-style:preserve-3d;background:linear-gradient(145deg,#292923,#151613);border-color:rgba(199,170,113,.7);box-shadow:0 8px 0 #0d0e0c,0 12px 18px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.12);animation-name:hero-film-piece;animation-duration:.85s;animation-timing-function:cubic-bezier(.2,.7,.2,1)}
 .hero-intro-grid span:nth-of-type(1){--delay:.2s}.hero-intro-grid span:nth-of-type(2){--delay:.75s}.hero-intro-grid span:nth-of-type(3){--delay:1.3s}.hero-intro-grid span:nth-of-type(4){--delay:1.85s}.hero-intro-grid span:nth-of-type(5){--delay:2.4s}
 .hero> :not(.hero-intro-animation){animation:hero-content-enter .85s ease 5.3s both}
 @keyframes hero-film-piece{from{opacity:0;transform:translate(-50%,-50%) translateZ(-240px) translateY(35px) rotateX(42deg) scale(.6);filter:blur(6px)}to{opacity:1;transform:translate(-50%,-50%) translateZ(18px) rotateX(0) scale(1);filter:blur(0)}}
 @keyframes hero-film-camera{0%{transform:rotateY(-18deg) rotateX(10deg) scale(.84)}55%{transform:rotateY(9deg) rotateX(-5deg) scale(1)}82%{transform:rotateY(0) rotateX(0) scale(1)}100%{transform:rotateY(0) rotateX(0) scale(1.04)}}
 @keyframes hero-film-light{0%{opacity:0}35%,75%{opacity:1}100%{opacity:0}}
 @keyframes hero-film-fade{to{opacity:0;visibility:hidden;transform:scale(1.05)}}
}

/* Überschriften der Hauptseite zentrieren. */
main h1,main h2,main h3,main h4{text-align:left}
main .eyebrow{display:block;text-align:left}

.hero h1{text-align:left}

/* Futuristisches räumliches Intro im bestehenden Farbsystem. */
@media (prefers-reduced-motion: no-preference){
 .hero-intro-animation{isolation:isolate;background:radial-gradient(ellipse at 50% 45%,#25271f 0%,#111310 60%,#0d0e0d 100%)}
 .hero-intro-animation::before{background:radial-gradient(circle at 50% 50%,rgba(199,170,113,.24),transparent 43%),repeating-linear-gradient(0deg,transparent 0 40px,rgba(199,170,113,.08) 41px 42px),repeating-linear-gradient(90deg,transparent 0 40px,rgba(199,170,113,.08) 41px 42px);transform:perspective(500px) rotateX(56deg) scale(1.6);transform-origin:center 70%;opacity:.75}
 .hero-intro-animation::after{content:"";position:absolute;width:min(70%,300px);aspect-ratio:1;border:1px solid rgba(199,170,113,.35);border-radius:50%;box-shadow:0 0 28px rgba(199,170,113,.16),inset 0 0 35px rgba(199,170,113,.12);transform:rotateX(65deg);animation:hero-orbit 4.5s ease-in-out both;pointer-events:none}
 .hero-intro-grid{z-index:1;animation:hero-film-camera 5.9s cubic-bezier(.2,.65,.25,1) both;filter:drop-shadow(0 14px 18px rgba(0,0,0,.5))}
 .hero-intro-grid span{background:linear-gradient(130deg,rgba(199,170,113,.22),rgba(27,30,27,.96) 45%,#111310);border:1px solid rgba(225,195,127,.8);box-shadow:0 5px 0 #0c0e0c,0 12px 22px rgba(0,0,0,.6),0 0 20px rgba(199,170,113,.15),inset 0 1px 0 rgba(255,255,255,.2);letter-spacing:.02em;backface-visibility:hidden}
 .hero-intro-grid span::before{content:"";display:inline-block;width:5px;height:5px;margin-right:8px;border-radius:50%;background:#dcc28b;box-shadow:0 0 9px #c7aa71;vertical-align:middle}
 @keyframes hero-orbit{0%{opacity:0;transform:rotateX(65deg) rotateZ(-70deg) scale(.6)}35%{opacity:.7}85%{opacity:.6}100%{opacity:0;transform:rotateX(65deg) rotateZ(35deg) scale(1.12)}}
}

/* Lichtlinie und räumlicher Übergang des Hero-Intros. */
@media (prefers-reduced-motion: no-preference){
 .hero-s-line{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;transform:translateZ(-14px);filter:drop-shadow(0 0 7px rgba(230,198,127,.75));opacity:.9}
 .hero-s-line path{stroke-dasharray:100;stroke-dashoffset:100;animation:hero-line-draw 2.25s ease-in-out .1s forwards}
 .hero-intro-grid span:nth-of-type(1){--delay:.12s;--depth:30px}.hero-intro-grid span:nth-of-type(2){--delay:.48s;--depth:60px}.hero-intro-grid span:nth-of-type(3){--delay:.84s;--depth:95px}.hero-intro-grid span:nth-of-type(4){--delay:1.2s;--depth:60px}.hero-intro-grid span:nth-of-type(5){--delay:1.56s;--depth:30px}
 .hero-intro-grid span{animation-name:hero-depth-piece;animation-duration:.65s}
 .hero-intro-grid{animation:hero-final-camera 4.2s cubic-bezier(.2,.65,.25,1) both}
 .hero>.hero-intro-animation{animation:hero-final-fade .55s ease 3.65s forwards}
 .hero> :not(.hero-intro-animation){animation:hero-content-enter .65s ease 3.65s both}
 @keyframes hero-line-draw{to{stroke-dashoffset:0}}
 @keyframes hero-depth-piece{from{opacity:0;transform:translate(-50%,-50%) translateZ(-200px) rotateX(40deg) scale(.7);filter:blur(5px)}to{opacity:1;transform:translate(-50%,-50%) translateZ(var(--depth)) rotateX(0) scale(1);filter:blur(0)}}
 @keyframes hero-final-camera{0%{transform:rotateY(-19deg) rotateX(9deg) scale(.82)}65%{transform:rotateY(8deg) rotateX(-4deg) scale(1)}84%{transform:rotateY(0) rotateX(0) scale(1)}100%{transform:rotateY(0) rotateX(0) scale(.9)}}
 @keyframes hero-final-fade{to{opacity:0;visibility:hidden;transform:scale(.92)}}
}

/* Das Porträt behält seine ursprüngliche Höhe. */
.bento>.portrait{grid-row:1;align-self:start;height:330px}
@media(max-width:900px){.bento>.portrait{height:330px}}
@media(max-width:640px){.bento>.portrait{grid-column:1 / -1;grid-row:2;height:280px}}

/* Kontakt im Hero; Porträt im Bereich persönliche Expertise. */
.bento{grid-template-rows:auto;align-items:start}
.bento>.hero{grid-row:1;grid-column:1 / 3}
.bento>.hero-contact{grid-column:3;grid-row:1;padding:30px;min-width:0;scroll-margin-top:24px}
.contact{display:block}.contact-copy{max-width:650px}
.brand-section>.portrait{height:380px;max-width:470px;margin:32px 0;grid-column:auto;grid-row:auto}
@media(max-width:900px){.bento>.hero{grid-column:1;grid-row:1}.bento>.hero-contact{grid-column:2;grid-row:1}.brand-section>.portrait{height:340px}}
@media(max-width:640px){.bento{grid-template-rows:auto auto}.bento>.hero{grid-column:1 / -1;grid-row:1}.bento>.hero-contact{grid-column:1 / -1;grid-row:2;padding:24px}.brand-section>.portrait{height:300px;max-width:100%}}

.approach .strategy-photo .portrait-label{position:absolute;left:0;right:0;bottom:0;display:block;padding:30px 24px 20px;background:linear-gradient(transparent,rgba(0,0,0,.85));color:#fff;font-size:14px;line-height:1.5;letter-spacing:0;opacity:0;transition:opacity .25s ease}.approach .strategy-photo .portrait-label strong{font-size:18px}.approach .strategy-photo:hover .portrait-label,.approach .strategy-photo:focus-visible .portrait-label,.approach .strategy-photo:focus-within .portrait-label{opacity:1}@media(hover:none){.approach .strategy-photo .portrait-label{opacity:1}}@media(prefers-reduced-motion:reduce){.approach .strategy-photo .portrait-label{transition:none}}

/* Klarer Einstieg und kompakte optionale Angaben. */
.contact-extra{margin-top:18px}.contact-extra summary{cursor:pointer;color:#d1b77d;font-size:14px;line-height:1.5}.contact-extra .fields{margin:16px 0 0}.contact-extra summary:focus-visible{outline:2px solid #c7aa71;outline-offset:4px}.hero-contact .contact-intro h2{max-width:20ch}.hero-services a{min-height:44px}.project-facts dt{color:#c7aa71}
@media (prefers-reduced-motion:no-preference){.hero>.hero-intro-animation{animation:hero-final-fade .45s ease 2.35s forwards}.hero> :not(.hero-intro-animation){animation:hero-content-enter .55s ease 2.35s both}.hero-intro-grid{animation-duration:2.8s}.hero-s-line path{animation-duration:1.65s}.hero-intro-grid span:nth-of-type(1){--delay:.05s}.hero-intro-grid span:nth-of-type(2){--delay:.3s}.hero-intro-grid span:nth-of-type(3){--delay:.55s}.hero-intro-grid span:nth-of-type(4){--delay:.8s}.hero-intro-grid span:nth-of-type(5){--delay:1.05s}.hero-intro-grid span{animation-duration:.55s}}
@media(max-width:640px){.hero-contact .contact-intro{margin-bottom:16px}.hero-contact fieldset{margin-bottom:18px}.hero-contact .contact-assurance{padding:12px;margin:16px 0}.hero-contact .fields{gap:12px;margin-bottom:14px}}

/* Kompakter und besser bedienbarer Einstieg auf kleinen Bildschirmen. */
@media(max-width:640px){.hero-award{margin:14px 0 4px}.hero h1{margin-top:18px}.hero-services{margin-bottom:16px}.hero-bottom{margin-top:18px}.hero-contact .choices{gap:7px}.hero-contact .choices label{display:flex;align-items:center;min-height:44px}.hero-contact .contact-intro h2{font-size:26px}}

/* Vertrauenselemente im Formular zurückhaltend darstellen. */
.hero-contact .contact-intro{display:grid;gap:8px;margin-bottom:20px}.hero-contact .contact-intro h2{margin:0;order:0}.hero-contact .contact-intro p{margin:0;order:1;font-size:14px}.hero-contact .contact-google-rating{order:2;margin:5px 0 0;font-size:12px;gap:8px}.hero-contact .contact-google-stars{font-size:17px;letter-spacing:1px}.hero-contact .contact-intro>a:not(.contact-google-rating){order:3;font-size:12px}.hero-contact .contact-assurance{padding:12px 14px}.hero-contact .form-note{line-height:1.5}@media(max-width:640px){.hero-contact .contact-intro{gap:7px;margin-bottom:16px}.hero-contact .contact-assurance{padding:10px 12px}.hero-contact .contact-google-stars{font-size:16px}}

/* Klarer Einstieg, kurze Bewegung und gut lesbare Referenzen. */
.hero-services a{min-height:44px}.project-copy .eyebrow{font-size:11px;line-height:1.5;letter-spacing:.11em}.project-facts{display:grid;gap:14px}.project-facts dt{margin-bottom:4px}.project-facts dd{margin:0;line-height:1.55}.hero-contact .choices label{min-height:44px}.hero-contact input:not([type=radio]):not([type=checkbox]),.hero-contact textarea{font-size:16px}
@media (prefers-reduced-motion:no-preference){.hero>.hero-intro-animation{animation:hero-final-fade .4s ease 1.45s forwards}.hero> :not(.hero-intro-animation){animation:hero-content-enter .5s ease 1.45s both}.hero-intro-grid{animation-duration:1.85s}.hero-s-line path{animation-duration:1.1s}.hero-intro-grid span:nth-of-type(1){--delay:.02s}.hero-intro-grid span:nth-of-type(2){--delay:.18s}.hero-intro-grid span:nth-of-type(3){--delay:.34s}.hero-intro-grid span:nth-of-type(4){--delay:.5s}.hero-intro-grid span:nth-of-type(5){--delay:.66s}.hero-intro-grid span{animation-duration:.45s}}
@media(max-width:640px){.hero{padding:24px 20px}.hero h1{font-size:clamp(38px,11vw,54px);line-height:1.05}.hero-services{gap:6px}.hero-services a{font-size:12px}.hero-contact{padding:20px}.hero-contact .fields{grid-template-columns:1fr;gap:12px}.hero-contact .choices{gap:6px}.hero-contact .choices label{font-size:13px}.project-facts{gap:10px}.project-copy .eyebrow{font-size:10px}}