/* Mathe Lab – nachgebaut nach dem Mobirise-Design (Stand März 2025), ohne Framework. */

@font-face {
  font-family: "Jost";
  src: url("fonts/jost-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --text: #232323;
  --link: #6592e6;
  --link-hover: #205ac5;
  --panel: #fafafa;
  --footer: #232323;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: "Jost", sans-serif;
  font-size: 1.2rem;
  line-height: 1.5;
  color: var(--text);
  background: #fff;
}

img { display: block; width: 100%; height: auto; }

a { color: var(--link); text-decoration: none; }
a:hover, a:focus { color: var(--link-hover); text-decoration: underline; }

h1, h2 { line-height: 1.1; margin: 0 0 1.5rem; font-weight: 700; }
h1 { font-size: 4.6rem; }
h2 { font-size: 3rem; }
p { margin: 0 0 1.5rem; }

.container, .narrow { margin: 0 auto; padding: 0 1rem; max-width: 1140px; }
.narrow { max-width: 887px; }

/* Kopfbereich: Zahlen-Hintergrund unter 80 % Weiss */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem 1rem;
  text-align: center;
  background: url("images/header-zahlen.jpg") center / cover no-repeat;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.8);
}
.hero-inner { position: relative; max-width: 760px; }
.hero h1 { margin-bottom: 3rem; }
.hero .claim { font-size: 3rem; line-height: 1.1; margin-bottom: 3rem; }
.hero .contact { margin: 4rem 0 0; }

/* Hinweis zwischen zwei feinen Linien (Kopfbereich und Einzelcoaching) */
.notice {
  display: inline-block;
  margin: 0;
  padding: 0.75rem 0.25rem;
  border-top: 1px solid rgba(35, 35, 35, 0.35);
  border-bottom: 1px solid rgba(35, 35, 35, 0.35);
  font-weight: 500;
}

/* Parallax-Effekt wie früher, nur auf grossen Bildschirmen mit Maus */
@media (min-width: 992px) and (hover: hover) {
  .hero { background-attachment: fixed; }
}

/* Textabschnitte */
.text-block { padding: 2rem 0; }
.text-block.first { padding: 4rem 0 0; }

.goal { text-align: center; }

/* Wer ich bin */
.about { padding: 2rem 0; }
.about .panel { background: var(--panel); display: flex; flex-direction: column-reverse; gap: 2rem; padding: 1rem; }
.about .panel-text p { font-size: 1.1rem; }

/* Einzelcoaching */
.offer { padding: 2rem 0; background: var(--panel); }
.offer .card { background: #fff; border-radius: 4px; display: flex; flex-direction: column; }
.offer .card-text, .offer .price { padding: 0 1rem; }
.offer .card-text { padding-top: 1.5rem; font-size: 1.1rem; }
.offer .card-text p { margin-bottom: 1rem; }
.offer .price { font-size: 3rem; line-height: 1.1; white-space: nowrap; }
.offer .card .notice { display: block; margin: 0 1rem 1.5rem; text-align: center; }

/* Räumlichkeiten */
.rooms { padding: 6rem 0; }
.rooms .container { display: flex; flex-direction: column; gap: 1rem; }
.rooms figure { margin: 0; }
.rooms figcaption { font-size: 1.1rem; text-align: center; margin-top: 0.5rem; }

footer {
  background: var(--footer);
  color: #fff;
  text-align: center;
  padding: 30px 1rem;
}
footer p { margin: 0; }

@media (min-width: 768px) {
  .about .panel { padding: 2rem; }
  .offer .card { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .offer .card img { width: 33.333%; flex-shrink: 0; }
  .offer .card-text { flex: 1; padding: 1.5rem 2rem; }
  .offer .price { padding: 0 2rem 0 0; }
  /* Hinweis als eigene Zeile über die ganze Kartenbreite */
  .offer .card .notice { flex-basis: 100%; margin: 2rem 2rem 2rem; }
}

@media (min-width: 992px) {
  .about .panel { flex-direction: row; align-items: center; padding: 5rem 3rem; }
  .about .panel-text { flex: 1; padding-right: 2rem; }
  .about .panel img { width: 50%; }
  .offer .card-text { padding: 2rem 4rem 2rem 2rem; }
  .rooms .container { flex-direction: row-reverse; align-items: center; gap: 0; }
  .rooms figure { width: 50%; flex-shrink: 0; }
  .rooms-text { padding: 2rem; }
}

/* Schrift auf kleinen Bildschirmen verkleinern (wie bei Mobirise);
   lange Wörter wie «Mathematikkompetenz» automatisch trennen (Sprache aus lang="de-CH") */
@media (max-width: 768px) {
  body { font-size: 1.07rem; -webkit-hyphens: auto; hyphens: auto; }
  /* Titel, Kopfbereich und Hinweise nie trennen */
  h1, h2, .hero, .notice { -webkit-hyphens: none; hyphens: none; }
  h1 { font-size: calc(2.26rem + 2.34 * ((100vw - 20rem) / 28)); }
  h2, .hero .claim, .offer .price { font-size: calc(1.7rem + 1.3 * ((100vw - 20rem) / 28)); line-height: 1.3; }
}