/* Knusperholz — Branchen-Landingpages (Arztpraxen, Zahnärzte, Restaurants, ...)
   Gemeinsames Layout im Stil der Startseite. Nutzt die Farbvariablen der Seite
   (--ink, --gold-d, --cream, ...). Klassen mit Präfix br- kollidieren nicht mit lp-. */

.br-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}
.br-eyebrow {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-d);
  margin: 0 0 14px;
}
.br-h2 {
  font-size: clamp(1.8rem, 3.6vw, 2.8rem);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1.08;
  color: var(--ink);
  margin: 0 0 16px;
}
.br-h2 .acc,
.br-h1 .acc {
  color: var(--gold-d);
}
.br-lead {
  font-size: 1.08rem;
  line-height: 1.65;
  color: var(--ink-2);
  max-width: 640px;
  margin: 0;
}

/* Hero */
.br-hero {
  padding: 40px 0 64px;
}
@media (min-width: 768px) {
  .br-hero {
    padding: 56px 0 88px;
  }
}
.br-hero .lp-breadcrumb {
  margin-bottom: 28px;
}
.br-h1 {
  font-size: clamp(2.4rem, 6.2vw, 4.8rem);
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 0.98;
  color: var(--ink);
  margin: 0 0 22px;
}
.br-hero .br-lead {
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  margin-bottom: 30px;
}
.br-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.br-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 26px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  transition:
    background 0.15s,
    transform 0.15s;
}
.br-btn svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.br-btn-dark {
  background: var(--ink);
  color: var(--paper);
}
.br-btn-wa {
  background: #15803d;
  color: #fff;
}
@media (hover: hover) {
  .br-btn-dark:hover {
    background: #000;
    transform: translateY(-2px);
  }
  .br-btn-wa:hover {
    background: #116632;
    transform: translateY(-2px);
  }
}
.br-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.92rem;
  color: var(--ink-2);
}
.br-trust li {
  display: flex;
  align-items: center;
  gap: 8px;
}
.br-trust li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--moss);
  box-shadow: 0 0 0 3px rgba(90, 114, 66, 0.18);
}
.br-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 36px;
  margin: 40px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
}
.br-stats li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 0.9rem;
  color: var(--ink-3);
}
.br-stats b {
  font-size: 1.35rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--ink);
}

/* Leistungen: nummerierte Liste in zwei Spalten */
.br-section {
  padding: 72px 0;
  border-top: 1px solid var(--line-soft);
}
@media (min-width: 768px) {
  .br-section {
    padding: 96px 0;
  }
}
.br-alt {
  background: var(--paper-2);
}
.br-list {
  display: grid;
  grid-template-columns: 1fr;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: br;
}
@media (min-width: 768px) {
  .br-list {
    grid-template-columns: 1fr 1fr;
    column-gap: 56px;
  }
}
.br-list li {
  counter-increment: br;
  display: grid;
  grid-template-columns: 44px 1fr;
  column-gap: 8px;
  padding: 24px 0;
  border-top: 1px solid var(--line);
}
.br-list li::before {
  content: counter(br, decimal-leading-zero);
  grid-row: 1/3;
  font-family: Georgia, serif;
  font-size: 1.05rem;
  color: var(--gold-d);
  line-height: 1.5;
}
.br-list h3 {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 6px;
}
.br-list p {
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0;
}

/* KI-Abschnitt: Text links, Punkte rechts */
.br-split {
  display: grid;
  gap: 32px;
}
@media (min-width: 900px) {
  .br-split {
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: start;
  }
}
.br-checks {
  margin: 0;
  padding: 24px 26px;
  list-style: none;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 16px;
}
.br-checks li {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--ink-2);
}
.br-checks li + li {
  border-top: 1px solid var(--line-soft);
}
.br-checks li::before {
  content: "✓";
  color: var(--moss);
  font-weight: 800;
  flex-shrink: 0;
}

/* Abschluss */
.br-final {
  padding: 88px 0;
  text-align: center;
  border-top: 1px solid var(--line-soft);
}
.br-final .br-h2 {
  font-size: clamp(2.2rem, 5.5vw, 4rem);
  line-height: 0.98;
  margin-bottom: 20px;
}
.br-final .br-lead {
  margin: 0 auto 32px;
}
.br-final .br-cta-row {
  justify-content: center;
}

/* Weiterführende Links */
.br-more {
  padding: 56px 0 64px;
  border-top: 1px solid var(--line-soft);
}
.br-more-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}
@media (min-width: 640px) {
  .br-more-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
  }
}
.br-more h2 {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 12px;
}
.br-more ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.br-more a {
  display: inline-block;
  padding: 6px 0;
  color: var(--ink-2);
  text-decoration: none;
  font-size: 0.98rem;
}
@media (hover: hover) {
  .br-more a:hover {
    color: var(--gold-d);
  }
}

@media (max-width: 600px) {
  .br-cta-row .br-btn {
    flex: 1 1 100%;
  }
  .br-trust {
    flex-direction: column;
    gap: 10px;
  }
  .br-stats {
    gap: 12px 24px;
  }
}

/* ── Stadtseiten: "Ich kenne [Stadt]" mit drei Themen ── */
.br-topics{display:grid;gap:28px;margin:36px 0 0}
@media(min-width:900px){.br-topics{grid-template-columns:repeat(3,1fr);gap:40px}}
.br-topics h3{font-size:1.15rem;font-weight:800;letter-spacing:-0.01em;color:var(--ink);margin:0 0 8px;padding-top:18px;border-top:2px solid var(--gold-d)}
.br-topics p{font-size:0.98rem;line-height:1.65;color:var(--ink-2);margin:0}
.br-topics strong{color:var(--ink);font-weight:700}
.br-anchors-intro{margin:36px 0 0;color:var(--ink-2);font-size:0.98rem}

/* ── Branchen-Matrix im neuen Rahmen ── */
.br-matrix-wrap .lp-matrix{margin-top:32px}

/* ── FAQ wie auf der Startseite (Variante A): links Kopf, rechts Fragen ── */
.br-faq-grid{display:grid;gap:8px}
@media(min-width:960px){
  .br-faq-grid{grid-template-columns:minmax(0,0.9fr) minmax(0,1.5fr);column-gap:72px;align-items:start}
  .br-faq-head{grid-column:1;grid-row:1}
  .br-faq-more{grid-column:1;grid-row:2}
  .br-faq-list{grid-column:2;grid-row:1/4}
}
.br-faq-item{position:relative;border-top:1px solid var(--line)}
.br-faq-item:last-child{border-bottom:1px solid var(--line)}
.br-faq-item::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gold-d);transform:scaleY(0);transform-origin:top;transition:transform .35s cubic-bezier(.4,0,.2,1)}
.br-faq-item.open::before{transform:scaleY(1)}
.br-faq-item h3{margin:0;font:inherit}
.br-faq-q{display:flex;width:100%;align-items:center;justify-content:space-between;gap:16px;background:none;border:0;padding:22px 4px;text-align:left;
  font:inherit;font-size:clamp(1.02rem,1.5vw,1.18rem);font-weight:800;letter-spacing:-0.01em;line-height:1.3;color:var(--ink);cursor:pointer;transition:color .2s}
@media(hover:hover){.br-faq-q:hover{color:var(--gold-d)}}
.br-faq-q:focus-visible{outline:2px solid var(--gold-d);outline-offset:2px;border-radius:8px}
.br-faq-icon{width:24px;height:24px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.br-faq-icon::after{content:"";width:10px;height:10px;border-right:2px solid var(--ink-2);border-bottom:2px solid var(--ink-2);transform:translateY(-3px) rotate(45deg);transition:transform .3s,border-color .3s}
.br-faq-item.open .br-faq-q{color:var(--gold-d);padding-left:22px}
.br-faq-item.open .br-faq-icon::after{transform:translateY(3px) rotate(-135deg);border-color:var(--gold-d)}
.br-faq-a{display:grid;grid-template-rows:0fr;visibility:hidden;padding:0 4px 0 22px;color:var(--ink-2);font-size:0.98rem;line-height:1.7;
  transition:grid-template-rows .35s cubic-bezier(.4,0,.2,1),visibility 0s linear .35s}
.br-faq-a > div{min-height:0;overflow:hidden}
.br-faq-a > div::after{content:"";display:block;height:22px}
.br-faq-item.open .br-faq-a{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .35s cubic-bezier(.4,0,.2,1),visibility 0s}
.br-faq-more{border-top:1px solid var(--line);padding-top:24px;margin-top:28px}
.br-faq-more p{margin:0 0 6px;color:var(--ink-2);font-size:0.95rem;line-height:1.55}
.br-faq-more .t{font-size:1.1rem;font-weight:800;color:var(--ink)}
.br-faq-more .br-btn{margin-top:12px;padding:13px 22px;font-size:0.95rem}
@media(max-width:768px){.br-faq-q{padding:16px 2px;font-size:1rem}.br-faq-item.open .br-faq-q{padding-left:16px}.br-faq-a{padding-left:16px}}
@media(prefers-reduced-motion:reduce){.br-faq-a,.br-faq-item.open .br-faq-a,.br-faq-icon::after,.br-faq-item::before{transition:none}}

/* ── Ratgeber-Übersicht: Kartenraster ── */
.br-hub{display:grid;grid-template-columns:1fr;gap:12px;margin:32px 0 0;padding:0;list-style:none}
@media(min-width:640px){.br-hub{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.br-hub{grid-template-columns:repeat(3,1fr)}}
.br-hub a{display:block;height:100%;padding:20px 22px;background:var(--cream);border:1px solid var(--line);border-radius:14px;text-decoration:none;transition:border-color .15s,transform .15s}
.br-hub b{display:block;font-size:1.05rem;font-weight:800;color:var(--ink);margin-bottom:4px}
.br-hub span{display:block;font-size:0.92rem;line-height:1.5;color:var(--ink-2)}
@media(hover:hover){.br-hub a:hover{border-color:var(--gold-d);transform:translateY(-2px)}.br-hub a:hover b{color:var(--gold-d)}}