/* Base + palettes */
:root{
  /* Day palette (Tasse) */
  --day-brick:#B3442B;
  --day-orange:#F7973C;
  --day-honey:#F2C462;
  --day-teal:#2EA7A0;
  --day-choco:#3A2A25;
  --day-cream:#FFF8EE;

  /* Night palette (invertierte, kühler/blaue Anmutung) */
  --night-ink:#0e0f11;
  --night-text:#f3f4f6;
  --night-muted:#a6adbb;
  --night-card:#14161a;
  --night-border:#23262d;
  --night-brick:#E66C5C;   /* warmes Akzentrot */
  --night-teal:#4D7EA6;    /* kühles Teal/Slate */
  --night-honey:#9EC7DB;   /* helles Nacht-"Honey" blau */
  --night-choco:#2A2F3A;   /* dunkles Braungrau */

  /* Defaults (will be overridden by .dark/.light) */
  --bg:#ffffff; --text:#1b1b1f; --muted:#666; --card:#ffffff; --border:#e6e6eb;
  --brand:var(--day-teal); --accent:var(--day-orange);
}

/* Explicit user overrides via classes */
:root.light{
  --bg:#ffffff; --text:#1b1b1f; --muted:#666; --card:#ffffff; --border:#e6e6eb;
  --brand:var(--day-teal); --accent:var(--day-orange);
}
:root.dark{
  --bg:var(--night-ink); --text:var(--night-text); --muted:var(--night-muted); --card:var(--night-card); --border:var(--night-border);
  --brand:var(--night-teal); --accent:var(--night-honey);
}

*{box-sizing:border-box}html,body{height:100%}body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto;background:var(--bg);color:var(--text);line-height:1.6}
img{max-width:100%;height:auto;display:block}.container{width:min(100% - 2rem,1100px);margin-inline:auto}
a{color:var(--brand);text-decoration:none}a:hover{text-decoration:underline}.skip-link{position:absolute;left:-9999px}.skip-link:focus{left:0;top:0;background:var(--brand);color:#fff;padding:.5rem 1rem;z-index:1000}
.site-header{position:sticky;top:0;background:color-mix(in oklab,var(--bg),transparent 10%);backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid var(--border);z-index:50}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:.75rem 0;gap:.75rem}.brand{display:inline-flex;align-items:center;gap:.6rem;font-weight:700;color:var(--text)}
.nav-toggle{inline-size:42px;block-size:36px;display:grid;place-content:center;gap:3px;background:transparent;border:1px solid var(--border);border-radius:10px;cursor:pointer}.nav-toggle .bar{display:block;width:18px;height:2px;background:var(--text);border-radius:2px}
.site-nav{position:fixed;inset-block-start:60px;inset-inline:0;translate:0 -10px;opacity:0;pointer-events:none;transition:.2s ease;background:var(--bg);border-bottom:1px solid var(--border)}
.site-nav.open{opacity:1;translate:0 0;pointer-events:auto}.site-nav ul{list-style:none;margin:0;padding:.5rem;display:grid;gap:.25rem}.site-nav a{display:block;padding:.75rem .75rem;border-radius:10px;font-weight:600}
.site-nav a[aria-current="page"]{background:color-mix(in oklab,var(--brand),var(--bg) 85%)}.site-nav a:hover{background:color-mix(in oklab,var(--brand),var(--bg) 85%);text-decoration:none}.site-nav .divider{height:1px;background:var(--border);margin:.25rem}
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.6rem .8rem;border:1px solid var(--border);background:var(--card);color:var(--text);border-radius:999px;cursor:pointer;width:100%}
.theme-toggle.animate{animation:toggle-bounce .3s ease}
.theme-toggle .icon{font-size:1.2rem}.theme-toggle .moon{display:none}:root.dark .theme-toggle .moon{display:inline}:root.dark .theme-toggle .sun{display:none}
@keyframes toggle-bounce{0%{transform:scale(1)}40%{transform:scale(1.1)}70%{transform:scale(.95)}100%{transform:scale(1)}}
@media (width >= 900px){.nav-toggle{display:none}.site-nav{all:unset}.site-nav ul{display:flex;gap:.5rem;align-items:center}.site-nav a{padding:.5rem .75rem}.theme-toggle{width:auto}}
.hero{background:radial-gradient(60% 80% at 10% 10%,color-mix(in oklab,var(--day-honey),transparent 70%),transparent 71%),radial-gradient(40% 60% at 90% 0%,color-mix(in oklab,var(--day-teal),transparent 80%),transparent 81%);padding:4rem 0 3rem}
:root.dark .hero{background:radial-gradient(60% 80% at 10% 10%,color-mix(in oklab,var(--night-honey),transparent 85%),transparent 86%),radial-gradient(40% 60% at 90% 0%,color-mix(in oklab,var(--night-teal),transparent 85%),transparent 86%)}
.hero-inner{display:grid;gap:2rem;align-items:center}.cta-row{display:flex;gap:.75rem;flex-wrap:wrap}.hero-visual{justify-self:center;filter:drop-shadow(0 20px 30px color-mix(in oklab,black,transparent 80%))}
@media (width >= 900px){.hero-inner{grid-template-columns:1.2fr 1fr}}
.section{padding:3rem 0}.section.alt{background:color-mix(in oklab,var(--brand),var(--bg) 94%)}
.grid3{display:grid;gap:1rem}@media (width >= 800px){.grid3{grid-template-columns:repeat(3,1fr)}}
.card{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:1.2rem;box-shadow:0 10px 18px color-mix(in oklab,black,transparent 92%)}.card h3{margin-top:0}
.two-col{display:grid;gap:1rem;align-items:start}@media (width >= 800px){.two-col{grid-template-columns:1fr 1fr}}
.list{margin:0;padding-left:1.2rem}.contact{display:grid;gap:.8rem;grid-template-columns:1fr 1fr}.contact label{display:grid;gap:.3rem}.contact label.full{grid-column:1 / -1}
.contact input,.contact textarea{padding:.75rem;border-radius:12px;border:1px solid var(--border);background:var(--card);color:var(--text)}.contact .actions{grid-column:1 / -1}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border-radius:999px;padding:.7rem 1.1rem;font-weight:700;border:1px solid transparent}
.btn-primary{background:var(--brand);color:#fff}.btn-ghost{background:transparent;color:var(--text);border-color:var(--border)}
.site-footer{border-top:1px solid var(--border);padding:2rem 0;color:var(--muted)}.site-footer a{color:inherit}

/* Avatar-Badge & User-Link */
.user-link{display:inline-flex;align-items:center;gap:.45rem}
.avatar-badge{width:24px;height:24px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;
  font-size:.8rem;font-weight:700;color:#fff;background:var(--brand); box-shadow:0 1px 2px rgba(0,0,0,.1)}
@media (width >= 900px){
  .avatar-badge{width:26px;height:26px;font-size:.85rem}
}

.user-link{display:inline-flex;align-items:center;gap:.4rem}
.avatar-badge{width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:600;color:#fff;background:var(--brand)}