/*******************************************************
 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}       /* A (ausgeblendet) */
.r2{grid-template-columns:1fr}       /* B vollbreit */
.r3{grid-template-columns:1fr 1fr}   /* C | D */
.r4{grid-template-columns:1fr 1fr 1fr} /* E | F | G */

/*******************************************************
 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}
.cell.b .split{
  display:grid;
  grid-template-columns: 1.3fr 0.7fr; /* links mehr Platz, rechts weniger */
  gap:14px;
  align-items:center;
}

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

.cell.b .split .media img{
  width:100%;
  height:clamp(180px, 32vh, 260px);
  object-fit:cover;
  border-radius:10px;
  border:2px dashed #0b0f14;
}.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}
.cell .btn:hover{background:#0b0f14;color:#fff}
.cell .btn.ghost{background:transparent}

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


/*******************************************************
 Grid D – Auth
*******************************************************/
.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;
}

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

/* HIER machen wir <button> und <a> wirklich identisch */
.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;        /* gleiche Schrift wie Umgebung */
  line-height:1.2;     /* gleiche Zeilenhöhe */
  font-weight:700;
  white-space:nowrap;
  text-align:center;
}
.cell.d .actions .btn:hover{
  background:#1f7f63;   /* oder dein exakter Hex-Wert */
  border-color:#1f7f63;
  color:#fff;
}

/* Handy: untereinander statt nebeneinander */
@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}
}