/* Gemeinsamer Stil der Verwaltung – Filmclub-Look: schwarz/weiß, Poppins (lokal).
   Formensprache wie das Logo: eckige Rahmen mit kräftiger Kontur (die Leinwand) und
   wenige kleine Kreise als Akzent (die Köpfe in den Sitzreihen). Keine Pillen, keine
   runden Ecken. Farbe nur sparsam: ein Akzent zwischen Pink und Violett. */
@font-face { font-family:"Poppins"; font-weight:300; font-display:swap; src:url(schriften/poppins-300.woff2) format("woff2"); }
@font-face { font-family:"Poppins"; font-weight:400; font-display:swap; src:url(schriften/poppins-400.woff2) format("woff2"); }
@font-face { font-family:"Poppins"; font-weight:600; font-display:swap; src:url(schriften/poppins-600.woff2) format("woff2"); }
@font-face { font-family:"Poppins"; font-weight:700; font-display:swap; src:url(schriften/poppins-700.woff2) format("woff2"); }
:root {
  --schwarz:#111111; --dunkelgrau:#3a3a3a; --grau:#777777; --hellgrau:#f2f2f2;
  --linie:#e6e6e6; --weiss:#ffffff; --kontur:3px; --rahmen:#111111;
  --akzent:#a1208f; --akzent-hell:#f7e9f4;          /* Pink–Violett, nur für Akzente */
  --rot:#c62828; --gruen:#2e7d32; --warnton:var(--akzent-hell); --aus:#c8c8c8;
  --titel:"Poppins","Segoe UI",sans-serif;
  --text:"Poppins","Segoe UI","Helvetica Neue",Arial,sans-serif;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:var(--text); font-size:15.5px; line-height:1.55; color:var(--schwarz); background:var(--weiss); }
.wrap { max-width:1200px; margin:0 auto; padding:0 28px 60px; }
h1 { font-family:var(--titel); font-weight:700; font-size:2.1rem; line-height:1.2; margin:30px 0 6px; }
h2 { font-family:var(--titel); font-weight:600; font-size:1.2rem; margin:30px 0 10px; }
a { color:var(--schwarz); }
.hinweis { color:var(--grau); font-size:14px; }
input, select, textarea { border:1px solid #9a9a9a; background:var(--weiss); padding:10px 13px; font:inherit; font-size:15px; outline:none; color:inherit; }
input:focus, select:focus, textarea:focus { border-color:var(--schwarz); box-shadow:0 0 0 1px var(--schwarz) inset; }
input[type=checkbox], input[type=radio] { border:0; box-shadow:none; }
/* eckig: keine runden Ecken – Ausnahmen (Kreise) ausdrücklich */
*, *::before, *::after { border-radius:0 !important; }
.vkopf-burger, .kreis, .marke::before, .kachel .zahl::before, .tag.heute .nr, .vkopf-menue a.aktiv::before { border-radius:50% !important; }
:focus-visible { outline:2px solid var(--schwarz); outline-offset:2px; }

/* ── Pfeile ───────────────────────────────────────────────────────
   Ein dünner Winkel ohne Kreis. Bei Hover rückt er in Pfeilrichtung vor und fährt
   dabei den Schaft aus. Eigenständig als <span class="pfeil [oben|unten|links|diag]">;
   Knöpfe (Senden, Anmelden …) tragen ihn rechts neben dem Text per ::before (Schaft)
   und ::after (Winkel). --g = Kantenlänge des Pfeils. */
:root { --pfeil-winkel:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.5 4.5 16 12l-7.5 7.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.pfeil { --g:24px; display:inline-block; position:relative; width:var(--g); height:var(--g); vertical-align:middle; flex:none;
  transform:rotate(var(--dreh, 0deg)); transition:transform .35s cubic-bezier(.2,.7,.2,1); }
.pfeil.oben { --dreh:-90deg; } .pfeil.unten { --dreh:90deg; } .pfeil.links { --dreh:180deg; } .pfeil.diag { --dreh:-45deg; }
.pfeil::after { content:""; position:absolute; inset:0; background:currentColor;
  -webkit-mask:var(--pfeil-winkel) center/contain no-repeat; mask:var(--pfeil-winkel) center/contain no-repeat; }
.pfeil::before { content:""; position:absolute; top:50%; right:calc(var(--g) / 3); width:0; height:calc(var(--g) / 12);
  margin-top:calc(var(--g) / -24); border-radius:9px; background:currentColor; opacity:0; transition:width .35s cubic-bezier(.2,.7,.2,1), opacity .2s; }
a:hover > .pfeil, button:hover > .pfeil, a:focus-visible > .pfeil, button:focus-visible > .pfeil {
  transform:rotate(var(--dreh, 0deg)) translateX(calc(var(--g) * .2)); }
a:hover > .pfeil::before, button:hover > .pfeil::before, a:focus-visible > .pfeil::before, button:focus-visible > .pfeil::before {
  width:calc(var(--g) * .55); opacity:1; }

/* Knöpfe: Text, rechts daneben der Pfeil (wie auf der Website) */
button { --g:22px; position:relative; border:0; background:none; padding:6px calc(var(--g) + 10px) 6px 0; font:inherit; font-weight:600; font-size:16px; color:var(--schwarz); cursor:pointer; display:inline-flex; align-items:center; gap:12px; }
button::after { content:""; position:absolute; right:0; top:50%; width:var(--g); height:var(--g); margin-top:calc(var(--g) / -2); background:currentColor;
  -webkit-mask:var(--pfeil-winkel) center/contain no-repeat; mask:var(--pfeil-winkel) center/contain no-repeat; transition:transform .35s cubic-bezier(.2,.7,.2,1); }
button::before { content:""; position:absolute; top:50%; right:calc(var(--g) / 3); width:0; height:calc(var(--g) / 12); margin-top:calc(var(--g) / -24); border-radius:9px; background:currentColor; opacity:0;
  transition:width .35s cubic-bezier(.2,.7,.2,1), transform .35s cubic-bezier(.2,.7,.2,1), opacity .2s; }
button:hover:not(:disabled)::after, button:hover:not(:disabled)::before, button:focus-visible::after, button:focus-visible::before { transform:translateX(calc(var(--g) * .2)); }
button:hover:not(:disabled)::before, button:focus-visible::before { width:calc(var(--g) * .55); opacity:1; }
/* ohne Pfeil: leise Knöpfe, Reiter, Symbolknöpfe */
button.leise, button.ohne-pfeil { padding-right:0; }
button.leise::before, button.leise::after, button.ohne-pfeil::before, button.ohne-pfeil::after { content:none; }
button.leise { color:var(--grau); font-weight:400; font-size:14px; }
button.leise:hover { color:var(--schwarz); }
button:disabled { opacity:.5; cursor:default; }

table { width:100%; border-collapse:collapse; font-size:14.5px; }
th { text-align:left; color:var(--grau); font-weight:600; padding:8px 12px 8px 0; border-bottom:1px solid var(--linie); }
td { padding:9px 12px 9px 0; border-bottom:1px solid var(--linie); vertical-align:top; }

.login { max-width:380px; margin:80px auto; }
.login input { width:100%; margin-bottom:12px; }
/* Rahmen: weiß mit Kontur statt grauer Flächen */
.karte { background:var(--weiss); border:2px solid var(--rahmen); padding:20px 22px; margin:16px 0; }
/* Rubrik-Kacheln als querformatige „Leinwand“ mit kräftiger Kontur; bei Hover geht das
   Licht aus (schwarz), der kleine Kreis vor der Zahl wird zum Akzent */
.kacheln { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:22px; margin:28px 0; }
.kachel { position:relative; display:flex; flex-direction:column; aspect-ratio:16 / 9; min-height:150px; border:var(--kontur) solid var(--rahmen); background:var(--weiss);
  padding:18px 20px; color:var(--schwarz); text-decoration:none; transition:background .2s, color .2s; }
.kachel:hover, .kachel:focus-visible { background:var(--schwarz); color:var(--weiss); }
.kachel h2 { margin:0 0 6px; font-size:1.25rem; line-height:1.2; }
.kachel h2 .zahl { display:none; }
.kachel p { color:var(--dunkelgrau); font-size:13.5px; line-height:1.45; transition:color .2s; }
.kachel:hover p, .kachel:focus-visible p { color:#cfcfcf; }
.kachel > .zahl { margin-top:auto; padding-top:10px; display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; letter-spacing:.04em; }
.kachel > .zahl:empty { display:none; }
.kachel .zahl::before { content:""; width:9px; height:9px; background:currentColor; flex:none; transition:background .2s; }
.kachel:hover .zahl::before, .kachel:focus-visible .zahl::before { background:var(--akzent); }
.pwbox { background:var(--weiss); border:2px solid var(--akzent); padding:14px 18px; margin:14px 0; }
.pwbox code { font-size:18px; font-weight:600; letter-spacing:1px; }
.status-aktiv { color:var(--gruen); }
.status-gesperrt { color:var(--rot); }
.folgt { border:1px dashed var(--aus); padding:22px; color:var(--dunkelgrau); margin:20px 0; }
.folgt ul { margin:10px 0 0 20px; }

/* ── Listen und Formulare der Rubriken ─────────────────────────── */
.kopfzeile { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; }
/* Reiter: Text mit Unterstrich statt Pillen – der aktive trägt die kräftige Kontur */
.reiter { display:flex; gap:4px 26px; margin:22px 0 16px; flex-wrap:wrap; border-bottom:1px solid var(--linie); }
.reiter button { padding:8px 0 9px; margin-bottom:-1px; border-bottom:var(--kontur) solid transparent; font-weight:400; font-size:14.5px; color:var(--grau); }
.reiter button::before, .reiter button::after { content:none; }
.reiter button:hover { color:var(--schwarz); }
.reiter button.aktiv { color:var(--schwarz); font-weight:600; border-bottom-color:var(--schwarz); }
.pfeil { --g:18px; margin:0 .15em; }
tr.klick { cursor:pointer; }
tr.klick:hover td { background:var(--hellgrau); }
/* Marken: kleiner Kreis + Text statt Pille – leer = aus, gefüllt = an, Akzent = Entwurf */
.marke { display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; letter-spacing:.03em; color:var(--dunkelgrau); margin:0 12px 2px 0; white-space:nowrap; }
.marke::before { content:""; width:8px; height:8px; border:1.5px solid currentColor; flex:none; box-sizing:border-box; }
.marke.an { color:var(--schwarz); } .marke.an::before { background:currentColor; }
.marke.entwurf { color:var(--akzent); } .marke.entwurf::before { background:currentColor; }
.mini { width:44px; height:62px; object-fit:cover; background:var(--hellgrau); display:block; }
.formular { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px 18px; }
.formular .breit { grid-column:1 / -1; }
.feld { display:flex; flex-direction:column; gap:4px; }
.feld > span { font-size:12.5px; color:var(--grau); font-weight:600; }
.feld input, .feld select, .feld textarea { width:100%; background:var(--weiss); }
.karte .feld input, .karte .feld select, .karte .feld textarea { background:var(--weiss); }
.haken { display:flex; flex-wrap:wrap; gap:10px 24px; }
.haken label { display:flex; align-items:center; gap:8px; font-size:14.5px; cursor:pointer; }
.haken input { width:17px; height:17px; padding:0; accent-color:var(--schwarz); }
.haken small { color:var(--grau); font-size:12px; }
.bildwahl { display:flex; gap:16px; align-items:flex-start; }
.bildwahl img { width:150px; max-height:220px; object-fit:contain; background:var(--weiss); }
.bildwahl .leerbild { width:150px; height:210px; border:1px dashed var(--aus); display:flex; align-items:center; justify-content:center; color:var(--grau); font-size:13px; text-align:center; padding:10px; background:var(--weiss); }
.knopfzeile { display:flex; flex-wrap:wrap; gap:10px 26px; align-items:center; margin-top:20px; }
.meldung { font-size:14px; min-height:1.3em; }
.meldung.fehler { color:var(--rot); }
.meldung.gut { color:var(--gruen); }
.editor-rahmen { background:var(--weiss); border:1px solid #9a9a9a; }
.editor-rahmen .ql-toolbar.ql-snow { border:0; border-bottom:1px solid var(--linie); font-family:var(--text); }
.editor-rahmen .ql-container.ql-snow { border:0; font-family:var(--text); font-size:15.5px; min-height:260px; }
.editor-rahmen .ql-editor { min-height:260px; line-height:1.65; }
.editor-rahmen .ql-editor img { max-width:100%; }
.editor-rahmen .ql-editor p, .editor-rahmen .ql-editor ol, .editor-rahmen .ql-editor ul { margin-bottom:.8em; }
.ki-box { border:1px solid var(--schwarz); border-left:var(--kontur) solid var(--akzent); padding:14px 16px; background:var(--weiss); margin-bottom:12px; }
.ki-box textarea { width:100%; min-height:64px; }
.zurueck-link { display:inline-block; margin-top:22px; color:var(--grau); text-decoration:none; font-size:14px; }
.zurueck-link:hover { color:var(--schwarz); }
.statistik td, .statistik th { text-align:right; }
.statistik td:first-child, .statistik th:first-child { text-align:left; }

@media (max-width:640px) {
  .formular { grid-template-columns:1fr; }
  .wrap { padding:0 16px 40px; }
  h1 { font-size:1.6rem; }
  .kacheln { grid-template-columns:1fr; }
  table { display:block; overflow-x:auto; }
}
.ql-toolbar button::before, .ql-toolbar button::after { content:none !important; }   /* Editor-Werkzeuge ohne Pfeil */