/*
 * MDH MASTER-DESIGN v1.8.4
 * Shared hero-grid + proportional responsive orbit geometry.
 * This file is intentionally brand-neutral. Project colors/backgrounds remain in each theme.
 *
 * Layout variables can be overridden per project without touching orbit geometry:
 *   --master-hero-copy: 3fr;
 *   --master-hero-visual: 2fr;
 * Default is now 60/40 for more text space; projects can still override these variables locally.
 */
:root{
  --master-hero-copy:3fr;
  --master-hero-visual:2fr;
  --master-hero-gap:54px;
  --master-orbit-max:560px;
  --master-orbit-core:39.285714%;
  --master-orbit-satellite:26.428571%;
  --master-orbit-outer:90%;
  --master-orbit-inner:60%;
  --master-orbit-radius:37cqi;
  --master-orbit-duration:48s;
}

/* MASTER-DESIGN v1.8.4 — gemeinsame Headerhöhe.
   Referenz: Marqentra. Desktop 86 px, Mobile 72 px. */
:root{
  --master-header-height:86px;
  --master-header-height-mobile:72px;
}
.topbar,
.site-header{
  min-height:var(--master-header-height)!important;
}
.topbar{
  height:var(--master-header-height)!important;
}
.topbar-inner,
.header-inner{
  height:var(--master-header-height)!important;
  min-height:var(--master-header-height)!important;
}
@media(max-width:800px){
  .topbar,
  .site-header{
    min-height:var(--master-header-height-mobile)!important;
  }
  .topbar{
    height:var(--master-header-height-mobile)!important;
  }
  .topbar-inner,
  .header-inner{
    height:var(--master-header-height-mobile)!important;
    min-height:var(--master-header-height-mobile)!important;
  }
  /* Bei den Topbar-Projekten sitzt das mobile Menü direkt unter dem Header. */
  .topbar .nav{
    top:calc(var(--master-header-height-mobile) + 6px)!important;
  }
}

/* One shared hero grid across the product family. */
.master-hero-grid{
  display:grid!important;
  grid-template-columns:minmax(0,var(--master-hero-copy)) minmax(0,var(--master-hero-visual))!important;
  column-gap:var(--master-hero-gap)!important;
  row-gap:28px!important;
  align-items:center!important;
}
.master-hero-grid>*{min-width:0!important}

/* Orbit stage. Geometry is relative to the actually available visual column. */
.master-orbit-stage{
  width:100%!important;
  min-width:0!important;
  min-height:0!important;
  display:grid!important;
  place-items:center!important;
  overflow:visible!important;
}
.master-orbit{
  position:relative!important;
  width:min(100%,var(--master-orbit-max))!important;
  max-width:var(--master-orbit-max)!important;
  height:auto!important;
  min-height:0!important;
  aspect-ratio:1/1!important;
  margin-inline:auto!important;
  display:grid!important;
  place-items:center!important;
  isolation:isolate!important;
  overflow:visible!important;
  transform:none!important;
  container-type:inline-size;
}
.master-orbit-track{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  padding:0!important;
  transform:none!important;
  animation:none!important;
  pointer-events:none!important;
}

/* Marqentra-reference ring geometry: 90% outer / 60% inner. */
.master-orbit-ring{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  right:auto!important;
  bottom:auto!important;
  margin:0!important;
  border-radius:50%!important;
  transform:translate(-50%,-50%)!important;
  animation:none!important;
  pointer-events:none!important;
  display:block!important;
}
.master-orbit-ring-outer{width:var(--master-orbit-outer)!important;height:var(--master-orbit-outer)!important;inset:auto!important}
.master-orbit-ring-inner{width:var(--master-orbit-inner)!important;height:var(--master-orbit-inner)!important;inset:auto!important}

/* MDH-reference proportions for the center. Branding stays project-specific. */
.master-orbit-core{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  right:auto!important;
  bottom:auto!important;
  z-index:4!important;
  width:var(--master-orbit-core)!important;
  height:auto!important;
  min-width:0!important;
  min-height:0!important;
  aspect-ratio:1/1!important;
  margin:0!important;
  padding:clamp(10px,2.3cqi,18px)!important;
  border-radius:50%!important;
  transform:translate(-50%,-50%)!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  overflow:hidden!important;
}
.master-orbit-core img{
  width:auto!important;
  height:auto!important;
  max-width:62%!important;
  max-height:42%!important;
  object-fit:contain!important;
  flex:0 1 auto!important;
}
.master-orbit-core strong{font-size:clamp(14px,3.5cqi,20px)!important;line-height:1.08!important}
.master-orbit-core small{font-size:clamp(7px,1.75cqi,10px)!important;line-height:1.2!important;max-width:88%!important}

/* MDH-reference satellite proportions; project surfaces/colors remain untouched. */
.master-orbit-satellite{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  right:auto!important;
  bottom:auto!important;
  z-index:5!important;
  width:var(--master-orbit-satellite)!important;
  min-width:0!important;
  max-width:none!important;
  height:auto!important;
  min-height:0!important;
  aspect-ratio:1.32/1!important;
  margin:0!important;
  padding:clamp(8px,2.1cqi,13px)!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:clamp(3px,.9cqi,7px)!important;
  text-align:center!important;
  overflow:hidden!important;
  will-change:transform;
  animation-duration:var(--master-orbit-duration)!important;
  animation-timing-function:linear!important;
  animation-iteration-count:infinite!important;
  animation-fill-mode:both!important;
}
.master-orbit-satellite>.satellite-card{
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  margin:0!important;
  padding:clamp(8px,2.1cqi,13px)!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  overflow:hidden!important;
}
.master-orbit-satellite img{
  width:auto!important;
  height:auto!important;
  max-width:42%!important;
  max-height:42%!important;
  object-fit:contain!important;
  flex:0 1 auto!important;
}
.master-orbit-satellite>div:not(.satellite-card){min-width:0!important;width:100%!important;text-align:center!important}
.master-orbit-satellite>span:first-child,
.master-orbit-satellite>.satellite-card>b:first-child{font-size:clamp(7px,1.4cqi,9px)!important;line-height:1!important}
.master-orbit-satellite>b,
.master-orbit-satellite>strong,
.master-orbit-satellite>div>span,
.master-orbit-satellite>.satellite-card>strong{font-size:clamp(10px,2.45cqi,14px)!important;line-height:1.14!important;margin:0!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important}
.master-orbit-satellite>small,
.master-orbit-satellite>div>small,
.master-orbit-satellite>.satellite-card>small{font-size:clamp(7px,1.65cqi,9.5px)!important;line-height:1.2!important;margin:0!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important}

/* One orbit motion for every project. The transform itself stays !important so legacy client rules cannot win.
   Only the registered angle is animated; counter-rotation keeps every card upright. */
@property --master-orbit-angle{syntax:"<angle>";inherits:false;initial-value:0deg}
.master-orbit-satellite{
  --master-orbit-angle:0deg;
  transform:translate(-50%,-50%) rotate(var(--master-orbit-angle)) translateX(var(--master-orbit-radius)) rotate(calc(0deg - var(--master-orbit-angle)))!important;
  animation-name:masterOrbitAngle!important;
  animation-delay:0s!important;
  animation-direction:normal!important;
  animation-play-state:running!important;
}
.master-orbit-sat-a{animation-delay:-36s!important}
.master-orbit-sat-b{animation-delay:0s!important}
.master-orbit-sat-c{animation-delay:-12s!important}
.master-orbit-sat-d{animation-delay:-24s!important}
@keyframes masterOrbitAngle{from{--master-orbit-angle:0deg}to{--master-orbit-angle:360deg}}

/* A single family breakpoint. Below it, the grid stacks but the orbit remains proportional. */
@media(max-width:1050px){
  .master-hero-grid{grid-template-columns:minmax(0,1fr)!important;row-gap:32px!important}
  .master-orbit-stage{padding:8px 0 14px!important}
  .master-orbit{width:min(100%,520px)!important}
}
@media(max-width:620px){
  .master-hero-grid{row-gap:24px!important}
  .master-orbit{width:min(100%,440px)!important}
  .master-orbit-satellite{padding:clamp(5px,1.8cqi,8px)!important}
  .master-orbit-satellite>.satellite-card{padding:clamp(5px,1.8cqi,8px)!important}
  .master-orbit-satellite>small,
  .master-orbit-satellite>div>small,
  .master-orbit-satellite>.satellite-card>small{display:none!important}
}
@media(max-width:380px){
  .master-orbit-core small{display:none!important}
  .master-orbit-satellite>b,
  .master-orbit-satellite>strong,
  .master-orbit-satellite>div>span,
  .master-orbit-satellite>.satellite-card>strong{font-size:clamp(8px,2.7cqi,10px)!important}
}

@media(prefers-reduced-motion:reduce){
  .master-orbit-satellite{animation:none!important;will-change:auto!important}
  .master-orbit-sat-a{--master-orbit-angle:270deg}
  .master-orbit-sat-b{--master-orbit-angle:0deg}
  .master-orbit-sat-c{--master-orbit-angle:90deg}
  .master-orbit-sat-d{--master-orbit-angle:180deg}
}


/* MASTER-DESIGN v1.8.4 — verbindliche Zweizeilen-Headline für längere Hero-Titel.
   Die Klasse ist brand-neutral und wird nur dort aktiviert, wo eine feste Zweizeilen-Headline benötigt wird. */
@media (min-width:1051px){
  .master-two-line-title{
    font-size:clamp(54px,3.6vw,60px)!important;
    line-height:.98!important;
    letter-spacing:-.055em!important;
    max-width:none!important;
  }
  .master-two-line-title .master-title-line{
    display:block!important;
    white-space:nowrap!important;
    overflow:visible!important;
    max-width:none!important;
  }
}
@media (max-width:1050px){
  .master-two-line-title .master-title-line{
    display:block!important;
    white-space:normal!important;
  }
}