/* kspr studio - gemeinsames Stylesheet für kspr.online/ und alle Template-Seiten.
   Gestaltung nach der Vorlage "kspr Templates" (Claude Design), als schlichtes
   CSS nachgebaut. Schriften lokal (fonts/), nichts wird von Google geladen.
   Hell/dunkel: System-Einstellung, überschreibbar per data-theme auf <html>
   (Umschalter in kspr.js, gemerkt in localStorage). */
@font-face{font-family:Manrope;src:url(/templates/fonts/manrope.woff2) format("woff2");font-weight:400 800;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(/templates/fonts/jetbrains-mono.woff2) format("woff2");font-weight:400 600;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(/templates/fonts/instrument-serif.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url(/templates/fonts/hanken-grotesk.woff2) format("woff2");font-weight:400 500;font-display:swap}

:root{
  --bg:#f4f2ec;--ink:#141416;--muted:#6b6a66;--card:#fff;--chip:#e9e6de;--line:#cfcbc0;--nav:#f4f2ecd9;
  --inv:#141416;--invInk:#f4f2ec;--invMuted:#b5b3ad;--photo:#d9d5ca;--grey:#d6d2c7;
  --blue:#1d4fd0;--blue-hi:#2a5cff;--pink:#ff48b0;--yellow:#ffe800;--black:#141416;
  --spring:cubic-bezier(.3,1.8,.5,1);--pop:cubic-bezier(.2,1.4,.4,1);
  --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --show:#141416;--showInk:#f4f2ec;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0e0e10;--show:#1f1f22;--showInk:#f4f2ec;--ink:#f4f2ec;--muted:#9b9a95;--card:#1a1a1d;--chip:#232326;--line:#3a3a3e;--nav:#1a1a1dd9;
    --inv:#f4f2ec;--invInk:#141416;--invMuted:#5a5955;--photo:#2f2f33;--grey:#2c2c30;color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0e0e10;--show:#1f1f22;--showInk:#f4f2ec;--ink:#f4f2ec;--muted:#9b9a95;--card:#1a1a1d;--chip:#232326;--line:#3a3a3e;--nav:#1a1a1dd9;
  --inv:#f4f2ec;--invInk:#141416;--invMuted:#5a5955;--photo:#2f2f33;--grey:#2c2c30;color-scheme:dark;
}

*{box-sizing:border-box;margin:0}
html{background:var(--bg);scroll-behavior:smooth;overflow-x:clip}
body{background:var(--bg);color:var(--ink);font:16px/1.5 Manrope,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:clip;transition:background .3s,color .3s}
a{color:inherit;text-decoration:none}
a:hover{color:var(--blue)}
img{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@keyframes k-spin{to{transform:rotate(360deg)}}
@keyframes k-in{from{opacity:0;transform:translateY(70%) rotate(7deg)}to{opacity:1;transform:none}}
@keyframes k-pop{0%{opacity:0;transform:scale(.2) rotate(-20deg)}100%{opacity:1;transform:none}}
@keyframes k-grid{to{background-position:64px 64px,64px 64px}}
@keyframes k-drift{0%,100%{transform:translate(0,0) rotate(0)}33%{transform:translate(30px,-24px) rotate(12deg)}66%{transform:translate(-20px,18px) rotate(-8deg)}}
@keyframes k-bob{0%,100%{transform:translateY(0) rotate(var(--r,0deg))}50%{transform:translateY(-26px) rotate(calc(var(--r,0deg) + 20deg))}}
@keyframes k-blink{0%,100%{opacity:.15;transform:scale(.6)}50%{opacity:1;transform:scale(1)}}
@keyframes k-wig{0%,100%{transform:translate(-3px,-5px) rotate(-2deg)}50%{transform:translate(-3px,-5px) rotate(2deg)}}

/* Seitenrahmen */
.k-page{max-width:1280px;margin:0 auto;padding:0 clamp(16px,3vw,32px) 32px;display:flex;flex-direction:column;gap:clamp(56px,8vw,104px)}
.k-page>section,.k-page>header{scroll-margin-top:90px}

/* Pillen-Navigation */
.k-nav{position:sticky;top:12px;z-index:20;margin-top:12px;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 8px 8px 20px;border-radius:99px;background:var(--nav);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 0 0 1px var(--line),0 10px 30px #0000001a;white-space:nowrap}
.k-logo{display:flex;align-items:center;gap:7px;font-weight:800;font-size:21px;letter-spacing:-.04em}
.k-logo:hover{color:inherit}
.k-dot{width:8px;height:8px;border-radius:50%;background:var(--pink);flex:none}
.k-links{display:flex;gap:2px;font-size:14px;font-weight:600}
.k-links a{padding:8px 14px;border-radius:99px;display:inline-block;transition:transform .3s var(--spring),background .2s,color .2s}
.k-links a:hover,.k-links a[aria-current]{background:var(--yellow);color:var(--black);transform:translateY(-2px) rotate(-2deg)}
.k-links a:nth-child(2):hover{background:var(--pink);transform:translateY(-2px) rotate(2deg)}
.k-links a:active{transform:scale(.9);transition-duration:.08s}
.k-nav-end{display:flex;align-items:center;gap:6px}
.k-theme{width:40px;height:40px;border-radius:50%;border:none;cursor:pointer;background:var(--chip);font-size:17px;display:flex;align-items:center;justify-content:center;transition:transform .5s var(--spring),background .2s}
.k-theme:hover{transform:rotate(200deg) scale(1.1);background:var(--yellow);color:var(--black)}
.k-theme:active{transform:rotate(360deg) scale(.85);transition-duration:.15s}
.k-theme .k-sun{display:none}
:root[data-theme="dark"] .k-theme .k-sun{display:inline}
:root[data-theme="dark"] .k-theme .k-moon{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .k-theme .k-sun{display:inline}
  :root:not([data-theme="light"]) .k-theme .k-moon{display:none}
}
.k-cta{display:inline-flex;align-items:center;gap:6px;padding:11px 18px;border-radius:99px;background:var(--ink);color:var(--bg);font-weight:700;font-size:14px;transition:transform .3s var(--spring),background .2s,box-shadow .3s var(--spring)}
.k-cta:hover{color:#fff;background:var(--blue);transform:translateY(-2px) scale(1.05);box-shadow:3px 3px 0 var(--pink)}
.k-cta:active{transform:scale(.92);box-shadow:none;transition-duration:.08s}
.k-arr{display:inline-block;transition:transform .35s var(--spring)}
a:hover .k-arr{transform:translateX(5px) rotate(-45deg)}

/* Hero */
.k-hero{transform-style:preserve-3d;transform-origin:50% 40%;display:flex;flex-direction:column;justify-content:center;gap:28px;position:relative;margin-top:-16px;min-height:max(600px,92vh);padding:clamp(32px,5vw,64px) 0 clamp(64px,10vh,120px)}
.k-hero.is-small{min-height:0;padding:clamp(48px,8vw,96px) 0 0}
.k-hero-bg{position:absolute;top:-90px;bottom:0;left:50%;width:100vw;transform:translateX(-50%);overflow:hidden;pointer-events:none;z-index:0}
.k-grid{position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:64px 64px;opacity:.55;animation:k-grid 6s linear infinite;-webkit-mask-image:radial-gradient(ellipse 70% 75% at 50% 45%,#000 30%,transparent 80%);mask-image:radial-gradient(ellipse 70% 75% at 50% 45%,#000 30%,transparent 80%)}
.k-sh{position:absolute}
.k-plus{position:absolute;font-weight:800;font-size:22px;color:var(--blue);animation:k-blink 2.4s ease-in-out infinite}
.k-plus:nth-child(even){color:var(--pink)}
.k-h1{position:relative;z-index:1;font-weight:800;font-size:clamp(50px,8vw,116px);line-height:.88;letter-spacing:-.068em;max-width:1050px;text-wrap:balance}
.k-h1.is-small{font-size:clamp(44px,7vw,96px)}
.k-h1>span{display:inline-block;animation:k-in .9s var(--pop) both}
.k-h1 .k-hl{color:var(--blue);background:linear-gradient(var(--yellow),var(--yellow)) 0 88%/100% .14em no-repeat;padding-bottom:.04em}
.k-h1 .k-mark{background:var(--yellow);color:var(--black);padding:0 .08em;border-radius:.12em;animation-name:k-pop}
.k-h1 .k-stop{color:var(--pink);animation-name:k-pop}
.k-hero-foot{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;animation:k-in .9s var(--pop) .55s both}
.k-lead{font-size:19px;line-height:1.45;max-width:460px;color:var(--muted);text-wrap:pretty}
.k-actions{display:flex;gap:10px;flex-wrap:wrap}
.k-badge{animation:k-pop 1s var(--pop) .9s both;position:absolute;z-index:2;right:clamp(0px,4vw,60px);top:clamp(24px,4vw,48px);width:clamp(96px,11vw,132px);aspect-ratio:1}
.k-badge svg{width:100%;height:100%;animation:k-spin 16s linear infinite}

/* Knöpfe */
.k-btn{display:inline-flex;align-items:center;gap:10px;padding:16px 24px;border-radius:14px;background:var(--blue);color:#fff;font-weight:700;font-size:16px;box-shadow:4px 4px 0 var(--ink);white-space:nowrap;border:none;cursor:pointer;transition:transform .35s var(--spring),box-shadow .35s var(--spring),background .2s}
.k-btn:hover{color:#fff;background:var(--blue-hi);transform:translate(-3px,-5px) rotate(-2deg);box-shadow:8px 10px 0 var(--pink);animation:k-wig .5s ease-in-out .35s 1}
/* Trefferfläche über den Hover-Versatz hinaus, für jede Komponente, die sich beim Hover
   anhebt oder dreht: sonst verliert die Bewegung den Zeiger und der Hover springt an/aus
   (Zittern, 2026-10-04). Neue Komponenten mit Hover-transform hier ergänzen. Seitlich nur
   so viel, dass dicht stehende Nachbarn (Chips 6 px, Nav-Links 2 px) sich nicht überdecken. */
.k-btn,.k-ghost,.k-buy,.k-chip,.k-copy,.k-cta,.k-gauge,.k-links a,.k-theme{position:relative}
:is(.k-btn,.k-ghost,.k-buy,.k-chip,.k-copy,.k-cta,.k-gauge,.k-links a,.k-theme,.k-expand)::before{content:"";position:absolute;inset:-8px -3px}
.k-links a::before{inset:-8px 0}
.k-btn:active{transform:translate(4px,4px) scale(.96);box-shadow:0 0 0 var(--pink);transition-duration:.08s;animation:none}
.k-btn.is-yellow{background:var(--yellow);color:var(--black);font-weight:800;box-shadow:4px 4px 0 var(--blue)}
.k-btn.is-yellow:hover{color:var(--black);transform:translate(-3px,-5px) rotate(2deg) scale(1.04);animation:none}
.k-btn[aria-disabled="true"]{background:var(--chip);color:var(--muted);box-shadow:none;cursor:default;pointer-events:none}
.k-ghost{display:inline-flex;align-items:center;gap:8px;padding:14px 22px;border-radius:14px;border:2px solid var(--ink);font-weight:700;font-size:16px;white-space:nowrap;transition:transform .35s var(--spring),box-shadow .35s var(--spring),background .2s,color .2s}
.k-ghost:hover{background:var(--pink);border-color:var(--black);color:var(--black);transform:translate(-3px,-4px) rotate(2deg);box-shadow:6px 7px 0 var(--ink)}
.k-ghost:active{transform:translate(2px,2px) scale(.95);box-shadow:none;transition-duration:.08s}

/* Überschriften */
.k-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.k-h2{font-weight:800;font-size:clamp(32px,4vw,48px);letter-spacing:-.04em;line-height:1;text-wrap:balance}
.k-count{font-family:var(--mono);font-weight:400;font-size:16px;color:var(--muted);letter-spacing:0;vertical-align:middle}
.k-sub{color:var(--muted);font-size:17px;max-width:520px;margin-top:12px;text-wrap:pretty}

/* Filter und Karten */
.k-section{display:flex;flex-direction:column;gap:24px}
.k-chips{display:flex;gap:6px;flex-wrap:wrap}
.k-chip{font-size:14px;font-weight:600;padding:8px 14px;border-radius:99px;cursor:pointer;white-space:nowrap;border:1.5px solid var(--line);background:transparent;transition:transform .3s var(--spring),box-shadow .3s var(--spring)}
.k-chip:hover{transform:translateY(-3px) rotate(-3deg);box-shadow:3px 3px 0 var(--blue)}
.k-chip:active{transform:scale(.88);box-shadow:none;transition-duration:.08s}
.k-chip[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.k-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:28px 20px}
.k-card{display:flex;flex-direction:column;gap:12px}
.k-card[hidden]{display:none}
.k-card:hover{color:inherit}
.k-thumb{display:block;aspect-ratio:16/11;border-radius:18px;background:var(--show);padding:18px 22px 0;overflow:hidden;transition:transform .3s cubic-bezier(.3,1.5,.5,1)}
.k-thumb img{width:100%;height:100%;object-fit:cover;object-position:left top;border-radius:10px 10px 0 0;background:var(--photo)}
.k-card:hover .k-thumb{transform:translateY(-6px) rotate(-.6deg)}
.k-card:active{transform:scale(.98)}
.k-meta{display:flex;justify-content:space-between;align-items:center;gap:12px}
.k-name{font-weight:700;font-size:17px}
.k-cat{font-size:14px;color:var(--muted)}
.k-name a:hover{color:var(--blue)}
.k-cards.is-large{grid-template-columns:repeat(auto-fill,minmax(min(100%,520px),1fr));gap:40px 24px}
.k-card.is-large .k-thumb{aspect-ratio:16/10.4;padding:22px 26px 0}
.k-card.is-large .k-name{font-size:26px;letter-spacing:-.03em;font-weight:800}
.k-card-body{display:flex;flex-direction:column;gap:14px}
.k-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.k-desc{color:var(--muted);font-size:15px;max-width:560px}
.k-card-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px 18px}
.k-link{font-weight:700;font-size:14px;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px}
.k-swatches{display:flex;flex:none}
.k-swatches i{width:22px;height:22px;border-radius:50%;border:2px solid var(--bg);margin-left:-6px;box-shadow:0 0 0 1px var(--line)}
.k-swatches i:first-child{margin-left:0}
.k-specs .k-swatches{justify-content:flex-end}
/* Kauf-Knopf: neutral schwarz/weiss, in drei Grössen */
.k-buy,.k-faq .k-buy{text-decoration:none}
.k-buy{display:inline-flex;align-items:center;gap:8px;border-radius:99px;background:var(--ink);color:var(--bg);font-weight:800;white-space:nowrap;transition:transform .3s var(--spring),box-shadow .3s var(--spring)}
.k-buy:hover{color:var(--bg);transform:translate(-2px,-3px);box-shadow:4px 5px 0 var(--muted)}
.k-buy:active{transform:scale(.94);box-shadow:none;transition-duration:.08s}
.k-buy.is-s{padding:7px 14px;font-size:14px}
.k-buy.is-m{padding:11px 18px;font-size:15px}
.k-buy.is-l{padding:16px 26px;font-size:17px;border-radius:14px}
.k-testnote{font-family:var(--mono);font-size:12px;color:var(--muted)}
.k-more{align-self:flex-start}

/* Bento-Kacheln */
.k-bento{display:flex;flex-direction:column;gap:12px}
.k-row{display:flex;flex-wrap:wrap;gap:12px}
.k-tile{flex:1 1 260px;min-height:200px;background:var(--card);border-radius:22px;padding:24px;display:flex;flex-direction:column;justify-content:flex-end;gap:16px;position:relative;overflow:hidden}
.k-tile.is-wide{flex:2 1 520px;min-height:220px;padding:28px}
.k-tile.is-inv{background:var(--inv);color:var(--invInk)}
.k-tile.is-blue{background:var(--blue);color:#fff}
.k-tile.is-grey{background:var(--grey)}
.k-tile.is-yellow{background:var(--yellow);color:var(--black)}
.k-tile.is-split{justify-content:space-between}
.k-tile .k-dots{position:absolute;inset:0;background-image:radial-gradient(#fff 1px,transparent 1.3px);background-size:7px 7px;opacity:.16}
.k-tile>*{position:relative}
.k-big{font-weight:800;font-size:clamp(30px,3.6vw,46px);line-height:.95;letter-spacing:-.045em;text-wrap:balance}
.k-num{font-weight:800;font-size:64px;line-height:.85;letter-spacing:-.05em}
.k-num-sub{font-size:24px;font-weight:700;line-height:1.1;letter-spacing:-.02em;margin-top:10px;opacity:.9}
.k-mid{font-weight:800;font-size:clamp(24px,2.4vw,28px);line-height:1.05;letter-spacing:-.03em;text-wrap:balance}
.k-small{font-size:15px;line-height:1.5;opacity:.75;max-width:420px}
.k-tags{display:flex;flex-wrap:wrap;gap:6px}
.k-tag{padding:7px 12px;border-radius:99px;background:var(--chip);font-size:13px;font-weight:600}
.k-tag.is-on{background:var(--yellow);color:var(--black);font-weight:700}
.k-tile.is-blue .k-tag,.k-tile.is-inv .k-tag{background:#ffffff26;color:inherit}
.k-step{font-family:var(--mono);font-size:13px;opacity:.7}
.k-faces{display:flex}
.k-faces span{width:44px;height:44px;border-radius:50%;border:3px solid var(--card);margin-left:-12px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
.k-faces span:first-child{margin-left:0}

/* Preise */
.k-pricing{background:var(--inv);color:var(--invInk);border-radius:28px;padding:clamp(28px,5vw,56px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:32px;align-items:center;position:relative;overflow:hidden;transform-style:preserve-3d}
.k-pricing-grid{position:absolute;inset:-120px;background-image:linear-gradient(var(--invMuted) 1px,transparent 1px),linear-gradient(90deg,var(--invMuted) 1px,transparent 1px);background-size:64px 64px;opacity:.14;animation:k-grid 6s linear infinite;-webkit-mask-image:radial-gradient(ellipse 60% 70% at 70% 60%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse 60% 70% at 70% 60%,#000 20%,transparent 75%);pointer-events:none}
.k-pd{position:absolute;pointer-events:none}
.k-pricing .k-shape{opacity:0;scale:0;transition:scale .9s cubic-bezier(.2,1.8,.4,1),opacity .3s}
.k-pricing[data-in] .k-shape{opacity:1;scale:1}
.k-pricing .k-w{display:inline-block;opacity:0}
.k-pricing[data-in] .k-w{animation:k-in .9s var(--pop) both}
.k-pricing>div:not(.k-pd):not(.k-pricing-grid){position:relative}
.k-ptitle{font-weight:800;font-size:clamp(40px,6vw,76px);line-height:.88;letter-spacing:-.055em}
.k-plist{display:flex;flex-direction:column;gap:18px;width:100%;max-width:440px}
.k-prow{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.k-prow+.k-prow{padding-top:18px;border-top:1px solid var(--invMuted)}
.k-pname{font-weight:700;font-size:20px}
.k-pnote{font-size:14px;color:var(--invMuted);margin-top:6px;max-width:220px;line-height:1.4}
.k-pval{text-align:right;white-space:nowrap}
.k-from{font-family:var(--mono);font-size:12px;color:var(--invMuted)}
.k-amount{font-weight:800;font-size:clamp(44px,6vw,60px);letter-spacing:-.05em;line-height:1;margin-top:2px}
.k-amount small{font-size:.4em;letter-spacing:-.02em}
.k-per{font-size:14px;color:var(--invMuted);margin-top:6px}
.k-tbd{font-family:var(--mono);font-size:11px;color:var(--pink);margin-top:4px}
.k-pside{display:flex;flex-direction:column;gap:24px;align-items:flex-start}

/* Fragen */
.k-faq{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:clamp(24px,5vw,64px);align-items:start}
.k-faq details{border-bottom:1.5px solid var(--line);padding:18px 0}
.k-faq details:first-child{border-top:1.5px solid var(--line)}
.k-faq summary{cursor:pointer;font-weight:700;font-size:18px;letter-spacing:-.01em;list-style:none;display:flex;justify-content:space-between;gap:16px}
.k-faq summary::-webkit-details-marker{display:none}
.k-faq summary::after{content:"+";font-weight:800;color:var(--pink);transition:transform .35s var(--spring)}
.k-faq details[open] summary::after{transform:rotate(45deg)}
.k-faq details p{color:var(--muted);margin-top:10px;max-width:640px}
.k-faq a{text-decoration:underline;text-underline-offset:3px}

/* Detailseite */
.k-crumb{font-size:14px;font-weight:600;color:var(--muted)}
.k-detail{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,56px);align-items:start}
.k-specs{list-style:none;padding:0;border-top:1.5px solid var(--line);font-size:15px}
.k-specs li{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1.5px solid var(--line)}
.k-specs li span:first-child{color:var(--muted)}
.k-specs li span:last-child{text-align:right}
.k-specs a{text-decoration:underline;text-underline-offset:3px}
.k-frame{border-radius:22px;background:var(--show);padding:clamp(16px,3vw,32px) clamp(16px,3vw,32px) 0;overflow:hidden}
.k-frame img{border-radius:10px 10px 0 0}
.k-frame figcaption{color:#fff;opacity:.85;font-size:14px;margin-bottom:16px;max-width:560px}
.k-gallery{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* Textseiten */
.k-doc{max-width:760px;width:100%;margin:0 auto;background:var(--card);border-radius:28px;padding:clamp(28px,5vw,56px)}
.k-doc h1{font-weight:800;font-size:clamp(36px,6vw,56px);line-height:.95;letter-spacing:-.05em;text-wrap:balance}
.k-doc h2{font-weight:800;font-size:20px;letter-spacing:-.02em;margin:40px 0 10px}
.k-doc .k-lead{margin-top:16px;font-size:18px}
.k-doc p,.k-doc li{color:var(--muted)}
.k-doc p+p{margin-top:12px}
.k-doc ul{padding-left:20px;margin-top:8px}
.k-doc li+li{margin-top:6px}
.k-doc strong{color:var(--ink);font-weight:700}
.k-doc a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.k-doc a:hover{color:var(--blue)}
.k-doc .k-stand{margin-top:40px;font-family:var(--mono);font-size:12px}

/* Fuss */
.k-foot{display:flex;justify-content:space-between;align-items:center;gap:12px 24px;flex-wrap:wrap;font-size:14px;color:var(--muted);padding-top:24px;border-top:1.5px solid var(--line)}
.k-foot .k-logo{font-size:17px;color:var(--ink)}
.k-foot .k-dot{width:6px;height:6px}
.k-foot nav{display:flex;gap:6px 18px;flex-wrap:wrap}
.k-foot a:hover{color:var(--blue)}
.k-legal{flex-basis:100%;font-size:13px}

/* Erscheinen beim Scrollen (Klasse setzt kspr.js, ohne JS bleibt alles sichtbar) */
.k-rv{opacity:0;translate:0 60px;rotate:var(--rot,-2deg);transition:opacity .7s ease var(--d,0s),translate .9s cubic-bezier(.2,1.3,.4,1) var(--d,0s),rotate .9s cubic-bezier(.2,1.3,.4,1) var(--d,0s)}
.k-rv.is-in{opacity:1;translate:0 0;rotate:0deg}

@media (max-width:900px){
  .k-detail,.k-faq{grid-template-columns:1fr}
  .k-gallery{grid-template-columns:1fr}
}
@media (max-width:760px){
  .k-links{display:none}
  .k-hero{min-height:max(560px,86vh)}
  .k-hero.is-small{min-height:0}
  .k-lead{font-size:17px}
  .k-badge{top:auto;bottom:clamp(24px,6vh,48px);right:0}
  .k-hero.is-small .k-badge{display:none}
  .k-hero-bg>.k-sh:nth-child(3){top:auto!important;bottom:4%;left:-40px!important}
  .k-pricing .k-pd.is-small{display:none}
}
@media (max-width:420px){
  .k-nav{padding-left:16px}
  .k-cta{padding:10px 14px}
  .k-btn,.k-ghost{padding-inline:18px}
  .k-num{font-size:52px}
  .k-prow{flex-direction:column;gap:6px}
  .k-pval{text-align:left}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .k-rv{opacity:1;translate:none;rotate:none}
  .k-pricing .k-shape{opacity:1;scale:1}
  .k-pricing .k-w{opacity:1}
}

/* Live-Ansicht der Templates (Detailseite): Desktop- und Phone-Rahmen, neutral */
.k-devices{display:flex;flex-direction:column;gap:20px;align-items:center}
.k-devices .k-frame{width:100%}
.k-frame.k-live{padding:clamp(10px,1.4vw,18px)}
.k-screen{position:relative;overflow:hidden;border-radius:10px;background:var(--photo);width:100%}
.k-screen img{width:100%;height:100%;object-fit:cover;object-position:left top;border-radius:0}
.k-screen iframe{position:absolute;top:0;left:0;border:0;transform-origin:0 0;opacity:0;transition:opacity .5s;background:#fff}
.k-screen iframe.is-on{opacity:1}
.k-phone{width:min(300px,78vw);background:var(--show);border-radius:46px;padding:12px;box-shadow:0 30px 60px -30px #00000066}
.k-phone .k-screen{border-radius:34px}
.k-screen-wait{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:24px;text-align:center;font-family:var(--mono);font-size:12px;color:var(--muted)}
.k-livecap{font-family:var(--mono);font-size:12px;color:var(--muted);text-align:center}
.k-frame.k-live{position:relative}
.k-expand{position:absolute;right:clamp(18px,2.2vw,30px);bottom:clamp(18px,2.2vw,30px);border:none;cursor:pointer;padding:8px 14px;border-radius:99px;background:var(--ink);color:var(--bg);font-weight:700;font-size:13px;box-shadow:0 6px 20px #0000004d;transition:transform .3s var(--spring)}
.k-expand:hover{transform:translateY(-2px) scale(1.05)}
.k-overlay{position:fixed;inset:0;z-index:100;background:#0e0e10;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:12px}
.k-overlay .k-screen{flex:none;border-radius:8px}
.k-overlay-bar{position:absolute;top:10px;left:12px;right:12px;z-index:1;display:flex;justify-content:space-between;align-items:center;gap:16px;color:#f4f2ec;font-family:var(--mono);font-size:12px}
.k-close{border:none;cursor:pointer;padding:8px 14px;border-radius:99px;background:#f4f2ec;color:#141416;font-weight:700;font-size:13px}
.k-overlay-hint{display:none;color:#9b9a95;font-family:var(--mono);font-size:12px}
@media (orientation:portrait) and (max-width:760px){.k-overlay-hint{display:block}}

/* Featured-Template auf der Startseite (Auswahl im Register) */
.k-featured{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,56px);align-items:center;scroll-margin-top:90px}
.k-feat-media{position:relative}
.k-feat-badge{position:absolute;z-index:2;left:clamp(-12px,-1vw,-4px);top:clamp(-40px,-3vw,-24px);width:clamp(84px,9vw,116px);aspect-ratio:1;rotate:-8deg}
.k-feat-badge svg{width:100%;height:100%;animation:k-spin 16s linear infinite}
.k-feat-text{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.k-feat-tag{font-family:var(--mono);font-size:13px;padding:6px 12px;border-radius:99px;background:var(--ink);color:var(--bg)}
.k-feat-name{font-weight:800;font-size:clamp(52px,7vw,104px);line-height:.88;letter-spacing:-.065em}
.k-feat-name a:hover{color:var(--blue)}
.k-featured .k-swatches i{width:28px;height:28px}
.k-card.is-featured{position:relative}
.k-feat-chip{position:absolute;z-index:2;top:-10px;right:-6px;rotate:6deg;padding:6px 12px;border-radius:99px;background:var(--yellow);color:var(--black);font-weight:800;font-size:13px;box-shadow:2px 2px 0 var(--ink)}
@media (max-width:900px){.k-featured{grid-template-columns:1fr}.k-feat-badge{top:-28px;left:auto;right:-14px}}

/* Kontaktseite: Adresse mit Kopier-Knopf, Formular */
.k-mailbox{display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap;margin-top:28px;padding:14px 16px 14px 20px;border-radius:16px;background:var(--chip)}
.k-mailbox-label{font-family:var(--mono);font-size:12px;color:var(--muted)}
.k-doc .k-mailbox-addr{font-weight:800;font-size:clamp(17px,2.4vw,20px);letter-spacing:-.02em;text-decoration:none;overflow-wrap:anywhere}
.k-copy{margin-left:auto;border:2px solid var(--ink);background:transparent;cursor:pointer;padding:8px 14px;border-radius:99px;font-weight:700;font-size:13px;transition:transform .3s var(--spring),background .2s}
.k-copy:hover{background:var(--yellow);color:var(--black);transform:translateY(-2px) rotate(-2deg)}
.k-form{display:flex;flex-direction:column;gap:16px;margin-top:32px}
.k-field{display:flex;flex-direction:column;gap:6px}
.k-field label{font-weight:700;font-size:14px}
.k-field input,.k-field select,.k-field textarea{font:inherit;color:var(--ink);background:var(--bg);border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;width:100%;transition:border-color .2s,box-shadow .2s}
.k-field textarea{resize:vertical;min-height:140px}
.k-field input:focus,.k-field select:focus,.k-field textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px #1d4fd033}
.k-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.k-doc .k-form-note{font-size:14px}
.k-form-end{display:flex;align-items:center;gap:12px 20px;flex-wrap:wrap}
.k-btn:disabled{opacity:.6;cursor:wait;animation:none}
.k-doc .k-form-status{font-weight:700;font-size:15px}
.k-doc .k-form-status.is-ok{color:var(--ink)}
.k-doc .k-form-status.is-ok::before{content:"✓ ";color:var(--blue)}
.k-doc .k-form-status.is-err{color:#c2261b}
:root[data-theme="dark"] .k-doc .k-form-status.is-err{color:#ff8a80}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .k-doc .k-form-status.is-err{color:#ff8a80}}

/* Fusszeile: "Cookie settings" wie ein Link; Links im Fliesstext */
.k-foot-btn{border:none;background:none;padding:0;cursor:pointer;font:inherit;color:inherit}
.k-foot-btn:hover{color:var(--blue)}
.k-inline,.k-pnote a{text-decoration:underline;text-underline-offset:3px}

/* Navigation Framer-Bereich: Logo führt zu /framer/, daneben der Weg zur Studio-Seite */
.k-brand{display:flex;align-items:center;gap:10px}
.k-studio{font-size:13px;font-weight:600;color:var(--muted);padding:4px 10px;border-radius:99px;border:1.5px solid var(--line)}
.k-studio:hover{color:var(--ink);border-color:var(--ink)}
.k-tile h3.k-big a:hover{color:inherit;text-decoration:underline}

/* Scrollbar im Seitendesign (hell/dunkel über die Tokens). Chromium/Safari über
   ::-webkit-scrollbar; Firefox über scrollbar-color, nur dort gesetzt, weil Chrome ab
   121 sonst die Webkit-Gestaltung ignoriert. */
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--ink);border:3px solid var(--bg);border-radius:99px;min-height:48px}
::-webkit-scrollbar-thumb:hover{background:var(--blue)}
::-webkit-scrollbar-thumb:active{background:var(--pink)}
::-webkit-scrollbar-corner{background:var(--bg)}
@supports (-moz-appearance:none){html{scrollbar-width:thin;scrollbar-color:var(--ink) var(--bg)}}

/* Verläufe im Templateshop: nur Markenfarben als Stopps (Blau, Gelb, Pink, Papier, Tinte),
   die Zwischentöne entstehen aus den Verläufen. Bewegung steht bei reduced motion still. */
@property --k-ang{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes k-mesh{0%,100%{background-position:0% 0%,0% 100%,30% 30%,0 0}50%{background-position:100% 30%,60% 0%,80% 70%,0 0}}
@keyframes k-turn{to{--k-ang:360deg}}
@keyframes k-glow{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(2%,-3%) scale(1.06)}}

/* 1. Plugin-Kachel: Mesh aus Blau mit Pink und einem Hauch Gelb */
.k-tile.is-mesh{background:
  radial-gradient(45% 60% at 76% 6%,#ff48b0 0%,color-mix(in oklch,#ff48b0 50%,transparent) 35%,transparent 70%),
  radial-gradient(40% 50% at 8% 86%,#ffe800 0%,color-mix(in oklch,#ffe800 45%,transparent) 30%,transparent 68%),
  radial-gradient(60% 80% at 30% 30%,color-mix(in oklch,#1d4fd0 70%,#f4f2ec) 0%,transparent 70%),
  #1d4fd0;
  background-size:120% 120%,120% 120%,120% 120%,auto;animation:k-mesh 14s ease-in-out infinite}
.k-tile.is-mesh::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.2;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* 2. Featured: weicher Schein aus Blau und Pink hinter der Live-Vorschau (Rahmen bleibt neutral) */
.k-feat-media{isolation:isolate}
.k-feat-media::before{content:"";position:absolute;inset:-10% -8%;z-index:-1;pointer-events:none;
  background:radial-gradient(42% 52% at 24% 38%,var(--g1,#1d4fd0) 0%,transparent 70%),radial-gradient(40% 50% at 80% 66%,var(--g2,#ff48b0) 0%,transparent 70%);
  filter:blur(46px);opacity:.5;animation:k-glow 12s ease-in-out infinite}
:root[data-theme="dark"] .k-feat-media::before{opacity:.7}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .k-feat-media::before{opacity:.7}}

/* 3. Preiskarte: drehender Verlaufsrand Blau - Gelb - Pink */
.k-pricing{border:4px solid transparent;background:linear-gradient(var(--inv),var(--inv)) padding-box,conic-gradient(from var(--k-ang),#1d4fd0,#ffe800,#ff48b0,#1d4fd0) border-box;animation:k-turn 8s linear infinite}
@media (max-width:900px){.k-feat-media::before{inset:-8% 0}}

/* Semi-Featured (Startseite /framer/, bis 3): Layout wie Featured, ruhig, ohne Verlauf. */
.k-semi{display:flex;flex-direction:column;gap:clamp(64px,9vw,128px)}
.k-semi-item{position:relative;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,56px);align-items:center}
.k-semi-tag{font-family:var(--mono);font-size:13px;padding:5px 12px;border-radius:99px;border:1.5px solid var(--line);color:var(--muted)}
.k-semi-name{font-weight:800;font-size:clamp(44px,5.6vw,84px);line-height:.9;letter-spacing:-.06em}
.k-semi-name a:hover{color:var(--blue)}
.k-semi-media{position:relative}
@media (max-width:900px){.k-semi-item{grid-template-columns:1fr}}
/* Featured-Titel: normal in Tinte, nur im Hover in einer der Scheinfarben (Generator wählt je
   Modus die mit genug Kontrast); der Punkt wechselt im Hover auf die andere Farbe. */
.k-featured .k-feat-name a,.k-featured .k-feat-name .k-stop{transition:color .25s}
.k-featured .k-feat-name:hover a{color:var(--ft-l,var(--blue))}
.k-featured .k-feat-name:hover .k-stop{color:var(--fd-l,var(--pink))}
:root[data-theme="dark"] .k-featured .k-feat-name:hover a{color:var(--ft-d,var(--blue))}
:root[data-theme="dark"] .k-featured .k-feat-name:hover .k-stop{color:var(--fd-d,var(--pink))}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .k-featured .k-feat-name:hover a{color:var(--ft-d,var(--blue))}:root:not([data-theme="light"]) .k-featured .k-feat-name:hover .k-stop{color:var(--fd-d,var(--pink))}}
/* Semi-Featured im Dunkelmodus: grauer Hover statt Blau (Blau auf Schwarz zu schwach) */
:root[data-theme="dark"] .k-semi-name a:hover{color:var(--muted)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .k-semi-name a:hover{color:var(--muted)}}
/* Featured und Semi-Featured: "Details" im Hover neutral (grau) statt pink, wie der Kauf-Knopf */
.k-featured .k-ghost:hover,.k-semi .k-ghost:hover{background:var(--chip);border-color:var(--ink);color:var(--ink);box-shadow:5px 6px 0 var(--muted);transform:translate(-2px,-3px)}
/* Desktop: Featured und Semi-Featured breiter als der Seiteninhalt, Vorschau rund 20 % grösser */
@media (min-width:1100px){
  .k-featured,.k-semi{margin-inline:calc(50% - min(50vw - 32px, 720px))}
  .k-featured,.k-semi-item{grid-template-columns:minmax(0,7.8fr) minmax(0,4.2fr)}
}

/* Landingpages (SEO 2026-10-04): Schrittliste (/framer/stripe/) und Vergleichstabelle (/framer/vs/wordpress/) */
.k-steps{counter-reset:k-step;list-style:none;padding:0;border-top:1.5px solid var(--line);font-size:16px}
.k-steps li{counter-increment:k-step;position:relative;padding:14px 0 14px 52px;border-bottom:1.5px solid var(--line);color:var(--muted)}
.k-steps li::before{content:counter(k-step,decimal-leading-zero);position:absolute;left:0;top:17px;font-family:"JetBrains Mono",monospace;font-size:13px;color:var(--ink)}
.k-steps strong{color:var(--ink)}
.k-compare{margin-top:24px;border-top:1.5px solid var(--line);font-size:15px}
.k-compare-row{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1fr) minmax(0,1fr);gap:16px;padding:14px 0;border-bottom:1.5px solid var(--line);color:var(--muted)}
.k-compare-row span:first-child{color:var(--ink);font-weight:700}
.k-compare-row.is-head span{color:var(--ink);font-weight:800;font-size:17px}
@media (max-width:640px){.k-compare-row{grid-template-columns:1fr 1fr}.k-compare-row span:first-child{grid-column:1/-1}.k-compare-row.is-head span:first-child{display:none}}

/* Gemessene Ladezeit auf den Template-Detailseiten (templates/speed.js, 2026-10-04).
   Ringe und Marker füllen sich beim Hineinscrollen; Farben: Blau >= 90, Gelb 50-89, Pink < 50 */
.k-speed-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:28px}
.k-speed .is-good{--c:var(--blue)}.k-speed .is-mid{--c:var(--yellow)}.k-speed .is-low{--c:var(--pink)}
.k-gauges{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.k-gauge{display:flex;flex-direction:column;align-items:center;gap:14px;padding:26px 14px 22px;border-radius:26px;background:var(--card);box-shadow:0 0 0 1.5px var(--line);transition:transform .35s var(--spring),box-shadow .35s var(--spring)}
.k-gauge:hover{transform:translateY(-5px) rotate(-1.5deg);box-shadow:0 0 0 1.5px var(--ink),6px 6px 0 var(--c)}
.k-g-ring{position:relative;width:min(148px,100%)}
.k-g-ring svg{display:block;width:100%;height:auto}
.k-g-track{fill:none;stroke:var(--chip);stroke-width:11}
.k-g-bar{fill:none;stroke:var(--c);stroke-width:11;stroke-linecap:round;stroke-dasharray:100 100;stroke-dashoffset:calc(100 - var(--v));transform:rotate(-90deg);transform-origin:60px 60px;transition:stroke-dashoffset 1.3s cubic-bezier(.2,.8,.2,1) calc(var(--i) * .12s)}
.k-g-num{position:absolute;inset:0;display:grid;place-items:center;font-weight:800;font-size:clamp(32px,4.2vw,46px);letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.k-g-label{font-weight:700;font-size:15px;text-align:center}
.k-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:16px}
.k-metric{display:flex;flex-direction:column;gap:8px;padding:20px 22px;border-radius:22px;background:var(--card);box-shadow:0 0 0 1.5px var(--line)}
.k-m-name{font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--muted)}
.k-m-val{font-weight:800;font-size:34px;letter-spacing:-.045em;line-height:1.05;font-variant-numeric:tabular-nums}
.k-m-scale{position:relative;display:grid;grid-template-columns:40fr 30fr 30fr;gap:3px;height:8px;margin:8px 0 4px}
.k-m-scale i{border-radius:99px;opacity:.35}
.k-m-scale i:nth-child(1){background:var(--blue)}.k-m-scale i:nth-child(2){background:var(--yellow);opacity:.6}.k-m-scale i:nth-child(3){background:var(--pink)}
.k-m-scale b{position:absolute;top:50%;width:20px;height:20px;border-radius:50%;background:var(--c);box-shadow:0 0 0 3px var(--card),0 0 0 4.5px var(--ink);transform:translate(-50%,-50%);transition:left 1.3s cubic-bezier(.2,.8,.2,1) .3s}
.k-m-hint{font-size:13px;color:var(--muted)}
.k-speed-note{margin-top:22px;font-size:14px;color:var(--muted);max-width:780px;text-wrap:pretty}
.k-speed-note a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.k-speed.is-armed .k-speed-panel:not(.is-in) .k-g-bar{stroke-dashoffset:100;transition:none}
.k-speed.is-armed .k-speed-panel:not(.is-in) .k-m-scale b{left:0!important;transition:none}
@media (max-width:760px){.k-gauges{grid-template-columns:repeat(2,minmax(0,1fr))}.k-metrics{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.k-g-bar,.k-m-scale b,.k-gauge{transition:none}}