@font-face {
  font-family: "HTW Berlin Office";
  src: url("fonts/HTWBerlinOffice-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "HTW Berlin Office";
  src: url("fonts/HTWBerlinOffice-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "HTW Berlin Office";
  src: url("fonts/HTWBerlinOffice-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "HTW Berlin Office";
  src: url("fonts/HTWBerlinOffice-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

:root {
  --htw-gallery-background: var(--global--color-background, #fff);
  --htw-gallery-text: var(--global--color-font, #142033);
  --htw-gallery-toolbar-text: #4b4a4a;
  --htw-gallery-toolbar-hover: #f0f0f0;
  --htw-gallery-toolbar-hover-text: #272727;
  --htw-gallery-button-text: var(--global--color-white, #fff);
}

@media (prefers-color-scheme: dark) {
  :root {
    --htw-gallery-background: var(--global--color-darkergray, #383838);
    --htw-gallery-text: var(--global--color-gray, #ebebeb);
    --htw-gallery-toolbar-text: var(--global--color-gray, #ebebeb);
    --htw-gallery-toolbar-hover: var(--global--color-darkgray, #4b4a4a);
    --htw-gallery-toolbar-hover-text: var(--global--color-gray, #ebebeb);
    --htw-gallery-button-text: var(--global--color-gray, #ebebeb);
    --htw-gallery-page-background: var(--global--color-darkergray, #383838);
  }
}

.htw-iframe-gallery,
dialog.htw-iframe-lightbox {
  font-family: "HTW Berlin Office", Arial, sans-serif;
  background: var(--htw-gallery-background);
  color: var(--htw-gallery-text);
}

.htw-iframe-gallery {
  position: relative;
  margin: 24px 0;
}

.htw-iframe-gallery--carousel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

/* Alle Folien behalten dieselbe Layoutfläche, auch wenn ihr iframe entladen ist. */
.htw-iframe-gallery--carousel > figure {
  grid-area: 2 / 1;
  align-self: start;
}

.htw-iframe-gallery--carousel > .htw-iframe-gallery__controls {
  grid-area: 3 / 1;
}

.htw-iframe-gallery--carousel > figure[aria-hidden="true"],
.htw-iframe-lightbox > figure[aria-hidden="true"] {
  visibility: hidden !important;
  pointer-events: none;
}

.htw-iframe-gallery__skip:not(:focus) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.htw-iframe-gallery__skip:focus {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: block;
  padding: 12px;
  background: var(--htw-gallery-background);
  color: var(--htw-gallery-text);
}

.htw-iframe-gallery > figure {
  min-width: 0;
  margin: 0;
}

.htw-iframe-gallery iframe {
  display: block;
  width: 100% !important;
  height: 500px !important;
  border: 0;
}

.htw-iframe-gallery figcaption,
.htw-iframe-lightbox figcaption {
  margin: 0 0 12px 0;
  overflow-wrap: anywhere;
}
.htw-iframe-lightbox figcaption{
  text-align: center;
}

.htw-iframe-gallery > br,
.htw-iframe-gallery > p:empty,
.htw-iframe-gallery > figure > br {
  display: none;
}

.htw-iframe-gallery button,
.htw-iframe-lightbox button {
  /* HTWSOLAR: .loop__load-more auf /studien/, mit Fallbacks für die Vorschau. */
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  min-height: 36px;
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  background-color: var(--global--color-highlight-AA, #69a500);
  color: var(--htw-gallery-button-text);
  font-family: inherit;
  font-size: 16px;
  font-weight: var(--global--font-weight-bold, 700);
  line-height: 1.25;
  overflow: visible;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  transition:
    color var(--global--timing, .3s) var(--global--ease, cubic-bezier(.4, 0, .2, 1)),
    background-color var(--global--timing, .3s) var(--global--ease, cubic-bezier(.4, 0, .2, 1));
}

.htw-iframe-gallery__arrow {
  width: 18px;
  height: 16px;
  flex: 0 0 auto;
  fill: currentColor;
  pointer-events: none;
}

[data-action="previous"] > .htw-iframe-gallery__arrow {
  transform: scaleX(-1);
}

.htw-iframe-gallery__close-icon {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  fill: currentColor;
  pointer-events: none;
}

.htw-iframe-gallery button:hover:not(:disabled),
.htw-iframe-lightbox button:hover:not(:disabled) {
  background-color: var(--global--color-highlight, #76b921);
  color: var(--htw-gallery-button-text);
}

.htw-iframe-gallery button:active:not(:disabled),
.htw-iframe-lightbox button:active:not(:disabled) {
  transform: translateY(1px);
}

.htw-iframe-gallery button:focus-visible,
.htw-iframe-gallery a:focus-visible,
.htw-iframe-lightbox a:focus-visible,
.htw-iframe-gallery__controls:focus-visible,
.htw-iframe-lightbox button:focus-visible {
  outline: 3px solid var(--global--color-accent, #0082d1);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .htw-iframe-gallery button,
  .htw-iframe-lightbox button {
    transition: none;
  }
}

dialog.htw-iframe-lightbox {
  box-sizing: border-box;
  width: min(1400px, 96vw);
  max-width: 96vw;
  max-height: 94vh;
  max-height: 94dvh;
  margin: auto;
  padding: 16px;
  border: 0;
  border-radius: 8px;
  background: var(--htw-gallery-background);
  color: var(--htw-gallery-text);
  overflow: auto;
}

dialog.htw-iframe-lightbox[open] {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.htw-iframe-lightbox > .htw-iframe-gallery__controls {
  grid-area: 3 / 1;
}

.htw-iframe-lightbox > figure {
  grid-area: 2 / 1;
  min-width: 0;
  align-self: start;
}

.htw-iframe-lightbox::backdrop {
  background: rgb(0 0 0 / 75%);
}

.htw-iframe-gallery__controls {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin: 8px 0 0;
}

.htw-iframe-gallery__controls [role="status"] {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 14px;
  line-height: 1.35;
  text-align: center;
}

.htw-iframe-gallery__toolbar {
  grid-area: 1 / 1;
  display: flex;
  justify-content: flex-end;
  margin-bottom: 4px;
}

.htw-iframe-gallery__toolbar button {
  background: transparent;
  color: var(--htw-gallery-toolbar-text);
  font-size: 14px;
  font-weight: 400;
  padding: 6px 10px;
}

.htw-iframe-gallery__toolbar button:hover:not(:disabled) {
  background: var(--htw-gallery-toolbar-hover);
  color: var(--htw-gallery-toolbar-hover-text);
}

@media (max-width: 420px) {
  .htw-iframe-gallery__controls {
    gap: 8px;
  }
  .htw-iframe-gallery__controls [role="status"] {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .htw-iframe-gallery__controls [data-action="next"] {
    grid-column: 3;
    grid-row: 1;
  }
}

.htw-iframe-lightbox button:disabled,
.htw-iframe-gallery button:disabled {
  opacity: 0.45;
  cursor: default;
}

.htw-iframe-lightbox figure {
  margin: 0;
}

.htw-iframe-lightbox iframe {
  display: block;
  width: 100% !important;
  height: 65vh !important;
  height: 65dvh !important;
  border: 0;
}

html.htw-iframe-lightbox-open {
  overflow: hidden;
}

html.htw-iframe-gallery-page {
  scrollbar-gutter: stable;
}