/* Hover-Stile Startseite, aus dem Claude-Design-Projekt */
.hv-startseite-1:hover{background:#F6F6FA !important;color:#070B4A !important;text-decoration:none !important}
.hv-startseite-2:hover{color:#070B4A !important;opacity:.75 !important}
.hv-startseite-3:hover{color:#070B4A !important;opacity:.75 !important}
.hv-startseite-4:hover{color:#070B4A !important;opacity:.75 !important}
.hv-startseite-5:hover{color:#070B4A !important;opacity:.75 !important}
.hv-startseite-6:hover{background:#F6F6FA !important;color:#070B4A !important;text-decoration:none !important}
.hv-startseite-7:hover{background:#1C2170 !important;color:#fff !important;text-decoration:none !important}
.hv-startseite-8:hover{color:#070B4A !important;opacity:.75 !important}
.hv-startseite-9:hover{color:#070B4A !important;text-decoration:none !important}
.hv-startseite-10:hover{color:#070B4A !important;text-decoration:none !important}
.hv-startseite-11:hover{color:#070B4A !important;text-decoration:none !important}
.hv-startseite-12:hover{background:#070B4A !important;color:#fff !important;text-decoration:none !important}

/* Einstieg und „Vielleicht kennst du das“: im Entwurf per JavaScript nach Breite umgeschaltet, hier per CSS */
.v2-hero { position: relative; overflow: hidden; background: #070B4A; border-radius: 28px; margin: clamp(16px,2vw,28px) clamp(16px,3.5vw,56px) 0; color: #fff; min-height: min(86vh,820px); display: flex; align-items: flex-end; }
.v2-hero-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 80% 12%; display: block; }
.v2-hero-schatten { position: absolute; inset: 0; background: linear-gradient(90deg,rgba(7,11,74,.9) 0%,rgba(7,11,74,.75) 45%,rgba(7,11,74,0) 78%),linear-gradient(0deg,rgba(7,11,74,.85) 0%,rgba(7,11,74,.5) 40%,rgba(7,11,74,0) 60%); }
.v2-hero-text { position: relative; width: 100%; max-width: 1200px; margin: 0 auto; padding: clamp(120px,16vw,200px) clamp(20px,4vw,40px) clamp(48px,7vw,96px); }
@media (max-width: 699px) {
  .v2-hero { border-radius: 24px; margin: 12px 12px 0; min-height: 0; display: flex; flex-direction: column; align-items: stretch; }
  .v2-hero-bild { position: relative; inset: auto; width: 100%; height: auto; aspect-ratio: 4 / 3; object-position: 82% 12%; }
  .v2-hero-schatten { position: absolute; inset: auto; left: 0; right: 0; top: 0; aspect-ratio: 4 / 3; background: linear-gradient(0deg,#070B4A 0%,rgba(7,11,74,0) 28%); pointer-events: none; }
  .v2-hero-text { margin: -24px 0 0; padding: 0 20px 40px; max-width: none; }
}
.v2-anliegen { display: grid; grid-template-columns: minmax(0,1fr); gap: clamp(16px,2vw,24px); }
@media (min-width: 560px) { .v2-anliegen { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (min-width: 560px) and (max-width: 999px) { .v2-anliegen > :last-child:nth-child(odd) { grid-column: span 2; } }
@media (min-width: 1000px) {
  .v2-anliegen { grid-template-columns: repeat(6,minmax(0,1fr)); }
  .v2-anliegen > :nth-child(-n+3) { grid-column: span 2; }
  .v2-anliegen > :nth-child(n+4) { grid-column: span 3; }
}