/* ============================================================
D&G Energieberatung – Sektions- und Komponenten-Styles
Portierung von Designs/Designs4/design_dg_final_anti-slop.html
Alle themeneigenen Klassen mit Präfix dg-.
============================================================ */
:root{
--bg:#FFFFFF;--surface:#F6F5EE;--surface-2:#EEECDD;--card:#FFFFFF;
--ink:#22251A;--body:#585A47;--muted:#8E8F79;
--line:#E9E6D2;--line-strong:#D6D2B3;
--brand:#8FA05B;--brand-mid:#748549;--brand-dark:#2B3420;--brand-deep:#1C2415;--brand-soft:#EEF1E1;
--sheen:#C9DE9A;
/* Energieeffizienz-Skala (wie im Logo) für Button-/Nav-Hover */
--eff-red:#E2001A;--eff-orange:#EC6608;--eff-yellow:#F9B200;--eff-lime:#95C11F;--eff-green:#3AAA35;
--eff:linear-gradient(90deg,var(--eff-red) 0%,var(--eff-orange) 26%,var(--eff-yellow) 50%,var(--eff-lime) 74%,var(--eff-green) 100%);
--ease:cubic-bezier(.22,1,.32,1);--maxw:1220px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{-webkit-font-smoothing:antialiased;overflow-x:hidden;margin:0}
/* Sektionen stapeln nahtlos – kein Standard-blockGap zwischen Root-Blöcken */
.wp-site-blocks > *{margin-block-start:0!important}
.wp-block-post-content > *{margin-block-start:0!important;margin-block-end:0!important}
h2 em,h3 em{font-style:italic;color:var(--brand-mid)}
img{max-width:100%;display:block}
/* Nur für Screenreader (z. B. H1 der Startseite) */
.screen-reader-text{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);border:0;white-space:nowrap}
.dg-wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}
.dg-block{padding:100px 0}
.dg-surface{background:var(--surface)}
.dg-mt{margin-top:80px}
.dg-sechead{margin-bottom:48px}
/* Seiten ohne dunklen Hero (Kontakt, Impressum, …): Inhalt unter dem fixierten Kapsel-Header beginnen */
body.dg-header-solid main{padding-top:90px}
.dg-kicker{font-size:.72rem;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--brand-mid);margin:0 0 16px;display:inline-flex;align-items:center;gap:12px}
.dg-lead{font-size:1.14rem;color:var(--muted);max-width:62ch;margin:10px 0 0}
.dg-center{text-align:center}
.dg-center .dg-kicker{justify-content:center}
.dg-center .dg-lead{margin-left:auto;margin-right:auto}
.dg-center .wp-block-buttons{justify-content:center}
.dg-ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.dg-h3{font-size:clamp(1.5rem,2.6vw,2rem)}
.dg-reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.dg-reveal.in{opacity:1;transform:none}
/* Ohne JS bzw. im Block-Editor bleiben Reveal-Elemente sichtbar */
@media (scripting:none){.dg-reveal{opacity:1;transform:none}}
.editor-styles-wrapper .dg-reveal{opacity:1;transform:none}
/* ---------- Checklisten ---------- */
ul.dg-checks{list-style:none;display:grid;gap:11px;margin:0;padding:0}
ul.dg-checks li{position:relative;padding-left:30px;margin:0}
ul.dg-checks li::before{content:"";position:absolute;left:0;top:.5em;width:16px;height:16px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 4px var(--brand-soft)}
ul.dg-checks li::after{content:"";position:absolute;left:5px;top:.72em;width:6px;height:3px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg)}
ul.dg-checks.dg-two{grid-template-columns:1fr 1fr;gap:11px 28px;margin-top:26px}
@media(max-width:640px){ul.dg-checks.dg-two{grid-template-columns:1fr}}
/* ---------- Buttons: Variante 17 „Skala-Rahmen" mit Variante-11-Farbflächen ----------
Gefüllter Button; bei Hover zeichnet sich eine Energieskala-Kontur per clip-path von
links um den Button. ::before = Verlaufs-Rahmen, ::after = Farbfläche inset 2px. */
.dg-btn,.wp-block-button__link{position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:.8rem;letter-spacing:.13em;text-transform:uppercase;padding:16px 30px;cursor:pointer;border:1.5px solid var(--brand-dark);border-radius:0;background:transparent;color:var(--brand-dark);transition:color .25s,border-color .25s;text-decoration:none}
.dg-btn::before,.wp-block-button__link::before{content:"";position:absolute;inset:-1.5px;z-index:-2;background:var(--eff);padding:2px;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;clip-path:inset(0 100% 0 0);transition:clip-path .5s var(--ease)}
.dg-btn::after,.wp-block-button__link::after{content:"";position:absolute;inset:2px;z-index:-1;background:transparent}
.dg-btn:hover::before,.wp-block-button__link:hover::before{clip-path:inset(0)}
.dg-btn:hover,.wp-block-button__link:hover{border-color:transparent;transition:color .25s,border-color 0s}
.dg-btn .dg-ic{width:16px;height:16px;transition:transform .25s var(--ease)}
.dg-btn:hover .dg-ic{transform:translateX(4px)}
.dg-btn:active,.wp-block-button__link:active{transform:translateY(1px)}
.dg-btn-ondark,.dg-ondark .wp-block-button__link{color:var(--brand-deep);border-color:transparent}
.dg-btn-ondark::after,.dg-ondark .wp-block-button__link::after{background:#fff;inset:.5px}
.dg-header.scrolled .dg-btn-ondark{color:#fff}
.dg-header.scrolled .dg-btn-ondark::after{background:color-mix(in srgb,var(--brand-dark) 60%,var(--brand-mid) 40%)}
.dg-more{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brand-mid);text-decoration:none}
.dg-more .dg-ic{width:15px;height:15px;transition:transform .2s var(--ease)}
.dg-more:hover .dg-ic{transform:translateX(5px)}
.dg-more::after{content:"→";font-size:.9em;transition:transform .2s var(--ease)}
.dg-more:hover::after{transform:translateX(5px)}
/* ---------- Header: transparent -> schwebende Kapsel ---------- */
.dg-header{position:fixed;top:0;left:0;right:0;z-index:60}
.dg-bar{width:min(1380px,calc(100% - 64px));margin:0 auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:90px;padding:0 34px;transition:background .4s var(--ease),box-shadow .4s var(--ease),height .35s var(--ease),margin .35s var(--ease),border-radius .35s var(--ease),backdrop-filter .35s var(--ease),width .35s var(--ease)}
.dg-header.scrolled .dg-bar{width:min(1180px,calc(100% - 32px));margin:14px auto 0;height:76px;border-radius:999px;background:rgba(255,255,255,.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 16px 42px -14px rgba(28,36,21,.35)}
.dg-navl,.dg-navr{display:flex;align-items:center;gap:32px}
.dg-navl{justify-content:flex-end}
.dg-navr{justify-content:flex-start}
.dg-navl a,.dg-navr a:not(.dg-btn){position:relative;font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.4);padding:4px 0;transition:color .2s;text-decoration:none}
/* Nav-Hover = „Skala-Unterstrich": Verlauf wächst von links (Kontakt-Button ausgenommen) */
.dg-navl a::after,.dg-navr a:not(.dg-btn)::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:2px;background:var(--eff);clip-path:inset(0 100% 0 0);transition:clip-path .3s var(--ease)}
.dg-navl a:hover::after,.dg-navr a:not(.dg-btn):hover::after,.dg-navl a.active::after,.dg-navr a.active:not(.dg-btn)::after{clip-path:inset(0)}
.dg-header.scrolled .dg-navl a,.dg-header.scrolled .dg-navr a:not(.dg-btn){color:var(--ink);text-shadow:none}
.dg-logo-space{width:clamp(380px,31.8vw,520px);justify-self:center;transition:width .4s var(--ease)}
.dg-header.scrolled .dg-logo-space{width:200px}
.dg-logo-overlay{position:absolute;left:50%;top:0;transform:translateX(-50%);z-index:2;background:#fff;display:flex;align-items:center;justify-content:center;width:clamp(220px,30vw,320px);height:clamp(128px,18vw,200px);padding:16px 26px;border-radius:0 0 18px 18px;box-shadow:0 20px 46px rgba(0,0,0,.3);transition:height .4s var(--ease),width .4s var(--ease),top .4s var(--ease),padding .4s var(--ease),border-radius .4s var(--ease),box-shadow .4s var(--ease),background .3s var(--ease)}
.dg-logo-overlay img{height:100%;width:auto;max-width:100%;object-fit:contain}
.dg-header.scrolled .dg-logo-overlay{width:120px;height:48px;top:28px;padding:0;border-radius:0;box-shadow:none;background:transparent}
.dg-navr .dg-btn{padding:10px 20px;margin-left:4px}
/* Burger-Button (nur ≤1200px sichtbar, links in der Bar) */
.dg-menu-toggle{display:none;align-items:center;justify-content:center;position:absolute;left:18px;top:50%;transform:translateY(-50%);width:42px;height:42px;padding:0;border:1.5px solid rgba(255,255,255,.75);border-radius:999px;background:transparent;cursor:pointer;transition:border-color .25s}
.dg-menu-ic{display:flex;flex-direction:column;gap:4px;width:16px}
.dg-menu-ic span{display:block;height:2px;background:#fff;border-radius:2px;transition:transform .3s var(--ease),opacity .2s,background .25s}
.dg-header.scrolled .dg-menu-toggle{border-color:var(--line-strong)}
.dg-header.scrolled .dg-menu-ic span{background:var(--ink)}
.dg-header.menu-open .dg-menu-toggle{border-color:rgba(255,255,255,.75)}
.dg-header.menu-open .dg-menu-ic span{background:#fff}
.dg-header.menu-open .dg-menu-ic span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.dg-header.menu-open .dg-menu-ic span:nth-child(2){opacity:0}
.dg-header.menu-open .dg-menu-ic span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
/* Mobiles Vollbild-Menü: dunkles Panel mit Skala-Oberkante */
html.dg-noscroll{overflow:hidden}
.dg-mmenu{position:fixed;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:40px;padding:110px 30px 46px;background:var(--brand-deep);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s var(--ease),visibility 0s .35s}
.dg-mmenu::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--eff)}
.dg-header.menu-open .dg-mmenu{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .35s var(--ease)}
.dg-mmenu-nav{display:flex;flex-direction:column;align-items:center;gap:18px}
.dg-mmenu-nav a{position:relative;font-family:"DM Serif Display",Georgia,serif;font-size:clamp(1.5rem,5.5vh,2.1rem);color:#fff;text-decoration:none;padding:2px 0;opacity:0;transform:translateY(14px);transition:opacity .4s var(--ease),transform .4s var(--ease),color .2s}
.dg-mmenu-nav a:hover{color:var(--sheen)}
.dg-mmenu-nav a::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;background:var(--eff);clip-path:inset(0 100% 0 0);transition:clip-path .3s var(--ease)}
.dg-mmenu-nav a:hover::after,.dg-mmenu-nav a.active::after{clip-path:inset(0)}
.dg-header.menu-open .dg-mmenu-nav a{opacity:1;transform:none}
.dg-header.menu-open .dg-mmenu-nav a:nth-child(1){transition-delay:.05s}
.dg-header.menu-open .dg-mmenu-nav a:nth-child(2){transition-delay:.1s}
.dg-header.menu-open .dg-mmenu-nav a:nth-child(3){transition-delay:.15s}
.dg-header.menu-open .dg-mmenu-nav a:nth-child(4){transition-delay:.2s}
.dg-header.menu-open .dg-mmenu-nav a:nth-child(5){transition-delay:.25s}
.dg-header.menu-open .dg-mmenu-nav a:nth-child(6){transition-delay:.3s}
.dg-mmenu-claim{font-size:.76rem;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--sheen);opacity:0;transition:opacity .4s var(--ease) .35s;margin:0}
.dg-header.menu-open .dg-mmenu-claim{opacity:.85}
/* Kollisionszone 1201–1440px: engere Nav + schmalere Logo-Karte, damit nichts überlappt */
@media(max-width:1440px) and (min-width:1201px){
.dg-navl,.dg-navr{gap:20px}
.dg-navl a,.dg-navr a:not(.dg-btn){font-size:.72rem}
.dg-navr .dg-btn{padding:10px 16px}
.dg-logo-space{width:clamp(300px,26vw,400px)}
.dg-logo-overlay{width:clamp(200px,24vw,280px);height:clamp(118px,14vw,168px)}
}
@media(max-width:1200px){
.dg-navl,.dg-navr .dg-lnk{display:none}
.dg-menu-toggle{display:inline-flex}
.dg-bar{grid-template-columns:auto 1fr auto;position:relative;z-index:3}
.dg-logo-space{width:auto;min-width:0}
.dg-navr{position:absolute;right:18px;top:50%;transform:translateY(-50%)}
.dg-logo-overlay{width:clamp(96px,24vw,150px);height:clamp(40px,10vw,62px);padding:8px 12px}
.dg-header.scrolled .dg-logo-overlay{width:96px;height:40px;top:22px}
}
@media(max-width:480px){
.dg-navr{right:14px}
.dg-navr .dg-btn{padding:9px 16px;font-size:.72rem}
.dg-menu-toggle{width:38px;height:38px;left:14px}
.dg-logo-overlay{width:88px;height:36px;padding:6px 10px}
}
/* ---------- Hero: 3 Bild-Spalten in voller Fensterhöhe ---------- */
.dg-hero-grid{display:grid;grid-template-columns:repeat(3,1fr)}
.dg-htile{position:relative;overflow:hidden;height:calc(100vh - 65px);min-height:640px;display:flex;align-items:flex-end;justify-content:center;text-align:center;text-decoration:none}
.dg-htile .dg-tile-img{position:absolute;inset:0;width:100%;height:112%;object-fit:cover;animation:dg-kenburns 20s ease-in-out infinite alternate;transition:filter .4s}
@keyframes dg-kenburns{from{transform:scale(1)}to{transform:scale(1.1)}}
.dg-htile::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,16,8,.18) 38%,rgba(14,16,8,.82) 100%);z-index:1}
.dg-htile:hover .dg-tile-img{filter:brightness(.9)}
.dg-htile .dg-rings{position:absolute;z-index:2;left:50%;top:42%;width:1px;height:1px;pointer-events:none}
.dg-htile .dg-rings span{position:absolute;left:0;top:0;width:58px;height:58px;margin:-29px 0 0 -29px;border:1.5px solid rgba(255,255,255,.85);border-radius:50%;opacity:0;transform:scale(.4)}
.dg-htile:hover .dg-rings span{animation:dg-ringpulse 1.4s var(--ease) infinite}
.dg-htile:hover .dg-rings span:nth-child(2){animation-delay:.35s}
.dg-htile:hover .dg-rings span:nth-child(3){animation-delay:.7s}
@keyframes dg-ringpulse{0%{opacity:.9;transform:scale(.4)}100%{opacity:0;transform:scale(2.9)}}
.dg-htile .dg-tile-inner{position:relative;z-index:3;width:100%;padding:0 26px 68px;display:flex;flex-direction:column;align-items:center;gap:6px;color:#fff;transition:transform .4s var(--ease)}
.dg-htile:hover .dg-tile-inner{transform:translateY(-6px)}
.dg-htile .dg-tile-title{font-family:"DM Serif Display",Georgia,serif;font-size:clamp(1.5rem,2.2vw,2.1rem);letter-spacing:.07em;text-transform:uppercase;text-shadow:0 3px 14px rgba(0,0,0,.55)}
.dg-htile .dg-tile-text{font-size:.98rem;font-weight:500;opacity:.94;text-shadow:0 2px 8px rgba(0,0,0,.5);margin-top:6px}
.dg-htile .dg-tile-line{width:58px;height:2px;background:var(--brand);margin-top:18px;transform:scaleX(0);transition:transform .35s var(--ease)}
.dg-htile:hover .dg-tile-line{transform:scaleX(1)}
@media(max-width:900px){.dg-hero-grid{grid-template-columns:1fr}.dg-htile{height:60vh;min-height:420px}}
/* ---------- Laufband ---------- */
.dg-ticker{overflow:hidden;background:var(--brand-dark);padding:18px 0}
/* Dauer folgt der Tracklänge: der lange Positionierungssatz braucht ~150s,
damit das Band im selben ruhigen Tempo läuft wie die frühere Wortliste. */
.dg-ticker-track{display:flex;width:max-content;animation:dg-tick 150s linear infinite}
.dg-ticker span{font-family:"DM Serif Display",Georgia,serif;font-size:1.05rem;color:#fff;white-space:nowrap;padding:0 30px;position:relative}
.dg-ticker span::after{content:"◆";position:absolute;right:-6px;color:var(--brand);font-size:.55rem;top:50%;transform:translateY(-50%)}
@keyframes dg-tick{to{transform:translateX(-50%)}}
.dg-ticker:hover .dg-ticker-track{animation-play-state:paused}
/* ---------- Seiten-Hero der Unterseiten (Band-Stil, als Cover-Block) ---------- */
.dg-page-hero{position:relative;height:56vh;min-height:420px;overflow:hidden;display:grid;place-items:center;text-align:center;padding:clamp(132px,18vw,204px) 0 40px}
@media(max-width:1200px){.dg-page-hero{padding-top:76px;min-height:380px}}
.dg-page-hero .wp-block-cover__image-background{position:absolute;inset:-18% 0;width:100%;height:136%;object-fit:cover;will-change:transform}
.dg-page-hero .wp-block-cover__background{background:rgba(14,16,8,.58)!important;opacity:1!important}
.dg-page-hero .wp-block-cover__inner-container{position:relative;z-index:2;color:#fff;padding:0 30px;max-width:min(840px,100%);width:100%}
.dg-page-hero .dg-crumb{font-size:.72rem;font-weight:700;letter-spacing:.32em;text-transform:uppercase;color:var(--sheen);margin:0 0 16px}
.dg-page-hero .dg-crumb a{color:inherit;text-decoration:none}
.dg-page-hero .dg-crumb a:hover{color:#fff}
.dg-page-hero h1{color:#fff;font-size:clamp(1.7rem,3.6vw,2.8rem);margin:0}
.dg-page-hero h1 em{color:var(--sheen);font-style:italic}
.dg-page-hero .dg-sub{color:rgba(255,255,255,.88);font-size:1.05rem;margin:12px 0 0}
/* ---------- Produktkacheln 2×4 (vollflächige Cover-Kacheln) ---------- */
.dg-products{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:44px;grid-auto-rows:1fr}
.dg-products>*{margin-block-start:0}
.dg-prod{position:relative;overflow:hidden;min-height:260px;display:flex;align-items:flex-end;padding:0}
.dg-prod .wp-block-cover__image-background{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.dg-prod .wp-block-cover__background{background:linear-gradient(180deg,rgba(14,16,8,.10) 26%,rgba(14,16,8,.88) 100%)!important;opacity:1!important;z-index:1}
.dg-prod:hover .wp-block-cover__image-background{transform:scale(1.06)}
.dg-prod .wp-block-cover__inner-container{position:relative;z-index:2;padding:26px;color:#fff;width:100%;margin-top:auto}
.dg-prod h4{color:#fff;font-size:1.28rem;margin:0;text-shadow:0 2px 10px rgba(0,0,0,.45)}
.dg-prod h4::after{content:"";display:block;width:54px;height:2px;background:var(--brand);margin-top:12px;transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.dg-prod:hover h4::after{transform:scaleX(1)}
.dg-prod p{font-size:.9rem;color:rgba(255,255,255,.88);max-height:0;opacity:0;overflow:hidden;transition:max-height .5s var(--ease),opacity .4s,margin-top .4s;margin:0;text-shadow:0 1px 6px rgba(0,0,0,.4)}
.dg-prod:hover p{max-height:180px;opacity:1;margin-top:10px}
.dg-prod p.dg-pbadge{display:inline-block;max-height:none;opacity:1;overflow:visible;font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:var(--brand);padding:5px 12px;border-radius:999px;margin-top:14px;width:fit-content}
@media(max-width:820px){.dg-products{grid-template-columns:1fr}.dg-prod p{max-height:none;opacity:1;margin-top:10px}.dg-prod h4::after{transform:scaleX(1)}}
/* ---------- Unternehmen: nummerierte Fakten-Karten (CSS-Counter) ---------- */
.dg-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:56px;counter-reset:dgfact;grid-auto-rows:1fr}
.dg-facts>*{margin-block-start:0}
.dg-fact{position:relative;background:var(--card);border:1px solid var(--line-strong);padding:88px 24px 26px;overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s,border-color .3s,background-size .4s var(--ease);counter-increment:dgfact;background-image:var(--eff);background-repeat:no-repeat;background-size:0 3px;background-position:top left}
.dg-fact:hover{transform:translateY(-4px);box-shadow:0 22px 44px -26px rgba(28,36,21,.26);border-color:var(--brand);background-size:100% 3px}
/* Ring (rotiert) + Ziffer (steht) + Ghost-Ziffer (hinter dem Text) */
.dg-fact::before{content:"";position:absolute;top:28px;left:24px;width:44px;height:44px;border-radius:50%;border:2px dashed var(--brand);background:var(--bg);animation:dg-spin 26s linear infinite;transition:background .3s,border-color .3s;z-index:1}
.dg-fact::after{content:counter(dgfact,decimal-leading-zero);position:absolute;top:28px;left:24px;width:44px;height:44px;display:grid;place-items:center;font-family:"DM Serif Display",Georgia,serif;font-size:1.02rem;color:var(--brand-dark);transition:color .3s;z-index:2}
.dg-fact:hover::before{background:var(--brand);border-color:var(--brand);animation-duration:2.4s}
.dg-fact:hover::after{color:#fff}
.dg-fact h4{font-size:1.08rem;margin:0 0 8px}
.dg-fact p{font-size:.88rem;color:var(--muted);margin:0}
.dg-fact h4::before{content:counter(dgfact,decimal-leading-zero);position:absolute;right:-24px;bottom:-38px;font-family:"DM Serif Display",Georgia,serif;font-size:6.4rem;line-height:1;color:transparent;-webkit-text-stroke:1px var(--line-strong);pointer-events:none;transition:-webkit-text-stroke-color .3s;z-index:-1}
.dg-fact:hover h4::before{-webkit-text-stroke-color:var(--brand-soft)}
@media(max-width:1000px){.dg-facts{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.dg-facts{grid-template-columns:1fr}}
@keyframes dg-spin{to{transform:rotate(360deg)}}
/* ---------- Duo (Text + Portrait mit Prüfsiegel) ---------- */
.dg-duo.wp-block-columns{display:grid;grid-template-columns:1.15fr .85fr;gap:60px;align-items:start;margin:0}
.dg-duo.dg-flip .wp-block-column:first-child{order:2}
.dg-duo.dg-flip .wp-block-column:last-child{order:1}
.dg-duo p{margin:0 0 16px}
.dg-dfig{position:relative}
.dg-frame{position:relative;padding:0 0 22px 22px;margin:0}
.dg-frame::before{content:"";position:absolute;left:0;bottom:0;width:78%;height:78%;border:1px solid var(--brand);z-index:0}
.dg-frame img{position:relative;width:100%;aspect-ratio:3/3.5;object-fit:cover;z-index:1}
.dg-frame .wp-block-image{margin:0}
.dg-figcap{margin:16px 0 0;padding-left:16px;border-left:2px solid var(--brand)}
.dg-figcap strong{font-family:"DM Serif Display",Georgia,serif;font-weight:400;font-size:1.25rem;color:var(--ink);display:block}
.dg-figcap em{font-size:.88rem;color:var(--muted);font-style:italic}
p.dg-quote{font-family:"DM Serif Display",Georgia,serif;font-size:1.35rem;line-height:1.4;color:var(--ink);margin:28px 0 0;padding-left:20px;border-left:2px solid var(--brand)}
@media(max-width:920px){.dg-duo.wp-block-columns,.dg-duo.dg-flip.wp-block-columns{grid-template-columns:1fr}.dg-duo.dg-flip .wp-block-column:first-child{order:1}.dg-duo.dg-flip .wp-block-column:last-child{order:2}.dg-dfig{max-width:440px}}
/* Prüfsiegel */
.dg-seal{width:84px;height:84px;border-radius:50%;border:2px solid var(--brand-dark);display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;font-family:"DM Serif Display",Georgia,serif;font-size:.52rem;letter-spacing:.02em;line-height:1.15;color:var(--brand-dark);position:relative;transition:transform .4s var(--ease),border-color .3s,color .3s;background:#fff;overflow:hidden;padding:6px;margin:0}
.dg-seal::before{content:"";position:absolute;inset:6px;border:1px dashed var(--brand-dark);border-radius:50%;opacity:.5;transition:border-color .3s}
.dg-seal strong{font-size:.92rem;font-weight:400;display:block;margin:1px 0}
.dg-seal.dg-seal-sm strong{font-size:.64rem}
.dg-sealwrap{position:absolute;top:-18px;right:-18px;margin:0;background:#fff;border-radius:50%;padding:5px;box-shadow:0 10px 26px -12px rgba(28,36,21,.4);z-index:3}
.dg-dfig:hover .dg-seal,.dg-seal:hover{transform:rotate(18deg);border-color:var(--brand);color:var(--brand)}
.dg-dfig:hover .dg-seal::before{border-color:var(--brand)}
/* ---------- Leistungen: Aktenordner-Zeilen mit gefülltem Ziffern-Medaillon ---------- */
.dg-rows{border-top:1px solid var(--line-strong);margin-top:20px;counter-reset:dgrow}
.dg-rows>*{margin-block-start:0}
.dg-rowi>*{margin-block-start:0}
.dg-rowi{position:relative;display:grid;grid-template-columns:90px 1.1fr 1.3fr;gap:26px;padding:30px 0;border-bottom:1px solid var(--line);align-items:start;transition:background .3s;counter-increment:dgrow}
.dg-rowi:hover{background:color-mix(in srgb,var(--surface) 55%,transparent)}
.dg-rowi::after{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--eff);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.dg-rowi:hover::after{transform:scaleX(1)}
.dg-rowi::before{content:counter(dgrow,decimal-leading-zero);width:54px;height:54px;margin-left:8px;border-radius:50%;background:color-mix(in srgb,var(--brand-dark) 60%,var(--brand-mid) 40%);color:#fff;display:flex;align-items:center;justify-content:center;font-family:"DM Serif Display",Georgia,serif;font-size:1.3rem;transition:background .3s var(--ease),transform .3s var(--ease)}
.dg-rowi:hover::before{background:var(--brand);transform:scale(1.06)}
.dg-rowi h4{font-size:1.32rem;margin:0 0 6px}
.dg-rowi .dg-rsub{color:var(--muted);font-size:.94rem;margin:0}
.dg-rowi .dg-rd p{color:var(--muted);font-size:.94rem;margin:0 0 10px}
@media(max-width:820px){.dg-rowi{grid-template-columns:56px 1fr}.dg-rowi .dg-rd{grid-column:2}.dg-rowi::before{width:44px;height:44px;font-size:1.1rem}}
/* ---------- Ablauf: rotierende gestrichelte Ziffern-Ringe ---------- */
.dg-steps{display:grid;grid-template-columns:repeat(6,1fr);gap:22px;margin-top:34px;position:relative;counter-reset:dgstep}
.dg-steps>*{margin-block-start:0}
.dg-steps::before{content:"";position:absolute;left:0;right:0;top:20px;height:2px;background:var(--line)}
.dg-step{position:relative;text-align:center;counter-increment:dgstep}
.dg-step::before{content:"";display:block;width:40px;height:40px;margin:0 auto 28px;border-radius:50%;border:2px dashed var(--brand);background:var(--bg);animation:dg-spin 22s linear infinite;position:relative;z-index:1}
.dg-step::after{content:counter(dgstep,decimal-leading-zero);position:absolute;top:0;left:50%;transform:translateX(-50%);width:40px;height:40px;display:grid;place-items:center;font-family:"DM Serif Display",Georgia,serif;font-size:1.02rem;color:var(--brand-dark);z-index:2}
.dg-step:hover::before{animation-duration:2.2s}
.dg-step h4{font-size:1.02rem;margin:0 0 6px}
.dg-step p{font-size:.85rem;color:var(--muted);margin:0}
@media(max-width:1000px){.dg-steps{grid-template-columns:repeat(3,1fr);gap:34px 20px}.dg-steps::before{display:none}}
@media(max-width:600px){.dg-steps{grid-template-columns:1fr 1fr}}
/* ---------- Vermarktungs-Ablauf: kompakte Zeilen mit Kreisen ---------- */
.dg-zrows{counter-reset:dgz;margin-top:12px}
.dg-zrow{position:relative;display:grid;grid-template-columns:100px 1fr;gap:32px;padding:26px 0 26px;border-top:1px solid var(--line);align-items:center;counter-increment:dgz}
.dg-zrows .dg-zrow:first-child{border-top:none}
.dg-zrow::before{content:"";width:64px;height:64px;border-radius:50%;background:var(--surface);border:2px dashed var(--brand);animation:dg-spin 30s linear infinite;transition:background .3s,border-color .3s;justify-self:start}
.dg-zrow::after{content:counter(dgz,decimal-leading-zero);position:absolute;left:0;top:50%;transform:translateY(-50%);width:68px;height:64px;display:grid;place-items:center;font-family:"DM Serif Display",Georgia,serif;font-size:1.5rem;color:var(--brand-dark);transition:color .3s}
.dg-zrow:hover::before{background:var(--brand);border-color:var(--brand);animation-duration:3s}
.dg-zrow:hover::after{color:#fff}
.dg-zrow h4{font-size:1.22rem;margin:0 0 8px}
.dg-zrow p{margin:0}
.dg-zrow ul.dg-checks{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:12px}
.dg-zrow ul.dg-checks li{font-size:.92rem;padding-left:26px}
@media(max-width:760px){.dg-zrow{grid-template-columns:72px 1fr;gap:20px}.dg-zrow::before{width:52px;height:52px}.dg-zrow::after{width:56px;height:52px;font-size:1.2rem}}
/* „Unser Ziel": Bildband mit aufgesetzter Zitat-Karte */
.dg-zband{position:relative;margin-top:44px;overflow:hidden}
.dg-zband .dg-zb-imgwrap{margin:0}
.dg-zband .dg-zb-imgwrap img{width:100%;height:300px;object-fit:cover;filter:brightness(.5)}
.dg-zband .dg-zb-card{position:relative;margin:-86px auto 0;max-width:680px;background:#fff;padding:38px 44px;text-align:center;box-shadow:0 30px 60px -30px rgba(28,36,21,.4)}
.dg-zband .dg-zb-card p{font-family:"DM Serif Display",Georgia,serif;font-size:clamp(1.1rem,2vw,1.5rem);color:var(--ink);line-height:1.42;margin:0}
.dg-zband .dg-zb-card em{display:block;margin-top:12px;font-style:italic;color:var(--muted);font-size:.92rem;font-family:"DM Sans",system-ui,sans-serif}
@media(max-width:760px){.dg-zband .dg-zb-card{margin-top:-50px;padding:28px 26px}}
/* ---------- Referenzen: Vorher/Nachher als Klassen-Jalousie ----------
Das Nachher öffnet sich in neun Lamellen – eine je Effizienzklasse, gestaffelt
von Rot nach Grün. Ausgelöst wird über den Schalter am Bild (deshalb auch per
Touch bedienbar) und zusätzlich per Mauszeiger. Die Lamellen baut
assets/js/jalousie.js aus dem Nachher-Bild; ohne JavaScript bleibt eine
schlichte Blende bei Mauskontakt. */
.dg-gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:26px}
.dg-pair{position:relative;background:var(--card);border:1px solid var(--line-strong);transition:box-shadow .3s var(--ease)}
.dg-pair:hover{box-shadow:0 20px 44px -26px rgba(28,36,21,.3)}
.dg-halves{position:relative;aspect-ratio:16/10;overflow:hidden}
.dg-halves img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Ausgangszustand und Fallback ohne JavaScript. */
.dg-halves .dg-nachher{opacity:0;transition:opacity .45s var(--ease)}
.dg-pair:hover .dg-halves:not(.dg-jal) .dg-nachher{opacity:1}
/* Jede Lamelle zeigt ihren Ausschnitt desselben Bildes: 900 % breit und um
--i Spalten nach links versetzt, sodass die neun Streifen wieder ein
lückenloses Foto ergeben. */
.dg-halves.dg-jal .dg-lamellen{position:absolute;inset:0;display:flex;z-index:2}
.dg-halves.dg-jal .dg-lamelle{position:relative;flex:1;overflow:hidden}
.dg-halves.dg-jal .dg-lamelle img{inset:0 auto auto calc(var(--i) * -100%);width:900%;max-width:900%;height:100%;clip-path:inset(0 0 100% 0)}
/* Unterkante in der Farbe der jeweiligen Effizienzklasse – H links, A+ rechts. */
.dg-halves.dg-jal .dg-lamelle::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--c);opacity:0;transition:opacity .3s var(--ease)}
.dg-halves.dg-jal.dg-offen .dg-lamelle img{clip-path:inset(0);transition:clip-path .42s var(--ease);transition-delay:calc(var(--i) * 45ms)}
.dg-halves.dg-jal.dg-offen .dg-lamelle::after{opacity:1;transition-delay:calc(var(--i) * 45ms + .2s)}
/* Zurück läuft die Staffelung andersherum und schneller – der Weg zurück ist
Aufräumen, nicht Auftritt. */
.dg-halves.dg-jal:not(.dg-offen) .dg-lamelle img{transition:clip-path .3s var(--ease);transition-delay:calc((8 - var(--i)) * 30ms)}
/* Der Schalter liegt über dem Kachel-Link (z-index 3) – sonst wäre er auf den
verlinkten Kacheln der Galerie nicht anklickbar. */
.dg-jal-knopf{position:absolute;top:14px;right:14px;z-index:4;border:0;background:rgba(12,14,6,.68);color:#fff;font:700 .7rem/1 "DM Sans",system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;padding:9px 14px;cursor:pointer;transition:background .25s var(--ease),color .25s var(--ease)}
/* Nur bei echtem Zeigergerät: auf Touch bliebe der invertierte Zustand nach
dem Tippen kleben. */
@media (hover:hover){.dg-jal-knopf:hover{background:#fff;color:var(--brand-dark)}}
.dg-jal-knopf:focus-visible{outline:2px solid #fff;outline-offset:2px}
/* Ohne Mauszeiger ist der Schalter der einzige Weg zum Nachher-Bild – er
bekommt dort eine komfortable Trefferfläche. */
@media (hover:none){.dg-jal-knopf{padding:13px 16px}}
.dg-halves .dg-tag{position:absolute;bottom:14px;z-index:3;background:rgba(12,14,6,.7);color:#fff;font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding:8px 14px;pointer-events:none}
.dg-halves .dg-tag.dg-l{left:14px;transition:opacity .3s var(--ease) .45s}
.dg-halves .dg-tag.dg-r{right:14px;opacity:0;transition:opacity .3s var(--ease) .45s}
.dg-halves.dg-offen .dg-tag.dg-l{opacity:0}
.dg-halves.dg-offen .dg-tag.dg-r{opacity:1}
.dg-pair:hover .dg-halves:not(.dg-jal) .dg-tag.dg-l{opacity:0}
.dg-pair:hover .dg-halves:not(.dg-jal) .dg-tag.dg-r{opacity:1}
.dg-pair .dg-cap{padding:16px 18px 18px;font-size:.9rem;font-weight:600;color:var(--ink)}
.dg-pair .dg-cap .dg-note{margin:6px 0 0;font-size:.86rem;font-weight:400;color:var(--muted);line-height:1.6}
/* Verlinkte Kachel: der Titel-Link zieht sich über die gesamte Kachel, damit auch
das Bild klickbar ist – ohne verschachtelte Anker. Der Pfeil ist dasselbe
Affordance-Motiv wie bei .dg-more. */
.dg-pair:has(.dg-cap a){cursor:pointer}
.dg-pair .dg-cap a{color:var(--ink);transition:color .25s}
.dg-pair .dg-cap a::before{content:"";position:absolute;inset:0;z-index:3}
.dg-pair .dg-cap a::after{content:"→";margin-left:.45em;display:inline-block;transition:transform .25s var(--ease)}
.dg-pair:hover .dg-cap a,.dg-pair .dg-cap a:focus-visible{color:var(--brand-mid)}
.dg-pair:hover .dg-cap a::after{transform:translateX(5px)}
.dg-pair:has(.dg-cap a:focus-visible){outline:2px solid var(--brand-mid);outline-offset:3px}
.dg-pair .dg-cap a:focus-visible{outline:none}
@media(max-width:760px){.dg-gallery{grid-template-columns:1fr}}
.dg-trust{display:flex;flex-wrap:wrap;gap:26px;justify-content:center;margin-top:44px}
.dg-trust .dg-seal strong{font-size:.85rem}
/* ---------- Team: liegende Karten · Standard grau, Hover farbig ---------- */
.dg-team{display:grid;grid-template-columns:1fr 1fr;gap:26px;grid-auto-rows:1fr}
/* WordPress legt auf Nicht-erste-Kinder eines Flow-Group einen margin-block-start (blockGap),
der die Karten 2–4 in ihrer Rasterzelle nach unten schiebt → Reihen versetzt. Hier neutralisiert;
der Abstand kommt aus grid gap. grid-auto-rows:1fr + height:100% halten alle Karten gleich hoch. */
.dg-team>*{margin-block-start:0}
.dg-team .dg-tm{height:100%}
.dg-tm{display:grid;grid-template-columns:132px 1fr;gap:22px;border:1px solid var(--line-strong);background:var(--card);padding:24px;align-items:center;transition:box-shadow .3s,transform .3s var(--ease),border-color .3s}
.dg-tm:hover{transform:translateY(-4px);box-shadow:0 22px 44px -26px rgba(28,36,21,.28);border-color:var(--brand)}
.dg-ph{width:132px;height:132px;border-radius:50%;overflow:hidden;border:3px solid var(--brand-soft);margin:0}
.dg-ph img{width:100%;height:100%;object-fit:cover;filter:grayscale(85%) brightness(.96);transition:filter .5s var(--ease),transform .5s var(--ease)}
.dg-tm:hover .dg-ph img{filter:grayscale(0) brightness(1);transform:scale(1.05)}
.dg-tm-name{font-family:"DM Serif Display",Georgia,serif;font-size:1.32rem;color:var(--ink);margin:0}
.dg-tm-name strong{font-weight:400}
.dg-tm-fn{font-size:.84rem;color:var(--muted);margin:6px 0 12px}
/* Kontaktzeile: Mailadresse über Durchwahl. Gestapelt statt nebeneinander, damit die
lange Adresse auch in der schmalen Textspalte (zwei Karten nebeneinander, ~200px)
nie mitten im Wort umbricht. Karten ohne Durchwahl zeigen einfach nur die Adresse. */
.dg-row2{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.dg-row2 p{margin:0}
.dg-mail,.dg-tel{font-size:.8rem;color:var(--muted);max-width:100%;overflow-wrap:break-word}
.dg-mail a,.dg-tel a{transition:color .25s var(--ease)}
.dg-mail a:hover,.dg-tel a:hover{color:var(--brand-mid);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--brand)}
/* Ungerade Kartenzahl: die letzte Karte allein in ihrer Zeile mittig setzen,
statt sie links mit leerer Hälfte stehen zu lassen. Greift automatisch
nicht mehr, sobald wieder eine gerade Anzahl Personen gepflegt ist. */
.dg-team .dg-tm:last-child:nth-child(odd){grid-column:1/-1;max-width:calc(50% - 13px);justify-self:center}
@media(max-width:900px){.dg-team{grid-template-columns:1fr}.dg-team .dg-tm:last-child:nth-child(odd){max-width:none}}
@media(max-width:480px){.dg-tm{grid-template-columns:1fr;text-align:center}.dg-ph{margin:0 auto}.dg-row2{align-items:center}}
/* ---------- FAQ: nummeriertes Einspalten-Akkordeon (core/details) ---------- */
.dg-faqlist{max-width:800px;margin:8px auto 0;counter-reset:dgfaq}
.dg-faq-group{font-size:.72rem;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--brand-mid);margin:34px 0 0;text-align:center}
.dg-faqlist .dg-faq-group:first-child{margin-top:0}
details.dg-acc{border:none;border-bottom:1px solid var(--line);counter-increment:dgfaq;margin:0;padding:0}
.dg-acc summary{list-style:none;cursor:pointer;padding:22px 4px;display:flex;gap:18px;align-items:center;transition:color .2s;font-family:"DM Serif Display",Georgia,serif;font-weight:400;font-size:1.12rem;color:var(--ink)}
.dg-acc summary:hover{color:var(--brand-dark)}
.dg-acc summary::-webkit-details-marker{display:none}
.dg-acc summary::before{content:counter(dgfaq,decimal-leading-zero);flex:none;width:36px;height:36px;border-radius:50%;border:1.5px solid var(--brand);color:var(--brand-dark);display:grid;place-items:center;font-size:.8rem;font-weight:700;font-family:"DM Sans",system-ui,sans-serif;transition:.25s var(--ease)}
.dg-acc[open] summary::before{background:var(--brand);color:#fff;border-color:var(--brand)}
.dg-acc summary::after{content:"+";color:var(--brand);font-size:1.25rem;flex:none;margin-left:auto;transition:transform .25s var(--ease);font-family:"DM Sans",system-ui,sans-serif}
.dg-acc[open] summary::after{transform:rotate(45deg)}
.dg-acc>*:not(summary){padding:0 4px 22px 54px;color:var(--muted);font-size:.94rem;margin:0}
@media(max-width:600px){.dg-acc>*:not(summary){padding-left:4px}}
/* ---------- Kontakt (Seeglas-Layout) ---------- */
.dg-contact{background:var(--surface)}
.dg-cgrid.wp-block-columns{display:grid;grid-template-columns:.95fr 1.05fr;gap:60px;align-items:start;margin:0}
.dg-cinfo{margin-top:26px}
.dg-cinfo .dg-it{position:relative;padding:16px 0 16px 34px;border-top:1px solid var(--line-strong);margin:0}
.dg-cinfo .dg-it:first-of-type{border-top:none;padding-top:0}
.dg-cinfo .dg-it strong{display:block;font-weight:700;color:var(--ink)}
.dg-cinfo .dg-it{font-size:.94rem}
.dg-cinfo .dg-it::before{content:"";position:absolute;left:0;top:1.15em;width:20px;height:20px;background:var(--brand-dark);-webkit-mask:var(--dg-icon) no-repeat center/contain;mask:var(--dg-icon) no-repeat center/contain}
.dg-cinfo .dg-it:first-of-type::before{top:.15em}
.dg-it-pin{--dg-icon:url('data:image/svg+xml;utf8,')}
.dg-it-phone{--dg-icon:url('data:image/svg+xml;utf8,')}
.dg-it-mail{--dg-icon:url('data:image/svg+xml;utf8,')}
.dg-it-clock{--dg-icon:url('data:image/svg+xml;utf8,')}
/* Formular (auch Contact-Form-7-Markup) */
.dg-cform form,form.dg-cform{display:grid;grid-template-columns:1fr 1fr;gap:16px;background:#fff;padding:34px;border:1px solid var(--line-strong);box-shadow:0 24px 58px -30px rgba(28,36,21,.24)}
.dg-field.dg-full,.dg-cform .dg-full{grid-column:1/-1}
.dg-field label{display:block;font-size:.76rem;font-weight:700;letter-spacing:.08em;margin-bottom:6px;color:var(--ink)}
.dg-field input,.dg-field select,.dg-field textarea{width:100%;padding:13px 14px;border:1.5px solid var(--line-strong);background:var(--surface);color:var(--ink);font:inherit;font-size:.95rem;transition:border-color .16s,box-shadow .16s;border-radius:0;box-sizing:border-box}
.dg-field select option{color:var(--ink)}
.dg-field input:focus,.dg-field select:focus,.dg-field textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-soft)}
.dg-field .wpcf7-form-control-wrap{display:block}
.dg-check-row{display:flex;gap:10px;font-size:.86rem;color:var(--muted);align-items:flex-start}
.dg-check-row input{margin-top:4px;accent-color:var(--brand);width:auto}
.dg-check-row .wpcf7-list-item{margin:0}
.dg-check-row .wpcf7-list-item label{display:flex;gap:10px;align-items:flex-start}
.dg-cform .wpcf7-not-valid-tip{font-size:.8rem;color:var(--eff-red);margin-top:4px}
.dg-cform .wpcf7-response-output{grid-column:1/-1;border:1.5px solid var(--brand);padding:12px 14px;margin:0;font-size:.9rem;color:var(--ink)}
.dg-cform .wpcf7-spinner{margin:0 0 0 12px}
@media(max-width:900px){.dg-cgrid.wp-block-columns{grid-template-columns:1fr}.dg-cform form,form.dg-cform{grid-template-columns:1fr}}
/* ---------- CTA-Band vor dem Footer (Cover-Block) ---------- */
.dg-cta{position:relative;overflow:hidden;background:var(--brand-deep)!important;padding:0;min-height:0}
.dg-cta .wp-block-cover__image-background{position:absolute;inset:-16% 0;width:100%;height:132%;object-fit:cover;opacity:.16!important;will-change:transform}
.dg-cta .wp-block-cover__background{display:none}
.dg-cta .wp-block-cover__inner-container{position:relative;z-index:1;padding:80px 32px;text-align:center;max-width:none}
.dg-cta h2{color:#fff;margin:0 0 14px}
.dg-cta h2 em{color:var(--sheen)}
.dg-cta p{color:rgba(255,255,255,.78);max-width:56ch;margin:0 auto 28px}
.dg-cta .wp-block-buttons{justify-content:center}
/* ---------- Footer ---------- */
.dg-footer{background:var(--brand-deep);color:rgba(255,255,255,.62);padding:64px 0 26px;position:relative}
.dg-footer::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--eff);opacity:.85}
.dg-fgrid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:34px}
.dg-footer .dg-fcol h2,.dg-footer h5{color:#fff;margin:0 0 16px;font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;font-family:"DM Sans",system-ui,sans-serif;font-weight:700;line-height:1.4}
.dg-footer .dg-fcol p{margin:0}
.dg-footer .dg-fcol a{display:block;color:rgba(255,255,255,.62);padding:5px 0;font-size:.92rem;transition:color .16s;text-decoration:none}
.dg-footer .dg-fcol a:hover{color:var(--sheen)}
.dg-flogo{width:230px;max-width:100%;margin:0 0 18px}
.dg-flogo img{width:100%}
.dg-fclaim{font-family:"DM Serif Display",Georgia,serif;font-size:1.1rem;color:#fff;margin:0}
.dg-fbottom{border-top:1px solid rgba(255,255,255,.14);margin-top:44px;padding-top:22px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.84rem;opacity:.65}
.dg-fbottom p{margin:0}
@media(max-width:880px){.dg-fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.dg-fgrid{grid-template-columns:1fr}}
/* ---------- To-Top ---------- */
.dg-totop{position:fixed;right:26px;bottom:26px;z-index:70;width:46px;height:46px;background:var(--brand);color:#fff;display:grid;place-items:center;cursor:pointer;border:none;opacity:0;pointer-events:none;transition:opacity .3s,background .2s,transform .2s var(--ease);border-radius:0;padding:0}
.dg-totop.show{opacity:1;pointer-events:auto}
.dg-totop:hover{background:var(--brand-dark);transform:translateY(-3px)}
.dg-totop svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transform:rotate(-90deg)}
/* ---------- „Licht ins Dunkel": dunkle Lichtbühne mit Cursor-Lichtkegel ----------
Tiefdunkle Bühne; ein weicher Lichtkegel (::before, gesteuert über --mx/--my aus
lichtkegel.js) folgt dem Cursor mit Nachlauf. Karten = Glasflächen mit rotierendem
Ziffern-Ring (CSS-Counter, Kreis-Leitmotiv). Touch/reduced-motion: Licht ruht mittig. */
.dg-licht{position:relative;overflow:hidden;background:var(--brand-deep)}
.dg-licht::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:
radial-gradient(420px circle at var(--mx,50%) var(--my,38%),rgba(201,222,154,.16),transparent 62%),
radial-gradient(190px circle at var(--mx,50%) var(--my,38%),rgba(249,178,0,.08),transparent 70%)}
.dg-licht .dg-wrap{position:relative;z-index:1}
.dg-licht .dg-kicker{color:var(--sheen)}
.dg-licht h2{color:#fff;max-width:22ch;margin:0}
.dg-licht h2 em{color:var(--sheen)}
.dg-licht .dg-lead{color:rgba(255,255,255,.72)}
.dg-lhead{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:end;margin-bottom:56px}
@media(max-width:880px){.dg-lhead{grid-template-columns:1fr;gap:20px}}
.dg-lgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;counter-reset:dglicht}
.dg-lgrid>*{margin-block-start:0}
.dg-lcard{position:relative;display:flex;flex-direction:column;gap:10px;padding:112px 26px 28px;counter-increment:dglicht;border:1px solid rgba(255,255,255,.13);background-color:rgba(255,255,255,.045);background-image:var(--eff);background-repeat:no-repeat;background-position:top left;background-size:0 2px;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);transition:transform .35s var(--ease),border-color .3s var(--ease),background-color .3s var(--ease),background-size .5s var(--ease)}
.dg-lcard>*{margin-block-start:0}
.dg-lcard>p:last-child{margin-block-start:auto}
.dg-lcard:hover{transform:translateY(-6px);border-color:rgba(201,222,154,.55);background-color:rgba(255,255,255,.075);background-size:100% 2px}
/* rotierender gestrichelter Ziffern-Ring (::before) + stehende Ziffer (::after) */
.dg-lcard::before{content:"";position:absolute;top:30px;left:26px;width:58px;height:58px;border-radius:50%;border:1.5px dashed rgba(201,222,154,.75);animation:dg-spin 42s linear infinite}
.dg-lcard::after{content:counter(dglicht,decimal-leading-zero);position:absolute;top:30px;left:26px;width:58px;height:58px;display:grid;place-items:center;font-family:"DM Serif Display",Georgia,serif;font-size:1.25rem;color:var(--sheen)}
.dg-lcard:hover::before{animation-duration:7s}
.dg-lcard h3{color:#fff;font-size:1.5rem;margin:0}
.dg-lcard .dg-lclaim{font-size:.94rem;color:rgba(255,255,255,.72);margin:0}
.dg-lcard ul.dg-checks{margin:8px 0 18px}
.dg-lcard ul.dg-checks li{color:rgba(255,255,255,.88);font-size:.94rem}
.dg-lcard ul.dg-checks li::before{box-shadow:0 0 0 4px rgba(255,255,255,.14)}
.dg-lcard .dg-more{color:var(--sheen)}
.dg-lfoot{margin-top:46px;display:flex;align-items:center;gap:16px;color:rgba(255,255,255,.55);font-size:.86rem}
.dg-lfoot p{margin:0}
.dg-lfoot .dg-dotline{width:44px;height:2px;background:var(--eff);flex:none}
@media(max-width:980px){.dg-lgrid{grid-template-columns:1fr;max-width:520px;margin:0 auto}}
/* ---------- „Energieausweis": interaktive Effizienzklassen-Skala (A+–G) ----------
Klick/Hover/Fokus auf eine Klasse wechselt die Erläuterung (energieausweis.js).
Nur transform/opacity; reduced-motion deaktiviert die Balken-Transitions. */
.dg-eff{background:var(--surface)}
.dg-eff-grid{display:grid;grid-template-columns:1fr 1fr;gap:76px;align-items:center}
.dg-label-rows{display:flex;flex-direction:column;gap:9px}
.dg-lvl{appearance:none;background:none;border:0;width:100%;display:flex;align-items:center;padding:0;cursor:pointer;text-align:left;font-family:inherit}
.dg-lvl .dg-lk{width:46px;flex:none;padding-right:14px;text-align:right;font-size:.8rem;font-weight:700;letter-spacing:.05em;color:var(--ink);transition:color .25s,transform .3s var(--ease)}
.dg-lvl .dg-lb{display:block;height:30px;width:var(--w);background:var(--c);clip-path:polygon(0 0,calc(100% - 16px) 0,100% 50%,calc(100% - 16px) 100%,0 100%);transform-origin:left center;transition:transform .4s var(--ease),box-shadow .35s;box-shadow:0 0 0 0 rgba(28,36,21,0)}
.dg-lvl:hover .dg-lb,.dg-lvl:focus-visible .dg-lb,.dg-lvl.on .dg-lb{transform:scaleX(1.07);box-shadow:0 10px 22px -12px rgba(28,36,21,.55)}
.dg-lvl:hover .dg-lk,.dg-lvl:focus-visible .dg-lk,.dg-lvl.on .dg-lk{color:var(--brand-dark);transform:translateX(-3px)}
.dg-lvl-cap{margin-top:26px;min-height:104px;border-left:3px solid var(--brand);padding:8px 0 8px 22px}
.dg-lvl-cap strong{display:block;font-family:"DM Serif Display",Georgia,serif;font-weight:400;font-size:1.45rem;color:var(--ink)}
.dg-lvl-cap p{margin:5px 0 0;font-size:.96rem;max-width:44ch}
.dg-eff-txt .dg-lead{margin:18px 0 30px}
@media(max-width:920px){.dg-eff-grid{grid-template-columns:1fr;gap:48px}}
/* ---------- „Fragen & Antworten"-Teaser (Einstieg / Frage-Antwort / Beweis) ---------- */
/* B1: zentrierte Einstiegsfrage */
.dg-ask-intro{padding:92px 0 26px}
.dg-ask-intro .dg-lead{margin:20px auto 0}
/* B2: Frage (großes Serifen-Zitat) links, ruhige Antwort rechts */
.dg-qa-list{padding:10px 0 92px}
.dg-qa{position:relative;display:grid;grid-template-columns:.92fr 1.08fr;gap:60px;align-items:center;padding:54px 0;border-top:1px solid var(--line)}
.dg-qa-list .dg-qa:last-child{border-bottom:1px solid var(--line)}
.dg-qa::before{content:"";position:absolute;left:0;top:-1px;height:2px;width:0;background:var(--eff);transition:width .55s var(--ease)}
.dg-qa:hover::before{width:100%}
.dg-qa-q{position:relative;padding:46px 0 0 10px}
.dg-qa-mark{position:absolute;left:-6px;top:-.75em;font-family:"DM Serif Display",Georgia,serif;font-size:9.5rem;line-height:1;background:var(--eff);-webkit-background-clip:text;background-clip:text;color:transparent;pointer-events:none}
.dg-qa-qtext{position:relative;font-family:"DM Serif Display",Georgia,serif;font-size:clamp(1.75rem,3vw,2.5rem);line-height:1.22;color:var(--ink);margin:0}
.dg-qa-qtext em{font-style:italic;color:var(--brand-mid)}
.dg-qa-a h3{font-size:clamp(1.35rem,2.1vw,1.75rem);margin:0 0 12px}
.dg-qa-a p{max-width:58ch;margin:0 0 14px}
.dg-qa-a ul.dg-checks{display:flex;flex-direction:column;gap:8px;margin-top:2px}
.dg-qa-a ul.dg-checks li{font-size:.92rem;padding-left:26px}
.dg-qa-actions{display:flex;align-items:center;gap:16px;margin-top:26px;flex-wrap:wrap}
.dg-qa-actions .dg-qa-badge,.dg-qa-actions .wp-block-buttons{margin:0}
.dg-qa-actions .wp-block-button__link{padding:16px 22px}
.dg-qa-badge{display:inline-block;font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:var(--brand);padding:6px 14px;border-radius:999px;margin:0}
@media(max-width:920px){
.dg-qa-list{padding-bottom:70px}
.dg-qa{grid-template-columns:1fr;gap:20px;padding:44px 0}
.dg-qa-q{padding-top:40px}
.dg-qa-mark{font-size:7rem;left:0}
}
/* B3: Beweis – Referenzen-Text + Iris-Wipe-Paar auf heller Fläche */
.dg-proof{display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;align-items:center}
.dg-proof-h{font-size:clamp(1.6rem,2.8vw,2.2rem);margin:0 0 16px}
.dg-proof-txt p{max-width:52ch;margin:0 0 24px}
.dg-proof-seals{display:flex;gap:16px;flex-wrap:wrap;margin-top:28px}
.dg-proof-seals .dg-seal{width:68px;height:68px;font-size:.44rem;padding:5px}
.dg-proof-seals .dg-seal strong{font-size:.72rem}
@media(max-width:920px){.dg-proof{grid-template-columns:1fr;gap:34px}}
/* ================= Anti-Slop-Charakterebene =================
Markengebundene Details statt generischer Muster: Das Dachlinien-Motiv des Logos
und die Energieeffizienz-Skala ziehen sich als roter Faden durch Kicker, Laufband,
Scroll-Fortschritt und Footer. Alle Bewegungen respektieren prefers-reduced-motion. */
/* Kicker-Marke: Dachlinie aus dem Logo im Skala-Verlauf statt neutraler Linie */
.dg-kicker::before{content:"";width:36px;height:13px;background:var(--eff);-webkit-mask:url('data:image/svg+xml;utf8,') no-repeat center/contain;mask:url('data:image/svg+xml;utf8,') no-repeat center/contain}
/* Scroll-Fortschritt als Energieskala am oberen Rand (progressive enhancement) */
@supports (animation-timeline: scroll()){
@media (prefers-reduced-motion: no-preference){
body::before{content:"";position:fixed;top:0;left:0;right:0;height:3px;background:var(--eff);transform-origin:left;transform:scaleX(0);animation:dg-pageprogress linear both;animation-timeline:scroll(root);z-index:99;pointer-events:none}
}
}
@keyframes dg-pageprogress{to{transform:scaleX(1)}}
/* Hero-Einstieg: Kachel-Texte treten gestaffelt auf */
@media (prefers-reduced-motion: no-preference){
.dg-htile .dg-tile-inner{animation:dg-tilein .9s var(--ease) .25s backwards}
.dg-hero-grid .dg-htile:nth-child(2) .dg-tile-inner{animation-delay:.42s}
.dg-hero-grid .dg-htile:nth-child(3) .dg-tile-inner{animation-delay:.59s}
}
@keyframes dg-tilein{from{opacity:0;transform:translateY(22px)}}
/* Laufband-Separatoren wandern durch die Skala-Farben */
.dg-ticker span:nth-of-type(5n+1)::after{color:var(--eff-red)}
.dg-ticker span:nth-of-type(5n+2)::after{color:var(--eff-orange)}
.dg-ticker span:nth-of-type(5n+3)::after{color:var(--eff-yellow)}
.dg-ticker span:nth-of-type(5n+4)::after{color:var(--eff-lime)}
.dg-ticker span:nth-of-type(5n+5)::after{color:var(--eff-green)}
/* ---------- Referenz-Detailseiten: Kennzahlen, Klassenwechsel, Maßnahmen ----------
Die Energieskala ist das Leitmotiv der Marke – hier trägt sie den eigentlichen
Beweis: den Sprung von der alten in die neue Effizienzklasse. Der Verlaufspfeil
wächst per clip-path von links, wie Nav-Unterstrich und Button-Rahmen. */
/* Kennzahlen-Band: Haarlinien entstehen aus dem 1px-Gap über der Rahmenfläche */
.dg-kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;background:var(--line-strong);border:1px solid var(--line-strong);margin-top:34px}
/* WordPress setzt blockGap als margin-block-start auf alle Geschwister ab dem
zweiten – im Grid versetzt das die Kacheln gegeneinander. */
.dg-kpi>*{margin-block-start:0}
.dg-kpi-i{background:var(--card);padding:30px 26px}
.dg-kpi-i>*{margin-block-start:0}
.dg-kpi-l{font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--brand-mid);margin:0 0 12px}
.dg-kpi-v{font-family:"DM Serif Display",Georgia,serif;font-size:clamp(1.9rem,3.4vw,2.6rem);line-height:1.04;color:var(--ink);margin:0}
.dg-kpi-n{font-size:.86rem;color:var(--muted);margin:10px 0 0;line-height:1.55}
@media(max-width:760px){.dg-kpi{grid-template-columns:1fr}}
/* Klassenwechsel auf der Skala */
.dg-classbar{margin-top:52px}
.dg-cb-head{display:flex;align-items:center;gap:20px;margin:0 0 22px;font-family:"DM Serif Display",Georgia,serif;font-size:clamp(1.6rem,3vw,2.2rem);line-height:1;color:var(--muted)}
.dg-cb-head .dg-cb-to{color:var(--ink)}
.dg-cb-arrow{flex:none;width:78px;height:3px;background:var(--eff);clip-path:inset(0 100% 0 0);transition:clip-path .9s var(--ease) .25s}
.dg-reveal.in .dg-cb-arrow{clip-path:inset(0)}
.dg-cb-scale{display:flex;gap:4px;list-style:none;padding:0;margin:0}
.dg-cb-scale li{flex:1}
.dg-cb-bar{display:block;height:26px;background:var(--c);opacity:.26;transform-origin:bottom center;transition:opacity .55s var(--ease),transform .55s var(--ease)}
.dg-cb-k{display:block;text-align:center;font-size:.72rem;font-weight:700;letter-spacing:.05em;color:var(--muted);margin-top:9px}
.dg-cb-scale .is-from .dg-cb-bar{opacity:.62}
.dg-cb-scale .is-from .dg-cb-k{color:var(--body)}
.dg-reveal.in .dg-cb-scale .is-to .dg-cb-bar{opacity:1;transform:scaleY(1.55)}
.dg-cb-scale .is-to .dg-cb-k{color:var(--ink)}
.dg-cb-cap{margin:16px 0 0;font-size:.8rem;color:var(--muted)}
/* Maßnahmen als Marken-Chips */
.dg-measures{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:26px 0 0}
.dg-measures li{border:1px solid var(--line-strong);background:var(--card);padding:9px 16px;font-size:.84rem;color:var(--body);transition:border-color .3s,transform .3s var(--ease)}
.dg-measures li:hover{border-color:var(--brand);transform:translateY(-2px)}
/* Impressum und Datenschutz: langer Fließtext braucht ein lesbares Satzmaß,
nicht die volle Inhaltsbreite. */
.dg-legaltext{max-width:74ch}
.dg-legaltext h2{margin-top:2.2em}
.dg-legaltext h3{margin-top:1.6em}
.dg-legaltext ul{color:var(--body)}
.dg-legaltext li{margin-bottom:.5em}
/* Vor/Zurück zwischen den Projektseiten. Wie beim Kennzahlen-Band entstehen die
Trennlinien aus dem 1px-Gap über der Rahmenfläche. */
.dg-pnav{display:grid;grid-template-columns:1fr auto 1fr;gap:1px;background:var(--line-strong);border-block:1px solid var(--line-strong);margin-top:76px}
.dg-pnav>*{margin-block-start:0}
.dg-pnav-i{position:relative;background:var(--card);padding:26px 26px 28px;transition:background .3s}
.dg-pnav-i>*{margin-block-start:0}
.dg-pnav-i:hover{background:var(--surface)}
.dg-pnav-l{font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--brand-mid);margin:0 0 10px;transition:transform .3s var(--ease)}
.dg-pnav-t{font-family:"DM Serif Display",Georgia,serif;font-size:1.15rem;line-height:1.28;color:var(--ink);margin:0}
.dg-pnav-t a{color:inherit}
/* Der Titel-Link spannt sich über die ganze Zelle. */
.dg-pnav-t a::before{content:"";position:absolute;inset:0}
.dg-pnav-i:hover .dg-pnav-t a{color:var(--brand-mid)}
.dg-pnav-prev:hover .dg-pnav-l{transform:translateX(-5px)}
.dg-pnav-next{text-align:right}
.dg-pnav-next:hover .dg-pnav-l{transform:translateX(5px)}
.dg-pnav-all{display:flex;flex-direction:column;justify-content:center;text-align:center;min-width:190px}
.dg-pnav-i:has(a:focus-visible){outline:2px solid var(--brand-mid);outline-offset:-2px}
.dg-pnav-t a:focus-visible{outline:none}
@media(max-width:760px){
.dg-pnav{grid-template-columns:1fr}
.dg-pnav-next{text-align:left}
.dg-pnav-all{text-align:left;min-width:0}
}
/* Pflichthinweis zu Förderangaben */
.dg-legal{margin-top:34px;padding-top:16px;border-top:1px solid var(--line);max-width:78ch;font-size:.8rem;line-height:1.65;color:var(--muted)}
/* ---------- Seitenübergang: Bild-Morph Galerie → Projektseite ----------
Der Browser blendet den Seitenwechsel weich und lässt dabei das angeklickte
Kachelbild an seinen Platz als Kopfbild der Projektseite wandern. Die
Zuordnung läuft über view-transition-name; die Namen setzt functions.php
je Projekt-Slug, damit eine neue Referenz keinen CSS-Eintrag braucht.
Reine Zutat: Browser ohne View Transitions (derzeit Firefox) zeigen
unverändert den normalen Seitenwechsel. */
@view-transition{navigation:auto}
@keyframes dg-vt-out{from{opacity:1}to{opacity:0}}
@keyframes dg-vt-in{from{opacity:0}to{opacity:1}}
::view-transition-old(root){animation:dg-vt-out 200ms var(--ease) both}
::view-transition-new(root){animation:dg-vt-in 300ms var(--ease) both}
/* Zwischen den Projektseiten schiebt der Inhalt in die Richtung, in die
geklickt wurde – „nächstes" kommt von rechts, „vorheriges" von links.
Die Richtung merkt sich page-transition.js über den Seitenwechsel hinweg.
Bei einem Seitenwechsel gilt immer das CSS der *neuen* Seite, deshalb
genügt das Attribut am Wurzelelement des Ziels. */
.dg-referenz main{view-transition-name:dg-main}
@keyframes dg-slide-in-r{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
@keyframes dg-slide-out-l{from{opacity:1;transform:none}to{opacity:0;transform:translateX(-28px)}}
@keyframes dg-slide-in-l{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:none}}
@keyframes dg-slide-out-r{from{opacity:1;transform:none}to{opacity:0;transform:translateX(28px)}}
html[data-dir="next"]::view-transition-old(dg-main){animation:dg-slide-out-l 240ms var(--ease) both}
html[data-dir="next"]::view-transition-new(dg-main){animation:dg-slide-in-r 400ms var(--ease) both}
html[data-dir="prev"]::view-transition-old(dg-main){animation:dg-slide-out-r 240ms var(--ease) both}
html[data-dir="prev"]::view-transition-new(dg-main){animation:dg-slide-in-l 400ms var(--ease) both}
/* Beim Blättern soll nur der Inhalt laufen, nicht zusätzlich die ganze Seite. */
html[data-dir]::view-transition-old(root),
html[data-dir]::view-transition-new(root){animation:none}
/* ---------- Vorher/Nachher in doppelter Größe ----------
Für Projekte, von denen nur ein einziges perspektivisch passendes Paar
existiert. Statt einer halbbreiten Kachel neben leerem Raster nimmt das
Paar die volle Spaltenbreite ein und wird flacher, damit die Bildhöhe
auf großen Schirmen nicht ausufert. */
.dg-gallery.dg-gross{grid-template-columns:1fr}
.dg-pair.dg-pair-gross .dg-halves{aspect-ratio:16/9}
.dg-pair.dg-pair-gross .dg-cap{padding:20px 24px 22px;font-size:1rem}
/* ---------- Projekt-Galerie: Karussell mit Filmstreifen ----------
Das Blättern selbst macht CSS (scroll-snap auf der Spur) – ohne JavaScript
bleibt die Galerie wischbar und vollständig. galerie.js ergänzt Knöpfe,
Zähler, Tastatur und den Filmstreifen. Deshalb sind die Knöpfe zunächst
versteckt und werden erst mit .dg-kar-js sichtbar. */
.dg-karussell{position:relative;margin-top:26px}
.dg-kar-buehne{position:relative;border:1px solid var(--line-strong);background:var(--surface-2)}
.dg-kar-spur{display:flex;list-style:none;margin:0;padding:0;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none}
.dg-kar-spur::-webkit-scrollbar{display:none}
.dg-kar-spur>*{margin-block-start:0}
.dg-kar-bild{flex:0 0 100%;scroll-snap-align:center;position:relative;margin:0}
.dg-kar-bild img{width:100%;aspect-ratio:16/10;object-fit:cover}
/* Bildunterschrift liegt auf dem Bild, damit die Höhe der Bühne konstant
bleibt – sonst springt das Karussell bei unterschiedlich langen Texten. */
.dg-kar-cap{position:absolute;left:0;right:0;bottom:0;margin:0;padding:52px 20px 16px;font-size:.86rem;line-height:1.5;color:#fff;background:linear-gradient(to top,rgba(12,14,6,.82),transparent)}
.dg-kar-nav{display:none;position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:46px;height:46px;border-radius:50%;border:1.5px solid var(--line-strong);background:rgba(255,255,255,.92);color:var(--brand-dark);font-size:1.1rem;line-height:1;cursor:pointer;transition:background .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease)}
.dg-kar-js .dg-kar-nav{display:grid;place-items:center}
.dg-kar-nav:hover{background:var(--brand-dark);border-color:var(--brand-dark);color:#fff}
.dg-kar-nav[disabled]{opacity:.35;cursor:default}
.dg-kar-nav[disabled]:hover{background:rgba(255,255,255,.92);border-color:var(--line-strong);color:var(--brand-dark)}
.dg-kar-prev{left:14px}
.dg-kar-next{right:14px}
.dg-kar-zaehler{margin:14px 0 0;font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--brand-mid)}
/* Filmstreifen: das aktive Bild trägt die Energieskala als Unterkante –
dasselbe Motiv wie der Nav-Unterstrich im Kopfbereich. */
.dg-kar-mini{display:flex;gap:10px;list-style:none;margin:14px 0 0;padding:0 0 4px;overflow-x:auto;scrollbar-width:thin}
.dg-kar-mini>*{margin-block-start:0}
.dg-kar-mini li{flex:0 0 92px;margin:0}
.dg-kar-mini button{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;position:relative}
.dg-kar-mini img{width:100%;aspect-ratio:4/3;object-fit:cover;opacity:.5;transition:opacity .3s var(--ease)}
.dg-kar-mini button:hover img,.dg-kar-mini button:focus-visible img{opacity:.85}
.dg-kar-mini button::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--eff);clip-path:inset(0 100% 0 0);transition:clip-path .35s var(--ease)}
.dg-kar-mini .is-aktiv img{opacity:1}
.dg-kar-mini .is-aktiv::after{clip-path:inset(0)}
@media(max-width:600px){.dg-kar-nav{width:38px;height:38px}.dg-kar-prev{left:8px}.dg-kar-next{right:8px}.dg-kar-mini li{flex:0 0 68px}}
/* ---------- Neubau-Kacheln (Referenzen, Gruppe 2) ----------
Ein Bild statt zweier – ein Neubau hat kein Vorher. Statt des Pfeils
wie bei .dg-pair wächst hier die Energieskala als Unterstrich von links. */
.dg-ngallery{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:26px}
.dg-ngallery>*{margin-block-start:0}
.dg-ntile{position:relative;background:var(--card);border:1px solid var(--line-strong);transition:box-shadow .3s var(--ease),transform .3s var(--ease),border-color .3s}
.dg-ntile:hover{transform:translateY(-4px);box-shadow:0 22px 44px -26px rgba(28,36,21,.3);border-color:var(--brand)}
.dg-nt-img{position:relative;aspect-ratio:4/3;overflow:hidden;margin:0}
.dg-nt-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.dg-ntile:hover .dg-nt-img img{transform:scale(1.05)}
/* Effizienzklasse als Siegel auf dem Bild – bei einem Neubau ist sie die
eigentliche Aussage, nicht der Wechsel. */
.dg-nt-klasse{position:absolute;top:0;left:0;z-index:2;background:var(--eff-green);color:#fff;font-size:.78rem;font-weight:700;letter-spacing:.1em;padding:8px 14px}
/* Kein position:relative – der ::before des Links soll sich am dg-ntile
verankern und damit die GANZE Kachel (inkl. Foto) klickbar machen. */
.dg-nt-cap{padding:16px 18px 22px;font-size:.9rem;font-weight:600;color:var(--ink)}
.dg-nt-cap>*{margin-block-start:0}
.dg-nt-cap a{color:var(--ink);transition:color .25s}
.dg-nt-cap a::before{content:"";position:absolute;inset:0;z-index:3}
.dg-nt-cap a::after{content:"";position:absolute;left:18px;right:18px;bottom:12px;height:2px;background:var(--eff);clip-path:inset(0 100% 0 0);transition:clip-path .45s var(--ease)}
.dg-ntile:hover .dg-nt-cap a{color:var(--brand-mid)}
.dg-ntile:hover .dg-nt-cap a::after,.dg-nt-cap a:focus-visible::after{clip-path:inset(0)}
.dg-nt-note{margin:6px 0 0;font-size:.86rem;font-weight:400;color:var(--muted);line-height:1.6}
.dg-ntile:has(.dg-nt-cap a:focus-visible){outline:2px solid var(--brand-mid);outline-offset:3px}
.dg-nt-cap a:focus-visible{outline:none}
@media(max-width:980px){.dg-ngallery{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.dg-ngallery{grid-template-columns:1fr}}
/* ---------- Klassenband, einwertig ----------
Ein Neubau hat keinen Klassenwechsel, sondern einen Zustand. Gleiche Skala,
ein Marker – ohne Pfeil und ohne Ausgangsklasse im Kopf. */
.dg-classbar-single .dg-cb-head{color:var(--ink)}
.dg-classbar-single .dg-cb-head::before{content:"";flex:none;width:78px;height:3px;background:var(--eff);clip-path:inset(0 100% 0 0);transition:clip-path .9s var(--ease) .25s}
.dg-reveal.in.dg-classbar-single .dg-cb-head::before{clip-path:inset(0)}
/* Text-Auswahl & Tastatur-Fokus in Markenfarben */
::selection{background:var(--sheen);color:var(--brand-deep)}
:focus-visible{outline:2px solid var(--brand-mid);outline-offset:3px;border-radius:2px}
@media (prefers-reduced-motion: reduce){
.dg-htile .dg-tile-inner{animation:none}
.dg-reveal{transition:opacity .3s;transform:none}
*{scroll-behavior:auto}
.dg-ticker-track{animation:none}
.dg-step::before,.dg-zrow::before,.dg-fact::before,.dg-lcard::before,.dg-htile .dg-tile-img{animation:none}
.dg-lcard{transition:none}
.dg-licht::before{background:radial-gradient(480px circle at 50% 40%,rgba(201,222,154,.13),transparent 62%)}
.dg-lvl .dg-lb,.dg-lvl .dg-lk{transition:none}
.dg-qa::before{transition:none}
.dg-rowi,.dg-rowi::before,.dg-rowi::after{transition:none}
.dg-btn,.dg-btn::before,.dg-btn .dg-ic,.wp-block-button__link,.wp-block-button__link::before,.dg-navl a::after,.dg-navr a::after{transition:none}
.dg-tile-img,.dg-page-hero .wp-block-cover__image-background,.dg-cta .wp-block-cover__image-background{transform:none!important;animation:none!important}
.dg-mmenu,.dg-mmenu-nav a,.dg-mmenu-claim,.dg-menu-ic span,.dg-menu-toggle{transition:none}
.dg-mmenu-nav a{transform:none}
.dg-cb-arrow{transition:none;clip-path:inset(0)}
/* Seitenübergänge sind Zutat – im Ruhemodus schaltet der Wechsel hart um. */
::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
.dg-pnav-l,.dg-pnav-i,.dg-pnav-t a{transition:none}
.dg-cb-bar,.dg-measures li{transition:none}
/* Der Vergleich bleibt bedienbar, die Lamellen springen ohne Bewegung um. */
.dg-halves .dg-nachher,.dg-halves .dg-tag,.dg-jal-knopf,
.dg-halves.dg-jal .dg-lamelle img,.dg-halves.dg-jal .dg-lamelle::after{transition:none!important}
.dg-reveal.in .dg-cb-scale .is-to .dg-cb-bar{transform:none;opacity:1}
.dg-cb-scale .is-to .dg-cb-bar{outline:2px solid var(--brand-dark);outline-offset:2px}
}