/* Beitragsplaner (#2615). Nur Bausteine-Tokens; Mindestgröße Schrift 1rem, Tippflächen --tippflaeche. */

.bp {
  --bp-entwurf: var(--farbe-neutral-text);
  --bp-freigabe: var(--farbe-warn);
  --bp-frei: var(--farbe-ok);
  --bp-gepostet: var(--farbe-marke);
  --bp-weg: var(--farbe-text-gedaempft);
  --bp-rand: var(--farbe-linie);

}
.bp ::selection { background: var(--farbe-akzent); color: var(--farbe-akzent-text); }
.bp :focus-visible { outline: 3px solid var(--farbe-link); outline-offset: 2px; }

.bp-symbol { inline-size: 1.25rem; block-size: 1.25rem; flex: 0 0 auto; }

.bp-kopf { align-items: flex-end; gap: var(--abstand-md); }
.bp-kopf p { max-inline-size: 62ch; text-wrap: pretty; }

.bp-lage { margin: 0 0 var(--abstand-lg); color: var(--farbe-text-gedaempft); font-variant-numeric: tabular-nums; text-wrap: pretty; }

/* Status: Punkt + Wort, nie nur Farbe */
.bp-punkt { display: inline-block; inline-size: 0.625rem; block-size: 0.625rem; border-radius: 50%; background: var(--bp-entwurf); flex: 0 0 auto; }
.bp-eintrag--zur_freigabe .bp-punkt, .bp-karte--zur_freigabe .bp-punkt, .bp-status--zur_freigabe .bp-punkt { background: var(--bp-freigabe); }
.bp-eintrag--freigegeben .bp-punkt, .bp-karte--freigegeben .bp-punkt, .bp-status--freigegeben .bp-punkt { background: var(--bp-frei); }
.bp-eintrag--gepostet .bp-punkt, .bp-karte--gepostet .bp-punkt, .bp-status--gepostet .bp-punkt { background: var(--bp-gepostet); }
.bp-eintrag--verworfen .bp-punkt, .bp-karte--verworfen .bp-punkt, .bp-status--verworfen .bp-punkt { background: transparent; box-shadow: inset 0 0 0 2px var(--bp-weg); }

.bp-status { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 700; color: var(--farbe-text); white-space: nowrap; }
.bp-kanal { color: var(--farbe-text-gedaempft); white-space: nowrap; }

/* Filter wie in der Redaktion */
.bp-filter { display: flex; gap: var(--abstand-sm); margin-block-end: var(--abstand-md); overflow-x: auto; scrollbar-width: none; padding-block-end: 2px; }
.bp-filter::-webkit-scrollbar { display: none; }
.bp-chip {
  display: inline-flex; align-items: center; gap: var(--abstand-sm); flex: 0 0 auto;
  min-block-size: var(--tippflaeche); padding: 0 var(--abstand-md);
  border: 2px solid var(--farbe-linie); border-radius: var(--radius-rund);
  background: var(--farbe-flaeche); color: var(--farbe-text);
  font: 700 var(--schrift-text) / 1 var(--schriftart-text); cursor: pointer;
  transition: background var(--dauer-uebergang) var(--kurve), border-color var(--dauer-uebergang) var(--kurve);
}
.bp-chip:hover { border-color: var(--farbe-link); }
.bp-chip[aria-pressed="true"] { background: var(--farbe-marke); border-color: var(--farbe-marke); color: var(--farbe-text-auf-marke); }
.bp-chip__zahl { min-inline-size: 1.75rem; padding: 0.125rem 0.5rem; border-radius: var(--radius-rund); background: var(--farbe-neutral-bg); color: var(--farbe-neutral-text); font-variant-numeric: tabular-nums; text-align: center; }
.bp-chip[aria-pressed="true"] .bp-chip__zahl { background: var(--farbe-akzent); color: var(--farbe-akzent-text); }

/* Leiste: Ansicht + Zeitraum */
.bp-leiste { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--abstand-sm) var(--abstand-md); margin-block-end: var(--abstand-md); }
.bp-ansicht { display: inline-flex; padding: 3px; border-radius: var(--radius-rund); background: var(--farbe-neutral-bg); }
.bp-ansicht__knopf {
  min-block-size: calc(var(--tippflaeche) - 6px); padding: 0 var(--abstand-md);
  border: 0; border-radius: var(--radius-rund); background: transparent; color: var(--farbe-text);
  font: 700 var(--schrift-text) / 1 var(--schriftart-text); cursor: pointer;
}
.bp-ansicht__knopf[aria-pressed="true"] { background: var(--farbe-flaeche); color: var(--farbe-marke); box-shadow: 0 1px 3px rgb(0 0 0 / 0.14); }
.bp-nav { display: flex; align-items: center; gap: var(--abstand-xs); }
.bp-nav--ohne .bp-nav__knopf, .bp-nav--ohne .bp-heute { display: none; }
.bp-nav__titel { margin: 0 var(--abstand-xs); min-inline-size: 11ch; font-size: var(--schrift-gross, 1.25rem); color: var(--farbe-marke); text-align: center; font-variant-numeric: tabular-nums; }
.bp-nav__knopf {
  display: inline-grid; place-items: center; inline-size: var(--tippflaeche); block-size: var(--tippflaeche);
  border: 2px solid var(--farbe-linie); border-radius: 50%; background: var(--farbe-flaeche); color: var(--farbe-marke); cursor: pointer;
}
.bp-nav__knopf:hover { border-color: var(--farbe-link); }
.bp-heute { min-block-size: var(--tippflaeche); margin-inline-start: var(--abstand-xs); }

/* Monat */
.bp-monat { border: 1px solid var(--bp-rand); border-radius: var(--radius-karte); overflow: hidden; background: var(--farbe-flaeche); box-shadow: var(--schatten-karte); }
.bp-monat__kopf, .bp-monat__woche { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.bp-monat__kopf span { padding: var(--abstand-xs) var(--abstand-sm); background: var(--farbe-hell); color: var(--farbe-text-gedaempft); font-weight: 700; }
.bp-tag { display: flex; flex-direction: column; gap: 3px; min-block-size: 7.5rem; padding: var(--abstand-xs); border-block-start: 1px solid var(--bp-rand); border-inline-start: 1px solid var(--bp-rand); min-inline-size: 0; }
.bp-tag:first-child { border-inline-start: 0; }
.bp-tag--fremd { background: color-mix(in srgb, var(--farbe-hell) 55%, transparent); }
.bp-tag--fremd .bp-tag__nr { color: var(--farbe-text-gedaempft); }
.bp-tag__nr {
  align-self: flex-start; display: inline-grid; place-items: center;
  min-inline-size: 2rem; block-size: 2rem; padding: 0 0.35rem;
  border: 0; border-radius: var(--radius-rund); background: transparent; color: var(--farbe-text);
  font: 700 var(--schrift-text) / 1 var(--schriftart-text); font-variant-numeric: tabular-nums; cursor: pointer;
}
.bp-tag__nr:hover { background: var(--farbe-info-bg); }
.bp-tag--heute .bp-tag__nr { background: var(--farbe-marke); color: var(--farbe-text-auf-marke); }
.bp-tag__mehr { align-self: flex-start; border: 0; background: none; padding: 0.25rem; color: var(--farbe-link); font: 700 var(--schrift-text) / 1.2 var(--schriftart-text); cursor: pointer; text-decoration: underline; text-underline-offset: 0.2em; }

.bp-eintrag {
  display: flex; align-items: center; gap: 0.35rem; inline-size: 100%; min-inline-size: 0;
  padding: 0.25rem 0.4rem; border: 1px solid transparent; border-radius: 6px;
  background: var(--farbe-neutral-bg); color: var(--farbe-text);
  font: var(--schrift-text) / 1.25 var(--schriftart-text); text-align: start; cursor: pointer;
}
.bp-eintrag:hover { border-color: var(--farbe-link); }
.bp-eintrag--zur_freigabe { background: var(--farbe-warn-bg); }
.bp-eintrag--freigegeben { background: var(--farbe-ok-bg); }
.bp-eintrag--gepostet { background: var(--farbe-info-bg); }
.bp-eintrag--verworfen { background: transparent; color: var(--farbe-text-gedaempft); text-decoration: line-through; }
.bp-eintrag__zeit { font-variant-numeric: tabular-nums; color: var(--farbe-text-gedaempft); flex: 0 0 auto; }
.bp-eintrag__titel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-inline-size: 0; }

/* Woche */
.bp-woche { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--abstand-sm); }
.bp-wtag { display: flex; flex-direction: column; min-inline-size: 0; border: 1px solid var(--bp-rand); border-radius: var(--radius-karte); background: var(--farbe-flaeche); }
.bp-wtag--heute { border-color: var(--farbe-marke); box-shadow: 0 0 0 1px var(--farbe-marke), var(--schatten-karte); }
.bp-wtag--vorbei { background: color-mix(in srgb, var(--farbe-hell) 50%, var(--farbe-flaeche)); }
.bp-wtag__kopf { display: flex; align-items: center; gap: 0.4rem; padding: var(--abstand-xs) var(--abstand-xs) var(--abstand-xs) var(--abstand-sm); border-block-end: 1px solid var(--bp-rand); }
.bp-wtag__name { font-weight: 700; color: var(--farbe-marke); }
.bp-wtag__datum { color: var(--farbe-text-gedaempft); font-variant-numeric: tabular-nums; }
.bp-wtag__neu { margin-inline-start: auto; display: inline-grid; place-items: center; inline-size: 2.25rem; block-size: 2.25rem; border: 0; border-radius: 50%; background: transparent; color: var(--farbe-link); cursor: pointer; }
.bp-wtag__neu:hover { background: var(--farbe-info-bg); }
.bp-wtag__liste { display: grid; gap: var(--abstand-xs); padding: var(--abstand-xs); }
.bp-wtag__leer { margin: 0; padding: var(--abstand-sm) var(--abstand-xs); color: var(--farbe-text-gedaempft); }

/* Karte (Woche, Liste) */
.bp-karte {
  display: grid; gap: 0.3rem; inline-size: 100%; min-inline-size: 0;
  padding: var(--abstand-sm) var(--abstand-md);
  border: 1px solid var(--bp-rand); border-radius: var(--radius-feld, 8px);
  background: var(--farbe-flaeche); color: var(--farbe-text);
  font: var(--schrift-text) / 1.3 var(--schriftart-text); text-align: start; cursor: pointer;
  transition: border-color var(--dauer-uebergang) var(--kurve), box-shadow var(--dauer-uebergang) var(--kurve);
}
.bp-karte:hover { border-color: var(--farbe-link); box-shadow: 0 2px 8px rgb(0 0 0 / 0.08); }
.bp-karte__kopf { display: flex; justify-content: space-between; gap: var(--abstand-sm); flex-wrap: wrap; }
.bp-karte__titel { font-weight: 700; color: var(--farbe-marke); overflow-wrap: anywhere; text-wrap: balance; }
.bp-karte__meta { color: var(--farbe-text-gedaempft); }
.bp-karte__hinweis { color: var(--farbe-warn); font-weight: 700; }
.bp-karte--verworfen { opacity: 0.75; }
.bp-karte--verworfen .bp-karte__titel { text-decoration: line-through; color: var(--farbe-text-gedaempft); }
.bp-woche .bp-karte { padding: var(--abstand-xs) var(--abstand-sm); }
.bp-woche .bp-karte__kopf .bp-kanal { display: none; }
.bp-woche .bp-status { white-space: normal; }
.bp-woche .bp-karte span { overflow-wrap: normal; hyphens: auto; }
.bp-woche .bp-karte__hinweis { display: none; }
.bp-karte--vorbei { border-color: var(--farbe-warn); }
.bp-wtag__name, .bp-wtag__datum { white-space: nowrap; }

/* Liste */
.bp-liste { display: grid; gap: var(--abstand-lg); }
.bp-gruppe__titel { margin: 0 0 var(--abstand-sm); font-size: var(--schrift-text); color: var(--farbe-text-gedaempft); }
.bp-gruppe__liste { display: grid; gap: var(--abstand-sm); grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
.bp-gruppe--vorbei { opacity: 0.85; }
.bp-ideen { margin-block-start: var(--abstand-lg); }

.bp-leer, .bp-laden { padding: var(--abstand-xl) var(--abstand-lg); border: 2px dashed var(--farbe-linie); border-radius: var(--radius-karte); color: var(--farbe-text-gedaempft); text-align: center; text-wrap: pretty; }

/* Vorschläge */
.bp-vorschlaege { margin-block-start: var(--abstand-xl); }
.bp-vorschlaege h2 { margin-block-end: var(--abstand-xs); }
.bp-vorschlaege__liste { display: grid; gap: var(--abstand-md); grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); margin-block-start: var(--abstand-md); }
.bp-vorschlag { display: flex; flex-direction: column; gap: var(--abstand-xs); padding: var(--abstand-md); border: 1px solid var(--bp-rand); border-radius: var(--radius-karte); background: var(--farbe-flaeche); }
.bp-vorschlag__name { margin: 0; color: var(--farbe-marke); }
.bp-vorschlag__text { margin: 0; line-height: 1.5; text-wrap: pretty; overflow-wrap: anywhere; }
.bp-vorschlag .knopf { align-self: flex-start; min-block-size: var(--tippflaeche); margin-block-start: auto; }

/* Editor */
.bp-editor {
  margin-block-end: var(--abstand-xl); padding: var(--abstand-lg);
  border: 1px solid var(--bp-rand); border-radius: var(--radius-karte);
  background: var(--farbe-flaeche); box-shadow: var(--schatten-karte);
  scroll-margin-block-start: 5rem;
  animation: bp-rein 260ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes bp-rein { from { opacity: 0.5; transform: translateY(8px); } }
.bp-editor__kopf { display: flex; align-items: center; gap: var(--abstand-sm) var(--abstand-md); flex-wrap: wrap; margin-block-end: var(--abstand-sm); }
.bp-editor__kopf h2 { margin: 0; color: var(--farbe-marke); overflow-wrap: anywhere; text-wrap: balance; }
.bp-editor__zu { margin-inline-start: auto; display: inline-grid; place-items: center; inline-size: var(--tippflaeche); block-size: var(--tippflaeche); border: 0; border-radius: 50%; background: transparent; color: var(--farbe-text); cursor: pointer; }
.bp-editor__zu:hover { background: var(--farbe-neutral-bg); }
.bp-editor__raster { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--abstand-xl); align-items: start; margin-block-start: var(--abstand-md); }
.bp-form { display: grid; gap: var(--abstand-sm); }
.bp-form input[type="text"], .bp-form input[type="datetime-local"], .bp-form textarea, .bp-block textarea { inline-size: 100%; }
.bp-form input[type="text"], .bp-form input[type="datetime-local"] { min-block-size: var(--tippflaeche); }
.bp-form textarea { min-block-size: 5rem; line-height: 1.5; }
.bp-label { display: block; font-weight: 700; margin-block-end: var(--abstand-xs); }
.bp-zaehler { font-variant-numeric: tabular-nums; }
.bp-zaehler--warn { color: var(--farbe-fehler); font-weight: 700; }

.bp-fieldset { margin: 0; padding: 0; border: 0; min-inline-size: 0; }
.bp-fieldset legend { padding: 0; margin-block-end: var(--abstand-xs); font-weight: 700; }
.bp-segment { display: flex; flex-wrap: wrap; gap: var(--abstand-xs); }
.bp-segment__wahl {
  position: relative; display: inline-flex; align-items: center;
  min-block-size: var(--tippflaeche); padding: 0 var(--abstand-md);
  border: 2px solid var(--farbe-linie); border-radius: var(--radius-rund);
  background: var(--farbe-flaeche); font-weight: 700; cursor: pointer;
}
.bp-segment__wahl input { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; }
.bp-segment__wahl:has(input:checked) { border-color: var(--farbe-marke); background: var(--farbe-marke); color: var(--farbe-text-auf-marke); }
.bp-segment__wahl:has(input:focus-visible) { outline: 3px solid var(--farbe-link); outline-offset: 2px; }

.bp-bilder { display: flex; flex-wrap: wrap; gap: var(--abstand-sm); margin-block-end: var(--abstand-sm); }
.bp-bilder:empty { display: none; }
.bp-bild { position: relative; inline-size: 6.5rem; aspect-ratio: 4 / 5; border-radius: var(--radius-feld, 8px); overflow: hidden; background: var(--farbe-hell); }
.bp-bild img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.bp-bild--neu { box-shadow: 0 0 0 2px var(--farbe-akzent); }
.bp-bild__weg {
  position: absolute; inset-block-start: 4px; inset-inline-end: 4px;
  display: inline-grid; place-items: center; inline-size: 2.25rem; block-size: 2.25rem;
  border: 0; border-radius: 50%; background: rgb(0 0 0 / 0.62); color: #fff; cursor: pointer;
}
.bp-bild__weg:hover { background: var(--farbe-fehler); }
.bp-datei { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; }
.bp-datei__knopf { display: inline-flex; align-items: center; gap: var(--abstand-xs); min-block-size: var(--tippflaeche); cursor: pointer; }
.bp-datei:focus-visible + .bp-datei__knopf { outline: 3px solid var(--farbe-link); outline-offset: 2px; }

.bp-aktionen { display: flex; flex-wrap: wrap; gap: var(--abstand-sm); margin-block-start: var(--abstand-sm); }
.bp-aktionen .knopf { min-block-size: var(--tippflaeche); display: inline-flex; align-items: center; gap: var(--abstand-xs); }
.bp-knopf-still { border-color: transparent; }
.bp-knopf-still:hover { border-color: var(--farbe-link); }

.bp-seitenteil { display: grid; gap: var(--abstand-lg); position: sticky; inset-block-start: var(--abstand-md); }
.bp-block { padding-block-start: var(--abstand-md); border-block-start: 1px solid var(--bp-rand); }
.bp-block h3 { margin: 0 0 var(--abstand-xs); font-size: var(--schrift-text); color: var(--farbe-marke); }
.bp-block--status { padding: var(--abstand-md); border: 2px solid var(--farbe-linie); border-radius: var(--radius-karte); background: var(--farbe-hell); }

.bp-kommentare { list-style: none; margin: var(--abstand-xs) 0 var(--abstand-md); padding: 0; display: grid; gap: var(--abstand-sm); max-block-size: 18rem; overflow-y: auto; }
.bp-kommentar { padding: var(--abstand-sm) var(--abstand-md); border-radius: var(--radius-feld, 8px); background: var(--farbe-neutral-bg); }
.bp-kommentar p { margin: 0; }
.bp-kommentar__wer { color: var(--farbe-text-gedaempft); }
.bp-kommentar__text { white-space: pre-line; overflow-wrap: anywhere; line-height: 1.45; }

.bp-verlauf summary { cursor: pointer; font-weight: 700; color: var(--farbe-marke); min-block-size: var(--tippflaeche); display: flex; align-items: center; }
.bp-verlauf ol { margin: var(--abstand-xs) 0 0; padding: 0; list-style: none; display: grid; gap: var(--abstand-xs); }
.bp-verlauf li { color: var(--farbe-text-gedaempft); }

/* Vorschau */
.bp-vs__ueber { margin: 0 0 var(--abstand-sm); font-size: var(--schrift-text); color: var(--farbe-text-gedaempft); }
.bp-vs { max-inline-size: 22rem; border: 1px solid var(--bp-rand); border-radius: 14px; background: #fff; color: #1b1b1b; overflow: hidden; box-shadow: 0 6px 24px rgb(6 69 102 / 0.12); }
.bp-vs--story { max-inline-size: 16rem; background: #111; color: #fff; }
.bp-vs__kopf { display: flex; align-items: center; gap: var(--abstand-xs); padding: 0.6rem 0.75rem; flex-wrap: wrap; }
.bp-vs--story .bp-vs__kopf { position: relative; z-index: 1; }
.bp-vs__logo { inline-size: 2rem; block-size: 2rem; border-radius: 50%; object-fit: contain; background: var(--farbe-hell); padding: 2px; }
.bp-vs__name { font-weight: 700; }
.bp-vs__zeit { display: inline-flex; align-items: center; gap: 0.25rem; margin-inline-start: auto; color: #5a6670; font-variant-numeric: tabular-nums; }
.bp-vs--story .bp-vs__zeit { color: rgb(255 255 255 / 0.8); }
.bp-vs__bild { display: grid; place-items: center; aspect-ratio: 4 / 5; background: var(--farbe-hell); }
.bp-vs__bild--story { aspect-ratio: 9 / 16; background: #222; }
.bp-vs__bild--website { aspect-ratio: 16 / 9; }
.bp-vs__bild img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.bp-vs__leer { color: #5a6670; }
.bp-vs--story .bp-vs__leer { color: rgb(255 255 255 / 0.75); }
.bp-vs__text { padding: 0.6rem 0.75rem 0.85rem; display: grid; gap: 0.35rem; }
.bp-vs__text p { margin: 0; line-height: 1.45; white-space: pre-line; overflow-wrap: anywhere; }
.bp-vs__titel { font-size: 1.15rem; color: var(--farbe-marke); }
.bp-vs__mehr { color: #5a6670; }
.bp-vs__tags { color: var(--farbe-link); }
.bp-vs__punkte { display: flex; justify-content: center; gap: 4px; }
.bp-vs__punkte span { inline-size: 6px; block-size: 6px; border-radius: 50%; background: #c4c4c4; }
.bp-vs__punkte span.aktiv { background: var(--farbe-link); }
.bp-vs__notiz { padding: 0.6rem 0.75rem; margin: 0; color: rgb(255 255 255 / 0.8); }

/* Meldungen */
.bp-meldung { margin: var(--abstand-sm) 0 0; padding: var(--abstand-sm) var(--abstand-md); border-radius: var(--radius-feld, 8px); background: var(--farbe-info-bg); }
.bp-meldung--ok { background: var(--farbe-ok-bg); color: var(--farbe-ok); }
.bp-meldung--fehler { background: var(--farbe-fehler-bg); color: var(--farbe-fehler); }
.bp-meldung textarea { inline-size: 100%; margin-block-start: var(--abstand-sm); }
.bp-hinweis { margin: 0; color: var(--farbe-text-gedaempft); font-weight: 700; }
.bp-klein { margin: var(--abstand-xs) 0 0; color: var(--farbe-text-gedaempft); text-wrap: pretty; }
.bp-fuss { margin-block-start: var(--abstand-xl); color: var(--farbe-text-gedaempft); }

@media (max-width: 64rem) {
  .bp-editor__raster { grid-template-columns: minmax(0, 1fr); }
  .bp-seitenteil { position: static; }
  .bp-woche { grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); }
}

@media (max-width: 40rem) {
  .bp-nur-breit { display: none; }
  .bp-kopf { flex-direction: column; align-items: stretch; }
  .bp-editor { padding: var(--abstand-md); margin-inline: calc(var(--abstand-sm) * -1); }
  .bp-leiste { flex-direction: column; align-items: stretch; }
  .bp-ansicht { align-self: flex-start; }
  .bp-nav { justify-content: space-between; }
  .bp-nav__titel { flex: 1; font-size: var(--schrift-text); }
  .bp-woche { grid-template-columns: minmax(0, 1fr); }
  .bp-wtag--vorbei:not(:has(.bp-karte)) { display: none; }
  .bp-aktionen .knopf { flex: 1 1 auto; justify-content: center; }
  .bp-vs { max-inline-size: none; }
  .bp-vs--story { max-inline-size: 18rem; }
}

@media (prefers-reduced-motion: reduce) {
  .bp-editor { animation: none; }
  .bp-karte, .bp-chip { transition: none; }
}