.hero::before {
  content        : 'FASTEN';
}



/* ─────────────────────────────────────────────
   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 {
letter-spacing : 0.2em;
  text-transform : uppercase;
opacity        : 0.55;
  display        : none;
  margin-bottom  : 0.5rem;
}


/* ── 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;
  padding       : 0.8rem 1rem;
  background    : var(--main-bg-color2);
  border        : 1px solid var(--border);
  border-radius : 2px;
  line-height   : 1.55;
  font-style: italic;
  font-size: 14px !important;

}

.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-style   : italic;
margin       : 0;
  line-height  : 1.7;
}

/* ── Fastenarten-Karten ── */

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


.fasten-karte {
  background    : white !important;
  border        : 1px solid #f2f2f2;
  border-radius : 2px;
  padding       : 1.8rem;
  border-left		: 10px solid white;
  transition    : border-color 0.2s, transform 0.2s;
}

article.fasten-karte.buchingerfasten {
  border-color: var(--color-buchinger);
}
article.fasten-karte.basenfasten {
  border-color: var(--color-basenfasten);
}
article.fasten-karte.vitalfasten {
  border-color: var(--color-vitalfasten);
}

.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 {
margin-top    : 0;
  margin-bottom : 0.6rem;
}


.fasten-karte .karte-tag {
letter-spacing : 0.12em;
  text-transform : uppercase;
  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 {
margin-bottom: 0;
  line-height  : 1.75;
}

.fasten-karte .mehr-link {
  display        : inline-flex;
  align-items    : center;
  gap            : 5px;
letter-spacing : 0.08em;
  text-transform : uppercase;
  text-decoration: none;
  margin-top     : 1rem;
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 {
flex-shrink: 0;
  margin-top : 2px;
}

.info-box p {
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;
letter-spacing : 0.12em;
  text-transform : uppercase;
}

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

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

.sidebar-card-body p {
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);
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;
margin-top : 8px;
}

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

/* ── Navigation Liste ── */

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

.nav-list li a {
  display         : flex;
  align-items     : center;
  gap             : 8px;
  padding         : 0.6rem 0;
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 {
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;
}

.kontakt-item .k-icon {
flex-shrink: 0;
  margin-top : 2px;
}

.kontakt-item a {
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; }