/* ============================================================================
   Mischbar / Mixbar — gemeinsames Stylesheet
   Tokens · Light/Dark (Archiv/Instrument) · Header/Footer · Komponenten
   ========================================================================== */
@import url('fonts.css'); /* lokal gehostet — kein externer Abruf (Datenschutz/Offline) */

:root{
  /* Material-Rohfarben (konstant in beiden Themes) */
  --m-zement:#8A8B86; --m-sand:#D8C7A8; --m-lehm:#A0613C;
  --m-wasser:#3E6E8E; --m-ziegel:#8C3A28; --m-kalk:#F4F1EA; --m-ink:#1C1814;
  --ink:#1C1814; /* Tinte: Text-/Konturfarbe, in beiden Themes (Tooltip, Auswahl-Kontur, Linien) */
  --serif:'IBM Plex Sans', system-ui, -apple-system, sans-serif; /* Logo-Schrift (Wortmarke) auch für Überschriften */
  --sans:'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --mono:'JetBrains Mono', ui-monospace, monospace;
  --r-s:8px; --r-m:12px; --r-l:18px; --r-xl:24px;
  --maxw:1080px;
  --tap:48px;
}

/* ---- Light = „Archiv" ---- */
:root, :root[data-theme="light"]{
  --bg:#F4F1EA; --surface:#FCFBF7; --surface-2:#ECE7DC; --surface-ink:#1C1814;
  --fg:#1C1814; --fg-muted:#6A645C; --fg-faint:#938C81;
  --line:#E2DCCE; --line-strong:#C6BEAD;
  --accent:#3E6E8E; --accent-warm:#A0613C; --danger:#8C3A28;
  --shadow:0 1px 2px rgba(28,24,20,.05), 0 10px 30px rgba(28,24,20,.07);
  --grid:rgba(28,24,20,.035);
  --seg-stroke:rgba(28,24,20,.10);
  --on-surface-ink:#F4F1EA;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .11 0 0 0 0 .094 0 0 0 0 .078 0 0 0 .075 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --wash:radial-gradient(900px 520px at 50% -120px, rgba(216,199,168,.55), rgba(216,199,168,0) 70%), radial-gradient(700px 420px at 100% 0, rgba(62,110,142,.10), rgba(62,110,142,0) 65%);
  --scene:url("bg-scene-restored.webp");
  --caret:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231C1814' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}
/* ---- Dark = „Instrument" ---- */
:root[data-theme="dark"]{
  --bg:#1A1712; --surface:#241F18; --surface-2:#2E2820; --surface-ink:#0F0D0A;
  --fg:#F1EDE3; --fg-muted:#A8A296; --fg-faint:#7C766B;
  --line:#352F26; --line-strong:#4A4339;
  --accent:#7BA8C7; --accent-warm:#C98B5C; --danger:#D67B66;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 12px 34px rgba(0,0,0,.35);
  --grid:rgba(244,241,234,.045);
  --seg-stroke:rgba(244,241,234,.14);
  --on-surface-ink:#F4F1EA;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .96 0 0 0 0 .93 0 0 0 0 .89 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --wash:radial-gradient(900px 520px at 50% -120px, rgba(160,97,60,.16), rgba(160,97,60,0) 70%), radial-gradient(700px 420px at 100% 0, rgba(123,168,199,.10), rgba(123,168,199,0) 65%);
  --scene:url("bg-scene-restored.webp");
  --caret:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23F1EDE3' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; background:var(--bg)}
body{
  margin:0; background:transparent; color:var(--fg);
  font-family:var(--sans); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
  transition:color .35s ease;
}
/* Hintergrundszene: Putzwand, Skizze, Olive, Mörtelkübel — fixe Ebene hinter dem Inhalt,
   darüber Körnung und Farbwash. Als Pseudo-Elemente, weil background-attachment:fixed auf iOS nicht greift. */
body::before{content:''; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:var(--bg) var(--scene) center bottom / cover no-repeat}
[data-theme="dark"] body::before{filter:brightness(.34) saturate(.65)}
body::after{content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:var(--wash), var(--grain); background-repeat:no-repeat, repeat}
@media print{ body::before, body::after{display:none} }
h1,h2,h3,h4{font-family:var(--serif); font-weight:700; line-height:1.1; margin:0; letter-spacing:-.022em}
a{color:inherit; text-decoration:none}
.mono{font-family:var(--mono); font-variant-numeric:tabular-nums}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 20px}
.tnum{font-variant-numeric:tabular-nums}

/* ---- Header ---- */
.mb-header{position:sticky; top:0; z-index:40; background:color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter:saturate(1.2) blur(10px); border-bottom:1px solid var(--line)}
.mb-header::after{content:''; position:absolute; left:0; right:0; bottom:-1px; height:3px; background:linear-gradient(90deg, var(--m-zement) 0 25%, var(--m-sand) 25% 50%, var(--m-lehm) 50% 75%, var(--m-wasser) 75% 100%)}
.mb-header .bar{display:flex; align-items:center; gap:18px; height:66px}
.brand{display:flex; align-items:center; gap:12px; flex:0 0 auto}
.brand .kern{flex:0 0 auto; display:flex; flex-direction:column; overflow:hidden; border-radius:9px; box-shadow:inset 0 0 0 1px var(--seg-stroke)}
.brand .kern>span{display:block; width:100%}
.wm{font-family:var(--sans); font-weight:700; font-size:24px; letter-spacing:-.025em; line-height:1; color:var(--fg)}
.wm .barword{position:relative; padding-bottom:.18em}
.wm .barword::after{content:""; position:absolute; left:0; right:0; bottom:.02em; height:.16em; border-radius:2px;
  background:linear-gradient(90deg,var(--m-zement) 0 25%,var(--m-sand) 25% 60%,var(--m-lehm) 60% 80%,var(--m-wasser) 80% 100%)}
.mb-nav{display:flex; gap:4px; margin-inline-start:auto; align-items:center}
.mb-nav a{font-size:14.5px; color:var(--fg-muted); padding:9px 12px; border-radius:9px; white-space:nowrap; transition:color .2s, background .2s}
.mb-nav a:hover{color:var(--fg); background:var(--surface-2)}
.mb-nav a.active{color:var(--fg); background:var(--surface-2)}
.hdr-tools{display:flex; gap:6px; align-items:center; flex:0 0 auto}
.icon-btn{height:40px; min-width:40px; padding:0 11px; display:inline-flex; align-items:center; justify-content:center; gap:7px;
  border:1px solid var(--line-strong); background:var(--surface); color:var(--fg); border-radius:10px; cursor:pointer;
  font-family:var(--mono); font-size:12px; letter-spacing:.02em; transition:border-color .2s, background .2s, transform .1s}
.icon-btn:hover{border-color:var(--accent)}
.icon-btn:active{transform:translateY(1px)}
.icon-btn svg{width:16px; height:16px; display:block}
.lang-sel{appearance:none; -webkit-appearance:none; padding-inline-end:26px; max-width:132px; text-overflow:ellipsis; background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%); background-position:calc(100% - 15px) 17px, calc(100% - 10px) 17px; background-size:5px 5px; background-repeat:no-repeat; font-family:var(--sans)}
:lang(ja) body, :lang(zh) body, :lang(hi) body, html[lang=ja], html[lang=zh], html[lang=hi]{--serif:'Noto Sans JP','Hiragino Sans','Yu Gothic','Noto Sans SC','PingFang SC','Microsoft YaHei','Noto Sans Devanagari',system-ui,sans-serif}
/* Arabisch: IBM Plex Sans hat keine arabischen Glyphen; Systemschriften als Fallback-Kette (Plex bleibt fuer Ziffern/Latein) */
html[lang=ar], html[lang=ar] body{--sans:'IBM Plex Sans','Segoe UI','Noto Sans Arabic','Noto Naskh Arabic','Geeza Pro','Arabic UI Text',Tahoma,Arial,system-ui,sans-serif; --serif:'IBM Plex Sans','Segoe UI','Noto Sans Arabic','Noto Naskh Arabic','Geeza Pro','Arabic UI Text',Tahoma,Arial,system-ui,sans-serif}
html[lang=ar] h1, html[lang=ar] h2, html[lang=ar] h3, html[lang=ar] h4{letter-spacing:0; line-height:1.25}
html[lang=ar] .wm{letter-spacing:-.025em}
.mb-burger{display:none}

/* mobile nav */
@media (max-width:760px){
  .mb-nav{position:fixed; inset:66px 0 auto 0; flex-direction:column; gap:0; background:var(--surface); border-bottom:1px solid var(--line); padding:8px 16px 14px; box-shadow:var(--shadow); transform:translateY(-130%); transition:transform .3s cubic-bezier(.2,.7,.2,1); margin:0}
  .mb-nav.open{transform:translateY(0)}
  .mb-nav a{padding:13px 10px; font-size:16px; border-radius:10px}
  .mb-burger{display:inline-flex}
  .wm{font-size:21px}
}

/* ---- Footer ---- */
@media (max-width:380px){
  .mb-header .bar{padding-inline:12px;gap:8px}
  .brand{gap:7px}
  .wm{font-size:18px}
  .hdr-tools{gap:4px}
  .hdr-tools .icon-btn{min-width:34px;padding-inline:8px}
  .hdr-tools .lang-sel{width:88px;padding-inline-end:23px}
}

.mb-footer{margin-top:56px; border-top:1px solid var(--line); background:var(--surface)}
.mb-footer .grid{display:flex; gap:28px; flex-wrap:wrap; justify-content:space-between; padding:30px 0}
.mb-footer .lic{max-width:46ch; font-size:14px; color:var(--fg-muted)}
.mb-footer .lic b{color:var(--fg); font-weight:600}
.mb-footer .disc{font-family:var(--mono); font-size:12px; color:var(--fg-faint); letter-spacing:.02em; max-width:42ch}
.ccby{display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:12px; border:1px solid var(--line-strong); border-radius:999px; padding:5px 11px; margin-bottom:10px}
.mb-footer .foot-link{display:inline-block; margin-top:8px; color:var(--accent); border-bottom:1px solid color-mix(in srgb,var(--accent) 35%, transparent)}
.mb-footer .foot-link:hover{border-bottom-color:var(--accent)}

/* ---- Cards / panels ---- */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l); box-shadow:var(--shadow)}
.panel{background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-m)}

/* ---- Badges ---- */
.badge{display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:11px; letter-spacing:.04em; padding:5px 10px; border-radius:999px; white-space:nowrap}
.badge.ver{background:color-mix(in srgb, var(--accent) 16%, var(--surface)); color:var(--accent); border:1px solid color-mix(in srgb, var(--accent) 40%, transparent)}
.badge.unver{background:color-mix(in srgb, var(--danger) 13%, var(--surface)); color:var(--danger); border:1px solid color-mix(in srgb, var(--danger) 35%, transparent)}
.badge.typ-moertel{background:color-mix(in srgb, var(--m-zement) 24%, var(--surface)); color:var(--fg); border:1px solid var(--line-strong)}
.badge.typ-farbe{background:color-mix(in srgb, var(--m-lehm) 22%, var(--surface)); color:var(--fg); border:1px solid var(--line-strong)}
.badge .dot{width:7px; height:7px; border-radius:50%}

/* ---- Inputs ---- */
label.fld{display:block; font-size:13px; color:var(--fg-muted); margin-bottom:7px; font-weight:500}
.select, .num{appearance:none; width:100%; font-family:var(--sans); font-size:16px; color:var(--fg);
  padding:13px 15px; border-radius:var(--r-s); border:1.5px solid var(--line-strong); background:var(--surface); min-height:var(--tap); transition:border-color .2s}
.select{padding-inline-end:42px; cursor:pointer; background-image:var(--caret); background-repeat:no-repeat; background-position:right 14px center}
.select:focus, .num:focus, .icon-btn:focus-visible, .seg-toggle button:focus-visible, .tab:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 55%, transparent); outline-offset:2px; border-color:var(--accent)}
.num.big{font-family:var(--mono); font-weight:600; font-size:22px}

/* segmented toggle */
.seg-toggle{display:inline-flex; background:var(--surface-2); border:1px solid var(--line-strong); border-radius:var(--r-s); padding:3px; gap:3px}
.seg-toggle button{font-family:var(--sans); font-size:13.5px; color:var(--fg-muted); background:transparent; border:0; padding:9px 13px; border-radius:6px; cursor:pointer; min-height:40px; transition:color .2s, background .2s}
.seg-toggle button[aria-pressed="true"]{background:var(--surface); color:var(--fg); box-shadow:0 1px 2px rgba(0,0,0,.08)}

/* ---- Signature core (vertikaler Bohrkern) ---- */
.mb-core{flex:0 0 auto; display:flex; flex-direction:column; overflow:hidden; border-radius:10px;
  border:1px solid var(--line-strong); background:var(--surface-2); box-shadow:inset 0 0 0 4px var(--surface)}
.mb-core .seg{position:relative; display:flex; align-items:center; justify-content:center; min-height:0; overflow:hidden}
.mb-core .seg .gloss{position:absolute; inset:0; background:linear-gradient(90deg,rgba(255,255,255,.16),rgba(0,0,0,.07)); pointer-events:none}
.mb-core .seg .pt{font-family:var(--mono); font-size:12px; font-weight:600; text-shadow:0 1px 2px rgba(0,0,0,.28)}

/* core legend rows */
.core-legend{display:flex; flex-direction:column}
.cl-row{display:grid; grid-template-columns:14px 1fr auto auto; gap:11px; align-items:center; padding:11px 0; border-bottom:1px dashed var(--line)}
.cl-row:last-child{border-bottom:0}
.cl-row .dot{width:13px; height:13px; border-radius:3px; border:1px solid var(--seg-stroke)}
.cl-row .nm{font-size:15px}
.cl-row .amt{font-family:var(--mono); font-size:16px; font-weight:600; text-align:end; letter-spacing:-.01em}
.cl-row .u{font-family:var(--mono); font-size:11px; color:var(--fg-muted)}
.cl-row.water .dot{background:var(--m-wasser)}
.cl-row.water .nm{color:var(--accent)}

/* ---- Tabs ---- */
.tabs{display:flex; gap:8px; flex-wrap:wrap}
.tab{flex:1 1 auto; min-width:200px; text-align:start; background:var(--surface); border:1.5px solid var(--line); border-radius:var(--r-m); padding:14px 16px; cursor:pointer; transition:border-color .2s, background .2s; color:var(--fg)}
.tab .t{font-family:var(--serif); font-size:19px}
.tab .s{font-size:13px; color:var(--fg-muted); margin-top:2px}
.tab[aria-selected="true"]{border-color:var(--accent); background:color-mix(in srgb,var(--accent) 8%, var(--surface))}
.tab[aria-selected="true"] .num-ix{color:var(--accent)}

/* result big numbers */
.bignum{font-family:var(--mono); font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums}

/* utility */
.muted{color:var(--fg-muted)}
.faint{color:var(--fg-faint)}
.kicker{font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-muted)}
.divider{height:1px; background:var(--line); border:0; margin:0}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

.skip{position:absolute; left:-999px; top:0; background:var(--fg); color:var(--bg); padding:10px 14px; border-radius:8px; z-index:100}
.skip:focus{left:12px; top:10px}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important}
}

/* ---- RTL (Arabisch): Layout spiegelt ueber dir="rtl" auf <html>; Zahlen, Mischungsverhaeltnisse und Rechnerwerte bleiben LTR ---- */
[dir=rtl] .lang-sel{background-position:10px 17px, 15px 17px}
[dir=rtl] .select{background-position:left 14px center}
[dir=rtl] .model-hint, [dir=rtl] .disc-note, [dir=rtl] .prin-list li{border-radius:var(--r-s) 0 0 var(--r-s)}
[dir=rtl] .mono, [dir=rtl] .num, [dir=rtl] .tnum, [dir=rtl] .bignum, [dir=rtl] .ratio, [dir=rtl] .dtable td, [dir=rtl] .cl-row .amt,
[dir=rtl] .cmp .barline .val, [dir=rtl] .tile .v, [dir=rtl] .erg-line .big, [dir=rtl] .ziel-alt, [dir=rtl] .result-head b,
[dir=rtl] .rcard .line, [dir=rtl] .map-tip .code, [dir=rtl] .count b, [dir=rtl] .ccby, [dir=rtl] .badge,
[dir=rtl] input[type=number], [dir=rtl] input[type=range]{direction:ltr; unicode-bidi:isolate}
[dir=rtl] .cl-row .amt, [dir=rtl] .dtable td{text-align:end}
[dir=rtl] .dtable td:first-child, [dir=rtl] .dtable th:first-child{text-align:start}