/* ==========================================================================
   KöhlerVB · Coming Soon · kvb.css
   Reines CSS, keine externen Requests. Schriften und Bilder liegen lokal.
   Farben: genau drei, keine Abstufungen.
   ========================================================================== */

/* 1 · Schriften (selbst gehostet, beide SIL Open Font License) ----------- */
@font-face {
  font-family: "Antic Didone";
  src: url("../fonts/antic-didone-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* Inter Light ersetzt Helvetica Neue, bis deren Weblizenz vorliegt. */
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-300.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* 2 · Tokens ------------------------------------------------------------- */
:root {
  --suede: #4D5B4A;   /* Primär */
  --stone: #DED5CC;   /* Sekundär */
  --hunter: #434D48;  /* Akzent, Schrift auf hell */

  --font-display: "Antic Didone", "Didot", "Bodoni 72", "Bodoni MT", Georgia, serif;
  --font-text: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --margin: clamp(24px, 1rem + 2.5vw, 64px);
  --logo-w: clamp(56px, 48px + 1.5vw, 72px);
  --headline: clamp(1.75rem, 0.95rem + 3.6vw, 4rem);
  --tracking: 0.04em;
}

/* 3 · Basis -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body {
  margin: 0;
  font-family: var(--font-text);
  font-weight: 300;
  line-height: 1.6;
}
h1, h2, h3, p, ul, address { margin: 0; }
h1, h2, h3 { font-weight: 400; }
address { font-style: normal; }
img, picture { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
a:hover, a:focus-visible {
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-underline-offset: 0.35em;
  text-decoration-thickness: 1px;
}
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
::selection { background: var(--suede); color: var(--stone); }

/* 4 · Fußzeile (Startseite und Rechtsseiten) ------------------------------ */
.foot {
  margin: 0; padding: 0; list-style: none;
  display: flex; align-items: center; justify-content: center; gap: 0.9em; white-space: nowrap;
  font-size: clamp(0.6875rem, 0.66rem + 0.12vw, 0.75rem);
  letter-spacing: 0.18em; text-transform: uppercase;
}
.foot li[aria-hidden] { letter-spacing: 0; }

/* 5 · Startseite --------------------------------------------------------- */
html.is-home, .is-home body { height: 100%; }
.is-home body { background: var(--suede); color: var(--stone); overflow: hidden; }

.cs { position: relative; height: 100vh; height: 100svh; min-height: 480px; overflow: hidden; isolation: isolate; }

.cs__photo { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.cs__photo picture { position: absolute; inset: 0; opacity: 0; max-width: none; }
.cs__photo picture:first-child { opacity: 1; }
.cs__photo img { width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 60%; }
[data-pic="a"] img { object-position: 50% 28%; }
[data-pic="b"] img { object-position: 50% 58%; }
[data-pic="c"] img { object-position: 50% 62%; }
@media (orientation: portrait) {
  [data-pic="a"] img { object-position: 24% 50%; }
  [data-pic="b"] img { object-position: 44% 50%; }
  [data-pic="c"] img { object-position: 68% 50%; }
}
.cs__veil { position: absolute; inset: 0; z-index: -1; background: var(--hunter); opacity: .5; }

.cs__logo { position: absolute; top: 0; left: 50%; width: var(--logo-w); margin-left: calc(var(--logo-w) / -2); line-height: 0; z-index: 2; }
.cs__logo img { width: 100%; height: auto; }

.cs__bottom {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  display: grid; justify-items: center;
  padding: 0 var(--margin) max(var(--margin), env(safe-area-inset-bottom));
  gap: clamp(48px, 9svh, 120px);
}
.cs__text { display: grid; justify-items: center; gap: clamp(20px, 1rem + 1vw, 32px); text-align: center; }
.cs__headline {
  white-space: nowrap;
  font-family: var(--font-display); font-size: var(--headline);
  line-height: 1; letter-spacing: var(--tracking); margin-right: calc(var(--tracking) * -1);
  text-transform: uppercase;
}
.cs__headline span { display: inline-block; }
.cs__line {
  max-width: 46ch; text-wrap: balance;
  font-size: clamp(0.9375rem, 0.85rem + 0.35vw, 1.125rem); line-height: 1.55;
}
.js .cs [data-anim] { visibility: hidden; }

/* 6 · Rechtsseiten (Impressum, Datenschutz) -------------------------------- */
.is-legal body { background: var(--stone); color: var(--hunter); }
.legal {
  min-height: 100vh; min-height: 100svh;
  display: grid; grid-template-rows: auto 1fr auto; justify-items: center;
  padding: 0 var(--margin) max(var(--margin), env(safe-area-inset-bottom));
}
.legal > * { min-width: 0; }
.is-legal .foot { flex-wrap: wrap; row-gap: 0.6em; }
.legal__logo { display: block; width: clamp(6rem, 5rem + 3vw, 8.5rem); margin-top: var(--margin); line-height: 0; color: var(--suede); }
.legal__logo svg { display: block; width: 100%; height: auto; }
.legal__body {
  width: 100%; max-width: 40rem;
  padding-block: clamp(56px, 10svh, 128px);
  font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
}
.legal__body h1 {
  font-family: var(--font-display); color: var(--suede);
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.5rem); line-height: 1.05;
  letter-spacing: var(--tracking); text-transform: uppercase;
  margin-bottom: clamp(32px, 5svh, 64px);
  overflow-wrap: anywhere;
}
.legal__body h2 {
  font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--suede);
  margin-top: 3em; margin-bottom: 0.9em; padding-top: 1.2em;
  border-top: 1px solid var(--suede);
}
.legal__body p + p, .legal__body p + ul, .legal__body ul + p, .legal__body address + p { margin-top: 1em; }
.legal__body ul { padding-left: 1.2em; }
.legal__body a { text-decoration: underline; text-underline-offset: 0.3em; text-decoration-thickness: 1px; }
.legal dl { margin: 0; display: grid; grid-template-columns: minmax(9rem, auto) 1fr; column-gap: 1.5rem; row-gap: 0.4em; }
.legal dt { color: var(--suede); }
.legal dd { margin: 0; }
@media (max-width: 479px) { .legal dl { grid-template-columns: 1fr; row-gap: 0; } .legal dd { margin-bottom: 0.8em; } }

/* 7 · Reduzierte Bewegung ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .js .cs [data-anim] { visibility: visible; }
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}

/* 8 · Sehr schmale Bildschirme ------------------------------------------- */
@media (max-width: 374px) {
  .foot { font-size: 0.625rem; letter-spacing: 0.12em; gap: 0.6em; }
}

/* 9 · Fußzeile mit eingeblendeter Mailadresse ------------------------------ */
@media (max-width: 479px) {
  .foot--address { letter-spacing: 0.1em; gap: 0.6em; }
}
@media (max-width: 374px) {
  .foot--address { letter-spacing: 0.02em; gap: 0.4em; font-size: 0.59rem; }
}