:root{
  --kcs-blue:#1f4f96;
  --kcs-blue-dark:#163d78;
  --kcs-violet:#4a3b92;
  --kcs-ink:#222735;
  --kcs-muted:#657084;
  --kcs-soft:#f5f7fb;
  --kcs-line:#e1e6ef;
  --white:#fff;
  --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Segoe UI",Arial,Helvetica,sans-serif;
  color:var(--kcs-ink);
  line-height:1.55;
  background:#fff;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
.wrap{width:min(var(--max),calc(100% - 44px));margin:0 auto}

/* Header */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.98);
  border-bottom:1px solid rgba(20,45,90,.10);
  box-shadow:0 2px 16px rgba(20,45,90,.06);
}
.header-inner{
  min-height:84px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
}
.brand{
  display:flex;
  align-items:center;
  flex:0 0 auto;
  margin-right:auto;
}
.brand img{
  width:72px;
  height:72px;
  object-fit:contain;
  margin-right:18px;
}
.brand-text{
  font-weight:700;
  color:var(--kcs-blue);
  font-size:20px;
  letter-spacing:.2px;
  white-space:nowrap;
}
.nav{
  display:flex !important;
  flex-direction:row !important;
  align-items:stretch;
  justify-content:flex-end;
  flex:0 0 auto;
  white-space:nowrap;
}
.nav a{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:84px;
  padding:0 13px;
  margin-left:4px;
  color:#253a61;
  font-size:14px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.25px;
  border-bottom:3px solid transparent;
  background:transparent;
}
.nav a:hover{
  color:var(--kcs-blue);
  background:#f3f6fb;
  border-bottom-color:var(--kcs-blue);
}
.menu-button{
  display:none !important;
  border:0;
  background:none;
  font-size:28px;
  color:var(--kcs-blue);
  cursor:pointer;
  margin-left:16px;
}

/* Hero similar to the existing Elementor layout: image with overlapping blue content card */
.hero{
  min-height:620px;
  background:url("../images/headerbild_kcs.jpg") center center / cover no-repeat;
  position:relative;margin-bottom:165px
}
.hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(9,34,73,.12),rgba(9,34,73,.02) 55%,rgba(9,34,73,.06))
}
.hero-inner{position:relative;z-index:2;height:620px}
.hero-card{
  position:absolute;left:0;bottom:-120px;
  width:min(720px,72%);
  padding:42px 58px 46px;
  background:linear-gradient(135deg,var(--kcs-blue),var(--kcs-blue-dark));
  color:white;border-radius:34px;
  box-shadow:0 24px 60px rgba(10,39,84,.22)
}
.hero-card h1{
  margin:0;font-size:clamp(46px,5vw,69px);line-height:.99;font-weight:760;letter-spacing:-2px
}
.hero-divider{height:2px;background:rgba(255,255,255,.8);margin:24px 0 23px}
.hero-card p{font-size:17px;margin:0 0 12px;max-width:610px}
.hero-card .small{font-size:16px;opacity:.96}
.primary-button{
  display:inline-flex;margin-top:20px;padding:12px 22px;
  border-radius:4px;background:#fff;color:var(--kcs-blue);
  font-size:13px;font-weight:800;letter-spacing:.55px;text-transform:uppercase
}
.primary-button:hover{background:#edf3ff}

/* Sections */
.section{padding:82px 0}
.section.soft{background:var(--kcs-soft)}
.section-title{
  margin:0 0 55px;text-align:center;
  color:var(--kcs-blue);font-size:44px;line-height:1.05;font-weight:760;letter-spacing:-1px
}
.modules{
  display:grid;grid-template-columns:repeat(5,1fr);gap:0;
  align-items:start
}
.module-card{
  text-align:center;padding:24px 12px 30px;
}
.module-card img{height:122px;width:auto;margin:0 auto 20px;object-fit:contain}
.module-card h3{
  margin:0 0 13px;color:var(--kcs-blue);font-size:17px;line-height:1.15;font-weight:800
}
.module-card p{margin:0 auto;max-width:200px;font-size:13.5px;line-height:1.55;color:#4d596e}

/* software */
.software-band{
  background:linear-gradient(135deg,#f7f9fd 0,#eef3fa 100%);
  overflow:hidden
}
.software-grid{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:55px}
.software-copy h2{
  color:var(--kcs-blue);font-size:44px;line-height:1.05;margin:0 0 28px;text-transform:uppercase
}
.software-list{margin:0;padding-left:20px}
.software-list li{margin:0 0 12px;font-size:15px}
.pill-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}
.pill{
  background:var(--kcs-blue);color:white;border-radius:4px;
  padding:8px 14px;font-weight:800;font-size:13px;letter-spacing:.5px
}
.software-visual{padding:10px 0}
.software-visual img{width:100%;filter:drop-shadow(0 22px 25px rgba(25,59,111,.14))}

/* call to action */
.cta{
  position:relative;min-height:410px;
  background:linear-gradient(90deg,rgba(21,62,119,.94),rgba(38,75,136,.74)),
             url("../images/kcs_customer_support.png") right bottom / auto 105% no-repeat;
  color:#fff;display:flex;align-items:center
}
.cta-copy{max-width:590px}
.cta h2{font-size:49px;line-height:1.02;margin:0 0 18px;text-transform:uppercase;letter-spacing:-1px}
.cta p{font-size:17px;max-width:520px}

/* services */
.services{display:grid;grid-template-columns:repeat(3,1fr);gap:42px}
.service{text-align:center;padding:20px 25px}
.service img{height:124px;width:auto;margin:0 auto 22px;object-fit:contain}
.service h3{color:var(--kcs-blue);font-size:19px;margin:0 0 12px;font-weight:800}
.service p{font-size:14px;color:#515d70;margin:0}

/* contact */
.contact-section{background:#f2f5fa}
.contact-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:0;background:#fff;box-shadow:0 12px 42px rgba(20,55,105,.10)}
.contact-data{
  background:linear-gradient(145deg,var(--kcs-blue),#183d77);
  color:#fff;padding:52px 48px
}
.contact-data h2{font-size:36px;margin:0 0 25px}
.contact-data p{font-size:17px;margin:0 0 18px}
.contact-data a{text-decoration:underline;text-underline-offset:3px}
.contact-form-look{padding:52px 55px}
.contact-form-look h2{color:var(--kcs-blue);margin:0 0 8px;font-size:34px}
.contact-form-look .kicker{font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:#68768d;font-size:13px;margin-bottom:27px}
.fake-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fake-field,.fake-area{
  border:1px solid #d7dde8;background:#fff;padding:14px 15px;color:#7b8595;border-radius:3px
}
.fake-area{grid-column:1/-1;height:115px}
.form-note{font-size:12.5px;color:#717b8c;margin-top:14px}
.mail-button{
  display:inline-block;margin-top:20px;background:var(--kcs-blue);color:#fff;
  padding:12px 21px;border-radius:3px;font-weight:750;font-size:14px
}

/* footer */
.footer{background:#142b50;color:#dbe4f1;padding:32px 0}
.footer-inner{display:flex;justify-content:space-between;gap:25px;align-items:center;flex-wrap:wrap}
.footer-links{display:flex;gap:20px}
.footer a:hover{text-decoration:underline}

/* generic subpages */
.page-hero{background:#eef3f9;padding:68px 0 52px;border-bottom:1px solid var(--kcs-line)}
.page-hero h1{margin:0;color:var(--kcs-blue);font-size:44px}
.page-main{padding:55px 0 80px}
.info-box{border-left:4px solid var(--kcs-blue);background:#f1f5fb;padding:18px 22px;margin:22px 0}
.download-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.download-card{border:1px solid var(--kcs-line);padding:24px;background:#fff}
.download-card h3{color:var(--kcs-blue);margin-top:0}
.download-card a{color:var(--kcs-blue);text-decoration:underline;display:block;margin:8px 0}

/* updates */
.update-controls{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.update-controls input,.update-controls select{
  padding:11px 12px;border:1px solid #d4dbe7;border-radius:3px;font:inherit
}
.update-table-wrap{overflow:auto;border:1px solid var(--kcs-line)}
.update-table{width:100%;border-collapse:collapse;font-size:13px;background:#fff}
.update-table th,.update-table td{padding:10px 12px;border-bottom:1px solid var(--kcs-line);text-align:left;vertical-align:top}
.update-table th{background:#eef3f9;color:var(--kcs-blue);position:sticky;top:0}
.update-table td:last-child{min-width:350px}
.count{color:var(--kcs-muted);margin:10px 0 16px}

/* responsive */
@media(max-width:1000px){
  .nav{gap:18px}.nav a{font-size:13px}
  .modules{grid-template-columns:repeat(3,1fr)}
  .software-grid{grid-template-columns:1fr}
  .services{gap:20px}
}
@media(max-width:900px){
  .header-inner{min-height:70px}
  .brand img{width:52px;height:52px;margin-right:12px}
  .brand-text{font-size:18px}
  .menu-button{display:block !important;margin-left:auto}
  .nav{
    display:none !important;
    position:absolute;
    left:0;
    right:0;
    top:70px;
    background:#fff;
    flex-direction:column !important;
    align-items:stretch;
    padding:8px 22px 18px;
    box-shadow:0 14px 25px rgba(20,45,90,.10)
  }
  .nav.open{display:flex !important}
  .nav a{
    display:block;
    min-height:0;
    width:100%;
    padding:12px 6px;
    margin:0;
    border-bottom:1px solid #e6ebf2;
  }
  .hero{min-height:510px;margin-bottom:150px}
  .hero-inner{height:510px}
  .hero-card{width:calc(100% - 20px);left:10px;bottom:-125px;padding:30px 28px;border-radius:22px}
  .hero-card h1{font-size:42px}
  .modules{grid-template-columns:repeat(2,1fr)}
  .section-title{font-size:36px}
  .services{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .fake-fields{grid-template-columns:1fr}
  .fake-area{grid-column:auto}
  .download-grid{grid-template-columns:1fr}
}
@media(max-width:470px){
  .wrap{width:min(var(--max),calc(100% - 28px))}
  .modules{grid-template-columns:1fr}
}


/* V4 – original Blütezeit hero details */
.brand img{
  width:112px;
  height:68px;
  object-fit:contain;
  margin-right:28px;
}
.hero{
  background-image:url("../images/headerbild_kcs.jpg");
  background-position:center center;
}
.hero-laptop{
  position:absolute;
  z-index:4;
  right:1.5%;
  bottom:-96px;
  width:min(47vw,570px);
  height:auto;
  filter:drop-shadow(0 18px 20px rgba(15,31,54,.20));
}
.nav-contact{
  display:flex;
  align-items:center;
  margin-left:18px;
}
.nav .round-contact{
  width:35px;
  min-height:35px;
  height:35px;
  padding:0;
  margin-left:8px;
  border:0;
  border-radius:50%;
  background:#2f69a8;
  color:#fff;
  font-size:17px;
  line-height:35px;
  font-family:Arial,sans-serif;
  text-transform:none;
}
.nav .round-contact:hover{
  background:#204f8c;
  color:#fff;
  border:0;
}
@media(max-width:1050px){
  .nav a{padding-left:9px;padding-right:9px;font-size:13px}
  .nav-contact{margin-left:8px}
  .hero-laptop{width:45vw;right:0}
}
@media(max-width:900px){
  .nav-contact{display:flex;margin:10px 0 0}
  .nav .round-contact{display:flex;width:38px;min-height:38px;height:38px;margin:0 10px 0 0;padding:0}
  .hero-laptop{width:55vw;right:0;bottom:-70px}
}
@media(max-width:650px){
  .hero-laptop{width:62vw;right:-4%;bottom:-58px}
}

/* V5 – hero overlap and header icon refinements */
.hero-card{
  width:min(650px,61%);
  padding-right:46px;
}
.hero-laptop{
  right:-1%;
  bottom:-108px;
  width:min(41vw,500px);
}
.nav .round-contact{
  position:relative;
  flex:0 0 35px;
  overflow:hidden;
}
.icon-mail{
  width:17px;height:12px;
  border:2px solid #fff;border-radius:1px;
  position:relative;display:block;
}
.icon-mail::before,.icon-mail::after{
  content:"";position:absolute;top:1px;width:10px;height:2px;background:#fff;
}
.icon-mail::before{left:0;transform:rotate(34deg);transform-origin:left center}
.icon-mail::after{right:0;transform:rotate(-34deg);transform-origin:right center}
.icon-phone{
  width:15px;height:15px;display:block;position:relative;
  border-left:3px solid #fff;border-bottom:3px solid #fff;
  border-radius:2px 2px 2px 9px;
  transform:rotate(-45deg);
}
.icon-phone::before,.icon-phone::after{
  content:"";position:absolute;background:#fff;width:6px;height:4px;border-radius:2px;
}
.icon-phone::before{left:-4px;top:-3px}
.icon-phone::after{right:-2px;bottom:-4px}
@media(max-width:1100px){
  .hero-card{width:min(620px,62%)}
  .hero-laptop{width:min(40vw,455px);right:-1%;bottom:-95px}
}
@media(max-width:900px){
  .hero-card{width:calc(100% - 20px)}
  .hero-laptop{display:none}
}


/* V6 – Hero-Geometrie näher an der Blütezeit-Referenz */
.hero{
  min-height:700px;
  margin-bottom:118px;
  background-position:center 43%;
}
.hero-inner{height:700px}

.hero-card{
  left:0;
  bottom:-72px;
  width:min(690px,55%);
  min-height:392px;
  padding:38px 44px 38px 50px;
  border-radius:30px;
}
.hero-card h1{
  font-size:clamp(41px,3.55vw,55px);
  line-height:1.05;
  letter-spacing:-1.3px;
  font-weight:800;
}
.hero-divider{margin:21px 0 19px}
.hero-card p{
  font-size:15.5px;
  line-height:1.44;
  margin-bottom:9px;
}
.hero-card .small{font-size:15px}
.hero-card .primary-button{margin-top:17px}

.hero-laptop{
  right:-1.5%;
  bottom:-78px;
  width:min(43vw,535px);
  z-index:5;
}

.header-inner{min-height:92px}
.brand img{
  width:116px;
  height:72px;
}
.nav a{
  min-height:92px;
  padding-left:15px;
  padding-right:15px;
}
.nav-contact{margin-left:15px}
.nav .round-contact{
  width:38px;
  min-height:38px;
  height:38px;
  flex-basis:38px;
  background:#2e69a8;
}
.icon-mail{width:18px;height:13px}
.icon-phone{width:16px;height:16px}

@media(max-width:1200px){
  .hero-card{width:min(650px,57%)}
  .hero-laptop{width:min(42vw,490px);right:-1%}
}
@media(max-width:1000px){
  .hero{min-height:640px;margin-bottom:105px}
  .hero-inner{height:640px}
  .hero-card{width:min(620px,60%);bottom:-68px}
  .hero-laptop{width:min(40vw,430px);bottom:-70px}
}
@media(max-width:900px){
  .hero{min-height:540px;margin-bottom:145px}
  .hero-inner{height:540px}
  .hero-card{
    width:calc(100% - 20px);
    left:10px;
    bottom:-128px;
    min-height:auto;
  }
  .hero-laptop{display:none}
}


/* V7 – final hero positioning before functional development */
@media(min-width:1001px){
  /* More of the people remains visible, matching the original layout */
  .hero-card{
    bottom:-105px;
  }

  /* Monitor lower and slightly left so it overlaps the blue panel for depth */
  .hero-laptop{
    right:2.5%;
    bottom:-125px;
    width:min(42vw,520px);
  }

  /* Blütezeit-style rounded-square contact buttons instead of circles */
  .nav .round-contact{
    width:38px;
    min-height:38px;
    height:38px;
    flex-basis:38px;
    border-radius:6px;
  }
}


/* V8 – original dark-blue software + CTA band */
.software-band,
.cta{
  background:#123f82;
  color:#fff;
}
.software-band{
  padding-bottom:42px;
}
.software-band h2,
.software-band li,
.cta h2,
.cta p{
  color:#fff;
}
.software-band .pill{
  border-color:rgba(255,255,255,.7);
  color:#fff;
}
.cta{
  margin-top:0;
  padding-top:34px;
  padding-bottom:62px;
}
.cta .primary-button{
  background:#fff;
  color:#123f82;
}

/* V9 – protected two-login customer download area */
.login-area,.customer-download{background:#e4efff;min-height:520px;padding:90px 0}
.login-card{max-width:520px;margin:auto;background:#fff;padding:42px;border-radius:24px;box-shadow:0 12px 34px rgba(0,35,90,.12)}
.login-card h1{color:#123f82;margin-top:0}
.login-card label{display:block;font-weight:700;color:#123f82;margin:18px 0}
.login-card input{display:block;width:100%;box-sizing:border-box;margin-top:7px;padding:13px 14px;border:1px solid #b7c8df;border-radius:8px;font:inherit}
.login-error{padding:12px 14px;background:#fff1f1;border-radius:8px;margin:15px 0}
.customer-download-inner{max-width:980px}
.download-title-row{display:flex;align-items:center;justify-content:space-between;gap:30px;margin-bottom:65px}
.download-title-row h1{color:#123f82;font-size:48px;margin:0}
.logout-button{display:inline-block;background:#efa21b;color:#fff;font-weight:800;padding:16px 34px;border-radius:14px;box-shadow:0 6px 14px rgba(0,0,0,.2)}
.customer-download-grid{display:grid;grid-template-columns:1fr 1fr;gap:110px}
.customer-download-box{background:#123f82;color:#fff;min-height:95px;border-radius:25px;box-shadow:0 8px 20px rgba(0,0,0,.22);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:14px}
.customer-download-box span{font-size:14px;opacity:.8;margin-bottom:7px}
.customer-download-box a,.customer-download-box strong{color:#fff;font-weight:600}
@media(max-width:760px){.customer-download-grid{grid-template-columns:1fr;gap:25px}.download-title-row{align-items:flex-start;flex-direction:column;margin-bottom:35px}.login-area,.customer-download{padding:45px 15px}}


/* V11 – customer-area buttons matching the old role pages */
.customer-actions{
  display:grid;
  gap:30px;
  align-items:stretch;
}
.customer-actions.two{grid-template-columns:repeat(2,1fr)}
.customer-actions.three{grid-template-columns:repeat(3,1fr)}
.customer-action{
  min-height:105px;
  border-radius:26px;
  background:#3567ad;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  box-shadow:0 8px 20px rgba(0,0,0,.2);
  font-size:20px;
}
.customer-action:hover{background:#234f91}
.customer-action span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:52%;
  min-height:50px;
  border-radius:16px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);
}
.updates-search{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.updates-search input{flex:1;min-width:260px;padding:12px;border:1px solid #cdd8e8;border-radius:6px;font:inherit}
.updates-search button,.updates-search a{padding:12px 18px;border:0;border-radius:6px;background:#123f82;color:#fff;font-weight:700}
.updates-count{color:#637086}
.updates-list{display:grid;gap:18px}
.update-entry{border:1px solid #dbe3ef;border-radius:10px;padding:20px 22px;background:#fff}
.update-entry h2{font-size:20px;color:#123f82;margin:10px 0}
.update-meta{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.update-meta span{background:#edf3fb;color:#123f82;padding:4px 9px;border-radius:12px;font-size:13px}
.update-details{line-height:1.55}
.updates-pages{display:flex;gap:7px;margin-top:25px}
.updates-pages a{padding:7px 11px;border:1px solid #cbd7e7;border-radius:5px}
.updates-pages a.current{background:#123f82;color:#fff}
@media(max-width:760px){
  .customer-actions.two,.customer-actions.three{grid-template-columns:1fr}
}


/* V12 – Aktualisierungen: rekonstruiert aus Blütezeit "Simple Changelog" */
.updates-page{
  padding-top:34px;
  padding-bottom:70px;
}
.updates-hero{
  padding-top:42px;
  padding-bottom:30px;
}
.updates-topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  margin-bottom:22px;
}
.updates-back{
  font-weight:700;
  color:#123f82;
}
.updates-customer{
  padding:7px 12px;
  border-radius:14px;
  background:#e3efff;
  color:#123f82;
  font-weight:700;
  font-size:14px;
}

.scl_filtercontrols{
  margin:0 0 22px 0;
}
.scl_filter_field{
  width:min(620px,100%);
  box-sizing:border-box;
  padding:11px 12px;
  border:1px solid #bfc9d8;
  border-radius:4px;
  font:inherit;
}
.scl_filter_modecheckbox{
  display:block;
  margin-top:10px;
  font-size:14px;
  color:#434b56;
}
.scl_filter_actions{
  display:flex;
  gap:10px;
  align-items:center;
  margin-top:12px;
}
.scl_filter_actions button,
.scl_filter_actions a{
  display:inline-block;
  border:0;
  border-radius:4px;
  padding:9px 15px;
  background:#123f82;
  color:#fff;
  font:inherit;
  font-weight:700;
  cursor:pointer;
}

.scl_table_wrap{
  width:100%;
  overflow-x:auto;
}
#scl_entries_table{
  width:100%;
  border-collapse:collapse;
  table-layout:auto;
  font-size:14px;
  line-height:1.42;
}
#scl_entries_table th,
#scl_entries_table td{
  padding:11px 12px;
  border:1px solid #d4d4d4;
  vertical-align:top;
  text-align:left;
}
#scl_entries_table th{
  background-color:#f2f2f2;
  color:#1e2b3d;
  font-weight:700;
}
#scl_entries_table tr:nth-child(even) td{
  background-color:#e3efff;
}
#scl_entries_table tr:nth-child(odd) td{
  background-color:#ffffff;
}
#scl_entries_table th:nth-child(1),
#scl_entries_table td:nth-child(1){
  width:100px;
  white-space:nowrap;
}
#scl_entries_table th:nth-child(2),
#scl_entries_table td:nth-child(2){
  width:150px;
}
#scl_entries_table th:nth-child(3),
#scl_entries_table td:nth-child(3){
  width:34%;
}
#scl_entries_table strong{
  font-weight:700;
}

@media(max-width:760px){
  #scl_entries_table{
    min-width:820px;
  }
  .updates-topbar{
    align-items:flex-start;
    flex-direction:column;
  }
}

/* V14 – Homepage reconstruction from the original Blütezeit layout */
@media(min-width:901px){
  .nav-contact{gap:18px;margin-left:24px}
  .nav .round-contact{background:transparent!important;border:0!important;border-radius:0!important;width:44px!important;height:44px!important;min-height:44px!important;flex-basis:44px!important;margin:0!important;padding:0!important}
  .nav .round-contact:hover{background:transparent!important}
  .icon-mail{width:35px;height:25px;border:0;background:#123f82;border-radius:3px;position:relative}
  .icon-mail::before{content:"";position:absolute;left:5px;top:3px;width:23px;height:15px;background:transparent;border-left:4px solid #fff;border-bottom:4px solid #fff;transform:rotate(-45deg);transform-origin:center}
  .icon-mail::after{display:none}
  .icon-phone{width:36px;height:36px;border-left:9px solid #123f82;border-bottom:9px solid #123f82;border-radius:0 0 4px 18px;transform:rotate(-45deg);position:relative}
  .icon-phone::before,.icon-phone::after{background:#123f82;width:14px;height:10px;border-radius:2px}
  .icon-phone::before{left:-11px;top:-7px}.icon-phone::after{right:-5px;bottom:-10px}
}

.software-band{position:relative;padding:78px 0 92px;background:linear-gradient(150deg,#0e3979 0%,#174d99 52%,#3975c6 100%);overflow:hidden}
.software-stage{position:relative;z-index:1;min-height:920px}
.software-stage::before,.software-stage::after{content:"";position:absolute;z-index:-1;background:rgba(137,174,226,.43);border-radius:420px 420px 0 0}
.software-stage::before{width:650px;height:265px;right:-50px;top:42px}
.software-stage::after{width:570px;height:240px;left:-410px;top:390px}
.software-top{display:grid;grid-template-columns:1.05fr .7fr 1.05fr;gap:40px;align-items:start}
.software-copy h2{color:#fff;font-size:44px;line-height:1.02;margin:0 0 28px;text-transform:uppercase;max-width:370px}
.software-list{color:#fff;padding-left:18px}.software-list li{font-size:13.5px;line-height:1.45;margin-bottom:12px}
.software-traits{padding-top:12px;color:#fff;font-size:21px;line-height:1.8;text-transform:uppercase}
.software-traits div::before{content:"✓";font-size:29px;font-weight:900;margin-right:12px;vertical-align:-2px}
.software-monitor{position:relative;z-index:2;margin-top:82px;width:118%;max-width:490px;justify-self:end;filter:drop-shadow(0 18px 22px rgba(0,0,0,.18))}
.software-middle{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;margin-top:50px}
.software-stack{width:82%;max-width:500px;justify-self:start;filter:drop-shadow(0 16px 20px rgba(0,0,0,.14))}
.software-secondary{color:#fff;font-size:13.5px;line-height:1.5;padding-left:18px;margin:0}.software-secondary li{margin-bottom:13px}
.software-bottom{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center;margin-top:52px}
.software-cta h2{font-size:39px;line-height:1.02;margin:0 0 16px;color:#fff;text-transform:uppercase}
.software-cta .primary-button{margin-top:6px}
.software-photo{width:380px;max-width:90%;justify-self:center;filter:drop-shadow(0 15px 20px rgba(0,0,0,.12))}

.services-section{padding:78px 0 95px;background:#e8f2ff}
.services-section .section-title{font-size:32px;margin-bottom:42px;text-transform:uppercase}
.services{max-width:800px;margin:0 auto;gap:70px}.service{padding:0 8px}.service img{height:92px;margin-bottom:13px}.service h3{font-size:13px;margin-bottom:10px}.service p{font-size:11.5px;line-height:1.45;color:#263a5a}

.contact-section{padding:0;background:linear-gradient(135deg,#0d3979 0%,#2f70c5 100%);color:#fff;overflow:hidden}
.contact-stage{width:100%;display:grid;grid-template-columns:minmax(320px,30%) minmax(260px,24%) 1fr;min-height:430px;align-items:stretch}
.contact-photo{min-height:430px;background:url("../images/kcs_kontakt.jpg") center 40% / cover no-repeat;border-radius:0 32px 0 0}
.contact-data{background:transparent;padding:155px 45px 40px 70px;color:#fff}.contact-data h2{display:none}.contact-data p{font-size:14px;line-height:1.45}.contact-data p:first-of-type::before{content:"⌖ ";font-weight:800}.contact-data a{color:#fff;text-decoration:none}
.contact-form-look{background:transparent;padding:68px 7vw 45px 25px;color:#fff}.contact-form-look h2{color:#fff;text-align:center;font-size:31px;margin-bottom:2px}.contact-form-look .kicker{color:#fff;text-align:center;font-size:11px;margin-bottom:32px;font-weight:500}.fake-fields{gap:10px}.fake-field,.fake-area{background:#fff;border:0;border-radius:2px;color:#8b94a1;padding:11px 13px;font-size:11px}.fake-area{height:88px}.form-note{display:none}.mail-button{display:block;width:max-content;margin:13px auto 0;background:#fff;color:#123f82;padding:9px 20px;font-size:11px;text-transform:uppercase;font-weight:800}
.footer{background:#fff;color:#123f82;padding:13px 0}.footer-inner{justify-content:center;font-size:11px}.footer-inner>div:first-child{display:none}.footer-links{gap:22px}.footer-links::after{content:"2026"}

@media(max-width:1000px){.software-top{grid-template-columns:1fr .65fr 1fr}.software-stage{min-height:850px}.software-monitor{width:105%}.contact-stage{grid-template-columns:32% 28% 1fr}.contact-data{padding-left:35px}}
@media(max-width:900px){
 .software-stage{min-height:auto}.software-stage::before,.software-stage::after{display:none}.software-top,.software-middle,.software-bottom{grid-template-columns:1fr;gap:30px}.software-traits{padding:0}.software-monitor,.software-stack,.software-photo{width:min(520px,90%);justify-self:center;margin-top:0}.software-middle,.software-bottom{margin-top:55px}.software-cta{text-align:center}
 .contact-stage{grid-template-columns:1fr}.contact-photo{min-height:360px;border-radius:0}.contact-data{padding:40px 28px 10px}.contact-form-look{padding:30px 28px 45px}.contact-data h2{display:block}
}


/* V14a – eindeutige Mail-/Telefon-Symbole im Header */
.nav-contact{
  display:flex;
  align-items:center;
  gap:22px;
  margin-left:24px;
}
.header-icon-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:0;
  background:transparent !important;
  border:0 !important;
  padding:0 !important;
  width:auto !important;
  height:auto !important;
  border-radius:0 !important;
}
.header-icon{
  display:block;
  overflow:visible;
}
.header-mail{
  width:46px;
  height:35px;
}
.header-phone{
  width:48px;
  height:48px;
  transform:rotate(-8deg);
}
.header-icon-link:hover{
  opacity:.78;
}
@media(max-width:900px){
  .nav-contact{gap:15px;margin-left:8px}
  .header-mail{width:34px;height:27px}
  .header-phone{width:36px;height:36px}
}


/* V14b – Header-Symbole etwas kleiner, Telefon deutlicher diagonal */
.header-mail{
  width:40px;
  height:31px;
}
.header-phone{
  width:42px;
  height:42px;
  transform:rotate(-18deg);
}
@media(max-width:900px){
  .header-mail{width:31px;height:24px}
  .header-phone{width:33px;height:33px;transform:rotate(-18deg)}
}


/* V15 – funktionales Kontaktformular */
.contact-form{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:20px;
}
.contact-form input,
.contact-form textarea{
  width:100%;
  box-sizing:border-box;
  border:0;
  border-radius:0;
  background:#fff;
  color:#17243a;
  padding:13px 15px;
  font:inherit;
  outline:0;
}
.contact-form textarea{
  min-height:118px;
  resize:vertical;
}
.contact-form input:focus,
.contact-form textarea:focus{
  box-shadow:0 0 0 3px rgba(255,255,255,.28);
}
.contact-form .mail-button{
  align-self:flex-start;
  border:0;
  cursor:pointer;
  font:inherit;
  font-weight:700;
}
.form-honeypot{
  position:absolute !important;
  left:-10000px !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
}
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.contact-status{
  display:none;
  margin:14px 0 4px;
  padding:10px 12px;
  border-radius:5px;
  font-size:14px;
}
.contact-status.is-success,
.contact-status.is-error{
  display:block;
}
.contact-status.is-success{
  background:rgba(255,255,255,.95);
  color:#155b2b;
}
.contact-status.is-error{
  background:rgba(255,255,255,.95);
  color:#9a1d1d;
}

/* V15 – Rechtstexte / Cookie-Hinweis */
.legal-page{
  padding-top:45px;
  padding-bottom:80px;
}
.legal-content{
  max-width:1000px;
  line-height:1.65;
}
.legal-content h1,
.legal-content h2,
.legal-content h3{
  color:#123f82;
}
.legal-content a{
  color:#123f82;
  text-decoration:underline;
}
.legal-load-error{
  padding:20px;
  background:#fff4e5;
  border:1px solid #efc27a;
  border-radius:8px;
}


/* V16 – Responsive Feinschliff für Startseite
   Desktop-Aufbau aus V15 bleibt unverändert. */
@media (max-width: 1100px) {
  .wrap { width:min(94%, 1120px); }

  .nav {
    gap:18px;
    font-size:14px;
  }

  .nav-contact {
    gap:12px;
    margin-left:8px;
  }

  .software-section,
  .software-showcase {
    overflow:hidden;
  }

  .contact-inner,
  .contact-grid {
    gap:24px;
  }
}

@media (max-width: 820px) {
  body { overflow-x:hidden; }

  .site-header {
    position:relative;
  }

  .header-inner {
    min-height:74px;
    flex-wrap:wrap;
    align-items:center;
    padding-top:10px;
    padding-bottom:10px;
  }

  .brand img {
    max-width:125px;
    height:auto;
  }

  .nav {
    width:100%;
    order:3;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:8px 16px;
    padding-top:9px;
  }

  .nav a {
    white-space:nowrap;
  }

  .nav-contact {
    margin-left:auto;
  }

  .header-mail { width:31px; height:24px; }
  .header-phone { width:33px; height:33px; }

  .hero,
  .hero-inner {
    min-height:auto;
  }

  .hero-copy,
  .hero-content {
    max-width:100%;
  }

  .hero h1 {
    font-size:clamp(30px, 8vw, 46px);
    line-height:1.08;
  }

  .modules-grid,
  .services-grid,
  .leistung-grid,
  .contact-grid,
  .contact-inner {
    grid-template-columns:1fr !important;
  }

  /* Die frei komponierte Desktop-Softwarefläche wird mobil
     in einen normalen Lesefluss überführt. */
  .software-section,
  .software-showcase,
  .software-stage {
    height:auto !important;
    min-height:0 !important;
  }

  .software-section [style*="position: absolute"],
  .software-showcase [style*="position: absolute"],
  .software-stage [style*="position: absolute"] {
    position:relative !important;
    inset:auto !important;
    top:auto !important;
    right:auto !important;
    bottom:auto !important;
    left:auto !important;
    transform:none !important;
    width:auto !important;
    max-width:100% !important;
    margin:20px auto !important;
  }

  .software-section img,
  .software-showcase img,
  .software-stage img {
    max-width:100%;
    height:auto;
  }

  .software-section .shape,
  .software-showcase .shape,
  .software-stage .shape,
  .software-section [class*="circle"],
  .software-showcase [class*="circle"],
  .software-section [class*="ellipse"],
  .software-showcase [class*="ellipse"] {
    display:none !important;
  }

  .contact-photo,
  .contact-image {
    min-height:280px;
  }

  .contact-form-look {
    width:100%;
    box-sizing:border-box;
  }

  .footer-inner {
    flex-direction:column;
    gap:10px;
    text-align:center;
  }

  .footer-links {
    justify-content:center;
    flex-wrap:wrap;
  }
}

@media (max-width: 520px) {
  .wrap { width:92%; }

  .header-inner {
    min-height:68px;
  }

  .brand img {
    max-width:108px;
  }

  .nav {
    font-size:12px;
    gap:7px 11px;
  }

  .nav-contact {
    gap:10px;
  }

  .header-mail { width:27px; height:21px; }
  .header-phone { width:29px; height:29px; }

  section {
    scroll-margin-top:20px;
  }

  .hero h1 {
    font-size:32px;
  }

  .section-title,
  section h2 {
    overflow-wrap:anywhere;
  }

  .contact-photo,
  .contact-image {
    min-height:220px;
  }

  .contact-form input,
  .contact-form textarea {
    font-size:16px; /* verhindert iOS-Zoom beim Fokussieren */
  }

  .mail-button,
  button {
    min-height:44px;
  }

  .legal-page {
    padding-top:28px;
    padding-bottom:50px;
  }
}


/* V16a – Mobile Hero: Karte nicht mehr unter/über den Header schieben */
@media (max-width: 820px) {
  .hero {
    min-height:0 !important;
    height:auto !important;
    margin-bottom:0 !important;
    padding:210px 0 26px;
    background-position:center top;
  }

  .hero-inner {
    height:auto !important;
    min-height:0 !important;
    width:100%;
  }

  .hero-card {
    position:relative !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;
    width:calc(100% - 28px) !important;
    min-height:0 !important;
    margin:0 auto !important;
    padding:28px 24px 30px !important;
    border-radius:20px !important;
  }

  .hero-card h1 {
    font-size:clamp(30px, 8vw, 40px) !important;
    line-height:1.06 !important;
    letter-spacing:-.6px !important;
  }

  .hero-divider {
    margin:20px 0 !important;
  }

  .hero-card p,
  .hero-card .small {
    font-size:16px !important;
    line-height:1.48 !important;
  }

  .hero-card .primary-button {
    margin-top:14px;
  }
}

@media (max-width: 520px) {
  .hero {
    padding-top:170px;
  }

  .hero-card {
    width:calc(100% - 20px) !important;
    padding:24px 20px 28px !important;
    border-radius:16px !important;
  }

  .hero-card h1 {
    font-size:30px !important;
  }
}


/* V16b – öffentlicher TeamViewer-Download unter dem Login bzw. Kundenbereich */
.teamviewer-download{
  display:flex;
  justify-content:center;
  width:100%;
  margin:24px auto 8px;
}
.teamviewer-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:11px;
  min-height:48px;
  padding:11px 22px;
  border-radius:9px;
  background:#123f82;
  color:#fff !important;
  text-decoration:none !important;
  font-weight:700;
  box-shadow:0 5px 14px rgba(0,0,0,.14);
}
.teamviewer-button img{
  display:block;
  width:30px;
  height:30px;
  object-fit:contain;
}
.teamviewer-button:hover{
  opacity:.88;
}
@media(max-width:520px){
  .teamviewer-download{
    margin-top:18px;
  }
  .teamviewer-button{
    width:min(100%, 310px);
    box-sizing:border-box;
  }
}


/* V16c – kompakter Download-Login und TeamViewer wieder als Grafik */
.login-area{
  padding:42px 16px 54px !important;
  min-height:0 !important;
}
.login-card{
  width:min(100%, 470px) !important;
  margin:0 auto !important;
  padding:28px 34px 30px !important;
  border-radius:14px !important;
}
.login-card h1{
  margin-top:0 !important;
  margin-bottom:10px !important;
  font-size:30px !important;
}
.login-card p{
  margin:0 0 18px !important;
}
.login-card form{
  gap:13px !important;
}
.login-card label{
  margin:0 !important;
}
.login-card input{
  padding:10px 12px !important;
}
.login-card .primary-button{
  margin-top:4px !important;
  min-height:42px !important;
}

.teamviewer-download{
  margin:20px auto 0 !important;
  padding:0 12px;
}
.teamviewer-logo-link{
  display:block;
  width:min(100%, 360px);
  line-height:0;
  background:transparent;
  border:0;
  box-shadow:none;
  text-decoration:none;
}
.teamviewer-logo-link img{
  display:block;
  width:100%;
  height:auto;
}
.teamviewer-logo-link:hover{
  opacity:.84;
}

@media(max-width:520px){
  .login-area{
    padding:24px 10px 38px !important;
  }
  .login-card{
    padding:22px 20px 24px !important;
  }
  .login-card h1{
    font-size:26px !important;
  }
  .teamviewer-logo-link{
    width:min(100%, 310px);
  }
}