/* Rätselbund – gemeinsame Gestaltung aller Seiten (seit 2026-10-29, Fassung 12).
   Caprasimo für Überschriften wie auf den Covern, Poppins für Text.
   Die Startseite bringt zusätzlich eigene Regeln in index.html mit. */

@font-face{font-family:'Poppins';font-weight:400;font-display:swap;src:url('fonts/Poppins-Regular.ttf') format('truetype')}
@font-face{font-family:'Poppins';font-weight:700;font-display:swap;src:url('fonts/Poppins-Bold.ttf') format('truetype')}
@font-face{font-family:'Caprasimo';font-weight:400;font-display:swap;src:url('fonts/Caprasimo-Regular.ttf') format('truetype')}

:root{
  --creme:#FAF6EE;
  --tinte:#1C1A17;
  --gruen:#2F7D4F;
  --gruen-tief:#276B43;
  --gruen-hell:#E8F1EA;
  --grau:#5F5B53;
  --linie:#E7E0D2;
  --gelb:#FFD43B;
  --schatten:0 1px 2px rgba(28,26,23,.18),0 6px 14px -6px rgba(28,26,23,.30);
  --titel:'Caprasimo',Georgia,serif;
  --text:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
body{
  background:var(--creme);color:var(--tinte);
  font-family:var(--text);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  padding:0 20px 40px;
}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--gruen);outline-offset:3px;border-radius:8px}
img{display:block}

/* Breite: Kopfleiste so breit wie die Startseite, Text in einer ruhigen Spalte */
.rahmen{max-width:1120px;margin:0 auto}
.seite{max-width:680px;margin:0 auto}

/* ---------- Kopfleiste ---------- */
.leiste{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 0}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--titel);font-size:22px;text-decoration:none}
.logo i{
  width:34px;height:34px;border-radius:8px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.15);
  display:grid;grid-template-columns:repeat(3,1fr);gap:3px;padding:6px;
}
.logo i b{background:#D9E2F2;border-radius:2px}
.logo i b:nth-child(5){background:var(--gelb)}
.leiste ul{display:none;list-style:none;gap:28px;font-size:15px}
.leiste ul a{color:var(--grau);text-decoration:none}
.leiste ul a:hover{color:var(--tinte)}
.leiste .amazon{
  background:var(--tinte);color:#fff;text-decoration:none;
  padding:10px 16px;border-radius:999px;font-weight:700;font-size:13px;white-space:nowrap;
}
.leiste .amazon:hover{background:#000}
/* kleine Handys (360 px): Logo und Knopf passen sonst nicht nebeneinander */
@media (max-width:400px){
  .logo{font-size:19px;gap:8px}
  .logo i{width:30px;height:30px;padding:5px;gap:2px}
  .leiste .amazon{padding:9px 12px;font-size:12px}
}

/* ---------- Fußzeile ---------- */
.fuss{
  border-top:1px solid var(--linie);padding-top:22px;margin-top:48px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:13px;color:var(--grau);
}
.fuss nav{display:flex;gap:20px;flex-wrap:wrap}
.fuss a{text-decoration:none}
.fuss a:hover{color:var(--gruen)}

/* ---------- Unterseiten: Kopf ---------- */
.lp h1,.recht h1{
  font-family:var(--titel);font-weight:400;
  font-size:clamp(36px,9vw,54px);line-height:1.06;letter-spacing:-.3px;
  margin:18px 0 14px;text-wrap:balance;
}
.lp .lead{font-size:clamp(16px,4vw,18px);color:var(--grau);margin-bottom:34px;max-width:580px;text-wrap:pretty}

/* Abschnittsköpfe, z. B. "Wenn drei Rätsel nicht reichen" */
.abschnitt{font-family:var(--titel);font-weight:400;font-size:26px;line-height:1.2;margin:44px 0 16px}

/* ---------- Gratis-Proben ---------- */
.probe{
  display:block;position:relative;
  background:#fff;border:1px solid var(--linie);border-radius:20px;
  padding:22px 22px 22px 74px;margin-bottom:12px;
  text-decoration:none;color:inherit;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
/* Pfeil nach unten = Herunterladen */
.probe::before{
  content:"";position:absolute;left:22px;top:22px;width:36px;height:36px;border-radius:12px;
  background:var(--gruen-hell) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%232F7D4F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3Cpath d='M5 21h14'/%3E%3C/svg%3E") center/20px no-repeat;
}
.probe:hover,.probe:focus-visible{border-color:var(--gruen);transform:translateY(-2px);box-shadow:0 12px 24px -16px rgba(28,26,23,.4)}
.probe .oben{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:4px}
.probe .titel{font-weight:700;font-size:17px;line-height:1.3}
.probe .marker{
  font-size:12px;font-weight:700;white-space:nowrap;
  color:var(--gruen-tief);background:var(--gruen-hell);border-radius:999px;padding:3px 10px;
}
.probe .text{display:block;font-size:14.5px;color:var(--grau);line-height:1.5}

/* ---------- Buchblock: Cover, Knopf (ohne Preis: der wechselt mit der MwSt.) ---------- */
.buchblock{
  display:flex;gap:20px;align-items:center;
  background:#fff;border:1px solid var(--linie);border-radius:22px;
  padding:20px;margin-bottom:14px;text-decoration:none;color:inherit;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.buchblock:hover,.buchblock:focus-visible{border-color:var(--gruen);transform:translateY(-2px);box-shadow:0 14px 28px -18px rgba(28,26,23,.45)}
.buchblock img{width:120px;height:auto;flex:0 0 120px;border-radius:3px 4px 4px 3px;box-shadow:var(--schatten)}
.buchblock.klein img{width:96px;flex-basis:96px}
.buchblock .inhalt{flex:1;min-width:0}
.buchblock .marker{
  display:inline-block;margin-bottom:8px;
  font-size:12px;font-weight:700;background:var(--gelb);color:var(--tinte);
  padding:3px 10px;border-radius:999px;
}
.buchblock .name{display:block;font-family:var(--titel);font-weight:400;font-size:24px;line-height:1.15;margin-bottom:6px;overflow-wrap:break-word}
.buchblock .text{display:block;font-size:14px;line-height:1.5;color:var(--grau)}
.buchblock .kauf{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;margin-top:14px}
.buchblock .knopf{
  display:inline-flex;align-items:center;min-height:42px;padding:0 16px;border-radius:12px;
  background:var(--gruen);color:#fff;font-weight:700;font-size:14px;
}
.buchblock:hover .knopf{background:var(--gruen-tief)}
@media (max-width:420px){
  .buchblock{gap:14px;padding:16px;align-items:flex-start}
  .buchblock img{width:86px;flex-basis:86px}
  .buchblock.klein img{width:72px;flex-basis:72px}
  .buchblock .name{font-size:20px}
}
/* Buch, das noch nicht bei Amazon steht: kein Link */
.buchblock.bald{border-style:dashed}
.buchblock.bald:hover{transform:none;box-shadow:none;border-color:var(--linie)}
.buchblock.bald .knopf{background:none;color:var(--grau);border:1px solid var(--linie)}

.weiter{display:inline-block;margin-top:26px;font-weight:700;color:var(--gruen);text-decoration:none;border-bottom:1.5px solid var(--gruen)}
.weiter:hover{color:var(--gruen-tief)}

/* ---------- Jahreszeiten-Leiste ---------- */
.jahr{display:flex;gap:8px;flex-wrap:wrap;margin-top:34px}
.jahr a{
  display:inline-flex;align-items:center;min-height:42px;padding:0 16px;border-radius:999px;
  background:#fff;border:1px solid var(--linie);font-size:14px;text-decoration:none;
}
.jahr a:hover{border-color:var(--gruen)}
.jahr a.aktiv{background:var(--tinte);border-color:var(--tinte);color:#fff}

/* ---------- Einrichtungen ---------- */
.kernpunkt{background:var(--gruen);color:#fff;border-radius:22px;padding:28px 26px;margin-bottom:40px}
.kernpunkt h2{font-family:var(--titel);font-weight:400;font-size:26px;line-height:1.2;margin-bottom:10px}
.kernpunkt p{font-size:15px;line-height:1.65;opacity:.9}
.block{margin-bottom:40px}
.block h2{font-family:var(--titel);font-weight:400;font-size:26px;line-height:1.2;margin-bottom:14px}
.block p{font-size:15px;line-height:1.7;color:#3B3833;margin-bottom:12px}
.gruppen{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin:-24px 0 40px}
.gruppen div{background:#fff;border:1px solid var(--linie);border-radius:14px;padding:14px 16px;font-size:14.5px;line-height:1.4}
.gruppen div strong{display:block;margin-bottom:2px}
.gruppen div span{color:var(--grau);font-size:13px}
ul.liste{list-style:none}
ul.liste li{font-size:15px;line-height:1.6;color:#3B3833;padding-left:32px;position:relative;margin-bottom:12px}
ul.liste li::before{
  content:"";position:absolute;left:0;top:3px;width:20px;height:20px;border-radius:50%;
  background:var(--gruen-hell) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%232F7D4F' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat;
}
ul.liste li strong{color:var(--tinte)}
a.cta{
  display:flex;align-items:center;justify-content:center;min-height:58px;
  background:var(--gruen);color:#fff;border-radius:16px;text-decoration:none;font-weight:700;font-size:16px;
  transition:background .2s ease,transform .2s ease;
}
a.cta:hover{background:var(--gruen-tief);transform:translateY(-1px)}
.cta_unter{text-align:center;font-size:13.5px;color:var(--grau);margin-top:12px}

/* ---------- Rechtstexte ---------- */
.zurueck{display:inline-block;margin-top:10px;font-size:14px;font-weight:700;color:var(--gruen);text-decoration:none}
.zurueck:hover{color:var(--gruen-tief)}
.recht .vorspann{font-size:15px;color:var(--grau);margin-bottom:30px}
.recht h2{font-size:18px;font-weight:700;margin:32px 0 10px}
.recht p{font-size:15px;color:#3B3833;margin-bottom:12px;line-height:1.7}
.recht strong{color:var(--tinte)}

/* ---------- Formular ---------- */
.formular{display:flex;flex-direction:column;gap:18px;margin-top:28px}
.feld{display:flex;flex-direction:column;gap:6px}
.feld label{font-size:14px;font-weight:700;color:var(--tinte)}
.feld label .pflicht{color:#C0533F}
.feld input,.feld select,.feld textarea{
  font-family:var(--text);font-size:16px;color:var(--tinte);
  background:#fff;border:1px solid var(--linie);border-radius:12px;padding:13px 14px;width:100%;
  transition:border-color .18s ease,box-shadow .18s ease;
}
.feld input:focus,.feld select:focus,.feld textarea:focus{outline:none;border-color:var(--gruen);box-shadow:0 0 0 3px var(--gruen-hell)}
.feld textarea{resize:vertical;min-height:110px;line-height:1.55}
.feld select{appearance:none;background-image:none}
.zustimmung{display:flex;gap:12px;align-items:flex-start;font-size:13.5px;color:var(--grau);line-height:1.55}
.zustimmung input{width:20px;height:20px;flex:0 0 20px;margin-top:2px;accent-color:var(--gruen)}
.zustimmung a{color:var(--gruen)}
button.senden{
  font-family:var(--text);font-weight:700;font-size:16px;
  background:var(--gruen);color:#fff;border:none;border-radius:16px;
  min-height:58px;padding:0 24px;cursor:pointer;width:100%;
  transition:background .18s ease,transform .18s ease;
}
button.senden:hover{background:var(--gruen-tief);transform:translateY(-1px)}
.hinweis{font-size:13px;color:var(--grau);text-align:center;margin-top:-4px}

.danke{text-align:center;padding:40px 0}
.danke .haken{
  width:64px;height:64px;border-radius:50%;background:var(--gruen-hell);
  display:flex;align-items:center;justify-content:center;margin:0 auto 22px;
  font-size:30px;color:var(--gruen);
}

/* ---------- Am Computer ---------- */
@media (min-width:980px){
  body{padding:0 32px 40px}
  .leiste{padding:28px 0}
  .leiste ul{display:flex}
  .leiste .amazon{padding:11px 20px;font-size:14px}
  .lp h1,.recht h1{margin-top:40px}
}

@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}}