/* zeichnen.css — /tools/zeichnen (05.10.2026, überarbeitet). Baut auf werkzeug.css auf. */

/* ════════ LEISTE ════════ */
.zb-leiste {
  position: sticky; top: calc(var(--nav-h, 76px) + 0.6rem); z-index: 30;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.6rem;
  padding: 0.5rem 0.6rem; margin-bottom: 1rem;
  background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 8px 24px rgba(15, 42, 74, 0.08);
}
@media (max-width: 700px) { .zb-leiste { position: relative; top: 0; } }
.zb-gruppe { display: flex; align-items: center; gap: 0.2rem; }
.zb svg { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.zb-werkzeuge button {
  width: 38px; height: 38px; border-radius: 11px; border: 0; background: transparent; color: var(--text2);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: background 0.18s, color 0.18s, transform 0.15s var(--ease-out), box-shadow 0.18s;
}
.zb-werkzeuge svg { width: 19px; height: 19px; }
@media (hover: hover) { .zb-werkzeuge button:not(.an):hover { background: var(--bg); color: var(--pri); } }
.zb-werkzeuge button:active { transform: scale(0.9); }
.zb-werkzeuge button.an { background: var(--pri); color: #fff; box-shadow: 0 4px 12px rgba(26, 106, 170, 0.3); }
.zb-werkzeuge button.an svg { animation: zbHuepf 0.32s var(--ease-out); }
@keyframes zbHuepf { 40% { transform: scale(1.18); } }
.zb-trenner { width: 1px; height: 22px; background: var(--border2); margin: 0 0.25rem; }
@media (max-width: 760px) { .zb-trenner-gross { display: none; } }

/* Farben: Abstand groß genug, dass der Ring der gewählten Farbe nicht in
   die Nachbarn ragt. Gewählt = Farbe wird etwas größer, mit weißem Rand
   und dünnem blauen Ring. */
.zb-farben { gap: 0.5rem; padding: 0 0.25rem; }
.zb-farbe {
  position: relative; width: 22px; height: 22px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; flex: none;
  background: var(--f); box-shadow: inset 0 0 0 1px rgba(15, 42, 74, 0.16);
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s;
}
@media (hover: hover) { .zb-farbe:hover { transform: scale(1.15); } }
.zb-farbe.an { transform: scale(1.12); box-shadow: inset 0 0 0 1px rgba(15, 42, 74, 0.16), 0 0 0 2px var(--card), 0 0 0 3.5px var(--pri); }
.zb-farbe-eigen { background: conic-gradient(from 90deg, #e74c3c, #f5a623, #f1e05a, #2ecc71, #5aaee8, #8e44ad, #e74c3c); }
.zb-farbe-eigen.an::after { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: var(--eigen, #fff); box-shadow: 0 0 0 1.5px #fff; }

/* Knöpfe mit Text (Stärke, Schrift) */
.zb-knopf {
  height: 38px; display: inline-flex; align-items: center; gap: 0.45rem; padding: 0 0.7rem 0 0.55rem;
  border-radius: 11px; border: 1px solid var(--border); background: var(--card); color: var(--text2); cursor: pointer;
  font: 600 0.82rem 'Inter', sans-serif; transition: border-color 0.18s, background 0.18s, color 0.18s;
}
.zb-knopf[hidden] { display: none; }
.zb-knopf:hover, .zb-knopf[aria-expanded="true"] { border-color: var(--pri3); color: var(--pri); }
.zb-knopf-text { min-width: 1.4ch; }
.zb-strich-vorschau { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; }
.zb-strich-vorschau::after { content: ''; width: var(--d, 5px); height: var(--d, 5px); border-radius: 50%; background: var(--fb, var(--text)); transition: width 0.2s var(--ease-out), height 0.2s var(--ease-out), background 0.2s; box-shadow: 0 0 0 1px rgba(15, 42, 74, 0.12); }
.zb-aa { font: 700 1rem Inter, sans-serif; color: var(--text); width: 26px; text-align: center; }

.zb-rundknopf {
  width: 38px; height: 38px; border-radius: 11px; border: 1px solid var(--border); background: var(--card); color: var(--text2);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: border-color 0.18s, color 0.18s, transform 0.15s, background 0.18s;
}
.zb-rundknopf svg { width: 18px; height: 18px; }
.zb-rundknopf:hover:not(:disabled), .zb-rundknopf[aria-expanded="true"] { border-color: var(--pri3); color: var(--pri); }
.zb-rundknopf:active:not(:disabled) { transform: scale(0.92); }
.zb-rundknopf:disabled { opacity: 0.38; cursor: default; }
.zb-zahnrad svg { transition: transform 0.5s var(--ease-out); }
.zb-zahnrad[aria-expanded="true"] svg { transform: rotate(90deg); }
.zb-aktion { margin-left: auto; gap: 0.35rem; }
@media (max-width: 760px) { .zb-aktion { margin-left: 0; } }

/* ════════ AUFKLAPPER ════════ */
.zb-pop {
  position: absolute; top: calc(100% + 0.5rem); z-index: 40; width: min(20rem, calc(100vw - 2rem));
  display: flex; flex-direction: column; gap: 0.6rem; padding: 1rem;
  background: var(--card); border: 1px solid var(--border); border-radius: 20px; box-shadow: 0 22px 54px rgba(15, 42, 74, 0.18);
  transform-origin: top center;
  animation: zbPop 0.24s var(--ease-out);
}
.zb-pop[hidden] { display: none; }
.zb-pop.zu { animation: zbPopZu 0.16s ease-in forwards; }
@keyframes zbPop { from { opacity: 0; transform: translateY(-8px) scale(0.97); } }
@keyframes zbPopZu { to { opacity: 0; transform: translateY(-6px) scale(0.98); } }
.zb-pop-titel { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sub); }
.zb-pop-blatt { width: min(24rem, calc(100vw - 2rem)); gap: 0.7rem; }
.zb-pop-export { width: 15rem; padding: 0.45rem; gap: 0.1rem; }

.zb-regler { width: 100%; accent-color: var(--pri); }

/* Farbwähler im Seitenstil */
.zb-pop-farbe { width: 16rem; }
.zb-sv {
  position: relative; height: 150px; border-radius: 14px; cursor: crosshair; touch-action: none;
  background: linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, hsl(var(--h, 330), 100%, 50%));
  box-shadow: inset 0 0 0 1px rgba(15, 42, 74, 0.1);
}
.zb-sv-knopf {
  position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; pointer-events: none;
  border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); background: var(--c, #f00);
}
.zb-hue {
  -webkit-appearance: none; appearance: none; width: 100%; height: 14px; border-radius: 99px; margin: 0.2rem 0;
  background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); outline: none;
}
.zb-hue::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.35); cursor: pointer; }
.zb-hue::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.35); cursor: pointer; }
.zb-farb-zeile { display: flex; gap: 0.5rem; align-items: center; }
.zb-farb-probe { width: 38px; height: 38px; border-radius: 11px; background: var(--c, #fff); box-shadow: inset 0 0 0 1px rgba(15, 42, 74, 0.12); flex: none; }
.zb-hex {
  flex: 1; min-width: 0; height: 38px; padding: 0 0.7rem; border-radius: 11px; border: 1.5px solid var(--border); background: var(--card2);
  font: 600 0.92rem ui-monospace, Consolas, monospace; color: var(--text); text-transform: uppercase; outline: none;
}
.zb-hex:focus { border-color: var(--pri3); background: var(--card); }
.zb-zuletzt { display: flex; gap: 0.45rem; min-height: 0; flex-wrap: wrap; }
.zb-zuletzt:empty { display: none; }
.zb-zuletzt button { width: 24px; height: 24px; border-radius: 50%; border: 0; cursor: pointer; background: var(--f); box-shadow: inset 0 0 0 1px rgba(15, 42, 74, 0.16); transition: transform 0.15s; }
.zb-zuletzt button:hover { transform: scale(1.15); }

/* Strichstärke */
.zb-pop-staerke { width: 17rem; }
.zb-staerken { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.35rem; }
.zb-staerken button {
  height: 44px; border-radius: 12px; border: 1.5px solid var(--border); background: var(--card2); cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.zb-staerken button i { width: var(--d); height: var(--d); border-radius: 50%; background: var(--text); }
.zb-staerken button.an { border-color: var(--pri); background: var(--card); transform: scale(1.04); }
.zb-staerken button.an i { background: var(--pri); }
.zb-strich-probe { width: 100%; height: 40px; }
.zb-strich-probe path { stroke: var(--fb, var(--text)); transition: stroke-width 0.15s; }

/* Schrift */
.zb-schriften { display: flex; flex-direction: column; gap: 0.25rem; }
.zb-schriften button {
  text-align: left; padding: 0.5rem 0.75rem; border-radius: 11px; border: 1.5px solid transparent; background: transparent;
  font-size: 1.02rem; color: var(--text); cursor: pointer; transition: background 0.15s, border-color 0.15s;
}
.zb-schriften button:hover { background: var(--bg); }
.zb-schriften button.an { border-color: var(--pri3); background: var(--card); color: var(--pri); }
.zb-stil { display: flex; gap: 0.4rem; }
.zb-stil-knopf {
  flex: 1; height: 36px; border-radius: 11px; border: 1.5px solid var(--border); background: var(--card2); cursor: pointer;
  font: 600 0.84rem 'Inter', sans-serif; color: var(--text2); transition: all 0.15s;
}
.zb-stil-knopf[aria-pressed="true"] { border-color: var(--pri); background: var(--pri); color: #fff; }

/* Blatt */
.zb-formate { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.35rem; }
.zb-formate button {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 0.35rem; height: 70px; padding: 0.4rem 0.2rem;
  border-radius: 12px; border: 1.5px solid var(--border); background: var(--card2); cursor: pointer;
  font: 600 0.72rem 'Inter', sans-serif; color: var(--text2); transition: border-color 0.15s, background 0.15s, color 0.15s, transform 0.15s;
}
.zb-formate button i { display: block; background: #fff; border: 1.5px solid currentColor; border-radius: 2px; transition: width 0.25s var(--ease-out), height 0.25s var(--ease-out); }
.zb-formate button:hover { border-color: var(--pri3); }
.zb-formate button.an { border-color: var(--pri); color: var(--pri); background: var(--card); }
.zb-formate button:active { transform: scale(0.95); }
.zb-ausrichtung button svg { width: 15px; height: 15px; }
.zb-muster { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.35rem; }
.zb-muster button {
  display: flex; flex-direction: column; align-items: center; gap: 0.3rem; padding: 0.35rem 0.2rem 0.4rem; border-radius: 12px;
  border: 1.5px solid var(--border); background: var(--card2); cursor: pointer; font: 600 0.7rem 'Inter', sans-serif; color: var(--text2);
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.zb-muster button.an { border-color: var(--pri); color: var(--pri); background: var(--card); }
.zb-muster i { width: 100%; height: 34px; border-radius: 6px; background-color: #fff; box-shadow: inset 0 0 0 1px var(--border); }
.m-liniert { background-image: repeating-linear-gradient(to bottom, transparent 0 6px, rgba(26, 106, 170, 0.35) 6px 7px); }
.m-kariert { background-image: linear-gradient(rgba(26, 106, 170, 0.3) 1px, transparent 1px), linear-gradient(90deg, rgba(26, 106, 170, 0.3) 1px, transparent 1px); background-size: 6px 6px; }
.m-punkte { background-image: radial-gradient(rgba(26, 106, 170, 0.5) 1px, transparent 1.3px); background-size: 6px 6px; }
.m-noten { background-image: repeating-linear-gradient(to bottom, transparent 0 4px, rgba(15, 42, 74, 0.45) 4px 5px, transparent 5px 6px); background-size: 100% 26px; background-position: 0 4px; background-repeat: repeat-x; }
.zb-abstand { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.8rem; color: var(--sub); }
.zb-abstand b { color: var(--text); }
.zb-abstand[hidden] { display: none; }
.zb-papiere { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.zb-papiere button { width: 32px; height: 32px; border-radius: 10px; border: 0; cursor: pointer; background: var(--f); box-shadow: inset 0 0 0 1px rgba(15, 42, 74, 0.2); transition: transform 0.15s, box-shadow 0.15s; }
.zb-papiere button:hover { transform: scale(1.08); }
.zb-papiere button.an { box-shadow: inset 0 0 0 1px rgba(15, 42, 74, 0.2), 0 0 0 2px var(--card), 0 0 0 3.5px var(--pri); }

.zb-pop-zeile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.1rem; padding: 0.6rem 0.75rem; border-radius: 12px;
  border: 0; background: transparent; cursor: pointer; text-align: left; font-family: 'Inter', sans-serif;
}
.zb-pop-zeile b { font-size: 0.9rem; color: var(--text); }
.zb-pop-zeile small { font-size: 0.76rem; color: var(--sub); }
.zb-pop-zeile:hover { background: var(--bg); }
.zb-pop-gefahr b { color: var(--danger); }

/* ════════ BLATT ════════ */
.zb-tisch {
  position: relative; display: flex; justify-content: flex-start; align-items: flex-start;
  padding: clamp(0.8rem, 2.5vw, 1.8rem) clamp(0.5rem, 2vw, 1.5rem) 4rem;
  border-radius: 22px; background: var(--bg2);
  overflow: auto; max-height: calc(100vh - var(--nav-h, 76px) - 7rem); min-height: 22rem;
  overscroll-behavior: contain;
}
@media (max-width: 700px) { .zb-tisch { max-height: none; } }
.zb-blatt {
  position: relative; flex: none; border-radius: 4px; margin: 0 auto;
  box-shadow: 0 1px 2px rgba(15, 42, 74, 0.1), 0 14px 40px rgba(15, 42, 74, 0.14);
}
.zb-blatt canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; border-radius: 4px; }
.zb-inhalt { touch-action: none; cursor: crosshair; }
.zb[data-werkzeug="text"] .zb-inhalt { cursor: text; }
.zb[data-werkzeug="auswahl"] .zb-inhalt { cursor: default; }
.zb .zb-inhalt.ueber { cursor: move; }
.zb[data-werkzeug="radierer"] .zb-inhalt { cursor: cell; }
.zb-aufziehen { position: absolute; pointer-events: none; border: 1.5px solid var(--pri2); background: rgba(90, 174, 232, 0.12); border-radius: 3px; }
.zb-aufziehen[hidden], .zb-auswahlrahmen[hidden] { display: none; }
.zb-auswahlrahmen {
  position: absolute; pointer-events: none; border: 1.5px dashed var(--pri2); border-radius: 5px;
  box-shadow: 0 0 0 4px rgba(90, 174, 232, 0.12); animation: zbRahmen 0.2s var(--ease-out);
}
@keyframes zbRahmen { from { opacity: 0; transform: scale(0.98); } }
.zb-auswahlrahmen button {
  position: absolute; top: -15px; right: -15px; width: 30px; height: 30px; border-radius: 50%; border: 0; pointer-events: auto;
  background: var(--danger); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 4px 10px rgba(231, 76, 60, 0.35); transition: transform 0.15s;
}
.zb-auswahlrahmen button:hover { transform: scale(1.1); }
.zb-auswahlrahmen svg { width: 15px; height: 15px; stroke-width: 2.2; }
.zb-texteingabe {
  position: absolute; z-index: 3; margin: 0; padding: 0; border: 1.5px dashed var(--pri3); border-radius: 3px; outline: none; resize: none;
  background: rgba(255, 255, 255, 0.35); overflow: hidden; white-space: pre; line-height: 1.25; min-width: 3ch;
}
.zb-texteingabe[hidden] { display: none; }

/* Zoom unten rechts über dem Tisch (bleibt stehen, wenn das Blatt scrollt) */
.zb-tisch-rahmen { position: relative; }
.zb-zoom {
  position: absolute; right: 0.8rem; bottom: 0.8rem; z-index: 5;
  display: flex; align-items: center; gap: 0.15rem; padding: 0.25rem;
  border-radius: 999px; background: rgba(255, 255, 255, 0.95); border: 1px solid var(--border); box-shadow: 0 6px 18px rgba(15, 42, 74, 0.12);
}
.zb-zoom button {
  height: 32px; min-width: 32px; border-radius: 999px; border: 0; background: transparent; color: var(--text2); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; font: 700 0.8rem 'Inter', sans-serif; transition: background 0.15s, color 0.15s;
}
.zb-zoom button:hover { background: var(--bg); color: var(--pri); }
.zb-zoom svg { width: 16px; height: 16px; stroke-width: 2.2; }
.zb-zoom-wert { min-width: 4.2rem !important; }

/* ════════ SEITEN ════════ */
.zb-seiten { display: flex; gap: 0.8rem; margin-top: 1rem; overflow-x: auto; padding: 0.4rem 0.3rem 0.6rem; scrollbar-width: thin; }
.zb-seite {
  position: relative; flex: none; display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
  border: 0; background: none; padding: 0; cursor: pointer; font: 600 0.74rem 'Inter', sans-serif; color: var(--sub);
}
.zb-seite canvas { display: block; height: 84px; width: auto; border-radius: 4px; background: #fff; box-shadow: 0 0 0 1px var(--border), 0 4px 10px rgba(15, 42, 74, 0.08); transition: box-shadow 0.2s, transform 0.2s var(--ease-out); }
.zb-seite:hover canvas { transform: translateY(-3px); }
.zb-seite.an canvas { box-shadow: 0 0 0 2.5px var(--pri), 0 6px 14px rgba(26, 106, 170, 0.2); }
.zb-seite.an { color: var(--pri); }
.zb-seite-weg {
  position: absolute; top: -7px; right: -7px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: var(--card); color: var(--sub);
  box-shadow: 0 2px 6px rgba(15, 42, 74, 0.2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  opacity: 0; transform: scale(0.7); transition: opacity 0.15s, transform 0.15s;
}
.zb-seite-weg svg { width: 13px; height: 13px; stroke-width: 2.2; }
.zb-seite:hover .zb-seite-weg, .zb-seite.an .zb-seite-weg { opacity: 1; transform: none; }
.zb-seite-weg:hover { color: var(--danger); }
.zb-seite-neu {
  flex: none; height: 84px; width: 64px; border-radius: 6px; border: 2px dashed var(--border2); background: transparent;
  color: var(--sub); font: 600 0.78rem 'Inter', sans-serif; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.2rem;
  transition: border-color 0.15s, color 0.15s, transform 0.15s;
}
.zb-seite-neu b { font-size: 1.4rem; line-height: 1; }
.zb-seite-neu:hover { border-color: var(--pri3); color: var(--pri); transform: translateY(-3px); }

@media (max-width: 560px) {
  .zb-werkzeuge button, .zb-rundknopf { width: 34px; height: 34px; }
  .zb-knopf { height: 34px; }
}
@media (prefers-reduced-motion: reduce) { .zb-pop, .zb-auswahlrahmen, .zb-werkzeuge button.an svg { animation: none; } }