/**
 * RechnungsPilot – shared design system.
 * Loaded on every front-end page rendered by the plugin (home, impressum,
 * generic pages, 404). Page-specific stylesheets are layered on top.
 */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --navy:#0D1B2A; --navy-mid:#1A2E42; --navy-light:#243D55; --navy-card:#162535;
  --accent:#E8A020; --accent-light:#F5C05A; --white:#FFFFFF;
  --text-white:rgba(255,255,255,0.90); --text-muted:rgba(255,255,255,0.55);
  --text-faint:rgba(255,255,255,0.30); --border:rgba(255,255,255,0.08);
  --border-mid:rgba(255,255,255,0.14);
  --serif:'Fraunces',Georgia,serif; --sans:'DM Sans',sans-serif;
}

/* Full-width safety net: never allow a horizontal scrollbar / right gap.
   `clip` (not `hidden`) keeps position:sticky working. */
html, body { width:100%; max-width:100%; overflow-x:clip; }
html { scroll-behavior:smooth; }
body { font-family:var(--sans); background:var(--navy); color:var(--text-white); line-height:1.6; }

/* Reserve space for the fixed header on every page except the home/landing
   (its hero already has top padding to sit under the fixed nav). */
body { padding-top:64px; }
body.rp-bau-landing { padding-top:0; }

/* ---------- Shared header ---------- */
nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:var(--navy); border-bottom:1px solid var(--border-mid);
  padding:0 2rem; height:64px;
  display:flex; align-items:center; justify-content:space-between;
}
.nav-logo { font-family:var(--serif); font-size:1.3rem; font-weight:700; color:var(--white); letter-spacing:-0.02em; text-decoration:none; }
.nav-logo span { color:var(--accent); }
.nav-links { display:flex; gap:2rem; list-style:none; }
.nav-links a { color:var(--text-muted); text-decoration:none; font-size:0.9rem; font-weight:500; }
.nav-cta { background:var(--accent)!important; color:var(--navy)!important; padding:.45rem 1.1rem; border-radius:4px; font-weight:700!important; }

.hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:.5rem; background:none; border:none; }
.hamburger span { display:block; width:22px; height:2px; background:var(--white); border-radius:2px; transition:all .25s; }
.hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

.mobile-menu { display:none; position:fixed; top:64px; left:0; right:0; background:var(--navy); border-bottom:1px solid var(--border-mid); z-index:99; padding:1rem 1.5rem 1.5rem; flex-direction:column; gap:.25rem; }
.mobile-menu.open { display:flex; }
.mobile-menu a { color:var(--text-muted); text-decoration:none; font-size:1rem; font-weight:500; padding:.75rem 0; border-bottom:1px solid var(--border); }
.mobile-menu a.mob-cta { border-bottom:none; margin-top:.5rem; background:var(--accent); color:var(--navy)!important; font-weight:700; text-align:center; padding:.85rem; border-radius:4px; }

/* Keep the fixed nav clear of the WordPress admin bar for logged-in users. */
body.admin-bar nav { top:32px; }
body.admin-bar .mobile-menu { top:96px; }
@media screen and (max-width:782px){
  body.admin-bar nav { top:46px; }
  body.admin-bar .mobile-menu { top:110px; }
}

/* ---------- Buttons ---------- */
.btn-primary { background:var(--accent); color:var(--navy); padding:.85rem 1.8rem; border-radius:4px; font-weight:700; font-size:.95rem; text-decoration:none; display:inline-block; }
.btn-outline { background:transparent; color:var(--white); border:1px solid rgba(255,255,255,.35); padding:.85rem 1.8rem; border-radius:4px; font-weight:500; font-size:.95rem; text-decoration:none; display:inline-block; }
.btn-dark { background:var(--navy); color:var(--white); padding:.85rem 1.8rem; border-radius:4px; font-weight:700; font-size:.95rem; text-decoration:none; display:inline-block; }

/* ---------- Shared page hero (inner pages) ---------- */
.page-hero { background:var(--navy-mid); border-bottom:1px solid var(--border-mid); padding:3rem 2rem 2.5rem; }
.page-hero-inner { max-width:900px; margin:0 auto; }
.breadcrumb { font-size:.8rem; color:var(--text-faint); margin-bottom:.75rem; }
.breadcrumb a { color:var(--text-faint); text-decoration:none; }
.breadcrumb span { color:var(--text-muted); margin:0 .4rem; }
.page-hero h1 { font-family:var(--serif); font-size:clamp(2rem,4vw,2.8rem); font-weight:700; color:var(--white); letter-spacing:-.02em; }
.page-hero h1 span { color:var(--accent); }

/* ---------- Generic dark "prose" content ---------- */
.rp-prose { max-width:900px; margin:0 auto; padding:3.5rem 2rem 5rem; }
.rp-prose h1, .rp-prose h2 { font-family:var(--serif); color:var(--white); letter-spacing:-.02em; line-height:1.25; margin:2rem 0 1rem; }
.rp-prose h1 { font-size:1.8rem; } .rp-prose h2 { font-size:1.5rem; }
.rp-prose h3 { font-size:.9rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--accent); margin:1.75rem 0 .6rem; }
.rp-prose h4 { font-size:1rem; font-weight:600; color:var(--white); margin:1.25rem 0 .5rem; }
.rp-prose p { font-size:.95rem; color:var(--text-muted); line-height:1.85; margin-bottom:1rem; }
.rp-prose a { color:var(--accent-light); text-decoration:none; }
.rp-prose a:hover { text-decoration:underline; }
.rp-prose strong { color:var(--text-white); }
.rp-prose em { color:var(--text-white); }
.rp-prose ul, .rp-prose ol { margin:0 0 1rem 1.25rem; display:flex; flex-direction:column; gap:.4rem; }
.rp-prose li { font-size:.92rem; color:var(--text-muted); line-height:1.7; }
.rp-prose hr { border:none; border-top:1px solid var(--border-mid); margin:2rem 0; }
.rp-prose img { max-width:100%; height:auto; border-radius:8px; }
.rp-prose table { width:100%; border-collapse:collapse; margin:1rem 0; }
.rp-prose th, .rp-prose td { text-align:left; padding:.6rem .75rem; border-bottom:1px solid var(--border); font-size:.9rem; color:var(--text-muted); }
/* Forms inside content (e.g. contact form) */
.rp-prose form { background:var(--navy-card); border:1px solid var(--border-mid); border-radius:8px; padding:1.75rem; margin-top:1.5rem; display:flex; flex-direction:column; gap:.25rem; }
.rp-prose label { display:block; font-size:.78rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--text-white); margin:.75rem 0 .3rem; }
.rp-prose input, .rp-prose textarea, .rp-prose select { width:100%; background:var(--navy-light); border:1px solid var(--border-mid); border-radius:5px; padding:.7rem .85rem; color:var(--white); font-family:var(--sans); font-size:.9rem; }
.rp-prose input[type="hidden"] { display:none; }
.rp-prose textarea { min-height:120px; resize:vertical; }
.rp-prose button, .rp-prose input[type="submit"] { width:auto; align-self:flex-start; margin-top:1.25rem; background:var(--accent); color:var(--navy); border:none; padding:.85rem 1.8rem; border-radius:4px; font-weight:700; font-size:.95rem; cursor:pointer; }

/* ---------- CTA banner ---------- */
.cta-band { background:var(--accent); padding:3rem 2rem; text-align:center; }
.cta-band h2 { font-family:var(--serif); font-size:clamp(1.5rem,3vw,2rem); font-weight:700; color:var(--navy); margin-bottom:.75rem; }
.cta-band p { color:var(--navy); opacity:.75; font-size:.95rem; margin-bottom:1.5rem; }

/* ---------- Shared footer ---------- */
footer { background:var(--navy-card); padding:3rem 2rem 2rem; color:var(--text-muted); border-top:1px solid var(--border-mid); }
.footer-inner { max-width:1100px; margin:0 auto; display:grid; grid-template-columns:2fr 1fr 1fr; gap:3rem; padding-bottom:2rem; border-bottom:1px solid var(--border); }
.footer-brand .nav-logo { font-size:1.2rem; margin-bottom:.75rem; display:block; }
.footer-brand p { font-size:.83rem; line-height:1.7; max-width:320px; }
.footer-col h5 { font-size:.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint); margin-bottom:1rem; }
.footer-col ul { list-style:none; display:flex; flex-direction:column; gap:.6rem; }
.footer-col a { color:var(--text-muted); text-decoration:none; font-size:.88rem; }
.footer-bottom { max-width:1100px; margin:1.5rem auto 0; display:flex; justify-content:space-between; font-size:.8rem; color:var(--text-faint); }
.footer-bottom a { color:var(--text-faint); text-decoration:none; }

@media (max-width:768px) {
  nav { padding:0 1rem; }
  .nav-links { display:none; }
  .hamburger { display:flex; }
  .footer-inner { grid-template-columns:1fr; gap:2rem; }
  .footer-bottom { flex-direction:column; gap:.5rem; }
  .rp-prose { padding:2.5rem 1.25rem 4rem; }
}