/* --- Zitat mit Person (132:9) -------------------------------------------
   Immer mit Name, Funktion und Haus: ohne Absender ist es eine vage
   Zuschreibung. Das Portraet ist ein Graukasten, bis ein lizenziertes Motiv
   vorliegt, und traegt deshalb aria-hidden — der Name steht daneben
   (Bauauftrag N34). */

.epi-quote {
    display: grid;
    gap: 2rem;
    margin: 0;
    padding: 4rem;
}

.epi-quote__text {
    margin: 0;
    font-family: var(--font-quote);
    font-style: italic;
    font-size: 1.625rem;
    line-height: 1.5;
}

/* Kreis (oder Logo) links ueber zwei Zeilen, rechts Name und darunter Haus:
   Zitat, Name, Haus stehen so in klarer Rangfolge. */
.epi-quote__person {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 1rem;
}

.epi-quote__person::before,
.epi-quote__initialen,
.epi-quote__logo {
    grid-row: span 2;
}

.epi-quote__person:not(:has(.epi-quote__name)) {
    display: block;
}

/* Das Portraet ist ein Graukasten, bis ein lizenziertes Motiv vorliegt. Als
   Pseudoelement ist es dekorativ und hinterlaesst kein leeres Element, das
   ein Screenreader ansagen koennte (Bauauftrag N34). */
.epi-quote__person::before {
    content: "";
    flex: none;
    inline-size: 48px;
    block-size: 48px;
    border-radius: 999px;
    background-color: var(--color-secondary-20);
}

.epi-quote__person > * {
    margin: 0;
}

/* Initialenkreis (inc/zitat-initialen.php) ersetzt den Graukasten. */
.epi-quote__person:has(.epi-quote__initialen)::before {
    content: none;
}

/* Zitat ohne Namen, nur Funktion und Organisation: kein Kreis. */
.epi-quote__person:not(:has(.epi-quote__name))::before {
    content: none;
}

.epi-quote__initialen {
    display: grid;
    place-items: center;
    flex: none;
    inline-size: 48px;
    block-size: 48px;
    border-radius: 999px;
    background-color: var(--color-primary-50);
    color: var(--color-text);
    font-family: var(--font-primary);
    font-size: 1rem;
    font-weight: 700;
    font-style: normal;
    line-height: 1;
}

/* Mit Logofreigabe steht das Logo des Hauses an der Stelle des Kreises
   (Bild .epi-quote__logo vor dem Namen; inc/zitat-initialen.php laesst die
   Initialen dann weg). Eine Wort-Bild-Marke ist breit; damit sie nicht lauter
   wird als das Zitat, steht sie niedriger als der Kreis, durch eine Haarlinie
   vom Namen getrennt. Das Bild hat leeren Alt-Text, das Haus steht daneben. */
.epi-quote__person:has(.epi-quote__logo)::before {
    content: none;
}

.epi-quote__logo {
    margin: 0;
    padding-inline-end: 1rem;
    border-inline-end: 1px solid var(--color-secondary-20);
    max-inline-size: 100%;
}

.epi-quote__logo img {
    display: block;
    block-size: 30px;
    inline-size: auto;
    max-inline-size: 100%;
}

.epi-quote__name {
    font-weight: 700;
    line-height: 1.4;
}

.epi-quote__name cite {
    font-style: normal;
}

.epi-quote__role {
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color-secondary);
}

/* Karte auf weisser Sektion: Creme mit hartem Rasterabbruch an der Kante. */
.epi-quote--card {
    background-color: var(--color-primary-light);
}

/* Zentriert und schmaler, wenn das Zitat flach auf der Sektion steht. */
.epi-quote--center {
    max-width: 880px;
    margin-inline: auto;
}

/* Auf schmalen Viewports frisst padding:4rem mehr als ein Drittel der
   Zeilenbreite. Was davon uebrig bleibt, reicht fuer ein langes Wort in
   1.625rem Lora nicht mehr — die Mindestbreite des Zitats weitet dann die
   Grid-Spur der ganzen Sektion und die Seite bekommt einen horizontalen
   Ueberlauf (Befund 2026-09-17 bei 375 px, Wort „Serviceplattform"). Enger
   gesetzt und eine Stufe kleiner; das Zitat bleibt damit die groesste Schrift
   seiner Sektion, ohne den Container zu sprengen. */
@media screen and (max-width: 767px) {
    .epi-quote {
        padding: 2rem;
    }

    /* Auch 1.25rem reicht nicht fuer jedes Kompositum („Übertragungsfehler",
       Befund 2026-09-28). `anywhere` senkt anders als `break-word` auch die
       Mindestbreite der Grid-Spur. Kein `hyphens: auto`, solange die Seite
       lang="en-US" ausliefert: der Browser trennt sonst nach englischen Regeln. */
    .epi-quote__text {
        font-size: 1.25rem;
        overflow-wrap: anywhere;
    }

    /* Neben dem breiten Logo bliebe fuer Name und Haus kaum Platz: das Logo
       steht darueber, ohne Haarlinie. */
    .epi-quote__logo {
        grid-column: 1 / -1;
        grid-row: auto;
        margin-block-end: 0.75rem;
        padding-inline-end: 0;
        border-inline-end: 0;
    }

    .epi-quote__person:has(.epi-quote__logo) > * {
        grid-column: 1 / -1;
    }
}