/* =============================================================
   04 · COMPONENTS
   Buttons, Links, Listen, Akkordeon, Galerie, Lightbox,
   Formular, Consent, Karte.
   ============================================================= */

/* ---------- Buttons: ein Stil, ruhig, pillenförmig ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: 3rem; padding: 0.8rem 1.5rem; font-size: 0.95rem; font-weight: 600; letter-spacing: -0.01em;
  color: #fff; background: var(--c-red); border: 1px solid var(--c-red); border-radius: var(--radius-pill);
  transition: background-color 0.3s, border-color 0.3s, color 0.3s, transform 0.35s var(--ease-out), box-shadow 0.35s;
  white-space: nowrap;
}
.btn:hover { background: var(--c-red-dark); border-color: var(--c-red-dark); transform: translateY(-1px); box-shadow: 0 10px 24px -12px rgba(190,30,40,0.6); }
.btn:active { transform: translateY(0); }
.btn svg { width: 1rem; height: 1rem; flex: none; transition: transform 0.35s var(--ease-out); }
.btn:hover svg { transform: translateX(3px); }
.btn--ghost { background: transparent; color: currentColor; border-color: currentColor; box-shadow: none; }
.btn--ghost:hover { background: rgba(255,255,255,0.1); border-color: currentColor; box-shadow: none; }
.btn--dark { background: var(--c-ink); border-color: var(--c-ink); }
.btn--dark:hover { background: var(--c-anthracite); border-color: var(--c-anthracite); box-shadow: 0 10px 24px -12px rgba(18,19,21,0.6); }
.btn--white { background: #fff; color: var(--c-ink); border-color: #fff; }
.btn--white:hover { background: #F0F0EE; border-color: #F0F0EE; box-shadow: none; }
.btn--whatsapp { background: #25D366; border-color: #25D366; }
.btn--whatsapp:hover { background: #1EBE5A; border-color: #1EBE5A; box-shadow: none; }
.btn--sm { min-height: 2.5rem; padding: 0.5rem 1.1rem; font-size: 0.875rem; }
.btn[disabled] { opacity: 0.6; cursor: wait; }
.btn-group { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: center; }

/* Sektions-Link: Text mit Pfeil (Sekundäraktion) */
.link-arrow { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.95rem; font-weight: 600; color: var(--c-ink); }
.link-arrow svg { width: 1rem; height: 1rem; transition: transform 0.35s var(--ease-out); }
.link-arrow span { position: relative; }
.link-arrow span::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 0.35s var(--ease-out); }
.link-arrow:hover svg { transform: translateX(4px); }
.link-arrow:hover span::after { transform: scaleX(1); transform-origin: left; }
.link-arrow--light { color: #fff; }

/* ---------- Kontaktzeile ---------- */
.contact-row { display: flex; flex-wrap: wrap; gap: 0.6rem 1.75rem; align-items: center; font-size: var(--fs-sm); }
.contact-row a { display: inline-flex; align-items: center; gap: 0.5rem; transition: opacity 0.25s; }
.contact-row a:hover { opacity: 0.7; }
.contact-row svg { width: 1rem; height: 1rem; flex: none; }

/* ---------- Fakten mit Icons (vertikale Liste) ---------- */
.facts { list-style: none; display: grid; }
.fact { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; padding: 1.1rem 0; border-top: 1px solid var(--c-line); }
.fact:last-child { border-bottom: 1px solid var(--c-line); }
.fact .icon { color: var(--c-red); margin-top: 0.1rem; }
.fact strong { display: block; font-weight: 600; letter-spacing: -0.01em; color: var(--c-ink); margin-bottom: 0.15rem; }
.fact span { font-size: var(--fs-sm); color: var(--c-muted); }

/* ---------- Leistungen: Desktop = Liste + Sticky-Bild, Mobil = gestapelte Karten ---------- */
.services { display: grid; gap: clamp(2rem, 4vw, 4rem); align-items: start; }
@media (min-width: 1000px) { .services { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); } }
.services__visual { position: sticky; top: calc(var(--header-h) + 2rem); display: none; }
@media (min-width: 1000px) { .services__visual { display: block; } }
.services__frame { position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden; background: var(--c-line-soft); }
.services__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity 0.7s ease, transform 1.2s var(--ease-out); }
.services__frame img.is-active { opacity: 1; transform: scale(1); }
.services__list { list-style: none; }
.service-row a { display: grid; gap: 0.75rem 1rem; align-items: start; }
.service-row__num { font-family: var(--f-mono); font-size: 0.72rem; color: var(--c-muted); letter-spacing: 0.06em; }
.service-row h3 { margin: 0 0 0.25rem; font-size: var(--fs-xl); }
.service-row p { font-size: var(--fs-sm); color: var(--c-muted); max-width: 46ch; margin: 0; }
.service-row__media { display: block; overflow: hidden; }
.service-row__media img { width: 100%; height: 100%; object-fit: cover; }
.service-row__arrow { width: 2.1rem; height: 2.1rem; border-radius: 50%; border: 1px solid var(--c-line); display: grid; place-items: center; color: var(--c-ink); transition: background 0.3s, color 0.3s, border-color 0.3s; }
.service-row__arrow svg { width: 0.95rem; height: 0.95rem; }
@media (min-width: 1000px) {
  .services__list { border-top: 1px solid var(--c-line); }
  .service-row { border-bottom: 1px solid var(--c-line); }
  .service-row a { grid-template-columns: 2.25rem 1fr auto; padding: 1.35rem 0; transition: padding 0.4s var(--ease-out); }
  .service-row a:hover { padding-left: 0.5rem; }
  .service-row__num { padding-top: 0.4rem; }
  .service-row__media { display: none; }
  .service-row__arrow { align-self: center; }
  .service-row a:hover .service-row__arrow { background: var(--c-ink); color: #fff; border-color: var(--c-ink); }
}
@media (max-width: 999px) {
  .services__list { display: grid; gap: 1rem; }
  .service-row { position: sticky; top: calc(var(--header-h) + 0.75rem); }
  .service-row:nth-child(2) { top: calc(var(--header-h) + 1.25rem); }
  .service-row:nth-child(3) { top: calc(var(--header-h) + 1.75rem); }
  .service-row:nth-child(4) { top: calc(var(--header-h) + 2.25rem); }
  .service-row:nth-child(5) { top: calc(var(--header-h) + 2.75rem); }
  .service-row a { grid-template-columns: auto 1fr; grid-template-areas: "media media" "num body" "arrow arrow"; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius); overflow: hidden; padding: 0 0 1.25rem; box-shadow: 0 -12px 30px -22px rgba(18,19,21,0.35); transform-origin: center top; }
  .service-row__media { grid-area: media; aspect-ratio: 16 / 10; }
  .service-row__num { grid-area: num; padding: 1.1rem 0 0 1.25rem; }
  .service-row__body { grid-area: body; padding: 1rem 1.25rem 0 0; }
  .service-row__arrow { grid-area: arrow; margin-left: 1.25rem; }
}
.services__more { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; font-size: var(--fs-sm); color: var(--c-muted); }
.services__more span + span::before { content: "·"; margin: 0 0.45rem; }

/* ---------- Check-Liste ---------- */
.check-list { list-style: none; display: grid; gap: 0.55rem; }
.check-list li { display: flex; gap: 0.7rem; align-items: flex-start; font-size: var(--fs-sm); color: var(--c-steel); }
.check-list li::before { content: ""; flex: none; width: 0.4rem; height: 0.4rem; margin-top: 0.6rem; border-radius: 50%; background: var(--c-red); }

/* ---------- Prozess ---------- */
.steps { display: grid; gap: 2rem 2.5rem; }
@media (min-width: 700px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step { position: relative; padding-top: 1.25rem; border-top: 1px solid var(--c-line); }
.step::before { content: ""; position: absolute; top: -1px; left: 0; height: 1px; width: 0; background: var(--c-ink); transition: width 1.4s var(--ease-out); }
.step.is-in::before { width: 100%; }
.step__num { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.1em; color: var(--c-muted); }
.step h3 { font-size: var(--fs-lg); margin: 0.6rem 0 0.35rem; }
.step p { font-size: var(--fs-sm); color: var(--c-muted); }

/* ---------- Akkordeon ---------- */
.accordion { border-top: 1px solid var(--c-line); }
.accordion__item { border-bottom: 1px solid var(--c-line); }
.accordion__trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.15rem 0; text-align: left; font-size: var(--fs-lg); font-weight: 600; letter-spacing: -0.015em; transition: color 0.25s; }
.accordion__trigger:hover { color: var(--c-red); }
.accordion__trigger .plus { flex: none; width: 1.75rem; height: 1.75rem; position: relative; border: 1px solid var(--c-line); border-radius: 50%; }
.accordion__trigger .plus::before, .accordion__trigger .plus::after { content: ""; position: absolute; inset: 50% auto auto 50%; width: 0.7rem; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); transition: transform 0.4s var(--ease-out); }
.accordion__trigger .plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.accordion__trigger[aria-expanded="true"] .plus::after { transform: translate(-50%, -50%) rotate(0); }
.accordion__panel { overflow: hidden; height: 0; }
html:not(.js) .accordion__panel { height: auto; }
.accordion__panel-inner { padding: 0 0 1.4rem; color: var(--c-steel); font-size: var(--fs-sm); max-width: 62ch; }
.accordion__panel-inner ul { margin-top: 0.6rem; }

/* ---------- Galerie ---------- */
.filter-bar { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 2rem; }
.filter-bar button { padding: 0.5rem 1rem; border: 1px solid var(--c-line); border-radius: var(--radius-pill); background: transparent; font-size: 0.875rem; font-weight: 500; color: var(--c-steel); transition: all 0.3s; }
.filter-bar button:hover { border-color: var(--c-ink); color: var(--c-ink); }
.filter-bar button.is-active { background: var(--c-ink); color: #fff; border-color: var(--c-ink); }
.filter-bar button span { opacity: 0.55; margin-left: 0.35rem; }

.gallery { display: grid; gap: clamp(0.6rem, 1.2vw, 1rem); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px) { .gallery { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .gallery { grid-template-columns: repeat(4, 1fr); } }
.gallery__item { position: relative; overflow: hidden; border-radius: var(--radius-sm); background: var(--c-line-soft); aspect-ratio: 4 / 3; cursor: zoom-in; display: block; width: 100%; margin: 0; }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.gallery__item:hover img { transform: scale(1.05); }
.gallery__item figcaption { position: absolute; inset: auto 0 0 0; padding: 2rem 0.9rem 0.75rem; background: linear-gradient(to top, rgba(18,19,21,0.7), transparent); color: #fff; font-size: var(--fs-xs); font-weight: 500; opacity: 0; transition: opacity 0.35s; }
.gallery__item:hover figcaption, .gallery__item:focus-visible figcaption { opacity: 1; }
.gallery__more { display: flex; justify-content: center; margin-top: 2.5rem; }
.gallery__empty { text-align: center; color: var(--c-muted); padding: 3rem 0; }

/* ---------- Lightbox ---------- */
.lightbox { position: fixed; inset: 0; z-index: 1200; background: rgba(12,13,14,0.94); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.35s, visibility 0.35s; }
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__figure { margin: 0; max-width: min(94vw, 1500px); max-height: 88vh; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; }
.lightbox__figure img { max-width: 100%; max-height: 78vh; width: auto; height: auto; object-fit: contain; border-radius: var(--radius-sm); }
.lightbox__caption { color: rgba(255,255,255,0.7); font-size: var(--fs-sm); text-align: center; }
.lightbox__btn { position: absolute; width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,0.08); color: #fff; transition: background 0.25s; }
.lightbox__btn:hover { background: rgba(255,255,255,0.2); }
.lightbox__btn svg { width: 1.25rem; height: 1.25rem; }
.lightbox__close { top: 1rem; right: 1rem; }
.lightbox__prev { left: 0.75rem; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 0.75rem; top: 50%; transform: translateY(-50%); }
.lightbox__counter { position: absolute; top: 1.7rem; left: 1.5rem; color: rgba(255,255,255,0.55); font-size: var(--fs-sm); }
@media (max-width: 700px) { .lightbox__prev, .lightbox__next { top: auto; bottom: 1rem; transform: none; } .lightbox__prev { left: 1rem; } .lightbox__next { right: 1rem; } }

/* ---------- Formular: Unterstrich-Felder ---------- */
.form { display: grid; gap: 1.4rem; }
.form__row { display: grid; gap: 1.4rem; }
@media (min-width: 640px) { .form__row--2 { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 0.35rem; }
.field label, .field__label { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-muted); }
.field .req { color: var(--c-red); }
.field input, .field textarea, .field select {
  width: 100%; padding: 0.75rem 0; background: transparent; border: 0; border-bottom: 1px solid var(--c-line);
  border-radius: 0; transition: border-color 0.25s; min-height: 2.75rem;
}
.field input::placeholder, .field textarea::placeholder { color: #B5B8BD; }
.field textarea { min-height: 7rem; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-bottom-color: var(--c-ink); }
.field.is-invalid input, .field.is-invalid textarea, .field.is-invalid select { border-bottom-color: var(--c-red); }
.field__error { font-size: var(--fs-xs); color: var(--c-red); display: none; }
.field.is-invalid .field__error { display: block; }
.field select { appearance: none; padding-right: 2rem; background-image: url("data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%231D1F22%22 stroke-width=%222%22><path d=%22M6 9l6 6 6-6%22/></svg>"); background-repeat: no-repeat; background-position: right 0 center; background-size: 1rem; }
.checkbox { display: flex; gap: 0.7rem; align-items: flex-start; font-size: var(--fs-sm); color: var(--c-steel); cursor: pointer; }
.checkbox input { flex: none; width: 1.1rem; height: 1.1rem; margin-top: 0.2rem; accent-color: var(--c-ink); }
.checkbox a { text-decoration: underline; text-underline-offset: 2px; }
.choice-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; margin: 0; }
.choice span { display: inline-flex; align-items: center; padding: 0.5rem 1rem; border: 1px solid var(--c-line); border-radius: var(--radius-pill); font-size: 0.875rem; font-weight: 500; color: var(--c-steel); transition: all 0.25s; cursor: pointer; }
.choice:hover span { border-color: var(--c-ink); color: var(--c-ink); }
.choice input:checked + span { background: var(--c-ink); color: #fff; border-color: var(--c-ink); }
.choice input:focus-visible + span { outline: 2px solid var(--c-red); outline-offset: 2px; }
.upload { border: 1px dashed var(--c-line); border-radius: var(--radius-sm); padding: 1.25rem; text-align: center; color: var(--c-muted); font-size: var(--fs-sm); position: relative; transition: border-color 0.25s, background 0.25s; }
.upload:hover, .upload.is-drag { border-color: var(--c-ink); background: var(--c-surface); }
.upload input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.upload__list { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.75rem; justify-content: center; position: relative; }
.upload__list li { padding: 0.2rem 0.6rem; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius-pill); font-size: var(--fs-xs); }
.form__status { display: none; padding: 1rem 1.25rem; border-radius: var(--radius-sm); font-size: var(--fs-sm); }
.form__status.is-success { display: block; background: #E9F4EC; color: #1E6B3A; }
.form__status.is-error { display: block; background: var(--c-red-soft); color: var(--c-red-dark); }
.form__status a { text-decoration: underline; }
.hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* ---------- Kontakt-Infos ---------- */
.contact-info { display: grid; gap: 1.25rem; }
.contact-info dt { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-muted); margin-bottom: 0.2rem; }
.contact-info dd { margin: 0; font-size: var(--fs-lg); font-weight: 500; color: var(--c-ink); letter-spacing: -0.01em; }
.contact-info dd a:hover { color: var(--c-red); }
.contact-info dd.small { font-size: var(--fs-base); font-weight: 400; color: var(--c-steel); }

/* ---------- Karte ---------- */
.map { position: relative; width: 100%; max-width: 100%; aspect-ratio: 16 / 8; background: var(--c-line-soft); border-radius: var(--radius); overflow: hidden; }
@media (max-width: 640px) { .map { aspect-ratio: 4 / 3; } }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(0.4); }
.map__placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 1.5rem; gap: 0.9rem; }
.map__placeholder p { max-width: 40ch; font-size: var(--fs-sm); color: var(--c-steel); }
.map__placeholder svg { width: 2rem; height: 2rem; color: var(--c-muted); }
.map__placeholder a { font-size: var(--fs-xs); text-decoration: underline; color: var(--c-muted); }

/* ---------- Consent ---------- */
.cookie-banner { position: fixed; z-index: 1100; inset: auto 1rem 1rem 1rem; max-width: 520px; margin-left: auto; background: var(--c-surface); color: var(--c-text); border-radius: var(--radius); box-shadow: var(--shadow-soft), 0 0 0 1px var(--c-line); padding: 1.5rem; display: none; gap: 0.9rem; }
.cookie-banner.is-visible { display: grid; }
.cookie-banner h2 { font-size: var(--fs-lg); margin: 0; }
.cookie-banner p { font-size: var(--fs-sm); color: var(--c-steel); }
.cookie-banner p a { text-decoration: underline; text-underline-offset: 2px; }
.cookie-banner__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cookie-banner__actions .btn { flex: 1 1 auto; }
.cookie-modal { position: fixed; inset: 0; z-index: 1150; display: none; align-items: center; justify-content: center; padding: 1rem; background: rgba(12,13,14,0.55); backdrop-filter: blur(4px); }
.cookie-modal.is-open { display: flex; }
.cookie-modal__dialog { background: var(--c-surface); color: var(--c-text); width: 100%; max-width: 600px; max-height: 90vh; overflow: auto; border-radius: var(--radius); padding: clamp(1.25rem, 3vw, 2.25rem); }
.cookie-modal__dialog h2 { font-size: var(--fs-xl); }
.cookie-modal__dialog > p { font-size: var(--fs-sm); color: var(--c-steel); }
.cookie-cat { display: flex; gap: 1rem; align-items: flex-start; padding: 1rem 0; border-top: 1px solid var(--c-line); }
.cookie-cat:last-of-type { border-bottom: 1px solid var(--c-line); }
.cookie-cat__text { flex: 1; }
.cookie-cat__text strong { display: block; font-weight: 600; }
.cookie-cat__text p { font-size: var(--fs-sm); color: var(--c-muted); margin: 0.2rem 0 0; }
.switch { position: relative; flex: none; width: 2.75rem; height: 1.6rem; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; width: 100%; height: 100%; }
.switch span { position: absolute; inset: 0; background: var(--c-line); border-radius: 999px; transition: background 0.25s; pointer-events: none; }
.switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: #fff; transition: transform 0.25s var(--ease-out); box-shadow: 0 1px 3px rgba(0,0,0,0.25); }
.switch input:checked + span { background: var(--c-ink); }
.switch input:checked + span::after { transform: translateX(1.15rem); }
.switch input:disabled + span { opacity: 0.5; }
.cookie-modal__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.25rem; }

/* ---------- WhatsApp-Aktion ---------- */
.fab-whatsapp { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 800; width: 3.25rem; height: 3.25rem; border-radius: 50%; background: #25D366; color: #fff; display: grid; place-items: center; box-shadow: 0 12px 30px -12px rgba(0,0,0,0.5); transition: transform 0.35s var(--ease-out), opacity 0.3s; }
.fab-whatsapp:hover { transform: scale(1.06); }
.fab-whatsapp svg { width: 1.5rem; height: 1.5rem; }
body.has-cookie-banner .fab-whatsapp { opacity: 0; pointer-events: none; }

/* ---------- Icon-Karten (ruhig, hell, dünne Linie) ---------- */
.icon-cards { display: grid; gap: 1rem; }
@media (min-width: 640px) { .icon-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .icon-cards { grid-template-columns: repeat(3, 1fr); } }
.icon-cards--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.icon-card { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius); padding: 1.5rem; display: flex; flex-direction: column; gap: 0.9rem; transition: transform 0.4s var(--ease-out), box-shadow 0.4s; }
.icon-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-soft); }
.icon-card__icon { width: 2.5rem; height: 2.5rem; border-radius: var(--radius-sm); background: var(--c-bg); display: grid; place-items: center; color: var(--c-red); }
.icon-card__icon .icon { width: 1.25rem; height: 1.25rem; }
.icon-card h3 { font-size: var(--fs-lg); margin: 0; }
.icon-card p { font-size: var(--fs-sm); color: var(--c-muted); margin: 0; }
.icon-card--center { align-items: center; text-align: center; background: transparent; border: 0; padding: 1rem; }
.icon-card--center:hover { transform: none; box-shadow: none; }

/* ---------- Großes Statement (Freight-Stil) ---------- */
.statement { font-size: clamp(1.35rem, 1.1rem + 1.2vw, 2rem); font-weight: 500; letter-spacing: -0.02em; line-height: 1.3; color: var(--c-ink); max-width: 30ch; }
.statement em { font-style: normal; color: var(--c-red); }

/* ---------- Kennzahlen-Zeile ---------- */
.stats { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); }
.stat { border-top: 1px solid var(--c-line); padding-top: 1rem; }
.stat strong { display: block; font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); font-weight: 600; letter-spacing: -0.03em; color: var(--c-ink); line-height: 1; margin-bottom: 0.35rem; }
.stat span { font-size: var(--fs-sm); color: var(--c-muted); }

/* ---------- Sprachumschalter ---------- */
.lang-switch { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.08em; padding: 0.45rem 0.6rem; border: 1px solid currentColor; border-radius: var(--radius-pill); opacity: 0.85; transition: opacity 0.25s; line-height: 1; }
.lang-switch:hover { opacity: 1; }

/* ---------- Bild-Treatment: einheitlich für alle Fotos ---------- */
.pic .img { border-radius: var(--radius); overflow: hidden; position: relative; }
.pic .img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pic .img::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(18,19,21,0.08); pointer-events: none; }
.pic__caption { display: flex; justify-content: space-between; gap: 1rem; margin-top: 0.7rem; font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-muted); }

/* ---------- Intro: Bildstapel (Hauptbild + versetztes Detail + Kennzahl) ---------- */
.stack { position: relative; padding-bottom: 12%; padding-right: 10%; }
.stack__main .img { aspect-ratio: 4 / 5; }
.stack__detail { position: absolute; right: 0; bottom: 0; width: 46%; border: 6px solid var(--c-surface); border-radius: calc(var(--radius) + 6px); box-shadow: var(--shadow-soft); }
.stack__detail .img { aspect-ratio: 4 / 3; border-radius: var(--radius); }
.stack__badge { position: absolute; left: -0.5rem; top: 1.25rem; background: var(--c-surface); border-radius: var(--radius-sm); padding: 0.7rem 0.9rem; box-shadow: var(--shadow-soft); display: flex; gap: 0.7rem; align-items: center; }
.stack__badge .icon { color: var(--c-red); }
.stack__badge strong { display: block; font-size: 0.9rem; letter-spacing: -0.01em; }
.stack__badge span { font-family: var(--f-mono); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-muted); }
@media (max-width: 899px) { .stack { padding-bottom: 14%; padding-right: 12%; } .stack__main .img { aspect-ratio: 4 / 4.2; } .stack__badge { left: 0.75rem; top: 0.75rem; } }

/* ---------- Icon-Karten – verfeinert ---------- */
.icon-card { position: relative; padding: 1.6rem 1.5rem 1.5rem; gap: 0.75rem; }
.icon-card__top { display: flex; justify-content: space-between; align-items: flex-start; }
.icon-card__num { font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.1em; color: var(--c-muted); }
.icon-card__icon { width: 2.75rem; height: 2.75rem; border-radius: 12px; background: var(--c-bg); border: 1px solid var(--c-line); color: var(--c-ink); }
.icon-card:hover { border-color: rgba(18,19,21,0.25); }
.icon-card:hover .icon-card__icon { background: var(--c-ink); color: #fff; border-color: var(--c-ink); }
.icon-card__icon { transition: background 0.3s, color 0.3s, border-color 0.3s; }
.icon-card--center .icon-card__icon { margin-inline: auto; }

/* ---------- Ablauf mit Icons und Verbindungslinie ---------- */
.steps { position: relative; gap: 2.5rem 2rem; }
.step { border-top: 0; padding-top: 0; }
.step::before { display: none; }
.step__head { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 1rem; position: relative; }
.step__icon { width: 3rem; height: 3rem; border-radius: 50%; background: var(--c-surface); border: 1px solid var(--c-line); display: grid; place-items: center; color: var(--c-ink); flex: none; position: relative; z-index: 1; transition: background 0.4s, color 0.4s, border-color 0.4s; }
.step__icon .icon { width: 1.25rem; height: 1.25rem; }
.step.is-in .step__icon { background: var(--c-ink); color: #fff; border-color: var(--c-ink); }
.step__num { margin: 0; }
@media (min-width: 1100px) {
  .step__head::after { content: ""; position: absolute; left: 3rem; right: -2rem; top: 50%; height: 1px; background: var(--c-line); }
  .step:last-child .step__head::after { display: none; }
}
.step h3 { margin: 0 0 0.35rem; }

/* ---------- Service-Karten (mobil) – verfeinert ---------- */
@media (max-width: 999px) {
  .service-row a { box-shadow: 0 -18px 40px -30px rgba(18,19,21,0.45), 0 1px 0 rgba(18,19,21,0.04); padding: 0 0 1.35rem; }
  .service-row__media { position: relative; }
  .service-row__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18,19,21,0) 55%, rgba(18,19,21,0.35) 100%); }
  .service-row__num { position: absolute; left: 1rem; top: 1rem; z-index: 1; padding: 0.35rem 0.6rem; background: rgba(255,255,255,0.92); border-radius: var(--radius-pill); color: var(--c-ink); grid-area: media; align-self: start; justify-self: start; }
  .service-row__body { grid-column: 1 / -1; padding: 1.1rem 1.35rem 0; }
  .service-row a { grid-template-columns: 1fr; grid-template-areas: "media" "body" "arrow"; }
  .service-row__arrow { margin-left: 1.35rem; }
}
/* Desktop-Zeilen: Icon statt nackter Nummer */
@media (min-width: 1000px) {
  .service-row a { grid-template-columns: 2.75rem 1fr auto; }
  .service-row__icon { width: 2.25rem; height: 2.25rem; border-radius: 10px; border: 1px solid var(--c-line); display: grid; place-items: center; color: var(--c-ink); margin-top: 0.15rem; transition: background 0.3s, color 0.3s; }
  .service-row__icon .icon { width: 1.1rem; height: 1.1rem; }
  .service-row a:hover .service-row__icon { background: var(--c-ink); color: #fff; }
}
@media (max-width: 999px) { .service-row__icon { display: none; } }

/* ---------- FAQ ---------- */
.faq__inner { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 900px) { .faq__inner { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(3rem, 6vw, 6rem); } .faq__intro { position: sticky; top: calc(var(--header-h) + 2rem); } }
.faq__intro p { color: var(--c-steel); max-width: 34ch; }
.accordion--faq .accordion__trigger { align-items: center; justify-content: flex-start; font-size: var(--fs-base); font-weight: 600; padding: 1.2rem 0; }
.accordion--faq .accordion__trigger > span:nth-child(2) { flex: 1; }
.accordion__num { font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.1em; color: var(--c-muted); width: 2rem; flex: none; }
.accordion--faq .accordion__panel-inner { padding-left: 2rem; }

/* ---------- Video-Band ---------- */
.video-band { position: relative; min-height: clamp(420px, 70vh, 680px); display: flex; align-items: flex-end; color: #fff; background: var(--c-ink); overflow: hidden; isolation: isolate; }
.video-band video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.video-band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(18,19,21,0.1) 0%, rgba(18,19,21,0.75) 100%); }
.video-band__content { position: relative; padding-block: clamp(2rem, 5vw, 4rem); }
.video-band h2 { color: #fff; max-width: 18ch; }
.video-band p { color: rgba(255,255,255,0.78); max-width: 44ch; }
.page-hero__video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.page-hero__video img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Kacheln mit Video ---------- */
.area__tile--image video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }

/* ---------- Karten-Karussell ---------- */
.carousel { position: relative; }
.carousel__track { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); padding-inline: var(--gutter); padding-block: 0.5rem 1rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; cursor: grab; }
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.carousel__track.is-dragging * { pointer-events: none; }
.carousel--bleed { margin-inline: calc(-1 * var(--gutter)); }
.card { flex: none; width: min(82vw, 340px); scroll-snap-align: start; display: flex; flex-direction: column; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius); overflow: hidden; color: inherit; transition: transform 0.45s var(--ease-out), box-shadow 0.45s, border-color 0.3s; }
@media (min-width: 900px) { .card { width: 360px; } }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); border-color: rgba(18,19,21,0.18); }
.card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.card:hover .card__media img { transform: scale(1.05); }
.card__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18,19,21,0) 60%, rgba(18,19,21,0.25) 100%); }
.card__num { position: absolute; left: 0.9rem; top: 0.9rem; z-index: 1; padding: 0.35rem 0.6rem; background: rgba(255,255,255,0.92); border-radius: var(--radius-pill); font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.08em; color: var(--c-ink); }
.card__icon { position: absolute; right: 0.9rem; top: 0.9rem; z-index: 1; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: rgba(255,255,255,0.92); display: grid; place-items: center; color: var(--c-ink); }
.card__icon .icon { width: 1.05rem; height: 1.05rem; }
.card__body { padding: 1.2rem 1.3rem 1.3rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.card h3 { margin: 0; font-size: var(--fs-lg); }
.card p { margin: 0; font-size: var(--fs-sm); color: var(--c-muted); }
.card__foot { margin-top: auto; padding-top: 0.9rem; display: flex; justify-content: space-between; align-items: center; font-size: var(--fs-sm); font-weight: 600; color: var(--c-ink); }
.card__foot .service-row__arrow { width: 2rem; height: 2rem; }
.card:hover .card__foot .service-row__arrow { background: var(--c-ink); color: #fff; border-color: var(--c-ink); }
.card--plain .card__media { display: none; }
.card--plain .card__body { padding-top: 1.5rem; }
.card--plain .card__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.6rem; }
.card--plain .card__top .card__icon, .card--plain .card__top .card__num { position: static; background: var(--c-bg); border: 1px solid var(--c-line); }
.carousel__nav { display: flex; align-items: center; gap: 1rem; margin-top: 0.75rem; padding-inline: var(--gutter); }
.carousel--bleed .carousel__nav { padding-inline: var(--gutter); }
.carousel__bar { flex: 1; height: 1px; background: var(--c-line); overflow: hidden; }
.carousel__bar i { display: block; height: 100%; width: 100%; background: var(--c-ink); transform-origin: left; transform: scaleX(0.1); transition: transform 0.3s var(--ease-out); }
.carousel__count { font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.08em; color: var(--c-muted); }
.carousel__btn { width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1px solid var(--c-line); display: grid; place-items: center; color: var(--c-ink); transition: background 0.3s, color 0.3s, opacity 0.3s; }
.carousel__btn:hover { background: var(--c-ink); color: #fff; }
.carousel__btn[disabled] { opacity: 0.3; pointer-events: none; }
.carousel__btn .icon { width: 1rem; height: 1rem; }

/* ---------- Werte-Kacheln mit Foto ---------- */
.value-tiles { display: grid; gap: 1rem; }
@media (min-width: 720px) { .value-tiles { grid-template-columns: repeat(3, 1fr); } }
.value-tile { position: relative; min-height: 380px; border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.5rem; color: #fff; isolation: isolate; background: var(--c-ink); }
.value-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.4s var(--ease-out); }
.value-tile:hover img { transform: scale(1.05); }
.value-tile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(18,19,21,0.05) 20%, rgba(18,19,21,0.85) 100%); }
.value-tile__icon { width: 2.5rem; height: 2.5rem; border-radius: 50%; background: rgba(255,255,255,0.14); backdrop-filter: blur(6px); display: grid; place-items: center; margin-bottom: auto; }
.value-tile__icon .icon { width: 1.15rem; height: 1.15rem; }
.value-tile__num { font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.1em; color: rgba(255,255,255,0.6); margin-bottom: 0.6rem; }
.value-tile h3 { color: #fff; margin: 0 0 0.35rem; }
.value-tile p { color: rgba(255,255,255,0.78); font-size: var(--fs-sm); margin: 0; max-width: 30ch; }
@media (min-width: 720px) { .value-tile { min-height: 440px; } }

/* ---------- Video-Rahmen (Intro) ---------- */
.video-frame { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--c-ink); aspect-ratio: 4 / 5; box-shadow: var(--shadow-soft); }
.video-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-frame::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08); border-radius: inherit; pointer-events: none; }
.video-frame__chip { position: absolute; left: 1rem; bottom: 1rem; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.85rem; background: rgba(255,255,255,0.92); border-radius: var(--radius-pill); font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-ink); }
.video-frame__chip::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--c-red); }
.intro__media.video-frame { padding: 0; }
.photo-frame { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--c-line-soft); aspect-ratio: 4 / 5; box-shadow: var(--shadow-soft); }
.photo-frame img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 899px) { .photo-frame { aspect-ratio: 4 / 4.6; max-width: 480px; margin-inline: auto; } }
@media (max-width: 899px) { .video-frame { aspect-ratio: 4 / 4.6; max-width: 480px; margin-inline: auto; } }

/* ---------- Intro: Statement + drei Spalten + Bildband ---------- */
.intro-stmt { display: grid; gap: 1.5rem; align-items: end; }
@media (min-width: 900px) { .intro-stmt { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(2rem, 5vw, 5rem); } .intro-stmt > :last-child { padding-bottom: 0.3rem; } }
.intro-stmt h2 { max-width: 18ch; margin: 0; }
.intro-stmt .lead { max-width: 44ch; }
.cols3 { display: grid; gap: 2rem 2.5rem; margin-top: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 720px) { .cols3 { grid-template-columns: repeat(3, 1fr); } }
.col { border-top: 1px solid var(--c-line); padding-top: 1.25rem; position: relative; }
.col::before { content: ""; position: absolute; top: -1px; left: 0; width: 2.5rem; height: 1px; background: var(--c-red); }
.col__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.col__head .icon { color: var(--c-ink); }
.col__num { font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.1em; color: var(--c-muted); }
.col h3 { font-size: var(--fs-lg); margin: 0 0 0.35rem; }
.col p { font-size: var(--fs-sm); color: var(--c-muted); margin: 0; max-width: 32ch; }
.band { margin-top: clamp(2.5rem, 5vw, 4rem); }
.band .img { aspect-ratio: 21 / 9; }
.band .img img { object-position: center 42%; }
@media (max-width: 640px) { .band .img { aspect-ratio: 4 / 3; } }