
/* BEAUTYRELLA JOURNAL 2026 */
.br-blog-page{--ink:#403936;--copy:#655d58;--accent:#c8ad9b;--accent2:#a68b7b;--soft:#f7f2ef;--line:#eadfd9;--night:#211d1b;background:#fff;color:var(--copy)}
.br-blog-hero{position:relative;overflow:hidden;background:linear-gradient(135deg,#1e1a18,#342a26 58%,#181513);color:#fff;padding:90px 20px 105px}
.br-blog-hero:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 78% 20%,rgba(200,173,155,.23),transparent 34%)}
.br-blog-hero-inner{position:relative;z-index:2;max-width:1160px;margin:auto}
.br-blog-kicker{margin:0 0 14px;color:#d7bbaa;letter-spacing:.18em;text-transform:uppercase;font-size:13px;font-weight:600}
.br-blog-hero h1{margin:0 0 20px;padding:0;text-align:left;color:#fff;font-size:clamp(3.5rem,8vw,7rem);line-height:.93;font-weight:100;letter-spacing:-.045em}
.br-blog-hero h1 span{display:block;color:#d2b6a5}
.br-blog-hero p{max-width:690px;margin:0;color:rgba(255,255,255,.75);font-size:1.12rem;line-height:1.8}
.br-blog-toolbar-wrap{position:sticky;top:0;z-index:70;background:rgba(255,255,255,.94);backdrop-filter:blur(15px);border-bottom:1px solid var(--line)}
.br-blog-toolbar{max-width:1160px;margin:auto;padding:15px 20px;display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.br-blog-search{flex:1 1 280px;min-height:44px;border:1px solid var(--line);border-radius:999px;padding:0 18px;font:inherit;color:var(--ink);outline:none}
.br-blog-filter{border:1px solid var(--line);background:#fff;color:var(--ink);padding:11px 17px;border-radius:999px;cursor:pointer;font:inherit;font-size:13px}
.br-blog-filter.is-active,.br-blog-filter:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.br-blog-main{padding:70px 20px 100px;background:linear-gradient(#faf7f5,#fff 25%)}
.br-blog-wrap{max-width:1160px;margin:auto}
.br-blog-featured{display:grid;grid-template-columns:1.15fr .85fr;overflow:hidden;margin-bottom:48px;border-radius:22px;background:#221e1c;color:#fff;box-shadow:0 22px 55px rgba(42,31,26,.13)}
.br-blog-featured-image{min-height:430px}.br-blog-featured-image img{width:100%;height:100%;object-fit:cover;display:block}
.br-blog-featured-copy{padding:52px;display:flex;flex-direction:column;justify-content:center}
.br-blog-category{color:#d7bbaa;text-transform:uppercase;letter-spacing:.12em;font-size:11px;font-weight:600}
.br-blog-featured h2{margin:12px 0 18px;padding:0;text-align:left;color:#fff;font-weight:100;font-size:clamp(2rem,4vw,3.2rem);line-height:1.12}
.br-blog-featured p{color:rgba(255,255,255,.72);line-height:1.75}
.br-blog-meta{font-size:12px;color:#9a8980;margin:12px 0 0}
.br-blog-featured .br-blog-meta{color:rgba(255,255,255,.52)}
.br-blog-more{display:inline-flex;margin-top:22px;color:#fff!important;text-decoration:none!important;align-items:center;gap:8px}
.br-blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.br-blog-card{overflow:hidden;border-radius:17px;background:#fff;border:1px solid #eee4de;box-shadow:0 7px 28px rgba(55,43,37,.06);transition:.25s ease}
.br-blog-card:hover{transform:translateY(-5px);box-shadow:0 18px 42px rgba(55,43,37,.11)}
.br-blog-card[hidden]{display:none!important}
.br-blog-card-image{display:block;aspect-ratio:16/10;overflow:hidden}.br-blog-card-image img{width:100%;height:100%;object-fit:cover;display:block;transition:.35s ease}.br-blog-card:hover img{transform:scale(1.035)}
.br-blog-card-copy{padding:25px}
.br-blog-card h2{margin:10px 0 12px;padding:0;text-align:left;font-weight:300;color:var(--ink);font-size:1.35rem;line-height:1.3}
.br-blog-card p{font-size:.96rem;line-height:1.65;color:#716863}
.br-blog-card-link{display:inline-block;margin-top:13px;color:var(--accent2)!important;text-decoration:none!important;font-size:14px}
.br-blog-empty{display:none;text-align:center;padding:70px 20px;color:#8b7c73}
.br-blog-cta{padding:85px 20px;text-align:center;background:#211d1b;color:#fff}
.br-blog-cta-inner{max-width:760px;margin:auto}.br-blog-cta h2{margin:0 0 16px;padding:0;text-align:center;color:#fff;font-size:clamp(2.2rem,4vw,3.4rem);font-weight:100}.br-blog-cta p{color:rgba(255,255,255,.7);line-height:1.8}
.br-blog-btn{display:inline-flex;margin:18px 6px 0;padding:13px 25px;border-radius:999px;background:var(--accent);color:#fff!important;text-decoration:none!important}

/* ARTICLE */
.br-article{background:#fff;color:var(--copy)}
.br-article-hero{position:relative;min-height:560px;display:flex;align-items:end;overflow:hidden;background:#211d1b}
.br-article-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.68}
.br-article-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,16,14,.06),rgba(20,16,14,.88))}
.br-article-hero-inner{position:relative;z-index:2;max-width:1080px;width:100%;margin:auto;padding:80px 30px;color:#fff}
.br-article-hero h1{max-width:900px;margin:12px 0 18px;padding:0;text-align:left;color:#fff;font-size:clamp(2.5rem,5vw,4.7rem);line-height:1.06;font-weight:100}
.br-article-hero .br-blog-meta{color:rgba(255,255,255,.65)}
.br-article-layout{max-width:1080px;margin:auto;padding:70px 25px 100px;display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:65px;align-items:start}
.br-article-content{min-width:0}
.br-article-intro{font-size:1.12rem;line-height:1.85;color:#5d5551;margin-bottom:42px}
.br-article-content h2{margin:52px 0 17px;padding:0;text-align:left;color:var(--ink);font-size:2rem;line-height:1.25;font-weight:200;scroll-margin-top:90px}
.br-article-content p{font-size:1.03rem;line-height:1.88;margin:0 0 20px}
.br-blog-inline-image{margin:38px 0 45px}.br-blog-inline-image img{display:block;width:100%;max-height:650px;object-fit:cover;border-radius:18px;box-shadow:0 14px 38px rgba(48,37,31,.10)}
.br-article-toc{position:sticky;top:90px;padding:25px;border:1px solid var(--line);border-radius:16px;background:#faf7f5}
.br-article-toc strong{display:block;margin-bottom:12px;color:var(--ink)}
.br-article-toc ul{list-style:none;margin:0;padding:0}.br-article-toc li{margin:0;border-bottom:1px solid #eadfd9}.br-article-toc li:last-child{border:0}.br-article-toc a{display:block;padding:9px 0;color:#746962!important;text-decoration:none!important;font-size:13px;line-height:1.45}.br-article-toc a:hover{color:var(--accent2)!important}
.br-article-related{padding:70px 20px;background:#faf7f5}.br-article-related-inner{max-width:1080px;margin:auto}.br-article-related h2{margin:0 0 30px;padding:0;text-align:left;font-weight:100;color:var(--ink);font-size:2.3rem}.br-related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.br-related-card{background:#fff;border:1px solid var(--line);border-radius:15px;overflow:hidden}.br-related-card img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}.br-related-card div{padding:18px}.br-related-card a{color:var(--ink)!important;text-decoration:none!important;font-size:1rem}
@media(max-width:950px){.br-blog-featured{grid-template-columns:1fr}.br-blog-grid{grid-template-columns:repeat(2,1fr)}.br-article-layout{grid-template-columns:1fr}.br-article-toc{position:relative;top:auto;order:-1}.br-related-grid{grid-template-columns:1fr 1fr}}
@media(max-width:650px){.br-blog-hero{padding:65px 18px 75px}.br-blog-hero h1{font-size:4rem}.br-blog-toolbar-wrap{position:relative}.br-blog-toolbar{padding:13px}.br-blog-search{flex-basis:100%}.br-blog-main{padding:45px 14px 70px}.br-blog-grid{grid-template-columns:1fr}.br-blog-featured-copy{padding:32px 24px}.br-blog-featured-image{min-height:270px}.br-article-hero{min-height:470px}.br-article-hero-inner{padding:55px 20px}.br-article-layout{padding:50px 18px 70px;gap:35px}.br-article-content h2{font-size:1.7rem}.br-related-grid{grid-template-columns:1fr}}


/* ARTICLE HIGHLIGHTS + AUTOR */
.br-article-content h2 {
  color: var(--accent2);
}

.br-article-content h2::after {
  content: "";
  display: block;
  width: 46px;
  height: 2px;
  margin-top: 12px;
  background: var(--accent);
}

.br-author-box {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 64px;
  padding: 26px 28px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(135deg, #faf7f5, #fff);
  box-shadow: 0 10px 30px rgba(55,43,37,.06);
}

.br-author-monogram {
  flex: 0 0 62px;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--night);
  color: #d7bbaa;
  font-size: 17px;
  letter-spacing: .08em;
  font-weight: 500;
}

.br-author-copy {
  min-width: 0;
}

.br-author-label {
  display: block;
  margin-bottom: 3px;
  color: var(--accent2);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.br-author-copy strong {
  display: block;
  color: var(--ink);
  font-size: 1.18rem;
  font-weight: 400;
}

.br-author-meta {
  margin-top: 4px;
  color: #8b7c73;
  font-size: 13px;
}

@media(max-width:650px) {
  .br-author-box {
    margin-top: 48px;
    padding: 21px;
    gap: 15px;
  }

  .br-author-monogram {
    flex-basis: 52px;
    width: 52px;
    height: 52px;
    font-size: 14px;
  }
}


/* =========================================================
   BEAUTYRELLA JOURNAL – INTERNE ARTIKELVERLINKUNGEN
   ========================================================= */
.br-article-content a.br-blog-inline-link {
  color: #a97f6d !important;
  font-weight: 500;
  text-decoration: underline !important;
  text-decoration-color: #d9c2b5 !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 4px !important;
  transition: color .2s ease, text-decoration-color .2s ease;
}

.br-article-content a.br-blog-inline-link:hover,
.br-article-content a.br-blog-inline-link:focus {
  color: #895f4f !important;
  text-decoration-color: #a97f6d !important;
}


/* =========================================================
   BEAUTYRELLA JOURNAL – UNIVERSAL ARTICLE HEADLINES
   Gilt verbindlich für ALLE Blogartikel.
   ========================================================= */
main.br-article .br-article-content h2,
main.br-article .br-article-content h3 {
  color: #b58f7c !important;
  font-weight: 300 !important;
  text-align: left !important;
}

main.br-article .br-article-content h2 {
  margin: 52px 0 18px !important;
  font-size: 2rem !important;
  line-height: 1.25 !important;
}

main.br-article .br-article-content h3 {
  margin: 34px 0 14px !important;
  font-size: 1.35rem !important;
  line-height: 1.35 !important;
}

main.br-article .br-article-content h2::after {
  content: "" !important;
  display: block !important;
  width: 55px !important;
  height: 3px !important;
  margin-top: 12px !important;
  background: #ccbaad !important;
}

main.br-article .br-article-content h3::after {
  content: "" !important;
  display: block !important;
  width: 34px !important;
  height: 2px !important;
  margin-top: 9px !important;
  background: #ddc9bd !important;
}

@media (max-width: 650px) {
  main.br-article .br-article-content h2 {
    font-size: 1.7rem !important;
    margin-top: 42px !important;
  }

  main.br-article .br-article-content h3 {
    font-size: 1.25rem !important;
  }
}
