/* ========= */
/* ROOT */
/* ========= */

:root {
  --metthez-blau: #c8e2f0;
  --metthez-orange: #ff5328;
  --metthez-orange-dark: #ee4014;
  --metthez-font-size-h1: 2rem;
  --metthez-font-size-p: 1rem;
  --metthez-font-size-a: 1rem;
  --bs-font-sans-serif: "Spezia Web";
}
* {
  text-decoration: none !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media (min-width: 375px) {
  :root {
    --metthez-font-size-h1: 2.3rem;
    --metthez-font-size-p: 1.0625rem;
    --metthez-font-size-a: 1rem;
  }
}
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
}
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  :root {
    --metthez-font-size-h1: 2.6rem;
    --metthez-font-size-p: 1.1rem;
    --metthez-font-size-a: 1.1rem;
  }
}
/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
}
/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
  :root {
    --metthez-font-size-h1: 3rem;
    --metthez-font-size-p: 1.2rem;
    --metthez-font-size-a: 1.2rem;
  }
}
@media (min-width: 1920px) {
  :root {
    --metthez-font-size-h1: 4.375rem;
    --metthez-font-size-p: 1.2rem; /* 1.4rem */
    --metthez-font-size-a: 1.875rem;
  }
}



/* ========= */
/* TYPOGRAFIE */
/* ========= */

.display-5 {
  font-size: var(--metthez-font-size-h1);
}

h2 {
  margin-top: 3rem;
  margin-bottom: 1rem;
}

a,
a:link,
a:visited {
  color: var(--bs-dark);
}
a.primary,
a.primary:link,
a.primary:visited {
  font-size: var(--metthez-font-size-a);
  color: var(--metthez-orange);
}
a:hover,
a:active,
a.primary:hover,
a.primary:active {
  color: var(--metthez-orange-dark);
}

a,
a * {
  transition: none !important;
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
}
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
}
/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
}
/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
}





/* ========= */
/* BODY */
/* ========= */

body {
  background-color: var(--metthez-blau);
  font-size: var(--metthez-font-size-p);
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
}
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
}
/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
}
/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
}




/* ========= */
/* BUTTONS */
/* ========= */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
}
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
}
/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
}
/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
}



/* ========= */
/* FARBEN */
/* ========= */


/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
}
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
}
/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
}
/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
}




/* ========= */
/* TRANSITION */
/* ========= */

a * {
  transition: all 0.5s ease;
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
}
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
}
/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
}
/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
}



/* ========= */
/* LOGO */
/* ========= */

.container-logo {
  padding: 1.5rem;
}
.logo {
  width: 10rem;
  max-width: 350px;
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
}
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .container-logo {
    padding: 3rem;
  }
  .logo {
    width: 12.5rem;
  }
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
}
/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .container-logo {
    padding-top: 0rem;
    padding-right: 0rem;
  }
  .logo {
    width: 100%;
  }
}
/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
}
@media (min-width: 1920px) {
}







/* ========= */
/* ALERT */
/* ========= */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
}
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
}
/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
}
/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
}








/* ========= */
/* NAVBAR */
/* ========= */

/*
.navbar-brand {
  width: 15rem;
}
*/

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
}
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
}
/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
}
/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
  /*
  .navbar-brand {
    position: absolute;
    top: 0;
    right: 0;
    width: 35rem;
  }
  */
}





/* ========= */
/* CONTAINER */
/* ========= */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
}
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
}
/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
}
/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
}




/* ========= */
/* MEHRSPALTIG */
/* ========= */

.text-col-1 {
  column-count: 1;
}
.text-col-2 {
  column-count: 2;
}
.text-col-3 {
  column-count: 3;
}
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  .text-col-sm-1 {
    column-count: 1;
  }
  .text-col-sm-2 {
    column-count: 2;
  }
  .text-col-sm-3 {
    column-count: 3;
  }
}
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .text-col-md-1 {
    column-count: 1;
  }
  .text-col-md-2 {
    column-count: 2;
  }
  .text-col-md-3 {
    column-count: 3;
  }
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .text-col-lg-1 {
    column-count: 1;
  }
  .text-col-lg-2 {
    column-count: 2;
  }
  .text-col-lg-3 {
    column-count: 3;
  }
}
/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .text-col-xl-1 {
    column-count: 1;
  }
  .text-col-xl-2 {
    column-count: 2;
  }
  .text-col-xl-3 {
    column-count: 3;
  }
}
/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
  .text-col-xxl-1 {
    column-count: 1;
  }
  .text-col-xxl-2 {
    column-count: 2;
  }
  .text-col-xxl-3 {
    column-count: 3;
  }
}






/* ========= */
/* SHADOW */
/* ========= */

/*
.shadow-sm {
  box-shadow: 0 .125rem .25rem rgba(0,0,0,.075) !important;
}
.shadow {
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.05) !important;
}
.shadow-lg {
  box-shadow: 0 1rem 3rem rgba(0,0,0,.075) !important;
}
*/
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
}
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
}
/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
}
/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
}



/* ========= */
/* SECTION */
/* ========= */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
}
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
}
/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
}
/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
}





/* ========= */
/* CARDS */
/* ========= */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
}
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
}
/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
}
/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
}





/* ========= */
/* TAGS */
/* ========= */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
}
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
}
/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
}
/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
}


/* ========= */
/* ICONS */
/* ========= */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
}
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
}
/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
}
/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
}







/* ========= */
/* GRID */
/* ========= */


.grid-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas:
    "header"
    "bild"
    "text"
    "footer";
}
.grid-item {
  /* border: 1px solid red !important; */
  height: 100%;
}
.grid-item-a {
  grid-area: header;
}
.grid-item-b {
  grid-area: bild;
  height: 100%;
  overflow-y: hidden;
}
.grid-item-c {
  grid-area: text;
}
.grid-item-d {
  grid-area: footer;
  padding: 3rem;
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
}
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .grid-container {
    grid-template-columns: 3fr 3fr 3fr auto;
    grid-template-rows: auto;
    grid-template-areas:
      "header header header header"
      "bild bild text text"
      ". . . footer";
    position: absolute;
    left: 0rem;
    top: 0rem;
    right: 0rem;
    bottom: 0rem;
  }
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .grid-container {
    bottom: inherit;
  }
}
/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .grid-container {
    grid-template-columns: 4fr 3fr auto;
    grid-template-rows: 1fr 1fr;
    grid-template-areas:
      "bild text header"
      "bild text footer";
    left: 3rem;
    top: 3rem;
    right: 3rem;
    bottom: 3rem;
  }
  .grid-item-a {
    padding-left: 0rem;
  }
  .grid-item-d {
    padding: 0rem;
    padding-left: 16%;
  }
  .grid-item-a,
  .grid-item-d {
    width: 250px;
    min-width: 250px;
  }
}
/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
  .grid-container {
    grid-template-columns: 3fr 3fr auto;
    left: 4.5rem;
    top: 4.5rem;
    right: 4.5rem;
    bottom: 4.5rem;
  }
  .grid-item-a,
  .grid-item-d {
    width: 320px;
    min-width: 320px;
    margin-left: 1rem;
  }
}

@media (min-width: 1920px) {
  .grid-container {
    left: 6rem;
    top: 6rem;
    right: 6rem;
    bottom: 6rem;
  }
  .grid-item-a,
  .grid-item-d {
    margin-left: 9rem;
  }
}
@media (min-width: 2560px) {
  .grid-container {
    max-width: 2560px;
    max-height: 1440px;
    margin: auto;
  }
  .grid-item-a,
  .grid-item-d {
    margin-left: 20rem;
  }
}





/* ========= */
/* STARTBEREICH */
/* ========= */

.startbereich {
  max-height: 100%;
  overflow: hidden;
}


/* ========= */
/* RECHTLICHES */
/* ========= */

/*
.rechtliches {
  padding-left: 3rem;
}
*/