/* Fairtrade Malavi e.V. — Stylesheet
   Gestaltungsidee: Plakat & Pausenhof — Plakatschrift, Kreidetöne,
   quadratische Bilder ohne Schnörkel. Keine externen Schriften,
   keine Tracker, keine Cookies. */

:root{
  --ink:#15312A;          /* tiefes Flaschengrün, Fließtext und Überschriften */
  --ink-soft:#3E5A4F;
  --paper:#E9EDE2;        /* Kreidegrün, Seitenhintergrund */
  --card:#FBFBF6;         /* Lesefläche */
  --amber:#E0A013;        /* Ringelblume, Hauptakzent */
  --ochre:#8A5A12;        /* dunkles Ocker, Schrift- und Flächenakzent */
  --marigold:#E0A013;
  --moss:#6E8B5A;         /* Linien, Nebentext */
  --line:#C9D2BE;

  --display:"Archivo","Arial Black","Helvetica Neue",Helvetica,Arial,sans-serif;
  --text:Georgia,"Iowan Old Style","Source Serif 4","Times New Roman",serif;

  --wide:min(1180px,calc(100% - 3rem));
  --read:68ch;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--text);font-size:1.0625rem;line-height:1.7;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--ink);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{color:var(--ochre)}
:focus-visible{outline:3px solid var(--ochre);outline-offset:3px}

h1,h2,h3,h4,.display{
  font-family:var(--display);font-weight:800;
  letter-spacing:-.02em;line-height:1.02;text-wrap:balance;margin:0;
}
h1{font-size:clamp(2.6rem,7vw,4.6rem)}
h2{font-size:clamp(1.8rem,3.6vw,2.7rem)}
h3{font-size:clamp(1.2rem,2vw,1.5rem);letter-spacing:-.01em}
p{margin:0 0 1.1em}
.wrap{width:var(--wide);margin-inline:auto}
.read{max-width:var(--read)}
.read p,.read li{hyphens:auto}

/* ---------- Kopf ---------- */
.site-head{border-bottom:2px solid var(--ink);background:var(--paper)}
.site-head .wrap{display:flex;flex-wrap:wrap;gap:.9rem 1.6rem;align-items:baseline;
  justify-content:space-between;padding:1.1rem 0}
.brand{display:flex;align-items:center;text-decoration:none}
.brand img{height:58px;width:auto}
@media(max-width:600px){.brand img{height:44px}}
nav ul{display:flex;flex-wrap:wrap;gap:.25rem 1.15rem;list-style:none;margin:0;padding:0;
  font-family:var(--display);font-weight:600;font-size:.95rem;letter-spacing:0}
nav a{text-decoration:none;padding-bottom:2px;border-bottom:3px solid transparent}
nav a:hover{border-bottom-color:var(--amber)}
nav a[aria-current=page]{border-bottom-color:var(--ochre)}

/* ---------- Plakat-Kopf jeder Seite ---------- */
.poster{padding:4.2rem 0 2.4rem}
.poster .kicker{font-family:var(--display);font-weight:700;font-size:.95rem;
  color:var(--ochre);margin:0 0 .9rem}
.poster p.lead{font-size:1.25rem;line-height:1.55;max-width:46ch;margin:1.4rem 0 0;color:var(--ink-soft)}

.band{margin:2.4rem 0 0}
.band img{width:100%;max-height:min(52vh,460px);object-fit:cover;border:2px solid var(--ink)}
.band figcaption{font-family:var(--display);font-weight:600;font-size:.85rem;
  color:var(--moss);padding-top:.5rem}

/* ---------- Abschnitte ---------- */
section{padding:2.8rem 0}
section.tint{background:var(--card);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
h2.mark{position:relative;padding-top:1.1rem;margin-bottom:1rem}
h2.mark::before{content:"";position:absolute;top:0;left:0;width:3.4rem;height:6px;background:var(--amber)}
h2.mark.alt::before{background:var(--moss)}

.split{display:grid;gap:2.2rem;align-items:start}
@media(min-width:800px){
  .split{grid-template-columns:1fr 1fr;gap:3rem}
  .split.narrow-img{grid-template-columns:1.25fr .75fr}
  .split.img-left>figure{order:-1}
}
.split img{border:2px solid var(--ink)}
figure{margin:0}
figcaption{font-family:var(--display);font-weight:600;font-size:.82rem;color:var(--moss);padding-top:.45rem}

.cards.snacks{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.cards.snacks .card img{margin:0 0 1.1rem;width:100%;max-width:none;aspect-ratio:auto;
  object-fit:contain;background:#fff;border:0;border-bottom:2px solid var(--line);padding-bottom:1.1rem;
  max-width:440px;margin-inline:auto}
.cards{display:grid;gap:1.6rem;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.card{background:var(--card);border:2px solid var(--ink);padding:1.2rem 1.25rem 1.4rem}
.card h3{margin-bottom:.5rem}
.card p{font-size:.98rem;margin-bottom:0}
.card img{margin:-1.2rem -1.25rem 1rem;width:calc(100% + 2.5rem);max-width:none;
  aspect-ratio:4/3;object-fit:cover;border-bottom:2px solid var(--ink)}

.snacklinks{list-style:none;margin:1rem 0 0;padding:.9rem 0 0;border-top:1px solid var(--line);
  font-family:var(--display);font-weight:600;font-size:.93rem}
.snacklinks li{padding:.22rem 0}
.snacklinks a{text-decoration:none;border-bottom:2px solid var(--amber)}
ul.plain{list-style:none;padding:0;margin:0 0 1.2em}
ul.plain li{padding:.42rem 0 .42rem 1.5rem;position:relative;border-bottom:1px solid var(--line)}
ul.plain li::before{content:"";position:absolute;left:0;top:1.05rem;width:.62rem;height:.62rem;background:var(--amber)}

blockquote{margin:2rem 0;padding:0 0 0 1.6rem;border-left:6px solid var(--amber);
  font-size:1.2rem;line-height:1.55;font-style:italic}

.btn{display:inline-block;font-family:var(--display);font-weight:700;font-size:1rem;
  background:transparent;color:var(--ink);text-decoration:none;padding:.72rem 1.4rem;border:2px solid var(--ink)}
.btn:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn{margin:0 .6rem .6rem 0}
@media(max-width:600px){.btn{margin-left:0!important;display:block;text-align:center}}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}

/* ---------- Blog ---------- */
.posts{display:grid;gap:1.8rem;grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.post{background:var(--card);border:2px solid var(--ink);display:flex;flex-direction:column}
.post img{aspect-ratio:3/2;object-fit:cover;border-bottom:2px solid var(--ink)}
.post .body{padding:1.1rem 1.2rem 1.4rem}
.post h3{margin-bottom:.45rem}
.post h3 a{text-decoration:none}
.date{font-family:var(--display);font-weight:600;font-size:.82rem;color:var(--moss);display:block;margin-bottom:.5rem}
article.post-full h2{font-size:clamp(1.3rem,2.3vw,1.7rem);margin:2rem 0 .7rem}
article.post-full h2.mark{margin-top:2.4rem}

/* ---------- Linkliste ---------- */
.linkgroup{margin:0 0 2.2rem}
.linkgroup h3{margin-bottom:.7rem}
.linklist{list-style:none;margin:0;padding:0}
.linklist li{border-top:1px solid var(--line);padding:.75rem 0}
.linklist a{font-family:var(--display);font-weight:700;font-size:1.02rem;text-decoration:none;
  border-bottom:2px solid var(--amber)}
.linklist span{display:block;font-size:.97rem;color:var(--ink-soft)}

/* ---------- Fuß ---------- */
.site-foot{border-top:2px solid var(--ink);background:var(--ink);color:var(--paper);
  padding:2.6rem 0 2rem;margin-top:3rem}
.site-foot a{color:var(--paper)}
.site-foot a:hover{color:var(--amber)}
.foot-grid{display:grid;gap:1.8rem;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.site-foot h3{font-size:1rem;margin-bottom:.6rem;color:#fff}
.site-foot ul{list-style:none;margin:0;padding:0;font-size:.97rem;line-height:1.9}
.site-foot .fine{border-top:1px solid #3E5A4F;margin-top:2rem;padding-top:1rem;
  font-size:.88rem;color:#B8C7B4}

.note{background:#FFF7E2;border:2px solid var(--amber);padding:1rem 1.1rem;font-size:.95rem}
.note p:last-child{margin-bottom:0}

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