:root{
    /* Akzentfarbe */
    --gm-accent:#ffcc00;
    --gm-accent-rgb:255,204,0;
    --gm-accent-contrast:#1a1a1a;   /* dunkler Text auf Gelb, ca. 11.5:1 Kontrast (WCAG AAA) */

    /* Glassmorphism – Feintuning */
    --gm-glass-blur:20px;
    --gm-glass-saturate:160%;
    --gm-glass-bg-opacity:0.3;
    --gm-glass-bg-hover-opacity:.22;
    --gm-glass-border-opacity:.38;
    --gm-glass-border-rgb:255,255,255;

    --gm-glass-bg:rgba(150,125,50,var(--gm-glass-bg-opacity));
    --gm-glass-bg-hover:rgba(255,255,255,var(--gm-glass-bg-hover-opacity));
    --gm-glass-border:rgba(var(--gm-glass-border-rgb),var(--gm-glass-border-opacity));

    /* CTA-Button: hohe Deckkraft, damit der dunkle Text auf Gelb IMMER
       WCAG-konform bleibt, unabhängig davon, was im Hintergrundbild liegt */
    --gm-cta-bg-opacity:.88;
    --gm-cta-border-opacity:.7;

    --gm-text:#ffffff;
    --gm-text-dim:rgba(255,255,255,.75);

    /* USP-Bauchbinde (Marquee) */
    --gm-ticker-height:52px;
    --gm-ticker-duration:75s;
    --gm-ticker-gap:44px;

    /* Hero-Höhe: nie höher als das Maximum, schrumpft auf kurzen Viewports mit,
       damit nichts abgeschnitten wird */
    --gm-hero-max-height:882px;

    /* Verfügbare Höhe für die Kategorien-Seitenleiste: Hero-Höhe minus Platz
       für die Bauchbinde unten minus Luft, damit die Karte nie ins Ticker
       hineinragt oder vom overflow:hidden der Hero abgeschnitten wird */
    --gm-panel-max-height:calc(min(var(--gm-hero-max-height), 100vh) - var(--gm-ticker-height) - 64px);
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}

  /* ---- full-bleed hero ---- */
  .gm-hero{
    height:min(var(--gm-hero-max-height), 100vh);
    min-height:400px;
    display:flex;
    align-items:center;
  }
  .gm-hero-img{
    object-fit:cover;
    object-position:center 30%;
  }
  .gm-hero-scrim{
    background:linear-gradient(100deg, rgba(0,0,0,.4) 0%, rgba(0,0,0,.05) 55%, rgba(0,0,0,.25) 100%);
    pointer-events:none;
  }

  /* ---- glass category panel ---- */
  .gm-panel{
    /* mobile-first: schwebendes Glass-Overlay, per Toggle ein-/ausgeblendet */
    position:absolute;
    z-index:4;
    top:76px;
    left:16px;
    right:16px;
    /*max-height:calc(var(--gm-panel-max-height) - 76px);*/
    overflow-y:auto;
    background:var(--gm-glass-bg);
    border:1px solid var(--gm-glass-border);
    border-radius:20px;
    backdrop-filter:blur(var(--gm-glass-blur)) saturate(var(--gm-glass-saturate));
    -webkit-backdrop-filter:blur(var(--gm-glass-blur)) saturate(var(--gm-glass-saturate));
    box-shadow:0 12px 40px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.45);
    color:var(--gm-text);
    opacity:0;
    transform:translateY(-12px);
    pointer-events:none;
    transition:opacity .25s ease, transform .25s ease;
  }
  .gm-panel.is-open{
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
  }
  .gm-panel::-webkit-scrollbar{width:6px;}
  .gm-panel::-webkit-scrollbar-thumb{background:rgba(255,255,255,.35);border-radius:6px;}

  @media (min-width:768px){
    /* ab md: Panel wird Teil des Grid-Layouts statt schwebendes Overlay */
    .gm-panel{
      position:static;
      max-height:625px;
      opacity:1;
      transform:none;
      pointer-events:auto;
      transition:none;
      animation:gm-slide-in .5s ease both;
    }
  }
  @keyframes gm-slide-in{
    from{opacity:0; transform:translateX(-16px);}
    to{opacity:1; transform:translateX(0);}
  }
  @media (prefers-reduced-motion:reduce){
    .gm-panel{animation:none;}
  }

  .gm-panel-title{
    font-size:1rem;
    letter-spacing:.08em;
  }
  .gm-panel-accent{
    width:34px;
    height:3px;
    background:var(--gm-accent);
    border-radius:3px;
  }

  .gm-nav-link{
    border-radius:12px;
    border-left:3px solid transparent;
    color:var(--gm-text-dim);
    text-decoration:none;
    font-size:.86rem;
    font-weight:600;
    transition:background .2s ease, color .2s ease, transform .2s ease, border-color .2s ease;
  }
  .gm-nav-link:hover{
    background:var(--gm-glass-bg-hover);
    color:var(--gm-text);
    transform:translateX(3px);
  }
  /* Icon pro Menüpunkt kommt als SVG über die --icon Custom Property (inline style
     am jeweiligen .gm-nav-icon) statt als Font-Icon-Glyph. mask-image + currentColor
     sorgt dafür, dass Hover-/Active-Einfärbung wie zuvor bei Font Awesome erhalten bleibt. */
  .gm-nav-icon{
    display:inline-block;
    flex:0 0 auto;
    width:1.7em;
    height:1em;
    background-color:currentColor;
    -webkit-mask-image:var(--icon);
    mask-image:var(--icon);
    -webkit-mask-repeat:no-repeat;
    mask-repeat:no-repeat;
    -webkit-mask-position:center;
    mask-position:center;
    -webkit-mask-size:contain;
    mask-size:contain;
    transition:filter .2s ease;
  }
  .gm-nav-item.is-active .gm-nav-link{
    background:rgba(var(--gm-accent-rgb),.16);
    border-left-color:var(--gm-accent);
    color:var(--gm-accent);
  }
  .gm-nav-item.is-active .gm-nav-icon{
    filter:drop-shadow(0 0 5px rgba(var(--gm-accent-rgb),.7));
  }

  /* ---- mobile toggle ---- */
  .gm-toggle{
    top:20px;
    left:20px;
    width:46px;
    height:46px;
    z-index:5;
    background:var(--gm-glass-bg);
    border:1px solid var(--gm-glass-border);
    backdrop-filter:blur(var(--gm-glass-blur));
    -webkit-backdrop-filter:blur(var(--gm-glass-blur));
    color:var(--gm-text);
    cursor:pointer;
  }
  .gm-toggle:focus-visible{ outline:2px solid var(--gm-accent); outline-offset:2px; }

  /* ---- hero headline ---- */
  .gm-hero-title-main{
    opacity:0;
    transform:translateX(-60px);
    animation:gm-slide-lr .8s cubic-bezier(.16,1,.3,1) .2s both;
    font-weight:900;
    font-size:clamp(3.4rem, 8vw, 8.5rem);
    line-height:.92;
    text-transform:uppercase;
    letter-spacing:-.01em;
    color:#FFCC00;
    transition:text-shadow .3s ease;
    cursor:pointer;
  }
  .gm-hero-title-main a{
    opacity:0;
    transform:translateX(-60px);
    animation:gm-slide-lr .8s cubic-bezier(.16,1,.3,1) .2s both;
    font-weight:900;
    font-size:clamp(3.4rem, 8vw, 8.5rem);
    line-height:.92;
    text-transform:uppercase;
    letter-spacing:-.01em;
    color:#FFCC00;
    transition:text-shadow .3s ease;
    cursor:pointer;
  }
  .gm-hero-title-main:hover{
    text-shadow:0 0 18px rgba(var(--gm-accent-rgb),.85), 0 0 46px rgba(var(--gm-accent-rgb),.55);
  }
  .gm-hero-title-sub{
    font-size:clamp(1.05rem, 1.6vw, 1.67rem)!important;
    font-weight:400;
    color:#fff;
    text-shadow:0 4px 18px rgba(0,0,0,.65);
    opacity:0;
    transform:translateX(-40px);
    animation:gm-slide-lr .75s cubic-bezier(.16,1,.3,1) .5s both;
  }
  .gm-hero-title-sub strong{ font-weight:800; color:var(--gm-accent); }

  @keyframes gm-slide-lr{
    from{ opacity:0; transform:translateX(-60px); }
    to{ opacity:1; transform:translateX(0); }
  }

  .gm-hero-cta{
    opacity:0;
    transform:translateY(14px);
    animation:gm-fade-up .6s ease 1.15s both;
  }
  @keyframes gm-fade-up{
    from{ opacity:0; transform:translateY(14px); }
    to{ opacity:1; transform:translateY(0); }
  }

  @media (prefers-reduced-motion:reduce){
    .gm-hero-title-main, .gm-hero-title-sub, .gm-hero-cta{ animation:none; opacity:1; transform:none; }
  }

  /* ---- configurator CTA ---- */
  .gm-cta-tag{
    background:rgba(10,10,10,.72);
    border:1px solid rgba(255,255,255,.25);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    color:#fff;
    font-size:.78rem;
    font-weight:700;
  }
  .gm-cta-btn{
    position:relative;
    overflow:hidden;
    background:rgba(var(--gm-accent-rgb), var(--gm-cta-bg-opacity));
    border:1px solid rgba(var(--gm-accent-rgb), var(--gm-cta-border-opacity));
    backdrop-filter:blur(var(--gm-glass-blur)) saturate(var(--gm-glass-saturate));
    -webkit-backdrop-filter:blur(var(--gm-glass-blur)) saturate(var(--gm-glass-saturate));
    color:var(--gm-accent-contrast);
    font-weight:900;
    font-size:1.05rem;
    width:100%;
    text-decoration:none;
    box-shadow:0 8px 30px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.5);
    transition:transform .3s ease, box-shadow .3s ease, background .3s ease;
  }
  .gm-cta-btn::before{
    content:"";
    position:absolute;
    top:0;
    left:-60%;
    width:40%;
    height:100%;
    background:linear-gradient(120deg, transparent, rgba(255,255,255,.65), transparent);
    transform:skewX(-20deg);
    transition:left .6s ease;
  }
  .gm-cta-btn:hover, .gm-cta-btn:focus{
    color:var(--gm-accent-contrast);
    transform:translateY(-3px);
    background:rgba(var(--gm-accent-rgb), 1);
    box-shadow:0 16px 44px rgba(var(--gm-accent-rgb),.5), inset 0 1px 0 rgba(255,255,255,.6);
  }
  .gm-cta-btn:hover::before{ left:120%; }
  .gm-cta-btn:focus-visible{
    outline:2px solid #fff;
    outline-offset:3px;
  }
  .gm-cta-arrow{ transition:transform .3s ease; }
  .gm-cta-btn:hover .gm-cta-arrow{ transform:translateX(6px); }
  @media (prefers-reduced-motion:reduce){
    .gm-cta-btn, .gm-cta-arrow, .gm-cta-btn::before{ transition:none; }
  }

  /* ---- USP-Bauchbinde (Marquee) ---- */
  .gm-ticker{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    z-index:2;
    height:var(--gm-ticker-height);
    overflow:hidden;
    background:var(--gm-glass-bg);
    border-top:1px solid var(--gm-glass-border);
    backdrop-filter:blur(var(--gm-glass-blur)) saturate(var(--gm-glass-saturate));
    -webkit-backdrop-filter:blur(var(--gm-glass-blur)) saturate(var(--gm-glass-saturate));
  }
  .gm-ticker-track{
    display:flex;
    align-items:center;
    height:100%;
    width:max-content;
    animation:gm-marquee var(--gm-ticker-duration) linear infinite;
    will-change:transform;
  }
  .gm-ticker:hover .gm-ticker-track,
  .gm-ticker:focus-within .gm-ticker-track{
    animation-play-state:paused;
  }
  @keyframes gm-marquee{
    from{ transform:translateX(0); }
    to{ transform:translateX(-50%); }
  }
  .gm-ticker-group{
    display:flex;
    align-items:center;
    flex:0 0 auto;
  }
  .gm-ticker-item{
    display:inline-flex;
    align-items:center;
    flex:0 0 auto;
    white-space:nowrap;
    padding-right:var(--gm-ticker-gap);
    color:var(--gm-text);
    font-size:.82rem;
    font-weight:700;
    letter-spacing:.02em;
    transition:color .2s ease, transform .2s ease;
    cursor:pointer;
  }
  .gm-ticker-item:hover{
    color:var(--gm-accent);
    transform:translateY(-1px);
  }
  .gm-ticker-item i{
    color:var(--gm-accent);
    margin-right:8px;
    transition:filter .2s ease;

  }
  .gm-ticker-item:hover i{
    filter:drop-shadow(0 0 5px rgba(var(--gm-accent-rgb),.7));
  }
  .gm-ticker-sep{
    flex:0 0 auto;
    color:var(--gm-accent);
    opacity:.7;
    margin-right:var(--gm-ticker-gap);
  }
  @media (prefers-reduced-motion:reduce){
    .gm-ticker-track{ animation:none; }
  }
  @media (max-width:767px){
    :root{ --gm-ticker-height:44px; --gm-ticker-gap:28px; }
    .gm-ticker-item{ font-size:.72rem; }
  }

  /* ---- mobile: Inhalt bis dicht an den Bildschirmrand ---- */
  @media (max-width:767px){
    .gm-hero-content-col{ padding-left:16px; padding-right:16px; }
    .gm-cta-btn{ width:100%; }
    .gm-hero-title-main, .gm-hero-title-main a{ font-size:5rem; }
  }