/*
 * Fundament Digital — Poster palette 1.7.0
 * Cool ice-grey reading surfaces, graphite navy and restrained brand accents.
 */

:root {
  --fd-brand-navy: #101927;
  --fd-brand-navy-deep: #09111c;
  --fd-brand-navy-soft: #1d2a3a;
  --fd-brand-blue: #314f83;
  --fd-brand-orange: #d75c1b;
  --fd-brand-orange-soft: #eb7a3b;
  --fd-brand-gray: #97a0aa;
  --fd-brand-mist: #e5ebf0;
  --fd-brand-line: rgba(16, 25, 39, 0.15);

  --ink: #101927;
  --ink2: #1d2a3a;
  --ink3: #34465a;
  --paper: #edf2f5;
  --paper2: #e5ebf0;
  --paper3: #d7e0e7;
  --white: #f7f9fa;
  --orange: var(--fd-brand-orange);
  --orange2: var(--fd-brand-orange-soft);
  --blue: var(--fd-brand-blue);
  --muted: #5f6b78;
  --line: rgba(16, 25, 39, 0.13);
  --fd-paper-edge: #cbd5de;
  --fd-copper-wash: rgba(215, 92, 27, 0.12);
  --fd-gold: var(--fd-brand-orange);
  --fd-gold-deep: #b64a16;
  --fd-gold-wash: rgba(215, 92, 27, 0.14);
  --fd-charcoal: var(--fd-brand-navy);
  --fd-charcoal-soft: var(--fd-brand-navy-soft);
  --fd-blue-charcoal: var(--fd-brand-navy);
  --fd-blue-charcoal-deep: var(--fd-brand-navy-deep);
  --fd-blue-charcoal-soft: var(--fd-brand-navy-soft);
  --fd-blue-mist: var(--fd-brand-mist);
  --fd-blue-line: rgba(49, 79, 131, 0.35);

  --fd-action-orange: #b64a16;
  --fd-action-orange-hover: #963b11;
  --fd-readable-orange: #a64215;
  --fd-orange-on-dark: #f28b53;
  --fd-matte-panel: #101927;
  --fd-accent-line: linear-gradient(90deg, #d75c1b 0%, #97a0aa 50%, #314f83 100%);
  --fd-logo-stripe-overlay: linear-gradient(
    135deg,
    rgba(215, 92, 27, 0.095) 0%,
    rgba(215, 92, 27, 0.025) 28%,
    rgba(151, 160, 170, 0.022) 52%,
    rgba(49, 79, 131, 0.095) 100%
  );
  --fd-panel-dot-grid: radial-gradient(
    circle at 1px 1px,
    rgba(255, 255, 255, 0.027) 0 1px,
    transparent 1.5px
  );

  --shadow-soft: 0 14px 38px rgba(16, 25, 39, 0.065);
  --shadow-md: 0 22px 54px rgba(16, 25, 39, 0.105);
}

html,
body {
  background: var(--fd-brand-mist);
}

body {
  color: #273545;
}

p,
.subhero-lead,
.leistung-desc,
.prozess-text,
.ref-body p,
.timeline p,
.faq-item p {
  color: var(--muted);
}

.section.light,
.section.paper,
body:not(.fd-page-startseite) .section.light,
body:not(.fd-page-startseite) .section.paper,
.home-support-section,
.home-personal-section,
.fd-page-startseite .cta-section {
  background: var(--paper);
}

.section.paper2,
body:not(.fd-page-startseite) .section.paper2,
.home-services-section,
.home-process-section,
.fd-page-startseite .testimonials-section {
  background: var(--paper2);
}

body:not(.fd-page-startseite),
.fd-page-angebot-erstellen .anfrage-section {
  background: var(--fd-brand-mist);
}

.site-header {
  background: rgba(16, 25, 39, 0.98);
  border-bottom-color: rgba(151, 160, 170, 0.16);
}

.site-footer {
  background: #0b121c;
  border-top-color: rgba(215, 92, 27, 0.38);
}

.site-header .nav ul {
  border-color: rgba(229, 235, 240, 0.14);
  background: rgba(229, 235, 240, 0.035);
}

.site-header .nav ul li a:hover {
  background: rgba(229, 235, 240, 0.075);
}

.site-header .nav ul li a[aria-current="page"] {
  background: rgba(215, 92, 27, 0.14);
  border-color: rgba(215, 92, 27, 0.36);
  box-shadow: inset 0 0 0 1px rgba(215, 92, 27, 0.07);
}

.site-header::after,
.site-footer::after,
.section-kicker::before,
.section-kicker::after,
.eyebrow::before,
.problem-item::before,
.prozess-card::before,
.card::before,
.offer-card::before,
.highlight-box::before,
.cta-box::before,
.tcard::before,
.form-card::before,
.contact-card::before,
.contact-note::before,
.service-lane::before,
.webdesign-price-box::before,
.webdesign-discretion-note::before,
.webdesign-discretion-note > span::after {
  background: var(--fd-accent-line);
}

.fd-page-startseite .hero::after {
  background:
    linear-gradient(90deg, rgba(9, 17, 28, 0.995) 0%, rgba(9, 17, 28, 0.955) 36%, rgba(16, 25, 39, 0.74) 59%, rgba(16, 25, 39, 0.24) 100%),
    linear-gradient(180deg, rgba(9, 17, 28, 0.08), rgba(9, 17, 28, 0.3));
}

.fd-page-startseite .hero h1 .accent {
  background: linear-gradient(transparent 76%, rgba(215, 92, 27, 0.31) 76%);
}

.subhero::before {
  background: linear-gradient(
    90deg,
    rgba(9, 17, 28, 0.985) 0%,
    rgba(16, 25, 39, 0.93) 48%,
    rgba(29, 42, 58, 0.58) 100%
  );
}

.subhero .eyebrow,
.subhero .eyebrow[style] {
  color: var(--fd-orange-on-dark) !important;
}

a.btn-primary,
button.btn-primary,
.btn-primary,
.fd-page-startseite .testimonials-section .btn-primary,
.fd-page-startseite .cta-box .btn-primary {
  color: #fff;
  background-color: var(--fd-action-orange);
  box-shadow: 0 10px 26px rgba(182, 74, 22, 0.2);
}

a.btn-primary:hover,
a.btn-primary:focus-visible,
button.btn-primary:hover,
button.btn-primary:focus-visible,
.btn-primary:hover,
.btn-primary:focus-visible,
.fd-page-startseite .testimonials-section .btn-primary:hover,
.fd-page-startseite .cta-box .btn-primary:hover {
  color: #fff;
  background-color: var(--fd-action-orange-hover);
}

.card,
.offer-card,
.ref-card,
.contact-card,
.form-card,
.home-support-card,
.home-service-card,
.home-process-card,
.tcard,
.tcard-featured,
.service-lane,
.about-proof-card,
.webdesign-discretion-note,
.webdesign-principle,
.webdesign-scope {
  border-color: var(--fd-paper-edge);
  background-color: #f6f8fa;
  box-shadow: 0 12px 30px rgba(16, 25, 39, 0.055);
}

.home-service-detail,
.fd-page-startseite .tcard-featured,
.webdesign-scope-note,
.fd-page-angebot-erstellen .choice-group {
  background: #e9eef2;
}

.webdesign-scope-note {
  color: var(--ink);
  border: 1px solid var(--fd-paper-edge);
}

.webdesign-scope-note h3 {
  color: var(--ink) !important;
}

.webdesign-scope-note p {
  color: var(--muted) !important;
}

.highlight-box,
.problem-item.highlight,
.service-context-panel,
.contact-note,
.testimonials-rating-bar,
.about-difference,
.service-pricing-note,
.webdesign-price-box,
.cta-box,
.home-personal-card {
  border-color: rgba(151, 160, 170, 0.22);
  background-color: var(--fd-matte-panel);
  background-image: var(--fd-logo-stripe-overlay), var(--fd-panel-dot-grid);
  box-shadow: 0 18px 42px rgba(9, 17, 28, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.fd-page-startseite .testimonials-rating-bar,
.fd-page-startseite .cta-box,
.fd-page-startseite .home-personal-card {
  background-color: var(--fd-brand-navy);
}

.fd-page-startseite .trating-stars,
.fd-page-startseite .tcard-stars {
  color: var(--fd-brand-orange);
}

.fd-page-startseite .tcard,
.fd-page-startseite .tcard-featured {
  color: var(--ink);
  border-color: var(--fd-paper-edge);
  background: #f6f8fa;
}

.fd-page-startseite .tcard-featured {
  background: #e9eef2;
}

.fd-page-startseite .tcard-text,
.fd-page-startseite .tcard-featured .tcard-text,
.fd-page-startseite .tcard-name,
.fd-page-startseite .tcard-featured .tcard-name {
  color: #344354;
}

.fd-page-startseite .tcard-role,
.fd-page-startseite .tcard-featured .tcard-role,
.fd-page-startseite .tfooter-google {
  color: #667381;
}

.fd-page-angebot-erstellen .form-card,
.fd-page-angebot-erstellen .choice-group .checkbox-row {
  border-color: var(--fd-paper-edge);
  background: #f6f8fa;
}

.fd-page-angebot-erstellen .form-card input,
.fd-page-angebot-erstellen .form-card select,
.fd-page-angebot-erstellen .form-card textarea,
input,
select,
textarea {
  border-color: #c3ced7;
  color: #273545;
  background-color: #edf2f5;
}

.fd-page-angebot-erstellen .form-card input:focus,
.fd-page-angebot-erstellen .form-card select:focus,
.fd-page-angebot-erstellen .form-card textarea:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: var(--fd-brand-orange);
  background-color: #f8fafb;
  box-shadow: 0 0 0 4px rgba(215, 92, 27, 0.1);
}

.webdesign-discretion-note {
  background: #f2f5f7;
}

#cookie-banner {
  color: var(--ink);
  border-color: var(--fd-paper-edge);
  background: #f6f8fa;
  box-shadow: 0 28px 86px rgba(9, 17, 28, 0.32);
}

.cookie-title,
.cookie-toggle-name,
.cookie-info-section h3 {
  color: var(--ink);
}

.cookie-intro,
.cookie-toggle-desc,
.cookie-info-section p,
.cookie-footer-links,
.cookie-tab {
  color: var(--muted);
}

.cookie-tab-bar,
.cookie-footer,
.cookie-toggle-item,
.cookie-info-section {
  border-color: var(--fd-paper-edge);
}

.cookie-tab:hover:not(.active),
.cookie-tab:focus-visible,
.cookie-toggle-item,
.cookie-toggle-item:hover,
.cookie-info-section {
  background: var(--paper);
}

.cookie-provider-tag,
.always-on-label {
  color: #5b6876;
  background: #dde5eb;
}

.cookie-tab.active {
  border-bottom-color: var(--fd-brand-orange);
}

.cookie-btn-reject,
.cookie-btn-reject:hover,
.cookie-btn-reject:focus-visible {
  color: #fff;
  border-color: var(--fd-brand-navy);
  background: var(--fd-brand-navy);
}

.cookie-btn-save {
  color: var(--fd-readable-orange);
  border-color: var(--fd-action-orange);
  background: #f6f8fa;
}

.home-secondary-action {
  color: var(--fd-brand-navy);
  border-color: rgba(16, 25, 39, 0.28);
}

.home-secondary-action:hover,
.home-secondary-action:focus-visible {
  border-color: var(--fd-brand-blue);
  background: rgba(49, 79, 131, 0.075);
}

#scroll-top {
  border-color: rgba(215, 92, 27, 0.52);
  background: var(--fd-brand-navy);
}

@media (max-width: 980px) {
  .site-header .nav {
    border-color: rgba(229, 235, 240, 0.15);
    background: rgba(16, 25, 39, 0.995);
    box-shadow: 0 28px 72px rgba(9, 17, 28, 0.56);
  }

  .site-header .nav::before {
    background: var(--fd-accent-line);
  }

  .site-header .nav ul {
    border: 0;
    background: transparent;
  }

  .site-header .nav ul li a,
  .site-header .nav ul li:nth-child(n) a {
    color: rgba(229, 235, 240, 0.86) !important;
    border-color: transparent;
    background: transparent;
  }

  .site-header .nav ul li a:hover,
  .site-header .nav ul li a:focus-visible {
    color: #fff !important;
    background: rgba(229, 235, 240, 0.075);
  }

  .site-header .nav ul li a[aria-current="page"] {
    color: #fff !important;
    border-left-color: var(--fd-brand-orange);
    background: rgba(215, 92, 27, 0.14);
    box-shadow: inset 0 0 0 1px rgba(215, 92, 27, 0.08);
  }

  .site-header .nav-cta,
  .site-header .nav-cta:hover,
  .site-header .nav-cta:focus-visible {
    color: #fff !important;
    border-color: var(--fd-action-orange) !important;
    background: var(--fd-action-orange) !important;
  }

  .site-header .nav-toggle {
    border-color: rgba(229, 235, 240, 0.22);
    background: rgba(229, 235, 240, 0.04);
  }

  .site-header .nav-toggle span {
    background: #e5ebf0;
  }

  .site-header .nav-toggle[aria-expanded="true"] {
    border-color: rgba(215, 92, 27, 0.55);
    background: rgba(215, 92, 27, 0.12);
  }
}

@media (max-width: 720px) {
  .fd-page-startseite .hero {
    background-image:
      linear-gradient(180deg, rgba(9, 17, 28, 0.995) 0%, rgba(9, 17, 28, 0.975) 43%, rgba(16, 25, 39, 0.75) 69%, rgba(16, 25, 39, 0.4) 100%),
      url("../img/hero-startseite-mobile.webp");
  }
}