/* Sprechblasen-Design (Nov. 2026)
   Ergänzt das bestehende Layout „Creme & Taupe“ – kein Umbau.
   Karten mit Sprechblasen-Ecke, Etiketten als kleine Sprechblasen,
   Logo-Senfgelb als Akzent. Wird nach den Seiten-Styles geladen. */
:root{
  --mustard:#D1951C;        /* Senfgelb aus dem Logo – nur für Flächen/Deko */
  --mustard-soft:#F8EDD3;   /* heller Hintergrund für Etiketten */
  --mustard-line:#EBD39C;   /* Rahmen der Etiketten */
  --mustard-ink:#7A5410;    /* lesbarer Text auf Senfgelb-hell */
  --bubble:24px 24px 24px 6px;      /* Sprechblasen-Ecke unten links */
  --bubble-sm:18px 18px 18px 5px;
}


/* ---------- Karten mit Sprechblasen-Ecke ---------- */
html .area,html .post,html .qa,html .way,html .vcard,html .side-card,html .alltag figure,html .pin-box{border-radius:var(--bubble)!important}

html .box,html .toc,html .verord,html .card2,html .treat div,html .costs div,html .faq details,html .qlist li,html .signs li,html .press{border-radius:var(--bubble-sm)}


/* Hover: Rahmen in Senfgelb statt Taupe */
html .area:hover,html .post:hover,html .qa:hover,html .faq details[open],html .side-card:hover{border-color:var(--mustard)}

html .area,html .post,html .qa{transition:border-color .2s,transform .2s,box-shadow .2s}

html .area:hover,html .post:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(77,69,64,.10)}


/* ---------- Etiketten als kleine Sprechblasen ---------- */
html .eyebrow,html .area .tag{
  display:inline-block;position:relative;
  background:var(--mustard-soft);border:1px solid var(--mustard-line);color:var(--mustard-ink);
  border-radius:12px 12px 12px 3px;padding:.32em .8em .3em;line-height:1.3;
  font-size:.78rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  margin-bottom:6px;width:fit-content;max-width:100%;justify-self:start;align-self:flex-start
}

html .eyebrow::after,html .area .tag::after{
  content:"";position:absolute;left:10px;bottom:-6px;width:10px;height:7px;
  background:var(--mustard-soft);border-left:1px solid var(--mustard-line);
  clip-path:polygon(0 0,100% 0,0 100%)
}

html .hero h1.eyebrow{font-size:.78rem;color:var(--mustard-ink)}

html .area .tag{align-self:flex-start;margin-top:14px}

html .tags li,html .pillars li{border-radius:14px 14px 14px 4px}

html .badge{border-radius:18px 18px 18px 5px}

html .tags li::before{background:var(--mustard)}


/* ---------- Senfgelb als dezenter Akzent ---------- */
html .signs li::before{background:var(--mustard)}

html .press{border-left-color:var(--mustard)}

html .faq summary::after{color:var(--mustard)}

html .steps li::before{border-color:var(--mustard-line);background:var(--mustard-soft);color:var(--mustard-ink)}

html .vcard i{background:var(--mustard)}

html .chips span+span::before{color:var(--mustard)}

html .toc{border-left:4px solid var(--mustard)}

html :focus-visible{outline-color:var(--mustard)}

html .ww-col a::after{color:var(--mustard)}
@media (prefers-reduced-motion:reduce){html .area:hover,html .post:hover{transform:none}}

html .trust-row{grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr))}
html b,html strong{font-weight:750}
@media (min-width:1240px){html nav.main a{padding:.5em .45em;font-size:.92rem}html .head{gap:8px}}
@media (min-width:1240px) and (max-width:1279px){html nav.main{width:100%;order:3;margin-left:0}html .head-r{order:2}}