/* Gemeinsame Gestaltung aller Werkzeuge und des Portals.
   Wird vor der eigenen Gestaltung eines Werkzeugs eingebunden. */
:root {
  --papier: #f6f2ea;
  --tinte: #23201c;
  --rand: #d5cdbf;
  --flaeche: #fffdf8;
  --dunkel: #2c2925;
  --akzent: #8c3a1c;
  --akzent-hell: #b8552f;
  --grau: #6d675e;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px; color: var(--tinte); background: var(--papier);
}

/* --- Kopfleiste (Portal wie Werkzeug) --- */
.kopf {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 8px 16px; background: var(--dunkel); color: #f4efe6;
  border-bottom: 3px solid var(--akzent);
}
.kopf h1 { font-size: 17px; margin: 0; letter-spacing: .5px; text-transform: uppercase; }
.kopf .untertitel { font-size: 12px; opacity: .7; text-transform: none; letter-spacing: 0; }

/* Rücksprung zur Werkzeugübersicht */
.zurueck {
  display: inline-flex; align-items: center; gap: 5px;
  color: #e8e2d8; text-decoration: none; font-size: 12.5px;
  padding: 4px 9px; border: 1px solid #58524a; border-radius: 4px;
  background: #3c3833; white-space: nowrap;
}
.zurueck:hover { background: #4a453e; border-color: var(--akzent-hell); color: #fff; }

/* --- Knöpfe --- */
.knopf {
  font: inherit; font-size: 13px; padding: 6px 10px; cursor: pointer;
  background: var(--flaeche); color: var(--tinte);
  border: 1px solid var(--rand); border-radius: 4px;
  text-decoration: none; display: inline-block;
}
.knopf:hover { background: #fff; border-color: var(--akzent-hell); }
.knopf.haupt { background: var(--akzent); color: #fff; border-color: var(--akzent); }
.knopf.haupt:hover { background: var(--akzent-hell); }
.knopf.klein { padding: 4px 8px; font-size: 13px; }
.knopf.breit { width: 100%; margin-top: 8px; padding: 9px; font-size: 14px; }
.knopf:disabled { opacity: .45; cursor: default; }