/* Boxed layout, grid, bands and components.
   Values from design system sections 01, 04 to 08 and 10. */

/* ---------------------------------------------------------------
   Stage and page canvas (section 01)
   The page is not fluid: a fixed 1400px, centred on #2F2F2E and set
   off by a soft shadow. Borderless at the top and bottom, the stage
   is only visible at the sides. Header and footer bands run to the
   edges of this canvas, not to the edge of the browser.
   Between 390 and 1400 the design system gives no guidance: the
   canvas shrinks fluidly via max-width.
   --------------------------------------------------------------- */
.hv-page {
  width: 100%;
  max-width: var(--hv-seite);
  min-height: 100vh;
  margin: 0 auto;
  /* The design system says white. On request from 22.09.2026 the whole
     page canvas is cream. */
  background: var(--hv-creme);
  box-shadow: var(--hv-buehne-schatten);
  overflow-x: clip; /* clipped ornaments must not cause scrolling */
}

/* Inner area: 30px outer margin (20px on mobile). */
.hv-wrap { padding-left: var(--hv-rand); padding-right: var(--hv-rand); }

/* 12 columns of 89.7px, 24px gutter. */
.hv-grid {
  display: grid;
  grid-template-columns: repeat(var(--hv-spalten), minmax(0, 1fr));
  gap: var(--hv-rinne);
}

/* Content column 883px, columns 4 to 11. */
.hv-col-inhalt { grid-column: 4 / span 8; min-width: 0; }
/* Subnavigation 315px, columns 1 to 3. */
.hv-col-subnav { grid-column: 1 / span 3; min-width: 0; }

/* With a subnavigation the breadcrumb sits in a grid row of its own
   above the content column. The subnavigation therefore starts level
   with the content and not level with the breadcrumb, as in the
   design. Done through the grid row instead of a fixed spacing so that
   it also holds for a two-line breadcrumb. */
.hv-grid--mit-subnav > .hv-breadcrumb-zeile { grid-column: 4 / span 8; grid-row: 1; min-width: 0; }
.hv-grid--mit-subnav > .hv-col-subnav       { grid-row: 2; }
.hv-grid--mit-subnav > .hv-col-inhalt       { grid-row: 2; }
/* Index page: content centred, columns 3 to 10. */
.hv-col-mitte  { grid-column: 3 / span 8; min-width: 0; }

.hv-stack { display: flex; flex-direction: column; gap: var(--hv-gap-block); }

/* ---------------------------------------------------------------
   Gold edge (section 10)
   Exactly twice per page: 2px above the header, 2px below the footer.
   No other band carries an edge. This is the most conspicuous change
   compared to the first version.
   --------------------------------------------------------------- */
.hv-band-rot {
  background: var(--hv-tempelrot);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.hv-band-creme { background: var(--hv-creme); }
.hv-band-sand  { background: var(--hv-sand); }

/* ---------------------------------------------------------------
   Header (section 05), 262px
   Logo 546x114 at 25/41, navigation at 33/189, spacing 12px,
   separators 1x31px in rgba(255,255,255,0.4), all in capitals.
   --------------------------------------------------------------- */
/* Header 171px, 90 degree gradient from temple red at 66.35% to dark
   header red. Gold edge only at the very top.
   Logo 364x76 at x=517: that is centred on the 1400 canvas
   (517 + 182 = 699). Navigation below it at y=111, height 40. */
.hv-header {
  min-height: var(--hv-header-h);
  padding: var(--hv-logo-y) var(--hv-rand) 0;
  background: var(--hv-header-verlauf);
  border-top: var(--hv-goldkante) solid var(--hv-gold);
}
.hv-header__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}
.hv-logo { width: var(--hv-logo-b); height: var(--hv-logo-h); max-width: 100%; object-fit: contain; }

/* Cloud ornament: only on a red background, clipped on the right,
   unscaled 436x655 at position 1047 / -237. */
.hv-ornament-wolke {
  position: absolute;
  right: calc(var(--hv-seite) - var(--hv-wolke-x) - var(--hv-wolke-w));
  top: var(--hv-wolke-y);
  width: var(--hv-wolke-w);
  height: var(--hv-wolke-h);
  pointer-events: none;
  user-select: none;
}

.hv-nav { display: flex; flex-direction: row; align-items: center; gap: 12px; flex-wrap: wrap; }
.hv-nav { min-height: var(--hv-nav-h); gap: var(--hv-nav-gap); justify-content: center; }
.hv-nav a {
  font-size: var(--hv-fs-nav);
  line-height: var(--hv-lh-tight);
  /* The design system says bold, set to regular on request. */
  font-weight: 400;
  color: #fff;
  text-transform: uppercase;
  text-decoration: none;
}
.hv-nav a:hover, .hv-nav a:focus { color: var(--hv-goldlicht); }
/* Active entry in light gold. */
.hv-nav .current-menu-item > a,
.hv-nav .current-menu-ancestor > a,
.hv-nav .current_page_parent > a { color: var(--hv-goldlicht); }
.hv-nav li { display: flex; flex-direction: row; align-items: center; gap: var(--hv-nav-gap); margin: 0; }
.hv-nav ul { display: contents; list-style: none; margin: 0; padding: 0; }
/* Separator before every entry except the first. */
.hv-nav li + li::before {
  content: "";
  display: block;
  width: 1px; height: var(--hv-nav-trenner);
  background: var(--hv-trenner-auf-rot);
}
/* On desktop the second menu level is carried by the subnavigation,
   not by a flyout. */
.hv-nav .sub-menu { display: none; }

.hv-burger { display: none; }

/* The menu overlay belongs to mobile (section 11) and is off on
   desktop in general. Only the breakpoint in mobile.css shows it. */
.hv-overlay { display: none; }

/* ---------------------------------------------------------------
   Footer (section 08), 260px
   --------------------------------------------------------------- */
/* Footer in footer red, gold edge only at the very bottom.
   The content does not run across the whole canvas but sits in the
   grid in columns 3 to 10, flush with the content column. 10px extra
   space at the top and 50px at the bottom. */
.hv-footer {
  min-height: var(--hv-footer-h);
  padding: calc(30px + var(--hv-footer-kopf)) var(--hv-rand) calc(30px + var(--hv-footer-fuss));
  background: var(--hv-footerrot);
  border-bottom: var(--hv-goldkante) solid var(--hv-gold);
}
.hv-footer__inner {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--hv-spalten), minmax(0, 1fr));
  gap: var(--hv-rinne);
}
/* Address in columns 3 to 6, link list in columns 8 to 10. The footer
   therefore starts flush with the content column and ends with
   column 10. Long entries wrap inside the three columns instead of
   running past them. */
.hv-footer__block--adresse { grid-column: 3 / span 4; min-width: 0; }
.hv-footer__block--links   { grid-column: 8 / span 3; min-width: 0; }
.hv-footer__titel { font-size: var(--hv-fs-h5); line-height: var(--hv-lh-tight); color: var(--hv-creme); margin: 0 0 12px; }
.hv-footer__adresse { font-size: var(--hv-fs-body); line-height: var(--hv-lh-tight); color: var(--hv-creme); }
.hv-footer__label { font-size: var(--hv-fs-body); line-height: var(--hv-lh-tight); color: var(--hv-creme); margin: 0 0 12px; }
/* Plain lines of text, set tightly. The larger gap between
   "Visit also:" and the first link comes from the margin of the
   label. */
.hv-footer__links { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; list-style: none; margin: 0; padding: 0; }
/* Without max-width the entries would be as wide as their longest
   word and run past column 10 instead of wrapping. */
.hv-footer__links li { margin: 0; max-width: 100%; }
/* The entries come from wp_nav_menu and carry no class of their own,
   so it is set here: cream text at 80%, no underline, hover to full
   cream. */
.hv-footer__links a {
  font-size: var(--hv-fs-body);
  line-height: var(--hv-lh-tight);
  color: var(--hv-auf-rot);
  text-decoration: none;
  overflow-wrap: break-word;
}
.hv-footer__links a:hover, .hv-footer__links a:focus { color: var(--hv-creme); text-decoration: none; }

/* ---------------------------------------------------------------
   Link buttons (section 04)
   No box, no surface: a line with a 15.84px arrow, 10px gap and a
   2px underline. Height 32 without, 36 with 4px padding.
   --------------------------------------------------------------- */
.hv-link {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: var(--hv-pfeil-gap);
  align-self: flex-start;
  height: var(--hv-link-h);
  padding-bottom: 4px;
  border-bottom: var(--hv-unterstrich) solid var(--hv-signalrot);
  font-size: var(--hv-fs-link);
  line-height: var(--hv-lh-tight);
  color: var(--hv-anthrazit);
  text-decoration: none;
}
/* There is only one size left (section 12). The variant stays as a
   class so that existing calls do not break. */
.hv-link--weiterlesen { height: var(--hv-link-h); }
.hv-link:hover, .hv-link:focus { color: var(--hv-anthrazit); border-bottom-color: transparent; }
.hv-link__pfeil { width: var(--hv-pfeil-b); height: var(--hv-pfeil-h); flex-shrink: 0; }

/* On a red background: gold underline. The text is white only in the
   header (the main menu is meant to stay that way); elsewhere, for
   example in the "Near the Sierra Nevada" band of the homepage, it is
   cream, on request from 22.09.2026. The arrow follows currentColor. */
.hv-band-rot .hv-link { color: #fff; border-bottom-color: var(--hv-gold); }
.hv-link--auf-rot { color: var(--hv-creme); border-bottom-color: var(--hv-gold); }
.hv-band-rot .hv-link:hover { color: #fff; border-bottom-color: transparent; }
.hv-link--auf-rot:hover { color: var(--hv-creme); border-bottom-color: transparent; }

/* ---------------------------------------------------------------
   Breadcrumb (section 05)
   18/100%, height 36, 50px gap to the title, only the current page in
   bold and not linked.
   --------------------------------------------------------------- */
.hv-breadcrumb {
  min-height: var(--hv-breadcrumb-h);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  /* Distance to the title: 4px of its own plus one gutter, so that the
     title sits 28px below the breadcrumb in every layout (in the Figma
     frames the title sits the same distance below in the layouts with
     and without a subnavigation). */
  margin-bottom: calc(var(--hv-breadcrumb-gap) + var(--hv-rinne));
  font-size: var(--hv-fs-h6);
  line-height: var(--hv-lh-tight);
}
/* With a subnavigation the breadcrumb sits in a grid row of its own, and
   the row gap already supplies the gutter. Only the 4px are added here,
   otherwise the title would sit 24px too low. */
.hv-breadcrumb-zeile .hv-breadcrumb { margin-bottom: var(--hv-breadcrumb-gap); }
.hv-breadcrumb a { color: var(--hv-anthrazit); text-decoration: none; }
.hv-breadcrumb a:hover, .hv-breadcrumb a:focus { color: var(--hv-tempelrot); text-decoration: underline; text-underline-offset: 3px; }
.hv-breadcrumb__sep { padding: 0 6px; }
.hv-breadcrumb__aktuell { font-weight: 700; }

/* ---------------------------------------------------------------
   Subnavigation (section 05)
   Separator at the bottom, active page bold, 2nd level indented.
   Deviates from the design system, as requested on 22.09.2026:
   no "Explore:" heading, no arrows, 1px rule instead of 2px,
   20px indent instead of 30px, no fixed row height of 64px.
   --------------------------------------------------------------- */
/* The width follows the grid column, not a fixed pixel value. The
   design system says 315px, but 3 columns arithmetically give 317.1px
   (3 x 89.7 + 2 x 24). The 315 are a rounded Figma measurement. The
   grid is the source, otherwise subnavigation and content would not
   line up. */
.hv-subnav {
  width: 100%;
  /* The separators should keep 60px distance from the content column.
     One gutter of that already lies between the grid columns. */
  padding-right: calc(var(--hv-subnav-luft) - var(--hv-rinne));
}
.hv-subnav ul { list-style: none; margin: 0; padding: 0; }
.hv-subnav li { margin: 0; }
/* No fixed row height: multi-line entries grow downwards, the padding
   stays the same. */
.hv-subnav a, .hv-subnav .hv-subnav__aktuell {
  display: block;
  padding: var(--hv-subnav-pad-y) var(--hv-subnav-pad);
  border-bottom: var(--hv-subnav-linie) solid var(--hv-sandlinie);
  font-size: var(--hv-fs-h6);
  line-height: var(--hv-lh-tight);
  color: var(--hv-anthrazit);
  text-decoration: none;
}
/* On hover only the colour changes. */
.hv-subnav a:hover, .hv-subnav a:focus { color: var(--hv-tempelrot); }
.hv-subnav__aktuell { font-weight: 700; }
.hv-subnav .hv-ebene-2 a, .hv-subnav .hv-ebene-2 .hv-subnav__aktuell {
  padding-left: calc(var(--hv-subnav-pad) + var(--hv-subnav-einzug));
}
.hv-subnav .hv-ebene-3 a, .hv-subnav .hv-ebene-3 .hv-subnav__aktuell {
  padding-left: calc(var(--hv-subnav-pad) + 2 * var(--hv-subnav-einzug));
}

/* ---------------------------------------------------------------
   Teaser (section 06)
   883px wide, image fixed at 200x200, 24px gap to the text column
   (659px), 24px rhythm inside, closing rule except on the last one.
   --------------------------------------------------------------- */
.hv-teaser-liste { display: flex; flex-direction: column; gap: var(--hv-gap-block); list-style: none; margin: 0; padding: 0; }
.hv-teaser { display: flex; flex-direction: row; gap: var(--hv-teaser-rinne); align-items: flex-start; margin: 0; }
.hv-teaser__bild {
  width: var(--hv-teaser-bild);
  height: var(--hv-teaser-bild);
  object-fit: cover;
  flex-shrink: 0;
}
.hv-teaser__text { flex: 1 1 var(--hv-teaser-text); min-width: 0; display: flex; flex-direction: column; gap: var(--hv-gap-innen); }
.hv-teaser__titel { font-size: var(--hv-fs-h3); line-height: var(--hv-lh-tight); letter-spacing: var(--hv-ls-display); margin: 0; }
/* In the design the teaser title is anthracite without an underline.
   The link marking is carried by the read-more link below it. */
.hv-teaser__titel a { color: var(--hv-anthrazit); text-decoration: none; }
.hv-teaser__titel a:hover, .hv-teaser__titel a:focus { color: var(--hv-tempelrot); }
.hv-teaser-liste > li + li { border-top: var(--hv-linie) solid var(--hv-sandlinie); padding-top: var(--hv-gap-block); }

/* ---------------------------------------------------------------
   Page content
   --------------------------------------------------------------- */
/* Content starts at y = 20px below the header (section 01). */
.hv-main { padding-top: var(--hv-inhalt-oben); padding-bottom: var(--hv-gap-block); }
.hv-titel { margin-bottom: var(--hv-gap-innen); }

/* Full width inside the canvas (legacy templates). */
.hv-voll { width: 100%; }
.hv-voll .entry-content > * { max-width: none; }

/* Sitemap (legacy template). */
.hv-sitemap ul { list-style: none; margin: 0 0 var(--hv-gap-innen); padding: 0; }
.hv-sitemap ul ul { padding-left: var(--hv-subnav-einzug); }
.hv-sitemap li { margin-bottom: 8px; }

.hv-adresse { font-style: normal; margin-bottom: var(--hv-gap-innen); }

/* Footer: contact line without underline and without arrow (section 08). */