+ 4
*/
.uk-plated { position: relative; border: 1px solid var(--uk-brass-vd); box-shadow: inset 0 0 0 1px rgba(212,162,78,.12); }
.uk-corner { position: absolute; width: 34px; height: 34px; z-index: 3; pointer-events: none; }
.uk-corner.tl { top: 0; left: 0; background: linear-gradient(135deg, var(--uk-brass-d), var(--uk-brass-vd) 70%); clip-path: polygon(0 0, 100% 0, 0 100%); }
.uk-corner.tr { top: 0; right: 0; background: linear-gradient(225deg, var(--uk-brass-d), var(--uk-brass-vd) 70%); clip-path: polygon(0 0, 100% 0, 100% 100%); }
.uk-corner.bl { bottom: 0; left: 0; background: linear-gradient(45deg, var(--uk-brass-d), var(--uk-brass-vd) 70%); clip-path: polygon(0 0, 0 100%, 100% 100%); }
.uk-corner.br { bottom: 0; right: 0; background: linear-gradient(315deg, var(--uk-brass-d), var(--uk-brass-vd) 70%); clip-path: polygon(100% 0, 0 100%, 100% 100%); }
/* Schädel-Wasserzeichen:
☠
in einem position:relative-Container */
.uk-watermark {
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
font-family: var(--uk-body); font-size: 340px; line-height: 1;
color: rgba(224,16,32,.035); pointer-events: none; user-select: none; z-index: 0;
}
body.theme-light .uk-watermark { color: rgba(165,18,28,.05); }
/* Artwork-Geist:
in position:relative + overflow:hidden */
.uk-ghost {
position: absolute; width: 620px; height: 620px; object-fit: cover;
opacity: .07; filter: grayscale(.35) contrast(1.25);
pointer-events: none; user-select: none; z-index: 0;
}
.uk-ghost.flip { transform: scaleX(-1); }
body.theme-light .uk-ghost { opacity: .05; }
/* Fullscreen suite backdrop — injected once by uk-shell.js on every suite page */
#uk-suite-bg {
position: fixed; inset: 0; z-index: 0;
pointer-events: none; overflow: hidden;
}
#uk-suite-bg .uk-suite-bg-ghost {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
object-position: center 30%;
opacity: .035;
filter: grayscale(.45) contrast(1.12);
}
body.theme-light #uk-suite-bg .uk-suite-bg-ghost {
opacity: .025;
}
#uk-suite-bg .uk-suite-bg-vignette {
position: absolute; inset: 0;
background: radial-gradient(
ellipse 85% 75% at 50% 42%,
transparent 32%,
color-mix(in srgb, var(--uk-void) 84%, transparent) 100%
);
}
body.theme-light #uk-suite-bg .uk-suite-bg-vignette {
background: radial-gradient(
ellipse 85% 75% at 50% 42%,
transparent 48%,
color-mix(in srgb, var(--uk-void) 72%, transparent) 100%
);
}
body.uk-has-suite > :not(#uk-suite-bg):not(#uk-shell-overlay):not(#uk-shell-drawer):not(.kofi-btn) {
position: relative;
z-index: 1;
}
/* Vignette über Ambient-Layern:
*/
.uk-vignette {
position: absolute; inset: 0; pointer-events: none; z-index: 1;
background: radial-gradient(ellipse 70% 60% at 50% 45%, transparent 40%, color-mix(in srgb, var(--uk-void) 78%, transparent) 100%);
}
/* Hex-Wappen fürs Logo:
*/
.uk-crest {
object-fit: cover; object-position: center 22%;
border: 2px solid var(--uk-brass-d);
clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
/* Online/Heartbeat:
12 IN DER SCHLACHT */
.uk-online { display: inline-flex; align-items: center; gap: 6px; font-family: var(--uk-mono); font-size: 10px; letter-spacing: .1em; color: var(--uk-brass); text-transform: uppercase; }
.uk-online i { width: 6px; height: 6px; background: var(--uk-brass); animation: uk-pulse 1.6s ease-in-out infinite; }
@keyframes uk-pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
/* ═══ Shell: suite header + tile nav + WAR-ROOM drawer (uk-shell.js) ═══ */
#uk-shell {
position: relative; z-index: 9600; flex-shrink: 0;
background: linear-gradient(180deg, rgba(0,0,0,.72), rgba(7,4,5,.95));
border-bottom: 2px solid var(--uk-gore);
font-family: var(--uk-body);
}
body.theme-light #uk-shell {
background: linear-gradient(180deg, rgba(246,239,223,.98), rgba(240,232,216,.98));
}
.uk-shell-head {
display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
padding: 10px 16px 8px;
max-width: 1280px; margin: 0 auto; width: 100%;
}
#uk-shell .uk-crest { width: 34px; height: 34px; display: block; flex: none; }
.uk-shell-brand {
display: inline-flex; align-items: center; gap: 12px;
text-decoration: none; color: inherit; min-width: 0;
}
.uk-shell-brand-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.uk-shell-kicker {
font-family: var(--uk-mono); font-size: 9px; letter-spacing: .34em;
color: var(--uk-blood); text-transform: uppercase;
}
.uk-shell-wordmark {
font-family: var(--uk-display); font-size: clamp(18px, 3vw, 24px);
letter-spacing: .04em; color: var(--uk-bone); line-height: 1; text-transform: uppercase;
}
.uk-shell-dot { color: #b3161c; }
.uk-shell-pulse { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; flex-wrap: wrap; }
.uk-hamster {
display: inline-flex; align-items: center; gap: 5px;
padding: 2px 8px 2px 3px; border-radius: 4px;
border: 1px solid rgba(255,255,255,.1); background: rgba(0,0,0,.25);
font-family: var(--uk-mono); font-size: 9px; letter-spacing: .1em;
color: var(--uk-brass); text-transform: uppercase;
}
body.theme-light .uk-hamster { background: rgba(255,255,255,.5); border-color: rgba(20,20,30,.12); }
.uk-hamster img { height: 22px; width: auto; display: block; }
.uk-hamster-off img { filter: grayscale(1); opacity: .55; }
.uk-hamster-label { color: inherit; }
.uk-btn-sm { padding: 5px 10px; font-size: 10px; }
/* Suite tile strip — paging nav when overflow */
.uk-suite-nav {
display: flex; align-items: stretch; gap: 6px;
max-width: 1280px; margin: 0 auto; width: 100%;
padding: 0 10px 12px;
}
.uk-suite-scroll-btn {
flex: none; align-self: center;
width: 30px; height: 52px;
display: inline-flex; align-items: center; justify-content: center;
background: linear-gradient(180deg, #171010, #0d0908);
border: 1px solid #3a2420;
border-top: 2px solid var(--uk-blood);
color: var(--uk-brass);
font-family: var(--uk-display); font-size: 22px; line-height: 1;
cursor: pointer; padding: 0;
transition: border-color .15s, color .15s, opacity .15s;
}
.uk-suite-scroll-btn:hover:not(:disabled) {
border-color: var(--uk-blood);
color: #fff;
box-shadow: 0 0 14px rgba(179,22,28,.25);
}
.uk-suite-scroll-btn:disabled { opacity: .28; cursor: default; }
.uk-suite-scroll-btn[hidden] { display: none; }
body.theme-light .uk-suite-scroll-btn {
background: linear-gradient(180deg, #f0e8dc, #e8dfd0);
border-color: rgba(40,30,20,.15);
color: #6a5040;
}
.uk-suite-tiles-viewport {
flex: 1; min-width: 0; overflow: hidden;
}
.uk-suite-tiles {
display: flex; gap: 10px;
overflow-x: auto; overflow-y: hidden;
padding: 0 4px;
scroll-behavior: smooth;
scrollbar-width: none;
-ms-overflow-style: none;
-webkit-overflow-scrolling: touch;
}
.uk-suite-tiles::-webkit-scrollbar { display: none; height: 0; width: 0; }
.uk-suite-tiles--fit { overflow: hidden; }
.uk-suite-tiles--fit .uk-suite-tile {
flex: 1 1 0; min-width: 0; max-width: none;
}
.uk-suite-tile {
flex: 0 0 auto; min-width: 96px; max-width: 132px;
display: flex; flex-direction: column; gap: 4px;
text-decoration: none; color: inherit;
background: linear-gradient(180deg, #171010, #0d0908);
border: 1px solid #3a2420;
border-top: 3px solid var(--tile-color, var(--uk-blood));
padding: 8px 10px 6px;
transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
body.theme-light .uk-suite-tile {
background: linear-gradient(180deg, #f0e8dc, #e8dfd0);
border-color: rgba(40,30,20,.15);
}
.uk-suite-tile:hover {
transform: translateY(-1px);
border-color: var(--tile-color, var(--uk-blood));
box-shadow: 0 0 20px rgba(179,22,28,.22);
}
.uk-suite-tile.active {
border-color: var(--tile-color, var(--uk-blood));
box-shadow: 0 0 24px rgba(179,22,28,.32), inset 0 0 0 1px rgba(179,22,28,.15);
}
.uk-suite-tile-top {
display: flex; align-items: center; justify-content: space-between; gap: 6px;
}
.uk-suite-tile-name {
font-family: var(--uk-display); font-size: 15px; letter-spacing: .04em;
color: #efe4d0; line-height: 1;
}
body.theme-light .uk-suite-tile-name { color: #2a2018; }
.uk-suite-tile-status {
display: inline-flex; align-items: center; gap: 4px;
font-family: var(--uk-mono); font-size: 8px; letter-spacing: .12em;
color: var(--tile-color, var(--uk-brass)); text-transform: uppercase; flex: none;
}
.uk-suite-tile-status i {
width: 5px; height: 5px; border-radius: 50%;
background: var(--tile-color, var(--uk-brass));
animation: uk-pulse 2.4s infinite;
}
.uk-suite-tile-tag {
font-family: var(--uk-mono); font-size: 8px; letter-spacing: .18em;
color: var(--uk-blood); text-transform: uppercase;
}
.uk-suite-tile-path {
font-family: var(--uk-mono); font-size: 9px; color: #7a6f5a; letter-spacing: .06em;
}
body.uk-has-suite:not(.uk-spa-layout) { padding-top: 0; }
body.uk-spa-layout #uk-shell { flex-shrink: 0; }
#uk-shell.uk-shell-home .uk-shell-brand-text { display: none; }
.uk-overlay { position: fixed; inset: 0; background: rgba(7,4,5,.6); z-index: 9800; }
.uk-overlay[hidden] { display: none; }
.uk-drawer {
position: fixed; top: 0; right: 0; bottom: 0;
width: 380px; max-width: 92vw; z-index: 9900;
background: #0d0608; border-left: 2px solid var(--uk-gore);
padding: 18px 20px 28px; overflow-y: auto;
color: var(--uk-bone); font-family: var(--uk-body); font-size: 13px;
}
.uk-drawer[hidden] { display: none; }
body.theme-light .uk-drawer { background: var(--uk-iron); }
.uk-drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.uk-drawer-title { font-family: var(--uk-display); font-size: 20px; letter-spacing: .05em; text-transform: uppercase; }
.uk-drawer section { margin-bottom: 22px; }
.uk-drawer .uk-label { display: block; margin-bottom: 10px; }
.uk-drawer-note { margin: 0; color: var(--uk-ash); line-height: 1.55; }
.uk-row { display: flex; justify-content: space-between; gap: 16px; padding: 4px 0; border-bottom: 1px solid var(--uk-iron-2); }
.uk-row span:first-child { color: var(--uk-ash); }
.uk-theme-choice { display: flex; gap: 8px; flex-wrap: wrap; }
.uk-theme-choice .uk-btn.active { border-color: var(--uk-blood); color: var(--uk-blood); }
/* ═══ Mobile ═══ */
@media (max-width: 768px) {
.uk-input, .uk-select, .uk-textarea { font-size: 16px; min-height: 44px; }
.uk-btn, .uk-btn-primary, .uk-tab { min-height: 44px; }
.uk-corner { width: 22px; height: 22px; }
.uk-watermark { font-size: 180px; }
.uk-ghost { width: 380px; height: 380px; }
.uk-drawer { width: 100%; }
#uk-shell .uk-btn-sm { min-height: 36px; }
.uk-suite-tile { min-width: 100px; padding: 8px 10px 6px; }
.uk-suite-tile-name { font-size: 13px; }
.uk-suite-scroll-btn { width: 26px; height: 46px; font-size: 18px; }
.uk-shell-head { padding: 8px 12px 6px; }
.uk-suite-nav { padding: 0 6px 10px; gap: 4px; }
}