/* hero-photo.css — NEUER Baustein (UNIVERSAL §21 Regel 2/4), NICHT in die App eingebunden.
   Ersetzt den Globus im Hero durch ein Foto einer Person, deren Blick zum nächsten Klick führt.
   Markup:  <figure class="hero-photo" data-gaze="left-down"><img src="assets/hero-student.jpg" alt=""></figure>
   Der Rahmen steht rechts neben dem Text, am Fuß der Textspalte ausgerichtet. Blickt die Person im Foto
   NACH LINKS UNTEN, landet der Blick auf den Knöpfen („Start learning" / „Browse tutors").
   data-gaze="right-down" spiegelt das Bild, wenn die Person im Foto nach rechts schaut — so lässt sich
   jedes Foto passend einsetzen, ohne es zu bearbeiten (Gesicht spiegeln ist unkritisch, Text im Bild nicht).
   (Im Mockup entfernt ein onerror das Bild, wenn die Datei fehlt, damit kein Fehler-Symbol erscheint.)
   Fehlt die Bilddatei, zeigt der Rahmen eine ruhige Platzhalter-Fläche mit Silhouette.
   Gesehen im Mockup: mockups/mockup-*-leicht.html, mockup-*-startseite.html */

.hero-photo {
    position: relative;
    width: 300px;
    aspect-ratio: 4 / 5;
    margin: 0;
    overflow: hidden;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-default);
    background-color: var(--bg-subtle);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 375'%3E%3Cg fill='%23000' fill-opacity='.10'%3E%3Ccircle cx='150' cy='140' r='58'/%3E%3Cpath d='M40 375c0-80 50-130 110-130s110 50 110 130z'/%3E%3C/g%3E%3C/svg%3E");
    background-size: cover;
    background-position: center bottom;
}
.hero-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 25%;
}
.hero-photo[data-gaze="right-down"] img { transform: scaleX(-1); }

/* Weiche Ränder („Nebel"): das Foto läuft an allen vier Seiten sanft in den Seitengrund aus —
   kein Rahmen, keine Kante. Zwei Verläufe (waagerecht × senkrecht) werden übereinander gelegt. */
.hero-photo--soft {
    border: 0;
    border-radius: 0;
    background: none;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22%, #000 78%, transparent 100%),
                        linear-gradient(to bottom, transparent 0, #000 18%, #000 78%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent 0, #000 22%, #000 78%, transparent 100%),
                linear-gradient(to bottom, transparent 0, #000 18%, #000 78%, transparent 100%);
    mask-composite: intersect;
}
.hero-photo--soft img { object-position: center 12%; }

/* Die Textspalte endet mit den Knöpfen; das Foto sitzt auf gleicher Höhe, damit der Blick dorthin fällt */
.hero--with-globe:has(.hero-photo) { align-items: flex-end; }

@media (max-width: 760px) {
    /* Handy: Foto unter dem Text und unter den Knöpfen — der Blick geht dann nach oben-links zu ihnen,
       darum ist auf dem Handy ein Foto mit Blick nach OBEN nötig; ohne passendes Foto ausblenden. */
    .hero-photo { width: 100%; max-width: 320px; aspect-ratio: 16 / 10; }
}