/* DNE – mein-neues-einkommen.de · gemeinsame Styles */
@font-face{font-family:"Nunito";src:url("fonts/nunito.woff") format("woff");font-weight:200 1000;font-style:normal;font-display:swap}
@font-face{font-family:"Mrs Saint Delafield";src:url("fonts/mrs-saint-delafield.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:#1A1A1A;color:#F5F5F3;font-family:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%}
button{font-family:inherit}
a{color:#D49F84}a:hover{color:#F5F5F3}
input::placeholder{color:#A8A29C}
input:focus{outline:2px solid #C8866C;outline-offset:1px}
button:focus-visible,a:focus-visible{outline:2px solid #D49F84;outline-offset:3px}
.dne-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Hero */
@keyframes dneblink{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes dnepulse{0%{box-shadow:0 0 0 0 rgba(200,134,108,.55)}70%{box-shadow:0 0 0 10px rgba(200,134,108,0)}100%{box-shadow:0 0 0 0 rgba(200,134,108,0)}}
.dne-cursor{animation:dneblink 1s steps(1) infinite}
.dne-dot{animation:dnepulse 2s infinite}

/* Chat */
.dne-chat .dne-b{opacity:0;transform:translateY(12px)}
.dne-go .dne-b{animation:dneIn .45s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes dneIn{to{opacity:1;transform:none}}

/* Danke-Seite */
@keyframes dnepop{0%{transform:scale(.6);opacity:0}70%{transform:scale(1.08);opacity:1}100%{transform:scale(1)}}
@keyframes dnepulse2{0%{box-shadow:0 0 0 0 rgba(200,134,108,.55)}70%{box-shadow:0 0 0 16px rgba(200,134,108,0)}100%{box-shadow:0 0 0 0 rgba(200,134,108,0)}}
.dne-pop{animation:dnepop .6s cubic-bezier(.2,.8,.2,1) both}
.dne-play{animation:dnepulse2 2.2s infinite}

/* Einblick: Karte vor dem Abspielen, danach 16:9-Video */
#dne-player.is-card{height:260px}
#dne-player:not(.is-card){aspect-ratio:16/9}
#dne-player.is-card #dne-video{visibility:hidden}
@media (min-width:600px){#dne-player.is-card{height:360px}}
.dne-only-neu{display:none!important}
body.is-neu .dne-only-neu{display:block!important}
body.is-neu div.dne-only-neu{display:flex!important}
body.is-neu .dne-only-neu[class*=dne-pop]{display:flex!important}
body.is-neu span.dne-only-neu{display:block!important}
body.is-neu .dne-only-std{display:none!important}

/* Formular */
.dne-err{display:none;margin:2px 0 0;font-size:13px;color:#8A3A3A}
.dne-form.is-sending button{opacity:.7;pointer-events:none}

/* Cookie-Banner */
.dne-cookie{position:fixed;left:12px;right:12px;bottom:12px;z-index:50;max-width:520px;margin:0 auto;background:#FFFFFF;color:#1A1A1A;border-radius:20px;padding:18px 18px 16px;box-shadow:0 20px 60px rgba(0,0,0,.5);display:none}
.dne-cookie.is-open{display:block}
.dne-cookie p{margin:0 0 6px;font-size:14px;line-height:1.5;color:#3A3836}
.dne-cookie .t{font-weight:900;font-size:16px;color:#1A1A1A;margin-bottom:6px}
.dne-cookie a{color:#6B6560}
.dne-cookie .b{display:flex;gap:10px;margin-top:12px}
.dne-cookie button{flex:1;height:46px;border-radius:12px;font-family:inherit;font-weight:800;font-size:15px;cursor:pointer}
.dne-cookie .no{background:#F5F5F3;color:#1A1A1A;border:1px solid #E2DDD6}
.dne-cookie .yes{background:#1A1A1A;color:#FFFFFF;border:1px solid #1A1A1A}
.dne-linkbtn{background:none;border:0;padding:0;font:inherit;color:#D49F84;text-decoration:underline;cursor:pointer}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .dne-cursor,.dne-dot,.dne-pop,.dne-play{animation:none}
  .dne-chat .dne-b{opacity:1;transform:none;animation:none}
}

/* Laptop & Desktop (23.10.2026) – Handy-Ansicht bleibt unverändert, gilt nur für die Startseite */
@media (min-width:1024px){
  body.es-start{font-size:18px}
  body.es-start{--gut:max(48px, calc((100vw - 1120px) / 2 + 48px))}
  /* Kopf: Text links, Foto rechts */
  body.es-start main > section:first-of-type{max-width:none!important;min-height:min(820px,92vh)!important;justify-content:center!important}
  body.es-start main > section:first-of-type > picture > img{left:auto!important;right:0!important;width:72%!important;object-position:50% 14%!important}
  body.es-start main > section:first-of-type > div[aria-hidden="true"]{background:linear-gradient(90deg,#1A1A1A 0%,#1A1A1A 26%,rgba(26,26,26,.88) 36%,rgba(26,26,26,.55) 48%,rgba(26,26,26,0) 64%),linear-gradient(180deg,rgba(26,26,26,0) 70%,#1A1A1A 100%)!important}
  body.es-start main > section:first-of-type > div:not([aria-hidden]) > div{left:var(--gut)!important;right:var(--gut)!important;top:28px!important}
  body.es-start main > section:first-of-type > div:last-child{padding:0 0 0 var(--gut)!important;max-width:calc(var(--gut) + 560px)}
  body.es-start main > section:first-of-type h1{font-size:58px!important;margin-bottom:22px!important}
  body.es-start main > section:first-of-type h1 + p{font-size:21px!important;margin-bottom:30px!important;text-shadow:0 1px 12px rgba(0,0,0,.5)}
  body.es-start main > section:first-of-type h1{text-shadow:0 2px 24px rgba(0,0,0,.45)}
  body.es-start main > section:first-of-type > div:last-child > a[href="#anmeldung"]{max-width:380px}
  body.es-start main > section:first-of-type > div:last-child > p:last-child{text-align:left!important;max-width:380px}
  /* Inhalt: gleiche Kante wie oben, Überschrift links, Inhalt rechts */
  body.es-start main > div{max-width:1120px!important;padding:0 48px!important}
  body.es-start main > div h2{font-size:40px!important}
  body.es-start main > div section{padding-top:110px!important}
  body.es-start main > div:nth-of-type(1) > section:nth-of-type(1),
  body.es-start main > div:nth-of-type(2) > section:nth-of-type(2),
  body.es-start main > div:nth-of-type(2) > section:nth-of-type(4){display:grid;grid-template-columns:5fr 7fr;column-gap:72px;align-items:start}
  body.es-start main > div:nth-of-type(1) > section:nth-of-type(1) > :not(#dne-chat),
  body.es-start main > div:nth-of-type(2) > section:nth-of-type(2) > p,
  body.es-start main > div:nth-of-type(2) > section:nth-of-type(2) > h2,
  body.es-start main > div:nth-of-type(2) > section:nth-of-type(4) > h2,
  body.es-start main > div:nth-of-type(2) > section:nth-of-type(4) > p{grid-column:1}
  body.es-start #dne-chat,
  body.es-start main > div:nth-of-type(2) > section:nth-of-type(2) > div,
  body.es-start main > div:nth-of-type(2) > section:nth-of-type(4) > div{grid-column:2;grid-row:1 / span 4}
  /* Drei Punkte nebeneinander */
  body.es-start main > div:nth-of-type(2) > div:first-child{display:grid!important;grid-template-columns:repeat(3,1fr);gap:18px!important}
  body.es-start main > div:nth-of-type(2) > div:first-child > div{flex-direction:column!important;padding:26px 24px!important}
  /* Karte „Wer dir das zeigt“: Text links, Foto rechts */
  body.es-start main > div:nth-of-type(2) > section:nth-of-type(1) > div{display:flex;flex-direction:row-reverse;align-items:stretch}
  body.es-start main > div:nth-of-type(2) > section:nth-of-type(1) > div > img{width:46%!important;height:auto!important;min-height:420px}
  body.es-start main > div:nth-of-type(2) > section:nth-of-type(1) > div > div{flex:1;padding:40px 44px!important;display:flex;flex-direction:column;justify-content:center}
  /* Anmeldung */
  body.es-start #anmeldung{max-width:620px;margin:0 auto}
  body.es-start main > div:nth-of-type(2) > section:nth-of-type(5) > a{max-width:420px;margin:0 auto}
  body.es-start footer{padding-bottom:56px!important}
  body.es-start main > section:first-of-type > div:not([aria-hidden]) > div img{height:30px!important}
  body.es-start .dne-cookie{left:auto;right:24px;bottom:24px;margin:0;max-width:420px;padding:16px 18px 14px}
  body.es-start .dne-cookie p{font-size:13px}
}

/* Einblick-Seite – Laptop & Desktop (23.10.2026). Handy-Ansicht bleibt unverändert. */
@media (min-width:1024px){
  body[data-einblick-page] main > div{max-width:1200px!important;padding:0 48px!important;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:56px}
  body[data-einblick-page] main > div > header,
  body[data-einblick-page] main > div > section:nth-of-type(n+4),
  body[data-einblick-page] main > div > footer{grid-column:1 / -1}
  body[data-einblick-page] main > div > header{padding-top:28px!important;height:auto!important}
  body[data-einblick-page] main > div > header img{height:34px!important}
  /* Oben: Video links, Text und WhatsApp rechts */
  body[data-einblick-page] main > div > section:nth-of-type(2){grid-column:1;grid-row:2 / span 2;padding-top:44px!important;align-self:start}
  body[data-einblick-page] main > div > section:nth-of-type(1){grid-column:2;grid-row:2;text-align:left!important;padding-top:44px!important;align-self:end}
  body[data-einblick-page] main > div > section:nth-of-type(3){grid-column:2;grid-row:3;padding-top:22px!important;align-self:start}
  body[data-einblick-page] main > div > section:nth-of-type(1) > div.dne-only-neu{justify-content:flex-start!important}
  body[data-einblick-page] main > div > section:nth-of-type(1) h1{font-size:46px!important;margin-bottom:14px!important}
  body[data-einblick-page] main > div > section:nth-of-type(1) p{max-width:none!important;margin-left:0!important;margin-right:0!important}
  body[data-einblick-page] main > div > section:nth-of-type(1) > p{font-size:18px!important}
  body[data-einblick-page] main > div > section:nth-of-type(1) > div:not(.dne-only-neu){max-width:none!important;margin:22px 0 0!important}
  body[data-einblick-page] #dne-player.is-card{height:440px}
  body[data-einblick-page] main > div > section:nth-of-type(3) p{text-align:left!important}
  /* Darunter: Karte, drei Punkte nebeneinander, Abschluss */
  body[data-einblick-page] #melden{padding-top:96px!important}
  body[data-einblick-page] #melden > div{max-width:760px;margin:0 auto;padding:34px 40px 30px!important}
  body[data-einblick-page] #melden a{max-width:420px;margin:0 auto}
  body[data-einblick-page] main > div > section:nth-of-type(5){padding-top:96px!important}
  body[data-einblick-page] main > div > section:nth-of-type(5) > p{text-align:center}
  body[data-einblick-page] main > div > section:nth-of-type(5) > div{display:grid!important;grid-template-columns:repeat(3,1fr);gap:18px!important}
  body[data-einblick-page] main > div > section:nth-of-type(5) > div > div{flex-direction:column!important;gap:12px!important;padding:26px 24px!important}
  body[data-einblick-page] main > div > section:nth-of-type(6){padding-top:96px!important}
  body[data-einblick-page] main > div > section:nth-of-type(6) > p{font-size:34px!important}
  body[data-einblick-page] .dne-cookie{left:auto;right:24px;bottom:24px;margin:0;max-width:420px;padding:16px 18px 14px}
  body[data-einblick-page] .dne-cookie p{font-size:13px}
}

/* mein-neues-einkommen.de: Stimmen aus dem Team, Foto oben (23.10.2026) */
@media (min-width:700px){
  .dne-stimmen-liste{display:grid!important;grid-template-columns:1fr 1fr}
  .dne-stimmen-liste img{height:340px!important}
}
@media (min-width:1024px){
  body.es-start main > section:first-of-type > picture > img{object-position:50% 16%!important}
  body.es-start .dne-stimmen{padding-top:110px!important}
  body.es-start .dne-stimmen h2{font-size:40px!important}
  body.es-start .dne-stimmen-liste{gap:24px!important}
  body.es-start .dne-stimmen-liste img{height:420px!important}
  body.es-start .dne-stimmen-liste blockquote{font-size:24px!important;padding:26px 28px 8px!important}
  body.es-start .dne-stimmen-liste figcaption{padding:0 28px 26px!important}
}