/* Ruhige, helle Galerie-Optik: viel Weissraum, dezente Farben. */

:root {
    --hintergrund: #faf9f7;
    --flaeche: #ffffff;
    --text: #2f2b28;
    --text-leise: #8a827a;
    --linie: #eceae6;
    --akzent: #6b7b6e;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--hintergrund);
    color: var(--text);
    font-family: "Georgia", "Times New Roman", serif;
    line-height: 1.6;
}

/* Kopfbereich */
.kopf {
    text-align: center;
    padding: 4rem 1.5rem 2.5rem;
}

/* Logo: Pinselstrich-Zeichen + Schriftzug, als Gruppe zentriert */
.logo {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
}

.logo__zeichen {
    width: 64px;
    height: 64px;
    flex: none;
}

.logo__name {
    font-size: 2.2rem;
    font-weight: 400;
    letter-spacing: 0.12em;
}

.kopf__unterzeile {
    margin: 0.6rem 0 0;
    color: var(--text-leise);
    font-style: italic;
}

/* Menuezeile im Kopf: dezente Navigation, passt zur ruhigen Optik */
.menue {
    margin-top: 1.4rem;
    font-family: sans-serif;
    font-size: 0.92rem;
    letter-spacing: 0.04em;
}

.menue a {
    color: var(--text-leise);
    text-decoration: none;
    padding: 0 0.6rem;
    transition: color 0.2s ease;
}

.menue a:hover {
    color: var(--akzent);
}

/* Galerie-Raster */
.galerie {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1rem 1.5rem 4rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 2.5rem;
}

/* Einzelne Bildkarte */
.karte {
    display: block;
    text-decoration: none;
    color: inherit;
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: 4px;
    overflow: hidden;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.karte:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    transform: translateY(-2px);
}

.karte__bild {
    position: relative;
    aspect-ratio: 4 / 3;
    background: #f2f0ec;
    display: flex;
    align-items: center;
    justify-content: center;
}

.karte__bild img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.karte__platzhalter {
    color: var(--text-leise);
    font-style: italic;
    font-size: 0.95rem;
}

/* "verkauft"-Hinweis oben rechts auf dem Bild */
.karte__verkauft {
    position: absolute;
    top: 0.8rem;
    right: 0.8rem;
    background: rgba(47, 43, 40, 0.82);
    color: #fff;
    font-family: sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.25rem 0.6rem;
    border-radius: 2px;
}

.karte__text {
    padding: 1.1rem 1.2rem 1.4rem;
}

.karte__titel {
    margin: 0 0 0.4rem;
    font-size: 1.2rem;
    font-weight: 400;
}

.karte__preis {
    margin: 0;
    color: var(--akzent);
    font-family: sans-serif;
    font-size: 1rem;
}

.leer {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--text-leise);
    font-style: italic;
}

/* ---------- Detailseite ---------- */

/* kleiner Kopf mit Zurueck-Link */
.kopf--klein {
    text-align: left;
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem 1.5rem 0.5rem;
}

.zurueck {
    color: var(--akzent);
    text-decoration: none;
    font-family: sans-serif;
    font-size: 0.95rem;
}

.zurueck:hover {
    text-decoration: underline;
}

/* Aufteilung: Bild links, Infos rechts (auf schmalen Schirmen untereinander) */
.detail {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1.5rem 1.5rem 4rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: start;
}

@media (max-width: 720px) {
    .detail {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

.detail__bild {
    position: relative;
    aspect-ratio: 4 / 3;
    background: #f2f0ec;
    border: 1px solid var(--linie);
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.detail__bild img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.detail__titel {
    margin: 0.5rem 0 0.6rem;
    font-size: 2rem;
    font-weight: 400;
}

.detail__preis {
    margin: 0 0 0.3rem;
    color: var(--akzent);
    font-family: sans-serif;
    font-size: 1.4rem;
}

.detail__preis-zusatz {
    margin: 0 0 1.5rem;
    color: var(--text-leise);
    font-size: 0.85rem;
}

.detail__beschreibung {
    margin: 0 0 2rem;
    color: var(--text);
}

/* Kaufen-Knopf */
.knopf {
    display: inline-block;
    background: var(--akzent);
    color: #fff;
    border: none;
    border-radius: 3px;
    padding: 0.8rem 2.2rem;
    font-family: sans-serif;
    font-size: 1rem;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: background 0.2s ease;
}

.knopf:hover {
    background: #5a6a5d;
}

.detail__verkauft-hinweis {
    display: inline-block;
    color: var(--text-leise);
    font-family: sans-serif;
    font-style: italic;
}

.detail__hinweis {
    margin-top: 2rem;
    color: var(--text-leise);
    font-size: 0.9rem;
    font-style: italic;
}

/* ---------- Admin-Bereich (Verwaltung) ---------- */

/* Kopf der Verwaltungsliste: Zurueck-Link, Titel, Neu-Knopf nebeneinander */
.admin-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

.admin-titel {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 400;
}

/* kleinere Variante des Knopfes fuer "Neues Aquarell" */
.knopf--klein {
    padding: 0.55rem 1.3rem;
    font-size: 0.95rem;
    text-decoration: none;
}

.admin {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1.5rem 1.5rem 4rem;
}

/* Tabelle mit allen Bildern */
.admin-tabelle {
    width: 100%;
    border-collapse: collapse;
    font-family: sans-serif;
    font-size: 0.95rem;
}

.admin-tabelle th {
    text-align: left;
    color: var(--text-leise);
    font-weight: 400;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.6rem 0.8rem;
    border-bottom: 1px solid var(--linie);
}

.admin-tabelle td {
    padding: 0.7rem 0.8rem;
    border-bottom: 1px solid var(--linie);
    vertical-align: middle;
}

/* kleines Vorschaubild in der Liste */
.admin-vorschau {
    width: 80px;
}

.admin-vorschau img {
    width: 72px;
    height: 54px;
    object-fit: cover;
    border-radius: 3px;
    display: block;
}

.admin-vorschau__leer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 54px;
    background: #f2f0ec;
    color: var(--text-leise);
    border-radius: 3px;
}

/* Status-Kennzeichnung */
.status {
    font-size: 0.78rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.2rem 0.55rem;
    border-radius: 2px;
}

.status--verfuegbar {
    background: #eef2ee;
    color: var(--akzent);
}

.status--verkauft {
    background: rgba(47, 43, 40, 0.82);
    color: #fff;
}

/* Bearbeiten/Loeschen nebeneinander */
.admin-aktionen {
    display: flex;
    align-items: center;
    gap: 1rem;
    white-space: nowrap;
}

.admin-aktionen form {
    margin: 0;
}

.loeschen {
    background: none;
    border: none;
    color: #a86b6b;
    font-family: sans-serif;
    font-size: 0.95rem;
    cursor: pointer;
    padding: 0;
}

.loeschen:hover {
    text-decoration: underline;
}

/* ---------- Formular zum Anlegen/Bearbeiten ---------- */

.admin-formular {
    max-width: 640px;
    margin: 0 auto;
    padding: 1rem 1.5rem 4rem;
}

.formular {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.feld {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.feld__name {
    font-family: sans-serif;
    font-size: 0.9rem;
    color: var(--text);
}

.feld input[type="text"],
.feld input[type="number"],
.feld textarea {
    font-family: sans-serif;
    font-size: 1rem;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--linie);
    border-radius: 3px;
    background: var(--flaeche);
    color: var(--text);
    width: 100%;
}

.feld input:focus,
.feld textarea:focus {
    outline: none;
    border-color: var(--akzent);
}

.feld textarea {
    resize: vertical;
}

.feld__hinweis {
    font-family: sans-serif;
    font-size: 0.82rem;
    color: var(--text-leise);
}

/* Haken-Feld: Kaestchen und Text nebeneinander */
.feld--haken {
    flex-direction: row;
    align-items: center;
    gap: 0.6rem;
}

.feld--haken input {
    width: auto;
}

.formular__knoepfe {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-top: 0.5rem;
}

/* ---------- "Ueber mich"-Seite ---------- */

.ueber {
    max-width: 820px;
    margin: 0 auto;
    padding: 1.5rem 1.5rem 4rem;
}

.ueber__titel {
    margin: 0.5rem 0 1.8rem;
    font-size: 2rem;
    font-weight: 400;
}

.ueber__inhalt {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 2.5rem;
    align-items: start;
}

@media (max-width: 640px) {
    .ueber__inhalt {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

.ueber__foto {
    aspect-ratio: 2 / 3;
    background: #f2f0ec;
    border: 1px solid var(--linie);
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-leise);
    font-style: italic;
    font-size: 0.9rem;
}

.ueber__foto img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ueber__text p {
    margin: 0 0 1.2rem;
}

.ueber__signatur {
    color: var(--text-leise);
    font-style: italic;
}

/* ---------- Rechtstext-Seiten (Impressum, Datenschutz, Widerruf) ---------- */

.rechtstext {
    max-width: 820px;
    margin: 0 auto;
    padding: 1.5rem 1.5rem 4rem;
}

.rechtstext__titel {
    margin: 0.5rem 0 1.8rem;
    font-size: 2rem;
    font-weight: 400;
}

.rechtstext h2 {
    font-size: 1.25rem;
    font-weight: 400;
    margin: 2rem 0 0.6rem;
}

.rechtstext p {
    margin: 0 0 1.2rem;
}

/* auffaelliger, aber ruhiger Hinweis auf noch fehlende Texte */
.rechtstext__platzhalter {
    color: var(--text-leise);
    font-style: italic;
    border-left: 3px solid var(--linie);
    padding-left: 1rem;
}

/* Fussbereich */
.fuss {
    text-align: center;
    padding: 2rem 1.5rem 3rem;
    color: var(--text-leise);
    font-family: sans-serif;
    font-size: 0.85rem;
}

/* dezenter Link in den Admin-Bereich */
.fuss__link {
    color: var(--text-leise);
    text-decoration: none;
}

.fuss__link:hover {
    color: var(--akzent);
    text-decoration: underline;
}

.galerie__preishinweis {
    grid-column: 1 / -1;
    margin: 2.5rem 0 0;
    color: var(--text-leise);
    font-size: 0.8rem;
    text-align: center;
}

.detail__steuerhinweis {
    font-size: 0.72rem;
    opacity: 0.75;
}

/* Muster-Widerrufsformular: leicht abgesetzt vom uebrigen Text */
.rechtstext__muster {
    color: var(--text-leise);
    font-size: 0.92rem;
    margin-bottom: 0.8rem;
}

/* Datenschutzerklaerung: Struktur des generierten Textes ruhig halten */
.rechtstext h3 {
    font-size: 1.05rem;
    font-weight: 400;
    margin: 1.4rem 0 0.4rem;
}

.rechtstext ul {
    margin: 0 0 1.2rem;
    padding-left: 1.2rem;
}

.rechtstext li {
    margin-bottom: 0.5rem;
    line-height: 1.55;
}

.rechtstext .index {
    list-style: none;
    padding-left: 0;
    border-left: 3px solid var(--linie);
    padding: 0.2rem 0 0.2rem 1rem;
}

.rechtstext .index li {
    margin-bottom: 0.25rem;
}

.rechtstext .m-elements,
.rechtstext .glossary {
    color: var(--text-leise);
    font-size: 0.9rem;
}

.rechtstext .seal {
    margin-top: 2.5rem;
    font-size: 0.8rem;
    color: var(--text-leise);
}