* {
box-sizing: border-box;
}
html,
body {
margin: 0;
min-height: 100%;
}
body {
min-height: 100vh;
background:
repeating-linear-gradient(
90deg,
rgba(255, 255, 255, 0.012) 0px,
rgba(255, 255, 255, 0.012) 1px,
transparent 1px,
transparent 160px
),
repeating-linear-gradient(
0deg,
rgba(255, 255, 255, 0.01) 0px,
rgba(255, 255, 255, 0.01) 1px,
transparent 1px,
transparent 120px
),
radial-gradient(
circle at center,
#112819 0%,
#07140c 48%,
#020704 100%
);
color: #b9ff8f;
font-family: Arial, Helvetica, sans-serif;
}
/* =========================================
GESAMTER BÜRO-BEREICH
========================================= */
.office-shell {
min-height: 100vh;
padding: 24px;
}
/* =========================================
KOPFBEREICH
========================================= */
.office-header {
position: relative;
height: 72px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 32px;
border-top: 2px solid rgba(185, 255, 143, 0.35);
border-bottom: 2px solid rgba(185, 255, 143, 0.28);
border-left: 8px solid #101812;
border-right: 8px solid #101812;
background:
linear-gradient(
180deg,
rgba(15, 35, 19, 0.96) 0%,
rgba(4, 17, 8, 0.98) 55%,
rgba(2, 10, 5, 0.98) 100%
);
box-shadow:
0 4px 18px rgba(0, 0, 0, 0.55),
0 0 22px rgba(125, 255, 92, 0.05),
inset 0 1px 0 rgba(185, 255, 143, 0.12),
inset 0 -1px 0 rgba(185, 255, 143, 0.08);
}
.office-header::before {
content: "";
position: absolute;
left: 10px;
right: 10px;
top: 8px;
bottom: 8px;
border: 1px solid rgba(185, 255, 143, 0.08);
pointer-events: none;
}
/* BLOM-TEC links */
.brand {
font-size: 24px;
font-weight: bold;
letter-spacing: 4px;
}
/* Standort rechts */
.location {
font-size: 13px;
letter-spacing: 2px;
opacity: 0.75;
}
/* =========================================
HAUPTBEREICH
========================================= */
.office-main {
position: relative;
min-height: calc(100vh - 120px);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
/* =========================================
VAULT-STREBEN LINKS UND RECHTS
========================================= */
.office-main::before,
.office-main::after {
content: "";
position: absolute;
top: 8%;
bottom: 8%;
width: 90px;
background:
repeating-linear-gradient(
0deg,
transparent 0px,
transparent 68px,
rgba(185, 255, 143, 0.045) 69px,
rgba(185, 255, 143, 0.045) 70px
),
linear-gradient(
90deg,
#050906 0%,
#111b13 22%,
#17231a 50%,
#111b13 78%,
#050906 100%
);
border-left: 1px solid rgba(185, 255, 143, 0.08);
border-right: 1px solid rgba(185, 255, 143, 0.08);
border-top: 8px solid #101812;
border-bottom: 8px solid #101812;
box-shadow:
0 0 30px rgba(0, 0, 0, 0.6),
inset 0 10px 12px rgba(0, 0, 0, 0.45),
inset 0 -10px 12px rgba(0, 0, 0, 0.45),
inset 1px 0 0 rgba(185, 255, 143, 0.04),
inset -1px 0 0 rgba(185, 255, 143, 0.04);
z-index: 1;
}
.office-main::before {
left: 7%;
}
.office-main::after {
right: 7%;
}
/* =========================================
ZENTRALE OVERSEER-KONSOLE
========================================= */
.office-center {
position: relative;
z-index: 1;
width: min(900px, 90%);
min-height: 380px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 40px;
border: 10px solid #101812;
border-radius: 3px;
outline: 1px solid rgba(185, 255, 143, 0.35);
background:
radial-gradient(
ellipse at center,
rgba(185, 255, 143, 0.025) 0%,
transparent 48%,
rgba(0, 0, 0, 0.18) 82%,
rgba(0, 0, 0, 0.32) 100%
),
repeating-linear-gradient(
0deg,
rgba(185, 255, 143, 0.025) 0px,
rgba(185, 255, 143, 0.025) 1px,
transparent 1px,
transparent 4px
),
linear-gradient(
180deg,
rgba(17, 42, 23, 0.88),
rgba(3, 14, 7, 0.96)
);
box-shadow:
0 0 0 2px rgba(0, 0, 0, 0.75),
0 12px 35px rgba(0, 0, 0, 0.65),
0 0 38px rgba(125, 255, 92, 0.12),
0 0 75px rgba(125, 255, 92, 0.035),
inset 0 0 0 1px rgba(185, 255, 143, 0.12),
inset 0 0 55px rgba(125, 255, 92, 0.035);
font-family: Consolas, "Courier New", monospace;
}
/* Innerer Monitor-Rahmen */
.office-center::before {
content: "";
position: absolute;
inset: 16px;
border: 1px solid rgba(185, 255, 143, 0.1);
pointer-events: none;
}
/* Bedienkonsole unter dem Monitor */
.office-center::after {
content: "";
position: absolute;
left: 8%;
right: 8%;
bottom: -38px;
height: 34px;
background:
linear-gradient(
180deg,
#1a271c 0%,
#0c150e 55%,
#050806 100%
);
border: 1px solid rgba(185, 255, 143, 0.16);
border-top: 4px solid #111b13;
clip-path: polygon(
4% 0,
96% 0,
100% 100%,
0 100%
);
box-shadow:
0 12px 20px rgba(0, 0, 0, 0.6),
inset 0 1px 0 rgba(185, 255, 143, 0.07);
}
/* =========================================
TEXT IM MONITOR
========================================= */
/* Kleine Sektor-Bezeichnung */
.sector {
font-size: 11px;
letter-spacing: 5px;
opacity: 0.55;
}
/* Haupttitel */
.office-center h1 {
margin: 20px 0 10px;
padding: 0;
font-size: clamp(34px, 5vw, 68px);
letter-spacing: 6px;
text-align: center;
text-shadow:
0 0 8px rgba(185, 255, 143, 0.28),
0 0 18px rgba(185, 255, 143, 0.08);
}
/* Systemtext */
.office-center p {
margin: 0;
font-size: 13px;
letter-spacing: 3px;
opacity: 0.6;
}
.office-center p::after {
content: " █";
opacity: 1;
animation: terminal-cursor 0.9s steps(1) infinite;
}
@keyframes terminal-cursor {
0%,
50% {
opacity: 1;
}
51%,
100% {
opacity: 0;
}
}
/* =========================================
VAULT-BODEN
========================================= */
.vault-floor {
position: absolute;
left: 4%;
right: 4%;
bottom: 2%;
height: 90px;
background:
linear-gradient(
180deg,
rgba(21, 32, 23, 0.75) 0%,
rgba(8, 14, 9, 0.9) 35%,
rgba(2, 6, 3, 0.98) 100%
);
border-top: 2px solid rgba(185, 255, 143, 0.12);
clip-path: polygon(
0 0,
100% 0,
96% 100%,
4% 100%
);
box-shadow:
0 -8px 30px rgba(0, 0, 0, 0.45),
inset 0 1px 0 rgba(185, 255, 143, 0.05);
z-index: 0;
}
/* =========================================
BLOM-TEC STATUSPANEL
========================================= */
.status-panel {
position: absolute;
left: 11%;
top: 50%;
transform: translateY(-50%);
width: 250px;
padding: 18px 20px;
background:
linear-gradient(
180deg,
rgba(14, 31, 18, 0.94),
rgba(4, 13, 7, 0.97)
);
border: 5px solid #101812;
outline: 1px solid rgba(185, 255, 143, 0.25);
box-shadow:
0 10px 25px rgba(0, 0, 0, 0.55),
0 0 24px rgba(125, 255, 92, 0.05),
inset 0 0 25px rgba(125, 255, 92, 0.025);
font-family: Consolas, "Courier New", monospace;
z-index: 1;
color: inherit;
text-decoration: none;
cursor: pointer;
}
.panel-kicker {
display: block;
margin-bottom: 16px;
font-size: 10px;
letter-spacing: 3px;
opacity: 0.55;
}
.status-line {
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
letter-spacing: 2px;
}
.status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #b9ff8f;
box-shadow:
0 0 7px rgba(185, 255, 143, 0.75);
animation: status-pulse 2.2s ease-in-out infinite;
}
.status-meta {
margin-top: 12px;
font-size: 9px;
letter-spacing: 2px;
opacity: 0.4;
}
/* =========================================
OVERSEER MELDUNG
========================================= */
.message-panel {
position: absolute;
right: 11%;
top: 50%;
transform: translateY(-50%);
width: 250px;
padding: 18px 20px;
background:
linear-gradient(
180deg,
rgba(14, 31, 18, 0.94),
rgba(4, 13, 7, 0.97)
);
border: 5px solid #101812;
outline: 1px solid rgba(185, 255, 143, 0.25);
box-shadow:
0 10px 25px rgba(0, 0, 0, 0.55),
0 0 24px rgba(125, 255, 92, 0.05),
inset 0 0 25px rgba(125, 255, 92, 0.025);
font-family: Consolas, "Courier New", monospace;
z-index: 1;
color: inherit;
text-decoration: none;
cursor: pointer;
}
.message-text {
margin: 0 0 12px;
font-size: 12px;
line-height: 1.6;
letter-spacing: 1px;
color: #b9ff8f;
opacity: 0.8;
}
/* =========================================
HAUPTNAVIGATION
========================================= */
.main-nav {
position: relative;
z-index: 2;
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
margin-top: 8px;
font-family: Consolas, "Courier New", monospace;
}
.nav-item {
position: relative;
padding: 11px 22px;
background:
linear-gradient(
180deg,
rgba(13, 29, 17, 0.94),
rgba(4, 13, 7, 0.96)
);
border: 1px solid rgba(185, 255, 143, 0.12);
color: rgba(185, 255, 143, 0.52);
text-decoration: none;
font-size: 12px;
letter-spacing: 2px;
cursor: pointer;
transition:
color 0.15s ease,
border-color 0.15s ease,
background 0.15s ease,
box-shadow 0.15s ease,
transform 0.15s ease;
}
/* Hover */
.nav-item:hover {
color: #b9ff8f;
border-color: rgba(185, 255, 143, 0.45);
background:
linear-gradient(
180deg,
rgba(20, 45, 25, 0.96),
rgba(5, 18, 9, 0.98)
);
box-shadow:
0 0 14px rgba(125, 255, 92, 0.12),
inset 0 0 12px rgba(125, 255, 92, 0.04);
transform: translateY(-1px);
}
.status-panel,
.message-panel {
transition:
border-color 0.18s ease,
box-shadow 0.18s ease,
transform 0.18s ease;
overflow: hidden;
}
.status-panel:hover {
border-color: #16251a;
box-shadow:
0 10px 25px rgba(0, 0, 0, 0.55),
0 0 30px rgba(125, 255, 92, 0.11),
inset 0 0 30px rgba(125, 255, 92, 0.04);
transform: translateY(-50%) translateX(3px);
}
.message-panel:hover {
border-color: #16251a;
box-shadow:
0 10px 25px rgba(0, 0, 0, 0.55),
0 0 30px rgba(125, 255, 92, 0.11),
inset 0 0 30px rgba(125, 255, 92, 0.04);
transform: translateY(-50%) translateX(-3px);
}
@keyframes status-pulse {
0%,
100% {
opacity: 0.7;
box-shadow:
0 0 5px rgba(185, 255, 143, 0.45);
}
50% {
opacity: 1;
box-shadow:
0 0 10px rgba(185, 255, 143, 0.8),
0 0 18px rgba(185, 255, 143, 0.25);
}
}
.status-panel::after,
.message-panel::after {
content: "";
position: absolute;
inset: 0;
background:
repeating-linear-gradient(
0deg,
rgba(185, 255, 143, 0.018) 0px,
rgba(185, 255, 143, 0.018) 1px,
transparent 1px,
transparent 4px
);
pointer-events: none;
}
/* =========================================
BLOM-TEC DECKENLEUCHTE
========================================= */
.ceiling-light {
position: absolute;
top: 7%;
left: 50%;
transform: translateX(-50%);
width: 320px;
height: 10px;
background:
linear-gradient(
180deg,
#18251a 0%,
#9fe879 45%,
#355b2c 70%,
#0b120d 100%
);
border: 5px solid #101812;
box-shadow:
0 0 12px rgba(185, 255, 143, 0.22),
0 0 35px rgba(125, 255, 92, 0.08),
0 18px 45px rgba(125, 255, 92, 0.05);
z-index: 1;
animation: vault-light-flicker 7s infinite;
}
.ceiling-light::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
width: 520px;
height: 220px;
background:
linear-gradient(
180deg,
rgba(185, 255, 143, 0.07) 0%,
rgba(125, 255, 92, 0.025) 45%,
transparent 100%
);
clip-path: polygon(
38% 0,
62% 0,
100% 100%,
0 100%
);
filter: blur(12px);
pointer-events: none;
z-index: -1;
}
@keyframes vault-light-flicker {
0%,
92%,
94%,
96%,
100% {
opacity: 1;
}
93% {
opacity: 0.72;
}
95% {
opacity: 0.88;
}
}
/* =========================================
VAULT 92 PLAKETTE
========================================= */
.vault-plaque {
position: absolute;
top: 13%;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: 12px;
padding: 7px 18px;
background:
linear-gradient(
180deg,
#172019 0%,
#0b110c 55%,
#050806 100%
);
border: 3px solid #101812;
outline: 1px solid rgba(185, 255, 143, 0.18);
box-shadow:
0 7px 16px rgba(0, 0, 0, 0.55),
inset 0 1px 0 rgba(185, 255, 143, 0.06);
font-family: Consolas, "Courier New", monospace;
color: rgba(185, 255, 143, 0.65);
z-index: 1;
}
.vault-plaque span {
font-size: 9px;
letter-spacing: 4px;
}
.vault-plaque strong {
font-size: 20px;
letter-spacing: 2px;
color: #b9ff8f;
text-shadow:
0 0 7px rgba(185, 255, 143, 0.22);
}
/* =========================================
OVERSEER MELDUNG - DETAILANSICHT
========================================= */
.message-overlay {
position: fixed;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(1, 6, 3, 0.88);
opacity: 0;
visibility: hidden;
transition:
opacity 0.2s ease,
visibility 0.2s ease;
z-index: 100;
}
.message-overlay:target {
opacity: 1;
visibility: visible;
}
.message-window {
position: relative;
width: min(620px, 88%);
padding: 35px;
background:
repeating-linear-gradient(
0deg,
rgba(185, 255, 143, 0.018) 0px,
rgba(185, 255, 143, 0.018) 1px,
transparent 1px,
transparent 4px
),
linear-gradient(
180deg,
#102016,
#050d07
);
border: 8px solid #101812;
outline: 1px solid rgba(185, 255, 143, 0.35);
box-shadow:
0 0 45px rgba(125, 255, 92, 0.12),
0 20px 60px rgba(0, 0, 0, 0.75);
font-family: Consolas, "Courier New", monospace;
color: #b9ff8f;
}
.message-close-x {
position: absolute;
top: 14px;
right: 16px;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(185, 255, 143, 0.22);
color: rgba(185, 255, 143, 0.55);
font-family: Consolas, "Courier New", monospace;
font-size: 22px;
line-height: 1;
text-decoration: none;
background: rgba(4, 13, 7, 0.55);
transition:
color 0.18s ease,
border-color 0.18s ease,
box-shadow 0.18s ease,
background 0.18s ease;
}
.message-close-x:hover {
color: #b9ff8f;
border-color: rgba(185, 255, 143, 0.55);
background: rgba(15, 38, 21, 0.85);
box-shadow:
0 0 12px rgba(125, 255, 92, 0.12);
}
.message-window h2 {
margin: 22px 0;
font-size: 26px;
letter-spacing: 3px;
}
.message-window p {
line-height: 1.8;
letter-spacing: 1px;
opacity: 0.8;
}
.message-signature {
display: block;
margin-top: 28px;
font-size: 10px;
letter-spacing: 3px;
opacity: 0.45;
}
/* =========================================
BLOM-TEC FOOTER
========================================= */
.office-footer {
min-height: 46px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 24px;
border-top: 1px solid rgba(185, 255, 143, 0.16);
background:
linear-gradient(
180deg,
rgba(5, 15, 8, 0.92),
rgba(2, 8, 4, 0.98)
);
font-family: Consolas, "Courier New", monospace;
color: rgba(185, 255, 143, 0.45);
}
.footer-system {
font-size: 9px;
letter-spacing: 3px;
}
.footer-links {
display: flex;
gap: 24px;
font-size: 9px;
letter-spacing: 2px;
}
/* =========================================
RESPONSIVE - SCHMALERE BILDSCHIRME
========================================= */
@media (max-width: 1700px) {
/* Büro wird vertikal aufgebaut */
.office-main {
min-height: 1150px;
flex-direction: column;
justify-content: flex-start;
gap: 24px;
padding-top: 280px;
padding-bottom: 150px;
}
/* Hauptmonitor */
.office-center {
order: 1;
width: min(680px, calc(100% - 150px));
min-height: 320px;
flex-shrink: 0;
}
/* Beide Nebenpanels kommen unter den Monitor */
.status-panel,
.message-panel {
position: relative;
left: auto;
right: auto;
top: auto;
transform: none;
width: min(520px, calc(100% - 180px));
}
/* Reihenfolge */
.status-panel {
order: 2;
}
.message-panel {
order: 3;
}
/* Hover für den schmalen Modus */
.status-panel:hover,
.message-panel:hover {
transform: translateY(-2px);
}
/* Vault-Streben etwas schmaler */
.office-main::before,
.office-main::after {
width: 52px;
}
.office-main::before {
left: 3%;
}
.office-main::after {
right: 3%;
}
}
/* =========================================
MOBILE - NAVIGATION
========================================= */
@media (max-width: 800px) {
.main-nav {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 6px;
padding: 0 14px;
margin-top: 10px;
}
.nav-item {
width: 100%;
min-width: 0;
padding: 10px 6px;
font-size: clamp(7px, 2vw, 10px);
letter-spacing: 0.6px;
line-height: 1.3;
text-align: center;
white-space: normal;
overflow-wrap: anywhere;
}
.nav-item:last-child {
grid-column: 1 / -1;
}
/* Mobile Kopfbereich */
.office-header {
height: auto;
min-height: 72px;
padding: 14px 18px;
gap: 16px;
}
.brand {
font-size: 18px;
letter-spacing: 3px;
white-space: nowrap;
}
.location {
font-size: 9px;
letter-spacing: 1px;
text-align: right;
line-height: 1.4;
}
/* Mobile Hauptmonitor */
.office-center {
width: calc(100% - 110px);
min-height: 300px;
padding: 28px 18px;
}
.office-center h1 {
font-size: clamp(26px, 8vw, 40px);
letter-spacing: 3px;
white-space: nowrap;
}
.office-center p {
font-size: 11px;
letter-spacing: 2px;
}
.sector {
font-size: 9px;
letter-spacing: 4px;
}
/* Mobile Vault-Streben */
.office-main::before,
.office-main::after {
width: 28px;
}
.office-main::before {
left: 1%;
}
.office-main::after {
right: 1%;
}
/* Mobile Footer */
.office-footer {
flex-direction: column;
justify-content: center;
gap: 12px;
padding: 16px 12px;
text-align: center;
}
.footer-links {
justify-content: center;
flex-wrap: wrap;
gap: 10px 16px;
}
}
/* =========================================
MEDIATHEK - HAUPTBEREICH
========================================= */
.mediathek-main {
min-height: calc(100vh - 200px);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 34px;
padding: 80px 24px;
}
/* =========================================
MEDIATHEK - TERMINAL
========================================= */
.mediathek-terminal {
position: relative;
width: min(900px, 90%);
min-height: 340px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px;
border: 8px solid #101812;
outline: 1px solid rgba(185, 255, 143, 0.30);
background:
repeating-linear-gradient(
0deg,
rgba(185, 255, 143, 0.018) 0px,
rgba(185, 255, 143, 0.018) 1px,
transparent 1px,
transparent 4px
),
linear-gradient(
180deg,
rgba(15, 38, 21, 0.92),
rgba(3, 14, 7, 0.97)
);
box-shadow:
0 12px 35px rgba(0, 0, 0, 0.65),
0 0 40px rgba(125, 255, 92, 0.08),
inset 0 0 40px rgba(125, 255, 92, 0.025);
font-family: Consolas, "Courier New", monospace;
text-align: center;
}
/* Innerer Rahmen */
.mediathek-terminal::before {
content: "";
position: absolute;
inset: 14px;
border: 1px solid rgba(185, 255, 143, 0.09);
pointer-events: none;
}
/* Titel */
.mediathek-terminal h1 {
margin: 20px 0 12px;
font-size: clamp(34px, 5vw, 64px);
letter-spacing: 7px;
text-shadow:
0 0 8px rgba(185, 255, 143, 0.25);
}
/* Lade-Text */
.mediathek-terminal p {
margin: 0;
font-size: 12px;
letter-spacing: 3px;
opacity: 0.6;
}
/* =========================================
MEDIATHEK - ARCHIV AUSWAHL
========================================= */
.archive-grid {
width: min(1100px, 92%);
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
.archive-card {
position: relative;
min-height: 170px;
padding: 24px;
background:
repeating-linear-gradient(
0deg,
rgba(185, 255, 143, 0.012) 0px,
rgba(185, 255, 143, 0.012) 1px,
transparent 1px,
transparent 4px
),
linear-gradient(
180deg,
rgba(13, 30, 17, 0.94),
rgba(4, 13, 7, 0.98)
);
border: 5px solid #101812;
outline: 1px solid rgba(185, 255, 143, 0.20);
box-shadow:
0 10px 25px rgba(0, 0, 0, 0.5),
inset 0 0 22px rgba(125, 255, 92, 0.025);
font-family: Consolas, "Courier New", monospace;
transition:
border-color 0.18s ease,
box-shadow 0.18s ease,
transform 0.18s ease,
background 0.18s ease;
}
.archive-number {
font-size: 9px;
letter-spacing: 3px;
opacity: 0.45;
}
.archive-card h2 {
margin: 20px 0 12px;
font-size: 17px;
letter-spacing: 2px;
color: #b9ff8f;
}
.archive-card p {
margin: 0;
font-size: 11px;
line-height: 1.7;
letter-spacing: 1px;
opacity: 0.55;
}
.archive-card:hover {
transform: translateY(-3px);
outline-color: rgba(185, 255, 143, 0.42);
box-shadow:
0 14px 30px rgba(0, 0, 0, 0.58),
0 0 28px rgba(125, 255, 92, 0.10),
inset 0 0 26px rgba(125, 255, 92, 0.04);
background:
repeating-linear-gradient(
0deg,
rgba(185, 255, 143, 0.016) 0px,
rgba(185, 255, 143, 0.016) 1px,
transparent 1px,
transparent 4px
),
linear-gradient(
180deg,
rgba(18, 40, 22, 0.96),
rgba(5, 16, 8, 0.98)
);
}
/* =========================================
MEDIATHEK - MOBILE FINAL
========================================= */
@media (max-width: 800px) {
.mediathek-main {
padding: 50px 14px;
gap: 24px;
}
.mediathek-terminal {
width: 100%;
min-height: 260px;
padding: 28px 18px;
}
.mediathek-terminal h1 {
font-size: clamp(28px, 10vw, 42px);
letter-spacing: 4px;
}
.archive-grid {
width: 100%;
grid-template-columns: 1fr;
gap: 14px;
}
.archive-card {
width: 100%;
min-height: 150px;
padding: 20px;
}
}
/* =========================================
ARCHIV PLACEHOLDER STATUS
========================================= */
.archive-status {
display: block;
margin-top: 22px;
font-family: Consolas, "Courier New", monospace;
font-size: 9px;
letter-spacing: 2px;
color: rgba(185, 255, 143, 0.42);
}
.archive-card:hover .archive-status {
color: #b9ff8f;
text-shadow:
0 0 7px rgba(185, 255, 143, 0.3);
}
/* =========================================
LIEBLINGSSTREAMER
========================================= */
.streamer-grid {
width: min(1100px, 92%);
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
/* Einzelne Streamer-Karte */
.streamer-card {
overflow: hidden;
background:
linear-gradient(
180deg,
rgba(13, 30, 17, 0.96),
rgba(4, 13, 7, 0.99)
);
border: 5px solid #101812;
outline: 1px solid rgba(185, 255, 143, 0.20);
box-shadow:
0 10px 25px rgba(0, 0, 0, 0.50),
0 0 32px rgba(125, 255, 92, 0.08),
inset 0 0 22px rgba(125, 255, 92, 0.025);
font-family: Consolas, "Courier New", monospace;
transition:
transform 0.18s ease,
box-shadow 0.18s ease,
outline-color 0.18s ease;
}
.streamer-card:hover {
transform: translateY(-3px);
outline-color: rgba(185, 255, 143, 0.42);
box-shadow:
0 14px 30px rgba(0, 0, 0, 0.58),
0 0 28px rgba(125, 255, 92, 0.10);
}
/* Bildbereich */
.streamer-image {
width: 100%;
aspect-ratio: 16 / 9;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background:
radial-gradient(
circle at center,
#112819,
#050d07 75%
);
border-bottom:
1px solid rgba(185, 255, 143, 0.15);
}
.streamer-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition:
transform 0.25s ease,
filter 0.25s ease;
}
.streamer-card:hover .streamer-image img {
transform: scale(1.025);
filter: brightness(1.05);
}
/* Placeholder ohne Bild */
.streamer-placeholder {
font-size: 12px;
letter-spacing: 5px;
color: rgba(185, 255, 143, 0.28);
}
/* Textbereich */
.streamer-content {
padding: 22px;
}
.streamer-content h2 {
margin: 17px 0 10px;
color: #b9ff8f;
font-size: 18px;
letter-spacing: 2px;
}
.streamer-content p {
min-height: 55px;
margin: 0;
font-size: 11px;
line-height: 1.7;
letter-spacing: 1px;
color: rgba(185, 255, 143, 0.55);
}
/* Twitch-Link */
.streamer-link {
display: inline-block;
margin-top: 20px;
color: rgba(185, 255, 143, 0.55);
font-size: 10px;
letter-spacing: 2px;
text-decoration: none;
transition:
color 0.15s ease,
text-shadow 0.15s ease;
}
.streamer-link:hover {
color: #b9ff8f;
text-shadow:
0 0 7px rgba(185, 255, 143, 0.35);
}
/* =========================================
LIEBLINGSSTREAMER - MOBILE
========================================= */
@media (max-width: 800px) {
.streamer-grid {
width: 100%;
grid-template-columns: 1fr;
gap: 14px;
}
.streamer-card {
width: 100%;
}
.streamer-content p {
min-height: 0;
}
}/* =========================================
MOBILE - HAUPTTITEL EINHEITLICH
========================================= */
@media (max-width: 800px) {
.office-center h1,
.mediathek-terminal h1,
.streamer-page-title {
font-size: clamp(34px, 5vw, 64px);
letter-spacing: 7px;
white-space: nowrap;
text-shadow:
0 0 8px rgba(185, 255, 143, 0.35),
0 0 22px rgba(125, 255, 92, 0.14);
}
}
.streamer-link-disabled {
cursor: default;
opacity: 0.35;
}
.streamer-link-disabled:hover {
color: rgba(185, 255, 143, 0.55);
text-shadow: none;
}
/* =========================================
LIEBLINGSSTREAMER - TITEL FINAL
========================================= */
/* Desktop */
.streamer-page-title {
font-size: clamp(34px, 5vw, 64px);
letter-spacing: 7px;
white-space: nowrap;
text-shadow:
0 0 8px rgba(185, 255, 143, 0.35),
0 0 22px rgba(125, 255, 92, 0.14);
}
/* =========================================
RECHTLICHE SEITEN
========================================= */
.legal-panel {
width: min(900px, 90%);
padding: 32px;
background:
repeating-linear-gradient(
0deg,
rgba(185, 255, 143, 0.012) 0px,
rgba(185, 255, 143, 0.012) 1px,
transparent 1px,
transparent 4px
),
linear-gradient(
180deg,
rgba(13, 30, 17, 0.94),
rgba(4, 13, 7, 0.98)
);
border: 5px solid #101812;
outline: 1px solid rgba(185, 255, 143, 0.20);
font-family: Consolas, "Courier New", monospace;
}
.legal-panel h2 {
margin: 20px 0 14px;
font-size: 20px;
letter-spacing: 3px;
}
.legal-panel p {
margin: 0;
line-height: 1.8;
font-size: 12px;
letter-spacing: 1px;
color: rgba(185, 255, 143, 0.65);
}
.footer-links a {
position: relative;
padding: 5px 0;
color: rgba(185, 255, 143, 0.5);
text-decoration: none;
}
.footer-links a + a::before {
content: "//";
position: absolute;
left: -12px;
top: 50%;
transform: translate(-50%, -50%);
color: rgba(185, 255, 143, 0.18);
pointer-events: none;
}
.footer-links a::after {
content: "";
position: absolute;
left: 50%;
right: 50%;
bottom: 0;
height: 1px;
background: #b9ff8f;
box-shadow:
0 0 6px rgba(185, 255, 143, 0.4);
transition:
left 0.18s ease,
right 0.18s ease;
}
.footer-links a:hover::after {
left: 0;
right: 0;
}
/* =========================================
FEHLERSEITE 404
========================================= */
.error-terminal {
min-height: 460px;
}
.error-code {
margin-top: 20px;
font-size: clamp(80px, 12vw, 150px);
font-weight: bold;
letter-spacing: 12px;
line-height: 1;
color: #b9ff8f;
text-shadow:
0 0 10px rgba(185, 255, 143, 0.35),
0 0 35px rgba(125, 255, 92, 0.12);
}
.error-title {
font-size: clamp(20px, 3vw, 34px) !important;
letter-spacing: 4px !important;
}
.error-link {
display: inline-block;
margin-top: 32px;
padding: 12px 18px;
border: 1px solid rgba(185, 255, 143, 0.25);
color: rgba(185, 255, 143, 0.65);
font-family: Consolas, "Courier New", monospace;
font-size: 10px;
letter-spacing: 2px;
text-decoration: none;
transition:
color 0.18s ease,
border-color 0.18s ease,
box-shadow 0.18s ease;
}
.error-link:hover {
color: #b9ff8f;
border-color: rgba(185, 255, 143, 0.55);
box-shadow:
0 0 18px rgba(125, 255, 92, 0.10);
}
@media (max-width: 800px) {
.error-code {
font-size: clamp(70px, 25vw, 110px);
letter-spacing: 6px;
}
.error-title {
font-size: clamp(16px, 5vw, 24px) !important;
letter-spacing: 2px !important;
white-space: normal !important;
}
}
/* =========================================
AUTOMATISCHES VIDEO-ARCHIV
========================================= */
.video-grid {
width: min(1100px, 92%);
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
/* Einzelne Video-Karte */
.video-card {
overflow: hidden;
background:
linear-gradient(
180deg,
rgba(13, 30, 17, 0.96),
rgba(4, 13, 7, 0.99)
);
border: 5px solid #101812;
outline: 1px solid rgba(185, 255, 143, 0.20);
box-shadow:
0 10px 25px rgba(0, 0, 0, 0.50),
inset 0 0 22px rgba(125, 255, 92, 0.025);
font-family: Consolas, "Courier New", monospace;
transition:
transform 0.18s ease,
box-shadow 0.18s ease,
outline-color 0.18s ease;
}
.video-card:hover {
transform: translateY(-3px);
outline-color: rgba(185, 255, 143, 0.42);
box-shadow:
0 14px 30px rgba(0, 0, 0, 0.58),
0 0 28px rgba(125, 255, 92, 0.10);
}
/* Thumbnail */
.video-thumbnail {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
background: #050d07;
border-bottom:
1px solid rgba(185, 255, 143, 0.15);
}
.video-thumbnail img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition:
transform 0.25s ease,
filter 0.25s ease;
}
.video-card:hover .video-thumbnail img {
transform: scale(1.025);
filter: brightness(1.05);
}
/* Textbereich */
.video-content {
padding: 22px;
}
.video-content h2 {
margin: 17px 0 10px;
color: #b9ff8f;
font-size: 18px;
line-height: 1.35;
letter-spacing: 2px;
}
.video-content p {
margin: 0;
min-height: 55px;
font-size: 11px;
line-height: 1.7;
letter-spacing: 1px;
color: rgba(185, 255, 143, 0.55);
}
/* YouTube-Link */
.video-link {
display: inline-block;
margin-top: 20px;
color: rgba(185, 255, 143, 0.55);
font-size: 10px;
letter-spacing: 2px;
text-decoration: none;
transition:
color 0.15s ease,
text-shadow 0.15s ease;
}
.video-link:hover {
color: #b9ff8f;
text-shadow:
0 0 7px rgba(185, 255, 143, 0.35);
}
/* =========================================
VIDEO-ARCHIV - MOBILE
========================================= */
@media (max-width: 800px) {
.video-grid {
width: 100%;
grid-template-columns: 1fr;
gap: 14px;
}
.video-card {
width: 100%;
}
.video-content p {
min-height: 0;
}
}
/* =========================================
VIDEO-ARCHIV ÜBERSCHRIFT
========================================= */
.video-archive-header {
width: min(1100px, 92%);
padding: 22px 26px;
background:
linear-gradient(
180deg,
rgba(13, 30, 17, 0.88),
rgba(4, 13, 7, 0.95)
);
border-left: 4px solid #101812;
border-right: 4px solid #101812;
border-top:
1px solid rgba(185, 255, 143, 0.16);
border-bottom:
1px solid rgba(185, 255, 143, 0.16);
font-family: Consolas, "Courier New", monospace;
}
.video-archive-header h2 {
margin: 10px 0 8px;
font-size: 20px;
letter-spacing: 3px;
color: #b9ff8f;
}
.video-archive-header p {
margin: 0;
font-size: 10px;
line-height: 1.6;
letter-spacing: 1px;
color: rgba(185, 255, 143, 0.50);
}
@media (max-width: 800px) {
.video-archive-header {
width: 100%;
padding: 18px;
}
}
/* =========================================
MEDIATHEK - ANKLICKBARE ARCHIVKARTE
========================================= */
.archive-card-link {
display: block;
color: inherit;
text-decoration: none;
cursor: pointer;
}
/* =========================================
LEERES MEDIATHEK-ARCHIV
========================================= */
.archive-empty {
grid-column: 1 / -1;
width: 100%;
padding: 24px;
border:
1px dashed rgba(185, 255, 143, 0.14);
background:
rgba(4, 13, 7, 0.45);
font-family:
Consolas,
"Courier New",
monospace;
text-align: center;
}
.archive-empty span {
font-size: 9px;
letter-spacing: 3px;
color:
rgba(185, 255, 143, 0.32);
}
/* =========================================
MEDIATHEK - SANFTES ARCHIV SCROLLEN
========================================= */
html {
scroll-behavior: smooth;
}
/* Beim Anspringen etwas Abstand nach oben */
#stream-archiv,
#clips-archiv,
#musik-archiv,
#tools-archiv,
#web-archiv,
#media-archiv,
#show-info,
#show-teilnahme,
#show-anmeldung {
scroll-margin-top: 30px;
}
/* =========================================
MEDIATHEK - VIDEO DATUM
========================================= */
.video-date {
margin-top: 14px;
font-size: 9px;
letter-spacing: 2px;
color: rgba(185, 255, 143, 0.35);
}
/* =========================================
PROJEKTSTATUS
========================================= */
.project-status {
display: inline-block;
margin-top: 18px;
padding: 6px 9px;
border: 1px solid rgba(185, 255, 143, 0.20);
font-family: Consolas, "Courier New", monospace;
font-size: 9px;
letter-spacing: 2px;
background: rgba(4, 13, 7, 0.45);
}
/* IN ENTWICKLUNG */
.project-status-entwicklung {
color: #b9ff8f;
border-color:
rgba(185, 255, 143, 0.30);
box-shadow:
inset 0 0 12px rgba(185, 255, 143, 0.04);
}
/* ABGESCHLOSSEN */
.project-status-fertig {
color: rgba(210, 255, 190, 0.90);
border-color:
rgba(210, 255, 190, 0.38);
box-shadow:
0 0 10px rgba(185, 255, 143, 0.07);
}
/* PAUSIERT */
.project-status-pausiert {
color: rgba(255, 195, 110, 0.78);
border-color:
rgba(255, 195, 110, 0.24);
}
/* KONZEPT */
.project-status-idee {
color: rgba(150, 230, 210, 0.78);
border-color:
rgba(150, 230, 210, 0.24);
}
/* Projekt-Link mit Abstand */
.project-link {
display: block;
margin-top: 14px;
}
/* =========================================
PROJEKT-KARTEN MIT BILD
========================================= */
.project-card {
overflow: hidden;
}
.project-image {
margin:
-24px
-24px
20px;
aspect-ratio: 16 / 9;
overflow: hidden;
background:
radial-gradient(
circle at center,
#112819,
#050d07 75%
);
border-bottom:
1px solid rgba(185, 255, 143, 0.15);
}
.project-image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition:
transform 0.25s ease,
filter 0.25s ease;
}
.project-card:hover .project-image img {
transform: scale(1.025);
filter: brightness(1.05);
}
/* Mobile */
@media (max-width: 800px) {
.project-image {
margin:
-20px
-20px
18px;
}
.footer-links a + a::before {
left: -8px;
}
}
/* =========================================
LEERES LIEBLINGSSTREAMER-ARCHIV
========================================= */
.streamer-empty {
grid-column: 1 / -1;
padding: 32px;
border: 1px solid rgba(185, 255, 143, 0.15);
background:
rgba(4, 13, 7, 0.55);
text-align: center;
font-family:
Consolas,
"Courier New",
monospace;
font-size: 10px;
letter-spacing: 2px;
color:
rgba(185, 255, 143, 0.65);
}
/* =========================================
SHOUTOUT SHOW // BROADCAST DESIGN
========================================= */
.shoutout-page .mediathek-terminal {
overflow: hidden;
box-shadow:
0 12px 35px rgba(0, 0, 0, 0.65),
0 0 45px rgba(125, 255, 92, 0.10),
inset 0 0 55px rgba(125, 255, 92, 0.035);
}
/* Broadcast-Status oben rechts */
.shoutout-page .mediathek-terminal::after {
content: "● BROADCAST NODE // STANDBY";
position: absolute;
top: 22px;
right: 28px;
font-family:
Consolas,
"Courier New",
monospace;
font-size: 8px;
letter-spacing: 2px;
color: rgba(185, 255, 143, 0.55);
text-shadow:
0 0 7px rgba(185, 255, 143, 0.20);
animation:
broadcast-pulse 2.5s ease-in-out infinite;
}
/* Show-Titel */
.shoutout-page .streamer-page-title {
text-shadow:
0 0 8px rgba(185, 255, 143, 0.30),
0 0 24px rgba(125, 255, 92, 0.10);
}
/* Show-Karten */
.shoutout-page .archive-card {
border-top:
1px solid rgba(185, 255, 143, 0.28);
}
/* Kleines Broadcast-Pulsieren */
@keyframes broadcast-pulse {
0%,
100% {
opacity: 0.45;
}
50% {
opacity: 1;
}
}
/* =========================================
SHOUTOUT SHOW // MOBILE
========================================= */
@media (max-width: 800px) {
.shoutout-page .mediathek-terminal::after {
top: 16px;
right: 18px;
font-size: 6px;
letter-spacing: 1px;
}
}
/* =========================================
SHOUTOUT SHOW // BROADCAST STATUS
========================================= */
.broadcast-status {
width: min(1100px, 92%);
display: grid;
grid-template-columns: repeat(3, 1fr);
border-top:
1px solid rgba(185, 255, 143, 0.18);
border-bottom:
1px solid rgba(185, 255, 143, 0.18);
background:
rgba(4, 13, 7, 0.65);
font-family:
Consolas,
"Courier New",
monospace;
}
.broadcast-status-item {
position: relative;
padding: 18px 22px;
text-align: center;
}
.broadcast-status-item + .broadcast-status-item {
border-left:
1px solid rgba(185, 255, 143, 0.12);
}
.broadcast-status-item span {
display: block;
margin-bottom: 8px;
font-size: 8px;
letter-spacing: 3px;
color:
rgba(185, 255, 143, 0.38);
}
.broadcast-status-item strong {
font-size: 11px;
letter-spacing: 2px;
color: #b9ff8f;
font-weight: normal;
text-shadow:
0 0 7px rgba(185, 255, 143, 0.18);
}
/* =========================================
BROADCAST STATUS // MOBILE
========================================= */
@media (max-width: 800px) {
.broadcast-status {
width: 100%;
grid-template-columns: 1fr;
}
.broadcast-status-item + .broadcast-status-item {
border-left: 0;
border-top:
1px solid rgba(185, 255, 143, 0.10);
}
}
/* =========================================
SHOUTOUT SHOW // BEWERBUNGSSYSTEM
========================================= */
.application-system {
width: min(1100px, 92%);
font-family:
Consolas,
"Courier New",
monospace;
}
/* =========================================
GESCHLOSSENER STATUS
========================================= */
.application-closed-message {
padding: 30px;
border: 5px solid #101812;
outline: 1px solid rgba(185, 255, 143, 0.20);
background:
linear-gradient(
180deg,
rgba(13, 30, 17, 0.94),
rgba(4, 13, 7, 0.98)
);
}
.application-closed-message h2 {
margin: 18px 0 12px;
font-size: 18px;
letter-spacing: 2px;
color: #b9ff8f;
}
.application-closed-message p {
max-width: 720px;
margin: 0;
font-size: 11px;
line-height: 1.8;
letter-spacing: 1px;
color: rgba(185, 255, 143, 0.55);
}
/* =========================================
SHOW-MATERIAL // ACCESS CONTROL
========================================= */
#show-material-access-message {
margin-top: 20px;
padding: 26px 30px;
border: 5px solid #101812;
outline: 1px solid rgba(185, 255, 143, 0.20);
background:
linear-gradient(
180deg,
rgba(13, 30, 17, 0.94),
rgba(4, 13, 7, 0.98)
);
box-shadow:
0 10px 25px rgba(0, 0, 0, 0.35),
inset 0 0 24px rgba(125, 255, 92, 0.025);
}
#show-material-access-message {
margin-top: 20px;
padding: 26px 30px;
border: 5px solid #101812;
outline: 1px solid rgba(185, 255, 143, 0.20);
background:
linear-gradient(
180deg,
rgba(13, 30, 17, 0.94),
rgba(4, 13, 7, 0.98)
);
box-shadow:
0 10px 25px rgba(0, 0, 0, 0.35),
inset 0 0 24px rgba(125, 255, 92, 0.025);
}
#show-material-access-message strong {
display: block;
margin: 10px 0 14px;
font-size: 16px;
letter-spacing: 2px;
color: #b9ff8f;
text-shadow:
0 0 8px rgba(185, 255, 143, 0.22);
}
#show-material-access-message .archive-status {
display: inline-block;
margin-top: 18px;
padding: 7px 10px;
border: 1px solid rgba(185, 255, 143, 0.22);
background:
rgba(185, 255, 143, 0.035);
color:
rgba(185, 255, 143, 0.58);
letter-spacing: 2px;
}
#show-material-access-message .twitch-auth-button {
padding: 10px 16px;
border: 1px solid rgba(185, 255, 143, 0.45);
background:
rgba(185, 255, 143, 0.06);
color: #b9ff8f;
text-shadow:
0 0 7px rgba(185, 255, 143, 0.25);
box-shadow:
inset 0 0 14px rgba(185, 255, 143, 0.05),
0 0 12px rgba(125, 255, 92, 0.06);
}
/* =========================================
FORMULAR
========================================= */
.application-form {
display: grid;
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap: 18px;
}
#show-material-form {
padding: 26px 30px;
border: 5px solid #101812;
outline: 1px solid rgba(185, 255, 143, 0.20);
background:
linear-gradient(
180deg,
rgba(13, 30, 17, 0.72),
rgba(4, 13, 7, 0.90)
);
}
#show-material-form input[readonly] {
border-color: rgba(185, 255, 143, 0.30);
background:
rgba(185, 255, 143, 0.035);
color:
rgba(185, 255, 143, 0.72);
cursor: default;
}
#show-material-form .application-confirm {
padding: 16px 18px;
border-color:
rgba(185, 255, 143, 0.28);
background:
rgba(185, 255, 143, 0.035);
box-shadow:
inset 0 0 18px rgba(125, 255, 92, 0.025);
}
#show-material-form .application-submit button {
padding: 14px 22px;
border-color:
rgba(185, 255, 143, 0.48);
background:
rgba(185, 255, 143, 0.055);
box-shadow:
inset 0 0 14px rgba(125, 255, 92, 0.035),
0 0 12px rgba(125, 255, 92, 0.05);
text-shadow:
0 0 7px rgba(185, 255, 143, 0.22);
}
#show-material-form .application-submit > span {
padding: 8px 10px;
border-left:
1px solid rgba(185, 255, 143, 0.18);
color:
rgba(185, 255, 143, 0.50);
letter-spacing: 2px;
}
.application-field {
display: flex;
flex-direction: column;
gap: 8px;
}
.application-field-full {
grid-column: 1 / -1;
}
.application-field label {
font-size: 9px;
letter-spacing: 2px;
color: rgba(185, 255, 143, 0.60);
}
.application-field input,
.application-field textarea {
width: 100%;
padding: 14px 16px;
border:
1px solid rgba(185, 255, 143, 0.18);
outline: none;
background:
rgba(2, 10, 5, 0.90);
color: #b9ff8f;
font-family:
Consolas,
"Courier New",
monospace;
font-size: 11px;
resize: vertical;
}
.application-field input:focus,
.application-field textarea:focus {
border-color:
rgba(185, 255, 143, 0.55);
box-shadow:
0 0 15px rgba(125, 255, 92, 0.08);
}
.application-field input::placeholder,
.application-field textarea::placeholder {
color:
rgba(185, 255, 143, 0.25);
}
/* =========================================
ABSENDEN
========================================= */
.application-submit {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
margin-top: 8px;
}
.application-submit button {
padding: 14px 20px;
border:
1px solid rgba(185, 255, 143, 0.30);
background:
rgba(4, 13, 7, 0.80);
color: #b9ff8f;
font-family:
Consolas,
"Courier New",
monospace;
font-size: 10px;
letter-spacing: 2px;
cursor: pointer;
}
.application-submit button:hover {
border-color:
rgba(185, 255, 143, 0.60);
box-shadow:
0 0 16px rgba(125, 255, 92, 0.10);
}
.application-submit span {
font-size: 8px;
letter-spacing: 2px;
color:
rgba(185, 255, 143, 0.30);
}
/* =========================================
OFFEN / GESCHLOSSEN
========================================= */
.application-closed .application-form {
display: none !important;
}
.application-closed #shoutout-twitch-login {
display: none !important;
}
.application-open .application-closed-message {
display: none;
}
/* =========================================
MOBILE
========================================= */
@media (max-width: 800px) {
.application-system {
width: 100%;
}
.application-form {
grid-template-columns: 1fr;
}
.application-field-full {
grid-column: auto;
}
.application-submit {
flex-direction: column;
align-items: stretch;
}
.application-submit button {
width: 100%;
}
}
.application-note {
margin: 0;
padding: 14px 16px;
border-left:
2px solid rgba(185, 255, 143, 0.28);
background:
rgba(4, 13, 7, 0.45);
font-size: 9px;
line-height: 1.7;
letter-spacing: 1px;
color:
rgba(185, 255, 143, 0.50);
}
/* =========================================
SHOUTOUT SHOW // BESTÄTIGUNGS-CHECKBOX
========================================= */
.application-confirm {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 14px 16px;
border:
1px solid rgba(185, 255, 143, 0.16);
background:
rgba(4, 13, 7, 0.45);
font-family:
Consolas,
"Courier New",
monospace;
cursor: pointer;
}
/* Standard Checkbox verstecken */
.application-confirm input {
position: absolute;
opacity: 0;
pointer-events: none;
}
/* Eigene BLOM-TEC Checkbox */
.application-confirm span {
position: relative;
padding-left: 32px;
font-size: 9px;
line-height: 1.7;
letter-spacing: 1px;
color:
rgba(185, 255, 143, 0.55);
}
/* Checkbox Rahmen */
.application-confirm span::before {
content: "";
position: absolute;
left: 0;
top: 2px;
width: 18px;
height: 18px;
border:
1px solid rgba(185, 255, 143, 0.35);
background:
rgba(2, 10, 5, 0.90);
box-shadow:
inset 0 0 8px rgba(125, 255, 92, 0.03);
transition:
border-color 0.18s ease,
box-shadow 0.18s ease,
background 0.18s ease;
}
/* Haken */
.application-confirm span::after {
content: "✓";
position: absolute;
left: 4px;
top: -1px;
font-size: 18px;
line-height: 1;
color: #b9ff8f;
opacity: 0;
transform: scale(0.6);
text-shadow:
0 0 8px rgba(185, 255, 143, 0.45);
transition:
opacity 0.15s ease,
transform 0.15s ease;
}
/* Aktiv */
.application-confirm input:checked + span::before {
border-color:
rgba(185, 255, 143, 0.75);
background:
rgba(15, 38, 21, 0.85);
box-shadow:
0 0 12px rgba(125, 255, 92, 0.12),
inset 0 0 8px rgba(125, 255, 92, 0.08);
}
.application-confirm input:checked + span::after {
opacity: 1;
transform: scale(1);
}
/* Hover */
.application-confirm:hover {
border-color:
rgba(185, 255, 143, 0.28);
}
.application-confirm:hover span::before {
border-color:
rgba(185, 255, 143, 0.55);
}
/* Tastatur-Fokus */
.application-confirm input:focus-visible + span::before {
outline:
1px solid #b9ff8f;
outline-offset: 3px;
}
/* =========================================
ABOUT ME // OVERSEER PERSONALAKTE
========================================= */
.about-profile {
width: min(1100px, 92%);
display: grid;
grid-template-columns: 340px minmax(0, 1fr);
gap: 20px;
font-family:
Consolas,
"Courier New",
monospace;
}
/* =========================================
PORTRAIT
========================================= */
.about-portrait {
padding: 14px;
border: 5px solid #101812;
outline: 1px solid rgba(185, 255, 143, 0.20);
background:
linear-gradient(
180deg,
rgba(13, 30, 17, 0.94),
rgba(4, 13, 7, 0.98)
);
}
.about-portrait-label {
display: block;
margin-bottom: 12px;
font-size: 8px;
letter-spacing: 3px;
color:
rgba(185, 255, 143, 0.38);
}
.about-portrait-placeholder {
min-height: 360px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
border:
1px solid rgba(185, 255, 143, 0.12);
background:
repeating-linear-gradient(
0deg,
rgba(185, 255, 143, 0.015) 0px,
rgba(185, 255, 143, 0.015) 1px,
transparent 1px,
transparent 4px
),
rgba(2, 10, 5, 0.80);
text-align: center;
}
.about-portrait-placeholder span {
font-size: 9px;
letter-spacing: 4px;
color:
rgba(185, 255, 143, 0.35);
}
.about-portrait-placeholder strong {
color: #b9ff8f;
font-size: 26px;
letter-spacing: 4px;
font-weight: normal;
text-shadow:
0 0 12px rgba(185, 255, 143, 0.15);
}
.about-portrait-placeholder small {
margin-top: 20px;
font-size: 8px;
letter-spacing: 2px;
color:
rgba(185, 255, 143, 0.25);
}
/* =========================================
DATENBEREICH
========================================= */
.about-profile-data {
padding: 30px;
border: 5px solid #101812;
outline: 1px solid rgba(185, 255, 143, 0.20);
background:
linear-gradient(
180deg,
rgba(13, 30, 17, 0.94),
rgba(4, 13, 7, 0.98)
);
}
.about-profile-data h2 {
margin: 20px 0 14px;
color: #b9ff8f;
font-size: 24px;
letter-spacing: 3px;
font-weight: normal;
}
.about-profile-intro {
max-width: 650px;
margin: 0 0 26px;
font-size: 11px;
line-height: 1.8;
letter-spacing: 1px;
color:
rgba(185, 255, 143, 0.55);
}
/* =========================================
PERSONALDATEN GRID
========================================= */
.about-data-grid {
display: grid;
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap: 10px;
}
.about-data-entry {
padding: 14px 16px;
border:
1px solid rgba(185, 255, 143, 0.12);
background:
rgba(2, 10, 5, 0.60);
}
.about-data-entry span {
display: block;
margin-bottom: 7px;
font-size: 7px;
letter-spacing: 2px;
color:
rgba(185, 255, 143, 0.32);
}
.about-data-entry strong {
color:
rgba(185, 255, 143, 0.78);
font-size: 11px;
letter-spacing: 2px;
font-weight: normal;
}
/* =========================================
MOBILE
========================================= */
@media (max-width: 800px) {
.about-profile {
width: 100%;
grid-template-columns: 1fr;
}
.about-portrait-placeholder {
min-height: 280px;
}
.about-profile-data {
padding: 22px;
}
.about-profile-data h2 {
font-size: 19px;
}
.about-data-grid {
grid-template-columns: 1fr;
}
}
/* =========================================
ABOUT ME // OVERSEER PORTRAIT
========================================= */
.about-portrait-image {
width: 100%;
overflow: hidden;
border:
1px solid rgba(185, 255, 143, 0.14);
background:
rgba(2, 10, 5, 0.80);
}
.about-portrait-image img {
display: block;
width: 100%;
height: auto;
object-fit: cover;
filter:
brightness(0.92)
contrast(1.05);
transition:
transform 0.3s ease,
filter 0.3s ease;
}
.about-portrait:hover .about-portrait-image img {
transform: scale(1.015);
filter:
brightness(1)
contrast(1.05);
}
/* =========================================
BLOM-TEC // KLICKBARER BRAND
========================================= */
.brand-link {
color: inherit;
text-decoration: none;
cursor: pointer;
transition:
color 0.18s ease,
text-shadow 0.18s ease,
opacity 0.18s ease;
}
.brand-link:hover {
color: #b9ff8f;
text-shadow:
0 0 10px rgba(185, 255, 143, 0.28);
}
.brand-link:focus-visible {
outline:
1px solid rgba(185, 255, 143, 0.55);
outline-offset: 5px;
}
/* =========================================
NAVIGATION // AKTIVE SEITE
========================================= */
.nav-item[aria-current="page"] {
color: #b9ff8f;
border-color:
rgba(185, 255, 143, 0.42);
background:
rgba(15, 38, 21, 0.72);
box-shadow:
0 0 14px rgba(125, 255, 92, 0.08),
inset 0 0 12px rgba(125, 255, 92, 0.04);
text-shadow:
0 0 7px rgba(185, 255, 143, 0.25);
cursor: default;
}
/* =========================================
SHOUTOUT SHOW // CHECKBOX OVERFLOW FIX
========================================= */
.shoutout-page .application-confirm input[type="checkbox"] {
position: absolute;
width: 1px;
height: 1px;
min-width: 0;
max-width: none;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* =========================================
ABOUT ME // DESKTOP FEINSCHLIFF
========================================= */
/* =========================================
ABOUT ME // DESKTOP FEINSCHLIFF
========================================= */
@media (min-width: 1200px) {
.about-page .video-archive-header {
width: min(1060px, 90%);
padding: 26px 30px;
}
.about-page .video-archive-header h2 {
font-size: 22px;
line-height: 1.3;
}
.about-page .video-archive-header p {
max-width: 920px;
font-size: 11px;
line-height: 1.75;
}
}
/* =========================================
SHOUTOUT SHOW // DISCORD-KARTE DESKTOP
========================================= */
@media (min-width: 801px) {
#show-teilnahme + .archive-grid .archive-card:last-child {
grid-column: 2;
}
}
/* =========================================
SHOUTOUT SHOW // BEWERBUNGSFORMULAR DESKTOP
========================================= */
@media (min-width: 801px) {
#bewerbung-form {
grid-template-columns:
repeat(3, minmax(0, 1fr));
}
}
/* =========================================
MEDIATHEK // EINZELNE KARTE ZENTRIEREN
========================================= */
@media (min-width: 801px) {
.video-grid > .video-card:only-child {
grid-column: 2;
}
}
/* =========================================
B.L.O.M PROJEKTE // EINZELNE KARTE ZENTRIEREN
========================================= */
@media (min-width: 801px) {
.archive-grid > .project-card:only-child {
grid-column: 2;
}
}
/* =========================================
LIEBLINGSSTREAMER // EINZELNE KARTE ZENTRIEREN
========================================= */
@media (min-width: 801px) {
.streamer-grid > .streamer-card:only-child {
grid-column: 2;
}
}
/* =========================================
BLOM-TEC // TWITCH STATUS
========================================= */
/* -----------------------------------------
OFFLINE
----------------------------------------- */
#twitch-status-panel.twitch-offline {
box-shadow:
0 8px 20px rgba(0, 0, 0, 0.35),
inset 0 0 14px rgba(125, 255, 92, 0.02);
}
#twitch-status-panel.twitch-offline
.status-dot {
opacity: 0.45;
box-shadow: none;
}
#twitch-status-panel.twitch-offline
#twitch-status-text {
opacity: 0.75;
}
/* -----------------------------------------
LIVE
----------------------------------------- */
#twitch-status-panel.twitch-live {
box-shadow:
0 0 24px rgba(125, 255, 92, 0.18),
inset 0 0 20px rgba(125, 255, 92, 0.05);
}
#twitch-status-panel.twitch-live
.status-dot {
opacity: 1;
box-shadow:
0 0 6px rgba(185, 255, 143, 0.85),
0 0 14px rgba(125, 255, 92, 0.55);
animation:
twitch-live-pulse
1.8s
ease-in-out
infinite;
}
#twitch-status-panel.twitch-live
#twitch-status-text {
text-shadow:
0 0 8px rgba(185, 255, 143, 0.35);
}
/* -----------------------------------------
LIVE PULS
----------------------------------------- */
@keyframes twitch-live-pulse {
0%,
100% {
opacity: 0.55;
transform: scale(0.90);
}
50% {
opacity: 1;
transform: scale(1.15);
}
}
/* =========================================
BLOM-TEC // STREAMER LIVE STATUS
========================================= */
.streamer-live-status {
margin-top: 12px;
margin-bottom: 12px;
font-size: 11px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
}
/* -----------------------------------------
OFFLINE
----------------------------------------- */
.streamer-live-status.is-offline {
opacity: 0.45;
}
/* -----------------------------------------
LIVE
----------------------------------------- */
.streamer-live-status.is-live {
opacity: 1;
text-shadow:
0 0 6px rgba(185, 255, 143, 0.75),
0 0 14px rgba(125, 255, 92, 0.40);
animation:
streamer-live-pulse
1.8s
ease-in-out
infinite;
}
/* -----------------------------------------
LIVE PULS
----------------------------------------- */
@keyframes streamer-live-pulse {
0%,
100% {
opacity: 0.70;
}
50% {
opacity: 1;
}
}
/* =========================================
BLOM-TEC // STREAMER LIVE KARTE
========================================= */
/* -----------------------------------------
OFFLINE
----------------------------------------- */
.streamer-card.streamer-card-offline {
opacity: 0.94;
}
/* -----------------------------------------
LIVE
----------------------------------------- */
.streamer-card.streamer-card-live {
outline:
1px solid
rgba(185, 255, 143, 0.45);
box-shadow:
0 10px 25px rgba(0, 0, 0, 0.50),
0 0 18px rgba(125, 255, 92, 0.18),
0 0 42px rgba(125, 255, 92, 0.10),
inset 0 0 24px rgba(125, 255, 92, 0.05);
}
/* -----------------------------------------
LIVE HOVER
----------------------------------------- */
.streamer-card.streamer-card-live:hover {
box-shadow:
0 12px 28px rgba(0, 0, 0, 0.55),
0 0 24px rgba(125, 255, 92, 0.25),
0 0 55px rgba(125, 255, 92, 0.14),
inset 0 0 26px rgba(125, 255, 92, 0.06);
}
/* =========================================
BLOM-TEC // STREAMER LIVE BADGE
========================================= */
.streamer-image {
position: relative;
}
/* -----------------------------------------
LIVE BADGE
----------------------------------------- */
.streamer-live-badge {
position: absolute;
top: 12px;
left: 12px;
z-index: 5;
padding:
6px 10px;
background:
rgba(5, 18, 8, 0.92);
border:
1px solid
rgba(185, 255, 143, 0.65);
box-shadow:
0 0 10px rgba(125, 255, 92, 0.25),
inset 0 0 8px rgba(125, 255, 92, 0.08);
color:
#b9ff8f;
font-size:
11px;
font-weight:
700;
letter-spacing:
2px;
text-transform:
uppercase;
text-shadow:
0 0 6px rgba(185, 255, 143, 0.65);
pointer-events:
none;
animation:
streamer-live-badge-pulse
1.8s
ease-in-out
infinite;
}
/* -----------------------------------------
LIVE BADGE PULSE
----------------------------------------- */
@keyframes streamer-live-badge-pulse {
0%,
100% {
opacity: 0.80;
}
50% {
opacity: 1;
}
}
/* =========================================
BLOM-TEC // STREAMER LIVE TITEL
========================================= */
.streamer-live-title {
margin-top: -4px;
margin-bottom: 14px;
padding-left: 10px;
border-left:
2px solid
rgba(185, 255, 143, 0.45);
color:
rgba(185, 255, 143, 0.82);
font-size:
12px;
line-height:
1.5;
letter-spacing:
0.6px;
text-shadow:
0 0 6px
rgba(125, 255, 92, 0.16);
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
line-clamp: 3;
overflow: hidden;
}
/* =========================================
BLOM-TEC // GLOBALER TWITCH STATUS
========================================= */
.global-twitch-status {
position: relative;
width: fit-content;
margin:
10px 0 18px auto;
z-index: 20;
display: flex;
align-items: center;
gap: 10px;
min-width: 210px;
padding:
10px 14px;
background:
rgba(4, 13, 7, 0.96);
border:
1px solid
rgba(185, 255, 143, 0.22);
box-shadow:
0 8px 24px
rgba(0, 0, 0, 0.45);
color:
#b9ff8f;
text-decoration:
none;
font-family:
Consolas,
"Courier New",
monospace;
transition:
border-color 0.2s ease,
box-shadow 0.2s ease,
transform 0.2s ease;
}
/* -----------------------------------------
STATUS DOT
----------------------------------------- */
.global-twitch-status-dot {
width: 9px;
height: 9px;
flex-shrink: 0;
border-radius: 50%;
background:
#b9ff8f;
}
/* -----------------------------------------
TEXT
----------------------------------------- */
.global-twitch-status-content {
min-width: 0;
}
.global-twitch-status-text {
font-size: 11px;
font-weight: 700;
letter-spacing: 1.6px;
}
.global-twitch-status-meta {
margin-top: 3px;
font-size: 9px;
letter-spacing: 1px;
opacity: 0.60;
}
/* -----------------------------------------
OFFLINE
----------------------------------------- */
.global-twitch-status.twitch-offline {
opacity: 0.72;
}
.global-twitch-status.twitch-offline
.global-twitch-status-dot {
opacity: 0.40;
box-shadow: none;
}
/* -----------------------------------------
LIVE
----------------------------------------- */
.global-twitch-status.twitch-live {
opacity: 1;
border-color:
rgba(185, 255, 143, 0.55);
box-shadow:
0 8px 24px rgba(0, 0, 0, 0.45),
0 0 20px rgba(125, 255, 92, 0.18);
}
.global-twitch-status.twitch-live
.global-twitch-status-dot {
box-shadow:
0 0 6px rgba(185, 255, 143, 0.90),
0 0 14px rgba(125, 255, 92, 0.55);
animation:
global-twitch-pulse
1.8s
ease-in-out
infinite;
}
/* -----------------------------------------
HOVER
----------------------------------------- */
.global-twitch-status:hover {
transform:
translateY(-2px);
border-color:
rgba(185, 255, 143, 0.50);
}
/* -----------------------------------------
LIVE PULSE
----------------------------------------- */
@keyframes global-twitch-pulse {
0%,
100% {
opacity: 0.55;
transform: scale(0.90);
}
50% {
opacity: 1;
transform: scale(1.15);
}
}
/* -----------------------------------------
MOBILE
----------------------------------------- */
@media (max-width: 700px) {
.global-twitch-status {
width:
calc(100% - 24px);
max-width:
none;
min-width:
0;
margin:
10px 12px 18px;
}
}
/* =========================================
SHOUTOUT SHOW // APPLICATION SUCCESS
========================================= */
.application-message-success {
margin-top: 18px;
padding: 18px 20px;
border: 1px solid rgba(185, 255, 143, 0.45);
background:
rgba(10, 35, 15, 0.55);
box-shadow:
inset 0 0 20px
rgba(185, 255, 143, 0.04);
}
.application-message-success span {
display: block;
margin-bottom: 8px;
font-size: 9px;
letter-spacing: 2px;
color: rgba(185, 255, 143, 0.65);
}
.application-message-success strong {
display: block;
margin-bottom: 10px;
font-size: 13px;
letter-spacing: 1px;
color: #b9ff8f;
}
.application-message-success p {
margin: 0;
font-size: 11px;
line-height: 1.6;
color: rgba(185, 255, 143, 0.8);
}
/* =========================================
SHOUTOUT SHOW // APPLICATION ERROR
========================================= */
.application-message-error {
margin-top: 18px;
padding: 18px 20px;
border: 1px solid rgba(255, 90, 90, 0.5);
background:
rgba(45, 8, 8, 0.55);
box-shadow:
inset 0 0 20px
rgba(255, 90, 90, 0.05);
}
.application-message-error span {
display: block;
margin-bottom: 8px;
font-size: 9px;
letter-spacing: 2px;
color: rgba(255, 120, 120, 0.7);
}
.application-message-error strong {
display: block;
margin-bottom: 10px;
font-size: 13px;
letter-spacing: 1px;
color: #ff8b8b;
}
.application-message-error p {
margin: 0;
font-size: 11px;
line-height: 1.6;
color: rgba(255, 170, 170, 0.85);
}
/* =========================================
SHOUTOUT // TWITCH AUTH BUTTON
========================================= */
.twitch-auth-button {
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 14px;
padding: 10px 16px;
border:
1px solid rgba(185, 255, 143, 0.45);
background:
rgba(8, 24, 12, 0.75);
color: #b9ff8f;
text-decoration: none;
font-family:
Consolas,
"Courier New",
monospace;
font-size: 9px;
letter-spacing: 2px;
box-shadow:
inset 0 0 12px rgba(185, 255, 143, 0.04);
}
.twitch-auth-button:hover,
.twitch-auth-button:focus-visible {
border-color: #b9ff8f;
background:
rgba(185, 255, 143, 0.10);
color: #b9ff8f;
text-shadow:
0 0 8px rgba(185, 255, 143, 0.55);
box-shadow:
inset 0 0 14px rgba(185, 255, 143, 0.08),
0 0 10px rgba(185, 255, 143, 0.12);
transform:
translateY(-1px);
}
/* =========================================
OVERSEER // PRIORITÄT KRITISCH
========================================= */
#overseer-message-priority[data-priority="kritisch"] {
color: #ff7b7b;
opacity: 1;
text-shadow:
0 0 8px rgba(255, 90, 90, 0.45),
0 0 18px rgba(255, 90, 90, 0.18);
}
/* =========================================
OVERSEER // PRIORITÄT WICHTIG
========================================= */
#overseer-message-priority[data-priority="wichtig"] {
color: #ffd36a;
opacity: 1;
text-shadow:
0 0 8px rgba(255, 211, 106, 0.40),
0 0 18px rgba(255, 211, 106, 0.16);
}
/* =========================================
OVERSEER // PRIORITÄT NORMAL
========================================= */
#overseer-message-priority[data-priority="normal"] {
color: #b9ff8f;
opacity: 0.65;
text-shadow:
0 0 7px rgba(185, 255, 143, 0.22);
}