/* GRTL-Webseite (https://grtl-50dcc.web.app), Stil für alle Seiten. Hand gepflegt, NICHT erzeugt;
   tools/build-web.py hängt nur eine Prüfsumme an den Link (/grtl.css?v=…), damit Besucher nach dem Einspielen
   die neue Fassung bekommen.
   Herkunft: Entwurf B „Nacht“ (web-entwuerfe/b-nacht/, 24.10.2026), von Ali am 25.10.2026 gewählt und angepasst
   (Reihenfolge, „Deine Leute“, Bewegung). Dunkel, aber warm: Fast-Schwarz mit Braunstich, das Licht kommt nur aus den
   Fotos. Eigenes Detail: ganzflächige Nachtfotos von Wien, die Handys stehen davor wie in einer Auslage und ragen über
   die harte Fotokante hinaus. Keine Verläufe, kein Leuchten, kein Milchglas. Kein JavaScript, nur Systemschriften,
   strenge CSP (style-src 'self'): keine style-Attribute und kein <style> in den Seiten.
   Abschnitte: 1 Werte · 2 Grundlagen · 3 Kopf · 4 Bauteile · 5 Erster Bildschirm · 6 So geht's · 7 Garage · 8 Deine Leute
   · 9 Vertrauen · 10 Motorrad · 11 Schluss · 12 Fuß · 13 Unterseiten · 14 Bewegung
   Reihenfolge der Startseite (Alis Wunsch 25.10.): Erster Bildschirm, So geht's, Vertrauen, Garage, Deine Leute,
   Motorrad, Schluss. */

/* ---------- 1. Werte ---------- */
:root {
  color-scheme: dark;
  --grund: #0E0D12;
  --flaeche: #17161C;
  --text: #F4F1EC;
  --neben: #B8B2AA;
  --akzent: #FF731A;
  --auf-akzent: #111216;
  --linie: #3B3941;
  --fokus: #F4F1EC;
  --anzeige: "Avenir Next Condensed", "DIN Condensed", "DIN Alternate", Bahnschrift, "Roboto Condensed", "Arial Narrow", sans-serif;
  --schrift: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --breite: 80rem;
  --rand: clamp(1.25rem, 5vw, 3.5rem);
  --innen: max(var(--rand), (100vw - var(--breite)) / 2);
  --abschnitt: clamp(4.5rem, 2rem + 6vw, 8rem);
  --h1: min(clamp(3.25rem, 1rem + 5.6vw, 6rem), 15vw);
  --h2: min(clamp(2.75rem, 1.25rem + 5vw, 6rem), 13vw);
  --hero-handy: clamp(14rem, 6rem + 12vw, 19rem);   /* Breite des Handys im ersten Bildschirm */
  --ueber: calc(var(--hero-handy) * .9);            /* so weit ragt es unten aus dem Foto */
  --tief: 2rem;                                      /* Parallaxe der Fotos, höchstens 3 rem */
  --feder: cubic-bezier(.2, .8, .2, 1);
  --bremse: cubic-bezier(.12, .75, .18, 1);         /* rollt aus wie ein Auto, das stehen bleibt */
}

/* ---------- 2. Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font: 400 1.125rem/1.55 var(--schrift);
  overflow-wrap: break-word;
}
h1, h2, h3 { margin: 0; font-family: var(--anzeige); font-weight: 800; line-height: 1.08; text-wrap: balance; hyphens: manual; }
h2 { font-size: var(--h2); }
p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
img { max-width: 100%; }
picture { display: block; }
a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: .18em; }
a:hover { color: var(--akzent); }
:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; }
p { text-wrap: pretty; }
.klein { font-size: 1rem; color: var(--neben); }
.zum-inhalt { position: absolute; left: 1rem; top: -5rem; z-index: 20; padding: .75rem 1.25rem; background: var(--text); color: var(--grund); font-weight: 700; }
.zum-inhalt:focus { top: 1rem; }

/* Handys: schlichter Geräterahmen für echte GRTL-Bildschirmfotos (600 x 1304 px), dunkler Rand, runde Ecken, keine
   Tasten, keine selbst gezeichnete Dynamic Island (die Insel im Bild stammt aus dem echten Bildschirmfoto). Verhältnisse
   wie in den Store-Bildern: Rand 2,66 % der Breite, Außenradius 14,75 %, Bildradius 12,1 %. Das Bildschirmfoto wird nur
   verkleinert, nie beschnitten. Breite über --handy-b (bzw. --hb von außen). */
.handy {
  --handy-b: 16rem;
  --handy-rand: #1C1D22;
  box-sizing: border-box;
  inline-size: var(--handy-b);
  margin: 0;
  padding: calc(var(--handy-b) * .0266);
  border-radius: calc(var(--handy-b) * .1475);
  background: var(--handy-rand);
  outline: 1px solid rgb(255 255 255 / .08);
  outline-offset: -1px;
}

.handy img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  border-radius: calc(var(--handy-b) * .121);
}

/* Stand in der Auslage */
.handy {
  flex: none;
  --handy-b: var(--hb, 16rem);   /* Größe kommt von außen über --hb */
  --handy-rand: #2A2930;
  box-shadow: 0 2.25rem 3.5rem -1.25rem rgb(0 0 0 / .65);
  rotate: var(--dreh, 0deg);
  position: relative;
}

/* Fotos: harte Kanten, innen etwas größer als der Ausschnitt, damit die Parallaxe nie Leere zeigt */
.foto { position: relative; margin: 0; overflow: clip; background: var(--flaeche); }
.foto img {
  position: absolute; left: 0; top: calc(var(--tief) * -1);
  width: 100%; height: calc(100% + var(--tief) * 2);
  object-fit: cover; display: block; max-width: none;
}

/* ---------- 3. Kopf ---------- */
.kopf { position: relative; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem 1rem; padding: .75rem var(--innen); }
.kopf--ueber { position: absolute; inset: 0 0 auto 0; }
.kopf__marke { display: flex; flex-wrap: wrap; align-items: center; gap: 0 .75rem; flex: 1 1 auto; min-width: 0; }   /* passt der Rest nicht daneben, rutscht die Navigation in die nächste Zeile */
.marke { display: inline-flex; align-items: center; gap: .6rem; min-height: 2.75rem; text-decoration: none; }
.marke:hover { color: var(--text); }
.marke__icon { display: block; width: 2.25rem; height: 2.25rem; border-radius: 22.37%; }
.marke__name { font: 800 1.875rem/1 var(--anzeige); letter-spacing: .03em; }
.marke__bei { font-size: .9375rem; color: var(--neben); white-space: nowrap; }
@media (max-width: 29.99em) { .marke__bei { display: none; } }   /* am Handy kein Untertitel, sonst wird der Kopf dreizeilig (N5); die Überschrift sagt es */
.kopf__link[aria-current="page"], .fuss__links a[aria-current="page"] { color: var(--akzent); }
.kopf__link { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 600; font-size: 1.0625rem; }
.kopf__nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1.5rem; }

/* ---------- 4. Bauteile ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3.25rem; padding: .75rem 1.75rem;
  background: var(--akzent); color: var(--auf-akzent);
  border-radius: .625rem;
  font: 700 1.1875rem/1.2 var(--schrift); text-decoration: none;
}
.knopf:hover { background: #FF8A3D; color: var(--auf-akzent); }
.weg { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 600; }
.schritt h3 { font-size: clamp(2.5rem, 1.5rem + 3.2vw, 4.5rem); color: var(--akzent); }
.schritt p { margin-top: .6rem; max-width: 22rem; }

/* ---------- 5. Erster Bildschirm ---------- */
.held {
  position: relative; isolation: isolate; overflow-x: clip;
  min-height: max(100svh, 40rem);
  padding: 8rem var(--innen) calc(var(--hero-handy) * 1.27 + 1.5rem);   /* oben Platz für die zweizeilige Kopfzeile, unten damit das Handy nie über dem Text steht */
}
.held__buehne { position: absolute; inset: 0; z-index: -1; overflow: clip; background: var(--grund); }
.held__foto { position: absolute; left: 0; right: 0; top: calc(var(--tief) * -1); height: calc(128% + var(--tief)); }
.held__foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; }
.held__buehne::after { content: ""; position: absolute; inset: 0; background: rgb(14 13 18 / .4); }   /* flache Abdunkelung am Handy, damit der Text lesbar bleibt */
.held__text { max-width: 24rem; }
.held h1 { font-size: var(--h1); }
.held__satz { margin-top: 1.25rem; max-width: 30rem; }
.held__knopf { margin-top: 1.5rem; }
.held__text .klein { margin-top: .75rem; color: var(--text); }
.held__handy {
  --handy-b: var(--hero-handy);
  position: absolute; bottom: calc(var(--ueber) * -1);
  right: -1.5rem; --dreh: 5deg;
}

/* ---------- 6. So geht's ---------- */
.so { padding: calc(var(--ueber) + var(--abschnitt) * .6) 0 var(--abschnitt); overflow-x: clip; }
.so__titel { padding-inline: var(--rand); max-width: 16em; }
.so__spotten { margin-top: clamp(2.5rem, 2rem + 3vw, 5rem); }
.so__foto { aspect-ratio: 4 / 3; }
.so__foto img { object-position: 50% 60%; }
.so__text { padding: 2rem var(--rand) 0; }
.so__paar {
  --hb: 14rem;
  display: grid; justify-items: center; row-gap: 2rem;
  grid-template-areas: "t2" "h1" "t3" "h2";
  margin-top: clamp(4rem, 3rem + 5vw, 8rem); padding-inline: var(--rand);
}
.so__text2 { grid-area: t2; justify-self: start; }
.so__text3 { grid-area: t3; justify-self: start; margin-top: 2rem; }
.so__handy1 { grid-area: h1; --dreh: -3deg; }
.so__handy2 { grid-area: h2; --dreh: 3deg; }

/* ---------- 7. Garage ---------- */
.garage { overflow-x: clip; }
.garage__foto { aspect-ratio: 4 / 3; }
.garage__foto img { object-position: 88% 50%; }
.garage__handy { --handy-b: 14rem; --dreh: -3deg; margin: calc(var(--handy-b) * -1.05) auto 0; }
.garage__text { padding: 2.5rem var(--rand) 0; max-width: 34rem; }
.garage__text p { margin-top: 1.25rem; }

/* ---------- 8. Deine Leute ---------- */
.leute { padding-top: var(--abschnitt); overflow-x: clip; }
.leute__text { padding: 0 var(--rand) 2.5rem; max-width: 34rem; }
.leute__text p { margin-top: 1.25rem; }
.leute__foto { aspect-ratio: 2 / 3; }
.leute__foto img { object-position: 50% 62%; }
.leute__handys {
  --vorn: min(12.5rem, 54vw); --hinten: min(10.5rem, 46vw);
  display: flex; justify-content: center; align-items: flex-start;
  padding: 0 var(--rand); margin-top: calc(var(--vorn) * -1); position: relative;
}
/* Am Handy nur zwei, das hintere bleibt zu gut zwei Dritteln sichtbar (vorher lagen drei so eng, dass von zweien nur ein Streifen blieb) */
.leute__handy1 { --handy-b: var(--hinten); --dreh: -4deg; margin: 1.5rem min(0px, 100vw - 2 * var(--rand) - var(--vorn) - var(--hinten)) 0 0; }
.leute__handy2 { --handy-b: var(--vorn); --dreh: 2deg; }
.leute__handy3 { display: none; }

/* ---------- 9. Vertrauen ---------- */
.vertrauen { background: var(--flaeche); padding: var(--abschnitt) var(--rand); overflow-x: clip; }
.vertrauen__liste { margin-top: 2.25rem; max-width: 36rem; }
.vertrauen__liste li {
  position: relative; padding: 1.1rem 0 1.1rem 2.25rem;
  border-top: 1px solid var(--linie);
  font-size: 1.1875rem; line-height: 1.45;
}
.vertrauen__liste li:last-child { border-bottom: 1px solid var(--linie); }
.vertrauen__liste li::before { content: ""; position: absolute; left: 0; top: 1.95rem; width: 1.25rem; height: 3px; background: var(--akzent); }
.vertrauen__weg { margin-top: 1rem; }
.vertrauen .weg { color: var(--text); }
.vertrauen__handy { --handy-b: 14rem; --dreh: 3deg; margin: 3.5rem auto 0; }

/* ---------- 10. Motorrad: nur Bild mit Bildunterschrift ---------- */
.motorrad { padding-top: var(--abschnitt); }
.motorrad__foto { aspect-ratio: 4 / 3; }
.motorrad__foto img { object-position: 50% 55%; scale: 1.04; }   /* schneidet den dunklen Filmrand des Fotos weg */
.motorrad figcaption { padding: 1rem var(--rand) 0; color: var(--neben); font-size: 1.0625rem; }

/* ---------- 11. Schluss ---------- */
.schluss { display: grid; justify-items: center; gap: 1.5rem; padding: var(--abschnitt) var(--rand); text-align: center; }
.schluss__icon { display: block; width: 7rem; height: 7rem; border-radius: 22.37%; }
.schluss h2 { font-size: min(clamp(2.5rem, 1.25rem + 4vw, 5rem), 13vw); }
.schluss .klein { margin-top: -.5rem; }
.schluss__mail { color: var(--neben); }
.schluss__mail a { color: var(--text); display: inline-block; padding-block: .15rem; }

/* ---------- 12. Fuß ---------- */
.fuss { background: var(--flaeche); padding: 2rem var(--innen) 3rem; color: var(--neben); font-size: 1rem; }
.fuss p { max-width: 44rem; margin-top: .5rem; }
.fuss__links { display: flex; flex-wrap: wrap; gap: 0 1.75rem; }
.fuss__links a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--text); font-weight: 600; }
.fuss__links a:hover { color: var(--akzent); }

/* ---------- 13. Unterseiten (Rechtstexte, Hilfe, Profil-Link, Mail-Link, 404) ----------
   Ruhige Textspalte ohne Fotos (Jury: keine Deko-Fotos auf Rechtsseiten), rund 65 Zeichen je Zeile. */
.seite { padding: clamp(2.5rem, 1.5rem + 4vw, 5rem) var(--rand) var(--abschnitt); }
.seite__spalte { max-width: 36rem; margin-inline: auto; }
.seite h1 { font-size: min(clamp(2.75rem, 1.5rem + 4.5vw, 4.5rem), 13vw); }
.seite h2 { margin-top: 3rem; font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem); line-height: 1.1; scroll-margin-top: 1rem; }
.seite h3, .seite h2.zwischen { margin-top: 1.75rem; font: 700 1.125rem/1.4 var(--schrift); }
.seite p, .seite ul, .seite ol { margin-top: 1rem; }
.seite h1 + p { margin-top: 1.5rem; font-size: 1.25rem; }
.seite .stand { margin-top: .75rem; color: var(--neben); font-size: 1rem; }
.seite ul { padding-left: 1.25em; list-style: disc; }
.seite li + li { margin-top: .5rem; }
.seite li::marker { color: var(--akzent); }
.seite strong { font-weight: 700; }
.seite .knopf { margin-top: .5rem; }
.seite a:not(.knopf) { color: var(--text); }
.seite a:not(.knopf):hover { color: var(--akzent); }
.text { hyphens: auto; hyphenate-limit-chars: 10 4 4; }   /* Fließtext der Rechtstexte trennt nur lange Wörter, Überschriften nie */
.inhalt { margin-top: 2rem; padding: 1rem 0; border-block: 1px solid var(--linie); }
.inhalt h2 { margin: 0; font: 700 1rem/1.4 var(--schrift); color: var(--neben); }
.inhalt ol { list-style: none; padding: 0; margin-top: .5rem; columns: 2 15rem; column-gap: 2rem; }
.inhalt li, .inhalt li + li { margin: 0; break-inside: avoid; }
.inhalt a { display: block; padding-block: .4rem; text-decoration: none; }
.inhalt a:hover { text-decoration: underline; }
.nach-oben { margin-top: 3rem; }
.seite .zurueck { margin-top: 1.25rem; font-size: 1rem; }
.seite .zurueck a { color: var(--neben); }
.ganz { white-space: nowrap; }
.fassung { margin-top: 3rem; color: var(--neben); font-size: 1rem; }

/* ---------- Breite Bildschirme ---------- */
@media (min-width: 48rem) {
  .held { padding-top: clamp(7.5rem, 20vh, 12rem); padding-bottom: 3rem; }
  .held__text { max-width: 38rem; }
  .held__handy { right: var(--innen); --dreh: 4deg; }
  .so__spotten { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; }
  .so__foto { aspect-ratio: 5 / 4; }
  .so__text { padding: 0 var(--rand) 0 clamp(2rem, 5vw, 6rem); }
  .so__paar {
    --hb: clamp(14rem, 3rem + 13vw, 18rem);
    grid-template-columns: minmax(0, 1fr) auto auto minmax(0, 1fr);
    grid-template-areas: "t2 h1 h2 t3";
    column-gap: clamp(1rem, 2vw, 2.5rem); align-items: start;
  }
  .so__text2 { align-self: start; justify-self: end; text-align: right; margin-top: 30%; }
  .so__text2 p { margin-left: auto; }
  .so__text3 { align-self: end; margin: 0 0 12%; }
  .so__handy2 { margin-top: 5rem; }
  .garage { display: grid; grid-template-columns: minmax(var(--rand), 1fr) minmax(0, var(--breite)) minmax(var(--rand), 1fr); }
  .garage__foto { grid-column: 1 / -1; grid-row: 1; aspect-ratio: auto; height: clamp(24rem, 40vw, 36rem); }
  .garage__handy { --handy-b: clamp(14rem, 3rem + 13vw, 18rem); grid-column: 2; grid-row: 1 / span 2; align-self: start; justify-self: start; margin: clamp(3rem, 6vw, 7rem) 0 0 4%; z-index: 1; }
  .garage__text { grid-column: 2; grid-row: 2; align-self: center; padding: clamp(3rem, 5vw, 5rem) 0 0 calc(clamp(14rem, 3rem + 13vw, 18rem) + 12%); max-width: none; }
  .garage__text p { max-width: 30rem; }
  .vertrauen { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; column-gap: clamp(2rem, 6vw, 8rem); padding-inline: var(--innen); }
  .vertrauen__handy { --handy-b: clamp(14rem, 4rem + 14vw, 19rem); margin: 0; justify-self: center; }
  .leute { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .leute__text { grid-column: 1; grid-row: 1; padding: 0 var(--rand) 3rem var(--innen); max-width: calc(var(--innen) + var(--rand) + 34rem); }   /* Höchstbreite inkl. Rand, sonst bleibt auf breiten Bildschirmen kein Platz für den Text */
  .leute__foto { grid-column: 2; grid-row: 1 / span 2; aspect-ratio: auto; min-height: 100%; }
  .leute__handys { --hb: clamp(13rem, 4rem + 15vw, 18rem); grid-column: 1; grid-row: 2; justify-content: flex-start; margin: 0 calc(var(--hb) * -.55) 0 0; padding: 0 0 0 var(--innen); z-index: 1; }
  .leute__handys .handy { --handy-b: var(--hb); }
  .leute__handy1 { margin: 3rem 0 0; --dreh: -3deg; }
  .leute__handy2 { margin: 0 0 0 calc(var(--hb) * -.28); --dreh: 2deg; }
  .leute__handy3 { display: block; margin: 2rem 0 0 calc(var(--hb) * -.28); --dreh: -2deg; }
  .motorrad__foto { aspect-ratio: 21 / 9; }
}
@media (min-width: 64rem) {
  .held__foto { inset: calc(var(--tief) * -1) 0 0 0; height: auto; }
  .held__foto img { object-position: 25% 50%; }
  .held__buehne::after { content: none; }
  .leute__handy2, .leute__handy3 { margin-left: calc(var(--hb) * -.15); }
}

/* ---------- 14. Bewegung ----------
   Nur ohne „weniger Bewegung“. Ohne Bewegung und ohne Unterstützung steht alles fertig und lesbar da.
   Nach Zeit (jeder Browser): Das Foto im ersten Bildschirm rollt ein Stück herein und bremst, das Handy steigt auf und
   dreht sich in seine Lage, einmal (ohne Einblenden, es ist immer sichtbar).
   Nach Scrollen (Chrome 115+, Safari 26), wie auf der FairApps-Seite: Fotos ziehen langsamer, die Handys schieben sich von
   der Seite herein und drehen sich auf (bei „Spotten. Suchen. Connecten.“ fahren zwei aus der Mitte auseinander), bei „Deine Leute“ liegen sie erst gestapelt und fächern sich auf.
   Keine Endlos-Animation. Text bewegt sich nicht. */
@media (prefers-reduced-motion: no-preference) {
  .held__foto img { animation: einrollen 2.6s var(--bremse) both; }
  .held__handy { --von-dreh: 16deg; --von-y: 6rem; animation: aufdrehen 1.3s var(--feder) .45s both; }

  @supports (animation-timeline: view()) {
    .held__buehne { view-timeline: --held block; }
    .held__foto img { animation: einrollen 2.6s var(--bremse) both, weg linear both; animation-timeline: auto, --held; animation-range: normal, cover 50% cover 100%; }
    .foto { view-timeline: --foto block; }
    .foto img { animation: tiefe linear both; animation-timeline: --foto; animation-range: cover 0% cover 100%; }

    .so__paar { view-timeline: --paar block; }
    .so__handy1, .so__handy2 { animation: herein linear both; animation-timeline: --paar; animation-range: entry 5% cover 40%; }
    .so__handy1 { --von-x: 40%; --von-dreh: 12deg; }    /* beide starten in der Mitte und fahren auseinander, nie über den Text */
    .so__handy2 { --von-x: -40%; --von-dreh: -12deg; }

    .vertrauen { view-timeline: --vertrauen block; }
    .vertrauen__handy { --von-x: 45%; --von-dreh: 16deg; animation: herein linear both; animation-timeline: --vertrauen; animation-range: entry 15% cover 45%; }

    .garage { view-timeline: --garage block; }
    .garage__handy { --von-x: -35%; --von-dreh: -16deg; animation: herein linear both; animation-timeline: --garage; animation-range: entry 10% cover 40%; }

    .leute__handys { view-timeline: --leute block; }
    .leute__handys .handy { animation: stapel linear both; animation-timeline: --leute; animation-range: entry 0% cover 45%; }
    .leute__handy1 { --stapel: 70%; }
    .leute__handy3 { --stapel: -70%; }
  }
}
@keyframes einrollen { from { transform: translateX(5%) scale(1.1); } }
@keyframes aufdrehen { from { translate: 0 var(--von-y, 5rem); rotate: var(--von-dreh, 12deg); } }
@keyframes herein { from { translate: var(--von-x, 0%) 2rem; rotate: var(--von-dreh, 12deg); } }
@keyframes stapel { from { translate: var(--stapel, 0%) 8%; rotate: 0deg; } }
@keyframes weg { to { translate: 0 var(--tief); } }
@keyframes tiefe { from { translate: 0 calc(var(--tief) * -1); } to { translate: 0 var(--tief); } }