/* Stadtwerke Ochtrup — 2026 design refresh. Scoped to the ACF block layouts. */
:root {
  --swo-ink:#142237;
  --swo-muted:#53637a;
  --swo-blue:#006ebc;
  --swo-red:#d73239;
  --swo-forest:#3c594f;
  --swo-green:#4d9737;
  --swo-pale:#f0f1f3;
  --swo-line:#d7dfe8;
}
html {scroll-padding-top:90px}
body {color:var(--swo-ink)}
body .container{max-width:1320px}
body .inhaltsbloecke{margin-top:80px}
body .inhaltsbloecke>section{margin:0;position:relative}
/* Headlines inherit the original .headline typography from style.css (Outfit, weight 600, responsive sizing). */
body .inhaltsbloecke p{line-height:1.55}
body .inhaltsbloecke :is(.swo-button,.swo-career-link,.swo-filter){font-family:'Outfit',sans-serif}
body .inhaltsbloecke :is(.swo-careers,.swo-about,.swo-divisions,.swo-voices,.swo-text-only,.flx_benefits,.flx_bilderblock,.flx_kontaktformular){scroll-margin-top:80px}

/* Site navigation */
#page-header,#page-header.bottom{height:80px;background:#fff;padding:0;display:flex;align-items:center;box-shadow:none}
#page-header.bottom{box-shadow:0 4px 18px rgba(20,34,55,.08)}
#page-header>.container{width:100%}
#page-header .row{align-items:center}
#page-header .logo img,#page-header.bottom .logo img{width:207px;max-width:100%;height:auto;display:block}
#page-header .menu{gap:28px;align-items:center}
#page-header .menu li a{font-family:'Outfit',sans-serif;font-size:15px;line-height:1.2;font-weight:500;color:var(--swo-ink)}
#page-header .menu li.menu-item-29 a{background:var(--swo-blue);border-radius:30px;padding:16px 25px;color:#fff;font-weight:500}
#page-header .menu li.menu-item-29 a:hover{background:#005a9b}
#page-header .menu li.menu-item-29 a::before{display:none}

/* Shared tilted-photo cards */
.swo-card-red{--card-color:var(--swo-red)}
.swo-card-blue{--card-color:var(--swo-blue)}
.swo-card-forest{--card-color:var(--swo-forest)}
.swo-card-green{--card-color:var(--swo-green)}
.swo-photo-card{display:flex;flex-direction:column;min-width:0;background:var(--card-color);padding:18px;border-radius:17px;color:#fff;box-shadow:0 10px 20px rgba(8,22,38,.22)}
.swo-photo-card-logo{display:flex;align-items:center;justify-content:center;height:74px;margin:-4px 0 8px}
.swo-photo-card-logo img{width:220px;max-height:65px;filter:brightness(0) invert(1)}
.swo-photo-card-image{min-height:0;flex:1;background:#dce3eb;overflow:hidden;border-radius:9px 9px 0 0}
.swo-photo-card-image>img{width:100%;height:100%;object-fit:cover;display:block}
.swo-photo-card-caption{display:flex;flex-direction:column;justify-content:center;gap:0;min-height:56px;padding-top:8px;line-height:1.2}
.swo-photo-card-caption strong,.swo-photo-card-caption span{font-family:'Outfit',sans-serif;color:#fff;line-height:1.2}
.swo-photo-card-caption strong{font-size:19px;font-weight:600}
.swo-photo-card-caption span{font-size:15px}
.swo-image-placeholder{width:100%;height:100%;min-height:130px;display:flex;align-items:center;justify-content:center;font:600 13px 'Outfit',sans-serif!important;letter-spacing:.02em;color:#617087!important;background:repeating-linear-gradient(45deg,#e3e9f0 0,#e3e9f0 11px,#d6e0e9 11px,#d6e0e9 22px)}
.swo-speech-bubble{background:#fff;color:var(--swo-red);border-radius:20px;box-shadow:0 9px 18px rgba(20,34,55,.16);display:inline-flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1;position:relative;transform:rotate(-6deg);padding:10px 19px;min-width:122px}
.swo-speech-bubble::after{content:"";position:absolute;bottom:-11px;left:30%;border:12px solid transparent;border-bottom:0;border-top-color:#fff}
.swo-speech-bubble strong{font:600 44px/1 'Outfit',sans-serif;color:var(--swo-red)}
.swo-speech-bubble small{font:600 12px/1.1 'Outfit',sans-serif;color:var(--swo-red);text-align:center;text-transform:uppercase}

/* Hero image / dark cinematic overlay */
.swo-hero::before{content:none!important}
body .inhaltsbloecke>section.swo-hero{min-height:660px;padding:50px 0 38px;color:#fff;isolation:isolate;overflow:hidden;background:#0c1725}
.swo-hero-background,.swo-hero-background::after{position:absolute;inset:0;z-index:-1}
.swo-hero-background>.swiper,.swo-hero-background .swiper-wrapper,.swo-hero-background .swiper-slide{width:100%;height:100%}
.swo-hero-background .swiper-slide{background-size:cover;background-position:center}
.swo-hero-background::after{content:"";z-index: 1;pointer-events:none;background:linear-gradient(90deg,rgba(11,22,36,1) 0%,rgba(11,22,36,.98) 31%,rgba(11,22,36,.83) 57%,rgba(11,22,36,.48) 100%)}
.swo-hero-grid{min-height:570px;display:grid;grid-template-columns:53% 47%;align-items:center;gap:0}
.swo-hero-copy{padding:0 12px 0 0;position:relative;z-index:2}
.swo-hero-icons{display:flex;align-items:center;gap:11px;height:78px;margin-bottom:15px}
.swo-hero-icons img{width:43px;height:60px;object-fit:contain;opacity:.72}
.swo-hero-icons img:last-child{opacity:1}
/* The hero keeps only its contrast color and width; all other headline styles come from style.css. */
body .swo-hero .swo-hero-copy>.headline{max-width:590px;color:var(--white)}
.swo-hero-description{margin-bottom:24px}
.swo-hero-description :is(p,strong,span){color:#fff!important;font-family:'Outfit',sans-serif;font-size:21px!important;font-weight:600;line-height:1.3;margin:0}
.swo-hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.swo-button{display:inline-flex;align-items:center;justify-content:center;border:2px solid transparent;border-radius:30px;min-height:52px;padding:12px 24px;color:#fff!important;font-size:15px;font-weight:600;line-height:1.15;text-decoration:none}
.swo-button:hover{color:#fff!important;transform:translateY(-1px)}
.swo-button-red{background:var(--swo-red);box-shadow:0 5px 0 #ad252d}
.swo-button-red:hover{background:#bc292f}
.swo-button-outline{border-color:#d2d8df;background:transparent}
.swo-button-outline:hover{background:#fff;color:var(--swo-ink)!important}
.swo-hero-visual{height:570px;position:relative;display:flex;align-items:center;justify-content:center;padding:0 40px 0 35px}
.swo-hero-card{width:min(385px,100%);height:550px;transform:rotate(-3deg);transition:transform .25s;color:#fff!important}
.swo-hero-card:hover{transform:rotate(-1deg) translateY(-4px);color:#fff!important}
.swo-hero-card .swo-photo-card-image{min-height:355px}
.swo-hero-circle{position:absolute;top:46%;left:-3%;z-index:2;width:132px;height:132px;border-radius:50%;display:flex;align-items:center;justify-content:center;text-align:center;padding:15px;color:#fff;font:600 17px/1.05 'Outfit',sans-serif;background:var(--swo-red);transform:rotate(-9deg)}
.swo-hero-count{position:absolute;right:0;bottom:16%;transform:rotate(11deg);z-index:2;padding:13px 20px;min-width:186px}
.swo-hero-count strong{font-size:60px}
.swo-hero-count small{font-size:13px}


/* Hero carousel: rotate through published Ausbildung jobs without changing the card design. */
.swo-hero-jobs-swiper{width:min(450px,100%);height:100%;overflow:hidden}
.swo-hero-jobs-swiper .swiper-slide{display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding:10px 15px;height:100%;background:transparent;box-shadow:none}
.swo-hero-jobs-swiper .swo-hero-card{flex:0 1 385px;height:100%;max-height:550px;min-width:0}
.swo-hero-jobs-swiper .swo-hero-jobs-pagination{position:absolute;bottom:0;left:0;width:100%;z-index:3;display:flex;justify-content:center;align-items:center;gap:7px;pointer-events:none}
.swo-hero-jobs-swiper .swo-hero-jobs-pagination .swiper-pagination-bullet{width:8px;height:8px;margin:0!important;background:#fff;opacity:.45;pointer-events:auto}
.swo-hero-jobs-swiper .swo-hero-jobs-pagination .swiper-pagination-bullet-active{opacity:1}
.swo-hero-jobs-swiper:not(.swiper-initialized) .swo-hero-jobs-pagination{display:none}

/* Training roles */
body .inhaltsbloecke>section.swo-careers{padding:62px 0 62px;background:#fff}
.swo-careers::before,.swo-careers::after{display:none!important}
.swo-careers-header{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:28px}
.swo-careers-header .headlinebox{margin:0;max-width:660px;text-align:left}
.swo-careers-intro :is(p,span){font-family:'Outfit',sans-serif;font-size:17px;line-height:1.55;color:var(--swo-muted);font-weight:400;margin:0}
.swo-career-filters{display:flex;align-items:center;gap:7px;flex-shrink:0;margin-bottom:3px}
.swo-filter{border:2px solid var(--swo-ink);border-radius:22px;background:#fff;color:var(--swo-ink);padding:6px 13px;min-height:35px;font-weight:600;font-size:14px;line-height:1.2;display:inline-flex;align-items:center;gap:7px;cursor:pointer}
.swo-filter.is-active,.swo-filter:hover{color:#fff;background:var(--swo-ink)}
.swo-filter-dot{display:inline-block;width:12px;height:12px;border-radius:50%;flex:0 0 12px}
.swo-dot-red{background:var(--swo-red)}
.swo-dot-blue{background:var(--swo-blue)}
.swo-career-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.swo-career-card{min-width:0;position:relative;background:var(--swo-pale);border-radius:17px;padding:14px 14px 18px;display:flex;flex-direction:column;align-items:stretch;gap:0}
.swo-career-card[hidden]{display:none!important}
.swo-career-cover{background:var(--card-color);border:8px solid var(--card-color);border-radius:13px;overflow:hidden}
.swo-career-cover>a{display:block;height:100%}
.swo-career-photo{height:144px;overflow:hidden;background:#dee6ee}
.swo-career-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.swo-career-cover:hover img{transform:scale(1.05)}
.swo-career-caption{min-height:45px;padding:7px 3px 1px;background:var(--card-color)}
.swo-career-caption h3,.swo-career-caption small{font-family:'Outfit',sans-serif;color:#fff;line-height:1.06;display:block}
.swo-career-caption h3{margin:0;font-size:18px;}
.swo-career-caption small{font-size:13px;font-weight:600}
.swo-career-badge{position:absolute;top:-11px;right:-6px;z-index:3;border-radius:18px;padding:5px 11px;background:var(--swo-red);color:#fff;font:600 12px/1 'Outfit',sans-serif;transform:rotate(7deg)}
.swo-career-details{padding:0 4px;margin:15px 0 13px;list-style:none;flex:1}
.swo-career-details li{font-family:'Outfit',sans-serif;line-height:1.3;font-size:14px;color:#435368;font-weight:400;padding-left:13px;margin:0 0 10px;position:relative}
.swo-career-details li::before{content:"";position:absolute;left:0;top:.48em;width:6px;height:6px;border-radius:50%;background:var(--card-color)}
.swo-career-link{border:2px solid var(--swo-ink);color:var(--swo-ink);border-radius:30px;align-self:flex-start;padding:8px 15px;margin:0 4px;font-weight:500;line-height:1.1;font-size:14px}
.swo-career-link:hover{color:#fff;background:var(--swo-ink)}
.swo-filter-empty{color:var(--swo-muted);padding-top:20px}

/* About the employer */
body .inhaltsbloecke>section.swo-about{padding:62px 0 24px;background:#fff}
.swo-about-grid{display:grid;grid-template-columns:57% 43%;gap:0;align-items:center;min-height:405px}
.swo-about-copy{padding:12px 25px 15px 0}
.swo-rich-text :is(p,li){color:#435368;font:400 16px/1.55 'Outfit',sans-serif;margin:0 0 13px}
.swo-about-visual{display:flex;justify-content:center;padding:15px 25px}
.swo-team-card{height:395px;width:365px;transform:rotate(3deg);background:#3262b1}
.swo-team-card .swo-photo-card-image{min-height:228px}
.swo-about-stats{display:flex;align-items:flex-start;gap:24px;flex-wrap:wrap;margin-top:28px}
.swo-about-stats .swo-speech-bubble:nth-child(2){transform:rotate(5deg)}
.swo-about-stats .swo-speech-bubble:nth-child(3){transform:rotate(-6deg)}
.swo-about-stats .swo-speech-bubble{min-width:125px;max-width:172px;min-height:86px}
.swo-about-stats .swo-speech-bubble strong{font-size:43px}
.swo-about-stats .swo-speech-bubble small{font-size:11px}

/* Six-business-unit grid */
body .inhaltsbloecke>section.swo-divisions{padding:30px 0 66px;background:#fff}
.swo-divisions::before{display:none!important}
.swo-divisions .swo-section-heading{margin-bottom:22px}
.swo-division-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--swo-line)}
.swo-division{min-width:0;padding:25px 27px 22px;border-right:1px solid var(--swo-line);border-bottom:1px solid var(--swo-line);min-height:164px}
.swo-division:nth-child(3n){border-right:0}
.swo-division:nth-last-child(-n+3){border-bottom:0}
.swo-division-top{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:10px}
.swo-division-top h3{font-size: 23px;color:var(--blue);margin:0}
.swo-division-top img{width:42px;height:58px;object-fit:contain}
.swo-division-text p{font:400 14px/1.5 'Outfit',sans-serif;color:var(--swo-muted);margin:0}

/* Employee testimonials */
body .inhaltsbloecke>section.swo-voices{padding:70px 0 65px;background:var(--swo-pale)}
.swo-voices .headlinebox{margin:0 0 36px;text-align:left}
.swo-voices .container{max-width:1160px;overflow:visible}
.swo-voices-swiper{width:100%;overflow:hidden;padding:12px 0 35px}
.swo-voices-swiper .swiper-wrapper{align-items:stretch}
.swo-voices-swiper .swiper-slide{height:auto;background:transparent;box-shadow:none;border-radius:0;display:block;padding:0;text-align:left;max-width:none}
.swo-voice-item{display:flex;align-items:center;gap:32px;min-height:200px;padding:0 8px}
.swo-voice-card{position:relative;flex:0 0 150px;width:150px;height:172px;display:flex;flex-direction:column;padding:7px;border:7px solid var(--card-color);border-radius:13px;background:var(--card-color);transform:rotate(-4deg)}
.swo-voices-swiper .swiper-slide:nth-child(even) .swo-voice-card{transform:rotate(4deg)}
.swo-voice-photo{height:136px;overflow:hidden;background:#dbe3eb;flex:1;border-radius:6px 6px 0 0}
.swo-voice-photo img{width:100%;height:100%;object-fit:cover;display:block}
.swo-voice-name{font:600 12px/1 'Outfit',sans-serif;color:#fff;padding:5px 3px 0}
.swo-voice-text{flex:1}
.swo-voice-text blockquote,.swo-voice-text blockquote p{font:600 18px/1.4 'Outfit',sans-serif;color:var(--swo-ink);margin:0}
.swo-voice-attribution{font:400 14px/1.5 'Outfit',sans-serif!important;color:var(--swo-muted)!important;margin:15px 0 0}
.swo-voices-swiper .swiper-pagination{bottom:0}
.swo-voices-swiper .swiper-pagination-bullet{background:#8795a5}
.swo-voices-swiper .swiper-pagination-bullet-active{background:var(--swo-blue)}

/* Other ACF blocks remain usable and adopt spacing/typography. */
body .inhaltsbloecke>section.swo-text-only{padding:70px 0}
.swo-text-column{max-width:850px}
body .inhaltsbloecke>section.swo-more-space{padding-top:125px}
body .inhaltsbloecke>.flx_benefits{margin:0;padding:75px 0}
body .inhaltsbloecke>.flx_benefits .headlinebox{text-align:left}
body .inhaltsbloecke>.flx_benefits::before,body .inhaltsbloecke>.flx_benefits::after{display:none}
body .inhaltsbloecke>.flx_bilderblock{margin:0;padding:70px 0}
body .inhaltsbloecke>.flx_kontaktformular{margin:0;padding:70px 0}

@media(max-width:1199px){
  #page-header .menu{gap:16px}
  #page-header .menu li a{font-size:14px}
  .swo-career-grid{gap:16px}
  .swo-careers-header{flex-wrap:wrap}
  .swo-about-stats{gap:15px}
  .swo-hero-visual{padding-left:15px;padding-right:15px}
  .swo-hero-circle{left:-5%}
  .swo-hero-count{right:-2%}
}
@media(max-width:991px){
  #page-header .menu.open{z-index:5;display:flex;flex-direction:column;align-items:flex-start;gap:12px;bottom:0;top:80px;overflow:auto;padding:25px 32px;background:#142237;backdrop-filter:none}
  #page-header .menu.open li{margin:0}
  #page-header .menu.open li a{color:#fff;font-size:18px}
  #page-header .menu.open li.menu-item-29 a{display:inline-block;background:var(--swo-blue);padding:12px 18px}
  #page-header .hamburger{position:relative;z-index:8}
  #page-header .logo.white img{filter:none}
  #hamburger-1.is-active .line{background:var(--swo-ink)}
  body .inhaltsbloecke>section.swo-hero{min-height:600px}
  .swo-hero-grid{grid-template-columns:1fr 1fr;min-height:530px}
  .swo-hero-card{height:470px}
  .swo-hero-visual{height:495px}
  .swo-hero-card .swo-photo-card-image{min-height:275px}
  .swo-hero-circle{width:105px;height:105px;font-size:14px}
  .swo-hero-count{bottom:12%;min-width:125px;padding:10px 14px}
  .swo-hero-count strong{font-size:42px}
  .swo-hero-count small{font-size:10px}
  .swo-career-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .swo-career-photo{height:200px}
  .swo-about-grid{grid-template-columns:1.1fr 1fr}
  .swo-team-card{height:360px}
  .swo-about-stats .swo-speech-bubble{min-width:105px}
  .swo-division-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .swo-division:nth-child(3n){border-right:1px solid var(--swo-line)}
  .swo-division:nth-child(2n){border-right:0}
  .swo-division:nth-last-child(-n+3){border-bottom:1px solid var(--swo-line)}
  .swo-division:nth-last-child(-n+2){border-bottom:0}
  .swo-voice-item{gap:16px}
  .swo-voice-text blockquote,.swo-voice-text blockquote p{font-size:16px}
}
@media(max-width:767px){
  body .container{padding:0 20px}
  body .inhaltsbloecke>section.swo-hero{padding:35px 0 40px}
  .swo-hero-grid{grid-template-columns:1fr;min-height:unset}
  .swo-hero-copy{padding:25px 0 15px}
  .swo-hero-icons{margin-bottom:10px;height:50px}
  .swo-hero-icons img{width:30px;height:43px}
  .swo-hero-visual{height:480px;padding:10px 45px 0}
  .swo-hero-card{width:335px;height:460px}
  .swo-hero-circle{left:7%;top:40%}
  .swo-hero-count{right:8%;bottom:9%}
  .swo-hero-background::after{background:linear-gradient(180deg,rgba(11,22,36,.97),rgba(11,22,36,.86))}
  .swo-careers-header{align-items:flex-start;margin-bottom:20px}
  .swo-career-filters{flex-wrap:wrap}
  body .inhaltsbloecke>section.swo-about{padding-top:40px}
  .swo-about-grid{grid-template-columns:1fr}
  .swo-about-copy{padding:0}
  .swo-about-visual{padding:35px 20px 25px}
  .swo-team-card{max-width:360px;width:100%}
  .swo-division-grid{grid-template-columns:1fr}
  .swo-division,.swo-division:nth-child(3n),.swo-division:nth-child(2n),.swo-division:nth-last-child(-n+2){border-right:0;border-bottom:1px solid var(--swo-line)}
  .swo-division:last-child{border-bottom:0}
  .swo-voice-item{gap:22px}
  .swo-voices .container{max-width:none}
}
@media(max-width:520px){
  .swo-hero-description :is(p,strong,span){font-size:18px!important}
  .swo-button{min-height:47px;padding:10px 16px;font-size:14px}
  .swo-hero-visual{height:420px;padding:10px 25px}
  .swo-hero-card{height:395px;max-width:290px}
  .swo-hero-card .swo-photo-card-image{min-height:190px}
  .swo-photo-card-logo{height:53px}
  .swo-photo-card-logo img{width:170px}
  .swo-photo-card-caption strong{font-size:16px}
  .swo-photo-card-caption span{font-size:13px}
  .swo-hero-circle{width:85px;height:85px;left:0;top:42%;font-size:12px}
  .swo-hero-count{right:0;bottom:10%}
  .swo-career-grid{grid-template-columns:1fr;gap:18px}
  .swo-career-card{max-width:400px;width:100%;margin:auto}
  .swo-career-photo{height:190px}
  .swo-voice-item{gap:18px;align-items:center}
  .swo-voice-card{flex-basis:112px;width:112px;height:142px}
  .swo-voice-photo{height:102px}
  .swo-voice-text blockquote,.swo-voice-text blockquote p{font-size:15px}
  .swo-voice-attribution{font-size:12px!important}
  .swo-division{padding:20px}
  .swo-about-stats{gap:22px}
  .swo-about-stats .swo-speech-bubble{min-width:115px}
}
@media(prefers-reduced-motion:reduce){.swo-hero-card,.swo-button,.swo-career-photo img{transition:none}}



@media (min-width: 768px) and (max-width: 991px) {
  .swo-about-grid {grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);}
  .swo-about-visual {min-width: 0;padding-inline: 10px;}
  .swo-team-card {width: min(365px, 100%);}
}

@media (max-width: 520px) {
  .swo-hero-grid {grid-template-columns: minmax(0, 1fr);}
  .swo-hero-copy,.swo-hero-visual {min-width: 0;}
  .swo-hero-visual {padding-inline: 12px;}
  .swo-hero-card {width: 100%;max-width: 290px;box-sizing: border-box;}
  .swo-hero-count {right: 0;min-width: 0;padding: 9px 12px;}
  .swo-hero-count strong {font-size: 38px;}
  .swo-hero-count small {font-size: 10px;}
}