/*
 * Zweirad Oberländer – Designsystem
 * Gemeinsame visuelle Regeln über bestehenden Komponenten.
 * Bewusst als letzte, kleine Schicht: keine Layout-/Funktionslogik wird ersetzt.
 */
:root{
  --zo-radius-control:8px;
  --zo-radius-card:12px;
  --zo-radius-large:16px;
  --zo-radius-pill:9999px;
  --zo-shadow-s:0 1px 2px rgba(10,10,10,.05);
  --zo-shadow-m:0 5px 18px rgba(10,10,10,.07);
  --zo-shadow-l:0 18px 52px rgba(10,10,10,.16);
  --zo-section-normal:clamp(3rem,5vw,5rem);
  --zo-section-compact:clamp(2rem,3.5vw,3.5rem);
  --zo-section-large:clamp(4rem,7vw,7rem);
}

/* Eine gemeinsame Formensprache für interaktive Controls. */
.btn,.product-card__cta,.product-card__details-button,.closure-notice__workshop-button{
  border-radius:var(--zo-radius-control);
  min-height:44px;
  font-weight:800;
}

/* Kartenfamilie: gleiche Grundrundung und ruhige Schattierung. */
.product-card,.service-card,.contact-card,.trust-stat,.leasing-card{
  border-radius:var(--zo-radius-card);
}
.product-card,.service-card,.contact-card{
  box-shadow:var(--zo-shadow-s);
}
.product-card:hover,.service-card:hover,.contact-card:hover{
  box-shadow:var(--zo-shadow-m);
}

/* Badges sind Status/Kategorie; technische Eigenschaften bleiben eigene Chips. */
.product-card__badge{
  border-radius:var(--zo-radius-pill);
  font-weight:800;
  letter-spacing:.01em;
}
.product-card__spec,.bike-detail__specs span{
  border-radius:var(--zo-radius-control);
}

/* Dialoge bilden die große Rundungs-/Schattenstufe. */
.bike-detail__dialog,.modal__dialog{
  border-radius:var(--zo-radius-large);
  box-shadow:var(--zo-shadow-l);
}

/* Einheitlicher, gut sichtbarer Tastaturfokus. */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid var(--color-primary);
  outline-offset:3px;
}

/* Bewegungen bewusst kurz und konsistent halten. */
.btn,.product-card,.service-card,.contact-card,.product-card__details-button{
  transition-duration:160ms;
}

@media (prefers-reduced-motion:reduce){
  .btn,.product-card,.service-card,.contact-card,.product-card__details-button{
    transition:none!important;
    transform:none!important;
  }
}


/* v27.09 – Mobile-Abnahme: robuste Breiten, Touch-Ziele und Dialog-/Filterdarstellung. */
@media(max-width:860px){
  html,body{max-width:100%;overflow-x:hidden}
  :where(.btn,.product-card__cta,.product-card__details-button,.closure-notice__workshop-button){min-height:46px}
  .bike-detail__dialog{max-width:100vw}
  .bike-detail__content{min-width:0}
}
@media(max-width:600px){
  .bike-detail__head{padding-left:16px;padding-right:16px}
  .bike-detail__head h2{font-size:clamp(22px,7vw,28px)}
  .bike-detail__grid{padding-left:12px;padding-right:12px}
  .bike-detail__content h3{font-size:clamp(23px,7vw,28px);overflow-wrap:anywhere}
  .bike-detail__description{font-size:16px;line-height:1.6}
  .bike-detail__contact{min-height:50px}
  .catalog-quickfilters,.catalog-filters,.product-filters{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
  .catalog-quickfilters>*{flex:0 0 auto}
}

/* v27.11 – Hero-Medien: vollständiger Bildinhalt, adaptive Geometrie, keine Crops. */
.page-hero--split .page-hero__media--split > .page-hero__frame,
.page-hero--managed .page-hero__media--managed > .page-hero__frame{
  aspect-ratio:var(--zo-hero-frame-ratio,1.5)!important;
  background:#080908;
}
.page-hero--split .page-hero__media--split > .page-hero__frame > .page-hero__slide,
.page-hero--split .page-hero__media--split > .page-hero__frame > .page-hero__slide.is-active,
.page-hero--managed .page-hero__media--managed > .page-hero__frame > .page-hero__slide,
.page-hero--managed .page-hero__media--managed > .page-hero__frame > .page-hero__slide.is-active,
.page-hero--workshop .page-hero__media--split > .page-hero__frame > img{
  object-fit:contain!important;
  object-position:center!important;
  background:#080908;
}
@media(max-width:860px){
  .page-hero--split .page-hero__media--split > .page-hero__frame,
  .page-hero--managed .page-hero__media--managed > .page-hero__frame{
    width:calc(100% - 20px)!important;
    height:auto!important;
    max-width:none!important;
  }
}