/*
  FABIAN DIGITAL SERVICES | V17.1 Editorial Design System
  Design-only refinement across public HTML pages. No external fonts, JS or services.
  The existing real content and brand palette remain the authoritative sources.
*/
:root {
  --fds-sage-line: #B9C9B8;
  --fds-sage-wash: #F0F3ED;
  --fds-editorial-border: #D8DFD3;
  --fds-editorial-radius: 16px;
  --fds-editorial-max: 1280px;
}

/* A calm foundation, not layers of decorative gradients and product-dashboard chrome. */
body { background: var(--color-cream); }
body::before {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .025 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  opacity: .38;
}
.container { max-width: var(--fds-editorial-max); }
.serif-italic, .italic { font-style: normal !important; }
.logo-mark { font-style: normal !important; border-radius: 9px; }

/* Consistent brand typography: upright Fraunces for editorial hierarchy. */
.page-h1 {
  font-style: normal;
  font-size: clamp(2.55rem, 5.1vw, 4.5rem);
  letter-spacing: -.037em;
  line-height: 1.085;
  max-width: 21ch;
  text-wrap: balance;
}
.page-h1 .text-forest { color: inherit; }
.error-code { font-style:normal; }
a.btn { border-radius:11px; }
.page-lead { line-height: 1.64; max-width: 62ch; }
.page-hero { padding-block: clamp(48px, 6vw, 90px) clamp(36px, 5vw, 68px); }
.eyebrow { letter-spacing: .12em; }
.eyebrow::before { width: 22px; background: var(--color-amber); }
.breadcrumbs { color: var(--color-muted); }
.breadcrumbs .sep { color: var(--color-forest); opacity:.55; }

/* The same tactile-but-unfussy navigation and buttons across all pages. */
.header {
  background: rgba(245, 241, 232, .955);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--color-line);
  padding-block: 13px;
}
.logo { letter-spacing: -.024em; }
.btn, .header-cta, .back-link {
  border-radius: 11px;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.btn-primary { background: var(--color-ink); color: var(--color-cream); }
.btn-primary:hover { background: #254338; transform: none; box-shadow: 0 3px 14px rgba(20,32,31,.13); }
.btn-secondary { border-color: #6B7770; background: transparent; }
.btn-secondary:hover { background: var(--fds-sage-wash); border-color: var(--color-forest); transform: none; }
.btn:focus-visible, .fds-sub-nav a:focus-visible, a:focus-visible, button:focus-visible { outline: 3px solid var(--color-amber); outline-offset: 4px; }
.back-link:hover { transform: none; }
.fds-sub-nav { display: flex; align-items: center; gap: clamp(16px, 2.2vw, 32px); }
.fds-sub-nav a { font-size: 13.5px; font-weight: 500; text-decoration: none; color: var(--color-ink-soft); }
.fds-sub-nav > a:not(.fds-sub-nav-cta):hover { color: var(--color-forest); text-decoration: underline; text-underline-offset: 6px; }
.fds-sub-nav .fds-sub-nav-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 10px 16px; background: var(--color-ink); color: var(--color-cream);
  border: 1px solid var(--color-ink); border-radius: 11px; white-space: nowrap;
}
.fds-sub-nav .fds-sub-nav-cta:hover { background: #254338; }
.fds-sub-cta-short { display:none; }

/* Supporting pages: less 'template card gallery', stronger typographic rhythm. */
.article-body h2, .related-section h2 { font-style: normal; letter-spacing: -.025em; }
.article-body h2 { border-bottom-color: var(--fds-editorial-border); }
.article-body blockquote { font-style: normal; background: var(--fds-sage-wash); border-left-color: var(--color-forest); border-radius: 8px; }
.article-body .callout, .related-card, .service-overview-card, .blog-card {
  border-radius: var(--fds-editorial-radius);
  box-shadow: none;
}
.article-body .callout { border-left-color: var(--color-forest); background: var(--color-cream-soft); }
.feature-list li { background: transparent; border: none; border-bottom: 1px solid var(--color-line); border-radius: 0; padding: 11px 8px 13px 28px; }
.feature-list li::before { top: 16px; left: 6px; width: 3px; height: 16px; background: var(--color-forest); border-radius: 0; background-image: none; }
.related-card:hover, .service-overview-card:hover, .blog-card:hover { transform: none; box-shadow: 0 8px 24px rgba(20,32,31,.055); border-color: var(--fds-sage-line); }
.service-overview-card, .blog-card { background: var(--color-surface-elevated, #FFFCF6); }
.service-overview-card .num, .blog-card-meta .cat { color: var(--color-forest); }
.service-overview-card .price-line { font-family: var(--font-body); letter-spacing: 0; font-weight: 500; }
.related-card:focus-visible, .service-overview-card:focus-visible, .blog-card:focus-visible { outline-offset: 3px; }

/* Actual projects as proof: their media, not decorations, is the focus. */
.case-card { border-radius: 16px; border-color: var(--fds-editorial-border); box-shadow: none; }
.case-card.case-feature { background: var(--fds-sage-wash); }
.case-phones { background: #E7EEE6; border-color: var(--fds-editorial-border); border-radius: 13px; }
.case-image img { border-radius: 8px; }
.case-image figcaption, .case-phones figcaption { color: var(--color-muted); }

/* Directories and industry landing pages follow the same restrained editorial language. */
.branchen-card, .region-card, .work-card { background:var(--color-surface-elevated, #FFFCF6); border:1px solid var(--fds-editorial-border); border-radius: var(--fds-editorial-radius); box-shadow:none; }
.branchen-card:hover { border-color:var(--fds-sage-line); transform:none; box-shadow:0 8px 24px rgba(20,32,31,.055); }
.branchen-card .branche-cat { color:var(--color-forest); }
.work-card-label { background:transparent; border-radius:0; padding:0; letter-spacing:.10em; color:var(--color-forest); }
.region-card a:hover { text-decoration:underline; text-underline-offset:4px; }
.work-proof-image { border-radius:9px; box-shadow:none; border-color:var(--fds-editorial-border); }

/* CTA blocks are concise sign-offs, not luminous SaaS cards. */
.cta-block { border-radius: 18px; background: var(--color-ink); }
.cta-block::before { background: none; }
.cta-block h2 { font-style: normal; }
.cta-block .btn-primary:hover { background: var(--fds-sage-wash); }

/* Main homepage system. */
.hero {
  position: relative; overflow: hidden;
  padding-block: clamp(72px, 6.4vw, 110px) clamp(58px, 6vw, 94px);
}
/* One quiet sage sweep is sufficient. Keep it behind all live content. */
.hero::before {
  content: ''; position: absolute; z-index: 0; pointer-events: none;
  width: min(140vw, 2100px); height: min(102vw, 1500px);
  left: -42vw; bottom: -88vw;
  border: 1px solid rgba(86, 122, 101, .20);
  border-radius: 50%; transform: rotate(-13deg);
}
.hero > .container { position: relative; z-index: 1; }
.hero-grid { align-items: center; gap: clamp(42px, 5.4vw, 82px); }
.hero-headline-v1611 {
  font-size: clamp(3.1rem, 5.35vw, 5.05rem);
  font-style: normal; font-weight: 400; letter-spacing: -.041em;
  line-height: 1.045; margin: 24px 0 24px;
  max-width: 780px; text-wrap: balance;
}
.hero-headline-v1611 .hero-line { display: block; width: fit-content; max-width: 100%; font-style: normal; }
.hero-headline-v1611 .hero-line:last-child { color: var(--color-ink); font-style: normal; }
.hero-lead-v1611 { max-width: 49ch; font-size: clamp(1rem,1.35vw,1.12rem); line-height: 1.66; }
.hero .eyebrow { color: var(--color-forest); }
.hero-actions { margin-top: 25px; gap: 12px; }
.hero-actions .btn { padding: 15px 20px; }
.hero-next-step { margin-top: 12px; max-width: 57ch; font-size: .78rem; line-height: 1.55; }
.hero-proofs {
  max-width: 585px; margin-top: clamp(25px, 3.3vw, 41px); padding-top: 21px;
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 22px;
  border-top: 1px solid var(--fds-editorial-border);
}
.hero-proof { min-width: 0; display:flex; flex-direction:column; gap: 7px; }
.hero-proof + .hero-proof { border-left: 1px solid var(--fds-editorial-border); padding-left: 22px; }
.hero-proof-label { font-family: var(--font-mono); text-transform: uppercase; font-size: .63rem; line-height: 1.4; letter-spacing: .095em; color: var(--color-forest); }
.hero-proof strong { font-size: .83rem; font-weight: 500; line-height: 1.56; color: var(--color-ink-soft); }
.hero-card { perspective: none; }
.dashboard-card {
  padding: clamp(24px, 2.6vw, 38px);
  background: #152622; border-radius: 20px; color: var(--color-cream);
  transform: none; box-shadow: 0 14px 36px rgba(20, 32, 31, .12);
  border: 1px solid rgba(235,239,228,.11); transition: none;
}
.dashboard-card:hover { transform: none; }
.dashboard-card::before { display:none; }
.dashboard-header { padding-bottom: 17px; border-bottom: 1px solid rgba(245,241,232,.20); }
.dashboard-label { font-size: .66rem; letter-spacing:.16em; color: #E5B978; }
.dashboard-list { margin-top: 2px; gap:0; display:block; }
.dashboard-row {
  display: grid; grid-template-columns: 43px minmax(0,1fr) 18px;
  gap: 16px; align-items:center; border: none; border-bottom:1px solid rgba(245,241,232,.15);
  border-radius:0; padding: 17px 0; background:transparent; text-decoration:none; transition: background .2s ease;
}
.dashboard-row:hover { background: rgba(244,246,239,.045); border-color: rgba(245,241,232,.15); }
.dashboard-row:focus-visible { outline: 2px solid #E5B978; outline-offset: -3px; }
.dashboard-row-icon { display:flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:50%; background: rgba(186,207,179,.12); color: #E5B978; flex:0 0 auto; }
.dashboard-row-copy { display:flex; flex-direction:column; gap:4px; min-width:0; }
.dashboard-row-copy strong { font-family: var(--font-display); font-size: clamp(1rem,1.4vw,1.23rem); font-weight:400; line-height:1.2; color:var(--color-cream); }
.dashboard-row-copy span { font-size:.765rem; line-height:1.5; color:#CCD7CE; }
.dashboard-row-arrow { font-size:1.2rem; color:#E5B978; justify-self:end; transition: transform .2s ease; }
.dashboard-row:hover .dashboard-row-arrow { transform:translateX(3px); }
.dashboard-footer-stats { margin-top: 27px; padding-top: 21px; display:grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: 22px; border-top: 1px solid rgba(245,241,232,.24); }
.hero-free, .hero-quote { display:flex; flex-direction:column; gap:5px; min-width:0; }
.hero-free strong { font-family:var(--font-display); font-size:clamp(2rem,2.8vw,2.75rem); font-weight:400; line-height:1; color:#E5B978; }
.hero-free span { font-family:var(--font-mono); letter-spacing:.10em; text-transform:uppercase; font-size:.62rem; color:#E0E7DF; }
.hero-quote { padding-left:19px; border-left:1px solid rgba(245,241,232,.22); justify-content:center; }
.hero-quote strong { font-size:.84rem; font-weight:500; color:var(--color-cream); }
.hero-quote span { color:#CBD6CE; font-size:.76rem; line-height:1.5; }

/* Home: distinct rhythms rather than endless identical card sections. */
.section-header { gap: clamp(20px, 4vw, 54px); margin-bottom: clamp(28px, 4.4vw, 48px); }
.section-title { font-style: normal; letter-spacing: -.032em; line-height:1.14; text-wrap:balance; }
.section-title .text-forest, .section-title .text-amber { font-style:normal; }
.section-pad { padding-block: clamp(66px, 7.2vw, 102px); }
#leistungen .services-grid { border-color: var(--fds-editorial-border); background: var(--fds-editorial-border); border-radius:17px; }
.service-card { padding: clamp(25px,2.7vw,38px); background: var(--color-surface-elevated, #FFFCF6); gap: 13px; }
.service-card-primary { background: var(--fds-sage-wash) !important; }
.service-card:hover { background: #F4F6F0; }
.service-card .service-num { color:var(--color-forest); }
.service-card .service-icon-wrap { box-shadow: none; background: var(--color-forest); border-radius:10px; }
.service-card:hover .service-icon-wrap { transform:none; }
.service-points { gap: 5px 12px; margin-top: 7px; }
.service-points li { background: none !important; border: none; border-radius: 0; padding: 0; font-size: .76rem; color: var(--color-muted); }
.service-points li::before { content:'·'; display:inline; padding-right:6px; color: var(--color-forest); }
.service-card .service-title { line-height:1.21; }
.service-card-primary::after { border-radius:6px; }

#ueber .story { background: #152622; border-radius: 18px; box-shadow:none; border:1px solid rgba(245,241,232,.1); }
.story::before, .trust-section::before { display:none; }
.story-points { gap:0; }
.story-point { background:none; border:none; border-radius:0; padding:18px 0; border-top: 1px solid rgba(245,241,232,.17); transition:none; }
.story-point:hover { transform:none; background:none; }
.story-point-num { font-family:var(--font-mono); font-style:normal; font-size: .77rem; letter-spacing:.04em; line-height:1.6; min-width:27px; color:#E5B978; }
.story-point-text span { color:#CCD6CE; }
.story .portrait-real img { border-radius: 10px; }

.process-grid { border-top-color:var(--fds-editorial-border); }
.process-step { padding: clamp(24px, 2.4vw, 34px); border-color: var(--fds-editorial-border); }
.process-num { font-size: clamp(2rem,3vw,2.6rem); color:var(--color-forest); font-style:normal; margin-bottom:17px; }
.process-step h3 { font-family:var(--font-display); font-size:clamp(1.2rem,1.8vw,1.48rem); font-weight:500; }

/* Trust must look like considered evidence, not a speculative KPI dashboard. */
.trust-section { background:var(--fds-sage-wash); color: var(--color-ink); border:1px solid var(--fds-editorial-border); border-radius:18px; box-shadow:none; }
.trust-header h2 { color:var(--color-ink); }
.trust-header p { color:var(--color-ink-soft); }
.trust-header .eyebrow { color:var(--color-forest); }
.trust-header .eyebrow::before { background:var(--color-amber); }
.trust-grid { background:transparent; gap:0; border-top:1px solid var(--fds-editorial-border); border-radius:0; grid-template-columns:repeat(2,minmax(0,1fr)); }
.trust-tile { background:transparent; border-bottom:1px solid var(--fds-editorial-border); padding: 25px 23px 24px 0; gap:10px; }
.trust-tile:nth-child(2n) { padding-left:27px; border-left:1px solid var(--fds-editorial-border); }
.trust-tile:hover { background:transparent; }
.trust-tile-icon { display:none; }
.trust-tile-value { color:var(--color-forest); font-size:clamp(1.75rem,2.6vw,2.15rem); font-style:normal; }
.trust-tile-value .unit { color:var(--color-forest); opacity:.83; }
.trust-tile-label, .trust-tile-label strong { color:var(--color-ink-soft); }
.trust-tile-label strong { color:var(--color-ink); }

/* Price presentation: more legible, less floating-sales-card animation. */
.price-card, .price-card-addon { border-radius:16px; }
.price-card:hover, .price-card-addon:hover { transform:none; box-shadow: 0 7px 24px rgba(20,32,31,.06); }
.price-card.featured, .price-card.featured:hover { transform:none; }
.price-amount { white-space:nowrap; word-break:keep-all; overflow-wrap:normal; }
.price-outcome { font-style: normal; font-family: var(--font-body); font-weight: 500; }
.addon-price { flex-wrap:wrap; }

/* Projects: use real screenshots as evidence, not fake shadows or status ornaments. */
#arbeiten { background:var(--fds-sage-wash); border-color: var(--fds-editorial-border); }
.work-preview-v1611 .work-preview-card { border-radius:16px; background:var(--color-surface-elevated, #FFFCF6); box-shadow:none; }
.work-preview-v1611 .work-preview-card:hover { transform:none; box-shadow:0 8px 24px rgba(20,32,31,.07); }
.work-preview-v1611 .work-preview-visual { border-radius:9px; }
.work-preview-v1611 .proof-label { letter-spacing:.09em; }

/* Forms and FAQ should be rigorous, calm, and easy to use. */
.contact { border-radius:18px; border-color: var(--fds-editorial-border); background:var(--color-surface-elevated, #FFFCF6); }
.form-input, .form-textarea, .form-select { border-radius:9px; background:var(--color-cream-soft); }
.form-input:focus, .form-textarea:focus, .form-select:focus { box-shadow:0 0 0 3px rgba(45,74,62,.13); }
.faq-item:hover { padding-left:0; }
.faq-toggle { border-radius:7px; }

/* Legal pages: retain wording and order; align the chrome with the same visual language. */
.legal-page h1, .legal-page h2 { font-style: normal; }
.legal-page { max-width: 820px; }
.legal-hero .eyebrow { letter-spacing:.12em; }
.footer { border-top-color:var(--fds-editorial-border); }

@media (min-width:1024px) {
  .hero-grid { grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); }
}
@media (max-width: 1023px) {
  .fds-sub-nav { gap:12px; }
  .fds-sub-cta-wide { display:none; }
  .fds-sub-cta-short { display:inline; }
  .fds-sub-nav a:not(.fds-sub-nav-cta) { display:none; }
}
@media (max-width:767px) {
  .header { padding-block:11px; }
  .hero { padding: clamp(84px,14vw,104px) 0 40px; }
  .hero-grid { gap:30px; }
  .hero-headline-v1611 { font-size:clamp(2.55rem,10.45vw,3.7rem); line-height:1.05; margin:18px 0; }
  .hero-lead-v1611 { line-height:1.61; }
  .hero-actions { gap:9px; }
  .hero-actions .btn { padding:13px 16px; font-size:.83rem; }
  .hero-next-step { font-size:.77rem; }
  .dashboard-card { border-radius:16px; padding:24px; }
  .dashboard-row { padding:15px 0; grid-template-columns:40px minmax(0,1fr) 18px; gap:12px; }
  .dashboard-row-icon { width:38px; height:38px; }
  .dashboard-row-copy strong { font-size:1.04rem; }
  .dashboard-row-copy span { font-size:.75rem; }
  .hero-free strong { font-size:2.15rem; }
  .hero-proofs { margin-top:26px; gap:13px; }
  .hero-proof + .hero-proof { padding-left:14px; }
  .hero-proof strong { font-size:.76rem; }
  .section-pad { padding-block: 64px; }
  #leistungen { padding-top: 44px; }
  #arbeiten { padding-block: 64px 72px; }
  .section-header { gap:15px; }
  .service-card { padding:24px 22px; }
  .service-card-primary::after { top:20px; right:19px; }
  .trust-section { padding:30px 24px; }
  .trust-grid { grid-template-columns:1fr; }
  .trust-tile, .trust-tile:nth-child(2n) { padding:20px 0; border-left:none; }
  .process-step { padding:23px 17px; }
  .page-hero { padding:42px 0 32px; }
  .page-h1 { font-size:clamp(2.3rem,8.5vw,3.1rem); }
  .fds-sub-nav .fds-sub-nav-cta { padding:10px 12px; font-size:.78rem; }
}
@media (max-width:359px) {
  .hero-headline-v1611 { font-size: clamp(2.16rem,10.2vw,2.55rem); letter-spacing:-.043em; }
  .hero-proofs { grid-template-columns:1fr; gap:13px; }
  .hero-proof + .hero-proof { border-left:none; padding:13px 0 0; border-top:1px solid var(--fds-editorial-border); }
  .dashboard-card { padding:20px; }
  .logo { font-size: 14px; }
  .fds-sub-nav .fds-sub-nav-cta svg { display:none; }
}
@media (prefers-reduced-motion: reduce) {
  .dashboard-row-arrow, .btn, .work-preview-v1611 .work-preview-card, .service-overview-card, .blog-card { transition:none; }
  .dashboard-row:hover .dashboard-row-arrow { transform:none; }
}
@media print {
  .hero::before { display:none; }
  .fds-sub-nav { display:none; }
  .dashboard-card, .story { box-shadow:none; }
}


/* ============================================
   V17.2 – High professional / zero-KI polish
   Adds tactile hover states, calmer hero atmosphere,
   restored motion details and a richer dark trust section.
   ============================================ */
:root {
  --fds-shadow-soft: 0 10px 24px rgba(20, 32, 31, .07);
  --fds-shadow-lift: 0 18px 38px rgba(20, 32, 31, .12);
  --fds-shadow-button: 0 8px 18px rgba(20, 32, 31, .09), inset 0 -1px 0 rgba(20, 32, 31, .06);
  --fds-shadow-button-dark: 0 12px 24px rgba(20, 32, 31, .16), inset 0 -1px 0 rgba(245, 241, 232, .08);
}

/* Shared tactile buttons across homepage and inner pages */
.btn, .header-cta, .back-link, .fds-sub-nav .fds-sub-nav-cta {
  border-radius: 15px;
  position: relative;
  box-shadow: var(--fds-shadow-button);
  border: 1px solid rgba(20, 32, 31, .08);
  transition: transform .22s ease, box-shadow .22s ease, background-color .22s ease, border-color .22s ease, color .22s ease;
}
.btn .arrow, .header-cta .arrow, .back-link svg { transition: transform .22s ease; }
.btn-primary, .header-cta, .fds-sub-nav .fds-sub-nav-cta {
  background: linear-gradient(180deg, #19302b 0%, #14201f 100%);
  color: var(--color-cream);
  border-color: rgba(20, 32, 31, .72);
  box-shadow: var(--fds-shadow-button-dark);
}
.btn-primary:hover, .header-cta:hover, .fds-sub-nav .fds-sub-nav-cta:hover {
  background: linear-gradient(180deg, #224039 0%, #18302b 100%);
  transform: translateY(-2px);
  box-shadow: 0 16px 28px rgba(20, 32, 31, .18), inset 0 -1px 0 rgba(245, 241, 232, .10);
}
.btn-primary:hover .arrow, .header-cta:hover .arrow, .back-link:hover svg { transform: translateX(4px); }
.btn-secondary, .back-link {
  background: rgba(255,255,255,.38);
  border-color: rgba(20, 32, 31, .24);
  color: var(--color-ink);
}
.btn-secondary:hover, .back-link:hover {
  background: #F4F6F0;
  border-color: rgba(20, 32, 31, .42);
  color: var(--color-ink);
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(20, 32, 31, .10);
}
.hero-actions .btn {
  min-height: 56px;
  padding: 15px 22px;
  border-radius: 16px;
}
.hero-actions .btn-secondary { background: rgba(255,255,255,.34); }

/* Hero background and lines are defined once by the V17.3 option-C block. */
.hero-card { position: relative; }
.hero-card::before {
  content: '';
  position: absolute;
  inset: 6% -3% -7% 8%;
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(185, 201, 184, .18), rgba(185, 201, 184, 0));
  filter: blur(26px);
  z-index: 0;
  pointer-events: none;
}
.dashboard-card {
  position: relative;
  z-index: 1;
  border-radius: 24px;
  background: linear-gradient(180deg, #192c28 0%, #12211f 100%);
  box-shadow: 0 22px 48px rgba(20, 32, 31, .14);
}
.dashboard-row {
  transition: transform .22s ease, background-color .22s ease, border-color .22s ease;
}
.dashboard-row:hover {
  transform: translateX(4px);
  background: rgba(244,246,239,.05);
}
.dashboard-row-icon {
  transition: transform .24s ease, box-shadow .24s ease, background-color .24s ease;
}
.dashboard-row:hover .dashboard-row-icon {
  transform: translateY(-2px);
  box-shadow: 0 10px 18px rgba(0,0,0,.12);
  background: rgba(186,207,179,.16);
}

/* Restore motion and tactility for services */
.service-card,
.related-card,
.service-overview-card,
.blog-card,
.branchen-card,
.region-card,
.work-card,
.price-card,
.price-card-addon {
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease, background-color .24s ease;
}
.service-card {
  box-shadow: 0 10px 26px rgba(20, 32, 31, .04);
  border-color: rgba(185, 201, 184, .72);
}
.service-card:hover {
  background: #F5F7F2;
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(20, 32, 31, .09);
  border-color: #B7C9B8;
}
.service-card .service-icon-wrap {
  transition: transform .24s ease, box-shadow .24s ease, background-color .24s ease;
}
.service-card:hover .service-icon-wrap {
  transform: translateY(-2px) rotate(-4deg);
  box-shadow: 0 14px 24px rgba(20, 32, 31, .14);
  background: #1a2e29;
}
.service-card:hover .service-icon-wrap svg { transform: scale(1.04); }
.service-card .service-icon-wrap svg { transition: transform .24s ease; }

/* Project previews: subtle image motion like the older version */
.work-preview-v1611 .work-preview-card {
  box-shadow: 0 10px 26px rgba(20, 32, 31, .05);
  border-color: rgba(185, 201, 184, .75);
}
.work-preview-v1611 .work-preview-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 34px rgba(20, 32, 31, .10);
  border-color: #B7C9B8;
}
.work-preview-v1611 .work-preview-visual {
  position: relative;
  overflow: hidden;
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}
.work-preview-v1611 .work-preview-cover img,
.work-preview-v1611 .work-preview-phones img {
  transition: transform .42s ease;
  will-change: transform;
}
.work-preview-v1611 .work-preview-card:hover .work-preview-visual {
  transform: translateY(-2px);
  box-shadow: 0 14px 26px rgba(20, 32, 31, .10);
}
.work-preview-v1611 .work-preview-card:hover .work-preview-cover img {
  transform: scale(1.03);
}
.work-preview-v1611 .work-preview-card:hover .work-preview-phones img:first-child {
  transform: translateY(-2px) scale(1.02);
}
.work-preview-v1611 .work-preview-card:hover .work-preview-phones img:last-child {
  transform: translateY(-1px) scale(1.02);
}
/* Keep CTA readable on hover */
.u-v166-011 .btn-secondary:hover,
.u-v166-011 .btn-secondary:focus-visible {
  color: var(--color-ink) !important;
  background: #F4F6F0;
  border-color: rgba(20, 32, 31, .42);
}

/* Dark promise/trust section back with more stage presence, but without italic gimmicks. */
.story, .trust-section {
  box-shadow: 0 22px 46px rgba(20,32,31,.12), inset 0 1px 0 rgba(245,241,232,.05);
}
.trust-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 15% 12%, rgba(229,185,120,.12) 0%, rgba(229,185,120,0) 28%),
    radial-gradient(circle at 84% 0%, rgba(65, 98, 83, .24) 0%, rgba(65,98,83,0) 38%),
    linear-gradient(135deg, #1A2C28 0%, #10211F 54%, #0D1C1A 100%);
  color: var(--color-cream);
  border: 1px solid rgba(245,241,232,.08);
  border-radius: 28px;
}
.trust-section::before {
  display: block;
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(245,241,232,.05) 0 1px, transparent 1px) 0 0 / 100% 100%,
    radial-gradient(circle at 20% 80%, rgba(245,241,232,.04), transparent 24%);
  opacity: .65;
}
.trust-header, .trust-grid { position: relative; z-index: 1; }
.trust-header h2 { color: var(--color-cream); max-width: 16ch; }
.trust-header p { color: rgba(245,241,232,.76); max-width: 34ch; }
.trust-header .eyebrow { color: var(--color-amber-soft); }
.trust-header .eyebrow::before { background: var(--color-amber-soft); }
.trust-grid {
  background: transparent;
  gap: 18px;
  border-top: none;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.trust-tile {
  padding: 0;
  border: 1px solid rgba(245,241,232,.08);
  background: rgba(245,241,232,.03);
  border-radius: 18px;
  min-height: 100%;
  overflow: hidden;
}
.trust-tile:nth-child(2n) { padding-left: 0; border-left: 1px solid rgba(245,241,232,.08); }
.trust-tile:hover {
  background: rgba(245,241,232,.045);
  transform: translateY(-3px);
  border-color: rgba(229,185,120,.24);
  box-shadow: 0 16px 30px rgba(0,0,0,.13);
}
.trust-tile > * { padding-left: 26px; padding-right: 26px; }
.trust-tile-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 22px 0 18px 26px;
  border-radius: 14px;
  background: rgba(199, 136, 45, .92);
  color: var(--color-ink);
  box-shadow: inset 0 -1px 0 rgba(20,32,31,.12);
}
.trust-tile-value {
  color: var(--color-cream);
  font-size: clamp(2rem, 2.8vw, 2.7rem);
  line-height: 1;
  margin-bottom: 14px;
}
.trust-tile-value .unit {
  color: var(--color-amber-soft);
  opacity: .98;
  margin-left: 6px;
}
.trust-tile-label {
  color: rgba(245,241,232,.76);
  padding-bottom: 24px;
}
.trust-tile-label strong {
  color: var(--color-cream);
  display: block;
  margin-bottom: 8px;
}

/* Pricing cards recover subtle lift and button depth */
.price-card:hover,
.price-card-addon:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 36px rgba(20, 32, 31, .12);
}
.price-card .btn,
.price-card-addon .btn { margin-top: auto; }

@media (max-width: 1023px) {
  .trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .trust-section { padding: 34px 24px; border-radius: 24px; }
  .trust-grid { grid-template-columns: 1fr; gap: 14px; }
  .trust-tile, .trust-tile:nth-child(2n) { padding-left: 0; border-left: 1px solid rgba(245,241,232,.08); }
  .trust-tile-icon { margin: 18px 0 16px 20px; }
  .trust-tile > * { padding-left: 20px; padding-right: 20px; }
  .trust-tile-label { padding-bottom: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .btn, .header-cta, .back-link, .service-card, .work-preview-v1611 .work-preview-card,
  .work-preview-v1611 .work-preview-visual, .service-card .service-icon-wrap,
  .work-preview-v1611 .work-preview-cover img, .work-preview-v1611 .work-preview-phones img,
  .trust-tile, .price-card, .price-card-addon, .dashboard-row, .dashboard-row-icon {
    transition: none !important;
    transform: none !important;
  }
}

/* V17.3 — Option C, reviewed in the actual hero composition.
   Visible but restrained: daylight transition, diffused edge shadow and two
   deliberate sage strokes. No hero photograph, stock image or animation. */
.hero {
  isolation: isolate;
  background-color: #F5F1E8;
  background-image:
    radial-gradient(ellipse 72% 78% at 88% 38%, rgba(185, 204, 185, .34) 0%, rgba(185, 204, 185, .12) 46%, rgba(185, 204, 185, 0) 78%),
    radial-gradient(ellipse 68% 72% at 18% 7%, rgba(255, 255, 255, .64) 0%, rgba(255, 255, 255, 0) 74%),
    linear-gradient(112deg, #F8F5EF 0%, #F5F1E8 43%, #ECF0E8 77%, #F3F0E8 100%);
}
.hero::before {
  display: block;
  inset: 0;
  width: 100%; height: 100%;
  border: 0;
  border-radius: 0;
  background: url('/assets/fds-hero-atmosphere.svg?v=17.3') center / 100% 100% no-repeat;
  transform: none;
  opacity: 1;
  z-index: 0;
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border-radius: 0;
  background:
    radial-gradient(ellipse 34% 70% at 103% 61%, rgba(24, 49, 37, .13) 0%, rgba(24, 49, 37, 0) 74%),
    linear-gradient(126deg, transparent 16%, rgba(255, 255, 255, .18) 44%, transparent 65%);
  filter: none;
  pointer-events: none;
  z-index: 0;
}
.hero > .container { position: relative; z-index: 1; }
@media (max-width: 767px) {
  /* Allow the glow, but do not force a decorative arc behind narrow copy. */
  .hero::before { opacity: .45; background-size: auto 100%; background-position: 38% center; }
  .hero::after { opacity: .75; }
}

/* V17.4: precise responsive fixes and restrained personal proof icons. */
.trust-tile > .trust-tile-icon {
  padding: 0;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  margin: 22px 0 16px 26px;
  overflow: visible;
}
.trust-tile > .trust-tile-icon svg {
  flex: 0 0 auto;
  display: block;
  width: 20px;
  height: 20px;
  stroke: currentColor;
}
.trust-tile-value {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 5px 7px;
  line-height: 1.15;
}
.trust-tile-value .unit {
  margin-left: 0;
  font-size: .71rem;
  line-height: 1.4;
  letter-spacing: .065em;
  opacity: 1;
}
.trust-tile-label { font-size: .825rem; line-height: 1.57; }
.hero-proof {
  flex-direction: row;
  align-items: flex-start;
  gap: 11px;
}
.hero-proof-icon {
  flex: 0 0 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-forest);
  margin-top: 1px;
}
.hero-proof-copy { display:flex; flex-direction:column; gap:5px; min-width:0; }
.hero-proof-copy .hero-proof-label { display:block; }
.hero-proof-copy strong { display:block; }
/* A closed overlay must not intercept touch while its off-screen animation finishes. */
.mobile-menu { pointer-events: none; }
.mobile-menu.open { pointer-events: auto; }
/* Complement explicit in-page navigation; native/deep links use the same offset. */
section[id], main[id] { scroll-margin-top: calc(var(--header-height, 75px) + 12px); }
@media (max-width: 767px) {
  .hero-proof { gap: 10px; }
  .hero-proof-icon { flex-basis: 19px; }
  .trust-tile > .trust-tile-icon { margin:18px 0 15px 20px; }
  .trust-tile-value { font-size: clamp(2rem,8vw,2.65rem); }
}
@media (max-width: 359px) {
  .hero-proof + .hero-proof { padding-top: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .mobile-menu { transition: none; }
}

/* V17.4 mobile clarity: long German qualification and eyebrow labels must never
   break into stray syllables in an overly narrow two-column trust row. */
@media (max-width: 600px) {
  .hero-proofs {
    grid-template-columns: minmax(0,1fr);
    gap: 14px;
    max-width: 440px;
  }
  .hero-proof + .hero-proof {
    border-left: 0;
    border-top: 1px solid var(--fds-editorial-border);
    padding: 14px 0 0;
  }
  .hero-proof-copy { gap: 3px; }
  .hero-proof-label { letter-spacing: .08em; }
  .hero-proof strong { font-size: .83rem; }
}