/*
Theme Name: I.A.M.M. Theme
Theme URI: https://iamm-berlin.de
Author: I.A.M.M.
Description: Custom Elementor-kompatibles Theme fuer I.A.M.M. - International Account Management Melaouhi UG. Design: Dunkelblau (#10233C) + Gold (#AB8A44).
Version: 1.0
Text Domain: iamm-theme
*/

/* ==========================================================================
   I.A.M.M. – International Account Management Melaouhi UG
   Zentrales Stylesheet
   ========================================================================== */

:root {
  --color-dark-blue: #10233C;
  --color-dark-blue-light: #1C3A5C;
  --color-dark-blue-lighter: #2A5480;
  --color-gold: #AB8A44;
  --color-gold-light: #CBB27A;
  --color-gold-dark: #8A6D34;
  --color-white: #ffffff;
  --color-off-white: #f7f5f2;
  --color-light-gray: #eceef0;
  --color-text: #2b2f33;
  --color-text-muted: #5c6570;
  --color-border: #dfe3e7;
  --shadow-sm: 0 2px 8px rgba(16, 35, 60, 0.10);
  --shadow-md: 0 6px 24px rgba(16, 35, 60, 0.14);
  --shadow-lg: 0 12px 40px rgba(16, 35, 60, 0.20);
  --radius: 10px;
  --max-width: 1180px;
  --font-main: "Inter", "Segoe UI", "Roboto", -apple-system, BlinkMacSystemFont, sans-serif;
  --transition: 0.25s ease;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, p, ul, ol, figure { margin: 0; padding: 0; }
img { max-width: 100%; display: block; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }

/* a{color:inherit} oben gilt global, auch fuer Links MITTEN im Fliesstext
   (FAQ-Einleitung, Leistungsseiten, Kartenhinweis, Cookie-Banner-Text zu
   Datenschutz/Impressum) - dort sind sie dadurch farblich nicht vom
   umgebenden Text zu unterscheiden und ohne genaues Hinsehen/Hover nicht
   als Link erkennbar (WCAG 1.4.1, Benutzung von Farbe). Navigation, Buttons
   und Kartenlinks (.card-link) haben eigene Farb-/Stilregeln und bleiben
   davon unberuehrt - :not() schliesst sie aus, damit z.B. Nav-Hover nicht
   zusaetzlich unterstrichen wird. */
main p a:not(.btn):not(.card-link),
main li a:not(.btn):not(.card-link),
.cc-text a,
.karte-text a {
  text-decoration: underline;
  text-underline-offset: 2px;
}
button { font: inherit; cursor: pointer; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-main);
  color: var(--color-text);
  background: var(--color-off-white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

img, .logo { user-select: none; }

/* ---- Typography ---- */
h1, h2, h3, h4 {
  font-weight: 700;
  color: var(--color-dark-blue);
  line-height: 1.25;
  /* Einzelne lange, unteilbare Woerter (z.B. "Datenschutzerklärung" als
     ganze Ueberschrift, ein zusammenhaengendes deutsches Kompositum ohne
     Leerzeichen/Bindestrich) liefen bei grosser Ueberschrift-Schriftgroesse
     auf schmalen Handys ueber den Seitenrand hinaus. */
  overflow-wrap: break-word;
}

h1 { font-size: clamp(2rem, 4vw, 3rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); }
h3 { font-size: 1.35rem; }

.eyebrow {
  display: inline-block;
  color: var(--color-gold-dark);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.8rem;
  margin-bottom: 10px;
}

.section-intro {
  max-width: 720px;
  margin: 0 auto 48px;
  text-align: center;
}

.section-intro p {
  color: var(--color-text-muted);
  font-size: 1.05rem;
  margin-top: 12px;
}

.text-muted { color: var(--color-text-muted); }

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.98rem;
  border: 2px solid transparent;
  transition: all var(--transition);
  white-space: nowrap;
}

.btn-primary {
  background: var(--color-gold);
  color: var(--color-dark-blue);
}
.btn-primary:hover {
  background: var(--color-gold-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-secondary {
  background: transparent;
  color: var(--color-white);
  border-color: rgba(255,255,255,0.5);
}
.btn-secondary:hover {
  background: rgba(255,255,255,0.12);
  border-color: var(--color-white);
}

.btn-outline {
  background: transparent;
  color: var(--color-dark-blue);
  border-color: var(--color-dark-blue);
}
.btn-outline:hover {
  background: var(--color-dark-blue);
  color: var(--color-white);
}

.btn-block { width: 100%; }

/* Hintergrund darf nicht mitscrollen, waehrend das mobile Menue offen ist
   (sonst verschwindet das Menue optisch aus dem Blick, wenn man versucht,
   in den ueberlaufenden Sprachoptionen zu scrollen - siehe .nav-menu weiter
   unten). Klasse wird per JS auf <html> gesetzt/entfernt.

   Fruehere Fix-Versuche (fuer die Nachwelt, falls das Problem wiederkommt):
   1) Nur ein einfaches "overflow:hidden auf html/body" reichte auf iOS
      WebKit nicht zum Scroll-Sperren per Touch-Wisch-Geste.
   2) Body zusaetzlich per JS auf position:fixed mit negativem top zu
      setzen (der ueblicherweise empfohlene iOS-Scroll-Lock-Fix) loeste das,
      riss aber ein neues Problem auf: .site-header (position:sticky) ist
      ein normales Kind von body und wanderte als Teil des verschobenen
      body-Inhalts um den vorherigen Scrollbetrag aus dem Bildschirm.
   3) Den Header waehrend .iamm-nav-open zusaetzlich separat auf
      position:fixed zu pinnen behob das im Desktop-Chrome-Test, zeigte
      sich auf echtem iPhone/Chrome-iOS aber weiterhin fehlerhaft.
   4) overflow:hidden auf body ENTFERNT (keine position:fixed-Logik mehr
      irgendwo) und Scroll-Sperre nur noch per touchmove-preventDefault()
      in script.js - dabei per lokalem Test aufgefallen: ein einfaches
      "overflow:hidden auf html/body" bricht CSS position:sticky komplett
      (bekannte CSS-Falle - jeder Vorfahre mit overflow != visible
      verhindert, dass ein sticky-Nachfahre sich am echten Viewport
      orientiert; ohne echten Scroll-Container "friert" die sticky-Position
      stattdessen bei ihrem Wert zum Zeitpunkt des Umschaltens ein bzw.
      wandert einfach mit dem Dokument mit). Erklaert rueckblickend
      vermutlich den urspruenglichen Bug ueberhaupt erst.
   Jetziger Ansatz: html/body bekommen ueberhaupt kein overflow/position
   mehr gesetzt - .site-header bleibt komplett unangetastet in seinem
   normalen position:sticky-Verhalten, das der Browser nativ zuverlaessig
   gegen die echte Bildschirmkante haelt. Das Sperren des Hintergrund-
   Scrollens passiert ausschliesslich in JS (script.js,
   scrollSperreVerhindern) per preventDefault() auf touchmove UND wheel,
   mit Ausnahme fuer Ereignisse innerhalb von .nav-menu selbst (das ueber
   sein eigenes overflow-y:auto + overscroll-behavior:contain weiterhin
   intern scrollbar bleibt). */

/* ---- Header / Navigation ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--color-white);
  box-shadow: var(--shadow-sm);
}

.nav-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
}

/* ---- RTL (Arabisch) --------------------------------------------------
   Kopfzeile: Das Logo bleibt in JEDER Sprache links (Markenanker), daher
   hier direction:ltr fuer die aeussere Zeile (Logo | Menue-Block).
   Der Menue-Block (.nav-menu) bekommt seine echte Schreibrichtung zurueck:
   Menuepunkte laufen von rechts nach links ("Start" ganz rechts, wie der
   Seiteninhalt darunter beginnt), Text ist rechtsbuendig, Flagge steht vor
   dem Sprachnamen. Abstaende/Trennlinien im Menue nutzen logische
   Eigenschaften (margin-inline-start usw.) und drehen sich damit mit. --- */
html[dir="rtl"] .nav-wrapper {
  direction: ltr;
}

html[dir="rtl"] .nav-menu {
  direction: rtl;
}

/* Honeypot-Feld des Kontaktformulars: im Seiteninhalt per Inline-Style mit
   left:-9999px versteckt. In RTL-Seiten (Arabisch) ist "links ausserhalb"
   scrollbar - die Seite wurde dadurch ~11.000px breit (horizontale
   Scrollleiste, auf dem Handy zoomt der Browser heraus und das ganze
   Layout wirkt verrutscht). Hier richtungsunabhaengig ueberschrieben
   (!important noetig, weil der Inline-Style sonst gewinnt). */
#contact-form div[aria-hidden="true"] {
  position: absolute !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

/* Telefonnummern bestehen aus fuer BIDI neutralen Zeichen (Ziffern, Leerzeichen,
   "+") - ohne explizite Richtung dreht der Unicode-Bidi-Algorithmus ihre
   Reihenfolge im arabischen (RTL) Fliesstext um, z.B. "+49 30 98574180" wird
   zu "98574180 30 49+". direction:ltr + unicode-bidi:isolate haelt sie
   unabhaengig von der Seitenrichtung in der richtigen Leserichtung. */
a[href^="tel:"] {
  direction: ltr;
  unicode-bidi: isolate;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 800;
  font-size: 1.3rem;
  color: var(--color-dark-blue);
}

.brand-logo {
  height: 72px;
  width: auto;
  flex-shrink: 0;
}

.brand-text .brand-sub {
  display: block;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
  text-transform: uppercase;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 6px;
}

.nav-menu a {
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-text);
  transition: all var(--transition);
  white-space: nowrap;
}

.nav-menu a:hover,
.nav-menu a.active {
  background: var(--color-dark-blue);
  color: var(--color-white);
}

.nav-cta {
  margin-inline-start: 8px;
}

/* .nav-menu a (Zeile ~252) und .btn-primary setzen beide eine Textfarbe fuer
   diesen Button; .nav-menu a gewinnt durch hoehere Spezifitaet (Klasse+Element
   vs. nur Klasse) und ueberschreibt das eigentlich schon korrekte Dunkelblau
   mit dem globalen Fliesstext-Grau (#2b2f33) - auf dem Gold-Hintergrund nur
   ca. 4,14:1 Kontrast, unter der WCAG-Mindestanforderung von 4,5:1. Gezielt
   nur fuer diesen Button zurueck auf Dunkelblau (~4,86:1). */
.nav-menu a.nav-cta {
  color: var(--color-dark-blue);
}

/* Beim Hover setzt .nav-menu a:hover (Zeile ~289) den Hintergrund auf
   Dunkelblau, aber die obige .nav-cta-Regel hat dieselbe Spezifitaet
   (2 Klassen + 1 Element) und steht im Quelltext danach - sie gewinnt
   deshalb auch im Hover-Zustand und haelt die Schrift auf Dunkelblau,
   obwohl der Hintergrund jetzt ebenfalls dunkelblau ist: Text komplett
   unsichtbar (1:1-Kontrast). Eigene, hoeher spezifische Hover-Regel noetig
   (3 Klassen + 1 Element schlaegt beide obigen Regeln). Gold-Light statt
   Weiss, damit der CTA sich optisch weiter vom Rest der Navigation abhebt;
   Kontrast auf Dunkelblau liegt deutlich ueber der WCAG-Mindestanforderung. */
.nav-menu a.nav-cta:hover {
  color: var(--color-gold-light);
}

.lang-switch {
  position: relative;
  margin-inline-start: 14px;
  padding-inline-start: 14px;
  border-inline-start: 1px solid var(--color-border);
}

.lang-switch-current {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  list-style: none;
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-dark-blue);
  user-select: none;
}
.lang-switch-current::-webkit-details-marker { display: none; }
.lang-switch-current:hover { background: var(--color-light-gray); }

.lang-flag { font-size: 1.05rem; line-height: 1; }
.lang-caret { transition: transform var(--transition); flex-shrink: 0; }
.lang-switch[open] .lang-caret { transform: rotate(180deg); }

.lang-switch-menu {
  position: absolute;
  top: calc(100% + 6px);
  inset-inline-end: 0;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  box-shadow: var(--shadow-md);
  padding: 6px;
  min-width: 170px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lang-switch-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-text);
  padding: 8px 10px;
  border-radius: 6px;
  transition: all var(--transition);
}

.lang-switch-item:hover {
  background: var(--color-light-gray);
}

.lang-switch-item.is-active {
  color: var(--color-dark-blue);
  background: rgba(171, 138, 68, 0.15);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 8px;
}

.nav-toggle span {
  width: 26px;
  height: 3px;
  background: var(--color-dark-blue);
  border-radius: 2px;
  transition: all var(--transition);
}

.nav-toggle.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ---- Hero ---- */
.hero {
  background: linear-gradient(135deg, var(--color-dark-blue) 0%, var(--color-dark-blue-light) 55%, var(--color-dark-blue-lighter) 100%);
  color: var(--color-white);
  padding: 96px 0 110px;
  position: relative;
  overflow: hidden;
}

.hero::after {
  content: "";
  position: absolute;
  right: -120px;
  top: -120px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(171,138,68,0.24) 0%, rgba(171,138,68,0) 70%);
}

.hero-inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
  position: relative;
  z-index: 1;
}

.hero-tagline {
  color: var(--color-white);
  font-size: clamp(1.9rem, 4vw, 3.1rem);
  margin: 14px 0 20px;
}

.hero-lead {
  font-size: 1.1rem;
  color: rgba(255,255,255,0.85);
  max-width: 540px;
  margin-bottom: 32px;
}

.hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.hero-visual {
  display: flex;
  justify-content: center;
}

.hero-card {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--radius);
  padding: 28px;
  backdrop-filter: blur(6px);
  width: 100%;
  max-width: 380px;
}

.hero-stat {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,0.15);
}
.hero-stat:last-child { border-bottom: none; }

.hero-stat strong {
  font-size: 1.6rem;
  color: var(--color-gold);
}

.hero-stat span {
  color: rgba(255,255,255,0.75);
  font-size: 0.92rem;
}

/* ---- Sections ---- */
section {
  padding: 88px 0;
}

.section-alt {
  background: var(--color-white);
}

/* ---- Service Cards ---- */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.service-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 34px 28px;
  transition: all var(--transition);
}

.service-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-gold);
}

.service-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--color-dark-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.service-icon svg { width: 28px; height: 28px; stroke: var(--color-gold); }

.service-card h3 { margin-bottom: 10px; }
.service-card p { color: var(--color-text-muted); margin-bottom: 16px; }

.service-card ul { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }

.service-card ul li {
  /* inline-start statt left, s. .benefit-list weiter oben - derselbe
     Bidi-Sonderfall: Punkt muss auch im Arabischen vor dem Text stehen. */
  padding-inline-start: 22px;
  position: relative;
  font-size: 0.94rem;
  color: var(--color-text);
}

.service-card ul li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-gold);
}

.card-link {
  font-weight: 700;
  color: var(--color-dark-blue);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.card-link:hover { color: var(--color-gold-dark); }

/* ---- Trust / Testimonial ---- */
.trust-strip {
  background: var(--color-light-gray);
  border-radius: var(--radius);
  padding: 40px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 28px;
  align-items: center;
}

.trust-quote-mark {
  font-size: 4rem;
  font-family: Georgia, serif;
  color: var(--color-gold);
  line-height: 1;
}

.trust-strip blockquote {
  font-size: 1.15rem;
  color: var(--color-dark-blue);
  font-weight: 600;
  margin-bottom: 8px;
}

.trust-strip cite {
  font-style: normal;
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

.badges-row {
  display: flex;
  gap: 32px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 40px;
}

.badge-item {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-text-muted);
  font-weight: 600;
  font-size: 0.9rem;
}

.badge-item svg { width: 22px; height: 22px; stroke: var(--color-gold-dark); }

/* ---- CTA Band ---- */
.cta-band {
  background: linear-gradient(120deg, var(--color-dark-blue), var(--color-dark-blue-lighter));
  color: var(--color-white);
  border-radius: var(--radius);
  padding: 56px 40px;
  text-align: center;
}

.cta-band h2 { color: var(--color-white); margin-bottom: 12px; }
.cta-band p { color: rgba(255,255,255,0.82); margin-bottom: 28px; }
.cta-band .btn-row { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ---- About page ---- */
.about-hero {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 56px;
  align-items: center;
}

.founder-portrait {
  background: linear-gradient(160deg, var(--color-dark-blue), var(--color-dark-blue-lighter));
  border-radius: var(--radius);
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gold);
  position: relative;
  overflow: hidden;
}

.founder-portrait .initials {
  font-size: 5.5rem;
  font-weight: 800;
  color: rgba(255,255,255,0.92);
}

.founder-portrait .ring {
  position: absolute;
  inset: 18px;
  border: 2px solid rgba(196,165,123,0.5);
  border-radius: 8px;
}

.founder-meta {
  display: flex;
  gap: 24px;
  margin-top: 24px;
  flex-wrap: wrap;
}

.founder-meta div strong {
  display: block;
  font-size: 1.5rem;
  color: var(--color-dark-blue);
}

.founder-meta div span {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.value-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}

.value-item {
  padding: 28px;
  background: var(--color-white);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
}

.value-item .num {
  font-size: 0.85rem;
  color: var(--color-gold-dark);
  font-weight: 800;
  margin-bottom: 10px;
}

.mission-vision {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}

.mv-card {
  background: var(--color-dark-blue);
  color: var(--color-white);
  padding: 34px;
  border-radius: var(--radius);
}
.mv-card h3 { color: var(--color-gold); margin-bottom: 12px; }
.mv-card p { color: rgba(255,255,255,0.85); }

/* ---- Leistungen page ---- */
.service-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
  padding: 56px 0;
  border-bottom: 1px solid var(--color-border);
}

.service-detail:last-of-type { border-bottom: none; }

.service-detail.reverse .service-detail-media { order: 2; }
.service-detail.reverse .service-detail-text { order: 1; }

.service-detail-media {
  background: var(--color-light-gray);
  border-radius: var(--radius);
  padding: 36px;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
}

.mini-step {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--color-white);
  padding: 14px 18px;
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
}

.mini-step .step-num {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--color-dark-blue);
  color: var(--color-gold);
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.85rem;
}

.service-detail-text .service-icon { margin-bottom: 18px; }

.benefit-list {
  display: grid;
  gap: 10px;
  margin: 20px 0 24px;
}

.benefit-list li {
  /* Logische Eigenschaften (inline-start statt left): Haekchen sitzt so
     immer vor dem Text in Lauf-/Leserichtung - auch im Arabischen (RTL),
     wo es sonst links haengen bliebe, waehrend der Text nach rechts
     rueckt und das Haekchen faelschlich hinter statt vor dem Text steht. */
  padding-inline-start: 26px;
  position: relative;
  color: var(--color-text);
}

.benefit-list li::before {
  content: "\2713";
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  color: var(--color-gold-dark);
  font-weight: 800;
}

/* ---- FAQ ---- */
.faq-list { display: flex; flex-direction: column; gap: 12px; }

.faq-item {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  overflow: hidden;
}

.faq-question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  background: none;
  border: none;
  text-align: left;
  font-weight: 700;
  color: var(--color-dark-blue);
  font-size: 1.02rem;
}

.faq-question .plus {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--color-gold);
  color: var(--color-gold-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  transition: transform var(--transition);
}

.faq-item.open .faq-question .plus { transform: rotate(45deg); }

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition);
  padding: 0 24px;
}

.faq-item.open .faq-answer {
  max-height: 320px;
  padding: 0 24px 22px;
}

.faq-answer p { color: var(--color-text-muted); }

/* ---- Kontakt page ---- */
.contact-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: start;
}

.contact-form {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 36px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.form-group { margin-bottom: 20px; }

.form-group label {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 8px;
  color: var(--color-dark-blue);
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 13px 16px;
  border: 1.5px solid var(--color-border);
  border-radius: 8px;
  font: inherit;
  color: var(--color-text);
  background: var(--color-off-white);
  transition: border-color var(--transition), background var(--transition);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--color-gold);
  background: var(--color-white);
}

.form-group textarea { resize: vertical; min-height: 130px; }

.form-error {
  display: none;
  color: #c0392b;
  font-size: 0.82rem;
  margin-top: 6px;
}

.form-group.invalid input,
.form-group.invalid select,
.form-group.invalid textarea {
  border-color: #c0392b;
}

.form-group.invalid .form-error { display: block; }

.form-status {
  display: none;
  margin-top: 18px;
  padding: 16px 18px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.95rem;
}

.form-status.success {
  display: block;
  background: #e6f4ea;
  color: #1e7a3d;
  border: 1px solid #b7e0c3;
}

.form-status.error {
  display: block;
  background: #fdecea;
  color: #c0392b;
  border: 1px solid #f3c1bc;
}

.contact-info-card {
  background: var(--color-dark-blue);
  color: var(--color-white);
  border-radius: var(--radius);
  padding: 32px;
  margin-bottom: 24px;
}

.contact-info-card h3 { color: var(--color-gold); margin-bottom: 20px; }

.contact-info-row {
  display: flex;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,0.15);
}
.contact-info-row:last-child { border-bottom: none; }

.contact-info-row svg {
  width: 22px;
  height: 22px;
  stroke: var(--color-gold);
  flex-shrink: 0;
  margin-top: 2px;
}

.contact-info-row strong { display: block; font-size: 0.85rem; color: rgba(255,255,255,0.65); font-weight: 600; }
.contact-info-row span, .contact-info-row a { color: var(--color-white); font-weight: 600; }

.hours-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 28px 32px;
}

.hours-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px dashed var(--color-border);
  font-size: 0.95rem;
}
.hours-row:last-child { border-bottom: none; }
/* "end" statt "right": .hours-row hat keine erzwungene direction, die
   Flexbox dreht unter dir="rtl" also von selbst um - der Werte-Wert
   landet dann links statt rechts. "right" waere dort falsch (haengt am
   inneren statt am aeusseren Rand); "end" folgt automatisch der jeweils
   aktuellen Position. */
.hours-row span:last-child { text-align: end; }

.map-embed {
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: 24px;
  border: 1px solid var(--color-border);
}

.map-embed iframe { width: 100%; height: 280px; border: 0; display: block; }

/* ---- Legal pages ---- */
.legal-content h2 { margin: 36px 0 14px; }
.legal-content h2:first-child { margin-top: 0; }
.legal-content p, .legal-content li { color: var(--color-text-muted); margin-bottom: 12px; }
.legal-content ul { padding-left: 22px; list-style: disc; }
.legal-content a { color: var(--color-dark-blue-lighter); font-weight: 600; text-decoration: underline; }
/* Lange, bindestrichlose Gesetzes-Links wie "www.gesetze-im-internet.de/rdg"
   sowie lange deutsche Komposita ("Rechtsdienstleistungsgesetzes") haben
   keine natuerliche Umbruchstelle und liefen auf schmalen Handys ueber den
   Seitenrand hinaus (Impressum/Datenschutzerklaerung). Nur hier, nicht
   global, damit sonst nichts unnoetig mitten im Wort umbricht. */
.legal-content { overflow-wrap: break-word; }
.legal-content a { word-break: break-word; }
.legal-box {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 40px;
  max-width: 820px;
  margin: 0 auto;
}

/* ---- Page header (sub-pages) ---- */
.page-header {
  background: linear-gradient(135deg, var(--color-dark-blue), var(--color-dark-blue-lighter));
  color: var(--color-white);
  padding: 64px 0 56px;
  text-align: center;
}

.page-header h1 { color: var(--color-white); }
.page-header p { color: rgba(255,255,255,0.8); margin-top: 12px; max-width: 600px; margin-left: auto; margin-right: auto; }

.breadcrumb {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.65);
  margin-bottom: 14px;
}
.breadcrumb a { color: var(--color-gold); }

/* ---- Footer ---- */
.site-footer {
  background: #142c3f;
  color: rgba(255,255,255,0.75);
  padding: 64px 0 24px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--color-white);
  font-weight: 800;
  font-size: 1.15rem;
  margin-bottom: 14px;
}


.footer-col h3 {
  color: var(--color-white);
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col a:hover { color: var(--color-gold); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 24px;
  font-size: 0.85rem;
}

.footer-bottom a { color: rgba(255,255,255,0.6); }
.footer-bottom a:hover { color: var(--color-gold); }

/* ---- Responsive ---- */
/* ---- Hamburger-Menue ab 1200px statt erst ab 960px ---------------------
   Die Kopfzeile braucht Platz fuer Logo + 6 Menuepunkte + Termin-Button +
   Sprachwahl. Bei 1024px (Tablet quer) wurde das Logo auf wenige Pixel
   zusammengedrueckt, im Spanischen (lange Beschriftungen wie "Preguntas
   frecuentes") lief die Zeile sogar ueber den Bildschirm hinaus. Die
   Umschaltschwelle liegt daher fuer alle Sprachen bei 1200px. --------- */
@media (max-width: 1200px) {
  /* ---- Menü hier statt erst bei 760px umschalten -----------------------
     Vorher lag diese Schwelle bei 760px, das Layout drumherum aber schon
     bei 960px - dazwischen (z.B. Tablet quer) quetschten sich alle
     Menüpunkte nebeneinander in eine Zeile und die Beschriftungen brachen
     mitten im Wort um ("Über / uns", "Häufige / Fragen"). ----------------- */
  .nav-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-white);
    flex-direction: column;
    align-items: stretch;
    padding: 12px 24px 20px;
    box-shadow: var(--shadow-md);
    display: none;
    gap: 4px;
    /* Ohne Hoehenbegrenzung ragte das aufgeklappte Menü (v.a. mit
       geoeffneter Sprachauswahl darunter) unten aus dem Bildschirm -
       Arabisch/Spanisch waren dann gar nicht erreichbar, auch nicht per
       Scroll: die Seite dahinter scrollte, nicht das Menü selbst.
       --iamm-header-h wird per JS (script.js) auf die tatsaechliche
       Kopfzeilenhoehe gesetzt; 96px ist nur der Notfall-Wert, bevor JS
       geladen hat. 100dvh statt 100vh: auf Handys zaehlt das die
       einblendbare Adressleiste nicht mit, sonst waere der Wert je nach
       Scroll-Zustand des Browsers falsch. */
    max-height: calc(100dvh - var(--iamm-header-h, 96px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .nav-menu.open { display: flex; }
  /* display:block noetig: als inline-Link wirkt das Innenpolster nicht auf die
     Zeilenhoehe - die aktive Markierung ueberlappte den Nachbarpunkt und die
     Menuepunkte lagen eng aufeinander. */
  .nav-menu a { padding: 14px 16px; font-size: 1rem; }
  .nav-menu a:not(.nav-cta) { display: block; }
  .nav-cta { margin-inline-start: 0; margin-top: 8px; }
  .lang-switch {
    margin-inline-start: 0;
    padding-inline-start: 0;
    border-inline-start: none;
    margin-top: 12px;
  }
  .lang-switch-current { justify-content: center; padding: 10px 8px; }
  /* Sprachauswahl ist im aufgeklappten Mobilmenue der letzte Eintrag ganz
     unten. Oeffnet sie wie am Desktop nach UNTEN auf, liegt die Liste direkt
     an/unter der unteren Kante des Menues (bzw. dessen scrollbarem Bereich)
     - man muss im Menue erst nach unten scrollen, um die Sprachen ueberhaupt
     zu sehen, und uebersieht sie leicht. Auf Mobile stattdessen NACH OBEN
     aufklappen (bottom statt top), dann liegt sie ueber den bereits
     sichtbaren Menuepunkten darueber - kein Scrollen noetig, um sie zu
     entdecken oder zu bedienen. */
  .lang-switch-menu {
    left: 0;
    right: 0;
    top: auto;
    bottom: calc(100% + 6px);
    padding: 8px;
    gap: 6px;
  }
  .lang-switch-item { padding: 14px 12px; font-size: 0.95rem; }
  .nav-toggle { display: flex; }
}

@media (max-width: 960px) {
  .hero-inner,
  .about-hero,
  .contact-grid,
  .mission-vision,
  .service-detail {
    grid-template-columns: 1fr;
  }
  .service-detail.reverse .service-detail-media,
  .service-detail.reverse .service-detail-text { order: initial; }
  .cards-grid,
  .value-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  /* Ueberschrift/Text zuerst, Kennzahlen-Karte danach - vorher stand die
     Karte per order:-1 ueber der Headline, dadurch sah man auf dem Handy
     erst "Erfahrung/Ansprechpartner/Sitz" statt den eigentlichen Titel. */
  .hero-stat,
  .hours-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

}

@media (max-width: 760px) {
  .trust-strip { grid-template-columns: 1fr; text-align: center; }
  .trust-quote-mark { margin: 0 auto; }
  .badges-row { gap: 20px; }
  .form-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }
  section { padding: 56px 0; }
  /* Lange Button-Beschriftungen (v.a. Englisch: "Have your documents
     reviewed, no obligation") liefen mit white-space:nowrap auf schmalen
     Handys ueber den Bildschirmrand hinaus und erzeugten horizontales
     Scrollen auf der ganzen Seite. Auf schmalen Screens darf der Text
     umbrechen; max-width haelt den Button selbst innerhalb seines
     Containers, auch wenn dieser (z.B. .hero-actions) als Flex-Reihe
     angelegt ist. */
  .btn { white-space: normal; max-width: 100%; text-align: center; }
}

/* ---- Print ---- */
@media print {
  .site-header, .nav-toggle, .hero-actions, .cta-band, .site-footer, .contact-form, .map-embed { display: none !important; }
  body { background: #fff; color: #000; }
  a { text-decoration: underline; }
  section { padding: 20px 0; }
}

/* ---- WordPress nav-menu current-page state (wp_nav_menu core class) ---- */
.nav-menu li.current-menu-item > a,
.nav-menu li.current_page_item > a {
  background: var(--color-dark-blue);
  color: var(--color-white);
}

/* ---- Elementor content-area reset (avoid theme/Elementor double spacing) ---- */
.elementor-widget-html { margin: 0; }

/* ---- WP nav-menu <ul> structural wrapper -> collapse into flex flow ---- */
ul.nav-links { display: contents; }

/* ---- WP-Adminbar ueberlappt sonst den sticky Header (schlecht lesbar wenn eingeloggt) ----
   Nur am Desktop - auf Mobile/iOS-Safari sorgte der Versatz dafuer, dass der
   Header beim Scrollen an der falschen Stelle "klebt" statt sauber ganz oben
   zu bleiben (Admin-Leiste verhaelt sich dort anders). Betrifft nur
   eingeloggte Admins, keine echten Besucher - deshalb auf Mobile bewusst
   der einfachere, zuverlaessige Weg: immer ganz oben. */
body.admin-bar .site-header { top: 32px; top: var(--wp-admin--admin-bar--height, 32px); }
@media (max-width: 760px) {
  body.admin-bar .site-header { top: 0; }
}

/* ---- Service-Detail Bilder ---- */
.service-detail-media img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 18px;
}

/* ---- Berlin-Banner (Standort-Bild) ---- */
.berlin-banner {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
}

.berlin-banner img {
  width: 100%;
  height: auto;
  display: block;
}

.berlin-banner-caption {
  position: absolute;
  inset: auto 0 0 0;
  background: linear-gradient(to top, rgba(16,35,60,0.9) 0%, rgba(16,35,60,0.4) 60%, transparent 100%);
  color: var(--color-white);
  padding: 32px;
}

.berlin-banner-caption .eyebrow { color: var(--color-gold-dark); margin-bottom: 4px; }
.berlin-banner-caption h3 { color: var(--color-white); margin: 0; }

@media (max-width: 760px) {
  .berlin-banner-caption { padding: 20px; }
}

/* ---- Wartungsmodus / Coming-Soon-Seite ---- */
.maintenance-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--color-dark-blue) 0%, var(--color-dark-blue-light) 55%, var(--color-dark-blue-lighter) 100%);
  color: var(--color-white);
  text-align: center;
  padding: 40px 24px;
}

.maintenance-inner {
  max-width: 560px;
}

.maintenance-logo {
  height: 96px;
  width: auto;
  margin: 0 auto 36px;
}

.maintenance-inner h1 {
  color: var(--color-white);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  margin-bottom: 16px;
}

.maintenance-inner p {
  color: rgba(255,255,255,0.82);
  font-size: 1.1rem;
  margin-bottom: 28px;
}

.maintenance-contact {
  display: flex;
  gap: 24px;
  justify-content: center;
  flex-wrap: wrap;
  font-weight: 600;
}

.maintenance-contact a {
  color: var(--color-gold);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.maintenance-contact a:hover {
  border-color: var(--color-gold);
}

/* ==========================================================================
   Elementor-Bausteine im I.A.M.M.-Design
   (Seiten bestehen aus einzelnen Elementor-Widgets statt aus HTML-Bloecken.
    Diese Regeln sorgen dafuer, dass das Layout unveraendert bleibt.)
   ========================================================================== */

/* Elementor-Standardabstaende neutralisieren - Abstaende kommen vom Theme */
.elementor-widget-wrap { padding: 0; }
.elementor-section.elementor-section-boxed > .elementor-container { max-width: none; }

/* Innere Sections erben sonst die 88px Sektions-Polsterung des Themes */
.elementor-inner-section { padding: 0; }

/* Kartenraster: Spaltenabstand wie .cards-grid (28px) */
.cards-row > .elementor-container { gap: 28px; }
.cards-row .elementor-column > .elementor-element-populated { height: 100%; }

/* Hinweiskasten (Abgrenzung Steuerberatung / RDG, Seminarhinweis) */
.notice-box {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  /* inline-start statt left: der goldene Akzentrand soll auf der
     Startseite der Leserichtung sitzen, also im Arabischen rechts. */
  border-inline-start: 4px solid var(--color-gold);
  border-radius: var(--radius);
  padding: 24px 28px;
  margin: 32px 0 0;
}
.notice-box h3 { margin-bottom: 8px; font-size: 1.1rem; }
.notice-box p { color: var(--color-text-muted); }

/* Platzhalter, die vor dem Livegang gefuellt werden muessen */
.platzhalter {
  background: #fff3bf;
  border-bottom: 1px dashed #b58900;
  padding: 0 4px;
  font-weight: 600;
  color: #6b5200;
}

/* Google-Maps-Einwilligung (Karte laedt erst nach Klick) */
.map-consent {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  padding: 28px 24px;
  text-align: center;
}
.map-consent p { color: var(--color-text-muted); margin-bottom: 12px; font-size: 0.92rem; }
.map-consent p strong { color: var(--color-dark-blue); }

/* Aufklappbereiche (Elementor Toggle/Accordion) im Stil der FAQ-Liste */
.elementor-widget-toggle .elementor-toggle,
.elementor-widget-accordion .elementor-accordion {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.elementor-widget-toggle .elementor-toggle-item,
.elementor-widget-accordion .elementor-accordion-item {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  overflow: hidden;
}
.elementor-widget-toggle .elementor-tab-title,
.elementor-widget-accordion .elementor-tab-title {
  padding: 20px 24px;
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--color-dark-blue);
  border: none;
  background: none;
}
.elementor-widget-toggle .elementor-tab-title.elementor-active,
.elementor-widget-accordion .elementor-tab-title.elementor-active {
  border-bottom: 1px solid var(--color-border);
}
.elementor-widget-toggle .elementor-tab-title .elementor-toggle-icon,
.elementor-widget-accordion .elementor-tab-title .elementor-accordion-icon,
.elementor-widget-toggle .elementor-tab-title .elementor-toggle-icon i,
.elementor-widget-accordion .elementor-tab-title .elementor-accordion-icon i {
  color: var(--color-gold-dark);
}

/* Titelfarbe: Elementor faerbt Toggle-/Accordion-Titel sonst in seiner Akzentfarbe */
.elementor-widget-toggle .elementor-toggle-title,
.elementor-widget-accordion .elementor-accordion-title,
.elementor-widget-toggle .elementor-tab-title a,
.elementor-widget-accordion .elementor-tab-title a {
  color: var(--color-dark-blue);
}
.elementor-widget-toggle .elementor-tab-title:hover .elementor-toggle-title,
.elementor-widget-accordion .elementor-tab-title:hover .elementor-accordion-title {
  color: var(--color-gold-dark);
}
.elementor-widget-toggle .elementor-tab-content,
.elementor-widget-accordion .elementor-tab-content {
  padding: 22px 24px 24px;
  border: none;
  color: var(--color-text-muted);
}
.elementor-tab-content h3 { margin: 22px 0 8px; font-size: 1.15rem; }
.elementor-tab-content h3:first-child { margin-top: 0; }
.elementor-tab-content p { margin-bottom: 12px; }
.elementor-tab-content ol { padding-inline-start: 20px; list-style: decimal; display: grid; gap: 8px; margin: 12px 0; }
.elementor-tab-content ol li { color: var(--color-text-muted); }

/* Text-Widgets: Listen und Ueberschriften wie im uebrigen Theme */
.elementor-widget-text-editor .benefit-list { list-style: none; padding-left: 0; }
.elementor-widget-text-editor ol { padding-inline-start: 20px; list-style: decimal; display: grid; gap: 8px; margin: 12px 0; }
.elementor-widget-text-editor h2 { margin-bottom: 14px; }
.elementor-widget-text-editor p { margin-bottom: 12px; }

/* Servicekarten als eigenstaendige Widgets (Kartenraster ueber Elementor-Spalten) */
.elementor-element.service-card { display: block; }
.service-card ol, .service-card ul { list-style: none; }

/* Elementor-Ueberschriften-Widget: Standardfarbe des Elementor-Kits
   (helles Blau, rgb(110,193,228), WCAG-Kontrastfehler auf hellem Grund,
   in allen Sprachen betroffen). !important noetig: Elementor erzeugt pro
   Seite eine eigene CSS-Datei (z.B. post-7.css) mit demselben Selektor
   und derselben Spezifitaet - je nach Ladereihenfolge gewinnt sonst mal
   die eine, mal die andere Regel. */
.elementor-widget-heading .elementor-heading-title {
  color: var(--color-dark-blue) !important;
}

/* ---- Kontaktseite auf schmalen Handys (alle Sprachen) -----------------
   1) Grid-Kinder duerfen schrumpfen (min-width:0) - sonst dehnt der
      breiteste Inhalt die einzige Spalte ueber den Bildschirm hinaus.
   2) Das Google-reCAPTCHA-Kaestchen ist fest 304px breit und ragte aus der
      Formularkarte heraus; auf kleinen Bildschirmen wird es verkleinert
      und die Karte etwas enger gepolstert. */
.contact-grid > * { min-width: 0; }

@media (max-width: 480px) {
  .contact-form { padding: 28px 20px; }
  #iamm-recaptcha-wrap .g-recaptcha,
  #iamm-recaptcha-wrap > div { transform: scale(0.85); transform-origin: 0 0; }
  html[dir="rtl"] #iamm-recaptcha-wrap .g-recaptcha,
  html[dir="rtl"] #iamm-recaptcha-wrap > div { transform-origin: 100% 0; }
}
@media (max-width: 360px) {
  #iamm-recaptcha-wrap .g-recaptcha,
  #iamm-recaptcha-wrap > div { transform: scale(0.72); }
}

/* ---- Spanisch: laengere Menuebeschriftungen ("Preguntas frecuentes",
   "Sobre nosotros") liessen zwischen Logo und Menue nur ~11px Luft. Menue
   fuer Spanisch etwas kompakter (Polster/Schrift), damit der Abstand zum
   Logo wie in den anderen Sprachen bleibt. Nur oberhalb der Hamburger-
   Schwelle relevant. ------------------------------------------------- */
@media (min-width: 1201px) {
  html[lang^="es"] .nav-menu { gap: 2px; }
  html[lang^="es"] .nav-menu a { padding: 9px 10px; font-size: 0.88rem; }
  html[lang^="es"] .nav-menu a.nav-cta { padding: 11px 18px; }
  html[lang^="es"] .nav-cta { margin-inline-start: 4px; }
  html[lang^="es"] .lang-switch { margin-inline-start: 8px; padding-inline-start: 8px; }
}