/*
 * Quark 2 — user customizations
 *
 * This file is safe to edit. It is loaded last so anything here overrides
 * theme.css without having to mark rules !important.
 */

#to-start { display: none; }

/* Clean label/value pairs (Impressum's Kontakt / Steuerliche Angaben) as a
 * proper definition list instead of a table misused purely for alignment —
 * no header row, no cell borders, no zebra striping, just an aligned
 * two-column grid. */
.content-item dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.4rem 1.5rem;
  margin: 1rem 0;
}
.content-item dt {
  font-weight: 700;
  color: var(--q2-text-strong);
}
.content-item dd {
  margin: 0;
  color: var(--q2-text);
}

/* theme.css's `h1 + h2` rule gives an H2 right after an H1 the "subtitle"
 * treatment (accent color, tightened spacing) — meant for a title+subtitle
 * pattern like the homepage hero. Plain content pages' H1 (added for SEO)
 * sometimes has no intro paragraph before the first real section heading,
 * so that heading ends up adjacent to the H1 purely by accident and
 * incorrectly gets styled as a subtitle. Reset it back to a normal H2
 * specifically inside .content-item, where every H2 is a real section
 * heading, never a subtitle. */
.content-item h1 + h2 {
  margin-top: 0;
  color: var(--q2-text-strong);
}

/* German compound words (Wohnungseigentümergemeinschaften etc.) are long and
 * have no natural space to wrap at, so narrow viewports were force-breaking
 * them mid-word with no hyphen. lang="de" on <html> lets the browser's own
 * German hyphenation dictionary insert proper syllable-boundary breaks
 * instead, site-wide rather than just in the hero. */
body {
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
}

/* body's min-height:100vh is only a floor, never a ceiling, so it never
 * actually stops the page growing past one screen — meaning flex-shrink on
 * .hero-fullscreen never has a real size to shrink against. An explicit
 * height (not max-height, which is unreliable as a flex-shrink basis on an
 * auto-sized container) pins the page to exactly one viewport ONLY on pages
 * with a fullscreen hero (currently just the homepage), so the hero is
 * forced to compress toward its min-height floor instead of pushing the
 * page taller. Other pages keep the normal grow-to-fit behavior needed for
 * their longer body content. */
body:has(.hero-fullscreen) { height: 100vh; }

/* .hero's padding-block is sized for a non-fullscreen hero where padding
 * provides breathing room inside an otherwise auto-height box. In fullscreen
 * mode that padding is fixed dead weight that never shrinks, eating into the
 * budget flex-shrink has to compress the hero into — cut it down so more of
 * the available height goes to actually fitting the heading text. */
.hero-fullscreen { padding-block: 2rem; }

/* Soft vignette behind the hero text only, not the whole photo — keeps the
 * image fully visible everywhere else while guaranteeing text contrast. */
.image-overlay {
  background: radial-gradient(ellipse 55% 55% at center, rgba(0,0,0,.55) 0%, rgba(0,0,0,.22) 45%, transparent 75%);
}
.hero[style*='background-image'] h1,
.hero[style*='background-image'] h2,
.hero[style*='background-image'] h3,
.hero[style*='background-image'] p {
  text-shadow: 0 2px 14px rgba(0,0,0,.6), 0 1px 3px rgba(0,0,0,.45);
}
/* theme.css sets .navbar-brand to the Cal Sans display font at weight 600,
 * which is what was still reading as "narrow and bold" even after the
 * heading font-family swap below — .navbar-brand is a plain <a>, not an
 * h1-h6, so that heading rule never touched it. Arial here applies to both
 * the mobile overlay's plain-text logo (no .brand-split) and the desktop
 * two-line brand below. */
.navbar-brand { font-family: Arial, Helvetica, sans-serif; font-weight: 400; }
/* theme.css's base .navbar-brand font-size (1.125rem) left the mobile
 * overlay's plain-text logo noticeably smaller than the overlay-menu links
 * next to it (1.5rem) — match them so the whole panel reads consistently. */
.mobile-logo .navbar-brand { font-size: 1.5rem; }

/* Header is one flex row, bottom-aligned: the nav (left) and the two-line
 * brand block (right, stacked in a column) share their bottom edge, which
 * puts the nav row level with the brand's last line ("Hausverwaltung")
 * without relying on cross-font baseline matching. theme.css's generic
 * `.container` rule (max-width:1200px + margin-inline:auto) would otherwise
 * still center this inner div within the full-bleed <header>, keeping the
 * nav/brand from ever reaching the actual left/right edges — cleared here
 * so the 50px paddings below are measured from the real viewport edges. */
#header .container {
  display: flex;
  align-items: flex-end;
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
}
.navbar { flex: 1 1 auto; padding-left: 50px; }
.brand-row { flex: 0 0 auto; padding-top: 0.5rem; padding-bottom: 0.25rem; padding-right: 50px; }
.brand-split {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  text-transform: uppercase;
  gap: 0.05em;
}
.navbar-brand.brand-split .brand-left { font-size: 22pt; line-height: 1.2; }
.navbar-brand.brand-split .brand-right { font-size: 28pt; line-height: 1.2; }

/* Left-align the nav row instead of the theme's default right alignment */
.desktop-menu { justify-content: flex-start; }
.navbar-section.actions { margin-left: 0; }
.dropmenu a { font-size: 16pt; }

/* Burger button lives inline in the nav row (its own line below the brand
 * row) instead of the theme's default fixed top-right corner. */
.mobile-menu { position: static; top: auto; right: auto; }

/* On small screens (phones), collapse the header down to just the burger —
 * the brand name is still reachable one tap away, in the slide-out
 * overlay's own logo. Same breakpoint theme.css already uses to switch to
 * the mobile nav, so this isn't introducing a new one. */
@media (max-width: 860px) {
  .brand-row { display: none; }
  #header .container { padding-inline: clamp(0.25rem, 1vw, 0.5rem); }
  .navbar { padding-left: 0; }
}

/* Slide-out menu stays translucent so the hero image remains visible
 * behind it instead of being fully covered. */
.overlay {
  background: color-mix(in oklab, var(--q2-bg) 65%, transparent);
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
}

/* Mobile overlay menu links were the same Cal Sans/weight 600 combo flagged
 * as "narrow and bold" for the header brand — switch to Arial/lighter here
 * too for consistency and readability. */
.overlay .overlay-menu a { font-family: Arial, Helvetica, sans-serif; font-weight: 400; }

/* Remove the decorative accent bar above h2 headings */
h2::before { display: none; }

/* Contact info row in the footer, kept visible on every page */
.footer-contact {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin-top: 10px;
  margin-bottom: 10px;
  font-weight: 500;
}

/* Copyright + legal links on one line */
.footer-bottom {
  display: flex;
  justify-content: center;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.35rem 1.25rem;
  margin-top: 10px;
  margin-bottom: 10px;
}
.footer-links { display: flex; gap: 1.25rem; }

/* Shorter footer: trim the section's own padding (by far the biggest
 * contributor to its height) and tighten line-height, which theme.css's
 * generic `p, li { line-height: 1.7 }` would otherwise keep loose via a
 * direct match on the copyright <p> (a direct match always wins over an
 * inherited value, regardless of specificity). */
#footer { padding-block: 1.25rem; line-height: 1.35; }
#footer p { line-height: 1.35; }

/* Headings: less bold, Arial instead of the self-hosted Cal Sans display
 * font (Cal Sans only ships weight 400 — every heavier heading today is
 * browser-synthesized fake-bold, a likely cause of the "too bold" look).
 * h1 is brought down close to h2's size (was clamp(2.25rem,5vw+1rem,3.75rem))
 * but kept slightly, visibly larger than h2 so the hierarchy stays legible;
 * this also brings every heading level to one consistent weight (h3-h6 were
 * already 600). */
h1, h2, h3, h4, h5, h6,
.display, .h-display,
.card-title :is(h1, h2, h3, h4, h5, h6) {
  font-family: Arial, Helvetica, sans-serif;
}
h1 {
  font-size: clamp(1.75rem, 2.75vw + 0.5rem, 2.375rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
}
h2 { font-weight: 600; }