/* =========================
   Studio Kraut – Kanzlei IT
   ========================= */


/* RESET */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


/* BASIS */

body {

  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  background-color: #efeeeb;

  color: #222;

  line-height: 1.7;

  -webkit-font-smoothing: antialiased;

}


/* CONTAINER */

.container {

  max-width: 1100px;

  margin: 1.5rem auto 4rem auto;

  padding: 3rem;

}


/* TYPOGRAFIE */

h1 {

  font-size: 5.5rem;

  line-height: 0.95;

  letter-spacing: -2px;

  font-weight: 800;

  color: #1f3147;

  margin-bottom: 2rem;

}


h2 {

  font-size: 2rem;

  margin-bottom: 1.2rem;

  color: #222;

}


.subtitle {

  font-size: 2rem;

  color: #444;

  margin-bottom: 2rem;

}


.trustline {

  font-size: 1.2rem;

  font-weight: 700;

  color: #113c7a;

  margin-bottom: 4rem;

}


p {

  font-size: 1.32rem;

  color: #333;

  margin-bottom: 2rem;

  max-width: 950px;

}


strong {

  font-weight: 700;

}


/* KACHEL GRID */

.grid {

  display: grid;

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

  gap: 2rem;

  margin-top: 4rem;

}


/* KACHELN */

.feld {

  height: 260px;

  border-radius: 22px;

  display: flex;

  align-items: center;

  justify-content: center;

  text-align: center;

  text-decoration: none;

  color: white;

  font-size: 2rem;

  font-weight: 700;

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;

}


.feld:hover {

  transform: translateY(-3px);

  box-shadow: 0 12px 30px rgba(0,0,0,0.12);

}


/* FARBEN */

.rot {
  background: #e74c3c;
}

.blau {
  background: #3498db;
}

.oliv {
  background: #87996a;
}

.lila {
  background: #7b5ca5;
}

.gelb {
  background: #d7a928;
}

.grau {
  background: #7d7d7d;
}

.orange {
  background: #e67e22;
}

.dunkelblau {
  background: #24364d;
}

.tuerkis {
  background: #2ba6a6;
}


/* UNTERSEITEN */

.page {

  position: relative;

}


.tile-link {

  position: absolute;

  top: 0;

  right: 0;

  text-align: center;

}


.mini-feld {

  width: 98px;

  height: 98px;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 0.7rem;

  border-radius: 12px;

  text-decoration: none;

  color: white;

  font-size: 1rem;

  font-weight: 700;
	
	letter-spacing: 0.03em;

}


.back-small {

  margin-top: 0.7rem;

  font-size: 0.9rem;

  color: #777;

}


.back-small:hover {

  text-decoration: underline;

}


/* LISTEN */

ul {

  padding-left: 1.2rem;

  margin-bottom: 2rem;

}


li {

  margin-bottom: 0.7rem;

  font-size: 1.2rem;

}


/* TRUST BOX */

.trust-box {

  margin-top: 4rem;

  padding: 2rem;

  border-left: 5px solid #24364d;

  background: #f8f8f8;

  border-radius: 10px;

  font-size: 1.2rem;

  font-weight: 600;

}


/* KONTAKT */

.contact-box {

  margin-top: 4rem;

  padding-top: 2rem;

  border-top: 1px solid #ddd;

  font-size: 1.1rem;

  line-height: 1.9;

  color: #444;

}


/* LINKS */

a {

  color: inherit;

}


/* RESPONSIVE */

@media (max-width: 1000px) {

  h1 {

    font-size: 4rem;

  }

}


@media (max-width: 768px) {

  .container {

    padding: 2rem;

    margin: 1rem;

  }

  h1 {

    font-size: 2.8rem;

  }

  .subtitle {

    font-size: 1.4rem;

  }

  p {

    font-size: 1.15rem;

  }

  li {

    font-size: 1.1rem;

  }

  .grid {

    grid-template-columns: 1fr;

  }

  .feld {

    height: 180px;

    font-size: 1.6rem;

  }

  .tile-link {

    position: relative;

    margin-bottom: 3rem;

  }

  .mini-feld {

    width: 84px;

    height: 84px;

    font-size: 0.85rem;

  }

}