/* Whiteboard-freundliches, ansprechendes Theme */
:root{
  --green:#2E4E3F;      /* Kieferngrün */
  --green-dark:#1E352B; /* Dunkleres Kieferngrün */
  --bg:#fff;
  --text:#123;
  --card:#f7faf9;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica,Arial,sans-serif;line-height:1.5}

body{
  background:
    radial-gradient(1200px 600px at 100% -20%, #f2fff8 10%, transparent 60%),
    radial-gradient(1000px 500px at -10% 120%, #eefcf5 10%, transparent 60%),
    var(--bg);
  font-size: 18px;
}
body.wb-mode{ font-size: 22px; }

/* Header */
.site-header{
  background:linear-gradient(0deg,var(--green),#d8f3e2);
  border-bottom:3px solid var(--green-dark);
  position:sticky; top:0; z-index:10;
}
.header-inner{
  max-width:1200px;margin:0 auto;
  display:grid;
  grid-template-columns: 160px 1fr;
  align-items:center;
  gap:8px;
  padding:10px 16px;
}
.brand-left{ display:flex; align-items:center; }
.brand-link{ display:inline-flex; }
.logo{ width:60px; height:60px; object-fit:contain; border-radius:8px; background:#fff; padding:4px; border:1px solid #bcd }
.brand-center{ display:flex; align-items:center; justify-content:center; }
.title{ margin:0; font-weight:900; text-align:center; font-size: clamp(20px, 3.2vw, 34px); color:#083 }

.nav-bar{
  max-width:1200px;margin:0 auto;display:flex;gap:10px;align-items:center;justify-content:center;padding:8px 16px 12px;
}
.nav-bar a,.fs-btn{
  text-decoration:none; color:#064; background:#fff; border:1px solid #a7d9c1; padding:10px 14px; border-radius:12px; font-weight:700;
}
.nav-bar a:hover,.fs-btn:hover{ background:#f2fff8 }
.fs-btn{ cursor:pointer }

/* Layout */
.container{ max-width:1200px; margin:20px auto; padding:0 16px }
.card{ background:#fff; border:1px solid #dfe7e4; border-radius:16px; padding:18px; box-shadow: 0 6px 18px rgba(0,0,0,0.03); margin:12px 0 }
.card h2{ margin-top:0 }

.hero{
  background: linear-gradient(180deg, #ffffff 0%, #f5fff8 100%);
  border:1px solid #e2efe8;
  border-radius:18px;
  padding: 24px;
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 20px;
  align-items:center;
}
@media(max-width:900px){ .hero{ grid-template-columns: 1fr; } }
.hero h1{ margin:0 0 8px 0; font-size: clamp(22px, 3.5vw, 34px); }
.hero .cta{ display:flex; gap:12px; flex-wrap:wrap }
.button{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 16px; border-radius:12px; text-decoration:none; font-weight:700;
  border:1px solid #a7d9c1; background:#fff; color:#064;
}
.button.primary{ background:#c9efd9; border-color:#6dbf8f }
.button:hover{ filter: brightness(0.98); }

.menu-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap:16px }
.menu-card{
  background:#fff; border:1px solid #cfe1d8; border-radius:16px; padding:18px;
  display:flex; align-items:center; gap:14px; text-decoration:none; color:#083;
  box-shadow: 0 6px 18px rgba(0,0,0,0.03);
}
.menu-card .icon{ font-size: 1.6em }
.menu-card .label{ font-weight:700; font-size:1em; line-height:1.2; word-break:break-word }
.menu-card:hover{ background:#f6fffb; border-color:#6dbf8f }

.site-footer{margin-top:40px;border-top:2px solid #e3efe9;background:#fbfffd}
.footer-inner{max-width:1200px;margin:0 auto;padding:12px 16px;color:#456}

/* Touch target improvements */
.menu-card, .nav-bar a, .fs-btn{ transition: transform .05s ease-in-out, background-color .15s }
.menu-card:active, .nav-bar a:active, .fs-btn:active{ transform: scale(0.99) }


/* Utilities */
.card-white{ background:#fff; }
.mt-0{ margin-top:0 }


.notice-success{ border-left:4px solid #0a5; background:#f0fff7 }
.notice-error{ border-left:4px solid #e05; background:#fff0fa }