/* Fotoplaner – ruhige, übersichtliche Oberfläche */
:root {
  --bg: #f6f5f2; --card: #ffffff; --ink: #2a2a28; --muted: #6d6b66; --line: #e4e1da;
  --accent: #4f6b5a; --accent-ink: #ffffff; --accent-soft: #e7eee9;
  --warn: #9a6a12; --warn-soft: #fbf3e2; --danger: #a33a32; --danger-soft: #f8e8e6; --ok: #2f6b45; --ok-soft: #e5f2ea;
  --info-soft: #eaf0f6; --radius: 10px; --shadow: 0 1px 2px rgba(0,0,0,.04), 0 2px 8px rgba(0,0,0,.03);
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--ink); }
a { color: var(--accent); }
h1 { font-size: 1.45rem; margin: 0 0 .75rem; font-weight: 600; }
h2 { font-size: 1.1rem; margin: 0 0 .75rem; font-weight: 600; }
h3 { font-size: 1rem; margin: 1rem 0 .5rem; font-weight: 600; }
p { margin: .4rem 0 .8rem; }
small, .muted { color: var(--muted); }
.wrap { max-width: 1180px; margin: 0 auto; padding: 1rem; }
.narrow { max-width: 720px; }

/* Navigation */
.topbar { background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10; }
.topbar .wrap { display: flex; align-items: center; gap: 1rem; padding-top: .55rem; padding-bottom: .55rem; flex-wrap: wrap; }
.brand { font-weight: 700; color: var(--ink); text-decoration: none; margin-right: .5rem; }
.nav { display: flex; gap: .15rem; flex-wrap: wrap; flex: 1; }
.nav a { padding: .35rem .5rem; border-radius: 6px; text-decoration: none; color: var(--muted); font-size: .9rem; white-space: nowrap; }
.nav a.active, .nav a:hover { background: var(--accent-soft); color: var(--accent); }
.nav-toggle { display: none; }
@media (max-width: 760px) {
  .nav { display: none; width: 100%; flex-direction: column; }
  .nav.open { display: flex; }
  .nav-toggle { display: inline-block; margin-left: auto; }
}

/* Karten, Raster */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; margin-bottom: 1rem; box-shadow: var(--shadow); }
.card > h2:first-child { margin-top: 0; }
.grid { display: grid; gap: 1rem; }
.g2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.g4 { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.row { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.between { justify-content: space-between; }
.right { margin-left: auto; }
.stack > * + * { margin-top: .6rem; }
.sticky-sub { position: sticky; top: 52px; background: var(--bg); z-index: 5; padding: .4rem 0; }

/* Tabellen */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .5rem .5rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-weight: 600; font-size: .85rem; color: var(--muted); }
td.num, th.num { text-align: right; white-space: nowrap; }
tr.overdue td { background: var(--danger-soft); }
.table-wrap { overflow-x: auto; }
@media (max-width: 700px) {
  table.responsive thead { display: none; }
  table.responsive tr { display: block; border-bottom: 1px solid var(--line); padding: .4rem 0; }
  table.responsive td { display: block; border: 0; padding: .15rem 0; }
  table.responsive td.num { text-align: left; }
  table.responsive td[data-label]::before { content: attr(data-label) ": "; color: var(--muted); font-size: .85rem; }
}

/* Formulare */
label { display: block; font-weight: 500; margin: .55rem 0 .2rem; font-size: .93rem; }
label.inline { display: inline-flex; align-items: center; gap: .4rem; font-weight: 400; margin: .2rem 1rem .2rem 0; }
input[type=text], input[type=email], input[type=tel], input[type=password], input[type=number], input[type=date], input[type=time], input[type=url], input[type=search], select, textarea {
  width: 100%; padding: .55rem .65rem; border: 1px solid #cfcbc2; border-radius: 8px; font: inherit; background: #fff; color: var(--ink);
}
textarea { min-height: 90px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .2rem 1rem; }
fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: .6rem 1rem 1rem; margin: 0 0 1rem; }
legend { font-weight: 600; padding: 0 .3rem; }
.hint { font-size: .85rem; color: var(--muted); margin: .2rem 0 .4rem; }
.hp { position: absolute; left: -9999px; }

/* Buttons */
.btn, button { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; padding: .5rem .9rem; border-radius: 8px; border: 1px solid var(--line);
  background: #fff; color: var(--ink); font: inherit; font-weight: 500; cursor: pointer; text-decoration: none; line-height: 1.2; }
.btn:hover, button:hover { border-color: #bdb8ad; }
.btn.primary, button.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn.primary:hover, button.primary:hover { filter: brightness(1.07); }
.btn.danger, button.danger { color: var(--danger); border-color: #e2c3bf; }
.btn.small, button.small { padding: .25rem .55rem; font-size: .85rem; }
.btn.big, button.big { padding: .8rem 1.2rem; font-size: 1.05rem; width: 100%; }
.linkbtn { background: none; border: 0; padding: 0; color: var(--accent); text-decoration: underline; cursor: pointer; font: inherit; }
form.inline { display: inline; }

/* Status & Hinweise */
.badge { display: inline-block; padding: .1rem .5rem; border-radius: 999px; font-size: .78rem; font-weight: 600; background: #efede8; color: var(--muted); white-space: nowrap; }
.badge.s-anfrage { background: var(--warn-soft); color: var(--warn); }
.badge.s-gebucht { background: var(--info-soft); color: #31597a; }
.badge.s-fotografiert, .badge.s-galerie_bereit { background: #efe9f6; color: #5a3f80; }
.badge.s-auswahl_bestaetigt, .badge.s-in_bearbeitung { background: #fdf0e6; color: #8a4f1f; }
.badge.s-ausgeliefert, .badge.s-abgeschlossen { background: var(--ok-soft); color: var(--ok); }
.badge.s-storniert { background: var(--danger-soft); color: var(--danger); }
.badge.p-offen { background: var(--danger-soft); color: var(--danger); }
.badge.p-teilweise { background: var(--warn-soft); color: var(--warn); }
.badge.p-bezahlt, .badge.p-ueberzahlt { background: var(--ok-soft); color: var(--ok); }
.badge.m-entwurf, .badge.m-fehlgeschlagen { background: var(--danger-soft); color: var(--danger); }
.badge.m-geplant { background: var(--info-soft); color: #31597a; }
.badge.m-versendet, .badge.m-manuell_versendet { background: var(--ok-soft); color: var(--ok); }
.badge.trait { background: var(--warn-soft); color: var(--warn); }
.alert { padding: .7rem .9rem; border-radius: 8px; margin: 0 0 1rem; border: 1px solid transparent; }
.alert.ok { background: var(--ok-soft); color: var(--ok); border-color: #cfe5d7; }
.alert.fehler, .alert.danger { background: var(--danger-soft); color: var(--danger); border-color: #efd0cc; }
.alert.warn { background: var(--warn-soft); color: var(--warn); border-color: #f0dfb9; }
.alert.info { background: var(--info-soft); color: #31597a; border-color: #d3e0ec; }
.unsent { border: 2px dashed var(--danger); }
.next-action { font-weight: 500; }
.due { font-size: .82rem; color: var(--muted); }
.due.overdue { color: var(--danger); font-weight: 600; }

/* Kennzahlen */
.kpi { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: .7rem .9rem; text-decoration: none; color: inherit; display: block; }
.kpi b { display: block; font-size: 1.4rem; }
.kpi span { color: var(--muted); font-size: .85rem; }
.pipeline { display: flex; gap: .4rem; flex-wrap: wrap; }
.pipeline a { flex: 1 1 110px; text-align: center; padding: .55rem .3rem; background: #fff; border: 1px solid var(--line); border-radius: 8px; text-decoration: none; color: var(--ink); font-size: .85rem; }
.pipeline a b { display: block; font-size: 1.25rem; }
.pipeline a.active { border-color: var(--accent); background: var(--accent-soft); }

dl.kv { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); gap: .25rem 1rem; margin: 0; }
dl.kv dt { color: var(--muted); overflow-wrap: anywhere; }
dl.kv dd { margin: 0; overflow-wrap: anywhere; min-width: 0; }
@media (max-width: 600px) { dl.kv { grid-template-columns: minmax(0, 1fr); gap: 0; } dl.kv dd { margin-bottom: .5rem; } } /* Handy: Frage über Antwort statt Überlauf */

/* Galerie */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5rem; }
@media (max-width: 480px) { .gallery { grid-template-columns: repeat(2, 1fr); } }
.tile { position: relative; background: #ddd; border-radius: 8px; overflow: hidden; aspect-ratio: 1 / 1; border: 3px solid transparent; }
.tile img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; }
.tile.sel { border-color: var(--accent); }
.tile .fav { position: absolute; right: 6px; bottom: 6px; width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(255,255,255,.92); font-size: 1.25rem; padding: 0; }
.tile.sel .fav { background: var(--accent); color: #fff; }
.tile .cmp { position: absolute; left: 6px; bottom: 6px; background: rgba(255,255,255,.92); border-radius: 6px; padding: .15rem .35rem; font-size: .75rem; display: flex; align-items: center; gap: .2rem; }
.tile .name { position: absolute; left: 0; right: 0; top: 0; font-size: .7rem; background: rgba(0,0,0,.45); color: #fff; padding: .1rem .3rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.selbar { position: sticky; bottom: 0; background: #fff; border-top: 1px solid var(--line); padding: .6rem 1rem; box-shadow: 0 -2px 10px rgba(0,0,0,.05); z-index: 20; }
.selbar .row { justify-content: space-between; }
.lightbox { position: fixed; inset: 0; background: rgba(15,15,15,.94); display: none; z-index: 50; align-items: center; justify-content: center; flex-direction: column; }
.lightbox.open { display: flex; }
.lightbox img { max-width: 96vw; max-height: 80vh; object-fit: contain; }
.lightbox .lb-bar { display: flex; gap: .6rem; margin-top: .8rem; color: #fff; align-items: center; }
.lightbox button { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.25); }
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: .35rem; }
.thumbs img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 6px; }
/* „Bestellung/Auswahl prüfen“: ganze Bilder (nicht beschnitten), groß genug zum Prüfen, antippen = Großansicht */
.review-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .6rem; }
@media (max-width: 559px) { .review-thumbs { grid-template-columns: 1fr 1fr; gap: .45rem; } }
.review-thumbs a { display: block; text-decoration: none; color: var(--muted); background: #f1efea; border-radius: 8px; overflow: hidden; }
.review-thumbs img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: #e9e6e0; }
.review-thumbs span { display: block; font-size: .72rem; padding: .25rem .4rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Knopf „nach oben“ bei langen Seiten (Galerien) */
.to-top { position: fixed; right: 14px; bottom: 16px; z-index: 30; width: 46px; height: 46px; border-radius: 50%; padding: 0; font-size: 1.3rem; line-height: 1;
  background: #fff; color: var(--ink); border: 1px solid var(--line); box-shadow: 0 2px 10px rgba(0,0,0,.15); opacity: .92; }
.to-top[hidden] { display: none; }
@media print { .to-top { display: none; } }

/* Öffentliche Seiten */
.pub-header { padding: 1.2rem 1rem .4rem; text-align: center; }
.pub-header .brand { font-size: 1.2rem; }
.offer-card { display: block; text-decoration: none; color: inherit; }
.offer-card:hover { border-color: var(--accent); }
.price { font-weight: 700; font-size: 1.05rem; }
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: .45rem; }
.slots a, .slots span, .slots label { text-align: center; padding: .6rem .3rem; border: 1px solid var(--line); border-radius: 8px; background: #fff; text-decoration: none; color: var(--ink); font-weight: 500; }
.slots a:hover { border-color: var(--accent); background: var(--accent-soft); }
.slots .full { color: #b4b0a8; background: #f2f0eb; text-decoration: line-through; }
.slots input { display: none; }
.slots input:checked + span { background: var(--accent); color: #fff; }
.days { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: .45rem; }
.days a { padding: .5rem; border: 1px solid var(--line); border-radius: 8px; background: #fff; text-decoration: none; color: var(--ink); text-align: center; }
.days a.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.days a small { display: block; }
.animal-block { border: 1px dashed var(--line); border-radius: 8px; padding: .3rem .8rem .8rem; margin-bottom: .6rem; }
details > summary { cursor: pointer; color: var(--accent); }
.legal-text { white-space: pre-wrap; background: #faf9f6; border: 1px solid var(--line); border-radius: 8px; padding: .6rem; font-size: .88rem; max-height: 260px; overflow: auto; }
.pre { white-space: pre-wrap; }

/* Shootingübersicht / Druck */
.briefing h2 { border-bottom: 1px solid var(--line); padding-bottom: .2rem; margin-top: 1rem; }
.checklist { list-style: none; padding: 0; margin: 0; }
.checklist li { padding: .35rem 0; border-bottom: 1px dotted var(--line); }
.checklist label { display: flex; gap: .55rem; font-weight: 400; margin: 0; align-items: flex-start; }
.checklist input { width: 1.2rem; height: 1.2rem; margin-top: .1rem; }
.important { background: var(--warn-soft); border-left: 4px solid var(--warn); padding: .5rem .7rem; border-radius: 6px; }
@media print {
  body { background: #fff; font-size: 11pt; }
  .topbar, .no-print, .flash, .btn, button { display: none !important; }
  .card { box-shadow: none; border: 0; padding: 0; margin: 0 0 .6rem; }
  .wrap { max-width: none; padding: 0; }
  a { color: inherit; text-decoration: none; }
  .page-break { page-break-before: always; }
}

/* Download-Galerie der fertigen Bilder (Masonry: Desktop zwei Spalten, Handy eine) */
.dl-head { max-width: none; margin-left: auto; margin-right: auto; } /* so breit wie die Galerie darunter */
.dl-head p { max-width: 80ch; }
main:has(.dl-masonry.cols-1) .dl-head { max-width: 1100px; }
.dl-masonry { columns: 2 340px; column-gap: 1rem; }
.dl-masonry.js-masonry { columns: auto; display: grid; grid-template-columns: 1fr; grid-auto-rows: 4px; column-gap: 1rem; align-items: start; }
.dl-masonry.js-masonry > .dl-item { margin: 0; }
@media (min-width: 720px) { .dl-masonry.js-masonry { grid-template-columns: 1fr 1fr; } }
.dl-item { break-inside: avoid; margin: 0 0 1rem; background: #fff; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.dl-item img { display: block; width: 100%; height: auto; background: #e9e6e0; }
.dl-item figcaption { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .55rem .7rem; }
.dl-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .85rem; }
.dl-name small { display: block; color: var(--muted); }
.dl-item .btn { flex-shrink: 0; }
.dl-file { aspect-ratio: 3 / 2; display: flex; align-items: center; justify-content: center; background: #e9e6e0; color: var(--muted); font-weight: 600; letter-spacing: .05em; }
.center { text-align: center; }
.dl-open { display: block; cursor: zoom-in; }
#dl-lightbox img, #lightbox img { width: 92vw; height: 80vh; object-fit: contain; }
#dl-lightbox .lb-bar, #lightbox .lb-bar { flex-wrap: wrap; justify-content: center; padding: 0 1rem; text-align: center; }
#dl-lightbox .lb-name, #lightbox .lb-name { opacity: .8; font-size: .9rem; }
#dl-lightbox .lb-count, #lightbox .lb-count { font-variant-numeric: tabular-nums; opacity: .8; font-size: .9rem; }
.lb-close { position: absolute; top: .8rem; right: .8rem; width: 44px; height: 44px; padding: 0; border-radius: 50%; font-size: 1.1rem; }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 64px; padding: 0; font-size: 2rem; line-height: 1; }
.lb-prev { left: .6rem; }
.lb-next { right: .6rem; }
.lightbox.single .lb-nav, .lightbox.single .lb-count { display: none; }
@media (max-width: 600px) { .lb-nav { width: 40px; height: 52px; font-size: 1.6rem; background: rgba(0,0,0,.35); } }

/* Auswahlgalerie im gleichen Stil: ausgewählte Bilder mit farbigem Rahmen */
.sel-open { display: block; cursor: zoom-in; }
.sel-item { border-width: 2px; }
.sel-item.sel { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.sel-item figcaption form { margin: 0; }
.sel-item .fav { min-width: 7.5rem; }
.lightbox .lb-fav.primary { background: var(--accent); border-color: var(--accent); }

/* Galerie-Bearbeitung (Verwaltung) */
.adm-tools { margin: .8rem 0 .5rem; align-items: center; }
.adm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .5rem; }
.adm-tile { position: relative; display: block; aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden; background: #e9e6e0; border: 3px solid transparent; cursor: pointer; margin: 0; }
.adm-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.adm-tile input { position: absolute; left: 6px; top: 6px; width: 20px; height: 20px; margin: 0; accent-color: var(--danger); }
.adm-tile:has(input:checked) { border-color: var(--danger); }
.adm-tile:has(input:checked) img { opacity: .6; }
.adm-tile.sel { box-shadow: inset 0 0 0 2px var(--accent); }
.adm-mark { position: absolute; right: 6px; top: 6px; background: var(--accent); color: #fff; border-radius: 10px; padding: 0 .4rem; font-size: .8rem; }
.adm-name { position: absolute; left: 0; right: 0; bottom: 0; font-size: .7rem; background: rgba(0,0,0,.5); color: #fff; padding: .1rem .3rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-file { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--muted); font-weight: 600; }
.wm-box { margin-top: 1rem; padding: 1rem; border: 1px solid var(--line); border-radius: 10px; background: #faf9f6; }
.wm-box h3 { margin-top: 0; display: flex; gap: .5rem; align-items: center; }
.wm-cols { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 800px) { .wm-cols { grid-template-columns: minmax(260px, 1fr) 1.3fr; } }
.wm-preview { max-width: 100%; border-radius: 8px; border: 1px solid var(--line); display: block; }
.sel-tools { gap: .5rem; flex-wrap: wrap; }
.sel-tools form { margin: 0; }
.sel-filter-note { text-align: center; margin: 0 0 1rem; }
.selbar-actions { display: flex; gap: .5rem; margin-top: .5rem; }
.selbar-actions .btn { flex: 1; padding: .7rem 1rem; }
.selbar-actions .btn.primary { flex: 2; font-size: 1.05rem; }
.price-option { display: flex; gap: .5rem; align-items: flex-start; padding: .55rem .7rem; border: 1px solid var(--line); border-radius: 8px; margin: .4rem 0; }
.price-option.best { border-color: var(--accent); background: var(--accent-soft); }
.track { margin: .3rem 0 .8rem; font-size: .92rem; }
.price-box { background: var(--accent-soft); border-radius: 8px; padding: .7rem .9rem; margin: .8rem 0; }
ul.plain { list-style: none; padding: 0; margin: .3rem 0; }
.legal-text { max-height: 220px; overflow: auto; font-size: .85rem; background: #faf9f6; border: 1px solid var(--line); border-radius: 6px; padding: .5rem; margin: .3rem 0; }
.mode-choice { display: grid; grid-template-columns: 1fr; gap: .6rem; margin-bottom: 1rem; }
@media (min-width: 700px) { .mode-choice { grid-template-columns: 1fr 1fr; } }
.mode-opt { display: flex; gap: .6rem; align-items: flex-start; padding: .8rem; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; margin: 0; font-weight: normal; }
.mode-opt:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.places-free { font-size: 1.15rem; margin: .2rem 0 .5rem; }
.places-free strong { font-size: 1.6rem; color: var(--accent); }
.places-bar { height: 10px; background: #e9e6e0; border-radius: 6px; overflow: hidden; margin-bottom: 1rem; }
.places-bar span { display: block; height: 100%; background: var(--accent); }
.cover-thumb { width: 160px; aspect-ratio: 4 / 5; border-radius: 10px; overflow: hidden; background: #e9e6e0; position: relative; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cover-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cover-note { position: absolute; bottom: 6px; left: 6px; right: 6px; font-size: .75rem; color: var(--muted); text-align: center; background: rgba(255,255,255,.8); border-radius: 6px; }

/* Buchungsübersicht: Karten mit Bild (Stil wie Print/Website) */
.shop { --serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif; --green: #4c5a3a; --warm: #8a5a3c; }
.shop-intro { text-align: center; color: var(--muted); max-width: 720px; margin: 0 auto 1.2rem; }
.shop-head { display: flex; align-items: center; gap: 1rem; margin: 1.4rem 0 1rem; flex-wrap: wrap; }
.shop-head h2 { font-family: var(--serif); font-size: 1.85rem; font-weight: 500; margin: 0; }
.shop-line { flex: 1; min-width: 40px; height: 1px; background: #bcb6aa; }
.shop-head em { color: var(--muted); font-family: var(--serif); font-size: .98rem; }
.shop-grid { display: grid; grid-template-columns: 1fr; gap: 1.2rem; }
@media (min-width: 900px) { .shop-grid { grid-template-columns: 1fr 1fr; } }
.shop-card { display: grid; grid-template-columns: 1fr; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 2px 14px rgba(40,35,25,.08); }
@media (min-width: 560px) { .shop-card { grid-template-columns: 40% 1fr; } }
.shop-img { display: block; background: #e9e4da; min-height: 220px; position: relative; }
.shop-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos-x, 50%) 50%; }
.shop-noimg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #b8ae9c; }
.shop-noimg .ic { width: 64px; height: 64px; }
.shop-body { padding: 1.1rem 1.2rem 1.2rem; display: flex; flex-direction: column; }
.shop-title { display: flex; gap: .7rem; align-items: center; margin-bottom: .5rem; }
.shop-title h3 { font-family: var(--serif); font-size: 1.25rem; font-weight: 600; margin: 0; line-height: 1.2; }
.shop-title h3 a { color: var(--ink); text-decoration: none; }
.shop-badge { width: 42px; height: 42px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; }
.shop-badge .ic { width: 22px; height: 22px; }
.tone-green .shop-badge, .tone-green .shop-btn { background: var(--green); }
.tone-warm .shop-badge, .tone-warm .shop-btn { background: var(--warm); }
.shop-desc { color: var(--muted); font-size: .92rem; margin: 0 0 .7rem; }
.shop-meta { list-style: none; padding: 0; margin: 0 0 .8rem; color: var(--muted); font-size: .9rem; border-bottom: 1px solid var(--line); padding-bottom: .8rem; }
.shop-meta li { display: flex; gap: .55rem; align-items: center; margin: .3rem 0; }
.shop-meta .ic { width: 18px; height: 18px; flex-shrink: 0; color: var(--ink); opacity: .75; }
.shop-foot { margin-top: auto; display: flex; flex-wrap: wrap; gap: .8rem; align-items: flex-end; justify-content: space-between; }
.shop-price { font-family: var(--serif); font-size: 1.7rem; font-weight: 600; line-height: 1; }
.shop-price small { display: block; font-family: system-ui, sans-serif; font-size: .78rem; font-weight: 400; color: var(--muted); margin-top: .3rem; }
.shop-cta { display: flex; flex-direction: column; align-items: flex-end; gap: .45rem; }
.shop-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; color: #fff; text-decoration: none; border-radius: 8px; padding: .7rem 1.2rem; font-size: .95rem; min-width: 170px; }
.shop-card > .shop-body > .shop-foot > .shop-btn { flex: 1; max-width: 100%; }
.shop-btn .ic { width: 16px; height: 16px; }
.shop-btn:hover { filter: brightness(1.1); }
.shop-pill { font-size: .78rem; padding: .25rem .7rem; border-radius: 999px; }
.shop-pill.ok { background: #e3ead8; color: #3f4d2c; }
.shop-pill.low { background: #f7e3b5; color: #6b4a10; }
.shop-pill.full { background: #eee; color: var(--muted); }
.ic { display: inline-block; vertical-align: middle; }
/* Titelbild auf den Detailseiten */
.hero-img { width: 100%; height: 288px; max-height: 288px; object-fit: cover; object-position: 50% var(--pos-y, 50%); border-radius: 12px; display: block; margin-bottom: 1rem; }
.shop-foot-col { flex-direction: column; align-items: stretch; }
.shop-foot-col .shop-btn { width: 100%; }
@media (max-width: 559px) { .shop-img { min-height: 0; aspect-ratio: 4 / 3; } .shop-img img { object-position: var(--pos-x, 50%) 30%; } }
/* Terminauswahl: Monatskalender + Uhrzeiten nebeneinander */
.book-grid { display: grid; grid-template-columns: 1fr; gap: 0 1rem; }
@media (min-width: 680px) { .book-grid { grid-template-columns: minmax(280px, 1fr) 1fr; align-items: start; } }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; }
.cal-nav { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--line); text-decoration: none; color: var(--ink); font-size: 1.3rem; }
.cal-nav.off { opacity: .3; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: .3rem; text-align: center; }
.cal-wd { font-size: .75rem; color: var(--muted); padding: .2rem 0; }
.cal-day { aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; border-radius: 8px; color: #b9b5ad; font-size: .92rem; }
.cal-day.free { background: var(--accent-soft); color: var(--accent); font-weight: 600; text-decoration: none; }
.cal-day.free:hover { outline: 2px solid var(--accent); }
.cal-day.active { background: var(--accent); color: #fff; }
.sun-box { display: flex; flex-wrap: wrap; gap: .3rem 1rem; align-items: baseline; background: #fbf3e2; border-radius: 8px; padding: .55rem .8rem; margin: 0 0 .8rem; font-size: .9rem; }
.sun-golden { color: #8a5a1a; }
.slots a.gold { border-color: #e2b763; background: #fdf6e7; }
.slots a.gold span { border: 0; background: none; padding: 0; color: #b07a1a; }

/* Schalter aktiv/inaktiv (Angebote, Events) */
.active-toggle { display: inline-block; margin: 0; }
.active-toggle button { display: inline-flex; align-items: center; gap: .45rem; background: #efede8; color: var(--muted); border: 1px solid transparent; border-radius: 999px; padding: .25rem .7rem .25rem .3rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.active-toggle button.small { font-size: .8rem; padding: .15rem .6rem .15rem .25rem; }
.active-toggle .switch { position: relative; width: 2rem; height: 1.1rem; border-radius: 999px; background: #c9c5bd; transition: background .15s; flex: none; }
.active-toggle .switch::after { content: ""; position: absolute; top: .15rem; left: .15rem; width: .8rem; height: .8rem; border-radius: 50%; background: #fff; transition: left .15s; }
.active-toggle.on button { background: #e6f2e8; color: #2f6b3a; }
.active-toggle.on .switch { background: #3f8a4c; }
.active-toggle.on .switch::after { left: 1.05rem; }
.active-toggle button:focus-visible { outline: 2px solid var(--accent, #333); outline-offset: 2px; }
tr.inactive > td:not(.keep) { opacity: .55; }
/* Ungerade Anzahl Karten (z. B. wenn ein Angebot ausgeblendet ist): letzte Karte mittig statt Lücke daneben */
@media (min-width: 900px) { .shop-grid > .shop-card:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - .6rem); } }

/* hidden-Attribut gilt auch für Elemente mit eigenem display (z. B. .field-row) */
[hidden] { display: none !important; }

/* Impressum/Datenschutz-Links und Cookie-Hinweis auf den öffentlichen Seiten */
.legal-links { text-align: center; font-size: .85rem; color: var(--muted); margin: 1.2rem 0 .5rem; }
.legal-links a { color: var(--muted); }
.legal-page { line-height: 1.6; }
.cookie-note { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 50; max-width: 760px; margin: 0 auto; background: var(--card); color: var(--ink);
  border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 6px 24px rgba(40,35,25,.18); padding: .9rem 1rem; display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.cookie-note p { margin: 0; flex: 1; min-width: 220px; font-size: .9rem; }
fieldset.send-mode { border: 1px solid var(--line); border-radius: 10px; padding: .6rem .9rem .8rem; margin: 0; }
fieldset.send-mode legend { padding: 0 .3rem; }

/* Galerie-Ansicht: Spalten, volle Breite, dunkler Hintergrund */
.wrap.wrap-full { max-width: none; padding-left: 16px; padding-right: 16px; }
.dl-masonry.cols-1 { columns: 1; }
.dl-masonry.cols-3 { columns: 3 260px; }
@media (min-width: 720px) {
  .dl-masonry.js-masonry.cols-1 { grid-template-columns: 1fr; }
  .dl-masonry.js-masonry.cols-3 { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1000px) { .dl-masonry.js-masonry.cols-3 { grid-template-columns: 1fr 1fr 1fr; } }
.dl-masonry.cols-1 { max-width: 1100px; margin-left: auto; margin-right: auto; }
@media (max-width: 719px) { .dl-masonry.js-masonry.cols-3 { grid-template-columns: 1fr 1fr; column-gap: .5rem; } .dl-masonry.cols-3 .dl-item figcaption { flex-wrap: wrap; } } /* Handy: 1 Spalte, bei „3“ zwei */
body.gl-dark { color: #ececec; }
body.gl-dark main > p a, body.gl-dark .sel-filter-note a, body.gl-dark .legal-links a, body.gl-dark .pub-header .brand { color: #f0f0f0; }
body.gl-dark .legal-links, body.gl-dark .muted:not(.card .muted) { color: #c8c8c8; }
body.gl-dark .pub-header { background: transparent; border-color: rgba(255,255,255,.15); }
body.gl-dark .card, body.gl-dark .dl-item, body.gl-dark .selbar { color: var(--ink); }
.gl-swatch { display: inline-block; width: 1rem; height: 1rem; border-radius: 4px; border: 1px solid var(--line); vertical-align: -2px; }
.gl-form .field-row label.inline { display: block; margin: .25rem 0; }
.gl-fields[data-off] { opacity: .45; pointer-events: none; }

/* Bewertung Ja / Vielleicht / Nein in der Auswahlgalerie */
.rate-row { display: flex; gap: .35rem; padding: 0 .7rem .6rem; flex-wrap: wrap; }
.rate-row form { margin: 0; }
.rate { font-size: .8rem; padding: .25rem .6rem; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--muted); cursor: pointer; }
.rate.on.rate-ja { background: #e3efe3; border-color: #7fae84; color: #2f6b3a; }
.rate.on.rate-vielleicht { background: #fbf0d6; border-color: #d9b45c; color: #7a5a12; }
.rate.on.rate-nein { background: #f6e1de; border-color: #d28f86; color: #8a3a2f; }
.sel-item[data-rating="nein"] img { opacity: .55; }
.rate-tools { margin-top: .6rem; border-top: 1px solid var(--line); padding-top: .6rem; }
.rate-filter button { font-size: .85rem; }
.lb-rate { display: inline-flex; gap: .3rem; }

/* Titel / Kopfbild über der Galerie */
.gal-hero { position: relative; border-radius: 14px; overflow: hidden; margin: 0 auto 1rem; background: #ddd; }
.gal-hero img { display: block; width: 100%; height: clamp(180px, 38vw, 460px); object-fit: cover; }
.gal-hero-title { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 2.5rem 1.4rem 1.1rem; color: #fff; font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
  font-weight: 500; font-size: clamp(1.6rem, 4vw, 2.8rem); line-height: 1.15; background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0)); text-shadow: 0 1px 6px rgba(0,0,0,.35); }
.gal-title { text-align: center; font-family: Georgia, "Iowan Old Style", "Times New Roman", serif; font-weight: 500; font-size: clamp(1.7rem, 4vw, 2.6rem); margin: .4rem 0 1.1rem; }
main:has(.dl-masonry.cols-1) .gal-hero { max-width: 1100px; }
.dl-head h1.dl-sub { font-size: 1.25rem; }
.hero-crop { margin-top: 1rem; border-top: 1px solid var(--line); padding-top: .8rem; }
.hero-crop-frame { position: relative; border-radius: 12px; overflow: hidden; aspect-ratio: 5 / 2; max-width: 760px; cursor: ns-resize; touch-action: none; background: #ddd; user-select: none; }
.hero-crop-frame img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.hero-crop-frame.crop-card { aspect-ratio: 5 / 8; max-width: 220px; cursor: ew-resize; }
.hero-crop-frame.crop-hero { aspect-ratio: 7 / 2; max-width: 640px; }

/* Speicher & Aufräumen */
.st-dot { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; vertical-align: 0; flex-shrink: 0; }
.st-frei { background: #3f8a4c; } .st-pruefen { background: #d9a520; } .st-benoetigt { background: #c0443a; }
table.storage td { vertical-align: top; }
table.storage small { display: block; margin-top: .2rem; max-width: 380px; }
.st-pick { font-weight: 600; }
.storage-bar { position: sticky; bottom: 0; z-index: 5; box-shadow: 0 -4px 16px rgba(40,35,25,.08); }
.storage-confirm { border: 2px solid #d9a520; }
.storage-confirm li { margin: .4rem 0; }
/* ohne Infobox: schlichte Knopfleiste über der Galerie */
.gal-bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 0 auto 1rem; }
.gal-bar .rate-tools { border: 0; margin: 0; padding: 0; width: 100%; }
.gal-bar .sel-tools { margin: 0; }

/* Offene Events: Bildzuordnung (Bilder links, Teilnehmer rechts) */
.oe-assign { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1rem; align-items: start; }
.oe-panel { position: sticky; top: 64px; max-height: calc(100vh - 80px); overflow: auto; margin: 0; }
.oe-plist { list-style: none; padding: 0; margin: .4rem 0 0; }
.oe-plist li { display: flex; gap: .5rem; align-items: flex-start; padding: .35rem .3rem; border-radius: 8px; border: 2px dashed transparent; }
.oe-plist li.drop { border-color: var(--accent); background: var(--accent-soft); }
.oe-plist li[hidden] { display: none; }
.oe-names { position: absolute; left: 0; right: 0; top: 0; padding: .15rem .3rem .15rem 30px; font-size: .7rem; background: rgba(46, 90, 70, .85); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oe-grid .adm-tile.dragging { opacity: .5; }
.steps { padding-left: 1.2rem; }
.steps li.done { color: var(--ok); }
.steps li.done::marker { content: '✓  '; }
@media (max-width: 800px) {
  .oe-assign { grid-template-columns: 1fr; }
  .oe-panel { position: static; max-height: none; order: -1; }
}
/* Hinweis „Ansicht aktualisieren“: schwebt oben (verschiebt keine Bilder) und bleibt beim Scrollen sichtbar */
#rate-stale { position: fixed; top: .5rem; left: 50%; transform: translateX(-50%); width: min(560px, calc(100% - 1.5rem)); margin: 0; z-index: 25; box-shadow: 0 2px 14px rgba(0,0,0,.18); }
/* Feedback: Sterne (rechts nach links, damit :checked ~ label die vorherigen Sterne färbt) */
.stars-field{border:0;padding:0;margin:0 0 1rem}.stars-field legend{padding:0;margin-bottom:.3rem;font-weight:600}
.stars-input{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:.15rem}
.stars-input input{position:absolute;opacity:0;width:1px;height:1px}
.stars-input label{font-size:2.2rem;line-height:1;color:#cfc8ba;cursor:pointer;padding:0 .1rem}
.stars-input input:checked ~ label,.stars-input label:hover,.stars-input label:hover ~ label{color:#d9a400}
.stars-input input:focus-visible + label{outline:2px solid #2f5d50;border-radius:4px}
.stars{color:#d9a400;letter-spacing:.05em;white-space:nowrap}
/* Rabattcode im Buchungsformular */
.code-row{gap:.5rem;flex-wrap:nowrap}.code-row input{flex:1;text-transform:uppercase}
.code-ok{color:#2f6b3a;font-weight:600}.code-bad{color:#a33}
.voucher-amounts{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.6rem}
.voucher-amount{border:1px solid #d9d3c7;border-radius:8px;padding:.45rem .8rem;margin:0}
table.plan{margin-top:.4rem}small.overdue{color:var(--danger);font-weight:600}
/* Nachbestellung */
.reorder-item{position:relative;display:block;margin:0;cursor:pointer}
.reorder-item input{position:absolute;top:.5rem;left:.5rem;width:1.4rem;height:1.4rem;z-index:2}
.reorder-item:has(input:checked) img{outline:4px solid var(--accent, #2f5d50);outline-offset:-4px}
.reorder-sum{margin:1rem 0 .5rem}
/* Kalender: Monat und Woche */
.kal-month{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;background:var(--line,#e5e1d8);padding:0;overflow:hidden}
.kal-head{background:var(--card,#fff);font-weight:600;font-size:.8rem;text-align:center;padding:.3rem 0}
.kal-day{background:var(--card,#fff);min-height:6.5rem;padding:.25rem;display:flex;flex-direction:column;gap:2px;min-width:0}
.kal-day.other{background:#f7f5f0;opacity:.7}
.kal-day.today,.kal-wday.today{box-shadow:inset 0 0 0 2px var(--accent)}
.kal-num{font-size:.8rem;font-weight:600;text-decoration:none;color:var(--muted)}
.kal-it{display:block;font-size:.75rem;line-height:1.25;padding:1px 4px;border-radius:4px;background:var(--accent-soft);color:inherit;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kal-it.kal-event{background:#f9eeda}.kal-it.kal-block{background:#eceae4;color:var(--muted)}.kal-it.s-anfrage{background:#fbebeb}
.kal-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.5rem}
.kal-wday{padding:.5rem;margin:0}.kal-wday h3{font-size:.85rem;margin:0 0 .4rem}.kal-wday .kal-it{white-space:normal;margin-bottom:3px}
@media (max-width:759px){.kal-week{grid-template-columns:1fr}.kal-day{min-height:4rem}.kal-it{font-size:.65rem}.kal-it b{display:none}}
.topsearch{margin:0}.topsearch input{width:11rem;padding:.3rem .6rem;font-size:.85rem;min-height:0}
@media (max-width:759px){.topsearch input{width:8rem}}