/* Home-Page CSS — automatisch aus FrontendController extrahiert */
/* ── Hero ─────────────────────────────────────────── */
.hero-wrap {
    background: transparent;
    padding: 0 24px;
    position: relative;
    overflow: visible;
    isolation: isolate;
}
.hero-inner {
    max-width: 1340px; margin: 0 auto;
    padding: 32px 0 28px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    column-gap: 40px;
    position: relative;
}

/* Links: Logo + Suchfeld */
.hero-left {
    display: flex; flex-direction: column;
    align-items: flex-start; gap: 14px;
    min-width: 300px; max-width: 460px;
}
.hero-logo-row { display: flex; align-items: center; gap: 8px; }
.hero-logo-img { height: clamp(60px, 8vw, 88px); width: auto; object-fit: contain; }
.hero-logo-leaf { font-size: 3rem; line-height: 1; }
.hero-logo-text {
    font-size: clamp(2.6rem, 6vw, 4.2rem); font-weight: 900;
    letter-spacing: -.06em; color: var(--green-d);
    font-family: 'Georgia', serif; line-height: 1;
}
.hero-search-wrap { position: relative; width: 100%; }
.hero-search-input {
    width: 100%; padding: 13px 52px 13px 22px;
    font-size: 1rem; font-family: inherit;
    border: 2px solid var(--border); border-radius: 40px;
    background: #fff; color: var(--text); outline: none;
    transition: border-color .2s, box-shadow .2s;
    box-shadow: 0 2px 10px rgba(0,0,0,.07);
}
.hero-search-input:focus { border-color: var(--green); box-shadow: 0 2px 18px rgba(46,125,50,.16); }
.hero-search-input::placeholder { color: var(--text-3); }
.hero-search-btn {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    background: var(--green); border: none; border-radius: 50%;
    width: 38px; height: 38px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; color: #fff;
    transition: background .15s;
}
.hero-search-btn:hover { background: var(--green-d); }

/* Mitte: Datum + QuickNav in einer Zeile */
.hero-mid {
    display: flex; flex-direction: column;
    align-items: center; gap: 14px;
    justify-content: center;
}
.hero-meta {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.hero-update-date { font-size: .97rem; color: var(--text-2); font-weight: 600; }
.hero-count-chip  { font-size: .92rem; color: var(--text-3); font-weight: 500; }
.hero-quicknav {
    display: flex; flex-direction: row; flex-wrap: nowrap;
    gap: 8px; align-items: center;
}
.qnav-item {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 5px;
    background: #fff; border: 1.5px solid var(--border); border-radius: 12px;
    padding: 10px 14px 9px; font-size: .76rem; font-weight: 600;
    color: var(--text-2); text-decoration: none;
    transition: border-color .15s, background .15s, color .15s;
    box-shadow: 0 1px 4px rgba(0,0,0,.05); text-align: center;
    white-space: nowrap;
}
.qnav-item:hover { border-color: var(--green); background: var(--green-l); color: var(--green-d); }
.qnav-item--dim { opacity: .38; pointer-events: none; cursor: default; }
.qnav-icon { font-size: 1.3rem; line-height: 1; }
.qnav-label { line-height: 1.2; }

/* Rechts: Platz für Maskottchen (absolut) */
.hero-right { width: 200px; flex-shrink: 0; }

/* Maskottchen absolut ganz rechts, ragt in Grid — größer */
.hero-mascot-wrap {
    position: absolute; right: 0; bottom: -80px;
    z-index: 0; pointer-events: none;
}
.featured-wrap { position: relative; z-index: 2; background: transparent; }
.home-tags-wrap { position: relative; z-index: 2; margin-top: 8px; }
.hero-mascot {
    height: clamp(220px, 25vw, 320px); width: auto; object-fit: contain;
    user-select: none; display: block;
    filter: drop-shadow(0 8px 18px rgba(0,0,0,.13));
}
.cat-grid { position: relative; z-index: 1; }
@media(max-width:1100px) { .hero-mascot-wrap { display: none; } }
@media(max-width:860px) {
    .hero-inner { grid-template-columns: 1fr; gap: 20px; }
    .hero-right { display: none; }
    .hero-mid { align-items: flex-start; }
    .hero-quicknav { flex-wrap: wrap; }
}

/* ── Kategorie-Grid ──────────────────────────────── */
.cat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    max-width: 1388px; margin: 16px auto;
    padding: 0 24px 24px;
}
@media(max-width:1200px) { .cat-grid { grid-template-columns: repeat(3, 1fr); } }
@media(max-width:860px)  { .cat-grid { grid-template-columns: repeat(2, 1fr); } }
@media(max-width:500px)  { .cat-grid { grid-template-columns: 1fr; } }

.cat-col {
    background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
    overflow: hidden; display: flex; flex-direction: column;
    box-shadow: var(--shadow); transition: box-shadow .2s, transform .2s;
}
.cat-col:hover { box-shadow: var(--shadow-h); transform: translateY(-1px); }

/* Card-Header: Icon 64px, kein Rahmen, Text vertikal zentriert */
.cat-col-head {
    display: flex; align-items: center; gap: 14px;
    padding: 16px 14px 12px;
    border-top: 3px solid var(--c, var(--green));
    border-bottom: 1px solid var(--border);
    background: #fff;
}
/* Icon — kein Rahmen, kein Hintergrund, einfach das Bild */
.cat-col-icon-wrap {
    flex-shrink: 0; width: 52px; height: 52px;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.cat-col-icon-wrap img {
    width: 52px; height: 52px; object-fit: contain; display: block;
}
.cat-col-icon-letter {
    width: 48px; height: 48px; border-radius: 50%;
    background: var(--c, var(--green));
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1.1rem; font-weight: 900; line-height: 1;
}
.cat-col-titles { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.cat-col-title {
    font-weight: 800; font-size: .97rem;
    color: var(--c, var(--green));
    line-height: 1.25; letter-spacing: -.01em;
}
.cat-col-sub {
    font-size: .74rem; color: var(--text-3); margin-top: 3px; font-weight: 500;
    line-height: 1.45;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; min-height: 2.15rem;
}

/* Link-Liste — keine Trennlinien */
.cat-link-list {
    list-style: none; overflow-y: auto; max-height: 320px; flex: 1;
    scrollbar-width: thin; scrollbar-color: var(--border) transparent;
}
.cat-link-list::-webkit-scrollbar { width: 4px; }
.cat-link-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.cat-link-item { display: flex; align-items: stretch; }
/* Keine border-bottom mehr — sauber wie im Mockup */

.cat-link-row {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 12px; text-decoration: none; color: var(--text);
    font-size: .875rem; transition: background .1s; flex: 1; min-width: 0;
}
.cat-link-row:hover { background: var(--green-l); }

.cat-link-num {
    font-size: .72rem; color: var(--text-3); width: 18px; text-align: right;
    flex-shrink: 0; font-variant-numeric: tabular-nums; font-weight: 700;
}
.cat-link-row img {
    flex-shrink: 0; border-radius: 3px; object-fit: contain; display: block;
}
.cat-link-label {
    flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-weight: 600; min-width: 0; color: var(--text); font-size: .92rem;
}
.trend-dot { color: var(--green); font-size: .65rem; font-weight: 800; margin-left: 2px; }
.cat-link-lupe {
    opacity: 0; flex-shrink: 0; transition: opacity .15s; color: var(--green-d);
    display: flex; align-items: center; padding: 3px 7px 3px 4px;
    border-radius: 4px; text-decoration: none; margin-right: 4px;
}
.cat-link-item:hover .cat-link-lupe { opacity: 1; background: rgba(46,125,50,.1); }

/* Mehr-Button — echter Button mit Abstand wie im Mockup */
.cat-more-wrap {
    padding: 10px 12px 12px;
    margin-top: auto;
}
.cat-more-btn {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 9px 14px; font-size: .83rem; font-weight: 700;
    color: var(--btn-text, #fff);
    background: var(--btn-bg, var(--green-d));
    text-decoration: none; transition: opacity .15s;
    letter-spacing: .01em;
    border-radius: 8px;   /* abgerundete Ecken wie im Mockup */
    width: 100%;
}
.cat-more-btn:hover { opacity: .85; }
.cat-more-arrow { transition: transform .15s; font-size: 1rem; }
.cat-more-btn:hover .cat-more-arrow { transform: translateX(4px); }
.cat-more-btn--empty {
    color: var(--text-3); cursor: default; font-style: italic;
    background: #f5f8f5; font-weight: 400;
}

/* ── Trust-Bar ───────────────────────────────────── */
.trust-bar-wrap { }
.trust-bar {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
    max-width: 1340px; margin: 0 auto;
}
.trust-item { text-align: center; padding: 28px 20px; border-right: 1px solid rgba(128,128,128,.2); }
.trust-item:last-child { border-right: none; }
.trust-item-icon { font-size: 1.8rem; margin-bottom: 8px; display:flex; justify-content:center; align-items:center; min-height:2rem; }
.trust-item-icon img { height: 2rem; width: auto; display: block; }
.trust-item-title { font-weight: 700; font-size: .88rem; color: var(--footer-text, #333); margin-bottom: 5px; }
.trust-item-desc  { font-size: .78rem; color: var(--footer-text, #555); opacity: .7; line-height: 1.45; }

@media(max-width:860px) {
    .trust-bar { grid-template-columns: repeat(2, 1fr); }
    .trust-item:nth-child(2) { border-right: none; }
    .trust-item:nth-child(3) { border-top: 1px solid rgba(255,255,255,.1); }
}
@media(max-width:480px) {
    .trust-bar { grid-template-columns: 1fr; }
    .trust-item { border-right: none; border-bottom: 1px solid rgba(255,255,255,.1); }
}

#cl-sdrop img { display: inline-block !important; }