/* ===== ÄNDERUNG 60.452 (22.09.2026): Startseite – die vier Hero-Kacheln wie auf der Live-Website =====
   Vorlage: Bildschirmfoto der Live-Seite von Tobias („eins zu eins so nachbauen“). Vermessen am Foto und in
   Anteilen der Kachelbreite übernommen – deshalb Containerabfrage-Einheiten (cqi = 1 % der Kachelbreite):
   So bleiben die Proportionen bei jeder Fensterbreite gleich wie im Foto.
     Titel      Poppins Bold 10,3 % der Kachelbreite, Zeilenabstand 1,15, weiß, zweizeilig mit festem Umbruch
                (zwei Spans, zweites Wort immer in der nächsten Zeile) und ohne automatische Silbentrennung
     Text       Poppins Regular 4,95 %, Zeilenabstand 1,42, weiß – Textbreite so gewählt, dass die Zeilen wie im Foto umbrechen
     Linkzeile  Poppins Bold 4,4 %, Pfeil mit 2,5 % Abstand (sichtbar 3,1 %), sitzt unten in der Kachel
     Abstände   oben 6,7 %, links 9,1 %, rechts 4,9 %, unten 4,55 %; Titel → Text 3,75 %; Text → Linkzeile mindestens 4,2 %
     Kachel     Ecken 10 px, feiner heller Rand, Bild dunkelblau eingefärbt (oben etwas transparenter als unten)
   Der Bildhinweis der Platzhalter („Bild 1 …“) ist ausgeblendet, weil der Text jetzt oben beginnt; die Platzhalter
   selbst bleiben als Bildfläche stehen und werden wie bisher durch die echten Fotos ersetzt.
   Gilt ab 641 px (Tablet und Desktop); auf dem Handy bis 640 px bleiben die kompakten Kacheln aus MOBILE_1
   (einspaltig, ohne Beschreibung). Mindestgrößen (max()) halten den Text zwischen 981 und 1200 px lesbar,
   wo die Kacheln neben dem Einleitungskasten schmal werden. */
#pg-start .service-card__title{ hyphens: manual; -webkit-hyphens: manual; }   /* keine Trennstriche in den vier Titeln */
@media (min-width: 641px){
  #pg-start .service-card{
    display: flex;
    flex-direction: column;
    aspect-ratio: auto;
    border-radius: 10px;
    container-type: inline-size;
  }
  #pg-start .service-card::before{
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
  }
  #pg-start .service-card:hover::before{ border: 2px solid var(--color-accent); }
  #pg-start .service-card__media .placeholder-content{ opacity: 0; }
  #pg-start .service-card__media::after{
    background: linear-gradient(180deg, rgba(22, 42, 96, 0.76) 0%, rgba(21, 38, 82, 0.88) 55%, rgba(19, 33, 66, 0.95) 100%);
  }
  #pg-start .service-card__body{
    position: relative;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding: max(14px, 6.7cqi) max(10px, 4.9cqi) max(12px, 4.55cqi) max(16px, 9.1cqi);   /* rechts schmaler als links – wie im Foto */
    color: #fff;
  }
  #pg-start .service-card__title{
    font-size: max(17px, 10.3cqi);
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: normal;
    color: #fff;
    min-height: 0;
    margin: 0 0 3.75cqi;
  }
  #pg-start .service-card__title > span{ display: block; }   /* fester Umbruch: zweites Wort immer in der nächsten Zeile */
  #pg-start .service-card__desc{
    font-size: max(13px, 4.95cqi);
    line-height: 1.42;
    font-weight: 400;
    color: #fff;
    margin: 0 0 max(10px, 4.2cqi);
    overflow-wrap: break-word;    /* Sicherheitsnetz für 981–1000 px, wo die Kacheln unter 150 px schmal werden */
    hyphens: manual; -webkit-hyphens: manual;
  }
  #pg-start .service-card__cta{
    margin-top: auto;
    font-size: max(12.5px, 4.4cqi);
    font-weight: 700;
    letter-spacing: normal;
    color: #fff;
    gap: 2.5cqi;                  /* sichtbarer Abstand Pfeil → Text wie im Foto (3,1 % von Tinte zu Tinte) */
    align-items: flex-start;      /* falls eine Linkzeile doch umbricht: Pfeil auf der ersten Zeile */
    overflow-wrap: anywhere;      /* nur bei sehr schmalen Kacheln (981–990 px) wirksam */
    hyphens: manual; -webkit-hyphens: manual;
  }
}

/* ===== Ergaenzung fuer die Live-Website (nicht Teil des Prototyp-Blocks) =====
   Im Prototyp gilt: ab 641 px die Gestaltung oben, bis 640 px die kompakten
   Kacheln. Auf der Live-Website beginnt der kompakte Zustand jedoch erst bei
   600 px. Zwischen 601 und 640 px stand deshalb ein Mischzustand: schon die
   kleine Schrift, aber noch Foto und Beschreibungstext. Diese vier Zeilen
   ziehen den kompakten Zustand auf 640 px hoch - dieselben Regeln wie im
   600er-Block des Seiten-CSS. */
@media (min-width: 601px) and (max-width: 640px){
  #pg-start .service-card__media{ display: none; }
  #pg-start .service-card{ min-height: 0; aspect-ratio: auto; }
  #pg-start .service-card__body{
    position: static;
    padding: 18px 20px;
    background: var(--color-blue-deep, #12306B);
  }
  #pg-start .service-card__desc{ display: none; }
  #pg-start .service-card__title{ margin-bottom: 6px; }
}