/* ═══════════════════════════════════════════════════════════════
   GEMEINSAME DARSTELLUNG  —  notiz_style.css
   Eingebunden von notizen.php (Bearbeiten) UND wissen.php (Lesen).
   Dadurch sehen beide Ansichten zwingend gleich aus: gleiche Farben,
   gleiche Schrift, gleiche Maße. Niemals nur in einer Seite ändern!
   ═══════════════════════════════════════════════════════════════ */
:root{
  --bg:#14151c; --flaeche:#191b22;
  --s1:#191b23; --s2:#20222c; --s3:#282b36;
  --line:#2b2f3b; --line2:#3a3f4d;
  --text:#e8eaf0; --dim:#9298ab; --faint:#636a7c;
  --acc:#7c6cf0; --acc2:#a396ff; --accdim:rgba(124,108,240,.14);
  --gold:#dfa440; --red:#e05a5a; --green:#4bbf82; --blau:#5aa9e0;
  --rot:#e05a5a; --gruen:#4bbf82;
  --r:9px;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
/* Basis-Typografie - MUSS in beiden Ansichten gleich sein, sonst werden
   Texte unterschiedlich breit und Tabellen unterschiedlich groß. */
body{
  font-family:var(--sans);
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

/* ── Elemente auf der Fläche ─────────────────────────────────── */
.blatt{position:relative;width:2400px;height:1900px}
.el{position:absolute}
.el.gewaehlt{outline:1.5px solid var(--acc);outline-offset:3px;border-radius:4px}
.el .inhalt{outline:none;white-space:pre-wrap;word-break:break-word;cursor:text}
.zieh-griff{position:absolute;left:0;right:0;top:-16px;height:15px;
  display:none;align-items:center;justify-content:center;gap:3px;
  cursor:grab;border-radius:5px 5px 0 0;
  background:var(--acc);opacity:0;transition:opacity .12s;}
.zieh-griff:before{content:'⠿ ziehen';color:#fff;font-size:9.5px;letter-spacing:.5px}
.el:hover .zieh-griff{display:flex;opacity:.55}
.el.gewaehlt .zieh-griff{display:flex;opacity:.9}
.zieh-griff:active{cursor:grabbing}
.el-text .inhalt{padding:4px 6px;border-radius:5px;min-width:44px;min-height:26px;line-height:1.6}
.el-text .inhalt:empty:before{content:'Text …';color:var(--faint)}
.el-text.stil-titel .inhalt{font-size:23px;font-weight:700;letter-spacing:-.3px}
.suchtreffer{background:rgba(223,164,64,.5);color:#fff;border-radius:2px;box-shadow:0 0 0 1px rgba(223,164,64,.6)}
.notiz-link{color:var(--acc2);cursor:text;
  text-decoration:underline;text-decoration-color:rgba(163,150,255,.5);
  text-underline-offset:2px;border-radius:2px;padding:0 1px;}
.notiz-link:hover{background:var(--accdim);text-decoration-color:var(--acc2)}
.notiz-link.tot{color:var(--red);text-decoration-color:rgba(224,90,90,.5)}
.extern-link{color:var(--blau);cursor:text;
  text-decoration:underline;text-decoration-color:rgba(90,169,224,.5);
  text-underline-offset:2px;border-radius:2px;padding:0 1px;}
.extern-link:hover{background:rgba(90,169,224,.12);text-decoration-color:var(--blau)}
.extern-link::after{content:" ↗";font-size:.85em;opacity:.7}
.el-text.stil-ueber .inhalt{font-size:17px;font-weight:600;color:var(--acc2)}
.el-kasten{border:1.5px solid var(--line2);border-radius:7px;background:rgba(255,255,255,.02);display:table}
.el-kasten .inhalt{padding:8px 10px;display:table-cell;vertical-align:middle;
  text-align:center;font-size:14px;width:100%;height:100%}
.el-kasten.farbe-acc{border-color:rgba(124,108,240,.65);background:rgba(124,108,240,.09)}
.el-kasten.farbe-gold{border-color:rgba(223,164,64,.65);background:rgba(223,164,64,.08)}
.el-kasten.farbe-gruen{border-color:rgba(75,191,130,.65);background:rgba(75,191,130,.08)}
.el-kasten.farbe-rot{border-color:rgba(224,90,90,.65);background:rgba(224,90,90,.08)}
.el-pfeil svg{overflow:visible;display:block}
.el-pfeil{pointer-events:none}
.el-pfeil .klicklinie,.el-pfeil .griff{pointer-events:auto}
.el-pfeil .klicklinie{stroke:transparent;stroke-width:16;cursor:move}
.el-bild img{display:block;width:100%;height:100%;object-fit:contain;border-radius:6px;
  pointer-events:none;user-select:none}
.el-bild{border:1px solid transparent;border-radius:7px}
.el-bild.gewaehlt{border-color:var(--acc)}
.el-pfeil line{stroke:currentColor;stroke-width:2}
.el-symbol{transform-origin:center center}
.el-symbol svg [data-teil]{cursor:pointer}
.el-symbol svg [data-teil]:hover{opacity:.85}
.el-symbol svg .teil-sel{outline:2px dashed var(--acc2);outline-offset:1px}
.dreh-anfasser{position:absolute;left:50%;top:-22px;width:12px;height:12px;margin-left:-6px;
  border-radius:50%;background:var(--gold);border:2px solid var(--flaeche);cursor:grab;display:none}
.el-symbol.gewaehlt .dreh-anfasser{display:block}
.dreh-anfasser::before{content:'';position:absolute;left:50%;top:12px;width:1px;height:10px;background:var(--gold);margin-left:-.5px}
.el-tabelle{background:var(--flaeche)}
.tz-tabelle{border-collapse:collapse;background:var(--s1)}
.tz-tabelle td{border:1px solid var(--line2);padding:0;min-width:70px;vertical-align:top}
.tz-inhalt{padding:6px 9px;min-height:20px;outline:none;font-size:14px;min-width:60px}
.tz-inhalt:focus{background:var(--s3)}
.tz-kopf td,.tz-steuer{border:none!important;background:transparent;padding:0}
.tz-steuer{width:20px;text-align:center}
.tz-del-zeile,.tz-del-spalte{opacity:0;background:none;border:0;color:var(--faint);font-size:11px;
  cursor:pointer;padding:2px 4px;border-radius:4px;transition:opacity .12s;}
.el-tabelle:hover .tz-del-zeile,.el-tabelle:hover .tz-del-spalte{opacity:.6}
.tz-del-zeile:hover,.tz-del-spalte:hover{opacity:1!important;color:var(--red);background:var(--s3)}
.tz-knoepfe{display:flex;gap:6px;margin-top:5px;flex-wrap:wrap;align-items:center}
.tz-trenner{width:1px;align-self:stretch;background:var(--line2);margin:2px 3px}
.tz-groesse{font-size:11px!important;padding:3px 7px!important;color:var(--faint)!important}
.tz-groesse:hover{color:var(--acc2)!important;border-color:var(--acc2)!important}
.tz-knoepfe button{background:var(--s2);border:1px solid var(--line2);color:var(--dim);
  font-size:12px;padding:4px 10px;border-radius:6px;cursor:pointer;}
.tz-knoepfe button:hover{border-color:var(--acc);color:var(--text)}
.el-pfeil .klicklinie{stroke:transparent}
.el-pfeil.gewaehlt line:not(.klicklinie){stroke:var(--acc2)}
.griff{position:absolute;width:11px;height:11px;border-radius:50%;
  background:var(--acc);border:2px solid var(--flaeche);cursor:grab;display:none}
.el.gewaehlt .griff{display:block}
.groesse{position:absolute;right:-6px;bottom:-6px;width:12px;height:12px;
  background:var(--acc);border:2px solid var(--flaeche);border-radius:3px;
  cursor:nwse-resize;display:none}
.el.gewaehlt .groesse{display:block}