/* ==========================================================================
   App-spezifische Styles
   ========================================================================== */

/* ---------------- Einstellungen ---------------- */
.cell-slider { padding: 5px 15px !important; }
.cell-slider .slider { flex: 1; }
.set-check { width: 14px; margin-right: 10px; color: var(--tint); display: flex; align-items: center; }
.set-check .gi { width: 14px; height: 11px; }
.cell.net .cell-body { padding-left: 0; }
.set-net { display: flex; align-items: center; gap: 9px; color: var(--text); }
.set-lock { width: 9px; height: 12px; }
.set-wifi { width: 15px; height: 11px; }
.set-info { width: 22px; height: 22px; color: var(--tint); }
.wp-cell { padding: 14px 15px; }
.wp-prevs { flex: 1; display: flex; justify-content: center; gap: 22px; }
.wp-prev { position: relative; width: 96px; height: 170px; background: #333 center / cover; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .2); display: flex; flex-direction: column; align-items: center; }
.pad .wp-prev { width: 140px; height: 105px; }
.wp-prev-clock { color: #fff; font-size: 26px; font-weight: 100; margin-top: 18px; }
.pad .wp-prev-clock { margin-top: 8px; }
.wp-prev-grid { display: grid; grid-template-columns: repeat(4, 12px); gap: 8px 9px; margin-top: 16px; }
.pad .wp-prev-grid { grid-template-columns: repeat(5, 11px); margin-top: 10px; gap: 7px 12px; }
.wp-prev-grid i { width: 12px; height: 12px; border-radius: 3px; background: rgba(255, 255, 255, .55); }
.wp-cat .cell-body { padding: 10px 0; }
.wp-thumbs { display: flex; gap: 6px; margin-top: 8px; }
.wp-thumb { background: #333 center / cover; aspect-ratio: 9 / 16; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .25); }
.wp-thumb.small { width: 44px; }
.wp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 2px; }
.pad .wp-grid { grid-template-columns: repeat(5, 1fr); }
.wp-preview { position: absolute; inset: 0; z-index: 900; overflow: hidden; color: #fff; background: #000; }
.wp-pv-clock { position: absolute; top: calc(var(--sb) + 30px); left: 0; right: 0; text-align: center; }
.pad .wp-pv-clock .ls-time { font-size: 120px; }
.wp-pv-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 64px; display: flex; justify-content: space-between; align-items: center; padding: 0 22px; background: linear-gradient(transparent, rgba(0, 0, 0, .35)); }
.wp-pv-bar button { font-size: 18px; color: #fff; padding: 10px; }
.legal { white-space: pre-wrap; padding: 20px; font-size: 15px; line-height: 1.5; color: var(--text); user-select: text; -webkit-user-select: text; }

/* ---------------- Musik ---------------- */
.np-btn { display: none !important; font-size: 15px; gap: 5px; }
.has-np .np-btn { display: flex !important; }
.np-chev { width: 7px; height: 12px; }
.music-list .cell-img.art { width: 44px; height: 44px; }
.music-list .cell-img.art-l { width: 64px; height: 64px; margin: 0 14px 0 0; }
.music-list .artist .cell-title, .music-list .cell.has-art-l .cell-title { font-weight: 600; }
.music-list .artist { padding-left: 0; }
.music-list .artist::after { left: 78px; }
.music-list .cell { padding-left: 15px; }
.music-list .cell-img.art-l + .cell-body .cell-title { font-weight: 600; font-size: 17px; }
.music-list .cell-img.art-l + .cell-body .cell-sub { font-size: 13px; color: var(--text); opacity: .75; }
.mosaic { width: 56px; height: 56px; display: grid; grid-template-columns: 1fr 1fr; margin: 6px 12px 6px 0; flex: none; }
.mosaic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pl-head { display: flex; gap: 14px; align-items: center; padding: 14px 15px; border-bottom: .5px solid var(--sep); }
.pl-head .mosaic { width: 100px; height: 100px; margin: 0; }
.pl-t { font-size: 18px; font-weight: 600; }
.pl-s { font-size: 13px; color: var(--text2); margin-top: 4px; }
.shuffle-cell .cell-title { color: var(--tint); }
.shuf-ic { width: 22px; height: 16px; color: var(--tint); }
.trk-n { width: 22px; margin-right: 10px; color: var(--text2); font-size: 15px; text-align: right; flex: none; }
.eqi { display: none; width: 12px; height: 12px; margin-right: 6px; color: var(--tint); vertical-align: 0; }
.song.playing .eqi { display: inline-flex; }
.song.playing .trk-n { visibility: hidden; position: relative; }
.song.playing .eqi .b1 { animation: eqb 0.9s ease-in-out infinite alternate; transform-origin: bottom; transform-box: fill-box; }
.song.playing .eqi .b2 { animation: eqb 0.7s ease-in-out -.3s infinite alternate; transform-origin: bottom; transform-box: fill-box; }
.song.playing .eqi .b3 { animation: eqb 0.8s ease-in-out -.5s infinite alternate; transform-origin: bottom; transform-box: fill-box; }
.song.paused .eqi rect { animation-play-state: paused !important; }
@keyframes eqb { from { transform: scaleY(.25); } to { transform: scaleY(1); } }
.al-head { display: flex; gap: 14px; padding: 14px 15px; border-bottom: .5px solid var(--sep); align-items: flex-start; }
.al-head img { width: 110px; height: 110px; object-fit: cover; flex: none; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .1); }
.al-head.small img { width: 72px; height: 72px; }
.al-t { font-size: 17px; font-weight: 600; margin-top: 2px; }
.al-a { font-size: 15px; margin-top: 3px; }
.al-s { font-size: 13px; color: var(--text2); margin-top: 5px; }
.az-index { position: absolute; right: 2px; top: calc(var(--sb) + var(--nb) + 8px); display: flex; flex-direction: column; font-size: 10px; font-weight: 600; color: var(--tint); line-height: 1.32; text-align: center; }
.more-row .cell-icon { color: var(--tint); }
.np-page .page-scroll { padding-top: calc(var(--sb) + var(--nb)); }
.np-count { font-size: 15px; font-weight: 600; }
.np { position: absolute; inset: calc(var(--sb) + var(--nb)) 0 0 0; display: flex; flex-direction: column; background: var(--bg); }
.np-art { position: relative; width: 100%; aspect-ratio: 1; max-height: calc(100% - 210px); margin: 0 auto; perspective: 1400px; flex: none; }
.phone .np-art { width: min(100%, calc(100dvh - var(--sb) - var(--nb) - 215px)); }
.np-flip { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.3, .7, .3, 1); }
.np-flip.flipped { transform: rotateY(180deg); }
.np-face, .np-back { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; }
.np-front { width: 100%; height: 100%; object-fit: cover; display: block; background: #ddd; }
.np-back { transform: rotateY(180deg); background: var(--bg); color: var(--text); display: flex; flex-direction: column; box-shadow: inset 0 0 0 .5px var(--sep); }
.np-back-h { padding: 12px 15px; border-bottom: .5px solid var(--sep); display: flex; flex-direction: column; }
.np-back-h b { font-weight: 600; font-size: 15px; }
.np-back-h span { color: var(--text2); font-size: 13px; }
.np-back-l { overflow-y: auto; flex: 1; }
.np-back-r { width: 100%; display: grid; grid-template-columns: 26px 1fr auto; gap: 8px; padding: 11px 15px; text-align: left; font-size: 15px; border-bottom: .5px solid var(--sep); }
.np-back-r span:first-child, .np-back-r span:last-child { color: var(--text2); }
.np-back-r.cur span { color: var(--tint) !important; }
.np-info { position: absolute; inset: 0; background: rgba(0, 0, 0, .62); color: #fff; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .3s; pointer-events: none; text-align: center; }
.np-info.show { opacity: 1; }
.np-info-in { display: flex; flex-direction: column; gap: 6px; font-size: 14px; padding: 20px; }
.np-info-in b { font-size: 18px; font-weight: 500; }
.np-stars { letter-spacing: 6px; color: rgba(255, 255, 255, .85); font-size: 16px; margin-top: 6px; }
.np-loading { position: absolute; inset: 0; display: none; flex-direction: column; gap: 10px; align-items: center; justify-content: center; background: rgba(0, 0, 0, .35); color: #fff; font-size: 13px; }
.np-loading.show { display: flex; }
.np-panel { flex: 1; display: flex; flex-direction: column; justify-content: space-evenly; padding: 0 18px 4px; min-height: 0; }
.np-scrub { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--text2); letter-spacing: 0; }
.np-scrub > span { min-width: 34px; }
.np-scrub > span:last-child { text-align: right; }
.np-bar { position: relative; flex: 1; height: 26px; cursor: pointer; touch-action: none; }
.np-line { position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: #d4d4d8; }
.np-done { position: absolute; left: 0; top: 0; bottom: 0; background: #8e8e93; }
.np-head { position: absolute; top: 4px; width: 2px; height: 18px; margin-left: -1px; background: var(--tint); }
.np-titles { text-align: center; }
.np-title { font-size: 17px; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np-sub { font-size: 13px; color: var(--text); opacity: .75; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np-ctrls { display: flex; justify-content: center; align-items: center; gap: 15%; color: var(--text); }
.np-ctrls .gi { width: 30px; height: 18px; }
.np-pp .gi { width: 22px; height: 24px; }
.np-ctrls button { padding: 6px; }
.np-ctrls button:active { opacity: .3; }
.np-vol { --tint: #3a3a3c; }
html.night .np-vol { --tint: #fff; }
.np-opts { display: flex; justify-content: space-between; }
.np-opt { color: var(--tint); font-size: 12px; padding: 4px 8px; border-radius: 4px; letter-spacing: 0; }
.np-opt.on { background: var(--tint); color: #fff; }
.pad .np { flex-direction: row; align-items: center; justify-content: center; gap: 5vw; padding: 3vh 5vw 4vh; }
.pad .np-art { width: min(46vw, calc(100dvh - var(--sb) - var(--nb) - 8vh)); max-height: none; margin: 0; }
.pad .np-panel { flex: 0 1 420px; height: min(420px, 70%); }

/* ---------------- Credits (iTunes Store) ---------------- */
.st-feat { padding-bottom: 20px; }
/* Slideshow oben in der Credits-App */
.st-hero { height: 212px; color: #fff; background: #1c1c1e; }
.pad .st-hero { height: 250px; }
.hero { height: 100%; display: flex; flex-direction: column; padding: 13px 15px 24px; color: #fff; text-align: left; background: linear-gradient(120deg, #34aadc, #5856d6); }
.pad .hero { padding: 20px 56px 28px; }   /* Platz für die Pfeile links/rechts */
.hero-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.hero-k { font-size: 11px; font-weight: 500; letter-spacing: .1em; opacity: .85; }
.hero-src { font-size: 11px; opacity: .6; white-space: nowrap; }
.hero-tt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.hero-tt b, .hero-tt small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0; }
.hero-tt b { font-size: 15px; font-weight: 500; }
.hero-tt small { font-size: 12px; opacity: .72; }
.hero-big { font-size: 58px; font-weight: 200; line-height: 1; letter-spacing: -.02em; }
.pad .hero-big { font-size: 76px; }
.hero-sub { font-size: 15px; font-weight: 300; line-height: 1.3; }
.hero-sub em { font-style: normal; font-weight: 500; color: #7ef0d0; }
/* 1: Top 3 */
.hero-rows { flex: 1; display: flex; flex-direction: column; justify-content: space-around; margin-top: 4px; }
.hero-row { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; color: #fff; }
.hero-row:active, .hero-mini:active { opacity: .6; }
.hero-n { width: 12px; font-size: 17px; font-weight: 200; text-align: center; opacity: .85; }
.hero-row img { width: 42px; height: 42px; object-fit: cover; flex: none; box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
.pad .hero-row img { width: 50px; height: 50px; }
.hero-pl { font-size: 15px; font-weight: 300; font-variant-numeric: tabular-nums; text-align: right; display: flex; flex-direction: column; }
.hero-pl small { font-size: 10px; opacity: .65; }
.pad .hero-pl { font-size: 18px; }
.pad .hero-pl small { font-size: 11px; }
.hero-stats { display: flex; justify-content: center; gap: 26px; text-align: center; }
.pad .hero-stats { gap: 44px; }
.hero-stat span { display: block; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; opacity: .6; }
.hero-stat b { font-size: 16px; font-weight: 300; font-variant-numeric: tabular-nums; }
.pad .hero-stat b { font-size: 20px; }
.hero-stat em { font-style: normal; font-size: 12px; color: #7ef0d0; }
/* 2: Top 5 % */
.hero-rank { background: radial-gradient(circle at 82% 18%, rgba(126, 240, 208, .28), rgba(126, 240, 208, 0) 55%), linear-gradient(135deg, #0c1a1d, #12403b 60%, #1a6a5c); }
.hero-mid { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; }
.hero-rank .hero-mid { gap: 2px; }
.hero-rank .hero-big { color: #7ef0d0; font-size: 52px; }
.pad .hero-rank .hero-big { font-size: 72px; }
.hero-rank .hero-sub { font-size: 16px; }
/* 3: Credits + gefragte Titel */
.hero-cred { flex-direction: row; gap: 16px; background: linear-gradient(135deg, #1c1c1e, #3a3a3e); }
.hero-l { flex: 0 0 40%; display: flex; flex-direction: column; gap: 6px; }
.hero-l .hero-big { margin-top: auto; }
.hero-l .hero-sub { font-size: 13px; margin-bottom: auto; }
.pad .hero-l .hero-sub { font-size: 16px; }
.hero-r { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.hero-mini { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; color: #fff; }
.hero-mini img { width: 30px; height: 30px; object-fit: cover; flex: none; }
.pad .hero-mini img { width: 38px; height: 38px; }
.hero-mini .hero-tt b { font-size: 13px; }
.hero-mini .hero-tt small { font-size: 11px; }
.hero-r .hero-mini:first-of-type { margin-top: auto; }
.hero-r .hero-mini:last-child { margin-bottom: auto; }
/* 4: Kennzahlen */
.hero-sum { background: linear-gradient(135deg, #1ad6fd, #1d62f0); }
.hero-grid { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.hero-tile { display: flex; flex-direction: column; justify-content: space-between; padding: 7px 10px; border-radius: 6px; background: rgba(255, 255, 255, .14); min-width: 0; }
.hero-tile span { font-size: 11px; opacity: .8; }
.hero-tile b { font-size: 26px; font-weight: 200; line-height: 1.1; white-space: nowrap; }
.pad .hero-tile b { font-size: 34px; }
.st-sec { padding: 12px 0 4px; border-bottom: .5px solid var(--sep); }
.st-sh { display: flex; justify-content: space-between; align-items: center; padding: 0 15px 8px; }
.st-sh b { font-size: 17px; font-weight: 500; }
.st-sh button { color: var(--tint); font-size: 15px; display: flex; align-items: center; gap: 5px; }
.st-sh .gi { width: 7px; height: 12px; }
.st-row { display: flex; gap: 12px; overflow-x: auto; padding: 0 15px 10px; scroll-snap-type: x proximity; scroll-padding: 0 15px; scrollbar-width: none; cursor: grab; }
.st-row::-webkit-scrollbar { display: none; }
.st-row.dragging { scroll-snap-type: none; cursor: grabbing; }
.st-row.dragging .st-tile { pointer-events: none; }
.st-sec .hs-wrap { --hs-h: 100px; }
.pad .st-sec .hs-wrap { --hs-h: 140px; }
.st-tile { flex: none; width: 100px; text-align: left; scroll-snap-align: start; }
.pad .st-tile { width: 140px; }
.st-tile img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .12); }
.st-tt { font-size: 12px; margin-top: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.25; }
.st-ta { font-size: 11px; color: var(--text2); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-chart { display: flex; flex-direction: column; }
.st-crow { display: flex; align-items: center; gap: 12px; padding: 8px 15px; text-align: left; border-bottom: .5px solid var(--sep); }
.st-cn { width: 18px; text-align: center; color: var(--text2); font-size: 15px; flex: none; }
.st-crow img { width: 64px; height: 64px; object-fit: cover; flex: none; }
.st-cm { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.st-cm b { font-weight: 500; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-cm span { font-size: 13px; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-pill { flex: none; border: 1px solid var(--tint); color: var(--tint); border-radius: 4px; padding: 3px 7px; font-size: 11px; font-weight: 600; text-transform: uppercase; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: 0; }
.st-dpage, .st-dpage .page-scroll { background: var(--alb, #222); }
.st-detail { min-height: 100%; background: var(--alb); color: #fff; }
.st-dh { display: flex; gap: 16px; padding: 18px 15px; }
.st-dh img { width: 120px; height: 120px; object-fit: cover; flex: none; box-shadow: 0 8px 24px rgba(0, 0, 0, .4); }
.pad .st-dh { padding: 30px; gap: 26px; }
.pad .st-dh img { width: 200px; height: 200px; }
.st-dm { display: flex; flex-direction: column; gap: 3px; min-width: 0; align-items: flex-start; }
.st-dm b { font-size: 18px; font-weight: 600; }
.pad .st-dm b { font-size: 26px; }
.st-dm span { font-size: 14px; opacity: .85; }
.st-dy { font-size: 12px !important; opacity: .65 !important; }
.st-stars { letter-spacing: 3px; font-size: 12px !important; opacity: .7 !important; }
.st-price { margin-top: 8px; border: 1px solid #fff; border-radius: 4px; padding: 5px 10px; font-size: 13px; font-weight: 600; color: #fff; letter-spacing: 0; }
.st-price:active { background: rgba(255, 255, 255, .2); }
.st-segwrap { padding: 0 15px 12px; border-bottom: .5px solid rgba(255, 255, 255, .15); }
.st-seg { width: 100%; --tint: #fff; }
.st-seg .seg-b.sel { color: var(--alb); }
.st-tracks { display: flex; flex-direction: column; padding-left: 15px; }
.st-tr { display: flex; align-items: center; gap: 12px; padding: 10px 15px 10px 0; text-align: left; border-bottom: .5px solid rgba(255, 255, 255, .15); color: #fff; }
.st-tn { width: 20px; color: rgba(255, 255, 255, .6); font-size: 15px; text-align: center; }
.st-tt2 { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.st-tt2 b { font-weight: 500; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-tt2 small { font-size: 12px; opacity: .6; }
.st-tr.na .st-tt2 b { opacity: .6; }
.st-tb { flex: none; border: 1px solid rgba(255, 255, 255, .85); border-radius: 4px; font-size: 9px; font-weight: 600; padding: 3px 6px; line-height: 1.1; width: 64px; text-align: center; letter-spacing: 0; display: flex; justify-content: center; }
.st-tb .gi { width: 10px; height: 11px; }
.st-tr.na .st-tb { border-color: transparent; opacity: .7; }
.st-tr.playing .st-tn { color: transparent; background: radial-gradient(circle, #fff 30%, transparent 32%); border-radius: 50%; animation: st-pulse 1s ease-in-out infinite alternate; }
.st-tr.playing .st-tb { background: #fff; color: var(--alb); }
@keyframes st-pulse { from { opacity: .4; } to { opacity: 1; } }
.st-details { padding: 16px 15px 30px; font-size: 15px; line-height: 1.5; }
.st-details p { margin: 0 0 16px; opacity: .92; user-select: text; -webkit-user-select: text; }
.st-details dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0 0 20px; font-size: 14px; }
.st-details dt { opacity: .6; }
.st-details dd { margin: 0; }
.st-share { display: inline-flex; align-items: center; gap: 8px; color: #fff; border: 1px solid rgba(255, 255, 255, .6); border-radius: 4px; padding: 6px 12px; font-size: 14px; }
.st-share .gi { width: 13px; height: 17px; }
.st-related { display: flex; flex-wrap: wrap; gap: 14px; padding: 16px 15px 30px; }
.st-related .st-tt { color: #fff; }
.st-related .st-ta { color: rgba(255, 255, 255, .6); }
.st-trend { display: flex; flex-direction: column; }
.st-q { text-align: left; padding: 12px 15px; font-size: 17px; color: var(--tint); border-bottom: .5px solid var(--sep); }

/* ---------------- Videos ---------------- */
.vd-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 12px; padding: 16px 12px 30px; }
.pad .vd-grid { grid-template-columns: repeat(4, 1fr); gap: 28px 22px; padding: 28px 30px; }
.vd-item { text-align: left; min-width: 0; }
.vd-thumb { position: relative; aspect-ratio: 16 / 9; background: #222; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .15); overflow: hidden; }
.vd-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vd-dur { position: absolute; right: 5px; bottom: 5px; background: rgba(0, 0, 0, .65); color: #fff; font-size: 11px; padding: 1px 5px; border-radius: 3px; letter-spacing: 0; }
.vd-item:active .vd-thumb { opacity: .7; }
.vd-t { font-size: 13px; font-weight: 600; margin-top: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vd-s { font-size: 12px; color: var(--text2); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vd-hero { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.pad .vd-detail { max-width: 900px; margin: 0 auto; padding: 24px 30px; }
.vd-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vd-playbig { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; border: 2px solid #fff; color: #fff; display: grid; place-items: center; background: rgba(0, 0, 0, .25); }
.vd-playbig .gi { width: 22px; height: 24px; margin-left: 4px; }
.vd-info { padding: 16px 15px 30px; }
.vd-info h2 { font-size: 22px; font-weight: 500; margin: 0; }
.vd-meta { color: var(--text2); font-size: 13px; margin-top: 4px; }
.vd-info p { font-size: 15px; line-height: 1.45; margin: 14px 0; user-select: text; -webkit-user-select: text; }
.vd-roles { display: flex; flex-direction: column; gap: 2px; font-size: 14px; padding: 10px 0; border-top: .5px solid var(--sep); border-bottom: .5px solid var(--sep); }
.vd-roles b { font-size: 12px; text-transform: uppercase; color: var(--text2); font-weight: 400; }
.vd-playbtn { margin-top: 18px; display: inline-flex; align-items: center; gap: 8px; color: var(--tint); border: 1px solid var(--tint); border-radius: 5px; padding: 7px 16px; font-size: 15px; }
.vd-playbtn .gi { width: 11px; height: 12px; }
.vp { position: absolute; inset: 0; z-index: 900; background: #000; color: #fff; }
.vp-stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.vp-stage video, .vp-stage iframe, .vp-fake { width: 100%; height: 100%; border: 0; display: block; object-fit: contain; background: #000; }
.vp.fill .vp-stage video { object-fit: cover; }
.vp-top { position: absolute; top: 0; left: 0; right: 0; height: 44px; display: flex; align-items: center; gap: 12px; padding: 0 10px; background: rgba(28, 28, 30, .78); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); transition: opacity .3s; }
.vp-done { font-size: 16px; color: #fff; font-weight: 500; padding: 6px; }
.vp-title { flex: 1; text-align: center; font-size: 15px; }
.vp-scrub { flex: 1; display: flex; align-items: center; gap: 10px; font-size: 11px; color: rgba(255, 255, 255, .8); letter-spacing: 0; }
.vp-scrub > span { min-width: 34px; text-align: center; }
.vp-bar { position: relative; flex: 1; height: 30px; cursor: pointer; touch-action: none; }
.vp-track { position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; background: rgba(255, 255, 255, .3); border-radius: 2px; }
.vp-track i { position: absolute; left: 0; top: 0; bottom: 0; background: #fff; border-radius: 2px; }
.vp-bar b { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .4); }
.vp-fit { width: 30px; height: 30px; color: #fff; padding: 6px; }
.vp-bottom { position: absolute; left: 50%; bottom: 18px; width: min(92%, 420px); transform: translateX(-50%); background: rgba(28, 28, 30, .78); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-radius: 10px; padding: 10px 18px 6px; transition: opacity .3s; }
.vp-ctrls { display: flex; justify-content: center; align-items: center; gap: 60px; }
.vp-ctrls .gi { width: 30px; height: 18px; }
.vp-ctrls .vp-pp .gi { width: 22px; height: 24px; }
.vp-volrow { display: flex; align-items: center; gap: 10px; }
.vp-vi { width: 12px; height: 14px; }
.vp-ap { width: 20px; height: 17px; }
.vp-vol { flex: 1; --tint: #fff; }
.vp-vol .sl-track { background: rgba(255, 255, 255, .3); }
.vp.hide-ui .vp-top, .vp.hide-ui .vp-bottom, .vp.hide-ui .vp-note { opacity: 0; pointer-events: none; }
.vp-note { position: absolute; left: 0; right: 0; top: 56px; text-align: center; font-size: 12px; color: rgba(255, 255, 255, .6); padding: 0 20px; transition: opacity .3s; }

/* ---------------- Fotos ---------------- */
.ph-mh { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: flex-end; padding: 8px 8px 6px; background: var(--plainh); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.ph-mh > div { display: flex; flex-direction: column; min-width: 0; }
.ph-mh b { font-size: 14px; font-weight: 600; }
.ph-mh span { font-size: 12px; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-md { flex: none; margin-left: 10px; }
.ph-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; padding-bottom: 1px; }
.pad .ph-grid { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
.ph-cell { position: relative; aspect-ratio: 1; overflow: hidden; background: #ddd; }
.ph-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph-cell:active img { opacity: .7; }
.ph-vid { position: absolute; left: 4px; bottom: 3px; width: 16px; height: 11px; color: #fff; filter: drop-shadow(0 0 2px rgba(0, 0, 0, .6)); }
.ph-count { text-align: center; color: var(--text2); font-size: 15px; padding: 20px 0 30px; }
.ph-mini { display: grid; grid-template-columns: repeat(auto-fill, minmax(36px, 1fr)); gap: 1px; padding: 0 0 12px; }
.ph-mini button { aspect-ratio: 1; overflow: hidden; }
.ph-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph-arow { min-height: 88px; }
.ph-arow::after { left: 103px !important; }
.ph-athumb { width: 75px; height: 75px; margin: 6px 14px 6px 0; background: var(--group); flex: none; overflow: hidden; }
.ph-athumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph-athumb.app { background: none; display: grid; place-items: center; }
.ph-athumb.app .appicon { --icon: 60px; }
.pv { position: absolute; inset: 0; z-index: 800; background: #fff; transition: background .25s; }
html.night .pv { background: #000; }
.pv.dark { background: #000; }
.pv-strip { position: absolute; inset: 0; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; }
.pv-strip.dragging { scroll-snap-type: none; }
.pv-slide { flex: 0 0 100%; height: 100%; scroll-snap-align: start; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pv-slide img, .pv-slide video { max-width: 100%; max-height: 100%; object-fit: contain; transition: transform .3s; user-select: none; }
.pv-slide img.zoomed { transform: scale(2.2); }
.pv-ghost { position: absolute; z-index: 801; object-fit: cover; pointer-events: none; }
.pv-top { position: absolute; top: 0; left: 0; right: 0; height: calc(var(--sb) + var(--nb)); padding-top: var(--sb); display: flex; align-items: center; justify-content: space-between; background: var(--bar); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: 0 .5px 0 var(--bar-line); transition: opacity .25s; }
.pv-title { position: absolute; left: 90px; right: 90px; bottom: 0; height: var(--nb); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.2; }
.pv-title b { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.pv-title span { font-size: 11px; color: var(--text2); }
.pv-bot { position: absolute; left: 0; right: 0; bottom: 0; height: 44px; display: flex; justify-content: space-between; align-items: center; padding: 0 6px; background: var(--bar); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: 0 -.5px 0 var(--bar-line); transition: opacity .25s; }
.pv-play { width: 18px !important; height: 20px !important; }
.pv-cap { position: absolute; left: 0; right: 0; bottom: 44px; padding: 10px 15px; font-size: 14px; color: var(--text); background: var(--bar); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); transition: opacity .25s; text-align: center; }
.pv.dark .pv-top, .pv.dark .pv-bot, .pv.dark .pv-cap { opacity: 0; pointer-events: none; }
.ss { position: absolute; inset: 0; z-index: 850; background: #000; cursor: pointer; }
.ss-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 1.2s ease; }
.ss-img.on { opacity: 1; }
.ss-hint { position: absolute; bottom: 20px; left: 0; right: 0; text-align: center; color: rgba(255, 255, 255, .5); font-size: 12px; animation: fadeout 3s forwards; }
@keyframes fadeout { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }

/* ---------------- Kontakte / Profil ---------------- */
.ct-card { padding-bottom: 40px; background: var(--bg); min-height: 100%; }
.pad .ct-card { max-width: 760px; }
.ct-head { display: flex; align-items: center; gap: 16px; padding: 16px 15px 18px; }
.ct-photo { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; flex: none; }
.pad .ct-photo { width: 100px; height: 100px; }
.ct-name { min-width: 0; }
.ct-name > div:first-child { font-size: 22px; line-height: 1.2; }
.ct-name b { font-weight: 600; }
.ct-job { font-size: 14px; color: var(--text); margin-top: 3px; line-height: 1.3; }
.ct-co { font-size: 14px; color: var(--text2); margin-top: 1px; }
.ct-fields { border-top: .5px solid var(--sep); margin-left: 15px; }
.ct-field { padding: 9px 15px 9px 0; border-bottom: .5px solid var(--sep); }
.ct-field.tap { cursor: pointer; }
.ct-field.tap:active { background: var(--hl); margin-left: -15px; padding-left: 15px; }
.ct-l { font-size: 13px; color: var(--text2); letter-spacing: 0; }
.ct-v { font-size: 17px; margin-top: 2px; line-height: 1.35; word-break: break-word; }
.ct-field.tap .ct-v { color: var(--tint); }   /* blau = antippbar (Link) */
.ct-list { padding-bottom: 4px; }
.ct-li { display: flex; align-items: baseline; gap: 10px; width: 100%; text-align: left; padding: 5px 0; font: inherit; color: inherit; }
.ct-li:active { opacity: .4; }
.ct-li-n { font-size: 17px; color: var(--tint); flex: none; }
.ct-li-n small { font-size: 13px; color: var(--text2); }
.ct-li-s { font-size: 14px; color: var(--text2); margin-left: auto; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ct-li.two { flex-direction: column; align-items: flex-start; gap: 1px; }
.ct-li.two .ct-li-s { margin-left: 0; text-align: left; white-space: normal; }
.ct-field.notes .ct-v, .ct-field.multi .ct-v { font-size: 15px; line-height: 1.5; user-select: text; -webkit-user-select: text; }
.ct-actions { margin: 30px 0 0 15px; border-top: .5px solid var(--sep); display: flex; flex-direction: column; }
.ct-actions button { text-align: left; padding: 12px 0; font-size: 17px; color: var(--tint); border-bottom: .5px solid var(--sep); }
.ct-actions button:active { opacity: .4; }
.ct-mini { width: 36px; height: 36px; border-radius: 50%; margin-right: 12px; flex: none; }
.ct-me { font-size: 12px; color: var(--text2); }
.ct-row b { font-weight: 600; }
.ct-index { top: calc(var(--sb) + var(--nb) + 52px); }

/* ---------------- Sampler (Sprachmemos) ---------------- */
.app-memos { background: #000; }
.vm { position: absolute; inset: 0; display: flex; flex-direction: column; background: #000; color: #fff; }
.vm.drop::after { content: ''; position: absolute; inset: 8px; border: 2px dashed var(--blue); border-radius: 10px; pointer-events: none; }
.vm-top { flex: none; display: flex; flex-direction: column; padding-top: var(--sb); height: min(52%, 360px); }
.vm-title { text-align: center; font-size: 17px; font-weight: 500; padding: 11px 0 8px; }
.vm-ruler { position: relative; height: 22px; margin: 0 22px 0 0; border-bottom: .5px solid rgba(255, 255, 255, .25); font-size: 10px; color: #8e8e93; overflow: hidden; letter-spacing: 0; }
.vm-ruler span { position: absolute; bottom: 4px; transform: translateX(-50%); white-space: nowrap; }
.vm-ruler span::after { content: ''; position: absolute; left: 50%; bottom: -5px; width: .5px; height: 4px; background: #8e8e93; }
.vm-wavebox { position: relative; flex: 1; min-height: 70px; margin-right: 22px; border-bottom: .5px solid rgba(255, 255, 255, .25); cursor: pointer; }
.vm-wavebox canvas, .vm-editor canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.vm-head { position: absolute; top: -22px; bottom: 0; width: 1px; margin-left: -.5px; background: #007aff; pointer-events: none; }
.vm-head::before, .vm-head::after { content: ''; position: absolute; left: -3px; width: 7px; height: 7px; border-radius: 50%; background: #007aff; }
.vm-head::before { top: -3px; } .vm-head::after { bottom: -3px; }
.vm-db { position: absolute; right: -20px; top: 0; bottom: 0; width: 18px; display: flex; flex-direction: column; justify-content: space-between; font-size: 6.5px; color: #636366; text-align: center; letter-spacing: 0; padding: 2px 0; }
.vm-time { text-align: center; font-size: 34px; font-weight: 200; color: #d1d1d6; padding: 8px 0 2px; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.vm-ctl { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 4px 16px 12px; }
.vm-meta { min-width: 0; }
.vm-name { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vm-date { font-size: 11px; color: #8e8e93; margin-top: 1px; }
.vm-rec { width: 64px; height: 64px; border-radius: 50%; border: 3px solid #fff; display: grid; place-items: center; }
.vm-rec i { width: 52px; height: 52px; border-radius: 50%; background: #ff3b30; transition: all .25s cubic-bezier(.3, .7, .3, 1); }
.vm-rec.on i { width: 26px; height: 26px; border-radius: 4px; }
.vm-done { justify-self: start; margin-left: 18px; font-size: 17px; color: #fff; }
.vm-bottom { flex: 1; min-height: 0; overflow-y: auto; background: var(--bg); color: var(--text); }
.vm-list { background: var(--bg); }
.vm-hint { padding: 16px 20px 30px; font-size: 12px; color: var(--text2); text-align: center; line-height: 1.4; }
.vm-row { border-bottom: .5px solid var(--sep); margin-left: 15px; }
.vm-rmain { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 10px 15px 10px 0; text-align: left; }
.vm-rn { font-size: 17px; }
.vm-rd { font-size: 12px; color: var(--text2); margin-top: 2px; }
.vm-rdur { font-size: 14px; color: var(--text2); font-variant-numeric: tabular-nums; }
.vm-row.sel { background: var(--bg); }
.vm-player { display: flex; align-items: center; gap: 12px; padding: 2px 15px 6px 0; }
.vm-pp { width: 28px; height: 28px; color: var(--text); display: grid; place-items: center; }
.vm-pp .gi { width: 16px; height: 18px; }
.vm-pline { flex: 1; height: 24px; position: relative; cursor: pointer; }
.vm-pline::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: #d4d4d8; }
.vm-pline i { position: absolute; left: 0; top: 50%; height: 2px; margin-top: -1px; background: var(--blue); }
.vm-pline i::after { content: ''; position: absolute; right: -6px; top: -5px; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .3); }
.vm-pt { font-size: 12px; color: var(--text2); min-width: 32px; font-variant-numeric: tabular-nums; }
.vm-acts { display: flex; justify-content: space-between; align-items: center; padding: 4px 15px 12px 0; color: var(--blue); }
.vm-acts button { display: grid; place-items: center; height: 30px; min-width: 30px; font-size: 16px; color: var(--blue); }
.vm-acts .gi { width: 18px; height: 22px; }
.vm-editor { position: absolute; inset: 0; z-index: 50; background: #000; color: #fff; display: flex; flex-direction: column; padding-top: var(--sb); }
.vm-ehead { position: relative; height: 44px; display: flex; align-items: center; justify-content: center; }
.vm-etitle { font-size: 17px; font-weight: 500; max-width: 60%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vm-etop { position: absolute; right: 10px; top: 0; height: 44px; font-size: 17px; color: var(--blue); }
.vm-etop.l { right: auto; left: 10px; color: #fff; }
.vm-editor .vm-ruler { margin: 0 12px; }
.vm-wavebox.edit { margin: 0 12px; flex: 1; min-height: 120px; }
.vm-trim-box { position: absolute; top: -22px; bottom: 0; left: 0; right: 0; display: none; border-left: 2px solid #ff3b30; border-right: 2px solid #ff3b30; pointer-events: none; }
.trimming .vm-trim-box { display: block; }
.trimming .vm-head { display: none; }
.vm-trim-l, .vm-trim-r { position: absolute; top: 0; bottom: 0; width: 34px; pointer-events: auto; cursor: ew-resize; touch-action: none; }
.vm-trim-l { left: -18px; } .vm-trim-r { right: -18px; }
.vm-trim-l::after, .vm-trim-r::after { content: ''; position: absolute; width: 10px; height: 10px; border-radius: 50%; background: #ff3b30; left: 50%; margin-left: -5px; }
.vm-trim-l::after { top: -5px; } .vm-trim-r::after { bottom: -5px; }
.vm-pads { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; padding: 14px 12px 6px; }
.trimming .vm-pads { opacity: .3; pointer-events: none; }
.vm-pad { aspect-ratio: 1; max-height: 64px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .35); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; transition: background .12s; }
.vm-pad b { font-size: 16px; font-weight: 400; }
.vm-pad small { font-size: 9px; color: #8e8e93; }
.vm-pad.hit, .vm-pad:active { background: rgba(255, 255, 255, .85); color: #000; }
.vm-ebar { height: 54px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; flex: none; }
.vm-ebar-mid { flex: 1; display: flex; justify-content: center; }
.vm-eplay { width: 36px; height: 36px; color: #fff; display: grid; place-items: center; }
.vm-eplay .gi { width: 18px; height: 20px; }
.vm-eic { width: 36px; height: 36px; color: var(--blue); display: grid; place-items: center; }
.vm-eic .gi { width: 24px; height: 24px; }
.vm-etxt { font-size: 17px; color: var(--blue); }
.vm-fx { position: absolute; left: 0; right: 0; bottom: 0; max-height: 86%; z-index: 5; background: rgba(28, 28, 30, .96); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border-radius: 12px 12px 0 0; display: flex; flex-direction: column; color: #fff; }
.pad .vm-fx { left: 50%; width: 520px; margin-left: -260px; }
.vm-fxh { display: flex; justify-content: space-between; align-items: center; height: 46px; padding: 0 14px; border-bottom: .5px solid rgba(255, 255, 255, .15); flex: none; }
.vm-fxh b { font-weight: 600; }
.vm-fxh button { color: var(--blue); font-size: 17px; }
.vm-fxh .bold { font-weight: 600; }
.vm-fxbody { overflow-y: auto; padding: 6px 16px 20px; }
.vm-fxrow { padding: 6px 0; border-bottom: .5px solid rgba(255, 255, 255, .1); --tint: #007aff; }
.vm-fxrow .sl-track { background: #48484a; }
.vm-fxl { display: flex; justify-content: space-between; font-size: 14px; }
.vm-fxl span { color: #8e8e93; font-variant-numeric: tabular-nums; }
.vm-fxl b { font-weight: 400; }
.vm-fxrow.swrow { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; }
.vm-fxrow.swrow b { font-weight: 400; font-size: 14px; }
.vm-fxbtns { display: flex; gap: 10px; margin-top: 14px; }
.vm-fxbtns button { flex: 1; border: 1px solid var(--blue); color: var(--blue); border-radius: 6px; padding: 8px; font-size: 15px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.vm-fxbtns .gi { width: 10px; height: 11px; }
.vm-fxnote { font-size: 11px; color: #8e8e93; margin-top: 12px; line-height: 1.4; }
.vm-busy { position: absolute; inset: 0; background: rgba(0, 0, 0, .5); display: grid; place-items: center; border-radius: inherit; }
.pad .vm { flex-direction: row-reverse; }
.pad .vm-top { flex: 1; height: auto; }
.pad .vm-bottom { flex: 0 0 340px; box-shadow: -.5px 0 0 var(--sep); padding-top: var(--sb); }

/* ---------------- Feed (Instagram 2013) ---------------- */
.app-feed { --tint: #3f729b; background: #fff; }
.navbar.bar-ig { background: #3f729b; color: #fff; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.navbar.bar-ig .nb-back, .navbar.bar-ig .nb-btn { color: #fff; }
.ig-logo { font-family: "Grand Hotel", "Snell Roundhand", cursive; font-size: 29px; font-weight: 400; color: #fff; letter-spacing: 0; margin-top: 2px; }
.ig-seg { --tint: #fff; }
.ig-seg .seg-b.sel { color: #3f729b; }
.ig-feed { background: #fff; color: #000; padding-bottom: 20px; }
.pad .ig-feed, .pad .ig-news, .pad .ig-prof { max-width: 612px; margin: 0 auto; }
.ig-post { padding-bottom: 14px; }
.ig-head { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 9px; padding: 7px 10px; background: rgba(255, 255, 255, .96); border-bottom: .5px solid #e3e3e3; }
.ig-av { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: none; }
.ig-who { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.ig-who b { color: #3f729b; font-weight: 600; font-size: 14px; }
.ig-who span { color: #3f729b; font-size: 11px; display: flex; align-items: center; gap: 3px; }
.ig-pin { width: 7px; height: 10px; }
.ig-time { display: flex; align-items: center; gap: 4px; color: #a6a6a6; font-size: 12px; }
.ig-time .gi { width: 11px; height: 11px; }
.ig-media { position: relative; aspect-ratio: 1; background: #eee; overflow: hidden; cursor: pointer; }
.ig-media img, .ig-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.ig-car { width: 100%; height: 100%; }
.ig-car .cr-slide img { width: 100%; height: 100%; object-fit: cover; display: block; -webkit-user-drag: none; }
.ig-car .cr-dots { bottom: 8px; }
.ig-car .cr-dots button::after { box-shadow: 0 0 2px rgba(0, 0, 0, .4); }
.ig-vid { position: absolute; top: 10px; right: 10px; width: 22px; height: 15px; color: #fff; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5)); }
.ig-vid.s { width: 16px; height: 11px; top: 5px; right: 5px; }
.ig-media.nosrc::after { content: 'Video folgt'; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: rgba(0, 0, 0, .65); color: #fff; padding: 8px 14px; border-radius: 6px; font-size: 13px; }
html[lang="en"] .ig-media.nosrc::after { content: 'Video coming soon'; }
.ig-bigheart { position: absolute; left: 50%; top: 50%; width: 90px; height: 82px; margin: -41px 0 0 -45px; color: #fff; opacity: 0; filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .3)); pointer-events: none; }
.ig-bigheart.pop { animation: igpop .9s ease forwards; }
@keyframes igpop { 0% { opacity: 0; transform: scale(.3); } 15% { opacity: .95; transform: scale(1.1); } 30% { transform: scale(.95); } 45%, 75% { opacity: .95; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } }
.ig-actions { display: flex; gap: 6px; padding: 8px 10px 4px; }
.ig-btn { display: inline-flex; align-items: center; gap: 5px; background: #f2f2f2; border-radius: 3px; padding: 5px 9px; font-size: 12px; color: #7c7c7c; font-weight: 600; letter-spacing: 0; }
.ig-btn .gi { width: 14px; height: 13px; }
.ig-btn.on { color: #e1306c; }
.ig-dots { margin-left: auto; }
.ig-dots .gi { width: 16px; height: 4px; }
.ig-body { padding: 4px 10px 0; font-size: 13px; line-height: 1.4; letter-spacing: 0; }
.ig-likes { color: #3f729b; font-weight: 600; display: flex; align-items: center; gap: 5px; margin-bottom: 3px; }
.ig-lh { width: 11px; height: 10px; }
.ig-comments p { margin: 2px 0; user-select: text; -webkit-user-select: text; }
.ig-comments b { color: #3f729b; font-weight: 600; }
.ig-more { color: #a6a6a6; margin: 3px 0; }
.ig-form { display: flex; gap: 8px; margin-top: 8px; }
.ig-input { flex: 1; border: 1px solid #ddd; border-radius: 4px; padding: 6px 8px; font-size: 13px; outline: none; background: #fff; color: #000; }
.ig-form button { color: #3f729b; font-weight: 600; font-size: 13px; }
.ig-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: #fff; }
.ig-grid button { position: relative; aspect-ratio: 1; overflow: hidden; }
.ig-grid img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ig-tabs .tabbar.dark { background: #262626; box-shadow: none; }
.ig-tabs .tb-item { color: #8a8a8a; justify-content: center; padding: 0; }
.ig-tabs .tb-item.sel { color: #fff; }
.ig-tabs .tb-ic { width: 27px; height: 27px; }
.ig-tabs .tb-item:nth-child(3) .tb-ic { width: 44px; height: 32px; padding: 5px 9px; border-radius: 5px; background: #3f729b; color: #fff; }
.ig-tabs .tb-l { display: none; }
.ig-news { background: #fff; color: #000; }
.ig-nrow { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-bottom: .5px solid #eee; font-size: 13px; }
.ig-nrow p { flex: 1; margin: 0; line-height: 1.35; }
.ig-nrow b { color: #3f729b; }
.ig-nthumb { width: 40px; height: 40px; object-fit: cover; flex: none; }
.ig-prof { background: #fff; color: #000; padding: 12px 12px 10px; border-bottom: .5px solid #e3e3e3; }
.ig-ptop { display: flex; gap: 16px; align-items: center; }
.ig-pav { width: 77px; height: 77px; border-radius: 50%; object-fit: cover; flex: none; }
.ig-stats { flex: 1; }
.ig-nums { display: flex; justify-content: space-around; text-align: center; }
.ig-nums div { display: flex; flex-direction: column; }
.ig-nums b { font-size: 16px; font-weight: 600; }
.ig-nums span { font-size: 11px; color: #999; }
.ig-edit { width: 100%; margin-top: 8px; background: #6bb33b; color: #fff; border-radius: 3px; padding: 6px; font-size: 12px; font-weight: 600; }
.ig-bio { margin-top: 12px; font-size: 13px; line-height: 1.4; }
.ig-bio p { margin: 2px 0; }
.ig-bio a { color: #3f729b; text-decoration: none; }

/* ---------------- Mail ---------------- */
.page.has-toolbar .page-scroll { padding-bottom: 44px; }
.app-mail .navc > .page-scroll, .app-mail .ml-inbox .page-scroll { padding-bottom: 44px; }
.ml-listbar { z-index: 700; }
.ml-upd { font-size: 11px; color: var(--text); }
.ml-row { display: flex; width: 100%; text-align: left; padding: 9px 0 10px; position: relative; }
.ml-row::after { content: ''; position: absolute; left: 30px; right: 0; bottom: 0; height: .5px; background: var(--sep); }
.ml-row:active, .ml-row.sel { background: var(--hl); }
.ml-dot { width: 30px; flex: none; display: flex; justify-content: center; padding-top: 6px; }
.ml-row.unread .ml-dot::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--blue); }
.ml-main { flex: 1; min-width: 0; padding-right: 12px; }
.ml-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.ml-top b { font-size: 17px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ml-top span { font-size: 15px; color: var(--text2); display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.ml-chev { width: 7px; height: 12px; color: #c7c7cc; }
.ml-subj { font-size: 15px; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ml-prev { font-size: 15px; color: var(--text2); margin-top: 1px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; }
.ml-box .cell-icon { color: var(--tint); }
.ml-box .cell-icon .gi { width: 22px; height: 22px; }
.ml-msg { padding: 0 15px 30px; }
.pad .ml-msg { max-width: 760px; }
.ml-hdr { padding: 12px 0; border-bottom: .5px solid var(--sep); font-size: 15px; display: flex; flex-direction: column; gap: 6px; }
.ml-k { color: var(--text2); }
.ml-tok { color: var(--tint); }
.ml-s { font-weight: 600; font-size: 17px; margin-top: 6px; }
.ml-d { color: var(--text2); font-size: 13px; }
.ml-body { white-space: pre-wrap; font-size: 16px; line-height: 1.5; padding: 16px 0; user-select: text; -webkit-user-select: text; }
.ml-link { color: var(--tint); border: 1px solid var(--tint); border-radius: 5px; padding: 7px 14px; font-size: 15px; }
.ml-sending { padding: 8px 15px; font-size: 12px; color: var(--text2); text-align: center; border-bottom: .5px solid var(--sep); }
.ml-prog { height: 2px; background: var(--sep); margin-top: 6px; overflow: hidden; }
.ml-prog i { display: block; height: 100%; background: var(--blue); animation: mlprog 1.5s ease-out forwards; }
@keyframes mlprog { from { width: 0; } to { width: 100%; } }
.mc { display: flex; flex-direction: column; min-height: 100%; }
.mc-row { display: flex; align-items: center; gap: 6px; min-height: 44px; margin-left: 15px; padding-right: 10px; border-bottom: .5px solid var(--sep); font-size: 15px; }
.mc-k { color: var(--text2); white-space: nowrap; }
.mc-in { flex: 1; border: 0; outline: 0; background: transparent; font-size: 15px; min-width: 0; color: var(--text); }
.mc-plus { margin-left: auto; width: 22px; height: 22px; color: var(--tint); }
.mc-body { flex: 1; min-height: 260px; border: 0; outline: 0; resize: none; padding: 12px 15px; font-size: 16px; line-height: 1.45; background: transparent; color: var(--text); }

/* ---------------- Nachrichten ---------------- */
.im-row .ml-prev { -webkit-line-clamp: 2; }
.im-page .page-scroll { padding-bottom: 54px; background: var(--bg); }
.im-thread { display: flex; flex-direction: column; padding: 8px 10px 10px; gap: 2px; }
.im-stamp { text-align: center; font-size: 11px; color: var(--text2); margin: 12px 0 6px; letter-spacing: 0; }
.im-stamp b { font-weight: 600; }
.im-b { position: relative; max-width: 75%; padding: 7px 13px 8px; border-radius: 17px; font-size: 16px; line-height: 1.3; word-wrap: break-word; white-space: pre-wrap; user-select: text; -webkit-user-select: text; letter-spacing: 0; }
.pad .im-b { max-width: 60%; }
.im-b.them { align-self: flex-start; background: #e5e5ea; color: #000; }
html.night .im-b.them { background: #2c2c2e; color: #fff; }
.im-b.me { align-self: flex-end; background: linear-gradient(#21a2ff, #0a7aff); color: #fff; }
.im-b.tail { margin-bottom: 6px; }
.im-b.tail.them { border-bottom-left-radius: 4px; }
.im-b.tail.me { border-bottom-right-radius: 4px; }
.im-b.failed { opacity: .6; }
.im-link { color: inherit; text-align: left; font: inherit; text-decoration: underline; text-underline-offset: 2px; }
.im-deliv { align-self: flex-end; font-size: 11px; color: var(--text2); margin: -2px 4px 4px; }
.im-fail { align-self: flex-end; display: flex; align-items: center; gap: 4px; color: var(--red); font-size: 11px; }
.im-fail .gi { width: 14px; height: 14px; }
.im-b.typing { display: flex; gap: 4px; padding: 11px 13px; }
.im-b.typing i { width: 7px; height: 7px; border-radius: 50%; background: #8e8e93; animation: imdot 1.2s infinite; }
.im-b.typing i:nth-child(2) { animation-delay: .2s; } .im-b.typing i:nth-child(3) { animation-delay: .4s; }
@keyframes imdot { 0%, 60%, 100% { opacity: .3; } 30% { opacity: 1; } }
.im-bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 600; display: flex; align-items: flex-end; gap: 8px; padding: 7px 8px; background: var(--bar); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: 0 -.5px 0 var(--bar-line); }
.im-cam { width: 30px; height: 30px; color: #8e8e93; flex: none; }
.im-cam .gi { width: 26px; height: 21px; }
.im-input { flex: 1; min-height: 30px; max-height: 110px; resize: none; border: .5px solid #c8c8cd; border-radius: 6px; padding: 5px 8px; font-size: 16px; outline: none; background: var(--field); color: var(--text); line-height: 1.25; }
.im-send { font-size: 17px; font-weight: 600; color: #8e8e93; padding: 4px 2px; }
.im-send.on { color: var(--blue); }

/* ---------------- Telefon ---------------- */
.kp { position: absolute; inset: 0 0 var(--tb) 0; display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; padding: calc(var(--sb) + 6px) 0 6px; background: var(--bg); }
.kp-top { display: flex; flex-direction: column; align-items: center; min-height: 64px; justify-content: center; }
.kp-num { font-size: 34px; font-weight: 300; letter-spacing: .02em; min-height: 42px; max-width: 92vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kp-add { color: var(--tint); font-size: 14px; visibility: hidden; }
.kp-grid { display: grid; grid-template-columns: repeat(3, 78px); gap: min(2.4vh, 16px) 26px; }
.kp-key { width: 78px; height: 78px; border-radius: 50%; border: 1.5px solid var(--text); display: flex; flex-direction: column; align-items: center; justify-content: center; transition: background .15s, color .15s; }
.kp-key:active { background: var(--text); color: var(--bg); }
.kp-d { font-size: 34px; font-weight: 200; line-height: 1; }
.kp-l { font-size: 9px; letter-spacing: .15em; margin-top: 2px; font-weight: 500; }
.kp-bottom { display: grid; grid-template-columns: repeat(3, 78px); gap: 26px; align-items: center; justify-items: center; }
.kp-call { width: 78px; height: 78px; border-radius: 50%; background: #4cd964; color: #fff; display: grid; place-items: center; }
.kp-call .gi { width: 34px; height: 34px; }
.kp-call:active { background: #3cb850; }
.kp-del { width: 34px; height: 24px; color: var(--text2); visibility: hidden; }
.call { position: absolute; inset: 0; z-index: 900; color: #fff; display: flex; flex-direction: column; align-items: center; padding-top: calc(var(--sb) + 50px); overflow: hidden; }
.call-bg { position: absolute; inset: -40px; background: #222 center / cover; filter: blur(30px) brightness(.55) saturate(1.3); z-index: -1; }
.call-name { font-size: 38px; font-weight: 200; padding: 0 20px; text-align: center; }
.call-st { font-size: 17px; font-weight: 300; margin-top: 6px; opacity: .9; }
.call-grid { display: grid; grid-template-columns: repeat(3, 80px); gap: 24px 30px; margin-top: auto; margin-bottom: 40px; }
.call-b { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 13px; color: #fff; }
.call-c { width: 78px; height: 78px; border-radius: 50%; border: 1.5px solid #fff; display: grid; place-items: center; transition: background .15s; }
.call-c .gi { width: 34px; height: 34px; }
.call-b.on .call-c { background: #fff; color: #333; }
.call-b.dis { opacity: .35; cursor: default; }
.call-end { width: min(330px, 86%); height: 66px; margin-bottom: 30px; border-radius: 6px; background: #ff3b30; color: #fff; font-size: 26px; font-weight: 300; }
.ph-info { width: 22px; height: 22px; color: var(--tint); margin-left: 10px; }
.ph-missed .cell-title { color: var(--red); }
.vmail { display: flex; align-items: center; padding: 12px 15px 12px 0; border-bottom: .5px solid var(--sep); }
.vm-m { flex: 1; display: flex; flex-direction: column; }
.vm-m b { font-weight: 600; font-size: 17px; }
.vm-m span { color: var(--text2); font-size: 13px; }
.vm-play { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--tint); color: var(--tint); display: grid; place-items: center; }
.vm-play .gi { width: 12px; height: 13px; }
.vm-note { padding: 14px 15px; font-size: 12px; color: var(--text2); }

/* ---------------- Safari ---------------- */
.sf { position: absolute; inset: 0; background: var(--bg); }
.sf-page { position: absolute; inset: 0; overflow-y: auto; padding: calc(var(--sb) + 52px) 0 60px; background: var(--group); }
.sf-top { position: absolute; top: 0; left: 0; right: 0; z-index: 10; padding: calc(var(--sb) + 4px) 8px 8px; display: flex; align-items: center; gap: 8px; background: var(--bar); -webkit-backdrop-filter: blur(20px) saturate(1.8); backdrop-filter: blur(20px) saturate(1.8); box-shadow: 0 .5px 0 var(--bar-line); }
.sf-field { position: relative; flex: 1; height: 29px; border-radius: 5px; background: rgba(142, 142, 147, .18); display: flex; align-items: center; }
.sf-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 15px; pointer-events: none; }
.sf-input { position: absolute; inset: 0; width: 100%; border: 0; outline: 0; background: transparent; padding: 0 30px 0 10px; font-size: 15px; color: transparent; caret-color: var(--tint); }
.sf-top.edit .sf-input { color: var(--text); }
.sf-top.edit .sf-label, .sf-top.edit .sf-reload { display: none; }
.sf-reload { position: absolute; right: 6px; width: 16px; height: 18px; color: var(--text); }
.sf-cancel { display: none; color: var(--tint); font-size: 16px; }
.sf-top.edit .sf-cancel { display: block; }
.sf-prog { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--blue); opacity: 0; }
.sf-prog.run { animation: sfprog 1.6s ease-out forwards; }
@keyframes sfprog { 0% { width: 0; opacity: 1; } 80% { width: 100%; opacity: 1; } 100% { width: 100%; opacity: 0; } }
.sf-sec { padding: 18px 20px 10px; font-size: 13px; text-transform: uppercase; color: var(--text3); letter-spacing: 0; }
.sf-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px 10px; padding: 0 16px; }
.pad .sf-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); max-width: 900px; padding: 0 40px; }
.sf-fav { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 11px; color: var(--text); min-width: 0; }
.sf-fav span { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-ic { width: 57px; height: 57px; border-radius: 12px; display: grid; place-items: center; color: #fff; font-size: 26px; font-weight: 300; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .1); }
.sf-fav:active .sf-ic { opacity: .6; }
.sf-note { padding: 0 20px; font-size: 14px; color: var(--text2); line-height: 1.45; }
.sf-tb .nb-ic { width: 22px; height: 22px; }
.sf-bm .cell-icon { color: var(--tint); }
.sf-tabs { position: absolute; inset: 0; z-index: 900; background: #333; display: flex; flex-direction: column; }
.sf-tstack { flex: 1; display: flex; align-items: flex-start; justify-content: center; padding-top: calc(var(--sb) + 30px); perspective: 900px; }
.sf-tcard { width: 88%; max-width: 560px; height: 70%; background: var(--group); border-radius: 6px; overflow: hidden; transform-origin: 50% 0; box-shadow: 0 -10px 30px rgba(0, 0, 0, .4); text-align: left; }
.sf-tt { height: 30px; background: #f7f7f7; color: #000; font-size: 12px; display: flex; align-items: center; justify-content: center; }
.sf-tbody { padding: 20px 0; }
.sf-grid.mini .sf-ic { width: 44px; height: 44px; font-size: 20px; justify-self: center; }
.sf-tbar { height: 44px; display: flex; justify-content: space-between; align-items: center; padding: 0 16px; color: #fff; font-size: 17px; background: rgba(0, 0, 0, .3); }
.sf-tbar .bold { font-weight: 600; }
.sf-plus { width: 22px; height: 22px; }

/* ---------------- Uhr ---------------- */
.wc-list { background: var(--bg); }
.wc-row { display: flex; align-items: center; gap: 12px; padding: 10px 15px; border-bottom: .5px solid var(--sep); }
.wc-l { flex: 1; min-width: 0; }
.wc-city { font-size: 24px; font-weight: 300; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wc-sub { font-size: 12px; color: var(--text2); margin-top: 1px; }
.wc-time { font-size: 20px; font-weight: 300; color: var(--text2); font-variant-numeric: tabular-nums; }
.wc-cbox { width: 50px; height: 50px; flex: none; }
.wc-clock svg { width: 50px; height: 50px; display: block; }
.al-row .cell-body { padding: 8px 12px 8px 0; }
.al-t { font-size: 44px; font-weight: 200; line-height: 1.1; font-variant-numeric: tabular-nums; }
.al-l { font-size: 13px; }
.al-row.off .al-t, .al-row.off .al-l { color: var(--text2); }
.clk-page { position: absolute; inset: 0 0 var(--tb) 0; display: flex; flex-direction: column; background: var(--bg); }
.clk-title { flex: none; height: calc(var(--sb) + var(--nb)); padding-top: var(--sb); display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 500; background: var(--bar); box-shadow: 0 .5px 0 var(--bar-line); }
.sw { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.sw-disp { background: var(--group); padding: 18px 20px 26px; text-align: right; border-bottom: .5px solid var(--sep); }
.pad .sw-disp, .pad .tm-disp { text-align: center; }
.sw-lap { font-size: 20px; font-weight: 300; color: var(--text2); font-variant-numeric: tabular-nums; }
.sw-main { font-size: clamp(60px, 21vw, 110px); font-weight: 100; letter-spacing: -.02em; text-align: center; font-variant-numeric: tabular-nums; line-height: 1.05; }
.sw-ctl { display: flex; justify-content: space-around; padding: 16px 0; background: var(--group); border-bottom: .5px solid var(--sep); }
.sw-btn { width: 80px; height: 80px; border-radius: 50%; background: var(--bg); font-size: 17px; box-shadow: 0 0 0 1px var(--sep); }
.sw-btn.green { color: #4cd964; } .sw-btn.red { color: #ff3b30; } .sw-btn.gray { color: var(--text); }
.sw-btn.dis { opacity: .4; pointer-events: none; }
.sw-laps { flex: 1; overflow-y: auto; }
.sw-lrow { display: flex; justify-content: space-between; padding: 11px 20px; border-bottom: .5px solid var(--sep); font-size: 17px; font-variant-numeric: tabular-nums; }
.sw-lrow.max span:last-child { color: #ff3b30; } .sw-lrow.min span:last-child { color: #4cd964; }
.tm { flex: 1; display: flex; flex-direction: column; background: var(--group); }
.pk { position: relative; display: flex; justify-content: center; gap: 10px; height: 216px; background: var(--bg); border-bottom: .5px solid var(--sep); overflow: hidden; }
.pk-band { position: absolute; left: 0; right: 0; top: 92px; height: 32px; border-top: .5px solid var(--sep); border-bottom: .5px solid var(--sep); pointer-events: none; }
.pk-wrap { position: relative; display: flex; align-items: center; width: 130px; }
.pk-col { height: 216px; width: 60px; overflow-y: auto; scroll-snap-type: y mandatory; -webkit-mask-image: linear-gradient(transparent, #000 35%, #000 65%, transparent); mask-image: linear-gradient(transparent, #000 35%, #000 65%, transparent); }
.pk-pad { height: 92px; }
.pk-item { height: 32px; line-height: 32px; text-align: right; font-size: 22px; color: var(--text2); scroll-snap-align: start; scroll-margin-top: 92px; padding-right: 8px; transition: color .15s; }
.pk-item.sel { color: var(--text); }
.pk-suf { font-size: 17px; font-weight: 500; }
.tm-disp { font-size: clamp(60px, 21vw, 110px); font-weight: 100; text-align: center; padding: 50px 0; background: var(--bg); border-bottom: .5px solid var(--sep); font-variant-numeric: tabular-nums; }
.tm-sound { display: flex; justify-content: space-between; align-items: center; padding: 12px 15px; margin-top: 30px; background: var(--cell); border-top: .5px solid var(--sep); border-bottom: .5px solid var(--sep); font-size: 17px; }
.tm-snd { display: flex; align-items: center; gap: 8px; color: var(--text2); }
.tm-snd .gi { width: 8px; height: 13px; color: #c7c7cc; }
.tm .sw-ctl { border: 0; padding: 24px 0; }

/* ---------------- Rechner ---------------- */
.app-calc { background: #000; }
.calc { position: absolute; inset: 0; display: flex; flex-direction: column; background: #000; color: #fff; padding-top: var(--sb); }
.calc-disp { flex: 1; min-height: 90px; display: flex; align-items: flex-end; justify-content: flex-end; padding: 0 16px 6px; font-size: 86px; font-weight: 100; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; font-variant-numeric: tabular-nums; }
.calc-keys { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: min(23vw, 13dvh); gap: 1px; background: #000; }
.calc-k { background: #dcdcdf; color: #000; font-size: 34px; font-weight: 200; transition: background .08s; }
.calc-k:active { background: #b4b4b8; }
.calc-k.fn { background: #c7c7cc; font-size: 28px; }
.calc-k.fn:active { background: #a3a3a8; }
.calc-k.op { background: #f7931e; color: #fff; font-size: 40px; }
.calc-k.op:active { background: #d9790c; }
.calc-k.op.sel { box-shadow: inset 0 0 0 1.5px #000; }
.calc-k.zero { grid-column: span 2; text-align: left; padding-left: 12%; }

/* ---------------- Kamera ---------------- */
.app-camera { background: #000; }
.cam { position: absolute; inset: 0; display: flex; flex-direction: column; background: #000; color: #fff; }
.cam-top { flex: none; height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; font-size: 13px; position: relative; }
.cam-top button { display: flex; align-items: center; gap: 5px; color: #fff; }
.cam-fl { width: 11px; height: 17px; }
.cam-flip .gi { width: 28px; height: 22px; }
.cam-rect { position: absolute; left: 50%; transform: translateX(-50%); display: none; background: #ff3b30; padding: 2px 8px; border-radius: 3px; font-variant-numeric: tabular-nums; }
.recording .cam-rect { display: block; }
.recording .cam-hdr { visibility: hidden; }
.cam-vf { position: relative; flex: 1; min-height: 0; overflow: hidden; background: #111; display: flex; align-items: center; justify-content: center; }
.cam-video { width: 100%; height: 100%; object-fit: cover; }
.cam-video.mirror, .cam-fxgrid video.mirror { transform: scaleX(-1); }
.cam.square .cam-vf::before, .cam.square .cam-vf::after { content: ''; position: absolute; left: 0; right: 0; height: calc((100% - min(100%, 100cqw)) / 2); background: #000; z-index: 2; }
.cam-vf { container-type: size; }
.cam.square .cam-vf::before { top: 0; } .cam.square .cam-vf::after { bottom: 0; }
.cam-grid { position: absolute; inset: 0; display: none; pointer-events: none; z-index: 3; }
.cam-grid.on { display: block; }
.cam-grid i { position: absolute; background: rgba(255, 255, 255, .45); }
.cam-grid i:nth-child(1) { left: 33.33%; top: 0; bottom: 0; width: 1px; } .cam-grid i:nth-child(2) { left: 66.66%; top: 0; bottom: 0; width: 1px; }
.cam-grid i:nth-child(3) { top: 33.33%; left: 0; right: 0; height: 1px; } .cam-grid i:nth-child(4) { top: 66.66%; left: 0; right: 0; height: 1px; }
.cam-msg { position: absolute; left: 20px; right: 20px; top: 50%; transform: translateY(-50%); text-align: center; font-size: 15px; color: rgba(255, 255, 255, .8); opacity: 0; transition: opacity .3s; pointer-events: none; z-index: 4; }
.cam-msg.show { opacity: 1; }
.cam-bottom { flex: none; padding: 8px 0 14px; background: #000; overflow: hidden; }
.cam-modes { display: flex; justify-content: center; gap: 22px; font-size: 13px; letter-spacing: .04em; transition: transform .3s ease; margin-bottom: 10px; }
.cam-modes button { color: #fff; }
.cam-modes button.sel { color: #ffcc00; }
.cam-row { display: flex; justify-content: space-between; align-items: center; padding: 0 22px; }
.cam-thumb { width: 44px; height: 44px; border-radius: 3px; background: #222 center / cover; }
.cam-thumb:not(.has) { visibility: hidden; }
.cam-shutter { width: 66px; height: 66px; border-radius: 50%; border: 4px solid #fff; display: grid; place-items: center; }
.cam-shutter i { width: 52px; height: 52px; border-radius: 50%; background: #fff; transition: all .2s; }
.cam-shutter:active i { background: #ccc; }
.cam.video .cam-shutter i { background: #ff3b30; }
.cam.recording .cam-shutter i { width: 26px; height: 26px; border-radius: 5px; }
.cam-fx { width: 44px; height: 44px; color: #fff; display: grid; place-items: center; }
.cam-fx .gi { width: 28px; height: 28px; }
.cam-fx.on { color: #ffcc00; }
.cam-flashov { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; z-index: 10; }
.cam-flashov.go { animation: camflash .35s ease-out; }
.cam-flashov.white { background: #fff; }
@keyframes camflash { 0% { opacity: 1; } 100% { opacity: 0; } }
.cam-fxgrid { position: absolute; inset: 0; z-index: 5; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 2px; background: #000; }
.cam-fxgrid button { position: relative; overflow: hidden; }
.cam-fxgrid video { width: 100%; height: 100%; object-fit: cover; }
.cam-fxgrid span { position: absolute; left: 0; right: 0; bottom: 4px; text-align: center; font-size: 11px; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .8); }
.cam-fxgrid button.sel span { color: #ffcc00; }
.pad .cam { flex-direction: row; }
.pad .cam-top { position: absolute; top: 0; left: 0; right: 120px; z-index: 6; background: rgba(0, 0, 0, .35); }
.pad .cam-bottom { width: 120px; display: flex; flex-direction: column-reverse; justify-content: center; padding: 0; }
.pad .cam-modes { flex-direction: column; align-items: center; gap: 14px; margin: 20px 0 0; transform: none !important; }
.pad .cam-row { flex-direction: column; gap: 30px; padding: 0; }

/* ---------------- Notizen ---------------- */
.app-notes .page, .app-notes .page-scroll, .app-notes .navc { background: #fbfaf6 var(--paper); }
html.night .app-notes .page, html.night .app-notes .page-scroll, html.night .app-notes .navc { background: #1c1b18; }
.app-notes .navbar, .app-notes .toolbar { background: rgba(251, 250, 246, .9); }
html.night .app-notes .navbar, html.night .app-notes .toolbar { background: rgba(28, 27, 24, .9); }
.app-notes .tbl.plain, .app-notes .cell { background: transparent; }
.nt-row .cell-title { font-size: 17px; }
.nt-row .cell-detail { font-size: 15px; }
.nt-count { text-align: center; color: var(--text2); font-size: 14px; padding: 18px 0; }
.nt-paper { padding: 10px 18px 40px; min-height: 100%; }
.pad .nt-paper { padding: 14px 40px 40px; max-width: 820px; }
.nt-date { text-align: center; color: var(--text2); font-size: 13px; margin-bottom: 12px; }
.nt-body { white-space: pre-wrap; font-size: 17px; line-height: 1.55; color: #2b2a26; text-shadow: 0 1px 0 rgba(255, 255, 255, .8); outline: none; min-height: 200px; user-select: text; -webkit-user-select: text; }
html.night .nt-body { color: #eae7dc; text-shadow: none; }
.nt-ro { margin-top: 26px; font-size: 12px; color: var(--text2); text-align: center; }

/* ---------------- Kalender ---------------- */
.cal-year { gap: 0; }
.cal-year::before { content: ''; width: 13px; height: 22px; margin-right: 6px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 22'%3E%3Cpath d='M11.5 1.5L2 11l9.5 9.5' fill='none' stroke='black' stroke-width='2.6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 22'%3E%3Cpath d='M11.5 1.5L2 11l9.5 9.5' fill='none' stroke='black' stroke-width='2.6'/%3E%3C/svg%3E") center / contain no-repeat; }
.cal { position: relative; }
.cal-wd { position: sticky; top: 0; z-index: 3; display: grid; grid-template-columns: repeat(7, 1fr); font-size: 11px; text-align: center; padding: 4px 0; background: var(--bar); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: 0 .5px 0 var(--sep); }
.pad .cal-body { display: grid; grid-template-columns: 1fr 340px; align-items: start; }
.pad .cal-list { position: sticky; top: 24px; border-left: .5px solid var(--sep); min-height: 60vh; }
.cal-m { padding-bottom: 8px; }
.cal-mt { font-size: 20px; font-weight: 400; padding: 10px 0 4px 0; margin-left: calc(100% / 7 * 0 + 12px); }
.cal-mt.cur { color: var(--tint); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-d, .cal-e { height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 6px; border-top: .5px solid var(--sep); }
.pad .cal-d, .pad .cal-e { height: 74px; }
.cal-e { border-top-color: transparent; }
.cal-d span { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 18px; font-weight: 300; }
.cal-d.we span { color: var(--text2); }
.cal-d.today span { color: var(--tint); font-weight: 500; }
.cal-d.sel span { background: var(--text); color: var(--bg); font-weight: 500; }
.cal-d.today.sel span { background: var(--tint); color: #fff; }
.cal-d i { width: 6px; height: 6px; border-radius: 50%; background: #8e8e93; margin-top: 3px; }
.cal-list { padding-bottom: 20px; border-top: .5px solid var(--sep); }
.cal-lh { padding: 12px 15px 6px; font-size: 13px; font-weight: 600; color: var(--text2); text-transform: uppercase; letter-spacing: 0; }
.cal-ev { display: flex; gap: 12px; align-items: center; width: 100%; text-align: left; padding: 10px 15px; border-bottom: .5px solid var(--sep); }
.cal-ev > div { display: flex; flex-direction: column; min-width: 0; }
.cal-ev b { font-weight: 500; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-ev span { font-size: 13px; color: var(--text2); }
.cal-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.cal-none { padding: 10px 15px; color: var(--text2); font-size: 15px; }
.cal-tb .nb-btn { font-size: 16px; }
.cal-det { display: flex; flex-direction: column; gap: 4px; padding: 22px 15px 6px; background: var(--group); }
.cal-det b { font-size: 20px; font-weight: 500; }
.cal-det span { font-size: 14px; color: var(--text3); }
.cal-cal { display: inline-flex; align-items: center; gap: 6px; }
.cal-cal i { width: 10px; height: 10px; border-radius: 50%; }
/* Safari: Webseiten (Prodpedia) & Tabs */
.sf-web { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; padding: calc(var(--sb) + 45px) 0 44px; background: #fff; overscroll-behavior: contain; display: none; }
.sf.sf-onweb .sf-web { display: block; }
.sf.sf-onweb .sf-page { display: none; }
.sf.sf-onweb.sf-editing .sf-page { display: block; z-index: 5; }
.sf-ic.pp-fav { color: #000; font-family: Georgia, 'Times New Roman', serif; font-weight: 400; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .3); }
.sf-tstack { position: relative; display: block; }
.sf-tcard { position: absolute; left: 6%; right: 6%; width: auto; top: calc(var(--sb) + 26px); }
.pad .sf-tcard { left: 50%; right: auto; width: 560px; margin-left: -280px; }
.sf-tbody.web { height: 100%; background: #fff; color: #202122; padding: 16px; }
.pp-mini b { display: block; font-family: Georgia, 'Times New Roman', serif; font-weight: 400; letter-spacing: .14em; font-size: 13px; color: #000; border-bottom: 1px solid #a2a9b1; padding-bottom: 6px; margin-bottom: 8px; }
.pp-mini div { font-family: Georgia, 'Times New Roman', serif; font-size: 22px; }

/* ---------- Prodpedia (Enzyklopädie-Look, bleibt hell wie eine echte Webseite) ---------- */
.pp { background: #fff; color: #202122; font-family: 'Helvetica Neue', Inter, Arial, sans-serif; font-size: 15px; line-height: 1.6; letter-spacing: 0; min-height: 100%; -webkit-user-select: text; user-select: text; }
.pp a { color: #0645ad; text-decoration: none; cursor: pointer; }
.pp a:active, .pp a:hover { text-decoration: underline; }
.pp a.pp-link.new { color: #ba0000; }
.pp-ext::after { content: '\2197'; font-size: .72em; margin-left: 1px; vertical-align: .15em; }
.pp-refs .pp-ext::after, .pp-table .pp-ext::after { content: none; }
.pp-head { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: #f8f9fa; border-bottom: 1px solid #c8ccd1; }
.pad .pp-head { padding: 10px 30px; }
.pp-logo { display: flex; align-items: center; gap: 8px; color: #000; text-align: left; flex: none; }
.pp-mark { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-family: Georgia, 'Times New Roman', serif; font-size: 21px; color: #202122;
  background: radial-gradient(circle at 35% 30%, #fff 0, #e6e8eb 55%, #c8ccd1 100%); box-shadow: inset 0 0 0 1px #a2a9b1; }
.pp-word b { display: block; font-family: Georgia, 'Times New Roman', serif; font-weight: 400; letter-spacing: .14em; font-size: 15px; line-height: 1.1; }
.pp-word small { display: block; font-family: Georgia, 'Times New Roman', serif; font-size: 10px; color: #54595d; }
.phone .pp-word small { display: none; }
.pp-sbox { flex: 1; min-width: 0; position: relative; }
.pp-q { width: 100%; height: 30px; border: 1px solid #a2a9b1; border-radius: 2px; padding: 0 8px; font-size: 14px; background: #fff; color: #202122; outline: none; -webkit-appearance: none; appearance: none; }
.pp-q:focus { border-color: #36c; box-shadow: inset 0 0 0 1px #36c; }
.pp-res { position: absolute; left: 0; right: 0; top: 31px; z-index: 4; display: flex; flex-direction: column; background: #fff; border: 1px solid #a2a9b1; box-shadow: 0 2px 6px rgba(0, 0, 0, .15); }
.pp-res:empty { display: none; }
.pp-res button { text-align: left; padding: 6px 9px; color: #0645ad; font-size: 14px; }
.pp-res button:active { background: #eaf3ff; }
.pp-art { padding: 10px 14px 20px; }
.pad .pp-art { padding: 18px 30px 30px; max-width: 1040px; }
.pp-title { font-family: Georgia, 'Linux Libertine', 'Times New Roman', serif; font-weight: 400; font-size: 28px; line-height: 1.25; margin: 4px 0 2px; padding-bottom: 4px; border-bottom: 1px solid #a2a9b1; }
.pad .pp-title { font-size: 32px; }
.pp-sub { font-size: 12.5px; color: #54595d; margin-bottom: 10px; }
.pp-hat { font-style: italic; font-size: 13px; color: #54595d; padding: 0 0 8px 16px; }
.pp p { margin: 0 0 10px; }
.pp-ref { font-size: 10.5px; line-height: 1; vertical-align: super; font-weight: 400; }
.pp-ref a { padding: 0 1px; }
.pp-info { width: 100%; margin: 0 0 12px; border: 1px solid #a2a9b1; background: #f8f9fa; border-collapse: collapse; font-size: 13px; line-height: 1.45; }
.pad .pp-info { float: right; clear: right; width: 300px; margin: 0 0 12px 18px; }
.pp-info th, .pp-info td { padding: 4px 8px; vertical-align: top; text-align: left; }
.pp-info th { width: 42%; font-weight: 600; }
.pp-info .pp-ib-title { text-align: center; font-size: 17px; background: #eaecf0; padding: 7px; width: auto; }
.pp-info .pp-ib-img { text-align: center; padding: 6px 8px; }
.pp-ib-img img { display: block; width: 100%; max-width: 220px; margin: 0 auto; }
.pp-ib-cap { font-size: 12px; padding-top: 4px; }
.pp-info .pp-ib-sec { text-align: center; background: #eaecf0; width: auto; }
.pp-toc { display: inline-block; max-width: 100%; border: 1px solid #a2a9b1; background: #f8f9fa; padding: 8px 14px 8px 12px; font-size: 14px; margin: 6px 0 12px; }
.pp-toc-h { text-align: center; }
.pp-toc-t { color: #0645ad; font-size: 13px; }
.pp-toc ol { list-style: none; margin: 6px 0 0; padding: 0; }
.pp-toc ol ol { margin: 0; padding-left: 20px; }
.pp-toc .pp-tn { color: #202122; }
.pp-h2 { font-family: Georgia, 'Linux Libertine', 'Times New Roman', serif; font-weight: 400; font-size: 22px; line-height: 1.3; margin: 22px 0 8px; padding-bottom: 2px; border-bottom: 1px solid #a2a9b1; overflow: hidden; }
.pp-h3 { font-size: 16px; font-weight: 700; margin: 14px 0 6px; overflow: hidden; }
.pp-thumb { float: right; clear: right; width: 46%; max-width: 240px; margin: 2px 0 10px 12px; padding: 3px; border: 1px solid #c8ccd1; background: #f8f9fa; font-size: 12px; line-height: 1.35; }
.pp-thumb.sm { width: 34%; max-width: 150px; }
.pp-thumb img { display: block; width: 100%; cursor: zoom-in; }
.pp-thumb figcaption { padding: 4px 2px 1px; }
.pp-art ul { margin: 0 0 10px; padding-left: 20px; }
.pp-art li { margin: 2px 0; }
.pp-tablewrap { clear: both; overflow-x: auto; margin: 6px 0 12px; }
.pp-table { min-width: 100%; border-collapse: collapse; font-size: 13px; line-height: 1.4; background: #f8f9fa; border: 1px solid #a2a9b1; }
.pp-table th, .pp-table td { border: 1px solid #a2a9b1; padding: 4px 7px; text-align: left; vertical-align: top; }
.pp-table th { background: #eaecf0; }
.pp-table td:last-child { text-align: right; white-space: nowrap; }
.pp-table td:first-child { white-space: nowrap; }
.pp-refs { font-size: 12.5px; line-height: 1.5; padding-left: 24px; margin: 0; }
.pp-refs li { margin: 3px 0; }
.pp-up { color: #0645ad; }
.pp-hl { animation: pphl 1.8s ease-out; }
@keyframes pphl { from { background: #dbe9ff; } to { background: transparent; } }
.pp-cats { clear: both; margin-top: 20px; padding: 6px 9px; border: 1px solid #a2a9b1; background: #f8f9fa; font-size: 13px; }
.pp-cats span { color: #0645ad; }
.pp-foot { clear: both; padding: 12px 14px 26px; border-top: 1px solid #c8ccd1; background: #f8f9fa; font-size: 12px; color: #54595d; }
.pad .pp-foot { padding: 14px 30px 30px; }
.pp-foot p { margin: 0 0 6px; }
.pp-cols { columns: 2; column-gap: 20px; }
.pad .pp-cols { columns: 3; }
.pp-lb { position: absolute; inset: 0; z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; background: rgba(0, 0, 0, .92); pointer-events: auto; cursor: zoom-out; }
.pp-lb img { max-width: 100%; max-height: 80%; object-fit: contain; }
.pp-lbc { margin-top: 12px; color: #fff; font-size: 14px; text-align: center; letter-spacing: 0; }
.sf-input::placeholder { color: transparent; }
.sf-top.edit .sf-input::placeholder { color: #8e8e93; }
.ct-nick { font-size: 15px; color: var(--text2); margin-top: 1px; }
.np-src { display: block; margin: 4px auto 0; font-size: 11px; color: var(--tint); letter-spacing: 0; }
.np-src[hidden] { display: none; }
.st-role { font-size: 12px !important; opacity: .8 !important; margin-top: 2px; }
.st-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.st-btns .st-price { margin-top: 0; }
.st-spot { display: inline-flex; align-items: center; gap: 5px; }
.st-spot .gi, .st-share .gi:first-child { width: 14px; height: 14px; }
.st-tdur { flex: none; font-size: 13px; color: rgba(255, 255, 255, .6); font-variant-numeric: tabular-nums; }
.st-note { padding: 10px 15px 20px 0; font-size: 11px; color: rgba(255, 255, 255, .55); }
.st-team { margin: 4px 0 18px; padding-top: 12px; border-top: .5px solid rgba(255, 255, 255, .15); }
.st-team-h { font-size: 12px; text-transform: uppercase; opacity: .6; margin-bottom: 8px; letter-spacing: .02em; }
.st-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.st-detail { transition: background-color .4s; }
.st-dplays { font-size: 12px !important; opacity: .85 !important; font-weight: 500; }
.st-warn { background: rgba(255, 204, 0, .18); border-radius: 6px; padding: 8px 10px; font-size: 13px; }
.st-projects { display: grid; grid-template-columns: 1fr; gap: 10px; padding: 14px 15px 6px; }
.pad .st-projects { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); padding: 20px 30px 8px; }
.st-pcard { display: flex; align-items: center; gap: 14px; padding: 12px; text-align: left; border-radius: 10px; background: var(--group); }
.st-pcard img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: none; }
.st-pcard div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.st-pcard b { font-size: 17px; font-weight: 600; }
.st-pcard span { font-size: 13px; color: var(--text2); }
.st-pcard small { font-size: 12px; color: var(--tint); margin-top: 2px; }
.st-pcard:active { opacity: .7; }