/* =============================================================
   03 · LAYOUT
   Container, Sektionen mit weichen Übergängen, Header,
   Navigation, Footer.
   ============================================================= */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: var(--container-narrow); }
.container--wide { max-width: 1600px; }

/* ---------- Sektionen ---------- */
.section { padding-block: var(--section); position: relative; }
.section--sm { padding-block: var(--section-sm); }
.section--white { background: var(--c-surface); }
/* Weiche Übergänge statt harter Farbblöcke */
.section--to-white { background: linear-gradient(180deg, var(--c-bg) 0%, var(--c-surface) 40%); }
.section--to-bg { background: linear-gradient(180deg, var(--c-surface) 0%, var(--c-bg) 45%); }
/* Getönte Sektion: warmer Ton mit weichem Licht – ruhig, ohne Muster */
.section--tint { background: radial-gradient(90% 70% at 15% 0%, #FBFAF7 0%, rgba(251,250,247,0) 60%), radial-gradient(60% 60% at 100% 100%, rgba(190,30,40,0.05), transparent 65%), var(--c-tint); }
.section--tint > * { position: relative; }
.section--glow { background: radial-gradient(70% 60% at 100% 0%, rgba(190,30,40,0.05), transparent 60%), radial-gradient(50% 50% at 0% 100%, rgba(18,19,21,0.04), transparent 60%), var(--c-surface); }
.section--to-dark { background: linear-gradient(180deg, var(--c-bg) 0%, var(--c-anthracite) 32%, var(--c-ink) 100%); color: var(--c-text-inverse); }
.section--to-dark h1, .section--to-dark h2, .section--to-dark h3 { color: #fff; }
.section--to-dark .lead, .section--to-dark .text-muted { color: rgba(245,245,243,0.7); }
.section--dark { background: var(--c-ink); color: var(--c-text-inverse); }
.section--dark h1, .section--dark h2, .section--dark h3 { color: #fff; }
.section--dark .lead { color: rgba(245,245,243,0.7); }

.section-head { margin-bottom: clamp(2.25rem, 4vw, 3.5rem); }
.section-head--split { display: grid; gap: var(--gap); align-items: end; }
@media (min-width: 900px) {
  .section-head--split { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
  .section-head--split > :last-child { padding-bottom: 0.35rem; }
}
.section-head h2 { max-width: 20ch; }
.section-head .lead { max-width: 48ch; }

.split { display: grid; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--reverse > :first-child { order: 2; }
}
.grid { display: grid; gap: var(--gap); }

/* ---------- Smooth-Scroll-Wrapper ---------- */
#smooth-wrapper { position: relative; }
#smooth-content { will-change: transform; }

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 900; height: var(--header-h);
  display: flex; align-items: center; color: #fff;
  transition: transform 0.45s var(--ease-out), background-color 0.35s, box-shadow 0.35s, color 0.35s;
}
.site-header__inner {
  width: 100%; max-width: 1600px; margin-inline: auto; padding-inline: var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}
.site-header__logo { display: flex; align-items: center; position: relative; z-index: 2; }
.site-header__logo img { height: clamp(40px, 4.5vw, 50px); width: auto; }
.site-header__logo .logo--light { display: none; }
.site-header.is-solid, .site-header.is-light {
  background: rgba(255,255,255,0.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  color: var(--c-text); box-shadow: 0 1px 0 rgba(18,19,21,0.06);
}
.site-header.is-solid .logo--dark, .site-header.is-light .logo--dark { display: none; }
.site-header.is-solid .logo--light, .site-header.is-light .logo--light { display: block; }
.site-header.is-hidden { transform: translateY(-100%); }
.site-header.is-menu-open { transform: none; background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; color: #fff; }
.site-header.is-menu-open .logo--light { display: none; }
.site-header.is-menu-open .logo--dark { display: block; }

.site-nav { display: none; }
.site-nav ul { display: flex; gap: clamp(1.25rem, 2.4vw, 2.5rem); list-style: none; }
.site-nav a { position: relative; font-size: 0.95rem; font-weight: 500; padding: 0.4rem 0; opacity: 0.85; transition: opacity 0.25s; }
.site-nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; background: currentColor;
  transform: scaleX(0); transform-origin: right; transition: transform 0.4s var(--ease-out);
}
.site-nav a:hover, .site-nav a.is-active { opacity: 1; }
.site-nav a:hover::after, .site-nav a.is-active::after { transform: scaleX(1); transform-origin: left; }

.site-header__actions { display: flex; align-items: center; gap: 0.5rem; position: relative; z-index: 2; }
.site-header__phone { font-size: 0.95rem; font-weight: 500; display: none; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; opacity: 0.9; }
.site-header__phone:hover { opacity: 1; }
.site-header__phone svg { width: 1rem; height: 1rem; }
.site-header__cta { display: none; }
.site-header .lang-switch { display: inline-flex; }
@media (min-width: 1100px) {
  .site-nav { display: block; }
  .site-header__phone { display: inline-flex; }
  .site-header__cta { display: inline-flex; }
}
@media (min-width: 700px) and (max-width: 1099px) { .site-header__phone { display: inline-flex; } }

/* Burger */
.burger { width: 44px; height: 44px; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.burger span { display: block; width: 22px; height: 1.5px; background: currentColor; transition: transform 0.4s var(--ease-out), opacity 0.3s, width 0.3s; }
.burger:hover span:nth-child(2) { width: 14px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
@media (min-width: 1100px) { .burger { display: none; } }

/* ---------- Vollbild-Menü ---------- */
.menu {
  position: fixed; inset: 0; z-index: 850; background: var(--c-ink); color: var(--c-text-inverse);
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--header-h) + 1rem) var(--gutter) 2rem;
  visibility: hidden; pointer-events: none; clip-path: inset(0 0 100% 0); overflow-y: auto;
}
.menu.is-open { visibility: visible; pointer-events: auto; }
.menu__list { list-style: none; display: grid; gap: 0.35rem; }
.menu__list a { display: inline-block; font-size: clamp(2rem, 7vw, 3.5rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; transition: opacity 0.3s; will-change: transform; }
.menu__list a:hover { opacity: 0.6; }
.menu__list a.is-active { color: rgba(255,255,255,0.5); }
.menu__meta { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--c-line-dark); display: grid; gap: 1rem; font-size: var(--fs-sm); color: rgba(245,245,243,0.8); }
@media (min-width: 600px) { .menu__meta { grid-template-columns: 1fr 1fr 1fr; } }
.menu__meta strong { display: block; font-size: var(--fs-xs); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(245,245,243,0.5); margin-bottom: 0.3rem; font-weight: 600; }

/* ---------- Footer: flach, kompakt (Freight-Stil) ---------- */
.site-footer { background: var(--c-ink); color: var(--c-text-inverse); padding-block: clamp(2.5rem, 5vw, 4rem) 1.25rem; }
.site-footer__top { display: grid; gap: 2rem; padding-bottom: clamp(2rem, 4vw, 3rem); }
@media (min-width: 900px) { .site-footer__top { grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 0.8fr)); gap: 2rem 3rem; } }
.site-footer__logo img { width: 130px; }
.site-footer__claim { margin-top: 1rem; color: rgba(245,245,243,0.55); max-width: 30ch; font-size: var(--fs-sm); }
.site-footer__cta { margin-top: 1.25rem; }
.site-footer h4 { font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(245,245,243,0.4); margin-bottom: 0.9rem; font-weight: 500; }
.site-footer ul { list-style: none; display: grid; gap: 0.45rem; font-size: var(--fs-sm); }
.site-footer__nav a, .site-footer__contact a, .site-footer__contact li { color: rgba(245,245,243,0.8); }
.site-footer__k { display: inline-block; min-width: 4.8rem; font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(245,245,243,0.45); }
.menu__meta-k { margin-top: 0.7rem; }
.site-footer__nav a, .site-footer__contact a { position: relative; display: inline-block; transition: color 0.25s; }
.site-footer__nav a::after, .site-footer__contact a::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 0.35s var(--ease-out); }
.site-footer__nav a:hover, .site-footer__contact a:hover { color: #fff; }
.site-footer__nav a:hover::after, .site-footer__contact a:hover::after { transform: scaleX(1); transform-origin: left; }
.site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.6rem 1.5rem; padding-top: 1.1rem; border-top: 1px solid var(--c-line-dark); font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.04em; color: rgba(245,245,243,0.4); }
.site-footer__bottom ul { display: flex; flex-wrap: wrap; gap: 1rem; list-style: none; }
.site-footer__bottom a:hover { color: #fff; }
.to-top { display: inline-flex; align-items: center; gap: 0.4rem; color: rgba(245,245,243,0.6); transition: color 0.25s; }
.to-top .icon { width: 0.9rem; height: 0.9rem; transition: transform 0.35s var(--ease-out); }
.to-top:hover { color: #fff; }
.to-top:hover .icon { transform: translateY(-3px); }

/* ---------- Social-Links ---------- */
.social, .site-footer ul.social, .menu__meta ul.social { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.social a { width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 1px solid var(--c-line); display: grid; place-items: center; color: var(--c-steel); transition: background 0.3s, color 0.3s, border-color 0.3s, transform 0.3s var(--ease-out); }
.social a .icon { width: 1rem; height: 1rem; }
.social a:hover { background: var(--c-ink); color: #fff; border-color: var(--c-ink); transform: translateY(-2px); }
.social--light a { border-color: var(--c-line-dark); color: rgba(245,245,243,0.75); }
.social--light a:hover { background: #fff; color: var(--c-ink); border-color: #fff; }
.menu__meta .social { margin-top: 0.5rem; }