/* KXON Unternehmens- und Infrastrukturseite */
.topbar__current { color: #fff; font-weight: 750; }

.company-cover { position: relative; min-height: 410px; overflow: hidden; color: #fff; background: #071426; }
.company-cover__media { position: absolute; inset: 0; background: url('../img/hero-company.png') center center / cover no-repeat; transform: scale(1.015); }
.company-cover__overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4,15,33,.97) 0%, rgba(7,25,49,.89) 40%, rgba(7,28,56,.38) 70%, rgba(7,28,56,.08) 100%); }
.company-cover__inner { position: relative; z-index: 2; min-height: inherit; display: flex; align-items: center; }
.company-cover__content { width: min(720px, 62%); padding: 58px 0 64px; }
.company-cover__content h1 { margin-bottom: 18px; font-size: clamp(42px, 5vw, 64px); line-height: 1.05; letter-spacing: -.045em; }
.company-cover__content > p { max-width: 670px; margin-bottom: 28px; color: #dce7f9; font-size: 18px; line-height: 1.7; }
.company-cover__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.company-cover__text-link { display: inline-flex; align-items: center; gap: 9px; color: #fff; font-weight: 750; }
.company-cover__text-link span { transition: transform var(--transition); }
.company-cover__text-link:hover span { transform: translateX(4px); }
.breadcrumb--cover { display: flex; align-items: center; gap: 9px; margin-bottom: 27px; color: #b9c9df; font-size: 13px; }
.breadcrumb--cover a:hover { color: #fff; }
.eyebrow--hero { color: #b9d1ff; }

.company-intro__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; gap: 76px; }
.company-intro__lead h2 { margin-bottom: 20px; font-size: clamp(34px, 4.2vw, 52px); line-height: 1.1; letter-spacing: -.04em; }
.company-intro__lead > p { color: var(--muted); font-size: 18px; line-height: 1.72; }
.company-intro__note { position: relative; margin-top: 30px; padding: 24px 26px 24px 30px; overflow: hidden; border-left: 4px solid var(--primary); border-radius: 0 14px 14px 0; background: #f6f9ff; }
.company-intro__note::after { content: ""; position: absolute; width: 130px; height: 130px; right: -54px; bottom: -65px; border: 22px solid rgba(21,94,239,.055); border-radius: 50%; }
.company-intro__note strong { display: block; margin-bottom: 7px; font-size: 17px; }
.company-intro__note p { position: relative; z-index: 2; margin: 0; color: var(--ink-2); font-size: 14px; }
.company-principles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.company-principle { position: relative; min-height: 220px; padding: 28px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-md); background: #fff; transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition); }
.company-principle:hover { transform: translateY(-4px); border-color: #bdd0f5; box-shadow: var(--shadow-sm); }
.company-principle::after { content: ""; position: absolute; width: 120px; height: 120px; right: -52px; bottom: -57px; border-radius: 50%; background: rgba(21,94,239,.05); }
.company-principle__icon { display: grid; width: 48px; height: 48px; margin-bottom: 22px; place-items: center; border-radius: 13px; color: var(--primary); background: var(--primary-soft); }
.company-principle__icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.company-principle h3 { margin-bottom: 10px; font-size: 21px; }
.company-principle p { position: relative; z-index: 2; margin: 0; color: var(--muted); font-size: 14px; }

.company-services { background: #f7f9fc; }
.company-service-list { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; box-shadow: 0 20px 60px rgba(20,45,95,.07); }
.company-service { display: grid; grid-template-columns: 96px minmax(230px, .62fr) minmax(0, 1.38fr) auto; align-items: center; gap: 28px; min-height: 136px; padding: 26px 30px; border-bottom: 1px solid var(--line); transition: background var(--transition); }
.company-service:last-child { border-bottom: 0; }
.company-service:hover { background: #f9fbff; }
.company-service__number { color: #b2c1d6; font-size: 12px; font-weight: 850; letter-spacing: .12em; }
.company-service h3 { margin: 0; font-size: 23px; }
.company-service p { margin: 0; color: var(--muted); }
.company-service .text-link { margin: 0; white-space: nowrap; }

.infrastructure { position: relative; overflow: hidden; color: #fff; background: linear-gradient(145deg, #08182e 0%, #0c315d 63%, #0a6371 125%); }
.infrastructure::before { content: ""; position: absolute; width: 520px; height: 520px; right: -210px; top: -210px; border: 74px solid rgba(255,255,255,.045); border-radius: 50%; }
.infrastructure::after { content: ""; position: absolute; width: 360px; height: 360px; left: -160px; bottom: -210px; border: 48px solid rgba(54,216,193,.055); border-radius: 50%; }
.infrastructure__grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, .94fr) minmax(420px, 1.06fr); align-items: center; gap: 72px; }
.infrastructure__content h2 { margin-bottom: 19px; font-size: clamp(35px, 4.3vw, 52px); line-height: 1.08; letter-spacing: -.04em; }
.infrastructure__content > p { max-width: 650px; color: #cbd9ea; font-size: 17px; line-height: 1.72; }
.infrastructure__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 30px; }
.infrastructure__fact { padding: 18px; border: 1px solid rgba(255,255,255,.13); border-radius: 12px; background: rgba(255,255,255,.06); backdrop-filter: blur(8px); }
.infrastructure__fact strong, .infrastructure__fact span { display: block; }
.infrastructure__fact strong { margin-bottom: 5px; font-size: 17px; }
.infrastructure__fact span { color: #b9cadd; font-size: 12px; }
.infrastructure__visual { position: relative; min-height: 500px; }
.infrastructure-rack { position: absolute; left: 50%; top: 50%; width: min(100%, 490px); min-height: 410px; transform: translate(-50%, -50%); padding: 26px; border: 1px solid rgba(255,255,255,.16); border-radius: 26px; background: rgba(5,18,38,.68); box-shadow: 0 35px 80px rgba(0,0,0,.28); }
.infrastructure-rack__top { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 20px; }
.infrastructure-rack__top span { color: #a9bed6; font-size: 12px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.infrastructure-rack__status { display: inline-flex !important; align-items: center; gap: 7px; color: #8be4d5 !important; letter-spacing: 0 !important; text-transform: none !important; }
.infrastructure-rack__status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #2ed5ba; box-shadow: 0 0 0 5px rgba(46,213,186,.12); }
.server-units { display: grid; gap: 10px; }
.server-unit { display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 13px; min-height: 54px; padding: 0 16px; border: 1px solid rgba(255,255,255,.11); border-radius: 10px; background: rgba(255,255,255,.07); }
.server-unit i { width: 8px; height: 8px; border-radius: 50%; background: #35d9c1; box-shadow: 0 0 0 4px rgba(53,217,193,.1); }
.server-unit strong { font-size: 13px; }
.server-unit span { color: #9fb4cb; font-size: 11px; }
.infrastructure-rack__footer { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 18px; }
.infrastructure-rack__footer div { padding: 13px; border-radius: 10px; background: rgba(255,255,255,.06); }
.infrastructure-rack__footer strong, .infrastructure-rack__footer span { display: block; }
.infrastructure-rack__footer strong { margin-bottom: 4px; color: #fff; font-size: 13px; }
.infrastructure-rack__footer span { color: #a9bed6; font-size: 10px; }
.infrastructure-badge { position: absolute; z-index: 2; min-width: 180px; padding: 15px 17px; border: 1px solid rgba(255,255,255,.17); border-radius: 14px; color: #152640; background: rgba(255,255,255,.97); box-shadow: 0 20px 44px rgba(0,0,0,.25); }
.infrastructure-badge strong, .infrastructure-badge span { display: block; }
.infrastructure-badge strong { margin-bottom: 3px; font-size: 14px; }
.infrastructure-badge span { color: #68798d; font-size: 11px; }
.infrastructure-badge--location { top: 22px; right: -12px; }
.infrastructure-badge--security { left: -22px; bottom: 42px; }

.certification-strip { border-bottom: 1px solid var(--line); background: #fff; }
.certification-strip__inner { display: grid; grid-template-columns: 260px 1fr; align-items: center; gap: 40px; padding-top: 34px; padding-bottom: 34px; }
.certification-strip__intro strong, .certification-strip__intro span { display: block; }
.certification-strip__intro strong { margin-bottom: 5px; font-size: 15px; }
.certification-strip__intro span { color: var(--muted); font-size: 12px; }
.certification-list { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.certification-list span { display: inline-flex; min-height: 36px; align-items: center; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink-2); background: #fbfcfe; font-size: 12px; font-weight: 750; }

.company-responsibility__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.company-responsibility article { position: relative; min-height: 300px; padding: 30px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-md); background: #fff; }
.company-responsibility article::after { content: ""; position: absolute; width: 150px; height: 150px; right: -65px; bottom: -72px; border: 25px solid rgba(21,94,239,.05); border-radius: 50%; }
.company-responsibility__icon { display: grid; width: 52px; height: 52px; margin-bottom: 26px; place-items: center; border-radius: 14px; color: var(--primary); background: var(--primary-soft); }
.company-responsibility__icon svg { width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.company-responsibility h3 { margin-bottom: 12px; font-size: 23px; }
.company-responsibility p { position: relative; z-index: 2; color: var(--muted); }

.company-details { padding: 104px 0; background: #f7f9fc; }
.company-details__layout { display: grid; grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr); align-items: start; gap: 70px; }
.company-details__intro { position: sticky; top: calc(var(--header-height) + 34px); }
.company-details__intro h2 { margin-bottom: 15px; font-size: clamp(33px, 4vw, 47px); line-height: 1.12; letter-spacing: -.038em; }
.company-details__intro p { margin-bottom: 25px; color: var(--muted); font-size: 17px; }
.accordion--company { display: grid; gap: 12px; }
.accordion--company details { overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.accordion--company summary { position: relative; display: flex; min-height: 68px; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 22px; cursor: pointer; font-weight: 780; list-style: none; }
.accordion--company summary::-webkit-details-marker { display: none; }
.accordion--company summary span { position: relative; width: 20px; height: 20px; flex: 0 0 20px; }
.accordion--company summary span::before, .accordion--company summary span::after { content: ""; position: absolute; top: 9px; left: 3px; width: 14px; height: 2px; border-radius: 2px; background: var(--primary); }
.accordion--company summary span::after { transform: rotate(90deg); transition: transform var(--transition); }
.accordion--company details[open] summary span::after { transform: rotate(0); }
.accordion--company details[open] summary { color: var(--primary); background: #f8faff; }
.accordion--company details > div { padding: 0 22px 22px; color: var(--muted); }
.accordion--company details > div p:last-child { margin-bottom: 0; }
.accordion--company ul { display: grid; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.accordion--company li { position: relative; padding-left: 22px; }
.accordion--company li::before { content: ""; position: absolute; left: 0; top: .48em; width: 11px; height: 6px; border-left: 2px solid var(--success); border-bottom: 2px solid var(--success); transform: rotate(-45deg); }
.company-cta { position: relative; overflow: hidden; }
.company-cta::after { content: ""; position: absolute; width: 300px; height: 300px; right: -90px; bottom: -160px; border: 50px solid rgba(255,255,255,.08); border-radius: 50%; }
.company-cta > * { position: relative; z-index: 2; }

@media (max-width: 1040px) {
  .company-intro__grid, .infrastructure__grid, .company-details__layout { grid-template-columns: 1fr; gap: 44px; }
  .infrastructure__visual { min-height: 520px; }
  .company-details__intro { position: static; }
  .company-service { grid-template-columns: 68px minmax(190px, .65fr) minmax(0, 1.35fr); }
  .company-service .text-link { grid-column: 2 / -1; justify-self: start; }
  .certification-strip__inner { grid-template-columns: 1fr; gap: 20px; }
  .certification-list { justify-content: flex-start; }
}

@media (max-width: 760px) {
  .company-cover { min-height: 430px; }
  .company-cover__media { background-position: 61% center; opacity: .64; }
  .company-cover__overlay { background: linear-gradient(90deg, rgba(4,15,33,.98), rgba(7,25,49,.84)); }
  .company-cover__content { width: 100%; padding: 48px 0 55px; }
  .company-cover__content h1 { font-size: 42px; }
  .company-principles, .company-responsibility__grid, .infrastructure__facts { grid-template-columns: 1fr; }
  .company-service { grid-template-columns: 46px 1fr; gap: 14px 18px; padding: 24px; }
  .company-service p, .company-service .text-link { grid-column: 2; }
  .infrastructure__visual { min-height: 490px; }
  .infrastructure-rack { width: calc(100% - 18px); }
  .infrastructure-badge--location { right: 0; }
  .infrastructure-badge--security { left: 0; }
  .infrastructure-rack__footer { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .company-cover__content h1 { font-size: 36px; }
  .company-cover__actions { align-items: stretch; flex-direction: column; }
  .company-cover__actions .button { width: 100%; }
  .company-principles { grid-template-columns: 1fr; }
  .company-principle { min-height: auto; }
  .company-service { grid-template-columns: 1fr; }
  .company-service__number, .company-service p, .company-service .text-link { grid-column: auto; }
  .infrastructure__visual { min-height: 550px; }
  .infrastructure-rack { top: 52%; padding: 20px; }
  .infrastructure-badge { min-width: 160px; }
  .server-unit { grid-template-columns: 18px 1fr; }
  .server-unit span { grid-column: 2; }
}