:root{--accent:#0070c9;--muted:#6b7280;--card:#ffffff;--bg:#f6f8fb}
*{box-sizing:border-box}
body{font-family:'Poppins',Roboto,system-ui,Arial;background:var(--bg);margin:0;padding:28px;display:flex;align-items:center;justify-content:center;min-height:100vh}
.container{width:100%;max-width:920px}
.card{background:linear-gradient(180deg,rgba(255,255,255,0.95),var(--card));border-radius:14px;box-shadow:0 10px 30px rgba(17,24,39,0.08);overflow:hidden}
.card-header{display:flex;align-items:center;gap:38px;padding:22px 28px;border-bottom:1px solid #eef2f6;background-color: #96C11F;}
.logo{height:68px;width:auto;object-fit:contain}
.title{font-size:18px;font-weight:700;color:#0b1630}
.subtitle{font-size:13px;color:white;margin-top:4px}
.card-body{padding:26px}
form .grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
label{display:block;font-size:18px;color:black;margin-bottom:8px}
input[type="text"],input[type="number"],input[type="date"],select,textarea{width:100%;padding:14px 14px;border-radius:12px;border:1px solid #e6edf3;background:#fff;font-size:15px;min-height:52px}
textarea{min-height:140px;resize:vertical}
.full{grid-column:1/-1}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{padding:10px 14px;border-radius:999px;border:1px solid #dbe7fb;background:#f7fbff;color:var(--accent);font-weight:600;cursor:pointer}
.chip.active{background:var(--accent);color:#fff;border-color:transparent}
.actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px}
.btn{background:var(--accent);color:white;padding:12px 18px;border-radius:10px;border:0;font-weight:700;cursor:pointer}
.btn.secondary{background:transparent;color:var(--accent);border:1px solid rgba(0,112,201,0.12)}
.note{font-size:13px;color:var(--muted)}
.success{display:none;padding:14px;border-radius:10px;background:#e6ffef;color:#04673a;margin-top:12px}

/* Fancy select styling for Laufzeit */
.fancy-select{appearance:none;background-color:#fff;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="%233EAFFF"><path d="M5.5 7l4.5 4.5L14.5 7z"/></svg>');background-repeat:no-repeat;background-position:right 12px center;background-size:26px 26px;padding-right:40px;border-radius:12px;border:1px solid #d6e7fb;min-height:56px;padding-top:12px;padding-bottom:12px}
.fancy-select:focus{outline:2px solid rgba(0,112,201,0.12);outline-offset:2px}

/* Make individual option rows taller and change hover color to orange */
select.fancy-select option{padding:12px 16px;min-height:52px;line-height:1.6}
select.fancy-select option:hover{background:#ff7a00;color:#fff}
/* Some browsers need the focus style on option */
select.fancy-select option:focus{background:#ff7a00;color:#fff}

/* focus and accessible states */
input:focus,select:focus,textarea:focus{outline:2px solid rgba(0,112,201,0.12);outline-offset:2px}

@media (max-width:720px){.card{border-radius:12px}.card-header{padding:16px; flex-direction: column; align-items: flex-start;}.card-body{padding:18px}form .grid{grid-template-columns:1fr}}