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



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

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

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

/* ─────────────────────────────────────────────
   KATEGORIE-FILTER
───────────────────────────────────────────── */

.filter-bar {
  display       : flex;
  gap           : 8px;
  flex-wrap     : wrap;
  margin-bottom : 2.5rem;
}

.filter-btn {
  padding        : 0.4rem 1rem;
  font-family    : 'DM Sans', sans-serif;
  font-size      : 0.72rem;
  font-weight    : 400;
  letter-spacing : 0.08em;
  text-transform : uppercase;
  border         : 1px solid var(--border);
  background     : transparent;
  color          : var(--muted);
  border-radius  : 999px;
  cursor         : pointer;
  transition     : all 0.2s;
}

.filter-btn:hover,
.filter-btn.active {
  background   : var(--main-blue-color);
  border-color : var(--main-blue-color);
  color        : #fff;
}

/* ─────────────────────────────────────────────
   FAQ-GRUPPEN
───────────────────────────────────────────── */

.faq-group {
  margin-bottom : 3rem;
}

.faq-group[data-cat].hidden { display: none; }

.group-title {
  font-size      : 0.68rem;
  font-weight    : 500;
  letter-spacing : 0.16em;
  text-transform : uppercase;
  color          : var(--main-red-color);
  display        : flex;
  align-items    : center;
  gap            : 0.8rem;
  margin-bottom  : 1rem;
}

.group-title::after {
  content    : '';
  flex       : 1;
  height     : 1px;
  background : var(--border);
}

/* ─────────────────────────────────────────────
   ACCORDION
───────────────────────────────────────────── */

.faq-item {
  background    : var(--main-bg-color2);
  border        : 1px solid var(--border);
  border-radius : 2px;
  margin-bottom : 6px;
  overflow      : hidden;
  transition    : border-color 0.2s;
}

.faq-item.open { border-color: var(--main-red-color); }
.faq-item.hidden-search { display: none; }

.faq-q {
  display         : flex;
  align-items     : center;
  justify-content : space-between;
  gap             : 1rem;
  padding         : 1.1rem 1.4rem;
  cursor          : pointer;
  user-select     : none;
  transition      : background 0.15s;
}

.faq-q:hover { background: rgba(109,26,52,0.03); }

font-size: 18px;
  font-weight: 400;
  color: var(--main-red-color);
  line-height: 1.5;
.faq-item.open .faq-q-text { color: var(--main-red-color); }

.faq-icon {
  width         : 24px;
  height        : 24px;
  border-radius : 50%;
  border        : 1px solid var(--border);
  display       : flex;
  align-items   : center;
  justify-content: center;
  flex-shrink   : 0;
  font-size     : 14px;
  color         : var(--muted);
  transition    : all 0.2s;
}

.faq-item.open .faq-icon {
  background   : var(--main-red-color);
  border-color : var(--main-red-color);
  color        : #fff;
  transform    : rotate(45deg);
}

.faq-a {
  max-height  : 0;
  overflow    : hidden;
  transition  : max-height 0.35s ease, padding 0.2s;
  padding     : 0 1.4rem;
}

.faq-item.open .faq-a {
  max-height : 600px;
  padding    : 0 1.4rem 1.4rem;
}

.faq-a p {
  font-size   : 16px;
  color       : #666;
  line-height : 1.85;
  border-top  : 1px solid var(--border);
  padding-top : 1rem;
}

.faq-a a {
  color           : var(--main-red-color);
  text-decoration : none;
}

.faq-a a:hover { text-decoration: underline; }

/* Keine Ergebnisse */
.no-results {
  display     : none;
  text-align  : center;
  padding     : 3rem;
  color       : var(--muted);
  font-size   : 0.9rem;
}

.no-results.visible { display: block; }

/* ─────────────────────────────────────────────
   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); }

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

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

.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-Items */
.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;
}

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

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

/* Stat-Karten in Sidebar */
.stat-grid {
  display               : grid;
  grid-template-columns : 1fr 1fr;
  gap                   : 8px;
  margin-bottom         : 1rem;
}

.stat-item {
  background    : var(--main-bg-color);
  border-radius : 2px;
  padding       : 0.8rem;
  text-align    : center;
}

.stat-num {
  font-family : 'Cormorant Garamond', serif;
  font-size   : 1.6rem;
  font-weight : 400;
  color       : var(--main-red-color);
  display     : block;
  line-height : 1;
}

.stat-label {
  font-size      : 0.65rem;
  letter-spacing : 0.08em;
  text-transform : uppercase;
  color          : #aaa;
  display        : block;
  margin-top     : 3px;
}

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

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

.hero > * { animation: fadeUp 0.55s ease both; }
.hero .eyebrow    { animation-delay: 0s; }
.hero h1          { animation-delay: 0.08s; }
.hero .hero-sub   { animation-delay: 0.16s; }
.hero .search-wrap{ animation-delay: 0.24s; }