/* =====================================================================
   team.css - Team-Seite und Aktuelles (Redesign 2026)
   Farben, Schrift und Abstaende kommen aus index.css (--primary-color usw.)
   ===================================================================== */

/* Seiten mit .full-width: ohne Seitenleiste volle Breite,
   mit Seitenleiste (Aktuelles) gleiches Raster wie die anderen Seiten */
.full-width {
    display: block;
    width: 100%;
}

main.full-width:has(> .sidebar) {
    display: grid;
}

/* Weisse Inhaltsbox (wie .welcome auf den anderen Seiten) */
.team-section {
    background-color: var(--white);
    padding: clamp(22px, 4vw, 48px);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    min-width: 0;
}

.team-section h1,
.team-section h2 {
    color: var(--primary-color);
    margin-bottom: 28px;
    font-family: var(--font);
    font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem);
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* kleiner Regenbogen-Strich unter dem Seitentitel */
.team-section h1::after {
    content: "";
    display: block;
    width: 72px;
    height: 4px;
    margin-top: 16px;
    border-radius: 2px;
    background: var(--rainbow);
}

/* ---------- Gruppenfoto ---------- */
.team-group-photo {
    margin-bottom: 32px;
}

.team-group-photo img {
    width: 100%;
    max-width: 760px;
    height: auto;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin: 0 auto;
}

/* ---------- Raster der Teamfotos ---------- */
.team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 Aerzte + 9 weitere = immer volle Reihen */
    gap: 20px;
}

/* Aerzte-Reihe: 3 gleich grosse Spalten */
.team-grid-doctors {
    grid-template-columns: repeat(3, 1fr);
    margin-bottom: 20px;
}

/* ---------- Eine Person ----------
   NEU: Name steht IMMER sichtbar unter dem Foto.
   Vorher erschien er nur beim Darueberfahren mit der Maus oder beim Antippen.
   Das war fuer aeltere Menschen und auf dem Handy schwer zu finden. */
.team-member {
    background-color: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.team-member:hover {
    transform: translateY(-3px);
    box-shadow: 0 2px 4px rgba(20, 51, 111, 0.08), 0 12px 28px rgba(20, 51, 111, 0.14);
}

.team-member img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    object-position: center top;
    display: block;
    background-color: var(--secondary-color);
}

.team-member-overlay {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;   /* Name mittig unter dem Foto */
    text-align: center;
    padding: 14px 16px 16px;
    border-top: 4px solid var(--primary-color);
}

.team-member-overlay h3 {
    color: var(--text-color);
    margin: 0;
    font-size: 1rem;
    line-height: 1.4;
    font-weight: 500;
}

/* Frau Beyerle (Hochformat-Portraet): ganzes Foto zeigen statt zuschneiden.
   Raender in der Hintergrundfarbe des Fotos (#c6bfbb). */
.team-member img[src*="alexandra-horsch"] {
    object-fit: contain;
    object-position: center center;
    background-color: #c6bfbb;
}

/* Dr. Ucareri (quadratisches Foto, blauer Hintergrund): ganzes Foto zeigen.
   Raender in der Hintergrundfarbe (#a2b4d1). */
.team-member img[src*="IMG_20260921_200130"] {
    object-fit: contain;
    object-position: center center;
    background-color: #a2b4d1;
}

/* ---------- Philosophie ---------- */
.team-philosophy {
    margin-top: 36px;
    background-color: var(--secondary-color);
    padding: clamp(20px, 3vw, 32px);
    border-radius: var(--radius);
}

.team-philosophy h3 {
    color: var(--primary-color);
    margin-bottom: 16px;
    font-size: 1.4rem;
}

.team-philosophy p {
    margin-bottom: 1em;
    max-width: 68ch;
}

.team-values h4 {
    color: var(--primary-dark);
    margin: 8px 0 12px;
    font-size: 1.1rem;
}

.team-values ul {
    display: grid;
    gap: 10px;
}

/* ---------- Aktuelles (News) ---------- */
.news-item {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: clamp(18px, 3vw, 28px);
    margin-bottom: 20px;
    background-color: var(--white);
}

.news-item:last-child {
    margin-bottom: 0;
}

.news-item h3 {
    color: var(--primary-color);
    margin-bottom: 16px;
    font-size: 1.35rem;
}

.news-item h4 {
    color: var(--primary-color);
    margin: 15px 0;
    font-size: 1.2rem;
}

.news-item p {
    margin-bottom: 1em;
    max-width: 68ch;
}

.news-item .content-with-image {
    display: block;
    margin-bottom: 0;
}

.news-item .image-container:empty {
    display: none;
}

/* Klapp-Element innerhalb einer Nachricht: Kasten ohne eigenen Rahmen */
.news-item:has(> .accordion-toggle) {
    padding: 0;
    border: none;
    background: none;
}

.news-item .accordion-toggle {
    font-size: 1.1rem;
    color: var(--primary-color);
    margin-top: 0;
}

.news-item .accordion-toggle.active {
    color: var(--white);
}

.news-item .accordion-content {
    padding: 20px 24px;
}

.news-item .accordion-content.active {
    display: block;
}

/* ---------- Bildschirmgroessen ---------- */
@media (max-width: 900px) {
    .team-grid,
    .team-grid-doctors {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 520px) {
    .team-grid,
    .team-grid-doctors {
        grid-template-columns: 1fr;
    }

    .team-member img {
        height: 300px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .team-member:hover {
        transform: none;
    }
}