/* ==========================================================================
   layout-navigation.css
   Overlay-Stylesheet für checklistehauskauf.de – lädt ZUSÄTZLICH zu
   css/style1.css (Basis-Stylesheet wird nicht verändert, nur überlagert).
   Migration 2026 – neues Design-System, alte Akzentfarbe (#6190ca) behalten.
   ========================================================================== */

:root{
  --accent: #6190ca;
  --accent-dark: #406189;
  --text: #2b2b2b;
  --text-soft: #5a5a5a;
  --bg: #f4f6f8;
  --card-bg: #ffffff;
  --border: #dfe4ea;
  --radius: 10px;
  --font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Systemschrift statt altem Serifen-Stack, restlicher Textfluss bleibt */
body{
  font-family: var(--font-system) !important;
  color: var(--text);
  background: var(--bg);
}

/* ---------- Skip-Link (Barrierefreiheit) ---------- */
.skip-link{
  position:absolute; left:-999px; top:auto;
  background: var(--accent); color:#fff; padding:10px 16px;
  z-index: 10000; border-radius: 0 0 6px 0; text-decoration:none; font-weight:600;
}
.skip-link:focus{ left:0; top:0; }

/* ---------- Grundgerüst ---------- */
#ln-wrapper{ max-width:1180px; margin:0 auto; padding:0 16px; }
#ln-header{
  background:#fff; border-bottom:3px solid var(--accent);
  padding:14px 0;
}
#ln-header .ln-header-inner{
  max-width:1180px; margin:0 auto; padding:0 16px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
#ln-header .ln-brand{ display:flex; align-items:center; gap:12px; text-decoration:none; min-width:0; overflow:hidden; flex:1 1 auto; }
#ln-header .ln-brand img{ height:44px; width:auto; display:block; flex:none; }
#ln-header .ln-brand-text{ min-width:0; overflow:hidden; }
#ln-header .ln-brand-text strong{ display:block; color: var(--text); font-size:1.15em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#ln-header .ln-brand-text span{ display:block; color: var(--text-soft); font-size:0.8em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.ln-search-link{
  color: var(--accent-dark); text-decoration:none; font-size:0.9em; font-weight:600;
  border:1px solid var(--border); border-radius:6px; padding:8px 14px;
  flex:none; white-space:nowrap;
}
.ln-search-link:hover{ border-color: var(--accent); color: var(--accent); }

/* Burger (mobil) */
#ln-burger{
  display:none; background:none; border:2px solid var(--accent); border-radius:6px;
  width:44px; height:40px; cursor:pointer; position:relative;
  flex:none;
}
#ln-burger span, #ln-burger::before, #ln-burger::after{
  content:""; position:absolute; left:9px; right:9px; height:2px; background:var(--accent);
}
#ln-burger span{ top:19px; }
#ln-burger::before{ top:12px; }
#ln-burger::after{ top:26px; }
#ln-burger[aria-expanded="true"]{ background:var(--accent); }
#ln-burger[aria-expanded="true"] span,
#ln-burger[aria-expanded="true"]::before,
#ln-burger[aria-expanded="true"]::after{ background:#fff; }

/* ---------- Breadcrumbs als Pills ---------- */
.ln-breadcrumbs{
  display:flex; flex-wrap:wrap; gap:6px; align-items:center;
  margin: 14px 0 0 0; font-size:0.85em;
}
.ln-breadcrumbs a, .ln-breadcrumbs span{
  background:#fff; border:1px solid var(--border); color: var(--text-soft);
  padding:4px 12px; border-radius:999px; text-decoration:none;
}
.ln-breadcrumbs a:hover{ border-color: var(--accent); color: var(--accent-dark); }
.ln-breadcrumbs .ln-crumb-current{ background: var(--accent); color:#fff; border-color:var(--accent); }

/* ---------- Layout: Sidebar + Content ---------- */
#ln-body{ display:flex; gap:28px; align-items:flex-start; margin:24px 0 48px; }
#ln-sidebar{
  flex: 0 0 250px; position: sticky; top: 16px;
  background:#fff; border:1px solid var(--border); border-radius: var(--radius);
  padding:18px; max-height: calc(100vh - 32px); overflow-y:auto;
}
#ln-sidebar h2{ font-size:0.8em; text-transform:uppercase; letter-spacing:.05em; color:var(--text-soft); margin:0 0 10px; }
#ln-sidebar ul{ list-style:none; margin:0; padding:0; }
#ln-sidebar li{ margin:0; }
#ln-sidebar a{
  display:block; padding:8px 10px; border-radius:6px; color:var(--text); text-decoration:none; font-size:0.95em;
}
#ln-sidebar a:hover{ background: var(--bg); color: var(--accent-dark); }
#ln-sidebar a[aria-current="page"]{ background: var(--accent); color:#fff; font-weight:600; }

#ln-content{ flex:1 1 auto; min-width:0; background:#fff; border:1px solid var(--border); border-radius: var(--radius); padding: 28px 32px; }
#ln-content h1{ margin-top:0; color: var(--text); }
#ln-content a{ color: var(--accent-dark); }
#ln-content a:hover{ color: var(--accent); }

/* ---------- Karten-Look für Bilder ---------- */
/* Spezifitätsfalle: alte Templates haben ID-Regeln wie "#contents img", die
   jede einfachere Klassenregel schlagen. Deshalb hier ebenfalls über die
   Content-ID + !important arbeiten. */
#ln-content .ln-img-card img,
#ln-content img.ln-img-card{
  border:1px solid var(--border) !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
  max-width:100% !important;
  height:auto !important;
}

/* ---------- Autoren-Box (E-E-A-T) ---------- */
.ln-autor-box{
  display:flex; gap:16px; align-items:center;
  margin: 28px 0; padding:16px; background: var(--bg);
  border:1px solid var(--border); border-radius: var(--radius);
}
.ln-autor-box img{
  width:64px; height:64px; border-radius:50%; object-fit:cover; flex:none;
  border:2px solid #fff; box-shadow:0 0 0 1px var(--border);
}
.ln-autor-box .ln-autor-text{ font-size:0.92em; color: var(--text-soft); }
.ln-autor-box .ln-autor-text strong{ color: var(--text); }
.ln-autor-box a{ color: var(--accent-dark); font-weight:600; text-decoration:none; }
.ln-autor-box a:hover{ text-decoration:underline; }

/* ---------- "Das könnte Sie auch interessieren" ---------- */
.ln-related{
  margin-top:36px; padding-top:24px; border-top:1px solid var(--border);
}
.ln-related h2{ font-size:1.05em; margin:0 0 14px; }
.ln-related ul{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; }
.ln-related li{ margin:0; }
.ln-related a{
  display:block; padding:14px 16px; background: var(--bg); border:1px solid var(--border);
  border-radius:8px; text-decoration:none; color:var(--text); font-size:0.92em; font-weight:600;
}
.ln-related a:hover{ border-color:var(--accent); color:var(--accent-dark); }

/* ---------- Footer ---------- */
#ln-footer{
  background:#fff; border-top:1px solid var(--border); padding:22px 0; margin-top:32px;
}
#ln-footer .ln-footer-inner{ max-width:1180px; margin:0 auto; padding:0 16px; font-size:0.85em; color:var(--text-soft); display:flex; flex-wrap:wrap; gap:6px 18px; justify-content:space-between; }
#ln-footer a{ color: var(--text-soft); text-decoration:none; }
#ln-footer a:hover{ color: var(--accent-dark); text-decoration:underline; }

/* ---------- Cookie-Consent-Banner ---------- */
#ln-cookie-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:9999;
  background:#1f2a37; color:#fff; padding:16px; display:none;
  box-shadow: 0 -2px 12px rgba(0,0,0,.25);
}
#ln-cookie-banner.ln-visible{ display:block; }
#ln-cookie-banner .ln-cookie-inner{
  max-width:1180px; margin:0 auto; display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between;
}
#ln-cookie-banner p{ margin:0; font-size:0.88em; max-width:70ch; }
#ln-cookie-banner a{ color:#bcd6f5; }
#ln-cookie-banner .ln-cookie-actions{ display:flex; gap:10px; flex-wrap:wrap; }
#ln-cookie-banner button{
  border:none; border-radius:6px; padding:9px 16px; font-size:0.88em; cursor:pointer; font-weight:600;
}
#ln-cookie-banner .ln-cookie-accept{ background: var(--accent); color:#fff; }
#ln-cookie-banner .ln-cookie-decline{ background:transparent; color:#fff; border:1px solid #5a6a7a !important; }

/* ---------- Mobile (Breakpoint ~900px) ---------- */
@media (max-width: 900px){
  #ln-burger{ display:block; }
  #ln-header .ln-brand-text span{ display:none; }

  /* Header mit Burger-Button bleibt beim Scrollen oben fixiert */
  #ln-header{
    position:sticky; top:0; z-index:500;
    box-shadow:0 2px 8px rgba(20,30,45,.08);
  }

  #ln-body{ flex-direction:column; }
  #ln-sidebar{
    position:static; max-height:none; width:100%; flex-basis:auto;
    display:none;
  }
  /* Geöffnetes Menü bleibt (wie der Header) beim Scrollen sichtbar, statt an seiner
     ursprünglichen Position im Dokumentfluss zu verschwinden, wenn man vorher schon
     nach unten gescrollt hatte. */
  #ln-sidebar.ln-open{
    display:block; position:sticky; top:71px; z-index:400;
    max-height:calc(100vh - 71px); overflow-y:auto;
    background:#fff; box-shadow:0 8px 16px rgba(20,30,45,.14);
  }
  #ln-content{ padding:20px; }
  .ln-autor-box{ flex-direction:column; align-items:flex-start; text-align:left; }
}

/* Suche */

.ln-search-form{ display:flex; gap:8px; margin-bottom:8px; flex-wrap:wrap; }
.ln-search-form input[type=search]{ flex:1 1 280px; padding:10px 12px; border:1px solid var(--border); border-radius:6px; font-size:1em; }
.ln-search-form button{ background:var(--accent); color:#fff; border:none; border-radius:6px; padding:10px 18px; cursor:pointer; font-weight:600; }
.ln-search-form button:hover{ background:var(--accent-dark); }
#ln-search-status{ color:var(--text-soft); font-size:0.9em; }
.ln-search-results{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.ln-search-results li{ padding:14px 16px; background:var(--bg); border:1px solid var(--border); border-radius:8px; }
.ln-search-results a{ font-weight:600; }
.ln-search-results p{ margin:6px 0 0; color:var(--text-soft); font-size:0.9em; }

/* Kleiner Hinweis-/Haftungsausschluss-Kasten innerhalb von Seiteninhalten */
.ln-note{
  background:var(--bg); border:1px solid var(--border); border-left:4px solid var(--accent);
  border-radius:6px; padding:12px 16px; font-size:0.92em; color:var(--text-soft); margin:18px 0;
}
.ln-note strong{ color:var(--text); }

/* ---------- Startseite: Hero / Vertrauens-Leiste / Weg-zum-Eigenheim ---------- */
.ln-hero{ background:#fff; border-bottom:1px solid var(--border); }
.ln-hero-inner{ max-width:1180px; margin:0 auto; padding:52px 16px 44px; display:flex; gap:48px; align-items:center; }
.ln-hero-copy{ flex:1 1 auto; min-width:0; }
.ln-hero-kicker{ font-size:12px; font-weight:700; letter-spacing:.12em; color:var(--accent-dark); margin-bottom:14px; }
.ln-hero-h1{ margin:0 0 16px; font-size:36px; line-height:1.18; font-weight:800; color:var(--text); letter-spacing:-.01em; }
.ln-hero-lead{ margin:0 0 22px; font-size:16.5px; line-height:1.6; color:var(--text-soft); max-width:480px; }
.ln-hero-actions{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.ln-btn-outline{ border:1.5px solid var(--text); color:var(--text); font-weight:700; font-size:14.5px; padding:12px 24px; border-radius:8px; text-decoration:none; display:inline-block; }
.ln-btn-outline:hover{ background:var(--text); color:#fff; }
.ln-hero-link{ font-weight:700; font-size:14.5px; color:var(--accent-dark); text-decoration:underline; text-underline-offset:3px; }

.ln-hero-media{ flex:0 0 380px; position:relative; }
.ln-hero-photo{ border-radius:18px; overflow:hidden; box-shadow:0 20px 40px -18px rgba(20,30,45,.28); transform:rotate(1.1deg); }
.ln-hero-photo img{ display:block; width:100%; height:270px; object-fit:cover; }
.ln-hero-badge{ position:absolute; left:-16px; bottom:-16px; background:#fff; border:1px solid var(--border); border-radius:12px; padding:10px 14px; display:flex; align-items:center; gap:10px; box-shadow:0 10px 22px -12px rgba(20,30,45,.25); max-width:220px; }
.ln-hero-badge img{ width:36px; height:36px; border-radius:50%; object-fit:cover; flex:none; }
.ln-hero-badge strong{ display:block; font-size:12.5px; color:var(--text); }
.ln-hero-badge span{ display:block; font-size:11px; color:var(--text-soft); }

.ln-trust{ background:var(--bg); border-bottom:1px solid var(--border); }
.ln-trust-inner{ max-width:1180px; margin:0 auto; padding:20px 16px; display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.ln-trust-photo{ width:48px; height:48px; border-radius:50%; object-fit:cover; flex:none; }
.ln-trust-text{ flex:1 1 260px; font-size:13.5px; color:var(--text-soft); line-height:1.5; }
.ln-trust-text strong{ display:block; color:var(--text); font-size:14px; margin-bottom:2px; }
.ln-trust-stats{ display:flex; gap:26px; flex:none; }
.ln-trust-stats div{ text-align:center; }
.ln-trust-stats strong{ display:block; font-size:19px; font-weight:800; color:var(--text); }
.ln-trust-stats span{ font-size:10.5px; color:var(--text-soft); }

.ln-journey{ background:#fff; border-bottom:1px solid var(--border); }
.ln-journey-inner{ max-width:1180px; margin:0 auto; padding:40px 16px 36px; }
.ln-journey-h2{ margin:0 0 6px; font-size:20px; font-weight:800; text-align:center; color:var(--text); }
.ln-journey-sub{ margin:0 0 28px; font-size:13px; color:var(--text-soft); text-align:center; }
.ln-journey-steps{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px; }
.ln-journey-step{ display:flex; flex-direction:column; align-items:center; gap:10px; text-decoration:none; padding:16px 10px; border-radius:12px; color:inherit; }
.ln-journey-step:hover{ background:var(--bg); }
.ln-journey-icon{ width:44px; height:44px; border-radius:50%; border:1.5px solid var(--accent); color:var(--accent); display:flex; align-items:center; justify-content:center; flex:none; }
.ln-journey-title{ font-size:13.5px; font-weight:700; color:var(--text); }
.ln-journey-desc{ font-size:12px; color:var(--text-soft); text-align:center; line-height:1.4; }

@media (max-width:900px){
  .ln-hero-inner{ flex-direction:column; padding-top:40px; }
  .ln-hero-media{ flex:none; width:100%; max-width:380px; }
  .ln-hero-copy{ text-align:left; }
  .ln-journey-steps{ grid-template-columns:1fr 1fr; }
}
@media (max-width:520px){
  .ln-hero-h1{ font-size:28px; }
  .ln-trust-inner{ flex-direction:column; align-items:flex-start; }
  .ln-journey-steps{ grid-template-columns:1fr; }
}