/* Shared premium design tokens and responsive foundation. Loaded after legacy page CSS. */
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/source-sans-3-latin-400-700.woff2") format("woff2");
}

@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url("fonts/newsreader-latin-500-600.woff2") format("woff2");
}

:root {
  --color-ink: #25282b;
  --color-ink-muted: #686c70;
  --color-line: #d9d7d3;
  --color-line-dark: rgba(234, 225, 213, 0.2);
  --surface-base: #fcfbf8;
  --surface-raised: #ffffff;
  --surface-soft: #f2f0eb;
  --surface-deep: #252a2e;
  --surface-panel: #30353a;
  --accent-graphite: #555c61;
  --accent-graphite-deep: #2a3034;
  --accent-copper: #9b572f;
  --accent-copper-deep: #8d4b2a;
  --accent-sand: #dfb28f;

  --ink: var(--color-ink);
  --ink-soft: var(--color-ink-muted);
  --line: var(--color-line);
  --bg: var(--surface-base);
  --bg-band: var(--surface-soft);
  --bg-card: var(--surface-raised);
  --accent: var(--accent-graphite);
  --accent-strong: var(--accent-graphite-deep);
  --accent-soft: #ecebea;
  --warm: var(--accent-copper);
  --warm-strong: var(--accent-copper-deep);
  --warm-soft: #f2e7df;

  --font-display: "Newsreader", Georgia, serif;
  --font-body: "Source Sans 3", "Segoe UI", Arial, sans-serif;
  --text-xs: clamp(0.76rem, 0.74rem + 0.08vw, 0.82rem);
  --text-sm: clamp(0.88rem, 0.85rem + 0.14vw, 0.98rem);
  --text-base: clamp(1rem, 0.97rem + 0.14vw, 1.12rem);
  --text-lead: clamp(1.06rem, 0.98rem + 0.34vw, 1.27rem);
  --text-card-title: clamp(1.42rem, 1.27rem + 0.46vw, 1.82rem);
  --text-section: clamp(2.04rem, 1.58rem + 1.42vw, 2.86rem);
  --text-display: clamp(2.6rem, 1.82rem + 2.38vw, 4.08rem);
  --text-brand: clamp(1.58rem, 1.43rem + 0.34vw, 1.94rem);

  --space-1: clamp(0.4rem, 0.36rem + 0.12vw, 0.5rem);
  --space-2: clamp(0.68rem, 0.6rem + 0.2vw, 0.84rem);
  --space-3: clamp(0.95rem, 0.86rem + 0.3vw, 1.18rem);
  --space-4: clamp(1.36rem, 1.12rem + 0.68vw, 1.9rem);
  --space-5: clamp(1.85rem, 1.45rem + 1vw, 2.72rem);
  --space-6: clamp(2.7rem, 2rem + 1.8vw, 4.25rem);
  --space-7: clamp(3.8rem, 2.5rem + 3.2vw, 6.2rem);
  --section-space: clamp(3.8rem, 2.7rem + 3.4vw, 6.25rem);
  --gutter: clamp(1.25rem, 0.75rem + 2vw, 1.9rem);
  --container-max: 71.25rem;
  --radius-sm: 0.18rem;
  --radius-md: 0.32rem;
  --shadow-lift: 0 1.4rem 2.8rem rgba(23, 26, 29, 0.11);
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  background: var(--surface-base);
  -webkit-tap-highlight-color: rgba(155, 87, 47, 0.2);
}

.container {
  max-width: var(--container-max);
  padding-inline: var(--gutter);
}

:where(header[id], section[id], main[id]) {
  scroll-margin-top: clamp(4.6rem, 4.2rem + 1vw, 5.2rem);
}

.skip-link {
  position: fixed;
  top: var(--space-3);
  left: var(--space-3);
  border-radius: var(--radius-md);
  transform: translateY(calc(-100% - var(--space-4)));
  transition: transform 0.15s ease;
}

.skip-link:focus,
.skip-link:focus-visible {
  top: var(--space-3);
  transform: none;
}

.nav {
  min-height: clamp(4.15rem, 3.85rem + 1vw, 4.8rem);
}

.topbar {
  background: rgba(37, 42, 46, 0.97);
  border-bottom-color: var(--color-line-dark);
}

.brand,
.brand-name {
  color: #f7f3ed;
}

.brand-name {
  font-size: var(--text-brand);
}

.brand-location {
  color: rgba(247, 243, 237, 0.62);
}

.nav-links a {
  color: rgba(247, 243, 237, 0.75);
}

.nav-links a:hover {
  color: #fff;
}

.brand-location,
.nav-links a,
.call-link {
  font-size: var(--text-sm);
}

.call-link {
  background: var(--accent-copper);
}

.call-link:hover {
  background: var(--accent-copper-deep);
}

@media (max-width: 58.75rem) {
  .nav-links {
    display: none;
  }

  .nav-actions {
    gap: 0;
  }
}

.call-link,
.btn {
  border-radius: var(--radius-md);
}

h1,
.page-hero h1,
header.hero h1 {
  font-family: var(--font-display);
  font-size: var(--text-display);
}

h2,
.kontakt-cta h2 {
  font-family: var(--font-display);
  font-size: var(--text-section);
}

.lead,
.page-hero .lead,
.section-intro {
  font-size: var(--text-lead);
}

.section-kicker,
.eyebrow,
.page-hero .eyebrow {
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
}

header.hero .eyebrow,
#leistungen .section-kicker,
.closing-trust .section-kicker,
.kontakt-cta .section-kicker {
  color: var(--accent-sand);
}

header.hero .eyebrow::before,
.page-hero .eyebrow::before {
  background: var(--accent-sand);
}

section {
  padding-block: var(--section-space);
}

.btn {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-base);
}

.preis-card,
.kontakt-card,
.erreichbar-card,
.leistung-item,
.ablauf-step {
  border-radius: var(--radius-md);
}

.preis-card .preis {
  font-size: clamp(2.05rem, 1.8rem + 0.8vw, 2.5rem);
}

.leistung-card h3,
.leistung-item h3 {
  font-size: var(--text-card-title);
}

.leistung-card p,
.leistung-card ul,
.leistung-item ul,
.card-link,
.preis-card .label,
.preis-card .preis small,
.ablauf-step h3,
.ablauf-step p,
.person-title,
.pill,
.map-link,
.kontakt-row strong,
.preis-hint,
.kontakt-row a,
.kontakt-row p,
.erreichbar-card p,
footer p {
  font-size: var(--text-sm);
}

.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  line-height: 1;
}

/* Landing hero: genuine image element for LCP and a stable editorial split. */
header.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: clamp(40rem, 51vw, 45rem);
  padding-block: clamp(4.25rem, 3.1rem + 3.2vw, 6.6rem);
  background: var(--surface-deep) !important;
}

header.hero::before,
header.hero::after {
  content: none !important;
}

.hero-media,
.hero-overlay {
  position: absolute;
  inset: 0;
}

.hero-media {
  z-index: 0;
  display: block;
}

.hero-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 64% center;
}

.hero-overlay {
  z-index: 1;
  background: linear-gradient(90deg, rgba(29, 32, 35, 0.96), rgba(29, 32, 35, 0.84) 55%, rgba(29, 32, 35, 0.66));
}

header.hero .hero-content {
  position: relative;
  z-index: 2;
}

header.hero h1 {
  margin-bottom: var(--space-4);
  max-width: 40.5rem;
}

header.hero .lead {
  max-width: 34rem;
  margin-bottom: var(--space-5);
}

.hero-proof {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3) var(--space-4);
  max-width: 35rem;
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-line-dark);
}

.hero-proof div {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
}

.hero-proof strong {
  color: #f7f3ed;
  font-size: var(--text-sm);
  font-weight: 700;
}

.hero-proof span {
  color: rgba(247, 243, 237, 0.72);
  font-size: var(--text-xs);
}

.hero-profile-link {
  grid-column: 1 / -1;
  justify-self: start;
  margin-top: var(--space-2);
  color: var(--accent-sand);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(223, 178, 143, 0.5);
  text-underline-offset: 0.28em;
}

.hero-profile-link:hover {
  color: #f5d1b5;
  text-decoration-color: currentColor;
}

@media (min-width: 52rem) {
  .hero-media {
    inset: 0 0 0 54%;
  }

  .hero-media img {
    object-position: center;
  }

  .hero-overlay {
    background: linear-gradient(90deg, var(--surface-deep) 0%, var(--surface-deep) 52%, rgba(37, 42, 46, 0.86) 56%, rgba(37, 42, 46, 0) 65%);
  }
}

/* Service-page heroes use real priority images instead of CSS-only LCP backgrounds. */
.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--surface-deep) !important;
}

.page-hero-media,
.page-hero-overlay {
  position: absolute;
  inset: 0;
}

.page-hero-media {
  z-index: 0;
  display: block;
}

.page-hero-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.page-hero-overlay {
  z-index: 1;
  background: linear-gradient(90deg, rgba(37, 42, 46, 0.98) 0%, rgba(37, 42, 46, 0.94) 47%, rgba(37, 42, 46, 0.58) 72%, rgba(37, 42, 46, 0.26) 100%);
}

.page-hero-content {
  position: relative;
  z-index: 2;
}

.page-hero .eyebrow {
  color: var(--accent-sand);
}

@media (min-width: 52rem) {
  .page-hero-media {
    inset: 0 0 0 53%;
  }

  .page-hero-overlay {
    background: linear-gradient(90deg, var(--surface-deep) 0%, var(--surface-deep) 50%, rgba(37, 42, 46, 0.84) 57%, rgba(37, 42, 46, 0) 70%);
  }
}

/* Premium landing content bands. */
#leistungen {
  background: var(--surface-deep);
  color: #f7f3ed;
}

#leistungen h2,
#leistungen .leistung-card h3 {
  color: #f7f3ed;
}

#leistungen .section-intro,
#leistungen .leistung-card p,
#leistungen .leistung-card ul {
  color: rgba(247, 243, 237, 0.76);
}

#leistungen .leistung-card {
  overflow: hidden;
  border: 1px solid var(--color-line-dark);
  border-radius: var(--radius-md);
  background: var(--surface-panel);
}

#leistungen .leistung-card .card-image {
  border-radius: 0;
  background: #3a4044;
}

#leistungen .leistung-card .card-body {
  padding: var(--space-4);
  border-bottom: 0;
}

#leistungen .leistung-card .card-link {
  color: var(--accent-sand);
  border-color: rgba(223, 178, 143, 0.45);
}

#leistungen .leistung-card .card-link:hover {
  color: #f5d1b5;
  border-color: #f5d1b5;
}

@media (min-width: 62rem) {
  #leistungen .leistungen {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--space-4);
  }

  #leistungen .leistung-card:nth-child(1) {
    grid-column: span 7;
  }

  #leistungen .leistung-card:nth-child(2) {
    grid-column: span 5;
  }

  #leistungen .leistung-card:nth-child(3),
  #leistungen .leistung-card:nth-child(4),
  #leistungen .leistung-card:nth-child(5) {
    grid-column: span 4;
  }

  #leistungen .leistung-card:nth-child(6) {
    grid-column: span 12;
    display: grid;
    grid-template-columns: minmax(18rem, 0.85fr) 1.15fr;
  }

  #leistungen .leistung-card:nth-child(1) .card-image img,
  #leistungen .leistung-card:nth-child(2) .card-image img {
    height: clamp(15.5rem, 19vw, 18.5rem);
  }

  #leistungen .leistung-card:nth-child(6) .card-image img {
    height: 100%;
    min-height: 19rem;
  }
}

#preise {
  background: var(--surface-soft);
}

#preise .preis-card {
  border-top-color: var(--accent-copper);
  box-shadow: var(--shadow-lift);
}

.closing-trust {
  background: var(--surface-deep);
  color: #f7f3ed;
}

.closing-trust h2 {
  color: #f7f3ed;
  margin-bottom: 0;
}

.closing-trust-inner {
  display: grid;
  gap: var(--space-5);
}

.closing-proof {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.closing-proof p {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-line-dark);
}

.closing-proof strong {
  font-family: var(--font-display);
  color: var(--accent-sand);
  font-size: var(--text-card-title);
  font-weight: 600;
}

.closing-proof span {
  color: rgba(247, 243, 237, 0.7);
  font-size: var(--text-sm);
}

@media (min-width: 48rem) {
  .closing-trust-inner {
    grid-template-columns: 0.88fr 1.12fr;
    align-items: center;
  }
}

#kontakt {
  background: var(--surface-soft);
}

.kontakt-card,
.erreichbar-card {
  box-shadow: var(--shadow-lift);
}

footer {
  background: var(--surface-deep);
}

footer p,
footer a {
  color: rgba(247, 243, 237, 0.72);
}

footer strong,
footer a:hover {
  color: #f7f3ed;
}

.legal-page .container {
  max-width: 48rem;
}

.legal-page .brand {
  font-family: var(--font-display);
  font-size: var(--text-brand);
  font-weight: 600;
}

.legal-page main {
  padding-block: var(--space-7);
}

.legal-page h1 {
  color: var(--color-ink);
  font-size: var(--text-section);
  font-weight: 500;
  letter-spacing: 0;
}

.legal-page h2 {
  font-family: var(--font-body);
  font-size: var(--text-lead);
  color: var(--color-ink);
  font-weight: 700;
}

.legal-page footer {
  font-size: var(--text-sm);
}

.mobile-contact-bar {
  display: none;
}

@media (max-width: 47.99rem) {
  body {
    padding-bottom: 4.4rem;
  }

  .nav {
    gap: var(--space-2);
  }

  .brand-location {
    display: none;
  }

  .call-link {
    padding: 0.68rem 0.76rem;
    font-size: var(--text-xs);
  }

  .breadcrumb .container {
    overflow-wrap: anywhere;
  }

  .cta-row {
    display: grid;
    grid-template-columns: 1fr;
  }

  .cta-row .btn {
    width: 100%;
    min-width: 0;
    text-align: center;
  }

  header.hero {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding-block: 0;
  }

  .hero-media {
    position: relative;
    inset: auto;
    width: 100%;
    aspect-ratio: 1672 / 941;
  }

  .hero-media img {
    object-position: center;
  }

  .hero-overlay {
    display: none;
  }

  header.hero .hero-content {
    padding-block: var(--space-6);
  }

  .hero-proof {
    margin-top: var(--space-4);
  }

  .page-hero {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding-block: 0 !important;
  }

  .page-hero-media {
    position: relative;
    inset: auto;
    order: 0;
    width: 100%;
    flex: none;
    aspect-ratio: 4 / 3;
    overflow: hidden;
  }

  .page-hero-media img {
    position: absolute;
    inset: 0;
  }

  .page-hero-media--roller img {
    object-position: center 61%;
  }

  .page-hero-overlay {
    display: none;
  }

  .page-hero-content {
    order: 1;
    padding-block: var(--space-6);
  }

  .mobile-contact-bar {
    position: fixed;
    z-index: 90;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    padding: 0.55rem max(0.55rem, env(safe-area-inset-right)) calc(0.55rem + env(safe-area-inset-bottom)) max(0.55rem, env(safe-area-inset-left));
    background: var(--surface-deep);
    box-shadow: 0 -0.55rem 1.25rem rgba(23, 26, 29, 0.18);
  }

  .mobile-contact-bar a {
    min-width: 0;
    min-height: 3.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    padding-inline: var(--space-1);
    font-size: var(--text-sm);
    font-weight: 700;
    text-decoration: none;
  }

  .mobile-call {
    color: #fff;
    background: var(--accent-copper);
  }

  .mobile-message {
    color: #f7f3ed;
    border: 1px solid var(--color-line-dark);
  }
}

/* Shared correction for service pages still carrying the legacy skip-link rule. */
@media (max-width: 43.75rem) {
  .container {
    padding-inline: var(--gutter);
  }

  body {
    font-size: var(--text-base);
  }

  h1,
  .page-hero h1,
  header.hero h1 {
    font-size: var(--text-display);
  }

  h2 {
    font-size: var(--text-section);
  }
}