/* Verwaltung — /verwaltung/, im Rahmen der öffentlichen Website.
Kopf und Fuß kommen aus header.php/footer.php, hier steht nur, was die
öffentliche Seite nicht braucht: Formulare, Statusmarken, Fotos.
Tokens kommen aus base.css. */
/* Der Verwaltungsbereich nutzt dieselbe Kopfzeile wie die Website. Dort steht
rechts statt des Anfrage-Buttons, wer angemeldet ist. */
.verwaltung-wer{ font-family:var(--font-mono); font-size:12px; color:var(--text); }
.verwaltung-abmelden{ margin:0; }
/* Der Inhalt bleibt schmaler als die Startseitenabschnitte: Formularzeilen
werden sonst unangenehm lang zu lesen. */
.verwaltung-main{ padding-block:clamp(24px,4vw,48px); max-width:760px; }
.verwaltung-login{ max-width:380px; margin-inline:auto; padding-top:8vh; }
.verwaltung-login h1{ font-family:var(--font-display); font-size:40px; font-weight:400; margin:0 0 8px; }
.verwaltung-sub{ color:var(--text); margin:0 0 24px; }
.verwaltung-form p{ margin:0 0 16px; }
.verwaltung-form label{ display:block; font-family:var(--font-mono); font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--text); margin-bottom:6px; }
.verwaltung-feld-reihe{ display:flex; gap:16px; flex-wrap:wrap; margin:0 0 16px; }
.verwaltung-feld-reihe .verwaltung-feld{ flex:1 1 140px; margin:0; min-width:0; }
.verwaltung-feld-reihe .verwaltung-feld input,
.verwaltung-feld-reihe .verwaltung-feld select{ max-width:none; }
.verwaltung-form input[type=text], .verwaltung-form input[type=password], .verwaltung-form select, .verwaltung-form textarea{
width:100%; max-width:480px; font:inherit; font-size:15px; padding:11px 14px; border:1px solid var(--line-2); border-radius:8px;
background:#fff; color:var(--ink); box-sizing:border-box;
}
.verwaltung-form input:focus, .verwaltung-form select:focus, .verwaltung-form textarea:focus{ outline:2px solid var(--accent-deep); outline-offset:1px; }
.verwaltung-checkbox label, .verwaltung-radios label{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-body); font-size:14px; text-transform:none; letter-spacing:normal; margin-right:18px; color:var(--ink); }
.verwaltung-radios{ display:flex; flex-wrap:wrap; gap:4px 0; }
.verwaltung-pflicht{ color:var(--accent-deep); }
.verwaltung-hinweis{ display:block; font-size:12px; color:var(--text); margin-top:4px; }
.verwaltung-hinweis-inline{ font-weight:400; font-size:14px; color:var(--text); }
.verwaltung-form h2{ font-family:var(--font-display); font-weight:400; font-size:22px; margin:32px 0 12px; padding-top:16px; border-top:1px solid var(--line); }
.verwaltung-form h2:first-of-type{ border-top:none; padding-top:0; margin-top:0; }
.verwaltung-kopf{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:24px; flex-wrap:wrap; }
.verwaltung-kopf h1{ font-family:var(--font-display); font-weight:400; font-size:34px; margin:0; }
.verwaltung-list{ display:flex; flex-direction:column; }
.verwaltung-zeile{ border-bottom:1px solid var(--line); }
/* Der Zeilen-Link trägt die Klasse .woh aus der öffentlichen Objektliste, um
deren Raster und Typografie zu erben. Dort trennt ihre untere Linie ein
Objekt vom nächsten. Hier folgt darunter aber nicht das nächste Objekt,
sondern die Aktionen DESSELBEN Objekts (pausieren, löschen). Die Linie
schnitt die Zeile also mittendurch und trennte Zusammengehöriges.
Die Trennung zwischen den Objekten macht .verwaltung-zeile oben. */
.verwaltung-zeile-link{ display:block; text-decoration:none; color:inherit; border-bottom:0; transition:background .2s var(--ease); }
.verwaltung-zeile-link:hover{ background:rgba(0,0,0,.02); }
/* Eigenes Grid statt das öffentliche .woh-kopf zu recyceln: das hat eine
fünfte Spalte für den Auf-/Zuklapp-Pfeil (30px), den es hier nicht gibt,
und eine Textspalte, die für den anderen Kontext bemessen ist. Ein
fremdes Grid ohne die passende Zahl an Kindern quetscht den Titel in die
falsche Spalte — genau der Fehler, der hier behoben wurde. */
.verwaltung-zeile-kopf{
display:grid; grid-template-columns:44px 64px 1fr auto; gap:20px; align-items:center;
padding:20px 6px; cursor:pointer;
}
.verwaltung-zeile-kopf .n{ font-family:var(--font-mono); font-size:13px; color:var(--accent-deep); }
/* Groesse ausdruecklich auch am ![]()
, nicht nur am : das Bild traegt
eigene width/height-Attribute aus WordPress (z. B. 300x169). Ohne diese
Regel richtet es sich danach und wird querformatig statt quadratisch —
sichtbar nur in einem frischen Browser ohne Cache. */
.verwaltung-zeile-kopf .woh-vorschau{ width:64px; height:64px; }
.verwaltung-zeile-kopf .woh-vorschau img{
width:64px; height:64px; object-fit:cover; display:block; border-radius:8px;
}
.verwaltung-zeile-kopf .woh-titel b{ display:block; font-family:var(--font-display); font-weight:400; font-size:24px; letter-spacing:.02em; color:var(--ink); }
.verwaltung-zeile-kopf .woh-fakten{ display:block; font-size:13px; color:var(--text); margin-top:2px; }
/* Statusspalte gedeckelt: bei einem neu angelegten Objekt zählt der
„fehlt:"-Hinweis leicht zehn Felder auf. Ohne Deckel wuchs die auto-Spalte
mit, quetschte den Titel auf zwei Zeilen und lief rechts aus der Zeile. */
.verwaltung-status{ justify-self:end; max-width:250px; text-align:right; }
/* Pausieren/Löschen: eigene Links UNTER dem großen Klick-Link statt darin
verschachtelt — ein im ist ungültiges HTML, der Browser wirft das
innere beim Parsen weg (derselbe Fehler, der vorher den Foto-Löschen-
Button unwirksam gemacht hat). */
.verwaltung-zeile-aktionen{ display:flex; align-items:center; gap:16px; padding:0 6px 14px 64px; }
.btn-link{ font-family:var(--font-mono); font-size:11px; letter-spacing:.02em; color:var(--text); text-decoration:underline; }
.btn-link:hover{ color:var(--ink); }
/* ---- Löschen mit Rückfrage im Knopf --------------------------------------
Nachbau einer React-Komponente (framer-motion) ohne Framework: der Wechsel
von "löschen" auf "Wirklich?" ist eine Breiten-Transition, das Abbrechen-
Kreuz fährt daneben ein. Bewusst klein gehalten (Höhe 26px statt der 40px
der Vorlage), weil hier drei Zeilen untereinander stehen und ein großer
roter Knopf pro Zeile die Liste dominieren würde.
Maße orientieren sich an .btn-link daneben: gleiche Schrift, gleiche
Schriftgröße, damit die Zeile ruhig bleibt. */
.loesch-feld{ display:inline-flex; align-items:center; gap:6px; margin:0; }
.loesch-btn{
display:inline-flex; align-items:center; gap:6px;
height:26px; padding:0 10px;
font-family:var(--font-mono); font-size:11px; letter-spacing:.02em;
color:var(--accent-deep);
background:rgba(194,58,22,.08);
border:1px solid rgba(194,58,22,.22);
border-radius:999px;
cursor:pointer;
transition:background .18s ease, border-color .18s ease, color .18s ease;
}
.loesch-btn:hover{ background:rgba(194,58,22,.14); border-color:rgba(194,58,22,.38); }
.loesch-btn:focus-visible{ outline:2px solid var(--accent-deep); outline-offset:2px; }
.loesch-ico{ display:inline-flex; }
.loesch-ico svg{ width:12px; height:12px; }
.loesch-wort{ white-space:nowrap; }
/* Bestätigungszustand: kräftiger gefüllt, damit der zweite Klick sichtbar
etwas anderes ist als der erste. */
.loesch-feld.ist-offen .loesch-btn{
background:var(--accent-deep); border-color:var(--accent-deep); color:#fff;
}
.loesch-feld.ist-offen .loesch-btn:hover{ background:#a8320f; border-color:#a8320f; }
/* Abbrechen-Kreuz: fährt aus der Breite 0 heraus, statt hart zu erscheinen.
overflow:hidden hält das SVG während der Transition im Rahmen. */
.loesch-ab{
display:inline-flex; align-items:center; justify-content:center;
width:0; height:26px; padding:0;
overflow:hidden; opacity:0;
color:var(--text);
/* border-width statt border-color auf 0: ein transparenter 1px-Rahmen
links und rechts ergäbe auch bei width:0 noch 2px Restbreite, sichtbar
als kurzer Strich neben dem Knopf. */
background:none; border:0 solid var(--line-2); border-radius:999px;
cursor:pointer;
transition:width .18s ease, opacity .18s ease, border-width .18s ease, color .18s ease;
}
.loesch-feld.ist-offen .loesch-ab{ width:26px; opacity:1; border-width:1px; }
.loesch-ab:hover{ color:var(--ink); border-color:var(--ink); }
.loesch-ab:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
.loesch-ab svg{ width:12px; height:12px; }
/* Wer Bewegung reduziert eingestellt hat, bekommt den Zustandswechsel ohne
Animation. Die Funktion bleibt identisch. */
@media (prefers-reduced-motion: reduce){
.loesch-btn, .loesch-ab{ transition:none; }
}
.tag{ font-family:var(--font-mono); font-size:11px; letter-spacing:.04em; padding:4px 10px; border-radius:999px; white-space:nowrap; }
.tag-sichtbar{ background:rgba(26,127,55,.12); color:#1a7f37; }
.tag-entwurf{ background:rgba(0,0,0,.06); color:var(--text); }
/* Darf umbrechen, anders als die kurzen Status-Pillen. Mehrzeilig wirkt
eine volle Pillenrundung wie eine Wurst, daher der kleinere Radius. */
.tag-fehlt{ background:rgba(194,58,22,.1); color:var(--accent-deep);
white-space:normal; display:inline-block; line-height:1.5; border-radius:10px; text-align:left; }
.tag-pausiert{ background:rgba(194,58,22,.08); color:var(--text); }
.verwaltung-fotos{ display:flex; flex-wrap:wrap; gap:20px; margin-bottom:16px; }
.verwaltung-foto{ margin:0; width:220px; border:1px solid var(--line); border-radius:10px; padding:12px; }
.verwaltung-foto img{ width:100%; height:110px; object-fit:cover; border-radius:6px; display:block; }
.verwaltung-foto-n{ display:block; font-family:var(--font-mono); font-size:11px; color:var(--accent-deep); margin-top:6px; }
.verwaltung-foto-feld{ margin:8px 0 0; }
.verwaltung-foto-feld label{ font-size:10px; }
.verwaltung-foto-feld input[type=text]{ width:100%; max-width:none; padding:7px 9px; font-size:13px; }
.verwaltung-foto-feld .verwaltung-hinweis{ font-size:11px; }
.verwaltung-foto form{ margin-top:8px; }
.btn-link-danger{ background:none; border:none; padding:0; font-family:var(--font-mono); font-size:11px; color:var(--accent-deep); text-decoration:underline; cursor:pointer; }
a.btn-link-danger{ display:inline-block; }
.verwaltung-upload-box{ border:1px dashed var(--line-2); border-radius:10px; padding:16px; margin-bottom:24px; }
.verwaltung-aktionen{ display:flex; gap:12px; flex-wrap:wrap; padding-top:8px; }
.field-err{ color:var(--accent-deep); font-size:14px; }