/* AdenFace · die Seiten Kaufen, Hilfe und 404. Alles Gemeinsame steht in basis.css.
   Keine Regel hier setzt eine eigene Inhaltsbreite: jede Sektion trägt genau ein .inhalt. */

/* ------------------------------------------------------------------ Seitenkopf
   Überschrift und Unterzeile oben auf jeder Unterseite. Der Schein oben links nimmt
   den Held der Startseite auf, ohne ein Bild zu laden: das erste Element ist Text. */
.seitenkopf {
  position: relative; overflow: clip;
  padding-block: clamp(3rem, 1.75rem + 5vw, 6.5rem) clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
  background: radial-gradient(70% 90% at 12% 0%, rgb(92 200 255 / 0.09), transparent 70%);
}
.seitenkopf__unterzeile { margin-top: 1.25rem; max-width: 38rem; }

/* Fließtext in Abschnitten: Verweise im Satz, Code im Satz, Absätze untereinander */
.text { max-width: 44rem; color: var(--text-2); }
.text > * + * { margin-top: 1rem; }
.text strong { color: var(--text); font-weight: 600; }
.im-text {
  color: var(--akzent); text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 0.2em; text-decoration-color: rgb(92 200 255 / 0.45);
}
.im-text:hover { color: var(--akzent-hell); text-decoration-color: currentColor; }

code {
  font-family: var(--schrift-mono); font-size: 0.9em;
  padding: 0.1em 0.35em; border-radius: 4px;
  background: var(--grund-3); color: var(--text); overflow-wrap: anywhere;
}

/* Hinweis mit Akzentstrich links, wie der Schlusssatz eines Abschnitts auf der Startseite */
.hinweis {
  max-width: 44rem; padding-left: 1.25rem; border-left: 2px solid var(--akzent);
  color: var(--text-2);
}
.hinweis strong { color: var(--text); font-weight: 600; }

/* ------------------------------------------------------------------ Kaufen: Preis */
.kauf__raster { display: grid; gap: 2.5rem; }
@media (min-width: 56rem) {
  .kauf__raster { grid-template-columns: minmax(0, 1fr) minmax(0, 27rem); gap: 4rem; align-items: end; }
}

.preis {
  padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  border: 1px solid var(--rand); border-radius: calc(var(--radius-gross) + 4px);
  background: radial-gradient(90% 80% at 100% 0%, rgb(92 200 255 / 0.1), transparent 60%), var(--grund-2);
}
.preis__betrag {
  font-size: clamp(2rem, 1.6rem + 1.8vw, 2.75rem); font-weight: 600;
  line-height: 1.1; letter-spacing: -0.03em;
}
.preis__zusatz { margin-top: 0.375rem; }
.preis__pruefen {
  display: flex; gap: 0.875rem; margin-top: 1.75rem; padding-top: 1.5rem;
  border-top: 1px solid var(--rand); color: var(--text-2); font-size: 0.9375rem; line-height: 1.55;
}
/* Das Häkchen ist gezeichnet, nicht geschrieben: kein Zeichen, das ein Vorleser ansagt */
.preis__pruefen::before {
  content: ""; flex: none; width: 0.75rem; height: 0.4375rem; margin-top: 0.4em;
  border-left: 2px solid var(--akzent); border-bottom: 2px solid var(--akzent);
  transform: rotate(-45deg);
}
.preis__knopfreihe { margin-top: 1.5rem; align-items: center; }
.preis__knopf { flex: 1 1 100%; }
/* Solange kein Shop steht, führt der Knopf nirgendwohin: kein href, nicht fokussierbar,
   Vorleser sagen "nicht verfügbar". Daneben steht der Platzhalter sichtbar. */
.knopf[aria-disabled="true"] { cursor: not-allowed; }
.knopf[aria-disabled="true"]:active { transform: none; }
.preis__klein { margin-top: 1.25rem; }
@media (min-width: 30rem) {
  .preis__knopf { flex: 0 0 auto; min-width: 12rem; }
}

/* ------------------------------------------------------------------ Kaufen: Lieferumfang */
.bildschirm-klein { margin-bottom: clamp(2.5rem, 1.75rem + 3vw, 4rem); }
.bildschirm-klein img {
  width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius); border: 1px solid var(--rand);
  box-shadow: 0 40px 100px -40px rgb(0 0 0 / 0.9); background: #08101c;
}

.umfang { list-style: none; padding: 0; display: grid; gap: 0 2.5rem; }
.umfang li {
  display: flex; gap: 1rem; padding-block: 1.125rem;
  border-bottom: 1px solid var(--rand); color: var(--text-2); line-height: 1.5;
}
.umfang li::before {
  content: ""; flex: none; width: 0.5rem; height: 0.5rem; margin-top: 0.5em;
  background: var(--akzent); box-shadow: 0 0 10px var(--akzent-glanz);
}
.umfang strong { color: var(--text); font-weight: 600; }
@media (min-width: 48rem) { .umfang { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.umfang__ohne { margin-top: clamp(2.25rem, 1.5rem + 2vw, 3.25rem); }
.umfang__ohne p + p { margin-top: 1rem; color: var(--text); }

/* ------------------------------------------------------------------ Schritte
   Drei Schritte an einer Leitung, wie "So funktioniert es" auf der Startseite. */
.schrittfolge { list-style: none; padding: 0; position: relative; display: grid; gap: 2.25rem; }
.schrittfolge::before {
  content: ""; position: absolute; left: 0.46875rem; top: 0.5rem; bottom: 0.5rem; width: 1px;
  background: linear-gradient(180deg, var(--akzent), rgb(92 200 255 / 0.15));
}
.schrittfolge > li { position: relative; padding-left: 2.5rem; }
.schrittfolge > li::before {
  content: ""; position: absolute; left: 0; top: 0.25rem; width: 0.9375rem; height: 0.9375rem;
  border: 1px solid var(--akzent); background: var(--grund);
  box-shadow: 0 0 0 4px var(--grund), 0 0 16px var(--akzent-glanz);
}
.schrittfolge p { margin-top: 0.625rem; color: var(--text-2); }
.schrittfolge__nummer { color: var(--akzent); font-variant-numeric: tabular-nums; }
@media (min-width: 56rem) {
  .schrittfolge { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; }
  .schrittfolge::before {
    left: 0; right: 0; top: 0.46875rem; bottom: auto; width: auto; height: 1px;
    background: linear-gradient(90deg, var(--akzent), rgb(92 200 255 / 0.15));
  }
  .schrittfolge > li { padding-left: 0; padding-top: 2.5rem; }
  .schrittfolge > li::before { top: 0; }
}
.abschnitt__verweis { margin-top: clamp(2rem, 1.5rem + 1.5vw, 2.75rem); }

/* ------------------------------------------------------------------ Fragen zum Aufklappen
   <details> klappt ohne Skript. Das Plus ist gezeichnet und wird beim Öffnen ein Minus. */
.fragen { max-width: 48rem; border-top: 1px solid var(--rand); }
.frage { border-bottom: 1px solid var(--rand); }
.frage > summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1.25rem;
  min-height: 3rem; padding-block: 1.125rem; cursor: pointer; list-style: none;
  font-size: 1.0625rem; font-weight: 600; line-height: 1.4; color: var(--text);
  transition: color var(--dauer) var(--kurve);
}
.frage > summary::-webkit-details-marker { display: none; }
.frage > summary:hover { color: var(--akzent-hell); }
.frage > summary::after {
  content: ""; flex: none; width: 0.875rem; height: 0.875rem; margin-top: 0.3em;
  background:
    linear-gradient(var(--akzent), var(--akzent)) center / 100% 2px no-repeat,
    linear-gradient(var(--akzent), var(--akzent)) center / 2px 100% no-repeat;
  transition: background-size var(--dauer) var(--kurve);
}
.frage[open] > summary::after { background-size: 100% 2px, 2px 0; }
.frage__antwort { padding: 0 2.125rem 1.5rem 0; color: var(--text-2); }
.frage__antwort > * + * { margin-top: 0.875rem; }

/* ------------------------------------------------------------------ Hilfe: Raster
   Handy: das Verzeichnis steht oben als Reihe kleiner Knöpfe. Ab 64rem steht es links
   und bleibt beim Lesen stehen, der Text läuft rechts daneben. */
.hilfe { padding-top: 0; }
.hilfe__raster { display: grid; gap: 2.5rem; }
@media (min-width: 64rem) {
  .hilfe__raster { grid-template-columns: 14rem minmax(0, 1fr); gap: 4rem; align-items: start; }
  .verzeichnis { position: sticky; top: calc(var(--kopf-hoehe) + 2rem); }
}

.verzeichnis__liste { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.verzeichnis__liste a {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0.5rem 0.875rem;
  border: 1px solid var(--rand-hell); border-radius: var(--radius);
  color: var(--text-2); font-size: 0.9375rem; line-height: 1.3; text-decoration: none;
  transition: color var(--dauer) var(--kurve), border-color var(--dauer) var(--kurve), background-color var(--dauer) var(--kurve);
}
.verzeichnis__liste a:hover { color: var(--text); border-color: var(--leise); }
.verzeichnis__liste a[aria-current] { color: var(--text); border-color: var(--akzent); background: var(--akzent-hauch); }
@media (min-width: 64rem) {
  .verzeichnis__liste { display: block; border-left: 1px solid var(--rand); }
  .verzeichnis__liste a {
    display: flex; margin-left: -1px; padding: 0.5rem 0 0.5rem 1.125rem;
    border: 0; border-left: 2px solid transparent; border-radius: 0;
  }
  .verzeichnis__liste a[aria-current] { border-left-color: var(--akzent); background: none; }
}

.hilfe__abschnitt { padding-block: clamp(2.75rem, 2rem + 3vw, 4.5rem); border-top: 1px solid var(--rand); }
.hilfe__abschnitt:first-child { padding-top: 0; border-top: 0; }
.hilfe__abschnitt > .titel-2 { margin-bottom: 1.5rem; }
.hilfe__abschnitt > * + .tabelle-rahmen,
.hilfe__abschnitt > * + .text,
.hilfe__abschnitt > * + .hinweis,
.hilfe__abschnitt > * + .fragen,
.hilfe__abschnitt > * + .bildschirm-klein { margin-top: 1.75rem; }
.hilfe__abschnitt .bildschirm-klein { margin-bottom: 0; }
.hilfe__schritt + .hilfe__schritt { margin-top: 2.5rem; }
.hilfe__unter { margin-top: 2.75rem; }
@media (min-width: 64rem) { .hilfe__abschnitt:first-child { padding-top: 0.25rem; } }

/* ------------------------------------------------------------------ Tabellen
   Echte Tabellen, auch auf dem Handy: lange Wörter brechen um, statt die Seite zu
   verbreitern. Die erste Spalte ist die Zeilenüberschrift. */
.tabelle-rahmen { max-width: 48rem; }
.tabelle { width: 100%; border-collapse: collapse; font-size: 0.9375rem; line-height: 1.5; }
.tabelle th, .tabelle td {
  padding: 0.875rem 1rem 0.875rem 0; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--rand); overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto;
}
.tabelle th:last-child, .tabelle td:last-child { padding-right: 0; }
.tabelle thead th {
  padding-top: 0; font-family: var(--schrift-etikett); font-size: 0.75rem; font-weight: 400;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--leise);
  border-bottom-color: var(--rand-hell);
}
.tabelle tbody th { width: 38%; font-weight: 600; color: var(--text); }
.tabelle td { color: var(--text-2); }

/* ------------------------------------------------------------------ Befehle zum Kopieren
   Der Befehl steht in Geist Mono und ist markierbar, auch ohne Skript (ein Klick markiert
   ihn ganz). seiten.js zeigt den Knopf erst, wenn Kopieren wirklich geht. Lange Befehle
   brechen um, kopiert wird trotzdem die eine Zeile. */
.befehl {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem;
  max-width: 44rem; margin-block: 1rem; padding: 0.75rem 0.75rem 0.75rem 1.125rem;
  border: 1px solid var(--rand-hell); border-radius: var(--radius); background: #080b10;
}
.befehl code {
  flex: 1 1 14rem; min-width: 0; padding: 0.25rem 0; background: none;
  font-size: 0.9375rem; line-height: 1.5; color: var(--akzent-hell);
  white-space: pre-wrap; overflow-wrap: anywhere; -webkit-user-select: all; user-select: all;
}
.befehl__knopf {
  flex: none; margin-left: auto; min-width: 6.5rem; min-height: 2.75rem; padding: 0.5rem 0.875rem;
  border: 1px solid var(--rand-hell); border-radius: var(--radius); background: var(--grund-2);
  font-size: 0.875rem; font-weight: 500; cursor: pointer;
  transition: border-color var(--dauer) var(--kurve), background-color var(--dauer) var(--kurve), color var(--dauer) var(--kurve);
}
.befehl__knopf:hover { border-color: var(--leise); background: var(--grund-3); }
.befehl__knopf[data-zustand="kopiert"] { border-color: var(--akzent); color: var(--akzent-hell); }

/* ------------------------------------------------------------------ 404 */
.fehlseite {
  display: flex; align-items: center; overflow: clip;
  min-height: calc(100vh - var(--kopf-hoehe) - 14rem);
  min-height: calc(100svh - var(--kopf-hoehe) - 14rem);
  padding-block: clamp(3.5rem, 2rem + 6vw, 7rem);
  background: radial-gradient(60% 70% at 15% 20%, rgb(92 200 255 / 0.09), transparent 70%);
}
.fehlseite__text { max-width: 40rem; }
.fehlseite .einleitung { margin-top: 1.25rem; }
.fehlseite__wege { margin-top: 2rem; align-items: center; gap: 0.75rem 2rem; }
.fehlseite__verweise { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 2rem; }
.fehlseite__verweise a { display: inline-flex; align-items: center; min-height: 2.75rem; }

/* ------------------------------------------------------------------ Nachträge
   Überschriften in einem Textblock tragen die helle Schriftfarbe, nicht die des Fließtexts. */
.text .titel-3 { color: var(--text); }
/* Dateinamen im Satz brechen ab 40rem nicht am Bindestrich (start-/adenface.bat). Schmaler
   darf es umbrechen, sonst würde die Seite breiter als das Handy. */
@media (min-width: 40rem) { code { white-space: nowrap; } }
/* Auf der Kaufseite folgen Abschnitte ohne Hintergrund aufeinander: ein Abstand zwischen
   ihnen reicht, sonst stehen doppelt so große Lücken wie auf der Startseite. */
.seite-dicht .abschnitt + .abschnitt { padding-top: 0; }