/* ==========================================================================
   hlsw.app — Praesentationsschicht der Dachseite
   --------------------------------------------------------------------------
   Liegt ueber design/css/hlsw-tokens.css und design/css/hlsw-base.css und
   enthaelt ausschliesslich Layout dieser Seite.

   Eine Regel gilt hier ohne Ausnahme: **nur semantische Tokens.** Kein
   --navy-*, kein --amber-*, kein Hexwert. Nur so traegt dieselbe Datei das
   helle und das dunkle Theme, und nur so wandert eine Farbaenderung aus dem
   Designsystem ohne Nacharbeit hierher.

   Aufbau
     1  Grundgeruest und Sprungmarke
     2  Kopfzeile
     3  Buehne
     4  Abschnitte und Ueberschriften
     5  Die Liste der Apps
     6  Lesetext (Impressum, Datenschutz)
     6b Produktseite (pikta.html)
     7  Fuss
     8  Bewegung
   ========================================================================== */

/* --- 1  Grundgeruest ------------------------------------------------------ */

body {
  background: var(--bg);
  color: var(--text-body);
  /* Der iPhone-Rand: Inhalt darf nicht unter die abgerundeten Ecken. */
  padding-inline: max(var(--gutter), env(safe-area-inset-left));
}

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

/* Die Sprungmarke ist sichtbar, sobald sie den Fokus hat — nicht vorher.
   display:none waere schneller geschrieben und faende kein Screenreader. */
.hp-skip {
  position: absolute;
  left: -9999px;
  top: var(--space-4);
  z-index: 10;
}
.hp-skip:focus-visible {
  left: max(var(--gutter), env(safe-area-inset-left));
}

/* --- 2  Kopfzeile --------------------------------------------------------- */

.hp-kopf {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  min-height: 72px;
  border-bottom: 1px solid var(--border);
}

.hp-marke {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  margin-right: auto;
  color: var(--text);
  text-decoration: none;
  font: var(--type-h4);
  /* 44 px Trefferflaeche, auch wenn die Schrift nur 18 px hoch ist. */
  min-height: 44px;
}
.hp-marke:hover { color: var(--text); }
.hp-marke__zeichen { width: 30px; height: 30px; flex: none; }

/* Unter 480 px traegt die Kopfzeile nur das Kuerzel — der volle Name
   und die Navigation passen dort nicht nebeneinander. */
.hp-marke__kurz { display: none; }
@media (max-width: 479px) {
  .hp-marke__voll { display: none; }
  .hp-marke__kurz { display: inline; }
}

.hp-kopf__nav {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.hp-navlink {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--space-4);
  border-radius: var(--radius-sm);
  color: var(--text-body);
  text-decoration: none;
  font: var(--type-body-sm);
  font-weight: 500;
}
.hp-navlink:hover { color: var(--text); background: var(--bg-inset); }

/* Unter 560 px passen Marke, zwei Verweise und der Umschalter nicht in eine
   Zeile — auf dem iPhone stand der Knopf halb ausserhalb des Bildes. Die
   Kopfzeile bricht deshalb in zwei Zeilen um, statt etwas wegzulassen: Wer
   den Umschalter sucht, soll ihn nicht nur auf dem grossen Bildschirm
   finden. Das negative Aussenmass zieht den ersten Verweis buendig unter
   die Marke — die 12 px Innenabstand des Verweises heben sich damit auf. */
@media (max-width: 559px) {
  .hp-kopf {
    flex-wrap: wrap;
    padding-block: var(--space-4);
    row-gap: var(--space-2);
  }
  .hp-kopf__nav {
    width: 100%;
    margin-inline-start: calc(var(--space-4) * -1);
  }
  .hp-navlink { padding-inline: var(--space-4); }
}

/* --- 3  Buehne ------------------------------------------------------------ */

.hp-buehne {
  padding-block: clamp(var(--space-12), 12vh, var(--space-14)) var(--space-12);
  border-bottom: 1px solid var(--border);
}

.hp-overline {
  font: var(--type-overline);
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
  /* --accent-text, nicht --accent: Amber ist eine Flaechenfarbe und
     erreicht als Text auf Weiss nur 2,15 : 1. */
  color: var(--accent-text);
  margin: 0 0 var(--space-6);
}

.hp-titel {
  font: var(--type-display-lg);
  letter-spacing: var(--tracking-display-lg);
  color: var(--text);
  max-width: 18ch;
  margin: 0;
}
@media (min-width: 900px) {
  .hp-titel { font: var(--type-display-xl); letter-spacing: var(--tracking-display-xl); }
}

.hp-lead {
  font: var(--type-body-lg);
  color: var(--text-body);
  max-width: var(--measure-compact);
  margin: var(--space-7) 0 0;
}

.hp-buehne__aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-9);
}

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

.hp-abschnitt {
  padding-block: clamp(var(--space-11), 9vh, var(--space-13));
  border-bottom: 1px solid var(--border);
}
.hp-abschnitt:last-of-type { border-bottom: 0; }

.hp-abschnitt__kopf { margin-bottom: var(--space-9); }

.hp-abschnitt h2 {
  font: var(--type-h2);
  letter-spacing: var(--tracking-h2);
  margin: var(--space-4) 0 0;
}

.hp-abschnitt__text {
  font: var(--type-body);
  color: var(--text-body);
  max-width: var(--measure);
  margin: var(--space-5) 0 0;
}

/* --- 5  Die Liste der Apps ------------------------------------------------ */

.hp-apps {
  display: grid;
  gap: var(--space-5);
}

/* Eine Zeile ist entweder ein Link (eine App, die es gibt) oder ein
   div (reservierter Platz). Beide sehen gleich aus; nur der Link hebt
   sich beim Zeigen. Farbe allein traegt die Unterscheidung nicht —
   dafuer steht rechts die Marke. */
.hp-app {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-3) var(--space-6);
  align-items: start;
  padding: var(--space-7);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: inherit;
  text-decoration: none;
}

a.hp-app:hover {
  border-color: var(--border-interactive);
  background: var(--bg-subtle);
  color: inherit;
}

.hp-app__name {
  font: var(--type-h3);
  letter-spacing: var(--tracking-h3);
  color: var(--text);
  display: block;
}

.hp-app__adresse {
  font: var(--type-mono);
  color: var(--text-muted);
  display: block;
  margin-top: var(--space-2);
  /* Adressen brechen sonst mitten im Wort um. */
  overflow-wrap: anywhere;
}

.hp-app__text {
  grid-column: 1 / -1;
  font: var(--type-body);
  color: var(--text-body);
  max-width: var(--measure);
  margin: var(--space-3) 0 0;
}

.hp-app--frei { border-style: dashed; background: transparent; }

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

/* Die Lesespalte steht mittig, waehrend Kopf und Fuss die volle Breite
   halten: Das Element traegt .hp-wrap und .hp-lesetext zugleich, behaelt
   also margin-inline:auto und bekommt nur ein engeres Mass. Fuer einen
   Fliesstext ist 58 Zeichen die Obergrenze — auf 1100 px waere er
   unlesbar. */
.hp-lesetext {
  max-width: var(--measure-compact);
  padding-block: var(--space-11) var(--space-13);
}

.hp-lesetext h1 {
  font: var(--type-h1);
  letter-spacing: var(--tracking-h1);
  margin-bottom: var(--space-9);
}

.hp-lesetext h2 {
  font: var(--type-h3);
  letter-spacing: var(--tracking-h3);
  margin-top: var(--space-10);
}

.hp-lesetext p,
.hp-lesetext li {
  font: var(--type-body);
  color: var(--text-body);
}
.hp-lesetext p { margin: var(--space-4) 0 0; }
.hp-lesetext ul { margin: var(--space-4) 0 0; padding-left: var(--space-7); }
.hp-lesetext li { margin-top: var(--space-3); }

.hp-lesetext .hp-stand {
  font: var(--type-caption);
  color: var(--text-muted);
  margin-top: var(--space-11);
}

/* --- 6b  Produktseite ------------------------------------------------------ */

/* Die Buehne einer Produktseite traegt links den Text und rechts die
   Bildmarke der App. Sie ist der einzige Ort, an dem die Farben der App
   selbst auftreten — Amber auf Navy, wie das Icon im Dock; der Akzent der
   Seite bleibt der App-Akzent. Unter 820 px steht das Zeichen ueber dem
   Text: Zwei Spalten waeren dort je 160 px breit. */
.hp-buehne--marke {
  display: grid;
  gap: var(--space-9);
  align-items: center;
}
@media (min-width: 820px) {
  .hp-buehne--marke { grid-template-columns: 1fr auto; gap: var(--space-12); }
}

.hp-buehne__zeichen {
  width: 132px;
  height: 132px;
  /* Das SVG bringt seine Ecken selbst mit — hier nur der Schatten, damit es
     auf der Seite liegt wie im Dock. */
  filter: drop-shadow(0 12px 28px rgba(15, 36, 64, 0.22));
  order: -1;
}
@media (min-width: 820px) {
  .hp-buehne__zeichen { width: 176px; height: 176px; order: 0; }
}

/* "In Vorbereitung" ist eine Aussage ueber den Stand und gehoert nach oben,
   nicht ans Ende. */
.hp-buehne__stand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin: var(--space-7) 0 0;
}

.hp-buehne__notiz {
  font: var(--type-body-sm);
  color: var(--text-muted);
}

/* Die Kuerzelliste. Das Zeichen steht in der Monoschrift und bekommt eine
   feste Spalte — sonst rutschen die Saetze daneben von Zeile zu Zeile. */
.hp-tasten {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.hp-taste {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: var(--space-5);
  align-items: baseline;
  max-width: var(--measure);
}

/* Auch inline im Fliesstext verwendbar — deshalb keine Annahme ueber das
   Elternelement. */
.hp-taste__zeichen {
  font: var(--type-mono);
  color: var(--text);
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  text-align: center;
  white-space: nowrap;
}

.hp-taste__text {
  font: var(--type-body);
  color: var(--text-body);
}
.hp-taste__text strong { color: var(--text); }

/* Merkmale als Karten. Eine Spalte, ab 720 px zwei — drei waeren auf einem
   Laptop zu schmal fuer drei Zeilen Text. */
.hp-merkmale {
  display: grid;
  gap: var(--space-5);
}
@media (min-width: 720px) {
  .hp-merkmale { grid-template-columns: 1fr 1fr; }
}

.hp-merkmal__titel {
  font: var(--type-h4);
  color: var(--text);
  margin: 0 0 var(--space-4);
}

.hp-merkmal p {
  font: var(--type-body);
  color: var(--text-body);
  margin: 0;
}

/* Die sechzehn Werkzeuge. Eine Aufzaehlung, die wie eine aussieht — nicht
   sechzehn Karten: Die Namen tragen sich selbst, ein Absatz je Wort waere
   Fuellmaterial. */
.hp-werkzeuge {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: 0 0 var(--space-9);
  padding: 0;
  list-style: none;
}

.hp-werkzeuge li {
  font: var(--type-body-sm);
  color: var(--text-body);
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  padding: var(--space-3) var(--space-5);
}

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

.hp-fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--space-9);
  border-top: 1px solid var(--border);
}

.hp-fuss__name {
  font: var(--type-body-sm);
  color: var(--text-muted);
  margin: 0 auto 0 0;
}

/* --- 8  Bewegung ---------------------------------------------------------- */

/* Wer Bewegung abbestellt hat, bekommt keine. Nicht weniger, keine. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}