/* Gezielte Bild-Ergänzungen auf Basis von Version 8. Basis-Styles bleiben unverändert. */
:root { --phone-shell:#f8faf9; --phone-edge:#bdc9cc; --phone-screen:#f6f5f0; --phone-speaker:#a2b1b6; }
.shot-image-button.phone-frame { position:relative; display:block; width:100%; max-width:264px; margin-inline:auto; padding:17px 3px 20px; border:6px solid var(--phone-shell); border-radius:34px; background:var(--phone-shell); aspect-ratio:auto; overflow:visible; box-shadow:0 0 0 1px var(--phone-edge),0 17px 30px #27475422; }
.phone-frame::before { content:""; position:absolute; width:40px; height:4px; border-radius:8px; top:5px; left:50%; transform:translateX(-50%); background:var(--phone-speaker); pointer-events:none; }
.phone-frame::after { content:""; position:absolute; width:58px; height:4px; border-radius:8px; bottom:6px; left:50%; transform:translateX(-50%); background:var(--phone-speaker); pointer-events:none; }
.phone-screen { display:block; position:relative; width:100%; aspect-ratio:9/18; overflow:hidden; border-radius:19px; background:var(--phone-screen); }
.phone-frame .phone-screen img { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:contain; object-position:top; border-radius:0; }
.hero-shot .phone-frame { max-width:264px; }
.role-gallery .phone-frame { max-width:254px; }
.evidence-shots .phone-frame { max-width:250px; }
.context-photo { width:100%; max-width:440px; margin:27px 0 0; }
.context-photo img { display:block; width:100%; height:auto; border-radius:16px; box-shadow:0 12px 28px #27475413; }
.context-photo figcaption { margin-top:7px; color:var(--muted); font-size:10px; line-height:1.6; }
.benefits-copy .context-photo { max-width:420px; margin-bottom:28px; }
.evidence-copy .context-photo { margin-top:30px; }
.legal-dialog { max-height:calc(100dvh - 32px); overflow-y:auto; }
.legal-dialog h3 { margin:22px 0 8px; font-size:16px; line-height:1.45; }
.legal-dialog address { margin-top:18px; font-size:14px; line-height:1.8; font-style:normal; color:var(--muted); }
.legal-dialog h3 + p { margin-top:0; }
.legal-dialog a { text-decoration:underline; text-underline-offset:3px; overflow-wrap:anywhere; }
.hero-screens:has(.hero-office-monitor) { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); align-items:center; gap:22px; }
.hero-screens:has(.hero-office-monitor) .hero-shot-primary { width:100%; }
.hero-shot.hero-office-monitor { width:100%; max-width:none; padding-top:0; }
.hero-shot .shot-image-button.monitor-frame { position:relative; padding:9px 9px 22px; border:1px solid #bdc9cc; border-radius:13px; background:#f8faf9; box-shadow:0 14px 24px #2747541c; overflow:hidden; aspect-ratio:auto; }
.monitor-frame::after { content:""; position:absolute; bottom:9px; left:50%; width:4px; height:4px; border-radius:50%; background:#a2b1b6; }
.monitor-screen { position:relative; display:block; width:100%; aspect-ratio:4/3; overflow:hidden; border:1px solid #e2e6e4; border-radius:4px; background:#f6f5f0; }
.monitor-frame .monitor-screen img { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; object-position:top; }
.monitor-stand { position:relative; display:block; width:29%; height:40px; margin:0 auto; background:linear-gradient(90deg,#dce4e5,#f8faf9 45%,#e2e9e9); clip-path:polygon(25% 0,75% 0,80% 78%,100% 90%,100% 100%,0 100%,0 90%,20% 78%); }
.hero-office-monitor figcaption { margin-top:10px; }
.section-intro .section-quote,.billing-types-heading .section-quote { position:relative; flex:0 1 400px; max-width:400px; margin:0; padding:5px 0 5px 22px; border-left:3px solid var(--yellow,#ffcc23); }
.section-intro .section-quote p,.billing-types-heading .section-quote p { max-width:none; margin:0; font-size:17px; line-height:1.8; font-style:italic; color:var(--ink,#274754); }
.pain-section .section-intro .section-quote { max-width:355px; }
.button,.actions .button,.closing-actions .button,dialog .button { font-size:17px; }
.button.button-small,nav .button { font-size:15px; }
#einstieg .steps { gap:40px; }
#einstieg .steps article { position:relative; }
#einstieg .steps article > span { position:relative; z-index:1; display:flex; align-items:center; justify-content:center; width:52px; height:52px; margin:0 0 22px; padding:0; border:1px solid #b7d7e1; border-radius:50%; background:#eaf7fb; color:#085d78; font:600 17px/1 Arial,sans-serif; box-shadow:0 0 0 8px #fff; }
#einstieg .steps article:first-child > span { background:#ffcc23; border-color:#ffcc23; }
#einstieg .steps article:nth-child(2) > span { background:#b9e4f3; border-color:#9bcdde; color:#174d63; }
#einstieg .steps article:nth-child(3) > span { background:#c8e5d2; border-color:#acd2b9; color:#24513a; }
#einstieg .steps article:not(:last-child)::before { content:""; position:absolute; top:26px; left:68px; right:-24px; height:1px; background:#bed9e1; }
#einstieg .steps article:not(:last-child)::after { content:""; position:absolute; top:22px; right:-23px; width:7px; height:7px; border-top:1px solid #8aafb9; border-right:1px solid #8aafb9; transform:rotate(45deg); }
@media(max-width:820px) {
 .section-intro .section-quote { flex-basis:auto; }
}
@media(max-width:620px) {
 .hero-screens:has(.hero-office-monitor) { display:flex; flex-direction:column; gap:32px; }
 .hero-shot.hero-office-monitor { display:block; width:100%; max-width:420px; }
 .hero-screens:has(.hero-office-monitor) .hero-shot-primary { max-width:340px; }
 .hero-shot .phone-frame { max-width:272px; }
 .role-gallery .phone-frame,.evidence-shots .phone-frame { max-width:260px; }
 .context-photo { margin-top:23px; max-width:100%; }
 .context-photo figcaption { font-size:11px; }
 .section-intro .section-quote,.pain-section .section-intro .section-quote,.billing-types-heading .section-quote { max-width:100%; margin-top:22px; padding-left:17px; }
 .section-intro .section-quote p,.billing-types-heading .section-quote p { font-size:16px; }
 .button,.actions .button,.closing-actions .button,dialog .button { font-size:16px; gap:10px; padding-inline:15px; }
 #einstieg .steps article { min-height:130px; padding:2px 0 25px 71px; margin:0; }
 #einstieg .steps article:last-child { min-height:0; padding-bottom:0; }
 #einstieg .steps article > span { position:absolute; left:0; top:0; width:46px; height:46px; font-size:16px; }
 #einstieg .steps article:not(:last-child)::before { top:58px; bottom:12px; left:23px; right:auto; width:1px; height:auto; }
 #einstieg .steps article:not(:last-child)::after { top:auto; bottom:13px; left:20px; right:auto; transform:rotate(135deg); }
}