/*
 * Leukeplaatjes — the "Modern" frontend (lib/theme.ts). The legacy theme CSS is not
 * loaded in this design; these rules style both the modern shell (m-*) and the
 * components shared by both designs (gallery, sharing, pagination, sidebar).
 *
 * Identity: blue header + Leukeplaatjes logo (matching the small signature on the images),
 * white panels on a cream page. Color comes from images and sharing buttons (each
 * network's own colors); brand blue is the interface's only accent.
 * No external font: the system font keeps loading fast.
 *
 * Visitors are mostly aged 30–70, sending images to WhatsApp from a phone: large text
 * (18px body), warm neutrals (Tailwind stone rather than cool blue-gray), large labeled
 * buttons, no automatic motion on load (only on touch/hover).
 *
 * Scales are fixed; choose from these rather than inventing new values:
 *   spacing 4 8 12 16 20 24 32 48 64
 *   text    13 14 16 17 18 20 24 30
 *   weight  400 (body) · 600 (accent) · 700 (heading) · 800 (logo)
 *   radius  8 (small) · 12 (panel, image)
 *   z-index 10 (label) · 40 (header) · 60 (skip link)
 * --link: the admin-configured link color (set inline by the layout); content links.
 */

:root {
  --brand: #1d4ed8;
  --brand-dark: #1e3a8a;
  --brand-light: #eff6ff;
  --link: #1d4ed8;
  /* Brand color as TEXT and as a background behind small white text: at least
     4.5:1 contrast against white (WCAG AA). When a light brand color is selected in the admin,
     the layout overrides this with a darker shade (lib/design.ts safeShade); the header band and borders retain --brand. */
  --brand-text: var(--brand);

  /* Warm neutrals (Tailwind stone). */
  --gray-50: #fafaf9;
  --gray-100: #f5f5f4;
  --gray-200: #e7e5e4;
  --gray-300: #d6d3d1;
  --gray-400: #a8a29e;
  --gray-500: #78716c;
  --gray-600: #57534e;
  --gray-700: #44403c;
  --gray-900: #1c1917;
  --cream: #f7f2ea;
  --warm: #f59e0b;

  /* Dark gray body text (gbpicsonline #303030): nearly black made bold text look too harsh. */
  --text: #302d2b;
  --text-2: var(--gray-600);
  --text-3: var(--gray-500);
  --page-bg: var(--cream);
  --panel: #fff;
  --border: var(--gray-200);

  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 3px 0 rgb(68 64 60 / 0.08), 0 1px 2px -1px rgb(68 64 60 / 0.08);

  --container: 1200px;
  --gutter: 12px;
  --font: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

@media (min-width: 640px) {
  :root {
    --gutter: 24px;
  }
}

/* ---------------------------------------------------------------- base */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 24px;
}

body.theme-modern {
  margin: 0;
  background: var(--page-bg);
  color: var(--text);
  font: 400 17px/1.75 var(--font);
  -webkit-font-smoothing: antialiased;
}

/* Resets use :where() for zero specificity, allowing component rules (one class) to override them. */
:where(.theme-modern) img {
  max-width: 100%;
  height: auto;
}

:where(.theme-modern) a {
  color: var(--link);
  text-decoration: none;
}

:where(.theme-modern) a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.theme-modern :focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}

:where(.theme-modern) :where(h1, h2, h3, h4) {
  margin: 0;
  color: var(--text);
  line-height: 1.25;
  text-wrap: balance;
}

:where(.theme-modern) p {
  margin: 0;
  text-wrap: pretty;
}

.theme-modern [hidden] {
  display: none !important;
}

.m-sr-only,
.theme-modern .screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.m-skip {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 60;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--text) !important;
  font-weight: 600;
  transform: translateY(-200%);
}

.m-skip:focus {
  transform: none;
}

/* ---------------------------------------------------------------- header */

/* Blue band: logo + search; white menu strip below. Not sticky (save space on mobile). */
.m-header {
  background: var(--brand);
  color: #fff;
}

.m-header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 32px;
  max-width: var(--container);
  margin: 0 auto;
  padding: 12px var(--gutter);
}

.m-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-right: auto;
  color: #fff !important;
  text-decoration: none !important;
}

.m-logo img {
  display: block;
  max-height: 40px;
  width: auto;
}

.m-mark {
  flex: none;
  color: var(--brand-text);
}

.m-logo-text {
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
}

.m-logo-text span {
  font-weight: 400;
  opacity: 0.8;
}

.m-search {
  display: flex;
  flex: 1 1 100%;
  order: 3;
  height: 44px;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: #fff;
}

.m-search input {
  flex: 1;
  min-width: 0;
  padding: 0 16px;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 16px;
}

.m-search input:focus-visible {
  outline: none;
}

.m-search:focus-within {
  box-shadow: 0 0 0 3px rgb(255 255 255 / 0.4);
}

.m-search input::placeholder {
  color: var(--text-3);
}

.m-search button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  border: 0;
  background: transparent;
  color: var(--brand-text);
  cursor: pointer;
}

@media (min-width: 768px) {
  .m-search {
    flex: 0 1 400px;
    order: 0;
  }
}

.m-menu {
  border-bottom: 1px solid var(--border);
  background: #fff;
}

.m-menu ul {
  display: flex;
  gap: 4px;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}

.m-menu ul::-webkit-scrollbar {
  display: none;
}

.m-menu a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 12px;
  border-bottom: 2px solid transparent;
  color: var(--text-2);
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
}

.m-menu li:first-child a {
  margin-left: -12px;
}

.m-menu a:hover {
  color: var(--text);
  text-decoration: none;
}

.m-menu a[aria-current='page'] {
  border-bottom-color: var(--brand);
  color: var(--brand-text);
}

/*
 * Phone menu (as on bestekrabbels.nl): only the logo and ☰ in the blue band. The button
 * (menu-toggle.tsx) sets data-menu-open on the header; the menu opens vertically, with
 * search at the bottom, pushing the page down rather than covering it. No animation.
 * .m-header-inner becomes display: contents so search can follow the menu visually
 * while remaining next to the logo in the DOM.
 */
.m-menu-button {
  display: none;
}

/*
 * Externally injected header elements (AdSense auto ads, plugin code) must not split
 * the header row: every child except the logo / search / ☰ / menu goes to the END
 * of the row at full width. On phones .m-header-inner uses display: contents, so
 * layout occurs on .m-header; the same rule applies there. (The PageSpeed filmstrip
 * showed an ad between the logo and ☰, 2026-10-01.)
 */
.m-header-inner > :not(.m-logo, .m-search, .m-menu-button),
.m-header > :not(.m-header-inner, .m-menu) {
  flex: 1 1 100%;
  order: 20;
  max-width: 100%;
}

@media (max-width: 767px) {
  .m-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }

  .m-header-inner {
    display: contents;
  }

  .m-logo {
    order: 0;
    min-height: 56px;
    padding-left: var(--gutter);
  }

  .m-menu-button {
    display: inline-flex;
    order: 1;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-right: calc(var(--gutter) - 10px);
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: #fff;
    cursor: pointer;
  }

  .m-menu-button:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -2px;
  }

  .m-header:not([data-menu-open]) .m-menu,
  .m-header:not([data-menu-open]) .m-search {
    display: none;
  }

  .m-menu {
    flex: 1 1 100%;
    order: 2;
    border-top: 1px solid rgb(255 255 255 / 0.2);
    border-bottom: 0;
    background: var(--brand-text);
  }

  .m-menu ul {
    display: block;
    padding: 0;
    overflow: visible;
  }

  .m-menu li:first-child a {
    margin-left: 0;
  }

  .m-menu a,
  .m-menu a:hover {
    display: flex;
    min-height: 56px;
    padding: 0 var(--gutter);
    border-bottom: 1px solid rgb(255 255 255 / 0.2);
    color: #fff;
    font-weight: 400;
    text-transform: uppercase;
  }

  .m-menu a[aria-current='page'] {
    border-bottom-color: rgb(255 255 255 / 0.2);
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 4px;
  }

  .m-search {
    flex: 1 1 100%;
    order: 3;
    margin: 16px var(--gutter);
  }
}

/* ---------------------------------------------------------------- layout */

.m-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  max-width: var(--container);
  margin: 0 auto;
  padding: 16px var(--gutter) 48px;
}

.m-main {
  min-width: 0;
}

@media (min-width: 1024px) {
  .m-layout {
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 32px;
    padding-top: 24px;
  }
}

/* Use full-width content when there are no sidebar widgets (categories page). */
.m-layout:has(> .m-sidebar .sidebar:empty) {
  grid-template-columns: minmax(0, 1fr);
}

.m-sidebar:has(.sidebar:empty) {
  display: none;
}

/* White panel: page frame, home blocks, sidebar widgets. */
.m-frame,
.m-block,
.m-sidebar .widget {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow);
}

@media (min-width: 640px) {
  .m-frame,
  .m-block {
    padding: 24px;
  }
}

.m-page-title {
  margin-bottom: 16px;
  font-size: 24px;
  font-weight: 600;
}

@media (min-width: 640px) {
  .m-page-title {
    font-size: 26px;
  }
}

.m-content > * + * {
  margin-top: 24px;
}

.m-content h2 {
  font-size: 20px;
  font-weight: 600;
}

/* Bold uses 600 (soft like gbpicsonline); 700 looked too heavy in the system font. */
:where(.theme-modern) :where(strong, b) {
  font-weight: 600;
}

.m-content h3 {
  font-size: 18px;
  font-weight: 600;
}

.m-content .intro,
.m-content .outro,
.m-content .outro-text {
  max-width: 42em;
  color: var(--text-2);
}

.m-content .intro p + p,
.m-content .outro p + p {
  margin-top: 12px;
}

.m-content ul:not([class]),
.m-content ol:not([class]) {
  padding-left: 24px;
}

/* Static page text (About us, Contact, Legal notice) arrives inside an unstyled wrapper;
   the "> * + *" rule above does not reach it — paragraphs and headings ran together. */
.m-content > div:not([class]) > * + * {
  margin-top: 16px;
}

.m-content > div:not([class]) > h2 {
  margin-top: 32px;
  text-wrap: balance;
}

.m-content > div:not([class]) > p {
  text-wrap: pretty;
}

/* ---------------------------------------------------------------- home */

/* One white card (like bestekrabbels): welcome, tiles, large images, holidays. */
.m-home {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
}

@media (min-width: 640px) {
  .m-home {
    gap: 40px;
  }
}

.m-welcome h1 {
  font-size: 24px;
  font-weight: 700;
}

@media (min-width: 640px) {
  .m-welcome h1 {
    font-size: 30px;
  }
}

.m-date {
  margin-bottom: 4px;
  color: var(--brand-text);
  font-size: 16px;
  font-weight: 600;
}

.m-intro {
  max-width: 42em;
  margin-top: 8px;
  color: var(--text-2);
}

.m-intro a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.m-block .m-intro:first-child {
  margin-top: 0;
}

.m-block-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.m-block-heading h2 {
  font-size: 20px;
  font-weight: 700;
}

.m-block-heading a {
  color: var(--brand-text);
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
}

/* Greeting heading: "Good evening!" is bold; the question ("What would you like to send tonight?") is softer. */
.m-block-heading h2 span {
  color: var(--text-2);
  font-weight: 400;
}

/*
 * Tiles like bestekrabbels: 2 equal cells on phones, 4 on tablets and desktops; images
 * centered in each cell (160px on phones, 110×110 on wide screens), names span the cell.
 * Admin-configured tiles use the same layout.
 */
.m-tiles,
.theme-modern .gb-tile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 480px) {
  .m-tiles,
  .theme-modern .gb-tile-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.m-tiles a,
.theme-modern .gb-tile a {
  display: block;
  color: var(--text);
  text-align: center;
}

.m-tiles a:hover {
  text-decoration: none;
}

.m-tile-image {
  position: relative;
  display: block;
  width: 160px;
  max-width: 100%;
  aspect-ratio: 1;
  margin-inline: auto;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--gray-100);
}

@media (min-width: 480px) {
  .m-tile-image {
    width: 110px;
  }
}

.m-tile-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 200ms ease;
}

/* Slight fade on hover like gbpicsonline (opacity .7, 0.2s); no scaling (user request 2026-10-05). */
@media (hover: hover) {
  .m-tiles a:hover img,
  .theme-modern .gb-tile a:hover img {
    opacity: 0.7;
  }

  .m-tiles a:hover .m-tile-name {
    color: var(--brand-text);
  }
}

.m-tile-name {
  display: -webkit-box;
  margin-top: 8px;
  overflow: hidden;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}





/* Large images: borderless like bestekrabbels, stacked; image, gallery name, count, sharing. */
.m-pictures {
  display: grid;
  grid-template-columns: minmax(0, 500px);
  justify-content: center;
  gap: 40px;
}

.m-picture {
  text-align: center;
}

.m-picture-image {
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--gray-100);
}

.m-picture-image img {
  display: block;
  width: 100%;
  height: auto;
}

/* Include the content container to override .m-content h2 (h2 on listing pages). */
.m-picture :is(h2, h3),
.m-content .m-picture h2 {
  margin-top: 12px;
  font-size: 18px;
  font-weight: 700;
}

.m-picture :is(h2, h3) a {
  color: var(--text);
}

.m-picture :is(h2, h3) a:hover {
  color: var(--brand-text);
}

.m-picture-count {
  color: var(--text-3);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

.m-picture .codeboxlinks {
  margin-top: 12px;
}

/* ---------------------------------------------------------------- listings (category, search): large stacked images like bestekrabbels */

.m-card-grid,
.theme-modern #archive-container {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
}

.m-card-grid > *,
.theme-modern #archive-container > .archive-item {
  width: 100%;
  max-width: 500px;
  margin-inline: auto;
}

.theme-modern #archive-container > .pagination {
  margin-top: 0;
}

.theme-modern .gb-btn-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Home quick links (legacy data): square tiles. */
.theme-modern .gbpics-quick-links-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 16px 12px;
}

.theme-modern .gbpics-quick-link-item {
  color: var(--text);
  text-align: center;
}

.theme-modern .gbpics-quick-link-item:hover {
  text-decoration: none;
}

.theme-modern .gbpics-quick-link-item figure {
  margin: 0;
}

.theme-modern .gbpics-quick-link-item img {
  display: block;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1;
  border-radius: var(--radius);
}

.theme-modern .gbpics-quick-link-title {
  display: block;
  margin-top: 8px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
}

/* Category page tile groups (Categories → Page layout): same as home tiles. */
.theme-modern .gb-tile-group + .gb-tile-group {
  margin-top: 32px;
}

.theme-modern .gb-tile-group h2 {
  margin-bottom: 16px;
  font-size: 20px;
}

/* Admin-configured tiles (Categories → Page layout): share the .m-tiles grid above. */
.theme-modern .gb-tile a:hover {
  color: var(--brand-text);
  text-decoration: none;
}

.theme-modern .gb-tile img,
.theme-modern .gb-tile-empty {
  display: block;
  width: 160px;
  max-width: 100%;
  aspect-ratio: 1;
  height: auto;
  margin-inline: auto;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--gray-100);
  transition: opacity 200ms ease;
}

@media (min-width: 480px) {
  .theme-modern .gb-tile img,
  .theme-modern .gb-tile-empty {
    width: 110px;
  }
}

.theme-modern .gb-tile-title {
  display: block;
  margin-top: 8px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
}

/* ---------------------------------------------------------------- gallery */

/* bestekrabbels layout: stacked images, each followed by sharing buttons and its message. */
.theme-modern .gbpics-post-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}

.theme-modern .gbpics-post-content > p {
  max-width: 42em;
  color: var(--text-2);
}

.theme-modern .gbpics-post-content figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  text-align: center !important;
}

.theme-modern .gbpics-post-content > figure:first-of-type {
  padding-top: 0;
  border-top: 0;
}

.theme-modern .gbpics-post-content figure > br {
  display: none;
}

.theme-modern .gbpics-post-content figure .gb-image-link {
  order: 1;
  width: 100%;
  max-width: 600px;
}

.theme-modern .gbpics-post-content figure img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
  border-radius: var(--radius);
  background: var(--gray-100);
}

.theme-modern .gbpics-post-content figcaption {
  order: 2;
  max-width: 600px;
  margin: 12px 0 0 !important;
  color: var(--text-2);
  font-size: 16px;
  line-height: 1.5;
}

.theme-modern .gbpics-post-content figcaption strong {
  display: block;
  color: var(--text);
  font-size: 16px;
  font-weight: 600;
}

.theme-modern .gbpics-post-content figcaption br {
  display: none;
}

.theme-modern .gbpics-post-content figure .codeboxlinks {
  order: 3;
  margin-top: 12px;
}

.theme-modern .gbpics-post-content figure .gb-codes {
  order: 4;
  width: 100%;
}

.theme-modern .gb-image-link {
  display: block;
}

/*
 * Sharing buttons in list cards (.gb-btn-list): labeled, 48px tall, network colour darkened by 28% so white text
 * stays readable. Below gallery and image pictures (.codeboxlinks) they are icon squares instead — see
 * "Share squares" below.
 */
.theme-modern .codeboxlinks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 16px 0 0;
}

.theme-modern .codeboxlinks .gb-btn {
  display: flex;
  flex: 0 1 auto;
  min-width: 0;
}

.theme-modern .codeboxlinks a,
.theme-modern .gb-btn-list a {
  display: inline-flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  height: 48px;
  padding: 0 16px 0 8px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--share-color, var(--gray-700)) 72%, #000);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
}

.theme-modern .codeboxlinks a:hover,
.theme-modern .gb-btn-list a:hover {
  background: color-mix(in srgb, var(--share-color, var(--gray-700)) 60%, #000);
  text-decoration: none;
}

/* Share icon box (ShareIcon sprite mode): formerly an inline style repeated under every image. */
.gb-share-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  overflow: hidden;
  border-radius: 4px;
  background: var(--share-color, transparent);
  color: #fff;
  vertical-align: middle;
}

.gb-share-icon-image {
  background: transparent;
}

.gb-share-svg {
  display: block;
  width: 22px;
  height: 22px;
  fill: #fff;
}

.theme-modern .gb-share-icon {
  width: 32px !important;
  height: 32px !important;
  background: transparent !important;
}

.theme-modern .gb-share-icon svg {
  width: 22px;
  height: 22px;
}

/*
 * Share squares below gallery and image pictures, as on bonjourbisous.com / gbpicsonline.com (owner 2026-10-16):
 * squares in the network colour (not darkened, no name — the link keeps its aria-label), white icon, 20px apart,
 * centred, followed by a grey "<>" square that opens the embed codes (CollapsibleCodes). 42px on computers,
 * 38px on phones, where all five fit in one row (5 × 38px + 4 × 20px).
 */
.theme-modern .codeboxlinks {
  --share-size: 42px;
  --share-icon-size: 22px;
  gap: 20px;
}

.theme-modern .codeboxlinks .gb-btn {
  flex: none;
}

.theme-modern .codeboxlinks a,
.theme-modern .codeboxlinks a:hover {
  width: var(--share-size);
  height: var(--share-size);
  padding: 0;
  gap: 0;
  border-radius: 4px;
  background: var(--share-color, var(--gray-700));
}

.theme-modern .codeboxlinks .gb-share-label {
  display: none;
}

.theme-modern .codeboxlinks a .gb-share-icon {
  width: var(--share-size) !important;
  height: var(--share-size) !important;
}

.theme-modern .codeboxlinks a svg {
  width: var(--share-icon-size);
  height: var(--share-icon-size);
  fill: #fff;
}

.theme-modern .gb-codes-toggle {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--share-size);
  height: var(--share-size);
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: #5a6570;
  color: #fff;
  cursor: pointer;
}

@media (max-width: 540px) {
  .theme-modern .codeboxlinks {
    --share-size: 38px;
    --share-icon-size: 20px;
    flex-wrap: nowrap;
  }

  .theme-modern .gb-codes-toggle {
    background: #6b7280;
  }
}

.theme-modern .codebox {
  width: 100%;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--gray-50);
  color: var(--text-2);
  font: 13px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Pagination (site.tsx Pagination). */
.theme-modern .pagination {
  margin-top: 32px;
}

.theme-modern .pagination ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.theme-modern .pagination li {
  display: flex;
}

.theme-modern .pagination a,
.theme-modern .pagination .current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.theme-modern .pagination a:hover {
  border-color: var(--brand);
  color: var(--brand-text);
  text-decoration: none;
}

.theme-modern .pagination .current {
  border-color: var(--brand);
  background: var(--brand-text);
  color: #fff;
}

.theme-modern .pagecount {
  margin-top: 12px;
  color: var(--text-3);
  font-size: 16px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Related images below a post and similar images on the image page. */
.theme-modern #related-images,
.theme-modern .gb-similar {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.theme-modern .gb-similar h2 {
  margin-bottom: 12px;
  font-size: 20px;
  font-weight: 400;
  text-align: left;
}

@media (min-width: 640px) {
  .theme-modern .gb-similar h2 {
    font-size: 26px;
  }
}

/* Similar images on the image page — gbpicsonline dimensions (2026-10-05): centered two columns, square corners;
   150px / 15px gap on phones, 200px / 40px gap on wide screens. */
.theme-modern .gb-similar #boxes-related-images {
  grid-template-columns: repeat(auto-fill, 150px);
  justify-content: center;
  gap: 15px;
}

/* Fixed 200px tiles on wide screens, as many columns as fit (gbpicsonline: 2 on narrow desktops, 3 on wide). */
@media (min-width: 640px) {
  .theme-modern .gb-similar #boxes-related-images {
    grid-template-columns: repeat(auto-fill, 200px);
    gap: 40px;
  }
}

.theme-modern .gb-similar .box-related-images a {
  border-radius: 0;
}

/* Two columns on phones: three made image text unreadable and tiles cramped. */
.theme-modern #boxes-related-images {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

@media (min-width: 640px) {
  .theme-modern #boxes-related-images {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
  }
}

.theme-modern .box-related-images a {
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--gray-100);
}

.theme-modern .box-related-images img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------------------------------------------------------------- image page */

.theme-modern .gb-image-page > :not(.gb-similar) {
  max-width: 600px;
  margin-inline: auto;
}

.theme-modern .gb-image {
  margin: 0 auto;
}

.theme-modern .gb-image img {
  display: block;
  width: 100%;
  border-radius: var(--radius);
  background: var(--gray-100);
}

.theme-modern .gb-image-page > br {
  display: none;
}

.theme-modern .gb-image-page .codeboxlinks {
  margin-top: 16px;
}

/* Below the image (gbpicsonline img-*.html, user request 2026-10-05): simple, centered, spacious. */
.theme-modern .gb-image-page .detail {
  margin-top: 28px;
  text-align: center;
  text-wrap: balance;
}

.theme-modern .gb-image-page .name {
  margin-top: 12px;
  text-align: center;
  text-wrap: pretty;
}

.theme-modern .category-link {
  margin-top: 20px;
  text-align: center;
}

.theme-modern .category-link a {
  color: var(--brand-text);
  font-size: 18px;
  font-weight: 600;
}

.theme-modern .category-link a:hover {
  text-decoration: underline;
}

/*
 * Embed codes (CollapsibleCodes), as on bonjourbisous.com (owner 2026-10-16): closed until the "<>" square is
 * pressed; then each code has a centred label above a read-only box (max. 448px) with a copy button beside it.
 */
.theme-modern .gb-codes {
  --copy-size: 42px;
  --code-gap: 6px;
  --code-width: 448px;
  --codes-gap: 20px;
  min-width: 0;
}

.theme-modern .gb-codes[data-open="false"] {
  display: none;
}

.theme-modern .gb-codes[data-open="true"] {
  display: grid;
  width: 100%;
  gap: var(--codes-gap);
  margin: 16px auto 0;
}

.theme-modern .gb-code {
  display: block;
}

.theme-modern .gb-code label {
  display: block;
  margin-bottom: 4px;
  color: var(--text);
  font-size: 16px;
  font-weight: 600;
  text-align: center;
}

.theme-modern .gb-code-row {
  display: flex;
  justify-content: center;
  gap: var(--code-gap);
  max-width: var(--code-width);
  margin-inline: auto;
}

.theme-modern .gb-code .codebox {
  flex: 1;
  min-width: 0;
  height: var(--copy-size);
  padding: 6px;
  border: 1px solid #aaa;
  border-radius: 3px;
  background: #fff;
  color: #868695;
  font: 16px/1.2 var(--font);
}

@media (max-width: 540px) {
  .theme-modern .gb-codes {
    --copy-size: 44px;
    --code-gap: 4px;
    --code-width: 100%;
    --codes-gap: 18px;
  }
}

.theme-modern .gb-copy {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--copy-size);
  height: var(--copy-size);
  border: 1px solid #aaa;
  border-radius: 3px;
  background: #f5f5f5;
  color: var(--text);
  cursor: pointer;
}

.theme-modern .gb-copy:hover {
  background: #e9e9e9;
}

.theme-modern .gb-codes-toggle:focus-visible,
.theme-modern .gb-copy:focus-visible,
.theme-modern .gb-code .codebox:focus-visible {
  outline: 2px solid var(--brand-text);
  outline-offset: 2px;
}

.theme-modern .category-link br {
  display: none;
}

.theme-modern .gb-image-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  font-weight: 600;
}

.theme-modern .gb-image-position {
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

.theme-modern .gb-image-categories {
  margin-top: 24px;
  color: var(--text-3);
}

/* ---------------------------------------------------------------- categories page (category-directory.tsx) */

.m-index-intro {
  margin-top: -4px;
}

.m-index {
  margin-top: 24px;
}

/* Filter box + result count. */
.m-index-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}

.m-index-search {
  display: flex;
  flex: 1 1 320px;
  align-items: center;
  gap: 8px;
  max-width: 480px;
  height: 48px;
  padding: 0 16px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--text-3);
}

.m-index-search:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-light);
}

.m-index-search input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 16px;
}

.m-index-search input:focus-visible {
  outline: none;
}

.m-index-total {
  color: var(--text-3);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

/* A–Z index: stays at the top while scrolling. */
.m-alphabet {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 16px -4px 0;
  padding: 8px 4px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}

.m-alphabet a,
.m-alphabet span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  font-size: 16px;
  font-weight: 600;
}

.m-alphabet a {
  color: var(--text);
}

.m-alphabet a:hover {
  background: var(--brand-light);
  color: var(--brand-text);
  text-decoration: none;
}

.m-alphabet span {
  color: var(--gray-300);
}

/* One horizontally scrolling row on phones: keep the sticky strip from covering the screen. */
@media (max-width: 639px) {
  .m-alphabet {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .m-alphabet::-webkit-scrollbar {
    display: none;
  }

  .m-alphabet a,
  .m-alphabet span {
    flex: none;
  }
}

/* Letter groups. */
.m-index-group {
  scroll-margin-top: 72px;
  margin-top: 32px;
}

.m-index-letter {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
  color: var(--brand-text);
  font-size: 20px;
  font-weight: 700;
}

.m-index-letter::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.m-index-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.m-index-list a {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 100%;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  transition: border-color 150ms ease-out, background-color 150ms ease-out;
}

.m-index-list a:hover {
  border-color: var(--brand);
  background: var(--brand-light);
  text-decoration: none;
}

.m-index-image {
  flex: none;
  width: 48px;
  height: 48px;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--gray-100);
}

.m-index-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.m-index-text {
  display: grid;
  min-width: 0;
  line-height: 1.3;
}

.m-index-name {
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.m-index-list a:hover .m-index-name {
  color: var(--brand-text);
}

.m-index-count {
  color: var(--text-3);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

.m-index-empty {
  margin-top: 32px;
  color: var(--text-3);
  text-align: center;
}

/* ---------------------------------------------------------------- sidebar */

.m-sidebar .sidebar {
  display: grid;
  gap: 16px;
  align-content: start;
}

@media (min-width: 1024px) {
  .m-sidebar .sidebar {
    gap: 24px;
  }
}

.m-sidebar .widget-header {
  margin: -16px -16px 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}

.m-sidebar .widget-title {
  margin: 0;
  color: var(--text);
  font-size: 16px;
  font-weight: 700;
}

.m-sidebar .widget ul {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.m-sidebar .widget li a {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 0 8px;
  margin: 0 -8px;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 17px;
}

.m-sidebar .widget li a:hover {
  background: var(--brand-light);
  color: var(--brand-text);
  text-decoration: none;
}

.m-sidebar .widget .current-cat > a,
.m-sidebar .widget a[aria-current='page'] {
  background: var(--brand-light);
  color: var(--brand-text);
  font-weight: 600;
}

.m-sidebar .widget .children {
  padding-left: 12px;
}

.m-sidebar .cat-item-all {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid var(--border);
}

.m-sidebar .cat-item-all a {
  color: var(--brand-text);
  font-weight: 600;
}

/* Sidebar search (site.tsx SearchForm; hidden in modern because the header already has search). */
.m-sidebar .search-form {
  display: flex;
}

.m-sidebar .search-form label {
  flex: 1;
  min-width: 0;
}

.m-sidebar .search-field {
  width: 100%;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--gray-300);
  border-right: 0;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  background: #fff;
  font: inherit;
}

.m-sidebar .search-submit {
  width: 48px;
  height: 44px;
  border: 0;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--brand)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E")
    center / 20px no-repeat;
  cursor: pointer;
}

/* ---------------------------------------------------------------- advertising */

.theme-modern .advertisement {
  margin: 24px auto !important;
}

/* ---------------------------------------------------------------- footer */

/* Owner-approved footer v3: today's images, sharing steps and a quiet base row.
   lib/design.ts overrides footer-local tokens for dark admin-selected backgrounds. */
.m-footer {
  --footer-bg: var(--panel);
  --footer-fg: var(--text);
  --footer-muted: #6b6560;
  --footer-line: var(--border);
  --footer-tile: #efedeb;
  --footer-accent: var(--brand-text);
  --footer-dot: var(--brand);
  --footer-step-bg: var(--page-bg);
  background: var(--footer-bg);
  color: var(--footer-fg);
  border-top: 1px solid var(--footer-line);
}

.m-footer-inner {
  display: grid;
  gap: 30px;
  max-width: min(1120px, var(--container));
  margin: 0 auto;
  padding: 36px 28px 0;
}

.m-footer a {
  color: var(--footer-fg);
  text-decoration: none;
}

.m-footer a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.m-footer a:focus-visible {
  outline: 2px solid var(--footer-accent);
  outline-offset: 3px;
}

.m-footer h2 {
  color: var(--footer-fg);
  text-wrap: balance;
}

.m-footer p {
  text-wrap: pretty;
}

.m-footer-today {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(0, 1.6fr);
  gap: 20px 32px;
  align-items: center;
}

.m-footer-kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 14px;
  color: var(--footer-muted);
}

.m-footer-kicker::before {
  content: '';
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--footer-dot);
}

.m-footer-today h2 {
  margin: 6px 0 10px;
  font-size: clamp(21px, 2.6vw, 26px);
  line-height: 1.2;
  font-weight: 700;
}

.m-footer .m-footer-more {
  color: var(--footer-accent);
  font-weight: 600;
  font-size: 15px;
}

.m-footer-thumbs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.m-footer-thumbs a {
  display: block;
  aspect-ratio: 1;
  border-radius: calc(var(--radius-sm) + 2px);
  background: var(--footer-tile);
  overflow: hidden;
}

.m-footer-thumbs a:focus-visible {
  border-radius: calc(var(--radius-sm) + 2px);
}

.m-footer-thumbs img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.m-footer-howto h2 {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--footer-muted);
}

.m-footer-howto ol {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.m-footer-howto li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 12px;
  align-items: start;
  padding: 16px;
  border-radius: calc(var(--radius) + 2px);
  background: var(--footer-step-bg);
}

.m-footer-number {
  grid-row: span 2;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--brand-text);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.m-footer-howto strong {
  font-size: 15.5px;
}

.m-footer-howto p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--footer-muted);
}

.m-footer-base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  border-top: 1px solid var(--footer-line);
  padding: 16px 0 calc(22px + env(safe-area-inset-bottom));
  font-size: 14px;
  color: var(--footer-muted);
}

.m-footer-who {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  min-width: 0;
}

.m-footer-who img {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 6px;
}

.m-footer-who a {
  color: inherit;
}

.m-footer-base nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 20px;
}

.m-footer-pinterest,
.m-footer-network {
  display: inline-flex;
  align-items: center;
}

.m-footer-pinterest {
  gap: 8px;
  font-weight: 600;
}

.m-footer-pinterest svg {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}

.m-footer-base .m-footer-top {
  color: var(--footer-muted);
}

/* "Datenschutz-Einstellungen": a button (it opens the consent dialog) that looks like the footer links. */
.m-footer-consent {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.m-footer-consent:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.m-footer-consent:focus-visible {
  outline: 2px solid var(--footer-accent, var(--brand));
  outline-offset: 2px;
}

/* Use the site's small-screen breakpoint; four flexible thumbnails always fit in one row. */
@media (max-width: 639px) {
  .m-footer-inner {
    padding: 26px 16px 0;
    gap: 24px;
  }

  .m-footer-today,
  .m-footer-howto ol {
    grid-template-columns: minmax(0, 1fr);
  }

  .m-footer-base {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .theme-modern *,
  .theme-modern *::before,
  .theme-modern *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

/* Automatic category link in a heading (lib/auto-link.ts): underlined like bestekrabbels.nl,
   so color is not the only distinction. */
.theme-modern .gb-auto-link {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Reserved ad boxes: 20px for the policy label, plus the unit's breakpoint height. */
.theme-modern .gb-ad {
  margin: 24px 0;
  min-height: 270px;
  min-width: 0;
  width: 100%;
  text-align: center;
}

.theme-modern .gb-ad-left {
  text-align: left;
}

.theme-modern .gb-ad-right {
  text-align: right;
}

.theme-modern .gb-ad img {
  display: inline-block;
  max-width: 100%;
  height: auto;
}

.theme-modern .gb-ad-label {
  height: 20px;
  margin: 0;
  color: var(--text-3);
  font-size: 13px;
  line-height: 20px;
}

.theme-modern .gb-ad-box {
  min-height: 250px;
}

.theme-modern .gb-ad-box > .advertisement,
.theme-modern .gb-ad-box > .gb-ad-slot {
  margin-inline: auto;
}

.theme-modern .gb-ad .gb-adsense {
  margin-inline: auto;
}

.theme-modern .gb-ad-left .gb-adsense {
  margin-left: 0;
}

.theme-modern .gb-ad-right .gb-adsense {
  margin-right: 0;
}

.theme-modern .gb-ad-inline-unit,
.theme-modern .gb-ad[data-ad="post_content"] .gb-ad-box > img,
.theme-modern .gb-ad[data-ad="list_between"] .gb-ad-box > img {
  width: 300px;
  height: 250px;
  max-width: 100%;
  object-fit: contain;
}

/* Header and footer share the main column's grid and gutters. */
.theme-modern .gb-ad-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.theme-modern .gb-ad[data-ad="header_top"] {
  min-height: 120px;
}

.theme-modern .gb-ad[data-ad="header_top"] .gb-ad-box {
  min-height: 100px;
}

/* Header ad: exact size per screen width (components/site/ads.tsx `fixed`), so it never pushes the page down. */
.theme-modern .gb-adsense-fixed {
  width: 320px;
  max-width: 100%;
  height: 100px;
}

@media (min-width: 768px) {
  .theme-modern .gb-ad[data-ad="header_top"] .gb-ad-box {
    min-height: 90px;
  }

  .theme-modern .gb-adsense-fixed {
    width: 728px;
    height: 90px;
  }
}

.theme-modern .gb-ad[data-ad="after_gallery"] {
  min-height: 600px;
}

.theme-modern .gb-ad[data-ad="after_gallery"] .gb-ad-box {
  min-height: 580px;
}

/* Keep ads outside picture/tool blocks, with a visible rule and 32px on either side. */
.theme-modern .gb-ad.gb-ad-separated {
  margin-block: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
}

.theme-modern .gb-image-page > .gb-ad {
  max-width: none;
  margin-inline: auto;
}

@media (min-width: 768px) {
  .theme-modern .gb-ad {
    min-height: 300px;
  }
  .theme-modern .gb-ad-box {
    min-height: 280px;
  }
  .theme-modern .gb-ad-inline-unit,
  .theme-modern .gb-ad[data-ad="post_content"] .gb-ad-box > img,
  .theme-modern .gb-ad[data-ad="list_between"] .gb-ad-box > img {
    width: 336px;
    height: 280px;
  }
  .theme-modern .gb-ad[data-ad="header_top"] {
    min-height: 110px;
  }
  .theme-modern .gb-ad[data-ad="header_top"] .gb-ad-box {
    min-height: 90px;
  }
  .theme-modern .gb-ad[data-ad="sidebar"] {
    min-height: 270px;
  }
  .theme-modern .gb-ad[data-ad="sidebar"] .gb-ad-box {
    min-height: 250px;
  }
  .theme-modern .gb-ad[data-ad="sidebar"].gb-ad-tall {
    min-height: 620px;
  }
  .theme-modern .gb-ad[data-ad="sidebar"].gb-ad-tall .gb-ad-box {
    min-height: 600px;
  }
  .theme-modern .gb-ad[data-ad="after_gallery"] {
    min-height: 400px;
  }
  .theme-modern .gb-ad[data-ad="after_gallery"] .gb-ad-box {
    min-height: 380px;
  }
}

@media (min-width: 1024px) {
  .theme-modern .gb-ad-shell {
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 32px;
  }
  .theme-modern:has(.m-sidebar .sidebar:empty) .gb-ad-shell {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Only confirmed unfilled units below the fold may collapse. Never hide initial units. */
.theme-modern .gb-ad:not([data-ad="header_top"]):not([data-ad="mobile_top"]):not([data-ad="sidebar"]):has(ins[data-ad-status="unfilled"]) {
  display: none;
}

/* Screen limit from the panel (ad_slots.device). Hidden units send no ad request (components/site/ads.tsx). */
@media (max-width: 767.98px) {
  .theme-modern .gb-ad-only-desktop {
    display: none;
  }
}

@media (min-width: 768px) {
  .theme-modern .gb-ad-only-mobile {
    display: none;
  }
}

/* Below 1024px the sidebar stacks right above the footer: a visible sidebar ad and the footer ad
   would follow each other at the end of the page, so the footer ad gives way. */
@media (max-width: 767.98px) {
  .theme-modern:has(.m-sidebar .gb-ad[data-ad="sidebar"]:not(.gb-ad-only-desktop)) .gb-ad-shell:has(> .gb-ad[data-ad="footer"]) {
    display: none;
  }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
  .theme-modern:has(.m-sidebar .gb-ad[data-ad="sidebar"]:not(.gb-ad-only-mobile)) .gb-ad-shell:has(> .gb-ad[data-ad="footer"]) {
    display: none;
  }
}

/* ---------------------------------------------------------------- occasion calendar (/anlasse/) */

.ev-intro,
.ev-note {
  color: var(--text-2);
  text-wrap: pretty;
}

.ev-note {
  margin-top: 32px;
  font-size: 14px;
}





.ev-jump {
  margin-top: 16px;
}

.ev-month {
  margin-top: 32px;
  scroll-margin-top: 16px;
}

.ev-month h2 {
  padding-bottom: 8px;
  border-bottom: 2px solid var(--border);
  font-size: 20px;
  text-wrap: balance;
}

.ev-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ev-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--gray-100);
}

.ev-date {
  flex: none;
  width: 88px;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}

.ev-weekday {
  display: inline-block;
  width: 2.8ch;
  color: var(--text-3);
}

.ev-entry {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 12px;
  min-width: 0;
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
}

a.ev-entry:hover .ev-name {
  color: var(--brand-text);
  text-decoration: underline;
}

span.ev-entry {
  color: var(--text-2);
  font-weight: 500;
}

.ev-image-empty {
  border: 1px dashed var(--gray-300);
}

.ev-entry img,
.ev-image-empty {
  flex: none;
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--gray-100);
}

.ev-name {
  overflow: hidden;
  text-overflow: ellipsis;
}

.ev-month-name .ev-entry {
  color: var(--text-2);
  font-weight: 500;
}

.ev-badge {
  flex: none;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--gray-100);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 600;
}

.ev-next {
  border-radius: var(--radius-sm);
  background: var(--brand-light);
}

.ev-badge-next {
  background: var(--brand);
  color: #fff;
}

@media (max-width: 479px) {
  .ev-list li {
    flex-wrap: wrap;
    gap: 4px 10px;
  }

  .ev-date {
    width: 80px;
  }

  .ev-entry {
    flex-basis: calc(100% - 90px);
  }

  .ev-badge {
    margin-left: 90px;
  }

  .ev-badge + .ev-badge {
    margin-left: 0;
  }
}

/* Subgallery strip above a gallery post (tile groups of the category with the same slug). */
.m-content > .gb-tiles:first-child {
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}

/* About us: Pinterest profile box (pinit.js iframe/grid). Prevent overflow on narrow screens. */
.m-pinterest-profile {
  margin-top: 32px;
  max-width: 100%;
  overflow: hidden;
}

/* ---------------------------------------------------------------- card editor (/karte-gestalten/)
 * Owner 2026-10-11 (prototype data/card-editor/prototype-v2.html). Neutral class names (ce-*, no share/social words:
 * ad-blocker lists). The send buttons: one calm primary (WhatsApp green), the others white outlined. */
.ce-page {
  display: grid;
  gap: 24px;
}

.ce-lead {
  color: var(--text-2);
  max-width: 68ch;
  text-wrap: pretty;
}

.ce {
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 820px) {
  .ce {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    align-items: start;
  }

  .ce-preview {
    position: sticky;
    top: 16px;
  }
}

.ce-preview {
  display: grid;
  gap: 12px;
}

.ce-preview canvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius);
  background: var(--gray-100);
  touch-action: pan-y;
}

/* Phones: the card stays in view at the top while the texts below are edited. */
@media (max-width: 819px) {
  .ce-preview {
    display: contents;
  }

  .ce-preview canvas {
    position: sticky;
    top: env(safe-area-inset-top, 0px);
    z-index: 10;
    justify-self: center;
    width: auto;
    max-width: 100%;
    height: 44dvh;
    box-shadow: 0 0 0 8px #fff, 0 10px 18px -6px rgb(28 25 23 / 0.25);
  }

  .ce-controls :is(input, textarea, button, legend, label) {
    scroll-margin-top: calc(44dvh + 24px);
  }
}

.ce-preview canvas.can-move {
  cursor: grab;
}

.ce-preview canvas.is-dragging {
  cursor: grabbing;
}

.ce-send {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.ce-go {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 12px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--gray-700);
  font: 600 16px/1.2 var(--font);
  cursor: pointer;
  white-space: nowrap;
}

.ce-go:hover {
  border-color: var(--gray-500);
  background: var(--gray-100);
}

.ce-go .ce-mark {
  flex: none;
  width: 24px;
  height: 24px;
}

.ce-go .ce-mark-plain {
  fill: var(--brand-text);
}

.ce-go-main {
  grid-column: 1 / -1;
  min-height: 56px;
  border: 0;
  background: #1a8a4a;
  color: #fff;
  font-size: 18px;
}

.ce-go-main:hover {
  background: #157a40;
}

.ce-go-main .ce-mark {
  width: 26px;
  height: 26px;
}

.ce-note:empty {
  display: none;
}

.ce-note {
  padding: 12px;
  border-radius: var(--radius-sm);
  background: var(--brand-light);
  color: var(--brand-dark);
  font-size: 16px;
}

.ce-hint {
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.45;
  text-wrap: pretty;
}

.ce-controls {
  display: grid;
  gap: 24px;
  min-width: 0;
}

.ce-field {
  display: grid;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.ce-field > legend,
.ce-field > label {
  padding: 0;
  font-size: 16px;
  font-weight: 600;
}

.ce-groups {
  display: grid;
  gap: 14px;
}

.ce-group {
  display: grid;
  gap: 6px;
}

.ce-group h3 {
  margin: 0;
  color: var(--text-2);
  font-size: 14px;
  font-weight: 600;
}

.ce-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ce-chips button {
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--gray-300);
  border-radius: 999px;
  background: #fff;
  color: var(--gray-700);
  font: 600 15px/1 var(--font);
  cursor: pointer;
}

.ce-now .ce-chips button {
  border-color: #e8b4b4;
  background: #fff7f7;
}

.ce-chips button[aria-pressed='true'] {
  border-color: var(--brand-dark);
  background: var(--brand-dark);
  color: #fff;
}

.ce-motifs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 64px;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 6px;
  scroll-snap-type: x proximity;
}

.ce-motifs button {
  padding: 0;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  background: none;
  cursor: pointer;
  aspect-ratio: 4 / 5;
  scroll-snap-align: start;
}

.ce-motifs img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ce-motifs button[aria-pressed='true'] {
  border-color: var(--brand);
  box-shadow: 0 0 0 2px #fff inset;
}

.ce-texts {
  display: grid;
  gap: 10px;
}

.ce-text {
  display: grid;
  gap: 4px;
  margin-left: -13px;
  padding-left: 10px;
  border-left: 3px solid transparent;
  font-size: 15px;
  font-weight: 600;
}

.ce-text.is-sel {
  border-left-color: var(--brand);
}

.ce-text input,
.ce-text textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--text);
  font: 400 17px/1.4 var(--font);
}

.ce-text textarea {
  min-height: 96px;
  resize: vertical;
}

.ce-count {
  justify-self: end;
  color: var(--text-2);
  font-size: 14px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

.ce-style {
  display: grid;
  gap: 18px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--gray-100);
}

.ce-style h3 {
  margin: 0 0 -10px;
  font-size: 16px;
  font-weight: 700;
}

.ce-seg {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ce-seg button {
  flex: 1 1 0;
  min-height: 40px;
  padding: 0 6px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--gray-700);
  font: 400 15px/1.2 var(--font);
  cursor: pointer;
}

.ce-seg button[aria-pressed='true'],
.ce-fonts button[aria-pressed='true'] {
  border-color: var(--brand);
  background: var(--brand-light);
  color: var(--brand-dark);
  font-weight: 600;
  box-shadow: 0 0 0 1px var(--brand) inset;
}

.ce-fonts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 8px;
}

.ce-fonts button {
  display: grid;
  place-items: center;
  min-height: 56px;
  padding: 4px 8px;
  overflow: hidden;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--text);
  line-height: 1.1;
  cursor: pointer;
}

.ce-fonts button span {
  font-size: 22px;
  white-space: nowrap;
}

.ce-fonts button small {
  color: var(--text-2);
  font: 500 12px/1.2 var(--font);
}

.ce-colors {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.ce-colors button,
.ce-color-own {
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--gray-300);
  border-radius: 50%;
  background: var(--sw);
  cursor: pointer;
}

.ce-colors button[aria-pressed='true'],
.ce-color-own.is-on {
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--brand);
}

.ce-color-own {
  position: relative;
  overflow: hidden;
  background: conic-gradient(#e74c3c, #f1c40f, #2ecc71, #3498db, #9b59b6, #e74c3c);
}

.ce-color-own input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.ce-range {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ce-range input {
  flex: 1;
  accent-color: var(--brand);
}

.ce-range output {
  min-width: 4ch;
  color: var(--text-2);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.ce-link {
  justify-self: start;
  padding: 0;
  border: 0;
  background: none;
  color: var(--brand-text);
  font: 600 16px/1.4 var(--font);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.ce-resets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}

.ce-info,
.ce-all {
  display: grid;
  gap: 12px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.ce-info h2,
.ce-all h2 {
  margin: 0;
  font-size: 20px;
}

.ce-info ol {
  display: grid;
  gap: 4px;
  margin: 0;
  padding-left: 22px;
  color: var(--text-2);
}

.ce-info p {
  color: var(--text-2);
}

.ce-faq {
  gap: 16px;
}

.ce-faq-item {
  display: grid;
  gap: 4px;
  max-width: 68ch;
}

.ce-faq-item h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  text-wrap: balance;
}

.ce-faq-item p {
  margin: 0;
  text-wrap: pretty;
}

.ce-all ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ce-all a[aria-current='page'] {
  font-weight: 700;
}

@media (max-width: 480px) {
  .ce-field-row {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------- seasonal card notice (components/site/card-notice.tsx)
 * Slide-in: transitions.dev toast (verbatim) + side cards entering from their own edge. Shown only after some scrolling. */
.t-toast {
  opacity: 0;
  transform: translateY(16px) scale(0.97);
  filter: blur(2px);
  will-change: transform, opacity, filter;
  transition:
    opacity 250ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 250ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 250ms cubic-bezier(0.22, 1, 0.36, 1);
}

.t-toast.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
  transition:
    opacity 350ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 350ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 350ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  .t-toast {
    transition: none !important;
  }
}

.gb-hint {
  color: var(--text);
}

.gb-hint-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
}

.gb-hint-image {
  flex: none;
  width: 48px;
  height: 60px;
  border-radius: 6px;
  object-fit: cover;
}

.gb-hint p {
  flex: 1 1 280px;
  margin: 0;
  font-size: 17px;
  text-wrap: pretty;
}

.gb-hint p b {
  font-weight: 700;
}

.gb-hint-go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 20px;
  border-radius: var(--radius-sm);
  background: var(--brand-dark);
  color: #fff !important;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none !important;
}

.gb-hint-close {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--gray-600);
  cursor: pointer;
}

.gb-hint-top {
  border-bottom: 1px solid #d5e1f5;
  background: var(--brand-light);
}

.gb-hint-top .gb-hint-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 12px var(--gutter);
}

.gb-hint.t-toast {
  position: fixed;
  z-index: 40;
  border: 1px solid var(--border);
  background: #fff;
  box-shadow: 0 10px 30px rgb(28 25 23 / 0.18);
  pointer-events: none;
}

.gb-hint.t-toast.is-open {
  pointer-events: auto;
}

.gb-hint-bottom {
  right: 0;
  bottom: 0;
  left: 0;
  border-width: 1px 0 0 !important;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.gb-hint-bottom .gb-hint-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 12px var(--gutter);
}

.gb-hint-right,
.gb-hint-left {
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  width: min(340px, calc(100% - 32px));
  border-radius: var(--radius);
}

.gb-hint-right {
  right: 24px;
}

.gb-hint-left {
  left: 24px;
}

.gb-hint-right .gb-hint-inner,
.gb-hint-left .gb-hint-inner {
  display: grid;
  grid-template-columns: 48px 1fr 44px;
  align-items: start;
  gap: 12px;
  padding: 16px;
}

.gb-hint-right p,
.gb-hint-left p {
  font-size: 16px;
  line-height: 1.45;
}

.gb-hint-right .gb-hint-close,
.gb-hint-left .gb-hint-close {
  grid-column: 3;
  grid-row: 1;
  margin: -10px -10px 0 0;
}

.gb-hint-right .gb-hint-go,
.gb-hint-left .gb-hint-go {
  grid-column: 1 / -1;
}

.gb-hint-right:not(.is-open) {
  transform: translateX(16px) scale(0.97);
}

.gb-hint-left:not(.is-open) {
  transform: translateX(-16px) scale(0.97);
}

@media (max-width: 640px) {
  .gb-hint-right,
  .gb-hint-left {
    right: 16px;
    left: 16px;
    width: auto;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }
}

/* Notice styles (admin Settings → Karten-Editor → Stil). "light" is the default look above. */
.gb-hint.gb-hint-look-brand,
.gb-hint-top.gb-hint-look-brand {
  border-color: transparent;
  background: var(--brand-dark);
  color: #fff;
}

.gb-hint.gb-hint-look-festive,
.gb-hint-top.gb-hint-look-festive {
  border-color: #c9a24a;
  background: #8f1d22;
  color: #fff8e6;
}

.gb-hint.gb-hint-look-dark,
.gb-hint-top.gb-hint-look-dark {
  border-color: transparent;
  background: #2b2522;
  color: #fff;
}

.gb-hint-look-brand .gb-hint-go {
  background: #fff;
  color: var(--brand-dark) !important;
}

.gb-hint-look-festive .gb-hint-go {
  background: #f3d27f;
  color: #4a1410 !important;
}

.gb-hint-look-brand .gb-hint-close,
.gb-hint-look-festive .gb-hint-close,
.gb-hint-look-dark .gb-hint-close {
  color: rgb(255 255 255 / 0.85);
}

.gb-hint-look-brand .gb-hint-close:hover,
.gb-hint-look-festive .gb-hint-close:hover,
.gb-hint-look-dark .gb-hint-close:hover {
  background: rgb(255 255 255 / 0.12);
}

/* ---------------------------------------------------------------- notification soft prompt (components/site/push-prompt.tsx)
 * Our own card before the browser permission prompt (web.dev permission UX). Neutral class names (gb-ask-*).
 * Bottom right on desktop (clear of the header, menu and search), full width at the bottom on phones. Motion: .t-toast above. */
.gb-ask {
  position: fixed;
  z-index: 45;
  display: grid;
  grid-template-columns: 44px 1fr 32px;
  gap: 12px;
  align-items: start;
  width: min(380px, calc(100% - 32px));
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  color: var(--text);
  box-shadow: 0 12px 32px rgb(28 25 23 / 0.2);
  pointer-events: none;
  right: 24px;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}

.gb-ask.is-open {
  pointer-events: auto;
}

.gb-ask-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--brand-light);
  color: var(--brand-dark);
}

.gb-ask-text p {
  margin: 0;
  color: var(--text-2);
  font-size: 15px;
  line-height: 1.45;
  text-wrap: pretty;
}

.gb-ask-text .gb-ask-title {
  margin-bottom: 4px;
  color: var(--text);
  font-size: 17px;
  font-weight: 700;
}

.gb-ask-x {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin: -6px -6px 0 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--gray-500);
  cursor: pointer;
}

.gb-ask-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.gb-ask-actions button {
  min-height: 44px;
  padding: 0 18px;
  border-radius: var(--radius-sm);
  font: 600 16px/1 var(--font);
  cursor: pointer;
}

.gb-ask-no {
  border: 1px solid var(--gray-300);
  background: #fff;
  color: var(--gray-700);
}

.gb-ask-yes {
  border: 0;
  background: var(--brand-dark);
  color: #fff;
}

.gb-ask-yes:hover {
  background: #1f3a63;
}

@media (max-width: 640px) {
  .gb-ask {
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    left: 16px;
    width: auto;
  }

  .gb-ask-actions button {
    flex: 1;
  }
}