:root{
  --bg: #ffffff;
  --bg-soft: #f6f7fb;

  --panel: #f1f3f5;      
  --panel2: #ffffff;     

  --text: #0f172a;
  --muted: rgba(15,23,42,0.70);
  --line: rgba(15,23,42,0.12);

  --shadow: 0 14px 40px rgba(2,6,23,0.08);
  --radius: 18px;
  --max: 1120px;

  --pad: 18px;
  --pad-lg: 26px;

  --accent: #cf1f2e;
  --accent-soft: rgba(207,31,46,0.10);
  --accent-soft2: rgba(207,31,46,0.06);

  --focus: rgba(207,31,46,0.35);
}


*{ box-sizing:border-box; }

/* Prevent layout shift between pages with/without a vertical scrollbar */
html,body{ height:100%; }
html{ scrollbar-gutter: stable; }
@supports not (scrollbar-gutter: stable){
  html{ overflow-y: scroll; }
}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
    background:
    radial-gradient(900px 600px at 15% -10%, rgba(207,31,46,0.08), transparent 55%),
    radial-gradient(900px 600px at 95% 10%, rgba(207,31,46,0.05), transparent 55%),
    var(--bg-soft);
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Keep the footer at the bottom on short pages */
.page-detail main{
  flex: 1 0 auto;
}

a{ color:inherit; }
a:hover{ text-decoration: underline; }

/* CARDS */
.card{
  border: 2px solid var(--line);
  background: var(--panel);
  border-radius: var(--radius);
  padding: var(--pad-lg);
  box-shadow: var(--shadow);
}
.card--flat{
  box-shadow: none;
  background: var(--panel2);
}

.card--stack{
  display: grid;
  grid-template-rows: auto auto 1fr auto; /* Platz dazwischen */
}

.card--stack .btn{
  justify-self: start; /* links */
}

.card h2, .card h3{ margin: 0 0 10px; }
.card p{ margin: 0; }

.icon{
  width: 42px; height: 42px;
  display:grid; place-items:center;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(15,23,42,0.04);
  font-weight: 800;
  margin-bottom: 10px;
}

.cardLink{
  display: block;
  color: inherit;
  text-decoration: none;
  height: 100%;
}
.cardLink:hover{ text-decoration: none; }

.serviceBlock:target{
  box-shadow: none !important;
  animation: targetRing 1.2s ease-out;
}

.contactCard{
  display: grid;
  grid-template-columns: 1.4fr 0.6fr;
  gap: 18px;
  padding: 22px;
  border: 1px solid rgba(15,23,42,0.14);
  border-radius: 18px;
  background: rgba(255,255,255,0.75);
  box-shadow: 0 18px 45px rgba(2,6,23,0.08);
}

.contactList{
  margin-top: 16px;
  display: grid;
  gap: 10px;
}

.contactItem{
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,0.12);
  background: rgba(246,247,251,0.85);
  text-decoration: none;
  color: inherit;
}

.contactItem:hover{
  border-color: rgba(15,23,42,0.22);
}

.contactItem__label{
  font-weight: 600;
}

.contactItem__value{
  font-weight: 600;
}

.contactHint{
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(15,23,42,0.12);
  display: grid;
  gap: 4px;
}

.contactCard__right{
  display: grid;
  gap: 12px;
  align-content: start;
}

.contactMini{
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,0.12);
  background: rgba(246,247,251,0.85);
}

.contactCTA{
  width: 100%;
  justify-content: center;
  margin-top: 6px;
}

/* Mobile */
@media (max-width: 900px){
  .contactCard{
    grid-template-columns: 1fr;
  }
  .contactItem{
    grid-template-columns: 1fr;
  }
}


@keyframes targetRing{
  0%   { box-shadow: 0 0 0 4px rgba(37,99,235,0.25); }
  100% { box-shadow: 0 0 0 0 rgba(37, 100, 235, 0.349); }
}

/* GRID */
.grid{ display:grid; gap: 14px; }
.grid--3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }


/* FOOTER */
.footer{
  border-top: 1px solid var(--line);
  padding: 26px 0;
  color: var(--muted);
}
.footer__inner{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
}
.footer__links{
  display:flex;
  gap: 12px;
}
.footer__links a{
  text-decoration:none;
  padding: 8px 10px;
  border-radius: 12px;
}
.footer__links a:hover{
  text-decoration:none;
  background: var(--panel2);
  border: 1px solid var(--line);
}

/* RESPONSIVE */
@media (max-width: 980px){
  .hero__grid{ grid-template-columns: 1fr; }
  .hero__trust{ grid-template-columns: 1fr; }
  .grid--3{ grid-template-columns: 1fr; }
  .grid--2{ grid-template-columns: 1fr; }
  .refGrid{ grid-template-columns: 1fr 1fr; }
  .contactGrid{ grid-template-columns: 1fr; }
}

@media (max-width: 780px){
  .navBtn{ display:block; }

  .nav{
    position: absolute;
    left: 0;
    right: 0;
    top: 70px;
    display:none;
    flex-direction: column;
    gap: 6px;
    padding: 12px;
    background: rgba(255,255,255,0.94);
    border-bottom: 1px solid var(--line);
  }
  .nav.isOpen{ display:flex; }
  .nav a{ width: 100%; }

  .form__row{ grid-template-columns: 1fr; }
  .refGrid{ grid-template-columns: 1fr; }
}

@media (min-width: 1200px){
  .section{ padding: 72px 0; }
  .grid{ gap: 18px; }
  .card{ padding: 32px; }
}

/* WIDE DESKTOP (z.B. 2560x1440) */
@media (min-width: 1440px){
  :root{
    --max: 1240px;      /* mehr Breite, aber nicht Kino-Textzeilen */
    --pad: 20px;
    --pad-lg: 30px;
  }

  .hero{ padding: 72px 0 42px; }
  .section{ padding: 64px 0; }

  .hero__grid{ gap: 22px; }
  .grid{ gap: 16px; }

  .hero h1{
    font-size: clamp(2.6rem, 2.8vw, 3.4rem);
  }

  .lead{
    font-size: 1.12rem;
    max-width: 68ch;   /* verhindert “Romanzeile über 2km” */
  }
}

/* ULTRA-WIDE (optional, falls 3440x1440 usw.) */
@media (min-width: 1920px){
  :root{
    --max: 1320px;
  }
}

/* =========================================================
   DETAIL TEMPLATE (Light) – nur für Seiten mit .page-detail
   ========================================================= */

.page-detail{
  --bg: #ffffff;
  --text: #0f172a;
  --muted: rgba(15, 23, 42, 0.70);
  --line: rgba(44, 51, 66, 0.12);

  /* Karten: grau */
  --panel: #edf0f2;
  --panel2: #ffffff;

  --shadow: 0 14px 40px rgba(2, 6, 23, 0.08);
  --radius: 18px;
  --max: 1120px;

  /* Rot als Akzent */
  --accent: #cf1f2e;
  --focus: rgba(207, 31, 46, 0.35);

  color: var(--text);

  position: relative;
  isolation: isolate;
  overflow-x: hidden;

    background:
    repeating-linear-gradient(
      135deg,
      rgba(15,23,42,0.018) 0px,
      rgba(15,23,42,0.018) 160px,
      rgba(15,23,42,0.00) 160px,
      rgba(15,23,42,0.00) 320px
    ),
    linear-gradient(180deg, #ffffff 0%, #f6f7fb 100%);

  --deco-opacity: 0.28;   /* Regler: 0.18 = sehr dezent, 0.35 = sichtbarer */
  --dots-opacity: 0.22;
  --deco-fade: 140px;  
}

.page-detail::before{
  content:"";
  position:fixed;
  inset:160px;
  pointer-events:none;
  z-index:0;

  background:
    /* top-left blocks */
    linear-gradient(135deg,
      transparent 0%, transparent 46%,
      rgba(207,31,46,0.95) 46%, rgba(207,31,46,0.95) 54%,
      transparent 54%, transparent 100%
    ) 0 0 / 520px 320px no-repeat,

    linear-gradient(135deg,
      transparent 0%, transparent 62%,
      rgba(207,31,46,0.95) 62%, rgba(207,31,46,0.95) 70%,
      transparent 70%, transparent 100%
    ) 40px -10px / 520px 320px no-repeat,

    /* bottom-right blocks */
    linear-gradient(315deg,
      transparent 0%, transparent 46%,
      rgba(207,31,46,0.95) 46%, rgba(207,31,46,0.95) 54%,
      transparent 54%, transparent 100%
    ) 100% 100% / 520px 320px no-repeat,

    linear-gradient(315deg,
      transparent 0%, transparent 62%,
      rgba(207,31,46,0.95) 62%, rgba(207,31,46,0.95) 70%,
      transparent 70%, transparent 100%
    ) calc(100% - 40px) calc(100% + 10px) / 520px 320px no-repeat,

    /* thin diagonal lines */
    linear-gradient(135deg,
      transparent 0%, transparent 49.6%,
      rgba(207,31,46,0.55) 49.6%, rgba(207,31,46,0.55) 49.9%,
      transparent 49.9%, transparent 100%
    ) 10% 12% / 900px 700px no-repeat,

    linear-gradient(135deg,
      transparent 0%, transparent 49.6%,
      rgba(207,31,46,0.40) 49.6%, rgba(207,31,46,0.40) 49.85%,
      transparent 49.85%, transparent 100%
    ) 70% 72% / 900px 700px no-repeat;

    opacity: var(--deco-opacity);

  -webkit-mask-image: linear-gradient(90deg,
    #fff 0,
    #fff calc(50% - (var(--max) * 0.5) - var(--deco-fade)),
    transparent calc(50% - (var(--max) * 0.5) + 10px),
    transparent calc(50% + (var(--max) * 0.5) - 10px),
    #fff calc(50% + (var(--max) * 0.5) + var(--deco-fade)),
    #fff 100%);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;

  mask-image: linear-gradient(90deg,
    #fff 0,
    #fff calc(50% - (var(--max) * 0.5) - var(--deco-fade)),
    transparent calc(50% - (var(--max) * 0.5) + 10px),
    transparent calc(50% + (var(--max) * 0.5) - 10px),
    #fff calc(50% + (var(--max) * 0.5) + var(--deco-fade)),
    #fff 100%);
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
}

/* Content über dem Background */
.page-detail > *{
  position: relative;
  z-index: 1;
}

/* Mobile: weniger Deko, mehr Inhalt */
@media (max-width: 780px){
  .page-detail::before{ opacity: 0.55; }
  .page-detail::after{ opacity: 0.45; }
}

.page-detail .container{
  width: min(100% - 32px, var(--max));
  margin: 0 auto;
}

.page-detail .muted{ color: var(--muted); }
.page-detail .tiny{ font-size: 0.9rem; }

.page-detail :focus-visible{
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 12px;
}

/* Header: hell */
.page-detail .header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(246, 247, 251, 0.82);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(10px);
}

/* Header Logo */
.brand{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.brand__logo{
  height: 42px;       /* Header-Logo Größe */
  width: auto;
  display: block;
}

/* Mobile: etwas kleiner */
@media (max-width: 520px){
  .brand__logo{
    height: 36px;
  }
}


.page-detail .header__inner{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 0;
}

.page-detail .brand{ display:flex; align-items:center; gap: 12px; text-decoration:none; }
.page-detail .brand__mark{
  width: 40px; height: 40px;
  display:grid; place-items:center;
  font-weight: 900;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(15,23,42,0.06);
}
.page-detail .brand__text{ display:flex; flex-direction:column; line-height: 1.1; }
.page-detail .brand__text small{ color: var(--muted); }

/* Nav */
.page-detail .nav{ display:flex; align-items:center; gap: 8px; }
.page-detail .nav a{
  text-decoration:none;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid transparent;
  color: rgba(15,23,42,0.88);
}
.page-detail .nav a:hover{
  text-decoration:none;
  background: rgba(15,23,42,0.06);
  border-color: var(--line);
}
.page-detail .nav__cta{
  background: rgba(15,23,42,0.06);
  border: 1px solid var(--line) !important;
}

/* Mobile nav button */
.page-detail .navBtn{
  display:none;
  width: 44px; height: 44px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(15,23,42,0.06);
  cursor:pointer;
  padding: 10px;
}
.page-detail .navBtn__bar{
  display:block;
  height:2px;
  background: rgba(15,23,42,0.85);
  border-radius: 2px;
  margin: 5px 0;
}

.page-detail .nav a[aria-current="page"],
.page-detail .nav [aria-current="page"]{
  background: rgba(186, 59, 70, 0.14);
  border-color: rgba(255, 0, 21, 0.624);
  color: #ef041b;
  font-weight: 600;
}

.page-detail .nav a[aria-current="page"]:hover{
  background: rgba(207,31,46,0.18);
}

/* Buttons */
.page-detail .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(15,23,42,0.06);
  text-decoration:none;
  cursor:pointer;
  color: rgba(15,23,42,0.90);
  transition: box-shadow 160ms ease, transform 160ms ease, background 160ms ease;
}

.page-detail .btn:hover{
  box-shadow: 0 6px 18px rgba(15,23,42,0.14);
  transform: translateY(-1px);
  background: rgba(15,23,42,0.08);
}

.page-detail .btn--primary{
  background: rgba(0, 210, 247, 0.1);
  border-color: rgba(0, 162, 255, 0.18);
  color: #00ddff; 
  margin-top: 15px;
}
.page-detail .btn--primary:hover{
  background: rgba(207,31,46,0.14);
}

.page-detail .btn--ghost{
  background: transparent;
  margin-top: 15px;
}

/* Cards */
.page-detail .card{
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: var(--shadow);
  transition: box-shadow 220ms ease, transform 220ms ease, border-color 220ms ease;
  will-change: transform, box-shadow;
}

.page-detail .card:hover{
  transform: translateY(-6px) scale(1.01);
  box-shadow:
    0 18px 45px rgba(15,23,42,0.22),
    0 6px 16px rgba(15,23,42,0.14);
  border-color: rgba(15,23,42,0.22);
}

.page-detail .card--flat{
  background: var(--panel2);
  box-shadow: none;
}

.page-detail details.card{ cursor: pointer; }

/* Sections */
.page-detail .section{ padding: 54px 0; }
.page-detail .sectionHead{ margin-bottom: 18px; }
.page-detail .sectionHead h2{ margin: 0 0 6px; letter-spacing: -0.01em; font-size: 1.8rem; }

/* Hero */
.page-detail .detail-hero{ padding: 58px 0 20px; }
.page-detail .detail-hero__grid{
  display:grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 16px;
  align-items:start;
}

.page-detail .detail-kicker{
  display:inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(15,23,42,0.04);
  color: var(--muted);
  margin: 0 0 12px;
}

.page-detail h1{
  margin: 0 0 10px;
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-size: clamp(2.0rem, 2.6vw, 2.7rem);
}

.page-detail .detail-lead{
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 1.05rem;
  max-width: 70ch;
}

.page-detail .detail-actions{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.page-detail .detail-actions--center{
  justify-content:center;
}

.page-detail .detail-bullets{
  margin: 12px 0 0;
  padding-left: 18px;
  color: var(--muted);
}

/* Hero contact */
.page-detail .detail-contact{
  display:flex;
  flex-direction:column;
  gap: 10px;
  margin: 12px 0;
}

.page-detail .linkStrong{
  text-decoration:none;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(15,23,42,0.05);
}
.page-detail .linkStrong:hover{ text-decoration:none; background: rgba(15,23,42,0.08); }

/* Grids */
.page-detail .grid{ display:grid; gap: 14px; align-items: stretch; }
.page-detail .detail-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.page-detail .detail-grid-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Checklist */
.page-detail .checklist{
  margin: 10px 0 0;
  padding-left: 18px;
  color: var(--muted);
}
.page-detail .checklist li{ margin: 6px 0; }

/* Highlight box */
.page-detail .highlight{
  border: 1px solid rgba(0, 0, 0, 0.18);
  background: rgba(207,31,46,0.06);
  border-radius: 20px;
}
.page-detail .highlight__icon{
  border: 1px solid rgba(207,31,46,0.18);
  background: rgba(255,255,255,0.70);
}

/* Accordion */
.page-detail .accordion{ display:grid; gap: 12px; }
.page-detail details summary{
  cursor:pointer;
  font-weight: 700;
  list-style: none;
}
.page-detail details summary::-webkit-details-marker{ display:none; }
.page-detail details p{ margin: 10px 0 0; }

/* Soft sections + closing */
.page-detail .section--soft{
  background: linear-gradient(180deg, transparent, rgba(15,23,42,0.04));
  border-top: 2px solid var(--line);
  border-bottom: 2px solid var(--line);
}

.page-detail .section--closing{
  padding: 84px 0 110px;
  background: linear-gradient(180deg, transparent, rgba(15,23,42,0.04));
}

.page-detail .closing{
  max-width: 720px;
  text-align: center;
}

/* Footer */
.page-detail .footer{
  border-top: 1px solid var(--line);
  padding: 26px 0;
  color: var(--muted);
}

.page-detail .footer__inner{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
}

.page-detail .footer__links{
  display:flex;
  gap: 12px;
}

.page-detail .footer__links a{
  text-decoration:none;
  padding: 8px 10px;
  border-radius: 12px;
}
.page-detail .footer__links a:hover{
  text-decoration:none;
  background: rgba(15,23,42,0.06);
  border: 1px solid var(--line);
}

/* Responsive */
@media (max-width: 980px){
  .page-detail .detail-hero__grid{ grid-template-columns: 1fr; }
  .page-detail .detail-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .page-detail .detail-grid-2{ grid-template-columns: 1fr; }
}

@media (max-width: 780px){
  .page-detail .navBtn{ display:block; }

  .page-detail .nav{
    position:absolute;
    left:0; right:0;
    top: 70px;
    display:none;
    flex-direction:column;
    gap: 6px;
    padding: 12px;
    background: rgba(246, 247, 251, 0.96);
    border-bottom: 1px solid var(--line);
  }
  .page-detail .nav.isOpen{ display:flex; }
  .page-detail .nav a{ width:100%; }

  .page-detail .detail-grid{ grid-template-columns: 1fr; }
}

/* =================================
   BILDER - für hero
   =================================
*/

.heroImg{
  position: relative;
  min-height: 440px;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}

.heroImg__media{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;         
  object-position: right 55%; 
  display: block;    
}

.heroImg__overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(246,247,251,0.95) 0%,
    rgba(246,247,251,0.92) 45%,
    rgba(246,247,251,0.55) 70%,
    rgba(246,247,251,0.15) 100%
  );
}

.heroImg__content{
  position: relative;
  z-index: 1;
  padding: 64px 0;

  display: flex;
  justify-content: flex-start;
  align-items: flex-start;

  max-width: none;
}

.heroImg__panel{
  margin-left: 0;
  margin-right: auto;

  width: min(720px, 100%);
  padding: 22px;

  border-radius: 18px;
  background: rgba(246, 247, 251, 0.72);
  border: 1px solid rgba(15, 23, 42, 0.14);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 18px 45px rgba(2, 6, 23, 0.10);
}

.heroImg__panel,
.heroImg__panel *{
  text-align: left;
}

.heroImg__panel .detail-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-start;
  align-items: center;
  margin-top: 16px;
}

.heroImg__panel .detail-actions .btn{
  width: auto;
  display: inline-flex;
  white-space: nowrap;
}

.heroImg__panel .btn{ max-width: 100%; }

.heroImg__panel .detail-lead{
  margin-top: 10px;
  max-width: 62ch;
}

/* Mobile: Panel nimmt volle Breite, Buttons dürfen umbrechen */
@media (max-width: 780px){
  .heroImg__content{ padding: 44px 0; }
  .heroImg__panel{ padding: 18px; }

  .heroImg__panel .detail-actions .btn{
    white-space: normal; /* auf mobile darf Text umbrechen */
  }
}

/* =========================================================
   EX-SCHUTZ – Zusatzstyles 
   ========================================================= */

.page-ex{
  /* neutraler Hintergrund ohne blauen Glow */
  background: #f6f7fb !important;
}

/* Hero Bild (wie du es auf CE schon gebaut hast) */
.page-ex .heroImg{
  position: relative;
  min-height: 440px;
  overflow: hidden;
  border-bottom: 1px solid rgba(15,23,42,0.12);
}

.page-ex .heroImg__media{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  display: block;
}

.page-ex .heroImg__overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(246,247,251,0.94) 0%,
    rgba(246,247,251,0.88) 42%,
    rgba(246,247,251,0.52) 68%,
    rgba(246,247,251,0.14) 100%
  );
}

.page-ex .heroImg__content{
  position: relative;
  z-index: 1;
  padding: 64px 0;
  display: flex;
  justify-content: flex-start;
}

.page-ex .heroImg__panel{
  width: min(740px, 100%);
  padding: 22px;
  border-radius: 18px;
  background: rgba(246,247,251,0.72);
  border: 1px solid rgba(15, 23, 42, 0.14);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 18px 45px rgba(2, 6, 23, 0.10);
}

.page-ex .heroImg__panel *{ text-align: left; }
.page-ex .heroImg__panel .detail-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-start;
  margin-top: 16px;
}
.page-ex .heroImg__panel .detail-actions .btn{
  width: auto;
  display: inline-flex;
  white-space: nowrap;
}

/* Grids */
.page-ex .ex-why{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.page-ex .ex-grid{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.page-ex .card--link{
  display: block;
  text-decoration: none;
  color: inherit;
}
.page-ex .card--link:hover{ text-decoration: none; }

/* Detail-Sections unter dem Grid (EX + CE) */
.page-ex .ex-details,
.page-ce .ex-details{
  max-width: 980px;
  margin: 0 auto;
}

.page-ex .serviceBlock,
.page-ce .serviceBlock{
  padding: 26px 0;
  border-bottom: 1px solid rgba(15, 23, 42, 0.14);
  scroll-margin-top: 110px; /* sticky header offset */
}

.page-ex .serviceBlock:last-child,
.page-ce .serviceBlock:last-child{
  border-bottom: 0;
}

.page-ex .serviceBlock h2,
.page-ce .serviceBlock h2{
  margin: 0 0 10px;
  font-size: 1.4rem;
  letter-spacing: -0.01em;
}

.page-ex .serviceBlock p,
.page-ce .serviceBlock p{
  margin: 0;
  max-width: 92ch;
  line-height: 1.7;
}

/* Optional: smooth scroll + kurzer Flash */
html{ scroll-behavior: smooth; }

.page-ex :target{
  animation: targetFlash 1.2s ease-out;
}

.page-ce :target{
  animation: targetFlash 1.2s ease-out;
}

@keyframes targetFlash{
  0%   { background: rgba(37,99,235,0.10); }
  100% { background: rgba(37,99,235,0.00); }
}

/* Responsive */
@media (max-width: 980px){
  .page-ex .ex-why{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .page-ex .ex-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 780px){
  .page-ex .heroImg{ min-height: 520px; }
  .page-ex .heroImg__overlay{
    background: linear-gradient(
      180deg,
      rgba(246,247,251,0.92) 0%,
      rgba(246,247,251,0.82) 55%,
      rgba(246,247,251,0.35) 100%
    );
  }
  .page-ex .heroImg__content{ padding: 44px 0; }
  .page-ex .heroImg__panel{ padding: 18px; width: 100%; }
  .page-ex .heroImg__panel .detail-actions .btn{ white-space: normal; }

  .page-ex .ex-why{ grid-template-columns: 1fr; }
  .page-ex .ex-grid{ grid-template-columns: 1fr; }
}

.section-divider{
  margin: 0px auto;
  max-width: 1520px;
  height: 1px;
  background: rgba(15, 23, 42, 0.14);
}

.heroSplit{
  padding-top: 56px;
  padding-bottom: 56px;
}

.heroSplit__grid{
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  gap: 22px;
  align-items: start;
}

/* linke Seite: maximal lesbare Breite */
.heroSplit__left{
  max-width: 66ch;
}

.heroContact{
  position: sticky;
  top: 92px; /* passt, weil dein Header fixed/klein ist */
  padding: 18px;
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,0.12);
  background: rgba(255,255,255,0.78);
  box-shadow: 0 18px 45px rgba(2,6,23,0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.heroContact__title{
  font-weight: 800;
  font-size: 18px;
  margin: 0 0 6px;
}

.heroContact__hint{
  margin: 0 0 14px;
}

.heroContact__items{
  display: grid;
  gap: 10px;
  margin: 12px 0 14px;
}

.heroContact__item{
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 10px;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,0.10);
  background: rgba(246,247,251,0.86);
  text-decoration: none;
  color: inherit;
}

.heroContact__item:hover{
  border-color: rgba(15,23,42,0.18);
  transform: translateY(-1px);
}

.heroContact__item .label{
  font-weight: 700;
  color: rgba(15,23,42,0.85);
}

.heroContact__item .value{
  font-weight: 700;
}

.heroContact__who{
  display: grid;
  gap: 2px;
  padding-top: 12px;
  margin-top: 10px;
  border-top: 1px solid rgba(15,23,42,0.10);
}

.heroContact__cta{
  width: 100%;
  justify-content: center;
  margin-top: 14px;
}

.heroContact__mini{
  margin: 10px 0 0;
  line-height: 1.5;
}

/* Responsive */
@media (max-width: 980px){
  .heroSplit__grid{
    grid-template-columns: 1fr;
  }
  .heroContact{
    position: static;
  }
}

/* OLED / Light-Theme Kontrast-Fix: weniger "überbelichtet" */
.page-detail{
  /* Hintergrund minimal dunkler (nimmt das Grellen raus) */
  --bg: #f2f4f7;

  /* Karten opak (kein Milchglas auf Weiß) */
  --panel: #eef1f4;   /* grau */
  --panel2: #f7f8fa;  /* hellgrau */

  /* Kontrast leicht anheben */
  --muted: rgba(15,23,42,0.78);
  --line: rgba(15,23,42,0.18);

  background: var(--bg);
}

/* Header etwas weniger "glow" */
.page-detail .header{
  background: rgba(242,244,247,0.94);
  backdrop-filter: blur(6px);
}

/* =========================================================
   STRONG MODE (Kontrast + Umrandungen kräftiger)
   ganz ans Ende packen, damit es alles überschreibt
   ========================================================= */

.page-detail{
  /* mehr Kontrast */
  --text: #0b1220;
  --muted: rgba(11,18,32,0.84);

  /* Linien deutlich sichtbarer */
  --line: rgba(11, 18, 32, 0.164);

  /* Karten / Flächen etwas dunkler + weniger “milchig” */
  --panel: #e8edf2;
  --panel2: #f8fafc;

  /* Schatten minimal stärker */
  --shadow: 0 18px 55px rgba(2,6,23,0.12);

  /* Akzent etwas kräftiger */
  --focus: rgba(207, 31, 46, 0.636);

  /* Deko trotzdem dezent lassen */
  --deco-opacity: 0.22;
  --dots-opacity: 0.16;
}

/* Umrandungen überall dicker */
.page-detail .card,
.page-detail .btn,
.page-detail .nav__cta,
.page-detail .navBtn,
.page-detail .brand__mark,
.page-detail .detail-kicker,
.page-detail .linkStrong,
.page-detail .highlight,
.page-detail .footer,
.page-detail .header{
  border-width: 2px !important;
}

/* Buttons: Background etwas kräftiger */
.page-detail .btn{
  background: rgba(11,18,32,0.08);
  color: rgba(11,18,32,0.92);
}
.page-detail .btn:hover{
  background: rgba(11,18,32,0.12);
}

/* Primary: satter, aber nicht “Feuerwehr” */
.page-detail .btn--primary{
  background: rgba(48, 48, 48, 0.21);
  border-color: rgba(136, 136, 136, 0.574);
  color: #000000;
}
.page-detail .btn--primary:hover{
  background: rgba(49, 49, 49, 0.564);
}

/* Nav hover etwas klarer */
.page-detail .nav a:hover{
  background: rgba(11,18,32,0.08);
  border-color: var(--line);
}

/* Cards: mehr Kante */
.page-detail .card{
  border-color: var(--line);
}

/* Highlight: sichtbarer */
.page-detail .highlight{
  border-color: rgba(207,31,46,0.32) !important;
  background: rgba(207,31,46,0.10);
}
.page-detail .highlight__icon{
  border-width: 2px !important;
  background: rgba(255,255,255,0.86);
}

/* Hero/Contact Panels: weniger transparent, damit OLED nix “wegfrisst” */
.page-detail .heroImg__panel,
.page-detail .contactCard,
.page-detail .heroContact{
  background: rgba(248,250,252,0.92) !important;
  border: 2px solid var(--line) !important;
}

/* Listen/Items: klare Kanten */
.page-detail .contactItem,
.page-detail .contactMini,
.page-detail .heroContact__item{
  border: 2px solid rgba(11,18,32,0.22) !important;
  background: rgba(248,250,252,0.94) !important;
}

/* Divider/Soft sections: sichtbar */
.page-detail .section--soft{
  border-top: 2px solid var(--line) !important;
  border-bottom: 2px solid var(--line) !important;
}

/* Target-Effekte: auch in Rot + etwas kräftiger */
@keyframes targetRing{
  0%   { box-shadow: 0 0 0 5px rgba(31, 43, 207, 0.32); }
  100% { box-shadow: 0 0 0 0 rgba(207,31,46,0.00); }
}
@keyframes targetFlash{
  0%   { background: rgba(207,31,46,0.14); }
  100% { background: rgba(207,31,46,0.00); }
}