/*******************************************************
 RESET / BASIS (nur Grundgerüst – NICHTS Dynamisches)
*******************************************************/
*,*::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}

/*******************************************************
 GRID / ZEILEN (Impressum nutzt A, B, C – volle Breite)
*******************************************************/
.proto-grid{display:grid;grid-template-columns:1fr;gap:14px;align-items:stretch;min-height:0}
.proto-grid > *{min-width:0}

/*******************************************************
 KACHEL-BASIS (alle Grids erben – unten je Grid überschreiben)
*******************************************************/
.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-Basis (pro Grid überschreibbar) */
.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,.cell .richtext p{
  margin:.30em 0;font:400 clamp(14px,1.8vmin,18px)/1.5 system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,sans-serif;color:#0b1220
}

/*******************************************************
 // Grid A //
 - bleibt im DOM, aktuell ausgeblendet
*******************************************************/
.cell.a{display:none;padding:0;overflow:hidden}
.cell.a .hero{width:100%;height:clamp(200px,38vw,210px);background:center/contain no-repeat #fff}
/* Grid A – Text-Abstände / Leerzeilen 
.cell.a .richtext p,
.cell.a .content p { margin: .35em 0; }
.cell.a .richtext .gap-1,
.cell.a .content .gap-1 { margin-top: 1em !important; }
.cell.a .richtext .gap-2,
.cell.a .content .gap-2 { margin-top: 2em !important; }  ≈ Leerzeile */


/*******************************************************
 // Grid B //  (Überschrift)
*******************************************************/
.cell.b{
  /* Optik je nach Wunsch hier anpassen */
  background:#ffffff;border:2px solid #0b0f14;border-radius:12px;padding:14px
}
.cell.b .h{
  font-size:clamp(22px,3.0vmin,32px);
  color:#228B22;               /* H1-Farbe */
  text-align:left;             /* H1 links */
}
/* Grid B – Text-Abstände / Leerzeilen 
.cell.b .richtext p,
.cell.b .content p { margin: .35em 0; }
.cell.b .richtext .gap-1,
.cell.b .content .gap-1 { margin-top: 1em !important; }
.cell.b .richtext .gap-2,
.cell.b .content .gap-2 { margin-top: 2em !important; } *//

/*******************************************************
 // Grid C //  (reiner Text – links)
*******************************************************/
.cell.c{
  background:#ffffff;border:2px solid #0b0f14;border-radius:12px;padding:14px;min-height:120px
}
.cell.c .richtext{
  max-width:1100px;            /* Content-Breite */
  margin:0;                    /* LINKS ausrichten (nicht zentrieren) */
  text-align:left;
}
.cell.c .richtext p{
  font-size:clamp(14px,1.8vmin,18px);
  color:#0b1220;
}
/* Grid C – Text-Abstände / Leerzeilen */
.cell.c .richtext{max-width:1100px;margin:0;text-align:left}
.cell.c .richtext p{margin:.35em 0;font-size:clamp(14px,1.8vmin,18px);color:#0b1220}
.cell.c .richtext .gap-1{margin-top:1em !important}
.cell.c .richtext .gap-2{margin-top:2em !important}



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