/* Startseite, Erweiterung 10.10.2026 (Marcellus: alles Neue auf die Startseite, endlos scrollen; große Monitore passend).
   Kacheln mit den Icons der Library, gleiche Farben wie home.css. Keine Großbuchstaben, keine Pfeile. */

/* Große Monitore: Inhalt höchstens ca. 1240 px breit, Hintergründe bleiben randlos */
@media (min-width: 1500px) {
  :root { --gutter: max(80px, calc(50vw - 620px)); }
}

.vnp .intro { max-width: 60ch; }
.vnp-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 28px; }
.vnp-grid.vnp-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vnp-tile { display: flex; flex-direction: column; gap: 6px; padding: 20px 20px 22px; border: 1px solid var(--line); border-radius: 18px; background: #fff; color: var(--ink); text-decoration: none; transition: border-color .2s, box-shadow .2s, transform .2s; }
.vnp-tile:hover, .vnp-tile:focus-visible { border-color: var(--blue); box-shadow: 0 10px 28px rgba(6, 12, 84, .08); transform: translateY(-1px); }
.vnp-tile > div { display: flex; flex-direction: column; gap: 6px; }
.vnp-tile img { width: 64px; height: 64px; margin: 0 0 6px -4px; }
.vnp-tile b { font-size: clamp(17px, 1.25vw, 21px); line-height: 1.25; letter-spacing: -.01em; }
.vnp-tile span { font-size: clamp(14px, .95vw, 16px); line-height: 1.5; color: var(--muted); }
.vnp-alt { background: linear-gradient(110deg, #f6fbff, #eef8ff); }
.vnp .text-link { margin-top: 22px; }
.vnp-row { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 22px; }

/* Jobs: ruhiges Band mit zwei Wegen */
.vnp-jobs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; margin-top: 28px; }
.vnp-jobs .vnp-tile { flex-direction: row; align-items: center; gap: 18px; }
.vnp-jobs .vnp-tile img { margin: 0; flex: none; }

@media (max-width: 1199px) { .vnp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .vnp-grid, .vnp-grid.vnp-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vnp-jobs { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .vnp-grid, .vnp-grid.vnp-3 { grid-template-columns: 1fr; gap: 12px; margin-top: 20px; }
  .vnp-tile { flex-direction: row; align-items: flex-start; gap: 14px; padding: 16px; }
  .vnp-tile img { width: 48px; height: 48px; margin: 2px 0 0; flex: none; }
  .vnp .text-link { text-align: left; }
}

/* Handy: Wolken-Hintergrund über den ganzen oberen Bereich wie auf der Original-Startseite (Marcellus, 10.10.2026: „der Hintergrund größer, so wie beim Original“) */
@media (max-width:650px){
  html body #hero .hero-background{inset:0;top:0;bottom:0;left:0;width:100%;height:100%;overflow:hidden}
  html body #hero .hero-background img{position:absolute;inset:0;left:0;top:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:38% center;transform:none;opacity:1;-webkit-mask-image:none;mask-image:none}
  html body #hero .hero-background::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(255,255,255,.55) 0%,rgba(255,255,255,.3) 36%,rgba(255,255,255,0) 56%)}
}

/* Stellen: drei Kacheln (unsere Stellen, offene Stellen anderer Organisationen, Stelle einstellen), 11.10.2026 */
@media (min-width:901px){ .vnp-jobs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Kopfzeile sagt jetzt, was wir tun (11.10.2026) und ist länger: kleinere Schrift, zwei Zeilen am Computer */
html body #hero .hero h1{font-size:clamp(44px,min(5.2vw,10svh),96px);line-height:1.04}
@media (max-width:650px){html body #hero .hero h1{font-size:clamp(34px,9.4vw,46px)}}

/* 21.10.2026: sachliche H1 („J-1 Visa für Praktikum, Traineeship und Forschung.“) kleiner, Handy höchstens drei Zeilen */
html body #hero .hero h1{font-size:clamp(40px,min(3.7vw,8svh),80px);line-height:1.04;letter-spacing:-.05em}
@media(min-width:651px) and (max-width:900px){html body #hero .hero h1{font-size:clamp(40px,5.6vw,52px)}}
@media(max-width:650px){html body #hero .hero h1{font-size:clamp(26px,7vw,34px);line-height:1.1;letter-spacing:-.04em}
html body #hero .hero h1 br{display:none}}

/* 21.10.2026: keine Ligaturen, sonst fehlt bei „fi“ der i-Punkt (Marcellus) */
html{font-variant-ligatures:none}