@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Nunito+Sans:wght@400;500;600&display=swap');

:root { --font-serif: 'Cormorant Garamond', Georgia, serif; --font-sans: 'Nunito Sans', system-ui, sans-serif; }
* { box-sizing: border-box; }
html { font-family: Arial; font-size: 13pt; background-color: #eef1ed; }
body { margin: 0; color: #284356; font-family: var(--font-sans); font-weight: 400; line-height: 1.6; font-size: 1rem; }
h1 { font-family: var(--font-serif); font-weight: 600; letter-spacing: -0.01em; margin: 0 0 0 0;}
h2 { font-weight: 700; margin: 18px 0 4px 0; font-size: 1.3em;}
h4 { font-weight: 700; margin: 18px 0 4px 0; }
.cont { max-width: 1200px; margin: 0 auto; padding: 20px; }

/*---------------------------------------------*/
/* Header / Navigation                         */
/*---------------------------------------------*/

.header { display: flex; flex-direction: row; align-items: center; width: 100%; }
.header a { width: 50%; height: auto; }
.navbar { margin-left: auto; }
.navbar-menu { display: flex; flex-direction: row; list-style: none; margin: 0; padding: 0; }
.navbar-menu li { margin-left: 20px; font-weight: bold; }
.navbar-menu a { color: #284356; text-decoration: none; white-space: nowrap; }

/* Navigation: schmalere Bildschirme */

@media screen and (max-width: 1200px) {
.navbar-menu { flex-direction: column; align-items: flex-end; }
.navbar-menu li { margin-left: 20px; margin-top: 4px; }
}

/* Navigation: Smartphones */

@media screen and (max-width: 800px) {
.header { flex-direction: column; align-items: flex-start; }
.header a { max-width: 100%; }
.navbar { width: 100%; }
.navbar-menu { align-items: flex-start; margin-top: 20px; margin-bottom: 20px; }
.navbar-menu li { margin-left: 0; }
}

/*---------------------------------------------*/
/* Hero                                        */
/*---------------------------------------------*/

.hero { width: 100%; margin: 16px 0; }
.hero img { display: block; width: 100%; height: auto; }

/*---------------------------------------------*/
/* Cards                                       */
/*---------------------------------------------*/

.card-container {  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px; margin: 0 0 20px 0; }

/* 
 .card-container { display: flex; flex-wrap: wrap; gap: 20px; }
 .card { width: 250px; padding: 10px; text-align: center; background-color: #fff; }
*/

.card { flex: 0 1 250px; min-width: 0; padding: 10px; text-align: center; background-color: #fff; }
.card-text { flex: 0 1 500px; min-width: 0; padding: 10px; text-align: center;  }
.card img { width: 64px; height: 64px; object-fit: contain; display: block; margin: 0 auto; }
.card img.card-bigimg { width: 250px; height: 250px; object-fit: contain; display: block; margin: 0 auto; }

.ftrcard { flex: 0 1 250px; min-width: 0; padding: 10px; display: flex; align-items: center;  gap: 12px; }
.ftrcard img { height: 24px; display:block; flex: 0 0 auto; }
.ftrcard > div {flex: 1 1 auto; font-size: 75%;}

/*---------------------------------------------*/
/* Verschiedenes                              */
/*---------------------------------------------*/

.thema { margin: 32px 16px 16px 0; }
.thema > div { flex: 1 1; }
.thema img { width: 250px; height: auto; }
.thema p {  margin: 0; }