/* FDS V17.0 | V16.11 base + targeted visual refinement (no redesign). */
.hero {
  padding-top: max(99px, calc(var(--header-height, 75px) + 20px));
  padding-bottom: clamp(58px, 8vw, 100px);
}
.hero-grid { gap: clamp(26px, 5vw, 60px); align-items: center; }
.hero-headline-v1611 {
  font-size: clamp(2.85rem, 5.25vw, 4.7rem);
  line-height: 1.015;
  letter-spacing: -.036em;
  margin: 17px 0 17px;
  max-width: 720px;
}
.hero-headline-v1611 .hero-line { display: block; width: fit-content; max-width: 100%; }
.hero-lead-v1611 { font-size: clamp(1rem, 1.35vw, 1.15rem); line-height: 1.58; max-width: 55ch; }
.hero-audience { font-size: .8125rem; line-height: 1.35; max-width: fit-content; margin-bottom: 17px; }
.hero-audience::before { content: ''; display: inline-block; background: var(--color-forest); width: 7px; height: 7px; border-radius: 50%; margin-right: 8px; flex-shrink: 0; }
.hero-actions { margin-top: 20px; gap: 10px; }
.hero-next-step { margin-top: 12px; font-size: .8125rem; line-height: 1.5; color: var(--color-muted); max-width: 62ch; }
.hero-meta { margin-top: 23px; }
.hero-meta-item { min-width: 0; padding: 10px 12px; }
.credential-badge { margin-top: 11px; padding: 12px 16px; }
.dashboard-card { padding: clamp(20px, 2.2vw, 28px); }
.dashboard-title { font-size: clamp(1.25rem, 2vw, 1.45rem); }
.dashboard-row { padding: 11px 12px; }
.floating-badge { padding: 10px 14px; }
.work-preview-v1611 .work-preview-card { padding: clamp(16px, 2vw, 22px); min-height: 0; }
.work-preview-v1611 .proof-label { margin-bottom: 12px; }
.work-preview-v1611 .work-preview-card p { flex-grow: 1; }
.work-preview-visual { height: 195px; margin-bottom: 19px; border: 1px solid var(--color-line); border-radius: 12px; overflow: hidden; background: #ece7dd; display:flex; align-items:center; justify-content:center; }
.work-preview-cover img { width:100%; height:100%; object-fit:cover; object-position:center top; }
.work-preview-phones { gap: 10px; padding: 12px 22px 0; background:#f3ebe1; }
.work-preview-phones img { height: 100%; width: auto; max-width: 44%; border-radius: 12px 12px 0 0; box-shadow: 0 2px 12px rgba(20,32,31,.13); object-fit:contain; }
.work-preview-v1611 .work-preview-card:focus-visible { outline: 3px solid var(--color-forest); outline-offset: 3px; }
@media (min-width: 768px) {
  .hero { padding-top: max(115px, calc(var(--header-height, 75px) + 25px)); }
}
@media (min-width: 1024px) {
  .hero-grid { grid-template-columns: minmax(0, 1.13fr) minmax(0, .87fr); gap: 62px; }
}
@media (max-width: 767px) {
  .hero { padding-top: max(94px, calc(var(--header-height, 75px) + 15px)); padding-bottom: 65px; }
  .hero-grid { gap: 36px; }
  .hero-headline-v1611 { font-size: clamp(2.75rem, 11vw, 3.65rem); line-height: 1.02; }
  .hero-headline-v1611 .hero-line { overflow-wrap: normal; }
  .hero-meta { margin-top: 24px; }
  .work-preview-visual { height: 210px; }
}
@media (max-width: 359px) {
  .hero-headline-v1611 { font-size: clamp(2.12rem, 10vw, 2.55rem); }
  .work-preview-visual { height: 170px; }
}
@media (prefers-reduced-motion: reduce) { .work-preview-v1611 .work-preview-card:hover { transform:none; } }
/* Extra-schmale Geräte: Firmenname und Menü ohne mehrzeiligen Header. */
@media (max-width: 359px) {
 .header-inner { gap: 10px; }
 .logo { font-size: 16px; gap: 8px; }
 .logo-mark { width: 32px; height: 32px; }
 .logo-sub { font-size: 8px; letter-spacing: .08em; white-space: nowrap; }
}


/* ------------------------------------------------------------
   V17.0 | visual rhythm, surface roles, portfolio and pricing
   Only homepage selectors; global FDS brand tokens stay intact.
   ------------------------------------------------------------ */

/* 1. Meaningful section transitions without large empty bands. */
#arbeiten {
  background: var(--color-surface-sage);
  border-top: 1px solid var(--color-line-sage);
  border-bottom: 1px solid var(--color-line-sage);
}
#arbeiten > .container { max-width: 1320px; }
#arbeiten .section-header { margin-bottom: clamp(30px, 4vw, 48px); }
#arbeiten .section-header-text { max-width: 36ch; }

/* 2. Warm, quiet surfaces use existing forest/amber color roles. */
.services-grid { background: var(--color-line-sage); border-color: var(--color-line-sage); }
.service-card { background: var(--color-surface-elevated); }
.service-card.service-card-primary { background: var(--color-surface-sage-soft); }
.service-card:hover { background: #F0F4ED; }
.service-card .service-icon-wrap { box-shadow: inset 0 0 0 1px rgba(245,241,232,.08); }
.service-card .service-points li { background: rgba(245,241,232,.74); }
.price-card:not(.featured), .price-card-addon { background: var(--color-surface-elevated); }
.price-card:not(.featured):hover, .price-card-addon:hover { border-color: var(--color-forest-light); }
.story, .trust-section { box-shadow: 0 18px 42px rgba(20,32,31,.055), inset 0 0 0 1px rgba(245,241,232,.055); }

/* 3. Project screens become the evidence, not a row of identical text cards. */
.work-preview-v1611 { gap: clamp(14px, 2.1vw, 24px); margin-top: 0; }
.work-preview-v1611 .work-preview-card {
  background: var(--color-surface-elevated);
  border-color: var(--color-line-sage);
  box-shadow: 0 6px 24px rgba(20,32,31,.035);
}
.work-preview-v1611 .work-preview-card:hover {
  transform: translateY(-2px);
  border-color: var(--color-forest-light);
  box-shadow: 0 13px 32px rgba(20,32,31,.09);
}
.work-preview-v1611 .work-preview-visual {
  background: var(--color-cream);
  border-color: var(--color-line-sage);
}
.work-preview-v1611 .work-preview-phones { background: #E7ECE3; }
.work-preview-v1611 .work-preview-copy { display: flex; flex-direction: column; min-width: 0; }
.work-preview-v1611 .work-preview-featured h3 { font-size: clamp(1.65rem, 2.7vw, 2.2rem); }
.work-preview-v1611 .work-preview-featured .proof-meta { padding-top: 18px; }
.work-preview-v1611 .work-preview-card .proof-label { color: var(--color-amber); }

/* 4. Price numbers are atomic content, even with a narrow flex cell.
   Inherited body overflow-wrap:anywhere must never split a euro amount. */
.price-amount {
  display: inline-block;
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
  font-variant-numeric: lining-nums tabular-nums;
  margin-block: 0; /* inline-block must not add 16px vertical margins formerly ignored on inline span */
}
.addon-price { min-width: 0; flex-wrap: wrap; row-gap: 5px; }
.addon-price .price-amount { flex: 0 0 auto; }
.addon-price .price-unit { flex: 0 1 auto; min-width: 0; }

@media (min-width: 760px) {
  .work-preview-v1611 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .work-preview-v1611 .work-preview-featured {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
    align-items: center;
    gap: clamp(24px, 4vw, 54px);
    padding: clamp(24px, 3.4vw, 42px);
  }
  .work-preview-v1611 .work-preview-featured .work-preview-copy { order: 1; }
  .work-preview-v1611 .work-preview-featured .work-preview-visual {
    order: 2;
    height: clamp(240px, 26vw, 340px);
    margin: 0;
  }
  .work-preview-v1611 .work-preview-featured .proof-label { margin-bottom: 14px; }
  .work-preview-v1611 .work-preview-featured p { flex-grow: 0; }
  #arbeiten { padding-bottom: clamp(72px, 7vw, 106px); }
}

@media (max-width: 767px) {
  /* Hero transition: 65+64px became needlessly large after card. */
  .hero { padding-bottom: 38px; }
  #leistungen { padding-top: 42px; }
  #leistungen .section-header { margin-bottom: 30px; }
  #leistungen .section-title { margin-top: 17px; }

  /* Compact service cards, but keep content, labels and tap affordances. */
  .service-card { padding: 26px 23px; gap: 12px; }
  .service-card .service-icon-wrap { width: 44px; height: 44px; border-radius: 12px; }
  .service-card .service-icon-wrap svg { width: 23px; height: 23px; }
  .service-card .service-title { font-size: clamp(1.35rem, 5.4vw, 1.52rem); line-height: 1.2; margin: 0; }
  .service-card p { font-size: 14px; line-height: 1.56; }
  .service-points { margin-top: 3px; gap: 6px; }
  .service-points li { font-size: 11px; line-height: 1.45; padding: 4px 9px; }
  /* Primary service label stays a compact corner badge; never a full-width last row. */
  .service-card-primary::after {
    position: absolute;
    top: 24px;
    right: 23px;
    display: inline-flex;
    margin: 0;
    padding: 5px 9px;
    border-radius: 999px;
  }
  .service-wide-inner { gap: 14px; }
  .service-wide-head { gap: 12px; }
  .service-wide-body p { margin-bottom: 9px; }

  /* Project previews breathe but no longer repeat three tall identical cards. */
  #arbeiten { padding-block: 0 62px; }
  #arbeiten .section-header { gap: 14px; margin-bottom: 24px; }
  .work-preview-v1611 .work-preview-card { padding: 20px; }
  .work-preview-v1611 .work-preview-featured .work-preview-visual { height: 235px; }
  .work-preview-v1611 .work-preview-card .proof-label { margin-bottom: 10px; }
  .work-preview-v1611 .work-preview-card h3 { margin-bottom: 9px; }
  .work-preview-v1611 .work-preview-card .proof-meta { padding-top: 15px; }

  /* Keep the full sum on its own line and put tax description below it. */
  .addon-price { align-items: flex-start; gap: 5px 0; }
  .addon-price .price-amount { flex: 0 0 100%; width: max-content; max-width: 100%; }
  .addon-price .price-unit { flex: 0 0 100%; }
  .price-card-addon { padding: 29px 24px; gap: 22px; }
  #pakete .u-v166-014 { margin-top: 55px !important; }
}

@media (max-width: 359px) {
  .service-card { padding: 23px 19px; }
  .work-preview-v1611 .work-preview-card { padding: 18px; }
  .work-preview-v1611 .work-preview-featured .work-preview-visual { height: 205px; }
  .addon-price .price-amount { font-size: 2.35rem; }
}

/* Interactive polish must respect reduced motion and keyboard navigation. */
@media (prefers-reduced-motion: reduce) {
  .work-preview-v1611 .work-preview-card:hover,
  .price-card:hover, .price-card-addon:hover { transform: none; }
}


/* V17.2 local homepage refinements */
.work-preview-v1611 .work-preview-card .proof-meta {
  color: var(--color-ink-soft);
}
.work-preview-v1611 .work-preview-card:hover .proof-meta {
  color: var(--color-ink);
}
.work-preview-v1611 .work-preview-featured .work-preview-visual {
  background: #e7ece3;
}
.price-card .btn,
.price-card-addon .btn {
  min-height: 54px;
}
@media (max-width: 767px) {
  .hero-actions .btn { width: auto; }
}