/* === RESPONSIVE === */

@media (max-width: 1024px) {
  .page-hero--media {
    display: grid;
    grid-template-rows: auto auto;
    grid-template-columns: minmax(0, 1fr);
    height: auto;
    min-height: 0;
    /* Bild beginnt unterhalb der fixen Navigationsleiste (sonst verdeckt sie den oberen Bildrand) */
    padding: var(--navbar-height) 0 0;
    overflow: visible;
  }

  .page-hero--media .page-hero__image {
    position: relative;
    inset: auto;
    grid-row: 1;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    background-position: center;
    background-size: contain;
  }

  .page-hero--media .page-hero__overlay {
    display: none;
  }

  .page-hero--media .page-hero__content {
    grid-row: 2;
    width: 100%;
    max-width: none;
    margin-left: 0;
    padding: clamp(2.75rem, 7vw, 4.5rem) var(--container-padding);
    text-align: left;
  }

  .grid--4, .grid--4-cols,
  .journal-grid-main, .project-grid-main {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .features {
    grid-template-columns: repeat(2, 1fr);
  }

  .journal-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .location {
    grid-template-columns: 1fr;
  }

  .contact-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Einspaltig: Telefon, Oeffnungszeiten und Terminanfrage vor dem Formular */
  .contact-info {
    order: -1;
  }

  .service-block {
    grid-template-columns: 1fr;
  }

  .team-profiles {
    grid-template-columns: 1fr;
  }

  .stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  :root {
    --navbar-height: 85px;
  }

  .services-heading {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }

  .service-card-grid {
    grid-template-columns: 1fr;
  }

  .card--product-world {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .card--product-world > :first-child,
  .card--product-world > :not(:first-child) {
    grid-column: 1;
    grid-row: auto;
  }

  .card--product-world > :first-child {
    min-height: 0;
    aspect-ratio: 3 / 2;
  }

  .service-card {
    min-height: 0;
  }

  .service-card__media {
    height: auto;
  }

  .service-card__content {
    transform: none;
  }

  .service-card__link {
    opacity: 1;
    transform: none;
  }

  .service-detail__grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .service-detail--reverse .service-detail__media {
    order: 0;
  }

  .service-detail__media {
    aspect-ratio: 3 / 2;
  }

  .team-feature {
    grid-template-columns: 1fr;
  }

  .navbar__menu {
    display: none;
  }

  .navbar__toggle {
    display: flex;
  }

  .grid--2, .grid--2-cols, .grid--3, .grid--3-cols, .grid--4, .grid--4-cols,
  .journal-grid-main, .project-grid-main {
    grid-template-columns: 1fr;
  }

  .features {
    grid-template-columns: 1fr;
  }

  .footer__grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .footer__brand {
    justify-content: center;
  }

  .footer__legal {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
  }

  .hero {
    display: grid;
    grid-template-rows: auto auto;
    grid-template-columns: minmax(0, 1fr);
    height: auto;
    min-height: 0;
    padding-top: var(--navbar-height);
  }

  .hero__content {
    grid-row: 2;
    width: 100%;
    margin-left: 0;
    padding: 2rem var(--container-padding) clamp(3rem, 8vw, 4rem);
    text-align: left;
  }

  .hero__eyebrow,
  .hero__title {
    margin-bottom: 1.25rem;
  }

  .hero__subtitle {
    margin-bottom: 1.75rem;
  }

  .hero__image {
    position: relative;
    inset: auto;
    grid-row: 1;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2; /* Kampagnenbild unbeschnitten (Guideline S. 26) */
    background-size: cover;
    background-position: center;
  }

  .hero__image--start {
    background-image: url('../../Fotos/brand-campaign-beo-grace-2026-1200.webp');
  }

  .map-embed--fill {
    height: auto;
    margin-top: 0;
  }

  .hero__overlay,
  .hero .scroll-indicator {
    display: none;
  }

  .hero__title {
    letter-spacing: 0;
  }

  .hero__actions {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
  }

  .hero__actions .btn {
    width: 100%;
    max-width: 300px;
  }

  .form-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .form-actions .btn {
    width: 100%;
  }

  .page-hero {
    height: auto;
    min-height: 430px;
    padding: 6rem 0 3rem;
  }

  .page-hero--media {
    display: grid;
    grid-template-rows: auto auto;
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    padding: var(--navbar-height) 0 0;
  }

  .page-hero--media .page-hero__image {
    position: relative;
    inset: auto;
    grid-row: 1;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    background-size: contain;
    background-position: center;
  }

  .page-hero--service .page-hero__image {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .page-hero--media .page-hero__overlay {
    display: none;
  }

  .page-hero--media .page-hero__content {
    grid-row: 2;
    width: 100%;
    max-width: none;
    margin-left: 0;
    padding: clamp(2.5rem, 8vw, 4rem) var(--container-padding);
    text-align: left;
  }

  .product-detail__media {
    min-height: 0;
  }

  .project-featured__image {
    min-height: 320px;
  }

  .product-worlds {
    grid-template-columns: 1fr;
  }

  .journal-grid {
    grid-template-columns: 1fr;
  }

  .gallery {
    grid-template-columns: 1fr;
  }

  .team {
    grid-template-columns: 1fr;
  }

  .team-profile {
    grid-template-columns: 1fr;
  }

  .stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .marquee__item {
    font-size: 0.9rem;
  }

  .grid--stagger > *:nth-child(even) {
    transform: none;
  }

  .section {
    padding: clamp(4rem, 8vw, 6rem) 0;
  }

  .cta-banner {
    padding: var(--space-xl) var(--container-padding);
  }
}

@media (max-width: 576px) {
  .btn {
    max-width: 100%;
    padding-right: 1.35rem;
    padding-left: 1.35rem;
    text-align: center;
    white-space: normal;
  }

  .team-profile {
    grid-template-columns: 1fr;
  }

  .store-facts {
    grid-template-columns: 1fr;
  }

  .store-facts > div {
    min-height: 5.5rem;
  }

  .hero__subtitle {
    font-size: var(--font-size-body);
  }

  .hero__content {
    padding-top: 1.5rem;
  }

  .hero__title {
    font-size: 2.3rem;
  }

  /* "Bang & Olufsen" bleibt bei 320-360 px als Wort zusammen statt mittig zu brechen */
  .contact-info h2 {
    font-size: clamp(1.5rem, 7.5vw, 2rem);
  }

  .hero .eyebrow {
    max-width: 18rem;
    line-height: 1.6;
  }

  .navbar__logo {
    font-size: 0;
  }

  .navbar__toggle {
    flex: 0 0 44px;
    width: 44px;
  }

  .product-detail__media {
    min-height: 0;
  }

  .project-featured__image {
    min-height: 240px;
  }

  .btn--lg {
    padding: 1rem 2rem;
    font-size: var(--font-size-xs);
  }

  .stats {
    grid-template-columns: 1fr;
  }

  .footer__grid {
    gap: var(--space-lg);
  }

  .scroll-indicator {
    bottom: 2rem;
  }
}

/* Flache Laptop-Displays (z. B. 1366x768): Scroll-Hinweis wuerde in die Button-Zeile ragen */
@media (min-width: 769px) and (max-height: 820px) {
  .hero .scroll-indicator {
    display: none;
  }
}

/* === DRUCK === */
@media print {
  .navbar, .mobile-menu, .skip-link, .scroll-indicator, .page-transition-overlay, .grain-overlay,
  .map-embed, .cta-banner, .footer__nav, .footer__brand, .btn, .section__action, .form-actions, .form-status,
  .hero__image, .hero__overlay, .hero__gradient,
  .page-hero__image, .page-hero__overlay, .page-hero__gradient {
    display: none !important;
  }

  html, body, .hero, .page-hero, .section, .section--dark, .section--light, .section--white, .section--anthracite,
  .footer, .contact-form-wrapper, .contact-info, .card, .service-card, .product-detail, .service-detail__media {
    background: #fff !important;
    color: #000 !important;
  }

  body {
    font-size: 11pt;
    line-height: 1.5;
  }

  h1, h2, h3, h4, p, li, a, span, strong, .eyebrow, .footer__text, .footer__link, .footer__heading, .footer__legal,
  .page-hero__subtitle, .hero__subtitle, .form-label, .form-helper, .privacy-note {
    color: #000 !important;
  }

  .hero, .page-hero, .page-hero--media {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 0 1rem !important;
  }

  .hero__content, .page-hero__content {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  main > .section:first-child {
    padding-top: 0 !important;
  }

  .section, .product-detail {
    padding: 1.25rem 0 !important;
    overflow: visible !important;
  }

  .reveal, .reveal--left, .reveal--right, .reveal--scale {
    opacity: 1 !important;
    transform: none !important;
  }

  h1, h2, h3 {
    break-after: avoid;
    page-break-after: avoid;
  }

  p, li {
    orphans: 3;
    widows: 3;
  }

  a {
    text-decoration: underline;
  }

  .contact-grid, .footer__grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 1rem !important;
  }

  .footer {
    padding: 1rem 0 !important;
    border-top: 1px solid #000 !important;
  }

  .form-input, .form-textarea, .form-select {
    border: 1px solid #000 !important;
    background: #fff !important;
  }
}