/* ==========================================================
   Rechtsanwälte Dr. Edrich, Lemberger, Kesch – user.css
   Template: Cassiopeia (Joomla 6.2) + SP Page Builder Pro 6
   Ablage: System › Site Template Styles › Cassiopeia › Template bearbeiten
           › media/templates/site/cassiopeia/css/user.css (neue Datei anlegen)
   Cassiopeia lädt user.css automatisch und update-sicher.
   Kopf- und Fußzeile kommen aus SP Page Builder (Zeilen „Kopfzeile“/„Fußzeile“).
   Klassen (lk-…) sind in SPPB unter „Erweitert › CSS-Klasse“ vergeben.
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,500;8..60,600&family=Source+Sans+3:wght@400;600;700&display=swap');
/* DSGVO: Schriften besser lokal hosten (z. B. media/templates/site/cassiopeia/fonts/ + @font-face) und den @import oben entfernen. */

:root {
  --lk-navy: #17263d;
  --lk-navy-dark: #0f1a2b;
  --lk-accent: #e0a33a;
  --lk-text: #1c2430;
  --lk-muted: #4a5462;
  --lk-label: #5a6472;
  --lk-line: #e3e6ea;
  --lk-bg-soft: #f4f5f7;
  --lk-radius: 6px;

  /* Cassiopeia-Variablen auf die Kanzleifarben setzen */
  --cassiopeia-color-primary: var(--lk-navy);
  --cassiopeia-color-link: var(--lk-navy);
  --cassiopeia-color-hover: var(--lk-navy-dark);
  --link-color: var(--lk-navy);
  --link-hover-color: var(--lk-navy-dark);
  --body-bg: #fff;
  --body-color: var(--lk-text);
  --body-font-family: 'Source Sans 3', system-ui, sans-serif;
}

/* ---------- Cassiopeia-Rahmen neutralisieren ---------- */
/* Template-Style: Layout = „Fluid“, Brand = „Nein“, keine Module in menu/search/banner/footer */
.container-header,
.container-footer { display: none; }
.site-grid { grid-gap: 0 !important; column-gap: 0 !important; }
.site-grid > .container-component,
.container-component { padding: 0; margin: 0; }
.container-component > main,
main { margin: 0; padding: 0; }
.container-component .alert,
#system-message-container { max-width: 1200px; margin: 16px auto; }

body, .site { font-family: 'Source Sans 3', system-ui, sans-serif; color: var(--lk-text); font-size: 18px; line-height: 1.6; background: #fff; }
h1, h2, h3, .sppb-addon-title { font-family: 'Source Serif 4', Georgia, serif; font-weight: 600; color: var(--lk-navy); }
a { color: var(--lk-navy); }
a:hover { color: var(--lk-navy-dark); }
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 96px; } /* Anker nicht unter der fixierten Kopfzeile verstecken */

/* ---------- Kopfzeile (SPPB-Zeile lk-header) ---------- */
.lk-header { background: #fff; border-bottom: 1px solid var(--lk-line); position: sticky; top: 0; z-index: 100; }
.lk-brand { display: flex; flex-direction: column; line-height: 1.15; text-decoration: none; }
.lk-brand-top { font-size: 12px; letter-spacing: .22em; font-weight: 700; text-transform: uppercase; color: var(--lk-label); }
.lk-brand-name { font-family: 'Source Serif 4', Georgia, serif; font-size: 24px; font-weight: 600; color: var(--lk-navy); }
.lk-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px 28px; font-size: 17px; font-weight: 600; }
.lk-nav a { text-decoration: none; padding: 10px 0; color: var(--lk-navy); }
.lk-nav a:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-color: var(--lk-accent); }
.lk-nav a.lk-header-phone { padding: 10px 20px; border-radius: 4px; background: var(--lk-accent); color: var(--lk-navy); text-decoration: none; }
.lk-nav-block p, .lk-brand-block p { margin: 0; }

/* ---------- Allgemeine Bausteine ---------- */
.lk-eyebrow { font-size: 14px; letter-spacing: .2em; font-weight: 700; text-transform: uppercase; color: var(--lk-label); margin: 0; }
.lk-section-title .sppb-addon-title { font-size: 40px; line-height: 1.2; margin-bottom: 16px; }
.lk-lead { color: var(--lk-muted); }
.lk-soft { background: var(--lk-bg-soft); }

/* SPPB 6 setzt die CSS-Klasse des Button-Addons direkt auf das <a class="sppb-btn …"> */
.sppb-btn.lk-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 14px 28px !important; border-radius: 4px !important; font-size: 18px !important; font-weight: 700; line-height: 1.2; text-decoration: none !important; border: 1px solid transparent; transition: background-color .15s, border-color .15s, color .15s; }
.sppb-btn.lk-btn-accent { background: var(--lk-accent) !important; color: var(--lk-navy) !important; border-color: var(--lk-accent); }
.sppb-btn.lk-btn-accent:hover,
.sppb-btn.lk-btn-accent:focus-visible { background: #cf922a !important; border-color: #cf922a; color: var(--lk-navy) !important; }
.sppb-btn.lk-btn-ghost { background: transparent !important; color: #fff !important; border: 1px solid #8a97ab !important; }
.sppb-btn.lk-btn-ghost:hover,
.sppb-btn.lk-btn-ghost:focus-visible { border-color: #fff !important; background: rgba(255,255,255,.08) !important; color: #fff !important; }
.sppb-btn.lk-btn:focus-visible { outline: 3px solid var(--lk-accent); outline-offset: 3px; }
.sppb-addon-wrapper:has(.lk-btn-inline) { display: inline-block; vertical-align: top; margin: 8px 12px 0 0; }

/* Bild-Addons: Container volle Breite */
.lk-hero-image .sppb-addon-single-image-container,
.lk-portrait .sppb-addon-single-image-container { display: block; width: 100%; }

/* ---------- Hero ---------- */
.lk-hero { background: var(--lk-navy); color: #fff; }
.lk-hero .lk-eyebrow { color: var(--lk-accent); }
.lk-hero h1, .lk-hero .sppb-addon-title { color: #fff; font-size: 60px; line-height: 1.08; margin: 12px 0 24px; }
.lk-hero p { color: #d5dbe4; font-size: 21px; }
.lk-hero .sppb-addon-wrapper:has(.lk-btn-inline) { margin-top: 24px; }
.lk-hero-image img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--lk-radius); display: block; }

/* ---------- Leitsätze ---------- */
.lk-value { background: #fff; border-radius: var(--lk-radius); padding: 32px 28px; height: 100%; }
.lk-value h3 { font-size: 28px; margin: 0 0 10px; }
.lk-value p { color: var(--lk-muted); font-size: 17px; margin: 0; }

/* ---------- Ablauf ---------- */
.lk-steps ol { list-style: none; counter-reset: lk; margin: 0; padding: 0; }
.lk-steps li { counter-increment: lk; display: flex; gap: 24px; padding: 24px 0; border-bottom: 1px solid var(--lk-line); }
.lk-steps li:last-child { border-bottom: 0; }
.lk-steps li::before { content: counter(lk); flex: 0 0 48px; height: 48px; border-radius: 50%; background: var(--lk-accent); color: var(--lk-navy); font-weight: 700; font-size: 20px; display: flex; align-items: center; justify-content: center; }

.lk-cost { background: var(--lk-navy); color: #fff; border-radius: var(--lk-radius); padding: 28px 32px; margin-top: 12px; }
.lk-cost .lk-cost-label { color: var(--lk-accent); font-size: 15px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; margin: 0 0 8px; }
.lk-cost p { color: #fff; margin: 0; }

/* ---------- Team ---------- */
.lk-portrait img { width: 100%; height: 320px; object-fit: cover; display: block; border-radius: var(--lk-radius) var(--lk-radius) 0 0; background: #dfe3e9; }
.lk-person { background: #fff; border-radius: 0 0 var(--lk-radius) var(--lk-radius); padding: 24px 28px 32px; }
.lk-person h3 { font-size: 26px; margin: 0 0 4px; }
.lk-person p { color: var(--lk-muted); margin: 0; }

/* ---------- Kontakt ---------- */
.lk-contact address { font-style: normal; margin-bottom: 16px; }
.lk-hours { border: 1px solid var(--lk-line); border-radius: var(--lk-radius); padding: 24px; color: var(--lk-muted); }
.lk-map { min-height: 280px; border-radius: var(--lk-radius); background: #dfe3e9; display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px; color: var(--lk-label); }
.lk-map iframe { width: 100%; min-height: 280px; border: 0; border-radius: var(--lk-radius); }

/* ---------- Fußzeile (SPPB-Zeile lk-footer) ---------- */
.lk-footer { background: var(--lk-navy-dark); color: #c3cbd6; font-size: 15px; }
.lk-footer p { margin: 0; color: #c3cbd6; }
.lk-footer-nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 24px; }
.lk-footer a { color: #e6eaf0; }
.lk-footer a:hover { color: #fff; }

/* ---------- Mobil ---------- */
@media (max-width: 991px) {
  .lk-nav { justify-content: flex-start; gap: 0 20px; margin-top: 8px; }
  .lk-header { position: static; }
  .lk-hero h1, .lk-hero .sppb-addon-title { font-size: 44px; }
  .lk-section-title .sppb-addon-title { font-size: 32px; }
  .lk-footer-nav { justify-content: flex-start; margin-top: 8px; }
  .lk-hero { padding-top: 64px !important; padding-bottom: 72px !important; }
  .lk-hero-image { margin-top: 40px; }
}
@media (max-width: 575px) {
  body, .site { font-size: 17px; }
  .lk-hero { padding-top: 40px !important; padding-bottom: 56px !important; }
  .lk-hero h1, .lk-hero .sppb-addon-title { font-size: 36px; }
  .lk-hero p { font-size: 19px; }
  .lk-brand-name { font-size: 21px; }
  .lk-nav { gap: 0 16px; font-size: 16px; }
  .lk-nav a { padding: 8px 0; }
  .lk-nav a.lk-header-phone { padding: 8px 16px; margin-top: 4px; }
  .sppb-addon-wrapper:has(.lk-btn-inline) { display: block; margin-right: 0; }
  .sppb-btn.lk-btn { width: 100%; }
  .lk-section-title .sppb-addon-title { font-size: 30px; }
}