/* ============================================================
   PROJEKT

   Eigene Datei, damit seite.css unverändert aus base.html
   übernommen bleibt.

   Betroffen sind zwei Dinge:
     1. die Projektkacheln der Startseite als Verweise
     2. die Einzelseite eines Projekts (public/projekt.php);
        sie nutzt dazu einige Bausteine aus termin.css
        (Zurück-Verweis, Bildrahmen, Marken, Titel, Text, Fuß)
   ============================================================ */

/* ------------------------------------------------------------
   1. Kacheln
   ------------------------------------------------------------ */

/* Eine Kachel als Verweis sieht aus wie vorher. */
a.proj {
    color: inherit;
    text-decoration: none;
}

a.proj:focus-visible {
    outline: 3px solid var(--brand);
    outline-offset: 3px;
}

a.proj:hover b {
    color: var(--brand);
}

/* „Geplant“ oder „Abgeschlossen“ unter dem Kurztext. */
.proj-marke {
    /* eigene Zeile unter dem Kurztext, aber nur so breit wie die Schrift */
    display: table;
    margin-top: .45em;
    padding: .15em .65em;
    border-radius: 99px;
    background: var(--paper-2);
    color: var(--ink-2);
    font-size: .74rem;
    font-style: normal;
    font-weight: 700;
    letter-spacing: .02em;
}

/* ------------------------------------------------------------
   2. Einzelseite
   ------------------------------------------------------------ */

/* Platz für die feste Kopfleiste, wie auf der Galerieseite. */
.projekt-seite {
    padding-top: 116px;
}

/* Ohne Foto: Symbol links neben dem Titel. */
.projekt-kopf {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    gap: 32px;
    align-items: center;
    margin-bottom: 36px;
}

/* Mit Foto: Foto und Angaben nebeneinander, wie beim Termin. */
.projekt-kopf-foto {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 40px;
    align-items: start;
}

.projekt-symbol {
    display: block;
    width: 132px;
    height: 132px;
    border-radius: 36px;
    box-shadow: var(--sh-1);
}

.projekt-text {
    max-width: 780px;
}

@media (max-width: 920px) {
    .projekt-kopf-foto {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }
}

@media (max-width: 520px) {
    .projekt-seite {
        padding-top: 96px;
    }

    .projekt-kopf {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
    }

    .projekt-symbol {
        width: 96px;
        height: 96px;
        border-radius: 26px;
    }
}