/*
 * =============================================================================
 * RAHMEN & BILDER — nur hier Farben / Maße / Radien pflegen
 * =============================================================================
 * --dojo-frame-outer / --dojo-frame-inner : Dojo-Doppelrahmen (_DojoFrame)
 * --dojo-frame-thick, --dojo-frame-gap, --dojo-frame-end : Balkenmaße
 * --image-frame-border / --image-frame-radius : Fotos, Galerie-Viewport, Lightbox
 * --ui-button-radius : runde Buttons (Footer, Cookie, Spiel, …; z. B. 999px)
 * =============================================================================
 */

html[data-theme="light"],
html[data-admin-theme="light"]
{
    --dojo-frame-outer: #44444422;
    --dojo-frame-inner: #44444411;
    --dojo-frame-thick: 2px;
    --dojo-frame-gap: 1px;
    --dojo-frame-end: 2px;
    --image-frame-border: rgba(0, 0, 0, 0.12);
    --image-frame-radius: 16px;
    --ui-button-radius: 999px;
}

html[data-theme="dark"],
html[data-admin-theme="dark"] {
  --dojo-frame-outer: #44444488;
  --dojo-frame-inner: #44444444;
  --dojo-frame-thick: 2px;
  --dojo-frame-gap: 1px;
  --dojo-frame-end: 2px;
  --image-frame-border: rgba(255, 255, 255, 0.22);
  --image-frame-radius: 16px;
  --ui-button-radius: 999px;
}

@media (max-width: 768px) {
  html[data-theme="light"],
  html[data-theme="dark"],
  html[data-admin-theme="light"],
  html[data-admin-theme="dark"] {
    --image-frame-radius: 10px;
  }
}

/* Host: vier Balken + innen (Partial _DojoFrame) */
.dojo-frame-host {
  position: relative;
  overflow: visible;
}

.dojo-frame-host:not(.home-dojo-photo__frame):not(.training-page__map):not(.lightbox__panel) {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.dojo-frame-host:not(.home-dojo-photo__frame):not(.training-page__map):not(.lightbox__panel) > *:not(.dojo-frame) {
  z-index: 1;
}

.training-page__map.dojo-frame-host .training-page__map-fallback,
.training-page__map.dojo-frame-host .training-page__map-slot {
  position: relative;
  z-index: 1;
}

.home-news.dojo-frame-host,
.home-grid .home-news.dojo-frame-host {
  border: none;
  border-radius: var(--news-radius, 7px);
}

.philosophie-rules__item.dojo-frame-host {
  border: none;
  border-radius: var(--news-radius, 7px);
}

.jp-count-game__card.dojo-frame-host {
  border: none;
}

.training-page__map.dojo-frame-host {
  border-radius: 0;
}

.training-page__map.dojo-frame-host .training-page__map-fallback,
.training-page__map.dojo-frame-host iframe,
.training-page__map.dojo-frame-host .training-page__map-iframe {
  border: 0;
  border-radius: 0;
}

.dojo-frame {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  overflow: visible;
}

.site-card .site-header,
.site-card .content-panel {
  position: relative;
  z-index: 1;
}

.admin-card > *:not(.dojo-frame) {
  z-index: 1;
}

.dojo-frame__bar {
  position: absolute;
  background-color: var(--dojo-frame-outer);
  box-sizing: border-box;
}

.dojo-frame__bar--top,
.dojo-frame__bar--bottom {
  z-index: 1;
}

.dojo-frame__bar--left,
.dojo-frame__bar--right {
  z-index: 2;
}

.dojo-frame__bar--top {
  left: calc(-1 * var(--dojo-frame-end));
  right: calc(-1 * var(--dojo-frame-end));
  top: 0;
  height: var(--dojo-frame-thick);
}

.dojo-frame__bar--bottom {
  left: calc(-1 * var(--dojo-frame-end));
  right: calc(-1 * var(--dojo-frame-end));
  bottom: 0;
  height: var(--dojo-frame-thick);
}

.dojo-frame__bar--left {
  top: calc(-1 * var(--dojo-frame-end));
  bottom: calc(-1 * var(--dojo-frame-end));
  left: 0;
  width: var(--dojo-frame-thick);
}

.dojo-frame__bar--right {
  top: calc(-1 * var(--dojo-frame-end));
  bottom: calc(-1 * var(--dojo-frame-end));
  right: 0;
  width: var(--dojo-frame-thick);
}

.dojo-frame__inner {
  position: absolute;
  z-index: 3;
  top: calc(var(--dojo-frame-thick) + var(--dojo-frame-gap));
  left: calc(var(--dojo-frame-thick) + var(--dojo-frame-gap));
  right: calc(var(--dojo-frame-thick) + var(--dojo-frame-gap));
  bottom: calc(var(--dojo-frame-thick) + var(--dojo-frame-gap));
  border: 1px solid var(--dojo-frame-inner);
  box-sizing: border-box;
  border-radius: 0;
  margin: 0;
  padding: 0;
}