/*
 Theme Name:   Hello Elementor Child 2
 Template:     hello-elementor
*/

/* ==============================
   Design Tokens / Variablen
============================== */
:root{
  --blue-dark:#000a1b;
  --blue-light:#1296ff;

  --radius:4px;
  --radius-sm:2px;

  --shadow-soft:0 6px 20px rgba(0,0,0,.15);
  --shadow-hard:0 8px 20px rgba(0,0,0,.25);

  --t-fast:.18s ease;
  --t-med:.25s ease;

  /* sinnvolle Ergänzungen */
  --text:#fff;
  --text-soft:rgba(255,255,255,.86);
  --muted:rgba(166,184,214,.92);
  --line:rgba(255,255,255,.10);
}

/* ==============================
   Fonts
============================== */
@font-face{
  font-family:"Inter";
  src:url("fonts/Inter-Regular.woff2") format("woff2"),
      url("fonts/Inter-Regular.ttf") format("truetype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Inter";
  src:url("fonts/Inter-Bold.woff2") format("woff2"),
      url("fonts/Inter-Bold.ttf") format("truetype");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Oxanium";
  src:url("fonts/Oxanium-Regular.woff2") format("woff2"),
      url("fonts/Oxanium-Regular.ttf") format("truetype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

/* ==============================
   Global
============================== */
html,body{
  font-family:"Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.site{max-width:100%;}

.font-oxanium,
.font-oxanium *{
  font-family:"Oxanium", sans-serif !important;
}

/* Scroll Offset (Anker) */
html{scroll-padding-top:110px;}
@media (max-width:767px){
  html{scroll-padding-top:80px;}
}

/* Fokus sichtbar (Accessibility) */
a:focus-visible,
button:focus-visible{
  outline:2px solid var(--blue-light);
  outline-offset:2px;
}

/* ==============================
   Header
============================== */
.custom-site-header{
  position:sticky;
  top:0;
  z-index:999;
  width:100%;
  box-sizing:border-box;
  padding:10px 30px;

  color:var(--text);
  background:linear-gradient(
    to bottom,
    rgba(0,10,27,1) 0%,
    rgba(0,10,27,1) 30%,
    rgba(0,10,27,.9) 100%
  );
  transition:background var(--t-med), box-shadow var(--t-med);
  box-shadow:none;

  will-change:box-shadow, background;
}

/* Gradient Line unten */
.custom-site-header::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:3px;
  pointer-events:none;
  background:linear-gradient(
    to right,
    transparent 0%,
    transparent 10%,
    var(--blue-dark) 10%,
    var(--blue-light) 50%,
    var(--blue-dark) 90%,
    transparent 90%,
    transparent 100%
  );
}

.custom-site-header.is-scrolled{
  background-color:var(--blue-dark);
  box-shadow:var(--shadow-hard);
}
.custom-site-header.is-scrolled::after{
  background:linear-gradient(
    to right,
    var(--blue-dark) 0%,
    var(--blue-dark) 10%,
    var(--blue-light) 50%,
    var(--blue-dark) 90%,
    var(--blue-dark) 100%
  );
}

/* Inner */
.header-inner{
  max-width:1440px;
  width:100%;
  margin:0 auto;
  box-sizing:border-box;

  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:nowrap;
}

.header-left,
.header-right{
  display:flex;
  align-items:center;
  gap:15px;
}

.header-logo{order:1;}
.header-left{order:2;}
.header-right{order:3;}

/* Logo: eine Logik */
.header-logo img,
.header-logo img.custom-logo,
.header-logo .custom-logo,
.custom-logo-link img,
.custom-logo-link svg{
  height:64px;
  width:auto;
  transition:height var(--t-med);
  will-change:height;
}
.custom-site-header.is-scrolled .header-logo img,
.custom-site-header.is-scrolled .header-logo img.custom-logo,
.custom-site-header.is-scrolled .header-logo .custom-logo,
.custom-site-header.is-scrolled .custom-logo-link img,
.custom-site-header.is-scrolled .custom-logo-link svg{
  height:40px;
}

/* ===== Menü Desktop ===== */
.header-menu{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  gap:20px;
}
.header-menu > li{position:relative;}

.header-menu > li > a{
  display:inline-block;
  padding:6px 10px;
  text-decoration:none;
  color:var(--text);
  font-weight:500;
  border-radius:var(--radius-sm);
  transition:background-color var(--t-fast), color var(--t-fast);
}

/* Hover/Active */
.header-menu > li > a:hover,
.header-menu > li > a:focus,
.header-menu > li.current-menu-item > a,
.header-menu > li.current-menu-parent > a,
.header-menu > li.current-menu-ancestor > a,
.header-menu > li.current_page_parent > a,
.header-menu > li.current_page_ancestor > a,
.header-menu > li.menu-item-has-children:hover > a,
.header-menu > li.menu-item-has-children:focus-within > a{
  background-color:#fff;
  color:var(--blue-dark);
}

/* Chevron bei Submenu (Desktop) */
.header-menu > li.menu-item-has-children > a{
  position:relative;
  padding-right:28px;
}
.header-menu > li.menu-item-has-children > a::after{
  content:"\f078";
  font-family:"Font Awesome 6 Free";
  font-weight:900;
  font-size:.7em;
  position:absolute;
  right:8px;
  top:50%;
  transform:translateY(-50%);
}
.header-menu > li.menu-item-has-children:hover > a::after,
.header-menu > li.menu-item-has-children:focus-within > a::after{
  content:"\f077";
}

/* Submenu Desktop */
@media (min-width:1220px){
  .header-menu .sub-menu{
    position:absolute;
    top:100%;
    left:0;
    min-width:150px;

    list-style:none;
    margin:0;
    padding:4px 0 12px;
    display:none;

    background-color:var(--blue-dark);
    box-shadow:0 4px 20px rgba(0,0,0,.15);
    border-radius:var(--radius-sm);
    overflow:hidden;

    border-top:8px solid transparent;
    background-clip:padding-box;

    z-index:99;
  }

  .header-menu li:hover > .sub-menu,
  .header-menu li:focus-within > .sub-menu{
    display:block;
  }

  /* Hover-gap */
  .header-menu > li.menu-item-has-children::after{
    content:"";
    position:absolute;
    left:0; right:0;
    top:100%;
    height:10px;
    pointer-events:none;
  }
}

.header-menu .sub-menu li{width:100%;}
.header-menu .sub-menu a{
  display:block;
  padding:8px 15px;
  text-decoration:none;
  color:var(--text);
  white-space:nowrap;
  transition:background-color var(--t-fast), color var(--t-fast);
}
.header-menu .sub-menu a:hover,
.header-menu .sub-menu a:focus{
  background-color:var(--blue-light);
  color:#fff;
}

/* ===== Social & Language ===== */
.header-social .social-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  width:32px;
  height:32px;
  border-radius:var(--radius-sm);

  text-decoration:none;
  color:var(--text);
  font-size:14px;
  transition:background-color var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.header-social .social-link + .social-link{margin-left:8px;}
.header-social .social-link i{line-height:1;}
.header-social .social-link:hover,
.header-social .social-link:focus{
  background-color:var(--blue-light);
  color:var(--blue-dark);
  transform:translateY(-1px);
}

.header-lang{
  display:flex;
  align-items:center;
  gap:4px;
  font-size:14px;
}
.header-lang .lang-link{
  text-decoration:none;
  color:var(--text);
  text-transform:uppercase;
  font-weight:600;
}

/* ===== Burger ===== */
.header-burger{
  display:none;
  width:32px;
  height:32px;
  border:0;
  background:transparent;
  padding:0;
  cursor:pointer;
  position:relative;
}
.header-burger span{
  position:absolute;
  left:4px; right:4px;
  height:3px;
  background-color:#fff;
  border-radius:var(--radius-sm);
  transition:transform var(--t-fast), top var(--t-fast), opacity var(--t-fast);
}
.header-burger span:nth-child(1){top:8px;}
.header-burger span:nth-child(2){top:15px;}
.header-burger span:nth-child(3){top:22px;}

.custom-site-header.is-open .header-burger{z-index:1002 !important;}
.custom-site-header.is-open .header-burger span:nth-child(1){top:15px; transform:rotate(45deg);}
.custom-site-header.is-open .header-burger span:nth-child(2){opacity:0;}
.custom-site-header.is-open .header-burger span:nth-child(3){top:15px; transform:rotate(-45deg);}

.header-burger:hover,
.header-burger:focus{
  background-color:var(--blue-light);
}

/* ===== Header Actions ===== */
.header-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

button.header-btn,
a.header-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:8px 10px;
  border-radius:var(--radius-sm);
  font-size:14px;
  font-weight:600;

  border:0;
  cursor:pointer;
  white-space:nowrap;
  text-decoration:none;

  transition:transform var(--t-fast), box-shadow var(--t-fast), background-color var(--t-fast), color var(--t-fast);
}

/* Hover / Focus */
button.header-btn:hover,
button.header-btn:focus,
a.header-btn:hover,
a.header-btn:focus{
  transform:translateY(-1px);
  box-shadow:0 4px 14px rgba(0,0,0,.35);
}

/* Kontakt */
button.header-btn-contact,
a.header-btn-contact{
  background-color:var(--blue-light);
  color:var(--blue-dark) !important;
}

button.header-btn-contact:hover,
button.header-btn-contact:focus,
a.header-btn-contact:hover,
a.header-btn-contact:focus{
  background-color:#fff;
  color:var(--blue-dark);
}

/* Suche */
button.header-btn-search,
a.header-btn-search{
  background-color:transparent;
  color:#fff;
  border:1px solid var(--blue-light);
}

button.header-btn-search:hover,
button.header-btn-search:focus,
a.header-btn-search:hover,
a.header-btn-search:focus{
  background-color:var(--blue-light);
  color:var(--blue-dark);
}

/* ==============================
   Responsive Header / Mobile Menü
============================== */
@media (max-width:1220px){
  .custom-site-header{padding:6px 12px;}

  .header-left{order:1;}
  .header-right{display:none; order:2;}
  .header-logo{order:3; margin-left:auto;}

  .header-inner{
    max-width:100%;
    padding:0;
    gap:10px;
  }

  .header-burger{display:block;}

  /* Backdrop */
  .menu-backdrop{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.45);
    opacity:0;
    visibility:hidden;
    transition:opacity var(--t-fast), visibility var(--t-fast);
    z-index:997;
  }
  .menu-backdrop.is-open{
    opacity:1;
    visibility:visible;
  }
  body.menu-open{overflow:hidden;}

  /* Menü als Fullscreen Overlay */
  .header-nav{
    position:fixed;
    inset:0;
    padding:90px 20px 24px;
    background:rgba(0,10,27,.96);
    display:none;
    overflow-y:auto;
    z-index:998;
  }
  .custom-site-header.is-open .header-nav{display:block;}

  .header-menu{
    flex-direction:column;
    gap:8px;
  }
  .header-menu > li > a{
    width:100%;
    padding:10px 20px;
    box-sizing:border-box;
  }

  /* Mobile Submenu: kein Chevron, Einzug + Dot per background */
  .header-menu > li.menu-item-has-children > a::after{
    content:none !important;
    display:none !important;
  }
  .header-menu > li.menu-item-has-children > a{
    padding-right:20px !important;
  }

  .header-menu .sub-menu,
  .header-menu .sub-menu li{
    list-style:none !important;
    margin:0 !important;
    padding-left:0 !important;
  }

  .header-menu .sub-menu{
    position:static;
    box-shadow:none;
    background-color:var(--blue-dark);
    border-top:0;
    border-radius:0;
  }

  .header-menu .sub-menu a{
    padding:8px 20px 8px 54px !important;
    box-sizing:border-box;
    color:#fff;

    background-image:radial-gradient(circle, var(--blue-light) 0 3px, transparent 4px);
    background-repeat:no-repeat;
    background-position:28px 50%;
    background-size:8px 8px;
  }
  .header-menu .sub-menu a:hover{
    background-color:var(--blue-light);
    color:#fff;
  }

  .header-menu .sub-menu li.current-menu-item > a,
  .header-menu .sub-menu li.current_page_item > a{
    background-color:rgba(18,150,255,.14) !important;
  }
}

/* ==============================
   Scroll-to-top Button
============================== */
#scrollToTopBtn{
  position:fixed;
  right:20px;
  bottom:20px;
  width:48px;
  height:48px;

  border-radius:var(--radius-sm);
  border:none;
  cursor:pointer;

  background:var(--blue-light);
  color:#fff;
  font-size:20px;

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

  opacity:0;
  visibility:hidden;
  transform:translateY(10px);
  transition:opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast);
  z-index:9999;
}
#scrollToTopBtn::before{
  content:"";
  display:inline-block;
  width:12px;
  height:12px;
  border-top:2px solid #fff;
  border-right:2px solid #fff;
  transform:rotate(-45deg);
  margin-top:3px;
}
#scrollToTopBtn.show{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
#scrollToTopBtn:hover{filter:brightness(1.2);}

/* ==============================
   Footer
============================== */
.custom-site-footer{
  color:#fff;
  padding:40px 24px 24px;
  margin-top:60px;
  border-top:1px solid rgba(255,255,255,.08);
}
.custom-site-footer a{color:inherit; text-decoration:none;}
.custom-site-footer a:hover{text-decoration:underline;}

.custom-site-footer-inner{
  max-width:1400px;
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,2fr) repeat(3, minmax(0,1fr));
  gap:32px;
}
.footer-col h4{
  font-size:14px;
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-bottom:12px;
  opacity:.8;
}
.footer-text,
.footer-tagline,
.footer-col p{
  font-size:14px;
  line-height:1.6;
  opacity:.9;
  margin:0 0 8px;
}
.footer-logo{
  font-weight:700;
  font-size:18px;
  letter-spacing:.16em;
  text-transform:uppercase;
  margin-bottom:8px;
}
.footer-tagline{font-weight:500; margin-bottom:12px;}

.footer-links{list-style:none; margin:0; padding:0;}
.footer-links li + li{margin-top:6px;}
.footer-links a{font-size:14px; opacity:.9;}
.footer-links a:hover{opacity:1;}

.footer-social{
  margin-top:12px;
  display:flex;
  gap:8px;
}
.footer-social a{
  width:28px;
  height:28px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.25);
  font-size:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  opacity:.9;
}
.footer-social a:hover{
  opacity:1;
  background:rgba(255,255,255,.08);
}

.custom-site-footer-bottom{
  border-top:1px solid rgba(255,255,255,.08);
  margin-top:32px;
  padding-top:16px;
}
.footer-bottom-inner{
  max-width:1440px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  font-size:12px;
  opacity:.8;
}
.footer-bottom-links{
  display:flex;
  align-items:center;
  gap:8px;
}
.dot-separator{opacity:.5;}

@media (max-width:900px){
  .custom-site-footer-inner{grid-template-columns:repeat(2, minmax(0,1fr));}
}
@media (max-width:600px){
  .custom-site-footer-inner{grid-template-columns:1fr;}
  .footer-bottom-inner{flex-direction:column; align-items:flex-start;}
}

/* Footer Gradient Line */
.custom-site-footer-intec{
  position:relative !important;
  isolation:isolate !important;
}
.custom-site-footer-intec::before{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  top:0 !important;
  height:3px !important;

  background-image:linear-gradient(
    to right,
    transparent 0%,
    transparent 10%,
    var(--blue-dark) 10%,
    var(--blue-light) 50%,
    var(--blue-dark) 90%,
    transparent 90%,
    transparent 100%
  ) !important;

  z-index:100 !important;
  pointer-events:none !important;
  display:block !important;
}

:root{
  --personio-maxw: 1440px;
  --personio-sidepad: 0x;   /* mobile */
  --personio-sidepad-d: 0px; /* desktop */
  --personio-radius: 4px;
  --personio-accent: var(--blue-light, #4cc9ff);
  --personio-bg: var(--blue-dark, #030d22);
  --personio-card-bg: #061633;
  --personio-border: rgba(255,255,255,.16);
  --personio-fast: var(--t-fast, .15s);
  --personio-control-h: 40px;
  --personio-action-w: 170px;
}

/* ONE container to rule them all */
.personio-wrap{
  max-width: var(--personio-maxw);
  margin: 0 auto;
  padding: 0 var(--personio-sidepad-d);
  box-sizing: border-box;
}

@media (max-width:768px){
  .personio-wrap{ padding: 0 var(--personio-sidepad); }
  :root{ --personio-action-w: 100%; }
}

/* Filters + list */
.personio-job-filters{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin: 0 0 12px;
  align-items:flex-end;
}

.personio-job-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin:0;
}

/* Controls (iOS friendly) */
.personio-job-filters select,
.personio-job-filters input[type="search"],
#personio-filter-reset{
  height: var(--personio-control-h);
  font-size: 16px; /* iOS no zoom */
  border-radius: var(--personio-radius);
  border: 1px solid var(--personio-border);
  background: var(--personio-bg);
  color:#fff;
  padding: 8px 10px;
  box-sizing:border-box;
  appearance:none;
  -webkit-appearance:none;
}

.personio-job-filters > label{
  min-width: 180px;
  display:flex;
  flex-direction:column;
  gap:6px;
  color: rgba(255,255,255,.9);
  font-size:.85rem;
}

.personio-job-filters label.personio-job-filters-search{
  flex:1 1 260px;
  min-width:220px;
}

/* Reset button same width as apply (desktop) */
#personio-filter-reset{
  width: var(--personio-action-w);
  background: transparent;
  border-color: rgba(255,255,255,.22);
  cursor:pointer;
}

/* Row + cards */
.personio-job-row{
  display:flex;
  gap:10px;
  align-items:stretch;
  padding-bottom:10px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.personio-job-row:last-child{border-bottom:none; padding-bottom:0;}

.personio-job-item{
  border-radius: var(--personio-radius);
  border:1px solid rgba(255,255,255,.06);
  background: var(--personio-card-bg);
  box-shadow: 0 2px 10px rgba(0,0,0,.22);
  padding: 12px;
  color:#fff;
  text-decoration:none;
  transition: border-color var(--personio-fast), transform var(--personio-fast), box-shadow var(--personio-fast);
}

.personio-job-item-main{ flex: 1 1 auto; }
.personio-job-item-apply{
  flex: 0 0 var(--personio-action-w);
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Mobile: stack + divider between the two cards */
@media (max-width:768px){
  .personio-job-row{
    flex-direction:column;
    gap:10px;
    padding-bottom:14px;
  }
  .personio-job-item-apply{
    flex:1 1 auto;
    width:100%;
  }
  #personio-filter-reset{ width:100%; }
}

/* ==============================
   Search Overlay
============================== */
.search-overlay{
  position:fixed;
  inset:0;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(-10px);
  transition:opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast);
  z-index:999;
}
.search-overlay.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0);
}
.search-overlay-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.8);
}
.search-overlay-inner{
  position:relative;
  max-width:600px;
  margin:8vh auto 0;
  padding:2rem;
  border-radius:2px;
}
button.search-overlay-close{
  position:absolute;
  top:.75rem;
  right:.75rem;
  background:transparent;
  border:none;
  font-size:1.2rem;
  cursor:pointer;
  color:var(--blue-dark);
}
@media (max-width:767px){
  .search-overlay-inner{
    margin:0;
    min-height:100vh;
    border-radius:0;
  }
}

.search-field-wrap{position:relative;}
.search-form{display:block;}
.search-field{
  width:100%;
  padding:.75rem 2rem .75rem 1rem;
  border-radius:2px;
  border:2px solid var(--blue-light) !important;
  background:#fff;
  font-size:1rem;
}
.search-field:focus{
  outline:none;
  box-shadow:0 0 0 1px var(--blue-light);
}

.search-submit-icon{
  position:absolute;
  top:50%;
  right:.5rem;
  transform:translateY(-50%);
  width:2.25rem;
  height:2.25rem;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  border:1px solid var(--blue-dark);
  border-radius:2px;
  background:var(--blue-dark);
  color:#fff;
  cursor:pointer;
}
#search-overlay .search-submit-icon:hover{opacity:.8;}
.search-submit-icon:focus-visible{outline:2px solid var(--blue-light); outline-offset:2px;}

#search-overlay button,
#search-overlay .search-submit-icon{
  -webkit-appearance:none;
  appearance:none;
  background:var(--blue-light) !important;
  border:1px solid var(--blue-light) !important;
  color:#fff !important;
  text-decoration:none !important;
}

#search-overlay input[type="search"]::-webkit-search-cancel-button,
#search-overlay input[type="search"]::-webkit-search-decoration,
#search-overlay input[type="search"]::-webkit-search-results-button,
#search-overlay input[type="search"]::-webkit-search-results-decoration{
  display:none;
}

/* Search Results */
.search-results-list{
  display:flex;
  flex-direction:column;
  gap:1.5rem;
}
.search-result-item{
  border:1px solid #eee;
  border-radius:2px;
  padding:1rem;
}
.search-result-title{margin:0 0 .5rem;}
.search-result-title a{color:var(--blue-dark); text-decoration:none;}
.search-result-title a:hover{color:var(--blue-light);}
.search-result-excerpt{margin-bottom:.75rem; font-size:.95rem;}

body.search-results .site-main,
body.search-results #primary,
body.search-results .content-area{
  max-width:1440px;
  margin:0 auto;
  padding:20px 10px;
  box-sizing:border-box;
}
body.search-results{color:#fff;}
body.search-results .entry-title a{color:#fff; text-decoration:none;}
body.search-results .entry-title a:hover,
body.search-results .entry-title a:focus{text-decoration:underline;}
body.search-results .entry-meta,
body.search-results .entry-meta span{color:#ffffffcc; font-size:13px;}
.no-results.not-found p{margin:10px 0 0; color:#fff;}
	
#search-overlay button,
#search-overlay .search-submit-icon{
  background:var(--blue-light) !important;
  border:1px solid var(--blue-light) !important;
  color:#fff !important;
}
	
.search-overlay button,
#search-overlay button,
.search-overlay .search-submit-icon,
#search-overlay .search-submit-icon{
  -webkit-appearance:none;
  appearance:none;
  background: var(--blue-dark) !important;
  border: 1px solid var(--blue-dark) !important;
  color:#fff !important;
}


/* ==============================
   Content Helpers
============================== */
.has-accent-bar{
  position:relative;
  padding-bottom:12px;
}
.has-accent-bar::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:90px;
  height:2px;
  background:var(--blue-light);
  border-radius:2px;
}

.accent-paragraph{
  position:relative;
  padding-left:18px;
  color:#AAB4C3;
}
.accent-paragraph::before{
  content:"";
  position:absolute;
  left:0;
  top:4px;
  width:2px;
  height:calc(100% - 8px);
  background:var(--blue-light);
}

/* About / Service */
.about-copy,
.service-copy{max-width:1440px;}

.about-copy .about-lead,
.service-copy .service-lead{
  font-size:26px;
  font-weight:600;
  color:#fff;
}
.about-copy .about-lead{line-height:1.4; margin:0 0 24px;}
.service-copy .service-lead{line-height:1.35; margin:0 0 18px;}

.about-copy .about-body,
.service-copy .service-body{
  font-size:18px;
  font-weight:400;
  /* color:#AAB4C3; */
}
.about-copy .about-body{line-height:1.65; margin:0 0 28px;}
.service-copy .service-body{line-height:1.7; margin:0 0 18px;}

.about-copy .about-accent,
.service-copy .service-accent{
  position:relative;
  padding-left:20px;
  font-size:16px;
  font-weight:500;
  color:#fff;
  margin:0;
}
.about-copy .about-accent{line-height:1.65;}
.service-copy .service-accent{line-height:1.7;}

.about-copy .about-accent::before,
.service-copy .service-accent::before{
  content:"";
  position:absolute;
  left:0;
  top:6px;
  width:2px;
  height:calc(100% - 12px);
  background:var(--blue-light);
  border-radius:2px;
}

.service-copy .service-kicker{
  font-size:16px;
  line-height:1.4;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#fff;
  margin:22px 0 12px;
  position:relative;
  padding-bottom:10px;
}
.service-copy .service-kicker::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:90px;
  height:2px;
  background:var(--blue-light);
  border-radius:2px;
}
.service-copy .service-list{
  margin:0 0 22px;
  padding-left:18px;
  /* color:#AAB4C3; */
  font-size:15.5px;
  line-height:1.7;
}
.service-copy .service-list li{margin:0 0 10px;}

/* ==============================
   Logo Grid
============================== */
.mycn-logo-grid{
  display:grid;
  grid-template-columns:repeat(5, minmax(0,1fr));
  gap:14px;
  align-items:center;
}
@media (max-width:820px){.mycn-logo-grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:520px){.mycn-logo-grid{grid-template-columns:repeat(2,1fr);}}

.mycn-logo{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  border-radius:2px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
}
.mycn-logo img{
  max-width:100%;
  max-height:44px;
  height:auto;
  width:auto;
  filter:brightness(0) invert(1);
  opacity:.78;
  transition:opacity var(--t-fast), transform var(--t-fast);
}
.mycn-logo:hover img{
  opacity:1;
  transform:translateY(-1px) scale(1.03);
}

/* ==============================
   News List – Mobile iOS Fix
============================== */
.mycn-news-row{
  background:rgba(0,10,27,.92) !important;
  border:1px solid rgba(255,255,255,.08);
}
@media (max-width:768px){
  .mycn-news-row-link,
  .mycn-news-row-link:visited,
  .mycn-news-row-link:hover,
  .mycn-news-row-link:focus{
    grid-template-columns:1fr !important;
    padding:12px !important;
    gap:12px !important;
  }
  .mycn-news-row-thumb{
    height:200px !important;
    border-radius:4px;
    overflow:hidden;
    background-position:center center;
    background-size:cover;
  }
}
@media (hover:none){
  .mycn-news-row-link:hover,
  .mycn-news-row-link:focus{
    background-color:transparent !important;
  }
}

/* ==============================
   Hover vs Touch sauber trennen
============================== */
@media (hover:none) and (pointer:coarse){
  .header-menu > li > a:hover,
  .header-social .social-link:hover,
  button.header-btn:hover,
  .personio-job-item:hover,
  .personio-job-quicklink:hover,
  .mycn-logo:hover img,
  .dimensionen-badge:hover,
  #scrollToTopBtn:hover{
    transform:none !important;
    box-shadow:none !important;
    filter:none !important;
  }

  .header-menu > li > a:active,
  .header-social .social-link:active,
  button.header-btn:active,
  .personio-job-item:active,
  .personio-job-quicklink:active,
  .personio-job-apply-bottom:active,
  #scrollToTopBtn:active{
    transform:translateY(1px) !important;
  }
}

/* ==============================
   SX Divider Helper
============================== */
.sx-has-divider{
  position:relative;
  --max:1440px;
  --divider-h:1px;
  --divider-gap:52px;
  --divider-opacity:.30;
  padding-bottom:calc(var(--divider-gap) + var(--divider-h));
}
.sx-has-divider::after{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:0;
  height:var(--divider-h);
  width:100%;
  max-width:var(--max);
  background:linear-gradient(
    90deg,
    transparent,
    rgba(18, 150, 255,var(--divider-opacity)),
    transparent
  );
  pointer-events:none;
}

/* Thumb helper */
.sx-dimThumb{
  aspect-ratio:4 / 3;
  position:relative;
  overflow:hidden;
  outline:1px solid rgba(18, 150, 255,.2);
  outline-offset:0;
}
	
.section-header {
  max-width: 56rem;
}

.section-header-eyebrow {
  font-family: Oxanium, Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}

.section-header-title {
  margin-top: 14px;
  font-family: Oxanium, Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 40px;
  line-height: 1.1;
  font-weight: 600;
  color: #ffffff;
}

.section-header-divider {
  margin-top: 16px;
  width: 56px;
  height: 2px;
  background-color: #1296ff;
  opacity: 0.7;
}

.section-header-text {
  margin-top: 18px;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.85);
}
	
/* Apply card = CTA variant */
.personio-job-item-apply{
  background: rgba(76,201,255,.10);         
  border-color: rgba(76,201,255,.25);
}

.personio-job-item-apply:hover{
  border-color: var(--personio-accent);
}

/* Text inside CTA */
.personio-job-apply-inner{
  text-align:center;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.personio-job-apply-label{
  color: var(--personio-accent);
  font-weight: 750;
}
.personio-job-apply-sub{
  font-size: .78rem;
  color: rgba(255,255,255,.72);
}
	
/* Connected card look on desktop */
@media (min-width:769px){
  .personio-job-row .personio-job-item-main{
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  .personio-job-row .personio-job-item-apply{
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
  .personio-job-row{
    gap:0;
  }
  .personio-job-row .personio-job-item-main{
    border-right: none; 
  }
}

/* ===== Fix: titles overflow on mobile / flex shrink ===== */
.personio-job-item-main,
.personio-job-header-row,
.personio-job-title{
  min-width:0;
}

.personio-job-title{
  overflow-wrap:anywhere;
  word-break:break-word;
  hyphens:auto;
}

/* Optional: clamp titles */
@media (max-width:768px){
  .personio-job-title{
    display:-webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow:hidden;
  }
}

/* ===== Apply card as CTA variant ===== */
.personio-job-item-apply{
  background: rgba(76,201,255,.10);
  border-color: rgba(76,201,255,.25);
}

.personio-job-apply-inner{
  text-align:center;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.personio-job-apply-label{
  color: var(--personio-accent);
  font-weight: 750;
}

.personio-job-apply-sub{
  font-size:.78rem;
  color: rgba(255,255,255,.72);
}

/* ===== Connected look (desktop) ===== */
@media (min-width:769px){
  .personio-job-row{ gap:0; }
  .personio-job-row .personio-job-item-main{
    border-top-right-radius:0;
    border-bottom-right-radius:0;
    border-right:none;
  }
  .personio-job-row .personio-job-item-apply{
    border-top-left-radius:0;
    border-bottom-left-radius:0;
  }
}

/* ===== Detail Hero ===== */
.personio-hero{
  background: var(--personio-card-bg, #061633);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 4px;
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
  margin: 0 0 14px;
}

.personio-hero-inner{
  padding: 14px 14px;
}

.personio-hero-top{
  display:flex;
  gap: 12px;
  align-items:flex-start;
  justify-content:space-between;
}

.personio-hero-title{
  margin:0;
  font-size: 1.8rem;
  line-height: 1.1;
  min-width:0;
  overflow-wrap:anywhere;
}

.personio-hero-apply{
  flex: 0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 40px;
  padding: 0 14px;
  border-radius: 4px;
  background: var(--personio-accent);
  color:#020816;
  font-weight:800;
  text-decoration:none;
  white-space:nowrap;
}

.personio-hero-meta{
  margin-top: 10px;
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
}

.personio-pill{
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.92);
  font-size: .8rem;
}

.personio-hero-sub{
  margin: 10px 0 0;
  color: rgba(255,255,255,.75);
  font-size: .95rem;
}

.personio-detail-body{
  background: var(--personio-card-bg, #061633);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 4px;
  padding: 14px 14px;
}

@media (max-width:768px){
  .personio-hero-top{ flex-direction:column; }
  .personio-hero-apply{ width:100%; }
}

	
/* ===== Search results wrapper immer 1440px ===== */
body.search-results .search-results,
body.search-results .search-results-page,
body.search-results main.site-main {
  max-width: 1440px;
  margin: 0 auto;
  padding: 40px 20px;
  box-sizing: border-box;
}

/* ---------- Hello/Reset overrides (gezielt nur im Personio-Bereich) ---------- */

.personio-wrap,
.personio-wrap * {
  box-sizing: border-box;
}

.personio-wrap a {
  color: inherit;
  text-decoration: none;
}

.personio-wrap p,
.personio-wrap li,
.personio-wrap div,
.personio-wrap span,
.personio-wrap h1,
.personio-wrap h2,
.personio-wrap h3 {
  color: #fff;
}

/* Controls: reset.css pink killen */
.personio-wrap button,
.personio-wrap [type="button"],
.personio-wrap [type="submit"],
.personio-wrap select,
.personio-wrap input[type="search"]{
  background-color: var(--personio-bg) !important;
  border: 1px solid var(--personio-border) !important;
  border-radius: var(--personio-radius) !important;
  color: #fff !important;
  box-shadow: none !important;
}

/* Search wrapper keeps X inside */
.personio-search-wrapper{ position:relative; width:100%; display:flex; align-items:center; }
.personio-search-wrapper input[type="search"]{ width:100%; padding-right: 34px; }

/* native X weg (damit kein doppeltes X) */
.personio-wrap input[type="search"]::-webkit-search-cancel-button,
.personio-wrap input[type="search"]::-webkit-search-decoration{
  -webkit-appearance: none;
}

.personio-wrap .personio-search-clear{
  position:absolute;
  right:10px;
  top:50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border: none !important;
  background: transparent !important;
  color: rgba(255,255,255,.75) !important;
  padding: 0 !important;
  line-height: 20px;
  cursor: pointer;
}
.personio-wrap .personio-search-clear:hover{
  color:#fff !important;
}

/* Reset button stays neutral */
#personio-filter-reset{
  background: transparent !important;
  border-color: rgba(255,255,255,.22) !important;
  color: rgba(255,255,255,.9) !important;
}
#personio-filter-reset:hover{
  border-color: var(--personio-accent) !important;
  color: #fff !important;
}

/* ---------- Cards ---------- */

.personio-job-item{
  border-radius: var(--personio-radius) !important;
  background: var(--personio-card-bg) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  color:#fff !important;
}

/* Apply card/button: Hintergrund accent, Schrift dunkel */
.personio-job-item-apply{
  background: var(--personio-accent) !important;
  border-color: var(--personio-accent) !important;
}
.personio-job-item-apply .personio-job-apply-label{
  color: #04101f !important;
  font-weight: 700;
}

/* Hover softer */
.personio-job-item:hover{
  border-color: rgba(255,255,255,.16);
  box-shadow: 0 3px 12px rgba(0,0,0,.25);
  transform: translateY(-1px);
}
.personio-job-item-apply:hover{
  filter: brightness(1.05);
}

/* Empty message white */
.personio-job-empty-msg{ color:#fff !important; }

/* ---------- Detail page ---------- */

.personio-job-detail,
.personio-detail-body,
.personio-job-section-content,
.personio-job-section-content *{
  color:#fff !important;
}

.personio-detail-body {
  padding: 26px;
}

/* Hero apply button */
.personio-hero-apply,
.personio-job-apply-bottom{
  display:inline-block;
  background: var(--personio-accent) !important;
  border: 1px solid var(--personio-accent) !important;
  color: #04101f !important;
  border-radius: var(--personio-radius) !important;
  text-decoration:none !important;
  box-shadow: none !important;
}

.personio-hero-apply:hover,
.personio-job-apply-bottom:hover{
  filter: brightness(1.05);
  transform: translateY(-1px);
}

.personio-job-apply-bottom{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  height: var(--personio-control-h) !important;
  padding: 0 16px !important;
  border-radius: var(--personio-radius) !important;
  background: var(--personio-accent) !important;
  border: 1px solid var(--personio-accent) !important;
  color:#020816 !important;
  font-weight:800 !important;
  text-decoration:none !important;
  box-shadow:none !important;
}

/* Hinweistext hell (nicht grau zu dunkel) */
.personio-job-external-hint{
  color: rgba(255,255,255,.75) !important;
}

.personio-search-wrapper{
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
}

/* Platz fürs X */
#personio-job-search-input{
  width: 100%;
  padding-right: 34px !important;
}

/* browser X weg */
#personio-job-search-input::-webkit-search-cancel-button,
#personio-job-search-input::-webkit-search-decoration{
  -webkit-appearance: none;
}

/* Unser X: nicht pink, nicht border, keine transitions vom reset */
.personio-search-clear{
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;

  width: 22px !important;
  height: 22px !important;
  padding: 0 !important;

  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;

  color: rgba(255,255,255,.75) !important;
  font-size: 18px !important;
  line-height: 22px !important;

  box-shadow: none !important;
  text-decoration: none !important;
  transition: none !important;
}

.personio-search-clear:hover{
  color: #fff !important;
  background: transparent !important;
}

/* Filter row aligned with job rows */
.personio-job-filters{
  display: grid !important;
  grid-template-columns: 220px 1fr var(--personio-action-w);
  gap: 10px !important;
  align-items: end !important;
  margin: 0 0 12px !important;
}

/* labels sollen kein extra padding/margin erzeugen */
.personio-job-filters > label{
  margin: 0 !important;
  min-width: 0 !important;
}

/* Reset button same width as apply */
#personio-filter-reset{
  width: 100% !important;
  cursor: pointer;
  background: transparent !important;
  border-color: rgba(255,255,255,.22) !important;
  color: rgba(255,255,255,.9) !important;
}

/* List tighter + flush */
.personio-job-list{
  gap: 10px !important;
  margin: 0 !important;
}

.personio-job-footer-cta{
  margin-top:16px !important;
  text-align:center !important;
}

/* Detail: Apply Button im Hero sauber zentrieren */
.personio-hero-apply{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  height: var(--personio-control-h, 40px) !important;
  padding: 0 16px !important;

  line-height: 1 !important;          /* verhindert "Text hängt oben" */
  text-align: center !important;
  white-space: nowrap !important;

  border-radius: 4px !important;
  box-sizing: border-box !important;
}

/* Mobile: volle Breite + Text wirklich mittig */
@media (max-width:768px){
  .personio-hero-apply{
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }
}

.personio-job-item-main{ width: 100%; }
.personio-job-item-apply{ width: 100%; }

/* Mobile stacking */
@media (max-width: 768px){
  :root{ --personio-action-w: 100%; }

  .personio-job-filters{
    grid-template-columns: 1fr !important;
  }
  #personio-filter-reset{ width: 100% !important; }

  .personio-job-row{
    grid-template-columns: 1fr !important;
  }
}
	
.search-overlay button,
#search-overlay button,
.search-overlay .search-submit-icon,
#search-overlay .search-submit-icon{
  background: var(--blue-dark) !important;
  border: 1px solid var(--blue-dark) !important;
  color: #fff !important;
  -webkit-appearance:none !important;
  appearance:none !important;
}

/* HARDFIX: header-btn als Button darf nicht pink sein */
button.header-btn,
button.header-btn:visited,
button.header-btn:active {
  background: var(--blue-dark) !important;
  border: 1px solid var(--blue-dark) !important;
  color: #fff !important;
  border-radius: 2px !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

/* Hover / Focus */
button.header-btn:hover,
button.header-btn:focus,
button.header-btn:focus-visible {
  background: var(--blue-light) !important;
  border-color: var(--blue-light) !important;
  color: #fff !important;
  outline: none !important;
}

/* Wenn du willst: der Search-Submit im Hero soll wie Header-Search sein */
.search-hero__submit.header-btn{
  background: var(--blue-dark) !important;
  border-color: var(--blue-dark) !important;
}
.search-hero__submit.header-btn:hover,
.search-hero__submit.header-btn:focus-visible{
  background: var(--blue-light) !important;
  border-color: var(--blue-light) !important;
}
	
/* No-results Titel + Text: immer weiß */
body.search-no-results .no-results-title,
body.search-no-results .no-results.not-found .no-results-title,
body.search-results .no-results-title,
body.search-results .no-results.not-found .no-results-title {
  color: #fff !important;
}

body.search-no-results .no-results.not-found p,
body.search-results .no-results.not-found p {
  color: #fff !important;
}

body.search-results .site-main,
body.search-results #primary,
body.search-results .content-area{
  max-width:1440px;
}

body.search-results .site-main,
body.search-results #primary,
body.search-results .content-area,
body.search-no-results .site-main,
body.search-no-results #primary,
body.search-no-results .content-area{
  max-width:1380px !important;
  margin:0 auto !important;
  padding:40px 20px !important;
  box-sizing:border-box !important;
}