/* ============================================================
   parked-domains · „Parzelle"

   Eine unbebaute Parzelle ist kein Objekt, sondern ein Plan.
   Deshalb kein Material, kein Metall, kein Licht — ein
   Vermessungsblatt: Raster, Linien, Schriftfeld, und der
   Domainname als bemaßte Flurstücksbeschriftung.

   Achromatisch, ohne einen einzigen Farbton. Die Wirkung kommt
   aus Linie, Maß und Leere.
   ============================================================ */

@font-face { font-family:'Satoshi'; src:url("/assets/01M07VW5WCC0WTP24W33X1NKWX/Satoshi-Regular.woff2") format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Satoshi'; src:url("/assets/01M07VW5WCC0WTP24W33X1NKWX/Satoshi-Medium.woff2") format('woff2');  font-weight:500; font-display:swap; }
@font-face { font-family:'Satoshi'; src:url("/assets/01M07VW5WCC0WTP24W33X1NKWX/Satoshi-Bold.woff2") format('woff2');    font-weight:700; font-display:swap; }
@font-face { font-family:'JetBrains Mono'; src:url("/assets/01M07VW5WCC0WTP24W33X1NKWX/jetbrains-mono.woff2") format('woff2'); font-weight:400; font-display:swap; }

/* ============================================================
   BLATTFARBEN

   Zwei Fassungen desselben Blattes: Papier und Lichtpause.
   Der Darkmode ist keine eingefärbte Variante, sondern die
   reprografische Umkehrung — ebenso achromatisch.

   Jeder Wert steht zweimal: zuerst der helle Festwert, dann das
   Paar. Browser ohne light-dark() ignorieren die zweite Zeile
   und bekommen ein vollständiges helles Blatt statt gar keins.
   ============================================================ */
:root {
  color-scheme: light dark;

  --paper:      #ebebe9;
  --paper:      light-dark(#ebebe9, #0e0f11);
  --paper-lift: #f6f6f4;
  --paper-lift: light-dark(#f6f6f4, #17181b);

  --graphit:      #15161a;
  --graphit:      light-dark(#15161a, #e8e8e6);
  --graphit-dim:  #52555b;                        /* 6,3:1 · 7,5:1 */
  --graphit-dim:  light-dark(#52555b, #9ea3a9);
  /* Muss auch auf --paper-lift tragen, nicht nur auf dem
     Blattgrund: im Schriftfeld sitzt es auf der helleren Fläche.
     Auf --paper-lift: 5,3:1 hell · 5,0:1 dunkel */
  --graphit-mute: #64676c;
  --graphit-mute: light-dark(#64676c, #838890);

  --rule:      #c2c3c0;
  --rule:      light-dark(#c2c3c0, #33363b);
  --rule-fine: #d8d8d5;
  --rule-fine: light-dark(#d8d8d5, #26282c);

  /* Weiße Haarlinien strahlen auf Schwarz stärker als schwarze
     auf Weiß — das Raster ist im Negativ deshalb schwächer. */
  --grid:       rgba(21, 22, 26, 0.055);
  --grid:       light-dark(rgba(21,22,26,0.055), rgba(255,255,255,0.045));
  --grid-major: rgba(21, 22, 26, 0.10);
  --grid-major: light-dark(rgba(21,22,26,0.10), rgba(255,255,255,0.085));

  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: 'Satoshi', system-ui, sans-serif;
  --gutter: clamp(1.25rem, 5vw, 4rem);
}

/* Der Umschalter überschreibt die Systemeinstellung für diesen Besuch */
:root[data-sheet="light"] { color-scheme: light; }
:root[data-sheet="dark"]  { color-scheme: dark; }

/* ============================================================
   BASIS
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--graphit);
  font-family: var(--sans);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; }
:focus-visible { outline: 2px solid var(--graphit); outline-offset: 3px; }

.wrap { width: min(100%, 66rem); margin-inline: auto; padding-inline: var(--gutter); }

.label {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--graphit-mute);
}

/* ============================================================
   DAS BLATT
   Nur der Kopf ist gerastert. Was darunter steht, ist
   Erläuterung und liegt auf glattem Papier.
   ============================================================ */
.plan {
  position: relative;
  padding-block: clamp(2rem, 6vh, 4rem) clamp(2.5rem, 7vh, 4.5rem);
}
.plan::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px),
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 7.5rem 7.5rem, 7.5rem 7.5rem, 1.5rem 1.5rem, 1.5rem 1.5rem;
  -webkit-mask-image: linear-gradient(to bottom, #000 52%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 52%, transparent 100%);
  pointer-events: none;
}
.plan > * { position: relative; }

.plan__head {
  display: flex; flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  align-items: center; justify-content: space-between;
  margin-bottom: clamp(1.25rem, 4vw, 2rem);
}
.plan__eyebrow {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--graphit-dim);
}
.plan__eyebrow b { font-weight: 400; color: var(--graphit); }

/* --- Blattfarbe umschalten ------------------------------------
   Beschriftet mit dem Begriff aus der Reprografie, nicht mit
   Sonne und Mond: umgeschaltet wird das Blatt, nicht das Wetter. */
.sheet-toggle {
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin: 0; padding: 0.35rem 0.6rem;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 2px;
  color: var(--graphit-dim);
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.sheet-toggle:hover { color: var(--graphit); border-color: var(--graphit-dim); }
.sheet-toggle[hidden] { display: none; }

/* Halb gefülltes Quadrat — das Tonwertzeichen einer Umkehrung */
.sheet-toggle__mark {
  width: 11px; height: 11px;
  border: 1px solid currentColor;
  background: linear-gradient(135deg, currentColor 0 50%, transparent 50%);
}

/* --- Der Name, technisch gesetzt --- */
.parcel { display: inline-block; max-width: 100%; }

.parcel__name {
  margin: 0;
  font-family: var(--mono);
  font-weight: 400;
  font-size: clamp(1.75rem, 8.4vw, 4.25rem);
  line-height: 1.1;
  /* Enger als die übliche Untergrenze von -0.04em. Bei Monospace ist
     das kein Gedränge: die Glyphen bringen ihren Seitenabstand in der
     festen Laufweite schon mit, und ohne die Korrektur wirkt der Name
     auseinandergefallen statt gesetzt. Bei Proportionalschrift wäre
     der Wert zu eng. */
  letter-spacing: -0.045em;
  color: var(--graphit);
  white-space: nowrap;
}
.parcel__fit { display: inline-block; }
.parcel__name .tld { color: var(--graphit-mute); }

/* --- Die Bemaßung ---------------------------------------------
   Maßhilfslinien senkrecht, Maßlinie waagerecht, Maßzahl darunter.
   `.parcel` ist shrink-to-fit — die Bemaßung ist damit von selbst
   exakt so breit wie der Name. Keine Breite aus JavaScript. */
.measure {
  position: relative;
  height: 1.5rem;
  margin-top: 0.6rem;
}
.measure::before {                       /* Maßlinie */
  content: '';
  position: absolute; left: 0; right: 0; top: 6px;
  border-top: 1px solid var(--graphit-dim);
}
.measure__tick {                         /* Maßhilfslinie */
  position: absolute; top: 0; height: 13px;
  border-left: 1px solid var(--graphit-dim);
}
.measure__tick--a { left: 0; }
.measure__tick--b { right: 0; }
.measure__val {
  position: absolute; top: 14px; left: 0;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  color: var(--graphit-dim);
  white-space: nowrap;
}

.plan__claim {
  margin: clamp(2.25rem, 6vw, 3.25rem) 0 0;
  max-width: 42ch;
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.4375rem);
  line-height: 1.5;
  letter-spacing: -0.012em;
  text-wrap: pretty;
}
.plan__claim span { color: var(--graphit-dim); }

/* --- Das Schriftfeld ------------------------------------------
   Jede technische Zeichnung hat eins, unten rechts. Hier stehen
   die Eckdaten, weil sie genau dort hingehören. */
.titleblock {
  margin: clamp(2.25rem, 6vw, 3.5rem) 0 0;
  margin-left: auto;
  max-width: 30rem;
  background: var(--paper-lift);
  border: 1px solid var(--graphit-dim);
  display: grid;
}
.titleblock div {
  display: flex; align-items: baseline; gap: 1rem;
  padding: 0.55rem 0.85rem;
  border-bottom: 1px solid var(--rule);
}
.titleblock div:last-child { border-bottom: 0; }
.titleblock dt {
  flex: 0 0 7.5rem;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--graphit-mute);
}
.titleblock dd {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--graphit);
}

/* ============================================================
   ERLÄUTERUNGEN
   ============================================================ */
.row { border-top: 1px solid var(--rule); padding-block: clamp(2.5rem, 7vw, 4.25rem); }
.row__grid { display: grid; gap: clamp(0.6rem, 2.5vw, 2.5rem); }
@media (min-width: 54rem) {
  .row__grid { grid-template-columns: 10rem 1fr; }
  .row--full .row__grid { grid-template-columns: 1fr; gap: 1.5rem; }
}

h2 {
  margin: 0 0 1.1rem;
  font-size: clamp(1.4375rem, 1.2rem + 1.2vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.16;
  text-wrap: balance;   /* gleichmäßige Zeilen statt einem Wort in der zweiten */
}
p { margin: 0 0 1.1rem; max-width: 60ch; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
.soft { color: var(--graphit-dim); }

/* Blattverweis — auf einer technischen Zeichnung steht so der Hinweis
   auf ein anderes Blatt. Hier führt er aus der Zeichnung heraus. */
.crossref { margin: 1.5rem 0 0; }
.crossref a {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--graphit);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 2px;
  transition: border-color .15s;
}
.crossref a:hover { border-bottom-color: var(--graphit); }

/* Für Bildschirmleser sichtbar, für Augen nicht */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.stances { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.stances li {
  padding-block: 1.1rem;
  border-bottom: 1px solid var(--rule-fine);
  display: grid; gap: 0.3rem;
}
@media (min-width: 44rem) {
  .stances li { grid-template-columns: 17rem 1fr; gap: 2rem; align-items: baseline; }
}
.stances h3 { margin: 0; font-size: 1rem; font-weight: 500; }
.stances p { margin: 0; color: var(--graphit-dim); font-size: 0.9375rem; }

/* ============================================================
   FUSS
   ============================================================ */
.site-footer { border-top: 1px solid var(--graphit-dim); padding-block: 2rem; }
.site-footer .wrap {
  display: flex; flex-wrap: wrap; gap: 0.75rem 2rem;
  align-items: center; justify-content: space-between;
}
.footer-nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.footer-nav a {
  font-size: 0.875rem;
  color: var(--graphit-dim);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .15s, border-color .15s;
}
.footer-nav a:hover { color: var(--graphit); border-bottom-color: var(--graphit); }

/* ============================================================
   BEWEGUNG
   Die Zeichnung entsteht, dann liegt sie still.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .plan::before  { animation: fade .8s ease-out both; }
  .parcel__name  { animation: fade .55s ease-out .1s both; }

  /* Die Maßlinie wird gezogen, die Hilfslinien setzen sich danach */
  .measure::before { transform-origin: left center; animation: draw .5s cubic-bezier(.4,0,.2,1) .4s both; }
  .measure__tick   { animation: fade .25s ease-out .85s both; }
  .measure__val    { animation: fade .4s ease-out .9s both; }

  .plan__claim { animation: rise .6s cubic-bezier(.22,1,.36,1) .45s both; }
  .titleblock  { animation: rise .6s cubic-bezier(.22,1,.36,1) .6s both; }

  @keyframes fade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @keyframes rise { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }

  .reveal { opacity: 0; transform: translateY(12px); transition: opacity .5s ease-out, transform .5s cubic-bezier(.22,1,.36,1); }
  .reveal.in-view { opacity: 1; transform: none; }
}

/* Ohne JavaScript bleibt alles sichtbar. Die Bemaßung stimmt auch
   dann, weil ihre Breite aus dem Layout kommt und nicht aus einer
   Berechnung — sie braucht keinen Sonderfall. */
.no-js .reveal { opacity: 1; transform: none; }

/* ============================================================
   BLATTWECHSEL
   Nur für die Dauer des Umschlags, damit die Farben nicht
   hart springen. Steht bewusst am Ende: die Regel soll die
   Übergänge weiter oben bei Gleichstand überschreiben.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .sheet-switching,
  .sheet-switching * {
    transition: background-color .22s ease, border-color .22s ease, color .22s ease;
  }
}