/* ==========================================================================
   Startseite (nur .home-landing)
   Eigene helle, warme Palette — dieselbe wie im Bestellshop (bestellungen/assets/css/shop.css),
   damit Startseite und Bestellstrecke wie eine Marke wirken. Alles ist bewusst unter
   .home-landing verschachtelt: Kasse, Küche und Admin behalten ihr dunkles Theme.
   ========================================================================== */
.home-landing {
    --h-cream: #faf5ec;
    --h-cream-soft: #f3ead9;
    --h-card: #ffffff;
    --h-ink: #2e281f;
    --h-ink-soft: #5b5245;
    --h-gray: #8f8574;
    --h-border: #eae1cf;
    --h-terracotta: #dd6b3a;
    --h-terracotta-dark: #c2582c;
    --h-aegean: #1d5c73;
    --h-radius: 16px;
    --h-shadow: 0 10px 28px rgba(46, 40, 31, 0.1);
    --h-shadow-sm: 0 4px 14px rgba(46, 40, 31, 0.07);
    background: var(--h-cream);
    color: var(--h-ink);
}
.home-wrap { max-width: 1140px; margin: 0 auto; padding: 0 20px; }

/* --- Kopfzeile hell einfärben (Markup bleibt unverändert, siehe includes/header.php) --- */
.home-landing .site-header { background: rgba(250, 245, 236, 0.92); border-bottom: 1px solid var(--h-border); }
.home-landing .brand { color: var(--h-ink); }
.home-landing .brand small { color: var(--h-gray); }
.home-landing .brand .logo-badge { background: var(--h-aegean); color: #fff; }
.home-landing .nav-links a { color: var(--h-ink-soft); }
.home-landing .nav-links a:hover { background: rgba(221, 107, 58, 0.12); color: var(--h-terracotta-dark); }
.home-landing .nav-links .btn-cta { background: var(--h-terracotta); color: #fff; }
.home-landing .nav-links .btn-cta:hover { background: var(--h-terracotta-dark); }
.home-landing .top-icons a { color: var(--h-ink-soft); }
.home-landing .nav-toggle { color: var(--h-ink); }
.home-landing .site-footer { background: var(--h-cream-soft); color: var(--h-gray); border-top: 1px solid var(--h-border); }
.home-landing .site-footer a { color: var(--h-ink-soft); }

/* --- Buttons --- */
.home-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    border-radius: 999px; padding: 14px 26px; font-weight: 700; font-size: 0.95rem;
    border: 2px solid transparent; cursor: pointer; transition: 0.15s ease; text-decoration: none;
}
.home-btn .icon { width: 19px; height: 19px; }
.home-btn-primary { background: var(--h-terracotta); color: #fff; }
.home-btn-primary:hover { background: var(--h-terracotta-dark); color: #fff; }
.home-btn-ghost { background: var(--h-card); color: var(--h-ink); border-color: var(--h-border); box-shadow: var(--h-shadow-sm); padding: 9px 22px 9px 9px; }
.home-btn-ghost:hover { border-color: var(--h-terracotta); }
.home-btn-ghost small { display: block; font-weight: 500; font-size: 0.75rem; color: var(--h-gray); }
.home-btn-ico { width: 38px; height: 38px; border-radius: 50%; background: var(--h-cream-soft); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.home-btn-ico .icon { color: var(--h-terracotta); }
.home-btn-block { width: 100%; padding: 11px 18px; font-size: 0.88rem; }

/* --- Hero --- */
.home-hero { padding: 44px 0 0; }
.home-hero-inner { display: grid; grid-template-columns: 1.05fr 1fr; gap: 44px; align-items: center; }
.home-badge {
    display: inline-flex; align-items: center; gap: 8px; background: var(--h-cream-soft);
    color: var(--h-terracotta-dark); border-radius: 999px; padding: 7px 16px;
    font-size: 0.8rem; font-weight: 800; margin-bottom: 18px;
}
.home-badge .icon { width: 16px; height: 16px; }
.home-hero h1 { font-size: clamp(2rem, 4.6vw, 3.2rem); line-height: 1.1; margin: 0 0 16px; font-weight: 800; letter-spacing: -0.02em; }
.home-hero h1 span { color: var(--h-terracotta); }
.home-hero p { color: var(--h-ink-soft); max-width: 470px; margin: 0 0 28px; font-size: 1.02rem; line-height: 1.6; }
.home-hero-actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.home-hero-visual {
    position: relative; border-radius: 26px; overflow: hidden; aspect-ratio: 4/3.2;
    background: linear-gradient(135deg, var(--h-aegean), var(--h-terracotta) 130%); box-shadow: var(--h-shadow);
}
.home-hero-visual img { width: 100%; height: 100%; object-fit: cover; }
.home-hero-visual > .icon { position: absolute; inset: 0; margin: auto; width: 70px; height: 70px; color: rgba(255,255,255,0.5); }

/* --- Kategorie-Kacheln, die unter dem Hero sitzen (wie im Vorlagen-Screenshot) --- */
.home-kat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 34px 0 8px; }
.home-kat-card {
    position: relative; display: block; height: 118px; border-radius: var(--h-radius); overflow: hidden;
    background: #241f19; color: #fff; text-decoration: none; box-shadow: var(--h-shadow-sm); transition: 0.15s ease;
}
.home-kat-card:hover { transform: translateY(-3px); box-shadow: var(--h-shadow); }
.home-kat-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.55; }
.home-kat-card-accent { background: var(--h-terracotta); }
.home-kat-card-accent img { opacity: 0.35; }
.home-kat-name {
    position: absolute; top: 14px; left: 16px; right: 46px; z-index: 2;
    font-weight: 800; font-size: 0.95rem; line-height: 1.25; text-shadow: 0 1px 6px rgba(0,0,0,0.5);
}
.home-kat-arrow {
    position: absolute; bottom: 12px; left: 16px; z-index: 2;
    width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,0.92);
    display: flex; align-items: center; justify-content: center;
}
.home-kat-arrow .icon { width: 17px; height: 17px; color: var(--h-ink); }

/* --- Vorteils-Leiste --- */
.home-trust { background: var(--h-card); margin-top: 34px; border-top: 1px solid var(--h-border); border-bottom: 1px solid var(--h-border); }
.home-trust-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding-top: 26px; padding-bottom: 26px; }
.home-trust-item { display: flex; align-items: center; gap: 14px; }
.home-trust-ico { width: 46px; height: 46px; border-radius: 50%; background: var(--h-cream-soft); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.home-trust-ico .icon { width: 22px; height: 22px; color: var(--h-terracotta); }
.home-trust-item strong { display: block; font-size: 0.98rem; }
.home-trust-item small { color: var(--h-gray); font-size: 0.82rem; }

/* --- Abschnitte --- */
.home-section { padding: 46px 0; }
.home-section-tight { padding: 10px 0 46px; }
.home-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 22px; flex-wrap: wrap; }
.home-section-head h2 { font-size: 1.65rem; margin: 0; font-weight: 800; }
.home-section-sub { color: var(--h-gray); font-size: 0.88rem; }

/* --- "Beliebt heute" --- */
.home-produkt-row { display: flex; gap: 18px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x proximity; }
.home-produkt-row::-webkit-scrollbar { height: 6px; }
.home-produkt-row::-webkit-scrollbar-thumb { background: var(--h-border); border-radius: 999px; }
.home-produkt-card {
    flex: 0 0 235px; scroll-snap-align: start; background: var(--h-card); border: 1px solid var(--h-border);
    border-radius: var(--h-radius); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--h-shadow-sm);
}
.home-produkt-foto { aspect-ratio: 4/3; background: var(--h-cream-soft); }
.home-produkt-foto img { width: 100%; height: 100%; object-fit: cover; }
.home-produkt-body { padding: 14px 15px 16px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.home-produkt-body h3 { margin: 0; font-size: 1rem; font-weight: 700; }
.home-produkt-body p { margin: 0; color: var(--h-gray); font-size: 0.8rem; }
.home-produkt-preis { margin-top: 6px; font-weight: 800; font-size: 1.15rem; color: var(--h-ink); }
.home-produkt-card .home-btn { margin-top: 10px; }

/* --- Dunkles Aktions-Banner --- */
.home-promo {
    display: grid; grid-template-columns: 1.1fr 1fr; gap: 20px; align-items: center;
    background: #241f19; color: #fff; border-radius: 22px; overflow: hidden; box-shadow: var(--h-shadow);
}
.home-promo-text { padding: 38px 34px; }
.home-promo-text h2 { margin: 0 0 12px; font-size: 1.6rem; font-weight: 800; }
.home-promo-text p { margin: 0 0 22px; color: rgba(255,255,255,0.72); max-width: 420px; line-height: 1.6; }
.home-promo-visual { height: 100%; min-height: 210px; }
.home-promo-visual img { width: 100%; height: 100%; object-fit: cover; }

/* --- Abteilungen --- */
.home-abteilung-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.home-abteilung-card {
    background: var(--h-card); border: 1px solid var(--h-border); border-radius: var(--h-radius);
    padding: 20px 14px; text-align: center; font-weight: 700; font-size: 0.92rem;
    display: flex; flex-direction: column; align-items: center; gap: 10px; box-shadow: var(--h-shadow-sm);
    transition: 0.15s ease;
}
.home-abteilung-card:hover { border-color: var(--h-terracotta); transform: translateY(-2px); }
.home-abteilung-ico { width: 46px; height: 46px; border-radius: 50%; background: var(--h-cream-soft); display: flex; align-items: center; justify-content: center; }
.home-abteilung-ico .icon { width: 23px; height: 23px; color: var(--h-terracotta); }

/* ==========================================================================
   Mobil
   ========================================================================== */
@media (max-width: 900px) {
    .home-hero-inner { grid-template-columns: 1fr; gap: 26px; }
    .home-hero-visual { order: -1; aspect-ratio: 16/10; }
    .home-kat-row { grid-template-columns: repeat(2, 1fr); }
    .home-promo { grid-template-columns: 1fr; }
    .home-promo-visual { order: -1; min-height: 170px; }
}

/* ==========================================================================
   Client-Seiten im hellen Theme (Login, Registrieren, Kabinett, Profil,
   Reservierung) — Kasse/Küche/Bar/Admin bleiben unverändert dunkel.
   Setzt die globalen --djk-*-Variablen um, auf denen die meisten Komponenten
   (.field, .badge, .notes-card, .admin-tabs, .bottom-nav usw., siehe
   assets/css/style.css) bereits aufbauen — nur Komponenten mit fest
   verdrahteten Hex-Farben brauchen unten einen expliziten Override.
   ========================================================================== */
.home-landing {
    --djk-black: var(--h-cream);
    --djk-black-soft: var(--h-cream-soft);
    --djk-black-card: var(--h-card);
    --djk-white: var(--h-ink);
    --djk-gray: var(--h-gray);
    --djk-border: var(--h-border);
    --djk-yellow: var(--h-terracotta);
    --djk-yellow-dark: var(--h-terracotta-dark);
    --djk-blue: var(--h-aegean);
    --djk-blue-light: var(--h-aegean);
    --djk-danger: #d64545;
    --djk-success: #3f9142;
}

.home-landing .btn-primary { background: var(--h-terracotta); color: #fff; }
.home-landing .btn-primary:hover { background: var(--h-terracotta-dark); }
.home-landing .btn-outline { color: var(--h-ink); }
.home-landing .btn-outline:hover { background: rgba(221, 107, 58, 0.1); }
.home-landing .alert-error { color: #a83232; }
.home-landing .alert-success { color: #2f7d34; }
.home-landing .order-status-fertig,
.home-landing .order-status-unterwegs { color: #2f7d34; }
.home-landing .bottom-nav { background: rgba(250, 245, 236, 0.97); }
.home-landing .tag { background: rgba(221, 107, 58, 0.12); }

/* --- Login/Registrieren: Split-Screen im neuen Farbschema (Markup unverändert) --- */
.home-landing .auth-split-left {
    background: linear-gradient(135deg, var(--h-aegean), var(--h-terracotta) 130%);
    color: #fff;
}
.home-landing .auth-split-back,
.home-landing .auth-split-checklist li { color: rgba(255, 255, 255, 0.78); }
.home-landing .auth-split-back:hover { color: #fff; }
.home-landing .auth-split-checklist .icon { color: #fff; }
.home-landing .auth-split-right { background: var(--h-cream); }
.home-landing .auth-split-switch { color: var(--h-ink-soft); }
.home-landing .auth-split-switch a { color: var(--h-terracotta-dark); }
.home-landing .auth-hero-mobile { background: linear-gradient(160deg, var(--h-aegean), var(--h-terracotta) 130%); }
.home-landing .auth-hero-back { color: rgba(255, 255, 255, 0.78); }
.home-landing .auth-hero-back:hover { color: #fff; }
.home-landing .auth-hero-deco span { background: rgba(255, 255, 255, 0.14); }
.home-landing .auth-hero-deco span:nth-child(2),
.home-landing .auth-hero-deco span:nth-child(3) { background: rgba(255, 255, 255, 0.08); }
@media (max-width: 640px) {
    .home-wrap { padding: 0 14px; }
    .home-hero { padding-top: 26px; }
    .home-hero p { font-size: 0.95rem; margin-bottom: 22px; }
    .home-hero-actions { gap: 10px; }
    .home-hero-actions .home-btn { width: 100%; }
    .home-btn-ghost { justify-content: flex-start; }
    .home-kat-row { gap: 10px; margin-top: 24px; }
    .home-kat-card { height: 96px; }
    .home-kat-name { font-size: 0.84rem; top: 11px; left: 12px; right: 12px; }
    .home-kat-arrow { width: 29px; height: 29px; bottom: 9px; left: 12px; }
    .home-trust-row { grid-template-columns: 1fr; gap: 14px; padding-top: 20px; padding-bottom: 20px; }
    .home-section { padding: 32px 0; }
    .home-section-head h2 { font-size: 1.3rem; }
    .home-section-sub { display: none; }
    .home-produkt-row { gap: 12px; }
    .home-produkt-card { flex: 0 0 175px; }
    .home-promo-text { padding: 26px 20px; }
    .home-promo-text h2 { font-size: 1.3rem; }
    .home-abteilung-row { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}