/* DeutschlandGourmet v2 — Editor's Picks je Bundesland.
   Kachel-Aufmacher ganz oben, ueber die ganze Fensterbreite bis an die Raender (kein Seitenabstand).
   Header im VOLLEN nativen Schnitt (height:auto, kein 16:10-Crop) — Format wie brandenburg-/hessen-header.html.
   auto-fill minmax(440px) => automatisch mehrere grosse Kacheln pro Reihe, je nach Breite.
   Bild pur; Name/Ort/Sterne blenden erst bei Hover ueber einem dezenten dunklen Verlauf ein.
   Die Ueberschrift ".dgpicks-head" steht getrennt darunter im Textkopf (normal eingerueckt). */

/* Bildband: volle Fensterbreite, randlos. Bricht aus dem zentrierten Content aus - direkt unter dem
   Textkopf (rl-hero), an den es ENG gekoppelt ist (kleiner margin-top), damit Kopf + Band als Einheit lesen. */
.dgpicks-cover {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: .55rem;       /* eng an den Textkopf - der Titel ankert das Band */
  margin-bottom: 1.4rem;    /* darunter folgt die Listen-H2 als Zaesur zur Ergebnisliste */
}

/* Listen-Kopf zwischen Band und Ergebnisliste: schliesst das randlose Band ab und leitet die
   vollstaendige, filterbare Liste ein (Ebenen-Trennung H1 -> Band -> H2 -> Liste). Optik = .nk-seo h2. */
.rl-listhead { font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-weight: 800;
  font-size: 1.5rem; line-height: 1.1; letter-spacing: -.015em; color: #1f1e18; margin: 0 0 1rem; }

/* auto-fill: so viele grosse Spalten wie passen (jede >= 440px). min(100%,440px) verhindert Overflow auf schmalen Screens.
   align-items:start => kein Leerraum unter niedrigeren Kacheln bei gemischten Header-Ratios. Kein Aussenrand. */
.dgpicks-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr));
  gap: 1.4rem; align-items: start; }

.dgpick { position: relative; display: block; overflow: hidden; text-decoration: none; color: #fff;
  background: #e9e5da; box-shadow: 0 6px 20px -12px rgba(31,30,24,.35); transition: box-shadow .2s; }
.dgpick:hover { box-shadow: 0 14px 34px -14px rgba(31,30,24,.5); }
/* height:auto = voller nativer Header-Schnitt, nicht angeschnitten. Zoom-Hover kappt overflow:hidden. */
.dgpick-img { display: block; width: 100%; height: auto;
  transform: translateZ(0); backface-visibility: hidden; transition: transform .45s ease; }  /* scharf + sanfter Zoom */
.dgpick:hover .dgpick-img { transform: scale(1.05); }

/* Eckdaten-Overlay: standardmaessig unsichtbar, erst bei Hover/Focus */
.dgpick-cap { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 1.1rem 1.25rem; opacity: 0; transition: opacity .25s ease;
  background: linear-gradient(180deg, rgba(18,16,12,0) 30%, rgba(18,16,12,.55) 66%, rgba(18,16,12,.88)); }
.dgpick:hover .dgpick-cap, .dgpick:focus-visible .dgpick-cap { opacity: 1; }
/* Touch-Geraete kennen kein Hover -> Overlay dauerhaft zeigen, sonst bliebe die Einordnung dort unsichtbar */
@media (hover: none) { .dgpick-cap { opacity: 1; } }

/* "Editor's Pick"-Badge ueber dem Namen: klaert beim Hover, dass jede Kachel eine Redaktions-Empfehlung ist */
.dgpick-badge { align-self: flex-start; margin-bottom: .3rem; font-family: system-ui, sans-serif;
  font-size: .6rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; line-height: 1;
  color: #1f1e18; background: #f7b500; padding: .28rem .52rem; border-radius: 0; text-shadow: none; }
.dgpicks .dgpick-name, .dgpick-name { display: block; color: #fff; font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-weight: 800; font-size: 1.18rem; line-height: 1.08; letter-spacing: -.01em; text-shadow: 0 1px 12px rgba(0,0,0,.55);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dgpick-meta { display: flex; align-items: center; gap: .45rem; margin-top: .14rem; color: #fff;
  font-size: .86rem; opacity: .95; text-shadow: 0 1px 8px rgba(0,0,0,.55); }
.dgpick-stars { color: #f7b500; letter-spacing: .5px; }

/* Ueberschrift, jetzt getrennt unter dem Textkopf (im zentrierten Content) */
.dgpicks-head { display: flex; align-items: baseline; gap: .75rem; margin: .4rem 0 1.4rem; }
.dgpicks-h2 { margin: 0; font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-weight: 800;
  font-size: clamp(1.4rem, 2.4vw, 2.05rem); line-height: 1; letter-spacing: -.02em; color: #1f1e18; }
.dgpicks-land { font-size: .95rem; font-weight: 600; color: #8a8474; }