/* Fontscd  */
@font-face {
  font-family: 'Goldman';
  src: url('https://f003.backblazeb2.com/file/roedder-ip24/core/fonts/Goldman-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'Goldman';
  src: url('https://f003.backblazeb2.com/file/roedder-ip24/core/fonts/Goldman-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Raleway';
  src: url('https://f003.backblazeb2.com/file/roedder-ip24/core/fonts/Raleway-VariableFont_wght.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Raleway';
  src: url('https://f003.backblazeb2.com/file/roedder-ip24/core/fonts/Raleway-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: 'Noto Sans JP';
  src: url('https://f003.backblazeb2.com/file/roedder-ip24/core/fonts/NotoSansJP-VariableFont_wght.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Noto Sans KR';
  src: url('https://f003.backblazeb2.com/file/roedder-ip24/core/fonts/NotoSansKR-VariableFont_wght.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Noto Sans SC';
  src: url('https://f003.backblazeb2.com/file/roedder-ip24/core/fonts/NotoSansSC-VariableFont_wght.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Noto Sans TC';
  src: url('https://f003.backblazeb2.com/file/roedder-ip24/core/fonts/NotoSansTC-VariableFont_wght.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* Fallback for different languages */
body,
.subtitle {
  font-family: var(--bulma-body-family, system-ui, sans-serif);
}

.title,
h1,
h2,
h3 {
  font-family: var(--bulma-body-family, system-ui, sans-serif);
}

/* Specific styles */
.subtitle {
  font-style: normal;
  /* or italic if needed */
}

/* Example usage */
h1.title,
h2.title,
h3.title {
  font-family: var(--bulma-body-family, system-ui, sans-serif);
}

h2.subtitle,
h3.subtitle,
body.subtitle {
  font-family: var(--bulma-body-family, system-ui, sans-serif);
}


/* Star-Rating */
.rating {
  unicode-bidi: bidi-override;
  direction: rtl;
  text-decoration: none;
}

.rating>span {
  display: inline-block;
  position: relative;
  width: 1.1em;
}

.rating>span:hover:before,
.rating>span:hover~span:before {
  content: "\2605";
  /* color: blue; oklab(0.910, −0.205, 0.143); */
  position: absolute;
}

/* Spezielle Regeln für das Löschen-Icon */
.delete-rating {
  display: inline-block;
  position: relative;
  width: 1.1em;
  font-size: 0.7em;
}

.delete-rating:hover:before {
  content: "\2297";
  /* ⊗ */
  position: absolute;
}

/* Figuren-Karussell */
.carousel-slides {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.carousel-slides>div {
  scroll-snap-align: start;
  flex: none;
  width: 100%;
  position: relative;
}

button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: #f0f0f0;
  border: none;
  padding: 10px;
  cursor: pointer;
}

button[data-hx-get*="previous"] {
  left: 0;
}

button[data-hx-get*="next"] {
  right: 0;
}

/* Transition für Details (Summary) */
details {
  padding: 10px;
}

details summary {
  cursor: pointer;
  transition: margin 300ms ease-out;
}

details[open] summary {
  margin-bottom: 10px;
}


/* Transition htmx-transition*/

@keyframes fade-in {
  from {
    opacity: 0;
  }
}

@keyframes fade-out {
  to {
    opacity: 0;
  }
}

@keyframes slide-from-right {
  from {
    transform: translateX(90px);
  }
}

@keyframes slide-to-left {
  to {
    transform: translateX(-90px);
  }
}

.slide-it {
  view-transition-name: slide-it;
}

::view-transition-old(slide-it) {
  animation: 180ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
    600ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
}

::view-transition-new(slide-it) {
  animation: 420ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
    600ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}

/* Anpassung Titel */
.title:not(.is-spaced):has(+ .subtitle) {
  margin-bottom: 0.5em;
}

/* Control als Button für Download */
#btnControl {
  display: none;
}

#btnControl:checked+label::after {
  content: "  ...das könnte eine Weile dauern... Bitte nicht das Fenster schließen!";
}

.clip-card {
  border: 2px solid var(--bulma-primary, #132D3A);
  border-radius: 12px;
  overflow: hidden;
}

.clip-card figure {
  margin: 0;
}