/* ==========================================================================
   Veltech — mobile navigation.
   Auf schmalen Fenstern steht die Menuezeile der Seite ueber den Rand und
   verschwindet auf hellem Untergrund. Hier steht sie als schwimmende Kapsel
   ueber dem Bild: Wortzeichen links, zwei Balken rechts, dahinter das ganze
   Menue. Auf breiten Fenstern bleibt die originale Zeile unangetastet.
   ========================================================================== */

/* Breite Fenster: Kapsel und Menue bleiben unsichtbar. */
.vmn-bar,
.vmn-panel{display:none}

@media (max-width:860px){
  /* Die originale Zeile der Seite tritt hinter die Kapsel zurueck. */
  html.t-flat body header.top{display:none !important}

  /* --- Die schwimmende Kapsel ------------------------------------------ */
  .vmn-bar{
    display:flex !important;
    position:fixed;
    z-index:1010;
    top:calc(10px + env(safe-area-inset-top,0px));
    left:12px;
    right:12px;
    align-items:center;
    justify-content:space-between;
    height:52px;
    padding:0 8px 0 18px;
    box-sizing:border-box;
    border-radius:999px;
    background:rgba(15,16,16,.72);
    border:1px solid rgba(255,255,255,.16);
    -webkit-backdrop-filter:blur(16px) saturate(140%);
    backdrop-filter:blur(16px) saturate(140%);
    box-shadow:0 12px 34px rgba(0,0,0,.38);
    color:#fff;
  }

  .vmn-bar .vmn-logo{
    display:flex;
    align-items:center;
    color:#fff !important;
    line-height:1;
    white-space:nowrap;
  }
  .vmn-bar .vmn-logo span{font-size:18px !important}

  /* Der mittlere Ruf — auf sehr schmalen Gerichten rueckt er weg. */
  .vmn-bar .vmn-tag{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    font-family:"Suisse Mono",monospace;
    font-size:10px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:rgba(255,255,255,.58);
    white-space:nowrap;
  }

  /* --- Die zwei Balken -------------------------------------------------- */
  .vmn-burger{
    position:relative;
    z-index:2;
    flex:0 0 44px;
    width:44px;
    height:44px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
    padding:0;
    border:0;
    border-radius:999px;
    background:transparent;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .vmn-burger span{
    display:block;
    width:20px;
    height:1.5px;
    background:#fff;
    transition:transform .35s cubic-bezier(.7,0,.2,1);
  }
  html.vmn-open .vmn-burger span:first-child{transform:translateY(3.75px) rotate(45deg)}
  html.vmn-open .vmn-burger span:last-child{transform:translateY(-3.75px) rotate(-45deg)}

  /* --- Das Menue dahinter ------------------------------------------------ */
  .vmn-panel{
    display:flex !important;
    flex-direction:column;
    justify-content:space-between;
    position:fixed;
    inset:0;
    z-index:1005;
    box-sizing:border-box;
    padding:calc(80px + env(safe-area-inset-top,0px)) 24px calc(28px + env(safe-area-inset-bottom,0px));
    background:#0f1010;
    color:#fff;
    opacity:0;
    visibility:hidden;
    transform:translateY(-1.5%);
    transition:opacity .45s ease, transform .55s cubic-bezier(.7,0,.2,1), visibility .45s;
  }
  html.vmn-open .vmn-panel{opacity:1;visibility:visible;transform:none}

  .vmn-list{display:grid;gap:clamp(10px,2.4vh,18px);margin:0;padding:0;list-style:none}
  .vmn-list li{
    opacity:0;
    transform:translateY(14px);
    transition:opacity .5s ease, transform .6s cubic-bezier(.2,.8,.2,1);
  }
  html.vmn-open .vmn-list li{
    opacity:1;
    transform:none;
    transition-delay:calc(var(--i,0) * 70ms + 120ms);
  }
  .vmn-list a{
    display:flex;
    align-items:baseline;
    gap:12px;
    font-size:clamp(30px,9.5vw,44px);
    line-height:1.05;
    letter-spacing:-.035em;
    color:#fff;
    text-decoration:none;
  }
  .vmn-list a i{
    font-family:"Suisse Mono",monospace;
    font-style:normal;
    font-size:11px;
    letter-spacing:.06em;
    color:rgba(255,255,255,.38);
    transform:translateY(-.5em);
  }
  .vmn-list a.vmn-cta{color:var(--accent,#ff3b1d)}

  .vmn-foot{display:grid;gap:8px;font-family:"Suisse Mono",monospace;font-size:12px;text-transform:uppercase;letter-spacing:.04em}
  .vmn-foot a{color:rgba(255,255,255,.82);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.24);width:max-content;padding-bottom:3px}
  .vmn-foot .vmn-loc{color:rgba(255,255,255,.4)}

  /* Der Grundtext der Seite liegt hinter dem Menue still. */
  html.vmn-open body{overflow:hidden}
}

/* Erst auf den ganz schmalen Gerichten (320px) fehlt der Platz in der Mitte. */
@media (max-width:340px){
  .vmn-bar .vmn-tag{display:none}
}

/* ==========================================================================
   Fusszeile auf dem Telefon: die lange Adresse bricht, damit die Spalten
   nicht ueber den Rand wachsen.
   ========================================================================== */
@media (max-width:760px){
  html.t-flat body .site-footer .sf-meta,
  html.t-flat body .site-footer .sf-col,
  html.t-flat body .site-footer .sf-meta a,
  html.t-flat body .site-footer .sf-news span{
    min-width:0;
    overflow-wrap:anywhere;
  }
}