/* ==========================================================================
   mobile.css — responsive overrides for drwetter.eu
   Link this AFTER csskl.css / html.css in <head>:
     <link rel="stylesheet" href="/css/mobile.css">
   All rules are inside a media query, so the file is safe to load on all
   devices — it only kicks in for viewports <= 820px.
   ========================================================================== */

@media (max-width: 820px) {

  /* Safety net: never allow horizontal scrolling, even if some element
     still has a fixed width we forgot. */
  html, body {
    overflow-x: hidden;
    background: #ffffff;
  }

  /* --- Page frame: fluid instead of fixed widths ------------------------ */
  /* !important needed because page-specific CSS (csskl.css/cssgr.css) loads
     AFTER mobile.css and sets fixed widths on #map etc. with the same
     specificity — without !important, those later rules win and break the
     responsive layout. */
  #map {
    width: auto !important;
    max-width: 800px;          /* keeps desktop look on big screens */
    margin-left: 5px;
    margin-right: 5px;
  }

  .workzone {
    background: #ffffff;
    width: auto !important;
    max-width: 731px;
  }

  .content_map {
    width: auto !important;
    max-width: 726px;
    display: block; /* override flexbox from cssgr.css for mobile stacking */
  }

  .content_left {
    width: auto !important;
    max-width: 700px;
  }

  #sub_profile {
    width: auto !important;
    max-width: 705px;
  }

  .rahmen {
    width: auto !important;    /* was sized by parent, now fluid */
    max-width: 100%;
    box-sizing: border-box;
  }


  /* --- Navigation -------------------------------------------------------- */
  /* .menu_point items are 174px wide and floated: on a phone they simply
     wrap to one item per line (vertical menu). No width change needed,
     just a little vertical spacing. */

/* --- Navigation: all four items on one line ----------------------------- */

#menu {
  display: flex;               /* no justify-content needed */
}

.menu_point {
  width: auto;
  flex: 1 1 0;                 /* four equal slots, exactly one row */
  min-width: 0;
  background-size: 100% 80%;
  font-size: 11px;             /* fallback */
  font-size: min(10px, 2vw);   /* a bit smaller than before */
  letter-spacing: -0.3px;      /* Verdana bold is wide — this helps a lot */
  padding-top: 5px;
}

.workzone {
  padding-left: 5px;
  padding-right: 5px;
}

#map {
  margin-left: 2px;
  margin-right: 2px;
  box-shadow: none;
}

  /* Language toggle: keep it inside the 30px top padding of #map so it
     doesn't overlap the menu row (which spans the full width on mobile). */
  #lang_toggle {
    top: 3px;
    right: 3px;
    padding: 1.5px;
  }

  /* --- Entry page: claim box and service cards (.company_area) ----------- */
  /* In css.css the three .company_area cards are float:left with a fixed
     226px width. On mobile they must stack vertically at full width —
     as floats they escape the (collapsed) parent and their float boxes
     push down line boxes of everything that follows, e.g. the title text
     inside .content_right. */
  .claim {
    height: auto;               /* fixed 63px clips the text on mobile */
  }

  .company_area {
    float: none !important;
    width: auto !important;
    max-width: 100%;
  }

  /* contain the floated "mehr" link (a.more, float:right in css.css) */
  .company_area::after {
    content: "";
    display: block;
    clear: both;
  }

  .company_title {
    width: auto !important;     /* was fixed 226px */
    height: auto;               /* let the image define it */
  }

  .company_content {
    float: none !important;
    width: auto !important;
    height: auto !important;    /* was fixed 376px */
  }

  /* --- Floated images (pentest.png, risiko.png) -------------------------- */
  /* On narrow screens the text wrapping around a right-floated image gets
     cramped. Un-float them so they sit above the text at full width.
     (!important needed because float is set via inline style in HTML.) */
  .rahmen > div {
    float: none !important;
    margin: 8px auto;
  }

  .rahmen img {
    max-width: 100%;           /* already inline, kept here for safety */
    height: auto;
  }

  /* --- Footer ------------------------------------------------------------ */
  /* Two .footer_menu blocks of fixed 385px each = guaranteed overflow. */

.footer_container {
  width: auto;
  max-width: 100%;
}

.footer {
  width: auto;
  max-width: 100%;
  height: auto;
  padding: 2px 0 0 10px;
}

.footer_table,
.footer_table tr,
.footer_table td {
  display: block;
  width: 100%;
}

.footer_copy,
.footer_impressum {
  text-align: left;
}

  /* --- Readability (optional, remove if you want to keep 11px) ----------- */
  body {
    font-size: 13px;
  }

  /* --- Kontakt form: stack table rows vertically ------------------------- */
  /* The form uses a <table> with two columns (label + input). On mobile,
     stack them so each field takes full width. */
  .rahmen form table {
    width: 100%;
    display: block;
  }

  .rahmen form table tbody,
  .rahmen form table tr {
    display: block;
    width: 100%;
  }

  .rahmen form table td {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }

  /* First column (label) — show as a block above the input */
  .rahmen form table td[align="left"] {
    padding: 4px 0 2px 0;
    font-weight: bold;
    color: #0c4b88;
  }

  /* Second column (input area) — full width */
  .rahmen form table td[valign="top"] {
    padding: 0 0 8px 0;
  }

  /* Make inputs and textarea full-width */
  .rahmen form input[type="text"],
  .rahmen form textarea {
    width: 100% !important;
    box-sizing: border-box;
    font-size: 16px; /* prevent iOS zoom */
  }

  /* Captcha row: stack captcha image and input */
  .rahmen form span[style*="padding-left: 190px"] {
    display: block;
    padding-left: 15px !important;
    margin-top: 4px;
  }

  .rahmen form span[style*="padding-left: 190px"] img {
    display: block;
    margin-bottom: 4px;
  }

  /* Submit button row */
  .rahmen form span[style*="padding-left: 30px"] {
    display: block;
    padding-left: 15px !important;
    margin-top: 8px;
  }

  /* Reset button */
  .rahmen form span[style*="padding-left: 15px"] {
    display: block;
    padding-left: 15px !important;
    margin-bottom: 8px;
  }

  /* content_right: stack below content_left on mobile */
  .content_right {
    float: none !important;
    width: auto !important;
    max-width: 100%;
    margin-top: 16px;
    height: auto !important;   /* overrides inline style="height:652px" */
  }

  /* Safety net: .content_right must never collapse to zero height again,
     even if a child is floated (its children .news_title / .news_event_area
     are floats in css.css). */
  .content_right::after {
    content: "";
    display: block;
    clear: both;
  }

  /* --- Right-edge alignment ------------------------------------------------ */
  /* The visible left boxes (.rahmen, .claim) carry margin-right: 8px from
     css.css (desktop column spacing). #menu and .content_right span the full
     width of .content_left, so they stick out 8px beyond those boxes. Inset
     them by the same 8px so all visible right edges line up; normalize
     .company_area (5px in css.css) to the same 8px. */
  #menu,
  .content_right {
    margin-right: 8px;
  }

  .company_area {
    margin-right: 8px;   /* css.css has 5px */
  }

  /* content_left: full width */
  .content_left {
    float: none !important;
    width: auto !important;
    max-width: 100%;
  }

  /* content_map: full width */
  .content_map {
    float: none !important;
    width: auto !important;
    max-width: 100%;
  }

  /* sub_profile: full width */
  #sub_profile {
    float: none !important;
    width: auto !important;
    max-width: 100%;
  }

  /* rahmen: full width */
  .rahmen {
    float: none !important;
    width: auto !important;
    max-width: 100%;
    height: auto !important;
  }

  /* menu_point: already handled by flex, but ensure no overflow */
  #menu {
    display: flex;
    flex-wrap: wrap;
  }

  .menu_point {
    width: auto;
    flex: 1 1 0;
    min-width: 0;
  }

  /* Ensure images don't overflow */
  .rahmen img {
    max-width: 100%;
    height: auto;
  }

  /* News event area on kontakt page */

  /* Title bar ("Erwähnenswertes" / "So können Sie uns erreichen").
     Un-float it (it is float:left in css.css) so the box stacks vertically
     and keeps its height; stretch the gradient background to full width. */
  .news_title {
    float: none;
    background-size: 100% 100%;
  }

  .news_event_area {
    width: auto;
    float: none;   /* was still floated -> parent .content_right collapsed */
  }

  .news_event {
    width: auto;
    float: none;
  }

  .news_event_last {
    width: auto;
    float: none;
  }

  /* Contact info links */
  .contact-info {
    width: auto;
  }

  /* Clearfix for floated content */
  .clear {
    clear: both;
  }

}