/* clip-seite – Design 2 (11.11.2026). Ruhig, praezise, ohne Effekthascherei. Schriften lokal unter /fonts. */
@font-face{font-family:"Bricolage";src:url(/fonts/bricolage.woff2) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Inter";src:url(/fonts/inter.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{
  --bg:#050506;--bg1:#0e0e11;--bg2:#17171b;--bg3:#212127;
  --line:rgba(255,255,255,.075);--line2:rgba(255,255,255,.13);--line3:rgba(255,255,255,.22);
  --text:#ededf0;--text2:#a3a3ad;--text3:#6c6c76;
  --rec:#ff4d2e;--ok:#3fcf8e;--warn:#e8b339;--bad:#f2555a;
  --r:14px;--r2:10px;--r3:7px;
  --display:"Bricolage",ui-sans-serif,system-ui,sans-serif;
  --ui:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{margin:0;background:var(--bg);color:var(--text);font:14.5px/1.5 var(--ui);font-feature-settings:"cv11","ss01";-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
button,input,textarea,select{font:inherit;color:inherit}
a{color:inherit}
::selection{background:rgba(255,255,255,.9);color:#050506}
:focus-visible{outline:2px solid rgba(255,255,255,.7);outline-offset:2px}
.num{font-variant-numeric:tabular-nums}
.ico{width:16px;height:16px;flex:none;stroke-width:1.75}

/* Marke */
.logo{display:inline-flex;align-items:center;gap:10px;font:700 19px/1 var(--display);letter-spacing:-.03em;text-decoration:none;color:#fff;flex:none}
.rec{width:9px;height:9px;border-radius:50%;background:var(--rec);box-shadow:0 0 0 3px rgba(255,77,46,.18);flex:none}
.rec.live{animation:rec 2.4s ease-in-out infinite}
@keyframes rec{50%{box-shadow:0 0 0 7px rgba(255,77,46,0)}}

/* Knoepfe */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:36px;padding:0 16px;border-radius:999px;border:1px solid var(--line2);background:var(--bg2);color:var(--text);font-size:13.5px;font-weight:550;letter-spacing:-.005em;text-decoration:none;cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s,color .15s,opacity .15s}
.btn:hover{background:var(--bg3);border-color:var(--line3)}
.btn:active{opacity:.85}
.btn:disabled{opacity:.45;cursor:default}
.btn.primary{background:#f4f4f6;border-color:#f4f4f6;color:#09090b;font-weight:600}
.btn.primary:hover{background:#fff;border-color:#fff}
.btn.quiet{background:transparent;border-color:transparent;color:var(--text2)}
.btn.quiet:hover{background:var(--bg2);color:var(--text)}
.btn.danger{color:#ff8a8d}
.btn.danger:hover{border-color:rgba(242,85,90,.45);background:rgba(242,85,90,.08)}
.btn.icon{width:36px;padding:0}
.btn.sm{height:32px;padding:0 11px;font-size:13px}
.btn.sm.icon{width:32px;padding:0}
.btn.lg{height:48px;font-size:15px;padding:0 22px}
.btn.xl{height:50px;padding:0 26px;font-size:15.5px;font-weight:650;gap:10px}
.btn.xl.icon{width:50px;padding:0}
.btn.xl .ico{width:19px;height:19px}
.btn.glass{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.12);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);color:#fff}
.btn.glass:hover{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.2)}
.btn[hidden]{display:none}

/* Eingaben */
.field{display:flex;flex-direction:column;gap:7px;font-size:13px;color:var(--text2);font-weight:500}
.input,.field input,.field textarea{width:100%;height:48px;background:rgba(255,255,255,.04);border:1px solid var(--line2);border-radius:12px;padding:0 15px;font-size:15px;color:var(--text);outline:none;transition:border-color .15s,box-shadow .15s}
.field textarea{height:auto;min-height:96px;padding:12px 14px;resize:vertical;line-height:1.5}
.input::placeholder,.field input::placeholder,.field textarea::placeholder{color:var(--text3)}
.input:hover,.field input:hover,.field textarea:hover{border-color:var(--line3)}
.input:focus,.field input:focus,.field textarea:focus{border-color:rgba(255,255,255,.45);box-shadow:0 0 0 4px rgba(255,255,255,.06)}
.field .hint{font-size:12px;color:var(--text3);font-weight:400}

/* Kleine Kennzeichen */
.tag{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border-radius:6px;border:1px solid var(--line2);font-size:12px;font-weight:550;color:var(--text2);white-space:nowrap}
.tag::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;display:none}
.tag.dot::before{display:block}
.tag.ok{color:var(--ok)}.tag.warn{color:var(--warn)}.tag.bad{color:var(--bad)}.tag.hot{color:var(--rec)}
.tag.ok,.tag.warn,.tag.bad,.tag.hot{border-color:color-mix(in srgb,currentColor 35%,transparent)}
.label{font-size:11.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--text3)}

/* Meldung unten */
#toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,12px);display:flex;align-items:center;gap:10px;background:var(--bg3);border:1px solid var(--line2);color:var(--text);padding:12px 18px;border-radius:999px;font-size:13.5px;font-weight:550;opacity:0;transition:opacity .2s,transform .2s var(--ease);pointer-events:none;z-index:100;box-shadow:0 16px 40px -12px rgba(0,0,0,.7);max-width:calc(100vw - 32px)}
#toast.show{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
::view-transition-old(root),::view-transition-new(root){animation-duration:.24s;animation-timing-function:var(--ease)}