/* BLL Berliner Lager Logistik GmbH – statischer Nachbau des Joomla/Warp-Templates "yoo_moustache / BLL" */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;border-top:5px solid #272e34;background:#fff url(img/tile.gif);font:16.2px/18px Verdana,Geneva,sans-serif;color:#555}
img{display:block;max-width:100%;border:0}
a{color:#336699;text-decoration:none}
.content p a,.content p a:hover{text-decoration:underline}
.wrap{width:990px;max-width:100%}

/* ---------- Header ---------- */
.header{height:91px;background:url(img/logo-bg.gif) left bottom repeat-x}
.header .wrap{position:relative;height:91px}
.logo{position:absolute;left:50px;top:20px;width:304px;height:45px;background:url(img/logo-2x.png) no-repeat 0 0/304px 45px;overflow:hidden;text-indent:-9999px}
.topnav{position:absolute;right:0;top:0;display:flex;margin:0;padding:0;list-style:none}
.topnav li{position:relative;bottom:-1px;width:104px;height:90px}
.topnav li.active{background:url(img/active.gif) left bottom repeat-x}
.topnav a{display:block;width:104px;height:90px;line-height:90px;text-align:center;font-size:10.692px;color:#444;background:url(img/navi-bg.png) left top no-repeat}
.topnav a:hover,.topnav a:active{color:#3399ff}
.oc-toggle{display:none}

/* ---------- Top: Seitenmenü + Headerbilder ---------- */
.top{border-top:1px solid #fff}
.top .wrap{display:flex;height:240px;background:#fff}
.sidemenu{flex:0 0 221px;background:#67737f}
.sidemenu ul{margin:0;padding:0;list-style:none}
.sidemenu li{line-height:24px;background:url(img/navi-bg.gif) left bottom repeat-x}
.sidemenu a{display:block;padding:5px 0 5px 20px;font-size:11.34px;color:#fff;background:url(img/navi-bg.gif) left bottom repeat-x}
.sidemenu a:hover,.sidemenu li.active a{background:#272e34 url(img/navi-bg.gif) left bottom repeat-x;color:#eaaa2d}
.pic-small{flex:0 0 219px;overflow:hidden}
.pic-wide{flex:1;overflow:hidden}
.pic-small img,.pic-wide img{width:100%;height:100%;object-fit:cover;object-position:center top}
.headerpic{position:relative;flex:1;overflow:hidden}
.headerpic img{width:100%;height:240px;object-fit:cover}
.ht{position:absolute;z-index:2;left:250px;top:56px;width:278px;max-height:180px;overflow:hidden;text-align:center;color:#fff}
.ht.v1{top:70px;max-height:150px}
.ht.v3{left:22px}
.ht p{margin:0}
.ht .title{margin-bottom:15px;font-size:12.96px;line-height:28px;font-weight:500;text-transform:uppercase;letter-spacing:.15em;text-shadow:0 1px 2px #2a3641}
.ht .slogan{font-size:22.68px;line-height:28px;font-weight:500;font-style:italic;letter-spacing:.05em;text-shadow:1px 1px 3px #202b35}

/* ---------- Inhalt ---------- */
.middle .wrap{display:flex;align-items:stretch;background:#fff}
.side-a{order:-1;flex:0 0 221px;min-width:0;padding:30px 0;background:#fff}
.main{flex:0 0 513px;min-width:0;padding:30px 0 30px 35px;background:#fff}
.side-b{flex:0 0 256px;min-width:0;padding:30px 0 30px 35px;background:#fff}
.panel{margin:0 0 35px;padding:11px 15.5px 15.5px 17.7px;background:#f2f2f2;border:1px solid #ddd;color:#444}
.panel:last-child{margin-bottom:0}
.panel h3{margin:0;font-size:12.15px;line-height:30px;font-weight:bold;color:#444}
.panel p{margin:15px 0 0;font-size:11.34px;line-height:18px}
.panel a.plain{color:inherit;text-decoration:none}

.content h1{margin:0;font-size:12.15px;line-height:53px;font-weight:bold;color:#444}
.content h3{margin:0 0 15px;font-size:12.15px;line-height:24px;font-weight:bold;color:#444}
.content p{margin:0 0 15px;font-size:11.34px;line-height:18px}
.content ul{margin:15px 0 15px -15px;padding-left:30px}
.content li{list-style:square;font-size:11.34px;line-height:18px}

/* Slider "Unser Angebot" */
.slider-vp{width:100%;overflow:hidden;transition:height .5s}
.slider-track{display:flex;align-items:flex-start;width:100%}
.slide{flex:0 0 100%;min-width:0}
.slider ul{margin:0 0 15px;padding-left:16px;list-style:square outside}
.slider li{font-size:11.34px;line-height:28px;color:#444}

/* ---------- Footer ---------- */
.footer{background:#eaaa2d;padding-bottom:35px}
.footer .wrap{padding:20px 0 60px;text-align:center}
.footer p{margin:0;font-size:9.72px;line-height:18px;color:#555}
.footer a{color:#555;text-decoration:underline}
.footer a:hover{color:#fff}

/* ---------- Offcanvas (mobil) ---------- */
.oc{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.1);visibility:hidden;opacity:0;transition:opacity .3s,visibility .3s}
.oc.open{visibility:visible;opacity:1}
.oc-bar{position:absolute;top:0;right:0;bottom:0;width:270px;max-width:82%;overflow-y:auto;background:#333;transform:translateX(100%);transition:transform .3s}
.oc.open .oc-bar{transform:none}
.oc ul{margin:0;padding:10px 0;list-style:none}
.oc a{display:block;padding:10px 15px;font-size:15px;color:#ccc;border-top:1px solid rgba(0,0,0,.3);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.oc a:hover,.oc li.active a{background:#404040;color:#fff}

/* ---------- Mobil / Tablet ---------- */
@media (max-width:959px){
  body{background:#fff}
  .wrap{width:auto}
  .header,.header .wrap{height:76px}
  .logo{left:15px;top:16px;width:300px;max-width:calc(100% - 80px);height:44px;background-size:300px 44px}
  .topnav{display:none}
  .oc-toggle{display:block;position:absolute;right:15px;top:24px;width:32px;height:26px;padding:0;border:0;background:none;cursor:pointer}
  .oc-toggle span,.oc-toggle span::before,.oc-toggle span::after{position:absolute;left:0;display:block;width:28px;height:4px;border-radius:1px;background:#444;content:""}
  .oc-toggle span{top:11px}
  .oc-toggle span::before{top:-9px}
  .oc-toggle span::after{top:9px}
  .top .wrap{display:block;height:auto}
  .sidemenu,.pic-small,.pic-wide{display:none}
  .top-plain{display:none}
  .headerpic img{height:auto}
  .ht,.ht.v1,.ht.v3{position:static;width:auto;max-height:none;padding:22px 5% 20px;background:#eaaa2d}
  .ht .title{margin-bottom:6px;font-size:12.6px;line-height:20px;text-shadow:0 1px 1px #66480e}
  .ht .slogan{font-size:19.8px;line-height:28px;letter-spacing:.025em;text-shadow:1px 1px 2px #66480e}
  .middle .wrap{display:block}
  .main,.side-a,.side-b{padding:0 15px}
  .main{padding-top:30px}
  .side-b{padding-bottom:30px}
  .panel{margin-bottom:20px;padding:20px}
  .panel:last-child{margin-bottom:0}
  .side-a .panel{margin-bottom:20px}
  .content h1{margin:10px 0 30px;font-size:24px;line-height:30px}
  .content h3{font-size:18px;line-height:24px}
  .content p,.content li{font-size:16px;line-height:26px}
  .panel h3{font-size:19px;line-height:26px}
  .panel p,.slider li{font-size:16px;line-height:26px}
  .footer .wrap{padding:20px 15px 40px}
  .footer p{font-size:12px;line-height:20px}
}