/* ===== Showcase: Desktop + Tablet + Handy ===== */
.sc { display: grid; grid-template-columns: 330px 1fr; gap: 56px; align-items: start; }
.sc-list { border-top: 1px solid var(--line); }
.sc-item { display: grid; grid-template-columns: 38px 1fr; gap: 6px; padding: 22px 0; border-bottom: 1px solid var(--line); cursor: pointer; color: var(--g5); position: relative; transition: color .4s; }
.sc-item:hover { color: var(--g6); }
.sc-item.on { color: var(--white); }
.sc-item.on::before { content: ''; position: absolute; left: -20px; top: 22px; bottom: 22px; width: 2px; background: var(--white); }
.sc-item .n { font: 500 12px var(--mono); padding-top: 7px; }
.sc-item h3 { font-size: 22px; letter-spacing: -.03em; font-weight: 600; line-height: 1.15; }
.sc-item small { display: block; font-size: 14px; opacity: .65; margin-top: 3px; }
.sc-item .more { grid-column: 2; display: none; margin-top: 12px; font-size: 14px; }
.sc-item .more a { text-decoration: underline; text-underline-offset: 3px; }
.sc-item.on .more { display: block; }

.sc-tabs { display: inline-flex; padding: 3px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line); margin-bottom: 18px; }
.sc-tabs button { padding: 9px 16px; border-radius: 8px; font-size: 14px; color: var(--g5); transition: background .3s, color .3s; }
.sc-tabs button:hover { color: var(--white); }
.sc-tabs button.on { background: var(--white); color: #000; }

.stage { position: relative; container-type: inline-size; aspect-ratio: 1.55; border-radius: 20px; overflow: hidden;
  background: radial-gradient(ellipse at 50% 0%, #1b1b1b, #0b0b0b 70%); box-shadow: inset 0 0 0 1px var(--line); }
.stage::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 6cqw 6cqw; opacity: .35;
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000, transparent 75%); mask-image: radial-gradient(ellipse at 50% 40%, #000, transparent 75%); }
.dev { position: absolute; transition: left .9s var(--ease), top .9s var(--ease), width .9s var(--ease), opacity .6s, transform .9s var(--ease); background: #0b0b0b; box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), 0 3cqw 8cqw rgba(0,0,0,.75); }
.scr { position: relative; overflow: hidden; width: 100%; background: #111; transition: opacity .25s; }
.stage.fade .scr { opacity: 0; }
.scr .pg, .scr .mb { position: absolute; left: 0; top: 0; transform-origin: 0 0; transform: scale(var(--s, .3)); }
.scr .pg { transition: none; }

.dev-desk { left: 5%; top: 8%; width: 74%; border-radius: 1.1cqw; overflow: hidden; }
.dev-desk .bar { height: 2.6cqw; display: flex; align-items: center; gap: .6cqw; padding: 0 1.2cqw; background: #1a1a1a; }
.dev-desk .bar i { width: .8cqw; height: .8cqw; border-radius: 50%; background: #4a4a4a; }
.dev-desk .bar b { margin-left: 1cqw; height: 1.4cqw; width: 22cqw; max-width: 50%; border-radius: .4cqw; background: #2a2a2a; }
.dev-desk .scr { aspect-ratio: 3 / 2; }
.dev-tab { left: 70%; top: 37%; width: 27%; padding: .9cqw; border-radius: 2.2cqw; }
.dev-tab .scr { aspect-ratio: 820 / 1100; border-radius: 1.3cqw; }
.dev-ph { left: 61.5%; top: 50%; width: 13.5%; padding: .65cqw; border-radius: 2.4cqw; }
.dev-ph .scr { aspect-ratio: 390 / 844; border-radius: 1.8cqw; }
.dev-ph::after { content: ''; position: absolute; left: 50%; top: 1.3cqw; width: 22%; height: .7cqw; transform: translateX(-50%); border-radius: 1cqw; background: #000; z-index: 3; }

.stage[data-view="desktop"] .dev-desk { left: 8%; top: 8%; width: 84%; }
.stage[data-view="desktop"] .dev-tab, .stage[data-view="desktop"] .dev-ph { opacity: 0; transform: scale(.9); pointer-events: none; }
.stage[data-view="tablet"] .dev-tab { left: 30%; top: 5%; width: 40%; }
.stage[data-view="tablet"] .dev-desk, .stage[data-view="tablet"] .dev-ph { opacity: 0; transform: scale(.9); pointer-events: none; }
.stage[data-view="phone"] .dev-ph { left: 38%; top: 4%; width: 24%; }
.stage[data-view="phone"] .dev-desk, .stage[data-view="phone"] .dev-tab { opacity: 0; transform: scale(.9); pointer-events: none; }

/* Tablet- und Handy-Layouts der Mini-Websites */
.mb { --k: 1; display: flex; flex-direction: column; font-family: 'Inter Tight', sans-serif; line-height: 1.15; background: var(--bg); color: var(--fg); overflow: hidden; text-align: left; }
.mb * { margin: 0; }
.mb.tab { --k: 1.55; }
.mb nav { display: flex; justify-content: space-between; align-items: center; padding: calc(20px * var(--k)) calc(22px * var(--k)); font-size: calc(14px * var(--k)); }
.mb nav b { font-size: calc(18px * var(--k)); letter-spacing: -.02em; }
.mb .lk { display: none; gap: calc(22px * var(--k)); opacity: .7; }
.mb.tab .lk { display: flex; }
.mb .bg { display: block; width: calc(22px * var(--k)); height: calc(10px * var(--k)); background: linear-gradient(currentColor, currentColor) top / 100% 2px no-repeat, linear-gradient(currentColor, currentColor) bottom / 100% 2px no-repeat; }
.mb.tab .bg { display: none; }
.mb .mh { padding: 0 calc(22px * var(--k)); margin-top: calc(10px * var(--k)); }
.mb h2 { font-size: calc(46px * var(--k)); font-weight: 600; letter-spacing: -.045em; line-height: .98; }
.mb h2 i { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; }
.mb p { margin-top: calc(14px * var(--k)); font-size: calc(15px * var(--k)); opacity: .65; line-height: 1.4; }
.mb .bt { display: flex; gap: calc(10px * var(--k)); margin-top: calc(18px * var(--k)); flex-wrap: wrap; }
.mb .bt span { padding: calc(12px * var(--k)) calc(18px * var(--k)); border-radius: calc(9px * var(--k)); background: var(--bb); color: var(--bf); font-weight: 500; font-size: calc(15px * var(--k)); }
.mb .bt span.o { background: none; color: inherit; box-shadow: inset 0 0 0 calc(1.5px * var(--k)) currentColor; }
.mb .im { flex: 1; min-height: 0; margin: calc(22px * var(--k)); border-radius: calc(12px * var(--k)); position: relative; background: var(--im); }
.mb .im em { position: absolute; left: calc(14px * var(--k)); bottom: calc(14px * var(--k)); font-style: normal; font-size: calc(13px * var(--k)); font-weight: 500; background: var(--bb); color: var(--bf); padding: calc(8px * var(--k)) calc(12px * var(--k)); border-radius: calc(7px * var(--k)); }
.t1 { --bg: #0a0a0a; --fg: #d2d2d2; --bb: #d2d2d2; --bf: #000;
  --im: repeating-linear-gradient(90deg, transparent 0 34px, rgba(255,255,255,.14) 34px 36px), repeating-linear-gradient(0deg, transparent 0 52px, rgba(255,255,255,.14) 52px 54px), linear-gradient(180deg, #4a4a4a, #151515 70%); }
.t2 { --bg: #f1f1f1; --fg: #000; --bb: #000; --bf: #d2d2d2; --im: radial-gradient(circle at 50% 50%, #000 0 38%, #2a2a2a 39% 41%, transparent 42%), #dcdcdc; }
.t2 h2 { font-size: calc(78px * var(--k)); font-weight: 800; text-transform: uppercase; line-height: .86; letter-spacing: -.06em; }
.t3 { --bg: #f7f7f7; --fg: #111; --bb: #111; --bf: #d2d2d2; --im: radial-gradient(ellipse at 30% 70%, #777, #222 70%); }
.t3 nav b { font: italic 400 calc(24px * var(--k)) 'Instrument Serif', serif; }
.t3 h2 { font: 400 calc(48px * var(--k))/.98 'Instrument Serif', serif; letter-spacing: -.02em; }
.t4 { --bg: #000; --fg: #d2d2d2; --bb: #d2d2d2; --bf: #000; --im: linear-gradient(160deg, #3a3a3a, #0d0d0d 70%); }
.t5 { --bg: #d2d2d2; --fg: #111; --bb: #111; --bf: #d2d2d2; --im: radial-gradient(circle at 50% 30%, #aaa, #333 80%); }
.t5 nav b { font: italic 400 calc(26px * var(--k)) 'Instrument Serif', serif; }
.t5 h2 { font: 400 calc(50px * var(--k))/.98 'Instrument Serif', serif; letter-spacing: -.02em; }
.t5 .im { border-radius: calc(220px * var(--k)) calc(220px * var(--k)) 0 0; margin-bottom: 0; }
.t6 { --bg: #000; --fg: #d2d2d2; --bb: #d2d2d2; --bf: #000; --im: radial-gradient(ellipse at 40% 60%, #888, #111 75%); }
.t6 h2 { font-size: calc(72px * var(--k)); font-weight: 700; letter-spacing: -.06em; line-height: .86; }

@media (max-width: 1000px) {
  .sc { grid-template-columns: 1fr; gap: 28px; }
  .sc-main { order: -1; }
  .sc-item.on::before { left: -12px; }
}
@media (max-width: 600px) { .sc-tabs button { padding: 8px 10px; font-size: 13px; } }