/* Shared touch, tablet and phone layout; desktop branding stays unchanged. */
.header-planning-note { flex: 0 1 170px; margin: 0 .75rem; color: #ffca05; font-size: .72rem; line-height: 1.5; text-align: center; }
@media (max-width: 1180px) {
  .header { flex-wrap: wrap; }
  .header-planning-note { order: 3; flex: 1 0 100%; margin: 0; font-size: .68rem; }
  .header-planning-note br { display: none; }
}
/* Keep every edge of the JB artwork visible at all viewport sizes. */
.header .brand img, .footer .brand img { object-fit: contain; object-position: center; transform: none; }
.maker { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 120px; gap: 1.25rem 1rem; align-content: start; }
.maker > .maker-name { grid-column: 1; grid-row: 1; align-self: center; overflow-wrap: anywhere; }
.maker > p { grid-column: 1 / -1; grid-row: 2; }
.maker-photo { margin: 1.25rem 0 0; }
.maker-photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; background: #f5f6f5; border-radius: 6px; }
.maker-photo figcaption { margin-top: .4rem; font-size: .72rem; color: var(--muted); }
.maker-photo.maker-logo { grid-column: 2; grid-row: 1; width: 120px; margin: 0; justify-self: end; align-self: start; }
.maker-photo.maker-logo img { width: 100%; height: 64px; aspect-ratio: auto; padding: 10px; object-fit: contain; object-position: center; background: #fff; }
@media (max-width: 480px) {
  .maker { grid-template-columns: minmax(0, 1fr) 90px; padding: 1.25rem; gap: 1rem .75rem; }
  .maker-photo.maker-logo { width: 90px; }
  .maker-photo.maker-logo img { height: 52px; padding: 7px; }
}
/* Semantic elements retain the original typography. */
.pillars .pillar-title { font-size: .95rem; font-weight: 700; margin: 0; }
.section h2.maker-name { display: inline; font-size: 2rem; font-weight: 800; letter-spacing: -.08em; line-height: inherit; margin: 0; max-width: none; }
/* Equal image frames for every service, on desktop and mobile. */
.service-grid > .service-card { min-width: 0; overflow: hidden; }
.service-grid > .service-card:hover { transform: none; }
.service-image.real-service-photo[data-service] { display: block; position: relative; width: auto; min-width: 0; height: auto; aspect-ratio: 3 / 2; overflow: hidden; isolation: isolate; }
.service-image.real-service-photo[data-service] img,
.accordion-card:hover .service-image.real-service-photo[data-service] img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; transform: none; filter: none; }
.hero::before { background: linear-gradient(90deg, rgba(8,10,12,.86), rgba(8,10,12,.62) 48%, rgba(8,10,12,.15)), url('public/images/hero-jb-hintergrund.jpg') center / cover no-repeat; opacity: 1; }
.hero-content { text-shadow: 0 2px 16px rgba(0,0,0,.6); }
.hero .button { text-shadow: none; }
@media (max-width:760px) {
  .hero::before { background-image: linear-gradient(rgba(8,10,12,.72), rgba(8,10,12,.65)), url('public/images/hero-jb-hintergrund.jpg'); background-position: center, 42% center; }
}
html { scroll-padding-top: 145px; }
:focus-visible { outline: 2px solid #ffca05; outline-offset: 4px; }
.contact-modal { max-height: calc(100dvh - 2rem); overflow-y: auto; overscroll-behavior: contain; }
body:has(.contact-modal[open]) { overflow: hidden; }
@media (max-width: 1180px) {
  html { scroll-padding-top: 110px; }
  .header { height: auto; min-height: 96px; padding: .5rem 1rem; gap: .75rem; }
  .header-brand-group { flex: 1; gap: .75rem; min-width: 0; }
  .header .brand { min-width: 0; width: 155px; flex: 0 0 155px; height: 80px !important; }
  .header .brand img { width: 100%; height: 100%; object-fit: contain; }
  .header-partner { display: block; width: 210px; height: auto; max-width: 100%; }
  .header-partner img { object-fit: contain; }
  .menu-toggle { display: block; width: 44px; height: 44px; flex: 0 0 44px; cursor: pointer; }
  .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; padding: 1rem; background: #0d1114; border-bottom: 1px solid var(--line); max-height: calc(100dvh - 110px); overflow-y: auto; gap: .25rem; align-items: stretch; }
  .nav.open { display: flex; flex-direction: column; }
  .nav > a { display: flex; align-items: center; min-height: 44px; padding: .75rem 1rem; }
  .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-trigger { padding: 1.25rem; gap: .75rem; grid-template-columns: 38px minmax(0, 1fr) auto; }
  .service-trigger b, h1, h2, h3 { overflow-wrap: anywhere; }
  .contact-layout, .about-grid { gap: 2rem; }
  .contact-layout > *, .about-grid > *, .footer-grid > * { min-width: 0; }
  .footer a, .contact-info dd { overflow-wrap: anywhere; }
  input, select, textarea { font-size: 16px; min-width: 0; width: 100%; }
  .button, .text-link, .modal-close { min-height: 44px; }
  .text-link { display: inline-flex; align-items: center; }
  .modal-close { width: 44px; }
  .modal-panel h2 { padding-right: 2rem; }
}
@media (max-width: 760px) {
  .header { min-height: 84px; padding: .375rem .75rem; gap: .5rem; }
  .header-brand-group { gap: .5rem; }
  .header .brand { width: 112px; flex-basis: 112px; height: 70px !important; }
  .header .header-partner { width: clamp(110px, 34vw, 180px); height: auto; min-height: 44px; display: flex; align-items: center; border-radius: 5px; }
  .header-partner img { height: auto; }
  html { scroll-padding-top: 96px; }
  .nav { max-height: calc(100dvh - 96px); }
  .hero { min-height: auto; padding: 3.5rem 1.25rem; }
  .hero h1, .page-head h1 { font-size: clamp(2rem, 8.5vw, 3.5rem); }
  .service-grid { grid-template-columns: minmax(0, 1fr); }
  .service-extra { margin: 0 1.25rem; }
  .button-row { align-items: stretch; }
  .button-row .button { flex: 1 1 180px; }
  .service-image[data-service] img, .accordion-card:hover .service-image[data-service] img { transform: none; object-fit: contain; }
  .aufmasspro-partner { scroll-margin-top: 96px; }
  .aufmasspro-partner img { aspect-ratio: auto; height: auto; object-fit: contain; opacity: 1; }
  .partner-copy { position: static; padding: 1rem; }
  .contact-modal { width: calc(100% - 1rem); max-height: calc(100dvh - 1rem); }
  .modal-panel { padding: 1.25rem; }
  .trust { padding: 1.25rem; }
  .section { padding: 3rem 1rem; }
  .section-head { gap: 1rem; margin-bottom: 1.75rem; }
  .section h2, .contact-band h2 { font-size: clamp(1.8rem, 7vw, 2.6rem); }
  .lead { margin: 0; }
  .page-head { padding: 3rem 1rem; }
  .hero-content, .page-head > *, .contact-band > * { min-width: 0; max-width: 100%; }
  .hero p, .page-head p { line-height: 1.65; }
  .service-grid { border: 0; gap: 1rem; }
  .service-grid > .service-card { border: 1px solid var(--line); border-radius: 10px; }
  .service-trigger { min-height: 100px; padding: 1rem; align-items: center; }
  .service-image.real-service-photo[data-service] { margin: 0 1rem 1rem; }
  .service-extra { margin: 0 1rem; padding-bottom: 1rem; }
  .service-extra p, .service-card p, .trust p, .detail-list p, .maker p { font-size: .95rem !important; line-height: 1.65; }
  .trust-grid { grid-template-columns: minmax(0, 1fr); }
  .trust { min-height: auto; }
  .trust h3 { margin-top: 1rem; }
  .contact-band { padding: 2.5rem 1rem; gap: 1rem; }
  .contact-band .button { width: 100%; }
  .button { min-height: 48px; font-size: .875rem; }
  .footer { padding: 2.5rem 1rem 1.5rem; }
  .footer p, .footer a { font-size: .9rem; }
  .footer-grid > div:nth-child(2) a, .footer-bottom a { display: inline-flex; align-items: center; min-height: 44px; margin-right: 1rem; }
  .footer-grid > div:nth-child(2) a { display: flex; }
  .footer-bottom > span { max-width: 100%; overflow-wrap: anywhere; }
  .modal-panel { padding-top: 3.75rem; }
  .modal-panel h2 { padding-right: 0; }
  .modal-hotline a { display: inline-block; padding: .35rem 0; }
  .modal-panel .button { width: 100%; }
  .nav { overscroll-behavior: contain; padding-bottom: max(1rem, env(safe-area-inset-bottom)); }
  .nav > a { font-size: 1rem; }
}
@media (max-width: 360px) {
  .header .brand { flex-basis: 96px; width: 96px; }
  .header .header-partner { width: 110px; }
  .hero { padding: 2.5rem 1rem; }
  .service-trigger { gap: .5rem; grid-template-columns: 32px minmax(0,1fr) 20px; }
  .service-trigger .icon { width: 32px; height: 32px; }
}
@media (hover: none) {
  .service-card:hover, .button:hover, .aufmasspro-partner > a:hover img { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
/* Match the small partner logo's header frame, not the large footer banner. */
.header { --header-logo-width: 330px; height: auto; padding-top: .5rem; padding-bottom: .5rem; }
.header .brand { width: var(--header-logo-width); min-width: 0; flex: 0 1 var(--header-logo-width); height: auto !important; aspect-ratio: 3 / 1; }
.header .brand img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: contain; object-position: center; }
.header .header-partner { width: var(--header-logo-width); flex: 0 1 var(--header-logo-width); }
html { scroll-padding-top: 145px; }
@media (max-width: 1450px) {
  .header { --header-logo-width: 240px; }
  html { scroll-padding-top: 115px; }
}
@media (max-width: 1180px) {
  .header { --header-logo-width: 210px; }
  html { scroll-padding-top: 110px; }
}
@media (max-width: 760px) {
  .header { --header-logo-width: clamp(96px, 34vw, 180px); }
  .header-brand-group { flex: 1; }
  html { scroll-padding-top: 96px; }
}