/* assets/magazin.css — Magazin "Vor-Bilder" und Verwaltungsbereich.
   Baut auf den Farben und Abständen aus style.css auf; hier steht nur, was
   dort noch nicht vorkommt. */

/* ── gemeinsame Kleinigkeiten ───────────────────────────────────── */
.btn-klein { padding: 7px 14px; font-size: .92rem; }

.mg-status {
  display: flex; flex-wrap: wrap; gap: 10px 20px;
  justify-content: space-between; align-items: center;
  padding: 12px 16px; margin-bottom: 28px;
  background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--r);
  font-size: .93rem; color: var(--ink-soft);
}
.mg-status a { color: var(--accent); }

.mg-fehler, .mg-melder.ist-fehler, .vw-fehler, .vw-melder.ist-fehler, .vw-formfehler {
  padding: 10px 14px; border-radius: var(--r);
  background: #F6E7E2; color: #6B2C18; border: 1px solid #DFC4BA;
}
.mg-hinweis, .mg-melder { margin-top: 14px; color: var(--ink-soft); font-size: .95rem; }
.mg-leer, .vw-leer, .vw-lade { color: var(--ink-soft); }

.mg-vergessen {
  margin-top: 30px; padding: 16px 18px;
  background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--r);
}
.mg-vergessen summary { cursor: pointer; color: var(--accent); }
.mg-vergessen[open] summary { margin-bottom: 10px; }
.mg-vergessen .form { margin-top: 8px; }

/* ── Übersicht: Ausgaben als Karten ─────────────────────────────── */
.mg-karten {
  display: grid; gap: 32px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.mg-karte { border: 1px solid var(--line); background: #fff; }
.mg-karte-bild { display: block; aspect-ratio: 3 / 4; overflow: hidden; background: var(--bg-alt); }
.mg-karte-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mg-kein-cover {
  display: grid; place-items: center; height: 100%;
  font-family: Georgia, 'Times New Roman', serif; font-size: 1.4rem; color: var(--accent);
}
.mg-karte-text { padding: 20px 22px 24px; }
.mg-karte-text h3 { margin: 4px 0 8px; font-size: 1.25rem; }
.mg-karte-text h3 a { text-decoration: none; color: inherit; }
.mg-karte-text h3 a:hover { color: var(--accent); }

/* ── Eine Ausgabe ───────────────────────────────────────────────── */
.mg-ausgabe-kopf { display: flex; gap: 36px; align-items: flex-start; flex-wrap: wrap; }
.mg-cover {
  width: 190px; flex: 0 0 auto; border: 1px solid var(--line);
  box-shadow: 0 12px 34px rgba(35, 33, 28, .12);
}

.mg-beitraege { display: grid; gap: 26px; }
.mg-beitrag {
  display: grid; grid-template-columns: 180px 1fr; gap: 24px;
  padding-bottom: 26px; border-bottom: 1px solid var(--line);
}
.mg-beitrag:last-child { border-bottom: 0; padding-bottom: 0; }
/* Ohne Beitragsbild gaebe es sonst eine leere 180-px-Spalte und der Text
   quetscht sich in den Rest. */
.mg-beitrag.ohne-bild { grid-template-columns: 1fr; }
.mg-beitrag-bild { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-alt); }
.mg-beitrag-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mg-beitrag h3 { margin: 4px 0 6px; font-size: 1.3rem; }
.mg-beitrag h3 a { text-decoration: none; color: inherit; }
.mg-beitrag h3 a:hover { color: var(--accent); }
.mg-autor { margin: 0 0 8px; color: var(--ink-soft); font-style: italic; }
.mg-beitrag.ist-gesperrt .mg-beitrag-bild img { filter: grayscale(.35); opacity: .8; }
/* Platzhalter statt kaputtem Bild, solange der Beitrag gesperrt ist. */
.mg-bild-zu {
  display: grid; place-items: center; text-decoration: none;
  background: var(--bg-alt); border: 1px dashed var(--line); color: var(--accent);
  font-size: 1.5rem;
}
.mg-bild-zu:hover { border-color: var(--accent); }
/* Ausgabe, die nur die Verwaltung sieht - gestrichelt, damit man sie auf
   einen Blick von den freigegebenen unterscheidet. */
.mg-karte.ist-entwurf { outline: 1px dashed var(--line); outline-offset: 4px; }
/* Bild mitten im Beitragstext. Darf breiter sein als die Textspalte,
   bleibt aber innerhalb des Lesebereichs. */
.mg-textbild { margin: 30px 0; }
.mg-textbild img { width: 100%; height: auto; display: block; }
.mg-textbild figcaption {
  margin-top: 8px; font-size: .9rem; color: var(--ink-soft); line-height: 1.5;
}
.mg-bildfehler { color: var(--accent); font-size: .92rem; }
/* Anmerkung der Redaktion - klar als fremde Stimme im Beitrag erkennbar. */
.mg-hinweis {
  margin: 26px 0; padding: 14px 18px;
  border-left: 3px solid var(--accent); background: var(--bg-alt);
  font-style: italic; color: var(--ink-soft);
}
.mg-hinweis p { margin: 0 0 8px; }
.mg-hinweis p:last-child { margin-bottom: 0; }
.mg-hinweis-kopf {
  font-style: normal; font-size: .78rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 6px !important;
}
.mg-mehr { margin-top: 10px; }
.mg-schloss { color: var(--accent); margin-right: 6px; }
.mg-schloss-text { color: var(--ink-soft); font-size: .92rem; margin-right: 10px; }

/* ── Artikel ────────────────────────────────────────────────────── */
.mg-grossbild { margin: 0; }
.mg-grossbild img { width: 100%; height: auto; display: block; border: 1px solid var(--line); }
.mg-grossbild figcaption { margin-top: 10px; font-size: .9rem; color: var(--ink-soft); }
.mg-text { max-width: 68ch; margin-left: 0; margin-right: auto; }
.mg-text h2 { margin: 34px 0 12px; }
.mg-text p { line-height: 1.75; }

@media (max-width: 720px) {
  .mg-beitrag { grid-template-columns: 1fr; }
  .mg-beitrag-bild { aspect-ratio: 16 / 9; }
  .mg-cover { width: 130px; }
}

/* ── Verwaltungsbereich ─────────────────────────────────────────── */
.vw-kopf { background: var(--bg-alt); padding: 34px 0 26px; border-bottom: 1px solid var(--line); }
.vw-kopf h1 { margin: 0; }
.vw-kopf .small { margin: 10px 0 0; }

.vw-reiter {
  display: flex; gap: 4px; flex-wrap: wrap;
  margin: 26px 0 22px; border-bottom: 1px solid var(--line);
}
.vw-reiter button {
  appearance: none; background: none; border: 0; border-bottom: 2px solid transparent;
  padding: 12px 16px; font: inherit; font-size: .98rem; color: var(--ink-soft); cursor: pointer;
}
.vw-reiter button:hover { color: var(--ink); }
.vw-reiter button.ist-aktiv { color: var(--ink); border-bottom-color: var(--accent); }

.vw-melder {
  padding: 10px 14px; margin: 0 0 18px; border-radius: var(--r);
  background: #E7EFE6; color: #26402A; border: 1px solid #C6D8C4;
}

.vw-kopfzeile {
  display: flex; flex-wrap: wrap; gap: 12px;
  justify-content: space-between; align-items: center; margin-bottom: 18px;
}
.vw-kopfzeile h2 { margin: 0; }
.vw-kopfzeile > div { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.vw-kopfzeile input[type="search"] {
  padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--r);
  font: inherit; background: #fff; min-width: 180px;
}

.vw-zahlen { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 34px; }
.vw-kachel {
  flex: 1 1 150px; padding: 20px 22px; background: var(--bg-alt);
  border: 1px solid var(--line); border-radius: var(--r);
}
.vw-kachel strong { display: block; font-size: 2rem; line-height: 1.1; }
.vw-kachel span { color: var(--ink-soft); font-size: .92rem; }
.vw-kachel.ist-warnung { background: #F8F0DE; border-color: #E3D3AE; }

.vw-hilfe { max-width: 68ch; }
.vw-hilfe p { color: var(--ink-soft); }

.vw-liste { display: grid; gap: 2px; margin-bottom: 30px; }
.vw-zeile {
  display: grid; grid-template-columns: 1fr auto auto; gap: 16px; align-items: center;
  padding: 14px 16px; background: #fff; border: 1px solid var(--line);
}
.vw-zeile.ist-abgelaufen { background: var(--bg-alt); }
.vw-zeile-haupt { display: grid; gap: 2px; min-width: 0; }
.vw-zeile-haupt strong { overflow-wrap: anywhere; }
.vw-klein { font-size: .86rem; color: var(--ink-soft); }
.vw-zeile-knoepfe { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.vw-gruppe { margin: 26px 0 10px; font-size: 1.05rem; color: var(--ink-soft); }

.vw-abzeichen {
  display: inline-block; padding: 4px 10px; border-radius: 999px;
  font-size: .8rem; white-space: nowrap;
}
.ist-gruen { background: #E7EFE6; color: #26402A; }
.ist-gelb  { background: #F8F0DE; color: #5B4718; }
.ist-blau  { background: #E3EAF1; color: #23415C; }
.ist-grau  { background: var(--bg-alt); color: var(--ink-soft); }

.vw-loeschen {
  appearance: none; background: none; border: 1px solid var(--line); border-radius: var(--r);
  width: 32px; height: 32px; font-size: 1.1rem; line-height: 1; color: var(--ink-soft); cursor: pointer;
}
.vw-loeschen:hover { border-color: #C08373; color: #8A3B22; }

.vw-werkgitter {
  display: grid; gap: 18px; margin-bottom: 30px;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.vw-werk { margin: 0; border: 1px solid var(--line); background: #fff; }
.vw-werk img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.vw-werk figcaption { display: grid; gap: 5px; padding: 12px 14px 14px; justify-items: start; }

/* ── Dialog ─────────────────────────────────────────────────────── */
body.vw-dialog-offen { overflow: hidden; }
.vw-dialog {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: start center;
  padding: 24px 16px; overflow-y: auto; background: rgba(35, 33, 28, .55);
}
/* WICHTIG: Eine Klasse mit display schlaegt das hidden-Attribut des Browsers.
   Ohne diese Zeile liegt der unsichtbare Dialog dauerhaft ueber der Seite und
   verschluckt jeden Klick — das Panel waere komplett unbedienbar. */
[hidden] { display: none !important; }
.vw-dialog-innen {
  width: min(680px, 100%); background: var(--bg);
  border: 1px solid var(--line); border-radius: var(--r);
}
.vw-dialog-kopf {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 22px; border-bottom: 1px solid var(--line);
}
.vw-dialog-kopf h2 { margin: 0; font-size: 1.2rem; }
.vw-zu {
  appearance: none; background: none; border: 0; font-size: 1.7rem; line-height: 1;
  cursor: pointer; color: var(--ink-soft); padding: 0 4px;
}
#vw-formular { padding: 22px; display: grid; gap: 6px; }
#vw-formular label { margin-top: 12px; font-size: .95rem; }
#vw-formular input, #vw-formular select, #vw-formular textarea {
  padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r);
  font: inherit; background: #fff; width: 100%;
}
#vw-formular textarea { line-height: 1.6; resize: vertical; }
.vw-haken { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.vw-haken input { width: auto; }
.vw-formknoepfe { display: flex; gap: 12px; margin-top: 22px; flex-wrap: wrap; }

.vw-bildfeld,
.vw-textbildfeld {
  display: grid; grid-template-columns: 110px 1fr; gap: 14px; align-items: center;
  padding: 12px; border: 1px solid var(--line); border-radius: var(--r); background: #fff;
}
/* Das Einfuege-Feld gehoert optisch zum Textfeld darueber, nicht daneben. */
.vw-textbildfeld { border-style: dashed; }
.vw-werkzeuge { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.vw-bildvorschau {
  aspect-ratio: 1; background: var(--bg-alt); display: grid; place-items: center;
  font-size: .8rem; color: var(--ink-soft); overflow: hidden;
}
.vw-bildvorschau img { width: 100%; height: 100%; object-fit: cover; }
.vw-uploadstand { margin: 6px 0 0; }

@media (max-width: 640px) {
  .vw-zeile { grid-template-columns: 1fr; }
  .vw-zeile-knoepfe { justify-content: flex-start; }
}