/* DG-Portfolio_2026 – Theme-Styles */
:root{
  --ink:#f6f4f0; --ink-dim:rgba(246,244,240,.7); --ink-faint:rgba(246,244,240,.36);
  --lime:#c9f74a; --cyan:#3fe3ff;
  --paper:#e6e8eb; --paper-ink:#15181c; --paper-dim:rgba(21,24,28,.45);
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  background:#000;
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --paper:#16191d; --paper-ink:#e6e8eb; --paper-dim:rgba(230,232,235,.45); } }
:root[data-theme="dark"]{ --paper:#16191d; --paper-ink:#e6e8eb; --paper-dim:rgba(230,232,235,.45); }
html{height:100%;scroll-padding-top:env(safe-area-inset-top,0px);-webkit-text-size-adjust:100%;text-size-adjust:100%}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;min-height:100%;background:#000;color:var(--ink);
  font-family:"Mona Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
a{color:inherit}
:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}

/* Gemeinsamer Randabstand: genau die Kante, an der die Headlines beginnen
   (Abstand der Index-Liste plus Abstand zwischen Leiste und Text). */
:root{--edge:calc(clamp(16px,4vw,48px) + 20px)}

/* Kopfzeile */
.dg-top{position:fixed;top:0;left:0;right:0;z-index:50;height:0}
/* Logo: Größe und Position je Gerät */
:root{--lw:var(--lw-d,52px);--lx:var(--lx-d,0px);--ly:var(--ly-d,0px)}
@media (max-width:1024px){:root{--lw:var(--lw-t,48px);--lx:var(--lx-t,0px);--ly:var(--ly-t,0px)}}
@media (max-width:560px){:root{--lw:var(--lw-m,40px);--lx:var(--lx-m,0px);--ly:var(--ly-m,0px)}}
.dg-logo-link{position:absolute;left:calc(var(--edge) + var(--lx));top:calc(env(safe-area-inset-top,0px) + 16px + var(--ly))}
.dg-logo{display:block;width:var(--lw);height:auto;filter:drop-shadow(0 2px 14px rgba(0,0,0,.35))}
/* Burger: Größe und Position je Gerät. Standard: rechte Kante der Striche auf dem Randabstand,
   vertikal mittig zum Logo. */
:root{--bs:var(--bs-d,1);--bx:var(--bx-d,0px);--by:var(--by-d,0px)}
@media (max-width:1024px){:root{--bs:var(--bs-t,1);--bx:var(--bx-t,0px);--by:var(--by-t,0px)}}
@media (max-width:560px){:root{--bs:var(--bs-m,1);--bx:var(--bx-m,0px);--by:var(--by-m,0px)}}
.dg-burger{position:absolute;display:block;width:calc(44px * var(--bs));height:calc(44px * var(--bs));
  right:calc(var(--edge) - 10px * var(--bs) + var(--bx));
  top:calc(env(safe-area-inset-top,0px) + 16px + (var(--lw) - 44px * var(--bs)) / 2 + var(--by))}
.dg-burger span{position:absolute;top:50%;left:calc(10px * var(--bs));right:calc(10px * var(--bs));height:calc(2px * var(--bs));margin-top:calc(-1px * var(--bs));
  background:currentColor;border-radius:2px;
  transition:transform .45s cubic-bezier(.7,0,.2,1),opacity .3s,background .4s;box-shadow:0 0 10px rgba(0,0,0,.25)}
.dg-burger span:nth-child(1){transform:translateY(calc(-7px * var(--bs)))}
.dg-burger span:nth-child(3){transform:translateY(calc(7px * var(--bs)))}
body.dg-menu-open .dg-burger{color:var(--paper-ink)}
body.dg-menu-open .dg-burger span{box-shadow:none}
body.dg-menu-open .dg-burger span:nth-child(1){transform:rotate(45deg)}
body.dg-menu-open .dg-burger span:nth-child(2){opacity:0}
body.dg-menu-open .dg-burger span:nth-child(3){transform:rotate(-45deg)}

/* Bühne */
.dg-stage{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;margin:0;padding:0;overflow:hidden}
.dg-layer{top:0;right:0;bottom:0;left:0}
/* Inaktive Slides werden nach dem Ausblenden komplett unsichtbar geschaltet: spart Grafikspeicher und Rechenzeit. */
.dg-layer{position:absolute;inset:0;opacity:0;visibility:hidden;transform:scale(1.07);transition:opacity 1s ease,transform 1.8s cubic-bezier(.2,.7,.2,1),visibility 0s linear 1.8s}
.dg-layer.dg-on{opacity:1;visibility:visible;transform:scale(1);transition-delay:0s}
.dg-cell{--fx:var(--fx-d,50%);--fy:var(--fy-d,50%)}
@media (max-width:1024px){.dg-cell{--fx:var(--fx-t,50%);--fy:var(--fy-t,50%)}}
@media (max-width:560px){.dg-cell{--fx:var(--fx-m,50%);--fy:var(--fy-m,50%)}}
/* Bilder und Videos: immer bildschirmfüllend, unverzerrt, mit Fokuspunkt */
/* Mit !important abgesichert, weil Plugins (z. B. Elementor) oft globale Bildregeln wie img{height:auto} mitbringen. */
.dg-stage .dg-cell picture{position:absolute;top:0;left:0;width:100%;height:100%;display:block;margin:0}
.dg-stage .dg-cell .dg-media{position:absolute!important;top:0!important;left:0!important;right:auto!important;bottom:auto!important;
  width:100%!important;height:100%!important;min-width:0!important;min-height:0!important;max-width:none!important;max-height:none!important;
  margin:0!important;padding:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;
  object-fit:cover!important;object-position:var(--fx) var(--fy)!important;display:block!important;background:#000}
.dg-media-empty{background:linear-gradient(160deg,#1b1f24,#07080a)}
/* Abdunklung für die Lesbarkeit der Headlines; Stärke global im Customizer (--shade, 0–2). */
.dg-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to right,rgba(0,0,0,calc(.6 * var(--shade,1))),rgba(0,0,0,0) 65%),linear-gradient(to top,rgba(0,0,0,calc(.45 * var(--shade,1))),rgba(0,0,0,0) 45%)}

.dg-index-wrap{position:absolute;z-index:5;left:clamp(16px,4vw,48px);right:16px;bottom:calc(env(safe-area-inset-bottom,0px) + 14px + 12px * var(--cs) * 1.4 + clamp(22px,5vh,48px));overflow:hidden;padding-left:20px;
  transition:height .38s cubic-bezier(.5,0,.2,1)}
.dg-rail{position:absolute;left:0;top:6px;bottom:6px;width:2px;background:var(--ink-faint);border-radius:2px}
.dg-rail i{position:absolute;left:0;width:100%;background:var(--ink);border-radius:2px;transition:top .38s cubic-bezier(.5,0,.2,1),height .38s}
.dg-index{position:relative;list-style:none;margin:0;padding:0;transition:transform .38s cubic-bezier(.5,0,.2,1)}
.dg-index li{transition:opacity .25s}
.dg-index li.dg-out{opacity:0;pointer-events:none}
.dg-index button{display:block;text-align:left;font-weight:600;font-variation-settings:"wdth" 115;font-size:calc(clamp(1.15rem,min(3vw,4.6vh),2.4rem) * var(--gp,1));line-height:1.12;letter-spacing:-.005em;color:var(--ink-faint);transition:color .25s,font-size .3s cubic-bezier(.5,0,.2,1)}
.dg-index button{--s:var(--s-d,1)}
@media (max-width:1024px){.dg-index button{--s:var(--s-t,1)}}
@media (max-width:560px){.dg-index button{--s:var(--s-m,1)}}
.dg-index button[aria-current="true"]{font-size:calc(clamp(2.1rem,min(7.4vw,11vh),6.4rem) * var(--ga,1) * var(--s,1));line-height:.96;letter-spacing:-.02em;margin:4px 0}
.dg-index button[aria-current="true"]{color:var(--ink)}
.dg-sub{display:block;font-weight:400;font-size:clamp(.95rem,1.3vw,1.1rem);color:var(--ink-dim);letter-spacing:0;max-height:0;overflow:hidden;transition:max-height .3s ease,margin .3s ease}
.dg-sub small{display:block;font-size:.78em;opacity:.75;margin-top:4px}
.dg-index button[aria-current="true"] .dg-sub{max-height:4.5em;margin:6px 0 10px}

/* Menü */
.dg-menu{position:fixed;inset:0;z-index:45;background:var(--paper);color:var(--paper-ink);transform:translateY(-100%);visibility:hidden;
  transition:transform .65s cubic-bezier(.75,0,.2,1),visibility 0s .65s;overflow:auto;
  padding:calc(env(safe-area-inset-top,0px) + 104px) clamp(20px,6vw,88px) calc(env(safe-area-inset-bottom,0px) + 48px)}
.dg-menu.dg-open{transform:none;visibility:visible;transition:transform .65s cubic-bezier(.75,0,.2,1)}
body.dg-menu-open .dg-logo{filter:none}
.dg-menu-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:48px 80px;max-width:1200px}
@media (max-width:820px){.dg-menu-grid{grid-template-columns:1fr}}
.dg-nav{list-style:none;margin:0;padding:0}
.dg-nav a{display:block;font-weight:600;font-size:clamp(2.6rem,7vw,5.4rem);line-height:1.02;letter-spacing:-.02em;text-decoration:none;color:var(--paper-dim);transition:color .25s}
.dg-nav a:hover,.dg-nav a[aria-current="true"]{color:var(--paper-ink)}
.dg-panel{display:none}
.dg-panel.dg-on{display:block}
.dg-panel h2{font-size:1rem;font-weight:600;margin:0 0 14px}
.dg-panel p{font-size:1.1rem;line-height:1.6;max-width:44ch;margin:0 0 14px}
.dg-panel .dg-mail{font-size:clamp(1.4rem,3vw,2rem);font-weight:600;text-decoration:none;border-bottom:2px solid currentColor}
.dg-panel ul{list-style:none;padding:0;margin:20px 0 0;display:flex;gap:22px;flex-wrap:wrap}
.dg-works{list-style:none;padding:0;margin:0}
.dg-works button{display:flex;justify-content:space-between;gap:20px;width:100%;text-align:left;padding:12px 0;border-bottom:1px solid color-mix(in srgb,var(--paper-ink) 15%,transparent);font-size:1.1rem}
.dg-works button span:last-child{color:var(--paper-dim)}
.dg-works button:hover span:first-child{text-decoration:underline;text-underline-offset:4px}
.dg-note{margin-top:56px;padding-top:18px;border-top:1px solid color-mix(in srgb,var(--paper-ink) 18%,transparent);font-size:.9rem;opacity:.7;max-width:70ch;line-height:1.55}
/* Copyright-Zeile: Ausrichtung und Größe je Gerät */
:root{--ca:var(--ca-d,left);--cs:var(--cs-d,1)}
@media (max-width:1024px){:root{--ca:var(--ca-t,left);--cs:var(--cs-t,1)}}
@media (max-width:560px){:root{--ca:var(--ca-m,center);--cs:var(--cs-m,1)}}
.dg-copy{position:fixed;left:0;right:0;bottom:0;z-index:6;margin:0;padding:0 var(--edge) calc(env(safe-area-inset-bottom,0px) + 14px);
  text-align:var(--ca);font-size:calc(12px * var(--cs));line-height:1.4;color:var(--ink-dim);pointer-events:none}
/* One-Page: kein Scrollen der Seite selbst */
body.dg-onepage{height:100%;overflow:hidden}
.dg-top .dg-logo-link{z-index:1}

/* Hinweis, solange noch keine Slides angelegt sind */
.dg-empty-note{position:fixed;inset:0;display:grid;place-items:center;text-align:center;padding:24px;color:var(--ink-dim);font-size:1.1rem;line-height:1.6}
.dg-empty-note a{color:var(--ink)}

/* Einfache Inhaltsseiten (Impressum, Datenschutz) */
body.dg-page{background:var(--paper);color:var(--paper-ink)}
body.dg-page .dg-top{position:absolute;color:var(--paper-ink)}
body.dg-page .dg-logo{filter:none}
.dg-page-content{max-width:72ch;margin:0 auto;padding:calc(env(safe-area-inset-top,0px) + 120px) 24px calc(env(safe-area-inset-bottom,0px) + 64px);line-height:1.65;font-size:1.05rem}
.dg-page-content h1{font-weight:600;font-variation-settings:"wdth" 115;font-size:clamp(2rem,6vw,3.4rem);line-height:1.05;margin:0 0 32px}
.dg-page-content h2,.dg-page-content h3{font-weight:600;line-height:1.25;margin:2em 0 .6em}
.dg-page-content a{color:inherit;text-underline-offset:3px}
.dg-page-content img{max-width:100%;height:auto}
.dg-back{display:inline-block;margin-top:48px;font-weight:600}
body.dg-page .dg-copy{position:static;padding-bottom:calc(env(safe-area-inset-bottom,0px) + 24px);color:var(--paper-dim)}

/* Screenreader-Text */
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}


/* Multi-Slides: Spur mit mehreren Medien je Slide */
/* Die Medien eines Slides liegen übereinander. Wechsel mit dem Timing der Slides: Das neue Medium
   blendet ein und gleitet dabei leicht aus der Wischrichtung herein. Das alte bleibt voll sichtbar
   darunter und weicht minimal zur Gegenseite aus, bis es verdeckt ist: so scheint nie Schwarz durch. */
.dg-track{position:absolute;inset:0;overflow:hidden}
.dg-cell{position:absolute;inset:0;overflow:hidden;opacity:0;visibility:hidden;
  transition:opacity 1s ease,transform 1.8s cubic-bezier(.2,.7,.2,1),visibility 0s linear 1.8s}
.dg-cell.dg-cur{opacity:1;visibility:visible;transition-delay:0s}
.dg-cell.dg-instant{transition:none!important}
.dg-cell.dg-hold{opacity:1;visibility:visible;z-index:1}
.dg-cell.dg-in{visibility:visible;z-index:2}
/* Hinweis beim ersten Erscheinen eines Multi-Slides: der Weiter-Pfeil stupst kurz an. */
@keyframes dg-nudge{0%,100%{transform:translateX(0)}25%,65%{transform:translateX(5px)}45%{transform:translateX(0)}}
.dg-pager.dg-nudge .dg-pg-next:not([disabled]){animation:dg-nudge 1.2s ease .8s 1}

/* Navi-Leiste der Multi-Slides: Ausrichtung, Position und Breite je Gerät aus dem Customizer */
:root{--pj:var(--pj-d,center);--pw:var(--pw-d,1)}
@media (max-width:1024px){:root{--pj:var(--pj-t,center);--pw:var(--pw-t,1)}}
@media (max-width:560px){:root{--pj:var(--pj-m,center);--pw:var(--pw-m,1)}}
.dg-pager{position:absolute;z-index:7;left:var(--edge);right:var(--edge);display:flex;justify-content:var(--pj);pointer-events:none;
  transition:bottom .38s cubic-bezier(.5,0,.2,1),top .38s cubic-bezier(.5,0,.2,1)}
.dg-pager[hidden]{display:none}
.dg-pager-in{display:flex;align-items:center;gap:calc(12px * var(--pw));pointer-events:auto;color:var(--ink)}
.dg-pager button{width:calc(32px * var(--pw));height:calc(32px * var(--pw));border-radius:50%;font-size:calc(20px * var(--pw));line-height:1;display:grid;place-items:center;color:var(--ink);opacity:.85;text-shadow:0 1px 10px rgba(0,0,0,.35)}
.dg-pager button:hover{opacity:1}
.dg-pager button[disabled]{opacity:.25;cursor:default}
.dg-bars{display:flex;gap:calc(5px * var(--pw))}
.dg-bars i{display:block;width:calc(28px * var(--pw));height:2px;border-radius:2px;background:var(--ink-faint);transition:background .3s}
.dg-bars i.dg-on{background:var(--ink)}
.dg-pg-count{font-size:calc(12px * var(--pw));color:var(--ink-dim);font-variant-numeric:tabular-nums}
.dg-edge{position:absolute;z-index:7;top:50%;transform:translateY(-50%);width:56px;height:56px;border-radius:50%;font-size:30px;line-height:1;display:grid;place-items:center;
  color:var(--ink);background:rgba(0,0,0,.25);opacity:0;transition:opacity .3s}
.dg-edge.dg-e-prev{left:calc(var(--edge) - 16px)}.dg-edge.dg-e-next{right:calc(var(--edge) - 16px)}
.dg-edge[hidden]{display:none}
@media (hover:hover){.dg-stage:hover .dg-edge:not([disabled]){opacity:1}}
@media (hover:none){.dg-edge{display:none!important}}
:root{--pv:var(--pv-d,0);--pt:var(--pt-d,96px);--pb:var(--pb-d,28px)}
@media (max-width:1024px){:root{--pv:var(--pv-t,0);--pt:var(--pt-t,96px);--pb:var(--pb-t,24px)}}
@media (max-width:560px){:root{--pv:var(--pv-m,0);--pt:var(--pt-m,84px);--pb:var(--pb-m,20px)}}