/* Shared responsive refinements, loaded after each page's design styles. */
@media (max-width: 1024px) {
  .work-info, .work-info > div, .web-work-caption > div,
  .partner-heading > div, .section-heading > div,
  .collaboration-step > div, .benefit-item > div { min-width: 0; }
  .work-info h3, .web-work-caption h3, .customer-feedback h3,
  .collaboration-step h3, .planner-inline-cta h3 {
    overflow-wrap: anywhere;
    hyphens: auto;
  }
  .planner-page .hero-layout { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .planner-page .hero-wording { min-width: 0; }
  .planner-page .hero-wording h1 { font-size: clamp(48px,7.7vw,78px); }
  .reference-hero nav, nav[aria-label="Projekt auswählen"] {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 20px;
  }
  nav[aria-label="Projekt auswählen"] a { min-width: 0; min-height: 44px; }
}

/* The questions scroll inside the dialog; Back / Continue stay reachable. */
.funnel-dialog[open] {
  display: flex; flex-direction: column;
  height: min(860px,94dvh); max-height: 94dvh;
  overflow: hidden;
}
.funnel-dialog-header { flex: 0 0 auto; position: relative; }
#funnel-content { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.funnel-dialog .calculator-shell { height: 100%; align-items: stretch; overflow: hidden; }
.funnel-dialog .calculator-main {
  display: flex; flex-direction: column; min-height: 0; padding: 26px 30px 0;
}
.funnel-dialog .step-status, .funnel-dialog .step-track { flex-shrink: 0; }
.funnel-dialog .step-track { margin-bottom: 24px; }
.funnel-dialog #planner-step {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  overscroll-behavior-y: contain; scrollbar-gutter: stable;
  padding: 5px 10px 18px 5px; margin-left: -5px;
}
.funnel-dialog .step-controls {
  flex: 0 0 auto; margin: 0; padding: 16px 0;
  border-top: 1px solid #dce2d4; background: #fff;
}
.funnel-dialog .budget-panel { min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; }
.funnel-dialog .step-controls button, .funnel-dialog-header button { min-height: 44px; }

@media (max-width: 760px) {
  main h1, main h2 { overflow-wrap: anywhere; hyphens: auto; }
  .detail-steps { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .detail-steps > article { min-width: 0; overflow-wrap: anywhere; hyphens: auto; }
  .menu-toggle { min-width: 44px; min-height: 44px; align-items: center; }
  #navigation a, #navigation summary, .service-summary nav a,
  .footer-bottom a, .planner-footer nav a { min-height: 44px; display: inline-flex; align-items: center; }
  .services-menu > a { display: flex; }
  .button, .pill, .campaign-button, .report-image > span, .back-button { min-height: 48px; }
  .button, .pill, .campaign-button { white-space: normal; }
  input:not([type=checkbox]):not([type=radio]), textarea, select,
  form input:not([type=checkbox]):not([type=radio]), form textarea,
  .lead-fields > input, .form-extra select { font-size: 16px; }
  .hero-copy, .detail-intro, .scope-item p, .detail-case > div > p:not(.eyebrow),
  .service-summary p:not(.eyebrow), .service-summary dd, .company-summary > p:not(.eyebrow),
  .geo-feature > div > p:not(.eyebrow), .fit-grid p, .case-intro,
  .work-info p:not(.kicker), .section-heading > p, .benefit-item p,
  .collaboration-step p, .planner-faq details p { font-size: 14px; line-height: 1.75; }
  .proof-caption, .proof-disclosure, .small-note { font-size: 12px !important; line-height: 1.7 !important; }
  nav[aria-label="Projekt auswählen"] { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px 16px; }
  nav[aria-label="Projekt auswählen"] a { justify-content: space-between; padding: 10px 0; font-size: 12px; }
  nav[aria-label="Projekt auswählen"] a:last-child { grid-column: 1 / -1; }
  .detail-nav > .wrap { flex-wrap: wrap; gap: 8px 16px; }
  .detail-nav a { display: inline-flex; min-height: 40px; align-items: center; font-size: 11px; }
  .proof-metrics > div { min-width: 0; }
  .proof-metrics dd { font-size: clamp(32px,9.8vw,52px); }
  .proof-meta .proof-metrics dd { font-size: clamp(32px,9vw,46px); }
  .report-dialog { max-height: calc(100dvh - 24px); padding: 14px; }
  .report-dialog button { min-width: 44px; min-height: 44px; }
  .report-dialog-top h2 { overflow-wrap: anywhere; }
  .report-dialog-body, .report-dialog-body img { max-height: 65dvh; }
  .report-original { min-height: 44px; display: inline-flex; align-items: center; }
  .home-ads-card .report-image img { height: auto; min-height: 130px; max-height: 260px; object-fit: contain; }
  .customer-feedback .report-portrait { max-width: min(270px,100%); }
  .customer-feedback .feedback-amount { font-size: clamp(36px,10vw,54px) !important; }
  .planner-header { padding-inline: 20px; gap: 12px; }
  .planner-header .planner-brand { font-size: 22px; gap: 3px; flex-shrink: 0; }
  .planner-header .planner-brand span { font-size: 9px; }
  .planner-header .pill { padding: 11px 14px; font-size: 11px; }
  .planner-header nav { min-width: 0; }
  .planner-page .hero-layout { display: grid; grid-template-columns: minmax(0,1fr); }
  .planner-page .hero-wording h1 { font-size: clamp(40px,11.4vw,66px); }
  .hero-trust { flex-wrap: wrap; }
  .hero-trust > span { max-width: none; font-size: 9px; line-height: 1.6; }
  .hero-trust > span br { display: none; }
  .planner-page .hero-buttons .pill { min-height: 48px; }
  .partner-heading h2 { font-size: clamp(28px,7.7vw,40px); overflow-wrap: anywhere; }
  .partner-mark { flex-shrink: 0; }
  .work-info { gap: 12px; }
  .work-info h3 { font-size: clamp(27px,7vw,36px); }
  .work-index { flex-shrink: 0; }
  .planner-page .work-visual { padding: 25px 16px 44px; }
  .visit-pill { right: 12px; bottom: 10px; }
  .planner-page .work-card, .planner-page .work-card:first-child { margin-bottom: 48px; }
  .planner-inline-cta, .campaign-cta { min-width: 0; }
  .planner-inline-cta .pill { font-size: 13px; gap: 15px; }
  .planner-page .choice-content strong { font-size: 15px; line-height: 1.4; }
  .planner-page .choice-content > span { font-size: 13px; line-height: 1.55; }
  .choice-content > small { font-size: 11px; }
  .choice-content { min-width: 0; }
  .choice { padding: 16px 14px; min-height: 74px; }
  .planner-page .step-intro { font-size: 14px; }
  .planner-page .included-note { font-size: 12px; padding: 14px; }
  .planner-page .step-controls { flex-wrap: nowrap; }
  .planner-page #planner-next { font-size: 13px; padding: 14px 18px; gap: 12px; max-width: 100%; }
  .planner-page .back-button { flex-shrink: 0; font-size: 12px; }
  .lead-fields .lead-consent { font-size: 12px; }
  .lead-fields > label { font-size: 13px; }
  .lead-fields > input { min-height: 50px; }
  .portfolio-dialog { width: calc(100% - 20px); max-width: none; padding: 26px 20px; }
  .portfolio-dialog h2 { font-size: 28px; padding-right: 30px; overflow-wrap: anywhere; }
  .portfolio-dialog .portfolio-close { min-height: 44px; min-width: 44px; top: 12px; right: 12px; }
  .portfolio-controls { flex-wrap: wrap; font-size: 12px; }
  .portfolio-controls button { min-height: 44px; font-size: 12px; }
  .portfolio-screen { border-width: 5px; }
  .thanks-budget, .thanks-booking { padding: 28px 22px; min-width: 0; }
  .thanks-budget li { flex-wrap: wrap; gap: 6px 12px; font-size: 13px; }
  .thanks-budget li strong { white-space: nowrap; }
  .thanks-ongoing .ongoing-price { font-size: clamp(23px,6.5vw,30px); }
  .thanks-page .pill { max-width: 100%; gap: 16px; }
  .thanks-reference, .planner-footer a { overflow-wrap: anywhere; }
  .planner-footer nav { flex-wrap: wrap; }
}

@media (min-width: 761px) and (max-width: 900px) {
  .planner-page .hero-wording h1 { font-size: clamp(44px,5.8vw,52px); }
}

@media (max-width: 760px), (max-height: 550px) {
  .funnel-dialog[open] {
    width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh;
    margin: 0; border-radius: 0;
  }
  .funnel-dialog-header { padding: max(12px,env(safe-area-inset-top)) 18px 12px; }
  .funnel-dialog-header .kicker { margin-bottom: 4px; }
  .funnel-dialog-header h2 { font-size: 22px; }
  .funnel-dialog .calculator-shell { display: block; }
  .funnel-dialog .calculator-main { height: 100%; padding: 18px 18px 0; }
  .funnel-dialog .budget-panel { display: none; }
  .funnel-dialog .step-track { margin: 12px 0 18px; }
  .funnel-dialog .step-status > span:last-child { font-size: 7px; }
  .funnel-dialog #planner-step h3 { font-size: clamp(25px,6.8vw,32px); }
  .funnel-dialog .step-controls { padding: 12px 0 max(12px,env(safe-area-inset-bottom)); }
  .funnel-dialog .step-controls #planner-next { max-width: calc(100% - 66px); }
  .funnel-dialog .step-controls #planner-back[hidden] + #planner-next { max-width: 100%; }
}

@media (max-width: 375px) {
  .planner-header { padding-inline: 16px; gap: 8px; }
  .planner-header .pill { font-size: 10px; gap: 9px; padding-inline: 12px; }
  .partner-heading .partner-mark { display: none; }
  .planner-page .home-ads { padding-inline: 12px; }
  .home-ads-card { padding: 22px 16px; }
  .home-ads-card .proof-metrics { gap: 14px; }
  .proof-report { padding: 22px 16px; }
  .customer-feedback .feedback-amount { font-size: 36px !important; }
  .funnel-dialog-header h2 { font-size: 20px; }
  .funnel-dialog-header button { font-size: 11px; padding-inline: 10px; }
  .funnel-dialog .calculator-main { padding-inline: 14px; }
}

@media (max-height: 550px) {
  .funnel-dialog-header .kicker, .funnel-dialog .step-status > span:last-child { display: none; }
  .funnel-dialog-header { padding-block: 8px; }
  .funnel-dialog .calculator-main { padding-top: 10px; }
  .funnel-dialog .step-track { margin-block: 7px 10px; }
  .funnel-dialog .step-controls { padding-block: 8px; }
}
@media (hover:none) {
  .pill:hover { transform: none; }
}