:root{
  --bg:#0e0f11; --card:#16181c; --line:#23262b; --line2:#2e333a;
  --ink:#e9edf1; --muted:#9aa3ad; --accent:#39ff14; --accent-ink:#a6371f;
  --maxw:960px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-padding-top:72px}
body{margin:0; background:var(--bg); color:var(--ink);
  font-family:"Atkinson Hyperlegible",system-ui,sans-serif; font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 20px}
h1,h2,h3{font-family:"Space Grotesk",sans-serif; line-height:1.15; letter-spacing:-.01em}
a{color:var(--accent)}
a:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:3px}
.muted{color:var(--muted)}
.skip{position:absolute; left:-999px} .skip:focus{left:12px; top:12px; background:var(--accent); color:#000; padding:8px 12px; border-radius:6px; z-index:10}

/* Header */
.site-header{position:sticky; top:0; z-index:9; background:rgba(14,15,17,.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--line)}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:60px; flex-wrap:wrap}
.brand{font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:20px; color:var(--ink); text-decoration:none; display:inline-flex; align-items:center; gap:8px}
.brand .dot{color:var(--accent)}
.brand .brand-mark{color:var(--accent)}
.brand.small{font-size:16px}
.site-header nav{display:flex; gap:18px; flex-wrap:wrap}
.site-header nav a{color:var(--muted); text-decoration:none; font-family:"Space Grotesk",sans-serif; font-size:15px}
.site-header nav a:hover,.site-header nav a[aria-current=page]{color:var(--ink)}
.site-header nav a[aria-current=page]{box-shadow:inset 0 -2px 0 var(--accent)}

/* Hero */
.hero{padding:56px 0 32px; border-bottom:1px solid var(--line)}
.hero .eyebrow{font-family:"Space Grotesk",sans-serif; text-transform:uppercase; letter-spacing:.12em; font-size:13px; color:var(--accent); margin:0 0 14px}
.hero h1{font-size:clamp(30px,5vw,46px); margin:0; max-width:16ch}
.hero p{color:var(--muted); max-width:56ch; font-size:18px}
.hero-grid{display:grid; grid-template-columns:1.3fr 1fr; gap:24px; align-items:center}
@media(max-width:720px){.hero-grid{grid-template-columns:1fr}}
.sloth{border:1px dashed var(--line2); border-radius:16px; min-height:200px; display:flex; align-items:center; justify-content:center; color:var(--muted); text-align:center; padding:20px; font-size:14px}
.cta{display:inline-flex; gap:14px; flex-wrap:wrap; margin-top:22px}
.btn{background:var(--accent); color:#000; font-weight:700; font-family:"Space Grotesk",sans-serif; text-decoration:none; padding:12px 20px; border-radius:8px}
.btn.secondary{background:transparent; color:var(--ink); border:1px solid var(--line2)}

/* Sections */
section{padding:40px 0}
.section-label{font-family:"Space Grotesk",sans-serif; text-transform:uppercase; letter-spacing:.12em; font-size:12px; color:var(--accent); margin:0 0 8px}
.tiles{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
@media(max-width:720px){.tiles{grid-template-columns:1fr}}
.tile{display:block; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:18px 20px; text-decoration:none; color:var(--ink)}
.tile:hover{border-color:var(--line2)}
.tile .cat{font-family:"Space Grotesk",monospace; text-transform:uppercase; letter-spacing:.08em; font-size:11px; color:var(--muted)}
.tile h3{margin:6px 0 6px; font-size:18px}
.tile p{margin:0; color:var(--muted); font-size:15px}
.tile .more{color:var(--accent); font-size:14px; margin-top:10px; display:inline-block}

.values{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:28px 0}
@media(max-width:720px){.values{grid-template-columns:1fr 1fr}}
.values .v .h{font-family:"Space Grotesk",monospace; text-transform:uppercase; letter-spacing:.08em; font-size:11px; color:var(--muted)}
.values .v p{margin:4px 0 0; font-size:15px}

/* Prose (guides + legal) */
.prose{padding:32px 0 8px; max-width:760px}
.prose .crumb{font-size:14px; color:var(--muted)}
.prose h1{font-size:clamp(26px,4vw,38px); margin:.2em 0 .5em}
.prose h2{font-size:22px; margin:1.6em 0 .4em}
.prose ol,.prose ul{padding-left:1.3em}
.prose li{margin:.35em 0}
.prose table{width:100%; border-collapse:collapse; margin:1em 0; font-size:15px}
.prose th,.prose td{border:1px solid var(--line2); padding:8px 10px; text-align:left}
.prose th{background:var(--card); font-family:"Space Grotesk",sans-serif}
.prose code{font-family:"Space Grotesk",monospace; background:var(--card); padding:1px 5px; border-radius:4px}
.prose blockquote{border-left:3px solid var(--accent); margin:1em 0; padding:.4em 1em; background:var(--card); color:var(--muted)}
.help-box{margin:36px 0; border:1px solid var(--accent); border-radius:12px; padding:18px 20px; background:rgba(57,255,20,.05)}
.help-box p{margin:.3em 0 0; color:var(--muted)}

/* Forms */
.field{margin:0 0 16px}
.field label{display:block; font-family:"Space Grotesk",sans-serif; font-size:14px; margin:0 0 6px}
.field input,.field textarea{width:100%; background:var(--card); border:1px solid var(--line2); border-radius:8px; color:var(--ink); padding:11px 12px; font:inherit}
.field textarea{min-height:140px}
.hp{position:absolute; left:-9999px} /* Honeypot */
.form-note{color:var(--muted); font-size:14px}
.form-status{margin-top:14px}

.tag{font-family:"Space Grotesk",monospace; font-size:13px; color:var(--muted); display:inline-block; margin-top:14px}
@media print{ body{background:#fff;color:#000} .site-header,.site-footer{display:none} }

/* --- Echte Logo-Assets --- */
.brand-img{height:30px;width:auto;display:block}
.sloth-img{width:100%;max-width:420px;height:auto;display:block;margin:0 auto}
@media(max-width:720px){ .sloth-img{max-width:300px} }

/* --- Webmail-Link (Header) --- */
.nav-webmail{border:1px solid var(--line2); border-radius:8px; padding:6px 12px !important; color:var(--ink) !important}
.nav-webmail:hover{border-color:var(--accent); color:var(--accent) !important}

/* --- Responsives Menü (Hamburger auf kleinen Screens) --- */
.nav-toggle{display:none; background:none; border:0; cursor:pointer; padding:10px; margin:-10px -8px -10px 0}
.nav-toggle-bar{display:block; width:26px; height:2px; background:var(--ink); margin:6px 0; transition:.2s}
.site-header.nav-open .nav-toggle-bar:nth-child(1){transform:translateY(8px) rotate(45deg)}
.site-header.nav-open .nav-toggle-bar:nth-child(2){opacity:0}
.site-header.nav-open .nav-toggle-bar:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

@media(max-width:760px){
  .header-inner{flex-wrap:nowrap}
  .js .nav-toggle{display:block}
  .js .site-header nav{
    display:none; position:absolute; left:0; right:0; top:100%;
    flex-direction:column; gap:0; align-items:stretch;
    background:var(--bg); border-bottom:1px solid var(--line);
    padding:6px 20px 14px;
    box-shadow:0 10px 24px -12px rgba(0,0,0,.6);
  }
  .js .site-header.nav-open nav{display:flex}
  .site-header nav a{padding:13px 2px; font-size:17px; border-top:1px solid var(--line)}
  .site-header nav a:first-child{border-top:0}
  .nav-webmail{border:0 !important; border-top:1px solid var(--line) !important; border-radius:0 !important; padding:13px 2px !important; color:var(--accent) !important}
}