/* Globale Styles die überall gelten */
/* ==== Global Styles (clean) ==== */

/* 1) Basis: Root Text-Engine */
html {
  font-size: 16px;               /* 1rem = 1xpx */
  /* Umrechnung: 1rem = 16px
     0.875rem = 14px
     0.9375rem = 15px
     1rem = 16px
     1.0625rem = 17px
     1.125rem = 18px
     1.25rem = 20px
     1.5rem = 24px
     2rem = 32px
     3rem = 48px
  */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* 2) Body-Defaults */
body {
  font-family: var(--font-primary, 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif);
  font-size: var(--font-size-body);  /* 17px Standard */
  line-height: 1.7;
  color: var(--bt-blue);
  background-color: var(--bt-background-grey); /* statt hartem Grün global */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility; /* optional, kann subpixel-kernings ändern */
}

.block-content {
  padding: 0 !important;
}

/* 3) Typografie – konsistent mit clamp() */
/* Headings: responsive, ohne zweite px-Definitionen */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-primary);
  line-height: 1.2;
  color: var(--bt-blue);
  margin: 0 0 0.8rem;
}
/*
h1 { font-weight: 700; font-size: clamp(1.9rem, 1.4rem + 1vw, 2.6rem); }
h2 { font-weight: 500; font-size: clamp(1.5rem, 1.2rem + 0.6vw, 2rem); }
h3 { font-weight: 500; font-size: clamp(1.25rem, 1.05rem + 0.4vw, 1.5rem); }
*/
h5 { font-weight: 500; font-size: 1.0625rem; }
h6 { font-weight: 600; font-size: 1rem; }

/* H1: 32–48px */
h1 {
  font-weight: 700;
  line-height: 1.2;
  font-size: clamp(var(--h1-min), 1.2rem + 2vw, var(--h1-max));
}
/* H2: 24–32px */
h2 {
  font-weight: 600;
  line-height: 1.25;
  font-size: clamp(var(--h2-min), 1.1rem + 1vw, var(--h2-max));
}
/* H3: 20–24px */
h3 {
  font-weight: 500;
  line-height: 1.3;
  font-size: clamp(var(--h3-min), 1rem + 0.6vw, var(--h3-max));
}
h4 { 
  font-weight: 400;
  line-height: 1.35;
  font-size: clamp(var(--h4-min), 1rem + 0.3vw, var(--h4-max));    
  /* text-transform: none; */
}

/* optionale Varianten (keine px) */
h1.h1-small        { font-size: clamp(1.25rem, 1.1rem + 0.3vw, 1.5rem); }
h1.h1-medium       { font-size: clamp(1.5rem, 1.2rem + 0.5vw, 2rem); }
h1.h1-large-uppercase { text-transform: uppercase; }

h2.h2-small        { font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem); }
h2.h2-medium       { font-size: clamp(1.125rem, 1rem + 0.3vw, 1.375rem); }
h2.h2-small-uppercase { text-transform: uppercase; }

h3.h3-small-uppercase { text-transform: uppercase; }

/* 4) Fließtext */
p, li {
  /* font-size: 1.125rem !important;  xyz px */
  font-size: clamp(1.25rem, 1.2rem + 0.5vw, 1.5rem); /* wie gross ?? */
  line-height: 1.8 !important;
  color: var(--bt-blue) !important;
}

@media (min-width: 480px){
  /* p, li { font-size: var(--font-size-body); } /* 17px ab kleinen Tablets */
}
@media (min-width: 1200px){
  /* p, li { font-size: var(--font-size-body-lg); } /* 18px auf großen Screens */
}

p {
  margin: 0 0 1rem;
  font-weight: 300; /* etwas leichter für Montserrat */
  text-transform: none;
}

/*  span .back-angle img {
  font-size: 1.125rem;
  width: 340px; height: 293px;
}

span {
 font-size: 0.9375rem;  
 line-height: 1.6;
 color: var(--bt-green);
 margin: 0 0 1rem;
 white-space: pre-wrap; 
}
*/

p.p-small   { font-size: 0.875rem; }  /* 14px */
p.p-large   { font-size: 1.25rem; }   /* 20px */
p.p-uppercase { text-transform: uppercase; }

/* 5) Preformatted (korrekter Blocktitel) */
pre {
  /* font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; */
  font-family: var(--font-primary, 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Liberation Mono", "Courier New", Arial, sans-serif);
  font-size: 0.9375rem; /* 15px */
  line-height: 1.6;
  color: var(--bt-blue);
  margin: 0 0 1rem;
  white-space: pre-wrap;
}

/* 6) Links */
a {
  color: var(--bt-green);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

.back-link {
    display: block;             /* für margin-left:auto */
    width: max-content;         /* nur so breit wie der Text */
    /* margin-left: auto; */          /* nach rechts schieben */
    color: var(--bt-blue);
    font-weight: 200;
    font-size: 16px;
    text-decoration: none !important;
    border-bottom: 2px solid currentColor;
    padding-bottom: 2px;
    line-height: 1.2;
    transition: color .3s ease, border-color .3s ease;
}
.back-link::before {
    content: "\f060";                   /* arrow-right */
    font-family: "Font Awesome 5 Free"; /* ggf. "Font Awesome 6 Free" */
    font-weight: 900;                   /* Solid */
    display: inline-block;              /* eigene Box -> transformierbar */
    margin-right: 6px;                   /* ersetzt dein früheres gap */
    transform: translateX(0);
    transition: transform .3s ease, color .3s ease;
}
.back-link:hover {
    color: var(--bt-hover, #2a7be4);    /* fallback, falls Var fehlt */
    border-color: currentColor;         /* Linie färbt mit */
}
.back-link:hover::before {
    transform: translateX(-4px);
}
/* 7) Mega-Menu Heading Links */
.megamenu-column-header a {
  color: var(--bt-blue) !important;       /* hier okay, wenn TheGem sehr spezifisch ist */
  text-decoration: none !important;
}
.megamenu-column-header a:hover {
  color: var(--bt-green) !important;
  text-decoration: underline !important;
}
/* Navigation: 16–18px */
.main-navigation, .menu, .thegem-menu, .primary-nav a {
  font-size: var(--nav-size);   /* 16px */
}

@media (min-width: 1200px){
  .main-navigation, .menu, .thegem-menu, .primary-nav a {
    font-size: 1.125rem;        /* 18px */
  }
}

/* 8) Safari-spezifische Sicherung (optional, oft redundant) */
@supports (-webkit-touch-callout: none) {
  html { -webkit-text-size-adjust: 100%; }
}

/* TEMP: Sichtprüfung – nach 10 Minuten wieder entfernen
h1::after { content:"  (h1 "+ getComputedStyle(this).fontWeight +")"; }
*/

/* fix für den cockie banner kram 22.08.25 */
#cmplz-manage-consent .cmplz-manage-consent {
    background-color: var(--accent-color) !important;
    right: 60px !important;
    padding: 15px !important; 
}
button,
.button {
  background-color: #7bb142;
  color: #fff;
  border: none;
  padding: 12px 24px;
  border-radius: 4px;
  font-size: 17px;
  cursor: pointer;
}
button:hover,
.button:hover {
  background-color: #5f8a32;
}
/* --- */

/* Footer Menü fixen */
#footer-navigation .nav-menu {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;        /* NICHT umbrechen */
  gap: 2px;                 /* gleichmäßiger Abstand */
  padding: 1px;
  margin: 5px;
  list-style: none;
  color: var(--bt-blue) !important;

}
/* <li>-Elemente sauber inline halten */
#footer-navigation .nav-menu li {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;      /* bricht lange Wörter nicht um */
}
#footer-navigation li a {
  color: var(--bt-blue) !important;
  font-size: 12px !important;
}
.footer-site-info {
  font-size: 16px !important;
  color: var(--bt-blue) !important;  
}

/* Für das Handy, Trenner und den Abstand entsprechend verkleinern, dass es passt. 24.08.25 */
@media (max-width: 767px) {
  #footer-menu {
    display: flex;
    flex-direction: column;       /* untereinander */
    align-items: center;          /* zentriert */
    justify-content: center;
    padding: 0;
    margin: 0;
    list-style: none;
  }
  #footer-menu li {
    padding: 0;
    margin: 0;
  }
  #footer-menu li::before,
  #footer-menu li::after {
    content: none !important;
    display: none !important;
  }
  #footer-navigation #footer-menu li {
      margin: 0 !important;
  }
}

/* kleines admin-schloss oberhalb des copyright hinweises darstellen was zum login in wp führt. - 24.08.25 */ 
.footer-site-info.with-lock {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.footer-admin-login {
  margin-bottom: 0;
  margin-top: -15px;
  text-decoration: none !important;
  line-height: 1;
  display: inline-block;
}
.footer-admin-login .dashicons {
  font-size: 11px !important;
  color: #7da186;
  transition: color 0.2s ease;
}
.footer-admin-login:hover .dashicons {
  color: #000;
}
.footer-copy {
  font-size: inherit;
  color: inherit;
  line-height: 1.4;
  margin: 0;
  padding: 0;
}
 
 
/* Sticky Header hart deaktivieren */
/* Sticky Header erzwingen: NICHT fixieren 
.site-header.fixed,
.site-header.header-sticky,
.site-header.is-sticky 
{
  position: static !important;
  top: auto !important;
}

.site-header.shrink {
  transform: none !important;
  height: auto !important;
}
*/

/* 1) Sticky-Position komplett neutralisieren (hast du schon) */
.site-header.fixed,
.site-header.header-sticky,
.site-header.is-sticky {
  position: static !important;
  top: auto !important;
}

/* 2) Keine Shrink-Animation/Höhe ändern */
.site-header.animated-header,
.site-header.shrink {
  transform: none !important;
  height: auto !important;
  transition: none !important;
  animation: none !important;
}

/* 3) Logo nie ausblenden oder transformieren – egal welche Klasse kommt */
.site-header .site-logo img {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  transition: none !important;
}

/* 4) Auch im "shrink"/"fixed"/"sticky"-Zustand Logo sichtbar halten */
.site-header.shrink .site-logo img,
.site-header.fixed .site-logo img,
.site-header.is-sticky .site-logo img {
  opacity: 1 !important;
  transform: none !important;
}

/* 5) Falls TheGem zwischen Sticky-/Mobile-Logo wechselt – nur das Hauptlogo nutzen */
.site-logo .sticky-logo,
.site-logo .mobile-logo {
  display: none !important;
}
.site-logo .logo {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}
/* Nur Desktop: .small-Version ausblenden */
@media (min-width: 1025px) {
  .site-logo img.small {
    display: none !important;
  }
}

/* Nur Mobil: .default-Version ausblenden */
@media (max-width: 1024px) {
  .site-logo img.default {
    display: none !important;
  }
}

/* 
.site-logo img.default {
  border: 2px solid red;
}
.site-logo img.small {
  border: 2px solid blue;
}
*/

/* Entfernt den Theme-internen schwarzen Punkt */
ul.bt-leistungsliste {
  list-style: none !important;
  padding-left: 0;
  margin-left: 2em;
}

ul.bt-leistungsliste li {
  position: relative;
  padding-left: 24px; /* Abstand zwischen Icon und Text */
  margin-left: 0;      /* Sicherheitshalber überschreiben */
}

ul.bt-leistungsliste li:before {
  content: "\f061";   /* Pfeil nach rechts */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute !important;
  left: 0; /* Icon ganz links innerhalb des <li> */
  top: 0.1em;
  color: var(--bt-green) !important;
  font-size: 20px !important;
  background: none !important;
  border-radius: 0 !important;
}
/* ---- */

/* Parent bekommt feste Größe + Positionierung (falls nicht schon vorhanden) */
 .scroll-top-button {
   position: fixed;              /* ggf. vom Theme schon gesetzt */
   right: 24px;
   bottom: 24px;
   width: 50px;
   height: 50px;
   border-radius: 50%;
 }
 
 /* Icon als Kreis via ::before */
 .scroll-top-button::before {
   content: "\f062" !important;  /* Arrow Up */
   font-family: "Font Awesome 6 Free","Font Awesome 5 Free" !important;
   font-weight: 900 !important;  /* Solid */
 
   display: inline-block;
   width: 100%;
   height: 100%;
   line-height: 50px;            /* vertikal zentrieren */
   text-align: center;
   font-size: 20px;
 
   background-color: var(--bt-blue, #06060f) !important;
   color: #fff !important;
   border-radius: 50%;
 }
 
 /* Falls das Theme zusätzlich ein ::after-Icon setzt → deaktivieren */
 .scroll-top-button::after { content: none !important; }