OpenNIT

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

/* Budget-Modus-Toggle */
.bm-mode-toggle { display:flex; gap:0.5rem; flex-wrap:wrap; }
.bm-mode-opt    { display:block; cursor:pointer; }
.bm-mode-opt input[type="radio"] { position:absolute; opacity:0; pointer-events:none; }
.bm-mode-btn {
    display:flex; flex-direction:column; gap:0.2rem;
    padding:0.625rem 1rem;
    border:2px solid #dee2e6; border-radius:0.375rem;
    background:#fff; font-size:0.85rem; font-weight:600; color:#374151;
    cursor:pointer; min-width:180px; transition:border-color .15s, background .15s;
    line-height:1.3;
}
.bm-mode-btn svg { color:#6b7280; flex-shrink:0; margin-bottom:0.15rem; }
.bm-mode-btn small { font-weight:400; color:#6b7280; font-size:0.75rem; }
.bm-mode-opt input[type="radio"]:checked + .bm-mode-btn {
    border-color:#007bff; background:#eff6ff; color:#1d4ed8;
}
.bm-mode-opt input[type="radio"]:checked + .bm-mode-btn svg { color:#1d4ed8; }
.bm-mode-opt:hover .bm-mode-btn { border-color:#6ea8fe; }
.cf-input-sm { max-width:200px; }

/*
 * Grid-Kinder haben per Default min-width:auto → date-Inputs können
 * ihre intrinsische Breite erzwingen und die Card sprengen.
 * min-width:0 erlaubt dem Grid-Item, schmaler als sein Inhalt zu werden.
 */
.cf-row-2 > * { min-width:0; }

/* iOS/Safari: native date-Picker-Chrome entfernen, damit width:100% greift */
.cf-field input[type="date"] {
    -webkit-appearance: none;
    appearance: none;
    min-width: 0;
}

/* Ab 768px: zwei Datumsspalten untereinander stapeln */
@media (max-width:768px) {
    .cf-row-2 { grid-template-columns:1fr !important; }
}