@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/inter-v20-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/inter-v20-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/space-grotesk-v22-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/space-grotesk-v22-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root{
  --green:#2D4A3E; --green-d:#243C32; --green-dd:#1B2D25;
  --stone:#9B8C6E; --stone-d:#7A6E54;
  --copper:#B87335; --copper-d:#A4642C;
  --linen:#F5F0E8; --cream:#FAF7F2; --ink:#1C2420;
  --line:rgba(28,36,32,.12); --line-strong:rgba(28,36,32,.22);
  --green-soft:rgba(45,74,62,.10); --copper-soft:rgba(184,115,53,.12); --stone-soft:rgba(155,140,110,.16);
  --danger:#B23A2E; --danger-soft:rgba(178,58,46,.10);
  --r-sm:6px; --r:9px; --r-lg:16px;
  --shadow:0 1px 2px rgba(28,36,32,.05),0 8px 24px rgba(28,36,32,.06);
  --shadow-l:0 2px 6px rgba(28,36,32,.07),0 18px 44px rgba(28,36,32,.10);
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --grot:'Space Grotesk',var(--sans);
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:var(--sans);color:var(--ink);font-size:18px;line-height:1.6;background:var(--linen);
  -webkit-font-smoothing:antialiased;letter-spacing:.003em}
a{color:inherit}
button{font-family:inherit}
img{max-width:100%;display:block}

/* type */
.t-display{font-family:var(--grot);font-weight:600;font-size:34px;line-height:1.08;letter-spacing:-.018em;color:var(--green);margin:0}
.t-title{font-family:var(--grot);font-weight:600;font-size:27px;line-height:1.12;letter-spacing:-.014em;color:var(--green);margin:0}
.t-h{font-family:var(--grot);font-weight:600;font-size:21px;line-height:1.2;letter-spacing:-.01em;color:var(--ink);margin:0}
.t-eyebrow{font-weight:600;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--stone-d);margin:0}
.t-body{font-size:18px;line-height:1.6;margin:0}
.t-sub{font-size:17px;line-height:1.55;color:var(--stone-d);margin:0}
.t-meta{font-size:15.5px;color:var(--stone-d);margin:0}
.tnum{font-variant-numeric:tabular-nums}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 24px;
  font-size:17px;font-weight:600;line-height:1;border:1.5px solid transparent;border-radius:var(--r);
  cursor:pointer;white-space:nowrap;text-decoration:none;transition:background .15s,border-color .15s,color .15s}
.btn svg{flex:0 0 auto}
.btn--primary{background:var(--green);color:var(--cream)}
.btn--primary:hover{background:var(--green-d)}
.btn--secondary{background:transparent;color:var(--green);border-color:var(--line-strong)}
.btn--secondary:hover{border-color:var(--green);background:var(--green-soft)}
.btn--copper{background:var(--copper);color:var(--cream)}
.btn--copper:hover{background:var(--copper-d)}
.btn--quiet{background:transparent;color:var(--stone-d);border-color:transparent;padding:0 16px}
.btn--quiet:hover{color:var(--danger);background:var(--danger-soft)}
.btn--ghost{background:var(--cream);color:var(--green);border-color:var(--line-strong)}
.btn--ghost:hover{border-color:var(--green)}
.btn--danger{background:var(--danger);color:var(--cream)}
.btn--lg{min-height:60px;font-size:18px;padding:0 30px}
.btn--block{width:100%}
.btn--sm{min-height:44px;font-size:15.5px;padding:0 16px}
.btn[disabled]{opacity:.4;pointer-events:none}

/* badges */
.badge{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 13px;border-radius:999px;font-size:14.5px;font-weight:600}
.badge .dot{width:8px;height:8px;border-radius:50%}
.badge--draft{background:var(--stone-soft);color:var(--stone-d)}
.badge--draft .dot{background:var(--stone)}
.badge--live{background:var(--green-soft);color:var(--green)}
.badge--live .dot{background:var(--green)}
.badge--danger{background:var(--danger-soft);color:var(--danger)}
.badge--danger .dot{background:var(--danger)}
.badge--warn{background:var(--copper-soft);color:var(--copper-d)}
.badge--warn .dot{background:var(--copper)}
.badge--sm{height:26px;padding:0 10px;font-size:13px;gap:5px}

/* fields */
.field{display:flex;flex-direction:column;gap:9px;margin-bottom:24px}
.label{font-size:16.5px;font-weight:600;color:var(--ink)}
.label .opt{font-weight:500;color:var(--stone-d);font-size:14.5px;margin-left:6px}
.hint{font-size:14.5px;color:var(--stone-d)}
/* Z-B, layer 3: the click-to-open answer under a field label. A disclosure and not
   a tooltip, because the admin has a phone layout and hover does not exist there.
   The marker is replaced by our own arrow: Safari and Chrome draw different
   triangles, and list-style is the only property that reaches the shadow marker in
   both. The summary is a real button-sized target (min-height 34px at the small end)
   so a thumb can hit it. */
.explain{margin:6px 0 10px;font-size:15px}
.explain>summary{display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:2px 2px 2px 0;
  cursor:pointer;color:var(--copper-d);font-weight:600;list-style:none;width:max-content}
.explain>summary::-webkit-details-marker{display:none}
.explain>summary::before{content:"";width:8px;height:8px;flex:0 0 8px;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .15s ease;margin-left:2px}
.explain[open]>summary::before{transform:rotate(45deg)}
.explain>summary:focus-visible{outline:2px solid var(--copper);outline-offset:3px;border-radius:var(--r-sm)}
.explain-body{margin-top:2px;padding:12px 14px;border-left:3px solid var(--copper-soft);
  background:var(--cream);border-radius:0 var(--r) var(--r) 0;color:var(--stone-d);line-height:1.55}
/* Z-B, layer 2: the sentence saying what a list is, under its count. */
.listblurb{margin-top:6px;max-width:60ch}
/* Z-B, layer 1: the guide's numbered steps, and the icon that leads a menu row on it. */
.steps{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-direction:column;gap:2px}
.step{display:flex;gap:18px;align-items:flex-start;padding:20px 22px;background:#fff;border:1px solid var(--line);
  border-bottom:none}
.step:first-child{border-radius:var(--r-lg) var(--r-lg) 0 0}
.step:last-child{border-bottom:1px solid var(--line);border-radius:0 0 var(--r-lg) var(--r-lg)}
.stepno{width:34px;height:34px;flex:0 0 34px;border-radius:50%;background:var(--green-soft);color:var(--green);
  font-family:var(--grot);font-weight:700;font-size:17px;display:flex;align-items:center;justify-content:center}
.stepbody{min-width:0;flex:1}
.stepbody .t-sub{margin-top:6px;max-width:62ch}
.lead-ic{width:44px;height:44px;flex:0 0 44px;border-radius:12px;background:var(--green-soft);color:var(--green);
  display:flex;align-items:center;justify-content:center}
.input,.textarea{width:100%;font-family:var(--sans);font-size:18px;color:var(--ink);padding:15px 16px;min-height:56px;
  background:#fff;border:1.5px solid var(--line-strong);border-radius:var(--r);transition:border-color .15s,box-shadow .15s}
.input::placeholder,.textarea::placeholder{color:#B6AE9E}
.input:focus,.textarea:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 4px var(--green-soft)}
.textarea{min-height:150px;resize:vertical;line-height:1.55}
.input--error,.textarea--error{border-color:var(--danger)}
.input--error:focus,.textarea--error:focus{box-shadow:0 0 0 4px var(--danger-soft)}
.error-msg{display:flex;align-items:center;gap:7px;font-size:15px;font-weight:500;color:var(--danger)}
.error-msg>svg{flex:0 0 auto}
.input-row{display:flex;gap:14px}
.input-row>*{flex:1}

/* card */
.card{background:var(--cream);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow)}

/* banners */
.banner{display:flex;align-items:center;gap:12px;padding:14px 18px;border-radius:var(--r);margin-bottom:26px;font-size:16px}
/* The leading icon is a flex item: without this the text squeezes it from 18px to a
   sliver as soon as the message is long (found in the 2026-07-26 frontend audit). */
.banner>svg{flex:0 0 auto}
.banner--draft{background:var(--copper-soft);border:1px solid rgba(184,115,53,.35);color:var(--copper-d)}
.banner--admin{background:var(--copper-soft);border:1px solid rgba(184,115,53,.25)}
.banner--ok{background:var(--green-soft);border:1px solid rgba(45,74,62,.2);color:var(--green)}

/* app shell */
/* 284px, up from 246 (X-A): since the menu names the client's own PAGES, the widest
   label is no longer ours to choose. "Vereinsgeschichte" is one word of 150px in the
   active weight and had nowhere to go in the old column. Measured against the widest
   real label plus its count, not guessed (the last attempt fell 0.04px short, which
   is how you learn you are guessing); anything wider than that still wraps, and
   the rules on .nav a span keep it inside the column instead of pushing a horizontal
   scrollbar into the menu. */
.app{display:flex;min-height:100vh}
.side{width:276px;flex:0 0 276px;background:var(--green);color:var(--cream);display:flex;flex-direction:column;padding:22px 16px;position:sticky;top:0;height:100vh}
.navtoggle,.menubtn{display:none}
/* The sidebar is pinned to the viewport height, so on a short screen its lower
   half (as U56 admin: Einstellungen, Benutzer:innen, Anmelde-Protokoll, the
   logout row) used to fall off the bottom with no way to reach it — page scroll
   moves the content, not a sticky element. It scrolls itself instead. */
.sidebody{display:flex;flex-direction:column;flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:rgba(250,247,242,.35) transparent}
.side .brand{display:flex;align-items:center;gap:12px;padding:4px 8px 2px;text-decoration:none}
.mark{width:42px;height:42px;flex:0 0 42px;border-radius:10px;background:var(--cream);color:var(--green);font-family:var(--grot);font-weight:700;font-size:20px;display:flex;align-items:center;justify-content:center;letter-spacing:-.02em}
.side .wordmark{font-family:var(--grot);font-weight:600;font-size:16.5px;color:var(--cream);line-height:1.15}
.side .wordmark span{display:block;font-weight:500;font-size:12.5px;color:rgba(250,247,242,.6)}
.side .client{margin:22px 8px 10px;padding-top:18px;border-top:1px solid rgba(250,247,242,.14)}
.side .client .lbl{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(250,247,242,.55)}
.side .client .nm{font-family:var(--grot);font-weight:600;font-size:17px;color:var(--cream);margin-top:3px}
.nav{display:flex;flex-direction:column;gap:3px;margin-top:8px}
/* No row gap: the space belongs between the icon and the label, and a gap applies
   between EVERY pair, so it also sat in front of the count, where margin-left:auto
   had already done the separating. Those 13px came straight out of the label, and a
   label is now a page name the client chose. Icon margin instead of a row gap. */
.nav a{display:flex;align-items:center;min-height:50px;padding:0 14px;border-radius:10px;color:rgba(250,247,242,.82);font-size:16.5px;font-weight:500;text-decoration:none;transition:background .14s,color .14s}
.nav a svg{flex:0 0 auto;opacity:.85;margin-right:13px}
/* Since X-A a menu entry can be named by the CLIENT: a showcase page's own name
   becomes its label, and "Vereinsgeschichte" is one word wider than this column.
   A long single word had nowhere to go and pushed a horizontal scrollbar into the
   menu. It hyphenates instead (the document is lang="de-AT", so the break falls
   where German breaks); overflow-wrap is the floor for a word no dictionary can
   split, and it breaks only when there is no other way. */
.nav a span{min-width:0;hyphens:auto;overflow-wrap:break-word}
.nav a:hover{background:rgba(250,247,242,.08);color:var(--cream)}
.nav a.active{background:var(--cream);color:var(--green);font-weight:600}
.nav a.active svg{opacity:1}
.nav a .count{margin-left:auto;font-size:13.5px;font-weight:600;color:rgba(250,247,242,.6);font-variant-numeric:tabular-nums}
.nav a.active .count{color:var(--stone-d)}
/* The block that is not the website: Anfragen, Daten und Export, Hilfe, Passwort.
   No heading is true of all four, so a rule does the dividing instead of a word. */
.nav--tail{margin-top:20px;padding-top:14px;border-top:1px solid rgba(250,247,242,.14)}
.nav-group{margin-top:22px;padding:0 14px 6px;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(250,247,242,.5);display:flex;align-items:center;gap:8px}
.nav-group .adminchip{margin-left:auto;background:var(--copper);color:var(--cream);font-size:10px;letter-spacing:.08em;padding:3px 7px;border-radius:5px}
.side .spacer{flex:1}
.side .user{display:flex;align-items:center;gap:12px;padding:12px 10px;margin-top:14px;border-top:1px solid rgba(250,247,242,.14)}
.avatar{width:40px;height:40px;flex:0 0 40px;border-radius:50%;background:var(--copper);color:var(--cream);display:flex;align-items:center;justify-content:center;font-family:var(--grot);font-weight:600;font-size:16px}
.side .user .who{line-height:1.2;min-width:0}
.side .user .who b{display:block;font-weight:600;font-size:15.5px;color:var(--cream);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side .user .who span{font-size:13px;color:rgba(250,247,242,.6)}
.side .user .logout{margin-left:auto;color:rgba(250,247,242,.6);display:flex;padding:6px;border-radius:8px}
.side .user .logout:hover{background:rgba(250,247,242,.08);color:var(--cream)}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.main-inner{padding:36px 44px 120px;flex:1;width:100%;max-width:1040px}
.pagehead{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:28px;flex-wrap:wrap}
.pagehead .lead{display:flex;flex-direction:column;gap:7px}
.crumb{display:flex;align-items:center;gap:8px;margin-bottom:18px;color:var(--stone-d);font-size:15.5px;text-decoration:none}
.crumb b{font-weight:600;color:var(--ink)}

/* dashboard */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.tile{width:54px;height:54px;flex:0 0 54px;border-radius:13px;background:var(--green-soft);color:var(--green);display:flex;align-items:center;justify-content:center}

/* list rows */
.rowlist .item{display:flex;align-items:center;gap:20px;padding:18px 22px;border-top:1px solid var(--line)}
.rowlist .item:first-child{border-top:none}
.datechip{width:70px;flex:0 0 70px;border-radius:12px;background:var(--green-soft);color:var(--green);text-align:center;padding:9px 0;line-height:1}
.datechip .wd,.datechip .mo{font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.8}
.datechip .d{font-family:var(--grot);font-weight:700;font-size:28px;margin:2px 0}
.itemtitle{font-family:var(--grot);font-weight:600;font-size:19.5px;color:var(--ink)}
.metarow{display:flex;gap:16px;flex-wrap:wrap;align-items:center;color:var(--stone-d);font-size:15.5px}
.metarow span{display:inline-flex;align-items:center;gap:7px}
/* N-E: the picture leads a row whose entries are otherwise five variations on one
   word. Centred, because .showcase-rows .row-media on the public site sets no
   object-position either - the thumbnail crops the way the visitor's does. A focus
   point the editor set overrides it inline (focusStyle), as everywhere else. */
.rowthumb{width:78px;height:58px;flex:0 0 78px;border-radius:10px;overflow:hidden;background:var(--stone-soft);display:flex;align-items:center;justify-content:center;color:var(--stone-d)}
.rowthumb img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.rowthumb--empty{border:1px dashed var(--line-strong);background:var(--cream)}
/* Holds the column open without drawing anything, so the headings keep one
   left edge down a list where only some rows carry a picture. */
.rowthumb--spacer{background:none}
/* A person is a face, not a landscape: square and round, the shape every other
   surface uses for a portrait. */
.rowthumb--round{width:58px;flex-basis:58px;border-radius:50%}
/* Top-anchored like .person .pic img on the public site (theme.ts): a portrait
   cropped square from a landscape photo shows the face, not the knees. A focus
   point the editor set still wins, inline. */
.rowthumb--round img{object-position:50% 0%}
/* The Oberzeile, drawn as the website draws it. */
.roweyebrow{font-size:12.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--copper);background:var(--copper-soft);border-radius:6px;padding:3px 8px}
/* One line, cut with an ellipsis: this is a recognition aid, not the text itself. */
.metarow .rowtext{display:block;min-width:0;flex:1 1 100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.actions{display:flex;gap:8px;flex:0 0 auto;align-items:center}

/* empty state */
.empty{padding:64px 40px;text-align:center;display:flex;flex-direction:column;align-items:center}
.empty .ic{width:88px;height:88px;border-radius:22px;background:var(--green-soft);color:var(--green);display:flex;align-items:center;justify-content:center;margin-bottom:24px}

/* sticky action bar */
.actionbar{position:sticky;bottom:0;display:flex;align-items:center;gap:12px;padding:16px 44px;background:var(--cream);border-top:1px solid var(--line);box-shadow:0 -6px 20px rgba(28,36,32,.05);flex-wrap:wrap}
.savestate{font-size:15px;font-weight:600;color:var(--copper-d)}
.savestate:empty{display:none}

/* rich-text editor: toolbar + contenteditable surface (textarea is the no-JS fallback) */
.editor .bar{display:flex;align-items:center;gap:4px;padding:8px;border:1.5px solid var(--line-strong);border-bottom:none;border-radius:var(--r) var(--r) 0 0;background:var(--cream)}
.editor .bar .tbtn{width:40px;height:40px;padding:0;border:none;background:none;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--stone-d);cursor:pointer;font-size:17px}
.editor .bar .tbtn:hover{background:var(--green-soft);color:var(--green)}
.editor .bar .sep{width:1px;height:22px;background:var(--line);margin:0 4px}
.editor .textarea{border-radius:0 0 var(--r) var(--r)}
.rte{width:100%;font-family:var(--sans);font-size:18px;color:var(--ink);padding:15px 16px;min-height:150px;line-height:1.55;background:#fff;border:1.5px solid var(--line-strong);border-top:none;border-radius:0 0 var(--r) var(--r)}
.rte:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 4px var(--green-soft)}
.rte:first-child{margin-top:0}
.rte > :first-child{margin-top:0}
.rte > :last-child{margin-bottom:0}
.rte h3{font-size:1.18rem;font-weight:700;margin:.7rem 0 .35rem}
.rte ul,.rte ol{padding-left:1.4rem;margin:.45rem 0}
.rte a{color:var(--green);text-decoration:underline}

/* gallery */
.dropzone{border:2px dashed var(--line-strong);border-radius:var(--r-lg);background:var(--cream);padding:36px 24px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px}
.dropzone.drag{border-color:var(--green);background:var(--green-soft)}
.dropzone .ic{width:66px;height:66px;border-radius:16px;background:var(--green-soft);color:var(--green);display:flex;align-items:center;justify-content:center}
.photogrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.photocard{overflow:hidden}
.photocard .ph{position:relative;height:150px;background:repeating-linear-gradient(135deg,rgba(155,140,110,.16) 0 12px,rgba(155,140,110,.07) 12px 24px),var(--stone-soft);display:flex;align-items:center;justify-content:center}
.photocard .ph img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.photocard .ph .pos{position:absolute;top:8px;left:8px;display:flex;align-items:center;gap:5px;background:rgba(28,36,32,.55);color:var(--cream);border-radius:7px;padding:4px 8px;font-size:12.5px;font-weight:600}

/* Bildausschnitt (focus point): thumbnails crop exactly like the public site, so
   what an editor sets here is what the website shows. */
.photocard .ph img,.mediapreview img{object-position:50% 0%}
/* Videos (G21) have no focus point and nothing crops them on the public site, so
   the top-anchored photo crop only helps a photo. On a portrait clip from a phone
   it reliably shows the ceiling; centred at least shows the dancers. */
.photocard[data-noun] .ph img{object-position:50% 50%}
/* Specificity beats the generic .modal .box (narrow, centred) whatever the order. */
.modal.focusdlg .box{width:760px;text-align:left;max-height:92vh;overflow:auto;padding:28px}
.focuswrap{text-align:center}
/* The picker box hugs the image itself (no letterboxing), so a click maps 1:1 to
   image coordinates without correcting for a contain-fitted gap. */
.focuspick{position:relative;display:inline-block;max-width:100%;line-height:0;border-radius:var(--r);overflow:hidden;cursor:crosshair;touch-action:none}
.focuspick:focus-visible{outline:3px solid var(--copper);outline-offset:2px}
.focuspick img{display:block;width:auto;height:auto;max-width:100%;max-height:44vh}
.focuspick .dot{position:absolute;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;border:3px solid var(--cream);background:rgba(184,115,53,.55);box-shadow:0 0 0 2px rgba(28,36,32,.35);pointer-events:none}
.focusprev{display:flex;gap:16px;margin-top:18px}
.focusprev figure{margin:0;flex:0 0 auto}
.focusprev figcaption{font-size:13px;color:var(--stone-d);margin-top:6px;font-weight:600}
.focusprev .fp{overflow:hidden;border-radius:var(--r-sm);background:var(--stone-soft);border:1px solid var(--line)}
.focusprev .fp img{width:100%;height:100%;object-fit:cover;display:block}
.focusprev .r32 .fp{width:216px;height:144px}
.focusprev .r11 .fp{width:144px;height:144px}
@media(max-width:720px){
  .modal.focusdlg .box{padding:20px}
  .modal.focusdlg .row{flex-wrap:wrap}
  /* Keep the image small enough that Übernehmen stays on screen on a phone. */
  .focuspick img{max-height:34vh}
  .focusprev{flex-wrap:wrap;gap:12px}
  .focusprev .r32 .fp{width:150px;height:100px}
  .focusprev .r11 .fp{width:100px;height:100px}
  .focusprev .fstate{flex:1 0 100%;align-self:flex-start;margin:0}
}
.progress{height:8px;border-radius:4px;background:var(--stone-soft);overflow:hidden}
.progress>i{display:block;height:100%;background:var(--copper);border-radius:4px;transition:width .2s}

/* login */
.login{display:flex;min-height:100vh}
.login .panel{width:470px;flex:0 0 470px;background:var(--green);color:var(--cream);padding:52px 48px;display:flex;flex-direction:column}
.login .panel h2{font-family:var(--grot);font-weight:600;font-size:33px;line-height:1.15;letter-spacing:-.02em;margin:0}
.login .panel .wordmark{font-family:var(--grot);font-weight:600;font-size:18px;color:var(--cream);line-height:1.15}
.login .panel .wordmark span{display:block;font-weight:500;font-size:13.5px;color:rgba(250,247,242,.6)}
.brand-tagline{margin-top:10px;font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:rgba(250,247,242,.55)}
.login .form{flex:1;display:flex;align-items:center;justify-content:center;padding:40px}
.login .form .inner{width:392px;max-width:100%}
.botcheck{display:flex;align-items:center;gap:13px;padding:14px 16px;border:1.5px solid var(--line-strong);border-radius:var(--r);background:#fff;font-size:16.5px;font-weight:500}
/* Z-A: the "still checking" line under the Turnstile widget. Hidden markup by
   default and only ever revealed by script, so a no-script login never sees it.
   The explicit display:none on [hidden] is not decoration: .botpending would
   otherwise inherit a display from a later rule and the hidden attribute would
   stop working, which is the classic way this kind of note leaks onto a page. */
.botpending{margin:10px 0 0;font-size:15px;font-weight:500;color:var(--copper)}
.botpending[hidden]{display:none}
/* Login, the reset row (Slice G15): label left, "Passwort vergessen?" right of it. */
.label-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.linkbtn{background:none;border:0;font:inherit;font-size:15px;font-weight:600;
  color:var(--green);text-decoration:underline;text-underline-offset:3px;cursor:pointer;
  /* The padding is hit area, the negative margin gives it straight back to the layout:
     24px of text is WCAG's floor, not a thumb's idea of a target. Baseline alignment on
     .label-row is unaffected, so the row does not move. */
  padding:7px 4px;margin:-7px -4px}
.linkbtn:hover{color:var(--ink)}
.linkbtn:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:3px}
/* A browser submits a form with its FIRST submit button when Enter is pressed in a text
   field. "Passwort vergessen?" stands above "Anmelden" in the markup, so without this
   twin at the top of the form, Enter in the password field would mail a reset link
   instead of signing in. It carries the same name/value as the real button, is 0x0, and
   does nothing else. */
.enterdefault{display:block;width:0;height:0;margin:0;padding:0;border:0;overflow:hidden;opacity:0}
/* "oder" between the two ways in */
.orline{display:flex;align-items:center;gap:14px;margin:18px 0;color:var(--stone-d);font-size:14.5px}
.orline::before,.orline::after{content:"";flex:1;height:1px;background:var(--line)}
.botcheck .box{width:26px;height:26px;border-radius:6px;border:2px solid var(--green);display:flex;align-items:center;justify-content:center;color:var(--green);flex:0 0 26px}

/* modal */
.modal{position:fixed;inset:0;background:rgba(28,36,32,.45);display:flex;align-items:center;justify-content:center;padding:24px;z-index:50}
.modal .box{background:var(--cream);width:460px;max-width:100%;padding:34px;border-radius:var(--r-lg);box-shadow:var(--shadow-l);text-align:center}
.modal .box .ic{width:72px;height:72px;border-radius:18px;background:var(--danger-soft);color:var(--danger);display:flex;align-items:center;justify-content:center;margin:0 auto 22px}

/* Hilfe & Feedback: the "Art der Meldung" radio chips (Fehler / Wunsch / Frage).
   The radio itself is visually hidden but focusable — :has() paints the checked
   chip, :focus-within draws the ring, so it stays keyboard-operable without JS. */
.kindchip{display:block;height:100%;padding:14px 16px;background:#fff;border:1.5px solid var(--line-strong);
  border-radius:var(--r);transition:border-color .12s,box-shadow .12s,background .12s}
.kindchip b{display:block;font-size:17px;color:var(--ink)}
.kindchip span{display:block;margin-top:3px;font-size:14.5px;color:var(--stone-d);line-height:1.4}
.kindchip.is-on{border-color:var(--green);background:var(--green-soft);box-shadow:0 0 0 3px var(--green-soft)}
label:has(input[type=radio]:checked) .kindchip{border-color:var(--green);background:var(--green-soft);
  box-shadow:0 0 0 3px var(--green-soft)}
label:has(input[type=radio]:not(:checked)) .kindchip{border-color:var(--line-strong);background:#fff;box-shadow:none}
label:focus-within .kindchip{outline:2px solid var(--green);outline-offset:2px}
.filesel{width:100%;font-family:var(--sans);font-size:16px;padding:13px 14px;background:#fff;
  border:1.5px solid var(--line-strong);border-radius:var(--r);cursor:pointer}
.checkrow{display:flex;align-items:flex-start;gap:11px;cursor:pointer}
.checkrow input{width:22px;height:22px;margin-top:2px;accent-color:var(--danger);flex:0 0 22px}

/* Segmented filter bar (Alle / Offen / Erledigt …) — one definition for the four list
   screens that use it. On a narrow phone the segments scroll inside the bar instead of
   widening the page: the Protokoll's four chips used to push /admin sideways at 390px
   (frontend audit 2026-07-26). */
.segbar{display:flex;align-items:center;gap:2px;padding:4px;background:#fff;
  border:1.5px solid var(--line-strong);border-radius:var(--r);
  max-width:100%;overflow-x:auto;scrollbar-width:none}
.segbar::-webkit-scrollbar{display:none}
.segbar a{flex:0 0 auto;white-space:nowrap;padding:9px 15px;border-radius:6px;
  font-size:15px;font-weight:600;text-decoration:none;color:var(--stone-d)}
.segbar a.on{background:var(--green);color:var(--cream)}
.segbar a .n{opacity:.7}

/* helpers */
.row{display:flex;align-items:center}
.gap8{gap:8px}.gap12{gap:12px}.gap16{gap:16px}.grow{flex:1}
.divider{height:1px;background:var(--line);border:0;margin:0}
.stack>*+*{margin-top:14px}

/* Short desktop screens (a 1080p laptop at Windows' 150% scaling leaves ~595px of
   viewport height). The shell is wide enough for the full sidebar but not tall
   enough, so the chrome gets denser instead of the nav getting cut. Mouse-only
   territory — the phone layout below keeps its 48px touch targets. */
@media(min-width:861px) and (max-height:820px){
  .side{padding:14px 14px}
  .mark{width:34px;height:34px;flex-basis:34px;font-size:17px}
  .side .client{margin:12px 8px 6px;padding-top:12px}
  .side .client .nm{font-size:16px}
  .nav{gap:2px}
  /* Tighter than the roomy default so "Verein / Personen" and "Hilfe & Feedback"
     stay on one line next to their count instead of costing a second row each. */
  .nav a{min-height:40px;font-size:16px;padding:0 11px}
  .nav a svg{margin-right:11px}
  .nav-group{margin-top:12px;padding:0 11px 4px}
  .nav--tail{margin-top:12px;padding-top:10px}
  .side .user{margin-top:10px;padding:8px 10px}
  .avatar{width:34px;height:34px;flex-basis:34px;font-size:14px}
  .main-inner{padding:22px 32px 90px}
}

/* responsive: sidebar -> compact sticky top bar + slide-down drawer.
   Patterns per NN/g (content over chrome; nav one tap away), WCAG 2.5.8 targets,
   and the Shopify-style pinned save bar. */
@media(max-width:860px){
  .app{flex-direction:column}

  /* top bar */
  .side{width:auto;flex:none;height:auto;padding:0;position:sticky;top:0;z-index:40;
    box-shadow:0 2px 12px rgba(28,36,32,.18)}
  .sidetop{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px 8px 14px;min-height:60px}
  .side .brand{padding:0}
  .mark{width:36px;height:36px;flex-basis:36px;font-size:17px}

  /* drawer toggle (checkbox hack, no JS) */
  .menubtn{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border-radius:10px;
    color:var(--cream);font-size:15.5px;font-weight:600;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .menubtn:active{background:rgba(250,247,242,.12)}
  .menubtn .ic-close{display:none}
  .navtoggle:checked ~ .sidetop .ic-open{display:none}
  .navtoggle:checked ~ .sidetop .ic-close{display:block}

  /* drawer */
  .sidebody{display:none}
  .navtoggle:checked ~ .sidebody{display:flex;flex-direction:column;padding:2px 12px 14px;
    border-top:1px solid rgba(250,247,242,.14);max-height:calc(100dvh - 60px);overflow:auto;overscroll-behavior:contain}
  .side .client{margin:14px 8px 8px;padding-top:0;border-top:none}
  .nav a{min-height:48px}
  .nav-group{margin-top:16px}
  .nav--tail{margin-top:14px;padding-top:12px}
  .side .spacer{display:none}
  .side .user{margin-top:12px;padding:12px 8px 2px}

  /* content */
  .main-inner{padding:20px 16px 110px}
  .t-display{font-size:26px}
  .t-title{font-size:23px}
  .pagehead{flex-direction:column;align-items:stretch;gap:16px;margin-bottom:22px}
  .pagehead .btn{width:100%}
  .banner{padding:12px 14px;font-size:15px;margin-bottom:20px}
  .grid2{grid-template-columns:1fr}

  /* dashboard "Zuletzt bearbeitet" rows: let badge + button wrap under the title */
  .recentrow{flex-wrap:wrap;padding:14px 16px}
  .recentrow>.grow{flex:1 1 55%}

  /* list rows -> stacked cards: title+meta full width, actions on their own row */
  .rowlist .item{flex-wrap:wrap;gap:12px 14px;padding:16px 16px 12px}
  .rowlist .item>.grow{flex:1 1 60%;min-width:0}
  .itemtitle{font-size:18px}
  .metarow{font-size:14.5px;gap:12px}
  .datechip{width:56px;flex-basis:56px;padding:7px 0}
  .datechip .d{font-size:22px}
  .rowthumb{width:60px;height:46px;flex-basis:60px}
  .rowthumb--round{width:46px;flex-basis:46px}
  /* Below the heading the row is already narrow; the excerpt is the first thing
     that may go, the picture and the Oberzeile are what identify the entry. */
  .metarow .rowtext{display:none}
  .actions{flex:1 0 100%;justify-content:flex-start;gap:10px;padding-top:10px;border-top:1px solid var(--line)}
  .actions .btn--ghost{flex:1;max-width:220px}

  /* sticky save bar: full-width buttons, safe-area padding (Shopify pattern) */
  .actionbar{display:grid;grid-template-columns:1fr 1fr;gap:10px;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom))}
  .actionbar .grow{display:none}
  .actionbar .savestate{grid-column:1 / -1;text-align:center}
  .actionbar .savestate:empty{display:none}
  .actionbar .btn{width:100%;min-height:52px;font-size:16px;padding:0 12px;white-space:normal;line-height:1.2}
  .actionbar .btn--ghost{grid-column:1 / -1;min-height:46px}

  /* editor + gallery */
  .photogrid{grid-template-columns:1fr 1fr;gap:12px}
  .dropzone{padding:28px 18px}
  .gallery .row{flex-wrap:wrap}
  .gallery .dropzone{flex:1 1 200px}
  .empty{padding:44px 20px}
  .input-row{flex-direction:column;gap:0}

  /* Anleitung (Z-B): the step number stays, it is the thread through the page, but
     it stops eating a third of a 390px row. The menu rows on that page reuse the
     list-row stacking above, so only their leading icon needs shrinking. */
  .step{padding:16px 16px;gap:13px}
  .stepno{width:28px;height:28px;flex-basis:28px;font-size:15px}
  .lead-ic{width:38px;height:38px;flex-basis:38px}
  /* A step's buttons are named after the CLIENT's own pages, so their width is not
     ours to predict: "Neuer Abschnitt in „Vereinsgeschichte“" measured 333px against
     a 375px viewport and pushed the whole page sideways, because .btn is nowrap.
     Same lesson as X-A's menu column, one screen further on. They wrap here instead
     of being truncated: the page name is the only thing that tells three otherwise
     identical buttons apart, so it is the last thing that may be cut. */
  .step .btn{white-space:normal;text-align:left;line-height:1.25;max-width:100%;height:auto;
    min-height:40px;padding-top:8px;padding-bottom:8px}

  /* login */
  .login{flex-direction:column}
  .login .panel{width:auto;flex:none;padding:28px 24px}
  .login .panel h2{font-size:26px}
  .login .form{padding:24px 20px 40px;align-items:flex-start}
}
@media(max-width:420px){
  .menulbl{display:none}
  .menubtn{width:48px;justify-content:center;padding:0}
  .photogrid{grid-template-columns:1fr}
}