/* ========================================================= Startseite – Styles: bright (🌞) und blue (🌙) Umschaltung via data-theme am -Tag ========================================================= */ :root{ --radius: 16px; --shadowSoft: 0 12px 35px rgba(0,0,0,.12); } html[data-theme="blue"]{ --bg: #0b0c10; --bg2: rgba(255,255,255,.06); --panel2: rgba(255,255,255,.045); --line: rgba(255,255,255,.16); --text: rgba(255,255,255,.92); --muted: rgba(255,255,255,.72); --primary: rgba(60,120,255,1); --pageBg: radial-gradient(1200px 700px at 20% 10%, rgba(60,120,255,.20), transparent 60%), radial-gradient(900px 600px at 80% 20%, rgba(255,210,60,.12), transparent 60%), radial-gradient(1000px 700px at 50% 90%, rgba(60,255,180,.10), transparent 65%), var(--bg); } html[data-theme="bright"]{ --bg: #f7f8fb; --bg2: rgba(0,0,0,.04); --panel2: rgba(255,255,255,.78); --line: rgba(0,0,0,.10); --text: rgba(0,0,0,.88); --muted: rgba(0,0,0,.62); --primary: rgba(30,92,255,1); --pageBg: radial-gradient(1200px 700px at 18% 10%, rgba(30,92,255,.14), transparent 60%), radial-gradient(900px 600px at 85% 22%, rgba(255,180,60,.16), transparent 60%), radial-gradient(900px 700px at 50% 90%, rgba(60,210,140,.10), transparent 65%), var(--bg); } *{ box-sizing: border-box; } html, body{ height: 100%; } body{ margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; line-height: 1.35; color: var(--text); background: var(--pageBg); } a{ color: inherit; text-decoration: none; } code{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; } .muted{ color: var(--muted); } .wrap{ max-width: 1200px; margin: 0 auto; padding: 14px 16px 26px; } .topbar{ border-bottom: 1px solid var(--line); background: var(--bg2); backdrop-filter: blur(10px); } .topbar__inner{ max-width: 1200px; margin: 0 auto; padding: 14px 16px; display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; } .brand{ display: flex; gap: 10px; align-items: center; } .brand__logo{ width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel2); display: grid; place-items: center; box-shadow: var(--shadowSoft); } .brand__title{ font-weight: 900; letter-spacing: .2px; } .brand__subtitle{ font-size: 12px; color: var(--muted); margin-top: 2px; } .topbar__right{ display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .nav{ display: flex; gap: 10px; flex-wrap: wrap; } .nav__link{ padding: 8px 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel2); } .nav__link:hover{ filter: brightness(1.03); } .iconBtn{ display: inline-flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel2); cursor: pointer; user-select: none; } .iconBtn:hover{ filter: brightness(1.03); } .iconBtn__icon{ width: 22px; height: 22px; display: grid; place-items: center; } .iconBtn__text{ font-size: 12px; color: var(--muted); text-transform: lowercase; } /* Tools */ .tools{ margin-top: 6px; } .tools__head{ display: flex; gap: 12px; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; margin-bottom: 10px; } .tools__controls{ display: flex; gap: 10px; flex-wrap: wrap; } .input{ padding: 10px 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel2); color: var(--text); outline: none; min-width: 240px; } .tags{ display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 12px; } .tag{ padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel2); font-size: 12px; cursor: pointer; user-select: none; } .tag:hover{ filter: brightness(1.03); } .tag.on{ border-color: color-mix(in srgb, var(--primary) 55%, var(--line)); background: color-mix(in srgb, var(--primary) 18%, var(--panel2)); } .grid{ display: grid; gap: 12px; } .grid--tools{ grid-template-columns: repeat(3, 1fr); } @media (max-width: 1060px){ .grid--tools{ grid-template-columns: repeat(2, 1fr); } } @media (max-width: 680px){ .grid--tools{ grid-template-columns: 1fr; } } .tool{ border: 1px solid var(--line); background: var(--panel2); border-radius: var(--radius); padding: 12px; box-shadow: var(--shadowSoft); } .tool__top{ display: flex; gap: 10px; align-items: flex-start; } .tool__emoji{ width: 40px; height: 40px; border-radius: 14px; border: 1px solid var(--line); background: color-mix(in srgb, var(--panel2) 70%, var(--bg)); display: grid; place-items: center; font-size: 18px; flex: 0 0 auto; } .tool__nameLink{ display: inline-block; font-weight: 900; letter-spacing: .15px; color: var(--text); text-decoration: none; } .tool__nameLink:hover{ text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; } .tool__desc{ margin-top: 4px; color: var(--muted); font-size: 12px; } .tool__meta{ margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; } .metaPill{ font-size: 11px; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line); background: color-mix(in srgb, var(--panel2) 70%, var(--bg)); color: var(--muted); } .empty{ border: 1px dashed var(--line); border-radius: var(--radius); padding: 16px; background: var(--panel2); } .empty__title{ font-weight: 900; margin-bottom: 4px; } .footer{ margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }