/* Made by the Site Manager (tools/editor.py). Edit the site there, not here: this file is
   rewritten every time the Site Manager saves. The data it reads back is at the bottom. */

.k-heading, .k-text, .k-img, .k-figure, .k-video, .k-audio, .k-embed, .k-cols, .k-button-row { margin-top: 20px; }
.k-img { display: block; max-width: 100%; height: auto; }
.k-textbox { margin: 20px 0 0; }
.k-figure img { display: block; width: 100%; height: auto; border-radius: 12px; }
.k-figure figcaption { margin-top: 8px; color: var(--muted, #8d8a84); font-size: .9rem; }
.k-video { display: block; width: 100%; max-width: 100%; height: auto; border-radius: 12px; background: #000; }
.k-audio { display: block; width: 100%; }
.k-embed { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #000 center / cover no-repeat; }
.k-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.k-play { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 0; border: 0; background: rgba(0, 0, 0, .35); color: #fff; font: inherit; cursor: pointer; }
.k-play-icon { display: flex; align-items: center; justify-content: center; width: 68px; height: 68px; border-radius: 50%; background: var(--accent, #e8a24a); color: #1a1205; font-size: 26px; padding-left: 5px; }
.k-play small { opacity: .75; font-size: .75rem; }
.k-button { display: inline-block; padding: 10px 20px; border-radius: 999px; background: var(--accent, #e8a24a); color: #1a1205; font-weight: 600; text-decoration: none; }
.k-button:hover { color: #1a1205; filter: brightness(1.08); }
.k-section { padding: 56px 24px; }
.k-cols { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.k-spacer { height: 48px; }
.k-divider { border: 0; border-top: 1px solid var(--line, #26262b); margin: 32px 0; }

/* Photo carousel: swipes on its own; media.js adds the arrows' clicks and the dots. */
.k-carousel { position: relative; margin-top: 20px; }
.k-slides { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain; border-radius: 12px; scrollbar-width: none; }
.k-slides::-webkit-scrollbar { display: none; }
.k-slide { position: relative; flex: 0 0 100%; margin: 0; scroll-snap-align: start; }
.k-slide img { display: block; width: 100%; height: auto; aspect-ratio: var(--k-ratio, 3 / 2); object-fit: cover; }
.k-slide figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 32px 16px 12px; background: linear-gradient(transparent, rgba(0, 0, 0, .65)); color: #fff; font-size: .9rem; }
.k-prev, .k-next { position: absolute; top: 50%; z-index: 1; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0 0 3px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .5); color: #fff; font: 28px/1 system-ui, sans-serif; cursor: pointer; transform: translateY(-50%); }
.k-prev { left: 12px; }
.k-next { right: 12px; }
.k-prev:hover, .k-next:hover { background: rgba(0, 0, 0, .75); }
.k-single .k-prev, .k-single .k-next, .k-single .k-dots { display: none; }
.k-dots { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 12px; }
.k-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: var(--line, #26262b); cursor: pointer; }
.k-dots button.on { background: var(--accent, #e8a24a); }
.k-dots .k-auto { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-right: 6px; border: 1px solid var(--line, #26262b); background: none; color: inherit; font: 9px/1 system-ui, sans-serif; letter-spacing: -1px; opacity: .7; }
.k-dots .k-auto:hover { opacity: 1; }

/* Before / after audio: one player, two recordings, a switch between them. */
.k-ab { margin-top: 20px; padding: 18px; border: 1px solid var(--line, #26262b); border-radius: 14px; }
.k-ab-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.k-ab-play { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; padding: 0 0 0 4px; border: 0; border-radius: 50%; background: var(--accent, #e8a24a); color: #1a1205; font-size: 20px; cursor: pointer; }
.k-ab-play::before { content: "▶"; }
.k-playing .k-ab-play { padding: 0; }
.k-playing .k-ab-play::before { content: "❚❚"; font-size: 16px; letter-spacing: -2px; }
.k-ab-switch { display: inline-flex; padding: 4px; border-radius: 999px; background: rgba(127, 127, 127, .15); }
.k-ab-opt { padding: 8px 18px; border: 0; border-radius: 999px; background: none; color: inherit; font: inherit; font-weight: 600; opacity: .6; cursor: pointer; }
.k-ab-opt.on { background: var(--fg, #f2efe9); color: var(--bg, #0e0e10); opacity: 1; }
.k-ab-bar { height: 6px; margin-top: 16px; border-radius: 3px; background: var(--line, #26262b); cursor: pointer; overflow: hidden; }
.k-ab-fill { display: block; width: 0; height: 100%; background: var(--accent, #e8a24a); }

/* Click to enlarge. */
img[data-zoom], [data-zoom] img { cursor: zoom-in; }
.k-lightbox { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .92); cursor: zoom-out; }
.k-lightbox figure { margin: 0; text-align: center; }
.k-lightbox img { max-width: 94vw; max-height: 86vh; object-fit: contain; }
.k-lightbox figcaption { margin-top: 10px; color: #ddd; font-size: .9rem; }
.k-lightbox button { position: absolute; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0 0 3px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; font: 30px/1 system-ui, sans-serif; cursor: pointer; }
.k-lightbox .k-lb-close { top: 16px; right: 16px; }
.k-lightbox .k-lb-prev { left: 16px; top: calc(50% - 24px); }
.k-lightbox .k-lb-next { right: 16px; top: calc(50% - 24px); }
.k-lightbox.k-single .k-lb-prev, .k-lightbox.k-single .k-lb-next { display: none; }

/* Fade in on scroll (only where media.js runs, and not for people who ask for less motion). */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  [data-reveal] { transition: opacity .8s ease, transform .8s ease; }
  [data-reveal]:not(.k-in) { opacity: 0; transform: translateY(28px); }
}

/* Site look */
h1, h2, h3, h4, h5, h6 { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important; }

/* Every size */
[data-k="bc0405"] { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important; }
[data-k="u9xr9p"] { color: 30, 30, 30 !important; }

/* site-manager-data
{
 "rules": [
  {
   "sel": "[data-k=\"bc0405\"]",
   "page": "index.html",
   "label": "a.buy “Buy scrawLFO · €20”",
   "props": {
    "all": {
     "font-family": "system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif"
    }
   }
  },
  {
   "sel": "[data-k=\"u9xr9p\"]",
   "page": "datenschutz.html",
   "label": "font “Harry Wills, Bergmannst…”",
   "props": {
    "all": {
     "color": "30, 30, 30"
    }
   }
  }
 ],
 "theme": {
  "vars": {},
  "fonts": {
   "headings": {
    "name": "System (San Francisco, Segoe)",
    "stack": "system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif"
   }
  }
 }
}
*/