.local_test {
  color: green;
}

ul {
  padding-inline-start: 25px;
}

.special_offer {
  margin: 20px 6px;
  border: 2px solid blue;
  border-radius: 5px;
  background: yellow;
  p {
    margin: 8px 16px; 
    color: red;
    font-style: italic;
    font-size: 130%;
    strong {
      font-size: 120%;
      color: blue;
    }
    small {
      font-size: 70%;
    }
  }
}

.note {
  margin: 20px 6px;
  border: 4px solid lightgreen;
  border-radius: 5px;
  background: #eeffee;  
  text-align: center;
  h2 {
    margin: 8px 16px; 
    color: green;
  }
  p {
    margin: 8px 16px; 
    font-style: italic;
    strong {
      font-size: 120%;
      color: blue;
    }
    small {
      font-size: 70%;
    }
  }
}

.note_big {
  margin: 20px 6px;
  border: 4px solid lightgreen;
  border-radius: 5px;
  background: #eeffee;  
  text-align: center;
  h2 {
    margin: 32px 32px; 
    font-size: 250%;
    color: green;
  }
  p {
    font-size: 150%;
    line-height: 120%;
    margin: 16px 32px; 
    font-style: italic;
    strong {
      font-size: 120%;
      color: blue;
    }
    small {
      font-size: 70%;
    }
  }
}

.note_subtle {
  margin: 20px 60px;
  border: 2px solid green;
  background: #f8fff8;  
  box-shadow: 2px 2px 4px 1px rgba(0, 0, 0, 0.3);
  h2 {
    margin: 8px 16px; 
  }
  p {
    margin: 8px 16px; 
    font-style: italic;
    strong {
      font-size: 120%;
    }
    small {
      font-size: 70%;
    }
  }
}

@media screen and (max-width: 500px) {
  .note_subtle { 
    margin: 20px 10px;   
  }
}

.existing_clients {
  margin: 20px 6px;
  border: 2px solid blue;
  border-radius: 5px;
  background: #eeeeff;  
  text-align: center;
  p {
    margin: 8px 16px; 
    font-style: italic;
    b {
      font-size: 120%;
      color: red;
    }
    small {
      font-size: 70%;
    }
  }
}

.warning {
  margin: 20px 6px;
  border: 2px solid red;
  border-radius: 5px;
  background: red;  
  text-align: center;
  width: 300px;
  margin-left: auto;
  margin-right: auto;
  p {
    margin: 8px 16px; 
    font-style: italic;
    color: yellow;
  }
}

.scale_of_discount {
  td {
    text-align: right;
  }
}


.scale_of_discount_depreceated {
  margin: 0; 
  padding: 0; 
  border: none; 
  font-size: 80%;  

  td,tr,th {
    border: none; 
    line-height: 1; 
  }
  th {
    text-align: left; 
    font-weight: bold; 
  }

  tr:nth-child(odd) {
    background-color: inherit; 
  }

  td:nth-child(1) {
    font-weight: normal; 
  }
  td:nth-child(2) {
    font-weight: bold; 
  }
}

@media screen and (max-width: 600px){
  .warning {
    width: 70%;
  }
}

/* Größe der Thumbnails überschreiben. Per Helium-Default wären die nur 50px groß. */
.imageselect-thumb {
  width: 100px;
  height: 100px;
}


/* Kundenstimmen / Testimonials */

.testimonial-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  padding: 10px;
}

.testimonial-box {
  flex: 1 1 350px;
  max-width: 480px;
  border: 2px solid var(--halec-red);
  border-radius: 12px;
  padding: 20px;
  background-color: #fff;
  box-shadow: 2px 2px 4px 1px rgba(0, 0, 0, 0.3);
}

.testimonial-box p {
  font-style: italic;
  margin: 0 0 10px 0;
}

.testimonial-box .testimonial-author {
  font-style: normal;
  font-weight: bold;
  text-align: right;
  margin: 0;
}

/* Produkt-Container und Boxen für die Darstellung mehrerer Produkte */

.ref-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  gap: 20px;
  padding: 5px;
}

.ref-box-old {
  padding: 10px;
  border: 1px solid #888;
  user-select: none;
  flex: 1 1 250px;
  min-width: 50px;
  max-width: 480px;
}

.ref-box {
  display:flex;
  align-items: center;
  justify-content: center;
  
  padding: 10px;
  margin: 0px;
  user-select: none;
  max-width: 31%;
  box-shadow: 2px 2px 4px 1px rgba(0, 0, 0, 0.3);
  border-radius: 12px;
}
.ref-box img {
  max-width: 100%;
  height: auto;
  justify-content: center;
}

@media screen and (max-width: 700px){
  .ref-box {
    max-width: 47%;
  }
}

@media screen and (max-width: 400px){
  .ref-box {
    max-width: 95%;
  }
}

.product-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  gap: 20px;
  padding: 10px;
}

.product-box {
  flex: 1 1 300px;
  max-width: 425px;
  min-width: 180px;
  border: 2px solid var(--halec-red);
  padding: 20px;
  margin: 10px 0px;
  padding-bottom: 5px;
  background-color: #fff;
}

.product-box.make-invisible {
  border: none;
  padding: 0px;
  margin: 0px;
  flex: 1 1 250px;
  min-width: 50px;
  user-select: none;
  display: flex;
  flex-direction: column;
}

a.product-box {
  text-decoration: none;  /* Link ohne Unterstrich */  
  color: #000;  /* Schwarze Standard-Schriftfarbe */
  box-shadow: 10px 10px 2px rgba(0, 0, 0, 0.2); 
  border-radius: 30px;
  border: 4px solid var(--halec-red); /* Schmale äußere Umrandung */
}

a.product-box:hover {
/*  transform: translateY(-5px) translateX(-5px);  /* Bewegung des Buttons nach oben beim Klick */
/*  box-shadow: 15px 15px 2px rgba(0, 0, 0, 0.2);  */
    border: 4px solid var(--halec-lightred); /* Schmale äußere Umrandung */
    box-shadow: 
       0px 0px 40px 10px rgba(246, 195, 194, 0.5),
       10px 10px 2px rgba(0, 0, 0, 0.2); * Dunklerer Schatten für Aura */
}

a.product-box:active {
  transform: translateY(5px) translateX(5px);  /* Bewegung des Buttons nach unten beim Klick */
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2); 
}

.product-subbox {
  display: block;     
  flex: 1 1 200px;
  max-width: 450px;
  min-width: 120px;
  border: 1px solid #888;
  padding: 10px;
  margin: 20px 0px;
  background-color: #fff;
  border-radius: 12px;
}
.product-box.make-invisible .product-subbox {
  margin: 10px 0px;
  padding: 20px;
}

a.product-subbox {
  text-decoration: none;  /* Link ohne Unterstrich */  
  color: #000;  /* Schwarze Standard-Schriftfarbe */
  box-shadow:  10px 10px 2px rgba(0, 0, 0, 0.2); 
  border-radius: 30px;
  border: 4px solid var(--halec-red); /* Schmale äußere Umrandung */
}

a.product-subbox:hover {
/*  transform: translateY(-5px) translateX(-5px);  /* Bewegung des Buttons nach oben beim Klick */
/*  box-shadow: 15px 15px 2px rgba(0, 0, 0, 0.2); */
    border: 4px solid var(--halec-lightred); /* Schmale äußere Umrandung */
    box-shadow: 
       0px 0px 40px 10px rgba(246, 195, 194, 0.5),
       10px 10px 2px rgba(0, 0, 0, 0.2); * Dunklerer Schatten für Aura */
}
a.product-subbox:active {
  transform: translateY(5px) translateX(5px);  /* Bewegung des Buttons nach unten beim Klick */
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2); 
}


.product-box h3 {
  margin-top: 0;
  text-align: center;
  font-size: 1.2em;
  font-weight: normal;
}

.product-box h2 {
  margin-top: 0;
  text-align: center;
  background-color: var(--halec-red);
  color: white;
  width: calc(100% + 40px);
  padding: 7px;
  margin: -20px;
  margin-bottom: 10px;
}

a.product-box:hover h2 {
  background-color: var(--halec-lightred);
}

a.product-box h2 {
  width: calc(100% + 44px);
  margin: -22px;
  margin-bottom: 10px;
  border-radius: 30px 30px 0px 0px;
  border: 0px; /* 4px solid var(--halec-red); /* Schmale äußere Umrandung */
}

.product-subbox h2 {
  font-size: 1.1em;
  margin-top: 0;
  text-align: center;
  background-color: var(--halec-red);
  color: white;
  width: calc(100% + 20px);
  padding: 2px;
  margin: -10px;
  margin-bottom: 10px;
}

.product-box.make-invisible .product-subbox h2 {
  padding: 7px;
  width: calc(100% + 44px);
  margin: -22px;
  margin-bottom: 10px;
}

a.product-subbox h2 {
  width: calc(100% + 24px);
  margin: -12px;
  margin-bottom: 10px;
  border-radius: 30px 30px 0px 0px;
  border: 0px; /* 4px solid var(--halec-red); /* Schmale äußere Umrandung */
}

a.product-subbox:hover h2 {
  background-color: var(--halec-lightred);
}


.product-box img {
  max-width: 100%;
  /* display: block; */
  /* margin: 0 auto; */
}

/* 3-stufige CTA-Hierarchie: Primär (gefüllt) / Sekundär (Outline, kleiner) / Tertiär (Text-Link).
   Eingeführt 2026-07-24 in www.halec-lokal-v4, damit auf einen Blick erkennbar ist,
   welcher Button auf einer Seite die wichtigste Handlung ist. */

.button-outer-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
  gap: 0px;
  padding: 0px;
  margin-top: 10px;
}

/* Primär-CTA: die wichtigste Handlung auf der Seite (Kauf/Shop, bzw. auf /beratung/
   der Kontakt-CTA) – vollflächig gefüllt, größter Button. */
.big-button-container a {
    display: inline-block;
    padding: 16px 26px;
    margin: 6px 10px;
    color: #fff;  /* Weiße Schrift auf gefülltem Button */
    font-weight: bold;
    text-decoration: none;  /* Link ohne Unterstrich */
    font-size: 1.8em;
    line-height: 28px;
    background-color: var(--halec-red);  /* Vollflächig gefüllt mit Akzentfarbe */
    border-radius: 30px;
    border: 6px solid var(--halec-red);
    box-shadow:
       10px 10px 2px rgba(0, 0, 0, 0.2);  /* Dunklerer Schatten für Aura */
    text-align: center;  /* Textzentrierung */
}

.big-button-container a:hover {
    color: #fff;
    background-color: var(--halec-lightred);
    border: 6px solid var(--halec-lightred); /* Schmale äußere Umrandung */
    box-shadow:
       0px 0px 40px 10px rgba(246, 195, 194, 0.5),
       10px 10px 2px rgba(0, 0, 0, 0.2); /* Dunklerer Schatten für Aura */
}

.big-button-container a:active {
  transform: translateY(2px) translateX(2px);  /* Bewegung des Buttons nach unten beim Klick */
  box-shadow:
       1px 1px 2px rgba(0, 0, 0, 0.55);
}

/* Sekundär-CTA: unterstützende Handlung (z. B. "Unverbindlich beraten lassen") –
   Outline-Button, sichtbar kleiner und zurückhaltender als der Primär-Button. */
.button-container a {
    display: inline-block;
    padding: 9px 16px;
    margin: 4px 10px;
    color: var(--halec-red);  /* Akzentfarbe statt Schwarz, wirkt zurückhaltender */
    font-weight: bold;
    text-decoration: none;  /* Link ohne Unterstrich */
    font-size: 0.95em;
    background-color: #fff;
    border-radius: 22px;
    border: 2px solid var(--halec-red); /* Schmale äußere Umrandung */
    box-shadow: none;  /* Kein 3D-Schatten mehr – bewusst weniger prominent als Primär */
    text-align: center;  /* Textzentrierung */
}

.product-box.make-invisible .button-container a {
  margin: 0px;
}

.button-container a:hover {
    color: #fff;
    background-color: var(--halec-red);
    border: 2px solid var(--halec-red);
}

.button-container a:active {
  transform: translateY(1px) translateX(1px);  /* Bewegung des Buttons nach unten beim Klick */
}

/* Tertiäre Links: reine Text-Links ohne Button-Rahmen, z. B. Produktübersicht,
   Vergleichsseite oder Zurück-Links – dezente Pfeil-Optik statt Button-Umrandung. */
.text-link-container a {
    display: inline-block;
    padding: 6px 4px;
    margin: 4px 10px;
    color: #333;
    font-weight: normal;
    text-decoration: underline;
    font-size: 0.95em;
    background: none;
    border: none;
    box-shadow: none;
    text-align: center;
}

.text-link-container a::after {
    content: " →";
    text-decoration: none;
}

.text-link-container a:hover {
    color: var(--halec-red);
}

.text-link-container a:active {
  transform: translateY(1px) translateX(1px);
}

.bullet-list-container {
  display: flex;
  justify-content: center; /* 2026-08-03, Feedback Halbauer #12: Kasten(s) standen
    am linken Rand statt in der Mitte, da flex-Items ohne justify-content
    per Default am Flex-Start (links) ausgerichtet werden. */
  gap: 5px;
}
@media screen and (max-width: 800px) {
  .bullet-list-container {
    gap: 0px;
  }
  .bullet-list-container {
    flex-direction: column; /* Listen untereinander */
  }
}

.flex-item-margin {
  margin: 6px;
  margin-right: 12px;
  padding-left:  12px;
  padding-right: 12px;
 
  border: 1px solid lightgray;
  border-radius: 15px;
  box-shadow: 
    5px 5px 2px rgba(0, 0, 0, 0.2);
}

.image-wrapper {
    position: relative;
    display: inline-block;
    max-width: 100%;
    font-size: 1em; /* Basis für skalierende Schrift */
}

.responsive-image {
    width: 90%;
    height: auto;
    display: block;
}

.text-overlay {
    position: absolute;
    bottom: 0%;
    right: 15%;
    background: rgba(246, 195, 194, 0.88); /* helles, entsättigtes Rot (Tint von #e03834), 2026-07-24 statt Gelb */
    color: black;
    padding: 0.5em 1em;
    border: 1px solid lightgray;

    font-size: 17px;
    font-style: italic;

    border-radius: 5px;
    white-space: nowrap;
}

/* Rein dekorative Kontextfotos (Produktion/Bestückung/Service/Startseite, ergänzt 2026-07-24):
   Auf kleinen Bildschirmen deutlich verkleinert, damit der Fließtext Vorrang behält.
   !important überstimmt bewusst die inline gesetzten Desktop-Breiten der einzelnen Bilder
   sowie ggf. .floatLeft (auch dessen eigene, im Theme verschachtelte Mobile-Regel).

   Korrektur 2026-07-24: Eine reine max-width-Prozentregel reichte bei den hochformatigen
   Fotos (Bestückung/Produktion, Seitenverhältnis ~1:2.6) nicht aus – 45% Breite ergab dort
   trotzdem rund 400px Höhe, weil die Breite bei Hochkantbildern die Höhe kaum begrenzt.
   Jetzt zusätzlich über max-height gedeckelt und auf Mobile nicht mehr neben, sondern als
   kleines, zentriertes Bild über dem Text platziert (kein Textumfluss in schmaler Spalte). */
@media screen and (max-width: 600px) {
  .decorative-photo {
    float: none !important;
    display: block !important;
    margin: 0 auto 12px auto !important;
    max-width: 55% !important;
    max-height: 150px !important;
    width: auto !important;
    height: auto !important;
  }
}

/* Full-Bleed-Hilfsklassen (2026-07-26, www.halec-lokal-v9; Korrektur 2026-07-27).
   .article ist jetzt auf 700px Lesebreite begrenzt (siehe helium.css). Diese beiden
   Klassen lassen einzelne Elemente daraus ausbrechen, unabhängig davon wie schmal ihr
   Elternelement gerade ist – funktioniert, weil sich die Breite hier am Viewport (vw)
   orientiert statt am Elternelement.

   .full-bleed     = echte Kante-zu-Kante-Breite (Bilder, Banner, Farbflächen)
   .wide-content    = breiter als Lesetext, aber gedeckelt auf 1100px (Bildergalerien,
                       mehrspaltige Bereiche, Tabellen)

   Korrektur 2026-07-27: Live im Browser (schmale Fensterbreite) getestet und dabei
   festgestellt, dass 100vw auf schmalen Viewports die Breite der Scrollbar mit
   einrechnet, das umgebende Element (body) aber ohne Scrollbar layoutet – dadurch
   verschob sich der Ausbruch auf Mobile um ca. 15px nach links und schnitt links
   sichtbar Bild-/Textinhalt ab (z.B. Startseiten-Hero: "mit der Mikrocontroller..."
   erschien abgeschnitten als "hit der Mikrocontroller..."). Da der Ausbruchseffekt auf
   schmalen Bildschirmen ohnehin nicht gebraucht wird (Inhalte sind dort schon so schmal
   wie der Viewport), werden beide Klassen unter 600px einfach deaktiviert statt den
   vw-Bug zu kompensieren – geringstes Risiko, kein JS nötig. */
@media screen and (min-width: 600px) {
  .full-bleed {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }

  .wide-content {
    width: min(100vw, 1100px);
    margin-left: calc(50% - min(50vw, 550px));
    margin-right: calc(50% - min(50vw, 550px));
  }
}

/* Versionshinweis im Footer (2026-08-05, Wunsch: Tester/Team sollen immer sehen,
   welcher Stand gerade live ist). Quelle: params.siteVersion in config.yaml, dazu
   das Hugo-Build-Datum (now.Format), damit auch ohne manuelle Pflege ersichtlich ist,
   wann zuletzt gebaut wurde. */
.site-version {
  text-align: center;
  font-size: 0.75em;
  color: #666;
  padding: 4px 0 8px 0;
}