/* Locale-specific polish for German (DE)
   Keeps layout/theme intact while optimizing for longer words */
html[lang="de"] :where(h1,h2,h3,p,li,a,small,strong){ hyphens:auto; }

/* Hero typography: slightly reduce max size, improve line-height */
html[lang="de"] .hero-title{
  font-size: clamp(1.9rem, 3.6vw, 2.8rem) !important;
  line-height: 1.12;
  letter-spacing: -0.01em;
}

/* Hero subtitle: a touch smaller & looser line-height for readability */
html[lang="de"] .hero-subtitle{
  font-size: clamp(1.0rem, 1.9vw, 1.1rem);
  line-height: 1.5;
}

/* Buttons in hero: reduce padding to avoid wrapping */
html[lang="de"] .hero-ctas .btn{
  padding: .8rem 1rem !important;
  white-space: normal;
}

/* Service tiles: nudge headings a bit smaller to fit comfortably */
html[lang="de"] .grid .card strong{
  font-size: .98em;
  line-height: 1.2;
}

/* General subtle text: slightly increased line-height for dense German text */
html[lang="de"] .subtle{
  line-height: 1.45;
}

/* Footer long links/addresses: allow graceful breaks */
html[lang="de"] .footer p,
html[lang="de"] .footer a{
  overflow-wrap: anywhere;
}


/* === v7.4 DE header/hero compact === */
html[lang="de"] .header .container.hstack{ gap:.6rem !important; }
html[lang="de"] .header .nav{ gap:1rem; flex-wrap:nowrap; }
html[lang="de"] .header .nav a{ font-size:.95em; letter-spacing:-.005em; white-space:nowrap; }
html[lang="de"] .brand strong{ font-size:1rem; }

html[lang="de"] .hero.section{ padding-top: 2.4rem; padding-bottom: 2.4rem; }
html[lang="de"] .hero-title{ font-size: clamp(1.7rem, 3.0vw, 2.5rem) !important; line-height:1.14; }
html[lang="de"] .hero-subtitle{ max-width: 62ch; font-size: clamp(1rem, 1.6vw, 1.06rem); line-height:1.5; }
html[lang="de"] .hero-ctas .btn{ padding:.74rem .95rem !important; }

/* 404 chips: keep tidy */
html[lang="de"] .grid .icon-card small{ font-size:.76rem; opacity:.9; }


/* Footer CTA buttons compact in DE */
html[lang="de"] .footer .hstack .btn{ padding:.66rem .95rem; font-size:.95rem; }


/* v7.4.1 DE header compact */
html[lang="de"] .header .nav{ gap: .9rem; }
html[lang="de"] .header .nav a{ font-size: .94rem; letter-spacing: -0.005em; }
html[lang="de"] .brand strong{ font-size: .98rem; }


/* v7.4.2 — Make DE hero match EN scale and layout */
html[lang="de"] .hero .hero-inner{ max-width: 1024px; margin: 0 auto; text-align: center; }
html[lang="de"] .hero.section{ padding: 3.5rem 0 !important; }
html[lang="de"] .hero-title{ font-size: clamp(2.25rem, 6.2vw, 4.5rem) !important; line-height: 1.06 !important; letter-spacing: -0.01em; }
html[lang="de"] .hero-subtitle{ font-size: clamp(1.125rem, 2.1vw, 1.375rem) !important; line-height: 1.45 !important; max-width: 70ch; margin-left:auto; margin-right:auto; }
html[lang="de"] .hero-ctas .btn{ padding: .9rem 1.1rem !important; }


/* Ensure DE hero paragraph and CTAs are left aligned for a punchier look */




/* DE header: ensure tidy spacing and single underline */
html[lang="de"] .header .nav a,
html[lang="de"] .header .nav a:hover{ text-decoration: none !important; }
html[lang="de"] .header .container.hstack > .nav{ gap: .9rem !important; }


/* DE hero center alignment to match EN */
html[lang="de"] .hero .hero-subtitle{ text-align:center !important; margin-left:auto !important; margin-right:auto !important; }
html[lang="de"] .hero .hero-ctas{ justify-content:center !important; }


/* DE: mirror EN typography for About + Index heroes */
html[lang="de"] #about-us .hero-inner .hero-title{
  font-size: clamp(var(--h1-about-min), var(--h1-about-fluid), var(--h1-about-max)) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.01em !important;
}
html[lang="de"] #about-us .hero-inner .hero-subtitle{
  font-size: clamp(1.02rem, 1.8vw, var(--lead-max)) !important;
  line-height: 1.55 !important;
}
/* Keep index (home) hero same as EN */
html[lang="de"] .hero .hero-title{ font-size: clamp(1.8rem, 9vw, 2.8rem) !important; line-height: 1.15 !important; letter-spacing: 0 !important; }
html[lang="de"] .hero .hero-subtitle{ font-size: clamp(1.0rem, 1.9vw, 1.1rem) !important; }


/* DE header: remove all hover underlines to match EN */
html[lang="de"] .header .nav a,
html[lang="de"] .header .nav a:hover,
html[lang="de"] .header .nav a:focus{
  text-decoration: none !important;
  background-image: none !important;
  box-shadow: none !important;
  /* Remove any bottom border that could appear as an underline */
  border-bottom: none !important;
}
html[lang="de"] .header .nav a::after{ content: none !important; display: none !important; }

/* Also prevent active/current links from showing an underline */
html[lang="de"] .header .nav a.active,
html[lang="de"] .header .nav a[aria-current="page"]{
  border-bottom: none !important;
}

/* Ensure all nav links within the German header (regardless of selector
   specificity) never display a bottom border. This overrides the base
   theme which uses a border on hover and active states. */
html[lang="de"] .nav a,
html[lang="de"] nav a,
html[lang="de"] .nav a:hover,
html[lang="de"] nav a:hover,
html[lang="de"] .nav a:focus,
html[lang="de"] nav a:focus,
html[lang="de"] .nav a.active,
html[lang="de"] nav a.active,
html[lang="de"] .nav a[aria-current="page"],
html[lang="de"] nav a[aria-current="page"]{
  /* Remove any border from nav links entirely to avoid underlines */
  border: none !important;
  border-bottom: none !important;
  border-bottom-color: transparent !important;
  border-bottom-width: 0 !important;
  /* Also clear border image to prevent fallback lines */
  border-image: none !important;
}

/* Center align the DE hero content to mirror the EN version. Ensure headings,
   subtitles and call‑to‑action buttons are horizontally centred. */
html[lang="de"] .hero .hero-inner{
  text-align:center !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
html[lang="de"] .hero .hero-subtitle{
  margin-left:auto !important;
  margin-right:auto !important;
  text-align:center !important;
}
html[lang="de"] .hero .hero-ctas{
  justify-content:center !important;
}

/* ==== V8.3 — DE Contact polish to mirror EN ==== */
/* Slightly smaller left-side heading in DE contact section */
html[lang="de"] #contact :where(h1,h2){
  font-size: clamp(1.4rem, 2.8vw, 2.0rem) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em;
}

/* Match form sizing to EN (right side) */
html[lang="de"] #contact .form, 
html[lang="de"] #contact form {
  max-width: 560px !important;
  width: 100% !important;
}

html[lang="de"] #contact .grid {
  grid-template-columns: 1.1fr 1fr !important; /* keep left content slightly wider but close to EN */
  gap: 1.25rem !important;
}

@media (max-width: 900px){
  html[lang="de"] #contact .grid{
    grid-template-columns: 1fr !important;
  }
}

/* Inputs/buttons consistent paddings and font-size */
html[lang="de"] #contact input, 
html[lang="de"] #contact textarea, 
html[lang="de"] #contact select {
  font-size: 1rem !important;
  padding: .8rem .9rem !important;
}

html[lang="de"] #contact .btn {
  padding: .9rem 1.1rem !important;
  font-weight: 700;
}


/* ==== V8.3 — DE Contact heading fine-tune (include h3) ==== */
html[lang="de"] #contact :where(h1,h2,h3){
  font-size: clamp(1.35rem, 2.6vw, 1.95rem) !important;
  line-height: 1.22 !important;
  letter-spacing: -0.01em;
}

/* ==== V8.3 — DE: make stats numbers one size smaller ==== */
html[lang="de"] .stats .card .vstack > :first-child{
  /* force a slightly smaller responsive size than EN */
  font-size: clamp(1.6rem, 5.2vw, 2.4rem) !important;
  line-height: 1.05 !important;
}

/* ==== V8.3 — DE headings: one size smaller for Services, Process, Team ==== */

/* Services page top title "Unsere Leistungen" (h1 inside section container, not the hero) */
html[lang="de"] .section .container > h1.hero-title{
  font-size: clamp(1.60rem, 3.0vw, 2.40rem) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.01em;
}

/* Home page "Erreichen Sie beeindruckende Ergebnisse..." and "Unser Team" */
html[lang="de"] #process .hero-title,
html[lang="de"] #team .hero-title{
  font-size: clamp(1.45rem, 3.1vw, 2.2rem) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em;
}

/* ==== V8.3.1 — Force DE hero to match EN exactly ==== */
html[lang="de"] .hero .hero-inner{ max-width:1120px !important; margin:0 auto !important; padding:0 1rem !important; text-align:center !important; }
html[lang="de"] .hero .hero-title{ font-size: clamp(1.8rem, 9vw, 2.8rem) !important; line-height:1.12 !important; letter-spacing:-0.01em !important; text-wrap:balance; }
html[lang="de"] .hero .hero-subtitle{ font-size: clamp(1.0rem, 2vw, 1.125rem) !important; line-height:1.55 !important; max-width:68ch !important; margin:.9rem auto 0 !important; text-align:center !important; }
html[lang="de"] .hero .hero-ctas{ margin-top:1.3rem !important; display:flex !important; gap:.875rem !important; flex-wrap:wrap !important; justify-content:center !important; }

/* ==== V8.3.1 — DE Services H1 smaller again ==== */
html[lang="de"] .section .container > h1.hero-title{
  font-size: clamp(1.48rem, 2.8vw, 2.25rem) !important;
  line-height: 1.14 !important;
  letter-spacing: -0.01em;
}

/* ==== V8.3.1 — DE hero: center section like EN 'rectangle' and match inner width ==== */
html[lang="de"] .hero.section{
  max-width: 1120px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
html[lang="de"] .hero .hero-inner{
  max-width: 980px !important; /* matches theme-clean-light EN */
}
/* ==== V8.3.1 — DE Services H1: smaller again ==== */
html[lang="de"] .section .container > h1.hero-title{
  font-size: clamp(1.36rem, 2.5vw, 2.05rem) !important;
  line-height: 1.13 !important;
  letter-spacing: -0.01em;
}

/* ==== V8.3.1 — DE Services H1: 20% smaller ==== */
html[lang="de"] .section .container > h1.hero-title{
  font-size: clamp(1.10rem, 2.0vw, 1.64rem) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.01em;
}
/* ==== V8.3.1 — DE Hero: match EN rectangle w/ soft curves ==== */
html[lang="de"] .hero.section{
  max-width: 1120px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  background: var(--surface) !important;
  border: 1px solid var(--surface-border) !important;
  border-radius: var(--radius) !important; /* same softness as EN theme */
  box-shadow: var(--shadow) !important;
  overflow: hidden !important; /* clip hero ::before overlay to rounded corners */
}
html[lang="de"] .hero .hero-inner{ max-width: 980px !important; }

/* === V8.3.1.2 — Further adjustments to match EN header and hero === */
/* Reduce nav font size and padding to prevent wrapping, align with English header */
html[lang="de"] .header .nav {
  /* Match the English header spacing between links */
  gap: 1rem !important;
}
html[lang="de"] .header .nav a {
  /* Match English nav font size and padding */
  font-size: 1rem !important;
  padding: 0.5rem 0.75rem !important;
  white-space: nowrap !important;
}
/* Harmonize hero typography scale with English version */
html[lang="de"] .hero .hero-inner {
  max-width: 1000px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}
html[lang="de"] .hero-title {
  font-size: clamp(2rem, 5vw, 4rem) !important;
  line-height: 1.08 !important;
}
html[lang="de"] .hero-subtitle {
  font-size: clamp(1.125rem, 2vw, 1.375rem) !important;
  line-height: 1.5 !important;
  max-width: 62ch !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ==== V8.3.1 — DE hero translucent match to EN ==== */
html[lang="de"] .hero.section{
  max-width: 1120px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  background: transparent !important;            /* allow background fibers through */
  border: 1px solid var(--surface-border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
  overflow: hidden !important;                   /* clip hero ::before overlay to rounded corners */
}
/* Keep inner width parity */
html[lang="de"] .hero .hero-inner{ max-width: 980px !important; }

/* ================================================================
 * Home Hero Adjustments (DE)
 *
 * The home page uses a split hero layout with a large grid of
 * service icons on the right. In German, the hero copy tends to
 * wrap onto more lines which pushes the overall height of the
 * section taller. The generic hero styling above clips overflow to
 * preserve rounded corners for the decorative overlay. As a side
 * effect the bottom row of service cards can become hidden in the
 * German version because the container height doesn’t expand.
 *
 * To mirror the English layout and ensure that all service cards
 * remain visible, we override the overflow behaviour for the home
 * section (#home) specifically. We also provide additional
 * bottom padding so the grid doesn’t butt up against the following
 * statistics row. These overrides are scoped to the German locale
 * and only affect the #home section.
 */
html[lang="de"] #home{
  /* Allow the hero content to grow without clipping. Without this
     override the third row of icon cards may be cut off by the
     parent’s overflow:hidden rule above. */
  overflow: visible !important;
  /* Add generous bottom padding to match the vertical breathing room
     seen on the English site and to separate the hero card from the
     stats section below. */
  padding-bottom: 3.5rem !important;
}


/* === V8.3.1 Final — header parity with EN === */
html[lang="de"] .header .nav { gap: 1rem !important; }
html[lang="de"] .header .nav a {
  padding: .5rem .75rem !important;
  white-space: nowrap !important;
}