/* ============================================================
   Vorschlag: Content-Bereich Auffrischung (Kopf/Hero bleibt unberührt)
   Nicht-destruktiv: reine Ergänzung, überschreibt nichts in style.css
   direkt, nutzt nur die spätere Ladereihenfolge (Cascade).
   ============================================================ */

/* ---------- 1) Drei-Karten-Bereich: echtes Grid statt Float ----------
   Vorher: float:left + feste 495px-Breite liess eine dritte Karte
   verwaist in eigener Zeile stehen. Jetzt: gleichmässiges Umbrechen,
   beliebig viele Karten. */
#boxcontent {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  padding: 0 0 50px;
}
#boxcontent article {
  float: none;
  width: calc(50% - 14px);
  margin-right: 0;
  position: relative;
}
@media (max-width: 915px) {
  #boxcontent article { width: 100%; margin: 0; }
}
/* Bleibt eine Karte allein in der letzten Zeile übrig (ungerade Anzahl),
   nimmt sie die volle Breite ein statt halbleer stehen zu bleiben. */
#boxcontent article:nth-last-of-type(1):nth-of-type(odd) {
  width: 100%;
}

/* Dünner roter Akzentstreifen oben je Karte - greift die Markenfarbe
   auf, ohne die ruhige Creme-Optik zu stören. */
#boxcontent article {
  border-top: 3px solid #bf0000;
}

/* Kleines "Neu"-Badge für die frisch hinzugekommene Karte */
#boxcontent article.is-new::after {
  content: "NEU";
  position: absolute;
  top: -12px;
  right: 18px;
  background: #bf0000;
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: .04em;
  padding: 4px 10px;
  border-radius: 100px;
  box-shadow: 0 3px 8px rgba(0,0,0,.25);
}

/* Überschriften, die zugleich der Link sind (ersetzt die frühere separate
   "Störung aufgeben" / "Von der Fabrik..."-Schaltfläche darunter) - im
   selben Stil wie die Navigations-Links: dunkle Box, Grossbuchstaben,
   beim Hover rot. */
#boxcontent article h3 a {
  display: inline-block;
  font-family: 'Open Sans', sans-serif;
  text-transform: uppercase;
  color: #EBE8DE;
  background-color: #333333;
  font-weight: bold;
  font-size: 15px;
  line-height: 1.35;
  padding: 8px 14px;
  border-radius: 10px 0 6px 0;
  transition: all .25s ease;
}
#boxcontent article h3 a:hover {
  color: #bf0000;
}

/* Canvas verbreitern, damit die Logo-Reihe unter "Weiterführende Links"
   nicht umbricht (5 Logos + Abstände brauchen mehr als die
   ursprünglichen 900px). Bricht bei schmalen Fenstern weiterhin auf
   600px um (siehe @media 915px in style.css). */
#four_columns {
  width: 100%;
  max-width: 1060px;
  box-sizing: border-box;
}

/* ---------- 2) Section-Überschriften: gleiche Sprache wie die
   bestehenden roten Unterstreichungen der Unterabschnitte ---------- */
#four_columns h2, #text_columns h3 {
  font-size: 24px;
  font-weight: bold;
  border-bottom: none;
  padding: 0 0 10px;
  margin: 0 0 26px;
  border-bottom: 2px solid #bf0000;
  display: inline-block;
}

/* ---------- 3) "Weiterführende Links": eigene Kartenoptik statt
   frei schwebender Logos ---------- */
#four_columns .img-item .ib-btn-row {
  background: rgba(0,0,0,.025);
  border: 1px solid #ece6d5;
  border-radius: 10px;
  padding: 20px 22px;
  align-items: center;
  gap: 22px;
}

/* ---------- 4) Kompetenzfelder: Chips statt reiner Aufzählung ---------- */
#four_columns .img-item .ib-competencies {
  gap: 12px 16px;
}
#four_columns .img-item .ib-competencies li {
  background: #faf8ef;
  border: 1px solid #ece6d5;
  border-radius: 8px;
  padding: 11px 14px 11px 32px;
  font-weight: 600;
  font-size: 14.5px;
}
#four_columns .img-item .ib-competencies li::before {
  top: 15px;
  left: 14px;
}

/* ---------- 5) Etwas mehr Luft zwischen den Content-Abschnitten ---------- */
#four_columns .img-item { margin-bottom: 34px; }

/* ---------- 6) PV-Anlagen-Ampel: klickbarer Punkt vor "Login" im Footer statt des
   sonst ueblichen grauen Aufzaehlungspunkts. Farbe je letztem FusionSolar-Status (siehe
   pv-status.php); Klick stoesst eine sofortige Pruefung an (5-Minuten-Bremse serverseitig). */
footer .wrapper .column.midlist ul li.ib-pv-li {
  position: relative;
  background: none; /* eigenes, echtes Element statt Hintergrundbild-Punkt */
  /* padding-left bewusst unveraendert (wie bei AGB/Datenschutz/Impressum) - "Login"
     bleibt dadurch exakt gleich eingerueckt, der Punkt wird absolut positioniert. */
}
.ib-pv-dot {
  /* Gleiche Groesse/Position wie der graue Hintergrundbild-Punkt bei AGB/Datenschutz/
     Impressum (dort: 6x6px SVG-Kreis, "background-position: left 6px" = 0px vom linken,
     6px vom oberen Rand) - damit alle vier Punkte optisch gleich aussehen. */
  position: absolute;
  left: 0;
  top: 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ababab;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  transition: background-color .2s ease, opacity .2s ease;
}
.ib-pv-dot:hover { filter: brightness(1.2); }
.ib-pv-dot:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ib-pv-dot.ib-pv-ok { background: #2e7d32; }
.ib-pv-dot.ib-pv-fehler { background: #bf0000; }
.ib-pv-dot.ib-pv-laedt { background: #ababab; animation: ib-pv-puls 1s ease-in-out infinite; cursor: wait; }
@keyframes ib-pv-puls { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) {
  .ib-pv-dot.ib-pv-laedt { animation: none; opacity: .6; }
}