/* ------------------------------------------------------------------
   Galerie: echte Screenshots und nachgebaute Ansichten nebeneinander.
   Die Nachbauten sind 360 × 709 px groß — das sind die dp eines
   üblichen Handys und dieselben Maße wie die Screenshots (1016 × 2000).
   Farben aus dem dunklen Thema der App (Seed #0E5C75).
   ------------------------------------------------------------------ */
@font-face { font-family: "Roboto"; src: url(fonts/roboto.woff2) format("woff2"); font-weight: 400 700; font-display: swap; }

.gallery-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.gallery-head .section-head { margin-bottom: 0; }
.gallery-nav { display: flex; gap: .5rem; }
.gallery-nav button { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--rule); background: var(--surface); color: var(--ink); font-size: 1.2rem; line-height: 1; cursor: pointer; }
.gallery-nav button:hover { border-color: var(--sea); color: var(--sea); }
.gallery { display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 8px 20px 18px; margin-inline: -20px; scrollbar-width: thin; }
.shot { flex: 0 0 auto; width: 250px; scroll-snap-align: start; margin: 0; display: grid; gap: .7rem; align-content: start; }
.phone { width: 250px; aspect-ratio: 1016 / 2000; border-radius: 26px; padding: 7px; background: #0b1114; box-shadow: 0 0 0 1px #2b3438, 0 18px 40px rgba(8, 58, 76, .22); overflow: hidden; }
.phone > img, .phone > .m { display: block; width: 100%; height: 100%; border-radius: 20px; object-fit: cover; }
.shot figcaption { font-size: .92rem; color: var(--ink-soft); line-height: 1.4; }
.shot figcaption strong { display: block; color: var(--ink); font-weight: 600; }
.gallery-note { font-size: .85rem; color: var(--ink-soft); margin-top: .4rem; }

/* Maßstab: die 360 px breite Vorlage in die 236 px der Rahmenfläche. */
.m { position: relative; overflow: hidden; background: #0f1417; color: #dee3e6; font-family: "Roboto", "Segoe UI", system-ui, sans-serif; font-size: 14px; line-height: 1.35; }
.m-scale { position: absolute; top: 0; left: 0; width: 360px; height: 709px; transform-origin: 0 0; transform: scale(0.6556); }
.m svg { width: 24px; height: 24px; fill: currentColor; flex: none; }
.m-bar { height: 56px; display: flex; align-items: center; gap: 20px; padding: 0 12px 0 16px; background: #1b2124; font-size: 22px; }
.m-bar .t { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-save { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 16px 0 12px; border-radius: 20px; background: #88d0ec; color: #003544; font-size: 14px; font-weight: 500; }
.m-save svg { width: 18px; height: 18px; }
.m-body { padding: 8px 12px; }
.m-small { font-size: 12px; line-height: 16px; color: #bfc8cc; }
.m-sec { color: #88d0ec; font-size: 14px; font-weight: 700; letter-spacing: .6px; margin: 18px 4px 8px; }
.m-title { font-size: 16px; margin: 18px 0 6px; }
.m-card { background: #1b2124; border-radius: 12px; padding: 12px 10px 12px 16px; margin: 6px 0; }
.m-day { background: #88d0ec; color: #003544; border-radius: 10px; padding: 10px 14px; margin: 12px 0 4px; display: flex; align-items: center; gap: 8px; }
.m-day .d { font-size: 16px; font-weight: 700; }
.m-day .r { font-size: 14px; font-weight: 600; margin-top: 2px; }
.m-day .f { font-size: 12px; margin-top: 3px; opacity: .85; }
.m-row { display: flex; align-items: center; gap: 8px; }
.m .grow { flex: 1; min-width: 0; }
.m-h { font-size: 16px; }
.m-auto { width: 16px !important; height: 16px !important; color: #bfc8cc; }
.m-pos { font-size: 14px; color: #bfc8cc; font-variant-numeric: tabular-nums; margin-top: 2px; }
.m-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.m-chip { border: 1px solid #40484c; border-radius: 8px; padding: 5px 9px; font-size: 13px; color: #dee3e6; }
.m-text { font-size: 14px; margin-top: 8px; line-height: 20px; }
.m-remark { font-size: 16px; margin-top: 8px; }
.m-fab { position: absolute; right: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 0 20px 0 16px; border-radius: 16px; background: #004e60; color: #b9eaff; font-size: 14px; font-weight: 500; box-shadow: 0 3px 8px rgba(0, 0, 0, .4); }
.m-tile { background: #303538; border-radius: 8px; display: flex; align-items: center; gap: 16px; padding: 10px 16px; }
.m-tile .l { font-size: 16px; }
.m-tile .s { font-size: 14px; color: #bfc8cc; }
.m-tonal { display: flex; align-items: center; justify-content: center; gap: 8px; height: 52px; border-radius: 26px; background: #334a53; color: #cfe6f1; font-size: 15px; font-weight: 500; }
.m-status { display: flex; gap: 6px; font-size: 12px; color: #bfc8cc; margin-top: 8px; line-height: 16px; }
.m-status svg { width: 16px; height: 16px; }
.m-fields { display: flex; gap: 12px; margin-top: 14px; }
.m-field { flex: 1; position: relative; border: 1px solid #899296; border-radius: 4px; background: #1b2124; padding: 14px 12px 12px; font-size: 16px; min-height: 52px; margin-top: 8px; }
.m-field .lab { position: absolute; top: -8px; left: 8px; padding: 0 4px; background: #0f1417; font-size: 12px; color: #bfc8cc; }
.m-field .help { position: absolute; left: 12px; bottom: -18px; font-size: 11px; color: #bfc8cc; white-space: nowrap; }
.m-seg { display: flex; border: 1px solid #899296; border-radius: 20px; overflow: hidden; height: 40px; margin-top: 6px; }
.m-seg span { flex: 1; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 500; border-left: 1px solid #899296; }
.m-seg span:first-child { border-left: 0; }
.m-seg span.on { background: #334a53; color: #cfe6f1; }
.m-check { display: flex; align-items: center; gap: 14px; padding: 7px 0; font-size: 14px; }
.m-check svg { color: #88d0ec; }
.m-check.off svg { color: #899296; }
.m-big { font-size: 28px; font-weight: 700; }
.m-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 12px; margin-top: 16px; }
.m-grid .v { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.m-grid .k { font-size: 11px; color: #bfc8cc; margin-top: 1px; }
.m-bars { display: grid; gap: 7px; }
.m-bars .b { display: grid; grid-template-columns: 34px 1fr 64px; align-items: center; gap: 8px; font-size: 12px; }
.m-bars .b i { display: block; height: 14px; border-radius: 4px; background: #88d0ec; }
.m-bars .b em { font-style: normal; text-align: right; font-variant-numeric: tabular-nums; }
.m-split { display: flex; height: 22px; border-radius: 6px; overflow: hidden; }
.m-legend { display: flex; gap: 16px; margin-top: 8px; font-size: 12px; }
.m-legend span::before { content: ""; display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; background: var(--c); }
.m-sheet { position: absolute; left: 0; right: 0; bottom: 0; background: #171c1f; border-radius: 28px 28px 0 0; padding: 26px 20px 20px; }
.m-sheet::before { content: ""; position: absolute; top: 10px; left: 50%; width: 32px; height: 4px; margin-left: -16px; border-radius: 2px; background: #899296; }
.m-cpa { background: #93000a; color: #ffdad6; border-radius: 10px; padding: 14px; margin-top: 16px; }
.m-cpa .two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.m-cpa .k { font-size: 11px; }
.m-cpa .v { font-size: 16px; font-weight: 700; }
.m-facts { display: grid; grid-template-columns: 130px 1fr; row-gap: 6px; font-size: 14px; margin-top: 18px; }
.m-facts span:nth-child(odd) { font-size: 12px; color: #bfc8cc; }
.m svg.m-map { position: absolute; top: 0; left: 0; width: 360px; height: 709px; }
.m-dim { position: absolute; inset: 0; background: rgba(0, 0, 0, .32); }
.m-pdfbtn { display: flex; align-items: center; justify-content: center; gap: 8px; height: 52px; border-radius: 26px; background: #88d0ec; color: #003544; font-size: 15px; font-weight: 500; margin-top: 22px; }
.m-primary { background: #004e60; color: #b9eaff; border-radius: 12px; padding: 16px; }
.m-headline { background: #004e60; color: #b9eaff; border-radius: 12px; padding: 16px; display: grid; grid-template-columns: 1fr 1fr; }