/* Echte Aufnahmen auf den Funktionsseiten (Makros in templates/_echte_bilder.html).
   Eigenes Praefix eb-, damit keine neuen Tailwind-Klassen noetig sind (Tailwind ist vorkompiliert).
   Bilder: app/static/img/funktionen/, neu erzeugen mit docs/broschuere_schullizenz/werkzeug/funktionen_assets.py */

.eb-wrap { margin: 0 0 4rem; }
.eb-anschluss { margin-top: 2rem; }   /* Kacheln direkt unter einem bestehenden Abschnitt */
.eb-h2 { font-size: 1.5rem; line-height: 1.3; font-weight: 800; color: #1e293b; text-align: center; margin: 0 0 .6rem; }
.eb-intro { max-width: 42rem; margin: 0 auto 1.75rem; text-align: center; color: #64748b; font-size: .95rem; line-height: 1.6; }

/* Buehne: grosse Aufnahme (Beamer/Rechner), optional ein Handy daneben */
.eb-buehne {
  display: flex; gap: 1.5rem; align-items: center;
  background: radial-gradient(130% 150% at 18% 0%, #f2fafc 0%, #e9f3f6 55%, #e0ebef 100%);
  border: 1px solid #dbe7ec; border-radius: 20px; padding: 1.5rem;
}
.eb-gross { flex: 1 1 auto; min-width: 0; display: block; border-radius: 12px; }
.eb-gross img {
  display: block; width: 100%; height: auto; border-radius: 12px; background: #fff;
  box-shadow: 0 18px 42px rgba(4, 44, 55, .22);
}
.eb-handy { flex: 0 0 170px; margin: 0; }
.eb-handy img {
  display: block; width: 100%; height: auto; border-radius: 22px; border: 5px solid #111827;
  background: #fff; box-shadow: 0 16px 32px rgba(15, 23, 42, .30);
}
.eb-schmal { max-width: 46rem; margin-left: auto; margin-right: auto; }
.eb-cap { max-width: 46rem; margin: .9rem auto 0; text-align: center; color: #64748b; font-size: .85rem; line-height: 1.5; }
.eb-tap { display: none; }

/* Kacheln: zwei oder drei Aufnahmen nebeneinander, mit Titel und Satz */
.eb-kacheln { display: grid; gap: 1.25rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.eb-kacheln.eb-n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.eb-buehne + .eb-kacheln, .eb-cap + .eb-kacheln,
.eb-buehne + .eb-buehne, .eb-cap + .eb-buehne { margin-top: 1.75rem; }
.eb-kachel {
  margin: 0; background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05); display: flex; flex-direction: column;
}
.eb-kachel a { display: block; }
.eb-kachel img { display: block; width: 100%; height: auto; border-bottom: 1px solid #f1f5f9; }
.eb-kachel figcaption { padding: .85rem 1rem 1rem; font-size: .85rem; line-height: 1.5; color: #64748b; }
.eb-kachel figcaption strong { display: block; margin-bottom: .15rem; color: #1e293b; font-size: .9rem; font-weight: 700; }

/* Bild im Bild: gross die Schueleransicht, klein ueberlappend unten rechts die Lehrkraft-Ansicht.
   --eb-k = Hoehe/Breite des kleinen Bildes (setzt das Makro). Das kleine Bild ist 40 % breit und
   ragt zur Haelfte unter dem grossen heraus -> Platz darunter = 0,5 * 0,40 * k * Breite. */
.eb-pip { position: relative; flex: 1 1 auto; min-width: 0; padding-bottom: calc(var(--eb-k, .6) * 20%); }
.eb-pip-gross { position: relative; width: 84%; }
.eb-pip-klein {
  position: absolute; right: 0; bottom: 0; width: 40%; display: block; border-radius: 12px;
}
.eb-pip-klein img {
  display: block; width: 100%; height: auto; border-radius: 12px; background: #fff;
  border: 4px solid #fff; box-shadow: 0 22px 48px rgba(4, 44, 55, .32);
}
/* Beschriftung UEBER dem Bild statt darauf – sonst verdeckt sie Titel in der Aufnahme */
.eb-label {
  display: inline-block; margin: 0 0 .55rem; position: relative; z-index: 2;
  background: #004e60; color: #fff; font-size: .74rem; font-weight: 700; line-height: 1;
  padding: .4rem .75rem; border-radius: 999px; letter-spacing: .01em;
}
.eb-label-hell { background: #fff; color: #004e60; box-shadow: 0 2px 10px rgba(15, 23, 42, .22); }

.eb-gross:focus-visible, .eb-kachel a:focus-visible, .eb-pip-klein:focus-visible { outline: 3px solid #6EB0BC; outline-offset: 3px; }

@media (max-width: 760px) {
  .eb-buehne { flex-direction: column; align-items: stretch; padding: 1rem; gap: 1.25rem; }
  .eb-handy { flex: none; width: 170px; margin: 0 auto; }
  .eb-tap { display: inline; }
  .eb-pip { padding-bottom: 0; }
  .eb-pip-gross { width: 100%; }
  .eb-pip-klein { position: relative; width: 82%; margin: 1rem 0 0 auto; }
  .eb-kacheln, .eb-kacheln.eb-n3 { grid-template-columns: 1fr; }
}