/* ============================================================================
   BRIT GMBH / PATCH-MANAGEMENT | INDIVIDUELLE LEISTUNGSSEITE

   NUR .pm-page: Keine globalen Navigation- und Footer-Styles verändern.
   BRIT Markengrün #84B413, lokale Fotos, SVG-Icon-Sprite aus HTML.

   01 Seitenbasis
   02 Fotografischer Hero
   03 Redaktioneller Einstieg
   04 Beispielhafte Statusübersicht
   05 Sechsstufiger Rollout-Prozess
   06 Leistungen in asymmetrischer Komposition
   07 Flexible Betreuung
   08 FAQ / Kontakt
   09 Breakpoints und reduzierte Bewegung
   ============================================================================ */

/* 01 / BASISELEMENTE ------------------------------------------------------- */
.pm-page {
  --pm-green: #84B413;
  --pm-lime: #c2e777;
  --pm-forest: #12261d;
  --pm-ink: #162c20;
  --pm-muted: #506357;
  --pm-line: #dce8d5;
  color: var(--pm-ink);
}
.pm-page .pm-section {
  padding: clamp(78px, 8vw, 128px) 0;
  position: relative;
}
.pm-page h1,
.pm-page h2,
.pm-page h3 {
  line-height: 1.09;
  overflow-wrap: break-word;
}
.pm-page h2 {
  font-size: clamp(2.3rem, 4.2vw, 5rem);
  letter-spacing: -.055em;
}
.pm-page p {line-height: 1.79;}
.pm-page .eyebrow {font-size: .68rem;}
.pm-page .icon {height: 22px; width: 22px;}
.pm-page .pm-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0);
  border: 0; white-space: nowrap;
}
.pm-page a:focus-visible,
.pm-page summary:focus-visible {outline: 3px solid #84B413; outline-offset: 4px;}

/* 02 / HERO ---------------------------------------------------------------- */
.pm-page .pm-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #0c211b;
  color: #fff;
}
.pm-page .pm-hero-picture {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: url('../images/editorial/patch-operations-hero.webp');
  background-size: cover;
  background-position: center center;
}
.pm-page .pm-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(5,22,17,.98) 0%, rgba(7,26,20,.93) 32%, rgba(10,27,23,.58) 60%, rgba(9,26,20,.15) 100%),
    linear-gradient(0deg, rgba(7,21,16,.65), transparent 55%);
}
.pm-page .pm-hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0,1.28fr) minmax(280px,.72fr);
  align-items: end;
  gap: 5%;
  min-height: 714px;
  padding-top: 69px;
  padding-bottom: 76px;
}
.pm-page .pm-hero-copy {position: relative; z-index: 1; max-width: 780px;}
.pm-page .pm-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  color: #d0e0ce;
  font-size: .76rem;
  margin-bottom: 61px;
}
.pm-page .pm-breadcrumb a:hover {color: var(--pm-lime);}
.pm-page .pm-eyebrow {
  display: block;
  color: var(--pm-lime);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .14em;
  margin-bottom: 20px;
}
.pm-page .pm-hero h1 {
  font-size: clamp(3.25rem, 5.5vw, 6.7rem);
  letter-spacing: -.069em;
  margin: 0 0 23px;
  max-width: 930px;
}
.pm-page .pm-hero h1 span {color: #b9e36d;}
.pm-page .pm-hero-lead {
  color: #e0eadf;
  font-size: clamp(1.04rem, 1.32vw, 1.24rem);
  max-width: 670px;
  line-height: 1.73;
  margin: 0;
}
.pm-page .pm-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 23px;
  margin-top: 30px;
}
.pm-page .pm-hero-actions .btn {min-height: 57px;}
.pm-page .pm-hero-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid #d4e5c3;
  padding: 12px 0;
  font-size: .91rem;
  font-weight: 780;
}
.pm-page .pm-hero-link .icon {height: 16px; width: 16px;}
.pm-page .pm-hero-link:hover {color: var(--pm-lime);}
.pm-page .pm-hero-benefits {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 25px;
  margin-top: 48px;
  color: #dce9d9;
  font-size: .79rem;
  font-weight: 700;
}
.pm-page .pm-hero-benefits span {display: inline-flex; align-items: center; gap: 8px;}
.pm-page .pm-hero-benefits .icon {color: #b6df7a; width: 18px; height: 18px;}
.pm-page .pm-hero-note {
  width: min(100%,370px);
  margin: 0 0 0 auto;
  border: 1px solid #b8e27a62;
  border-radius: 17px;
  background: rgba(11,31,22,.85);
  padding: 23px 22px;
  box-shadow: 0 30px 65px #0004;
  backdrop-filter: blur(15px);
}
.pm-page .pm-note-header {
  display: flex;
  align-items: center;
  gap: 11px;
  padding-bottom: 19px;
  margin-bottom: 8px;
  border-bottom: 1px solid #fff3;
  color: #c8e9a6;
  font-size: .76rem;
  font-weight: 850;
  letter-spacing: .065em;
}
.pm-page .pm-note-header .icon {width: 24px; height: 24px;}
.pm-page .pm-note-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 0;
  color: #f4faef;
  font-size: .88rem;
  font-weight: 630;
}
.pm-page .pm-note-indicator {height: 7px; width: 7px; border-radius: 50%; background: #9ac937;}
.pm-page .pm-note-item .icon {margin-left: auto; color: #b8e578; width: 16px; height: 16px;}
.pm-page .pm-hero-note small {display: block; color: #acbda8; font-size: .66rem; margin-top: 13px; line-height: 1.5;}

/* 03 / WHY PATCH-MANAGEMENT ---------------------------------------------- */
.pm-page .pm-intro {background: #fff;}
.pm-page .pm-intro-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 9%;
}
.pm-page .pm-intro h2 {margin: 17px 0 28px; max-width: 680px;}
.pm-page .pm-accent-rule {width: 54px; height: 4px; background: var(--pm-green); border-radius: 4px;}
.pm-page .pm-intro-details {padding-top: 30px;}
.pm-page .pm-intro-details p {color: var(--pm-muted); font-size: 1.04rem; margin: 0 0 20px;}
.pm-page .pm-intro-details .pm-intro-lead {font-size: clamp(1.15rem,1.55vw,1.43rem); color: #263a2e; line-height: 1.65;}
.pm-page .pm-intro-tags {display: flex; gap: 10px; flex-wrap: wrap; margin-top: 30px;}
.pm-page .pm-intro-tags span {border: 1px solid #d5e2ce; color: #517531; background: #f4f8ef; padding: 8px 13px; border-radius: 50px; font-size: .74rem; font-weight: 760;}

/* 04 / GRAPHICAL UPDATE STATUS -------------------------------------------- */
.pm-page .pm-console-section {background: #eaf1e5;}
.pm-page .pm-section-heading {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 10%;
  align-items: end;
  margin-bottom: 45px;
}
.pm-page .pm-section-heading h2 {margin: 17px 0 0; max-width: 800px;}
.pm-page .pm-section-heading p {color: #526456; font-size: 1.05rem; margin: 0 0 6px;}
.pm-page .pm-console {
  background: #fdfefb;
  border: 1px solid #d1dec9;
  border-radius: 17px;
  overflow: hidden;
  box-shadow: 0 28px 70px #142e1a21;
}
.pm-page .pm-console-bar {
  background: #142e22;
  color: #edf7e8;
  min-height: 71px;
  padding: 18px 27px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 25px;
}
.pm-page .pm-console-brand {display: flex; align-items: center; gap: 12px; font-size: .8rem; font-weight: 820; letter-spacing: .07em;}
.pm-page .pm-console-brand .icon {color: #aee06b; width: 24px; height: 24px;}
.pm-page .pm-console-brand small {color: #a0b9a3; font-size: .67rem; font-weight: 580; letter-spacing: 0;}
.pm-page .pm-console-legend {display: flex; flex-wrap: wrap; gap: 15px; font-size: .65rem; color: #cbdcca;}
.pm-page .pm-console-legend span {display: flex; align-items: center; gap: 7px;}
.pm-page .pm-legend-dot {display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #b7c9ae;}
.pm-page .pm-dot-open {background: #e3b86a;}
.pm-page .pm-dot-plan {background: #83b31e;}
.pm-page .pm-dot-done {background: #7fcb9d;}
.pm-page .pm-console-body {display: grid; grid-template-columns: 245px minmax(0,1fr); min-height: 395px;}
.pm-page .pm-console-side {background: #edf4e7; padding: 34px 18px; border-right: 1px solid #d7e3d0; display: flex; flex-direction: column; gap: 9px;}
.pm-page .pm-small-label {font-size: .67rem; font-weight: 830; color: #779261; letter-spacing: .11em;}
.pm-page .pm-console-side > .pm-small-label {margin: 0 0 15px 12px;}
.pm-page .pm-console-menu {border-radius: 9px; display: flex; align-items: center; gap: 12px; padding: 12px 13px; color: #475c4b; font-size: .82rem; font-weight: 730;}
.pm-page .pm-console-menu--active {background: #d6e9c4; color: #2a4e22;}
.pm-page .pm-console-menu .icon {width: 18px; height: 18px; color: #699924;}
.pm-page .pm-console-side-foot {margin: auto 12px 0; border-top: 1px solid #c7d7c2; padding-top: 14px; color: #6d826b; font-size: .73rem; line-height: 1.5;}
.pm-page .pm-console-main {padding: 34px 31px; min-width: 0;}
.pm-page .pm-console-intro {display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 28px;}
.pm-page .pm-console-intro h3 {margin: 7px 0 0; font-size: clamp(1.5rem,2vw,2rem); letter-spacing: -.035em;}
.pm-page .pm-demo-label {font-size: .67rem; white-space: nowrap; font-weight: 840; color: #5c8b26; background: #e9f5d7; padding: 8px 12px; border-radius: 4px;}
.pm-page .pm-table-wrap {overflow-x: auto;}
.pm-page .pm-table {border-collapse: collapse; width: 100%; min-width: 575px; text-align: left;}
.pm-page .pm-table th {padding: 15px 13px; text-transform: uppercase; font-size: .65rem; letter-spacing: .09em; color: #72886f; background: #f3f7ef;}
.pm-page .pm-table td {padding: 19px 13px; border-bottom: 1px solid #e6eee0; color: #647565; font-size: .83rem;}
.pm-page .pm-table td:first-child {display: flex; align-items: center; gap: 11px; color: #1f3928;}
.pm-page .pm-table strong {font-size: .88rem;}
.pm-page .pm-system-icon {height: 36px; width: 36px; border: 1px solid #d6e9c5; border-radius: 8px; color: #709f30; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;}
.pm-page .pm-system-icon .icon {height: 19px; width: 19px;}
.pm-page .pm-status {display: inline-block; border-radius: 50px; padding: 7px 11px; font-size: .7rem; font-weight: 780; white-space: nowrap;}
.pm-page .pm-status--open {color: #85621c; background: #fbf0d5;}
.pm-page .pm-status--plan {color: #4c7514; background: #ebf5d6;}
.pm-page .pm-status--done {color: #256c42; background: #def2e6;}
.pm-page .pm-console-bottom {display: flex; align-items: flex-start; gap: 10px; margin-top: 23px;}
.pm-page .pm-console-bottom .icon {color: #73a227; flex-shrink: 0; height: 17px; width: 17px; margin-top: 3px;}
.pm-page .pm-console-bottom p {font-size: .78rem; color: #687b6d; margin: 0; line-height: 1.6;}
.pm-page .pm-console-footnote {background: #eaf3df; color: #607361; font-size: .74rem; padding: 13px 28px; border-top: 1px solid #d2e3c8;}

/* 05 / SIX-STAGE PROCESS --------------------------------------------------- */
.pm-page .pm-process {background: #fff;}
.pm-page .pm-process-heading {display: grid; grid-template-columns: 1.2fr .8fr; gap: 8%; align-items: end; margin-bottom: 45px;}
.pm-page .pm-process-heading h2 {margin: 16px 0 0; max-width: 780px;}
.pm-page .pm-process-heading p {margin: 0 0 6px; color: #536558; font-size: 1.05rem;}
.pm-page .pm-process h2 em {color: #6d9917;}
.pm-page .pm-steps {list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1px; background: #d8e3d0; border: 1px solid #d8e3d0; border-radius: 15px; overflow: hidden;}
.pm-page .pm-steps li {min-height: 245px; background: #f7faf4; padding: 27px 30px; display: flex; flex-direction: column; gap: 15px; transition: background .25s ease;}
.pm-page .pm-steps li:hover {background: #eaf4de;}
.pm-page .pm-step-number {font-size: .66rem; letter-spacing: .13em; color: #739a28; font-weight: 870;}
.pm-page .pm-steps li > .icon {width: 30px; height: 30px; color: #70a126;}
.pm-page .pm-steps h3 {font-size: clamp(1.4rem, 1.8vw, 1.84rem); margin: 0; letter-spacing: -.044em;}
.pm-page .pm-steps p {color: #526458; font-size: .89rem; margin: 0; line-height: 1.65; max-width: 290px;}

/* 06 / ASYMMETRIC SERVICE COMPOSITION -------------------------------------- */
.pm-page .pm-services {background: #152c20; color: #fff;}
.pm-page .pm-section-heading--light .eyebrow {color: #c3e48e;}
.pm-page .pm-section-heading--light p {color: #c1d1c2;}
.pm-page .pm-service-layout {display: grid; grid-template-columns: 1.08fr .92fr; gap: 17px; align-items: stretch;}
.pm-page .pm-service-big {background: linear-gradient(145deg,#31553a,#244632 70%); border: 1px solid #7da65c70; padding: 32px 35px; min-height: 605px; border-radius: 15px; display: flex; flex-direction: column;}
.pm-page .pm-service-top {display: flex; align-items: center; justify-content: space-between; gap: 15px; color: #bfe78b; font-size: .72rem; font-weight: 840; letter-spacing: .12em;}
.pm-page .pm-service-top .icon {height: 32px; width: 32px;}
.pm-page .pm-service-big-copy {margin-top: auto; padding-top: 42px;}
.pm-page .pm-service-big h3 {font-size: clamp(2.3rem,3.3vw,4rem); letter-spacing: -.058em; max-width: 510px; margin: 0 0 23px;}
.pm-page .pm-service-big p {color: #e0ecdf; font-size: 1.05rem; max-width: 580px; margin: 0;}
.pm-page .pm-service-line {display: flex; flex-wrap: wrap; gap: 9px; padding-top: 21px; border-top: 1px solid #ffffff36; margin-top: 39px;}
.pm-page .pm-service-line span {color: #e6f4dd; padding: 7px 10px; border: 1px solid #ffffff2a; border-radius: 50px; font-size: .69rem;}
.pm-page .pm-service-stack {display: grid; gap: 17px;}
.pm-page .pm-service-small {background: #f1f5eb; color: #173223; border-radius: 15px; min-height: 293px; padding: 27px 29px; display: flex; flex-direction: column; align-items: flex-start;}
.pm-page .pm-service-small--accent {background: #d7edb2;}
.pm-page .pm-service-small-num {font-size: .68rem; font-weight: 850; letter-spacing: .12em; color: #5b8d1a;}
.pm-page .pm-service-small > .icon {margin: 22px 0 10px; color: #679b1f; height: 28px; width: 28px;}
.pm-page .pm-service-small h3 {font-size: clamp(1.6rem,2vw,2.15rem); margin: 0 0 11px;}
.pm-page .pm-service-small p {font-size: .91rem; line-height: 1.7; color: #4b604e; margin: 0; max-width: 620px;}

/* 07 / FLEXIBLE SERVICE OPTIONS ------------------------------------------- */
.pm-page .pm-options {background: #f7faf4;}
.pm-page .pm-options-layout {display: grid; grid-template-columns: .85fr 1.15fr; gap: 9%; align-items: start;}
.pm-page .pm-options h2 {margin: 20px 0; max-width: 630px;}
.pm-page .pm-options-intro > p {color: #53665a; max-width: 550px; margin-bottom: 26px; font-size: 1.06rem;}
.pm-page .pm-option-cards {display: grid; gap: 14px;}
.pm-page .pm-option-cards article {display: flex; gap: 21px; background: white; border: 1px solid #dfe8da; border-radius: 12px; padding: 29px 27px; transition: transform .25s ease,border-color .25s ease;}
.pm-page .pm-option-cards article:hover {transform: translateX(5px); border-color: #a6c68a;}
.pm-page .pm-option-icon {width: 50px; height: 50px; border-radius: 10px; background: #edf5e5; color: #6b9a1c; flex: 0 0 50px; display: grid; place-items: center;}
.pm-page .pm-option-icon .icon {height: 25px; width: 25px;}
.pm-page .pm-option-cards h3 {font-size: 1.55rem; margin: 0 0 11px;}
.pm-page .pm-option-cards p {font-size: .94rem; color: #596a5d; margin: 0;}

/* 08 / FAQ & CTA ----------------------------------------------------------- */
.pm-page .pm-faq {background: #fff;}
.pm-page .pm-faq-layout {display: grid; grid-template-columns: .8fr 1.2fr; align-items: start; gap: 9%;}
.pm-page .pm-faq h2 {margin: 20px 0 22px;}
.pm-page .pm-faq h2 em {color: #6f9a17;}
.pm-page .pm-faq-layout > div > p {color: #57685c; font-size: 1.05rem; max-width: 530px;}
.pm-page .pm-faq-items {border-top: 1px solid #dce7d6;}
.pm-page .pm-faq-items details {border-bottom: 1px solid #dce7d6;}
.pm-page .pm-faq-items summary {display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 0; cursor: pointer; color: #1d3526; font-size: 1.07rem; font-weight: 800; line-height: 1.42; list-style: none;}
.pm-page .pm-faq-items summary::-webkit-details-marker {display: none;}
.pm-page .pm-faq-items summary .icon {width: 20px; height: 20px; flex: 0 0 auto; color: #77a22a; transition: transform .2s ease;}
.pm-page .pm-faq-items details[open] summary .icon {transform: rotate(180deg);}
.pm-page .pm-faq-items details p {color: #536459; margin: -4px 35px 25px 0; line-height: 1.75;}
.pm-page .pm-cta {background: #172d20; color: #fff; overflow: hidden;}
.pm-page .pm-cta::after {content: ''; position: absolute; width: 390px; height: 390px; right: -170px; top: -125px; border-radius: 50%; border: 1px solid #bde37f50; box-shadow: 0 0 0 85px #84b4130e,0 0 0 170px #84b41309; pointer-events: none;}
.pm-page .pm-cta-layout {display: flex; align-items: center; justify-content: space-between; gap: 10%; position: relative; z-index: 1;}
.pm-page .pm-cta h2 {margin: 17px 0 21px; max-width: 860px;}
.pm-page .pm-cta h2 em {color: #bde77a;}
.pm-page .pm-cta p {color: #c4d6c5; margin: 0; max-width: 690px; font-size: 1.05rem;}
.pm-page .pm-cta .btn {flex-shrink: 0; min-height: 57px;}

/* 09 / RESPONSIVE ---------------------------------------------------------- */
@media (max-width: 1200px) {
  .pm-page .pm-hero-grid {grid-template-columns: minmax(0,1fr) minmax(245px,.5fr);}
  .pm-page .pm-hero h1 {font-size: clamp(3.2rem,5.8vw,5.8rem);}
  .pm-page .pm-console-body {grid-template-columns: 210px minmax(0,1fr);}
}
@media (max-width: 990px) {
  .pm-page .pm-hero-grid {grid-template-columns: 1fr; padding-top: 57px; padding-bottom: 65px; min-height: 670px;}
  .pm-page .pm-hero-copy {max-width: 780px;}
  .pm-page .pm-breadcrumb {margin-bottom: 50px;}
  .pm-page .pm-hero-note {display: none;}
  .pm-page .pm-intro-layout,
  .pm-page .pm-section-heading,
  .pm-page .pm-process-heading,
  .pm-page .pm-options-layout,
  .pm-page .pm-faq-layout {grid-template-columns: 1fr; gap: 24px;}
  .pm-page .pm-intro-details {padding-top: 0;}
  .pm-page .pm-console-body {grid-template-columns: 1fr;}
  .pm-page .pm-console-side {display: none;}
  .pm-page .pm-service-layout {grid-template-columns: 1fr;}
  .pm-page .pm-service-big {min-height: 440px;}
  .pm-page .pm-service-stack {grid-template-columns: 1fr 1fr;}
  .pm-page .pm-options-layout {gap: 39px;}
  .pm-page .pm-cta-layout {flex-direction: column; align-items: flex-start; gap: 29px;}
}
@media (max-width: 720px) {
  .pm-page .pm-section {padding: 74px 0;}
  .pm-page .pm-hero-grid {padding-top: 39px; padding-bottom: 56px; min-height: 610px;}
  .pm-page .pm-hero-picture {background-position: 61% center;}
  .pm-page .pm-hero::after {background: linear-gradient(90deg, rgba(7,23,17,.96),rgba(10,28,20,.84)), linear-gradient(0deg,#0b231a80,transparent);}
  .pm-page .pm-hero h1 {font-size: clamp(3.05rem, 10.6vw, 4.8rem);}
  .pm-page .pm-breadcrumb {margin-bottom: 43px;}
  .pm-page .pm-hero-actions {gap: 12px; align-items: flex-start;}
  .pm-page .pm-hero-benefits {margin-top: 30px;}
  .pm-page .pm-console-bar {padding: 17px 18px;}
  .pm-page .pm-console-legend {display: none;}
  .pm-page .pm-console-main {padding: 23px 18px;}
  .pm-page .pm-console-intro {flex-direction: column; align-items: flex-start; gap: 11px;}
  .pm-page .pm-console-footnote {padding: 14px 18px;}
  .pm-page .pm-steps {grid-template-columns: repeat(2,minmax(0,1fr));}
  .pm-page .pm-steps li {min-height: 255px; padding: 22px 19px;}
  .pm-page .pm-service-stack {grid-template-columns: 1fr;}
  .pm-page .pm-service-big {min-height: 450px; padding: 27px 23px;}
  .pm-page .pm-service-small {min-height: 245px; padding: 25px 23px;}
  .pm-page .pm-option-cards article {padding: 23px 20px; gap: 17px;}
  .pm-page .pm-cta .btn {width: 100%; max-width: 420px;}
}
@media (max-width: 440px) {
  .pm-page .pm-hero h1 {font-size: clamp(2.75rem, 11vw, 3.7rem);}
  .pm-page .pm-hero-actions .btn {width: 100%;}
  .pm-page .pm-hero-benefits {flex-direction: column;}
  .pm-page .pm-steps {grid-template-columns: 1fr;}
  .pm-page .pm-steps li {min-height: 215px;}
  .pm-page .pm-option-cards article {flex-direction: column;}
  .pm-page .pm-service-big h3 {font-size: 2.4rem;}
}
@media (prefers-reduced-motion: reduce) {
  .pm-page *, .pm-page *::before, .pm-page *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}