/* joniss.de – Farben/Abstände oben in :root anpassen */
:root { --bg:#0f1216; --karte:#171b21; --rand:#2a313b; --text:#e6e9ee; --leise:#9aa4b2;
        --akzent:#3fb68b; --akzent-dunkel:#2d6b56; --max:960px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } }
body { margin:0; background:var(--bg); color:var(--text);
       font:17px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; }
a { color:var(--akzent); text-underline-offset:3px; }
a:hover { color:#6fd3ad; }
a:focus-visible, .knopf:focus-visible { outline:3px solid var(--akzent); outline-offset:3px; border-radius:4px; }
.skip { position:absolute; left:-999px; top:8px; background:var(--akzent); color:#06120d; padding:8px 14px; border-radius:6px; z-index:10; }
.skip:focus { left:12px; }
.wrap { max-width:var(--max); margin:0 auto; padding:0 20px; }

header.kopf { border-bottom:1px solid var(--rand); position:sticky; top:0; background:rgba(15,18,22,.92); backdrop-filter:blur(6px); z-index:5; }
header.kopf .wrap { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:60px; flex-wrap:wrap; }
.logo { font-weight:700; color:var(--text); text-decoration:none; letter-spacing:.2px; }
.logo span { color:var(--akzent); }
nav ul { list-style:none; display:flex; gap:20px; margin:0; padding:0; flex-wrap:wrap; }
nav a { color:var(--leise); text-decoration:none; font-size:15px; }
nav a:hover { color:var(--text); }

.hero { padding:96px 0 72px; }
.hero .vorzeile { color:var(--akzent); font-weight:600; font-size:15px; letter-spacing:.06em; text-transform:uppercase; margin:0 0 10px; }
.hero h1 { font-size:clamp(34px,6vw,56px); line-height:1.1; margin:0 0 18px; }
.hero p.intro { font-size:clamp(18px,2.4vw,21px); color:var(--leise); max-width:640px; margin:0 0 30px; }
.knoepfe { display:flex; gap:12px; flex-wrap:wrap; }
.knopf { display:inline-block; padding:11px 22px; border-radius:8px; font-weight:600; text-decoration:none; }
.knopf.primaer { background:var(--akzent); color:#06120d; }
.knopf.primaer:hover { background:#55c99f; color:#06120d; }
.knopf.zweit { border:1px solid var(--rand); color:var(--text); }
.knopf.zweit:hover { border-color:var(--akzent); color:var(--text); }

section { padding:56px 0; border-top:1px solid var(--rand); }
section h2 { font-size:clamp(24px,3.4vw,30px); margin:0 0 8px; }
section .unter { color:var(--leise); margin:0 0 28px; max-width:640px; }
.raster { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; }
.karte { background:var(--karte); border:1px solid var(--rand); border-radius:12px; padding:22px; display:flex; flex-direction:column; }
.karte h3 { font-size:19px; margin:0 0 10px; }
.karte p { margin:0 0 12px; color:#cfd5dd; font-size:16px; }
.karte .tags { list-style:none; display:flex; flex-wrap:wrap; gap:6px; padding:0; margin:auto 0 0; }
.karte .tags li { font-size:13px; color:var(--leise); border:1px solid var(--rand); border-radius:999px; padding:2px 10px; }
.karte .link { margin:0 0 14px; font-weight:600; }
.angebot ul { margin:0 0 18px; padding-left:20px; }
.angebot li { margin:4px 0; }
.kontakt .mail { font-size:clamp(20px,3vw,26px); font-weight:700; word-break:break-all; }

footer { border-top:1px solid var(--rand); padding:28px 0 40px; color:var(--leise); font-size:15px; }
footer .wrap { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }
footer a { color:var(--leise); }
footer a:hover { color:var(--text); }

/* Rechtstexte */
.recht { padding:56px 0 40px; max-width:760px; }
.recht h1 { font-size:clamp(28px,4vw,38px); margin:0 0 24px; }
.recht h2 { font-size:20px; margin:32px 0 8px; }
.recht p, .recht li { color:#cfd5dd; }
.recht address { font-style:normal; }