/**
 * werkzeug.css — gemeinsame Grundteile der kleinen Tools
 * (QR-Code, PDF, DMX; 03.10.2026). Gleiche Optik wie der Stundenplan:
 * weißer Kopf, darunter eine hellblaue Fläche mit weißen Karten.
 *
 * Eigene display-Angaben schlagen das hidden-Attribut, darum gilt hier:
 * hidden heißt weg.
 */
.wz [hidden], .wz-dialog[hidden], .wz-dialog [hidden], .wz-schleier[hidden] { display: none !important; }

/* ════════ KOPF ════════ */
.wz-hero { background: var(--card); padding: clamp(1.4rem, 3vw, 2.2rem) 0 clamp(2.2rem, 4vw, 3rem); }
.wz-zurueck {
  display: inline-flex; align-items: center; gap: 0.45rem;
  margin-bottom: 0.8rem;
  font-size: 0.9rem; font-weight: 600; color: var(--sub); text-decoration: none;
  transition: gap 0.2s, color 0.2s;
}
@media (hover: hover) { .wz-zurueck:hover { color: var(--text2); gap: 0.65rem; } }
.wz-h1 {
  margin: 0;
  font-family: 'Sora', sans-serif; font-weight: 800;
  font-size: clamp(2.6rem, 7vw, 4.6rem); letter-spacing: -0.04em; line-height: 1.05;
  color: var(--text);
}
.wz-punkt { color: var(--pri3); }

.wz-bereich {
  position: relative;
  margin-top: -1.2rem;
  background: var(--bg);
  border-top-left-radius: var(--r3);
  border-top-right-radius: var(--r3);
  box-shadow: 0 -22px 60px rgba(15, 42, 74, 0.08);
  padding: clamp(1.4rem, 3vw, 2.2rem) 0 clamp(3rem, 6vw, 5rem);
  min-height: 60vh;
}
.wz { font-family: 'Inter', sans-serif; color: var(--text); }

/* ════════ KARTE ════════ */
.wz-karte {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r2);
  box-shadow: var(--shadow);
  padding: clamp(1rem, 2.6vw, 1.5rem);
  min-width: 0;
}
.wz-etikett {
  display: block; margin: 0 0 0.55rem;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sub);
}

/* ════════ KNÖPFE ════════ */
.wz-knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  height: 40px; padding: 0 1rem;
  border: 1.5px solid var(--border); border-radius: 12px;
  background: var(--card); color: var(--text2);
  font: inherit; font-size: 0.88rem; font-weight: 600; cursor: pointer; white-space: nowrap;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.16s, border-color 0.16s, color 0.16s, transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.wz-knopf svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
@media (hover: hover) { .wz-knopf:not(:disabled):hover { color: var(--pri); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(15, 42, 74, 0.10); } }
.wz-knopf:active:not(:disabled) { transform: scale(0.96); }
.wz-knopf:disabled { opacity: 0.4; cursor: default; }
.wz-knopf:focus { outline: none; }
.wz-knopf:focus-visible { outline: 3px solid var(--pri3); outline-offset: 2px; }
.wz-rund { width: 40px; padding: 0; }
.wz-primaer { background: var(--pri); border-color: var(--pri); color: #fff; }
@media (hover: hover) { .wz-primaer:not(:disabled):hover { color: #fff; background: var(--pri2); border-color: var(--pri2); } }
.wz-gefahr { color: var(--danger); }
@media (hover: hover) { .wz-gefahr:not(:disabled):hover { color: var(--danger); } }

/* Umschalter in Pillenform (z. B. Link | Text | WLAN) */
.wz-segment {
  display: flex; gap: 0.2rem; padding: 0.25rem;
  border-radius: 14px; background: var(--card2); border: 1px solid var(--border);
  overflow-x: auto; scrollbar-width: none;
}
.wz-segment::-webkit-scrollbar { display: none; }
.wz-segment button {
  flex: 1 0 auto;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  border: 0; background: none; font: inherit; font-size: 0.84rem; font-weight: 600; color: var(--sub);
  padding: 0.5rem 0.75rem; border-radius: 10px; cursor: pointer; white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.18s, color 0.18s, box-shadow 0.18s;
}
.wz-segment button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wz-segment button.an { background: var(--card); color: var(--pri); box-shadow: 0 2px 8px rgba(15, 42, 74, 0.08); }
.wz-segment button:focus { outline: none; }
.wz-segment button:focus-visible { outline: 2px solid var(--pri3); }

/* ════════ EINGABEN ════════ */
.wz-feld { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.wz-feld > span { font-size: 0.76rem; font-weight: 600; color: var(--sub); }
.wz-eingabe {
  width: 100%; min-width: 0;
  font: inherit; font-size: 0.95rem; font-weight: 500; color: var(--text);
  padding: 0.65rem 0.8rem; border-radius: 12px;
  border: 1.5px solid var(--border); background: var(--card2); outline: none;
  transition: border-color 0.16s, background 0.16s;
}
.wz-eingabe::placeholder { color: var(--muted); }
.wz-eingabe:focus { border-color: var(--pri3); background: var(--card); }
textarea.wz-eingabe { resize: vertical; min-height: 7rem; line-height: 1.5; }
select.wz-eingabe { appearance: none; -webkit-appearance: none; padding-right: 2.2rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b8499' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.7rem center; background-size: 16px; }
.wz-reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0.7rem; }
.wz-haken { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.88rem; font-weight: 500; color: var(--text2); cursor: pointer; user-select: none; }
.wz-haken input { width: 18px; height: 18px; accent-color: var(--pri); margin: 0; }

/* ════════ DIALOG ════════ */
.wz-schleier { position: fixed; inset: 0; z-index: 400; background: rgba(15, 42, 74, 0.32); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: wzSchleierAuf 0.2s ease; }
@keyframes wzSchleierAuf { from { opacity: 0; } }
.wz-dialog {
  position: fixed; z-index: 401; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(26rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); overflow-y: auto;
  display: flex; flex-direction: column; gap: 0.9rem;
  padding: 1.3rem 1.3rem 1.2rem;
  background: var(--card); border-radius: var(--r2);
  box-shadow: 0 30px 70px rgba(15, 42, 74, 0.25);
  font-family: 'Inter', sans-serif; color: var(--text);
  animation: wzDialogAuf 0.22s var(--ease-out);
}
@keyframes wzDialogAuf { from { opacity: 0; transform: translate(-50%, calc(-50% + 8px)) scale(0.98); } }
.wz-dialog h2 { margin: 0; font-family: 'Sora', sans-serif; font-weight: 800; font-size: 1.25rem; letter-spacing: -0.02em; }
.wz-dialog-unten { display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; flex-wrap: wrap; }
.wz-dialog-unten .links { margin-right: auto; }

/* ════════ MELDUNG ════════ */
.wz-hinweis {
  position: fixed; left: 50%; bottom: 1.4rem; z-index: 520;
  transform: translate(-50%, 1rem); opacity: 0; pointer-events: none;
  max-width: calc(100vw - 2rem);
  padding: 0.6rem 1rem; border-radius: 999px;
  background: var(--text); color: #fff; font-family: 'Inter', sans-serif; font-size: 0.85rem; font-weight: 600;
  box-shadow: 0 10px 26px rgba(15, 42, 74, 0.25);
  transition: opacity 0.2s, transform 0.25s var(--ease-out);
}
.wz-hinweis.zeigt { opacity: 1; transform: translate(-50%, 0); }
.wz-hinweis.fehler { background: #b8382b; }

@media (prefers-reduced-motion: reduce) {
  .wz-dialog, .wz-schleier { animation: none; }
  .wz-knopf, .wz-segment button { transition: none; }
}

/* ════════ ERGÄNZUNGEN 05.10.2026 (für die neuen Tools) ════════ */

/* Reiter als Pillen (wie im Rechner); schmal waagerecht wischbar */
.wz-reiter { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 1.2rem; }
@media (max-width: 760px) {
  .wz-reiter {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin: -0.4rem -1rem 0.8rem; padding: 0.4rem 1rem 0.7rem; scroll-padding: 0 1rem;
  }
  .wz-reiter::-webkit-scrollbar { display: none; }
}
.wz-reiter button {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.6rem 1rem; border-radius: 999px; border: 1.5px solid var(--border);
  background: var(--card); color: var(--text2); font: 600 0.9rem 'Inter', sans-serif; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.22s, color 0.22s, border-color 0.22s, box-shadow 0.25s, transform 0.18s var(--ease-out);
}
.wz-reiter button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) { .wz-reiter button:not(.an):hover { color: var(--pri); border-color: var(--border2); transform: translateY(-1px); } }
.wz-reiter button:active { transform: scale(0.95); }
.wz-reiter button.an { background: var(--pri); border-color: var(--pri); color: #fff; box-shadow: 0 4px 12px rgba(26, 106, 170, 0.22); }
.wz-reiter button:focus { outline: none; }
.wz-reiter button:focus-visible { outline: 3px solid var(--pri3); outline-offset: 2px; }
.wz-seite { animation: wzRein 0.32s var(--ease-out); }
@keyframes wzRein { from { opacity: 0; transform: translateY(8px); } }

/* Ablage für Dateien (noch nichts gewählt) */
.wz-ablage {
  width: 100%; min-height: clamp(15rem, 40vh, 21rem);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.45rem;
  padding: 2rem 1rem;
  border: 2px dashed var(--border2); border-radius: var(--r2);
  background: var(--card); color: var(--text);
  font: inherit; cursor: pointer; text-align: center;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.2s, background 0.2s, transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}
@media (hover: hover) { .wz-ablage:hover { border-color: var(--pri3); box-shadow: var(--shadow3); transform: translateY(-2px); } }
.wz-ablage:active { transform: scale(0.99); }
.wz-ablage:focus { outline: none; }
.wz-ablage:focus-visible, .wz-ablage.drueber { border-color: var(--pri3); background: var(--card2); }
.wz-ablage-symbol {
  width: 68px; height: 68px; margin-bottom: 0.5rem; border-radius: 28%;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(145deg, #3aa0e0, #1a6aaa); color: #fff;
  box-shadow: 0 10px 22px rgba(26, 106, 170, 0.25);
}
.wz-ablage-symbol svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.wz-ablage-titel { font-family: 'Sora', sans-serif; font-weight: 800; font-size: clamp(1.2rem, 3vw, 1.5rem); letter-spacing: -0.02em; }
.wz-ablage-info { font-size: 0.9rem; color: var(--sub); max-width: 26rem; line-height: 1.5; }
.wz-ablage-klein { min-height: 0; padding: 1rem; flex-direction: row; gap: 0.6rem; border-width: 1.5px; }
.wz-ablage-klein .wz-ablage-symbol { width: 40px; height: 40px; margin: 0; }
.wz-ablage-klein .wz-ablage-symbol svg { width: 20px; height: 20px; }

/* Ein/Aus-Schalter */
.wz-schalter { display: inline-flex; align-items: center; gap: 0.6rem; cursor: pointer; user-select: none; font-size: 0.88rem; font-weight: 500; color: var(--text2); }
.wz-schalter input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.wz-schalter i {
  position: relative; flex: none; width: 42px; height: 24px; border-radius: 99px;
  background: var(--border2); transition: background 0.2s;
}
.wz-schalter i::after {
  content: ''; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(15, 42, 74, 0.25); transition: transform 0.22s var(--ease-out);
}
.wz-schalter input:checked + i { background: var(--pri); }
.wz-schalter input:checked + i::after { transform: translateX(18px); }
.wz-schalter input:focus-visible + i { outline: 3px solid var(--pri3); outline-offset: 2px; }

/* Schieberegler im Seitenblau */
.wz-regler { width: 100%; accent-color: var(--pri); cursor: pointer; }

/* Plus/Minus mit Zahl */
.wz-zaehler { display: inline-flex; align-items: center; gap: 0.2rem; padding: 0.2rem; border-radius: 12px; background: var(--card2); border: 1px solid var(--border); }
.wz-zaehler button {
  width: 34px; height: 34px; border: 0; border-radius: 9px; background: none; color: var(--pri);
  font: 700 1.1rem 'Inter', sans-serif; cursor: pointer; transition: background 0.15s, transform 0.1s;
}
.wz-zaehler button:hover { background: var(--card); }
.wz-zaehler button:active { transform: scale(0.9); }
.wz-zaehler b { min-width: 2.4rem; text-align: center; font-variant-numeric: tabular-nums; }

.wz-leer { margin: 0; padding: 1.4rem 0.5rem; text-align: center; font-size: 0.88rem; color: var(--sub); line-height: 1.5; }
.wz-leise { border: 0; background: none; padding: 0; color: var(--pri); font: 600 0.82rem 'Inter', sans-serif; cursor: pointer; }
.wz-leise:hover { text-decoration: underline; }
.wz-knopfreihe { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
@media (prefers-reduced-motion: reduce) { .wz-seite { animation: none; } .wz-ablage, .wz-reiter button { transition: none; } }
.wz-dialog-text { margin: -0.3rem 0 0.2rem; font-size: 0.92rem; line-height: 1.55; color: var(--text2); }
.wz-gefahr-voll { background: var(--danger); border-color: var(--danger); color: #fff; }
@media (hover: hover) { .wz-gefahr-voll:not(:disabled):hover { color: #fff; background: #c0392b; border-color: #c0392b; } }