@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500&display=swap");
@font-face {
    font-family: 'Cormorant Garamond';
    src: url('/fileadmin/global/fonts/CormorantGaramond-italic.woff2') format('woff2');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}
:root:root{
  --c1:#3C6F44;          /* Markengrün -> --bs-primary */
  --c2:#b08d57;          /* Messing (Akzent)          */
  --accent-2:#b06a4f;    /* Tonerde (sparsam)         */
  --c3:#f2f4f1;          /* helle Fläche              */
  --c4:#2e5836;
  --c5:#15361F;          /* Dunkelgrün                */

  --text:#262b27;
  --text-muted:#7d837c;

  --font-headings:"Cormorant Garamond", Georgia, serif;
  --headings-weight:600;
  --h1-factor:3.1; --h2-factor:2.4; --h3-factor:1.75;
  --h4-factor:1.45; --h5-factor:1.2; --h6-factor:1.05;

  --space:1.4rem;
  --radius:0; --radius-sm:0; --radius-lg:0;
  --shadow:none; --box-shadow:none;
}

/* ---------- 2) Global ---------- */
h1{ font-size:clamp(1.9rem,3.4vw + 1rem,var(--h1-size)); hyphens: auto; }
h2,h3{ hyphens: auto;}
a{ color:var(--c1); }
#navi-top a.active.nav-link {
  color: var(--c2);
}

.sticky-top {
  position: fixed !important;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;}

/* Messinglinie unter Sektionsüberschriften */
#content-main h2{
  display:inline-block;
  padding-bottom:.3rem;
  border-bottom:2px solid var(--c2);
}

/* Buttons: primary folgt --c1 automatisch; secondary als Outline */
.btn-secondary{
  background:transparent; border:1px solid var(--c1); color:var(--c1);
}
.btn-secondary:hover,.btn-secondary:focus{ background:var(--c1); border-color:var(--c1); color:#fff; }
  
@media (min-width: 768px) {
  .col-md-6 {
    flex: 0 0 auto;
    width: 50%;
    margin-block-start: 0 !important;
  }
  .tx-powermail .powermail_fieldwrap + .powermail_fieldwrap {
    margin-block-start: 0 !important;
  }
}

/* ---------- 3) Hero  [#slideshow > container-col2 + filled-soft + equal-height] ---------- */
#slideshow .frame-box-filled-soft{
  background:var(--c3);
  padding:0; box-shadow:none; border-radius:0;
  min-height:clamp(360px,52vh,620px);
}
#slideshow [class*="frame-box-"] .ce-gallery {
  margin-top: 0;
  margin-bottom: 0;
}
#slideshow .row{ --bs-gutter-x:0; }

/* linke Spalte: Textpanel, vertikal zentriert, zur Seitenmitte ausgerichtet */
#slideshow .spalte1{
  align-items:center; justify-content:flex-end;
  padding:clamp(1.5rem,4vw,4rem);
}
#slideshow .spalte1 > .frame-type-text{ max-width:34rem; }
#slideshow .spalte1 h1{ font-family:var(--font-headings); margin-bottom:1rem; }
#slideshow .spalte1 h1::after{
  content:""; display:block; width:3rem; height:3px;
  background:var(--accent-2); margin-top:1rem;
}
#slideshow .spalte1 p{ color:var(--text-muted); }
#slideshow .spalte1 .btn{ margin-right:.4rem; }


/* ---------- 4) Vertrauen  [container-col5 mit Icon + Text] ---------- */
/* Bootstrap hat kein 5er-Raster: col-lg-2 = 16,67 %, fünf Spalten lassen
   16,67 % Rest. Ab LG deshalb auf echte 20 % korrigieren. */
@media (min-width:992px){
  .frame-type-container-col5 > .row > [class*="col-"]{
    flex:0 0 auto; width:20%; max-width:20%;
  }
}

.frame-type-container-col5 .frame-type-textpic{ text-align:center; }
.frame-type-container-col5 figure.image{ margin-bottom:.7rem; }
.frame-type-container-col5 figure.image img{
  width:auto; height:2.5rem; max-width:none;
}
.frame-type-container-col5 .ce-bodytext p{
  font-size:.95rem; line-height:1.45; margin:0;
}

/* Unter LG werden die Spalten breit (col-md-6 / col-12) – dann links ausrichten.
   ce-center zentriert per Float-Trick (.ce-outer/.ce-inner float:right; right:±50%),
   der hier neutralisiert werden muss; text-align allein bewegt das Icon nicht. */
@media (max-width:991.98px){
  .frame-type-container-col5 .frame-type-textpic{ text-align:left; }
  .frame-type-container-col5 .ce-center .ce-outer,
  .frame-type-container-col5 .ce-center .ce-inner{ float:none; right:auto; }
  .frame-type-container-col5 figure.image{ margin-bottom:.5rem; }
}

/* ---------- 5) Leistungskarten  [textpic + filled-soft] ---------- */
.frame-box-filled-soft{
  background:var(--c3);
  border-top:2px solid var(--c2);
  border-radius:0; box-shadow:none;
  padding:var(--space-5);
}
.frame-box-filled-soft h3{ color:var(--c1); margin-bottom:.8rem; }
.frame-box-filled-soft figure.image img{
  width:100%; object-fit:cover; max-width:none;
}
/* Karte füllt die Spalte (equal-height macht die Spalte zum Flex-Container) */
.equal-height > .row > [class*="col-"] > .frame-box-filled-soft{ width:100%; }

/* ---------- 6) Highlight kleine WEGs  [text + callout-left] ---------- */
.frame-box-callout-left{
  background:color-mix(in srgb, var(--c1) 8%, var(--white));
  border-left:.4rem solid var(--c2);
  border-radius:0; box-shadow:none;
  padding:clamp(1.5rem,4vw,3rem);
}
.frame-box-callout-left header h2{ 
  border-bottom:0; 
  padding-left: 0;
  border-left: none;                     
}


/* ---------- 8) Team  [col2, Porträt links im Text] ---------- */
.ce-left.ce-intext.ce-nowrap figure.image{ margin-right:1.2rem; }
.ce-left.ce-intext.ce-nowrap figure.image img{ border-radius:0; }
.ce-intext .ce-bodytext h3{ color:var(--c1); margin-bottom:.2rem; }
.ce-intext .ce-bodytext h3 + p{ color:var(--text-muted); }

/* ---------- 9) Footer ---------- */
#container-bottom.bg-dark{ background-color:var(--c5) !important; }

.frame-box-glass {
  background: color-mix(in srgb, var(--white) 85%, transparent);
}