/* Farben seit 04.09.2026 auf WCAG-AA (≥ 4,5:1 auf Weiß): muted 3,8→7,0 · ok 3,3→5,0 · warn 3,2→4,9 · pink/Fehler 3,5→5,9.
       Vorher las ein älteres Vereinsmitglied die rote Fehlermeldung schlicht nicht. Primärknopf: weiß auf dem Verlauf ≥ 4,6. */
    :root { --ink:#1f1830; --muted:#5b5266; --line:#ece3ef; --bg:#f7f3fb; --surface:#fff; --pink:#be185d; --violet:#6d28d9; --grad:linear-gradient(115deg,var(--pink),var(--violet)); --ok:#15803d; --warn:#b45309; --radius:14px; }
    * { box-sizing:border-box; }
    body { margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color:var(--ink); background:var(--bg); }
    .bar { position:sticky; top:0; z-index:10; display:flex; align-items:center; gap:.8rem; padding:.7rem 1.2rem; background:rgba(255,255,255,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
    .bar .tl { font-size:1.05rem; display:flex; align-items:center; gap:.5rem; } .bar .tl b { font-weight:800; }
    #sitesel { font:inherit; font-weight:700; font-size:.95rem; padding:.35rem .6rem; border:1px solid var(--line); border-radius:9px; background:#fff; color:var(--violet); cursor:pointer; }
    /* ⚙-Knopf (Master-Übersicht) — war ein Inline-style, das eine CSP mit style-src rügt. */
    #roster { padding:.35rem .55rem; }
    .tag { font-size:.72rem; font-weight:700; padding:.2rem .6rem; border-radius:100px; background:#fde8f1; color:var(--pink); visibility:hidden; }
    .tag.show { visibility:visible; }
    /* Sitzung (Fassungen, Abmelden) rechts neben dem Titel, dann Speichern, dann Status */
    .sess { margin-left:auto; display:flex; gap:.5rem; }
    .sess button { padding:.45rem .9rem; font-size:.85rem; }
    .acts { display:flex; gap:.5rem; }
    button { font:inherit; font-weight:700; padding:.55rem 1.1rem; border-radius:100px; border:1px solid var(--line); background:var(--surface); color:var(--ink); cursor:pointer; transition:transform .15s,opacity .15s; }
    button:hover { transform:translateY(-1px); } button:disabled { opacity:.5; cursor:default; transform:none; }
    button.primary { background:var(--grad); color:#fff; border:none; box-shadow:0 10px 22px -10px var(--pink); }
    /* Seitenname in der Kopfzeile (aus site.json.name) — vorher stand nur „Self-Edit" da. */
    .sitename { font-weight:600; color:var(--muted); font-size:.92rem; max-width:34ch; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .status { font-size:.82rem; color:var(--muted); min-width:14ch; }
    /* Leer-Hinweis unter einem leeren Textfeld + Vorschau des eingebauten Originals im Bildfeld */
    .leerhinweis { display:block; font-size:.72rem; color:var(--muted); margin-top:.2rem; }
    .imgfield img.original { opacity:.55; outline:1px dashed var(--line); }
    /* Füllstand des Speichers (ab 50 % sichtbar, ab 90 % rot) */
    .fuell { font-size:.72rem; color:var(--muted); white-space:nowrap; } .fuell.voll { color:var(--pink); font-weight:700; }
    /* Abbrechen während eines Uploads */
    #uploadAbbruch { padding:.25rem .6rem; font-size:.74rem; }
    .status.ok { color:var(--ok); } .status.busy { color:var(--warn); } .status.err { color:var(--pink); } .status.warn { color:var(--warn); font-weight:600; }
    /* --barh setzt app.js per CSSOM aus der gemessenen Leistenhöhe (Fallback 57 px = eine Zeile) */
    main { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); height:calc(100vh - var(--barh, 57px)); }
    .viewtabs { display:none; }
    .form { overflow-y:auto; padding:1.3rem 1.3rem 5rem; }
    .card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1rem 1.1rem; margin-bottom:1rem; }
    .card>h2 { font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--violet); margin:0 0 .8rem; }
    .itemhead { font-size:.82rem; font-weight:700; color:var(--muted); margin:.9rem 0 .3rem; padding-top:.6rem; border-top:1px dashed var(--line); }
    .itemhead:first-child { border-top:none; padding-top:0; margin-top:0; }
    .field { margin-bottom:.8rem; }
    .field label { display:block; font-size:.78rem; font-weight:600; margin-bottom:.25rem; }
    .field .note { font-size:.72rem; color:var(--muted); font-weight:400; }
    .field input,.field textarea { width:100%; font:inherit; padding:.5rem .6rem; border:1px solid var(--line); border-radius:9px; color:var(--ink); background:#fff; }
    .field input:focus,.field textarea:focus { outline:2px solid rgba(123,60,255,.35); border-color:var(--violet); }
    .field textarea { resize:vertical; min-height:3.4em; line-height:1.5; }
    .imgfield { display:flex; gap:.8rem; align-items:flex-start; }
    .imgfield img { width:92px; height:92px; object-fit:cover; border-radius:9px; border:1px solid var(--line); background:#f1eaf5; flex:none; }
    .imgfield .meta { flex:1; display:flex; flex-direction:column; gap:.35rem; }
    .imgfield button.pick { padding:.4rem .8rem; font-size:.82rem; align-self:flex-start; }
    /* Bild ersetzen / Bild entfernen nebeneinander (entfernen nur, wenn ein Bild gesetzt ist) */
    .imgfield .imgacts { display:flex; gap:.45rem; flex-wrap:wrap; align-items:center; }
    .imgfield button.imgdel { padding:.4rem .8rem; font-size:.78rem; }
    /* PDF-Feld (Typ "pdf", 04.09.2026): teilt die Zeilen-/Knopf-Optik von .imgfield (row hat
       BEIDE Klassen), nur Vorschau + Beschriftung sind eigen — kein Thumbnail-<img>, sondern
       ein Dateisymbol + Linktext. */
    .dateifeld .dateiicon { width:92px; height:92px; border-radius:9px; border:1px solid var(--line); background:#f1eaf5; flex:none; display:flex; align-items:center; justify-content:center; font-size:2rem; }
    .dateifeld .dateiname { font-size:.82rem; color:var(--muted); word-break:break-word; }
    .dateifeld .dateiname a { color:var(--violet); font-weight:600; text-decoration:none; }
    .dateifeld .dateiname a:hover { text-decoration:underline; }
    .prev { border-left:1px solid var(--line); background:#efe9f3; display:flex; flex-direction:column; }
    .prevbar { display:flex; gap:.4rem; align-items:center; padding:.5rem .8rem; background:#fff; border-bottom:1px solid var(--line); font-size:.82rem; }
    .prevbar button { padding:.3rem .7rem; font-size:.8rem; }
    .prevbar button.active { background:var(--violet); color:#fff; border-color:var(--violet); }
    .prevbar a { margin-left:auto; color:var(--violet); font-weight:700; text-decoration:none; }
    /* Hinweiszeile über der Vorschau (Zugangswort-Schutz, fehlende Adresse) */
    .prevhint { margin:0; padding:.45rem .8rem; font-size:.8rem; line-height:1.4; color:var(--ink); background:#fff7e6; border-bottom:1px solid #f3d9a4; }
    .prevwrap { flex:1; overflow:auto; overflow-x:hidden; display:flex; justify-content:center; padding:1rem; }
    #preview { flex:none; width:1280px; height:100%; border:0; background:#fff; border-radius:10px; box-shadow:0 20px 50px -25px rgba(40,10,60,.4); transform-origin:top center; }
    .hint { font-size:.8rem; color:var(--muted); padding:.4rem 0 1.4rem; }
    /* Wachsende Listen (Blog-Beiträge): Hinzufügen/Löschen + Erklärtext */
    .grouphint { font-size:.8rem; color:var(--muted); margin:0 0 .7rem; line-height:1.45; }
    .leer { font-size:.85rem; color:var(--muted); font-style:italic; margin:.2rem 0 0; }
    button.add { width:100%; padding:.6rem 1rem; font-size:.9rem; border:1px dashed var(--violet); color:var(--violet); background:#fbf8ff; border-radius:11px; }
    button.add:hover { background:#f5eeff; }
    .itemhead { display:flex; align-items:center; justify-content:space-between; gap:.6rem; }
    .itemacts { display:flex; align-items:center; gap:.3rem; flex:none; }
    button.del { padding:.15rem .6rem; font-size:.72rem; font-weight:600; color:var(--muted); border-radius:100px; }
    button.del:hover { color:var(--pink); border-color:var(--pink); }
    /* ▲▼ Umsortieren (nur wachsende Listen) — am Rand deaktiviert, nicht versteckt (Knöpfe springen nicht) */
    button.mv { padding:.15rem .55rem; font-size:.72rem; font-weight:600; color:var(--muted); border-radius:100px; line-height:1.3; }
    button.mv:hover:not(:disabled) { color:var(--violet); border-color:var(--violet); }
    button.mv:disabled { opacity:.35; }
    /* PIN-Gate: eigenes Formular statt window.prompt() — Browser blocken/verstecken den
       nativen Dialog manchmal still (In-App-Browser, Dialog-Spam-Schutz, Erweiterungen). */
    .pingate { display:none; position:fixed; inset:0; z-index:50; background:rgba(31,24,48,.45); backdrop-filter:blur(3px); align-items:center; justify-content:center; padding:1.2rem; }
    .pingate-card { background:var(--surface); border-radius:var(--radius); padding:1.6rem 1.5rem; width:100%; max-width:22rem; box-shadow:0 24px 60px -20px rgba(31,24,48,.5); display:flex; flex-direction:column; gap:.9rem; }
    .pingate-card label { font-weight:700; font-size:.95rem; }
    .pingate-card input { font:inherit; font-size:1.1rem; letter-spacing:.08em; padding:.6rem .7rem; border:1px solid var(--line); border-radius:9px; color:var(--ink); }
    .pingate-card input:focus { outline:2px solid rgba(123,60,255,.35); border-color:var(--violet); }
    .pingate-card button { width:100%; }
    .pingate-card .row { display:flex; gap:.5rem; } .pingate-card .row button { flex:1; width:auto; }
    /* Fehlertext IM Dialog (falscher PIN, Drossel) — vorher stand er nur oben links außerhalb. */
    .pingate-err { margin:0; font-size:.88rem; font-weight:600; color:var(--pink); }
    /* „Letzte Fassungen": Overlay wie das PIN-Gate, breiter, mit Liste + Kurz-Differenz */
    .pingate.offen { display:flex; }
    .sheetcard { background:var(--surface); border-radius:var(--radius); padding:1.2rem 1.3rem 1.3rem; width:100%; max-width:34rem; max-height:min(85vh,44rem); overflow:auto; box-shadow:0 24px 60px -20px rgba(31,24,48,.5); display:flex; flex-direction:column; gap:.7rem; }
    .sheethead { display:flex; align-items:center; justify-content:space-between; gap:.6rem; }
    .sheethead h2 { margin:0; font-size:1.05rem; }
    #histClose { padding:.3rem .7rem; }
    .sheetcard .grouphint { margin:0; }
    .histlist { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.4rem; }
    .histlist li { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; padding:.5rem .6rem; border:1px solid var(--line); border-radius:9px; font-size:.88rem; }
    .histlist li.leer { border:none; padding:.2rem 0; font-style:italic; color:var(--muted); }
    .histlist li.aktiv { border-color:var(--violet); background:#fbf8ff; }
    .histlist .wann { font-weight:700; } .histlist .groesse { color:var(--muted); font-size:.78rem; }
    .histlist .hacts { margin-left:auto; display:flex; gap:.35rem; }
    .histlist .hacts button { padding:.3rem .7rem; font-size:.78rem; }
    .histdiff { border-top:1px dashed var(--line); padding-top:.7rem; font-size:.85rem; }
    .histdiff h3 { margin:0 0 .45rem; font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--violet); }
    .histdiff ul { margin:0; padding-left:1.1rem; display:flex; flex-direction:column; gap:.35rem; }
    .histdiff .damals { color:var(--muted); } .histdiff .jetzt { color:var(--ink); }
    .histdiff .leer, .histdiff .mehr { font-style:italic; color:var(--muted); margin:.3rem 0 0; }
    /* Konflikt-Dialog (zwei Fassungen): Liste wie die Verlaufs-Differenz, drei Wege als Knöpfe */
    .konfliktlist { list-style:none; margin:0; padding:.7rem 0 0; border-top:1px dashed var(--line); display:flex; flex-direction:column; gap:.4rem; font-size:.85rem; }
    .sheetcard .row { display:flex; gap:.5rem; flex-wrap:wrap; }
    .sheetcard .row button { flex:1 1 auto; }
    /* Foto-Alben (Gruppentyp "albums"): Alben anlegen/umbenennen/löschen + Mehrfach-Upload */
    .album { border:1px solid var(--line); border-radius:11px; padding:.8rem .9rem; margin-bottom:.9rem; background:#fdfbff; }
    .albhead { display:flex; align-items:center; gap:.6rem; margin-bottom:.55rem; }
    input.albtitle { flex:1; min-width:0; font:inherit; font-weight:700; padding:.45rem .6rem; border:1px solid var(--line); border-radius:9px; color:var(--ink); background:#fff; }
    input.albtitle:focus { outline:2px solid rgba(123,60,255,.35); border-color:var(--violet); }
    /* ▲▼ ganze Alben umsortieren (04.09.) — gleiche Zeile wie „Album löschen" */
    .albhead-acts { display:flex; align-items:center; gap:.3rem; flex:none; }
    .albgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(118px,1fr)); gap:.6rem; margin:.4rem 0 .7rem; }
    .albimg { border:1px solid var(--line); border-radius:9px; padding:.35rem; background:#fff; display:flex; flex-direction:column; gap:.3rem; }
    .albimg img { width:100%; height:84px; object-fit:cover; border-radius:6px; background:#f1eaf5; display:block; }
    .albimg input { font:inherit; font-size:.72rem; padding:.28rem .4rem; border:1px solid var(--line); border-radius:6px; width:100%; color:var(--ink); }
    .albimg input:focus { outline:2px solid rgba(123,60,255,.35); border-color:var(--violet); }
    .albtools { display:flex; gap:.25rem; }
    .albtools button { flex:1; padding:.18rem 0; font-size:.72rem; font-weight:600; border-radius:6px; color:var(--muted); }
    .albtools button:hover:not(:disabled) { color:var(--violet); border-color:var(--violet); }
    .albimg button.albersetz { padding:.25rem .4rem; font-size:.72rem; font-weight:600; border-radius:6px; width:100%; }
    .albacts { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
    .albacts button.pick { padding:.4rem .8rem; font-size:.82rem; }
    .albcount { font-size:.75rem; color:var(--muted); }
    .albnew { display:flex; flex-direction:column; gap:.55rem; padding:.85rem .9rem; border:1px dashed var(--violet); border-radius:11px; background:#fbf8ff; }
    .albnew label { font-size:.82rem; font-weight:700; }
    .albnew input { font:inherit; padding:.5rem .6rem; border:1px solid var(--line); border-radius:9px; color:var(--ink); background:#fff; }
    .albnew input:focus { outline:2px solid rgba(123,60,255,.35); border-color:var(--violet); }
    .albnew .row { display:flex; gap:.5rem; }
    .albnew .row button { flex:1; }

    /* ── Handy / Tablet hochkant (≤ 900 px): Formular und Vorschau gestapelt, Tabs schalten um.
       Vorher bekam das Formular auf jedem Gerät exakt 50 % Breite — am Handy unbenutzbar.
       Leiste in drei Zeilen: Titel · Speichern | Tabs · Fassungen/Abmelden | Status. ── */
    @media (max-width: 900px) {
      .bar { flex-wrap:wrap; gap:.5rem .5rem; padding:.55rem .6rem; }
      .bar .tl { order:1; flex:1 1 auto; min-width:0; }
      /* kompakt, damit drei Zeilen reichen: Tag nur als Punkt, „Letzte Fassungen" → „Fassungen" */
      .tag .lang, .sess .lang, .sitename { display:none; }
      .tag { padding:.2rem .45rem; }
      .acts { order:2; margin-left:auto; }
      .acts button.primary { padding:.5rem .8rem; font-size:.86rem; }
      .viewtabs { order:3; display:flex; border:1px solid var(--line); border-radius:100px; overflow:hidden; }
      .viewtabs button { border:0; border-radius:0; padding:.42rem .7rem; font-size:.84rem; background:#fff; }
      .viewtabs button[aria-selected="true"] { background:var(--violet); color:#fff; }
      .sess { order:4; margin-left:auto; gap:.35rem; }
      .sess button { padding:.42rem .55rem; font-size:.8rem; }
      .status { order:5; flex-basis:100%; min-width:0; }
      main { display:block; height:auto; }                       /* das Dokument scrollt, nicht die Spalte */
      .form { overflow:visible; padding:.9rem .8rem 4rem; }
      .prev { display:none; border-left:0; height:calc(100vh - var(--barh, 130px)); }
      body.zeige-vorschau .form { display:none; }
      body.zeige-vorschau .prev { display:flex; }
      .prevwrap { padding:.6rem; }
      .field input, .field textarea, input.albtitle, .albimg input { font-size:1rem; }   /* < 16 px zoomt iOS beim Fokus */
      .sheetcard { max-height:88vh; }
      .histlist .hacts { margin-left:0; width:100%; }
    }
    /* Touch: Mindestgröße für die kleinen Knöpfe (▲▼ ◀▶ ✕ löschen) — 2,4 rem ≈ 38 px */
    @media (pointer: coarse) {
      button.mv, .itemhead button.del, .albtools button, .imgfield button.imgdel, .albhead button.del { min-height:2.4rem; min-width:2.4rem; }
      .albtools { gap:.4rem; }
    }