/* Werkzeug-Seiten: Papier, Schreibmaschine, Rotstift – passend zur Präsentation */
:root{--paper:#F3ECDD;--paper-d:#E9DFCB;--card:#FBF7EE;--ink:#23201B;--muted:#6E6556;--line:#CBBDA3;--pencil:#C0392B;
  --regeln:#2F4B7C;--kontext:#2E6B66;--wissen:#B07A22;--menschen:#8C3B5A;--green:#3F7D4E;--yellow:#D3A221;--red:#B23A2E;
  --type:"Special Elite","Courier New",monospace;--hand:"Caveat","Segoe Print",cursive;--sans:"Source Sans 3","Segoe UI",system-ui,sans-serif}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:18px;line-height:1.55;
  background-image:var(--tx-grain),var(--tx-fiber),var(--tx-mottle);background-size:256px 256px,512px 512px,1024px 1024px}
a{color:var(--ink);text-decoration-color:var(--pencil);text-underline-offset:3px}
a:hover{color:var(--pencil)}
.top{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 16px;border-bottom:1px solid var(--line);max-width:1040px;margin:0 auto}
.top a{text-decoration:none;font-family:var(--type);font-size:15px;letter-spacing:.04em}
.top nav{display:flex;gap:18px;flex-wrap:wrap;font-size:15px}
.top nav a{font-family:var(--sans);color:var(--muted)}
main{max-width:860px;margin:0 auto;padding:34px 16px 70px}
main.wide{max-width:1040px}
.kick{font-family:var(--type);font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
h1{font-family:var(--type);font-weight:400;font-size:clamp(30px,5vw,44px);line-height:1.15;margin:0 0 14px}
h2{font-family:var(--type);font-weight:400;font-size:clamp(23px,3.4vw,29px);line-height:1.2;margin:48px 0 12px}
h3{font-size:20px;margin:22px 0 6px}
p{margin:0 0 14px}
.lead{font-size:21px;color:#3b362e}
.hand{font-family:var(--hand);color:var(--pencil);font-size:30px;line-height:1.15}
.m{color:var(--muted)}.s{font-size:16px}.xs{font-size:14px}
ul,ol{padding-left:22px;margin:0 0 14px}li{margin-bottom:6px}
.card{background:var(--card);border:1px solid var(--line);border-radius:4px;padding:20px 22px;margin:0 0 16px;position:relative}
.card .tab{position:absolute;top:-26px;left:16px;height:26px;padding:5px 12px 0;border-radius:5px 5px 0 0;font-family:var(--type);font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--ink)}
.card.tabbed{margin-top:40px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.grid.two{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.tile{display:flex;flex-direction:column;text-decoration:none;color:inherit;background:var(--card);border:1px solid var(--line);border-radius:0 6px 6px 6px;padding:22px 20px 18px;position:relative;margin-top:26px;transition:transform .15s,box-shadow .15s}
.tile:hover{transform:translateY(-2px);box-shadow:0 14px 24px -18px rgba(0,0,0,.5);color:inherit}
.tile::before{content:attr(data-tab);position:absolute;top:-26px;left:-1px;height:26px;padding:5px 12px 0;border-radius:6px 6px 0 0;background:var(--c,var(--ink));color:#fff;font-family:var(--type);font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.tile h3{font-family:var(--type);font-weight:400;font-size:24px;margin:0 0 8px}
.tile p{font-size:16px;margin:0 0 10px}
.tile .go{margin-top:auto;font-family:var(--type);font-size:14px;color:var(--c,var(--ink))}
.tile.colored{background:var(--c);color:#fff;border:none}
.tile.colored .go,.tile.colored p{color:#fff}
.btn{display:inline-block;font:inherit;font-family:var(--type);font-size:16px;letter-spacing:.03em;padding:13px 18px;border:none;border-radius:6px;background:var(--ink);color:var(--paper);cursor:pointer;text-decoration:none;margin:6px 8px 6px 0}
.btn.light{background:var(--card);color:var(--ink);border:1.5px solid var(--line)}
.btn:hover{color:var(--paper);opacity:.9}.btn.light:hover{color:var(--ink)}
input[type=text],input[type=date],textarea{font:inherit;width:100%;padding:12px;border:1.5px solid var(--line);border-radius:6px;background:#fff;color:var(--ink)}
label{display:block;font-weight:600;margin:14px 0 6px}
table{width:100%;border-collapse:collapse;margin:0 0 18px;font-size:16px;background:var(--card)}
th,td{text-align:left;vertical-align:top;padding:10px 12px;border-bottom:1px solid var(--line)}
th{font-family:var(--type);font-weight:400;font-size:14px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);background:var(--paper-d)}
.tablewrap{overflow-x:auto;margin:0 0 18px}
.tablewrap table{margin:0;min-width:560px}
.note{border-left:5px solid var(--pencil);background:var(--card);padding:14px 18px;margin:0 0 16px;border-radius:0 4px 4px 0}
.note.ok{border-color:var(--green)}
.amp{display:inline-block;font-family:var(--type);font-size:13px;letter-spacing:.05em;padding:2px 9px;border-radius:3px;color:#fff;vertical-align:2px}
.amp.g{background:var(--green)}.amp.y{background:var(--yellow);color:var(--ink)}.amp.r{background:var(--red)}
.stand{font-family:var(--type);font-size:13px;color:var(--muted);border:1.5px solid var(--muted);display:inline-block;padding:3px 9px;transform:rotate(-2deg);margin:0 0 18px}
dl{margin:0}dt{font-weight:700;margin-top:16px}dd{margin:4px 0 0}
.src{font-size:14px;color:var(--muted)}
footer.site{max-width:1040px;margin:0 auto;padding:22px 16px 40px;border-top:1px solid var(--line);font-size:14px;color:var(--muted);display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:space-between}
footer.site a{color:var(--muted)}
.noprint{}
/* Texturen (Variablen in textures.css) */
.card,.tile,table,.note{background-image:var(--tx-card);background-size:160px 160px}
.hand{-webkit-mask-image:var(--tx-pencil);mask-image:var(--tx-pencil);-webkit-mask-size:128px 128px;mask-size:128px 128px}
@media (max-width:600px){body{font-size:17px}.top nav{gap:12px}main{padding-top:24px}}
@media print{
  body{background:#fff;font-size:11pt}.top,footer.site,.noprint{display:none!important}
  main{max-width:none;padding:0}.card,.tile{break-inside:avoid;box-shadow:none}
  a{text-decoration:none}h2{margin-top:22pt}
}
@media (prefers-reduced-motion:reduce){.tile{transition:none}}