/* Reset:
   Basis fuer alle Elemente. */
*{margin:0;padding:0;box-sizing:border-box;}
/* Body:
   Hier aenderst du Page-Abstand, Background, Textfarbe und Standard-Font. */
body{padding:24px;background:#ebe8e1;color:#1a1a1a;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;}
/* Links und Inputs:
   Haltet Default-Styles schlicht. */
a{text-decoration:none;color:inherit;}
button,input{font:inherit;}
/* Main wrapper:
   Hier stellst du Card-Look, Radius, Border und Haupt-Background ein. */
.w{font-family:var(--font-sans,inherit);background:#f5f4f0;border-radius:14px;overflow:visible;border:0.5px solid #dddad3;position:relative;}

/* Navigation:
   Sticky Navbar oben. Hier aenderst du Padding, Layout und Transition. */
.nav{position:sticky;top:0;z-index:1000;background:transparent;border-bottom:1px solid transparent;padding:20px 32px;display:flex;justify-content:space-between;align-items:center;transition:background 0.3s ease,padding 0.3s ease,box-shadow 0.3s ease,border-color 0.3s ease;-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0);}
/* Navbar beim Scroll:
   Kompakter Look nach dem Scrollen. */
.nav.scrolled{background:#f5f4f0;border-bottom-color:#e5e3dc;padding:14px 32px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);}
.nav-r{display:flex;gap:20px;align-items:center;}
/* Kleine Nav-Texte:
   Fuer Status, Sprache und kleine Labels. */
.nl{font-size:10px;color:#aaa;letter-spacing:0.08em;text-transform:uppercase;cursor:pointer;}
.nl.a{color:#1a1a1a;}
.lang{font-size:10px;color:#aaa;letter-spacing:0.06em;border:0.5px solid #ddd;border-radius:4px;padding:2px 7px;background:none;cursor:pointer;}

/* Hero:
   Hauptbereich oben mit 2 Spalten. */
.hero{display:grid;grid-template-columns:1fr 1fr;min-height:560px;align-items:center;}
.htag{font-size:10px;letter-spacing:0.16em;text-transform:uppercase;color:#aaa;margin-bottom:12px;display:flex;align-items:center;gap:7px;}
.hdot{width:5px;height:5px;border-radius:50%;background:#6366f1;}
/* Hero Name:
   Hier aenderst du Groesse, Zeilenabstand und Farben vom Namen. */
.firstname{font-size:72px;font-weight:700;line-height:0.88;letter-spacing:-0.04em;color:#1a1a1a;display:block;}
.lastname{font-size:72px;font-weight:700;line-height:0.88;letter-spacing:-0.04em;color:#6366f1;display:block;margin-bottom:24px;}

/* Hero Text:
   Intro-Text unter dem Namen. */
.hero-sub{font-size:16px;color:#888;max-width:480px;line-height:1.6;margin-bottom:32px;}
.hero-sub strong{color:#1a1a1a;font-weight:500;}
/* Typed line:
   Kleine Meta-Zeile mit Cursor-Animation. */
.hero-typed{font-size:10px;letter-spacing:0.16em;text-transform:uppercase;color:#b5b2ab;margin:-8px 0 18px;min-height:14px;}
.typed-cur{display:inline-block;margin-left:2px;animation:blink 1s steps(1) infinite;}
/* Blink animation:
   `1s` groesser = langsamer, kleiner = schneller. */
@keyframes blink{50%{opacity:0;}}

/* Hero Buttons:
   Primary und Secondary CTA. */
.hbtns{display:flex;gap:10px;margin-bottom:0;}
.bp{font-size:11px;background:#1a1a1a;color:#fff;padding:10px 20px;border-radius:6px;letter-spacing:0.07em;text-transform:uppercase;cursor:pointer;display:inline-flex;align-items:center;}
.bs{font-size:11px;background:transparent;color:#aaa;padding:10px 20px;border-radius:6px;border:1px solid #ddd;letter-spacing:0.07em;text-transform:uppercase;cursor:pointer;display:inline-flex;align-items:center;}

/* Ticker:
   Laufband unter dem Hero. */
.ticker{background:#1a1a1a;padding:9px 0;overflow:hidden;}
.tick{display:flex;white-space:nowrap;animation:tk 24s linear infinite;}
/* Ticker speed:
   `24s` groesser = langsamer, kleiner = schneller. */
@keyframes tk{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ti{font-size:9px;letter-spacing:0.18em;text-transform:uppercase;color:#444;padding:0 16px;}
.ti.h{color:#6366f180;}
.sep{color:#2a2a2a;}

/* Projects:
   Section fuer Projektliste. */
.projects{padding:48px 32px;border-top:1px solid #e5e3dc;}
.sec-label{font-size:9px;letter-spacing:0.18em;text-transform:uppercase;color:#bbb;margin-bottom:28px;}
/* Status-Tags:
   Farben fuer done/dev und kleine Chips. */
.ctag{font-size:8px;letter-spacing:0.14em;text-transform:uppercase;margin-bottom:10px;}
.ctag.done{color:#059669;background:#ecfdf5;border:1px solid #bbf7d0;display:inline-block;padding:2px 8px;border-radius:20px;}
.ctag.dev{color:#d97706;background:#fffbeb;border:1px solid #fde68a;display:inline-block;padding:2px 8px;border-radius:20px;}
.cs{font-size:9px;background:#f5f4f0;border:0.5px solid #e5e3dc;color:#888;padding:2px 8px;border-radius:4px;letter-spacing:0.04em;}
/* Projekt-Items:
   Grid, Abstand und Linien in der Liste. */
.proj-list{display:flex;flex-direction:column;gap:0;}
.proj-item{display:grid;grid-template-columns:140px 1fr;gap:24px;padding:24px 0;border-bottom:0.5px solid #e5e3dc;align-items:start;}
.proj-item:first-child{border-top:0.5px solid #e5e3dc;}
.proj-meta{padding-top:2px;}
/* Projekt-Text:
   Titel, Beschreibung, Stack und Link-Look. */
.proj-title{font-size:18px;font-weight:600;color:#1a1a1a;margin-bottom:8px;}
.proj-desc{font-size:14px;color:#666;line-height:1.7;margin-bottom:10px;}
.proj-stack{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:10px;}
.proj-link{font-size:13px;color:#6366f1;letter-spacing:0.04em;text-decoration:none;border-bottom:0.5px solid #c7d2fe;padding-bottom:1px;}
/* Mobile projects:
   Unter 640px nur noch 1 Spalte. */
@media(max-width:640px){.proj-item{grid-template-columns:1fr;gap:8px;}}

/* About:
   2-spaltiger Info-Bereich. */
.about{padding:40px 32px;border-top:1px solid #e5e3dc;display:grid;grid-template-columns:1fr 1fr;gap:40px;}
.about-l{}
.about-r{}
.atitle{font-size:9px;letter-spacing:0.18em;text-transform:uppercase;color:#bbb;margin-bottom:16px;}
.atext{font-size:14px;color:#666;line-height:1.7;margin-bottom:16px;}
.atext strong{color:#1a1a1a;font-weight:500;}
/* "Now" Liste:
   Kleine Punkte mit Text daneben. */
.now-item{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px;}
.now-dot{width:5px;height:5px;border-radius:50%;background:#6366f1;margin-top:5px;flex-shrink:0;}
.now-text{font-size:14px;color:#666;line-height:1.5;}
.now-text strong{color:#1a1a1a;font-weight:500;}

/* Contact:
   Unterer CTA-Bereich mit Links / Buttons. */
.contact{padding:32px;border-top:1px solid #e5e3dc;display:flex;justify-content:space-between;align-items:center;background:#fff;}
.contact-l{font-size:20px;font-weight:600;color:#1a1a1a;letter-spacing:-0.02em;}
.contact-l span{color:#6366f1;}
.contact-r{display:flex;gap:10px;flex-wrap:wrap;}
.clink{font-size:11px;padding:8px 16px;border-radius:6px;border:1px solid #e5e3dc;color:#666;letter-spacing:0.04em;cursor:pointer;display:inline-flex;align-items:center;}
.clink.p{background:#1a1a1a;color:#fff;border-color:#1a1a1a;}

/* AI widget:
   Floating Chat-Box rechts unten. */
.ai-float{position:absolute;bottom:80px;right:20px;display:flex;flex-direction:column;align-items:flex-end;gap:8px;}
.ai-chat{background:#fff;border:1px solid #e5e3dc;border-radius:12px;padding:14px;width:220px;box-shadow:0 8px 32px rgba(0,0,0,0.08);}
.ai-top{display:flex;align-items:center;gap:8px;margin-bottom:10px;}
.ai-av{width:26px;height:26px;border-radius:50%;background:#eef2ff;border:1px solid #c7d2fe;display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:700;color:#6366f1;flex-shrink:0;}
.ai-tit{font-size:11px;font-weight:600;color:#1a1a1a;}
.ai-s{font-size:9px;color:#aaa;}
.ai-qs{display:flex;flex-direction:column;gap:5px;margin-bottom:10px;}
.ai-q{font-size:10px;background:#f5f4f0;border:0.5px solid #e5e3dc;border-radius:16px;padding:5px 10px;color:#555;cursor:pointer;text-align:left;}
.ai-row{display:flex;gap:6px;}
.ai-inp{flex:1;font-size:10px;background:#f5f4f0;border:0.5px solid #e5e3dc;border-radius:14px;padding:6px 10px;color:#555;min-width:0;}
.ai-go{width:24px;height:24px;border-radius:50%;background:#6366f1;display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px;flex-shrink:0;border:none;cursor:pointer;}
.ai-pill{display:flex;align-items:center;gap:8px;background:#6366f1;border-radius:24px;padding:8px 16px 8px 10px;cursor:pointer;border:none;}
.ap-av{width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,0.2);display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:700;color:#fff;}
.ap-t{font-size:11px;color:#fff;font-weight:500;}
.ap-s{font-size:9px;color:rgba(255,255,255,0.6);}
/* Utility classes:
   `.collapsed` versteckt etwas.
   `.sr-only` ist nur fuer Screenreader sichtbar. */
.collapsed{display:none;}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;}

/* Responsive bis 900px:
   Mehrere Bereiche werden einfacher und stehen untereinander. */
@media (max-width: 900px){
  .cards{grid-template-columns:1fr;}
  .about{grid-template-columns:1fr;gap:24px;}
  .contact{flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:20px;}
  .ai-float{position:static;padding:24px 32px;border-top:1px solid #e5e3dc;align-items:stretch;}
}

/* Mobile bis 640px:
   Wichtigster Breakpoint fuer Handy. */
@media (max-width: 640px){
  body{padding:0;}
  .w{border-radius:0;min-height:100vh;}
  .nav,.hero-left,.projects,.about,.contact{padding-left:20px;padding-right:20px;}
  .firstname,.lastname{font-size:48px;}
  .nav{gap:16px;align-items:flex-start;flex-direction:column;}
  .nav-r{flex-wrap:wrap;gap:10px 14px;}
  .hbtns{flex-wrap:wrap;}
}

/* Hero Innenabstand:
   Links Text, rechts Preview-Cards. */
.hero-left{padding:16px 32px 44px;overflow:hidden;padding-bottom:48px;}
.hero-right{padding:32px 28px 32px 0;display:flex;flex-direction:column;gap:12px;}
/* Preview cards:
   Kleine Projekt-Preview im Hero. */
.prev-card{background:#fff;border:0.5px solid #e5e3dc;border-radius:10px;overflow:hidden;position:relative;transition:border-color 0.2s,box-shadow 0.2s;cursor:pointer;}
.prev-card.active{border-color:#c7d2fe;box-shadow:0 4px 20px rgba(99,102,241,0.1);}
.prev-head{background:#f5f4f0;border-bottom:0.5px solid #e5e3dc;padding:7px 12px;display:flex;align-items:center;gap:5px;}
.prev-dot{width:6px;height:6px;border-radius:50%;display:inline-block;}
.d1{background:#fca5a5;}.d2{background:#fcd34d;}.d3{background:#6ee7b7;}
.prev-title{font-size:9px;color:#aaa;letter-spacing:0.06em;margin-left:4px;}
.prev-body{padding:12px;}
.prev-name{font-size:13px;font-weight:600;color:#1a1a1a;margin-bottom:4px;}
.prev-desc{font-size:11px;color:#888;line-height:1.4;margin-bottom:6px;}
.prev-stack{display:flex;gap:4px;flex-wrap:wrap;}
/* Kleine Tags in den Preview-Cards. */
.ps{font-size:8px;background:#f5f4f0;border:0.5px solid #e5e3dc;color:#888;padding:1px 6px;border-radius:3px;}
.ps.accent{background:#eef2ff;border-color:#c7d2fe;color:#6366f1;}
/* Status-Badge oben rechts in der Card. */
.prev-tag{position:absolute;top:8px;right:8px;font-size:7px;letter-spacing:0.1em;text-transform:uppercase;padding:2px 6px;border-radius:10px;}
.prev-tag.done{color:#059669;background:#ecfdf5;border:0.5px solid #bbf7d0;}
.prev-tag.dev{color:#d97706;background:#fffbeb;border:0.5px solid #fde68a;}
/* Hero responsive bis 900px:
   Hero wechselt von 2 Spalten auf 1 Spalte. */
@media(max-width:900px){.hero{grid-template-columns:1fr;}.hero-right{padding:0 32px 32px;}.hero-left{padding-bottom:24px;}}

/* ========== AI CHAT WIDGET ========== */
#ai-chat {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  width: 340px;
  background: #fff;
  border: 0.5px solid #e5e3dc;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.10);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Collapsed: body/suggestions/input hidden, only header visible */
#ai-chat.collapsed .chat-body,
#ai-chat.collapsed .chat-suggestions,
#ai-chat.collapsed .chat-input-row {
  display: none;
}

/* Header — always visible, acts as the toggle */
.chat-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: #6366f1;
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
}

.chat-header:hover { background: #4f51d9; }

.pill-av {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

.pill-text { flex: 1; min-width: 0; }

.pill-title {
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pill-sub {
  font-size: 9px;
  color: rgba(255,255,255,0.6);
}

.pill-tog {
  font-size: 18px;
  line-height: 1;
  color: rgba(255,255,255,0.85);
  flex-shrink: 0;
}

/* Body */
.chat-body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 240px;
  overflow-y: auto;
  background: #f5f4f0;
}

.cmsg {
  max-width: 82%;
  padding: 7px 11px;
  border-radius: 10px;
  font-size: 11px;
  line-height: 1.5;
}

.cmsg.u {
  align-self: flex-end;
  background: #6366f1;
  color: #fff;
  border-radius: 10px 10px 2px 10px;
}

.cmsg.a {
  align-self: flex-start;
  background: #eef2ff;
  color: #1a1a1a;
  border-radius: 10px 10px 10px 2px;
}

/* Suggestions */
.chat-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 8px 12px;
  background: #fff;
  border-top: 0.5px solid #e5e3dc;
}

.ai-q {
  font-size: 10px;
  background: #f5f4f0;
  border: 0.5px solid #e5e3dc;
  border-radius: 16px;
  padding: 4px 10px;
  color: #555;
  cursor: pointer;
  transition: all 0.15s;
}

.ai-q:hover {
  background: #eef2ff;
  border-color: #c7d2fe;
  color: #6366f1;
}

/* Input row */
.chat-input-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-top: 0.5px solid #e5e3dc;
  background: #fff;
}

#chatinput {
  flex: 1;
  background: #f5f4f0;
  border: 0.5px solid #e5e3dc;
  border-radius: 14px;
  padding: 6px 10px;
  font-size: 10px;
  color: #1a1a1a;
  outline: none;
  min-width: 0;
}

#chatinput::placeholder { color: #aaa; }

#sendBtn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #6366f1;
  color: #fff;
  border: none;
  font-size: 13px;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}

#sendBtn:hover { background: #4f51d9; }

@keyframes pop {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}

#ai-chat.popping { animation: pop 0.5s ease; }