/* ====== CSS (Fabontec, bereinigt) ====== */
:root{
  --bg:#071631; --card:#0d2140; --text:#f2f5fa; --muted:#b7c3d8;
  --accent:#5aa0ff; --disabled:#6b7c99; --shadow:0 20px 40px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{height:100%}

/* EIN gemeinsamer body-Block mit skalierendem Hintergrundbild */
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:
    linear-gradient(rgba(7,22,49,.94), rgba(7,22,49,.94)),
    url("hintergrundbild.jpg") center center / cover fixed no-repeat,
    var(--bg);
  line-height:1.4;
}

#bg-video{ position:fixed; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; filter:brightness(.45) saturate(1.1) }
.bg-overlay{ position:fixed; inset:0; background:var(--bg); opacity:.95; z-index:-1 }

.container{ width:min(1200px,92vw); margin-inline:auto; display:flex; align-items:center; justify-content:space-between; gap:1rem }

.topbar,.bottombar{
  position:fixed; left:0; right:0; padding:.75rem 0;
  background:rgba(10,30,58,.85); backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(255,255,255,.08)
}
.topbar{ top:0 }
.bottombar{ bottom:0; border-top:1px solid rgba(255,255,255,.08); border-bottom:none }
.topbar .email,.topbar .login,.bottombar a{ color:var(--text); text-decoration:none; font-weight:600 }
.topbar .email{ opacity:.9 }
.topbar .login{ padding:.4rem .9rem; border:1px solid rgba(255,255,255,.25); border-radius:999px; transition:transform .15s ease, background .2s ease }
.topbar .login:hover{ transform:translateY(-1px); background:rgba(255,255,255,.06) }
.bottombar .small{ font-size:.9rem; color:var(--muted) }
.bottombar nav a{ opacity:.9 }
.bottombar .sep{ margin:0 .5rem; opacity:.35 }

.main{ min-height:100dvh; display:grid; place-items:center; padding:5rem 0 }

/* ===== Kacheln: Bild oben, Text unten ===== */
.tiles{
  margin-top:3.5rem; margin-bottom:3.5rem;
  display:grid; grid-template-columns:repeat(3, minmax(220px,1fr));
  gap:1.25rem; width:min(1100px,94vw);
}

/* Link als Karte */
.tile{
  position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  border-radius:1.25rem; text-decoration:none; color:var(--text);
  background:var(--card); box-shadow:var(--shadow); overflow:hidden; isolation:isolate;
  transform:translateY(-40px); opacity:0;
}
.tile:hover{ outline:1px solid rgba(255,255,255,.12) }

/* Kachelbild */
.tile>img{
  width:100%; aspect-ratio:4/3; object-fit:cover; display:block;
}

/* Textbereich */
.tile .caption{
  width:100%; text-align:center; padding:.9rem 1rem 1.1rem;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
}
.tile .caption h2{
  margin:.1rem 0 .2rem; font-size:clamp(1.2rem,2.1vw,1.6rem); letter-spacing:.3px; color:var(--text);
}
.tile .caption p{ margin:0; color:var(--muted) }

/* Disabled */
.tile.disabled{ cursor:not-allowed; filter:grayscale(.2); color:var(--disabled) }
.tile.disabled .caption p{ color:var(--disabled) }

/* Animation */
@keyframes slideInDown{ from{transform:translateY(-42px);opacity:0} to{transform:translateY(0);opacity:1} }
.animate{ animation:slideInDown 1.2s cubic-bezier(.22,.9,.22,1) forwards }
.delay-1{ animation-delay:.225s } .delay-2{ animation-delay:.525s } .delay-3{ animation-delay:.825s }

/* Responsive */
@media (max-width:900px){
  .tiles{ grid-template-columns:1fr }
}

/* Alte Hintergrundbild-Zuweisungen entfernen/überschreiben */
.tiles .tile:nth-child(1),
.tiles .tile:nth-child(2),
.tiles .tile:nth-child(3){ background-image:none }

/* Alte Abdunklung deaktivieren */
.tile::after{ content:none }
/* ========== GRID: flexible Spalten + zentriert ========== */
.tiles{
  margin-top:3.5rem; margin-bottom:3.5rem;
  display:grid;
  /* passt von 1–3 Spalten je nach Breite */
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap:1.25rem;
  width:min(1100px,94vw);
}

/* ========== KACHEL steuert Größe, nicht das IMG ========== */
.tile{
  position:relative;
  display:flex; flex-direction:column; justify-content:flex-end;
  border-radius:1.25rem; text-decoration:none; color:var(--text);
  background:var(--card); box-shadow:var(--shadow); overflow:hidden;
  isolation:isolate; transform:translateY(-40px); opacity:0;

  /* Hier wird’s ruhig: feste, aber responsive Kachelgröße */
  width:clamp(240px, 28vw, 340px);
  aspect-ratio: 4 / 3;           /* Höhe folgt Breite */
  margin-inline:auto;            /* schön zentriert in der Spalte */
}

/* Hover bleibt */
.tile:hover{ outline:1px solid rgba(255,255,255,.12) }

/* ========== Bild füllt die Kachel ========== */
.tile>img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;              /* kein Verzerren, sauberer Crop */
  object-position:center;        /* Mittelpunkt – ggf. je Kachel anpassen */
  display:block;
}

/* ========== Caption liegt unten drüber ========== */
.tile .caption{
  position:relative; z-index:1;
  width:100%; text-align:center;
  padding:.9rem 1rem 1.1rem;
  background:linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.25));
  backdrop-filter:saturate(120%) blur(0.5px);
}

/* Typo & Kleinkram bleibt wie gehabt ... */

/* Responsive: auf schmalen Screens 1 Spalte */
@media (max-width:900px){
  .tiles{ grid-template-columns:1fr }
}