/* Kapitel 2 «Ihre Webseite in Schichten» (live seit 09.10.2026, stadt.js; Desktop seit 12.10. «Die Kamera sinkt», Board 12): Blätter 560×350, nie über 1 skaliert (Schrift bleibt scharf) */
.st { position: absolute; inset: 0; z-index: 4; pointer-events: none; font-family: var(--font); color: #fff; visibility: hidden; }
@font-face { font-family: "Source Serif 4"; src: url(../fonts/stadt/source-serif-4-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url(../fonts/stadt/source-serif-4-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }
.st-c { --bh: var(--font); --bb: var(--font); --bi: #141A2E; --bm: #565C70; --bp: #F2F1EE; --bk: #0C1020; --blink: #1A3E8C; }
.st-c.bsp-ardos { --bh: "Source Serif 4", Georgia, serif; --bb: "Source Serif 4", Georgia, serif; --bi: #10161D; --bm: #59626C; --bp: #F6F3EE; --bk: #10161D; }
.bsp-ardos .sw-pos b, .bsp-ardos .sw-txt h4, .bsp-ardos .sw-ges .aa, .bsp-ardos .sw-ops .st0 { font-weight: 400; letter-spacing: -.01em; }
.bsp-ardos .sw-ges { background-size: cover; background-position: center; }
.stc-note { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 9px; padding: 6px 13px 5px 11px; border-radius: 999px; background: rgba(12, 16, 32, .74); box-shadow: 0 0 0 1px rgba(232, 236, 243, .16); font-size: 12.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: #E8ECF3; white-space: nowrap; opacity: 0; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.stc-note i { width: 7px; height: 7px; border-radius: 50%; background: var(--lamp); box-shadow: 0 0 10px rgba(230, 162, 92, .8); }
.stc-scene { position: absolute; inset: 0; perspective: 2600px; }
.stc-sheet { position: absolute; left: -280px; top: -175px; width: 560px; height: 350px; border-radius: 12px; opacity: 0; will-change: transform, opacity; }
.stc-fill { position: absolute; inset: 0; border-radius: 12px; overflow: hidden; background: var(--bp); color: var(--bi); box-shadow: 0 0 0 1px rgba(20, 26, 46, .14), 0 30px 46px -26px rgba(0, 0, 0, .65); }
.stc-fill::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, 0) 42%), linear-gradient(180deg, rgba(255, 255, 255, 0) 60%, rgba(20, 26, 46, .05)); }   /* Licht von Westen, wie die Sonne der Szene */
.stc-shot { position: absolute; inset: 0; border-radius: 12px; overflow: hidden; background: #0C1020 center / cover no-repeat; box-shadow: 0 0 0 1px rgba(20, 26, 46, .16), 0 44px 64px -30px rgba(0, 0, 0, .7); opacity: 0; }
.stc-sheen { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, .32) 50%, rgba(255, 255, 255, 0) 62%); opacity: 0; pointer-events: none; }   /* Handy, Ende */
.stc-shadow { position: absolute; left: 0; top: 0; width: 720px; height: 230px; margin: -115px 0 0 -360px; border-radius: 50%; background: radial-gradient(closest-side, rgba(4, 6, 12, .5), rgba(4, 6, 12, 0)); opacity: 0; }   /* Handy, Ende */
.stc-lab { position: absolute; left: 0; top: 0; padding: 5px 11px 4px; border-radius: 8px; background: rgba(12, 16, 32, .82); box-shadow: 0 0 0 1px rgba(232, 236, 243, .12); font-size: 13px; line-height: 16px; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; opacity: 0; transition: color .35s, box-shadow .35s; will-change: transform, opacity; }
.stc-lab b { font-weight: 500; }
.stc-lab.is-on { color: #F2C08A; box-shadow: 0 0 0 1px rgba(230, 162, 92, .65); }
.stc-lab.is-klein { padding: 4px 9px 3px; font-size: 11px; line-height: 14px; letter-spacing: .14em; }   /* Handy hoch: Namen unter den Karten im Raster (Board 11 B) */

/* Inhalt der Schichten (Beispielseite ARDOS) */
.sw { position: absolute; inset: 0; padding: 30px 36px; font-family: var(--bb); font-size: 16px; color: var(--bi); text-align: left; }
.sw small { display: block; font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--bm); }
.sw-pos b { display: block; margin-top: 52px; max-width: 12.5em; font-family: var(--bh); font-size: 44px; line-height: 1.03; font-weight: 500; letter-spacing: -.025em; }
.sw-pos span { display: block; margin-top: 16px; max-width: 30em; font-size: 15px; line-height: 1.5; color: var(--bm); }
.sw-txt h4 { margin: 10px 0 0; font-family: var(--bh); font-size: 28px; line-height: 1.12; font-weight: 500; letter-spacing: -.015em; }
.sw-txt p { margin: 14px 0 0; max-width: 33em; font-size: 15px; line-height: 1.6; color: var(--bm); }
.sw-img { padding: 0; background: #556070 center / cover no-repeat; }
.sw-ges { background-image: repeating-linear-gradient(90deg, rgba(20, 26, 46, .07) 0 1px, transparent 1px 70px); }
.sw-ges .aa { position: absolute; right: 36px; top: 28px; font-family: var(--bh); font-size: 120px; line-height: .9; font-weight: 500; letter-spacing: -.04em; }
.sw-ges .fn { position: absolute; right: 38px; top: 150px; font-size: 13px; color: var(--bm); }
.sw-ges .swt { position: absolute; left: 36px; bottom: 34px; display: flex; gap: 12px; }
.sw-ges .swt i { width: 42px; height: 42px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(20, 26, 46, .16); }
.sw-ges .gr { position: absolute; right: 38px; bottom: 44px; font-size: 13px; color: var(--bm); }
.sw-tec ul { margin: 30px 0 0; padding: 0; list-style: none; }
.sw-tec li { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-bottom: 1px solid rgba(20, 26, 46, .1); font-size: 21px; font-weight: 500; }
.sw-tec li i { position: relative; flex: none; width: 26px; height: 26px; border-radius: 50%; background: #2F6B4A; }
.sw-tec li i::after { content: ""; position: absolute; left: 9px; top: 5px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.sw-seo .q { padding: 11px 18px; border-radius: 99px; box-shadow: 0 0 0 1px rgba(20, 26, 46, .18); font-size: 15px; color: var(--bm); }
.sw-seo .r { margin-top: 20px; }
.sw-seo .r cite { font-style: normal; font-size: 13px; color: var(--bm); }
.sw-seo .r b { display: block; margin-top: 4px; font-size: 20px; line-height: 1.25; font-weight: 500; color: var(--blink); }
.sw-seo .r p { margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: var(--bm); }
.sw-seo .ai { display: inline-block; margin-top: 14px; padding: 6px 12px; border-radius: 99px; background: #141A2E; color: #F2C08A; font-size: 12.5px; }
.sw-law .para { position: absolute; left: 36px; top: 64px; font-family: var(--bh); font-size: 96px; line-height: .9; color: rgba(20, 26, 46, .2); }
.sw-law .ln { display: block; height: 8px; margin: 14px 0 0 120px; border-radius: 4px; background: rgba(20, 26, 46, .09); width: 62%; }
.sw-law .ln:first-of-type { margin-top: 40px; width: 70%; } .sw-law .ln:nth-of-type(3) { width: 54%; } .sw-law .ln:nth-of-type(4) { width: 38%; }
.sw-law .ok { position: absolute; right: 36px; top: 30px; font-size: 13px; font-weight: 500; color: #2F6B4A; }
.sw-law .bar { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 36px; background: var(--bk); color: #fff; font-size: 14px; letter-spacing: .02em; }
.sw-ops .st0 { margin-top: 34px; font-family: var(--bh); font-size: 42px; font-weight: 500; letter-spacing: -.02em; }
.sw-ops .st0 i { display: inline-block; width: 16px; height: 16px; margin-right: 14px; border-radius: 50%; background: #2F6B4A; box-shadow: 0 0 0 7px rgba(47, 107, 74, .14); vertical-align: 6px; }
.sw-ops ul { display: flex; gap: 10px; margin: 26px 0 0; padding: 0; list-style: none; }
.sw-ops li { padding: 8px 15px; border-radius: 99px; background: rgba(20, 26, 46, .06); font-size: 14px; }