/* === Climbhire responsive overrides === */

*, *::before, *::after { box-sizing: border-box; }

img, svg, video, iframe, embed, object { max-width: 100%; height: auto; }
table { max-width: 100%; }

/* ---- text main menu (replaces the old image menu) ---- */
/* move the red separator from the head's bottom edge to the menu's bottom
   edge, since the menu now sits in its own bar below the head */
#head_normal { border-bottom: 0 !important; }

#menu_main {
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  border-bottom: 4px solid red;
}
#menu_main a {
  display: inline-flex;
  align-items: center;
  color: #fff !important;
  text-decoration: none;
  padding: 0 14px;
  white-space: nowrap;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
}
#menu_main a:first-child { border-left: 0; }
#menu_main a:hover,
#menu_main a:focus { background: #c00; color: #fff; }

/* ---- content layout fixes (all viewports) ---- */
/* the old csc-textpic "intext-*-nowrap-NNN" layouts added a fixed right
   margin to the text column to reserve space for the floated image. Drop it
   so the text runs full-width with the same margin as on the left. */
.csc-textpic-text,
.csc-textpic .csc-textpic-text { margin-right: 0 !important; margin-left: 0 !important; }

/* clear floated csc-textpic images so the #content container never overflows
   vertically (which would otherwise trigger scrollbars on index/leistungen) */
#content::after,
.content_normal::after { content: ""; display: table; clear: both; }
#content { overflow: visible; }

/* uniform breadcrumb: the active item and the ">>" separator used a larger
   font than the other links – bring everything to the same size/weight */
.rootline, .rootline a, .rootline .cur a, .rootline .cur { font-size: 9px; font-weight: normal; }

/* ---- desktop: static full-width menu bar, centred shell ---- */
@media (min-width: 981px) {
  #main,
  .noshop #main {
    margin: 0 auto;
  }
  .noshop .content_normal { margin-left: 40px; margin-right: 40px; }
  /* head now holds only the logo; menu is its own full-width bar below */
  #head_normal { height: auto; min-height: 85px; }
  #menu_main {
    position: static;
    top: auto;
    width: 100%;
    padding-left: 40px;
    padding-right: 40px;
    height: 44px;
    line-height: 44px;
  }
}

/* ---- fluid shell for <= 980px (tablet + phone) ---- */
@media (max-width: 980px) {
  /* guard against any hidden/absolute element that would trigger a
     horizontal scrollbar on small screens (e.g. decorative #pfeil, off-
     canvas shop markup) without affecting vertical scrolling */
  html, body { overflow-x: hidden; }

  #main,
  .noshop #main,
  .noshop #body,
  #body {
    width: auto;
    max-width: 980px;
    margin: 0 auto;
    padding: 0 12px;
    background-image: none;
  }
  #body { overflow: visible; }

  /* header: logo centred, menu below it */
  #head_normal {
    height: auto;
    min-height: 103px;
    position: static;
    padding: 0;
    overflow: visible;
  }
  #logo {
    position: static;
    display: block;
    text-align: center;
    margin: 10px auto;
  }
  #logo img { max-width: 100%; height: auto; }

  /* menu: chips that wrap cleanly */
  #menu_main {
    position: static;
    top: auto;
    height: auto;
    line-height: 1.2;
    padding: 8px 0;
    padding-left: 0;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
  }
  #menu_main a {
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 4px;
  }

  /* decorative arrow only relevant on the fixed desktop layout */
  #pfeil { display: none; }

  /* sidebar -> full width above content */
  #menu_sub {
    float: none;
    width: auto;
    margin: 0 0 18px 0 !important;
    padding: 12px 14px;
    border-radius: 0 0 10px 10px;
  }

  /* content column -> full width */
  .noshop .content_normal,
  .content_normal {
    float: none;
    width: auto;
    margin: 0;
    padding: 0;
  }

  /* fixed-width team / list blocks -> fluid */
  .content_item.team,
  .artikel_box,
  .com-category-desc,
  .clearer { width: auto; float: none; }

  /* textpic: let image rows wrap and centre, text stacks below/above */
  .csc-textpic,
  .csc-textpic-imagewrap,
  .csc-textpic-center-outer,
  .csc-textpic-center-inner,
  .csc-textpic-imagerow,
  .csc-textpic-text {
    display: block;
    float: none !important;
    width: auto !important;
    text-align: center;
  }
  .csc-textpic-imagecolumn {
    display: inline-block;
    float: none !important;
    width: 48% !important;
    max-width: 200px;
    vertical-align: top;
    margin: 0 4px 10px;
    text-align: center;
  }
  .csc-textpic-imagecolumn img,
  .csc-textpic-image img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }
  .csc-textpic-image { float: none !important; text-align: center; }

  /* single image blocks (intext-left etc.) also fluid */
  .csc-textpic-image img,
  .csc-textpic-imagewrap img { width: auto; max-width: 100% !important; height: auto; }

  /* lightbox overlay image: never overflow the viewport */
  #lbLightboxImage,
  #lightboxImage,
  #lbImage,
  #lightboxImage { max-width: 92vw; max-height: 82vh; }
  #overlay { position: fixed !important; }
}

/* ---- phone: compact + tidy ---- */
@media (max-width: 640px) {
  body { font-size: 15px; }
  .content_normal h1 { font-size: 17px; }
  .content_item.team { padding: 20px 8px; }
  .rootline { word-break: break-word; }
  #menu_main { gap: 6px 6px; }
  #menu_main a { font-size: 12px; padding: 8px 10px; }
  .footer p { font-size: 100%; }
}