/* ===== TOKENS ===== */
:root{
  --bg:#ffffff; --ink:#0d0d0d; --muted:#666; --line:#e6e6e6;
  --orange:#ff5a16; --orange-ink:#fff;
  --radius:14px; --shadow:0 16px 48px rgba(0,0,0,.06);
  --font-ui: ui-sans-serif,system-ui,-apple-system,Segoe UI,Inter,Roboto,Arial,Helvetica,Apple Color Emoji,Segoe UI Emoji;
  --font-mono: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --fs-display: clamp(62px, 11vw, 124px);
  --fs-h2: clamp(28px, 4vw, 44px);
  --fs-title: clamp(22px, 3vw, 32px);
  --container:1200px; --pad:24px; --gap:20px;
  scroll-behavior:smooth;
}
body[data-theme="dark"]{
  --bg:#0b0b0b; --ink:#eaeaea; --muted:#a3a3a3; --line:#1f1f1f;
  --shadow:0 30px 80px rgba(0,0,0,.45);
}

/* ===== BASE ===== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:14.5px/1.5 var(--font-ui);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:inherit; text-decoration:none}
.container{max-width:var(--container); margin:0 auto; padding:0 var(--pad)}
.dim{color:var(--muted)} .mono{font-family:var(--font-mono)} .tabular{font-variant-numeric:tabular-nums}
.small{font-size:12.5px}

/* ===== TOPBAR / NAV ===== */
.topbar{position:sticky; top:0; z-index:30; border-bottom:1px solid var(--line);
  backdrop-filter:saturate(120%) blur(6px);
  -webkit-backdrop-filter:saturate(120%) blur(6px);
  background:color-mix(in oklab, var(--bg) 92%, transparent);}
.topbar__inner{display:flex; align-items:center; justify-content:space-between; padding:14px var(--pad)}
.brand{display:flex; align-items:center; gap:10px; font-weight:650; letter-spacing:.3px}
.brand__dot{width:8px;height:8px;border-radius:50%;background:var(--ink);display:inline-block}

.nav--desktop{display:flex; gap:10px; align-items:center}
.actions--desktop{display:flex; gap:10px; align-items:center}

/* Badges (Navigation) — schwarz */
.nav--desktop .badge{
  display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 12px;
  border-radius:999px; border:0; background:#111; color:#fff;
  font:600 12.5px/1 var(--font-mono); cursor:pointer; transition:background .15s ease;
}
.nav--desktop .badge:hover{ background:var(--orange) }

/* Architektenmodus-Button (schwarz) */
.badge--solid{ background:#111; color:#fff; border:0 }
.badge--solid:hover{ background:var(--orange) }

/* Hamburger + Drawer */
.hamburger{display:none; background:none; border:0; padding:6px 4px; cursor:pointer}
.hamburger span{display:block; width:22px; height:2px; background:var(--ink); margin:5px 0}

/* --- Fullscreen Drawer Overlay --- */
.drawer{
  position:fixed; inset:0; z-index:200;             /* über allem */
  pointer-events:none;
}
.drawer::before{
  content:"";
  position:absolute; inset:0;
  background:rgba(255,255,255,.70);
  backdrop-filter:blur(12px) saturate(120%);
  -webkit-backdrop-filter:blur(12px) saturate(120%);
  opacity:0; transition:opacity .22s ease;
}
.drawer__content{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:28px; padding:60px 20px 100px;
  opacity:0; transform:translateY(8px);
  transition:opacity .22s ease, transform .22s ease;
}
.drawer.open{ pointer-events:auto; }
.drawer.open::before{ opacity:1; }
.drawer.open .drawer__content{ opacity:1; transform:none; }

.drawer__close{
  position:absolute; top:14px; right:18px;
  background:#111; color:#fff; border:0; width:36px; height:36px;
  border-radius:50%; line-height:36px; font-size:22px; cursor:pointer;
}
.drawer__nav{ display:flex; flex-direction:column; align-items:center; gap:26px }
.drawer__link{ font-weight:800; letter-spacing:.02em; font-size:32px; color:#111; text-transform:uppercase }
.drawer__actions{ display:flex; justify-content:center }
.drawer__toggle{
  border:1px solid var(--line); border-radius:999px; padding:10px 14px;
  background:#111; color:#fff; font-family:var(--font-mono);
}

@media (max-width:940px){
  .nav--desktop, .actions--desktop{display:none}
  .hamburger{display:block}
}

/* ===== HERO ===== */
.hero{padding:72px var(--pad) 12px}
.display{margin:0 0 18px; font-size:var(--fs-display); line-height:.9; letter-spacing:-.02em; font-weight:800}
.lead{color:var(--muted); max-width:900px; margin-bottom:28px}

/* ===== SECTIONS ===== */
.section{padding:36px 0; border-top:1px solid var(--line)}
.h2{font-size:var(--fs-h2); margin:0 0 20px; font-weight:800; letter-spacing:-.02em}
/* Titel in Sektionen bündig zur .container-Achse ausrichten */
.section > .h2{
  max-width: var(--container);
  margin: 0 auto 20px;      /* mittig + gleicher Bottom-Abstand wie bisher */
  padding: 0 var(--pad);    /* gleicher links/rechts-Einzug wie .container */
}

/* ===== GRIDS ===== */
.grid{
  display:grid; gap:var(--gap);
  grid-template-columns:repeat(3,1fr);
  align-items:stretch;                 /* Karten gleich hoch je Reihe */
}
.grid > .card{ height:100% }          /* strecken */
@media (max-width:1100px){ .grid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:700px){  .grid{ grid-template-columns:1fr } }
.full{grid-column:1 / -1}

.info__grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:20px}
@media (max-width:900px){ .info__grid-2{ grid-template-columns:1fr } }

/* ===== CARDS ===== */
.card{
  border:1px solid var(--line); border-radius:var(--radius);
  padding:22px; background:linear-gradient(180deg, color-mix(in oklab, var(--bg) 96%, transparent), var(--bg));
  box-shadow:var(--shadow); position:relative;
}
.card header{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:8px}
.code{font-family:var(--font-mono); font-size:12.5px; color:var(--muted); letter-spacing:.02em}
.title{font-size:var(--fs-title); font-weight:750; letter-spacing:-.01em; line-height:1.05}
.title.sm{font-size:24px; font-weight:800}
.title.sm + *{ margin-top:8px }  /* gleicher Startabstand wie im Info-Block */
.mt-24{ margin-top:24px }
.mt-90{ margin-top:90px }

/* App Cards: Button unten fixieren */
.app-card{ display:flex; flex-direction:column }
.app-card .btn{ margin-top:auto; align-self:flex-start }

/* ===== BUTTONS ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 14px; border-radius:10px; font:inherit; cursor:pointer;
  border:0; background:#111; color:#fff;
  transition:background .15s ease, transform .06s ease, box-shadow .15s ease;
}
.btn:active{transform:translateY(1px)}
.btn--primary{background:#111}
.btn--primary:hover{background:var(--orange); color:var(--orange-ink); box-shadow:0 8px 24px color-mix(in oklab, var(--orange) 25%, transparent)}
.btn--ghost{background:transparent; border:1px solid var(--line); color:var(--ink)}
.btn--ghost:hover{background:color-mix(in oklab, var(--bg) 88%, transparent)}
.btn-row{display:flex; gap:10px; flex-wrap:wrap}

/* ===== INFO-KARTEN ===== */
.bl-card{
  border:1px solid var(--line); border-radius:var(--radius);
  padding:22px; background:linear-gradient(180deg, color-mix(in oklab, var(--bg) 96%, transparent), var(--bg));
  box-shadow:var(--shadow);
}
.bl-card__head{display:flex;align-items:center;gap:10px;margin-bottom:8px;color:var(--muted)}
.bl-card__title{margin:0;font-size:24px;font-weight:800;letter-spacing:-.01em;color:var(--ink)}
.bl-details summary{cursor:pointer;font-family:var(--font-mono);font-size:12.5px;margin:6px 0;color:var(--muted)}
.bl-details__body{padding:6px 0 0}
.bl-link{text-decoration:underline}
.bl-footnote{font-size:12.5px;color:var(--muted)}

.pills{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 0}
.pill{
  background:#111;color:#fff;border-radius:999px;padding:6px 10px;
  font:600 12px/1 var(--font-mono); user-select:none; cursor:default;
}
.pill:hover{ background:#111 } /* kein Hover */

/* ---- Ko-fi Bild-Rollover ---- */
.kofi-btn{
  display:inline-block;width:245px;height:49px;border-radius:10px;
  background:url("/assets/img/kofi-red.png") center/contain no-repeat;
  transition:background-image .2s ease-in-out,transform .1s ease-in-out,box-shadow .2s ease-in-out;
  box-shadow:0 2px 6px rgba(0,0,0,.15);
}
.kofi-btn:hover{background-image:url("/assets/img/kofi-dark.png");transform:translateY(-2px);box-shadow:0 4px 10px rgba(0,0,0,.25)}
.kofi-btn:active{transform:translateY(0);box-shadow:0 1px 4px rgba(0,0,0,.15)}
.kofi-btn--sm{ width:210px; height:42px }

/* Unterstützen: Buttons exakt fluchtend */
.badges{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.bl-btn{height:49px; display:inline-flex; align-items:center}

/* ===== FORM ===== */
.form--full{width:100%}
.form .row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media (max-width:720px){ .form .row{grid-template-columns:1fr} }
.form label{display:block; margin-bottom:12px; position:relative}
.form .label{display:block; font-size:12.5px; color:var(--muted); margin-bottom:6px}
.form input, .form textarea{
  width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:10px;
  background:transparent; color:var(--ink); font:inherit;
}
/* leicht rot bei ungültigen Pflichtfeldern */
.form .touched:invalid{ background:#ffb3b3; border-color:#ff8e8e }
.form .error{ display:none; color:#d10000; font-size:12.5px; margin-top:6px }
.form .touched:invalid + .error{ display:block }

/* Checkbox links, Text daneben + Fehlermeldung */
.form .consent{
  display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:start;
  margin:8px 0 6px;
}
.form .consent input{ width:18px; height:18px; margin-top:2px }
.form .consent .error{ grid-column:1 / -1 }               /* Fehler unter dem Text */
.form .consent input.touched:invalid ~ .error{ display:block }

/* ===== FOOTER (große Wortmarke) ===== */
.footer{
  position:relative; border-top:1px solid var(--line);
  background:color-mix(in oklab, var(--bg) 98%, transparent); margin-top:36px; overflow:hidden;
}
.footer::after{
  content:"Alfalog";
  position:absolute; left:50%; bottom:-8px; transform:translateX(-50%);
  font-weight:800; letter-spacing:-.03em;
  font-size:clamp(120px, 35vw, 420px);
  color:color-mix(in oklab, var(--ink) 8%, transparent); pointer-events:none; user-select:none;
}
.footer__inner{position:relative; z-index:1; display:flex; flex-direction:column; gap:24px; padding:48px var(--pad)}
.footer__links{
  display:grid; grid-template-columns:repeat(4, minmax(160px, 1fr)); gap:28px
}
.footer__links h4{margin:0 0 8px; font-size:15px}
.footer__links a{display:block; padding:4px 0; color:var(--ink)}
.footer__meta{margin-top:6px}
@media (max-width:900px){
  .footer__links{grid-template-columns:1fr 1fr}
}

/* --- Fett & ohne Unterstreichung beim Hover --- */
.link-strong {
  font-weight: 600;
  text-decoration: underline;
  color: inherit;
  transition: text-decoration 0.2s ease;
}

.link-strong:hover,
.link-strong:focus {
  text-decoration: none;
}