/* Mobile (design system section 11, version 21.09.2026)
   390px wide, 20px outer margin, 350px content, one column, no
   gutters. Subnavigation 342px instead of 317px. The page title drops
   from 40 to 36px, running text stays 16/1.44, the link button is the
   same as on desktop. */

@media (max-width: 767px) {

  .hv-page { box-shadow: none; }

  /* The grid collapses to a single column. */
  .hv-grid { display: block; }
  .hv-col-inhalt, .hv-col-subnav, .hv-col-mitte { grid-column: auto; }

  /* On mobile the subnavigation sits at the very bottom, after the
     content, and spans the full column width. In the markup it comes
     before the content, so the grid becomes a flex container here and
     reorders with order: breadcrumb, content, subnavigation. The menu
     overlay has no levels, so it would otherwise be lost on mobile. */
  .hv-grid--mit-subnav { display: flex; flex-direction: column; }
  .hv-grid--mit-subnav > .hv-breadcrumb-zeile { order: 1; }
  .hv-grid--mit-subnav > .hv-col-inhalt       { order: 2; }
  .hv-grid--mit-subnav > .hv-col-subnav       { order: 3; }
  /* The spacing sits on the nav element, not on the column: a page
     without a subnavigation has an empty column and needs none. */
  .hv-subnav { padding-right: 0; margin-top: var(--hv-gap-block); }

  .hv-main { padding-top: 30px; padding-bottom: 40px; }

  /* Page title 36 instead of 40 (section 11). */
  .hv-titel, .entry-content h1 { font-size: var(--hv-fs-h2); }

  /* --- Header 70px instead of 171px, logo 193x40 at 20/15 --- */
  .hv-header {
    min-height: var(--hv-header-h);
    height: var(--hv-header-h);
    padding: 0 var(--hv-rand);
    display: flex;
    align-items: center;
  }
  .hv-header__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    width: 100%;
  }
  .hv-logo { width: var(--hv-logo-b); height: var(--hv-logo-h); max-width: none; object-position: left center; }

  /* The ornament makes way for the slim header. */
  .hv-ornament-wolke { display: none; }

  /* Burger 18x12 in white, on the right. */
  .hv-burger {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px; height: 44px;  /* hit area, the icon stays 18x12 in the 24x24 field */
    margin-right: -10px;
    padding: 0;
    border: 0;
    background: none;
    color: #fff;
    cursor: pointer;
  }
  .hv-burger__icon { width: 18px; height: 12px; display: block; }
  .hv-burger__schliessen { display: none; width: 14px; height: 14px; }

  /* Desktop navigation makes way for the overlay. */
  .hv-nav { display: none; }

  /* --- Menu overlay ---
     Full area in temple red, 1px gold line below the head, burger
     becomes an X. Entries 20px capitals in white, indent 30px, line
     pitch 50px. No separators, no levels. */
  .hv-overlay {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: var(--hv-tempelrot);
    flex-direction: column;
  }
  /* On desktop the overlay is switched off entirely by layout.css. Here
     only the switch state counts. */
  .hv-overlay[data-offen="false"] { display: none; }
  .hv-overlay[data-offen="true"]  { display: flex; }

  /* Head like the header: 2px gold edge on top, no line below. */
  .hv-overlay__kopf {
    height: var(--hv-header-h);
    flex-shrink: 0;
    box-sizing: border-box;
    border-top: var(--hv-goldkante) solid var(--hv-gold);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--hv-rand);
  }
  .hv-overlay__kopf .hv-burger { margin-right: -12px; }

  /* Nine entries from x=31, y=84. Gap 24px, no separators. */
  .hv-overlay__liste {
    list-style: none;
    margin: 0;
    padding: 14px 0 60px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    overflow-y: auto;
  }
  .hv-overlay__liste li { margin: 0; }
  .hv-overlay__liste a {
    display: flex;
    align-items: center;
    padding: 0 31px;
    font-size: var(--hv-fs-h5);
    line-height: var(--hv-lh-tight);
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    text-decoration: none;
  }
  .hv-overlay__liste a:hover, .hv-overlay__liste a:focus { color: var(--hv-goldlicht); }
  /* No levels in the overlay. */
  .hv-overlay__liste .sub-menu { display: none; }


  /* Opened overlay: burger becomes an X. */
  .hv-overlay .hv-burger__icon { display: none; }
  .hv-overlay .hv-burger__schliessen { display: block; }

  body[data-menue="offen"] { overflow: hidden; }

  /* --- Footer 403px, link list stacked, contact first --- */
  .hv-footer { min-height: var(--hv-footer-h); padding: calc(34px + var(--hv-footer-kopf)) var(--hv-rand) calc(34px + var(--hv-footer-fuss)); }
  /* Single column on mobile, the grid only applies on desktop. */
  .hv-footer__inner { display: flex; flex-direction: column; gap: 14px; }
  .hv-footer__titel { font-size: var(--hv-fs-h4); }
  .hv-footer__adresse { font-size: 18px; }
  .hv-footer__links { gap: 14px; }

  /* --- Images ---
     Hero full-bleed across the full width, all others 350px in the
     text grid. */
  .hv-hero-bild { width: 100vw; max-width: 100%; height: 294px; object-fit: cover; }
  .entry-content img, .hv-teaser__bild { width: var(--hv-inhalt); max-width: 100%; height: auto; }
  .hv-teaser { flex-direction: column; gap: var(--hv-gap-innen); }
  .hv-teaser__bild { width: var(--hv-inhalt); height: auto; aspect-ratio: 1 / 1; }

  /* Band spacing at the top 30px, block spacing 20 to 24px. */
  .hv-stack { gap: var(--hv-gap-block); }
}