/* ================== Design Tokens ================== */
:root{
  --bg:#f5f7fa;
  --card:#ffffff;
  --text:#222222;
  --muted:#6b7280;
  --primary:#1e3a8a;
  --primary-2:#2563eb;
  --border:rgba(0,0,0,.08);
  --radius:12px;
  --shadow:0 2px 12px rgba(0,0,0,.08);
}

/* ================== Reset & Base ================== */
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px}
body{
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  line-height:1.6;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline}
button{font:inherit}
:focus-visible{outline:3px solid var(--primary-2);outline-offset:2px}

/* ================== Layout ================== */
.tb-container{
  width:min(100%,1200px);
  margin-inline:auto;
  background:var(--card);
  padding:clamp(1rem,2.5vw,2rem);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

/* ================== Header ================== */
.header{position:sticky;top:0;z-index:50;background:#fff;color:var(--text);padding:.75rem 1rem;box-shadow:none;border-bottom:1px solid var(--border)}
.header .wrap{
  width:min(100%,1200px);
  margin-inline:auto;
  display:flex; align-items:center; gap:1rem;
}
.logo{display:flex;align-items:center;gap:.75rem;color:inherit;text-decoration:none}
.logo .brand{font-weight:700;letter-spacing:.2px}
.logo .sub{display:block; font-size:.75rem; color:rgba(255,255,255,.8)}

.hamburger{
  margin-left:auto;
  border:0; background:transparent; color:#fff;
  width:44px; height:44px; display:grid; place-items:center;
  border-radius:10px;
}
.hamburger svg{width:24px;height:24px}

.main-nav{
  display:none;
  flex-wrap:wrap; gap:.5rem 1rem;
}
.main-nav a{color:inherit;text-decoration:none;padding:.5rem .75rem;border-radius:10px}
.main-nav a:hover{background:rgba(0,0,0,.05)}

.main-nav[data-open="true"]{display:flex}

/* >= 768px show nav inline, hide burger */
@media (min-width:768px){
  .hamburger{display:none}
  .main-nav{display:flex;margin-left:auto}
}

/* ================== Breadcrumb ================== */
.breadcrumb{
  width:min(100%,1200px);
  margin: .5rem auto 0;
  padding: .5rem 1rem;
  font-size:.875rem;
  color:var(--muted);
  display:flex; flex-wrap:wrap; gap:.25rem .5rem;
}
.breadcrumb a{color:var(--primary-2)}
.breadcrumb a:hover{text-decoration:underline}

/* ================== Content ================== */
.content{padding:1rem}
h1{font-size:clamp(1.5rem,3.5vw,2.2rem); line-height:1.2; margin:.25rem 0 1rem; color:var(--primary)}
h2{font-size:clamp(1.25rem,3vw,1.6rem); margin:1.25rem 0 .5rem; color:#1f2937}
h3{font-size:clamp(1.1rem,2.5vw,1.25rem); margin:1rem 0 .5rem; color:#374151}
p{margin:.5rem 0}
.muted{color:var(--muted)}

/* Cards / Categories grid */
.categories{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px,1fr));
  gap:1rem;
  margin-top:1rem;
}
.card{
  background:var(--card); border:1px solid var(--border);
  padding:1rem; border-radius:14px;
  box-shadow:0 2px 6px rgba(0,0,0,.06);
  transition:transform .15s ease, box-shadow .15s ease;
}
.card:hover{transform:translateY(-3px); box-shadow:0 6px 14px rgba(0,0,0,.10)}
.card h3{margin-bottom:.25rem}

/* Tables: horizontal scroll on mobile */
.table-responsive{overflow-x:auto; -webkit-overflow-scrolling:touch}
table{border-collapse:collapse; width:100%; font-size:0.95rem}
th, td{border:1px solid var(--border); padding:.5rem .6rem; text-align:left}
thead th{background:#eef2ff}

/* Code / pre */
pre, code{font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace}
pre{
  background:#0b1020; color:#eaefff;
  padding:1rem; border-radius:12px; overflow:auto;
  box-shadow:0 1px 6px rgba(0,0,0,.25)
}

/* Images inside content */
.content img{border-radius:12px}

/* MathJax containers shouldn't overflow viewport */
mjx-container{overflow-x:auto; overflow-y:hidden; display:block; padding-bottom:.25rem}

/* Forms (search) */
.category-search, .site-search input[type="search"]{
  width:100%; padding:.75rem 1rem; border-radius:12px; border:1px solid var(--border);
  outline:none; transition: box-shadow .15s ease, border-color .15s ease; 
}
.category-search:focus{border-color:var(--primary-2); box-shadow:0 0 0 4px rgba(37,99,235,.15)}

/* Footer */
footer{
  width:min(100%,1200px);
  margin:1rem auto 2rem; padding:1rem;
  color:var(--muted); font-size:.95rem;
  text-align:center;
}
footer a{color:var(--primary-2)}

/* ================== Utilities ================== */
.hidden{display:none !important}
.sticky{position:sticky; top:0}

/* ================== Mobile Tweaks ================== */
@media (max-width:768px){
  .tb-container{border-radius:0; box-shadow:none; padding:1rem}
  .categories{grid-template-columns: 1fr 1fr}
}
@media (max-width:480px){
  .categories{grid-template-columns: 1fr}
  th, td{padding:.5rem}
}


/* Search box */
.site-search input[type="search"]{
  width:100%; padding:.6rem .9rem; border-radius:10px; border:1px solid var(--border);
  background:#fff; transition: box-shadow .15s ease, border-color .15s ease;
}
.site-search input[type="search"]:focus{border-color:var(--primary-2); box-shadow:0 0 0 4px rgba(37,99,235,.12)}
/* Suggestions dropdown */
.suggestions{
  position:absolute; inset: auto 0 0 0; transform: translateY(calc(100% + .5rem));
  background:#fff; border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow);
  max-height:60vh; overflow:auto; padding:.25rem;
}
.suggestion-item{
  display:flex; gap:.6rem; align-items:flex-start; padding:.6rem .7rem; border-radius:10px; cursor:pointer;
}
.suggestion-item:hover, .suggestion-item[aria-selected="true"]{background:#f3f4f6}
.suggestion-title{font-weight:600}
.suggestion-path{font-size:.8rem; color:var(--muted)}



/* === Gleichungen: Profi-Typografie & MathJax Fixes === */
:root {
  --tb-leading: 1.7;
  --tb-card-leading: 1.65;
  --tb-list-gap: .25rem;
}

.content, .tb-container { line-height: var(--tb-leading); }

.card { line-height: var(--tb-card-leading); }

.card p { margin: .4rem 0 .8rem; }

.card ul, .card ol {
  margin: .35rem 0 .75rem;
  padding-left: 1.25rem;
}

.card ol li, .card ul li { margin: var(--tb-list-gap) 0; }

/* Prevent awkward wraps around inline math & keep punctuation attached */
mjx-container[display="inline"] {
  display: inline-block !important;
  white-space: nowrap;
  vertical-align: baseline;
  margin: 0 .05rem;
}

/* Display equations: balanced spacing */
mjx-container[display="true"] {
  display: block;
  margin: .6rem 0 .8rem;
}

/* Tighter spacing for lists containing math */
li mjx-container[display="inline"] { margin: 0 .15rem; }

/* Avoid single markers or dots sitting alone due to width changes */
.card ol { list-style-position: outside; }
.card ul { list-style-position: outside; }

/* Improve readability on wide screens */
@media (min-width: 1024px) {
  .tb-container { font-size: 1.04rem; }
}

/* Small helpers if needed */
.nowrap { white-space: nowrap; }
.kbd, code.kbd {
  background:#f3f4f6; border:1px solid #e5e7eb; padding:.05rem .35rem; border-radius:6px;
}

/* TODO link styling */
a[data-status=todo]{opacity:.7;cursor:not-allowed;text-decoration: none;}