/* Component styles — buttons, cards, navigation, sliders. */

/* ------------------------- Cursor Marquee -------------------------  */
/* Struktur und Grundstyles stehen in studio-treo.webflow.css (cursor-marquee_*).
   Hier: Status-Selektoren, Clip-Path-Übergang, Keyframes. */

.cursor-marquee_card {
  transition: all 0.4s cubic-bezier(.75, 0, .25, 1);
  transform: translateY(0%) rotate(0.001deg);
  clip-path: inset(calc(50% - 0.25em) round 50em);
  will-change: clip-path;
  opacity: 0;
}

[data-cursor-marquee-status="active"] .cursor-marquee_card {
  clip-path: inset(0 round 50em);
  transform: translateY(-25%) rotate(0.001deg);
}

/* Cursor nur über den Kacheln zeigen */
[data-cursor-marquee-status="active"] .cursor-marquee_card {
  opacity: 1;
}

@keyframes translateXCursor {
  to {
    transform: translateX(-100%);
  }
}

.cursor-marquee_text {
  animation: translateXCursor 10s linear infinite paused;
  transition: opacity 0.15s ease-in-out 0.25s;
  opacity: 0;
}

/* Punkt zwischen den Wiederholungen, gleicher Abstand links und rechts */
.cursor-marquee_text::after {
  content: "•";
  padding-left: 0.5em;
}

[data-cursor-marquee-status="active"] .cursor-marquee_text {
  transition: opacity 0.15s ease-in-out 0s;
  opacity: 1;
}

/* ------------------------- Legal Tabs -------------------------  */

.legal_tab-link.w--current {
  background-color: transparent;
  opacity: 1;
}

/* Unterabschnitte (shadr) und Ziele von Ankern wie /legal/#shadr: Abstand zur Navbar beim Springen */
.legal_subheading {
  margin-top: 1.5em;
  margin-bottom: .5em;
  font-size: 1em;
  font-weight: 500;
  line-height: 1.4;
}

.legal_component [id] {
  scroll-margin-top: 6em;
}

/* ------------------------- Navbar Mobile -------------------------  */
/* Tablet: alle drei Links wie am Desktop, nur enger. Mobile: Logo und Links an die
   Kanten der Bilder, Links als "Templates, Tools" ohne Legal. */

@media screen and (max-width: 991px) {
  .navbar-link_wrapper {
    column-gap: 2em;
  }
}

@media screen and (max-width: 767px) {
  .navbar {
    padding-left: 1.2em;
    padding-right: 1.2em;
  }

  .navbar-link_wrapper {
    column-gap: 0.3em;
  }

  .navbar_link[data-nav="templates"]::after {
    content: ",";
  }

  .navbar_link[data-nav="legal"] {
    display: none;
  }
}

/* ------------------------- Remove Webflow / Netlify Badge -------------------------  */

.w-webflow-badge,
#nl-badge-frame {
  display: None !important;
  visibility: hidden !important;
}

/* ------------------------- Scaling System -------------------------  */

/* Desktop */
:root {
  --size-unit: 16;
  --size-container-ideal: 1440;
  --size-container-min: 992px;
  --size-container-max: 1920px;
  --size-container: clamp(var(--size-container-min), 100vw, var(--size-container-max));
  --size-font: calc(var(--size-container) / (var(--size-container-ideal) / var(--size-unit)));
}

/* Tablet */
@media screen and (max-width: 991px) {
  :root {
    --size-container-ideal: 834;
    --size-container-min: 768px;
    --size-container-max: 991px;
  }
}

/* Mobile Landscape */
@media screen and (max-width: 767px) {
  :root {
    --size-container-ideal: 550;
    --size-container-min: 480px;
    --size-container-max: 767px;
  }
}

/* Mobile Portrait */
@media screen and (max-width: 479px) {
  :root {
    --size-container-ideal: 390;
    --size-container-min: 320px;
    --size-container-max: 479px;
  }
}

/* ------------------------- Reset -------------------------  */

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

html {
  scroll-behavior: initial;
  scrollbar-width: none;
}

html,
body {
  -webkit-font-smoothing: antialiased;
}

svg {
  max-width: none;
  height: auto;
  box-sizing: border-box;
  vertical-align: middle;
}

/* ------------------------- Hide Scrollbar -------------------------  */

body ::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
}

body {
  -ms-overflow-style: none;
}

/* ------------------------- Style Overrides -------------------------  */

a,
.w-input,
.w-select,
.w-tab-link,
.w-nav-link,
.w-nav-brand,
.w-dropdown-btn,
.w-dropdown-toggle,
.w-slider-arrow-left,
.w-slider-arrow-right,
.w-dropdown-link {
  color: inherit;
  text-decoration: inherit;
  font-size: inherit;
}

*[tabindex]:focus-visible,
input[type="file"]:focus-visible {
  outline: 0.125rem solid #4d65ff;
  outline-offset: 0.125rem;
}

.w-richtext> :not(div):first-child,
.w-richtext>div:first-child> :first-child {
  margin-top: 0 !important;
}

.w-richtext>:last-child,
.w-richtext ol li:last-child,
.w-richtext ul li:last-child {
  margin-bottom: 0 !important;
}

select {
  -webkit-appearance: none;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ------------------------- Hide -------------------------  */

.hide {
  display: none !important;
}

@media screen and (max-width: 991px) {

  .hide,
  .hide-tablet {
    display: none !important;
  }
}

@media screen and (max-width: 767px) {
  .hide-mobile-landscape {
    display: none !important;
  }
}

@media screen and (max-width: 479px) {
  .hide-mobile {
    display: none !important;
  }
}

/* ------------------------- Helpers -------------------------  */

.pointer-events-off {
  pointer-events: none;
}

.pointer-events-on {
  pointer-events: auto;
}

.display-inlineflex {
  display: inline-flex;
}

.container-medium,
.container-small,
.container-large {
  margin-right: auto !important;
  margin-left: auto !important;
}

.div-square::after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.text-style-3lines {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.text-style-2lines {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.truncate-width {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.no-scrollbar {
  -ms-overflow-style: none;
  overflow: -moz-scrollbars-none;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

/* ------------------------- Hyphens / Silbentrennung -------------------------  */

.hyphens,
[hyphens=active] {
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
}

@media screen and (max-width: 767px) {
  h1 {
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
  }
}