/* Mal Was Anderes – Stylesheet
   Schriften liegen lokal im Ordner /fonts (keine Verbindung zu Google).
   Desktop: exakter Nachbau der Canva-Vorlage (1440 px breit), skaliert mit der Fensterbreite.
   Handy/Tablet: alles untereinander. */

@font-face {
  font-family: "Didact Gothic";
  src: url("fonts/DidactGothic-Regular.woff") format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Caveat Brush";
  src: url("fonts/CaveatBrush-Regular.woff") format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  --pink: #febbfc;
  --blau: #4e5ff4;
  --rot: #ff0000;
  --text: "Didact Gothic", system-ui, sans-serif;
  --hand: "Caveat Brush", "Comic Sans MS", cursive;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--pink);
  color: var(--blau);
  font-family: var(--text);
  font-size: 16px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  font-kerning: none;           /* wie in Canva */
  font-feature-settings: "kern" 0;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; }
a:focus-visible { outline: 3px solid var(--rot); outline-offset: 3px; border-radius: 4px; }
p, h2, h3, ul { margin: 0; padding: 0; font-weight: 400; }
ul { list-style: none; }

.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;
}
.rot  { color: var(--rot); }
.blau { color: var(--blau); }

.seite {
  max-width: 1920px;
  margin: 0 auto;
  container-type: inline-size;
  container-name: seite;
}

/* ---------- Titel ---------- */
.kopf { position: relative; }
.kopf__bild { width: 100%; }
.kopf__logo {
  position: absolute;
  left: 71.507%;      /* 1029.7 / 1440 */
  top: 77.244%;       /* 241 / 312 */
  width: 13.194%;     /* 190 / 1440 */
  z-index: 2;
}

/* ---------- Herzen ---------- */
.herz { display: inline-block; fill: var(--blau); }

/* ---------- Links auf Bildern ---------- */
.bild-link { display: block; transition: transform .2s ease; }
.bild-link:hover { transform: scale(1.03); text-decoration: none; }

/* =====================================================================
   HANDY / TABLET (Standard)
   ===================================================================== */
.leinwand { padding: 0 20px; max-width: 620px; margin: 0 auto; }
br.d { display: none; }

.wir { width: 78%; max-width: 360px; margin: 64px auto 0; }
.intro { margin-top: 24px; }
.intro p { margin-bottom: 1.4em; }
.intro__hallo { font-family: var(--hand); font-size: 28px; line-height: 1.2; margin-bottom: .3em !important; }
.intro__motto { font-family: var(--hand); font-size: 23px; line-height: 1.25; text-align: center; }
.herz--text { width: 15px; height: 14px; margin-left: 3px; vertical-align: -2px; }

.block { margin-top: 72px; }
.titel img { width: 100%; }
.unterzeile { font-family: var(--hand); font-size: 20px; line-height: 1.25; margin: 10px 0 20px; }
.raster { display: grid; gap: 28px; }
.karte .bild-link { width: 100%; }
.beschriftung { font-family: var(--hand); font-size: 23px; line-height: 1.1; text-align: center; margin-top: 8px; }
.herz--buch { width: 19px; height: 17px; margin: 0 4px; vertical-align: -3px; }

.raster--buecher { grid-template-columns: 1fr 1fr; gap: 32px 16px; }
.buch .bild-link { width: 86%; margin: 0 auto; }
.raster--buecher .beschriftung { font-size: 19px; }

.cta { display: block; width: 86%; max-width: 420px; margin: 36px auto 0; }
.cta--amazon { width: 62%; max-width: 300px; }
.mail { font-family: var(--hand); font-size: 20px; line-height: 1.3; text-align: center; margin-top: 18px; }
.mail a { white-space: nowrap; }

.impressum { color: var(--rot); display: flex; flex-direction: column; }
.impressum .titel img { width: auto; height: 32px; }
.impressum__angaben { font-family: var(--hand); font-size: 20px; letter-spacing: .08em; margin-top: 6px; }
.impressum h3 { font-family: var(--hand); font-size: 20px; line-height: 1.2; margin: 26px 0 2px; }
.impressum__text p { overflow-wrap: anywhere; }
.qr { order: 3; width: 130px; margin-top: 32px; }

.fuss {
  margin-top: 72px;
  padding: 18px 16px 30px;
  border-top: 2px dashed var(--rot);
  text-align: center;
  font-family: var(--hand);
  font-size: 20px;
  color: var(--rot);
}
.fuss a { margin: 0 12px; }

/* Tablet: drei Spalten */
@container seite (min-width: 700px) and (max-width: 1079.98px) {
  .leinwand { max-width: 980px; padding: 0 32px; }
  .wir { max-width: 380px; }
  .intro { max-width: 620px; margin-left: auto; margin-right: auto; }
  .raster, .raster--buecher { grid-template-columns: repeat(3, 1fr); gap: 32px 20px; }
  .titel img { width: auto; max-width: 100%; }
}

/* =====================================================================
   DESKTOP: exakter Nachbau der Vorlage
   Alle Maße in Design-Pixeln (Vorlage 1440 px breit) × --u
   ===================================================================== */
@container seite (min-width: 1080px) {
  .leinwand {
    --u: calc(100cqw / 1440);
    position: relative;
    max-width: none;
    padding: 0;
    height: calc(var(--u) * (3650 - 312));
  }
  .leinwand .el {
    position: absolute;
    left: calc(var(--u) * var(--l));
    top: calc(var(--u) * (var(--t) - 312));
    width: calc(var(--u) * var(--w));
    margin: 0;
  }
  /* Textblöcke: Ausgleich Canva-Textbox → CSS-Grundlinie */
  .leinwand .el:is(.intro, .unterzeile, .beschriftung, .mail, .impressum__text) {
    top: calc(var(--u) * (var(--t) - 312 + 5.3));
  }
  .block { margin: 0; }
  br.d { display: inline; }
  .titel img, .karte .bild-link { width: 100%; }
  .buch .bild-link { margin: 0; }
  .wir { max-width: none; }

  /* Intro */
  .intro { font-size: calc(var(--u) * 20); line-height: calc(var(--u) * 22); white-space: nowrap; }
  .intro p { margin: 0 0 calc(var(--u) * 22); }
  .intro__hallo {
    font-size: calc(var(--u) * 32); line-height: calc(var(--u) * 40);
    margin: 0 0 calc(var(--u) * 6) !important;
    
  }
  .intro__motto {
    font-size: calc(var(--u) * 26.7); line-height: calc(var(--u) * 30);
    text-align: left; padding-left: calc(var(--u) * var(--motto-x, 39));
    margin: calc(var(--u) * 28) 0 calc(var(--u) * 21.5) !important;
    
  }
  .herz--text {
    width: calc(var(--u) * 17); height: calc(var(--u) * 15.7);
    margin-left: calc(var(--u) * 3); vertical-align: calc(var(--u) * -5.6);
  }

  /* Abschnitte */
  .unterzeile {
    font-size: calc(var(--u) * 23.3); line-height: calc(var(--u) * 30);
    white-space: nowrap;
  }
  #malbuecher .unterzeile { letter-spacing: calc(var(--u) * 1.14); }
  .raster { display: block; }
  .beschriftung {
    font-size: calc(var(--u) * 26.7); line-height: calc(var(--u) * 30);
    margin-top: calc(var(--u) * 6.8); white-space: nowrap;
  }
  .raster--buecher .beschriftung {
    font-size: calc(var(--u) * 26.7); line-height: calc(var(--u) * 26.6);
    margin: 0;
  }
  .herz--buch {
    width: calc(var(--u) * 22); height: calc(var(--u) * 19.3);
    margin: 0 calc(var(--u) * 3.5); vertical-align: calc(var(--u) * -7.6);
  }
  .cta { max-width: none; }
  .mail {
    font-size: calc(var(--u) * 23.3); line-height: calc(var(--u) * 30);
    letter-spacing: calc(var(--u) * 0.2);
  }

  /* Impressum */
  .impressum { display: block; }
  .impressum .titel img { height: auto; width: 100%; }
  .impressum__text { font-size: calc(var(--u) * 20); line-height: calc(var(--u) * 24); }
  .impressum__angaben {
    font-size: calc(var(--u) * 23.3); line-height: calc(var(--u) * 24);
    margin: 0 0 calc(var(--u) * 29); letter-spacing: calc(var(--u) * 1.2);
  }
  .impressum h3 {
    font-size: calc(var(--u) * 23.3); line-height: calc(var(--u) * 24);
    margin: 0 0 calc(var(--u) * 1.8);
  }
  .impressum__text p + h3 { margin-top: calc(var(--u) * 25.7); }
  .qr { margin: 0; }

  .fuss {
    margin-top: 0;
    font-size: calc(100cqw / 1440 * 21);
    padding: calc(100cqw / 1440 * 18) 16px calc(100cqw / 1440 * 28);
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .bild-link { transition: none; }
  .bild-link:hover { transform: none; }
}

/* =====================================================================
   DATENSCHUTZ-SEITE (gleiche Schriften wie das Impressum)
   ===================================================================== */
.text-seite {
  max-width: 860px;
  margin: 0 auto;
  padding: 48px 20px 64px;
  color: var(--rot);
  font-family: var(--text);
  font-size: 17px;
  line-height: 1.5;
  overflow-wrap: break-word;
  hyphens: auto;
}
.text-seite h1, .text-seite h2, .text-seite h3, .text-seite h4 {
  font-family: var(--hand);
  font-weight: 400;
  color: var(--rot);
  line-height: 1.2;
}
.text-seite h1 { font-size: 40px; margin: 12px 0 24px; }
.text-seite h2 { font-size: 28px; margin: 2em 0 .5em; }
.text-seite h3 { font-size: 23px; margin: 1.6em 0 .3em; }
.text-seite h4 { font-size: 20px; margin: 1.2em 0 .25em; }
.text-seite p { margin: 0 0 .9em; }
.text-seite ul { list-style: disc; padding-left: 1.2em; margin: 0 0 .9em; }
.text-seite li { margin-bottom: .4em; }
.text-seite a { text-decoration: underline; text-underline-offset: .15em; word-break: break-word; }
.zurueck { display: inline-block; font-family: var(--hand); font-size: 21px; text-decoration: none !important; }
.zusatz { margin-top: 48px; padding-top: 24px; border-top: 2px dashed var(--rot); }