/* ============================================================
   Meinl Kaffee-Portal – Design angelehnt an juliusmeinl.com
   Markenfarben: Meinl-Rot, Creme, Kaffeebraun, Gold-Akzent
   ============================================================ */

:root {
    --rot: #c8102e;          /* Meinl-Rot */
    --rot-dunkel: #9b0c23;
    --creme: #f8f4ec;        /* heller Hintergrund */
    --creme-dunkel: #efe8da;
    --braun: #2b1b12;        /* Kaffeebraun, Textfarbe */
    --braun-hell: #6b5648;
    --gold: #c9a227;         /* Gold-Akzent */
    --weiss: #ffffff;
    --gruen: #2e6b3f;
    --schatten: 0 2px 12px rgba(43, 27, 18, 0.10);
    --radius: 10px;
    --serif: Georgia, 'Times New Roman', serif;
    --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: var(--sans);
    background: var(--creme);
    color: var(--braun);
    line-height: 1.55;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

h1, h2, h3, .marke-text strong {
    font-family: var(--serif);
    font-weight: 700;
    letter-spacing: 0.01em;
}

h1 { font-size: 1.9rem; margin-bottom: 0.35rem; }
h2 { font-size: 1.35rem; margin: 1.4rem 0 0.6rem; }
h3 { font-size: 1.1rem; margin: 1rem 0 0.4rem; }

a { color: var(--rot); }

.untertitel { color: var(--braun-hell); margin-bottom: 1.4rem; }

/* ---------- Kopfbereich ---------- */
.kopf {
    background: var(--rot);
    color: var(--weiss);
    box-shadow: var(--schatten);
    position: sticky;
    top: 0;
    z-index: 50;
}

.kopf-innen {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0.6rem 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.marke {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    color: var(--weiss);
    text-decoration: none;
    margin-right: auto;
}

.marke-signet {
    font-family: var(--serif);
    background: var(--weiss);
    color: var(--rot);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    font-weight: 700;
    border: 2px solid var(--gold);
}

.marke-text { display: flex; flex-direction: column; line-height: 1.2; }
.marke-text strong { font-size: 1.1rem; }
.marke-text small { opacity: 0.85; font-size: 0.72rem; }

.nav-knopf {
    display: none;
    background: none;
    border: 1px solid rgba(255,255,255,0.6);
    color: var(--weiss);
    font-size: 1.3rem;
    padding: 0.2rem 0.6rem;
    border-radius: 6px;
    cursor: pointer;
}

.navigation { display: flex; align-items: center; gap: 0.2rem; flex-wrap: wrap; }

.navigation a {
    color: var(--weiss);
    text-decoration: none;
    padding: 0.45rem 0.7rem;
    border-radius: 6px;
    font-size: 0.92rem;
    opacity: 0.92;
}

.navigation a:hover { background: rgba(255,255,255,0.14); opacity: 1; }
.navigation a.aktiv { background: var(--rot-dunkel); opacity: 1; border-bottom: 2px solid var(--gold); }
.nav-abmelden { border-left: 1px solid rgba(255,255,255,0.35); margin-left: 0.4rem; }

/* ---------- Inhalt ---------- */
.inhalt {
    flex: 1;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 1.6rem 1rem 3rem;
}

.karte {
    background: var(--weiss);
    border-radius: var(--radius);
    box-shadow: var(--schatten);
    padding: 1.4rem;
    margin-bottom: 1.2rem;
}

.karten-raster {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
}

.kachel {
    background: var(--weiss);
    border-radius: var(--radius);
    box-shadow: var(--schatten);
    padding: 1.3rem;
    text-decoration: none;
    color: var(--braun);
    border-top: 4px solid var(--rot);
    transition: transform 0.12s ease;
    display: block;
}

.kachel:hover { transform: translateY(-3px); }
.kachel h3 { margin-top: 0; color: var(--rot); }
.kachel p { font-size: 0.9rem; color: var(--braun-hell); }
.kachel-symbol { font-size: 1.7rem; }

/* ---------- Formulare ---------- */
label { display: block; font-weight: 600; margin: 0.8rem 0 0.25rem; font-size: 0.92rem; }

input[type=text], input[type=password], input[type=email], input[type=number],
input[type=date], input[type=file], select, textarea {
    width: 100%;
    padding: 0.6rem 0.7rem;
    border: 1px solid #d8cfc0;
    border-radius: 7px;
    font-size: 1rem;
    background: #fffdf9;
    font-family: inherit;
}

input:focus, select:focus, textarea:focus {
    outline: 2px solid var(--rot);
    outline-offset: 1px;
}

.knopf {
    display: inline-block;
    background: var(--rot);
    color: var(--weiss);
    border: none;
    padding: 0.65rem 1.4rem;
    border-radius: 7px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    margin-top: 1rem;
}

.knopf:hover { background: var(--rot-dunkel); }
.knopf-zweit { background: var(--braun-hell); }
.knopf-zweit:hover { background: var(--braun); }
.knopf-gold { background: var(--gold); color: var(--braun); }
.knopf-klein { padding: 0.35rem 0.8rem; font-size: 0.85rem; margin-top: 0; }

/* ---------- Meldungen ---------- */
.flash {
    padding: 0.8rem 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    font-size: 0.95rem;
}

.flash-ok      { background: #e5f2e8; color: var(--gruen); border-left: 4px solid var(--gruen); }
.flash-fehler  { background: #fbe6e9; color: var(--rot-dunkel); border-left: 4px solid var(--rot); }
.flash-warnung { background: #faf3dc; color: #7a651a; border-left: 4px solid var(--gold); }

.hinweis {
    background: #faf3dc;
    border-left: 4px solid var(--gold);
    padding: 0.7rem 1rem;
    border-radius: 8px;
    font-size: 0.9rem;
    margin: 0.8rem 0;
}

/* ---------- Tabellen ---------- */
.tabelle-umbruch { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }

th, td { text-align: left; padding: 0.55rem 0.6rem; border-bottom: 1px solid var(--creme-dunkel); }

th {
    font-family: var(--serif);
    color: var(--rot);
    border-bottom: 2px solid var(--rot);
    white-space: nowrap;
}

tr:hover td { background: var(--creme); }

/* ---------- Kaffeepass ---------- */
.pass-karte {
    background: linear-gradient(135deg, var(--rot) 0%, var(--rot-dunkel) 100%);
    color: var(--weiss);
    border-radius: 14px;
    padding: 1.6rem;
    max-width: 460px;
    box-shadow: var(--schatten);
}

.pass-karte h2 { margin: 0 0 0.2rem; color: var(--weiss); }
.pass-karte .pass-nummer { opacity: 0.85; font-size: 0.85rem; letter-spacing: 0.08em; }

.stempel-raster {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.6rem;
    margin: 1.2rem 0;
}

.stempel {
    aspect-ratio: 1;
    border-radius: 50%;
    border: 2px dashed rgba(255,255,255,0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.stempel.voll { background: var(--weiss); border-style: solid; }
.stempel.gratis { border-color: var(--gold); color: var(--gold); font-weight: 700; }
.stempel.gratis.voll { background: var(--gold); color: var(--braun); }

.pass-schloss {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(0,0,0,0.18);
    border-radius: 8px;
    padding: 0.5rem 0.8rem;
    font-size: 0.85rem;
}

/* ---------- Aktionen ---------- */
.aktion-plakette {
    display: inline-block;
    background: var(--gold);
    color: var(--braun);
    font-weight: 700;
    padding: 0.15rem 0.7rem;
    border-radius: 999px;
    font-size: 0.85rem;
}

.status-punkt { display: inline-block; padding: 0.1rem 0.6rem; border-radius: 999px; font-size: 0.8rem; font-weight: 600; }
.status-aktiv { background: #e5f2e8; color: var(--gruen); }
.status-inaktiv { background: var(--creme-dunkel); color: var(--braun-hell); }
.status-gesperrt { background: #fbe6e9; color: var(--rot-dunkel); }

/* ---------- Fotobox ---------- */
.fotobox-buehne {
    background: var(--braun);
    border-radius: var(--radius);
    padding: 1rem;
    text-align: center;
}

.fotobox-buehne canvas, .fotobox-buehne img {
    max-width: 100%;
    border-radius: 8px;
}

.filter-leiste { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 0.8rem 0; justify-content: center; }

.filter-leiste .knopf { margin-top: 0; }
.filter-leiste .gewaehlt { outline: 3px solid var(--gold); }

/* ---------- Social Feed ---------- */
.feed-raster {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
}

.feed-beitrag {
    background: var(--weiss);
    border-radius: var(--radius);
    box-shadow: var(--schatten);
    overflow: hidden;
}

.feed-beitrag img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.feed-text { padding: 0.8rem 1rem 1rem; }
.feed-meta { font-size: 0.8rem; color: var(--braun-hell); }

/* ---------- Login ---------- */
.login-buehne {
    max-width: 420px;
    margin: 3rem auto;
}

.login-kopf {
    text-align: center;
    margin-bottom: 1.5rem;
}

.login-kopf .marke-signet {
    width: 64px; height: 64px; font-size: 1.6rem;
    margin: 0 auto 0.8rem;
}

/* ---------- Fußbereich ---------- */
.fuss {
    background: var(--braun);
    color: var(--creme);
    text-align: center;
    padding: 1.2rem 1rem;
    font-size: 0.85rem;
}

.fuss-klein { opacity: 0.6; font-family: var(--serif); font-style: italic; margin-top: 0.2rem; }

/* ---------- Responsiv: Mobil ---------- */
@media (max-width: 800px) {
    .nav-knopf { display: block; }

    .navigation {
        display: none;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        padding: 0.5rem 0;
    }

    .navigation.offen { display: flex; }
    .navigation a { padding: 0.7rem 0.8rem; }
    .nav-abmelden { border-left: none; border-top: 1px solid rgba(255,255,255,0.35); margin: 0.3rem 0 0; }

    h1 { font-size: 1.5rem; }
    .inhalt { padding: 1rem 0.8rem 2.5rem; }
    .karte { padding: 1rem; }
    .stempel-raster { grid-template-columns: repeat(4, 1fr); }
}