/* DeutschlandGourmet v2 - Startseite (Magazin-Layout). Ergaenzt Tailwind-Utilities.
   Designsprache wie die uebrige Site: eckig (keine grossen Rundungen), Bricolage Grotesque,
   Akzentgruen #5a6a2c. */

.hb { display:block; }
.hb-wrap { max-width:80rem; margin:0 auto; padding:0 1.25rem; }

/* ---- Kicker / Ueberschriften ---- */
.hb-kick { font-size:.78rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#5a6a2c; }
.hb-kick-light { color:#e9d9a7; }
.hb-h1 { font-family:'Bricolage Grotesque',system-ui,sans-serif; font-weight:800; color:#fff;
         font-size:clamp(2.3rem,5.4vw,4rem); line-height:1.02; letter-spacing:-.02em; margin:.5rem 0 0; }
.hb-h2 { font-family:'Bricolage Grotesque',system-ui,sans-serif; font-weight:800; color:#1f1e18;
         font-size:clamp(1.5rem,2.6vw,2.15rem); line-height:1.08; letter-spacing:-.015em; margin:.35rem 0 0; }
.hb-lead { color:#efeae0; font-size:clamp(1rem,1.4vw,1.15rem); line-height:1.55; margin:1rem 0 0; max-width:38rem; }
.hb-lead-dark { color:#5f584c; max-width:34rem; }

/* ---- HERO ---- */
.hb-hero { position:relative; background-size:cover; background-position:center; }
/* Foto-Slider: nur der Hintergrund schiebt horizontal (echtes Sliden, kein Fade).
   Text + Suchfeld bleiben statisch darueber. Slide-Transition bewusst auch bei reduced-motion
   (vom Nutzer ausdruecklich als Slider gewuenscht); der Rest der Seite respektiert reduced-motion. */
.hb-hero-slider { overflow:hidden; background-color:#14130f; }
.hb-hero-bg { position:absolute; inset:0; z-index:0; overflow:hidden; }
/* !important schlaegt die globale base.css-Regel *{transition:none!important} bei reduced-motion
   (Slider ist ausdruecklich gewuenscht; hoehere Spezifitaet .hb-track > * gewinnt bei gleichem !important) */
.hb-track { display:flex; width:100%; height:100%; transition:transform .6s cubic-bezier(.4,0,.2,1)!important; will-change:transform; }
.hb-slide { flex:0 0 100%; height:100%; background-size:cover; background-position:center; }
.hb-hero-shade { position:absolute; inset:0; z-index:1; pointer-events:none;
                 background:linear-gradient(180deg,rgba(18,16,12,.28),rgba(18,16,12,.46)); }
.hb-hero-slider .hb-hero-inner { position:relative; z-index:2; }
.hb-glass { display:block; }   /* neutraler Wrapper, kein Panel/Blur */
/* Textschatten: haelt weissen Text auch auf hellen Bildstellen lesbar */
.hb-hero-slider .hb-h1,
.hb-hero-slider .hb-lead,
.hb-hero-slider .hb-kick-light { text-shadow:0 1px 16px rgba(0,0,0,.5); }
/* Runde Pfeile links/rechts */
.hb-arrow { position:absolute; top:50%; transform:translateY(-50%); z-index:3;
            width:48px; height:48px; border-radius:50%; border:0; cursor:pointer;
            background:rgba(255,255,255,.85); color:#1f1e18;
            display:flex; align-items:center; justify-content:center;
            box-shadow:0 4px 16px rgba(0,0,0,.28); transition:background .2s, transform .2s; }
.hb-arrow svg { width:24px; height:24px; }
.hb-arrow:hover { background:#fff; transform:translateY(-50%) scale(1.08); }
.hb-arrow:focus-visible { outline:2px solid #5a6a2c; outline-offset:2px; }
.hb-prev { left:18px; } .hb-next { right:18px; }
@media (max-width:600px) { .hb-arrow { width:40px; height:40px; } .hb-prev { left:10px; } .hb-next { right:10px; } }
.hb-hero-inner { max-width:80rem; margin:0 auto; padding:clamp(3.5rem,9vw,7rem) 1.25rem clamp(3rem,7vw,5.5rem); }
.hb-search { position:relative; max-width:42rem; margin:1.75rem 0 0; }
.hb-search .box { display:flex; align-items:center; gap:.75rem; background:#fff; border:0;
                  padding:.9rem 1.1rem; box-shadow:0 18px 40px -22px rgba(0,0,0,.55); }
.hb-search .box svg { width:1.35rem; height:1.35rem; color:#8a8474; flex:none; }
.hb-search input { flex:1; border:0; outline:0; background:transparent; font-size:1.05rem; color:#1f1e18; min-width:0; }
.hb-search input::placeholder { color:#9a9280; }
.hb-search #status { position:absolute; left:0; }
/* Suchergebnisse als Dropdown ueber den Sektionen */
.hb-search #results { position:absolute; top:calc(100% + .5rem); left:0; right:0; z-index:50;
                      background:#fff; border:1px solid #d9d3c6; max-height:60vh; overflow:auto;
                      box-shadow:0 24px 60px -24px rgba(0,0,0,.5); }
.hb-search #results:empty { display:none; }
/* Ergebnis-Items (index.css scopet identische Regeln unter .dg-search, hier fuer .hb-search) */
.hb-search a.res { display:flex; align-items:center; gap:16px; padding:14px 16px; text-decoration:none;
                   color:#1f1e18; border-bottom:1px solid #efece4; transition:background .12s; }
.hb-search a.res:last-child { border-bottom:0; }
.hb-search a.res:hover { background:#faf9f5; }
.hb-search .res > span:first-child { min-width:0; }
.hb-search .res .name { display:block; font-weight:700; font-size:1.02rem; letter-spacing:-.01em; }
.hb-search .res .meta { display:block; font-size:.88rem; color:#8a8474; margin-top:2px; }
.hb-search .res .note { margin-left:auto; display:flex; align-items:center; gap:6px; white-space:nowrap; color:#c0862b; font-weight:700; }
.hb-search .res .note small { color:#8a8474; font-weight:500; }
.hb-search .res .go { width:20px; height:20px; color:#5a6a2c; flex:none; }
.hb-search mark { background:#eef0e3; color:inherit; padding:0 1px; }
/* Ort-Vorschlag (ganzen Ort durchstoebern) - gruenlich abgesetzt, mit Standort-Pin */
.hb-search .res-ort { background:#f4f7ec; border-bottom:1px solid #e2e8d2; }
.hb-search .res-ort:hover { background:#eef3e0; }
.hb-search .res-ort .ort-ic { flex:none; display:flex; align-items:center; }
.hb-search .res-ort .ort-pin { width:22px; height:22px; color:#5a6a2c; }
.hb-search .res-ort > span:nth-child(2) { min-width:0; }
.hb-search .res-ort .name { color:#3f4a1e; }
.hb-search .res-ort .meta { color:#6b7550; }

/* ---- Sektionen ---- */
.hb-sec { padding:clamp(2.75rem,5vw,4.25rem) 0; }
.hb-sec-alt { background:#f6f4ec; border-top:1px solid #ece7db; border-bottom:1px solid #ece7db; }
.hb-sechead { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1.6rem; }
.hb-more { flex:none; font-size:.92rem; font-weight:600; color:#5a6a2c; white-space:nowrap; }
.hb-more:hover { text-decoration:underline; text-underline-offset:3px; }

/* ---- Karten-Grid ---- */
.hb-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem; }
.hb-grid-3 { grid-template-columns:repeat(3,1fr); }
@media (max-width:1024px){ .hb-grid{ grid-template-columns:repeat(3,1fr);} .hb-grid-3{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:720px){ .hb-grid,.hb-grid-3{ grid-template-columns:repeat(2,1fr); gap:.85rem;} }
@media (max-width:460px){ .hb-grid,.hb-grid-3{ grid-template-columns:1fr;} }

/* Badges auf dem Foto (klein = Pill erlaubt, wie in der Restaurantliste) */
.hb-kueche { position:absolute; top:.6rem; left:.6rem; z-index:2; font-size:12px; font-weight:600; line-height:1;
             color:#fff; background:rgba(90,106,44,.92); padding:.34rem .62rem; border-radius:999px;
             box-shadow:0 2px 8px rgba(0,0,0,.18); }
.hb-datum { position:absolute; top:.6rem; left:.6rem; z-index:2; font-size:12px; font-weight:600; line-height:1;
            color:#1f1e18; background:rgba(255,255,255,.94); padding:.34rem .62rem; box-shadow:0 2px 8px rgba(0,0,0,.14); }
.hb-neu { font-size:11px; font-weight:600; color:#5a6a2c; background:#f2f5ea; border:1px solid #dde5cc;
          padding:.14rem .5rem; border-radius:999px; }

/* ---- Staedte ---- */
.hb-cities { display:flex; flex-wrap:wrap; gap:.6rem; }
.hb-city { display:inline-flex; align-items:center; padding:.55rem .95rem; border:1px solid #d9d3c6; background:#fff;
           font-weight:600; color:#1f1e18; font-size:.95rem; transition:.15s; }
.hb-city:hover { border-color:#5a6a2c; color:#5a6a2c; }

/* ---- CTA Gastronomen ---- */
.hb-cta { padding:clamp(3rem,6vw,5rem) 0; background:#1f1e18; }
.hb-cta .hb-kick { color:#e9d9a7; }
.hb-cta .hb-h2 { color:#fff; }
.hb-cta-box { display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap; }
.hb-cta-btns { display:flex; gap:.75rem; flex-wrap:wrap; }
.hb-btn { display:inline-flex; align-items:center; padding:.85rem 1.5rem; font-weight:700; white-space:nowrap; transition:.15s; }
.hb-btn-primary { background:#e9d9a7; color:#1f1e18; }
.hb-btn-primary:hover { background:#f2e6bf; }
.hb-btn-ghost { border:1px solid #6a6558; color:#f3efe6; }
.hb-btn-ghost:hover { border-color:#e9d9a7; color:#fff; }
.hb-cta .hb-lead { color:#c9c3b4; }

/* ---- Hero-Slider: klickbarer Restaurant-Credit (Name / Land·Kreis·PLZ Ort / Sterne) ----
   Eckig, unten rechts buendig (dunkler Bereich laeuft bis zur Bildunterkante durch).
   Kein Hover-Transform (Flacker-frei); Hover unterstreicht nur den Namen. */
.hb-credit{position:absolute;right:0;bottom:0;z-index:3;display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  padding:12px 18px 14px;background:rgba(18,16,12,.55);color:#fff;text-decoration:none;
  line-height:1.3;max-width:min(80%,470px)}
.hb-credit,.hb-credit:hover,.hb-credit:focus{text-decoration:none}
.hb-credit:hover .hb-credit-name{text-decoration:underline}
.hb-credit-top{display:flex;align-items:center;gap:6px;max-width:100%}
.hb-credit-name{font-weight:700;font-size:1.05rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hb-credit-arr{width:13px;height:13px;flex:0 0 auto;opacity:.8}
.hb-credit-loc{font-size:.82rem;opacity:.88;max-width:100%}
.hb-credit-stars{font-size:.9rem;color:#f7b500;letter-spacing:1px;margin-top:2px}
@media(max-width:640px){.hb-credit{padding:10px 14px 12px;max-width:88%}.hb-credit-name{font-size:.92rem}.hb-credit-loc{font-size:.76rem}}