/* ========= Basis ========= */
* {
  box-sizing: border-box;
}

:root {
  --anchor-offset: 7rem;
}

@font-face {
  font-family: 'OpenSans Regular';
  src        : url('../fonts/open-sans-regular.woff2') format('woff2');
  font-weight: normal;
  font-style : normal;
}

@font-face {
  font-family: 'OpenSans Bold';
  src        : url('../fonts/open-sans-bold.woff2') format('woff2');
  font-weight: normal;
  font-style : normal;
}

@font-face {
  font-family: 'sweetandsalty';
  src        : url('../fonts/sweetandsalty.woff') format('woff');
  font-weight: normal;
  font-style : normal;
}

body {
  margin          : 0;
  font-family     : OpenSans Regular, system-ui, Arial, sans-serif;
  background-color: #f9fafb;

  /*background-image:
    linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)),
    url('maus_hintergrund.png');
  background-size: auto;
  background-repeat: no-repeat;
  background-attachment: fixed; */

  /* color: #262a44; */
  color      : #262a44;
  line-height: 1.6;
  font-size  : 16px;

  scroll-snap-type: block;

  /* Footer am unteren Rand fixieren */
  display       : flex;
  flex-direction: column;
  min-height    : 100vh;
  /* Volle Höhe des Bildschirms */
}

main {
  flex: 1;
}

a {
  color: #5f69aa;
}

a:focus,
button:focus,
input:focus,
textarea:focus {
  outline       : 3px solid #5f69aa;
  outline-offset: 2px;
}

.link-white {
  color: #d1d5db;
}

.link-white:hover,
.linkwhite:hover {
  outline       : 3px solid #fff;
  outline-offset: 2px;
}

.link-white:focus,
.linkwhite:focus {
  text-decoration: none;
  outline        : none;
}

/* ========= Layout ========= */
.container {
  max-width: 1200px;
  margin   : auto;
  padding  : 1rem 2rem;
}

section {
  padding: 2rem 0;
}

section[id],
h1[id],
h2[id],
h3[id],
h4[id],
h5[id],
h6[id] {
  scroll-margin-top: var(--anchor-offset);
}

h1,
h2,
h3 {
  line-height: 1.3;
  font-family: OpenSans Bold, system-ui, Arial, sans-serif;

}

.lighter {
  color: #5f69aa;
}

.white {
  color       : #fff;
  /*text-align:center;*/
}

.salty {
  font-family: sweetandsalty, system-ui, Arial, sans-serif;
  font-weight: 600;
  font-size  : xx-large;
  /* color   : #5f69aa; */
}

/* ========= Header ========= */
header {
  background: #ffffff;
  position  : sticky;
  top       : 0;
  z-index   : 100;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.header-inner {
  display        : flex;
  flex-wrap      : wrap;
  align-items    : center;
  justify-content: space-between;
  padding        : 1rem 0;
  position       : relative;
}

.sr-only {
  position   : absolute;
  width      : 1px;
  height     : 1px;
  padding    : 0;
  margin     : -1px;
  overflow   : hidden;
  clip       : rect(0, 0, 0, 0);
  white-space: nowrap;
  border     : 0;
}

.nav-toggle {
  display      : none;
  appearance   : none;
  border       : 1px solid #cbd5e1;
  background   : #ffffff;
  border-radius: 0.6rem;
  padding      : 0.55rem 0.6rem;
  cursor       : pointer;
}

.nav-toggle__bar {
  display      : block;
  width        : 22px;
  height       : 2px;
  background   : #374151;
  border-radius: 2px;
}

.nav-toggle__bar+.nav-toggle__bar {
  margin-top: 5px;
}

nav {
  display  : flex;
  flex-wrap: wrap;
  gap      : 1rem;
}

nav.main-nav {
  padding: 0.5rem 0;
}

nav a {
  text-decoration: none;
  font-size      : 0.95rem;
  /* padding     : 0.5rem 0.75rem; */
  /* padding-left: 10px; */
  padding        : 0.5rem 0 0.5rem 0.5rem;
  border-radius  : 0.375rem;
  transition     : background-color 0.2s;
}

nav a:active {
  font-weight: bold;
}

nav a:hover {
  /* background-color: #f3f4f6;*/
  font-weight: bold;
}

/* ========= Hero ========= */
.hero {
  /*background: linear-gradient(90deg, #2563eb, #4f46e5);*/
  /*background: linear-gradient(90deg, #5f69aa, #bdc1df);*/
  background-image:
    /* linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), */
    url('/bilder/header.jpg');
  background-size         : cover;
  background-repeat       : no-repeat;
  /* background-attachment: fixed; */
  height                  : 25vw;

  width: 100%;

  color: #262a44;
}

.hero-plain {
  background-image:
    /* linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), */
    url('/bilder/hintergrund_plain.png');
  background-size  : cover;
  background-repeat: no-repeat;
  max-height       : 100px;
  width            : 100%;
  color            : #262a44;
}

.hero-grid {
  display: grid;
  gap    : 3rem;
}

.hero h1 {
  font-size: 2.2rem;
}

.hero p {
  max-width: 40rem;
}

.button {
  display        : inline-block;
  background     : #ffffff;
  color          : #5f69aa;
  padding        : 0.9rem 1.4rem;
  border-radius  : 0.75rem;
  font-weight    : 600;
  text-decoration: none;
}

.button-blau {
  display        : inline-block;
  background     : #5f69aa;
  color          : #ffffff;
  padding        : 0.9rem 1.4rem;
  border-radius  : 0.75rem;
  font-weight    : 600;
  text-decoration: none;
}

.hero img {
  width        : 100%;
  height       : auto;
  border-radius: 1rem;
}

/* ========= Karten ========= */
.grid-3 {
  display: grid;
  gap    : 2rem;
}

.grid-2 {
  display: grid;
  gap    : 2rem;
}

.grid-1 {
  display: grid;
  gap    : 2rem;
}

.grid-4 {
  display              : grid;
  gap                  : 2rem;
  grid-template-columns: repeat(2, 1fr);
}

.card {
  background   : #fff;
  padding      : 2rem;
  border-radius: 1rem;
  box-shadow   : 0 4px 10px rgba(0, 0, 0, 0.06);
  aspect-ratio : 3/2;
  text-shadow  : 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff;

}

.card11 {
  background-image:
    /* linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)),*/
    url('/bilder/infos_quadrat.jpg');
  background-size  : cover;
  background-repeat: no-repeat;
  aspect-ratio     : 1/1;
  /*overflow       : hidden; */
}

.card22 {
  background-image:
    /* linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)),*/
    url('/bilder/videos_quadrat.jpg');
  background-size  : cover;
  background-repeat: no-repeat;
  aspect-ratio     : 1/1;

}

.card33 {
  background-image:
    /* linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), */
    url('/bilder/coaching_quadrat.jpg');
  background-size  : cover;
  background-repeat: no-repeat;
  aspect-ratio     : 1/1;
}

.card44 {
  background-image:
    /* linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), */
    url('/bilder/spenden_quadrat.jpg');
  background-size  : cover;
  background-repeat: no-repeat;
  aspect-ratio     : 1/1;
}

.card55 {
  background-image:
    /*linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), */
    url('/bilder/fachkraefte.jpg');
  padding          : 2rem;
  border-radius    : 1rem;
  box-shadow       : 0 4px 10px rgba(0, 0, 0, 0.06);
  background-size  : cover;
  background-repeat: no-repeat;
  aspect-ratio     : 3/2;

}

.card66 {
  background-image:
    /* linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), */
    url('/bilder/selbst_unterrichten.jpg');
  padding          : 2rem;
  border-radius    : 1rem;
  box-shadow       : 0 4px 10px rgba(0, 0, 0, 0.06);
  background-size  : cover;
  background-repeat: no-repeat;
  aspect-ratio     : 3/2;
}

.card11 p,
.card22 p,
.card33 p,
.card44 p,
.card55 p,
.card66 p {
  font-weight: bold;

}

.cardimg {
  border-radius        : 300px;
  -moz-border-radius   : 300px;
  -webkit-border-radius: 300px;
}

/* ========= Highlight ========= */
.gray {
  /* background: #f3f4f6; */
  /*background: #bdc1df;*/

  background: #8c92c8;
}

.light {
  /*background:#e6e8fc;*/
  background: #e9eaf7;
}

ul {
  padding-left: 1.2rem;
}

li {
  margin-bottom: 0.75rem;
}

/* ========= Kontakt ========= */
form label {
  display      : block;
  font-weight  : 600;
  margin-bottom: 0.3rem;
}

form input,
form textarea {
  /* width: 100%; */
  padding      : 0.8rem;
  border-radius: 0.6rem;
  border       : 1px solid #cbd5e1;
  font-size    : 1rem;
}

.kontaktinput {
  width: 100%;
}

form button {
  background   : #5f69aa;
  color        : #ffffff;
  border       : none;
  padding      : 0.9rem;
  border-radius: 0.6rem;
  font-size    : 1rem;
  cursor       : pointer;
}

.grid-gallery {
  display              : grid;
  width                : 100%;
  grid-template-columns: auto;
  margin               : auto;
}

.gallery-item {
  padding   : 1em;
  text-align: center;
  margin    : 0 auto;
}

.gallery-item img {
  width: 100%;
}

/* ========= Footer ========= */
footer {
  /*background: #111827; */
  background: #424976;
  /*color   : #d1d5db;*/
  color     : #fff;

  padding  : 3rem 1.5rem;
  font-size: 0.9rem;
}

.footer-grid {
  display: grid;
  gap    : 2rem;
}

footer a {
  /*color: #d1d5db; */
  color: #fff;
}

/* ======== Text-Slider ======== */

.slideshow {
  position   : relative;
  width      : 100%;
  /* overflow: hidden; */
}

.slide {
  position       : absolute;
  width          : 100%;
  height         : 100%;
  display        : flex;
  justify-content: center;
  align-items    : center;
  opacity        : 0;
  pointer-events : none;
}

.slide img {
  width     : 100%;
  object-fit: contain;
}

.slide.active {
  opacity       : 1;
  pointer-events: auto;
}

/* ========= Responsive ========= */

/* Mobile (bis 768px) */
@media (max-width: 767px) {
  :root {
    --anchor-offset: 10rem;
  }

  .nav-toggle {
    display        : inline-flex;
    flex-direction : column;
    justify-content: center;
    gap            : 0;
  }

  nav.main-nav {
    display       : none;
    position      : absolute;
    top           : calc(100% + 0.5rem);
    left          : 0;
    right         : 0;
    background    : #ffffff;
    border        : 1px solid #e5e7eb;
    border-radius : 0.75rem;
    padding       : 0.5rem;
    box-shadow    : 0 10px 24px rgba(0, 0, 0, 0.12);
    z-index       : 150;
    flex-direction: column;
    gap           : 0.25rem;
  }

  .hero {
    background-image:
      /* linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), */
      url('/bilder/header_mobil.jpg');
    background-size  : cover;
    background-repeat: no-repeat;
    height           : 50vw;
    width            : 100%;

  }

  nav.main-nav.is-open {
    display: flex;
  }

  nav.main-nav a {
    display  : block;
    width    : 100%;
    padding  : 0.75rem 0.75rem;
    font-size: 1rem;
  }

  .header-inner {
    padding: 0.75rem 1rem;
  }

  div.maus_spenden {
    display: none;
  }
}

@media (min-width: 768px) {

  .hero-grid {
    grid-template-columns: 1fr 1fr;
    align-items          : center;
  }

  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-grid {
    grid-template-columns: 2fr 1fr 1fr;
  }

  .hero h1 {
    font-size: 2.8rem;
  }

  .grid-gallery {
    display              : grid;
    width                : 100%;
    grid-template-columns: auto auto auto;
    margin               : auto;
  }

  .gallery-item {
    padding   : 1em;
    text-align: center;
    margin    : 0 auto;
  }

  .grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }

}