/* style.css – Grundgestaltung, Header, Footer und seitenspezifisches Layout */

body{min-height:100vh;display:flex;flex-direction:column;background:var(--bg-primary);color:var(--text-secondary);font-family:var(--font-body);font-size:var(--text-base);line-height:1.7;-webkit-font-smoothing:antialiased}
main{flex:1}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.15;letter-spacing:-.015em;color:var(--text-primary);text-wrap:balance}
h2{font-size:var(--text-2xl)}
h3{font-size:var(--text-xl)}
p{text-wrap:pretty}
strong{color:var(--text-primary);font-weight:600}
::selection{background:var(--accent-pink);color:#12060C}
:focus-visible{outline:2px solid var(--accent-cyan);outline-offset:3px;border-radius:2px}

.site-nav ul,.site-footer ul,.toc ol,.breadcrumb ol{list-style:none;padding:0;margin:0}
.skip-link{position:absolute;left:1rem;top:-100px;z-index:200;padding:.7rem 1rem;background:var(--accent-cyan);color:#04121A;font-weight:600;border-radius:var(--radius-sm)}
.skip-link:focus{top:.6rem}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ================= Header ================= */
.site-header{position:sticky;top:0;z-index:100;height:var(--header-h);background:rgba(6,11,18,.9);border-bottom:1px solid transparent;transition:border-color var(--dur),background var(--dur)}
@supports (backdrop-filter:blur(8px)){.site-header{background:rgba(6,11,18,.78);backdrop-filter:blur(10px)}}
.site-header.is-scrolled{border-bottom-color:var(--border)}
.site-header__inner{height:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--space-5)}

.brand{display:inline-flex;align-items:center;gap:.75rem;min-height:44px;flex:none}
.brand picture{display:block;flex:none}
.brand-logo{display:block;height:48px;width:auto;max-width:none;object-fit:contain}
.brand-wordmark{display:flex;flex-direction:column;line-height:1}
.brand-name{font-family:var(--font-display);font-weight:700;font-size:1.05rem;letter-spacing:.2em;color:var(--text-primary)}
.brand-division{margin-top:.35rem;font-family:var(--font-display);font-weight:400;font-size:.625rem;letter-spacing:.42em;text-transform:uppercase;color:var(--text-muted)}

.site-nav ul{display:flex;gap:clamp(.25rem,1.4vw,1.5rem)}
.site-nav a{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 .35rem;font-size:var(--text-sm);font-weight:500;color:var(--text-muted);white-space:nowrap;transition:color var(--dur)}
.site-nav a::after{content:"";position:absolute;left:.35rem;right:.35rem;bottom:8px;height:2px;background:var(--accent-cyan);transform:scaleX(0);transform-origin:left;transition:transform var(--dur) var(--ease)}
.site-nav a:hover{color:var(--text-primary)}
.site-nav a:hover::after,.site-nav a.is-active::after{transform:scaleX(1)}
.site-nav a.is-active{color:var(--text-primary)}

.nav-toggle{display:none;width:48px;height:48px;margin-right:-.6rem;align-items:center;justify-content:center;border-radius:var(--radius-sm)}
.nav-toggle__bars{position:relative;width:22px;height:2px;background:var(--text-primary);transition:background var(--dur)}
.nav-toggle__bars::before,.nav-toggle__bars::after{content:"";position:absolute;left:0;width:22px;height:2px;background:var(--text-primary);transition:transform var(--dur) var(--ease)}
.nav-toggle__bars::before{top:-7px}
.nav-toggle__bars::after{top:7px}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars{background:transparent}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before{transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after{transform:translateY(-7px) rotate(-45deg)}

@media (max-width:900px){
  .brand{gap:.6rem}
  .site-header .brand-logo{height:40px}
  .site-header .brand-division{font-size:.5625rem;letter-spacing:.38em}
  /* Mit JavaScript: aufklappbares Menü */
  .js .nav-toggle{display:inline-flex}
  .js .site-nav{position:absolute;top:var(--header-h);left:0;right:0;max-height:calc(100vh - var(--header-h));max-height:calc(100dvh - var(--header-h));overflow-y:auto;background:var(--bg-secondary);border-bottom:1px solid var(--border);padding:var(--space-3) var(--gutter) var(--space-5);visibility:hidden;opacity:0;transform:translateY(-6px);transition:opacity var(--dur),transform var(--dur) var(--ease),visibility 0s var(--dur)}
  .js .site-nav.is-open{visibility:visible;opacity:1;transform:none;transition-delay:0s}
  .js .site-nav ul{flex-direction:column;gap:0}
  .js .site-nav a{display:flex;min-height:52px;padding:0;font-size:1.05rem;border-bottom:1px solid var(--border)}
  .js .site-nav a::after{left:0;right:auto;bottom:-1px;width:2.5rem}
  /* Ohne JavaScript: Navigation bleibt sichtbar und umbricht */
  html:not(.js) .site-header{height:auto;position:static}
  html:not(.js) .site-header__inner{flex-direction:column;align-items:flex-start;gap:0;padding-block:.6rem}
  html:not(.js) .site-nav ul{flex-wrap:wrap}
}

/* ================= Startseite ================= */
.intro{position:relative;padding-block:clamp(3.5rem,2rem + 7vw,8rem);border-bottom:1px solid var(--border);overflow:hidden}
.intro::before{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:56px 56px;opacity:.5;
  -webkit-mask-image:radial-gradient(ellipse 70% 80% at 85% 30%,#000,transparent 70%);mask-image:radial-gradient(ellipse 70% 80% at 85% 30%,#000,transparent 70%)}
.intro__grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-7);align-items:center}
@media (min-width:1000px){.intro__grid{grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr);gap:var(--space-8)}}
.intro__name{font-size:var(--text-hero);font-weight:700;line-height:.95;letter-spacing:-.035em;margin-bottom:var(--space-5)}
.intro__name span{display:block}
.intro__name .accent{color:var(--accent-pink)}
.intro__roles{display:flex;flex-wrap:wrap;font-family:var(--font-display);font-size:clamp(.95rem,.8rem + .5vw,1.15rem);color:var(--text-primary);margin-bottom:var(--space-5)}
.intro__roles span{white-space:nowrap}
.intro__roles i{font-style:normal;color:var(--accent-cyan);margin-inline:.35em}
.intro__text{max-width:38rem}
.intro__text p + p{margin-top:1em}
.intro .button-row{margin-top:var(--space-6)}

/* dezente Ladesequenz – einmalig, nur auf der Startseite */
@media (prefers-reduced-motion:no-preference){
  .intro__copy > *,.focus-panel{animation:rise .7s var(--ease) both}
  .intro__copy > :nth-child(2){animation-delay:.06s}
  .intro__copy > :nth-child(3){animation-delay:.12s}
  .intro__copy > :nth-child(4){animation-delay:.18s}
  .intro__copy > :nth-child(5){animation-delay:.24s}
  .focus-panel{animation-delay:.3s}
  @keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
}

.focus-panel{background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);overflow:hidden}
.focus-panel__bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem var(--space-5);border-bottom:1px solid var(--border);background:var(--bg-tertiary);font-family:var(--font-display);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted)}
.focus-panel__bar span{display:inline-flex;align-items:center;gap:.5rem}
.focus-panel__body{padding:var(--space-5)}
.focus-panel h2{font-size:1.3rem;margin-bottom:var(--space-4)}
.focus-panel__list{display:grid;gap:0;margin-bottom:var(--space-4)}
.focus-panel__list li{display:flex;align-items:center;gap:.7rem;padding:.5rem 0;border-bottom:1px solid var(--border);font-size:var(--text-sm);color:var(--text-secondary)}
.focus-panel__list li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent-cyan);flex:none}
.focus-panel__links a{display:flex;align-items:center;gap:.9rem;min-height:46px;font-size:var(--text-sm);font-weight:500;color:var(--text-primary);transition:color var(--dur)}
.focus-panel__links a b{font-family:var(--font-mono);font-weight:400;font-size:var(--text-xs);color:var(--accent-pink)}
.focus-panel__links a:hover{color:var(--accent-cyan)}
.focus-panel__signet{display:flex;align-items:center;gap:.6rem;padding:.7rem var(--space-5);border-top:1px solid var(--border);font-family:var(--font-display);font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text-muted)}
.focus-panel__signet img{height:28px;width:auto}

.overview-grid{display:grid;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.overview-grid > div{background:var(--bg-secondary);padding:var(--space-5)}
.overview-grid h3{font-size:1rem;letter-spacing:.02em;margin-bottom:var(--space-3)}
.overview-grid p{font-size:var(--text-sm);color:var(--text-muted)}

.split{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-7);align-items:center}
@media (min-width:900px){.split{grid-template-columns:1fr 1fr;gap:var(--space-8)}}
.split p{max-width:34rem}
.split p + p{margin-top:1em}
.split .arrow-link,.split .button-secondary{margin-top:var(--space-5)}

/* ================= Projektübersicht ================= */
.filter{display:none;flex-wrap:wrap;gap:.5rem;margin-bottom:var(--space-6)}
.js .filter{display:flex}
.filter button{min-height:44px;padding:.4rem 1rem;border:1px solid var(--border-strong);border-radius:999px;font-size:var(--text-sm);color:var(--text-secondary);transition:border-color var(--dur),color var(--dur),background var(--dur)}
.filter button:hover{border-color:var(--accent-cyan);color:var(--text-primary)}
.filter button[aria-pressed="true"]{background:var(--accent-cyan-soft);border-color:var(--accent-cyan);color:var(--accent-cyan)}

/* ================= Projektdetail ================= */
.detail{display:grid;gap:var(--space-7);grid-template-columns:minmax(0,1fr)}
.detail__body{min-width:0}
@media (min-width:1050px){.detail{grid-template-columns:230px minmax(0,1fr);gap:var(--space-8)}}
.toc{font-size:var(--text-sm)}
.toc h2{font-family:var(--font-display);font-size:.75rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted);margin-bottom:var(--space-3)}
.toc ol{border-left:1px solid var(--border)}
.toc a{display:block;padding:.4rem 0 .4rem 1rem;margin-left:-1px;border-left:1px solid transparent;color:var(--text-muted);transition:color var(--dur),border-color var(--dur)}
.toc a:hover{color:var(--text-primary);border-left-color:var(--accent-cyan)}
@media (min-width:1050px){.toc{position:sticky;top:calc(var(--header-h) + 2rem);align-self:start;max-height:calc(100vh - var(--header-h) - 4rem);overflow-y:auto}}
@media (max-width:1049px){.toc ol{columns:2;column-gap:1.5rem}}
@media (max-width:520px){.toc ol{columns:1}}
.detail__body > section + section{margin-top:var(--space-8);padding-top:var(--space-7);border-top:1px solid var(--border)}
.detail__body h2{font-size:var(--text-xl);margin-bottom:var(--space-4)}
.detail__body section > * + *{margin-top:var(--space-4)}
.detail__body p,.detail__body ul:not([class]),.detail__body ol:not([class]){max-width:var(--measure)}
.detail__body ul:not([class]),.detail__body ol:not([class]){padding-left:1.2em}
.detail__body li + li{margin-top:.35em}
.detail__body li::marker{color:var(--accent-cyan)}
.detail__footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-4);margin-top:var(--space-8);padding-top:var(--space-5);border-top:1px solid var(--border)}

/* ER-Modell (CSS-Darstellung) */
.er{display:grid;gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));max-width:56rem}
.er__entity{border:1px solid var(--border-strong);border-radius:var(--radius-md);background:var(--surface);overflow:hidden;font-family:var(--font-mono);font-size:var(--text-xs)}
.er__entity h3{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:600;letter-spacing:.06em;padding:.55rem .8rem;background:var(--bg-tertiary);border-bottom:1px solid var(--border);color:var(--accent-cyan)}
.er__entity ul{padding:.5rem .8rem;margin:0;list-style:none}
.er__entity li{padding:.15rem 0;color:var(--text-secondary);margin:0}
.er__entity li b{color:var(--accent-pink);font-weight:400}
.er-relations{font-family:var(--font-mono);font-size:var(--text-sm)}
.er-relations li{list-style:none;margin:0;padding:.3rem 0}
.er-relations i{font-style:normal;color:var(--accent-cyan);margin-inline:.4em}

/* ================= Skills ================= */
.skill-grid{display:grid;gap:var(--space-5);grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr))}
.skill-group h2{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;font-size:.95rem;letter-spacing:.14em;text-transform:uppercase;padding-bottom:var(--space-3);margin-bottom:var(--space-3);border-bottom:1px solid var(--border)}
.skill-group ul{display:grid;gap:0}
.skill-group li{display:flex;align-items:center;gap:.7rem;padding:.42rem 0;font-size:var(--text-sm);color:var(--text-secondary)}
.skill-group li::before{content:"";width:10px;height:1px;background:var(--accent-cyan);flex:none}

/* ================= Homelab ================= */
.lab{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-5)}
@media (min-width:860px){.lab{grid-template-columns:1.2fr 1fr}}
.lab__panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-5)}
.lab__panel > h3{font-size:.8rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted);margin-bottom:var(--space-5)}

/* ================= Kontakt ================= */
.contact-list{display:grid;gap:var(--space-4);max-width:var(--measure)}
.contact-item{display:grid;gap:.2rem;padding:var(--space-5);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);transition:border-color var(--dur)}
a.contact-item:hover{border-color:var(--accent-cyan)}
.contact-item__label{font-family:var(--font-display);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted)}
.contact-item__value{font-size:var(--text-lg);color:var(--text-primary);overflow-wrap:anywhere}
.contact-item__hint{font-size:var(--text-sm);color:var(--text-muted)}

/* ================= 404 ================= */
.notfound{display:grid;place-items:center;text-align:left;padding-block:var(--space-9)}
.notfound__code{font-family:var(--font-display);font-size:clamp(5rem,20vw,11rem);font-weight:700;line-height:1;letter-spacing:-.04em;color:var(--text-primary)}
.notfound__code span{color:var(--accent-pink)}
.notfound p{margin-block:var(--space-4) var(--space-6);font-size:var(--text-lg)}

/* ================= Footer ================= */
.site-footer{margin-top:var(--space-section);border-top:1px solid var(--border);background:var(--bg-secondary);font-size:var(--text-sm)}
.site-footer__grid{display:grid;gap:var(--space-7);padding-block:var(--space-8) var(--space-7);grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr))}
@media (min-width:860px){.site-footer__grid{grid-template-columns:1.6fr 1fr 1fr}}
.brand--footer .brand-logo{height:34px}
.brand--footer .brand-name{font-size:.95rem}
.site-footer__person{margin-top:var(--space-4);color:var(--text-muted)}
.site-footer__person strong{display:block;font-weight:500}
.site-footer h2{font-family:var(--font-display);font-size:.75rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted);margin-bottom:var(--space-3)}
.site-footer li a{display:inline-flex;align-items:center;min-height:36px;color:var(--text-secondary);transition:color var(--dur)}
.site-footer li a:hover{color:var(--accent-cyan)}
.site-footer__bottom{padding-block:var(--space-4);border-top:1px solid var(--border);color:var(--text-muted);font-size:var(--text-xs)}
@media (max-width:600px){.site-footer li a{min-height:44px}}

@media print{.site-header,.site-footer,.toc,.filter{display:none}body{background:#fff;color:#000}}