/* ComTechSa 0.35.0 – consolidated final polish layer. Original cascade order preserved. */

/* consolidated section */

/* ==========================================================================
   ComTechSa 0.29.6 – Einheitlicher Abstand zwischen Header und Seiteninhalt
   Desktop: 24px
   Tablet: 18px
   Mobile: 0px (volle Breite direkt unter dem Header)
   ========================================================================== */

:root{
  --cts-header-content-gap-desktop:24px;
  --cts-header-content-gap-tablet:18px;
}

/* Homepage */
body.home .cts-ref-hero{
  margin-top:var(--cts-header-content-gap-desktop)!important;
}

/* Unterseiten: alle Hero-Typen auf denselben Abstand bringen */
body:not(.home):not(.error404) .cts-subhero,
body:not(.home):not(.error404) .cts-ref-page-hero,
body:not(.home):not(.error404) .cts-page-hero,
body:not(.home):not(.error404) .cts-ref-hero{
  margin-top:var(--cts-header-content-gap-desktop)!important;
}

/* Falls ein Seiten-Wrapper selbst einen oberen Abstand setzt, neutralisieren wir ihn. */
body:not(.home):not(.error404) main,
body:not(.home):not(.error404) .wp-site-blocks > main{
  padding-top:0!important;
}

/* 404 bleibt separat über die eigene Viewport-Logik geregelt. */
body.error404 .cts-error-404{
  margin-top:0!important;
}

/* Tablet */
@media (min-width:901px) and (max-width:1180px){
  body.home .cts-ref-hero,
  body:not(.home):not(.error404) .cts-subhero,
  body:not(.home):not(.error404) .cts-ref-page-hero,
  body:not(.home):not(.error404) .cts-page-hero,
  body:not(.home):not(.error404) .cts-ref-hero{
    margin-top:var(--cts-header-content-gap-tablet)!important;
  }
}

/* Mobile: die funktionierende Full-Width-Architektur bleibt direkt am Header. */
@media (max-width:900px){
  body.home .cts-ref-hero,
  body:not(.home):not(.error404) .cts-subhero,
  body:not(.home):not(.error404) .cts-ref-page-hero,
  body:not(.home):not(.error404) .cts-page-hero,
  body:not(.home):not(.error404) .cts-ref-hero{
    margin-top:0!important;
  }
}


/* consolidated section */

/* ==========================================================================
   ComTechSa 0.30.0 – Finaler visueller QA-Pass
   Keine neue Designrichtung. Nur Konsistenz, Rhythmus und Proportionen.
   ========================================================================== */

/* Global section rhythm */
:root{
  --cts-section-space-desktop:30px;
  --cts-section-space-mobile:20px;
  --cts-card-radius-final:12px;
}

/* Headings: same weight/spacing language across all pages */
.cts-ref-section-title h2,
.cts-subpage-inner h2,
.cts-detail-card h2,
.cts-contact-channel h2,
.cts-project-brief h2,
.cts-contact-topics-approved h2{
  letter-spacing:-.02em!important;
}

/* Buttons: one consistent height/radius */
.cts-ref-header-cta,
.cts-ref-btn,
.cts-ref-project-outline,
.cts-ref-kb-button,
.cts-contact-mail-button,
.cts-subpage-cta .wp-block-button__link,
.cts-error-actions .wp-block-button__link{
  min-height:42px!important;
  border-radius:8px!important;
  line-height:1.1!important;
}

/* Homepage blocks remain visually connected */
.cts-ref-process,
.cts-ref-services,
.cts-ref-projects{
  margin-block-start:0!important;
  margin-block-end:0!important;
}

/* Cards: same radius and border language */
.cts-ref-service,
.cts-detail-card,
.cts-contact-channel,
.cts-value-card,
.cts-reference-project,
.cts-project-brief,
.cts-contact-topics-approved,
.cts-legal-approved{
  border-radius:var(--cts-card-radius-final)!important;
}

/* Service cards: balanced title/text rhythm */
.cts-service-mockup h3{
  margin-bottom:6px!important;
}
.cts-service-mockup p{
  line-height:1.42!important;
}

/* Underpage content spacing */
.cts-subpage-inner{
  padding-top:30px!important;
  padding-bottom:34px!important;
}
.cts-detail-grid,
.cts-contact-page-grid,
.cts-about-page-grid,
.cts-about-values-grid{
  margin-bottom:16px!important;
}

/* References and project sections */
.cts-reference-project + .cts-reference-project{
  margin-top:16px!important;
}
.cts-project-brief{
  margin-top:20px!important;
}

/* Footer consistency */
.cts-ref-footer{
  min-height:72px!important;
}
.cts-ref-footer-nav a{
  line-height:1.2!important;
}

/* Tablet */
@media(min-width:901px) and (max-width:1180px){
  .cts-subpage-inner{
    padding-top:26px!important;
    padding-bottom:30px!important;
  }
  .cts-detail-grid,
  .cts-contact-page-grid,
  .cts-about-page-grid,
  .cts-about-values-grid{
    gap:14px!important;
  }
}

/* Mobile */
@media(max-width:900px){
  .cts-ref-header-cta,
  .cts-ref-btn,
  .cts-ref-project-outline,
  .cts-ref-kb-button,
  .cts-contact-mail-button,
  .cts-subpage-cta .wp-block-button__link,
  .cts-error-actions .wp-block-button__link{
    min-height:40px!important;
  }

  .cts-subpage-inner{
    padding-top:20px!important;
    padding-bottom:24px!important;
  }

  .cts-detail-grid,
  .cts-contact-page-grid,
  .cts-about-page-grid,
  .cts-about-values-grid{
    gap:10px!important;
    margin-bottom:10px!important;
  }

  .cts-ref-footer{
    min-height:0!important;
  }
}


/* consolidated section */

/* ==========================================================================
   ComTechSa 0.30.1 – Einheitlicher, kompakter CTA auf Unterseiten
   Projekte / Über ComTechSa folgen jetzt der CTA-Sprache von Leistungen.
   ========================================================================== */

.cts-unified-cta{
  width:min(calc(100% - (2 * var(--cts-gutter))),var(--cts-content))!important;
  max-width:var(--cts-content)!important;
  margin:0 auto 24px!important;
  border-radius:0 0 18px 18px!important;
  overflow:hidden!important;
  background:linear-gradient(135deg,#fff3e8,#ffe9d5)!important;
  box-shadow:var(--cts-shadow)!important;
}

.cts-unified-cta-inner{
  width:100%!important;
  max-width:none!important;
  min-height:0!important;
  padding:24px 46px!important;
  gap:24px!important;
}

.cts-unified-cta-copy{
  flex:1 1 620px!important;
  max-width:760px!important;
}

.cts-unified-cta-copy .cts-project-kicker{
  margin:0 0 5px!important;
  color:#e86a18!important;
  font-size:.68rem!important;
  font-weight:900!important;
  letter-spacing:.1em!important;
  text-transform:uppercase!important;
}

.cts-unified-cta-copy h2{
  margin:0 0 7px!important;
  color:#17212b!important;
  font-size:clamp(1.55rem,2.2vw,2rem)!important;
  line-height:1.12!important;
  letter-spacing:-.025em!important;
}

.cts-unified-cta-copy p{
  max-width:680px!important;
  margin:0!important;
  color:#4f5963!important;
  font-size:.86rem!important;
  line-height:1.5!important;
}

.cts-unified-cta-actions{
  flex:0 0 auto!important;
  margin:0!important;
}

.cts-unified-cta-actions .wp-block-button__link{
  min-height:40px!important;
  padding:.65rem 1rem!important;
  border-radius:7px!important;
  background:#ff9d00!important;
  color:#17212b!important;
  font-size:.84rem!important;
  font-weight:800!important;
  box-shadow:none!important;
}

/* Leistungen-CTA ebenfalls etwas kompakter, damit die CTA-Höhen zusammenpassen. */
.cts-service-process .cts-subpage-cta-inner{
  min-height:0!important;
  padding-top:24px!important;
  padding-bottom:24px!important;
}

.cts-service-process-grid{
  margin-top:16px!important;
  margin-bottom:16px!important;
}

.cts-service-process-grid>div{
  padding:14px!important;
}

.cts-service-process-footer{
  gap:18px!important;
}

.cts-service-process-footer p{
  margin:0!important;
  font-size:.82rem!important;
  line-height:1.45!important;
}

/* Tablet */
@media (min-width:901px) and (max-width:1180px){
  .cts-unified-cta{
    width:calc(100% - 36px)!important;
  }

  .cts-unified-cta-inner{
    padding:22px 28px!important;
  }
}

/* Mobile */
@media(max-width:900px){
  .cts-unified-cta{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    border-radius:0!important;
    box-shadow:none!important;
  }

  .cts-unified-cta-inner{
    padding:20px 16px!important;
    gap:14px!important;
    flex-direction:column!important;
    align-items:flex-start!important;
  }

  .cts-unified-cta-copy{
    flex-basis:auto!important;
    width:100%!important;
  }

  .cts-unified-cta-copy h2{
    font-size:1.4rem!important;
  }

  .cts-unified-cta-copy p{
    font-size:.82rem!important;
  }

  .cts-unified-cta-actions{
    width:100%!important;
  }

  .cts-unified-cta-actions .wp-block-button{
    width:100%!important;
  }

  .cts-unified-cta-actions .wp-block-button__link{
    width:100%!important;
    min-height:40px!important;
  }

  .cts-service-process .cts-subpage-cta-inner{
    padding-top:20px!important;
    padding-bottom:20px!important;
  }

  .cts-service-process-grid{
    margin-top:12px!important;
    margin-bottom:12px!important;
  }
}


/* consolidated section */
/*
 * ComTechSa Theme 0.33.0
 * Release-candidate consolidation layer.
 * Consolidates 0.31.0 functional QA and 0.32.0 technical/accessibility rules
 * without changing the approved visual design.
 */


.cts-ref-header a,.cts-ref-header button,.cts-ref-mobile-panel a,.cts-error-actions a,.cts-ref-projects a,.cts-subpage-cta a{
  position:relative;z-index:2
}
.cts-ref-service::before,.cts-detail-card::before,.cts-contact-channel::before,.cts-value-card::before{
  pointer-events:none!important
}
@media(max-width:900px){
  .cts-ref-mobile-nav a{
    width:100%!important;min-height:44px!important;display:flex!important;align-items:center!important
  }
}


/* 0.32.0 – technical/accessibility completion */
html{
  scroll-behavior:smooth;
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
}
:where(a,button,input,textarea,select):focus-visible{
  outline:3px solid #ff8a47!important;
  outline-offset:3px!important;
}
@media print{
  .cts-ref-header-shell,
  .cts-ref-footer-shell,
  .cts-ref-mobile-panel,
  .cts-subpage-cta,
  .cts-error-actions{
    display:none!important;
  }
  body{
    padding-top:0!important;
    background:#fff!important;
    color:#000!important;
  }
}


/* consolidated section */

html,body{max-width:100%;overflow-x:clip}
img,svg,video,iframe{max-width:100%;height:auto}
.cts-ref-header-shell{position:fixed!important;inset:0 0 auto 0!important;top:0!important;z-index:99990!important}
@media(max-width:900px){
 .cts-ref-mobile-panel{max-height:calc(100dvh - var(--cts-header-height,84px))!important;overflow-y:auto!important;overscroll-behavior:contain}
 .cts-ref-menu-toggle{min-width:44px!important;min-height:44px!important}
}
@media(max-width:480px){
 .cts-ref-shell,.cts-ref-home,.cts-subpage-shell,.cts-error-shell{width:min(100% - 24px,var(--cts-shell,1440px))!important;max-width:100%!important}
 .cts-ref-home img,.cts-subpage-shell img,.cts-error-shell img{max-width:100%!important;height:auto!important}
}
:target{scroll-margin-top:120px}


/* 0.34.1 – Regression fix:
   0.34.0 changed the already working fixed header to sticky, while the global
   body padding-top remained active. That created a blank header-height area
   above the real header. Restore the proven fixed-header geometry. */
body:not(.error404){
  padding-top:var(--cts-header-h,82px)!important;
}

.cts-ref-header-shell{
  height:var(--cts-header-h,82px)!important;
}

/* 404 keeps its own viewport/header geometry from the 0.29.x fixes. */
body.error404{
  padding-top:0!important;
}


/* ==========================================================================
   0.34.2 – Mobile footer full-width hotfix
   The footer must span the complete viewport width on phones. The narrow-phone
   shell guard introduced in 0.34.0 must never constrain the footer/template
   part or inherit page-shell margins.
   ========================================================================== */

@media(max-width:900px){
  footer.wp-block-template-part,
  .wp-site-blocks > footer,
  .cts-ref-footer-shell,
  .cts-ref-footer{
    width:100%!important;
    max-width:none!important;
    margin-left:0!important;
    margin-right:0!important;
    box-sizing:border-box!important;
  }

  .cts-ref-footer-shell{
    position:relative!important;
    left:0!important;
    right:0!important;
  }

  .cts-ref-footer{
    padding-left:16px!important;
    padding-right:16px!important;
  }
}

/* Explicitly override the 0.34.0 narrow-phone shell safety rule for footer. */
@media(max-width:480px){
  .cts-ref-footer-shell,
  .cts-ref-footer{
    width:100%!important;
    max-width:none!important;
    margin-inline:0!important;
  }
}


/* consolidated section */

/* ==========================================================================
   ComTechSa 0.34.4 – Mobile homepage hero
   One compact hero: existing branded image as cropped background + real text.
   No duplicated image block below the text.
   ========================================================================== */

.cts-ref-hero-mobile-copy{
  display:none;
}

/* Neutralize Gutenberg block gaps on the homepage. */
body.home .wp-site-blocks > .cts-main-anchor,
body.home .wp-site-blocks > .cts-ref-hero,
body.home .wp-site-blocks > .cts-ref-process,
body.home .wp-site-blocks > .cts-ref-services,
body.home .wp-site-blocks > .cts-ref-projects,
body.home .wp-site-blocks > footer,
body.home .cts-ref-hero,
body.home .cts-ref-process,
body.home .cts-ref-services,
body.home .cts-ref-projects,
body.home .cts-ref-footer-shell{
  margin-block-start:0!important;
  margin-block-end:0!important;
}

body.home .cts-main-anchor{
  display:block!important;
  width:0!important;
  height:0!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
}

@media(max-width:900px){
  body.home .cts-ref-hero-branded{
    position:relative!important;
    display:block!important;
    width:100%!important;
    height:clamp(300px,72vw,390px)!important;
    margin:0!important;
    overflow:hidden!important;
    background:#0b1c29!important;
    border-radius:0!important;
  }

  /* Existing image becomes the visual background. Its baked-in left-side text
     is outside the mobile crop. */
  body.home .cts-ref-hero-img{
    position:absolute!important;
    inset:0!important;
    z-index:0!important;
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    object-fit:cover!important;
    object-position:72% center!important;
    margin:0!important;
    transform:none!important;
  }

  /* Dark overlay keeps the real mobile text readable without hiding the image. */
  body.home .cts-ref-hero-branded::after{
    content:""!important;
    position:absolute!important;
    inset:0!important;
    z-index:1!important;
    pointer-events:none!important;
    background:
      linear-gradient(90deg,
        rgba(7,24,35,.96) 0%,
        rgba(7,24,35,.88) 42%,
        rgba(7,24,35,.48) 68%,
        rgba(7,24,35,.12) 100%)!important;
  }

  .cts-ref-hero-mobile-copy{
    position:relative!important;
    z-index:2!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    width:min(64%,460px)!important;
    height:100%!important;
    padding:22px 0 22px 18px!important;
    box-sizing:border-box!important;
    color:#fff!important;
    background:transparent!important;
  }

  .cts-ref-hero-mobile-kicker{
    margin:0 0 5px!important;
    color:#ff5a0a!important;
    font-size:.66rem!important;
    font-weight:900!important;
    letter-spacing:.08em!important;
    text-transform:uppercase!important;
  }

  .cts-ref-hero-mobile-copy h1{
    margin:0 0 8px!important;
    max-width:12ch!important;
    color:#fff!important;
    font-size:clamp(1.55rem,6.7vw,2.1rem)!important;
    line-height:1.03!important;
    letter-spacing:-.035em!important;
  }

  .cts-ref-hero-mobile-copy>p:not(.cts-ref-hero-mobile-kicker){
    margin:0!important;
    max-width:28ch!important;
    color:#d8e0e5!important;
    font-size:.76rem!important;
    line-height:1.4!important;
  }

  .cts-ref-hero-mobile-actions{
    display:flex!important;
    flex-wrap:wrap!important;
    gap:8px!important;
    margin-top:13px!important;
  }

  .cts-ref-hero-mobile-actions .cts-ref-btn{
    width:auto!important;
    min-height:34px!important;
    padding:0 10px!important;
    border-radius:6px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    font-size:.68rem!important;
    font-weight:800!important;
    text-decoration:none!important;
  }

  .cts-ref-hero-mobile-actions .cts-ref-btn-primary{
    background:#ff5a0a!important;
    color:#fff!important;
  }

  .cts-ref-hero-mobile-actions .cts-ref-btn-secondary{
    border:1px solid rgba(255,255,255,.55)!important;
    background:rgba(7,24,35,.42)!important;
    color:#fff!important;
  }

  /* Desktop-image hotspots are not valid after the mobile crop. */
  .cts-ref-hero-hotspot{
    display:none!important;
  }

  /* Keep homepage sections flush. */
  .cts-ref-process,
  .cts-ref-services,
  .cts-ref-projects{
    margin-top:0!important;
    margin-bottom:0!important;
  }

  .cts-ref-services + .cts-ref-projects,
  .cts-ref-projects + footer,
  .cts-ref-projects + .wp-block-template-part{
    margin-top:0!important;
  }
}

@media(max-width:480px){
  body.home .cts-ref-hero-branded{
    height:310px!important;
  }

  body.home .cts-ref-hero-img{
    object-position:70% center!important;
  }

  .cts-ref-hero-mobile-copy{
    width:68%!important;
    padding-left:15px!important;
    padding-right:6px!important;
  }

  .cts-ref-hero-mobile-copy h1{
    font-size:clamp(1.45rem,7vw,1.85rem)!important;
  }

  .cts-ref-hero-mobile-copy>p:not(.cts-ref-hero-mobile-kicker){
    font-size:.72rem!important;
  }

  .cts-ref-hero-mobile-actions{
    gap:6px!important;
  }

  .cts-ref-hero-mobile-actions .cts-ref-btn{
    min-height:32px!important;
    padding:0 8px!important;
    font-size:.64rem!important;
  }
}


/* ==========================================================================
   0.34.5 – Mobile homepage correction
   Clean, image-free mobile hero + true full-width project/KleinBüro section.
   ========================================================================== */

@media(max-width:900px){
  /* Mobile hero: no cropped desktop composite. This avoids baked-in logos/text
     and gives the phone layout the calmer KADELUN-like treatment. */
  body.home .cts-ref-hero-branded{
    height:auto!important;
    min-height:0!important;
    display:block!important;
    background:
      radial-gradient(circle at 88% 18%,rgba(255,90,10,.10),transparent 18rem),
      linear-gradient(135deg,#081925,#0d2936)!important;
  }

  body.home .cts-ref-hero-img{
    display:none!important;
  }

  body.home .cts-ref-hero-branded::after{
    display:none!important;
    content:none!important;
  }

  .cts-ref-hero-mobile-copy{
    position:relative!important;
    display:block!important;
    width:100%!important;
    height:auto!important;
    padding:26px 18px 28px!important;
    background:transparent!important;
  }

  .cts-ref-hero-mobile-kicker{
    font-size:.7rem!important;
    margin-bottom:7px!important;
  }

  .cts-ref-hero-mobile-copy h1{
    max-width:14ch!important;
    margin-bottom:10px!important;
    font-size:clamp(1.85rem,8vw,2.45rem)!important;
    line-height:1.04!important;
  }

  .cts-ref-hero-mobile-copy>p:not(.cts-ref-hero-mobile-kicker){
    max-width:34ch!important;
    font-size:.88rem!important;
    line-height:1.45!important;
  }

  .cts-ref-hero-mobile-actions{
    margin-top:16px!important;
    display:flex!important;
    flex-wrap:wrap!important;
    gap:9px!important;
  }

  .cts-ref-hero-mobile-actions .cts-ref-btn{
    min-height:38px!important;
    padding:0 12px!important;
    font-size:.72rem!important;
  }

  /* Full-width project/KleinBüro block. Previous narrow-phone shell guard could
     leave a visible strip on the right. */
  body.home .cts-ref-projects,
  body.home .wp-site-blocks > .cts-ref-projects{
    width:100%!important;
    max-width:none!important;
    margin-left:0!important;
    margin-right:0!important;
    margin-inline:0!important;
    box-sizing:border-box!important;
    border-radius:0!important;
  }

  body.home .cts-ref-projects-grid{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
  }
}

@media(max-width:480px){
  body.home .cts-ref-hero-branded{
    height:auto!important;
  }

  .cts-ref-hero-mobile-copy{
    width:100%!important;
    padding:24px 15px 26px!important;
  }

  .cts-ref-hero-mobile-copy h1{
    font-size:clamp(1.75rem,8.2vw,2.15rem)!important;
  }

  .cts-ref-hero-mobile-actions{
    flex-direction:row!important;
  }

  .cts-ref-hero-mobile-actions .cts-ref-btn{
    width:auto!important;
    min-height:36px!important;
    padding:0 10px!important;
    font-size:.68rem!important;
  }

  body.home .cts-ref-projects,
  body.home .cts-ref-projects-grid{
    width:100%!important;
    max-width:none!important;
    margin-inline:0!important;
  }
}