/* Q4 Rathaus — Ergänzungen der Views zu design/components.css (Bürgerseite + Backoffice).
   Nur, was die Komponenten nicht abdecken. Tokens kommen aus design/tokens.css. */

/* Menü „Mehr“ im Kopf: <details>, ohne Skript bedienbar */
.menu { position: relative; }
.menu > summary { list-style: none; cursor: pointer; }
.menu > summary::-webkit-details-marker { display: none; }
.menu__panel {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: calc(var(--z-head) + 1); width: min(92vw, 360px);
  display: grid; gap: 2px; padding: 10px; border-radius: var(--r-md); background: var(--surface);
  border: 1px solid var(--line); box-shadow: var(--sh-pop); animation: q-rise var(--dur-2) var(--ease-out) both; --reveal-y: 8px;
  max-height: calc(100vh - var(--head-h) - 24px); overflow-y: auto;
}
.menu__panel a { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 12px; border-radius: 10px; text-decoration: none; font-size: 15px; }
.menu__panel a:hover, .menu__panel a[aria-current="page"] { background: var(--paper-2); }
.menu__panel .label { padding: 12px 12px 4px; }
.menu__panel .sub { padding-left: 28px; color: var(--muted); }
@media (min-width: 1000px) { .menu__panel .only-mobile { display: none; } }

/* Telefon: Kopf schlank halten — „Anliegen melden“ steht dort in der Tab-Leiste */
@media (max-width: 560px) {
  .head-actions .btn--primary { display: none; }
  .site-head__in { gap: var(--s-3); }
  .hero__bar .chip:nth-child(n+3) { display: none; }
  .track__step { font-size: 11.5px; padding: 0 1px; hyphens: auto; }
  .track__when { display: none; }
}
.hero__in > * { min-width: 0; }
.quick__title, .hero__title, .t-display, .t-1, .card__title { overflow-wrap: break-word; hyphens: auto; }

/* Seitenkopf der Unterseiten */
.page-top { padding-top: var(--s-8); padding-bottom: var(--s-6); display: grid; gap: var(--s-5); }
.page-top .lead { max-width: 60ch; }
.page-top__row { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; justify-content: space-between; }

/* Medien mit Platzhalter-Ton, wenn (noch) kein Foto da ist */
.media-ph { width: 100%; height: 100%; display: grid; place-items: center; color: var(--text); opacity: .9; }
.media-ph .ico { width: 44px; height: 44px; stroke-width: 1.2; opacity: .55; }
.credit { font: 500 11px/1.3 var(--font-mono); letter-spacing: .02em; color: var(--muted); }

/* Hero: Bild/Video plus sanftes Zoomen, Video-Pause-Knopf */
.hero__media > img { animation: q-drift 30s var(--ease-in-out) infinite alternate; }
.hero__facts { display: flex; flex-wrap: wrap; gap: 8px 22px; color: rgba(255, 255, 255, .78); font-size: 14.5px; }
.hero__facts b { color: #fff; font-weight: 500; }

/* Unterseiten-Hero mit Bild (Vereine, Einrichtungen, Informationsseiten) */
.hero--sub { min-height: min(62svh, 620px); }
.hero--sub .hero__title { font-size: var(--fs-3xl); max-width: 16ch; }

/* Bild-Raster ohne Karte (Startseite: Leben in der Gemeinde) */
.mosaic { display: grid; gap: var(--grid-gap); grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 180px; }
.mosaic > a { position: relative; overflow: hidden; border-radius: var(--r-lg); display: grid; align-content: end; padding: var(--s-5); color: #fff; text-decoration: none; isolation: isolate; background: var(--ink-2); }
.mosaic > a > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform var(--dur-5) var(--ease-out); }
.mosaic > a::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(10, 20, 15, .72), rgba(10, 20, 15, 0) 62%); }
.mosaic > a:hover > img { transform: scale(1.05); }
.mosaic__t { font-size: var(--fs-lg); font-weight: 600; letter-spacing: -.03em; line-height: 1.1; }
.mosaic .label { color: rgba(255, 255, 255, .8); }
@media (min-width: 900px) {
  .mosaic { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 210px; }
  .mosaic > :first-child { grid-column: span 2; grid-row: span 2; }
  .mosaic > :first-child .mosaic__t { font-size: var(--fs-xl); }
}

/* Karten-Raster */
.cards { display: grid; gap: var(--grid-gap); grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.card__media--wide { aspect-ratio: 16 / 10; }

/* Vorgang: Gesprächsverlauf mit Seitenleiste */
.case-grid { display: flex; flex-wrap: wrap; gap: var(--s-6); align-items: flex-start; }
.case-grid > :first-child { flex: 999 1 560px; min-width: 0; display: grid; gap: var(--s-5); }
.case-grid > aside { flex: 1 1 300px; display: grid; gap: var(--s-4); }
@media (min-width: 1000px) { .case-grid > aside { position: sticky; top: calc(var(--head-h) + 20px); } }
.msg__text { white-space: pre-line; }
.track--rejected::after { background: var(--err); }

/* Abfall: Monatsliste */
.waste-day { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 0; border-top: 1px solid var(--line); }
.waste-day .t-num { font-size: 44px; width: 56px; flex: none; }
.waste-day.is-next { background: var(--accent-soft); border-radius: var(--r-md); padding-inline: 14px; border-top-color: transparent; }

/* Einfache Seitenleisten-Aufteilung (Inhalt + Aside) */
.with-aside { display: flex; flex-wrap: wrap; gap: var(--s-7); align-items: flex-start; }
.with-aside > :first-child { flex: 999 1 560px; min-width: 0; }
.with-aside > aside { flex: 1 1 300px; display: grid; gap: var(--s-4); }
@media (min-width: 1000px) { .with-aside > aside.sticky { position: sticky; top: calc(var(--head-h) + 20px); } }

/* Blättern */
.pager { display: flex; justify-content: space-between; gap: 12px; margin-top: var(--s-7); }

/* Formulare: Datei-Auswahl im Upload-Feld sichtbar lassen (ohne Skript) */
.upload input[type="file"] { max-width: 100%; font-size: 14px; }
.form-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(20px, 4vw, 40px); }
.fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: var(--s-5); }
.fieldset > legend { font-size: var(--fs-lg); font-weight: 600; letter-spacing: -.025em; margin-bottom: var(--s-4); padding: 0; }
.two { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

/* ---------- Backoffice ---------- */
.app__side .brand { padding: 4px 6px; }
.side__foot { margin-top: auto; display: grid; gap: 8px; }
.side__me { display: grid; grid-template-columns: 36px 1fr; gap: 10px; align-items: center; padding: 10px; border-radius: var(--r-md); background: var(--paper); font-size: 13px; }
.side__me .avatar { width: 36px; height: 36px; font-size: 12px; }
.side__me b { display: block; font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.app__top .grow { margin-left: auto; }
.app__top form { margin: 0; }
.op-switch { display: flex; gap: 8px; align-items: center; }
.op-switch .select { min-height: 36px; padding: 4px 36px 4px 12px; font-size: 14px; border-radius: var(--r-pill); width: auto; }
.bo-form { display: grid; gap: var(--s-4); }
.bo-form .input, .bo-form .select { min-height: 44px; padding: 10px 14px; font-size: 15px; }
.bo-form .textarea { font-size: 15px; }
.bo-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.table td .muted, .table td small { font-size: 13px; }
.table .actions { white-space: nowrap; text-align: right; }
.table .actions form { display: inline; }
.empty { padding: var(--s-7) var(--s-5); text-align: center; color: var(--muted); border: 1px dashed var(--line-strong); border-radius: var(--r-md); }
.thumb { width: 64px; height: 44px; border-radius: 8px; object-fit: cover; background: var(--paper-2); }
details.panel > summary { cursor: pointer; font-weight: 600; }

/* Ältere Backoffice-Views (card/fi/fl/btn/tbl) auf die ruhige Backoffice-Optik abbilden */
.app .card { padding: 22px 24px; overflow: visible; border-radius: var(--r-md); margin-bottom: var(--s-4); }
.app a.card { display: block; text-decoration: none; transition: border-color var(--dur-2), transform var(--dur-3) var(--ease-out); }
.app a.card:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.app .card__title { font-size: 17px; font-weight: 600; letter-spacing: -.02em; margin-bottom: 14px; line-height: 1.2; }
.app .page-title { font-size: var(--fs-2xl); letter-spacing: -.04em; margin-bottom: var(--s-2); }
.app .grid2 { gap: var(--s-4); }
.app .fl { font-size: 13.5px; margin: 14px 0 6px; }
.app .fi { min-height: 42px; font-size: 15px; border-radius: 10px; }
.app textarea.fi { min-height: 110px; line-height: 1.5; resize: vertical; }
.app select.fi, .app select.select { appearance: none; padding-right: 40px; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
.app .fi[type="checkbox"], .app .fi[type="radio"] { width: auto; min-height: 0; }
.app .btn { min-height: 40px; padding: 0 18px; font-size: 14.5px; }
.app .btn:not([class*="btn--"]) { background: var(--text); color: var(--paper); }
.app .btn:not([class*="btn--"]):hover { background: color-mix(in oklab, var(--text) 82%, var(--paper)); }
.app .btn--ghost { border-color: var(--line-strong); }
.app form > .btn, .app .card > .btn, .app form > p > .btn { margin-top: 14px; }
.app .tbl { font-size: 14.5px; }
.app .tbl th { background: var(--paper); white-space: nowrap; }
.app .tbl td { vertical-align: top; }
.app .tbl tbody tr:hover { background: color-mix(in oklab, var(--accent) 5%, var(--surface)); }
.app .tbl a { font-weight: 500; text-decoration: none; }
.app .tbl a:hover { text-decoration: underline; }
.app .card:has(> .tbl) { padding: 0; overflow-x: auto; }
.app .hint { font-size: 13px; }
.app .nav-chip { min-height: 34px; }
.app .nav-chip:not(.is-on) { color: var(--text); }
.app .alert { margin-bottom: 0; }
.app h2:not([class]), .app h3:not([class]) { letter-spacing: -.025em; }
.frow { border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px; margin-bottom: 10px; background: var(--paper); }
.frow__main { display: grid; grid-template-columns: 2fr 1fr; gap: 8px; margin-bottom: 6px; }
.frow__opts { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; font-size: 13.5px; margin-top: 6px; }
.frow__move { margin-left: auto; }
@media print { .noprint { display: none !important; } .app__body { padding: 0; } }

/* Login / Einladung: geteilte Fläche, links Marke, rechts Formular */
.auth { min-height: 100vh; display: grid; grid-template-columns: 1fr; background: var(--paper); }
.auth__brand { position: relative; overflow: hidden; display: grid; align-content: space-between; gap: var(--s-7); padding: clamp(28px, 5vw, 64px); }
.auth__form { display: grid; place-items: center; padding: clamp(28px, 5vw, 64px) var(--gut); }
.auth__form > div { width: min(100%, 420px); display: grid; gap: var(--s-5); }
@media (min-width: 960px) { .auth { grid-template-columns: 1.1fr 1fr; } }

@media (prefers-reduced-motion: reduce) { .hero__media > img { animation: none !important; } }
@media print {
  .site-head, .site-foot, .tabbar, .notice, .composer, .app__side, .app__top { display: none !important; }
  body { background: #fff; }
}