/*******************************************************
 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
}

/*******************************************************
 ZEILEN / SPALTEN (wie index.css)
*******************************************************/
.row{display:grid;gap:14px;align-items:stretch;min-height:0}
.row + .row{margin-top:10px}
.row > *{min-width:0}

/* Layout */
.r1{grid-template-columns:1fr}      /* A (voll, aber ausgeblendet) */
.r2{grid-template-columns:1fr}      /* B (voll) */
.r3{grid-template-columns:1fr 1fr}  /* C | D in EINER Row */
.r4{grid-template-columns:1fr}      /* E (voll) */

/*******************************************************
 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;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,sans-serif
}
.cell>.content{flex:1 1 auto;min-height:0}

/* Typo */
.cell .h{
  margin:0 0 .25em;font-weight:800;font-size:clamp(22px,3.2vmin,34px);
  line-height:1.15;color:#0b1220;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;color:#0b1220
}

/* 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 //
*******************************************************/
.cell.b{background:#fff;border:2px solid #0b0f14;border-radius:12px;padding:14px}

/*******************************************************
 // Grid C //
*******************************************************/
.cell.c{background:#fff;border:2px solid #0b0f14;border-radius:12px;padding:14px}
/* C – Text-Utilities */
.cell.c .content p{margin:.35em 0}
.cell.c .content .gap-1{margin-top:1em!important}
.cell.c .content .gap-2{margin-top:2em!important}

/*******************************************************
 // Grid D //
*******************************************************/
.cell.d{background:#fff;border:2px solid #0b0f14;border-radius:12px;padding:14px}
/* D – Text-Utilities */
.cell.d .content p{margin:.35em 0}
.cell.d .content .gap-1{margin-top:1em!important}
.cell.d .content .gap-2{margin-top:2em!important}

/*******************************************************
 // Grid E //
*******************************************************/
.cell.e{background:#fff;border:2px solid #0b0f14;border-radius:12px;padding:14px}
/* E – Text-Utilities */
.cell.e .content p{margin:.35em 0}
.cell.e .content .gap-1{margin-top:1em!important}
.cell.e .content .gap-2{margin-top:2em!important}
/* Grid E – Link-Stil */
.cell.e .link{
  display:inline-block;
  margin-top:.30em;
  font-weight:700;
  color:#000080;
  text-decoration:none;
  border-bottom:2px solid currentColor;
  line-height:1.2;
}
.cell.e .link:hover{ opacity:.85 }
.cell.e .link:focus-visible{
  outline:2px solid #0b0f14;
  outline-offset:2px;
}


/*******************************************************
 RESPONSIVE
*******************************************************/
@media (max-width:899.98px){
  .r1,.r2,.r4{grid-template-columns:1fr}
  .r3{grid-template-columns:1fr} /* C und D untereinander */
}