/*
Theme Name:   NC NordConsulting – Divi Child
Theme URI:    https://ncnordconsulting.de
Description:  Divi-Child-Theme der NC NordConsulting Website. Enthält CI-Farben, Typografie und alle Layout-Stile der Seiteninhalte. Erfordert das Divi-Theme von Elegant Themes als Parent.
Author:       NC NordConsulting
Template:     Divi
Version:      1.0.0
License:      Für die Nutzung durch NC NordConsulting
Text Domain:  nc-divi-child
*/

/* ============================================================
   Divi-Anpassungen (Struktur der importierten Seiten)
   ============================================================ */
body, .et_pb_section, .et_pb_text, .et_pb_code{font-family:'Barlow',sans-serif}
h1,h2,h3,h4,.et_pb_module_header{font-family:'Barlow Semi Condensed',sans-serif}
/* Abstände der importierten Sektionen (ersetzt Divi-Standardpadding) */
.et_pb_section.nc-sec{padding:80px 0}
.et_pb_section.nc-sec .et_pb_row{width:100%;max-width:100%;padding:0;margin:0}
.et_pb_section.nc-sec .et_pb_column{margin:0;width:100%}
.et_pb_section.nc-sec .et_pb_code{margin-bottom:0}
.et_pb_section.hero{padding:120px 0 140px}
.et_pb_section.page-hero{padding:80px 0 90px}
.et_pb_section.cta-band{padding:70px 0}
@media(max-width:960px){.et_pb_section.nc-sec{padding:60px 0}}
/* Divi-Header: CI-Farben für Menü */
#main-header .nav li a{font-family:'Barlow',sans-serif;font-weight:600}
#main-header{box-shadow:0 2px 14px rgba(11,46,79,.08)}

/* ============================================================
   NC NordConsulting – CI-Variablen
   Farbwerte hier zentral anpassen (exakte CI-Hexwerte eintragen)
   ============================================================ */
:root{
  --nc-blue:       #005b94;   /* Primärblau (Logo/CI) */
  --nc-blue-dark:  #0b2e4f;   /* Dunkles Marineblau – Header/Footer */
  --nc-accent:     #35a8d0;   /* Frisches Hellblau – "Frischer Wind" */
  --nc-accent-soft:#e3f2f9;   /* Sehr helles Blau für Flächen */
  --nc-sand:       #AD9765;   /* CI-Braun (RGB 173/151/101) – dezenter Warmakzent */
  --nc-sand-light: #cbbb92;   /* Aufgehelltes CI-Braun für dunkle Flächen */
  --nc-grey:       #f4f6f8;   /* Heller Sektionshintergrund */
  --nc-text:       #24303a;   /* Fließtext */
  --nc-muted:      #5c6b78;   /* Sekundärtext */
  --white:#ffffff;

  --font-display:'Barlow Semi Condensed',sans-serif;
  --font-body:'Barlow',sans-serif;
  --radius:6px;
  --shadow:0 10px 30px rgba(11,46,79,.10);
  --maxw:1200px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);color:var(--nc-text);line-height:1.65;background:var(--white);font-size:17px}
img{max-width:100%;display:block}
a{color:var(--nc-blue);text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

h1,h2,h3,h4{font-family:var(--font-display);line-height:1.15;color:var(--nc-blue-dark)}
h1{font-size:clamp(2.2rem,4.6vw,3.6rem);font-weight:800}
h2{font-size:clamp(1.7rem,3.2vw,2.4rem);font-weight:700}
h3{font-size:1.3rem;font-weight:700}
.eyebrow{display:block;font-family:var(--font-body);font-size:.95rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--nc-sand);margin-bottom:.75rem}
.section-grey{background:var(--nc-grey)}
.lead{font-size:1.1rem;color:var(--nc-muted);max-width:760px}

/* ---------- Hero (Startseite) ---------- */
.hero{position:relative;background:linear-gradient(120deg,var(--nc-blue-dark) 0%,var(--nc-blue) 55%,var(--nc-accent) 130%);color:var(--white);overflow:hidden;padding:120px 0 140px}
.hero h1{color:var(--white)}
.hero .eyebrow{color:var(--nc-sand-light)}
.hero p{max-width:640px;font-size:1.15rem;margin:26px 0 38px;color:#e2eef7}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap}
/* Signatur: "Frischer Wind" – Windlinien */
.wind{position:absolute;inset:0;pointer-events:none;opacity:.35}
.wind path{fill:none;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-dasharray:900;stroke-dashoffset:900;animation:wind 6s ease-out infinite}
.wind path:nth-child(2){animation-delay:1.2s;opacity:.6}
.wind path:nth-child(3){animation-delay:2.4s;opacity:.35}
@keyframes wind{0%{stroke-dashoffset:900}60%{stroke-dashoffset:0}100%{stroke-dashoffset:-900}}
@media (prefers-reduced-motion:reduce){.wind path{animation:none;stroke-dashoffset:0}}
.hero-badges{display:flex;gap:34px;flex-wrap:wrap;margin-top:60px}
.hero-badge strong{display:block;font-family:var(--font-display);font-size:2rem;font-weight:800;color:var(--white)}
.hero-badge span{font-size:.9rem;color:#bcd9ea}

/* ---------- Page-Hero (Unterseiten) ---------- */
.page-hero{position:relative;background:linear-gradient(120deg,var(--nc-blue-dark) 0%,var(--nc-blue) 60%,var(--nc-accent) 140%);color:var(--white);overflow:hidden;padding:80px 0 90px}
.page-hero h1{color:var(--white)}
.page-hero .eyebrow{color:var(--nc-sand-light)}
.page-hero p{max-width:820px;font-size:1.1rem;margin-top:20px;color:#e2eef7}

/* ---------- Foto-Slots in Hero-Bereichen ----------
   Legen Sie assets/hero.jpg (Startseite) bzw. assets/header.jpg
   (Unterseiten) ab – die Fotos erscheinen automatisch, dezent
   unter dem Farbverlauf. Fehlen die Dateien, bleibt der Verlauf. */
.hero-photo{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.22;pointer-events:none}

/* ---------- Inhaltsseiten ---------- */
.content-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:56px;align-items:start}
.prose h2{margin-bottom:16px}
.prose p{margin-bottom:16px;color:var(--nc-text)}
.prose a{font-weight:600}
.checklist{list-style:none;margin:10px 0}
.checklist li{padding:9px 0 9px 32px;position:relative}
.checklist li::before{content:"";position:absolute;left:0;top:16px;width:15px;height:8px;border-left:3px solid var(--nc-accent);border-bottom:3px solid var(--nc-accent);transform:rotate(-45deg)}
.aside-box{background:var(--nc-accent-soft);border-left:5px solid var(--nc-accent);border-radius:8px;padding:26px;margin-bottom:22px}
.aside-box h3{margin-bottom:10px;font-size:1.15rem}
.aside-box p{font-size:.97rem;color:var(--nc-text)}
.aside-box a{font-weight:600}

/* ---------- Über uns / Startseite ---------- */
.about-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center}
.about-card{background:linear-gradient(135deg,var(--nc-blue-dark),var(--nc-blue));border-radius:12px;color:var(--white);padding:44px;box-shadow:var(--shadow)}
.about-card h3{color:var(--white);margin-bottom:14px}
.about-card ul{list-style:none;margin-top:8px}
.about-card li{padding:9px 0 9px 30px;position:relative;color:#dcebf5}
.about-card li::before{content:"";position:absolute;left:0;top:16px;width:16px;height:8px;border-left:3px solid var(--nc-accent);border-bottom:3px solid var(--nc-accent);transform:rotate(-45deg)}
.about-links{margin-top:30px;display:flex;gap:14px;flex-wrap:wrap}

/* ---------- Karten ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:26px;margin-top:50px}
.card{background:var(--white);border-radius:10px;box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;transition:transform .25s}
.card:hover{transform:translateY(-6px)}
.card-head{height:120px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--nc-blue),var(--nc-accent));position:relative}
.card:nth-child(2n) .card-head{background:linear-gradient(135deg,var(--nc-blue-dark),var(--nc-blue))}
.card-head svg{width:52px;height:52px;stroke:#fff;fill:none;stroke-width:1.6}
.card-body{padding:26px 26px 30px;display:flex;flex-direction:column;flex:1}
.card-body h3{margin-bottom:10px;font-size:1.25rem}
.card-body p{color:var(--nc-muted);font-size:.98rem;flex:1}
.card-link{margin-top:18px;font-weight:700;color:var(--nc-blue)}
.card-link:hover{color:var(--nc-accent)}

/* ---------- Software Band ---------- */
.software{background:var(--nc-blue-dark);color:#dcebf5}
.software h2{color:var(--white)}
.software .eyebrow{color:var(--nc-accent)}
.sw-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px;margin-top:46px}
.sw-item{display:block;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:30px 26px;transition:.2s;color:#dcebf5}
.sw-item:hover{background:rgba(255,255,255,.12)}
.sw-item h3{color:var(--nc-accent);margin-bottom:8px;font-size:1.2rem}
.sw-item p{font-size:.95rem}

/* ---------- Themen (Zick-Zack) ---------- */
.topic{display:grid;grid-template-columns:.7fr 1.3fr;gap:50px;align-items:center;padding:42px 0;border-bottom:1px solid #e3e9ee}
.topic:last-child{border-bottom:none}
.topic-visual{background:var(--nc-accent-soft);border-radius:12px;min-height:200px;display:flex;align-items:center;justify-content:center}
.topic-visual svg{width:80px;height:80px;stroke:var(--nc-blue);fill:none;stroke-width:1.4}
.topic p{color:var(--nc-muted);margin:14px 0 0}
.topic:nth-child(even) .topic-visual{order:2}

/* ---------- Kundenstimmen ---------- */
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:26px;margin-top:50px}
.quote{background:var(--white);border-radius:10px;box-shadow:var(--shadow);padding:34px;position:relative}
.quote::before{content:"\201E";font-family:var(--font-display);font-size:4.5rem;line-height:0;color:var(--nc-sand);position:absolute;top:38px;left:26px;opacity:.55}
.quote p{font-style:italic;color:var(--nc-muted);margin-bottom:18px;padding-top:8px}
.quote strong{font-family:var(--font-display);color:var(--nc-blue-dark)}
.quote span{display:block;font-size:.85rem;color:var(--nc-accent);font-weight:600}

/* ---------- Aktuelles ---------- */
.news{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px;margin-top:46px}
.news-item{border:1px solid #e3e9ee;border-left:5px solid var(--nc-accent);border-radius:8px;padding:26px;background:var(--white)}
.news-item h3{font-size:1.1rem;margin-bottom:8px}
.news-item p{font-size:.95rem;color:var(--nc-muted)}

/* ---------- CTA-Band ---------- */
.cta-band{background:linear-gradient(120deg,var(--nc-blue),var(--nc-accent));color:var(--white);text-align:center;padding:70px 0}
.cta-band h2{color:var(--white);margin-bottom:14px}
.cta-band p{max-width:620px;margin:0 auto 30px;color:#eaf6fb}

/* ---------- Kontakt / Formulare ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:60px;margin-top:50px}
.contact-info h3{margin-bottom:16px}
.contact-info p{color:var(--nc-muted);margin-bottom:22px}
.contact-list{list-style:none}
.contact-list li{padding:10px 0 10px 34px;position:relative;color:var(--nc-text)}
.contact-list svg{position:absolute;left:0;top:12px;width:20px;height:20px;stroke:var(--nc-blue);fill:none;stroke-width:1.8}
form{background:var(--white);border-radius:12px;box-shadow:var(--shadow);padding:38px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
label{display:block;font-weight:600;font-size:.9rem;margin:16px 0 6px;color:var(--nc-blue-dark)}
input,select,textarea{width:100%;padding:13px 14px;border:1px solid #cfd9e1;border-radius:var(--radius);font-family:var(--font-body);font-size:1rem;background:#fbfcfd}
input:focus,select:focus,textarea:focus{outline:2px solid var(--nc-accent);border-color:var(--nc-accent)}
.check{display:flex;gap:10px;align-items:flex-start;margin:18px 0;font-size:.9rem;color:var(--nc-muted)}
.check input{width:auto;margin-top:4px}
form .btn{width:100%;margin-top:6px}

/* ---------- Interaktive Kalkulations-Demos ---------- */
.card-highlight{outline:2px solid var(--nc-sand);outline-offset:-2px}
.card-highlight .card-head{background:linear-gradient(135deg,var(--nc-sand),var(--nc-blue))!important}
.feature-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px;margin-top:40px}
.feature-tile{background:var(--white);border:1px solid #e3e9ee;border-top:4px solid var(--nc-sand);border-radius:8px;padding:24px;box-shadow:var(--shadow)}
.feature-tile h3{font-size:1.08rem;margin-bottom:8px}
.feature-tile p{font-size:.94rem;color:var(--nc-muted)}
.tool{background:var(--white);border-radius:12px;box-shadow:var(--shadow);padding:36px;margin-top:34px}
.tool-head{display:flex;align-items:center;gap:14px;margin-bottom:6px}
.tool-badge{font-family:var(--font-display);font-weight:800;font-size:1rem;background:var(--nc-accent-soft);color:var(--nc-blue);border-radius:50%;width:38px;height:38px;display:flex;align-items:center;justify-content:center;flex:none}
.tool h3{font-size:1.35rem}
.tool > p{color:var(--nc-muted);margin-bottom:20px}
.tool-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.tool-inputs label{margin-top:14px}
.tool-inputs .rangeval{float:right;color:var(--nc-blue);font-weight:700}
input[type=range]{-webkit-appearance:none;appearance:none;height:6px;border-radius:3px;background:#d8e4ec;padding:0;border:none;margin:12px 0 4px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;background:var(--nc-blue);cursor:pointer;border:3px solid #fff;box-shadow:0 1px 6px rgba(11,46,79,.35)}
input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--nc-blue);cursor:pointer;border:3px solid #fff;box-shadow:0 1px 6px rgba(11,46,79,.35)}
.tool-result{background:var(--nc-grey);border-radius:10px;padding:26px}
.big-num{font-family:var(--font-display);font-weight:800;font-size:2.3rem;color:var(--nc-blue-dark);line-height:1.1}
.big-num small{font-size:1rem;font-weight:600;color:var(--nc-muted);display:block;font-family:var(--font-body)}
.result-row{display:flex;justify-content:space-between;gap:14px;padding:8px 0;border-bottom:1px dashed #d5dee5;font-size:.98rem}
.result-row:last-of-type{border-bottom:none}
.result-row strong{color:var(--nc-blue-dark)}
.stackbar{display:flex;height:30px;border-radius:6px;overflow:hidden;margin:16px 0 8px}
.stackbar div{transition:width .25s}
.sb-mat{background:var(--nc-blue-dark)}
.sb-fert{background:var(--nc-blue)}
.sb-gk{background:var(--nc-accent)}
.sb-marge{background:var(--nc-sand)}
.legend{display:flex;flex-wrap:wrap;gap:14px;font-size:.82rem;color:var(--nc-muted);margin-bottom:6px}
.legend i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.tool-note{font-size:.85rem;color:var(--nc-muted);margin-top:16px;border-top:1px solid #e3e9ee;padding-top:12px}
.gain{color:#1d7a3f;font-weight:700}
.loss{color:#b23a3a;font-weight:700}
.quiz{background:var(--white);border-radius:12px;box-shadow:var(--shadow);padding:36px;margin-top:36px}
.quiz-item{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid #eef2f5;font-size:1rem}
.quiz-item input{width:auto;margin-top:5px;accent-color:var(--nc-blue)}
.quiz-verdict{margin-top:20px;padding:20px 24px;border-radius:8px;background:var(--nc-accent-soft);border-left:5px solid var(--nc-blue);font-size:1rem}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px;margin-top:46px;counter-reset:step}
.step{background:var(--white);border-radius:10px;box-shadow:var(--shadow);padding:28px;position:relative;counter-increment:step}
.step::before{content:counter(step);font-family:var(--font-display);font-weight:800;font-size:1.1rem;color:#fff;background:var(--nc-sand);width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.step h3{font-size:1.1rem;margin-bottom:8px}
.step p{font-size:.94rem;color:var(--nc-muted)}
@media(max-width:960px){.tool-grid{grid-template-columns:1fr}}

/* ---------- Rechtliches ---------- */
.legal{max-width:860px}
.legal h2{margin:38px 0 12px;font-size:1.4rem}
.legal h3{margin:24px 0 8px;font-size:1.1rem}
.legal p{margin-bottom:14px;color:var(--nc-text)}
.notice{background:#fff7e0;border-left:5px solid #e3b341;border-radius:8px;padding:20px 24px;font-size:.95rem;color:#6b5410;margin-bottom:10px}

/* ---------- Responsive ---------- */
@media(max-width:960px){
  .about-grid,.contact-grid,.content-grid{grid-template-columns:1fr}
  .topic{grid-template-columns:1fr}
  .topic:nth-child(even) .topic-visual{order:0}
  .topic-visual{min-height:140px}
  
  .form-row{grid-template-columns:1fr}
}