:root {
      --text: #000000;
      --muted: #6d6d6d;
      --border: #aaaaaa;
      --accent: #0066cc;
      --heading: #2a2a2a;
      --radius: 10px;
      --dur: 400ms;
      --ease: cubic-bezier(.22,.61,.36,1);
    }

    body {
      font-family: system-ui, Segoe UI, Roboto, Arial, sans-serif;
      margin: 0;
      padding: 0;
      color: var(--text);
      background: #000000;
    }

    .faq {
      padding: clamp(16px, 3vw, 40px);
      max-width: 900px;
      margin-inline: auto;
    }

    .faq__title {
      margin: 0 0 12px;
      text-align: center;
      color: var(--heading);
      font-weight: 800;
      font-size: clamp(1.8rem, 1.1rem + 2vw, 2.6rem);
    }

    .faq__intro {
      margin: 0 0 32px;
      text-align: center;
      color: var(--muted);
      font-size: 1.1rem;
      line-height: 1.6;
    }

    .faq__list {
      border-top: 1px solid var(--border);
    }

    details.faq__item {
      border-bottom: 1px solid var(--border);
      padding-block: 6px;
    }

    summary.faq__question {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 14px 8px;
      font-weight: 600;
      font-size: 1.2rem;
      color: var(--accent);
      cursor: pointer;
      list-style: none;
      transition: background-color 0.3s ease, color 0.3s ease;
      border-radius: var(--radius);
      user-select: none;
    }

    summary.faq__question::-webkit-details-marker { display: none; }
    summary.faq__question::marker { content: ""; }

      summary.faq__question:hover {

      color: #444;
    }

    /* Icon */
    .faq__toggle {
      position: relative;
      flex: none;
      width: 18px;
      height: 18px;
      transition: transform var(--dur) var(--ease);
    }
    .faq__toggle::before,
    .faq__toggle::after {
      content: "";
      position: absolute;
      inset: 0;
      margin: auto;
      background: currentColor;
      border-radius: 2px;
    }
    .faq__toggle::before {
      width: 100%;
      height: 2px;
    }
    .faq__toggle::after {
      width: 2px;
      height: 100%;
    }
    details[open] .faq__toggle {
      transform: rotate(180deg);
    }
    details[open] .faq__toggle::after {
      height: 0;
    }

    /* Panel */
    .faq__panel {
      overflow: hidden;
      max-height: 0;
      opacity: 0;
      transform: translateY(-6px);
      transition:
        max-height var(--dur) var(--ease),
        opacity var(--dur) ease,
        transform var(--dur) ease;
    }
    .faq__panel.show {
      opacity: 1;
      transform: translateY(0);
    }

    .faq__panel-inner {
      padding: 0 4px 12px;
    }

    .faq__panel li {
      margin: 8px 0;
      line-height: 1.6;
    }

    .faq__panel a {
      color: var(--accent);
      text-decoration: none;
    }
    .faq__panel a:hover {
      text-decoration: underline;
    }









/* 2. h2 in FAQ, Angebote, Bewertungen, Jobs nicht hoverbar */
#faq h2,
#angebote h2,
#leistungen h2,
#jobs h2,
#review-section h2,
#text h2,
#pati h2,
#bewertungen h2 {
    pointer-events: none; /* verhindert Klicks und Hover */
    cursor: default;      /* normaler Pfeil-Cursor */
    color: inherit;       /* Farbe bleibt unverändert */
}


/* === FAQ-Fragen schwarz machen === */
summary.faq__question {
  color: #000000 !important;   /* Textfarbe schwarz */
}

/* Hover-Farbe leicht dunkler, aber dezent */
summary.faq__question:hover {
  color: #000000b0 !important;
}

/* Das Plus-/Minus-Icon soll sich anpassen */
.faq__toggle::before,
.faq__toggle::after {
  background: #000000 !important;
}



/* === FAQ-Fragen in #007bff einfärben === */
summary.faq__question {
  color: #007bff !important;   /* Text der Frage */
}

/* Hover-Farbe ein Tick dunkler */
summary.faq__question:hover {
  color: #000000 !important;
}

/* Plus-/Minus-Icon in gleicher Farbe */
.faq__toggle::before,
.faq__toggle::after {
  background: #000000 !important;
}