/* VZP-App – Gestaltung im Stil einer iPad-Notiz-App:
   ruhige graue Umgebung, weiße „Papierbögen“, Aktionsfarbe = Absperr-Rot. */
:root {
  --chrome: #eef0f3;
  --paper: #ffffff;
  --ink: #1c1f24;
  --muted: #69707a;
  --line: #d9dce1;
  --tint: #c8211a;
  --tint-soft: #fbe9e8;
  --radius-l: 14px;
  --radius-s: 8px;
  --shadow-paper: 0 1px 2px rgb(28 31 36 / .08), 0 6px 18px rgb(28 31 36 / .07);
  font: 17px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100dvh; background: var(--chrome); }
#app { min-height: 100dvh; display: flex; flex-direction: column; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--tint) 45%, transparent); outline-offset: 2px; }

/* Schaltflächen: mind. 44 px Touch-Fläche */
.btn-primary, .btn-plain { min-height: 44px; padding: 0 18px; border-radius: 22px; border: 0; font-weight: 600; }
.btn-primary { background: var(--tint); color: #fff; }
.btn-primary:active { filter: brightness(.9); }
.btn-plain { background: transparent; color: var(--tint); padding: 0 12px; }
.btn-plain:active { background: var(--tint-soft); }

/* Formulare */
.stack { display: grid; gap: 16px; }
label { display: grid; gap: 6px; font-size: 15px; color: var(--muted); }
input:not([type=file]) {
  min-height: 48px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--radius-s);
  background: var(--paper); color: var(--ink); font-size: 17px;
}
input:focus { border-color: var(--tint); outline: none; }
.hint { margin: 0; font-size: 14px; color: var(--muted); }

/* Anmeldung: ein einzelner Bogen auf grauem Grund */
.login { flex: 1; display: grid; place-items: center; padding: 24px 16px; }
.login-sheet { width: min(420px, 100%); background: var(--paper); border-radius: var(--radius-l); box-shadow: var(--shadow-paper); padding: 36px 32px 32px; }
.brand { margin: 0; font-size: 34px; letter-spacing: -.02em; }
.brand-sub { margin: 4px 0 24px; color: var(--muted); }
.segmented { display: grid; grid-template-columns: 1fr 1fr; padding: 3px; margin-bottom: 24px; background: var(--chrome); border-radius: 10px; }
.segmented button { min-height: 36px; border: 0; border-radius: 8px; background: transparent; font-size: 15px; font-weight: 600; color: var(--muted); }
.segmented button[aria-selected=true] { background: var(--paper); color: var(--ink); box-shadow: 0 1px 3px rgb(0 0 0 / .12); }

/* Kopfzeile mit großem Titel */
.topbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: max(20px, env(safe-area-inset-top)) 24px 8px; }
.topbar h1 { margin: 0; font-size: 34px; letter-spacing: -.02em; }
.topbar-actions { display: flex; gap: 4px; }

/* Bibliothek: Pläne als Papierbögen im A3-Querformat */
.library { flex: 1; padding: 16px 24px 32px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 32px 24px; }
.tile { position: relative; display: grid; gap: 4px; align-content: start; text-align: left; background: none; border: 0; padding: 0; }
.paper { display: block; position: relative; width: 100%; aspect-ratio: 420 / 297; border: 0; padding: 0;
  background: var(--paper); border-radius: 4px; box-shadow: var(--shadow-paper); }

.paper-no { position: absolute; right: 8px; bottom: 6px; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--muted); }
.tile-title { margin-top: 8px; font-weight: 600; font-size: 15px; overflow-wrap: anywhere; }
.tile-meta { font-size: 13px; color: var(--muted); }
.tile-delete { justify-self: start; min-height: 32px; padding: 0; border: 0; background: none; font-size: 13px; color: var(--tint); }

/* „Neuer Plan“: leerer Bogen mit rot-weißer Absperrkante */
.paper-new { display: grid; place-items: center; box-shadow: none;
  background: linear-gradient(var(--paper), var(--paper)) padding-box,
              repeating-linear-gradient(-45deg, var(--tint) 0 10px, #fff 10px 20px) border-box;
  border: 6px solid transparent; }
.plus { font-size: 44px; font-weight: 300; color: var(--tint); line-height: 1; }

/* Sheet (Overlay von unten bzw. mittig auf dem iPad) */
.sheet-backdrop { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; padding: 16px; background: rgb(28 31 36 / .3); }
.sheet { width: min(560px, 100%); max-height: 85dvh; display: flex; flex-direction: column; background: var(--chrome); border-radius: var(--radius-l); box-shadow: 0 20px 60px rgb(0 0 0 / .25); overflow: hidden; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 8px 20px; border-bottom: 1px solid var(--line); background: var(--paper); }
.sheet-head h2 { margin: 0; font-size: 17px; }
.sheet-body { padding: 20px; overflow: auto; }
@media (prefers-reduced-motion: no-preference) {
  .sheet { animation: rise .22s ease-out; }
  @keyframes rise { from { transform: translateY(24px); opacity: 0; } }
}

/* Listen im Sheet */
.list { list-style: none; margin: 0; padding: 0; background: var(--paper); border-radius: var(--radius-s); }
.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 8px 10px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.row:last-child { border-bottom: 0; }
.row-main { display: grid; }
.row-actions { display: flex; flex-wrap: wrap; }

/* Logos */
.logo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.logo-card { margin: 0; background: var(--paper); border-radius: var(--radius-s); padding: 12px; display: grid; gap: 8px; }
.logo-card img { width: 100%; height: 72px; object-fit: contain; }
.logo-card figcaption { display: flex; align-items: center; justify-content: space-between; font-size: 14px; }

/* Hinweis-Toast */
.toast { position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 20;
  max-width: calc(100% - 32px); padding: 12px 20px; border-radius: 22px; background: var(--ink); color: #fff; font-size: 15px; box-shadow: 0 8px 24px rgb(0 0 0 / .2); }
.toast-error { background: var(--tint); }

.footer { display: flex; justify-content: center; gap: 20px; padding: 16px 16px max(16px, env(safe-area-inset-bottom)); font-size: 13px; }
.footer a { color: var(--muted); }

@media (max-width: 600px) {
  .topbar, .library { padding-left: 16px; padding-right: 16px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 24px 16px; }
  .login-sheet { padding: 28px 20px 24px; }
}

/* Ordnerpfad über dem Titel */
.crumbs { min-height: 22px; font-size: 15px; color: var(--muted); }
.crumbs a { color: var(--tint); text-decoration: none; }

/* Ordner: gestapelte Bögen */
.paper-stack { text-decoration: none;
  box-shadow: var(--shadow-paper), 6px -6px 0 -1px var(--paper), 6px -6px 0 0 var(--line), 12px -12px 0 -1px var(--paper), 12px -12px 0 0 var(--line); }
.paper-count { position: absolute; right: 10px; bottom: 6px; font-size: 13px; color: var(--muted); }
.tile-link { display: grid; gap: 4px; align-content: start; padding: 0; border: 0; background: none; text-align: left; color: inherit; text-decoration: none; }
.tile-link:active .paper { transform: scale(.98); }

/* Rechtstexte */
.legal { max-width: 720px; background: var(--paper); margin: 24px auto; border-radius: var(--radius-l); box-shadow: var(--shadow-paper); padding: 32px; }
.legal h2 { font-size: 19px; margin: 28px 0 8px; }
.legal a { color: var(--tint); }

/* ---------- Editor: vollflächige Zeichenfläche mit schwebender Werkzeugleiste ---------- */
.editor { position: fixed; inset: 0; background: var(--paper); }
/* Seite selbst nie zoomen (Pinch, Doppeltipp); nur die Karte zoomt (eigene Gesten) */
html { touch-action: pan-x pan-y; }
.map { position: absolute; inset: 0; touch-action: none; }
.toolbar { position: absolute; top: max(12px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 2;
  display: flex; align-items: center; gap: 2px; max-width: calc(100% - 24px); overflow-x: auto; padding: 4px;
  background: rgb(255 255 255 / .92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--line); border-radius: 26px; box-shadow: 0 6px 24px rgb(28 31 36 / .12); }
.tool { min-height: 44px; padding: 0 14px; border: 0; border-radius: 22px; background: none; color: var(--ink);
  font-size: 15px; font-weight: 600; white-space: nowrap; text-decoration: none; display: inline-flex; align-items: center; }
.tool:active { background: var(--chrome); }
.tool[aria-pressed=true] { background: var(--tint-soft); color: var(--tint); }
.toolbar-title { display: grid; padding: 0 12px; font-size: 14px; font-weight: 600; line-height: 1.2; white-space: nowrap;
  border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.toolbar-title small { font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Ausschnitt-Sheet */
.search { display: flex; gap: 8px; }
.search input { flex: 1; }
.result { width: 100%; min-height: 48px; padding: 8px 16px; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; font-size: 15px; }
li:last-child .result { border-bottom: 0; }
.result[aria-current=true] { background: var(--tint-soft); color: var(--tint); font-weight: 600; }
.row-label { display: flex; justify-content: space-between; }
input[type=range] { width: 100%; accent-color: var(--tint); min-height: 44px; }
.btn-primary:disabled { opacity: .5; }

/* Werkzeugleiste unten und Kontextleiste für die Auswahl */
.toolbar-tools { top: auto; bottom: max(12px, env(safe-area-inset-bottom)); }
.toolbar-context { top: calc(max(12px, env(safe-area-inset-top)) + 64px); }
.toolbar[hidden] { display: none; }
.tool-danger { color: var(--tint); }

/* Verkehrszeichen-Palette */
.palette { position: absolute; z-index: 3; right: 12px; top: 76px; bottom: 84px; width: min(300px, calc(100% - 24px));
  display: flex; flex-direction: column; gap: 8px; padding: 12px; overflow: auto;
  background: rgb(255 255 255 / .96); border: 1px solid var(--line); border-radius: var(--radius-l); box-shadow: 0 10px 30px rgb(28 31 36 / .15); }
.palette[hidden] { display: none; }
.palette-head { display: flex; align-items: center; justify-content: space-between; }
.palette-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; }
.palette-item { display: grid; justify-items: center; gap: 2px; padding: 8px 4px; border: 1px solid transparent; border-radius: var(--radius-s);
  background: none; font-size: 12px; color: var(--muted); touch-action: none; user-select: none; -webkit-user-select: none; }
.palette-item:active { background: var(--chrome); border-color: var(--line); }
.palette-item img { width: 44px; height: 44px; pointer-events: none; }
.drag-ghost { position: fixed; z-index: 50; width: 48px; height: 48px; transform: translate(-50%, -50%); pointer-events: none; filter: drop-shadow(0 4px 8px rgb(0 0 0 / .25)); }

/* Werkzeuggruppen mit Menü */
.tool-group { position: relative; }
.toolbar-tools { overflow: visible; }
.tool-menu { position: absolute; bottom: calc(100% + 10px); left: 0; display: grid; gap: 2px; min-width: 190px; padding: 6px;
  background: rgb(255 255 255 / .97); border: 1px solid var(--line); border-radius: var(--radius-l); box-shadow: 0 10px 30px rgb(28 31 36 / .15); }
.tool-menu[hidden] { display: none; }
.tool-menu .tool { justify-content: flex-start; }
/* Werkzeugleiste: auf schmalen Bildschirmen umbrechen statt abschneiden */
.toolbar-tools { flex-wrap: wrap; justify-content: center; }
.toolbar-tools .tool { padding: 0 11px; }

/* Seitenansicht: Planrahmen über der Karte, Umgebung abgedunkelt */
.page-overlay { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.page-frame { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  outline: 1px solid var(--ink); box-shadow: 0 0 0 200vmax rgb(28 31 36 / .35); }
.page-map { position: absolute; border: 1px solid var(--ink); }
.page-head { position: absolute; pointer-events: auto; touch-action: none; cursor: move; background: #fff; box-shadow: 0 2px 10px rgb(28 31 36 / .25); }
.page-head svg { display: block; }
.toolbar select, .toolbar input { min-height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 18px; background: #fff; font-size: 15px; }
.page-size { display: inline-flex; align-items: center; gap: 4px; padding: 0 6px; font-size: 14px; }
.page-size[hidden], .tool[hidden] { display: none; }
.page-size input { width: 76px; }

/* Regelplan-Auswahl */
.list-head { margin: 8px 0 0; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.hint-warn { color: var(--tint); font-weight: 600; }
.hint[hidden] { display: none; }

/* Import von Trainingsbeispielen: Fadenkreuz in der Kartenmitte */
.crosshair { position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px; pointer-events: none; z-index: 1;
  background: linear-gradient(var(--tint), var(--tint)) center/2px 100% no-repeat, linear-gradient(var(--tint), var(--tint)) center/100% 2px no-repeat; }
a.btn-plain { display: inline-flex; align-items: center; text-decoration: none; }

/* Nachzeichnen: mehrere Werkzeugleisten unten übereinander */
.trace-bars { position: absolute; z-index: 2; left: 50%; bottom: max(12px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px; width: max-content; max-width: calc(100% - 24px); }
.trace-bars[hidden] { display: none; }
.trace-bars .toolbar { position: static; transform: none; max-width: 100%; }
.trace-search { min-width: 220px; }
.trace-bars .sep { align-self: stretch; width: 1px; margin: 6px 4px; background: var(--line); }
.map.erasing { cursor: cell; }
/* Seitenansicht Nutzer Skizzen: Wasserzeichen-Vorschau (wie im PDF: hellgrau, schräg, wiederholt) */
.page-sketch { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='120'><text x='10' y='80' transform='rotate(-30 150 60)' font-family='sans-serif' font-size='16' fill='%23bbb'>Skizze erstellt auf Baustellenagent.de</text></svg>"); }
.palette-item[aria-pressed="true"] { border-color: var(--accent, #c1121c); background: rgb(193 18 28 / .08); }

/* Verkehrszeichen-Fenster: Suche, ortsfeste Beschilderung in Graustufen */
.palette-search { min-height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: 18px; font-size: 15px; }
.palette-fixed .palette-grid img { filter: grayscale(1); }

/* Hinweistafel gestalten (ht.ts): Vollbild, Tafel links, Eigenschaften rechts */
.ht-editor { position: fixed; inset: 0; z-index: 20; display: grid; grid-template-rows: auto 1fr auto; gap: 12px; padding: 12px; background: #e9ebee; }
.ht-editor > .toolbar { position: static; transform: none; justify-self: center; }
.ht-editor input { min-height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 18px; font-size: 15px; }
.ht-main { display: grid; grid-template-columns: 1fr 300px; gap: 12px; min-height: 0; }
.ht-stage { display: grid; place-items: center; min-height: 0; container-type: size; }
.ht-canvas { width: min(100cqw, 100cqh * 1250 / 1600); height: auto; aspect-ratio: 1250 / 1600; touch-action: none; box-shadow: 0 6px 24px rgb(28 31 36 / .2); border-radius: 12px; background: #fff; }
.ht-side { display: flex; flex-direction: column; gap: 10px; padding: 12px; overflow: auto; background: #fff; border-radius: var(--radius-l); }
.ht-side label { display: grid; gap: 4px; font-size: 14px; }
@media (max-width: 800px) { .ht-main { grid-template-columns: 1fr; grid-template-rows: auto 1fr; } }

/* Leiste der manuellen Markierung: unter der Auswahlleiste */
.mark-bar { top: calc(max(12px, env(safe-area-inset-top)) + 124px); bottom: auto; }