/*
 * style.css – Heilkunde Ledenko
 * Version 1.0 – 2026-03-05
 * © Frone.de
 */

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

:root {
    --gruen:    #4a7c59;
    --gruen-d:  #35603f;
    --gruen-l:  #eef5f0;
    --gold:     #8a7340;
    --text:     #2e2e2e;
    --bg:       #f8f5ef;
    --white:    #ffffff;
    --border:   #ccdacd;
    --grau:     #f2ede4;
}

body {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 14px;
    color: var(--text);
    background: var(--bg);
    line-height: 1.75;
}

a            { color: var(--gruen-d); text-decoration: none; }
a:hover      { text-decoration: underline; color: var(--gold); }
img          { display: block; max-width: 100%; height: auto; }
ul           { padding-left: 1.4rem; }
li           { margin-bottom: .3rem; }

/* ── WRAPPER ─────────────────────────────────────────────── */
.wrapper {
    max-width: 1170px;
    margin: 0 auto;
    background: var(--white);
    box-shadow: 0 0 24px rgba(0,0,0,.10);
}

/* ── HEADER ──────────────────────────────────────────────── */
.site-header {
    background: var(--white);
    border-bottom: 3px solid var(--gruen);
    line-height: 0;
}
.site-header a   { display: block; }
.site-header img { width: 100%; height: auto; display: block; }

/* ── LAYOUT ──────────────────────────────────────────────── */
.layout {
    display: flex;
    min-height: 500px;
}

/* ── LINKE NAV ───────────────────────────────────────────── */
.sidebar {
    width: 165px;
    flex-shrink: 0;
    background: var(--grau);
    border-right: 1px solid var(--border);
    padding: 1.2rem .5rem;
}

.sidebar ul        { list-style: none; padding: 0; }
.sidebar li        { margin-bottom: .4rem; }

.sidebar li a,
.sidebar li span.nav-label {
    display: block;
    padding: .4rem .55rem;
    border-radius: 5px;
    font-size: .78rem;
    font-weight: bold;
    color: var(--gruen-d);
    text-align: center;
    word-break: break-word;
    hyphens: auto;
    transition: background .15s, color .15s;
}
.sidebar li.active > span.nav-label,
.sidebar li.active > a {
    background: var(--gruen);
    color: var(--white);
    cursor: default;
}
.sidebar li a:hover {
    background: var(--gruen);
    color: var(--white);
    text-decoration: none;
}

/* Angebote-Untermenü */
.sub-nav {
    margin-top: .3rem;
    padding-left: .5rem !important;
    border-left: 2px solid var(--border);
}
.sub-nav li a,
.sub-nav li span.nav-label {
    font-size: .73rem;
    font-weight: normal;
    padding: .3rem .4rem;
}

/* ── HAUPTINHALT ─────────────────────────────────────────── */
.content {
    flex: 1;
    padding: 1.8rem 2rem;
    background: var(--white);
}

.content h1 {
    color: var(--gruen);
    font-size: 1.15rem;
    margin-bottom: .85rem;
    padding-bottom: .4rem;
    border-bottom: 2px solid var(--border);
}
.content h2 {
    color: var(--gruen-d);
    font-size: 1rem;
    margin: 1.2rem 0 .5rem;
}
.content h3 {
    color: var(--gold);
    font-size: .95rem;
    margin: 1rem 0 .4rem;
}
.content p { margin-bottom: .8rem; }

/* ── ANGEBOT HERO-BILD ───────────────────────────────────────── */
.angebot-hero {
    margin: -1.8rem -2rem 1.4rem -2rem;
    overflow: hidden;
    max-height: 320px;
}
.angebot-hero img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* ── PANEL (Bild + Text) ─────────────────────────────────── */
.panel {
    display: flex;
    gap: 1.4rem;
    margin-bottom: 1rem;
}
.panel-img        { width: 180px; flex-shrink: 0; }
.panel-img img    { border-radius: 6px; }
.panel-body       { flex: 1; }

/* ── WELCOME-BOX (Index) ─────────────────────────────────── */
.welcome-box {
    background: var(--gruen-l);
    border-left: 4px solid var(--gruen);
    border-radius: 0 8px 8px 0;
    padding: 1.2rem 1.4rem;
    margin-bottom: 1.4rem;
}
.welcome-box p { margin-bottom: .6rem; }
.welcome-box p:last-child { margin-bottom: 0; }

/* ── ANGEBOTE-ÜBERSICHT ──────────────────────────────────── */
.angebote-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}
.angebot-card {
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow .2s;
}
.angebot-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.12); }
.angebot-card img   { width: 100%; height: 120px; object-fit: cover; }
.angebot-card-body  { padding: .6rem .75rem; }
.angebot-card-body a {
    font-weight: bold;
    font-size: .82rem;
    color: var(--gruen-d);
}

/* ── SEMINAR-BOX ─────────────────────────────────────────── */
.seminar-box {
    background: var(--gruen-l);
    border-radius: 8px;
    padding: 1rem 1.3rem;
    margin-bottom: 1.2rem;
    border-left: 3px solid var(--gruen);
}
.seminar-box .on-anfrage {
    display: inline-block;
    margin-top: .5rem;
    background: var(--gruen);
    color: var(--white);
    font-size: .75rem;
    font-weight: bold;
    padding: .2rem .7rem;
    border-radius: 20px;
}

/* ── FIT-TIPS ────────────────────────────────────────────── */
.fittip {
    background: var(--gruen-l);
    border-radius: 8px;
    padding: 1rem 1.3rem;
    margin-bottom: 1rem;
    border-left: 3px solid var(--gold);
}
.fittip::before {
    content: '💚 ';
}

/* ── RECHTE KONTAKT-SIDEBAR ──────────────────────────────── */
.contact-sidebar {
    width: 250px;
    flex-shrink: 0;
    background: var(--grau);
    border-left: 1px solid var(--border);
    padding: 1rem .6rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.contact-sidebar img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

/* ── KARTE ───────────────────────────────────────────────── */
.map-wrapper { border-radius: 8px; overflow: hidden; border: 1px solid var(--border); margin-top: 1rem; }
.map-wrapper iframe { display: block; width: 100%; height: 360px; border: none; }

/* ── FOOTER ──────────────────────────────────────────────── */
.site-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .6rem 1.4rem;
    background: var(--grau);
    border-top: 3px solid var(--gruen);
    font-size: .75rem;
    flex-wrap: wrap;
    gap: .3rem;
}
.site-footer a { color: var(--gruen-d); font-weight: bold; }

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 780px) {
    .layout          { flex-direction: column; }
    .sidebar         { width: 100%; border-right: none; border-bottom: 1px solid var(--border); padding: .6rem; }
    .sidebar ul      { display: flex; gap: .3rem; flex-wrap: wrap; justify-content: center; }
    .sub-nav         { display: none; }
    .contact-sidebar { width: 100%; border-left: none; border-top: 1px solid var(--border); }
    .panel           { flex-direction: column; }
    .panel-img       { width: 100%; }
    .site-footer     { flex-direction: column; text-align: center; }
    .angebote-grid   { grid-template-columns: 1fr 1fr; }
}