/*******************************************************
 RESET / BASIS
*******************************************************/
*,*::before,*::after{box-sizing:border-box}
img{display:block;max-width:100%;height:auto}
html,body{height:100%}
main.page{flex:1 1 auto;min-height:0;overflow:auto;-ms-overflow-style:none;scrollbar-width:none}
main.page::-webkit-scrollbar{display:none}
.page .wrap{max-width:none;margin:0 auto;padding:14px 16px;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,sans-serif;color:#0b1220}

/*******************************************************
 ROWS / COLUMNS
*******************************************************/
.row{display:grid;gap:14px;align-items:stretch;min-height:0}
.row + .row{margin-top:10px}
.row > *{min-width:0}

.r1{grid-template-columns:1fr}
.r2{grid-template-columns:1fr}
.r3{grid-template-columns:1fr 1fr}
.r4{grid-template-columns:1fr 1fr 1fr}

/*******************************************************
 KACHEL-BASIS
*******************************************************/
.cell{
  display:flex;flex-direction:column;min-height:0;height:100%;
  background:#fff;border:2px solid #0b0f14;border-radius:12px;padding:14px;color:#0b1220
}
.cell>.content{flex:1 1 auto;min-height:0}
.cell .h{margin:0 0 .25em;font-weight:800;font-size:clamp(22px,3.2vmin,34px);line-height:1.15;text-align:left}
.cell .content p{margin:.30em 0;font:400 clamp(14px,1.8vmin,18px)/1.6 system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,sans-serif}

/* Utilities */
.gap-1{margin-top:1em!important}
.gap-2{margin-top:2em!important}

/*******************************************************
 Grid A – ausgeblendet
*******************************************************/
.cell.a{display:none;padding:0;overflow:hidden}
.cell.a .hero-img{width:100%;height:clamp(220px,38vw,360px);object-fit:cover}

/*******************************************************
 Grid B – Text, Bild, Link, Button
*******************************************************/
.cell.b{padding:14px}

/* Text | Bild – links mehr Platz, rechts weniger */
.cell.b .split{
  display:grid;
  grid-template-columns:1.3fr 0.7fr;
  gap:14px;
  align-items:center;
}

.cell.b .split .text{min-width:0}

/* Bild begrenzen, aber flexibel */
.cell.b .split .media img{
  width:100%;
  height:clamp(180px, 32vh, 260px); /* min, „Ziel“, max */
  object-fit:cover;
  border-radius:10px;
  border:2px dashed #0b0f14;
}

/* Links & Buttons */
.cell .link{
  display:inline-block;
  margin-top:.30em;
  font-weight:700;
  color:#0b1220;
  text-decoration:none;
  border-bottom:2px solid currentColor;
  line-height:1.2;
}
.cell .link:hover{opacity:.85}

.cell .btn{
  display:inline-block;
  padding:.6em 1em;
  border:2px solid #0b0f14;
  border-radius:10px;
  text-decoration:none;
  font-weight:700;
}

/* Wenn du auch auf der Bewerberseite überall grünen Hover willst: */
.cell .btn:hover{
  background:#1f7f63;
  border-color:#1f7f63;
  color:#fff;
}

.cell .btn.ghost{background:transparent}

/*******************************************************
 Grid C – Text
*******************************************************/
.cell.c .content p{margin:.35em 0}

/*******************************************************
 Grid D – Auth
*******************************************************/
/*******************************************************
 Grid D – Auth (Bewerber)
*******************************************************/
.cell.d .auth{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.cell.d .auth label{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-weight:600;
}

.cell.d .auth input{
  border:2px solid #0b0f14;
  border-radius:10px;
  padding:.6em .8em;
  font:inherit;
}

/* Buttons in einem Raster – alle gleich groß */
.cell.d .actions{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr)); /* wenn nur 2 Buttons: 2 Spalten */
  gap:12px;
  margin-top:14px;
}

/* <button> und <a> identisch machen */
.cell.d .actions .btn{
  -webkit-appearance:none;
  appearance:none;
  box-sizing:border-box;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  width:100%;
  padding:.6em 1.4em;
  border-radius:10px;
  border:2px solid #0b0f14;
  background:#fff;

  font:inherit;
  font-weight:700;
  line-height:1.2;
  white-space:nowrap;
  text-align:center;
}

/* Grüner Hover nur im Bewerber-Login */
.cell.d .actions .btn:hover{
  background:#1f7f63;      /* Brand-Grün anpassen, wenn nötig */
  border-color:#1f7f63;
  color:#fff;
}

/* Handy: Buttons untereinander */
@media (max-width:899.98px){
  .cell.d .actions{
    grid-template-columns:1fr;
  }
}

/*******************************************************
 Grid E/F/G – ausgeblendet
*******************************************************/
.cell.e,.cell.f,.cell.g{display:none}

/*******************************************************
 RESPONSIVE
*******************************************************/
@media (max-width:899.98px){
  .r3{grid-template-columns:1fr}
  .cell.b .split{grid-template-columns:1fr}
}