/* Page-specific styles for Schlüsseldienst Bad Hersfeld. Colors, spacing tokens and fonts are provided by global.css. */
.bh-page { background: var(--c-bg); color: var(--c-text); }
.bh-page * { box-sizing: border-box; }
.bh-page a { text-decoration: none; }
.bh-wrap { width: min(var(--container), calc(100% - 3rem)); margin-inline: auto; }
.bh-section { padding: 5.5rem 0; }

.bh-hero { padding: 2.2rem 0 5rem; background: var(--c-bg-alt); border-bottom: 1px solid var(--c-border); }
.bh-crumb { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; margin-bottom: 3rem; color: var(--c-muted); font-size: .84rem; }
.bh-crumb a { color: var(--c-text-soft); }
.bh-crumb a:hover { color: var(--primary); }
.bh-crumb i { font-size: .65rem; }
.bh-crumb span { color: var(--c-text); font-weight: 700; }
.bh-hero-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr); gap: 4.5rem; align-items: center; }
.bh-eyebrow, .bh-label { display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 1rem; color: var(--primary-hover); font-family: var(--font-display); font-size: .76rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.bh-eyebrow i { color: var(--primary); font-size: 1rem; }
.bh-hero h1, .bh-heading h2, .bh-context h2, .bh-faq-intro h2, .bh-contact h2 { margin: 0 0 1.25rem; color: var(--c-text); font-family: var(--font-display); font-size: clamp(2.3rem, 5vw, 4rem) !important; font-weight: 900; line-height: 1.08; letter-spacing: -.035em; }
.bh-lead { max-width: 62ch; margin: 0; color: var(--c-text-soft); font-size: 1.07rem; line-height: 1.75; }
.bh-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.bh-button { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 3.2rem; padding: .85rem 1.2rem; border: 1px solid transparent; border-radius: var(--radius); font-family: var(--font-display); font-weight: 800; transition: transform var(--transition), color var(--transition), background var(--transition), border-color var(--transition); }
.bh-button:hover { transform: translateY(-2px); }
.bh-button-main { background: var(--primary); color: var(--c-bg); box-shadow: var(--shadow-glow); }
.bh-button-main:hover { background: var(--primary-hover); color: var(--c-bg); }
.bh-button-line { border-color: var(--c-text-soft); color: var(--c-text); }
.bh-button-line:hover { border-color: var(--primary); color: var(--primary-hover); }
.bh-button-contrast { margin-top: 1.8rem; background: var(--c-dark); color: var(--c-bg); }
.bh-button-contrast:hover { background: var(--primary-hover); color: var(--c-bg); }
.bh-button-outline { border-color: var(--c-border); color: var(--c-text); }
.bh-button-outline:hover { border-color: var(--primary); color: var(--primary-hover); }

.bh-logbook { position: relative; padding: 1.2rem 1.5rem 1.5rem; border: 1px solid var(--c-border); border-radius: var(--radius-lg); background: var(--c-bg); box-shadow: var(--shadow-lg); }
.bh-logbook::before { content: ""; position: absolute; top: 0; bottom: 0; left: 3.85rem; border-left: 1px solid var(--primary-l); }
.bh-logbook-head { position: relative; display: grid; grid-template-columns: 1fr auto; gap: .3rem 1rem; padding-bottom: 1.2rem; border-bottom: 2px solid var(--c-text); }
.bh-logbook-head span { color: var(--c-text-soft); font-size: .66rem; font-weight: 700; letter-spacing: .08em; }
.bh-logbook-head strong { color: var(--c-text); font-family: var(--font-display); font-size: 1.3rem; font-weight: 900; }
.bh-logbook-head i { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--primary); font-size: 1.75rem; }
.bh-log-row { position: relative; display: grid; grid-template-columns: 2.25rem 1fr; gap: .75rem; align-items: start; padding: 1rem 0; border-bottom: 1px solid var(--c-border); }
.bh-log-num { display: grid; width: 2.15rem; height: 2.15rem; place-items: center; border-radius: var(--radius-pill); background: var(--c-bg); color: var(--primary-hover); font-family: var(--font-display); font-size: .8rem; font-weight: 900; }
.bh-log-row strong { display: block; color: var(--c-text); font-family: var(--font-display); font-size: .94rem; }
.bh-log-row p { margin: .2rem 0 0; color: var(--c-text-soft); font-size: .84rem; line-height: 1.45; }
.bh-logbook-foot { display: flex; align-items: center; gap: .5rem; margin: 1rem 0 0; color: var(--primary-hover); font-size: .82rem; font-weight: 800; }
.bh-logbook-foot i { color: var(--primary); }

.bh-context-layout { display: grid; grid-template-columns: minmax(220px, .65fr) minmax(0, 1.35fr); gap: 4.5rem; align-items: center; }
.bh-context-mark { position: relative; display: grid; min-height: 250px; padding: 1.5rem; align-content: space-between; border-radius: var(--radius-lg); background: var(--c-dark); box-shadow: var(--shadow-md); overflow: hidden; }
.bh-context-mark::after { content: ""; position: absolute; width: 10rem; height: 10rem; right: -3rem; bottom: -3rem; border-radius: var(--radius-pill); background: var(--primary); }
.bh-context-mark span { position: relative; z-index: 1; color: var(--primary); font-family: var(--font-display); font-size: clamp(3.2rem, 8vw, 6.5rem); font-weight: 900; line-height: .8; letter-spacing: -.08em; }
.bh-context-mark i { position: relative; z-index: 1; justify-self: end; color: var(--c-bg); font-size: 2.3rem; }
.bh-context h2 { font-size: clamp(1.8rem, 3.5vw, 2.8rem) !important; }
.bh-context p:not(.bh-label) { max-width: 67ch; margin: 0 0 1rem; color: var(--c-text-soft); font-size: 1.02rem; line-height: 1.75; }
.bh-context p:last-child { margin-bottom: 0; }

.bh-section-muted { background: var(--c-bg-alt); }
.bh-heading { max-width: 770px; margin-bottom: 2.5rem; }
.bh-heading h2, .bh-faq-intro h2 { font-size: clamp(1.8rem, 3.5vw, 2.8rem) !important; }
.bh-heading p:last-child { margin: 0; color: var(--c-text-soft); line-height: 1.7; }
.bh-case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.bh-case { display: flex; min-height: 305px; padding: 1.6rem; flex-direction: column; border: 1px solid var(--c-border); border-radius: var(--radius-lg); background: var(--c-bg); transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); }
.bh-case:hover { transform: translateY(-5px); border-color: var(--primary); box-shadow: var(--shadow-md); }
.bh-case-index { color: var(--c-muted); font-family: var(--font-display); font-size: .75rem; font-weight: 900; letter-spacing: .08em; }
.bh-case > i { margin: 1.6rem 0 1.3rem; color: var(--primary-hover); font-size: 2rem; }
.bh-case h3 { margin: 0 0 .75rem; color: var(--c-text); font-family: var(--font-display); font-size: 1.2rem; font-weight: 900; line-height: 1.25; }
.bh-case p { margin: 0; color: var(--c-text-soft); font-size: .92rem; line-height: 1.62; }
.bh-case a { display: inline-flex; align-items: center; gap: .5rem; margin-top: auto; padding-top: 1.4rem; color: var(--primary-hover); font-size: .88rem; font-weight: 800; }
.bh-case a:hover { color: var(--primary); }
.bh-case-dark { border-color: var(--c-dark); background: var(--c-dark); }
.bh-case-dark .bh-case-index { color: var(--primary); }
.bh-case-dark > i { color: var(--primary); }
.bh-case-dark h3 { color: var(--c-bg); }
.bh-case-dark p { color: var(--c-muted); }
.bh-case-dark a { color: var(--primary); }
.bh-case-dark a:hover { color: var(--c-bg); }

.bh-principles-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: 4.5rem; align-items: start; }
.bh-heading-compact { position: sticky; top: 7rem; margin: 0; }
.bh-principles { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.bh-principles li { display: grid; grid-template-columns: 4rem 1fr; gap: 1rem; padding: 1.4rem; border: 1px solid var(--c-border); border-radius: var(--radius); }
.bh-principles li:hover { border-color: var(--primary); box-shadow: var(--shadow-sm); }
.bh-principles span { color: var(--primary); font-family: var(--font-display); font-size: 1.8rem; font-weight: 900; line-height: 1; }
.bh-principles h3 { margin: 0 0 .5rem; color: var(--c-text); font-family: var(--font-display); font-size: 1.1rem; font-weight: 900; }
.bh-principles p { margin: 0; color: var(--c-text-soft); line-height: 1.6; }

.bh-section-dark { background: var(--c-dark); }
.bh-heading-dark h2 { color: var(--c-bg); }
.bh-heading-dark p:last-child { color: var(--c-muted); }
.bh-heading-dark .bh-label { color: var(--primary); }
.bh-service-list { border-top: 1px solid var(--c-text-soft); }
.bh-service-list article { display: grid; grid-template-columns: 3rem 1fr auto; gap: 1.1rem; align-items: center; padding: 1.35rem 0; border-bottom: 1px solid var(--c-text-soft); }
.bh-service-list article > i { display: grid; width: 2.7rem; height: 2.7rem; place-items: center; border-radius: var(--radius); background: var(--c-dark-2); color: var(--primary); font-size: 1.2rem; }
.bh-service-list h3 { margin: 0 0 .25rem; color: var(--c-bg); font-family: var(--font-display); font-size: 1.05rem; font-weight: 900; }
.bh-service-list p { margin: 0; color: var(--c-muted); font-size: .91rem; line-height: 1.5; }
.bh-service-list article > span { color: var(--primary); font-family: var(--font-display); font-size: 1.3rem; font-weight: 900; }

.bh-faq-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 4.5rem; align-items: start; }
.bh-faq-intro { position: sticky; top: 7rem; }
.bh-faq-intro > p:not(.bh-label) { margin: 0; color: var(--c-text-soft); line-height: 1.65; }
.bh-accordions { border-top: 1px solid var(--c-border); }
.bh-accordions details { border-bottom: 1px solid var(--c-border); }
.bh-accordions summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.2rem 0; color: var(--c-text); cursor: pointer; font-family: var(--font-display); font-weight: 800; line-height: 1.45; list-style: none; }
.bh-accordions summary::-webkit-details-marker { display: none; }
.bh-accordions summary i { flex: 0 0 auto; color: var(--primary); transition: transform var(--transition); }
.bh-accordions details[open] summary i { transform: rotate(45deg); }
.bh-accordions p { max-width: 62ch; margin: 0; padding: 0 0 1.25rem; color: var(--c-text-soft); line-height: 1.65; }

.bh-contact { padding: 4rem 0; background: var(--primary-l); }
.bh-contact-inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.bh-contact h2 { max-width: 24ch; margin-bottom: .7rem; font-size: clamp(1.8rem, 3.5vw, 2.7rem) !important; }
.bh-contact p:not(.bh-label) { max-width: 58ch; margin: 0; color: var(--c-text-soft); line-height: 1.65; }
.bh-contact-actions { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: flex-end; }

@media (max-width: 900px) {
  .bh-hero-layout, .bh-context-layout, .bh-principles-layout, .bh-faq-layout { grid-template-columns: 1fr; gap: 2.5rem; }
  .bh-logbook { max-width: 580px; width: 100%; margin-inline: auto; }
  .bh-case-grid { grid-template-columns: 1fr; }
  .bh-case { min-height: 0; }
  .bh-heading-compact, .bh-faq-intro { position: static; }
  .bh-context-mark { max-width: 280px; min-height: 220px; }
}
@media (max-width: 640px) {
  .bh-wrap { width: min(var(--container), calc(100% - 2rem)); }
  .bh-section { padding: 3.75rem 0; }
  .bh-hero { padding-bottom: 3.75rem; }
  .bh-crumb { margin-bottom: 2rem; }
  .bh-hero h1 { font-size: 2.35rem !important; }
  .bh-button { width: 100%; }
  .bh-actions, .bh-contact-actions { width: 100%; }
  .bh-service-list article { grid-template-columns: 2.8rem 1fr; }
  .bh-service-list article > span { grid-column: 2; }
  .bh-contact-inner { align-items: flex-start; flex-direction: column; }
}