/* Handy-Ansicht (bis 760px): Wischreihen für Kartenlisten, „Weiterlesen“ für
   lange Texte, sanftes Einblenden. Alle Regeln stehen in Medienabfragen bis
   760px, damit sich am Desktop nichts ändert. Die Klassen setzt handy.js nur,
   solange die Medienabfrage passt. */

@media (max-width: 760px) {
  /* Wischreihe: Karten nebeneinander, die nächste Karte schaut herein. Die
     Reihe läuft bis an den Bildschirmrand, die erste Karte steht in der Flucht
     des Inhalts. --hy-gl/--hy-gr setzt handy.js (Abstand zum Bildschirmrand). */
  :root .hy-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 14px;
    margin-inline: calc(-1 * var(--hy-gl, 20px)) calc(-1 * var(--hy-gr, 20px));
    padding: 2px var(--hy-gr, 20px) 6px var(--hy-gl, 20px);
    scroll-padding-inline: var(--hy-gl, 20px) var(--hy-gr, 20px);
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    background: none;
    border-radius: 0;
  }
  :root .hy-row::-webkit-scrollbar {
    display: none;
  }
  :root .hy-row:focus-visible {
    outline: 2px solid var(--red);
    outline-offset: -2px;
  }
  :root .hy-row > * {
    flex: 0 0 84%;
    width: auto;
    min-width: 0;
    max-width: none;
    margin: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  /* Startseite: Angebotskarten mit Foto oben */
  :root .hy-row > .offer-item {
    align-content: start;
  }
  /* Privat, Gewerbe, Investoren: Karte füllt die Reihenhöhe */
  :root .hy-row > .private-service-card {
    display: flex;
    flex-direction: column;
  }
  :root .hy-row > .private-service-card > .private-service-body {
    flex: 1;
  }
  /* Über uns: Schritte bekommen eine ruhige Karte */
  :root .hy-row.process-grid > li {
    padding: 24px 22px 26px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--white);
  }

  /* Positionsanzeige unter der Reihe: graue Linie, rotes Stück wandert mit */
  :root .hy-rail {
    flex-direction: row;
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 18px;
  }
  .hy-rail-line {
    position: relative;
    flex: 1;
    height: 2px;
    background: linear-gradient(var(--line), var(--line)) left center / 100% 1px
      no-repeat;
  }
  .hy-rail-line i {
    position: absolute;
    top: 0;
    left: 0;
    width: 28px;
    height: 2px;
    background: var(--red);
  }
  .hy-rail-count {
    flex: none;
    min-width: 4.5em;
    font-size: var(--fs-small);
    font-weight: 600;
    line-height: 1.5;
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--muted);
  }

  /* Weiterlesen: Text bleibt im Dokument, wird nur gekürzt und läuft weich aus */
  .hy-clamp {
    max-height: var(--hy-clamp);
    overflow: hidden;
    -webkit-mask-image: linear-gradient(
      to bottom,
      #000 calc(100% - 3.2em),
      transparent
    );
    mask-image: linear-gradient(
      to bottom,
      #000 calc(100% - 3.2em),
      transparent
    );
  }
  .hy-more-group > p + p {
    margin-top: 20px;
  }
  button.text-link.hy-more {
    margin-top: 6px;
    text-align: left;
  }
  .hy-more[hidden] {
    display: none;
  }
  .hy-more svg path {
    transition: transform 0.24s;
    transform-origin: center;
  }
  .hy-more[aria-expanded="true"] svg .hy-more-v {
    transform: scaleY(0);
  }
}

/* Einblenden: Überschriften und Karten steigen beim ersten Erscheinen auf.
   Bei reduzierter Bewegung setzt handy.js die Klassen gar nicht erst. */
@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
  .hy-reveal {
    opacity: 0;
    transform: translateY(16px);
  }
  .hy-reveal.hy-in {
    opacity: 1;
    transform: none;
    transition:
      opacity 0.5s ease-out,
      transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    transition-delay: var(--hy-delay, 0s);
  }
}