@charset "UTF-8";
/* Custom site styles to approximate layout from 
   - Two-column layout with main content left and sidebar right
   - Large page title, light muted meta, subtle boxes for previews
   - Responsive breakpoints
*/
/* line 7, app/assets/stylesheets/application_custom.scss */
:root {
  --max-width: 1100px;
  --content-gap: 32px;
  --muted: #666;
  --accent: #0b66d1;
  /* blue link color */
  --card-bg: #f3f4f6;
}

/* line 14, app/assets/stylesheets/application_custom.scss */
.nav-link {
  float: right;
  margin: 10px;
}

/* line 19, app/assets/stylesheets/application_custom.scss */
.sidebar-feature-thumb {
  width: 230px;
  height: 120px;
  min-width: 230px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 6px;
}

/* line 29, app/assets/stylesheets/application_custom.scss */
.sidebar-feature-title {
  font-size: 17px;
  font-weight: bold;
  margin: 0;
  line-height: 1.3;
}

/* line 36, app/assets/stylesheets/application_custom.scss */
.widget-title {
  font-size: 25px !important;
}

/* line 38, app/assets/stylesheets/application_custom.scss */
.promo-link-block__image {
  width: 200px !important;
}

/* line 43, app/assets/stylesheets/application_custom.scss */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color: #222;
  line-height: 1.6;
  margin: 0;
  background: #fff;
}

/* line 51, app/assets/stylesheets/application_custom.scss */
.main.container {
  max-width: var(--max-width);
  margin: 24px auto;
  padding: 0 16px;
  display: grid;
  grid-template-columns: 1fr 320px;
  grid-gap: var(--content-gap);
  align-items: start;
}

/* Header structure */
/* line 62, app/assets/stylesheets/application_custom.scss */
.header-inner {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 12px;
}

/* Force header container to behave as a horizontal flex row (overrides .container grid in other contexts) */
/* line 71, app/assets/stylesheets/application_custom.scss */
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

/* line 80, app/assets/stylesheets/application_custom.scss */
.site-title {
  font-size: 48px;
  font-weight: 700;
  margin: 8px 0;
  letter-spacing: -1px;
}

/* line 87, app/assets/stylesheets/application_custom.scss */
.site-tagline {
  color: var(--muted);
  margin-top: 6px;
}

/* line 92, app/assets/stylesheets/application_custom.scss */
.main-hero {
  background: var(--card-bg);
  border-radius: 6px;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9aa0a6;
  font-size: 20px;
  margin-bottom: 18px;
}

/* line 102, app/assets/stylesheets/application_custom.scss */
.article-title {
  font-size: 32px;
  color: var(--accent);
  margin: 12px 0 8px 0;
  text-decoration: underline;
}

/* line 109, app/assets/stylesheets/application_custom.scss */
.article-excerpt {
  color: var(--muted);
  margin-bottom: 20px;
}

/* line 114, app/assets/stylesheets/application_custom.scss */
.card-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 18px;
}

/* line 121, app/assets/stylesheets/application_custom.scss */
.preview-card {
  background: var(--card-bg);
  height: 140px;
  border-radius: 6px;
}

/* line 127, app/assets/stylesheets/application_custom.scss */
.sidebar {
  padding-left: 8px;
}

/* line 131, app/assets/stylesheets/application_custom.scss */
.widget {
  margin-bottom: 26px;
}

/* line 135, app/assets/stylesheets/application_custom.scss */
.widget h3 {
  font-size: 26px;
  margin-bottom: 10px;
}

/* line 140, app/assets/stylesheets/application_custom.scss */
.widget ul {
  padding-left: 18px;
}

/* line 142, app/assets/stylesheets/application_custom.scss */
a {
  color: var(--accent);
}

/* line 144, app/assets/stylesheets/application_custom.scss */
a:hover {
  text-decoration: underline;
}

/* Header / nav layout fix for current markup */
/* line 147, app/assets/stylesheets/application_custom.scss */
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* logo left, menu/button right */
  gap: 20px;
}

/* line 154, app/assets/stylesheets/application_custom.scss */
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}

/* line 156, app/assets/stylesheets/application_custom.scss */
.site-nav {
  display: flex;
  gap: 18px;
  align-items: center;
  margin-left: auto;
  /* push nav to the right */
}

/* line 163, app/assets/stylesheets/application_custom.scss */
.brand {
  margin-top: 0 !important;
}

/* line 165, app/assets/stylesheets/application_custom.scss */
.brand-logo {
  height: 130px;
  width: auto;
  display: block;
  border-radius: 6px;
}

/* make cut-magazine logo a bit darker/stronger */
/* line 173, app/assets/stylesheets/application_custom.scss */
.domain-cut-magazine-com .brand-logo {
  filter: brightness(0.78) contrast(1.08);
}

/* line 177, app/assets/stylesheets/application_custom.scss */
.site-nav .nav-link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  padding: 8px 6px;
  display: inline-block;
}

/* line 185, app/assets/stylesheets/application_custom.scss */
.site-nav .nav-link:hover {
  text-decoration: underline;
}

/* line 187, app/assets/stylesheets/application_custom.scss */
.menu-btn {
  display: none;
}

/* compact / stacked mobile */
@media (max-width: 980px) {
  /* line 191, app/assets/stylesheets/application_custom.scss */
  .header-inner {
    flex-direction: row;
  }
  /* line 192, app/assets/stylesheets/application_custom.scss */
  .site-nav {
    display: none;
  }
  /* line 193, app/assets/stylesheets/application_custom.scss */
  .menu-btn {
    display: inline-block;
  }
  /* line 194, app/assets/stylesheets/application_custom.scss */
  body.nav-open .site-nav {
    display: block;
    margin-top: 12px;
  }
}

/* Sidebar recent thumbnails */
/* Layout for article pages: content + sidebar side-by-side */
/* line 199, app/assets/stylesheets/application_custom.scss */
.content-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--content-gap);
  align-items: start;
}

/* Ensure article uses full column and sidebar sits to the side */
/* line 207, app/assets/stylesheets/application_custom.scss */
.article {
  grid-column: 1 / 2;
}

/* line 208, app/assets/stylesheets/application_custom.scss */
.content-grid > aside.sidebar {
  grid-column: 2 / 3;
}

/* line 210, app/assets/stylesheets/application_custom.scss */
.recent-thumb-img {
  width: 100%;
  height: 170px;
  object-fit: cover;
  display: block;
}

/* line 217, app/assets/stylesheets/application_custom.scss */
.sidebar .widget-title {
  font-size: 58px;
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.6px;
  margin-bottom: 14px;
}

/* line 225, app/assets/stylesheets/application_custom.scss */
.sidebar-feature-item {
  margin-bottom: 12px;
}

/* line 229, app/assets/stylesheets/application_custom.scss */
.sidebar-feature-item::after {
  content: "";
  display: block;
  clear: both;
}

/* line 235, app/assets/stylesheets/application_custom.scss */
.sidebar .sidebar-feature-link {
  display: block !important;
  text-decoration: none;
}

/* line 240, app/assets/stylesheets/application_custom.scss */
.sidebar .sidebar-feature-thumb {
  float: left;
  margin: 0 10px 10px 0;
  width: 112px;
}

/* line 246, app/assets/stylesheets/application_custom.scss */
.sidebar .sidebar-feature-img {
  width: 112px !important;
  height: 63px !important;
  max-width: 112px;
  object-fit: cover;
  display: block;
  border-radius: 6px;
}

/* line 255, app/assets/stylesheets/application_custom.scss */
.sidebar-feature-title {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: #2d3238;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.28;
  padding-top: 1px;
}

/* line 267, app/assets/stylesheets/application_custom.scss */
.sidebar-feature-link:hover .sidebar-feature-title {
  text-decoration: underline;
}

@media (max-width: 980px) {
  /* line 270, app/assets/stylesheets/application_custom.scss */
  .sidebar .widget-title {
    font-size: 40px;
  }
  /* line 271, app/assets/stylesheets/application_custom.scss */
  .sidebar .sidebar-feature-thumb {
    width: 106px;
  }
  /* line 272, app/assets/stylesheets/application_custom.scss */
  .sidebar .sidebar-feature-img {
    width: 106px !important;
    height: 60px !important;
  }
  /* line 273, app/assets/stylesheets/application_custom.scss */
  .sidebar-feature-title {
    font-size: 14px;
  }
}

/* Pagination styling */
/* line 277, app/assets/stylesheets/application_custom.scss */
.pagination-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

/* line 283, app/assets/stylesheets/application_custom.scss */
.pagination.custom-pagination {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: center;
}

/* extra safety spacing for helpers that collapse inline elements */
/* line 292, app/assets/stylesheets/application_custom.scss */
.pagination.custom-pagination > * {
  margin-right: 10px;
}

/* line 293, app/assets/stylesheets/application_custom.scss */
.pagination.custom-pagination > *:last-child {
  margin-right: 0;
}

/* line 295, app/assets/stylesheets/application_custom.scss */
.pagination.custom-pagination a,
.pagination.custom-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 14px;
  border: 1px solid #e3e3e8;
  border-radius: 999px;
  text-decoration: none;
  color: #1f2430;
  background: #fff;
  font-weight: 600;
  transition: all .18s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* line 313, app/assets/stylesheets/application_custom.scss */
.pagination.custom-pagination current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 14px;
  border: 1px solid #e3e3e8;
  border-radius: 999px;
  text-decoration: none;
  color: #1f2430;
  background: lightblue;
  font-weight: 600;
  transition: all .18s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* line 331, app/assets/stylesheets/application_custom.scss */
.pagination.custom-pagination a:hover {
  transform: translateY(-1px);
  border-color: #cfd3dd;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

/* line 337, app/assets/stylesheets/application_custom.scss */
.pagination.custom-pagination .current {
  background: linear-gradient(135deg, #111 0%, #2f2f34 100%);
  color: #fff;
  border-color: #111;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
  font-style: normal;
}

/* line 345, app/assets/stylesheets/application_custom.scss */
.pagination.custom-pagination em.current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 14px;
  border-radius: 999px;
  line-height: 1;
}

/* line 356, app/assets/stylesheets/application_custom.scss */
.pagination.custom-pagination .previous_page,
.pagination.custom-pagination .next_page {
  padding: 0 16px;
}

/* line 361, app/assets/stylesheets/application_custom.scss */
.pagination.custom-pagination .disabled {
  opacity: .45;
  pointer-events: none;
}

/* Keep index cards visually stable even if image metadata/caching is odd */
/* line 367, app/assets/stylesheets/application_custom.scss */
.post-list .card .thumb,
.post-list .card .card-img-top {
  aspect-ratio: 16 / 9;
}

/* line 372, app/assets/stylesheets/application_custom.scss */
.post-list .card .thumb {
  overflow: hidden;
  background: #f1f1f1;
}

/* line 377, app/assets/stylesheets/application_custom.scss */
.post-list .card .card-img-top {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Responsive */
@media (max-width: 980px) {
  /* line 386, app/assets/stylesheets/application_custom.scss */
  .main.container {
    grid-template-columns: 1fr;
  }
  /* line 387, app/assets/stylesheets/application_custom.scss */
  .site-title {
    font-size: 40px;
  }
  /* line 388, app/assets/stylesheets/application_custom.scss */
  .recent-thumb-img {
    height: 140px;
  }
}

/* Basic two-column layout for prominente */
/* line 2, app/assets/stylesheets/verticals_prominente.scss */
.articles-grid.two-column {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 24px;
}

/* line 8, app/assets/stylesheets/verticals_prominente.scss */
.main-col .grid {
  display: grid;
  gap: 22px;
  grid-template-columns: 1fr;
}

/* line 14, app/assets/stylesheets/verticals_prominente.scss */
.side-col .sidebar {
  background: #fff;
  border: 1px solid #eee;
  padding: 16px;
  border-radius: 8px;
}

/* line 21, app/assets/stylesheets/verticals_prominente.scss */
.widget {
  margin-bottom: 18px;
}

/* line 22, app/assets/stylesheets/verticals_prominente.scss */
.widget h3 {
  margin: 0 0 8px;
  font-size: 16px;
}

/* line 23, app/assets/stylesheets/verticals_prominente.scss */
.newsletter-form input[type="email"] {
  width: 100%;
  padding: 8px;
  margin-bottom: 8px;
}

/* line 24, app/assets/stylesheets/verticals_prominente.scss */
.newsletter-form button {
  width: 100%;
  padding: 8px;
  background: #c00;
  color: #fff;
  border: none;
  border-radius: 4px;
}

@media (max-width: 900px) {
  /* line 27, app/assets/stylesheets/verticals_prominente.scss */
  .articles-grid.two-column {
    grid-template-columns: 1fr;
  }
  /* line 28, app/assets/stylesheets/verticals_prominente.scss */
  .side-col {
    order: 2;
  }
  /* line 29, app/assets/stylesheets/verticals_prominente.scss */
  .main-col {
    order: 1;
  }
}

/* Article Show Page – 2026 Beauty Blog Style */
/* line 2, app/assets/stylesheets/welcome.scss */
h1, h2, h3, .widget-title {
  font-family: 'Playfair Display', serif;
}

/* line 6, app/assets/stylesheets/welcome.scss */
.featured-excerpt {
  text-decoration: none !important;
}

/* line 10, app/assets/stylesheets/welcome.scss */
a {
  text-decoration: none !important;
  color: inherit !important;
}

/* line 13, app/assets/stylesheets/welcome.scss */
.article-container {
  max-width: 800px;
  margin: 40px auto;
  padding: 20px;
  font-family: 'Playfair Display', serif;
  color: #333;
  background: #fff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  border-radius: 12px;
}

@media (max-width: 768px) {
  /* line 13, app/assets/stylesheets/welcome.scss */
  .article-container {
    margin: 20px 10px;
    padding: 15px;
  }
}

/* Hero Featured Image (high-CTR thumbnail) */
/* line 30, app/assets/stylesheets/welcome.scss */
.article-hero-image {
  width: 100%;
  height: auto;
  max-height: 600px;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 40px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* Title */
/* line 41, app/assets/stylesheets/welcome.scss */
.article-title {
  font-family: 'Playfair Display', serif;
  font-size: 2.8em;
  text-align: center;
  margin: 0 0 30px;
  color: #2c1a1d;
  /* Deep neutral for elegance */
  line-height: 1.2;
}

/* Article header title should match h2 font family */
/* line 51, app/assets/stylesheets/welcome.scss */
.article-header h1 {
  font-family: 'Playfair Display', serif;
}

/* Body Content */
/* line 56, app/assets/stylesheets/welcome.scss */
.article-body {
  font-size: 1.1em;
  line-height: 1.8;
  color: #444;
  /* If you add inline images later */
}

/* line 61, app/assets/stylesheets/welcome.scss */
.article-body p {
  margin-bottom: 1.6em;
  padding: 0 10px;
}

/* line 65, app/assets/stylesheets/welcome.scss */
.article-body h1 {
  font-family: 'Playfair Display', serif;
}

/* line 68, app/assets/stylesheets/welcome.scss */
.article-body h2 {
  font-family: 'Playfair Display', serif;
  font-size: 2em;
  margin: 2.5em 0 1em;
  color: #5a3f3f;
  /* Soft warm brown */
  position: relative;
  padding-bottom: 15px;
}

/* line 76, app/assets/stylesheets/welcome.scss */
.article-body h2:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 60px;
  height: 3px;
  background: #d4a5a5;
  /* Blush pink accent */
  border-radius: 2px;
}

/* line 88, app/assets/stylesheets/welcome.scss */
.article-body ul {
  margin: 1.5em 0;
  padding-left: 1.5em;
}

/* line 92, app/assets/stylesheets/welcome.scss */
.article-body ul li {
  margin-bottom: 0.8em;
  position: relative;
  padding-left: 10px;
}

/* line 97, app/assets/stylesheets/welcome.scss */
.article-body ul li:before {
  content: '•';
  color: #d4a5a5;
  position: absolute;
  left: 0;
}

/* line 106, app/assets/stylesheets/welcome.scss */
.article-body strong {
  color: #b07d7d;
  /* Subtle pink emphasis */
  font-weight: 600;
}

/* line 112, app/assets/stylesheets/welcome.scss */
.article-body img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 2em 0;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

/* CTA / Conclusion styling */
/* line 122, app/assets/stylesheets/welcome.scss */
.article-body p:last-of-type {
  font-size: 1.2em;
  font-weight: 600;
  color: #5a3f3f;
  text-align: center;
  padding: 2em 0;
  border-top: 1px solid #eee;
  margin-top: 3em;
}

/* Weiterlesen split (after first h2) */
/* line 133, app/assets/stylesheets/welcome.scss */
.read-more-wrap {
  display: flex;
  justify-content: center;
  margin: 14px 0 14px;
}

/* line 139, app/assets/stylesheets/welcome.scss */
.read-more-wrap.in-body {
  margin: 14px 0 14px;
}

/* line 143, app/assets/stylesheets/welcome.scss */
#readMoreBtn {
  border-radius: 999px;
}

/* line 145, app/assets/stylesheets/welcome.scss */
.hidden-preview-blur {
  position: relative;
  max-height: 82px;
  overflow: hidden;
  margin: 8px 0 6px;
}

/* line 152, app/assets/stylesheets/welcome.scss */
.hidden-preview-blur p {
  margin: 0;
  color: #5f6368;
  line-height: 1.6;
}

/* line 158, app/assets/stylesheets/welcome.scss */
.hidden-preview-blur::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 44px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.9) 68%, #fff 100%);
  backdrop-filter: blur(2px);
}

/* line 169, app/assets/stylesheets/welcome.scss */
.promo-link-list {
  margin: 14px 0 8px;
  background: #f3f3f3;
  border-left: 3px solid #bdbdbd;
  padding: 8px 10px;
}

/* line 176, app/assets/stylesheets/welcome.scss */
.promo-link-list__item {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  text-decoration: none;
  color: #3d3d3d;
  font-size: 20px;
  line-height: 1.45;
  font-style: italic;
}

/* line 187, app/assets/stylesheets/welcome.scss */
.promo-link-list__arrow {
  color: #5e5e5e;
  font-size: 20px;
  line-height: 1.2;
  margin-top: 2px;
}

/* line 194, app/assets/stylesheets/welcome.scss */
.promo-link-list__text {
  color: #3d3d3d;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* line 200, app/assets/stylesheets/welcome.scss */
.promo-link-list__item:hover .promo-link-list__text {
  color: #202020;
}

/* line 204, app/assets/stylesheets/welcome.scss */
#articleBodyHidden {
  overflow: hidden;
  max-height: 2200px;
  opacity: 1;
  transition: max-height 0.55s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.35s ease;
}

/* line 211, app/assets/stylesheets/welcome.scss */
#articleBodyHidden.is-hidden {
  max-height: 0;
  opacity: 0;
}

@media (max-width: 768px) {
  /* line 217, app/assets/stylesheets/welcome.scss */
  .read-more-wrap,
.read-more-wrap.in-body {
    margin-top: 10px;
  }
}