/* ========== Ergänzungen für Responsiveness (Farben/Fonts bleiben wie im HTML) ========== */
/* 1) Headline oben: sinnvoll umbrechen, ohne Farbe/Font zu ändern */
h1[style*="text-align: center"] > span{
display:inline;
text-wrap:balance;
-webkit-hyphens:auto; hyphens:auto;
}
@media (max-width: 768px){
h1[style*="text-align: center"] > span{
display:block; /* mehrere Zeilen auf Mobil */
max-width: 20ch; /* angenehme Zeilenlänge */
margin-inline:auto;
word-break: normal;
}
}
/* 2) Allgemein: Bilder immer skaliert (falls irgendwo feste Höhen gesetzt sind) */
img{max-width:100%;height:auto;display:block}
img[width][height]{height:auto !important}
img[style*="height: 100%"]{height:auto !important}
/* 3) Flex-Kacheln aus deinem Inline-HTML */
/* Basis für alle Container mit display:flex (keine Rundungen, graue Kacheln bleiben eckig) */
div[style*="display: flex"]{
gap:clamp(12px,3vw,24px);
align-items:stretch;
width:100% !important;
overflow:hidden;
}
/* Kinder gleichmäßig wachsen lassen, Überlaufen verhindern */
div[style*="display: flex"] > div{
flex:1 1 0;
min-width:0;
}
/* Linkes Quadrat (Icon-Kachel) mit fester Basis, auf großen Screens ca. 260px */
div[style*="display: flex"] > div[style*="flex: 0 0 260px"]{
flex:0 0 min(260px,45vw) !important;
}
/* Mobil: Flex-Kacheln stapeln, Paddings etwas reduzieren */
@media (max-width: 768px){
div[style*="display: flex"]{
flex-direction:column !important;
}
div[style*="display: flex"] > div[style*="flex: 0 0 260px"]{
flex:0 0 auto !important;
width:100% !important;
}
/* häufig genutztes Padding im Textblock skalieren */
div[style*="display: flex"] [style*="padding: 20px 32px"]{
padding: clamp(14px,4vw,24px) !important;
}
}
/* 4) Zwei-Spalten-Tabellen (.cs-table2Columns) auch responsiv machen */
.cs-table2Columns{
width:100% !important;
table-layout:fixed;
border-collapse:collapse;
}
.cs-table2Columns td{vertical-align:middle}
.cs-table2Columns td img{
width:100% !important;
height:auto !important;
}
@media (max-width: 768px){
.cs-table2Columns,
.cs-table2Columns tbody,
.cs-table2Columns tr,
.cs-table2Columns td{
display:block;
width:100% !important;
}
.cs-table2Columns tr{
margin-bottom:clamp(12px,3vw,20px);
border-bottom:1px solid #ccc; /* leichte Trennung wie bei deiner responsive Tabelle */
}
.cs-table2Columns td{
padding:clamp(12px,3vw,20px) !important;
box-sizing:border-box;
}
/* feste 50%-Breiten aus Inline-Styles neutralisieren */
.cs-table2Columns td[style*="width: 50%"],
.cs-table2Columns td[style*="width: 277.5px"]{
width:100% !important;
}
.cs-table2Columns td img[style*="height: 100%"]{
height:auto !important;
}
}
/* 5) Grid-Container (2 Spalten -> 1 Spalte auf Mobil) */
div[style*="display: grid"][style*="grid-template-columns: 1fr 1fr"]{
gap: clamp(16px,4vw,40px);
}
@media (max-width: 768px){
div[style*="display: grid"][style*="grid-template-columns: 1fr 1fr"]{
grid-template-columns: 1fr !important;
}
}
/* 6) Horizontale Linie: responsiver Abstand, Farbe bleibt via Inline-Style */
.cs-hr{
margin: clamp(16px,4vw,30px) 0 !important;
}
/* 7) Tabellen aus deinem eigenen Snippet (.responsive) bleiben wie definiert */
.responsive-table-container{width:100%;overflow-x:auto}
table.responsive{width:100%;border-collapse:collapse;table-layout:fixed}
table.responsive td{text-align:center;vertical-align:middle;padding:1rem;box-sizing:border-box}
table.responsive img{max-width:100%;height:auto;display:block;margin:0 auto}
table.responsive h3{font-size:1.2rem;margin:.5rem 0;word-wrap:break-word}
@media (max-width:768px){
table.responsive,
table.responsive tbody,
table.responsive tr,
table.responsive td{display:block;width:100% !important}
table.responsive tr{margin-bottom:1.5rem;border-bottom:1px solid #ccc}
table.responsive td{min-height:auto !important}
}