/* de Jonge – Markenebene über dem Relaunch-Entwurf vom 15.10.2026
   Layout und Struktur des Entwurfs bleiben unverändert; diese Datei ändert nur Schrift und Farbe
   und gestaltet die drei ergänzten Abschnitte (Technik, Dürer, Partner). Stand 18.10.2026 */
@font-face{font-family:"Metropolis";font-weight:300;font-display:swap;src:url("fonts/metropolis-latin-300-normal.woff2") format("woff2")}
@font-face{font-family:"Metropolis";font-weight:400;font-display:swap;src:url("fonts/metropolis-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Metropolis";font-weight:700;font-display:swap;src:url("fonts/metropolis-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Metropolis";font-weight:800;font-display:swap;src:url("fonts/metropolis-latin-800-normal.woff2") format("woff2")}

:root{--lime:#a0fa64;--lime-deep:#3f7f17;--ink:#0b0f0c;--ink-2:#151b17;--paper:#f6f7f4;--line:#dfe3dc;--text:#141914;--muted:#545e57}

/* Schrift & Grundfarben */
body{background:var(--paper);font-family:"Metropolis",Arial,sans-serif;color:var(--text)}
#dj-facelift{font-family:"Metropolis",Arial,sans-serif;font-weight:300;color:var(--text);background:var(--paper)}
#dj-facelift h1,#dj-facelift h2,#dj-facelift h3{font-family:"Metropolis",Arial,sans-serif;font-weight:800;color:var(--text);letter-spacing:-.025em}
#dj-facelift p{color:var(--muted)}
#dj-facelift strong,#dj-facelift b{font-weight:700}
#dj-facelift .dj-kicker{color:var(--lime-deep);font-weight:700}
#dj-facelift .dj-num{color:var(--lime-deep);font-weight:700}
#dj-facelift a{color:var(--text);font-weight:700;text-decoration:none;border-bottom:2px solid var(--lime);padding-bottom:1px}
#dj-facelift a:hover{text-decoration:none;color:var(--lime-deep)}
#dj-facelift .dj-btn{background:var(--lime);color:var(--ink);font-weight:700;border:0;border-radius:4px;padding:15px 24px}
#dj-facelift .dj-btn:hover{color:var(--ink);filter:brightness(.95)}
#dj-facelift .dj-card{border-top:2px solid var(--lime)}
#dj-facelift .dj-section,#dj-facelift .dj-strip,#dj-facelift details{border-color:var(--line)}
#dj-facelift summary{color:var(--text);font-weight:700}
#dj-facelift summary::marker{color:var(--lime-deep)}
#dj-facelift .dj-cta{background:var(--ink);color:#e9eee9}
#dj-facelift .dj-cta h2,#dj-facelift .dj-cta h3{color:#fff}
#dj-facelift .dj-cta p{color:#c3ccc5}

/* Dunkle Kopfzeile (volle Breite) – auf allen Seiten */
#dj-facelift .dj-note{background:#050706;color:#8d988f;border:0;box-shadow:0 0 0 100vmax #050706;clip-path:inset(0 -100vmax)}
#dj-facelift .dj-nav{background:var(--ink);border-bottom:0;box-shadow:0 0 0 100vmax var(--ink);clip-path:inset(0 -100vmax)}
#dj-facelift .dj-nav a{color:#e9eee9;font-weight:400;border-bottom:0}
#dj-facelift .dj-nav a:hover{color:var(--lime)}
#dj-facelift .dj-nav a[href="kontakt.html"]{background:var(--lime);color:var(--ink);font-weight:700;padding:9px 16px;border-radius:4px}

/* Startseite: dunkler Hero (volle Breite) */
#dj-facelift .dj-hero{background:var(--ink);box-shadow:0 0 0 100vmax var(--ink);clip-path:inset(0 -100vmax)}
#dj-facelift .dj-hero h1{color:#fff}
#dj-facelift .dj-hero h1 br + *{color:var(--lime)}
#dj-facelift .dj-hero .dj-lead{color:#c3ccc5}
#dj-facelift .dj-hero .dj-kicker{color:var(--lime)}
#dj-facelift .dj-hero a:not(.dj-btn){color:#fff}
#dj-facelift .dj-hero .dj-product{background:#fff;border:0}
#dj-facelift .dj-hl{color:var(--lime)}
#dj-facelift .dj-strip{border-top:0}
#dj-facelift .dj-strip strong{font-weight:700;color:var(--text)}

/* Unterseiten: Seitenkopf mit Lindgrün-Akzent */
#dj-facelift .dj-nav + .dj-section h1 .dj-hl{color:var(--lime-deep)}

/* ---------- Ergänzt: Technik ---------- */
#dj-facelift .dj-flow{display:grid;grid-template-columns:1fr auto 1.5fr auto 1fr;align-items:stretch;margin-top:42px}
#dj-facelift .dj-flow .node{background:#fff;border:1px solid var(--line);border-radius:6px;padding:22px 24px}
#dj-facelift .dj-flow .node h3{font-size:18px;margin:0 0 6px}
#dj-facelift .dj-flow .node p{font-size:15px;margin:0}
#dj-facelift .dj-flow .core{background:var(--ink);border:2px solid var(--lime)}
#dj-facelift .dj-flow .core h3{color:var(--lime)}
#dj-facelift .dj-flow .core p{color:#c3ccc5}
#dj-facelift .dj-flow .core ul{list-style:none;padding:0;margin:14px 0 0;display:flex;gap:8px;flex-wrap:wrap}
#dj-facelift .dj-flow .core li{font-size:13px;font-weight:700;background:var(--lime);color:var(--ink);padding:4px 10px;border-radius:3px}
#dj-facelift .dj-flow .arr{display:flex;align-items:center;justify-content:center;padding:0 14px;font-size:26px;font-weight:800;color:var(--lime-deep)}
#dj-facelift .dj-flow-note{font-size:15px;margin:16px 0 0;padding-left:14px;border-left:2px dashed #b9c2b5}

/* ---------- Ergänzt: Dürer (dunkel, volle Breite) ---------- */
#dj-facelift .dj-craft{background:var(--ink);box-shadow:0 0 0 100vmax var(--ink);clip-path:inset(0 -100vmax);border-bottom:0;display:grid;grid-template-columns:.75fr 1.25fr;gap:72px;align-items:center}
#dj-facelift .dj-craft h2{color:#fff}
#dj-facelift .dj-craft h2 span{color:var(--lime)}
#dj-facelift .dj-craft p{color:#c3ccc5}
#dj-facelift .dj-craft .dj-kicker{color:var(--lime)}
#dj-facelift .dj-craft figure{margin:0}
#dj-facelift .dj-craft .frame{aspect-ratio:2/3;background:#000;border-radius:4px;overflow:hidden;position:relative}
#dj-facelift .dj-craft .frame img{width:100%;height:100%;object-fit:cover}
#dj-facelift .dj-craft .frame .off{display:none;position:absolute;inset:0;align-items:center;justify-content:center;text-align:center;padding:24px;color:#8d988f;font-size:13px}
#dj-facelift .dj-craft .frame.offline img{display:none}
#dj-facelift .dj-craft .frame.offline .off{display:flex}
#dj-facelift .dj-craft figcaption{font-size:11px;color:#7c867e;margin-top:10px}
#dj-facelift .dj-craft .claim{font-size:22px;font-weight:700;color:#fff;border-left:3px solid var(--lime);padding-left:18px;margin:30px 0 0}

/* ---------- Ergänzt: Partner ---------- */
#dj-facelift .dj-logos{display:grid;grid-template-columns:repeat(7,1fr);gap:14px;margin-top:36px}
#dj-facelift .dj-logos a{display:flex;align-items:center;justify-content:center;height:92px;padding:10px;background:#fff;border:1px solid var(--line);border-radius:4px}
#dj-facelift .dj-logos img{max-height:66px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.75;transition:filter .2s,opacity .2s}
#dj-facelift .dj-logos a:hover img{filter:none;opacity:1}
#dj-facelift .dj-logos .alt{display:none;font-size:12px;text-align:center;color:var(--muted)}
#dj-facelift .dj-logos a.offline img{display:none}
#dj-facelift .dj-logos a.offline .alt{display:block}

/* Elemente außerhalb des Wrappers (Kontaktformular, Insights-Liste, ROI-Rechner) */
.wpcf7 input[type=submit]{background:var(--lime);color:var(--ink);font-weight:700}
.w-grid-item{border-top:2px solid var(--lime)}
.w-grid-item h2,.w-grid-item h2 a{font-family:"Metropolis",Arial,sans-serif;font-weight:800;color:var(--text);text-decoration:none}
.w-grid-item .w-btn{color:var(--lime-deep);font-weight:700;text-decoration:none}

/* Änderungsmarkierungen (nur in der Vergleichsansicht) */
body.marks [data-mark]{position:relative;outline:3px dashed #ff3d7f;outline-offset:-3px}
body.marks [data-mark]::before{content:attr(data-mark);position:absolute;z-index:20;top:10px;right:10px;background:#ff3d7f;color:#fff;font:700 12px/1.2 "Metropolis",Arial,sans-serif;padding:6px 9px;border-radius:3px;pointer-events:none}

@media(max-width:860px){
  #dj-facelift .dj-flow{grid-template-columns:1fr}
  #dj-facelift .dj-flow .arr{transform:rotate(90deg);padding:8px 0}
  #dj-facelift .dj-craft{grid-template-columns:1fr;gap:32px}
  #dj-facelift .dj-craft .frame{max-width:320px}
  #dj-facelift .dj-logos{grid-template-columns:repeat(2,1fr)}
  #dj-facelift .dj-nav a[href="kontakt.html"]{padding:6px 12px}
}

/* Kleine Korrekturen am Entwurf (Insights-Liste): Breite wie übrige Inhalte, Kategorie-Label im Fluss */
.w-grid{max-width:1160px;margin:0 auto;padding:0 32px 90px;box-sizing:border-box}
.w-grid-item-h{position:relative}
.w-grid-item .post_taxonomy{position:static!important;margin:16px 0 0}
.w-grid-item .post_content{font-size:15px;line-height:1.55;color:var(--muted)}
@media(max-width:760px){.w-grid{padding:0 22px 60px}}

/* ===== Rhythmus hell/dunkel auf der Startseite (Überarbeitung 18.10., 15:40) ===== */
/* Hilfsmuster: Hintergrund über die volle Fensterbreite */
#dj-facelift .dj-strip,
#dj-facelift #edgebrain,
#dj-facelift #technik,
#dj-facelift #anwendungen,
#dj-facelift #wirtschaftlichkeit,
#dj-facelift .dj-partners,
#dj-facelift #kontakt{clip-path:inset(0 -100vmax);border-bottom:0;border-top:0}

/* Nutzenleiste: Lindgrün */
#dj-facelift .dj-strip{background:var(--lime);box-shadow:0 0 0 100vmax var(--lime)}
#dj-facelift .dj-strip strong{color:var(--ink);font-weight:800}
#dj-facelift .dj-strip span{color:#22301a}

/* Lösung: weiß */
#dj-facelift #edgebrain{background:#fff;box-shadow:0 0 0 100vmax #fff}

/* Technik: dunkel */
#dj-facelift #technik{background:var(--ink);box-shadow:0 0 0 100vmax var(--ink)}
#dj-facelift #technik h2,#dj-facelift #technik h3{color:#fff}
#dj-facelift #technik p{color:#c3ccc5}
#dj-facelift #technik .dj-kicker,#dj-facelift #technik .dj-num{color:var(--lime)}
#dj-facelift #technik .dj-card{border-top-color:#2a332d}
#dj-facelift #technik .dj-flow .node{background:var(--ink-2);border-color:#2a332d}
#dj-facelift #technik .dj-flow .node h3{color:#fff}
#dj-facelift #technik .dj-flow .core{background:#16210f;border-color:var(--lime)}
#dj-facelift #technik .dj-flow .core h3{color:var(--lime)}
#dj-facelift #technik .dj-flow .arr{color:var(--lime)}
#dj-facelift #technik .dj-flow-note{border-left-color:#3a443d;color:#8d988f}

/* Use Cases: hell (Grundton), Wirtschaftlichkeit: weiß */
#dj-facelift #anwendungen{background:var(--paper);box-shadow:0 0 0 100vmax var(--paper)}
#dj-facelift #wirtschaftlichkeit{background:#fff;box-shadow:0 0 0 100vmax #fff}

/* Dürer: kompaktes dunkles Band */
#dj-facelift .dj-craft{grid-template-columns:200px 1fr;gap:56px;padding-top:64px;padding-bottom:64px;align-items:center}
#dj-facelift .dj-craft .frame{aspect-ratio:2/3;width:200px}
#dj-facelift .dj-craft figcaption{font-size:10px;line-height:1.4;margin-top:8px}
#dj-facelift .dj-craft h2{font-size:clamp(28px,2.8vw,40px);margin-bottom:16px}
#dj-facelift .dj-craft .dj-lead{font-size:18px;margin-bottom:12px}
#dj-facelift .dj-craft p{max-width:640px}
#dj-facelift .dj-craft .claim{font-size:18px;margin-top:18px}

/* Partner: schmale Logozeile, weiß */
#dj-facelift .dj-partners{background:#fff;box-shadow:0 0 0 100vmax #fff;padding-top:40px;padding-bottom:40px;display:flex;align-items:center;gap:40px}
#dj-facelift .dj-partners .dj-kicker{margin:0;white-space:nowrap}
#dj-facelift .dj-logos{flex:1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 28px;margin:0}
#dj-facelift .dj-logos a{height:auto;padding:0;background:none;border:0;border-radius:0}
#dj-facelift .dj-logos img{max-height:40px;max-width:110px}

/* Kontakt: dunkel */
#dj-facelift #kontakt{background:var(--ink);box-shadow:0 0 0 100vmax var(--ink)}
#dj-facelift #kontakt h2{color:#fff}
#dj-facelift #kontakt p{color:#c3ccc5}
#dj-facelift #kontakt .dj-kicker{color:var(--lime)}

@media(max-width:860px){
  #dj-facelift .dj-craft{grid-template-columns:1fr;gap:24px}
  #dj-facelift .dj-craft .frame{width:160px}
  #dj-facelift .dj-partners{flex-direction:column;align-items:flex-start;gap:20px}
  #dj-facelift .dj-logos{justify-content:flex-start}
}