/* glasfaseratlas.com — «Trassenplan»: лист проекта прокладки оптики (консилиум дизайна 11.10.2026, DIZAYN-REESTR.md).
   Бумага чертежа, тушь, оранжевая защитная трубка (Leerrohr) — только графика, никогда не текст. Штамп-Schriftfeld вместо плиток,
   линейки вместо карточек, углы 0, без теней. Шрифты системные (0 КБ), ни одного внешнего запроса.
   Ширина трубок — классами .w0…w100: CSP запрещает атрибут style. Контраст текста ≥ 4,5 (тушь-3 6,2:1), трубки ≥ 3 (3,35:1). */
:root {
  color-scheme: light;
  --papier: #f6f8f5; --tusche: #10231c; --tusche-2: #344a41; --tusche-3: #4f6159;
  --leitung: #0d5c3f; --leitung-d: #0a4630; --leerrohr: #e8590c; --rohr-leer: #e9efe9; --hl: #e3ece6;
  --warn: #9a3a06; --warn-w: #fdebd9; --linie: #c9d3cc;
  --wrap: 1040px;
  --titel: Futura, "Futura PT", "Century Gothic", "URW Gothic", "URW Gothic L", "Avenir Next", system-ui, sans-serif;
  --text: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
}
*, *::before, *::after { box-sizing: border-box }
html { -webkit-text-size-adjust: 100% }
body { margin: 0; background: var(--papier); color: var(--tusche); font: 17px/1.6 var(--text);
  display: flex; flex-direction: column; min-height: 100vh }
main { flex: 1 0 auto }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; width: 100% }
a { color: var(--leitung); text-underline-offset: 3px; text-decoration-thickness: 1px }
a:hover { color: var(--leitung-d); text-decoration-color: var(--leerrohr); text-decoration-thickness: 2px }
:focus-visible { outline: 3px solid var(--leerrohr); outline-offset: 2px }
.skip { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
a.skip:focus { position: fixed; top: 8px; left: 8px; width: auto; height: auto; clip: auto; z-index: 9;
  background: var(--papier); padding: 10px 14px; border: 2px solid var(--tusche) }

/* Шапка: линия туши и пунктир трассы под ней */
.top { border-bottom: 1px solid var(--tusche); position: relative; margin-bottom: 6px }
.top::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 4px;
  background: repeating-linear-gradient(90deg, var(--leerrohr) 0 24px, transparent 24px 30px) }
.top-in { display: flex; align-items: center; gap: 0 28px; min-height: 64px; flex-wrap: wrap }
.brand { display: flex; align-items: center; gap: 10px; font: 700 21px/1 var(--titel); letter-spacing: -.01em; color: var(--tusche);
  text-decoration: none; white-space: nowrap }
.brand:hover { color: var(--tusche) }
.brand b { font-weight: 400 }
.brand img { display: block }
.mainnav { display: flex; gap: 0 22px; font-size: 15px; flex-wrap: wrap; margin-left: auto }
.mainnav a { color: var(--tusche-2); text-decoration: none; font-weight: 600; display: inline-flex; align-items: center;
  min-height: 44px; border-bottom: 3px solid transparent }
.mainnav a:hover { color: var(--leitung) }
.mainnav a[aria-current] { color: var(--tusche); border-bottom-color: var(--leerrohr) }

/* Поиск */
.suche { margin: 18px 0 0; max-width: 560px }
.suche label { display: block; font: 600 12px/1.4 var(--text); text-transform: uppercase; letter-spacing: .08em; color: var(--tusche-3); margin-bottom: 4px }
.suche-feld { display: flex }
.suche input { flex: 1; min-width: 0; font: inherit; font-size: 16px; color: var(--tusche); background: #fff; border: 1px solid var(--tusche);
  border-right: 0; border-radius: 0; padding: 0 12px; min-height: 46px }
.suche input::placeholder { color: var(--tusche-3) }
.suche button { font: 600 15px/1 var(--text); color: var(--papier); background: var(--tusche); border: 1px solid var(--tusche); border-radius: 0;
  padding: 0 18px; min-height: 46px; cursor: pointer }
.suche button:hover { background: var(--leitung) }
.suche-kurz { margin: 0; width: 260px }
.suche-kurz input, .suche-kurz button { min-height: 44px; font-size: 15px }

.crumbs { padding-top: 12px }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0 6px; margin: 0; padding: 0; font-size: 14px; color: var(--tusche-3) }
.crumbs li { white-space: nowrap }
.crumbs li + li::before { content: "›"; margin-right: 6px }
.crumbs a { color: var(--tusche-3); display: inline-block; padding: 11px 0 }
.crumbs span { display: inline-block; padding: 11px 0 }

main { padding-top: 8px; padding-bottom: 48px }
h1, h2, h3 { font-family: var(--titel) }
h1 { font-size: 2.15rem; line-height: 1.15; letter-spacing: -.01em; font-weight: 700; margin: .5em 0 .4em; max-width: 860px }
/* «Муфта»: линейка туши над h2 и оранжевый квадрат в её начале */
h2 { font-size: 1.32rem; line-height: 1.3; font-weight: 700; margin: 0 0 .6em; padding-top: 14px; position: relative;
  border-top: 1px solid var(--tusche) }
h2::before { content: ""; position: absolute; left: 0; top: -6px; width: 10px; height: 10px; background: var(--leerrohr) }
.adresse h2 { border-top: 0; padding-top: 0 }
.adresse h2::before { display: none }
h3 { font-size: 1.05rem; margin: .4em 0 .4em }
section, .adresse { margin-top: 2.6em }
.lead-p { font-size: 1.1rem; color: var(--tusche-2); max-width: 800px }
p, ul { max-width: 800px }
.klein { font-size: 14px; color: var(--tusche-3) }
.grau { color: var(--tusche-3); font-weight: 400; font-size: .9em }
.nur-m { display: none }

/* Schriftfeld: штамп чертежа вместо плиток */
.stempel { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin: 24px 0 0; border: 1px solid var(--tusche);
  background: #fff }
.stempel .feld { padding: 10px 14px 12px; border-right: 1px solid var(--tusche); display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 2px }
.stempel .feld:last-child { border-right: 0 }
.stempel dt { font-size: 12px; line-height: 1.35; text-transform: uppercase; letter-spacing: .07em; color: var(--tusche-3) }
.stempel dd { margin: 0; font: 700 1.9rem/1.1 var(--titel); font-variant-numeric: tabular-nums; color: var(--tusche) }
.stempel .feld-quelle dd { font-size: 1.25rem; padding-top: .35em }
.stempel .feld-quelle dd span { font: 600 13px/1 var(--text); letter-spacing: .06em; color: var(--tusche-3); margin-left: 4px }

table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 15.5px }
th, td { text-align: left; padding: 8px 10px 8px 0; border-bottom: 1px solid var(--linie); vertical-align: middle }
thead th { font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--tusche-3); font-weight: 650;
  border-bottom: 1px solid var(--tusche) }
tbody th { font-weight: 600 }
td.num, th.num { text-align: right; width: 3em; padding-right: 14px; color: var(--tusche-3) }
tr.selbst, tr:target { background: var(--hl) }
tr:target th { box-shadow: inset 4px 0 0 var(--leerrohr); padding-left: 10px }
tr.auff td { background: var(--warn-w) }
.hinweis { font-size: 12.5px; color: var(--warn); font-weight: 600; margin-left: 4px; white-space: nowrap }
/* Ссылки в таблицах и списках — без подчёркивания, касание на всю высоту строки */
tbody th a { color: var(--leitung); text-decoration: none; padding: 4px 0; min-height: 36px; display: flex; align-items: center }
tbody th a:hover { text-decoration: underline; text-decoration-color: var(--leerrohr) }
tbody tr { position: relative }
tbody th a::after { content: ""; position: absolute; inset: 0 }
tbody tr:hover { background: var(--hl) }
tbody tr:has(a):hover th a { text-decoration: underline; text-decoration-color: var(--leerrohr) }
td:has(.bar) { white-space: nowrap }
/* Трубка Leerrohr: рамка туши, оранжевая заливка, деления 25/50/75 % */
td .bar { display: inline-block; vertical-align: middle; width: 120px; height: 10px; margin-right: 8px; position: relative;
  border: 1px solid var(--tusche-3);
  background: linear-gradient(90deg, transparent calc(25% - .5px), var(--linie) calc(25% - .5px) calc(25% + .5px), transparent calc(25% + .5px) calc(50% - .5px),
    var(--linie) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px) calc(75% - .5px), var(--linie) calc(75% - .5px) calc(75% + .5px), transparent calc(75% + .5px)),
    var(--rohr-leer) }
.bar > span { display: block; height: 100%; background: var(--leerrohr) }
.bar-auff > span { background: repeating-linear-gradient(45deg, var(--leerrohr) 0 3px, transparent 3px 6px) }
.gem tbody th { font-weight: 500 }

.zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px }
.zwei > section { margin-top: 2.6em }
.liste { padding-left: 1.8em; margin: 0; color: var(--tusche-3); font-variant-numeric: tabular-nums }
.liste li { border-bottom: 1px solid var(--linie) }
.liste li a { display: flex; align-items: center; gap: 8px; min-height: 44px; text-decoration: none; color: var(--leitung) }
.liste li a:hover { text-decoration: underline; text-decoration-color: var(--leerrohr) }
.liste .wert { margin-left: auto; color: var(--tusche-2); padding-left: 10px; white-space: nowrap }
.chips { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; max-width: none; margin: .6em 0 0 }
.chips a { display: inline-flex; align-items: center; min-height: 44px; border: 1px solid var(--tusche-3); padding: 0 12px; text-decoration: none;
  color: var(--tusche); background: #fff }
.chips a:hover { border-color: var(--leerrohr); color: var(--leitung) }
.chips .wert { color: var(--tusche-3); padding-left: 6px; font-size: .9em }
.treffer { list-style: none; padding: 0 }
.treffer li { border-bottom: 1px solid var(--linie); padding: 6px 0 }
.treffer a { font-weight: 600; display: inline-flex; min-height: 36px; align-items: center }
.knopf { display: inline-flex; align-items: center; min-height: 46px; border: 2px solid var(--leitung); color: var(--leitung); text-decoration: none;
  font-weight: 650; padding: 0 18px; margin-top: 1.2em; background: #fff }
.knopf:hover { background: var(--leitung); color: #fff }

.adresse { border: 1px solid var(--tusche); border-left: 4px solid var(--leerrohr); padding: 16px 20px; margin-top: 1.6em; background: #fff }
.adresse h2 { font-size: 1.1rem; margin-bottom: .3em }
.adresse p { margin: 0 }

.foot { border-top: 1px solid var(--tusche); padding: 24px 0 32px; font-size: 14px; color: var(--tusche-2); background: #fff }
.foot-nav { display: flex; flex-wrap: wrap; gap: 0 20px; margin-bottom: 10px }
.foot-nav a { color: var(--tusche); display: inline-flex; align-items: center; min-height: 44px }
.foot p { max-width: 860px; margin: .4em 0 }
.lic a { color: var(--tusche-2) }

@media (max-width: 720px) {
  body { font-size: 16px }
  h1 { font-size: 1.6rem }
  .zwei { grid-template-columns: 1fr }
  .opt { display: none }
  .nur-m { display: inline }
  td .bar { width: 44px }
  th, td { padding-right: 6px }
  .mainnav { margin-left: 0; gap: 0 18px }
  .suche-kurz { width: 100%; padding-bottom: 10px }
  .stempel { grid-template-columns: 1fr 1fr }
  .stempel .feld { border-bottom: 1px solid var(--tusche) }
  .stempel .feld:nth-child(2n) { border-right: 0 }
  .stempel .feld:nth-last-child(-n+2):nth-child(2n+1), .stempel .feld:last-child { border-bottom: 0 }
  .stempel dd { font-size: 1.45rem }
  .knopf { display: flex; justify-content: center }
}
.w0{width:0%}.w1{width:1%}.w2{width:2%}.w3{width:3%}.w4{width:4%}.w5{width:5%}.w6{width:6%}.w7{width:7%}.w8{width:8%}.w9{width:9%}
.w10{width:10%}.w11{width:11%}.w12{width:12%}.w13{width:13%}.w14{width:14%}.w15{width:15%}.w16{width:16%}.w17{width:17%}.w18{width:18%}.w19{width:19%}
.w20{width:20%}.w21{width:21%}.w22{width:22%}.w23{width:23%}.w24{width:24%}.w25{width:25%}.w26{width:26%}.w27{width:27%}.w28{width:28%}.w29{width:29%}
.w30{width:30%}.w31{width:31%}.w32{width:32%}.w33{width:33%}.w34{width:34%}.w35{width:35%}.w36{width:36%}.w37{width:37%}.w38{width:38%}.w39{width:39%}
.w40{width:40%}.w41{width:41%}.w42{width:42%}.w43{width:43%}.w44{width:44%}.w45{width:45%}.w46{width:46%}.w47{width:47%}.w48{width:48%}.w49{width:49%}
.w50{width:50%}.w51{width:51%}.w52{width:52%}.w53{width:53%}.w54{width:54%}.w55{width:55%}.w56{width:56%}.w57{width:57%}.w58{width:58%}.w59{width:59%}
.w60{width:60%}.w61{width:61%}.w62{width:62%}.w63{width:63%}.w64{width:64%}.w65{width:65%}.w66{width:66%}.w67{width:67%}.w68{width:68%}.w69{width:69%}
.w70{width:70%}.w71{width:71%}.w72{width:72%}.w73{width:73%}.w74{width:74%}.w75{width:75%}.w76{width:76%}.w77{width:77%}.w78{width:78%}.w79{width:79%}
.w80{width:80%}.w81{width:81%}.w82{width:82%}.w83{width:83%}.w84{width:84%}.w85{width:85%}.w86{width:86%}.w87{width:87%}.w88{width:88%}.w89{width:89%}
.w90{width:90%}.w91{width:91%}.w92{width:92%}.w93{width:93%}.w94{width:94%}.w95{width:95%}.w96{width:96%}.w97{width:97%}.w98{width:98%}.w99{width:99%}
.w100{width:100%}