/* FairApps-Webseite, Richtung A „Farbfeld“ (Alis Wahl 21.10.2026). Eine Datei für alle Seiten.
   Weiße Seite, schmale kräftige Überschriften, jede App im App Store ein randloses Farbfeld mit drei aufgefächerten
   Handys, die über die Feldkante ragen. Immer hell. Kein JavaScript, nur Systemschriften, Bilder aus /bilder/.
   Abschnitte: 0 Handy-Rahmen · 1 Grundwerte · 2 App-Farben · 3 Grundlagen · 4 Kopf · 5 Auftakt · 6 Apps im Store
   · 7 Versprechen · 8 Kaffee · 9 Als Nächstes · 10 Warum · 11 Mail, Fuß · 12 Textseiten · Breite Bildschirme
   · 13 Bewegung (nur mit Unterstützung und ohne „weniger Bewegung“) */

/* ---------- 0. Handy-Rahmen wie in den Store-Bildern ----------
   Dunkler Rand, runde Ecken, keine Tasten, keine gezeichnete Insel (die stammt aus dem echten Bildschirmfoto).
   Rand 2,66 % der Breite, Außenradius 14,75 %, Bildradius 12,1 %. Bildschirmfotos 600 x 1304, nie beschnitten. */
.handy {
  --handy-b: 15rem;
  --handy-rand: #1B2026;
  box-sizing: border-box;
  width: var(--handy-b);
  margin: 0;
  padding: calc(var(--handy-b) * .0266);
  border-radius: calc(var(--handy-b) * .1475);
  background: var(--handy-rand);
}
.handy img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: calc(var(--handy-b) * .121);
}

/* ---------- 1. Grundwerte ---------- */
:root {
  color-scheme: light;
  --seite: #FFFFFF;
  --text: #121212;
  --neben: #4D4D4D;          /* 8,45:1 auf Weiß */
  --fokus: #121212;
  --schrift-titel: "Avenir Next Condensed", "Bahnschrift Condensed", Bahnschrift, "Roboto Condensed", "Arial Narrow", sans-serif;
  --schrift-text: "Avenir Next", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --breite: 76rem;
  --innen: max(clamp(1rem, 4vw, 3rem), (100% - var(--breite)) / 2);   /* Seitenrand, der mit der Breite wächst */
  --abschnitt: clamp(4rem, 2rem + 6vw, 8rem);
  --icon-ecke: 22.37%;       /* Form des iPhone-Icons */
  --hoch: 2.1733;            /* Höhe : Breite der Bildschirmfotos (1304 : 600) */
}

/* ---------- 2. App-Farben (aus den Icons, nicht ändern) ----------
   --feld = Fläche, --auf-feld = Schrift darauf (Raumplan dunkel 8,93:1, Speicherputz weiß 4,61:1), --symbol = Maske */
.app--raumplan     { --feld: #47C0EB; --auf-feld: #121212; --symbol: url(/bilder/symbol-raumplan.png); }
.app--speicherputz { --feld: #3573D4; --auf-feld: #FFFFFF; --symbol: url(/bilder/symbol-speicherputz.png); }
.app--scanmappe    { --feld: #DD266A; }
.app--geldheft     { --feld: #2E2E32; }
.app--merkstapel   { --feld: #E1263C; }
.app--uebezeit     { --feld: #0B8F8A; }
.app--motivschere  { --feld: #66DEB4; }

/* ---------- 3. Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--seite);
  color: var(--text);
  font: 400 1.125rem/1.5 var(--schrift-text);
  overflow-wrap: break-word;
}
h1, h2, .marke__name, .mail__adresse, .regeln__liste {
  font-family: var(--schrift-titel);
  font-weight: 800;
  line-height: .95;
  margin: 0;
  text-wrap: balance;
  hyphens: manual;
}
p { margin: 0; }
img { max-width: 100%; }
a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: .18em; }
:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; }
.ganz { white-space: nowrap; }
.zum-inhalt { position: absolute; left: 1rem; top: -4rem; z-index: 9; padding: .6rem 1rem; background: var(--seite); font-weight: 700; }
.zum-inhalt:focus { top: 1rem; }

.icon { display: block; width: 3.5rem; height: 3.5rem; border-radius: var(--icon-ecke); }
.icon--weiss { border: 1px solid #C4CAD0; }   /* Übezeit-Icon ist weiß */
.icon--raumplan { background: url(/bilder/icon-raumplan.jpg) center / cover; }
.icon--speicherputz { background: url(/bilder/icon-speicherputz.jpg) center / cover; }

/* Stand: Wort plus Zeichen (gefüllt = im App Store, Rahmen = in Arbeit, gestrichelt = später) */
.stand { display: flex; align-items: center; gap: .55em; font-weight: 700; }
.stand::before { content: ""; flex: none; width: .9em; height: .9em; border: 2px solid currentColor; }
.stand--store::before { background: currentColor; }
.stand--spaeter::before { border-style: dashed; }

/* ---------- 4. Kopf ---------- */
.leiste { display: flex; height: 6px; }
.leiste span { flex: 1; background: var(--feld); }
.kopf__zeile {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 1rem;
  padding: 1rem var(--innen);
}
.marke { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: .6rem; }
.marke__name { font-size: 1.75rem; text-decoration: none; }
.marke__bei { color: var(--neben); font-size: 1rem; }
.kopf__sprache { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.kopf__nav { display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
.kopf__nav a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.kopf__nav a:not([aria-current]) { text-decoration: none; }
.kopf__nav a:not([aria-current]):hover { text-decoration: underline; }

/* ---------- 5. Auftakt: Überschrift, darunter zwei Farbfelder, aus denen zwei Handys heraufragen ---------- */
.auftakt {
  --hb: min(38vw, 11rem);                 /* Breite eines Handys */
  --im-feld: calc(var(--hb) * var(--hoch) * .5 + 2rem);
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: auto auto var(--im-feld);
  padding-top: clamp(1rem, 4vw, 3rem);
  overflow-x: clip;
}
.auftakt__text { grid-row: 1; padding-inline: var(--innen); }
.auftakt h1 { font-size: min(clamp(3.25rem, 1.4rem + 8vw, 8rem), 15vw); max-width: 9em; }
.auftakt__satz {   /* Alis Wunsch 21.10.: dicker und besser lesbar */
  max-width: 24ch; margin-top: 1.25rem;
  font-size: clamp(1.375rem, 1.15rem + .7vw, 1.75rem); font-weight: 600; line-height: 1.3;
}
.auftakt__felder { grid-row: 3; grid-column: 1; display: grid; grid-template-columns: 1fr 1fr; }
.auftakt__felder span { background: var(--feld); }
.auftakt__handys {
  grid-row: 2 / 4; grid-column: 1;
  justify-self: center; align-self: end;
  display: flex; margin-top: 2rem; padding-bottom: 2rem;
}
.auftakt__handys .handy { --handy-b: var(--hb); transform-origin: 50% 85%; rotate: var(--dreh); }
.handy--links  { --dreh: -7deg; margin-right: -.5rem; }
.handy--rechts { --dreh: 6deg; margin-left: -.5rem; }

/* ---------- 6. Apps im App Store: Kopf auf Weiß, darunter das Farbfeld mit Fächer, Satz, Stand, Wegen und Foto ---------- */
.app {
  --hb: min(30vw, 15rem);
  --heraus: calc(var(--hb) * var(--hoch) * .42);   /* so weit ragen die Handys über die Feldkante */
  padding-top: var(--abschnitt);
  overflow-x: clip;
}
.app__kopf {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 1rem;
  padding-inline: var(--innen);
}
.app__kopf h2 { font-size: min(clamp(3rem, 1.6rem + 6vw, 7rem), 13.5vw); }
.schlagzeile {
  flex: 1 0 100%; margin-top: .9rem; max-width: 22ch;
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.5rem); font-weight: 600; line-height: 1.15; text-wrap: balance;
}
.feld {
  position: relative;
  margin-top: calc(var(--heraus) + 2.5rem);
  padding: 0 var(--innen) clamp(3rem, 2rem + 4vw, 6rem);
  background: var(--feld);
  color: var(--auf-feld);
  --fokus: var(--auf-feld);
}
.feld__symbol {   /* großes Symbol, an der Feldkante angeschnitten, nur hinter den Handys */
  position: absolute; top: 0; right: 0;
  width: min(82%, 46rem);
  height: calc(var(--hb) * var(--hoch) - var(--heraus) + 3rem);
  background: #FFFFFF;
  -webkit-mask: var(--symbol) no-repeat right -4rem top 0 / auto 100%;
  mask: var(--symbol) no-repeat right -4rem top 0 / auto 100%;
}
.faecher {
  position: relative;
  display: flex; justify-content: center;
  margin-top: calc(-1 * var(--heraus));
}
.faecher .handy { --handy-b: var(--hb); transform-origin: 50% 95%; rotate: var(--dreh); translate: var(--hebung, 0); }
.faecher__1 { --dreh: -9deg; margin-right: calc(var(--hb) * -.22); }
.faecher__2 { --dreh: 0deg; --hebung: 0 -5%; z-index: 1; }
.faecher__3 { --dreh: 8deg; margin-left: calc(var(--hb) * -.22); }
.feld__mehr { display: grid; gap: 2.5rem; margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); }
.feld__satz { max-width: 30ch; font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); font-weight: 600; line-height: 1.3; }
.feld__text .stand { margin-top: 1.25rem; }
.wege { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; margin-top: 1.5rem; }
.knopf {
  display: inline-flex; align-items: center; min-height: 44px; padding: .5rem 1.15rem;
  background: #FFFFFF; color: #121212; border: 2px solid #121212;
  font-weight: 700; text-decoration: none;
}
.knopf:hover { text-decoration: underline; }
.weg { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.feld__foto { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }   /* Fotos sind 4:3, gezeigt 3:2 */
.app--raumplan .feld__foto { object-position: 50% 80%; }   /* Decke weg, Kartons und Boden bleiben */

.app--gespiegelt .feld__symbol { right: auto; left: 0; -webkit-mask-position: left -4rem top 0; mask-position: left -4rem top 0; }

/* ---------- 7. Versprechen ---------- */
.regeln { padding: var(--abschnitt) var(--innen) 0; }
.regeln h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 700; }
.regeln__liste {
  list-style: none; margin: 1.5rem 0 0; padding: 0;
  font-size: min(clamp(2.5rem, 1.2rem + 5.5vw, 6.5rem), 14vw);
}
.regeln__liste li + li { margin-top: .12em; }

/* ---------- 8. Kaffee: eigenes Farbfeld mit großem Becher (Alis Wunsch 21.10.: größer, mit Logo, weiter oben) ----------
   Gelb wie bei Buy Me a Coffee, Schrift dunkel (#121212 auf #FFDD00 rund 15:1). Der Becher ist eine eigene Zeichnung. */
.kaffee {
  --feld: #FFDD00;
  position: relative;
  overflow: clip;
  margin-top: var(--abschnitt);
  padding: clamp(3rem, 2rem + 4vw, 6rem) var(--innen);
  background: var(--feld);
  color: #121212;
}
.kaffee__symbol {   /* großer Becher, unten rechts angeschnitten */
  position: absolute; right: -2.5rem; bottom: -2.5rem;
  width: min(56vw, 28rem); aspect-ratio: 1;
  background: #FFFFFF;
  -webkit-mask: url(/bilder/kaffee.svg) no-repeat center / contain;
  mask: url(/bilder/kaffee.svg) no-repeat center / contain;
}
.kaffee__text { position: relative; max-width: 44rem; }
.kaffee h2 { font-size: min(clamp(2.75rem, 1.5rem + 5vw, 6rem), 13vw); }
.kaffee__satz { margin-top: 1.25rem; max-width: 32ch; font-size: clamp(1.2rem, 1.05rem + .5vw, 1.5rem); font-weight: 600; line-height: 1.35; }
.knopf--kaffee { gap: .65rem; min-height: 52px; padding-inline: 1.25rem; font-size: 1.125rem; }
.knopf--kaffee img { width: 1.75rem; height: 1.75rem; }

/* ---------- 9. Als Nächstes (klein: die Apps sind noch nicht fertig) ---------- */
.naechste { padding: var(--abschnitt) var(--innen) 0; }
.naechste h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 700; }
.naechste__liste {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(12.5rem, 100%), 1fr)); gap: 1.5rem 2rem;
  list-style: none; margin: 1.75rem 0 0; padding: 0;
}
.naechste__liste li { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: .9rem; }
.naechste__liste .icon { grid-row: span 2; width: 3rem; height: 3rem; }
.naechste__name { font-weight: 700; line-height: 1.25; }
.naechste__liste .stand { font-weight: 500; font-size: 1rem; color: var(--neben); }

/* ---------- 10. Warum (zugeklappt) ---------- */
.warum { padding: var(--abschnitt) var(--innen) 0; }
.warum summary { display: flex; align-items: center; gap: 1rem; min-height: 44px; cursor: pointer; list-style: none; }
.warum summary::-webkit-details-marker { display: none; }
.warum summary h2 { font-size: min(clamp(2.25rem, 1.5rem + 3vw, 4rem), 13vw); }
.warum summary::after {   /* Plus, das beim Öffnen zum Minus wird */
  content: "+" / ""; flex: none;
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem;
  border: 2px solid currentColor; font: 700 1.75rem/1 var(--schrift-text);
}
.warum details[open] summary::after { content: "\2212" / ""; }
.brief { max-width: 66ch; margin-top: 2rem; }
.brief p { margin-bottom: 1.1em; hyphens: auto; }
.fussnote { margin-top: 2rem; padding-top: 1rem; border-top: 2px solid var(--text); font-size: 1rem; color: var(--neben); }

/* ---------- 11. Mail, Fuß ---------- */
.mail { padding: var(--abschnitt) var(--innen); }
.mail h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 700; }
.mail__adresse { margin-top: .75rem; font-size: min(clamp(2.5rem, 1.2rem + 6vw, 6.5rem), 15vw); }
.mail__adresse a { text-decoration-thickness: .06em; text-underline-offset: .1em; }
.mail__satz { margin-top: 1rem; font-size: 1.25rem; }
.fuss { padding-bottom: 2.5rem; }
.fuss .leiste { height: 1.25rem; }
.fuss__links { display: flex; flex-wrap: wrap; gap: .25rem 1.75rem; padding: 1.5rem var(--innen) .5rem; }
.fuss__links a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.fuss__ehrlich { padding-inline: var(--innen); color: var(--neben); font-size: 1rem; max-width: calc(60ch + 2 * var(--innen)); }

/* ---------- 12. Textseiten: Anleitungen, Datenschutz, Impressum (Inhalt unverändert, nur das Aussehen) ---------- */
.text { max-width: calc(46rem + 2 * var(--innen)); padding: clamp(1.5rem, 1rem + 2vw, 3rem) var(--innen) var(--abschnitt); }
.text h1 { font-size: min(clamp(2.75rem, 1.6rem + 5vw, 5.5rem), 14vw); }
.app-seite .text h1::after {   /* Strich in der App-Farbe unter dem Namen */
  content: ""; display: block; width: 4.5rem; height: 8px; margin-top: 1rem; background: var(--feld);
}
.text h2 { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); margin: 2.75rem 0 .75rem; }
.text h3 { font: 700 1.2rem/1.35 var(--schrift-text); margin: 1.75rem 0 .35rem; }
.text p, .text ul, .text ol { margin: 0 0 1em; }
.text p, .text li { hyphens: auto; -webkit-hyphens: auto; }
.text a[href^="mailto:"], .text .nh { hyphens: none; -webkit-hyphens: none; overflow-wrap: anywhere; }
.text ul, .text ol { padding-left: 1.3em; }
.text li + li { margin-top: .4em; }
.text .lead { margin-top: 1.5rem; font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); font-weight: 600; line-height: 1.35; }
.text p.stand { display: block; margin-top: 1rem; color: var(--neben); font-weight: 400; font-size: 1rem; }
.text p.stand::before { content: none; }
.text .store {
  display: inline-flex; align-items: center; min-height: 44px; padding: .55rem 1.2rem;
  background: var(--feld, #FFFFFF); color: var(--auf-feld, #121212); border: 2px solid #121212;
  font-weight: 700; text-decoration: none;
}
.text .store:hover { text-decoration: underline; }
.text .mail { padding: 0; font-size: 1.25rem; font-weight: 600; }
.recht__text { margin-top: 1.25rem; }
.recht__stand { font-weight: 700; }
.recht__apps { display: grid; gap: 1.25rem; list-style: none; margin: 1.25rem 0 1.5rem; padding: 0; }
.recht__apps li { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: .9rem; }
.recht__apps li + li { margin-top: 0; }
.recht__apps .icon { grid-row: 1 / span 2; width: 2.75rem; height: 2.75rem; }
.recht__name { margin: 0; font-weight: 700; }
.recht__name span { font-weight: 400; color: var(--neben); }
.recht__wege { margin: 0; }

/* ---------- Breite Bildschirme ---------- */
@media (min-width: 60rem) {
  .auftakt {
    --hb: 15rem;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto var(--im-feld);
  }
  .auftakt__text { grid-column: 1; align-self: start; padding-right: 2rem; }
  .auftakt__handys { grid-row: 1 / 3; grid-column: 2; margin: 0; padding-right: var(--innen); }
  .auftakt__felder { grid-row: 2; grid-column: 1 / -1; grid-template-columns: 1fr calc(var(--hb) * 1.02 + var(--innen)); }

  .app__kopf { flex-wrap: nowrap; column-gap: 1.25rem; }
  .app__kopf .icon { width: 4.5rem; height: 4.5rem; }
  .schlagzeile { flex: 1 1 auto; margin: 0 0 0 1.5rem; text-align: right; }
  .app__kopf .schlagzeile { margin-left: auto; }
  .feld__symbol { width: min(55%, 46rem); height: auto; bottom: 0; -webkit-mask-size: auto 72%; mask-size: auto 72%; -webkit-mask-position: right -7rem top -3rem; mask-position: right -7rem top -3rem; }
  .app--gespiegelt .feld__symbol { -webkit-mask-position: left -7rem top -3rem; mask-position: left -7rem top -3rem; }
  .feld__mehr { grid-template-columns: 1fr minmax(0, 36rem); align-items: end; column-gap: 4rem; }
  .app--gespiegelt .feld__mehr { grid-template-columns: minmax(0, 36rem) 1fr; }
  .app--gespiegelt .feld__foto { order: -1; }
  .kaffee__symbol { right: max(-2rem, var(--innen) - 6rem); bottom: -4rem; width: 30rem; }
  .naechste__liste { grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr)); }
}

/* ---------- 13. Bewegung: nur mit Unterstützung und wenn niemand „weniger Bewegung“ eingestellt hat.
   Ohne das steht alles fertig da (Handys aufgefächert). Keine Endlos-Animation, Text bewegt sich nicht. ---------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .faecher { view-timeline: --faecher block; }
    .faecher .handy { animation: stapel linear both; animation-timeline: --faecher; animation-range: entry 15% cover 50%; }
    .faecher__1 { --stapel: calc(var(--hb) * .78); }
    .faecher__3 { --stapel: calc(var(--hb) * -.78); }

    .auftakt { view-timeline: --auftakt block; }
    .auftakt__handys .handy { animation: weiter linear both; animation-timeline: --auftakt; animation-range: exit 0% exit 70%; }

    .kaffee { view-timeline: --kaffee block; }
    .kaffee__symbol { animation: becher linear both; animation-timeline: --kaffee; animation-range: entry 10% cover 45%; }
  }
}
@keyframes stapel { from { rotate: 0deg; translate: var(--stapel, 0) 10%; } }
@keyframes weiter { to { rotate: calc(var(--dreh) * 2.2); translate: 0 -6%; } }
@keyframes becher { from { rotate: -14deg; translate: 0 18%; } }