/* ============================================================================
   BRIT GMBH / BACKUP & DATENSICHERUNG – EIGENSTÄNDIGE DETAILSEITE

   Scope: ausschließlich .bu-page. Header, Navigation und Footer bleiben zentral.
   BRIT-Originalgrün #84B413, ausschließlich lokale Bilder und SVG-Icons.

   01 Grundtypografie und Seitenabstände
   02 Vollflächiger Bild-Hero mit Handlungsziel
   03 Redaktionelle Problemstellung
   04 Recovery-Flow / erklärende HTML-Darstellung
   05 Asymmetrische Leistungsübersicht
   06 Praxisrisiken / Fotografie
   07 RPO / RTO – Orientierung statt Leistungsversprechen
   08 FAQ und Kontakt
   09 Responsive / reduzierte Bewegung
   ============================================================================ */

/* 01 | TYPOGRAFIE ----------------------------------------------------------- */
.bu-page{
  --bu-ink:#13271d;
  --bu-forest:#12251d;
  --bu-paper:#f4f7f1;
  --bu-lime:#84B413;
  --bu-line:#dce8d8;
  color:var(--bu-ink);
  isolation:isolate;
}
.bu-page .bu-section{padding:clamp(80px,8vw,132px) 0;position:relative;}
.bu-page .bu-section h2{
  font-size:clamp(2.45rem,4.25vw,5rem);
  line-height:1.1;
  letter-spacing:-.057em;
  overflow-wrap:break-word;
}
.bu-page .bu-section h2 em{color:#6f9718;}
.bu-page .eyebrow{font-size:.67rem;}
.bu-page p{line-height:1.82;}
.bu-page a:focus-visible,
.bu-page summary:focus-visible{outline:3px solid var(--bu-lime);outline-offset:4px;}

/* 02 | HERO ----------------------------------------------------------------- */
.bu-page .bu-hero{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  color:#fff;
  background:#0e221b;
}
.bu-page .bu-hero-image{
  position:absolute;z-index:-2;inset:0;
  background-image:url('../images/editorial/backup-recovery-hero.webp');
  background-size:cover;
  background-position:56% center;
}
.bu-page .bu-hero:after{
  content:'';position:absolute;z-index:-1;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(7,23,17,.98) 0%,rgba(7,23,17,.92) 34%,rgba(7,23,17,.57) 62%,rgba(7,23,17,.14) 100%),
    linear-gradient(0deg,rgba(6,21,15,.4),transparent 50%);
}
.bu-page .bu-hero-layout{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.53fr);
  align-items:end;
  gap:5%;
  min-height:690px;
  padding-top:70px;
  padding-bottom:76px;
}
.bu-page .bu-hero-content{max-width:770px;}
.bu-page .bu-breadcrumb{
  display:flex;align-items:center;flex-wrap:wrap;gap:12px;
  font-size:.76rem;color:#cbdfce;margin-bottom:72px;
}
.bu-page .bu-breadcrumb a:hover{color:#c3ef82;}
.bu-page .bu-kicker{
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:800;color:#b5e277;margin:0 0 22px;
}
.bu-page .bu-hero h1{
  font-size:clamp(3.4rem,5.6vw,7rem);
  line-height:1.04;
  letter-spacing:-.069em;
  margin:0 0 28px;
}
.bu-page .bu-hero h1 span{color:#b6e468;}
.bu-page .bu-hero-lead{
  color:#deebdf;line-height:1.77;
  max-width:625px;font-size:clamp(1.03rem,1.25vw,1.22rem);margin:0;
}
.bu-page .bu-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:30px;}
.bu-page .bu-actions .btn{min-height:56px;}
.bu-page .bu-secondary-link{
  display:inline-flex;align-items:center;gap:10px;
  font-size:.9rem;font-weight:760;color:#f0f7e8;
  border-bottom:1px solid #d1e4bf;padding:12px 0;
}
.bu-page .bu-secondary-link .icon{width:17px;height:17px;}
.bu-page .bu-secondary-link:hover{color:#b8df75;}
.bu-page .bu-proofline{
  margin-top:50px;
  display:flex;flex-wrap:wrap;gap:10px 20px;
  color:#d5e4cd;font-size:.73rem;font-weight:670;
}
.bu-page .bu-proofline span:before{
  content:'';display:inline-block;width:6px;height:6px;border-radius:50%;
  background:#a5d64f;vertical-align:middle;margin-right:9px;
}
.bu-page .bu-hero-note{
  background:rgba(15,40,27,.89);border:1px solid #a2c76b70;
  padding:25px 27px;border-radius:13px;
  display:flex;align-items:flex-start;gap:17px;
  max-width:360px;margin:0 0 30px auto;
  backdrop-filter:blur(9px);
}
.bu-page .bu-hero-note>.icon{width:28px;height:28px;color:#b7e67e;}
.bu-page .bu-hero-note small{display:block;font-size:.67rem;text-transform:uppercase;letter-spacing:.1em;color:#c1deac;margin-bottom:8px;}
.bu-page .bu-hero-note strong{font-size:1.13rem;line-height:1.35;letter-spacing:-.024em;display:block;}

/* 03 | EDITORIAL OPENING ---------------------------------------------------- */
.bu-page .bu-opening{background:#fff;}
.bu-page .bu-opening-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:10%;align-items:start;}
.bu-page .bu-opening h2{margin:20px 0 0;max-width:680px;}
.bu-page .bu-opening-copy{border-top:2px solid var(--bu-lime);padding-top:26px;}
.bu-page .bu-opening-copy>p{font-size:clamp(1.05rem,1.25vw,1.22rem);color:#4a6051;line-height:1.87;margin:0 0 18px;}
.bu-page .bu-essentials{display:grid;gap:0;margin-top:35px;border-top:1px solid var(--bu-line);}
.bu-page .bu-essentials>div{display:grid;grid-template-columns:150px 1fr;gap:20px;padding:16px 0;border-bottom:1px solid var(--bu-line);align-items:baseline;}
.bu-page .bu-essentials strong{font-size:.96rem;letter-spacing:-.02em;}
.bu-page .bu-essentials span{color:#596a5c;font-size:.87rem;line-height:1.5;}

/* 04 | RECOVERY-FLOW -------------------------------------------------------- */
.bu-page .bu-recovery{background:#edf3e6;}
.bu-page .bu-section-intro{max-width:920px;margin-bottom:47px;}
.bu-page .bu-section-intro h2{margin:16px 0 20px;}
.bu-page .bu-section-intro>p:last-child{font-size:1.08rem;max-width:680px;margin-bottom:0;color:#566a58;}
.bu-page .bu-restore-frame{background:#13291e;color:white;border-radius:15px;overflow:hidden;box-shadow:0 30px 65px #15331b24;}
.bu-page .bu-restore-top{
  min-height:62px;border-bottom:1px solid #ffffff2a;padding:16px 26px;
  display:flex;gap:18px;justify-content:space-between;align-items:center;
  font-size:.67rem;letter-spacing:.11em;font-weight:800;color:#b5db93;
}
.bu-page .bu-restore-caption{letter-spacing:.01em;font-weight:570;color:#bfccbd;}
.bu-page .bu-restore-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:42px 34px 38px;gap:12px;}
.bu-page .bu-restore-step{position:relative;padding:25px 22px 24px;background:#ffffff0c;border:1px solid #ffffff1a;border-radius:11px;min-height:245px;}
.bu-page .bu-restore-step:not(:last-child):after{
  content:'';position:absolute;z-index:2;top:65px;right:-21px;width:26px;height:2px;background:#9dce49;
}
.bu-page .bu-restore-count{display:block;color:#b0d980;font-size:.69rem;letter-spacing:.11em;font-weight:800;margin-bottom:16px;}
.bu-page .bu-restore-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:10px;background:#a9cf5c22;color:#bde785;}
.bu-page .bu-restore-icon .icon{width:24px;height:24px;}
.bu-page .bu-restore-step h3{margin:21px 0 9px;font-size:1.33rem;letter-spacing:-.035em;}
.bu-page .bu-restore-step p{color:#c5d7c7;font-size:.85rem;line-height:1.67;margin:0;}
.bu-page .bu-restore-bottom{border-top:1px solid #ffffff1c;padding:19px 28px;display:flex;align-items:center;gap:11px;background:#ffffff08;}
.bu-page .bu-restore-bottom .icon{color:#b7e474;width:19px;height:19px;}
.bu-page .bu-restore-bottom p{color:#d7e6d3;margin:0;font-size:.84rem;line-height:1.5;max-width:none;}

/* 05 | LEISTUNGS-BENTO ------------------------------------------------------ */
.bu-page .bu-pillars{background:#f8faf5;}
.bu-page .bu-section-intro--split{display:grid;grid-template-columns:1.2fr .8fr;gap:10%;align-items:end;max-width:none;}
.bu-page .bu-section-intro--split>p{font-size:1.03rem;color:#56665b;}
.bu-page .bu-bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px;}
.bu-page .bu-tile{
  grid-column:span 4;min-height:270px;padding:28px 27px 30px;
  background:#fff;border:1px solid #dce8da;border-radius:12px;
  display:flex;flex-direction:column;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.bu-page .bu-tile:hover{transform:translateY(-3px);border-color:#a7c684;box-shadow:0 15px 35px #142b1d13;}
.bu-page .bu-tile--main{grid-column:span 7;grid-row:span 2;min-height:562px;background:#152d21;color:#fff;border-color:#152d21;}
.bu-page .bu-tile--soft{grid-column:span 5;background:#e4efd5;}
.bu-page .bu-tile--soft,.bu-page .bu-tile--main + .bu-tile + .bu-tile{grid-column:span 5;}
.bu-page .bu-tile--accent{grid-column:span 8;background:#dbecc0;}
.bu-page .bu-tile-header{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:auto;}
.bu-page .bu-tile-header span{font-size:.66rem;letter-spacing:.11em;text-transform:uppercase;font-weight:850;color:#709727;}
.bu-page .bu-tile-header .icon{width:27px;height:27px;color:#80ab28;}
.bu-page .bu-tile--main .bu-tile-header span,.bu-page .bu-tile--main .bu-tile-header .icon{color:#b9df80;}
.bu-page .bu-tile h3{font-size:clamp(1.48rem,1.8vw,2.2rem);margin:35px 0 13px;max-width:600px;letter-spacing:-.046em;}
.bu-page .bu-tile--main h3{font-size:clamp(2.4rem,3.4vw,4.2rem);line-height:1.09;}
.bu-page .bu-tile p{font-size:.94rem;line-height:1.72;color:#526555;margin:0;max-width:550px;}
.bu-page .bu-tile--main p{color:#d0e0d0;font-size:1.04rem;}
.bu-page .bu-tile--main ul{list-style:none;margin:34px 0 0;padding:22px 0 0;border-top:1px solid #ffffff3d;display:grid;gap:13px;}
.bu-page .bu-tile--main li{font-size:.93rem;color:#e1f0df;display:flex;align-items:center;gap:11px;}
.bu-page .bu-tile--main li:before{content:'';width:7px;height:7px;background:#a9cf56;border-radius:50%;flex:0 0 7px;}

/* 06 | RISKS ---------------------------------------------------------------- */
.bu-page .bu-risks{background:#fff;}
.bu-page .bu-risk-layout{display:grid;grid-template-columns:minmax(0,.96fr) minmax(0,1.04fr);gap:7%;align-items:center;}
.bu-page .bu-risk-photo{min-height:535px;height:40vw;max-height:620px;border-radius:12px 130px 12px 12px;overflow:hidden;position:relative;background:#193025;}
.bu-page .bu-risk-photo img{height:100%;width:100%;object-fit:cover;object-position:center;transition:transform .75s ease;}
.bu-page .bu-risk-photo:hover img{transform:scale(1.04);}
.bu-page .bu-risk-photo:after{content:'';position:absolute;inset:45% 0 0;background:linear-gradient(transparent,#0c2419b8);pointer-events:none;}
.bu-page .bu-risk-photo>span{position:absolute;bottom:22px;left:24px;z-index:2;font-size:.64rem;letter-spacing:.15em;font-weight:800;color:#fff;}
.bu-page .bu-risk-content h2{margin:19px 0 30px;}
.bu-page .bu-risk-list{display:grid;border-top:1px solid #dce6d9;}
.bu-page .bu-risk-list>div{display:grid;grid-template-columns:35px 1fr;gap:17px;border-bottom:1px solid #dce6d9;padding:22px 0;}
.bu-page .bu-risk-list>.icon,.bu-page .bu-risk-list>div>.icon{width:24px;height:24px;color:#709d19;}
.bu-page .bu-risk-list p{display:grid;gap:4px;margin:0;}
.bu-page .bu-risk-list strong{color:#1d3323;font-size:1.03rem;line-height:1.3;}
.bu-page .bu-risk-list span{color:#536455;font-size:.9rem;line-height:1.6;}
.bu-page .bu-risk-outro{margin:25px 0 0;font-size:1.02rem;color:#495d4e;}

/* 07 | RECOVERY OBJECTIVES -------------------------------------------------- */
.bu-page .bu-decisions{background:#eaf2df;}
.bu-page .bu-decisions-layout{display:grid;grid-template-columns:1fr 1fr;gap:10%;align-items:center;}
.bu-page .bu-decisions h2{margin:22px 0 25px;}
.bu-page .bu-decisions-lead{font-size:1.06rem;color:#536753;max-width:590px;}
.bu-page .bu-inline-link{display:inline-flex;gap:11px;align-items:center;margin-top:18px;color:#537d12;font-weight:770;border-bottom:1px solid #779e55;padding-bottom:8px;}
.bu-page .bu-inline-link:hover{color:#324f08;}
.bu-page .bu-inline-link .icon{width:18px;height:18px;}
.bu-page .bu-objectives{display:grid;grid-template-columns:1fr 1fr;gap:13px;}
.bu-page .bu-objectives article{background:#fff;border:1px solid #d8e7d2;padding:32px 26px;border-radius:13px;min-height:315px;}
.bu-page .bu-code{font-size:.73rem;font-weight:870;letter-spacing:.16em;color:#6c9817;background:#ecf5df;border-radius:6px;padding:8px 10px;display:inline-block;}
.bu-page .bu-objectives h3{font-size:1.45rem;line-height:1.25;letter-spacing:-.045em;margin:31px 0 12px;}
.bu-page .bu-objectives p{color:#526457;font-size:.91rem;line-height:1.72;margin:0;}
.bu-page .bu-objectives .bu-objective-note{grid-column:1/-1;color:#597158;font-size:.78rem;}

/* 08 | FAQ & CTA ----------------------------------------------------------- */
.bu-page .bu-faq{background:#f8faf6;}
.bu-page .bu-faq-layout{display:grid;grid-template-columns:.78fr 1.22fr;gap:10%;}
.bu-page .bu-faq h2{margin:18px 0;}
.bu-page .bu-faq-layout>div>p:last-child{font-size:1.07rem;color:#526658;}
.bu-page .bu-faq-items{border-top:1px solid #d8e5d4;}
.bu-page .bu-faq-items details{border-bottom:1px solid #d8e5d4;}
.bu-page .bu-faq-items summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:26px 3px;cursor:pointer;font-size:1.02rem;font-weight:780;line-height:1.5;}
.bu-page .bu-faq-items summary::-webkit-details-marker{display:none;}
.bu-page .bu-faq-items summary .icon{width:18px;height:18px;color:#6d9916;transition:transform .2s;}
.bu-page .bu-faq-items details[open] summary .icon{transform:rotate(180deg);}
.bu-page .bu-faq-items details>p{color:#506354;margin:-1px 25px 22px 3px;font-size:.94rem;line-height:1.8;}
.bu-page .bu-cta{background:#142b1e;color:#fff;}
.bu-page .bu-cta-layout{display:flex;align-items:center;justify-content:space-between;gap:75px;}
.bu-page .bu-cta-layout>div{max-width:880px;}
.bu-page .bu-cta h2{margin:20px 0;}
.bu-page .bu-cta p{color:#d3e5d0;max-width:720px;}
.bu-page .bu-cta .eyebrow{color:#b4e36b;}
.bu-page .bu-cta .btn{flex:0 0 auto;}

/* 09 | RESPONSIVE ----------------------------------------------------------- */
@media(max-width:1200px){
  .bu-page .bu-hero-layout{grid-template-columns:1fr .35fr;}
  .bu-page .bu-hero-note{max-width:290px;}
  .bu-page .bu-risk-layout{gap:5%;}
  .bu-page .bu-objectives{grid-template-columns:1fr;}
  .bu-page .bu-objectives article{min-height:0;}
}
@media(max-width:980px){
  .bu-page .bu-hero-layout{grid-template-columns:1fr;min-height:600px;}
  .bu-page .bu-hero-content{max-width:740px;}
  .bu-page .bu-hero-note{display:none;}
  .bu-page .bu-opening-grid,.bu-page .bu-risk-layout,.bu-page .bu-decisions-layout,.bu-page .bu-faq-layout{grid-template-columns:1fr;gap:37px;}
  .bu-page .bu-restore-steps{grid-template-columns:repeat(2,minmax(0,1fr));}
  .bu-page .bu-restore-step:nth-child(2):after{display:none;}
  .bu-page .bu-section-intro--split{grid-template-columns:1fr;gap:12px;}
  .bu-page .bu-bento{grid-template-columns:repeat(2,minmax(0,1fr));}
  .bu-page .bu-tile,.bu-page .bu-tile--main,.bu-page .bu-tile--soft,.bu-page .bu-tile--soft + .bu-tile,.bu-page .bu-tile--accent{grid-column:span 1;grid-row:auto;min-height:295px;}
  .bu-page .bu-tile--main{grid-column:span 2;min-height:420px;}
  .bu-page .bu-risk-photo{height:430px;min-height:380px;max-height:none;}
  .bu-page .bu-objectives{grid-template-columns:repeat(2,minmax(0,1fr));}
  .bu-page .bu-cta-layout{align-items:start;flex-direction:column;gap:22px;}
}
@media(max-width:680px){
  .bu-page .bu-section{padding:72px 0;}
  .bu-page .bu-hero-layout{padding-top:42px;padding-bottom:56px;min-height:620px;}
  .bu-page .bu-breadcrumb{margin-bottom:52px;gap:8px;}
  .bu-page .bu-hero h1{font-size:clamp(3.1rem,11.2vw,4.8rem);}
  .bu-page .bu-hero:after{background:linear-gradient(90deg,#0c211bf2,#0e241fbd),linear-gradient(0deg,#0d261d8c,transparent);}
  .bu-page .bu-hero-image{background-position:67% center;}
  .bu-page .bu-proofline{margin-top:34px;}
  .bu-page .bu-essentials>div{grid-template-columns:1fr;gap:3px;}
  .bu-page .bu-restore-top{flex-direction:column;align-items:start;gap:4px;}
  .bu-page .bu-restore-steps{grid-template-columns:1fr;padding:15px;}
  .bu-page .bu-restore-step{min-height:0;padding:20px 20px 24px;}
  .bu-page .bu-restore-step:after{display:none;}
  .bu-page .bu-restore-bottom{align-items:flex-start;}
  .bu-page .bu-bento{grid-template-columns:1fr;}
  .bu-page .bu-tile,.bu-page .bu-tile--main,.bu-page .bu-tile--soft,.bu-page .bu-tile--soft + .bu-tile,.bu-page .bu-tile--accent{grid-column:span 1;min-height:250px;}
  .bu-page .bu-tile--main{min-height:430px;}
  .bu-page .bu-tile{padding:26px 22px;}
  .bu-page .bu-risk-photo{height:310px;min-height:0;border-radius:10px 88px 10px 10px;}
  .bu-page .bu-objectives{grid-template-columns:1fr;}
  .bu-page .bu-cta .btn{max-width:100%;}
  .bu-page .bu-faq-items summary{padding:20px 0;}
}
@media(prefers-reduced-motion:reduce){
  .bu-page *, .bu-page *:before,.bu-page *:after{scroll-behavior:auto!important;transition:none!important;animation:none!important;}
}
/* Die dritte Bento-Kachel hat im Desktop ein explizites Fünf-Spalten-Span.
   Auf kleinen Ansichten muss dieses ebenso wie die übrigen Spans überschrieben
   werden, um implizite Grid-Spalten und horizontales Scrollen zu vermeiden. */
@media (max-width:980px){
  .bu-page .bu-tile--main + .bu-tile + .bu-tile{grid-column:span 1;}
}
.bu-page .bu-tile{min-width:0;}
.bu-page .bu-tile h3{overflow-wrap:anywhere;}
@media (max-width:680px){.bu-page .bu-bento{grid-template-columns:minmax(0,1fr);}}