/* Öffentliche Galerie: Marken und Knöpfe aus anmelden.css, hier nur das Raster */
[hidden] { display: none !important }
body.galerie { display: block; padding: 0 16px 48px; max-width: 1180px; margin: 0 auto; place-items: initial }
.kopf { display: flex; align-items: center; gap: 14px; padding: 20px 0 14px }
.kopf .marke { margin: 0; color: inherit; text-decoration: none }
.kopf h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%) } /* steht schon im Umschalter */
.bereiche { display: flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--field); font-size: 14px; font-weight: 500 }
.bereiche > * { height: 30px; padding: 0 14px; border-radius: 7px; display: flex; align-items: center; color: var(--ink-soft); text-decoration: none }
.bereiche a:hover { color: var(--ink) }
.bereiche .on { background: var(--paper); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.25) }
#hinweis { margin: auto; max-width: 380px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); color: var(--ink); padding: 20px 22px }
#hinweis::backdrop { background: rgba(0,0,0,.45) }
#hinweis h2 { margin: 0 0 8px; font-size: 17px }
#hinweis p { margin: 0 0 18px; color: var(--ink-soft); line-height: 1.45 }
#hinweis .btn { width: 100% }
.filter { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 18px }
.filter #q { flex: 1 1 240px }
.filter select.feld { flex: 0 1 auto; width: auto; height: 40px; padding: 0 10px; font-size: 14px }
.filter .check { margin: 0; font-size: 13px; color: var(--ink-soft) }
.chip { border: 1px solid var(--line); background: var(--field); border-radius: 999px; padding: 2px 9px; font-size: 12px; cursor: pointer; color: var(--ink-soft) }
.chip:hover { color: var(--ink); border-color: var(--ink4) }
.filter .chip { padding: 6px 12px; font-size: 13px; color: var(--accent); border-color: var(--accent) }
.raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px }
.modell { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column;
  animation: hoch calc(var(--dauer) * 380ms) var(--weich) both }
.modell .bild { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; background: var(--input); border-bottom: 1px solid var(--line) }
.modell .bild img { width: 100%; height: 100%; object-fit: cover; display: block }
.modell .bild > svg { width: 44px; height: 44px; fill: none; stroke: var(--ink4); stroke-width: 1.4; stroke-linejoin: round }
.marke-remix { position: absolute; top: 8px; left: 8px; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--paper) 85%, transparent); color: var(--ink-soft) }
.modell .info { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px }
.modell .name { font-weight: 600; font-size: 15px; color: var(--ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.modell .name:hover { color: var(--accent) }
.zeile { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--ink-soft); font-size: 13px }
.zeile.klein { font-size: 12px; color: var(--ink4) }
.nick { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px }
.like { display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; padding: 2px 4px; border-radius: 8px; color: var(--ink-soft); font-size: 13px }
button.like { cursor: pointer }
button.like:hover { color: var(--ink) }
.like svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round;
  transition: transform calc(var(--dauer) * 180ms) var(--weich) }
.like.an { color: #FF375F }
.like.an svg { fill: currentColor }
button.like:active svg { transform: scale(.82) }
.like b { font-weight: 500 }
@keyframes wackeln { 25% { transform: translateX(-3px) } 75% { transform: translateX(3px) } }
.wackeln { animation: wackeln calc(var(--dauer) * 300ms) }
.leer { text-align: center; color: var(--ink-soft); padding: 48px 0 }
.btn.mehr { display: block; flex: none; margin: 22px auto 0; min-width: 160px }
.galerie .recht { position: static; margin-top: 36px; flex-wrap: wrap }
@media (max-width: 560px) {
  .raster { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px }
}