/* ===== Base ===== */
body {
    margin: 0;
    font-family: sans-serif;
    background: #010101;
    color: #fff;
}

footer {
    text-align: center;
    padding: 1rem;
    background: #010101;
    color: #aaa;
}

/* ===== Hero (Donut + Hände) ===== */
.hero {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #010101;
    overflow: hidden;
}

.donut-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

.center {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

#donut {
    font-size: 18px;   /* 24px = größerer Donut */
    line-height: 18px;
    white-space: pre;
    color: lime;
}

h1 {
    margin-top: 1rem;
    font-size: 4rem;
}

.scroll-hint {
    margin-top: 1rem;
    font-size: 1.5rem;
    color: #aaa;
    animation: bounce 1.5s infinite;
}
@keyframes bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(8px)} }

.hand { width: 700px; height: auto; opacity: .95; }
.hand-left { position: relative; top: -220px; }

@media (max-width: 1200px) {
    .donut-container { flex-direction: column; gap: 20px; }
    .hand { width: 70vw; }
    .hand-left { top: 0; }
}

/* ===== Gradient-Name ===== */
.name-gradient {
    font-weight: 800;
    line-height: 1.1;
    font-size: clamp(2.5rem, 6vw, 5rem);
    background: linear-gradient(90deg,#00ff00 0%,#06b6d4 30%,#3b82f6 65%,#8b5cf6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 .25rem rgba(255,255,255,0.08);
}
.name-gradient.animate {
    background-size: 200% 100%;
    animation: gradient-slide 8s linear infinite;
}
@keyframes gradient-slide { 0%{background-position:0% 50%} 100%{background-position:100% 50%} }

/* ===== About (Text links, Code rechts) ===== */
.about{
    display: grid;
    grid-template-columns: 1fr 1.2fr; /* links Text, rechts Code */
    gap: 40px;
    max-width: 1100px;
    margin: 6rem auto 4rem;
    padding: 0 24px;
}
@media (max-width: 1000px){ .about{ grid-template-columns: 1fr; } }

.code-panel{
    background: #0b0b0b;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
    position: relative;
    overflow: hidden;
}
.code-panel::after{
    content:"";
    position:absolute; inset:-40%;
    background:
            radial-gradient(1200px 200px at -10% -10%, rgba(0,255,120,.08), transparent 60%),
            radial-gradient(900px 150px at 120% 120%, rgba(0,160,255,.05), transparent 60%);
    pointer-events:none;
    animation: scan 9s linear infinite;
}
@keyframes scan{ 0%{transform:translate(-6%,-6%)} 100%{transform:translate(6%,6%)} }

.code-art{
    margin: 0;
    font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    font-size: 15px;
    line-height: 1.55;
    color: #c7ffcf;
    white-space: pre-wrap;
    tab-size: 2;
}
.code-dim{ color:#6aaf7a; }
.caret{ animation: blink 1.1s steps(1,end) infinite; color:#9aff9a; }
@keyframes blink{ 50%{opacity:0} }

.bio-card{
    border-radius: 18px;
    padding: 2px; /* Border */
    background: linear-gradient(135deg,#00ff88,#37bffb,#8b5cf6);
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.bio-card > *{
    background:#101010;
    border-radius: 16px;
    padding: 22px 22px 8px;
    display:block;
}
.bio-card p{ margin: 0 0 14px; color:#e8e8e8; line-height:1.7; }

.hi{
    background: linear-gradient(90deg,#00ff88 0%, #37bffb 60%, #8b5cf6 100%) bottom / 100% 2px no-repeat;
    padding-bottom: 1px;
}

.tags{
    display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 16px; padding:0; list-style:none;
}
.tags li{
    font-size:.85rem; padding:6px 10px; border-radius:999px;
    background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08);
    backdrop-filter: blur(2px);
}

/* ===== Experience Layout (Sort links, Commit-Card rechts) ===== */
.gitxp{
    max-width:1100px;
    margin:5rem auto;
    padding:0 24px;
}

.xp-row{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    align-items: start;
    max-width: 1100px;
    margin: 0 auto;
}

@media (max-width: 900px){
    .xp-row{ grid-template-columns: 1fr; }
    .xp-card{ margin: 0 auto; }
}

/* ASCII Sort Card (autoplay) */
.algo-card{
    background:#0b0b0b;
    border-radius:16px;
    box-shadow:0 10px 30px rgba(0,0,0,.35);
    padding:12px 16px;
}
#sortviz{
    margin:0;
    white-space:pre;
    font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    font-size:12px;
    line-height:12px;
    color:#9aff9a;
}

/* Commit-Card rechts (shrink-to-fit) */
.xp-card{
    background:#0b0b0b;
    border-radius:16px;
    padding:24px;
    box-shadow:0 10px 30px rgba(0,0,0,.35);
    display:inline-block;
    width: fit-content;
    max-width: min(900px, calc(100% - 48px));
    margin: 0 24px 0 auto; /* rechts andocken */
}

/* Git-Style Timeline (rechts) */
.gitlog{
    list-style:none;
    margin:0;
    padding:0 18px 0 0;
    border-right:2px solid rgba(255,255,255,.08);
    position:relative;
    text-align:right;
}
.gitlog li{
    position:relative;
    margin:0 0 24px 0;
    padding-right:18px;
    font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
.gitlog li::before{
    content:"";
    position:absolute;
    right:-10px; top:6px;
    width:12px; height:12px; border-radius:50%;
    background: radial-gradient(circle at 30% 30%, #00ff88, #37bffb 70%, #8b5cf6);
    box-shadow: 0 0 12px rgba(55,191,251,.5);
}

.gitlog .meta{
    display:flex;
    justify-content:flex-end;
    gap:12px;
    margin-bottom:4px;
    color:rgba(255,255,255,.65);
    font-size:.9rem;
}
.gitlog .hash{ letter-spacing:.03em; }
.gitlog .time{
    padding:2px 8px; border-radius:999px; font-size:.75rem;
    background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08);
}

.gitlog .msg{ color:#eaf7f0; font-weight:600; margin:2px 0 2px; }
.gitlog .details{ color:#b9d6c4; font-size:.95rem; }

/* Tags in der Card (rechtsbündig, ohne Bulletpoints) */
.right-tags{ justify-content: flex-end; margin-top: 14px; }
.xp-card .xp-tags{
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}
.xp-card .xp-tags li{
    font-size:.85rem; padding:6px 10px; border-radius:999px;
    background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08);
    backdrop-filter: blur(2px);
}
/* Spalten sollen sich NICHT gegenseitig strecken */
.xp-row{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    align-items: start;        /* <- vorher evtl. stretch */
    max-width: 1100px;
    margin: 0 auto;
}

/* Sort-Card: feste Höhe + kein Overflow */
.algo-card{
    background:#0b0b0b;
    border-radius:16px;
    box-shadow:0 10px 30px rgba(0,0,0,.35);
    padding:16px;
    overflow:hidden;           /* Inhalt darf nicht rauslaufen */
}

/* ASCII-Fläche füllt die Card-Height */
#sortviz{
    display:block;
    height:100%;
    overflow:hidden;
    white-space:pre;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing:0;
    color:#fff;
}
#sortviz .hot{ color:#ff4d4d; text-shadow:0 0 6px rgba(255,77,77,.6); }