/* =====================================================================
   VTS — Hero als Zweiteiler

   Die Bildkarte und der Aktionsstreifen sitzen in einer gemeinsamen
   Säule. Vorher war die Aktion eine schwebende weisse Karte, die halb
   aus dem Bild ragte, links aus dem Raster fiel und auf dem Handy dem
   fixierten Kopf ins Gehege kam. Jetzt ist sie ein eigener Streifen
   unter der Karte — sie kann nichts mehr überlagern.

   Dazu die Höhe: Kopf, Hero und der fixierte FINMA-Balken sollen auf
   jedem Bildschirm zusammen aufgehen. Die beiden Höhen misst
   hero.js und legt sie als Variablen ab; die Werte in var(...) sind
   nur der Rückfall, falls das Skript nicht läuft.
   ===================================================================== */

/* ------------------------------------------------------------- Höhe */
.mkw-94 .mkw-element.mkw-element-be9a8c8 {
  min-height: calc(100dvh
      - var(--vts-kopf-hoehe, 126px)
      - var(--vts-balken-hoehe, 110px));
  --padding-top: 26px;
  --padding-bottom: 26px;
  align-content: center;
}

/* ------------------------------------------------------------ Säule */
.vts-hero-saeule {
  display: flex;
  flex-direction: column;
  gap: 14px;
  /* Dieselbe Breite, die die Bildkarte vorher allein hatte. */
  width: 60%;
  min-width: 0;
}
@media (min-width: 1025px) {
  .vts-hero-saeule { min-height: 0; }
}

/* Die Bildkarte füllt, was der Streifen übrig lässt. Das min-height: 0
   verhindert, dass sie über die Säule hinauswächst — es gilt aber nur
   dort, wo die Säule die Höhe vorgibt. Unter 1025 px stapeln die
   Spalten, und die Karte behält ihre eigenen 65 vh. */
.mkw-94 .mkw-element.mkw-element-c217328 {
  --width: 100%;
}
@media (min-width: 1025px) {
  .mkw-94 .mkw-element.mkw-element-c217328 {
    flex: 1 1 auto;
    min-height: 0;
  }
}

/* ---------------------------------------------------- Aktionsstreifen */
.mkw-94 .mkw-element.mkw-element-846837d {
  /* War absolut positioniert und ragte aus dem Raster. relative statt
     static: Mkw malt Container-Overlays als absolut positioniertes
     ::before in voller Grösse — ohne positionierten Anker griffe das auf
     den ganzen Hero über. */
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  --width: 100%;
  flex: 0 0 auto;

  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: nowrap;

  --padding-top: 14px;
  --padding-bottom: 14px;
  --padding-left: 20px;
  --padding-right: 20px;
  --border-radius: 10px;

  border: 1px solid #e6e6f0;
  box-shadow: 0 2px 14px rgba(5, 5, 130, .08);
  text-decoration: none;
  transition: box-shadow .18s, border-color .18s;
}
.mkw-94 .mkw-element.mkw-element-846837d:hover {
  border-color: #c9cbe4;
  box-shadow: 0 4px 20px rgba(5, 5, 130, .14);
}
.mkw-94 .mkw-element.mkw-element-846837d:focus-visible {
  outline: 3px solid #0063ff;
  outline-offset: 3px;
}

/* Der Titel nimmt den Platz, der Chip bleibt so breit wie sein Text. */
.mkw-94 .mkw-element.mkw-element-4b20acf {
  flex: 1 1 auto;
  min-width: 0;
}

/* Der orange Chip war ebenfalls absolut und schwebte über der Karte. */
.mkw-94 .mkw-element.mkw-element-54fec16 {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  --width: auto;
  flex: 0 0 auto;
  --padding-top: 11px;
  --padding-bottom: 11px;
  --padding-left: 16px;
  --padding-right: 16px;
  --border-radius: 8px;
}
/* Der Baukasten erzeugt für den Knopf ein Overlay-::before, das der
   Inline-Block im Seitenkopf orange malt — dieselbe Farbe liegt schon
   auf dem Element. Der Kasten wird ganz abgeschaltet; die Klasse .e-con
   im Selektor schlägt den Inline-Block unabhängig von der Ladereihenfolge. */
.mkw-94 .mkw-element.mkw-element-54fec16.e-con::before {
  content: none;
}

.mkw-94 .mkw-element.mkw-element-3346ae5 {
  width: auto;
  max-width: none;
  white-space: nowrap;
}

/* ------------------------------------------------- Personenspalte
   Vier Karten mit je 30 px Polster ergaben 691 px — mehr, als auf
   einem 720er Laptop zwischen Kopf und Balken überhaupt Platz hat.
   Das Polster wird knapper, die Angaben bleiben vollständig. */
.mkw-94 .mkw-element.mkw-element-d8566b4 {
  min-height: 0;
  --gap: 14px;
  --row-gap: 14px;
}
.mkw-94 .mkw-element.mkw-element-d8566b4 > .e-con {
  --padding-top: 20px;
  --padding-bottom: 20px;
}

/* Flache Schirme — Laptops um 720 bis 900 px Höhe. Hier entscheidet
   sich, ob Kopf, Hero und Balken zusammen aufgehen. */
@media (min-width: 1025px) and (max-height: 900px) {
  .mkw-94 .mkw-element.mkw-element-d8566b4 {
    --gap: 8px;
    --row-gap: 8px;
  }
  .mkw .mkw-element-d8566b4 > .e-con {
    padding: 9px 14px 9px 10px;
  }
  /* kleineres Portrait, damit vier Karten in die knappe Spalte passen —
     schlägt die feste 88er-Grösse aus karten.css (gleiche Spezifität,
     hero.css lädt später) */
  .mkw .mkw-element-d8566b4 > .e-con > .e-con:first-child { flex-basis: 60px; width: 60px; }
  .mkw .mkw-element-d8566b4 > .e-con img { width: 60px; height: 60px; }
  .vts-hero-saeule { gap: 10px; }
  .mkw-94 .mkw-element.mkw-element-846837d {
    --padding-top: 11px;
    --padding-bottom: 11px;
  }
}

/* ------------------------------------------------------------ Tablet */
@media (max-width: 1024px) {
  .vts-hero-saeule { width: 100%; }
  .mkw-94 .mkw-element.mkw-element-be9a8c8 {
    min-height: 0;                 /* unter 1024 px stapeln die Spalten */
    --padding-top: 40px;
    --padding-bottom: 40px;
  }
}

/* ------------------------------------------------------------- Handy */
@media (max-width: 767px) {
  .vts-hero-saeule { gap: 10px; }
  /* Bildkarte und Aktionsstreifen zusammen auf einen Schirm: Die Karte
     trug aus der Vorlage 65 vh — mit der Adressleiste des Handy-Browsers
     rutschte der Streifen «Steuererklärung» damit unter den Rand. Die
     Formel zieht Kopf, Balken und den Platz des Streifens (rund 200 px
     mit Lücke und Polstern) von der echten Sichthöhe ab; die Klammer
     hält die Karte zwischen 320 px (Text bleibt drin) und 520 px. */
  .mkw-94 .mkw-element.mkw-element-be9a8c8 {
    --padding-top: 16px;
    --padding-bottom: 16px;
  }
  .mkw-94 .mkw-element.mkw-element-c217328 {
    min-height: 0;
    --min-height: 0px;
    height: clamp(320px, calc(100dvh
        - var(--vts-kopf-hoehe, 84px)
        - var(--vts-balken-hoehe, 92px)
        - 200px), 520px);
  }
  .mkw-94 .mkw-element.mkw-element-846837d {
    /* Auf schmalen Schirmen untereinander: der Titel läuft sonst in den
       Chip und beide werden unleserlich schmal. */
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    --padding-left: 16px;
    --padding-right: 16px;
  }
  .mkw-94 .mkw-element.mkw-element-54fec16 {
    --width: 100%;
  }
  .mkw-94 .mkw-element.mkw-element-3346ae5 {
    text-align: center;
  }
}