/* =========================================================
   SMITSO – Design System (Single File)
   Struktur:
   1) Tokens
   2) Layout Shell (#smitso-layout)
   3) Typography
   4) Components (Buttons, Cards, Lists, Grid, FAQ)
   5) Sections (Hero, Positioning)
   ========================================================= */

/* ---------------------------
   1) TOKENS (Global)
---------------------------- */
:root{
  --smitso-red:#D31D31;

  --smitso-bg0:#070d18;
  --smitso-bg1:#0b1220;
  --smitso-bg2:#0e1626;
  --smitso-bg3:#16233b;

  --smitso-text:#ffffff;
  --smitso-muted:#DADADA;

  --smitso-line:rgba(255,255,255,.08);
  --smitso-cardA:rgba(255,255,255,0.06);
  --smitso-cardB:rgba(255,255,255,0.04);

  --smitso-radius:28px;
  --smitso-shadow:0 18px 50px rgba(0,0,0,0.45);
}

/* ---------------------------
   2) LAYOUT SHELL (Scoped)
---------------------------- */
#smitso-layout{
  background: radial-gradient(circle at top center, #101b2f 0%, var(--smitso-bg1) 60%, var(--smitso-bg0) 100%);
  padding: clamp(18px, 3.5vw, 28px) 0;
}

#smitso-layout .smitso-container{
  max-width:1100px;
  margin:0 auto;
  padding: clamp(18px, 3.5vw, 28px);
}

#smitso-layout .smitso-surface{
  background: radial-gradient(circle at top left, var(--smitso-bg3) 0%, var(--smitso-bg2) 60%, var(--smitso-bg1) 100%);
  border-radius: var(--smitso-radius);
  box-shadow: var(--smitso-shadow);
  padding: clamp(60px, 8vw, 120px);
}

/* ---------------------------
   3) TYPOGRAPHY
---------------------------- */
#smitso-layout .smitso-kicker{
  font: 500 14px/1.4 Roboto, system-ui, -apple-system, Segoe UI, Arial;
  letter-spacing:.12em;
  text-transform:uppercase;
  color: var(--smitso-muted);
  opacity:.9;
  margin-bottom:14px;
}

#smitso-layout .smitso-h1{
  font: 700 clamp(34px, 4.2vw, 54px)/1.08 Roboto, system-ui, -apple-system, Segoe UI, Arial;
  color: var(--smitso-text);
  margin:0 0 18px 0;
}

#smitso-layout .smitso-h2{
  font: 700 clamp(26px, 3.2vw, 36px)/1.15 Roboto, system-ui, -apple-system, Segoe UI, Arial;
  color: var(--smitso-text);
  margin:0 0 14px 0;
}

#smitso-layout .smitso-p{
  font: 400 16px/1.7 Roboto, system-ui, -apple-system, Segoe UI, Arial;
  color: var(--smitso-muted);
  margin:0 0 18px 0;
  max-width:75ch;
}

#smitso-layout .smitso-note{
  margin-top:12px;
  font: 400 13px/1.6 Roboto, system-ui, -apple-system, Segoe UI, Arial;
  color: var(--smitso-muted);
  opacity:.85;
}

/* ---------------------------
   4) COMPONENTS
---------------------------- */

/* Buttons */
#smitso-layout .smitso-btnrow{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:10px;
}

#smitso-layout .smitso-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  background: var(--smitso-red);
  color: var(--smitso-text);
  padding:14px 20px;
  border-radius:14px;
  text-decoration:none !important;
  font: 500 16px/1 Roboto, system-ui, -apple-system, Segoe UI, Arial;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
  box-shadow: 0 14px 28px rgba(0,0,0,0.35);
  border:0;
  cursor:pointer;
}
#smitso-layout .smitso-btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: 0 18px 40px rgba(0,0,0,0.45);
}

#smitso-layout .smitso-btn.secondary{
  background: rgba(255,255,255,0.10);
  box-shadow:none;
  border:1px solid rgba(255,255,255,0.14);
}
#smitso-layout .smitso-btn.secondary:hover{
  filter:none;
  transform: translateY(-1px);
  box-shadow: 0 16px 34px rgba(0,0,0,0.35);
}

/* Spacing helpers */
#smitso-layout .smitso-section{
  margin-top: clamp(56px, 6vw, 90px);
}

/* Grid + Cards */
#smitso-layout .smitso-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:14px;
  margin-top:12px;
}

#smitso-layout .smitso-card{
  background: linear-gradient(145deg, var(--smitso-cardA), var(--smitso-cardB));
  border-radius:20px;
  padding:18px;
  border:1px solid var(--smitso-line);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
#smitso-layout .smitso-card:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.35);
  border-color: rgba(255,255,255,0.14);
}

#smitso-layout .smitso-card h3{
  font: 600 18px/1.25 Roboto, system-ui, -apple-system, Segoe UI, Arial;
  color: var(--smitso-text);
  margin:0 0 8px 0;
}
#smitso-layout .smitso-card p{
  font: 400 15.5px/1.7 Roboto, system-ui, -apple-system, Segoe UI, Arial;
  color: var(--smitso-muted);
  margin:0;
}

/* Bullets */
#smitso-layout .smitso-bullets{
  margin:10px 0 0 0;
  padding-left:18px;
  color: var(--smitso-muted);
  font: 400 16px/1.7 Roboto, system-ui, -apple-system, Segoe UI, Arial;
}
#smitso-layout .smitso-bullets li{ margin:6px 0; }

/* Steps */
#smitso-layout .smitso-steps{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
  margin-top:12px;
}

#smitso-layout .smitso-step{
  background: linear-gradient(145deg, var(--smitso-cardA), var(--smitso-cardB));
  border-radius:20px;
  padding:18px;
  border:1px solid var(--smitso-line);
}

#smitso-layout .smitso-step .num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:12px;
  background: rgba(211,29,49,0.18);
  border:1px solid rgba(211,29,49,0.30);
  color: var(--smitso-text);
  font: 700 16px/1 Roboto, system-ui, -apple-system, Segoe UI, Arial;
  margin-bottom:10px;
}

#smitso-layout .smitso-step h3{
  margin:0 0 8px 0;
  font: 600 18px/1.25 Roboto, system-ui, -apple-system, Segoe UI, Arial;
  color: var(--smitso-text);
}

#smitso-layout .smitso-step p{
  margin:0;
  font: 400 15.5px/1.7 Roboto, system-ui, -apple-system, Segoe UI, Arial;
  color: var(--smitso-muted);
}

/* FAQ */
#smitso-layout .smitso-faq{
  margin-top:12px;
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}

#smitso-layout details.smitso-faqitem{
  background: linear-gradient(145deg, var(--smitso-cardA), var(--smitso-cardB));
  border-radius:18px;
  padding:14px 16px;
  border:1px solid var(--smitso-line);
}

#smitso-layout details.smitso-faqitem summary{
  cursor:pointer;
  list-style:none;
  font: 600 16px/1.4 Roboto, system-ui, -apple-system, Segoe UI, Arial;
  color: var(--smitso-text);
  outline:none;
}
#smitso-layout details.smitso-faqitem summary::-webkit-details-marker{ display:none; }

#smitso-layout details.smitso-faqitem p{
  margin:10px 0 0 0;
  color: var(--smitso-muted);
  font: 400 15.5px/1.7 Roboto, system-ui, -apple-system, Segoe UI, Arial;
}

/* Responsive grids */
@media (min-width: 760px){
  #smitso-layout .smitso-grid{ grid-template-columns: repeat(2, 1fr); }
  #smitso-layout .smitso-steps{ grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px){
  #smitso-layout .smitso-grid{ grid-template-columns: repeat(3, 1fr); }
}

/* ---------------------------
   5) SECTIONS
---------------------------- */

/* Hero spacing after bottom */
#smitso-layout section[aria-label="Hero"]{
  margin-bottom: 120px;
}
@media (max-width: 980px){
  #smitso-layout section[aria-label="Hero"]{ margin-bottom: 80px; }
}
@media (max-width: 767px){
  #smitso-layout section[aria-label="Hero"]{ margin-bottom: 70px; }
}

/* Hero 2 columns */
#smitso-layout .smitso-hero{
  display:grid;
  grid-template-columns: 1.1fr 1fr;
  align-items:center;
  gap: clamp(30px, 5vw, 70px);
}

#smitso-layout .smitso-hero-image img{
  width:100%;
  height:auto;
  border-radius:20px;
  box-shadow:0 25px 60px rgba(0,0,0,0.45);
}

@media (max-width: 980px){
  #smitso-layout .smitso-hero{ grid-template-columns: 1fr; }
  #smitso-layout .smitso-hero-image{ grid-row:1; }
  #smitso-layout .smitso-hero > div:first-child{ grid-row:2; }
}

/* Positioning Section (formerly Block12) */
.smitso-positioning{
  padding:80px 0;
  background:
    radial-gradient(900px 400px at 50% 0%, rgba(211,29,49,.16), transparent 60%),
    radial-gradient(900px 500px at 50% 110%, rgba(255,255,255,.06), transparent 60%),
    linear-gradient(180deg, var(--smitso-bg1), #0e1a2c);
}

.smitso-positioning .wrap{
  width:min(1100px, calc(100% - 48px));
  margin:0 auto;
}

.smitso-positioning .card{
  background:
    radial-gradient(700px 360px at 20% 0%, rgba(255,255,255,.08), transparent 65%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid var(--smitso-line);
  border-radius:22px;
  padding:46px 44px;
  box-shadow: 0 30px 70px rgba(0,0,0,.45);
  position:relative;
  overflow:hidden;
}

.smitso-positioning .card:before{
  content:"";
  position:absolute;
  inset:-2px;
  background: radial-gradient(700px 260px at 35% -10%, rgba(211,29,49,.18), transparent 60%);
  pointer-events:none;
}

.smitso-positioning h2{
  margin:0 0 18px;
  color:var(--smitso-text);
  font-size: clamp(28px, 3vw, 38px);
  line-height:1.15;
  letter-spacing:-.02em;
  position:relative;
  z-index:1;
}

.smitso-positioning .lead{
  margin:0 0 26px;
  color:var(--smitso-muted);
  font-size:16px;
  line-height:1.7;
  position:relative;
  z-index:1;
}

.smitso-positioning .list{
  margin:0 0 26px;
  padding:0;
  list-style:none;
  position:relative;
  z-index:1;
}

.smitso-positioning .list li{
  position:relative;
  padding-left:22px;
  margin:10px 0;
  color:var(--smitso-muted);
  font-size:15.5px;
  line-height:1.7;
}
.smitso-positioning .list li::marker{ content:""; }

.smitso-positioning .list li:before{
  content:"";
  position:absolute;
  left:0;
  top:9px;
  width:7px;
  height:7px;
  background:var(--smitso-red);
  border-radius:50%;
  box-shadow:0 0 0 4px rgba(211,29,49,.12);
}

.smitso-positioning .cta{
  margin:18px 0 10px;
  color:var(--smitso-muted);
  font-size:15.5px;
  line-height:1.7;
  position:relative;
  z-index:1;
}

.smitso-positioning .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px 18px;
  border-radius:12px;
  background:var(--smitso-red);
  color:#fff !important;
  text-decoration:none;
  font-weight:700;
  box-shadow: 0 14px 34px rgba(211,29,49,.25);
  transition: transform .15s ease, filter .15s ease;
  position:relative;
  z-index:1;
}
.smitso-positioning .btn:hover{ transform: translateY(-1px); filter:brightness(1.03); }
.smitso-positioning .btn:active{ transform: translateY(0px); }

.smitso-positioning .divider{
  height:1px;
  background:var(--smitso-line);
  margin:28px 0;
  position:relative;
  z-index:1;
}

.smitso-positioning h3{
  margin:0 0 14px;
  color:var(--smitso-text);
  font-size:18px;
  letter-spacing:-.01em;
  position:relative;
  z-index:1;
}

.smitso-positioning .p{
  margin:0 0 14px;
  color:var(--smitso-muted);
  font-size:15.5px;
  line-height:1.8;
  position:relative;
  z-index:1;
}

@media (max-width: 720px){
  .smitso-positioning{ padding:60px 0; }
  .smitso-positioning .card{ padding:34px 22px; border-radius:18px; }
}

/* ===== SMITSO Editorial (unter Hero) ===== */
.smitso-editorial{
  padding:100px 20px;
  font-family:Roboto,system-ui,-apple-system,Segoe UI,Arial,sans-serif;
  color:#DADADA;
}

.smitso-editorial h2{
  font-size:34px;
  font-weight:700;
  color:#fff;
  margin:0 0 18px;
}

.smitso-editorial p{
  font-size:15px;
  line-height:1.8;
  margin:0 0 18px;
}

.smitso-block{
  margin:0 0 90px;
  padding-left:40px;
  position:relative;
}
.smitso-block:last-child{ margin-bottom:0; }

.smitso-block:before{
  content:"";
  position:absolute;
  left:0; top:6px; bottom:6px;
  width:2px;
  background:linear-gradient(to bottom, rgba(214,29,49,.70), rgba(214,29,49,.15));
}
.smitso-block:after{
  content:"";
  position:absolute;
  left:-5px; top:6px;
  width:10px; height:10px;
  background:#D31D31;
  border-radius:50%;
  box-shadow:0 0 0 6px rgba(214,29,49,.15);
}

/* Liste: rote Punkte statt Standard-Bullets */
.smitso-list{
  margin:40px 0 0;
  padding:0;
  list-style:none;
}
.smitso-list li{
  position:relative;
  padding-left:22px;
  margin-bottom:14px;
  font-size:15.5px;
  line-height:1.7;
  color:#E2E2E2;
}
.smitso-list li::marker{ content:""; }
.smitso-list li:before{
  content:"";
  position:absolute;
  left:0;
  top:9px;
  width:6px;
  height:6px;
  background:#D31D31;
  border-radius:50%;
}

/* FAQ */
/* FAQ (Global) – nutzt das gleiche Markup wie im #smitso-layout (details/summary) */
.smitso-faq{
  margin-top:12px;
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}

details.smitso-faqitem{
  background: linear-gradient(145deg, var(--smitso-cardA), var(--smitso-cardB));
  border-radius:18px;
  padding:14px 16px;
  border:1px solid var(--smitso-line);
}

details.smitso-faqitem summary{
  cursor:pointer;
  list-style:none;
  font: 600 16px/1.4 Roboto, system-ui, -apple-system, Segoe UI, Arial;
  color: var(--smitso-text);
  outline:none;
}
details.smitso-faqitem summary::-webkit-details-marker{ display:none; }

details.smitso-faqitem p{
  margin:10px 0 0 0;
  color: var(--smitso-muted);
  font: 400 15.5px/1.7 Roboto, system-ui, -apple-system, Segoe UI, Arial;
}

@media (max-width:768px){
  .smitso-editorial{ padding:70px 20px; }
  .smitso-block{ padding-left:25px; }
}

/* =========================
   SMITSO Component: Process (Steps / Timeline)
   ========================= */

.smitso-process{
  width:100vw;
  margin-left:calc(-50vw + 50%);
  background: radial-gradient(circle at top left, #16233b 0%, #0e1626 60%, #0b1220 100%);
  padding:100px 20px;
}

.smitso-process .smitso-process__container{
  max-width:1100px;
  margin:0 auto;
  border-radius:28px;
  padding:70px;
  background: linear-gradient(145deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  box-shadow: 0 40px 80px rgba(0,0,0,0.55);
}

.smitso-process .smitso-process__title{
  text-align:center;
  font-size:44px;
  margin:0 0 20px 0;
  color:#ffffff;
}

.smitso-process .smitso-process__sub{
  text-align:center;
  color:#b8c4d9;
  margin:0 0 100px 0;
  font-size:18px;
}

/* Step */
.smitso-process .smitso-process__step{
  display:grid;
  grid-template-columns:100px 1fr;
  column-gap:50px;
  margin-bottom:100px;
  align-items:flex-start;
}

/* Badge column */
.smitso-process .smitso-process__badgeWrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  padding-top:5px;
}

.smitso-process .smitso-process__badge{
  width:65px;
  height:65px;
  border-radius:50%;
  border:2px solid #e30613;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:600;
  font-size:14px;
  color:#ffffff;
  background:rgba(227,6,19,0.08);
  box-shadow:0 0 25px rgba(227,6,19,0.35);
}

.smitso-process .smitso-process__line{
  width:2px;
  height:160px;
  background:linear-gradient(to bottom,#e30613,rgba(227,6,19,0.05));
  margin-top:30px;
}

.smitso-process .smitso-process__step:last-child .smitso-process__line{
  display:none;
}

/* Text */
.smitso-process .smitso-process__step h3{
  color:#ffffff;
  font-size:28px;
  margin:0 0 15px 0;
  line-height:1.3;
}

.smitso-process .smitso-process__step p{
  color:#c7d2e6;
  line-height:1.7;
  margin:0 0 18px 0;
}

.smitso-process .smitso-process__step ul{
  margin-top:20px;
  padding-left:22px;
}

.smitso-process .smitso-process__step li{
  margin-bottom:10px;
  color:#aebcd3;
}

.smitso-process .smitso-process__step li::marker{
  color:#e30613;
}

/* Mobile */
@media(max-width:768px){
  .smitso-process{
    padding:100px 20px;
  }

  .smitso-process .smitso-process__container{
    padding:60px 35px;
  }

  .smitso-process .smitso-process__step{
    grid-template-columns:1fr;
  }

  .smitso-process .smitso-process__badgeWrap{
    flex-direction:row;
    justify-content:flex-start;
    margin-bottom:20px;
    gap:16px;
  }

  .smitso-process .smitso-process__line{
    display:none;
  }
}

/* === FIX: smitso-section auch außerhalb von #smitso-layout === */
/* === GLOBAL helpers (außerhalb von #smitso-layout) === */
.smitso-section{
  margin-top: clamp(56px, 6vw, 90px);
}

/* Editorial außerhalb von #smitso-layout sauber & konsistent */
.smitso-editorial{
  padding:100px 20px;
  font-family:Roboto,system-ui,-apple-system,Segoe UI,Arial,sans-serif;
  color: var(--smitso-muted);
  background: radial-gradient(circle at top center, #101b2f 0%, var(--smitso-bg1) 60%, var(--smitso-bg0) 100%);
}

.smitso-editorial .smitso-container{
  max-width:1100px;
  margin:0 auto;
  padding: clamp(18px, 3.5vw, 28px);
}

.smitso-editorial h2{
  font-size:34px;
  font-weight:700;
  color: var(--smitso-text);
  margin:0 0 18px;
}

.smitso-editorial p{
  font-size:15px;
  line-height:1.8;
  margin:0 0 18px;
  color: var(--smitso-muted);
}

@media (max-width:768px){
  .smitso-editorial{ padding:70px 20px; }
}
/* SMITSO-MARK-1771080193 */

.smitso-editorial h2{ color:#fff; }
.smitso-editorial p{ color:#DADADA; }/* SMITSO-MARK-1771080193 */

/* === GLOBAL fallback: .smitso-container auch außerhalb von #smitso-layout === */
.smitso-container{
  max-width:1100px;
  margin:0 auto;
  padding: clamp(18px, 3.5vw, 28px);
}

/* =========================================================
   SMITSO GLOBAL (HYBRID)
   Außen hell – innen Dark-Card
   Gilt für Standard-Seiten
   AUSGENOMMEN: Startseite + Blank-Templates + DATEV Landingpage
   ========================================================= */

body.page-template-default:not(.home)
:not(.page-template-page-template-blank)
:not(.page-id-3398){

  --smitso-bg0:#0b1220;
  --smitso-bg1:#0e1626;
  --smitso-text:#eef2ff;
  --smitso-muted:#c7d2e6;

  --smitso-shell:#f5f6f8;
  --smitso-shell2:rgba(245,246,248,.65);

  --smitso-card:rgba(14,22,38,.92);
  --smitso-card-border:rgba(255,255,255,.08);
}

/* Außen */
body.page-template-default:not(.home)
:not(.page-template-page-template-blank)
:not(.page-id-3398) #et-main-area{
  background:
    radial-gradient(circle at top center, var(--smitso-shell) 0%, var(--smitso-shell2) 55%, #ffffff 100%);
  padding: clamp(28px, 4vw, 60px) 0;
}

/* Innen Dark Card */
body.page-template-default:not(.home)
:not(.page-template-page-template-blank)
:not(.page-id-3398) #et-main-area #main-content .container{
  max-width:1100px;
  margin:0 auto;
  padding: clamp(24px, 3.6vw, 56px);
  border-radius:28px;
  background: var(--smitso-card);
  border:1px solid var(--smitso-card-border);
  box-shadow: 0 22px 60px rgba(0,0,0,.20);
}

/* Typography */
body.page-template-default:not(.home)
:not(.page-template-page-template-blank)
:not(.page-id-3398) #main-content h1,
body.page-template-default:not(.home)
:not(.page-template-page-template-blank)
:not(.page-id-3398) #main-content h2,
body.page-template-default:not(.home)
:not(.page-template-page-template-blank)
:not(.page-id-3398) #main-content h3{
  color: var(--smitso-text);
}

body.page-template-default:not(.home)
:not(.page-template-page-template-blank)
:not(.page-id-3398) #main-content p,
body.page-template-default:not(.home)
:not(.page-template-page-template-blank)
:not(.page-id-3398) #main-content li{
  color: var(--smitso-muted);
}

/* Buttons */
body.page-template-default:not(.home)
:not(.page-template-page-template-blank)
:not(.page-id-3398) #main-content .et_pb_button{
  color:#fff !important;
  background:#D31D31 !important;
  border-color:transparent !important;
  border-radius:12px !important;
}

/* ========================================================= 
   STARTSEITE FIXES
   ========================================================= */

/* FIX: Header-Streifen entfernen */
body.home #page-container{
  padding-top:0 !important;
}
body.home #et-main-area{
  margin-top:0 !important;
}

/* FIX: HERO Untertitel auf hellem Bild LESBAR (kein Fullwidth Header, sondern erste Section/Textmodul) */
body.home .et_pb_section:first-of-type .et_pb_text_inner p,
body.home .et_pb_section:first-of-type .et_pb_text p,
body.home .et_pb_section:first-of-type p{
  color: rgba(15, 25, 40, 0.78) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.55) !important;
}

/* =========================================================
   HOME HERO TEXT FIX (Divi Section 0 + 1)
   ========================================================= */

body.home .et_pb_section_0 .et_pb_text_inner p,
body.home .et_pb_section_1 .et_pb_text_inner p{
  color:#1f2933 !important;
  text-shadow:none !important;
}

/* Falls du es etwas dunkler willst */
body.home .et_pb_section_0 .et_pb_text_inner strong,
body.home .et_pb_section_1 .et_pb_text_inner strong{
  color:#111827 !important;
}

/* =========================================================
   SMITSO HOME HERO (Code-Sektion, ersetzt Divi Hero)
   ========================================================= */

/* 1) Alte Divi Hero-Sektionen auf der Startseite AUS */
body.home .et_pb_section_0,
body.home .et_pb_section_1{
  display:none !important;
}

/* 2) Fix: Abstand/Streifen oberhalb des ersten Bereichs vermeiden */
body.home #page-container{
  padding-top:0 !important;
}
body.home #et-main-area{
  margin-top:0 !important;
}

/* 3) New Hero: Variablen (hier Farben schnell anpassen) */
body.home{
  --smitso-hero-h1: #1f2933;
  --smitso-hero-sub: rgba(15, 25, 40, 0.86);
  --smitso-hero-sub-shadow: 0 1px 0 rgba(255,255,255,0.55);
  --smitso-hero-btn-bg: #D31D31;
  --smitso-hero-btn-text: #ffffff;
}

/* 4) Hero Container */
body.home .smitso-home-hero{
  position:relative;
  width:100%;
  padding: clamp(36px, 5vw, 70px) 0;
  background-image:
    linear-gradient(90deg, rgba(245,246,248,0.80) 0%, rgba(245,246,248,0.55) 100%),
    url(https://smitso.de/wp-content/uploads/2026/02/it-betreuung-hintergrund-helles-buero.png);
  background-size:cover;
  background-position:center;
}

body.home .smitso-home-hero__wrap{
  width:min(1400px, calc(100% - 48px));
  margin:0 auto;
}

body.home .smitso-home-hero__grid{
  display:grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(18px, 3vw, 44px);
  align-items:center;
}

/* 5) Typography (mit !important, damit es sicher gewinnt) */
body.home .smitso-home-hero__h1{
  margin:0 0 14px 0;
  font: 700 clamp(34px, 4.0vw, 52px)/1.06 Roboto, system-ui, -apple-system, Segoe UI, Arial;
  color: var(--smitso-hero-h1) !important;
  letter-spacing:-0.02em;
}

body.home .smitso-home-hero__sub{
  margin:0 0 22px 0;
  font: 500 16px/1.75 Roboto, system-ui, -apple-system, Segoe UI, Arial;
  color: var(--smitso-hero-sub) !important;
  text-shadow: var(--smitso-hero-sub-shadow) !important;
  max-width: 60ch;
}

/* Falls der Subtext bei dir als <p> kommt (Sicherheitsnetz) */
body.home .smitso-home-hero__content p{
  color: var(--smitso-hero-sub) !important;
  text-shadow: var(--smitso-hero-sub-shadow) !important;
}

/* 6) CTA */
body.home .smitso-home-hero__cta{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

body.home .smitso-home-hero__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 18px;
  border-radius:12px;
  background: var(--smitso-hero-btn-bg) !important;
  color: var(--smitso-hero-btn-text) !important;
  text-decoration:none !important;
  font: 700 16px/1 Roboto, system-ui, -apple-system, Segoe UI, Arial;
  box-shadow: 0 14px 34px rgba(211,29,49,.25);
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}

body.home .smitso-home-hero__btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.03);
  box-shadow: 0 18px 44px rgba(211,29,49,.28);
}

/* 7) Media */
body.home .smitso-home-hero__media img{
  width:100%;
  height:auto;
  border-radius:20px;
  box-shadow: 0 18px 55px rgba(0,0,0,0.25);
  display:block;
}

/* 8) Responsive */
@media (max-width: 980px){
  body.home .smitso-home-hero__grid{
    grid-template-columns: 1fr;
  }
  body.home .smitso-home-hero__media{ order:1; }
  body.home .smitso-home-hero__content{ order:2; }
}

/* =========================================================
   FIX: Typografie im Hybrid-Layout sauber erzwingen
   ========================================================= */

body.page-template-default:not(.home)
:not(.page-template-page-template-blank)
:not(.page-id-3398)
#et-main-area #main-content {

  color: var(--smitso-text);
}

body.page-template-default:not(.home)
:not(.page-template-page-template-blank)
:not(.page-id-3398)
#et-main-area #main-content h1,
body.page-template-default:not(.home)
:not(.page-template-page-template-blank)
:not(.page-id-3398)
#et-main-area #main-content h2,
body.page-template-default:not(.home)
:not(.page-template-page-template-blank)
:not(.page-id-3398)
#et-main-area #main-content h3 {

  color: var(--smitso-text) !important;
}

body.page-template-default:not(.home)
:not(.page-template-page-template-blank)
:not(.page-id-3398)
#et-main-area #main-content p,
body.page-template-default:not(.home)
:not(.page-template-page-template-blank)
:not(.page-id-3398)
#et-main-area #main-content li {

  color: var(--smitso-muted) !important;
}