/* ==========================================================================
   DH Slider — Startseiten-Slider mit Farbleiste (Aufbau nach dylan.camera)
   12-Spalten-Raster, 12px Gutter, 20px Zellen, 12px Schrift; Header-Werte kommen aus dem Template.
   ========================================================================== */

:root{
  color-scheme:light;
  --black:#000000;
  --grey:#eaeae8;        /* text cells */
  --font:"SuisseIntl-Medium-WebM","Helvetica Neue",Helvetica,Arial,sans-serif;
  --t:200ms;
  --ease:cubic-bezier(.65,0,.35,1);
  --ease-io:cubic-bezier(.83,0,.17,1);
  --gap:.75rem;          /* 12px grid gutter */
  --pad:.375rem;         /* 6px cell padding */
  --cell:20px;           /* text cell height */
  --dot:20px;            /* colour circle */
  --row-h:48px;          /* circle row in the slider */
  --header-h:72px;       /* height of the header strip */
  /* Die Bilder stehen im Raster des Lay-Themes; Groesse und Ort rechnet das Skript aus den
     Rastermassen der Uebersicht (Spalten, Spaltenabstand, Raender). */
}
/* --bg, --edge, --logo-*, --nav-*, --m-nav-* werden im Template aus den Theme-Einstellungen gesetzt */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;border:0;outline:none;border-radius:0;background:none;list-style:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
html{background:var(--bg);font-size:16px;height:100%;overflow:hidden}
body{height:100%;overflow:hidden;position:relative;font-family:var(--font);font-weight:400;font-size:.75rem;line-height:.5rem;color:var(--black)}
:where(.carousel) :is(h1,h2,h3,p,a,span,div){font-family:var(--font);font-size:.75rem;font-style:normal;font-weight:400;line-height:.5rem}
a{color:var(--black);text-decoration:none;-webkit-tap-highlight-color:transparent}
img,video{display:block;max-width:100%;height:auto}
::selection{background:var(--grey);color:var(--black)}

.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:start}
/* nur fuer Suchmaschinen und Screenreader, optisch nicht sichtbar */
.dh-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* --------------------------------------------------------------------------
   Header (Werte aus den Lay-Theme-Einstellungen)
   -------------------------------------------------------------------------- */
.hdr{position:fixed;top:0;left:0;width:100%;height:var(--header-h);z-index:100;pointer-events:none}
.hdr__logo{position:absolute;left:var(--edge);top:var(--logo-top);width:var(--logo-w);display:block;pointer-events:all}
.hdr__logo img{width:100%;height:auto;display:block}
.hdr__logo--text{width:auto;font-family:var(--m-nav-font);font-size:16px;line-height:1;color:var(--black);text-decoration:none}
.hdr__nav{position:absolute;right:var(--edge);top:var(--nav-top);display:flex;gap:var(--nav-gap);pointer-events:all}
/* Zeilenhoehe 1 wie im Lay-Theme (dort steht das Menue als inline-Element in einem li mit
   line-height = Schriftgroesse). Mit 1.3 saessen die Buchstaben hier 3 px tiefer als auf den
   anderen Seiten — beim Seitenwechsel sieht man das Menue dann springen. */
.hdr__nav a{font-family:var(--nav-font);font-weight:var(--nav-weight);font-size:var(--nav-size);letter-spacing:var(--nav-ls,normal);line-height:1;color:var(--nav-color);text-decoration:none;transition:opacity var(--t) var(--ease),color var(--t) var(--ease)}
.hdr__nav a.is-current,.hdr__nav a.is-active{opacity:var(--nav-active-opacity)}
.hdr__nav--mobile{display:none}
@media (hover:hover) and (pointer:fine){.hdr__nav a:hover{color:var(--nav-hover)}}
/* WordPress-Admin-Leiste (eingeloggt) */
.admin-bar .hdr,.admin-bar .carousel{top:var(--wp-admin--admin-bar--height,32px)}

/* --------------------------------------------------------------------------
   Stage
   -------------------------------------------------------------------------- */
.carousel{position:fixed;top:0;left:0;right:0;bottom:0;width:100%;display:flex;z-index:10;background:var(--bg)}
.carousel__main{flex:1 1 0%;position:relative;min-height:0;width:100%}

/* Colour strip: active circle on the vertical centre */
.dots{position:absolute;top:0;left:0;width:calc(50vw - 6px);height:100%;z-index:3;pointer-events:none;transition:width .6s var(--ease)}
.dots__viewport{position:absolute;inset:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 14%,#000 86%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 14%,#000 86%,transparent 100%)}
.dots__container{display:flex;flex-direction:column;transition:transform .42s var(--ease-io);will-change:transform}
.row{flex:0 0 auto;height:var(--row-h);padding:0 0 0 var(--edge);display:flex;align-items:center;gap:var(--gap);pointer-events:none;transition:height .6s var(--ease-io),opacity var(--t) var(--ease)}
.dot{width:var(--dot);height:var(--dot);border-radius:50%;flex-shrink:0;position:relative;cursor:pointer;pointer-events:auto;background-color:var(--c,#888);transform:scale(.85);transform-origin:left center;transition:transform .5s var(--ease)}
/* Bequeme Klickflaeche: der Kreis bleibt klein, getroffen wird die ganze Zeilenhoehe. */
.dot::before{content:"";position:absolute;inset:-16px -18px;border-radius:4px}
/* Der Projektname bleibt fuer Suchmaschinen und Screenreader im Dokument, wird aber nie eingeblendet. */
.dot__name{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;pointer-events:none}
/* Kein Hover auf den Farbkreisen — die Leiste bleibt ruhig. */

@media (hover:hover) and (pointer:fine){
}

/* Row below the header: title / see project / counter */
.details{position:absolute;top:var(--header-h);left:var(--edge);right:var(--edge);z-index:4;pointer-events:none}

.details .grid{display:flex;align-items:baseline;gap:1.5rem;padding:0}
.details__title{flex:0 0 auto;width:min(40vw,32rem);margin:0;padding:0;background:none;overflow:hidden}
.title-track{position:relative;height:calc(var(--title-size,20px) * 1.25);overflow:hidden}
/* Projekttitel in der Schrift der Uebersicht: Mono, Versalien, eng. */
.title{position:absolute;top:50%;left:0;width:100%;transform:translateY(-50%);
  font-family:var(--nav-font);font-size:var(--title-size,20px);line-height:1.05;letter-spacing:-0.04em;
  text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:transform .3s var(--ease),opacity .3s var(--ease)}
.title.is-above{transform:translateY(-170%);opacity:0}
.title.is-below{transform:translateY(70%);opacity:0}
.details__options{position:fixed;right:var(--edge);top:50%;transform:translateY(-50%);display:flex;align-items:center}
.counter{height:var(--cell);padding:0;background:none;display:flex;align-items:center;column-gap:.35em;font-family:var(--nav-font);font-weight:var(--nav-weight);font-size:var(--nav-size);letter-spacing:var(--nav-ls,normal)}
.counter span,.counter div{font-family:inherit;font-size:inherit;line-height:var(--cell)}
.counter__cur{position:relative;display:inline-block;height:var(--cell);line-height:var(--cell);overflow:hidden}
.counter__ghost{visibility:hidden;line-height:var(--cell)}
.counter__track{position:absolute;top:0;left:0;width:100%;height:100%}
.counter__num{position:absolute;top:0;left:0;width:100%;line-height:var(--cell);text-align:right;transition:transform .3s var(--ease),opacity .3s var(--ease)}
.counter__num.is-above{transform:translateY(-100%);opacity:0}
.counter__num.is-below{transform:translateY(100%);opacity:0}

/* Media of the active project (cols 3–10, half the viewport height) */
.media{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;pointer-events:none;transition:opacity var(--t) var(--ease),visibility 0s linear 0s}
.media .grid{width:100%;padding:0 var(--gap)}
.media__inner{grid-column:3 / -3;display:flex;justify-content:center;align-items:center;gap:var(--gap);height:var(--media-h,58dvh);width:100%}
/* gross, aber mit weissem Rand: links bleibt Platz fuer die Farbkreise, rechts fuer den Zaehler,
   oben fuer Logo und Menue. Die Bedienelemente liegen dadurch nie auf dem Bild. */
/* Randlose Ansicht: das Bild fuellt den ganzen Schirm, die Bedienelemente stehen darauf —
   ohne Schleier, ohne Schatten, nur helle Schrift auf dem Foto. */
/* Welche Schriftfarbe auf dem Foto lesbar ist, haengt vom Bild ab und nicht vom Modus.
   slider.js misst die Helligkeit genau unter Menue, Zaehler und Titel und setzt
   .auf-hell (heller Untergrund, also dunkle Schrift) bzw. .auf-dunkel. Die Regeln mit
   :not() sind der Rueckfall, solange nichts gemessen werden konnte - sie entsprechen
   dem Verhalten von vorher. */
body.is-cover .hdr__nav:not(.auf-hell){--nav-color:#efe6e2}
body.is-cover .counter:not(.auf-hell),
body.is-cover .title-track:not(.auf-hell) .title{color:#efe6e2}
body.is-cover .hdr__nav a.is-current,body.is-cover .hdr__nav a.is-active{opacity:var(--nav-active-opacity)}

.hdr__nav.auf-dunkel{--nav-color:#efe6e2}
.counter.auf-dunkel,.title-track.auf-dunkel .title{color:#efe6e2}
.counter.auf-hell,.title-track.auf-hell .title{color:var(--nav-color)}

/* Raster-Modus: das Skript setzt Ort und Groesse in Pixeln, jedes Bild behaelt sein Seitenverhaeltnis. */
.media.is-grid .grid{display:block;padding:0;height:100%}
.media.is-grid .media__inner{position:absolute;grid-column:auto;display:flex;align-items:center;justify-content:center;width:auto;height:auto;margin:0}
.media.is-grid .media__item{flex:0 0 auto}
.media__item{flex:1 1 0%;height:100%;overflow:hidden;display:flex;justify-content:center;align-items:center;container-type:size;transition:opacity .5s var(--ease)}
.media__item a,.media__item .media__link{pointer-events:all;width:100%;height:100%;display:flex;justify-content:center;align-items:center}
/* Der Platzhalter traegt die Farbwelt des Bildes und wird zum Rand hin leicht dunkler,
   damit die Flaeche nicht flach wirkt, solange das Bild noch laedt. */
.media__frame{width:100cqw;height:100cqh;overflow:hidden;background-color:var(--c,var(--grey));
  background-image:radial-gradient(120% 120% at 50% 45%,rgba(0,0,0,0) 45%,rgba(0,0,0,.16) 100%)}
.media__frame img,.media__frame video{width:100%;height:100%;object-fit:cover;object-position:center center}
/* Platzhalter: Kasten in der richtigen Groesse und Farbwelt, bis das Bild da ist */
.media__frame img{opacity:0;transition:opacity .2s var(--ease)}
.media__frame img.is-loaded,.media__frame video{opacity:1}
.media__mask{display:none}



/* --------------------------------------------------------------------------
   Mobile (≤ 768px)
   -------------------------------------------------------------------------- */
@media (max-width:768px){
  .grid{grid-template-columns:repeat(6,minmax(0,1fr))}

  .hdr__logo{left:50%;top:12px;width:75px;transform:translateX(-50%)}
  .hdr__nav--desktop{display:none}
  .hdr__nav--mobile{display:flex;left:0;right:0;top:var(--m-nav-top);justify-content:center;gap:var(--m-nav-gap)}
  .hdr__nav--mobile a{font-family:var(--m-nav-font);font-weight:400;font-size:var(--m-nav-size);letter-spacing:var(--nav-ls,normal);line-height:1;opacity:1}
  .hdr__nav--mobile a.is-current,.hdr__nav--mobile a.is-active{color:var(--m-nav-current);opacity:1}

  .dots{width:calc(var(--edge) + var(--dot) + var(--gap))}
  .dot__name{display:none}

  .details{left:var(--gap);right:var(--gap)}
  .details .grid{gap:1rem;align-items:baseline}
  .details__title{flex:1 1 0%;width:auto;min-width:0}
  .details__options{position:static;transform:none;flex:0 0 auto;margin-left:auto}

  .media{display:block;pointer-events:all;height:100%}
  .media .grid{display:block;padding:0;height:100%}
  .media.is-grid .media__inner{position:relative;left:auto !important;top:auto !important;width:auto !important;height:100% !important;display:block}
  .media.is-grid .media__item{flex:0 0 auto;width:100%}
  /* Der Rahmen nimmt das Seitenverhaeltnis des Bildes an, damit auch am Telefon nichts beschnitten wird. */
  .media__frame{width:var(--item-w,100cqw);height:var(--item-h,100cqh)}
  /* Auf dem Telefon steht immer genau EIN Bild im Blick: Kastenhoehe = Rest nach dem Rand,
     der Abstand zum naechsten Projekt ist so gross wie der Rand, damit nichts hineinlugt. */
  .media__inner{display:block;position:relative;height:100%;overflow-y:auto;overscroll-behavior:contain;scroll-snap-type:y mandatory;padding:12dvh var(--gap) 12dvh calc(var(--edge) + var(--dot) + var(--gap));scrollbar-width:none}
  .media__inner::-webkit-scrollbar{display:none}
  .media__item{height:100%;width:100%;margin-bottom:12dvh;scroll-snap-align:center;scroll-snap-stop:always;display:flex;justify-content:center;align-items:center;overflow:hidden;container-type:size}
  .media__item:last-child{margin-bottom:0}
  .media__mask{display:block;position:absolute;left:0;width:100%;height:16dvh;pointer-events:none;z-index:2}
  .media__mask--top{top:0;background:linear-gradient(to bottom,var(--bg) 25%,rgba(245,245,244,0))}
  .media__mask--bottom{bottom:0;background:linear-gradient(to top,var(--bg) 25%,rgba(245,245,244,0))}
}

/* Linke Haelfte eines geteilten randlosen Slides: nicht die Bildmitte, sondern der linke Teil. */
.media__item.is-linkshaelfte .media__frame img,
.media__item.is-linkshaelfte .media__frame video{object-position:left center}