/* Gemeinsame Graupalette und zwei direkt vergleichbare Hintergrundvarianten. */
:root { --ink:#252525; --paper:rgb(218,218,218); --line:#bdbdbd; --muted:#4d4d4d; }
body { background-color:var(--paper); color:var(--ink); isolation:isolate; }
html[data-design="muster"] body { background-color:rgb(218,218,218); }
.background-pattern { display:none; }
html[data-design="muster"] .background-pattern { display:none; }
.background-pattern span { align-self:center; justify-self:center; white-space:nowrap; transform:rotate(-7deg); }
.background-pattern span:nth-child(3n) { transform:rotate(5deg); }
.background-pattern span:nth-child(4n) { transform:translateY(18px) rotate(-3deg); }
body > :not(.background-pattern):not(header):not(.demo) { position:relative; z-index:1; }
body>.demo { z-index:31; }
body>header { z-index:30; }
header { position:sticky; top:0; z-index:30; background:rgba(218,218,218,.97); backdrop-filter:blur(10px); }
.brand { font-size:clamp(26px,2.2vw,34px); gap:18px; }
.brand img { width:82px; height:82px; }
.brand small { font-size:12px; letter-spacing:2px; }
.home-cover { width:calc(100% - 48px); min-height:720px; margin-inline:auto; }
@media (max-width:1000px) { .home-cover { width:calc(100% - 32px); min-height:620px; } }
@media (max-width:700px) { .brand { font-size:18px; gap:10px; } .brand img { width:48px; height:48px; } .brand small { font-size:7px; letter-spacing:1.2px; } .home-cover { width:100%; min-height:480px; } }
.demo { position:relative; z-index:31; }
.design-label,.design-choice { display:none; }
.design-choice { padding:5px 9px; border:1px solid #ffffff70; border-radius:3px; }
.design-choice:hover,.design-choice:focus { background:#fff; color:#242424; }
html[data-design="grau"] .design-choice[href*="grau"] { background:#fff; color:#242424; }
html[data-design="muster"] .design-choice[href*="muster"] { background:#fff; color:#242424; }
.history-visual,.home-photo,.album-preview,.album-preview:before,.album-preview-cell,.photo { background:var(--paper); }
.history-entry.without-image { grid-template-columns:130px minmax(0,1fr); }
.gallery-options>summary { display:none; }
@media (max-width:700px) {
  header nav { grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; }
  header nav a { min-width:0; min-height:36px; padding:7px 2px; font-size:10px; }
  .compact-mobile-header header { padding:6px 4% 8px; }
  .compact-mobile-header header .brand { max-height:0; margin:0; opacity:0; overflow:hidden; pointer-events:none; transform:translateY(-8px); }
  header .brand { transition:max-height .2s ease,opacity .15s ease,transform .2s ease; }
  .history-entry.without-image { grid-template-columns:1fr; }
  [data-page="fotos"] .page-heading { margin-bottom:2px; }
  [data-page="fotos"]>.lead { margin:0 0 8px; font-size:13px; line-height:1.4; }
  .gallery-options { display:none; }
  .gallery-options>summary { display:block; padding:11px 13px; cursor:pointer; font-size:12px; font-weight:700; }
  .gallery-options[open]>summary { border-bottom:1px solid var(--line); }
  .gallery-sidebar .toolbar { grid-template-columns:1fr 1fr; gap:9px; padding:10px; margin:0; background:transparent; }
  .gallery-sidebar .toolbar label { min-width:0; font-size:11px; }
  .gallery-sidebar .toolbar label:nth-last-child(-n+2) { display:none; }
  .gallery-browser { gap:12px; }
  .selection-bar { position:sticky; top:64px; z-index:4; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; margin:8px 0 10px; padding:5px; background:rgba(218,218,218,.96); border:1px solid var(--line); }
  .selection-bar>#refreshGallery { display:none; }
  .selection-bar>#selectAll,.selection-bar>#clearSelection,.selection-bar>#downloadSelection,.selection-bar>#shareSelection { display:none; }
  body.gallery-selecting .selection-bar>#selectAll,body.gallery-selecting .selection-bar>#clearSelection,body.gallery-selecting .selection-bar>#downloadSelection,body.gallery-selecting .selection-bar>#shareSelection { display:inline-flex; }
  .selection-bar button { min-height:34px; padding:6px 4px; font-size:9px; line-height:1.15; }
  .gallery-content:has(.album-folders) .selection-bar { display:none; }
  .gallery { gap:4px; }
  .gallery.cols-2,.gallery.cols-3,.gallery.cols-4,.gallery.cols-5 { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .media-card { overflow:hidden; background:var(--paper); }
  .media-open img,.video-tile { height:auto; aspect-ratio:1 / 1.15; object-fit:cover; }
  body.gallery-selecting .media-open { touch-action:pan-y; user-select:none; -webkit-user-select:none; }
  .media-card>p,.media-card>.media-meta { display:none; }
  .media-select { display:none; position:absolute; top:5px; right:5px; z-index:2; margin:0; padding:6px; background:#fff; border-radius:50%; box-shadow:0 2px 6px #0004; }
  .media-select span { display:none; }
  .media-select input { width:19px; height:19px; margin:0; accent-color:var(--red); }
  body.gallery-selecting .media-select { display:flex; }
  .selection-bar { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .selection-bar button { min-height:44px; font-size:11px; }
  #viewer[open] { position:fixed; inset:0; margin:0; display:flex; flex-direction:column; width:100vw; max-width:100vw; height:100vh; height:100dvh; max-height:100vh; max-height:100dvh; padding:12px 16px max(12px,env(safe-area-inset-bottom)); border:0; overflow:hidden; overscroll-behavior:none; }
  #viewer .dialog-top { order:0; flex-shrink:0; margin-bottom:8px; }
  #viewerMedia { order:1; display:flex; align-items:center; justify-content:center; height:0; min-height:0; flex:1 1 auto; touch-action:pan-y; }
  #viewerMedia img,#viewerMedia video { width:100%; height:100%; max-height:100%; object-fit:contain; }
  #viewer .viewer-navigation { order:2; flex-shrink:0; margin:12px 0 4px; }
  #viewer .viewer-save-hint { order:3; margin:4px 0; font-size:11px; }
  #viewer .viewer-moderation { order:4; }
  #viewer .viewer-actions { order:5; flex-shrink:0; margin:10px 0; }
  #viewerStats { order:6; }
  .viewer-navigation .secondary { min-height:44px; padding:8px 14px; font-size:12px; }
  [data-page="termine"] .toolbar { display:flex; flex-direction:column; align-items:stretch; gap:7px; padding:9px; margin-bottom:12px; }
  [data-page="termine"] #calendarView { width:100%; max-width:100%; min-height:38px; padding:8px; }
  [data-page="termine"] .month-navigation { display:grid; grid-template-columns:35px minmax(0,1fr) 35px; gap:5px; width:100%; }
  [data-page="termine"] .month-navigation label { min-width:0; font-size:0; }
  [data-page="termine"] .month-navigation input { min-height:35px; padding:6px; font-size:12px; }
  [data-page="termine"] .month-navigation button { min-height:35px; padding:4px 8px; }
  [data-page="termine"] #todayMonth,[data-page="termine"] #calendarListOptions { display:none; }
  [data-page="termine"] .calendar-checks { flex-direction:column; align-items:stretch; gap:5px; overflow:visible; padding-bottom:2px; }
  [data-page="termine"] .calendar-checks .category-filter { width:100%; min-height:32px; padding:5px 7px; font-size:10px; }
  #monthTitle { scroll-margin-top:72px; }
  #subscribeResult { scroll-margin-top:72px; }
  .album-preview:before { display:none; }
  .home-gallery-link { display:grid; grid-template-columns:1fr auto; }
  .home-gallery-link .gallery-link-icon { display:grid; grid-column:1 / -1; width:100%; min-height:190px; }
  .home-gallery-link > div { grid-column:1; padding:16px 20px; }
  .home-gallery-link h3 { margin:0; font-size:24px; }
  .home-gallery-link > b { grid-column:2; align-self:center; }
}