/* Villa Schwalbe – Warnemünde entdecken */

.sprung { border-bottom: 1px solid var(--linie); background: var(--weiss); }
.sprung ul { list-style: none; padding: 1rem 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.sprung a {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .5rem 1rem;
  border-radius: 999px; text-decoration: none; font-weight: 600; font-size: .95rem; color: var(--tinte);
  box-shadow: inset 0 0 0 1px var(--linie); transition: box-shadow .3s var(--ease-out), background-color .3s var(--ease-out);
}
.sprung a:hover { box-shadow: inset 0 0 0 1.5px var(--tuerkis); background: var(--flach); color: var(--tinte); }
.sprung .icon { color: var(--petrol); }

.thema { scroll-margin-top: var(--kopf-hoehe); }
.thema--grau { background: var(--flaeche); }
.thema-raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2.5rem clamp(2.5rem, 5vw, 5rem); align-items: center; }
.thema-raster--rechts { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.thema-raster--rechts > .thema-bild { order: 2; }
.thema-bild { aspect-ratio: 4 / 3.4; box-shadow: var(--schatten); }
.thema-text .text-gross { margin-top: 1rem; }
.tipps { display: grid; gap: 0; margin-top: 1.8rem; }
.tipps div { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: .3rem 1.6rem; padding: 1.05rem 0; border-top: 1px solid var(--linie); }
.tipps dt { display: flex; align-items: flex-start; gap: .6rem; font-weight: 700; color: var(--text-kopf); }
.tipps dt .icon { color: var(--petrol); width: 1.3rem; height: 1.3rem; margin-top: .1rem; }
.tipps dd { margin: 0; font-size: .96rem; }

#hoehepunkte { scroll-margin-top: var(--kopf-hoehe); }
.jahreslauf { list-style: none; padding: 0; display: grid; gap: 1.1rem; margin-bottom: 1.2rem; }
.jahreslauf li { margin-left: calc(var(--von) / 12 * 100%); padding-top: 22px; position: relative; max-width: 30rem; }
.jahreslauf li::before {
  content: ""; position: absolute; left: 0; top: 0; height: 12px; border-radius: 999px; background: var(--tuerkis);
  width: calc((var(--bis) - var(--von)) / (12 - var(--von)) * 100%); min-width: 12px;
}
.jahreslauf .tag::before { width: 12px; background: var(--petrol); }
.jahreslauf li { max-width: none; }
.jahreslauf li b { display: block; color: var(--tinte); font-size: .95rem; }
.jahreslauf li span { display: block; font-size: .9rem; max-width: 30rem; }
.jahreslauf-legende { display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; margin-top: 1rem; font-size: .86rem; }
.jahreslauf-legende span { display: inline-flex; align-items: center; gap: .45rem; }
.jahreslauf-legende i { display: inline-block; height: 12px; border-radius: 999px; }
.jahreslauf-legende .l-tag { width: 12px; background: var(--petrol); }
.jahreslauf-legende .l-zeit { width: 28px; background: var(--tuerkis); }
.jahreslauf-monate { list-style: none; padding: .7rem 0 0; display: grid; grid-template-columns: repeat(12, 1fr); border-top: 1px solid var(--linie); font-size: .8rem; color: var(--text); }
.hoehe-bilder { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 14px; margin-top: 2.6rem; }
.hoehe-bilder .bild { aspect-ratio: auto; height: 340px; }

.ausflug-raster { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 2rem clamp(2rem, 4vw, 3.5rem); align-items: start; }
.tipps--ausflug { margin-top: 0; }
.tipps--ausflug div { grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); }
.tipps--ausflug div:first-child { border-top: 0; padding-top: .2rem; }
.ausflug { padding: 1.4rem; border-radius: var(--radius); background: var(--weiss); box-shadow: 0 0 0 1px var(--linie); }
.ausflug h3 { display: flex; gap: .6rem; align-items: flex-start; font-size: 1.3rem; margin-bottom: .6rem; }
.ausflug h3 .icon { color: var(--petrol); margin-top: .2rem; }
.ausflug p { font-size: .95rem; }
.ausflug--gross { padding: 0; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 0 0 1px var(--linie), var(--schatten-leicht); }
.ausflug--gross .bild { border-radius: 0; aspect-ratio: 16 / 9; }
.ausflug--gross h3 { padding: 1.4rem 1.6rem 0; font-size: 1.55rem; }
.ausflug--gross p { padding: 0 1.6rem; }
.ausflug-fakt { margin-top: .8rem; padding-bottom: 1.5rem !important; font-weight: 600; color: var(--tinte); }

.kinder { display: grid; grid-template-columns: minmax(0, 4.5fr) minmax(0, 7.5fr); gap: 2rem clamp(2.5rem, 5vw, 5rem); }
.kinder .text-gross { margin-top: 1rem; }
.kinder-liste { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.kinder-liste li { display: grid; gap: .2rem; padding: 1.1rem 1.2rem; border-radius: 12px; background: var(--flaeche); }
.kinder-liste b { color: var(--tinte); }
.kinder-liste span { font-size: .93rem; }
.ort-quelle { display: flex; gap: .6rem; align-items: flex-start; margin-top: 3rem; font-size: .88rem; }
.ort-quelle .icon { color: var(--petrol); margin-top: .2rem; }

@media (max-width: 1100px) {
  .ausflug-raster { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .thema-raster, .thema-raster--rechts, .kinder { grid-template-columns: 1fr; }
  .thema-raster--rechts > .thema-bild { order: 0; }
  .tipps div { grid-template-columns: 1fr; }
  .jahreslauf li { margin-left: 0; }
  .jahreslauf li::before { width: 36px; }
  .jahreslauf .tag::before { width: 12px; }
  .jahreslauf-monate { display: none; }
}
@media (max-width: 760px) {
  .ausflug-raster { grid-template-columns: 1fr; }
  .ausflug--gross { grid-column: auto; grid-row: auto; }
  .kinder-liste { grid-template-columns: 1fr; }
  .hoehe-bilder { grid-template-columns: 1fr 1.6fr; }
  .hoehe-bilder .bild { height: 220px; }
  .sprung ul { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--rand)); padding-inline: var(--rand); }
  .sprung a { white-space: nowrap; }
}