/*
Theme Name: DS mebeco — Andreas Cordes
Theme URI: https://ds.mebeco-gmbh.de
Author: mebeco GmbH
Description: Experten-Landingpage Digital Signage & Medientechnik — Andreas Cordes. Regieraum-Anthrazit, Amber-Akzent, selbst gehostete Fonts (DSGVO). Klassisches Theme.
Version: 1.0
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 8.0
Text Domain: ds-mebeco
*/

@font-face{font-family:'Public Sans';font-style:normal;font-weight:100 900;font-display:swap;src:url('assets/fonts/public-sans-var.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/ibm-plex-mono-400.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/ibm-plex-mono-500.woff2') format('woff2');}

:root {
  --bg:#14181D; --bg-alt:#191E25; --surface:#1B2028; --border:#2A313C;
  --text:#F4EFE7; --muted:#9BA3AF; --accent:#E8A13A; --accent-soft:rgba(232,161,58,0.14);
  --tick-idle:#3A414C;
  --font-sans:'Public Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: light) {
  :root { --bg:#F3EFE7; --bg-alt:#EAE4D8; --surface:#FFFFFF; --border:#DCD4C4;
    --text:#1A1D22; --muted:#5B5A54; --accent:#B5670C; --accent-soft:rgba(181,103,12,0.12); --tick-idle:#C9C0AC; }
}
:root[data-theme="light"] { --bg:#F3EFE7; --bg-alt:#EAE4D8; --surface:#FFFFFF; --border:#DCD4C4;
  --text:#1A1D22; --muted:#5B5A54; --accent:#B5670C; --accent-soft:rgba(181,103,12,0.12); --tick-idle:#C9C0AC; }
:root[data-theme="dark"] { --bg:#14181D; --bg-alt:#191E25; --surface:#1B2028; --border:#2A313C;
  --text:#F4EFE7; --muted:#9BA3AF; --accent:#E8A13A; --accent-soft:rgba(232,161,58,0.14); --tick-idle:#3A414C; }

* { box-sizing: border-box; }
body { margin:0; }
::selection { background: rgba(232,161,58,0.35); }
.page { background:var(--bg); color:var(--text); font-family:var(--font-sans); min-height:100vh; }
a { text-decoration:none; color:inherit; }
h1,h2,h3 { margin:0; letter-spacing:-0.01em; text-wrap:balance; }
.inner { max-width:1200px; margin:0 auto; }

/* signal mark */
.mark { display:flex; align-items:flex-end; gap:3px; height:22px; }
.mark span { width:3px; border-radius:1px; }
.mark-sm { display:flex; align-items:flex-end; gap:2px; height:16px; }
.mark-sm span { width:2px; border-radius:1px; }
.tick-accent { background:var(--accent); }
.tick-idle { background:var(--tick-idle); }

/* nav */
.nav { position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter:blur(8px); border-bottom:1px solid var(--border); }
.nav .inner { padding:18px 40px; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; row-gap:12px; }
.nav-brand { display:flex; align-items:center; gap:12px; }
.nav-name { font-weight:700; font-size:15px; letter-spacing:0.01em; }
.nav-role { font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.04em; color:var(--muted); text-transform:uppercase; }
.nav-links { display:flex; align-items:center; gap:28px; flex-wrap:wrap; }
.nav-links a { font-size:14px; color:var(--muted); font-weight:500; white-space:nowrap; transition:color .2s; }
.nav-links a:hover { color:var(--text); }
.nav-cta { font-family:var(--font-mono); font-size:12px; letter-spacing:0.04em; color:var(--accent) !important; border:1px solid var(--accent); padding:8px 14px; border-radius:2px; transition:background .2s; }
.nav-cta:hover { background:var(--accent-soft); }

/* hero */
.hero { padding:120px 40px 100px; }
.hero .inner { display:flex; gap:64px; justify-content:space-between; align-items:center; flex-wrap:wrap; }
.hero-text { max-width:660px; }
.eyebrow { font-family:var(--font-mono); font-size:12px; letter-spacing:0.08em; color:var(--accent); margin-bottom:24px; text-transform:uppercase; }
.hero h1 { font-size:clamp(34px,5.2vw,56px); line-height:1.08; font-weight:700; }
.hero-lead { font-size:18px; line-height:1.6; color:var(--muted); margin-top:24px; max-width:560px; }
.btns { display:flex; gap:16px; margin-top:36px; flex-wrap:wrap; }
.btn-primary { font-weight:600; font-size:14.5px; color:var(--bg); background:var(--accent); padding:14px 24px; border-radius:3px; transition:filter .2s; }
.btn-primary:hover { filter:brightness(1.07); }
.btn-secondary { font-weight:600; font-size:14.5px; color:var(--text); background:transparent; border:1px solid var(--border); padding:14px 24px; border-radius:3px; transition:border-color .2s; }
.btn-secondary:hover { border-color:var(--accent); }
.hero-meta { font-family:var(--font-mono); font-size:11.5px; letter-spacing:0.05em; color:var(--muted); margin-top:40px; display:flex; align-items:center; gap:12px; text-transform:uppercase; flex-wrap:wrap; }
.hero-meta .rec { color:var(--accent); }
.ddot { width:3px; height:3px; border-radius:50%; background:var(--muted); display:inline-block; }
.hero-visual { position:relative; width:420px; height:320px; border-radius:4px; overflow:hidden; border:1px solid var(--border); flex-shrink:0; }
.hero-visual img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.visual-tc { position:absolute; bottom:14px; right:16px; font-family:var(--font-mono); font-size:12px; color:var(--accent); letter-spacing:0.05em; background:rgba(20,24,29,0.55); padding:2px 6px; border-radius:2px; }

/* sections */
section { padding:100px 40px; }
section.alt { background:var(--bg-alt); }
.sec-head { margin-bottom:56px; max-width:640px; }
.label-tag { font-family:var(--font-mono); font-size:12px; letter-spacing:0.08em; color:var(--accent); margin-bottom:14px; text-transform:uppercase; }
h2 { font-size:clamp(26px,3.4vw,34px); font-weight:700; }
.subhead { font-size:16px; color:var(--muted); margin-top:14px; line-height:1.6; }

/* werdegang */
.werde-grid { display:grid; grid-template-columns:320px 1fr; gap:64px; align-items:start; }
.portrait { position:relative; width:100%; aspect-ratio:3/4; border-radius:4px; overflow:hidden; border:1px solid var(--border); }
.portrait img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 18%; }
.body-text { font-size:16.5px; line-height:1.75; color:var(--muted); margin:0 0 20px; }
.tl { margin-top:32px; }
.tl-row { display:grid; grid-template-columns:88px 20px 1fr; }
.tl-year { font-family:var(--font-mono); font-size:12.5px; color:var(--accent); padding-top:2px; }
.tl-mid { display:flex; flex-direction:column; align-items:center; }
.tl-dot { width:7px; height:7px; border-radius:50%; background:var(--accent); margin-top:5px; flex-shrink:0; }
.tl-line { width:1px; flex:1; background:var(--border); margin-top:4px; }
.tl-text { font-size:14.5px; line-height:1.65; color:var(--muted); padding-bottom:24px; }

/* cards grid */
.cards { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:24px; }
.card { background:var(--surface); border:1px solid var(--border); border-radius:4px; padding:28px; }
.card-idx { font-family:var(--font-mono); font-size:12px; color:var(--accent); margin-bottom:16px; }
.card h3 { font-size:18px; font-weight:700; margin:0 0 10px; }
.card p { font-size:14.5px; line-height:1.6; color:var(--muted); margin:0; }

/* stats */
.stats { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:1px; background:var(--border); border:1px solid var(--border); }
.stat { background:var(--bg-alt); padding:32px 24px; text-align:center; }
.stat-num { font-family:var(--font-mono); font-size:38px; font-weight:600; color:var(--accent); font-variant-numeric:tabular-nums; }
.stat-lbl { font-size:13.5px; color:var(--muted); margin-top:8px; line-height:1.4; }

/* posts (teaser + blog) */
.post { background:var(--surface); border:1px solid var(--border); border-radius:4px; padding:28px; display:block; transition:border-color .2s; }
a.post:hover { border-color:var(--accent); }
.post-badge { display:inline-block; font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.05em; color:var(--accent); background:var(--accent-soft); padding:4px 8px; border-radius:2px; margin-bottom:16px; }
.post h3 { font-size:17px; font-weight:700; margin:0 0 10px; line-height:1.3; }
.post p { font-size:14px; line-height:1.6; color:var(--muted); margin:0; }
.posts-more { margin-top:40px; }
.posts-more a { font-family:var(--font-mono); font-size:13px; color:var(--accent); letter-spacing:0.03em; }
.posts-more a:hover { text-decoration:underline; }

/* contact */
.contact { padding:120px 40px; background:var(--bg-alt); border-top:1px solid var(--border); }
.contact-lead { font-size:17px; color:var(--muted); margin-top:16px; max-width:520px; }

/* footer */
footer.site-footer { padding:32px 40px; border-top:1px solid var(--border); }
footer.site-footer .inner { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.foot-text { font-family:var(--font-mono); font-size:11.5px; color:var(--muted); letter-spacing:0.02em; }
.foot-links a { color:var(--muted); transition:color .2s; }
.foot-links a:hover { color:var(--accent); }

/* article / legal pages */
.article-wrap { padding:120px 40px 100px; }
.article-wrap .inner { max-width:760px; }
.article-head { margin-bottom:40px; }
.article-meta { font-family:var(--font-mono); font-size:12px; color:var(--accent); letter-spacing:0.05em; text-transform:uppercase; margin-bottom:16px; }
.article-title { font-size:clamp(28px,4vw,40px); font-weight:700; line-height:1.15; }
.prose { font-size:16.5px; line-height:1.75; color:var(--text); }
.prose p { margin:0 0 20px; }
.prose h2 { font-size:24px; margin:40px 0 16px; }
.prose h3 { font-size:19px; margin:32px 0 12px; }
.prose a { color:var(--accent); text-decoration:underline; }
.prose ul, .prose ol { padding-left:22px; margin:0 0 20px; line-height:1.75; }
.prose li { margin-bottom:6px; }
.prose strong { color:var(--text); }
.prose img { max-width:100%; height:auto; border-radius:4px; }
.back-link { display:inline-block; margin-top:24px; font-family:var(--font-mono); font-size:13px; color:var(--accent); }
.back-link:hover { text-decoration:underline; }

/* blog list */
.blog-list { display:grid; grid-template-columns:repeat(auto-fill, minmax(320px,1fr)); gap:24px; }
.blog-nav { margin-top:56px; display:flex; justify-content:space-between; gap:16px; }
.blog-nav a { font-family:var(--font-mono); font-size:13px; color:var(--accent); }

a:focus-visible, .btn-primary:focus-visible, .btn-secondary:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
@media (max-width:820px) {
  .werde-grid { grid-template-columns:1fr; }
  .hero-visual { width:100%; height:260px; }
  section, .hero, .contact, .nav .inner, .article-wrap { padding-left:24px; padding-right:24px; }
}