/* ===========================================
   NORDSTERN – PHOTONENPFLASTER (Page Styles)
   Datei: css/pages/photonenpflaster.css
   Inhalt: nur seiten-spezifische Dinge
   =========================================== */

.page-photonenpflaster{
  --page-accent: var(--accent-photonen, #1EC9B4);
}

/* Hero-Feinschliff (H2 im Hero, falls genutzt) */
.hero h2{
  margin: 0 0 12px 0;
}

/* ===========================================
   CONTENT / CARDS
   =========================================== */

.pf-card{
  border-left: 6px solid var(--page-accent);
}

.pf-meta{
  font-size: 0.9rem;
  opacity: 0.85;
  margin: 0 0 6px;
}

.pf-actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}

/* ===========================================
   ANWENDUNG – 2 gleich große Container (Cards)
   =========================================== */

.anwendung-layout{
  display: grid;
  grid-template-columns: 1fr 1fr; /* exakt gleich breit */
  gap: 18px;
  margin-top: 18px;
  align-items: stretch; /* Cards gleich hoch “wirken” harmonischer */
}

.anwendung-card{
  height: 100%;
}

.anwendung-steps{
  display: grid;
  gap: 14px;
}

/* wichtig: nicht zentrieren */
.step-card{
  text-align: left;
}

.step-card h3{
  margin: 0 0 6px 0;
}

.step-card p{
  margin: 0;
}

.content-photo{
  margin: 0;
  height: 100%;
  display: flex;
}

.content-photo img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
}

/* Mobile: untereinander */
@media (max-width: 860px){
  .anwendung-layout{
    grid-template-columns: 1fr;
  }
}

/* ===========================================
   ERFAHRUNGEN & STIMMEN – “Container” wieder sichtbar
   =========================================== */

.ref-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 16px;
}

/* robust: greift unabhängig davon, welche Klassen reviews.js setzt */
.ref-grid > *{
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px;
  padding: 16px 16px 14px 16px;
  text-align: left;
}

.ref-grid > * p{
  margin: 0 0 10px 0;
}

.ref-grid > * p:last-child{
  margin-bottom: 0;
}

@media (max-width: 980px){
  .ref-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px){
  .ref-grid{
    grid-template-columns: 1fr;
  }
}

/* --- Photonenpflaster: Infografik (iframe) soll den Container voll ausfüllen --- */
.infografik-embed{
  width: 100%;
  height: 100%;

  /* NEU: dunkler Petrol-Hintergrund hinter der Animation */
  background: #0f2f33;
  border-radius: 16px;
  overflow: hidden;
}

.infografik-embed iframe{
  display: block;
  width: 100%;
  height: 100%;
  border: 0;

  /* falls die Animation Transparenz nutzt, bleibt der Petrol sichtbar */
  background: transparent;
}

/* sorgt für eine stabile Höhe der rechten Karte im Wirkprinzip-Bereich */
.card.tight{
  min-height: 260px;
}

/* NEU: Hintergrund nur im Wirkprinzip-Bereich hinter der Animation */
#funktion .card.tight{
  background: #0f2f33;
}