/* ==========================================================
   Ausflugstipps – Zusatz-Styles (Farben und Schrift wie die Hauptseite)
   ========================================================== */

.tips {
  --tips-accent: var(--green-700);
  --tips-soft: var(--green-100);
  --tips-fish: #8a3b2c;
  --tips-sweet: var(--star);
  --tips-line: #cfdcc6;
  background: var(--green-50);
  padding-bottom: 3rem;
}

/* Einleitung */
.tips-hero { background: var(--green-700); color: var(--white); padding: clamp(2.5rem, 6vw, 4rem) 0 clamp(2rem, 5vw, 3rem); }
.tips-hero h1 { color: var(--white); font-size: clamp(2rem, 5vw, 3rem); max-width: 18ch; text-wrap: balance; }
.tips-hero p { max-width: 60ch; font-size: 1.1rem; margin: 1rem 0 0; }
.tips-hero .tips-meta { font-size: .95rem; color: var(--white); }

/* Kategorien-Leiste (bleibt unter der Kopfzeile sichtbar) */
nav.cats {
  position: sticky; top: var(--header-h); z-index: 40;
  background: var(--white); border-bottom: 1px solid var(--tips-line);
}
nav.cats ul {
  list-style: none; margin: 0 auto; padding: 10px 16px;
  display: flex; gap: 8px; overflow-x: auto; max-width: 1172px; scrollbar-width: thin;
}
nav.cats a {
  display: block; white-space: nowrap; padding: .45em 1em; border-radius: 999px;
  text-decoration: none; color: var(--text); font-weight: 600; font-size: .95rem;
  border: 2px solid var(--green-700); min-height: 44px; display: flex; align-items: center;
}
nav.cats a:hover { background: var(--green-700); color: var(--white); }
@media (min-width: 900px) { nav.cats ul { flex-wrap: wrap; overflow-x: visible; } }
.tips :target { scroll-margin-top: calc(var(--header-h) + 80px); }
html:has(.tips) { scroll-padding-top: calc(var(--header-h) + 80px); }

/* Abschnitte */
section.cat { padding: 3rem 0 .5rem; }
.cat-head { display: grid; gap: .5rem; margin-bottom: 1.5rem; max-width: 70ch; }
.cat-head h2 { font-size: clamp(1.7rem, 3.4vw, 2.2rem); color: var(--green-900); margin: 0; }
.cat-head p { margin: 0; color: var(--text-soft); }
.tips-sub { font-size: 1.3rem; font-weight: 700; margin: 2rem 0 .9rem; color: var(--text); }

.tips-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 1.1rem; }
.entry {
  background: var(--white); border: 1px solid var(--tips-line); border-left: 5px solid var(--tips-accent);
  border-radius: 8px; padding: 1.2rem 1.3rem; display: flex; flex-direction: column; gap: .6rem; min-width: 0;
}
.entry.fish { border-left-color: var(--tips-fish); }
.entry.sweet { border-left-color: var(--tips-sweet); }
.entry h3 { font-size: 1.25rem; margin: 0; }
.entry p { margin: 0; }
.where { font-size: .95rem; color: var(--text-soft); overflow-wrap: anywhere; }
.rating { display: flex; align-items: baseline; flex-wrap: wrap; gap: .3rem .6rem; font-size: .95rem; }
.rating strong { font-size: 1.15rem; color: var(--text); }
.rating .src { color: var(--text-soft); }

/* Sterne: Anteil über data-r (ohne style-Attribute, wegen Sicherheitsrichtlinie) */
.stars { position: relative; display: inline-block; font-size: 1.05rem; letter-spacing: 2px; line-height: 1; color: #c3cbbd; }
.stars::before { content: "★★★★★"; }
.stars::after { content: "★★★★★"; position: absolute; left: 0; top: 0; overflow: hidden; white-space: nowrap; color: var(--star); width: 90%; }
.stars[data-r="3.9"]::after { width: 78%; }
.stars[data-r="4.0"]::after { width: 80%; }
.stars[data-r="4.1"]::after { width: 82%; }
.stars[data-r="4.2"]::after { width: 84%; }
.stars[data-r="4.3"]::after { width: 86%; }
.stars[data-r="4.4"]::after { width: 88%; }
.stars[data-r="4.5"]::after { width: 90%; }
.stars[data-r="4.6"]::after { width: 92%; }
.stars[data-r="4.7"]::after { width: 94%; }
.stars[data-r="4.8"]::after { width: 96%; }
.stars[data-r="4.9"]::after { width: 98%; }
.stars[data-r="5.0"]::after { width: 100%; }

.voice { font-size: .97rem; background: var(--tips-soft); border-radius: 6px; padding: .6rem .8rem; }
.voice b { font-weight: 700; }
.tips-info { font-size: .93rem; color: var(--text-soft); }
.maplink { margin-top: auto; font-weight: 700; font-size: .95rem; }

/* Wanderwege */
.hikes { display: grid; gap: 1.1rem; }
.hike {
  background: var(--white); border: 1px solid var(--tips-line); border-radius: 8px; padding: 1.3rem 1.4rem;
  display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: .5rem 2rem;
}
.hike > div:first-child { display: flex; flex-direction: column; gap: .6rem; min-width: 0; }
.hike h3 { font-size: 1.35rem; margin: 0; }
.hike p { margin: 0; }
.hike-facts {
  margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .4rem .9rem; align-content: start;
  padding: .9rem 1rem; border-radius: 8px; background: var(--green-50); font-size: .95rem;
}
.hike-facts dt { color: var(--text-soft); }
.hike-facts dd { margin: 0; font-weight: 700; }
.level { display: inline-block; padding: 0 .6em; border-radius: 999px; font-size: .88rem; font-weight: 700; }
.level.easy { background: #dcebdd; color: #2f5b36; }
.level.mid { background: #f3e6c6; color: #6e5214; }
.route { font-size: .97rem; }
@media (max-width: 760px) { .hike { grid-template-columns: minmax(0, 1fr); padding: 1.1rem 1rem; } }
.hike-facts { min-width: 0; }
.hike-facts dd, .hike-facts dt { min-width: 0; overflow-wrap: anywhere; }

/* Regentage und Quellen */
.rain { background: var(--white); border: 2px dashed var(--green-700); border-radius: 8px; padding: 1.3rem 1.4rem; max-width: 780px; }
.rain ul { margin: .6rem 0 0; padding-left: 1.2em; }
.rain li { margin: .25rem 0; }
.tips-sources { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--tips-line); color: var(--text-soft); font-size: .92rem; }
.tips-sources p { max-width: 75ch; margin: 0 0 .6rem; }