@import url('https://fonts.googleapis.com/css2?family=Biome:wght@400;700&display=swap');
/* Global font fallback */
html, body, button, input, textarea, select, h1, h2, h3, h4, h5, h6, p, a, div, span{font-family: var(--font-family);}
:root{
  --font-family: "Verdana", "Calibri", "Segoe UI", Arial, sans-serif;

  --bg:#f7f9fb; --surface:#fff; --ink:#0f172a; --muted:#475569; --border:#dbe4f0;
  --brand:#3a6ea5; --topbar:#d9e5f2; --radius:12px; --shadow:0 10px 28px rgba(2,12,27,.06);
}



*{box-sizing:border-box}
html,body{height:100%; margin:0}
body{font-family: var(--font-family); background:var(--bg); color:var(--ink); line-height:1.5}
.page{min-height:100%; display:flex; flex-direction:column}
.topbar{ background: var(--topbar); border:1px solid #cfd8e3; margin:20px; border-radius: var(--radius) }
.topbar-inner{ width:100%; padding:12px 16px; display:flex; align-items:center; justify-content:space-between; gap:16px }
.brand{ font-weight:700; font-size:24px }
.date{ font-weight:600; font-size:14px; color:#1d2939 }
.hamburger{ width:36px;height:36px;border:1px solid #cfd8e3;border-radius:10px;background:#fff;display:none;align-items:center;justify-content:center;cursor:pointer }
.hamburger span{ display:block; width:18px; height:2px; background:#334155; margin:3px 0 }
.layout-wrap{ flex:1 0 auto; display:grid; grid-template-columns:260px minmax(0,1fr); gap:18px; margin:10px 20px 0 20px }
.sidebar{ border:1px solid var(--border); border-radius: var(--radius); padding:16px; background:var(--surface); box-shadow: var(--shadow) }
.nav{ display:flex; flex-direction:column; gap:16px }
.nav-btn{ display:block; width:100%; text-align:center; padding:12px 16px; border-radius:12px; background:#f1f6fd; color:var(--ink); text-decoration:none; font-weight:700; border:1px solid var(--border); transition:transform .06s ease,box-shadow .2s ease,background .2s ease,color .2s ease; box-shadow: var(--shadow) }
.nav-btn:hover{ transform:translateY(-1px); background:#e9f1fb }
.nav-btn.is-active{ background: var(--brand); color:#fff; border-color:transparent }
.content{ border:1px solid var(--border); border-radius: var(--radius); background:var(--surface); box-shadow: var(--shadow); padding:28px; min-height:100%; display:flex; flex-direction:column; overflow:visible }
.content .grow{ flex:1 1 auto; min-height:0 }
.footer{ flex:0 0 auto; margin:20px; border-top:1px solid #d0d7de; padding:12px 0 0; text-align:center }
.button{ display:inline-block; padding:10px 16px; background: var(--brand); color:#fff; border:0; border-radius:10px; text-decoration:none; cursor:pointer }
.button.light{ background:#eff6ff; color:#0f172a; border:1px solid var(--border) }
/* CV */
.cv-toolbar{ display:flex; align-items:center; gap:12px; justify-content:space-between; margin-bottom:12px; flex-wrap:wrap }
.cv-scroller{ flex:1 1 auto; min-height:0; border:1px solid var(--border); border-radius:10px; overflow:auto; background:#fff; position:relative }
.cv-frame{ width:100%; height:100%; border:0; display:block }
/* Modal */
.modal{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(2,12,27,.35); padding:20px; z-index:1000 }
.modal.on{ display:flex }
.modal-card{ background:#fff; border-radius:12px; box-shadow: var(--shadow); width:min(560px, 96vw); padding:20px; border:1px solid var(--border) }
.modal-card h3{ margin:0 0 8px }
.modal-row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:12px }
.input{ padding:10px 12px; border:1px solid var(--border); border-radius:10px; min-width: 240px }
.badge{ display:inline-block; padding:6px 10px; border-radius:999px; background:#ecfdf3; color:#065f46; border:1px solid #a7f3d0; font-weight:700 }
.alert{ padding:12px 14px; border-radius:10px; border:1px solid var(--border); background:#f8fafc; margin-top:10px }
.alert.ok{ border-color:#a7f3d0; background:#ecfdf3; color:#065f46 }
.alert.err{ border-color:#fecaca; background:#fef2f2; color:#7f1d1d }
.kontakt-actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:12px }
@media (max-width:980px){
  .hamburger{ display:flex }
  .layout-wrap{ grid-template-columns:1fr }
  .sidebar{ display:none; order:1 }
  body.menu-open .sidebar{ display:block }
  .content{ order:2 }
}
/* === Added by assistant: topbar logo + typography === */
.topbar .logo{ height:40px; width:auto; display:block }
.brand{ font-family: var(--font-family); letter-spacing:.2px }
body{ font-family: var(--font-family) }

.topbar-inner{ display:flex; align-items:center; justify-content:space-between }