/* Eisrose und Landschaft sind zwei unabhängig austauschbare Bilder. */
.home { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; align-items: center; padding: clamp(70px, 14vh, 180px) 24px 20px; }
.home .hero {
  width: min(600px, 100%);
  text-align: center;
  margin: 0 auto 300px;
  padding: 22px 24px 26px;
  background: linear-gradient(135deg, rgba(170, 204, 230, .18), rgb(14 34 55 / 0%));
  border: 1px solid rgba(218, 242, 255, .32);
  border-radius: 22px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 12px 32px rgba(4, 15, 30, .2);
}
.hero img { display: block; width: clamp(220px, 31vw, 450px); height: auto; margin: 0 auto -10px; opacity: .84; filter: saturate(.72) contrast(.88) brightness(.94) blur(.65px) drop-shadow(0 8px 18px rgba(15, 34, 53, .18)); }
.home h1 { font-size: clamp(27px, 3vw, 46px); font-weight: 300; line-height: 1.2; letter-spacing: .24em; text-transform: uppercase; margin: 0 0 10px; padding-left: .24em; color: #d9f1ff; text-shadow: 0 2px 16px #081a2e; }
.sub { margin: 0; font-size: clamp(11px, 1vw, 14px); letter-spacing: .3em; text-transform: uppercase; color: #c7dce9; text-shadow: 0 2px 8px #081a2e; }
.home > .grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; width: min(1200px, 100%); margin: 0 auto; }
.tile { display: flex; flex-direction: column; align-items: center; text-align: center; min-height: 174px; padding: 22px 12px 16px; color: #eff9ff; text-decoration: none; border: 1px solid rgba(218, 242, 255, .4); border-radius: 16px; background: linear-gradient(
  135deg,
  rgba(170, 204, 230, .18),
  rgb(14 34 55 / 0%)
);; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 10px 26px rgba(4,15,30,.2); transition: transform .2s, background .2s; }
.tile:hover { transform: translateY(-5px); background-color: rgba(151, 202, 235, .2); color: white; }
.tile svg { width: 36px; height: 36px; flex-shrink: 0; stroke: #cbecff; margin-bottom: 14px; }
.tile div { display: flex; flex-direction: column; flex: 1; }
.tile div::after { content: '\2192'; font-size: 23px; line-height: 1; padding-top: 10px; margin-top: auto; }
.tile h3 { margin: 0 0 7px; font-size: 13px; font-weight: 550; letter-spacing: .07em; text-transform: uppercase; }
.tile p { margin: 0; color: #d0dfec; font-size: 11px; line-height: 1.5; letter-spacing: .05em; text-transform: uppercase; }
.home footer { margin-top: auto; padding-top: 55px; text-align: center; color: #c5dbea; font-size: 12px; text-shadow: 0 1px 6px #081a2e; }
.home footer a { color: #d6eafa; letter-spacing: .12em; text-transform: uppercase; }
@media (max-width: 1000px) { .home > .grid { grid-template-columns: repeat(3,minmax(0,1fr)); max-width: 760px; } }
@media (max-width: 600px) { .home { padding: 48px 16px 20px; } .home > .grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; } .tile { min-height: 164px; } .sub { letter-spacing: .16em; } .home footer { padding-top: 30px; } }
@media (max-width: 340px) { .home > .grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .tile { transition: none; } .tile:hover { transform: none; } }
@media (max-width: 600px) {
  .home .hero {
    margin-bottom: 60px;
    padding: 16px 12px 22px;
    border-radius: 18px;
  }
}