/* shadcn/ui-nahe Tokens (zinc) */
:root{
  --background:0 0% 100%;
  --foreground:240 10% 3.9%;
  --card:0 0% 100%;
  --muted:240 4.8% 95.9%;
  --muted-foreground:240 3.8% 46.1%;
  --border:240 5.9% 90%;
  --input:240 5.9% 90%;
  --primary:240 5.9% 10%;
  --primary-foreground:0 0% 98%;
  --accent:240 4.8% 95.9%;
  --ring:240 5% 64.9%;
  --radius:.625rem;
  --shadow-lg:0 10px 30px -10px rgb(0 0 0 / .25), 0 2px 8px -2px rgb(0 0 0 / .08);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{
  margin:0;background:hsl(240 5% 84%);color:hsl(var(--foreground));
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
  font-size:14px;overflow:hidden;
}
.fa{width:17px;height:17px;fill:currentColor;stroke:none;display:block;flex:0 0 auto}
.icon-btn .fa{width:16px;height:16px}
.icon-btn.primary .fa{width:15px;height:15px}

/* ---------- Bühne / Vorschau ---------- */
/* Die Werkzeugleiste ist 48 px hoch. Die Vorschau endet darueber, damit auch
   die letzten Pixel der Website sichtbar sind statt darunter zu verschwinden. */
#stage{
  position:fixed;left:0;right:0;top:0;bottom:48px;
  display:flex;align-items:flex-start;justify-content:center;overflow:auto;
}
#frameWrap{width:100%;height:100%;background:#fff;transition:width .25s ease,box-shadow .25s ease,margin .25s ease}
/* Tablet und Handy in ihren tatsaechlichen Massen – nicht ueber die ganze
   Fensterhoehe, sonst sieht man nicht, wo die Seite auf dem Geraet endet.
   Passt das Geraet nicht ins Fenster, wird es gestutzt statt verzerrt. */
#frameWrap[data-viewport="tablet"]{
  width:834px;max-width:100%;height:1112px;max-height:calc(100% - 24px);
  margin:12px 0;border-radius:var(--radius);box-shadow:var(--shadow-lg);overflow:hidden;
}
#frameWrap[data-viewport="mobile"]{
  width:414px;max-width:100%;height:896px;max-height:calc(100% - 24px);
  margin:12px 0;border-radius:1.4rem;box-shadow:var(--shadow-lg);overflow:hidden;
}
#preview{width:100%;height:100%;border:0;display:block;background:#fff}

/* ---------- Chat-Panel ---------- */
.panel{
  position:fixed;left:50%;transform:translateX(-50%);bottom:132px;width:min(620px,calc(100vw - 32px));
  max-height:min(58vh,560px);display:flex;flex-direction:column;
  background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:calc(var(--radius) + 4px);
  box-shadow:var(--shadow-lg);overflow:hidden;z-index:40;
}
.panel-head{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid hsl(var(--border));font-size:13px}
.panel-head .dot{width:7px;height:7px;border-radius:99px;background:#16a34a;flex:0 0 auto}
.panel-head .muted{color:hsl(var(--muted-foreground));font-size:12px}
.panel-head #chatClose{margin-left:auto}
.panel-foot{padding:8px 12px;border-top:1px solid hsl(var(--border));color:hsl(var(--muted-foreground));font-size:11px;font-style:italic;text-align:center}
#messages{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:12px}

.msg{max-width:88%;padding:10px 12px;border-radius:var(--radius);font-size:13.5px;line-height:1.55;white-space:pre-wrap;word-break:break-word}
.msg.user{align-self:flex-end;background:hsl(var(--primary));color:hsl(var(--primary-foreground))}
.msg.ai{align-self:flex-start;background:hsl(var(--card));border:1px solid hsl(var(--border))}
.msg.err{align-self:flex-start;background:#fef2f2;border:1px solid #fecaca;color:#991b1b}

/* ---------- Auszeichnung in der Antwort ----------
   Die KI schreibt Markdown. Ein Codeblock bekommt eine eigene Fläche mit
   eigenem Zeilenumbruch - in der Sprechblase selbst gilt pre-wrap. */
.msg-inline{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;
  padding:1px 5px;border-radius:4px;background:hsl(var(--muted));
  color:hsl(var(--foreground));word-break:break-all;
}
.msg-code{
  position:relative;margin:8px 0;padding:9px 34px 9px 10px;
  border:1px solid hsl(var(--border));border-radius:calc(var(--radius) - 2px);
  background:hsl(var(--muted));overflow-x:auto;
}
.msg-code code{
  /* Umbrechen statt seitlich schieben: die Sprechblase ist schmal, und ein
     Stueck HTML will man ganz sehen, bevor man es mitnimmt. */
  display:block;white-space:pre-wrap;overflow-wrap:anywhere;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12px;line-height:1.5;color:hsl(var(--foreground));
}
.msg-art{
  display:block;margin-bottom:5px;font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  color:hsl(var(--muted-foreground));
}
.msg-kopie{
  position:absolute;top:5px;right:5px;z-index:1;
  display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;padding:0;cursor:pointer;
  border:1px solid hsl(var(--border));border-radius:calc(var(--radius) - 3px);
  background:hsl(var(--card));color:hsl(var(--muted-foreground));
}
.msg-kopie:hover{color:hsl(var(--foreground));border-color:hsl(var(--ring))}
.msg-kopie .fa{width:12px;height:12px}
/* Nur Arbeitsstand, noch keine Antwort: dann keine Sprechblase drumherum –
   der Stand steht direkt auf der halbdurchsichtigen Flaeche. */
.msg.ai.steps-only{background:none;border:0;padding:0;max-width:100%}
.msg.ai.steps-only .steps-box{margin-bottom:0}
.msg .meta{display:block;margin-top:6px;font-size:11px;opacity:.6}
.msg .thumb{display:block;max-width:160px;border-radius:8px;margin-bottom:8px}
/* Arbeitsschritte: nur der aktuelle Schritt, Rest per Akkordeon.
   Ohne Kasten drumherum: der Arbeitsstand ist eine Randnotiz, kein Bauteil.
   Er steht einfach da - wie die Schritte, die er aufklappt. */
.steps-box{margin-bottom:8px}
.steps-head{
  display:flex;align-items:center;gap:8px;width:100%;
  padding:2px 0;border:0;background:transparent;font:inherit;font-size:12.5px;
  color:hsl(var(--muted-foreground));cursor:pointer;text-align:left;
}
.steps-head:hover{color:hsl(var(--foreground))}
.steps-ico{display:flex;flex:0 0 auto}
.steps-ico .fa{width:12px;height:12px;color:#16a34a}
.steps-box.running .steps-ico .fa{color:hsl(var(--ring));animation:spin .9s linear infinite}
.steps-box.bad .steps-ico .fa{color:#dc2626}
.steps-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.steps-count{
  flex:0 0 auto;min-width:16px;height:16px;padding:0 5px;border-radius:99px;
  background:hsl(var(--muted));color:hsl(var(--muted-foreground));
  font-size:10.5px;line-height:16px;text-align:center;font-variant-numeric:tabular-nums;
}
.steps-chev{display:flex;flex:0 0 auto}
.steps-chev .fa{width:10px;height:10px;transition:transform .18s ease}
.steps-box.open .steps-chev .fa{transform:rotate(180deg)}
/* Eingerückt auf die Höhe der Beschriftung: 12 px Zeichen + 8 px Abstand. */
.steps-list{display:flex;flex-direction:column;gap:5px;padding:5px 0 3px 20px}

.step{display:flex;align-items:flex-start;gap:7px;font-size:12.5px;line-height:1.5;color:hsl(var(--muted-foreground))}
.step .fa{width:12px;height:12px;margin-top:3px;color:#16a34a}
.step.pending .fa{color:hsl(var(--ring));animation:spin .9s linear infinite}
.step.bad{color:#b91c1c}
.step.bad .fa{color:#dc2626}
.step em{font-style:normal;opacity:.7}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Composer ---------- */
#composer{
  position:fixed;left:50%;transform:translateX(-50%);bottom:60px;width:min(620px,calc(100vw - 32px));
  background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:calc(var(--radius) + 4px);
  box-shadow:var(--shadow-lg);padding:8px;z-index:45;
}
.composer-row{display:flex;align-items:flex-end;gap:6px}
#prompt{
  flex:1;border:0;outline:0;resize:none;background:transparent;font:inherit;line-height:1.5;
  padding:9px 4px;max-height:160px;color:hsl(var(--foreground));
}
#prompt::placeholder{color:hsl(var(--muted-foreground))}
#selectionChip{display:inline-flex;align-items:center;gap:6px;margin:2px 0 6px;padding:4px 6px 4px 8px;
  background:hsl(263 70% 97%);border:1px solid hsl(263 70% 88%);color:hsl(263 55% 40%);border-radius:99px;font-size:12px}
#selectionChip .fa{width:12px;height:12px}
#selectionChip button{border:0;background:transparent;color:inherit;cursor:pointer;display:flex;padding:2px;border-radius:99px}
#selectionChip button:hover{background:hsl(263 70% 92%)}
/* Die Elementmarke an der eigenen Sprechblase - dieselbe Farbfamilie wie der
   Auswahl-Chip an der Prompt-Leiste, damit klar ist, dass es dasselbe meint. */
.msg .msg-marke{
  display:flex;width:max-content;max-width:100%;
  align-items:center;gap:5px;margin-bottom:5px;
  padding:2px 8px 2px 6px;border-radius:99px;
  background:hsl(263 70% 97%);border:1px solid hsl(263 70% 88%);
  color:hsl(263 55% 40%);font-size:10.5px;line-height:1.5;max-width:100%;
}
.msg .msg-marke > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msg .msg-marke .fa{width:10px;height:10px;flex:0 0 auto}
.msg.user .msg-marke{background:#fff;border-color:hsl(263 40% 82%)}

#attachments{display:flex;gap:6px;flex-wrap:wrap}
#attachments:not(:empty){margin-bottom:6px}
.att{position:relative;width:56px;height:56px;border-radius:8px;overflow:hidden;border:1px solid hsl(var(--border))}
.att img{width:100%;height:100%;object-fit:cover;display:block}
.att button{position:absolute;top:2px;right:2px;width:18px;height:18px;border:0;border-radius:99px;background:rgb(0 0 0/.6);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.att button .fa{width:10px;height:10px}

/* ---------- Werkzeugleiste ---------- */
#toolbar{
  position:fixed;left:0;right:0;bottom:0;height:48px;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 12px;
  background:hsl(var(--card));border-top:1px solid hsl(var(--border));
}
.tb-group{display:flex;align-items:center;gap:4px}
.sep{width:1px;height:20px;background:hsl(var(--border));margin:0 4px}

.icon-btn{
  display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;
  border:1px solid transparent;border-radius:calc(var(--radius) - 2px);background:transparent;
  color:hsl(var(--foreground));cursor:pointer;text-decoration:none;transition:background .12s,color .12s,border-color .12s;
}
.icon-btn:hover{background:hsl(var(--accent))}
.icon-btn.active{background:hsl(var(--primary));color:hsl(var(--primary-foreground))}
.icon-btn.primary{background:hsl(var(--primary));color:hsl(var(--primary-foreground));width:34px;height:34px}
.icon-btn.primary:hover{opacity:.9;background:hsl(var(--primary))}
.icon-btn:disabled{opacity:.45;cursor:not-allowed}
.icon-btn.ghost{color:hsl(var(--muted-foreground))}

.select{
  height:32px;padding:0 26px 0 10px;border:1px solid hsl(var(--input));border-radius:calc(var(--radius) - 2px);
  background:hsl(var(--card)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 6px center/14px;
  font:inherit;font-size:13px;color:hsl(var(--foreground));appearance:none;cursor:pointer;max-width:230px;
}
.select:focus{outline:2px solid hsl(var(--ring));outline-offset:1px}

/* ---------- Toast ---------- */
#toast{
  position:fixed;left:50%;transform:translateX(-50%);bottom:64px;z-index:90;
  background:hsl(var(--primary));color:hsl(var(--primary-foreground));
  padding:9px 14px;border-radius:var(--radius);font-size:13px;box-shadow:var(--shadow-lg);
}
body.picking #stage{cursor:crosshair}

/* ---------- Änderungshistorie ---------- */
#historyPanel,#templatePanel{z-index:55}
#figmaPanel{z-index:55}
.panel-head .hist-ico{display:flex}
.panel-head .hist-ico .fa{width:13px;height:13px;color:hsl(var(--muted-foreground))}
.panel-foot em{font-style:normal;font-weight:500}
#historyList{flex:1;overflow-y:auto;padding:6px}
.hist-empty{margin:18px 12px;color:hsl(var(--muted-foreground));font-size:13px;text-align:center}

.hist-row{
  display:flex;align-items:flex-start;gap:10px;width:100%;
  padding:8px 9px;margin-bottom:2px;border:1px solid transparent;
  border-radius:calc(var(--radius) - 2px);background:transparent;
  font:inherit;text-align:left;cursor:pointer;color:hsl(var(--foreground));
}
.hist-row:hover{background:hsl(var(--accent));border-color:hsl(var(--border))}
.hist-tag-head{
  padding:9px 9px 4px;font-size:10.5px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:hsl(var(--muted-foreground));
}
.hist-tag-head:first-child{padding-top:3px}
.hist-time{
  flex:0 0 auto;padding-top:1px;font-size:11.5px;color:hsl(var(--muted-foreground));
  font-variant-numeric:tabular-nums;
}
.hist-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.hist-top{display:flex;align-items:center;gap:6px}
.hist-page{
  font-size:10.5px;font-weight:500;letter-spacing:.02em;text-transform:uppercase;
  color:hsl(var(--muted-foreground));background:hsl(var(--muted));
  padding:1px 6px;border-radius:99px;
}
.hist-tag{font-size:10.5px;color:hsl(142 55% 33%);background:hsl(142 55% 95%);padding:1px 6px;border-radius:99px}
.hist-prompt{
  font-size:12.5px;line-height:1.45;color:hsl(var(--foreground));
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.hist-undo{flex:0 0 auto;display:flex;padding-top:2px;opacity:0;transition:opacity .12s}
.hist-row:hover .hist-undo{opacity:1}
.hist-undo .fa{width:13px;height:13px;color:hsl(var(--muted-foreground))}

/* Zähler an der Historie-Schaltfläche */
#historyBtn{position:relative}
#historyBtn .badge{
  position:absolute;top:-2px;right:-2px;min-width:15px;height:15px;padding:0 4px;
  border-radius:99px;background:hsl(var(--primary));color:hsl(var(--primary-foreground));
  font-size:9.5px;line-height:15px;text-align:center;font-variant-numeric:tabular-nums;
  border:1.5px solid hsl(var(--card));
}

/* ---------- Menues statt Dropdowns ---------- */
.pop-wrap{position:relative;display:inline-flex}
.pop{
  position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);
  min-width:230px;max-height:340px;overflow-y:auto;padding:4px;
  background:hsl(var(--card));border:1px solid hsl(var(--border));
  border-radius:var(--radius);box-shadow:var(--shadow-lg);z-index:70;
}
.pop-item{
  display:flex;align-items:center;gap:8px;width:100%;padding:7px 8px;border:0;
  background:transparent;border-radius:calc(var(--radius) - 2px);
  font:inherit;font-size:13px;text-align:left;cursor:pointer;color:hsl(var(--foreground));
  white-space:nowrap;
}
.pop-item:hover{background:hsl(var(--accent))}
.pop-item .fa{width:12px;height:12px;flex:0 0 auto;opacity:0;color:hsl(var(--muted-foreground))}
.pop-item.on{font-weight:500}
.pop-item.on .fa{opacity:1}

/* ---------- Schublade: faehrt links herein ----------

   Historie, Bilder, Vorlagen, Versionen, Figma und der Seitenbaum sind
   Listen. Als Kasten ueber der Prompt-Leiste blieben davon 56 % der
   Fensterhoehe; als Schublade am linken Rand steht die ganze Hoehe zur
   Verfuegung. Die Andock-Einstellung gilt fuer sie deshalb nicht. */
.panel.drawer{
  left:12px;right:auto;transform:none;z-index:56;
  top:12px;bottom:60px;                       /* 48 px Werkzeugleiste + Luft */
  width:min(430px,calc(100vw - 24px));max-height:none;
  animation:schubIn .18s cubic-bezier(.22,.61,.36,1);
}
#figmaPanel.drawer{width:min(560px,calc(100vw - 24px))}
/* Das Bilder- und Dateifenster liegt ueber der Pille am Element: es stellt
   sich neben das Einstellungsfenster, und genau dort schwebt oft die Pille -
   die verdeckte sonst die oberste Kachel, ausgerechnet die zuletzt
   hochgeladene. Das Fenster weicht der Pille schon aus (medienPlatzieren),
   umgekehrt kann sie es nicht. */
#mediaPanel.drawer{z-index:82}
@keyframes schubIn{from{transform:translateX(calc(-100% - 16px))}to{transform:none}}

/* ---------- Andocken links / mittig / rechts ---------- */
body[data-dock="center"] #composer,
body[data-dock="center"] .panel{left:50%;right:auto;transform:translateX(-50%)}
body[data-dock="left"] #composer,
body[data-dock="left"] .panel{left:12px;right:auto;transform:none}
body[data-dock="right"] #composer,
body[data-dock="right"] .panel{left:auto;right:12px;transform:none}
body[data-dock] .panel.drawer{left:12px;right:auto;transform:none}

/* ---------- Figma-Import ---------- */
.fig-brief{border-bottom:1px solid hsl(var(--border));font-size:12.5px}
.fig-brief summary{
  display:flex;align-items:center;gap:7px;padding:9px 11px;cursor:pointer;
  font-weight:500;list-style:none;
}
.fig-brief summary::-webkit-details-marker{display:none}
.fig-brief summary .fa{width:12px;height:12px;color:hsl(var(--muted-foreground))}
.fig-brief summary:hover{background:hsl(var(--accent))}
.fig-brief-note{margin-left:auto;font-weight:400;font-size:11.5px;color:hsl(var(--muted-foreground))}
.fig-brief textarea{
  display:block;width:calc(100% - 22px);margin:0 11px 10px;padding:8px 10px;
  font:inherit;font-size:12.5px;line-height:1.5;resize:vertical;
  border:1px solid hsl(var(--input));border-radius:calc(var(--radius) - 2px);
  background:hsl(var(--card));color:hsl(var(--foreground));
}
.fig-brief textarea:focus{outline:2px solid hsl(var(--ring));outline-offset:1px}
.fig-brief-hint{margin:0 11px 10px;font-size:11px;color:hsl(var(--muted-foreground))}

.fig-opt{display:flex;flex-direction:column;gap:1px;padding:6px 6px 8px;
  border-bottom:1px solid hsl(var(--border))}
.fig-opt label{
  display:flex;align-items:baseline;gap:8px;padding:5px 6px;border-radius:6px;
  font-size:12.5px;cursor:pointer;
}
.fig-opt label:hover{background:hsl(var(--accent))}
.fig-opt input{margin:0;flex:0 0 auto;position:relative;top:1px}
.fig-opt em{font-style:normal;font-size:11px;color:hsl(var(--muted-foreground))}

.fig-card.sel{outline:2px solid hsl(var(--ring));outline-offset:-2px}
.fig-card .fig-haken{
  position:absolute;top:6px;left:6px;width:17px;height:17px;border-radius:5px;
  border:1px solid hsl(var(--border));background:hsl(var(--card));
  display:flex;align-items:center;justify-content:center;
}
.fig-card .fig-haken .fa{width:10px;height:10px;opacity:0}
.fig-card.sel .fig-haken{background:hsl(var(--primary));border-color:transparent}
.fig-card.sel .fig-haken .fa{opacity:1;color:hsl(var(--primary-foreground))}
.fig-zeilen{display:flex;flex-direction:column;gap:5px;margin:8px 0 10px}
.fig-zeile{display:flex;align-items:center;gap:7px;font-size:12px}
.fig-zeile span{flex:0 0 auto;max-width:38%;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;color:hsl(var(--muted-foreground))}
.fig-zeile input{
  flex:1;min-width:0;padding:5px 8px;font:inherit;font-size:12.5px;
  border:1px solid hsl(var(--input));border-radius:calc(var(--radius) - 2px);
  background:hsl(var(--card));color:hsl(var(--foreground));
}
.fig-erg{margin:8px 0 0;padding:8px 10px;border-radius:calc(var(--radius) - 2px);
  background:hsl(var(--muted));font-size:12px;line-height:1.5}
.fig-erg b{font-weight:600}
.fig-erg ul{margin:4px 0 0;padding-left:16px}

/* ---------- Formatierungs-Vorlagen ---------- */
#stilBody{flex:1;overflow-y:auto;padding:8px 8px 12px}
.stil-gruppe{margin-bottom:12px}
.stil-kopf{display:flex;align-items:center;gap:7px;padding:6px 2px 6px;
  font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:hsl(var(--muted-foreground))}
.stil-kopf .muted{margin-left:auto;font-weight:400;letter-spacing:0;text-transform:none;font-size:11px}

.stil-karte{
  border:1px solid hsl(var(--border));border-radius:calc(var(--radius) - 1px);
  background:hsl(var(--card));margin-bottom:6px;overflow:hidden;
}
.stil-karte.an{border-color:hsl(var(--ring));box-shadow:0 0 0 2px hsl(var(--ring)/.18)}
.stil-probe{
  padding:11px 12px;background:hsl(var(--muted)/.5);border-bottom:1px solid hsl(var(--border));
  overflow:hidden;max-height:74px;
}
.stil-probe span{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stil-probe.dunkel{background:#141c2b}
.stil-probe.flaeche{height:52px;padding:0;display:flex;
  background:repeating-conic-gradient(hsl(var(--muted)) 0% 25%, hsl(var(--card)) 0% 50%) 0 0/14px 14px}
.stil-probe.flaeche i{flex:1;margin:8px 12px;border-radius:inherit}
.stil-zeile{display:flex;align-items:center;gap:6px;padding:6px 8px 6px 10px}
.stil-name{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:12.5px;
  font-weight:500;color:hsl(var(--foreground));padding:2px 3px;border-radius:4px}
.stil-name:hover{background:hsl(var(--muted))}
.stil-name:focus{outline:0;background:hsl(var(--card));box-shadow:0 0 0 2px hsl(var(--ring)/.35)}
.stil-treffer{flex:0 0 auto;font-size:11px;color:hsl(var(--muted-foreground))}
.stil-zu,.stil-weg{
  flex:0 0 auto;font:inherit;font-size:11.5px;padding:3px 9px;border-radius:99px;cursor:pointer;
  border:1px solid hsl(var(--border));background:hsl(var(--card));color:hsl(var(--foreground));
}
.stil-zu:hover{background:hsl(var(--primary));color:hsl(var(--primary-foreground));border-color:transparent}
.stil-zu[disabled]{opacity:.4;cursor:default}
.stil-weg{border:0;padding:3px 5px;color:hsl(var(--muted-foreground));display:flex}
.stil-weg:hover{color:#b91c1c}
.stil-weg .fa{width:11px;height:11px}

.stil-farben{display:flex;flex-wrap:wrap;gap:5px;padding:2px 2px 4px}
.stil-farbe{width:30px;height:30px;border-radius:7px;border:1px solid hsl(var(--border));
  cursor:pointer;padding:0;overflow:hidden}
.stil-farbe.breit{width:64px}

/* Vorlagen-Auswahl im Eigenschaften-Fenster */
.insp-vorlage{display:flex;align-items:center;gap:7px;padding:7px 10px;
  border-bottom:1px solid hsl(var(--border))}
.insp-vorlage label{font-size:11.5px;color:hsl(var(--muted-foreground));white-space:nowrap}
.insp-vorlage .insp-keine{flex:1;font-size:11.5px;color:hsl(var(--muted-foreground));
  font-style:italic;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Der Besen raeumt alles weg, was an diesem Element von Hand steht - ein
   anderes Zeichen als das Zuruecknehmen der einzelnen Zeile darunter, weil
   es etwas anderes tut. */
.insp-vorlage #inspReset{
  flex:0 0 24px;width:24px;height:24px;padding:0;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid transparent;border-radius:calc(var(--radius) - 2px);
  background:transparent;font-size:11px;color:hsl(var(--muted-foreground));
}
.insp-vorlage #inspReset:hover{
  background:hsl(var(--accent));color:hsl(var(--foreground));
  border-color:hsl(var(--border));
}
.insp-vorlage #inspReset:focus-visible{outline:2px solid hsl(var(--ring));outline-offset:-2px}
.insp-vorlage select{flex:1;min-width:0;font:inherit;font-size:12px;padding:4px 6px;border-radius:6px;
  border:1px solid hsl(var(--border));background:hsl(var(--card));color:hsl(var(--foreground))}

/* Website-Farben im Farbwähler */
.fw-quelle{padding:2px 0 0;font-size:10px;letter-spacing:.04em;text-transform:uppercase;
  color:hsl(var(--muted-foreground))}

/* ---------- Seitenbaum ---------- */
#treeBody{flex:1;overflow-y:auto;padding:8px 6px 10px}
.tree-menu{margin-bottom:10px}
.tree-head{display:flex;align-items:center;gap:7px;padding:6px 8px 5px;
  font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:hsl(var(--muted-foreground));cursor:pointer;border-radius:calc(var(--radius) - 3px)}
.tree-head:hover{background:hsl(var(--accent))}
.tree-head:focus-visible{outline:2px solid hsl(var(--ring));outline-offset:1px}
/* Akkordeon: zugeklappt bleibt nur der Kopf stehen. */
.tree-head .chev{transition:transform .15s ease}
.tree-menu.zu .tree-head .chev{transform:rotate(-90deg)}
.tree-menu.zu .tree-list{display:none}
.tree-head strong{font-weight:600}
.tree-head .fa{width:12px;height:12px}
.tree-head .muted{margin-left:auto;font-weight:400;letter-spacing:0;text-transform:none;font-size:11px}
.tree-verbund{
  flex:0 0 auto;font:inherit;font-size:10.5px;letter-spacing:0;text-transform:none;font-weight:400;
  padding:1px 4px;border-radius:6px;border:1px solid hsl(var(--border));
  background:hsl(var(--card));color:hsl(var(--muted-foreground));cursor:pointer;
}
.tree-list{display:flex;flex-direction:column;gap:2px;min-height:12px;
  border-radius:calc(var(--radius) - 2px);padding:2px}
.tree-list.ueber{background:hsl(var(--accent))}

.tree-row{
  display:flex;align-items:center;gap:6px;padding:5px 7px;border-radius:calc(var(--radius) - 3px);
  background:hsl(var(--card));border:1px solid transparent;font-size:13px;cursor:grab;
}
.tree-row:hover{border-color:hsl(var(--border));background:hsl(var(--accent))}
.tree-row.tief1{margin-left:22px}
.tree-row.zieht{opacity:.4}
.tree-row .grip{width:11px;height:11px;flex:0 0 auto;color:hsl(var(--muted-foreground));opacity:.7}
.tree-row .sub{width:11px;height:11px;flex:0 0 auto;color:hsl(var(--muted-foreground))}
.tree-label{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:13px;
  color:hsl(var(--foreground));padding:2px 3px;border-radius:4px}
.tree-label:hover{background:hsl(var(--muted))}
.tree-label:focus{outline:0;background:hsl(var(--card));box-shadow:0 0 0 2px hsl(var(--ring)/.35)}
.tree-file{flex:0 0 auto;max-width:38%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:11px;color:hsl(var(--muted-foreground))}
.tree-ziel{
  flex:0 0 auto;width:34%;min-width:0;border:0;background:transparent;font:inherit;font-size:11px;
  color:hsl(var(--muted-foreground));padding:2px 4px;border-radius:4px;text-align:right;
}
.tree-ziel:hover{background:hsl(var(--muted));text-align:left}
.tree-ziel:focus{outline:0;background:hsl(var(--card));color:hsl(var(--foreground));text-align:left;
  box-shadow:0 0 0 2px hsl(var(--ring)/.35)}
.tree-art.art-seite{display:none}
.tree-row:hover .tree-art.art-seite{display:inline}
.tree-row .tree-blank,.tree-row .tree-dup,.tree-row .tree-seitweg{
  flex:0 0 auto;border:0;background:transparent;padding:3px;border-radius:5px;cursor:pointer;
  color:hsl(var(--muted-foreground));display:flex;opacity:0;
}
.tree-row:hover .tree-blank,.tree-row:hover .tree-dup,.tree-row:hover .tree-seitweg{opacity:1}
.tree-row .tree-blank.an{opacity:1;color:hsl(var(--ring));background:hsl(var(--ring)/.12)}
.tree-row .tree-blank:hover,.tree-row .tree-dup:hover{background:hsl(var(--card));color:hsl(var(--foreground))}
.tree-row .tree-seitweg:hover{background:#fef2f2;color:#b91c1c}
.tree-row .tree-seitweg.frag{opacity:1;background:#dc2626;color:#fff}
.tree-row .tree-go,.tree-row .tree-del{
  flex:0 0 auto;border:0;background:transparent;padding:3px;border-radius:5px;cursor:pointer;
  color:hsl(var(--muted-foreground));display:flex;opacity:0;
}
.tree-row:hover .tree-go,.tree-row:hover .tree-del{opacity:1}
.tree-row .tree-go:hover,.tree-row .tree-del:hover{background:hsl(var(--card));color:hsl(var(--foreground))}
.tree-row .fa{width:11px;height:11px}
.tree-row.frei{background:hsl(var(--muted));border-style:dashed;border-color:hsl(var(--border))}

/* Abwurfmarken: davor, dahinter, hinein */
.tree-row.dz-vor{box-shadow:inset 0 2px 0 hsl(var(--ring))}
.tree-row.dz-nach{box-shadow:inset 0 -2px 0 hsl(var(--ring))}
.tree-row.dz-rein{background:hsl(var(--ring)/.14);border-color:hsl(var(--ring))}

.tree-form{padding:8px 10px;border-bottom:1px solid hsl(var(--border))}
.tree-hint{margin:0;padding:0 11px 8px;font-size:11.5px;color:hsl(var(--muted-foreground));
  border-bottom:1px solid hsl(var(--border))}
.tree-check{display:flex;align-items:center;gap:7px;font-size:12px;color:hsl(var(--muted-foreground))}
.tree-check input{margin:0}
.tree-row .tree-art{flex:0 0 auto;font-size:10px;padding:1px 5px;border-radius:99px;
  background:hsl(var(--muted));color:hsl(var(--muted-foreground))}
.tree-lab{display:flex;align-items:center;gap:6px;font-size:12px;color:hsl(var(--muted-foreground))}
.tree-lab select{flex:1;font:inherit;font-size:12px;padding:4px 6px;border-radius:6px;
  border:1px solid hsl(var(--border));background:hsl(var(--card));color:hsl(var(--foreground))}
.tree-foot{display:flex;align-items:center;gap:8px;text-align:left;font-style:normal}
.tree-btns{margin-left:auto;display:flex;gap:6px}
.tree-foot button{
  font:inherit;font-size:12px;padding:5px 11px;border-radius:calc(var(--radius) - 2px);cursor:pointer;
  border:1px solid hsl(var(--border));background:hsl(var(--card));color:hsl(var(--foreground));
}
.tree-foot button:hover{background:hsl(var(--accent))}
.tree-foot button.prim{background:hsl(var(--primary));color:hsl(var(--primary-foreground));border-color:transparent}
.tree-foot button.prim:hover{opacity:.9}
.tree-foot button[disabled]{opacity:.45;cursor:default}
#treeState.schmutzig{color:hsl(var(--foreground));font-weight:500}

/* ---------- Vorlagen ---------- */
.tpl-bar{display:flex;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid hsl(var(--border))}
.tpl-save{
  display:inline-flex;align-items:center;gap:6px;padding:5px 10px;
  border:1px solid hsl(var(--border));border-radius:calc(var(--radius) - 2px);
  background:hsl(var(--card));font:inherit;font-size:12.5px;cursor:pointer;color:hsl(var(--foreground));
}
.tpl-save:hover{background:hsl(var(--accent))}
.tpl-save .fa{width:11px;height:11px}
.tpl-pos{display:inline-flex;margin-left:auto;border:1px solid hsl(var(--border));border-radius:99px;overflow:hidden}
.tpl-pos button{
  border:0;background:transparent;font:inherit;font-size:11.5px;padding:4px 9px;cursor:pointer;
  color:hsl(var(--muted-foreground));
}
.tpl-pos button:hover{background:hsl(var(--accent))}
.tpl-pos button.on{background:hsl(var(--primary));color:hsl(var(--primary-foreground))}

#templateList{flex:1;overflow-y:auto;padding:6px}
.tpl-row{display:flex;align-items:stretch;gap:2px;margin-bottom:2px;border:1px solid transparent;border-radius:calc(var(--radius) - 2px)}
.tpl-row:hover{background:hsl(var(--accent));border-color:hsl(var(--border))}
.tpl-main{
  flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;align-items:flex-start;
  padding:8px 9px;border:0;background:transparent;font:inherit;text-align:left;cursor:pointer;
  color:hsl(var(--foreground));
}
.tpl-name{font-size:13px;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.tpl-meta{font-size:11px;color:hsl(var(--muted-foreground))}
.tpl-del{
  flex:0 0 auto;display:flex;align-items:center;padding:0 9px;border:0;background:transparent;
  cursor:pointer;color:hsl(var(--muted-foreground));opacity:0;transition:opacity .12s;
}
.tpl-row:hover .tpl-del{opacity:1}
.tpl-del:hover{color:#dc2626}
.tpl-del .fa{width:13px;height:13px}


/* ---------- Auswahl: Ebene wechseln und Position ---------- */
#selectionChip{flex-wrap:wrap;gap:6px}
.chip-nav{display:inline-flex;gap:1px;margin-left:2px}
.chip-btn{
  display:inline-flex;align-items:center;justify-content:center;width:19px;height:19px;
  border:0;border-radius:5px;background:transparent;color:inherit;cursor:pointer;padding:0;
}
.chip-btn:hover:not(:disabled){background:hsl(263 70% 92%)}
.chip-btn:disabled{opacity:.3;cursor:default}
.chip-btn .fa{width:10px;height:10px}
.chip-btn.up .fa{transform:rotate(180deg)}
#selectionChip .tpl-pos{margin-left:2px;border-color:hsl(263 70% 88%)}
#selectionChip .tpl-pos button{padding:2px 7px;font-size:10.5px;color:hsl(263 45% 45%)}
#selectionChip .tpl-pos button.on{background:hsl(263 60% 55%);color:#fff}
#selectionChip .tpl-pos button:hover:not(.on){background:hsl(263 70% 94%)}
.tpl-hint{margin-left:auto;font-size:11px;color:hsl(var(--muted-foreground))}
#pasteBtn:disabled{opacity:.35}

/* ---------- Eigenschaften-Inspektor ---------- */
#inspector{
  position:fixed;z-index:58;width:336px;max-height:min(78vh,760px);
  display:flex;flex-direction:column;
  background:hsl(var(--card));border:1px solid hsl(var(--border));
  border-radius:calc(var(--radius) + 4px);box-shadow:var(--shadow-lg);overflow:hidden;
}
.insp-head{display:flex;align-items:center;gap:8px;padding:9px 10px;border-bottom:1px solid hsl(var(--border));cursor:move}
.insp-head strong{flex:1;min-width:0;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.insp-grip{display:flex;color:hsl(var(--muted-foreground))}
.insp-grip .fa{width:12px;height:12px}

/* Geltungsbereich: Zeichen und Wort, damit klar ist, worauf man zielt. */
.insp-scope{display:flex;gap:0;padding:9px 10px 0}
.insp-scope button{
  flex:1;display:flex;align-items:center;justify-content:center;gap:5px;
  border:1px solid hsl(var(--border));background:hsl(var(--card));
  font:inherit;font-size:11px;padding:6px 4px;cursor:pointer;color:hsl(var(--muted-foreground));
  white-space:nowrap;
}
.insp-scope button .fa{width:12px;height:12px;flex:0 0 auto}
.insp-scope button:first-child{border-radius:calc(var(--radius) - 2px) 0 0 calc(var(--radius) - 2px)}
.insp-scope button:last-child{border-radius:0 calc(var(--radius) - 2px) calc(var(--radius) - 2px) 0}
.insp-scope button:not(:first-child){border-left:0}
.insp-scope button:hover:not(.on){background:hsl(var(--accent))}
.insp-scope button.on{background:hsl(var(--primary));color:hsl(var(--primary-foreground));border-color:hsl(var(--primary))}
@media (max-width:1180px){ .insp-scope button span{display:none} }

.insp-target{display:flex;align-items:center;gap:6px;padding:8px 10px 0}
.insp-target-ico{display:flex;color:hsl(var(--muted-foreground))}
.insp-target-ico .fa{width:12px;height:12px}
.insp-target input{
  flex:1;min-width:0;height:26px;padding:0 8px;font:inherit;font-size:12px;
  border:1px solid hsl(var(--input));border-radius:calc(var(--radius) - 3px);
  background:hsl(var(--card));color:hsl(var(--foreground));
}
.insp-target input:focus{outline:2px solid hsl(var(--ring));outline-offset:1px}
#inspCount{flex:0 0 auto;font-size:11px;color:hsl(var(--muted-foreground));font-variant-numeric:tabular-nums}

#inspBody{flex:1;overflow-y:auto;padding:4px 10px 10px}

.insp-group{margin-top:12px}
.insp-group + .insp-group{border-top:1px solid hsl(var(--border));padding-top:10px}
.insp-group h4,
details.insp-group > summary{
  display:flex;align-items:center;gap:6px;
  margin:0 0 7px;font-size:10.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;
  color:hsl(var(--muted-foreground));
}
/* Aufklapper: das Dreieck des Browsers ist zu gross und sitzt falsch – wir
   zeichnen stattdessen selbst einen kleinen Winkel vor die Ueberschrift. */
details.insp-group > summary{cursor:pointer;list-style:none;user-select:none}
details.insp-group > summary::-webkit-details-marker{display:none}
details.insp-group > summary::before{
  content:'';flex:0 0 auto;width:0;height:0;margin-right:1px;
  border-left:4px solid currentColor;border-top:3.5px solid transparent;
  border-bottom:3.5px solid transparent;transition:transform .12s;
}
details.insp-group[open] > summary::before{transform:rotate(90deg) translateX(1px)}
details.insp-group > summary:hover{color:hsl(var(--foreground))}
details.insp-group:not([open]){padding-bottom:2px}
details.insp-group:not([open]) > summary{margin-bottom:0}
.insp-gico{display:flex;color:hsl(var(--muted-foreground))}
.insp-gico .fa{width:12px;height:12px}

/* Eine Zeile: Zeichen, Wort, Bedienelement, Zuruecknehmen – immer im selben
   Raster, damit die Spalten untereinander stehen. */
.insp-row{
  /* Die letzte Spalte traegt drei Knoepfe: Handy, hart, zuruecknehmen.
     Deshalb sind die Knoepfe 18 statt 20 px breit - so kostet der dritte
     nur 18 px Bedienbreite statt 20, und alle Zeilen bleiben buendig,
     auch die ohne Handy-Knopf. */
  display:grid;grid-template-columns:16px 82px 1fr 56px;
  align-items:center;gap:6px;margin-bottom:6px;
}
/* Die Schaltflaechen am Zeilenende stehen in einer eigenen Spalte, damit sie
   dem Bedienelement keine Breite wegnehmen. */
.insp-tools{display:flex;align-items:center;justify-content:flex-end;gap:1px}
/* Hart setzen: nur ein Ausrufezeichen, solange es aus ist – eingeschaltet
   faellt es auf, denn es greift tief in die Kaskade ein. */
.insp-hart{
  display:flex;align-items:center;justify-content:center;
  width:18px;height:18px;flex:0 0 18px;border:0;background:transparent;cursor:pointer;padding:0;
  color:hsl(var(--muted-foreground));border-radius:5px;opacity:.4;
  transition:opacity .12s,color .12s,background .12s;
}
.insp-hart .fa{width:10px;height:10px}
.insp-row:hover .insp-hart{opacity:.85}
.insp-hart:hover{background:hsl(var(--accent));color:hsl(var(--foreground));opacity:1}
.insp-hart.on{opacity:1;background:#b45309;color:#fff}
.insp-hart.on:hover{background:#92400e;color:#fff}
/* Mitwachsen auf schmalen Fenstern.
   Wie beim Hart-Knopf ist der Normalfall still und der Sonderfall laut: die
   Automatik laeuft fast immer, davon muss keine Zeile erzaehlen. Auffaellig
   wird der Knopf erst, wenn jemand sie fuer diesen Wert abgeschaltet hat -
   dann steht ein durchgestrichenes Telefon in der Zeile, und man sieht auf
   einen Blick, warum genau hier auf dem Handy nichts nachgibt. */
.insp-mobil{
  display:flex;align-items:center;justify-content:center;position:relative;
  width:18px;height:18px;flex:0 0 18px;border:0;background:transparent;cursor:pointer;padding:0;
  color:#b45309;border-radius:5px;opacity:.9;
  transition:opacity .12s,color .12s,background .12s;
}
.insp-mobil .fa{width:10px;height:10px}
.insp-mobil:hover{background:hsl(var(--accent));opacity:1}
/* Aus dem Weg geraeumt: die Automatik laeuft, der Knopf haelt sich zurueck. */
.insp-mobil.on{color:hsl(var(--muted-foreground));opacity:.3}
.insp-row:hover .insp-mobil.on{opacity:.8}
.insp-mobil.on:hover{background:hsl(var(--accent));color:hsl(var(--foreground));opacity:1}
/* Der Strich quer durch das Telefon markiert den Sonderfall. */
.insp-mobil:not(.on)::after{
  content:"";position:absolute;left:2px;right:2px;top:calc(50% - 1px);height:2px;
  background:currentColor;transform:rotate(-45deg);border-radius:2px;
  box-shadow:0 0 0 1px #fff;
}
.insp-ico{display:flex;justify-content:center;color:hsl(var(--muted-foreground))}
.insp-ico .fa{width:13px;height:13px}
.insp-row label{font-size:11.5px;color:hsl(var(--muted-foreground));
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Breiten-Hinweis im Inspektor: auffaellig genug, dass niemand aus Versehen
   in der Handy-Ansicht die ganze Website umstellt. */
.insp-breite{
  display:flex;align-items:center;gap:7px;margin:0 10px 8px;padding:6px 9px;
  border-radius:calc(var(--radius) - 2px);
  background:hsl(var(--primary) / .1);color:hsl(var(--foreground));
  font-size:11.5px;line-height:1.35;
}
.insp-breite .ib-ico{display:flex;flex:0 0 auto;color:hsl(var(--primary))}
.insp-breite .ib-ico .fa{width:13px;height:13px}
.insp-breite b{font-weight:600}

.insp-ctl{min-width:0;display:flex;align-items:center;gap:5px}
.insp-ctl input[type="text"],
.insp-ctl input[type="number"],
.insp-ctl select{
  flex:1;min-width:0;height:26px;padding:0 6px;font:inherit;font-size:12px;
  border:1px solid hsl(var(--input));border-radius:calc(var(--radius) - 3px);
  background:hsl(var(--card));color:hsl(var(--foreground));
}
.insp-ctl input[type="number"]{flex:0 0 52px;text-align:right;font-variant-numeric:tabular-nums}
.insp-ctl select{padding-right:18px;appearance:none;
  background:hsl(var(--card)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 4px center/12px}
.insp-ctl input:focus,.insp-ctl select:focus{outline:2px solid hsl(var(--ring));outline-offset:1px}
.insp-unit{flex:0 0 auto;font-size:10.5px;color:hsl(var(--muted-foreground))}
/* Masseinheit hinter dem Feld: sieht aus wie das stille „px“ von frueher,
   ist aber ein Auswahlfeld - Klick oeffnet px, %, em, rem, vw, vh, ch. */
.insp-ctl select.insp-einheit,
.insp-row.breit select.insp-einheit{
  flex:0 0 auto;width:auto;min-width:0;height:26px;padding:0 10px 0 3px;
  font:inherit;font-size:10.5px;font-variant-numeric:tabular-nums;color:hsl(var(--muted-foreground));
  appearance:none;-webkit-appearance:none;cursor:pointer;
  border:1px solid transparent;border-radius:calc(var(--radius) - 3px);
  background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 1px center/8px;
}
/* Mit Einheiten stehen oefter Nachkommastellen im Feld (0.06 rem) - die
   Pfeilchen des Zahlenfelds nehmen dafuer zu viel Platz weg. Pfeiltasten
   und der Schieber daneben tun dasselbe. */
.insp-ctl input[type="number"]{-moz-appearance:textfield}
.insp-ctl input[type="number"]::-webkit-outer-spin-button,
.insp-ctl input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.insp-ctl select.insp-einheit:hover,
.insp-row.breit select.insp-einheit:hover{border-color:hsl(var(--input));color:hsl(var(--foreground));
  background-color:hsl(var(--card))}
.insp-ctl select.insp-einheit:focus{color:hsl(var(--foreground))}

/* Schieber: die Wirkung soll man beim Ziehen sehen. */
.insp-ctl input[type="range"],
.bg-kopf input[type="range"],
.bg-stop input[type="range"]{
  flex:1;min-width:0;height:26px;margin:0;padding:0;background:transparent;
  appearance:none;-webkit-appearance:none;cursor:pointer;
}
/* Bahn des Schiebers: derselbe Ton wie die Beschriftung daneben. Mit der
   Farbe der Trennlinien war sie auf hellem Grund praktisch unsichtbar. */
.insp-ctl input[type="range"]::-webkit-slider-runnable-track,
.bg-kopf input[type="range"]::-webkit-slider-runnable-track,
.bg-stop input[type="range"]::-webkit-slider-runnable-track{
  height:3px;border-radius:99px;background:hsl(var(--muted-foreground));
}
.insp-ctl input[type="range"]::-webkit-slider-thumb,
.bg-kopf input[type="range"]::-webkit-slider-thumb,
.bg-stop input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;width:13px;height:13px;margin-top:-5px;border-radius:50%;
  background:hsl(var(--primary));border:2px solid hsl(var(--card));box-shadow:0 0 0 1px hsl(var(--border));
}
.insp-ctl input[type="range"]::-moz-range-track,
.bg-kopf input[type="range"]::-moz-range-track,
.bg-stop input[type="range"]::-moz-range-track{
  height:3px;border-radius:99px;background:hsl(var(--muted-foreground));
}
.insp-ctl input[type="range"]::-moz-range-thumb,
.bg-kopf input[type="range"]::-moz-range-thumb,
.bg-stop input[type="range"]::-moz-range-thumb{
  width:11px;height:11px;border-radius:50%;background:hsl(var(--primary));
  border:2px solid hsl(var(--card));box-shadow:0 0 0 1px hsl(var(--border));
}
.insp-ctl input[type="range"]:focus-visible,
.bg-kopf input[type="range"]:focus-visible,
.bg-stop input[type="range"]:focus-visible{outline:2px solid hsl(var(--ring));outline-offset:2px}

.insp-ctl input[type="color"]{
  flex:0 0 26px;width:26px;height:26px;padding:2px;cursor:pointer;
  border:1px solid hsl(var(--input));border-radius:calc(var(--radius) - 3px);background:hsl(var(--card));
}

.insp-seg{display:flex;flex:1;min-width:0;border:1px solid hsl(var(--border));
  border-radius:calc(var(--radius) - 3px);overflow:hidden}
.insp-seg button{
  flex:1;min-width:0;display:flex;align-items:center;justify-content:center;
  border:0;background:transparent;font:inherit;font-size:11px;height:26px;padding:0 2px;cursor:pointer;
  color:hsl(var(--muted-foreground));
}
.insp-seg button .fa{width:12px;height:12px}
.insp-seg button b{font-weight:500;font-size:10.5px;letter-spacing:.02em;white-space:nowrap}
.insp-seg button b.eng{font-size:9px;letter-spacing:0}
.insp-seg button + button{border-left:1px solid hsl(var(--border))}
.insp-seg button:hover:not(.on){background:hsl(var(--accent))}
.insp-seg button.on{background:hsl(var(--primary));color:hsl(var(--primary-foreground))}

.insp-reset{
  display:flex;align-items:center;justify-content:center;
  width:18px;height:18px;border:0;background:transparent;cursor:pointer;padding:0;
  color:hsl(var(--muted-foreground));border-radius:5px;opacity:.45;transition:opacity .12s,color .12s;
}
.insp-reset .fa{width:11px;height:11px}
.insp-row:hover .insp-reset{opacity:1}
.insp-reset:hover{background:hsl(var(--accent));color:hsl(var(--foreground))}

.insp-foot{padding:7px 10px;border-top:1px solid hsl(var(--border));
  font-size:11px;color:hsl(var(--muted-foreground));text-align:center}
.insp-foot.warn{color:#b45309}
.insp-foot.good{color:#15803d}
.insp-file{
  display:flex;align-items:center;justify-content:center;gap:6px;
  width:100%;height:28px;margin-top:2px;cursor:pointer;
  border:1px dashed hsl(var(--border));border-radius:calc(var(--radius) - 3px);
  font-size:11.5px;color:hsl(var(--muted-foreground));background:hsl(var(--card));
}
.insp-file:hover{background:hsl(var(--accent));color:hsl(var(--foreground))}
.insp-file .fa{width:12px;height:12px;flex:0 0 auto}
/* Beschriftung bleibt einzeilig - lieber gekuerzt als umgebrochen. */
.insp-file,.insp-ordner{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 4px;gap:5px}
.insp-file input[type="file"]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}

/* ---------- Konto ---------- */
.user-btn{
  display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 10px 0 4px;
  border:1px solid transparent;border-radius:99px;background:transparent;
  font:inherit;font-size:12.5px;cursor:pointer;color:hsl(var(--foreground));max-width:170px;
}
.user-btn:hover{background:hsl(var(--accent));border-color:hsl(var(--border))}
.user-btn span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.avatar-sm,.avatar{
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;border-radius:99px;
  background:hsl(var(--primary));color:hsl(var(--primary-foreground));font-weight:600;letter-spacing:.02em;
}
.avatar-sm{width:24px;height:24px;font-size:10px}
.avatar{width:34px;height:34px;font-size:12.5px}

.user-pop{right:0;left:auto;transform:none;width:268px;padding:6px;max-height:min(72vh,540px)}
.user-head{display:flex;align-items:center;gap:10px;padding:8px 8px 11px;margin-bottom:4px;
           border-bottom:1px solid hsl(var(--border))}
.user-meta{display:flex;flex-direction:column;min-width:0}
.user-meta strong{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-meta span{font-size:11px;color:hsl(var(--muted-foreground))}

.user-div{height:1px;background:hsl(var(--border));margin:5px 2px}
.user-cap{margin:6px 8px 5px;font-size:10.5px;font-weight:500;letter-spacing:.05em;
          text-transform:uppercase;color:hsl(var(--muted-foreground))}
.user-cap span{font-weight:400;letter-spacing:0;text-transform:none}

.user-link{
  display:flex;align-items:center;gap:9px;width:100%;text-align:left;padding:7px 8px;
  border:0;background:transparent;border-radius:calc(var(--radius) - 2px);
  font:inherit;font-size:12.5px;cursor:pointer;color:hsl(var(--foreground));
}
.user-link:hover{background:hsl(var(--accent))}
.user-link .ul-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-link .ul-ico{display:flex;flex:0 0 auto;color:hsl(var(--muted-foreground))}
.user-link .ul-ico .fa{width:13px;height:13px}
.user-link .ul-ico.flip{transform:scaleX(-1)}
.user-link .ul-chev{display:flex;flex:0 0 auto;color:hsl(var(--muted-foreground));
                    transition:transform .15s ease}
.user-link .ul-chev .fa{width:10px;height:10px}
.user-link[aria-expanded="true"] .ul-chev{transform:rotate(180deg)}
.user-link[aria-expanded="true"]{background:hsl(var(--accent))}
.user-link.danger{color:#b91c1c}
.user-link.danger .ul-ico{color:#b91c1c}
.user-link.danger:hover{background:#fef2f2}

/* Marken-Schalter im Konto-Menue: dieselbe Zeilenform wie die uebrigen
   Eintraege, nur mit Haken statt Symbol - so bleibt das Menue ruhig. */
.marken-wechsel{padding-bottom:2px}
.mw-eintrag .ul-ico{width:13px;justify-content:center}
.mw-eintrag.an{font-weight:600}
.mw-eintrag.an .ul-ico{color:hsl(var(--primary))}
.mw-eintrag .ul-text i{font-style:normal;color:hsl(var(--muted-foreground));font-size:11px}
.mw-eintrag[disabled]{opacity:.55;cursor:default}
.mw-fuss{margin:3px 8px 2px;font-size:11px;line-height:1.35;color:hsl(var(--muted-foreground))}

.user-form{display:flex;flex-direction:column;gap:5px;padding:3px 8px 9px}
.user-form input{
  height:30px;padding:0 9px;font:inherit;font-size:12px;
  border:1px solid hsl(var(--input));border-radius:calc(var(--radius) - 3px);
  background:hsl(var(--card));color:hsl(var(--foreground));
}
.user-form input:focus{outline:2px solid hsl(var(--ring));outline-offset:1px}
.user-form button{
  height:30px;border:0;border-radius:calc(var(--radius) - 3px);cursor:pointer;
  background:hsl(var(--primary));color:hsl(var(--primary-foreground));
  font:inherit;font-size:12px;font-weight:500;
}
.user-form button:hover{opacity:.92}
.user-msg{font-size:11px;line-height:1.4;color:hsl(var(--muted-foreground))}
.user-msg.bad{color:#b91c1c}
.user-msg.good{color:#15803d}

.user-list{display:flex;flex-direction:column;gap:1px;margin-bottom:3px}
.user-row{
  display:flex;align-items:center;gap:8px;padding:5px 8px;
  border-radius:calc(var(--radius) - 2px);
}
.user-row:hover{background:hsl(var(--accent))}
.user-row .avatar-xs{
  flex:0 0 auto;width:22px;height:22px;border-radius:99px;display:flex;
  align-items:center;justify-content:center;font-size:9px;font-weight:600;letter-spacing:.02em;
  background:hsl(var(--muted));color:hsl(var(--muted-foreground));
}
.user-row.me .avatar-xs{background:hsl(var(--primary));color:hsl(var(--primary-foreground))}
.user-row .ur-meta{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.user-row .ur-name{font-size:12px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-row .ur-sub{font-size:10.5px;color:hsl(var(--muted-foreground));
                  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-row .ur-tag{
  flex:0 0 auto;font-size:9.5px;font-weight:500;letter-spacing:.03em;text-transform:uppercase;
  color:hsl(var(--muted-foreground));border:1px solid hsl(var(--border));
  border-radius:99px;padding:1px 6px;
}
/* Die Stufen sind aufsteigend eingefaerbt, damit man sie ohne Lesen
   auseinanderhaelt. Bearbeiter bleibt schlicht. */
.user-row .ur-tag.r-redakteur{border-color:#c7d2fe;background:#eef2ff;color:#4338ca}
.user-row .ur-tag.r-admin{border-color:#ddd6fe;background:#f5f3ff;color:#6d28d9}
.user-row .ur-tag.r-superadmin{border-color:#fbcfe8;background:#fdf2f8;color:#be185d}
.user-row select{
  flex:0 0 auto;height:22px;max-width:104px;font:inherit;font-size:10.5px;
  border:1px solid hsl(var(--input));border-radius:calc(var(--radius) - 4px);
  background:hsl(var(--card));color:hsl(var(--foreground));cursor:pointer;
}
.user-form select{
  height:30px;font:inherit;font-size:12px;
  border:1px solid hsl(var(--input));border-radius:calc(var(--radius) - 3px);
  background:hsl(var(--card));color:hsl(var(--foreground));padding:0 6px;
}
.user-row button{
  flex:0 0 auto;border:0;background:transparent;cursor:pointer;color:hsl(var(--muted-foreground));
  width:22px;height:22px;border-radius:6px;display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .12s ease;
}
.user-row button .fa{width:11px;height:11px}
.user-row:hover button{opacity:1}
.user-row button:hover{background:#fef2f2;color:#dc2626}
.hist-by{font-size:10.5px;color:hsl(var(--muted-foreground))}

/* ---------- Versionen ---------- */
/* Ein Punkt statt einer Zahl: es geht nur darum, ob etwas offen ist. */
.badge.dot-only{min-width:7px;width:7px;height:7px;padding:0;border-radius:99px;font-size:0}
.ver-frei{
  display:flex;gap:8px;align-items:center;padding:10px 12px;
  border-bottom:1px solid hsl(var(--border));
}
.ver-frei input{
  flex:1;min-width:0;height:32px;font:inherit;font-size:12.5px;padding:0 10px;
  border:1px solid hsl(var(--input));border-radius:calc(var(--radius) - 3px);
  background:hsl(var(--background));color:hsl(var(--foreground));
}
.ver-frei input:focus{outline:2px solid hsl(var(--ring));outline-offset:-1px}
/* Kurzer Hinweis, wenn jemand veroeffentlichen will, ohne freigegeben zu haben. */
.ver-frei.hinweis{animation:freiWink 1.4s ease}
@keyframes freiWink{
  0%,100%{background:transparent}
  15%,55%{background:hsl(var(--accent))}
}
@media (prefers-reduced-motion: reduce){ .ver-frei.hinweis{animation:none;background:hsl(var(--accent))} }
.ver-frei button{
  flex:0 0 auto;display:flex;align-items:center;gap:6px;height:32px;padding:0 12px;
  font:inherit;font-size:12.5px;font-weight:500;cursor:pointer;
  border:0;border-radius:calc(var(--radius) - 3px);
  background:hsl(var(--primary));color:hsl(var(--primary-foreground));
}
.ver-frei button:disabled{opacity:.5;cursor:default}
.ver-frei button .fa{width:12px;height:12px}
#versionList{flex:1;overflow-y:auto;padding:6px}
.ver-row{
  display:flex;flex-direction:column;align-items:stretch;gap:5px;padding:8px 9px;
  border-radius:calc(var(--radius) - 2px);
}
.ver-row + .ver-row{border-top:1px solid hsl(var(--border))}
.ver-row:hover{background:hsl(var(--accent))}
/* Zeile 1: Name ueber die volle Breite. */
.ver-row .vr-kopf{display:flex;min-width:0}
.ver-row .vr-note{
  flex:1;min-width:0;font-size:12.5px;font-weight:500;line-height:1.35;
  overflow-wrap:anywhere;
}
.ver-row .vr-note.leer{font-weight:400;font-style:italic;color:hsl(var(--muted-foreground))}
/* Zeile 2: Datum und Tags. */
.ver-row .vr-zeile{display:flex;align-items:center;flex-wrap:wrap;gap:5px;min-width:0}
.ver-row .vr-sub{font-size:10.5px;line-height:1.4;color:hsl(var(--muted-foreground))}
/* Zeile 3: Schaltflaechen. */
.ver-row .vr-tun{display:flex;flex-wrap:wrap;gap:6px;margin-top:1px}
/* Umbenennen an Ort und Stelle - gleiche Zeilenhoehe, damit nichts springt. */
.ver-row .vr-note-edit{
  width:100%;min-width:0;height:22px;font:inherit;font-size:12.5px;font-weight:500;padding:0 6px;
  border:1px solid hsl(var(--input));border-radius:calc(var(--radius) - 4px);
  background:hsl(var(--background));color:hsl(var(--foreground));
}
.ver-row .vr-note-edit:focus{outline:2px solid hsl(var(--ring));outline-offset:-1px}
.ver-row .vr-tag{
  flex:0 0 auto;font-size:9.5px;font-weight:500;letter-spacing:.03em;text-transform:uppercase;
  border:1px solid hsl(var(--border));border-radius:99px;padding:1px 6px;
  color:hsl(var(--muted-foreground));
}
.ver-row .vr-tag.jetzt{border-color:#bbf7d0;background:#f0fdf4;color:#15803d}
.ver-row .vr-tag.sicherung{border-color:#fde68a;background:#fffbeb;color:#b45309}
.ver-row .vr-tun button{
  flex:0 0 auto;border:1px solid hsl(var(--border));background:hsl(var(--card));cursor:pointer;
  color:hsl(var(--muted-foreground));height:24px;padding:0 8px;border-radius:6px;
  display:flex;align-items:center;gap:5px;font:inherit;font-size:11px;white-space:nowrap;
}
.ver-row .vr-tun button:hover{background:hsl(var(--accent));color:hsl(var(--foreground))}
.ver-row .vr-tun button .fa{width:11px;height:11px}
.ver-leer{padding:22px 12px;text-align:center;font-size:12px;color:hsl(var(--muted-foreground))}

/* ---------- Veroeffentlichen ---------- */
.ver-pub{
  display:flex;align-items:center;gap:8px;padding:9px 12px;
  border-bottom:1px solid hsl(var(--border));background:hsl(var(--muted));
}
.ver-pub .vp-ziel{
  font-size:11.5px;color:hsl(var(--muted-foreground));
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ver-pub .vp-ziel b{color:hsl(var(--foreground));font-weight:500}
.ver-pub .vp-ziel .klartext{color:#b45309}
.ver-pub .vp-stand{flex:1;min-width:0;font-size:11.5px;color:hsl(var(--muted-foreground));
                   overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ver-pub button{
  flex:0 0 auto;display:flex;align-items:center;gap:6px;height:28px;padding:0 10px;
  font:inherit;font-size:12px;cursor:pointer;
  border:1px solid hsl(var(--border));border-radius:calc(var(--radius) - 3px);
  background:hsl(var(--card));color:hsl(var(--foreground));
}
.ver-pub button:hover{background:hsl(var(--accent))}
.ver-pub button:disabled{opacity:.5;cursor:default}
.ver-pub button .fa{width:12px;height:12px}
/* Zweiter Klick nötig: der erste färbt den Knopf, damit niemand aus Versehen
   32 MB noch einmal hinausschickt. */
.ver-pub #vpAlles.warnt{border-color:#b91c1c;color:#b91c1c;background:#fef2f2}
.ver-pub .vp-los{border:0;background:hsl(var(--primary));color:hsl(var(--primary-foreground))}
.ver-pub .vp-los:hover{background:hsl(var(--primary));opacity:.9}
/* Noch kein Stand freigegeben: der Knopf bleibt bedienbar, sieht aber nicht
   nach "jetzt geht es raus" aus - und sagt beim Klick, was fehlt. */
.ver-pub .vp-los.wartet{background:hsl(var(--muted));color:hsl(var(--muted-foreground))}
.ver-pub .vp-los.wartet:hover{background:hsl(var(--muted));opacity:1}
.vp-lauf{display:flex;align-items:center;gap:9px;padding:8px 12px;border-bottom:1px solid hsl(var(--border))}
.vp-balken{flex:1;height:5px;border-radius:99px;background:hsl(var(--muted));overflow:hidden}
.vp-balken span{display:block;height:100%;width:0;background:hsl(var(--primary));transition:width .18s ease}
.vp-text{flex:0 0 auto;font-size:11px;color:hsl(var(--muted-foreground));max-width:46%;
         overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vp-text.bad{color:#b91c1c}
.ver-row .vr-tag.draussen{border-color:#bae6fd;background:#f0f9ff;color:#0369a1}

/* ---------- Baustelle ---------- */
.ver-bau{border-bottom:1px solid hsl(var(--border));background:hsl(var(--card))}
/* Ist sie an, ist das nichts fuer den Randblick - die ganze Leiste faerbt um. */
.ver-bau.an{background:#fffbeb;border-bottom-color:#fde68a}
.bau-kopf{display:flex;align-items:center;gap:9px;padding:8px 12px}
.bau-ico{display:flex;color:hsl(var(--muted-foreground))}
.ver-bau.an .bau-ico{color:#b45309}
.bau-ico .fa{width:13px;height:13px}
.bau-titel{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.bau-titel strong{font-size:12.5px;font-weight:500}
.bau-stand{font-size:10.5px;color:hsl(var(--muted-foreground));
           overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ver-bau.an .bau-stand{color:#b45309}
.bau-mehr{
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:24px;height:24px;padding:0;cursor:pointer;
  border:1px solid hsl(var(--border));border-radius:calc(var(--radius) - 4px);
  background:hsl(var(--card));color:hsl(var(--muted-foreground));
}
.bau-mehr:hover{background:hsl(var(--accent));color:hsl(var(--foreground))}
.bau-mehr .fa{width:11px;height:11px;transition:transform .15s ease}
.bau-mehr.auf .fa{transform:rotate(180deg)}

/* Schiebeschalter - derselbe wie in der Zugangsverwaltung. */
.bau-schalter{flex:0 0 auto;display:flex}
.bau-schalter input{
  appearance:none;-webkit-appearance:none;margin:0;padding:0;
  width:32px;height:18px;border-radius:99px;position:relative;cursor:pointer;
  border:1px solid hsl(var(--border));background:hsl(var(--muted));
  transition:background .15s ease,border-color .15s ease;
}
.bau-schalter input::after{
  content:"";position:absolute;top:1px;left:1px;width:14px;height:14px;border-radius:50%;
  background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .15s ease;
}
.bau-schalter input:checked{background:#d97706;border-color:#d97706}
.bau-schalter input:checked::after{transform:translateX(14px)}
.bau-schalter input:disabled{opacity:.45;cursor:default}
.bau-schalter input:focus-visible{outline:2px solid hsl(var(--ring));outline-offset:2px}
.ver-bau.gesperrt .bau-kopf{opacity:.7}

.bau-form{padding:0 12px 10px;display:flex;flex-direction:column;gap:7px}
.bau-art{display:flex;gap:4px;padding:3px;border-radius:calc(var(--radius) - 2px);
         background:hsl(var(--muted))}
.bau-tab{
  flex:1;height:26px;padding:0 10px;cursor:pointer;font:inherit;font-size:11.5px;
  border:0;border-radius:calc(var(--radius) - 4px);background:transparent;
  color:hsl(var(--muted-foreground));
}
.bau-tab.sel{background:hsl(var(--card));color:hsl(var(--foreground));font-weight:500;
             box-shadow:0 1px 2px rgba(15,23,42,.08)}
.bau-felder{display:flex;flex-direction:column;gap:6px}
.bau-felder input,.bau-felder textarea{
  width:100%;font:inherit;font-size:12px;padding:6px 9px;resize:vertical;
  border:1px solid hsl(var(--input));border-radius:calc(var(--radius) - 3px);
  background:hsl(var(--background));color:hsl(var(--foreground));
}
.bau-felder input:focus,.bau-felder textarea:focus{outline:2px solid hsl(var(--ring));outline-offset:-1px}
.bau-tun{display:flex;flex-wrap:wrap;gap:6px}
.bau-knopf{
  display:flex;align-items:center;gap:6px;height:26px;padding:0 10px;cursor:pointer;
  font:inherit;font-size:11.5px;
  border:1px solid hsl(var(--border));border-radius:calc(var(--radius) - 3px);
  background:hsl(var(--card));color:hsl(var(--muted-foreground));
}
.bau-knopf:hover{background:hsl(var(--accent));color:hsl(var(--foreground))}
.bau-knopf .fa{width:11px;height:11px}
.bau-knopf.sichern{border-color:#d97706;background:#d97706;color:#fff}
.bau-knopf.sichern:hover{background:#b45309;color:#fff}
.bau-hinweis{margin:0;font-size:11px;line-height:1.45;color:hsl(var(--muted-foreground))}
.bau-hinweis:empty{display:none}
.bau-hinweis.bad{color:#b91c1c}
.bau-hinweis.gut{color:#15803d}
.bau-hinweis.laeuft{color:hsl(var(--muted-foreground));font-style:italic}

/* ---------- Vergleich ---------- */
#cmpView{
  position:fixed;inset:0;z-index:70;display:flex;flex-direction:column;
  background:hsl(var(--background));
}

/* ---------- Bild zuschneiden ---------- */
/* Über der Element-Pille (80) und den schwebenden Leisten, aber unter den
   Meldungen (90) - sonst schaute die Pille aus der Vorschau mitten in den
   Zuschnitt hinein. */
#cropView{
  position:fixed;inset:0;z-index:88;display:flex;flex-direction:column;
  background:hsl(var(--background));
}
.crop-kopf{
  display:flex;align-items:center;gap:10px;padding:9px 12px;font-size:13px;
  border-bottom:1px solid hsl(var(--border));background:hsl(var(--card));
}
.crop-kopf .crop-ico{display:flex;color:hsl(var(--muted-foreground))}
.crop-kopf .fa{width:13px;height:13px}
.crop-datei{
  font-size:12px;color:hsl(var(--muted-foreground));
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:260px;
}
.crop-verh{display:flex;gap:3px;margin-left:auto}
.crop-verh button{
  height:26px;padding:0 9px;font:inherit;font-size:11.5px;cursor:pointer;
  border:1px solid hsl(var(--border));border-radius:calc(var(--radius) - 3px);
  background:hsl(var(--card));color:hsl(var(--muted-foreground));
}
.crop-verh button:hover{background:hsl(var(--accent));color:hsl(var(--foreground))}
.crop-verh button.sel{
  background:hsl(var(--primary));border-color:hsl(var(--primary));
  color:hsl(var(--primary-foreground));
}
.crop-masse{
  font-size:11.5px;color:hsl(var(--muted-foreground));white-space:nowrap;
  min-width:96px;text-align:right;font-variant-numeric:tabular-nums;
}
.crop-weg,.crop-los{
  display:flex;align-items:center;gap:6px;height:28px;padding:0 11px;
  font:inherit;font-size:12px;cursor:pointer;
  border:1px solid hsl(var(--border));border-radius:calc(var(--radius) - 3px);
  background:hsl(var(--card));color:hsl(var(--foreground));
}
.crop-weg:hover{background:hsl(var(--accent))}
.crop-los{border:0;background:hsl(var(--primary));color:hsl(var(--primary-foreground))}
.crop-los:hover{opacity:.92}
.crop-los:disabled{opacity:.5;cursor:default}

.crop-buehne{
  flex:1;min-height:0;display:flex;align-items:center;justify-content:center;
  padding:22px;background:hsl(var(--muted));
  /* Karo, damit man bei durchsichtigen Bildern die Kante sieht */
  background-image:linear-gradient(45deg,hsl(var(--border)) 25%,transparent 25%),
    linear-gradient(-45deg,hsl(var(--border)) 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,hsl(var(--border)) 75%),
    linear-gradient(-45deg,transparent 75%,hsl(var(--border)) 75%);
  background-size:18px 18px;
  background-position:0 0,0 9px,9px -9px,-9px 0;
}
/* overflow:hidden haelt den riesigen Schatten des Rahmens im Bild - sonst
   legte er sich ueber die ganze Oberflaeche. */
.crop-halter{position:relative;line-height:0;overflow:hidden;box-shadow:var(--shadow-lg)}
.crop-halter img{display:block;max-width:100%;max-height:100%;user-select:none;-webkit-user-drag:none}
/* Was wegfällt, wird abgedunkelt – der Ausschnitt bleibt als Loch stehen.
   Vier Kästen wären dasselbe mit mehr Rechnerei; ein Rahmen aus Schatten
   reicht, weil er genau den Ring um das Loch färbt. */
.crop-rahmen{
  position:absolute;box-sizing:border-box;cursor:move;
  border:1px solid rgba(255,255,255,.95);
  /* Ein Schatten statt vier Kästen: Er färbt genau den Ring um den
     Ausschnitt, und der Ausschnitt bleibt als Loch stehen. */
  box-shadow:0 0 0 9999px rgba(15,15,20,.55),0 0 0 1px rgba(0,0,0,.35);
}
/* Drittel-Linien: die klassische Hilfe beim Ausschnitt. */
.crop-rahmen::before,.crop-rahmen::after{
  content:"";position:absolute;inset:0;pointer-events:none;
}
.crop-rahmen::before{
  background:linear-gradient(to right,transparent 33.33%,rgba(255,255,255,.35) 33.33%,
    rgba(255,255,255,.35) calc(33.33% + 1px),transparent calc(33.33% + 1px),
    transparent 66.66%,rgba(255,255,255,.35) 66.66%,
    rgba(255,255,255,.35) calc(66.66% + 1px),transparent calc(66.66% + 1px));
}
.crop-rahmen::after{
  background:linear-gradient(to bottom,transparent 33.33%,rgba(255,255,255,.35) 33.33%,
    rgba(255,255,255,.35) calc(33.33% + 1px),transparent calc(33.33% + 1px),
    transparent 66.66%,rgba(255,255,255,.35) 66.66%,
    rgba(255,255,255,.35) calc(66.66% + 1px),transparent calc(66.66% + 1px));
}
.crop-griff{
  position:absolute;width:13px;height:13px;box-sizing:border-box;
  background:#fff;border:2px solid #7c3aed;border-radius:3px;
  box-shadow:0 1px 3px rgba(0,0,0,.35);touch-action:none;
}
.crop-griff[data-ri="nw"]{left:-7px;top:-7px;cursor:nwse-resize}
.crop-griff[data-ri="n"] {left:calc(50% - 6.5px);top:-7px;cursor:ns-resize}
.crop-griff[data-ri="ne"]{right:-7px;top:-7px;cursor:nesw-resize}
.crop-griff[data-ri="e"] {right:-7px;top:calc(50% - 6.5px);cursor:ew-resize}
.crop-griff[data-ri="se"]{right:-7px;bottom:-7px;cursor:nwse-resize}
.crop-griff[data-ri="s"] {left:calc(50% - 6.5px);bottom:-7px;cursor:ns-resize}
.crop-griff[data-ri="sw"]{left:-7px;bottom:-7px;cursor:nesw-resize}
.crop-griff[data-ri="w"] {left:-7px;top:calc(50% - 6.5px);cursor:ew-resize}
.crop-fuss{
  margin:0;padding:8px 12px;font-size:11.5px;color:hsl(var(--muted-foreground));
  border-top:1px solid hsl(var(--border));background:hsl(var(--card));
}
.cmp-kopf{
  display:flex;align-items:center;gap:10px;padding:9px 12px;font-size:13px;
  border-bottom:1px solid hsl(var(--border));background:hsl(var(--card));
}
.cmp-kopf select{
  height:28px;font:inherit;font-size:12px;max-width:230px;
  border:1px solid hsl(var(--input));border-radius:calc(var(--radius) - 4px);
  background:hsl(var(--background));color:hsl(var(--foreground));
}
.cmp-paar{display:flex;align-items:center;gap:7px;margin-left:auto}
.cmp-paar .cmp-pfeil{display:flex;color:hsl(var(--muted-foreground))}
.cmp-paar .fa{width:12px;height:12px}
.cmp-tausch{
  height:28px;width:28px;display:flex;align-items:center;justify-content:center;
  border:1px solid hsl(var(--border));border-radius:calc(var(--radius) - 4px);
  background:hsl(var(--card));cursor:pointer;color:hsl(var(--muted-foreground));
}
.cmp-tausch:hover{background:hsl(var(--accent))}
.cmp-tausch .fa{width:12px;height:12px}
.cmp-buehne{position:relative;flex:1;overflow:hidden;background:#fff}
.cmp-buehne iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* Der Ausschnitt schneidet den oberen Rahmen ab, ohne ihn schmaler zu machen. */
.cmp-oben{position:absolute;inset:0;width:50%;overflow:hidden}
.cmp-oben iframe{width:100vw}
.cmp-griff{
  position:absolute;top:0;bottom:0;left:50%;width:3px;margin-left:-1.5px;cursor:col-resize;
  background:hsl(var(--primary));z-index:2;touch-action:none;
}
.cmp-griff span{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:30px;height:30px;border-radius:99px;display:flex;align-items:center;justify-content:center;
  background:hsl(var(--primary));color:hsl(var(--primary-foreground));
  box-shadow:0 1px 6px rgba(0,0,0,.35);
}
.cmp-griff .fa{width:13px;height:13px}
.cmp-marke{
  position:absolute;top:10px;z-index:3;pointer-events:none;
  font-size:11px;padding:3px 8px;border-radius:99px;
  background:rgba(15,23,42,.78);color:#fff;
}
.cmp-marke.links{left:12px}
.cmp-marke.rechts{right:12px}

/* ---------- Figma ---------- */
.fig-medien{display:flex;align-items:center;gap:8px;padding:8px 12px;
  border-bottom:1px solid hsl(var(--border));font-size:12px}
.fig-medien label{flex:0 0 auto;color:hsl(var(--muted-foreground))}
.fig-medien-2{flex-wrap:wrap}
.fig-medien-2 input{flex:1 0 100%;font:inherit;font-size:12px;padding:5px 7px;
  border:1px solid hsl(var(--border));border-radius:calc(var(--radius) - 3px);
  background:hsl(var(--background));color:hsl(var(--foreground))}
.fig-medien-2 input:focus{outline:2px solid hsl(var(--ring));outline-offset:1px}
.fig-medien select{flex:1;min-width:0;font:inherit;font-size:12px;padding:5px 7px;
  border:1px solid hsl(var(--border));border-radius:calc(var(--radius) - 3px);
  background:hsl(var(--background));color:hsl(var(--foreground))}
.fig-tabs{display:flex;gap:2px;padding:9px 12px 0}
.fig-tab{flex:1;padding:6px 10px;font:inherit;font-size:12px;cursor:pointer;
  background:hsl(var(--muted));color:hsl(var(--muted-foreground));
  border:1px solid transparent;border-radius:calc(var(--radius) - 3px)}
.fig-tab:hover{color:hsl(var(--foreground))}
.fig-tab.sel{background:hsl(var(--background));color:hsl(var(--foreground));
  border-color:hsl(var(--border));font-weight:500}
.fig-mess{margin:0 0 8px;font-size:11.5px;color:hsl(var(--muted-foreground));line-height:1.55}
.fig-mess b{font-weight:600;color:hsl(var(--foreground))}
.fig-card.starr{cursor:default}
.fig-card.starr .fig-haken{display:none}
.fig-bar{display:flex;gap:7px;padding:9px 12px;border-bottom:1px solid hsl(var(--border))}
.fig-bar input{
  flex:1;min-width:0;height:31px;padding:0 10px;font:inherit;font-size:12.5px;
  border:1px solid hsl(var(--input));border-radius:calc(var(--radius) - 2px);
  background:hsl(var(--card));color:hsl(var(--foreground));
}
.fig-bar input:focus{outline:2px solid hsl(var(--ring));outline-offset:1px}
.fig-bar button{
  flex:0 0 auto;height:31px;padding:0 12px;border:0;border-radius:calc(var(--radius) - 2px);
  cursor:pointer;background:hsl(var(--primary));color:hsl(var(--primary-foreground));
  font:inherit;font-size:12.5px;font-weight:500;
}
.fig-bar button:hover{opacity:.92}
.fig-bar button:disabled{opacity:.55;cursor:not-allowed}

#figmaBody{flex:1;overflow-y:auto;padding:12px}
.fig-hint{margin:0;padding:14px 4px;font-size:12.5px;line-height:1.55;color:hsl(var(--muted-foreground));text-align:center}
.fig-hint.bad{color:#b91c1c}

.fig-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.fig-card{
  position:relative;
  border:1px solid hsl(var(--border));border-radius:calc(var(--radius) - 1px);
  background:hsl(var(--card));overflow:hidden;cursor:pointer;text-align:left;
  padding:0;font:inherit;display:flex;flex-direction:column;
}
.fig-card:hover{border-color:hsl(var(--ring));box-shadow:var(--shadow-lg)}
.fig-card.sel{border-color:hsl(var(--primary));box-shadow:0 0 0 2px hsl(var(--primary) / .18)}
.fig-shot{
  height:104px;background:hsl(var(--muted));display:flex;align-items:flex-start;justify-content:center;
  overflow:hidden;border-bottom:1px solid hsl(var(--border));
}
.fig-shot img{width:100%;height:auto;display:block}
.fig-name{padding:7px 9px 3px;font-size:12px;font-weight:500;line-height:1.3;
          overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fig-size{padding:0 9px 8px;font-size:10.5px;color:hsl(var(--muted-foreground))}

.fig-make{
  margin-top:12px;padding:11px 12px;border:1px solid hsl(var(--border));
  border-radius:calc(var(--radius) - 1px);background:hsl(var(--muted));
}
.fig-make p{margin:0 0 8px;font-size:12px;color:hsl(var(--muted-foreground))}
.fig-make p strong{color:hsl(var(--foreground));font-weight:600}
.fig-row{display:flex;gap:7px}
.fig-row input{
  flex:1;min-width:0;height:31px;padding:0 10px;font:inherit;font-size:12.5px;
  border:1px solid hsl(var(--input));border-radius:calc(var(--radius) - 2px);
  background:hsl(var(--card));color:hsl(var(--foreground));
}
.fig-row input:focus{outline:2px solid hsl(var(--ring));outline-offset:1px}
.fig-row button{
  flex:0 0 auto;height:31px;padding:0 13px;border:0;border-radius:calc(var(--radius) - 2px);
  cursor:pointer;background:hsl(var(--primary));color:hsl(var(--primary-foreground));
  font:inherit;font-size:12.5px;font-weight:500;display:flex;align-items:center;gap:7px;
}
.fig-row button:hover{opacity:.92}
.fig-row button:disabled{opacity:.55;cursor:not-allowed}
.fig-row button .fa{width:12px;height:12px}
.fig-row button.busy .fa{animation:spin .9s linear infinite}
.fig-status{display:flex;align-items:center;gap:7px;margin-top:9px;font-size:12px;
            color:hsl(var(--muted-foreground))}
.fig-status .fa{width:12px;height:12px;color:hsl(var(--ring));animation:spin .9s linear infinite}
.fig-status.bad{color:#b91c1c}
.fig-status.bad .fa{display:none}

/* ---------- Rueckweg zur Uebersicht ---------- */
.site-back{
  display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px;
  border-radius:calc(var(--radius) - 2px);text-decoration:none;
  color:hsl(var(--muted-foreground));font-size:12.5px;font-weight:500;max-width:190px;
}
.site-back:hover{background:hsl(var(--accent));color:hsl(var(--foreground))}
.site-back .fa{width:12px;height:12px;transform:rotate(90deg)}
.site-back span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- Prompt-Leiste ausgeblendet ---------- */
body[data-composer="off"] #composer{display:none}
body[data-composer="off"] #chat{display:none}
/* Ohne Prompt-Leiste ruecken die Bedienfelder nach unten nach */
body[data-composer="off"] .panel{bottom:60px}
#chatToggle.active{background:hsl(var(--primary));color:hsl(var(--primary-foreground))}

/* ---------- Konto: E-Mail und Bild ---------- */
.user-meta .mail{
  font-size:11px;color:hsl(var(--muted-foreground));
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:180px;
}
.avatar img,.avatar-sm img,.avatar-xs img{
  width:100%;height:100%;border-radius:99px;object-fit:cover;display:block;
}
.avatar,.avatar-sm{overflow:hidden}

/* ---------- Protokoll: Umfang und Rückfrage ---------- */
.seg-mini{
  display:flex;gap:2px;margin-left:auto;padding:2px;
  background:hsl(var(--muted));border-radius:calc(var(--radius) - 2px);
}
.seg-mini button{
  border:0;background:transparent;cursor:pointer;font:inherit;font-size:11px;
  padding:3px 8px;border-radius:calc(var(--radius) - 4px);
  color:hsl(var(--muted-foreground));white-space:nowrap;
}
.seg-mini button:hover{color:hsl(var(--foreground))}
.seg-mini button.on{background:hsl(var(--card));color:hsl(var(--foreground));box-shadow:0 1px 2px rgb(0 0 0 / .07)}
.panel-head #historyClose{margin-left:6px}

.hist-ask{
  display:flex;flex-direction:column;gap:6px;
  padding:9px 10px;margin:0 8px 8px;
  background:hsl(var(--muted));border:1px solid hsl(var(--border));
  border-radius:calc(var(--radius) - 2px);
}
.hist-ask p{margin:0 0 2px;font-size:11.5px;line-height:1.45;color:hsl(var(--muted-foreground))}
.hist-ask button{
  display:flex;align-items:center;gap:8px;width:100%;padding:7px 9px;
  border:1px solid hsl(var(--border));border-radius:calc(var(--radius) - 3px);
  background:hsl(var(--card));cursor:pointer;font:inherit;font-size:12px;text-align:left;
  color:hsl(var(--foreground));
}
.hist-ask button:hover{border-color:hsl(var(--ring));background:hsl(var(--accent))}
.hist-ask button .fa{width:12px;height:12px;flex:0 0 auto;color:hsl(var(--muted-foreground))}
.hist-ask button b{font-weight:500}
.hist-ask button span.sub{display:block;font-size:10.5px;color:hsl(var(--muted-foreground));font-weight:400}
.hist-ask .cancel{border:0;background:transparent;justify-content:center;
                  color:hsl(var(--muted-foreground));font-size:11.5px;padding:3px}
.hist-ask .cancel:hover{background:transparent;color:hsl(var(--foreground))}
.hist-row.chosen{background:hsl(var(--accent))}

/* ---------- Bedienfelder: halbtransparent mit Weichzeichner ---------- */
/* Man sieht die Website darunter durchscheinen, ohne dass der Inhalt der
   Felder unruhig wird. Wo der Browser das nicht kann, bleibt es deckend. */
@supports (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px)) {
  .panel,
  #composer,
  #toolbar,
  .pop,
  #inspector{
    background:hsl(var(--card) / .85);
    -webkit-backdrop-filter:blur(10px) saturate(1.6);
    backdrop-filter:blur(10px) saturate(1.6);
  }
  .panel-foot,
  .modal footer{background:hsl(var(--muted) / .6)}
  .msg.ai{background:hsl(var(--card) / .7)}
  .msg.ai.steps-only{background:none}
}

/* ---------- Textmodus ---------- */
#textBtn.active{background:#0d9488;color:#fff}
/* Die Leiste schwebt am Block, an dem gerade geschrieben wird - gesetzt wird
   sie in editor.js aus der Lage, die die Vorschau meldet. Unten an der
   Prompt-Leiste stand sie früher weit weg von der Stelle, um die es geht. */
#textBar{
  position:fixed;left:0;top:0;z-index:84;
  display:flex;align-items:center;gap:10px;
  padding:6px 8px 6px 10px;border-radius:99px;
  background:hsl(var(--card) / .92);border:1px solid hsl(var(--border));
  box-shadow:var(--shadow-lg);font-size:12.5px;
  -webkit-backdrop-filter:blur(10px) saturate(1.6);backdrop-filter:blur(10px) saturate(1.6);
}
#textBar .tb-ico{display:flex;color:#0d9488}
#textBar .tb-ico .fa{width:13px;height:13px}
#textBar .tb-trenner{width:1px;height:18px;background:hsl(var(--border));flex:0 0 auto}
#textBar .text-keys{display:flex;align-items:center;gap:9px;
                    font-size:11px;color:hsl(var(--muted-foreground))}
#textBar .text-keys b{
  font-weight:500;color:hsl(var(--foreground));
  background:hsl(var(--muted));border:1px solid hsl(var(--border));
  border-radius:5px;padding:1px 5px;margin-right:3px;
}
/* Fett und kursiv für die Markierung. Die Buchstaben tragen ihre Bedeutung
   selbst – ein Symbol dafür wäre die schlechtere Beschriftung. */
#textBar .tb-format{display:flex;align-items:center;gap:2px}
#textBar .tb-format button{
  display:flex;align-items:center;justify-content:center;
  width:26px;height:26px;padding:0;cursor:pointer;
  border:1px solid transparent;border-radius:7px;background:transparent;
  font:inherit;font-size:13px;line-height:1;color:hsl(var(--foreground));
}
#textBar .tb-format button:hover{background:hsl(var(--accent));border-color:hsl(var(--border))}
#textBar .tb-format button.offen{
  background:hsl(var(--accent));border-color:hsl(var(--border));
}
#textBar .tb-format button.on{
  background:hsl(var(--primary));border-color:hsl(var(--primary));
  color:hsl(var(--primary-foreground));
}
#textBar .tb-format button:focus-visible{outline:2px solid hsl(var(--ring));outline-offset:1px}
#textBar .tb-format b{font-weight:700}
#textBar .tb-format i{font-style:italic;font-family:Georgia,serif;padding-right:2px}
/* Ohne eigene Ausrichtung saehen hoch- und tiefgestellt gleich aus - die
   Schaltflaeche ist ihre eigene Beschriftung, das muss man unterscheiden.
   Die Huelle ist noetig, weil in einem Flex-Kasten jedes Kind ein eigenes
   Element ist und vertical-align dort nicht greift. */
#textBar .tb-lbl{display:inline-block;line-height:1}
#textBar .tb-format sup,#textBar .tb-format sub{font-size:9px}
#textBar .tb-format sup{vertical-align:super}
#textBar .tb-format sub{vertical-align:sub}
#textBar .tb-format .fa{width:13px;height:13px}
/* Der Stand der Speicherung – eine Auskunft, kein Schalter. Deshalb ohne
   Rahmen und in der ruhigen Farbe: Sie soll ablesbar sein, aber niemanden
   zum Klicken auffordern. */
#textBar .text-stand{
  display:inline-flex;align-items:center;gap:5px;white-space:nowrap;
  font-size:11px;color:hsl(var(--muted-foreground));
}
#textBar .text-stand::before{
  content:"";width:6px;height:6px;border-radius:99px;background:#16a34a;
}
#textBar .text-stand[data-stand="offen"]{color:hsl(var(--foreground))}
#textBar .text-stand[data-stand="offen"]::before{background:#f59e0b}
#textBar .text-stand[data-stand="fehler"]{color:#b91c1c}
#textBar .text-stand[data-stand="fehler"]::before{background:#b91c1c}
@media (max-width:1100px){ #textBar .text-keys{display:none} }

/* Die Zeile für die Adresse des Verweises */
#textLink{
  position:fixed;left:0;top:0;z-index:85;display:flex;align-items:center;gap:6px;
  padding:6px;border-radius:calc(var(--radius) + 2px);
  background:hsl(var(--card));border:1px solid hsl(var(--border));
  box-shadow:var(--shadow-lg);
}
#textLink input{
  width:300px;height:28px;padding:0 9px;font:inherit;font-size:12.5px;
  border:1px solid hsl(var(--input));border-radius:calc(var(--radius) - 2px);
  background:hsl(var(--background));color:hsl(var(--foreground));
}
#textLink input:focus{outline:2px solid hsl(var(--ring));outline-offset:1px}
#textLink #textLinkOk{
  height:28px;padding:0 12px;border:0;border-radius:calc(var(--radius) - 2px);
  background:hsl(var(--primary));color:hsl(var(--primary-foreground));
  font:inherit;font-size:12px;font-weight:500;cursor:pointer;
}
#textLink #textLinkWeg{
  display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;
  border:1px solid hsl(var(--border));border-radius:calc(var(--radius) - 2px);
  background:hsl(var(--card));color:hsl(var(--muted-foreground));cursor:pointer;
}
#textLink #textLinkWeg:hover{color:#b91c1c;border-color:#b91c1c}
#textLink .fa{width:13px;height:13px}

/* ---------- Das Menü hinter den drei Punkten ---------- */
/* Why: Unterstreichen, Durchstreichen, Hoch- und Tiefstellen und eine Farbe
   braucht man selten. Als fünf weitere Knöpfe hätten sie die Leiste doppelt
   so breit gemacht und die häufigen zwei (fett, kursiv) darin versteckt.
   Also: ein Griff, ein Menü – wie in gängigen Editoren. */
#textMehr{
  position:fixed;left:0;top:0;z-index:86;min-width:236px;
  padding:5px;border-radius:calc(var(--radius) + 2px);
  background:hsl(var(--popover, var(--card)));border:1px solid hsl(var(--border));
  box-shadow:var(--shadow-lg);
  font-size:12.5px;color:hsl(var(--foreground));
}
#textMehr .tm-item{
  display:flex;align-items:center;gap:9px;width:100%;
  height:29px;padding:0 8px;cursor:pointer;
  border:0;border-radius:calc(var(--radius) - 2px);background:transparent;
  font:inherit;font-size:12.5px;line-height:1;color:inherit;text-align:left;
}
#textMehr .tm-item:hover{background:hsl(var(--accent))}
#textMehr .tm-item:focus-visible{outline:2px solid hsl(var(--ring));outline-offset:-2px}
#textMehr .tm-item.on{background:hsl(var(--primary));color:hsl(var(--primary-foreground))}
/* Kein Flex-Kasten: hoch- und tiefgestellt saehen darin gleich aus, weil
   vertical-align auf Flex-Kinder nicht wirkt. */
#textMehr .tm-ico{
  display:inline-block;width:17px;flex:0 0 17px;
  font-size:12.5px;line-height:1;text-align:center;white-space:nowrap;
  color:hsl(var(--muted-foreground));
}
#textMehr .tm-item.on .tm-ico{color:inherit}
#textMehr .tm-ico sup,#textMehr .tm-ico sub{font-size:9px}
#textMehr .tm-ico sup{vertical-align:super}
#textMehr .tm-ico sub{vertical-align:sub}
#textMehr .tm-trenner{height:1px;margin:4px 2px;background:hsl(var(--border))}
/* Die Überschrift ist zugleich die Zeile, in der die ganze Auszeichnung
   zurückgenommen wird - rechts, wo sonst nichts steht. */
#textMehr .tm-kopf{
  display:flex;align-items:center;gap:6px;
  padding:3px 4px 4px 8px;font-size:11px;font-weight:500;
  color:hsl(var(--muted-foreground));
}
#textMehr .tm-kopf-weg{
  margin-left:auto;flex:0 0 22px;width:22px;height:22px;padding:0;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  border:0;border-radius:calc(var(--radius) - 2px);background:transparent;
  font-size:10px;color:hsl(var(--muted-foreground));
}
#textMehr .tm-kopf-weg:hover{background:hsl(var(--accent));color:hsl(var(--foreground))}
#textMehr .tm-kopf-weg:focus-visible{outline:2px solid hsl(var(--ring));outline-offset:-2px}
#textMehr .tm-farben{display:flex;align-items:center;gap:5px;padding:0 8px 4px}
#textMehr .tm-farbe{
  width:22px;height:22px;padding:0;cursor:pointer;border-radius:99px;
  border:1px solid hsl(var(--border));background:var(--f,transparent);
}
#textMehr .tm-farbe:hover{outline:2px solid hsl(var(--ring));outline-offset:1px}
#textMehr .tm-farbe.on{outline:2px solid hsl(var(--foreground));outline-offset:1px}

/* ---- Schriftgroesse in Prozent ---- */

#textMehr .tm-stufen{
  display:grid;grid-template-columns:repeat(5,1fr);gap:4px;padding:0 8px 5px;
}
#textMehr .tm-stufe,
#textMehr .tm-zeile{
  height:26px;padding:0 1px;cursor:pointer;
  border:1px solid hsl(var(--border));border-radius:calc(var(--radius) - 2px);
  background:hsl(var(--background));
  font:inherit;font-size:11.5px;line-height:1;color:hsl(var(--foreground));
  font-variant-numeric:tabular-nums;
}
#textMehr .tm-stufe:hover,
#textMehr .tm-zeile:hover{background:hsl(var(--accent))}
#textMehr .tm-stufe:focus-visible,
#textMehr .tm-zeile:focus-visible{outline:2px solid hsl(var(--ring));outline-offset:-2px}
#textMehr .tm-stufe.on,
#textMehr .tm-zeile.on{
  background:hsl(var(--primary));color:hsl(var(--primary-foreground));
  border-color:hsl(var(--primary));
}
#textMehr .tm-eigen{display:flex;align-items:center;gap:5px;padding:0 8px 5px}
#textMehr .tm-eigen input{
  width:88px;height:26px;padding:0 6px;
  border:1px solid hsl(var(--border));border-radius:calc(var(--radius) - 2px);
  background:hsl(var(--background));
  font:inherit;font-size:11.5px;color:hsl(var(--foreground));
}
#textMehr .tm-eigen input:focus{outline:2px solid hsl(var(--ring));outline-offset:-1px}
#textMehr .tm-einheit{font-size:11px;color:hsl(var(--muted-foreground))}
#textMehr .tm-eigen button{
  margin-left:auto;height:26px;padding:0 10px;cursor:pointer;
  border:1px solid hsl(var(--border));border-radius:calc(var(--radius) - 2px);
  background:hsl(var(--background));font:inherit;font-size:11.5px;
  color:hsl(var(--foreground));
}
#textMehr .tm-eigen button:hover{background:hsl(var(--accent))}

/* ---- Eigene Farben ---- */

#textMehr .tm-farbzeile{display:flex;align-items:center;gap:6px;padding:0 8px 5px}
#textMehr .tm-fl{flex:1;font-size:11.5px;color:hsl(var(--muted-foreground))}
#textMehr .tm-fk{flex:0 0 40px;width:40px;height:24px}
#textMehr .tm-weg{
  flex:0 0 24px;width:24px;height:24px;padding:0;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid hsl(var(--border));border-radius:calc(var(--radius) - 2px);
  background:hsl(var(--background));font-size:10px;
  color:hsl(var(--muted-foreground));
}
#textMehr .tm-weg:hover{background:hsl(var(--accent));color:hsl(var(--foreground))}

/* In einem Einzeiler (z. B. einer Zeile einer Ueberschrift) gibt es keine
   Absaetze – dann steht dort auch kein Hinweis darauf. */
#textBar[data-absaetze="nein"] .nur-absatz{display:none}
/* Die Hinweise sind je ein Stueck und duerfen nicht mitten im Wort umbrechen. */
#textBar .text-keys{white-space:nowrap}
#textBar .nur-absatz{display:inline-flex;align-items:center;white-space:nowrap}

/* ---------- Bilder der Website ---------- */
.med-bar{display:flex;align-items:center;gap:6px;padding:8px 12px 0}
.med-upload{
  display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;
  height:28px;padding:0 10px;cursor:pointer;
  border:1px dashed hsl(var(--border));border-radius:calc(var(--radius) - 2px);
  font-size:12px;color:hsl(var(--muted-foreground));background:hsl(var(--card));
}
.med-upload:hover{background:hsl(var(--accent));color:hsl(var(--foreground))}
.med-upload .fa{width:12px;height:12px}
.med-upload input[type="file"]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
#mediaSearch{
  flex:1;min-width:0;height:28px;padding:0 8px;font:inherit;font-size:12px;
  border:1px solid hsl(var(--input));border-radius:calc(var(--radius) - 2px);
  background:hsl(var(--card));color:hsl(var(--foreground));
}
#mediaSearch:focus{outline:2px solid hsl(var(--ring));outline-offset:1px}

#mediaList{
  flex:1;overflow-y:auto;padding:10px 12px 12px;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px;align-content:start;
}
.med-kachel{
  border:1px solid hsl(var(--border));border-radius:calc(var(--radius) - 2px);
  overflow:hidden;cursor:pointer;background:hsl(var(--card));
  display:flex;flex-direction:column;text-align:left;padding:0;font:inherit;
  transition:border-color .12s,box-shadow .12s;
}
.med-kachel:hover{border-color:hsl(var(--ring));box-shadow:var(--shadow-lg)}
.med-bild{
  position:relative;height:72px;display:flex;align-items:center;justify-content:center;
  background:
    linear-gradient(45deg,hsl(var(--muted)) 25%,transparent 25%,transparent 75%,hsl(var(--muted)) 75%) 0 0/14px 14px,
    linear-gradient(45deg,hsl(var(--muted)) 25%,transparent 25%,transparent 75%,hsl(var(--muted)) 75%) 7px 7px/14px 14px,
    hsl(var(--card));
  border-bottom:1px solid hsl(var(--border));
}
.med-bild img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.med-benutzt{
  position:absolute;top:4px;right:4px;
  font-size:9.5px;line-height:1;padding:3px 5px;border-radius:99px;
  background:hsl(var(--primary));color:hsl(var(--primary-foreground));
}
.med-benutzt.nie{background:hsl(var(--muted));color:hsl(var(--muted-foreground))}
/* Platzhalter sollen ins Auge fallen: sie muessen vor dem Livegang weg. */
.med-benutzt.platz{background:#fef3c7;color:#92400e;font-size:9px}
.med-text{padding:6px 7px 7px;min-width:0;display:flex;flex-direction:column;gap:1px}
.med-name{
  display:block;font-size:11.5px;font-weight:500;color:hsl(var(--foreground));
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.med-meta{display:block;font-size:10px;color:hsl(var(--muted-foreground));
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.med-leer{grid-column:1/-1;padding:24px 6px;text-align:center;
  font-size:12px;color:hsl(var(--muted-foreground))}
/* Der Fuehler am Listenende - zugleich die Auskunft, wie viel noch kommt. */
.med-mehr{grid-column:1/-1;padding:14px 6px 6px;text-align:center;
  font-size:11px;color:hsl(var(--muted-foreground))}

/* ---------- Dateien der Website ----------
   Eine Datei hat keine Vorschau. Eine Kachel mit grauem Feld waere leerer
   Platz; deshalb hier Zeilen: Symbol, Name, Groesse, Verwendung. */
#mediaList.dateiliste{grid-template-columns:1fr;gap:6px}
.med-huelle.datei .med-weg{top:50%;left:auto;right:6px;transform:translateY(-50%)}
.med-datei{
  display:flex;align-items:center;gap:9px;width:100%;padding:8px 36px 8px 10px;
  border:1px solid hsl(var(--border));border-radius:calc(var(--radius) - 2px);
  background:hsl(var(--card));cursor:pointer;text-align:left;font:inherit;
  transition:border-color .12s,box-shadow .12s;
}
.med-datei:hover{border-color:hsl(var(--ring));box-shadow:var(--shadow-lg)}
.med-dico{flex:0 0 auto;display:flex;color:hsl(var(--muted-foreground))}
.med-dico .fa{width:15px;height:15px}
.med-datei .med-text{flex:1;min-width:0;padding:0}
.med-marke{
  flex:0 0 auto;font-size:9.5px;line-height:1;padding:3px 6px;border-radius:99px;
  background:hsl(var(--primary));color:hsl(var(--primary-foreground));
}
.med-marke.nie{background:hsl(var(--muted));color:hsl(var(--muted-foreground))}

/* Ablegen vom Schreibtisch */
#mediaPanel.abwurf{outline:2px dashed hsl(var(--ring));outline-offset:-4px}

/* Bilddatei: vorhandenes waehlen oder neues hochladen */
.insp-bildwahl{display:flex;gap:4px;margin-top:2px}
/* Die Knoepfe teilen sich den Platz nach Beschriftung, nicht zu gleichen Teilen -
   sonst wird „Aus der Website“ abgeschnitten, waehrend „Hochladen“ Luft hat. */
.insp-bildwahl>*{flex:1 1 auto;min-width:0;margin-top:0}
.insp-bildwahl>.insp-ordner,.insp-bildwahl>.insp-file{width:auto}
.insp-ordner{
  display:flex;align-items:center;justify-content:center;gap:6px;
  width:100%;height:28px;cursor:pointer;
  border:1px dashed hsl(var(--border));border-radius:calc(var(--radius) - 3px);
  font:inherit;font-size:11.5px;color:hsl(var(--muted-foreground));background:hsl(var(--card));
  white-space:nowrap;overflow:hidden;
}
.insp-ordner:hover{background:hsl(var(--accent));color:hsl(var(--foreground))}
.insp-ordner .fa{width:12px;height:12px;flex:0 0 auto}

/* Verweis: wohin er zeigt, und ob die Datei geladen oder geoeffnet wird */
.insp-ziel{
  display:block;margin:2px 0 6px;font-size:11px;line-height:1.4;
  color:hsl(var(--muted-foreground));overflow-wrap:anywhere;
}
.insp-ziel b{font-weight:600;color:hsl(var(--foreground))}
.insp-dl{
  display:flex;align-items:center;gap:7px;margin-top:8px;
  font-size:11.5px;color:hsl(var(--muted-foreground));cursor:pointer;
}
.insp-dl input[type="checkbox"]{
  appearance:none;-webkit-appearance:none;flex:0 0 auto;width:14px;height:14px;margin:0;
  border:1px solid hsl(var(--input));border-radius:3px;background:hsl(var(--card));cursor:pointer;
}
.insp-dl input[type="checkbox"]:checked{
  background:hsl(var(--primary));border-color:hsl(var(--primary));
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E");
  background-size:11px 11px;background-position:center;background-repeat:no-repeat;
}
.insp-dl input[type="checkbox"]:focus-visible{outline:2px solid hsl(var(--ring));outline-offset:1px}

/* ---------- Ebenen an der Klickstelle ---------- */
.insp-ebenen{border-bottom:1px solid hsl(var(--border));font-size:11.5px}
.insp-ebenen summary{
  display:flex;align-items:center;gap:6px;padding:6px 10px;cursor:pointer;
  color:hsl(var(--muted-foreground));list-style:none;
}
.insp-ebenen summary::-webkit-details-marker{display:none}
.insp-ebenen summary:hover{color:hsl(var(--foreground))}
.insp-ebenen .ee-ico .fa{width:12px;height:12px;display:block}
#inspEbenenListe{max-height:168px;overflow-y:auto;padding:0 6px 6px}
.ee-zeile{
  display:flex;align-items:center;gap:6px;width:100%;padding:4px 6px;
  border:1px solid transparent;border-radius:calc(var(--radius) - 4px);
  background:none;font:inherit;font-size:11px;color:hsl(var(--foreground));
  cursor:pointer;text-align:left;
}
.ee-zeile:hover{background:hsl(var(--accent))}
.ee-zeile.on{border-color:hsl(var(--ring));background:hsl(var(--accent))}
.ee-tiefe{flex:0 0 auto;color:hsl(var(--muted-foreground));font-variant-numeric:tabular-nums}
.ee-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ee-marken{flex:0 0 auto;display:flex;gap:3px}
.ee-marke{
  font-size:9px;line-height:1;padding:2px 4px;border-radius:3px;
  background:hsl(var(--muted));color:hsl(var(--muted-foreground));
}
.ee-marke.bild{background:rgba(13,148,136,.16);color:#0f766e}
.ee-marke.verlauf{background:rgba(124,58,237,.16);color:#6d28d9}
.ee-mass{flex:0 0 auto;color:hsl(var(--muted-foreground));font-size:10px;
  font-variant-numeric:tabular-nums}

/* ---------- Hintergrund: Lagen, Verlauf ---------- */
.insp-bg > summary{display:flex;align-items:center}
.insp-bg > summary .insp-tools{margin-left:auto;display:flex;gap:2px}
.bg-lagen{display:flex;flex-direction:column;gap:6px;margin:2px 0 6px}
.bg-leer{margin:2px 0;font-size:11px;color:hsl(var(--muted-foreground));font-style:italic}
.bg-lage{
  border:1px solid hsl(var(--border));border-radius:calc(var(--radius) - 3px);
  padding:5px 6px;background:hsl(var(--card));
  display:flex;align-items:center;gap:6px;
}
.bg-lage.verlauf{display:block}
.bg-vorschau{
  flex:0 0 auto;width:34px;height:24px;border-radius:3px;
  border:1px solid hsl(var(--border));background-size:cover;background-position:center;
}
.bg-name{flex:1;min-width:0;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bg-akt{flex:0 0 auto;display:flex;gap:2px;align-items:center}
.bg-akt button,.bg-up{
  display:flex;align-items:center;justify-content:center;
  width:24px;height:24px;padding:0;cursor:pointer;
  border:1px solid transparent;border-radius:4px;background:none;
  color:hsl(var(--muted-foreground));
}
.bg-akt button:hover,.bg-up:hover{background:hsl(var(--accent));color:hsl(var(--foreground))}
.bg-akt .fa,.bg-up .fa{width:12px;height:12px}
.bg-up input[type="file"]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}

.bg-kopf{display:flex;align-items:center;gap:6px}
.bg-kopf select{
  flex:0 0 auto;height:24px;font:inherit;font-size:11px;
  border:1px solid hsl(var(--input));border-radius:4px;
  background:hsl(var(--card));color:hsl(var(--foreground));
}
.bg-kopf input[type="range"]{flex:1;min-width:0}
.bg-kopf input[type="number"]{
  flex:0 0 52px;height:24px;font:inherit;font-size:11px;text-align:right;
  border:1px solid hsl(var(--input));border-radius:4px;padding:0 4px;
  background:hsl(var(--card));color:hsl(var(--foreground));
}
.bg-kopf button{
  flex:0 0 auto;width:24px;height:24px;padding:0;cursor:pointer;
  border:1px solid transparent;border-radius:4px;background:none;
  color:hsl(var(--muted-foreground));display:flex;align-items:center;justify-content:center;
}
.bg-kopf button:hover{background:hsl(var(--accent));color:hsl(var(--foreground))}
.bg-kopf .fa{width:12px;height:12px}
.bg-grad{flex:0 0 auto;font-size:10px;color:hsl(var(--muted-foreground))}
.bg-grad.weit{flex:1;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.bg-balken{
  height:20px;margin:6px 0;border-radius:4px;border:1px solid hsl(var(--border));
  background-color:#fff;
  background-image:
    linear-gradient(45deg,hsl(var(--muted)) 25%,transparent 25%,transparent 75%,hsl(var(--muted)) 75%),
    linear-gradient(45deg,hsl(var(--muted)) 25%,transparent 25%,transparent 75%,hsl(var(--muted)) 75%);
}
.bg-stops{display:flex;flex-direction:column;gap:4px}
.bg-stop{display:flex;align-items:center;gap:5px}
.bg-stop input[type="color"]{
  flex:0 0 26px;width:26px;height:22px;padding:0;cursor:pointer;
  border:1px solid hsl(var(--input));border-radius:4px;background:none;
}
.bg-stop input[type="range"]{flex:1;min-width:0;height:22px}
.bg-stop input[type="text"]{
  flex:0 0 62px;height:22px;font:inherit;font-size:11px;padding:0 5px;
  border:1px solid hsl(var(--input));border-radius:4px;
  background:hsl(var(--card));color:hsl(var(--foreground));
}
.bg-stop button{
  flex:0 0 auto;width:20px;height:20px;padding:0;cursor:pointer;
  border:none;border-radius:4px;background:none;color:hsl(var(--muted-foreground));
  display:flex;align-items:center;justify-content:center;
}
.bg-stop button:hover{background:hsl(var(--accent));color:hsl(var(--foreground))}
.bg-stop .fa{width:10px;height:10px}
.bg-mehr{
  margin-top:5px;width:100%;height:22px;cursor:pointer;font:inherit;font-size:10.5px;
  border:1px dashed hsl(var(--border));border-radius:4px;
  background:none;color:hsl(var(--muted-foreground));
}
.bg-mehr:hover{background:hsl(var(--accent));color:hsl(var(--foreground))}

.bg-neu{display:flex;gap:6px;margin-bottom:6px}
.bg-neu button{
  flex:1;display:flex;align-items:center;justify-content:center;gap:5px;
  height:26px;cursor:pointer;font:inherit;font-size:11px;
  border:1px dashed hsl(var(--border));border-radius:calc(var(--radius) - 3px);
  background:hsl(var(--card));color:hsl(var(--muted-foreground));
}
.bg-neu button:hover{background:hsl(var(--accent));color:hsl(var(--foreground))}
.bg-neu .fa{width:11px;height:11px}

/* ---------- Vier Seiten: oben, rechts, unten, links ---------- */
.insp-vier{display:flex;gap:3px;flex:1;min-width:0}
/* Seit „auto“ moeglich ist, sind das Textfelder - die Regel darf nicht mehr
   an type="number" haengen, sonst stehen sie ungestaltet da. */
.insp-ctl .insp-vier input,
.insp-vier input{
  flex:1 1 0;min-width:0;width:100%;height:26px;padding:0 2px;
  font:inherit;font-size:11px;text-align:center;
  border:1px solid hsl(var(--input));border-radius:calc(var(--radius) - 4px);
  background:hsl(var(--card));color:hsl(var(--foreground));
  -moz-appearance:textfield;
}
.insp-vier input[type="number"]::-webkit-outer-spin-button,
.insp-vier input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0;
}
.insp-ctl .insp-vier input:focus,
.insp-vier input:focus{outline:2px solid hsl(var(--ring));outline-offset:1px}
.insp-vier input::placeholder{color:hsl(var(--muted-foreground));opacity:.55}

/* Welches Feld fuer welche Seite gilt, zeigt die dunklere Kante. Gezeichnet
   als Innenschatten, nicht als dickerer Rahmen – so bleibt die Hoehe gleich
   und die Felder springen beim Tippen nicht. */
.insp-vier input[data-seite="top"]{box-shadow:inset 0 2px 0 0 hsl(var(--foreground) / .72)}
.insp-vier input[data-seite="right"]{box-shadow:inset -2px 0 0 0 hsl(var(--foreground) / .72)}
.insp-vier input[data-seite="bottom"]{box-shadow:inset 0 -2px 0 0 hsl(var(--foreground) / .72)}
.insp-vier input[data-seite="left"]{box-shadow:inset 2px 0 0 0 hsl(var(--foreground) / .72)}

/* Der Rahmen braucht zwei Zeilen: Staerken oben, Art und Farbe darunter. */
.insp-row.breit .insp-ctl{flex-wrap:wrap;row-gap:4px}
.insp-vierzeile{display:flex;align-items:center;gap:5px;flex:1 1 100%;min-width:0}
.insp-row.breit select{
  flex:1 1 0;min-width:0;height:26px;font:inherit;font-size:11px;
  border:1px solid hsl(var(--input));border-radius:calc(var(--radius) - 4px);
  background:hsl(var(--card));color:hsl(var(--foreground));
}
.insp-row.breit input[type="color"]{
  flex:0 0 30px;width:30px;height:26px;padding:0;cursor:pointer;
  border:1px solid hsl(var(--input));border-radius:calc(var(--radius) - 4px);
  background:none;
}

/* ---------- Farbwähler ---------- */
/* Das Schachbrett zeigt, wo eine Farbe durchscheint. */
.ki-schach{
  background-color:#fff;
  background-image:
    linear-gradient(45deg,#d4d4d8 25%,transparent 25%,transparent 75%,#d4d4d8 75%),
    linear-gradient(45deg,#d4d4d8 25%,transparent 25%,transparent 75%,#d4d4d8 75%);
  background-size:10px 10px;background-position:0 0,5px 5px;
}
.farb-knopf{
  flex:0 0 30px;width:30px;height:26px;padding:0;cursor:pointer;position:relative;
  border:1px solid hsl(var(--input));border-radius:calc(var(--radius) - 4px);
  background-color:#fff;
  background-image:
    linear-gradient(45deg,#d4d4d8 25%,transparent 25%,transparent 75%,#d4d4d8 75%),
    linear-gradient(45deg,#d4d4d8 25%,transparent 25%,transparent 75%,#d4d4d8 75%);
  background-size:8px 8px;background-position:0 0,4px 4px;overflow:hidden;
}
.farb-knopf::after{
  content:'';position:absolute;inset:0;background:var(--farbe,transparent);
}
.farb-knopf:hover{border-color:hsl(var(--ring))}
.bg-stop .farb-knopf{flex:0 0 26px;width:26px;height:22px}

/* Ganz nach oben: Die Farbwahl wird auch aus dem Textmenue (86) und aus der
   Zuschnitt-Ansicht (88) heraus geoeffnet - darunter waere sie unsichtbar. */
.farbwahl{
  position:fixed;z-index:92;width:246px;
  background:hsl(var(--card));border:1px solid hsl(var(--border));
  border-radius:calc(var(--radius) + 2px);box-shadow:var(--shadow-lg);
  overflow:hidden;user-select:none;
}
.fw-feld{
  position:relative;height:148px;cursor:crosshair;touch-action:none;
}
.fw-zeiger{
  position:absolute;width:13px;height:13px;margin:-7px 0 0 -7px;border-radius:50%;
  border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.35),0 1px 3px rgba(0,0,0,.3);
  pointer-events:none;
}
.fw-regler{display:flex;align-items:center;gap:9px;padding:10px 10px 6px}
.fw-probe-gross{
  position:relative;overflow:hidden;
  flex:0 0 30px;width:30px;height:30px;border-radius:50%;
  border:1px solid hsl(var(--border));
  background-color:#fff;
  background-image:
    linear-gradient(45deg,#d4d4d8 25%,transparent 25%,transparent 75%,#d4d4d8 75%),
    linear-gradient(45deg,#d4d4d8 25%,transparent 25%,transparent 75%,#d4d4d8 75%);
  background-size:8px 8px;background-position:0 0,4px 4px;
}
.fw-balken{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.fw-ton,.fw-alpha{position:relative;height:11px;border-radius:99px;cursor:pointer;touch-action:none}
.fw-ton{
  background:linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00);
}
.fw-alpha{
  background-color:#fff;
  background-image:
    linear-gradient(45deg,#d4d4d8 25%,transparent 25%,transparent 75%,#d4d4d8 75%),
    linear-gradient(45deg,#d4d4d8 25%,transparent 25%,transparent 75%,#d4d4d8 75%);
  background-size:8px 8px;background-position:0 0,4px 4px;
}
.fw-ton .fw-zeiger,.fw-alpha .fw-zeiger{top:50%;margin-top:-7px}
/* Der Farbverlauf des Transparenz-Reglers liegt ueber dem Schachbrett.
   Als eigene Ebene im background-image des Reglers wuerde ihn die dort
   noetige background-size von 8 Pixeln in Kacheln zerlegen. */
.fw-alpha::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background-image:linear-gradient(to right,var(--fw-a0,transparent),var(--fw-a1,#000));
}
.fw-alpha .fw-zeiger{z-index:1}
.fw-probe-gross::after{
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:var(--farbe,transparent);
}

.fw-fuss{display:flex;align-items:center;gap:5px;padding:0 10px 8px}
.fw-fuss select{
  flex:0 0 auto;height:26px;font:inherit;font-size:11px;
  border:1px solid hsl(var(--input));border-radius:calc(var(--radius) - 4px);
  background:hsl(var(--card));color:hsl(var(--foreground));
}
.fw-fuss input[type="text"]{
  flex:1;min-width:0;height:26px;padding:0 6px;font:inherit;font-size:11.5px;
  border:1px solid hsl(var(--input));border-radius:calc(var(--radius) - 4px);
  background:hsl(var(--card));color:hsl(var(--foreground));
  font-variant-numeric:tabular-nums;
}
.fw-fuss button{
  flex:0 0 auto;width:26px;height:26px;padding:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  border:1px solid hsl(var(--border));border-radius:calc(var(--radius) - 4px);
  background:hsl(var(--card));color:hsl(var(--muted-foreground));
}
.fw-fuss button:hover{background:hsl(var(--accent));color:hsl(var(--foreground))}
.fw-fuss .fa{width:12px;height:12px}

.fw-palette{
  display:flex;flex-wrap:wrap;gap:5px;padding:8px 10px 10px;
  border-top:1px solid hsl(var(--border));
}
.fw-leer{margin:0;font-size:11px;font-style:italic;color:hsl(var(--muted-foreground))}
.fw-probe{
  width:20px;height:20px;padding:0;cursor:pointer;overflow:hidden;
  border:1px solid hsl(var(--border));border-radius:50%;
  background-color:#fff;
  background-image:
    linear-gradient(45deg,#d4d4d8 25%,transparent 25%,transparent 75%,#d4d4d8 75%),
    linear-gradient(45deg,#d4d4d8 25%,transparent 25%,transparent 75%,#d4d4d8 75%);
  background-size:7px 7px;background-position:0 0,3.5px 3.5px;
}
.fw-probe span{display:block;width:100%;height:100%}
.fw-probe:hover{border-color:hsl(var(--ring));transform:scale(1.1)}

/* ---------- Verlauf: Griffe auf der Leiste ---------- */
.vl-bar{
  /* Links und rechts etwas Luft: die Griffe an 0 % und 100 % ragen ueber die
     Leiste hinaus und wuerden sonst am Rand des Fensters abgeschnitten. */
  position:relative;height:26px;margin:8px 9px 14px;cursor:copy;
  border:1px solid hsl(var(--border));border-radius:calc(var(--radius) - 3px);
  background-size:10px 10px;background-position:0 0,5px 5px;
}
.vl-farbe{position:absolute;inset:0;border-radius:inherit;pointer-events:none}
.vl-griff{
  position:absolute;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;padding:0;
  border-radius:50%;cursor:grab;overflow:hidden;
  border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.4),0 1px 4px rgba(0,0,0,.35);
  background-color:#fff;
  background-image:
    linear-gradient(45deg,#d4d4d8 25%,transparent 25%,transparent 75%,#d4d4d8 75%),
    linear-gradient(45deg,#d4d4d8 25%,transparent 25%,transparent 75%,#d4d4d8 75%);
  background-size:6px 6px;background-position:0 0,3px 3px;
}
.vl-griff::after{content:'';position:absolute;inset:0;background:var(--farbe,transparent)}
.vl-griff:active{cursor:grabbing}
.vl-griff.on{box-shadow:0 0 0 2px hsl(var(--ring)),0 1px 4px rgba(0,0,0,.35);z-index:2}

.vl-hinweis{
  margin:0 0 2px;font-size:10.5px;line-height:1.45;font-style:italic;
  color:hsl(var(--muted-foreground));
}
.vl-fuss{display:flex;align-items:center;gap:6px}
.vl-nr{flex:0 0 auto;font-size:11px;color:hsl(var(--muted-foreground))}
.vl-fuss input[type="number"]{
  flex:1;min-width:0;height:24px;padding:0 5px;font:inherit;font-size:11px;text-align:right;
  border:1px solid hsl(var(--input));border-radius:calc(var(--radius) - 4px);
  background:hsl(var(--card));color:hsl(var(--foreground));
}
.vl-proz{flex:0 0 auto;font-size:10px;color:hsl(var(--muted-foreground))}
.vl-fuss button:not(.farb-knopf){
  flex:0 0 auto;width:24px;height:24px;padding:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  border:1px solid transparent;border-radius:4px;background:none;
  color:hsl(var(--muted-foreground));
}
.vl-fuss button:not(.farb-knopf):hover{background:hsl(var(--accent));color:hsl(var(--foreground))}
.vl-fuss .fa{width:12px;height:12px}
.vl-fuss .farb-knopf{flex:0 0 26px;width:26px;height:24px}

.bg-vl-titel{
  margin:8px 0 5px;font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  color:hsl(var(--muted-foreground));
}
.bg-vl-liste{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}
.vl-probe{
  width:34px;height:22px;padding:0;cursor:pointer;
  border:1px solid hsl(var(--border));border-radius:calc(var(--radius) - 4px);
  background-color:#fff;background-size:cover;
}
.vl-probe:hover{border-color:hsl(var(--ring))}

/* -------------------------------------------------- Abgeschaltete Funktionen
 * Was ein Zugang nicht darf, erscheint erst gar nicht. Die Sperre steht
 * zusaetzlich am Server – hier geht es nur darum, keine Knoepfe anzubieten,
 * die ins Leere fuehren. Als Merkmal am <body>, damit es auch fuer erst
 * spaeter erzeugte Elemente (Seitenbaum) gilt.
 */
body[data-aus~="prompt"] #composer,
body[data-aus~="prompt"] #chat,
body[data-aus~="prompt"] #chatToggle,
body[data-aus~="inspektor"] #pickBtn,
body[data-aus~="inspektor"] #sectionBtn,
body[data-aus~="inspektor"] #headingBtn,
body[data-aus~="inspektor"] #inspector,
body[data-aus~="text"] #textBtn,
body[data-aus~="bilder"] #mediaBtn,
body[data-aus~="bilder"] #attachBtn,
body[data-aus~="bausteine"] #templateBtn,
body[data-aus~="bausteine"] #copyBtn,
body[data-aus~="bausteine"] #pasteBtn,
body[data-aus~="stile"] #stilBtn,
body[data-aus~="baum"] #treeBtn,
body[data-aus~="seiten"] #treeNew,
body[data-aus~="seiten"] .tree-dup,
body[data-aus~="seiten"] .tree-seitweg,
body[data-aus~="figma"] #figmaBtn,
body[data-aus~="versionen"] #versionBtn,
body[data-aus~="versionen"] #vpLos,
body[data-aus~="versionen"] #verPublish,
body[data-aus~="historie"] #historyBtn,
body[data-aus~="historie"] #undoBtn,
body[data-aus~="historie"] #resetBtn{display:none!important}


/* --------------------------------------------------- KI-Kosten im Konto */
.user-verbrauch{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  padding:9px 12px;margin:0 10px 2px;border-radius:var(--radius);
  background:hsl(var(--muted));
}
.user-verbrauch .uv-ico{display:flex;color:hsl(var(--muted-foreground))}
.user-verbrauch .uv-ico .fa{width:14px;height:14px}
.user-verbrauch .uv-text{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0}
.user-verbrauch b{font-size:12.5px;font-weight:600}
.user-verbrauch i{font-style:normal;font-size:11px;color:hsl(var(--muted-foreground))}
.uv-bar{flex:0 0 100%;height:4px;border-radius:99px;background:hsl(var(--border));overflow:hidden}
.uv-bar i{display:block;height:100%;background:hsl(var(--primary));border-radius:99px}
.uv-bar[data-stand="knapp"] i{background:hsl(26 84% 48%)}
.uv-bar[data-stand="voll"] i{background:hsl(0 72% 48%)}

/* ------------------------------------------------------- Baustein-Auswahl
 * Die Wireframes sollen sich anfühlen wie Skizzen auf Papier: viel Weiß,
 * eine ruhige Umrandung, kein Schatten. Was zählt, ist der Aufbau.
 */
.reiter{display:flex;gap:2px;padding:0 12px;
  border-bottom:1px solid hsl(var(--border));flex:0 0 auto}
.reiter button{border:0;background:none;font:inherit;font-size:12.5px;color:inherit;
  cursor:pointer;padding:9px 12px;opacity:.55;border-bottom:2px solid transparent;margin-bottom:-1px}
.reiter button:hover{opacity:.8}
.reiter button.on{opacity:1;font-weight:600;border-bottom-color:hsl(var(--primary))}
.reiter button:focus-visible{outline:2px solid hsl(var(--ring));outline-offset:-2px}

#tplWire,#tplFunk{overflow-y:auto;flex:1;min-height:0}
.wf-hinweis{margin:12px 14px 4px;line-height:1.45}
.wf-hinweis.warnung{color:hsl(26 84% 34%)}

.wf-gruppe{padding:6px 14px 4px}
.wf-gruppe h4{margin:12px 0 8px;font-size:11px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:hsl(var(--muted-foreground))}
.wf-raster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.wf-karte{display:flex;flex-direction:column;padding:0;cursor:pointer;text-align:left;
  background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--radius);
  overflow:hidden;font:inherit;color:inherit;transition:border-color .15s,box-shadow .15s}
.wf-karte:hover{border-color:hsl(var(--primary));box-shadow:var(--shadow)}
.wf-karte:focus-visible{outline:2px solid hsl(var(--ring));outline-offset:1px}
.wf-karte[disabled]{opacity:.5;cursor:progress}
/* Alle Skizzen bekommen denselben Kasten und werden hineingerechnet – sonst
   stehen die Namen in jeder Zeile auf einer anderen Höhe. */
.wf-bild{flex:1 1 auto;display:flex;align-items:center;justify-content:center;
  height:104px;padding:6px;background:#fff;border-bottom:1px solid hsl(var(--border))}
.wf-bild svg{display:block;max-width:100%;max-height:100%;width:auto;height:auto}
.wf-name{display:block;flex:0 0 auto;padding:7px 9px;font-size:11.5px;line-height:1.3;font-weight:500}

@media (max-width:420px){.wf-raster{grid-template-columns:1fr}}

/* ------------------------------------------------------ Vorschau teilen */

/* Der Knopf sitzt weit rechts in der Leiste - ein mittig ausgerichtetes
   Fenster liefe dort ueber den Fensterrand hinaus. Deshalb rechtsbuendig. */
.pop.pop-wide{
  width:320px;max-width:calc(100vw - 24px);padding:10px;
  left:auto;right:0;transform:none;
}
.pop-text{margin:0 0 8px;font-size:12px;line-height:1.5;color:hsl(var(--muted-foreground))}
.pop-fuss{margin:8px 0 0;font-size:11px;color:hsl(var(--muted-foreground))}
.share-url{
  width:100%;box-sizing:border-box;margin:0 0 8px;
  font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;
  padding:7px 8px;border:1px solid hsl(var(--border));
  border-radius:calc(var(--radius) - 2px);
  background:hsl(var(--muted));color:hsl(var(--foreground));
}
.share-btns{display:grid;gap:2px}
.share-btns .pop-item .fa{opacity:1}
.pop-item.danger{color:#b91c1c}
.pop-item.danger .fa{color:#b91c1c}

/* -------------------------------------------- Ausgeblendete Elemente */
.aus-row{
  display:flex;align-items:center;gap:8px;padding:8px 10px;
  border-bottom:1px solid hsl(var(--border));cursor:default;
}
.aus-row:last-child{border-bottom:0}
.aus-row:hover,.aus-row.zeigt{background:hsl(var(--accent))}
.aus-tag{
  flex:0 0 auto;min-width:40px;text-align:center;padding:2px 6px;
  border:1px solid hsl(var(--border));border-radius:calc(var(--radius) - 3px);
  font:500 10px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;
  color:hsl(var(--muted-foreground));background:hsl(var(--muted));
}
.aus-txt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px}
.aus-name{font-size:13px;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aus-ort{font-size:11px;color:hsl(var(--muted-foreground));
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aus-ein,.aus-weg{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border:1px solid transparent;
  border-radius:calc(var(--radius) - 2px);background:transparent;cursor:pointer;
  color:hsl(var(--muted-foreground));
}
.aus-ein:hover{background:hsl(var(--card));border-color:hsl(var(--border));color:hsl(var(--foreground))}
.aus-weg:hover{background:hsl(var(--card));border-color:hsl(var(--border));color:#b91c1c}
.aus-ein .fa,.aus-weg .fa{width:14px;height:14px;opacity:1}
#ausPanel .tpl-hint code{
  font:11px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;
  background:hsl(var(--muted));padding:1px 4px;border-radius:3px;
}

/* ------------------------------- Titel und Beschreibung im Seitenbaum */
.tree-seo{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border:1px solid transparent;
  border-radius:calc(var(--radius) - 3px);background:transparent;cursor:pointer;
  color:hsl(var(--muted-foreground));
}
.tree-seo:hover{background:hsl(var(--card));border-color:hsl(var(--border));color:hsl(var(--foreground))}
.tree-seo.an{background:hsl(var(--primary));border-color:hsl(var(--primary));color:hsl(var(--primary-foreground))}
.tree-seo .fa{width:13px;height:13px;opacity:1}

.tree-meta{
  display:grid;gap:4px;margin:2px 0 8px;padding:10px 12px;
  border:1px solid hsl(var(--border));border-radius:var(--radius);
  background:hsl(var(--muted));
}
.tm-lab{display:grid;gap:4px;font-size:11px;color:hsl(var(--muted-foreground))}
.tm-lab input,.tm-lab textarea{
  width:100%;box-sizing:border-box;padding:7px 8px;
  border:1px solid hsl(var(--border));border-radius:calc(var(--radius) - 2px);
  background:hsl(var(--card));color:hsl(var(--foreground));
  font:13px/1.45 inherit;resize:vertical;
}
.tm-lab input:focus,.tm-lab textarea:focus{outline:2px solid hsl(var(--ring));outline-offset:-1px}
.tm-zahl{font-size:11px;color:hsl(var(--muted-foreground));margin:-2px 0 4px}
.tm-zahl.gut{color:#15803d}
.tm-zahl.lang{color:#b45309}
.tm-fuss{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:2px}
.tm-msg{flex:1 1 auto;font-size:11px;color:hsl(var(--muted-foreground))}
.tm-msg.gut{color:#15803d}
.tm-msg.fehler{color:#b91c1c}
.tm-save{
  padding:6px 12px;border:1px solid hsl(var(--primary));border-radius:calc(var(--radius) - 2px);
  background:hsl(var(--primary));color:hsl(var(--primary-foreground));
  font:500 12px/1 inherit;cursor:pointer;
}
.tm-save:disabled{opacity:.6;cursor:default}

/* ----------------------------------------------- Anhänge und Ablegen */

#ablegeFlaeche{
  position:absolute;inset:-6px;z-index:60;display:none;
  flex-direction:column;align-items:center;justify-content:center;gap:2px;
  border:2px dashed hsl(var(--primary));border-radius:var(--radius);
  background:hsl(var(--card));color:hsl(var(--foreground));
  pointer-events:none;text-align:center;
}
#composer.zieht #ablegeFlaeche{display:flex}
#ablegeFlaeche .fa{width:18px;height:18px;color:hsl(var(--primary))}
#ablegeFlaeche strong{font-size:13px}
.ab-klein{font-size:11px;color:hsl(var(--muted-foreground))}

.att.att-dok{
  display:flex;align-items:center;gap:8px;width:auto;max-width:260px;height:auto;
  padding:6px 8px;border:1px solid hsl(var(--border));border-radius:var(--radius);
  background:hsl(var(--card));
}
.att-dok .dok-ico{flex:0 0 auto;display:inline-flex;color:hsl(var(--muted-foreground))}
.att-dok .dok-ico .fa{width:16px;height:16px;opacity:1}
.att-dok .dok-txt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.att-dok .dok-name{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.att-dok .dok-gr{font-size:10px;color:hsl(var(--muted-foreground))}
.att-dok button{
  position:static;flex:0 0 auto;width:20px;height:20px;border:0;background:transparent;
  color:hsl(var(--muted-foreground));cursor:pointer;border-radius:4px;
}
.att-dok button:hover{background:hsl(var(--accent));color:hsl(var(--foreground))}
.att-dok button .fa{width:11px;height:11px;opacity:1}

/* ------------------------------------------- Bild löschen im Bildmanager */

/* Die Hülle ist das Rasterfeld; der Papierkorb liegt darüber statt darin -
   eine Schaltfläche in einer Schaltfläche wäre ungültiges Markup. */
.med-huelle{position:relative;display:block}
.med-huelle .med-kachel{width:100%}
.med-weg{
  position:absolute;top:4px;left:4px;z-index:2;
  display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;padding:0;border:1px solid hsl(var(--border));
  border-radius:calc(var(--radius) - 3px);
  background:hsl(var(--card));color:hsl(var(--muted-foreground));
  cursor:pointer;opacity:0;transition:opacity .12s,color .12s,border-color .12s;
}
.med-huelle:hover .med-weg,.med-weg:focus-visible{opacity:1}
.med-weg:hover{color:#b91c1c;border-color:#b91c1c}
.med-weg .fa{width:12px;height:12px;opacity:1}

/* Zuschneiden sitzt neben dem Löschen, in derselben Ecke - beides gehört zum
   Umgang mit der Datei und nicht zum Einsetzen. */
.med-schnitt{
  position:absolute;top:4px;left:32px;z-index:2;
  display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;padding:0;border:1px solid hsl(var(--border));
  border-radius:calc(var(--radius) - 3px);
  background:hsl(var(--card));color:hsl(var(--muted-foreground));
  cursor:pointer;opacity:0;transition:opacity .12s,color .12s,border-color .12s;
}
.med-huelle:hover .med-schnitt,.med-schnitt:focus-visible{opacity:1}
.med-schnitt:hover{color:hsl(var(--foreground));border-color:hsl(var(--ring))}
.med-schnitt .fa{width:12px;height:12px;opacity:1}

/* Auf Geräten ohne Mauszeiger gibt es kein Schweben - dort dauerhaft zeigen. */
@media (hover:none){ .med-weg,.med-schnitt{opacity:1} }

/* Ungenutzte Bilder aufräumen */
.med-putz{
  flex:0 0 auto;padding:6px 10px;border:1px solid hsl(var(--border));
  border-radius:calc(var(--radius) - 2px);background:hsl(var(--card));
  color:hsl(var(--muted-foreground));font:500 12px/1 inherit;cursor:pointer;white-space:nowrap;
}
.med-putz:hover{color:#b91c1c;border-color:#b91c1c}
.med-putz:disabled{opacity:.5;cursor:default}

/* ============================================ Die Pille am Element

   Alles, was ein Element als Ganzes betrifft, schwebt direkt daran: wer
   umstellt, schaut auf das Element, nicht auf die Prompt-Leiste. Gestellt
   wird sie vom Editor und liegt ueber dem Vorschau-Rahmen - in der Seite
   selbst haette sie mit deren CSS zu kaempfen. */
#elementPille{
  position:fixed;z-index:80;display:inline-flex;align-items:center;gap:1px;
  padding:3px 5px;
  background:hsl(var(--card));border:1px solid hsl(263 40% 82%);
  border-radius:99px;box-shadow:0 6px 18px -6px rgba(24,10,60,.35),0 0 0 1px rgba(255,255,255,.7);
  color:hsl(263 45% 40%);font-size:11.5px;line-height:1;white-space:nowrap;
}
/* Sitzt sie im Element statt darueber, tritt sie etwas zurueck, damit sie
   den Inhalt nicht erschlaegt - beim Darueberfahren steht sie wieder voll da. */
#elementPille.innen{opacity:.82}
#elementPille.innen:hover{opacity:1}
.ep-name{
  padding:0 6px 0 2px;font-weight:500;letter-spacing:.01em;
  max-width:130px;overflow:hidden;text-overflow:ellipsis;
}
.ep-btn{
  display:flex;align-items:center;justify-content:center;
  width:22px;height:22px;padding:0;border:0;border-radius:99px;
  background:transparent;color:inherit;cursor:pointer;
}
.ep-btn:hover:not(:disabled){background:hsl(263 70% 93%)}
.ep-btn:disabled{opacity:.3;cursor:default}
.ep-btn .fa{width:11px;height:11px}
.ep-btn.up .fa{transform:rotate(180deg)}
.ep-btn:focus-visible{outline:2px solid hsl(var(--ring));outline-offset:1px}
.ep-trenner{width:1px;align-self:stretch;margin:2px 3px;background:hsl(263 40% 86%)}
.ep-btn.griff{cursor:grab}
.ep-btn.griff:active{cursor:grabbing}
body.schiebt{cursor:grabbing}

/* ---------- Einfügeposition, jetzt bei Vorlagen und Bausteinen ---------- */
.tpl-wohin{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:8px 12px;border-bottom:1px solid hsl(var(--border));
  font-size:11.5px;color:hsl(var(--muted-foreground));
}
.tpl-wohin-hint{color:hsl(var(--muted-foreground))}
/* Waehrend des Ziehens darf nichts im Bild die Maus abfangen - der Zeiger
   gehoert dem Anfasser, bis losgelassen wird. */
body.schiebt #frameWrap{pointer-events:none}
body.schiebt *{user-select:none}

.chip-pop{min-width:212px;bottom:calc(100% + 10px);left:auto;right:-6px;transform:none}
/* Das Menue haengt in der Pille und erbt sonst deren Lila. Hier wird
   zurueckgesetzt: ein Menue ist ein Menue, egal woran es haengt. */
#elementPille .chip-pop .pop-item{color:hsl(var(--foreground));padding:7px 8px;border-radius:calc(var(--radius) - 2px)}
#elementPille .chip-pop .pop-item:hover:not(:disabled){background:hsl(var(--accent))}
/* Löschen bleibt auch hier rot - die Regel darüber färbt sonst alles gleich. */
#elementPille .chip-pop .pop-item.danger,
#elementPille .chip-pop .pop-item.danger .fa{color:#b91c1c}
#elementPille .chip-pop .pop-item.danger:hover:not(:disabled){background:#fef2f2}
#elementPille .chip-pop .pop-item .fa{width:12px;height:12px;color:hsl(var(--muted-foreground))}
/* Nach unten aufklappen, wenn die Pille oben im Bild steht. */
.chip-pop.pop-unten{bottom:auto;top:calc(100% + 10px)}
.pop-trenn{height:1px;margin:4px 6px;background:hsl(var(--border))}
.pop-kopf{
  margin:2px 8px 4px;font-size:10.5px;letter-spacing:.03em;text-transform:uppercase;
  color:hsl(var(--muted-foreground));
}
.pop-item.matt{opacity:.42;cursor:default}
.pop-item.matt:hover{background:transparent}
/* Nur hier tragen die Eintraege ein sprechendes Zeichen - in den anderen
   Menues ist das Haekchen nur bei der aktiven Zeile sichtbar. */
.chip-pop .pop-item .fa{opacity:1}

/* ---------- Aufraeumen im Aenderungen-Fenster ---------- */
.hist-werkzeug{
  display:flex;flex-direction:column;gap:4px;
  padding:8px;border-top:1px solid hsl(var(--border));
}
.hist-tat{
  display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;
  border:1px solid hsl(var(--border));border-radius:var(--radius);
  background:hsl(var(--card));font:inherit;text-align:left;cursor:pointer;
  color:hsl(var(--foreground));
}
.hist-tat:hover{background:hsl(var(--accent))}
.hist-tat .fa{width:14px;height:14px;flex:0 0 auto;color:hsl(var(--muted-foreground))}
.ht-text{display:flex;flex-direction:column;gap:1px;min-width:0}
.ht-text b{font-size:12.5px;font-weight:500}
.ht-text i{font-style:normal;font-size:11px;color:hsl(var(--muted-foreground))}

/* ============================================ Rueckfragen im eigenen Kleid

   Statt confirm() des Browsers: gleiche Schrift, gleiche Knoepfe, und vor
   allem sprechende Beschriftungen - "Löschen" statt "OK". */
.frage-huelle{
  position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  padding:24px;background:rgba(15,15,20,.42);
  animation:frage-auf .12s ease;
}
.frage{
  width:min(440px,100%);max-height:80vh;overflow-y:auto;
  padding:20px 22px 16px;
  background:hsl(var(--card));color:hsl(var(--foreground));
  border:1px solid hsl(var(--border));border-radius:calc(var(--radius) + 4px);
  box-shadow:var(--shadow-lg);
  animation:frage-hoch .14s ease;
}
.frage-titel{margin:0 0 8px;font-size:15px;font-weight:600;line-height:1.35}
.frage-text{margin:0;font-size:13px;line-height:1.55;color:hsl(var(--muted-foreground));
  white-space:normal;overflow-wrap:anywhere}
.frage-feld{
  width:100%;margin-top:14px;padding:8px 10px;
  border:1px solid hsl(var(--border));border-radius:var(--radius);
  background:hsl(var(--background));color:inherit;font:inherit;font-size:13px;
}
.frage-feld:focus{outline:2px solid hsl(var(--ring));outline-offset:1px;border-color:transparent}
.frage-fuss{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin-top:18px}
.frage-knopf{
  padding:8px 14px;border-radius:var(--radius);border:1px solid transparent;
  font:inherit;font-size:12.5px;font-weight:500;cursor:pointer;
}
.frage-knopf.haupt{background:hsl(var(--primary));color:hsl(var(--primary-foreground))}
.frage-knopf.haupt:hover{opacity:.9}
.frage-knopf.gefahr{background:#b91c1c;color:#fff}
.frage-knopf.gefahr:hover{background:#991b1b}
.frage-knopf.still{background:transparent;border-color:hsl(var(--border));color:hsl(var(--foreground))}
.frage-knopf.still:hover{background:hsl(var(--accent))}
.frage-knopf:focus-visible{outline:2px solid hsl(var(--ring));outline-offset:2px}
@keyframes frage-auf{from{opacity:0}to{opacity:1}}
@keyframes frage-hoch{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .frage-huelle,.frage{animation:none}
}

/* ------------------------------------------------------------ Schriftwahl
 *
 * Google stellt rund 1800 Familien bereit. Ein <select> damit waere
 * unbenutzbar - eine Liste ohne Suche ebenso. Also: Suchfeld, ein paar
 * Arten zum Eingrenzen und eine Liste, in der jede Zeile in ihrer eigenen
 * Schrift steht. Ohne dieses Bild waehlt man Namen, keine Schriften.
 */
.font-knopf{
  display:flex;align-items:center;gap:6px;width:100%;height:28px;
  padding:0 8px;cursor:pointer;overflow:hidden;
  border:1px solid hsl(var(--border));border-radius:calc(var(--radius) - 2px);
  background:hsl(var(--background));
  font:inherit;font-size:12px;color:hsl(var(--foreground));text-align:left;
}
.font-knopf:hover{border-color:hsl(var(--ring))}
.font-knopf .fk-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.font-knopf .fk-pfeil{flex:0 0 auto;font-size:9px;color:hsl(var(--muted-foreground))}

.fontwahl{
  position:fixed;z-index:92;width:290px;
  display:flex;flex-direction:column;
  background:hsl(var(--card));border:1px solid hsl(var(--border));
  border-radius:calc(var(--radius) + 2px);box-shadow:var(--shadow-lg);
  overflow:hidden;
}
.fontwahl .fw-suche{
  display:flex;align-items:center;gap:7px;padding:8px 10px;
  border-bottom:1px solid hsl(var(--border));
}
.fontwahl .fw-suche span{font-size:11px;color:hsl(var(--muted-foreground))}
.fontwahl .fw-suche input{
  flex:1;height:24px;padding:0;border:0;background:transparent;
  font:inherit;font-size:12.5px;color:hsl(var(--foreground));
}
.fontwahl .fw-suche input:focus{outline:none}
.fontwahl .fw-arten{
  display:flex;flex-wrap:wrap;gap:4px;padding:7px 10px;
  border-bottom:1px solid hsl(var(--border));
}
.fontwahl .fw-art{
  height:22px;padding:0 8px;cursor:pointer;
  border:1px solid hsl(var(--border));border-radius:99px;
  background:hsl(var(--background));
  font:inherit;font-size:11px;line-height:1;color:hsl(var(--muted-foreground));
}
.fontwahl .fw-art:hover{background:hsl(var(--accent));color:hsl(var(--foreground))}
.fontwahl .fw-art.on{
  background:hsl(var(--primary));color:hsl(var(--primary-foreground));
  border-color:hsl(var(--primary));
}
.fontwahl .fw-liste{max-height:320px;overflow:auto;padding:5px}
.fontwahl .fw-kopf{
  padding:6px 8px 4px;font-size:10.5px;font-weight:500;letter-spacing:.02em;
  text-transform:uppercase;color:hsl(var(--muted-foreground));
}
.fontwahl .fw-zeile{
  display:flex;align-items:baseline;gap:8px;width:100%;
  padding:6px 8px;cursor:pointer;
  border:0;border-radius:calc(var(--radius) - 2px);background:transparent;
  color:hsl(var(--foreground));text-align:left;
}
.fontwahl .fw-zeile:hover{background:hsl(var(--accent))}
.fontwahl .fw-zeile.on{background:hsl(var(--primary));color:hsl(var(--primary-foreground))}
/* Die Zeile traegt ihre eigene Schrift - deshalb hier keine Vorgabe ausser
   der Groesse; font-family setzt das Skript je Zeile. */
.fontwahl .fw-name{flex:1;font-size:15px;line-height:1.25;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.fontwahl .fw-art-wort{
  flex:0 0 auto;font-family:inherit;font-size:10px;
  color:hsl(var(--muted-foreground));
}
.fontwahl .fw-zeile.on .fw-art-wort{color:inherit;opacity:.75}
.fontwahl .fw-leer{padding:14px 10px;font-size:12px;color:hsl(var(--muted-foreground))}
.fontwahl .fw-fuss{
  padding:7px 10px;border-top:1px solid hsl(var(--border));
  font-size:10.5px;line-height:1.4;color:hsl(var(--muted-foreground));
}

/* ------------------------------------------------- Bewegter Hintergrund
 *
 * Steht unter den CSS-Lagen, nicht darin: Ein Film ist keine Lage im
 * Hintergrundbild, sondern ein Element hinter dem Inhalt. Die Trennlinie
 * darüber sagt das, ohne dass es jemand erklären muss.
 */
.bg-film{
  margin-top:8px;padding:9px 10px 4px;
  border-top:1px solid hsl(var(--border));
}
.bg-film-kopf{
  display:flex;align-items:center;gap:7px;
  font-size:11px;font-weight:500;color:hsl(var(--muted-foreground));
}
.bg-film-kopf span{font-size:11px}
.bg-film-leer{
  padding:5px 0 2px;font-size:11px;line-height:1.45;
  color:hsl(var(--muted-foreground));
}
.bg-film-da{
  padding:5px 0 2px;font-size:11.5px;color:hsl(var(--foreground));
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.bg-film .insp-bildwahl{padding-left:0;padding-right:0}
/* „entfernen" und „ohne" sind Rücknahmen, keine Angebote - sie stehen
   zurückgenommen da, damit der Blick auf dem Hauptweg bleibt. */
.insp-ordner.still{color:hsl(var(--muted-foreground))}

/* ---------- Kette zwischen Breite und Hoehe ----------
   Der Knopf sitzt in der Breite-Zeile, ist aber um eine halbe Zeile nach
   unten versetzt - so steht er genau zwischen den beiden Feldern, die er
   verbindet. Die Hoehe-Zeile haelt denselben Platz frei, damit die Felder
   buendig bleiben. Zwei feine Klammerstriche zeigen, was zusammengehoert. */
.insp-kette,.insp-kette-platz{flex:0 0 18px;width:18px;height:18px}
.insp-kette{
  position:relative;top:16px;display:flex;align-items:center;justify-content:center;
  padding:0;border:0;border-radius:4px;background:none;cursor:pointer;
  color:hsl(var(--muted-foreground));z-index:1;
}
.insp-kette .fa{width:12px;height:12px}
.insp-kette:hover{background:hsl(var(--accent));color:hsl(var(--foreground))}
.insp-kette.on{color:hsl(var(--primary))}
.insp-kette::before,.insp-kette::after{
  content:"";position:absolute;left:50%;width:6px;height:7px;
  border:1px solid hsl(var(--border));border-left:0;pointer-events:none;
}
.insp-kette::before{bottom:calc(100% + 1px);border-bottom:0;border-top-right-radius:3px;transform:translateX(-3px)}
.insp-kette::after{top:calc(100% + 1px);border-top:0;border-bottom-right-radius:3px;transform:translateX(-3px)}
.insp-kette.on::before,.insp-kette.on::after{border-color:hsl(var(--primary) / .45)}
/* Die Bilddatei steht ohne eigene Ueberschrift im Abschnitt „Bild". */
.insp-medien{margin-top:4px}

/* ---------- Slider: Folien im Einstellungsfenster ---------- */
.folien{display:flex;flex-direction:column;gap:3px;margin:2px 0 8px}
.folie{display:flex;align-items:center;gap:8px;padding:3px;
  border:1px solid transparent;border-radius:calc(var(--radius) - 3px)}
.folie.on{border-color:hsl(var(--border));background:hsl(var(--muted))}
.folie-bild{position:relative;flex:0 0 72px;width:72px;height:41px;padding:0;cursor:pointer;
  border:1px solid hsl(var(--border));border-radius:4px;overflow:hidden;background:hsl(var(--muted))}
.folie.on .folie-bild{outline:2px solid hsl(var(--primary));outline-offset:1px}
.folie-bild:focus-visible{outline:2px solid hsl(var(--ring));outline-offset:1px}
.folie-bild img,.folie-bild video{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
.folie-nr{position:absolute;left:3px;top:3px;min-width:15px;height:15px;padding:0 3px;border-radius:3px;
  background:rgba(0,0,0,.62);color:#fff;font-size:10px;line-height:15px;text-align:center}
.folie-art{position:absolute;right:3px;bottom:2px;display:flex;color:#fff;filter:drop-shadow(0 0 2px rgba(0,0,0,.8))}
.folie-art .fa{width:11px;height:11px}
.folie-leer{display:flex;align-items:center;justify-content:center;height:100%;color:hsl(var(--muted-foreground))}
.folie-leer .fa{width:14px;height:14px}
.folie-name{flex:1;min-width:0;font-size:11px;color:hsl(var(--muted-foreground));
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.folie-tools{display:flex;gap:1px;flex:0 0 auto}
.folie-tools button{display:flex;align-items:center;justify-content:center;width:22px;height:22px;padding:0;
  border:0;border-radius:5px;background:transparent;color:hsl(var(--muted-foreground));cursor:pointer}
.folie-tools button .fa{width:11px;height:11px}
.folie-tools button:hover:not(:disabled){background:hsl(var(--accent));color:hsl(var(--foreground))}
.folie-tools button:disabled{opacity:.3;cursor:default}
.folie-neu{display:flex;align-items:center;justify-content:center;gap:5px;width:auto;height:28px;padding:0 4px;
  cursor:pointer;border:1px dashed hsl(var(--border));border-radius:calc(var(--radius) - 3px);
  font:inherit;font-size:11.5px;color:hsl(var(--muted-foreground));background:hsl(var(--card));
  white-space:nowrap;overflow:hidden}
.folie-neu:hover{background:hsl(var(--accent));color:hsl(var(--foreground))}
.folie-neu .fa{width:12px;height:12px;flex:0 0 auto}