/* Sandras Kräuteratelier — eigenständiges, botanisches Design.
   Bewusst anders als die Ferienwohnung-Seite (dunkel/gold): hier hell,
   warm, pflanzlich. Farben aus Sandras eigenen Produktetiketten
   uebernommen (Salbei-Gruen + Bernstein-Orange), damit es zur
   bestehenden Marke passt. */

:root{
    --parchment: #f7f2e6;
    --parchment-card: #fffdf9;
    --sage-100: #e6ede2;
    --sage-300: #a9c3a4;
    --sage-500: #739676;
    --sage-700: #4c6b4f;
    --forest-900: #2c362a;
    --forest-700: #435340;
    --amber-500: #e26c0a;
    --amber-600: #c25b06;
    --hairline: rgba(44,54,42,0.14);
    --shadow: 0 10px 30px rgba(44,54,42,0.12);
    --font-head: 'Fraunces', Georgia, 'Iowan Old Style', serif;
    --font-body: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
}

*{ box-sizing:border-box; }

html, body.kr-body{
    margin:0;
    padding:0;
    background:var(--parchment);
    color:var(--forest-900);
    font-family:var(--font-body);
    line-height:1.6;
}

body.kr-body{
    padding-top:76px;
}

a{ color:inherit; }

img{ max-width:100%; display:block; }

/* ---- Header ---------------------------------------------------- */
.kr-header{
    position:fixed;
    top:0; left:0; right:0;
    z-index:100;
    height:76px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 clamp(16px, 4vw, 48px);
    background:rgba(247,242,230,0.92);
    backdrop-filter:blur(8px);
    border-bottom:1px solid var(--hairline);
}
.kr-brand{
    display:flex;
    align-items:center;
    gap:12px;
    text-decoration:none;
    color:var(--forest-900);
}
.kr-brand-mark{
    font-size:1.4em;
}
.kr-brand-text{
    font-family:var(--font-head);
    font-size:1.25em;
    line-height:1.1;
}
.kr-brand-text small{
    display:block;
    font-family:var(--font-body);
    font-size:0.42em;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--sage-700);
    font-weight:600;
}
.kr-nav{
    display:flex;
    gap:clamp(10px, 2vw, 28px);
    flex-wrap:wrap;
}
.kr-nav a{
    text-decoration:none;
    font-size:0.95em;
    font-weight:600;
    color:var(--forest-700);
    padding:6px 2px;
    border-bottom:2px solid transparent;
    transition:border-color .2s ease, color .2s ease;
}
.kr-nav a:hover{
    color:var(--amber-600);
    border-color:var(--amber-500);
}
.kr-nav-toggle{
    display:none;
}

@media (max-width: 720px){
    .kr-nav{
        position:fixed;
        top:76px; left:0; right:0;
        background:var(--parchment);
        border-bottom:1px solid var(--hairline);
        flex-direction:column;
        gap:0;
        padding:8px 20px 16px;
        transform:translateY(-8px);
        opacity:0;
        pointer-events:none;
        transition:opacity .2s ease, transform .2s ease;
    }
    .kr-nav a{ padding:10px 0; border-bottom:1px solid var(--hairline); }
    .kr-nav-toggle{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        width:40px; height:40px;
        border-radius:8px;
        border:1px solid var(--hairline);
        background:var(--parchment-card);
        font-size:1.2em;
        cursor:pointer;
    }
    .kr-nav.is-open{
        opacity:1;
        pointer-events:auto;
        transform:translateY(0);
    }
}

/* ---- Layout shell ------------------------------------------------ */
.kr-main{
    max-width:1180px;
    margin:0 auto;
    padding:36px clamp(16px, 4vw, 40px) 80px;
}

.kr-eyebrow{
    font-size:0.8em;
    font-weight:700;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--sage-700);
    margin:0 0 8px;
}
.kr-title{
    font-family:var(--font-head);
    font-size:clamp(2em, 4vw, 2.8em);
    margin:0 0 18px;
    color:var(--forest-900);
}
.kr-lede{
    max-width:64ch;
    color:var(--forest-700);
    font-size:1.05em;
}

/* ---- Hero / about (index) ---------------------------------------- */
.kr-hero{
    display:grid;
    grid-template-columns:1.1fr 0.9fr;
    gap:40px;
    align-items:center;
    margin-bottom:56px;
}
.kr-hero-media{
    border-radius:18px;
    overflow:hidden;
    box-shadow:var(--shadow);
    border:1px solid var(--hairline);
}
.kr-hero-text p{
    color:var(--forest-700);
    white-space:pre-line;
}
@media (max-width: 860px){
    .kr-hero{ grid-template-columns:1fr; }
}

/* ---- Category grid (index) ---------------------------------------- */
.kr-cat-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
    gap:18px;
    margin:28px 0 60px;
}
.kr-cat-card{
    display:flex;
    flex-direction:column;
    background:var(--parchment-card);
    border:1px solid var(--hairline);
    border-radius:16px;
    overflow:hidden;
    text-decoration:none;
    color:var(--forest-900);
    box-shadow:var(--shadow);
    transition:transform .2s ease, border-color .2s ease;
}
.kr-cat-card:hover{
    transform:translateY(-4px);
    border-color:var(--sage-500);
}
.kr-cat-thumb{
    aspect-ratio:4/3;
    background:var(--sage-100);
    overflow:hidden;
}
.kr-cat-thumb img{
    width:100%; height:100%;
    object-fit:cover;
}
.kr-cat-thumb.kr-no-image{
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:2.2em;
}
.kr-cat-name{
    padding:14px 16px 18px;
    font-weight:700;
    font-size:1.02em;
}

/* ---- Safety document strip (index) --------------------------------- */
.kr-doc-strip{
    display:flex;
    gap:16px;
    flex-wrap:wrap;
    margin:20px 0 60px;
}
.kr-doc-thumb{
    width:140px;
    border-radius:10px;
    overflow:hidden;
    border:1px solid var(--hairline);
    box-shadow:var(--shadow);
    cursor:pointer;
    background:none;
    padding:0;
}
.kr-doc-thumb img{ width:100%; display:block; }

/* ---- Gallery grid (category pages) --------------------------------- */
.kr-gallery{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
    gap:14px;
    margin:24px 0 48px;
}
.kr-gallery-item{
    aspect-ratio:3/4;
    border-radius:12px;
    overflow:hidden;
    border:1px solid var(--hairline);
    background:var(--sage-100);
    cursor:pointer;
    padding:0;
    box-shadow:0 4px 14px rgba(44,54,42,0.10);
    transition:transform .18s ease, box-shadow .18s ease;
}
.kr-gallery-item img{
    width:100%; height:100%;
    object-fit:cover;
    transition:transform .3s ease;
}
.kr-gallery-item:hover{
    transform:translateY(-3px);
    box-shadow:0 10px 22px rgba(44,54,42,0.18);
}
.kr-gallery-item:hover img{
    transform:scale(1.05);
}

/* ---- Video section ---------------------------------------------- */
.kr-video-heading{
    font-family:var(--font-head);
    font-size:1.3em;
    margin:8px 0 4px;
}
.kr-video-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
    gap:20px;
    margin:12px 0 48px;
}
.kr-video-frame{
    position:relative;
    width:100%;
    padding-top:56.25%;
    border-radius:14px;
    overflow:hidden;
    border:1px solid var(--hairline);
    box-shadow:var(--shadow);
}
.kr-video-frame iframe{
    position:absolute;
    inset:0;
    width:100%; height:100%;
    border:0;
}

/* ---- Lightbox ------------------------------------------------------ */
.kr-lightbox{
    position:fixed;
    inset:0;
    z-index:300;
    display:none;
    align-items:center;
    justify-content:center;
    background:rgba(28,36,26,0.94);
    padding:24px;
}
.kr-lightbox.is-open{ display:flex; }
.kr-lightbox-figure{
    position:relative;
    max-width:min(92vw, 1000px);
    max-height:88vh;
    display:flex;
    flex-direction:column;
    align-items:center;
}
.kr-lightbox-figure img{
    max-width:100%;
    max-height:80vh;
    border-radius:10px;
    box-shadow:0 20px 60px rgba(0,0,0,0.5);
}
.kr-lightbox-counter{
    color:var(--sage-300);
    font-size:0.85em;
    margin-top:12px;
    letter-spacing:0.04em;
}
.kr-lightbox-close,
.kr-lightbox-prev,
.kr-lightbox-next{
    position:fixed;
    background:rgba(247,242,230,0.12);
    border:1px solid rgba(247,242,230,0.35);
    color:var(--parchment);
    width:48px; height:48px;
    border-radius:50%;
    font-size:1.3em;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:background .2s ease;
}
.kr-lightbox-close:hover,
.kr-lightbox-prev:hover,
.kr-lightbox-next:hover{
    background:rgba(247,242,230,0.28);
}
.kr-lightbox-close{ top:20px; right:20px; }
.kr-lightbox-prev{ left:20px; top:50%; transform:translateY(-50%); }
.kr-lightbox-next{ right:20px; top:50%; transform:translateY(-50%); }
@media (max-width:640px){
    .kr-lightbox-prev{ left:8px; }
    .kr-lightbox-next{ right:8px; }
    .kr-lightbox-close{ top:8px; right:8px; }
}

/* ---- Footer --------------------------------------------------------- */
.kr-footer{
    background:var(--forest-900);
    color:var(--sage-100);
    padding:44px clamp(16px, 4vw, 48px) 34px;
    margin-top:40px;
}
.kr-footer a{ color:var(--sage-100); text-decoration:none; }
.kr-footer a:hover{ color:var(--amber-500); }
.kr-footer-grid{
    max-width:1180px;
    margin:0 auto;
    display:grid;
    grid-template-columns:1.2fr 1fr 1fr;
    gap:28px;
}
.kr-footer h3{
    font-family:var(--font-head);
    font-weight:600;
    font-size:1.1em;
    margin:0 0 10px;
    color:#fff;
}
.kr-footer p{ margin:0 0 6px; font-size:0.92em; color:var(--sage-300); }
.kr-footer ul{ list-style:none; padding:0; margin:0; }
.kr-footer li{ margin-bottom:8px; font-size:0.92em; }
.kr-footer-social{ display:flex; gap:10px; margin-top:12px; }
.kr-footer-social a{
    width:36px; height:36px;
    border-radius:50%;
    background:rgba(255,255,255,0.08);
    display:flex; align-items:center; justify-content:center;
    text-decoration:none;
}
.kr-footer-social .fa{
    font-size:1.05em;
    color:var(--sage-100);
}
.kr-footer-social a:hover{
    background:var(--amber-500);
}
.kr-footer-social a:hover .fa{
    color:#fff;
}
.kr-footer-bottom{
    max-width:1180px;
    margin:30px auto 0;
    padding-top:18px;
    border-top:1px solid rgba(255,255,255,0.12);
    font-size:0.82em;
    color:var(--sage-300);
    display:flex;
    gap:16px;
    flex-wrap:wrap;
    justify-content:space-between;
}
@media (max-width:760px){
    .kr-footer-grid{ grid-template-columns:1fr; }
}