/* === Biersommelier Sauerland – Komplett-Theme (Light, Bitter, Grün) === */
/* Selbstgehostete Schrift: Bitter */
@font-face{
    font-family: "Bitter";
    src: url("../fonts/bitter.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Headlines dürfen bis zu echten Schnitten synthetisch bold/italic sein */
h1, h2, h3, h4 { font-synthesis: weight style; }

/* ===== Variablen (CI) ===== */
:root{
    --bg:        #ffffff;   /* Hintergrund */
    --surface:   #ffffff;   /* Karten/Flächen */
    --ink:       #3e3d40;   /* Haupttext */
    --muted:     #6f6e72;   /* Sekundärtext */
    --line:      #e8e8ea;   /* Linien/Rahmen */

    --brand:     #287621;   /* Primärgrün (Buttons, Akzent) */
    --brand-ink: #ffffff;   /* Text auf Brandflächen */
    --accent:    #1f5e1a;   /* Hover/Focus Grün etwas dunkler */

    --r-md: 12px;
    --r-lg: 16px;
    --shadow-sm: 0 6px 16px rgba(0,0,0,.06);
    --shadow-md: 0 12px 28px rgba(0,0,0,.08);

    --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-serif: "Bitter", Georgia, "Times New Roman", serif;
}

/* ===== Reset & Page ===== */
*{ box-sizing:border-box }
html{ scroll-behavior:smooth }
@media (prefers-reduced-motion: reduce){
    *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition:none !important; }
}

body{
    margin:0;
    font-family: var(--font-sans);
    color: var(--ink);
    line-height: 1.55;
    background: var(--bg);
}

.container{ max-width:1100px; margin:0 auto; padding:24px }

/* ===== Hero ===== */
header.hero{
    display:grid; gap:20px; align-items:center;
    grid-template-columns: 1.1fr 0.9fr; padding:32px 24px 8px;
}
@media (max-width:900px){ header.hero{ grid-template-columns:1fr } }

.badge{
    display:inline-block; padding:6px 10px; border:1px solid var(--brand);
    color:var(--accent); border-radius:999px; font-weight:600; letter-spacing:.2px;
    background: color-mix(in srgb, var(--brand) 12%, transparent);
}

/* Headlines auf Bitter */
h1, h2, h3, h4{
    font-family: var(--font-serif);
    color: var(--ink);
    letter-spacing:.1px;
    font-weight: 700;
}

/* Größen/Abstände für Bitter */
h1{ font-size: clamp(28px, 4vw, 44px); line-height:1.15; margin:.3em 0 }
h2{ font-size: clamp(22px, 3vw, 32px); line-height:1.2;  margin:.6em 0 .4em }
h3{ font-size: 20px; line-height:1.25; margin:.6em 0 .35em }
h4{ font-size: 18px; line-height:1.3;  margin:.6em 0 .35em }

p.lead{ font-size: clamp(16px, 2.1vw, 20px); color:var(--muted); margin:.6em 0 1em }

/* ===== CTA / Buttons ===== */
.cta{
    display:inline-flex; align-items:center; gap:10px; padding:14px 18px;
    background:var(--brand); color:var(--brand-ink);
    border-radius: var(--r-md); text-decoration:none; font-weight:700;
    box-shadow: var(--shadow-sm);
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.cta:hover{
    transform:translateY(-1px);
    box-shadow: var(--shadow-md);
    background: color-mix(in srgb, var(--brand) 92%, #ffffff 8%);
}

/* Kompatibilität zu deinem Button-System */
.btn-row{ display:flex; gap:10px; flex-wrap:wrap }
.btn{
    text-decoration:none; padding:10px 12px; border-radius: var(--r-md); font-weight:700;
    transition: background .15s ease, border-color .15s ease, transform .15s ease, color .15s ease;
}

/* .btn.primary (deine Komponente) */
.btn.primary{
    background: var(--brand);
    color: var(--brand-ink);
    border: 1px solid var(--brand);
    box-shadow: var(--shadow-sm);
}
.btn.primary:hover{
    background: var(--accent);
    border-color: var(--accent);
    transform: translateY(-1px);
}

/* Bootstrap-kompatibel: .btn-primary passend zu deiner Vorgabe */
.btn-primary {
    background: #287621 !important;
    border-color: #287621 !important;
    color: #fff !important;
}
.btn-primary:hover,
.btn-primary:focus {
    background: #1f5e1a !important;
    border-color: #1f5e1a !important;
    color: #fff !important;
}
.btn-primary:focus-visible{
    outline: 2px solid color-mix(in srgb, #287621 60%, #ffffff 40%);
    outline-offset: 2px;
}

/* Ghost/Outline-Variante */
.btn.ghost{ border:1px solid var(--line); color:var(--muted); background: transparent }
.btn.ghost:hover{ border-color: color-mix(in srgb, var(--line) 60%, var(--brand) 40%); color: var(--ink) }

/* ===== Media ===== */
.hero-img{ border-radius: var(--r-lg); overflow:hidden; border:1px solid var(--line); box-shadow: var(--shadow-md) }
.hero-img img{ width:100%; height:auto; display:block; }

/* ===== Trust-Pills ===== */
.trust{
    display:flex; gap:12px; flex-wrap:wrap; margin-top:12px; color:var(--muted); font-size:14px
}
.trust span{
    display:inline-flex; gap:8px; align-items:center; background:var(--surface);
    padding:8px 10px; border:1px solid var(--line); border-radius:10px; box-shadow: var(--shadow-sm);
}

/* ===== Grid & Cards ===== */
.grid{ display:grid; gap:18px; grid-template-columns: 1fr 1fr; margin-top:28px }
@media (max-width:900px){ .grid{ grid-template-columns:1fr } }

.card{
    background:var(--surface); border:1px solid var(--line);
    border-radius: var(--r-lg); overflow:hidden; box-shadow: var(--shadow-sm);
}
.card .media{ aspect-ratio:16/9; background:var(--line); }
.card .media img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Banner (Letterboxing statt Beschnitt) */
.card .media.media--banner{ aspect-ratio:2/1; }
.card .media.media--banner img{ object-fit:contain; background:var(--line); }

.card .content{ padding:16px 16px 18px }
.card h3{ margin:0 0 6px; font-size:20px; font-family: var(--font-serif) }
.meta{ color:var(--muted); font-size:14px; display:flex; gap:10px; flex-wrap:wrap; margin-bottom:8px }
.summary{ color: color-mix(in srgb, var(--ink) 86%, white 14%); margin:8px 0 14px; }
.price{ font-weight:700; color:var(--brand); margin-right:8px }

/* ===== Footer ===== */
footer{ color:var(--muted); padding:40px 24px 60px; text-align:center }

/* ===== Sticky Mobile CTA ===== */
.sticky-cta{
    position:sticky; bottom:0;
    background:linear-gradient(180deg, rgba(255,255,255,0) 0%, var(--bg) 30%);
    padding:18px 0 12px; margin-top:18px;
}
.sticky-cta .bar{
    display:flex; gap:12px; flex-wrap:wrap;
    background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:10px 12px;
    align-items:center; justify-content:center; box-shadow: var(--shadow-sm);
}