/* css/home.css – Startseite */
.home .wrap { max-width: 1100px; margin: 0 auto; padding: 28px; }
.hero { background: linear-gradient(180deg, var(--bg) 0%, rgba(2,10,20,0) 100%); padding: 48px 0 12px; }
.badge {
  display: inline-block; font-weight: 700; letter-spacing: .04em;
  padding: 6px 10px; border-radius: 999px; font-size: 12px;
  background: var(--chip); color: var(--accent); border: 1px solid var(--border);
}
.hero h1 { font-size: clamp(28px, 5vw, 40px); margin: 12px 0 8px; }
.hero .lead { color: var(--muted); font-size: clamp(16px, 2.2vw, 18px); margin: 6px 0 18px; }
.cta { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }

.btn { display:inline-flex; align-items:center; gap:8px; border-radius: 12px; padding:10px 14px; 
  background: var(--panel); color: var(--text); border:1px solid var(--border); cursor:pointer; text-decoration:none; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,.25); }
.btn-primary { background: var(--accent); color: #0a0f15; border-color: transparent; font-weight: 700; }
.btn-ghost { background: transparent; color: var(--muted); }
.btn-outline { background: transparent; border:1px dashed var(--border); }

.note.early { background: rgba(255, 193, 7, .12); border:1px solid rgba(255, 193, 7, .28);
  color: #f9d56e; padding: 10px 12px; border-radius: 12px; }

.features { padding: 20px 0 40px; }
.grid { display:grid; grid-template-columns: repeat(12, 1fr); gap: 14px; }
.card { grid-column: span 12; background: var(--panel); border:1px solid var(--border); border-radius: 16px; padding: 16px; }
.card h3 { margin: 0 0 6px 0; font-size: 18px; }
.card p { margin: 0; color: var(--muted); }

@media (min-width: 720px) {
  .card { grid-column: span 6; }
}
@media (min-width: 1040px) {
  .card { grid-column: span 3; }
}

.panel { padding: 6px 0 40px; }
.panel-inner { display:flex; gap:20px; align-items: flex-start; justify-content: space-between;
  background: var(--panel); border:1px solid var(--border); border-radius: 16px; padding: 16px; }
.panel-text { max-width: 720px; }
.panel-actions { display:flex; gap: 10px; flex-wrap: wrap; }

.site-footer { margin-top: 28px; border-top:1px solid var(--border); }
.footer-inner { display:flex; align-items:center; justify-content: space-between; padding: 14px 0; }
.linklike { background: none; border: none; color: var(--muted); cursor: pointer; padding: 6px 8px; }
.linklike:hover { color: var(--text); text-decoration: underline; }
.sep { margin: 0 8px; color: var(--muted); }

/* Light Theme Feinheiten */
:root[data-theme="light"] .hero {
  background: linear-gradient(180deg, var(--bg) 0%, rgba(255,255,255,0) 100%);
}
:root[data-theme="light"] .note.early { color: #9c6c00; border-color: #f1d48a; background: #fff7dd; }

/* --- UX/Accessibilty Tweaks --- */
.skiplink {
    position: absolute; left: -9999px; top: -9999px;
}
.skiplink:focus {
    left: 12px; top: 12px; z-index: 1000;
    background: var(--panel); color: var(--text);
    padding: 8px 10px; border-radius: 10px;
    border: 1px solid var(--border);
}
.linklike { cursor: pointer; }

/* --- Hero Reveal & Parallax (opt-in) --- */
.hero {
    --hero-offset: 0px;
    --hero-blur: 0px;
    transform: translateY(var(--hero-offset));
    backdrop-filter: blur(var(--hero-blur));
    transition: transform .6s ease, filter .6s ease, opacity .6s ease;
    opacity: 0;
}
.hero.is-mounted {
    opacity: 1;
    transform: translateY(0);
}

/* Reduced motion: keine Transition */
@media (prefers-reduced-motion: reduce) {
    .hero { transition: none; transform: none !important; backdrop-filter: none !important; }
}

/* Buttons – Hover etwas lebendiger, aber dezent */
.btn { transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease; }
.btn:active { transform: translateY(0); }

/* A11y/UX */
.skiplink { position:absolute; left:-9999px; top:-9999px; }
.skiplink:focus {
    left:12px; top:12px; z-index:1000;
    background:var(--panel); color:var(--text);
    padding:8px 10px; border-radius:10px; border:1px solid var(--border);
}
.linklike { cursor: pointer; }

/* Hero Reveal & Parallax */
.hero {
    --hero-offset: 0px;
    --hero-blur: 0px;
    transform: translateY(var(--hero-offset));
    backdrop-filter: blur(var(--hero-blur));
    transition: transform .6s ease, filter .6s ease, opacity .6s ease;
    opacity: 0;
}
.hero.is-mounted { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
    .hero { transition:none; transform:none !important; backdrop-filter:none !important; }
}

.btn { transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease; }
.btn:active { transform: translateY(0); }

/* ========== Karten-Layout (3 Spalten) ========== */
.features .grid { display:grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.card { grid-column: span 12; background: var(--panel); border:1px solid var(--border); border-radius: 16px; padding: 16px; position: relative; overflow: hidden; }
.card h3 { margin: 0 0 6px; font-size: 18px; }
.card p { margin: 0 0 10px; color: var(--muted); }
.card .btn { margin-top: 6px; }

@media (min-width: 860px) {
    .card { grid-column: span 4; }
}

/* Shared animation helpers */
.card-anim { position: relative; height: 120px; margin: -6px -6px 10px; border-radius: 14px; background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.06)); border:1px dashed var(--border); display:flex; align-items:center; justify-content:center; overflow:hidden; }

@media (prefers-reduced-motion: reduce) {
    .card-anim, .mem-card, .console .cursor, .lamp, .barrier span, .penguin { animation: none !important; transition: none !important; }
}

/* ========== Card: Linux (Pinguin + Konsole) ========== */
.card--linux .card-anim { background: linear-gradient(180deg, var(--code), transparent); }
.card--linux .penguin { filter: drop-shadow(0 4px 12px rgba(0,0,0,.25)); animation: penguin-bob 2.6s ease-in-out infinite; }
@keyframes penguin-bob { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-4px) } }

.card--linux .console { position:absolute; right: 10px; bottom: 8px; width: 50%; max-width: 300px; background: #0b0f14; border:1px solid var(--border); border-radius: 8px; padding: 6px 8px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-size: 12px; color: #cbe6ff; }
.card--linux .console .line { white-space: nowrap; overflow: hidden; }
.card--linux .console .cursor {
    display:inline-block; width: 8px; height: 1.1em; background: #cbe6ff; vertical-align: -2px;
    animation: blink 1s steps(1,end) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* ========== Card: Memory (flip cards) ========== */
.card--memory .card-anim { perspective: 800px; gap: 16px; }
.card--memory .mem-card {
    width: 72px; height: 96px; border-radius: 10px; background: var(--chip);
    border:1px solid var(--border); display:grid; place-items:center; font-size: 30px; transform-style: preserve-3d;
    animation: flip 3s ease-in-out infinite;
}
.card--memory .mem-b { animation-delay: 1.2s; }
@keyframes flip {
    0%   { transform: rotateY(0deg) }
    45%  { transform: rotateY(180deg) }
    55%  { transform: rotateY(180deg) }
    100% { transform: rotateY(360deg) }
}

/* ========== Card: Coming Soon (Baustelle) ========== */
.card--soon .card-anim { background: linear-gradient(180deg, rgba(255,200,0,.06), rgba(255,200,0,.02)); }
.card--soon .site { position: relative; width: 100%; height: 100%; }
.card--soon .barrier { position:absolute; left: 8%; right: 8%; bottom: 24px; height: 38px; border-radius: 8px; border:1px solid var(--border); overflow:hidden; display:flex; align-items:center; justify-content:space-between; background: #202a3a; }
.card--soon .barrier span { flex:1; height:100%; background: repeating-linear-gradient(135deg, #ffcc00 0 10px, #202a3a 10px 20px); opacity:.9; animation: slide 2s linear infinite; }
.card--soon .barrier span:nth-child(2) { animation-delay: .2s; }
.card--soon .barrier span:nth-child(3) { animation-delay: .4s; }
@keyframes slide { to { background-position: 40px 0; } }

.card--soon .lamp {
    position:absolute; right: 16px; bottom: 62px; width: 10px; height: 10px; border-radius: 999px; background: #ffea00; box-shadow: 0 0 10px 2px rgba(255,234,0,.8);
    animation: pulse 1.3s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { transform: scale(1); opacity: 1 } 50% { transform: scale(1.25); opacity: .7 } }

.card--soon .cone {
    position:absolute; left: 16px; bottom: 22px; width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 26px solid #ff7a00;
    filter: drop-shadow(0 6px 10px rgba(0,0,0,.35));
}

/* kleine Hover-Belebung für alle Cards */
.card { transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease; }
.card:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(0,0,0,.28); border-color: rgba(124,217,146,.35); }

/* --- Grid-Karten gleich hoch + Buttons bündig unten --- */
.features .grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; grid-auto-rows: 1fr; }
.card { grid-column: span 12; height: 100%;
    background: var(--panel); border:1px solid var(--border); border-radius: 16px; padding: 16px;
    display: flex; flex-direction: column; overflow: hidden;
    transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease;
}
@media (min-width: 860px) { .card { grid-column: span 4; } }
.card:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(0,0,0,.28); border-color: rgba(124,217,146,.35); }

.card-anim { position: relative; height: 120px; margin: -6px -6px 12px; border-radius: 14px;
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.06)); border:1px dashed var(--border);
    display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.card-body { display:flex; flex-direction:column; gap: 10px; flex: 1; }
.card-body .actions { margin-top: auto; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .card-anim, .mem-card, .console .cursor, .gear { animation: none !important; transition: none !important; }
}

/* --- Linux Card (Penguin + Konsole) --- */
.card--linux .card-anim { background: linear-gradient(180deg, var(--code), transparent); }
.card--linux .penguin { filter: drop-shadow(0 4px 12px rgba(0,0,0,.25)); animation: penguin-bob 2.6s ease-in-out infinite; }
@keyframes penguin-bob { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-4px) } }

.card--linux .console { position:absolute; right: 10px; bottom: 8px; width: 52%; max-width: 300px;
    background: #0b0f14; border:1px solid var(--border); border-radius: 8px; padding: 6px 8px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-size: 12px; color: #cbe6ff;
}
.card--linux .console .line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card--linux .console .cursor { display:inline-block; width: 8px; height: 1.1em; background: #cbe6ff; vertical-align: -2px; animation: blink 1s steps(1,end) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* --- Memory Card (Flip Cards) --- */
.card--memory .card-anim { perspective: 800px; gap: 16px; }
.card--memory .mem-card { width: 72px; height: 96px; border-radius: 10px; background: var(--chip);
    border:1px solid var(--border); display:grid; place-items:center; font-size: 30px; transform-style: preserve-3d;
    animation: flip 3s ease-in-out infinite; }
.card--memory .mem-b { animation-delay: 1.2s; }
@keyframes flip { 0% { transform: rotateY(0deg) } 45% { transform: rotateY(180deg) } 55% { transform: rotateY(180deg) } 100% { transform: rotateY(360deg) } }

/* --- Coming Soon: Zahnräder + Progress-Bar --- */
.soon-anim { display:flex; align-items:center; justify-content:center; gap: 14px; }
.soon-anim .gear { filter: drop-shadow(0 4px 10px rgba(0,0,0,.2)); }
.soon-anim .gear-a { animation: spin 8s linear infinite; }
.soon-anim .gear-b { animation: spin-rev 6s linear infinite; opacity: .9; }
@keyframes spin { to { transform: rotate(360deg) } }
@keyframes spin-rev { to { transform: rotate(-360deg) } }

.progress { position:absolute; left: 10px; right: 10px; bottom: 10px; height: 8px; border-radius: 999px; background: rgba(255,255,255,.06); border:1px solid var(--border); overflow: hidden; }
.progress .bar {
    position:absolute; left:0; top:0; bottom:0; width: 0%;
    background: linear-gradient(90deg, var(--accent), rgba(124,217,146,.35));
    animation: fill 2.8s ease-in-out infinite;
}
@keyframes fill { 0% { width: 0% } 50% { width: 82% } 100% { width: 0% } }

/* ===== Coming Soon: Futuristic Dashboard / Loading Grid ===== */
.card--soon .dash-anim {
    position: relative; height: 160px; margin: -6px -6px 12px; border-radius: 14px;
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.06));
    border: 1px solid var(--border); display:flex; align-items:center; justify-content:center;
    overflow: hidden;
}

/* Glasmorphisches Panel */
.card--soon .panel-glass {
    --glass-bg: color-mix(in oklab, var(--panel) 70%, transparent);
    backdrop-filter: blur(6px);
    background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.12)), var(--glass-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px;
    width: min(92%, 520px);
    box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

/* 3x3 Grid mit Puls-Animation in Sequenz */
.card--soon .grid9 {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px;
}
.card--soon .grid9 .cell {
    inline-size: 54px; block-size: 38px;
    background: var(--chip); border: 1px solid var(--border); border-radius: 8px;
    animation: cell-pulse 2.1s ease-in-out infinite;
    box-shadow: inset 0 0 0 0 rgba(0,0,0,0);
}
.card--soon .grid9 .cell:nth-child(1){ animation-delay: .00s }
.card--soon .grid9 .cell:nth-child(2){ animation-delay: .12s }
.card--soon .grid9 .cell:nth-child(3){ animation-delay: .24s }
.card--soon .grid9 .cell:nth-child(4){ animation-delay: .36s }
.card--soon .grid9 .cell:nth-child(5){ animation-delay: .48s }
.card--soon .grid9 .cell:nth-child(6){ animation-delay: .60s }
.card--soon .grid9 .cell:nth-child(7){ animation-delay: .72s }
.card--soon .grid9 .cell:nth-child(8){ animation-delay: .84s }
.card--soon .grid9 .cell:nth-child(9){ animation-delay: .96s }

@keyframes cell-pulse {
    0%, 100% { background: var(--chip); box-shadow: inset 0 0 0 0 rgba(0,0,0,0); transform: translateY(0); }
    40% { background: color-mix(in oklab, var(--accent) 35%, var(--chip)); box-shadow: inset 0 0 12px rgba(0,0,0,.18); transform: translateY(-2px); }
}

/* Statuszeile mit Live-Indikator */
.card--soon .statusline {
    display:flex; align-items:center; gap:8px; color: var(--muted); font-size: 12px; margin: 6px 0 10px;
}
.card--soon .statusline .dot {
    width: 8px; height: 8px; border-radius: 999px; background: var(--accent);
    box-shadow: 0 0 12px color-mix(in oklab, var(--accent) 70%, transparent);
    animation: dot-pulse 1.6s ease-in-out infinite;
}
@keyframes dot-pulse { 0%, 100% { transform: scale(1) } 50% { transform: scale(1.25) } }

/* dezente Progress-Bar */
.card--soon .progress {
    position: relative; height: 8px; border: 1px solid var(--border); border-radius: 999px; overflow: hidden;
    background: linear-gradient(90deg, rgba(255,255,255,.06), transparent);
}
.card--soon .progress .bar {
    position:absolute; inset: 0 auto 0 0; width: 0%;
    background: linear-gradient(90deg, var(--accent), color-mix(in oklab, var(--accent) 30%, transparent));
    animation: prog-fill 2.8s ease-in-out infinite;
}
@keyframes prog-fill {
    0% { width: 0% } 50% { width: 85% } 100% { width: 0% }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .card--soon .grid9 .cell, .card--soon .statusline .dot, .card--soon .progress .bar { animation: none !important; }
}

/* ===== Coming Soon: Futuristic Module Grid (random pulses + labels) ===== */
.card--soon .dash-anim {
    position: relative; height: 160px; margin: -6px -6px 12px; border-radius: 14px;
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.06));
    border: 1px solid var(--border);
    display:flex; align-items:center; justify-content:center;
    overflow: hidden;
}

/* Glass panel */
.card--soon .panel-glass {
    --glass-bg: color-mix(in oklab, var(--panel) 70%, transparent);
    backdrop-filter: blur(6px);
    background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.12)), var(--glass-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px;
    width: min(92%, 520px);
    box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

/* 4x2 Module grid */
.module-grid {
    display:grid; grid-template-columns: repeat(4, 1fr); gap:8px; margin-bottom:10px;
}
.module-grid .cell {
    position:relative;
    inline-size:60px; block-size:38px;
    background: var(--chip);
    border: 1px solid var(--border);
    border-radius:8px;
    display:grid; place-items:center;
    font-size:11px; font-weight:500; color: var(--muted);
    text-transform:uppercase;
    animation: cell-random 3s ease-in-out infinite;
}
.module-grid .cell::after {
    content: attr(data-label);
    opacity:.85;
}
@keyframes cell-random {
    0%, 100% { background: var(--chip); color: var(--muted); transform: translateY(0) scale(1); box-shadow:none; }
    20% { background: color-mix(in oklab, var(--accent) 25%, var(--chip));
        color: var(--text);
        box-shadow: 0 0 6px color-mix(in oklab, var(--accent) 40%, transparent);
        transform: translateY(-2px) scale(1.02); }
    50% { background: color-mix(in oklab, var(--accent) 15%, var(--chip));
        transform: translateY(-1px); }
}
/* zufällige Delays, damit Grid organisch pulsiert */
.module-grid .cell:nth-child(1){ animation-delay: .1s }
.module-grid .cell:nth-child(2){ animation-delay: .8s }
.module-grid .cell:nth-child(3){ animation-delay: 1.5s }
.module-grid .cell:nth-child(4){ animation-delay: 2.2s }
.module-grid .cell:nth-child(5){ animation-delay: .6s }
.module-grid .cell:nth-child(6){ animation-delay: 1.2s }
.module-grid .cell:nth-child(7){ animation-delay: 1.8s }
.module-grid .cell:nth-child(8){ animation-delay: 2.4s }

/* Statusline + Progressbar */
.card--soon .statusline {
    display:flex; align-items:center; gap:8px; color: var(--muted);
    font-size:12px; margin:6px 0 10px;
}
.card--soon .statusline .dot {
    width:8px; height:8px; border-radius:999px; background: var(--accent);
    box-shadow: 0 0 12px color-mix(in oklab, var(--accent) 70%, transparent);
    animation: dot-pulse 1.6s ease-in-out infinite;
}
@keyframes dot-pulse { 0%,100% { transform:scale(1) } 50% { transform:scale(1.25) } }

.card--soon .progress {
    position:relative; height:8px; border:1px solid var(--border);
    border-radius:999px; overflow:hidden;
    background: linear-gradient(90deg, rgba(255,255,255,.06), transparent);
}
.card--soon .progress .bar {
    position:absolute; inset:0 auto 0 0; width:0%;
    background: linear-gradient(90deg, var(--accent), color-mix(in oklab, var(--accent) 30%, transparent));
    animation: prog-fill 2.8s ease-in-out infinite;
}
@keyframes prog-fill { 0%{width:0%} 50%{width:85%} 100%{width:0%} }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .module-grid .cell, .statusline .dot, .progress .bar { animation:none !important; }
}


/* Einheitliche Höhe für alle Card-Animationen */
.card-anim {
    position: relative;
    height: 140px;                 /* exakt gleiche Höhe */
    margin: -6px -6px 12px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Optional: responsive Feinanpassung für sehr kleine Screens */
@media (max-width: 600px) {
    .card-anim {
        height: 120px;
    }
}

/* Coming Soon – nur EIN Rahmen (außen), kein innerer Kasten */
.card--soon .dash-anim {
    /* behält den einheitlichen Card-Anim-Look */
    border: 1px solid var(--border);       /* außen */
    height: 140px;                          /* gleiche Höhe wie die anderen */
    margin: -6px -6px 12px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.06));
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}

/* der „zweite Rahmen“: weg damit */
.card--soon .panel-glass {
    border: 0;                               /* kein Innenrahmen */
    box-shadow: none;                        /* kein zusätzlicher Schatten */
    backdrop-filter: none;                   /* kein Glass-Blur */
    background: transparent;                 /* kein zusätzlicher Hintergrund */
    width: 100%;                             /* füllt den Bildbereich */
    padding: 12px 14px;                      /* nur innen etwas Luft */
}

/* Grid etwas größer, damit es den Bereich harmonisch füllt */
.card--soon .module-grid {
    transform: scale(1.06);
    transform-origin: center;
}

/* Progressbar optisch entkoppeln (dezenter) */
.card--soon .progress {
    border: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
    background: linear-gradient(90deg, rgba(255,255,255,.04), transparent);
}

/* Optional: leichte Innen-Kontur per INSET statt zweitem Rahmen */
.card--soon .dash-anim::after {
    content: "";
    position: absolute; inset: 0;
    border-radius: 14px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
    pointer-events: none;
}