@charset "UTF-8";
@import "https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css";
/*@import url('https://fonts.googleapis.com/css2?family=Ingrid+Darling&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
*/
@import url('https://fonts.googleapis.com/css2?family=Amatic+SC:wght@400;700&family=Caveat:wght@400..700&family=Cinzel:wght@400..900&family=Indie+Flower&family=Ingrid+Darling&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('https://cdn.jsdelivr.net/npm/@mdi/font/css/materialdesignicons.min.css');


:root {
  --bulma-primary-h: 136deg;
  --bulma-primary-s: 19%;
  --bulma-primary-l: 57%;
  --bulma-link-h: 344deg;
  --bulma-link-s: 41%;
  --bulma-link-l: 66%;

  --bulma-body-family: "Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  --bulma-title-family: "Amatic SC","Cinzel","Indie Flower","Caveat","Ingrid Darling","Segoe Script","Brush Script MT","Inter","Helvetica Neue",Helvetica,Arial,sans-serif; /* kann nicht als var() integriert werden - in Bulma 1.0.4 bisher nicht korrekt implementiert */
}

.title {
	font-family: "Amatic SC","Cinzel","Indie Flower","Caveat","Ingrid Darling";
}

.card .title {
	color:var(--bulma-primary-35);
	font-size: 2.5rem;
}

.card {
	border:1px solid var(--bulma-link);
}

a:hover .card {
	border:1px solid var(--bulma-link-40);
	transform: scale(1.02);
	transition: all 300ms ease;
}

h1.title {
	font-size: 4.0rem;
	font-weight: 300;
	color:var(--bulma-primary-35);
}

h2.title {
	font-size: 2.5rem;
	font-weight: 300;
}

.dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding-bottom: 35px;
}

.dots span {
    width: 15px;
    height: 15px;
    background-color: var(--bulma-link);
    border-radius: 50%;
    display: inline-block;
}

#heroimage{
	background:url("kinderreich-header.webp");
	background-repeat: no-repeat;
	background-size:cover;
}


.footer {
	background: var(--bulma-primary-35);
	background: linear-gradient(120deg, var(--bulma-primary-25), var(--bulma-primary-30), var(--bulma-primary-25));
  --bulma-footer-color: hsl(0,0%,100%);
	border-top: 5px solid var(--bulma-link);
	color: var(--bulma-footer-color);
}

.footer .title,
.footer .content {
	color: inherit;
}

.footer a {
	color: hsl(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-80-l))
}

.footer a:hover {
	color: hsl(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-70-l))
}