/* =============================================================
   layout.css — Header, Section-Shell, Footer, Raster
   ============================================================= */

/* ---------- Seiten-Shell ---------- */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.shell--wide { max-width: 88rem; }

/* =============================================================
   Header — Ink-Flaeche, damit das helle Logo als Chip hervortritt
   ============================================================= */

.header {
  position: sticky;
  top: 0;
  z-index: 80;
  background: var(--ink);
  color: var(--fg-invert);
  border-bottom: var(--bw) solid var(--rule-strong);
}

.header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 4.5rem;
}

/* ---------- Logo ---------- */

.brand {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  flex-shrink: 0;
}

.brand__logo {
  display: block;
  width: auto;
  height: 2.75rem;
  /* Bewusst KEIN image-rendering: pixelated. Die Quelle ist eine
     geglaettete Hochskalierung, kein echtes Pixelraster — Nearest-Neighbor
     bei 36-facher Verkleinerung wuerde die Glyphen zerflecken. Stattdessen
     liefert assets/logo-display.png eine sauber vorgeskalierte Datei. */
  border: var(--bw) solid var(--rule-strong);
}

/* Neben dem Logo steht erst ab Desktop-Breite ein Textzeichen —
   auf Mobil ist das Logo allein aussagekräftig genug. */
.brand__text { display: none; }

@media (min-width: 62rem) {
  .brand__text { display: block; }
}

.brand__name {
  font-size: var(--fs-small);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.4;
}

.brand__name span {
  display: block;
  color: var(--fg-invert-mu);
  font-size: var(--fs-tiny);
  letter-spacing: var(--tracking-wide);
}

/* ---------- Navigation ---------- */

.nav { display: none; }

.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.5vw, 2.25rem);
}

.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-invert-mu);
  transition: color var(--t-fast) var(--ease);
}

.nav__link::before {
  content: ">";
  position: absolute;
  left: -0.9em;
  color: var(--accent);
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease);
}

.nav__link:hover,
.nav__link:focus-visible { color: var(--fg-invert); }

.nav__link:hover::before,
.nav__link:focus-visible::before { opacity: 1; }

.nav__link[aria-current="page"] { color: var(--fg-invert); }
.nav__link[aria-current="page"]::before { opacity: 1; }

/* ---------- Burger (nur mobil) ---------- */

.burger {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  min-height: var(--tap);
  padding-inline: 0.25rem;
  font-size: var(--fs-tiny);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-invert-mu);
}

.burger__bars {
  display: grid;
  gap: 4px;
  width: 20px;
}

.burger__bars span {
  display: block;
  height: var(--bw);
  background: currentColor;
  transition: transform var(--t-base) var(--ease), opacity var(--t-fast) var(--ease);
}

.burger[aria-expanded="true"] { color: var(--accent); }

.burger[aria-expanded="true"] .burger__bars span:nth-child(1) {
  transform: translateY(5px) rotate(45deg);
}

.burger[aria-expanded="true"] .burger__bars span:nth-child(2) { opacity: 0; }

.burger[aria-expanded="true"] .burger__bars span:nth-child(3) {
  transform: translateY(-5px) rotate(-45deg);
}

/* ---------- Mobiler Nav-Drawer ---------- */

@media (max-width: 52rem) {
  .nav {
    position: absolute;
    inset-inline: 0;
    top: 100%;
    background: var(--ink);
    /* Der Drawer liegt ueber dem ebenfalls inkfarbenen Hero — eine Linie in
       --rule-strong waere dort unsichtbar, daher ein hellerer Ton. */
    border-bottom: var(--bw) solid rgb(244 242 237 / 0.22);
    /* Ohne JavaScript bleibt der Drawer geschlossen — Inhalt nie versteckt */
    display: none;
  }

  .nav[data-open="true"] { display: block; }

  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem var(--gutter) 1.5rem;
  }

  .nav__link {
    padding-block: 0.9rem;
    border-top: var(--bw) solid rgb(244 242 237 / 0.12);
  }

  .nav__link::before { left: auto; right: 100%; margin-right: 0.5rem; }
}

@media (min-width: 52.0625rem) {
  .burger { display: none; }
  .nav { display: block; }
}

/* =============================================================
   Sections
   ============================================================= */

.section { padding-block: var(--stack); }

.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }

.section--ink {
  background: var(--ink);
  color: var(--fg-invert);
}

.section--sunk { background: var(--paper-sunk); }

.section--ruled { border-top: var(--bw) solid var(--rule); }

/* ---------- Section-Kopf ---------- */

.section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding-bottom: 1.5rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
  border-bottom: var(--bw) solid var(--rule);
}

.section--ink .section__head { border-bottom-color: var(--rule-strong); }

/* Kopf des Hero sitzt auf Ink — eigene Linienfarbe noetig */
.hero .section__head { border-bottom-color: rgb(244 242 237 / 0.14); }

.section__index {
  font-size: var(--fs-tiny);
  letter-spacing: var(--tracking-wide);
  color: var(--accent-deep);
  white-space: nowrap;
}

.section--ink .section__index { color: var(--accent); }

.section__note {
  font-size: var(--fs-small);
  color: var(--fg-muted);
  max-width: 44ch;
}

.section--ink .section__note { color: var(--fg-invert-mu); }

/* =============================================================
   Hero
   ============================================================= */

.hero {
  position: relative;
  background: var(--ink);
  color: var(--fg-invert);
  border-bottom: var(--bw) solid var(--rule-strong);
  padding-block: clamp(3rem, 8vw, 6.5rem);
  overflow: hidden;
}

/* Raster-Hintergrund — feines technisches Raster */
.hero__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgb(244 242 237 / 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgb(244 242 237 / 0.045) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}

.hero__inner { position: relative; }

.hero__title {
  margin-block: 1.5rem 1.75rem;
  max-width: 18ch;
}

.hero__title em {
  font-style: normal;
  color: var(--accent);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  margin-top: 2rem;
}

/* Terminal im Hero: Abstand zum Aktionsbereich */
.hero__term { margin-top: clamp(2.5rem, 6vw, 4rem); }

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.25rem;
  border-top: var(--bw) solid rgb(244 242 237 / 0.14);
  font-size: var(--fs-tiny);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-invert-mu);
}

.hero__meta b {
  font-weight: 400;
  color: var(--accent);
}

/* =============================================================
   Raster
   ============================================================= */

.grid {
  display: grid;
  gap: var(--bw);              /* Lücken zeigen den Hintergrund als Linie */
  background: var(--rule);
  border: var(--bw) solid var(--rule);
}

.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }

@media (min-width: 40rem) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 62rem) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
}

/* =============================================================
   Split — Text neben Liste
   ============================================================= */

.split {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
}

@media (min-width: 56rem) {
  .split {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
  }

  .split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =============================================================
   Footer
   ============================================================= */

.footer {
  background: var(--ink-deep);
  color: var(--fg-invert);
  border-top: var(--bw) solid var(--rule-strong);
  padding-block: clamp(2.5rem, 5vw, 4rem) 1.5rem;
}

.footer__grid {
  display: grid;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: var(--bw) solid rgb(244 242 237 / 0.12);
}

@media (min-width: 48rem) {
  .footer__grid { grid-template-columns: repeat(2, 1fr); }
}

.footer__title {
  font-size: var(--fs-tiny);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-invert-mu);
  margin-bottom: 0.875rem;
}

.footer__brand-title { margin-top: 1rem; }

/* Links auf volle 44px Tippziel aufziehen (WCAG 2.2), Text bleibt klein. */
.footer__list { display: grid; gap: 0; }

.footer__list a,
.footer__list span {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font-size: var(--fs-small);
  color: var(--fg-invert-mu);
  transition: color var(--t-fast) var(--ease);
}

.footer__list a:hover { color: var(--accent); }

/* Zeile "Impressum · Datenschutz" im Fuss — Links auf 44px bringen. */
.footer__bottom a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  transition: color var(--t-fast) var(--ease);
}

.footer__bottom a:hover { color: var(--accent); }

.footer__bottom {
  display: grid;
  gap: 0.75rem 2.5rem;
  padding-top: 1.5rem;
  font-size: var(--fs-tiny);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-invert-mu);
}

@media (min-width: 48rem) {
  .footer__bottom {
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
  }
}

/* Rechts-Links und Rechtehinweis teilen sich die zweite Spalte:
   "Impressum · Datenschutz" linksbündig unter "Navigation". */
.footer__bottom-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
}