Merge pull request 'feature_US03-02' (#12) from feature_US03-02 into dev_3

Reviewed-on: https://gitty.informatik.th-mannheim.de/3015351/PM_Project/pulls/12
dev_3
Kevin Alexander Kopp 2026-09-30 15:32:11 +02:00
commit fcf716e6f0
3 changed files with 24 additions and 19 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 160 KiB

View File

@ -1,5 +1,5 @@
/* 8. Trainer und Kontakt (US04-02) /* 8. Trainer und Kontakt (US04-02)
Trainerprofil: Relindis Agethen (Lilli) – Foto folgt noch. Trainerprofil: Relindis Agethen (Lilli).
Kontakt leitet auf https://tri-hub.de/kontakt weiter. */ Kontakt leitet auf https://tri-hub.de/kontakt weiter. */
.contact { border-top: 1px solid var(--line); } .contact { border-top: 1px solid var(--line); }
@ -24,23 +24,22 @@
} }
.trainer-photo { .trainer-photo {
display: flex; position: relative;
align-items: center; margin: 0;
justify-content: center;
min-height: 320px; min-height: 320px;
border: 1px dashed rgb(255 255 255 / 22%); overflow: hidden;
border-radius: 1.35rem; border-radius: 1.35rem;
background: background: rgb(255 255 255 / 3%);
radial-gradient(circle at 50% 38%, rgb(255 255 255 / 10%) 0 18%, transparent 19%),
radial-gradient(ellipse at 50% 100%, rgb(255 255 255 / 8%) 0 42%, transparent 43%),
rgb(255 255 255 / 3%);
color: var(--quiet);
font-size: .8125rem;
letter-spacing: .18em;
text-transform: uppercase;
} }
.trainer-photo span { margin-top: 62%; } .trainer-photo img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 30% 20%; /* Gesicht im Ausschnitt halten */
}
.trainer-body { padding: 12px 12px 12px 0; } .trainer-body { padding: 12px 12px 12px 0; }
@ -118,7 +117,7 @@
@media (max-width: 760px) { @media (max-width: 760px) {
.trainer-card { grid-template-columns: 1fr; gap: 18px; } .trainer-card { grid-template-columns: 1fr; gap: 18px; }
.trainer-photo { min-height: 260px; } .trainer-photo { height: 340px; min-height: 0; }
.trainer-body { padding: 4px 8px 12px; } .trainer-body { padding: 4px 8px 12px; }
.trainer-facts li { grid-template-columns: 1fr; gap: 2px; } .trainer-facts li { grid-template-columns: 1fr; gap: 2px; }
.contact-card { padding: 26px 22px; } .contact-card { padding: 26px 22px; }

View File

@ -276,11 +276,17 @@
</div> </div>
<div class="contact-grid"> <div class="contact-grid">
<!-- Trainerprofil: Relindis Agethen (Lilli) – Foto folgt --> <!-- Trainerprofil: Relindis Agethen (Lilli) -->
<article class="trainer-card" aria-labelledby="trainer-name"> <article class="trainer-card" aria-labelledby="trainer-name">
<div class="trainer-photo" role="img" aria-label="Foto von Relindis Agethen folgt"> <figure class="trainer-photo">
<span aria-hidden="true">Foto folgt</span> <img
</div> src="assets/images/trainer/lilli.webp"
width="800"
height="1067"
alt="Relindis Agethen (Lilli) auf dem Triathlonrad im Wettkampf"
loading="lazy"
/>
</figure>
<div class="trainer-body"> <div class="trainer-body">
<h3 id="trainer-name">Relindis Agethen (Lilli)</h3> <h3 id="trainer-name">Relindis Agethen (Lilli)</h3>
<p class="trainer-role">Triathletin und Ernährungsberaterin</p> <p class="trainer-role">Triathletin und Ernährungsberaterin</p>