/* Styles der Platzhalterseite. Wird NUR von templates/soon.html.twig geladen
   und fällt mit ihm weg — deshalb steht hier nichts, was die späteren Seiten
   brauchen. Tokens kommen aus custom.css.

   Die Idee der Seite: Zwei Menschen bewerten dieselben Bausteine, und die
   Lücke dazwischen ist die Aussage. Alles Auffällige steckt deshalb im Raster,
   alles andere bleibt ruhig. */

.soon__hero {
  display: grid;
  gap: 3rem;
  align-items: start;
  padding: 2rem 0 0;
}

@media (min-width: 64rem) {
  .soon__hero {
    /* Die Aussage bekommt mehr Spalte als der Beleg: bei 17ch brach die
       deutsche Headline auf fünf Zeilen, das liest sich zerfranst. */
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 4.5rem;
    padding-top: 3.5rem;
  }
}

/* Etwas kleiner als die globale H1-Stufe: bei 56px brach dieser Satz auch in
   der breiteren Spalte auf fünf Zeilen. Drei bis vier Zeilen sind eine
   Aussage, fünf sind eine Wand. */
.soon h1 {
  font-size: clamp(2rem, 1.1rem + 2.8vw, 3.125rem);
  max-width: 22ch;
}

.soon__lead {
  margin: 1.5rem 0 0;
  max-width: 46ch;
  font-size: 1.125rem;
  color: var(--muted);
}

/* Das Raster: ein Baustein je Zeile, zwei Bewertungen auf derselben Spur.
   Keine vier gerahmten Kästchen mehr — eine durchgehende Fläche mit
   Stufenlinien, auf der die Marken liegen. */
.raster {
  padding: 1.5rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: var(--surface);
}

@media (min-width: 48rem) {
  .raster {
    padding: 1.75rem 2rem;
  }
}

.raster__titel {
  margin: 0 0 1.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0;
}

.raster__liste {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.baustein {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.375rem;
  margin: 0;
  padding: 0.75rem 0;
  border-top: 1px solid var(--hairline);
}

.baustein:first-child {
  border-top: 0;
}

/* Ab mittlerer Breite stehen Name und Spur nebeneinander; darunter
   untereinander, damit der Name nicht auf zwei Zeichen schrumpft. */
@media (min-width: 30rem) {
  .baustein {
    grid-template-columns: minmax(0, 20ch) 1fr;
    gap: 1.25rem;
    align-items: center;
  }
}

.baustein__name {
  font-size: 0.9375rem;
  line-height: 1.35;
}

/* Die Zeile mit der Lücke ist die, um die es geht: ihr Name trägt das
   Gewicht, nicht eine Hintergrundfarbe. */
.baustein--luecke .baustein__name {
  font-weight: 600;
}

.baustein__spur {
  position: relative;
  height: 2.25rem;
}

.baustein__stufe {
  position: absolute;
  top: 0.25rem;
  bottom: 0.25rem;
  width: 1px;
  background: var(--border);
}

/* Die Grundlinie, auf der die Marken sitzen. */
.baustein__spur::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  transform: translateY(-50%);
  background: var(--border);
}

.baustein__luecke {
  position: absolute;
  top: 50%;
  height: 0.5rem;
  transform: translateY(-50%);
  background: var(--accent);
  border-radius: 0.25rem;
}

.marke {
  position: absolute;
  top: 50%;
  width: 0.9375rem;
  height: 0.9375rem;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}

.marke--selbst {
  background: var(--foreground);
}

/* Form trägt die Unterscheidung, nicht nur Farbe: gefüllt gegen beringt. */
.marke--fuehrung {
  background: var(--background);
  border: 2.5px solid var(--accent-strong);
}

/* Beide Seiten auf derselben Stufe: gefüllt UND beringt, in Ruhe. */
.marke--einig {
  background: var(--muted);
  border: 2.5px solid var(--background);
  box-shadow: 0 0 0 1px var(--muted);
}

.marke--luecke {
  width: 1.5rem;
  height: 0.5rem;
  border-radius: 0.25rem;
  background: var(--accent);
}

.raster__achse {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: 0.25rem;
}

@media (min-width: 30rem) {
  .raster__achse {
    grid-template-columns: minmax(0, 20ch) 1fr;
    gap: 1.25rem;
  }
}

.raster__stufen {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.75rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.raster__legende {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin: 1.5rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--hairline);
  font-size: 0.8125rem;
  color: var(--muted);
}

.legende__eintrag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* In der Legende stehen die Marken im Textfluss, nicht auf einer Spur. */
.legende__eintrag .marke {
  position: static;
  transform: none;
  flex: none;
}

.raster__text {
  margin: 1rem 0 0;
  max-width: 54ch;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--muted);
}

/* Was Levelvine macht: je Punkt ein Satz über einer Haarlinie. Keine
   Kacheln — die Punkte sind gleichrangig, nicht einzeln anklickbar. */
.leistungen {
  margin: 5rem 0 0;
}

.leistungen__titel {
  margin: 0 0 1.75rem;
  font-size: 1.375rem;
}

.leistungen__liste {
  display: grid;
  gap: 1.5rem 2.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 44rem) {
  .leistungen__liste {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

.leistungen__liste li {
  margin: 0;
  padding-top: 0.875rem;
  border-top: 2px solid var(--accent-soft);
  font-size: 1rem;
  line-height: 1.5;
}

/* Die Grenzen des Produkts: ein Satz, keine Liste. */
.soon__grenzen {
  margin: 2.5rem 0 0;
  max-width: 68ch;
  font-size: 0.9375rem;
  color: var(--muted);
}

.soon__stand {
  margin: 4rem 0 0;
  padding-left: 1.25rem;
  border-left: 3px solid var(--accent);
  max-width: 48ch;
  font-size: 1.0625rem;
}

.soon__text {
  margin-top: 2rem;
  max-width: var(--measure);
}