/* Inhaltliche Entwürfe vom 15.10.2026. Header/Footer ausschließlich in site.css. */
.design-page { color: var(--black); background: var(--white); }
.content-container { width: min(calc(100% - var(--space-l) - var(--space-l)), var(--content-width)); margin-inline: auto; }
.design-page h1, .design-page h2, .design-page h3 { color: var(--gray-90); }
.design-page p { margin: 0; hyphens: auto; }
.design-page p + p { margin-top: var(--space-xl); }
.content-columns { display: grid; grid-template-columns: minmax(0, 476fr) minmax(0, 708fr); gap: var(--space-3xl) var(--space-2xl); align-items: start; }
.design-page .content-claim { margin-top: var(--space-2xl); }
.content-claim img { width: 338px; max-width: 100%; height: auto; }
.content-hero { position: relative; height: 100svh; min-height: 600px; color: var(--white); background: var(--black); overflow: hidden; }
.coming-soon { display: grid; place-items: center; padding: var(--space-l); text-align: center; }
.design-page .coming-soon h1 { color: var(--white); letter-spacing: normal; }
.design-page .contact-hero { height: auto; min-height: 100svh; padding-block: calc(var(--utility-height) + var(--primary-height) + var(--space-xl)) var(--space-xl); }
.contact-card { display: grid; justify-items: center; gap: var(--space-xl); }
.contact-card address { display: grid; justify-items: center; gap: var(--space-xl); font-style: normal; }
.contact-card p, .contact-card dl { margin: 0; }
.contact-card dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: var(--space-m); text-align: left; }
.contact-card dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.contact-card a { color: inherit; }
.contact-card a:focus-visible { outline: 2px solid var(--yellow); outline-offset: var(--space-2xs); }
@media (max-width:1200px) { .contact-hero { padding-top: calc(var(--mobile-header) + var(--space-xl)); } }
.coming-soon__brands { display: flex; align-items: center; justify-content: center; gap: var(--space-2xl); padding: 0; margin: 0 0 var(--space-2xl); list-style: none; }
.coming-soon__brands img { width: auto; height: clamp(8px, 2.7vw, 40px); }
.coming-soon__brands li:first-child img { height: calc(clamp(8px, 2.7vw, 40px) * 1.3); }
.coming-soon__brands li:nth-child(2) img { height: calc(clamp(8px, 2.7vw, 40px) * 0.85); }
.content-hero__image, .content-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; }
.design-page--home .content-hero__video { object-position: center bottom; }
.content-hero__overlay { position: absolute; left: 0; bottom: 0; width: min(60%,1000px); height: auto; opacity: .4; pointer-events: none; }
.content-hero__ai-label { display: none; }
@media (min-width: 1171px) {
  .design-page--development-b .content-hero__image { object-position: 58% center; transform: translateX(2%) scale(1.05); }
  .content-hero__ai-label { position: absolute; right: var(--space-l); bottom: var(--space-l); display: block; width: 190px; height: auto; }
}
/* Erste Präsentation: Standbild und separates Overlay vorübergehend ausblenden. */
.design-page--home .content-hero__image, .design-page--home .content-hero__overlay { display: none; }
.design-page--home .content-hero.is-video-unavailable .content-hero__image { display: block; opacity: 1; }
.design-page--home .content-hero.is-video-unavailable .content-hero__overlay { display: block; opacity: .4; }
.content-hero.is-video-playing .content-hero__image, .content-hero.is-video-playing .content-hero__overlay { opacity: 0; }
.content-hero.is-video-finished .content-hero__image { opacity: 1; transition: opacity 1200ms ease-in-out; }
.content-hero.is-video-finished .content-hero__overlay { opacity: .4; transition: opacity 1200ms ease-in-out; }
@media (prefers-reduced-motion: reduce) {
  .design-page--home .content-hero__image, .design-page--home .content-hero__overlay { display: block; }
  .content-hero__video { display: none; }
  .content-hero--video-only .content-hero__video { display: block; }
  .content-hero.is-video-finished .content-hero__image, .content-hero.is-video-finished .content-hero__overlay { transition: none; }
}
.content-hero__copy { position: relative; padding-top: calc(var(--utility-height) + var(--primary-height) + var(--space-3xl)); }
.content-hero__copy h1 { max-width: 780px; color: var(--white); }
.content-hero__copy p { margin-top: var(--space-l); }
.design-page--tests .content-hero::after {
  content: '';
  position: absolute;
  inset: 30% 0 0;
  background: linear-gradient(to bottom, transparent 0%, color-mix(in srgb, var(--black) 12%, transparent) 35%, color-mix(in srgb, var(--black) 58%, transparent) 70%, color-mix(in srgb, var(--black) 80%, transparent) 100%);
  pointer-events: none;
}
.content-hero__playback { position: absolute; right: var(--space-2xl); bottom: var(--space-2xl); z-index: 2; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; color: var(--white); background: var(--gray-90); cursor: pointer; }
.content-hero__playback svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.content-hero__playback circle { fill: none; stroke-width: 2; }
.content-hero__progress-track { stroke: var(--gray-60); }
.content-hero__progress { stroke: currentColor; stroke-dasharray: 100; stroke-dashoffset: 100; transform: rotate(-90deg); transform-origin: center; }
.content-hero__playback :is([data-video-play], [data-video-pause])[hidden] { display: none; }
.content-hero__playback:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }
.design-page--tests .content-hero__copy {
  position: absolute;
  inset: auto 0 var(--space-3xl);
  z-index: 1;
  padding-top: 0;
}
.home-intro { padding-block: var(--space-3xl) var(--space-4xl); }
/* Startseite: gestaffelte Titelzeilen und ein mitlaufender Einstieg in die Textabsätze. */
.home-title__line { display: block; overflow: clip; padding-right: var(--space-xs); }
.home-title__line > span { display: block; }
.home-title__line > .reveal-ready { opacity: 0; transform: translate3d(calc(0px - var(--space-3xl)), 0, 0); }
.home-title__line > .is-visible { opacity: 1; transform: none; transition: opacity 600ms ease-out, transform 1200ms cubic-bezier(.16, 1, .3, 1); transition-delay: 200ms; }
.home-title__line + .home-title__line > .is-visible { transition-delay: 650ms; }
.design-page--home .content-hero__copy > p.is-visible { transition-delay: 950ms; }
.home-intro .content-copy { overflow-x: clip; }
.home-intro .content-copy > .reveal-ready { opacity: 0; transform: translate3d(var(--space-xl), var(--space-xl), 0); }
.home-intro .content-copy > .is-visible { opacity: 1; transform: none; }
@media (min-width: 1171px) {
  .home-intro > h2 { position: sticky; top: calc(var(--utility-height) + var(--primary-height) + var(--space-3xl)); }
}
@media (prefers-reduced-motion: reduce), print {
  .home-title__line > span, .home-intro .content-copy > p { opacity: 1; transform: none; transition: none; }
}
.design-page--company, .design-page--quality { padding-top: calc(var(--utility-height) + var(--primary-height)); }
.company-visual { background: url('../images/20261015-kartengitter.webp') center top / 1600px 60px repeat; }
.company-visual__heading { position: relative; height: 230px; padding-top: var(--space-3xl); }
.company-map { margin: 0; }
.company-map__scroll { overflow-x: auto; }
.company-map img { width: 100%; height: auto; }
.company-map__caption { padding: var(--space-m) var(--space-l) var(--space-xl); }
.company-map__legend { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-l) var(--space-xl); padding: 0; margin: 0; list-style: none; }
.company-locations { position: absolute; z-index: 1; inset: var(--space-2xl) 0 auto; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-l); }
.company-location { width: 322px; padding: var(--space-l); }
.company-location--hanau { color: var(--black); background: var(--yellow); }
.design-page .company-location--kobe { margin-top: var(--space-2xl); color: var(--white); background: var(--map-kobe); }
.company-editorial { padding-block: var(--space-3xl) var(--space-4xl); }
.development-editorial { padding-block: var(--space-3xl) var(--space-2xl); }
.development-opening { max-width: 710px; }
.development-opening p { width: 710px; max-width: 100%; }
.development-opening h2 { width: 850px; max-width: calc(100vw - var(--space-l) - var(--space-l)); }
.development-editorial h2 + p, .development-responsibility h2 + p, .test-editorial h2 + p { margin-top: var(--space-xl); }
.development-balance { width: 708px; max-width: 100%; margin: var(--space-2xl) 0 0 auto; }
.development-responsibility { padding-block: var(--space-2xl); background: var(--gray-20); }
.development-responsibility .content-container { margin-inline: auto; }
.development-closing { padding-block: var(--space-3xl) var(--space-4xl); }
.development-closing > div { width: 708px; max-width: 100%; margin-left: auto; }
.development-closing .content-claim { margin-top: 0; margin-bottom: var(--space-xl); }
.test-editorial { padding-block: var(--space-3xl); }
.test-introduction { width: calc((100% - var(--space-3xl)) / 2); margin-inline: auto; }
.design-page .test-section-title { position: relative; margin-block: var(--space-3xl) var(--space-3xl); text-align: center; }
.test-section-title::before { display: block; width: 50px; height: 2px; margin: 0 auto var(--space-l); background: var(--yellow); content: ''; }
.test-indoor, .test-outdoor { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-3xl); align-items: start; }
.test-layout--a .test-indoor, .test-layout--a .test-outdoor { position: relative; }
.test-layout--a .test-indoor::before, .test-layout--a .test-outdoor::before {
  position: absolute; top: calc(0px - var(--space-3xl)); bottom: 0; left: 50%; width: 2px; transform: translateX(-50%);
  background: repeating-linear-gradient(to bottom, var(--map-kobe-lighter) 0 var(--space-s), transparent var(--space-s) var(--space-l));
  opacity: .5; pointer-events: none; content: '';
}
.test-layout--a .test-indoor::before { bottom: calc(0px - var(--space-3xl)); mask-image: linear-gradient(to bottom, transparent, var(--black) var(--space-3xl)); }
.test-indoor > div { padding-top: var(--space-2xl); }
.test-outdoor > div { padding-top: var(--space-4xl); }
.test-lab, .test-preview { margin: 0; }
.test-preview { position: relative; }
.test-lab { width: 70%; margin-left: auto; }
.test-lab > img { display: block; width: 100%; height: auto; }
.test-lab figcaption { margin-top: var(--space-l); }
.test-preview img { width: 100%; height: auto; }

.design-page--legal { padding-top: calc(var(--utility-height) + var(--primary-height)); }
.legal-content { max-width: 900px; padding-block: var(--space-3xl) var(--space-4xl); }
.legal-content section { margin-top: var(--space-2xl); }
.legal-content h2 { margin-bottom: var(--space-l); overflow-wrap: anywhere; }
.legal-content a { color: inherit; overflow-wrap: anywhere; }
.legal-content__company-name { white-space: nowrap; }
.privacy-content h3 { margin-block: var(--space-xl) var(--space-l); }
.privacy-content ul { padding-left: var(--space-xl); }
.privacy-overview li + li { margin-top: var(--space-xs); }
.privacy-content section { scroll-margin-top: calc(var(--utility-height) + var(--primary-height) + var(--space-l)); }
.quality-opening { padding-block: var(--space-3xl) var(--space-3xl); }
.quality-opening > p:last-child { max-width: 1120px; margin-top: var(--space-xl); }
.design-page .quality-subline { margin-top: var(--space-l); }
.quality-certificates { padding-block: var(--space-3xl) var(--space-4xl); color: var(--white); background: var(--black); }
.quality-certificates h2 { min-width: 0; margin-bottom: var(--space-xl); color: var(--white); font-size: var(--h1); }
.certificate-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--space-xl); max-width: 1115px; }
.certificate-card { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; min-width: 0; padding: var(--space-xl) var(--space-l) var(--space-xl); color: var(--black); background: var(--white); }
.certificate-card p { hyphens: manual; }
.certificate-title { margin-bottom: var(--space-l); color: var(--black); text-align: center; }
.certificate-title__name { font-size: 22px; }
.certificate-preview { display: block; width: min(100%, 320px); margin: var(--space-xl) auto; color: var(--black); text-decoration: none; }
.certificate-preview img { width: 100%; height: auto; aspect-ratio: 110 / 63; object-fit: cover; object-position: top; box-shadow: 0 2px 14px rgb(0 0 0 / 20%); }
.certificate-preview__label { display: block; margin-top: var(--space-m); text-align: center; text-decoration: underline; text-underline-offset: var(--space-2xs); }
.certificate-note { padding-top: var(--space-l); border-top: 1px solid var(--yellow); }
.certificate-note p + p { margin-top: var(--space-l); }
.certificate-preview:focus-visible { outline: 3px solid var(--black); outline-offset: var(--space-xs); }
.document-viewer { width: fit-content; max-width: calc(100vw - var(--space-l) - var(--space-l)); max-height: calc(100svh - var(--space-l) - var(--space-l)); padding: 0; border: 0; overflow: visible; color: var(--white); background: transparent; font-family: var(--font); }
.document-viewer[open] { display: flex; flex-direction: column; align-items: center; gap: var(--space-s); }
.document-viewer::backdrop { background: rgb(0 0 0 / 65%); }
.document-viewer__controls { position: relative; width: 100%; min-height: 44px; }
.document-viewer__toolbar { position: absolute; top: 0; left: 50%; display: flex; justify-content: center; gap: var(--space-s); transform: translateX(-50%); }
.document-viewer__toolbar[hidden] { display: none; }
.document-viewer button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; color: inherit; background: transparent; cursor: pointer; }
.document-viewer svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.document-viewer button:disabled { cursor: default; opacity: .45; }
.document-viewer button:focus-visible { outline: 3px solid currentColor; outline-offset: var(--space-2xs); }
.document-viewer__page { position: relative; width: fit-content; max-width: 100%; }
.document-viewer__image { width: auto; max-width: 100%; max-height: calc(100svh - var(--space-l) - var(--space-l) - 44px - var(--space-s)); height: auto; margin: 0; object-fit: contain; }
button.document-viewer__close { position: absolute; top: 0; right: 0; }
@media (forced-colors: active) {
  .document-viewer__toolbar, button.document-viewer__close { color: CanvasText; background: Canvas; }
}
@media (max-width:1200px) {
  .design-page--company, .design-page--quality, .design-page--legal { padding-top: var(--mobile-header); }
  .content-hero__copy { padding-top: calc(var(--mobile-header) + var(--space-3xl)); }
}
@media (max-width:1170px) {
  .content-hero__image, .content-hero__video { object-position: 65% center; }
  .design-page--home .content-hero__image, .design-page--home .content-hero__video { height: calc(100% + 50px); }
  .design-page--home .content-hero__image { object-position: calc(100% + 600px) bottom; }
}
@media (max-width:800px) {
  .content-hero { min-height: 560px; }
  .design-page--tests .content-hero { height: 60svh; min-height: 0; }
  .content-hero__overlay { width: min(85%,520px); }
  .content-hero__copy h1 { max-width: 100%; }
  .content-hero__copy p, .design-page .quality-subline { hyphens: none; }
  .content-columns, .test-indoor, .test-outdoor { grid-template-columns: 1fr; }
  .test-layout--a .test-indoor::before, .test-layout--a .test-outdoor::before { display: none; }
  .company-visual__heading { height: auto; min-height: 200px; padding-bottom: var(--space-xl); }
  .company-map img { width: 100%; }
  .company-map__caption { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal; }
  .company-locations { position: relative; inset: auto; flex-wrap: wrap; }
  .company-location { width: min(322px,100%); }
  .design-page .company-location--kobe { margin-top: 0; }
  .development-opening h2 { width: auto; }
  .test-introduction { width: auto; }
  .test-lab { width: min(100%,530px); margin-inline: auto; }
  .test-lab figcaption { margin-left: 0; }
  .test-indoor > div, .test-outdoor > div { padding-top: 0; }
  .certificate-grid { grid-template-columns: 1fr; }
  .certificate-card { grid-row: auto; grid-template-rows: auto; }
}

@media (max-width:599px) {
  .content-hero__overlay { width: 95%; }
}
@media (max-width:520px) {
  .design-page--development .content-hero { height: 65svh; min-height: 480px; }
  .design-page--development .content-hero::after { position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--black) 70%, transparent), transparent 90%); pointer-events: none; content: ''; }
  .design-page--development .content-hero__copy { z-index: 1; }
  .coming-soon__brands { flex-direction: column; gap: var(--space-2xl); }
  .coming-soon__brands img { height: clamp(18px, 5vw, 24px); max-width: 70vw; }
  .coming-soon__brands li:first-child img { height: calc(clamp(18px, 5vw, 24px) * 1.3); }
  .coming-soon__brands li:nth-child(2) img { height: calc(clamp(18px, 5vw, 24px) * .85); }
}