/*!
 * Rollen-Navigation (Bannerdruck.net) – Flyout-Menü mit Banner-Rollen-Effekt
 * Flyouts rollen hinter der Trennlinie des Headers hervor. Die Rolle fährt nach unten
 * und staucht während der Bewegung auf Höhe 0 (gerade Unterkante, normale Ecken).
 * Benötigt: rollen-nav.js
 */

/* ---------- Einstellungen ---------- */
.rn-header{
  --rn-l:3px;                 /* Linienstärke (skaliert Rolle mit)            */
  --rn-c:#1B3142;             /* Linienfarbe                                  */
  --rn-fill:#FFFFFF;          /* Innenfläche Flyout                           */
  --rn-roll:#F6A508;          /* Rollenfarbe                                  */
  --rn-t-out:.30s;            /* Ausfahren                                    */
  --rn-t-in:.90s;             /* Einfahren                                    */
  --rn-peek:.45;              /* sichtbarer Teil der Rolle unter der Linie (0–1; 0 = ganz versteckt) */
  --rn-max:1208px;            /* max. Breite des Flyouts                      */
  --rn-ease:cubic-bezier(.3,.6,.35,1);

  --rn-over:calc(var(--rn-l) * 7.2704);
  --rn-rollH:calc(var(--rn-l) * 16.5532);
}

/* ---------- Header + Trennlinie ---------- */
.rn-header{position:relative;z-index:50;border-bottom:var(--rn-l) solid var(--rn-c);
  margin-bottom:calc(var(--rn-rollH) * var(--rn-peek))} /* Platz für den sichtbaren Teil der Rolle */
.rn-header.rn-sticky{position:sticky;top:0}

/* ---------- Menüleiste ---------- */
#main_nav .rn-list{list-style:none;margin:0;padding:0;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
#main_nav .rn-list::-webkit-scrollbar{display:none}
.rn-item{position:static;--rn-t:var(--rn-t-in)}
.rn-item.open{--rn-t:var(--rn-t-out)}
.rn-link{position:relative;display:flex;align-items:center;gap:6px;padding:12px 14px 14px;font-weight:800;white-space:nowrap;color:inherit;text-decoration:none}
.rn-link::after{content:"";position:absolute;left:14px;right:14px;bottom:0;height:var(--rn-l);background:var(--rn-roll);transform:scaleX(0);transition:transform .15s ease}
.rn-item:hover>.rn-link::after,.rn-item.open>.rn-link::after,.rn-link[aria-current=page]::after{transform:scaleX(1)}
.rn-caret{width:10px;height:6px;transition:transform var(--rn-t) ease}
.rn-item.open .rn-caret{transform:rotate(180deg)}

/* ---------- Flyout ---------- */
.rn-fly{position:absolute;left:0;right:0;top:100%;margin-top:var(--rn-l);overflow:hidden;pointer-events:none;padding-bottom:6px}
.rn-item.open .rn-fly{pointer-events:auto;z-index:2}
.rn-panel{position:relative;width:min(var(--rn-max) - var(--rn-over),calc(100% - 32px - var(--rn-over)));margin:0 auto;translate:calc(var(--rn-over) / -2) 0;
  background:var(--rn-fill);border:var(--rn-l) solid var(--rn-c);border-top:0;
  border-radius:0 0 calc(var(--rn-l) * .503) calc(var(--rn-l) * 10.012) / 0 0 calc(var(--rn-l) * .503) calc(var(--rn-l) * 11.942);
  transform:translateY(calc(-100% + var(--rn-rollH) * var(--rn-peek)));
  transition:transform var(--rn-t) var(--rn-ease),border-bottom-left-radius var(--rn-t) var(--rn-ease)}
.rn-item.open .rn-panel{transform:none;border-bottom-left-radius:calc(var(--rn-l) * .503)}
/* ist ein Menü offen oder fährt gerade ein, übernimmt dessen Rolle – die übrigen ruhenden Rollen ausblenden */
#main_nav:is(:has(.rn-item.open),:has(.rn-item.closing)) .rn-item.rn-has-fly:not(.open):not(.closing) .rn-panel{visibility:hidden;transition:none}
.rn-inner{padding:26px 28px calc(var(--rn-rollH) * .55 + 18px);display:flex;flex-wrap:wrap;align-items:flex-start;gap:22px 32px}

/* Rolle an der Unterkante */
.rn-roll{position:absolute;left:calc(var(--rn-l) * -1);right:calc(var(--rn-l) * -1 - var(--rn-over));bottom:calc(var(--rn-l) * -1);height:var(--rn-rollH);display:flex;
  transform-origin:50% 100%;transition:transform var(--rn-t) var(--rn-ease);pointer-events:none}
.rn-item.open .rn-roll{transform:scaleY(0)}
.rn-roll svg{display:block;flex:none;height:100%;overflow:visible}
.rn-roll .curl{width:calc(var(--rn-l) * 18.7434)}
.rn-roll .cap{width:calc(var(--rn-l) * 8.2766)}
.rn-roll .mid{flex:1;margin:0 -.5px;background:var(--rn-roll);border-block:var(--rn-l) solid var(--rn-c)}
.rn-roll .ln{fill:var(--rn-c)}.rn-roll .f-in{fill:var(--rn-fill)}.rn-roll .f-roll{fill:var(--rn-roll)}

/* ---------- Inhalt der Flyouts (optional, frei anpassbar) ---------- */
.rn-col{flex:1 1 170px;display:grid;align-content:start;gap:2px;min-width:0}
.rn-col h3{margin:0 0 6px;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;opacity:.7}
.rn-col a{padding:5px 0;font-weight:600;color:inherit;text-decoration:none;overflow-wrap:break-word}
.rn-col a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.rn-all{flex-basis:100%;display:flex;align-items:center;gap:8px;font-weight:800;padding-bottom:14px;border-bottom:2px solid rgba(27,49,66,.08);color:inherit;text-decoration:none}
.rn-promo{flex:1.6 1 260px;max-width:420px;display:grid;align-content:space-between;gap:14px;padding:20px;border:var(--rn-l) solid var(--rn-c);border-radius:16px;background:#DDEFE3;color:inherit;text-decoration:none;min-height:180px}

@media (max-width:760px){.rn-inner{padding:20px 18px calc(var(--rn-rollH) * .55 + 14px)}}
@media (prefers-reduced-motion:reduce){.rn-panel,.rn-roll,.rn-caret{transition:none!important}}