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

/*******************************************************
 ZEILEN / SPALTEN (Breiten hier einstellen)
 - Abstand zwischen Zeilen: .row + .row { margin-top: … }
 - Jede Zeile hat gleiche Kachelhöhe (höchstes Item bestimmt)
*******************************************************/
.row{display:grid;gap:14px;align-items:stretch;min-height:0}
.row + .row{margin-top:10px} /* ← Zeilenabstand (global) */

/* Zeilen-Breiten – HIER BREITEN EINSTELLEN */
.r1{grid-template-columns:1fr}                            /* A (voll) */
.r2{grid-template-columns:1fr}                            /* Z (voll) */
.r3{grid-template-columns:35fr 65fr}                       /* B | C  (← anpassen) */
.r4{grid-template-columns:1fr 1fr 1fr}       /* D | (E/F) | G  */
.r5{grid-template-columns:1fr 1fr}                       /* H | I  (← anpassen) */

/* Sicherheit: Items dürfen schrumpfen -> kein horizontales Überlaufen */
.row > * { min-width: 0; }

/* Unterzeilen für E/F – füllen die mittlere Spalte vollständig */
.col-middle{display:grid;grid-template-rows:1fr 1fr;gap:14px;min-height:0}

/*******************************************************
 KACHEL-BASIS (alle Grids erben das – pro Grid unten ü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 unten gezielt überschreiben) */
.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:.05em 0 .25em;font-weight:700;font-size:clamp(16px,2.2vmin,22px);line-height:1.25;color:#0b1220}
.cell .content 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}
.cell .link{display:inline-block;margin-top:.30em;font-weight:700;color:#0b1220;text-decoration:none;border-bottom:2px solid currentColor}

/* Platzhalter-Bilder (D/E/F/G) */
.media.row .ph{
  height:clamp(80px,12vmin,140px);
  border:2px dashed #0b0f14;border-radius:10px;
  background:
    linear-gradient(135deg, rgba(0,0,0,.06) 25%, transparent 25%) 0 0/16px 16px,
    linear-gradient(45deg, rgba(0,0,0,.06) 25%, transparent 25%) 0 0/16px 16px,#f9fafb
}

/*******************************************************
 // Grid A //
 CODE ZUM EINSTELLEN (Bild füllt, Kachel deckelt Höhe)
*******************************************************/
/* Kachel */
.cell.a{
  padding:0;overflow:hidden;
  /* Höhe der Kachel – wächst NICHT über Max, kann schrumpfen */
  height:clamp(200px,38vw,210px);
  background:#fff;border:2px solid #0b0f14;border-radius:12px
}
/* Bild (füllt die Kachel) */
.cell.a .hero-img{
  width:100%;height:100%;
  object-fit:cover; /* cover=fällt randlos; contain=voll sichtbar */
  /* → Für „voll sichtbar“: object-fit:contain; */
}

/*******************************************************
 // Grid Z //
 CODE ZUM EINSTELLEN
 - Höhe / Rand / Radius / Hintergrund
 - Überschrift 1 (H1) / Überschrift 2 (H2) / Text
*******************************************************/
/* Grideinstellung */
.cell.z{
  min-height:120px;          /* Mindesthöhe */
  background:#ffffff;        /* Hintergrundfarbe */
  border:2px solid #0b0f14;  /* Rand */
  border-radius:12px;        /* Ecken */
  padding:14px               /* Innenabstand */
}
/* Überschriften */
.cell.z .h{
  font-family:"Inter",system-ui,sans-serif; /* Schriftart H1 */
  font-size:clamp(22px,3.0vmin,32px);       /* Größe H1 */
  color:#0b1220                              /* Farbe H1 */
}
.cell.z .subh{
  font-family:"Inter",system-ui,sans-serif; /* Schriftart H2 */
  font-size:clamp(18px,2.4vmin,24px);       /* Größe H2 */
  color:#2e3a59                               /* Farbe H2 */
}
/* Text */
.cell.z .content p{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,sans-serif; /* Schriftart Text */
  font-size:clamp(14px,1.8vmin,18px);                                      /* Größe Text */
  color:#0b1220                                                             /* Farbe Text */
}

/*******************************************************
 // Grid B //
 CODE ZUM EINSTELLEN (Textkarte)
*******************************************************/
.cell.b{
  min-height:80px;
  background:#ffffff;border:2px solid #0b0f14;border-radius:12px;padding:14px
}
.cell.b .h{
  font-family:"Inter",system-ui,sans-serif;
  font-size:clamp(22px,3.0vmin,32px);
  color:#0b1220
}
.cell.b .content p{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,sans-serif;
  font-size:clamp(14px,1.8vmin,18px);
  color:#0b1220
}

/*******************************************************
 // Grid C //
 CODE ZUM EINSTELLEN (Text + Buttons)
 - Button Farben/Hover separat
*******************************************************/
.cell.c{
  min-height:80px;
  background:#ffffff;border:2px solid #0b0f14;border-radius:12px;padding:14px
}
.cell.c .h{
  font-family:"Inter",system-ui,sans-serif;
  font-size:clamp(22px,3.0vmin,32px);
  color:#0b1220
}
.cell.c .content p{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,sans-serif;
  font-size:clamp(14px,1.8vmin,18px);
  color:#0b1220
}
/* Buttons */
.cell.c .btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:.30em}
.cell.c .btn.ghost{
  display:inline-block;padding:.55em .95em;
  background:blue;            /* Button-Hintergrund */
  color:white;                 /* Button-Schriftfarbe */
  border:2px solid blue;      /* Button-Rand */
  border-radius:10px;text-decoration:none;font-weight:700;
  transition:background-color .15s ease,color .15s ease,border-color .15s ease
}
.cell.c .btn.ghost:hover{
  background:#32CD32;            /* Hover-Hintergrund */
  color:#ffffff;                  /* Hover-Schriftfarbe */
  border-color:#0b1220            /* Hover-Randfarbe */
}

/*******************************************************
 // Grid D //
 CODE ZUM EINSTELLEN
*******************************************************/
.cell.d{
  min-height:320px;
  background:#ffffff;border:2px solid #0b0f14;border-radius:12px;padding:14px
}
.cell.d .h{
  font-family:"Inter",system-ui,sans-serif;
  font-size:clamp(22px,3.0vmin,32px);
  color:#0b1220
}
.cell.d .content p{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,sans-serif;
  font-size:clamp(14px,1.8vmin,18px);
  color:#0b1220
}
/* Grid D: Bildcontainer ausblenden */
.cell.d .media { display: none; }      /* komplett weg (kein Platz) */
/* oder, wenn Platz bleiben soll: */
/* .cell.d .media { visibility: hidden; } */
.cell.d .link{color:#0b1220}

/*******************************************************
 // Grid E //
 CODE ZUM EINSTELLEN
*******************************************************/
.cell.e{
  min-height:180px;
  background:#ffffff;border:2px solid #0b0f14;border-radius:12px;padding:14px
}
.cell.e .h{
  font-family:"Inter",system-ui,sans-serif;
  font-size:clamp(22px,3.0vmin,32px);
  color:#0b1220
}
.cell.e .content p{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,sans-serif;
  font-size:clamp(14px,1.8vmin,18px);
  color:#0b1220
}
/* Grid E: Bildcontainer ausblenden */
.cell.e .media { display: none; }      /* komplett weg (kein Platz) */
/* oder, wenn Platz bleiben soll: */
/* .cell.e .media { visibility: hidden; } */

.cell.e .link{color:#0b1220}

/*******************************************************
 // Grid F //
 CODE ZUM EINSTELLEN
*******************************************************/
.cell.f{
  min-height:120px;
  background:#ffffff;border:2px solid #0b0f14;border-radius:12px;padding:14px
}
.cell.f .h{
  font-family:"Inter",system-ui,sans-serif;
  font-size:clamp(22px,3.0vmin,32px);
  color:#0b1220
}
.cell.f .content p{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,sans-serif;
  font-size:clamp(14px,1.8vmin,18px);
  color:#0b1220
}
/* Grid F: Bildcontainer ausblenden */
.cell.f .media { display: none; }      /* komplett weg (kein Platz) */
/* oder, wenn Platz bleiben soll: */
/* .cell.f .media { visibility: hidden; } */

.cell.f .link{color:#0b1220}

/*******************************************************
 // Grid G //
 CODE ZUM EINSTELLEN
*******************************************************/
.cell.g{
  min-height:320px;
  background:#ffffff;border:2px solid green;border-radius:12px;padding:14px
}
.cell.g .h{
  font-family:"Inter",system-ui,sans-serif;
  font-size:clamp(22px,3.0vmin,32px);
  color:#0b1220
}
.cell.g .content p{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,sans-serif;
  font-size:clamp(14px,1.8vmin,18px);
  color:#0b1220
}
/* Grid G: Bildcontainer ausblenden */
.cell.g .media { display: none; }      /* komplett weg (kein Platz) */
/* oder, wenn Platz bleiben soll: */
/* .cell.g .media { visibility: hidden; } */

.cell.g .link{color:#0b1220}

/*******************************************************
 // Grid H //
 CODE ZUM EINSTELLEN
 - Überschriften: Schriftart/Farbe
 - Grid: Breite (in .r5 oben), Rand, Randfarbe, Hintergrund
 - Logos: Größe/Abstand/Filter
*******************************************************/
.cell.h{
  min-height:130px;
  background:#ffffff;          /* Hintergrundfarbe */
  border:2px solid #40a574;    /* Rand + Farbe */
  border-radius:12px;          /* Radius */
  padding:12px
}
/* Überschriften */
.cell.h .h{
  font-family:"Inter",system-ui,sans-serif;  /* Schriftart */
  font-size:clamp(20px,2.8vmin,28px);        /* Größe */
  color:#0fa36b                               /* Farbe */
}
/* Text (falls vorhanden) */
.cell.h .content p{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,sans-serif;
  font-size:clamp(14px,1.8vmin,18px);
  color:#0b1220
}
/* Logos (H) – ohne Bullets, ohne Einrückung */
.cell.h .partner-logos{
  list-style:none;
  margin:0;
  padding:0;
  display:flex; flex-wrap:wrap; gap:12px; align-items:center;
}
.cell.h .partner-logos li{ list-style:none; margin:0; padding:0; }
.cell.h .partner-logos img{
  max-width:110px; max-height:40px; width:auto; height:auto; object-fit:contain;
  filter:none;
}
/*******************************************************
 // Grid I //
 CODE ZUM EINSTELLEN
 - Überschriften: Schriftart/Farbe
 - Grid: Breite (in .r5 oben), Rand, Randfarbe, Hintergrund
 - Logos: Größe/Abstand/Filter
*******************************************************/
.cell.i{
  min-height:130px;
  background:#ffffff;          /* Hintergrundfarbe */
  border:2px solid #40a574;    /* Rand + Farbe */
  border-radius:12px;          /* Radius */
  padding:12px
}
/* Überschriften */
.cell.i .h{
  font-family:"Merriweather",Georgia,serif;  /* Schriftart */
  font-size:clamp(20px,2.8vmin,28px);        /* Größe */
  color:#0fa36b                               /* Farbe */
}
/* Text (falls vorhanden) */
.cell.i .content p{
  font-family:Georgia,serif;
  font-size:clamp(14px,1.8vmin,18px);
  color:#0b1220
}
/* Logos (I) – ohne Bullets, ohne Einrückung */
.cell.i .partner-logos{
  list-style:none;
  margin:0;
  padding:0;
  display:flex; flex-wrap:wrap; gap:12px; align-items:center;
}
.cell.i .partner-logos li{ list-style:none; margin:0; padding:0; }
.cell.i .partner-logos img{
  max-width:110px; max-height:40px; width:auto; height:auto; object-fit:contain;
  filter:none;
}

/*******************************************************
 RESPONSIVE – 1 Spalte (DOM-Reihenfolge), nichts verschluckt
*******************************************************/
@media (max-width:899.98px){
  .r1,.r2,.r3,.r4,.r5{grid-template-columns:1fr}
  .col-middle{grid-template-rows:auto auto}
}