*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Arial,Helvetica,sans-serif;color:#071b34;background:#fff}
a{color:inherit}.topbar{height:42px;background:#05264d;color:#fff;display:flex;justify-content:space-between;align-items:center;padding:0 6.5vw;font-size:.95rem}.topbar 
a{text-decoration:none}.lang{display:flex;gap:8px;align-items:center}.lang span{width:34px;height:18px;background:white;border-radius:20px;display:inline-block;position:relative}.lang 
span:after{content:"";width:14px;height:14px;background:#05264d;border-radius:50%;position:absolute;top:2px;left:2px}.lang 
button{border:0;background:transparent;color:#fff;cursor:pointer;font-weight:700}.lang 
button.active{opacity:1}.site-header{min-height:188px;padding:18px 6.5vw;display:flex;align-items:center;justify-content:space-between;background:#fff;border-bottom:1px solid #d9e1e8}.logo 
img{width:min(560px,44vw);display:block}.site-header nav{display:flex;gap:44px;align-items:center;text-transform:uppercase;font-weight:700;letter-spacing:.04em}.site-header 
nav a{text-decoration:none;padding:14px 0;border-bottom:3px solid transparent}.site-header 
nav a.active,.site-header nav a:hover{color:#05264d;border-bottom-color:#05264d}.menu-toggle{display:none}.hero{min-height:420px;display:flex;align-items:center;padding:70px 6.8vw;position:relative;overflow:hidden}.hero-bg{position:absolute;inset:0;background-position:center;background-size:cover;background-repeat:no-repeat;opacity:0;transition:opacity 1.4s ease-in-out;z-index:0}.hero-bg.is-active{opacity:1}.hero-bg-a{background-image:url("../images/hero-tech-original_04.jpg")}.hero-bg-b{background-image:url("../images/hero-tech-original_03.jpg")}.hero-bg-c{background-image:url("../images/hero-elec-prop_01.jpg")}.hero-copy{max-width:650px;position:relative;z-index:1}.hero 
h1{font-size:clamp(2.4rem,4vw,4.4rem);line-height:1.08;margin:0 0 28px;text-transform:uppercase;color:#061b33}.hero 
h1:after,.competencies h2:after,.about-card h2:after,.page-hero h1:after{content:"";display:block;width:76px;height:4px;background:#05264d;margin-top:22px}.hero 
p{font-size:1.22rem;line-height:1.65;color:#061b33}.hero-buttons{display:flex;gap:24px;flex-wrap:wrap;margin-top:34px}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;text-decoration:none;border-radius:4px;font-weight:800;letter-spacing:.02em;text-transform:uppercase}.btn.primary{background:#05264d;color:#fff}.btn.secondary{border:1px solid #05264d;color:#05264d;background:#fff}.btn.light{border-color:#fff;color:#fff;background:transparent}.competencies{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #d9e1e8;border-bottom:1px solid #d9e1e8}.left{padding:44px 6.8vw}.left h2,.about-card h2{font-size:2rem;text-transform:uppercase;color:#05264d;margin:0 0 34px}.icons{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}.icons article{text-align:center;border-right:1px solid #ccd6df;padding:8px 18px}.icons article:last-child{border-right:0}.icons div{font-size:3rem;color:#05264d}.icons 
h3{font-size:1rem;color:#05264d}.icons p{font-size:.9rem;line-height:1.55}.about-card{background:linear-gradient(90deg,rgba(5,38,77,.85) 0%,rgba(5,38,77,.55) 45%,rgba(5,38,77,.20) 100%),url("../images/power-systems-panel.jpg") center/cover no-repeat;color:#fff;padding:44px 6.8vw;display:flex;align-items:center}.about-card p{max-width:580px;line-height:1.7;color:rgba(255,255,255,.9)}.about-card h2{color:#fff}.about-card h2:after{background:#fff}.subpage{min-height:55vh}.page-hero{background:linear-gradient(135deg,#f7fbff,#e8f0f7);padding:100px 6.8vw;text-align:left}.page-hero h1{font-size:clamp(2.6rem,5vw,5rem);margin:0;color:#05264d;text-transform:uppercase}.page-hero p{font-size:1.35rem;color:#384b5e;max-width:850px}.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;padding:80px 6.8vw}.service-grid article{border:1px solid #d9e1e8;border-radius:8px;padding:34px;background:#fff;box-shadow:0 18px 50px rgba(5,38,77,.08)}.service-grid h2{color:#05264d}.service-grid p,.text-section p{line-height:1.75;color:#334}.text-section{padding:80px 6.8vw;max-width:1000px}.text-section h2{font-size:2.4rem;color:#05264d}.mail-large{display:inline-block;margin-top:25px;font-size:2rem;color:#05264d;text-decoration:none;font-weight:800}.footer{background:#05264d;color:#fff;display:flex;justify-content:space-between;gap:30px;padding:42px 6.8vw;align-items:center}.footer img{width:68px;background:#fff;border-radius:50%;padding:4px}.footer p{font-family:Georgia,serif;letter-spacing:.14em;margin:8px 0}.footer a{display:block;text-decoration:none;margin:8px 0;color:#fff}@media(max-width:1100px){.site-header{min-height:auto;align-items:flex-start;flex-direction:column}.logo img{width:min(520px,90vw)}.site-header nav{gap:22px;flex-wrap:wrap}.competencies{grid-template-columns:1fr}.icons{grid-template-columns:repeat(2,1fr)}}@media(max-width:720px){.topbar{height:auto;padding:12px 5vw;gap:12px;flex-direction:column}.site-header nav{display:none;flex-direction:column;align-items:flex-start}.site-header nav.open{display:flex}.menu-toggle{display:block;position:absolute;right:6vw;top:28px;background:#05264d;color:#fff;border:0;padding:10px 14px;font-size:1.4rem}.hero{padding:50px 5vw}.hero p{font-size:1rem}.icons,.service-grid{grid-template-columns:1fr}.icons article{border-right:0;border-bottom:1px solid #ccd6df}.footer{flex-direction:column;text-align:center}}
.tech-visuals{padding:80px 6.8vw;background:#f5f8fb}
.tech-visuals h2{text-transform:uppercase;color:#05264d;font-size:2rem;margin:0 0 36px}
.visual-grid{display:grid;grid-template-columns:1fr 1fr 1.0fr;gap:24px}
.visual-card{background:#fff;border:1px solid #d9e1e8;border-radius:14px;overflow:hidden;box-shadow:0 18px 45px rgba(5,38,77,.08)}
.visual-card img{width:100%;height:370px;object-fit:cover;display:block}
.visual-card h3{margin:20px 22px 8px;color:#05264d}
.visual-card p{margin:0 22px 24px;line-height:1.6;color:#425466}
@media(max-width:1100px){.visual-grid{grid-template-columns:1fr}}

.lang {
  position: relative;
  display: flex;
  width: 92px;
  padding: 4px;
  background: #0f2747;
  border-radius: 999px;
}

.lang::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 42px;
  height: calc(100% - 8px);
  background: #ffffff;
  border-radius: 999px;
  transition: transform 0.3s ease;
  z-index: 1;
}

.lang.en::before {
  transform: translateX(42px);
}

.lang button {
  position: relative;
  z-index: 2;
  width: 42px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-weight: 600;
  color: #ffffff;
}

.lang button.active {
  color: #0f2747;
}


/* Clickable service cards */
.service-card-link{
  display:block;
  color:inherit;
  text-decoration:none;
  height:100%;
  cursor:pointer;
}

.service-card-link article{
  height:100%;
  position:relative;
  overflow:hidden;
  border:1px solid #d9e1e8;
  transition:
    transform .28s ease,
    box-shadow .28s ease,
    border-color .28s ease,
    background .28s ease;
}

.service-card-link article::after{
  content:"Mehr erfahren";
  display:inline-block;
  margin-top:22px;
  color:#05264d;
  font-weight:800;
  letter-spacing:.04em;
  opacity:.72;
  transition:transform .28s ease, opacity .28s ease;
}

.service-card-link:hover article,
.service-card-link:focus-visible article{
  transform:translateY(-10px) scale(1.015);
  box-shadow:0 30px 80px rgba(5,38,77,.20);
  border-color:#05264d;
  background:#ffffff;
}

.service-card-link:hover article::after,
.service-card-link:focus-visible article::after{
  transform:translateX(8px);
  opacity:1;
}

.service-card-link:focus-visible{
  outline:3px solid #05264d;
  outline-offset:6px;
  border-radius:10px;
}


/* Version 4: footer signet with minimal white ring */
.footer img{
  width:88px; /* 88*/
  height:88px; /* 88 */
  object-fit:cover;
  background:#fff;
  border-radius:50%; /* 50*/
  padding:0px;
  box-shadow:0 8px 24px rgba(0,0,0,.22);
}

@media(max-width:720px){
  .footer img{
    width:92px;
    height:92px;
  }
}

/* ===== AC/DC Distribution ===== */

.image-showcase{
    display:flex;
    gap:40px;
    justify-content:center;
    align-items:flex-start;
    margin:50px 0;
    flex-wrap:wrap;
}

.image-card{
    flex:1 1 450px;
    max-width:550px;
    background:#fff;
    border-radius:10px;
    overflow:hidden;
    box-shadow:0 6px 18px rgba(0,0,0,.12);
}

.image-card img{
    width:100%;
    height:320px;
    object-fit:contain;
    object-position:center center;
    
    display:block;
}

.image-card h3{
    margin:20px 20px 10px;
}

.image-card p{
    margin:0 20px 25px;
    line-height:1.6;
}

@media (max-width:900px){

    .image-showcase{
        flex-direction:column;
        align-items:center;
    }

}

.image-wrapper{

    display:flex;

    justify-content:center;

    align-items:center;

    height:320px;

    background:#f8f9fa;

}

.image-wrapper img{

    max-width:100%;

    max-height:100%;

    width:auto;

    height:auto;

}

.image-small {
    flex: 1 1 350px;
    max-width: 350px;
}

.image-medium {
    flex: 1 1 550px;
    max-width: 550px;
}

.image-large {
    flex: 1 1 800px;
    max-width: 800px;
}

.image-xl {
    flex: 1 1 50000px;
    max-width: 5000px;
}

/* ===========================
   Large Engineering Diagram
=========================== */

.diagram-hero {
    width: 100%;
    margin: 70px 0;
}

.diagram-hero-inner {
    max-width: 1800px;
    margin: 0 auto;
    padding: 0 100px;
}

.diagram-hero img {
    width: 90%;
    height: auto;
    display: block;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
}

.diagram-hero h3 {
    margin-top: 22px;
    color: #0F2747;
}

/* Tablet */
@media (max-width: 900px) {
    .diagram-hero-inner {
        padding: 0 40px;
    }
}

/* Smartphone */
@media (max-width: 520px) {
    .diagram-hero-inner {
        padding: 0 20px;
    }
}

.lang-image {
    width: 100%;
    height: auto;
    display: none;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
}

html[lang="de"] .lang-image-de {
    display: block;
}

html[lang="en"] .lang-image-en {
    display: block;
}

/* ===========================
   KOceanic Page Layout
=========================== */

.page-container,
.content-block {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 60px;
    padding-right: 60px;
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
}

.content-section {
    margin: 70px 0;
}

.content-section h2 {
    margin-bottom: 25px;
}

.content-section p {
    max-width: 1050px;
    line-height: 1.7;
    margin-bottom: 22px;
}

/* ===========================
   Image Showcase
=========================== */

.image-showcase {
    display: flex;
    gap: 40px;
    justify-content: center;
    align-items: stretch;
    margin: 50px 0;
    flex-wrap: wrap;
}

.image-card-container{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:40px;
    margin-top:50px;
}
    

.image-card {
    flex: 1 1 450px;
    max-width: 580px;
    padding:30px;
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
}

.image-card img {
    width: 100%;
    height: 320px;
    object-fit: contain;
    display: block;
    background: #f7f9fb;
}

.image-card h3 {
    margin: 22px 24px 10px;
}

.image-card p {
    margin: 0 24px 28px;
    line-height: 1.6;
}

/* ===========================
   Responsive
=========================== */

@media (max-width: 900px) {
    .page-container,
    .content-block {
        padding-left: 28px;
        padding-right: 28px;
    }

    .image-showcase {
        flex-direction: column;
        align-items: center;
    }

    .image-card {
        max-width: 700px;
    }
}

@media (max-width: 520px) {
    .page-container,
    .content-block {
        padding-left: 20px;
        padding-right: 20px;
    }

    .image-card img {
        height: 260px;
    }
}

/* ===========================
   Back Button
=========================== */

.back-button-container{
    margin:60px 0 30px;
    text-align:center;
}

.back-button{

    display:inline-block;

    padding:14px 34px;

    background:#0F2747;          /* KOceanic Dunkelblau */
    color:#ffffff;

    text-decoration:none;

    font-weight:600;

    border-radius:8px;

    transition:all .25s ease;

    box-shadow:0 4px 12px rgba(0,0,0,.15);

}

.back-button:hover{

    background:#1B5FA7;          /* KOceanic Hellblau */

    transform:translateY(-2px);

    box-shadow:0 8px 18px rgba(0,0,0,.20);

}


/* Sprachabhängige Bilder */
.diagram-hero .lang-image {
    display: none !important;
}

html[lang="de"] .diagram-hero .lang-image-de {
    display: block !important;
}

html[lang="en"] .diagram-hero .lang-image-en {
    display: block !important;
}

/* ===========================
   Hero Crossfade Overlay & Lesbarkeit
=========================== */

.hero::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg, rgba(5,38,77,.78) 0%, rgba(5,38,77,.48) 42%, rgba(5,38,77,.16) 100%);
    z-index:1;
    pointer-events:none;
}

.hero-copy{
    position:relative;
    z-index:2;
}

.hero h1{
    color:#ffffff;
    text-shadow:0 2px 12px rgba(0,0,0,.45);
}

.hero h1:after{
    background:#ffffff;
}

.hero p{
    color:rgba(255,255,255,.95);
    text-shadow:0 2px 8px rgba(0,0,0,.35);
}