/* ========== Design Tokens (CSS custom properties) ========== */ :root { --seitenHintergrundUebergangOben:#13447e; --seitenHintergrundUebergangUnten:#216798; --hauptSchrift: #073763e6; --kommentarSchrift: #073763e6; --kartenHintergrund: #68A4E6; --kartenRadius: 5px; --kartenSchatten: 0 8px 22px rgba(0,0,0,.08); --kartenRand: 1px solid #e5e7eb; --inputHintergrund: #fff; --inputRadius: 5px; --inputRand: 1px solid #d1d5db; --inputFont-size: 16px; --inputFont-weight: 600; /*Fettheit der Schrift, mehr ist dicker*/ --inputFont-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; } /* ========== Base ========== */ html, body { height: 100%; background-attachment: fixed; background-image: linear-gradient(to bottom, var(--seitenHintergrundUebergangOben), var(--seitenHintergrundUebergangUnten)); color: var(--hauptSchrift); } /* Global font + reset margin */ body { margin: 0; font: 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; } /* ========== Layout Helpers ========== */ .wrap { max-width: 880px; margin: 24px auto; padding: 0 16px; } .card { background: var(--kartenHintergrund); border-radius: var(--kartenRadius); box-shadow: var(--kartenSchatten); border: var(--kartenRand); padding: clamp(14px, 2vw, 22px); margin-bottom: 16px; } h1 { margin: 0 0 20px 0; font-size: clamp(26px, 4vw, 34px); } /* Simple responsive grid */ .grid { display: grid; grid-template-columns: 1fr; gap: 12px; } @media (min-width: 700px) { .grid { grid-template-columns: 1fr 1fr; } .full { grid-column: 1 / -1; /* span both columns */ } } /* Form elements */ label { display: block; font-weight: 600; margin-bottom: 6px; } /* Inputs inherit font from . Set font-size/family here if you want different. */ input[type="number"],input[type="date"],select { width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: var(--inputRadius); border: var(--inputRand); background: var(--inputHintergrund); font-size: var(--inputFont-size); font-weight: var(--inputFont-weight); font-family: var(--inputFont-family); /**/ } /* Checkbox/radio grid */ .checks { display: grid; grid-template-columns: 1fr; gap: 8px; } @media (min-width: 700px) { .checks { grid-template-columns: 1fr 1fr 1fr; } } .check { display: flex; align-items: center; gap: 8px; } .kommentar { color: var(--kommentarSchrift); } .total { font-size: clamp(24px, 5vw, 44px); font-weight: 800; } .row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } button.link { appearance: none; border: var(--kartenRand); background: #fff; cursor: pointer; padding: 8px 12px; border-radius: 10px; } pre.demo { overflow: auto; margin-top: 8px; background: #fafafa; padding: 10px; border-radius: 10px; border: 1px solid #eee; }