:root{
  --bg:#f9fbff;
  --card:#ffffff;
  --ink:#102027;
  --muted:#546e7a;
  --accent:#1976d2;
  --ok:#2e7d32;
  --warn:#f9a825;
  --bad:#c62828;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;line-height:1.5}
.app-header{position:sticky;top:0;background:linear-gradient(90deg,#e8f0ff,#f9fbff);border-bottom:1px solid #dde6f3;z-index:10}
.brand{display:flex;align-items:center;gap:14px;padding:12px 16px}
.logo{height:52px; width:auto}
h1{margin:0;font-size:1.4rem}
.sub{margin:0;color:var(--muted);font-size:.9rem}
.tabs{display:flex;gap:8px;padding:8px 16px;border-top:1px solid #e3edf8}
.tab{padding:8px 12px;border:1px solid #c9d8ea;background:#fff;border-radius:8px;cursor:pointer}
.tab.active{background:var(--accent);color:#fff;border-color:var(--accent)}
main{max-width:1100px;margin:0 auto;padding:16px}
.tabpane{display:none}
.tabpane.active{display:block;animation:fade .2s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.steps{background:var(--card);border:1px solid #e5ecf6;border-radius:12px;padding:12px 16px}
.tip{margin-top:12px}
.checklist{background:var(--card);border:1px dashed #cbd9ee;border-radius:12px;padding:12px 16px;margin-top:12px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.card{background:var(--card);border:1px solid #e5ecf6;border-radius:14px;padding:12px}
.snips button{margin:6px 6px 0 0}
.controls{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:8px}
textarea#letter{width:100%;padding:12px;border:1px solid #cbd9ee;border-radius:10px;min-height:260px;background:#fff}
.actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
button{border:1px solid #b4c7e1;background:#fff;border-radius:10px;padding:8px 12px;cursor:pointer}
button:hover{background:#eef5ff}
.example{background:var(--card);border-left:4px solid var(--accent);padding:10px;border-radius:10px}
.results{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px}
.result{background:#fff;border:1px solid #e5ecf6;border-radius:12px;padding:10px;display:flex;gap:10px;align-items:center}
.light{width:14px;height:14px;border-radius:50%}
.light.ok{background:var(--ok)}
.light.warn{background:var(--warn)}
.light.bad{background:var(--bad)}
.footer{margin-top:24px;padding:12px 16px;text-align:center;color:var(--muted);font-size:.9rem;border-top:1px solid #e7eef9}
@media (min-width:900px){
  textarea#letter{min-height:300px}
}
.print-only{display:none}
@media print{
  header,.tabs,.actions,.controls,#example,.footer{display:none!important}
  .print-only{display:block}
  .tabpane{display:block}
  body{background:#fff}
}


/* Pulse highlight when a Baustein wurde eingefügt */
.pulse{animation:pulse 900ms ease 1}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(25,118,210,.4)}70%{box-shadow:0 0 0 8px rgba(25,118,210,.0)}100%{box-shadow:none}}
.toast{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);background:#102027;color:#fff;padding:10px 14px;border-radius:999px;box-shadow:0 4px 18px rgba(0,0,0,.2);font-size:.95rem;z-index:99}


.counter{background:#102027;color:#fff;border-radius:999px;padding:4px 10px;font-weight:600}
button[disabled]{opacity:.55;cursor:not-allowed}