/* Ratgeber – gleiche Anmutung wie Startseite und Buch, nur ruhiger gesetzt. */

@font-face { font-family:'Crimson'; src:url('/fonts/CrimsonText-Regular.ttf') format('truetype');
             font-weight:400; font-display:swap; }
@font-face { font-family:'Crimson'; src:url('/fonts/CrimsonText-Bold.ttf') format('truetype');
             font-weight:700; font-display:swap; }
@font-face { font-family:'Crimson'; src:url('/fonts/CrimsonText-Italic.ttf') format('truetype');
             font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'Courier Prime'; src:url('/fonts/CourierPrime-Regular.ttf') format('truetype');
             font-weight:400; font-display:swap; }
@font-face { font-family:'Courier Prime'; src:url('/fonts/CourierPrime-Bold.ttf') format('truetype');
             font-weight:700; font-display:swap; }
@font-face { font-family:'Anton'; src:url('/fonts/Anton-Regular.ttf') format('truetype');
             font-weight:400; font-display:swap; }

:root {
  --papier:#ece4cd; --tinte:#261c10; --rot:#96281f; --gold:#96784f;
  --grau:#5f503c; --linie:#3c2d1a; --karte:#f6f0de;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; color:var(--tinte); font-family:'Crimson',Georgia,serif;
  font-size:1.14rem; line-height:1.74; -webkit-font-smoothing:antialiased;
  background:#e6dcc2 url('/bilder/papier.jpg') top center / 900px auto repeat;
}
img { max-width:100%; height:auto; }

/* ---------- Navigation ---------- */
.navi {
  display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap;
  max-width:48rem; margin:0 auto; padding:1.1rem 1.4rem .9rem;
  border-bottom:1px solid rgba(60,45,26,.35);
}
.marke { font-family:'Anton',sans-serif; letter-spacing:.06em; font-size:1.15rem;
         color:var(--tinte); text-decoration:none; text-transform:uppercase; }
.navi-links a { font-family:'Courier Prime',monospace; font-size:.78rem; letter-spacing:.14em;
                text-transform:uppercase; color:var(--grau); text-decoration:none; margin-left:1.3rem; }
.navi-links a:hover { color:var(--rot); }

/* ---------- Grundraster ---------- */
main { max-width:44rem; margin:0 auto; padding:2rem 1.4rem 3rem; }
main.breit { max-width:52rem; }
a { color:var(--rot); }
a:hover { text-decoration:none; }

.krumen { font-family:'Courier Prime',monospace; font-size:.74rem; letter-spacing:.1em;
          color:var(--grau); margin:0 0 1.4rem; }
.krumen a { color:var(--grau); text-decoration:none; }
.krumen a:hover { color:var(--rot); }
.krumen span { padding:0 .45rem; }

.balken { font-family:'Courier Prime',monospace; font-size:.72rem; letter-spacing:.24em;
          text-transform:uppercase; color:#efe7d2; background:var(--linie);
          display:inline-block; padding:.4rem 1rem; margin:0 0 1.1rem; }

h1 { font-size:clamp(1.95rem,5.4vw,2.7rem); line-height:1.14; margin:0 0 1rem; font-weight:700; }
h2 { font-size:clamp(1.28rem,3.2vw,1.5rem); line-height:1.24; font-weight:700;
     margin:2.6rem 0 .6rem; border-top:1px solid rgba(60,45,26,.3); padding-top:1.4rem; }
h3 { font-size:1.1rem; line-height:1.3; font-weight:700; margin:1.8rem 0 .3rem; }
p, li { margin:.7rem 0; }
ul, ol { padding-left:1.4rem; }
li { margin:.4rem 0; }
strong { font-weight:700; }
em { font-style:italic; }

.vorspann { font-size:1.16rem; color:var(--grau); margin:0 0 1.3rem; font-style:italic; }
.zeile { font-family:'Courier Prime',monospace; font-size:.75rem; letter-spacing:.09em;
         color:var(--grau); text-transform:uppercase;
         border-top:1px solid rgba(60,45,26,.3); border-bottom:1px solid rgba(60,45,26,.3);
         padding:.55rem 0; margin:0 0 1.8rem; }
.zeile span { padding-right:.9rem; }

/* ---------- Aufmacherbild ---------- */
.aufmacher { margin:0 0 2rem; }
.aufmacher img { width:100%; display:block; border:1px solid rgba(60,45,26,.45);
                 filter:sepia(.18) saturate(.92) contrast(1.03); }
.aufmacher figcaption { font-family:'Courier Prime',monospace; font-size:.7rem; color:var(--grau);
                        letter-spacing:.06em; margin-top:.5rem; }

/* ---------- Hervorgehobene Kästen ---------- */
.kasten {
  background:var(--karte); border:1px solid rgba(60,45,26,.4);
  border-left:4px solid var(--rot); padding:1rem 1.2rem; margin:1.6rem 0; font-size:1.02rem;
}
.kasten p:first-child { margin-top:0; }
.kasten p:last-child { margin-bottom:0; }
.kasten .titel { font-family:'Courier Prime',monospace; font-size:.72rem; letter-spacing:.2em;
                 text-transform:uppercase; color:var(--rot); display:block; margin-bottom:.4rem; }

.beispiel { background:rgba(246,240,222,.7); border:1px dashed rgba(60,45,26,.45);
            padding:1rem 1.2rem; margin:1.5rem 0; font-size:1.01rem; }
.beispiel .titel { font-family:'Courier Prime',monospace; font-size:.72rem; letter-spacing:.2em;
                   text-transform:uppercase; color:var(--grau); display:block; margin-bottom:.4rem; }

blockquote { margin:1.5rem 0; padding:.2rem 0 .2rem 1.2rem; border-left:3px solid var(--gold);
             font-style:italic; color:var(--grau); }

/* ---------- Tabellen ---------- */
.tabelle { overflow-x:auto; margin:1.6rem 0; }
table { border-collapse:collapse; width:100%; font-size:.98rem; background:var(--karte); }
th, td { border:1px solid rgba(60,45,26,.35); padding:.55rem .7rem; text-align:left;
         vertical-align:top; }
th { font-family:'Courier Prime',monospace; font-size:.74rem; letter-spacing:.1em;
     text-transform:uppercase; background:var(--linie); color:#efe7d2; font-weight:400; }

/* ---------- Fragen und Antworten ---------- */
.faq { margin:2.6rem 0 0; }
.faq h2 { margin-bottom:1rem; }
.faq details { background:var(--karte); border:1px solid rgba(60,45,26,.35); margin:.5rem 0; }
.faq summary { cursor:pointer; padding:.8rem 1rem; font-weight:700; list-style:none;
               display:flex; justify-content:space-between; gap:1rem; align-items:baseline; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:'+'; font-family:'Courier Prime',monospace; color:var(--rot);
                      flex:0 0 auto; }
.faq details[open] summary::after { content:'–'; }
.faq .antwort { padding:0 1rem 1rem; font-size:1.02rem; color:var(--grau); }
.faq .antwort p:first-child { margin-top:0; }

/* ---------- Buchkasten ---------- */
.buchkasten {
  display:flex; gap:1.4rem; flex-wrap:wrap; align-items:flex-start;
  background:var(--karte); border:1px solid rgba(60,45,26,.45);
  padding:1.3rem; margin:2.6rem 0 0;
}
.buchkasten img { width:130px; flex:0 0 130px; border:1px solid rgba(60,45,26,.4); display:block; }
.buchkasten .text { flex:1 1 15rem; }
.buchkasten h2 { margin:0 0 .4rem; border:0; padding:0; font-size:1.22rem; }
.buchkasten p { margin:.4rem 0; font-size:1rem; }
.nebentitel { font-family:'Courier Prime',monospace; font-size:.74rem !important;
              letter-spacing:.12em; text-transform:uppercase; color:var(--grau);
              margin:.1rem 0 .7rem !important; line-height:1.45; }
.knopf { display:inline-block; margin-top:.7rem; padding:.7rem 1.4rem; background:var(--rot);
         color:#f6f0de; text-decoration:none; font-family:'Courier Prime',monospace;
         font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; }
.knopf:hover { background:#7d201a; }
.bald { display:inline-block; margin-top:.7rem; padding:.65rem 1.2rem;
        border:2px dashed rgba(60,45,26,.45); color:var(--grau);
        font-family:'Courier Prime',monospace; font-size:.76rem; letter-spacing:.12em;
        text-transform:uppercase; }
.werbehinweis { font-size:.82rem; color:var(--grau); margin-top:.8rem; }

/* ---------- Weiterlesen ---------- */
.weiter { margin:2.6rem 0 0; }
.weiter h2 { margin-bottom:.8rem; }
.weiter ul { list-style:none; padding:0; margin:0; }
.weiter li { margin:0; border-bottom:1px solid rgba(60,45,26,.25); }
.weiter li:first-child { border-top:1px solid rgba(60,45,26,.25); }
.weiter a { display:block; padding:.75rem 0; text-decoration:none; color:var(--tinte); }
.weiter a:hover { color:var(--rot); }
.weiter .t { font-weight:700; }
.weiter .k { display:block; font-size:.94rem; color:var(--grau); line-height:1.5; }

/* ---------- Übersicht ---------- */
.gruppe { margin:2.8rem 0 0; }
.gruppe > p.einleitung { color:var(--grau); margin:.2rem 0 1.2rem; }
.karten { display:grid; gap:1.1rem; grid-template-columns:repeat(auto-fill,minmax(15rem,1fr)); }
.karte { background:var(--karte); border:1px solid rgba(60,45,26,.4); display:flex;
         flex-direction:column; text-decoration:none; color:var(--tinte); }
.karte:hover { border-color:var(--rot); }
.karte img { width:100%; aspect-ratio:16/9; object-fit:cover; display:block;
             border-bottom:1px solid rgba(60,45,26,.3);
             filter:sepia(.18) saturate(.92) contrast(1.03); }
.karte .inhalt { padding:.9rem 1rem 1.1rem; }
.karte h3 { margin:0 0 .35rem; font-size:1.06rem; line-height:1.28; }
.karte p { margin:0; font-size:.95rem; color:var(--grau); line-height:1.5; }
.karte .dauer { font-family:'Courier Prime',monospace; font-size:.7rem; letter-spacing:.14em;
                text-transform:uppercase; color:var(--rot); display:block; margin-top:.6rem; }

/* ---------- Eintragung (wie auf der Startseite) ---------- */
.anmeldung { padding:3rem 0 .5rem; }
.zettel {
  position:relative; background:#f6f0de; padding:2.6rem 2rem 1.9rem;
  border:1px solid rgba(60,45,26,.45); transform:rotate(-.4deg);
  box-shadow:0 18px 44px rgba(60,40,18,.26);
}
.zettel::after { content:''; position:absolute; inset:0; pointer-events:none;
  background:url('/bilder/kaffeerand.png') right -55px bottom -65px / 210px no-repeat;
  opacity:.30; mix-blend-mode:multiply; }
.band { position:absolute; top:-20px; left:50%; width:180px;
        transform:translateX(-50%) rotate(-2deg); pointer-events:none; }
.finger { position:absolute; right:12px; bottom:8px; width:62px; opacity:.28;
          mix-blend-mode:multiply; pointer-events:none; }
.zettel h2 { font-size:clamp(1.6rem,4vw,2.05rem); margin:0 0 .6rem;
             border:0; padding:0; line-height:1.18; }
.zettel .balken { margin-bottom:1rem; }
.fliess { margin:0 0 1.2rem; }
.reihe { display:flex; gap:.6rem; flex-wrap:wrap; }
.zettel input[type=email] {
  flex:1 1 15rem; min-width:0; padding:.9rem 1rem; font-size:1rem;
  font-family:'Crimson',Georgia,serif; border:1px solid #a89372;
  background:#fffdf6; color:var(--tinte);
}
.zettel input[type=email]:focus { outline:2px solid var(--rot); outline-offset:1px; }
.zettel button {
  padding:.9rem 1.5rem; font-family:'Courier Prime',monospace; font-size:.82rem;
  letter-spacing:.12em; text-transform:uppercase; background:var(--rot); color:#f6f0de;
  border:none; cursor:pointer; transition:background .15s;
}
.zettel button:hover { background:#75190f; }
.honig { position:absolute; left:-9999px; width:1px; height:1px; }
.zettel .klein { font-size:.84rem; color:var(--grau); margin:1rem 0 0; line-height:1.6; }
.zettel .klein a { color:var(--rot); }
.fehler { background:#f2ddd8; border-left:4px solid var(--rot); padding:.7rem .9rem;
          margin:0 0 1rem; font-size:.95rem; }

/* ---------- Fuß ---------- */
footer { max-width:44rem; margin:0 auto; padding:2rem 1.4rem 3rem; text-align:center;
         border-top:1px solid rgba(60,45,26,.3);
         font-family:'Courier Prime',monospace; font-size:.76rem; letter-spacing:.1em;
         color:var(--grau); }
footer a { color:var(--grau); text-decoration:none; }
footer a:hover { color:var(--rot); }
footer span { padding:0 .5rem; }

@media (max-width:32rem) {
  body { font-size:1.08rem; }
  .buchkasten img { width:100px; flex:0 0 100px; }
}