/* nlad.css — konvertiert aus SCSS-Quellen des nl-ad_40 WordPress-Themes */

/* ——— Reset ——— */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* ——— Fonts ——— */
@font-face {
  font-family: 'plex-sans_reg';
  src: url('../fonts/ibm-plex-sans_reg/IBMPlexSans-Regular.woff2') format('woff2'),
       url('../fonts/ibm-plex-sans_reg/IBMPlexSans-Regular.woff') format('woff'),
       url('../fonts/ibm-plex-sans_reg/IBMPlexSans-Regular.ttf') format('truetype');
  font-weight: normal; font-display: fallback;
}
@font-face {
  font-family: 'plex-sans_tex';
  src: url('../fonts/ibm-plex-sans_tex/IBMPlexSans-Text.woff2') format('woff2'),
       url('../fonts/ibm-plex-sans_tex/IBMPlexSans-Text.woff') format('woff'),
       url('../fonts/ibm-plex-sans_tex/IBMPlexSans-Text.ttf') format('truetype');
  font-weight: normal; font-display: fallback;
}
@font-face {
  font-family: 'plex-sans_med';
  src: url('../fonts/ibm-plex-sans_med/IBMPlexSans-Medium.woff2') format('woff2'),
       url('../fonts/ibm-plex-sans_med/IBMPlexSans-Medium.woff') format('woff'),
       url('../fonts/ibm-plex-sans_med/IBMPlexSans-Medium.ttf') format('truetype');
  font-weight: bold; font-display: fallback;
}
@font-face {
  font-family: 'plex-sans_sembld';
  src: url('../fonts/ibm-plex-sans_sembld/IBMPlexSans-SemiBold.woff2') format('woff2'),
       url('../fonts/ibm-plex-sans_sembld/IBMPlexSans-SemiBold.woff') format('woff'),
       url('../fonts/ibm-plex-sans_sembld/IBMPlexSans-SemiBold.ttf') format('truetype');
  font-weight: bolder; font-display: fallback;
}
@font-face {
  font-family: 'plex-mono_tex';
  src: url('../fonts/ibm-plex-mono_tex/IBMPlexMono-Text.woff2') format('woff2'),
       url('../fonts/ibm-plex-mono_tex/IBMPlexMono-Text.woff') format('woff'),
       url('../fonts/ibm-plex-mono_tex/IBMPlexMono-Text.ttf') format('truetype');
  font-weight: normal; font-display: fallback;
}

/* ——— CSS Variables ——— */
:root {
  /* Colors */
  --color_white: rgba(255,255,255,1);
  --color_black: rgba(28,28,30,1);
  --color_black-light: rgba(33,33,35,1);
  --color_darkgrey: rgba(70,70,75,1);
  --color_darkgrey-light: rgba(70,70,75,1);
  --color_grey: rgba(180,180,180,1);
  --color_grey-light: rgba(205,205,205,1);
  --color_lightgrey: rgba(240,240,240,1);
  --color_lightgrey-light: rgba(250,250,250,1);

  /* Spacing — mobile base */
  --space_xs: 1em;
  --space_sm: 1.25em;
  --space_md: 2em;
  --space_lg: 4em;
  --space_xl: 5.5em;
  --space_std: 0.8em;

  /* Typography — mobile base */
  --h1-size: 3rem;
  --h2-size: 2rem;
  --h3-size: 1.5rem;
  --h4-size: 1.2rem;
  --h5-size: 1.0rem;
  --h6-size: 0.80rem;
  --p-size:  1.0rem;

  /* Device mock widths — mobile base */
  --phone: 50vw;
  --tablet: 65vw;
  --desktop: 90vw;
  --device_width: 100vh;
  --device_radius: calc(var(--device_width)/100);
}

@media (min-width: 575.98px) {
  :root {
    --space_xs: 1em; --space_sm: 1.2em; --space_md: 4.0em; --space_lg: 5.5em; --space_xl: 5.5em;
    --h1-size: 4.0rem; --h2-size: 3.0rem; --h3-size: 2.4rem; --h4-size: 1.4rem; --h5-size: 1.0rem; --h6-size: 0.9rem; --p-size: 1.15rem;
    --phone: 40vw; --tablet: 50vw; --desktop: 80vw;
  }
}
@media (min-width: 767.98px) {
  :root {
    --space_xs: 1em; --space_sm: 1.2em; --space_md: 4.5em; --space_lg: 6.0em; --space_xl: 9.0em;
    --h1-size: 3.8rem; --h2-size: 3.0rem; --h3-size: 2.6rem; --h4-size: 1.6rem; --h5-size: 1.3rem; --h6-size: 0.9rem; --p-size: 1.2rem;
    --phone: 35vw; --tablet: 50vw; --desktop: 70vw;
  }
}
@media (min-width: 991.98px) {
  :root {
    --space_xs: 1.0em; --space_sm: 1.6em; --space_md: 4.4em; --space_lg: 7em; --space_xl: 9.0em;
    --h1-size: 3.6rem; --h2-size: 2.6rem; --h3-size: 2.2rem; --h4-size: 1.6rem; --h5-size: 1.2rem; --h6-size: 0.9rem; --p-size: 1.2rem;
    --phone: 30vw; --tablet: 40vw; --desktop: 70vw;
  }
}
@media (min-width: 1199.98px) {
  :root {
    --space_xs: 1.5em; --space_sm: 1.8em; --space_md: 4.8em; --space_lg: 9em; --space_xl: 12em;
    --h1-size: 4.0rem; --h2-size: 2.8rem; --h3-size: 2.6rem; --h4-size: 1.5rem; --h5-size: 1.5rem; --h6-size: 1.15rem; --p-size: 1.35rem;
    --phone: 24vw; --tablet: 36vw; --desktop: 70vw;
  }
}
@media (min-width: 1921.98px) {
  :root {
    --space_xs: 2em; --space_sm: 2.5em; --space_md: 5.4em; --space_lg: 9em; --space_xl: 12em;
    --h1-size: 4.4rem; --h2-size: 3.2rem; --h3-size: 2.4rem; --h4-size: 1.8rem; --h5-size: 1.5rem; --h6-size: 1.3rem; --p-size: 1.6rem;
    --phone: 22vw; --tablet: 36vw; --desktop: 70vw;
  }
}

/* ——— Typography ——— */
h1 { font-size: var(--h1-size); line-height: calc(var(--h1-size)*1.3); letter-spacing: calc(var(--h1-size)*-0.005); }
h2 { font-size: var(--h2-size); line-height: calc(var(--h2-size)*1.3); letter-spacing: calc(var(--h2-size)*-0.005); }
h3 { font-size: var(--h3-size); line-height: calc(var(--h3-size)*1.2); letter-spacing: calc(var(--h3-size)*-0.005); }
h4 { font-size: var(--h4-size); line-height: calc(var(--h4-size)*1.4); letter-spacing: calc(var(--h4-size)*-0.005); }
h5 { font-size: var(--h5-size); line-height: calc(var(--h5-size)*1.4); letter-spacing: calc(var(--h5-size)*-0.005); }
h6 { font-size: var(--h6-size); line-height: calc(var(--h6-size)*1.4); letter-spacing: calc(var(--h6-size)*-0.008); }
p  { font-size: var(--p-size);  line-height: calc(var(--p-size)*1.5);  letter-spacing: calc(var(--p-size)*-0.008); }

/* ——— Base ——— */
body {
  font-family: 'plex-sans_reg', Arial, sans-serif;
  background-color: var(--color_lightgrey);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden !important;
  color: var(--color_black-light);
  margin-top: -72px;
}
a { text-decoration: none; color: var(--color_black); }
strong { font-family: 'plex-sans_tex', Arial, sans-serif !important; }

/* ——— Page themes ——— */
.page .playground { background-color: var(--color_black-light); color: var(--color_lightgrey); }
.page .home,
.page .work,
.page .about { background-color: var(--color_lightgrey); color: var(--color_black-light); }
#site-legal { font-size: var(--h6-size); }

/* ——— Navbar ——— */
.navbar { padding: 1em 1.5em; }
.navbar .logo a.text { font-size: var(--h6-size); font-family: 'plex-mono_tex', monospace; color: var(--color_black-light); }
nav.nav-up { top: -80px; }
nav.nav-down { top: 0; }
nav.nav-down-back { transition: top 0.3s ease-in-out; }
nav { transition: top 0.3s ease-in-out; }

/* ——— Modal (Menu overlay) ——— */
.modal-dialog { max-width: 100%; width: 100%; margin: 0; min-height: 100vh; }
.modal-dialog.site-footer { background-color: var(--color_lightgrey-light); }
.modal-nav { padding: 2em; }
.modal-links { padding-top: var(--space_lg); padding-bottom: var(--space_md); }
.modal-info { padding-bottom: var(--space_md); }
.modal-contact p, .modal-social p { margin-bottom: 0.3em; }

/* ——— Page Header ——— */
.page-header .title {
  height: 60vh; padding-bottom: 1em;
  display: flex; flex-direction: column; justify-content: flex-end;
}
@media (max-width: 575.98px)  { .page-header .title { height: 100vh; } .page-header .title span { display: none; } }
@media (max-width: 767.98px)  { .page-header .title { height: 70vh; } }
@media (max-width: 991.98px)  { .page-header .title { height: 60vh; } }

.page-header .title.home a {
  border-radius: 100px; padding: 0.06em 0.3em 0.06em 0.45em;
  border: 1px solid currentColor; font-size: 100%; white-space: nowrap;
}
.page-header .title.home a::after { content: '↗'; margin-left: 0.2em; }
.page-header .title.home a:hover { color: #0e59fd; background-color: #fff; border-color: #fff; }

/* ——— Work-Post Header ——— */
#section-post-work--header .title {
  color: var(--color_black-light); padding-bottom: 18px;
  display: flex; flex-direction: column; justify-content: flex-end;
  mix-blend-mode: luminosity; margin-top: var(--space_sm); margin-bottom: var(--space_sm); height: 70vh;
}
#section-post-work--header .title h1 {
  font-family: 'plex-sans_reg', Arial, sans-serif;
  font-size: calc(var(--h1-size)*1); letter-spacing: -0.03em; line-height: 1.1em;
}
#section-post-work--header .white { opacity: 0; transition: 0.4s; }
#section-post-work--header .full { padding: 0 !important; overflow: hidden; transition: 0.2s; }
#section-post-work--header .full img { border-radius: 0 !important; transform: scale(1.12); transition: transform 0.6s; }
#section-post-work--header .image {
  height: 100vh; padding-left: 12px; padding-right: 12px; transition: 0.2s;
}
#section-post-work--header .image img {
  width: 100%; height: 100%; background-position: 50%; background-repeat: no-repeat;
  object-fit: cover; border-radius: 12px;
}
@media (min-width: 575.98px)  { #section-post-work--header .image { height: 150vh; padding-left: 24px; padding-right: 24px; } }
@media (min-width: 767.98px)  { #section-post-work--header .image { height: 120vh; padding-left: 24px; padding-right: 24px; } }
@media (min-width: 1100px)    { #section-post-work--header .image { height: 100vh; padding-left: 32px; padding-right: 32px; } }
@media (min-width: 1199.98px) { #section-post-work--header .image { height: 100vh; padding-left: 32px; padding-right: 32px; } }

/* ——— Sticky title ——— */
#sticky {
  padding: 10px; position: sticky; bottom: 0; overflow: hidden; opacity: 1; transition: 0.2s;
}

/* ——— Section / Reel ——— */
.section-home_reel video { object-fit: cover; width: 100%; height: 100%; }
.section-jumbo { position: relative; display: flex; height: 50vh; }
.section-jumbo video { width: 100%; object-fit: cover; height: 100%; }
.section-jumbo .img-overlay { position: absolute; vertical-align: middle; padding: 24px; color: var(--color_lightgrey-light); }
@media (max-width: 991.98px) { .section-jumbo { height: 30vh; } }

.section .related { padding-top: var(--space_lg); }
.container-full { width: 100%; }
.section-about-track i { opacity: 0.25; font-style: normal !important; }
.section-about-track h6 { margin-bottom: 0.5em; }

/* ——— Footer ——— */
.site-footer { color: var(--color_black-light); }
.site-footer .row { margin-bottom: var(--space_xs); }
.site-footer .column { padding-right: 1em; margin-bottom: var(--space_xs); }
.site-footer a, .site-footer a:hover { color: var(--color_black-light); text-decoration: none; }
.site-footer a::after { content: '↗'; margin-left: 0.2em; transition: all 0.3s; }
.site-footer a:hover::after { margin-left: 0.4em; }

/* ——— Work Grid ——— */
.work-grid-layout {
  display: grid; grid-column-gap: 32px; grid-row-gap: 18px;
  grid-auto-flow: dense; grid-template-columns: repeat(8, 1fr);
}
.work-grid-item { grid-column: span 8; align-self: start; height: 100%; }
.work-grid-card { color: var(--color_black-light); }
.work-grid-card a { color: var(--color_black-light); }
.work-grid-card span { color: var(--color_grey); }
.work-grid-card:hover { color: var(--color_black-light); text-decoration: none; }
.work-grid-card:hover .work-grid-card-img img { transform: scale(1.04); transition: all 0.5s ease-in-out; }
.work-grid-card-img { overflow: hidden; height: calc((100vw/10)*8); border-radius: 12px; }
.work-grid-card-img img { height: 100%; width: 100%; object-fit: cover; }
.work-grid-card-text { padding-top: 0.5em; padding-right: 2em; max-height: 100%; }

@media (min-width: 575.98px) { .work-grid-item { grid-column: span 8; } .work-grid-card-img { height: calc((100vw/10)*8); } }
@media (min-width: 767.98px) { .work-grid-item { grid-column: span 4; } .work-grid-card-img { height: calc((100vw/10)*5.5); } }
@media (min-width: 1100px)   { .work-grid-item { grid-column: span 4; } .work-grid-card-img { height: calc((100vw/10)*3); } }
@media (min-width: 1199.98px){ .work-grid-item { grid-column: span 4; } .work-grid-card-img { height: calc((100vw/10)*3); } }

/* Grid size overrides (ACF size field) */
.work-grid-item.span-8 { grid-column: span 8; }
.work-grid-item.span-4 { grid-column: span 4; }

/* ——— Playground Grid ——— */
.playground-grid-layout {
  --content-width: 100vw; --gutter: 24px; --columns: 8;
  --row-size: calc((var(--content-width) - (var(--gutter)*(var(--columns)-1))) / var(--columns));
  display: grid;
  grid-template-columns: repeat(var(--columns), 1fr);
  grid-auto-rows: var(--row-size);
  grid-column-gap: var(--gutter); grid-row-gap: var(--gutter);
}
.playground-grid-item { grid-column: span 2; grid-row: span 2; align-self: start; height: 100%; background-color: var(--color_black); }
.playground-grid-card-img { overflow: hidden; }
.playground-grid-card-img img { height: 100%; width: 100%; object-fit: cover; }

/* ——— Device Mocks ——— */
.device-phone {
  width: var(--phone);
  background-color: var(--color_black-light);
  box-shadow: 0px 22px 84px 0 rgba(20,20,22,0.7);
  border-radius: calc(var(--phone)*0.07);
  border: calc(var(--phone)*0.02) solid var(--color_black-light);
}
.device-phone .phone-inner { border-radius: calc(var(--phone)*0.058); }

.device-tablet {
  width: var(--tablet);
  background-color: var(--color_black-light);
  box-shadow: 0px 22px 84px 0 rgba(20,20,22,0.7);
  border-radius: calc(var(--tablet)*0.045);
  border: calc(var(--phone)*0.02) solid var(--color_black-light);
}
.device-tablet .tablet-inner { border-radius: calc(var(--tablet)*0.035); }

.device-desktop {
  width: var(--desktop);
  background-color: var(--color_black-light);
  box-shadow: 0px 22px 84px 0 rgba(20,20,22,0.7);
  border-radius: calc(var(--tablet)*0.045);
  border: calc(var(--phone)*0.02) solid var(--color_black-light);
}
.device-desktop .desktop-inner { border-radius: calc(var(--tablet)*0.035); }

/* ——— Credits Accordion ——— */
.credits-accordion { margin-bottom: var(--space_md); }
.credits-accordion .accordion-title { color: var(--color_grey); cursor: pointer; }
.credits-accordion .accordion-body { padding-bottom: 1em; }
@media (max-width: 575.98px) { .credits-accordion .accordion-body { padding-bottom: 0.4em; } }
.credits-accordion .accordion-title::after { margin-left: 0.3em; content: "+"; opacity: 1; transition: all 0.3s; }
.credits-accordion .accordion-title:hover::after { margin-left: 0.5em; }
.credits-accordion [aria-expanded="true"] .accordion-title { color: var(--color_black-light); }
.credits-accordion [aria-expanded="true"] .accordion-title::after { content: "+"; opacity: 0; }

/* ——— Buttons ——— */
.btn-tag {
  border-radius: 100px; padding: 0.7em 1.3em 0.55em 1.3em;
  margin: 0 0.2em 0.8em; cursor: pointer;
}
.btn-tag.light { background-color: transparent; border: 1px solid var(--color_grey); color: var(--color_grey); }
.btn-tag.dark  { background-color: transparent; border: 1px solid var(--color_black); color: var(--color_grey); }
.btn-tag.light:hover { background-color: var(--color_lightgrey-light); border-color: var(--color_lightgrey-light); color: var(--color_black-light); }
.btn-tag.dark:hover  { background-color: var(--color_black); border-color: var(--color_black); color: var(--color_lightgrey-light); }



.btn-dis {
  font-size: var(--h6-size); border-radius: 100px;
  padding: 0.7em 1.3em 0.55em 1.3em; margin: 0 0.2em 0.8em;
  border: 1px solid var(--color_grey); color: var(--color_grey); background-color: transparent;
}
.btn-dis:hover { color: var(--color_grey); }

.btn-filter { color: var(--color_grey); transition: all 0.3s; cursor: pointer; }
.btn-filter.light:hover { color: var(--color_black-light); }
.btn-filter.dark:hover  { color: var(--color_lightgrey-light); }
.btn-filter::before { margin-right: 0.3em; content: "+"; transition: all 0.3s; }
.btn-filter:hover::before { margin-right: 0.5em; }
[aria-expanded="true"] .btn-filter::before { content: "–"; }

/* ——— Filter Active States ——— */
.filter .active.light { background-color: var(--color_black-light) !important; border: 1px solid var(--color_black-light) !important; color: var(--color_lightgrey-light) !important; }
.filter .active.dark  { background-color: var(--color_lightgrey) !important; border: 1px solid var(--color_lightgrey) !important; color: var(--color_black-light) !important; }

/* ——— Carousel ——— */
.carousel-indicators { position: inherit; padding-top: 0.7rem; }
.carousel-indicators li { border-radius: 100%; width: 6px; height: 6px; background-color: var(--color_black-light); margin: 0 0.4rem; opacity: 0.2; }
.carousel-control-prev:hover, .carousel-control-next:hover { opacity: 1 !important; mix-blend-mode: difference; }

/* ——— Spacing utilities ——— */
.pt-4  { padding-top: var(--space_xs); }
.pt-0 { padding-top: 0 !important; margin-top: 0 !important; }
.pb-0 { padding-bottom: 0 !important; margin-bottom: 0 !important; }
.pt-4  { padding-top: var(--space_sm); }
.pad-t-md  { padding-top: var(--space_md); }
.pad-t-lg  { padding-top: var(--space_lg); }
.pad-t-2x  { padding-top: calc(var(--space_lg)*1.5) !important; }
.pb-4  { padding-bottom: var(--space_sm); }
.pad-b-md  { padding-bottom: var(--space_md); }
.pad-b-lg  { padding-bottom: var(--space_lg); }
.pad-b-2x  { padding-bottom: calc(var(--space_lg)*1.5) !important; }
.mar-t-sm  { margin-top: var(--space_sm); }
.mar-t-md  { margin-top: var(--space_md); }
.mar-t-lg  { margin-top: var(--space_lg); }
.mar-b-sm  { margin-bottom: var(--space_sm); }
.mar-b-md  { margin-bottom: var(--space_md); }
.mar-b-lg  { margin-bottom: var(--space_lg); }

/* ——— Section spacing ——— */
#section-home_content   { padding-top: var(--space_xl); }
#site-footer            { padding-top: var(--space_xl); padding-bottom: var(--space_md); }
#section_related-work   { padding-top: var(--space_xl); }
.spacing.comp_btn       { padding-top: var(--space_lg); padding-bottom: var(--space_sm); }

/* ——— Animations ——— */
.is-animated { animation: 0.6s slide-in; }
@keyframes slide-in {
  0%   { transform: translateY(20px); }
  100% { transform: none; }
}
.transition-fade { transition: 0.8s; opacity: 1; }
html.is-animating .transition-fade { opacity: 0; }

/* ——— Menu blend-mode ——— */
.menu { mix-blend-mode: difference; z-index: 900; }

/* ——— DaisyUI Overrides ——— */

/* Carousel: scroll-snap, kein JS */
.carousel { scroll-snap-type: x mandatory; display: flex; overflow-x: auto; scroll-behavior: smooth; }
.carousel::-webkit-scrollbar { display: none; }
.carousel-item { scroll-snap-align: start; flex-shrink: 0; width: 100%; }

/* Carousel-Punkte (Indikatoren) */
.carousel-dots { display: flex; justify-content: center; gap: 0.5rem; padding: 0.7rem 0; }
.carousel-dots a {
  display: block; width: 6px; height: 6px; border-radius: 100%;
  background-color: var(--color_black-light); opacity: 0.2; transition: opacity 0.2s;
}
.carousel-dots a:hover { opacity: 0.6; }

/* DaisyUI Modal: eigenes Styling behalten */
dialog.modal { padding: 0; border: none; background: transparent; max-width: none; }
dialog.modal::backdrop { background: rgba(0,0,0,0.4); }
dialog.modal .modal-box {
  width: 100vw; max-width: none; height: 100vh; border-radius: 0;
  background-color: var(--color_lightgrey-light); padding: 0; overflow-y: auto;
}

/* DaisyUI Collapse: eigenes Styling behalten */
.collapse { background: transparent; border-radius: 0; }
.collapse-title {
  padding: 0; min-height: 0; font-size: inherit;
  background: transparent; border-radius: 0;
}
.collapse-title:after { content: none !important; } /* DaisyUI Arrow entfernen */
.collapse-content { padding: 0; background: transparent; }
.collapse:not(.collapse-open) .collapse-content { display: none; padding: 0; }
.collapse:focus .collapse-title { background: transparent; }

/* Credits Accordion — DaisyUI collapse, checkbox-state */
.credits-accordion .collapse:has(input:checked) .accordion-title { color: var(--color_black-light); }
.credits-accordion .collapse:has(input:checked) .accordion-title::after { opacity: 0; }