/* ══════════════════════════════════════════════════════════════════
   ARCH & GROUND — Landing Page

   Keine externen Verbindungen. Keine CDNs, keine Google Fonts,
   keine Cookies, kein Tracking. Alles liegt in diesem Ordner.

   Schrift:  Outfit (Outfit Project Authors) · SIL Open Font License 1.1
             Lizenztext: /licenses/OFL-Outfit.txt

   Outfit hat eine Gewichtsachse (100–900), aber keine Breitenachse und
   keine Kursive. Deshalb steht nirgends font-stretch, und Betonung im
   Fließtext läuft über das Gewicht statt über Kursivschnitt — mit
   font-synthesis:none würde der Browser sonst eine schiefe Fälschung
   erzeugen.
   ══════════════════════════════════════════════════════════════════ */

/* ── 1 · SCHRIFT (lokal, variabel) ──────────────────────────────────
   Zwei Zeichensatz-Abschnitte. Der zweite wird nur geladen, wenn ein
   Zeichen daraus tatsächlich vorkommt — kostet sonst nichts.        */

@font-face{
  font-family:"Outfit";
  src:url("fonts/outfit-latin.woff2") format("woff2");
  font-weight:100 900; font-style:normal;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Outfit";
  src:url("fonts/outfit-latin-ext.woff2") format("woff2");
  font-weight:100 900; font-style:normal;
  font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ── 2 · TOKENS ─────────────────────────────────────────────────────
   Drei Farbwerte, mehr nicht: Papier, Tinte, ein gedämpftes Salbeigrün.
   Alles Weitere sind Abstufungen davon, keine zusätzlichen Farben.  */
:root{
  --paper:      #F7F5F0;
  --ink:        #1B1C19;
  --sage:       #5C6B5D;   /* der einzige Farbwert, 5,1:1 auf Papier */

  --grey:       #6E6D66;   /* das „&" in der Wortmarke, 4,8:1 */
  --muted:      #5E5F58;   /* Fließtext zweiter Ordnung, 5,9:1 */
  --hairline:   #DFDBD1;
  --hairline-2: #CBC6BA;
  --surface:    #EFEBE1;   /* ruhige Fläche für den Credo-Kasten */
  --sage-soft:  #E4E7E1;

  --font: "Outfit", "Helvetica Neue", Arial, sans-serif;

  --gutter: clamp(1.75rem, 6.2vw, 6.75rem);      /* Textkante */
  --rule-x: clamp(1.125rem, 5.1vw, 5.25rem);     /* Linien liegen davor,
                                                    nie unter der Schrift */
  /* dieselbe Linie, aber vom Fensterrand aus gerechnet — daran hängt
     der Aufhellungsverlauf am Seitenrand */
  --rule-abs: calc(max(0px, (100vw - 1480px) / 2) + var(--rule-x));
  --maxw:   1480px;
  --section-y: clamp(5rem, 13vh, 10rem);
  --topbar-h:  clamp(4rem, 2rem + 3.4vh, 5rem);

  --ease: cubic-bezier(.16,1,.3,1);
  --dur:  .9s;
}

/* ── 3 · RESET & BASIS ──────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
body,h1,h2,h3,p,ul,figure,figcaption{ margin:0; padding:0; }
ul{ list-style:none; }
img,svg{ max-width:100%; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font);
  font-weight:400;
  font-size:clamp(1rem,.95rem + .22vw,1.0938rem);
  line-height:1.62;
  overflow-x:hidden;
  font-synthesis:none;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

a{ color:inherit; }
::selection{ background:var(--sage); color:var(--paper); }

:focus-visible{
  outline:2px solid var(--ink);
  outline-offset:4px;
  border-radius:2px;
}

.skip-link{
  position:fixed; top:.75rem; left:.75rem; z-index:99;
  transform:translateY(-200%);
  background:var(--ink); color:var(--paper);
  padding:.85rem 1.35rem;
  font-size:.75rem; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; text-decoration:none;
  transition:transform .25s var(--ease);
}
.skip-link:focus-visible{ transform:translateY(0); }

/* ── 4 · HINTERGRUND ────────────────────────────────────────────────
   Eine Spur Wärme oben, ein Hauch Salbei unten, dazu ein feines Korn.
   Bewusst so schwach, dass man es eher spürt als sieht — und ohne eine
   vierte Farbe einzuführen.                                        */
.wash{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    /* Ränder außerhalb der Satzspiegellinien hellen nach Weiß auf und
       laufen ins Papier aus. Der Rand selbst bleibt über weite Strecken
       kräftig weiß — erst kurz vor der Linie fällt er zügig ab. */
    linear-gradient(to right, #FFFFFF 0px, #FFFFFF calc(var(--rule-abs) * .62), rgba(255,255,255,0) var(--rule-abs)),
    linear-gradient(to left,  #FFFFFF 0px, #FFFFFF calc(var(--rule-abs) * .62), rgba(255,255,255,0) var(--rule-abs)),
    radial-gradient(70% 46% at 88% -6%,  rgba(150,140,120,.10), transparent 68%),
    radial-gradient(78% 52% at 12% 104%, rgba(92,107,93,.11),   transparent 68%),
    linear-gradient(176deg,#FBF9F5 0%,#F7F5F0 46%,#F2EFE7 100%);
}
.grain{
  position:fixed; inset:0; z-index:60; pointer-events:none;
  opacity:.045; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Senkrechte Satzspiegellinien — der ruhige editorische Rahmen */
.rules{ display:none; }
@media (min-width:1100px){
  .rules{
    display:block; position:fixed; top:0; bottom:0; z-index:1;
    left:50%; transform:translateX(-50%);
    width:min(100vw,var(--maxw)); pointer-events:none;
  }
  .rules span{
    position:absolute; top:0; bottom:0; width:1px; background:var(--hairline);
  }
  .rules span:first-child{ left:var(--rule-x); }
  .rules span:last-child{  right:var(--rule-x); }
}

/* ── 5 · LAYOUT ─────────────────────────────────────────────────── */

.topbar,.hero,.section,.footer{
  width:100%; max-width:var(--maxw); margin-inline:auto;
  padding-inline:var(--gutter);
  position:relative; z-index:2;
}

/* ── 6 · TOPBAR ─────────────────────────────────────────────────── */
.topbar{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:1rem;
  padding-block:clamp(1.5rem,3.4vh,2.5rem) 0;
}
.topbar__mark{
  font-weight:700;
  font-size:clamp(.875rem,1.3vw,1.0625rem);
  letter-spacing:.12em; text-transform:uppercase; text-decoration:none;
  white-space:nowrap;
  transition:opacity .3s var(--ease);
}
/* Wortmarke ausschließlich Schwarz/Grau — so bleibt sie für Prägung
   und einfarbigen Druck ohne Umbau verwendbar. */
.topbar__mark em{ font-style:normal; color:var(--grey); }
.topbar__mark:hover{ opacity:.55; }
.topbar__meta{
  font-size:.6875rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted); text-align:right; white-space:nowrap;
}
@media (max-width:639px){ .topbar__meta{ display:none; } }

/* ── 7 · HERO ───────────────────────────────────────────────────────
   Ruhige Fläche, die Wortmarke flach und in voller Deckung, und am
   rechten Rand der senkrechte Stempel als einziges Zierdetail.     */
.hero{
  position:relative;
  min-height:calc(100dvh - var(--topbar-h));
  display:flex; flex-direction:column; justify-content:center;
  padding-block:clamp(2rem,7vh,5rem) clamp(1.5rem,4vh,2.5rem);
}
.hero__over{
  font-size:.6875rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted);
  margin-bottom:clamp(1.5rem,4vh,3rem);
  display:flex; align-items:center; gap:.9rem;
}
.hero__over::after{
  content:""; height:1px; flex:1; max-width:8rem;
  background:linear-gradient(90deg,var(--hairline-2),transparent);
}

.wordmark{
  font-weight:400;
  font-size:clamp(2.6rem,min(14.6vw,20vh),11.5rem);
  line-height:.82;            /* enger Satz — die zwei Zeilen sollen als
                                 ein Block gelesen werden, nicht als
                                 zwei Zeilen Fließtext */
  letter-spacing:.015em;      /* geometrische Versalien wollen Luft */
  text-transform:uppercase;
  margin-block:auto;
  color:var(--ink);                /* flach, ohne Verlauf und Schatten */
}
.wordmark em{ font-style:normal; color:var(--sage); padding-inline:.04em; }

/* Die zweite Zeile rückt ein und bringt eine Diagonale in einen sonst
   sehr statischen Block. In em, damit die Einrückung auf jeder
   Fenstergröße im selben Verhältnis zur Schrift steht. */
.wordmark .line:nth-child(2){ margin-left:.7em; }

/* padding/margin-block gleichen den engen Zeilenabstand aus: overflow
   :hidden für die Einblendung würde Versalien sonst oben beschneiden. */
.line{ display:block; overflow:hidden; padding-block:.16em; margin-block:-.16em; }
.line__in{ display:block; will-change:transform; }

/* Das senkrechte Schriftdetail am rechten Rand. Absolut positioniert,
   damit es die Höhe des Heros nicht aufbläht; erst ab 1240px, wo neben
   der Wortmarke sicher Platz bleibt. */
.hero__stamp{ display:none; }
@media (min-width:1240px){
  .hero__stamp{
    display:block;
    position:absolute; right:var(--gutter); top:50%;
    transform:translateY(-50%);
    border:1px solid var(--hairline-2);
    padding:.9rem .55rem;
  }
  .hero__stamp span{
    display:block; writing-mode:vertical-rl;
    font-size:.625rem; font-weight:500;
    letter-spacing:.24em; text-transform:uppercase;
    color:var(--muted); white-space:nowrap;
  }
}

.hero__foot{
  padding-top:clamp(2rem,6vh,4rem);
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:1.75rem;
  font-size:.6875rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted);
}
.hero__scroll{ display:flex; align-items:center; gap:.75rem; white-space:nowrap; }
.hero__scroll i{
  display:block; width:3.5rem; height:1px; background:var(--hairline-2);
  position:relative; overflow:hidden;
}
.hero__scroll i::after{
  content:""; position:absolute; inset:0; background:var(--sage);
  transform:translateX(-100%);
  animation:sweep 2.8s var(--ease) infinite;
}
@keyframes sweep{
  0%{ transform:translateX(-100%); }
  55%{ transform:translateX(0); }
  100%{ transform:translateX(100%); }
}

/* ── 8 · ABSCHNITTE ─────────────────────────────────────────────── */
.section{ padding-block:var(--section-y); }

.label{
  font-family:var(--font); font-weight:500;
  font-size:.6875rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--sage);
  padding-bottom:1.25rem; margin-bottom:clamp(2.5rem,6vh,4.5rem);
  border-bottom:1px solid var(--hairline);
}
.label--clay{ color:var(--muted); }

/* 8a · Intent */
.intent{ display:grid; gap:clamp(2rem,5vw,4.5rem); grid-template-columns:1fr; }
@media (min-width:900px){
  .intent{ grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); align-items:start; }
}
.intent__lead{
  font-weight:450;
  font-size:clamp(1.5rem,3.2vw,2.6rem);
  line-height:1.16; letter-spacing:-.005em;
  max-width:20ch; text-wrap:balance;
}
.intent__body{ display:grid; gap:1.75rem; max-width:52ch; }
.intent__body p{ color:var(--muted); }
/* Outfit hat keine Kursive. Betonung deshalb über Gewicht und Farbe —
   echt gesetzt statt vom Browser schräg gestellt. */
.intent__body em{ font-style:normal; font-weight:600; color:var(--ink); }

/* Credo — auf warmer Sandfläche, damit die Seite nicht nur Papier ist */
.credo{
  margin-top:clamp(3rem,8vh,5rem);
  padding:clamp(1.75rem,4vw,2.75rem) clamp(1.5rem,4vw,3rem);
  background:var(--surface);              /* flache Fläche, kein Verlauf */
  border-left:3px solid var(--sage);
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.75rem 1.75rem;
}
.credo__key{
  font-size:.6875rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--sage);
  white-space:nowrap;
}
.credo__val{
  font-weight:450;
  font-size:clamp(1.1rem,2.1vw,1.5rem);
  line-height:1.32; letter-spacing:-.004em;
  flex:1 1 22ch; text-wrap:balance;
}

.notice{
  margin-top:clamp(2.5rem,6vh,4rem);
  border-top:1px solid var(--hairline);
  display:grid; gap:0;
}
.notice li{
  padding-block:1.1rem;
  border-bottom:1px solid var(--hairline);
  font-weight:450;
  font-size:clamp(1rem,1.8vw,1.2rem);
  color:var(--muted);
}
@media (min-width:900px){
  .notice{ grid-template-columns:repeat(3,1fr); border-bottom:1px solid var(--hairline); }
  .notice li{ border-bottom:none; padding-right:1.75rem; }
}

/* 8b · Status */
.status__line{
  font-weight:550;
  font-size:clamp(1.75rem,5.2vw,4rem);
  line-height:1.06; letter-spacing:-.012em;
  text-wrap:balance;
}
.status__meta{
  margin-top:clamp(2rem,5vh,3.5rem);
  max-width:46ch; font-size:.9375rem; color:var(--muted);
}
.status__meta a{
  color:var(--sage);
  text-decoration:underline;
  text-underline-offset:.28em; text-decoration-thickness:1px;
  transition:opacity .25s var(--ease);
}
.status__meta a:hover{ opacity:.6; }

/* ── 9 · FOOTER ─────────────────────────────────────────────────── */
.footer{ padding-block:0 clamp(2.5rem,6vh,4rem); }
.footer__row{
  border-top:1px solid var(--hairline);
  padding-top:1.75rem;
  display:flex; flex-wrap:wrap; align-items:baseline;
  justify-content:space-between; gap:.5rem 1.75rem;
  font-size:.6875rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
}
.footer__nav{ display:flex; flex-wrap:wrap; gap:.25rem 1.75rem; }
.footer__nav a{
  text-decoration:none;
  padding-block:.6rem;
  border-bottom:1px solid transparent;
  transition:color .25s var(--ease),border-color .25s var(--ease);
}
.footer__nav a:hover{ color:var(--ink); border-bottom-color:var(--sage); }
.footer__disclaimer{
  margin-top:1.25rem; max-width:52ch;
  font-size:.75rem; line-height:1.7; color:var(--muted);
}

/* ── 10 · REVEAL / MOTION ───────────────────────────────────────── */
.reveal{
  opacity:0; transform:translateY(14px);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease);
  transition-delay:var(--d,0ms);
}
.reveal.is-in{ opacity:1; transform:none; }

.line__in{ transform:translateY(105%); }
.js-ready .line__in{
  transition:transform 1.2s var(--ease);
  transition-delay:calc((var(--i,1) - 1) * 120ms + 100ms);
}
.js-ready.is-loaded .line__in{ transform:translateY(0); }

html:not(.js-ready) .reveal{ opacity:1; transform:none; }
html:not(.js-ready) .line__in{ transform:none; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .reveal,.line__in{ opacity:1 !important; transform:none !important; transition:none !important; }
  .hero__scroll i::after{ animation:none; transform:translateX(0); }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; }
}

/* ── 11 · RECHTLICHE SEITEN ─────────────────────────────────────── */
.legal{ padding-block:clamp(3rem,8vh,6rem) clamp(4rem,10vh,7rem); }
.legal__back{
  display:inline-flex; align-items:center; gap:.65rem;
  font-size:.6875rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted); text-decoration:none;
  padding-block:.5rem; margin-bottom:clamp(2.5rem,6vh,4rem);
  transition:color .25s var(--ease);
}
.legal__back::before{
  content:""; width:1.75rem; height:1px; background:var(--hairline-2);
  transition:width .35s var(--ease),background .25s var(--ease);
}
.legal__back:hover{ color:var(--ink); }
.legal__back:hover::before{ width:2.5rem; background:var(--sage); }

.legal__title{
  font-weight:600;
  font-size:clamp(2rem,6vw,4rem);
  line-height:1.02; letter-spacing:-.014em;
  text-wrap:balance;
}
.legal__sub{
  margin-top:.9rem;
  font-size:.6875rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
  padding-bottom:clamp(1.5rem,4vh,2.5rem);
  border-bottom:1px solid var(--hairline);
  margin-bottom:clamp(2.5rem,6vh,4rem);
}

.prose{ max-width:64ch; }
.prose h2{
  font-weight:600;
  font-size:clamp(1.05rem,2.2vw,1.3rem);
  line-height:1.3; letter-spacing:-.003em;
  margin-top:clamp(2.5rem,6vh,3.5rem); margin-bottom:.85rem;
}
.prose h2:first-child{ margin-top:0; }
.prose p,.prose li{ color:var(--muted); }
.prose p{ margin-bottom:1.1rem; }
.prose ul{ margin:0 0 1.1rem; padding-left:1.15rem; list-style:disc; }
.prose li{ margin-bottom:.4rem; }
.prose li::marker{ color:var(--hairline-2); }
.prose a{
  color:var(--sage);
  text-underline-offset:.25em; text-decoration-thickness:1px;
}
.prose strong{ color:var(--ink); font-weight:600; }

.addr{
  font-style:normal; color:var(--muted);
  border-left:2px solid var(--sage);
  padding-left:1.25rem; margin-bottom:1.1rem;
}

/* Sichtbar markierte Platzhalter — vor dem Livegang ersetzen */
.ph{
  display:inline-block;
  background:var(--sage-soft); color:#3A4A3C;
  padding:.05em .5em; border-radius:2px;
  font-weight:500; font-size:.95em;
  box-decoration-break:clone; -webkit-box-decoration-break:clone;
}
.ph-block{
  display:block;
  border:1px dashed var(--hairline-2);
  background:rgba(27,28,25,.028);
  padding:clamp(1.25rem,3vw,1.85rem);
  margin-bottom:1.75rem;
  color:var(--muted); font-size:.9375rem;
}
.ph-block strong{
  display:block; color:var(--sage); font-weight:500;
  font-size:.6875rem; letter-spacing:.18em; text-transform:uppercase;
  margin-bottom:.7rem;
}

.credits{ display:grid; gap:1.25rem; margin-bottom:1.1rem; }
.credits div{
  border-top:1px solid var(--hairline);
  padding-top:.9rem;
  color:var(--muted); font-size:.9375rem;
}
.credits b{
  display:block; color:var(--ink); font-weight:600;
  margin-bottom:.2rem;
}

/* ── 12 · SPRACHUMSCHALTER UND HERVORHEBUNG ─────────────────────────
   Beides nur auf den Rechtsseiten. Der Umschalter sitzt in derselben
   Zeile wie der Rückweg, damit über dem Titel keine zweite Zeile
   entsteht. Die Hervorhebung trägt den Widerspruchshinweis, der nach
   Art. 21 Abs. 4 DSGVO „getrennt" von der Rechteliste stehen muss. */

.legal__head{
  display:flex; flex-wrap:wrap; align-items:baseline;
  justify-content:space-between; gap:.5rem 1.75rem;
  margin-bottom:clamp(2.5rem,6vh,4rem);
}
.legal__head .legal__back{ margin-bottom:0; }

.langswitch{
  display:flex; gap:1.25rem;
  font-size:.6875rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
}
.langswitch a{
  color:var(--muted); text-decoration:none;
  padding-block:.5rem;
  border-bottom:1px solid transparent;
  transition:color .25s var(--ease),border-color .25s var(--ease);
}
.langswitch a:hover{ color:var(--ink); border-bottom-color:var(--sage); }
.langswitch [aria-current]{ color:var(--ink); border-bottom-color:var(--hairline-2); }

.callout{
  border-left:2px solid var(--sage);
  background:var(--surface);
  padding:clamp(1.1rem,2.6vw,1.5rem) clamp(1.25rem,3vw,1.75rem);
  margin-bottom:1.1rem;
}
/* NUR die Überschriftszeile des Kastens, also das <strong> im ERSTEN
   Absatz. Vorher stand hier .callout strong:first-child — und das war
   falsch: :first-child zählt nur Elemente, Textknoten nicht. Ein
   <strong> mitten in einem Satz ist damit ebenfalls "first-child", wenn
   vor ihm nur Text steht. Genau das ist im Widerspruchskasten passiert:
   die hervorgehobene Passage "haben Sie das Recht ... zu widersprechen"
   wurde als Kapitälchen-Label gesetzt und riss den Satz auseinander.
   Der Kindkombinator > bindet die Regel jetzt an den ersten Absatz. */
.callout > p:first-child strong{
  display:block; color:var(--sage); font-weight:500;
  font-size:.6875rem; letter-spacing:.18em; text-transform:uppercase;
  margin-bottom:.6rem;
}
.callout p:last-child{ margin-bottom:0; }

/* ── 13 · SPRACHPAARE IN NAVIGATIONEN ───────────────────────────────
   „Impressum / Legal Notice" ist ein Eintrag mit zwei Zielen: beide
   Wörter sind eigene Links, der Schrägstrich dazwischen ist nur
   Schriftbild und wird deshalb nicht vorgelesen. Als inline-flex bleibt
   die Zeilenhöhe dieselbe wie bei einfachen Links, weil die Anker
   weiterhin Flex-Elemente sind und ihr padding-block behalten. */
.linkpair{ display:inline-flex; align-items:baseline; gap:.45rem; }
.linkpair > span{ opacity:.45; }