/* MANDALUNA Atelier – gemeinsame Gestaltung für Startseite und Ideen-Seiten.
   Keine externen Schriften, keine Tracking-Skripte (kein Cookie-Banner nötig). */
:root{
  --nacht:#123f5a; --nacht-tief:#0c2b3e; --gold:#e39a1d; --gold-hell:#f6c56a;
  --rot:#a3202b; --creme:#fbf5ea; --papier:#fffdf8; --tinte:#22262b; --grau:#5e6670;
  --linie:#ecd9bd; --rot-tief:#7a1420; --pfirsich:#fde9d2;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  background:var(--creme);color:var(--tinte);line-height:1.62;font-size:17px;
  -webkit-font-smoothing:antialiased}
a{color:var(--nacht)}
img{max-width:100%;height:auto;display:block}
.huelle{max-width:1140px;margin:0 auto;padding:0 18px}
.schmal{max-width:780px}

/* Kopf */
.kopf{background:var(--nacht);color:var(--creme)}
.kopf .huelle{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px}
.marke{display:flex;align-items:center;gap:12px;color:var(--creme);text-decoration:none}
.marke img{width:46px;height:46px;border-radius:50%}
.marke b{font-family:Georgia,"Times New Roman",serif;letter-spacing:.12em;font-size:19px}
.marke span{display:block;font-size:12px;color:var(--gold-hell);letter-spacing:.04em}
.nav{display:flex;gap:18px;font-size:15px}
.nav a{color:var(--creme);text-decoration:none;opacity:.9}
.nav a:hover{opacity:1;text-decoration:underline}

/* Titelbereich */
.held{background:radial-gradient(120% 140% at 85% 20%,#c4303a 0%,var(--rot) 38%,var(--rot-tief) 100%);
  color:var(--creme);padding:44px 0 52px}
.held .huelle{display:grid;grid-template-columns:5fr 6fr;gap:40px;align-items:center}
.held h1{font-family:Georgia,"Times New Roman",serif;font-size:clamp(32px,4.6vw,52px);line-height:1.1;
  text-wrap:balance}
.held p{margin-top:16px;color:#fbe7d6;font-size:18.5px;max-width:520px}
.held .claim{color:var(--gold-hell);letter-spacing:.06em;font-size:15px;margin-top:12px}
.held .knoepfe{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.held .knopf.leise{color:var(--creme);border-color:var(--gold-hell)}
.held figure{position:relative}
.held figure img{border-radius:18px;box-shadow:0 18px 40px rgba(40,5,8,.45);border:6px solid var(--creme);
  aspect-ratio:4/3;object-fit:cover;width:100%}
.held figcaption{position:absolute;left:18px;bottom:18px;background:var(--creme);color:var(--rot-tief);
  font-weight:700;font-size:14px;padding:6px 14px;border-radius:999px;box-shadow:0 4px 12px rgba(0,0,0,.25)}
@media (max-width:820px){.held .huelle{grid-template-columns:1fr;gap:26px}.held figure{order:-1}}

/* Abschnitte */
section{padding:46px 0}
h2{font-family:Georgia,"Times New Roman",serif;font-size:clamp(26px,3.8vw,36px);color:var(--rot-tief);
  line-height:1.2;margin-bottom:10px;text-wrap:balance}
h3{font-size:21px;color:var(--rot-tief);margin-bottom:6px;line-height:1.25}
.lead{color:var(--grau);margin-bottom:22px}
.raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px}
.raster.zwei{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
.karte{background:var(--papier);border:1px solid var(--linie);border-radius:18px;overflow:hidden;
  display:flex;flex-direction:column;min-width:0;box-shadow:0 8px 24px rgba(122,20,32,.10)}
.karte img{aspect-ratio:4/3;object-fit:cover;width:100%}
.karte.gross{display:grid;grid-template-columns:3fr 2fr;margin-bottom:24px}
.karte.gross img{height:100%;min-height:100%}
.karte.gross .inhalt{padding:28px 30px;justify-content:center}
.karte.gross h3{font-size:clamp(24px,3vw,32px);font-family:Georgia,"Times New Roman",serif}
.karte.gross p{font-size:17px}
@media (max-width:760px){.karte.gross{grid-template-columns:1fr}.karte.gross img{height:auto}}
.karte.ohne-bild{background:linear-gradient(160deg,#fff6e8 0%,var(--pfirsich) 100%)}
.karte.ohne-bild .inhalt{padding:28px 30px}
.titel-liste{list-style:none;display:grid;gap:6px;margin:6px 0 14px;font-family:Georgia,"Times New Roman",serif;
  font-size:19px;color:var(--rot-tief)}
.liste-titel{font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-top:4px}
.titel-liste a{color:var(--rot-tief);text-decoration:none;border-bottom:1px solid rgba(122,20,32,.25)}
.titel-liste a:hover{border-bottom-color:var(--rot-tief)}
.titel-liste li::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--gold);margin-right:12px;vertical-align:middle}
.art{align-self:flex-start;background:var(--pfirsich);color:var(--rot-tief);font-size:12.5px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;padding:4px 11px;border-radius:999px}
.label{display:inline-block;color:var(--gold);font-weight:700;font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;margin-bottom:6px}
.karte .inhalt{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.karte p{font-size:15.5px;color:var(--grau)}
.knopf{display:inline-block;margin-top:auto;align-self:flex-start;background:var(--gold);color:#2a1a02;
  font-weight:700;text-decoration:none;padding:10px 18px;border-radius:999px;font-size:15px}
.knopf:hover,.knopf:focus-visible{background:var(--gold-hell)}
.knopf.leise{background:transparent;border:2px solid var(--gold);color:var(--nacht)}
.band{background:var(--papier);border-block:1px solid var(--linie)}

/* Artikel */
.artikel h1{font-family:Georgia,"Times New Roman",serif;font-size:clamp(30px,5vw,42px);line-height:1.15;
  color:var(--rot-tief);text-wrap:balance;margin:38px 0 12px}
.artikel .vorspann{font-size:19px;color:var(--grau);margin-bottom:24px}
.artikel h2{margin-top:38px}
.artikel p{margin-bottom:14px}
.artikel figure{margin:24px 0}
.artikel figure img{border-radius:16px;box-shadow:0 10px 28px rgba(122,20,32,.14)}
.artikel figcaption{font-size:14px;color:var(--grau);margin-top:6px}
.tipp{background:#fff4dc;border-left:5px solid var(--gold);padding:14px 18px;border-radius:0 10px 10px 0;margin:18px 0}
.produkt{display:grid;grid-template-columns:260px 1fr;gap:16px;align-items:center;background:var(--papier);
  border:1px solid var(--linie);border-radius:14px;padding:14px;margin:18px 0}
.produkt img{border-radius:12px;aspect-ratio:4/3;object-fit:cover;width:100%}
.produkt.ohne-bild{grid-template-columns:1fr}
.produkt h3{margin-bottom:4px}
.produkt p{font-size:15px;color:var(--grau);margin-bottom:10px}
@media (max-width:600px){.produkt{grid-template-columns:1fr}.nav{display:none}}
.datum{font-size:14px;color:var(--grau)}

/* Fuß */
.fuss{background:var(--nacht-tief);color:#cfd8de;font-size:14px;padding:30px 0;margin-top:40px}
.fuss .huelle{display:flex;flex-wrap:wrap;gap:12px 26px;justify-content:space-between}
.fuss a{color:var(--gold-hell)}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}