.banner,
#breadcrump,
#collagen-wrapper .container {
	display: none;
}


section {
	padding-top:unset;
}

/* ─────────────────────────────────────────────
   HERO
───────────────────────────────────────────── */

.hero {
  background      : var(--main-bg-color);
  padding         : 6rem 4rem 4rem;
  text-align      : center;
  border-bottom   : 1px solid var(--border);
  position        : relative;
  overflow        : hidden;
}

.hero::before {
  content        : 'HEILFASTEN';
  font-family    : 'Cormorant Garamond', serif;
  font-size      : 14vw;
  font-weight    : 600;
  color          : rgba(109,26,52,0.04);
  position       : absolute;
  top            : 10px;
  left           : 50%;
  transform      : translateX(-50%);
  white-space    : nowrap;
  pointer-events : none;
  user-select    : none;
}

.eyebrow {
  font-size      : 0.65rem;
  font-weight    : 500;
  letter-spacing : 0.18em;
  text-transform : uppercase;
  color          : var(--main-red-color);
  display        : flex;
  align-items    : center;
  justify-content: center;
  gap            : 0.8rem;
  margin-bottom  : 1rem;
  position       : relative;
  z-index        : 1;
}

.eyebrow::before,
.eyebrow::after {
  content    : '';
  width      : 14px;
  height     : 1px;
  background : var(--main-red-color);
}

.hero h1 {
  font-family   : 'Cormorant Garamond', serif;
  font-size     : clamp(2.5rem, 5vw, 4rem);
  font-weight   : 300;
  color: var(--charcoal) !important;
  line-height: 1.15 !important;  
  margin-bottom : 1.2rem;
  position      : relative;
  z-index       : 1;
  text-align:center !important;
}

.hero h1 em {
  font-style : italic;
  color      : var(--main-red-color);
}

.hero-sub {
  font-size   : 0.95rem;
  color       : var(--muted);
  max-width   : 600px;
  margin      : 0 auto 2.5rem;
  line-height : 1.8;
  position    : relative;
  z-index     : 1;
}

/* ── Inhaltsverzeichnis ── */

.toc {
  display         : flex;
  gap             : 8px;
  flex-wrap       : wrap;
  justify-content : center;
  position        : relative;
  z-index         : 1;
}

.toc a {
  font-size      : 0.72rem;
  font-weight    : 400;
  letter-spacing : 0.06em;
  color          : var(--main-red-color);
  text-decoration: none;
  padding        : 0.35rem 0.9rem;
  border         : 1px solid rgba(109,26,52,0.25);
  border-radius  : 999px;
  transition     : all 0.2s;
}

.toc a:hover {
  background   : var(--main-blue-color);
  color        : white !important;
  border-color : var(--main-blue-color);
}

/* ─────────────────────────────────────────────
   ZWEISPALTIGES LAYOUT
───────────────────────────────────────────── */

.layout {
  display               : grid;
  grid-template-columns : 1fr 300px;
  gap                   : 4rem;
  max-width             : 1160px;
  margin                : 0 auto;
  padding               : 4rem;
  align-items           : start;
}

@media (max-width: 960px) {
  .layout {
    grid-template-columns : 1fr;
    padding               : 2.5rem 2rem;
  }
  .sidebar { position: static; }
}

/* ─────────────────────────────────────────────
   HAUPTINHALT
───────────────────────────────────────────── */

.artikel section {
  margin-bottom  : 4rem;
  padding-bottom : 4rem;
  border-bottom  : 1px solid rgba(109,26,52,0.08);
  scroll-margin-top: 2rem;
}

.artikel section:last-child {
  border-bottom : none;
  margin-bottom : 0;
  padding-bottom: 0;
}

.section-num {
  font-size      : 0.6rem;
  font-weight    : 500;
  letter-spacing : 0.2em;
  text-transform : uppercase;
  color          : var(--main-red-color);
  opacity        : 0.55;
  display        : none;
  margin-bottom  : 0.5rem;
}

.artikel h2 {
  font-family   : 'Cormorant Garamond', serif;
  font-size     : 2rem;
  font-weight   : 400;
  color         : var(--charcoal);
  line-height   : 1.25;
  margin-bottom : 1.2rem;
}

.artikel h3 {
  font-family   : 'Cormorant Garamond', serif;
  font-size     : 1.2rem;
  font-weight   : 400;
  color         : var(--charcoal);
  margin-top    : 2rem;
  margin-bottom : 0.8rem;
}

.artikel p {
  font-size    : 0.92rem;
  color        : #555;
  line-height  : 1.9;
  margin-bottom: 1rem;
}

.artikel strong {
  font-weight : 500;
  color       : var(--charcoal);
}

/* ── Nutzen-Liste als Grid ── */

.vorteile {
  list-style            : none;
  margin-top            : 1.5rem;
  display               : grid;
  grid-template-columns : 1fr 1fr;
  gap                   : 8px;
}

@media (max-width: 600px) {
  .vorteile { grid-template-columns: 1fr; }
}

.vorteile li {
  display       : flex;
  gap           : 10px;
  align-items   : flex-start;
  font-size     : 0.85rem;
  color         : #555;
  padding       : 0.8rem 1rem;
  background    : var(--main-bg-color2);
  border        : 1px solid var(--border);
  border-radius : 2px;
  line-height   : 1.55;
}

.vorteile li::before {
  content       : '';
  width         : 6px;
  height        : 6px;
  border-radius : 50%;
  background    : var(--main-red-color);
  flex-shrink   : 0;
  margin-top    : 5px;
}

/* ── Hervorgehobenes Zitat ── */

.highlight {
  background    : rgba(109,26,52,0.05);
  border-left   : 3px solid var(--main-red-color);
  padding       : 1.3rem 1.6rem;
  margin        : 1.8rem 0;
  border-radius : 0 2px 2px 0;
}

.highlight p {
  font-family  : 'Cormorant Garamond', serif;
  font-style   : italic;
  font-size    : 1.1rem;
  color        : var(--main-red-color);
  margin       : 0;
  line-height  : 1.7;
}

/* ── Fastenarten-Karten ── */

.fastenarten {
  display        : flex;
  flex-direction : column;
  gap            : 16px;
  margin-top     : 1.8rem;
}

.fasten-karte {
  background    : var(--main-bg-color2);
  border        : 1px solid var(--border);
  border-radius : 2px;
  padding       : 1.8rem;
  border-left   : 4px solid var(--main-red-color);
  transition    : border-color 0.2s, transform 0.2s;
}

.fasten-karte:hover { transform: translateX(4px); }

.fasten-karte.blue  { border-left-color: var(--main-blue-color); }
.fasten-karte.earth { border-left-color: var(--earth); }

.fasten-karte h3 {
  font-family   : 'Cormorant Garamond', serif;
  font-size     : 1.25rem;
  font-weight   : 600;
  margin-top    : 0;
  margin-bottom : 0.6rem;
  color         : var(--charcoal);
}

.fasten-karte .karte-tag {
  font-size      : 0.62rem;
  font-weight    : 500;
  letter-spacing : 0.12em;
  text-transform : uppercase;
  color          : #fff;
  background     : var(--main-red-color);
  padding        : 2px 8px;
  border-radius  : 1px;
  display        : inline-block;
  margin-bottom  : 0.8rem;
}

.fasten-karte.blue  .karte-tag { background: var(--main-blue-color); }
.fasten-karte.earth .karte-tag { background: var(--earth); }

.fasten-karte p {
  font-size    : 0.88rem;
  color        : #666;
  margin-bottom: 0;
  line-height  : 1.75;
}

.fasten-karte .mehr-link {
  display        : inline-flex;
  align-items    : center;
  gap            : 5px;
  font-size      : 0.72rem;
  font-weight    : 500;
  letter-spacing : 0.08em;
  text-transform : uppercase;
  text-decoration: none;
  margin-top     : 1rem;
  color          : var(--main-red-color);
  transition     : gap 0.2s;
}

.fasten-karte.blue  .mehr-link { color: var(--main-blue-color); }
.fasten-karte.earth .mehr-link { color: var(--earth); }

.fasten-karte .mehr-link:hover { gap: 9px; }
.fasten-karte .mehr-link::after { content: '→'; }

/* ── Info-Box ── */

.info-box {
  background    : var(--main-bg-color2);
  border        : 1px solid var(--border);
  border-radius : 2px;
  padding       : 1.5rem;
  margin        : 1.5rem 0;
  display       : flex;
  gap           : 1rem;
  align-items   : flex-start;
}

.info-box-icon {
  font-size  : 1.2rem;
  color      : var(--main-blue-color);
  flex-shrink: 0;
  margin-top : 2px;
}

.info-box p {
  font-size    : 0.88rem;
  color        : #666;
  margin       : 0;
  line-height  : 1.75;
}

/* ─────────────────────────────────────────────
   SIDEBAR
───────────────────────────────────────────── */

.sidebar {
  position   : sticky;
  top        : 6rem;
  display    : flex;
  flex-direction: column;
  gap        : 1rem;
}

.sidebar-card {
  background    : var(--main-bg-color2);
  border        : 1px solid var(--border);
  border-radius : 2px;
  overflow      : hidden;
}

.sidebar-card-head {
  background     : var(--main-red-color);
  padding        : 0.85rem 1.2rem;
  font-size      : 0.68rem;
  font-weight    : 500;
  letter-spacing : 0.12em;
  text-transform : uppercase;
  color          : #fff;
}

.sidebar-card-head.blue { background: var(--main-blue-color); }

.sidebar-card-body {
  padding : 1.3rem;
}

.sidebar-card-body p {
  font-size    : 0.85rem;
  color        : #777;
  line-height  : 1.75;
  margin-bottom: 1rem;
}

.sidebar-btn {
  display        : block;
  width          : 100%;
  padding        : 0.7rem 1rem;
  text-align     : center;
  background     : var(--main-red-color);
  color          : #fff;
  font-family    : 'DM Sans', sans-serif;
  font-size      : 0.72rem;
  font-weight    : 500;
  letter-spacing : 0.1em;
  text-transform : uppercase;
  text-decoration: none;
  border-radius  : 1px;
  transition     : background 0.2s;
  border         : 1px solid var(--main-red-color);
}

.sidebar-btn:hover { background: var(--main-red2-color); border-color: var(--main-red2-color); }

.sidebar-btn.outline {
  background : transparent;
  color      : var(--main-red-color);
  margin-top : 8px;
}

.sidebar-btn.outline:hover {
  background : var(--main-red-color);
  color      : #fff;
}

/* ── Navigation Liste ── */

.nav-list { list-style: none; }

.nav-list li a {
  display         : flex;
  align-items     : center;
  gap             : 8px;
  padding         : 0.6rem 0;
  font-size       : 0.85rem;
  color           : #555;
  text-decoration : none;
  border-bottom   : 1px solid rgba(109,26,52,0.06);
  transition      : color 0.2s, padding-left 0.2s;
}

.nav-list li:last-child a { border-bottom: none; }

.nav-list li a:hover {
  color        : var(--main-red-color);
  padding-left : 4px;
}

.nav-list li a::before {
  content       : '';
  width         : 4px;
  height        : 4px;
  border-radius : 50%;
  background    : var(--main-red-color);
  flex-shrink   : 0;
  opacity       : 0.35;
  transition    : opacity 0.2s;
}

.nav-list li a:hover::before { opacity: 1; }

/* ── Kontakt-Box ── */

.kontakt-item {
  display       : flex;
  gap           : 8px;
  align-items   : flex-start;
  margin-bottom : 0.6rem;
  font-size     : 0.85rem;
}

.kontakt-item .k-icon {
  color      : var(--main-red-color);
  flex-shrink: 0;
  margin-top : 2px;
  font-size  : 13px;
}

.kontakt-item a {
  color           : #555;
  text-decoration : none;
}

.kontakt-item a:hover { color: var(--main-red-color); }

/* ─────────────────────────────────────────────
   ANIMATIONEN
───────────────────────────────────────────── */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero > * {
  animation: fadeUp 0.6s ease both;
}

.hero .eyebrow    { animation-delay: 0s; }
.hero h1          { animation-delay: 0.1s; }
.hero .hero-sub   { animation-delay: 0.2s; }
.hero .toc        { animation-delay: 0.3s; }