/* App-Seiten von wass-er.com (apps/*.html) – Aufbau: Kopf mit Symbol und Knopf, Unterleiste, Bühne mit Handys,
   Einleitung, abwechselnde Abschnitte Text/Bild, alle Funktionen als Raster, Neu in der Version, Auf einen Blick. */

/* ---------- Seitenkopf (schmal) ---------- */
.seitenkopf { background: var(--head); color: var(--head-ink); padding: calc(env(safe-area-inset-top) + 12px) 0 12px; }
.seitenkopf .innen { display: flex; align-items: center; gap: 16px; min-width: 0; }
body { overflow-x: hidden; }
.seitenkopf .marke { color: var(--head-ink); }
.seitenkopf nav { margin-left: auto; min-width: 0; display: flex; gap: 4px 16px; flex-wrap: wrap; justify-content: flex-end; }
.seitenkopf nav a { color: var(--head-ink); opacity: .8; text-decoration: none; font-size: 15px; }
.seitenkopf nav a:hover, .seitenkopf nav a[aria-current] { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }

/* ---------- App-Kopf ---------- */
.appkopf { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; padding: 30px 0 18px; }
.appkopf > * { min-width: 0; }
.appkopf img { width: 88px; height: 88px; border-radius: 20px; box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.appkopf h1 { font-size: clamp(30px, 5.5vw, 44px); line-height: 1.05; margin: 0 0 4px; }
.appkopf .spruch { font-family: "Inter Tight", "Inter", sans-serif; font-size: clamp(17px, 2.6vw, 21px); font-weight: 600; margin: 0; line-height: 1.25; }
.appkopf .plattform { color: var(--muted); font-size: 14.5px; margin: 4px 0 0; }
.appkopf .los { text-align: right; }
.appkopf .knopf { font-size: 17px; padding: 11px 22px; }
.appkopf .fakten { overflow-wrap: anywhere; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12.5px; color: var(--muted); margin: 8px 0 0; letter-spacing: .02em; }

.unterleiste { display: flex; gap: 22px; border-bottom: 1px solid var(--line); margin-bottom: 26px; overflow-x: auto; scrollbar-width: none; }
.unterleiste a { padding: 8px 0 10px; color: var(--muted); text-decoration: none; font-weight: 600; font-size: 15px; white-space: nowrap; border-bottom: 2px solid transparent; }
.unterleiste a:hover { color: var(--ink); border-bottom-color: var(--accent); }

/* ---------- Handys ---------- */
.handy { display: block; width: 100%; height: auto; max-width: 300px; aspect-ratio: 780 / 1688; border-radius: 34px; border: 7px solid #1d2a31;
  background: #0d1a22; box-shadow: 0 0 0 1px #3a4a52, 0 18px 40px rgba(0,0,0,.35); object-fit: cover; }
.buehne-apps { display: flex; justify-content: center; align-items: flex-end; gap: clamp(10px, 3vw, 28px); padding: 28px 16px 34px;
  border-radius: 22px; background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--accent) 22%, var(--panel)), var(--panel) 70%);
  border: 1px solid var(--line); margin-bottom: 28px; overflow: hidden; }
.buehne-apps .handy { width: 30%; }
.buehne-apps .handy.mitte { width: 34%; max-width: 330px; }

/* ---------- Einleitung ---------- */
.einleitung-app { max-width: 760px; margin: 0 0 40px; }
.einleitung-app .lead { font-size: 19px; color: var(--muted); margin: 0 0 14px; }
.einleitung-app p { margin: 0 0 12px; }

/* ---------- Abschnitte Text / Bild ---------- */
.abschnitt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 5vw, 56px); align-items: center; margin: 0 0 56px; scroll-margin-top: 16px; }
.abschnitt.gedreht .text { order: 2; }
.abschnitt h2 { font-size: clamp(24px, 3.4vw, 32px); line-height: 1.15; margin: 0 0 12px; }
.abschnitt p { margin: 0 0 12px; }
.abschnitt .bilder { display: flex; justify-content: center; gap: 14px; }
.abschnitt .bilder .handy { width: 48%; max-width: 260px; }
.abschnitt .bilder .handy:only-child { width: 62%; max-width: 290px; }
.abschnitt ul { margin: 0 0 12px; padding-left: 20px; }
.abschnitt li { margin-bottom: 4px; }
.abschnitt .ohne-bild { display: grid; place-items: center; min-height: 220px; border-radius: 22px; border: 1px solid var(--line); font-size: 84px;
  background: radial-gradient(100% 100% at 50% 0%, color-mix(in srgb, var(--accent) 18%, var(--panel)), var(--panel) 75%); }

/* ---------- Alle Funktionen ---------- */
.ueberschrift { font-size: clamp(24px, 3.4vw, 32px); margin: 0 0 6px; scroll-margin-top: 16px; }
.unter { color: var(--muted); margin: 0 0 16px; }
.funktionen { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 12px; margin-bottom: 48px; }
.funktionen div { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 14px; }
.funktionen b { display: block; font-family: "Inter Tight", "Inter", sans-serif; font-size: 16.5px; margin: 4px 0 2px; }
.funktionen span { color: var(--muted); font-size: 14.5px; line-height: 1.45; display: block; }
.funktionen i { font-style: normal; font-size: 22px; }

/* ---------- Neu in der Version ---------- */
.versionen { margin-bottom: 48px; }
.versionen article { border-left: 3px solid var(--accent); padding: 2px 0 2px 16px; margin-bottom: 16px; }
.versionen h3 { font-size: 17px; margin: 0 0 4px; }
.versionen h3 small { color: var(--muted); font-weight: 500; font-size: 14px; margin-left: 6px; }
.versionen ul { margin: 0; padding-left: 20px; }
.versionen li { margin-bottom: 3px; }
.versionen details summary { cursor: pointer; color: var(--accent); margin: 4px 0 12px; }

/* ---------- Auf einen Blick ---------- */
.blick { display: grid; grid-template-columns: max-content 1fr; gap: 10px 22px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 16px; padding: 18px 20px; margin: 0 0 18px; }
.blick dt { color: var(--muted); font-size: 15px; }
.blick dd { margin: 0; }
.weitere { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 40px; }
.weitere a { display: flex; align-items: center; gap: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 8px 14px 8px 8px; color: var(--ink); text-decoration: none; font-weight: 600; }
.weitere a:hover { border-color: var(--accent); }
.weitere img { width: 36px; height: 36px; border-radius: 9px; }

@media (max-width: 720px) {
  .appkopf { grid-template-columns: auto 1fr; padding-top: 22px; }
  .appkopf img { width: 68px; height: 68px; border-radius: 16px; }
  .appkopf .los { grid-column: 1 / -1; text-align: left; }
  .abschnitt, .abschnitt.gedreht { grid-template-columns: 1fr; margin-bottom: 44px; }
  .abschnitt.gedreht .text { order: 0; }
  .buehne-apps .handy:not(.mitte) { width: 28%; }
  .handy { border-width: 5px; border-radius: 24px; }
  .blick { grid-template-columns: 1fr; gap: 2px; }
  .blick dd { margin-bottom: 8px; }
  .seitenkopf nav a.unwichtig { display: none; }
}

/* ---------- Geräte: Vorschaubilder (hell hinterlegt) statt Handys ---------- */
.foto { display: block; width: 100%; height: auto; max-width: 340px; border-radius: 18px; background: #f6f7f5; border: 1px solid var(--line);
  box-shadow: 0 12px 30px rgba(0,0,0,.25); }
.abschnitt .bilder .foto { width: 48%; }
.abschnitt .bilder .foto:only-child { width: 80%; max-width: 380px; }
.buehne-apps .foto { width: 30%; }
.hinweis-zeile { display: inline-block; margin: 8px 0 0; font-size: 14px; color: var(--muted); }
.knopf.still { background: transparent; color: var(--muted); border: 1px dashed var(--line); font-weight: 500; cursor: default; }