/* bausteine.css – gemeinsame Bausteine für alle Seiten (Tabellen, Rechner, Karten, Zeitleisten, Prüflisten).
   Angelegt 10.11.2026 aus den Werkstatt-Entwürfen. Regeln: docs/DESIGN-REGELN.md */
.pp-toc{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.pp-toc a{background:var(--surface);border:1px solid var(--rule);border-radius:99px;padding:6px 14px;font-size:14px;text-decoration:none;color:var(--ink)}
.pp-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.pp-4 div{background:var(--surface);border:1px solid var(--rule);border-radius:16px;padding:18px}
.pp-4 b{display:block;font-size:17px;margin-bottom:6px}
.pp-calc{background:var(--surface);border:1px solid var(--rule);border-radius:18px;padding:24px;display:grid;grid-template-columns:1fr 1fr;gap:24px}
.pp-calc label{display:block;font-size:14px;margin:10px 0 4px}
.pp-calc select,.pp-calc input[type=number]{width:100%;padding:10px;border:1px solid var(--rule);border-radius:10px;font:inherit}
.pp-calc .row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--rule);font-size:15px}
.pp-calc .sum{font-size:22px;font-weight:700;border-bottom:0}
.pp-tbl{width:100%;border-collapse:collapse;font-size:15px}
.pp-tbl th,.pp-tbl td{border-bottom:1px solid var(--rule);padding:10px 8px;text-align:left;vertical-align:top}
.pp-tbl th{background:var(--tint)}
.pp-check li{list-style:none;position:relative;padding-left:30px;margin:8px 0}
.pp-check li:before{content:"☐";position:absolute;left:0;font-size:18px;line-height:1}
.pp-src{font-size:13px;color:var(--ink-mute)}
.pp-blick{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 28px;margin-top:16px}
.pp-blick li{list-style:none;position:relative;padding-left:28px}
.pp-blick li:before{content:"✓";position:absolute;left:0;font-weight:700;color:var(--violet,#5b3fa0)}
.ts-day{display:grid;grid-template-columns:repeat(24,1fr);gap:2px;margin-top:18px}
.ts-day span{height:46px;border-radius:4px}
.ts-hrs{display:grid;grid-template-columns:repeat(24,1fr);font-size:11px;color:var(--ink-mute);margin-top:4px}
.ts-a{background:#5b3fa0}
.ts-p{background:#c9b8ec}
.ts-f{background:#e8e1f5}
.ts-n{background:#2e283a}
.ts-leg{display:flex;flex-wrap:wrap;gap:16px;margin-top:14px;font-size:14px}
.ts-leg i{display:inline-block;width:14px;height:14px;border-radius:3px;margin-right:6px;vertical-align:-2px}
.pp-sit{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.pp-sit div{background:var(--surface);border:1px solid var(--rule);border-radius:16px;padding:18px}
.pp-sit b{display:block;font-size:17px;margin-bottom:6px}
.pp-tbl tr.hl td{background:var(--tint)}
.wz{background:var(--surface);border:1px solid var(--rule);border-radius:18px;padding:24px;display:grid;grid-template-columns:1fr 1fr;gap:28px}
.wz fieldset{border:0;padding:0;margin:0 0 16px}
.wz legend{font-weight:700;margin-bottom:6px}
.wz label{display:block;padding:7px 10px;border:1px solid var(--rule);border-radius:10px;margin:6px 0;cursor:pointer;font-size:15px}
.wz label:has(input:checked){border-color:#5b3fa0;background:var(--tint)}
.wz-out{background:var(--tint);border-radius:14px;padding:20px}
.wz-out h3{font-size:20px;margin-bottom:8px}
.wz-out ul{margin-top:8px}
.pp-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.vm{display:grid;grid-template-columns:1fr 120px 1fr;gap:10px;align-items:center;max-width:860px;margin:26px auto 0}
.vm .n{background:var(--surface);border:2px solid var(--rule);border-radius:16px;padding:16px;text-align:center}
.vm .n b{display:block;font-size:17px}
.vm .n small{display:block;font-size:13px;color:var(--ink-mute);margin-top:4px}
.vm .n.d{border-color:#5b3fa0}
.vm .a{text-align:center;font-size:12px;color:var(--ink-mute);line-height:1.3}
.vm .a:before{content:"⟷";display:block;font-size:22px;color:#5b3fa0}
.vm .v{text-align:center;font-size:12px;color:var(--ink-mute)}
.vm .v:before{content:"↕";display:block;font-size:22px;color:#5b3fa0}
.tm{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tm div{background:var(--surface);border:1px solid var(--rule);border-radius:16px;padding:18px}
.tm b{display:block;font-size:17px}
.tm small{display:block;color:var(--ink-mute);margin:2px 0 8px}
.n-sg{color:#1b7a3a;font-weight:700}
.n-g{color:#2f8f4e}
.n-b{color:#8a6d00}
.n-a{color:#b35c00}
.n-m{color:#b3261e;font-weight:700}
.f-h{background:#e6f4ea}
.f-b{background:#fff4d6}
.f-w{background:#fde7e5}
.tl{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:18px}
.tl div{background:var(--surface);border:1px solid var(--rule);border-radius:14px;padding:16px}
.tl b{display:block;font-size:20px;color:#5b3fa0}
.st{background:var(--surface);border:1px solid var(--rule);border-radius:18px;padding:22px}
.st fieldset{border:0;margin:0 0 14px;padding:0}
.st legend{font-weight:700;margin-bottom:6px}
.st label{display:block;padding:5px 0;font-size:15px}
.st-out{margin-top:10px;padding:16px;border-radius:12px;font-weight:600}
.w-only{border:2px dashed #b3261e;border-radius:18px;padding:22px;position:relative}
.w-only:before{content:"WERKSTATT · nur mit Freigabe von Oskar";position:absolute;top:-12px;left:18px;background:#b3261e;color:#fff;font-size:12px;font-weight:700;padding:2px 10px;border-radius:99px}
.w-open{background:#fde7e5;padding:0 4px;border-radius:4px}
.kas{counter-reset:k;display:grid;gap:12px;margin-top:22px}
.kas div{counter-increment:k;display:grid;grid-template-columns:52px 1fr;gap:14px;align-items:start;background:var(--surface);border:1px solid var(--rule);border-radius:16px;padding:16px}
.kas div:before{content:counter(k);width:42px;height:42px;border-radius:50%;background:#5b3fa0;color:#fff;font-weight:700;font-size:19px;display:flex;align-items:center;justify-content:center}
.kas b{display:block;font-size:17px}
.lr{background:var(--surface);border:1px solid var(--rule);border-radius:18px;padding:24px;display:grid;grid-template-columns:1fr 1fr;gap:28px}
.lr label{display:block;font-weight:600;margin:12px 0 4px}
.lr select,.lr input[type=number]{width:100%;padding:9px 10px;border:1px solid var(--rule);border-radius:10px;font-size:16px}
.lr-out{background:var(--tint);border-radius:14px;padding:18px}
.lr-out .big{font-size:30px;font-weight:700;color:#5b3fa0}
.lr-row{display:flex;justify-content:space-between;border-bottom:1px solid var(--rule);padding:6px 0;font-size:15px}
.yrs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:16px}
.yrs div{background:var(--surface);border:1px solid var(--rule);border-radius:14px;padding:14px;text-align:center}
.yrs b{display:block;font-size:22px;color:#5b3fa0}
.pp-bar{display:flex;border-radius:12px;overflow:hidden;margin-top:18px;font-size:14px;color:#fff;font-weight:600}
.pp-bar div{padding:14px 12px}
.pp-bar small{display:block;font-weight:400;opacity:.9}
.lr label.cb{font-weight:400;display:flex;gap:8px;align-items:flex-start}
@media(max-width:900px){.pp-4{grid-template-columns:1fr 1fr}}
@media(max-width:860px){.pp-4{grid-template-columns:1fr 1fr}.pp-sit{grid-template-columns:1fr 1fr}.pp-4,.pp-3{grid-template-columns:1fr 1fr}.tm{grid-template-columns:1fr}}
@media(max-width:760px){.pp-calc{grid-template-columns:1fr}.pp-blick{grid-template-columns:1fr}.wz{grid-template-columns:1fr}.tl{grid-template-columns:1fr 1fr}.lr{grid-template-columns:1fr}}
@media(max-width:620px){.ts-hrs span:nth-child(odd){visibility:hidden}.ts-day span{height:34px}.vm{grid-template-columns:1fr}.vm .a:before{content:"↕"}}
@media(max-width:560px){.pp-4{grid-template-columns:1fr}.yrs{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.pp-4{grid-template-columns:1fr}.pp-sit{grid-template-columns:1fr}.pp-4,.pp-3{grid-template-columns:1fr}}
/* Inhaltsleiste (includes/inhalt-nav.php) */
.inav-ph{position:relative}
.inav{background:var(--surface);border-bottom:1px solid var(--rule);z-index:45}
.inav-in{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding:10px 0;-webkit-overflow-scrolling:touch}
.inav-in::-webkit-scrollbar{display:none}
.inav a{flex:none;font-size:14px;line-height:1;padding:8px 13px;border-radius:99px;color:var(--ink-soft);text-decoration:none;white-space:nowrap;font-weight:500}
.inav a:hover{background:var(--tint);color:var(--ink);text-decoration:none}
.inav a.on{background:#5b3fa0;color:#fff}
.inav.inav-fix{position:fixed;left:0;right:0;box-shadow:0 8px 20px rgba(30,20,50,.10);animation:inavIn .18s ease-out}
@keyframes inavIn{from{transform:translateY(-100%);opacity:0}to{transform:none;opacity:1}}
.inav-meta{font-size:13px;color:var(--ink-mute);margin:14px 0 0}
/* Kosten auf einen Blick */
.kz{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:26px}
.kz div{background:var(--surface);border:1px solid var(--rule);border-radius:18px;padding:20px 22px}
.kz b{display:block;font-size:34px;line-height:1.1;letter-spacing:-.02em;color:var(--ink)}
.kz span{display:block;font-size:14px;color:var(--ink-soft);margin-top:6px}
.kz .kz-hi{background:#3d5419;border-color:#3d5419}.kz .kz-hi b,.kz .kz-hi span{color:#fff}
@media(max-width:760px){.kz{grid-template-columns:1fr}.kz b{font-size:28px}}
/* Rechner (Werkzeug) */
.calc2{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);border:1px solid var(--rule);border-radius:22px;overflow:hidden;background:#fff;box-shadow:0 10px 30px rgba(30,20,50,.06)}
.calc2-in{padding:28px}
.calc2-in .lbl{display:block;font-weight:700;font-size:15px;margin:0 0 10px}
.calc2-in .lbl+.lbl,.calc2-in .grp{margin-top:22px}
.seg{display:flex;flex-wrap:wrap;gap:8px}
.seg label{position:relative;cursor:pointer}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg span{display:block;padding:10px 16px;border:1px solid var(--rule);border-radius:12px;font-weight:600;font-size:15px;background:#fff}
.seg input:checked+span{background:#5b3fa0;border-color:#5b3fa0;color:#fff}
.seg input:focus-visible+span{outline:2px solid #5b3fa0;outline-offset:2px}
.money{display:flex;align-items:center;border:1px solid var(--rule);border-radius:12px;background:#fff;overflow:hidden}
.money input{border:0;flex:1;padding:12px 14px;font-size:18px;font-weight:600;min-width:0;background:transparent}
.money em{font-style:normal;padding:0 14px;color:var(--ink-mute);font-weight:600}
.calc2 input[type=range]{width:100%;margin-top:10px;accent-color:#5b3fa0}
.sw{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--rule);cursor:pointer;font-size:15px}
.sw:last-child{border-bottom:0}
.sw input{position:absolute;opacity:0}
.sw i{flex:none;width:40px;height:24px;border-radius:99px;background:#d9d4e2;position:relative;transition:background .15s;margin-top:-1px}
.sw i:after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .15s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.sw input:checked+i{background:#5b3fa0}.sw input:checked+i:after{transform:translateX(16px)}
.sw input:focus-visible+i{outline:2px solid #5b3fa0;outline-offset:2px}
.calc2-out{background:linear-gradient(160deg,#3b2366,#5b3fa0);color:#fff;padding:28px;display:flex;flex-direction:column}
.calc2-out .big{font-size:52px;font-weight:800;letter-spacing:-.03em;line-height:1;margin:6px 0 4px}
.calc2-out .cap{font-size:14px;opacity:.85}
.calc2-out .rows{margin-top:20px;border-top:1px solid rgba(255,255,255,.2)}
.calc2-out .r{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.14);font-size:15px}
.calc2-out .r strong{font-weight:700}
.cmpbar{margin-top:20px}
.cmpbar div{display:flex;align-items:center;gap:10px;font-size:13px;margin-top:8px}
.cmpbar span{flex:none;width:92px;opacity:.9}
.cmpbar b{display:block;height:12px;border-radius:99px;background:#a6c66a;transition:width .25s}
.cmpbar .heim b{background:rgba(255,255,255,.45)}
.calc2-out .pp-src{color:rgba(255,255,255,.75);margin-top:14px}
.calc2-out a.go{margin-top:auto;padding-top:18px;color:#fff;font-weight:700}
@media(max-width:860px){.calc2{grid-template-columns:minmax(0,1fr)}.calc2-in,.calc2-out{padding:22px 18px}.money em{padding:0 10px;font-size:14px}.calc2-out .big{font-size:44px}}
.kt-nowrap td,.kt-nowrap th{white-space:nowrap}.kt-nowrap th{white-space:normal;min-width:90px}
/* Inhaltsleiste: auf großen Bildschirmen umbrechen statt abschneiden, mobil wischen */
@media(min-width:761px){.inav-in{flex-wrap:wrap;overflow:visible;row-gap:4px}}
/* Kennzahlen-Leiste: nie breiter als der Bildschirm */
.kpi-row{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:700px){.kpi-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
.kpi-cell{min-width:0}
/* Rechner: grüner Angebots-Button */
.calc2-out .btn{margin-top:auto;align-self:flex-start}
.calc2-out .pp-src{margin-bottom:18px}
/* Mobil: Spalten-Kästen nie breiter als der Bildschirm */
.grid>*{min-width:0}
.pp-tbl td,.pp-tbl th{overflow-wrap:anywhere;hyphens:auto}
.calc2-out p{color:#fff}.calc2-out p.pp-src{color:rgba(255,255,255,.75)}.calc2-out strong{color:#fff}