/* components.css – wiederverwendbare Bausteine */

/* ---------- Layout ---------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--space-section)}
.section--tight{padding-block:calc(var(--space-section) * .6)}
.section--alt{background:var(--bg-secondary);border-block:1px solid var(--border)}
.section-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--space-4) var(--space-6);margin-bottom:var(--space-7)}
.section-head h2{font-size:var(--text-2xl)}
.prose{max-width:var(--measure)}
.prose > * + *{margin-top:1.1em}
.prose h2{margin-top:2.2em}
.prose h3{margin-top:1.8em;font-size:var(--text-lg)}
.prose ul,.prose ol{padding-left:1.2em;color:var(--text-secondary)}
.prose li + li{margin-top:.4em}
.prose li::marker{color:var(--accent-cyan)}
.prose a,.text-link{color:var(--accent-cyan);text-decoration:underline;text-decoration-color:rgba(76,201,240,.4);text-underline-offset:.2em;transition:text-decoration-color var(--dur)}
.prose a:hover,.text-link:hover{text-decoration-color:currentColor}
.lead{font-size:var(--text-lg);color:var(--text-secondary);max-width:var(--measure)}
.muted{color:var(--text-muted)}

/* ---------- Section-Label mit Leiterbahn-Ansatz ---------- */
.section-label{display:inline-flex;align-items:center;gap:.75rem;font-family:var(--font-display);font-size:var(--text-xs);font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-cyan);margin-bottom:var(--space-4)}
.section-label::before{content:"";width:28px;height:7px;flex:none;
  background:
    radial-gradient(circle at 3.5px 3.5px,var(--accent-cyan) 0 2.5px,transparent 3px),
    linear-gradient(var(--accent-cyan),var(--accent-cyan)) 7px 3px/21px 1px no-repeat}
.section-label--pink{color:var(--accent-pink)}
.section-label--pink::before{background:
    radial-gradient(circle at 3.5px 3.5px,var(--accent-pink) 0 2.5px,transparent 3px),
    linear-gradient(var(--accent-pink),var(--accent-pink)) 7px 3px/21px 1px no-repeat}

/* ---------- Buttons ---------- */
.button,.button-secondary{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:48px;padding:.7rem 1.4rem;border-radius:var(--radius-md);font-weight:600;font-size:var(--text-sm);letter-spacing:.01em;border:1px solid transparent;transition:background var(--dur),border-color var(--dur),color var(--dur),transform var(--dur) var(--ease)}
.button{background:var(--accent-pink);color:#12060C}
.button:hover{background:var(--accent-pink-strong);transform:translateY(-1px)}
.button-secondary{border-color:var(--border-strong);color:var(--text-primary)}
.button-secondary:hover{border-color:var(--accent-cyan);color:var(--accent-cyan)}
.button-row{display:flex;flex-wrap:wrap;gap:var(--space-3)}

.arrow-link{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;font-weight:600;font-size:var(--text-sm);color:var(--accent-cyan)}
.arrow-link span{transition:transform var(--dur) var(--ease)}
.arrow-link:hover span{transform:translateX(4px)}

/* ---------- Cards ---------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-5)}
.card h3{font-size:var(--text-lg);margin-bottom:var(--space-3)}
.card p{color:var(--text-secondary);font-size:var(--text-sm)}
.card-grid{display:grid;gap:var(--space-5);grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr))}

.project-grid{display:grid;gap:var(--space-5);grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.project-card{position:relative;display:flex;flex-direction:column;gap:var(--space-3);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-5);transition:transform var(--dur) var(--ease),border-color var(--dur),background var(--dur)}
.project-card:hover,.project-card:focus-within{transform:translateY(-3px);border-color:rgba(76,201,240,.45);background:var(--surface-raised)}
.project-card__meta{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem;font-family:var(--font-display);font-size:var(--text-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}
.project-card h3{font-size:1.3rem;line-height:1.25}
.project-card h3 a::after{content:"";position:absolute;inset:0;border-radius:inherit}   /* ganze Karte klickbar */
.project-card p{color:var(--text-secondary);font-size:var(--text-sm);flex:1}
.project-card .arrow-link{margin-top:auto;pointer-events:none}
.project-card:hover .arrow-link span{transform:translateX(4px)}
.project-card[hidden]{display:none}
@media (min-width:620px){.project-grid--four{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1180px){.project-grid--four{grid-template-columns:repeat(4,1fr)}}

/* ---------- Tags, Badges, Status ---------- */
.tech-list{display:flex;flex-wrap:wrap;gap:.45rem}
.tag{display:inline-block;padding:.3rem .65rem;border:1px solid var(--border-strong);border-radius:var(--radius-sm);font-size:var(--text-xs);line-height:1.3;color:var(--text-secondary);background:rgba(255,255,255,.02);white-space:nowrap}
.badge{display:inline-flex;align-items:center;gap:.45rem;padding:.25rem .6rem;border-radius:999px;border:1px solid var(--border-strong);font-family:var(--font-display);font-size:.75rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--text-secondary);white-space:nowrap}
.status-dot{width:7px;height:7px;border-radius:50%;background:var(--text-muted);flex:none}
.badge--konzept .status-dot{background:var(--text-muted)}
.badge--prototyp .status-dot,.badge--entwicklung .status-dot{background:var(--accent-cyan)}
.badge--test .status-dot{background:var(--accent-pink)}
.badge--aktiv .status-dot,.status-dot--aktiv{background:var(--accent-green)}

/* ---------- Breadcrumb ---------- */
.breadcrumb{margin-bottom:var(--space-5);font-size:var(--text-sm);color:var(--text-muted)}
.breadcrumb ol{display:flex;flex-wrap:wrap;gap:.5rem}
.breadcrumb li + li::before{content:"/";margin-right:.5rem;color:var(--border-strong)}
.breadcrumb a{color:var(--text-secondary)}
.breadcrumb a:hover{color:var(--accent-cyan)}

/* ---------- Page-Header ---------- */
.page-header{position:relative;padding-block:clamp(3rem,2rem + 5vw,6rem) clamp(2.5rem,2rem + 3vw,4rem);border-bottom:1px solid var(--border);background:var(--bg-secondary);overflow:hidden}
.page-header::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);
  background-size:48px 48px;opacity:.45;
  -webkit-mask-image:linear-gradient(100deg,transparent 55%,#000);mask-image:linear-gradient(100deg,transparent 55%,#000)}
.page-header > .container{position:relative;z-index:1}
.page-header h1{font-size:var(--text-3xl);max-width:20ch}
.page-header .lead{margin-top:var(--space-4)}
.page-header__meta{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem .9rem;margin-bottom:var(--space-4);font-family:var(--font-display);font-size:var(--text-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)}
.page-header .tech-list{margin-top:var(--space-5)}

/* ---------- Code / Terminal ---------- */
.code-block{border:1px solid var(--border);border-radius:var(--radius-md);background:#050910;overflow:hidden;max-width:var(--measure)}
.code-block__bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.55rem .9rem;border-bottom:1px solid var(--border);font-family:var(--font-mono);font-size:.75rem;color:var(--text-muted);background:var(--bg-tertiary)}
.code-block pre{padding:1rem .9rem;overflow-x:auto;font-family:var(--font-mono);font-size:.85rem;line-height:1.65;color:var(--text-secondary);tab-size:2}
.code-block .c{color:var(--text-muted)}
.code-block .k{color:var(--accent-cyan)}
.code-block .p{color:var(--accent-pink)}
code{font-family:var(--font-mono);font-size:.9em;padding:.1em .35em;border-radius:var(--radius-sm);background:rgba(255,255,255,.06)}
pre code{padding:0;background:none;font-size:inherit}

/* ---------- Screenshot-Platzhalter ---------- */
.shot-grid{display:grid;gap:var(--space-4);grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr))}
.screenshot{margin:0}
.screenshot__frame{display:grid;place-items:center;aspect-ratio:16/10;border:1px dashed var(--border-strong);border-radius:var(--radius-md);
  background:
    linear-gradient(var(--border) 1px,transparent 1px) 0 0/24px 24px,
    linear-gradient(90deg,var(--border) 1px,transparent 1px) 0 0/24px 24px,
    var(--bg-tertiary);
  font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-muted);text-align:center;padding:1rem}
.screenshot--phone .screenshot__frame{aspect-ratio:9/16;max-width:220px}
.screenshot img{border:1px solid var(--border);border-radius:var(--radius-md)}
.screenshot figcaption{margin-top:.6rem;font-size:var(--text-xs);color:var(--text-muted)}

/* ---------- Hinweis-Box ---------- */
.notice{border:1px solid var(--border);border-left:2px solid var(--accent-cyan);border-radius:var(--radius-sm);background:var(--surface);padding:var(--space-4) var(--space-5);color:var(--text-secondary);font-size:var(--text-sm);max-width:var(--measure)}
.notice--todo{border-left-color:var(--accent-pink)}
.placeholder{font-family:var(--font-mono);font-size:.9em;color:var(--accent-pink);background:var(--accent-pink-soft);padding:.1em .4em;border-radius:var(--radius-sm)}

/* ---------- Definitions-/Faktenliste ---------- */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;max-width:var(--measure)}
.facts div{background:var(--surface);padding:var(--space-4)}
.facts dt{font-family:var(--font-display);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);margin-bottom:.3rem}
.facts dd{color:var(--text-primary);font-size:var(--text-sm)}

/* ---------- Ablauf (Pipeline) ---------- */
.flow{display:grid;gap:0;max-width:26rem}
.flow li{position:relative;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface);padding:.8rem 1rem;margin-bottom:2rem}
.flow li:last-child{margin-bottom:0}
.flow li:not(:last-child)::after{content:"";position:absolute;left:1.5rem;top:100%;width:1px;height:2rem;background:var(--accent-cyan);opacity:.6}
.flow li:not(:last-child)::before{content:"";position:absolute;left:calc(1.5rem - 3px);top:calc(100% + 2rem - 4px);width:7px;height:7px;border-radius:50%;background:var(--accent-cyan);z-index:1}
.flow strong{display:block;font-family:var(--font-display);font-weight:500}
.flow span{font-size:var(--text-sm);color:var(--text-muted)}

/* ---------- Baumdarstellung (Homelab) ---------- */
.tree{font-family:var(--font-mono);font-size:var(--text-sm)}
.tree__root{display:inline-flex;align-items:center;gap:.6rem;padding:.5rem .8rem;border:1px solid var(--border-strong);border-radius:var(--radius-sm);color:var(--text-primary);background:var(--bg-tertiary);letter-spacing:.08em}
.tree ul{margin:0 0 0 1.1rem;padding:.4rem 0 0 0;list-style:none;border-left:1px solid rgba(76,201,240,.45)}
.tree li{position:relative;padding:.45rem 0 .45rem 1.6rem;color:var(--text-secondary)}
.tree li::before{content:"";position:absolute;left:0;top:1.15rem;width:1.1rem;height:1px;background:rgba(76,201,240,.45)}
.tree li::after{content:"";position:absolute;left:calc(1.1rem - 3px);top:calc(1.15rem - 3px);width:7px;height:7px;border-radius:50%;background:var(--bg-primary);border:1px solid var(--accent-cyan)}
.tree li:last-child{padding-bottom:0}
.tree li small{display:block;font-family:var(--font-body);font-size:var(--text-xs);color:var(--text-muted)}
.tree ul ul{margin-top:.3rem}