/* ============================================================
   Duo Visions GbR – gemeinsames Stylesheet
   Schriften: assets/fonts.css (lokal, kein Drittanbieter)
   ============================================================ */
:root{
  --canvas:#EEF1F6; --surface:#FFFFFF; --surface-soft:#F6F8FB;
  --ink:#102C52; --ink-soft:#3D567C; --slate:#6B7686;
  --line:rgba(16,44,82,.08);
  --blue:#3C7FD0; --cyan:#14C9D6; --mint:#6FD9AE;
  --peep-red:#D24355; --peep-teal:#4CA6A4;
  --navy-deep:#0B2240; --navy-deep-soft:#16335A;
  --bp-ink:#102A3C; --bp-teal:#2B8C7B; --bp-teal-light:#5FC2AC;
  --gradient-duo:linear-gradient(120deg,var(--blue) 0%,var(--cyan) 52%,var(--mint) 100%);
  --gradient-duo-soft:linear-gradient(120deg,rgba(60,127,208,.14) 0%,rgba(20,201,214,.14) 52%,rgba(111,217,174,.14) 100%);
  --font-display:'Sora',sans-serif; --font-body:'Inter',sans-serif; --font-mono:'JetBrains Mono',monospace;
  --container:1180px; --radius-lg:28px; --radius-md:18px; --radius-sm:10px;
  --shadow:0 18px 50px -24px rgba(16,44,82,.45);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--canvas);color:var(--ink);font-family:var(--font-body);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3{font-family:var(--font-display);line-height:1.14;margin:0;letter-spacing:-.01em}
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 24px}
.eyebrow{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan);margin:0}
section{padding:84px 0}

/* Buttons */
.btn-primary,.btn-ghost,.btn-ink,.btn-outline{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-display);font-weight:600;font-size:.97rem;padding:13px 22px;border-radius:999px;border:1px solid transparent;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}
.btn-primary:hover,.btn-ghost:hover,.btn-ink:hover,.btn-outline:hover{transform:translateY(-1px)}
.btn-primary{background:var(--gradient-duo);color:#06203f;box-shadow:0 12px 30px -12px rgba(20,201,214,.6)}
.btn-ghost{background:transparent;border-color:rgba(255,255,255,.35);color:#fff}
.btn-ink{background:var(--ink);color:#fff}
.btn-outline{background:#fff;border-color:#D9E1EC;color:var(--ink)}

/* Nav */
nav.nav{position:sticky;top:0;z-index:60;background:rgba(238,241,246,.82);backdrop-filter:saturate(1.3) blur(10px);border-bottom:1px solid var(--line)}
nav.nav .container{display:flex;align-items:center;justify-content:space-between;height:68px;gap:18px}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--font-display);font-weight:700;font-size:1.08rem}
.brand img{height:30px;width:auto;border-radius:8px}
.brand .gbr{color:var(--slate);font-weight:600}
.nav-links{display:flex;align-items:center;gap:26px;list-style:none;margin:0;padding:0;font-weight:500;font-size:.95rem}
.nav-links a{color:var(--ink-soft)}
.nav-links a:hover{color:var(--ink)}
.nav-cta{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:600;font-size:.92rem;padding:10px 18px;border-radius:999px;background:var(--ink);color:#fff}
@media(max-width:780px){.nav-links{display:none}}

/* Home hero */
header.hero{padding:80px 0 72px;position:relative;overflow:hidden}
header.hero:before{content:"";position:absolute;inset:0;background:radial-gradient(900px 420px at 88% -20%,rgba(20,201,214,.16),transparent 60%);pointer-events:none}
header.hero .container{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;position:relative}
.hero-copy h1{font-size:clamp(2.3rem,5.2vw,3.7rem);margin:14px 0 0}
.hero-copy h1 em{font-style:normal;background:var(--gradient-duo);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-sub{font-size:1.16rem;color:var(--ink-soft);max-width:560px;margin:20px 0 28px}
.hero-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.hero-meta{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.08em;color:var(--slate)}
.hero-art{display:flex;justify-content:center}
.hero-art img{width:min(360px,80%);height:auto;border-radius:32px;filter:drop-shadow(0 30px 60px rgba(16,44,82,.22))}
@media(max-width:860px){header.hero .container{grid-template-columns:1fr;gap:30px}.hero-art{order:-1}.hero-art img{width:180px}}

/* Section head */
.section-head{max-width:720px;margin:0 auto 48px;text-align:center}
.section-head h2{font-size:clamp(1.8rem,3.6vw,2.5rem);margin:12px 0 0}
.section-head>p:last-child{font-size:1.08rem;color:var(--ink-soft);margin:14px 0 0}

/* Products (3-up) */
.products{background:var(--surface)}
.products-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;align-items:stretch}
@media(max-width:1040px){.products-grid{grid-template-columns:repeat(2,1fr);max-width:720px;margin:0 auto}}
@media(max-width:560px){.products-grid{grid-template-columns:1fr;max-width:420px}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:30px 28px;display:flex;flex-direction:column;transition:transform .35s ease,box-shadow .35s ease}
.card:hover{transform:translateY(-6px);box-shadow:0 24px 44px -20px rgba(16,44,82,.22)}
.card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:20px}
.card-kicker{font-family:var(--font-mono);font-size:.66rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--slate)}
.status{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:.68rem;font-weight:600;letter-spacing:.04em;padding:5px 11px;border-radius:999px;white-space:nowrap}
.status .dot{width:7px;height:7px;border-radius:50%}
.status.live{background:rgba(111,217,174,.18);color:#1f8a63}.status.live .dot{background:#2bb673}
.status.dev{background:rgba(60,127,208,.14);color:#2f6bb0}.status.dev .dot{background:var(--blue)}
.card-media{height:150px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;margin-bottom:22px;overflow:hidden}
.card-media .product-logo{width:auto;height:110px;object-fit:contain}
.crewrio-media{background:linear-gradient(135deg,rgba(60,127,208,.12),rgba(20,201,214,.12))}
.peep-media{background:linear-gradient(135deg,rgba(210,67,85,.10),rgba(76,166,164,.14))}
.bewerberpipe-media{background:linear-gradient(135deg,rgba(43,140,123,.12),rgba(111,217,174,.16))}
.card h3{font-size:1.25rem;margin-bottom:9px}
.card .desc{margin:0 0 22px;color:var(--ink-soft);font-size:.97rem;flex:1}
.card-cta{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:600;font-size:.95rem;color:var(--bp-teal)}
.card-cta svg{transition:transform .2s ease}
.card:hover .card-cta svg{transform:translate(2px,-2px)}
#crewrio .card-cta{color:var(--blue)}
#peepmats .card-cta{color:var(--peep-teal)}
.products-foot{display:flex;align-items:center;justify-content:center;gap:10px;margin:40px 0 0;color:var(--slate);font-size:.9rem;text-align:center}
.products-foot img{height:22px;width:auto;border-radius:6px}

/* About */
.about .container{display:grid;grid-template-columns:.8fr 1.2fr;gap:44px;align-items:start}
@media(max-width:820px){.about .container{grid-template-columns:1fr;gap:20px}}
.about h2{font-size:clamp(1.8rem,3.4vw,2.4rem);margin-top:10px}
.about-body p{color:var(--ink-soft);font-size:1.05rem;margin:0 0 16px}
.about-list{list-style:none;padding:0;margin:20px 0 0}
.about-list li{display:flex;align-items:center;gap:12px;margin:12px 0;color:var(--ink)}
.about-list .mark{flex:0 0 12px;height:12px;border-radius:4px;background:var(--gradient-duo)}

/* Footer */
footer{background:var(--navy-deep);color:#D6E2F2;padding:54px 0 30px}
.footer-top{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-bottom:26px;border-bottom:1px solid rgba(255,255,255,.1)}
.footer-brand{display:flex;align-items:center;gap:11px;font-family:var(--font-display);font-weight:700;color:#fff;font-size:1.05rem}
.footer-brand img{height:28px;width:auto;border-radius:8px}
.footer-tagline{font-family:var(--font-mono);font-size:.8rem;letter-spacing:.1em;color:#8FA6C6;margin:12px 0 0}
.footer-links{list-style:none;display:flex;gap:24px;flex-wrap:wrap;padding:0;margin:0}
.footer-links a{color:#B9CBE4}.footer-links a:hover{color:#fff}
.footer-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:22px;font-size:.84rem;color:#7F96B6}

/* ===== Legal pages ===== */
main.legal{max-width:820px;margin:0 auto;padding:60px 24px 80px}
main.legal h1{font-size:clamp(2rem,4vw,2.6rem);margin:10px 0 6px}
main.legal .updated{color:var(--slate);font-family:var(--font-mono);font-size:.82rem;margin:0}
main.legal .status-chip{display:inline-flex;align-items:center;gap:8px;margin-top:16px;padding:8px 14px;border-radius:999px;background:rgba(111,217,174,.16);color:#1f8a63;font-size:.85rem;font-weight:500}
main.legal .status-chip .dot{width:8px;height:8px;border-radius:50%;background:#2bb673}
main.legal section{padding:0;margin-top:34px}
main.legal h2{font-size:1.25rem;margin:0 0 12px}
main.legal p{color:var(--ink-soft);margin:0 0 12px}
main.legal ul{color:var(--ink-soft);padding-left:20px;margin:0 0 12px}
main.legal li{margin:6px 0}
main.legal a{color:var(--bp-teal);font-weight:500}
main.legal address{font-style:normal;color:var(--ink-soft);line-height:1.7}
.infobox{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:20px 22px;margin:10px 0}
.infobox .row{display:flex;flex-direction:column;gap:3px;padding:12px 0;border-bottom:1px solid var(--line)}
.infobox .row:last-child{border-bottom:0}
.infobox .label{color:var(--slate);font-size:.82rem}
.infobox strong{color:var(--ink);font-size:1.02rem}
.placeholder{display:inline-block;background:rgba(60,127,208,.12);color:#2f6bb0;padding:2px 10px;border-radius:999px;font-size:.85rem}

/* ===== BewerberPipe product subpage ===== */
.bp-hero{background:radial-gradient(1100px 480px at 82% -12%,rgba(20,201,214,.22),transparent 60%),linear-gradient(180deg,var(--navy-deep),var(--navy-deep-soft));color:#EAF1FB;padding:70px 0 84px}
.bp-hero .container{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
@media(max-width:900px){.bp-hero .container{grid-template-columns:1fr;gap:32px}}
.bp-hero .eyebrow{color:var(--mint)}
.bp-logo{height:46px;width:auto;margin:16px 0 6px}
.bp-hero h1{font-size:clamp(2rem,4.6vw,3.1rem);color:#fff;margin:6px 0 0}
.bp-hero .lead{font-size:1.16rem;color:#B9CBE4;max-width:620px;margin:18px 0 26px}
.cta-row{display:flex;gap:14px;flex-wrap:wrap}
.bp-trust{margin-top:24px;font-family:var(--font-mono);font-size:.76rem;letter-spacing:.05em;color:#8FA6C6;display:flex;gap:18px;flex-wrap:wrap}
.flow{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-lg);padding:22px}
.flow-step{display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-md);padding:14px 16px;margin:10px 0}
.flow-step .ic{flex:0 0 40px;height:40px;border-radius:11px;display:grid;place-items:center;background:var(--gradient-duo);color:#06203f;font-size:1.1rem}
.flow-step b{display:block;color:#fff;font-family:var(--font-display);font-size:.98rem}
.flow-step small{color:#9FB4D4}
.flow-arrow{text-align:center;color:#5f7aa3}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:900px){.cards{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.cards{grid-template-columns:1fr}}
.fcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:24px}
.fcard .ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--surface-soft);color:var(--bp-teal);margin-bottom:14px;font-size:1.2rem}
.fcard h3{font-size:1.1rem;margin-bottom:8px}
.fcard p{margin:0;color:var(--ink-soft);font-size:.96rem}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:s}
@media(max-width:860px){.steps{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.steps{grid-template-columns:1fr}}
.step{padding:22px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface-soft)}
.step:before{counter-increment:s;content:counter(s);font-family:var(--font-display);font-weight:700;font-size:.9rem;width:30px;height:30px;border-radius:9px;background:var(--gradient-duo);color:#06203f;display:grid;place-items:center;margin-bottom:12px}
.step h3{font-size:1.02rem;margin-bottom:6px}.step p{margin:0;color:var(--ink-soft);font-size:.93rem}
.split{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
@media(max-width:860px){.split{grid-template-columns:1fr;gap:24px}}
.pill-list{list-style:none;padding:0;margin:18px 0 0}
.pill-list li{display:flex;gap:11px;align-items:flex-start;margin:12px 0;color:var(--ink-soft)}
.pill-list .ck{flex:0 0 22px;height:22px;border-radius:7px;background:rgba(111,217,174,.22);color:var(--bp-teal);display:grid;place-items:center;margin-top:2px}
.panel{background:linear-gradient(180deg,var(--navy-deep),var(--navy-deep-soft));color:#EAF1FB;border-radius:var(--radius-lg);padding:30px;box-shadow:var(--shadow)}
.kv{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.1);font-size:.95rem}
.kv:last-child{border-bottom:0}.kv span:first-child{color:#9FB4D4}
.prices{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:860px;margin:0 auto}
@media(max-width:720px){.prices{grid-template-columns:1fr}}
.price{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:30px;position:relative}
.price.featured{border:2px solid transparent;background:linear-gradient(var(--surface),var(--surface)) padding-box,var(--gradient-duo) border-box;box-shadow:var(--shadow)}
.price .tag{position:absolute;top:-12px;right:22px;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;background:var(--gradient-duo);color:#06203f;padding:5px 12px;border-radius:999px}
.price h3{font-size:1.2rem}
.price .amount{font-family:var(--font-display);font-weight:700;font-size:2.1rem;margin:10px 0 2px}
.price .amount small{font-size:.9rem;color:var(--slate);font-weight:500}
.price .note{font-size:.82rem;color:var(--slate);margin:0}
.price ul{list-style:none;padding:0;margin:18px 0 24px}
.price li{display:flex;gap:9px;margin:9px 0;color:var(--ink-soft);font-size:.95rem}
.price li .ck{color:var(--bp-teal);font-weight:700}
.faq{max-width:820px;margin:0 auto}
details{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:4px 20px;margin:12px 0}
summary{cursor:pointer;font-family:var(--font-display);font-weight:600;padding:16px 0;list-style:none;display:flex;justify-content:space-between;gap:12px}
summary::-webkit-details-marker{display:none}
summary:after{content:'+';color:var(--bp-teal);font-weight:700}
details[open] summary:after{content:'\2013'}
details p{margin:0 0 16px;color:var(--ink-soft)}
.cta-band{background:linear-gradient(120deg,var(--navy-deep),var(--navy-deep-soft));color:#fff;border-radius:var(--radius-lg);padding:48px;text-align:center;box-shadow:var(--shadow)}
.cta-band h2{font-size:clamp(1.6rem,3vw,2.2rem)}
.cta-band p{color:#B9CBE4;max-width:560px;margin:14px auto 26px}
.alt{background:var(--surface)}

/* ===== ChildNexus (Produktkarte + Unterseite) ===== */
:root{--cx-blue:#1AA6E5;--cx-cyan:#36BDEE}
.childnexus-media{background:linear-gradient(135deg,rgba(26,166,229,.12),rgba(20,201,214,.14))}
.card-media.childnexus-media .product-logo{height:auto;max-height:58px;width:auto}
#childnexus .card-cta{color:var(--cx-blue)}
.cx-wordmark{font-family:var(--font-display);font-weight:700;font-size:clamp(1.7rem,4vw,2.4rem);letter-spacing:-.01em;margin:16px 0 4px}
.cx-wordmark span:first-child{color:var(--cx-blue)}
.cx-wordmark span:last-child{color:#EAF1FB}
.cx-kicker{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:#7FD3F2;margin:0 0 2px}
body.cx .bp-hero .eyebrow{color:#7FD3F2}
body.cx .fcard .ic{color:var(--cx-blue);background:rgba(26,166,229,.10)}
body.cx .pill-list .ck{color:var(--cx-blue);background:rgba(26,166,229,.16)}
body.cx .card-cta{color:var(--cx-blue)}
body.cx summary:after,body.cx details[open] summary:after{color:var(--cx-blue)}