/* Entwurfswerkzeuge: Konzept-Ansicht (Herkunft und Personalisierung), Panel und Hinweis-Meldung.
   Eigene Farben: Grün = kuratiert (Redaktion), Gelb = KI (automatisch aus Partnerquellen),
   Violett = persönlich sortiert, Grau = für alle gleich. */
:root {
  --ent-kuratiert: #1F6F5C;
  --ent-ki: #E29A0B;
  --ent-ki-tief: #8A5A00;
  --ent-personal: #7C3AED;
  --ent-personal-tief: #5B21B6;
  --ent-personal-hell: #F3EEFF;
  --ent-gleich: #6B7280;
  --ent-dunkel: #16181a;
  --ent-schrift: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.ent-ebene {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2147483000;
}

/* Bereiche */
.ent-box {
  position: absolute;
  border: 3px solid var(--c);
  border-radius: 10px;
  background: color-mix(in srgb, var(--c) 9%, transparent);
  box-sizing: border-box;
}
.ent-box span {
  position: absolute;
  top: 6px;
  left: 6px;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--c);
  color: #fff;
  font: 600 12px/1.2 var(--ent-schrift);
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.ent-kuratiert { --c: var(--ent-kuratiert); }
.ent-ki { --c: var(--ent-ki); }
.ent-ki span { color: #241800; }
.ent-personal { --c: var(--ent-personal); }
.ent-gleich { --c: var(--ent-gleich); border-style: dashed; border-width: 2px; background: color-mix(in srgb, var(--c) 5%, transparent); }
.ent-gleich span { background: #4B5563; }
.ent-auswahl { --c: var(--ent-personal); border-style: dashed; background: color-mix(in srgb, var(--c) 6%, transparent); }
.ent-auswahl span { background: #fff; color: var(--ent-personal-tief); box-shadow: inset 0 0 0 2px var(--ent-personal); }
.ent-flach span { top: calc(100% + 5px); }

/* Beiträge: Quelle und Kanal bzw. „Warum sehe ich das?“ */
.ent-beitrag {
  position: absolute;
  border: 1.5px dashed var(--c);
  border-radius: 8px;
  box-sizing: border-box;
}
.ent-b-herkunft { --c: color-mix(in srgb, var(--ent-ki-tief) 75%, transparent); }
.ent-b-personal { --c: color-mix(in srgb, var(--ent-personal) 70%, transparent); }
/* höchstens zwei Zeilen, damit lange Gründe lesbar bleiben statt abgeschnitten zu werden */
.ent-chip {
  position: absolute;
  right: 4px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  max-width: max(calc(100% - 8px), 230px);
  padding: 3px 9px 4px 8px;
  border-radius: 10px;
  font: 500 11px/1.4 var(--ent-schrift);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
}
.ent-chip svg { display: inline-block; width: 11px; height: 11px; margin-right: 4px; vertical-align: -1.5px; }
.ent-chip b { margin-right: 5px; font-weight: 700; }
.ent-b-herkunft .ent-chip { background: var(--ent-dunkel); color: #fff; }
.ent-b-herkunft .ent-chip b, .ent-b-herkunft .ent-chip svg { color: #F4C24D; }
.ent-b-personal .ent-chip { background: var(--ent-personal); color: #fff; }

/* Panel */
.ent-panel {
  position: fixed;
  z-index: 2147483001;
  display: grid;
  gap: 10px;
  justify-items: end;
  max-width: min(340px, calc(100vw - 32px));
  font-family: var(--ent-schrift);
}
.ent-panel[data-position='unten-rechts'] { right: 16px; bottom: 16px; }
.ent-panel[data-position='unten-links'] { left: 16px; bottom: 16px; justify-items: start; }
.ent-panel[data-position='oben-rechts'] { right: 16px; top: 76px; }
.ent-panel[data-position='mitte-rechts'] { right: 16px; bottom: 112px; }

.ent-knopf {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 16px 0 12px;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 999px;
  background: #fff;
  color: var(--ent-dunkel);
  font: 600 15px/1 var(--ent-schrift);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.16);
  cursor: pointer;
}
.ent-knopf:focus-visible, .ent-panel :focus-visible { outline: 3px solid var(--ent-dunkel); outline-offset: 3px; }
.ent-knopf[aria-pressed='true'] { background: var(--ent-dunkel); color: #fff; }
.ent-symbol { display: inline-flex; width: 22px; height: 14px; border-radius: 4px; overflow: hidden; }
.ent-symbol i { display: block; height: 100%; }
.ent-symbol i:first-child { width: 30%; background: var(--ent-kuratiert); }
.ent-symbol i:last-child { width: 70%; background: var(--ent-ki); }
html[data-ent-ansicht='personal'] .ent-knopf[aria-pressed='true'] .ent-symbol i { background: var(--ent-personal); }
html[data-ent-ansicht='personal'] .ent-knopf[aria-pressed='true'] .ent-symbol i:first-child { background: #B9A3F5; }

.ent-anzeige {
  width: 100%;
  max-height: calc(100dvh - 150px);
  overflow-y: auto;
  overscroll-behavior: contain;
  box-sizing: border-box;
  padding: 12px 16px 14px;
  border-radius: 16px;
  background: #fff;
  color: var(--ent-dunkel);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.16);
  font-size: 14px;
  line-height: 1.45;
}
.ent-anzeige[hidden], .ent-teil[hidden], .ent-anzeige [hidden] { display: none; }
.ent-nur-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.ent-umschalter { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin: 0 0 12px; padding: 3px; border: 0; border-radius: 999px; background: #EEF0F2; }
.ent-umschalter label { position: relative; }
.ent-umschalter input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ent-umschalter span { display: block; padding: 8px 6px; border-radius: 999px; text-align: center; font: 600 13px/1.2 var(--ent-schrift); color: #4b5057; }
.ent-umschalter input:checked + span { background: var(--ent-dunkel); color: #fff; }
.ent-umschalter input[value='personal']:checked + span { background: var(--ent-personal); }
.ent-umschalter input:focus-visible + span { outline: 3px solid var(--ent-dunkel); outline-offset: 1px; }

.ent-balken { height: 10px; border-radius: 999px; background: var(--ent-ki); overflow: hidden; }
.ent-balken-k { display: block; height: 100%; width: 30%; background: var(--ent-kuratiert); transition: width 0.3s; }
.ent-zahlen { display: flex; justify-content: space-between; gap: 12px; margin: 10px 0 4px; font-size: 15px; }
.ent-zahlen b:first-child { color: var(--ent-kuratiert); }
.ent-zahlen b:last-child { color: var(--ent-ki-tief); }
.ent-klein { margin: 0; font-size: 13px; line-height: 1.45; color: #4b5057; }
.ent-titel { margin: 14px 0 6px; font-weight: 700; font-size: 13px; letter-spacing: 0.01em; }
.ent-teil[data-teil='personal'] > .ent-titel:first-child { margin-top: 2px; }

.ent-kanaele { list-style: none; display: grid; gap: 2px; margin: 0 0 8px; padding: 0; }
.ent-kanaele li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 6px; min-height: 28px; font-size: 13px; }
.ent-kanaele svg { width: 22px; height: 22px; padding: 5px; border-radius: 6px; background: var(--ent-dunkel); color: #F4C24D; box-sizing: border-box; }
.ent-kanaele b { font-variant-numeric: tabular-nums; }

.ent-wissen { display: grid; margin: 0 0 6px; }
.ent-wissen div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid #ECEAF2; }
.ent-wissen dt { color: #4b5057; }
.ent-wissen dd { margin: 0; font-weight: 700; color: var(--ent-personal-tief); text-align: right; }
.ent-speicher { margin: 10px 0 0; font-size: 12.5px; color: #4b5057; }
.ent-anzeige code { font: 500 12px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.ent-speicher code { display: block; margin-top: 4px; padding: 7px 9px; border-radius: 8px; background: var(--ent-personal-hell); color: #3B1A80; overflow-wrap: anywhere; }
.ent-fakten { list-style: none; display: grid; gap: 6px; margin: 12px 0; padding: 0; font-size: 13px; }
.ent-fakten li { position: relative; padding-left: 22px; }
.ent-fakten li::before { content: ''; position: absolute; left: 2px; top: 4px; width: 9px; height: 5px; border-left: 2px solid var(--ent-personal); border-bottom: 2px solid var(--ent-personal); transform: rotate(-45deg); }

.ent-loeschen { width: 100%; min-height: 42px; border: 1.5px solid var(--ent-personal); border-radius: 12px; background: #fff; color: var(--ent-personal-tief); font: 600 14px/1 var(--ent-schrift); cursor: pointer; }
.ent-loeschen:disabled { border-color: #D7D9DE; color: #6B7280; cursor: default; }

.ent-wege { margin: 12px 0 10px; border-top: 1px solid #ECEAF2; padding-top: 8px; }
.ent-wege summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 34px; font-weight: 600; font-size: 13px; list-style: none; cursor: pointer; }
.ent-wege summary::-webkit-details-marker { display: none; }
.ent-wege summary::after { content: '+'; flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #EEF0F2; font: 600 15px/1 var(--ent-schrift); }
.ent-wege[open] summary::after { content: '–'; }
.ent-wege dl { display: grid; gap: 8px; margin: 6px 0 0; }
.ent-wege div { padding: 6px 8px 7px 10px; border-left: 3px solid #D7D9DE; }
.ent-wege dt { font-weight: 700; font-size: 13px; }
.ent-wege dd { margin: 2px 0 0; font-size: 12.5px; color: #4b5057; }
.ent-wege .ent-gewaehlt { border-left-color: var(--ent-personal); background: var(--ent-personal-hell); border-radius: 0 8px 8px 0; }
.ent-wege .ent-gewaehlt dt { color: var(--ent-personal-tief); }

@media (hover: hover) {
  .ent-loeschen:not(:disabled):hover { background: var(--ent-personal); color: #fff; }
  .ent-umschalter label:hover input:not(:checked) + span { color: var(--ent-dunkel); }
}

.ent-meldung {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 2147483002;
  max-width: min(520px, calc(100vw - 32px));
  padding: 12px 18px;
  border-radius: 12px;
  background: var(--ent-dunkel);
  color: #fff;
  font: 500 15px/1.45 var(--ent-schrift);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  transform: translate(-50%, 160%);
  opacity: 0;
  transition: transform 0.25s, opacity 0.25s;
  pointer-events: none;
}
.ent-meldung-sichtbar { transform: translate(-50%, 0); opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .ent-meldung, .ent-balken-k { transition: none; }
}
@media (max-width: 600px) {
  .ent-knopf { font-size: 14px; padding: 0 14px 0 10px; }
  .ent-panel { max-width: calc(100vw - 24px); }
  .ent-panel[data-position='unten-rechts'] { right: 12px; bottom: 12px; }
  .ent-panel[data-position='unten-links'] { left: 12px; bottom: 12px; }
  .ent-panel[data-position='oben-rechts'] { right: 12px; top: 136px; }
  .ent-anzeige { max-height: min(62dvh, calc(100dvh - 210px)); }
}
@media print {
  .ent-panel, .ent-ebene, .ent-meldung { display: none; }
}