/* Tonart / Tonwert - brutalismus.
   Papier, Tinte, Pink. Keine Radien, keine Verlaeufe, keine Weichzeichner.
   Schatten sind versetzt und hart, Rahmen sind sichtbar, Raster ist Raster. */

:root {
  /* Basis-Token aus dem Framework (ds.css). Frueher kamen sie aus base.css;
     seit base.css entfallen ist, werden sie hier gemappt - inklusive Darkmode. */
  --paper:     var(--ug-paper);
  --ink:       var(--ug-ink);
  --muted:     var(--ug-muted);
  --pink:      var(--ug-accent);
  --pink-hot:  var(--ug-accent-hot);
  --pink-wash: var(--ug-accent-wash);
  --shadow:    var(--ug-shadow);
  --paper-2:    color-mix(in srgb, var(--paper) 88%, var(--ink));
  --ink-soft:   var(--muted);
  --pink-deep:  var(--pink-hot);
  --pink-pale:  var(--pink-wash);

  /* Eigene Namen, weil --rule in base.css eine FARBE ist, kein Rahmen. */
  --stroke: 3px solid var(--ink);
  --stroke-thin: 2px solid var(--ink);

  --gutter: var(--ug-gutter);
  --max: var(--ug-max);

  --step--1: clamp(0.72rem, 0.70rem + 0.12vw, 0.78rem);
  --step-0:  clamp(0.88rem, 0.85rem + 0.18vw, 0.95rem);
  --step-1:  clamp(1.05rem, 0.98rem + 0.35vw, 1.18rem);
  --step-2:  clamp(1.35rem, 1.15rem + 0.85vw, 1.75rem);
  --step-3:  clamp(1.90rem, 1.40rem + 2.20vw, 3.10rem);
  /* rund 20 % kleiner als vorher (war 2.6/1.55+4.6vw/5.6) - der Hero soll
     ruhiger wirken und mehr Text über der Falz lassen. */
  --step-4:  clamp(2.20rem, 1.30rem + 3.70vw, 4.50rem);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--ug-sans);
  /* 14 px wie apps.* und das DS */
  font-size: var(--ug-fs-base);
  /* 1.5 wie apps.* */
  line-height: 1.5;
  overflow-x: hidden;
  /* Bezugsrahmen fuer cqw: damit rechnen Laufbaender gegen die Inhaltsbreite
     ohne Scrollbar, nicht gegen den Viewport. */
  container-type: inline-size;
}

h1, h2, h3 {
  font-family: var(--ug-display);
  font-weight: 400;
  /* Archivo Black: 0.688 em Versal + 0.197 em Unterlaenge = 0.885 em
     Tuschehoehe. 1.0 laesst also Luft. */
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 0;
  text-wrap: balance;
}

/* Ankerziele nicht unter der klebenden Kopfleiste begraben. */
section[id], main[id] { scroll-margin-top: 84px; }

::selection {
  background: var(--pink);
  color: var(--ink);
}

p { margin: 0; }
a { color: inherit; }

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

/* Auf pinken Flaechen waere ein pinker Ring unsichtbar. */
.ug-btn:focus-visible,
.download__grid > div:first-child :focus-visible {
  outline-color: var(--ink);
}

/* Alte Zierrat-Elemente ausschalten - Brutalismus kennt keine Glut. */
.grid-bg, .glow { display: none; }

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

/* ---------- Kopfleiste ---------- */

/* Wie .top bei apps.*: helle Leiste mit 3-px-Kante, nicht invertiert. */

/* Wie bei apps.*: die Leiste traegt ihren Inhalt bis zum Rand (nur Gutter),
   nicht in einem zentrierten 78-rem-Kasten. Hoehe 68 px wie dort. */

/* Entspricht .mark bei apps.*: 16 px, 3-px-Tintenkante, Pink als Flaeche. */

/* ---------- Hero ---------- */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: clamp(1.6rem, 4vw, 3.6rem);
  align-items: end;
  padding-block: clamp(2.4rem, 6vw, 4.6rem) clamp(2rem, 5vw, 3.6rem);
}

/* Archivo Black hat eine Innenhoehe von 1.09 em (0.88 ueber, 0.21 unter der
   Grundlinie). Eine Vollflaeche waere darum hoeher als die Zeile und wuerde in
   die Nachbarzeile malen. Der Verlauf zeichnet nur ein Band von 0.72 em, das
   knapp unter der Grundlinie beginnt und ueber den Versalien endet. */
/* Nur hier zusaetzliche Luft: die Markierung endet 0.86 em ueber der
   Grundlinie, die Unterlaengen der Vorzeile reichen bis 0.17 em darunter.
   Bei 1.04 blieb 1 px Abstand - das wirkt wie Ueberlappung. */

.hero__actions {
  margin-top: 1.9rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.3rem;
}

.hero__note {
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
}

/* ---------- Knoepfe ---------- */

/* App-Button (.btn bei apps.*): Mono 10 px / 700 / Sperrung 0.1em, 3-px-Kante,
   4-px-Schatten, Hover hebt an, Aktiv drueckt hinein. Hoehe 44 px statt 40 -
   darunter faellt die Trefferflaeche unter die 44-px-Grenze. */

/* ---------- Motiv ---------- */

.motif {
  position: relative;
  justify-self: end;
  width: min(100%, 380px);
  aspect-ratio: 1;
  border: var(--stroke);
  background: var(--paper-2);
  box-shadow: var(--shadow);
  padding: 1.1rem;
  display: grid;
  place-items: center;
}

.motif svg { width: 100%; height: 100%; overflow: visible; }

/* Aufkleber auf dem Rahmen - die Fassungsnummer, schief geklebt. */
.motif::after {
  content: attr(data-version);
  position: absolute;
  top: -13px;
  right: -13px;
  background: var(--pink);
  border: var(--stroke);
  padding: 0.16rem 0.52rem;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  transform: rotate(4deg);
  box-shadow: 4px 4px 0 var(--ink);
}

/* ---------- Laufband ---------- */

/* base.css engt main auf 1200 px ein. Das Laufband soll trotzdem von Rand zu
   Rand laufen - die negativen Raender heben die Einengung fuer dieses Element auf,
   ohne 100vw zu benutzen (das wuerde die Scrollbar-Breite mitzaehlen). */

/* Sonst stehen hier zwei 3-px-Linien uebereinander und wirken wie ein Balken. */

.ug-stats--band + .wrap .section__head { border-top: 0; }

@media (prefers-reduced-motion: no-preference) {
  /* 22 s wie .ticker-track bei apps.* */

  .motif__spin { animation: spin 16s linear infinite; }
  .motif__tag { animation: tag 0.9s steps(3) 0.6s both; }
}

@keyframes spin { to { transform: rotate(360deg); } }

@keyframes tag {
  from { opacity: 0; transform: translate(-18%, 10%) rotate(-14deg); }
  to   { opacity: 1; transform: translate(0, 0) rotate(0deg); }
}

/* ---------- Kennzahlen ---------- */

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

.section { padding-block: clamp(2.6rem, 6vw, 5rem); }

.section__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.6rem);
  align-items: start;
  margin-bottom: clamp(1.6rem, 3.4vw, 2.6rem);
  border-top: var(--stroke);
  padding-top: 1rem;
}

.section__head h2 { font-size: var(--step-3); max-width: 20ch; }

.section__head p {
  color: var(--ink-soft);
  max-width: 52ch;
  padding-bottom: 0.2rem;
}

/* ---------- Liste statt Kacheln ---------- */

/* Bento: die Fugen sind die Linien. Der Rahmen liegt aussen, die 3-px-Fugen
   zwischen den Zellen zeigen die Tinte des Containers. */
.bento {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3px;
  background: var(--ink);
  border: var(--stroke);
}

.cell {
  display: grid;
  grid-template-columns: 4.2rem minmax(0, 1fr);
  gap: clamp(0.8rem, 2.4vw, 2rem);
  padding: clamp(1.1rem, 2.6vw, 1.7rem);
  align-items: start;
  background: var(--paper);
}

/* Ohne diese Zuordnung landet der Absatz per Auto-Platzierung in der 4-rem-Spalte
   der Nummer - gemessen 67 px breit statt 894. */
.cell__num { grid-column: 1; grid-row: 1 / span 2; }
.cell h3,
.cell p { grid-column: 2; }

@media (min-width: 60rem) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cell--wide { grid-column: 1 / -1; }
  /* Drei Halbe: das letzte bekommt die volle Breite, sonst bleibt eine Luecke. */
  .cell--half:last-child { grid-column: 1 / -1; }
}

.cell__num {
  font-family: var(--ug-display);
  font-size: var(--step-2);
  line-height: 0.85;
  color: var(--pink);
}

.cell h3 {
  font-size: var(--step-1);
  letter-spacing: 0.01em;
  margin-bottom: 0.4rem;
}

.cell p { color: var(--ink-soft); max-width: 60ch; }

.cell:hover { background: var(--pink-pale); }

.cell--feature:hover { background: var(--ink); }

.cell--feature {
  background: var(--ink);
  color: var(--paper);
}

.cell--feature p { color: var(--paper-2); }
.cell--feature .cell__num { color: var(--pink); }
.cell--feature h3 { color: var(--paper); }

/* ---------- Download ---------- */

.download {
  border: var(--stroke);
  box-shadow: var(--shadow);
  background: var(--paper);
}

.download__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
}

.download__grid > div:first-child {
  padding: clamp(1.4rem, 3.4vw, 2.6rem);
  background: var(--pink);
  /* Auf Pink immer die Kontrastfarbe - Tinte und Grau sind dort je nach
     Theme unlesbar. */
  color: var(--ug-on-accent);
  border-right: var(--stroke);
}

.download h2 { font-size: var(--step-2); margin-bottom: 0.7rem; }

.download__sub { max-width: 38ch; }

.meta {
  margin: 0;
  padding: 0;
  font-size: var(--step--1);
  display: grid;
  grid-template-rows: repeat(5, auto);
  align-content: start;
}

.meta > div {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.62rem clamp(1rem, 2.2vw, 1.4rem);
  border-bottom: var(--stroke-thin);
}

.meta > div:last-child { border-bottom: 0; }

.meta dt {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
  white-space: nowrap;
}

.meta dd {
  margin: 0;
  text-align: right;
  overflow-wrap: anywhere;
  font-size: 0.74rem;
}

.copy {
  margin-top: 0.3rem;
  background: var(--paper);
  border: var(--stroke-thin);
  color: var(--ink);
  font: inherit;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.2rem 0.5rem;
  min-height: 28px;
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--ink);
}

.copy:active { transform: translate(3px, 3px); box-shadow: none; }

/* ---------- Schritte ---------- */

.steps {
  counter-reset: step;
  list-style: none;
  margin: 0;
  padding: 0;
  border: var(--stroke);
}

.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  gap: clamp(0.8rem, 2.4vw, 2rem);
  padding: clamp(1rem, 2.4vw, 1.5rem);
  border-top: var(--stroke);
  align-items: baseline;
}

.steps li:first-child { border-top: 0; }

.steps li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--ug-display);
  font-size: var(--step-2);
  line-height: 0.9;
  color: var(--pink);
}

.steps strong { text-transform: uppercase; letter-spacing: 0.06em; }
.steps p { color: var(--ink-soft); font-size: var(--step--1); margin-top: 0.25rem; }

/* ---------- Datenschutz-Kasten ---------- */

.privacy {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
  gap: clamp(1rem, 3vw, 2.6rem);
  padding: clamp(1.3rem, 3.2vw, 2.2rem);
  border: var(--stroke);
  background: var(--paper-2);
}

.privacy h2 { font-size: var(--step-1); }
.privacy p { color: var(--ink-soft); font-size: var(--step-0); }
.privacy p + p { margin-top: 0.8rem; }
.privacy strong { color: var(--ink); background: var(--pink-pale); padding: 0 0.2em; }

/* ---------- Lesetext ---------- */

.prose { max-width: 70ch; padding-block: clamp(2rem, 5vw, 3.6rem) clamp(2.4rem, 6vw, 4rem); }

.prose h1 {
  font-size: var(--step-3);
  margin-bottom: 0.7rem;
  padding-bottom: 0.6rem;
  border-bottom: var(--stroke);
}

.prose .lead {
  font-size: var(--step-1);
  color: var(--ink-soft);
  max-width: 56ch;
  margin-bottom: clamp(1.6rem, 3vw, 2.4rem);
}

/* Lesetext-Ueberschriften in Space Mono: Archivo Black ist in 14 px zu schwer. */
.prose h2 {
  font-family: var(--ug-mono);
  font-weight: 700;
  font-size: var(--step-0);
  line-height: 1.4;
  margin-top: clamp(1.8rem, 3.4vw, 2.4rem);
  margin-bottom: 0.45rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding-bottom: 0.3rem;
  border-bottom: var(--stroke-thin);
}

.prose h3 {
  font-family: var(--ug-mono);
  font-weight: 700;
  font-size: var(--step--1);
  line-height: 1.5;
  margin-top: 1.2rem;
  margin-bottom: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.prose p, .prose li { color: var(--ink-soft); }

.prose p + p { margin-top: 0.7rem; }

.prose ul { margin: 0.6rem 0 0; padding-left: 1.2rem; }
.prose li + li { margin-top: 0.35rem; }

.prose code {
  background: var(--pink-pale);
  border: 2px solid var(--ink);
  padding: 0.03em 0.3em;
  font-size: 0.86em;
}

.prose strong { color: var(--ink); }

.prose .mark {
  background: var(--pink);
  border: 2px solid var(--ink);
  padding: 0.02em 0.32em;
  color: var(--ink);
  font-size: 0.9em;
  white-space: nowrap;
}

.prose .stand {
  margin-top: clamp(1.8rem, 3.4vw, 2.6rem);
  padding-top: 0.8rem;
  border-top: var(--stroke);
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
}

/* ---------- Fuss ---------- */

/* Leiste full width, Inhalt auf derselben Flucht wie die Seite. */

.ug-foot a { text-decoration: none; border-bottom: 3px solid var(--pink); }
.ug-foot a:hover { color: var(--pink); }

.foot__links { display: flex; flex-wrap: wrap; gap: 1.2rem; }

/* ---------- Schmale Ansichten ---------- */

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; align-items: start; }
  .hero .motif { justify-self: start; width: min(100%, 300px); order: -1; }
  .section__head { grid-template-columns: 1fr; }
  .download__grid { grid-template-columns: 1fr; }
  .download__grid > div:first-child { border-right: 0; border-bottom: var(--stroke); }
  .privacy { grid-template-columns: 1fr; }

  .cell { grid-template-columns: 3rem minmax(0, 1fr); }
}

@media (max-width: 560px) {
  .ug-nav a:not([href="#download"]) { display: none; }
  .steps li { grid-template-columns: 3rem minmax(0, 1fr); }

}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---------- Bewegung (Muster von apps.*) ---------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.4s steps(4, end), transform 0.4s steps(4, end);
}
.js [data-reveal].in { opacity: 1; transform: none; }

/* Fortschrittsbalken am oberen Rand. */
.progress {
  position: fixed; top: 0; left: 0;
  height: 4px; width: 0;
  background: var(--pink);
  z-index: 95; pointer-events: none;
}

/* Laufband immer randlos, egal in welchem Kasten es steht. */

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .motif__spin { animation: none !important; }
  .progress { display: none; }
}

/* Hero-Zeilen fahren gestaffelt hoch (line-rise wie apps.*). */
.hero .ug-display .line { display: block; }
.hero .ug-display .line-inner { display: block; animation: line-fade 0.45s ease-out both; }
.hero .ug-display .line:nth-child(1) .line-inner { animation-delay: 0.05s; }
.hero .ug-display .line:nth-child(2) .line-inner { animation-delay: 0.16s; }
@keyframes line-rise { to { transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  .hero .ug-display .line-inner { display: block; animation: line-fade 0.45s ease-out both; }
}

/* ---------- Motive ---------- */
.motif__svg { display: block; }
.motif__spin { transform-origin: 200px 200px; }
.motif__tag { transform-origin: 300px 300px; }
.motif__num {
  font-family: var(--ug-mono); font-size: 46px; font-weight: 600;
  letter-spacing: -2px; fill: var(--ink);
}
.motif__label {
  font-family: var(--ug-mono); font-size: 13px;
  letter-spacing: 2px; fill: var(--ink-soft);
}
.motif__tag-text {
  font-family: var(--ug-mono); font-size: 14px; font-weight: 700;
  letter-spacing: 1.2px; fill: var(--ink);
}
.motif__tag-sub {
  font-family: var(--ug-mono); font-size: 10px;
  letter-spacing: 1.6px; fill: var(--ink-soft);
}

@keyframes line-fade { from { opacity: 0; } to { opacity: 1; } }

/* Note und Button im pinken Download-Feld: Kontrast statt Zurueckhaltung. */
.download__grid > div:first-child .hero__note {
  color: var(--ug-on-accent);
  font-weight: 700;
}
.download__grid > div:first-child .ug-btn--solid {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--ug-on-accent);
  box-shadow: 4px 4px 0 var(--ug-on-accent);
}