/* =========================================================
   ELEKTRO-SERVICE AXEL STEINFÜHRER
   Vollständig kommentierte CSS-Version – Feintuning

   Hinweis:
   - Alle Maße/Farben/Positionen wurden aus der vorhandenen
     Version übernommen.
   - Es wurden nur Kommentare und Zeilenumbrüche ergänzt.
   - Dadurch bleibt das Erscheinungsbild unverändert.
   ========================================================= */


/* =========================================================
   1. ZENTRALE FARBEN UND GRÖSSEN
   Diese Werte gelten an vielen Stellen der Seite.
   ========================================================= */
:root {
  /* Hauptgrün */
  --green: #079344;

  /* Dunkleres Grün, z. B. Überschriften und Navigation */
  --green-dark: #047d39;

  /* Sehr dunkles Grün, z. B. Hover-Zustand */
  --green-deep: #045c2d;

  /* Standard-Textfarbe */
  --ink: #102038;

  /* Gedämpfte Textfarbe */
  --muted: #46566e;

  /* Helle Linien / Rahmen */
  --line: #d8e5dd;

  /* Sehr heller Hintergrund */
  --soft: #f4f8f5;

  /* Maximale Inhaltsbreite */
  --page: 968px;

  /* Standard-Schatten */
  --shadow: 0 8px 24px rgba(7, 70, 35, .12);
}


/* =========================================================
   2. ALLGEMEINE GRUNDEINSTELLUNGEN
   ========================================================= */

/* Sorgt dafür, dass Padding und Rahmen in Breiten enthalten sind */
* {
  box-sizing: border-box;
}

/* Weiches Scrollen bei Sprungmarken */
html {
  scroll-behavior: smooth;
}

/* Gesamte Seite */
body {
  margin: 0;
  background: #eef3ef;
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.35;
}

/* Links übernehmen zunächst die Textfarbe */
a {
  color: inherit;
}

/* Zentrale Inhaltsbreite */
.container {
  width: min(calc(100% - 50px), var(--page));
  margin-inline: auto;
}

/* Unsichtbarer "Zum Inhalt springen"-Link für Tastaturnutzer */
.skip {
  position: absolute;
  left: -9999px;
}

/* Wird sichtbar, wenn er per Tastatur fokussiert wird */
.skip:focus {
  left: 12px;
  top: 12px;
  background: #fff;
  padding: 10px;
  z-index: 1000;
}

/* Weißer Hauptseitenrahmen mit grünem Rand */
.page-frame {
  width: min(100%, 1024px);
  margin: 0 auto;
  background: #fff;
  border: 5px solid var(--green);
  box-shadow: 0 0 28px rgba(5, 70, 35, .08);
}


/* =========================================================
   3. KOPFBEREICH / HEADER
   Logo, grüner Balken, Firmenname, Kontaktdaten,
   Jubiläumszeichen
   ========================================================= */

/* Gesamter Kopfbereich */
.site-header {
  background: #fff;
}

/* Oberer weißer Headerbereich */
.identity-wrap {
  position: relative;
  height: 148px;
  overflow: visible;
  background: #fff;
  border-top: 0;
}

/* Grüner horizontaler Balken hinter dem Logo */
.identity-band {
  position: absolute;
  left: 0;
  right: 0;

  /* Vertikale Position des grünen Balkens */
  top: 28px;

  /* Höhe des grünen Balkens */
  height: 42px;

  background: linear-gradient(90deg, var(--green-dark), var(--green));
  z-index: 0;
}

/* Bezugsebene für alle Header-Elemente */
.identity {
  position: relative;
  height: 148px;
  z-index: 1;
}

/* Bereich für Logo und Firmenname */
.identity-main {
  position: absolute;

  /* Gesamter Logo-/Namensblock von links */
  left: 54px;

  top: 0;
  width: 430px;
  height: 148px;
  text-decoration: none;
  display: block;
}

/* Weißer ovaler Ausschnitt hinter dem Logo */
.identity-main::before {
  content: "";
  position: absolute;

  /* Position des weißen Ausschnitts
     left größer  = weiter nach rechts
     left kleiner = weiter nach links
     top größer   = weiter nach unten
     top kleiner  = weiter nach oben */
  left: 128px;
  top: -1px;

  /* Größe des weißen Ausschnitts.
     Das Oval ist jeweils 4 px größer als das Logo,
     dadurch entstehen rechnerisch etwa 2 px weißer Rand
     auf jeder Seite. */
  width: 156px;
  height: 78px;

  background: #fff;
  border-radius: 50%;
  z-index: 0;
}

/* Firmenlogo */
.identity-logo {
  position: absolute;

  /* Logo horizontal:
     größerer Wert = weiter nach rechts */
  left: 130px;

  /* Logo vertikal:
     größerer Wert = weiter nach unten */
  top: 1px;

  /* Aktuelle Darstellungsgröße des Logos */
  width: 152px;
  height: 74px;

  object-fit: contain;
  object-position: 50% 50%;
  background: transparent;
  padding: 0;
  z-index: 1;
}

/* Block mit "Elektro-Service" und "ALLER ART" */
.identity-name {
  position: absolute;

  /* Firmenname horizontal */
  left: 0;

  /* Firmenname vertikal */
  top: 76px;

  width: 430px;
  line-height: .88;
  text-align: left;
}

/* Große Zeile "Elektro-Service" */
.identity-name span {
  display: block;
  color: var(--green-dark);

  /* Schriftgröße Elektro-Service */
  font-size: 3.25rem;

  font-weight: 900;
  letter-spacing: -.055em;
  white-space: nowrap;
}

/* Kleine Zeile "ALLER ART" */
.identity-name small {
  display: block;
  color: #111;
  letter-spacing: .36em;

  /* Schriftgröße ALLER ART */
  font-size: .92rem;

  font-weight: 900;
  text-align: center;

  /* Abstand nach oben */
  margin-top: 8px;

  width: 315px;
}

/* Telefonnummer, E-Mail und Adresse */
.contact-line {
  position: absolute;

  /* Linke Startposition des gesamten Kontaktblocks */
  left: 510px;

  /* Abstand vom rechten Rand */
  right: 130px;

  /* Vertikale Position des Kontaktblocks */
  top: 91px;

  display: grid;
  grid-template-columns: max-content max-content max-content;

  /* Abstand Telefon / E-Mail / Adresse */
  gap: 24px;

  align-items: start;
  justify-content: start;

  /* Schriftgröße Kontaktdaten */
  font-size: .77rem;

  color: #26364c;
  line-height: 1.25;
}

/* Telefon- und E-Mail-Link ohne Unterstreichung */
.contact-line a {
  text-decoration: none;
  white-space: nowrap;
}

/* Adresse nicht umbrechen */
.contact-line > span {
  white-space: nowrap;
}

/* Kleine grüne Symbole vor Telefon, Mail, Adresse */
.contact-line span span,
.contact-line a span {
  color: var(--green);
  font-size: 1.12rem;
  font-weight: 700;
}

/* Dynamisches Jubiläumszeichen – Firmenalter seit 1994 */
.jubilee {
  position: absolute;

  /* Abstand von rechts */
  right: 19px;

  /* Abstand von oben */
  top: 10px;

  width: 92px;
  height: 92px;

  border: 2px solid #d9aa49;
  border-radius: 50%;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  background: #fffdf8;
  color: #9d6a18;
  line-height: .9;

  box-shadow:
    inset 0 0 0 3px #fff,
    0 2px 8px rgba(83, 57, 13, .12);
}

/* Große, automatisch berechnete Firmenjahre */
.jubilee strong {
  font-size: 2.25rem;
}

/* Wort "JAHRE" */
.jubilee > span:not(.laurel) {
  font-size: .67rem;
  font-weight: 900;
  letter-spacing: .06em;
}

/* Feste Angabe "SEIT 1994" */
.jubilee small {
  font-size: .46rem;
  font-weight: 800;
  margin-top: 4px;
}

/* Linker Lorbeer */
.laurel {
  position: absolute;
  left: -10px;
  color: #cf9428;
  font-size: 1.9rem;
  transform: rotate(-35deg);
}

/* Rechter Lorbeer */
.laurel.right {
  left: auto;
  right: -10px;
  transform: scaleX(-1) rotate(-35deg);
}


/* =========================================================
   4. NAVIGATION
   ========================================================= */

/* Grüner Navigationsbalken */
.nav-bar {
  background: linear-gradient(90deg, var(--green-dark), var(--green));
  border-top: 1px solid rgba(255, 255, 255, .35);
  border-bottom: 1px solid rgba(0, 0, 0, .08);
}

/* Ausrichtung der Menüpunkte */
.nav-bar nav {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  flex-wrap: nowrap;
}

/* Einzelne Menüeinträge */
.nav-bar a {
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  font-size: .82rem;
  padding: 8px 13px;
  border-radius: 4px;
  white-space: nowrap;
}

/* Aktiver Menüpunkt / Hover */
.nav-bar a:hover,
.nav-bar a:focus,
.nav-bar a.active {
  background: #fff;
  color: var(--green-dark);
}



/* =========================================================
   4A. MOBILE NAVIGATION AUF DESKTOP AUSBLENDEN
   =========================================================
   Die Smartphone-Navigation besitzt ein eigenes Hamburger-Menü.
   Auf Desktop- und Tabletbreiten oberhalb von 760 Pixel bleibt
   ausschließlich die normale Hauptnavigation sichtbar.
   ========================================================= */
/*
   Wichtig: Die Regel ist absichtlich genauer als ".nav-bar nav" weiter oben.
   Dadurch kann die allgemeine Desktop-Regel "display:flex" das mobile
   Menü nicht versehentlich wieder sichtbar machen.
*/
.nav-bar nav.mobile-nav {
  display: none;
}

/* =========================================================
   5. HERO / BANNER
   Großes Kabeltrommelbild und Textkasten
   ========================================================= */

/* Gesamter Bannerbereich */
.hero {
  position: relative;

  /* Höhe des Banners */
  height: 304px;

  overflow: hidden;
  background: #ddd;
}

/* Festes Hintergrundbild */
.hero-photo {
  position: absolute;
  inset: 0;

  background-image: url('assets/hero-kabelverlegung.jpg');

  /* Bild füllt den Bereich */
  background-size: cover;

  /* Bildausschnitt innerhalb des Banners */
  background-position: center 49%;
}

/* Leichte Aufhellung auf der linken Bildseite */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, .05),
    rgba(255, 255, 255, 0) 52%
  );
}

/* Bezugsebene für Banner-Inhalt */
.hero-content {
  position: relative;
  z-index: 2;
  height: 304px;
}

/* Weiß-transparenter Textkasten im Banner */
.hero-card {
  position: absolute;

  /* Abstand vom linken Rand */
  left: 20px;

  /* Abstand vom oberen Rand */
  top: 62px;

  /* Breite des Kastens */
  width: 348px;

  /* Transparenter weißer Hintergrund */
  background: rgba(255, 255, 255, .93);

  /* Innenabstand */
  padding: 14px 14px 15px;

  box-shadow: var(--shadow);
}

/* Hauptüberschrift im Banner */
.hero-card h1 {
  margin: 0 0 9px;
  color: var(--green-dark);

  /* Schriftgröße "Starke Technik ..." */
  font-size: 1.90rem;

  line-height: 1.04;
  letter-spacing: -.035em;
}

/* Beschreibungstext im Banner */
.hero-card p {
  margin: 0 0 13px;
  color: #1c2940;

  /* Schriftgröße Beschreibung */
  font-size: .82rem;

  line-height: 1.32;
}

/* Allgemeiner grüner Button */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;

  background: linear-gradient(90deg, var(--green-dark), var(--green));
  color: #fff;
  text-decoration: none;

  border-radius: 4px;
  padding: 11px 18px;

  font-weight: 900;
  font-size: .84rem;

  box-shadow: 0 4px 12px rgba(5, 123, 57, .16);
}

/* Button bei Mausberührung */
.btn:hover {
  background: var(--green-deep);
}


/* =========================================================
   6. LEISTUNGSBEREICHE
   ========================================================= */

.services,
.modernize,
.projects {
  background: #fff;
}

.services {
  padding: 12px 0 18px;
}

/* Überschriftenbereich */
.section-heading {
  margin-bottom: 10px;
}

/* Zweispaltige Überschrift */
.split-heading {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: end;
}

/* Große Abschnittsüberschriften */
.section-heading h2,
.projects-head h2 {
  margin: 0;
  font-size: 2.16rem;
  line-height: 1.03;
  letter-spacing: -.04em;
}

/* Grüne Hervorhebung innerhalb der Überschriften */
.section-heading h2 span,
.projects-head h2 span {
  color: var(--green-dark);
}

/* Beschreibung rechts neben Leistungsüberschrift */
.section-heading p {
  margin: 0;
  color: #40516c;
  font-size: .78rem;
  line-height: 1.4;
}

/* 4 Spalten für die Leistungsbilder */
.service-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 9px;
}

/* Einzelne Leistungskachel */
.service-card {
  position: relative;
  height: 162px;
  overflow: hidden;
  background: #28332d;
}

/* Bild in der Leistungskachel */
.service-card > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Dunkler Verlauf unten für bessere Lesbarkeit */
.service-card::after {
  content: "";
  position: absolute;
  inset: 44% 0 0;
  background: linear-gradient(
    transparent,
    rgba(14, 23, 20, .96)
  );
}

/* Text unten in einer Leistungskachel */
.service-caption {
  position: absolute;
  z-index: 2;
  left: 10px;
  right: 9px;
  bottom: 9px;

  color: #fff;

  display: grid;
  grid-template-columns: 27px 1fr;
  gap: 7px;
  align-items: start;
}

/* Symbol in einer Leistungskachel */
.service-caption .icon {
  font-size: 1.45rem;
  line-height: 1.1;
}

/* Titel einer Leistung */
.service-caption h3 {
  margin: 0 0 2px;
  font-size: .78rem;
  line-height: 1.12;
}

/* Kleiner Beschreibungstext */
.service-caption p {
  margin: 0;
  font-size: .65rem;
  line-height: 1.28;
  color: #fff;
}

/* Spezielle dunkle Shop-Kachel */
.service-shop {
  background: linear-gradient(135deg, #5e6762, #353c38);
}

/* Großes transparentes Warenkorb-Symbol */
.service-shop .shop-art {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 4.1rem;
  filter: grayscale(1);
  opacity: .2;
}

/* Klickfläche über der gesamten Shop-Kachel */
.service-shop > a {
  position: absolute;
  inset: 0;
  z-index: 5;
}

/* Weißes Blitz-Symbol bei Elektroinstallation
   ---------------------------------------------------------
   width  = Breite des Blitzes
   height = Höhe des Blitzes

   Wenn der Blitz größer werden soll, beide Werte erhöhen,
   z. B. auf 22px oder 24px.
*/
.icon-blitz{
  width:20px;
  height:20px;
  display:block;
  fill:#fff;
}

/* Stellt zusätzlich sicher, dass der eigentliche
   SVG-Pfad weiß dargestellt wird. */
.icon-blitz path{
  fill:#fff;
}


/* =========================================================
   7. MODERNISIERUNG / VORHER-NACHHER
   ========================================================= */

.modernize {
  padding: 5px 0 16px;
}

/* Grünes Wort innerhalb der Überschrift */
.modern-heading h2 b {
  color: var(--green-dark);
  font-weight: 700;
}

.modern-heading p {
  margin-top: 2px;
}

/* Hauptaufteilung:
   links Vorher/Nachher, rechts Textkasten */
.modern-layout {
  display: grid;
  grid-template-columns: minmax(0, 3fr) 260px;
  gap: 13px;
  align-items: stretch;
}

/* Vorher/Nachher nebeneinander */
.comparison {
  display: grid;
  grid-template-columns: 1fr 44px 1fr;
  align-items: center;
  min-width: 0;
}

/* Bildrahmen Vorher/Nachher */
.comparison figure {
  position: relative;
  margin: 0;
  height: 246px;
  overflow: hidden;
  background: #eee;
  box-shadow: var(--shadow);
}

/* Vorher/Nachher Bilder */
.comparison img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Kleine Beschriftung "Vorher" / "Nachher" */
.tag {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;

  color: #fff;
  padding: 6px 11px;
  border-radius: 4px;

  font-size: .68rem;
  font-weight: 900;
}

/* Farbe "Vorher" */
.tag.before {
  background: #3d433f;
}

/* Farbe "Nachher" */
.tag.after {
  background: var(--green);
}

/* Runde Pfeilfläche zwischen den Bildern */
.compare-arrow {
  position: relative;
  z-index: 3;

  width: 44px;
  height: 44px;
  border-radius: 50%;

  display: grid;
  place-items: center;

  background: #fff;
  color: var(--green);
  border: 2px solid var(--green);

  font-size: 2.25rem;
  line-height: 1;
  margin: 0 -1px;

  box-shadow: 0 4px 10px rgba(0, 0, 0, .12);
}

/* Rechter Informationstext */
.modern-copy {
  background: linear-gradient(135deg, #f0faf3, #e2f3e8);
  padding: 21px 20px;

  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Überschrift im Modernisierungs-Textkasten */
.modern-copy h3 {
  margin: 0 0 10px;
  color: var(--green-dark);
  font-size: 1.45rem;
  line-height: 1.02;
}

/* Text im Modernisierungs-Textkasten */
.modern-copy p {
  margin: 0 0 16px;
  color: #40516c;
  font-size: .78rem;
  line-height: 1.42;
}

/* Button etwas kompakter */
.modern-copy .btn {
  align-self: flex-start;
  padding: 10px 15px;
}


/* =========================================================
   8. PROJEKTGALERIE
   ========================================================= */

.projects {
  padding: 0 0 14px;
}

/* Überschrift + Referenzen-Link */
.projects-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  margin-bottom: 8px;
}

/* Überschrift Projektbereich */
.projects-head h2 {
  font-size: 1.75rem;
}

/* Link "Weitere Referenzen" */
.projects-head > a {
  color: var(--green-dark);
  text-decoration: none;
  border: 1px solid var(--green);
  padding: 7px 12px;
  border-radius: 4px;
  font-weight: 800;
  font-size: .68rem;
}

/* 5 Projektbilder nebeneinander */
.project-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 7px;
}

/* Einzelnes Projektbild */
.project-grid figure {
  position: relative;
  margin: 0;
  height: 143px;
  overflow: hidden;
  background: #eee;
}

/* Bildformat */
.project-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Text erscheint beim Darüberfahren */
.project-grid figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

  padding: 18px 9px 7px;
  color: #fff;
  font-size: .65rem;
  font-weight: 800;

  background: linear-gradient(
    transparent,
    rgba(0, 0, 0, .72)
  );

  opacity: 0;
  transition: .2s;
}

/* Projektbeschreibung sichtbar bei Hover */
.project-grid figure:hover figcaption {
  opacity: 1;
}


/* =========================================================
   9. VERTRAUENSLEISTE / KONTAKTAUFRUF
   ========================================================= */

.trust {
  background: linear-gradient(180deg, #fff, #f0f6f2);
  border-top: 1px solid #e0ebe4;
}

/* Vier Bereiche nebeneinander */
.trust-grid {
  min-height: 80px;
  display: grid;
  grid-template-columns: 1fr 1.25fr 1fr auto;
  gap: 18px;
  align-items: center;
}

/* Inhalt je Vertrauenspunkt */
.trust-grid > div {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Grüne Symbole */
.trust-icon {
  color: var(--green);
  font-size: 1.75rem;
  font-weight: 900;
}

.trust-grid p {
  margin: 0;
}

/* Haupttext */
.trust-grid strong {
  display: block;
  font-size: .72rem;
}

/* Zusatztext */
.trust-grid small {
  display: block;
  color: #4e5968;
  margin-top: 2px;
  font-size: .64rem;
}

/* Kontaktbutton */
.trust .btn {
  white-space: nowrap;
  padding: 10px 16px;
}


/* =========================================================
   10. FOOTER
   ========================================================= */

footer {
  background: linear-gradient(90deg, var(--green-dark), var(--green));
  color: #fff;
  padding: 13px 0;
  font-size: .68rem;
}

/* Footer-Inhalte links und rechts */
.footer-row {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
}

/* Footer-Links */
.footer-row a {
  color: #fff;
  text-decoration: none;
}

.footer-row a:hover {
  text-decoration: underline;
}


/* =========================================================
   11. IMPRESSUM / DATENSCHUTZ
   ========================================================= */

.legal {
  padding: 44px 0;
}

/* Weißer Inhaltskasten */
.legal article {
  background: #fff;
  border: 1px solid var(--line);
  padding: clamp(24px, 4vw, 48px);
  max-width: 920px;
  margin: auto;
}

/* Seitentitel */
.legal h1 {
  font-size: 2.5rem;
  margin-top: 0;
}

/* Zwischenüberschriften */
.legal h2 {
  margin-top: 30px;
}

/* Gelber Hinweisblock */
.legal .notice {
  background: #fff7df;
  border: 1px solid #f0d888;
  padding: 14px;
  border-radius: 10px;
}


/* =========================================================
   12. RESPONSIVE ANPASSUNGEN BIS 900 PX
   Tablet / kleinere Fenster
   ========================================================= */

@media (max-width: 900px) {

  .page-frame {
    width: 100%;
  }

  .identity-wrap {
    height: 168px;
  }

  .identity {
    height: 168px;
  }

  .identity-main {
    left: 25px;
  }

  /* Kontaktdaten bei kleineren Bildschirmbreiten */
  .contact-line {
    left: 470px;
    right: 100px;
    top: 100px;
    gap: 12px;
    font-size: .69rem;
  }

  .jubilee {
    right: 12px;
  }

  /* Leistungsbereiche jetzt 2-spaltig */
  .service-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Modernisierung untereinander */
  .modern-layout {
    grid-template-columns: 1fr;
  }

  /* Projekte 3-spaltig */
  .project-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Vertrauensleiste 2-spaltig */
  .trust-grid {
    grid-template-columns: 1fr 1fr;
  }
}


/* =========================================================
   MODERNISIERUNG – TEXTFELD WIE DER WEISSE HERO-TEXTKASTEN
   =========================================================
   Diese Regeln ändern ausschließlich den rechten Textkasten
   „Modernisierung mit System“.

   Hintergrund: Weiß
   Überschrift: Grün
   Beschreibungstext: Schwarz

   Die vorhandene Anordnung, Größe und Abstände des Kastens
   bleiben erhalten.
*/
.modern-copy{
  background:#fff;
}

/* Überschrift „Modernisierung mit System“ */
.modern-copy h3{
  color:var(--green-dark);
}

/* Beschreibung unter der Überschrift */
.modern-copy p{
  color:#1c2940;
  margin-bottom:0;
}

/* =========================================================
   13. KONTAKTSEITE / KONTAKTFORMULAR
   =========================================================
   Die Kontaktseite verwendet dieselbe styles.css wie alle
   übrigen Seiten. Die Smartphone-Abweichungen stehen separat
   in mobile.css.
   ========================================================= */

.contact-page {
  padding: 36px 0 46px;
  background: #f5f7f6;
}

.contact-intro {
  max-width: 790px;
  margin: 0 0 28px;
}

.contact-intro h1 {
  margin: 0 0 10px;
  color: var(--green-dark);
  font-size: 2.1rem;
  line-height: 1.15;
}

.contact-intro p {
  margin: 0;
  color: #1c2940;
  line-height: 1.6;
}

/* Formular links, direkte Kontaktdaten rechts. */
.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(230px, 1fr);
  gap: 24px;
  align-items: start;
}

.contact-form-box,
.contact-direct {
  background: #fff;
  padding: 26px;
  box-shadow: 0 5px 18px rgba(0, 0, 0, .08);
}

.contact-form-box h2,
.contact-direct h2 {
  margin: 0 0 20px;
  color: var(--green-dark);
}

/* Alle normalen Eingabefelder stehen bewusst untereinander. */
.form-row {
  display: block;
}

.form-field {
  margin-bottom: 18px;
}

.form-field label {
  display: block;
  margin-bottom: 7px;
  font-weight: 700;
  color: #1c2940;
}

/*
   Einheitliche Größe aller normalen Textfelder.
   min-height: 50px macht die Felder deutlich großzügiger
   als in der bisherigen Version.
*/
.form-field input,
.form-field textarea {
  box-sizing: border-box;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #aeb8b3;
  border-radius: 3px;
  background: #fff;
  color: #17221c;
  font: inherit;
}

.form-field input {
  min-height: 50px;
}

/* Nachrichtenfeld: gleiche Breite, aber deutlich größer. */
.form-field textarea {
  min-height: 230px;
  resize: vertical;
}

.form-field input:focus,
.form-field textarea:focus {
  outline: 2px solid var(--green);
  outline-offset: 1px;
  border-color: var(--green);
}

.privacy-check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 5px 0 11px;
  color: #26332d;
  font-size: .88rem;
  line-height: 1.45;
}

.privacy-check input {
  margin-top: 4px;
  flex: 0 0 auto;
}

.privacy-check a,
.contact-direct a {
  color: var(--green-dark);
  font-weight: 700;
}

.required-note {
  margin: 8px 0 15px;
  font-size: .8rem;
  color: #66706b;
}

.contact-submit {
  border: 0;
  cursor: pointer;
  font: inherit;
}

/*
   Spam-Schutz / Honeypot:
   Für echte Besucher vollständig unsichtbar. Automatisierte
   Bots können das Feld im Quelltext trotzdem erkennen und
   versehentlich ausfüllen.
*/
.hp-field {
  display: none !important;
}

.contact-direct p {
  line-height: 1.55;
}

.contact-note {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid #dfe5e2;
  font-size: .88rem;
  color: #56615c;
}

/* Rückmeldung nach dem PHP-Mailversand. */
.contact-result {
  min-height: 420px;
  padding: 44px 0;
  background: #f5f7f6;
}

.contact-result-box {
  max-width: 680px;
  margin: 0 auto;
  padding: 30px;
  background: #fff;
  box-shadow: 0 5px 18px rgba(0, 0, 0, .08);
}

.contact-result-box h1 {
  color: var(--green-dark);
}

.contact-result-box.error {
  border-left: 5px solid #8d2525;
}

.contact-result-box.success {
  border-left: 5px solid var(--green);
}



/* =========================================================
   KONTAKTFORMULAR: RÜCKMELDUNG NACH DEM ABSENDEN
   =========================================================
   Diese Regeln gestalten die PHP-Erfolgs- bzw. Fehlerseite.
   Ziel: Der Besucher bleibt optisch vollständig im Design
   der Website und erkennt sofort, ob der Versand geklappt hat.
   ========================================================= */

/* Die eigentliche Rückmeldekarte bleibt mittig und gut lesbar. */
.contact-result-box {
  max-width: 720px;
  margin: 0 auto;
  padding: 34px 36px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 5px 18px rgba(0, 0, 0, .08);
}

/* Grüner bzw. roter Rand zeigt den Versandstatus zusätzlich optisch. */
.contact-result-box.success {
  border-left: 6px solid var(--green);
}

.contact-result-box.error {
  border-left: 6px solid #a52a2a;
}

/* Statuszeile oberhalb der Überschrift: Symbol + kurzer Statustext. */
.contact-result-status {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

/* Rundes Statussymbol. */
.contact-result-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 50%;
  color: #fff;
  font-size: 1.35rem;
  font-weight: 800;
}

.contact-result-box.success .contact-result-icon {
  background: var(--green);
}

.contact-result-box.error .contact-result-icon {
  background: #a52a2a;
}

.contact-result-label {
  font-size: .95rem;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #435049;
}

.contact-result-box h1 {
  margin: 0 0 14px;
  color: var(--green-dark);
  line-height: 1.18;
}

.contact-result-box.error h1 {
  color: #842020;
}

.contact-result-message {
  margin: 0 0 12px;
  font-size: 1.06rem;
  line-height: 1.6;
  color: #1c2940;
}

/* Zusatzhinweis mit Telefonnummer bzw. Hinweis nach erfolgreichem Versand. */
.contact-result-help {
  margin: 0 0 24px;
  color: #4b5751;
  line-height: 1.55;
}

.contact-result-help a {
  color: var(--green-dark);
  font-weight: 800;
}

/* Beide Rückkehrmöglichkeiten stehen auf dem Desktop nebeneinander. */
.contact-result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

/* Zweite Schaltfläche bewusst etwas zurückhaltender. */
.btn-secondary {
  background: #eef3f0;
  color: var(--green-dark);
  border: 1px solid #cbd8d1;
}

.btn-secondary:hover,
.btn-secondary:focus {
  background: #e2ebe6;
}

/* =========================================================
   VERSION 1.8d – NAVIGATION: 3D + UMLAUFENDER DOPPELBLITZ
   Beide Blitze starten gemeinsam mittig an der linken Kante.
   Einer läuft über die Oberkante, der andere über die Unterkante.
   Die bereits gezogene Blitzspur bleibt sichtbar, bis sich beide
   mittig an der rechten Kante treffen – erst dann verschwindet sie.
   ========================================================= */

.desktop-nav a {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(255,255,255,.28);
  border-bottom-color: rgba(0,0,0,.28);
  background: linear-gradient(to bottom, rgba(255,255,255,.13), rgba(0,0,0,.09));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.32), inset 0 -1px 0 rgba(0,0,0,.12),
              0 3px 0 rgba(3,91,43,.72), 0 4px 7px rgba(0,0,0,.18);
  text-shadow: 0 1px 1px rgba(0,0,0,.28);
  transform: translateY(-1px);
  transition: transform .14s ease, box-shadow .14s ease, background .18s ease, color .18s ease;
}

/* SVG-Blitzspuren: links mittig -> außen herum -> rechts mittig. */
.desktop-nav a::before,
.desktop-nav a::after {
  content: "";
  position: absolute;
  z-index: 4;
  left: 0;
  width: 100%;
  height: 55%;
  opacity: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 3px #dffcff) drop-shadow(0 0 6px rgba(96,218,255,.95));
  clip-path: inset(0 100% 0 0);
}
.desktop-nav a::before {
  top: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 60' preserveAspectRatio='none'%3E%3Cpolyline points='0,58 8,47 14,51 20,38 27,43 34,25 42,31 49,15 58,20 68,8 79,13 90,5 101,10 112,4 124,9 136,5 148,12 159,7 170,17 180,12 189,26 197,21 204,39 211,34 216,49 220,58' fill='none' stroke='%23f8ffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.desktop-nav a::after {
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 60' preserveAspectRatio='none'%3E%3Cpolyline points='0,2 8,13 15,9 22,24 29,18 37,36 45,29 53,46 63,40 73,53 84,47 96,56 108,50 120,57 132,49 144,54 155,44 166,50 176,37 185,43 193,27 201,33 208,16 214,21 220,2' fill='none' stroke='%23f8ffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.desktop-nav a:hover,
.desktop-nav a:focus-visible {
  color: #fff;
  background: linear-gradient(to bottom, #0eaa54, var(--green-dark));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.46), inset 0 -1px 0 rgba(0,0,0,.18),
              0 3px 0 rgba(2,74,34,.82), 0 0 10px rgba(112,225,255,.42), 0 4px 8px rgba(0,0,0,.20);
  transform: translateY(-1px);
}
.desktop-nav a:hover::before,
.desktop-nav a:focus-visible::before { animation: elektro-bogen-oben .72s ease-out 1; }
.desktop-nav a:hover::after,
.desktop-nav a:focus-visible::after { animation: elektro-bogen-unten .72s ease-out 1; }

.desktop-nav a.active {
  color: var(--green-dark);
  background: linear-gradient(to bottom, #fff, #edf7f1);
  border-color: rgba(255,255,255,.75);
  border-bottom-color: rgba(0,0,0,.20);
  text-shadow: none;
  box-shadow: inset 0 1px 0 #fff, 0 3px 0 rgba(3,91,43,.62), 0 4px 7px rgba(0,0,0,.16);
}
.desktop-nav a:active {
  transform: translateY(2px);
  box-shadow: inset 0 2px 4px rgba(0,0,0,.18), 0 1px 0 rgba(3,91,43,.65);
}

@keyframes elektro-bogen-oben {
  0%   { opacity:0; clip-path:inset(0 100% 0 0); }
  5%   { opacity:1; clip-path:inset(0 96% 0 0); }
  82%  { opacity:1; clip-path:inset(0 0 0 0); }
  92%  { opacity:1; clip-path:inset(0 0 0 0); filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 5px #dffcff) drop-shadow(0 0 9px rgba(96,218,255,1)); }
  100% { opacity:0; clip-path:inset(0 0 0 0); }
}
@keyframes elektro-bogen-unten {
  0%   { opacity:0; clip-path:inset(0 100% 0 0); }
  5%   { opacity:1; clip-path:inset(0 96% 0 0); }
  82%  { opacity:1; clip-path:inset(0 0 0 0); }
  92%  { opacity:1; clip-path:inset(0 0 0 0); filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 5px #dffcff) drop-shadow(0 0 9px rgba(96,218,255,1)); }
  100% { opacity:0; clip-path:inset(0 0 0 0); }
}

@media (prefers-reduced-motion: reduce) {
  .desktop-nav a, .desktop-nav a::before, .desktop-nav a::after { transition:none; animation:none !important; }
}



/* VERSION 1.8f – SVG-Strombogen in Weiß/Hellgrün statt statischer CSS-Blitzgrafik */
.desktop-nav a { overflow: visible; }
.desktop-nav a::before, .desktop-nav a::after { display:none !important; animation:none !important; }
.desktop-nav a > *:not(.electric-svg) { position:relative; z-index:2; }
.electric-svg {
  position:absolute; z-index:8; inset:-24px; width:calc(100% + 48px); height:calc(100% + 48px);
  overflow:visible; pointer-events:none; filter:drop-shadow(0 0 3px rgba(95,190,125,.42));
}
.electric-main,.electric-branch { fill:none; vector-effect:non-scaling-stroke; stroke-linecap:round; stroke-linejoin:round; }
.electric-glow { stroke:#9bd8aa; stroke-width:4.6; opacity:.42; filter:url(#electricGlow); }
.electric-core { stroke:#f8fff9; stroke-width:1.25; opacity:.92; filter:url(#electricGlow); }
.electric-branch { stroke:#d8f2de; stroke-width:.95; opacity:.78; filter:url(#electricGlow); }
.electric-branch-faint { stroke:#91cda0; stroke-width:.7; opacity:.48; }
.electric-spark { fill:#fbfffc; stroke:#b8e4c3; stroke-width:1.4; opacity:.72; transform-box:fill-box; transform-origin:center; filter:url(#electricGlow); }

/* =========================================================
   VERSION 1.8g – klarer Hover-Zustand + etwas hellerer Strombogen
   Hover bleibt sichtbar, auch nachdem die Blitzanimation beendet ist.
   Der aktive (weiße) Navigationspunkt bleibt unverändert.
   ========================================================= */
.desktop-nav a:not(.active):hover,
.desktop-nav a:not(.active):focus-visible {
  color:#fff;
  background:linear-gradient(to bottom, #25b965 0%, #10954d 45%, #08773d 100%);
  border-color:rgba(225,255,235,.72);
  border-bottom-color:rgba(0,65,30,.58);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.48),
    inset 0 -2px 0 rgba(0,65,30,.22),
    0 5px 0 rgba(2,83,39,.72),
    0 8px 12px rgba(0,0,0,.20),
    0 0 10px rgba(150,240,175,.30);
  text-shadow:0 1px 1px rgba(0,60,28,.45), 0 0 5px rgba(230,255,236,.18);
  transform:translateY(-3px);
}
.desktop-nav a:not(.active):active {
  transform:translateY(1px);
  box-shadow:
    inset 0 2px 5px rgba(0,55,25,.25),
    inset 0 1px 0 rgba(255,255,255,.28),
    0 1px 0 rgba(2,83,39,.70),
    0 2px 4px rgba(0,0,0,.15);
}

/* Heller als 1.8f, weiterhin weiß/hellgrün statt Neonblau. */
.electric-svg { filter:drop-shadow(0 0 4px rgba(125,225,150,.55)); }
.electric-glow { stroke:#b9efc7; stroke-width:4.9; opacity:.54; }
.electric-core { stroke:#ffffff; stroke-width:1.35; opacity:.98; }
.electric-branch { stroke:#e5f9ea; stroke-width:1.0; opacity:.86; }
.electric-branch-faint { stroke:#a9dfb7; stroke-width:.72; opacity:.57; }
.electric-spark { fill:#ffffff; stroke:#d5f5dd; opacity:.80; }

/* =========================================================
   VERSION 1.8h – EINGESENKTER HOVER + INTERNES LICHTOVAL
   Der Button hebt sich nicht mehr an. Beim Hover sinkt er leicht
   ein. Ein weiches weiß/hellgrünes Lichtoval liegt hinter dem Text
   und bleibt vollständig innerhalb der Buttonkante.
   ========================================================= */
.desktop-nav a:not(.active):hover,
.desktop-nav a:not(.active):focus-visible {
  color:#fff;
  background:
    radial-gradient(ellipse 48% 62% at 50% 50%,
      rgba(238,255,243,.34) 0%,
      rgba(190,244,205,.20) 28%,
      rgba(112,218,143,.10) 52%,
      rgba(35,164,85,.025) 72%,
      rgba(0,0,0,0) 88%),
    linear-gradient(to bottom, #18a657 0%, #0d9149 48%, #08783d 100%);
  border-color:rgba(218,248,226,.58);
  border-bottom-color:rgba(0,65,30,.44);
  box-shadow:
    inset 0 3px 7px rgba(0,55,25,.22),
    inset 0 -1px 0 rgba(255,255,255,.20),
    inset 0 0 12px rgba(215,255,226,.10),
    0 1px 1px rgba(0,0,0,.13);
  text-shadow:
    0 1px 1px rgba(0,55,25,.42),
    0 0 4px rgba(240,255,244,.30);
  transform:translateY(2px);
}

.desktop-nav a:not(.active):active {
  transform:translateY(3px);
  box-shadow:
    inset 0 4px 8px rgba(0,50,23,.28),
    inset 0 -1px 0 rgba(255,255,255,.16),
    inset 0 0 10px rgba(215,255,226,.08),
    0 0 1px rgba(0,0,0,.12);
}

/* =========================================================
   VERSION 1.8i – ORGANISCHER LICHTKEGEL IM HOVER-BUTTON
   Weiche, unregelmaessige Innenbeleuchtung. Der Lichtschein
   wird an der Buttonkante abgeschnitten; der Button bleibt
   leicht eingesunken. SVG-Blitze bleiben darueber sichtbar.
   ========================================================= */
.desktop-nav a:not(.active) {
  isolation:isolate;
}
.desktop-nav a:not(.active)::before {
  content:"" !important;
  display:block !important;
  position:absolute;
  z-index:0;
  inset:2px;
  border-radius:calc(12px - 2px);
  pointer-events:none;
  opacity:0;
  transform:scale(.72,.58);
  background:
    radial-gradient(ellipse 48% 48% at 50% 52%, rgba(250,255,251,.72) 0%, rgba(226,255,233,.53) 15%, rgba(165,239,184,.34) 34%, rgba(85,206,119,.16) 55%, rgba(31,161,75,.055) 73%, transparent 88%),
    radial-gradient(ellipse 70% 40% at 42% 47%, rgba(205,255,217,.24) 0%, rgba(107,222,137,.10) 46%, transparent 78%),
    radial-gradient(ellipse 62% 46% at 61% 58%, rgba(223,255,231,.18) 0%, rgba(83,201,115,.08) 48%, transparent 80%);
  filter:blur(3px);
  transition:opacity .20s ease, transform .30s cubic-bezier(.2,.7,.25,1), filter .25s ease;
}
.desktop-nav a:not(.active):hover::before,
.desktop-nav a:not(.active):focus-visible::before {
  opacity:1;
  transform:scale(1.04,.96);
  filter:blur(2.2px);
}
.desktop-nav a:not(.active):hover,
.desktop-nav a:not(.active):focus-visible {
  color:#fff;
  background:linear-gradient(to bottom,#139b50 0%,#0c8945 48%,#07743a 100%);
  border-color:rgba(216,248,224,.55);
  border-bottom-color:rgba(0,58,27,.46);
  box-shadow:
    inset 0 4px 9px rgba(0,48,23,.27),
    inset 0 -1px 0 rgba(255,255,255,.19),
    inset 0 0 18px rgba(178,244,195,.09),
    0 1px 1px rgba(0,0,0,.12);
  text-shadow:0 1px 1px rgba(0,48,23,.42),0 0 5px rgba(244,255,247,.34);
  transform:translateY(2px);
  overflow:visible;
}
/* Inhalt und Blitz ueber dem Lichtkegel halten. */
.desktop-nav a:not(.active) > *:not(.electric-svg) { position:relative; z-index:2; }
.desktop-nav a:not(.active) .electric-svg { z-index:8; }
/* Lichtkegel darf trotz sichtbarer SVG-Aeste nicht aus dem Button austreten. */
.desktop-nav a:not(.active)::before { clip-path:inset(0 round 10px); }

/* =========================================================
   VERSION 1.8k – sichere Trennung der Interaktionseffekte
   Hauptnavigation und Inhaltsbuttons werden strikt getrennt.
   ========================================================= */
/* Aktive Seite: heller Kantenkranz, der nach innen zum Text strahlt. */
.desktop-nav a.active {
  color:#fff;
  background:radial-gradient(ellipse 68% 56% at 50% 50%, #087a3a 0%, #087438 58%, #05602e 100%);
  border-color:rgba(224,255,232,.95);
  box-shadow:
    inset 0 0 6px 2px rgba(245,255,248,.72),
    inset 0 0 15px 5px rgba(135,239,162,.46),
    inset 0 0 29px 10px rgba(57,192,96,.20),
    0 0 4px rgba(190,250,205,.28);
  text-shadow:0 0 5px rgba(247,255,249,.48),0 1px 1px rgba(0,55,25,.42);
  transform:none;
  overflow:hidden;
  isolation:isolate;
}
.desktop-nav a.active::before {
  content:"" !important;
  display:block !important;
  position:absolute;
  inset:1px;
  border-radius:9px;
  pointer-events:none;
  background:
    linear-gradient(to bottom,rgba(255,255,255,.48),transparent 25%,transparent 75%,rgba(215,255,225,.30)),
    linear-gradient(to right,rgba(222,255,231,.31),transparent 21%,transparent 79%,rgba(222,255,231,.31));
  box-shadow:inset 0 0 12px rgba(231,255,237,.46);
  opacity:.9;
  z-index:0;
}
.desktop-nav a.active::after { display:none !important; }

/* Vergleichspfeil: echte SVG-Geometrie, daher auf allen Geräten identisch. */
.compare-arrow {
  width:48px;
  height:48px;
  margin:0 -2px;
  background:transparent;
  border:0;
  box-shadow:none;
  display:block;
  align-self:center;
  justify-self:center;
  line-height:0;
  transform:none;
}
.compare-arrow svg { display:block; width:100%; height:100%; overflow:visible; }
.compare-arrow-ring { fill:rgba(7,118,56,.94); stroke:#dfffe8; stroke-width:1.5; filter:url(#arrowGlow); }
.compare-arrow-chevron { fill:none; stroke:#fff; stroke-width:4; stroke-linecap:round; stroke-linejoin:round; filter:url(#arrowGlow); }

/* Inhalts-Aktionsbuttons: organisches Licht, aber KEIN Blitz.
   Absichtlich nur .btn – niemals .desktop-nav oder .shop-link. */
.btn { position:relative; isolation:isolate; overflow:hidden; }
.ambient-link-svg { position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; opacity:0; transition:opacity .22s ease; }
.btn > *:not(.ambient-link-svg) { position:relative; z-index:2; }
.btn.ambient-lit .ambient-link-svg { opacity:1; }
.btn.ambient-lit { transform:translateY(1px); box-shadow:inset 0 3px 8px rgba(0,55,25,.20),inset 0 0 12px rgba(205,255,218,.15),0 1px 2px rgba(0,0,0,.12); }


/* =========================================================
   VERSION 1.8l – SHOP-LINK HART VON SVG-/PSEUDOEFFEKTEN TRENNEN
   Der externe Shop bleibt ein normaler Navigationsbutton und darf
   weder durch SVGs noch durch Pseudoelemente seine Flex-Groesse aendern.
   ========================================================= */
.desktop-nav > a {
  flex: 0 0 auto;
  min-width: 0;
  min-height: 0;
}
.desktop-nav > a.shop-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: center !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  flex: 0 0 auto !important;
  overflow: hidden !important;
  transform: none !important;
}
.desktop-nav > a.shop-link::before,
.desktop-nav > a.shop-link::after,
.desktop-nav > a.shop-link .electric-svg,
.desktop-nav > a.shop-link .ambient-link-svg {
  display: none !important;
  content: none !important;
}
.desktop-nav > a.shop-link:hover,
.desktop-nav > a.shop-link:focus-visible {
  transform: translateY(2px) !important;
  background:
    radial-gradient(ellipse 48% 48% at 50% 52%, rgba(250,255,251,.60) 0%, rgba(165,239,184,.28) 34%, rgba(85,206,119,.12) 55%, transparent 86%),
    linear-gradient(to bottom,#139b50 0%,#0c8945 48%,#07743a 100%);
}

/* =========================================================
   VERSION 1.8m – SHOP-EFFEKT + HOCHWERTIGE INHALTSBUTTONS
   ========================================================= */

/* Shop bleibt layouttechnisch vollständig isoliert, darf aber eine
   absolut positionierte SVG-Ebene anzeigen. Die Ebene beeinflusst nie
   Breite/Höhe/Flexbox des Navigationslinks. */
.desktop-nav > a.shop-link {
  position: relative !important;
  overflow: visible !important;
  isolation: isolate !important;
}
.desktop-nav > a.shop-link .electric-svg {
  display: block !important;
  position: absolute !important;
  pointer-events: none !important;
  z-index: 8 !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  max-height: none !important;
}
.desktop-nav > a.shop-link::before,
.desktop-nav > a.shop-link::after {
  display: none !important;
  content: none !important;
}
/* Shop bekommt exakt denselben Hover-Grundzustand wie die übrigen
   nicht aktiven Navigationsbuttons. */
.desktop-nav > a.shop-link:hover,
.desktop-nav > a.shop-link:focus-visible {
  color:#fff !important;
  transform:translateY(2px) !important;
  background:
    radial-gradient(ellipse 58% 72% at 50% 48%, rgba(248,255,250,.54) 0%, rgba(190,247,204,.27) 29%, rgba(92,208,122,.12) 55%, transparent 82%),
    linear-gradient(to bottom,#129a4f 0%,#0b8844 48%,#07733a 100%) !important;
  border-color:rgba(220,255,229,.58) !important;
  box-shadow:
    inset 0 3px 7px rgba(0,58,27,.26),
    inset 0 -1px 0 rgba(225,255,233,.18),
    inset 0 0 13px rgba(203,255,216,.14),
    0 1px 2px rgba(0,0,0,.14) !important;
}

/* Inhaltsbuttons: ruhiger Grundzustand, beim Hover Lichtkegel von innen
   plus sauberer Lichtsaum an der Außenkante. Kein Blitz. */
.btn {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border:1px solid rgba(218,255,228,.22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -1px 0 rgba(0,55,26,.18),
    0 3px 8px rgba(4,88,42,.13);
  transition:box-shadow .22s ease, transform .18s ease, border-color .22s ease, background .22s ease;
}
.ambient-link-svg {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  pointer-events:none;
  opacity:0;
  transition:opacity .24s ease;
}
.btn.ambient-lit,
.btn:hover,
.btn:focus-visible {
  transform:translateY(1px);
  border-color:rgba(224,255,232,.68);
  background:linear-gradient(90deg,#086f38,#0b8c46 48%,#08783d);
  box-shadow:
    inset 0 3px 8px rgba(0,48,23,.26),
    inset 0 0 18px rgba(210,255,222,.16),
    inset 0 0 0 1px rgba(235,255,240,.12),
    0 0 0 1px rgba(122,226,149,.10),
    0 2px 6px rgba(0,0,0,.13);
}
.btn.ambient-lit .ambient-link-svg,
.btn:hover .ambient-link-svg,
.btn:focus-visible .ambient-link-svg { opacity:1; }

@media (prefers-reduced-motion: reduce) {
  .ambient-link-svg,.btn { transition:none !important; }
}

/* =========================================================
   VERSION 1.8n – FEINSCHLIFF INHALTSBUTTONS + HERO-BILD
   ========================================================= */
/* Inhaltsbuttons erhalten bereits im Ruhezustand mehr Tiefe. */
.btn {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -2px 3px rgba(0,52,25,.20),
    0 2px 2px rgba(0,0,0,.10),
    0 5px 12px rgba(3,78,37,.15);
}
.btn:hover,
.btn:focus-visible,
.btn.ambient-lit {
  box-shadow:
    inset 0 3px 8px rgba(0,48,23,.28),
    inset 0 0 20px rgba(218,255,227,.19),
    inset 0 0 0 1px rgba(240,255,244,.17),
    0 0 0 1px rgba(122,226,149,.13),
    0 3px 8px rgba(0,0,0,.15);
}

/* Das Hero ist nun ein echtes Bild statt CSS-Hintergrund.
   Rechtsklick > Bild speichern speichert dadurch nur das Bild und nicht
   versehentlich die komplette Webseite. */
.hero-photo {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 49%;
  display:block;
  user-select:none;
  -webkit-user-drag:none;
}

/* Elektro-AS Version 1.9a */