/* tan-mobile.css – mobile Ansicht fuer das bestehende Layout (Stand 26.10.2026)
   Wird nach tan.css geladen und greift nur unter 920px Breite.
   Desktop bleibt unveraendert. Entfernen: Link in Chunk "headlinks" loeschen. */

.tan-menu-btn { display: none; }

@media screen and (max-width: 920px) {

  /* --- Grundgeruest: feste Breiten aufheben -------------------------- */
  html, body { overflow-x: hidden; }
  body { border: 0; margin: 0; }
  div#container { width: auto; padding-top: 0; }
  header, #shadow, #content, article, footer, nav.logistics,
  #zwischennavi, .marken, nav, div.mainnavi ul, div.mainnavi li,
  div.mainnavi ul li.wchild, .mainnavi ul li {
    width: auto;
  }
  #shadow { min-height: 0; box-shadow: none; padding-bottom: 0; }

  /* Reihenfolge: Menue, Inhalt, Adresse, Leistungen */
  #shadow { display: flex; flex-direction: column; overflow: visible; }
  #shadow > nav:not(.logistics) { display: contents; }
  #shadow > nav:not(.logistics) > .tan-menu-btn { order: 1; }
  #shadow > nav:not(.logistics) > .mainnavi { order: 2; }
  #content { order: 3; float: none; padding-bottom: 0; }
  #shadow > nav:not(.logistics) > section { order: 4; }
  nav.logistics { order: 5; }

  /* --- Kopf ----------------------------------------------------------- */
  header {
    height: auto; padding: 10px 15px;
    display: flex; justify-content: space-between; align-items: center;
    border-bottom: 1px solid #d9d9d9;
  }
  header > a { display: block; }
  .logo {
    position: static; width: 110px; height: 55px; padding: 0;
    background-size: contain; background-position: left center;
  }
  header div.right { width: auto; }
  .language { margin: 0; height: auto; font-size: 0; }   /* Text "Waehlen Sie..." aus, Flaggen bleiben */
  .language img { width: 32px; height: auto; padding: 0 0 0 8px; }
  .zoom:hover { transform: none; }
  header .right form, header .searcht, #tagcloud { display: none; }

  /* --- Menue ----------------------------------------------------------- */
  .tan-menu-btn {
    display: block; width: 100%; box-sizing: border-box;
    padding: 12px 15px; border: 0; border-bottom: 1px solid #d9d9d9;
    background: #002f56; color: #fff; text-align: left;
    font: 16px "Museo500", "trebuchet MS", Arial, sans-serif; cursor: pointer;
  }
  .tan-menu-btn::before { content: "\2630\00a0\00a0"; }
  .tan-nav-open .tan-menu-btn::before { content: "\2715\00a0\00a0"; }

  div.mainnavi { display: none; }
  .tan-nav-open div.mainnavi { display: block; }
  div.mainnavi ul { margin: 0; font-size: 16px; }
  div.mainnavi li, div.mainnavi ul li.wchild, .mainnavi ul li {
    height: auto; min-height: 44px; line-height: 44px;
    padding-left: 15px; position: relative; cursor: pointer;
  }
  div.mainnavi ul li.wchild { background-image: linear-gradient(#fff, #dcdcdc); }   /* alte Pfeilgrafik zeigt nach rechts */
  div.mainnavi ul li.wchild:has(> ul)::after {
    content: "+"; position: absolute; right: 15px; top: 0;
    font-size: 20px; color: #002f56;
  }
  div.mainnavi ul li.wchild.open::after { content: "\2212"; }
  div.mainnavi a { display: block; }

  /* Untermenues: nur per Antippen (Klasse "open"), nie per Hover */
  div.mainnavi ul ul, div.mainnavi ul ul ul,
  div.mainnavi ul li:hover ul, div.mainnavi ul li.hover ul,
  div.mainnavi ul li ul li:hover ul li, div.mainnavi ul li ul li.hover ul li {
    display: none !important;
    position: static; left: auto; top: auto; margin: 0 0 0 -15px;
  }
  div.mainnavi ul li.open > ul { display: block !important; }
  div.mainnavi ul li.open > ul > li { display: block !important; }
  div.mainnavi ul ul li { padding-left: 30px; }
  div.mainnavi ul ul ul li { padding-left: 45px; }
  div.mainnavi ul ul li:hover a, div.mainnavi ul ul li.hover a { color: #002f56; }
  div.mainnavi ul li ul li:hover, div.mainnavi ul li ul li.hover {
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(#dcdcdc));
    background: linear-gradient(#fff, #dcdcdc);
    color: inherit;
  }

  /* --- Inhalt ---------------------------------------------------------- */
  #zwischennavi { display: none; }
  .mainimage img, #content img, nav.logistics img { max-width: 100%; height: auto; }
  article { padding: 0 15px; box-sizing: border-box; }
  article img[style*="float"] { float: none !important; display: block; margin: 10px 0 !important; }
  article table { display: block; overflow-x: auto; max-width: 100%; }
  p, ul, ol, article ul li { font-size: 15px; line-height: 23px; }
  h2 { font-size: 24px; line-height: 28px; }
  h3 { font-size: 17px; line-height: 22px; }
  .breadcrump { padding: 8px 15px 0; font-size: 12px; }
  input, select, textarea { font-size: 16px; height: auto; max-width: 100%; box-sizing: border-box; }

  /* --- Linke Spalte unten: Adresse ja, Rueckruf und Logos nein --------- */
  .address { padding: 10px 15px; margin: 0; border-top: 1px solid #d9d9d9; }
  .address table { font-size: 15px; line-height: 24px; }
  .address img[src*="hr.png"] { display: block; width: 100%; height: 1px; margin: 6px 0; }
  article input[type="submit"], article button { padding: 10px 24px; font-size: 16px; }
  #callback, .marken { display: none; }

  /* --- Leistungsboxen unten untereinander ------------------------------ */
  nav.logistics { height: auto; bottom: 0; padding: 0 15px 10px; box-sizing: border-box; }
  nav.logistics > a, nav img.floatleft { float: none; display: block; margin: 15px 0 0; padding: 0 !important; width: 140px; }
  nav.logistics h2 { float: none; width: auto; padding: 15px 0 0; }
  nav.logistics ul { display: block; width: auto; padding: 0; }
  nav.logistics li { display: block; float: none; width: auto; padding: 12px 0; border-left: 0; border-top: 1px solid #d1d1d1; }
  nav.logistics p { margin-top: 6px; }

  /* --- Cookie-Hinweis: unten und kompakt statt oben bildschirmfuellend -- */
  .cookieconsent { top: auto !important; bottom: 0; left: 0 !important; right: 0 !important; width: auto !important; box-sizing: border-box;padding: 8px 12px !important; box-shadow: 0 -2px 8px rgba(0,0,0,.15); }
  .cookieconsent p { font-size: 12px !important; line-height: 17px !important; padding: 0; margin: 0; }
  .cookieconsent .btn { display: block; margin: 6px auto 0; font-size: 14px !important; padding: 6px 14px !important; }

  /* --- Fuss ------------------------------------------------------------ */
  footer { height: auto; padding: 15px; font-size: 13px; line-height: 22px; }
  footer .right { float: none; margin-top: 8px; }
}