/* ===========================================================================
   Redaktionsbereich.

   Erbt Farben, Schriften und Abstaende aus theme.css - aber bewusst NICHT
   das Layout der Website. Das hier ist ein Werkzeug, keine Seite: sichtbare
   Bedienelemente statt zurueckhaltender, und auf dem Handy genauso
   bedienbar wie am Rechner (Fotos kommen oft direkt vom Handy).

   Laeuft nur auf dem VPS und geht nie mit auf die oeffentliche Seite.
   =========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

body.admin {
  margin: 0;
  background: var(--farbe-grund);
  /* Die Textfarbe MUSS hier stehen: admin.html laedt kein layout.css, und
     ohne diese Zeile stand im Dark Mode schwarze Schrift auf dunklem Grund. */
  color: var(--farbe-text);
  font-family: var(--schrift-titel);
  font-size: 1rem;
  line-height: 1.5;
}

:focus-visible {
  outline: 3px solid var(--farbe-akzent);
  outline-offset: 2px;
}

.admin-kopf :focus-visible {
  outline-color: var(--farbe-nacht-text);
}

img {
  max-width: 100%;
}

.unsichtbar {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- Kopfleiste ----------------------------------------------------------- */

.admin-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-s) var(--abstand-m);
  padding: var(--abstand-s) var(--rand);
  background: var(--farbe-nacht);
  color: var(--farbe-nacht-text);
}

.admin-kopf__marke {
  margin: 0;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.admin-kopf__marke span {
  margin-left: var(--abstand-xs);
  color: var(--farbe-nacht-leise);
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
}

.admin-kopf__wege {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-m);
}

.admin-kopf__wege a {
  padding-block: var(--abstand-xs);
  border-bottom: 1px solid transparent;
  color: inherit;
  text-decoration: none;
}

.admin-kopf__wege a:hover,
.admin-kopf__wege a[aria-current="page"] {
  border-bottom-color: currentColor;
}

.admin-inhalt {
  width: min(100% - 2 * var(--rand), 62rem);
  margin-inline: auto;
  padding-block: var(--abstand-l) var(--abstand-xl);
}

.ansichtskopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--abstand-s) var(--abstand-m);
  margin-bottom: var(--abstand-m);
}

.ansichtskopf h1,
.anmeldung h1 {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.2;
}

.einleitung {
  max-width: 40rem;
  margin: 0 0 var(--abstand-m);
  color: var(--farbe-text-leise);
}

.status {
  flex-basis: 100%;
  margin: 0;
  color: var(--farbe-text-leise);
}

.status--online {
  color: var(--farbe-text);
  font-weight: 600;
}

/* --- Meldungen ------------------------------------------------------------
   Sie kommen oft wortwoertlich vom Server und sind fuer Menschen formuliert.
   Sie duerfen nicht wegblinken. */

.meldung,
.leiste-meldung {
  margin: 0 0 var(--abstand-m);
  padding: var(--abstand-s) var(--abstand-m);
  border-left: 4px solid var(--farbe-text);
  background: var(--farbe-flaeche);
}

.meldung--fehler {
  border-left-color: var(--farbe-fehler);
  color: var(--farbe-fehler);
  font-weight: 600;
}

/* "Ungespeicherte Änderungen." - ein Zustand, keine Nachricht. Leiser. */
.meldung--hinweis {
  padding-block: var(--abstand-xs);
  border-left-color: var(--farbe-linie);
  background: none;
  color: var(--farbe-text-leise);
}

/* --- Anmeldung ------------------------------------------------------------ */

.anmeldung {
  max-width: 24rem;
  margin: var(--abstand-l) auto 0;
}

.anmeldung h1 {
  margin-bottom: var(--abstand-m);
}

/* --- Formularelemente ----------------------------------------------------- */

.feld {
  margin-bottom: var(--abstand-m);
}

.feld label,
.fotos-feld legend {
  display: block;
  margin-bottom: var(--abstand-xs);
  font-weight: 600;
}

input[type="text"],
input[type="password"],
input[type="date"],
select,
textarea {
  width: 100%;
  padding: var(--abstand-s);
  border: 1px solid var(--farbe-text-leise);
  border-radius: 0;
  background: var(--farbe-grund);
  color: var(--farbe-text);
  font: inherit;
  font-size: 1rem;
}

textarea {
  font-family: var(--schrift-text);
  line-height: 1.6;
  resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--farbe-text);
}

.feld__hinweis {
  margin: var(--abstand-xs) 0 0;
  color: var(--farbe-text-leise);
  font-size: var(--groesse-klein);
}

.feldreihe {
  display: grid;
  gap: 0 var(--abstand-m);
}

@media (min-width: 40rem) {
  .feldreihe {
    grid-template-columns: 1fr 1fr;
  }
}

/* --- Knoepfe -------------------------------------------------------------- */

button,
.knopf {
  display: inline-block;
  padding: 0.6rem 1rem;
  border: 1px solid var(--farbe-text);
  border-radius: 0;
  background: var(--farbe-grund);
  color: var(--farbe-text);
  font: inherit;
  font-size: 0.9375rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}

button:hover,
.knopf:hover {
  background: var(--farbe-flaeche);
}

button.wichtig {
  background: var(--farbe-akzent);
  border-color: var(--farbe-akzent);
  color: var(--farbe-akzent-text);
}

button.wichtig:hover {
  background: var(--farbe-akzent-leise);
  border-color: var(--farbe-akzent-leise);
}

button.gefaehrlich {
  border-color: var(--farbe-fehler);
  color: var(--farbe-fehler);
}

button:disabled {
  cursor: default;
  opacity: 0.35;
}

.knopfreihe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-s);
}

/* --- Liste der Beitraege -------------------------------------------------- */

.liste {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--farbe-linie);
}

.eintrag {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr) auto;
  grid-template-areas:
    "bild text marke"
    "bild knoepfe knoepfe";
  align-items: center;
  gap: var(--abstand-xs) var(--abstand-m);
  padding-block: var(--abstand-m);
  border-bottom: 1px solid var(--farbe-linie);
}

@media (min-width: 48rem) {
  .eintrag {
    grid-template-columns: 7rem minmax(0, 1fr) auto auto;
    grid-template-areas: "bild text marke knoepfe";
  }
}

.eintrag__bild {
  grid-area: bild;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--farbe-flaeche);
}

.eintrag__bild img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.eintrag__text {
  grid-area: text;
  min-width: 0;
}

/* Der Titel ist ein Knopf zum Oeffnen, sieht aber aus wie Text. */
.eintrag__titel {
  display: block;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font-size: 1.125rem;
  font-weight: 600;
  text-align: left;
  overflow-wrap: anywhere;
}

.eintrag__titel:hover {
  background: none;
  text-decoration: underline;
}

.eintrag__meta {
  margin: var(--abstand-xs) 0 0;
  color: var(--farbe-text-leise);
  font-size: var(--groesse-klein);
}

.eintrag .marke {
  grid-area: marke;
}

.eintrag__knoepfe {
  grid-area: knoepfe;
}

/* Online gefuellt, Entwurf nur umrandet - auf einen Blick unterscheidbar,
   auch ohne Farbe. */
.marke {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border: 1px solid var(--farbe-text);
  font-size: 0.8125rem;
  white-space: nowrap;
}

.marke--online {
  background: var(--farbe-text);
  color: var(--farbe-grund);
}

.marke--entwurf {
  border-style: dashed;
}

.leer {
  margin: 0;
  padding: var(--abstand-l);
  border: 1px dashed var(--farbe-text-leise);
  color: var(--farbe-text-leise);
  text-align: center;
}

.leer--klein {
  padding: var(--abstand-m);
}

/* --- Fotos ---------------------------------------------------------------- */

.fotos-feld {
  margin: var(--abstand-l) 0 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.fotos-feld legend {
  padding: 0;
  font-size: 1.25rem;
}

.ablage {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--abstand-s) var(--abstand-m);
  padding: var(--abstand-l) var(--abstand-m);
  border: 2px dashed var(--farbe-text-leise);
  text-align: center;
}

.ablage--aktiv {
  border-style: solid;
  border-color: var(--farbe-text);
  background: var(--farbe-flaeche);
}

.ablage__text {
  margin: 0;
}

.ablage .feld__hinweis {
  flex-basis: 100%;
}

/* Am Handy kann man nichts hineinziehen - dort nur der Knopf. */
@media (hover: none) {
  .ablage__text {
    display: none;
  }
}

.hochladen {
  margin: var(--abstand-s) 0;
}

.hochladen__text {
  margin: 0 0 var(--abstand-xs);
  color: var(--farbe-text-leise);
}

.hochladen__text:empty {
  display: none;
}

.hochladen progress {
  width: 100%;
  height: 0.5rem;
  accent-color: var(--farbe-akzent);
}

.fehlerliste {
  margin: 0 0 var(--abstand-m);
  padding-left: 1.25rem;
  color: var(--farbe-fehler);
}

.fehlerliste:empty {
  display: none;
}

.fotoliste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: var(--abstand-m);
  margin: var(--abstand-m) 0 0;
  padding: 0;
  list-style: none;
}

.foto-eintrag {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-xs);
  padding: var(--abstand-s);
  border: 1px solid var(--farbe-linie);
}

.foto-eintrag:first-child {
  border-color: var(--farbe-text);
}

/* Ganz zeigen statt zuschneiden: Hier soll man sehen, was online geht.
   Das Foto liegt absolut im 4:3-Feld - sonst schoebe ein Hochformat das
   Feld in die Hoehe, und die Kacheln waeren unterschiedlich hoch. */
.foto-eintrag__bild {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--farbe-flaeche);
}

.foto-eintrag__bild img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.foto-eintrag__kopf {
  display: flex;
  align-items: center;
  gap: var(--abstand-s);
  margin: 0;
}

.foto-eintrag__nummer {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.foto-eintrag input[type="text"] {
  padding: var(--abstand-xs) var(--abstand-s);
  font-family: var(--schrift-text);
}

.foto-eintrag__knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-xs);
}

.foto-eintrag__knoepfe button {
  padding: 0.35rem 0.6rem;
  font-size: 0.8125rem;
}

.foto-eintrag__knoepfe button.gefaehrlich {
  margin-left: auto;
}

/* --- Leiste unten ----------------------------------------------------------
   Bleibt beim Scrollen stehen, damit Speichern immer erreichbar ist. */

.aktionsleiste {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-s);
  margin-top: var(--abstand-l);
  padding: var(--abstand-s) 0;
  border-top: 1px solid var(--farbe-text);
  background: var(--farbe-grund);
}

.leiste-meldung {
  flex-basis: 100%;
  margin: 0;
}

.formular-ende {
  margin-top: var(--abstand-l);
  text-align: right;
}

/* Am Handy: Knoepfe etwas kleiner, damit Speichern, Zweitknopf und
   Vorschau in eine Zeile passen und die Leiste unten schmal bleibt. */
@media (max-width: 30rem) {
  .aktionsleiste button,
  .aktionsleiste .knopf,
  .eintrag__knoepfe button,
  .eintrag__knoepfe .knopf {
    padding: 0.5rem 0.7rem;
    font-size: 0.875rem;
  }

  .aktionsleiste .knopfreihe,
  .eintrag__knoepfe {
    gap: var(--abstand-xs);
  }

  .eintrag {
    align-items: start;
  }
}

/* --- Banner --------------------------------------------------------------
   Vorschau im Kleinen, mit denselben Filtern wie auf der Seite. */

.banner-muster {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  aspect-ratio: 10 / 3;
  min-height: 9rem;
  margin-bottom: var(--abstand-m);
  overflow: hidden;
  background: var(--farbe-nacht);
  color: var(--farbe-nacht-text);
}

.banner-muster img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  filter: var(--banner-filter);
}

.banner-muster::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--banner-schleier);
}

.banner-muster__rahmen {
  margin: 0;
  padding: var(--abstand-s) var(--abstand-m);
  border: 2px solid var(--farbe-rahmen);
  font-size: clamp(0.75rem, 2vw, 1.125rem);
  letter-spacing: 0.3em;
  text-transform: uppercase;
}