/*
 * Bewusste Abweichungen von der WordPress-Seite.
 *
 * Alles andere ist 1:1 übernommen. Was hier steht, behebt Fehler des
 * Originals und ist jeweils auf den betroffenen Breitenbereich begrenzt,
 * damit der Rest pixelgleich bleibt.
 */

/*
 * Seitenrand zwischen Tablet-Umbruch und voller Inhaltsbreite (12.10.2026).
 *
 * Der Inhalt ist 1280 px breit, hatte aber von 1025 bis 1280 px keinen
 * Seitenrand: Logo und Boxen klebten am Fensterrand, und der Knopf
 * «Registrieren» ragte bis 1150 px rechts hinaus (horizontaler Scrollbalken).
 * Ab 1360 px ergibt sich der Rand von selbst ((Breite − 1280) / 2 ≥ 40).
 */
@media (min-width: 1025px) and (max-width: 1359px) {
  .elementor-top-section.elementor-section-boxed > .elementor-container {
    max-width: calc(100% - 80px);
  }

  /* Header: Die rechte Spalte war schmaler als ihr Knopf. Logo und Knopf
     nehmen ihre eigene Breite, das Menü den Rest. */
  .elementor-location-header .elementor-top-section > .elementor-container > .elementor-column:last-child {
    width: auto;
    flex: 0 0 auto;
  }
  .elementor-location-header .elementor-top-section > .elementor-container > .elementor-column:nth-child(2) {
    width: auto;
    flex: 1 1 0;
    min-width: 0;
  }
}

/*
 * Pills der Strategie-Karten (12.10.2026).
 *
 * Jede Pill hatte im Original ihren eigenen Aussenabstand: die erste keinen,
 * die übrigen 10 px links, manche 10 px unten. Brach die Reihe um, begann
 * die zweite Zeile eingerückt, und der Abstand zum Titel schwankte zwischen
 * 0 und 10 px. Jetzt: 10 px rechts und unten, für alle gleich.
 */
/* Nur Pills, die in derselben Karte wie die Performance-Fee-Leiste stehen –
   andere schmale Überschriften der Seite bleiben unberührt. */
.elementor-widget-wrap:has(> .elementor-widget-progress) > .elementor-widget-heading.elementor-widget__width-auto > .elementor-widget-container {
  margin: 0 10px 10px 0 !important;
}

/*
 * Bild neben dem Akkordeon läuft beim Scrollen mit (12.10.2026).
 *
 * Klappt man links einen Punkt auf, wird die Spalte höher als das Bild
 * rechts; es blieb in der Mitte stehen und rutschte aus dem Blick. Jetzt
 * haftet es unter dem Header, solange die Spalte im Bild ist. Nur wo die
 * Spalten nebeneinander stehen.
 */
@media (min-width: 1025px) {
  .elementor-container:has(> .elementor-column .elementskit-accordion)
    > .elementor-column:not(:has(.elementskit-accordion))
    > .elementor-widget-wrap {
    align-content: flex-start;
    align-items: flex-start;
  }
  .elementor-container:has(> .elementor-column .elementskit-accordion)
    > .elementor-column:not(:has(.elementskit-accordion))
    > .elementor-widget-wrap
    > .elementor-widget-image {
    position: sticky;
    top: 150px;
  }
}
/* Tablet (14.10.2026): Bild und Akkordeon bleiben nebeneinander statt
   eines 730 × 550 px grossen Fotos über dem Text; das Bild haftet ebenso. */
@media (min-width: 768px) and (max-width: 1024px) {
  .elementor-container:has(> .elementor-column .elementskit-accordion) > .elementor-column:has(.elementskit-accordion) {
    width: 58% !important;
  }
  .elementor-container:has(> .elementor-column .elementskit-accordion) > .elementor-column:not(:has(.elementskit-accordion)) {
    width: 42% !important;
  }
  .elementor-container:has(> .elementor-column .elementskit-accordion)
    > .elementor-column:not(:has(.elementskit-accordion))
    > .elementor-widget-wrap {
    align-content: flex-start !important;
    align-items: flex-start !important;
  }
  .elementor-container:has(> .elementor-column .elementskit-accordion)
    > .elementor-column:not(:has(.elementskit-accordion))
    > .elementor-widget-wrap
    > .elementor-widget-image {
    position: sticky;
    top: 100px;
  }
  /* Hochformat, damit das Bild neben dem Text nicht verloren wirkt. */
  .elementor-container:has(> .elementor-column .elementskit-accordion)
    > .elementor-column:not(:has(.elementskit-accordion))
    .elementor-widget-image img {
    aspect-ratio: 4 / 5;
    object-fit: cover;
    height: auto !important;
  }
}

/*
 * «Registrieren» auf dem dunklen Chart-Bild sichtbar machen (12.10.2026).
 *
 * Der Knopf war schwarz auf einem fast schwarzen Bild. Jetzt weiss mit
 * schwarzer Schrift, beim Überfahren in der Akzentfarbe.
 *
 * Die Liste sind die Spalten, die `pexels-alesia-kozik-…jpg` als
 * Hintergrund tragen (gesucht im Elementor-CSS unter
 * `public/stil/elementor/seiten/`). Kommt eine solche Box neu
 * dazu, gehört ihre Spalten-ID hier hinein.
 */
:is(
    .elementor-element-5fb447c,
    .elementor-element-d7b201a,
    .elementor-element-4c39affa,
    .elementor-element-633ac8a,
    .elementor-element-79b3726d,
    .elementor-element-d579674,
    .elementor-element-4a4f9015,
    .elementor-element-3ffe59a,
    .elementor-element-11f3296b,
    .elementor-element-f646055,
    .elementor-element-1c1d60da
  )
  .elementor-button {
  background-color: #fff !important;
  color: #000 !important;
  fill: #000 !important;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
  transition: background-color 0.2s, transform 0.2s;
}
:is(
    .elementor-element-5fb447c,
    .elementor-element-d7b201a,
    .elementor-element-4c39affa,
    .elementor-element-633ac8a,
    .elementor-element-79b3726d,
    .elementor-element-d579674,
    .elementor-element-4a4f9015,
    .elementor-element-3ffe59a,
    .elementor-element-11f3296b,
    .elementor-element-f646055,
    .elementor-element-1c1d60da
  )
  .elementor-button:is(:hover, :focus-visible) {
  background-color: var(--e-global-color-accent, #c8b89a) !important;
  transform: translateY(-2px);
}

/*
 * Footer-Listen: umgebrochene Einträge als EIN Eintrag lesbar (12.10.2026).
 *
 * Zeilenabstand 1.65 bei nur 4 px zwischen den Einträgen – «Compound /
 * Calculator» sah aus wie zwei Links. Jetzt enger Zeilenabstand im Eintrag
 * und deutlicher Abstand dazwischen; ein einzeiliger Eintrag nimmt praktisch
 * gleich viel Höhe ein wie vorher.
 */
.elementor-location-footer .elementor-widget-icon-list .elementor-icon-list-text {
  line-height: 1.3 !important;
}
.elementor-location-footer
  .elementor-widget-icon-list
  .elementor-icon-list-items:not(.elementor-inline-items)
  .elementor-icon-list-item:not(:last-child) {
  padding-bottom: 5px !important;
}
.elementor-location-footer
  .elementor-widget-icon-list
  .elementor-icon-list-items:not(.elementor-inline-items)
  .elementor-icon-list-item:not(:first-child) {
  margin-top: 5px !important;
}

/*
 * Header auf Tablet-Breite, 768–1024 px (12.10.2026).
 *
 * Die drei Spalten waren prozentual: Das Logo schrumpfte auf 92 px (kleiner
 * als auf dem Handy), und der Burger stand mitten im Header links vom
 * Knopf. Jetzt: Logo links in fester Grösse, rechts der Knopf und ganz
 * aussen der Burger.
 */
@media (min-width: 768px) and (max-width: 1024px) {
  .elementor-location-header .elementor-top-section > .elementor-container {
    align-items: center;
  }
  .elementor-location-header .elementor-top-section > .elementor-container > .elementor-column {
    width: auto;
    flex: 0 0 auto;
  }
  .elementor-location-header .elementor-top-section > .elementor-container > .elementor-column:first-child img {
    width: 150px;
    max-width: none;
    height: auto;
  }
  /* Knopf vor den Burger, beide nach rechts. */
  .elementor-location-header .elementor-top-section > .elementor-container > .elementor-column:nth-child(3) {
    order: 2;
    margin-left: auto;
  }
  .elementor-location-header .elementor-top-section > .elementor-container > .elementor-column:nth-child(2) {
    order: 3;
    margin-left: 14px;
  }
}

/*
 * Tablet: einzelne Spalten über die ganze Breite (14.10.2026).
 *
 * Elementor hatte auf 768–1024 px manchen Spalten 50 % gegeben, die allein
 * in ihrem Abschnitt stehen (Strategieseiten, Backtest, Dubai). Rechts blieb
 * eine leere Hälfte – auf der WP-Seite genauso.
 */
@media (min-width: 768px) and (max-width: 1024px) {
  .elementor-section .elementor-container > .elementor-col-100 {
    width: 100% !important;
  }
  /* Strategie-Karten zwei pro Reihe statt eine über die ganze Breite
     (Bild bis 980 px hoch). Eine einzelne letzte Karte steht mittig. */
  .elementor-container:has(> .elementor-column .sb-kpi--karte) {
    justify-content: center;
  }
  .elementor-container > :is(.elementor-col-25, .elementor-col-33):has(.sb-kpi--karte) {
    width: 50% !important;
  }
  /* Knöpfe einzeilig: «Mehr erfahren» sass in 35 % der Kartenbreite und
     brach um, «Alle Strategien entdecken» ebenso. */
  .elementor-widget-button.elementor-widget__width-initial {
    width: auto !important;
    max-width: 100% !important;
  }
  .elementor-button-text {
    white-space: nowrap;
  }
  /* Der lange WhatsApp-Knopf darf in der halben Box weiter umbrechen. */
  a.elementor-button[href*='wa.me'] .elementor-button-text {
    white-space: normal;
  }
  /* «Über uns»-Kopf: Der Text läuft hier fast über die ganze Breite des
     Stadtbilds; der dunkle Verlauf reichte nur bis zur Mitte. */
  .elementor-element-2bdc356b > .elementor-widget-wrap > .elementor-background-overlay {
    background-image: linear-gradient(90deg, rgba(34, 40, 49, 0.72) 0%, rgba(34, 40, 49, 0.55) 60%, rgba(34, 40, 49, 0.1) 100%) !important;
  }
  /* Leere Platzhalter-Spalten neben der letzten Karte entfallen. */
  .elementor-container:has(> .elementor-column .sb-kpi--karte) > .elementor-column:not(:has(.elementor-widget)) {
    display: none;
  }
}

/*
 * Startseite, Kopfbereich: rechte Spalte so hoch wie die linke (12.10.2026).
 *
 * Die zwei Boxen rechts hatten feste Höhen. Auf Tablet-Breite war die linke
 * Box höher, rechts blieb unten eine Lücke. Jetzt füllt die Bild-Box den
 * Rest, bei jeder Breite, in der die Spalten nebeneinander stehen.
 */
@media (min-width: 768px) {
  .elementor-element-4440480a > .elementor-widget-wrap {
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: normal;
    align-items: stretch;
  }
  .elementor-element-4440480a > .elementor-widget-wrap > .elementor-inner-section {
    flex: 0 0 auto;
    width: 100%;
  }
  .elementor-element-4440480a > .elementor-widget-wrap > .elementor-inner-section:last-child {
    flex: 1 1 auto;
    display: flex;
  }
  .elementor-element-4440480a > .elementor-widget-wrap > .elementor-inner-section:last-child > .elementor-container {
    flex: 1 1 auto;
  }
}

/*
 * Footer, unterste Zeile (12.10.2026): Die zwei Spalten waren je 50 % breit.
 * Links brach «by your-hnc.com» um, obwohl rechts nur «Impressum» stand.
 * Jetzt nimmt die rechte Spalte, was sie braucht, die linke den Rest.
 */
@media (min-width: 768px) {
  .elementor-location-footer > .elementor-top-section:last-child > .elementor-container > .elementor-column:first-child {
    width: auto;
    flex: 1 1 auto;
  }
  .elementor-location-footer > .elementor-top-section:last-child > .elementor-container > .elementor-column:last-child {
    width: auto;
    flex: 0 0 auto;
  }
}

/*
 * Footer-Spalten: kein Überlauf langer Wörter (12.10.2026).
 *
 * Die Spalten waren prozentual. «Empfehlungsprogramm» ragte auf dem Handy
 * und von 768 bis rund 1120 px aus der Spalte «Links» hinaus. Unter 1280 px
 * ist die Zeile deshalb ein Raster: Jede Link-Spalte ist mindestens so breit
 * wie ihr längstes Wort, den Rest bekommt der Text links. Ab 1280 px bleibt
 * die Aufteilung des Originals.
 */
@media (max-width: 1279px) {
  .elementor-location-footer > .elementor-top-section:first-child > .elementor-container {
    display: grid;
    grid-template-columns: minmax(0, 2fr) repeat(3, minmax(min-content, 1fr));
  }
  .elementor-location-footer > .elementor-top-section:first-child > .elementor-container > .elementor-column {
    width: auto !important;
    min-width: 0;
  }
}
@media (max-width: 1120px) {
  .elementor-location-footer
    > .elementor-top-section:first-child
    > .elementor-container
    > .elementor-column:not(:first-child):not(:last-child)
    > .elementor-widget-wrap {
    padding-right: 24px !important;
  }
  .elementor-location-footer
    > .elementor-top-section:first-child
    > .elementor-container
    > .elementor-column:last-child
    > .elementor-widget-wrap {
    padding-right: 0 !important;
  }
}
@media (max-width: 767px) {
  /* Handy: Text über die ganze Breite, darunter die Link-Spalten
     nebeneinander – passt eine nicht mehr in die Zeile (DE: «Empfehlungs-
     programm»), rutscht sie darunter, statt hinauszuragen. */
  .elementor-location-footer > .elementor-top-section:first-child > .elementor-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
  }
  .elementor-location-footer > .elementor-top-section:first-child > .elementor-container > .elementor-column {
    flex: 1 1 0;
    min-width: min-content;
  }
  .elementor-location-footer > .elementor-top-section:first-child > .elementor-container > .elementor-column:first-child {
    flex: 0 0 100%;
    min-width: 0;
  }
  .elementor-location-footer
    > .elementor-top-section:first-child
    > .elementor-container
    > .elementor-column:not(:first-child)
    > .elementor-widget-wrap {
    padding-right: 0 !important;
  }
}

/*
 * Handy: nichts ragt seitlich hinaus (12.10.2026).
 *
 * Auf schmalen Bildschirmen liess sich gut die Hälfte der Seiten horizontal
 * scrollen (auf der WordPress-Seite ebenso). Drei Ursachen:
 *
 *  1. Überschriften mit langen Wörtern in fester Grösse («Automatisiertes»,
 *     «Datenschutzerklärung»). Die Hauptüberschrift skaliert jetzt mit der
 *     Breite, und lange Wörter werden getrennt statt abgeschnitten.
 *  2. Tabellen in Blogbeiträgen. Sie scrollen jetzt in sich.
 *  3. Das Monatsraster der Dashboards mit sechs Spalten. Auf dem Handy vier.
 */
@media (max-width: 767px) {
  :is(h1, h2, h3, h4, h5, h6, .elementor-heading-title) {
    overflow-wrap: break-word;
    -webkit-hyphens: auto;
    hyphens: auto;
    /* Nur wirklich lange Wörter trennen («Datenschutzerklärung»), nicht
       «Tra-ding», bloss weil es gerade passt. */
    hyphenate-limit-chars: 14 6 6;
    -webkit-hyphenate-limit-before: 6;
    -webkit-hyphenate-limit-after: 6;
  }
  .elementor-widget-text-editor table,
  .elementor-widget-theme-post-content table,
  .elementor-widget-html table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
@media (max-width: 480px) {
  h1.elementor-heading-title,
  .elementor-widget-theme-post-title h1,
  .elementor-widget-heading h1 {
    font-size: clamp(32px, 10.5vw, 50px) !important;
  }
  [class^='ctd-monthly-'] {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/*
 * Blog-Karten gleichmässig (12.10.2026).
 *
 * Die Vorschaubilder hatten ihr eigenes Seitenverhältnis – ein breiteres
 * Bild war niedriger, Titel und Datum der Karte sassen höher als bei den
 * Nachbarn. Jetzt haben alle Bilder 3:2 (beschnitten statt verzerrt), und
 * das Datum steht in jeder Reihe auf derselben Höhe am Kartenfuss.
 */
.post-items > .post-item {
  display: flex;
}
/* `!important`: Das Blog-Widget setzt `display` mit höherer Spezifität. */
.post-items > .post-item > .elementskit-post-image-card {
  display: flex !important;
  flex-direction: column !important;
  width: 100%;
}
.post-items .elementskit-entry-thumb {
  display: block;
}
.post-items .elementskit-entry-thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.post-items .elementskit-post-body {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
}
.post-items .elementskit-post-body .post-meta-list {
  margin-top: auto !important;
}

/*
 * Kopf der Seite sofort zeigen (12.10.2026).
 *
 * Elementor blendet fast jedes Element ein: Es steht im HTML als unsichtbar
 * und wird erst sichtbar, wenn das letzte Skript gelaufen ist. Für Header
 * und ersten Abschnitt hiess das: mehrere Sekunden weisser Bildschirm, bei
 * einem Erstbesuch mit Cookiebot über sechs.
 *
 * Header und erster Abschnitt sind deshalb von Anfang an sichtbar und
 * werden nicht mehr eingeblendet. Alles darunter animiert wie bisher.
 */
.elementor-location-header .elementor-invisible,
:is([data-elementor-type='wp-page'], [data-elementor-type='wp-post']) > .elementor-top-section:first-child .elementor-invisible,
:is([data-elementor-type='wp-page'], [data-elementor-type='wp-post']) > .elementor-top-section:first-child.elementor-invisible {
  visibility: visible !important;
}
/* Fügt Elementor später seine Animationsklasse an, soll nichts mehr
   aufblitzen: keine Animation in diesem Bereich. */
.elementor-location-header :is(.elementor-invisible, .animated),
:is([data-elementor-type='wp-page'], [data-elementor-type='wp-post']) > .elementor-top-section:first-child :is(.elementor-invisible, .animated),
:is([data-elementor-type='wp-page'], [data-elementor-type='wp-post']) > .elementor-top-section:first-child:is(.elementor-invisible, .animated) {
  animation: none !important;
  opacity: 1 !important;
}

/*
 * Einblenden ohne Elementor (12.10.2026).
 *
 * Bisher hing die SICHTBARKEIT des Inhalts an Elementors JavaScript: Jedes
 * Element stand als unsichtbar im HTML, und nur ein fehlerfrei gestartetes
 * Elementor machte es sichtbar. Fiel in der Kette von 28 Skripten eines aus
 * (oder hielt Cookiebot sie zurück), blieb die Seite unterhalb des ersten
 * Abschnitts leer.
 *
 * Jetzt gilt umgekehrt: Der Inhalt ist sichtbar. Das Einblenden ist eine
 * Zugabe des kleinen Skripts im Seitenkopf (`EINBLENDEN` in seiten.mjs) –
 * es versteckt nur, was es selbst wieder zeigt, und gibt nach 5 Sekunden
 * alles frei, falls es nicht starten konnte. Elementors eigene Einblendung
 * ist abgeschaltet.
 */
.elementor-invisible {
  visibility: visible !important;
}
html.sb-ein .elementor-invisible:not([data-sb]),
html.sb-ein [data-sb='0'] {
  opacity: 0;
}
[data-sb] {
  transition: opacity 0.7s ease, transform 0.7s ease;
}
html.sb-ein [data-sb='0'][data-sb-art='up'] {
  transform: translateY(32px);
}
html.sb-ein [data-sb='0'][data-sb-art='down'] {
  transform: translateY(-32px);
}
html.sb-ein [data-sb='0'][data-sb-art='left'] {
  transform: translateX(-32px);
}
html.sb-ein [data-sb='0'][data-sb-art='right'] {
  transform: translateX(32px);
}
[data-sb].animated,
[data-sb].elementor-invisible {
  animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
  html.sb-ein .elementor-invisible,
  html.sb-ein [data-sb] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/*
 * Seitenköpfe mit Hintergrundfoto (16.10.2026): Elementor legt die
 * Kit-Farbe «secondary» (Lindgrün #C9EB55) unter das Bild. Bis das Foto
 * geladen war (bis 900 kB), blitzte der Kopf grün. Jetzt liegt darunter
 * dasselbe Dunkel wie im Overlay. Strategieseiten: `.sb-kopf` in eigenes.css.
 */
:is(
    .elementor-element-2bdc356b,
    .elementor-element-28856b21,
    .elementor-element-59c617d0,
    .elementor-element-3f2c673,
    .elementor-element-7169b474,
    .elementor-element-69020f00,
    .elementor-element-3ffe59a,
    .elementor-element-b2908fe
  )
  > .elementor-widget-wrap {
  background-color: #222831 !important;
}