/* ==========================================================================
   ELEMENTO — CI-Grundlagen
   Quelle: Technische Dokumentation 2025 (Farben aus den Textspans gemessen).

   Wortmarke   E L E #5D7683 · M #FAA619 · E #F5821F · N #F15A22 · T #ED1C24 · O #BF1F24
   Text        #5D7683 (Schiefer, = «ELE»)
   Titel       #BF1F24 (Rot, = «O»), Akzent #ED1C24
   Gründe      #FFFFFF · #F5F6F8 · #EDEFF2
   Linien      #D2D5D6 / #E5E9EB
   Schrift     Katalog: Klavika Light/Medium, gesperrt → Web: Barlow 300/500

   Die Gestaltung selbst liegt in Elementor (Kit + Vorlagen). Hier nur Tokens
   und Details, die Elementor nicht einstellen kann.
   ========================================================================== */

:root {
  --el-schiefer: #56707D; /* Text; CI #5D7683 minimal dunkler für ≥ 4.5:1 auf #F5F6F8/#EDEFF2 */
  --el-schiefer-dunkel: #3F535D;
  --el-schiefer-hell: #8A9CA5;
  --el-gelb: #FAA619;
  --el-orange: #F5821F;
  --el-orange-rot: #F15A22;
  --el-rot: #ED1C24;
  --el-rot-dunkel: #BF1F24;
  --el-weiss: #FFFFFF;
  --el-grund: #F5F6F8;
  --el-grund-2: #EDEFF2;
  --el-linie: #E5E9EB;
  --el-linie-2: #D2D5D6;
  --el-sperrung: 0.14em;
  --el-uebergang: 180ms cubic-bezier(.2, .6, .2, 1);
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  color: var(--el-schiefer);
  background: var(--el-weiss);
}

::selection {
  background: var(--el-rot-dunkel);
  color: var(--el-weiss);
}

/* Fokus sichtbar, aber ruhig — Tastaturbedienung */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 1px solid var(--el-rot-dunkel);
  outline-offset: 3px;
}

/* --- Kopfbereich ---------------------------------------------------------- */

/* Die Wortmarke ist ein SVG; nie verzerren */
.el-logo img {
  width: auto;
  display: block;
}

/* Hauptnavigation: feine Unterstreichung statt Farbfläche */
.el-nav .elementor-nav-menu--main .elementor-item {
  position: relative;
}
.el-nav .elementor-nav-menu--main .elementor-item::after {
  content: "";
  position: absolute;
  left: var(--nav-menu-icon-size, 0);
  left: 50%;
  bottom: 6px;
  width: 0;
  height: 1px;
  background: var(--el-rot-dunkel);
  transform: translateX(-50%);
  transition: width var(--el-uebergang);
}
.el-nav .elementor-nav-menu--main .elementor-item:hover::after,
.el-nav .elementor-nav-menu--main .elementor-item.elementor-item-active::after {
  width: calc(100% - 2 * var(--e-nav-menu-horizontal-menu-item-margin, 0px) - 24px);
}

/* Beim Scrollen: Kopf wird schmaler und bekommt eine Kante */
.el-kopf {
  transition: padding var(--el-uebergang), box-shadow var(--el-uebergang), background-color var(--el-uebergang);
}
.el-kopf.elementor-sticky--effects {
  box-shadow: 0 1px 0 var(--el-linie), 0 8px 24px rgba(63, 83, 93, .06);
}
.el-logo img {
  transition: width var(--el-uebergang);
}
.el-kopf.elementor-sticky--effects {
  --padding-top: 12px;
  --padding-bottom: 12px;
}
.el-kopf.elementor-sticky--effects .el-logo img {
  width: 150px;
}

/* Kontakt-Knopf im Kopf: Umriss, füllt sich beim Überfahren */
.el-kopf-knopf .elementor-button {
  transition: background-color var(--el-uebergang), color var(--el-uebergang), border-color var(--el-uebergang);
}

/* Hello Elementor bringt eigenen Kopf/Fuss mit, wenn keine Vorlage greift —
   die Pro-Vorlage ersetzt ihn; dieser Rand verhindert einen Sprung. */
.elementor-location-header {
  position: relative;
  z-index: 50;
}

/* Mobiles Menü: ruhige, grosse Zeilen */
.el-nav .elementor-nav-menu--dropdown .elementor-item {
  border-bottom: 1px solid var(--el-linie);
}

/* --- Fussbereich ---------------------------------------------------------- */

/* Farbband in den sechs Buchstabenfarben der Wortmarke — Markenzeichen,
   harte Übergänge wie die Buchstaben, keine weichen Verläufe */
.el-farbband {
  height: 4px;
  background: linear-gradient(90deg,
    #5D7683 0 50%,
    #FAA619 50% 60%,
    #F5821F 60% 70%,
    #F15A22 70% 80%,
    #ED1C24 80% 90%,
    #BF1F24 90% 100%);
}

.el-fuss a {
  transition: color var(--el-uebergang);
}

/* Linklisten: ruhig, Unterstreichung erst beim Überfahren */
.el-fuss .elementor-icon-list-item a:hover .elementor-icon-list-text,
.el-fuss-leiste a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

/* Swiss-Made-Zeichen wie auf dem Katalogtitel */
.el-swissmade {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #FFFFFF;
}
.el-swissmade svg {
  width: 14px;
  height: 14px;
  flex: none;
}

/* --- Inhaltsbausteine ------------------------------------------------------ */

/* Bilder mit festem Format, nie verzerrt */
.el-bild img { display: block; width: 100%; object-fit: cover; }
.el-bild--hoch img   { aspect-ratio: 4 / 5; }
.el-bild--quer img   { aspect-ratio: 4 / 3; }
.el-bild--breit img  { aspect-ratio: 21 / 9; }
.el-bild--karte img  { aspect-ratio: 3 / 2; }
.el-bild--quadrat img { aspect-ratio: 1 / 1; }
/* Hochformat nur auf dem Desktop — auf Tablet/Mobil stand das Einstiegsbild
   sonst über 1000 px hoch. */
@media (max-width: 1024px) {
  .el-bild--hoch img { aspect-ratio: 4 / 3; object-position: center 35%; }
}
@media (max-width: 767px) {
  .el-bild--breit img { aspect-ratio: 4 / 3; }
}

/* HTML-Bausteine (Karten, Schritte) füllen ihre Spalte, damit eine Reihe
   gleich hoch endet */
.elementor-widget-html:has(.el-staerke, .el-schritt) { height: 100%; }
.elementor-widget-html:has(.el-staerke, .el-schritt) > .elementor-widget-container { height: 100%; }

/* Stärken-Karten */
.el-staerke {
  height: 100%;
  padding: 32px 28px 30px;
  background: var(--el-weiss);
  border: 1px solid var(--el-linie);
  transition: border-color var(--el-uebergang), transform var(--el-uebergang), box-shadow var(--el-uebergang);
}
.el-staerke:hover {
  border-color: var(--el-linie-2);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(63, 83, 93, .08);
}
.el-staerke svg { width: 30px; height: 30px; margin-bottom: 18px; display: block; }
.el-staerke h3 {
  font-size: 18px;
  font-weight: 500;
  color: var(--el-schiefer-dunkel);
  margin: 0 0 8px;
  letter-spacing: .01em;
}
.el-staerke p { font-size: 15px; line-height: 1.65; margin: 0; }
.el-fussnote { font-size: 13px; line-height: 1.6; color: #5E6F78; }

/* Aufzählung mit feinem Strich */
.el-liste ul { list-style: none; padding: 0; margin: 0; }
.el-liste li {
  position: relative;
  padding: 10px 0 10px 28px;
  border-bottom: 1px solid var(--el-linie);
}
.el-liste li:last-child { border-bottom: 0; }
.el-liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.35em;
  width: 14px;
  height: 1px;
  background: var(--el-rot-dunkel);
}
.el-liste strong { font-weight: 500; color: var(--el-schiefer-dunkel); }

/* Nummerierte Schritte */
.el-schritt { border-top: 1px solid var(--el-linie-2); padding-top: 22px; height: 100%; }
/* Keine Zahlen in Kacheln (Nutzer 15.09.) — Piktogramm führt die Kachel an */
.el-schritt svg { width: 30px; height: 30px; display: block; margin: 0 0 16px; }
.el-schritt h3 { font-size: 19px; font-weight: 500; color: var(--el-schiefer-dunkel); margin: 0 0 8px; }
.el-schritt p { font-size: 15px; line-height: 1.65; margin: 0; }

/* Modelltabelle */
.el-tabelle-rahmen { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.el-tabelle {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 15px;
  background: var(--el-weiss);
}
.el-tabelle caption {
  text-align: left;
  font-size: 13px;
  color: #5E6F78;
  padding: 0 0 10px;
}
.el-tabelle th {
  text-align: left;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--el-schiefer-dunkel);
  padding: 14px 16px;
  border-bottom: 1px solid var(--el-schiefer);
  white-space: nowrap;
}
.el-tabelle td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--el-linie);
  white-space: nowrap;
}
.el-tabelle tbody tr:hover td { background: var(--el-grund); }
.el-tabelle td:first-child { color: #5E6F78; }
.el-tabelle td.el-zahl, .el-tabelle th.el-zahl { text-align: right; font-variant-numeric: tabular-nums; }

/* Datentabelle mit Zeilenköpfen (Technik): ruhiger als Spaltenköpfe, kein Querscrollen */
.el-tabelle--daten { min-width: 0; }
.el-tabelle--daten th[scope="row"] {
  width: 34%;
  text-transform: none;
  letter-spacing: .01em;
  font-size: 15px;
  font-weight: 500;
  color: var(--el-schiefer-dunkel);
  border-bottom: 1px solid var(--el-linie);
  white-space: normal;
  vertical-align: top;
}
.el-tabelle--daten td { white-space: normal; color: var(--el-schiefer); }
.el-tabelle--daten td:first-child { color: var(--el-schiefer); }
.el-tabelle--daten tbody tr:first-child th,
.el-tabelle--daten tbody tr:first-child td { border-top: 1px solid var(--el-schiefer); }
@media (max-width: 767px) {
  .el-tabelle--daten th[scope="row"], .el-tabelle--daten td { display: block; width: auto; padding-left: 0; padding-right: 0; }
  .el-tabelle--daten th[scope="row"] { border-bottom: 0; padding-bottom: 2px; }
  .el-tabelle--daten tbody tr:first-child td { border-top: 0; }
}

/* FAQ-Themen: Piktogramm über dem Thementitel */
.el-thema-icon svg { width: 32px; height: 32px; display: block; margin: 4px 0 18px; }

/* --- Ratgeber ---------------------------------------------------------------- */

/* Artikeltext: ruhige Lesebreite und grosszügiger Zeilenabstand */
.el-artikel .elementor-widget-container,
.el-artikel { font-size: 18px; line-height: 1.8; }
.el-artikel p { margin: 0 0 22px; }
.el-artikel h2 {
  font-size: 28px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--el-rot-dunkel);
  margin: 48px 0 14px;
}
.el-artikel h2:first-child { margin-top: 0; }
.el-artikel ul { list-style: none; padding: 0; margin: 0 0 24px; }
.el-artikel li { position: relative; padding: 8px 0 8px 28px; border-bottom: 1px solid var(--el-linie); }
.el-artikel li::before { content: ""; position: absolute; left: 0; top: 1.4em; width: 14px; height: 1px; background: var(--el-rot-dunkel); }
.el-artikel strong { font-weight: 500; color: var(--el-schiefer-dunkel); }
.el-artikel em { color: #5E6F78; }
@media (max-width: 767px) {
  .el-artikel .elementor-widget-container, .el-artikel { font-size: 17px; }
  .el-artikel h2 { font-size: 23px; margin-top: 36px; }
}

/* Übersichtskarten */
.el-ratgeber-karte {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--el-weiss);
  border: 1px solid var(--el-linie);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--el-uebergang), transform var(--el-uebergang), box-shadow var(--el-uebergang);
}
.el-ratgeber-karte:hover {
  border-color: var(--el-linie-2);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(63, 83, 93, .08);
}
.el-ratgeber-karte img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.el-ratgeber-karte__text { padding: 26px 26px 28px; display: flex; flex-direction: column; flex: 1; }
.el-ratgeber-karte h2 { font-size: 21px; font-weight: 500; line-height: 1.3; color: var(--el-schiefer-dunkel); margin: 0 0 10px; }
.el-ratgeber-karte p { font-size: 15px; line-height: 1.65; margin: 0 0 20px; }
.el-ratgeber-karte__mehr {
  margin-top: auto;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--el-rot-dunkel);
}
.el-ratgeber-karte:hover h2 { color: var(--el-rot-dunkel); }
.elementor-widget-html:has(.el-ratgeber-karte) { height: 100%; }
.elementor-widget-html:has(.el-ratgeber-karte) > .elementor-widget-container { height: 100%; }

/* Messeaktion: Cashback-Beispiele mit massstäblicher Silhouette */
.el-cashback {
  height: 100%;
  padding: 32px 28px 30px;
  background: var(--el-weiss);
  border: 1px solid var(--el-linie);
  display: flex;
  flex-direction: column;
}
.el-cashback__bild { height: 190px; display: flex; align-items: flex-end; margin-bottom: 20px; }
.el-cashback__bild svg { height: 100%; width: auto; overflow: visible; }
.el-cashback__geraet { fill: var(--el-grund-2); stroke: var(--el-schiefer-hell); stroke-width: 1; }
.el-cashback__linie { stroke: var(--el-rot-dunkel); stroke-width: 1; }
.el-cashback__groesse { font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: #5E6F78; margin: 0 0 6px; }
.el-cashback h3 { font-size: 19px; font-weight: 500; color: var(--el-schiefer-dunkel); margin: 0 0 4px; }
.el-cashback__mass { font-size: 14px; margin: 0 0 18px; }
.el-cashback__betrag { margin: auto 0 0; font-size: 40px; font-weight: 300; line-height: 1; color: var(--el-rot-dunkel); letter-spacing: .01em; }
.elementor-widget-html:has(.el-cashback) { height: 100%; }
.elementor-widget-html:has(.el-cashback) > .elementor-widget-container { height: 100%; }

/* Sprungziel unter dem klebenden Kopf nicht verstecken */
.el-sprungziel, #messeaktion { scroll-margin-top: 110px; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Glasmuster-Kacheln */
.el-muster p { margin: 12px 0 0; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; font-weight: 500; }

/* Häufige Fragen (details/summary) */
.el-faq details { border-bottom: 1px solid var(--el-linie-2); }
.el-faq details:first-child { border-top: 1px solid var(--el-linie-2); }
.el-faq summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 44px 22px 0;
  position: relative;
  font-size: 18px;
  font-weight: 500;
  color: var(--el-schiefer-dunkel);
}
.el-faq summary::-webkit-details-marker { display: none; }
.el-faq summary::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 12px;
  height: 12px;
  border-right: 1px solid var(--el-rot-dunkel);
  border-bottom: 1px solid var(--el-rot-dunkel);
  transform: translateY(-70%) rotate(45deg);
  transition: transform var(--el-uebergang);
}
.el-faq details[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.el-faq summary:hover { color: var(--el-rot-dunkel); }
.el-faq details p { margin: 0 0 22px; padding-right: 44px; }

/* Rotes Aktionsband: Knopf weiss */
.el-band-rot .elementor-button {
  background: transparent !important;
  border: 1px solid #FFFFFF !important;
  color: #FFFFFF !important;
}
.el-band-rot .elementor-button:hover {
  background: #FFFFFF !important;
  color: var(--el-rot-dunkel) !important;
}

/* Umrissknopf (sekundär) */
.el-knopf-umriss .elementor-button {
  background: transparent;
  border: 1px solid var(--el-rot-dunkel);
  color: var(--el-rot-dunkel);
}
.el-knopf-umriss .elementor-button:hover {
  background: var(--el-rot-dunkel);
  color: #FFFFFF;
}

/* Kleine Fakten unter dem Einstieg */
.el-kurzfakten {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--el-schiefer);
}
.el-kurzfakten li { display: flex; align-items: center; gap: 10px; }
.el-kurzfakten li::before { content: ""; width: 6px; height: 6px; background: var(--el-rot-dunkel); }

/* Textlink mit Pfeil */
.el-textlink a {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  /* echte Unterstreichung statt Rahmenlinie: Link nicht nur an der Farbe erkennbar (PageSpeed) */
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  color: var(--el-rot-dunkel);
}
.el-textlink a:hover { color: var(--el-rot); }

/* Modellbezeichnung erklärt (Formate) */
.el-modellname {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 18px;
  padding: 40px 24px;
  background: var(--el-grund);
}
.el-modellname__teil { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.el-modellname__wert {
  font-size: 56px;
  font-weight: 300;
  line-height: 1;
  color: var(--el-schiefer-dunkel);
  letter-spacing: .02em;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--el-rot-dunkel);
}
.el-modellname__erkl {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #5E6F78;
}
.el-modellname__trenner { font-size: 56px; font-weight: 300; line-height: 1; color: var(--el-linie-2); }
@media (max-width: 767px) {
  .el-modellname__wert, .el-modellname__trenner { font-size: 40px; }
}

/* Massstäblicher Grössenvergleich */
.el-vgl {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 48px;
  align-items: end;
  background: var(--el-weiss);
  padding: 40px;
  border: 1px solid var(--el-linie);
}
.el-vgl__gruppe { margin: 0; }
.el-vgl__gruppe figcaption {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #5E6F78;
  margin-bottom: 20px;
}
.el-vgl svg { width: 100%; height: auto; display: block; overflow: visible; }
.el-vgl__geraet { fill: var(--el-grund-2); stroke: var(--el-schiefer-hell); stroke-width: 1; }
.el-vgl__name { font-family: 'Barlow', sans-serif; font-size: 11px; font-weight: 500; fill: var(--el-schiefer-dunkel); text-anchor: middle; }
.el-vgl__mass { font-family: 'Barlow', sans-serif; font-size: 10px; font-weight: 300; fill: var(--el-schiefer); text-anchor: middle; }
.el-vgl__name.el-vgl__links, .el-vgl__mass.el-vgl__links { text-anchor: start; }

/* --- «ELEMENTO entdecken»: interaktiver Kopfbereich ------------------------ */
.el-ent { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; align-items: center; }
.el-ent__text { max-width: 540px; }
.el-ent__kicker { margin: 0 0 14px; font: 500 12px/1.4 'Barlow', sans-serif; letter-spacing: .18em; text-transform: uppercase; color: #5E6F78; }
.el-ent h1 { margin: 0 0 22px; font: 300 56px/1.08 'Barlow', sans-serif; letter-spacing: .005em; color: var(--el-schiefer-dunkel); }
.el-ent__lead { margin: 0 0 32px; font: 300 20px/1.6 'Barlow', sans-serif; color: var(--el-schiefer); }

/* Themenleiste */
.el-ent__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; padding: 0; list-style: none; }
.el-ent__chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 14px 8px 10px;
  font: 500 14px/1.2 'Barlow', sans-serif; letter-spacing: .01em; color: var(--el-schiefer-dunkel);
  background: #fff; border: 1px solid var(--el-linie-2); border-radius: 999px; cursor: pointer;
  transition: border-color var(--el-uebergang), background-color var(--el-uebergang), color var(--el-uebergang), box-shadow var(--el-uebergang);
}
.el-ent__chip svg { width: 20px; height: 20px; flex: none; }
.el-ent__chip:hover { border-color: var(--el-schiefer-hell); }
.el-ent__chip.ist-aktiv { border-color: var(--el-rot-dunkel); box-shadow: inset 0 0 0 1px var(--el-rot-dunkel); color: var(--el-rot-dunkel); }
.el-ent__chip:focus-visible, .el-ent__punkt:focus-visible, .el-ent__schalter:focus-visible { outline: 2px solid var(--el-rot); outline-offset: 3px; }

/* Infokarten liegen übereinander → keine Sprünge beim Wechsel */
.el-ent__karten { display: grid; margin: 0 0 28px; }
.el-ent__karte {
  grid-area: 1 / 1; padding: 26px 28px 24px; background: #fff; border: 1px solid var(--el-linie); border-radius: 4px;
  box-shadow: 0 18px 40px -28px rgba(63, 83, 93, .45);
}
.el-ent__karte h2 { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; font: 500 22px/1.25 'Barlow', sans-serif; color: var(--el-rot-dunkel); }
.el-ent__karte h2 svg { width: 28px; height: 28px; flex: none; }
.el-ent__karte p { margin: 0; font: 300 17px/1.7 'Barlow', sans-serif; color: var(--el-schiefer); }
.el-ent__karte .el-fussnote { margin-top: 10px; }
.el-ent.ist-bereit .el-ent__karte { opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .35s ease, transform .35s ease, visibility 0s linear .35s; }
.el-ent.ist-bereit .el-ent__karte.ist-aktiv { opacity: 1; visibility: visible; transform: none; transition: opacity .45s ease .05s, transform .45s ease .05s, visibility 0s; }
.el-ent:not(.ist-bereit) .el-ent__karten { gap: 12px; }
.el-ent:not(.ist-bereit) .el-ent__karte { grid-area: auto; }
.el-ent:not(.ist-bereit) .el-ent__punkte, .el-ent:not(.ist-bereit) .el-ent__chips, .el-ent:not(.ist-bereit) .el-ent__schalter-zeile { display: none; }

/* Einschalten */
.el-ent__schalter-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }
.el-ent__schalter {
  display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 10px 20px 10px 12px;
  font: 500 15px/1 'Barlow', sans-serif; letter-spacing: .04em; color: #fff; background: var(--el-schiefer-dunkel);
  border: 0; border-radius: 999px; cursor: pointer; transition: background-color var(--el-uebergang);
}
.el-ent__schalter:hover { background: #2F3F47; }
.el-ent__schalter-knopf { position: relative; width: 40px; height: 22px; border-radius: 999px; background: rgba(255, 255, 255, .22); transition: background-color .3s ease; }
.el-ent__schalter-knopf::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .3s cubic-bezier(.3, .7, .2, 1); }
.el-ent.ist-warm .el-ent__schalter-knopf { background: var(--el-orange-rot); }
.el-ent.ist-warm .el-ent__schalter-knopf::after { transform: translateX(18px); }
.el-ent__zeit { flex: 1 1 100%; }
.el-ent__zeit-balken { position: relative; height: 4px; border-radius: 2px; background: var(--el-linie); overflow: hidden; }
.el-ent__zeit-balken::after {
  content: ""; position: absolute; inset: 0; transform-origin: left; transform: scaleX(0);
  background: linear-gradient(90deg, var(--el-gelb), var(--el-orange), var(--el-orange-rot), var(--el-rot));
}
/* Feste Animation statt Übergang: Ein Übergang zwischen zwei verschieden langen
   Zuständen sprang auf iOS-Safari sofort auf 100 %. Gleiche Technik wie beim Glühen. */
.el-ent.ist-warm .el-ent__zeit-balken::after { animation: el-ent-fuellen 7s linear forwards; }
@keyframes el-ent-fuellen { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.el-ent__zeit-marken { display: flex; justify-content: space-between; gap: 12px; margin-top: 7px; font: 400 12px/1.35 'Barlow', sans-serif; color: #5E6F78; }
.el-ent__zeit-marken span { opacity: .55; transition: opacity .3s ease, color .3s ease; }
.el-ent.ist-warm .el-ent__zeit-marken span:first-child { opacity: 1; color: var(--el-orange-rot); transition-delay: .8s; }
.el-ent.ist-warm .el-ent__zeit-marken span:last-child { opacity: 1; color: var(--el-rot-dunkel); transition-delay: 7s; }

/* Bühne mit Foto — ohne Neigung nach der Maus (Nutzer 17.09.: zu unruhig und
   unscharf; die 3D-Drehung und die 3-%-Vergrösserung haben das Bild weichgezeichnet) */
.el-ent__buehne {
  position: relative; width: 100%; max-width: min(560px, calc(84vh * 1300 / 2120)); margin-inline: auto;
  aspect-ratio: 1300 / 2120; border-radius: 4px; overflow: hidden; background: #E9EAEA;
  box-shadow: 0 40px 80px -48px rgba(63, 83, 93, .55);
}
.el-ent__buehne img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Wärme auf dem Glas (Gerätefläche im Foto: 33,8–65,8 % × 9,6–86,8 %) */
.el-ent__glas { position: absolute; left: 33.8%; top: 9.6%; width: 32%; height: 77.2%; pointer-events: none; }
.el-ent__glut {
  position: absolute; inset: 0; opacity: 0; mix-blend-mode: multiply;
  background: radial-gradient(120% 70% at 50% 55%, rgba(250, 166, 25, .2), rgba(241, 90, 34, .12) 55%, rgba(237, 28, 36, 0) 100%);
  box-shadow: 0 0 60px 18px rgba(245, 130, 31, 0);
  transition: opacity 1.2s ease, box-shadow 1.2s ease;
}
.el-ent.ist-warm .el-ent__glut { animation: el-ent-glut 7s ease-out forwards; box-shadow: 0 0 80px 24px rgba(245, 130, 31, .28); transition: box-shadow 7s ease; }
@keyframes el-ent-glut { 0% { opacity: 0; } 14% { opacity: .45; } 100% { opacity: 1; } }
.el-ent__led { position: absolute; left: 60%; top: 3.2%; font: 500 11px/1 'Barlow', sans-serif; letter-spacing: .12em; color: var(--el-rot); opacity: 0; text-shadow: 0 0 6px rgba(237, 28, 36, .6); transition: opacity .6s ease; }
.el-ent.ist-warm .el-ent__led { opacity: 1; }
.el-ent__wellen { position: absolute; left: 50%; bottom: 100%; width: 70%; height: 11%; transform: translateX(-50%); opacity: 0; transition: opacity 1s ease; }
.el-ent.ist-warm .el-ent__wellen { opacity: 1; transition-delay: .8s; }
.el-ent__wellen path { fill: none; stroke: rgba(241, 90, 34, .45); stroke-width: 1.4; stroke-linecap: round; }
.el-ent.ist-warm .el-ent__wellen path { animation: el-ent-welle 3.2s ease-in-out infinite; }
.el-ent.ist-warm .el-ent__wellen path:nth-child(2) { animation-delay: 1.05s; }
.el-ent.ist-warm .el-ent__wellen path:nth-child(3) { animation-delay: 2.1s; }
@keyframes el-ent-welle { 0% { transform: translateY(12px); opacity: 0; } 35% { opacity: 1; } 100% { transform: translateY(-14px); opacity: 0; } }

/* Hotspots */
.el-ent__punkte { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.el-ent__punkt {
  position: absolute; left: var(--x); top: var(--y); width: 44px; height: 44px; margin: -22px 0 0 -22px; padding: 0;
  background: none; border: 0; border-radius: 50%; cursor: pointer;
}
.el-ent__punkt::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%;
  background: var(--el-rot); box-shadow: 0 0 0 4px rgba(255, 255, 255, .92), 0 4px 14px rgba(63, 83, 93, .35);
  transition: transform .3s cubic-bezier(.3, .7, .2, 1), background-color .3s ease;
}
.el-ent__punkt::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%;
  border: 2px solid rgba(237, 28, 36, .55); animation: el-ent-puls 2.4s ease-out infinite;
}
.el-ent.ist-benutzt .el-ent__punkt:not(.ist-aktiv)::after { animation: none; opacity: 0; }
.el-ent__punkt:hover::before, .el-ent__punkt.ist-aktiv::before { transform: scale(1.35); background: var(--el-rot-dunkel); }
@keyframes el-ent-puls { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(2.8); opacity: 0; } }
.el-ent__etikett {
  position: absolute; left: calc(100% - 4px); top: 50%; transform: translate(4px, -50%); white-space: nowrap; pointer-events: none;
  padding: 6px 10px; font: 500 13px/1 'Barlow', sans-serif; letter-spacing: .02em; color: var(--el-schiefer-dunkel);
  background: rgba(255, 255, 255, .94); border-radius: 3px; box-shadow: 0 6px 18px -8px rgba(63, 83, 93, .5);
  opacity: 0; transition: opacity .25s ease, transform .25s ease;
}
.el-ent__punkt--links .el-ent__etikett { left: auto; right: calc(100% - 4px); transform: translate(-4px, -50%); }
.el-ent__punkt.ist-aktiv .el-ent__etikett { opacity: 1; transform: translate(0, -50%); }

/* Suchergebnisse */
.el-suchtitel { margin: 0; font: 300 46px/1.12 'Barlow', sans-serif; color: var(--el-schiefer-dunkel); letter-spacing: .005em; }
@media (max-width: 767px) { .el-suchtitel { font-size: 32px; } }
.el-suche input[type="search"] { font-family: 'Barlow', sans-serif; font-weight: 300; }

/* Knöpfe und Kurzfakten im Kopfbereich der Startseite */
.el-ent__knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 30px; }
.el-ent__hinweis { margin: 14px 0 0; }
.el-ent__fakten { margin-top: 26px; }

/* Kit-Buttonstil (.elementor-kit-1470 button, auch :hover/:focus) für diese Knöpfe aufheben */
.el-ent .el-ent__punkt, .el-ent .el-ent__punkt:hover, .el-ent .el-ent__punkt:focus {
  padding: 0; background: none; color: inherit; border: 0; border-radius: 50%; text-transform: none; letter-spacing: normal;
}
.el-ent .el-ent__chip, .el-ent .el-ent__chip:hover, .el-ent .el-ent__chip:focus {
  padding: 8px 14px 8px 10px; background: #fff; color: var(--el-schiefer-dunkel); border-radius: 999px;
  font-size: 14px; text-transform: none; letter-spacing: .01em;
}
.el-ent .el-ent__chip:hover { border-color: var(--el-schiefer-hell); }
.el-ent .el-ent__chip.ist-aktiv, .el-ent .el-ent__chip.ist-aktiv:hover, .el-ent .el-ent__chip.ist-aktiv:focus { color: var(--el-rot-dunkel); border-color: var(--el-rot-dunkel); }
.el-ent .el-ent__schalter, .el-ent .el-ent__schalter:focus {
  padding: 10px 20px 10px 12px; background: var(--el-schiefer-dunkel); color: #fff; border-radius: 999px;
  font-size: 15px; text-transform: none; letter-spacing: .04em;
}
.el-ent .el-ent__schalter:hover { background: #2F3F47; color: #fff; }

.el-ent > * { min-width: 0; }
/* Beschriftung des aktiven Punktes — auf dem Handy statt der Sprechblasen */
.el-ent__marke {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: none;
  margin: 0; padding: 9px 18px; max-width: calc(100% - 28px);
  font: 500 14px/1.2 'Barlow', sans-serif; letter-spacing: .02em; color: var(--el-schiefer-dunkel);
  background: rgba(255, 255, 255, .94); border-radius: 999px;
  box-shadow: 0 8px 20px -10px rgba(63, 83, 93, .6);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.el-ent__leiste { display: none; }
.el-ent__nur-klein { display: none; }

@media (max-width: 1024px) {
  .el-ent { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .el-ent__text { max-width: 680px; }
  .el-ent h1 { font-size: 46px; }
  .el-ent__buehne { max-width: min(460px, 100%); }
}
@media (max-width: 767px) {
  /* Auf dem Handy bleibt das Bild beim Scrollen oben stehen, damit man beim Lesen
     der Infokarte und beim Einschalten immer sieht, was am Gerät passiert. */
  /* align-items aus der Desktop-Fassung zurücksetzen, sonst bekommt der randlose
     Bildrahmen keine Breite (width:100% ohne gestreckten Rahmen = 0) */
  .el-ent { display: flex; flex-direction: column; gap: 0; align-items: stretch; }

  /* Kein «Kleben» am oberen Rand: sonst schieben sich Themen und Karte hinter das Bild.
     Bild, Themenleiste und Karte sind zusammen knapp 580 px hoch und passen so auf einen Schirm. */
  /* randlos: bricht aus dem 18-px-Rand des Abschnitts aus */
  .el-ent__buehne-rahmen { order: -1; margin: 0 -18px 16px; }
  .el-ent__buehne { aspect-ratio: 1200 / 1020; width: 100%; max-width: none; border-radius: 0; }
  .el-ent__punkt { left: var(--xm, var(--x)); top: var(--ym, var(--y)); width: 40px; height: 40px; margin: -20px 0 0 -20px; }
  .el-ent__punkt::before { width: 14px; height: 14px; margin: -7px 0 0 -7px; }
  .el-ent__glas { left: 57%; top: 7.8%; width: 20.8%; height: 96.3%; }
  .el-ent__etikett { display: none; }

  /* Beschriftung des aktiven Punktes in die freie obere Ecke — überdeckt keine Punkte */
  .el-ent__marke {
    display: block; left: 14px; top: 14px; bottom: auto; transform: none;
    max-width: 52%; padding: 7px 14px; font-size: 13px;
  }

  /* Schalter und Fortschritt liegen im Bild (per JavaScript dorthin gehängt) */
  /* Schalter unten links, Fortschritt als feine Linie an der Bildunterkante —
     dort liegt kein Hotspot mehr (vorher lag der Balken quer über den Punkten) */
  .el-ent__leiste { display: block; position: absolute; inset: auto 0 0 0; z-index: 4; }
  .el-ent .el-ent__leiste .el-ent__schalter { position: absolute; left: 14px; bottom: 16px; }
  .el-ent__leiste .el-ent__zeit { position: absolute; left: 0; right: 0; bottom: 0; }
  .el-ent__leiste .el-ent__zeit-balken { height: 4px; border-radius: 0; }
  .el-ent .el-ent__leiste .el-ent__schalter {
    min-height: 40px; padding: 7px 16px 7px 8px; font-size: 13px; letter-spacing: .03em;
    box-shadow: 0 8px 18px -10px rgba(63, 83, 93, .8);
  }
  .el-ent__leiste .el-ent__schalter-knopf { width: 32px; height: 18px; }
  .el-ent__leiste .el-ent__schalter-knopf::after { width: 12px; height: 12px; }
  .el-ent.ist-warm .el-ent__leiste .el-ent__schalter-knopf::after { transform: translateX(14px); }
  .el-ent__leiste .el-ent__zeit-balken { background: rgba(255, 255, 255, .55); }
  .el-ent__leiste .el-ent__zeit-marken { display: none; }

  /* Reihenfolge: Bild → Themen → Karte → Titel → Knöpfe.
     So sind Gerät, Themenknöpfe und Infokarte ohne Scrollen zusammen sichtbar. */
  .el-ent__text { display: flex; flex-direction: column; min-width: 0; max-width: 100%; }
  /* ohne min-width:0 drückt die nicht umbrechende Themenleiste die ganze Spalte breit */
  .el-ent__text > * { min-width: 0; }
  .el-ent__kicker { order: 6; margin: 4px 0 10px; }
  .el-ent__text > h1, .el-ent__text > h2 { order: 7; margin-bottom: 12px; font-size: 32px; }
  .el-ent__lead { order: 8; margin-bottom: 20px; font-size: 17px; }
  /* eine Zeile mit seitlichem Scrollen statt drei Zeilen — spart Höhe;
     der aktive Knopf wird per JavaScript in die Sicht geschoben */
  .el-ent__chips {
    order: 1; margin: 0 -18px 14px; padding: 2px 18px 8px;
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
  }
  .el-ent__chips::-webkit-scrollbar { display: none; }
  .el-ent__chip { flex: none; }
  .el-ent__karten { order: 2; margin-bottom: 20px; }
  .el-ent__knoepfe { order: 9; margin-bottom: 22px; }
  .el-ent__schalter-zeile { order: 10; }
  .el-ent__hinweis { order: 11; }
  .el-ent__fakten { order: 12; margin-top: 20px; }

  /* Karte kompakter, damit sie neben dem stehenden Bild ganz sichtbar ist */
  .el-ent__karte { padding: 18px 18px 16px; }
  .el-ent__karte h2 { font-size: 19px; gap: 10px; margin-bottom: 8px; }
  .el-ent__karte h2 svg { width: 24px; height: 24px; }
  .el-ent__karte p { font-size: 15.5px; line-height: 1.6; }
  .el-ent__karte .el-fussnote { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .el-ent *, .el-ent *::before, .el-ent *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .el-ent.ist-warm .el-ent__glut { opacity: 1; }
  .el-ent.ist-warm .el-ent__zeit-balken::after { transform: scaleX(1); }
}

/* Lange deutsche Wörter in Titeln (z. B. «Datenschutzerklärung») dürfen auf dem Handy trennen statt überzulaufen */
@media (max-width: 767px) {
  h1, h2, h3, .elementor-heading-title { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
}
@media (max-width: 1024px) {
  .el-vgl { grid-template-columns: 1fr; padding: 28px; }
  /* Querformate sonst über 600 px hoch gezeichnet */
  .el-vgl__gruppe:last-child svg { max-width: 520px; }
}
/* Handy: Grafik nicht unter Lesbarkeit schrumpfen, sondern seitlich scrollen
   (sonst Beschriftung ~5 px bei 305 px Breite) */
@media (max-width: 767px) {
  .el-vgl { padding: 20px 16px; }
  .el-vgl__gruppe { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .el-vgl__gruppe:first-child svg { min-width: 600px; }
  .el-vgl__gruppe:last-child svg { min-width: 420px; }
}

/* --- Einwilligung --------------------------------------------------------- */
.el-consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  background: var(--el-weiss);
  border-top: 1px solid var(--el-linie);
  box-shadow: 0 -8px 32px rgba(63, 83, 93, .10);
}
.el-consent[hidden] { display: none; }
.el-consent__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 20px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px 40px;
}
.el-consent__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--el-schiefer);
  max-width: 760px;
}
.el-consent__text a { color: var(--el-rot-dunkel); }
.el-consent__knoepfe { display: flex; gap: 12px; flex: none; }
.el-consent__knopf {
  font-family: 'Barlow', sans-serif;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 13px 22px;
  border: 1px solid var(--el-rot-dunkel);
  border-radius: 0;
  background: var(--el-rot-dunkel);
  color: var(--el-weiss);
  cursor: pointer;
  transition: background-color var(--el-uebergang), color var(--el-uebergang);
}
.el-consent__knopf:hover { background: var(--el-rot); border-color: var(--el-rot); }
.el-consent__knopf--leise { background: transparent; color: var(--el-rot-dunkel); }
.el-consent__knopf--leise:hover { background: var(--el-grund); color: var(--el-rot-dunkel); border-color: var(--el-rot-dunkel); }
@media (max-width: 767px) {
  .el-consent__inner { flex-direction: column; align-items: stretch; padding: 18px; }
  .el-consent__knoepfe { flex-direction: column-reverse; }
  .el-consent__knopf { width: 100%; }
}

/* --- Rechtstexte / Fliesstext-Seiten --------------------------------------- */
.el-rechtstext h2 {
  margin: 48px 0 12px;
}
.el-rechtstext h2:first-child { margin-top: 0; }
.el-rechtstext h3 {
  margin: 28px 0 8px;
  color: var(--el-schiefer-dunkel);
}
.el-rechtstext ul { padding-left: 1.2em; margin: 0 0 18px; }
.el-rechtstext li { margin-bottom: 6px; }
.el-rechtstext a { word-break: break-word; }

/* Entwurfshinweis und «bitte prüfen»-Markierungen (vor Livegang entfernen) */
.el-entwurf {
  border-left: 3px solid var(--el-gelb);
  background: #FFF8EA;
  padding: 16px 20px;
  margin: 0 0 40px;
  color: var(--el-schiefer-dunkel);
  font-size: 15px;
}
.el-pruefen {
  background: #FFF1C9;
  box-shadow: 0 0 0 2px #FFF1C9;
}

/* Bewegung reduzieren, wenn gewünscht */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0ms !important;
    animation-duration: 0ms !important;
  }
}