/* ==========================================================================
   Verwaltungsbereich – Stylesheet
   Farben wie in css/style.css; hell oder dunkel je nach Geräteeinstellung.
   ========================================================================== */

:root {
  --bg:       #f5f5f7;
  --card:     #ffffff;
  --fg:       #1d1d1f;
  --dim:      #6e6e73;
  --line:     rgba(0, 0, 0, .12);
  --accent:   #2f6b4f;   /* Vereinsfarbe, wie in css/style.css */
  --accentFg: #ffffff;
  --gefahr:   #b3261e;
  --stripeA:  #e7e7e9;
  --stripeB:  #f1f1f3;
  --ok-bg:    #e6f2ec;
  --warn-bg:  #fff4d6;
  --err-bg:   #fbe9e7;
  --logoBg:   #ececef;   /* Vereinslogo, wie in css/style.css */
  --logoRing: #1d1d1f;
  --logoKern: #1e8a44;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:       #000000;
    --card:     #1a1a1c;
    --fg:       #f5f5f7;
    --dim:      rgba(245, 245, 247, .62);
    --line:     rgba(255, 255, 255, .13);
    --accent:   #4c9a76;
    --accentFg: #08150f;
    --gefahr:   #ff8a80;
    --stripeA:  #1a1a1c;
    --stripeB:  #232326;
    --ok-bg:    #12291e;
    --warn-bg:  #2e2610;
    --err-bg:   #3a1715;
    --logoBg:   rgba(255, 255, 255, .07);   /* wie --chip in css/style.css */
    --logoRing: #ffffff;
    --logoKern: #1e8a44;
  }
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue",
               Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}
a { color: var(--accent); }
h1 { font-size: 28px; line-height: 1.15; letter-spacing: -.02em; margin: 0 0 8px; }
code { font-size: .92em; background: var(--stripeA); padding: 1px 5px; border-radius: 5px; overflow-wrap: anywhere; }
code.block { display: block; margin-top: 8px; padding: 8px 10px; }


/* -- Kopfzeile ----------------------------------------------------------- */

.kopf { background: var(--card); border-bottom: 1px solid var(--line); }
.kopf-innen {
  max-width: 860px;
  margin: 0 auto;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.marke { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--fg); text-decoration: none; }
.punkt { width: 26px; height: 26px; display: block; flex: none; }
.logo-kachel { fill: var(--logoBg); }
.logo-ring   { fill: none; stroke: var(--logoRing); stroke-width: 5; }
.logo-kern   { fill: var(--logoKern); }
.kopf-nav { display: flex; align-items: center; gap: 18px; font-size: 15px; }
.kopf-nav form { margin: 0; }
.link-knopf {
  background: none; border: 0; padding: 0;
  font: inherit; color: var(--accent); text-decoration: underline; cursor: pointer;
}

.inhalt { max-width: 860px; margin: 0 auto; padding: 24px 16px 64px; }
.unterzeile { color: var(--dim); margin: 0 0 20px; font-size: 15px; }
.zurueck { margin: 0 0 12px; font-size: 15px; }
.zurueck a { text-decoration: none; }


/* -- Hinweise ------------------------------------------------------------ */

.hinweis {
  border-radius: 12px;
  padding: 12px 16px;
  margin: 0 0 18px;
  border: 1px solid var(--line);
  font-size: 15px;
}
.hinweis ul { margin: 6px 0 0; padding-left: 20px; }
.hinweis-fehler ul { margin: 0; }
.hinweis-ok      { background: var(--ok-bg); }
.hinweis-warnung { background: var(--warn-bg); }
.hinweis-fehler  { background: var(--err-bg); }


/* -- Knöpfe -------------------------------------------------------------- */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--fg);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.knopf:hover { border-color: var(--accent); }
.knopf:disabled { opacity: .55; cursor: progress; }
.knopf-haupt { background: var(--accent); border-color: var(--accent); color: var(--accentFg); }
.knopf-gefahr { color: var(--gefahr); }
.knopf-gefahr:hover { border-color: var(--gefahr); }
.knopf-gefahr-voll { background: var(--gefahr); border-color: var(--gefahr); color: #ffffff; }
.knopf-klein { min-height: 36px; padding: 0 14px; font-size: 14px; }


/* -- Umschalter News / Termine ------------------------------------------- */

.bereiche {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  margin: 0 0 22px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--line);
}
.bereiche a {
  padding: 8px 20px;
  border-radius: 999px;
  color: var(--fg);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
}
.bereiche a:hover { background: var(--stripeA); }
.bereiche a.aktiv { background: var(--accent); color: var(--accentFg); }


/* -- Liste der Meldungen ------------------------------------------------- */

.karte {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
}
.leer { padding: 24px; color: var(--dim); text-align: center; }

.leiste { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }

.eintrag {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  margin-bottom: 18px;
}
.liste .eintrag { margin-bottom: 0; }
.eintrag-haupt {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  color: inherit;
  text-decoration: none;
}
.mini {
  flex: none;
  width: 96px;
  height: 54px;
  border-radius: 8px;
  object-fit: cover;
  background: var(--stripeA);
}
.mini-leer {
  background: repeating-linear-gradient(135deg, var(--stripeA) 0 8px, var(--stripeB) 8px 16px);
}
.eintrag-text { min-width: 0; display: flex; flex-direction: column; }
.eintrag-text strong { overflow-wrap: anywhere; }
.eintrag-text em { color: var(--dim); font-weight: 400; }
.kicker { font-size: 13px; color: var(--dim); }
.kicker.ist-vorsitz { color: var(--accent); }
.eintrag-knoepfe { flex: none; display: flex; gap: 8px; }
.mini.mini-quadrat { width: 54px; height: 54px; }


/* -- Vorstand: Reihenfolge ändern (admin.js) ----------------------------- */

.griff {
  flex: none;
  align-self: stretch;
  width: 32px;
  margin: -4px 0 -4px -4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 22px;
  color: var(--dim);
  cursor: grab;
  touch-action: none;             /* mit dem Finger ziehen statt scrollen */
  user-select: none;
  -webkit-user-select: none;
}
.griff:hover { color: var(--fg); background: var(--stripeA); }
.sortierliste.sortiert { user-select: none; -webkit-user-select: none; }
.sortierliste.sortiert .griff { cursor: grabbing; }
.sortierliste .eintrag.wird-gezogen {
  position: relative;
  z-index: 2;
  border-color: var(--accent);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .25);
}
.pfeile { display: flex; gap: 4px; }
.pfeile .knopf-rund { font-size: 13px; }
.pfeile .knopf:disabled { opacity: .3; cursor: default; }
.sortier-leiste {
  position: sticky;
  bottom: 12px;
  z-index: 3;
  margin-top: 14px;
  padding: 10px 12px 10px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  border-radius: 14px;
  background: var(--card);
  border: 1px solid var(--accent);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .2);
}
.sortier-leiste strong { margin-right: auto; }


/* -- Termine ------------------------------------------------------------- */

/* Kalenderblatt statt Vorschaubild – wie auf der Termine-Seite */
.datum-block {
  flex: none;
  width: 72px;
  padding: 6px 0;
  border-radius: 10px;
  background: var(--stripeA);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
}
.datum-block .tag { font-size: 24px; font-weight: 700; }
.datum-block .monat { font-size: 11px; font-weight: 600; letter-spacing: .04em; color: var(--dim); }
.zusatz { font-size: 14px; color: var(--dim); overflow-wrap: anywhere; }
.abzeichen {
  align-self: flex-start;
  margin-top: 4px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: var(--warn-bg);
  border: 1px solid var(--line);
}
.ist-aus .datum-block, .ist-aus strong, .ist-aus .kicker { opacity: .6; }

.klapp { margin-top: 26px; }
.klapp summary {
  cursor: pointer;
  font-weight: 600;
  padding: 10px 0;
  color: var(--dim);
}
.klapp[open] summary { margin-bottom: 8px; }


/* -- Formular ------------------------------------------------------------ */

.formular { padding: 20px; display: grid; gap: 18px; }
.feld { display: grid; gap: 6px; margin: 0; min-width: 0; }
.feld > span, .feld legend { font-weight: 600; font-size: 15px; }
.feld small, .feld span small, legend small { color: var(--dim); font-weight: 400; font-size: 13.5px; }
fieldset.feld { border: 0; padding: 0; }
fieldset.feld legend { padding: 0; margin-bottom: 6px; }

input[type=text], input[type=date], input[type=password], textarea {
  width: 100%;
  font: inherit;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  min-height: 44px;
}
textarea { resize: vertical; line-height: 1.55; }
input:focus-visible, textarea:focus-visible, .knopf:focus-visible, a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
input[type=file] { font: inherit; font-size: 15px; max-width: 100%; }

.zwei-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

.bild-vorschau {
  border-radius: 12px;
  overflow: hidden;
  background: var(--stripeA);
  aspect-ratio: 16 / 9;
  max-width: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bild-vorschau.leer {
  background: repeating-linear-gradient(135deg, var(--stripeA) 0 12px, var(--stripeB) 12px 24px);
}
.bild-vorschau img { width: 100%; height: 100%; object-fit: contain; display: block; }
.bild-vorschau.entfernt img { opacity: .25; }

/* Bild ablegen und platzieren (nur mit JavaScript, siehe admin.js).
   Der Rahmen hat dasselbe Format wie die Bilder auf der Webseite. */
.bild-ablage { display: grid; gap: 12px; max-width: 640px; }
.platz-rahmen {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: repeating-linear-gradient(135deg, var(--stripeA) 0 12px, var(--stripeB) 12px 24px);
  outline: 2px dashed var(--dim);        /* Umriss statt Rahmen: ändert das Format nicht */
  outline-offset: -2px;
}
.platz-rahmen canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.platz-rahmen.hat-bild { outline: 0; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.platz-rahmen.hat-bild:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.platz-rahmen.zieht { cursor: grabbing; }
.platz-rahmen.ist-entfernt { cursor: default; }
.platz-rahmen.ist-entfernt canvas { opacity: .25; }

.platz-leer {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  text-align: center;
  color: var(--dim);
  cursor: pointer;
}
.platz-leer strong { color: var(--fg); font-size: 17px; }

/* Hinweis, solange eine Datei über die Seite gezogen wird */
.platz-ablegen {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  color: var(--accentFg);
  background: var(--accent);
  opacity: .9;
}
.bild-ablage.ist-ueber .platz-ablegen { display: flex; }
.bild-ablage.ist-ueber .platz-leer { visibility: hidden; }

.platz-steuerung { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; }
.platz-zoom { display: flex; align-items: center; gap: 8px; flex: 1 1 220px; }
.platz-zoom input[type=range] { flex: 1 1 auto; min-width: 0; margin: 0; accent-color: var(--accent); }
.platz-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; }
.knopf-rund { width: 36px; min-height: 36px; padding: 0; font-size: 20px; line-height: 1; }
.bild-feld .ist-warnung { color: var(--gefahr); }

/* Vorstands-Portraits: quadratisch wie die Karten auf der Webseite */
.bild-quadrat .bild-ablage { max-width: 360px; }
.bild-quadrat .platz-rahmen { aspect-ratio: 1 / 1; }
.bild-quadrat .bild-vorschau { aspect-ratio: 1 / 1; max-width: 240px; }
.bild-quadrat .bild-vorschau img { object-fit: cover; }
.feld-hinweis { color: var(--dim); font-size: 13.5px; margin-top: -8px; }

.haken { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.haken input { width: 18px; height: 18px; margin: 0; }

.aktionen { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.aktionen .rechts { margin-left: auto; }


/* -- Anmelden ------------------------------------------------------------ */

.anmelden { max-width: 420px; margin: 40px auto 0; }
.anmelden .formular { margin-top: 8px; }


/* -- Schmale Bildschirme ------------------------------------------------- */

@media (max-width: 600px) {
  h1 { font-size: 24px; }
  .zwei-spalten { grid-template-columns: 1fr; }
  .eintrag { flex-wrap: wrap; }
  .eintrag-knoepfe { width: 100%; }
  .eintrag-knoepfe .knopf { flex: 1 1 0; }
  .mini { width: 72px; height: 48px; }
  .datum-block { width: 60px; }
  .bereiche { display: flex; }
  .bereiche a { flex: 1 1 0; text-align: center; }
  .formular { padding: 16px; }
  .aktionen .knopf { flex: 1 1 auto; }
  .aktionen .rechts { margin-left: 0; }
}