:root{
  --bg:#ffffff; --fg:#1b1f23; --muted:#4a4f46;
  --card:#d9e2d9; --brand:#2d5c2d; --border:#cfd8cf;
  --radius:18px; --shadow:0 8px 24px rgba(0,0,0,.08);
  --nav:#0a7; --nav-fg:#fff;
}

/* Basis */
*{box-sizing:border-box}
html,body{
  margin:0;
}

/* ================================
   GLOBALE TYPOGRAFIE – NEUE VERSION
   Inter (Fließtext) + Lora (Überschriften)
   ================================ */
body{
  font-family:'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size:18px;          /* deutlich lesbarer */
  line-height:1.75;        /* ruhige Lesbarkeit */
  color:var(--fg);
  background:var(--bg);
}

/* Überschriften – globale Standardschrift */
h1, h2, h3, h4, h5, h6{
  font-family:'Lora', serif;
  font-weight:600;
  line-height:1.3;
  margin-top:0;
  color:var(--brand);
}

/* Größen für alle Seiten einheitlich */
h1{
  font-size:clamp(36px, 4vw, 52px);
}
h2{
  font-size:clamp(32px, 3vw, 44px);
}
h3{
  font-size:clamp(26px, 2.5vw, 34px);
}
h4{
  font-size:clamp(22px, 2vw, 28px);
}

/* Fließtext */
p{
  font-size:22px;
  margin-bottom:1.2rem;
  color:#333;
}

/* Layout Container */
main,footer{
  width:min(90vw, 1920px);
  margin-inline:auto;
}

/* Footer */
footer{
  margin:28px 0 20px;
  padding-top:18px;
  border-top:1px solid #ddd;
  font-size:1rem;
  color:#6b7280;
  text-align:center;
}

/* Cards / Buttons (global nutzbar) */
.card{
  background:var(--card);
  padding:clamp(20px,2vw,28px);
  border-radius:var(--radius);
  margin:16px 0;
  box-shadow:var(--shadow);
  border:1px solid var(--border);
}

.btn{
  display:inline-block;
  margin-top:6px;
  padding:12px 18px;
  border-radius:10px;
  text-decoration:none;
  font-weight:700;
  border:0;
  cursor:pointer;
  font-size:18px; /* größer, passend zur neuen Typo */
  font-family:'Inter', sans-serif;
}

.btn-primary{
  background:var(--brand);
  color:#fff;
}
.btn-primary:hover{filter:brightness(0.95)}

.btn-ghost{
  background:#e6ebe6;
  color:var(--fg);
}

.btn[disabled]{
  opacity:.6;
  cursor:not-allowed;
}

/* Topbar-Container */
.topbar-wrap{background:#fff}
.topbar{
  width:min(90vw, 1920px);
  margin-inline:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 0
}
.brand{
  display:flex;
  gap:12px;
  align-items:center
}
.brand img{
  width:50px;
  height:50px;
  border-radius:8px;
  object-fit:cover
}
.brand-title{
  font-family:'Lora', serif;  /* schöner als default */
  font-weight:700;
  font-size:26px;
  color:#243424
}

.muted{
  color:var(--muted);
  font-size:1rem;
}