/*******************************************************
 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 (Datenschutz 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
*******************************************************/
.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}

.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 .subh{
  margin:.8em 0 .35em; /* etwas Luft über Unterüberschriften */
  font-weight:700;font-size:clamp(16px,2.2vmin,22px);
  line-height:1.25;color:#0b1220
}
.cell .content p,.cell .richtext 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
}

/*******************************************************
 // 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}
/* A – Textabstände/Leerzeilen (falls später genutzt) */
.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}

/*******************************************************
 // Grid B //  (Überschrift)
*******************************************************/
.cell.b{
  background:#ffffff;border:2px solid #0b0f14;border-radius:12px;padding:14px
}
.cell.b .h{
  font-size:clamp(22px,3.0vmin,32px);
  color:#000080;               /* H1-Farbe */
  text-align:left;             /* H1 links */
}
/* B – Textabstände/Leerzeilen (falls Text im B-Block steht) */
.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 //  (Haupttext – links, max-breite)
*******************************************************/
.cell.c{
  background:#ffffff;border:2px solid #0b0f14;border-radius:12px;min-height:120px;padding:14px
}
.cell.c .richtext{max-width:1100px;margin:0;text-align:left}
/* C – Textabstände/Leerzeilen */
.cell.c .richtext p,.cell.c .content p{margin:.35em 0}
.cell.c .richtext .gap-1,.cell.c .content .gap-1{margin-top:1em!important}
.cell.c .richtext .gap-2,.cell.c .content .gap-2{margin-top:2em!important}

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