/* ============================================================
   JIMDO „EIGENES LAYOUT" – CSS  (Bausachverständigenbüro SKR)
   Einfügen in: Design ▸ Eigenes Layout ▸ Reiter CSS
   Passt zum HTML aus Jimdo_EigenesLayout.html. Farbwelt: Navy + Gold.
============================================================ */
:root{
  --navy:#0f2742; --navy2:#16395f; --gold:#c8a14a; --gold2:#e0c074;
  --ink:#1d2733; --muted:#5d6b7a; --line:#e4e8ee; --soft:#f5f7fa;
}
*{box-sizing:border-box}
body{margin:0;font-family:'Segoe UI',system-ui,-apple-system,Arial,sans-serif;color:var(--ink);line-height:1.6;background:#fff}
img{max-width:100%;height:auto}
a{color:var(--navy)}

#skr-topbar{background:var(--navy);color:#cdd7e3;font-size:13px;text-align:center;padding:7px 12px}
#skr-topbar a{color:#fff;text-decoration:none;font-weight:600}

#container{max-width:1180px;margin:0 auto}

/* Header + Navigation */
#skr-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 22px;flex-wrap:wrap}
#skr-logo{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--navy);font-weight:800;font-size:18px}
#skr-logo .mark{width:42px;height:42px;border-radius:9px;background:linear-gradient(135deg,var(--navy),var(--navy2));color:var(--gold2);display:flex;align-items:center;justify-content:center;font-weight:800}
#skr-logo small{display:block;font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
#skr-nav{flex:1}
#skr-nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:18px;margin:0;padding:0;justify-content:center}
#skr-nav a{text-decoration:none;color:var(--ink);font-weight:600;font-size:15px}
#skr-nav a:hover{color:var(--gold)}
#skr-cta{background:linear-gradient(135deg,var(--gold),var(--gold2));color:#21314a;text-decoration:none;font-weight:700;padding:11px 18px;border-radius:9px;white-space:nowrap}

/* Hero */
#skr-hero{background:linear-gradient(120deg,var(--navy),var(--navy2) 60%,#1c456f);color:#fff;padding:60px 22px}
#skr-hero .hero-inner{max-width:760px}
#skr-hero .eyebrow{color:var(--gold2);font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:12px;margin:0 0 8px}
#skr-hero h1{color:#fff;font-size:clamp(26px,4vw,42px);margin:0 0 14px;line-height:1.18}
#skr-hero .sub{color:#d4deea;font-size:18px;margin:0 0 22px}
.btn-gold{display:inline-block;background:linear-gradient(135deg,var(--gold),var(--gold2));color:#21314a;text-decoration:none;font-weight:700;padding:13px 24px;border-radius:10px}
.btn-ghost{display:inline-block;border:1.5px solid rgba(255,255,255,.55);color:#fff;text-decoration:none;font-weight:700;padding:12px 22px;border-radius:10px;margin-left:8px}

/* Trust-Leiste */
#skr-trust{display:flex;flex-wrap:wrap;justify-content:space-around;gap:14px;background:var(--soft);border-bottom:1px solid var(--line);padding:18px 22px;text-align:center;font-size:14px;color:var(--muted)}
#skr-trust b{color:var(--navy)}

/* Inhalt + Sidebar */
#skr-main{display:flex;gap:34px;align-items:flex-start;padding:40px 22px}
#content{flex:1;min-width:0}
#sidebar{width:300px;flex:0 0 300px;background:var(--soft);border:1px solid var(--line);border-radius:14px;padding:20px}
#content h1,#content h2,#content h3{color:var(--navy)}
#content h2{font-size:24px;margin:26px 0 8px}
#content a{color:var(--navy);font-weight:600}

/* Footer */
#skr-footer{background:#0b1c30;color:#9fb0c2;padding:40px 22px 22px;font-size:14px}
#skr-footer a{color:#9fb0c2;text-decoration:none}
#skr-footer a:hover{color:var(--gold2)}
.foot-cols{max-width:1180px;margin:0 auto}
.foot-bot{max-width:1180px;margin:22px auto 0;border-top:1px solid rgba(255,255,255,.1);padding-top:16px;font-size:12.5px;color:#7588a0}
.foot-bot a{color:#9fb0c2}

@media(max-width:860px){
  #skr-main{flex-direction:column}
  #sidebar{width:100%;flex:none}
  #skr-nav ul{justify-content:flex-start}
  #skr-cta{display:none}
}