/* Bereich Laufrad: Speichenrechner und Wissensseiten (baut auf style.css und rechner/rechner.css auf) */
.lr-head, .lr { display: grid; grid-template-columns: 1fr 104px 104px; gap: 8px; align-items: center; padding-top: 10px; font-size: .95rem; line-height: 1.3; }
.lr-head b { font: 500 12px/1 var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--soft); text-align: center; }
.lr small { display: block; color: var(--soft); font-size: .8rem; }
.lr .in { width: auto; }
.lr .in i { min-width: 0; }
.lr select { text-align: center; }
.inputs .in.rim { width: 240px; max-width: 60%; }
.inputs .in.rim input { text-align: left; font-size: .9rem; padding-left: 10px; }
#wheel { display: block; width: 100%; max-width: 460px; height: auto; margin: 0 auto; }
svg .rim { fill: none; stroke: var(--soft); stroke-width: 3.5; }
svg .hub { fill: none; stroke: var(--soft); stroke-width: 1; }
svg .sl { stroke: #36506c; stroke-width: .9; }
svg .sr { stroke: #f2f9ff; stroke-width: .9; }
svg .nip { fill: #ffc24a; }
@media (max-width: 520px) { .lr-head, .lr { grid-template-columns: 1fr 86px 86px; } }
@media print { svg .sr { stroke: #1a5fb4; } svg .sl { stroke: #888; } }
.more-tbl { margin-top: 22px; }
.more-tbl td:first-child { color: var(--soft); white-space: normal; }
.site-header nav a.keep { color: var(--ink); }
@media (max-width: 760px) { .site-header nav a.keep2 { display: inline; } }
.note a, .hint a { color: var(--volt); }
/* Wissensseite */
.kb { max-width: 760px; padding-top: 70px; padding-bottom: 100px; }
.kb h1 { font: 300 clamp(2rem, 5.5vw, 3.4rem)/1.05 var(--display); text-transform: uppercase; color: var(--ink); margin-bottom: 22px; }
.kb h1 b { font-weight: 700; color: #fff; }
.kb h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); margin: 2.2em 0 .6em; }
.kb p, .kb ul, .kb ol, .kb table { margin-bottom: 1em; }
.kb ul, .kb ol { padding-left: 1.3em; }
.kb ul { list-style: disc; } .kb ol { list-style: decimal; }
.kb li { margin-bottom: .4em; }
.kb ul.tiles { list-style: none; padding-left: 0; }   /* Kacheln der Übersichten sind keine Aufzählung */
.kb ul.tiles li { margin-bottom: 0; }
.kb a { color: var(--volt); }
.kb .formel { font: 500 1.05rem/1.5 var(--display); color: #fff; padding: 14px 18px; background: var(--panel); border: 1px solid var(--rule); border-left: 2px solid var(--hot); }
/* Tabellen wie im Rechner (rechner.css), auch auf Seiten, die rechner.css nicht laden (Fragen, Funk, Astronomie) */
.kb table { border-collapse: collapse; font-size: .88rem; font-variant-numeric: tabular-nums; }
.kb th, .kb td { padding: 7px 10px; border-bottom: 1px solid var(--rule); }
.kb th { color: var(--soft); font-weight: 500; }
.kb table { width: auto; min-width: 60%; }
.kb th, .kb td { text-align: left; }
.kb table { width: 100%; }
.kb th, .kb td { white-space: normal; vertical-align: top; }
.kb td:first-child { width: 34%; color: var(--ink); }
/* Winkelzeichnungen */
.ang { display: grid; grid-template-columns: 1fr 2.4fr; gap: 10px; align-items: end; }
.ang svg { display: block; width: 100%; height: auto; }
.ang text { fill: var(--text); font: 6px "Segoe UI", system-ui, sans-serif; }
#cross text { font-size: 5.5px; }
.ang .ax { stroke: var(--soft); stroke-width: .4; stroke-dasharray: 2 2; opacity: .7; }
.ang .rimbox { fill: none; stroke: var(--soft); stroke-width: 1.2; }
.ang .hubbox { fill: none; stroke: var(--soft); stroke-width: 1.4; }
.ang .axle { fill: var(--soft); }
.ang .arcl { fill: none; stroke: #ffc24a; stroke-width: .7; opacity: .75; }
.ang .arcr { fill: none; stroke: #ffc24a; stroke-width: .7; }
.ang .sl, .ang .sr { stroke-width: 1.3; }
.ang-legend { margin-top: 10px; color: var(--soft); font-size: .88rem; line-height: 1.6; }
.ang-legend span { display: block; }
.ang-legend b { color: var(--ink); font-weight: 600; display: inline-block; min-width: 3.6em; }
#plane text { font-size: 7px; fill: #ffc24a; }
/* Nippelskizzen in der Wissenstabelle */
.kb td.sk { width: 112px; padding: 8px 10px 8px 0; }
.kb td.sk + td { width: 28%; color: var(--ink); }
.kb td.sk svg { display: block; }
.sk .np { fill: rgba(255, 194, 74, .22); stroke: #ffc24a; stroke-width: 1; }
.sk .npt { fill: none; stroke: #ffc24a; stroke-width: .7; }
.sk .sp { fill: #dfe9f3; }
.sk .spt { fill: none; stroke: #dfe9f3; stroke-width: .8; }
.sk .slot { stroke: #ffc24a; stroke-width: .7; stroke-dasharray: 2 2; }
.sk .tip { stroke: #ff6b57; stroke-width: 1.6; }
.sk-note { color: var(--soft); font-size: .88rem; }
.sk .bed { fill: #6f7c8f; stroke: #aab6c6; stroke-width: .6; }
.sk .lbl { fill: var(--text); font: 6.2px "Segoe UI", system-ui, sans-serif; }
@media (max-width: 640px) { .kb td.sk { width: 120px; } .kb td.sk svg { width: 112px; height: auto; } }
/* Einspeichhilfe: erste Speiche */
#start { display: block; width: 100%; max-width: 460px; height: auto; margin: 0 auto; }
#start-fig[hidden] { display: none; }
#start .ax { stroke: var(--soft); stroke-width: .5; stroke-dasharray: 2 2; }
#start .valve { fill: var(--bg); stroke: #ff6b57; stroke-width: 1.4; }
#start .logo { fill: #1a2233; stroke: var(--soft); stroke-width: .6; }
#start .logot { fill: var(--ink); font: 700 5px var(--display); letter-spacing: .08em; }
#start .fh { fill: var(--soft); }
#start .keyhole { fill: #ffc24a; }
#start .key { stroke: #ffc24a; stroke-width: 1.8; }
#start .grp { stroke: #f2f9ff; stroke-width: .6; opacity: .35; }
#start text { fill: var(--text); font: 6.5px "Segoe UI", system-ui, sans-serif; }
#start .cnt { fill: #ffc24a; font-weight: 700; }
.steps { margin: 16px 0 0; padding-left: 1.4em; list-style: decimal; color: var(--text); font-size: .95rem; }
.steps li { margin-bottom: .5em; }
.steps b { color: #fff; }
/* Wissensdatenbank: Themenleiste und Kacheln */
/* Reiter: die Seiten einer Ebene nebeneinander, die aktuelle unterstrichen. Zur Übersicht führt der Verweis oben rechts. */
.kb-nav { display: flex; flex-wrap: wrap; gap: 0 2px; margin-bottom: 34px; border-bottom: 1px solid var(--rule); font-size: .85rem; line-height: 1.3; }
.kb-nav a, .kb-nav b { padding: 10px 14px; margin-bottom: -1px; border-bottom: 2px solid transparent; text-decoration: none; }
.kb-nav a { color: var(--soft); }
.kb-nav a:hover, .kb-nav a:focus-visible { color: #fff; border-bottom-color: var(--rule); }
.kb-nav b { color: #fff; font-weight: 600; border-bottom-color: var(--volt); }
.kb-nav .zu { padding: 10px 14px; margin-bottom: -1px; border-bottom: 2px solid transparent; }
.kb .kb-tiles { list-style: none; padding: 0; display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.kb-tiles li { margin: 0; background: var(--panel); }
.kb-tiles li > a, .kb-tiles li.soon { display: block; padding: 20px 22px; text-decoration: none; color: var(--text); }
.kb-tiles b { display: block; font: 500 1.2rem/1.2 var(--display); text-transform: uppercase; letter-spacing: .04em; color: #fff; }
.kb-tiles span { display: block; margin-top: 4px; color: var(--soft); font-size: .92rem; }
.kb-tiles a:hover b { text-shadow: 0 0 22px rgba(159, 212, 255, .7); }
.kb-tiles .soon b { color: var(--soft); }
.kb-tiles .soon i { font-style: normal; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--hot); }
.kb h3 { font: 500 1.15rem/1.3 var(--display); letter-spacing: .04em; color: var(--ink); margin: 1.6em 0 .5em; }

/* Zeichnungen der Wissensseiten */
.kb figure.fig { margin: 1.6em 0; padding: 18px 18px 14px; background: var(--panel); border: 1px solid var(--rule); }
.kb figure.fig svg { display: block; width: 100%; height: auto; max-width: 640px; margin: 0 auto; }
.kb figure.fig figcaption { margin-top: 12px; color: var(--soft); font-size: .88rem; line-height: 1.5; }
.fig .f-rim { fill: none; stroke: #aab6c6; stroke-width: 2; }
.fig .f-rimfill { fill: #6f7c8f; stroke: #aab6c6; stroke-width: 1; }
.fig .f-hub { fill: #1a2333; stroke: #aab6c6; stroke-width: 1.2; }
.fig .f-spoke { fill: none; stroke: #dfe9f3; stroke-width: 1.2; }
.fig .f-spoke2 { fill: none; stroke: #5d7896; stroke-width: 1.2; }
.fig .f-volt { fill: none; stroke: #9fd4ff; stroke-width: 1.6; }
.fig .f-hot { fill: none; stroke: #ffc24a; stroke-width: 1.6; }
.fig .f-hotfill { fill: rgba(255, 194, 74, .22); stroke: #ffc24a; stroke-width: 1; }
.fig .f-voltfill { fill: rgba(159, 212, 255, .16); stroke: #9fd4ff; stroke-width: 1; }
.fig .f-warn { fill: none; stroke: #ff6b57; stroke-width: 1.6; }
.fig .f-tire { fill: #1a2333; stroke: #dfe9f3; stroke-width: 1.2; }
.fig .f-ground { stroke: #6f7c8f; stroke-width: 1.5; }
.fig .f-dash { fill: none; stroke: #6f7c8f; stroke-width: 1; stroke-dasharray: 4 4; }
.fig .f-dim { fill: none; stroke: #8fa0b5; stroke-width: .8; }
.fig text { fill: #c9d4e2; font: 13px "Segoe UI", system-ui, sans-serif; }
.fig text.f-t-hot { fill: #ffc24a; } .fig text.f-t-volt { fill: #9fd4ff; } .fig text.f-t-soft { fill: #8fa0b5; font-size: 11.5px; }
.fig .f-spokefill { fill: #dfe9f3; stroke: none; }

/* Bereich Einstellen: Rechnerseite breiter als die Textseiten */
.kb.kb-calc { max-width: 1040px; }
.kb-calc .calc-grid { margin: 10px 0 30px; }
.kb-calc h2, .kb-calc > p, .kb-calc > ul, .kb-calc > table, .kb-calc > .note { max-width: 760px; }
.kb .kpis { list-style: none; padding-left: 0; }
.kb .kpis li { margin-bottom: 0; }
.kb-calc .inputs .check { justify-content: space-between; }
/* Fotos aus der Redaktion */
.kb figure.foto { padding: 0; background: none; border: 0; }
.kb figure.foto img { display: block; width: 100%; height: auto; border: 1px solid var(--rule); }
.kb figure.foto figcaption { margin-top: 8px; }