/* ==========================================================================
   KEINEWOLKE.zone – Desktop um 2002
   Silberne Fenster mit abgeschrägten Kanten, Titelleisten mit Verlauf, Tahoma,
   Pixel-Icons, blaue Links, Winamp-Player. Farben oben in :root anpassen.
   ========================================================================== */
:root {
  --accent: #ff7a45;
  --desk: #1f4a45;
  --silver: #c3c3c3;
  --silver-2: #d9d9d9;
  --hi: #ffffff;
  --lo: #808080;
  --dk: #0a0a0a;
  --paper: #ffffff;
  --paper-2: #f4f1ea;
  --ink: #111111;
  --muted: #5d5a54;
  --link: #0033cc;
  --visited: #6b1fa8;
  --title-a: #0c1a5c;
  --title-b: #2c56c7;
  --title-off-a: #7d7d7d;
  --title-off-b: #b5b5b5;
  --sel: #0a246a;
  --lcd: #000000;
  --lcd-ink: #00ff66;
  --wave-on: var(--accent);
  --wave-off: #c9c4bb;
  --ui: Tahoma, Verdana, "Segoe UI", Geneva, "DejaVu Sans", sans-serif;
  --text: Verdana, Tahoma, Geneva, sans-serif;
  --mono: "Lucida Console", Monaco, "Andale Mono", "Courier New", monospace;
  --bevel-out: inset -1px -1px var(--dk), inset 1px 1px var(--hi), inset -2px -2px var(--lo), inset 2px 2px var(--silver-2);
  --bevel-in: inset -1px -1px var(--hi), inset 1px 1px var(--lo), inset -2px -2px var(--silver-2), inset 2px 2px var(--dk);
  --bevel-btn: inset -1px -1px var(--dk), inset 1px 1px var(--hi), inset -2px -2px var(--lo);
  color-scheme: light;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body { font: 12px/1.4 var(--ui); color: var(--ink); background: var(--desk); -webkit-font-smoothing: auto; }
img, video, canvas { max-width: 100%; }
svg.px { image-rendering: pixelated; flex: none; }
button { font: inherit; color: inherit; }
::selection { background: var(--sel); color: #fff; }

/* Gemeinsames: Knöpfe */
.btn, .wb, .task, .start-btn, .tray-btn, .chip, .amp-ctrl button, .tl-time, .kwlb button {
  font: 12px var(--ui); background: var(--silver); border: 0; box-shadow: var(--bevel-btn);
  padding: 4px 10px; cursor: pointer; color: #000; text-decoration: none; display: inline-flex; align-items: center; gap: 5px;
}
.btn:active, .wb:active, .chip:active, .amp-ctrl button:active, .tl-time:active, .task.active, .start-btn.on { box-shadow: var(--bevel-in); }
.btn.primary { font-weight: bold; outline: 1px solid #000; outline-offset: -1px; }
.btn:focus-visible, .chip:focus-visible, a:focus-visible, button:focus-visible { outline: 1px dotted #000; outline-offset: -4px; }

/* ==========================================================================
   DESKTOP
   ========================================================================== */
body.desktop { height: 100vh; height: 100dvh; overflow: hidden; user-select: none; -webkit-user-select: none; }
.desk {
  position: fixed; inset: 0 0 34px 0; overflow: hidden;
  background-color: var(--desk);
  background-image:
    radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.35) 100%);
  background-size: 4px 4px, 100% 100%;
}
body.has-wallpaper .desk { background-size: cover; background-position: center; }
body.dragging, body.dragging * { cursor: grabbing !important; }
body.dragging .win-shield { display: block; }

.marquee {
  position: absolute; left: 0; right: 0; top: 0; height: 20px; overflow: hidden; white-space: nowrap;
  background: #000; color: #ffd800; font: 12px/20px var(--mono); border-bottom: 1px solid #333; z-index: 1;
}
.marquee span { display: inline-block; padding-left: 100%; animation: marquee 28s linear infinite; }
@keyframes marquee { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .marquee span { animation: none; padding-left: 12px; } }

.desk-title {
  position: absolute; right: 22px; bottom: 18px; margin: 0; text-align: right; pointer-events: none;
  font: bold 34px/1 var(--mono); color: #fff; letter-spacing: -1px;
  text-shadow: 2px 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 4px 4px 0 var(--accent);
}
.desk-title small { display: block; font: 12px/1.6 var(--mono); letter-spacing: 1px; color: #fff; opacity: .85; text-shadow: 1px 1px 0 #000; margin-top: 6px; }

.icons {
  position: absolute; top: 32px; left: 10px; bottom: 10px;
  display: grid; grid-auto-flow: column; grid-template-rows: repeat(auto-fill, 84px); grid-auto-columns: 84px; gap: 4px 6px;
}
.icon {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 4px 2px; text-decoration: none; color: #fff;
  font: 11px/1.25 var(--ui); text-align: center; outline: none; cursor: default; -webkit-tap-highlight-color: transparent;
}
.icon svg { filter: drop-shadow(1px 1px 0 rgba(0,0,0,.45)); }
.icon span { padding: 1px 3px; text-shadow: 1px 1px 0 #000; max-width: 80px; overflow-wrap: anywhere; }
.icon.sel span, .icon:focus-visible span { background: var(--sel); text-shadow: none; outline: 1px dotted #fff; }
.icon.sel svg { filter: drop-shadow(1px 1px 0 rgba(0,0,0,.45)) sepia(1) hue-rotate(185deg) saturate(3) brightness(.75); }
.icon:hover span { text-decoration: underline; }

/* Fenster */
.windows { position: absolute; inset: 20px 0 0 0; pointer-events: none; }
.win, .amp-win {
  position: absolute; display: flex; flex-direction: column; pointer-events: auto;
  background: var(--silver); box-shadow: var(--bevel-out), 4px 4px 0 rgba(0,0,0,.35); padding: 3px;
  min-width: 260px; min-height: 140px;
}
.win.max { left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; box-shadow: var(--bevel-out); }
.win-bar {
  display: flex; align-items: center; gap: 4px; height: 22px; padding: 0 2px 0 4px; flex: none;
  background: linear-gradient(90deg, var(--title-off-a), var(--title-off-b)); color: #dcdcdc; font-weight: bold;
  user-select: none; touch-action: none; cursor: default;
}
.win.active .win-bar, .amp-win .win-bar { background: linear-gradient(90deg, var(--title-a), var(--title-b) 70%, var(--accent)); color: #fff; }
.win-ico { display: inline-flex; }
.win-title { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; letter-spacing: .2px; }
.wb { width: 18px; height: 16px; padding: 0; justify-content: center; font: bold 12px/1 var(--ui); flex: none; }
.wb[data-w=close], .wb[data-p=close] { margin-left: 2px; }
.g-min { width: 7px; height: 2px; background: #000; margin-top: 7px; display: block; }
.g-max { width: 9px; height: 8px; border: 1px solid #000; border-top-width: 2px; display: block; }
.g-x { font-style: normal; font-size: 14px; line-height: 12px; }
.win-body { position: relative; flex: 1; margin-top: 3px; box-shadow: var(--bevel-in); padding: 2px; background: #fff; min-height: 0; }
.win-body iframe { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
.win-shield { display: none; position: absolute; inset: 0; }
.win-grip {
  position: absolute; right: 2px; bottom: 2px; width: 14px; height: 14px; cursor: nwse-resize; touch-action: none;
  background: linear-gradient(135deg, transparent 50%, var(--lo) 50%, var(--lo) 58%, transparent 58%, transparent 66%, var(--lo) 66%, var(--lo) 74%, transparent 74%, transparent 82%, var(--lo) 82%, var(--lo) 90%, transparent 90%);
}
.win.max .win-grip { display: none; }
.win:not(.active) .win-body iframe { pointer-events: auto; }

/* Taskleiste */
.taskbar {
  position: fixed; left: 0; right: 0; bottom: 0; height: 34px; z-index: 100000; display: flex; align-items: center; gap: 4px;
  padding: 3px 3px; padding-bottom: calc(3px + env(safe-area-inset-bottom)); background: var(--silver); box-shadow: inset 0 1px var(--silver-2), inset 0 2px var(--hi);
}
.start-btn { height: 26px; padding: 2px 8px 2px 5px; font-weight: bold; font-size: 13px; }
.start-btn b { font-style: italic; letter-spacing: .3px; }
.task-list { flex: 1; display: flex; gap: 3px; min-width: 0; overflow: hidden; }
.task { height: 26px; min-width: 0; max-width: 170px; flex: 1 1 140px; justify-content: flex-start; padding: 2px 6px; }
.task span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.task.active { background: repeating-conic-gradient(var(--silver) 0 25%, #e9e9e9 0 50%) 0 0 / 2px 2px; font-weight: bold; }
.tray { display: flex; align-items: center; gap: 4px; height: 26px; padding: 0 8px 0 4px; box-shadow: inset 1px 1px var(--lo), inset -1px -1px var(--hi); }
.tray-btn { box-shadow: none; background: transparent; padding: 2px 4px; max-width: 160px; }
.tray-btn span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 120px; }
.tray-btn.playing svg { animation: bob .8s steps(2) infinite; }
@keyframes bob { 50% { transform: translateY(-2px); } }
.clock { font-size: 12px; padding-left: 4px; min-width: 36px; text-align: right; }

/* Startmenü */
.start-menu {
  position: fixed; left: 2px; bottom: 34px; z-index: 100001; display: flex; min-width: 230px;
  background: var(--silver); box-shadow: var(--bevel-out), 3px 3px 0 rgba(0,0,0,.35); padding: 3px;
}
.start-side {
  width: 26px; background: linear-gradient(0deg, var(--title-a), var(--title-b) 70%, var(--accent)); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 8px;
}
.start-side span { writing-mode: vertical-rl; transform: rotate(180deg); color: #fff; font: bold 15px var(--ui); letter-spacing: 1px; white-space: nowrap; }
.start-items { flex: 1; display: flex; flex-direction: column; padding: 2px 0; }
.start-items a { display: flex; align-items: center; gap: 10px; padding: 4px 18px 4px 8px; color: #000; text-decoration: none; font-size: 12px; }
.start-items a:hover, .start-items a:focus-visible { background: var(--sel); color: #fff; outline: none; }
.start-items hr { border: 0; border-top: 1px solid var(--lo); border-bottom: 1px solid var(--hi); margin: 3px 2px; }

/* Startbildschirm */
.boot { position: fixed; inset: 0; z-index: 200000; background: #000; color: #c0c0c0; font: 14px/1.5 var(--mono); padding: 28px; cursor: pointer; transition: opacity .3s; }
.boot.out { opacity: 0; }
.boot pre { margin: 0; white-space: pre-wrap; font: inherit; }
.boot pre::after { content: '_'; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ==========================================================================
   PLAYER (KW-AMP)
   ========================================================================== */
.amp-win { right: 18px; bottom: 18px; width: 320px; min-height: 0; z-index: 5000; }
.amp { display: flex; flex-direction: column; gap: 4px; padding: 4px 2px 2px; }
.amp-lcd { display: flex; gap: 6px; background: var(--lcd); color: var(--lcd-ink); padding: 5px 6px; box-shadow: var(--bevel-in); font: 11px/1.3 var(--mono); min-width: 0; }
.amp-left { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; flex: none; }
.amp-state { font-size: 10px; opacity: .8; }
.amp-time { font: bold 20px/1 var(--mono); letter-spacing: 1px; text-shadow: 0 0 6px rgba(0,255,102,.5); }
.amp-right { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.amp-title { overflow: hidden; white-space: nowrap; }
.amp-title span { display: inline-block; }
.amp.playing .amp-title span { animation: ampscroll 14s linear infinite; padding-left: 100%; }
@keyframes ampscroll { to { transform: translateX(-100%); } }
.amp-info { display: flex; gap: 6px; justify-content: space-between; opacity: .85; min-width: 0; }
.amp-now { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #ffd800; }
.amp-vis { width: 100%; height: 22px; display: block; }
.amp-wave { width: 100%; height: 34px; display: block; background: #000; box-shadow: var(--bevel-in); cursor: pointer; padding: 2px; touch-action: none; }
.amp-ctrl { display: flex; align-items: center; gap: 3px; }
.amp-ctrl button { width: 28px; height: 22px; padding: 0; justify-content: center; }
.amp-ctrl svg { width: 11px; height: 11px; fill: #000; }
.amp-vol { flex: 1; min-width: 50px; accent-color: var(--accent); margin-left: 6px; }
.amp-open { font: bold 12px var(--mono); color: #000; text-decoration: none; background: var(--silver); box-shadow: var(--bevel-btn); width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; }
.amp-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: var(--silver); box-shadow: var(--bevel-out); padding: 2px 4px; }
.amp-dock .amp { max-width: 720px; margin: 0 auto; flex-direction: row; flex-wrap: wrap; align-items: stretch; }
.amp-dock .amp-lcd { flex: 1 1 260px; }
.amp-dock .amp-wave { flex: 1 1 200px; height: auto; min-height: 30px; }
.amp-dock .amp-ctrl { flex: 1 1 100%; }
body.has-dock { padding-bottom: 130px; }

/* ==========================================================================
   LIGHTBOX
   ========================================================================== */
.kwlb { position: fixed; inset: 0; z-index: 300000; background: rgba(0,0,0,.82); display: flex; align-items: center; justify-content: center; padding: 16px; }
.kwlb[hidden] { display: none; }
.kwlb-win { position: relative; background: var(--silver); box-shadow: var(--bevel-out), 6px 6px 0 rgba(0,0,0,.5); padding: 3px; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; }
.kwlb-bar { display: flex; align-items: center; gap: 8px; height: 22px; padding: 0 2px 0 6px; background: linear-gradient(90deg, var(--title-a), var(--title-b) 70%, var(--accent)); color: #fff; font-weight: bold; }
.kwlb-title { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.kwlb-count { font-weight: normal; font-family: var(--mono); }
.kwlb-bar button { width: 18px; height: 16px; padding: 0; justify-content: center; font-weight: bold; }
.kwlb-stage { margin-top: 3px; box-shadow: var(--bevel-in); padding: 2px; background: #000; display: flex; align-items: center; justify-content: center; min-height: 0; }
.kwlb-stage img { display: block; max-width: calc(100vw - 48px); max-height: calc(100vh - 80px); max-height: calc(100dvh - 80px); object-fit: contain; }
.kwlb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 34px; height: 48px; justify-content: center; font-size: 24px !important; padding: 0 !important; }
.kwlb-nav.prev { left: 10px; } .kwlb-nav.next { right: 10px; }

/* ==========================================================================
   UNTERSEITEN
   ========================================================================== */
body.page {
  min-height: 100vh; padding: 24px 16px;
  background-color: var(--desk);
  background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 4px 4px;
}
.page-frame { max-width: 980px; margin: 0 auto; background: var(--silver); box-shadow: var(--bevel-out), 6px 6px 0 rgba(0,0,0,.35); padding: 3px; }
.page-top { display: flex; align-items: center; gap: 2px; padding: 2px; border-bottom: 1px solid var(--lo); box-shadow: 0 1px var(--hi); overflow-x: auto; scrollbar-width: none; }
.page-top::-webkit-scrollbar { display: none; }
.page-top a { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; color: #000; text-decoration: none; white-space: nowrap; }
.page-top a:hover { box-shadow: var(--bevel-btn); }
.page-home { font-weight: bold; border-right: 1px solid var(--lo); box-shadow: 1px 0 var(--hi); margin-right: 4px; }
.page-nav { display: flex; gap: 2px; }
.page-head { display: flex; align-items: center; gap: 6px; padding: 4px 4px; }
.page-head::before { content: 'Adresse'; color: var(--muted); }
.crumbs { flex: 1; min-width: 0; background: #fff; box-shadow: var(--bevel-in); padding: 3px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
.crumbs a { color: #000; text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs i { color: var(--muted); font-style: normal; padding: 0 2px; }
.page-body { background: var(--paper); box-shadow: var(--bevel-in); padding: 20px 22px 28px; font: 13px/1.6 var(--text); min-height: 50vh; }
.page-foot { display: flex; gap: 2px; padding-top: 3px; font-size: 11px; color: #000; }
.page-foot > * { flex: 1; padding: 2px 6px; box-shadow: inset 1px 1px var(--lo), inset -1px -1px var(--hi); }
.page-foot a { flex: 0 0 auto; color: #000; }

/* Im Desktop-Fenster: nur Inhalt + Adresszeile */
html.in-window body.page { padding: 0; background: var(--silver); min-height: 0; }
html.in-window .page-frame { box-shadow: none; padding: 0; max-width: none; background: var(--silver); }
html.in-window .page-top, html.in-window .page-foot { display: none; }
html.in-window .page-head { padding: 3px 3px 4px; }
html.in-window .page-body { box-shadow: none; border-top: 1px solid var(--lo); min-height: calc(100vh - 34px); }

/* Typografie */
.page-body h1, .page-body h2, .page-body h3, .page-body h4 { font-family: var(--mono); line-height: 1.2; letter-spacing: -.3px; }
.page-body h1 { font-size: 24px; margin: 0 0 6px; }
.page-body h2 { font-size: 16px; margin: 26px 0 10px; padding-bottom: 4px; border-bottom: 2px dotted var(--lo); text-transform: uppercase; letter-spacing: 1px; }
.page-body h3 { font-size: 14px; margin: 20px 0 6px; }
.page-body a { color: var(--link); }
.page-body a:visited { color: var(--visited); }
.page-body a:hover { background: var(--link); color: #fff; text-decoration: none; }
.page-body a:has(img):hover, .page-body a.lb:hover, .page-body .tile a:hover, .page-body .post-thumb:hover { background: none; }
.page-body p { margin: 0 0 12px; }
.page-body code { font-family: var(--mono); background: var(--paper-2); padding: 0 3px; border: 1px solid #ddd; }
.page-body pre { background: #000; color: var(--lcd-ink); padding: 10px 12px; overflow: auto; font: 12px/1.45 var(--mono); }
.page-body pre code { background: none; border: 0; padding: 0; }
.page-body blockquote { margin: 12px 0; padding: 8px 14px; background: var(--paper-2); border-left: 4px solid var(--accent); }
.page-body hr { border: 0; height: 2px; background: repeating-linear-gradient(90deg, var(--lo) 0 4px, transparent 4px 8px); margin: 20px 0; }
.page-body ul, .page-body ol { padding-left: 22px; margin: 0 0 12px; }
.lead { font-size: 14px; color: var(--muted); margin-top: -2px; }
.meta { color: var(--muted); font-size: 11px; font-family: var(--ui); }
.empty { color: var(--muted); font-style: italic; padding: 28px 0; text-align: center; }
.hint { color: var(--muted); font-size: 11px; border: 1px dashed var(--lo); background: #ffffe1; padding: 6px 10px; margin-top: 18px; }
.prose { max-width: 680px; }
.prose img.inline-img { max-height: 1.6em; vertical-align: middle; }

.tags { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.tag { font-family: var(--mono); font-size: 11px; color: var(--link); text-decoration: none; }
.toolbar { display: flex; flex-wrap: wrap; gap: 4px; margin: -6px 0 16px; padding-bottom: 10px; border-bottom: 1px solid #e3dfd7; }
.chip { font-size: 11px; padding: 3px 8px; }
.page-body .chip, .page-body .chip:visited { color: #000; text-decoration: none; }
.page-body .chip:hover { background: var(--silver); color: #000; }
.chip.on { box-shadow: var(--bevel-in); background: #fff; font-weight: bold; }
.chip small { color: var(--muted); }
.btn svg.ui { fill: currentColor; }
.page-body .btn, .page-body .btn:visited { color: #000; }
.page-body .btn:hover { background: var(--silver); color: #000; }

/* Logbuch */
.post-row { display: flex; gap: 14px; padding: 12px 0; border-bottom: 1px dotted #cfcac0; }
.post-row:last-child { border-bottom: 0; }
.post-thumb { flex: none; width: 128px; height: 96px; display: flex; align-items: center; justify-content: center; background: var(--paper-2); box-shadow: var(--bevel-in); padding: 2px; overflow: hidden; }
.post-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-info { min-width: 0; flex: 1; }
.post-info h2 { margin: 0 0 3px; border: 0; padding: 0; text-transform: none; letter-spacing: -.3px; font-size: 16px; }
.post-info p { margin: 4px 0 0; color: #333; }
.post-head { margin-bottom: 16px; }
.fig { margin: 16px 0; }
.fig img, .fig video { display: block; max-width: 100%; height: auto; box-shadow: 3px 3px 0 rgba(0,0,0,.18); border: 1px solid #000; }
.fig figcaption { font-size: 11px; color: var(--muted); margin-top: 6px; font-style: italic; }
.fig.cover img { width: 100%; }
.pics { display: grid; gap: 6px; margin: 16px 0; grid-template-columns: repeat(2, 1fr); }
.pics.n3 { grid-template-columns: repeat(3, 1fr); }
.pics.n4 { grid-template-columns: repeat(4, 1fr); }
.pics a { display: block; aspect-ratio: 1; overflow: hidden; border: 1px solid #000; }
.pics img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s; }
.pics a:hover img { transform: scale(1.04); }
.pager { display: flex; justify-content: space-between; gap: 12px; margin-top: 30px; padding-top: 12px; border-top: 2px dotted var(--lo); font-family: var(--mono); font-size: 12px; }

/* Video-Player-Rahmen */
.mp { background: #000; padding: 3px; box-shadow: var(--bevel-in); border: 1px solid #000; }
.mp video { display: block; width: 100%; height: auto; max-height: 75vh; background: #000; border: 0; box-shadow: none; }
.fig .mp video { border: 0; box-shadow: none; }

/* Raster (Fotos, Zeichnungen, Videos) */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.grid.tight { gap: 6px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); margin-top: 14px; }
.grid.tight a { display: block; aspect-ratio: 1; overflow: hidden; border: 1px solid #000; }
.grid.tight img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s; }
.grid.tight a:hover img { transform: scale(1.04); }
.tile { margin: 0; }
.tile > a { display: block; position: relative; aspect-ratio: 1; overflow: hidden; background: var(--paper-2); box-shadow: 3px 3px 0 rgba(0,0,0,.2); border: 1px solid #000; }
.tile > a img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s; }
.tile > a:hover img { transform: scale(1.05); }
.tile.album > a::before, .tile.album > a::after { content: ''; position: absolute; inset: 0; border: 1px solid #000; pointer-events: none; }
.tile.album > a { box-shadow: 3px 3px 0 #fff, 4px 4px 0 #000, 7px 7px 0 #fff, 8px 8px 0 #000; }
.tile figcaption { padding: 8px 2px 0; font-size: 12px; line-height: 1.35; }
.tile figcaption strong { display: block; }
.tile figcaption a { text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.badge { position: absolute; right: 6px; bottom: 6px; background: rgba(0,0,0,.78); color: #fff; font: 11px var(--mono); padding: 2px 6px; display: inline-flex; align-items: center; gap: 4px; z-index: 2; }
.badge svg { fill: #fff; width: 9px; height: 9px; }
.grid.videos { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.vtile > a { aspect-ratio: 16 / 10; background: #000; }
.vtile > a::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0,0,0,.12) 0 1px, transparent 1px 3px); pointer-events: none; z-index: 1; }
.vtile .noposter { position: absolute; inset: 0; background: #111; }
.hover-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }

/* Musik & DJ-Sets: Playlist im Winamp-Stil */
.playlist { list-style: none; margin: 0; padding: 4px; background: #000; color: var(--lcd-ink); font: 12px/1.3 var(--mono); box-shadow: var(--bevel-in); border: 1px solid #000; }
.track-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-bottom: 1px solid #0d2a17; }
.track-row:last-child { border-bottom: 0; }
.track-row:hover { background: #0c1f14; }
.track-row.is-current { background: var(--sel); color: #fff; }
.track-row .num { opacity: .6; width: 20px; }
.track-row .track-play { background: transparent; border: 1px solid var(--lcd-ink); color: var(--lcd-ink); width: 26px; height: 26px; padding: 0; justify-content: center; box-shadow: none; cursor: pointer; display: inline-flex; align-items: center; }
.track-row .track-play svg { fill: currentColor; }
.track-row .track-cover { width: 40px; height: 40px; object-fit: cover; flex: none; border: 1px solid #1e4d2c; display: inline-flex; align-items: center; justify-content: center; }
.track-row .track-meta { flex: 1; min-width: 0; color: inherit !important; text-decoration: none; display: flex; flex-direction: column; background: none !important; }
.track-row .track-meta strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: normal; color: #fff; }
.track-row .track-meta small { opacity: .7; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.track-row .track-meta:hover strong { text-decoration: underline; }
.track-row .dur { opacity: .8; }

/* Track-Karte im Beitrag */
.track { display: flex; align-items: center; gap: 10px; padding: 6px; margin: 14px 0; background: var(--silver); box-shadow: var(--bevel-out); max-width: 620px; }
.track .track-play { width: 32px; height: 32px; padding: 0; justify-content: center; background: var(--silver); border: 0; box-shadow: var(--bevel-btn); cursor: pointer; display: inline-flex; align-items: center; }
.track .track-play svg { fill: #000; }
.track.is-playing .track-play { box-shadow: var(--bevel-in); }
.track .track-cover { width: 44px; height: 44px; object-fit: cover; box-shadow: var(--bevel-in); padding: 1px; display: inline-flex; align-items: center; justify-content: center; background: #fff; }
.track .track-meta { display: flex; flex-direction: column; min-width: 0; flex: 0 1 180px; }
.track .track-meta strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.track .track-meta small { color: var(--muted); }
.track-wave { flex: 1; min-width: 80px; height: 36px; display: block; }
.track-wave canvas { width: 100%; height: 100%; display: block; cursor: pointer; }
.track .track-wave { background: #fff; box-shadow: var(--bevel-in); padding: 3px; }

/* Release-Seite (Track / Set) */
.release { display: flex; gap: 20px; align-items: flex-start; margin-bottom: 20px; }
.release-cover { flex: none; width: 220px; aspect-ratio: 1; background: #000; display: flex; align-items: center; justify-content: center; border: 1px solid #000; box-shadow: 4px 4px 0 rgba(0,0,0,.25); }
.release-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.release-info { flex: 1; min-width: 0; }
.release-info h1 { font-size: 26px; }
.release-actions { display: flex; gap: 6px; margin: 14px 0; flex-wrap: wrap; }
.release.is-playing .release-actions .track-play { box-shadow: var(--bevel-in); }
.track-wave.big { height: 64px; background: #fff; box-shadow: var(--bevel-in); padding: 4px; }
.tracklist ol { list-style: none; padding: 0; margin: 0; font: 12px/1.4 var(--mono); counter-reset: tl; }
.tracklist li { display: flex; gap: 10px; align-items: baseline; padding: 4px 6px; border-bottom: 1px dotted #ddd; counter-increment: tl; }
.tracklist li::before { content: counter(tl, decimal-leading-zero); color: var(--muted); width: 22px; flex: none; }
.tracklist li.now { background: var(--sel); color: #fff; }
.tracklist li.now::before { color: #fff; }
.tl-time { font: 11px var(--mono); padding: 1px 6px; min-width: 64px; justify-content: center; flex: none; }
span.tl-time { box-shadow: none; background: none; color: var(--muted); }

/* Über mich */
.about { display: flex; gap: 22px; align-items: flex-start; }
.avatar { flex: none; width: 160px; padding: 6px; background: var(--silver); box-shadow: var(--bevel-out); }
.avatar img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; box-shadow: var(--bevel-in); }
.avatar.none { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; }
.gears { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.gear { border: 1px solid var(--lo); box-shadow: 1px 1px var(--hi), inset 1px 1px var(--hi); margin: 0; padding: 8px 12px 10px; font-family: var(--ui); font-size: 12px; }
.gear legend { padding: 0 4px; font-weight: bold; }
.gear ul { margin: 0; padding-left: 16px; }

/* Links */
.links { list-style: square; }
.links li { margin-bottom: 4px; }
.links small { color: var(--muted); }
.buttons88 { display: flex; flex-wrap: wrap; gap: 6px; }
.buttons88 img { display: block; image-rendering: pixelated; width: 88px; height: 31px; }

/* Start & Papierkorb */
.welcome { display: flex; gap: 18px; align-items: flex-start; }
.welcome-art { flex: none; padding: 8px; background: var(--paper-2); box-shadow: var(--bevel-in); }
.updates { list-style: none; padding: 0; margin: 0; }
.updates li { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px dotted #ddd; flex-wrap: wrap; }
.updates time { font: 11px var(--mono); color: var(--muted); min-width: 90px; }
.updates small { color: var(--muted); }
.trash { text-align: center; padding: 30px 10px; }

/* ==========================================================================
   HANDY
   ========================================================================== */
@media (max-width: 700px) {
  .marquee { font-size: 11px; }
  .desk-title { left: 16px; right: 16px; top: 34px; bottom: auto; text-align: left; font-size: 24px; }
  .desk-title small { font-size: 10px; }
  .icons { top: 108px; left: 8px; right: 8px; bottom: auto; grid-auto-flow: row; grid-template-rows: none; grid-template-columns: repeat(4, 1fr); grid-auto-columns: auto; gap: 10px 4px; }
  .icon span { font-size: 11px; }
  .windows { inset: 0; }
  .win { min-width: 0; }
  .win.max { box-shadow: none; padding: 0; }
  .wb[data-w=max], .win-grip { display: none; }
  .win-bar { height: 34px; font-size: 13px; }
  .wb { width: 30px; height: 26px; }
  .amp-win { left: 4px !important; right: 4px !important; bottom: 4px !important; top: auto !important; width: auto; z-index: 99000 !important; }
  .amp-vis { display: none; }
  .amp-wave { height: 26px; }
  .amp-time { font-size: 16px; }
  .task { max-width: 110px; }
  .tray-btn span { display: none; }
  body.page { padding: 0; }
  .page-frame { box-shadow: none; }
  .page-body { padding: 16px 14px 24px; }
  .post-thumb { width: 84px; height: 64px; }
  .about, .welcome, .release { flex-direction: column; }
  .release-cover { width: 100%; max-width: 320px; }
  .avatar { width: 120px; }
  .pics.n3, .pics.n4 { grid-template-columns: repeat(2, 1fr); }
  .grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .grid.videos { grid-template-columns: 1fr; }
  .track { flex-wrap: wrap; }
  .track .track-wave { flex-basis: 100%; }
  .page-head::before { display: none; }
}

/* ---------- Gästeteppich ---------- */
.gb-form { margin-bottom: 18px; }
.gb-form .gear { max-width: none; }
.gb-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.gb-row > span { font-weight: bold; min-width: 44px; }
.gb-form input, .gb-form textarea { font: 13px var(--text); border: 0; background: #fff; box-shadow: var(--bevel-in); padding: 5px 7px; width: 100%; box-sizing: border-box; }
.gb-form input { max-width: 340px; }
.gb-form textarea { resize: vertical; min-height: 84px; display: block; }
.gb-send { justify-content: space-between; margin: 6px 0 0; gap: 12px; }
.gb-hint { color: var(--muted); font-size: 11px; }
.gb-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.gb-msg { margin: 6px 0 0; min-height: 1.2em; font-size: 12px; color: #0a6b0a; }
.gb-msg.err { color: #b00020; }
.gb-post { display: flex; gap: 10px; align-items: flex-start; background: var(--paper-2); box-shadow: var(--bevel-out); padding: 6px 10px 8px; margin: 0 0 8px; scroll-margin: 40px; }
.gb-main { flex: 1; min-width: 0; }
.gb-side { flex: none; line-height: 0; margin-top: 2px; }
.gb-post.hl { animation: gbhl 1.6s ease-out; }
@keyframes gbhl { from { background: #fff3b0; } to { background: var(--paper-2); } }
.gb-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; margin-bottom: 4px; }
.gb-num { font-family: var(--mono); color: var(--muted); text-decoration: none; }
.gb-num:hover { text-decoration: underline; }
.gb-name { color: #117743; }
.gb-trip { font-family: var(--mono); font-size: 11px; color: #6b4ea3; text-decoration: none; }
a.gb-trip:hover { text-decoration: underline; }
.gb-time { color: var(--muted); font-size: 11px; }
.gb-like { margin-left: auto; }
.page-body .gb-like.on { color: #c2185b; }
.gb-like:disabled { opacity: .55; cursor: default; }
.gb-text { white-space: normal; overflow-wrap: anywhere; font-size: 13px; line-height: 1.5; }
.gb-quote { color: #789922; }
.gb-ref { font-family: var(--mono); font-size: 12px; color: #d00; text-decoration: underline; }
.gb-more { text-align: center; }
.gb-note { margin-top: 18px; color: var(--muted); }
.gb-top { border-collapse: collapse; width: 100%; max-width: 620px; font-size: 12px; background: #fff; box-shadow: var(--bevel-in); }
.gb-top th, .gb-top td { padding: 4px 8px; text-align: left; border-bottom: 1px solid #e3dfd7; }
.gb-top th { background: var(--silver); font-weight: bold; }
.gb-top .num { font-family: var(--mono); text-align: right; width: 1%; white-space: nowrap; }
.gb-podium td { font-weight: bold; }
.gb-activity { list-style: none; padding: 0; margin: 0; font-size: 12px; }
.gb-activity li { padding: 3px 0; border-bottom: 1px dotted #ddd; }
.page-body .gb-profile-head { font-size: 18px; text-transform: none; }
.gb-trip { text-transform: none; }
.gb-stats { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 14px; }
.gb-stat { background: var(--silver); box-shadow: var(--bevel-out); padding: 6px 12px; text-align: center; min-width: 70px; }
.gb-stat b { display: block; font: bold 16px var(--mono); }
.gb-stat small { color: var(--muted); font-size: 11px; }
@media (max-width: 700px) { .gb-send { flex-direction: column; align-items: stretch; } .gb-form input { max-width: none; } }

/* Profile & Pixel-Avatare */
.gb-ava { max-width: none; flex: none; image-rendering: pixelated; image-rendering: crisp-edges; background: #fff; box-shadow: var(--bevel-in); padding: 2px; box-sizing: content-box; vertical-align: middle; }
.gb-ava.anon { background: repeating-linear-gradient(45deg, #ddd 0 4px, #eee 4px 8px); }
.gb-ava.tiny { padding: 0; box-shadow: none; background: none; margin-right: 4px; }
.gb-ava.big { padding: 4px; }
.gb-ava-cell { width: 1%; }
.gb-mood { margin-left: 4px; font-size: 13px; }
.gb-badges { margin-left: 6px; }
.gb-badge { cursor: help; font-size: 12px; }
.gb-status-sm { color: var(--muted); font-size: 11px; font-style: italic; }
.gb-card { display: flex; gap: 16px; align-items: flex-start; margin: 4px 0 10px; }
.gb-card-info { min-width: 0; }
.gb-card .gb-profile-head { margin: 0 0 4px; border: 0; }
.gb-status { margin: 0 0 8px; font-style: italic; color: #333; }
.gb-badge-list { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.gb-badge-big { font-size: 11px; background: var(--silver); box-shadow: var(--bevel-out); padding: 2px 7px; }
.gb-visits { margin: 0; font-size: 11px; color: var(--muted); }
.gb-counter { display: inline-flex; gap: 1px; background: #000; padding: 2px; vertical-align: middle; }
.gb-counter span { font: bold 13px/1 var(--mono); color: #39ff14; background: #111; padding: 2px 3px; text-shadow: 0 0 4px rgba(57,255,20,.6); }
.gb-like.pop { animation: gbpop .35s ease-out; }
@keyframes gbpop { 50% { transform: scale(1.3); } }
.gb-login input { max-width: 260px; font: 13px var(--text); border: 0; background: #fff; box-shadow: var(--bevel-in); padding: 5px 7px; }
.gb-editor { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-start; margin-top: 8px; }
.gb-paint { display: flex; gap: 10px; align-items: flex-end; }
.gb-canvas { width: 256px; height: 256px; image-rendering: pixelated; image-rendering: crisp-edges; cursor: crosshair; touch-action: none; box-shadow: var(--bevel-in); padding: 2px;
  background: repeating-conic-gradient(#e6e6e6 0 25%, #fff 0 50%) 0 0 / 32px 32px; }
.gb-preview { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.gb-preview small { color: var(--muted); font-size: 10px; }
.gb-tools { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 10px; }
.gb-swatches, .gb-choice { display: flex; flex-wrap: wrap; gap: 3px; }
.gb-swatch { width: 22px; height: 22px; border: 0; padding: 0; cursor: pointer; box-shadow: var(--bevel-btn); font: 11px var(--ui); }
.gb-swatch.on { outline: 2px solid #000; outline-offset: 1px; }
.gb-swatch.none { background: var(--silver); }
.gb-toolrow { display: flex; flex-wrap: wrap; gap: 4px; }
.gb-field { display: flex; flex-direction: column; gap: 4px; }
.gb-field > b { font-size: 12px; }
.gb-field input { font: 13px var(--text); border: 0; background: #fff; box-shadow: var(--bevel-in); padding: 5px 7px; max-width: 340px; }
.gb-moodbtn { font-size: 14px; padding: 2px 6px; }
@media (max-width: 700px) { .gb-canvas { width: 208px; height: 208px; } .gb-card { flex-direction: column; } }

/* Selfies */
.gb-cam-bar { margin: 6px 0 0; gap: 10px; }
.gb-cam-thumb { display: inline-flex; align-items: center; gap: 6px; }
.gb-cam-thumb img { width: 48px; height: 48px; object-fit: cover; background: #fff; padding: 3px 3px 9px; box-shadow: 1px 1px 0 #999, 2px 2px 4px rgba(0,0,0,.25); transform: rotate(-3deg); }
.gb-cam { margin: 8px 0; padding: 8px; background: var(--silver); box-shadow: var(--bevel-out); max-width: 360px; display: flex; flex-direction: column; gap: 8px; }
.gb-cam-stage { position: relative; aspect-ratio: 1; background: #000; box-shadow: var(--bevel-in); overflow: hidden; }
.gb-cam-stage video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); display: block; }
.gb-cam-count { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: bold 96px/1 var(--mono); color: #fff; text-shadow: 3px 3px 0 #000, 0 0 20px rgba(0,0,0,.6); pointer-events: none; }
.gb-cam-count[hidden] { display: none; }
.gb-cam-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.gb-cam-flash.go { animation: gbflash .5s ease-out; }
@keyframes gbflash { 0% { opacity: 1; } 100% { opacity: 0; } }
.gb-photo { margin: 8px 0 2px; display: inline-flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.gb-photo a { display: block; background: #fff; padding: 6px 6px 22px; box-shadow: 1px 1px 0 #aaa, 3px 3px 6px rgba(0,0,0,.25); transform: rotate(-1.5deg); transition: transform .15s; }
.gb-post:nth-child(even) .gb-photo a { transform: rotate(1.5deg); }
.gb-photo a:hover { transform: rotate(0) scale(1.03); }
.gb-photo img { display: block; width: 200px; height: 200px; object-fit: cover; max-width: none; }
.gb-report { background: none; border: 0; padding: 0; font: 10px var(--ui); color: var(--muted); cursor: pointer; }
.gb-report:hover:not(:disabled) { color: #b00020; text-decoration: underline; }
.gb-report:disabled { cursor: default; }
.gb-photo-held { font-size: 11px; color: var(--muted); font-style: italic; margin: 6px 0 0; }
@media (max-width: 700px) { .gb-photo img { width: 160px; height: 160px; } }

/* Selfie-Vorschau & Löschen */
.gb-cam-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.gb-cam-shot[hidden], .gb-cam-stage video[hidden] { display: none; }
.gb-cam-thumb img { cursor: zoom-in; }
.gb-del { background: none; border: 0; padding: 2px 4px; cursor: pointer; font-size: 13px; opacity: .55; }
.gb-del:hover:not(:disabled) { opacity: 1; }
.gb-post.gone { opacity: 0; transform: translateX(20px); transition: opacity .35s, transform .35s; }

/* Dither-Kamera */
.gb-cam-stage video.gb-cam-src { position: absolute; width: 2px; height: 2px; opacity: 0; pointer-events: none; transform: none; }
.gb-cam-preview { display: block; width: 100%; height: 100%; image-rendering: pixelated; image-rendering: crisp-edges; }
.gb-cam-preview[hidden] { display: none; }
.gb-cam-filters { display: flex; flex-direction: column; gap: 4px; }
.gb-cam-label { font: bold 11px var(--ui); min-width: 38px; align-self: center; }
.gb-cam-filters .chip:disabled { opacity: .45; cursor: default; }
.gb-photo img.px, .gb-cam-shot[src^="data:image/png"], .gb-cam-thumb img[src^="data:image/png"], .kwlb-stage img[src$=".png"] { image-rendering: pixelated; image-rendering: crisp-edges; }
.gb-editor .chip:disabled { opacity: .45; cursor: default; }

/* ==========================================================================
   DITHERING – grobe Pixel-Verläufe statt glatter Gradienten (Masken: assets/gifs/*.gif)
   ========================================================================== */
.win-bar, .kwlb-bar, .gl-bar, .kw-toast-bar { position: relative; isolation: isolate; --bar-a: var(--title-off-a); --bar-b: var(--title-off-b); --bar-c: var(--title-off-b); }
.win.active .win-bar, .amp-win .win-bar, .kwlb-bar, .gl-bar, .kw-toast-bar { --bar-a: var(--title-a); --bar-b: var(--title-b); --bar-c: var(--accent); }
.win-bar, .win.active .win-bar, .amp-win .win-bar, .kwlb-bar, .gl-bar, .kw-toast-bar { background: var(--bar-b); }
.win-bar::before, .kwlb-bar::before, .gl-bar::before, .kw-toast-bar::before,
.win-bar::after, .kwlb-bar::after, .gl-bar::after, .kw-toast-bar::after { content: ''; position: absolute; top: 0; bottom: 0; z-index: -1; pointer-events: none; }
.win-bar::before, .kwlb-bar::before, .gl-bar::before, .kw-toast-bar::before {
  left: 0; right: 0; background: var(--bar-a);
  -webkit-mask: url(gifs/fade-x.gif) left top / 512px 8px repeat-y; mask: url(gifs/fade-x.gif) left top / 512px 8px repeat-y;
}
.win-bar::after, .kwlb-bar::after, .gl-bar::after, .kw-toast-bar::after {
  right: 0; width: 200px; background: var(--bar-c); transform: scaleX(-1);
  -webkit-mask: url(gifs/fade-x-sm.gif) left top / 200px 8px repeat-y; mask: url(gifs/fade-x-sm.gif) left top / 200px 8px repeat-y;
}
.start-side { position: relative; isolation: isolate; background: var(--title-b); }
.start-side::before, .start-side::after { content: ''; position: absolute; left: 0; right: 0; z-index: -1; }
.start-side::before { bottom: 0; height: 100%; background: var(--title-a); -webkit-mask: url(gifs/fade-y.gif) left bottom / 8px 512px repeat-x; mask: url(gifs/fade-y.gif) left bottom / 8px 512px repeat-x; }
.start-side::after { top: 0; height: 96px; background: var(--accent); -webkit-mask: url(gifs/fade-y-sm.gif) left top / 8px 96px repeat-x; mask: url(gifs/fade-y-sm.gif) left top / 8px 96px repeat-x; transform: scaleY(-1); }

/* Desktop & Unterseiten: Pixel-Raster und gedithertes Abdunkeln nach unten */
.desk { background-image: none; }
.desk::before, .desk::after, body.page::before, body.page::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
body.page::before, body.page::after { position: fixed; }
.desk::before, body.page::before { background: rgba(0,0,0,.16); -webkit-mask: url(gifs/pat-dither.gif); mask: url(gifs/pat-dither.gif); }
.desk::after, body.page::after { top: 35%; background: rgba(0,0,0,.55); -webkit-mask: url(gifs/fade-y.gif) left top / 8px 100% repeat-x; mask: url(gifs/fade-y.gif) left top / 8px 100% repeat-x; image-rendering: pixelated; }
body.page { background-image: none; position: relative; z-index: 0; }
html.in-window body.page::before, html.in-window body.page::after { display: none; }

/* Gedithter Schlagschatten (Schachbrett statt Halbtransparenz) */
.win, .page-frame, .start-menu, .kwlb-win, .gb-latest, .kw-toast { box-shadow: var(--bevel-out); }
.page-frame, .kwlb-win, .gb-latest { position: relative; }
.win, .page-frame, .start-menu, .kwlb-win, .gb-latest, .kw-toast { isolation: isolate; }
.win::after, .page-frame::after, .start-menu::after, .kwlb-win::after, .gb-latest::after, .kw-toast::after {
  content: ''; position: absolute; left: 6px; top: 6px; right: -6px; bottom: -6px; z-index: -1; pointer-events: none;
  background: #000; -webkit-mask: url(gifs/pat-dither.gif); mask: url(gifs/pat-dither.gif);
  clip-path: polygon(calc(100% - 6px) 0, 100% 0, 100% 100%, 0 100%, 0 calc(100% - 6px), calc(100% - 6px) calc(100% - 6px));
}
.win.max::after, html.in-window .page-frame::after { display: none; }
.page-body h2 { border-bottom: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' shape-rendering='crispEdges'%3E%3Crect width='2' height='2' fill='%23808080'/%3E%3Crect x='2' y='2' width='2' height='2' fill='%23808080'/%3E%3C/svg%3E") left bottom / 4px 4px repeat-x; }
.page-body .gb-card .gb-profile-head { background: none; }

/* ==========================================================================
   BLINKIES, 88×31-BUTTONS, WEBRINGE
   ========================================================================== */
.blinkies { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0; }
.blinkie, .buttons88 img, img.btn88 { display: block; image-rendering: pixelated; width: auto; max-width: none; }
.buttons88 a, .blinkies a { display: block; line-height: 0; }
.page-body .buttons88 a:hover { background: none; outline: 1px dotted #000; }
.webrings { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.webring { display: inline-flex; align-items: stretch; gap: 2px; padding: 2px; background: var(--silver); box-shadow: var(--bevel-out); font: 11px var(--ui); max-width: 100%; }
.webring .wr-btn, .page-body .webring .wr-btn, .page-body .webring .wr-btn:visited {
  min-width: 22px; justify-content: center; display: inline-flex; align-items: center; font: bold 12px var(--mono);
  background: var(--silver); box-shadow: var(--bevel-btn); color: #000; text-decoration: none; padding: 1px 4px;
}
.webring .wr-btn:active { box-shadow: var(--bevel-in); }
.webring .wr-btn.off { color: var(--lo); }
.webring .wr-name, .page-body .webring .wr-name, .page-body .webring .wr-name:visited {
  display: flex; align-items: center; padding: 2px 8px; background: #000; color: #ffe14a; font: bold 11px var(--mono);
  text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: var(--bevel-in); letter-spacing: .5px;
}
.webring.own .wr-name { color: #fff; background: var(--title-a); }
.page-body .webring a:hover { background: var(--silver); color: #000; }
.page-body .webring a.wr-name:hover { background: #000; color: #fff; text-decoration: underline; }
.page-badges { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; padding: 5px 2px 2px; }
.page-badges .webrings { margin: 0; }
html.in-window .page-badges { display: none; }
.webstuff { margin-top: 22px; padding-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.codebox { display: block; width: 100%; max-width: 560px; margin: 6px 0 4px; font: 11px/1.4 var(--mono); background: #000; color: var(--lcd-ink); border: 0; box-shadow: var(--bevel-in); padding: 6px 8px; resize: vertical; }

/* ---------- Desktop-Seitenleiste: neuester Eintrag, Webring, Blinkies, Buttons ---------- */
.desk-side { position: absolute; top: 30px; right: 12px; width: 236px; display: flex; flex-direction: column; gap: 10px; max-height: calc(100% - 110px); overflow: hidden; padding: 0 8px 8px 0; user-select: none; }
.desk-extras { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.desk-extras .blinkies { flex-direction: column; align-items: flex-end; margin: 0; }
.desk-extras .buttons88 { justify-content: flex-end; width: 182px; gap: 4px; }
.desk-extras .webrings { margin: 0; justify-content: flex-end; }
.gb-latest { background: var(--silver); padding: 3px; cursor: pointer; }
.gb-latest:hover .gl-card { outline: 1px dotted #000; outline-offset: -3px; }
.gl-bar, .kw-toast-bar { display: flex; align-items: center; gap: 6px; height: 18px; padding: 0 3px 0 5px; color: #fff; font: bold 11px var(--ui); }
.gl-bar span:first-child, .kw-toast-bar span { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.gl-new { background: #ffe14a; color: #c00000; font: bold 10px var(--mono); padding: 0 4px; animation: blink 0.8s steps(1) infinite; }
.gl-card { display: flex; gap: 6px; align-items: flex-start; padding: 5px; margin-top: 3px; background: #fff; box-shadow: var(--bevel-in); min-width: 0; }
.gl-card .gb-ava { flex: none; image-rendering: pixelated; background: #fff; }
.gl-main { flex: 1; min-width: 0; font-size: 11px; }
.gl-head { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gl-head .gb-trip { font-size: 10px; }
.gl-text { margin-top: 2px; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.gl-meta { margin-top: 3px; font-size: 10px; opacity: .7; }
.gl-photo { flex: none; width: 40px; height: 40px; object-fit: cover; border: 1px solid #000; background: #000; }
.gl-foot { font-size: 10px; padding: 3px 3px 0; color: #000; }
.kw-toast { position: fixed; right: 8px; bottom: 42px; width: 270px; z-index: 100002; background: var(--silver); padding: 3px; cursor: pointer; animation: toastin .35s steps(5); }
.kw-toast .wb { width: 16px; height: 14px; font-size: 11px; }
.kw-toast.out { opacity: 0; transition: opacity .4s; }
@keyframes toastin { from { transform: translateY(140%); } }
@media (max-width: 1000px) { .desk-extras .blinkies, .desk-extras .buttons88 { display: none; } }
@media (max-width: 700px) {
  .desk-side { top: auto; bottom: 6px; left: 8px; right: 8px; width: auto; max-height: none; padding: 0; }
  .desk-extras { display: none; }
  .kw-toast { left: 8px; right: 8px; width: auto; }
}
@media (max-height: 520px) { .desk-extras { display: none; } }

/* ==========================================================================
   PROFIL-THEMES (Gästeteppich) – Farben kommen als --t-bg/pat/box/ink/acc vom Profil
   ========================================================================== */
.th { position: relative; isolation: isolate; --t-font: var(--ui); }
.gb-post.th, .gl-card.th, .gb-profile.th, .gb-ring li.th { background: var(--t-bg); color: var(--t-ink); }
.th::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--t-pat); -webkit-mask: var(--t-mask) repeat; mask: var(--t-mask) repeat; }
.th-pat-none::before { display: none; }
.th-pat-dither { --t-mask: url(gifs/pat-dither.gif); }
.th-pat-checker { --t-mask: url(gifs/pat-checker.gif); }
.th-pat-dots { --t-mask: url(gifs/pat-dots.gif); }
.th-pat-grid { --t-mask: url(gifs/pat-grid.gif); }
.th-pat-diag { --t-mask: url(gifs/pat-diag.gif); }
.th-pat-stars { --t-mask: url(gifs/pat-stars.gif); }
.th-pat-hearts { --t-mask: url(gifs/pat-hearts.gif); }
.th-pat-clouds { --t-mask: url(gifs/pat-clouds.gif); }
.th-pat-fade::before { -webkit-mask: url(gifs/pat-fade.gif) left bottom / 8px 256px repeat-x; mask: url(gifs/pat-fade.gif) left bottom / 8px 256px repeat-x; }
.th-font-ui { --t-font: Tahoma, Verdana, Geneva, sans-serif; }
.th-font-trebuchet { --t-font: "Trebuchet MS", "Lucida Grande", sans-serif; }
.th-font-serif { --t-font: "Times New Roman", Times, Georgia, serif; }
.th-font-mono { --t-font: "Courier New", Courier, monospace; }
.th-font-comic { --t-font: "Comic Sans MS", "Comic Neue", "Chalkboard SE", "Comic Sans", cursive; }
.gb-post.th { box-shadow: none; padding: 7px; }
.gb-post.th.hl { animation: none; outline: 3px solid #ffe14a; }
.th .gb-main, .th .gl-main, .gb-ring li.th > div,
.gb-profile.th .gb-card, .gb-profile.th .gb-stat, .gb-profile.th .gb-activity, .gb-profile.th > h2 {
  background: var(--t-box); color: var(--t-ink); font-family: var(--t-font);
}
.th .gb-main { padding: 6px 9px; }
.th .gl-main { padding: 3px 5px; }
.th .gb-text { font-family: var(--t-font); font-size: 14px; }
.th .gb-name, .th a, .page-body .th a, .page-body .th a:visited, .th .gb-trip { color: var(--t-acc); }
.page-body .th a:hover { background: var(--t-acc); color: var(--t-box); }
.page-body .th .chip, .page-body .th .btn { color: #000; }
.th .gb-num, .th .gb-time, .th .gb-hint, .th .gl-meta, .th .gb-stat small, .th .gb-status-sm { color: var(--t-ink); opacity: .75; }
.th-border-bevel .gb-main, .th-border-bevel .gl-main, .gb-profile.th-border-bevel .gb-card { box-shadow: inset -1px -1px #fff, inset 1px 1px #808080, inset -2px -2px rgba(255,255,255,.4), inset 2px 2px #000; }
.th-border-solid .gb-main, .th-border-solid .gl-main, .gb-profile.th-border-solid .gb-card { border: 2px solid var(--t-acc); }
.th-border-dashed .gb-main, .th-border-dashed .gl-main, .gb-profile.th-border-dashed .gb-card { border: 2px dashed var(--t-acc); }
.th-border-double .gb-main, .th-border-double .gl-main, .gb-profile.th-border-double .gb-card { border: 4px double var(--t-acc); }
.th-border-dotted .gb-main, .th-border-dotted .gl-main, .gb-profile.th-border-dotted .gb-card { border: 2px dotted var(--t-acc); }
.gb-profile { margin: 0 -4px; }
.gb-profile.th { padding: 12px; }
.gb-profile.th .gb-card { padding: 10px; }
.gb-profile.th .gb-activity { padding: 6px 10px; }
.gb-profile.th > h2 { padding: 5px 10px; background-image: none; margin: 18px 0 8px; }
.gb-profile.th .gb-stat { box-shadow: none; }
.gb-homepage { margin: 4px 0; font-size: 12px; }
.gb-mybutton { display: flex; align-items: center; gap: 8px; margin: 8px 0; }
.gb-mybutton small { opacity: .8; }

/* Namenseffekte */
.fx-rainbow { animation: fxrain 1.2s steps(6) infinite; }
@keyframes fxrain { 0% { color: #ff2a2a; } 17% { color: #ff9d00; } 33% { color: #e6d800; } 50% { color: #19c219; } 67% { color: #29a5ff; } 83% { color: #c03bff; } }
.fx-blink { animation: fxblink 1s steps(1) infinite; }
@keyframes fxblink { 50% { opacity: .2; } }
.fx-glow { text-shadow: 0 0 3px var(--t-acc), 0 0 7px var(--t-acc); }
.th .fx-glow { color: var(--t-ink); }
.fx-shadow { text-shadow: 1px 1px 0 #000, 2px 2px 0 #000; letter-spacing: .5px; }
@media (prefers-reduced-motion: reduce) { .fx-rainbow, .fx-blink, .gl-new { animation: none; } }

/* Webring-Liste im Gästeteppich */
.gb-ring { list-style: none; padding: 0; margin: 12px 0; display: flex; flex-direction: column; gap: 6px; }
.gb-ring li { display: flex; align-items: center; gap: 10px; padding: 6px 8px; background: var(--paper-2); box-shadow: var(--bevel-out); }
.gb-ring li > div { padding: 4px 8px; min-width: 0; flex: 1; }
.gb-ring-num { font: bold 14px var(--mono); opacity: .7; }
.gb-ring-btn { line-height: 0; }
.gb-ring-host { font-family: var(--mono); font-size: 11px; }
.page-body .gb-ring a.gb-ring-btn:hover { background: none; }

/* Theme-Editor */
.gb-theme, .gb-blinkpick { display: flex; flex-direction: column; gap: 8px; }
.gb-presets .chip { font-weight: bold; }
.gb-theme-ctl { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.gb-colorpick { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; }
.gb-colorpick input { width: 28px; height: 22px; padding: 0; border: 0; box-shadow: var(--bevel-in); background: #fff; cursor: pointer; }
.gb-theme-ctl select { font: 12px var(--ui); }
.gb-demo { margin: 4px 0 0; }
.gb-blinkgrid { display: flex; flex-wrap: wrap; gap: 4px; }
.gb-blink { padding: 2px; border: 0; background: transparent; cursor: pointer; opacity: .45; line-height: 0; }
.gb-blink img { image-rendering: pixelated; }
.gb-blink.on { opacity: 1; outline: 2px solid var(--sel); }
.gb-blink:hover { opacity: 1; }
.gb-hp-in { font: 13px var(--text); border: 0; background: #fff; box-shadow: var(--bevel-in); padding: 5px 7px; max-width: 340px; width: 100%; }
.gb-theme small.gb-hint, .gear > small.gb-hint { display: block; }


/* ==========================================================================
   ZIMMER – die ganze Website: Pixel-Szene (assets/room/*.gif, 320×180),
   ein Fenster darüber, Taskleiste unten. Nichts scrollt.
   ========================================================================== */
html.room-html, html.room-html body { height: 100%; overflow: hidden; overscroll-behavior: none; }
body.room-page {
  margin: 0; height: 100vh; height: 100dvh; display: grid; grid-template-rows: auto auto minmax(0, 1fr);
  padding-bottom: calc(34px + env(safe-area-inset-bottom)); box-sizing: border-box;
  background: var(--desk); color: #fff; position: relative; z-index: 0; touch-action: manipulation;
}
body.room-page::before, body.room-page::after { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; }
body.room-page::before { background: rgba(0,0,0,.55); }
body.room-page::after { background: rgba(0,0,0,.35); -webkit-mask: url(gifs/pat-dither.gif); mask: url(gifs/pat-dither.gif); }
.room-page .marquee { position: relative; }
.room-head { text-align: center; padding: 10px 16px 4px; }
.room-head h1 { margin: 0; line-height: 0; }
.room-head h1 img { width: calc(var(--tw) * 3px); max-width: 94vw; height: auto; image-rendering: pixelated; }
.room-head p { margin: 6px 0 0; font: 13px/1.3 var(--mono); color: #e8e8e8; text-shadow: 1px 1px 0 #000; }
@media (max-height: 640px) { .room-head h1 img { width: calc(var(--tw) * 2px); } .room-head p { display: none; } }

/* Szene passt immer komplett in den freien Platz */
.room-wrap { container-type: size; min-height: 0; display: grid; place-items: center; padding: 6px 10px 10px; }
.room {
  position: relative; aspect-ratio: 16 / 9; image-rendering: pixelated;
  width: min(100cqw, 100cqh * 16 / 9, 1600px);
  box-shadow: 0 0 0 3px #000, 0 0 0 5px var(--silver), 0 0 0 6px #000;
}
.room img { display: block; width: 100%; height: auto; max-width: none; image-rendering: pixelated; -webkit-user-drag: none; user-select: none; }
.room-bg { position: absolute; inset: 0; }
.rd, .ro { position: absolute; }
.ro { display: block; line-height: 0; text-decoration: none; outline: none; -webkit-tap-highlight-color: transparent; }
.ro img { transform-origin: 50% 85%; }
.ro:hover img, .ro:focus-visible img { animation: wobble .5s steps(2) infinite; filter: drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff) brightness(1.08); }
@keyframes wobble { 0% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
.ro span {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); white-space: nowrap; pointer-events: none;
  font: bold clamp(12px, 1.5vw, 20px)/1 var(--mono); color: #fff; text-transform: uppercase; letter-spacing: 1px; opacity: 0; z-index: 5;
  text-shadow: 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000, 2px 2px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 4px 4px 0 var(--accent);
}
.ro:hover span, .ro:focus-visible span { opacity: 1; animation: labelpop .25s steps(3); }
@keyframes labelpop { from { transform: translate(-50%, -20%); opacity: 0; } }
.ro:hover { z-index: 4; }
@media (hover: none) and (min-width: 701px) { .ro span { opacity: .92; font-size: clamp(9px, 1.3vw, 14px); } }
@media (max-width: 700px) { .ro span { display: none; } }
@media (prefers-reduced-motion: reduce) { .ro:hover img { animation: none; } }

/* Sprechblase: neuester Eintrag im Gästeteppich */
.room-note { position: absolute; z-index: 3; max-width: 30%; }
.room-bubble {
  display: flex; align-items: center; gap: 5px; padding: 4px 7px; text-align: left; cursor: pointer; border: 0;
  background: #fffbe6; color: #111; font: 11px/1.25 var(--ui); box-shadow: 0 0 0 2px #000, 3px 3px 0 2px rgba(0,0,0,.4); position: relative;
  animation: bob 1.6s steps(2) infinite;
}
.room-bubble::after { content: ''; position: absolute; right: 18px; bottom: -8px; border: 5px solid transparent; border-top: 6px solid #000; }
.room-bubble .gb-ava { flex: none; background: #fff; image-rendering: pixelated; }
.room-bubble span { min-width: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.room-bubble i { font-style: normal; }
.room-bubble:hover { background: #ffe14a; }
.room-new { position: absolute; top: -9px; left: -6px; background: #ffe14a; color: #c00000; font: bold 9px var(--mono); font-style: normal; padding: 0 3px; box-shadow: 0 0 0 1px #000; animation: blink .8s steps(1) infinite; }
@media (max-width: 700px) { .room-note { display: none; } }

/* Taskleiste: Start, offenes Fenster, Webring, Buttons, Uhr */
.room-taskbar { gap: 6px; }
.room-taskbar .task-list { flex: 1 1 auto; }
.room-taskbar .task { max-width: 200px; }
.tb-ring .webrings { margin: 0; flex-wrap: nowrap; }
.tb-ring .webring { padding: 1px; box-shadow: none; background: transparent; }
.tb-ring .webring:not(.own) { display: none; }
.tb-ring .wr-btn { height: 22px; }
.tb-ring .wr-name { font-size: 10px; padding: 0 6px; }
.tb-btns { display: flex; gap: 3px; align-items: center; }
.tb-btns a, .tb-btns img { display: block; line-height: 0; }
.tb-btns img { width: 66px; height: auto; image-rendering: pixelated; }
.room-page .start-menu { bottom: calc(34px + env(safe-area-inset-bottom)); max-height: calc(100dvh - 60px); overflow: auto; }
.room-page .start-items a { cursor: pointer; }
@media (max-width: 900px) { .tb-btns { display: none; } }
@media (max-width: 520px) { .tb-ring .wr-name { display: none; } .room-taskbar .task { max-width: 120px; } }

/* Das Fenster über dem Zimmer (zwischen Überschrift und Taskleiste) */
.rwin { position: fixed; z-index: 1000; left: 50%; top: var(--wintop, 56px); bottom: 46px; transform: translateX(-50%); width: min(960px, 94vw); height: auto; min-width: 0; }
.rwin.moved { transform: none; bottom: auto; height: min(640px, calc(100dvh - 110px)); }
.rwin.max { transform: none; position: fixed; left: 0 !important; top: 0 !important; bottom: calc(34px + env(safe-area-inset-bottom)) !important; width: 100% !important; height: auto !important; }
.rwin[hidden] { display: none; }
.room-amp { position: fixed; right: 12px; bottom: 46px; z-index: 1001; }
@media (max-width: 700px) {
  .room-head { padding-top: 8px; }
  .room-head h1 img { width: calc(var(--tw) * 2px); }
  .room-head p { font-size: 11px; }
  .room-wrap { padding: 6px 0; }
  .room { box-shadow: 0 3px 0 #000, 0 -3px 0 #000; }
  .rwin, .rwin.moved { left: 0 !important; top: 0 !important; bottom: calc(34px + env(safe-area-inset-bottom)); transform: none; width: 100%; height: auto; }
  .room-amp { left: 4px; right: 4px; bottom: 40px; width: auto; }
}

/* ---------- Spielteppich im Gästeteppich ---------- */
.gb-mapbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.gb-map { position: relative; aspect-ratio: 320 / 200; width: 100%; max-width: 960px; margin: 0 auto; box-shadow: 0 0 0 2px #000, 4px 4px 0 2px rgba(0,0,0,.35); user-select: none; overflow: hidden; }
.gb-map-bg, .gb-map-cv { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; display: block; max-width: none; }
.gb-map-cv { touch-action: manipulation; }
.gb-map-ui { position: absolute; inset: 0; pointer-events: none; }
.gb-map-ui > * { pointer-events: auto; }
.gb-maptag, .gb-mapsay { position: absolute; transform: translate(-50%, -100%); white-space: nowrap; pointer-events: none !important; }
.gb-maptag { background: #fffbe6; color: #111; font: 11px var(--ui); padding: 1px 5px; box-shadow: 0 0 0 1px #000; margin-top: -4px; }
.gb-maptag .gb-trip { font-size: 10px; }
.gb-mapsay {
  background: #fff; color: #111; font: 11px/1.3 var(--ui); padding: 4px 7px; max-width: 220px; white-space: normal; width: max-content;
  box-shadow: 0 0 0 2px #000, 3px 3px 0 2px rgba(0,0,0,.3); margin-top: -10px; animation: labelpop .2s steps(3);
}
.gb-mapsay::after { content: ''; position: absolute; left: 50%; bottom: -8px; margin-left: -5px; border: 5px solid transparent; border-top: 6px solid #000; }
.gb-mapcard {
  position: absolute; right: 8px; top: 8px; width: min(300px, 70%); background: var(--paper-2); color: var(--ink); padding: 10px 12px; font: 12px var(--ui);
  box-shadow: 0 0 0 2px #000, 4px 4px 0 2px rgba(0,0,0,.35); display: flex; flex-direction: column; gap: 8px; animation: labelpop .2s steps(3);
}
.gb-mapcard.th { background: var(--t-box); color: var(--t-ink); font-family: var(--t-font); }
.gb-mapcard.th::before { display: none; }
.gb-mapcard-x { position: absolute; right: 4px; top: 4px; }
.gb-mapcard-head { display: flex; gap: 10px; align-items: flex-start; }
.gb-mapcard-head .gb-ava { image-rendering: pixelated; background: #fff; flex: none; }
.gb-mapcard-last { font-style: italic; overflow-wrap: anywhere; }
.gb-mapcard .gb-row { margin: 0; flex-wrap: wrap; }
.page-body .gb-mapcard a.btn, .page-body .gb-mapcard a.btn:visited { color: #000; }
.room-note { transform: translateX(-82%); }
@media (max-width: 700px) { .gb-mapcard { left: 6px; right: 6px; width: auto; top: auto; bottom: 6px; } .gb-mapsay { max-width: 150px; font-size: 10px; } }
html.in-window .gb-map { max-width: min(960px, calc((100vh - 150px) * 1.6)); }