/* Shared chrome for the static SEO pages (/umrechner/, /holzarten/, /ratgeber/, /ratgeber/*/).
   Page-specific styles (tables, callouts, forms, article body) stay inline per page. */

@font-face { font-family:'Barlow'; font-weight:400; font-display:swap; src:url('/fonts/barlow-400.woff2') format('woff2'); }
@font-face { font-family:'Barlow'; font-weight:600; font-display:swap; src:url('/fonts/barlow-600.woff2') format('woff2'); }
@font-face { font-family:'Barlow Condensed'; font-weight:700; font-display:swap; src:url('/fonts/barlow-cond-700.woff2') format('woff2'); }
@font-face { font-family:'Fira Code'; font-weight:400; font-display:swap; src:url('/fonts/fira-code-400.woff2') format('woff2'); }

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }

:root {
  --pine:#2D4A3E; --pine-d:#1E3329; --pine-text:#B2C9C2; --pine-10:color-mix(in srgb,#2D4A3E 10%,transparent);
  --paper:#F7F4EF; --larch:#C4893A; --larch-d:#8B5E1A; --larch-l:#FDF3E7;
  --ink:#1A1A18; --ink2:#3D3D3A; --ink3:#6B6B67;
  --surface:#FFFFFF; --border:#D8D4CC; --border-warm:#E8D5B4;
  --warn-bg:#FFF0F0; --red-warn:#7A2020;
  --sans:'Barlow',system-ui,sans-serif; --cond:'Barlow Condensed',sans-serif; --mono:'Fira Code',monospace;
  --r-sm:4px; --r-md:8px; --r-lg:12px;
}

body { font-family:var(--sans); font-size:15px; color:var(--ink); background:var(--paper); line-height:1.6; }
a { color:var(--larch); }
a:hover { color:var(--larch-d); }
.inner { max-width:720px; margin:0 auto; padding:0 20px; }

/* Header */
.header { background:var(--pine); padding:14px 0; }
.header-inner { display:flex; align-items:center; gap:12px; }
.logo-mark { width:32px; height:32px; background:rgba(255,255,255,.12); border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.logo-text { font-family:var(--cond); font-weight:700; font-size:18px; color:#fff; letter-spacing:.01em; }
.logo-text span { color:#C4893A; }
.logo-sub { font-size:11px; color:var(--pine-text); margin-top:1px; }
.back-link { margin-left:auto; font-size:12px; color:var(--pine-text); text-decoration:none; opacity:.8; white-space:nowrap; }
.back-link:hover { opacity:1; color:#fff; }

/* Breadcrumb */
.breadcrumb { font-size:12px; color:var(--ink3); padding:12px 0 0; }
.breadcrumb a { color:var(--ink3); text-decoration:none; }
.breadcrumb a:hover { color:var(--larch); }
.breadcrumb span { margin:0 5px; }

/* Main */
main { padding:28px 0 56px; }

/* CTA */
.cta-box { background:var(--pine); border-radius:var(--r-lg); padding:24px 28px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:40px; }
.cta-text { color:#fff; font-size:15px; }
.cta-text strong { display:block; font-family:var(--cond); font-size:20px; font-weight:700; margin-bottom:4px; }
.cta-btn { display:inline-flex; align-items:center; padding:11px 22px; background:var(--larch); color:#fff; font-weight:600; font-size:14px; border-radius:var(--r-sm); text-decoration:none; white-space:nowrap; flex-shrink:0; }
.cta-btn:hover { background:var(--larch-d); color:#fff; }

/* Footer */
.footer { background:var(--pine-d); color:var(--pine-text); padding:16px 0; font-size:11px; text-align:center; letter-spacing:.02em; }

@media(max-width:520px) {
  .cta-box { flex-direction:column; }
}