body{
	font: normal 1.2em 'Helvetica', Arial, sans-serif;
	margin: 0 auto;
}

img {max-width:100%; height:auto; border-radius: 12px;}

/* ----- typography ----- */
h1, h2, h3, h4, h5, h6 {color:#434343 ; font-weight: 600;}

h1 {font-size:2.4em; font-weight:400 ;margin-left: 10px; text-transform: uppercase}

h2 {font-size:1.7em; margin: 0 auto;  line-height: 0.8; padding:0 10px 5px 0}

h3 {font-size:1.4em; text-decoration: underline; margin:0; line-height: 1.2; }

h4 {font-size:1.1em}

h5 {font-size:1em}

h6 {font-size:0.9em}

news {font-size:2.4em; font-weight:400 ;margin-left: 0px; text-transform: uppercase}

p {
	text-align:justify;
	color:#666 ;
	line-height:1.4em;
	margin:0 0 0.8em 0;
	-moz-hyphens: auto;
   -o-hyphens: auto;
   -webkit-hyphens: auto;
   -ms-hyphens: auto;
   hyphens: auto;
  font-size: 1.2em;
  font-weight: normal;
}

.phone {float: right; margin:0 25px 0 0}
.mail {float: left; margin:0 0 0 25px}

a {color: #808080; text-decoration: none; line-height: inherit; font-weight: bold; }
a:hover {color: #333; text-decoration: underline; }
a:focus {color: #333; outline: none; }


hr{
	border:solid #666 1px; height:1px;
	clear:both;
}

li {
	padding-bottom: 4px;
	font-size: 1.2em;
  color:#666;
  line-height:1.4em;
}

ul {
	margin-top: 0;
	margin-bottom: 10px;
	margin-left: 0.9em;
	padding-left: 0.9em;
	list-style-type: square;
	font-size: 1.2em;
	color:#666;
}



ol {
	margin-top: 0;
	margin-bottom: 10px;
	margin-left: 0.9em;
	padding-left: 0.9em;
}


address {
  background-color: #fdc300;
  position: relative;
  line-height:120%;
  margin: 0;
  padding: 100px 0 0 0;
  font-style: normal;
  font-weight: normal;
  }

address::before {
  content: "";
  position: absolute;
  top: -10px;         /* Höhe der Grafik nach oben schieben */
  left: 0;
  width: 100%;        /* Grafik streckt sich über die gesamte Breite */
  height: 150px;       /* Die tatsächliche Höhe deiner Grafik-Datei */
  background-image: url('https://www.grundschule-muelheim.de/wbce/templates/fg-grey/images/border_address.png');
  background-repeat: no-repeat; /* Wiederholt die Grafik horizontal */
  background-size: contain;    /* Passt die Grafik in die Höhe ein */
}

address h2 {
  font-weight: 400;
}

address p {
  font-size: 1.25em !important;
  font-weight: 400;
  color:#666;
  /*float: left; */
  padding: 0 5px;
  text-align: left;
}

address a:link {
  color: #666;
  font-weight: 400;
  text-decoration: none;
}

address a:hover {
  color: #333;
  font-weight: 400;
}

address a:active, a:visited, a:focus {
  color: #666 !important;;
}

address img {
  width: 50% !important; /* Das Bild wird nie breiter als sein Eltern-Element */
  height: auto;    /* Verhindert Verzerrungen; das Seitenverhältnis bleibt gleich */
}


blockquote {
	padding: 10px;
	margin: 0 0 20px 0;
}

/* Container für die Buttons */
.app-button-container {
    display: flex;
    flex-wrap: wrap; /* Erlaubt das Umbrechen auf Mobilgeräten */
    gap: 10px;       /* Abstand zwischen den Buttons */
    margin-top: 15px;
}

/* Basis-Style für die Buttons (wie zuvor) */
.btn-app {
    display: inline-block;
    padding: 12px 20px;
    color: #ffffff !important;
    text-decoration: none;
    border-radius: 6px;
    font-weight: bold;
    text-align: center;
    transition: opacity 0.3s ease;
    flex: 1;             /* Buttons versuchen den Platz gleichmäßig zu füllen */
    min-width: 200px;    /* Verhindert, dass sie zu schmal werden */
}

.btn-app:hover {
    opacity: 0.8;
    text-decoration: none;
}

/* Farben für die verschiedenen Dienste */
.btn-android { background-color: #4285f4; } /* Android Google-Blau */
.btn-apple   { background-color: #0066CC; } /* Apple Blau */
.btn-web     { background-color: #7a48ae; } /* Web-Login Lila */

/* Mobile Optimierung */
@media screen and (max-width: 600px) {
    .btn-app {
        flex: 1 1 100%; /* Auf kleinen Handys nehmen sie die volle Breite ein */
    }
}

pre, code {
	padding: 5px 0 10px 6px;
	margin: 3px 0 20px 0;
	font-size:1em;
	overflow:auto;
	line-height:1.5em;
	color:#eee;
}

.red {
  display: flex;
  flex-direction: column;
  align-items: center; /* Zentriert alle Elemente horizontal */
  text-align: left;
  font-family: sans-serif;
  margin-bottom: 20px;
}

/* Die Headline */
.red h2 {
  font-size: 1.7em;
  color: white;
  background-color: #c31718; /* Rot */
  padding: 15px 20px;
  border-radius: 12px;     /* Abgerundete Ecken */
  width: 100%;             /* Nutzt die volle Breite der Box */
  box-sizing: border-box;  /* Padding wird nicht zur Breite addiert */
  margin-bottom: 20px;
  max-width: 350px;
}

/* Das Bild */
.red img {
  max-width: 350px;
  width: 100%;             /* Responsiv innerhalb der 350px */
  height: auto;
  display: block;
  margin-bottom: 20px;
  border-radius: 12px;
}

/* Der Infotext */
.red .info-text {
  max-width: 350px;        /* Genau so breit wie das Bild */
  text-align: justify;     /* Blocksatz */
	line-height: 1.3;
  margin-bottom: 20px;
  color: #333;
	/*hyphens: none;*/
	overflow-wrap: normal;
	word-break: keep-all;
}

/* Der Button */
.red .btn-more {
  display: inline-block;
  background-color: #c31718; /* Rot */
  color: #ffffff !important;
  padding: 10px 25px;
  text-decoration: none;
  border-radius: 5px;
  transition: opacity 0.3s ease;
}

.red .btn-more:hover {
  opacity: 0.8;
}

.green {
  display: flex;
  flex-direction: column;
  align-items: center; /* Zentriert alle Elemente horizontal */

  text-align: center;
  font-family: sans-serif;
  margin-bottom: 20px;
}

/* Die Headline */
.green h2 {
  font-size: 1.7em;
  color: white;
  background-color: #6fa744; /* Grün */
  padding: 15px 20px;
  border-radius: 12px;     /* Abgerundete Ecken */
  width: 100%;             /* Nutzt die volle Breite der Box */
  box-sizing: border-box;  /* Padding wird nicht zur Breite addiert */
  margin-bottom: 20px;
  max-width: 350px;
}

/* Das Bild */
.green img {
  max-width: 350px;
  width: 100%;             /* Responsiv innerhalb der 350px */
  height: auto;
  display: block;
  margin-bottom: 20px;
  border-radius: 12px;
}

/* Der Infotext */
.green .info-text {
  max-width: 350px;        /* Genau so breit wie das Bild */
  text-align: justify;     /* Blocksatz */
  line-height: 1.3;
  margin-bottom: 20px;
  color: #333;
}

/* Der Button */
.green .btn-more {
  display: inline-block;
  background-color: #6fa744; /* Grün */
  color: #ffffff !important;
  padding: 10px 25px;
  text-decoration: none;
  border-radius: 5px;
  transition: opacity 0.3s ease;
}

.green .btn-more:hover {
  opacity: 0.8;
}

.yellow {
  display: flex;
  flex-direction: column;
  align-items: center; /* Zentriert alle Elemente horizontal */
  text-align: center;
  font-family: sans-serif;
  margin-bottom: 20px;
}

/* Die Headline */
.yellow h2 {
  font-size: 1.7em;
  color: white;
  background-color: #eec327; /* Gelb */
  padding: 15px 20px;
  border-radius: 12px;     /* Abgerundete Ecken */
  width: 100%;             /* Nutzt die volle Breite der Box */
  box-sizing: border-box;  /* Padding wird nicht zur Breite addiert */
  margin-bottom: 20px;
  max-width: 350px;
}

/* Das Bild */
.yellow img {
  max-width: 350px;
  width: 100%;             /* Responsiv innerhalb der 350px */
  height: auto;
  display: block;
  margin-bottom: 20px;
  border-radius: 12px;
}

/* Der Infotext */
.yellow .info-text {
  max-width: 350px;        /* Genau so breit wie das Bild */
  text-align: justify;     /* Blocksatz */
  line-height: 1.3;
  margin-bottom: 20px;
  color: #333;
}

/* Der Button */
.yellow .btn-more {
  display: inline-block;
  background-color: #eec327; /* Gelb */
  color: #ffffff !important;
  padding: 10px 25px;
  text-decoration: none;
  border-radius: 5px;
  transition: opacity 0.3s ease;
}

.yellow .btn-more:hover {
  opacity: 0.8;
}

input , textarea, pre, code, blockquote, select {
	border: 1px solid #ccc;  background-color: #000;
}

.imgl {float:left; margin:0 15px 10px 0}

.imgr {float:right; margin:0 0 10px 15px}

.picround {float:left; margin: 3px 2% 20px 0; height: 200px; width:200px; border-radius: 50%}

.picfull {width:100%; height:auto;}
.pic2left {float:left; max-width:49% !important; margin: 3px 2% 2px 0; height:auto;}
.pic2right {float:right; max-width:49% !important; margin: 3px 0 2px 2%; height:auto;}

.pic3left {float:left; max-width:32% !important; margin: 3px 2% 2px 0; height:auto;}
.pic3right {float:right; max-width:32% !important; margin: 3px 0 2px 2%; height:auto;}

.pic4left {float:left; max-width:24% !important; margin: 3px 2% 2px 0; height:auto;}
.pic4right {float:right; max-width:24% !important; margin: 3px 0 2px 2%; height:auto;}

/*Show and Hide Responsive*/
.hideOnDesktops {display: none;}

/* Small devices (tablets, up to 1024px) */
@media (max-width: 1024px) {
  .red h2, .green h2, .yellow h2  {font-size:1.25em}
  address h2 {font-size:1.5em; text-align: center  }
  address p {font-size:1.25em !important; text-align: center; padding: 0}
  address img {width: 50% !important; max-width: none !important;}
}

/* Small devices (tablets, up to 1180px) */
@media (max-width: 1180px) {
   address h2 {font-size:1.25em;  }
  address p {font-size:1.0em !important; padding: 0}
  address img {width: 100% !important; max-width: none !important;}
}

/* Small devices (tablets, up to 820px) */
@media (max-width: 820px) {
   address h2 {font-size:1.5em;  }
  address p {font-size:1.25em !important; padding: 0}
  address img {width: 50% !important; max-width: none !important;}
}

/* Small devices (tablets, up to 768px) */
@media (max-width: 600px) {
	.pic2left, .pic2right {max-width: 100%;  margin: 3px 0 2px 0;}
	.pic3left, .pic3right, .pic4left, .pic4right  {max-width: 49%;}

	/*Show and Hide Responsive*/
	body .hideOnTablets {display: none;}
	.hideOnDesktops {display: block;}
}

/* Small devices (Smartphone, up to <480px) */
@media (max-width: 479px) {
	.pic2left, .pic2right {max-width: 100%;  margin: 3px 0 2px 0;}
	.pic3left, .pic3right, .pic4left, .pic4right  {max-width: 49%;}

	/*Show and Hide Responsive*/
	.hideOnMobiles {display: none;}
	body .hideOnTablets {display: block;}
	body .hideOnDesktops {display: block;}
}