/* ============ Concept – Fullbleed, Overlays, Typo ============ */

.concept-page{ overflow-x:hidden; }
:root{
  --side:86px;
  --side-m:20px;
  --arrow:43px;
}

/* Typo */
.concept-page h1, .concept-page h2, .concept-page h3,
.concept-page h4, .concept-page h5, .concept-page h6{
  font-family:"Swear Display", serif !important;
  font-weight:400; font-synthesis:none;
}
.concept-page p, .concept-page .copy, .concept-page li{
  font-family:"Swear Text", serif !important;
  font-weight:400; font-style:normal; font-synthesis:none;
}
.text-white{ color:#fff; } .is-italic{ font-style:italic; } .is-regular{ font-style:normal; }

/* Headline-Größen */
.concept-page h1{ font-size:140px; line-height:.92; letter-spacing:-.02em; }
.concept-page h2{ font-size:80px;  line-height:.95; letter-spacing:-.01em; }
.concept-page h4{ font-size:32px;  line-height:1.15; }
@media (max-width:768px){
  .concept-page h1{ font-size:80px; }
  .concept-page h2{ font-size:60px; }
  .concept-page h4{ font-size:28px; }
}

/* Grid-Padding */
.concept-page .wrap{ padding-left:var(--side); padding-right:var(--side); }
@media (max-width:768px){ .concept-page .wrap{ padding-left:var(--side-m); padding-right:var(--side-m); } }

/* ---------- FULLBLEED ---------- */
.concept-page .fullbleed{
  position:relative; width:100vw;
  margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  overflow:hidden;
}
@supports (width:100dvw){
  .concept-page .fullbleed{ width:100dvw; margin-left:calc(50% - 50dvw); margin-right:calc(50% - 50dvw); }
}
.concept-page section{ margin:0 !important; padding-top:0; }

/* ---------- HERO ---------- */
.hero{ display:block; }
@media (min-width:1025px){ .hero{ height:1080px; min-height:1080px; } }
@media (max-width:1024px){
  .hero{ height:100vh; min-height:100vh; }
  @supports (height:100svh){ .hero{ height:100svh; min-height:100svh; } }
}
.hero--1{ background:url('https://designbymichelle.de/wp-content/uploads/2025/09/Concept_Hero_01_Desktop_Webp.webp') center/cover no-repeat; }
@media (max-width:768px){ .hero--1{ background-image:url('https://designbymichelle.de/wp-content/uploads/2025/09/Concept_Hero_01_Mobil_Webp.webp'); } }

.hero--1 .overlay{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
}
.hero-h1 .hero-h1-small{ display:inline-block; width:3.5ch; }

/* Desktop-Subline exakt wie ursprünglich */
.hero--1 .overlay .hero-sub{
  margin:280px auto 0 !important;
  max-width:min(1200px,100%) !important;
  text-align:center !important;
}

/* Mobil: Headline 40px runter, Subline knapp darunter */
@media (max-width:768px){
  .hero--1 .overlay{ justify-content:flex-start; padding-top:16vh; }
  .hero-h1{ margin-top:40px; }
  .hero--1 .overlay .hero-sub{
    margin:18px 0 0 !important;
    max-width:100% !important;
    text-align:center !important;
  }
}

/* ---------- HERO 2 (LEISTUNGEN) ---------- */
.hero--2{ background:url('https://designbymichelle.de/wp-content/uploads/2025/09/Concept_Hero_02_Desktop_Webp-scaled.webp') center/cover no-repeat; }
@media (max-width:768px){ .hero--2{ background-image:url('https://designbymichelle.de/wp-content/uploads/2025/09/Concept_Hero_02_Mobil_Webp-scaled.webp'); } }
.hero--2 .overlay{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; align-items:stretch;
  padding-top:80px;
}
.leistungen-title{ color:#000; text-align:left; font-style:italic; }
.hero--2 .tiles{ margin-top:100px !important; }
.tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:79px; width:100%; }

/* Blur-Boxen (Desktop) */
.tile-blur{
  min-height:490px !important;
  padding:60px 29px 32px; border-radius:0;
  background:rgba(255,255,255,0.30) !important;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  display:grid; grid-template-rows:120px auto 1fr; align-items:start;
}
.tile-icon{ display:block; width:64px; height:auto; margin:0 auto; align-self:center; }
.tile-title{ margin:90px 0 0 !important; color:#000; text-align:left; }
.tile .copy{ margin:32px 0 0 !important; color:#000; }

/* Dots – standardmäßig aus */
.tiles-dots{ display:none; }

/* ===== MOBIL: Slider 100%, gleiche Höhe, Dots klein & rund (nur mobil) ===== */
@media (max-width:768px){
  .tiles{
    display:flex; gap:0;
    overflow-x:auto; overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-x; overscroll-behavior-x:contain;
    padding-bottom:4px;
  }
  .tiles::-webkit-scrollbar{ display:none; }
  .tiles .tile{ flex:0 0 100%; scroll-snap-align:center; }
  /* gleiche Höhe für ALLE – wird per JS auf höchste Karte gesetzt; Fallback: auto */
  .tiles .tile .tile-blur{
    min-height:var(--tile-eq-h, auto) !important;
    padding:48px 24px 28px; display:block;
  }
  .tile-icon{ margin:0 auto 24px; }
  .tile-title{ margin:0 0 16px !important; }
  .tile .copy{ margin:12px 0 0 !important; }

  .tiles-dots{
    display:flex !important; justify-content:center; gap:8px;
    margin-top:14px; margin-bottom:8px; position:static !important;
  }
  .tiles-dots .dot{
    appearance:none; -webkit-appearance:none;
    width:6px; height:6px; border-radius:50%;
    border:1px solid #000; background:transparent; opacity:.55; padding:0; margin:0;
  }
  .tiles-dots .dot.is-active{ opacity:1; background:#000; }
}

/* ---------- PROCESS ---------- */
.process-section{ position:relative; background:#fff; }
.process-bg{
  position:absolute; inset:0; z-index:1;
  background:url('https://designbymichelle.de/wp-content/uploads/2025/03/Gruppe-maskieren-15@2x-scaled.jpg') center top / cover no-repeat !important;
}
.process-images{ position:absolute; inset:0; z-index:2; pointer-events:none; }
.process-images img{ position:absolute; display:block; }
.image-1{ left:var(--side); top:15%; width:337.5px; }
.image-2{ right:var(--side); top:54%; transform:translateY(-50%); width:171px; }
.image-3{ left:var(--side); top:82%; transform:translateY(-50%); width:220.5px; }

.process-inner{
  position:relative; z-index:3;
  padding-top:460px !important;
  padding-bottom:300px !important;
}
.process-head{ text-align:center !important; }
.process-steps{
  display:grid;
  grid-template-columns:repeat(2, 441px) !important;
  justify-content:space-between;
  column-gap:40px;
  row-gap:170px;
  color:#000;
  padding-left:300px; padding-right:300px;
  margin-top:56px !important;
}
.process-steps .step{ max-width:441px; }
.process-steps .step h4{ margin-bottom:10px; }

/* ===== MOBIL: Process stabil (Bilder aus, Steps untereinander, saubere Abstände) ===== */
@media (max-width:768px){
  .process-images{ display:none !important; }
  .process-inner{ padding-top:80px !important; padding-bottom:120px !important; }
  .process-steps{
    grid-template-columns:1fr !important;
    row-gap:28px; padding-left:var(--side-m); padding-right:var(--side-m);
    margin-top:32px !important;
  }
}

/* ---------- PROCESS EPILOG ---------- */
.process-epilog{
  background:#fff;
  margin-top:80px;
  margin-bottom:420px;
  display:flex; justify-content:flex-end; align-items:flex-start;
}
.process-epilog-text{
  color:#000;
  font-family:"Swear Display", serif !important;
  font-size:32px; line-height:1.15;
  text-align:left;
  white-space:normal;
}
@media (min-width:1025px){ .process-epilog-text{ white-space:nowrap; } }

/* ---------- STRATEGIC ALLY ---------- */
.ally{ margin-top:200px !important; background:#fff; }
.ally-intro .center{
  text-align:center; color:#000;
  margin-top:66px;
  margin-bottom:120px;
}
.ally-split{
  display:grid; grid-template-columns:1fr 1fr;
  width:100%; min-height:720px;
}
.ally-img{ width:100%; height:100%; object-fit:cover; display:block; }
.ally-pane{ background:#E1E0DE; padding:80px var(--side); display:flex; flex-direction:column; justify-content:center; }
.ally-pane .ally-quote{ color:#000; margin-bottom:18px; text-align:left; }
.ally-pane .copy{ color:#000; max-width:640px; }
.ally-pane .btn-outline,
.ally-links .ally-linkedin span{
  font-family:"Swear Display", serif !important; font-style:normal !important;
}
.ally-pane .btn-outline{
  margin-top:24px; display:inline-block; align-self:flex-start;
  border:1px solid #000; padding:10px 22px; border-radius:999px;
  text-decoration:none; color:#000; white-space:nowrap;
}
.ally-links{
  display:flex; align-items:center; justify-content:space-between;
  border-top:none; background:#fff;
  padding:12px 0; margin-top:0;
}
.ally-linkedin{ display:flex; align-items:center; gap:8px; text-decoration:none; color:#000; }
.ally-linkedin img{ width:18px; height:18px; }
.ally-arrow img{ width:var(--arrow); height:var(--arrow); display:block; } /* Desktop-Default */

/* ===== MOBIL: Ally stabil + Pfeil exakt wie im Black-CTA ===== */
@media (max-width:768px){
  .ally-split{ grid-template-columns:1fr; min-height:auto; }
  .ally-pane{ padding:40px var(--side-m); }
  .ally-arrow img{ width:var(--arrow) !important; height:var(--arrow) !important; display:block; }
}

/* ---------- CTA BLACK ---------- */
.cta-black{ position:relative; background:#000; color:#fff; }
.cta-inner{
  min-height:60vh;
  display:flex; flex-direction:column; justify-content:center; gap:24px;
  padding-top:80px; padding-bottom:120px;
}
.cta-pre{ color:#fff; margin-bottom:10px; }
.cta-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; }
.cta-head{ color:#fff; line-height:.95; }
.cta-mail img{ width:var(--arrow); height:var(--arrow); filter:invert(1); }

/* Footer: direkt schwarz und sichtbar */
@supports selector(body:has(main)){
  body:has(main.concept-page) .site-footer{
    position:relative; z-index:3;
    background:#000 !important;
    color:#fff !important;
    padding-top:28px !important; padding-bottom:28px !important;
    box-shadow:none !important; border:0 !important;
    margin-top:0 !important;
  }
  body:has(main.concept-page) .site-footer a{ color:#fff !important; }
}

/* ==== Theme-Container neutralisieren ==== */
@supports selector(body:has(main)){
  body:has(main.concept-page) .grid-container,
  body:has(main.concept-page) .container,
  body:has(main.concept-page) .site-content,
  body:has(main.concept-page) .content-area,
  body:has(main.concept-page) .inside-article,
  body:has(main.concept-page) .entry-content{
    max-width:none !important; width:100% !important;
    padding-left:0 !important; padding-right:0 !important;
    margin-left:0 !important; margin-right:0 !important;
    border:0 !important; box-shadow:none !important; overflow:visible !important;
  }
  body.separate-containers:has(main.concept-page) .site-main > .inside-article{ padding:0 !important; }
  body.separate-containers:has(main.concept-page) .site-main{ margin:0 !important; }

  .concept-page .hero--1, .concept-page .hero--2{
    width:calc(100vw + 2px) !important;
    margin-left:calc(50% - 50vw - 1px) !important;
    margin-right:calc(50% - 50vw - 1px) !important;
  }
  @supports (width:100dvw){
    .concept-page .hero--1, .concept-page .hero--2{
      width:calc(100dvw + 2px) !important;
      margin-left:calc(50% - 50dvw - 1px) !important;
      margin-right:calc(50% - 50dvw - 1px) !important;
    }
  }

  html, body{ overflow-x:hidden !important; scrollbar-gutter:stable both-edges; }
}

/* Fallback */
.concept-page .inside-article,
.concept-page .entry-content{
  padding-left:0 !important; padding-right:0 !important;
  margin-left:0 !important; margin-right:0 !important;
  max-width:none !important; width:100% !important;
  border:0 !important; box-shadow:none !important;
}
html, body{ overflow-x:hidden; }
.concept-page img{ display:block; }