/* ChemicalMoonBaby — shared styles (index + haus)
   Goal: valid HTML structure, shared tokens, clean semantics.
*/

/* Moved from inline <style> in index.html (publish-safe) */
.header-logo{
  display: inline-block;
  color: inherit;
  text-decoration: none;
}
.header-logo:focus-visible{
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

/* Click-zone: only the bottom part is clickable */
.click-zone{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  top: var(--click-top, 70%);
  z-index: 9999;
  display: block;
  pointer-events: auto;
  text-decoration: none;
  background: transparent;
}
.click-zone:focus-visible{
  outline: 2px solid currentColor;
  outline-offset: 6px;
}

/* Ensure top content is above and stays interactive/selectable */
.content{ position: relative; z-index: 5; }

/* Dummy anchor we insert so we can find the content top consistently */
.col-toplink{ display:none; }

@font-face {
  font-family: "Plain";
  src: url("font/Plain-Medium.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

:root {
  --yellow: #f4ef9c;
  --grey: #d8d7d2;
  --grey-light: #ecece8;
  --blue: #6ea6d3;
  --pink: #efbfd8;
  --black: #111111;
  --white: #ffffff;

  --title-size: clamp(56px, 6vw, 130px);
  --title-spacing: clamp(-1px, -0.15vw, -5px);
  --header-space: clamp(95px, calc(var(--title-size) * 1.08), 165px);
  --content-gap: clamp(12px, 1vw, 20px);

  --page-pad-x: clamp(20px, 2vw, 40px);
  --rule-inset: 7%;
  --rule-h: 2px;

  --text-max: 950px;
  --content-max: 650px;
  --haus-text-scale: 1;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  width: 100%;
  min-height: 100%;
  font-family: "Plain", Arial, Helvetica, sans-serif;
  color: var(--black);
  background: var(--white);
}

body {
  overflow-x: hidden;
  overflow-y: auto;
}

/* Focus: visible + on brand */
:focus-visible {
  outline: 3px solid var(--black);
  outline-offset: 4px;
}

/* Links: inherit the page typography by default */
a,
a:visited {
  color: inherit;
  text-decoration: none;
}

a:hover { text-decoration: none; }

/* --- Brand mark --- */
.header-logo {
  position: absolute;
  top: 3px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  font-size: var(--title-size);
  line-height: 0.9;
  font-weight: 500;
  letter-spacing: var(--title-spacing);
  white-space: nowrap;
}

.header-logo,
.header-logo:visited {
  color: var(--black);
  text-decoration: none;
}

/* Home: logo is a title only (not clickable) */
.header-logo[aria-disabled="true"] {
  pointer-events: none;
}

/* --- Shared column layout --- */
.column {
  position: relative;
  display: flex;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  color: var(--black);
  width: 100%;
  height: 100%;
  padding: calc(var(--header-space) + var(--content-gap)) var(--page-pad-x) 40px;

  /* Single source of truth for rule width */
  --rule-left: var(--rule-inset);
  --rule-right: var(--rule-inset);
}

.column::before {
  content: "";
  position: absolute;
  top: var(--header-space);
  left: var(--rule-left);
  right: var(--rule-right);
  height: var(--rule-h);
  background: var(--black);
}

/* --- Background “strata” --- */
.bg-haus {
  background: linear-gradient(
    to bottom,
    #00a883 0%,
    #00a883 16%,
    #fff98c 19%,
    #fff98c 78%,
    var(--white) 82%,
    var(--white) 100%
  );
}

.bg-garten {
  background: linear-gradient(
    to bottom,
    #af141a 0%,
    #af141a 5%,
    #bdbcbd 7%,
    #bdbcbd 40%,
    var(--white) 52%,
    var(--white) 100%
  );
}

.bg-untergeschoss {
  /* Match the 3rd column on index.html */
  background: linear-gradient(
    to bottom,
    #508bd2 0%,
    #508bd2 58%,
    #f9b3dc 64%,
    #f9b3dc 86%,
    var(--white) 92%,
    var(--white) 100%
  );
}

/* --- Typography blocks --- */
.content {
  width: 100%;
  max-width: var(--content-max);
}

.kicker {
  margin-bottom: 2px;
  font-size: clamp(18px, 1.8vw, 36px);
  line-height: 1;
  font-weight: 500;
  letter-spacing: clamp(-0.2px, -0.03vw, -1px);
}

.title {
  margin: 0;
  font-size: var(--title-size);
  line-height: 0.84;
  font-weight: 500;
  letter-spacing: var(--title-spacing);
}

.title-stack {
  display: inline-block;
}

.title-stack span {
  display: block;
}

.subtitle {
  margin-top: 20px;
  font-size: clamp(18px, 1.8vw, 36px);
  line-height: 1.12;
  font-weight: 500;
  letter-spacing: clamp(-0.2px, -0.02vw, -0.8px);
}

/* Full text section (used on haus page) */
.prose {
  position: relative; /* anchor for the separator pseudo-element */
  margin: 32px auto 0;
  width: min(100%, calc(var(--text-max) * var(--haus-text-scale)));
  max-width: none;
  font-size: clamp(18px, 1.45vw, 26px);
  line-height: 1.08;
  font-weight: 500;
  letter-spacing: clamp(-0.2px, -0.02vw, -0.7px);
}

.prose p { margin: 0 0 22px; }

/* Haus: separator should match the top rule, BUT keep the separator element inside the prose.
   Solution: make the separator itself full-bleed using viewport math, not constrained by .prose.
   (No JS; deterministic and cache-proof.)
*/
#haus-column .separator {
  height: var(--rule-h);
  background: var(--black);
  margin: 27.2px 0;

  /* Full-bleed line inside a centered max-width block:
     - make the element as wide as the viewport
     - then inset it symmetrically by the same amount as the top rule
     Top rule is 7% from each side of the column (= viewport here), so we use 7vw.
  */
  width: calc(100vw - (2 * 7vw));
  margin-left: calc(50% - 50vw + 7vw);
  margin-right: calc(50% - 50vw + 7vw);
}

/* --- Index-specific layout --- */
.home {
  position: relative;
  width: 100vw;
  min-height: 100vh;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.home a.column {
  cursor: pointer;
}

/* Footer / notes on index */
.home-info {
  position: absolute;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  width: 34%;
  text-align: center;
  font-variant-numeric: proportional-nums;
  font-size: clamp(16px, 1.3vw, 24px);
  line-height: 1.05;
  font-weight: 500;
  z-index: 5;
  pointer-events: none;
}

.home-notice {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: 82%;
  text-align: center;
  font-size: clamp(14px, 1vw, 18px);
  line-height: 1.15;
  font-weight: 500;
  z-index: 5;
  pointer-events: none;
}

/* --- Large displays: make Haus text block wider --- */
@media (min-width: 1280px) {
  :root{ --haus-text-scale: 1.3; }

  /* Haus: free the container on large screens too */
  #haus-column .content{
    max-width: none;
    width: 100%;
  }

  /* Keep the prose wider (about +30%) */
  #haus-column .prose{
    width: min(100%, 1235px);
  }
}

/* --- Mobile --- */
@media (max-width: 768px) {
  :root {
    --title-size: clamp(54px, 16vw, 90px);
    --title-spacing: -0.04em;
    --header-space: 75px;
    --content-gap: 20px;
  }

  /* Haus: make the long text block wider by freeing the parent container */
  #haus-column .content{
    max-width: none;
    width: 100%;
  }

  /* Keep prose wide but still centered nicely */
  #haus-column .prose{
    width: 100%;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
  }

  /* Haus: reduce vertical breathing room around the separator on mobile */
  #haus-column .separator {
    margin: 18px 0;
  }

  .header-logo {
    position: fixed;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    text-align: center;
    white-space: nowrap;
    font-size: clamp(28px, 9.8vw, 46px);
    line-height: 0.85;
    letter-spacing: -0.02em;
    transition: opacity 0.4s ease, transform 0.4s ease;
  }

  .header-logo.hidden {
    opacity: 0;
    transform: translateX(-50%) translateY(-15px);
    pointer-events: none;
  }

  .home {
    display: block;
    width: 100%;
    min-height: 100vh;
  }

  .column {
    min-height: auto;
    height: auto;
    /* Smaller sections on mobile so you don't need to scroll forever */
    padding: 86px 24px 140px; /* more bottom space inside each section */
  }

  .column {
    --rule-left: 24px;
    --rule-right: 24px;
  }

  .column::before {
    top: var(--header-space);
    left: var(--rule-left);
    right: var(--rule-right);
  }

  .kicker { font-size: 22px; line-height: 1; margin-bottom: 8px; }
  .subtitle { font-size: 22px; line-height: 1.08; margin-top: 18px; }
  .prose { margin-top: 34px; font-size: 20px; line-height: 1.08; }

  .home-info,
  .home-notice {
    position: static;
    transform: none;
    width: auto;
    padding: 24px;
    text-align: center;
  }

  /* Mobile: ensure real spacing between the last column and the address block.
     Use padding (not margin) so it always creates visible distance in normal flow. */
  .home-info{
    padding-top: 44px;
    margin-top: 0;
  }

  .home-info { font-size: 22px; line-height: 1; }
  .home-notice { font-size: clamp(12px, 3.5vw, 15px); }
}

@media (prefers-reduced-motion: reduce) {
  .header-logo { transition: none; }
}