/* Gegenanflug – gezeichnete UI-Mockups (Turm, Handy, Gast-QR, Lagebild) für die Website.
   Alles skaliert über Container-Einheiten (cqw) mit der Breite des Rahmens, damit die Bilder auf 320 px
   genauso aussehen wie auf dem Desktop – nur kleiner. Farben ausschließlich aus ../brand/tokens.css,
   Bausteine wie in docs/ci/app-komponenten.md. Die Mockups sind Illustration (aria-hidden) mit Textalternative. */

.mock { margin: 0; }
.mock figcaption { font-size: 13.5px; color: var(--muted); margin-top: 12px; max-width: 80ch; }
.mock__rahmen { container-type: inline-size; }

/* ---------------------------------------------------------------- Gemeinsame Mini-Bausteine */
.m-kz { display: inline-flex; align-items: center; border: .14em solid var(--ink); border-radius: .35em; padding: .05em .4em;
  font: 700 1em/1.15 var(--f-display); letter-spacing: .06em; color: var(--ink); background: var(--surface); white-space: nowrap; }
.m-chip { display: inline-flex; align-items: center; gap: .35em; padding: .2em .65em .2em .25em; border-radius: 999px; border: 1px solid var(--c-line);
  background: var(--c-bg); color: var(--c-fg); font-weight: 500; white-space: nowrap; }
.m-chip i { display: inline-grid; place-items: center; width: 1.3em; height: 1.3em; border-radius: 50%; background: var(--c-fg); color: var(--surface);
  font: 700 .8em/1 var(--f-body); font-style: normal; }
.m-ok { --c-bg: var(--ok-bg); --c-line: var(--ok-line); --c-fg: var(--ok); }
.m-warn { --c-bg: var(--warn-bg); --c-line: var(--warn-line); --c-fg: var(--warn); }
.m-unk { --c-bg: var(--unk-bg); --c-line: var(--unk-line); --c-fg: var(--unk); }
.m-btn { display: flex; align-items: center; justify-content: center; gap: .4em; border-radius: .7em; color: #fff; background: var(--brand);
  font: 700 1em/1 var(--f-display); letter-spacing: .06em; text-transform: uppercase; }
.m-btn--landung { background: var(--brand-ink); }
.m-btn--kontur { background: var(--surface); color: var(--ink); border: .12em solid var(--rule-strong); border-radius: 999px; }
.m-btn svg { width: 1em; height: 1em; }
.m-betrieb { display: flex; align-items: center; gap: .6em; padding: .55em .9em; line-height: 1.25; }
.m-betrieb b { font: 700 1.08em/1.1 var(--f-display); letter-spacing: .03em; text-transform: uppercase; color: inherit; }
.m-betrieb span { display: block; }
.m-betrieb svg { width: 1.5em; height: 1.5em; flex: none; }
.m-betrieb--ohne { background: var(--betrieb-ohne-bg); color: var(--betrieb-ohne-fg); }
.m-betrieb--ohne span { color: var(--betrieb-ohne-sub); }
.m-betrieb--mit { background: var(--betrieb-mit-bg); color: var(--betrieb-mit-fg); border-bottom: 1px solid var(--betrieb-mit-line); }
.m-betrieb--mit span { color: var(--text); }
.m-quelle { font-size: .78em; color: var(--muted); }
.m-zeit { font-variant-numeric: tabular-nums; }
.m-utc { color: var(--muted); font-size: .82em; }

/* ---------------------------------------------------------------- Turm (Tablet quer, drei Spalten) */
.mock--turm .mock__rahmen { border-radius: 18px; padding: 1.4%; background: #1c1c20; box-shadow: var(--schatten-bild); }
:root[data-theme="dark"] .mock--turm .mock__rahmen { background: #33333a; }
.turm { container-type: inline-size; background: var(--ground); border-radius: 10px; overflow: hidden; color: var(--text);
  font: 400 1.32cqw/1.35 var(--f-body); }
.turm b { font-weight: 600; }
.turm__kopf { display: flex; align-items: center; gap: 1.2cqw; padding: .7cqw 1.4cqw; background: var(--surface); border-bottom: 1px solid var(--rule); }
.turm__marke { display: inline-flex; align-items: center; gap: .5cqw; color: var(--brand-fg); }
.turm__marke svg { width: 2cqw; height: 2cqw; }
.turm__marke b { font: 700 1.9cqw/1 var(--f-display); color: var(--ink); }
.turm__marke b i { font-style: normal; color: var(--brand-fg); }
.turm__kopf .m-betrieb { flex: 1; border-radius: .6cqw; padding: .45cqw .9cqw; border: 1px solid var(--betrieb-mit-line); }
.turm__uhr { text-align: right; font: 700 2.2cqw/1 var(--f-display); color: var(--ink); }
.turm__uhr small { display: block; font: 400 1.05cqw/1.3 var(--f-body); color: var(--muted); }
.turm__reiter { display: flex; gap: .5cqw; padding: .6cqw 1.4cqw; border-bottom: 1px solid var(--rule); background: var(--surface); }
.turm__reiter span { padding: .35cqw 1cqw; border-radius: 999px; border: 1px solid var(--rule-strong); font: 600 1.05cqw/1 var(--f-display); letter-spacing: .08em; text-transform: uppercase; }
.turm__reiter .an { background: var(--brand); border-color: var(--brand); color: #fff; }
.turm__spalten { display: grid; grid-template-columns: 40fr 35fr 25fr; gap: 1.1cqw; padding: 1.1cqw 1.4cqw 1.4cqw; }
.turm h4 { margin: 0 0 .6cqw; font: 600 1.05cqw/1 var(--f-display); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.turm h4 + h4, .turm .karten + h4 { margin-top: 1cqw; }
.karten { display: grid; gap: .7cqw; }
.karte { display: grid; gap: .5cqw; padding: .8cqw .9cqw; border: 1px solid var(--rule); border-radius: .8cqw; background: var(--surface); box-shadow: var(--schatten-karte); }
.karte__kopf { display: flex; align-items: center; gap: .7cqw; }
.karte__kopf .m-kz { font-size: 1.9cqw; }
.karte__kopf .m-zeit { margin-left: auto; color: var(--muted); }
.karte__fuss { display: flex; align-items: center; gap: .6cqw; }
.karte__fuss .zahl { margin-right: auto; }
.karte__fuss .zahl b { font: 700 1.7cqw/1 var(--f-display); color: var(--ink); }
.karte .m-btn { padding: .65cqw 1.1cqw; font-size: 1.15cqw; border-radius: 999px; }
.karte--ueberfaellig { border-left: .35cqw solid var(--warn-strong); }
.karte--erwartet { border-style: dashed; box-shadow: none; background: transparent; }
.karte--erwartet .m-kz { border-style: dashed; color: var(--muted); border-color: var(--muted); }
.erfassung { display: grid; gap: .8cqw; align-content: start; }
.eingabe { border: .16cqw solid var(--brand-fg); border-radius: .8cqw; background: var(--surface); padding: .6cqw .9cqw; font: 700 2.6cqw/1.1 var(--f-display); letter-spacing: .08em; color: var(--ink); }
.eingabe::after { content: ""; display: inline-block; width: .14cqw; height: 2.1cqw; margin-left: .2cqw; background: var(--brand-fg); vertical-align: -.25cqw; }
.vorschlaege { border: 1px solid var(--rule); border-radius: .8cqw; background: var(--surface); overflow: hidden; }
.vorschlaege div { display: flex; align-items: center; gap: .7cqw; padding: .55cqw .9cqw; }
.vorschlaege div + div { border-top: 1px solid var(--rule); }
.vorschlaege .an { background: var(--brand-soft); }
.vorschlaege .m-kz { font-size: 1.5cqw; }
.tasten { display: grid; grid-template-columns: 1fr 1fr; gap: .7cqw; }
.tasten .m-btn { min-height: 5.4cqw; font-size: 2.1cqw; }
.tasten .m-btn--kontur { min-height: 3.8cqw; font-size: 1.4cqw; }
.piste { display: flex; align-items: center; justify-content: space-between; gap: .6cqw; padding: .6cqw .9cqw; border: 1px solid var(--rule); border-radius: .8cqw; background: var(--surface); }
.piste b { font: 700 2.2cqw/1 var(--f-display); color: var(--ink); }
.lage-spalte { display: grid; gap: .8cqw; align-content: start; }
.post { display: grid; gap: .5cqw; }
.post div { display: flex; align-items: center; gap: .5cqw; padding: .5cqw .7cqw; border: 1px solid var(--rule); border-radius: .7cqw; background: var(--surface); font-size: 1.1cqw; }
.post .m-kz { font-size: 1.2cqw; }
.post .knopf { margin-left: auto; display: inline-grid; place-items: center; width: 2.3cqw; height: 2.3cqw; border-radius: 50%; border: .14cqw solid var(--rule-strong); font-weight: 700; color: var(--ink); }
.post .knopf--ja { border-color: var(--ok); color: var(--ok); }
.post .knopf + .knopf { margin-left: .3cqw; }

/* ---------------------------------------------------------------- Lagebild (klein) */
.m-lage { border: 1px solid var(--rule); border-radius: .8cqw; overflow: hidden; background: var(--lage-karte); }
.m-lage__banner { display: flex; gap: .4em; padding: .45em .6em; font-size: .8em; line-height: 1.25; background: var(--surface); border-bottom: 1px solid var(--rule); color: var(--text); }
.m-lage__banner b { color: var(--ink); }
.m-lage svg { display: block; width: 100%; height: auto; }
.m-lage__fuss { display: flex; flex-wrap: wrap; gap: .2em .7em; padding: .4em .6em; font-size: .74em; color: var(--muted); background: var(--surface); border-top: 1px solid var(--rule); }
.m-lage__fuss .l-imbuch { color: var(--lage-imbuch); } .m-lage__fuss .l-verein { color: var(--lage-verein); } .m-lage__fuss .l-unbekannt { color: var(--lage-unbekannt); } .m-lage__fuss .l-durchflug { color: var(--lage-durchflug); }
.m-lage__fuss b { font-weight: 400; color: var(--muted); }
.m-lage__fuss svg { display: inline; width: .9em; height: .9em; vertical-align: -.1em; margin-right: .2em; }
.lp-karte { fill: var(--lage-karte); }
.lp-linie { fill: none; stroke: var(--lage-karte-linie); }
.lp-piste { fill: var(--rule-strong); }
.lp-imbuch { fill: var(--lage-imbuch); stroke: var(--surface); }
.lp-verein { fill: var(--lage-verein); stroke: var(--surface); }
.lp-unbekannt { fill: var(--lage-unbekannt); stroke: var(--surface); }
.lp-durchflug { fill: none; stroke: var(--lage-durchflug); }
.lp-text { fill: var(--ink); font: 700 9px var(--f-display); letter-spacing: .04em; }

/* ---------------------------------------------------------------- Handy */
.mock--handy { width: min(100%, 290px); }
.handy { container-type: inline-size; border-radius: 38px; padding: 9px; background: #1c1c20; box-shadow: var(--schatten-bild); }
:root[data-theme="dark"] .handy { background: #33333a; }
.handy__schirm { border-radius: 30px; aspect-ratio: 9 / 17 !important; overflow: hidden; background: var(--ground); color: var(--text); font: 400 4.5cqw/1.35 var(--f-body);
  display: flex; flex-direction: column; }
.handy__status { display: flex; justify-content: space-between; padding: 2.6cqw 6cqw 1.2cqw; font: 600 3.6cqw/1 var(--f-body); color: var(--ink); background: var(--surface); }
.handy__kopf { display: flex; align-items: center; gap: 2cqw; padding: 1.6cqw 4cqw 2.4cqw; background: var(--surface); border-bottom: 1px solid var(--rule); }
.handy__kopf svg { width: 6cqw; height: 6cqw; color: var(--brand-fg); }
.handy__kopf b { font: 700 6cqw/1 var(--f-display); color: var(--ink); margin-right: auto; }
.handy__kopf b i { font-style: normal; color: var(--brand-fg); }
.handy__kopf .m-chip { font-size: 3.4cqw; }
.handy .m-betrieb { font-size: 3.8cqw; padding: 2.2cqw 4cqw; }
.handy__inhalt { flex: 1; display: flex; flex-direction: column; gap: 2.6cqw; padding: 3.2cqw 4cqw 4cqw; }
.platz { display: flex; flex-wrap: wrap; gap: .6cqw 3cqw; font-size: 3.7cqw; color: var(--muted); }
.platz b { color: var(--ink); }
.vorbelegt { border: 1px solid var(--rule); border-radius: 3cqw; background: var(--surface); padding: 2.6cqw 3cqw; display: grid; gap: 1.2cqw; }
.vorbelegt .m-kz { font-size: 6cqw; justify-self: start; }
.vorbelegt p { font-size: 3.8cqw; color: var(--text); }
.ampelzeile { display: flex; flex-wrap: wrap; gap: 1.4cqw; font-size: 3.5cqw; }
.bahn { display: flex; align-items: center; gap: 2cqw; font-size: 3.8cqw; }
.bahn i { width: 5cqw; height: 5cqw; border: .6cqw solid var(--ink); border-radius: 1cqw; flex: none; display: grid; place-items: center; }
.bahn i::after { content: ""; width: 2.4cqw; height: 1.2cqw; border-left: .6cqw solid var(--ink); border-bottom: .6cqw solid var(--ink); transform: translateY(-.3cqw) rotate(-45deg); }
.bahn a { margin-left: auto; color: var(--brand-fg); font-size: 3.5cqw; }
.handy .m-btn { min-height: 17cqw; font-size: 8.2cqw; border-radius: 4cqw; margin-top: auto; box-shadow: 0 3cqw 6cqw -4cqw color-mix(in srgb, var(--brand) 90%, transparent); }
.handy .m-btn--kontur { min-height: 11cqw; font-size: 4.6cqw; margin-top: 0; box-shadow: none; }
.m-quittung { display: grid; grid-template-columns: 7cqw 1fr; gap: .4cqw 2.4cqw; padding: 2.6cqw 3cqw; border-radius: 3cqw; border: 1px solid var(--ok-line); background: var(--ok-bg); font-size: 3.6cqw; }
.m-quittung > i { grid-row: span 2; width: 7cqw; height: 7cqw; border-radius: 50%; display: grid; place-items: center; background: var(--ok); color: var(--surface); font: 700 4cqw/1 var(--f-body); font-style: normal; }
.m-quittung small { color: var(--muted); font-size: 3.2cqw; }
.m-quittung--lokal { border-color: var(--wartet-line); background: var(--wartet-bg); }
.m-quittung--lokal > i { background: var(--wartet); }
.m-warte { display: inline-flex; align-items: center; gap: 1cqw; padding: .8cqw 2.4cqw; border-radius: 999px; background: var(--wartet-bg); color: var(--wartet); border: 1px solid var(--wartet-line); font-size: 3.3cqw; font-weight: 500; }
.m-offen-flug { border: 1px solid var(--rule); border-radius: 3cqw; background: var(--surface); padding: 2.6cqw 3cqw; display: grid; gap: 1cqw; font-size: 3.7cqw; }
.m-offen-flug .m-kz { font-size: 5.2cqw; justify-self: start; }
.zaehler-mini { display: grid; grid-template-columns: 1fr auto; gap: 1cqw 2cqw; align-items: center; font-size: 3.7cqw; }
.zaehler-mini span:nth-child(even) { display: flex; gap: 1.6cqw; align-items: center; font: 700 5.6cqw/1 var(--f-display); color: var(--ink); }
.zaehler-mini em { display: inline-grid; place-items: center; width: 8cqw; height: 8cqw; border-radius: 50%; border: .5cqw solid var(--rule-strong); font: 700 5cqw/1 var(--f-display); font-style: normal; color: var(--ink); }

/* ---------------------------------------------------------------- Gast: Aushang + GiroCode */
.gast { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-end; justify-content: center; }
.aushang { container-type: inline-size; width: min(100%, 205px); background: #fdfcf7; color: #18181b; border-radius: 6px; padding: 18px 18px 20px;
  box-shadow: 0 1px 0 #e7e2cf, 0 24px 40px -28px rgba(0, 0, 0, .55); transform: rotate(-1.2deg); font: 400 13px/1.35 var(--f-body);
  border-top: 8px solid #27479f; }
.aushang > div { font-size: 5.6cqw; }
@media (prefers-reduced-motion: reduce) { .aushang { transform: none; } }
.aushang__marke { display: flex; align-items: center; gap: 2cqw; color: #27479f; }
.aushang__marke svg { width: 9cqw; height: 9cqw; }
.aushang__marke b { font: 700 8cqw/1 var(--f-display); color: #0a0a0a; }
.aushang__marke b i { font-style: normal; color: #27479f; }
.aushang h5 { margin: 5cqw 0 1cqw; font: 700 9.5cqw/1.05 var(--f-display); color: #0a0a0a; }
.aushang p { font-size: 4.6cqw; color: #3f3f46; }
.aushang .qr { width: 62cqw; margin: 5cqw auto 3cqw; display: block; color: #0a0a0a; }
.aushang .sprachen { display: flex; justify-content: space-between; font: 600 4.2cqw/1 var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: #62626c; }
.m-giro { display: grid; grid-template-columns: 30cqw 1fr; gap: 3cqw; align-items: center; border: 1px solid var(--rule); border-radius: 3cqw; background: var(--surface); padding: 3cqw; }
.m-giro .qr { width: 30cqw; color: var(--ink); background: var(--surface); }
.m-giro b { display: block; font: 700 7cqw/1 var(--f-display); color: var(--ink); }
.m-giro small { display: block; font-size: 3.2cqw; color: var(--muted); margin-top: 1cqw; }
.m-giro .giro-marke { display: inline-block; margin-top: 1.4cqw; font: 700 3.2cqw/1 var(--f-display); letter-spacing: .08em; text-transform: uppercase; padding: .8cqw 1.6cqw; border: 1px solid var(--rule-strong); border-radius: 999px; color: var(--text); }
.m-feldzeile { display: flex; justify-content: space-between; gap: 2cqw; font-size: 3.7cqw; border-bottom: 1px solid var(--rule); padding-bottom: 1.4cqw; }
.m-feldzeile span:first-child { color: var(--muted); }
.m-feldzeile b { color: var(--ink); }
.m-link { font-size: 3.6cqw; color: var(--brand-fg); text-decoration: underline; text-underline-offset: .6cqw; }
@media (min-width: 900px) { .meldung__bilder { flex-wrap: nowrap; } .meldung__bilder .mock--handy { width: min(50%, 250px); } }
.qr { aspect-ratio: 1 / 1; height: auto; }