/* ═══════════════════════════════════════════════════════════════ Weitere Portal-Ansichten: Tacho-Fristen und Berichte. Wie die Karte echtes HTML, damit nichts unscharf oder erfunden ist. ═══════════════════════════════════════════════════════════════ */ .panel{background:oklch(0.205 0.030 252);border:1px solid var(--line); box-shadow:0 30px 70px oklch(0.08 0.02 252 / .45);overflow:hidden} .panel-bar{display:flex;align-items:center;gap:12px;padding:12px 16px; border-bottom:1px solid var(--line);background:oklch(0.175 0.028 252)} .panel-bar p{font-family:var(--mono);font-size:11px;letter-spacing:.14em; text-transform:uppercase;color:var(--muted)} .panel-bar .tag{margin-left:auto;font-family:var(--mono);font-size:10px; letter-spacing:.1em;color:var(--accent);border:1px solid var(--line); padding:4px 8px} /* ── Fristenliste (Tachograph) ───────────────────────────────── */ .frist{display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:center; padding:14px 16px;border-bottom:1px solid var(--line)} .frist:last-of-type{border-bottom:0} .frist-name{font-family:var(--mono);font-size:12.5px;letter-spacing:.05em;color:var(--ink)} .frist-meta{font-size:12px;color:var(--muted);margin-top:3px} .frist-days{font-family:var(--mono);font-size:12px;color:var(--muted);text-align:right} .pill{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase; padding:5px 9px;border:1px solid currentColor;white-space:nowrap} .pill.ok{color:oklch(0.66 0.11 145)} .pill.warn{color:var(--accent)} .pill.due{color:oklch(0.66 0.16 25)} /* ── Berichtszeilen mit kleinem Balken ───────────────────────── */ .rep{display:grid;grid-template-columns:112px 1fr 76px;gap:14px;align-items:center; padding:12px 16px;border-bottom:1px solid var(--line)} .rep:last-of-type{border-bottom:0} .rep-lbl{font-family:var(--mono);font-size:12px;color:var(--muted);letter-spacing:.04em} .rep-bar{height:8px;background:oklch(0.265 0.026 250);position:relative;overflow:hidden} .rep-bar i{position:absolute;inset:0 auto 0 0;background:var(--accent);width:0; transition:width 1.1s cubic-bezier(.22,.61,.36,1)} .rep.is-in .rep-bar i{width:var(--w)} .rep-val{font-family:var(--mono);font-size:12.5px;color:var(--ink);text-align:right} /* ── Zwei Ansichten nebeneinander ────────────────────────────── */ .panels{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,34px)} @media (max-width:860px){ .panels{grid-template-columns:1fr} } /* ── Bild-Slot fuer spaeter nachgereichte Fotos ──────────────── */ .slot{position:relative;background:oklch(0.215 0.029 252); border:1px dashed var(--line);display:grid;place-items:center; min-height:260px;padding:26px;text-align:center} .slot p{font-family:var(--mono);font-size:11px;letter-spacing:.13em; text-transform:uppercase;color:oklch(0.52 0.026 250);line-height:1.7} .slot b{color:var(--accent);font-weight:600} /* Sobald ein echtes Bild da ist, verschwindet der Rahmen von selbst */ .slot:has(img){border-style:solid;padding:0;min-height:0} .slot:has(img) p{display:none} .slot img{width:100%;height:100%;object-fit:cover} /* ── Kostenrechner: rechnet sofort, ohne E-Mail-Abfrage ─────── */ .calc{display:grid;grid-template-columns:0.95fr 1.05fr;gap:clamp(24px,3.4vw,52px); align-items:start} .calc-in label{display:block;font-family:var(--mono);font-size:11.5px; letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:12px} .calc-num{display:flex;align-items:center;gap:14px;margin-bottom:26px} .calc-num input[type=number]{width:112px;background:oklch(0.165 0.026 252); border:1px solid var(--line);color:var(--ink);font-family:var(--mono); font-size:26px;padding:10px 12px;-moz-appearance:textfield} .calc-num input::-webkit-outer-spin-button, .calc-num input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} .calc-num button{width:44px;height:47px;background:oklch(0.225 0.030 252); border:1px solid var(--line);color:var(--ink);font-family:var(--mono); font-size:19px;cursor:pointer;transition:background .2s ease} .calc-num button:hover{background:var(--accent);color:oklch(0.19 0.03 252); border-color:var(--accent)} .calc-range{width:100%;accent-color:oklch(0.775 0.150 82);margin-bottom:26px} .calc-opt{display:flex;align-items:flex-start;gap:11px;padding:15px; border:1px solid var(--line);background:oklch(0.195 0.028 252);cursor:pointer} .calc-opt input{margin-top:3px;accent-color:oklch(0.775 0.150 82);width:17px;height:17px} .calc-opt span{font-size:15px;color:var(--muted)} .calc-opt b{display:block;color:var(--ink);font-weight:600;margin-bottom:3px;font-size:16px} .calc-out{background:oklch(0.165 0.026 252);border:1px solid var(--line)} .calc-row{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:baseline; padding:15px 18px;border-bottom:1px solid var(--line)} .calc-row span{font-size:15.5px;color:var(--muted)} .calc-row small{display:block;font-size:13px;color:oklch(0.50 0.026 250);margin-top:2px} .calc-row b{font-family:var(--mono);font-size:16px;color:var(--ink);white-space:nowrap} .calc-row.total{background:oklch(0.205 0.030 252);border-bottom:0} .calc-row.total span{color:var(--ink);font-weight:600} .calc-row.total b{color:var(--accent);font-size:21px} .calc-note{padding:13px 18px;border-top:1px solid var(--line); font-size:13.5px;color:oklch(0.52 0.026 250)} @media (max-width:860px){ .calc{grid-template-columns:1fr} } /* ── Breiter Bildslot ueber die volle Seitenbreite ──────────── */ .slot-wide{min-height:clamp(200px,30vh,330px);border-left:0;border-right:0} .slot-wide img{aspect-ratio:21/9} /* Die Options-Beschriftung ist selbst ein