:root{--color-primary: #5D4037;--color-secondary: #388E3C;--color-background: #F5F5DC;--color-surface: #FFFFFF;--color-text-main: #3E2723;--color-text-light: #795548;--color-signal-green: #2E7D32;--color-signal-yellow: #FBC02D;--color-signal-red: #C62828;--font-family: "Inter", system-ui, Avenir, Helvetica, Arial, sans-serif;--spacing-unit: 8px;--border-radius: 8px}body{margin:0;font-family:var(--font-family);background-color:var(--color-background);color:var(--color-text-main);line-height:1.5}#root{display:flex;flex-direction:column;min-height:100vh}.container{max-width:600px;margin:0 auto;padding:calc(var(--spacing-unit) * 2);width:100%;box-sizing:border-box}.card{background:var(--color-surface);border-radius:var(--border-radius);padding:calc(var(--spacing-unit) * 2);margin-bottom:calc(var(--spacing-unit) * 2);box-shadow:0 2px 4px #0000001a;border:1px solid #E0E0E0}.btn{display:block;width:100%;padding:12px;background-color:var(--color-primary);color:#fff;border:none;border-radius:var(--border-radius);font-size:1rem;font-weight:600;cursor:pointer;text-align:center;margin-top:calc(var(--spacing-unit) * 2)}.btn:active{opacity:.9}.btn-secondary{background-color:var(--color-secondary)}.input-group{margin-bottom:calc(var(--spacing-unit) * 2)}.input-group label{display:block;margin-bottom:4px;font-weight:500}.input-group input,.input-group select{width:100%;padding:10px;border:1px solid #BCAAA4;border-radius:var(--border-radius);font-size:1rem;box-sizing:border-box;background:#fafafa}.header{text-align:center;margin-bottom:2rem;padding-bottom:1rem;border-bottom:2px solid var(--color-primary)}.ampel-indicator{width:40px;height:40px;border-radius:50%;display:inline-block;margin:5px;border:2px solid rgba(0,0,0,.1)}.bg-green{background-color:var(--color-signal-green)}.bg-yellow{background-color:var(--color-signal-yellow)}.bg-red{background-color:var(--color-signal-red)}#root{max-width:1280px;margin:0 auto;padding:2rem;text-align:center}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media(prefers-reduced-motion:no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}.card{padding:2em}.read-the-docs{color:#888}