/* =========================================================
   setsign.me — Unterseiten in der Sprache von V1

   Die Startseite ist ein einziger Bildschirm ohne Scrollen. Eine Unterseite
   ist das Gegenteil: Sie hat Inhalt, und Inhalt braucht Platz. Was bleibt,
   ist alles andere — Schwarz, BDO Grotesk, die weiße Pille oben.

   Kein Hintergrundvideo: Bewegung hinter einem Text, den jemand liest, ist
   eine Zumutung. Die Startseite darf das, weil dort niemand liest.
   ========================================================= */

:root {
  --bg: #000000;
  --text: #ffffff;
  --muted: #8e8e8e;
  --nav-text: #2e2e2e;
  --pill-dark: #28282a;
  --sign-in-text: #c8c8c8;
  --nav-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
  --linie: rgba(255, 255, 255, 0.12);
  --cinnabar: #ea4335;
  --font-sans: "BDO Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-display: "BDO Grotesk", "Segoe UI", system-ui, sans-serif;
}

@font-face {
  font-family: "BDO Grotesk";
  src: url("../fonts/BDOGrotesk-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "BDO Grotesk";
  src: url("../fonts/BDOGrotesk-Medium.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "BDO Grotesk";
  src: url("../fonts/BDOGrotesk-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "BDO Grotesk";
  src: url("../fonts/BDOGrotesk-ExtraBold.ttf") format("truetype");
  font-weight: 800; font-style: normal; font-display: swap;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/*
   `hidden` verliert gegen jede eigene display-Regel — und dann steht ein
   "Abmelden" im Kopf, obwohl niemand angemeldet ist. Diese Zeile stellt
   wieder her, was das Attribut verspricht.
*/
[hidden] { display: none !important; }


body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--cinnabar); color: #fff; }

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

/* ---------- Kopf: dieselbe Pille wie auf der Startseite ---------- */

.seite-kopf {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  justify-content: center;
  padding: clamp(14px, 2.2vh, 24px) clamp(14px, 3vw, 32px);
  /* Der Verlauf ist hier kein Zierrat, sondern Lesbarkeit: Der Text darunter
     soll unter der Pille verschwinden, nicht an ihr abschneiden. */
  background: linear-gradient(to bottom, #000 55%, rgba(0, 0, 0, 0));
}

.kopf-pille {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 720px;
  gap: clamp(8px, 1.4vw, 16px);
  padding: 5px;
  border-radius: 999px;
  background: #fff;
  box-shadow: var(--nav-shadow);
}

.logo-lockup {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding-left: clamp(6px, 0.8vw, 10px);
  padding-right: clamp(4px, 0.8vw, 10px);
  text-decoration: none;
  flex-shrink: 0;
}

.logo-lockup img {
  width: clamp(32px, 3.4vw, 38px);
  height: clamp(32px, 3.4vw, 38px);
  object-fit: contain;
  display: block;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.logo-lockup:hover img { transform: scale(1.06); }

.logo-wortmarke {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(18px, 1.9vw, 22px);
  letter-spacing: -0.03em;
  color: #0a0b0b;
  line-height: 1;
}

.nav-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(2px, 0.6vw, 8px);
  flex: 1;
  height: clamp(38px, 4.4vw, 42px);
}

.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 100%;
  padding: 0 clamp(10px, 1.6vw, 16px);
  border-radius: 999px;
  font-weight: 500;
  font-size: clamp(13px, 1.4vw, 15px);
  letter-spacing: -0.01em;
  color: var(--nav-text);
  text-decoration: none;
  opacity: 0.5;
  transition: opacity 0.25s ease;
}

.nav-link:hover { opacity: 0.75; }
.nav-link.active { opacity: 1; }

.nav-link.active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 5px;
  width: 3px;
  height: 3px;
  transform: translateX(-50%);
  background: #000;
  box-shadow: -5px 0 0 #000, 5px 0 0 #000;
}

.sign-in {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  height: clamp(38px, 4.4vw, 42px);
  padding: 0 clamp(16px, 2vw, 22px);
  border-radius: 999px;
  background: var(--pill-dark);
  color: var(--sign-in-text);
  font-weight: 500;
  font-size: clamp(13px, 1.4vw, 15px);
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: background 0.25s ease, color 0.25s ease;
}

.sign-in:hover { background: #323234; color: #fff; }

/*
   Angemeldet: Statt „Anmelden" steht dort die Adresse (angemeldet.js).
   Gedeckelt, weil eine Mailadresse beliebig lang sein kann; die volle
   Adresse steht im title und im aria-label.
*/
.sign-in.ist-angemeldet {
  max-width: 22ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  line-height: clamp(38px, 4.4vw, 42px);
}
.mobile-signin.ist-angemeldet { word-break: break-all; }

.burger { display: none; }

/* ---------- Rumpf ---------- */

.rumpf {
  max-width: 780px;
  margin: 0 auto;
  padding: clamp(28px, 6vh, 72px) clamp(20px, 5vw, 32px) clamp(80px, 12vh, 140px);
}

.seiten-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: clamp(16px, 3vh, 26px);
}

.seiten-kicker::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cinnabar);
  flex-shrink: 0;
}

.seiten-titel {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(36px, 6.4vw, 66px);
  line-height: 0.94;
  letter-spacing: -0.035em;
  max-width: 16ch;
}

.seiten-lead {
  margin-top: clamp(18px, 3vh, 28px);
  max-width: 58ch;
  font-size: clamp(17px, 1.9vw, 21px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.015em;
  color: #d4d4d4;
}

.seiten-lead strong { color: #fff; font-weight: 700; }

/* ---------- Abschnitte ---------- */

.block {
  margin-top: clamp(46px, 8vh, 84px);
  padding-top: clamp(28px, 5vh, 44px);
  border-top: 1px solid var(--linie);
}

.block-titel {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(23px, 3vw, 31px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin-bottom: clamp(14px, 2.4vh, 22px);
}

.block p {
  max-width: 62ch;
  font-size: clamp(15px, 1.65vw, 17px);
  font-weight: 500;
  line-height: 1.62;
  letter-spacing: -0.012em;
  color: #c4c2c3;
}

.block p + p { margin-top: 1em; }
.block p strong { color: #fff; font-weight: 700; }

/* ---------- Schritte und Karten ---------- */

.schritte {
  list-style: none;
  counter-reset: schritt;
  display: grid;
  gap: 1px;
  margin-top: clamp(18px, 3vh, 28px);
  background: var(--linie);
  border: 1px solid var(--linie);
  border-radius: 14px;
  overflow: hidden;
}

.schritt {
  counter-increment: schritt;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(14px, 2.4vw, 22px);
  align-items: start;
  padding: clamp(18px, 3vh, 26px) clamp(18px, 3vw, 26px);
  background: #000;
}

.schritt::before {
  content: counter(schritt);
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  color: #fff;
}

.schritt b {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(16px, 1.8vw, 18px);
  letter-spacing: -0.02em;
  margin-bottom: 5px;
}

.schritt span {
  display: block;
  font-size: clamp(14px, 1.55vw, 16px);
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: -0.012em;
  color: #a9a7a8;
}

.karten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: 14px;
  margin-top: clamp(18px, 3vh, 28px);
}

.karte {
  padding: clamp(18px, 3vh, 24px);
  border: 1px solid var(--linie);
  border-radius: 14px;
}

.karte b {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(16px, 1.8vw, 18px);
  letter-spacing: -0.02em;
  margin-bottom: 7px;
}

.karte p {
  font-size: clamp(14px, 1.55vw, 15px);
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: -0.012em;
  color: #a9a7a8;
  max-width: none;
}

/* Eine Regel, wie sie im Code steht — die Nummer trägt sie. */
.regeln {
  list-style: none;
  display: grid;
  gap: 1px;
  margin-top: clamp(18px, 3vh, 28px);
  background: var(--linie);
  border: 1px solid var(--linie);
  border-radius: 14px;
  overflow: hidden;
}

.regel {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(14px, 2.4vw, 20px);
  align-items: start;
  padding: clamp(17px, 2.8vh, 24px) clamp(18px, 3vw, 26px);
  background: #000;
}

.regel-haken {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: rgba(234, 67, 53, 0.14);
  color: var(--cinnabar);
  flex-shrink: 0;
}

.regel-haken svg { width: 14px; height: 14px; display: block; }

.regel b {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(15px, 1.7vw, 17px);
  letter-spacing: -0.02em;
  margin-bottom: 5px;
}

.regel span {
  display: block;
  font-size: clamp(14px, 1.5vw, 15px);
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: -0.012em;
  color: #a9a7a8;
}

/* ---------- Abbinder ---------- */

.abbinder {
  margin-top: clamp(46px, 8vh, 84px);
  padding: clamp(26px, 5vh, 40px);
  border: 1px solid var(--linie);
  border-radius: 18px;
}

.abbinder h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 2.8vw, 29px);
  line-height: 1.06;
  letter-spacing: -0.03em;
  max-width: 20ch;
}

.abbinder p {
  margin-top: 12px;
  max-width: 54ch;
  font-size: clamp(15px, 1.6vw, 16px);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: -0.012em;
  color: #a9a7a8;
}

.knopf-reihe {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: clamp(20px, 3.4vh, 28px);
}

.knopf {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 46px;
  padding: 0 24px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.015em;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.knopf-voll {
  background: #fff;
  color: #0a0b0b;
}

.knopf-voll:hover { background: #e4e4e4; }

.knopf-leer {
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
  background: transparent;
}

.knopf-leer:hover { border-color: #fff; background: rgba(255, 255, 255, 0.06); }

/* ---------- Fuß ---------- */

.seiten-fuss {
  border-top: 1px solid var(--linie);
  padding: clamp(26px, 4vh, 38px) clamp(20px, 5vw, 32px) clamp(70px, 9vh, 96px);
}

.fuss-innen {
  max-width: 780px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.fuss-links {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(14px, 2.4vw, 24px);
}

.fuss-links a {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.012em;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s ease;
}

.fuss-links a:hover { color: #fff; }

.fuss-notiz {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #6a6a6a;
}

/* ---------- Mobil ---------- */

@media (max-width: 720px) {
  .nav-pill,
  .sign-in { display: none; }

  .burger {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-right: 3px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    cursor: pointer;
  }

  .burger-bar {
    grid-area: 1 / 1;
    width: 17px;
    height: 2px;
    border-radius: 2px;
    background: #0a0b0b;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.2s ease;
  }

  .burger-bar:nth-child(1) { transform: translateY(-5px); }
  .burger-bar:nth-child(3) { transform: translateY(5px); }

  .burger[aria-expanded="true"] .burger-bar:nth-child(1) { transform: rotate(45deg); }
  .burger[aria-expanded="true"] .burger-bar:nth-child(2) { opacity: 0; }
  .burger[aria-expanded="true"] .burger-bar:nth-child(3) { transform: rotate(-45deg); }

  .menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 45;
    background: rgba(0, 0, 0, 0.6);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }

  .mobile-menu {
    position: fixed;
    z-index: 46;
    left: 50%;
    transform: translateX(-50%);
    top: 84px;
    width: calc(100vw - 28px);
    max-width: 420px;
    padding: 10px;
    border-radius: 22px;
    background: #fff;
    box-shadow: var(--nav-shadow);
  }

  .mobile-nav { display: grid; gap: 2px; }

  .mobile-link {
    display: flex;
    align-items: center;
    height: 48px;
    padding: 0 16px;
    border-radius: 14px;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: -0.02em;
    color: var(--nav-text);
    text-decoration: none;
  }

  .mobile-link.active { font-weight: 700; color: #0a0b0b; }
  .mobile-link:hover { background: #f2f2f2; }

  .mobile-signin {
    margin-top: 6px;
    justify-content: center;
    background: var(--pill-dark);
    color: #fff;
    font-weight: 700;
  }

  .mobile-signin:hover { background: #323234; }

  .abbinder { padding: 22px; }
  .knopf { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------- Trefferflächen auf Touch ---------- */

/*
   Auf einem Gerät ohne Maus zielt ein Finger, kein Zeiger. Apple rechnet mit
   44 Punkten Kantenlänge; darunter trifft man daneben. Betroffen ist vor allem
   das iPad: Dort ist die volle Navigation sichtbar, nicht das Burger-Menü.

   `pointer: coarse` trennt das sauber — am Schreibtisch mit Maus bleibt alles,
   wie es ist.
*/
@media (pointer: coarse) {
  .nav-link, .sign-in { height: 44px; }
  .logo-lockup { min-height: 44px; }

  /* Die Fußzeilen-Links stehen weit genug auseinander, dass die vergrößerte
     Fläche nicht in den Nachbarn ragt. */
  .fuss-links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .fuss-links { gap: clamp(16px, 3vw, 26px); }

  .burger { width: 44px; height: 44px; }

  /* Der Titel einer Karte ist das Ziel, nicht nur Schmuck — etwa die
     Verweise auf die alten Entwürfe unter /versionen. */
  .karte b a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}