/*
Theme Name: Nordlicht Elektro
Theme URI: https://nordlicht-elektro.de/
Author: Jani (via ChatGPT)
Description: Maßgeschneidertes WordPress‑Theme für Nordlicht Elektro in Hamburg. Das Design ist hanseatisch klar, respektvoll und lösungsorientiert und spiegelt die Markenfarben Navy, Petrol, Cyan, Gelb, Ice und Slate wider. Enthält Templates für Startseite, Leistungen, Referenzen, Über uns, Blog und Kontakt und unterstützt barrierearme Gestaltung nach WCAG‑2.1.
Version: 1.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nordlicht-elektro
*/

/*
 * Farbliche Variablen
 * Die Markenfarben werden über CSS‑Variablen definiert, damit sie zentral geändert
 * werden können. So lassen sich Navy, Petrol, Cyan, Gelb, Ice und Slate überall
 * einheitlich einsetzen.
 */
:root {
  --navy: #0B1F3A;
  --petrol: #0E5E6F;
  --cyan: #20C7C4;
  --gelb: #FFC517;
  --ice: #F5F7FA;
  --slate: #4B5563;
  /* Akzentfarbe: Orange für Buttons und besondere Hervorhebungen */
  --accent: #F7931A;
}

/* Basisformatierungen */
body {
  font-family: 'Inter', sans-serif;
  /* Standard-Schriftfarbe: Schwarz. Dadurch sind Texte auf hellen Hintergründen
   * gut lesbar. Der Footer und Header werden separat überschrieben. */
  color: #000;
  background-color: var(--ice);
  margin: 0;
  line-height: 1.6;
}

/* Verberge den Hamburger-Menübutton standardmäßig. Nur auf
 * kleineren Bildschirmen wird er eingeblendet. So können Desktop-Nutzer
 * das Menü immer sehen, und der Button ist nicht klickbar, wenn es
 * keinen Effekt hat. */
.menu-toggle {
  display: none;
}
@media (max-width: 768px) {
  .menu-toggle {
    display: block;
  }
}

/*
 * Set box-sizing globally so that padding and border are included in an
 * element’s total width and height. This prevents content from
 * unintentionally overflowing its parent container, especially on
 * smaller screens where space is limited.
 */
*, *::before, *::after {
  box-sizing: border-box;
}

h1,h2,h3,h4,h5,h6 {
  font-family: 'Manrope', sans-serif;
  margin-top: 0;
  /* Standard-Überschriftenfarbe: Schwarz. Der Hero-Gradient und Footer
   * überschreiben diese Farbe bei Bedarf. */
  color: #000;
}

a {
  color: var(--petrol);
  text-decoration: underline;
}

a:hover,
a:focus {
  color: var(--cyan);
}

button,
input[type="submit"] {
  background-color: var(--accent);
  color: #fff;
  border: none;
  padding: 0.75rem 1.5rem;
  font-family: inherit;
  font-size: 1rem;
  cursor: pointer;
  border-radius: 0.3rem;
  transition: filter 0.3s ease;
}

button:hover,
input[type="submit"]:hover,
button:focus,
input[type="submit"]:focus {
  /* Helle den Akzent beim Hover leicht auf */
  filter: brightness(1.1);
  outline: none;
}

/* Buttons, die als Links ausgeführt werden (Anker mit Klasse .button) */
a.button {
  display: inline-block;
  background-color: var(--accent);
  color: #fff;
  padding: 0.75rem 1.5rem;
  border-radius: 0.3rem;
  font-size: 1rem;
  text-decoration: none;
  transition: filter 0.3s ease;
}

a.button:hover,
a.button:focus {
  color: #fff;
  filter: brightness(1.1);
  text-decoration: none;
}

section {
  padding: 4rem 0;
}

.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

/* Header & Navigation */
header.site-header {
  background-color: var(--navy);
  color: #fff;
  padding: 1rem 0;
  /* Sticky Header: bleibt am oberen Rand beim Scrollen sichtbar. Dadurch
   * verschwindet das Banner nicht mehr. */
  position: sticky;
  top: 0;
  z-index: 1000;
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.site-logo {
  display: flex;
  align-items: center;
}

.site-logo img {
  max-height: 60px;
}

.nav-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1.5rem;
}

.nav-menu a {
  color: #fff;
  text-decoration: none;
  font-weight: 500;
}

.nav-menu a:hover,
.nav-menu a:focus {
  color: var(--cyan);
}

/* Hero Bereich */
/*
 * Hero‑Bereich
 *
 * Der Hero kann nun ein optionales Hintergrundbild haben, das über das
 * Beitragsbild der Startseite gesteuert wird. Der Container sitzt über
 * einer dunkel getönten Overlay‑Fläche, damit Text und Buttons gut
 * lesbar sind. Die Section ist relativ positioniert, damit das
 * Pseudo‑Element die gesamte Fläche abdecken kann.
 */
.hero {
  position: relative;
  background-color: var(--navy);
  /* Hintergrundbild wird inline im HTML gesetzt, falls vorhanden. */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;
  text-align: center;
  padding: 6rem 0;
}

/* Verdunkelungsebene für Hintergrundbilder */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  /* Dunkler semi‑transparenter Overlay, damit der Text kontrastreich bleibt */
  background: rgba(11, 31, 58, 0.6);
  z-index: 0;
}

/* Positioniert den Inhalt über der Overlay‑Ebene */
.hero .container {
  position: relative;
  z-index: 1;
}

.hero .tagline {
  font-size: 2.4rem;
  line-height: 1.2;
}

.hero .subline {
  font-size: 1.25rem;
  margin-top: 1rem;
  margin-bottom: 2rem;
}

  /*
   * Hero‑Foto
   *
   * Wenn der Benutzer ein Beitragsbild für die Startseite festlegt, wird es als
   * „hero-photo“ angezeigt. Dieses Bild füllt die Breite des Containers,
   * behält sein Seitenverhältnis und hat abgerundete Ecken. Es wird
   * automatisch unterhalb des Taglines eingeblendet. Auf kleineren
   * Bildschirmen wird es mit voller Breite dargestellt und skaliert,
   * um das Layout nicht zu sprengen.
   */
  .hero-photo {
    width: 100%;
    height: auto;
    border-radius: 0.5rem;
    margin-bottom: 2rem;
    display: block;
    object-fit: cover;
  }

.hero .cta {
  display: inline-block;
}

/* Gradient‑Text: Aurora Effekt */
.gradient-text {
  background: linear-gradient(135deg, var(--petrol), var(--cyan), var(--gelb));
  -webkit-background-clip: text;
  color: transparent;
}

/* Abschnittstitel */
.section-title {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 2rem;
  font-weight: 600;
}

/* Kartenlayouts */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}

/*
 * Kartenlayout
 *
 * Jede Karte wird als flexibles Spaltenlayout aufgebaut, sodass der Inhalt
 * (Bild, Überschrift, Text, optionaler Button) automatisch gestreckt wird
 * und lange Titel nicht aus dem Container laufen. Der Einsatz von
 * flex-direction: column und height: 100% sorgt dafür, dass alle Karten
 * die gleiche Höhe einnehmen und bei unterschiedlich langen Titeln
 * harmonisch bleiben. Die Elemente können sich selbst anpassen, ohne
 * über den Rand hinauszuragen.
 */
.card {
  background-color: #fff;
  border: 1px solid var(--ice);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  border-radius: 0.5rem;
  padding: 1.5rem;
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/*
 * Ensure that images used as Beitragsbilder (featured images) in cards
 * scale nicely within their container. By setting both width and a fixed
 * height and using object-fit: cover, the image will fill the
 * available space while maintaining its aspect ratio without
 * overflowing. This prevents large images from breaking out of the card
 * boundaries on mobile devices. The bottom margin separates the image
 * from subsequent text.
 */
.card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 0.5rem 0.5rem 0 0;
  margin-bottom: 1rem;
  display: block;
}

.card:hover,
.card:focus-within {
  transform: translateY(-4px);
}

.card h3 {
  margin-top: 0;
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
  /* Lässt lange Wörter umbrechen, damit die Überschrift nicht über den Kartenrand hinausläuft */
  overflow-wrap: anywhere;
  /* Überschriften in Karten schwarz darstellen */
  color: #000;
}

/* Standard-Textfarbe innerhalb von Karten: schwarz für bessere
 * Lesbarkeit auf hellem Hintergrund. */
.card p {
  color: #000;
}

/* Der Inhaltsbereich der Karte dehnt sich, um den Platz einzunehmen.
 * Dadurch wird das "Mehr lesen"-Element an den unteren Rand der Karte gedrückt.
 */
.card .card-content {
  /* Der Inhaltsbereich der Karten nimmt den verfügbaren Platz ein und ordnet
   * seine Kinder vertikal an. So bleibt der "Mehr lesen"‑Link immer am
   * unteren Rand der Karte. */
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

/* Absatz innerhalb des card-content: etwas Abstand nach unten */
.card .card-content > p {
  margin-bottom: 0.5rem;
  flex-shrink: 0;
}

/* Versteckter Text in Referenzkarten (initial ausgeblendet) */
.card .card-content .rest-content {
  margin-top: 0.5rem;
  flex-shrink: 0;
}

/* Der "Mehr lesen"‑Link in Karten wird nach unten gedrückt und erscheint in
 * der Akzentfarbe. */
.card .card-content .read-more-link {
  margin-top: auto;
  color: var(--accent);
  text-decoration: underline;
  font-weight: 500;
  cursor: pointer;
}

/* Wenn der restliche Text geöffnet ist, kann der Link ausgeblendet werden. */
.card .card-content .read-more-link.hidden {
  display: none;
}

/* Schritte */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
}

.step .step-icon {
  font-size: 2rem;
  /* Icons im 4‑Schritte‑Prozess sollen schwarz sein, damit sie auf hellen
   * Hintergründen gut sichtbar bleiben. */
  color: #000;
  margin-bottom: 0.5rem;
  display: inline-block;
}

/*
 * Stelle sicher, dass die Icons innerhalb der Schritte die gleiche
 * Farbe wie ihr Container erben. Ohne diese Regel wird die Farbe
 * möglicherweise von globalen Icon‑Stilen überschrieben. Die
 * inherit‑Direktive sorgt dafür, dass <i>-Elemente den Farbwert
 * aus dem übergeordneten .step-icon übernehmen und somit in
 * den Vier‑Schritte‑Karten ebenfalls schwarz erscheinen.
 */
.step .step-icon i {
  color: inherit;
}
.step {
  background-color: #fff;
  border-radius: 0.5rem;
  padding: 1.5rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

/* FAQ Akkordeon */
.faq details {
  /* Abstand zwischen den FAQ‑Elementen leicht reduzieren, damit Fragen
   * und Antworten gleichmäßig auf der Seite wirken. Ein kleinerer
   * margin-bottom vermeidet zu große Lücken zum nächsten Element. */
  margin-bottom: 0.75rem;
  border: 1px solid var(--ice);
  border-radius: 0.5rem;
  background-color: #fff;
  padding: 1rem;
}

/* Mehr-Lesen-Details in Referenzen-Archiv */
.more-details {
  margin-top: 0.5rem;
}
.more-details summary {
  cursor: pointer;
  color: var(--accent);
  text-decoration: underline;
  font-weight: 500;
}
.more-details[open] summary {
  /* Optional: Hervorhebung, wenn der Abschnitt geöffnet ist */
  color: var(--accent);
}
.more-details .more-content {
  margin-top: 0.5rem;
}

/* Positioniere den "Mehr lesen"-Link in Referenzkarten am unteren Rand
 * der Karte. Durch margin-top:auto wird der <details>-Block nach unten
 * geschoben, sodass der Link nicht mitten im Text steht, sondern
 * immer am Kartenende. */
.card .more-details {
  margin-top: auto;
}

/* Verlinkungen innerhalb von Karten (z.B. Kontaktseite): Gut sichtbar durch
 * Verwendung der Akzentfarbe. */
.card a {
  color: var(--accent);
  text-decoration: underline;
}

.card a:hover,
.card a:focus {
  color: var(--accent);
  text-decoration: underline;
}

.faq summary {
  cursor: pointer;
  font-weight: 600;
  outline: none;
}

/*
 * Reduziere den Abstand zwischen der Frage und der Antwort im FAQ‑Bereich.
 * Standardmäßig haben <p>-Elemente einen relativ großen margin-bottom,
 * was im Akkordeon zu ungleichmäßigen Abständen führen kann. Wir
 * setzen die oberen und unteren Ränder enger, damit die Abstände
 * zwischen Fragen, Antworten und den folgenden Elementen konsistent
 * bleiben.
 */
.faq details p {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

/* Footer */
footer {
  background-color: var(--navy);
  color: #fff;
  padding: 2rem 0;
}

footer .footer-inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
}

footer a {
  color: #fff;
  text-decoration: underline;
}

footer a:hover,
footer a:focus {
  color: #fff;
  text-decoration: underline;
}

/* Überschriften im Footer ebenfalls weiß darstellen */
footer h1,
footer h2,
footer h3,
footer h4,
footer h5,
footer h6 {
  color: #fff;
}

/* Standard‑Farbe für Font‑Awesome Icons auf der gesamten Seite. Icons sollen
 * außerhalb von Header und Footer schwarz erscheinen, um die Lesbarkeit auf
 * hellen Hintergründen zu gewährleisten. Im Footer bleiben sie weiß, im
 * Header bleiben sie weiß (siehe weiter unten). */
.fa,
.fas,
.far,
.fal,
.fab {
  color: #000;
}

footer .fa,
footer .fas,
footer .far,
footer .fal,
footer .fab {
  color: #fff;
}

/* Überschreibe Icon-Farbe innerhalb des Headers: Das Menü-Icon (Hamburger)
 * sowie sonstige Icons im Kopfbereich sollen weiß bleiben. */
header .fa,
header .fas,
header .far,
header .fal,
header .fab {
  color: #fff;
}

/* ------------------------------------------
 * Spezifische Styles für die Kontaktseite
 * ------------------------------------------
 * Auf der Kontaktseite sollen Telefonnummern und E‑Mail‑Adressen deutlich
 * hervorgehoben werden. Da die Karten einen weißen Hintergrund haben,
 * verwenden wir die Akzentfarbe für Links innerhalb von Karten.
 */
.page-template-kontakt .card a {
  color: var(--accent);
  text-decoration: underline;
}

.page-template-kontakt .card a:hover,
.page-template-kontakt .card a:focus {
  color: var(--accent);
  text-decoration: underline;
}

/* Das Formular auf der Kontaktseite soll linksbündig bleiben und nicht
 * zentriert werden. */
.page-template-kontakt form {
  /* Kontaktseite Formular: flexible Anordnung, zwei Felder pro Zeile */
  text-align: left;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.page-template-kontakt .card {
  text-align: left;
}

/* Standard-Felder auf der Kontaktseite: zwei Felder pro Zeile */
.page-template-kontakt form p {
  flex: 1 1 calc(50% - 0.5rem);
  margin: 0 0 0.75rem 0;
  text-align: left;
}

/* Felder mit voller Breite (z.B. Nachricht und Absenden) */
.page-template-kontakt form p.full {
  flex: 1 1 100%;
}

/*
 * Abstand zwischen Filterknöpfen (Referenzen). Der Nutzer wünschte, dass die
 * Buttons im Referenzfilter weiter auseinander stehen. Durch ein
 * horizontales gap auf dem Container oder durch margin an den Buttons
 * lässt sich dies leicht realisieren. Wir nutzen margin-right für
 * einfache Abwärtskompatibilität.
 */
.filters .button {
  margin-right: 0.5rem;
}
.filters .button:last-child {
  margin-right: 0;
}

/* Neue Filter-Links in der Referenzen-Übersicht. Sie sollen nicht wie
 * Buttons aussehen, sondern wie normale Links mit Abstand zwischen den
 * Kategorien. */
.filters .filter-link {
  margin-right: 1rem;
  color: var(--accent);
  text-decoration: underline;
  font-weight: 500;
}
.filters .filter-link:last-child {
  margin-right: 0;
}

.filters .filter-link:hover,
.filters .filter-link:focus {
  color: var(--accent);
  text-decoration: underline;
}

/* Kontakt‑Teaser auf der Startseite */
/*
 * Der Kontaktabschnitt auf der Startseite enthält nun ein kompaktes
 * Kontaktformular. Diese Styles sorgen dafür, dass Formularfelder
 * breit genug sind und sich harmonisch in die Seite einfügen. Die
 * Texte des Trust‑Elements und Kontakt-Teaser werden zentriert
 * dargestellt. Erfolgsmeldungen heben sich farblich ab. */
/* Kontaktformular (Startseite): verwende Flexbox, um zwei Felder pro Zeile
 * anzuordnen. Die Formulare werden linksbündig ausgerichtet und haben
 * einen Abstand zwischen den Feldern. Der Container bleibt zentriert
 * durch auto-Margen. */
.contact-teaser form {
  margin: 1.5rem auto 0;
  max-width: 600px;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  text-align: left;
}

/* Standard-Stil für einzelne Felder innerhalb des Kontaktformulars */
.contact-teaser form p {
  flex: 1 1 calc(50% - 0.5rem);
  margin: 0 0 0.75rem 0;
}

/* Volle Breite für Nachrichtenfeld und den Button */
.contact-teaser form p.full {
  flex: 1 1 100%;
}

.contact-teaser input[type="text"],
.contact-teaser input[type="email"],
.contact-teaser textarea {
  width: 100%;
  border: 1px solid var(--ice);
  padding: 0.5rem;
  border-radius: 0.25rem;
  font-family: inherit;
  font-size: 1rem;
}

.contact-teaser textarea {
  resize: vertical;
  min-height: 120px;
}

.contact-teaser input[type="submit"] {
  width: auto;
  margin-top: 0.5rem;
}

.contact-teaser .success-message {
  color: var(--petrol);
  font-weight: bold;
  text-align: center;
  margin-bottom: 1rem;
}

/* Nur die Überschrift im Kontaktbereich wird zentriert. Andere Texte werden
 * linksbündig dargestellt. */
.contact-teaser .section-title {
  text-align: center;
}

/* Vertrauens- und Infotexte im Kontaktbereich linksbündig */
.contact-teaser p {
  /* Texte innerhalb des Kontakt‑Teasers linksbündig ausrichten.
   * Ohne diese Regel könnte ein globales Text‑Zentrieren aus anderen
   * Styles geerbt werden. */
  text-align: left;
}

/* Kontaktteaser: Der unmittelbare Absatz (Intro‑Text) soll mittig
 * dargestellt werden. Damit bleibt das Formular linksbündig. */
/* Zentriere den ersten Absatz innerhalb des Kontakt‑Teasers. Da unser
 * Markup einen Container einschließt, selektieren wir den Absatz, der
 * unmittelbar innerhalb des Containers steht. */
.contact-teaser .container > p {
  text-align: center;
}

/* Notfallseite: Links (insbesondere Telefonnummer) sollen in der Akzentfarbe
 * erscheinen, damit sie sich deutlich vom Hintergrund abheben. */
/* Notfallseite: Links (z. B. Telefonnummer) verwenden immer die Akzentfarbe.
 * Der !important-Flag stellt sicher, dass kein anderer Style die Farbe
 * überschreibt (z. B. globale Linkfarben oder helle Hintergründe). */
.page-template-notfall a {
  color: var(--accent) !important;
  text-decoration: underline;
}

/* Beim Überfahren der Links auf der Notfallseite bleibt die Farbe gleich
 * (Akzentfarbe), analog zur Kontaktseite. */
.page-template-notfall a:hover,
.page-template-notfall a:focus {
  color: var(--accent) !important;
}

/* Stelle sicher, dass Telefonnummern auf der Notfallseite dauerhaft in der
 * Akzentfarbe erscheinen. Der Selektor [href^="tel"] greift auf alle
 * Telefonlinks zu. Sowohl im Normalzustand als auch beim Hover bleibt
 * die Farbe gleich. */
.page-template-notfall a[href^="tel"] {
  color: var(--accent) !important;
  text-decoration: underline;
}

.page-template-notfall a[href^="tel"]:hover,
.page-template-notfall a[href^="tel"]:focus {
  color: var(--accent) !important;
}

/* Eine generische Klasse, um Links mit der Akzentfarbe zu versehen. Diese
 * Klasse kann an beliebigen <a>-Elementen eingesetzt werden (z. B. auf
 * der Notfallseite oder an anderen Stellen), um sicherzustellen, dass
 * der Link dauerhaft in der Akzentfarbe (#F7931A) erscheint. */
.accent-link {
  color: var(--accent) !important;
  text-decoration: underline;
}

.accent-link:hover,
.accent-link:focus {
  color: var(--accent) !important;
}

/*
 * Einheitliche Ausrichtung der Formularfelder und Labels im Kontaktbereich
 * (Startseite und Kontaktseite). Alle Labels werden als Block angezeigt
 * und Eingabefelder füllen die verfügbare Breite aus. Die
 * linke Ausrichtung sorgt dafür, dass die Felder exakt untereinander
 * erscheinen, unabhängig von globalen Zentrierungen.
 */
.contact-teaser form label,
.page-template-kontakt form label {
  display: block;
  margin-bottom: 0.25rem;
}

.contact-teaser form p,
.page-template-kontakt form p {
  margin: 0 0 0.75rem 0;
  text-align: left;
}

/* Einleitungstext auf der Startseite */
.intro {
  padding: 2rem 0;
}

.intro-text {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--slate);
  text-align: left;
}

/* Trust Text Stil: fett und linksbündig */
.trust-text {
  font-weight: 600;
  margin-bottom: 1rem;
  text-align: left;
}

/* Mobile Navigation */
@media (max-width: 768px) {
  /* Die Navigation wird zunächst ausgeblendet. Wenn sie geöffnet ist,
   * erscheint sie unterhalb des Headers und überlagert nicht den gesamten
   * Bildschirm. Durch position:absolute richtet sie sich am Header aus.
   */
  nav.primary-navigation {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--navy);
    z-index: 999;
  }
  nav.primary-navigation.is-open {
    display: block;
  }
  .nav-menu {
    flex-direction: column;
    gap: 0;
  }

  /* Links im mobilen Menü erhalten etwas Abstand und größere Schrift. */
  .nav-menu a {
    display: block;
    padding: 0.75rem 1rem;
    font-size: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
  }
  .nav-menu a:first-child {
    border-top: none;
  }
  .nav-menu a:hover,
  .nav-menu a:focus {
    color: var(--cyan);
  }
  .menu-toggle {
    background: none;
    border: none;
    color: white;
    font-size: 2rem;
  }
}

/* Responsive Anpassungen */
@media (max-width: 600px) {
  .hero .tagline {
    font-size: 2rem;
  }
  .hero {
    padding: 4rem 0;
  }
}

/* Partnerlogos als Marquee */
/*
 * Die Partnerlogos werden nun in einem horizontalen Laufband dargestellt. Der
 * Container .partner-marquee verbirgt überflüssigen Inhalt mittels
 * overflow: hidden. Innerhalb bewegt sich der Wrapper
 * .partner-marquee-inner kontinuierlich von rechts nach links. Durch
 * Verdopplung der Logos wird ein nahtloser Loop erzeugt. Die Logos
 * werden farbig dargestellt, ohne Graustufenfilter, um die Marken
 * erkennbar zu lassen. Sie sind responsiv und skalieren auf eine
 * einheitliche Höhe. Der Abstand zwischen den Logos wird mit gap
 * festgelegt.
 */
.partner-marquee {
  overflow: hidden;
  width: 100%;
  padding: 2rem 0;
  position: relative;
}

.partner-marquee-inner {
  display: flex;
  align-items: center;
  gap: 4rem;
  /* Animation sorgt dafür, dass der gesamte Inhalt kontinuierlich
   * nach links scrollt. Die Dauer lässt sich je nach Anzahl der
   * Logos anpassen. */
  animation: partner-scroll 30s linear infinite;
}

@keyframes partner-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.partner-marquee .partner-logo {
  display: inline-block;
  height: 60px;
  width: auto;
  max-height: 60px;
  object-fit: contain;
}