Search Results

index.html Copy

<div class="ui-demo panel"><span class="eyebrow">UI Studio Original</span><strong>Search Results</strong><p>Produktiver Starterbaustein mit responsivem Layout, Fokuszuständen und Design-Token-kompatiblen Styles.</p><button>Aktion</button></div><style>:root{--ui-primary:var(--color-primary,#635bff);--ui-bg:var(--color-background,#fff);--ui-fg:var(--color-foreground,#172033);--ui-border:var(--color-border,#dce1ea);--ui-radius:var(--radius-md,12px)}*{box-sizing:border-box}.ui-demo{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ui-fg);background:var(--ui-bg);border:1px solid var(--ui-border);border-radius:var(--ui-radius);padding:18px;max-width:760px}.panel{display:grid;gap:12px}.eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.08em;opacity:.65}.ui-demo a{color:var(--ui-fg);text-decoration:none;padding:8px 10px;border-radius:8px;display:inline-block}.ui-demo a[aria-current="page"]{background:#eef0ff;color:#3e37c9}.ui-demo button{border:0;border-radius:9px;padding:9px 13px;background:var(--ui-primary);color:#fff;font-weight:650;cursor:pointer}.ui-demo button.secondary{background:#eef1f6;color:var(--ui-fg)}.ui-demo button:focus-visible,.ui-demo a:focus-visible,.ui-demo input:focus-visible{outline:3px solid #a5b4fc;outline-offset:2px}.ui-demo input{width:100%;margin-top:6px;border:1px solid var(--ui-border);border-radius:9px;padding:10px;background:var(--ui-bg);color:var(--ui-fg)}.ui-demo table{border-collapse:collapse;width:100%}.ui-demo th,.ui-demo td{text-align:left;padding:10px;border-bottom:1px solid var(--ui-border)}.pill{display:inline-block;padding:3px 8px;border-radius:999px;background:#eaf8ef;color:#167a38}.fx{min-height:180px;display:grid;place-content:center;text-align:center;background:radial-gradient(circle at 20% 20%,#c4b5fd 0,transparent 32%),radial-gradient(circle at 80% 20%,#67e8f9 0,transparent 28%),linear-gradient(135deg,#111827,#312e81);color:white;border:0;overflow:hidden}.fx strong{font-size:32px}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}@media(max-width:600px){.ui-demo{padding:14px}.ui-demo table{font-size:14px}}</style>