:root{
  --bg:#ffffff;
  --text:#3d3d3d;
  --muted:#777777;
  --dark:#444444;
  --accent:#b8975a;
  --accent-dark:#9a7b43;
  --light:#f6f4ef;
  --max:1100px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.65;
}
a{color:var(--accent-dark);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto;display:block}
.container{max-width:var(--max);margin:0 auto;padding:0 20px}

.skip{position:absolute;left:-999px}
.skip:focus{left:10px;top:10px;background:#fff;padding:8px 12px;z-index:100}

/* Topbar */
.topbar{background:var(--dark);color:#e5e5e5;font-size:.9rem}
.topbar .container{display:flex;gap:24px;justify-content:flex-end;padding-top:8px;padding-bottom:8px;flex-wrap:wrap}
.topbar a{color:#e5e5e5}

/* Header */
.site-header{background:#fff;border-bottom:3px solid var(--accent);position:sticky;top:0;z-index:50}
.site-header .container{display:flex;align-items:center;justify-content:space-between;min-height:72px}
.logo{font-size:1.6rem;font-weight:300;letter-spacing:.08em;color:var(--dark)}
.logo b{color:var(--accent);font-weight:300}
.logo:hover{text-decoration:none}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:6px}
.nav a{display:block;padding:10px 14px;color:var(--dark);font-weight:600;border-radius:4px}
.nav a:hover{background:var(--light);text-decoration:none}
.nav a.active{color:var(--accent-dark);box-shadow:inset 0 -3px 0 var(--accent);border-radius:0}
.nav-toggle,.nav-btn{display:none}

/* Startbild ganz oben */
.start-image{background:#fff;padding:30px 0 10px}
.start-image img{margin:0 auto;width:100%;max-width:900px}

.intro{text-align:center;padding:10px 0 30px}
.intro p{font-size:1.25rem;color:var(--muted);margin:0 0 22px;letter-spacing:.04em}
.btn{
  display:inline-block;background:var(--accent);color:#fff;
  padding:13px 28px;border-radius:4px;font-weight:700;border:0;cursor:pointer;font-size:1rem;
}
.btn:hover{background:var(--accent-dark);text-decoration:none}

/* Karten */
.section{padding:60px 0 70px}
.section.alt{background:var(--light)}
.section h2{margin:0 0 30px;font-size:1.9rem;text-align:center;font-weight:400;color:var(--dark)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px}
.card{background:#fff;border:1px solid #e6e1d6;border-top:4px solid var(--accent);border-radius:6px;padding:28px;transition:box-shadow .2s,transform .2s;color:var(--text)}
.card:hover{box-shadow:0 8px 24px rgba(0,0,0,.1);transform:translateY(-3px);text-decoration:none}
.card h3{margin:0 0 10px;color:var(--accent-dark);font-size:1.3rem}
.card p{margin:0;color:var(--muted)}

/* Unterseiten */
.page-hero{background:var(--dark);color:#fff;padding:46px 0;text-align:center;border-bottom:4px solid var(--accent)}
.page-hero h1{margin:0;font-size:2.1rem;font-weight:300;letter-spacing:.1em;text-transform:uppercase}
.content{padding:50px 0 70px}
.content .container{max-width:860px}
.content img.topimg{margin:0 auto 32px}
.content h2{margin-top:36px;color:var(--dark)}
.content ul.check{list-style:none;padding:0}
.content ul.check li{padding:8px 0 8px 32px;position:relative;border-bottom:1px solid #eee}
.content ul.check li::before{content:"✓";position:absolute;left:0;color:var(--accent);font-weight:800}
.highlight{background:var(--light);border-left:4px solid var(--accent);padding:16px 20px;margin:24px 0}

/* Formular */
form.contact{display:grid;gap:16px;max-width:620px}
form.contact label{font-weight:600;display:block;margin-bottom:4px}
form.contact input,form.contact textarea{
  width:100%;padding:12px;border:1px solid #cfcabd;border-radius:4px;font:inherit
}
form.contact input:focus,form.contact textarea:focus{outline:2px solid var(--accent);border-color:transparent}
.hp{position:absolute;left:-9999px;height:0;overflow:hidden}
.notice{padding:14px 18px;border-radius:4px;margin:0 0 24px;max-width:620px}
.notice.ok{background:#eef6ee;border:1px solid #b9d8b9;color:#25602a}
.notice.err{background:#fbeeee;border:1px solid #e3b5b5;color:#8a1f1f}

/* Footer */
.site-footer{background:var(--dark);color:#bdbdbd;padding:40px 0;font-size:.92rem;border-top:4px solid var(--accent)}
.site-footer .container{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.site-footer ul{list-style:none;margin:0;padding:0;display:flex;gap:18px;flex-wrap:wrap}
.site-footer a{color:#e5e5e5}

/* Mobile */
@media (max-width:820px){
  .topbar .container{justify-content:center;gap:14px}
  .nav-btn{display:block;cursor:pointer;font-size:1.8rem;padding:6px 10px;line-height:1}
  .nav{position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid #e5e7eb;display:none}
  .nav ul{flex-direction:column;padding:10px 20px}
  .nav-toggle:checked ~ .nav{display:block}
  .site-header .container{position:relative}
  .site-footer .container{flex-direction:column}
}