/* AM Dienstleistungen — shared custom styles (loaded on every page). */

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}

/* Display serif headlines (Fraunces) — a touch of brand elegance on the corporate grid */
.font-display-lg, .font-display-lg-mobile, .font-headline-md { font-optical-sizing: auto; }

/* Level-1 tonal card: white surface, warm hairline border (no heavy shadow) */
.tonal-layer-1 { background-color: #FFFFFF; border: 1px solid #E7E0D3; }

/* Accent anchor bar (was .cyan-anchor) — now brushed gold */
.gold-anchor, .cyan-anchor {
  width: 44px; height: 4px; border-radius: 2px;
  background-image: linear-gradient(90deg, #A07C2C 0%, #E3C67E 55%, #C6A24E 100%);
  margin-bottom: 16px;
}

/* Diagonal hero mask kept from the template */
.hero-split-mask { clip-path: polygon(0 0, 100% 0, 95% 100%, 0% 100%); }
[dir="rtl"] .hero-split-mask { clip-path: polygon(5% 0, 100% 0, 100% 100%, 0% 100%); }

/* Gold gradient utility for primary CTAs / highlights */
.bg-gold-gradient { background-image: linear-gradient(120deg, #A07C2C 0%, #E3C67E 55%, #C6A24E 100%); }
.text-gradient-gold {
  background-image: linear-gradient(120deg, #A07C2C 0%, #E3C67E 55%, #C6A24E 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- Language switcher ---------- */
.lang-switch { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 9999px; background: rgba(26,26,26,0.05); border: 1px solid #E7E0D3; }
.lang-switch button { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; padding: 5px 9px; border-radius: 9999px; color: #6E675C; background: transparent; cursor: pointer; border: none; line-height: 1; transition: background .2s, color .2s; }
.lang-switch button:hover { color: #1A1A1A; }
.lang-switch button.active { background: linear-gradient(120deg, #A07C2C, #E3C67E); color: #1A1A1A; }
/* switcher on dark backgrounds (footer / dark headers) */
.lang-switch.on-dark { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.18); }
.lang-switch.on-dark button { color: #CDBF9F; }
.lang-switch.on-dark button:hover { color: #fff; }
.lang-switch.on-dark button.active { color: #1A1A1A; }

/* ---------- Mobile menu ---------- */
.mobile-menu { display: none; }
.mobile-menu.open { display: block; }

/* ---------- Scroll reveal (progressive enhancement) ---------- */
.reveal { opacity: 1; }
html.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
html.js .reveal.in { opacity: 1; transform: none; }
html.js .reveal.d1 { transition-delay: .08s; } html.js .reveal.d2 { transition-delay: .16s; } html.js .reveal.d3 { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) { html.js .reveal { opacity: 1 !important; transform: none !important; } }

/* ---------- Arabic / RTL ---------- */
[lang="ar"], [dir="rtl"] { }
[dir="rtl"] body, [dir="rtl"] .font-body-md, [dir="rtl"] .font-body-lg, [dir="rtl"] .font-headline-sm, [dir="rtl"] .font-button { font-family: 'Cairo', 'Inter', sans-serif; }
[dir="rtl"] .font-display-lg, [dir="rtl"] .font-display-lg-mobile, [dir="rtl"] .font-headline-md { font-family: 'Cairo', 'Fraunces', serif; font-weight: 700; }
[dir="rtl"] .font-label-caps { font-family: 'Cairo', 'JetBrains Mono', monospace; letter-spacing: 0; }
/* keep Latin brand data (emails, phone, HRB, logo) un-mirrored & LTR */
.ltr, [dir="rtl"] .ltr { direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] .text-left { text-align: right; }
[dir="rtl"] .md\:text-left { text-align: right; }
/* the phone input in the contact form must stay LTR */
[dir="rtl"] input[type="tel"], [dir="rtl"] .iti { direction: ltr; text-align: left; }

/* Focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid #C6A24E; outline-offset: 2px;
}

/* Site logo sizing */
.site-logo { height: 40px; width: auto; display: block; }
.footer-logo { height: 52px; width: auto; display: block; }