:root{
  --green:#1f4e3a; /* dunkleres Kieferngrün */
  --green-soft:#e3f0ea;
  --border:#cfe0d7;
  --text:#0b0b0b;
  --muted:#555;
  --bg:#ffffff;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:17px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial}
.app-header{
  position:sticky;top:0;background:#fff;border-bottom:1px solid var(--border);z-index:10;
  padding:12px 16px;display:flex;flex-wrap:wrap;align-items:center;gap:12px;justify-content:space-between
}
.brand{display:flex;align-items:center;gap:12px}
.logo{height:52px;width:auto;border-radius:10px}
.titles h1{margin:0;font-size:1.6rem;color:var(--green);letter-spacing:.2px}
.titles .subtitle{margin:0;font-size:1rem;color:var(--muted)}
.top-actions{display:flex;align-items:center;gap:8px}
.tab,.pill{background:var(--green);color:#fff;border:none;border-radius:999px;padding:9px 16px;cursor:pointer}
.tab:not(.active){background:var(--green-soft);color:var(--green);border:1px solid var(--border)}
.pill{background:#fff;color:var(--green);border:1px solid var(--green)}
.link{padding:9px 12px;border-radius:10px;color:var(--green);text-decoration:none;border:1px solid var(--border);background:#fff}
main{padding:18px;max-width:1200px;margin:0 auto}
.grid.two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:950px){.grid.two{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid var(--border);border-radius:18px;padding:16px;box-shadow:0 2px 10px rgba(0,0,0,.04)}
label{display:block;font-weight:700;margin:4px 0 8px}
textarea{width:100%;min-height:210px;padding:14px;border-radius:14px;border:1px solid var(--border);resize:vertical}
.row{display:grid;grid-template-columns:220px 1fr auto;gap:10px;align-items:center;margin:10px 0}
.controls{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.controls button{padding:12px 16px;border-radius:999px;border:1px solid var(--border);background:var(--green);color:#fff;cursor:pointer}
.controls button.xl{font-size:1.05rem;padding:14px 18px}
.controls button.danger{background:#7b1b1b}
.controls button:hover{opacity:.95}
.hint{margin-top:10px;color:var(--muted);font-size:.95rem}
.preview{padding:14px;border:1px dashed var(--border);border-radius:14px;background:var(--green-soft);min-height:70px}
.preview .token{padding:0 2px;border-radius:6px}
.preview .token.active{background:var(--green);color:#fff}
.footer{padding:20px 16px;border-top:1px solid var(--border);text-align:center;color:var(--muted);margin-top:22px}
.status{min-height:26px;margin-top:8px;font-size:1rem}
.small{font-size:.95rem;color:var(--muted)}
.tab-panel{display:none}
.tab-panel.visible{display:block}

/* Whiteboard-Modus */
.whiteboard body{font-size:20px}
.whiteboard .controls button{padding:16px 22px;font-size:1.2rem}
.whiteboard textarea{min-height:260px;font-size:1.1rem}